/* 메인 히어로 인트로: 자전거 3대가 끽끽끽 들어오는 영상 + 글자 띠용 */
.hero-art .hero-video{position:absolute;left:1%;top:73px;width:106%;height:auto;mix-blend-mode:multiply;z-index:1;mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 94%,transparent 100%)}
.hero-kin{position:absolute;left:6%;top:36px;z-index:4;pointer-events:none;text-align:left}
.hero-kin p{margin:0;display:flex;flex-wrap:wrap;gap:0 12px}
.hero-kin .k1 span{font:900 40px/1.15 'Noto Sans KR',sans-serif;letter-spacing:-1.5px;color:#1f1c18;display:inline-block;opacity:0;transform:scale(.2) rotate(-8deg);transform-origin:50% 80%}
.hero-kin .k1 span.hl{color:#ff7a1a}
.hero-kin .k2{margin-top:8px}
.hero-kin .k2 span{font:900 24px/1.2 'Noto Sans KR',sans-serif;letter-spacing:-.6px;color:#3d3a34;display:inline-block;opacity:0;transform:scale(.2);background:#eac559;border:3px solid #1f1c18;border-radius:14px;padding:6px 14px;box-shadow:4px 4px 0 #1f1c18}
.hero-kin .k2 b{color:#1f1c18}
.hero-kin span.pop{animation:tteeyong .55s cubic-bezier(.2,1.6,.4,1) forwards}
.hero-kin .k2 span.pop{animation-name:tteeyong2}
@keyframes tteeyong{0%{opacity:0;transform:scale(.2) rotate(-8deg)}55%{opacity:1;transform:scale(1.35) rotate(4deg)}75%{transform:scale(.9) rotate(-2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes tteeyong2{0%{opacity:0;transform:scale(.2) rotate(6deg)}60%{opacity:1;transform:scale(1.18) rotate(-3deg)}80%{transform:scale(.95)}100%{opacity:1;transform:scale(1) rotate(-2deg)}}
@media(max-width:900px){.hero-kin{top:10px;left:4%}.hero-kin .k1 span{font-size:26px}.hero-kin .k2 span{font-size:16px;padding:4px 10px}}
/* 2026-09-27: 영상 오른쪽 경계가 제목 옆에 세로 띠로 보이던 문제 — 배경 순백 보정 + 오른쪽 끝 페이드 */
.hero-art .hero-video{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 94%,transparent 100%),linear-gradient(to right,#000 78%,transparent 99%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 94%,transparent 100%),linear-gradient(to right,#000 78%,transparent 99%);mask-composite:intersect}