/* 終極Bootstrap覆蓋 - 確保版面不受Bootstrap影響 */
html body .layout-container * {
    box-sizing: border-box !important;
}

html body .container-fluid,
html body .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 防止Bootstrap的col系統干擾 */
html body .layout-container [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.disabled {
    pointer-events: none;
    cursor: default;
    color: grey;
}

/* ===== 外層 ===== */
.title-box {
    display: flex;
    align-items: center;
}

/* 左側群組撐滿 */
.title-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
}

/* MENU */
.menu-title {
    flex: 0 0 auto;
    white-space: nowrap;
    border-bottom: 1px solid #434344;
    font-weight: 600;
    font-size: 20px;
    max-width: 60%;
}


/* 標題圖 */
.title-img {
    flex: 0 0 auto;
}

.title-img img {
    height: 60px;
}

/* summary - 底線長度跟隨文字 */
/* .menu-summary {
    flex: 0 0 auto;
    width: fit-content;
    border-bottom: 1px solid #434344;
    font-size: 18px;
    white-space: nowrap;
} */


/* 雲朵固定最右 */
.cloud-img {
    display: flex;
    align-items: center;
    /* 垂直置中 */
    height: 80px;
    flex: 0 0 auto;
    margin-left: auto;
    position: relative;
    /* 為絕對定位按鈕提供定位基準 */
}

.cloud-img img {
    width: 100%;
}

/* 圖片在下方 */
.overlay-img {
    position: relative;
    z-index: 1;
    display: block;
}

/* 按鈕浮疊在圖片上 */
.read-more-overlay {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 2;
    /* 壓在圖片上 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    border-radius: 50px;
    /* 圓角按鈕 */
    background-color: #4190DD;
    color: white;
    text-decoration: none;
    overflow: visible;
    /* 允許箭頭穿出 */
    transition: background-color 1s;
}

.more-btn {
    border: 2px solid #4190DD;
    color: #4190DD;
    background-color: white;
    border-radius: 50px;
    padding: 8px 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    width: auto;
    min-width: 120px;
    /* 去掉 link 的底線 */
    text-decoration: none;
}

.more-btn .arrow {
    width: 20px;
    height: 20px;
    border: 2px solid #4190DD;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    font-size: 12px;
}




/* 桌面版强制佈局 - 僅在桌面版生效，避免覆蓋手機版隱藏 */
@media (min-width: 768px) {
    html body div.layout-container,
    html body .layout-container,
    body .layout-container {
        display: flex !important;
        flex-direction: row !important;
        min-height: auto !important;
        /* 讓左右區塊撐滿高度 */
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
    }
}

/* 確保容器在桌面版有正確寬度 - 最高優先級 */
@media (min-width: 769px) {
    html body div.container,
    html body .container,
    body .container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        width: auto !important;
    }
}

/* 關於德安插圖 - 右下角人物，橫跨邊框線 */
.layout-container::after {
    content: '';
    position: absolute;
    bottom: -45px;  /* 調整位置讓圖片更貼近底線 */
    right: -24px;
    width: 180px;   /* 調整尺寸以配合新圖片 */
    height: 180px;
    background: url('../images/home/Group5788.png') no-repeat center center;
    background-size: contain;
    z-index: 3;
    pointer-events: none;
}

/* 手機版插圖定位 */
.mobile-layout {
    position: relative;
}

/* 手機版插圖 - 關於德安整個區塊的右下方 */
@media (max-width: 768px) {
    .intro-section {
        position: relative;
    }

    .intro-section::after {
        content: '';
        position: absolute;
        bottom: 20px;
        right: 20px;
        width: 120px;
        height: 120px;
        background: url('../images/home/Group 5496.png') no-repeat center center;
        background-size: contain;
        z-index: 3;
        pointer-events: none;
    }
}

/* 左側導覽列 - 桌面版强制設定 - 最高優先級 */
html body div.nav-container,
html body .nav-container,
body .nav-container {
    /* border: 4px solid #4190DD; */
    background: transparent !important;
    min-height: 60vh !important;
    flex: 0 0 25% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 25% !important;
}

/* 桌面版確保導覽列正確顯示 */
@media (min-width: 769px) {
    body .nav-container {
        display: flex !important;
        flex: 0 0 25% !important;
    }
}

/* 強制設定nav相關元素透明背景 */
.nav-container .nav,
.nav-container .nav.flex-column,
.nav-container > div,
#sidebarNav {
    background: transparent !important;
    background-color: transparent !important;
}

/* 覆蓋所有可能的Bootstrap預設樣式 */
html body .nav-container * {
    background-color: transparent !important;
    background: transparent !important;
}

/* 只有active的nav-link才有藍色背景 */
html body .nav-container .nav-link.active {
    background-color: #4190DD !important;
    background: #4190DD !important;
}

/* 終極覆蓋 - 最高優先級 */
body .layout-container .nav-container,
body .layout-container .nav-container > *,
body .layout-container .nav-container * {
    background: none !important;
    background-color: rgba(0,0,0,0) !important;
}

/* 確保active狀態正確顯示 */
body .layout-container .nav-container .nav-link.active {
    background: #4190DD !important;
    background-color: #4190DD !important;
}

/* 覆蓋bg-gray背景色 */
.bg-gray {
    background-color: transparent !important;
}

/* 影像特輯區塊定位容器 */
.Video-section .cloud-img {
    position: relative;
}

/* 影像特輯人物插圖樣式 */
.video-section-illustration {
    position: absolute;
    top: -20px;
    right: 150px;
    width: 200px;
    height: auto;
    z-index: 2;
}

.video-section-illustration img {
    width: 100%;
    height: auto;
}

/* 手機版調整 */
@media (max-width: 768px) {
    .video-section-illustration {
        width: 140px;
        top: 0px;
        right: 120px;
    }
}

.nav-container .nav-link {
    height: 4rem;
    padding: 1rem;
}

.nav-container .more-btn {
    margin-left: 1rem;
    margin-right: 1rem;
}


.nav-link {
    color: black;
    font-weight: 500;
    /* padding: 12px 16px; */
    border-radius: 0;
    display: block;
    /* 讓連結佔滿整行 */
    width: 100%;
    /* 佔滿父容器寬度 */
    background: transparent !important;
    border: none !important;
}

.nav-link.active {
    background-color: #4190DD !important;
    color: white !important;
}

/* 左側導覽列 - 下拉選單 */
#sidebarSelect {
    width: 100%;
    font-size: 1.5rem;
    /* 或者限制最大寬度 */
    margin: 0 auto;
    /* 置中 */
    background-color: #4190DD;
    /* 藍底 */
    color: #fff;
    /* 白字 */
    border: none;
    border-radius: 6px;
    /* 圓角 */
    padding: 0.5rem;
    /* 內距 */
}

/* 下拉選項樣式 */
#sidebarSelect option {
    background-color: #4190DD;
    color: #fff;
    font-size: 0.7rem;
}



/* 右側內容 - 桌面版强制設定 - 最高優先級 */
html body div.content-container,
html body .content-container,
body .content-container {
    flex: 1 !important;
    padding: 1rem !important;
    border: 4px solid #4190DD !important;
    background: #ffffff !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: auto !important;
    max-width: none !important;
}

/* 桌面版確保內容區域正確顯示 */
@media (min-width: 769px) {
    body .content-container {
        display: block !important;
        flex: 1 !important;
    }
}

/* 內容文字區域寬度限制，為插圖留空間 */
.content-container h3,
.content-container p {
    max-width: 650px;
}

