/*Content CSS*/
#main_vis {position: relative; z-index: 5; width:calc(100% - 40px); height:680px; margin: 0 auto;
overflow: hidden; border-radius: 30px;  margin-top: 70px;}
/* #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%; }
#main_vis_slider .main_slide { height:380px; 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: 100%; height: 300px; background-color: #095eab; display: flex; align-items: flex-start; justify-content: flex-start;
padding-left: 30px; padding-right: 30px; flex-direction: column;flex-shrink: 0;  }
.main_typo {position: relative; z-index: 1; width: 100%; padding-top: 37px;}
.main_typo h2 {font-size:24px; font-weight:400; color:#fff; line-height: 1.18; }
.main_typo h2 b {font-weight: 700;}
.main_typo p {font-size:16px; font-weight:400; color:rgba(255,255,255,.6); line-height:1.5; margin-top:18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.3);}

#main_vis .controller { display: flex; align-items: center; margin-top: 28px; width: 100%; }



/* progress */
#main_vis .bar_wr {width: 100%; 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: 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: 25px; height: 25px;flex-shrink: 0; margin-right: 10px; border-radius: 50%;
background: rgba(255,255,255,.25); padding: 0 0 1px 0;}
#play_btn a {cursor: pointer; }
#play_btn a img {height: 10px;}
#play_btn .play {display: none;}


/* dots */
#main_vis .dots {position: absolute; top: 50%;  transform: translateY(-50%); right: 30px; z-index: 3;}
#main_vis .slick-dots {display: flex; flex-direction: column; justify-content: center; margin-top: 230px;}
#main_vis .slick-dots li { margin-bottom:10px; }
#main_vis .slick-dots li:last-child {margin-bottom: 0; }
#main_vis .slick-dots button {font-size: 0; width: 10px; height: 10px; 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) {

}