/*Content CSS*/
#main_vis {position: relative; z-index: 5; width: 100%; height: 937px; min-height:800px; display: flex; align-items: flex-end; justify-content: center;}
#main_slider {width:100%; position: absolute; top: 0; right: 0; }
#main_slider .slide {height: 100%; height: 937px; min-height:800px; z-index: 1;  background-size:cover; background-position:center;  position:relative; background-repeat: no-repeat; display: flex; align-items: flex-end; justify-content: center; outline: none;}
#main_slider .slide .bg {display: block; width: 100%; height: 100%; position: absolute; left: 0; top:0; z-index: -2;  background-size:cover; background-position:center;}
#main_slider .slide.slide1 .bg { background-image:url('../img/main1.jpg');}
#main_slider .slide.slide2 .bg { background-image:url('../img/main2.jpg');}
#main_slider .slide.slide3 .bg { background-image:url('../img/main3.jpg');}


/* font-style */
#main_vis .fs_85{font-size: 85px; font-weight: 700; color: #fff;}
#main_vis .fs_23{font-size: 23px; font-weight: 400; line-height: 1.65; color: #fff;}

/* vm_btn */
#main_vis .vm_btn{width: 100%; max-width: 240px; height: 60px; border-radius: 30px; padding: 0 27px; background-color: rgba(255,255,255,.15); backdrop-filter: blur(5px);  display: flex; align-items: center; justify-content: space-between; transition: .3s;}
#main_vis .vm_btn span{color: #fff; transition: .3s; font-weight: 500; text-transform: uppercase;}
#main_vis .vm_btn i{width: 16px; height: 16px; background: url('../img/vm_arrow.png') 50% / cover no-repeat; transition: .3s; flex-shrink: 0;}
#main_vis .vm_btn:hover{background-color: #292861; }
/* controller */
#main_vis .controller {position: relative; z-index: 3; width: 100%; max-width:1750px; padding:0 50px;}
#main_vis .controller .flex {display: flex; align-items: center; margin-top:60px; padding: 0 65px; justify-content: space-between;}

/* arrows */
#main_vis .arrows { display: flex; align-items: center; margin-bottom: 55px; justify-content: flex-end;}
#main_vis .arrows .slick-arrow {cursor: pointer; height: 80px; width: 80px;font-size: 0; transition: all .3s; border-radius: 50%; backdrop-filter: blur(5px);}
#main_vis .arrows .slick-prev { background: url('../img/prev.png') no-repeat center rgba(255,255,255,.2);}
#main_vis .arrows .slick-next { background: url('../img/next.png') no-repeat center rgba(255,255,255,.2); margin-left: 11px;}
#main_vis .arrows .slick-arrow:hover {background-color: #000;}

/* dots */
#main_vis .dots{position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);}
#main_vis .slick-dots{display: flex; align-items: center;}
#main_vis .slick-dots li{overflow: hidden;}
#main_vis .slick-dots li button{font-size: 0; width: 6px; height: 6px; background-color: #fff; border-radius: 3px; transition: width .3s;}
#main_vis .slick-dots li{margin-right: 10px;}
#main_vis .slick-dots li:last-child{margin-right: 0;}
#main_vis .slick-dots .slick-active button{width: 25px;}

/* main_inner */
#main_vis .main_inner {text-align:left; position:relative; z-index:2; width:100%; max-width:1750px; padding:0 50px; top: 0;}
#main_vis .main_inner .top {margin-bottom:53px;}
#main_vis .main_inner .top .vm_btn {margin-bottom:15px;}
#main_vis .main_inner .bot {display:flex; justify-content:space-between; align-items:flex-end; position:relative; padding-bottom: 75px;}
#main_vis .main_inner .bot .logo {margin-left:50px; flex-shrink:0;}
#main_vis .main_inner .top, .main_inner .bot {opacity:0;}

