/* 메인 캐러셀 스타일입니다. 높이와 색상, 버튼 모양과 효과의 움직임을 이 파일에서 수정하십시오 */

/* 캐러셀 영역입니다. 높이를 변경하시려면 --sc-h 를 수정하십시오 */
.sc{
	--sc-h:min(88vh,760px);
	--page-len:9px; --page-len-on:34px; --page-thick:8px; --page-thick-on:8px;
	--page-round:999px; --page-round-on:999px; --page-on:#FFFFFF; --page-off:rgba(255,255,255,.45);
	--timer-size:38px; --timer-w:1px; --timer-len:140px; --timer-color:#FFFFFF;
	--nav-size:44px; --nav-color:#000000; --nav-bw:0px; --nav-bd:#FFFFFF;
	--play-size:44px; --play-color:#FFFFFF;
	position:relative; overflow:hidden; background:#1B2836;
}

/* 모바일 설정입니다. 설정 화면에서 모바일 값을 별도로 지정한 항목만 표시됩니다.
   크기와 색상만 구분되며, 모양과 위치는 이 파일에서 직접 수정하십시오.
   높이 상한 760px 은 태블릿에서 캐러셀이 PC 보다 커지지 않도록 제한하는 값입니다 */
@media (max-width:1199px){
	.sc{
		--sc-h:min(calc(100vw * 640 / 390), 88vh, 760px);
	}
}

/* 화면 한 장 */
.sc__s{position:relative; min-height:var(--sc-h); overflow:hidden}
.sc__bg{position:absolute; inset:0; z-index:0}
.sc__bg img,
.sc__bg video{display:block; width:100%; height:100%; object-fit:cover}
.sc__bgc{position:absolute; inset:0; display:block}
.sc__dim{position:absolute; inset:0; z-index:1; background:rgba(9,16,24,.42)}

.sc__yt{position:absolute; inset:0; overflow:hidden}
.sc__yt iframe{
	position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
	width:177.78vh; min-width:100%; height:56.25vw; min-height:100%; border:0; pointer-events:none;
}

/* 요소 배치 기준 영역입니다. PC는 1200x600, 모바일은 390x640을 기준으로 화면 크기에 맞게 축소합니다. */
.sc__stage{
	position:absolute; left:50%; top:50%; z-index:2;
	width:1200px; height:600px; transform:translate(-50%,-50%);
	transform-origin:center center; opacity:0; pointer-events:none;
}

.sc__stage.is-on{opacity:1}
.sc__stage > *{pointer-events:auto}

.sc__ly{
	position:absolute; display:block; max-width:94%; margin:0; color:#fff;
	left:var(--l,0); top:var(--t,0); transform:var(--tf,none); text-align:var(--ta,left);
	word-break:keep-all; text-decoration:none;
}
.sc__ly.is-text,
.sc__ly.is-button{width:max-content; z-index:2; font-size:var(--fs,inherit)}
.sc__ly.is-image,
.sc__ly.is-video{z-index:1}
.sc__ly.is-fw{width:var(--w,auto)}
.sc__ly.is-fh{height:var(--h,auto)}
.sc__ly.is-mask{overflow:hidden}

@media (max-width:1199px){
	.sc__ly{left:var(--lm,var(--l,0)); top:var(--tm,var(--t,0));
		transform:var(--tfm,var(--tf,none)); text-align:var(--tam,var(--ta,left))}
	.sc__ly.is-fw{width:var(--wm,var(--w,auto))}
	.sc__ly.is-fh{height:var(--hm,var(--h,auto))}
	.sc__ly.is-text,
	.sc__ly.is-button{font-size:var(--fs-m,var(--fs,inherit))}
}

