@charset "utf-8";

#atc04 .line_wrap{position:relative;height:128px;padding:0 80px;border-top:solid 1px #222;color:#222;overflow:hidden;background-color:#fff;transition:all 0.5s cubic-bezier(.4,0,.2,1)}
#atc04 .line_wrap .inner{position:relative} 
#atc04 .line_wrap .tit{position:absolute;left:190px;top:0;font-size:138px;line-height:248px;font-weight:700;text-transform:uppercase;font-family:'mulish'}
#atc04 .line_wrap .tit:after{position:absolute;right:-120px;top:0;margin-top:30px;opacity:1;content:url('/sh_img/include/inc04/img/arr.png');transition:all .5s}
#atc04 .line_wrap .icon{display:inline-block;position:absolute;left:0;top:34px;width:160px;height:190px;background-repeat:no-repeat;background-position:center;background-size:cover;transition:all .5s}
#atc04 .line_wrap:nth-child(1) .icon{background-image:url('/sh_img/include/inc04/img/img1_off.png')}
#atc04 .line_wrap:nth-child(2) .icon{background-image:url('/sh_img/include/inc04/img/img2_off.png')}
#atc04 .line_wrap:nth-child(3) .icon{background-image:url('/sh_img/include/inc04/img/img3_off.png')}
#atc04 .img_banner{height:440px;text-align:center;background:url(/sh_img/include/inc04/img/imgbn_bg.jpg) center no-repeat;background-size:cover}
#atc04 .img_banner .txt{display:table;position:relative;margin:0 auto;/* padding-top:160px; */padding-right:10px;top:50%;transform:translateY(-50%)}
#atc04 .img_banner p{display:inline-block;padding-right:45px;font-size:93px;line-height:1;cursor:pointer;background-image:linear-gradient(0deg, #fff 0%, #fff 50%, transparent 50.1%);background-position:100% 100%;background-size:100% 0%;-webkit-text-stroke-color:#fff;-webkit-text-stroke-width:2px;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-repeat:no-repeat;transition:all 0.5s cubic-bezier(.4,0,.2,1);font-family:'notokr-bold'}
#atc04 .img_banner span{position:absolute;right:0;top:0;font-size:19px;color:#fff;font-family:'mulish'}

@keyframes ifn{0%{-webkit-transform:translate3d(100vw,0,0);transform:translate3d(100vw,0,0)}100%{-webkit-transform:translate3d(100vw,0,0) translate3d(-200%,0,0);transform:translate3d(100vw,0,0) 
translate3d(-200%,0,0)}}

/* 반응형 [s] */
@media (hover:hover) {
#atc04 .line_wrap.active .inner{position:relative;animation:ifn 15s linear -7s infinite}
#atc04 .img_banner p:hover{background-size:100% 200%}
#atc04 .line_wrap:hover{height:248px;background-color:var(--primary)}
#atc04 .line_wrap:hover a{color:#fff}
#atc04 .line_wrap:hover .tit:after{margin-top:0}
#atc04 .line_wrap:nth-child(1):hover .icon{background-image:url('/sh_img/include/inc04/img/img1_on.png')}
#atc04 .line_wrap:nth-child(2):hover .icon{background-image:url('/sh_img/include/inc04/img/img2_on.png')}
#atc04 .line_wrap:nth-child(3):hover .icon{background-image:url('/sh_img/include/inc04/img/img3_on.png')}
}
@media (max-width:1230px){
#atc04 .line_wrap .icon{top:36px;width:110px;height:165px}
#atc04 .line_wrap .tit{left:170px;font-size:85px}
#atc04 .img_banner p{font-size:75px}
}
@media (max-width:1024px){
#atc04 .line_wrap{height:148px;padding:20px;background-color:var(--primary)}	
#atc04 .line_wrap .inner{height:100%}
#atc04 .line_wrap .tit{left:0;top:50%;padding-right:80px;font-size:53px;line-height:43px;color:#fff;transform:translateY(-50%)}
#atc04 .line_wrap .tit:after{right:0;top:50%;width:58px;height:58px;content:'';margin-top:0;background:url('/sh_img/include/inc04/img/arr.png') center no-repeat;background-size:100%;transform:translateY(-50%)}
#atc04 .line_wrap .icon{display:none}
#atc04 .img_banner{height:310px}
#atc04 .img_banner p{font-size:60px;line-height:75px}
}
@media (max-width:768px){
#atc04 .line_wrap img{opacity:.4}
#atc04 .line_wrap .tit{padding-right:50px;font-size:35px;word-break:keep-all}
#atc04 .line_wrap .tit:after{width:40px;height:40px}
#atc04 .img_banner p{white-space:pre-line;word-break:keep-all;padding-right:0;font-size:50px;line-height:50px}
#atc04 .img_banner p br{display:none}
#atc04 .img_banner .txt{padding-right:0}
#atc04 .img_banner span{right:0px;top:-35px}
}
@media (max-width:480px){
#atc04 .img_banner{height:260px}
#atc04 .img_banner p{font-size:40px;line-height:40px}
#atc04 .img_banner span{top:-28px;font-size:14px}
#atc04 .line_wrap{padding:0}
#atc04 .line_wrap .tit{padding-left:20px}
}
@media (max-width:380px){
#atc04 .line_wrap .tit:after{display:none;text-align:center}
#atc04 .img_banner p{font-size:34px;line-height:34px}
}
/* 반응형 [e] */