/* 內容圖片等比縮放，不受文字寬度限制 */
.content-container img {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
}

/* 圖片容器不受寬度限制 */
.content-container picture {
    max-width: none;
}

.video-wrap {
    /* background-color: #fbf6f6; */
}

/* 主播區塊 */
.video-wrap .video-iframe {
    border: 2px solid #9b9d9e;
    width: 100%;
    min-height: 600px;
    height: 60vh;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10PX;
}

.video-title {
    font-size: 2rem;
    font-weight: bold;
}

/* 影像特輯隔離容器 - 切斷 section-inner 的 flex 影響 */
.video-carousel-wrapper {
    display: block !important;        /* 關鍵：切斷父層 flex column */
    width: 100%;
    overflow: visible;                /* 修改：讓圓點導航可見 */
    padding-bottom: 60px;             /* 為圓點導航留出空間 */
}

/* 影像特輯輪播容器 - 基於 jgl-shop 成功經驗 */
.video-carousel {
    width: 100%;         /* 強制撐開 Slick 的保險 */
    max-width: 960px;    /* 限寬用 max-width 避免計算錯誤 */
    margin: 0 auto;
    padding: 0 60px;     /* 為箭頭留空間 */
}

/* 確保Slick輪播正常運作 - 標準防呆版 */

.video-carousel.slick-initialized {
    display: block !important;
}

.video-carousel .slick-list {
    overflow: hidden;
    width: 100%;    /* 確保 list 撐開 */
}

.video-carousel .slick-track {
    display: flex !important;    /* 關鍵：強制橫向 */
}

.video-carousel .slick-slide {
    display: block;              /* 保險：確保正確顯示 */
    height: auto;
    float: none !important;      /* 防止被舊 CSS 影響 */
    margin: 0 0.5rem;           /* jgl-shop 成功經驗：slide 間距 */
    transition: 0.3s;           /* jgl-shop 成功經驗：平滑過渡 */
}




.card-body .description {
    color: #97c4f4;
}

.card-body .card-text {
    font-size: 0.9rem;
}


/* 整體 input group 高度一致 */
.custom-info-group .form-control,
.custom-info-group .input-group-text {
    height: 40px;
    font-size: 0.9rem;
}

/* 左側淺藍色背景 */
.custom-info-group .info-left {
    background-color: #97c4f4;
    /* 淺藍色 */
    border-color: #97c4f4;
    color: #000;
    font-weight: 500;
}

/* 右側淺藍色框輸入框 */
.custom-info-group .info-right {
    border: 1px solid #d0e7ff;
    border-left: none;
    /* 去掉重疊邊框 */
    color: #0059aa;
}

.card-carousel-wrapper {
    position: relative;
    /* 必須，箭頭定位用 */
    margin: 0px;
}

/* 縮小關於德安與訊息公告間距 */
.intro-section {
    margin-bottom: -30px !important;
}

/* 確保父容器不會截斷內容 */
.home-section.news-section {
    overflow: visible !important;
    margin-top: -20px !important;
}

.home-section.news-section .container {
    overflow: visible !important;
}

.home-section.news-section .section-inner {
    overflow: visible !important;
    position: relative;
}

