@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2025-11-16
******************************************************** */

:root{
  --logo-line-dur: 1.2s;
  --logo-line-ease: cubic-bezier(.22,1,.36,1);
  --logo-line-delay: 0.5s;

  --word-dur: .95s;
  --word-stagger: .08s;
}

/* ****************** loading ********************** */
.main-wrap .nav-open-btn,
.main-wrap #header #headerInnerWrap,
.main-wrap #footer{opacity: 0; transition:var(--transition-custom2);}
.main-wrap .bottom-line-path,
.main-wrap .top-line-path{transform-box: fill-box; transform: scaleX(0); will-change: transform;}
.main-wrap .bottom-line-path{transform-origin: left center;}
.main-wrap .top-line-path{transform-origin: right center;}
.main-wrap .cm-logo-svg [class^="bottom-word-path"]{transform-box: fill-box; transform-origin: center; opacity: 0; transform: translateY(10px) scale(.85); filter: blur(6px); will-change: transform, opacity, filter;}
.main-wrap .bottom-word-path01{ --i: 0; }
.main-wrap .bottom-word-path02{ --i: 1; }
.main-wrap .bottom-word-path03{ --i: 2; }
.main-wrap .bottom-word-path04{ --i: 3; }
.main-wrap .bottom-word-path05{ --i: 4; }
.main-wrap .bottom-word-path06{ --i: 5; }
.main-wrap .bottom-word-path07{ --i: 6; }
.main-wrap .bottom-word-path08{ --i: 7; }
.main-wrap .bottom-word-path09{ --i: 8; }
.main-wrap .bottom-word-path10{ --i: 9; }

.main-wrap.index-active .nav-open-btn,
.main-wrap.index-active #header #headerInnerWrap,
.main-wrap.index-active #footer{opacity: 1;}
.main-wrap.index-active #header.top-fixed.scroll-down #headerInnerWrap{transform: translateY(calc(-100% + var(--gnb-height)));}
.main-wrap.index-active .bottom-line-path,
.main-wrap.index-active .top-line-path{transform: scaleX(1); transition: transform var(--logo-line-dur) var(--logo-line-ease) var(--logo-line-delay);}
.main-wrap.index-active .cm-logo-svg [class^="bottom-word-path"]{
	animation: logoWordPop var(--word-dur) var(--logo-line-ease) forwards;
	animation-delay: calc(var(--logo-line-delay) + (var(--logo-line-dur)/2) + (var(--i) * var(--word-stagger)));
}

@keyframes logoWordPop{
  0%   { opacity: 0; transform: translateY(10px) scale(.85); filter: blur(6px); }
  70%  { opacity: 1; transform: translateY(0) scale(1.03);  filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1);     filter: blur(0); }
}
@media (prefers-reduced-motion: reduce){
	.main-wrap .top-line-path,
	.main-wrap .bottom-line-path{
		transform: scaleX(1);
		transition: none;
	}
	.main-wrap .cm-logo-svg [class^="bottom-word-path"]{
		opacity: 1; transform: none; filter: none; animation: none;
	  }
}

.ms-preloader { width: 100%; height: 100%;position: fixed;z-index: 9999999; top: 0;left: 0; opacity: 1; visibility: visible; background-color: #000;}


/* ******************  메인 비주얼 ********************** */
#mainVisual{width:100%; height:100vh; height: 76rem; height: auto; position:relative; background-color:#000; box-sizing: border-box;}

/* 메인 비주얼 영상영역 */
.background-video-wrapper{position: relative; width: 100%; padding-bottom: 56.25%; height: 0; background-color:#000; overflow:hidden;}
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.background-video:after{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
}
.background-video #visualVideo {
	position:absolute; 
	top:50%; 
	left:50%; 
	min-width:100%; 
	min-height:100%; 
	max-width: 100%;
	-ms-transform:translate(-50%,-50%); 
	-webkit-transform:translate(-50%,-50%); 
	transform:translate(-50%,-50%);
}
.background-video iframe{
	width: 100%;
	height: calc(100% + 600px);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
	opacity:0;filter:Alpha(opacity=0); 
	transition: opacity 3s 0.2s;
}
.background-video.start iframe{opacity:1.0;filter:Alpha(opacity=100);}