html {
    height: 100%;
    overflow-x: hidden;
}


body {
    height: 100%;
    margin: 0;
    font-family: 'Noto Sans TC', sans-serif;
}

.site-header {
    background: #002855;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo img {
    height: 100px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.language-switcher {
    display: flex;
    gap: 0.3rem;
}

.lang-btn {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .lang-btn:hover {
        background-color: rgba(255, 255, 255, 0.3);
    }

    .lang-btn.active {
        background-color: #ffffff;
        color: #002855;
    }

.hamburger {
    font-size: 1.2rem;
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 1px;
}


.content-section {
    padding: 100px 20px;
    background-color: #f5f5f5;
}

.text-block {
    width: 100%;
    max-width: 700px;
    box-sizing: border-box;
    text-align: left;
}

.section-showcase.variant-left .text-block {
    width: 100%;
    height: 70% !important;
}

.section-title {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.section-title-t1 {
    font-size: 4rem;
    margin-bottom: 1rem;
    text-align: center;
}

.section-text {
    font-size: 2.0rem;
    color: #444;
}

.carousel-section {
    padding: 80px 20px;
    background: #f3f6f8;
}

.carousel img {
    border-radius: 10px;
    width: 100%;
    height: 600px;
    object-fit: cover;
}

.fullscreen-menu {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: white;
    display: none;
    flex-direction: column;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

/* menuBgLayer：真實 DOM 背景層，Safari 相容 */
#menuBgLayer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
    pointer-events: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ::before 負責暗色遮罩 */
.fullscreen-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.386);
    z-index: 1;
    pointer-events: none;
}

.fullscreen-menu.active {
    display: flex;
}

.menu-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 1rem;
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 1px;
    z-index: 10000;
    pointer-events: auto;
}

.menu-columns {
    display: flex;
    height: 100%;
    width: 100%;
    flex-grow: 1;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    text-align: center;
    overflow: visible;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.menu-column {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease;
    position: relative;
    padding: 2rem;
    border-right: #fff 0.1px solid;
    z-index: 20;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

    .menu-column:hover {
        background-color: #19436dd8;
    }


.menu-column-products {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    overflow: visible;
    z-index: 20;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}


    .menu-column-products h3 {
        margin: 0;
        line-height: 1.05;
        z-index: 2;
        transition: opacity 0.28s ease, transform 0.28s ease;
    }


    .menu-column-products ul {
        list-style: none;
        padding: 0;
        margin: 0;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.3s ease, max-height 0.4s ease;
        pointer-events: none;
        position: static;
        width: 100%;
    }


        .menu-column-products ul li {
            margin: 0.5rem 0;
        }

            .menu-column-products ul li a {
                text-align: center;
                display: inline-block;
            }


    .menu-column-products:hover h3 {
        opacity: 1;
    }

    .menu-column-products:hover ul {
        opacity: 1;
        max-height: 600px;
        pointer-events: auto;
    }


.menu-column h3 {
    color: #3399ff;
    font-size: 2.0rem;
    transition: transform 0.3s ease;
    transform: scale(1)
}

    .menu-column h3:hover {
        transform: scale(1.2)
    }

    .menu-column h3 a {
        color: #3399ff;
        margin-bottom: 1rem;
        font-size: 2.0rem;
        transition: transform 0.3s ease;
    }

.menu-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s ease;
    pointer-events: none;
    opacity: 0;
}

/* 淡入 */
.menu-column:hover ul {
    max-height: 200px;
    pointer-events: auto;
    opacity: 1;
}


.menu-column li {
    margin: 0.5rem 0;
}

.menu-column a {
    font-size: 1.5rem;
    color: white;
    text-decoration: none;
    transition: color 0.3s;
    padding-bottom: 20px;
}

    .menu-column a:hover {
        color: #3399ff;
    }

/* 平板與手機：統一全螢幕選單 RWD 行為（改為 768px） */
@media (max-width: 960px) {
    .menu-columns {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 1.5rem 1rem;
        gap: 0.75rem;
    }

    .menu-column {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        padding: 1.25rem 0.75rem;
        width: 100%;
        min-height: 80px;
        justify-content: center;
    }

    /* 產品資訊欄：relative 讓箭頭可以定位 */
    .menu-column-products {
        position: relative;
    }

        /* ▼ 箭頭提示：手機版暗示可以往下滑 */
        .menu-column-products .submenu-arrow {
            display: none;
            position: absolute;
            bottom: 8px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.7);
            font-size: 12px;
            pointer-events: none;
            z-index: 5;
            -webkit-animation: arrowBounce 1.2s ease-in-out infinite;
            animation: arrowBounce 1.2s ease-in-out infinite;
        }

            .menu-column-products .submenu-arrow.visible {
                display: block;
            }

    @-webkit-keyframes arrowBounce {
        0%, 100% {
            -webkit-transform: translateX(-50%) translateY(0);
        }

        50% {
            -webkit-transform: translateX(-50%) translateY(4px);
        }
    }

    @keyframes arrowBounce {
        0%, 100% {
            transform: translateX(-50%) translateY(0);
        }

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

    .menu-column:last-child {
        border-bottom: none;
    }

    .menu-column h3,
    .menu-column h3 a {
        font-size: 1.6rem;
    }

    .menu-column a {
        font-size: 1.25rem;
        padding-bottom: 14px;
    }

    .menu-close {
        top: 1rem;
        right: 1rem;
        font-size: 0.95rem;
    }

    /* 產品資訊列：於手機維持可展開/收合的視覺，但避免 hover 造成誤觸 */
    .menu-column-products {
        padding: 1.25rem 0.75rem;
    }

        .menu-column-products h3 {
            opacity: 1;
        }

        .menu-column-products ul {
            opacity: 0;
            pointer-events: none;
            max-height: 0;
            overflow: hidden;
        }

        .menu-column-products:hover h3 {
            opacity: 1;
        }
}

@media (max-width: 768px) {
    .menu-columns {
        flex-direction: column;
    }

    .menu-column {
        width: 100%;
    }
}

/* 平板（含 iPad 橫向）統一全螢幕選單 RWD 行為：1024 → 768 */
@media (max-width: 768px) {
    .menu-columns {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 1.5rem 1rem;
        gap: 0.75rem;
    }

    .menu-column {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        padding: 1.25rem 0.75rem;
        width: 100%;
        min-height: 80px;
        justify-content: center;
    }

        .menu-column:last-child {
            border-bottom: none;
        }

        .menu-column h3,
        .menu-column h3 a {
            font-size: 1.6rem;
        }

        .menu-column a {
            font-size: 1.25rem;
            padding-bottom: 14px;
        }

    .menu-close {
        top: 1rem;
        right: 1rem;
        font-size: 0.95rem;
    }

    /* 觸控環境：取消 hover 收合，直接顯示清單 */
    .menu-column-products {
        padding: 1.25rem 0.75rem;
    }

        .menu-column-products h3 {
            opacity: 1;
        }

        .menu-column-products ul {
            opacity: 0;
            pointer-events: none;
            max-height: 0;
            overflow: hidden;
        }

        .menu-column-products:hover h3 {
            opacity: 1;
        }
}




.showcase-inner {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
    flex-wrap: wrap;
}

.text-block {
    flex: 1;
    min-width: 200px;
}

.image-group {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
    flex: 1;
    min-width: 280px;
    padding: 30px;
}

.image-card {
    width: 350px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

    .image-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.1));
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.1));
        transition: transform 0.3s ease;
    }

    .image-card:hover {
        transform: scale(1.1);
        z-index: 3;
    }

    .image-card.offset {
        margin-left: 40px;
    }

    /* 圖片錯落位置設定 */
    .image-card:nth-child(1) {
        top: 0px;
        left: 300px;
    }

    .image-card:nth-child(2) {
        top: -90px;
        left: 160px;
    }

    .image-card:nth-child(3) {
        top: -200px;
        left: 60px;
    }




