body {
    font-family: 'Poppins', 'Noto Sans TC', sans-serif, '微軟正黑體';
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: #333333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 段落文字 */
p {
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* 標題群組 */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', 'Noto Sans TC', sans-serif;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

h4 {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
}

/* 導覽列文字 */
.navbar, .nav-link {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

/* 按鈕文字 */
.btn, .custom-btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: 0.03em;
}
/* ==========================================
通用設定
========================================== */
a, a.nav-link, a.nav-link:hover {
    color: #000;
    text-decoration: none;
}

:root {
    --tci-color-1: #EF3346; /* 大江紅色 */
    --tci-color-2: #F0F0F0; /* 近白的灰色 */
    --tci-color-3: #cc192b; /* 深一點的紅色 */
    --tci-color-4: #a90a1a; /* 再更深一點的紅色 */

    --tci-color-5: #FBA6A6; /* 粉紅 */
    --tci-color-6: #FBCECE; /* 超淡粉紅 */
    --tci-color-7: #545659; /* 灰 */
    --tci-color-8: #A6A6A8; /* 淡灰 */
    --tci-color-9: #eaeaea; /* 淡灰 */
    --tci-color-10: #FFFFFF; /* 白 */
}

.bg_RedLine_1 {
    border-bottom: 1px solid var(--tci-color-1);
}

.bg_RedLine_2 {
    border-bottom: 2px solid var(--tci-color-1);
}

.bg_RedLine_3 {
    border-bottom: 3px solid var(--tci-color-1);
}
/*響應式文字*/
.fluid-title {
    /* 解釋：
       最小不能小於 2rem (大約 32px，確保手機上看得清楚)
       預設跟著螢幕寬度的 5% (5vw) 自由縮放
       最大不能超過 4rem (大約 64px，避免在 4K 螢幕上字太大)
    */
    font-size: clamp(2rem, 5vw, 4rem);
}
/* 只要標籤身上有 v-cloak 屬性，就強制隱藏 */
[v-cloak] {
    display: none !important;
}

iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

hr {
    height: 2px;
    border: none;
    background-color: var( --tci-color-1);
    margin-top: 20px;
    margin-bottom: 20px;
}
/* 基礎按鈕樣式 */
.custom-btn {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 5px 10px;
    font-size: 16px;
    line-height: 1.5;
    border-radius: 20px;
    text-decoration: none; /* 針對 <a> 標籤去除底線 */
    transition: all 0.2s ease-in-out;
    border: 2px solid var(--tci-color-1); /* 經典紅 */
}
    /* 當按鈕取得焦點時，自訂外框樣式 */
    .custom-btn:focus {
        outline: none; /* 先拔掉預設黑框 */
        box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.4); /* 改成淡淡的紅暈 */
        border-color: var(--tci-color-1);
    }
/* 實心紅底白字 (Primary) */
.btn-red {
    background-color: var(--tci-color-1);
    color: #ffffff !important;
}

    .btn-red:hover {
        background-color: var(--tci-color-3); /* 深一點的紅 */
        border-color: var(--tci-color-3);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px); /* 輕微浮起感 */
    }
    /* 當按鈕取得焦點時，自訂外框樣式 */
    .btn-red:focus {
        outline: none;
        border-color: var(--tci-color-3); /* Focus 時邊框顏色加深 */
        box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.5); /* 50% 透明度的紅 */
    }
/* 空心白底紅字 (Outline) */
.btn-outline-red {
    background-color: #ffffff;
    color: var(--tci-color-1) !important;
}

    .btn-outline-red:hover {
        background-color: #fdf0f0; /* 淡淡的紅背景 */
        color: var(--tci-color-1) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    /* 空心白底按鈕的 Focus：光暈輕盈一點，才不會吃掉細邊框 */
    .btn-outline-red:focus {
        outline: none;
        border-color: var(--tci-color-1);
        box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.25); /* 25% 透明度的紅 */
    }
