/*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-bottom: 30px;}
/* #main_vis::after {content: ''; display: block; width: calc(100% - 200px); max-width: calc(50% + 750px); height: 90px; background-color: #fff; position: absolute; left: 0; bottom: 0;} */

#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');}
#main_vis_slider .main_slide.img03 { background-image:url('../img/main3.jpg');}
#main_vis_slider .main_slide.img04 { background-image:url('../img/main4.jpg');}

/* #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 {color:#fff; font-size: 22px; font-weight: 400; line-height: 1.1;letter-spacing: 11px; font-family: 'Play', sans-serif; text-transform: uppercase;}
.main_typo h2 {font-size:90px; font-weight:300; color:#fff; line-height: 1.33; margin: 30px 0 40px;}
.main_typo h2 b {font-weight: 800;}
.main_typo h2 b span {color:#00a0ce; }
.main_typo p {font-size:26px; font-weight:400; color:rgba(255,255,255,1); line-height:1.69; }

#main_vis .controller {position: absolute; z-index: 3; max-width:1600px; padding:0 50px; width: 100%; left: 50%; transform: translateX(-50%); bottom: 95px; }
#main_vis .controller .flex {display: flex; align-items: center; margin-top: 120px;}


/* paging number */
#main_vis .num_wr {display: flex; align-items:center; position: relative; flex-shrink: 0; margin-right: 30px; }
#main_vis .num_wr span { font-size: 20px; font-weight: 400; color:rgba(255, 255, 255, 0.3); display: block; font-family: 'Play', sans-serif;}
#main_vis .num_wr span.slash {font-size: 0; width: 1px; height: 15px; background-color:rgba(255, 255, 255, 0.3); margin: 0 14px; position: relative; top:1px;}
#main_vis .num_wr span.pagingInfo {color:#fff; width: 25px;}
#main_vis .num_wr span::before {content: '0';}

/* progress */
#main_vis .bar_wr {width:100%; max-width:1360px; height: 3px; background: rgba(255,255,255,.2); 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: 6000ms;
transition-timing-function: linear; }
#main_vis .redbar.redbar_active { width:100%; height:100%; opacity: 1; background: #fff; transition-property: width; transition-duration: 6000ms; 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;}

#play_btn {display: flex; align-items: center; justify-content: center; position: relative; width: 10px; flex-shrink: 0; margin-left: 32px;}
#play_btn a {cursor: pointer; }
#play_btn .play {display: none;}

/* scroll_down */
#scroll_down a { position:absolute; right: 110px; bottom:100px; z-index: 2; cursor: pointer; display: flex; flex-direction: column; align-items: center;
/*animation:ani 1.4s infinite ease;*/}
@keyframes ani {
    0%{transform: translateY(0);}
    50%{transform: translateY(-5px);}
    100% {transform: translateY(0);}
}

#scroll_down .mouse { display: block; width: 9px; height: 22px; background-color: #0dbed5; border-radius: 4.5px; margin-top: 9px; }
#scroll_down .mouse::after { content:''; display: block; position: relative; width: 5px; height: 5px; margin: 5px auto; background: #ffffff; animation: mouse_ani 1.2s ease infinite; border-radius: 50%;}
@keyframes mouse_ani {
    0% { opacity: .9; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(8px); }
}

/* dots */
#main_vis .dots {position: absolute; right: 110px; top: 45%;  transform: translateY(-50%); }
#main_vis .dots ul {display: flex ; flex-direction: column;  }
#main_vis .dots ul li {margin-bottom: 15px; transition: all .3s;}
#main_vis .dots ul li:last-child {margin: 0; }
#main_vis .dots ul button {border:0; font-size: 0; outline: none; background: rgba(255,255,255,.3); width:7px; height:7px; transition: all .3s ease;  border-radius: 50%;}
#main_vis .dots ul li.slick-active button {background: #fff; height: 34px; border-radius: 3px; }



@media screen and (max-width: 1800px) {
    #scroll_down a {right: 40px; }
    #main_vis .dots {right: 40px; }
    #main_vis .controller {padding-right: 100px;}

}

@media screen and (max-width: 1280px) {
    #main_vis {padding-bottom: 100px; }
    /* #main_vis .controller {bottom: 150px;} */
    .main_typo h2 {font-size: 70px;}

    #scroll_down {display: none; }
    #main_vis .dots {right: auto; top:auto; width: 100%; max-width: 1600px; padding: 0 50px; bottom:250px; left: 50%;  transform: translateX(-50%);}
    #main_vis .dots ul {flex-direction: row; justify-content: flex-start; }
    #main_vis .dots ul li {margin:0 15px 0 0;}
    #main_vis .dots ul li.slick-active button {width: 34px; height: 7px;}
}

@media screen and (max-width: 1024px) {
    #main_vis::after,
    #scroll_down {display: none;}

    .main_typo_wrap {padding:0 30px; text-align: center;}
    #main_vis {padding-bottom:70px; }
    #main_vis, #main_vis_slider .main_slide {min-height: 700px; height: 700px; }

    .main_typo h3 {font-size:16px;  }
    .main_typo h2 {font-size:50px;  }
    .main_typo p {font-size: 18px; }

    #main_vis .controller {bottom: 50px; padding: 0 30px;}
    #main_vis .controller .flex {margin-top: 30px;}

    #main_vis .dots { bottom: 180px; padding: 0 30px; }
    #main_vis .dots ul {justify-content: center;}


}

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

    #main_vis_slider .main_slide {padding: 0 0 50px; align-items:center;}

    .main_typo h3 {font-size:13px; letter-spacing: 6px; }
    .main_typo h2 {font-size:40px; margin: 15px 0 20px; }
    .main_typo p {font-size: 15px; }

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


    #main_vis .num_wr {margin-right: 15px; }
    #main_vis .num_wr span {font-size: 16px;}
    #main_vis .num_wr span.pagingInfo {width: 19px;}
    #main_vis .num_wr span.slash {margin: 0 10px;}

    #main_vis .dots {bottom: 150px; padding: 0 20px;}

    #play_btn {margin-left: 15px;}
}
@media screen and (max-width: 480px) {
    .main_typo h2 {font-size:32px; }
    .main_typo p br {display: none;}

}