.hero{
	position:relative; min-height:min(88vh,760px); display:flex; align-items:center; overflow:hidden;

	/* @dev 메인 영역이 시작하는 자리. 캐러셀 왼쪽 끝에서 여기까지의 거리다.
	   메인 영역은 테마 설정의 PC 기본 콘텐츠 폭(--wrap) 그대로다.
	   화면이 그보다 좁으면 메인 영역이 화면을 꽉 채우므로 0 이 된다.
	   모바일은 늘 화면 가로를 그대로 쓰므로 0 이다 */
	--hero-edge:0px;
}
@media (min-width:1200px){
	.hero{--hero-edge:max(0px, calc((100% - var(--wrap,1200px)) / 2))}
}

/* @dev 390x640 폰 무대 비율이다. 상한이 없으면 태블릿에서 무대가 PC(760px)보다 커진다.
   무대 안의 요소는 carousel.js 의 fitLayerCanvases 가 이 높이에 맞춰 함께 키운다.
   태블릿에서도 설정하신 크기 그대로 보시려면 760px 을 640px 으로 낮추십시오 */
@media (max-width:1199px){
	.hero{min-height:0; height:min(calc(100vw * 640 / 390), 88vh, 760px)}
}

/* @dev 화면 높이 100%. 클래스가 하나 더 붙으므로 위의 규칙들보다 우선한다.
   모바일에서는 svh 를 쓴다. dvh 로 두면 주소 표시줄이 접히고 펴질 때마다 무대 높이가
   따라 움직여 요소 자리가 흔들린다 */
.hero.is-h-full{min-height:100vh; height:auto}
@supports (height:100svh){
	.hero.is-h-full{min-height:100svh}
}

/* @dev 직접 설정한 높이. 값은 carousel.view.php 가 --hero-h 로 넣는다.
   모바일 값을 비워 두시면 PC 값을 그대로 사용한다 */
.hero.is-h-set{min-height:0; height:var(--hero-h,640px)}
@media (max-width:1199px){
	.hero.is-h-set{height:var(--hero-h-m,var(--hero-h,640px))}
}

.hero .hero__stage{position:absolute; inset:0; z-index:0;overflow:hidden;clip-path:inset(0);contain:paint}

/* @dev 슬라이드 전환에서는 옆 화면의 확대된 배경이 자기 화면 경계 밖으로 넘어오지 않게 한다 */
.hero__stage[data-effect="slide"] .swiper-slide{overflow:hidden}

/* @dev 배경 확대 정도. 화면이 표시되는 동안 배경이 천천히 제자리로 돌아온다.
   끝값을 1 이 아닌 1.01 로 두어 가장자리가 드러나지 않게 한다 */
.hero__stage{--hbz-from:1.08; --hbz-to:1.01; --hbz-dur:6.8s}
.hero__stage.is-bgz-off{--hbz-from:1.01}
.hero__stage.is-bgz-normal{--hbz-from:1.16}
.hero__stage.is-bgz-strong{--hbz-from:1.26; --hbz-dur:5.2s}

.hero__stage .swiper-slide > img.hero__bg{
	width:100%; height:100%; object-fit:cover;
	transform:translateZ(0) scale(var(--hbz-from, 1.08));
	backface-visibility:hidden;
}

.hero__stage .swiper-slide-active > img.hero__bg,
.hero__stage .swiper-slide.is-leaving > img.hero__bg,
.hero__stage .swiper-slide-active > .hero__vid,
.hero__stage .swiper-slide.is-leaving > .hero__vid,
.hero__stage .swiper-slide-active > .hero__yt,
.hero__stage .swiper-slide.is-leaving > .hero__yt{animation:heroImageMove var(--hbz-dur, 6.8s) ease-out both}

/* @dev 화면 움직임 최소화를 설정한 방문자에게는 배경을 확대하지 않는다 */
@media (prefers-reduced-motion:reduce){
	.hero__stage{--hbz-from:1.01}
}

/* @dev 커튼 전환은 화면을 옮기지 않고 보이는 구역만 바꾼다.
   Swiper 가 넣어 두는 transition-property 에 잘라내기를 더해야 경계가 부드럽게 지나간다 */
.hero__stage.is-wipe .swiper-slide{transition-property:transform, opacity, height, clip-path}

.is-resizing .hero__stage .swiper-slide > img.hero__bg,
.is-resizing .hero__stage .swiper-slide > .hero__vid,
.is-resizing .hero__stage .swiper-slide > .hero__yt,
.is-resizing .hero__copy,
.is-resizing .hero__copy *,
.is-resizing .hero__layer-motion{animation-play-state:paused}

.hero__vid,
.hero__yt{position:absolute; inset:0; z-index:1; width:100%; height:100%; border:0}
.hero__vid{object-fit:cover}

.hero__yt{overflow:hidden; pointer-events:none; --yt-crop:80px}
.hero__yt iframe{
	position:absolute; left:50%; top:50%; border:0;
	width:auto; height:auto;
	min-width:100%; min-height:calc(100% + var(--yt-crop) * 2);
	aspect-ratio:16/9;
	transform:translate(-50%,-50%);
}

@supports not (aspect-ratio:16/9){
	.hero__yt iframe{
		width:100vw; height:56.25vw;
		min-width:177.78vh; min-height:calc(100vh + var(--yt-crop) * 2);
	}
}

/* @dev 유튜브 붙임창은 재생이 시작되기 전까지 검게 칠해진다. mp4 는 poster 가 그 자리를
   메우지만 유튜브에는 그런 수단이 없다. 재생이 시작될 때까지 감춰 배경 이미지가 드러나게 한다.
   감추고 드러내는 시점은 carousel.js 가 is-wait 로 정한다. 설정 화면의 미리보기처럼
   carousel.js 가 돌지 않는 자리에서는 표시가 붙지 않으므로 영상이 그대로 보인다 */
.hero__yt iframe,
.hero__layer-yt iframe{transition:opacity .5s ease}
.hero__yt.is-wait iframe,
.hero__layer-yt.is-wait iframe{opacity:0}

/* @dev 슬라이드를 옮길 때 iframe 이 다시 읽히는 브라우저에서는 carousel.js 가 배경 영상을
   이 자리로 옮겨 둔다. 화면보다 뒤에 그려지므로, 재생이 시작된 화면은 배경 이미지를 걷어
   영상이 드러나게 한다. 다른 화면은 불투명하므로 영상을 가린다 */
