@charset "utf-8";

#atc01{position:relative;width:100%;height:973px}
#atc01 .atc01_tit{padding:80px 0 74px;text-align:center;opacity:0}
#atc01 .atc01_tit .s_tit{margin-bottom:5px;font-weight:700;font-size:13px;letter-spacing:0;color:#274d8a;font-family:'Poppins', sans-serif}
#atc01 .atc01_tit h3{font-weight:normal;font-size:36px;color:#333;font-family:'notokr-thin'}
#atc01 .atc01_tit h3 span{font-family:'notokr-bold'}

#atc01 .atc01_cont{position:relative;overflow:hidden;width:1200px;margin:0 auto}
#atc01 .atc01_cont .l_box{float:left;margin-top:-50px;opacity:0}
#atc01 .atc01_cont .r_box{float:right;margin-top:110px;opacity:0}
#atc01 .atc01_cont > div{width:555px}
#atc01 .atc01_cont .img_box{position:relative;width:555px;height:410px;background:#232325}
#atc01 .atc01_cont .img_box img{position:absolute;z-index:1;transition:all .5s}
#atc01 .atc01_cont .img_box .img_txt{position:absolute;z-index:2;left:0;top:0;width:100%;height:410px;text-align:center}
#atc01 .atc01_cont .img_box .img_txt .img_stit{position:relative;top:30px;display:inline-block;padding:153px 0 3px;border-bottom:2px solid #fff;font-size:15px;color:#fff;opacity:0;transition:all .3s;font-family:'notokr-medium'}
#atc01 .atc01_cont .img_box .img_txt .img_tit{position:relative;top:-30px;padding-top:27px;font-size:31px;letter-spacing:-1px;color:#fff;opacity:0;transition:all .3s;font-family:'notokr-light'}

#atc01 .atc01_cont .cont_tit{margin-top:22px;font-weight:700;font-size:18px;text-align:center;color:#333;font-family:'notokr-bold'}
#atc01 .atc01_cont .cont_txt{margin-top:10px;font-size:14px;line-height:24px;text-align:center;color:#777;font-family:'notokr-regular'}

#atc01 .atc01_cont > div:hover .img_box .img_txt .img_stit{top:0;opacity:1}
#atc01 .atc01_cont > div:hover .img_box .img_txt .img_tit{top:0;opacity:1}
#atc01 .atc01_cont > div:hover .img_box img{opacity:.3;-webkit-filter: grayscale(100%);filter:gray}

/*라인*/
#atc01 .line_area{position:absolute;z-index:-1;top:0;left:50%;width:600px;height:100%;margin-left:-300px;border-left:1px solid #e8e8e8}
#atc01 .line_area > div{float:left;width:50%;height:100%;border-right:1px solid #e8e8e8}
#atc01 .line_area em{display:block;position:absolute;z-index:1;width:3px;height:3px;margin-left:-1px;border-radius:3px;background-color:#3e4b5c;-webkit-animation:scroll linear 3.5s infinite;animation:scroll linear 3.5s infinite;opacity:0}
#atc01 .line_area em.dot01{left:-1px}
#atc01 .line_area em.dot02{left:298px;-webkit-animation:scroll2 linear 3.5s infinite 1s;animation:scroll2 linear 3.5s infinite 1s}
#atc01 .line_area em.dot03{right:-1px;-webkit-animation:scroll3 linear 3.5s infinite 1.5s;animation:scroll3 linear 3.5s infinite 1.5s}
@-webkit-keyframes scroll{from{top:650px;opacity:0}15%{opacity:1}to{top:750px;opacity:0}}
@keyframes scroll{from{top:650px;opacity:0}15%{opacity:1}to{top:750px;opacity:0}}
@-webkit-keyframes scroll2{from{top:250px;opacity:0}15%{opacity:1}to{top:350px;opacity:0}}
@keyframes scroll2{from{top:250px;opacity:0}15%{opacity:1}to{top:350px;opacity:0}}
@-webkit-keyframes scroll3{from{top:850px;opacity:0}15%{opacity:1}to{top:950px;opacity:0}}
@keyframes scroll3{from{top:850px;opacity:0}15%{opacity:1}to{top:950px;opacity:0}}

/*active*/
#atc01.active .atc01_tit{padding-top:97px;opacity:1;transition:1s}
#atc01.active .atc01_cont .l_box{margin-top:0;opacity:1;transition:.7s;transition-delay:.5s}
#atc01.active .atc01_cont .r_box{margin-top:73px;opacity:1;transition:.7s;transition-delay:.5s}