@charset "utf-8";

/*  [Teaser] 티저 CSS 
	Teaser Page에서만 사용
*/




/*** Teaser Content ***/

/* Common */
#content.teaser{ width: 100%; height: var(--vh100); min-height: 650px;}
#content.teaser,
#content.teaser :is(.section, .video-wrap)	{ position: relative; }
#content.teaser :is(.section, .video-wrap)	{ width: 100%; height: 100%; }
#content.teaser .section					{ overflow: hidden; }
#content.teaser .video-wrap video{
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
}

/* Section Visual */
#content.teaser .section.visual{}
#content.teaser .section.visual::after{
	content: ""; position: absolute; inset: 0 0 0 0;
	width: 100%; height: 100%;
	background-color: var(--black);
	transition: backgroundColor 0.5s ease-in-out;
}
#content.teaser .section.visual.active::after{
	background-color: var(--black-op-60);
}



/* Video Intro */
#content.teaser .video-wrap.intros{ z-index: 3;
	position: absolute; inset: 0 0 0 0;
}
#content.teaser .video-wrap.intros::after{
	content: ""; position: absolute; inset: 0 0 0 0 ;
	width: 100%; height: 100%;
	transition: all 1s ease-in-out;
	background-color: black;
}
#content.teaser .video-wrap.intros.active::after{
	background-color: transparent;
}


#content.teaser .video-wrap.visuals .visual-video.mo{display: none;}
@media all and (max-width: 1024px) {
	#content.teaser .video-wrap.visuals .visual-video.mo{display: block;}
	#content.teaser .video-wrap.visuals .visual-video.pc{display: none;}
}

/* Button Content */
#content.teaser .button-area{
	position: absolute; top: 0; z-index: 5;
	padding-block: clamp(24px,6.4vw,40px) 0;
	padding-inline: clamp(24px,6.4vw,40px);
}
#content.teaser .button-area .btn{ gap: clamp(4px,1.07vw,8px); }
#content.teaser .button-area.utils{ left: 0;
	gap: clamp(16px,4.27vw,20px); color: var(--white);
}

#content.teaser .button-area.utils :is(span, .ico){opacity: 0.6;
	transition: opacity 0.3s ease;
}
#content.teaser .button-area.utils .btn:hover :is(span, .ico){opacity: 1;}

#content.teaser .button-area.utils span{
	position: relative;
	letter-spacing: 0.06em; line-height: 1; 
	font-size: clamp(13px,3.47vw,16px);
}

#content.teaser .button-area.utils .play.current .ico{
	background-image: url("../images/@ico/play.svg");
}

#content.teaser .button-area.utils .btn.sound{
	opacity: 0; visibility: hidden;
	transform: translateY(60px);
	transition: opacity 2s ease-in-out, visibility 2s ease-in-out, transform 1.5s ease;
}
#content.teaser .button-area.utils .btn.sound.current .ico{
	background-image: url("../images/@ico/sound.svg");
}
#content.teaser .button-area.utils .btn.sound.active{
	opacity: 1; visibility: visible;
	transform: translateY(0);
}
#content.teaser .button-area.utils .btn .off{display: none;}
#content.teaser .button-area.utils .btn.current .on{display: none;}
#content.teaser .button-area.utils .btn.current .off{display: block;}

#content.teaser .button-area.sns{position: absolute; right: 0; gap: 16px;}
#content.teaser .button-area.sns .btn .ico{
	background-color: var(--white-op-60);
	transition: opacity 0.3s ease;
}
#content.teaser .button-area.sns .btn:hover .ico{background-color: var(--white);}

#content.teaser .button-area.skips{
	padding-top: clamp(24px,6.4vw,25px); right: 0;
	opacity: 0; visibility: hidden; z-index: -10;
	transform: translateY(60px);
	transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out, zIndex 1.5s ease-in-out, transform 1s ease;
}
#content.teaser .button-area.skips .btn{max-width: 133px; width: 100%;}

@media all and (max-width: 768px) {
	#content.teaser .button-area.utils{ 
		left: 0; right: auto; width: fit-content;
		padding-block: 0 16px; padding-inline: 24px;
        transform: rotate(90deg) translateX(-14%) translateY(0%);
        transform-origin: bottom left;
	}
	#content.teaser .button-area.utils .ico{
		width: clamp(16px,4.27vw,24px); 
		height: clamp(16px,4.27vw,24px);
	}
	#content.teaser .button-area.sns{
		padding-block: 24px;
		padding-inline: 0 16px;
	}

	#content.teaser .button-area.skips{
		top: auto; left: 0; bottom: 0;
		width: 100%; margin: 0 auto; padding-block: 0 25px;
		justify-content: center;
	}
}

/*** Teaser Content ***/
#content.teaser .teaser-wrap{
	position: absolute; inset: 0 0 0 0; z-index: 1;
	width: 100%; height: 100%; padding: 48px 0 16px;
	justify-content: space-between;
}
#content.teaser .teaser-wrap #lottieAres{
	overflow: hidden;
	max-width: 260px; width: 100%;
}
#content.teaser #lottieAres defs + g > g:nth-child(1) path {
	background-color: transparent; fill: transparent;
}
#content.teaser .ares-wrap{position: relative; top: -30px;}
#content.teaser .ares-wrap .solgan{max-width: 500px; opacity: 0; 
	transform: translateY(10px); width: 100%;
}
#content.teaser .btn.youtube-play{ position: absolute; 
	top: calc(50% + 80px); z-index: 1;
	max-width: 166px; width: 100%; opacity: 0;
	height: 94px;  transform: translateY(15px);
}

