
/*Content CSS*/
#main_vis {position: relative; z-index: 5; width:calc(100% - 100px); height:821px; display: flex;  margin: 0 auto;
overflow: hidden; border-radius: 50px;  margin-top: 15px;}
/* #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:calc(100% - 663px); }
#main_vis_slider .main_slide { height:821px; 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::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; width: 663px; background-color: #095eab; display: flex; align-items: flex-start; justify-content: flex-start;
padding-left: 98px; flex-direction: column;flex-shrink: 0;  }
.main_typo {position: relative; z-index: 1; width: 100%; padding-top: 115px; }
.main_typo h2 {font-size:63px; font-weight:400; color:#fff; line-height: 1.13; }
.main_typo h2 b {font-weight: 700;}
.main_typo p {font-size:25px; font-weight:400; color:rgba(255,255,255,.6); line-height:1.68; margin-top:45px; padding-top: 35px; border-top: 1px solid rgba(255,255,255,.3);
max-width: 370px;}

#main_vis .controller {position: absolute; bottom: 60px; left: 98px; display: flex; align-items: center; }



/* progress */
#main_vis .bar_wr {width:296px; height: 12px; background: rgba(255,255,255,.25); position: relative;  border-radius: 5px; overflow: hidden;}
#main_vis .redbar { width:1px; height:12px; 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;}

#play_btn {display: flex; align-items: center; justify-content: center; position: relative; width: 30px; height: 30px;flex-shrink: 0; margin-right: 28px; border-radius: 50%;
background: rgba(255,255,255,.25); padding: 0 0 1px 0;}
#play_btn a {cursor: pointer; }
#play_btn .play {display: none;}

/* scroll_down */
#scroll_down a { position:absolute; bottom:50px; z-index: 2; animation:ani 1.4s infinite ease; cursor: pointer; left: 50%;  transform: translateX(-50%);}
/* #scroll_down a img {margin-top: 5px;} */
@keyframes ani {
    0%{bottom:40px;}
    50%{bottom: 55px;}
    100% {bottom:40px;}
}

/* dots */
#main_vis .dots {position: absolute; top: 50%;  transform: translateY(-50%); right: 70px; z-index: 3;}
#main_vis .slick-dots {display: flex; flex-direction: column; justify-content: center; }
#main_vis .slick-dots li { margin-bottom:32px; }
#main_vis .slick-dots li:last-child {margin-bottom: 0; }
#main_vis .slick-dots button {font-size: 0; width: 13px; height:13px; background: rgba(255,255,255,.25); border-radius: 50%; transition: background-color .3s; }
#main_vis .slick-dots li.slick-active button {background-color: rgba(255,255,255,1);}




@media screen and (max-width: 1024px) {

}
