（.isl__bg／.ai__bg）不受這條 reset 影響，
所以只有那兩段看不到色帶，其餘七段都有。找這個 bug 花了很久：
規則明明寫對了、computed width 卻不對，要一路查到全域 reset 才會發現。 */
/* ⚠️ 用 100%（相對段落）而不是 100vw／--bg-w。
`100vw` 與段落實際寬度會有落差——實測某些環境下 100vw 比段落寬度**小 8px**
（捲軸與 devicePixelRatio 的處理差異），算出來的圖寬剛好只等於段落寬，
再被 margin-left 左移就變成右邊短少 4px，露出段落底色一條直線。
段落本身是滿版的 block，用 100% 最可靠，也不受捲軸影響。
左右各多 4px 吸收次像素捨入。 */
/* ═══════════ 背景層（滿版到 --bg-w）═══════════
第 2～10 段：內容維持 --page-max 窄欄，背景滿版。
背景以 cover 填滿，等比放大、上下略有裁切——這幾段的背景都是抽象光束，
不像 KV 有綠色水晶那種會被切到的具體物件。
KV 則是整段滿版（含內容），比例完全正確、零裁切。 */
.ace__plate,
.fund__plate,.reels__plate,.unbox__plate,.howto__plate,.ftr__plate{
/* ⚠️ top:-1px / +1px 的重疊不能拿掉。
這幾段的底圖原本是 top:0 / height:100%，上下「剛好對接」。
捲動時 ScrollSmoother 會把內容放進合成圖層，位移到非整數像素那一瞬間，
兩張圖之間會露出不到 1px 的縫——縫裡透出來的是區段自己的 background，
在 ACE 段就是深藍 #0B1A6B，看起來就是一條黑線橫貫整個畫面。
讓後一段的底圖往上多蓋 1px，縫就不存在了（後段在 DOM 較後、疊在前段之上）。
另一道保險是把區段底色改成與底圖上下緣同色的漸層，見各 .sec--* 規則。 */
position:absolute; top:-1px; height:calc(100% + 1px);
left:-4px; width:calc(100% + 8px); max-width:none; margin-left:0;
object-fit:fill; z-index:0;
}
.sec--island{
position:relative; z-index:4;
/* ⚠️ 不要加 background —— 矩形底色會在 y900 畫出一條水平直線，
並且蓋掉第一段延伸下來的水晶方塊。形狀完全交給 .isl__bg 的向量遮罩。 */
/* 曲線遮罩要往上溢出蓋住 KV。
⚠️ 不要用 clip-path:inset(負值) 來「放行上方」——實測 Chrome 不會真的向外擴張繪製區，
反而會把溢出的部分切掉，造成交界出現橫向跳動。
這裡不需要任何裁切：遮罩容器涵蓋設計 y675–1560，下緣正好切齊區段底部，不會溢出到第三段。 */
overflow:visible;
}
.isl{
position:relative; z-index:5; width:100%; max-width:var(--page-max); margin-inline:auto;
aspect-ratio:1440/660; container-type:inline-size; overflow:hidden;
}
.isl > *{position:absolute}
/* ── 第 2 段背景：曲線形狀的向量遮罩 + 遮罩內視差 ──
那條曲線是 KV 群組遮罩的邊緣（設計稿兩端 y675、中央 y833，落差 158px）。
把它描成 CSS polygon() 當形狀遮罩，背景放在遮罩裡面 →
不需要「兩張底圖精準對齊」，也就不會出現橫向斷點。
polygon 是純 CSS、解析度無關、沒有圖檔可以載入失敗。 */
.isl__bg{
position:absolute; z-index:1;
top:-34.2424%; height:143.3333%; /* 涵蓋設計 y674–1620 */
left:-4px; width:calc(100% + 8px); max-width:none; margin-left:0;
overflow:hidden;
/* 上緣＝KV 曲線（設計 y674→832），下緣＝第二段底緣曲線（y1431→1588）。
兩條都是同一個橢圓，落差都是 157px。共 98 點。 */
clip-path:polygon(0.000% 0.000%, 2.083% 1.586%, 4.167% 2.960%, 6.250% 4.334%, 8.333% 5.603%, 10.417% 6.765%, 12.500% 7.822%, 14.583% 8.879%, 16.667% 9.725%, 18.750% 10.677%, 20.833% 11.416%, 22.917% 12.156%, 25.000% 12.896%, 27.083% 13.531%, 29.167% 14.059%, 31.250% 14.588%, 33.333% 15.011%, 35.417% 15.433%, 37.500% 15.751%, 39.583% 16.068%, 41.667% 16.279%, 43.750% 16.490%, 45.833% 16.596%, 47.917% 16.702%, 50.000% 16.702%, 52.083% 16.702%, 54.167% 16.596%, 56.250% 16.490%, 58.333% 16.279%, 60.417% 16.068%, 62.500% 15.751%, 64.583% 15.433%, 66.667% 15.011%, 68.750% 14.588%, 70.833% 14.059%, 72.917% 13.531%, 75.000% 12.896%, 77.083% 12.156%, 79.167% 11.416%, 81.250% 10.571%, 83.333% 9.725%, 85.417% 8.774%, 87.500% 7.822%, 89.583% 6.660%, 91.667% 5.497%, 93.750% 4.228%, 95.833% 2.960%, 97.917% 1.480%, 100.000% 0.000%, 100.000% 80.021%, 97.917% 81.501%, 95.833% 82.875%, 93.750% 84.249%, 91.667% 85.518%, 89.583% 86.681%, 87.500% 87.738%, 85.417% 88.795%, 83.333% 89.746%, 81.250% 90.592%, 79.167% 91.332%, 77.083% 92.178%, 75.000% 92.812%, 72.917% 93.446%, 70.833% 93.975%, 68.750% 94.503%, 66.667% 94.926%, 64.583% 95.349%, 62.500% 95.666%, 60.417% 95.983%, 58.333% 96.195%, 56.250% 96.406%, 54.167% 96.512%, 52.083% 96.617%, 50.000% 96.617%, 47.917% 96.617%, 45.833% 96.512%, 43.750% 96.406%, 41.667% 96.195%, 39.583% 95.983%, 37.500% 95.666%, 35.417% 95.349%, 33.333% 94.926%, 31.250% 94.503%, 29.167% 93.975%, 27.083% 93.446%, 25.000% 92.812%, 22.917% 92.178%, 20.833% 91.438%, 18.750% 90.592%, 16.667% 89.746%, 14.583% 88.795%, 12.500% 87.738%, 10.417% 86.681%, 8.333% 85.518%, 6.250% 84.249%, 4.167% 82.981%, 2.083% 81.501%, 0.000% 80.021%);
}
.isl__plate{
position:absolute; left:0; width:100%;
top:-12.0507%; height:120.5074%; /* 圖涵蓋設計 y560–1700 */
object-fit:fill; will-change:transform;
transform:translateY(var(--plate-y,0));
}
/* 遮罩之上的前景：PSD 的「群組 19」（台灣島＋三顆方塊＋文字）是 底 的兄弟層，
不受那個橢圓遮罩影響，設計稿裡島尖與綠方塊本來就壓在曲線下方的淺色底上。
因此把它從底圖裡拿掉、獨立成這一層放在遮罩外。
⚠️ 尺寸與涵蓋範圍必須與 .isl__plate 完全相同（設計 y560–1700、2400×1900），
但百分比的基準不同：.isl__plate 的容器是 .isl__bg（區段高的 143.3333%），
這一層的容器是 .sec--island 本身，所以同樣涵蓋 y560–1700 要換算成
top:(560-900)/660、height:1140/660。translateY 的 % 是以元素自身高度計算，
兩者實際高度都是 1140 設計 px，所以位移量仍然一致。 */
.isl__over{
position:absolute; z-index:2;
top:-51.5152%; height:172.7273%;
left:-4px; width:calc(100% + 8px); max-width:none; margin-left:0;
object-fit:fill; pointer-events:none;
will-change:transform; transform:translateY(var(--plate-y,0));
}
.isl__title{position:absolute; left:34.6528%; top:-0.6061%; width:30.4861%; margin:0; z-index:2}
.isl__title img{width:100%}
.isl__lead{
/* 容器比 FA 量測值寬 8px 並維持中心對齊，避免臨界換行 */
left:23.9583%; top:14.0909%; width:52.0139%; margin:0; z-index:2;
text-align:center; color:#fff; font-weight:700;
font-size:1.2604cqw; /* 18.15 / 1440 — 啟用 palt 後使第二行恰為 735px */
line-height:1.2948; /* 23.5 / 18.15 */
text-shadow:0 1px 6px rgba(20,10,60,.35);
}
/* 說明小字的顏色一律取自設計稿的「字心」（離背景最遠的 15% 像素，避開抗鋸齒邊緣）。
⚠️ 不要用 opacity 去模擬「淡淡的小字感」：設計稿這些字都是實色，
opacity 會讓字永遠追不到設計稿的濃度（實測 ACE 那條被淡化到 104，設計是 35），
在深色底上還會把字壓灰、看起來像沒對焦。 */
.isl__note{
font-family:var(--font-sys);
left:14.5139%; top:83.7879%; width:67.2222%; margin:0; z-index:2;
color:#fff; /* 設計稿字心 RGB(255,249,255) */
font-size:.8535cqw; /* 12.29 / 1440 — 啟用 palt 後使第一行恰為 959px */
line-height:1.2205; letter-spacing:.01em;
}
/* 手機（0928 稿）才有的中標、導言的手機版逗號、獨立台灣水晶：桌機一律隱藏 */
.isl__sub,.isl__tw,.isl__m{display:none}
.isl__cards{position:absolute; inset:0; margin:0; padding:0; list-style:none; z-index:3}
.isl-card{position:absolute; perspective:700px}
.isl-card__in{
width:100%; will-change:transform;
transition:filter .35s ease;
}
.isl-card img{width:100%}
.isl-card:hover .isl-card__in{
filter:drop-shadow(0 14px 30px rgba(60,20,160,.45)) brightness(1.06) saturate(1.05);
}
/* 依 FA 量測（v28 拆出的五段）*/
.isl-card--1{left:14.5139%; top:26.2724%; width:13.3307%; aspect-ratio:320/603}
.isl-card--2{left:28.8861%; top:27.7266%; width:13.2891%; aspect-ratio:319/587}
.isl-card--3{left:43.3832%; top:26.4542%; width:13.2891%; aspect-ratio:319/601}
.isl-card--4{left:57.7138%; top:24.9090%; width:13.3307%; aspect-ratio:320/618}
.isl-card--5{left:72.0859%; top:24.5455%; width:13.3307%; aspect-ratio:320/622}
/* ═══════════ 3. 站上AI大趨勢 ═══════════
版面基準：畫布 y 1560–2400（840 高）
圖表（含四個世代標註、機器人、立方體）為單一向量，整張使用 */
/* 區段 z-index 由上往下遞減（島 4 > AI 3 > 主動出擊 2 > KV 0），
每一段的曲線遮罩才能往下溢出、蓋住下一段。 */
/* ⚠️ 不要加 background —— 矩形底色會蓋住曲線以下、由 .act__plate 提供的深藍，
讓交界看起來變成一條齊平的直線。形狀完全交給 .ai__bg 的向量遮罩。 */
.sec--ai{position:relative; z-index:3}
.ai{
position:relative; z-index:5; width:100%; max-width:var(--page-max); margin-inline:auto; aspect-ratio:1440/840;
container-type:inline-size; overflow:hidden;
}
.ai > *{position:absolute}
/* ── 第 3/4 段交界：下緣曲線向量遮罩 ──
曲線取自 PSD「站上AI大趨勢」群組遮罩的下緣（兩側 y2302、中央 y2459），
中央比區段界線 y2400 還低 59px，所以遮罩容器必須溢出到第四段。
原本兩段各自烘一半，捲動時交界會出現一條明顯的橫切線。 */
.ai__bg{
position:absolute; z-index:1;
top:-19.0476%; height:138.0952%; /* 涵蓋設計 y1400–2560 */
left:-4px; width:calc(100% + 8px); max-width:none; margin-left:0;
overflow:hidden;
clip-path:polygon(0.000% 0.000%, 100.000% 0.000%, 100.000% 77.759%, 97.917% 78.966%, 95.833% 80.086%, 93.750% 81.207%, 91.667% 82.241%, 89.583% 83.190%, 87.500% 84.052%, 85.417% 84.914%, 83.333% 85.603%, 81.250% 86.379%, 79.167% 86.983%, 77.083% 87.586%, 75.000% 88.190%, 72.917% 88.707%, 70.833% 89.138%, 68.750% 89.569%, 66.667% 89.914%, 64.583% 90.259%, 62.500% 90.517%, 60.417% 90.776%, 58.333% 90.948%, 56.250% 91.121%, 54.167% 91.207%, 52.083% 91.293%, 50.000% 91.293%, 47.917% 91.293%, 45.833% 91.207%, 43.750% 91.121%, 41.667% 90.948%, 39.583% 90.776%, 37.500% 90.517%, 35.417% 90.259%, 33.333% 89.914%, 31.250% 89.569%, 29.167% 89.138%, 27.083% 88.707%, 25.000% 88.190%, 22.917% 87.672%, 20.833% 87.069%, 18.750% 86.379%, 16.667% 85.690%, 14.583% 84.914%, 12.500% 84.052%, 10.417% 83.190%, 8.333% 82.241%, 6.250% 81.207%, 4.167% 80.172%, 2.083% 78.966%, 0.000% 77.759%);
}
.ai__plate{position:absolute; inset:0; width:100%; height:100%; object-fit:fill}
/* 第四段底圖往上延伸到設計 y2280，替第三段曲線以下那塊提供深藍。
⚠️ 不要改用第三段內的蓋片 —— 那樣會蓋住第四段那三顆水晶方塊的上緣
（青色那顆從 y2345 起），出現一條水平切口。 */
.act__plate{
position:absolute; top:-6%; height:106%; /* 設計 y2280–4400 */
left:-4px; width:calc(100% + 8px); max-width:none; margin-left:0;
object-fit:fill; z-index:0;
}
.ai__title{left:34.4444%; top:9.7619%; width:31.0417%; margin:0; z-index:2}
.ai__title img{width:100%}
.ai__lead{
left:28.6806%; top:21.0714%; width:42.9861%; margin:0; z-index:2;
text-align:center; color:var(--ink); font-weight:700;
font-size:1.2653cqw; /* 18.22 / 1440 — 使第一行恰為 619px */
line-height:1.3172; /* 24 / 18.22 */
}
/* 手機（0928 稿）導言文案不同，桌機隱藏手機那份 */
.ai__m{display:none}
.ai__chart{left:14.4444%; top:25.2381%; width:70.9722%; margin:0; z-index:2}
.ai__chart > img{width:100%}
/* ── 三顆水晶方塊 ──
原本烘在 ai-chart 這張向量裡（PDF 內嵌影像 xref 87/88/89，同一顆 416×398
分別旋轉 4.9°/69.5°/171.7°）。已用 PyMuPDF 的 delete_image 從圖表移除、
單獨渲染成三張圖，好做進場與視差。
定位是相對 .ai__chart（設計 x208–1230 / y1772–2288），所以會跟著圖表一起縮放。
外層 span 負責捲動視差、內層 img 負責進場，兩個 transform 才不會互相覆蓋。 */
.ai__cube{position:absolute; display:block; pointer-events:none; z-index:3; will-change:transform}
.ai__cube img{width:100%; display:block; will-change:transform, opacity}
.ai__cube--pink {left:70.9801%; top: 3.1772%; width:7.8315%} /* 1001 稿：走勢改由左往右，三顆方塊位置跟著鏡像 */
.ai__cube--green{left:51.4222%; top:22.0451%; width:9.2751%}
.ai__cube--blue {left:30.9734%; top:25.3339%; width:8.8168%}
.ai__note{
font-family:var(--font-sys);
left:14.5139%; top:88.5714%; width:70.3472%; margin:0; z-index:2;
color:#292833; /* 設計稿字心 RGB(41,40,51) */
font-size:.8646cqw; /* 12.45 / 1440 — 使第一行恰為 1013px */
line-height:1.2450; letter-spacing:.01em;
}
/* ═══════════ 4. 玉山主動出擊 ═══════════
版面基準：畫布 y 2400–4400（2000 高）
三個內容區塊（數據卡／30年沿革／績效表）在 FA 裡各為單一向量，整塊使用 */
.sec--act{position:relative; z-index:2; background:#1B2A8C}
/* 手機（0928 稿）才有的績效輪播與六顆水晶，桌機一律隱藏 */
.act__mc{display:none}
.act{
position:relative; z-index:5; width:100%; max-width:var(--page-max); margin-inline:auto; aspect-ratio:1440/1874; /* 2026-09-29：30年經驗下方警語縮成一行，績效表以下上移 126 */
container-type:inline-size; overflow:hidden;
}
.act > *{position:absolute}
/* ── 三顆水晶方塊 ──
原本烘在 act-plate 裡（PSD 群組 31，三個各自獨立的 .ai 智慧型物件，
內嵌同一張 416×398 點陣）。拆出來後可以各自做視差，畫質也比壓在大圖裡好。
⚠️ 用全出血座標系（跟 act-plate 同尺度），不要改成內容欄座標——
綠色那顆設計上就掛在畫布左緣外（x−20），改成內容欄會整顆跑進留白區。
放在 .act 外面，因為青色那顆從 y2345 起、比區段頂端還高，
會被 .act 的 overflow:hidden 切掉。 */
/* z-index:6（高於 .act 的 5）：PSD 裡「群組 31」的水晶在「群組 32」內容區塊之上，
右下那顆粉色（設計 x1208–1335 y3574–3699）就是壓在時間軸白卡邊緣的。 */
.act__objs{
position:absolute; z-index:6; inset:0;
left:-4px; width:calc(100% + 8px); max-width:none; margin-left:0;
pointer-events:none;
}
.act__cube{position:absolute; display:block; will-change:transform}
.act__cube img{width:100%; display:block}
.act__cube--pink{left:11.5972%; top:4.3757%; width:8.8194%}
.act__cube--green{left:-1.3889%; top:22.0918%; width:10.0000%}
.act__cube--cyan{left:79.1667%; top:-2.9349%; width:18.1944%}
.act__cube--pink2{left:83.8889%; top:62.6467%; width:8.8194%}
/* 左下那顆大的在 PSD 裡位於「群組 33」之外、疊在整段最上層，設計上壓到第五段 8px */
.act__cube--cyan2{left:-3.0556%; top:88.9007%; width:15.2083%}
.act__title{left:23.6111%; top:7.8442%; width:52.7778%; margin:0; z-index:2}
.act__title img{width:100%}
.act__lead{
left:17.0833%; top:12.7535%; width:66.1111%; margin:0; z-index:2;
text-align:center; color:#fff; font-weight:700;
font-size:1.3389cqw; /* 19.28 / 1440 — 使單行恰為 952px */
line-height:1.3;
}
.act__block{margin:0; z-index:2; left:13.9583%; width:72.0833%}
.act__block img{width:100%}
.act__block--stats {top:17.1291%}
.act__block--timeline{top:44.7172%} /* 桌機 0928 稿 y3238 */
/* ── 30年沿革時間軸 ──
桌機 0928 稿改成分段色條，整張一張圖（act-timeline-0928.webp）；進場由左往右掃出（act.js timeline()）。
0922 的「9 塊 clip-path 分區＋曲線箭頭」已移除。
⚠️ .act__block img{width:100%} 的權重較高，所以這裡要用 .act__block--timeline 前綴。 */
.act__block--timeline{position:absolute}
.act__block--timeline .tl__base{width:100%; display:block}
/* 0404 素材：色條、文字與底框同一畫布，直接疊滿（act.js 控制掃出） */
.act__block--timeline .tl__bar,.act__block--timeline .tl__txt{position:absolute; inset:0; width:100%; display:block}
.act__block--funds {top:73.3191%; left:13.4722%; width:73.4722%} /* 桌機 0928 稿 x194 y3900 寬 1058 */
.act__note{
font-family:var(--font-sys);
margin:0; z-index:2; color:#fff; /* 設計稿字心 RGB(243,254,255) */
line-height:1.28; letter-spacing:.01em;
}
.act__note--1{left:14.5833%; top:41.7823%; width:63.8889%; font-size:.7924cqw} /* 0928 稿 y3183 */ /* 11.41px（系統字較寬，維持單行）*/
.act__note--2{left:14.5139%; top:70.2241%; width:70.9028%; font-size:.7674cqw; line-height:1.5086} /* 11.05px，系統字下 9 行 = 150px */
.act__note--3{left:14.5833%; top:92.4226%; width:70.9028%; font-size:.7716cqw} /* 11.11px（系統字較寬，維持單行）*/
/* ═══════════ 5. ACE王牌策略 ═══════════
版面基準：畫布 y 4400–7600（3200 高）
A/C/E 三張介紹卡各自合成（卡片 + 上方盤子），可依序進場並 hover */
.sec--ace{position:relative; background:linear-gradient(#043288,#A5DCFB)}
/* 手機（0928 稿）的 A／C／E 輪播，桌機隱藏 */
.ace__slider{display:none}
/* ── 曲速引擎圖層 ──
底圖上半本來就是放射狀光束。用結構張量解出它的放射中心在
left 45.75% / 該畫布 top 59.00%（設計 區段內 x659 y531），
在上面疊一層 canvas 畫由中心往外加速衝出的光條，讀起來就是曲速。
⚠️ 必須裁切在白卡上緣以上——中心點就在卡片頂點正上方約 20 設計px，
不裁的話光條會畫到淺色卡面上。曲線是從底圖的亮度分布描出來的。
mix-blend-mode:screen 讓光條與既有光束疊加而不是蓋住。 */
.ace__warp{
position:absolute; z-index:1; top:0; height:28.125%; /* 設計 區段內 y0–900 */
left:-4px; width:calc(100% + 8px); max-width:none; margin-left:0;
pointer-events:none; mix-blend-mode:screen; opacity:0;
/* 上緣＝第 4/5 段藍紋帶的下擺（它延伸進本段約 30 設計px，不裁光條會畫到它上面），
下緣＝白卡上緣。兩條都是從底圖描出來的；上緣因為會被亮條紋干擾，
額外做了穩健二次擬合才夠平滑。 */
clip-path:polygon(0.000% 1.099%, 2.083% 1.257%, 4.167% 1.409%, 6.250% 1.553%, 8.333% 1.691%, 10.417% 1.821%, 12.500% 1.945%, 14.583% 2.061%, 16.667% 2.171%, 18.750% 2.273%, 20.833% 2.369%, 22.917% 2.457%, 25.000% 2.539%, 27.083% 2.613%, 29.167% 2.681%, 31.250% 2.741%, 33.333% 2.795%, 35.417% 2.841%, 37.500% 2.881%, 39.583% 2.913%, 41.667% 2.939%, 43.750% 2.957%, 45.833% 2.969%, 47.917% 2.973%, 50.000% 2.971%, 52.083% 2.961%, 54.167% 2.945%, 56.250% 2.921%, 58.333% 2.891%, 60.417% 2.853%, 62.500% 2.809%, 64.583% 2.757%, 66.667% 2.699%, 68.750% 2.633%, 70.833% 2.561%, 72.917% 2.481%, 75.000% 2.395%, 77.083% 2.301%, 79.167% 2.201%, 81.250% 2.093%, 83.333% 1.979%, 85.417% 1.857%, 87.500% 1.729%, 89.583% 1.593%, 91.667% 1.450%, 93.750% 1.301%, 95.833% 1.144%, 97.917% 0.981%, 100.000% 0.816%, 100.000% 77.484%, 97.917% 77.019%, 95.833% 75.822%, 93.750% 74.424%, 91.667% 73.070%, 89.583% 71.813%, 87.500% 70.655%, 85.417% 69.578%, 83.333% 68.573%, 81.250% 67.652%, 79.167% 66.803%, 77.083% 66.008%, 75.000% 65.259%, 72.917% 64.573%, 70.833% 63.960%, 68.750% 63.411%, 66.667% 62.935%, 64.583% 62.548%, 62.500% 62.217%, 60.417% 61.928%, 58.333% 61.693%, 56.250% 61.510%, 54.167% 61.385%, 52.083% 61.338%, 50.000% 61.334%, 47.917% 61.345%, 45.833% 61.417%, 43.750% 61.555%, 41.667% 61.743%, 39.583% 61.982%, 37.500% 62.277%, 35.417% 62.634%, 33.333% 63.050%, 31.250% 63.523%, 29.167% 64.058%, 27.083% 64.664%, 25.000% 65.349%, 22.917% 66.099%, 20.833% 66.910%, 18.750% 67.770%, 16.667% 68.694%, 14.583% 69.705%, 12.500% 70.801%, 10.417% 71.983%, 8.333% 73.245%, 6.250% 74.587%, 4.167% 75.972%, 2.083% 77.164%, 0.000% 77.659%);
}
@media (prefers-reduced-motion:reduce){ .ace__warp{display:none} }
.ace{
position:relative; z-index:2; width:100%; max-width:var(--page-max); margin-inline:auto; aspect-ratio:1440/3200;
container-type:inline-size; overflow:hidden;
}
.ace > *{position:absolute}
.ace__title{left:26.1806%; top:3.9062%; width:45.9028%; margin:0; z-index:2}
.ace__title img{width:100%}
.ace__cards{position:absolute; inset:0; margin:0; padding:0; list-style:none; z-index:3}
.ace-card{position:absolute; perspective:800px}
.ace-card__in{width:100%; will-change:transform; transition:filter .35s ease}
.ace-card img{width:100%}
.ace-card:hover .ace-card__in{
filter:drop-shadow(0 16px 34px rgba(10,20,90,.5)) brightness(1.07) saturate(1.04);
}
/* 桌機 0928 稿（群組 25）：卡片一排＋上方盤子，切成三張（欄位空隙 x520–534、897–905）。
盤子由 PSB 的 PDF 向量以 2× 算圖，卡片用設計師 2× 轉出圖；透明底，疊在 ace-plate 上（底圖該處沒有盤子）。 */
.ace-card--a{left:10.2778%; top:13.5781%; width:26.3194%; aspect-ratio:758/877}
.ace-card--c{left:36.5972%; top:15.0000%; width:25.9722%; aspect-ratio:748/844}
.ace-card--e{left:62.5694%; top:13.2656%; width:26.2500%; aspect-ratio:756/913}
.ace__block{margin:0; z-index:2}
.ace__block img{width:100%}
.ace__block--a{left:13.8194%; top:28.3125%; width:78.4028%}
.ace__block--c{left:13.8889%; top:48.7500%; width:79.8611%}
.ace__block--e{left:13.8194%; top:74.1875%; width:76.1806%}
.ace__note{
font-family:var(--font-sys);
margin:0; z-index:2; color:#232F33; /* 設計稿字心 RGB(33,46,51) */
font-size:.8333cqw; /* 12px @1440 */
line-height:1.29; /* 2 行 = 31px */
letter-spacing:.01em;
}
.ace__note--a{left:15.4861%; top:50.4375%; width:68.5417%}
/* c 原本寬 13.125%（剛好塞下一行），系統字稍寬的裝置就會斷行。與 a、e 同寬，字級不變。 */
.ace__note--c{left:15.4861%; top:72.2188%; width:68.5417%; font-size:.7368cqw} /* 10.61px */
.ace__note--e{left:15.4861%; top:96.5000%; width:68.6806%}
/* ═══════════ 6. 00413A 基金卡 ═══════════
版面基準：桌機 0928 稿 y 7600–9460（1860 高；原 0922 為 7600–9100）
2026-09-29 依桌機 0928 稿改版：大標＋文案、新主卡（CSP 已修正）、底部標籤下移。
底圖由 0928 PSB 重新合成（含曲線調整、V 字底）。 */
.sec--fund{position:relative; background:linear-gradient(#A5DCFB,#FAEFFE)}
/* 手機（0928 稿）才有的大標圖與文案，桌機隱藏 */
.fund{
position:relative; width:100%; max-width:var(--page-max); margin-inline:auto; aspect-ratio:1440/1860;
container-type:inline-size; overflow:hidden;
}
.fund > *{position:absolute}
.fund__code{display:none} /* 0928 稿起「00413A」改在主卡膠囊列 */
.fund__title{left:10.5556%; top:12.9570%; width:78.4028%; margin:0; z-index:2} /* 1001 稿 x152 y7841 寬 1129 */
/* 文案：墨跡 x286–1121 y7942–7981、字級約 32；字級由實測寬度反推（見 HANDOFF） */
.fund__line{left:0; width:100%; top:20.9677%; margin:0; z-index:2; text-align:center; white-space:nowrap;
color:#323232; font-weight:700; font-size:2.5810cqw; line-height:1} /* 1001 稿字框寬 801（原 835） */
.fund__card{left:12.6875%; top:31.2903%; width:74.6250%; margin:0; z-index:2} /* 1001 稿 x121 y8142 寬 1194，客戶 10/1 要再小一點：縮 90%（寬 1075），中心點不變 */
.fund__tag {left:33.6111%; top:78.2796%; width:32.7778%; margin:0; z-index:2}
.fund__title picture{display:block}
.fund__title img,.fund__card img,.fund__tag img{width:100%; display:block}
/* 主卡換新圖後，0922 膠囊 LED 的遮罩對不上，關掉（底部標籤沒換圖，LED 保留） */
.fund__card .led{display:none}
/* ═══════════ 7. 影音區 ═══════════
版面基準：畫布 y 9100–9810（710 高）
FA 的影片框為 304 × 571.5（1:1.88），略高於 Reels 的 9:16（1:1.78）
→ 影片以 object-fit:cover 置入，維持原始比例不變形（左右微裁） */
[hidden]{display:none !important}
.sec--reels{position:relative; background:linear-gradient(#FAEFFE,#E0E5FE)}
/* 桌機：影片未提供，照客戶要求隱藏版位（原本用 HTML hidden，改成 CSS 才能讓手機單獨打開） */
.reels__plate--m{display:none}
.reels{
position:relative; width:100%; max-width:var(--page-max); margin-inline:auto; aspect-ratio:1440/690;
container-type:inline-size; overflow:hidden;
}
.reels > *{position:absolute}
/* 桌機：9:16 並排，高度沿用桌機稿影片框 572（y9507）。滑動按鈕只在手機出現。 */
.reels__slider{inset:0; z-index:2}
.reels__slides{position:absolute; inset:0}
.reels__slide{position:absolute; top:6.8116%; width:22.3611%; aspect-ratio:9/16;
border-radius:1.2cqw; overflow:hidden; background:#000; box-shadow:0 6px 24px rgba(60,40,120,.18)}
.reels__slide:nth-child(1){left:14.0972%} /* 1001：三支並排，比照桌機稿影音區 x203–1236（每支 322、間距 33） */
.reels__slide:nth-child(2){left:38.7500%}
.reels__slide:nth-child(3){left:63.4028%}
.reels__nav{display:none}
.reel__play{position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer; background:#000}
.reel__play img{width:100%; height:100%; object-fit:cover; display:block}
/* 播放鍵：CSS 畫的圓＋三角形，點下去才換成 YouTube 播放器 */
.reel__play::after{content:''; position:absolute; left:50%; top:50%; width:17%; aspect-ratio:1; transform:translate(-50%,-50%);
border-radius:50%; background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50%/55% no-repeat;
transition:transform .2s ease, background-color .2s ease}
.reel__play:hover::after{transform:translate(-50%,-50%) scale(1.08); background-color:rgba(230,33,23,.9)}
.reel__play:focus-visible{outline:3px solid #6B5BFF; outline-offset:-3px}
.reels__slide iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.reels__slide.is-playing .reel__play{display:none}
/* ═══════════ 8. 好料開箱・基金小檔案 ═══════════
版面基準：畫布 y 9810–12250（2440 高）
整段（10大持股表／配置圖／小檔案）在 FA 裡為單一向量，依客戶決定整張使用 */
.sec--unbox{position:relative; background:linear-gradient(#FAEFFE,#CADDFE)}
.unbox{
position:relative; width:100%; max-width:var(--page-max); margin-inline:auto; aspect-ratio:1440/2497;
container-type:inline-size; overflow:hidden;
}
.unbox > *{position:absolute}
.unbox__body{left:9.1667%; top:0; width:82.0833%; margin:0; z-index:2;
/* 桌機 0928 稿：表格加寬到 1182（x132），本體對齊表格；段落 y10150–12647（影音區隱藏，上緣漸變接第 6 段）。
下方各元件座標以本體（1182 × 2497）為基準。 */
aspect-ratio:1182/2497}
/* 標題與三張卡片各自獨立切圖。
⚠️ 卡1、卡2 的陰影是重建過的：原本壓在同一張 unbox-body 裡，
抹除烘死的說明小字時把陰影尾巴一起抹掉，在還有 13/255 濃度的地方硬切，
看起來就是一條斷層。現在從來源向量重算，陰影會自然收斂到 0。
卡3 設計稿本來就沒有陰影，維持原樣（客戶確認）。 */
.unbox__part{position:absolute; display:block}
.unbox__part--head{left:30.4569%; top:1.8022%; width:38.3249%}
.unbox__part--c1{left:0.0000%; top:10.6928%; width:100.0000%}
.unbox__part--c2{left:0.0000%; top:44.6135%; width:100.0000%}
.unbox__part--c3{left:0.0000%; top:72.8474%; width:100.0000%}
/* 好料開箱的三段說明小字（原本烘在 unbox-body 點陣裡，已抹除改用 HTML）。
⚠️ 座標相對 .unbox__body 這個 figure（設計 1056×2412），不是相對 .unbox；
但 cqw 的基準仍是 .unbox 的寬（設計 1440），因為容器查詢看的是最近的 container。 */
.unbox__note{
position:absolute; margin:0; z-index:3;
font-family:var(--font-sys);
color:#4C4747; letter-spacing:0;
}
/* a 原本寬 73.95%（為了湊設計稿的 3 行），右緣停在表格 3/4 處就折行，看起來很怪。
客戶要求說明小字與表格同寬：表格本體在 unbox-card-1 的不透明區 x24–2256／2347
→ left 1.023%、right 96.12%。 */
.unbox__note--a{left:0.0000%; top:40.0881%; width:99.7462%; font-size:.8750cqw; line-height:1.40} /* 12.6px @1440 */
/* 系統字較寬，b 的框比設計稿的 43.3% 放寬才維持單行 */
.unbox__note--b{left:0.2538%; top:70.5246%; width:99.4924%; font-size:.8750cqw; line-height:1.40}
.unbox__note--c{left:0.3384%; top:94.8338%; width:99.5770%; font-size:.7083cqw; line-height:1.36} /* 10.2px @1440，對齊設計稿 6 行 */
/* ═══════════ 9. 如何申購 ═══════════ 畫布 y 12250–13000（750 高）*/
.sec--howto{position:relative; background:linear-gradient(#CADDFE,#E7E6FE)}
/* 紫藍主視覺延伸到滿版。
這一段的結構是「淺色底圖（howto-plate）＋ 紫藍主視覺（howto-body）」，
而 howto-body 被 .howto 的 max-width 限制在 1600px，寬視窗下左右就露出淺色底。
把主視覺整張放大到滿版不行——裡面的卡片與文字會跟著變大。
改成在它下面墊一條同色的色帶：howto-body 的左右邊緣接近純色
（左 #7B4EBB、右 #6847B1，沿 y 的標準差只有 4–5），色帶左右各取一色，
中間的接縫正好被 howto-body 蓋住，所以看不到。
top／height 對齊 howto-body（top:2%、高 730／750＝97.33%），
上下仍保留 .sec--howto 漸層的淺色，與相鄰段落的過渡不受影響。 */
.sec--howto::before{
content:''; position:absolute; z-index:1; pointer-events:none;
/* 桌機 0928 稿：面板在區段頂端、高 730／750（原 0922 從 2% 起、高 97.33%，新面板較矮時色帶會從底下露出一條紫帶） */
left:0; right:0; top:0; height:100%;
/* 用「1px 寬的邊緣切片水平拉伸」而不是純色：
圖的左右邊緣沿 y 是會變化的（頂 #7041B3、中 #7C4FBC、底 #745590），
填單一純色的話上下兩端會差到 12/255，放大看就是一條明顯的接縫。
1px 切片拉寬後每一列都用該列自己的顏色，垂直變化完全吻合。
（邊緣取 x8–20 的平均，避開最外側 2–3px 的壓縮暗邊。） */
background:
url(../assets/img/howto-edge-l-0928.png) 0 0 / 50% 100% no-repeat,
url(../assets/img/howto-edge-r-0928.png) 100% 0 / 50% 100% no-repeat;
}
.howto{position:relative; width:100%; max-width:var(--page-max); margin-inline:auto; aspect-ratio:1440/730; /* 桌機 0928 面板高 730，段高對齊面板，頁尾直接接上 */
container-type:inline-size; overflow:hidden;}
.howto > *{position:absolute}
.howto__body{left:-0.3472%; top:0; width:100.7639%; margin:0; z-index:2} /* 桌機 0928 稿 x-5 y12647 寬 1451 */
.howto__body img{width:100%}
/* 三個 PDF 下載鈕（.howto__dl）*/
.howto__dl{position:absolute; z-index:3; display:block; border-radius:2cqw}
.howto__dl img{width:100%}
.howto__dl:focus-visible{outline:0.18cqw solid #2ECC8F; outline-offset:0.25cqw}
/* 桌機 0928 稿：按鈕已烘在整張 howto-body 裡（含修正後的「正式掛牌後」標籤）。
客戶 10/01：設計師給了「亮」版去背按鈕（howto-dl-hover-*-1001），
裡兩張圖：「正常」版一直顯示、把底圖的舊按鈕整個蓋掉；「亮」版 .howto__dl-on 平常透明，
hover（手機是按下）才顯示。形狀靠圖的 alpha，不會有方形遮罩。
位置用模板比對量自 howto-body（2x）：x250／1071／1891、y1114、寬 766／762／762。
hover 只在有滑鼠的裝置生效（hover:hover），避免手機點過後亮版卡住。 */
.howto__dl{-webkit-tap-highlight-color:transparent}
.howto__dl img{display:block; aspect-ratio:800/241}
.howto__dl .howto__dl-on{position:absolute; inset:0; opacity:0; transition:opacity .15s ease}
@media (hover:hover){ .howto__dl:hover .howto__dl-on{opacity:1} }
.howto__dl:active .howto__dl-on{opacity:1}
.howto__dl--1{left:8.3333%; top:76.3014%; width:26.5972%}
.howto__dl--2{left:36.8403%; top:76.3699%; width:26.4583%}
.howto__dl--3{left:65.3125%; top:76.3699%; width:26.4583%}
/* ═══════════ 10. 警語與公司資訊 ═══════════ 畫布 y 13000–13860（860 高）*/
.ftr{position:relative; background:linear-gradient(#E7E7FE,#F8EBFE)}
/* 高度從設計稿的 860 收到 750：警語改小字後只剩 378 設計px 高，
維持 860 會在警語與資訊列之間留下 244px 空白。底圖是純漸層（橫向標準差 3–6），
垂直壓縮 13% 完全看不出來，所以直接縮容器即可。 */
.ftr__in{position:relative; width:100%; max-width:var(--page-max); margin-inline:auto; aspect-ratio:1440/750;
container-type:inline-size; overflow:hidden;}
.ftr__in > *{position:absolute}
/* 警語：只是說明文字，字級刻意比設計稿（21px）小很多。
原本是單一 用
斷段，改成兩個
、段落間留白，好讀得多。 */
/* ⚠️ 定位／尺寸只給 footer 裡的本尊：Modal 的內容是從這裡 clone 過去的，
若把 left/width/cqw 寫在 .ftr__disclaimer 上，Modal 那份會被一起縮窄、字級也會
因為找不到 container 而算錯。共用的只有字色與段落間距。 */
.ftr__disclaimer{font-family:var(--font-sys); color:#4C4747; letter-spacing:0; margin:0; font-weight:700} /* 客戶 9/29：整段粗體（頁尾與進站彈窗） */
.ftr__in > .ftr__disclaimer{
left:6.6667%; top:3.4667%; width:88.0556%; z-index:2; /* 設計 y26，基準改成 750 */
font-size:1.0417cqw; line-height:1.72; /* 15px @1440 */
}
.ftr__disclaimer p{margin:0} /* 客戶 9/29 稿：段落直接換行、不空行（頁尾與彈窗一致） */
/* 警語的強調段落。顏色與分段完全比照手機版設計稿（_src/mobile/footer_runs.json）：
7 個樣式分段、兩種顏色 #4C4747／#3E52A6，換行位置在第 296 與 1103 字。 */
.ftr__hl{color:#3E52A6}
.ftr__muted{color:#8C8C8C} /* 客戶稿灰字：指數編製公司免責聲明 */
.ftr__disclaimer p:last-child{margin-bottom:0}
/* ── 頁尾資訊列：全寬 ──
原本是 1440 寬的切圖，客戶要求 100% 延伸。色帶都是純色（白 / #F6F6F6）所以直接用 CSS，
文字改系統字，只有社群圖示留切圖。
⚠️ 它是 .ftr 的直接子元素（不在 .ftr__in 裡），才能超出內容欄鋪滿整個寬度。
內部百分比的基準是這條 bar 自身（設計 1440×260）。 */
.ftr__bar{
position:absolute; left:0; width:100%; top:65.2000%; height:34.8000%; /* 設計 y489–750 */
z-index:2; font-family:var(--font-sys); background:#fff;
}
.ftr__bar::after{ /* 下半灰帶：設計 y177–260 */
content:''; position:absolute; left:0; right:0; top:68.077%; bottom:0;
background:#F6F6F6;
}
.ftr__rule{ /* 分隔線：設計 y122 */
position:absolute; left:0; right:0; top:46.92%; height:1px; background:#EDEDED;
}
.ftr__sns-row{ /* 圖示：設計 y20.4–80.4，間距 110.7 */
position:absolute; left:0; right:0; top:7.846%; height:23.077%;
display:flex; justify-content:center; align-items:center; gap:3.3%; z-index:1;
}
.ftr__sns{
display:flex; align-items:center; justify-content:center;
height:100%; aspect-ratio:1; transition:transform .25s ease;
/* 點擊熱區下限 44px（Apple HIG 44pt／Material 48dp）。
1600 版面下圖示本身就有 67px，但視窗縮到約 1000px 時會掉到 42px，
所以用 min-width/min-height 撐住熱區，圖示本身仍可跟著等比縮。 */
min-width:44px; min-height:44px;
}
.ftr__sns img{width:100%; height:100%; display:block}
.ftr__sns:hover{transform:scale(1.08)}
.ftr__contact{ /* 設計 y143–158 */
position:absolute; left:0; right:0; top:50.8%; margin:0; z-index:1;
text-align:center; color:#3A3A3A; line-height:1.4;
font-size:clamp(12px, 1.0417vw, 17px);
}
.ftr__contact i{font-style:normal; color:#CFCFCF; margin:0 1.5em}
.ftr__contact a{color:#1496C6; text-decoration:none}
.ftr__contact a:hover{text-decoration:underline}
.ftr__offices{ /* 設計 y200–239，兩行 */
position:absolute; left:0; right:0; top:74.2%; z-index:1;
display:flex; justify-content:space-around; align-items:flex-start;
color:#444; text-align:center; line-height:1.62;
font-size:clamp(11px, .9722vw, 16px);
}
.ftr__offices b{font-weight:700}
.ftr__offices span + span{margin-left:1.8em}
/* ───────── 尚未切版的段落（開發期佔位）───────── */
/* ───────── 漢堡選單（桌機隱藏，手機版才顯示） ───────── */
.hdr__burger{
display:none; flex-direction:column; justify-content:center; gap:min(12px,1.63vw);
width:min(48px,8.13vw); height:44px; min-width:44px; /* 熱區 ≥44px */
padding:0; background:none; border:0; cursor:pointer;
}
.hdr__burger i{
display:block; width:100%; height:min(13px,0.87vw); min-height:3px;
background:#009F98; border-radius:2px;
transition:transform .26s cubic-bezier(.2,.7,.3,1), opacity .18s ease;
}
.hdr.is-open .hdr__burger i:nth-child(1){transform:translateY(min(15px,2.5vw)) rotate(45deg)}
.hdr.is-open .hdr__burger i:nth-child(2){opacity:0}
.hdr.is-open .hdr__burger i:nth-child(3){transform:translateY(min(-15px,-2.5vw)) rotate(-45deg)}
.hdr__burger:focus-visible{outline:3px solid #009F98; outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){ .hdr__burger i{transition:none} }
/* ───────── 進站警語 Modal ───────── */
/* 配色與字級比照手機版 footer 警語；.ftr__hl 的強調色沿用同一條規則。 */
.wmod{
position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
/* iOS Safari 的 100vh 是「工具列收起」的高度，比實際可視區大 → 彈窗上下會被切。
dvh 會跟著工具列即時變動；舊瀏覽器退回 vh。安全區再擋瀏海／Home Indicator。 */
height:100vh; height:100dvh; box-sizing:border-box;
padding:
max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.wmod[hidden]{display:none}
.wmod__backdrop{position:absolute; inset:0; background:rgba(16,22,52,.74);
-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); /* Safari 18 以前只認前綴版 */
animation:wmodFade .3s ease both}
.wmod__box{
/* 比照玉山 009827：框寬 1100、內文 16px。字級放大就一定要放寬框，
否則同樣的警語行數會暴增、捲動距離變很長。 */
position:relative; width:min(1100px,100%); max-height:100%; display:flex; flex-direction:column;
background:#fff; border-radius:16px; box-shadow:0 24px 64px rgba(16,22,52,.34);
padding:clamp(24px,3.5vw,48px); animation:wmodIn .3s ease both;
}
@keyframes wmodIn{from{opacity:0; transform:scale(.92)} to{opacity:1; transform:none}}
@keyframes wmodFade{from{opacity:0} to{opacity:1}}
.wmod__title{
/* 玉山是 30/24/20px 灰字置中＋分隔線；字級與版式照抄，顏色保留品牌藍
（玉山的 #7E7E7E 灰放在我們的深藍系版面上會顯髒）。
左右 48px 內距是讓出右上角關閉鈕的位置，標題折行才不會被壓到。 */
flex:none; margin:0 0 25px; padding:0 48px 30px;
font-size:clamp(20px,2.1vw,30px); font-weight:500; line-height:1.2;
color:#1B2A8C; letter-spacing:.02em; text-align:center;
border-bottom:1px solid #ADADAD;
}
.wmod__x{
position:absolute; top:10px; right:10px; width:44px; height:44px; /* 熱區 ≥44px */
display:flex; align-items:center; justify-content:center;
background:none; border:0; cursor:pointer; border-radius:50%; color:#4C4747;
transition:background .18s ease, color .18s ease;
}
.wmod__x svg{width:20px; height:20px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round}
.wmod__x:hover{background:#EEF2FF; color:#1B2A8C}
.wmod__body{
flex:1 1 auto; min-height:0; /* 沒有 min-height:0 的話 flex 子項不會縮，捲軸出不來 */
overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right:14px;
overscroll-behavior-y:contain; /* 捲到底不要帶動背景 */
font-family:var(--font-sys); color:#4C4747;
font-size:16px; line-height:1.5; letter-spacing:0; text-align:justify;
}
.wmod__body p{margin:0}
.wmod__foot{flex:none; display:flex; justify-content:center; padding-top:24px}
/* 捲軸客製：原本完全沒設，Windows Chrome 會出現很粗的預設捲軸 */
.wmod__body::-webkit-scrollbar{width:4px; background:transparent}
.wmod__body::-webkit-scrollbar-track{background:transparent}
.wmod__body::-webkit-scrollbar-thumb{background:#3E52A6; border-radius:2px}
.wmod__ok{
min-height:46px; padding:0 34px; border:0; border-radius:999px; cursor:pointer;
font:inherit; font-size:clamp(14px,1.05vw,16px); font-weight:700; color:#fff;
background:linear-gradient(90deg,#3E52A6,#6B5BFF);
box-shadow:0 6px 18px rgba(62,82,166,.32);
transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.wmod__ok:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(62,82,166,.42); filter:brightness(1.06)}
.wmod__ok:active{transform:translateY(0)}
.wmod__x:focus-visible,.wmod__ok:focus-visible{outline:3px solid #6B5BFF; outline-offset:3px}
html.wmod-open,html.wmod-open body{overflow:hidden}
@media (prefers-reduced-motion:reduce){
.wmod__box{animation:none}
.wmod__ok,.wmod__x{transition:none}
.wmod__ok:hover{transform:none}
}
/* ───────── 右側浮動按鈕 ───────── */
/* ⚠️ 這兩顆原本只有 HTML，CSS 完全沒有定位樣式（實測 position:static），
所以一直躺在頁面最底部——桌機上等於不存在。 */
.floats{
/* 靠右下角（客戶 2026-09-24 要求，原為右側垂直置中） */
position:fixed; right:min(20px,1.4vw); bottom:max(22px, env(safe-area-inset-bottom));
z-index:90; display:flex; flex-direction:column; gap:min(14px,1vw);
pointer-events:none; /* 容器不攔點擊，只有按鈕本身可點 */
}
.floats__btn{
pointer-events:auto; display:block; width:min(66px,4.6vw); line-height:0;
filter:drop-shadow(0 4px 14px rgba(40,60,140,.22));
transition:transform .22s cubic-bezier(.2,.7,.3,1), filter .22s ease;
}
.floats__btn img{width:100%; height:auto; display:block}
.floats__btn:hover{
transform:translateY(-3px) scale(1.04);
filter:drop-shadow(0 9px 22px rgba(40,60,140,.34)) brightness(1.05);
}
.floats__btn:active{transform:translateY(-1px) scale(1.01)}
/* 捲到頁尾就讓開，不要壓在警語上（見 js/main.js 的 initFloatsFade） */
.floats.is-away{opacity:0; pointer-events:none; transform:translateX(28px)}
.floats{transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1)}
.floats__btn:focus-visible{outline:3px solid #6B5BFF; outline-offset:4px; border-radius:99px}
@media (prefers-reduced-motion:reduce){
.floats__btn{transition:none}
.floats__btn:hover{transform:none}
}
/* ───────── 手機 ───────── */
@media (max-width:900px){
:root{--hdr-h:64px}
.hdr__inner{gap:16px; padding-inline:16px}
.hdr__logo img{width:150px}
.hdr__nav{gap:18px}
.hdr__nav a{font-size:13px}
.floats{right:10px; gap:8px}
.floats__btn{width:52px}
}
/* ═══════════════════════════════════════════════════════════════
手機版（設計稿 00413A_FA0922手機版NEW.psb，畫布 1500×20526）
座標一律以「手機版設計稿的墨跡框」反推，不是用檔案尺寸直接換算——
每張切圖四周的透明留白不同（例如 kv-taiwan 左上就有 128×131 的空白），
直接換算會讓圖看起來位移。換算工具與數據見 docs/SLICE_MAP.md。
═══════════════════════════════════════════════════════════════ */
@media (max-width:767px){
/* ── 漢堡選單：設計稿 x1316–1436 y59–144（1500 畫布） ── */
.hdr__burger{display:flex}
.hdr__nav{
position:absolute; top:100%; left:0; right:0; display:block;
background:#fff; box-shadow:0 12px 24px rgba(20,30,80,.12);
padding:6px 0; transform-origin:top;
clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
transition:clip-path .28s ease, opacity .2s ease;
}
.hdr.is-open .hdr__nav{clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto}
.hdr__nav a{
display:block; padding:14px min(28px,4.6vw); font-size:min(17px,4.1vw);
border-bottom:1px solid #EEF1F8;
}
.hdr__nav a:last-child{border-bottom:0}
/* ── 側欄按鈕：設計稿 x1315–1442（寬 127／1500＝8.47%），右距 3.87% ── */
/* 手機版改靠右下角：原本 top:50% 垂直置中會壓到 KV 標題（David 2026-09-24 反映）。
.is-away 的位移也要一起改，否則捲到頁尾讓位時會先跳回垂直置中。 */
.floats{right:2.6vw; gap:min(10px,1.6vw);
top:auto; bottom:max(10px, env(safe-area-inset-bottom)); transform:none}
.floats.is-away{transform:translateX(28px)}
/* 警語彈窗：標題置中後會跟右上關閉鈕搶位置，窄螢幕又會被左右內距擠成細長條。
改成從關閉鈕「下方」開始，整個寬度都能用。字級比照玉山的 24/20/18。 */
.wmod__box{padding:20px 16px 20px}
.wmod__title{padding:44px 6px 16px; margin:0 0 16px; font-size:clamp(18px,5.4vw,24px)}
/* 窄欄的 justify 遇到中英混排會把字距拉得很開（www.esunam.com 那行最明顯），
所以手機不齊行。桌機欄寬夠，維持 justify 比照玉山。 */
.wmod__body{padding-right:10px; text-align:left}
/* 圖示縮到 36px（比照玉山 009827 手機版，客戶 2026-09-29 要求縮小），
但點擊範圍維持 44px 觸控下限：外框 44px、左側 8px 透明內距，圖只畫在右邊 36px。 */
.floats__btn{width:44px; min-width:0; padding-left:8px; box-sizing:border-box}
/* ── 第 3/4 段交界 ──
這條交界也是曲線，但手機版**不需要**自己做遮罩：
m-ai-plate 本來就含正確的交界內容（曲線兩端的深藍、壓在上面的水晶方塊，
實測與設計稿的深藍佔比同為 6.8%），曲線中央以下那 44px 則由第 4 段的
m-act-plate 提供（它頂部的曲線與設計稿吻合，誤差 ≤2px）。
⚠️ 真正的 bug 是 .ai__bg 套用了**桌機座標**的 clip-path（涵蓋設計 y1400–2560），
手機沒覆寫就照用，會把底圖裁在 y6230 附近，交界以下整片露出 body 底色，
看起來就像交界變成 y6420 的直線。手機版把遮罩還原成單純的容器即可。 */
.ai__bg{
display:block; position:absolute; z-index:0;
left:0; width:100%; margin-left:0;
/* 往上溢出 100px（設計 y4700 起）：上一段的曲線下緣最低到 y4825，
曲線以下必須露出「第 3 段背景的延續」，不是段界硬切。
第 2 段 z-index 4 > 這裡的 3，所以延伸出去的部分會被第 2 段蓋住，
只有它 clip-path 裁掉的地方（曲線以下）才看得到——正是要的效果。 */
top:-3.8417%; height:103.8417%; /* 0928 稿 y6166–8869：往上 100 墊在第 2 段曲線下；下緣曲線以下透明，露出第 4 段底圖 */
overflow:visible; clip-path:none;
}
.ai__bg > .ai__plate--m{position:absolute; inset:0; width:100%; height:100%; object-fit:fill}
/* ── 各段手機版底圖：一律蓋滿該段，並與上一段重疊 1px 防合成縫 ── */
.ai__plate--m,.act__plate--m,.ace__plate--m,.fund__plate--m,
.unbox__plate--m,.howto__plate--m,.ftr__plate--m{
display:block; position:absolute; left:0; top:-1px;
width:100%; height:calc(100% + 1px); object-fit:fill; z-index:0;
}
.ai__plate,.act__plate,.ace__plate,.fund__plate,
.unbox__plate,.howto__plate,.ftr__plate{display:none}
.sec--howto::before{display:none} /* 桌機才需要的滿版色帶 */
.ace__warp{display:none} /* 曲速光條是桌機專屬 */
/* ══ 3. 站上AI大趨勢（0928 手機稿 y6266–8869）══
2026-09-29 依 0928 手機稿改版：標題放大、導言改寫、圖表改成「四個世代漏斗＋走勢圖」。
區段終點取第 3/4 段交界曲線的中央（y8869，PSD 群組遮罩下緣；兩端 y8773）。
素材：底圖、圖表由 0928 PSB 合成；標題用設計師轉出的圖（比例 6.14，與稿上墨跡 6.18 吻合）。
底圖只到交界曲線（PSD 群組遮罩），曲線以下透明，由第 4 段底圖（往上墊到 y8700）補深藍條紋。 */
.ai{aspect-ratio:1500/2603}
.ai__title {left:12.0667%; top:8.0292%; width:75.8000%}
/* 導言：墨跡 x112–1389 y6764–6906、兩行。思源黑體照稿 62.5 最長行會寬到 1344，
縮到 3.959cqw 恰為稿上的 1277；行距 84.5。nowrap：只准在稿上的斷點換行。 */
.ai__lead {left:0; top:18.4671%; width:100%; white-space:nowrap; text-align:center;
font-size:3.9590cqw; line-height:1.4228; color:#2000A6} /* 0928 稿字心 RGB(32,0,166) */
.ai__d{display:none}
.ai__m{display:inline}
.ai__chart {left: 6.0000%; top:27.0841%; width:94.2667%}
/* 0928 稿「…總報酬計算。注意：」同一行接續（舊版在「注意：」前斷行） */
.ai__note {left: 6.0000%; top:85.7856%; width:88.4667%; line-height:1.434}
.ai__cube--pink,.ai__cube--green,.ai__cube--blue{display:none}
/* ══ 4. 玉山主動出擊（0928 手機稿 y8869–14260）══
2026-09-29 依 0928 手機稿改版：數據卡／時間軸換新圖、績效表改三檔輪播、水晶拆成獨立六顆。
區段終點 14260：讓第 5 段（仍是 0922 版）的標題落在與 0928 稿相同的位置（0922 標題在段頂下 212）。
素材：底圖、數據卡、時間軸、三張績效表、水晶由 0928 PSB 合成；標題用設計師轉出的圖。 */
.act{aspect-ratio:1500/6188} /* 09-29 警語縮成一行上移 738；0404 績效表改三檔直排（969→2504）加高 1535 */
/* 底圖 y8700–14332：上緣墊在第 3 段曲線底下；下緣是 PSD 遮色片的弧形（兩側 14190、中央 14331）。
弧形兩側比區段底（14260）高，那一小塊必須透出第 5 段往上延伸的放射背景，
所以手機版區段不能有底色——否則桌機那個 #1B2A8C 會在弧形兩側畫出深藍三角（客戶回報的破版）。 */
.sec--act{z-index:5; background:transparent}
.act__plate--m{top:-3.1349%; height:104.4704%}
.act__title {left:19.5333%; top:2.7311%; width:60.2667%}
/* 導言：墨跡 x167–1334、三行、行距 83；斷點照稿（br--m）。字級由實測寬度反推 */
.act__lead {left:0; top:10.6480%; width:100%; white-space:nowrap; text-align:center;
font-size:4.0253cqw; line-height:1.3746}
.act__block--stats {left:6.9333%; top:16.0956%; width:86.1333%}
.act__note--1 {left:6.9333%; top:33.8559%; width:85.8000%; line-height:1.5}
.act__block--timeline{left:7.0000%; top:36.6515%; width:86.0000%}
/* 手機版時間軸用整張圖，桌機那 9 塊分區動畫在這裡關掉 */
.tl__m{display:block; position:static; width:100%}
/* 桌機那組規則帶了 .act__block--timeline 前綴（權重 0,2,0），
這裡沒有前綴就蓋不掉，桌機時間軸會跟手機切圖一起畫出來。 */
.act__block--timeline .tl__base,.act__block--timeline .tl__bar,.act__block--timeline .tl__txt{display:none}
.act__note--2 {left:7.3333%; top:52.3271%; width:85.6667%; line-height:1.5}
.act__block--funds {left:7.0000%; top:54.5410%; width:86.0667%}
.act__note--3 {left:8.3333%; top:95.6206%; width:83.9333%; line-height:1.5}
.act__block--funds img{aspect-ratio:1291/2504} /* 0404：三檔直排（金滿意 → 高成長 → 科技島） */
/* ── 水晶：桌機那五顆關掉、改顯示 0928 稿的六顆（.act__objs 鋪滿整段，座標以整段為基準）──
PSD 疊序在內容之上（群組 31 在群組 32 之上），沿用 .act__objs 的 z-index:6。
右上那顆頂端高過第 3/4 段交界曲線，照稿會被第 3 段蓋掉一角（第 3 段 z-index 較高）。 */
.act__objs{display:block; left:0; width:100%}
.act__objs .act__cube{display:none}
.act__mc{display:block; position:absolute; pointer-events:none}
.act__mc img{width:100%; display:block}
.act__mc--1{left:8.2000%; top:-0.5818%; width:10.3333%}
.act__mc--2{left:88.1333%; top:23.7718%; width:10.3333%}
.act__mc--3{left:-2.4667%; top:4.2340%; width:11.6667%}
.act__mc--4{left:82.6667%; top:-1.6160%; width:21.2000%}
.act__mc--5{left:-6.6667%; top:37.9605%; width:17.8000%}
.act__mc--6{left:90.1333%; top:46.0892%; width:15.2000%}
/* ══ 5. ACE王牌策略（0928 手機稿 y14260–18659）══
2026-09-29 依 0928 手機稿改版：拿掉「三張小卡＋三大塊直排」，改成 A／C／E 三頁輪播。
區段終點取底部弧形中央（y18659，PSD 底圖遮色片；兩側 y18490）。
素材：底圖、三頁由 0928 PSB 合成（說明小字不烘進圖，改 HTML）；標題用設計師轉出的 2× 圖。 */
/* z-index:1：底部弧形要蓋在第 6 段往上延伸的底圖上（兩段都沒 z-index 時，DOM 較後的第 6 段會在上面）。
底色透明：弧形兩側以下必須透出第 6 段底圖，不能被桌機那道漸層底色蓋掉。 */
.sec--ace{z-index:4; background:transparent}
.ace{aspect-ratio:1500/4399}
/* 底圖 y14160–18700：上緣多 100 墊在第 4 段弧形底邊下 */
.ace__plate--m{top:-2.2732%; height:103.2053%}
.ace__title {left:19.0667%; top:4.8193%; width:61.2000%}
/* 桌機的三張卡、三大塊、三段說明小字在手機一律關掉（手機改用下方輪播） */
.ace__cards,.ace__block,.ace > .ace__note{display:none}
/* ── A／C／E 輪播 ──
每頁圖片涵蓋 y14790–18240（三頁同尺寸、同座標系），說明小字接在圖下方。
三頁疊在同一個 grid 格子，容器高度＝最高那頁，切換時不跳動；
整個輪播高度會隨小字變化，已登記在 initNoteReflow() 讓下方讓位。 */
.ace__slider{display:block; left:0; width:100%; top:12.0482%; touch-action:pan-y}
.ace__slides{display:grid; overflow:hidden}
.ace__slide{grid-area:1/1; visibility:hidden}
.ace__slide.is-on,.ace__slide.is-leaving{visibility:visible}
.ace__slide.is-anim{transition:transform .45s cubic-bezier(.4,0,.2,1)}
.ace__slide > img{display:block; width:100%}
/* 說明小字：左右緣照稿 x155–1349；與圖下緣的距離照稿（A −4、C +20、E −24 設計px，圖下緣 y18240） */
.ace__snote{margin:0 0 0 10.3333%; width:79.6000%; line-height:1.49}
.ace__snote--a{margin-top:-0.2667%}
.ace__snote--c{margin-top:1.3333%}
.ace__snote--e{margin-top:-1.6000%}
/* 點擊區：箭頭烘在圖裡（左 x105–165、右 x1344–1404、y15574–15648），
放大成大字母標題兩側的整塊區域（y15450–15780；左到 x270、右從 x1260，不壓到大字母與標題字）。
座標用 cqw（.ace 的寬＝1500 設計px，1cqw＝15 設計px），不受輪播總高度影響。 */
.ace__nav{position:absolute; top:44cqw; height:22cqw; padding:0; border:0; background:transparent;
cursor:pointer; -webkit-tap-highlight-color:transparent}
.ace__nav--prev{left:0; width:18cqw}
.ace__nav--next{right:0; width:16cqw}
.ace__nav:focus-visible{outline:3px solid #6B5BFF; outline-offset:-3px}
/* ══ 6. 玉山投信首檔主動式ETF／基金卡（0928 手機稿 y18659–20915）══
2026-09-29 依 0928 手機稿改版：整段重新設計（大標、文案、ACE／123 主卡、底部標籤）。
區段終點取底圖 V 字尖端（y20915；兩側 y20590），V 字以下露出第 8 段往上延伸的底圖
（第 7 段影音區仍隱藏）。
素材：底圖、底部標籤由 0928 PSB 合成；大標、主卡用設計師轉出的圖（主卡縮成 1×，小字較銳利）。
⚠️ 0922 的 LED 點陣（膠囊、標籤箭頭）是對舊圖量出來的，新圖裝飾位置不同，手機一律關掉。 */
/* z-index:1：V 字底要蓋在第 8 段往上延伸的底圖上；底色透明，V 字兩側才透得出去 */
.sec--fund{z-index:3; background:transparent}
.fund{aspect-ratio:1500/2256}
.fund__plate--m{top:-7.5355%; height:109.5301%} /* 底圖 y18489–20960：往上 170 墊在第 5 段弧形下 */
.fund__code{display:none}
.fund__title{left:22.4000%; top:5.0975%; width:55.2667%}
/* 文案：墨跡 x243–1259 y19171–19218、字級 50、#323232；字級由實測寬度反推 */
.fund__line{display:block; left:0; width:100%; top:22.5266%; margin:0; text-align:center; white-space:nowrap;
color:#323232; font-weight:700; font-size:3.1533cqw; line-height:1}
.fund__card{left:5.6667%; top:31.3387%; width:88.4667%} /* 1001 稿 x85 y19366 寬 1327 */
.fund__tag {left:31.0667%; top:85.4167%; width:37.8667%}
.fund .led{display:none}
/* ⚠️ 膠囊上的 LED 點陣：桌機與手機用的是**不同張**卡片圖（ 切換），
兩張圖裡裝飾的位置不一樣，座標必須分開設。
沒設的話會沿用桌機座標，在手機上就跑到膠囊外面去。
手機版量測自 m-fund-card.webp（1188×786）：
右側裝飾 x880–941 y20–68（偵測到 31 個點，完整）
左側因為底色是亮藍、白點反差小只抓到 12 點，改用「對膠囊中心對稱」推算 */
.led--fundpill-1{left:20.6229%; top:2.4173%; width:5.4714%; height:6.4885%;
--led-m:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAAzCAQAAABiFK0EAAAFGUlEQVR42sWZb2iVdRTHP9qfF715socu7MXAGlhQLCSwgQQSQo0geiG+CYmICAmJGCIRERFBSJAUEhGMGsUQh7FClFJKs625oZRrOaZN28qm889dzq1dt08v7unpOqetu+36PC/u7zznnN9znt85398553cXyY2+Fs/LLJ2M0c/DJGVpO9c7ca/Fq7e8Gea+CnlyMbr9xjniG6aAKY6Up37zPJiwgUkeopvnylNfNM+ISMiT43TlEdHIANu4D8jzOK0c5bVKIgI/CkTst1r8XdUJn60cIuCB+L2HAepZAsAt1FfOESk9XAYu8wewi4vx/HAlHYGtDtnmKhHX2+2QH85ee66IWMqJGdblbCURUTRgEzt4O3v2Dp+yDoCVtNLMwwvviNcdUyfdJWK3qiPWi2dUPW/uevrzYUJ7gPKMWOtYUC02OB7jVxYWlDWMxugS8CMTTAHQy+9MAlBgeHaOWHqFbctmsLfqCipnKubEWvu96BmfEfFNzznifhGbveiI20P+Oo5IgkivJ/gfd/WMxqbXqDCmmZDMKJBkz5Orla5ZvFxJVc/O/OLPZjtttlpMbLHDjTHJeg+72weDarbTrfGip9znftfFNFvssDlzYatdbgjqVffZYl1QTXb4+kwmbLGgFvxa7Fd13BdMfcYJddJBEb+M6H5frHFU1TGXiZudVAvuMRF/UbXg8+J6C6oOiLhb1Uk3X23CoRJQ/XNtFz+I8YSrxeGgusXnM7mNJfpD4ooMiNtN/SSTqzGXwbVrOigThgNGQ8B4AOUPYJjLAIywh5RfSziDMZ6iDzLOJeAgfwYQf+NsJneJ45zOqB+j0l7Kvf+CstNR+1wlPutJx9wZ8bzDMQdtEBNX2O+oXRHtWzzned+NL+lw3F4fEbHBvBdjp8QWRz3l0yI+bq8Ttkc07XDUURuLjkivEfH/oCK9LsRmd0/X3eBkOHnNYuAsNwPLAMiRlpTneSDJ8t7ZaVViMmPtSMkMZDLTc+cdsS/fxJLivtjsKb82Fettc8BPw9b3HfSQT8Tms9tT7rQ2lrvPPhsChl940r0BvbUecdD34ru32m+nT4r4oO322yhijUMRwgliY0TqAdPIbfqm+GJE95Cp2BacJnPWBmfc5VZn+m2S1Y4FXxZfDU5exMMByqYwqMlGVxZjoWsGULaWmDZmfQkoe8WGTO61ElAOm1hXAkrcEeOCNZJxDk0HZY6jAbCTmc8u8zMpnRQAGKUNOBLQ/Q7YGZy/+BboDP/2kOd7zmc9VkpH6FzgOPBzzN1+RbREjmhxwP3ea+KTtnksKr/UNzxmu2tNxCr3esztVpkTN3nUHjfFl3zigHsixa3xiCfdmkVTv+0RTY/aZr/brk5T1041yVWQSsvuvhewfC22cEXw5TOqwp11nhoOcIIDrAbybGKAYbYBUEsf5+li+UIfcbRGpPeJmA8MvOLSDMj7FrJ2TMhzd4yXAHXcGocG93OC6uAsW0hH5IG9kVG7gO8jbxb4DOgOuO9a6D4i8S1/sDHwUmerh3wxeI3u+6/mbu4G5EpK1mSWeXLeWxk84JB9rhZxowOesbXktelCr8K/maBHxHNBvVG5I44cVTG6E1jBbUHdVbmt6TQ9WZqCg1EhjvNVJY84Ut+1K+sjVvilP/hS5Y44itdyHuMnPi9Te44rUCWuc0Qd873y5pgPR7SVtDI35BgcFmWhXdafAYvnfOQHTVxginE+/v+1wvydQdexkoN8W57y34bvoBWESpkyAAAAAElFTkSuQmCC);
-webkit-mask-image:var(--led-m); mask-image:var(--led-m);}
.led--fundpill-2{left:73.9057%; top:2.4173%; width:5.4714%; height:6.4885%;
--led-m:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAAzCAQAAABiFK0EAAAFXUlEQVR42sWYb2zV5RXHP7ShOqPJ+M2fuYbYrBuakHRk1ZiwhcjqwpYspEuMWyIviNkLshnIYowSlsUok7glRuILEzJC4MVITTO3maDVbggi1/oP0o5CpYp2xavU0lK8g0Lt5bMXPVzg0tXS3ts+98U9z9/f8zznfM/3nGeezHWpKssqOxjmOKumOduZ/DIirnNM1eHprTKzWzgBpNRRDcBNJHOjiAFe4ysAehmazgLVT8zk8wvJA8fop4p3WEcV/732ReaVGREpA3ODiDUcZC/LgQEW08whnr0Gu3Dmv5UW1IJ9IrY6XrbMDiIyANxLFVDFbdwN3B19d86OIk4AcDBqQ7wHdEatczYVgZvN2el9IjbYbs4XrJ3q7HIjIrl231AeRKxgK89RDwwBD/MiDwdEN9JMU+UVsdS8qodE3K7qmL8T96p63pWTzS/HFp7zYqkTcyG/6cKgL91ZOVCOl0/jv0CBhNNR6ycX3AH916qIxIUlLWm0Xz12vOcl9UsfMRF/5nELdrlUfMRBz7svSH0KikiLS3LFpOSqlkvj/l/969on2EIy6bDa6X9A5IpbTSa2hdW08CL1JMAW3uaZ0NJP2cUuVtAHJPyW3TSzCIB6dtLGz0kBWEUrLSwJp72dPawPmmqglTZuiXGP8yp/vIrAxPvDcj8Xmy8jmUWeClA1iBuKlo6p3eqYo/5SXOZ5VfvFjLtUHXWzWOtJVc+4RHw6VmgrvYWUxgi8MjTyg9jZMjJ8n28CUMOPgB9fRj813A5UM5+VwAPUAHALS6nmLgDm0wj8hAUA3MAS4J5Yob7UOxboCfCco4vj0f4xJ/iAEQAu0EWGbgrRAzkGA4aHgUMx5zRvk+M/MecwKUc4F7Uc0FsktzSc+bhKTMVtnrXPVeIPzTps1joxcYMnHXZTIKLNUx6yUcRVdpsPl5O4zUE/co2Iy+0w7x7rRPy9OfvdFKbb5kmPuCx6xtR2a78OC0wAyEt2nU7YNzWMjIZlbKwKZksiHOWyWmlcMDEfjpbEjlMrNcwP6cbxE2201wM2moo77PEvLhYzrrXLLtfFmZ/3E1usF3GFe+3x6TjTo/Z4wCYR63zVT9zhYhHXesAOH4px2+y2Ne7tXbXgiMsRm+JKhsWXQ94uEmAds0l8Vi2oWRGPxbiHxF+FnJciO+qfxXrPBCjrxU3Rsy+Uu8Ft3jXuHTcXmW65fSEdFe8rtq8X20IeEdPwBNp8BVMuEz8POWutD4bGx1wjtkfPqau9Yza0MsgbdITcBfybfNQOAu+FfBQY4MOovQ9kA9Rn2Q8cLsaOfXRyBhjlAm8B2YD1B6XZVMqnjHArH7KWj9nDd/iK3TzKaaCL7zLEU/yLsxylhgV08Gv6gV5qOc9W/gAcppoFfMRjdANtLEJe5knynGCQWxnkKV4B2riDGt5hdfFoJdnUJStPppcbTjeinFehJ47Sj06yiXJETXVsYZjjrAGgkSx5WmgAanmBU3TQNOm9zjhyTAKUY35palK0+52XYe1IZWPHG4P5qrmJmxni9mj/NvC9kG+rbB7Rx9+4AJyjl27g9WDdLPAaZwF4t3JPHBc30cs36OQ3fAG8zw2c5u+sB97iekbYz+N8UemccjJOzRSZNa1cKoNbHfaYD4pYb7uDtlpbsqFMZbKpNNhwzIKaNzG1Pejsr7PzxDEQUXI1VcB1NDDAwjDyb81mZv1S0FSO3cCb0bp/yuFLWWxhtXtt9o5QzPPucdOU05wZc8S470/5BZ/xj7l4g76Y7n3mqKO2TP3k5QblnyLAK0z9fanc7wujkY0ZWdUcKAJ7inHkNH7lCVky3MsA/5ze5P8ByUp+YzdyWVMAAAAASUVORK5CYII=);
-webkit-mask-image:var(--led-m); mask-image:var(--led-m);}
/* ══ 6-1. 影音區（0928 手機稿 y20915–21955，高 1040）══
0404：兩支 9:16 短影音，一次一支、左右滑動（main.js initSlider('reels')）。
框高 900（x497–1003、y70–970），左右箭頭在框外兩側。
z-index:2：要蓋住好料開箱往上延伸的底圖，但仍在基金卡 V 字（3）之下。 */
.sec--reels{z-index:2; background:transparent}
.reels{aspect-ratio:1500/1040; overflow:visible}
/* 底圖 y20600–21955：往上 315 墊在第 6 段 V 字底下 */
.reels__plate--m{display:block; position:absolute; left:0; width:100%; top:-30.2885%; height:130.2885%; object-fit:fill; z-index:0}
.reels__plate{display:none}
.reels__slider{touch-action:pan-y}
.reels__slides{left:33.1333%; top:6.7308%; width:33.7333%; height:auto; aspect-ratio:9/16; overflow:hidden;
border-radius:2cqw; box-shadow:0 6px 24px rgba(60,40,120,.18)}
.reels__slide{inset:0; top:0; left:0 !important; width:100%; border-radius:0; box-shadow:none; visibility:hidden}
.reels__slide.is-on,.reels__slide.is-leaving{visibility:visible}
.reels__slide.is-anim{transition:transform .45s cubic-bezier(.4,0,.2,1)}
.reel__play::after{width:22%}
.reels__nav{display:block; position:absolute; top:50%; width:12cqw; height:12cqw; margin-top:-6cqw; padding:0;
border:0; border-radius:50%; background:rgba(255,255,255,.85); box-shadow:0 2px 10px rgba(60,40,120,.2); cursor:pointer;
-webkit-tap-highlight-color:transparent}
.reels__nav::after{content:''; position:absolute; left:50%; top:50%; width:28%; height:28%;
border:solid #3E52A6; border-width:0 .9cqw .9cqw 0; transform:translate(-65%,-50%) rotate(-45deg)}
.reels__nav--prev{left:14%}
.reels__nav--prev::after{transform:translate(-35%,-50%) rotate(135deg)}
.reels__nav--next{right:14%}
.reels__nav:focus-visible{outline:3px solid #6B5BFF; outline-offset:2px}
/* ══ 7. 好料開箱（0928 手機稿 y21955–29965；網站上整段上移 1040）══
2026-09-29 依 0928 手機稿改版：三張表格重做並放大（寬 1372）、標題改成一張圖。
⚠️ 0928 稿在第 6 段與本段之間是影音區（y21004–21977），網站目前隱藏影音區，
所以本段起的 0928 座標一律 −1040：標題落在第 6 段 V 字尖端下約 190（稿上影片與標題間距 170）。
影音區開啟時本段要重新排位。
素材：標題、三張表格用設計師轉出的圖（2.5× 縮成 1×，小字較銳利）；底圖由 0928 PSB「最後一段/底」合成。
說明小字維持 HTML，位置照稿；小字變長時由 initNoteReflow() 讓位。
⚠️ 小檔案下方那段（note--c）0928 稿的文字刪了約一半，未經客戶／法遵確認，網站仍用完整版。 */
.unbox{aspect-ratio:1500/8010}
.unbox__body{left:0; top:0; width:100%; aspect-ratio:1500/8010}
/* 底圖 0928 y21600–29965：往上多 355 墊在第 6 段 V 字底下 */
.unbox__plate--m{top:-4.4320%; height:104.4320%}
.unbox__part--head{left:30.9333%; top:2.3970%; width:40.2667%}
.unbox__sub{display:none}
.unbox__part--c1 {left:4.4667%; top:6.6292%; width:91.4667%}
.unbox__part--c2 {left:4.4667%; top:36.9164%; width:91.4667%}
.unbox__part--c3 {left:4.4667%; top:68.1773%; width:91.4667%}
.unbox__note{line-height:1.49}
.unbox__note--a{left:5.0000%; top:30.1498%; width:90.8667%}
.unbox__note--b{left:5.4667%; top:66.6916%; width:89.0667%}
.unbox__note--c{left:5.0667%; top:92.9588%; width:90.8000%}
/* ══ 8. 如何申購（0928 手機稿 y29965–32236；網站上同樣上移 1040）══
2026-09-29 依 0928 手機稿改版：整塊改成直式（紫色面板、兩張白卡、三顆直排大按鈕）。
整塊是 PSD 的單一向量（含按鈕），直接用 PSB 合成的整張圖；
三顆 .howto__dl 疊在烘死的按鈕上蓋掉舊按鈕，按下時換亮版（同桌機）。
按鈕本體量自整張圖：x319–1004（加右側下載圖示到約 1100）、y1380–1591／1639–1850／1922–2134。 */
.howto{aspect-ratio:1500/2271}
.howto__body{left:5.3333%; top:0; width:89.8000%}
/* 10/01：同桌機做法，按下時蓋上亮版；位置量自 m-howto（x319／319／318、y1379／1638／1922、寬 710） */
.howto__dl--1{left:26.6000%; top:60.7221%; width:47.3333%}
.howto__dl--2{left:26.6000%; top:72.1268%; width:47.3333%}
.howto__dl--3{left:26.5333%; top:84.6323%; width:47.3333%}
/* ══ 9. 警語與資訊 ══ */
.ftr__in{aspect-ratio:1500/886}
/* 設計稿量得：墨跡 x105–1423（寬1319＝87.93%）、18 行、行距 32.7px、字級 20.9px，
段落之間沒有額外間距（第 6 行是段落一的短結尾，行距仍是 32px）。 */
.ftr__in > .ftr__disclaimer{left:7.0000%; top:2.9345%; width:87.9333%;
font-size:1.3930cqw; line-height:1.565}
.ftr__in > .ftr__disclaimer p{margin:0}
/* 資訊列。設計稿量得：白帶起 y614、分隔線 y741、灰帶起 y799、
社群 y636–696（4 顆 61px、間距 56）、聯絡 y763、三欄地址 y823 與 y847。
內部百分比的基準是 bar 自身（614→886，高 272）。 */
.ftr__bar{top:69.2998%; height:30.7002%}
.ftr__sns-row{top:8.0882%; height:22.4265%; gap:3.7333%}
.ftr__rule{top:46.6912%}
.ftr__bar::after{top:68.0147%}
.ftr__contact{top:54.7794%}
.ftr__offices{top:76.8382%}
/* 1500 稿等比縮到 375px 寬時字會掉到 5px，所以文字一律補可讀下限；
在 750 寬（切版對位基準）clamp 不生效，設計稿比例完整保留。 */
.ftr__in > .ftr__disclaimer{font-size:clamp(10px, 1.3930cqw, 14px)}
.ftr__contact{font-size:clamp(11px, 1.3333vw, 17px)}
.ftr__offices{font-size:clamp(10px, 1.2000vw, 16px)}
/* ══ 2. 挺臺灣科技島（0928 手機稿 y2470–6266）══
2026-09-29 依 0928 手機稿改版：新增中標、卡片放大重做、台灣水晶獨立成一層。
原 0922 稿是 y2470–4800；新稿內容變長，下緣曲線整條往下移 1466 設計px（形狀不變）。
桌機是五張直式卡橫排、手機是五張橫式卡直排，排版完全不同 → 卡片重切，
以 依斷點切換，同一個斷點只會下載一張。
素材來源：底圖、卡片、水晶由 0928 PSB 直接合成；標題用設計師轉出的圖
（0928 的標題字距與桌機 isl-title 不同，比例 5.94 vs 6.36，不能沿用）。
座標一律取 0928 稿的墨跡框。 */
/* ⚠️ 必須是 visible：曲線遮罩要往上溢出 112 設計px 蓋住 KV 底部。
之前這裡是 hidden（配合切齊的矩形底圖），會把溢出的曲線整段裁掉，
交界又退回一條水平直線——而且元素的 getBoundingClientRect 仍是正確的，
只有畫面上看得出來。 */
/* 手機版各段疊放順序（0928 稿）：每一段都要蓋住下一段「往上延伸、墊在本段曲線／弧形／V 字底下」的底圖。
島 7 > AI 6 > 主動出擊 5 > ACE 4 > 基金卡 3 > 好料開箱以後（auto）。
⚠️ 兩段 z-index 相同時，DOM 較後的那段會蓋上來（曾讓基金卡的延伸底圖蓋掉 ACE 底部弧形）。 */
.sec--island{overflow:visible; z-index:7}
.sec--ai{z-index:6}
/* ── 第 2 段背景：手機版沿用桌機的「向量遮罩」做法 ──
這一段的上下緣在設計稿裡是曲線，不是直線。之前手機版偷懶用一張切齊
y2470 的矩形底圖，交界就退化成一條水平直線——而且 m-kv-plate 當初把
第 2 段的紫色圖層關掉了，y2358–2470 該是紫色弧頂的地方變成藍色。
改法與桌機相同：底圖出成未裁切的矩形，形狀完全交給 clip-path。
好處是曲線是向量（解析度無關）、不需要兩張底圖精準對齊，
也就不會在交界出現橫向斷點。
曲線數據取自手機設計稿：上緣兩端 y2358、中央 y2466（落差 108），
下緣兩端 y4726、中央 y4825（落差 99）。兩條是同一個橢圓——
用上緣形狀去預測下緣，91 個有效取樣點的平均誤差只有 +2.3px。
遮罩容器涵蓋 y2358–4825，剛好包住整條曲線。 */
.isl__bg{
display:block; position:absolute; z-index:1;
left:0; width:100%; margin-left:0;
top:-3.0558%; height:103.7408%; /* 設計 y2354–6292（下緣曲線隨 0928 稿下移 1466） */
overflow:hidden;
clip-path:polygon(0.000% 0.000%, 2.000% 0.228%, 4.000% 0.457%, 6.000% 0.660%, 8.000% 0.863%, 10.000% 1.067%, 12.000% 1.244%, 14.000% 1.422%, 16.000% 1.574%, 18.000% 1.727%, 20.000% 1.854%, 22.000% 1.980%, 24.000% 2.108%, 26.000% 2.235%, 28.000% 2.336%, 30.000% 2.412%, 32.000% 2.488%, 34.000% 2.565%, 36.000% 2.641%, 38.000% 2.692%, 40.000% 2.743%, 42.000% 2.793%, 44.000% 2.793%, 46.000% 2.844%, 48.000% 2.844%, 50.000% 2.844%, 52.000% 2.844%, 54.000% 2.844%, 56.000% 2.819%, 58.000% 2.793%, 60.000% 2.743%, 62.000% 2.692%, 64.000% 2.641%, 66.000% 2.590%, 68.000% 2.488%, 70.000% 2.412%, 72.000% 2.336%, 74.000% 2.235%, 76.000% 2.133%, 78.000% 1.980%, 80.000% 1.879%, 82.000% 1.727%, 84.000% 1.574%, 86.000% 1.422%, 88.000% 1.244%, 90.000% 1.067%, 92.000% 0.863%, 94.000% 0.660%, 96.000% 0.483%, 98.000% 0.228%, 99.933% 0.000%, 99.933% 97.841%, 98.000% 97.994%, 96.000% 98.171%, 94.000% 98.324%, 92.000% 98.502%, 90.000% 98.654%, 88.000% 98.781%, 86.000% 98.933%, 84.000% 99.060%, 82.000% 99.188%, 80.000% 99.289%, 78.000% 99.390%, 76.000% 99.492%, 74.000% 99.568%, 72.000% 99.645%, 70.000% 99.696%, 68.000% 99.772%, 66.000% 99.822%, 64.000% 99.873%, 62.000% 99.924%, 60.000% 99.949%, 58.000% 99.975%, 56.000% 100.000%, 54.000% 100.000%, 52.000% 100.000%, 50.000% 100.000%, 48.000% 100.000%, 46.000% 99.975%, 44.000% 99.949%, 42.000% 99.924%, 40.000% 99.873%, 38.000% 99.822%, 36.000% 99.772%, 34.000% 99.696%, 32.000% 99.645%, 30.000% 99.543%, 28.000% 99.466%, 26.000% 99.365%, 24.000% 99.264%, 22.000% 99.162%, 20.000% 99.035%, 18.000% 98.908%, 16.000% 98.781%, 14.000% 98.629%, 12.000% 98.476%, 10.000% 98.324%, 8.000% 98.146%, 6.000% 97.969%, 4.000% 97.765%, 2.000% 97.563%, 0.000% 97.410%);
}
.isl__plate{display:none} /* 桌機底圖 */
.isl__over{display:none} /* 桌機的遮罩外前景 */
.isl__plate--m{
display:block; position:absolute; inset:0;
width:100%; height:100%; object-fit:fill; z-index:0;
}
.isl{aspect-ratio:1500/3796; overflow:visible}
.isl__title{left:12.8000%; top:4.4784%; width:74.0000%}
/* 中標：墨跡 x198–1303 y2925–2996、字級 78。line-height:1 時思源黑體字面上緣約在 0.08em，
top 取墨跡上緣往上 6px（2919）。 */
/* 字級 4.911cqw：思源黑體比設計字寬，照稿 78 會寬到 1170，實測縮到此值墨跡寬恰為 1105 */
.isl__sub{display:block; left:0; width:100%; top:11.8283%; margin:0; z-index:2;
text-align:center; color:#fff; font-weight:700; font-size:4.9110cqw; line-height:1;
text-shadow:0 1px 6px rgba(20,10,60,.35)}
/* 導言：墨跡 x110–1388 y3086–3227、字級 62.5、兩行（行距約 83.5）。
斷行照稿固定在「上看」之後（br--m），桌機那個
在手機關掉。 */
/* 字級同理：照稿 62.5 最長行會寬到 1362，縮到 3.910cqw 恰為稿上的 1278；行距維持 83.5。
nowrap：只准在「上看」後斷行，否則思源黑體較寬會把「上看」擠到下一行。 */
.isl__lead {left:0; top:15.7773%; width:100%; white-space:nowrap;
font-size:3.9100cqw; line-height:1.4237; text-align:center}
.isl__lead br:not(.br--m){display:none}
.isl__m{display:inline}
.isl__d{display:none}
.isl-card--1{left: 6.9333%; top:23.1033%; width:86.2000%}
.isl-card--2{left: 6.9333%; top:35.5638%; width:86.2000%}
.isl-card--3{left: 6.9333%; top:47.9452%; width:86.2000%}
.isl-card--4{left: 6.9333%; top:60.4057%; width:86.2000%}
.isl-card--5{left: 6.9333%; top:72.8398%; width:86.2000%}
/* 台灣水晶：PSD 疊序在卡片之上、文字之下；下緣 y6309 會超出區段、壓進第 3 段，
靠 .sec--island 的 z-index:4（高於第 3 段）照稿蓋在上面。 */
.isl__tw{display:block; left:71.3333%; top:79.1886%; width:28.6667%; z-index:4; pointer-events:none}
.isl__note {left:12.4000%; top:85.1686%; width:55.8667%; line-height:1.34; z-index:5}
/* ── KV 底圖換成手機版直幅版本 ── */
.kv__plate--d{display:none}
.kv__plate--m{display:block}
/* ── Header：設計稿 y0–206（1500 畫布）＝ 13.733vw，上限 66px ── */
:root{--hdr-h:min(66px, 13.733vw)}
/* ⚠️ 這裡不可以寫 .hdr__nav{display:none}：它會蓋掉上面漢堡選單的展開狀態，
點開漢堡後選單依然是 display:none，什麼都看不到。
收合是靠 clip-path + opacity + pointer-events 做的（見上方 .hdr__nav 規則），
不是靠 display。 */
/* ⚠️ 手機版 header 是滿版的，必須解除桌機的內容欄寬度限制。
沒解除的話 .hdr__inner 會被 --maxw（71.111vw）夾住再置中，
實測 logo 左邊距變成設計稿的 2.4 倍、漢堡右邊距變成 4.5 倍。
邊距直接取設計稿：logo 左緣 x114／1500＝7.60%，漢堡右緣距右 64／1500＝4.27%。 */
.hdr__inner{
max-width:none; margin-inline:0;
padding-left:7.60vw; padding-right:4.2667vw;
gap:0; justify-content:space-between;
}
.hdr__logo img{width:min(236px,30.9vw)}
/* 漢堡：視覺尺寸照設計稿（1500 稿 121×86），熱區另外用 padding 外擴。
直接用 min-width/min-height:44px 會把圖形本身撐大——實測從 121×86
變成 176×176（大 45%、還變成正方形），這就是看起來比設計稿大一圈的原因。
改成 padding 撐出 44×44 的熱區，再用等量負 margin 抵銷，版面位置不受影響。 */
.hdr__burger{
box-sizing:content-box;
width:8.0667vw; height:5.7333vw; min-width:0; min-height:0;
gap:calc((5.7333vw - 3 * 0.87vw) / 2);
padding:max(0px, calc((44px - 5.7333vw) / 2)) max(0px, calc((44px - 8.0667vw) / 2));
margin:calc(-1 * max(0px, calc((44px - 5.7333vw) / 2)))
calc(-1 * max(0px, calc((44px - 8.0667vw) / 2)));
}
.br--m{display:inline}
/* ── 1. Header + KV（手機版 KV 區 = 設計稿 y0–2470）── */
.kv__stage{aspect-ratio:1500/2470; min-height:0}
/* 手機版沒有「台灣超有料」這一行 */
.kv__line--1{display:none}
/* 文案順序與桌機不同：ACE膠囊 → ETF名稱 → 平準金 → 00413A */
.kv__line--3{left:13.8031%; top:12.5506%; width:72.5271%}
.kv__line--4{left:14.0697%; top:18.4615%; width:71.8636%}
.kv__line--5{left:14.2029%; top:22.5911%; width:71.7942%}
.kv__line--2{left:14.0667%; top:27.2874%; width:72.7333%}
.kv__taiwan{left:8.4980%; top:28.8558%; width:79.9930%}
.kv__badge {left:51.7333%; top:71.4575%; width:26.6000%}
.kv__obj--chipdark{left: 1.0316%; top:60.6265%; width:20.3369%}
.kv__obj--green {left:82.1005%; top:84.6833%; width:20.9323%}
.kv__obj--cyan {left:-6.9117%; top:38.7084%; width:23.6901%}
.kv__obj--pinks {left:76.0000%; top:64.3320%; width:13.4667%}
.kv__obj--blues {left:-2.0000%; top:80.5206%; width:13.4000%}
.kv__obj--chipblue{left:85.2885%; top:38.3534%; width:24.3562%}
/* aspect-ratio 由桌機規則沿用（各物件都已指定），這裡只改位置與寬度 */
}
@media (max-width:640px){
/* .kv__stage 的比例改由上面的手機版區塊（max-width:767px）負責，
這裡原本的 1440/1040 是還沒有手機版設計稿時的暫代值，會蓋掉正式值。 */
}
@media (prefers-reduced-motion:reduce){
*{animation:none !important; transition:none !important}
.kv__taiwan,.kv__obj,.kv__badge,.kv__line i{opacity:1 !important}
.kv__line{clip-path:none !important}
.kv__obj-in,.kv__taiwan-tilt{transform:none !important}
}
/* ═══════════════════════════════════════════════════════════════
頁尾：窄螢幕改成內容驅動
手機版整段是「固定長寬比 + 絕對定位 + cqw 字級」等比縮放的，
在 1500 設計稿下沒問題，但真機 375 寬時等比縮放會讓警語只剩 5px。
替法遵文字補上可讀下限之後，固定比例的容器就裝不下了——實測警語會
直接蓋掉資訊列，三欄地址也會互相重疊。
這一段的底圖是純漸層，不像其他段落受切圖比例約束，所以窄螢幕直接
改成正常流。斷點取 719px：再寬一點 1.393cqw 就 ≥10px，clamp 不生效，
等比版面仍然精準（切版對位基準 750 寬即落在這一側）。
═══════════════════════════════════════════════════════════════ */
@media (max-width:719px){
.ftr__in{aspect-ratio:auto; height:auto; overflow:visible}
.ftr__in > *{position:static}
.ftr__in > .ftr__disclaimer{
left:auto; top:auto; width:auto; padding:5.2vw 7% 3vw;
/* 客戶指定 375 寬時為 9px：2.40vw × 375 = 9.0。
上限 10.5px 是為了與 720px 以上那條 1.3930cqw 銜接（720 寬算出 10.03px），
斷點兩側只差 0.47px，不會看到跳動。 */
font-size:clamp(9px, 2.40vw, 10.5px); line-height:1.62;
}
/* 資訊列改直式堆疊。HTML 的順序是 rule → 社群 → 聯絡 → 地址，
但設計稿的視覺順序是社群在分隔線之上，所以用 order 調位。 */
/* relative（不是 static）：z-index 只對定位元素有效，
static 的話白底會被絕對定位的底圖蓋掉，社群列後面就會透出底圖的漸層。 */
.ftr__bar{
position:relative; z-index:3; height:auto; display:flex; flex-direction:column;
padding-bottom:0; background:#fff;
}
.ftr__bar::after{display:none} /* 灰帶改由地址區自己帶背景 */
.ftr__sns-row{
position:static; order:1; height:auto; padding:3vw 0 2.4vw;
gap:6.4vw;
}
.ftr__sns{height:auto; width:12.8vw; min-width:44px; min-height:44px; aspect-ratio:1}
/* 桌機的 img 是 height:100%，父層改成 height:auto 之後那個 100% 沒有依據，
圖示會退回 256px 的自然尺寸並互相重疊 */
.ftr__sns img{height:auto}
.ftr__rule{position:static; order:2; margin:0 4vw; height:1px}
/* 客戶指定：公司名稱單獨一行（去掉它後面的分隔線），
「理財諮詢專線…｜線上客服」另起一行，兩行都置中。 */
.ftr__contact{
position:relative; order:3; padding:3vw 5vw;
/* 0928 手機稿：聯絡資訊在 390 寬約 13px（原 2.73vw＝10.6px 偏小） */
font-size:clamp(12px, 3.40vw, 15px); line-height:1.5;
}
.br--ftr{display:inline}
.ftr__contact .ftr__sep--1{display:none}
.ftr__contact i{margin:0 .7em}
.ftr__offices{
position:static; order:4; display:flex; flex-direction:column;
/* ⚠️ 要覆寫桌機的 align-items:flex-start —— 改成直向排列後，
flex-start 會把每個地址縮成內容寬並靠左，繼承來的 text-align:center 就形同無效。 */
align-items:stretch; text-align:center;
gap:2.2vw; padding:3.4vw 6vw 4.4vw; background:#F6F6F6;
/* 0928 手機稿：分公司地址／電話在 390 寬約 12px（原 2.53vw＝9.9px 偏小） */
font-size:clamp(11px, 3.10vw, 14px); line-height:1.5;
}
.ftr__offices span + span{margin-left:1.2em}
}
@media (min-width:2400px){
/* 超過底圖原生寬之後，改成滿版並用 cover 收邊：
再放大會糊、用 fill 拉寬會變形（實測 2400 寬的圖拉到 3000 會橫向拉伸 1.25×），
cover 是唯一「滿版又不變形」的選項，代價是上下各裁掉一點背景。
裁的是漸層與裝飾，卡片與按鈕都是獨立元素，不受影響。 */
/* .isl__bg／.ai__bg 是遮罩容器，底圖在它們裡面，所以要一起放大，
否則 2400 以上的視窗這兩段仍會露出 section 底色 */
.kv__plate,.isl__plate,.ai__plate,.act__plate,.ace__plate,
.fund__plate,.reels__plate,.unbox__plate,.howto__plate,.ftr__plate,
.isl__bg,.ai__bg{
left:-4px; width:calc(100% + 8px); max-width:none; margin-left:0; object-fit:cover; object-position:50% 50%;
}
}
/* ═══════════════════════════════════════════════════════════════════
手機版圖片的長寬比（相容性保險）
切到手機圖後，圖框高度仍會用 ![]()
上那組「桌機圖」的
width/height 去算 —— 框被撐歪，疊在圖上的 LED 就跟著跑掉。
我們已在 補了 width/height，但那個屬性 Safari 要 16.4 以上
才支援；16.0–16.3 的機子還是會錯。這裡用 CSS 再宣告一次，
所有瀏覽器都吃，兩道保險。
數值＝各手機圖的原生像素，改圖時要一起更新。
══════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
.isl__title img{aspect-ratio:2220/375}
.isl-card--1 picture img{aspect-ratio:1293/414}
.isl-card--2 picture img{aspect-ratio:1293/414}
.isl-card--3 picture img{aspect-ratio:1293/414}
.isl-card--4 picture img{aspect-ratio:1293/414}
.isl-card--5 picture img{aspect-ratio:1293/413}
.ai__title img{aspect-ratio:2274/370}
.ai__chart img{aspect-ratio:1414/1493}
.act__title img{aspect-ratio:1130/508}
.act__block--stats img{aspect-ratio:1292/1069}
.tl__m{aspect-ratio:1290/945}
.ace__title img{aspect-ratio:1836/948}
.ace__slide > img{aspect-ratio:1500/3450}
.fund__title img{aspect-ratio:2074/824}
.fund__card img{aspect-ratio:1327/1024}
.fund__tag img{aspect-ratio:568/229}
.unbox__part--head{aspect-ratio:1208/486}
.unbox__part--c1{aspect-ratio:1372/1863}
.unbox__part--c2{aspect-ratio:1372/2356}
.unbox__part--c3{aspect-ratio:1372/1955}
.howto__body img{aspect-ratio:1347/2252}
}
/* ═══════════════════════════════════════════════════════════════
說明小字字級：客戶規範（2026-09-29，比照客戶舊專案）
- 圖表下方的資料來源／警語：桌機 14px、手機 12px
- 頁尾社群圖示上方的整段警語：一律 16px
⚠️ 這裡刻意改用固定 px，不再跟著版面等比縮放（原本 cqw 在手機上只剩 5–7px）。
文字高度因此會隨螢幕寬度變化，任何一組百分比座標都無法同時適用所有寬度，
所以「小字變高 → 下方元素讓位、容器加高」交給 js/main.js 的 initNoteReflow()。
必須放在檔尾：前面各段（含手機區塊）都用同權重的單一 class 設了 cqw 字級，
靠來源順序蓋過。
═══════════════════════════════════════════════════════════════ */
.isl__note,.ai__note,.act__note,.ace__note,.unbox__note{font-size:14px}
.ftr__in > .ftr__disclaimer{font-size:16px}
@media (max-width:767px){
.isl__note,.ai__note,.act__note,.ace__note,.unbox__note{font-size:12px}
}