/* progress */
#main_vis .bot::after {content:''; position:absolute; left:0; bottom:-2px; width:100%; max-width:1650px; height:2px; background:rgba(255,255,255,.2); z-index:10;}
#main_vis .bot::before {content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:#fff; z-index:11; transition:width 6000ms linear;}
#main_vis .bot.active::before {width:100%; transition:width 6000ms linear;}
#main_vis .bot.remove::before {width:0; transition:width .1s linear;}


/* animation */
#main_vis .slide.ani .bg { animation:visualScale 10s linear forwards; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2);}
#main_vis .slide.ani .main_inner .top{animation: txt_ani 1s forwards; }
#main_vis .slide.ani .main_inner .bot{animation: txt_ani2 1s forwards; }


@keyframes visualScale {
    0% { -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2);  }
    100% { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes txt_ani {
    0% {transform: translateY(70px); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}
@keyframes txt_ani2 {
    0% {transform: translateY(-70px); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}


/* 반응형 */
@media screen and (min-height: 937px) {
    #main_vis .controller{padding-bottom: 100px;}
    #main_slider .slide{padding-bottom: 100px;}
}

@media screen and (min-width: 1025px) {
    #main_slider .slide, #main_vis .controller{padding-bottom: 102px;}
}

@media screen and (max-width: 1600px) {
    #main_vis {min-height:700px;}
    #main_slider .slide {min-height:700px;}

    /* font-style */
    #main_vis .fs_105{font-size: 95px;}
    #main_vis .fs_26{font-size: 25px;}

    /* main_inner */
    .main_inner .top .vm_btn{margin-bottom: 10px;}

}

@media screen and (max-width: 1400px) {
    /* font-style */
    #main_vis .fs_105{font-size: 85px;}
    #main_vis .fs_26{font-size: 24px;}
    #main_vis .fs_18{font-size: 17px;}
}
@media screen and (max-width: 1280px) {
    /* font-style */
    #main_vis .fs_105{font-size: 75px;}
    #main_vis .fs_26{font-size: 23px;}
    #main_vis .fs_18{font-size: 16px;}

    /* arrows */
    #main_vis .arrows {margin-top: 50px;}
    #main_vis .arrows .slick-arrow {height: 60px; width: 60px; background-size: 20px;}

    /* vm_btn */
    #main_vis .vm_btn{max-width: 210px; height: 50px; padding: 0 20px; margin-left: 15px;}
    #main_vis .vm_btn i{width: 14px; height: 14px;}

    /* main_inner */
    .main_inner{top: -10px;}
    .main_inner .top{padding-bottom: 50px; margin-bottom: 60px;}
    .main_inner .bot{padding-left: 160px;}

}
@media screen and (max-width: 1024px) {
    #main_vis {min-height:600px; max-height: 700px;}
    #main_slider .slide {min-height:600px; max-height: 700px; align-items: center; padding: 60px 0;}
    /* font-style */
    #main_vis .fs_105{font-size: 68px;}
    #main_vis .fs_26{font-size: 22px;}
    #main_vis .fs_18{font-size: 15px;}

    /* vm_btn */
    #main_vis .vm_btn{margin-left: 0;}

    /* main_inner */
    .main_inner {padding: 0 30px; text-align: center;}
    .main_inner .top{flex-direction: column; align-items: center; justify-content: center;}
    .main_inner .top .vm_btn{margin: 25px 0 0;}
    .main_inner .bot{padding-left: 0; flex-direction: column; align-items: center; justify-content: center;}
    .main_inner .bot .logo{margin-left: 0; margin-top: 25px;}

}

@media screen and (max-width: 640px) {
    /* font-style */
    #main_vis .fs_105{font-size: 58px;}
    #main_vis .fs_26{font-size: 20px;}
    #main_vis .fs_18{font-size: 14px;}

    /* vm_btn */
    #main_vis .vm_btn{max-width: 100%; height: 45px; padding: 0 15px;}
    #main_vis .vm_btn i{width: 13px; height: 13px;}

    /* main_inner */
    .main_inner .top{padding-bottom: 40px; margin-bottom: 40px;}
}

@media screen and (max-width: 480px) {
    /* font-style */
    #main_vis .fs_105{font-size: 48px;}
    #main_vis .fs_26{font-size: 19px;}

}