@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 .scroll_arrow .arrow:nth-child(3){-webkit-animation:arrow 2100ms 1400ms linear infinite;animation:arrow 2100ms 1400ms linear infinite}
@-webkit-keyframes arrow{
    0%{-webkit-transform:translate(0,0);opacity:0}
    50%{-webkit-transform:translate(0,20px);opacity:1}
    100%{-webkit-transform:translate(0,40px);opacity:0}
}
@keyframes arrow{
    0%{transform:translate(0,0);opacity:0}
    50%{transform:translate(0,20px);opacity:1}
    100%{transform:translate(0,40px);opacity:0}
}
/* 타이틀 */
#atc02 .tit_area{font-size:15px;color:#888;letter-spacing:-.15px;line-height:1.7;text-align:center;font-family:'Pretendard'}
#atc02 .tit_area p{margin-bottom:17px;font-size:30px;color:#222;letter-spacing:-.8px;font-family:'Pretendard';font-weight:600}

/* 리스트 */
#atc02 ul{margin-top:40px;text-align:center}
#atc02 ul li{display:inline-block;vertical-align:top;position:relative;margin:0 10px}
#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: 17px;color:#222;font-family: 'Pretendard';font-weight: 600;}

/* 호버 */
#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)}

/* 애니메이션 딜레이 */
#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}
}