@charset "UTF-8";

/* main에선 비노출 */
footer#footer{display:none;}

/* intro */
#intro {
  position: fixed;
  left: 0; right: 0;
  top: 0; bottom: 0;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color:var(--color-bg-white);
  backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
}
#intro p.intro-logo{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap:var(--spacing-sm);
	padding:0 10%;
	margin-top:-5%;
}
#intro p.intro-logo span{
	display:block;
	width:100%;
	max-width:400px;
	height:70px;
	text-indent:-9999em;
	background:url('/images/kor/special/main/intro_logo.svg') center center no-repeat;
	background-size:90%;
}
@keyframes introGradientMove {
	0% {
		 background-position: 0% 50%;
	}
	100% {
		 background-position: 100% 50%;
	}
}
@-webkit-keyframes introGradientMove {
	0% {
		 background-position: 0% 50%;
	}
	100% {
		 background-position: 100% 50%;
	}
}
#intro p.intro-logo strong{
	display:block;
	font-size:clamp(1.3rem, 3.5rem + 2vw, 6rem);
	font-weight:var(--font-weight-bold);
	text-align:center;
	line-height:var(--line-height-title);
	
	background: linear-gradient(90deg, var(--color-primary) 10%, var(--color-point) 50%, var(--color-primary) 90%);
	background-size: 480% auto; 
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: introGradientMove 3s linear infinite;
}
.blur-bg {
	position: absolute;
	top: -20%; left: -20%;
	width: 150%; height: 150%;
	background: radial-gradient(circle at 30% 30%, rgba(255, 100, 200, 0.15), transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(100, 200, 255, 0.15), transparent 60%);
	filter: blur(100px);
	z-index: 1;
	pointer-events: none;
	border-radius: var(--border-radius-circle);
} 


@media (max-width: 575px) {
	#intro p.intro-logo{
		margin-top:-15%;
	}
	#intro p.intro-logo span{
		height:120px;
		background:url('/images/kor/special/main/intro_logo_m.svg') center center no-repeat;
		background-size:60%;
	}
	#intro p.intro-logo strong{
		font-size:2.8rem;
	}
} 