/* 上方首頁排版 */
.hero-slider {
    position: relative;
    height: 90vh;
    width: 100%;
    overflow: hidden;
}

/* 圖片包裹 div */
.hero-slide-bg {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 3;
}

    .hero-slide-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin: 0;
        display: block;
    }

    .hero-slide-bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.32); /* 黑色透明濾鏡 */
        z-index: 1;
        pointer-events: none;
    }

/* 文字區塊 */
.carousel-caption {
    position: absolute;
    left: 10%;
    top: 20%;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.6);
    z-index: 10;
    max-width: 600px;
    animation: fadeInUp 1s ease-out;
}

    /* 標題與副標題樣式 */
    .carousel-caption h2 {
        font-size: 2.8rem;
        margin: 0 0 0.5rem;
        font-weight: bold;
    }

    .carousel-caption p {
        font-size: 1.5rem;
        margin: 0;
    }

/* 可選：進場動畫 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* slick 背景輪播 */
.hero-bg-carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-position: bottom;
}

    .hero-bg-carousel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Slick 容器撐滿高度，避免橫向白邊 */
    .hero-bg-carousel,
    .hero-bg-carousel .slick-list,
    .hero-bg-carousel .slick-track,
    .hero-bg-carousel .slick-slide,
    .hero-bg-carousel .slick-slide > div,
    .hero-bg-carousel .hero-slide-bg {
        height: 100% !important;
    }


/* 上層四分區 */
.hero-overlay {
    position: relative;
    z-index: 6;
    display: flex;
    height: 100%;
    pointer-events: none; /* 只讓下方的 .hover-group 攔截滑鼠事件 */
}

.hero-zone {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    background-color: transparent;
}

/* 包住 + 跟 文字的 hover 區域 */
.hover-group {
    position: relative;
    top: 30%; /* 下移區塊 */
    z-index: 10;
    pointer-events: auto; /* 這裡攔截滑鼠事件 */
    width: 100%; /* 讓整個區塊寬度撐滿 hero-zone */
    height: 0%; /* 高度撐滿 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* 滑過時變成手勢 */
}


.hero-zone.active {
    background-color: rgba(21, 107, 219, 0.3); /* 半透明藍色背景 */
}

/* + 號 */
.hover-group .plus {
    font-size: 2rem;
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(255, 255, 255);
    z-index: 11;
    transition: transform 0.3s ease;
    pointer-events: auto;
    padding: 30px 130px 100px 130px;
}

.hover-group:hover .plus {
    transform: translateX(-50%) scale(1.3);
}

/* 文字 */
.hover-group .overlay-text {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%) translateY(250px); /* 初始位置 */
    text-align: center;
    color: white;
    opacity: 0;
    z-index: 11;
    pointer-events: none;
    transition: opacity 1.5s ease, transform 1.5s ease; /* 動畫時間*/
}

.hover-group:hover .overlay-text {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px);
}

/* 文字樣式 */
.hero-label {
    font-size: 4rem;
    line-height: 0.6;
}

    .hero-label span {
        font-weight: bold;
        display: block;
    }

/* 分隔線 */
.vertical-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 4;
}

.hero-eng {
    font-size: 10rem;
    line-height: 1;
}

.hero-number {
    font-size: 7rem;
    line-height: 1;
}




/* =====產品頁 CSS ===== */
/* 最外區塊 */
.product-header {
    padding: 50px 0 40px;
    background: linear-gradient(180deg, #fff 0%, #f5f7fb 100%);
}

.product-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 圖片置中 */
.product-photo.only-photo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative; /* ✅ 標題可以重疊 */
}

/* ✅ 主圖縮小 */
.main-photo {
    max-width: 400px;
    width: min(75vw, 520px);
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #e6e6e6;
    background: #fff;
}