.sc__mo{display:block}
.sc__ly.is-fh .sc__mo{height:100%}
.sc__tx{margin:0; font:inherit; color:inherit}
.sc__ly img,
.sc__ly video{display:block; width:100%; height:100%; object-fit:cover; border-radius:4px}
.sc__ytl{position:relative; width:100%; aspect-ratio:16/9}
.sc__ytl iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* 버튼 */
.sc__ly.is-button{cursor:pointer; white-space:nowrap; text-shadow:none}
.sc__btn{
	display:inline-flex; align-items:center;
	padding:var(--py,14px) var(--px,28px);
	border:var(--bw,1px) solid var(--bd,transparent); border-radius:var(--r,0px);
	background:var(--bg,transparent); color:var(--fg,#fff);
	font:inherit; line-height:1;
	transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.sc__btn-t{position:relative; top:var(--dy,0px)}
.sc__ly.is-button:hover .sc__btn{
	background:var(--hbg,var(--bg,transparent)); color:var(--hfg,var(--fg,#fff));
	border-color:var(--hbd,var(--bd,transparent));
}
.sc__ly.is-button[data-hover="up"]:hover .sc__btn{transform:translateY(-3px)}
.sc__ly.is-button[data-hover="zoom"]:hover .sc__btn{transform:scale(var(--hs,1.06))}
.sc__ly.is-button[data-hover="shadow"]:hover .sc__btn{box-shadow:0 14px 30px rgba(15,23,42,.4)}
.sc__ly.is-button[data-hover^="fill"] .sc__btn,
.sc__ly.is-button[data-hover="shine"] .sc__btn,
.sc__ly.is-button[data-hover="ring"] .sc__btn{position:relative; isolation:isolate}
.sc__ly.is-button[data-hover^="fill"] .sc__btn,
.sc__ly.is-button[data-hover="shine"] .sc__btn{overflow:hidden}

.sc__ly.is-button[data-hover^="fill"]:hover .sc__btn{background:var(--bg,transparent)}
.sc__ly.is-button[data-hover^="fill"] .sc__btn::before{
	content:''; position:absolute; inset:0; z-index:-1; background:var(--hbg,#2563EB);
	transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.sc__ly.is-button[data-hover="fill"] .sc__btn::before{transform:scaleX(0); transform-origin:left center}
.sc__ly.is-button[data-hover="fillc"] .sc__btn::before{transform:scaleX(0); transform-origin:center}
.sc__ly.is-button[data-hover="fillup"] .sc__btn::before{transform:scaleY(0); transform-origin:center bottom}
.sc__ly.is-button[data-hover^="fill"]:hover .sc__btn::before{transform:scale(1)}
.sc__ly.is-button[data-hover="shine"] .sc__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; pointer-events:none;
}
.sc__ly.is-button[data-hover="shine"]:hover .sc__btn::before{left:120%}
.sc__ly.is-button[data-hover="ring"] .sc__btn::after{
	content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
	border:var(--bw,1px) solid var(--hbd,#fff); opacity:0;
	transition:transform .35s ease, opacity .35s ease;
}
.sc__ly.is-button[data-hover="ring"]:hover .sc__btn::after{transform:scale(1.14); opacity:1}
.sc__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;
}
.sc__ico.is-before{margin-right:.4em}
.sc__ico.is-after{margin-left:.4em}
.sc__ly[data-ihover="show"] .sc__ico,
.sc__ly[data-ihover="slide"] .sc__ico{max-width:0; margin:0; opacity:0; overflow:hidden}
.sc__ly[data-ihover="show"]:hover .sc__ico,
.sc__ly[data-ihover="slide"]:hover .sc__ico{max-width:2.5em; opacity:1}
.sc__ly[data-ihover="show"]:hover .sc__ico.is-before,
.sc__ly[data-ihover="slide"]:hover .sc__ico.is-before{margin-right:.4em}
.sc__ly[data-ihover="show"]:hover .sc__ico.is-after,
.sc__ly[data-ihover="slide"]:hover .sc__ico.is-after{margin-left:.4em}
.sc__ly[data-ihover="slide"] .sc__ico.is-before{--ico-hx:-.6em}
.sc__ly[data-ihover="slide"] .sc__ico.is-after{--ico-hx:.6em}
.sc__ly[data-ihover="slide"]:hover .sc__ico{--ico-hx:0px}
.sc__ly[data-ihover="move"]:hover .sc__ico.is-before{--ico-hx:-.25em}
.sc__ly[data-ihover="move"]:hover .sc__ico.is-after{--ico-hx:.25em}

/* 조작 요소의 자리 */
.sc__spot{
	position:absolute; z-index:6; pointer-events:none;
	left:var(--sp-l,auto); right:var(--sp-r,auto); top:var(--sp-t,auto); bottom:var(--sp-b,auto);
	transform:var(--sp-tf,none);
}
.sc__spot > *{pointer-events:auto}
/* 본문 기준은 본문 폭의 왼쪽 끝에서 잰다. 좌우 여백까지 더해야 글과 같은 선에 선다 */
.sc__spot.is-content{
	--edge:calc((100% - min(100%, var(--wrap,1200px))) / 2 + 2rem);
	left:calc(var(--edge) + var(--sp-l,0px));
}
.sc__spot.is-content.is-right{left:auto; right:calc(var(--edge) + var(--sp-r,0px))}

@media (max-width:1199px){
	.sc__spot{left:var(--spm-l,var(--sp-l,auto)); right:var(--spm-r,var(--sp-r,auto));
		top:var(--spm-t,var(--sp-t,auto)); bottom:var(--spm-b,var(--sp-b,auto));
		transform:var(--spm-tf,var(--sp-tf,none))}
	.sc__spot.is-content{
		--edge:calc((100% - min(100%, var(--wrap,1200px))) / 2 + 1.25rem);
		left:calc(var(--edge) + var(--spm-l,var(--sp-l,0px)));
	}
	.sc__spot.is-content.is-right{left:auto; right:calc(var(--edge) + var(--spm-r,var(--sp-r,0px)))}
}

/* 화면 점 */
.sc .sc__dots.swiper-pagination{
	position:relative; inset:auto; width:auto; transform:none;
	display:flex; align-items:center; gap:.5rem; line-height:0;
}
.sc__dots .swiper-pagination-bullet{
	width:var(--page-len); height:var(--page-thick); margin:0;
	border-radius:var(--page-round); background:var(--page-off); opacity:1;
	transition:width .45s cubic-bezier(.22,1,.36,1), background-color .4s ease;
}
.sc__dots .swiper-pagination-bullet-active{
	width:var(--page-len-on); height:var(--page-thick-on);
	border-radius:var(--page-round-on); background:var(--page-on); transform:none;
}

/* 남은 시간 고리 */
/* 남은 시간 표시입니다. 모양은 is-style-ring · is-style-bar · is-style-full
   가운데에서 선택하시며, is-m-style-* 는 모바일 화면에 적용됩니다 */
.sc__timer{display:block; overflow:hidden}
.sc__timer > i{display:block; height:100%; width:calc(var(--p,0) * 100%); background:var(--timer-color)}
.sc__timer svg{display:none}
.sc__timer circle{fill:none; stroke-width:var(--timer-w)}
.sc__timer-bg{stroke:rgba(255,255,255,.28)}
.sc__timer-fg{
	stroke:var(--timer-color); stroke-linecap:round;
	stroke-dasharray:100.53; stroke-dashoffset:calc(100.53 * (1 - var(--p,0)));
}
.sc__timer.is-style-ring{width:var(--timer-size); height:var(--timer-size); overflow:visible; background:none}
.sc__timer.is-style-ring > i{display:none}
.sc__timer.is-style-ring svg{display:block; width:100%; height:100%; transform:rotate(-90deg)}
.sc__timer.is-style-bar{width:var(--timer-len,140px); height:var(--timer-w); background:rgba(255,255,255,.28)}
.sc__timer.is-style-full{width:100%; height:var(--timer-w); background:rgba(255,255,255,.22)}

/* 띠를 화면 폭 전체로 두는 모양은 지정한 좌표 대신 위나 아래 끝에 붙습니다 */
.sc__spot--timer.is-bleed-bottom{left:0; right:0; top:auto; bottom:0; transform:none}
.sc__spot--timer.is-bleed-top{left:0; right:0; top:0; bottom:auto; transform:none}

@media (max-width:1199px){
	.sc__timer.is-m-style-ring{width:var(--timer-size); height:var(--timer-size); overflow:visible; background:none}
	.sc__timer.is-m-style-ring > i{display:none}
	.sc__timer.is-m-style-ring svg{display:block; width:100%; height:100%; transform:rotate(-90deg)}
	.sc__timer.is-m-style-bar{width:var(--timer-len,140px); height:var(--timer-w); overflow:hidden; background:rgba(255,255,255,.28)}
	.sc__timer.is-m-style-bar > i{display:block}
	.sc__timer.is-m-style-bar svg{display:none}
	.sc__timer.is-m-style-full{width:100%; height:var(--timer-w); overflow:hidden; background:rgba(255,255,255,.22)}
	.sc__timer.is-m-style-full > i{display:block}
	.sc__timer.is-m-style-full svg{display:none}
	.sc__spot--timer.is-m-bleed-bottom{left:0; right:0; top:auto; bottom:0; transform:none}
	.sc__spot--timer.is-m-bleed-top{left:0; right:0; top:0; bottom:auto; transform:none}
}

/* 화살표와 재생 버튼 */
.sc__nav,
.sc__play{
	display:flex; align-items:center; justify-content:center; padding:0;
	border:var(--nav-bw) solid var(--nav-bd); border-radius:50%;
	background:transparent; cursor:pointer; line-height:1;
	transition:opacity .2s ease, transform .2s ease;
}
.sc__nav{width:var(--nav-size); height:var(--nav-size); color:var(--nav-color);
	font-size:calc(var(--nav-size) * .62)}
.sc__play{width:var(--play-size); height:var(--play-size); color:var(--play-color);
	font-size:calc(var(--play-size) * .46)}
.sc__nav:hover,
.sc__play:hover{opacity:.7}
.sc__nav:active,
.sc__play:active{transform:scale(.92)}
.sc__nav.swiper-button-disabled{opacity:.3; cursor:default}

/* PC 와 모바일 가운데 한쪽에서만 사용하는 조작 요소 */
@media (max-width:1199px){ .sc .is-off-m{display:none !important} }
@media (min-width:1200px){ .sc .is-off-pc{display:none !important} }

/* 화살표. 마우스를 올리셨을 때 나타나며, is-always 를 붙이면 늘 표시됩니다 */
.sc__spot--navs{
	display:flex; align-items:center; gap:var(--nav-gap,12px);
	opacity:0; visibility:hidden;
	transition:opacity .22s ease, visibility 0s .22s;
}
.sc:hover .sc__spot--navs,
.sc:focus-within .sc__spot--navs,
.sc__spot--navs.is-always{opacity:1; visibility:visible; transition-delay:0s}

/* 자리를 직접 지정하지 않으신 경우의 위치입니다 */
.sc__spot--navs.is-pos-bottom-left{left:1.75rem; right:auto; top:auto; bottom:1.75rem; transform:none}
.sc__spot--navs.is-pos-bottom-right{left:auto; right:1.75rem; top:auto; bottom:1.75rem; transform:none}
.sc__spot--navs.is-pos-bottom-center{left:50%; right:auto; top:auto; bottom:1.75rem; transform:translateX(-50%)}
.sc__spot--navs.is-pos-side{
	left:1.25rem; right:1.25rem; top:50%; bottom:auto; transform:none;
	margin-top:calc(var(--nav-size,44px) / -2);
	justify-content:space-between;
}
.sc__spot--navs.is-pos-side .sc__nav--prev:hover{transform:translateX(-3px)}
.sc__spot--navs.is-pos-side .sc__nav--next:hover{transform:translateX(3px)}
@media (max-width:1199px){
	.sc__spot--navs.is-m-pos-bottom-left{left:1.25rem; right:auto; top:auto; bottom:1.25rem; transform:none}
	.sc__spot--navs.is-m-pos-bottom-right{left:auto; right:1.25rem; top:auto; bottom:1.25rem; transform:none}
	.sc__spot--navs.is-m-pos-bottom-center{left:50%; right:auto; top:auto; bottom:1.25rem; transform:translateX(-50%)}
	.sc__spot--navs.is-m-pos-side{
		left:.75rem; right:.75rem; top:50%; bottom:auto; transform:none;
		margin-top:calc(var(--nav-size,44px) / -2);
		justify-content:space-between;
	}
}

/* 요소가 나타나고 물러나는 효과 */
.sc__mo.is-anim{animation-duration:800ms; animation-fill-mode:both}
.sc__mo.is-fadeinup{animation-name:scFadeInUp}
@keyframes scFadeInUp{from{opacity:0; transform:translate3d(0,var(--ad,100%),0)}to{opacity:1; transform:translate3d(0,0,0)}}
.sc__mo.is-fadeoutdown{animation-name:scFadeOutDown}
@keyframes scFadeOutDown{from{opacity:1; transform:translate3d(0,0,0)}to{opacity:0; transform:translate3d(0,var(--ado,100%),0)}}

@media (prefers-reduced-motion:reduce){
	.sc__mo{animation:none !important}
}