/* 온 포커스 슬라이더 */
.onfs{--onfs-w:480px;--onfs-ar:1 / 1;--onfs-gap:30px;--onfs-lift:50px;--onfs-r:40px;--onfs-rs:10px;--onfs-pc:#1f5eff;--onfs-bgc:#f3f3f3;
	position:relative;overflow:hidden;padding:0 0 48px;outline:0;-webkit-font-smoothing:antialiased;word-break:keep-all}
.onfs *,.onfs *::before,.onfs *::after{box-sizing:border-box}
.onfs .onfs-bgtext{position:absolute;left:50%;top:-.12em;transform:translateX(-50%);z-index:0;white-space:nowrap;pointer-events:none;user-select:none;
	font-size:clamp(90px,13vw,220px);font-weight:900;line-height:1;letter-spacing:.02em;color:var(--onfs-bgc);text-transform:uppercase}
.onfs.has-bg{padding-top:clamp(36px,5.6vw,96px)}
.onfs .onfs-vp{position:relative;z-index:1;touch-action:pan-y}
.onfs .onfs-track{position:relative;display:flex;align-items:flex-start;gap:var(--onfs-gap);padding-top:var(--onfs-lift);will-change:transform}
.onfs:not(.is-ready) .onfs-track{opacity:0}
.onfs.is-single .onfs-track{justify-content:center}
.onfs.is-drag .onfs-track{cursor:grabbing}

.onfs .onfs-item{position:relative;flex:0 0 var(--onfs-w);width:var(--onfs-w);aspect-ratio:var(--onfs-ar);
	transition:transform .75s cubic-bezier(.22,.7,.18,1)}
.onfs .onfs-card{position:absolute;inset:0;overflow:hidden;border-radius:var(--onfs-rs)!important;background:#1b1d22;
	transition:border-radius .75s cubic-bezier(.22,.7,.18,1);-webkit-mask-image:-webkit-radial-gradient(white,black)}
.onfs .onfs-img{position:absolute;inset:-12px;background:#2a2d33 center/cover no-repeat;filter:brightness(.5);transform:scale(1.04);
	transition:filter .75s ease,transform 1.2s ease}
.onfs.is-blur .onfs-img{filter:blur(4px) brightness(.5)}
.onfs .onfs-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.28));pointer-events:none}
.onfs .onfs-body{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 9%;text-align:center;color:#fff;pointer-events:none}
.onfs .onfs-label{margin:0;font-size:15px;font-weight:700;letter-spacing:.01em;line-height:1.2;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.onfs .onfs-bar{display:block;width:1px;height:26px;margin:14px 0 12px;background:rgba(255,255,255,.75);opacity:0;transform:scaleY(0);transform-origin:top;transition:opacity .5s .05s,transform .5s .05s}
.onfs .onfs-title{border:0;background:none;text-transform:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;margin:0;font-size:clamp(26px,2.6vw,40px);font-weight:700;line-height:1.25;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.onfs .onfs-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:14px 0 0;max-width:420px;font-size:15.5px;font-weight:400;line-height:1.65;color:rgba(255,255,255,.92);opacity:0;transform:translateY(10px);transition:opacity .5s .1s,transform .5s .1s}
.onfs .onfs-cover{position:absolute;inset:0;z-index:2}

/* 가운데 카드 */
.onfs .onfs-item.is-on{transform:translateY(calc(var(--onfs-lift) * -1));z-index:2}
.onfs .onfs-item.is-on .onfs-card{border-radius:var(--onfs-r)!important}
.onfs .onfs-item.is-on .onfs-img,.onfs.is-blur .onfs-item.is-on .onfs-img{filter:none;transform:scale(1)}
.onfs .onfs-item.is-on .onfs-card::after{background:linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,.48))}
.onfs .onfs-item.is-on .onfs-label,.onfs .onfs-item.is-on .onfs-desc{opacity:1;transform:none}
.onfs .onfs-item.is-on .onfs-bar{opacity:1;transform:none}
.onfs .onfs-item:not(.is-on) .onfs-cover{cursor:pointer}

/* + 버튼 */
.onfs .onfs-plus{position:absolute;left:50%;bottom:0;z-index:3;display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%!important;
	background:var(--onfs-pc);border:5px solid #fff;color:#fff;opacity:0;pointer-events:none;
	transform:translate(-50%,50%) scale(.6);transition:opacity .4s,transform .5s cubic-bezier(.3,1.4,.5,1),filter .2s}
.onfs .onfs-plus svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.onfs .onfs-item.is-on .onfs-plus{opacity:1;pointer-events:auto;transform:translate(-50%,50%) scale(1);transition-delay:.25s}
.onfs .onfs-plus:hover{filter:brightness(1.1)}
.onfs .onfs-plus:focus-visible{outline:2px solid var(--onfs-pc);outline-offset:3px}

/* 넘길 때 순간 이동 (끝없이 돌기) */
.onfs.is-jump .onfs-item,.onfs.is-jump .onfs-card,.onfs.is-jump .onfs-img,.onfs.is-jump .onfs-label,.onfs.is-jump .onfs-bar,.onfs.is-jump .onfs-desc,.onfs.is-jump .onfs-plus{transition:none!important}

@media (max-width:768px){
	.onfs{padding-bottom:40px}
	.onfs.has-bg{padding-top:34px}
	.onfs .onfs-bgtext{font-size:clamp(64px,22vw,120px)}
	.onfs .onfs-track{gap:min(var(--onfs-gap),16px);padding-top:min(var(--onfs-lift),30px)}
	.onfs .onfs-item{flex-basis:min(80vw,420px);width:min(80vw,420px)}
	.onfs .onfs-item.is-on{transform:translateY(calc(min(var(--onfs-lift),30px) * -1))}
	.onfs .onfs-label{font-size:12.5px}
	.onfs .onfs-bar{height:18px;margin:10px 0 9px}
	.onfs .onfs-title{font-size:24px}
	.onfs .onfs-desc{margin-top:10px;font-size:13px;line-height:1.6}
	.onfs .onfs-item.is-on .onfs-card{border-radius:min(var(--onfs-r),24px)!important}
	.onfs .onfs-plus{width:58px;height:58px;border-width:4px}
	.onfs .onfs-plus svg{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){.onfs .onfs-item,.onfs .onfs-card,.onfs .onfs-img,.onfs .onfs-label,.onfs .onfs-bar,.onfs .onfs-desc,.onfs .onfs-plus{transition:none!important}}