.photo-frame {
    padding: 12px;
    background: rgba(255,255,255,0.95);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(12,40,90,0.08);
}

/* ✅ 標題新設計：灰金屬風 + 外側微重疊 */
.photo-title-tag {
    position: absolute;
    top: -18px; /* ✅ 在圖片外側 */
    left: calc(50% - 330px); /* ✅ 讓標題靠近圖片左側（依主圖寬度調整） */
    padding: 8px 22px;
    color: #000000;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 6px 6px 0 0;
    user-select: none;
    background: transparent;
}

/* RWD 手機版調整 */
@media (max-width: 480px) {
    .main-photo {
        max-width: 82vw;
    }

    .photo-title-tag {
        left: 20px;
        top: -14px;
        font-size: 1rem;
        padding: 6px 16px;
    }
}


.product-performance {
    background: #f8f8f8;
    padding: 50px 20px;
    text-align: center;
}

.performance-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.perf-box {
    background: #ddd;
    padding: 20px 30px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
    min-width: 120px;
}

.product-spec {
    background: #f3f6f8;
    color: white;
    padding: 60px 20px;
}

.tabs {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 30px;
}

.tab {
    background: #ddd;
    color: #000;
    border: none;
    padding: 15px 30px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.3rem;
    border-bottom: 4px solid transparent;
}

    .tab.active {
        border-bottom: 4px solid rgb(0, 132, 240);
        background: rgb(87, 156, 235);
    }

.hz-col {
    width: 80px;
    text-align: center;
    background: #f5f5f5;
    font-weight: bold;
}

.spec-content {
    display: none;
}

    .spec-content.active {
        display: block;
    }

.spec-table table {
    width: 100%;
    max-width: 800px;
    margin: auto;
    border-collapse: collapse;
    background: white;
    color: #222;
}

.spec-table th, .spec-table td {
    border: 1px solid #ccc;
    padding: 12px 16px;
    font-size: 0.95rem;
}

.spec-table th {
    background: rgb(0, 126, 204);
    color: white;
    text-align: left;
}

.spec-content {
    max-width: 1000px; /* 限制整體寬度 */
    margin: 0 auto; /* ✅ 水平置中 */
    text-align: center;
    padding: 40px 20px;
}

/* 標題 */
.accessory-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #222;
    margin: 40px 0 20px;
    text-align: center;
}

/* 整體區塊（使用 grid 置中） */
.accessory-table {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* ✅ 圖片群居中 */
    gap: 20px;
    margin-bottom: 40px;
}

/* 單一配件格 */
.accessory-item {
    width: 160px;
    text-align: center;
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #222;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .accessory-item img {
        width: 100%;
        height: 100px;
        object-fit: contain;
        margin-bottom: 10px;
    }

    .accessory-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-color: #aaa;
    }


/* ====== 區塊寬度 ====== */
.content-block {
    margin: 20px auto;
    max-width: 1100px; /* 改成更寬的容器（原本 600 -> 1100） */
    padding: 0 16px; /* 保留左右內距，避免緊貼邊緣 */
    box-sizing: border-box; /* 保險：padding 不會造成寬度溢出 */
}


/* 強制兩張圖並排同一行（平行對齊） */
.image-row {
    display: flex;
    justify-content: space-between; /* 左右貼齊 */
    align-items: center;
    width: 100%; /* 不再限制為 60% → 不影響全域版面 */
    max-width: 1200px; /* 圖片區塊最大寬 */
    margin: 0 auto 20px; /* 整組置中 */
    padding: 0 160px; /* ← 圖片彼此分開（新增） */
    box-sizing: border-box;
}

/* 兩張圖各佔寬度（可調） */
.content-image {
    width: 45%; /* 控制各自寬度 */
    max-width: 360px;
    height: auto;
    object-fit: cover;
    display: block;
}