/* 按下時的縮放效果 */
.custom-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.WH_16_9 {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
/*icon顯示陰影*/
.icon-drop-shadow {
    /* 參數：X軸偏移, Y軸偏移, 模糊程度, 陰影顏色與透明度 */
    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.75));
}

.label-drop-shadow {
    /* 參數：X軸偏移, Y軸偏移, 模糊程度, 陰影顏色與透明度 */
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 1));
}

.lab_tcicolor_1 {
    color: var(--tci-color-1);
}

.lab_tcicolor_2 {
    color: var(--tci-color-2);
}

.lab_tcicolor_3 {
    color: var(--tci-color-3);
}

.lab_tcicolor_4 {
    color: var(--tci-color-4);
}

.lab_tcicolor_5 {
    color: var(--tci-color-5);
}

.lab_tcicolor_6 {
    color: var(--tci-color-6);
}

.lab_tcicolor_7 {
    color: var(--tci-color-7);
}

.lab_tcicolor_8 {
    color: var(--tci-color-8);
}

.bg_Color_1 {
    background-color: var(--tci-color-1);
}

.bg_Color_2 {
    background-color: var(--tci-color-2);
}

.bg_Color_3 {
    background-color: var(--tci-color-3);
}

.bg_Color_4 {
    background-color: var(--tci-color-4);
}

.bg_Color_5 {
    background-color: var(--tci-color-5);
}

.bg_Color_6 {
    background-color: var(--tci-color-6);
}

.bg_Color_7 {
    background-color: var(--tci-color-7);
}

.bg_Color_8 {
    background-color: var(--tci-color-8);
}

.border_Color_1 {
    border-color: var(--tci-color-6);
}

figure.table {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    overflow-y: auto;
}

    figure.table table {
        width: 100%;
    }

figure.image img {
    max-width: 100%;
}

.h2-style {
    /* 使用 clamp(最小值, 建議值, 最大值) */
    /* 假設 h2 的目標視覺大小約為 2rem，您可以依照實際設計微調 */
    font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
    /* 確保行高也跟著縮放，保持閱讀舒適度 */
    line-height: 1.2;
    /* 視需要加入字重，讓它更有標題感 */
    font-weight: 600;
}

.h3-style {
    /* 建議將 clamp 範圍縮小一點，使其與 h2 保持階層感 */
    /* 最小值設為 1.125rem，建議值設為 1rem + 0.8vw，最大值為 1.5rem */
    font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
    line-height: 1.3;
    font-weight: 600; /* 通常 h3 字重可以與 h2 相同，或稍微輕一點 */
    margin-top: 1.5rem; /* 標題上方的間距，保持區塊感 */
}



/* 浮動按鈕懸停效果 */
.btn-red:hover {
    background-color: var(--tci-color-3) !important; /* 稍微深一點的紅色 */
    transform: translateY(-3px);
    transition: all 0.3s ease;
}

.btn-outline-red:hover {
    background-color: var(--tci-color-2) !important;
    transform: translateY(3px);
    transition: all 0.3s ease;
}

.carousel-control-next, .carousel-control-prev
{
    width:5% !important;
}
/* ==========================================
   錨點設定
   ========================================== */
/*錨點偏移量*/
div[id^="div_"] {
    scroll-margin-top: 100px;
}