/* 新聞卡片輪播樣式 */
.card-carousel,
.news-carousel {
    display: flex !important;
    gap: 12px;
    padding-top: 15px;
    padding-bottom: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

/* 卡片對齊 snap 點 */
.news-carousel .card {
    scroll-snap-align: start;
}

.home-section.news-section .card-carousel .card,
.home-section.news-section .news-carousel .card {
    width: 330px !important;
    min-width: 330px !important;
    max-width: 330px !important;
    height: 480px !important;
    min-height: 480px !important;
    max-height: 480px !important;
    /* 固定卡片尺寸 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    /* 內容上下分佈 */
    margin: 0 10px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    border: 1px solid #e0e0e0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.home-section.news-section .card-carousel .card img,
.home-section.news-section .news-carousel .card img {
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    object-fit: cover !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* 手機版訊息公告卡片尺寸調整 */
@media (max-width: 768px) {
    .home-section.news-section .card-carousel .card,
    .home-section.news-section .news-carousel .card {
        width: 325px !important;
        min-width: 325px !important;
        max-width: 325px !important;
        height: 420px !important;
        min-height: 420px !important;
        max-height: 420px !important;
    }

    .home-section.news-section .card-carousel .card img,
    .home-section.news-section .news-carousel .card img {
        height: 195px !important;
        min-height: 195px !important;
        max-height: 195px !important;
    }

    /* 手機版隱藏空白佔位卡片 */
    .home-section.news-section .card-carousel .empty-spacer-card,
    .home-section.news-section .news-carousel .empty-spacer-card {
        display: none !important;
    }
}

/* 桌面版隱藏空白佔位卡片內容 */
.home-section.news-section .card-carousel .empty-spacer-card,
.home-section.news-section .news-carousel .empty-spacer-card {
    visibility: hidden !important;
    opacity: 0 !important;
}

.home-section.news-section .card-carousel .empty-spacer-card *,
.home-section.news-section .news-carousel .empty-spacer-card * {
    visibility: hidden !important;
    opacity: 0 !important;
    color: transparent !important;
}

.card-carousel .card-body,
.news-carousel .card-body {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.card-carousel .card-body h6,
.news-carousel .card-body h6,
.card-carousel .card-body h5,
.news-carousel .card-body h5 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    color: #333 !important;
    line-height: 1.4 !important;
}

.card-carousel .card-body .card-title,
.news-carousel .card-body .card-title {
    margin-bottom: 12px !important;
}

/* 這是文字內容的 description，不是連結 */
.card-carousel .card-body .card-summary .description,
.news-carousel .card-body .card-summary .description {
    color: #97c4f4 !important;
    font-size: 13px !important;
    margin-bottom: 5px !important;
}

.card-carousel .card-body .card-text,
.news-carousel .card-body .card-text {
    font-size: 13px !important;
    color: #666 !important;
    margin-bottom: 8px !important;
    flex-grow: 1 !important;
    line-height: 1.4 !important;
}

/* 卡片內的 input-group 樣式 */
.card-carousel .card-body .custom-info-group,
.news-carousel .card-body .custom-info-group {
    margin-bottom: 10px !important;
    font-size: 12px !important;
}

.card-carousel .card-body .custom-info-group .form-control,
.news-carousel .card-body .custom-info-group .form-control,
.card-carousel .card-body .custom-info-group .input-group-text,
.news-carousel .card-body .custom-info-group .input-group-text {
    height: 32px !important;
    font-size: 12px !important;
}

/* 卡片內的簡述樣式 */
.card-carousel .card-body .card-summary,
.news-carousel .card-body .card-summary {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 15px !important;
    flex-grow: 1 !important;
    line-height: 1.5 !important;
    max-height: 4.5em !important; /* 3 行 × 1.5 line-height = 4.5em */

    /* 文字超過 3 行顯示省略號 */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
}

.card-carousel .card-body .text-end,
.news-carousel .card-body .text-end {
    margin-top: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.card-carousel .card-body .description,
.news-carousel .card-body .description {
    color: #4190DD !important;
    font-size: 13px !important;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 強制顯示詳閱更多按鈕 - 正常樣式 */
.card-carousel .card-body .text-end a,
.news-carousel .card-body .text-end a,
.card-carousel .card-body a.description,
.news-carousel .card-body a.description,
.card-carousel .card-body a.btn,
.news-carousel .card-body a.btn,
.card-carousel .card-body a.btn-link,
.news-carousel .card-body a.btn-link {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #4190DD !important;
    font-size: 12px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    height: auto !important;
}

.card-carousel .card-body .description:hover,
.news-carousel .card-body .description:hover {
    color: #2563eb !important;
}

.card-carousel .card-body .arrow-img,
.news-carousel .card-body .arrow-img {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.3s ease !important;
}

.card-carousel .card-body .description:hover .arrow-img,
.news-carousel .card-body .description:hover .arrow-img {
    transform: translateX(2px) !important;
}

/* Slick 輪播特定樣式 */
.card-carousel.slick-initialized,
.news-carousel.slick-initialized {
    display: block !important;
}

.card-carousel.slick-initialized .slick-track,
.news-carousel.slick-initialized .slick-track {
    display: flex !important;
    align-items: stretch !important;
}

.card-carousel.slick-initialized .slick-slide,
.news-carousel.slick-initialized .slick-slide {
    height: auto !important;
    padding: 0 8px !important;
}

.card-carousel.slick-initialized .slick-slide > div,
.news-carousel.slick-initialized .slick-slide > div {
    height: 100% !important;
}

/* 手機版卡片水平定位調整 - 不干擾 Slick 動態 transform */
@media (max-width: 768px) {
    .card-carousel.slick-initialized .slick-list,
    .news-carousel.slick-initialized .slick-list {
        margin-left: 20px !important;
    }
}

.card-carousel.slick-initialized .card,
.news-carousel.slick-initialized .card {
    height: 100% !important;
    margin-right: 41px !important;
}

.custom-prev,
.custom-next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 990;
    background: transparent;
    border: none;
    color: black;
    font-size: 30px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
}



.custom-prev .arrow-img,
.custom-next .arrow-img {
    width: 35px;
    height: auto;
    transition: transform 0.6s ease;
}

.slick-prev:hover .arrow-img,
.slick-next:hover .arrow-img,
.custom-prev:hover .arrow-img,
.custom-next:hover .arrow-img {
    transform: scale(1.5);
    /* 放大效果 */
}

.slick-prev {
    left: -40px;
}

.custom-prev {
    left: -65px;
}

.custom-next {
    right: -65px;
}

/* 手機版箭頭位置調整 */
@media screen and (max-width: 991.98px) {
    .custom-prev {
        left: -15px !important;
    }

    .custom-next {
        right: -15px !important;
    }

    /* 手機版卡片寬度調整 - 修復滑動距離問題 */
    .news-carousel .card,
    .card-carousel .card {
        width: calc(100vw - 60px) !important;
        max-width: 320px !important;
        margin-right: 20px !important;
    }
}

.slick-prev:hover,
.slick-next:hover,
.custom-prev:hover,
.custom-next:hover {
    background: rgb(0, 0, 0, 0);
}

/* 訊息公告標題 */
.card-title {
    height: 70px;
    margin-bottom: 10px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    /* 行數，依字級自行調 */
    overflow: hidden;
}

/* 訊息公告簡述 */
.card-summary {
    height: 70px;
    margin-bottom: 10px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    /* 行數，依字級自行調 */
    overflow: hidden;
}

/* 選中狀態 */
.more-btn:active,
.more-btn:focus,
.more-btn:hover,
.more-btn.selected {
    background-color: #4190DD !important;
    color: white !important;

}

/* 確保關於德安按鈕樣式正確 - 提高特異性 */
.text-center .more-btn,
div .more-btn {
    border: 2px solid #4190DD !important;
    color: #4190DD !important;
    background-color: white !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

.text-center .more-btn:hover,
.text-center .more-btn:focus,
.text-center .more-btn:active,
div .more-btn:hover,
div .more-btn:focus,
div .more-btn:active {
    background-color: #4190DD !important;
    color: white !important;
}

.more-btn:active .arrow,
.more-btn:focus .arrow,
.more-btn:hover .arrow {
    border-color: white;
    color: white;
    transform: translateX(15px);
    /*  transform: translateX(12px) scaleX(1.5); */
    /* 向右 12px 並拉長 1.5 倍 */
}



/* 合作夥伴隔離容器 - 切斷 section-inner 的 flex 影響 */
.partnership-section .section-inner {
    display: block !important;            /* 關鍵：切斷父層 flex column */
}

/* 合作夥伴跑馬燈 - 採用 greenpoint 專案成功配置 */
.partners-carousel-container {
    padding: 40px 0;
    margin-bottom: 30px;
}

.partners-item {
    margin: 0 10px;                       /* 調整左右間距 */
    width: 200px !important;              /* 固定寬度 200px - 顯示 5.5 個 */
    height: 200px !important;             /* 固定高度 200px */
    display: flex !important;             /* Slick 需要 flex 對齊 */
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 10px;                        /* 減少內邊距 */
}

.partners-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.partners-logo {
    max-width: 200px !important;          /* 限制最大寬度 200px */
    max-height: 200px !important;         /* 限制最大高度 200px */
    width: 200px !important;              /* 固定寬度 200px */
    height: 200px !important;             /* 固定高度 200px */
    object-fit: contain !important;       /* 圖片等比縮放適應容器 */
    object-position: center !important;   /* 圖片置中 */
    filter: grayscale(20%) opacity(0.8);
    transition: all 0.3s ease;
}

.partners-item:hover .partners-logo {
    filter: grayscale(0%) opacity(1);
}

/* 影像特輯樣式 - GPT 最終解法：不碰 slide 寬度 */
.video-carousel .card-snap {
    margin: 0 8px;    /* 只控制間距，永遠不要用 width: % */
}

/* 關鍵：用圖片來縮，而不是 container */
.video-carousel .card-snap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;    /* optional 美化 */
}


/* 移除重複定義 - 已在上方統一定義 */

/* 移除通用 slick-dots - 改用特定選擇器 */

/* 移除通用 slick-dots li 定義 - 改用影像特輯專用選擇器 */

/* 影像特輯箭頭按鈕樣式 - 完全透明版本 */
.video-carousel .slick-prev,
.video-carousel .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 990;
    border: none;
    background: transparent !important;      /* 強制透明背景 */
    width: 50px;                            /* 保持按鈕尺寸 */
    height: 50px;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* 隱藏 Slick 預設的偽元素箭頭 */
.video-carousel .slick-prev:before,
.video-carousel .slick-next:before {
    display: none !important;
}

/* 確保 hover 狀態也完全透明 */
.video-carousel .slick-prev:hover,
.video-carousel .slick-prev:focus,
.video-carousel .slick-next:hover,
.video-carousel .slick-next:focus {
    background: transparent !important;
    outline: none !important;
    transform: translateY(-50%) scale(1.05);  /* 僅保留放大效果 */
}

.video-carousel .slick-prev {
    left: 5px;                              /* 內縮到容器內側 */
}

.video-carousel .slick-next {
    right: 5px;                             /* 內縮到容器內側 */
}

/* Banner 圓點導航樣式 - 移至右下方，改為三角箭頭 */
.home-hero-slick .slick-dots,
.js-home-hero-slick .slick-dots {
    position: absolute !important;
    bottom: 20px !important;                /* 移至右下方 */
    right: 20px !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 15px !important;                   /* 間距 */
    list-style: none !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    z-index: 990 !important;                /* 低於導覽列 */
}

.home-hero-slick .slick-dots li,
.js-home-hero-slick .slick-dots li {
    flex: 0 0 auto !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-left: 12px solid #C8C8C8 !important; /* 預設色碼 */
    cursor: pointer !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) !important;
    border-radius: 0 !important;           /* 移除圓角，確保三角形 */
}

.home-hero-slick .slick-dots li:hover,
.js-home-hero-slick .slick-dots li:hover {
    border-left-color: #418FDE !important; /* hover 效果 */
    transform: scale(1.1) !important;
}

.home-hero-slick .slick-dots li button,
.js-home-hero-slick .slick-dots li button {
    display: none !important;
}

.home-hero-slick .slick-dots li.slick-active,
.js-home-hero-slick .slick-dots li.slick-active {
    border-left-color: #418FDE !important; /* 當前張色碼 */
    transform: scale(1.2) !important;       /* 活動狀態更大 */
}

/* 手機版 BANNER 導航 - 正下方中央 */
@media screen and (max-width: 991.98px) {
    .home-hero-slick .slick-dots,
    .js-home-hero-slick .slick-dots {
        bottom: -50px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        justify-content: center !important;
        z-index: 995 !important;
        gap: 15px !important;
    }
}

/* 影像特輯圓點導航樣式 - 中央底部位置 */
.video-carousel .slick-dots {
    position: absolute;
    /* bottom: 45px; */
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    justify-content: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    /* padding: 10px 0; */
    z-index: 990;
    margin-bottom: -15px;
}

.video-carousel .slick-dots li {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;      /* 增大圓點 */
    border-bottom: 8px solid transparent;
    border-left: 12px solid #C8C8C8;        /* 普通狀態色碼 */
    cursor: pointer;
    margin: 0;
    transition: all 0.3s ease;             /* 添加過渡效果 */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));  /* 添加陰影 */
}

.video-carousel .slick-dots li:hover {
    border-left-color: #418FDE;            /* hover 效果 */
    transform: scale(1.1);
}

.video-carousel .slick-dots li button {
    display: none;
}

.video-carousel .slick-dots li.slick-active {
    border-left-color: #418FDE;            /* 當前張色碼 */
    transform: scale(1.2);                  /* 活動狀態更大 */
}

.video-arrow img {
    width: 32px !important;                 /* 稍微加大圖標以增強可見性 */
    height: 32px !important;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)) brightness(0.6);  /* 添加陰影增強對比 */
    transition: all 0.3s ease;
}

