@charset "utf-8";

#content {position: relative;width: 100%;overflow-x: hidden !important;background-color: #171B51;}

/** main visual slider **/
	.main-visual, 
	.main-visual .visual_slider, 
	.main-visual .swiper-slide {
		width: 100%;
		height: 100vh;
	}
	.main-visual .swiper-slide{
	    position:relative;
	    overflow:hidden;
	}
	
	/* ===========================
	   비디오
	=========================== */
	.main-visual .swiper-slide.video video {
		position:absolute;
		inset:0;
		width:100% !important;
		height:100% !important;
		object-fit:cover;
		object-position:center center;
		transform:scale(var(--zoom,1));
		will-change:transform;
	}
	.main-visual .swiper-slide > *:not(video){
	    position:relative;
	    z-index:1;
	}
	.main-visual .swiper-slide.video .video-overlay {
		position: absolute;
		z-index:1;
		left: 0; right: 0; bottom: 0;
		height:25vh;
		background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
		opacity:.7
	}
	
	/* ===========================
	   이미지
	=========================== */
	.main-visual .swiper-slide::before{
		content:"";
		position:absolute;
		inset:0;
		z-index:0;
		background-repeat:no-repeat;
		background-position:center center;
		background-size:cover;
		transform:scale(var(--zoom,1));
		will-change:transform;
	}
	.main-visual .swiper-slide.img1::before{background-image:url('/images/uimc/eng/main/main_visual_1.jpg');}
	.main-visual .swiper-slide.img3::before{background-image:url('/images/uimc/eng/main/main_visual_3.jpg');}
	.main-visual .swiper-slide.img4::before{background-image:url('/images/uimc/eng/main/main_visual_4.jpg');}
	.main-visual .swiper-slide::after{
		content: "";
		position: absolute;
		bottom: 0; left: 0;
		width: 100%; height: 100%;
		background: linear-gradient(90deg,rgba(0, 20, 55, 1) 0%, rgba(0, 20, 55, 0.4) 100%);
		opacity: 0.8;
		z-index: 2;
	}
	.main-visual .swiper-slide .main-slogan {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -700px;
		width: 100%;
		max-width: 1400px;
		display: flex;
		flex-direction: column;
		gap: 3.2rem;
		transform: translateY(-50%);
		z-index: 99;
	}
	.main-visual .swiper-slide .main-slogan strong,
	.main-visual .swiper-slide .main-slogan span {
		width: 100%;
		display: block;
		text-shadow: 0 1px 12px rgba(0,0,0,.3);
		-webkit-text-shadow: 1px 2px 12px rgba(0,0,0,.3);
		transform: translateY(-50%);
		opacity: 0;		
	}
	.main-visual .swiper-slide .main-slogan strong {
		margin-top: -16vh;
		padding: 0;		
		font-family:'Red Hat Display';
		font-size: clamp(3.6rem, 2.72rem + 2.34vw, 6rem);
		font-weight: 700;
		line-height: 1.2;
		color: #fff;
		transition:opacity .8s ease,transform .8s ease;
	}
	.main-visual .swiper-slide .main-slogan span{
		font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.4rem);
		font-weight: 400;
		color:#CDD1D5;
		transition:opacity 1s ease .15s, transform 1s ease .15s;
	}	
	.main-visual .swiper-slide.swiper-slide-active .main-slogan span,
	.main-visual .swiper-slide.swiper-slide-active .main-slogan strong{
		transform: translateX(0px);
		opacity: 1;
	}
	.main-visual .swiper-ctrl{
		position:absolute;
		top: 50%;left: 50%;
		width: 100%;
		max-width: 1400px;
		margin-top: 10vh;
		display: flex;
		align-items: center;
		gap: 0.4rem;
		z-index: 9998;
		transform: translate(-50%);
	}
	.main-visual .swiper-ctrl button{
		position:relative;
		top:auto; left:auto; right:auto; bottom:auto;
		margin:0;
		width:52px; height:52px;
		text-indent:-9999em;
		background-color:rgba(255,255,255,.2);
		background-position:center center;
		background-repeat:no-repeat;
		background-size: 52px;
		border-radius: 99rem;
		-webkit-border-radius: 99rem;
		backdrop-filter: blur(4px);
 		-webkit-backdrop-filter: blur(4px);
 		transition: background-color 0.3s, opacity 0.3s;
	}
	.main-visual .swiper-ctrl button:hover{background-color:rgba(255,255,255,1);}
	.main-visual .swiper-ctrl .swiper-button-prev{background-image:url('/images/uimc/eng/main/icon_slider_prev.svg');}
	.main-visual .swiper-ctrl .swiper-button-next{background-image:url('/images/uimc/eng/main/icon_slider_next.svg');}
	.main-visual .swiper-ctrl .swiper-button-prev:hover {background-image:url('/images/uimc/eng/main/icon_slider_prev_ov.svg');}
	.main-visual .swiper-ctrl .swiper-button-next:hover{background-image:url('/images/uimc/eng/main/icon_slider_next_ov.svg');}
	.main-visual .swiper-ctrl .swiper-button-stop{background-image:url('/images/uimc/eng/main/icon_slider_stop.svg');}
	.main-visual .swiper-ctrl .swiper-button-play{background-image:url('/images/uimc/eng/main/icon_slider_play.svg');}
	.main-visual .swiper-ctrl .swiper-button-stop:hover{background-image:url('/images/uimc/eng/main/icon_slider_stop_ov.svg');}
	.main-visual .swiper-ctrl .swiper-button-play:hover{background-image:url('/images/uimc/eng/main/icon_slider_play_ov.svg');}

	
	/** progress **/
	.progress-container {
		position: absolute;
		left: 50%; bottom: 8rem;
		z-index: 10;
		width: 100%;
		max-width: 1400px;
		display: flex;
		align-items: flex-end;
		gap: 2rem;
		transform: translateX(-50%);
	}
	.progress-item {
		width:calc(100% / 4);
		height:100%;
	}
	.progress-item.active{
		position:relative;
	}
	.progress-bar {
		width: 100%; height: 5px;
		background:rgba(255,255,255,.2);
		overflow: hidden;
		position: relative;
	}
	.progress-fill {
		position: absolute;
		top: 0; left: 0;
		width: 0%; height: 100%;
		background: linear-gradient(90deg,rgba(46, 48, 145, 1) 0%, rgba(0, 165, 80, 1) 100%);
	}
	.progress-title {
		margin-bottom: 2.4rem;
		padding:0 0.4rem;
		font-family:'Red Hat Display';
		font-size: clamp(1.4rem, 1.3rem + 0.2vw, 1.6rem);
		font-weight: 500;
		line-height: 1.5;
		color: #fff;
		opacity: 0.5;
		transition: opacity 0.3s;
	}
	@keyframes Move {
		0% {
			 opacity:0.5
		}
		30% {
			 opacity:1
		}
		70% {
			 opacity:1
		}
		90% {
			 opacity:0.5
		}
	}
	@-webkit-keyframes Move {
		0% {
			 opacity:0.5
		}
		30% {
			 opacity:1
		}
		70% {
			 opacity:1
		}
		90% {
			 opacity:0.5
		}
	}
	.progress-item.active .progress-title{
		font-weight: 700;
		opacity: 1;
		animation: Move 4s linear;
	}
	
	
@media (max-width: 1400px) {
	.main-visual .swiper-slide .main-slogan {
		left: 0;
		margin: 0 4%;
	}
	/** progress **/
	.progress-container {
		bottom: 6rem;
		padding: 0 4%;
	}
	.main-visual .swiper-ctrl{
		left: 4%;
		transform: translateX(0);
		margin-top: 8vh;
	}
}
@media (max-width: 1024px) {
	.main-visual .swiper-ctrl button{
		width:40px; height:40px;
		background-size: 40px;
	}
	.progress-item{
		width: 100%;
		display: none;
	}
	.progress-bar {height: 4px;}
	.progress-item.active{
		display:block;
	}
	.progress-title {
		margin-bottom: 1.6rem;
		opacity: .5 !important;
	}
}
	
@media (max-width: 575px) {
	.main-visual .swiper-slide .main-slogan {
		gap: 2.4rem;
	}
	.main-visual .swiper-slide .main-slogan strong {
		margin-top: -16vh;
	}
	.main-visual .swiper-slide .main-slogan span br {display: none;}
}