/* 文字區塊放大 - 但保留你原本的外觀與 hover 動畫 */
.content-text {
    box-sizing: border-box;
    max-width: 1200px; /* 讓文字欄本身更寬（可再調整為 900/1100） */
    width: 100%;
    margin: 0 auto; /* 置中 */
    padding: 22px; /* 保留內距 */
    font-size: 17px; /* 稍微放大字體，閱讀更舒適 */
    line-height: 1.9; /* 行距拉大，單行顯示更多字但仍好閱讀 */
    text-align: left;
    color: #333;
    background: linear-gradient(135deg, #cccccc, #f9f9f9);
    border-radius: 10px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    z-index: 1; /* 確保不被其他元素蓋住 */
}


    .content-text p {
        margin: 14px 0;
        padding: 14px 16px;
        border-radius: 8px;
        background: linear-gradient(90deg, #ffffff 0%, #cef3f9 100%);
        background-size: 0% 100%;
        background-repeat: no-repeat;
        transition: background-size 0.6s ease, box-shadow 0.25s ease;
        color: #333;
    }


        .content-text p:hover {
            background-size: 100% 100%;
            box-shadow: 6px 10px 12px rgba(0, 0, 0, 0.15);
        }



/* 響應式：窄螢幕回退，避免文字溢出或過小 */
@media (max-width: 980px) {
    .content-block {
        max-width: 760px;
        padding: 0 12px;
    }

    .content-text {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.8;
        padding: 18px;
    }

    .content-image {
        max-width: 280px;
    }
}

@media (max-width: 520px) {
    .content-block {
        padding: 0 10px;
        margin: 12px auto;
    }

    .content-text {
        font-size: 15px;
        line-height: 1.7;
        padding: 14px;
    }

    .content-image {
        max-width: 100%;
        margin: 0 0 12px 0;
    }
}

@media (max-width: 900px) {
    .image-row {
        width: 100%;
        flex-direction: column;
        gap: 12px;
        margin: 0 auto 16px;
        padding: 0 16px; /* 修正：手機螢幕減少左右內距 */
    }

    .content-image {
        width: 100%;
        max-width: 100%;
    }
}


.panel-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 20px 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 60px;
}

/* ✅ 左半邊圖片 */
.float-image {
    flex: 0 0 420px;
    height: auto;
    width: 100%;
    max-width: 420px;
    border-radius: 6px;
    box-shadow: 0 5px 12px rgba(0,0,0,0.12);
    object-fit: contain;
    background: #ffffff;
}


/* ✅ 右半邊文字 */
.float-text {
    flex: 1 1 0%;
    min-width: 400px;
    max-width: 1000px;
    font-size: 1.5rem;
    color: #000;
    text-align: left;
    line-height: 1.6;
    background: #fff;
    border-radius: 14px;
    padding: 36px;
    box-shadow: 0 8px 18px rgba(0,50,120,0.15);
    box-sizing: border-box;
    margin-right: -100px;
}

    .float-text p {
        margin: 6px 0;
    }

@media (max-width: 768px) {
    .panel-block {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        gap: 20px;
    }

    .float-image {
        flex: 0 0 auto;
        max-width: 360px;
        width: 90%;
    }

    .float-text {
        flex: 0 0 auto;
        width: 90%;
        min-width: 0;
        max-width: none;
    }
}

.related-section {
    width: 100%; /* 區塊全寬 */
    background: #c7c7c7; /* 淺灰背景 */
    padding: 60px 0; /* 上下內距，讓內容貼齊 */
    text-align: center;
}

.related-title {
    font-size: 26px;
    margin-bottom: 30px;
    color: #333;
}

.related-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.related-item {
    text-align: center;
    opacity: 1;
    background: #ffffff;
    transform: translateX(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}



    .related-item.show {
        animation: slideInLR 0.7s ease forwards;
    }

        .related-item.show:nth-child(1) {
            animation-delay: 0.2s;
        }

        .related-item.show:nth-child(2) {
            animation-delay: 0.5s;
        }

        .related-item.show:nth-child(3) {
            animation-delay: 0.8s;
        }

    .related-item img {
        width: 200px;
        height: 150px;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .related-item:hover img {
        transform: scale(1.06);
        background: #ffffff;
    }

    .related-item p {
        margin-top: 12px;
        font-size: 16px;
        color: #000000;
    }

    .related-item:hover {
        transform: translateY(-8px);
    }

@keyframes slideInLR {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


.pdf-download {
    display: block;
    text-align: center;
    margin-top: 20px;
    font-size: 1rem;
    color: white;
    text-decoration: none;
}

    .pdf-download:hover {
        text-decoration: underline;
    }

@media (max-width: 768px) {
    .product-layout {
        flex-direction: column;
    }

    .product-info {
        padding: 20px;
    }

    .perf-box {
        min-width: 40%;
    }
}



:root {
    --showcase-h: 540px;
    --section-gap: 0; /* 改成 0 讓區塊相連 */
    --inner-gap: 48px;
    --title-size-left: 2.1rem;
    --text-size-left: 1.04rem;
    --text-block-top-offset: 48px; /* 文字往下的距離，可調整 */
}


/* ---- 基本區塊設定 ---- */
.section-showcase {
    padding: 80px 6vw;
    background: #f2f6f9;
    box-sizing: border-box;
    margin: 0;
}

.showcase-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

/* ---- 文字區塊 ---- */
.text-block {
    flex: 1 1 550px;
    background: transparent; /* 移除白底 */
    padding-left: 30px;
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    color: #0b1b22;
    margin: 0 0 5px; /* 與內容拉開距離 */
    text-align: left; /* 標題靠左 */
    transform: translateX(-80px) translateY(-30px);
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    color: #0b1b22;
    margin: 0 0 5px; /* 與內容拉開距離 */
    text-align: left; /* 標題靠左 */
    /* 將標題向右調整：移除原本向左偏移，改為靠原位或微右移 */
    transform: translateX(0) translateY(-30px);
}

.section-subtitle {
    font-size: 28px;
    font-weight: 400;
    color: #2a3a45;
    margin: 0 0 70px;
    text-align: left; /* 副標置中 */
    transform: translateX(0) translateY(-30px);
}

/* ---- 圖片群組 ---- */
.image-group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 550px;
    gap: 28px;
}

    /* ================================
   1. 產品開發與由來
================================ */
    .image-group.img-stack-3 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 24px;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        padding: 32px;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        transform: scale(1);
    }

        /* 產品開發與由來：把內文置中對齊 */
        .section-showcase .image-group.img-stack-3 + .text-block,
        .section-showcase .image-group.img-stack-3 ~ .text-block,
        .section-showcase.img-stack-3 .text-block,
        .image-group.img-stack-3 ~ .section-text,
        .image-group.img-stack-3 + .section-text {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

            /* 產品開發與由來：標題回復舊的左偏樣式（保持舊版標題靠左風格） */
            .section-showcase .image-group.img-stack-3 + .text-block .section-title,
            .section-showcase .image-group.img-stack-3 + .text-block .section-subtitle {
                transform: translateX(-80px) translateY(-30px);
                text-align: left;
            }

/* 左側直圖 */
.img-left-vertical {
    flex: 0 0 50%;
    border-radius: 24px;
    overflow: hidden;
    max-height: 520px;
}

    .img-left-vertical img {
        width: 125%;
        height: 101%;
        object-fit: contain;
        border-radius: 24px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.15);
        transition: transform 0.6s ease, box-shadow 0.6s ease;
        transform-origin: center center;
        transform: translateX(-10px);
    }

        .img-left-vertical img:hover {
            transform: translateX(-10px) scale(1.03);
            box-shadow: 0 12px 28px rgba(0,0,0,0.18);
        }

/* 右側兩張圖 */
.img-right-pair {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .img-right-pair .img-box {
        flex: 1;
        border-radius: 24px;
        overflow: hidden;
        max-height: 250px; /* 每張圖片不超過此高度 */
    }

    .img-right-pair img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 24px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.15);
        transition: transform 0.6s ease, box-shadow 0.6s ease;
    }

        .img-right-pair img:hover {
            transform: scale(1.04);
            box-shadow: 0 12px 28px rgba(0,0,0,0.18);
        }

/* ================================
   2. 歷史沿革
================================ */
.variant-history .showcase-inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.variant-history .image-group {
    flex: 1 1 550px;
    justify-content: flex-start;
    transform: translateX(-30px) scale(1.2);
}

    .variant-history .image-group img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 36px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        transition: transform 0.6s ease, box-shadow 0.6s ease;
    }

        .variant-history .image-group img:hover {
            transform: scale(1.03);
            box-shadow: 0 12px 28px rgba(0,0,0,0.18);
        }

