@charset "utf-8";
/* ============================================================
   維濟生技 首頁 2026 改版新增區塊
   2026-09-10 建立。只有首頁用得到，刻意不寫進 css_main.css，
   免得影響其他頁面。既有區塊的樣式一律不動。

   色票：深綠 #335524 / 品牌綠 #4F7F3B / 淺綠底 #EDF3EA
        金 #C8A24A / 米白 #F7F5F0 / 墨 #242424
   ============================================================ */
:root{
  --wj-green:#4F7F3B;
  --wj-green-d:#335524;
  --wj-green-l:#EDF3EA;
  --wj-gold:#C8A24A;
  --wj-gold-d:#8C6318;
  --wj-cream:#F7F5F0;
  --wj-ink:#242424;
  --wj-mid:#5B5B55;
  --wj-line:#DEDED8;
}

/* ---------- 共用 ---------- */
.wjSection{padding:64px 0}
.wjSection.alt{background:var(--wj-cream)}
.wjHead{text-align:center;margin-bottom:40px}
.wjHead h2{
  font-size:30px;line-height:1.4;font-weight:700;color:var(--wj-green-d);
  margin:0;letter-spacing:.04em;
}
.wjHead .wjRule{width:52px;height:4px;background:var(--wj-gold);border-radius:2px;margin:16px auto 0}
.wjHead p{margin:14px 0 0;color:var(--wj-mid);font-size:15.5px;line-height:1.9;text-wrap:balance}
.wjBtn{
  display:inline-block;padding:12px 30px;border-radius:2px;
  background:var(--wj-green);color:#fff;font-size:15px;letter-spacing:.06em;
  text-decoration:none;transition:background .18s;
}
.wjBtn:hover,.wjBtn:focus{background:var(--wj-green-d);color:#fff;text-decoration:none}
.wjBtn.ghost{background:transparent;border:1px solid var(--wj-green);color:var(--wj-green)}
.wjBtn.ghost:hover{background:var(--wj-green);color:#fff}
.wjBtn.gold{background:var(--wj-gold-d)}
.wjBtn.gold:hover{background:#6f4d12}

/* ---------- 公告細帶 ----------
   站台的兩個選單（桌機 .headerContainer、手機 .rwdMenuContainer）都是
   position:fixed; top:0，所以細帶不能只是放在最上面，會被蓋住。
   做法：細帶自己也 fixed 在最上層，兩個選單往下推一條的高度，
   再用 body 的 padding-top 把內容整個下移（用 padding 不用 margin，
   才不會蓋掉 .rwd_header_mt 在手機版原本的 margin 設定）。
   這些規則全部掛在 body.wjHasBar 底下，只有首頁、而且細帶有開時才生效。 */
.wjAnnounce{
  background:var(--wj-green-d);color:#fff;text-align:center;
  font-size:14px;letter-spacing:.06em;padding:10px 16px;line-height:1.7;
  position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--wj-bar-h);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.wjAnnounce a{color:#fff;text-decoration:underline;text-underline-offset:3px}
body.wjHasBar{--wj-bar-h:42px;padding-top:var(--wj-bar-h)}
body.wjHasBar .headerContainer,
body.wjHasBar .rwdMenuContainer,
body.wjHasBar .rwdHeaderNavContainer,
body.wjHasBar .rwdCatBarContainer{top:var(--wj-bar-h)}

/* ---------- 主標語 ---------- */
.wjSlogan{background:#fff;padding:58px 0 50px;text-align:center}
.wjSlogan h1{
  font-size:34px;line-height:1.55;font-weight:700;color:var(--wj-green-d);
  margin:0 auto;max-width:26em;letter-spacing:.02em;
  text-wrap:balance;line-break:strict;            /* 不支援的瀏覽器會自動忽略，退回一般換行 */
}
.wjSlogan p{
  margin:20px auto 0;max-width:44em;color:var(--wj-mid);
  font-size:16px;line-height:2;
}

/* ---------- 依你的生活選 ---------- */
.wjLifeGrid{display:flex;flex-wrap:wrap;justify-content:center;margin:0 -12px}
.wjLifeCell{width:25%;padding:0 12px;margin-bottom:24px}
.wjLifeCard{
  display:block;height:100%;background:#fff;border:1px solid var(--wj-line);
  padding:22px 20px 26px;text-align:center;text-decoration:none;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.wjLifeCard:hover{
  border-color:var(--wj-green);transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(51,85,36,.10);text-decoration:none;
}
.wjLifeCard img{width:100%;height:auto;display:block;margin-bottom:14px}
.wjLifeCard .t{font-size:22px;font-weight:700;color:var(--wj-green-d);line-height:1.5}
.wjLifeCard .d{margin-top:10px;color:var(--wj-mid);font-size:14.5px;line-height:1.9;min-height:3.8em;text-wrap:pretty}
.wjLifeCard .go{margin-top:14px;color:var(--wj-gold-d);font-size:14px;letter-spacing:.08em}

/* ---------- 多入更划算 ---------- */
.wjBundleGrid{display:flex;flex-wrap:wrap;margin:0 -10px}
.wjBundleCell{width:25%;padding:0 10px;margin-bottom:22px}
.wjBundleCard{
  display:block;background:#fff;border:1px solid var(--wj-line);height:100%;
  text-decoration:none;transition:border-color .18s,box-shadow .18s;
}
.wjBundleCard:hover{border-color:var(--wj-green);box-shadow:0 8px 22px rgba(51,85,36,.10);text-decoration:none}
.wjBundleCard .pic{background:var(--wj-cream)}
.wjBundleCard .pic img{width:100%;height:auto;display:block}
.wjBundleCard .body{padding:16px 18px 20px}
.wjBundleCard .n{font-size:16.5px;color:var(--wj-ink);line-height:1.6;font-weight:600}
.wjBundleCard .num{font-size:13px;color:#9a9a92;margin-top:4px;letter-spacing:.06em}
.wjBundleCard .pr{margin-top:10px}
.wjBundleCard .pr .productPrice{font-size:21px;color:var(--wj-gold-d);font-weight:700}

/* ---------- 信任背書 ---------- */
/* 最新優惠區的雲朵裝飾是 position:absolute; top:-383px，會往上壓到這一區，
   所以這裡必須自己拉一層 z-index，否則第一格文字會被雲朵蓋住。 */
.wjTrust{background:var(--wj-green-d);color:#fff;padding:58px 0 62px;position:relative;z-index:2}
.wjTrust .wjHead h2{color:#fff}
.wjTrust .wjHead .wjRule{background:var(--wj-gold)}
.wjTrustGrid{display:flex;flex-wrap:wrap;margin:0 -14px}
.wjTrustCell{width:25%;padding:0 14px;text-align:center}
.wjTrustCell img{width:66px;height:66px;object-fit:contain;margin:0 auto 14px;display:block}
.wjTrustCell .t{font-size:17px;font-weight:600;line-height:1.65;color:#fff}
.wjTrustCell .d{margin-top:8px;font-size:14px;line-height:1.9;color:rgba(255,255,255,.76);text-wrap:pretty}

/* ---------- 品牌短文 ---------- */
.wjBrandShort{
  background:var(--wj-green);background-size:cover;background-position:center;
  color:#fff;padding:72px 0;text-align:center;position:relative;
}
.wjBrandShort .veil{position:absolute;inset:0;background:rgba(51,85,36,.72)}
.wjBrandShort .inner{position:relative}
.wjBrandShort p{
  font-size:23px;line-height:1.95;margin:0 auto 26px;max-width:34em;
  color:#fff;letter-spacing:.02em;text-wrap:balance;
}
.wjBrandShort .wjBtn{background:#fff;color:var(--wj-green-d)}
.wjBrandShort .wjBtn:hover{background:var(--wj-gold);color:#fff}

/* ---------- 加入會員 ---------- */
.wjMember{background:var(--wj-green-l);padding:56px 0;text-align:center;
  background-size:cover;background-position:center}
.wjMember h2{font-size:26px;font-weight:700;color:var(--wj-green-d);margin:0}
.wjMember p{margin:14px auto 24px;max-width:40em;color:var(--wj-mid);font-size:15.5px;line-height:1.95;text-wrap:balance}

/* ---------- 常見問題 ---------- */
.wjFaqList{max-width:820px;margin:0 auto;border-top:1px solid var(--wj-line)}
.wjFaqItem{border-bottom:1px solid var(--wj-line)}
.wjFaqQ{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  padding:18px 40px 18px 4px;font-size:16.5px;color:var(--wj-ink);
  line-height:1.7;position:relative;
}
.wjFaqQ::after{
  content:"＋";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:var(--wj-green);font-size:19px;
}
.wjFaqItem.open .wjFaqQ::after{content:"－"}
.wjFaqA{display:none;padding:0 4px 20px;color:var(--wj-mid);font-size:15px;line-height:2}
.wjFaqItem.open .wjFaqA{display:block}

/* ---------- 訂閱 / LINE ---------- */
.wjSubscribe{background:#fff;padding:52px 0;text-align:center;border-top:1px solid var(--wj-line)}
.wjSubscribe h2{font-size:24px;font-weight:700;color:var(--wj-green-d);margin:0}
.wjSubscribe p{margin:12px auto 22px;max-width:38em;color:var(--wj-mid);font-size:15.5px;line-height:1.95}

/* ---------- 熱銷商品：加一顆立即購買 ---------- */
.wjBuyRow{text-align:center;padding:0 8px 16px}
.wjBuyRow .wjBtn{padding:9px 22px;font-size:14px}

/* ============================================================
   RWD
   ============================================================ */
@media (max-width:991px){
  .wjSection{padding:48px 0}
  .wjSlogan h1{font-size:27px}
  .wjHead h2{font-size:25px}
  .wjLifeCell{width:50%}
  .wjBundleCell{width:50%}
  .wjTrustCell{width:50%;margin-bottom:26px}
  .wjBrandShort p{font-size:19px}
}
@media (max-width:575px){
  body.wjHasBar{--wj-bar-h:38px}
  .wjSection{padding:38px 0}
  .wjAnnounce{font-size:12.5px;padding:8px 12px}
  .wjSlogan{padding:38px 0 32px}
  .wjSlogan h1{font-size:22px;line-height:1.6}
  .wjSlogan p{font-size:14.5px}
  .wjHead h2{font-size:21px}
  .wjLifeCard{padding:16px 14px 20px}
  .wjLifeCard .t{font-size:18px}
  .wjLifeCard .d{font-size:13.5px;min-height:0}
  .wjTrustCell .t{font-size:15.5px}
  .wjBrandShort{padding:52px 0}
  .wjBrandShort p{font-size:17px}
  .wjFaqQ{font-size:15px}
}

/* ============================================================
   區塊互不干擾（2026-09-10）
   首頁區塊改成可由後台自由排序之後，區塊之間不能再互相溢出，
   否則順序一換，被壓到的對象就跟著變。

   原本的問題：最新優惠區塊裡的雲朵裝飾是
       .bg_cloud_top{ position:absolute; top:-383px }
   往上突出 383px 蓋住「前一個區塊」。前一區是誰，取決於排序。

   解法：每個區塊都變成自給自足的盒子 ——
     ・isolation:isolate 讓 z-index 只在自己區塊內生效
     ・overflow:hidden 讓任何裝飾都被裁在自己區塊內
     ・兩顆雲改成貼在自己區塊的下緣、壓在內容底下
   ============================================================ */
.wjSlogan,
.indesUnderBanner,
.indexVedio,
.indexNewProductContainer,
.wjSection,
.wjTrust,
.indexCloudCustomContainer,
.indexNewsContainer,
.wjBrandShort,
.wjMember,
.wjSubscribe,
.indexContactContainer{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

/* 兩顆雲：改成留在自己區塊的下緣，並壓在內容底下 */
.indexNewsContainer .bg_cloud_top{
  top:auto; bottom:0; left:0; z-index:-1;
}
.indexNewsContainer .bg_cloud_bottom{
  top:auto; bottom:0; right:0; z-index:-1;
}
/* 熱銷商品上方那張裝飾圖同樣壓在內容底下，不會蓋到商品文字 */
.indexNewProductContainer .yellow_people{ z-index:-1; }