.hero__ytfix{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
/* @dev 드러내는 시점을 늦추면 전환이 시작된 구역이 잠깐 비어 보인다. 화면이 정해지는
   순간 곧바로 드러내고, 감추는 것은 전환이 끝난 뒤이므로 서서히 바꿀 까닭이 없다 */
.hero__ytfix .hero__yt{opacity:0}
.hero__ytfix .hero__yt.is-on{opacity:1; animation:heroImageMove var(--hbz-dur, 6.8s) ease-out both}
.hero__stage .swiper-slide.is-yt-on > img.hero__bg{opacity:0; transition:opacity .5s ease}

/* @dev 아이폰에서 슬라이드 순서가 바뀌어도 요소 유튜브 재생기가 다시 읽히지 않도록
   붙임창만 고정 영역에 유지한다. 빈 원래 자리는 위치와 애니메이션 측정 기준으로 남긴다 */
.hero__ytlayerfix{position:absolute; inset:0; z-index:3; overflow:hidden; pointer-events:none}
.hero__ytlayerfix-view{position:absolute; inset:0; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none}
.hero__layer-yt-host{position:absolute; display:block; pointer-events:none}
.hero__layer-yt-host[data-controls="1"]{pointer-events:auto}
.hero__layer-yt-host iframe{display:block; width:100%; height:100%; border:0; transition:opacity .5s ease}
.hero__layer-yt-host.is-wait iframe{opacity:0}

.hero__scrim{
	position:absolute; inset:0; z-index:1;
	background:linear-gradient(180deg, var(--scrim-2) 0%, var(--scrim-1) 55%, var(--scrim-1) 100%);
	pointer-events:none;
}

.hero__stage .hero__scrim{z-index:2}

.hero__loading{
	position:absolute; left:50%; top:50%; z-index:1; width:44px; height:44px; margin:-22px 0 0 -22px;
	opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; pointer-events:none;
}
.swiper-slide.is-loading .hero__loading{opacity:1; visibility:visible}
.hero__loading i{
	display:block; width:100%; height:100%; border-radius:50%;
	border:3px solid rgba(255,255,255,.28); border-top-color:rgba(255,255,255,.9);
	animation:devmHeroSpin .8s linear infinite;
}
@keyframes devmHeroSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
	.hero__loading i{animation:none}
}
.hero__body{position:relative; z-index:2; width:100%; padding:7rem 0 5rem;pointer-events:none}
.hero__body[hidden]{display:none}

.hero__layer-view{position:absolute; inset:0; z-index:3; overflow:hidden; pointer-events:none}

/* @dev 화면은 모두 같은 자리에 겹쳐 있고, 보이지 않는 화면도 자리를 그대로 차지한다.
   그 안의 버튼이 마우스를 받으면 보이는 버튼 위를 덮어 오버 효과가 걸리지 않는다.
   Swiper 반복 재생은 화면의 문서 순서를 바꾸므로 어느 화면이 위에 오는지 일정하지 않다 */
/* 현재 표시 중인 화면의 요소만 마우스에 반응합니다. */
.hero__layer-view:not(.is-on) .hero__layer{pointer-events:none}

.hero__layer-view{opacity:0}
.hero__layer-view.is-on{opacity:1}

/* @dev 나가는 효과는 화면이 물러나는 동안 보여야 한다. 새 화면이 정해지는 순간
   요소 층이 모두 감춰지므로, 나가는 효과가 걸린 화면만 그 시간 동안 드러내 둔다.
   is-out 은 carousel.js 의 runLayerExit() 이 붙이고 시간이 지나면 뗀다.
   Swiper 가 붙이는 표시에 기대면 반복 처리가 끼어들 때 지워진다 */
.hero__layer-view.is-out{opacity:1}
.hero__layer-canvas{position:absolute; left:50%; top:50%; width:1200px; height:600px; transform:translate(-50%,-50%); transform-origin:center center}

