/*Content CSS*/
#main_vis {position: relative; z-index: 5; width: 100%; height:100vh; min-height:800px; max-height: 1080px; display: flex; align-items: center; justify-content: center;  padding:0 ;overflow: hidden;}
#main_vis::before{content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background: url('../img/main_ptn.png') repeat; z-index: 1; opacity: 0.1;}
#main_vis_slider {width: 100%; height: 100%; min-height:800px; max-height: 1080px; position: absolute; top: 0; left: 0; }
#main_vis_slider .main_slide {height:100vh; min-height:720px; z-index: 1;  background-size:100% 100%; 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'); }
#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_desciption*/
.main_desciption_wrap {text-align: left; position: relative; z-index: 2; max-width:1600px; padding: 0 50px; width: 100%; top: 40px;}
.main_desciption {position: relative; z-index: 1; }
.main_desciption h2 {font-size:100px; font-weight:800; color:#fff; line-height:100px; font-family: 'Gothic A1', sans-serif;}
.main_desciption h2::before{content: ''; display: block; width: 50px; height: 5px; background-color: #fff; margin-bottom: 23px;}
.main_desciption p {font-size:22px; font-weight:300; color:rgba(255,255,255,1); line-height: 38px;  margin:35px 0 60px; font-family: 'Gothic A1' }


/*main_controller*/
#main_vis .controller {width: 100%; display: flex ; align-items: center; }
#main_vis .controller .flex {display: flex; align-items: center; }

#main_vis .slick-arrow {cursor:pointer; transition: all 0.2s; display: block; text-decoration: none; font-size:0; background: transparent; border: none; width: 9px; height: 14px;}
#main_vis .slick-arrow.prev { background:url('../img/back.png') no-repeat center; background-size: 100% 100%;}
#main_vis .slick-arrow.next { background:url('../img/front.png') no-repeat center; background-size: 100% 100%;}

#main_vis .dots{margin: 0 36px;}
#main_vis .slick-dots{display: flex;}
#main_vis .slick-dots li{margin-right: 18px;}
#main_vis .slick-dots li:last-child{margin-right: 0;}
#main_vis .slick-dots button{font-size: 0; width: 8px; height: 8px; background-color: rgba(255,255,255,.3); border-radius: 50%;}
#main_vis .slick-dots li.slick-active button{background-color: rgba(255,255,255,1);}


/* 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;}

/* paging number */
#main_vis .indication_main_wr {display: flex; align-items:baseline; position: absolute; bottom:83px; right: 182px; z-index: 5;}
#main_vis .indication_main_wr span {font-size: 20px; font-weight: 700; color:rgba(255, 255, 255, 0.4); font-family: 'Gothic A1', sans-serif; display: block; }
#main_vis .indication_main_wr span.slash {margin:0 10px; }
#main_vis .indication_main_wr span.pagingInfo {color:#fff; font-size: 80px; font-weight: 600; line-height: 1;}


/*progress*/
.round_prog_wrap {position: relative; margin-right: 45px; height: 40px;}
#play_btn {position: absolute; left:0; top:0; width: 100%; height: 100%; padding: absolute; left: 0; top:0; display: flex; align-items: center;
justify-content: center; }
#play_btn a {cursor: pointer; position: relative;}
#play_btn .play {display: none;}
.round_prog {
	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;
	}
}

/* scroll_down */
.scroll{position: absolute; bottom: 83px; right: 49px; animation:ani 1s infinite; z-index: 2;}
@keyframes ani{
            0%{bottom: 83px;}
            50%{bottom: 93px;}
            100% {bottom: 83px;}
         }
.scroll a{display: flex; flex-direction: column-reverse; align-items: center;}
.scroll a span{writing-mode: tb; color: #fff; transform: rotate(180deg); letter-spacing: 1px; margin-bottom: 15px; font-size: 12px; font-family: 'Montserrat';}




@media screen and (max-width:1280px) {
	#main_vis, #main_vis_slider
	#main_vis_slider .main_slide{min-height: auto; height:800px; max-height: 800px;}
	.main_desciption_wrap  {padding: 0 50px; }
	.progress_wr {display: none; }
    #main_vis .indication_main_wr{right: 50px; bottom: 50px;}
    .scroll{display: none;}
}

@media screen and (max-width: 1024px) {
    #main_vis,
	#main_vis_slider .main_slide { height: 650px; max-height: 650px;}
	.main_desciption_wrap {padding:0 30px; text-align: center; top: 0; position: static;}
    .main_desciption h2 {font-size:55px; line-height: 1.2;}
    .main_desciption h2::before{margin: 0 auto 13px;}
    .main_desciption p {font-size: 18px; line-height: 1.6; margin:30px 0 50px; }
    #main_vis .controller {justify-content: center; position: absolute; width: initial; left: 50%; transform: translateX(-50%); bottom: 50px;}
	.round_prog_wrap {margin-right: 30px; }
	#main_vis .indication_main_wr {justify-content: center; left: 50%; transform: translateX(-50%); display: none}
    #main_vis .indication_main_wr span.pagingInfo{font-size: 45px;}
    #main_vis .indication_main_wr span{font-size: 15px;}
    #main_vis .indication_main_wr span.slash{margin: 0 7px;}
    .round_prog_wrap{margin-right: 20px;}
    #main_vis .dots{margin: 0 20px;}
    #main_vis .slick-dots li{margin-right: 12px;}


}
@media screen and (max-width: 640px) {
	#main_vis,
	#main_vis_slider .main_slide {height: 550px; max-height: 550px;}
    #main_vis {padding-top: 30px;}
	#main_vis_slider::before { background: rgba(0,0,0,.2); }

	.main_desciption_wrap {padding:0 20px;}

    .main_desciption h2 {font-size:45px; }
    .main_desciption p {font-size: 16px; margin:25px 0 40px; }

    /* paging number */
    #main_vis .indication_main_wr { margin:0 20px;  width: 54px;}
    #main_vis .indication_main_wr span { font-size: 15px;}

}