@charset "utf-8";

#atc02{overflow-x:hidden;position:relative;margin:600px 0;padding:200px 0 160px;width:100%;background-color:#f5f5f5}

/* top-left text */
#atc02 .inc02_wrap{position:relative;margin:auto;width:85%}
#atc02 .inc02_wrap .txt .tit{font-weight:300}
#atc02 .inc02_wrap .txt .tit span{font-size:40px;font-weight:700;color:#f77e01}

/* left img */
#atc02 .inc02_wrap .img_wrap{margin-top:100px;overflow:hidden}
#atc02 .inc02_wrap .img_wrap ul{display:flex;width:100%;height:55vh}
#atc02 .inc02_wrap .img_wrap li{display:flex;flex-shrink:0;width:100%;height:100%}
#atc02 .inc02_wrap .img_wrap li .img_cont{width:50%;height:100%}
#atc02 .inc02_wrap .img_wrap li .img_cont img{width:100%;height:100%;object-fit:cover}

/* right text */
#atc02 .inc02_wrap .img_wrap li .txt_cont{display:flex;flex-direction:column;justify-content:end;position:relative;margin:0 125px;padding-bottom:50px;width:calc(50% - 250px);height:100%}
#atc02 .inc02_wrap .img_wrap li .txt_cont h3{margin-top:10px}
#atc02 .inc02_wrap .img_wrap li .txt_cont .num{position:absolute;top:0px;right:0px;font-size:70px;font-weight:400;color:#fdbd81}
#atc02 .inc02_wrap .img_wrap li .txt_cont .en{font-size:16px;font-weight:400}
#atc02 .inc02_wrap .img_wrap li .txt_cont .en2{font-size:16px;font-weight:400;color:#000000}
#atc02 .inc02_wrap .img_wrap li .txt_cont .pl{margin-top:20px;font-size:16px;font-weight:400}
#atc02 .inc02_wrap .img_wrap li .txt_cont a{position:relative;display:flex;align-items:center;margin-top:60px;width:max-content;font-size:13px;font-weight:700;color:#777}
#atc02 .inc02_wrap .img_wrap li .txt_cont a:after{content:"";position:absolute;bottom:12px;left:70px;width:0px;height:1px;transition:all 0.3s;background-color:#111}
#atc02 .inc02_wrap .img_wrap li .txt_cont a span{position:relative;display:block;margin-right:20px;width:50px;height:50px;transition:all .3s;border:1px solid #ffad59;border-radius:50%}
#atc02 .inc02_wrap .img_wrap li .txt_cont a span:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);transition:all .3s;width:4px;height:4px;border-radius:50%;background-color:#ffad59}

