@charset "utf-8";

#atc04{position:relative;z-index:6;padding:220px 0 250px;color:#111;text-align:center;text-transform:uppercase}
#atc04 .bg{position:absolute;top:0;left:50%;z-index:-1;transform:translateX(-50%);width:0;height:100%;background-color:var(--primary)}

/* 텍스트 */
#atc04 .txt_area .stxt{font-size:17px;font-weight:500;color:#111}
#atc04 .txt_area .btxt{transform:translateY(50px);margin-top:50px;font-size:110px;font-weight:500;line-height:1;letter-spacing:-4px}
#atc04 .txt_area .btxt .t1{display:inline-block;position:relative}
#atc04 .txt_area .btxt .t1 .dot{display:block;position:absolute;right:-65px;top:-45px;width:44px;height:49px}
#atc04 .txt_area .btxt .strk{opacity:0;margin-left:70px;-webkit-text-stroke:1px #111;-stroke:1px #111;color:var(--primary)}

/* 이미지 + 내용 */
#atc04 ul{display:flex;text-align:right}
#atc04 ul li+li{margin-left:35px}
#atc04 ul li img{width:100%}
#atc04 .cont{flex-shrink:0;margin:150px 0 0 35px;line-height:1.6;text-align:left;font-family:'notokr-medium'}

#atc04 .inner{display:flex;justify-content:center;align-items:flex-start;position:relative;z-index:-1}
#atc04 .inner a{display:inline-block;position:relative;padding-right:40px;margin-top:30px;font-weight:500;color:#111;line-height:1;text-decoration:none;transition:all .5s var(--ani)}
#atc04 .inner a:before{content:"";position:absolute;right:0;top:calc(50% - 1px);z-index:1;width:28px;height:2px;transform-origin:right;transform:scaleX(0);background:#111;transition:transform .5s var(--ani)}
#atc04 .inner a span:before,#atc04 .inner a span:after{content:"";position:absolute;right:-2px;bottom:7px;background:#111;transition:transform .5s var(--ani);transition-delay:.2s;z-index:2}
#atc04 .inner a span:before{width:2px;height:13px;transform-origin:0% 100%;transform:translateZ(0) rotate(-90deg)}
#atc04 .inner a span:after{width:13px;height:2px;transform-origin:100% 0%;transform:translateX(-2px) translateZ(0) rotate(0deg)}
#atc04 .inner a:hover:before{transform-origin:left;transform:scaleX(1)}
#atc04 .inner a:hover span:before{transform:translateY(0.5px) rotate(-45deg)}
#atc04 .inner a:hover span:after{transform:translateX(-2px) rotate(-45deg)}

@media (max-width:1400px){
#atc04 .txt_area .btxt{font-size:90px}
#atc04 .cont{margin:150px 15px 0 35px}
}
@media (max-width:1200px){
#atc04{padding:160px 0 200px}
#atc04 .txt_area .btxt{font-size:80px}
#atc04 .txt_area .btxt .t1 .dot{top:-38px;right:-62px}
#atc04 .txt_area .btxt .t1 .dot img{display:block;width:38px}
#atc04 .txt_area .btxt .strk{margin-left:0}
#atc04 .cont{margin:50px 15px 0 35px}
}
@media (max-width:1024px){
#atc04{padding:120px 0 200px}
#atc04 .txt_area .btxt{font-size:70px}
#atc04 .cont{margin:0 15px 0 20px}
#atc04 .inner a{padding-right:30px}
#atc04 .inner a:before{width:22px;top:calc(50% - 2px)}
#atc04 .inner a span:after{width:12px}
#atc04 .inner a span:before{height:12px}
#atc04 .inner a:hover span:before{transform:translateY(0.5px) rotate(-45deg)}
}
@media (max-width:768px){
#atc04{padding:80px 15px 200px}
#atc04 .txt_area .stxt{font-size:15px}
#atc04 .txt_area .btxt{font-size:46px;letter-spacing:-1px}
#atc04 .txt_area .btxt .t1 .dot{top:-28px;right:-56px}
#atc04 .txt_area .btxt .t1 .dot img{width:26px}
#atc04 .cont{font-size:14px}
#atc04 ul li+li{display:none}
#atc04 ul li.img01 img{max-width:300px;width:100%}
#atc04 .txt_area .btxt{margin-top:40px;font-size:38px;line-height:1.2}
}
@media (max-width:600px){
#atc04{padding:80px 15px}
#atc04 .txt_area .btxt{margin-bottom:40px}
#atc04 .inner{flex-direction:column;align-items:center}
#atc04 .inner a{margin-top:0;font-size:13px}
#atc04 .cont{text-align:center}
#atc04 ul{margin-bottom:40px}
#atc04 ul li.img01{display:flex;flex-direction:column;align-items:center}
}
@media (max-width:480px){
#atc04{padding:60px 15px}
#atc04 .txt_area .btxt{margin:20px 0;font-size:28px}
#atc04 .txt_area .btxt .t1 .dot{top:-20px;right:-52px}
#atc04 .txt_area .btxt .t1 .dot img{width:20px}
#atc04 ul{margin-bottom:20px}
}