.hero__layer{
	position:absolute; display:block; max-width:94%; margin:0;
	color:var(--glass-nav-text, #FFFFFF); white-space:normal; word-break:keep-all;
	text-shadow:0 2px 14px rgba(20,32,46,.5);
}

.hero__layer.is-text,
.hero__layer.is-button{width:-webkit-max-content; width:max-content}

.hero__layer.is-image,
.hero__layer.is-video{z-index:1}
.hero__layer.is-text,
.hero__layer.is-button{z-index:2}

.hero__layer{left:var(--ly-l,0); top:var(--ly-t,0); transform:var(--ly-tf,none); text-align:var(--ly-ta,left)}
.hero__layer-canvas.is-m .hero__layer{
	left:var(--ly-l-m,var(--ly-l,0)); top:var(--ly-t-m,var(--ly-t,0));
	transform:var(--ly-tf-m,var(--ly-tf,none)); text-align:var(--ly-ta-m,var(--ly-ta,left));
}

.hero__layer.is-fixed-w{width:var(--ly-w,auto)}
.hero__layer.is-fixed-h{height:var(--ly-h,auto)}
.hero__layer-canvas.is-m .hero__layer.is-fixed-w{width:var(--ly-w-m,var(--ly-w,auto))}
.hero__layer-canvas.is-m .hero__layer.is-fixed-h{height:var(--ly-h-m,var(--ly-h,auto))}

.hero__layer-canvas.is-m.is-auto{
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:1rem; padding:1.5rem 0.75rem 3.5rem; text-align:center; overflow:hidden;
}
.hero__layer-canvas.is-m.is-auto .hero__layer{
	position:static; max-width:100%; width:auto; height:auto;
	transform:none; text-align:center; flex:0 0 auto;
}

.hero__layer-canvas.is-m.is-auto .hero__layer.is-image,
.hero__layer-canvas.is-m.is-auto .hero__layer.is-video{
	order:1; width:100%; flex-shrink:1; min-height:0; margin-bottom:.5rem;
}
.hero__layer-canvas.is-m.is-auto .hero__layer.is-button{margin-top:.5rem}
.hero__layer-canvas.is-m.is-auto .hero__layer.is-image .hero__layer-motion,
.hero__layer-canvas.is-m.is-auto .hero__layer.is-video .hero__layer-motion{min-height:0}
.hero__layer-canvas.is-m.is-auto .hero__layer.is-text{order:2}
.hero__layer-canvas.is-m.is-auto .hero__layer.is-button{order:3}

.hero__layer-canvas.is-m.is-auto .hero__layer.is-fixed-h .hero__layer-motion{height:100%}
.hero__layer-canvas.is-m.is-auto .hero__layer img,
.hero__layer-canvas.is-m.is-auto .hero__layer video{height:100%; max-height:220px; object-fit:contain}
.hero__layer-canvas.is-m.is-auto .hero__layer .hero__layer-yt{height:auto; max-height:220px; aspect-ratio:16/9}
.hero__layer-motion{display:block}

.hero__layer-motion.animate__animated.animate__fadeInUp{animation-name:devmFadeInUp}
.hero__layer-motion.animate__animated.animate__fadeInDown{animation-name:devmFadeInDown}
.hero__layer-motion.animate__animated.animate__fadeInLeft{animation-name:devmFadeInLeft}
.hero__layer-motion.animate__animated.animate__fadeInRight{animation-name:devmFadeInRight}
.hero__layer-motion.animate__animated.animate__slideInUp{animation-name:devmSlideInUp}
.hero__layer-motion.animate__animated.animate__slideInDown{animation-name:devmSlideInDown}
.hero__layer-motion.animate__animated.animate__slideInLeft{animation-name:devmSlideInLeft}
.hero__layer-motion.animate__animated.animate__slideInRight{animation-name:devmSlideInRight}

@keyframes devmFadeInUp{
	from{opacity:0; transform:translate3d(0,var(--ad,100%),0)}
	to{opacity:1; transform:translate3d(0,0,0)}
}
@keyframes devmFadeInDown{
	from{opacity:0; transform:translate3d(0,calc(-1 * var(--ad,100%)),0)}
	to{opacity:1; transform:translate3d(0,0,0)}
}
@keyframes devmFadeInLeft{
	from{opacity:0; transform:translate3d(calc(-1 * var(--ad,100%)),0,0)}
	to{opacity:1; transform:translate3d(0,0,0)}
}
@keyframes devmFadeInRight{
	from{opacity:0; transform:translate3d(var(--ad,100%),0,0)}
	to{opacity:1; transform:translate3d(0,0,0)}
}

@keyframes devmSlideInUp{
	from{visibility:visible; transform:translate3d(0,var(--ad,100%),0)}
	to{transform:translate3d(0,0,0)}
}
@keyframes devmSlideInDown{
	from{visibility:visible; transform:translate3d(0,calc(-1 * var(--ad,100%)),0)}
	to{transform:translate3d(0,0,0)}
}
@keyframes devmSlideInLeft{
	from{visibility:visible; transform:translate3d(calc(-1 * var(--ad,100%)),0,0)}
	to{transform:translate3d(0,0,0)}
}
@keyframes devmSlideInRight{
	from{visibility:visible; transform:translate3d(var(--ad,100%),0,0)}
	to{transform:translate3d(0,0,0)}
}

/* @dev 나가는 효과의 이동 거리. 들어오는 쪽 --ad 와 같은 요소에 놓이므로 변수를 나눈다 */
.hero__layer-motion.animate__animated.animate__fadeOutUp{animation-name:devmFadeOutUp}
.hero__layer-motion.animate__animated.animate__fadeOutDown{animation-name:devmFadeOutDown}
.hero__layer-motion.animate__animated.animate__fadeOutLeft{animation-name:devmFadeOutLeft}
.hero__layer-motion.animate__animated.animate__fadeOutRight{animation-name:devmFadeOutRight}
.hero__layer-motion.animate__animated.animate__slideOutUp{animation-name:devmSlideOutUp}
.hero__layer-motion.animate__animated.animate__slideOutDown{animation-name:devmSlideOutDown}
.hero__layer-motion.animate__animated.animate__slideOutLeft{animation-name:devmSlideOutLeft}
.hero__layer-motion.animate__animated.animate__slideOutRight{animation-name:devmSlideOutRight}

@keyframes devmFadeOutUp{
	from{opacity:1; transform:translate3d(0,0,0)}
	to{opacity:0; transform:translate3d(0,calc(-1 * var(--ado,100%)),0)}
}
@keyframes devmFadeOutDown{
	from{opacity:1; transform:translate3d(0,0,0)}
	to{opacity:0; transform:translate3d(0,var(--ado,100%),0)}
}
@keyframes devmFadeOutLeft{
	from{opacity:1; transform:translate3d(0,0,0)}
	to{opacity:0; transform:translate3d(calc(-1 * var(--ado,100%)),0,0)}
}
@keyframes devmFadeOutRight{
	from{opacity:1; transform:translate3d(0,0,0)}
	to{opacity:0; transform:translate3d(var(--ado,100%),0,0)}
}

@keyframes devmSlideOutUp{
	from{transform:translate3d(0,0,0)}
	to{visibility:hidden; transform:translate3d(0,calc(-1 * var(--ado,100%)),0)}
}
@keyframes devmSlideOutDown{
	from{transform:translate3d(0,0,0)}
	to{visibility:hidden; transform:translate3d(0,var(--ado,100%),0)}
}
@keyframes devmSlideOutLeft{
	from{transform:translate3d(0,0,0)}
	to{visibility:hidden; transform:translate3d(calc(-1 * var(--ado,100%)),0,0)}
}
@keyframes devmSlideOutRight{
	from{transform:translate3d(0,0,0)}
	to{visibility:hidden; transform:translate3d(var(--ado,100%),0,0)}
}

.hero__layer-motion.animate__animated.animate__maskUp{animation-name:devmMaskUp}
.hero__layer-motion.animate__animated.animate__maskDown{animation-name:devmMaskDown}
.hero__layer-motion.animate__animated.animate__maskLeft{animation-name:devmMaskLeft}
.hero__layer-motion.animate__animated.animate__maskRight{animation-name:devmMaskRight}
.hero__layer-motion.animate__animated.animate__maskWipeX{animation-name:devmMaskWipeX}
.hero__layer-motion.animate__animated.animate__maskWipeY{animation-name:devmMaskWipeY}
/* @dev 마스크 계열 등장 효과는 이 잘라내기로 만들어진다. 효과가 끝나면 더 필요하지
   않으므로 걷어 낸다. 남겨 두면 버튼 오버 효과와 아이콘 오버 표시처럼 요소가 상자 밖으로
   움직일 때 그만큼 잘려 보인다.

   표시를 붙이는 쪽이 걷어 내는 쪽이라는 점이 중요하다. 반대로 만들면 표시가 붙지 않는
   순간 마스크 자체가 사라진다. is-anim-done 은 carousel.js 가 효과가 끝난 뒤에 붙인다 */
/* 등장 효과가 끝나면 요소 상자 밖의 가림을 해제합니다. */
.hero__layer.is-mask-reveal{overflow:hidden}
.hero__layer.is-mask-reveal.is-anim-done{overflow:visible}

@keyframes devmMaskUp{
	from{transform:translate3d(0,calc(100% + var(--ad,24px)),0)}
	to{transform:translate3d(0,0,0)}
}
@keyframes devmMaskDown{
	from{transform:translate3d(0,calc(-100% - var(--ad,24px)),0)}
	to{transform:translate3d(0,0,0)}
}
@keyframes devmMaskLeft{
	from{transform:translate3d(calc(100% + var(--ad,24px)),0,0)}
	to{transform:translate3d(0,0,0)}
}
@keyframes devmMaskRight{
	from{transform:translate3d(calc(-100% - var(--ad,24px)),0,0)}
	to{transform:translate3d(0,0,0)}
}

@keyframes devmMaskWipeX{
	from{-webkit-clip-path:inset(0 50% 0 50%); clip-path:inset(0 50% 0 50%)}
	to{-webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0)}
}
@keyframes devmMaskWipeY{
	from{-webkit-clip-path:inset(50% 0 50% 0); clip-path:inset(50% 0 50% 0)}
	to{-webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0)}
}

.hero__layer.is-text,
.hero__layer.is-button{font-size:var(--fs,inherit)}
.hero__layer-canvas.is-m .hero__layer.is-text,
.hero__layer-canvas.is-m .hero__layer.is-button{font-size:var(--fs-m,var(--fs,inherit))}

.hero .hero__layer h1,
.hero .hero__layer h2,
.hero .hero__layer h3,
.hero .hero__layer p,
.hero .hero__layer span:not(.hero__btn){
	margin:0; color:inherit; font:inherit; line-height:inherit;
	letter-spacing:inherit; text-shadow:inherit;
}
.hero__layer img,
.hero__layer video{display:block; width:100%; height:auto; object-fit:contain}
.hero__layer iframe,
.hero__layer-yt{display:block; width:100%; aspect-ratio:16/9; border:0}
.hero__layer-yt iframe{display:block; width:100%; height:100%; border:0}
.hero__layer.is-video{width:480px}

.hero__layer.is-fixed-h .hero__layer-motion{height:100%}
.hero__layer.is-fixed-h img,
.hero__layer.is-fixed-h video{height:100%; object-fit:cover}
.hero__layer.is-fixed-h .hero__layer-yt{height:100%; aspect-ratio:auto}

.hero__layer video[controls]{pointer-events:auto}
.hero__layer-yt[data-controls="1"]{pointer-events:auto}
.hero__layer[href]{pointer-events:auto; color:inherit; text-decoration:none}

.hero__layer.is-button{pointer-events:auto; cursor:pointer; white-space:nowrap; text-shadow:none}

.hero__layer.is-button.is-fixed-w{white-space:normal}
.hero__layer.is-button.is-fixed-w .hero__btn{display:block; width:100%}

.hero__layer-ico{
	display:inline-block; font-size:.9em; line-height:1; vertical-align:baseline;
	transform:translate(calc(var(--ico-x,0px) + var(--ico-hx,0px)),var(--ico-y,0px));
	transition:transform .25s ease, opacity .25s ease, max-width .25s ease, margin .25s ease;
}
.hero__layer-ico.is-before{margin-right:.4em}
.hero__layer-ico.is-after{margin-left:.4em}