.variant-history .section-title {
    transform: translateX(0) translateY(-30px);
}

.variant-history .section-subtitle {
    transform: translateX(0) translateY(-30px);
}

.variant-history .section-text {
    padding-right: -100px;
    transform: translateX(50px) translateY(-30px);
}

/* ================================
   3. 經營理念
================================ */
.variant-concept .showcase-inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.variant-concept .image-group {
    flex: 1 1 550px;
    justify-content: flex-end;
}

    .variant-concept .image-group img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 36px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        transition: transform 0.6s ease, box-shadow 0.6s ease;
        transform: translateX(50px);
    }

        .variant-concept .image-group img:hover {
            transform: translateX(50px) scale(1.03);
            box-shadow: 0 12px 28px rgba(0,0,0,0.18);
        }

.variant-concept .section-title {
    transform: translateX(30px) translateY(-30px);
}

.variant-concept .section-subtitle {
    transform: translateX(30px) translateY(-30px);
}

.variant-concept .section-text {
    transform: translateX(50px);
}


/* ================================
   響應式
================================ */
@media (max-width: 960px) {
    .showcase-inner {
        flex-direction: column;
        gap: 40px;
    }

    .image-group {
        flex-direction: column;
    }

    .img-left-vertical img,
    .img-right-pair img,
    .variant-history .image-group img,
    .variant-concept .image-group img {
        width: 100%;
        height: auto;
    }

    .section-title {
        text-align: center;
    }

    /* 平板版：文字內容置中對齊 */
    .text-block {
        text-align: center !important;
        padding-left: 0 !important;
    }

    .section-title,
    .section-subtitle,
    .section-text {
        text-align: center !important;
        transform: none !important;
    }

    /* 平板版：圖片縮小 */
    .img-left-vertical,
    .img-right-pair,
    .image-group {
        transform: none !important;
        max-width: 80% !important;
        margin: 0 auto !important;
    }

        .img-left-vertical img,
        .img-right-pair img,
        .variant-history .image-group img,
        .variant-concept .image-group img {
            max-width: 100% !important;
            transform: none !important;
        }
}

.full-bleed,
.carousel-section,
.related-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
}

/* 維持垂直間距 */
.carousel-section {
    padding: 60px 0;
    background: #f3f6f8;
}

.related-section {
    padding: 60px 0;
    background: #fff;
}
/* 相關產品背景可改 */
.site-footer {
    background: #f7f8f9;
    display: flex; /* 啟用 Flex 置中 */
    align-items: center; /* 垂直置中 */
    justify-content: center; /* 水平置中 */
    height: 75px; /* 固定高度 */
    margin: 0;
    padding: 0;
    text-align: center;
}

    .site-footer .footer-text {
        margin: 0;
        font-size: 16px;
        color: #333;
    }

/* 2) 讓 carousel 圓角移除並貼齊畫面，圖完整填滿 */
.carousel-section .carousel,
.carousel-section .carousel .slick-list,
.carousel-section .carousel .slick-track,
.carousel-section .carousel .slick-slide {
    width: 100%;
    height: auto;
    box-sizing: border-box;
}


    .carousel-section .carousel img,
    .carousel-section .carousel .slick-slide img {
        border-radius: 0 !important; /* 去掉柔邊 */
        width: 100% !important;
        height: 600px; /* 如需改高，調這裡 */
        object-fit: contain;
        display: block;
    }


@media (max-width: 960px) {
    .carousel-section .carousel img,
    .carousel-section .carousel .slick-slide img {
        height: 320px;
    }
}


.carousel {
    position: relative;
    overflow: hidden;
}



.slick-prev {
    left: 20px;
}

.slick-next {
    right: 20px;
}


.carousel .slick-prev, .carousel .slick-next {
    z-index: 9999;
}


.related-section .related-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: flex-start;
}


.related-section .related-item {
    flex: 0 0 calc(33.333% - 16px);
    text-align: center;
    margin: 0;
}


    .related-section .related-item img {
        width: 100%;
        height: 220px;
        object-fit: contain;
        border-radius: 8px;
        display: block;
    }


@media (max-width: 960px) {
    .related-section .related-grid {
        padding: 0 16px;
        flex-direction: column;
        gap: 18px;
    }

    .related-section .related-item {
        flex: none;
        width: 100%;
    }
}


section:last-of-type,
.section-showcase:last-of-type,
.related-section:last-of-type,
.site-footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


.carousel img, .carousel-section img {
    border-radius: 0 !important;
}

.slick-prev:active, .slick-next:active,
.slick-prev:focus, .slick-next:focus {
    opacity: 1 !important;
    outline: none !important;
    background: rgba(0,0,0,0.7);
}

.carousel-section .section-title-t1 {
    margin-bottom: 36px;
    text-align: center;
}


.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    font-size: 0 !important;
    text-align: center;
    padding: 0 !important;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    transition: background 0.25s ease, transform 0.18s ease, opacity 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* 隱藏原始 ::before 文字 */
    .slick-prev::before,
    .slick-next::before {
        font-size: 0 !important;
        content: "" !important;
    }

    /* 自定義箭頭 */
    .slick-prev::after {
        content: "❮" !important;
        font-size: 28px !important;
        color: #fff !important;
    }

    .slick-next::after {
        content: "❯" !important;
        font-size: 28px !important;
        color: #fff !important;
    }

