@charset "utf-8";

#atc03{position:relative;margin:-400px 0 200px;height:auto}
#atc03 .inc03_wrap{position:relative;display:flex;margin:auto;width:85%;height:auto}

/* left_tit */
#atc03 .inc03_wrap .txt{position:sticky;top:100px;width:50%;height:100%}
#atc03 .inc03_wrap .txt ul{margin-top:60px}
#atc03 .inc03_wrap .txt ul li{position:relative;font-size:16px;font-weight:700;transition:all .3s}
#atc03 .inc03_wrap .txt ul li.on{padding-left:25px;color:#111;transition:all .3s}
#atc03 .inc03_wrap .txt ul li+li{margin-top:20px}
#atc03 .inc03_wrap .txt ul .item01.on:after{content:"01.";position:absolute;top:50%;left:0px;transform:translateY(-50%)}
#atc03 .inc03_wrap .txt ul .item02.on:after{content:"02.";position:absolute;top:50%;left:0px;transform:translateY(-50%)}
#atc03 .inc03_wrap .txt ul .item03.on:after{content:"03.";position:absolute;top:50%;left:0px;transform:translateY(-50%)}
#atc03 .inc03_wrap .txt ul .item04.on:after{content:"04.";position:absolute;top:50%;left:0px;transform:translateY(-50%)}
#atc03 .inc03_wrap .txt .tit{font-weight:300}
#atc03 .inc03_wrap .txt .tit span{font-size:40px;font-weight:700;color:#f77e01}

/* right_cont */
#atc03 .inc03_wrap .cont{width:50%}
#atc03 .inc03_wrap .cont li+li{padding-top:115px}
#atc03 .inc03_wrap .cont li .img{width:100%;height:450px;overflow:hidden}
#atc03 .inc03_wrap .cont .cont01 .img img{transform:translate(-180px , 0px)}
#atc03 .inc03_wrap .cont .cont02 .img img{transform:translate(0px , -180px)}
#atc03 .inc03_wrap .cont .cont03 .img img{transform:translate(-135px , -235px)}
#atc03 .inc03_wrap .cont .cont04 .img img{transform:translate(-135px , -235px)}
#atc03 .inc03_wrap .cont li h3{margin-top:50px}
#atc03 .inc03_wrap .cont li p{margin-top:60px;font-size:15px;font-weight:400;color:rgb(17, 17, 17, 0.5)}
#atc03 .inc03_wrap .cont li a{position:relative;display:block;margin-top:80px;width:max-content;transition:all .3s;font-size:17px;font-weight:700}
#atc03 .inc03_wrap .cont li a:after{content:"";position:absolute;bottom:0px;left:0px;width:0px;height:2px;transition:all .3s;background-color:#111}