#content.teaser .teaser-box{
	position: relative; width: 100%;
	justify-content: center;
}
#content.teaser .teaser-box .glitch-area{
	width: 100%; padding-bottom: clamp(36px,9.6vw,48px);
	justify-content: center;
	opacity: 0; transform: translateY(30px);
}
#content.teaser .teaser-box .glitch-data{ position: relative;
	font-size: clamp(40px,10.67vw,68px); font-weight: 900;
	letter-spacing: -0.012em; color: white; 
	text-shadow: 0px 0px 20px #00D0FF; line-height: 1.3;
	/* animation: glitch-opacity 2s linear infinite, glitch-combined 3s linear infinite;*/
}
#content.teaser .teaser-box .glitch-data span{position: relative; top: clamp(-8px,-1.07vw,-4px);}
#content.teaser .teaser-box .glitch-text{position: relative; 
	max-width: clamp(200px,53.33vw,375px); width: calc(100% - 10px); gap:clamp(35px,9.33vw,50px) 
}
#content.teaser .teaser-box .glitch-text span{
	color: var(--white-op-60); letter-spacing: 0.725px;
	font-size: clamp(14px,3.73vw,16px); font-weight: 700;
	width: calc(100% / 4); text-align: center;
}

#content.teaser .teaser-box #lottieDeco{
	position: absolute; top: clamp(48px, 12.8vw, 75px);
	max-width: 564px; width: 100%;
}
#content.teaser .teaser-box #lottieDeco defs + g > g:nth-child(1) path{
	fill: none; background-color: none;
}

#content.teaser .teaser-box .marquee-area{padding: 0;
	 transform: translateY(120px); opacity: 0;
}
#content.teaser .teaser-box .marquee{
	font-size: clamp(40px,10.67vw,48px); color: var(--white);
	font-weight: 900; line-height: 1.2;
}
#content.teaser .teaser-box .marquee span{ margin-right: 35px; letter-spacing: 0.04em;}
#content.teaser .teaser-box .marquee span::before{
	width: 3px; height: 3px; left: -17.5px; top: 50%; transform: translateY(-50%);
	background-image: url("../images/@ico/point.svg");
}

#content.teaser .audio-area{position: absolute; top: 0; z-index: -9999; opacity: 0; visibility: hidden;}

@media all and (min-width: 1921px) {
	#content.teaser .teaser-wrap{padding: 100px 0 30px;}
	#content.teaser .teaser-wrap #lottieAres{max-width: 12.5vw;}
	#content.teaser .ares-wrap .solgan{max-width: 20.83vw;}
	#content.teaser .btn.youtube-play{}

	#content.teaser .teaser-box .glitch-area{padding-bottom: 80px;}
	#content.teaser .teaser-box #lottieDeco{top: 90px;}
}
@media all and (min-width: 769px) and (max-width: 1440px) and (max-height: 820px) {
	#content.teaser{min-height: 600px;}
	#content.teaser .teaser-wrap{padding-block: 10px 15px;}
	#content.teaser .teaser-wrap #lottieAres{max-width: 180px;}

	#content.teaser .ares-wrap{top: -20px;}
	#content.teaser .ares-wrap .solgan{ max-width: 290px;}
	#content.teaser .btn.youtube-play{top: calc(50% + 5px); max-width: 120px; height: 68px;}

	#content.teaser .teaser-box .glitch-area{padding-bottom: 52px;}
	#content.teaser .teaser-box .glitch-data{font-size: 48px;}
	#content.teaser .teaser-box .glitch-text{max-width: 200px; gap: 42px;}
	#content.teaser .teaser-box #lottieDeco{top: 48px;}

}
@media all and (max-width: 768px) and (max-height: 1024px) {
	#content.teaser .teaser-wrap{padding-block: clamp(40px,10.42vw,100px) 20px;}
	#content.teaser .teaser-wrap #lottieAres{max-width: clamp(180px,48vw,260px);}

	#content.teaser .ares-wrap{}
	#content.teaser .ares-wrap .solgan{max-width: clamp(340px,90.67vw,400px);}
	#content.teaser .ares-wrap{top: -25px;}
	#content.teaser .btn.youtube-play{ top: calc(50% + 70px); width: 131px; height: 70px; }

	#content.teaser .teaser-box .glitch-data{font-size: 48px;}
	#content.teaser .teaser-box .glitch-text{max-width: 275px; gap: 25px;}
	#content.teaser .teaser-box #lottieDeco{top: 70px; max-width: clamp(300px,80vw,420px);}	
}
@media all and (max-width:640px){
	#content.teaser .btn.youtube-play{top: calc(50% + 35px);}
}



/*** Intro Time ***/

.intro-time #footer,
.intro-time #content.teaser .btn.play,
.intro-time #content.teaser .button-area.sns{display: none;}
.intro-time #content.teaser .button-area.skips.active{
	opacity: 1; visibility: visible;  z-index: 5; 
	transform: translateY(0);
}
@media all and (max-width: 768px) {
	.intro-time #content.teaser .button-area.utils{
		transform: rotate(90deg) translateX(-20%) translateY(0%);
	}
}
/* // [Teaser] 티저 CSS */