.video-arrow:hover img {
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.5)) brightness(0.4);  /* hover 時加強陰影 */
    transform: scale(1.15);
}

/* 影像特輯播放列表和插圖容器 */
.video-carousel-with-illustration {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-top: 15px;
}

/* 影像特輯底部人物插圖 */
.video-bottom-illustration {
    position: relative;
    flex-shrink: 0;
    align-self: flex-end;
    transform: translateY(-30px);
}

.video-bottom-illustration img {
    width: 200px;
    height: auto;
    margin-bottom: -70px;
}

/* 播放列表縮小 */
.video-carousel-with-illustration .video-carousel-box {
    flex: 1;
    max-width: 75%;
}

.video-carousel-with-illustration .video-carousel {
    max-width: 100%;
    padding: 0 40px;
}

/* 調整影像特輯與合作夥伴間距 */
.Video-section.home-section {
    margin-bottom: -30px !important;
}

.partnership-section.home-section {
    margin-top: -30px !important;
    padding: 1.2rem 0 !important;
}

/* ===== 桌面版/手機版 顯示控制 ===== */
/* 桌面版顯示，手機版隱藏 */
@media (min-width: 769px) {
    .desktop-layout { display: flex !important; }
    .mobile-layout { display: none !important; }
}

/* 手機版顯示，桌面版隱藏 */
@media (max-width: 768px) {
    .desktop-layout { display: none !important; }
    .mobile-layout { display: block !important; }
}

/* ===== 手機版專用樣式 ===== */
@media (max-width: 768px) {

    /* 手機版標題容器 */
    .mobile-title-box {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }

    /* 手機版第一行：標題 + 圖片 + 雲朵 */
    .mobile-title-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* 手機版簡述：第二行獨立顯示 */
    .mobile-summary {
        display: block !important;
        width: 100% !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-top: 5px !important;
    }

    /* 手機版標題樣式 */
    .mobile-title-left .menu-title {
        font-size: 18px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    /* 手機版圖片樣式 */
    .mobile-title-left .title-img img {
        height: 50px !important;
    }

    /* 手機版雲朵圖樣式 - 放大 */
    .mobile-title-left .cloud-img img {
        height: auto !important;
        width: auto !important;
        max-width: 150px !important;
    }

    .container {
        max-width: none !important;
        /* 移除寬度限制 */
        padding: 0 !important;
        /* 移除左右留白 */
    }

    /* 關於德安 */
    .layout-container {
        flex-direction: column;
    }

    /* 手機版調整佈局順序：導覽在上，內容在下 */
    .layout-container .nav-container {
        order: 1;
        margin-bottom: 20px;
        margin-top: 0;
    }

    .layout-container .content-container {
        order: 2;
    }

    /* 手機版：調整插圖大小和位置，同樣跨越邊框 */
    .layout-container::after {
        width: 120px;
        height: 120px;
        bottom: -32px;
        right: -15px;
    }

    /* 手機版:左側導覽列移除 */
    .nav-container .nav {
        display: none;
    }

    /* 手機版:左側導覽列 - 固定尺寸，不參與彈性計算 */
    .nav-container {
        flex: none;
        min-height: auto;
    }

    /* 手機版:右側內容頁 */
    .content-container {
        flex: none;
        width: 100%;
        height: 60vh;
        /* border: 2px solid #f70404; */
    }

    /* 手機版：內容文字使用全寬 */
    .content-container h3,
    .content-container p {
        max-width: none;
    }

    /* 手機版:主播區塊   */
    .video-wrap .video-iframe {
        height: 30vh;
        min-height: 0;
        padding: 1px;
        width: 100%;
    }

    /* 舊設定已清理 - 現在使用專門的手機版HTML結構 */

    .overlay-img {
        width: 100%;
    }

    .more-btn {
        font-size: 12px;
    }

    .read-more-overlay {
        bottom: 15px;
        right: 15px;
    }

    /* 手機版影像特輯底部人物插圖 */
    .video-bottom-illustration {
        margin-left: 10px;
        margin-top: 15px;
    }

    .video-bottom-illustration img {
        width: 150px;
    }

    /* 手機版調整影像特輯與合作夥伴間距 */
    .Video-section.home-section {
        margin-bottom: -40px !important;
    }

    .partnership-section.home-section {
        margin-top: -40px !important;
    }

    /* 手機版合作夥伴調整 */
    .partnership-carousel {
        gap: 10px !important;                /* 手機版較小間距 */
        justify-content: flex-start !important;  /* 手機版改為左對齊，可滾動 */
        overflow-x: scroll !important;       /* 確保可滾動 */
    }

    .partnership-carousel .card-snap {
        height: 60px;                        /* 手機版較小的高度 */
        min-width: 100px;                    /* 手機版較小的最小寬度 */
    }

    .partnership-carousel .card-snap img {
        max-width: 80px !important;          /* 手機版較小的圖片 */
        max-height: 40px !important;
    }
}

/* 聯絡諮詢區塊樣式 */
.contact-section {
    padding: 60px 0;
    margin-top: -5px !important;
    /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
}

/* 聯絡諮詢區塊整體容器 */
.contact-wrap {
    /* padding: 60px 0; */
    padding-bottom: 60px;
}

/* 圖片和文案區域 - 居中 */
.consultation-content-area {
    /* padding: 40px 20px 0 20px; */
    max-width: 800px;
    margin: 0 auto;
}

/* 調整按鈕上方間距 - 負值讓按鈕貼近線條 */
.contact-section .col-12.col-lg-10 {
    margin-bottom: -35px;
}

.consultation-images-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

/* 整體連接線 - 橫跨左右插圖 */
.consultation-images-container::after {
    content: '';
    position: absolute;
    bottom: 136px;
    left: 120px;
    right: 70px;
    height: 2px;
    background-color: #418FDE;
    z-index: 0;
}

/* 左側和右側插圖容器 */
.consultation-left,
.consultation-right {
    flex: 0 0 auto;
}

/* 左右插圖 - 放大 */
.consultation-left-img,
.consultation-right-img {
    max-width: 200px;
    height: auto;
    max-height: 200px;
    object-fit: contain;
}

/* 左側插圖向下調整，對齊連接線 */
.consultation-left-img {
    transform: translateY(-46px);
}

/* 右側人物圖向上調整並放大 - 與主標平行 */
.consultation-right-img {
    transform: translateY(-115px);
    max-width: 300px;
    max-height: 300px;
}

/* 中間文案和連接線區域 */
.consultation-middle-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
    position: relative;
    margin-top: -80px;
    margin-left: 40px;
}