/* 반응형 [s] */
@media (hover:hover){
#atc03 .inc03_wrap .cont li a:hover:after{width:100%}
}
@media (max-width:1380px){
#atc03{margin:-350px 0 180px}
#atc03 .inc03_wrap{width:90%}
#atc03 .inc03_wrap .cont li .img{height:405px}
#atc03 .inc03_wrap .cont li .img img{width:100%;height:100%;transform:none !important;object-fit:cover}
#atc03 .inc03_wrap .cont li h3{margin-top:45px}
#atc03 .inc03_wrap .cont li p{margin-top:50px}
#atc03 .inc03_wrap .cont li a{margin-top:70px}
}
@media (max-width:1024px){
#atc03{margin:110px 0 160px}
#atc03 .inc03_wrap{width:95%}
#atc03 .inc03_wrap .cont li .img{height:340px}
#atc03 .inc03_wrap .cont li h3{margin-top:40px}
#atc03 .inc03_wrap .cont li p{margin-top:40px}
#atc03 .inc03_wrap .cont li a{margin-top:60px;font-size:16px}
}
@media (max-width:768px){
#atc03{overflow-x:hidden;width:100%;margin:100px 0 120px}
#atc03 .inc03_wrap{flex-direction:column}
#atc03 .inc03_wrap .txt{position:static;width:100%;text-align:center}
#atc03 .inc03_wrap .txt ul{display:none}
#atc03 .inc03_wrap .cont{margin-top:90px;width:100%}
#atc03 .inc03_wrap .cont li{display:flex;align-items:center;gap:20px}
#atc03 .inc03_wrap .cont li+li{padding-top:100px}
#atc03 .inc03_wrap .cont li:nth-child(2){flex-direction:row-reverse}
#atc03 .inc03_wrap .cont li .img{width:50%;height:310px;background-repeat:no-repeat;background-size:cover}
#atc03 .inc03_wrap .cont li .img img{display:none}
#atc03 .inc03_wrap .cont .cont01 .img{background-image:url(img/img01.jpg);background-position:70% 50%}
#atc03 .inc03_wrap .cont .cont02 .img{background-image:url(img/img02.jpg);background-position:center}
#atc03 .inc03_wrap .cont .cont03 .img{background-image:url(img/img03.jpg);background-position:100% 50%}
#atc03 .inc03_wrap .cont .cont04 .img{background-image:url(img/img01.jpg);background-position:100% 50%}
#atc03 .inc03_wrap .cont li .txt_container{display:flex;flex-direction:column;width:calc(50% - 20px)}
#atc03 .inc03_wrap .cont li:nth-child(odd) .txt_container{align-items:end;text-align:end}
#atc03 .inc03_wrap .cont li h3{margin-top:0px}
#atc03 .inc03_wrap .cont li p{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;margin-top:25px;font-size:14px}
#atc03 .inc03_wrap .cont li a{margin-top:35px;font-size:15px}
}
@media (max-width:580px){
#atc03{margin:100px 0 80px}
#atc03 .inc03_wrap .cont li{flex-direction:column;gap:35px}
#atc03 .inc03_wrap .cont li+li{padding-top:80px}
#atc03 .inc03_wrap .cont li:nth-child(2){flex-direction:column}
#atc03 .inc03_wrap .cont li .img{width:100%;height:280px}
#atc03 .inc03_wrap .cont li .txt_container{width:100%}
}
@media (max-width:480px){
#atc03{margin:90px 0 60px}
#atc03 .inc03_wrap .cont{margin-top:55px}
#atc03 .inc03_wrap .cont li{position:relative}
#atc03 .inc03_wrap .cont li+li{padding:0px;margin-top:24px}
#atc03 .inc03_wrap .cont li .txt_container{align-items:center;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;text-align:center}
#atc03 .inc03_wrap .cont li .txt_container h3{color:#fff}
#atc03 .inc03_wrap .cont li p{width:95%;margin:15px auto 0;-webkit-line-clamp:2;line-clamp:2;font-size:13px;color:rgb(255, 255 ,255, 0.6)}
#atc03 .inc03_wrap .cont li a{font-size:14px;color:#fff}
#atc03 .inc03_wrap .cont li a:after{width:100%;background-color:#fff}
#atc03 .inc03_wrap .cont li:nth-child(odd) .txt_container{align-items:center;text-align:center}
#atc03 .inc03_wrap .cont .cont01 .img{background-image:linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5)), url(img/img01.jpg)}
#atc03 .inc03_wrap .cont .cont02 .img{background-image:linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5)), url(img/img02.jpg)}
#atc03 .inc03_wrap .cont .cont03 .img{background-image:linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5)), url(img/img03.jpg)}
#atc03 .inc03_wrap .cont .cont04 .img{background-image:linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5)), url(img/img01.jpg)}
}
@media (max-width:380px){
#atc03{margin:80px 0 50px}
#atc03 .inc03_wrap .cont li+li{margin-top:15px}
#atc03 .inc03_wrap .cont li a{margin-top:30px;font-size:13px}
#atc03 .inc03_wrap .cont li .img{height:265px}
}
/* 반응형 [e] */