/* 반응형 [s] */
@media (hover:hover){
#atc02 .inc02_wrap .img_wrap li .txt_cont a:hover{color:#111}
#atc02 .inc02_wrap .img_wrap li .txt_cont a:hover:after{width:calc(100% - 70px)}
#atc02 .inc02_wrap .img_wrap li .txt_cont a:hover span{border:1px solid #ffad59}
#atc02 .inc02_wrap .img_wrap li .txt_cont a:hover span:after{width:9px;height:9px;background-color:#ffad59}
}
@media (max-width:1380px){
#atc02{margin:500px 0}
#atc02 .inc02_wrap{width:90%}
#atc02 .inc02_wrap .txt .tit span{font-size:36px}
#atc02 .inc02_wrap .img_wrap ul{height:45vh}
#atc02 .inc02_wrap .img_wrap li .txt_cont{margin:0 40px;width:calc(50%  - 20px)}
#atc02 .inc02_wrap .img_wrap li .txt_cont .num{font-size:60px}
}
@media (max-width:1024px){
#atc02{margin:400px 0 0;padding:150px 0}
#atc02 .inc02_wrap{width:95%}
#atc02 .inc02_wrap .txt .tit span{font-size:30px}
#atc02 .inc02_wrap .img_wrap{margin-top:75px}
#atc02 .inc02_wrap .img_wrap ul{height:38vh}
#atc02 .inc02_wrap .img_wrap li .txt_cont{justify-content:center;padding:0px;margin:0 2.5%;width:calc(50% - 5%)}
#atc02 .inc02_wrap .img_wrap li .txt_cont .pl{font-size:15px}
#atc02 .inc02_wrap .img_wrap li .txt_cont a{margin-top:45px}
#atc02 .inc02_wrap .img_wrap li .txt_cont a span{width:45px;height:45px}
#atc02 .inc02_wrap .img_wrap li .txt_cont a:hover span:after{width:7px;height:7px}
#atc02 .inc02_wrap .img_wrap li .txt_cont .num{font-size:50px}
}
@media (max-width:768px){
#atc02{padding:140px 0 0}
#atc02 .inc02_wrap .txt{text-align:center}
#atc02 .inc02_wrap .txt .tit span{font-size:28px}
#atc02 .inc02_wrap .img_wrap{margin-top:60px}
#atc02 .inc02_wrap .img_wrap ul{flex-direction:column;height:auto}
#atc02 .inc02_wrap .img_wrap li{flex-direction:column}
#atc02 .inc02_wrap .img_wrap li .img_cont{width:100%;height:370px}
#atc02 .inc02_wrap .img_wrap li .txt_cont{margin:60px auto;width:95%}
#atc02 .inc02_wrap .img_wrap li .txt_cont h3{margin-top:15px}
#atc02 .inc02_wrap .img_wrap li .txt_cont .pl{margin-top:30px}
#atc02 .inc02_wrap .img_wrap li .txt_cont a{margin-top:35px}
#atc02 .inc02_wrap .img_wrap li .txt_cont .num{top:-13px;font-size:45px}
#atc02 .inc02_wrap .img_wrap li .txt_cont a span{margin-right:15px;width:40px;height:40px}
#atc02 .inc02_wrap .img_wrap li .txt_cont a:after{left:55px}
#atc02 .inc02_wrap .img_wrap li .txt_cont a:hover span:after{width:6px;height:6px}
#atc02 .inc02_wrap .img_wrap li .txt_cont a:hover:after{width:calc(100% - 55px)}
}
@media (max-width:480px){
#atc02{margin:30px 0 0;padding:90px 0 50px}
#atc02 .inc02_wrap .txt .tit span{font-size:22px}
#atc02 .inc02_wrap .img_wrap{margin-top:45px}
#atc02 .inc02_wrap .img_wrap li .img_cont{height:275px}
#atc02 .inc02_wrap .img_wrap li .txt_cont{margin:50px auto}
#atc02 .inc02_wrap .img_wrap li .txt_cont h3{margin-top:10px;font-size:20px}
#atc02 .inc02_wrap .img_wrap li .txt_cont .pl{margin-top:20px;font-size:14px}
#atc02 .inc02_wrap .img_wrap li .txt_cont .num{font-size:38px}
#atc02 .inc02_wrap .img_wrap li .txt_cont a{margin-top:30px;color:#111}
#atc02 .inc02_wrap .img_wrap li .txt_cont a:after{bottom:8px;width:calc(100% - 55px)}
#atc02 .inc02_wrap .img_wrap li .txt_cont a span{width:37px;height:37px;border:1px solid #111}
#atc02 .inc02_wrap .img_wrap li .txt_cont a span:after{width:6px;height:6px;background-color:#111}
}
@media (max-width:380px){
#atc02{padding:80px 0 50px}
#atc02 .inc02_wrap .txt .tit span{font-size:19px}
#atc02 .inc02_wrap .img_wrap{margin-top:30px}
#atc02 .inc02_wrap .img_wrap li .img_cont{height:220px}
#atc02 .inc02_wrap .img_wrap li .txt_cont{margin:40px auto}
#atc02 .inc02_wrap .img_wrap li .txt_cont h3{margin-top:8px;font-size:18px}
#atc02 .inc02_wrap .img_wrap li .txt_cont .pl{margin-top:16px;font-size:13px}
#atc02 .inc02_wrap .img_wrap li .txt_cont .num{font-size:34px}
#atc02 .inc02_wrap .img_wrap li .txt_cont a{margin-top:30px}
#atc02 .inc02_wrap .img_wrap li .txt_cont a span{margin-right:12px;width:35px;height:35px}
#atc02 .inc02_wrap .img_wrap li .txt_cont a:after{left:47px;width:calc(100% - 47px)}
#atc02 .inc02_wrap .img_wrap li .txt_cont a:hover:after{width:calc(100% - 47px)}
}
/* 반응형 [e] */