/* Content CSS */
#main_vis {position:relative; z-index:5; width:100%; height:100vh; min-height:800px; max-height:1080px; 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:100vh; min-height:800px; max-height:1080px; 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_29 {font-size:29px; font-weight:300; line-height:1.9; letter-spacing:-0.87px; color:#fff; padding:22px 26px;}
#main_vis .fs_29 b {font-weight:600;}

/* 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; font-family:'Poppins'; 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;}

/* controller */
#main_vis .controller {position:relative; z-index:3; width:100%; max-width:1600px; 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:125px; justify-content:flex-end;}
#main_vis .arrows .slick-arrow {cursor:pointer; height:64px; width:64px; 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; border:1px solid #fff;}
#main_vis .arrows .slick-next {background:url('../img/next.png') no-repeat center; margin-left:13px; border:1px solid #fff;}
#main_vis .arrows .slick-arrow:hover {background-color:#002446; border-color:#002446;}

/* dots */
#main_vis .dots {margin:0 20px; position:relative; left:-101px; bottom:-82px; display:flex; justify-content:flex-start;}
#main_vis .slick-dots {display:flex; align-items:center; justify-content:center;}
#main_vis .slick-dots li {overflow:hidden;}
#main_vis .slick-dots li button {font-size:0; width:8px; height:8px; background-color:#fff; border-radius:5px; transition:width .3s; opacity:.6;}
#main_vis .slick-dots li {margin-right:13px;}
#main_vis .slick-dots li:last-child {margin-right:0;}
#main_vis .slick-dots .slick-active button {width:43px; opacity:1;}


/* main_inner */
.main_inner {text-align:left; position:relative; z-index:2; width:100%; max-width:1820px; padding:0 50px; top:-25px;}
.main_inner .top {margin-bottom:63px; padding-bottom:44px;}
.main_inner .top .sub_tit {margin-bottom:28px;}
.main_inner .top .vm_btn {margin-bottom:15px;}
.main_inner .bot {padding-left:217px; display:flex; justify-content:space-between; align-items:flex-end;}
.main_inner .bot .logo {margin-left:50px; flex-shrink:0;}
.main_inner .top,
.main_inner .bot {opacity:0;}

/* scroll_down */
#scroll_down {position:absolute; right:100px; bottom:0; width:40px; height:220px; z-index:10;}
#scroll_down a {position:absolute; bottom:87px; left:94%; transform:translateX(-50%); display:block; font-size:14px; color:rgba(255,255,255,.8); writing-mode:vertical-rl; letter-spacing:0;}
.scroll_icon {position:relative; width:7px; height:168px; display:flex; justify-content:center; align-items:center;}
.bar_wrap {position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:7px; height:168px; background-image:linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,.2));}
.redbar {width:7px; height:52px; background:#fff; position:absolute; top:0; left:0; animation:scrollFade 2s infinite ease-in-out;}

@keyframes scrollFade {
    0% {top:0; opacity:1;}
    70% {opacity:1;}
    100% {top:116px; opacity:0;}
}

/* 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;}
}