*{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#16324F;--navy2:#23486B;--gold:#C9A227;--gold-lt:#E3C766;--teal:#00A6A6;
--ink0:#08111C;--deep:#0D1B2B;--deep2:#14304C;--glow:rgba(0,166,166,.30);
--ink:#1A2332;--body:#44505F;--muted:#8794A3;--line:#E1E6EC;--bg:#F5F7F9;--white:#fff}
body{font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",Arial,sans-serif;
color:var(--ink);line-height:1.75;background:var(--white);-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
header{background:rgba(8,17,28,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.07);transition:.25s}
header.sticky{background:rgba(8,17,28,.96);box-shadow:0 6px 26px rgba(0,0,0,.34)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:11px;color:#fff}
.logo img{height:54px;width:auto;display:block}
.logo b{font-size:17px;font-weight:700;letter-spacing:.5px;line-height:1.25}
.logo span{color:var(--gold-lt);font-size:11.5px;font-weight:400;display:block;letter-spacing:.5px}
@media(max-width:520px){.logo img{height:40px}.logo b{font-size:14.5px}.logo span{font-size:10px}}
.nav ul{display:flex;gap:26px;list-style:none}
.nav a{color:#C9D6E4;font-size:14.5px}
.nav a:hover,.nav a.on{color:var(--gold-lt)}
.burger{display:none;background:none;border:0;color:#fff;font-size:22px}
@media(max-width:820px){.nav ul{display:none;position:absolute;top:64px;left:0;right:0;
background:#0D1B2B;flex-direction:column;gap:0;padding:8px 20px}
.nav ul.open{display:flex}.nav ul li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.burger{display:block}}
.hero{position:relative;overflow:hidden;color:#fff;
background:radial-gradient(1100px 620px at 78% 18%,#1B4266 0%,rgba(27,66,102,0) 62%),
linear-gradient(165deg,#0B1726 0%,#0E2338 46%,#081420 100%)}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:62px 62px;
-webkit-mask-image:radial-gradient(900px 520px at 30% 40%,#000 10%,transparent 78%);
mask-image:radial-gradient(900px 520px at 30% 40%,#000 10%,transparent 78%)}
.hero:after{content:"";position:absolute;left:-160px;bottom:-220px;width:520px;height:520px;
border-radius:50%;background:var(--glow);filter:blur(120px);pointer-events:none}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;
align-items:center;gap:26px;padding:66px 20px 62px;min-height:560px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:3px;
color:var(--teal);font-family:Arial,sans-serif;font-weight:700;margin-bottom:16px}
.eyebrow:before{content:"";width:30px;height:2px;background:var(--teal);display:block}
.hero h1{font-size:48px;line-height:1.2;margin-bottom:16px;letter-spacing:-.5px}
.hero h1 em{font-style:normal;background:linear-gradient(96deg,var(--gold-lt),var(--gold));
-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:16.5px;color:#B7C8DA;max-width:560px}
.hero .kpis{display:flex;gap:40px;margin-top:34px;flex-wrap:wrap}
.kpi b{display:block;font-size:34px;color:var(--gold);font-family:Arial,sans-serif;line-height:1.1}
.kpi span{font-size:12.5px;color:#8FA4BC;letter-spacing:.5px}
.hero-img{position:relative;display:flex;align-items:center;justify-content:center}
.hero-img:before{content:"";position:absolute;width:78%;padding-bottom:78%;border-radius:50%;
background:radial-gradient(circle,rgba(90,160,220,.30) 0%,rgba(90,160,220,0) 68%)}
.hero-img img{position:relative;max-width:100%;max-height:480px;object-fit:contain;
filter:drop-shadow(0 26px 44px rgba(0,0,0,.55))}
@media(max-width:900px){.hero-in{grid-template-columns:1fr;padding:52px 20px 46px;min-height:0}
.hero h1{font-size:33px}.hero-img{order:-1}.hero-img img{max-height:250px}.hero .kpis{gap:26px}}
.btn{display:inline-block;background:var(--gold);color:var(--navy);font-weight:700;
padding:13px 26px;border-radius:6px;margin-top:28px;font-size:15px}
.btn:hover{background:var(--gold-lt)}
.btn.ghost{background:transparent;color:var(--gold-lt);border:1.5px solid var(--gold);margin-left:10px}
section{padding:60px 0}
section.alt{background:var(--bg)}
h2{font-size:27px;margin-bottom:8px}
.lead{color:var(--muted);margin-bottom:32px;font-size:15px}
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g1{grid-template-columns:1fr}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--line);border-radius:11px;overflow:hidden;
transition:.18s;display:flex;flex-direction:column}
.card:hover{box-shadow:0 8px 22px rgba(22,50,79,.11);transform:translateY(-2px)}
.card .ph{background:var(--bg);height:190px;display:flex;align-items:center;justify-content:center;
color:var(--muted);font-size:13px;border-bottom:1px solid var(--line)}
.card .ph img{max-width:92%;max-height:170px;object-fit:contain}
.card .bd{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.card h3{font-size:16.5px;margin-bottom:3px}
.card .cat{font-size:12px;color:var(--muted);margin-bottom:9px}
.card p{font-size:13.5px;color:var(--body);flex:1}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.tag{font-size:11.5px;background:#EAF1F7;color:var(--navy);padding:3px 9px;border-radius:4px}
.tag.gold{background:#FBF3DC;color:#8A6D14}
.brandbar{display:flex;align-items:center;gap:11px;background:var(--bg);border:1px solid var(--line);
border-radius:9px;padding:11px 15px;margin-bottom:16px}
.brandbar img{height:34px;width:auto}
.brandbar .bt{font-size:13.5px;line-height:1.45}
.brandbar .bt b{display:block;color:var(--ink);font-size:14.5px}
.brandbar .bt span{color:var(--muted);font-size:12.5px}
.agent{display:inline-block;background:var(--navy);color:var(--gold-lt);font-size:12px;
padding:4px 12px;border-radius:5px;font-weight:700;letter-spacing:.5px}
.wm{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 15px;
border-radius:6px;font-weight:700;letter-spacing:2.2px;font-size:16px;flex-shrink:0}
.wm.sp{background:#fff;padding:0 14px;border:1px solid var(--line)}
.wm.sp img{height:20px;width:auto;display:block}
section.dark .wm.sp{border-color:rgba(255,255,255,.16)}
.wm.sm.sp img{height:14px}
.wm.sp i{color:#00A6A6;font-style:normal}
.wm.ka{background:#FFED00;color:#111;letter-spacing:1.6px}
.wm.sm{height:26px;font-size:12px;padding:0 10px;letter-spacing:1.4px;margin-right:8px;vertical-align:middle}
.blogo{height:30px;width:auto;vertical-align:middle;margin-right:8px}
.more{margin-top:12px;font-size:13.5px;color:var(--navy);font-weight:700}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{width:34%;background:var(--bg);color:var(--navy);font-weight:700}
.crumb{font-size:13px;color:var(--muted);padding:18px 0 0}
.crumb a:hover{color:var(--navy)}
.pdetail{display:grid;grid-template-columns:1fr 1fr;gap:38px;padding:26px 0 10px}
@media(max-width:820px){.pdetail{grid-template-columns:1fr;gap:22px}}
.pimg{background:var(--bg);border:1px solid var(--line);border-radius:11px;
min-height:330px;display:flex;align-items:center;justify-content:center;padding:18px}
.pimg img{max-width:100%;max-height:340px;object-fit:contain}
.ptitle{font-size:33px;margin:4px 0 8px}
.psub{color:var(--muted);font-size:14.5px;margin-bottom:18px}
ul.sell{list-style:none;margin:16px 0}
ul.sell li{padding:8px 0 8px 26px;position:relative;font-size:14.5px;color:var(--body);
border-bottom:1px dashed var(--line)}
ul.sell li:before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:700}
.note{background:#FFF8E6;border-left:3px solid var(--gold);padding:13px 16px;
font-size:13.5px;color:#7A6320;border-radius:0 6px 6px 0;margin:18px 0}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.fbtn{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 15px;
font-size:13.5px;color:var(--body);cursor:pointer;font-family:inherit}
.fbtn.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.guide-row{background:#fff;border:1px solid var(--line);border-radius:11px;padding:20px 22px;margin-bottom:14px}
.guide-row h3{font-size:17px;color:var(--navy);margin-bottom:5px}
.guide-row .rec{margin-top:11px;display:flex;gap:9px;flex-wrap:wrap}
.rec a{background:var(--navy);color:#fff;font-size:13px;padding:6px 13px;border-radius:5px}
.rec a:hover{background:var(--navy2)}
.vid{position:relative;border-radius:10px;overflow:hidden;background:#000;cursor:pointer;
aspect-ratio:16/9;border:1px solid var(--line)}
.vid img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:.2s}
.vid:hover img{opacity:1;transform:scale(1.02)}
.vid .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vid .play i{width:64px;height:64px;border-radius:50%;background:rgba(201,162,39,.94);
display:flex;align-items:center;justify-content:center;font-style:normal;color:#16324F;font-size:24px;
padding-left:5px;box-shadow:0 3px 14px rgba(0,0,0,.35)}
.vid iframe{width:100%;height:100%;border:0;display:block}
.vcap{font-size:14px;color:var(--body);margin-top:9px}
.vcap b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.faq details{border:1px solid var(--line);border-radius:9px;margin-bottom:11px;background:#fff}
.faq summary{padding:15px 18px;font-weight:700;cursor:pointer;font-size:15px}
.faq div{padding:0 18px 16px;color:var(--body);font-size:14.5px}
footer{background:var(--navy);color:#9FB4CB;padding:46px 0 30px;font-size:13.5px;margin-top:20px}
footer h4{color:#fff;font-size:15px;margin-bottom:12px}
footer a:hover{color:var(--gold-lt)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
@media(max-width:720px){.fgrid{grid-template-columns:1fr;gap:24px}}
.copy{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:18px;font-size:12.5px}
/* ── 深色區塊 ── */
section.dark{background:linear-gradient(170deg,#0B1726 0%,#102942 55%,#0A1522 100%);
color:#fff;position:relative;overflow:hidden}
section.dark:before{content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;
border-radius:50%;background:rgba(0,166,166,.16);filter:blur(120px)}
section.dark .wrap{position:relative;z-index:2}
section.dark h2{color:#fff}
section.dark .lead{color:#93A8C0}
/* ── 產業別解決方案 ── */
.ind{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);border-radius:12px;
padding:22px 18px;transition:.2s}
.ind:hover{background:rgba(255,255,255,.085);border-color:rgba(201,162,39,.55);transform:translateY(-3px)}
.ind img{width:38px;height:38px;object-fit:contain;margin-bottom:12px;
filter:brightness(0) invert(1) opacity(.88)}
.ind b{display:block;font-size:15.5px;margin-bottom:5px}
.ind span{font-size:13px;color:#93A8C0;line-height:1.6}
/* ── 核心優勢 ── */
.pillar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 22px;position:relative;
transition:.2s}
.pillar:hover{box-shadow:0 10px 26px rgba(22,50,79,.10);transform:translateY(-3px)}
.pillar i{display:block;font-style:normal;font-family:Arial,sans-serif;font-size:34px;font-weight:700;
color:var(--line);line-height:1;margin-bottom:12px}
.pillar h3{font-size:17px;margin-bottom:7px;color:var(--navy)}
.pillar p{font-size:13.8px;color:var(--body)}
/* ── 品牌識別帶 ── */
.bstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.bstrip{grid-template-columns:1fr}}
.bcell{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:12px;
padding:24px 22px;transition:.2s}
.bcell:hover{border-color:rgba(201,162,39,.5);background:rgba(255,255,255,.08)}
.bcell .bh{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.bcell h3{font-size:17px;margin:6px 0 6px}
.bcell p{font-size:13.6px;color:#9FB4CB}
.bcell .more{color:var(--gold-lt)}
.bcell img.blogo{height:40px;margin-right:0}
/* ── 內頁標題帶 ── */
.phead{background:radial-gradient(760px 340px at 22% 0%,#1B4266 0%,rgba(27,66,102,0) 66%),
linear-gradient(160deg,#0B1726,#102942 70%,#0A1522);color:#fff;padding:52px 0 46px;position:relative;overflow:hidden}
.phead:before{content:"";position:absolute;inset:0;opacity:.45;pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;
-webkit-mask-image:radial-gradient(620px 320px at 25% 45%,#000 5%,transparent 80%);
mask-image:radial-gradient(620px 320px at 25% 45%,#000 5%,transparent 80%)}
.phead .wrap{position:relative;z-index:2}
.phead h1{font-size:32px;margin-bottom:9px}
.phead p{color:#A6BACF;font-size:15px;max-width:720px}
@media(max-width:560px){.phead h1{font-size:25px}}
.phead+section{padding-top:44px}
/* ── 捲動淡入 ── */
.rv{opacity:0;transform:translateY(20px)}
.rv.in{opacity:1;transform:none;transition:opacity .68s ease,transform .68s cubic-bezier(.21,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
.cta{background:linear-gradient(140deg,#0E2338,#16324F 60%,#0B1726);color:#fff;text-align:center;
padding:56px 24px;border-radius:14px;margin:10px 0;border:1px solid rgba(255,255,255,.09)}
.cta h2{color:#fff}.cta p{color:#C9D6E4;margin-bottom:6px}