@charset "utf-8";

#atc02{position:relative;width:1400px;margin:0 auto;padding:150px 0 70px;font-family:'notokr-regular'}

#atc02 .scroll_arrow{position:absolute;left:50%;top:50px;width:55px;transform:translateX(-50%)}
#atc02 .scroll_arrow .arrow{position:absolute;width:55px;height:28px;opacity:0}
#atc02 .scroll_arrow .arrow_img{position:absolute;left:0;width:100%;height:100%;background-image:url(/sh_img/include/inc02/img/arr.png);background-size:55px 28px;background-repeat:no-repeat}
#atc02 .scroll_arrow .arrow:nth-child(1){-webkit-animation:arrow 2100ms 0s linear infinite;animation:arrow 2100ms 0s linear infinite}
#atc02 .scroll_arrow .arrow:nth-child(2){-webkit-animation:arrow 2100ms 700ms linear infinite;animation:arrow 2100ms 700ms linear infinite}
#atc02 .arrow:nth-child(3){-webkit-animation:arrow 2100ms 1400ms linear infinite;animation:arrow 2100ms 1400ms linear infinite}
@-webkit-keyframes arrow{0%{-webkit-transform:translate(0px, 0px);opacity:0}50%{-webkit-transform:translate(0px, 20px);opacity:1}100%{-webkit-transform:translate(0px, 40px);opacity:0}}
@keyframes arrow{0%{transform:translate(0px, 0px);opacity:0}50%{transform:translate(0px, 20px);opacity:1}100%{transform:translate(0px, 40px);opacity:0}}

#atc02 .tit_area{font-size:15px;color:#888;letter-spacing:-.15px;line-height:1.7;text-align:center}
#atc02 .tit_area p{margin-bottom:17px;font-size:30px;color:#222;letter-spacing:-.8px;font-family:'notokr-demilight'}

#atc02 ul{margin-top:40px;text-align:center}
#atc02 ul li{display:inline-block;vertical-align:top;position:relative;margin:0 10px;cursor:pointer}
#atc02 ul li .img{overflow:hidden;position:relative; z-index:0;width:324px;height:307px}
#atc02 ul li .img img{-webkit-transition:all .6s;transition:all .6s}
#atc02 ul li .overlay{position:absolute;left:0;top:0; z-index:1;width:100%;height:100%;margin-top:-100%;text-align:center;background-color:rgba(45,47,55,.6);opacity:0;-webkit-transition:all .4s;transition:all .4s}
#atc02 ul li .overlay span{display:inline-block;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:52px;height:52px;margin-top:20px;border-radius:100%;color:#fff;line-height:52px;text-align:center;background-color:rgba(255,255,255,.2);opacity:0;-webkit-transition:all .4s .3s;transition:all .4s .3s}
#atc02 ul li .tit{padding-top:15px;font-size:16px;color:#222;font-family:'notokr-bold'}
#atc02 ul li:hover .overlay{margin-top:0;opacity:1}
#atc02 ul li:hover .overlay span{margin-top:0;opacity:1}
#atc02 ul li:hover .img img{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}

/* fadeInUp  */
#atc02 ul li:first-child{animation-delay:.2s}
#atc02 ul li:nth-child(2){animation-delay:.4s}
#atc02 ul li:last-child{animation-delay:.6s}
#atc02 .animated{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
#atc02 .zoomIn{animation-name:zoomIn}
@-webkit-keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}
@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}