/*Content CSS*/
#main_vis {position: relative; z-index: 5; width: 100%; height:500px; display: flex; align-items: center; justify-content: center; top: 0px; left: 0px; overflow: hidden;}
#main_vis_slider {width:100%; position: absolute; top: 0; right: 0; }
#main_vis_slider .main_slide {height: 100%; height:500px; max-height: 1080px; z-index: 1;  background-size:cover; background-position:center;  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?v=250515');}
#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.img05 { background-image:url('../img/main5.jpg');}


/*main_typo*/
.main_typo_wrap {text-align: center; z-index: 2; padding: 0px 20px; width: 100%; max-width: 1400px;}
.main_typo {position: relative; z-index: 1; }
.main_typo h2 {font-family: 'Poppins',sans-serif; font-size: 30px; font-weight:700; color:#fff; line-height: 1.25; letter-spacing: .2px;}
.main_typo p {font-size:24px; font-weight:400; color:rgba(255,255,255,1); line-height:1.65; text-shadow: 0 0 20px rgba(0, 83, 66, 0.25); letter-spacing: -.48px;}

/* dots */
#main_vis .slick-dots {z-index: 3; display: flex; justify-content: flex-start; width: 167px; align-items: center;
max-width: 1400px; padding: 0px; cursor: pointer; margin-top: 185px; margin-right: 43px;}
#main_vis .slick-dots li { margin-right:15px;  cursor: pointer;}
#main_vis .slick-dots li:last-child {margin-right: 0; }
#main_vis .slick-dots button { display: flex; align-items: center; justify-content: center; font-size: 0; width: 15px; height:6px; border-radius: 50%; transition: 0.3s}
#main_vis .slick-dots button::after { content: '';display: block; width: 6px; height: 6px; border-radius: 50%; background-color: rgba(255,255,255,.5); }
#main_vis .slick-dots li.slick-active button::after {height: 6px;}
#main_vis .slick-dots li.slick-active button {border-radius: 10px; width: 40px; height: 6px; background: #fff;}

/*progress*/
.progress_wr {width:1px;  height: 100%; background: rgba(255,255,255,.3); position: absolute; right: 109px;bottom:0;}
.progress_bar { width:1px; height:1px; opacity: 1; position:absolute; left:0; top:-0; z-index:10; transition-property: height; transition-duration: 5000ms;
transition-timing-function: ease; }
.progress_bar.progress_bar_active { width:100%; height:100%; opacity: 1; background: #fff; transition-property: height; transition-duration: 5000ms; transition-timing-function: ease; }
.progress_bar.progress_bar_remove {width:100%; height:0; opacity: 1; background: #fff; transition-property: height; transition-duration: .1s; transition-timing-function: ease;}

.cir_progress_wrap {position: relative; margin-right: 0px; margin-top: 186px; width: 41px;}
#play_btn {position: absolute; display: flex; align-items: center; justify-content: center; cursor: pointer; top: 13px; left: 15px;}
#play_btn a {cursor: pointer; position: relative;}
#play_btn .play {display: none;}
.cir_progress {
	transform: rotate(-90deg);
}
.cir_progress_value {
	stroke-dasharray: 339;
	stroke-dashoffset: 339;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration:5000ms;
}
.cir_progress_value.active {animation-name:progress;}
.cir_progress_value.reset {stroke-dashoffset: 339; }
@keyframes progress {
	from {
		stroke-dashoffset: 339;
	}
	to {
		stroke-dashoffset: 0;
	}
}