@charset "utf-8";

#atc01{height:100vh;margin-top:0 !important;background:var(--primary)}
#atc01 .inner{height:50vh;padding-top:10%}
#atc01 h2{font-size:50px;font-weight:600;color:#fff;font-family:var(--e-font)}
#atc01 div{margin-top:30px;font-size:18px;color:rgba(255,255,255,.5)}
#atc01 ul{display:flex;height:50vh}
#atc01 ul li{width:calc(100% / 3);transition:all .3s;background-image:url(./img/img01.jpg);background-position:center;background-size:cover}
#atc01 ul li:nth-child(2){background-image:url(./img/img02.jpg)}
#atc01 ul li:nth-child(3){background-image:url(./img/img03.jpg)}
#atc01 ul li a{position:relative;display:flex;align-items:flex-end;padding:0 0 50px 70px;height:100%;font-size:30px;font-weight:700;color:#fff}
#atc01 ul li a:after{opacity:0;position:absolute;content:'';left:0;bottom:0;width:100%;height:0;background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,70%));transition:all .3s}
#atc01 ul li p{position:relative;z-index:10}

@media(hover:hover){
#atc01 ul li:hover{width:calc(100% / 3 + 100px)}
#atc01 ul li:hover a:after{opacity:1;height:100%}
}
/* 반응형 [s] */
@media (max-width:1024px){
#atc01{height:auto;background:none}
#atc01 .inner{height:auto;padding:10% 15px;background:var(--primary)}
#atc01 h2{font-size:35px}
#atc01 ul li a{padding:0 0 30px 30px;font-size:20px}
}
@media (max-width:768px){
#atc01 h2{font-size:30px}
#atc01 div{font-size:16px;text-align:center}
#atc01 ul{height:auto;flex-direction:column}
#atc01 ul li{width:100%}
#atc01 ul li a{height:160px;padding:0;justify-content:center;align-items:center;font-size:20px}
#atc01 ul li a:after{opacity:1;height:100%}
}
@media (max-width:480px){
#atc01 h2{font-size:23px}
#atc01 div{margin-top:20px;font-size:14px}
#atc01 ul li a{height:165px;font-size:18px}
}
@media (max-width:390px){
#atc01 div{margin-top:15px}
}
/* 반응형 [e] */