.slick-prev {
    left: 32px;
}

.slick-next {
    right: 32px;
}

    .slick-prev:hover, .slick-next:hover {
        background: rgba(0,0,0,0.7);
        transform: translateY(-50%) scale(1.05);
    }

/* ========= slick dots（輪播頁碼）樣式 ========= */
.slick-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 20;
}

    .slick-dots li {
        margin: 0;
    }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: none;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
        }

        .slick-dots li.slick-active button {
            background: #ffffff;
        }

/* 全站字體縮小 2px（以 root font-size 調整為主，會影響所有 rem 基準） */
html {
    font-size: calc(100% - 2px);
    max-width: 100%;
    overflow-x: hidden;
}

/* 隱藏開發用的標點微調器（若要顯示，改為 display:block 或移除此規則） */
#hotspotAdjuster {
    display: none !important;
}


/* ===============================
   強制 RWD：解除 Hero 疊圖模式
   （原來 1024 全改為 768）
================================ */
@media (max-width: 768px) {
    /* 手機與小平板：僅顯示一般輪播，隱藏四格疊圖 */
    .hero {
        height: auto;
    }

    .hero-overlay {
        display: none !important;
    }

    .vertical-line {
        display: none !important;
    }
}

/* 手機：一列一個 */
@media (max-width: 480px) {
    .hero-overlay {
        grid-template-columns: 1fr !important;
    }
}

/* 更緊湊的手機首頁版面（Hero 與卡片） */
@media (max-width: 576px) {
    /* Hero 高度更合理，避免過多留白 */
    .hero-slider {
        height: 62vh;
        min-height: 360px;
    }

    /* 卡片區塊：縮小間距與內距 */
    .hero-overlay {
        padding: 12px !important;
        gap: 10px !important;
        background: #f5f7f9; /* 輕量灰背景，卡片更凸顯 */
    }

    .hero-zone {
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(0,0,0,.06);
    }

    .hover-group {
        padding: 16px 12px !important;
    }

    /* 文字：使用 clamp 動態縮放 */
    .hero-label {
        font-size: clamp(0.95rem, 2.8vw, 1.1rem) !important;
        line-height: 1.35 !important;
    }

        .hero-label span:first-child {
            font-size: clamp(1rem, 3vw, 1.1rem) !important;
        }

    .hero-word {
        font-size: clamp(0.85rem, 2.6vw, 0.95rem) !important;
        opacity: .75;
    }

    .hero-number {
        font-size: clamp(1rem, 3.2vw, 1.2rem) !important;
        opacity: .45;
        margin-top: 4px;
    }

    /* 垂直分隔線：手機隱藏 */
    .vertical-line {
        display: none !important;
    }

    /* 容器左右內距更小，視覺更集中 */
    .container,
    .contact-container,
    .origin-inner,
    .content-wrap {
        padding-left: 14px;
        padding-right: 14px;
    }
}


/* =========================
   全站 RWD 基礎
========================= */

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

section {
    width: 100%;
}

/* 此區塊原本 1024 → 768 */
@media (max-width: 768px) {
    /* 移除對 hero-bg-carousel 的高度限制，讓它撐滿 hero-slider */
    .hero,
    .hero-bg {
        height: auto !important;
        min-height: 260px;
    }

    .hero-bg-carousel,
    .hero-bg-carousel .slick-list,
    .hero-bg-carousel .slick-track {
        height: 100% !important;
        min-height: auto;
    }

        .hero-bg-carousel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center bottom;
        }
}

/* 此區塊原本 1024 → 768 */
@media (max-width: 768px) {
    /* 同步隱藏疊圖區，保留簡單輪播 */
    .hero-overlay {
        display: none !important;
    }
}