/* 連接線 - 隱藏原本的，改用 container::after */
.consultation-connection-line {
    display: none;  /* 使用 consultation-images-container::after 取代 */
}

/* 中間文案 */
.consultation-text {
    text-align: center;
}

.consultation-main-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.4;
    white-space: nowrap;
}

.consultation-sub-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0;
    line-height: 1.4;
    white-space: nowrap;
}

/* 按鈕區域 */
.consultation-button-area {
    margin-top: -103px !important;
}

/* 諮詢按鈕樣式 - 調整為適中尺寸且置中 */
.consultation-btn {
    background-color: white;
    color: #418FDE !important;
    border: 2px solid #418FDE;
    border-radius: 30px;              /* 更大的圓角 */
    padding: 14px 40px;               /* 更大的 padding */
    font-size: 1.125rem;              /* 18px - 更大的字體 */
    font-weight: 600;                 /* 更粗的字體 */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;                        /* 更大的箭頭間距 */
    transition: all 0.3s ease;
    max-width: 200px;                 /* 更大的最大寬度 */
}

.consultation-btn:hover {
    background-color: #418FDE;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(65, 143, 222, 0.3);
}

.consultation-btn .arrow {
    font-size: 1.25rem;               /* 更大的箭頭 */
    transition: transform 0.3s ease;
}

.consultation-btn:hover .arrow {
    transform: translateX(5px);
}

/* 手機版調整 */
@media (max-width: 768px) {
    .contact-wrap {
        padding: 40px 0;
    }

    /* 圖片區域 - 改為垂直排列 */
    .consultation-content-area {
        padding: 30px 15px;
        max-width: none;
    }

    .consultation-images-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    /* 手機版隱藏橫跨線條 */
    .consultation-images-container::after {
        display: none;
    }

    .consultation-middle-content {
        order: 2;
        margin: 0;
        width: 100%;
    }

    .consultation-left {
        order: 1;
    }

    .consultation-right {
        order: 3;
    }

    /* 連接線改為垂直 - 手機版重新顯示 */
    .consultation-connection-line {
        display: block;
        width: 4px;
        height: 40px;
        margin-top: 15px;
        margin-bottom: 0;
        background-color: #418FDE;
        position: relative;
    }

    .consultation-connection-line::before,
    .consultation-connection-line::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        background-color: #418FDE;
        border-radius: 50%;
        left: -2px;
    }

    .consultation-connection-line::before {
        top: -4px;
    }

    .consultation-connection-line::after {
        top: auto;
        bottom: -4px;
    }

    /* 圖片大小調整 */
    .consultation-left-img,
    .consultation-right-img {
        max-width: 120px;
        max-height: 120px;
    }

    /* 文案調整 */
    .consultation-main-text {
        font-size: 1rem;
    }

    .consultation-sub-text {
        font-size: 1rem;
        font-weight: 600;
        color: #333;
    }

    /* 按鈕區域 */
    .consultation-button-area {
        margin-top: 30px;
    }

    .consultation-btn {
        font-size: 0.9rem;               /* 手機版稍微再小一點 */
        padding: 8px 20px;               /* 手機版更緊湊的 padding */
        max-width: 140px;                /* 手機版限制寬度 */
    }
}

/* =============================================== */
/* 手機版新 UX 設計樣式 (Wireframe 實作)           */
/* =============================================== */

