
/*Content CSS*/
#main_vis {padding:0; display:block; position: relative; z-index: 5; width: 100%; height: 550px;  display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 0 0 50px 0;}
#main_vis_slider {width: 100%; height: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#main_vis_slider .main_slide {width: 100%; height: 550px;   position: relative; z-index: 1;  background-size:cover; background-position:center;  position:relative; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; padding:0 0 0; }
#main_vis_slider .main_slide.img01 { background-image:url('../img/main1.jpg'); background-position: 60% 50%;}
#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'); background-position: 100% 50%;}


/*main_typo*/
.main_typo_wrap {text-align: center; position: relative; z-index: 2; max-width:1660px; padding:0 20px; width: 100%;}
.main_typo {position: relative; z-index: 1; }
.main_typo h3 {font-size: 16px; font-weight: 600; color:#fff; line-height: 1.1; font-family: "S-CoreDream-6Bold", serif;}
.main_typo h2 {font-size:30px; font-weight:300; color:#fff; line-height:1.4; font-family: "S-CoreDream-3Light"; margin:15px 0 20px;}
.main_typo h2 b {font-weight: 600; font-family: "S-CoreDream-6Bold", serif; }
.main_typo p {font-size: 14px; font-weight: 400; color:#fff; line-height: 1.4; font-family: "S-CoreDream-4Regular", serif;}


/*컨트롤러*/
#main_vis .controller {width: 100%; display: flex ; align-items: center; margin-top:30px; justify-content: 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/prev.png') no-repeat center; }
#main_vis .slick-arrow.next { background:url('../img/next.png') no-repeat center;}

#main_vis .slick-dots {width: auto; position: absolute; right: 120px;  top: 45%;  transform: translateY(-50%); }
#main_vis .slick-dots button {position: relative; opacity: 1; margin: 0; display: block; width: auto; height: auto; font-size: 0;}
#main_vis .slick-dots li + li {margin-top: 50px;}
#main_vis .slick-dots button::before {content: ''; display: block; width: 8px; height: 8px; background: #fff; border-radius: 50%;}
#main_vis .slick-dots button::after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: transparent; border: 2px solid rgba(255,255,255,.5); opacity: 0; z-index: -1;}
#main_vis .slick-dots .slick-active button::after {opacity: 1;}


/* paging number */
#main_vis .num_wr {display: flex; align-items:center; position: relative;  margin:0 25px; }
#main_vis .num_wr span { font-size: 15px; font-weight: 700; color:rgba(255, 255, 255, 0.4); display: block; }
#main_vis .num_wr span.slash {margin:0 15px; }
#main_vis .num_wr span.pagingInfo {color:#fff; min-width: 12px;}


/*progress*/
.cir_progress_wrap {position: relative; margin-right: 20px; }
#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; top:-2px;}
#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;
	}
}

#scroll_down a { position:absolute; bottom:60px; z-index: 2; animation:ani 1.4s infinite ease; cursor: pointer; left: 50%;  transform: translateX(-50%);}
@keyframes ani {
    0%{bottom:80px;}
    50%{bottom: 95px;}
    100% {bottom:80px;}
}

#main_vis .vis_logo {position: absolute; z-index: 2; right: 20px; bottom: 30px; width:70px; }

@media screen and (max-width: 1600px) {
	#main_vis .slick-dots {right: 50px; }
}

/* @media screen and (max-width: 1024px) {
	#scroll_down {display: none;}
	#main_vis {margin-top: 0; padding-left: 0; padding-top: 40px;}
    #main_vis,
	#main_vis_slider .main_slide { height: 550px; min-height: 0; }

	.main_typo_wrap {padding:0 30px; text-align: center;}
    .main_typo h2 {font-size:35px; }
	.main_typo h2 b {font-size: 120%;}
    #main_vis .controller {justify-content: center;}
	.cir_progress_wrap {margin-right: 30px; }
	#main_vis .num_wr { top:0;}

} */

/* @media screen and (max-width: 640px) {
	#main_vis,
	#main_vis_slider .main_slide {height: 500px;} */
    /* #main_vis {padding-top: 30px;} */

	/* .main_typo_wrap {padding:0 20px;}

    .main_typo h2 {font-size:22px; }
	#main_vis .controller {margin-top: 40px; } */

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

} */
