/* 嘉誼首頁 opt2・左側欄小綠人分頁點(10-24 demo 看過,Eric:「可以了」→ 併進主版;只在 1200 寬以上的側欄出現)
   10-24 第一版 = 左右交錯的 7 階樓梯;Eric 第二刀:「樓梯線改成圓點、排緊一點,跟分頁點一樣;到哪一個區塊,小綠人下面的點變成膠囊線;
   直上直下走;走到下一階,原本的線跑到小綠人上面變成點」→
   ・7 個圓點直排(= 首頁 7 個區塊,由上往下:首頁 → 交通位置),點 6、間距 10
   ・目前那一區的點拉成膠囊線(24 寬、客戶綠),小綠人站在膠囊上;膠囊上方多讓出 34 給小綠人(其他點往上下讓開)
   ・換區塊:小綠人直上直下走過去,舊膠囊縮回點、被讓到小綠人上面(往下捲)或下面(往上捲)
   ・滑過一個點浮出區塊名,點了跳過去;視窗矮於 700 時不放
   數字(點 6、間距 10、小綠人 34)opt2-stairs.js 也用到,要一起改 */
html body .o-body > .rail-l .rl-st { position: relative; flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; margin: var(--s-5) 0; min-height: 0; }   /* 10-24 Eric:「分頁點不要放中間,放在文字說明上方」→ 貼底,離下面「04 兒童早療」24 */
html body .o-body > .rail-l .rl-st + .rl-cur { margin-top: 0; }
html body .rl-st .st-col { --d: 500ms; position: relative; display: flex; flex-direction: column; align-items: center; }
html body .rl-st .st-t { position: relative; display: grid; place-items: center; width: 24px; height: 6px; margin: 10px 0 0; padding: 0; border: 0; background: none; cursor: pointer; transition: margin-top var(--d) cubic-bezier(.4, 0, .2, 1); }
html body .rl-st .st-t:first-child { margin-top: 0; }
html body .rl-st .st-t.on { margin-top: 44px; }              /* 間距 10 + 小綠人 34 */
html body .rl-st .st-t.on:first-child { margin-top: 34px; }  /* 第一個沒有上間距,只讓小綠人的高 → 整排高度永遠 136,不會跳 */
html body .rl-st .st-t::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #CECAC1; transition: width var(--d) cubic-bezier(.4, 0, .2, 1), background-color .3s; }
html body .rl-st .st-t::after { content: ""; position: absolute; inset: -5px -8px; }   /* 點只有 6,點按範圍放大 */
html body .rl-st .st-t:hover::before { background: var(--c-green); }
html body .rl-st .st-t.on::before { width: 24px; background: var(--c-green); }
html body .rl-st .st-t span { position: absolute; top: 50%; left: calc(100% + 40px); transform: translate(-4px, -50%); padding: 4px 12px; border-radius: var(--r-panel); background: #fff; color: var(--c-green-dk); font-size: var(--t-body); line-height: 1.5; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
html body .rl-st .st-t:is(:hover, :focus-visible) span { opacity: 1; transform: translate(0, -50%); }
html body .rl-st .st-gm { position: absolute; left: 50%; top: 0; width: 19.7px; height: 34px; margin-left: -9.85px; pointer-events: none; transition: top var(--d) cubic-bezier(.4, 0, .2, 1); }
html body .rl-st .st-gm img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
html body .rl-st .st-gm .w0 { opacity: 1; }
html body .rl-st .st-gm.gm-walk .w0 { opacity: 0; }
html body .rl-st .st-gm.gm-walk .w1 { animation: gmStep .4s linear infinite; }
html body .rl-st .st-gm.gm-walk .w2 { animation: gmStep .4s linear infinite -.2s; }
@media (prefers-reduced-motion: reduce) { html body .rl-st :is(.st-t, .st-t::before, .st-gm) { transition: none; } }
@media (max-height: 699px) { html body .o-body > .rail-l .rl-st { display: none; } }