@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;font-family:'Poppins',sans-serif}
#mainSlide{z-index:1000;width:100%;height:100vh}
#mainSlide li{height:100%}
#mainSlide li .bg{position:relative;z-index:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover;filter:brightness(0.8);}
#mainSlide li .bg01{background-image:url(/sh_img/index/main_banner/main_banner01.jpg)}
#mainSlide li .bg02{background-image:url(/sh_img/index/main_banner/main_banner02.jpg)}
#mainSlide li .bg03{background-image:url(/sh_img/index/main_banner/main_banner03.jpg)}

/* 링크 */
#mainVisual .about, #mainVisual .contact, #mainVisual .go_pf, #mainVisual .num{position:absolute;top:50%;z-index:1001;-webkit-transform-origin:50% 0%;-ms-transform-origin:50% 0%;transform-origin:50% 0%;padding:6px;font-size:14px;font-weight:500;letter-spacing:.3px;color:#fff}
#mainVisual .about{left:95px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}
#mainVisual .contact{right:92px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}
#mainVisual .dot:after{display:block;content:"";position:absolute;top:40px;left:calc(100% - 11px);-webkit-transform:scaleY(7);transform:scaleY(7);width:3px;height:3px;border-radius:3px;background:#fff;opacity:0;-webkit-transition:all .1s;transition:all .1s}
#mainVisual .dot:hover:after{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}
#mainVisual .go_pf{left:355px;margin-top:-15px;-webkit-transition:all .1s;transition:all .1s}
#mainVisual .go_pf:hover{left:345px}
#mainVisual .num{left:287px;margin-top:-15px;letter-spacing:.5px}

/* 문구 */
#mainVisual .txt_area{position:absolute;left:50%;top:35vh;z-index:1;margin-left:105px;font-size:15px;font-weight:400;letter-spacing:.3px;color:#fff}
#mainVisual .txt_area .stxt{margin-bottom:25px;opacity:0;webkit-transition:all .6s;transition:all .6s}
#mainVisual .txt_area .btxt{overflow:hidden;margin:-10px 0;font-size:105px;line-height:130px;font-weight:700}
#mainVisual .txt_area .btxt span{display:block;-webkit-transition:all .6s;transition:all .6s}
#mainVisual .txt_area .btxt.top span{-webkit-transform:translateY(120%);-ms-transform:translateY(120%);transform:translateY(120%)}
#mainVisual .txt_area .btxt.btm span{-webkit-transform:translateY(-120%);-ms-transform:translateY(-120%);transform:translateY(-120%)}
#mainSlide li.on .txt_area .btxt span{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
#mainSlide li.on .txt_area .stxt{opacity:1}

/* pager */
#bx-pager{position:absolute;left:142px;bottom:-5%;z-index:1001;color:#fff}
#bx-pager li{display:inline-block;position:relative}
#bx-pager li a{display:inline-block;padding:3px;font-size:15px;font-weight:600;color:#fff;cursor:pointer}
#bx-pager li a:before{display:block;content:"";position:absolute;left:50%;top:-13px;width:2px;height:3px;margin-left:-1px;background-color:#fff;
opacity:0;;-webkit-transition:all .2s;transition:all .2s}
#bx-pager li:hover a:before, #bx-pager li a.active:before{opacity:1;height:13px}

/* sns */
#mainVisual .main_sns{position:absolute;right:142px;bottom:-5%;z-index:1001}
#mainVisual .main_sns li{display:inline-block;margin-left:30px}
#mainVisual .main_sns li a{font-size:14px;font-weight:500;letter-spacing:.3px;color:#fff}
#mainVisual .main_sns li a i{padding-right:5px}
#mainVisual .main_snsM{display:none}

/* control */
#mainVisual .bx-controls{margin-top:20px}
#mainVisual .bx-controls a{display:inline-block;width:27px;height:17px;font-size:0;text-indent:9999px;background-position:center;background-repeat:no-repeat}
#mainVisual .bx-controls a.bx-prev{background-image:url(/sh_img/index/main_banner/prev.png)}
#mainVisual .bx-controls a.bx-next{background-image:url(/sh_img/index/main_banner/next.png)}

/* svg */
.circle_svg{position:absolute;top:50%;left:270px;z-index:1001;margin-top:-30px}
.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}}

/* 반응형 s */
@media (max-width:1400px){
#mainSlide{height:80vh}
#mainVisual .about{left:-10px}
#mainVisual .contact{right:-10px}
#mainVisual .go_pf{left:230px}
#mainVisual .go_pf:hover{left:230px}
#mainVisual .num{left:168px}
#mainVisual .txt_area{top:55%;transform:translateY(-50%);margin-left:0}
#mainVisual .txt_area .btxt{font-size:85px;line-height:105px}
#bx-pager{left:30px}
#mainVisual .main_sns{right:30px}
.circle_svg{left:150px}
}
@media (max-width:1024px){
#mainSlide{height:60vh}
#mainVisual .about{left:-30px}
#mainVisual .contact{right:-30px}
#mainVisual .go_pf{left:155px}
#mainVisual .go_pf:hover{left:155px}
#mainVisual .num{left:98px}
#mainVisual .txt_area .btxt{font-size:75px;line-height:95px}
#bx-pager{left:15px}
#mainVisual .main_sns{right:15px}
.circle_svg{left:80px}
}
@media (max-width: 768px){
#mainSlide{height:50vh}
#mainVisual .go_pf{left:auto;right:120px;top:80px}
#mainVisual .go_pf:hover{left:auto;right:120px;top:80px}
#mainVisual .num{left:auto;right:58px;top:80px}
#mainVisual .txt_area{left:10%}
#mainVisual .main_snsM{display:block;position:absolute;right:15px;bottom:-5%;z-index:1001}
#mainVisual .main_snsM li{display:inline-block;margin-left:15px}
#mainVisual .main_snsM li a{font-size:15px;font-weight:500;letter-spacing:.3px;color:#fff}
#mainVisual .main_snsM li a i{padding-right:5px}
#mainVisual .main_sns{display:none}
.circle_svg{left:auto;right:40px;top:80px}
}
@media (max-width: 480px){
#mainVisual .about{display:none}
#mainVisual .contact{display:none}
#mainVisual .go_pf{right:100px;top:60px;font-size:13px}
#mainVisual .go_pf:hover{right:100px;top:60px}
#mainVisual .num{left:auto;right:38px;top:60px;font-size:13px}
#mainVisual .txt_area{top:50%;left:15px}
#mainVisual .txt_area .btxt{font-size:55px;line-height:75px}
#mainVisual .bx-controls{margin-top:10px}
#mainSlide li.on .txt_area .stxt{font-size:13px}
#bx-pager li a{font-size:14px}
#mainVisual .main_snsM li a{font-size:13px}
.circle_svg{left:auto;right:20px;top:60px}
}
/* 반응형 e */