/* ⑰ 업종변경 창업비 — 어두운 초록 커튼 + FRANCHISE 흐르는 띠 (시안 y 15858~16433, 띠는 아래 ⑱ 카드 위로 80px 겹침) */
.s17 {
  --s17-bg: #041006;
  --s17-line: rgba(255, 255, 255, .2);
  background: var(--s17-bg) url(../assets/s17/curtain.jpg) center bottom / 1920px auto repeat-x;
  color: var(--c-white);
  text-align: center;
  overflow: visible;          /* 띠가 아래 카드 위로 걸쳐 보이도록 */
  z-index: 3;
}
/* 배경 영상(10-27 힉스필드 53번 커튼 조명): 글 뒤에 깔고, 영상이 없거나 줄임 동작이면 포스터 → 그 아래 curtain.jpg 가 대신한다 */
.s17 > .loopv { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; pointer-events: none; }
.s17-in { position: relative; }
.s17-title { display: flex; flex-direction: column; align-items: center; letter-spacing: -0.06em; }
.s17-title > span { display: block; }
.s17-gold { color: var(--c-khaki); }
.s17-white { color: var(--c-white); }
.s17-line { display: block; width: 1px; margin: 0 auto; background: var(--s17-line); transform-origin: top center; }
.js .s17-line.in { animation: s17-grow .9s cubic-bezier(.3,.7,.2,1) .2s both; }
@keyframes s17-grow { from { transform: scaleY(0); } to { transform: none; } }
.s17-body { font-weight: 500; letter-spacing: -0.06em; color: var(--c-white); }

/* 검정 둥근 띠 + 흐르는 글자 */
.s17 .s17-band {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  background: #000;
}
.s17-clip { overflow: hidden; height: 100%; border-radius: inherit; }
.s17-track { display: flex; width: max-content; animation: s17-flow 20s linear infinite; }
.s17-unit { display: flex; align-items: center; flex: none; }
.s17-word { font: 900 72px/1 var(--f-body); letter-spacing: 0; color: var(--c-khaki); white-space: nowrap; }
.s17-pot { flex: none; max-width: none; }
@keyframes s17-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.s17-band:hover .s17-track { animation-play-state: paused; }

/* ---------- PC: 시안 좌표 ---------- */
@media (min-width: 1280px) {
  .s17 { height: 575px; }
  .s17-in { padding-top: 137px; }
  .s17-title { font-size: 62px; line-height: 73.5px; }
  .s17-line { height: 53px; margin-top: 29px; }
  .s17-body { margin-top: 33px; font-size: 24px; line-height: 37.5px; }
  .s17-band { top: 528px; width: 797px; height: 127px; border-radius: 30px; }
  .s17-track { margin-left: -47px; }
  .s17-unit { height: 127px; }
  .s17-pot { width: 147px; height: 110px; margin: 0 25px 0 33px; }
  .s17-word { width: 377px; text-align: left; }
}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1279px) {
  .s17 { padding: clamp(56px, 9vw, 110px) 0 calc(clamp(64px, 11vw, 110px) / 2 + 40px); background-size: cover; }
  .s17-in { padding: 0 16px; }
  .s17-title { font-size: clamp(28px, 6.6vw, 56px); line-height: 1.22; }
  .s17-line { height: clamp(30px, 5vw, 50px); margin-top: clamp(18px, 3vw, 28px); }
  .s17-body { margin-top: clamp(16px, 3vw, 28px); font-size: clamp(15px, 3.4vw, 22px); line-height: 1.6; }
  .s17-band { top: calc(100% - clamp(64px, 11vw, 110px) / 2); width: min(797px, calc(100% - 32px)); height: clamp(64px, 11vw, 110px); border-radius: clamp(16px, 3vw, 28px); }
  .s17-unit { height: clamp(64px, 11vw, 110px); }
  .s17-word { font-size: clamp(38px, 7.2vw, 64px); }
  .s17-pot { width: clamp(76px, 13vw, 128px); height: auto; margin: 0 clamp(14px, 2.4vw, 24px); }
}
@media (max-width: 768px) {
  .s17-title > span { max-width: 13em; }
}