
/*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;
padding-top:50px; overflow: hidden;}
#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:80% 50%;  position:relative; background-repeat: no-repeat; display: flex; align-items: center; 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'); }
#main_vis_slider .main_slide.img03 { background-image:url('../img/main3.jpg'); }


/*main_typo*/
.main_typo_wrap {text-align: left; position: relative; z-index: 2; max-width:1680px; padding:0 50px; width: 100%;}
.main_typo {background-color: rgba(1,64,153,.91); padding: 90px 100px; display: inline-block; }
.main_typo h2 {font-size:83px; font-weight:700; color:#fff; line-height: 1.2;}
.main_typo h3 {font-size:64px; font-weight:300; color:#fff; line-height: 1.2; letter-spacing: -1.28px; margin-top: 10px;}
.main_typo p {font-size:22px; font-weight:400; color:rgba(255,255,255,.8); line-height:1.77; }
.main_typo p::before {content: ''; display: block; width: 70px; height: 2px; background-color: #fff; margin: 55px 0;}

/* contr */
#main_vis .contr_wrap { max-width:1840px; padding:0 50px; width: 100%; position: absolute; bottom: 90px; left: 50%;  transform: translateX(-50%); display: flex; justify-content: flex-end;}

/* dots */
#main_vis .slick-dots {display: flex; align-items: flex-end; text-align: left; }
#main_vis .slick-dots li { margin-right:17px;  cursor: pointer;}
#main_vis .slick-dots li:last-child {margin-right: 0; }
#main_vis .slick-dots button { font-size: 16px; width:120px; border:2px solid rgba(255,255,255,.3);border-width: 0 0 2px; font-weight: 700; color:rgba(255, 255, 255, 1); font-family: 'Montserrat'; position: relative; padding-bottom: 10px; display: flex;}
#main_vis .slick-dots button::before {content: '0'; }
#main_vis .slick-dots button::after { content: '';display: block; width: 0; height:2px; position: absolute; left: 0; bottom: -2px; background-color: #fff;  transition-property: width;  transition-timing-function: linear;}
#main_vis .slick-dots li.slick-active button::after {width:0; transition-duration: 4000ms;}
#main_vis .slick-dots li.slick-active button.redbar_active::after {width: 100%;}

/* progress */
#main_vis .bar_wr {width:100%; max-width:800px; height: 3px; background: rgba(255,255,255,.3); position: relative; }
#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 a { position:absolute; bottom:90px; z-index: 2; left:90px; animation:ani 1.4s infinite ease; cursor: pointer; }
@keyframes ani {
    0%{bottom:80px;}
    50%{bottom: 95px;}
    100% {bottom:80px;}
}


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


@media screen and (max-width: 1400px) {
    .main_typo {padding: 60px 70px;}
    .main_typo h2 {font-size:64px; }
    .main_typo h3 {font-size:54px; }
    .main_typo p {font-size:20px;  }
    .main_typo p::before { margin: 35px 0;}
}

@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_vis {padding: 0;}

    .main_typo {padding: 50px 60px; background-color: rgba(1,64,153,.8);}
    .main_typo h2 {font-size:54px; }
    .main_typo h3 {font-size:42px; margin-top: 5px;}
    .main_typo p {font-size:18px;  }
    .main_typo p::before { margin: 25px auto; }

    #main_vis .contr_wrap {padding: 0 30px; bottom:60px; justify-content:center;}

    #main_vis .slick-dots button { justify-content: center; text-align: center;}

}


@media screen and (max-width: 640px) {
    #main_vis {padding-bottom: 30px;}
    #main_vis, #main_vis_slider .main_slide {min-height: 550px; height: 550px; }

    .main_typo_wrap {padding:0 20px; }
    .main_typo {padding: 30px 40px;}
    .main_typo h2 {font-size:34px; }
    .main_typo h3 {font-size:27px; }
    .main_typo p {font-size:15px;  }
    .main_typo p::before { margin: 20px auto; width: 50px; }

    #main_vis .contr_wrap {padding: 0 20px;}


    #main_vis .slick-dots button {font-size: 15px; width:70px; padding-bottom: 7px; }
    #main_vis .slick-dots li {margin-right: 10px; }

}
@media screen and (max-width: 500px) {
    .main_typo {  padding: 30px 20px;    display: flex; margin: 0 auto; align-items: center; flex-direction: column;}
    .main_typo h2 {font-size:30px;}
    .main_typo h3 {font-size:24px; }
    .main_typo p {font-size:13px;  }
    .main_typo p br {display: none;}

}
