@charset "utf-8";

#mainVisual{position:relative;z-index:-1;width:100%;margin:100px auto 0;font-family:'Montserrat',sans-serif}
#mainSlide{overflow:hidden;z-index:1000;position:absolute!important;left:0;top:0;width:100%!important;height:705px;opacity:0;background-color:#000} 
#mainSlide li{height:100%;width:100%!important}
#mainSlide li .bg{position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:100%;-webkit-transform:scale(1);transform:scale(1)}
#mainSlide li .bg01{background-image:url(/sh_img/index/main_banner/main01.jpg)}
#mainSlide li .bg02{background-image:url(/sh_img/index/main_banner/main02.jpg)}
#mainSlide li .bg03{background-image:url(/sh_img/index/main_banner/main03.jpg)}
#mainSlide li .bg04{background-image:url(/sh_img/index/main_banner/main04.jpg)}

#mainSlide li.on .bg{-webkit-animation:main 10s linear;animation:main 10s linear}
@-webkit-keyframes main{from{-webkit-transform:scale(1)}100%{-webkit-transform:scale(1.12)}}
@keyframes main{from{transform:scale(1)}100%{transform:scale(1.12)}}

/* 문구 */
#mainVisual .txt_area{position:absolute;left:4%;width:800px;z-index:1001}
#mainVisual .txt_area .txt{position:absolute;left:60px;top:170px;margin-left:20px;font-size:67px;line-height:74px;font-weight:800;color:#fff;text-transform:uppercase;opacity:0}
#mainVisual .txt_area .txt span{display:block;font-weight:900;letter-spacing:19px;color:#54c5f1}
#mainVisual .txt_area .stxt{position:absolute;left:160px;top:360px;padding:30px 70px 30px 30px;font-size:14px;color:rgba(255,255,255,.7);line-height:1.8;;opacity:0;background:rgba(0,0,0,0.5);font-family:'notokr-regular'}
#mainVisual .txt_area .stxt span{display:block;font-size:16px;line-height:55px;color:#fff;font-family:notokr-medium}

 /* 메인 텍스트 외곽선 익스 대체 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#mainVisual .txt_area .txt span{font-weight:800;color:#fff}
}
 
/* 넘버 */
#mainVisual .pg_area{position:relative;z-index:1001;width:1400px;margin:0 auto}
#mainVisual .num{position:absolute;left:85%;top:315px;letter-spacing:.5px;font-size:12px;font-weight:500;color:rgba(255, 255, 255, 0.7294117647058823)}
#mainVisual .num span{padding-right:5px;font-size:15px;color:#fff;font-family:'Montserrat',sans-serif}

/* 타임라인 */
#mainVisual .timeline{position:absolute;left:85%;;top:351px;width:276px;height:1px;background-color:rgba(255,255,255,.3);}
#mainVisual .timeline .fill{position:absolute;left:0;top:0;width:0;height:1px;background-color:rgba(255,255,255,.5)}
#mainSlide li.on .timeline .fill{-webkit-animation:linefill 6.4s cubic-bezier(0.165, 0.840, 0.440, 1.000);animation:linefill 6.4s cubic-bezier(0.165, 0.840, 0.440, 1.000)}
@keyframes linefill{from{width:0}to{width:100%}}

/* control */
#mainVisual .bx-controls-direction{position:absolute;left:50%;margin-left:649px;top:357px;z-index:9999}
#mainVisual .bx-controls-direction a{display:inline-block;position:relative;height:50%;color:#222;width:20px;height:20px;font-size:0;z-index:999;opacity:.7;transition:all .2s}
#mainVisual .bx-controls-direction a.bx-prev:before{display:block;position:absolute;top:6px;left:0;font-size:13px;content:"\f0d9";color:#fff;font-family:FontAwesome}
#mainVisual .bx-controls-direction a.bx-next:after{display:block;position:absolute;top:6px;right:0;font-size:13px;content:"\f0da";color:#fff;font-family:FontAwesome}
#mainVisual .bx-controls-direction a:hover{opacity:1}

/* 스크롤 */
#scroll{position:absolute;position:relative;left:4%;bottom:197px;width:20px;height:185px;margin-left:-10px}
#scroll .txt{position:absolute;top:21px;left:-15px;font-size:10px;font-weight:600;color:#fff;letter-spacing:2px;transform:rotate(-90deg);font-family:'Montserrat',sans-serif}
#scroll span{position:absolute;left:10px;width:1px;height:46px;-webkit-animation:arr 4s infinite linear;-ms-animation:arr 4s infinite linear;animation:arr 4s infinite linear}
#scroll span.line_t{bottom:73px;background:#fff;}
#scroll span.line_b{background:rgba(255,255,255,.4);top:112px}