:root{--brand:#66c8ca;--brand2:#e9fbf8;--ink:#273638;--muted:#6c7a7b;--line:#dce8e7;--yellow:#fff36b}
*{box-sizing:border-box} body{margin:0;font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;color:var(--ink);background:#fff}
a{text-decoration:none;color:inherit} img{max-width:100%;display:block}.wrap{width:min(1180px,calc(100% - 36px));margin:auto}
.top{background:var(--brand);color:white}.top .wrap{height:46px;display:flex;align-items:center;justify-content:space-between;font-size:14px}
header{background:white;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.nav{min-height:82px;display:flex;align-items:center;gap:28px}.logo{font-size:25px;font-weight:800;color:#ef287d;white-space:nowrap}.logo span{color:#727b7b}.links{margin-left:auto;display:flex;gap:30px}.links a:hover{color:#27a9ad}
.hero{background:linear-gradient(120deg,#eefcfb,#fff);padding:60px 0}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.eyebrow{color:#1d9da2;font-weight:700;letter-spacing:.12em}.hero h1{font-size:46px;line-height:1.2;margin:12px 0 18px}.hero p{font-size:18px;line-height:1.9;color:var(--muted)}
.hero-card{min-height:340px;border-radius:28px;background:#cfeff0;box-shadow:0 18px 45px #7abfc02e;overflow:hidden}
.hero-card img{width:100%;height:340px;object-fit:cover}
.btns{display:flex;gap:12px;margin-top:26px}.btn{padding:13px 22px;border-radius:999px;background:var(--brand);color:white;font-weight:700}.btn.alt{background:white;color:#248f93;border:1px solid #93d6d8}
section{padding:64px 0}.section-head{text-align:center;margin-bottom:32px}.section-head h2{font-size:32px;margin:0 0 8px}.section-head p{color:var(--muted);margin:0}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:white;transition:.2s}.card:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000012}
.thumb{aspect-ratio:1/1;background:#f2f7f7}.thumb img{width:100%;height:100%;object-fit:cover}.card-body{padding:17px}.card h3{font-size:18px;margin:0 0 7px}.card p{font-size:14px;color:var(--muted);line-height:1.65;margin:0}
.steps{background:var(--brand2)}.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.step{background:white;padding:24px;border-radius:16px}.num{font-size:30px;font-weight:800;color:var(--brand)}
footer{margin-top:30px;background:#55bec1;color:white;padding:35px 0;text-align:center;line-height:1.8}.crumb{padding:22px 0;color:#718080;font-size:14px}
.page-title{padding:38px 0;background:#effbfa}.page-title h1{margin:0 0 10px;font-size:36px}.page-title p{margin:0;color:var(--muted)}
.product-placeholder{padding:55px 0}.placeholder{border:2px dashed #b8d8d8;border-radius:18px;padding:45px;text-align:center;color:#708080;background:#fbfefe}.placeholder strong{display:block;color:#2c7779;font-size:21px;margin-bottom:8px}
.notice{margin-top:20px;padding:18px 20px;background:#fffdea;border-radius:12px;line-height:1.7}
@media(max-width:900px){.links{gap:14px;font-size:14px}.hero-grid{grid-template-columns:1fr}.hero h1{font-size:36px}.grid{grid-template-columns:repeat(2,1fr)}.step-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.wrap{width:min(100% - 24px,1180px)}.top .wrap{height:auto;padding:9px 0}.nav{min-height:68px}.links{display:none}.logo{font-size:21px}.hero{padding:38px 0}.hero h1{font-size:31px}.hero-card{min-height:340px;border-radius:28px;background:#cfeff0;box-shadow:0 18px 45px #7abfc02e;overflow:hidden}
.hero-card img{width:100%;height:340px;object-fit:cover}.grid{gap:12px}.card-body{padding:13px}.card h3{font-size:16px}.step-grid{grid-template-columns:1fr}.page-title h1{font-size:29px}}

/* Dreamweaver 可直接換圖：網站圖片均使用 HTML <img> 標籤，不以 CSS background-image 放商品圖 */
.dw-image-box{position:relative;background:#eef7f7;overflow:hidden}
.dw-image-box img{width:100%;height:100%;object-fit:cover}
.dw-image-note{display:none}