/* 定義所有字重 */
@font-face {
    font-family: 'SweiSpringSugar';
    src: url(https://cdn.jsdelivr.net/gh/max32002/swei-spring@1.068/WebFont/CJK%20TC/SweiSpringSugarCJKtc-ExtraLight.woff2) format("woff2");
    font-weight: 200;
}

@font-face {
    font-family: 'SweiSpringSugar';
    src: url(https://cdn.jsdelivr.net/gh/max32002/swei-spring@1.068/WebFont/CJK%20TC/SweiSpringSugarCJKtc-Light.woff2) format("woff2");
    font-weight: 300;
}

@font-face {
    font-family: 'SweiSpringSugar';
    src: url(https://cdn.jsdelivr.net/gh/max32002/swei-spring@1.068/WebFont/CJK%20TC/SweiSpringSugarCJKtc-Regular.woff2) format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: 'SweiSpringSugar';
    src: url(https://cdn.jsdelivr.net/gh/max32002/swei-spring@1.068/WebFont/CJK%20TC/SweiSpringSugarCJKtc-Medium.woff2) format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: 'SweiSpringSugar';
    src: url(https://cdn.jsdelivr.net/gh/max32002/swei-spring@1.068/WebFont/CJK%20TC/SweiSpringSugarCJKtc-SemiBold.woff2) format("woff2");
    font-weight: 600;
}

@font-face {
    font-family: 'SweiSpringSugar';
    src: url(https://cdn.jsdelivr.net/gh/max32002/swei-spring@1.068/WebFont/CJK%20TC/SweiSpringSugarCJKtc-Bold.woff2) format("woff2");
    font-weight: 700;
}

@font-face {
    font-family: 'SweiSpringSugar';
    src: url(https://cdn.jsdelivr.net/gh/max32002/swei-spring@1.068/WebFont/CJK%20TC/SweiSpringSugarCJKtc-Black.woff2) format("woff2");
    font-weight: 800;
}

* {
    /*font-family: SweiSpringSugar !important;*/
    font-family: Noto Sans TC !important;
    font-weight: 400;
}

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-y: scroll;
    height: 100%;
    scroll-padding-top: 80px;
    scroll-padding-bottom: -80px;
}

body {
    height: 100%;
    margin: 0;
    background-color: #fafafa;
    background-image: none;
    background-image: url('../_img/bg1.jpg');
    background-color: rgba(235, 232, 225, 0.8);
    background-blend-mode: screen;
}

.content_title {
    margin-top: 80px;
}

.content_body {
}

.navbar-custom {
    background-color: rgba(19, 76, 51, 0.9);
    height: 80px;
}

.navbar-collapse {
    background-color: transparent;
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: rgba(19, 76, 51, 0.9);
        padding: 15px; /* 建議增加一點內距，讓選單內容不貼邊 */
        border-radius: 8px; /* 選擇性：讓選單看起來更有設計感 */
    }
}

.nav-link.dropdown-toggle.show {
    color: white;
}

/* 所有連結都有底線，但不影響箭頭 */
.navbar .nav-link {
    position: relative;
    padding-bottom: 10px;
}

    .navbar .nav-link::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 4px;
        width: 0;
        height: 5px;
        background-color: #f1f2ad;
        transition: width 0.3s ease;
        border-radius: 2px;
    }

    .navbar .nav-link:hover::before {
        width: 100%;
        left: 0;
    }

/*MENU項目拉開距離*/
.dropdown-menu.show {
    margin-top: 20px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border: none;
    background-color: rgba(19, 76, 51, 0.8);
}

.dropdown-item {
    color: white !important;
}

    .dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

a.dropdown-item:hover {
    /*color: #f1f2ad !important;*/
}

#Accesskey_U {
    color: rgba(19, 76, 51, 0.8) !important;
}

/* -------------------------------------------------- */

.slogan {
    font-size: 2.5rem;
    text-align: center;
    font-weight: 800 !important;
    color: #006400;
    margin-bottom: 15px;
}

.slogan_mid {
    font-size: 1.65rem;
    font-weight: 700 !important;
    color: #006400;
}

.slogan_sp {
    font-weight: 700 !important;
    color: #ba4c30;
}

/* -------------------------------------------------- */

.tabBox {
    display: flex;
    overflow-x: auto;
}

.tab {
    flex: 1;
    min-width: 120px;
    padding: 16px 24px;
    text-align: center;
    cursor: pointer;
    position: relative;
    user-select: none;
    color: #696969;
    border-bottom: 1px solid #E0E0E0;
    font-size: 1.65rem;
    overflow: hidden;
}

    .tab::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        height: 100%;
        background-color: rgba(224, 224, 224, 0.7);
        transform: translateX(-50%);
        opacity: 0; /* 初始透明 */
        transition: width 0.3s ease-out, opacity 0.6s ease-out;
        z-index: 0;
    }

    .tab:hover {
        color: #212529;
        font-weight: 800 !important;
    }

    /* 點擊 → 展開 + 淡入 → 再淡出 */
    .tab.flash::before {
        width: 100%;
        opacity: 1; /* 先亮起 */
    }

    /* 動畫後期淡出（利用更長的 opacity 動畫） */
    .tab.flash.fadeout::before {
        opacity: 0;
    }

    .tab.active {
        border-bottom: 5px solid #006400;
        background-color: transparent;
    }

        .tab.active span {
            color: #212529;
            font-weight: 700 !important;
        }

    .tab > span {
        position: relative;
        z-index: 1;
    }

.contentBox {
}

.content {
    display: none;
    line-height: 40px;
}

    .content.active {
        display: block;
        padding: 20px 20px;
        min-height: 200px;
    }

/* -------------------------------------------------- */

.btn_def {
    border: 1px solid #006400;
    color: #006400;
    border-radius: 20px;
}

    .btn_def:hover {
        border: 1px solid #006400;
        color: white;
        background-color: #006400;
        transition: all 0.3s ease;
    }

/* -------------------------------------------------- */

.linkBox {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /*每排2個項目*/
    gap: 20px;
}

.link {
    padding: 10px 25px;
    font-size: 1.5rem;
    background-color: rgba(255,255,255,1);
    border-left: 3px solid #6CBA8B;
    /*TEXT*/
    font-size: 1.3rem;
    color: black;
    text-decoration: none; 
    
    /* 核心修正 */
    overflow: hidden; /* 萬一圖片瞬間變大，直接裁切，不准撐開我的 Grid 盒子 */
    /*height: 40px;*/ /* 建議給 .link 一個固定高度，與 img 的 40px 配合 */
}

    .link img {
        height: 40px;
        width: auto; /* 寬度隨高度自動縮放 */
        max-width: 100%; /* 關鍵：確保寬度絕對不會超出父層 .link */
        display: inline-block;
        vertical-align: middle;
        /* 核心修正：告訴瀏覽器，這張圖不管原始多大，載入前請參考這個比例 */
        aspect-ratio: auto;
    }

    .link:hover {
        transform: translate(10px, 0px);
        transition: transform 0.5s ease, opacity 0.5s linear;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
        background-color: rgba(233, 240, 233, 1)
    }

    .link span {
        font-size: 1rem;
        margin-left: 15px;
        color: #608393;
    }


/* ===== 手機/小螢幕：每排 1 個 ===== */
@media (max-width: 768px) {
    .linkBox {
        grid-template-columns: 1fr; /* 每排只顯示 1 個 */
    }

    .tabBox {
        display: block !important; /* 直向排列 */
        overflow-x: visible; /* 不需要水平捲動 */
    }

    .tab {
        min-width: unset; /* 移除固定寬度 */
        width: 100%; /* 一排一個 */
        display: block;
        border-bottom: 1px solid #E0E0E0;
    }
}


/* -------------------------------------------------- */

.queryBox2 {
    border-bottom: 2px dashed #e1e1e1;
    padding: 20px 0px;
}

    .queryBox2 label {
        font-size: 1rem;
        font-weight: 600;
    }

    .queryBox2 .chkdropdown label {
        font-size: 1.2rem;
        font-weight: 600; 
    }

/*button, select, input[type="text"], input[type="date"], input[type="submit"] {
    border-radius: 20px;
    padding: 0px 20px;
    height: 50px;
    border: 1px solid #e1e1e1;
}*/

/* 外層保持你的設定 */
.typeBox2 {
    display: flex;
    flex-direction: column;
    overflow-x: visible;
}

.tabHItem {
    flex: 1;
    min-width: 120px;
    padding: 10px 24px;
    text-align: left;
    cursor: pointer;
    position: relative;
    color: #696969;
    font-size: 1.5rem;
    overflow: hidden;
    text-decoration: none;
}

    .tabHItem::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        height: 100%;
        background-color: rgba(224, 224, 224, 0.7);
        transform: translateX(-50%);
        opacity: 0;
        z-index: 0;
        /* 分開設定 width 和 opacity 的 transition */
        transition: width 0.3s ease-out;
    }

    .tabHItem span {
        position: relative;
        z-index: 1;
    }

    .tabHItem:hover * {
        color: #212529;
        /*font-weight: 800 !important;*/
    }

    /* 點擊時：展開 + 淡入 */
    .tabHItem.flash::before {
        width: 100%;
        opacity: 1;
    }

    /* 淡出階段：只改變 opacity */
    /*.tabHItem.fadeout::before {
        opacity: 0;
        transition: width 0.3s ease-out, opacity 0.6s ease-out;
    }*/

    /* 動畫後期淡出（利用更長的 opacity 動畫） */
    .tabHItem.flash.fadeout::before {
        opacity: 0;
    }

    .tabHItem.active {
        border-left: 5px solid #006400;
        background-color: transparent;
        background-color: rgba(203, 185,148,0.1);
        font-weight: 700 !important;
        color: #212529;
    }

        .tabHItem.active span {
            color: #212529;
            font-weight: 700 !important;
        }

    .tabHItem > span {
        position: relative;
        z-index: 1;
    }

.tabHContent {
    display: none;
    line-height: 40px;
}

    .tabHContent.active {
        display: block;
        padding: 20px 20px;
        min-height: 200px;
    }


.tabHItem_disabled {
    flex: 1;
    min-width: 120px;
    padding: 10px 24px;
    text-align: left;
    cursor: pointer;
    position: relative;
    color: lightgray !important; /* 文字灰色 */
    font-size: 1.5rem;
    overflow: hidden;
    text-decoration: none;
}

/* active 樣式保留你的設定 */
.typeBox2_active {
    border-left: 5px solid #006400;
    background-color: rgba(203, 185, 148, 0.1);
}

    .typeBox2_active span {
        font-weight: 700 !important;
        color: #212529;
    }


/* -------------------------------------------------- */

.tips {
    text-align: center;
}

    .tips img {
        width: 200px;
        margin: 15px 0px;
    }

    .tips ul {
        list-style: disc;
        text-align: left;
    }

.line .row .col {
    padding: 0px 30px;
}

    .line .row .col:not(:last-child) {
        border-right: 1px solid #e1e1e1;
    }

.line p {
    margin-left: 28px;
    color: #919191;
    /*font-size:1rem;*/
}

.tb_new {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
    table-layout: fixed;
}
    .tb_new tr th {
        text-align: center;
        border-bottom: 1px solid #e1e1e1;
        padding: 20px;
        font-weight: 600;
        background-color: rgba(255,255,255,0.8);
    }

    .tb_new tr td {
        text-align: center;
        padding: 10px;
        background-color: rgba(255,255,255,0.5);
        word-break: break-word;
    }

    .tb_new tr:not(:last-child) td {
        border-bottom: 1px solid #e1e1e1;
    }

.oneline {
    max-width: 650px;
    white-space: nowrap; /* 不換行 */
    overflow: hidden; /* 超出隱藏 */
    text-overflow: ellipsis; /* 省略號 */
}

    .oneline a {
        border: none;
        padding: 0px;
        position: relative;
        text-decoration: none;
        color: #000;
        padding: 0 2px;
        z-index: 1; /* 確保連結元素本身有適當的堆疊順序 */
    }

        .oneline a:hover {
            background-color: transparent;
        }

        .oneline a::before {
            content: "";
            position: absolute;
            bottom: 0; /* 從底部開始 */
            left: 0;
            width: 100%;
            height: 0; /* 初始為 0 高度 */
            background-color: rgba(177, 127, 89, 0.2); /* 使用與懸停顏色相符的顏色 */
            z-index: -1; /* 確保在文字下面 */
            transition: height 0.2s; /* 添加小動畫使效果更順暢 */
            transform: skew(-12deg); /* 加入傾斜效果，負值為向左傾斜 */
        }

        .oneline a:hover::before {
            height: 50%; /* 懸停時只顯示一半高度 */
        }


.card_cust {
    border-radius: 20px;
}

    .card_cust .card-header {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .card_cust .card-body {
        font-size: 1.1rem;
        line-height: 30px;
    }

    .card_cust:hover {
        box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        transform: translate(-5px, -5px);
    }

    .card_cust .card-header {
        font-weight: 700;
    }


/* -------------------------------------------------- */

.info1, .info2, .info3 {
    width: 100%;
    height: calc(100vh - 65px);
    /*scroll-snap-align: start;*/
}

.planInfo {
    width: 800px;
    margin: 0 auto;
    font-size: 1.5rem;
    line-height: 180%;
}


/* ===== 平板（≤ 1024px） ===== */
@media (max-width: 1024px) {
    .info1, .info2, .info3 {
        min-height: auto; /* 取消固定最小高度 */
        height: auto; /* 高度依內容自動調整 */
        padding: 2rem 1rem; /* 增加內距避免貼邊 */
    }

    .slogan {
        font-size: 2rem;
        text-align: center;
    }

    .planInfo {
        font-size: 1.05rem;
        line-height: 1.8;
        max-width: 100%;
    }
}

/* ===== 手機（≤ 768px） ===== */
@media (max-width: 768px) {
    .slogan {
        font-size: 1.6rem;
        margin-bottom: 1rem;
        text-align: center;
    }

    .planInfo {
        font-size: 0.95rem;
        line-height: 1.7;
        text-align: left;
        max-width: 100%;
    }
}


/* -------------------------------------------------- */

#video {
    width: 70%;
    margin: 0 auto;
}

    #video video {
        width: 100%;  影片寬度填滿容器 
        height: auto;  高度自動調整保持比例 
        max-width: 100%;  確保不超出容器 
    }

/* -------------------------------------------------- */