.hover-red {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto; /* 現代瀏覽器支援自動加連字號 */
}
/* 2. 手機版優化：縮小寬度並增加透明度 */
@media (max-width: 768px) {
    #anchorMenu {
        width: 150px !important;
        opacity: 0.95;
    }
    /* 如果真的太長，強制只顯示兩行並省略 */
    .hover-red {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
/* ==========================================
   Mega Menu RWD 響應式設定
   ========================================== */
/* 電腦版 (lg 以上)：絕對定位、橫向滿版 */
@media (min-width: 992px) {
    .mega-menu-wrapper {
        position: absolute !important;
        top: 100%;
        left: 0;
        width: 100%;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* BS5 shadow-sm */
    }

    .mega-menu-list {
        flex-direction: row !important;
        justify-content: space-evenly !important;
    }

    .PS_PassLogo {
        padding-left: 160px;
    }

    .Submenu_Hover:hover {
        border-bottom: 2px solid var(--tci-color-1);
    }

    /* 字體大小永遠是螢幕寬度的 5% */
    .vw-lg-title-5 {
        font-size: 5vw;
    }

    .vw-lg-title-4 {
        font-size: 4vw;
    }

    .vw-lg-title-3 {
        font-size: 3vw;
    }

    .vw-lg-title-2 {
        font-size: 2vw;
    }

    .vw-lg-title-1 {
        font-size: 1vw;
    }

    .div_Video_W {
        width: 100%;
    }
    .Banner_h2 {
        font-size: 58px;
        letter-spacing: 0.145em;
        line-height: 1.34
    }


    .Banner_Det {
        font-size: 18px;
        line-height: 1.86;
        letter-spacing: 0.2em;
        font-weight: 500
    }

    .tci_citizen_title {
        font-size: min(max(40px, 4vw), 60px);
        font-weight: 700;
        letter-spacing: .1em;
    }

    .tci_why_title {
        font-size: 60px;
        font-weight: 700;
        margin-bottom: 18px;
        overflow: hidden;
        letter-spacing: 0.15em;
        text-align: center;
    }

    .tci_why_grid_item_title {
        font-size: 60px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.065em;
        margin-bottom: 12px;
        position: relative;
    }

    .modal-dialog_MaxW_800 {
        max-width: 800px !important;
    }
}
/* 手機版/平板版 (小於 lg)：相對定位、垂直排列、手風琴風格 */
@media (min-width:769px) and (max-width: 991.98px) {
    

    .Banner_h2 {
        font-size: 38px;
        letter-spacing: 0.145em;
        line-height: 1.34
    }


    .Banner_Det {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .mega-menu-wrapper {
        position: static !important; /* 解除絕對定位，讓它跟著文件流走 */
        width: 100%;
        box-shadow: none !important; /* 拿掉陰影 */
        border: none !important;
        background-color: #f8f9fa !important; /* 換個淺灰底色，區分階層感 */
    }

    .mega-menu-list {
        flex-direction: column !important; /* 變成垂直排列 */
        padding: 1rem 0 !important;
    }

        .mega-menu-list .nav-item {
            text-align: left !important;
            padding-left: 2rem; /* 手機版子選單往內縮排 */
        }

        .mega-menu-list .nav-link {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

    .Submenu_Hover:hover {
        background-color: #ffd8d8;
    }

    .vw-title-5 {
        font-size: 5vw;
    }

    .vw-title-4 {
        font-size: 4vw;
    }

    .vw-title-3 {
        font-size: 3vw;
    }

    .vw-title-2 {
        font-size: 2vw;
    }

    .vw-title-1 {
        font-size: 1vw;
    }

    .Banner_h2 {
        font-size: 20px;
        line-height: 1.2
    }
    .Banner_Det {
        font-size: 15px;
        line-height: 1.2;
    }

    .div_Video_W {
        width: 70%;
    }
}
    /* ==========================================
   伸縮搜尋框 (Expanding Search) 專用特效
   ========================================== */
    /* 1. 預設狀態：縮起來、透明、不能點擊 */
    .search-input-magic {
        width: 0px; /* 寬度歸零 */
        opacity: 0; /* 完全透明 */
        padding: 0; /* 內距歸零，避免擠壓版面 */
        border: none; /* 隱藏邊框 */
        background-color: var(--tci-color-9); /* BS5 的淺灰色底 */
        transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1); /* 核心魔法：設定 0.4秒 的滑順變形動畫 */
    }
        /* 2. 展開狀態 (當 Vue 加上 .is-open 類別時觸發) */
        .search-input-magic.is-open {
            width: 250px; /* 展開的寬度，你可以自由調整 */
            opacity: 1; /* 顯示出來 */
            padding: 0.375rem 2.5rem 0.375rem 1.25rem; /* 右邊特別留 2.5rem 的空間給放大鏡，才不會文字跟 Icon 疊在一起 */
            border: 1px solid #ced4da; /* 恢復邊框 */
        }
            /* 3. 點擊輸入框時那圈藍色的發光效果 (可選，讓它更好看) */
            .search-input-magic.is-open:focus, .is-title {
                box-shadow: 0 0 0 0.25rem rgba(233, 56, 52, 0.25); /* 偷偷換成你們 TCI 紅色的柔光 */
                border-color: var(--tci-color-1);
            }

    .search-input-magic-title {
        padding: 0.375rem 2.5rem 0.375rem 1.25rem; /* 右邊特別留 2.5rem 的空間給放大鏡，才不會文字跟 Icon 疊在一起 */
        border: 1px solid #ced4da; /* 恢復邊框 */
        border-color: var(--tci-color-1);
    }

        .search-input-magic-title:hover {
            color: var(--tci-color-1);
        }
    /* ==========================================
   產品跑馬燈設定
   ========================================== */
    .swiper-button-prev, .swiper-button-next {
        width: 15% !important;
        height: unset !important;
    }

        .swiper-button-prev:after, .swiper-button-next:after {
            content: '' !important;
        }
    /* ==========================================
   手風琴改造設定
   ========================================== */
    .accordion-button.collapsed {
        background-color: var(--tci-color-1);
        color: var(--tci-color-10);
        border-bottom: 1px solid var(--tci-color-2);
    }

    .accordion-button {
        color: var(--tci-color-10);
    }

        .accordion-button::after {
            /* 把原本的背景圖拿掉，改用 mask */
            background-image: none !important;
            -webkit-mask-image: var(--bs-accordion-btn-icon);
            mask-image: var(--bs-accordion-btn-icon);
            -webkit-mask-size: 1.25rem;
            mask-size: 1.25rem;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            /* 讓圖示顏色永遠跟隨當前文字顏色 */
            background-color: currentColor;
        }

        .accordion-button:not(.collapsed) {
            background-color: var(--tci-color-6);
            color: var(--tci-color-1);
        }

        .accordion-button:focus {
            --bs-accordion-btn-focus-box-shadow: 0 0 0 0.05rem var(--tci-color-5);
        }

    .accordion-body {
        padding-left: 2rem;
    }

    .accordion-item {
        border-color: var(--tci-color-1);
    }

    .custom-accordion-radius {
        /* 外層的圓角大小 (等同於 rounded-3 的 0.5rem) */
        --bs-accordion-border-radius: 0.5rem;
        /* 內層按鈕的圓角大小 (公式：外層圓角 - 邊框厚度) */
        /* 這樣內外圓弧就會像俄羅斯娃娃一樣完美貼合，絕對不會吃邊框！ */
        --bs-accordion-inner-border-radius: calc(0.5rem - 1px);
        border-radius: var(--bs-accordion-border-radius);
    }
    /*據點效果*/
    /* 讓地標有可點擊的感覺 */
    .map-marker {
        cursor: pointer;
        transition: transform 0.2s;
        /* translate-middle 已經由 Bootstrap 處理，確保定位點置中 */
    }

        .map-marker:hover {
            transform: scale(1.2);
            z-index: 10;
        }

    .marker-icon {
        font-size: 1.5rem; /* 依據你的地圖大小調整圖示比例 */
        transition: color 0.3s ease;
    }
    /* 亮起時的跳動特效 (這會讓視覺動態感倍增) */
    @keyframes bounce-subtle {
        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-8px);
        }
    }

    .active-bounce {
        animation: bounce-subtle 1s infinite ease-in-out;
        filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.8)); /* 加點紅光陰影 */
    }
    /*側選單手機板*/
    @media (max-width: 991.98px) {
        div.div_SideBar button {
            opacity: 0.5;
        }

        div.div_SideBar #anchorMenu {
            background-color: var(--tci-color-4) !important;
        }

            div.div_SideBar #anchorMenu a {
                color: var(--tci-color-2) !important;
            }
    }