@charset "utf-8";

#atc04{position:relative;z-index:6;transform:translateY(-400px);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;-webkit-text-stroke:3px #222;-stroke:1px #111;color:var(--primary)}
#atc04 .txt_area .btxt .t1 b{font-weight:135px;-webkit-text-stroke:3px #ff891c;-webkit-text-stroke:1px solid #111;font-size:200px;color:var(--primary)}
/* 이미지 + 내용 */
#atc04 .inner{display:flex;justify-content:center;align-items:flex-start;position:relative;z-index:-1}
#atc04 ul{display:flex;text-align:right}
#atc04 ul li+li{margin-left:35px}
#atc04 ul li.img01 { transform:translateX(150px)}
#atc04 .cont{margin:150px 0 0 35px;line-height:1.6;text-align:left;font-family:'notokr-medium'}

#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:rotate(-90deg)}
#atc04 .inner a span:after{width:13px;height:2px;transform-origin:100% 0%;transform:translateX(-1px) rotate(0deg)}
#atc04 .inner a:hover:before{transform-origin:left;transform:scaleX(1)}
#atc04 .inner a:hover span:before{transform:rotate(-45deg)}
#atc04 .inner a:hover span:after{transform:translateX(-2px) rotate(-45deg)}