@charset "utf-8";

#atc01{position:relative;padding:200px 0 0;font-weight:300;font-family:'Poppins','Noto Sans KR'}
#atc01 .inner{position:relative;max-width:1300px;margin:0 auto;padding-bottom:150px}

/* 텍스트 */
#atc01 .scr_txt{position:absolute;top:44%;right:0;font-size:117px;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.11);-webkit-transition:all .6s linear;transition:all .6s linear}
#atc01 .scr_txt.txt2{top:74%;right:auto;left:0}

/* 타이틀 */
#atc01 .tit{margin-bottom:100px;text-align:center}
#atc01 .tit span{font-size:12px;font-weight:600;letter-spacing:.2px;color:rgba(255,255,255,.4)}
#atc01 .tit h2{font-size:33px;font-weight:600;color:#fff}

/* 이미지 */
#atc01 ul{margin-bottom:65px}
#atc01 ul:after{display:block;content:"";visibility:hidden;clear:both}
#atc01 ul li{float:left}
#atc01 ul li:not(:first-child){margin-top:110px}
#atc01 ul li:nth-child(even){float:right}
#atc01 ul li h3{padding-top:10px;font-size:21px;font-weight:600;color:#fff}
#atc01 ul li h3 span{display:block;font-size:14px;font-weight:normal;color:rgba(255,255,255,.4)}
#atc01 ul li .img{overflow:hidden;position:relative;width:560px;height:400px;cursor:pointer}
#atc01 ul li .img:before{display:block;content:"";position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s;
background:-webkit-gradient(linear, left top, right bottom, color-stop(0, #16429a), color-stop(1, #c72452));
background:linear-gradient(-45deg,  #16429a 0%, #c72452 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#16429a', endColorstr='#c72452', gradientType=1)}
#atc01 .tilter{display:block;position:relative;perspective:1000px}
#atc01 .tilter__figure{margin:0}
#atc01 .smooth .tilter__figure, .smooth .tilter__deco--overlay{transition:transform .2s ease-out}

/* 링크 */
#atc01 .more_btn{display:block;position:relative;width:300px;height:70px;margin:0 auto;font-size:12px;font-weight:600;color:#fff;line-height:70px;text-align:center;background-color:rgba(255,255,255,.1);text-transform:uppercase;-webkit-transition:all .2s;transition:all .2s}
#atc01 .more_btn span{position:relative;z-index:1}
#atc01 .more_btn:before{display:block;content:"";position:absolute;left:0;top:0;z-index:0;width:100%;height:100%;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s;
background:-webkit-gradient(linear, left top, right top, color-stop(0, #c72452), color-stop(1, #16429a));
background:linear-gradient(left,  #c72452 0%, #16429a 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c72452', endColorstr='#16429a', gradientType=1)}

/* 그리드 */
#atc01 .grid{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;width:100%;max-width:1300px}
#atc01 .grid span{display:block;position:absolute;top:0;z-index:1;width:1px;height:100%;background:rgba(255,255,255,.08)}
#atc01 .grid em{display:block;position:absolute;z-index:1;width:3px;height:3px;margin-left:-1px;border-radius:3px;background-color:#fff;-webkit-animation:scroll linear 3.5s infinite;animation:scroll linear 3.5s infinite}
#atc01 .grid em.dot01{left:25%}
#atc01 .grid em.dot02{left:50%;-webkit-animation:scroll2 linear 3.5s infinite 1s;animation:scroll2 linear 3.5s infinite 1s}
#atc01 .grid em.dot03{left:75%;-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:1300px;opacity:0}15%{opacity:1}to{top:1400px;opacity:0}}
@keyframes scroll3{from{top:1300px;opacity:0}15%{opacity:1}to{top:1400px;opacity:0}}
@keyframes scroll3_m{from{top:100px;opacity:0}15%{opacity:1}to{top:300px;opacity:0}}
#atc01 .grid span.line01{left:25%}
#atc01 .grid span.line02{left:50%}
#atc01 .grid span.line03{left:75%}

/* 그리드 그라데이션 */
#atc01 .grid:before, #atc01 .grid:after{display:block;content:'';position:absolute;top:0;left:0;z-index:1001;width:100%;height:300px;background:-webkit-linear-gradient(bottom, rgba(18,20,31,0) 50%, rgba(18,20,31,1) 100%);background:linear-gradient(to top, rgba(18,20,31,0) 50%, rgba(18,20,31,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9912141f,endColorstr=#0012141f)}
#atc01 .grid:after{top:auto;bottom:0;height:250px;background:-webkit-linear-gradient(top, rgba(18,20,31,0) 50%, rgba(18,20,31,1) 100%);background:linear-gradient(to bottom, rgba(18,20,31,0) 50%, rgba(18,20,31,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0012141f,endColorstr=#9912141f)}

/* fade  */
.animated{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-delay:.3s;animation-delay:.3s}
@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translateY(50px)}to{opacity:1;-webkit-transform:none}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:none}}
#atc01 ul li:nth-child(even){animation-delay:.5s}


/* 반응형 [s] */
@media (hover:hover){
#atc01 ul li:hover .img:before{opacity:.8}
#atc01 .more_btn:hover:before{opacity:1}
}
@media (max-width:1280px){
#atc01 .inner{max-width:unset;width:95%}
#atc01 ul{display:flex;flex-wrap:wrap;gap:40px}
#atc01 ul:after{display:none}
#atc01 ul li{float:none;width:calc(100% / 2 - 20px)}
#atc01 ul li .img{width:100%;height:380px}
#atc01 ul li .img img{width:100%;height:100%;object-fit:cover}
#atc01 ul li:not(:first-child){margin-top:0px}
#atc01 ul li:nth-child(even){margin-top:100px}
}
@media (max-width:1024px){
#atc01{padding-top:110px}
#atc01 .grid em.dot03{animation:scroll3_m linear 3.5s infinite 1.5s}
#atc01 .scr_txt{font-size:80px}
#atc01 .tit h2{font-size:28px}
#atc01 ul li .img{height:280px}
#atc01 ul li h3{font-size:19px}
#atc01 ul li:nth-child(even){margin-top:80px}
#atc01 .more_btn{width:230px;height:65px;line-height:65px}
}
@media (max-width:768px){
#atc01{padding-top:90px}
#atc01 .scr_txt{display:none}
#atc01 .inner{padding-bottom:120px}
#atc01 .tit{margin-bottom:40px}
#atc01 .tit h2{font-size:26px}
#atc01 ul{gap:20px}
#atc01 ul li{position:relative;width:calc(100% / 2 - 10px)}
#atc01 ul li:hover .img img{transform:scale(120%)}
#atc01 ul li .img{height:235px}
#atc01 ul li .img:before{display:none}
#atc01 ul li .img img{filter:brightness(.4);transition:all .3s}
#atc01 ul li:nth-child(even){margin-top:0px}
#atc01 ul li h3{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;padding-top:0px;width:100%;line-height:1.5}
#atc01 ul li h3 span{color:rgb(255, 255, 255, 0.6)}
#atc01 .grid{display:none}
#atc01 .more_btn{width:210px;height:60px;line-height:60px}
}
@media (max-width:480px){
#atc01{padding-top:75px}
#atc01 .inner{padding-bottom:75px}
#atc01 .tit{margin-bottom:30px}
#atc01 .tit h2{font-size:23px}
#atc01 ul{gap:12px;margin-bottom:40px}
#atc01 ul li{width:calc(100% / 2 - 6px)}
#atc01 ul li h3{font-size:18px}
#atc01 ul li h3 span{font-size:13px}
#atc01 ul li .img{height:215px}
#atc01 .more_btn{width:190px;height:58px;line-height:58px}
}
@media (max-width:380px){
#atc01{padding-top:65px}
#atc01 .tit{margin-bottom:35px}
#atc01 .tit h2{font-size:21px}
#atc01 ul{margin-bottom:45px}
#atc01 ul li .img{height:200px}
#atc01 ul li h3{font-size:16px}
#atc01 .more_btn{width:175px;height:55px;line-height:55px}
}
/* 반응형 [e] */