@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;background-color:#212121;font-family:'Poppins',sans-serif}
#mainSlide{z-index:1000;width:100%;height:968px}
#mainSlide li{height:100%}
#mainSlide li .bg{position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;-webkit-transform:scale(1.15);transform:scale(1.15)}
#mainSlide li .bg01{background-image:url(/sh_img/index/main_banner/main_banner_01.jpg)}
#mainSlide li .bg02{background-image:url(/sh_img/index/main_banner/main_banner_02.jpg)}
#mainSlide li .bg03{background-image:url(/sh_img/index/main_banner/main_banner_03.jpg)}
#mainSlide li.on .bg{-webkit-animation:main 5s cubic-bezier(0.165, 1.240, 0.440, 1.000);animation:main 5s cubic-bezier(0.165, 1.240, 0.440, 1.000)}
@-webkit-keyframes main{from{-webkit-transform:scale(1.15)}100%{-webkit-transform:scale(1.01)}}
@keyframes main{from{transform:scale(1.15)}100%{transform:scale(1.01)}}

/* 그라데이션 마스크 */
#mainVisual .mask{content:'';position:absolute;top:0;left:0;z-index:1000; opacity:0;width:100%;height:101%;pointer-events:none;background:-webkit-linear-gradient(top, rgba(33,33,33,0) 50%, rgba(255,255,255,1) 100%);
background:linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00212121,endColorstr=#99212121);transition:all .2s}

/* 문구 */
#mainVisual .txt_area{position:relative;z-index:1001;width:1184px;margin:0 auto}
#mainVisual .txt_area .txt{position:absolute;left:0;top:58vh;margin-top:20px;font-size:36px;color:#fff;line-height:1.1;opacity:0;font-family:'notokr-thin'}
#mainVisual .txt_area .txt span{display:inline-block;margin-bottom:10px;font-size:53px;color:#fff;font-family:'notokr-bold'}
#mainVisual .txt_area .txt .s_txt{margin-top:20px;font-size:15px;font-family:'notokr-regular'}
/* svg */
#mainVisual .pg_area{position:relative;z-index:1001;width:1184px;margin:0 auto}
.circle_svg{position:absolute;top:78vh;left:0;z-index:1001}
.circle_svg svg{display:block}
.circle_svg #cercle_blanc{stroke-dashoffset:190;stroke-dasharray:190;position:absolute;top:0;stroke-linecap:round}
#mainSlide li.on .circle_svg #cercle_blanc{animation:fill 5.4s cubic-bezier(0.165, 0.840, 0.440, 1.000)}
@keyframes fill{from{stroke-dashoffset:190}to{stroke-dashoffset:0}}

/* 넘버 */
#mainVisual .num{position:absolute;left:75px;top:78vh;margin-top:5px;letter-spacing:.5px;font-size:13px;font-weight:600;color:#fff}
#mainVisual .num span{font-size:24px}
#mainVisual .num span:after{content:url(/sh_img/index/main_banner/sasun.png);margin:0 5px}

/* 타임라인 */
#mainVisual .timeline{position:absolute;left:52%;top:80vh;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:75%;height:1px;margin-top:5px;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,.65)}
#mainSlide li.on .timeline .fill{-webkit-animation:linefill 5.4s cubic-bezier(0.165, 0.840, 0.440, 1.000);animation:linefill 5.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;right:0;top:79vh;margin-top:5px;font-size:13px;font-weight:600}
#mainVisual .bx-controls-direction a{position:relative;color:#fff}
#mainVisual .bx-controls-direction a.bx-prev:after{content:url(/sh_img/index/main_banner/sasun.png);margin:0 5px}
#mainVisual .bx-controls-direction a:before{display:block;content:"";position:absolute;top:-12px;left:13px;-webkit-transform:scaleY(5);transform:scaleY(5);width:3px;height:3px;border-radius:3px;background:#fff;opacity:0;-webkit-transition:all .1s;transition:all .1s}
#mainVisual .bx-controls-direction a:hover:before{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}

/* 재생 */
#mainVisual .bx-controls-auto{position:absolute;left:18px;top:79vh;z-index:1002;margin-top:8px}
#mainVisual .bx-controls-auto .bx-start{font-size:0}
#mainVisual .bx-controls-auto .bx-start:before{position:absolute;top:0;left:2px;content:"\f04b";font-size:11px;color:#fff;font-family:FontAwesome}
#mainVisual .bx-controls-auto .bx-stop{display:block;width:9px;height:9px;font-size:0;background:url(/sh_img/index/main_banner/pause.png) no-repeat}
#mainVisual .bx-controls-auto .active{display:none}

/* 스크롤 */
#mainVisual .scr{position:absolute;left:50%;top:87vh;z-index:1001;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);font-size:13px;font-weight:600;color:#fff;text-align:center}
#mainVisual .scr span{display:inline-block;position:relative;width:30px;height:30px;margin-top:13px;background:url(/sh_img/index/main_banner/arr.png) bottom center no-repeat;cursor:pointer}
#mainVisual .scr span:before{display:block;content:"";position:absolute;left:50%;bottom:0;width:1px;height:15px;background-color:#fff;-webkit-transition:all .2s;transition:all .2s}
#mainVisual .scr span:hover:before{height:20px}