@charset "utf-8";
#atc01{position:relative;width:100%}
#atc01 h2{font-size:25px;font-weight:400;font-family:var(--e-font)}
#atc01 h3{font-size:20px;font-weight:700}
#atc01 .company{display:flex;flex-direction:column;width:100%}
#atc01 .company h2, #atc01 .company h3{color:var(--primary);transition:all .3s}
#atc01 .company p{margin-top:25px;font-size:16px;font-weight:400;color:#777;transition:all .3s}
#atc01 .company .top{margin:80px auto 100px;width:80%}
#atc01 .company .bot{display:flex;align-items:flex-start;border-top:1px solid #e1e1e1;width:100%}
#atc01 .company .bot > a{overflow:hidden;position:relative;width:calc(50%);transition:all .3s}
#atc01 .company .bot > a:first-child{padding:100px 8% 100px 10%}
#atc01 .company .bot > a:last-child{padding:100px 10% 100px 8%;border-left:1px solid #e1e1e1}
#atc01 .special{display:flex;align-items:flex-start;position:relative;width:100%}
#atc01 .special h2, #atc01 .special h3{color:#fff}
#atc01 .special h3{margin-top:15px}
#atc01 .special h4{margin-top:30px;font-size:16px;font-weight:700;color:#fff}
#atc01 .special p{margin-top:20px;font-size:14px;font-weight:400;color:rgb(255, 255, 255, 0.6)}
#atc01 .special > div{width:50%}
#atc01 .special .premium{position:sticky;top:0px;left:0px;padding:150px 10%;background-color:var(--primary)}
#atc01 .special .points{display:flex;margin:70px 0 50px;padding-bottom:70px;border-bottom:1px solid rgb(255, 255, 255, 0.2);width:100%}
#atc01 .special .points > div{width:50%}
#atc01 .special .unique h3{margin-top:0px;line-height:1}
#atc01 .special .unique h3 span{margin-right:6px;font-size:100px;font-weight:400;font-family:var(--e-font02)}
#atc01 .special .unique a{position:relative;display:block;margin-top:40px;padding-bottom:8px;width:max-content;font-size:14px;font-weight:700;color:#fff;transition:all .3s}
#atc01 .special .unique a:after{content:"";position: absolute;bottom:0px;left:0px;width:100%;height:2px;background:linear-gradient(to right, #fff, #fff) no-repeat;background-size:0%;transition:all .3s}
#atc01 .special .img_cont{display:grid;grid-template-columns:repeat(2, 1fr)}
#atc01 .special .img_cont > div:nth-child(-n+2){height:780px}
#atc01 .special .img_cont > div:nth-child(2) img{filter:brightness(0.5)}
#atc01 .special .img_cont > div:last-child{grid-column:span 2;height:560px}
#atc01 .special .img_cont img{width:100%;height:100%;object-fit:cover}
#atc01 .special .img_cont a{position:relative;display:block;width:100%;height:100%}
#atc01 .special .img_cont a:after{opacity:0;content:"";position:absolute;bottom:0px;left:0px;width:100%;height:100%;background:linear-gradient(to bottom, transparent 20%, #111111);transition:all .5s}
#atc01 .special .img_cont a .more{opacity:0;position:absolute;z-index:2;top:55%;left:50%;transform:translate(-50%, -50%);transition:all .5s;font-size:48px;font-weight:600;font-family:var(--e-font);letter-spacing:2px;color:#fff}


