/* 온 갤러리 슬라이더 */
.ongs{--ongs-w:310px;--ongs-ar:310 / 426;--ongs-gap:30px;--ongs-drop:50px;--ongs-r:12px;--ongs-pc:#1f5eff;
	position:relative;outline:0;-webkit-font-smoothing:antialiased;word-break:keep-all;color:#111}
.ongs *,.ongs *::before,.ongs *::after{box-sizing:border-box}
.ongs .ongs-in{display:grid;grid-template-columns:minmax(240px,30%) minmax(0,1fr);gap:clamp(36px,5vw,90px);align-items:center}

/* 왼쪽 머리말 */
.ongs .ongs-head{min-width:0}
.ongs .ongs-eye{margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:.08em;line-height:1.2;color:var(--ongs-pc);text-transform:uppercase}
.ongs .ongs-title{border:0;background:none;text-transform:none;margin:0;padding:0;font-size:clamp(28px,2.4vw,36px);font-weight:600;line-height:1.3;letter-spacing:-.04em;color:#111}
.ongs .ongs-desc{margin:22px 0 0;font-size:16px;line-height:1.8;color:#444;letter-spacing:-.02em}
.ongs .ongs-dots{display:flex;gap:9px;margin:44px 0 0}
.ongs .ongs-dots button{width:9px;height:9px;margin:0;padding:0;border:0;border-radius:50%!important;background:#d7d7d7;cursor:pointer;transition:background .3s,transform .3s}
.ongs .ongs-dots button:hover{background:#999}
.ongs .ongs-dots button.is-on{background:#111;transform:scale(1.15)}
.ongs .ongs-btn{display:inline-flex;align-items:center;gap:14px;margin:56px 0 0;height:54px;padding:0 24px 0 28px;border-radius:27px!important;background:#1c1c1c;color:#fff!important;
	font-size:15px;font-weight:600;letter-spacing:-.02em;text-decoration:none!important;transition:background .2s,gap .2s}
.ongs .ongs-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ongs .ongs-btn:hover{background:var(--ongs-pc);gap:18px}
.ongs .ongs-dots+.ongs-btn{margin-top:56px}

/* 오른쪽 카드 */
.ongs .ongs-vp{position:relative;min-width:0;overflow:hidden;touch-action:pan-y}
.ongs .ongs-track{position:relative;display:flex;align-items:flex-start;gap:var(--ongs-gap);padding-bottom:var(--ongs-drop);will-change:transform}
.ongs:not(.is-ready) .ongs-track{opacity:0}
.ongs.is-drag .ongs-track{cursor:grabbing}
.ongs .ongs-item{position:relative;flex:0 0 var(--ongs-w);width:var(--ongs-w);aspect-ratio:var(--ongs-ar);transform:translateY(var(--ongs-drop));
	transition:transform .75s cubic-bezier(.22,.7,.18,1)}
.ongs .ongs-card{position:absolute;inset:0;display:block;overflow:hidden;border-radius:var(--ongs-r)!important;background:#e9e9e9;color:#fff!important;text-decoration:none!important;
	-webkit-mask-image:-webkit-radial-gradient(white,black)}
.ongs .ongs-img{position:absolute;inset:0;background:#d9d9d9 center/cover no-repeat;transition:transform 1.1s cubic-bezier(.22,.7,.18,1)}
.ongs .ongs-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.08) 45%,rgba(0,0,0,.22) 100%);transition:background .6s}
.ongs .ongs-body{position:absolute;left:0;right:0;top:0;z-index:1;display:block;padding:clamp(20px,2vw,28px) clamp(18px,1.8vw,24px) 0;opacity:.6;transition:opacity .6s}
.ongs .ongs-ctitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:20px;font-weight:600;line-height:1.45;letter-spacing:-.03em;color:#fff}
.ongs .ongs-cdesc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:14px;font-size:14px;font-weight:500;line-height:1.65;letter-spacing:-.02em;color:rgba(255,255,255,.95)}
.ongs .ongs-date{position:absolute;left:clamp(18px,1.8vw,24px);bottom:clamp(20px,2vw,26px);z-index:1;font-size:14px;font-weight:500;letter-spacing:0;color:#fff;opacity:.6;transition:opacity .6s}

/* 맨 앞 카드 */
.ongs .ongs-item.is-on{transform:none;z-index:2}
.ongs .ongs-item.is-on .ongs-card::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.38) 50%,rgba(0,0,0,.5) 100%)}
.ongs .ongs-item.is-on .ongs-body,.ongs .ongs-item.is-on .ongs-date{opacity:1}
a.ongs-card:hover .ongs-img{transform:scale(1.05)}

.ongs.is-jump .ongs-item,.ongs.is-jump .ongs-card::after,.ongs.is-jump .ongs-body,.ongs.is-jump .ongs-date{transition:none!important}

@media (max-width:900px){
	.ongs .ongs-in{grid-template-columns:1fr;gap:30px}
	.ongs .ongs-eye{margin-bottom:8px;font-size:12.5px}
	.ongs .ongs-title{font-size:24px}
	.ongs .ongs-desc{margin-top:12px;font-size:14px;line-height:1.7}
	.ongs .ongs-head{display:flex;flex-wrap:wrap;align-items:center}
	.ongs .ongs-head>.ongs-eye,.ongs .ongs-head>.ongs-title,.ongs .ongs-head>.ongs-desc{flex:0 0 100%}
	.ongs .ongs-dots{flex:1 1 auto;margin-top:22px;gap:7px}
	.ongs .ongs-dots button{width:7px;height:7px}
	.ongs .ongs-btn,.ongs .ongs-dots+.ongs-btn{flex:0 0 auto;margin:22px 0 0 auto;height:40px;padding:0 14px 0 16px;gap:8px;font-size:12.5px}
	.ongs .ongs-btn svg{width:13px;height:13px}
	.ongs .ongs-track{gap:min(var(--ongs-gap),14px);padding-bottom:min(var(--ongs-drop),28px)}
	.ongs .ongs-item{flex-basis:min(66vw,300px);width:min(66vw,300px);transform:translateY(min(var(--ongs-drop),28px))}
	.ongs .ongs-ctitle{font-size:16px}
	.ongs .ongs-cdesc{margin-top:8px;font-size:12.5px}
	.ongs .ongs-date{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.ongs .ongs-item,.ongs .ongs-img,.ongs .ongs-card::after,.ongs .ongs-body,.ongs .ongs-date{transition:none!important}}