.hero__layer[data-ihover]{pointer-events:auto}

.hero__layer[data-ihover="show"] .hero__layer-ico,
.hero__layer[data-ihover="slide"] .hero__layer-ico{max-width:0; margin:0; opacity:0; overflow:hidden}
.hero__layer[data-ihover="show"]:hover .hero__layer-ico,
.hero__layer[data-ihover="slide"]:hover .hero__layer-ico{max-width:2.5em; opacity:1}
.hero__layer[data-ihover="show"]:hover .hero__layer-ico.is-before,
.hero__layer[data-ihover="slide"]:hover .hero__layer-ico.is-before{margin-right:.4em}
.hero__layer[data-ihover="show"]:hover .hero__layer-ico.is-after,
.hero__layer[data-ihover="slide"]:hover .hero__layer-ico.is-after{margin-left:.4em}
.hero__layer[data-ihover="slide"] .hero__layer-ico.is-before{--ico-hx:-.6em}
.hero__layer[data-ihover="slide"] .hero__layer-ico.is-after{--ico-hx:.6em}
.hero__layer[data-ihover="slide"]:hover .hero__layer-ico{--ico-hx:0px}
.hero__layer[data-ihover="move"]:hover .hero__layer-ico.is-before{--ico-hx:-.25em}
.hero__layer[data-ihover="move"]:hover .hero__layer-ico.is-after{--ico-hx:.25em}
.hero__btn{
	display:inline-flex; align-items:center; vertical-align:top;
	padding:var(--hb-py,14px) var(--hb-px,28px);
	border:var(--hb-bw,1px) solid var(--hb-bd,transparent); border-radius:var(--hb-r,8px);
	background:var(--hb-bg,#2563EB); color:var(--hb-fg,#fff);
	font:inherit; line-height:inherit; text-decoration:none;
	transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* @dev 글꼴마다 한글이 상자 안에서 앉는 높이가 달라 글자만 따로 보정한다 */
.hero__btn-t{position:relative; top:var(--hb-dy,0px)}
.hero__layer.is-button:hover .hero__btn{
	background:var(--hb-hbg,#2563EB); color:var(--hb-hfg,#fff); border-color:var(--hb-hbd,transparent);
}
/* @dev 3px 는 사실상 보이지 않는다. '위로 이동' 이라는 이름값을 하도록 6px 로 둔다 */
.hero__layer.is-button[data-hover="up"]:hover .hero__btn{transform:translateY(-6px)}
.hero__layer.is-button[data-hover="zoom"]:hover .hero__btn{transform:scale(var(--hb-hs,1.06))}
.hero__layer.is-button[data-hover="shadow"]:hover .hero__btn{box-shadow:0 14px 30px rgba(15,23,42,.4)}

.hero__layer.is-button[data-hover^="fill"] .hero__btn,
.hero__layer.is-button[data-hover="shine"] .hero__btn,
.hero__layer.is-button[data-hover="ring"] .hero__btn{position:relative; isolation:isolate}
.hero__layer.is-button[data-hover^="fill"] .hero__btn,
.hero__layer.is-button[data-hover="shine"] .hero__btn{overflow:hidden}

.hero__layer.is-button[data-hover^="fill"]:hover .hero__btn{background:var(--hb-bg,#2563EB)}
.hero__layer.is-button[data-hover^="fill"] .hero__btn::before{
	content:""; position:absolute; inset:0; z-index:-1;
	background:var(--hb-hbg,#2563EB); transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.hero__layer.is-button[data-hover="fill"] .hero__btn::before{transform:scaleX(0); transform-origin:left center}
.hero__layer.is-button[data-hover="fillc"] .hero__btn::before{transform:scaleX(0); transform-origin:center}
.hero__layer.is-button[data-hover="fillup"] .hero__btn::before{transform:scaleY(0); transform-origin:center bottom}
.hero__layer.is-button[data-hover^="fill"]:hover .hero__btn::before{transform:scale(1)}

.hero__layer.is-button[data-hover="shine"] .hero__btn::before{
	content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:-1;
	background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));
	transform:skewX(-18deg); transition:left .55s ease;
}
.hero__layer.is-button[data-hover="shine"]:hover .hero__btn::before{left:120%}

.hero__layer.is-button[data-hover="ring"] .hero__btn::after{
	content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
	border:var(--hb-bw,1px) solid var(--hb-hbd,#fff); opacity:0;
	transition:transform .35s ease, opacity .35s ease;
}
.hero__layer.is-button[data-hover="ring"]:hover .hero__btn::after{transform:scale(1.14); opacity:1}
.hero__layer.is-font-noto{font-family:"Noto Sans KR",sans-serif}
.hero__layer.is-font-suit{font-family:SUIT,sans-serif}
.hero__layer.is-font-gmarket{font-family:"Gmarket Sans",sans-serif}
.hero__layer.is-font-nanumsquare{font-family:NanumSquare,sans-serif}
.hero__layer.is-font-spoqa{font-family:"Spoqa Han Sans Neo",sans-serif}
.hero__layer.is-font-system{font-family:Arial,sans-serif}
.hero__copy{max-width:760px; --hero-ox:0px; --hero-oy:0px; --hero-anim:heroTextIn; transform:translate(var(--hero-ox,0px),var(--hero-oy,0px))}
.hero__copy.is-left{margin-left:0;margin-right:auto;text-align:left}
.hero__copy.is-center{margin-left:auto;margin-right:auto;text-align:center}
.hero__copy.is-right{margin-left:auto;margin-right:0;text-align:right}

.hero__body.is-vtop{align-self:flex-start}
.hero__body.is-vmiddle{align-self:center}
.hero__body.is-vbottom{align-self:flex-end}

.hero__copy.is-size-sm h1{font-size:calc(var(--fs-hero) * .74)}
.hero__copy.is-size-sm p{font-size:.98rem}
.hero__copy.is-size-lg h1{font-size:calc(var(--fs-hero) * 1.2)}
.hero__copy.is-size-lg p{font-size:1.25rem}

.hero__eyebrow{
	display:inline-block; margin-bottom:1rem; padding:.32rem .85rem;
	background:var(--glass-nav-bg); border:1px solid var(--glass-nav-line);
	color:var(--glass-nav-text); font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em;
}
.hero__eyebrow[hidden]{display:none}

.hero__copy.is-anim-up{--hero-anim:heroTextIn}
.hero__copy.is-anim-fade{--hero-anim:heroTextFade}
.hero__copy.is-anim-zoom{--hero-anim:heroTextZoom}
.hero__copy.is-anim-none{--hero-anim:none}
.hero__copy.is-animate .hero__eyebrow{animation:var(--hero-anim,heroTextIn) .72s var(--ez-out) both}
.hero h1{
	font-size:var(--fs-hero); color:var(--glass-nav-text, #FFFFFF); letter-spacing:-.035em;
	text-shadow:0 2px 24px rgba(20,32,46,.45);
}
.hero p{
	margin-top:1.1rem; color:var(--glass-nav-sub, rgba(255,255,255,.88)); font-size:clamp(.95rem,1.6vw,1.1rem);
	text-shadow:0 1px 14px rgba(20,32,46,.5);
}
.hero__acts{margin-top:2rem; display:flex; gap:.75rem; flex-wrap:wrap;pointer-events:auto}
.hero__copy.is-left .hero__acts{justify-content:flex-start}
.hero__copy.is-center .hero__acts{justify-content:center}
.hero__copy.is-right .hero__acts{justify-content:flex-end}
.hero__copy.is-animate h1{animation:var(--hero-anim,heroTextIn) .72s var(--ez-out) both}
.hero__copy.is-animate p{animation:var(--hero-anim,heroTextIn) .72s .12s var(--ez-out) both}
.hero__copy.is-animate .hero__acts{animation:var(--hero-anim,heroTextIn) .72s .24s var(--ez-out) both}
@keyframes heroTextIn{
	from{opacity:0;transform:translateY(34px)}
	to{opacity:1;transform:none}
}
@keyframes heroTextFade{
	from{opacity:0}
	to{opacity:1}
}
@keyframes heroTextZoom{
	from{opacity:0;transform:scale(.86)}
	to{opacity:1;transform:none}
}
@keyframes heroImageMove{
	from{transform:translateZ(0) scale(var(--hbz-from, 1.08))}
	to{transform:translateZ(0) scale(var(--hbz-to, 1.01))}
}

.hero__controls{
	position:absolute; z-index:4; display:flex; flex-direction:column; align-items:center;
	gap:.55rem;
}
.hero .hero__controls .hero__dots.swiper-pagination{
	position:relative; left:auto; right:auto; bottom:auto; top:auto;
	width:auto; transform:none;
	display:flex; align-items:center; gap:.5rem; line-height:0;

	/* @dev Swiper 는 점마다 좌우 4px 여백을 자기 규칙으로 넣는다. 그 선택자가
	   아래 margin:0 보다 구체적이라 실제 화면에서만 간격이 8px 이 아닌 16px 이 됐다.
	   편집기 미리보기에는 Swiper 가 돌지 않아 8px 로 그려져 두 화면의 점 묶음 폭이
	   달랐고, 끌어서 잡은 자리가 실제 화면에서 어긋났다. Swiper 가 읽는 변수를
	   0 으로 두면 규칙 다툼 없이 양쪽이 같아진다 */
	--swiper-pagination-bullet-horizontal-gap:0px;
}

.hero .hero__controls .hero__dots.is-box{
	padding:var(--sp-1); border-radius:999px;
	background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
	-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

.hero__dots .swiper-pagination-bullet{
	width:var(--hero-page-len,36px); height:var(--hero-page-thick,6px);
	margin:0; border-radius:var(--hero-page-round,999px);
	background:var(--hero-page-idle,rgba(255,255,255,.45)); opacity:1;
	transition:width .45s var(--ez-out), height .45s var(--ez-out),
							border-radius .45s var(--ez-out), background-color .4s var(--ez);
}
.hero__dots .swiper-pagination-bullet:hover{background:rgba(255,255,255,.8)}
.hero__dots .swiper-pagination-bullet-active{
	width:var(--hero-page-len-on,44px); height:var(--hero-page-thick-on,6px);
	border-radius:var(--hero-page-round-on,999px);
	background:var(--hero-page-color,var(--glass-nav-text, #FFFFFF)); transform:none;
}
/* @dev 숫자는 늘 들어 있고 점 모양일 때만 감춘다. 기기마다 모양이 다를 수 있어서다 */
.hero__dots .swiper-pagination-bullet b{display:none}
.hero__dots.is-shape-number .swiper-pagination-bullet b{display:block}
.hero__dots.is-shape-number .swiper-pagination-bullet{
	width:auto; height:auto; min-width:24px; padding:.15rem .35rem; border-radius:6px;
	background:transparent; color:var(--hero-page-idle,rgba(255,255,255,.7));
	font-size:.8125rem; font-weight:700; line-height:1.3; text-align:center;
}
.hero__dots.is-shape-number .swiper-pagination-bullet:hover{background:rgba(255,255,255,.14)}
.hero__dots.is-shape-number .swiper-pagination-bullet-active{
	background:rgba(255,255,255,.2); color:var(--hero-page-color,var(--glass-nav-text, #FFFFFF)); transform:none;
}

.hero .hero__timer,
.hero .hero__timer-num{pointer-events:none}

.hero .hero__timer{position:absolute; z-index:6; display:block}
.hero__timer-shape{display:block}

.hero__timer.is-bar .hero__timer-shape{width:var(--hero-timer-len,140px); height:var(--hero-timer-w,2px); overflow:hidden; background:rgba(255,255,255,.28)}

.hero__timer.is-full .hero__timer-shape{width:auto; height:var(--hero-timer-w,2px); overflow:hidden; background:rgba(255,255,255,.22)}

.hero__timer i{
	display:block; width:100%; height:100%;
	background:var(--hero-timer-color,var(--glass-nav-text, #FFFFFF));
	transform:scaleX(var(--hero-timer-p,0)); transform-origin:left center;
}

/* @dev 원과 막대가 함께 들어 있다. 기기별 모양에 따라 하나만 보인다 */
.hero__timer svg{display:none}
.hero__timer.is-ring .hero__timer-shape{width:var(--hero-timer-size,30px); height:var(--hero-timer-size,30px)}
.hero__timer.is-ring svg{display:block; width:100%; height:100%; transform:rotate(-90deg)}
.hero__timer.is-ring i{display:none}
.hero__timer circle{fill:none; stroke-width:var(--hero-timer-w,2px)}

/* @dev 화면 가득 채우는 막대는 좌우 끝에 붙는다 */
.hero .hero__timer.is-full.is-v-top{top:0; bottom:auto; left:0; right:0; transform:none}
.hero .hero__timer.is-full.is-v-bottom{bottom:0; top:auto; left:0; right:0; transform:none}

.hero__timer-num{
	font-size:var(--hero-timer-num,12px); font-weight:700; line-height:1;
	color:var(--hero-timer-num-c,var(--hero-timer-color,var(--glass-nav-text, #FFFFFF))); font-variant-numeric:tabular-nums;
}
.hero__timer-num.is-in{display:none}
.hero__timer.is-num-in .hero__timer-num.is-in{
	position:absolute; top:0; left:0; right:0; bottom:0;
	display:flex; align-items:center; justify-content:center;
}

.hero__timer.is-full .hero__timer-num{
	top:auto; bottom:auto; left:auto; right:1.25rem;
	display:block; width:auto;
}
.hero__timer.is-full.is-v-bottom .hero__timer-num{bottom:calc(100% + 8px)}
.hero__timer.is-full.is-v-top .hero__timer-num{top:calc(100% + 8px)}
@media (min-width:1200px){
	.hero__timer.is-full .hero__timer-num{right:2rem}
}

.hero .hero__timer-num.is-free{position:absolute; z-index:6; display:none}
.hero .hero__timer-num.is-free.is-on-pc{display:block}
.hero__timer-bg{stroke:rgba(255,255,255,.28)}
.hero__timer-fg{
	stroke:var(--hero-timer-color,var(--c-on-accent)); stroke-dasharray:100.53;
	stroke-dashoffset:calc(100.53 - 100.53 * var(--hero-timer-p,0));
}
@media (prefers-reduced-motion:reduce){
	.hero__layer-motion{animation:none !important}
}

/* @dev 조작 요소가 놓이는 판. 캐러셀 상자 그 자체다. 배율을 걸지 않는다.
   "왼쪽 끝에서 16px" 은 폭이 390 이든 1199 이든 1440 이든 실제 16px 이다.
   요소(레이어)만 논리 무대를 쓰고 조작 요소는 실제 화면을 쓴다.
   무대를 함께 쓰면 무대 가로세로비와 화면이 어긋날 때 좌우에 빈 띠가 생긴다 */
.hero__ui{
	position:absolute; left:0; top:0; z-index:4;
	width:100%; height:100%; max-width:none; margin:0; padding:0;
	transform:none;
	pointer-events:none;
}
.hero__ui-in{position:relative; width:100%; height:100%}
.hero__ui-in > *{pointer-events:auto}

@media (max-width:1199px){
	.hero .is-off-m{display:none !important}
}
@media (min-width:1200px){
	.hero .is-off-pc{display:none !important}
}

.hero .hero__controls,
.hero .hero__timer,
.hero .hero__timer-num.is-free,
.hero .hero__play,
.hero .hero__navs.is-free,
.hero .hero__scroll-guide{
	top:var(--sp-t,auto); bottom:var(--sp-b,auto);
	left:var(--sp-l,auto); right:var(--sp-r,auto);
	transform:var(--sp-tf,none);
}
@media (max-width:1199px){
	.hero .hero__controls,
	.hero .hero__timer,
	.hero .hero__timer-num.is-free,
	.hero .hero__play,
	.hero .hero__navs.is-free,
	.hero .hero__navs.is-m-free,
	.hero .hero__scroll-guide{
		top:var(--sp-m-t,auto); bottom:var(--sp-m-b,auto);
		left:var(--sp-m-l,auto); right:var(--sp-m-r,auto);
		transform:var(--sp-m-tf,none);
	}
}

.hero__scroll-guide{
	position:absolute;
	z-index:7;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	min-width:var(--hero-scroll-size,56px);
	color:var(--hero-scroll-color,#FFFFFF);
	opacity:var(--hero-scroll-opacity,1);
	pointer-events:none;
	transition:opacity .25s var(--ez), visibility .25s var(--ez);
}
.hero__scroll-guide.is-slide-off{
	opacity:0;
	visibility:hidden;
}
.hero__scroll-label{
	display:block;
	font-size:10px;
	font-weight:700;
	line-height:1;
	letter-spacing:.18em;
	white-space:nowrap;
}
.hero__scroll-mark{
	position:relative;
	display:block;
	width:calc(var(--hero-scroll-size,56px) * .36);
	height:var(--hero-scroll-size,56px);
}
.hero__scroll-mark i,
.hero__scroll-mark b{
	position:absolute;
	display:block;
}

.hero__scroll-guide.is-style-line .hero__scroll-mark{
	width:2px;
	background:rgba(255,255,255,.38);
	background:color-mix(in srgb, currentColor 38%, transparent);
}
.hero__scroll-guide.is-style-line .hero__scroll-mark i{
	top:0;
	left:50%;
	width:6px;
	height:6px;
	margin-left:-3px;
	border-radius:50%;
	background:currentColor;
	box-shadow:0 0 0 0 currentColor;
	animation:heroScrollLine var(--hero-scroll-speed,1600ms) ease-in-out infinite;
}

.hero__scroll-guide.is-style-mouse .hero__scroll-label,
.hero__scroll-guide.is-style-arrow .hero__scroll-label,
.hero__scroll-guide.is-style-chevron .hero__scroll-label{
	display:none;
}
.hero__scroll-guide.is-style-mouse .hero__scroll-mark{
	width:calc(var(--hero-scroll-size,56px) * .52);
	height:var(--hero-scroll-size,56px);
	border:2px solid currentColor;
	border-radius:999px;
}
.hero__scroll-guide.is-style-mouse .hero__scroll-mark i{
	top:18%;
	left:50%;
	width:3px;
	height:9px;
	margin-left:-1.5px;
	border-radius:999px;
	background:currentColor;
	animation:heroScrollMouse var(--hero-scroll-speed,1600ms) ease-in-out infinite;
}

.hero__scroll-guide.is-style-arrow .hero__scroll-mark,
.hero__scroll-guide.is-style-chevron .hero__scroll-mark{
	width:var(--hero-scroll-size,56px);
	height:var(--hero-scroll-size,56px);
}
.hero__scroll-guide.is-style-arrow .hero__scroll-mark i{
	top:18%;
	left:50%;
	width:30%;
	height:30%;
	border-right:2px solid currentColor;
	border-bottom:2px solid currentColor;
	transform:translateX(-50%) rotate(45deg);
	animation:heroScrollArrow var(--hero-scroll-speed,1600ms) ease-in-out infinite;
}
.hero__scroll-guide.is-style-chevron .hero__scroll-mark i,
.hero__scroll-guide.is-style-chevron .hero__scroll-mark b{
	left:50%;
	width:28%;
	height:28%;
	border-right:2px solid currentColor;
	border-bottom:2px solid currentColor;
	transform:translateX(-50%) rotate(45deg);
	animation:heroScrollChevron var(--hero-scroll-speed,1600ms) ease-in-out infinite;
}
.hero__scroll-guide.is-style-chevron .hero__scroll-mark i{
	top:8%;
}
.hero__scroll-guide.is-style-chevron .hero__scroll-mark b{
	top:34%;
	animation-delay:-280ms;
}

.hero__scroll-guide.is-style-progress{
	align-items:flex-start;
}
.hero__scroll-guide.is-style-progress .hero__scroll-mark{
	width:calc(var(--hero-scroll-size,56px) * 1.8);
	height:2px;
	overflow:hidden;
	background:rgba(255,255,255,.34);
	background:color-mix(in srgb, currentColor 34%, transparent);
}
.hero__scroll-guide.is-style-progress .hero__scroll-mark i{
	inset:0;
	background:currentColor;
	transform:scaleX(.25);
	transform-origin:left center;
	animation:heroScrollProgress var(--hero-scroll-speed,1600ms) ease-in-out infinite;
}

@keyframes heroScrollLine{
	0%{top:0;opacity:0;box-shadow:0 0 0 0 currentColor}
	18%{opacity:1}
	75%{top:calc(100% - 6px);opacity:1;box-shadow:0 0 0 0 currentColor}
	100%{top:calc(100% - 6px);opacity:0;box-shadow:0 0 0 8px transparent}
}
@keyframes heroScrollMouse{
	0%{transform:translateY(0);opacity:0}
	20%{opacity:1}
	75%{transform:translateY(calc(var(--hero-scroll-size,56px) * .42));opacity:1}
	100%{transform:translateY(calc(var(--hero-scroll-size,56px) * .42));opacity:0}
}
@keyframes heroScrollArrow{
	0%,100%{top:12%;opacity:.25}
	50%{top:42%;opacity:1}
}
@keyframes heroScrollChevron{
	0%,100%{opacity:.2;transform:translateX(-50%) translateY(-5px) rotate(45deg)}
	50%{opacity:1;transform:translateX(-50%) translateY(5px) rotate(45deg)}
}
@keyframes heroScrollProgress{
	0%{transform:scaleX(.08);opacity:.35}
	60%{transform:scaleX(1);opacity:1}
	100%{transform:scaleX(1);opacity:0}
}

@media (prefers-reduced-motion:reduce){
	.hero__scroll-guide .hero__scroll-mark i,
	.hero__scroll-guide .hero__scroll-mark b{
		animation:none;
	}
}

.hero__navs{
	position:absolute; z-index:5; display:flex; align-items:center; gap:var(--hero-nav-gap,8px);
	opacity:0; visibility:hidden; pointer-events:none;
	transition:opacity .22s var(--ez), visibility 0s .22s;
}
.hero:hover .hero__navs,
.hero:focus-within .hero__navs,
.hero__navs.is-always{opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s}

.hero__nav{
	display:flex; align-items:center; justify-content:center;
	width:var(--hero-nav-size,44px); height:var(--hero-nav-size,44px); border-radius:0;
	border:var(--hero-nav-bw,0) solid var(--hero-nav-bd,currentColor);

	font-size:calc(var(--hero-nav-size,44px) * .55); line-height:1; color:var(--hero-nav-color,var(--glass-nav-text, #FFFFFF));
	background:transparent; opacity:.85;
	transition:background-color .3s var(--ez), border-color .3s var(--ez), transform .35s var(--ez-out), opacity .3s var(--ez);
}
.hero__nav:hover{transform:translateY(-1px); opacity:1}

.hero__play{
	position:absolute; z-index:7;
	display:flex; align-items:center; justify-content:center;
	width:var(--hero-play-size,44px); height:var(--hero-play-size,44px);
	border-radius:0; background:transparent;
	border:var(--hero-play-bw,0) solid var(--hero-play-bd,currentColor);
	font-size:calc(var(--hero-play-size,44px) * .4); line-height:1;
	color:var(--hero-play-color,var(--glass-nav-text, #FFFFFF)); opacity:.85;
	transition:background-color .3s var(--ez), border-color .3s var(--ez), transform .35s var(--ez-out), opacity .3s var(--ez);
}
.hero__play:hover{transform:translateY(-1px); opacity:1}

.hero__play .hero__play-go{display:none}
.hero__play.is-paused .hero__play-pause{display:none}
.hero__play.is-paused .hero__play-go{display:inline-flex}

.hero__play.is-shape-glass,
.hero__play.is-shape-glass-round{
	background:rgba(255,255,255,.16);
	-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hero__play.is-shape-glass:hover,
.hero__play.is-shape-glass-round:hover{background:rgba(255,255,255,.32)}
.hero__play.is-shape-round,
.hero__play.is-shape-glass-round{border-radius:50%}
.hero__play.is-shape-round:hover{background:rgba(255,255,255,.14)}

.hero__navs.is-shape-glass .hero__nav,
.hero__navs.is-shape-glass-round .hero__nav{
	background:rgba(255,255,255,.16);
	-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hero__navs.is-shape-glass .hero__nav:hover,
.hero__navs.is-shape-glass-round .hero__nav:hover{background:rgba(255,255,255,.32)}
.hero__navs.is-shape-round .hero__nav,
.hero__navs.is-shape-glass-round .hero__nav{border-radius:50%}
.hero__navs.is-shape-round .hero__nav:hover{background:rgba(255,255,255,.14)}

.hero__navs.is-pos-bottom-left{left:1.75rem; bottom:1.75rem}
.hero__navs.is-pos-bottom-right{right:1.75rem; bottom:1.75rem}
.hero__navs.is-pos-bottom-center{left:50%; bottom:1.75rem; transform:translateX(-50%)}

.hero__navs.is-pos-side{
	left:1.25rem; right:1.25rem; top:50%; margin-top:-22px;
	justify-content:space-between; pointer-events:none;
}
.hero__navs.is-pos-side .hero__nav{pointer-events:auto}
.hero:hover .hero__navs.is-pos-side,
.hero:focus-within .hero__navs.is-pos-side,
.hero__navs.is-pos-side.is-always{pointer-events:none}
.hero__navs.is-pos-side .hero__nav--prev:hover{transform:translateX(-3px)}
.hero__navs.is-pos-side .hero__nav--next:hover{transform:translateX(3px)}

.hero__navs.is-free{position:absolute}

@media (max-width:1199px){

	.hero__nav{
		width:var(--hero-nav-size-m,var(--hero-nav-size,44px));
		height:var(--hero-nav-size-m,var(--hero-nav-size,44px));
		font-size:calc(var(--hero-nav-size-m,var(--hero-nav-size,44px)) * .55);
		border-width:var(--hero-nav-bw-m,var(--hero-nav-bw,0));
		border-color:var(--hero-nav-bd-m,var(--hero-nav-bd,currentColor));
		color:var(--hero-nav-color-m,var(--hero-nav-color,var(--glass-nav-text, #FFFFFF)));
	}
	.hero__navs{gap:var(--hero-nav-gap-m,var(--hero-nav-gap,8px))}

	.hero__navs.is-shape-glass .hero__nav,
	.hero__navs.is-shape-glass-round .hero__nav{background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none}
	.hero__navs.is-shape-round .hero__nav,
	.hero__navs.is-shape-glass-round .hero__nav{border-radius:0}

	.hero__navs.is-m-shape-glass .hero__nav,
	.hero__navs.is-m-shape-glass-round .hero__nav{
		background:rgba(255,255,255,.16);
		-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
	}
	.hero__navs.is-m-shape-round .hero__nav,
	.hero__navs.is-m-shape-glass-round .hero__nav{border-radius:50%}

	.hero .hero__navs.is-pos-bottom-left,
	.hero .hero__navs.is-pos-bottom-right,
	.hero .hero__navs.is-pos-bottom-center,
	.hero .hero__navs.is-pos-side{
		top:auto; bottom:auto; left:auto; right:auto;
		margin-top:0; transform:none; justify-content:flex-start; pointer-events:auto;
	}

	.hero .hero__navs.is-m-pos-bottom-left{left:1.75rem; bottom:1rem}
	.hero .hero__navs.is-m-pos-bottom-right{right:1.75rem; bottom:1rem}
	.hero .hero__navs.is-m-pos-bottom-center{left:50%; bottom:1rem; transform:translateX(-50%)}
	.hero .hero__navs.is-m-pos-side{
		left:1.25rem; right:1.25rem; top:50%;
		margin-top:calc(var(--hero-nav-size-m,var(--hero-nav-size,44px)) / -2);
		justify-content:space-between; pointer-events:none;
	}
	.hero__navs.is-m-pos-side .hero__nav{pointer-events:auto}

	.hero__play{
		width:var(--hero-play-size-m,var(--hero-play-size,44px));
		height:var(--hero-play-size-m,var(--hero-play-size,44px));
		font-size:calc(var(--hero-play-size-m,var(--hero-play-size,44px)) * .4);
		border-width:var(--hero-play-bw-m,var(--hero-play-bw,0));
		border-color:var(--hero-play-bd-m,var(--hero-play-bd,currentColor));
		color:var(--hero-play-color-m,var(--hero-play-color,var(--glass-nav-text, #FFFFFF)));
	}
	.hero__play.is-shape-glass,
	.hero__play.is-shape-glass-round{background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none}
	.hero__play.is-shape-round,
	.hero__play.is-shape-glass-round{border-radius:0}
	.hero__play.is-m-shape-glass,
	.hero__play.is-m-shape-glass-round{
		background:rgba(255,255,255,.16);
		-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
	}
	.hero__play.is-m-shape-round,
	.hero__play.is-m-shape-glass-round{border-radius:50%}

	.hero__timer.is-bar .hero__timer-shape,
	.hero__timer.is-full .hero__timer-shape,
	.hero__timer.is-ring .hero__timer-shape{width:auto; height:auto; overflow:visible; background:none}

	.hero__timer.is-m-bar .hero__timer-shape{
		width:var(--hero-timer-len-m,var(--hero-timer-len,140px));
		height:var(--hero-timer-w-m,var(--hero-timer-w,2px));
		overflow:hidden; background:rgba(255,255,255,.28);
	}
	.hero__timer.is-m-full .hero__timer-shape{
		width:auto; height:var(--hero-timer-w-m,var(--hero-timer-w,2px));
		overflow:hidden; background:rgba(255,255,255,.22);
	}
	.hero__timer.is-m-ring .hero__timer-shape{
		width:var(--hero-timer-size-m,var(--hero-timer-size,30px));
		height:var(--hero-timer-size-m,var(--hero-timer-size,30px));
	}
	.hero__timer.is-ring svg{display:none}
	.hero__timer.is-ring i{display:block}
	.hero__timer.is-m-ring svg{display:block; width:100%; height:100%; transform:rotate(-90deg)}
	.hero__timer.is-m-ring i{display:none}
	.hero__timer circle{stroke-width:var(--hero-timer-w-m,var(--hero-timer-w,2px))}
	.hero__timer i{background:var(--hero-timer-color-m,var(--hero-timer-color,var(--glass-nav-text, #FFFFFF)))}
	.hero__timer-fg{stroke:var(--hero-timer-color-m,var(--hero-timer-color,var(--c-on-accent)))}

	.hero .hero__timer.is-full.is-v-top,
	.hero .hero__timer.is-full.is-v-bottom{
		top:var(--sp-m-t,auto); bottom:var(--sp-m-b,auto);
		left:var(--sp-m-l,auto); right:var(--sp-m-r,auto); transform:var(--sp-m-tf,none);
	}
	.hero .hero__timer.is-m-full.is-m-v-top{top:0; bottom:auto; left:0; right:0; transform:none}
	.hero .hero__timer.is-m-full.is-m-v-bottom{bottom:0; top:auto; left:0; right:0; transform:none}

	.hero__timer-num{font-size:var(--hero-timer-num-m,var(--hero-timer-num,12px))}
	.hero__timer.is-num-in .hero__timer-num.is-in{display:none}
	.hero__timer.is-m-num-in .hero__timer-num.is-in{
		position:absolute; top:0; left:0; right:0; bottom:0;
		display:flex; align-items:center; justify-content:center;
	}
	.hero .hero__timer-num.is-free.is-on-pc{display:none}
	.hero .hero__timer-num.is-free.is-on-m{display:block}
	.hero .hero__timer.is-full .hero__timer-num{right:1.25rem}

	.hero .hero__controls .hero__dots.is-box{
		padding:0; border-radius:0; background:none; border:0;
		-webkit-backdrop-filter:none; backdrop-filter:none;
	}
	.hero .hero__controls .hero__dots.is-m-box{
		padding:var(--sp-1); border-radius:999px;
		background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
		-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
	}

	.hero__dots .swiper-pagination-bullet{
		width:var(--hero-page-len-m,var(--hero-page-len,36px));
		height:var(--hero-page-thick-m,var(--hero-page-thick,6px));
		border-radius:var(--hero-page-round-m,var(--hero-page-round,999px));
		background:var(--hero-page-idle-m,var(--hero-page-idle,rgba(255,255,255,.45)));
	}
	.hero__dots .swiper-pagination-bullet-active{
		width:var(--hero-page-len-on-m,var(--hero-page-len-on,44px));
		height:var(--hero-page-thick-on-m,var(--hero-page-thick-on,6px));
		border-radius:var(--hero-page-round-on-m,var(--hero-page-round-on,999px));
		background:var(--hero-page-color-m,var(--hero-page-color,var(--glass-nav-text, #FFFFFF)));
	}

	.hero__dots.is-shape-number .swiper-pagination-bullet{
		width:var(--hero-page-len-m,var(--hero-page-len,36px));
		height:var(--hero-page-thick-m,var(--hero-page-thick,6px));
		min-width:0; padding:0;
		border-radius:var(--hero-page-round-m,var(--hero-page-round,999px));
		background:var(--hero-page-idle-m,var(--hero-page-idle,rgba(255,255,255,.45)));
	}
	.hero__dots.is-shape-number .swiper-pagination-bullet-active{
		width:var(--hero-page-len-on-m,var(--hero-page-len-on,44px));
		height:var(--hero-page-thick-on-m,var(--hero-page-thick-on,6px));
		border-radius:var(--hero-page-round-on-m,var(--hero-page-round-on,999px));
		background:var(--hero-page-color-m,var(--hero-page-color,var(--glass-nav-text, #FFFFFF)));
	}
	.hero__dots.is-m-shape-number .swiper-pagination-bullet{
		width:auto; height:auto; min-width:24px; padding:.15rem .35rem; border-radius:6px;
		background:transparent; color:var(--hero-page-idle-m,var(--hero-page-idle,rgba(255,255,255,.7)));
		font-size:.8125rem; font-weight:700; line-height:1.3; text-align:center;
	}
	.hero__dots.is-m-shape-number .swiper-pagination-bullet-active{
		width:auto; height:auto; border-radius:6px;
		background:rgba(255,255,255,.2);
		color:var(--hero-page-color-m,var(--hero-page-color,var(--glass-nav-text, #FFFFFF)));
	}
	.hero__dots.is-shape-number .swiper-pagination-bullet b{display:none}
	.hero__dots.is-m-shape-number .swiper-pagination-bullet b{display:block}
}

.hero__stage.is-intro-fade{animation:heroIntroFade 1.1s var(--ez-out) both}
.hero__stage.is-intro-zoom{animation:heroIntroZoom 1.8s var(--ez-out) both}
@keyframes heroIntroFade{from{opacity:0}to{opacity:1}}
@keyframes heroIntroZoom{from{transform:scale(1.12)}to{transform:scale(1)}}

/* @dev 덮개의 층은 첫 화면 카드(z-index 3)보다 낮고 슬라이드 무대(z-index 0)보다
   높아야 한다. 9 로 두면 캐러셀 위로 겹쳐 올라온 카드를 덮고, 쌓임 맥락을 만들어
   가두면 이번에는 이전·다음·재생 단추가 그 카드 아래로 내려가 눌리지 않는다 */
.hero__curtain{position:absolute; inset:0; z-index:2; pointer-events:none}
.hero__curtain i{
	position:absolute; display:block;
	background:var(--c-deep,#0F172A);
}

/* 상하로 걷히는 덮개입니다. */
.hero__curtain--y i{left:0; right:0; height:50%}
.hero__curtain--y i:first-child{top:0; animation:heroCurtainUp 1.15s var(--ez-out) both}
.hero__curtain--y i:last-child{bottom:0; animation:heroCurtainDown 1.15s var(--ez-out) both}
@keyframes heroCurtainUp{from{transform:translateY(0)}to{transform:translateY(-100%)}}
@keyframes heroCurtainDown{from{transform:translateY(0)}to{transform:translateY(100%)}}

/* 좌우로 걷히는 덮개입니다. */
.hero__curtain--x i{top:0; bottom:0; width:50%}
.hero__curtain--x i:first-child{left:0; animation:heroCurtainLeft 1.15s var(--ez-out) both}
.hero__curtain--x i:last-child{right:0; animation:heroCurtainRight 1.15s var(--ez-out) both}
@keyframes heroCurtainLeft{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes heroCurtainRight{from{transform:translateX(0)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
	.hero__stage.is-intro-fade,
	.hero__stage.is-intro-zoom,
	.hero__curtain i{animation:none}
	.hero__curtain{display:none}
}

.devm-loading:not(.is-done) ~ .hero .hero__stage,
.devm-loading:not(.is-done) ~ .hero .hero__stage img.hero__bg,
.devm-loading:not(.is-done) ~ .hero .hero__stage .hero__vid,
.devm-loading:not(.is-done) ~ .hero .hero__stage .hero__yt,
.devm-loading:not(.is-done) ~ .hero .hero__curtain i,
.devm-loading:not(.is-done) ~ .hero .hero__copy *,
.devm-loading:not(.is-done) ~ .hero .hero__layer-motion{animation-play-state:paused}

@media (min-width:768px){
	.hero__nav{display:flex}
}
@media (min-width:1200px){
	.hero__body{padding:8rem 0 6rem}
}