/* 반응형 [s] */
@media (hover:hover){
#atc01 .company .bot > a:hover{background-color:var(--hover-color)}
#atc01 .company .bot > a:hover h2{color:#fff}
#atc01 .company .bot > a:hover p{color:rgb(255, 255, 255, 0.6)}
#atc01 .special .unique a:hover:after{background-size:100%}
#atc01 .special .img_cont a:hover:after{opacity:1}
#atc01 .special .img_cont a:hover .more{opacity:1;top:50%}
}
@media(max-width:1980px){
#atc01 .company .top{margin:60px auto 80px}  
#atc01 .company .bot > a:first-child{padding:80px 8% 80px 10%}
#atc01 .company .bot > a:last-child{padding:80px 10% 80px 8%}
#atc01 .special .premium{padding:130px 10%}
#atc01 .special .img_cont > div:nth-child(-n+2){height:700px}
#atc01 .special .img_cont > div:last-child{height:500px}
}
@media (max-width:1380px){
#atc01 h2{font-size:23px}
#atc01 .company p{font-size:15px}
#atc01 .company .top{width:90%}
#atc01 .company .bot > a:first-child, #atc01 .company .bot > a:last-child{padding:80px 5%}
#atc01 .special .premium{padding:130px 5%}
#atc01 .special .img_cont a .more{font-size:42px}
}
@media (max-width:1024px){
#atc01 h2{font-size:21px}
#atc01 h3{font-size:18px}
#atc01 .company p{margin-top:20px}
#atc01 .company .top{margin:50px auto 60px;width:95%}
#atc01 .company .bot > a:first-child, #atc01 .company .bot > a:last-child{padding:60px 2.5%}
#atc01 .special h4{font-size:15px}
#atc01 .special .points{margin:60px 0 40px;padding-bottom:60px}
#atc01 .special .points > div img{width:52px;height:52px}
#atc01 .special .premium{padding:80px 2.5%}
#atc01 .special .img_cont{display:flex;flex-direction:column}
#atc01 .special .img_cont > div:nth-child(-n+2), #atc01 .special .img_cont > div:last-child{height:500px}
#atc01 .special .img_cont a .more{font-size:38px}
#atc01 .special .unique h3 span{font-size:90px}
}
@media (max-width:768px){
#atc01 h2{font-size:19px}
#atc01 h3{font-size:16px}
#atc01 .company p{margin-top:12px;font-size:14px}
#atc01 .company .top{margin:65px auto;text-align:center}
#atc01 .company .bot > a{text-align:center}
#atc01 .company .bot > a:first-child, #atc01 .company .bot > a:last-child{padding:50px 2.5%}
#atc01 .special h3{margin-top:12px}
#atc01 .special .premium{padding:60px 2.5%;text-align:center}
#atc01 .special .points{flex-direction:column;gap:35px;margin:40px auto 20px;padding-bottom:40px}
#atc01 .special .points > div{width:100%}
#atc01 .special .points > div img{width:46px;height:46px}
#atc01 .special .img_cont > div:nth-child(-n+2), #atc01 .special .img_cont > div:last-child{height:440px}
#atc01 .special .img_cont a .more{font-size:34px}
#atc01 .special h4{margin-top:25px;font-size:14px}
#atc01 .special p{margin-top:12px;font-size:13px}
#atc01 .special .unique h3 span{font-size:75px}
#atc01 .special .unique a{margin:30px auto 0}
}
@media (max-width:480px){
#atc01 h2{font-size:18px}
#atc01 h3{font-size:15px}
#atc01 .company p{margin-top:12px}
#atc01 .company .top{margin:55px auto}
#atc01 .company .top p{margin:10px auto 0;width:90%}
#atc01 .company .bot p{font-size:13px}
#atc01 .special{flex-direction:column}
#atc01 .special > div{width:100%}
#atc01 .special .premium{position:static;padding:50px 2.5%}
#atc01 .special .points{margin-bottom:10px}
#atc01 .special p{margin:12px auto 0;width:90%}
#atc01 .special .unique h3 span{font-size:65px}
#atc01 .special .img_cont{display:grid;grid-template-columns:repeat(2, 1fr)}
#atc01 .special .img_cont > div:nth-child(-n+2){height:330px}
#atc01 .special .img_cont > div:last-child{height:270px}
#atc01 .special .img_cont a .more{font-size:28px}
}
@media (max-width:390px){
#atc01 h2{font-size:16px}
#atc01 h3{font-size:14px}
#atc01 .company p{margin-top:10px;font-size:13px}
#atc01 .company .bot > a:first-child, #atc01 .company .bot > a:last-child{padding:45px 2.5%}
#atc01 .company .bot p{font-size:12px}
#atc01 .special .premium{padding:45px 2.5%}
#atc01 .special h3{margin-top:10px}
#atc01 .special h4{margin-top:20px}
#atc01 .special p{margin-top:10px}
#atc01 .special .points{margin-top:35px}
#atc01 .special .points > div img{width:42px;height:42px}
#atc01 .special .unique a{margin-top:25px;font-size:13px}
#atc01 .special .unique h3 span{font-size:55px}
#atc01 .special .img_cont > div:nth-child(-n+2){height:280px}
#atc01 .special .img_cont > div:last-child{height:220px}
#atc01 .special .img_cont a .more{font-size:25px}
}
/* 반응형 [e] */