:root { --blue-950:#061c35; --blue-900:#003366; --blue-700:#0066cc; --cyan:#00aeef; --ink:#182433; --muted:#627083; --line:#dce4ed; --soft:#f4f8fc; --white:#fff; --success:#16803d; --warning:#b66d00; --danger:#bf2636; --radius:18px; --shadow:0 16px 40px rgba(2,40,78,.1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--white); color:var(--ink); font-family:"Noto Sans TC","PingFang TC",system-ui,sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.container { width:min(1140px,calc(100% - 40px)); margin:auto; }
.skip-link { position:absolute; left:10px; top:-56px; z-index:100; background:#fff; padding:.6rem 1rem; color:var(--blue-900); font-weight:700; border-radius:0 0 8px 8px; }
.skip-link:focus { top:0; }
.site-header { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-bottom:1px solid rgba(220,228,237,.9); }
.nav { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:1.25rem; }
.brand { display:flex; align-items:center; gap:.68rem; font-weight:900; color:var(--blue-900); letter-spacing:.02em; line-height:1.18; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(145deg,var(--blue-700),var(--cyan)); color:#fff; font-size:.95rem; box-shadow:0 6px 14px rgba(0,102,204,.24); }
.brand small { display:block; color:var(--muted); font-size:.62rem; letter-spacing:.05em; font-weight:700; }
.nav-links { list-style:none; display:flex; align-items:center; gap:.25rem; padding:0; margin:0; }
.nav-links a { display:block; padding:.55rem .72rem; color:#344458; font-size:.91rem; font-weight:700; border-radius:9px; }
.nav-links a:hover,.nav-links a[aria-current="page"] { background:#eaf4ff; color:var(--blue-700); }
.nav-toggle { display:none; padding:.45rem .65rem; color:var(--blue-900); border:1px solid var(--line); background:white; border-radius:9px; }
.nav-cta { margin-left:.35rem; }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:.55rem; min-height:44px; border:1px solid transparent; padding:.65rem 1.05rem; border-radius:10px; background:var(--blue-700); color:#fff; font-weight:800; transition:transform .2s,box-shadow .2s,background .2s; }
.btn:hover { background:#0058b3; color:#fff; box-shadow:0 8px 20px rgba(0,102,204,.22); transform:translateY(-1px); }
.btn-outline { border-color:rgba(255,255,255,.54); background:transparent; color:#fff; }
.btn-outline:hover { background:#fff; border-color:#fff; color:var(--blue-900); }
.btn-light { border-color:var(--line); background:#fff; color:var(--blue-900); }
.btn-light:hover { border-color:#c4d8eb; background:#f6fbff; color:var(--blue-900); }
.btn-danger { background:var(--danger); }
.eyebrow { margin:0 0:.75rem; color:var(--blue-700); font-weight:800; font-size:.86rem; letter-spacing:.1em; }
h1,h2,h3 { line-height:1.25; color:var(--blue-950); }
h1 { margin:0; font-size:clamp(2.25rem,5vw,4.45rem); letter-spacing:-.05em; }
h2 { margin:0; font-size:clamp(1.7rem,3vw,2.6rem); letter-spacing:-.035em; }
h3 { margin:.1rem 0 .45rem; font-size:1.15rem; }
.lead { color:#526174; font-size:1.09rem; }
.section { padding:88px 0; }
.section-soft { background:var(--soft); }
.section-head { max-width:700px; margin-bottom:2.25rem; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.hero { overflow:hidden; position:relative; min-height:600px; padding:115px 0 88px; color:#fff; background:radial-gradient(circle at 83% 20%,rgba(0,174,239,.28),transparent 25rem),linear-gradient(125deg,#031529 0%,#003366 57%,#005aa8 100%); }
.hero:after { content:""; position:absolute; inset:0; opacity:.26; background-image:linear-gradient(rgba(105,193,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(105,193,255,.4) 1px,transparent 1px); background-size:58px 58px; mask-image:linear-gradient(to bottom,black,transparent); }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.18fr .82fr; gap:3rem; align-items:center; }
.hero h1 { color:#fff; max-width:760px; }
.hero .eyebrow { color:#9fe7ff; }
.hero .lead { max-width:620px; color:#d9edfb; font-size:1.17rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; }
.hero-points { display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:2.25rem; color:#dceefd; font-size:.92rem; font-weight:700; }
.hero-points i { color:#69d7fb; margin-right:.35rem; }
.hero-orbit { width:min(100%,420px); aspect-ratio:1; position:relative; margin:auto; border:1px solid rgba(159,231,255,.25); border-radius:50%; box-shadow:inset 0 0 70px rgba(0,174,239,.18),0 0 90px rgba(0,105,199,.2); }
.hero-orbit:before,.hero-orbit:after { content:""; position:absolute; border:1px solid rgba(159,231,255,.3); border-radius:50%; }
.hero-orbit:before { inset:12%; }.hero-orbit:after { inset:29%; }
.orbit-core { position:absolute; inset:38%; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#00aeef,#0066cc); box-shadow:0 0 38px rgba(76,213,255,.7); font-size:2rem; }
.orbit-node { position:absolute; width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:#fff; color:var(--blue-700); box-shadow:0 9px 22px rgba(0,12,31,.22); }
.orbit-node.n1 { top:4%; left:45%; }.orbit-node.n2 { right:5%; top:43%; }.orbit-node.n3 { left:7%; bottom:26%; }.orbit-node.n4 { right:32%; bottom:3%; }
.grid { display:grid; gap:1.25rem; }
.service-grid { grid-template-columns:repeat(4,1fr); }
.card { height:100%; padding:1.55rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 4px 14px rgba(3,47,89,.035); transition:transform .25s,box-shadow .25s,border-color .25s; }
.card:hover { transform:translateY(-5px); border-color:#b5d6ef; box-shadow:var(--shadow); }
.icon-box { width:48px; height:48px; display:grid; place-items:center; margin-bottom:1.15rem; background:#e7f4ff; color:var(--blue-700); border-radius:14px; font-size:1.25rem; }
.card p { color:var(--muted); font-size:.95rem; margin:0 0 1rem; }
.text-link { display:inline-flex; align-items:center; gap:.4rem; color:var(--blue-700); font-weight:800; font-size:.92rem; }
.text-link:hover { color:#004f9f; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.stat { padding:1.5rem; text-align:center; border-right:1px solid var(--line); }.stat:last-child { border-right:0; }
.stat strong { display:block; color:var(--blue-700); font-size:1.75rem; line-height:1.2; }.stat span { color:var(--muted); font-size:.88rem; font-weight:700; }
.feature-layout { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; }
.visual-panel { padding:2.1rem; min-height:360px; background:linear-gradient(150deg,#003366,#0066cc); color:#fff; border-radius:24px; box-shadow:var(--shadow); }
.visual-panel h3 { color:#fff; font-size:1.55rem; }.visual-panel p { color:#daefff; }
.system-lines { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:2.2rem; }.system-lines:before { content:""; position:absolute; left:16%; right:16%; top:28px; border-top:1px dashed rgba(255,255,255,.55); }
.system-lines div { position:relative; text-align:center; font-size:.84rem; font-weight:700; }.system-lines i { display:grid; width:58px; height:58px; place-items:center; margin:0 auto .55rem; position:relative; z-index:1; background:#fff; color:var(--blue-700); border-radius:18px; }
.check-list { list-style:none; padding:0; margin:1.35rem 0 0; }.check-list li { position:relative; padding:.48rem 0 .48rem 1.8rem; color:#405065; }.check-list li:before { content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; color:var(--success); }
.process { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; counter-reset:process; }.process article { position:relative; padding:1.45rem 1.1rem 1.2rem; background:#fff; border:1px solid var(--line); border-radius:14px; }.process article:before { counter-increment:process; content:"0" counter(process); display:block; color:var(--cyan); font-weight:900; font-size:1.5rem; }.process p { color:var(--muted); font-size:.9rem; margin:0; }
.project-grid { grid-template-columns:repeat(3,1fr); }.project-card { overflow:hidden; padding:0; }.project-visual { min-height:190px; padding:1.3rem; display:flex; align-items:end; color:#fff; background:linear-gradient(135deg,#003366,#00aeef); }.project-visual.network { background:linear-gradient(135deg,#111b31,#315eac); }.project-visual.security { background:linear-gradient(135deg,#14202d,#168b82); }.project-card .body { padding:1.35rem; }.tag { display:inline-block; padding:.22rem .55rem; border-radius:99px; background:#eaf4ff; color:var(--blue-700); font-size:.74rem; font-weight:800; }
.cta { position:relative; overflow:hidden; padding:3rem; background:linear-gradient(110deg,#003366,#0066cc 65%,#00aeef); color:white; border-radius:24px; }.cta:after { content:""; position:absolute; right:-80px; top:-100px; width:280px; height:280px; border:35px solid rgba(255,255,255,.12); border-radius:50%; }.cta h2 { color:#fff; max-width:660px; }.cta p { color:#dff3ff; max-width:650px; }.cta .hero-actions { position:relative; z-index:1; }
.page-hero { padding:85px 0 62px; background:linear-gradient(135deg,#f0f8ff,#fff); border-bottom:1px solid #e2ebf3; }.page-hero .lead { max-width:720px; }.breadcrumbs { margin-bottom:1rem; color:var(--muted); font-size:.87rem; }.breadcrumbs a { color:var(--blue-700); }
.service-detail { display:grid; grid-template-columns:.85fr 1.15fr; gap:3rem; align-items:start; }.service-aside { position:sticky; top:100px; padding:1.65rem; color:#fff; background:var(--blue-900); border-radius:var(--radius); }.service-aside h2 { color:#fff; font-size:1.55rem; }.service-aside p { color:#d4e7f7; }.service-aside .icon-box { background:rgba(255,255,255,.12); color:#8fe6ff; }.detail-block { padding:1.55rem; margin-bottom:1rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }.detail-block h2 { font-size:1.4rem; }.chips { display:flex; flex-wrap:wrap; gap:.55rem; }.chip { padding:.38rem .7rem; border:1px solid #cfe2f2; background:#f8fcff; color:#245a82; border-radius:99px; font-size:.86rem; font-weight:700; }
.service-image { display:block; width:100%; margin:1.25rem 0; border:1px solid rgba(255,255,255,.18); border-radius:13px; background:rgba(255,255,255,.08); }
.form-card { max-width:860px; margin:auto; padding:2rem; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow); }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }.field { display:grid; gap:.4rem; }.field.full { grid-column:1/-1; }.field label { font-size:.9rem; font-weight:800; color:#2e4054; }.field input,.field select,.field textarea { width:100%; padding:.72rem .78rem; background:#fff; color:var(--ink); border:1px solid #bfccda; border-radius:9px; outline:none; }.field textarea { min-height:140px; resize:vertical; }.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--blue-700); box-shadow:0 0 0 3px rgba(0,102,204,.13); }.field small { color:var(--muted); }.form-foot { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-top:1.25rem; }.form-note { margin:0; color:var(--muted); font-size:.8rem; }.form-status { display:none; margin:1rem 0 0; padding:.75rem .9rem; border-radius:9px; font-weight:700; }.form-status.show { display:block; }.form-status.success { color:#075b2c; background:#e5f8ed; }.form-status.error { color:#8a1222; background:#ffe9ec; }.hp { position:absolute !important; left:-10000px !important; opacity:0 !important; pointer-events:none !important; }
.message-list { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }.message { padding:1.25rem; background:#fff; border:1px solid var(--line); border-radius:14px; }.message p { margin:.65rem 0; color:#4d5c6e; }.message footer { font-size:.84rem; color:var(--muted); font-weight:700; }
.empty { padding:1.5rem; color:var(--muted); text-align:center; border:1px dashed #bfd2e3; border-radius:13px; background:#fbfdff; }
.news-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.news-card { padding:1.4rem; background:#fff; border:1px solid var(--line); border-radius:14px; }.news-card time { color:var(--blue-700); font-weight:800; font-size:.85rem; }.news-card p { color:var(--muted); white-space:pre-line; }
.admin-shell { display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 70px); background:var(--soft); }.admin-nav { padding:1.3rem; background:var(--blue-950); color:#e5f2ff; }.admin-nav strong { display:block; color:#fff; padding:.4rem .6rem 1.2rem; }.admin-nav button { width:100%; margin:.22rem 0; padding:.6rem; color:#d7e9fa; text-align:left; background:transparent; border:0; border-radius:8px; }.admin-nav button:hover,.admin-nav button.active { background:rgba(255,255,255,.12); color:#fff; }.admin-main { padding:2rem; }.admin-top { display:flex; justify-content:space-between; align-items:center; gap:1rem; }.dashboard-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.4rem 0; }.dash-stat { padding:1.15rem; background:#fff; border:1px solid var(--line); border-radius:13px; }.dash-stat span { color:var(--muted); font-size:.86rem; font-weight:700; }.dash-stat strong { display:block; margin-top:.2rem; color:var(--blue-700); font-size:1.8rem; }.admin-table-wrap { overflow:auto; background:#fff; border:1px solid var(--line); border-radius:13px; }.admin-table { width:100%; border-collapse:collapse; min-width:720px; }.admin-table th,.admin-table td { padding:.82rem .9rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); font-size:.88rem; }.admin-table th { color:#506174; background:#f9fbfd; }.admin-table td p { margin:.25rem 0; max-width:280px; color:#526174; white-space:pre-line; }.admin-table button { margin:.1rem; padding:.35rem .55rem; border:1px solid #bed2e4; border-radius:6px; background:#fff; color:var(--blue-900); font-size:.78rem; font-weight:700; }.admin-table button:hover { background:#eaf4ff; }.admin-login { min-height:calc(100vh - 70px); display:grid; place-items:center; padding:2rem; background:linear-gradient(140deg,#edf8ff,#fff); }.login-card { width:min(430px,100%); padding:2rem; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); }
.site-footer { padding:55px 0 24px; background:var(--blue-950); color:#d3e0eb; }.footer-grid { display:grid; grid-template-columns:1.35fr .9fr .9fr; gap:2rem; }.site-footer .brand { color:#fff; }.site-footer p { color:#b6c9d9; font-size:.93rem; }.footer-title { margin:0 0 .85rem; color:#fff; font-weight:800; }.footer-links { list-style:none; padding:0; margin:0; }.footer-links li { margin:.35rem 0; }.footer-links a:hover { color:#7bdcff; }.copyright { margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.13); color:#94adbf; font-size:.82rem; }
.reveal { opacity:0; transform:translateY(14px); transition:opacity .55s ease,transform .55s ease; }.reveal.visible { opacity:1; transform:none; }
@media (max-width:1000px) { .service-grid { grid-template-columns:repeat(2,1fr); }.hero-grid,.feature-layout,.service-detail { grid-template-columns:1fr; }.hero-orbit { max-width:340px; }.service-aside { position:static; }.project-grid,.news-list { grid-template-columns:repeat(2,1fr); }.process { grid-template-columns:repeat(2,1fr); } .nav-links { gap:0; }.nav-links a { padding:.5rem; font-size:.83rem; } }
@media (max-width:760px) { .container { width:min(100% - 30px,1140px); }.nav { min-height:64px; }.nav-toggle { display:block; }.nav-links { display:none; position:absolute; left:0; right:0; top:64px; padding:.7rem 15px 1rem; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 12px 20px rgba(0,36,67,.09); }.nav-links.open { display:block; }.nav-links a { padding:.65rem; }.nav-cta { display:none; }.hero { min-height:auto; padding:80px 0 70px; }.hero h1 { font-size:2.4rem; }.hero-orbit { display:none; }.section { padding:62px 0; }.stats,.service-grid,.project-grid,.news-list,.message-list,.footer-grid { grid-template-columns:1fr; }.stat { border-right:0; border-bottom:1px solid var(--line); }.stat:last-child { border-bottom:0; }.form-card { padding:1.25rem; }.form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.form-foot { align-items:stretch; flex-direction:column; }.cta { padding:2rem 1.4rem; }.process { grid-template-columns:1fr; }.admin-shell { grid-template-columns:1fr; }.admin-nav { display:flex; flex-wrap:wrap; gap:.25rem; padding:.8rem; }.admin-nav strong { width:100%; padding:.2rem .4rem .5rem; }.admin-nav button { width:auto; }.admin-main { padding:1.15rem; }.dashboard-stats { grid-template-columns:1fr; }.admin-top { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } .reveal { opacity:1; transform:none; } }