@charset "utf-8";

#atc03{display:flex;width:57vw !important;color:#fff;opacity:0;transition:all .5s .5s}
#atc03.on{opacity:1}
#atc03 .link{width:30vw;background:var(--primary)}
#atc03 .link .tit{display:flex;flex-direction:column;justify-content:flex-end;height:55vh;padding:0 0 10% 10%;word-break:keep-all}
#atc03 .link .tit h2{margin-bottom:30px;font-size:30px;font-weight:normal;white-space:pre-line;font-family:var(--k-sf-font)}
#atc03 .link li a{display:flex;align-items:center;justify-content:space-between;height:calc(45vh / 3);padding:0 15% 0 10%;font-size:20px;font-weight:600;color:#fff;opacity:.4;transition:all .3s}
#atc03 .link li a h3{font-family:var(--k-font)}
#atc03 .unit{position:relative;width:27vw;background:var(--primary)}
#atc03 .unit .b_txt{display:flex;justify-content:space-between;align-items:center;justify-content:center}
#atc03 .unit .arrow{position:absolute;z-index:10;top:80%;left:50%;transform:translateX(-50%)}
#atc03 .unit .arrow span{margin:0 8px;opacity:.5;cursor:pointer;transition:all .3s}
#atc03 .unit .info{position:absolute;bottom:0;width:100%;padding:20px 60px 0;background:var(--primary)}
#atc03 .unit_cont{position:relative}
#atc03 .unit_cont ul{height:575px;padding-top:44px;border-right:1px solid #e1e1e1}
#atc03 .unit_cont li a{background:#fff}
#atc03 .unit_cont li img{width:100%}
#atc03 .unit_cont li.on img{width:100%}
#atc03 .unit_cont .img{width:100%;height:53vh;background:#fff}
#atc03 .unit_cont .img div{height:100%;background-repeat:no-repeat;background-position:center}
#atc03 .unit_cont .size{font-size:30px;font-weight:normal;text-align:center;font-family:var(--e-font)}
#atc03 .unit_cont .num{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:70px}
#atc03 .unit_cont dl{display:flex;gap:20px;font-size:16px;font-weight:500;word-break:keep-all}
#atc03 .unit .txt{position:absolute;bottom:-15px;left:50%;width:100%;text-align:center;opacity:20%;transform:translateX(-50%)}
#atc03 .unit .txt p{margin-top:10px;font-size:90px;line-height:90px;text-transform:uppercase;font-family:var(--e-font)}

/* 반응형 [s] */
@media(hover:hover){
#atc03 .link li a:hover{opacity:1;background:#012064}
#atc03 .unit .arrow span:hover{opacity:1}
}
@media (max-width:1670px){
#atc03 .unit .txt{bottom:20px;padding:0 10px}
#atc03 .unit .txt p{font-size:44px;line-height:1}
#atc03 .unit_cont li img{padding-top:50px}
}
@media (max-width:1530px){
/* #atc03 .unit_cont ul{height:407px;padding-top:44px}
#atc03 .unit_cont .img{height:42vh}
#atc03 .unit .arrow{top:51%}
#atc03 .unit .info{padding:20px 20px 50px} */
}
@media (max-width:1380px){
#atc03 .link .tit h2{font-size:28px}
#atc03 .link li a h3{font-size:18px}
#atc03 .link li a img{width:38px}
#atc03 .unit_cont .img{height:68vh;padding-top:50px}
#atc03 .unit_cont li img{padding-top:45px}
}
@media (max-width:1150px){
#atc03 .unit_cont li img{padding-top:60px}
}
@media (max-width:1024px){
#atc03{opacity:1 !important;margin:100px 0;width:100% !important}
#atc03 .link{width:50%}
#atc03 .link .tit{height:50vh}
#atc03 .link ul{border-right:1px solid rgb(255, 255, 255, 0.2)}
#atc03 .unit{width:50%}
#atc03 .unit .b_txt{justify-content:center}
#atc03 .unit_cont .img{height:58vh;padding-top:0}
#atc03 .unit_cont dl{justify-content:center}
#atc03 .unit .txt{bottom:38px}
#atc03 .unit_cont li img{padding-top:0;opacity:1 !important}
#atc03 .unit_cont .img div{position:relative;top:0}
#atc03 .unit_cont ul{height:580px;padding-top:0}
#atc03 .unit .arrow{top:78%}
}
@media (max-width:768px){
#atc03{flex-direction:column;margin:50px 0}
#atc03 .link{padding:60px 0 25px;width:100%}
#atc03 .link .tit{padding:0px;height:auto;text-align:center}
#atc03 .link .tit h2{margin-bottom:20px;font-size:26px}
#atc03 .link ul{display:flex;margin-top:50px}
#atc03 .link ul li{width:calc(100% / 3)}
#atc03 .link ul li a{flex-direction:column;gap:8px;padding:10px 0;height:auto}
#atc03 .link ul li a img{width:34px}
#atc03 .link ul li a h3{font-size:16px}
#atc03 .unit{width:100%}
#atc03 .unit_cont .img{margin:auto;width:95%;height:auto;border:none}
#atc03 .unit_cont .num{grid-template-columns:repeat(4, 1fr);margin-top:30px}
#atc03 .unit_cont dl{gap:12px}
#atc03 .unit .info{position:relative;width:initial;padding:40px 2.5% 165px}
#atc03 .unit .txt p{margin-top:8px;font-size:30px}
#atc03 .unit_cont li img{width:100%}
#atc03 .unit_cont ul{height:auto}
#atc03 .unit .arrow{display:flex;align-items:center;justify-content:center;position:relative;top:initial;left:initial;transform:initial;padding-bottom:20px}
#atc03 .unit .txt{position:relative;left:initial;transform:initial;bottom:initial;z-index:2;padding-bottom:40px}
#atc03 .unit .info{padding:40px 2.5% 20px}

}
@media (max-width:580px){
#atc03 .unit_cont .num{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:480px){
#atc03 .link{padding:50px 0 20px}
#atc03 .link ul{margin-top:25px}
#atc03 .link .tit h2{margin-bottom:16px;font-size:23px}
#atc03 .link ul li a img{width:30px}
#atc03 .link ul li a h3{font-size:14px}
/* #atc03 .unit_cont .img{height:300px} */
#atc03 .unit_cont .size{font-size:24px}
#atc03 .unit_cont .num{margin-top:20px}
#atc03 .unit .txt p{font-size:26px}
#atc03 .unit .info{padding-top:20px}
}
@media (max-width:380px){
#atc03 .link{padding:45px 0 15px}
#atc03 .link .tit h2{margin-bottom:9px;font-size:19px}
#atc03 .link ul li a img{width:26px}
#atc03 .link ul li a h3{font-size:13px}
/* #atc03 .unit_cont .img{height:270px} */
#atc03 .unit_cont .size{font-size:21px}
#atc03 .unit_cont .num{margin-top:14px;gap:15px}
#atc03 .unit .txt p{font-size:23px}
}
/* 반응형 [e] */
