@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%;height:100%;background-color:#222}

/* 이미지 */
#mainVisual .main_img{opacity:0;position:relative;left:20px;z-index:1001;width:100%;height:100vh;min-height:650px}
#mainVisual .main_img li{overflow:hidden;opacity:0;position:absolute;width:100%;height:100%;background:url(/sh_img/index/main_banner/main_banner_01.jpg) center no-repeat;background-size:cover;
-webkit-transform:skewX(3deg);-ms-transform:skewX(3deg);transform:skewX(3deg);-webkit-transition:all .4s;transition:all .4s}
#mainVisual .main_img li.img02{background-image:url(/sh_img/index/main_banner/main_banner_02.jpg)}
#mainVisual .main_img li.img03{background-image:url(/sh_img/index/main_banner/main_banner_04.jpg)}
#mainVisual .main_img li .txt{position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);margin-top:-60px;text-align:center;color:#fff}
#mainVisual .main_img li .txt p{opacity:0;padding-bottom:25px;margin-left:40px;font-size:65px;font-weight:700;letter-spacing:-1px;font-family:'Josefin Sans','notokr-bold'}
#mainVisual .main_img li .txt span{opacity:0; display:inline-block;margin-left:-40px;font-size:22px;letter-spacing:-.5px;font-family:'notokr-demilight'}
#mainVisual .main_img li.on{opacity:1;-webkit-transform:skewX(0);-ms-transform:skewX(0);transform:skewX(0);
-webkit-transition:all .8s cubic-bezier(0.165, 0.840, 0.440, 1.000);transition:all .8s cubic-bezier(0.165, 0.840, 0.440, 1.000)}
#mainVisual .main_img li.on p{opacity:1;margin-left:0;-webkit-transition:all .6s;transition:all .6s}
#mainVisual .main_img li.on span{opacity:1;margin-left:0;-webkit-transition:all .6s;transition:all .6s}

/* 타임라인 */
#mainVisual .timeline{position:absolute;left:50%;bottom:199px;z-index:1002;width:180px;height:2px;margin-left:-163px;background-color:#fff}
#mainVisual .timeline .fill{position:absolute;left:0;top:0;width:0;height:2px;background-color:#ec0000}
#mainVisual .main_img li.on .fill{-webkit-animation:linefill 5.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);animation:linefill 5.5s cubic-bezier(0.165, 0.840, 0.440, 1.000)}
@keyframes linefill{from{width:0}to{width:100%}}

/* 페이저 */
#mainVisual .pager_dot{position:absolute;right:180px;top:50%;z-index:1002;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);margin-top:-55px}
#mainVisual .pager_dot li{width:12px;height:12px;margin:20px 0;border-radius:50%;background-color:rgba(255,255,255,.6)}
#mainVisual .pager_dot li.on{border:2px solid #fff;background-color:transparent}
#mainVisual .pager_dot li:hover{cursor:pointer}

/* 컨트롤 */
#mainVisual .pager_area{position:absolute;bottom:180px;left:50%;z-index:1002;margin-left:23px}
#mainVisual .controls{display:inline-block;vertical-align:middle;height:40px;margin-left:5px}
#mainVisual .controls span{display:inline-block;vertical-align:middle;width:40px;height:40px;font-size:0;background:center no-repeat}
#mainVisual .controls span.prev{background-image:url(/sh_img/index/main_banner/prev.png)}
#mainVisual .controls span.next{margin-left:71px;background-image:url(/sh_img/index/main_banner/next.png)}
#mainVisual .controls span:hover{cursor:pointer}

/* 넘버 */
#mainVisual .pager_num{position:absolute;right:47px;top:14px}
#mainVisual .pager_num li{display:none;font-size:15px;font-weight:600;color:#fff;font-family:'Josefin Sans'}
#mainVisual .pager_num li.on{display:block}
#mainVisual .pager_num li span:before{display:inline-block;content:"";width:7px;height:10px;margin:0 10px;background:url(/sh_img/index/main_banner/sasun.png) no-repeat}