/* 響應式顯示控制 - 強制隱藏桌面版 */
@media (max-width: 767px) {
    /* 強制隱藏桌面版布局 - 最高優先級 */
    html body .desktop-layout,
    html body .layout-container.desktop-layout,
    html body div.desktop-layout,
    body .desktop-layout,
    .desktop-layout {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* 確保手機版顯示 */
    html body .mobile-layout,
    body .mobile-layout,
    .mobile-layout {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* === 手機版 Hero 區樣式 === */
.mobile-hero {
    padding: 30px 20px 40px;
    text-align: left;
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    margin-bottom: 20px;
    min-height: 280px; /* 約佔畫面 30% */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-hero-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.3;
}

.mobile-hero-subtitle {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 280px;
}

.mobile-hero-illustration {
    position: absolute;
    top: 20px;
    right: 15px;
    width: 120px;
    height: auto;
    z-index: 2;
}

.mobile-hero-illustration img {
    width: 100%;
    height: auto;
    filter: drop-shadow(2px 2px 8px rgba(0,0,0,0.1));
}

/* === Tabs 導覽樣式 === */
.mobile-tabs {
    margin-bottom: 30px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-tabs-container {
    display: flex;
    gap: 8px;
    min-width: fit-content;
}

.mobile-tab {
    background: transparent;
    border: none;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: black;
    white-space: nowrap;
    transition: all 0.3s ease;
    min-height: 44px; /* 拇指友善尺寸 */
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-tab.active {
    background: #4190DD;
    color: white;
    font-weight: 600;
    position: relative;
}

.mobile-tab.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: #4190DD;
    border-radius: 2px;
}

/* === Section Title === */
.mobile-section-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin-bottom: 25px;
    padding-left: 20px;
}

/* === Content 區域 === */
.mobile-content {
    position: relative;
}

.mobile-content-section {
    padding: 2px 20px 0 20px;
}


/* === Accordion 卡片樣式 === */
.mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.mobile-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.mobile-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.mobile-card-header {
    padding: 20px;
    cursor: pointer;
    background: white;
    border: none;
    width: 100%;
    text-align: left;
    position: relative;
    min-height: 48px; /* 拇指友善點擊區域 */
    transition: background-color 0.3s ease;
}

.mobile-card-header:hover {
    background: #f8f9fa;
}

.mobile-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.mobile-card-subtitle {
    font-size: 14px;
    color: #666;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.mobile-card-toggle {
    font-size: 14px;
    color: #4190DD;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.mobile-card-toggle::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #4190DD;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.mobile-card-header[aria-expanded="true"] .mobile-card-toggle::after {
    transform: rotate(180deg);
}

.mobile-card-content {
    padding: 0 20px 20px;
    color: #555;
    line-height: 1.6;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
}

.mobile-card-content p {
    margin: 15px 0 0 0;
    font-size: 15px;
}

/* === 簡單內容樣式 (非軟體優勢的其他 Tab) === */
.mobile-simple-content {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.mobile-simple-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
}

.mobile-simple-content p:last-child {
    margin-bottom: 0;
}

/* 手機版圖片樣式 - 終極強制覆蓋所有可能的選擇器 */
html body .mobile-layout .mobile-content-img,
html body .mobile-simple-content .mobile-content-img,
html body .mobile-content .mobile-content-img,
html body .mobile-layout img.mobile-content-img,
.mobile-layout .mobile-content-section .mobile-simple-content .mobile-content-img,
.mobile-layout .mobile-content-card .mobile-content-img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
    object-fit: contain !important;
    display: block !important;
    box-sizing: border-box !important;
    flex-shrink: 1 !important;
    flex-basis: auto !important;
}

/* 手機版專用：覆蓋所有可能的圖片規則 */
@media (max-width: 768px) {
    .mobile-layout img,
    .mobile-content img,
    .mobile-simple-content img,
    .mobile-content-card img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* 確保父容器不會溢出 */
.mobile-simple-content,
.mobile-content-card {
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* === 動態內容卡片樣式 === */
.mobile-summary-card,
.mobile-content-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-left: 4px solid #4190DD;
}

.mobile-summary-card h4,
.mobile-content-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: #4190DD;
    margin: 0 0 12px 0;
}

.mobile-summary-card p,
.mobile-content-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* === CTA 按鈕樣式 === */
.mobile-cta {
    padding: 30px 20px 40px;
    text-align: center;
}

.mobile-cta-button {
    display: inline-block;
    width: 100%; /* 滿版寬度 */
    max-width: 300px;
    height: 52px; /* ≥ 48px */
    background: #4190DD;
    color: white !important;
    text-decoration: none;
    border-radius: 26px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(65, 144, 221, 0.3);
}

.mobile-cta-button:hover {
    background: #2563eb;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(65, 144, 221, 0.4);
}

/* === 動畫效果 === */
.mobile-card-content.collapsing,
.mobile-card-content.collapse.show {
    transition: height 0.3s ease;
}

/* === 拇指友善原則 === */
.mobile-tab,
.mobile-card-header,
.mobile-cta-button {
    min-height: 44px;
    min-width: 44px;
}

/* === 手機版隱藏桌面版邊框 === */
@media (max-width: 768px) {
    /* 隱藏桌面版的邊框和背景 */
    .content-container {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* 隱藏任何可能的邊框 */
    .layout-container,
    .section-inner,
    .title-box {
        border: none !important;
        box-shadow: none !important;
    }
}

/* === 手機版微調 === */
@media (max-width: 480px) {
    .mobile-hero {
        padding: 25px 15px 35px;
        min-height: 250px;
    }

    .mobile-hero-title {
        font-size: 24px;
    }

    .mobile-hero-subtitle {
        font-size: 15px;
        max-width: 250px;
    }

    .mobile-hero-illustration {
        width: 100px;
        right: 10px;
    }

    .mobile-tabs {
        margin: 0 -15px 25px;
        border-radius: 0;
    }

    .mobile-section-title,
    .mobile-content-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .mobile-cta {
        padding: 25px 15px 105px;
    }
}

/* =============================================== */
/* Footer 正確層級線條系統                              */
/* =============================================== */

/* Footer 主容器 - 正確的深紫色背景 */
.footer {
    background: #171857 !important;
    color: #fff;
    padding: 0;
    margin-top: 0;
}


/* 左側區域 */
.footer-left {
    padding-right: 40px;
}

/* 公司名稱區域 */
.footer-brand {
    width: 303px;
    margin-bottom: 24px;
}

.company-info {
    flex: 1;
}

.company-name-ch {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 10px 0;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

.company-name-en {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-weight: 400;
    font-style: italic;
}

/* Footer outer 容器 */
.footer-outer {
    position: relative;
    padding: 0 0 48px;
}

/* 主要內容下方分隔線 - 圖片版本 - 隱藏 */
.footer-divider-top {
    display: none; /* 隱藏線條 */
}

.footer-line-image {
    width: 100%;
    height: 1px; /* 固定高度避免撐開版面 */
    display: block;
    object-fit: cover;
}

/* 主要內容區域的padding */
.footer-main-wrapper {
    position: relative;
    padding-top: 60px;
}

/* 中間垂直分隔線 - 圖片版本 */
.footer-middle-divider {
    position: absolute;
    top: 20px;    /* 從主要內容區域開始，留點間距 */
    bottom: 20px; /* 到主要內容區域結束，留點間距 */
    left: 33.33%; /* Bootstrap lg-4 column 的位置 */
    margin-right: 30px; /* 向右偏移 */
    z-index: 1;
    display: flex;
    align-items: center;
    transform: translateX(-50%); /* 讓線條居中對齊 */
}

.footer-middle-line-image {
    width: 1px;  /* 固定寬度 */
    height: 100%; /* 覆蓋父容器高度 */
    display: block;
}

/* 手機 / 平板關掉中線 */
@media (max-width: 991.98px) and (min-width: 768px) {
    .footer-middle-divider {
        display: none;
    }
}

/* 手機版垂直線 - 中文版 - 在導覽區域之間 */
@media (max-width: 767.98px) {
    .footer-navigation .col-4:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 10px;
        bottom: 10px;
        width: 1px;
        background-image: url('../images/footer/line-middle.png');
        background-repeat: repeat-y;
        background-size: 1px auto;
        background-position: center;
        z-index: 1;
    }

    .footer-navigation .col-4 {
        position: relative;
    }

    /* 隱藏原本的中間分隔線 */
    .footer-middle-divider {
        display: none;
    }

    /* 手機版公司資訊置中 - 中文版 */
    .footer-left {
        text-align: center !important;
        display: flex;
        justify-content: center;
    }

    .footer-brand {
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto 20px auto !important;
        position: relative;
    }

    .company-info {
        text-align: center !important;
        width: 100%;
    }

    .company-logo-text {
        margin: 0 auto 8px auto !important;
        display: block !important;
    }

    .contact-section {
        text-align: center !important;
        margin: 8px auto 0 auto !important;
        padding: 15px 0 0 0 !important;
        position: relative;
    }

    /* 隱藏導覽標題底線 - 手機版 */
    .footer-navigation .with-line::after {
        display: none !important;
    }

    /* 延長聯絡資訊上方的線條 - 超出左右邊界 */
    .footer .contact-section::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: -60px !important;
        right: -60px !important;
        width: calc(100% + 120px) !important;
        height: 1px !important;
        background-image: url('../images/footer/line-top.png') !important;
        background-repeat: repeat-x !important;
        background-size: auto 1px !important;
        background-position: center !important;
        z-index: 1 !important;
    }
}

/* 導覽連結區域 */
.footer-navigation {
    /* padding-left: 48px; */
}

/* 桌面版：導覽標題底線延伸到垂直線 */
@media (min-width: 992px) {
    .footer-navigation .with-line::after {
        right: -80px;  /* 延伸到父容器外，連接垂直線 */
        width: calc(100% + 80px);
    }

    /* 關於德安（第一欄位）底線向右延伸連接垂直線 */
    .footer-navigation .col-4:nth-child(1) .with-line::after {
        margin-left: -23px;
        width: calc(100% + 120px);  /* 加長寬度避免中空 */
    }

    /* 移除原本的 footer-left 底線 */
    .footer-left::after {
        display: none;
    }

    .footer-left {
        position: relative;  /* 為偽元素提供定位基準 */
    }

    /* 只針對英文版：公司資訊下方線條延伸到垂直線 */
    html[lang="en"] .contact-section::before {
        width: calc(100% + 20px) !important;  /* 只對英文版延長線條 */
        right: -20px !important;
    }

    /* 只針對英文版：縮小導覽鏈接字體讓文字能單行顯示 */
    html[lang="en"] .footer-navigation .nav-link {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

}

/* 英文版手機版：2+2 布局 (About Athena + Platforms / Service Center + 認證標章) */
@media (max-width: 767.98px) {
    html[lang="en"] .footer-main-wrapper {
        display: flex;
        flex-direction: column;
        height: 500px !important;  /* 設置固定高度 */
    }

    /* 重新排列：導覽區域上移，認證標章下移到導覽區域 */
    html[lang="en"] .footer-navigation {
        order: 2;
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
    }

    html[lang="en"] .footer-certifications {
        order: 3;
        margin-top: 20px;
        width: 50%;
    }

    /* 導覽區域：前兩個佔50%寬度（第一行），第三個佔50%寬度（第二行） */
    html[lang="en"] .footer-navigation .col-4:nth-child(1),
    html[lang="en"] .footer-navigation .col-4:nth-child(2) {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    html[lang="en"] .footer-navigation .col-4:nth-child(3) {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-top: 20px;
    }

    /* 認證標章移到第二行右側 */
    html[lang="en"] .col-lg-2 {
        order: 4;
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-top: 20px;
        position: relative;
        left: 50%;
        top: -100px; /* 向上移動到與Service Center同一行 */
    }

    /* 認證標章右對齊並縮小，往右上方移動 */
    html[lang="en"] .footer-certifications {
        text-align: right !important;
        padding-right: 20px !important;
        position: relative !important;
        top: -65px !important;  /* 往上移動 65px (原-40px + 25px) */
        right: -65px !important; /* 往右移動 65px (再增加15px) */
    }

    /* 調整 ISO/PCI 圖標尺寸回到 55px */
    html[lang="en"] .footer-certifications .cert-logo {
        width: 55px !important;  /* 從 45px 調回 55px */
        height: auto !important;
        margin: 0 5px !important;
    }

    /* 保留 About Athena 和 Platforms 之間的垂直線 */
    html[lang="en"] .footer-navigation .col-4:nth-child(1)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 10px;
        bottom: 10px;
        width: 1px;
        background-image: url('../images/footer/line-middle.png');
        background-repeat: repeat-y;
        background-size: 1px auto;
        background-position: center;
        z-index: 1;
        display: block !important;
    }

    /* 在 Service Center 右邊添加垂直線 */
    html[lang="en"] .footer-navigation .col-4:nth-child(3)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 10px;
        bottom: 10px;
        width: 1px;
        background-image: url('../images/footer/line-middle.png');
        background-repeat: repeat-y;
        background-size: 1px auto;
        background-position: center;
        z-index: 1;
        display: block !important;
    }

    /* 底部 Subscribe & Follow 分行顯示 */
    html[lang="en"] .subscribe-social-row {
        flex-direction: column !important;
        align-items: center !important;
    }

    html[lang="en"] .subscribe-section {
        margin-bottom: 8px !important;  /* 從15px縮小到8px */
        text-align: center !important;
    }

    html[lang="en"] .social-media {
        justify-content: center !important;
    }

    /* 縮小英文版底部區域上邊距 */
    html[lang="en"] .footer-bottom {
        margin-top: 35px !important;  /* 從60px再縮小到35px，結束分手情人狀態 */
    }

    html[lang="en"] .footer-bottom-center {
        gap: 12px !important;  /* 從20px縮小到12px */
    }

    /* 選單文字和標題靠左對齊 */
    html[lang="en"] .footer-navigation .nav-list {
        text-align: left !important;
    }

    html[lang="en"] .footer-navigation .nav-link {
        text-align: left !important;
    }

    html[lang="en"] .footer-navigation .nav-title {
        text-align: left !important;
    }

    html[lang="en"] .footer-nav-group {
        text-align: left !important;
    }

    /* 確保 Platforms (第二欄) 右邊沒有垂直線 */
    html[lang="en"] .footer-navigation .col-4:nth-child(2)::after {
        display: none !important;
    }
}

.footer-nav-group {
    margin-bottom: 24px;
}

.nav-title {
    font-size: 15px;
    font-weight: 600;
    color: #9ADBE8;
    margin: 0 0 18px 0;
    position: relative;
    padding-bottom: 10px;
}

/* 英文名 & 標題底線：統一成同一套系統 */
.with-line {
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.with-line::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;  /* 延伸到與垂直線連接 */
    height: 1px;
    background-image: url('../images/footer/line-top.png');
    background-repeat: repeat-x;
    background-size: auto 1px;
    background-position: left center;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-list li {
    margin-bottom: 10px;
}

.nav-link {
    color: #707070;
    text-decoration: none;
    font-size: 16px; /* 從 14px 增加到 16px */
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #000;
    text-decoration: none;
}

/* 認證標章區域 */
.footer-certifications {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding-left: 50px; /* 增加左邊距，讓認證標章更貼近垂直線條 */
}

.cert-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-end; /* 靠右對齊，更貼近垂直線條 */
    margin-right: 50px; /* 增加右邊距，讓認證標章貼近垂直線條 */
}

.cert-logo {
    width: 65px;
    height: auto;
    object-fit: contain;
}

/* Footer 底部分隔線 - 圖片版本 - 隱藏 */
.footer-divider {
    display: none; /* 隱藏線條 */
}

/* 底部區域 - 居中對齊 */
.footer-bottom {
    margin-top: 80px; /* 增加間距 */
}

.footer-bottom-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* 訂閱追蹤與社交媒體同一行 */
.subscribe-social-row {
    display: flex;
    align-items: center;
    gap: 30px; /* 文字與圖標間距 */
}

/* 公司LOGO文字圖片 */
.company-logo-text {
    width: auto;
    max-width: 280px;
    height: auto;
    margin-bottom: 15px;
    display: block;
    position: relative;
}

/* 移除 LOGO 下方底線 */
.company-logo-text::after {
    display: none;
}

/* 移除公司資訊下方底線 */
.company-info {
    position: relative;
}

.company-info::after {
    display: none;
}

/* 聯絡資訊上方線條 - 在 LOGO 和聯絡資訊之間 */
.contact-section {
    position: relative;
    margin-top: 15px;
    padding-top: 40px !important; /* 大幅增加上間距，讓聯絡資訊往下移 */
}

.contact-section::before {
    content: "";
    position: absolute;
    top: 0;  /* 在聯絡資訊上方 */
    left: 0;
    width: 100%;
    height: 1px;
    background-image: url('../images/footer/line-top.png');
    background-repeat: repeat-x;
    background-size: auto 1px;
    background-position: left center;
}

/* 訂閱我們 */
.subscribe-section {
    margin-bottom: 8px;
}

.subscribe-text {
    font-size: 16px;
    font-weight: 600;
    color: #9ADBE8;
}

/* 社交媒體圖標 */
.social-media {
    display: flex;
    gap: 20px;
    align-items: center;
}

.social-link {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    color: #fff;
}

.social-link:hover {
    transform: translateY(-3px);
    color: #fff;
}

.social-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.social-link svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

/* 聯絡資訊 */
.contact-section {
    margin-top: 16px;
}

.contact-phone {
    font-size: 14px;
    color: #9ADBE8;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* 版權聲明 */
.copyright-section {
    margin-top: 16px;
}

.copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    text-align: center;
}

.labspace-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

.labspace-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* 響應式設計 */
@media (max-width: 991.98px) {
    .footer-left {
        padding-right: 15px;
        margin-bottom: 40px;
    }
    
    .footer-navigation {
        padding-left: 0;
        margin-top: 0;
        margin-bottom: 40px;
    }
    
    .footer-certifications {
        justify-content: center;
        margin-top: 0;
        padding-left: 0;
    }
    
    .cert-group {
        flex-direction: row;
        gap: 32px;
    }
}

@media (max-width: 767.98px) {
    .footer-outer {
        padding: 40px 0 32px;
    }
    
    .footer-left {
        padding-right: 15px;
    }
    
    .footer-brand {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-nav-group {
        text-align: center;
    }
    
    .nav-title.with-line::after {
        left: 50%;
        transform: translateX(-50%);
        width: 40px;  /* 手機版保持短線條 */
        background-repeat: no-repeat;
        background-size: 40px 1px;
    }
    
    .nav-list li {
        margin-bottom: 12px;
    }
    
    .social-media {
        gap: 18px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .cert-group {
        gap: 24px;
    }
    
    .cert-logo {
        width: 65px;
    }
}

/* 手機版手風琴樣式 - 滿版 */
.mobile-accordion {
    margin: 0 -15px !important;  /* 減少上邊距15px，整個選單往上移 */
}

.accordion-item {
    border: none;
    border-top: 1px solid #e0e0e0;
    border-radius: 0;  /* 移除圓角實現滿版效果 */
    margin-bottom: 0;
    overflow: hidden;
    background: #fff;
    box-shadow: none;
}

.accordion-item:last-child {
    border-bottom: 1px solid #e0e0e0;
}

.accordion-header {
    padding: 15px 20px;
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.accordion-header:hover {
    background: linear-gradient(135deg, #357ABD 0%, #2C5F9C 100%);
}

.accordion-item.active .accordion-header {
    background: linear-gradient(135deg, #357ABD 0%, #2C5F9C 100%);
}

.accordion-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

/* 手機版主導覽 Header Bar 和元素調整 - 與 style.css 同步 */
@media screen and (max-width: 991.98px) {
    /* Header Bar 縮小 */
    .main-nav .nav-outter {
        height: 60px !important;
        padding: 0.5rem 0.75rem !important;
    }

    .main-nav .nav-outter .nav-inner {
        height: 50px !important;
    }

    /* Logo 調整 */
    .main-nav .logo-wrap {
        height: 40px !important; /* 適配縮小的 Header Bar */
        width: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        background-color: white !important;
        padding: 5px !important;
        border-radius: 4px !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    .main-nav .logo-wrap img {
        height: 100% !important;
        width: auto !important;
        object-fit: contain !important;
        border: none !important;
        outline: none !important;
    }

/* 強制移除所有logo相關的邊框 */
.main-nav a.logo-wrap,
.main-nav a.logo-wrap:hover,
.main-nav a.logo-wrap:focus,
.main-nav a.logo-wrap:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

    /* 搜尋列縮小 */
    .search-bar-all {
        max-width: 120px !important;
    }

    .search-bar-all .form-control {
        width: 80px !important;
        height: 1.75rem !important;
        font-size: 0.85rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    .search-bar-all .btn {
        width: 1.75rem !important;
        height: 1.75rem !important;
        padding: 0 !important;
    }

    /* 語言切換和漢堡選單調整 */
    .dropdown-toggle {
        padding: 0.25rem !important;
        min-width: 36px !important;
        height: 36px !important;
    }

    .mobile-menu-toggle {
        width: 36px !important;
        height: 36px !important;
        padding: 0.25rem !important;
    }

    /* 元素間距調整 */
    .col-auto.d-md-none .d-flex {
        gap: 0.25rem !important; /* 進一步縮小元素間距 */
        margin-right: 3rem !important; /* 大幅往左移 */
    }

    /* 搜尋列尺寸調整 */
    .search-bar-all {
        max-width: 160px !important; /* 增加搜尋列最大寬度 */
        margin-right: 0.75rem !important; /* 搜尋列與右側元素保持間距 */
    }

    .search-bar-all .form-control {
        width: 120px !important; /* 加長搜尋輸入框 */
    }

    /* Banner 位置調整 - 讓它更貼近 Header */
    .mobile-hero {
        margin-top: -10px !important; /* 往上移動 10px */
        padding-top: 20px !important; /* 減少頂部內距從 30px 到 20px */
    }

    /* 主要內容區域補償 */
    main, .main-content {
        padding-top: 60px !important; /* 配合縮小的 header 高度 */
    }
}

/* 解除手機版 Logo 圖片的 max-height 限制 - 與 style.css 同步 */
@media (max-width: 767.98px) {
    .nav-outter .logo-wrap,
    nav .logo-wrap,
    .main-nav .logo-wrap {
        background-color: white !important;
        padding: 3px !important;
        border-radius: 4px !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    .nav-outter .logo-wrap img,
    nav .logo-wrap img,
    .main-nav .logo-wrap img {
        max-height: none !important; /* 解除 80px 限制 */
        height: 100% !important; /* 讓圖片填滿容器 */
        width: auto !important;
        border: none !important;
        outline: none !important;
    }
}

.accordion-icon {
    font-size: 14px;
    font-weight: bold;
    transition: transform 0.3s ease;
    display: inline-block;
    margin-right: 55px !important; /* 右邊箭頭往左內縮 */
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);  /* 三角箭頭旋轉180度 */
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-content.show {
    max-height: none;
}


.mobile-content-img {
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
}

.mobile-content-img img {
    width: 100%;
    height: auto;
    display: block;
}

.mobile-summary-section,
.mobile-content-section {
    margin-bottom: 5px;
}

.mobile-summary-section p,
.mobile-content-section p {
    color: #333;
    line-height: 1.6;
    margin: 0;
}

.mobile-summary-section {
    padding: 10px 10px 3px 10px;
}

.mobile-summary-section p {
    font-weight: bold;
}
/* 合作夥伴列表頁面 - 縮小間距 */
.news-list .row {
    row-gap: 0.5rem !important;
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
}

.news-list .col-12,
.news-list .col-sm-4,
.news-list .col-lg-3 {
    margin-bottom: 1rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.news-list .card-snap {
    margin-bottom: 0 !important;
}


/* 強制覆蓋 Bootstrap Grid 間距 - 不要讓他們七夕才碰面 */
.news-list .row {
    --bs-gutter-x: 1rem !important;
    --bs-gutter-y: 1rem !important;
}

/* 終極方案 - 強制縮小合作夥伴間距 */
section.content-section .news-list.mt-5 > .row {
    --bs-gutter-x: 0.5rem !important;
    --bs-gutter-y: 0.5rem !important;
    margin-left: -0.25rem !important;
    margin-right: -0.25rem !important;
}

section.content-section .news-list.mt-5 > .row > [class*="col-"] {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    margin-bottom: 0.5rem !important;
}


/* 訊息公告列表頁專用 - 縮小卡片至 85% */
section.content-section .news-list .card {
    width: 391px !important;  /* 460px * 0.85 = 391px */
    max-width: 391px !important;
}

section.content-section .news-list .card img {
    height: 240px !important;  /* 282px * 0.85 = 240px */
}

/* 訊息公告列表頁 - 定義 column 為 400px，一排3個 */
section.content-section .news-list.mt-5 > .row > .col-12,
section.content-section .news-list.mt-5 > .row > .col-md-6,
section.content-section .news-list.mt-5 > .row > .col-lg-4 {
    max-width: 400px !important;
    flex: 0 0 400px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-bottom: 15px !important;
}

/* 調整 news 頁面的 row gutter */
section.content-section .news-list.mt-5 > .row {
    --bs-gutter-x: 10px !important;
    --bs-gutter-y: 15px !important;
    row-gap: 15px !important;
    column-gap: 10px !important;