/* container 等原本 1024 → 768 */
@media (max-width: 768px) {

    .container,
    .contact-container,
    .origin-inner,
    .content-wrap {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* origin-inner 原本 1024 → 768 */
@media (max-width: 768px) {

    .origin-inner {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .origin-text {
        width: 100%;
    }

    .image-group,
    .img-stack-3 {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .img-left-vertical,
    .img-right-pair {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

        .img-left-vertical img,
        .img-right-pair img {
            width: 100%;
            height: auto;
            border-radius: 12px;
        }
}

/* h1~p 原本 1024 → 768 */
@media (max-width: 768px) {

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 18px;
    }

    p {
        font-size: 15px;
        line-height: 1.7;
    }
}

/* hover-group 背景 原本 1024 → 768 */
@media (max-width: 768px) {

    .hover-group {
        position: relative;
        min-height: 180px;
        color: #fff;
        overflow: hidden;
    }

        .hover-group::before {
            content: "";
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            filter: brightness(.55);
            z-index: 0;
        }

        .hover-group > * {
            position: relative;
            z-index: 1;
        }
}

/* ===== 手機 / 平板 Hero 四格自適應 =====
   原本 1024 → 768 */
@media (max-width: 768px) {

    .hero-overlay {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 20px;
    }

    .hero-zone {
        background: none;
    }

    .hover-group {
        position: relative;
        width: 100%;
        min-height: 180px; /* ✅ 撐高度 */
        border-radius: 16px;
        overflow: hidden;
        display: flex;
        align-items: flex-end; /* 文字靠下 */
        padding: 16px;
        color: #fff;
    }

        /* 背景圖 */
        .hover-group::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: var(--bg);
            background-size: cover; /* ✅ 填滿 */
            background-position: center;
            z-index: 0;
        }

        /* 暗色遮罩 */
        .hover-group::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient( to top, rgba(0,0,0,.55), rgba(0,0,0,.15) );
            z-index: 1;
        }

        /* 內容層 */
        .hover-group > * {
            position: relative;
            z-index: 2; /* ✅ 保證文字在最上層 */
        }

    .plus {
        display: none; /* 手機不顯示 + */
    }

    .hero-label {
        font-size: 14px;
        line-height: 1.3;
    }

    .hero-word {
        font-size: 16px;
        font-weight: 600;
    }

    .hero-number {
        opacity: 0.7;
        font-size: 12px;
    }
}

/* =========================
   RWD 修正：Hero 區塊
   不影響桌機
   原本 1024 → 768
========================= */

/* 平板以下 */
@media (max-width: 768px) {

    .hero-overlay {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: auto;
    }

    .hero-zone {
        aspect-ratio: 1 / 1; /* 關鍵：用比例撐高度 */
        height: auto;
    }

    .hover-group {
        position: absolute;
        inset: 0;
    }

        .hover-group::before {
            background-size: cover;
            background-position: center;
        }
}

/* 手機 */
@media (max-width: 576px) {

    .hero-overlay {
        grid-template-columns: 1fr;
    }

    .hero-zone {
        aspect-ratio: 4 / 3;
    }

    .overlay-text {
        bottom: 16px;
        left: 16px;
        transform: none;
        text-align: left;
    }

    .hero-number {
        font-size: 48px;
    }
}

/* =========================================================
   ★ 平板版（769px～1024px）：保留輪播、隱藏四格 Hero
========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {

    .hero-slider {
        height: 80vh !important;
        min-height: 520px;
        width: 100vw;
        overflow: hidden;
    }

    .hero-bg-carousel {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100% !important;
    }

        .hero-bg-carousel img {
            width: 100%;
            height: 100%;
            object-fit: cover !important;
            object-position: center !important;
        }

    /* 隱藏四格與白色分隔線 */
    .hero-overlay,
    .vertical-line {
        display: none !important;
    }

    /* 平板 hero 不顯示 slick dots，避免 1 2 3 4 跑出來 */
    .hero-slider .slick-dots {
        display: none !important;
    }

    /* 文字置中顯示在畫面中央 */
    .carousel-caption {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 80%;
        text-align: center;
    }

        .carousel-caption h2 {
            font-size: 2.6rem;
        }

        .carousel-caption p {
            font-size: 1.3rem;
        }
}
/* =========================================================
   平板（769–1024px）：移除四格占位，只保留輪播
========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {

    /* 1) 四格與分隔線：完全移除且不占任何高度 */
    .hero-overlay,
    .vertical-line {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    /* 2) Hero：只以輪播決定高度（滿版） */
    .hero-slider {
        position: relative !important;
        width: 100vw !important;
        height: 80vh !important; /* 需要更滿可改 90vh */
        min-height: 520px !important;
        overflow: hidden !important;
        background: #000;
    }

    /* 3) slick 高度撐滿，避免輪播高度塌陷造成空白 */
    .hero-bg-carousel,
    .hero-bg-carousel .slick-list,
    .hero-bg-carousel .slick-track,
    .hero-bg-carousel .slick-slide,
    .hero-bg-carousel .slick-slide > div,
    .hero-bg-carousel .hero-slide-bg {
        height: 100% !important;
    }

        /* 4) 圖片滿版顯示，修正你原本 contain / margin-top 導致只顯示一小塊 */
        .hero-slide-bg img,
        .hero-bg-carousel img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center !important;
            margin-top: 0 !important;
            display: block !important;
        }

    /* 5) 平板可選：dots 不顯示（避免跑版/跑到奇怪位置） */
    .hero-slider .slick-dots {
        display: none !important;
    }
}
/* =========================================================
   ✅ 平板橫向（769–1024px landscape）：修正 Hero 下方巨大空白
   原因：hero-slider 用 vh 撐高，但 overlay 已移除
========================================================= */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {

    /* 1️⃣ Hero 不再用 vh 撐高度 */
    .hero-slider {
        height: auto !important;
        min-height: 0 !important;
    }

    /* 2️⃣ slick 輪播高度完全由內容決定 */
    .hero-bg-carousel,
    .hero-bg-carousel .slick-list,
    .hero-bg-carousel .slick-track,
    .hero-bg-carousel .slick-slide,
    .hero-bg-carousel .hero-slide-bg {
        height: auto !important;
    }

        /* 3️⃣ 圖片本身決定高度（避免只顯示上半） */
        .hero-slide-bg img,
        .hero-bg-carousel img {
            width: 100%;
            height: auto !important;
            object-fit: cover;
            display: block;
        }

    /* 4️⃣ 確保四格與分隔線完全不佔空間 */
    .hero-overlay,
    .vertical-line {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}
/* =========================================================
   ✅ 平板（768–1024px，包含 iPad 直向 768）：Hero 不留白
   請放在 CSS 最底部（一定要最後）
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {

    /* 四格與分隔線：完全移除 */
    .hero-overlay,
    .vertical-line {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    /* ✅ 平板強制移除橫向溢出 */
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* ✅ 平板保留桌面版雙欄佈局 */
    .section-showcase {
        padding: 60px 4vw !important;
    }

    .showcase-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 40px !important;
        max-width: 100% !important;
    }

    .section-showcase .text-block,
    .variant-left .text-block {
        flex: 1 1 60% !important;
        padding-left: 20px !important;
    }

    .section-showcase .image-group,
    .variant-left .image-group {
        flex: 1 1 32% !important;
        max-width: 32% !important;
    }

        .section-showcase .image-group.img-stack-3,
        .variant-left .image-group.img-stack-3 {
            transform: translateX(0) scale(1) !important;
            gap: 10px !important;
        }

    .section-showcase .img-left-vertical,
    .variant-left .img-left-vertical {
        max-height: 260px !important;
        flex: 0 0 46% !important;
    }

        .section-showcase .img-left-vertical img,
        .variant-left .img-left-vertical img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            transform: none !important;
        }

    .section-showcase .img-right-pair,
    .variant-left .img-right-pair {
        flex: 0 0 46% !important;
        gap: 8px !important;
    }

        .section-showcase .img-right-pair .img-box,
        .variant-left .img-right-pair .img-box {
            max-height: 120px !important;
        }


    /* 平板直向：圖片放大一些，佔比提高 */
    @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
        .section-showcase .text-block,
        .variant-left .text-block {
            flex: 1 1 38% !important;
        }

        .section-showcase .image-group,
        .variant-left .image-group {
            flex: 1 1 56% !important;
            max-width: 56% !important;
        }

        .section-showcase .img-left-vertical,
        .variant-left .img-left-vertical {
            max-height: 400px !important;
        }

        .section-showcase .img-right-pair .img-box,
        .variant-left .img-right-pair .img-box {
            max-height: 190px !important;
        }
    }

    /* 平板橫向：優化橫屏比例，文字與圖片更平衡 */
    @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
        .section-showcase .text-block,
        .variant-left .text-block {
            flex: 1 1 66% !important;
        }

        .section-showcase .image-group,
        .variant-left .image-group {
            flex: 1 1 28% !important;
            max-width: 28% !important;
        }

        .section-showcase .img-stack-3 {
            gap: 6px !important;
        }

        .section-showcase .img-left-vertical,
        .variant-left .img-left-vertical {
            max-height: 170px !important;
        }

        .section-showcase .img-right-pair,
        .variant-left .img-right-pair {
            gap: 6px !important;
        }

            .section-showcase .img-right-pair .img-box,
            .variant-left .img-right-pair .img-box {
                max-height: 90px !important;
            }
    }
    /* Hero 高度：固定由輪播撐滿（避免 90vh + 圖片只顯示一小段） */
    .hero-slider {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 80vh !important; /* 需要更短可改 70vh/60vh */
        min-height: 520px !important;
        overflow: hidden !important;
    }

    /* slick 結構：全部撐滿 hero-slider */
    .hero-bg-carousel,
    .hero-bg-carousel .slick-list,
    .hero-bg-carousel .slick-track,
    .hero-bg-carousel .slick-slide,
    .hero-bg-carousel .slick-slide > div,
    .hero-bg-carousel .hero-slide-bg {
        height: 100% !important;
    }

        /* 圖片：滿版鋪滿，取消你桌機的 -20% 位移 */
        .hero-slide-bg img,
        .hero-bg-carousel img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center !important;
            margin-top: 0 !important;
            display: block !important;
        }

    /* 平板不顯示 dots（可選） */
    .hero-slider .slick-dots {
        display: none !important;
    }
}
/* ===============================
   修正：國際交流輪播圖片滿版顯示
   不影響 Hero
=============================== */
.carousel-section .carousel,
.carousel-section .slick-list,
.carousel-section .slick-track,
.carousel-section .slick-slide {
    width: 100%;
}

    .carousel-section .carousel img {
        width: 100% !important;
        height: 600px; /* 桌機高度 */
        object-fit: cover; /* ✅ 關鍵：改成 cover */
        object-position: center;
        display: block;
    }

