/*Content CSS*/
#main_vis {position: relative; z-index: 5; width: 100%; height:100vh; min-height:720px; display: flex; align-items: flex-end; justify-content: center;  padding:0 0 192px;}
#main_vis_slider {width: 100%; height: 100%; position: absolute; top: 90px; left: 0; }
#main_vis_slider::before {content: ''; display: block; width: 100%; height:  100%; background: rgba(0,0,0,0); position: absolute; left: 0; top:0; z-index: 1;}
#main_vis_slider .main_slide {height:calc(100vh - 90px); min-height:720px; z-index: 1;  background-size:cover; background-position:bottom;  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_vis_slider .main_slide.img04 { background-image:url('../img/main4.jpg');}

/* font */
#main_vis .fs_28{font-size: 28px; font-weight: 400; line-height: 1; color: #fff; font-family: 'SUIT', sans-serif;}
#main_vis .fs_25{font-size: 25px; font-weight: 600; line-height: 1; color: #fff; font-family: 'SUIT', sans-serif;}
#main_vis .fs_20{font-size: 20px; font-weight: 600; line-height: 1; color: #fff; font-family: 'SUIT', sans-serif;}


/* main_inner */
.main_inner{position: relative; z-index: 5; width: 100%; max-width: 1730px; padding: 0 90px; display: flex; align-items: flex-end; justify-content: space-between;}
.main_inner .main_text h2{font-size: 120.5px; font-weight: 800; line-height: 1; color: #fff; }
.main_inner .main_text .fs_20{position: relative; padding: 15px 34px; border: solid 1px #fff; border-radius: 28.5px; margin-right: 29px;}
.main_inner .main_text .fs_20::after{content: ''; display: block; width: 1px; height: 45px; background-color: #fff; position: absolute; top: 50%; transform: translateY(-50%); right: -29px; }
.main_inner .main_text .flex{display: flex; align-items: center; margin-top: 55px;}


/* progress */
.progress_wr {width:1px; height: 100%; background: rgb(221, 221, 221, .5); position: absolute; right: 89px;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;}


#main_arrow{display: flex; padding-right: 55px;}
#main_arrow > div{transition: .3s;}
#main_arrow > div + div{margin-left: 10px;}
#main_arrow .slick-arrow {cursor:pointer; transition: all 0.2s; display: block; text-decoration: none; font-size:0; background: transparent; width: 97px; height: 97px; border: solid 1px #fff; border-radius: 50%; background-size: 24px 16px;}
#main_arrow .slick-arrow.prev { background:url('../img/prev.png') no-repeat center;}
#main_arrow .slick-arrow.next { background:url('../img/next.png') no-repeat center; }\

#main_dots{display: none;}
#main_dots .slick-dots{display: flex; align-items: center; justify-content: center;}
#main_dots .slick-dots li button{font-size: 0; width: 10px; height: 10px; background-color: #fff; opacity: .5; border-radius: 50%;}
#main_dots .slick-dots li{margin-right: 8px;}
#main_dots .slick-dots li:last-child{margin-right: 0;}
#main_dots .slick-dots .slick-active{margin-right: 14px;}
#main_dots .slick-dots .slick-active button{opacity: 1; width: 56px; border-radius: 15px;}


/* main_link */
#main_link{position: absolute; top: calc(100% - 105px); width: 100%; max-width: calc(100% - 180px); padding: 0 53px; z-index: 100;}
#main_link .box a{position: relative; display: block; padding: 40px 53px; min-height: 105px; background-color: rgba(221,221,221,.26); font-family: 'Pretendard', sans-serif !important; transition: .3s; }
#main_link .box + .box a{border-left: solid 1px rgba(221,221,221,.26);}
#main_link .box a::after{content: ''; display: block; width: 180px; height: 100%; background: url('../img/dir_logo.png') 50% no-repeat; position: absolute; bottom: 0; right: 0; z-index: 1; opacity: 0; transition: .3s;}
#main_link .box a i{display: block; width: 21px; height: 21px; background: url('../img/link_arrow.png') 50% no-repeat;}
#main_link .box .flex{display: flex; align-items: center; justify-content: space-between;}

#main_link .box .fs_20{display: block; height: 0; overflow: hidden; transition: .3s;}
#main_link .box .fs_20::before{content: ''; display: block; width: 26px; height: 1px; background-color: #fff; margin: 60px 0 17px;}

#main_link .slick-arrow{width: 53px; height: 105px; background-color: #111; position: absolute; top: 0; z-index: 105; cursor: pointer; transition: .3s;}
#main_link .slick-arrow.prev{left: 0;}
#main_link .slick-arrow.next{right: 0;}
#main_link .slick-arrow::before{content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 9px; height: 17px;}
#main_link .slick-arrow.prev::before{background-image: url('../img/link_prev.png');}
#main_link .slick-arrow.next::before{background-image: url('../img/link_next.png');}

/*progress*/
.cir_progress_wrap {position: relative; margin: 0 25px 0 35px;}
#play_btn {position: absolute; left:0; top:0; width: 100%; height: 100%; 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;
	}
}

#main_vis #scroll_down{position: absolute; bottom: 44px; right: 39px; z-index: 1;}
#main_vis #scroll_down a{animation:ani 1.4s infinite ease; position: relative;}
@keyframes ani {
    0%{bottom:0;}
    50%{bottom: -15px;}
    100% {bottom:0;}
}

@media screen and (min-width:1025px) {
	#main_arrow .slick-arrow:hover{border-color: #002d8f; background-color: #002d8f;}
	#main_link .slick-arrow:hover{background-color: #555;}
	#main_link .box a:hover{background-color: #002d8f; border-color: #002d8f}
	#main_link .box a:hover::after{opacity: 1}
	#main_link .box a:hover .fs_20{height:40px; opacity: 1; overflow: visible;}

}
@media screen and (max-width:1700px) {
	#main_link .box a{padding: 40px 35px;}
}

@media screen and (max-width:1600px) {
	#main_vis .fs_28{font-size: 26px;}
	#main_vis .fs_25{font-size: 24px;}
	#main_vis .fs_20{font-size: 19px;}
	#main_vis{padding: 0 0 180px;}
	.main_inner{padding-left: 50px;}
	.main_inner .main_text h2{font-size: 115px;}
	.main_inner .main_text .flex{margin-top: 50px;}
	.main_inner .main_text .fs_20{padding: 14px 30px; margin-right: 25px;}
	.main_inner .main_text .fs_20::after{height: 43px; right: -25px;}
	.cir_progress_wrap{margin: 0 20px;}

	#main_link{max-width: calc(100% - 91px); left: 0; top: calc(100% - 94px)}
	#main_link .box a{padding: 35px; min-height: 94px;}

	#main_link .slick-arrow{height: 94px;}
	#main_arrow{padding-right: 50px;}
	#main_arrow .slick-arrow{width: 85px; height: 85px;}

	#main_link .box a:hover{padding-bottom: 30px;}

}

@media screen and (max-width:1400px) {
	#main_vis .fs_28{font-size: 24px;}
	#main_vis .fs_25{font-size: 22px;}
	#main_vis .fs_20{font-size: 18px;}
	#main_vis{padding: 0 0 170px;}

	.main_inner .main_text h2{font-size: 100px;}
	.main_inner .main_text .flex{margin-top: 35px;}
	.main_inner .main_text .fs_20{padding: 10px 25px; margin-right: 20px;}
	.main_inner .main_text .fs_20::after{height: 38px; right: -20px;}

	#main_link{ top: calc(100% - 82px)}
	#main_link .box a{padding: 30px 25px; min-height: 82px;}
	#main_link .box a i{width: 18px; height: 18px; background-size: cover;}
	#main_link .box .fs_20::before{margin: 40px 0 15px;; }
	#main_link .slick-arrow{height: 82px;}

	#main_arrow .slick-arrow{width: 75px; height: 75px;}

	#main_link .box a:hover{padding-bottom: 25px;}


}

@media screen and (max-width:1280px) {
	#main_vis,
	#main_vis_slider .main_slide {min-height: auto; height:800px;}

	#main_vis{padding: 0 0 150px;}
	#main_vis_slider{top: 0;}



	#main_vis .fs_28{font-size: 22px;}
	#main_vis .fs_25{font-size: 20px;}
	#main_vis .fs_20{font-size: 16px;}

	.main_inner .main_text h2{font-size: 80px;}
	.main_inner .main_text .flex{margin-top: 30px;}
	.main_inner .main_text .fs_20{padding: 10px 20px; margin-right: 15px;}
	.main_inner .main_text .fs_20::after{height: 35px; right: -15px;}

	.cir_progress_wrap{margin: 0 15px;}

	#main_link{top: calc(100% - 70px)}
	#main_link .box a{padding: 25px 20px; min-height: 82px;}

	#main_link .box a::after{width: 150px; background-size: cover;}
	#main_link .box a i{width: 18px; height: 18px; background-size: cover;}
	#main_link .slick-arrow{height: 70px;}

	#main_arrow .slick-arrow{width: 75px; height: 75px;}

	#main_link .box a:hover{padding-bottom: 20px;}



}

@media screen and (max-width: 1024px) {
    #main_vis,
	#main_vis_slider .main_slide { height: 650px;}

	#main_vis{padding-bottom: 0; align-items: center;}
	#main_vis .fs_28{font-size: 20px;}
	#main_vis .fs_25{font-size: 18px;}
	#main_vis .fs_20{font-size: 15px;}

	.progress_wr{display: none;}
	.main_inner .main_text h2{font-size: 70px;}

	.main_inner{padding: 0 30px; justify-content: center; text-align: center;}

	#main_arrow{display: none;}
	#main_dots{display: block; position: absolute; bottom: -130px; left: 50%; transform: translateX(-50%);}

	#main_link{max-width: 100%; top: initial; bottom: 0; padding: 0 40px;}
	#main_link .box a{padding: 20px 15px; min-height: 0; }
	#main_link .box a i{width: 15px; height: 15px;}
	#main_link .slick-arrow{width: 40px; height: 100%;}


	#main_vis #scroll_down{display: none;}



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


	#main_dots{bottom: -110px;}

	.main_inner{padding: 0 20px;}
	.main_inner .main_text h2{font-size: 50px;}
	.main_inner .main_text .flex{display: block; margin-top: 25px;}
	.main_inner .main_text .fs_20{margin: 0 auto; width: fit-content;}
	.main_inner .main_text .fs_20::after{display: none;}
	#main_vis .fs_28{margin-top: 50px;}

	.cir_progress_wrap{display: none;}
	#main_link .box a{border: 0 !important;}




}