/*Content CSS*/
#main_vis {position: relative; z-index: 5; width: 100%; height:100vh; min-height:937px; display: flex; align-items: center; justify-content: center; max-height: 1080px;}

#main_vis_slider {width:100%; position: absolute; top: 0; right: 0; }
#main_vis_slider .main_slide {height: 100%; height:100vh; min-height:937px; max-height: 1080px; z-index: 1;  background-size:cover; background-position:center;  position:relative; background-repeat: no-repeat; display: flex; align-items: flex-start; justify-content: center; outline: none; }
#main_vis_slider .main_slide.img01 { background-image:url('../img/main1.jpg');}
#main_vis_slider .main_slide.img02 { background-image:url('../img/main2.jpg'); background-position: 75% 50%;}
#main_vis_slider .main_slide.img03 { background-image:url('../img/main3.jpg'); background-position: 60% 50%;}

/* #main_vis_slider .main_slide::before{content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background-color: rgba(0,0,0,.3);} */
/*main_typo*/
.main_typo_wrap {text-align: left; position: relative; z-index: 2; max-width:1600px; padding:0 50px; width: 100%;}
.main_typo {position: relative; z-index: 1; }
.main_typo h3 {font-size:35px; font-weight:400; color:#fff; line-height: 1.1; }
.main_typo h2 {font-size:80px; font-weight:700; color:#fff; line-height: 1.1; margin: 25px 0 50px;  }
.main_typo p {font-size:22px; font-weight:400; color:rgba(255,255,255,1); line-height:1.68; }

#main_vis .controller {position: absolute; z-index: 3; max-width:1600px; padding:0 50px; width: 100%; left: 50%; transform: translateX(-50%); bottom: 85px; }
#main_vis .arrows { display: flex; }
#main_vis .arrows .slick-arrow {cursor: pointer; height: 50px; width: 50px;font-size: 0; transition: all .3s; border-radius: 50%; border:1px solid rgba(255,255,255,1);}
#main_vis .arrows .slick-prev { background:url('../img/prev.png') no-repeat center transparent; }
#main_vis .arrows .slick-next { background:url('../img/next.png') no-repeat center transparent; margin-left: 10px; }
#main_vis .arrows .slick-arrow:hover {background-color: rgba(255,255,255,.2); }

/* progress */
#main_vis .bar_wr {width:100%; max-width:650px; height: 3px; background: rgba(255,255,255,.3); position: relative; margin-top: 27px; }
#main_vis .redbar { width:1px; height:3px; opacity: 1; position:absolute; left:0; top:-0; z-index:10; transition-property: width; transition-duration: 5000ms;
transition-timing-function: linear; }
#main_vis .redbar.redbar_active { width:100%; height:100%; opacity: 1; background: #fff; transition-property: width; transition-duration: 5000ms; transition-timing-function: linear; }
#main_vis .redbar.redbar_remove {width:0px; height:100%; opacity: 1; background: #fff; transition-property: width; transition-duration: .1s; transition-timing-function: linear;}


/* scroll_down */
#scroll_down a { position:absolute; bottom:50px; z-index: 2; animation:ani 1.4s infinite ease; cursor: pointer; right: 80px;}
/* #scroll_down a img {margin-top: 5px;} */
@keyframes ani {
    0%{bottom:65px;}
    50%{bottom: 80px;}
    100% {bottom:65px;}
}


@media screen and (max-width: 1800px) {
    #scroll_down a {right: 40px;}
}


@media screen and (max-width: 1024px) {
    #scroll_down {display: none;}
    .main_typo_wrap {padding:0 30px; text-align: center;}
    #main_vis, #main_vis_slider .main_slide {min-height: 700px; height: 700px; }

    .main_typo h3 { font-size: 25px;}
    .main_typo h2 {font-size:55px; margin: 20px 0 30px; }
    .main_typo p {font-size: 18px;}

    #main_vis .controller {bottom: 60px; padding: 0 30px;}
    #main_vis .arrows {justify-content: center;}
    #main_vis .bar_wr {margin: 25px auto 0;}

    #main_vis .num_wr {justify-content: center;}


}

@media screen and (max-width: 640px) {
    #main_vis  {padding-top: 80px;}
    #main_vis, #main_vis_slider .main_slide {min-height: 550px; height: 550px; }
    .main_typo_wrap {padding:0 20px; }

    .main_typo h3 { font-size: 20px;}
    .main_typo h2 {font-size:40px; margin: 15px 0 20px; }
    .main_typo p {font-size: 15px;}
    .main_typo p br {display: none;}

    #main_vis { padding-bottom: 100px;}
    #main_vis .controller {bottom: 40px; padding: 0 20px;}
    #main_vis .controller .flex {margin-top:15px; flex-direction: column; }

    #main_vis .arrows .slick-arrow {width: 40px; height: 40px; background-size: 9px auto !important;}
    #main_vis .arrows .slick-next {margin-left: 5px;}
    #main_vis .bar_wr {margin: 20px auto 0;}



}