:root {
        /*===================================================================================*/
        /*--------頁面間距設定--------*/
        /*===================================================================================*/
        --pd-xs: 0;
        --pd-md: 50px;
        --pd-lg: 4.79vw;
        --pd-xxl: 4.79vw;
        --pd-inside-xs: 40px;
        --pd-inside-md: 13.22vw;
        --pd-inside-lg: 13.22vw;
        --pd-inside-xxl: 13.22vw;
        --pd-mobile-top: 50px;
        --pd-mobile-bottom: 60px;
        /* v11 內頁行動版左右版心留白（總寬度扣減值＝每側 40px） */
        --v11-gutter-page-xs: 80px;
        /* v21 統一版心 token */
        --v21-gutter-page-xs: 40px;
        --v21-gutter-desktop: 56px;
        --v21-maxw: 1280px;
        /*===================================================================================*/
        /*--------全域設定--------*/
        /*===================================================================================*/
        /*--------主要色系--------*/
        /*主色，預設為#7d5141*/
        --color-main: #7d5141;
        --color-main-dark: #56423a;
        /*輔色，預設為#5f796f*/
        --color-second: #72795f;
        /*警告色，預設為#ce2f2f*/
        --color-alert: #eb4d4d;
        /*敘述文字顏色*/
        --color-text: #191f23;
        /*敘述文字顏色 / 03版banner數字顏色*/
        --color-text-light: #858585;
        /*麵包屑連結顏色*/
        --color-breadcrumbs: #535353;
        /*麵包屑連結生效顏色*/
        --color-breadcrumbs-active: #000;
        /*H1顏色：每一頁最大的抬頭*/
        --color-h1: #000;
        /*線條顏色*/
        --color-border: #e5e4e4;
        --color-border-dark: #7d5141;
        /*點點顏色，預設為#c6c6c6*/
        --color-dot: #c6c6c6;
        /*導角尺寸，預設為5px*/
        --size-radius: 5px;
        /*字型種類：英文 Segoe UI、中文後備 Noto Sans TC*/
        --font-family-en: "Segoe UI", sans-serif;
        --font-family-tw: "Segoe UI", "Noto Sans TC", sans-serif;
        --font-family: "Segoe UI", "Noto Sans TC", sans-serif;
        --font-family-title: "Segoe UI", "Noto Sans TC", sans-serif;
        /*===================================================================================*/
        /*--------HEADER--------*/
        /*===================================================================================*/
        /*手機header高度*/
        --height-nav-xs: 60px;
        /*手機選單項目a的行高*/
        --line-height-nav-xs: 50px;
        /*header高度-平板以上，預設11.7vw*/
        --height-nav-md: 7.7vw;
        /*header高度縮小-平板以上:72px*/
        --height-nav-mini-md: 64px;
        /*header高度縮小-平板以上:72px / 4.5vw*/
        --height-nav-mini-xxl: 72px;
        /*手機子選單寬度*/
        --width-nav-xs: 70vw;
        --width-nav-md: 35vw;
        /*logo高度:最小到最大*/
        --height-logo: 2.34vw;
        --height-logo-min: 50px;
        --height-logo-max: 65px;
        /*桌機header背景色*/
        --color-bg-header: rgba(255, 255, 255, 1);
        /*首頁限定!!桌機header背景色*/
        --color-bg-header-index: rgba(255, 255, 255, 0);
        /*會員購物車框線顏色，預設為#636363*/
        --color-cart-border: #636363;
        /*返回顏色預設為#383838*/
        --color-btn-back: #383838;
        /*===================================================================================*/
        /*--------公告--------*/
        /*===================================================================================*/
        /*公告高度*/
        --height-countdown-xs: 70px;
        --height-countdown-lg: 60px;
        /*===================================================================================*/
        /*--------選單--------*/
        /*===================================================================================*/
        /*選單全域設定*/
        /*全站!!手機漢堡線條顏色預設為--#000*/
        --color-hamburger-xs-inpage: #000;
        /*全站!!桌面漢堡線條顏色預設為--#000*/
        --color-hamburger-lg-inpage: #000;
        /*全站!!桌面漢堡開啟後，線條顏色，預設為#fff*/
        --color-hamburger-lg-active: #fff;
        /*首頁專用!!手機漢堡線條顏色預設為#000*/
        --color-hamburger-xs-index: #000;
        /*首頁專用!!桌面手機漢堡線條顏色預設為#fff：*/
        --color-hamburger-lg-index: #000;
        /*下拉選單背景色顏色(第一層)*/
        --color-bg-nav-dropmenu: #161616;
        /*下拉選單文字顏色(第一層)*/
        --color-text-nav-dropmenu: #fff;
        /*下拉選單文字顏色(所有子層)*/
        --color-text-nav-nested: #333;
        /*手機漢堡*/
        /*選單1設定*/
        --color-bg-nav-hover-1-overlay: #fff;
        /*選單2設定*/
        --height-xl-nav-2: 45px;
        --height-xxxl-nav-2: 55px;
        --color-bg-nav-2-sub: #fff;
        /*選單2/4/5設定*/
        --color-subtext-xs-nav-4: #656565;
        --height-xl-nav-4: 45px;
        --height-xxl-nav-4: 56px;
        --height-xxxl-nav-4: 64px;
        /*===================================================================================*/
        /*--------Banner--------*/
        /*===================================================================================*/
        /*banner手機高度，v2/v3共用，預設109%，圖片預設尺寸640*700 */
        --height-banner-mobile: 40%;
        /*v2 banner 桌機高度，設計圖預設19.2%，最小高度200px，17.18% --v2v3統一後高度預設為27% */
        --height-banner-desktop-v2: 17.18%;
        /*v3 banner 桌機高度，預設28.85%，最小高度250px;v2v3統一後高度預設為27%  */
        --height-banner-desktop-v3: 20%;
        /*banner大標的字體，預設為英文字體*/
        --font-family-banner: var(--font-family-en);
        /*scrolldown 文字顏色*/
        --color-scrolldown-text: var(--color-text);
        /*scrolldown 線條顏色預設為#b3b3b3*/
        --color-scrolldown-border: #b3b3b3;
        /*大標題與下方距離，平板以上預設為6.7vw*/
        --height-banner-bottom-md: 3vw;
        /*===================================================================================*/
        /*--------Footer--------*/
        /*===================================================================================*/
        /*徵才區塊背景*/
        --color-bg-careers-footer: #1a191d;
        /* 徵才標題 */
        --color-title-careers-footer: #fff;
        /* 徵才內文 */
        --color-text-careers-footer: #a4a4a4;
        /* 徵才線條 */
        --color-border-careers-footer: #383838;
        /* 徵才按鈕背景 */
        --color-btn-careers-bg-footer:var(--color-main);
        /* 徵才按鈕文字 */
        --color-btn-careers-text-footer: #fff;
        --padding-top-careers-footer: 4.79vw;
        --padding-bottom-careers-footer: 4.79vw;
        /*logo高度*/
        --height-logo-footer: 75px;
        /*地圖高度，矮的預設25.88vw*/
        --height-map-footer: 38.54vw;
        /*地圖最小高度*/
        --min-height-map-footer: 300px;
        /* 頁尾背景 */
        --color-bg-footer: #1a191d;
        /* 頁尾底線 */
        --color-border-footer: #383838;
        /* 頁尾標題 */
        --color-title-footer: #fff;
        /* 頁尾內文 */
        --color-text-footer: #a4a4a4;
        /* 頁尾訂閱背景 */
        --color-input-bg-footer: #1e1d20;
        /* 頁尾訂閱文字 */
        --color-input-text-footer: #fff;
        --padding-top-footer: 5.72vw;
        --padding-bottom-footer: 3.95vw;
        /*===================================================================================*/
        /*--------常用設定--------*/
        /*===================================================================================*/

        /*===================================================================================*/
        /*--------產品--------*/
        /*===================================================================================*/
        /*產品banner圖片比例*/
        --ratio-pd-banner: 72.7%;
        /*產品圖片比例，怎麼算高除以寬*100，*/
        --ratio-pd-gallery: 112%;
        /*!!重要!!產品圖片顯示模式，如果是滿版圖用cover / 去背圖用contain，如果客戶有良好習慣預設cover是可以的*/
        --mode-bgsize-product: cover;
        /*--產品列表頁---*/
        /*篩選器大標文字顏色*/
        --color-filter-title: #b7b8b9;
        --color-filter-go: #fff;
        --color-filter-hover: var(--color-second);
        /*產品折扣背景顏色*/
        --color-bg-discount-label: #d83636;
        /*產品折扣文字顏色*/
        --color-text-discount-label: #fff;
        /* --- */
        /*---產品細節頁---*/
        /*label*/
        --color-bg-label-new: rgb(52, 226, 203);
        --color-text-label-new: var(--color-text);
        --color-bg-label-hot: rgb(253, 76, 76);
        --color-text-label-hot: #fff;
        /*評價底線 */
        --color-line-comment: #eaeaea;
        /*販售價格*/
        --color-price-sp: var(--color-text);
        /*原價*/
        --color-price-orig: #959595;
        /*加入購物車按鈕色*/
        --color-btn-cart: var(--color-main-dark);
        /*加入購物車文字色*/
        --color-btn-cart-text: #fff;
        /*活動區塊左邊*/
        --border-event-detail: 2px solid #ffd000;
        --colot-text-event-detail: #666;
        /*分享按鈕顏色*/
        --color-share: #000;
        /*左方選單文字顏色 / 下拉選單文字顏色*/
        --color-pd-nav-left: #858585;
        /*===================================================================================*/
        /*--------關於我們--------*/
        /*===================================================================================*/
        /* 動畫數字左背景 */
        --color-count-bg1: var(--color-main);
        /* 動畫數字右背景 */
        --color-count-bg2: #1a191d;
        /*history背景色 */
        --color-intro-bg:  #f8f8f8;
        /*history背景色 */
        --color-bg-page_header: linear-gradient(180deg, #f7f4ee 0%, #f4efe6 42%, #f5f2eb 100%);
        /*history背景線的顏色，若要改icon*的形式要到ai裡面改*/
        --color-history-line: #2c2c2b;
        /*下方輪播相片比例 */
        --ratio-about-gallery: 66.6%;
        /*===================================================================================*/
        /*--------下載專區--------*/
        /*===================================================================================*/
        --color-download-num: #ededed;
        /*===================================================================================*/
        /*--------聯絡我們--------*/
        /*===================================================================================*/
        --color-contact-text: #b3b3b3;
        --color-contact-line: #8b8b8b;
        /*感謝視窗:關閉按鈕背景色*/
        --color-border-thanks: var(--color-main);
        /*感謝視窗:關閉按鈕叉叉顏色*/
        --color-border-thanks: #fff;
        /*表單欄位背景色*/
        --color-bg-input: #f5f5f6;
        /*表單欄位文字色*/
        --color-text-input: var(--color-text);
        /*生涯規劃按鈕背景色*/
        --color-btn-careers: #000;
        /*生涯規劃按鈕文字顏色*/
        --color-btn-careers-text: #fff;
        /*生涯規劃按鈕hover背景色*/
        --color-btn-careers-hover-bg: var(--color-main);
        /*生涯規劃按鈕hover文字顏色*/
        --color-btn-careers-hover-text:#fff;
        /*v3 生涯規劃背景顏色*/
        --color-bg-careers-v3: #191919;
        /*生涯規劃按鈕背景色*/
        --color-btn-careers-v3: #56423a;
        /*生涯規劃按鈕文字顏色*/
        --color-btn-careers-text-v3: #fff;
        /*生涯規劃按鈕hover背景色*/
        --color-btn-careers-hover-bg-v3: #a7725c;
        /*生涯規劃按鈕hover文字顏色*/
        --color-btn-careers-hover-text-v3: #fff;
        /*===================================================================================*/
        /*--------報名專區--------*/
        /*===================================================================================*/
        --color-bg-sign-up-info: #f8f8f8;
        /*用於手機*/
        /*===================================================================================*/
        /*--------標籤系統--------*/
        /*===================================================================================*/
        --color-bg-tag: #f3f3f3;
        --color-text-tag: var(--color-text);
        --color-hover-bg-tag: var(--color-main);
        --color-hover-text-tag: #f3f3f3;
    }

    /*===================================================================================*/
    /*--------11版型整站配色切換--------*/
    /*===================================================================================*/
    html.site-theme-1 {
        --theme11-bg: #f6f8fb;
        --theme11-paper: #fff;
        --theme11-line: #d8dee8;
        --theme11-text: #1f2933;
        --theme11-soft: #5f6f82;
        --theme11-main: #032D75;
        --theme11-main-hover: #021F52;
        --theme11-muted-bg: #f3f6fa;
        --theme11-hover-bg: #eef3f8;
        --theme11-active-text: #fff;
        --theme11-bg-start: #fbfcfe;
        --theme11-bg-mid: #f6f8fb;
        --theme11-bg-end: #fff;
        --theme11-page-bg: linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 46%, #fff 100%);
        --theme11-panel-bg: rgba(255, 255, 255, 0.95);
        --theme11-shadow: rgba(3, 45, 117, 0.08);
        --color-main: #032D75;
        --color-main-dark: #021F52;
        --color-second: #5f6f82;
        --color-text: #1f2933;
        --color-border: #d8dee8;
        --color-border-dark: #032D75;
        --color-breadcrumbs: #5f6f82;
        --color-breadcrumbs-active: #032D75;
        --color-h1: #032D75;
        --a11-bg: var(--theme11-bg);
        --a11-paper: var(--theme11-paper);
        --a11-line: var(--theme11-line);
        --a11-text: var(--theme11-text);
        --a11-soft: var(--theme11-soft);
        --a11-main: var(--theme11-main);
        --ad11-bg: var(--theme11-bg);
        --ad11-paper: var(--theme11-paper);
        --ad11-line: var(--theme11-line);
        --ad11-text: var(--theme11-text);
        --ad11-soft: var(--theme11-soft);
        --ad11-main: var(--theme11-main);
        --n11-bg: var(--theme11-bg);
        --n11-paper: var(--theme11-paper);
        --n11-line: var(--theme11-line);
        --n11-text: var(--theme11-text);
        --n11-soft: var(--theme11-soft);
        --n11-main: var(--theme11-main);
        --nd11-bg: var(--theme11-bg);
        --nd11-paper: var(--theme11-paper);
        --nd11-line: var(--theme11-line);
        --nd11-text: var(--theme11-text);
        --nd11-soft: var(--theme11-soft);
        --nd11-main: var(--theme11-main);
        --f11-bg: var(--theme11-bg);
        --f11-paper: var(--theme11-paper);
        --f11-line: var(--theme11-line);
        --f11-text: var(--theme11-text);
        --f11-soft: var(--theme11-soft);
        --f11-main: var(--theme11-main);
        --pb11-bg: var(--theme11-bg);
        --pb11-paper: var(--theme11-paper);
        --pb11-line: var(--theme11-line);
        --pb11-text: var(--theme11-text);
        --pb11-soft: var(--theme11-soft);
        --pb11-main: var(--theme11-main);
        --inv11-bg: var(--theme11-bg);
        --inv11-paper: var(--theme11-paper);
        --inv11-line: var(--theme11-line);
        --inv11-text: var(--theme11-text);
        --inv11-soft: var(--theme11-soft);
        --inv11-accent: var(--theme11-main);
        --d11-bg: var(--theme11-bg);
        --d11-surface: var(--theme11-paper);
        --d11-border: var(--theme11-line);
        --d11-text: var(--theme11-text);
        --d11-soft: var(--theme11-soft);
        --d11-main: var(--theme11-main);
        --d11-accent: var(--theme11-text);
        --p11-bg: var(--theme11-bg);
        --p11-paper: var(--theme11-paper);
        --p11-line: var(--theme11-line);
        --p11-text: var(--theme11-text);
        --p11-soft: var(--theme11-soft);
        --p11-main: var(--theme11-main);
        --p11-main-hover: var(--theme11-main-hover);
        --p11-muted-bg: var(--theme11-muted-bg);
        --p11-hover-bg: var(--theme11-hover-bg);
        --p11-active-text: var(--theme11-active-text);
        --p11-bg-start: var(--theme11-bg-start);
        --p11-bg-mid: var(--theme11-bg-mid);
        --p11-panel-bg: var(--theme11-panel-bg);
        --p11-image-bg: var(--theme11-muted-bg);
        --p11-shadow: var(--theme11-shadow);
        /* 頁首高度：桌機仍略縮；手機維持可讀 logo，勿壓過矮 */
        --height-nav-xs: 58px;
        --height-nav-md: 5.775vw;
        --height-nav-mini-md: 48px;
        --height-nav-mini-xxl: 54px;
        --line-height-nav-xs: 48px;
    }

    html.site-theme-2 {
        --theme11-bg: #f5f2eb;
        --theme11-paper: #fcfbf8;
        --theme11-line: #d8d0c2;
        --theme11-text: #2b251f;
        --theme11-soft: #7b6f61;
        --theme11-main: #3a3026;
        --theme11-main-hover: #2f251c;
        --theme11-muted-bg: #f7f4ec;
        --theme11-hover-bg: rgba(58, 48, 38, 0.06);
        --theme11-active-text: #f8f4ec;
        --theme11-bg-start: #f7f4ee;
        --theme11-bg-mid: #f4efe6;
        --theme11-bg-end: #f5f2eb;
        --theme11-page-bg: linear-gradient(180deg, #f7f4ee 0%, #f4efe6 42%, #f5f2eb 100%);
        --theme11-panel-bg: rgba(252, 251, 248, 0.95);
        --theme11-shadow: rgba(58, 48, 38, 0.08);
        --color-main: #3a3026;
        --color-main-dark: #2f251c;
        --color-second: #7b6f61;
        --color-text: #2b251f;
        --color-border: #d8d0c2;
        --color-border-dark: #3a3026;
        --color-breadcrumbs: #7b6f61;
        --color-breadcrumbs-active: #3a3026;
        --color-h1: #3a3026;
        --a11-bg: var(--theme11-bg);
        --a11-paper: var(--theme11-paper);
        --a11-line: var(--theme11-line);
        --a11-text: var(--theme11-text);
        --a11-soft: var(--theme11-soft);
        --a11-main: var(--theme11-main);
        --ad11-bg: var(--theme11-bg);
        --ad11-paper: var(--theme11-paper);
        --ad11-line: var(--theme11-line);
        --ad11-text: var(--theme11-text);
        --ad11-soft: var(--theme11-soft);
        --ad11-main: var(--theme11-main);
        --n11-bg: var(--theme11-bg);
        --n11-paper: var(--theme11-paper);
        --n11-line: var(--theme11-line);
        --n11-text: var(--theme11-text);
        --n11-soft: var(--theme11-soft);
        --n11-main: var(--theme11-main);
        --nd11-bg: var(--theme11-bg);
        --nd11-paper: var(--theme11-paper);
        --nd11-line: var(--theme11-line);
        --nd11-text: var(--theme11-text);
        --nd11-soft: var(--theme11-soft);
        --nd11-main: var(--theme11-main);
        --f11-bg: var(--theme11-bg);
        --f11-paper: var(--theme11-paper);
        --f11-line: var(--theme11-line);
        --f11-text: var(--theme11-text);
        --f11-soft: var(--theme11-soft);
        --f11-main: var(--theme11-main);
        --pb11-bg: var(--theme11-bg);
        --pb11-paper: var(--theme11-paper);
        --pb11-line: var(--theme11-line);
        --pb11-text: var(--theme11-text);
        --pb11-soft: var(--theme11-soft);
        --pb11-main: var(--theme11-main);
        --inv11-bg: var(--theme11-bg);
        --inv11-paper: var(--theme11-paper);
        --inv11-line: var(--theme11-line);
        --inv11-text: var(--theme11-text);
        --inv11-soft: var(--theme11-soft);
        --inv11-accent: var(--theme11-main);
        --d11-bg: var(--theme11-bg);
        --d11-surface: var(--theme11-paper);
        --d11-border: var(--theme11-line);
        --d11-text: var(--theme11-text);
        --d11-soft: var(--theme11-soft);
        --d11-main: var(--theme11-main);
        --d11-accent: var(--theme11-text);
        --p11-bg: var(--theme11-bg);
        --p11-paper: var(--theme11-paper);
        --p11-line: var(--theme11-line);
        --p11-text: var(--theme11-text);
        --p11-soft: var(--theme11-soft);
        --p11-main: var(--theme11-main);
        --p11-main-hover: var(--theme11-main-hover);
        --p11-muted-bg: var(--theme11-muted-bg);
        --p11-hover-bg: var(--theme11-hover-bg);
        --p11-active-text: var(--theme11-active-text);
        --p11-bg-start: var(--theme11-bg-start);
        --p11-bg-mid: var(--theme11-bg-mid);
        --p11-panel-bg: var(--theme11-panel-bg);
        --p11-image-bg: var(--theme11-muted-bg);
        --p11-shadow: var(--theme11-shadow);
    }

    html.site-theme-3 {
        --theme11-bg: #2b2d30;
        --theme11-paper: #36383c;
        --theme11-line: #52565d;
        --theme11-text: #f0f1f2;
        --theme11-soft: #c7cbd1;
        --theme11-main: #c9ad73;
        --theme11-main-hover: #e0c98e;
        --theme11-muted-bg: #42454a;
        --theme11-hover-bg: rgba(201, 173, 115, 0.14);
        --theme11-active-text: #2b2d30;
        --theme11-bg-start: #3a3d42;
        --theme11-bg-mid: #2f3236;
        --theme11-bg-end: #3f4246;
        --theme11-page-bg:
            radial-gradient(120% 80% at 50% -10%, rgba(126, 132, 142, 0.24) 0%, transparent 58%),
            linear-gradient(180deg, #3a3d42 0%, #2f3236 44%, #3f4246 100%);
        --theme11-panel-bg: rgba(54, 56, 60, 0.94);
        --theme11-shadow: rgba(20, 22, 24, 0.22);
        --color-main: #c9ad73;
        --color-main-dark: #9d824d;
        --color-second: #c7cbd1;
        --color-text: #f0f1f2;
        --color-border: #52565d;
        --color-border-dark: #c9ad73;
        --color-breadcrumbs: #c7cbd1;
        --color-breadcrumbs-active: #e0c98e;
        --color-h1: #f0f1f2;
        --color-dot: #8c929b;
        --a11-bg: var(--theme11-bg);
        --a11-paper: var(--theme11-paper);
        --a11-line: var(--theme11-line);
        --a11-text: var(--theme11-text);
        --a11-soft: var(--theme11-soft);
        --a11-main: var(--theme11-main);
        --ad11-bg: var(--theme11-bg);
        --ad11-paper: var(--theme11-paper);
        --ad11-line: var(--theme11-line);
        --ad11-text: var(--theme11-text);
        --ad11-soft: var(--theme11-soft);
        --ad11-main: var(--theme11-main);
        --n11-bg: var(--theme11-bg);
        --n11-paper: var(--theme11-paper);
        --n11-line: var(--theme11-line);
        --n11-text: var(--theme11-text);
        --n11-soft: var(--theme11-soft);
        --n11-main: var(--theme11-main);
        --nd11-bg: var(--theme11-bg);
        --nd11-paper: var(--theme11-paper);
        --nd11-line: var(--theme11-line);
        --nd11-text: var(--theme11-text);
        --nd11-soft: var(--theme11-soft);
        --nd11-main: var(--theme11-main);
        --f11-bg: var(--theme11-bg);
        --f11-paper: var(--theme11-paper);
        --f11-line: var(--theme11-line);
        --f11-text: var(--theme11-text);
        --f11-soft: var(--theme11-soft);
        --f11-main: var(--theme11-main);
        --pb11-bg: var(--theme11-bg);
        --pb11-paper: var(--theme11-paper);
        --pb11-line: var(--theme11-line);
        --pb11-text: var(--theme11-text);
        --pb11-soft: var(--theme11-soft);
        --pb11-main: var(--theme11-main);
        --inv11-bg: var(--theme11-bg);
        --inv11-paper: var(--theme11-paper);
        --inv11-line: var(--theme11-line);
        --inv11-text: var(--theme11-text);
        --inv11-soft: var(--theme11-soft);
        --inv11-accent: var(--theme11-main);
        --d11-bg: var(--theme11-bg);
        --d11-surface: var(--theme11-paper);
        --d11-border: var(--theme11-line);
        --d11-text: var(--theme11-text);
        --d11-soft: var(--theme11-soft);
        --d11-main: var(--theme11-main);
        --d11-accent: var(--theme11-main);
        --p11-bg: var(--theme11-bg);
        --p11-paper: var(--theme11-paper);
        --p11-line: var(--theme11-line);
        --p11-text: var(--theme11-text);
        --p11-soft: var(--theme11-soft);
        --p11-main: var(--theme11-main);
        --p11-main-hover: var(--theme11-main-hover);
        --p11-muted-bg: var(--theme11-muted-bg);
        --p11-hover-bg: var(--theme11-hover-bg);
        --p11-active-text: var(--theme11-active-text);
        --p11-bg-start: var(--theme11-bg-start);
        --p11-bg-mid: var(--theme11-bg-mid);
        --p11-panel-bg: var(--theme11-panel-bg);
        --p11-image-bg: var(--theme11-muted-bg);
        --p11-shadow: var(--theme11-shadow);
    }

    html.site-theme-1 #about.about11,
    html.site-theme-2 #about.about11,
    html.site-theme-3 #about.about11,
    html.site-theme-1 #contact,
    html.site-theme-2 #contact,
    html.site-theme-3 #contact,
    html.site-theme-1 #faq,
    html.site-theme-2 #faq,
    html.site-theme-3 #faq,
    html.site-theme-1 #download,
    html.site-theme-2 #download,
    html.site-theme-3 #download,
    html.site-theme-1 #news_list,
    html.site-theme-2 #news_list,
    html.site-theme-3 #news_list,
    html.site-theme-1 #news_detail,
    html.site-theme-2 #news_detail,
    html.site-theme-3 #news_detail,
    html.site-theme-1 #photobook,
    html.site-theme-2 #photobook,
    html.site-theme-3 #photobook,
    html.site-theme-1 #product11,
    html.site-theme-2 #product11,
    html.site-theme-3 #product11,
    html.site-theme-1 #product_detail11,
    html.site-theme-2 #product_detail11,
    html.site-theme-3 #product_detail11,
    html.site-theme-1 #investor.investor,
    html.site-theme-2 #investor.investor,
    html.site-theme-3 #investor.investor,
    html.site-theme-1 #compare,
    html.site-theme-2 #compare,
    html.site-theme-3 #compare,
    html.site-theme-1 body:has(.header-v11) .page_content.member-v11,
    html.site-theme-2 body:has(.header-v11) .page_content.member-v11,
    html.site-theme-3 body:has(.header-v11) .page_content.member-v11 {
        background: var(--theme11-page-bg) !important;
        color: var(--theme11-text);
    }

    html.site-theme-1 #about.about11,
    html.site-theme-2 #about.about11,
    html.site-theme-3 #about.about11,
    html.site-theme-1 #contact,
    html.site-theme-2 #contact,
    html.site-theme-3 #contact {
        --ab11-paper: var(--theme11-paper);
        --ab11-line: var(--theme11-line);
        --ab11-text: var(--theme11-text);
        --ab11-soft: var(--theme11-soft);
        --ab11-main: var(--theme11-main);
        --ab11-font: var(--font-family);
        --ct11-bg: var(--theme11-bg);
        --ct11-paper: var(--theme11-paper);
        --ct11-line: var(--theme11-line);
        --ct11-text: var(--theme11-text);
        --ct11-soft: var(--theme11-soft);
        --ct11-main: var(--theme11-main);
        --ct11-input-bg: var(--theme11-muted-bg);
    }

    html.site-theme-1 #contact {
        --ct11-focus-ring: rgba(36, 54, 75, 0.2);
    }

    html.site-theme-2 #contact {
        --ct11-focus-ring: rgba(58, 48, 38, 0.2);
    }

    html.site-theme-3 #contact {
        --ct11-focus-ring: rgba(214, 180, 106, 0.22);
    }

    html.site-theme-1 #compare,
    html.site-theme-2 #compare,
    html.site-theme-3 #compare {
        --pc11-bg: var(--theme11-bg);
        --pc11-paper: var(--theme11-paper);
        --pc11-line: var(--theme11-line);
        --pc11-text: var(--theme11-text);
        --pc11-soft: var(--theme11-soft);
        --pc11-bg-start: var(--theme11-bg-start);
        --pc11-bg-mid: var(--theme11-bg-mid);
    }

    html.site-theme-1 body:has(.header-v11) .page_content.member-v11,
    html.site-theme-2 body:has(.header-v11) .page_content.member-v11,
    html.site-theme-3 body:has(.header-v11) .page_content.member-v11 {
        --mb11-bg: var(--theme11-bg);
        --mb11-line: var(--theme11-line);
        --mb11-text: var(--theme11-text);
        --mb11-soft: var(--theme11-soft);
        --mb11-paper: var(--theme11-paper);
    }

    html.site-theme-1 body:has(.header-v11) .page_content.member-v11 .shop_contain .border_style,
    html.site-theme-2 body:has(.header-v11) .page_content.member-v11 .shop_contain .border_style,
    html.site-theme-3 body:has(.header-v11) .page_content.member-v11 .shop_contain .border_style,
    html.site-theme-1 body:has(.header-v11) .page_content.member-v11 .shop_contain .head_box .page-nav > div,
    html.site-theme-2 body:has(.header-v11) .page_content.member-v11 .shop_contain .head_box .page-nav > div,
    html.site-theme-3 body:has(.header-v11) .page_content.member-v11 .shop_contain .head_box .page-nav > div,
    html.site-theme-1 #compare .container_compare .field,
    html.site-theme-2 #compare .container_compare .field,
    html.site-theme-3 #compare .container_compare .field,
    html.site-theme-1 #compare .container_compare .compare-target,
    html.site-theme-2 #compare .container_compare .compare-target,
    html.site-theme-3 #compare .container_compare .compare-target {
        background: var(--theme11-panel-bg) !important;
        border-color: var(--theme11-line) !important;
        color: var(--theme11-text);
    }

    html.site-theme-1 #faq,
    html.site-theme-2 #faq,
    html.site-theme-3 #faq {
        --fq11-bg: var(--theme11-bg);
        --fq11-line: var(--theme11-line);
        --fq11-text: var(--theme11-text);
        --fq11-soft: var(--theme11-soft);
        --fq11-main: var(--theme11-main);
        --abd11-bg: var(--theme11-bg);
        --abd11-page-bg: var(--theme11-page-bg);
        --abd11-paper: var(--theme11-paper);
        --abd11-line: var(--theme11-line);
        --abd11-text: var(--theme11-text);
        --abd11-soft: var(--theme11-soft);
        --abd11-main: var(--theme11-main);
    }

    /* theme11：內頁 h1 統一 ab11-font（全站 header-v11 版型） */
    html.site-theme-1 body:has(.header-v11),
    html.site-theme-2 body:has(.header-v11),
    html.site-theme-3 body:has(.header-v11) {
        --ab11-font: var(--font-family);
    }

    html.site-theme-1 body:has(.header-v11) .page_header h1,
    html.site-theme-2 body:has(.header-v11) .page_header h1,
    html.site-theme-3 body:has(.header-v11) .page_header h1 {
        font-family: var(--ab11-font) !important;
        font-weight: 500 !important;
        font-size: clamp(28px, 3.9vw, 112px) !important;
        line-height: 1.2;
    }

    @media (min-width: 980px) {
        html.site-theme-1 body:has(.header-v11) .page_header h1,
        html.site-theme-2 body:has(.header-v11) .page_header h1,
        html.site-theme-3 body:has(.header-v11) .page_header h1 {
            font-size: clamp(40px, 4.2vw, 120px) !important;
            min-height: 0 !important;
        }
    }

    html.site-theme-1 body:has(.header-v11) .banner h1,
    html.site-theme-2 body:has(.header-v11) .banner h1,
    html.site-theme-3 body:has(.header-v11) .banner h1 {
        font-family: var(--ab11-font) !important;
    }

    html.site-theme-1 body:has(.header-v11) .breadcrumbs a,
    html.site-theme-2 body:has(.header-v11) .breadcrumbs a,
    html.site-theme-3 body:has(.header-v11) .breadcrumbs a {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--color-breadcrumbs) !important;
    }

    html.site-theme-1 body:has(.header-v11) .breadcrumbs a::after,
    html.site-theme-2 body:has(.header-v11) .breadcrumbs a::after,
    html.site-theme-3 body:has(.header-v11) .breadcrumbs a::after {
        content: "/" !important;
        display: inline-block !important;
        padding: 0 !important;
        margin: 0 clamp(8px, 1vw, 12px) !important;
        color: color-mix(in srgb, var(--color-breadcrumbs) 52%, transparent) !important;
        font-weight: 400 !important;
    }

    html.site-theme-1 body:has(.header-v11) .breadcrumbs a:last-of-type,
    html.site-theme-2 body:has(.header-v11) .breadcrumbs a:last-of-type,
    html.site-theme-3 body:has(.header-v11) .breadcrumbs a:last-of-type {
        color: var(--color-breadcrumbs-active) !important;
    }

    html.site-theme-1 body:has(.header-v11) .breadcrumbs a:last-of-type::after,
    html.site-theme-2 body:has(.header-v11) .breadcrumbs a:last-of-type::after,
    html.site-theme-3 body:has(.header-v11) .breadcrumbs a:last-of-type::after {
        display: none !important;
    }

    /* 10版型頁首：Modern Enterprise 現代企業風 token（theme12 變數供 ac10 橋接） */
    html.site-theme-1 body:has(.header-v10),
    html.site-theme-1 .ac10-retail,
    html.site-theme-2 body:has(.header-v10),
    html.site-theme-2 .ac10-retail,
    html.site-theme-3 body:has(.header-v10),
    html.site-theme-3 .ac10-retail {
        --theme12-bg: #f8fafc;
        --theme12-paper: #ffffff;
        --theme12-line: #e2e8f0;
        --theme12-text: #0f172a;
        --theme12-soft: #64748b;
        --theme12-body: #334155;
        --theme12-main: #1e40af;
        --theme12-main-hover: #1e3a8a;
        --theme12-muted-bg: #f1f5f9;
        --theme12-hover-bg: rgba(30, 64, 175, 0.08);
        --theme12-page-bg: #f8fafc;
        --theme12-panel-bg: #ffffff;
        --theme12-shadow: rgba(15, 23, 42, 0.08);
        --ac12-paper: #f8fafc;
        --ac12-white: #ffffff;
        --ac12-cream: #f1f5f9;
        --ac12-ink: #0f172a;
        --ac12-ink-soft: #334155;
        --ac12-muted: #64748b;
        --ac12-line: #e2e8f0;
        --ac12-hot: #1e40af;
        --ac12-hot-deep: #1e3a8a;
        --ac12-sage: #1e40af;
        --s12-accent: #1e40af;
        --s12-bg: #f8fafc;
        --s12-text: #0f172a;
        --color-main: #1e40af;
        --color-main-dark: #1e3a8a;
    }

    html.site-theme-2 body:has(.header-v10),
    html.site-theme-2 .ac10-retail {
        --theme12-main: #2563eb;
        --theme12-main-hover: #1d4ed8;
        --ac12-hot: #2563eb;
        --ac12-sage: #2563eb;
        --s12-accent: #2563eb;
        --color-main: #2563eb;
        --color-main-dark: #1d4ed8;
    }

    html.site-theme-3 body:has(.header-v10),
    html.site-theme-3 .ac10-retail {
        --theme12-main: #1e3a8a;
        --theme12-main-hover: #172554;
        --ac12-hot: #1e3a8a;
        --ac12-sage: #1e3a8a;
        --s12-accent: #1e3a8a;
        --color-main: #1e3a8a;
        --color-main-dark: #172554;
    }

    /* -------- 21版型：theme21 繼承 theme11 + 會員／投資人頁面 -------- */
    html.site-theme-1,
    html.site-theme-2,
    html.site-theme-3 {
        --theme21-bg: var(--theme11-bg);
        --theme21-paper: var(--theme11-paper);
        --theme21-line: var(--theme11-line);
        --theme21-text: var(--theme11-text);
        --theme21-soft: var(--theme11-soft);
        --theme21-main: var(--theme11-main);
        --theme21-main-hover: var(--theme11-main-hover);
        --theme21-muted-bg: var(--theme11-muted-bg);
        --theme21-hover-bg: var(--theme11-hover-bg);
        --theme21-active-text: var(--theme11-active-text);
        --theme21-bg-start: var(--theme11-bg-start);
        --theme21-bg-mid: var(--theme11-bg-mid);
        --theme21-bg-end: var(--theme11-bg-end);
        --theme21-page-bg: var(--theme11-page-bg);
        --theme21-panel-bg: var(--theme11-panel-bg);
        --theme21-shadow: var(--theme11-shadow);
    }

    html.site-theme-1 #download,
    html.site-theme-2 #download,
    html.site-theme-3 #download,
    html.site-theme-1 #compare,
    html.site-theme-2 #compare,
    html.site-theme-3 #compare,
    html.site-theme-1 #esg.esg21,
    html.site-theme-2 #esg.esg21,
    html.site-theme-3 #esg.esg21,
    html.site-theme-1 body:has(.header-v11) #investor.investor,
    html.site-theme-2 body:has(.header-v11) #investor.investor,
    html.site-theme-3 body:has(.header-v11) #investor.investor,
    html.site-theme-1 body:has(.header-v11) .page_content.member-v21,
    html.site-theme-2 body:has(.header-v11) .page_content.member-v21,
    html.site-theme-3 body:has(.header-v11) .page_content.member-v21 {
        background: var(--theme21-page-bg) !important;
        color: var(--theme21-text);
    }

    html.site-theme-1 body:has(.header-v11),
    html.site-theme-2 body:has(.header-v11),
    html.site-theme-3 body:has(.header-v11) {
        --ab21-font: var(--font-family);
    }

    html.site-theme-1 body:has(.header-v11) .page_header h1,
    html.site-theme-2 body:has(.header-v11) .page_header h1,
    html.site-theme-3 body:has(.header-v11) .page_header h1 {
        font-family: var(--ab21-font) !important;
        font-weight: 500 !important;
        font-size: clamp(28px, 3.2vw, 40px) !important;
        line-height: 1.2;
    }

    html.site-theme-1 body:has(.header-v11) .breadcrumbs a,
    html.site-theme-2 body:has(.header-v11) .breadcrumbs a,
    html.site-theme-3 body:has(.header-v11) .breadcrumbs a {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--color-breadcrumbs) !important;
    }

    html,
    body {
        font-family: var(--font-family);
    }