/* =========================================================
   ✅ 平板直向（portrait）：carousel-caption 定位修正
   overlay 已被 JS 移除，caption 要有固定位置不亂跑
========================================================= */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .hero-overlay,
    .vertical-line {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    /* hero 高度固定（portrait 優先蓋過上面的 height:auto） */
    .hero-slider {
        height: 55vh !important;
        min-height: 420px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .hero-bg-carousel,
    .hero-bg-carousel .slick-list,
    .hero-bg-carousel .slick-track,
    .hero-bg-carousel .slick-slide,
    .hero-bg-carousel .slick-slide > div,
    .hero-bg-carousel .hero-slide-bg {
        height: 100% !important;
    }

        /* hero-slide-bg 直接給固定高度，確保 caption 的 top:50% 有依據 */
        .hero-bg-carousel .hero-slide-bg {
            position: relative !important;
            height: 55vh !important;
            min-height: 420px !important;
        }

        .hero-slide-bg img,
        .hero-bg-carousel img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center !important;
            margin-top: 0 !important;
            display: block !important;
        }

    .carousel-caption {
        position: absolute !important;
        left: 6% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        text-align: left !important;
        max-width: 70% !important;
        animation: none !important;
        color: #fff !important;
        z-index: 10 !important;
    }

        .carousel-caption h2 {
            font-size: 2.2rem !important;
        }

        .carousel-caption p {
            font-size: 1.2rem !important;
        }
}

/* =========================================================
   ✅ 平板橫向（landscape）：經營理念/歷史沿革圖片限制
   variant-concept / variant-history 橫向不爆圖
========================================================= */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .variant-concept .image-group,
    .variant-history .image-group {
        flex: 1 1 35% !important;
        max-width: 35% !important;
    }

        .variant-concept .image-group img,
        .variant-history .image-group img {
            width: 100% !important;
            height: auto !important;
            max-height: 300px !important;
            object-fit: cover !important;
            transform: none !important;
        }
}

/* =========================================================
   ✅ 平板（直向+橫向）：AOS 動畫不卡住
   平板上 AOS fade-right / fade-left 初始 transform 會跟
   960px 規則衝突，強制 AOS 元素在平板可見
========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   ✅ 強制全站鎖定亮色模式，不受任何裝置黑暗模式影響
========================================================= */
@media (prefers-color-scheme: dark) {
    html {
        filter: none !important;
        color-scheme: light !important;
    }
}

/* =========================================================
   ✅ 三星瀏覽器強制深色模式封鎖
========================================================= */
html, body {
    -webkit-filter: none !important;
    filter: none !important;
    forced-color-adjust: none !important;
    -ms-high-contrast-adjust: none !important;
}