/* main s */
.main_container{
	position:relative;
	height:100vh;
	background:var(--color-bg-black);
}
.main_container:after{
	content:"";
	position:absolute;
	top:0; z-index:9990;
	width:100%;
	height:160px;
	background: linear-gradient(
					  180deg,
					  rgba(26, 26, 36, 1) 0%,
					  rgba(26, 26, 36, 0.85) 15%,
					  rgba(26, 26, 36, 0.6) 30%,
					  rgba(26, 26, 36, 0.4) 45%,
					  rgba(26, 26, 36, 0.25) 60%,
					  rgba(26, 26, 36, 0.15) 75%,
					  rgba(26, 26, 36, 0.08) 88%,
					  rgba(26, 26, 36, 0.03) 95%,
					  rgba(26, 26, 36, 0) 100%
					);
	opacity:.6;
}
	/** main visual slider **/
	.main-visual, 
	.main-visual .visual_slider, 
	.main-visual .swiper-slide {
		width: 100%;
		height: 100vh;
	}
	.main-visual .swiper-slide {
		display: flex;
		flex-direction: column;
		justify-content: center; 
		
		position:relative;
		background-color: #333;
		background-repeat:no-repeat;
		background-position:center center;
		background-size:cover;
	}
	.main-visual .swiper-slide.img1 video{
		position:absolute;
		top:0; left:0; right:0; bottom:0;
		z-index:0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.main-visual .swiper-slide.img1 .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.img2{
		background-image:url('/images/kor/special/main/main_visual_2.jpg');
	}
	@supports (background-image: url("/images/kor/special/main/main_visual_2.webp")) {
	  .main-visual .swiper-slide.img2 {
	    background-image: url("/images/kor/special/main/main_visual_2.webp");
	  }
	}
	.main-visual .swiper-slide.img3{
		background-image:url('/images/kor/special/main/main_visual_3.jpg');
	}
	@supports (background-image: url("/images/kor/special/main/main_visual_3.webp")) {
	  .main-visual .swiper-slide.img3 {
	    background-image: url("/images/kor/special/main/main_visual_3.webp");
	  }
	}
	.main-visual .swiper-slide.img4{
		background-image:url('/images/kor/special/main/main_visual_4.jpg');
	}
	@supports (background-image: url("/images/kor/special/main/main_visual_4.webp")) {
	  .main-visual .swiper-slide.img4 {
	    background-image: url("/images/kor/special/main/main_visual_4.webp");
	  }
	}
	
	.main-visual .swiper-slide:after{
		content:"";
		position:absolute;
		bottom:0; left:0;
		width:100%; max-width:45vw; height:100%;
		background:linear-gradient(90deg,rgba(55, 61, 168, .7) 0%, rgba(0, 0, 0, 0) 100%);
		opacity:.8;
		z-index:2;
	}
	.main-visual .swiper-slide:before{
		content:"";
		position:absolute;
		bottom:0; left:0;
		width:100%; max-width:25vw; height:100%;
		background: linear-gradient(75deg,rgba(255, 6, 6, .5) 0%, rgba(0, 0, 0, 0) 40%);
		opacity:.4;
		z-index:3;
	}

	.main-visual .swiper-slide span{
		position:relative;
		z-index:99;
		margin-top:-30vh;
		margin-bottom:var(--spacing-md);
		padding: 0 10%;
		font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
		color:#fff;
		letter-spacing:0;
		text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3) ; 
		-webkit-text-shadow: 1 2px 12px rgba(0, 0, 0, 0.3) ; 
		
		transform: translateX(20px);
		opacity: 0;
		transition: opacity 0.5s ease-in .7s, transform 0.5s ease-in .7s;
	}
	.main-visual .swiper-slide strong{
		position:relative;
		z-index:99;
		padding: 0 10%;
		font-size: clamp(2.65rem, 2rem + 2.5vw, 5rem);
		line-height:var(--line-height-title);
		color:#fff;
		letter-spacing:0;
		text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3) ; 
		-webkit-text-shadow: 1 2px 12px rgba(0, 0, 0, 0.3) ; 
		
		transform: translateX(20px);
		opacity: 0;
		transition: opacity 0.5s ease-in 1s, transform 0.5s ease-in 1s;
	}
	
	.main-visual .swiper-slide.swiper-slide-active span,
	.main-visual .swiper-slide.swiper-slide-active strong{
		transform: translateX(0px);
		opacity: 1;
	}
	.main-visual .swiper-ctrl{
		position:absolute;
		bottom:35vh; left:10%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap:var(--spacing-xxs);
		z-index:9998;
	}
	
	.main-visual .swiper-ctrl button{
		/* 초기화 */
		position:relative;
		top:auto; left:auto; right:auto; bottom:auto;
		margin:0;
	}
	.main-visual .swiper-ctrl :is(.swiper-button-next, .swiper-button-prev){
		width:60px; height:60px;
		text-indent:-9999em;
		background-color:rgba(255,255,255,.2);
		background-position:center center;
		background-repeat:no-repeat;
		background-size:56px;
		border-radius:var(--border-radius-circle);
		-webkit-border-radius:var(--border-radius-circle);
		backdrop-filter: blur(4px);
 		-webkit-backdrop-filter: blur(4px);
	}
	.main-visual .swiper-ctrl .swiper-button-prev{
		background-image:url('/images/kor/special/main/ico_slider_prev.svg');
	}
	.main-visual .swiper-ctrl .swiper-button-next{
		background-image:url('/images/kor/special/main/ico_slider_next.svg');
	}
	.main-visual .swiper-ctrl .swiper-button-next:after, 
	.main-visual .swiper-ctrl .swiper-button-prev:after{
		display:none !important
	}
	.main-visual .swiper-ctrl .swiper-button-play,
	.main-visual .swiper-ctrl .swiper-button-stop{
		width:4px !important; height:4px !important;
		padding:0;
		text-indent:-9999em;
		background:var(--color-bg-white);
		border-radius:var(--border-radius-circle);
		-webkit-border-radius:var(--border-radius-circle);
	}
	.main-visual .swiper-ctrl button:hover{
		background-color:rgba(255,255,255,.35);
	}

	
	/** progress **/
	.progress-container {
		position: absolute;
		left: 5%; bottom: 40px;
		z-index: 10;
	  
		width:90%;
		display: flex;
		align-items: flex-end;
	}
	@media (min-width: 1921px) {
		.progress-container {
			left: 10%;
			width:80%;
		}
	} 
	
	.progress-item {
		width:calc(100% / 4);
		height:100%;
	}
	.progress-item.active{
		position:relative;
	}
	
	@keyframes active {
		0% {
			 opacity:0;
			 transform: scale(1);
		}
		40% {
			 opacity:.7;
			 transform: scale(1.3);
		}
		100% {
			 opacity:0;
			 transform: scale(1);
		}
	}
	@-webkit-keyframes active {
		0% {
			 opacity:0;
			 transform: scale(1);
		}
		40% {
			 opacity:.7;
			 transform: scale(1.3);
		}
		100% {
			 opacity:0;
			 transform: scale(1);
		}
	}
	
	.progress-item.active:after{
		content:"";
		position:absolute;
		left:0; bottom:-40px;
		z-index:-1;
		width:100%; height:100%;
		background:var(--color-point-right);
		border-radius:var(--border-radius-circle) var(--border-radius-circle) 0 0;
		-webkit-border-radius:var(--border-radius-circle) var(--border-radius-circle) 0 0;
		filter: blur(40px);
		animation: active 4.5s ease-in-out;
		opacity:0
	}
	
	.progress-item:first-child .progress-bar{
		border-radius:var(--border-radius-round) 0 0 var(--border-radius-round);
	}
	.progress-item:last-child .progress-bar{
		border-radius:0 var(--border-radius-round) var(--border-radius-round) 0;
	}
	.progress-bar {
		width: 100%; height: 4px;
		background:rgba(255,255,255,.2);
		overflow: hidden;
		position: relative;
	}
	.progress-fill {
		position: absolute;
		top: 0; left: 0;
		width: 0%; height: 100%;
		background: var(--gradient-primary-right);
		border-radius:var(--border-radius-round);
	}
	.progress-title {
		padding:0 var(--spacing-xs);
		margin-bottom:var(--spacing-sm);
		line-height:var(--line-height-title);
		color: var(--text-inverse);
		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{
		animation: Move 4s linear;
	}
	
	
@media (min-width: 1921px) {
		.main-visual .swiper-slide span{
			padding: 0 15%;
		}
		.main-visual .swiper-slide strong{
			padding: 0 15%;
		}
		.main-visual .swiper-ctrl{
			left:15%;
		}
	}
@media (max-width: 1024px) {
	/** progress **/
	.progress-container {
		bottom: 60px;
	}
	.progress-item{
		width:100%;
		display:none;
	}
	.progress-item.active{
		display:block;
	}
	.progress-item .progress-bar{
		border-radius:var(--border-radius-round) !important;
	}
	.progress-title {
		opacity: .5 !important;
	}
	.progress-title br {
		display:none
	}
}
	
@media (max-width: 575px) {
	.main-visual .swiper-slide {
		justify-content: start; 
		padding-top:15vh;
	}
	.main-visual .swiper-slide.img1 video{
		object-position: 40% top;
	}
	.main-visual .swiper-slide:after{
		max-width:100%; height:50vh;
		background: 
		  linear-gradient(0deg, rgba(55, 61, 168, 0.7) 0%, rgba(0, 0, 0, 0) 100%),
		  linear-gradient(25deg, rgba(255, 6, 6, 0.5) 0%, rgba(0, 0, 0, 0) 40%);
	}
	.main-visual .swiper-slide:before{
		max-width:100%; height:15vh;
		top:0;
		background: linear-gradient(
					  180deg,
					  rgba(26, 26, 36, 1) 0%,
					  rgba(26, 26, 36, 0.85) 15%,
					  rgba(26, 26, 36, 0.6) 30%,
					  rgba(26, 26, 36, 0.4) 45%,
					  rgba(26, 26, 36, 0.25) 60%,
					  rgba(26, 26, 36, 0.15) 75%,
					  rgba(26, 26, 36, 0.08) 88%,
					  rgba(26, 26, 36, 0.03) 95%,
					  rgba(26, 26, 36, 0) 100%
					);
		opacity:.5;
	}
	
	.main-visual .swiper-slide {
		background-position:center bottom;
	}
	.main-visual .swiper-slide.img1,
	.main-visual .swiper-slide.img4 {
		justify-content: end;
		padding-bottom:27vh;
	}
	.main-visual .swiper-slide span{
		margin-top:0;
		margin-bottom:var(--spacing-sm);
		padding: 0 5%;
		font-weight:500;
	}
	.main-visual .swiper-slide strong{
		padding: 0 5%;
	}
	.main-visual .swiper-ctrl{
		bottom:15vh; left:auto; right:5%;
	}
}

/* 국문 : main만 센터정렬 */
header#header .inner{
	max-width:var(--max-width);
	height:100%;
	margin:0 auto;
	display:grid;
	grid-template-columns: calc(var(--lnb-width) + 130px) auto calc(var(--lnb-width) + 130px) !important;
	justify-content:space-between;
	align-items:center;
	gap:var(--spacing-xs);
	transition: var(--transition-linear);
	-webkit-transition: var(--transition-linear);
}
@media (max-width: 1600px) {
	header#header .inner{
		grid-template-columns: calc(var(--lnb-width) + 40px) auto 1fr !important;
	}
}
@media (max-width: 1024px) {
	header#header{
		height:var(--header-height);
		padding:0 var(--spacing-xs);
	}
	header#header .inner{
		grid-template-columns: 1fr var(--header-height) var(--header-height) !important;
		gap:0;
	}
}