/* ===================== */
/* Reset & Base Styles   */
/* ===================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===================== */
/* Cookie Consent Banner */
/* ===================== */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    color: #333;
    padding: 20px;
    z-index: 9999;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
    transition: transform 0.3s ease;
    border-top: 2px solid #004080;
}

.cookie-consent.hidden {
    transform: translateY(100%);
    pointer-events: none;
}

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

.cookie-consent-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    flex: 1;
    min-width: 250px;
    color: #333;
}

.cookie-accept-btn {
    background: #004080;
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s ease;
    white-space: nowrap;
}

.cookie-accept-btn:hover {
    background: #003366;
}

/* Go to Top Button */
.go-top-btn {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #1f4566 0%, #27659c 100%);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.go-top-btn.show {
    opacity: 1;
    visibility: visible;
}

.go-top-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.go-top-btn svg {
    width: 24px;
    height: 24px;
}

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

@media screen and (max-width: 768px) {
    .cookie-consent {
        padding: 15px;
    }

    .cookie-consent-content {
        flex-direction: column;
        text-align: center;
    }

    .cookie-consent-content p {
        font-size: 14px;
    }

    .cookie-accept-btn {
        width: 100%;
        padding: 10px 20px;
        font-size: 14px;
    }

    /* Go to Top Button - Mobile */
    .go-top-btn {
        right: 20px;
        bottom: 20px;
        width: 45px;
        height: 45px;
    }

    .go-top-btn svg {
        width: 20px;
        height: 20px;
    }
}

html,
body {
    overflow-x: hidden;
}

body {
    font-family: 'Alexandria', 'Noto Sans TC', '思源黑體', sans-serif;
    font-size: 20px;
    font-weight: 100;
    letter-spacing: 1px;
    line-height: 1.6;
}

.gray-section {
    background-color: #f5f5f5;
}

/* Chinese font settings for desktop */
body *:lang(zh-TW),
body *:lang(zh) {
    font-weight: 400;
    letter-spacing: 1px;
}

a {
    text-decoration: none;
    color: inherit;
    letter-spacing: 1px;
}

ul {
    list-style: none;
    letter-spacing: 1px;
}

/* ===================== */
/* Header                */
/* ===================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
    transition: background 0.3s ease;
}

.header.scrolled {
    background: rgba(0, 0, 0, 0.85);
}

.header.header-transparent {
    background: transparent;
}

.header.header-transparent.scrolled {
    background: rgba(0, 0, 0, 0.85);
}

.header.menu-open {
    background: rgba(0, 0, 0, 0.95);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    height: 40px;
    z-index: 1001;
}

.logo-mobile {
    display: none;
}

.logo-desktop {
    display: block;
}

.logo-text {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff;
}

/* Navigation */
.nav-wrapper {
    display: flex;
    align-items: center;
    gap: 80px;
}

/* Header Right Icons */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1001;
}

.search-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 1;
    padding: 0;
    position: relative;
}

.search-toggle-btn:hover {
    opacity: 0.7;
}

.search-toggle-btn svg {
    stroke: #fff;
}

.user-login-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
}

.user-login-icon:hover {
    opacity: 0.7;
}

.user-login-icon svg {
    stroke: #fff;
}

/* Search Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-container {
    width: 90%;
    max-width: 600px;
    position: relative;
    transform: translateY(-30px);
    transition: transform 0.3s ease;
}

.search-overlay.active .search-container {
    transform: translateY(0);
}

.search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    padding: 10px 20px;
    gap: 10px;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 18px;
    padding: 10px;
    background: transparent;
}

.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    transition: opacity 0.3s ease;
}

.search-btn:hover {
    opacity: 0.7;
}

.search-btn svg {
    stroke: #000;
}

.search-close-btn {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    transition: opacity 0.3s ease;
}

.search-close-btn:hover {
    opacity: 0.7;
}

.search-close-btn svg {
    stroke: #fff;
}

.lang-dropdown {
    position: relative;
    z-index: 10001;
}

.lang-switch {
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border: 1px solid #fff;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    color: #fff;
}

.lang-switch:hover {
    border-color: #fff;
    background: #fff;
    color: #000;
}

.lang-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0;
    border: 1px solid #fff;
    border-top: none;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.lang-dropdown:hover .lang-menu,
.lang-dropdown.active .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: block;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    border-bottom: 1px solid #fff;
    transition: all 0.3s ease;
}

.lang-option:last-child {
    border-bottom: none;
}

.lang-option:hover,
.lang-option.active {
    background-color: #fff;
    color: #000;
}

/* ===================== */
/* Hero Slider Section   */
/* ===================== */

.slider-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.slide img,
.slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Desktop and Mobile Image Control */
.slide .desktop-only {
    display: block;
}

.slide .mobile-only {
    display: none;
}

.slide iframe {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 177.77vh;
    height: 100vh;
    min-width: 100vw;
    min-height: 56.25vw;
}

@media screen and (max-width: 768px) {
    .slide .desktop-only {
        display: none;
    }

    .slide .mobile-only {
        display: block;
    }

    /* 手機版 YouTube 影片響應式調整 - 等比例縮放至裝置寬度 */
    .slide iframe {
        width: 100vw;
        height: 56.25vw;
        /* 16:9 比例 (9/16 = 0.5625) */
        min-width: auto;
        min-height: auto;
    }
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, transparent 50%, rgba(0, 0, 0, 0.3) 100%);
}

/* Slider Content */
.slide-content {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
}

.slide-content h1 {
    font-size: 72px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.slide-content p {
    text-transform: uppercase;
    opacity: 0.9;
    line-height: 1.8;
    color: #fff;
}

/* Slider Pagination */
.slider-pagination {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 20;
}

.pagination-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination-dot.active {
    width: 40px;
    border-radius: 5px;
    background-color: #3498db;
}

/* Slider Arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 60px;
    height: 60px;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.slider-arrow:hover {
    opacity: 1;
}

.slider-arrow svg {
    width: 48px;
    height: 48px;
}

.slider-arrow-prev {
    left: 40px;
}

.slider-arrow-next {
    right: 40px;
}

/* 手機版隱藏箭頭 - 移至統一 RWD 區塊 */

.pagination-dot:hover {
    background-color: #ffffffaa;
}

.pagination-dot.active:hover {
    background-color: #3498db;
}

/* Progress Bar */
.slider-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.2);
}

.slider-progress-bar {
    height: 100%;
    background-color: #3498db;
    width: 0;
    transition: width 0.1s linear;
}

/* ===================== */
/* About Section         */
/* ===================== */

.about-section {
    padding: 80px 100px;
}

.about-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* About Page Specific Styles */
.about-intro {
    width: 100%;
}

.section-title-center {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.about-intro-image {
    text-align: center;
    margin: 60px 0;
}

.about-intro-image img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.about-intro-text {
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

.about-intro-text p {
    font-size: 20px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

.about-certifications {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    align-items: center;
}

.about-certifications img {
    height: 80px;
    width: auto;
}

/* Philosophy Section - Gray Background */
.philosophy-section {
    padding: 80px 100px;
}

.philosophy-content,
.manufacturing-content {
    max-width: 1200px;
    margin: 0 auto;
}

.philosophy-item,
.manufacturing-item {
    margin-bottom: 40px;
}

.item-number {
    font-size: 24px;
    font-weight: 700;
    color: #004080;
    margin-bottom: 10px;
}

.item-title {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 15px;
    text-transform: capitalize;
}

.item-text {
    font-size: 20px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
}

.item-subtitle {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Manufacturing Section - White Background */
.manufacturing-section {
    padding: 80px 100px;
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
}

.title-bar {
    display: inline-block;
    width: 4px;
    height: 30px;
    background-color: #004080;
    margin-right: 15px;
}

/* Original about-container styles for other pages */
.about-container.flex-layout {
    display: flex;
    align-items: center;
}

.about-left {
    flex: 0 0 auto;
    /* padding-right: 60px; */
}

.about-title {
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: right;
}

.about-divider {
    width: 1px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 0 60px;
}

.about-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about-content {
    flex: 1;
    padding-right: 40px;
}

.about-subtitle {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #fff;
}

.about-text {
    font-size: 16px;
    color: #ffffffaa;
}

.btn-more {
    display: inline-block;
    padding: 10px 30px;
    font-weight: 400;
    text-transform: uppercase;
    color: #333;
    border: 1px solid #333;
    border-radius: 30px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-more:hover {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

.btn-more-light {
    color: #fff;
    border-color: #fff;
}

.btn-more-light:hover {
    background-color: #fff;
    border-color: #fff;
    color: #000;
}

.btn-more-large {
    padding: 15px 30px;
}

/* ===================== */
/* Product Section       */
/* ===================== */

/* ===================== */
/* Product Section - 4 Column Grid (Homepage Only) */
/* ===================== */

.homepage-products {
    position: relative;
    width: 100%;
}

.product-header {
    text-align: center;
    padding: 80px 50px 60px;
    background: #333;
}

.product-title {
    font-size: 42px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 25px;
    color: #eee;
}

.product-subtitle {
    color: #999;
    max-width: 900px;
    margin: 0 auto;
}

.product-arrow {
    display: none;
}

.homepage-products .product-grid {
    display: flex;
    width: 100%;
}

.homepage-products .product-grid .product-card {
    position: relative;
    flex: 1;
    min-height: 600px;
    height: 75vh;
    overflow: hidden;
    text-decoration: none;
    display: block;
    border-radius: 0;
}

.homepage-products .product-grid .product-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.homepage-products .product-grid .product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.homepage-products .product-grid .product-card .mobile-img {
    display: none;
}

.homepage-products .product-grid .product-card .desktop-img {
    display: block;
    width: 100%;
    height: 100%;
}

/* 底部黑色半透明遮罩 */
.homepage-products .product-grid .product-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
    transition: all 0.5s ease;
    z-index: 1;
    pointer-events: none;
}

/* 文字資訊 - 在底部遮罩區域 */
.homepage-products .product-grid .product-card-info {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    padding: 0 25px;
    z-index: 2;
    text-align: center;
    transition: all 0.5s ease;
    box-sizing: border-box;
}

.homepage-products .product-grid .product-card-title {
    font-size: 26px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 12px;
    transition: all 0.5s ease;
}

.homepage-products .product-grid .product-card-desc {
    font-size: 20px;
    color: #ffffffaa;
    line-height: 1.6;
    transition: all 0.5s ease;
}

/* 首頁專用：禁用 ::before 偽元素 */
.homepage-products .product-grid .product-card::before {
    display: none !important;
}

/* Hover 效果 - 首頁專用 */
.homepage-products .product-grid .product-card:hover .product-card-img img {
    transform: scale(1.1);
}

.homepage-products .product-grid .product-card:hover .product-card-overlay {
    height: 100%;
    background: rgba(0, 64, 113, 0.6) !important;
}

.homepage-products .product-grid .product-card:hover .product-card-info {
    bottom: 50%;
    transform: translateY(50%);
}

/* ===================== */
/* News Section          */
/* ===================== */

/* News Section 已使用統一的 inner-section 樣式 */

.news-header {
    text-align: center;
    padding: 0 50px 40px;
}

.news-header-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 0 50px 40px;
}

.news-title {
    font-size: 42px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 25px;
    color: #000;
}

.news-subtitle {
    color: #333;
}

.news-list {
    display: flex;
    gap: 40px;
    padding: 0;
    transition: transform 0.5s ease;
}



.news-card {
    flex: 0 0 auto;
    width: 446px;
    background-color: #fff;
    transition: all 0.5s ease;
}


.news-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-card:hover .news-image img {
    transform: scale(1.2);
}

.news-content {
    padding: 25px;
}

.news-category {
    display: inline-block;
    color: #000;
    margin-bottom: 10px;
}

.news-card-title {
    font-size: 18px;
    font-weight: 500;
    color: #000;
    margin-bottom: 12px;
}

.news-card-desc {
    color: #333;
    margin-bottom: 20px;
}

.news-date {
    font-size: 16px;
    color: #000;
}

.news-more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding-top: 50px;
    margin-bottom: 20px;
}

.news-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1578px;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
}

.news-slider-wrapper-inner {
    width: 1418px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.news-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 60px;
    height: 60px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 1;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.news-arrow:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.news-arrow.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.news-arrow svg {
    width: 48px;
    height: 48px;
}

.news-arrow-left {
    left: -80px;
}

.news-arrow-right {
    right: -80px;
}

/* ===================== */
/* Support Center Section */
/* ===================== */

.support-center-section {
    position: relative;
    min-height: 70vh;
    background-color: #1a1a1a;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 100px 50px;
}

.support-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

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

.support-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.support-content {
    position: relative;
    z-index: 10;
    max-width: 1140px;
    margin: 0 auto;
}

.support-header {
    text-align: center;
    margin-bottom: 60px;
}

.support-title {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.support-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: #ffffffaa;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.support-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 40px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    /* min-height: 160px; */
}

.support-card:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-5px);
}

.support-card-large {
    grid-column: span 3;
}

.support-card-small {
    grid-column: span 2;
    display: flex;
    justify-content: center;
    /* align-items: center; */
}

.support-card-header {
    display: flex;
    align-items: flex-start;
}

.support-card-small .support-card-header {
    margin-bottom: 0;
    /* flex-direction: column; */
    text-align: center;
}

.support-card-icon {
    flex-shrink: 0;
    color: #fff;
    margin-right: 15px;
    margin-top: 8px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.support-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.support-card-title {
    font-size: 26px;
    margin: 0;
    color: #fff;
}

.support-card-desc {
    color: #ffffffaa;
    margin-left: 63px;
    font-size: 16px;
    margin-top: -15px;
}

/* Single line support cards (without description) */
.support-card-single .support-card-header {
    align-items: center;
}

.support-card-single .support-card-icon {
    margin-top: 0;
}

/* ===================== */
/* Partner Section       */
/* ===================== */

.partner-section {
    position: relative;
    min-height: 70vh;
    background-color: #1a1a1a;
    overflow: hidden;
}

.partner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
}

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

.partner-content {
    position: relative;
    z-index: 10;
    padding: 200px 250px 150px;
}

.partner-title {
    font-size: 42px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 25px;
    color: #fff;
}

.partner-desc {
    color: #ffffffaa;
    margin-bottom: 30px;
}

.partner-stats {
    display: flex;
    gap: 80px;
    margin-bottom: 50px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 120px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    letter-spacing: -5px;
}

.stat-label {
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 15px;
    color: #fff;
}

/* ===================== */
/* Advantages Section    */
/* ===================== */

.adv-section {
    /* background-color: #3c4b59; */
    background: url(../images/adv-bg.jpg);
    padding: 100px 50px;
}

.adv-header {
    text-align: center;
    padding: 0 50px 60px;
}

.adv-title {
    font-size: 42px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
}

.adv-subtitle {
    color: #ffffff66;
    max-width: 900px;
    margin: 0 auto;
}

.adv-container {
    display: flex;
    justify-content: center;
    gap: 80px;
    max-width: 1900px;
    margin: 0 auto;
}

.adv-item {
    flex: 1;
    max-width: 450px;
    text-align: center;
}

.adv-icon {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
}

.adv-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.adv-four-title {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 400;
    color: #fff;
}

.adv-desc {
    color: #ffffffaa;
}

/* ===================== */
/* Investor & ESG Section */
/* ===================== */

.investor-esg-section {
    display: flex;
    min-height: 400px;
}

.investor-side,
.esg-side {
    position: relative;
    width: 50%;
    min-height: 400px;
    overflow: hidden;
}

.investor-side::after,
.esg-side::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.investor-bg,
.esg-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.investor-bg img,
.esg-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.investor-esg-section .investor-content,
.investor-esg-section .esg-content {
    position: relative;
    z-index: 10;
    padding: 80px 60px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.investor-esg-section .investor-stock {
    font-size: 24px;
    color: #ffffffaa;
    margin-bottom: 10px;
    display: block;
}

.investor-esg-section .investor-title,
.investor-esg-section .esg-title {
    font-size: 42px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
}

.investor-esg-section .investor-desc,
.investor-esg-section .esg-desc {
    color: #ffffffaa;
    margin-bottom: 30px;
}

.investor-esg-section .investor-divider,
.investor-esg-section .esg-divider {
    width: 50px;
    height: 3px;
    background-color: #3498db;
    margin-bottom: 30px;
}

.investor-esg-section .investor-links {
    display: flex;
    gap: 60px;
}

.investor-esg-section .investor-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.investor-esg-section .esg-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.investor-esg-section .investor-link,
.investor-esg-section .esg-link {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.investor-esg-section .investor-link::before,
.investor-esg-section .esg-link::before {
    content: '▸';
    position: absolute;
    left: -20px;
    opacity: 0;
    transition: all 0.3s ease;
}

.investor-esg-section .investor-link:hover,
.investor-esg-section .investor-link.active,
.investor-esg-section .esg-link:hover,
.investor-esg-section .esg-link.active {
    color: #fff;
    transform: translateX(20px);
}

.investor-link:hover::before,
.investor-link.active::before,
.esg-link:hover::before,
.esg-link.active::before {
    opacity: 1;
    left: -20px;
}

/* ===================== */
/* Universal Inner Page Hero Banner */
/* 統一的內頁 Banner 樣式 - 適用於所有內頁 */
/* ===================== */

/* 通用 Hero Banner 容器 */
.inner-hero,
.page-hero,
.investor-hero,
.guide-hero,
.catalog-hero,
.data-hero,
.video-hero,
.contact-hero,
.worldwide-hero,
.news-hero {
    position: relative;
    width: 100%;
    height: 400px;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 背景圖片容器 */
.inner-hero-bg,
.page-hero-bg,
.investor-hero-bg,
.guide-hero-bg,
.catalog-hero-bg,
.data-hero-bg,
.video-hero-bg,
.contact-hero-bg,
.worldwide-hero-bg,
.news-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 背景圖片 */
.inner-hero-bg img,
.page-hero-bg img,
.investor-hero-bg img,
.guide-hero-bg img,
.catalog-hero-bg img,
.data-hero-bg img,
.video-hero-bg img,
.contact-hero-bg img,
.worldwide-hero-bg img,
.news-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 桌面版和手機版圖片控制 */
.inner-hero-bg .desktop-only,
.page-hero-bg .desktop-only,
.investor-hero-bg .desktop-only,
.guide-hero-bg .desktop-only,
.catalog-hero-bg .desktop-only,
.data-hero-bg .desktop-only,
.video-hero-bg .desktop-only,
.contact-hero-bg .desktop-only,
.worldwide-hero-bg .desktop-only,
.news-hero-bg .desktop-only {
    display: block;
}

.inner-hero-bg .mobile-only,
.page-hero-bg .mobile-only,
.investor-hero-bg .mobile-only,
.guide-hero-bg .mobile-only,
.catalog-hero-bg .mobile-only,
.data-hero-bg .mobile-only,
.video-hero-bg .mobile-only,
.contact-hero-bg .mobile-only,
.worldwide-hero-bg .mobile-only,
.news-hero-bg .mobile-only {
    display: none;
}

@media screen and (max-width: 768px) {

    .inner-hero-bg .desktop-only,
    .page-hero-bg .desktop-only,
    .investor-hero-bg .desktop-only,
    .guide-hero-bg .desktop-only,
    .catalog-hero-bg .desktop-only,
    .data-hero-bg .desktop-only,
    .video-hero-bg .desktop-only,
    .contact-hero-bg .desktop-only,
    .worldwide-hero-bg .desktop-only,
    .news-hero-bg .desktop-only {
        display: none;
    }

    .inner-hero-bg .mobile-only,
    .page-hero-bg .mobile-only,
    .investor-hero-bg .mobile-only,
    .guide-hero-bg .mobile-only,
    .catalog-hero-bg .mobile-only,
    .data-hero-bg .mobile-only,
    .video-hero-bg .mobile-only,
    .contact-hero-bg .mobile-only,
    .worldwide-hero-bg .mobile-only,
    .news-hero-bg .mobile-only {
        display: block;
    }
}

/* 可選的背景遮罩效果 */
.inner-hero-bg::after,
.guide-hero-bg::after,
.investor-hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 2;
}

/* Hero 內容容器 */
.inner-hero-content,
.page-hero-content,
.investor-hero-content,
.guide-hero-content,
.catalog-hero-content,
.data-hero-content,
.video-hero-content,
.contact-hero-content,
.worldwide-hero-content,
.news-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 1000px;
    padding: 0 50px;
    color: #fff;
}

/* Hero 標題 */
.inner-hero-title,
.page-hero-title,
.investor-hero-title,
.guide-hero-title,
.catalog-hero-title,
.data-hero-title,
.video-hero-title,
.contact-hero-title,
.worldwide-hero-title,
.news-hero-title {
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #fff;
}

/* Hero 描述文字 */
.inner-hero-desc,
.page-hero-desc,
.investor-hero-desc,
.guide-hero-desc,
.guide-hero-subtitle,
.catalog-hero-desc,
.data-hero-desc,
.video-hero-desc,
.contact-hero-desc,
.worldwide-hero-desc,
.news-hero-desc {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
}

.contact-header {
    text-align: center;
    margin-bottom: 40px;
}

.contact-title {
    font-size: 42px;
    font-weight: 500;
    text-transform: uppercase;
}

.page-breadcrumb {
    background-color: #333;
    padding: 15px 50px;
}

.breadcrumb-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 16px;
    text-transform: uppercase;
}

.breadcrumb-prefix {
    color: #ffffff66;
    font-weight: 500;
}

.page-breadcrumb a {
    color: #ffffff66;
    transition: color 0.3s ease;
}

.page-breadcrumb a:hover {
    color: #ffffffcc;
}

.breadcrumb-separator {
    color: #ffffff99;
}

.breadcrumb-current {
    color: #ffffff99;
}


/* ===================== */
/* Products List Section */
/* ===================== */

.products-list-section {
    background: url('../images/bg-material.jpg') repeat;
    padding: 100px 20px;
}

.products-list-header {
    text-align: center;
    margin-bottom: 60px;
}

.products-list-title {
    font-size: 42px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.products-list-desc {
    font-size: 16px;
    font-weight: 200;
    color: #000;
    line-height: 1.6;
}

/* Guide Button Styles */
.guide-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #0056a0 100%, #003d6a 0%);
    border: none;
    color: #fff;
    padding: 24px 60px;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.4s ease;
    border-radius: 55px;
    text-decoration: none;
    margin-top: 10px;
    box-shadow: 0 6px 20px rgba(0, 61, 106, 0.35);
    position: relative;
    overflow: hidden;
}

.guide-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.guide-button:hover::before {
    left: 100%;
}

.guide-button:hover {
    background: linear-gradient(135deg, #0056a0 0%, #0071cc 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 61, 106, 0.45);
}

.guide-button:hover .guide-arrow:hover {
    color: #fff;
}

.guide-arrow {
    display: inline-block;
    flex-shrink: 0;
    font-size: 22px;
    color: #fff;
    transition: all 0.3s ease;
    animation: arrowSlide 1.5s ease-in-out infinite;
    margin-top: -2px;
}

@keyframes arrowSlide {

    0%,
    100% {
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        transform: translateX(6px);
        opacity: 0.7;
    }
}

.guide-button:hover .guide-arrow {
    animation: arrowPulse 0.8s ease-in-out infinite;
    color: #fff;
}

@keyframes arrowPulse {

    0%,
    100% {
        transform: translateX(0) scale(1);
    }

    50% {
        transform: translateX(5px) scale(1.1);
    }
}

.guide-text {
    white-space: nowrap;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1600px;
    margin: 0 auto 80px;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 64, 113, 0.6);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.product-card:hover::before {
    opacity: 1;
}

.product-card-info {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.product-card-series {
    font-size: 18px;
    font-weight: 100;
    color: #000;
    text-transform: uppercase;
    transition: color 0.4s ease;
}

/* Products list page: image on top, title/subtitle below; match homepage hover */
.products-list-section .products-grid .product-card {
    display: block;
    padding: 0;
    height: 400px;
    background: #ededed;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

.products-list-section .products-grid .product-card-image {
    width: 100%;
    height: 80%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.products-list-section .products-grid .product-card-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.5s ease;
    padding-top: 20px;
}

/* Blue overlay that grows from bottom to top */
.products-list-section .products-grid .product-card-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20%;
    /* background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%, transparent 100%); */
    z-index: 2;
    transition: all 0.5s ease;
    pointer-events: none;
}

.products-list-section .products-grid .product-card-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 16px 25px;
    text-align: center;
    color: #333;
    z-index: 3;
    transition: all 0.5s ease;
}

.products-list-section .products-grid .product-card-name {
    font-size: 24px;
    color: #000;
    transition: all 0.5s ease;
    font-weight: 400;
    margin-bottom: -5px;
}

.products-list-section .products-grid .product-card-series {
    color: #333;
    transition: all 0.5s ease;
}

/* Hover: scale image, expand overlay from bottom to top, move text up */
.products-list-section .products-grid .product-card:hover .product-card-image img {
    transform: scale(1.1);
}

.products-list-section .products-grid .product-card:hover .product-card-overlay {
    height: 100%;
    background: rgba(0, 64, 113, 0.6);
}

.products-list-section .products-grid .product-card:hover .product-card-info {
    bottom: 50%;
    transform: translateY(50%);
    background: transparent;
}

.products-list-section .products-grid .product-card:hover .product-card-name,
.products-list-section .products-grid .product-card:hover .product-card-series {
    color: #fff;
}

.product-card:hover .product-card-series {
    color: #ffffffaa;
}

/* Dynamax 專屬樣式 - 一列三欄 */
.dynamax-section .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Dynamax iframe 頁面內容背景包裝器 */
.content-wrapper-bg {
    background-color: #e8e8e8;
}

/* iframe 內容區塊樣式 */
.iframe-section {
    width: 100%;
    /* max-width: 1200px; */
    padding: 40px 20px;
    margin: 0 auto;
}

.iframe-container {
    position: relative;
    width: 100%;
    height: 900px;
    /* 增加高度以完整顯示內容 */
    overflow: visible;
    /* 允許內容完整顯示 */
    background-color: #fff;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.product-card-image {
    position: absolute;
    right: 10px;
    bottom: 0;
    width: 75%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 2;
}

.product-card-image img {
    max-width: 140%;
    max-height: 170%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.product-card:hover .product-card-image img {
    transform: scale(1.05);
}

/* Contact Banner */
.contact-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #2d3748;
    border-radius: 4px;
    padding: 50px 50px;
    max-width: 600px;
    margin: 100px auto 60px;
}

.contact-banner-content {
    flex: 1;
}

.contact-banner-title {
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #fff;
}

.contact-banner-desc {
    color: rgba(255, 255, 255, 0.6);
}

.contact-banner-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}

.contact-banner-btn:hover {
    border-color: #fff;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* ===================== */
/* Product Detail Page   */
/* ===================== */

/* Product Hero Banner */
.product-hero {
    background-color: #1a1a1a;
    padding: 180px 50px 80px;
    text-align: center;
}

.product-hero-content {
    max-width: 1000px;
    margin: 0 auto;
}

.product-hero-title {
    font-size: 72px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 8px;
    margin-bottom: 30px;
}

.product-hero-desc {
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.8;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.product-detail-section {
    background: url(../images/bg-material.jpg) repeat;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: 0;
    max-width: 100%;
    margin: 0;
    position: relative;
}

/* Overview Section */
.product-overview {
    display: block;
    width: 100%;
    padding-top: 70px;
}

.product-overview:first-child {
    padding-top: 0;
}

.overview-info {
    width: 100%;
}

.overview-image-placeholder {
    flex: 0 0 50%;
    width: 50%;
    display: none;
}

.overview-image {
    flex: 0 0 50%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 40px 120px;
    height: fit-content;
    transition: all 0.3s ease;
}

.overview-image.is-fixed {
    position: fixed;
    top: 140px;
    left: 0;
    width: 50%;
    z-index: 50;
}

.product-info-wrapper {
    flex: 1;
    width: 50%;
    padding: 80px 50px 120px;
    min-height: 100vh;
    margin-left: auto;
    box-sizing: border-box;
}

.product-gallery {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.product-main-image {
    position: relative;
    width: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.badge-3d {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.product-main-image img {
    width: 100%;
    height: auto;
    display: block;
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #666;
    font-size: 60px;
    font-weight: 200;
    cursor: pointer;
    padding: 10px;
    width: auto;
    height: auto;
    transition: all 0.3s ease;
    z-index: 10;
    line-height: 1;
    font-family: Arial, sans-serif;
}

.gallery-arrow:hover {
    color: #000;
    transform: translateY(-50%) scale(1.2);
}

.gallery-arrow-prev {
    left: -45px;
}

.gallery-arrow-next {
    right: -45px;
}

.gallery-arrow svg {
    display: none;
}

.gallery-arrow-prev::before {
    content: '‹';
}

.gallery-arrow-next::before {
    content: '›';
}

.product-thumbnails {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 10px;
}

.thumbnail-item {
    width: 12px;
    height: 12px;
    cursor: pointer;
    border-radius: 50%;
    background-color: #999;
    transition: all 0.3s ease;
    border: none;
}

.thumbnail-item:hover {
    background-color: #999;
}

.thumbnail-item.active {
    background-color: #225598;
    width: 14px;
    height: 14px;
}

/* Catalog Download */
.catalog-download {
    margin-top: 25px;
    text-align: center;
}

.catalog-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 36px;
    background-color: #666;
    color: #fff;
    text-decoration: none;
    border-radius: 23px;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-top: 30px;
}

.catalog-download-btn:hover {
    background-color: #1a4278;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 85, 152, 0.3);
}

.catalog-download-btn svg {
    stroke: #fff;
}

.overview-image img {
    max-width: 500px;
    width: 100%;
    height: auto;
}

.overview-info {
    flex: 1;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 42px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 30px;
}

.title-bar {
    display: inline-block;
    width: 5px;
    height: 35px;
    background: linear-gradient(to bottom, #001222 0%, #225598 100%);
}

.overview-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.overview-item h3 {
    font-size: 22px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.overview-item p {
    font-size: 18px;
    font-weight: 300;
    color: #000;
    line-height: 1.8;
    margin-bottom: 0;
    padding-left: 15px;
}

.overview-list {
    list-style: none;
    padding-left: 15px;
}

.overview-list li {
    position: relative;
    font-size: 20px;
    padding-left: 15px;
}

.overview-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #000;
}

/* Quick Navigation (Sticky) */
.product-quick-nav {
    background-color: #555;
    z-index: 100;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

/* Anchor Navigation */
.anchor-nav {
    background-color: #2a2a2a;
    border-bottom: 1px solid #404040;
    width: 100%;
    z-index: 99;
}

.anchor-nav-container {
    display: flex;
    justify-content: center;
    max-width: none;
    margin: 0;
    width: 100%;
}

.anchor-nav-spacer {
    display: none;
}

.anchor-nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2a2a2a;
    width: 100%;
}

.anchor-nav-link {
    flex: 0 0 auto;
    text-align: center;
    padding: 20px 30px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.anchor-nav-link:hover {
    color: #ffffffaa;
}

.anchor-nav-link.active {
    color: #fff;
}

.product-quick-nav.is-sticky {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
}

.quick-nav-placeholder {
    display: none;
    background-color: transparent;
}

.quick-nav-placeholder.is-active {
    display: block;
    background-color: transparent;
}

.quick-nav-inner {
    display: flex;
    justify-content: center;
    gap: 80px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 50px;
    font-size: 20px;
}

.quick-nav-link {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s ease;
}

/* Icon inside quick nav links */
.quick-nav-link .quick-nav-icon {
    height: 22px;
    width: auto;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
}

/* Ensure SVG uses current text color and transitions with hover */
.quick-nav-link .quick-nav-icon,
.quick-nav-link .quick-nav-icon path {
    fill: currentColor;
}

.quick-nav-link {
    transition: color 0.3s ease;
}

.quick-nav-link .quick-nav-icon {
    transition: fill 0.3s ease, transform 0.18s ease;
}

.quick-nav-link:hover .quick-nav-icon {
    transform: translateY(-1px);
}

.quick-nav-link:hover,
.quick-nav-link.active {
    color: #fff;
}

/* Product Detail Page Sections */
.product-page-section {
    padding: 80px 50px;
    background-color: #fff;
}

.product-page-section-dark {
    background-color: #f5f5f5;
}

.product-page-section:last-of-type {
    padding-bottom: 120px;
}

.product-page-section .section-title {
    max-width: 1200px;
    margin: 0 auto 40px;
}

/* Feature Section */
.feature-content {
    max-width: 1200px;
    margin: 0 auto;
}

.feature-intro {
    font-size: 18px;
    font-weight: 300;
    color: #000;
    line-height: 1.8;
    margin-bottom: 30px;
}

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    position: relative;
    padding-left: 20px;
    font-size: 20px;
    /* font-weight: 400; */
    color: #000;
    line-height: 2;
}

.feature-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #1a1a1a;
}

/* Specifications Section */
.specs-table-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    min-width: 900px;
}

.specs-table th,
.specs-table td {
    padding: 10px 12px;
    text-align: center;
    border: 1px solid #ddd;
    white-space: nowrap;
}

.specs-table th {
    background-color: #003966;
    color: #fff;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* 表頭第一欄(Model No.)靠左 */
.specs-table th:first-child {
    text-align: left;
}

.specs-table td {
    background-color: #fff;
    color: #000;
    text-align: center;
}

/* 資料列使用 class 控制靠左對齊 */
.specs-table td.text-left {
    text-align: left;
    white-space: normal;
}

.specs-table td.text-center {
    text-align: center;
}

/* Floor Plan Row */
.floor-plan-row td {
    padding: 15px 10px;
    background-color: #fff;
}

.floor-plan-row td img {
    max-width: 140px;
    height: auto;
    mix-blend-mode: multiply;
}

.specs-table tbody tr:nth-child(even) td {
    background-color: #f9f9f9;
}

.specs-table tbody tr:hover td {
    background-color: #eef4f7;
}

.specs-notes {
    max-width: 1200px;
    margin: 20px auto 0;
    font-size: 16px;
    color: #000;
    line-height: 1.8;
}

/* Dimension Section */
.dimension-content {
    max-width: 1200px;
    margin: 0 auto;
}

.dimension-diagram {
    text-align: center;
    margin-bottom: 50px;
}

.dimension-diagram img {
    max-width: 700px;
    height: auto;
}

.dimension-models {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.dimension-model {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.dimension-model img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.dimension-model span {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

.dimension-table-wrapper {
    overflow-x: auto;
}

.dimension-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.dimension-table th,
.dimension-table td {
    padding: 10px 15px;
    text-align: center;
    border: 1px solid #ddd;
}

.dimension-table th {
    background-color: #2d3748;
    color: #fff;
    font-weight: 500;
}

.dimension-table td {
    background-color: #fff;
    color: #000;
}

.dimension-table tbody tr:nth-child(even) td {
    background-color: #f9f9f9;
}

/* Download Section */
.download-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 600px;
    /* margin: 0 auto; */
}

.download-card {
    background-color: transparent;
}

.download-card-preview {
    padding: 0;
    margin-bottom: 10px;
}

.download-card-preview img {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 4px;
}

.download-card-info {
    padding: 0;
}

.download-card-info h3 {
    font-size: 24px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.download-card-info p {
    font-size: 16px;
    color: #000;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.download-btn {
    display: inline-block;
    padding: 12px 35px;
    background-color: transparent;
    border: 1px solid #999;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    transition: all 0.3s ease;
}

.download-btn:hover {
    background-color: #003966;
    border-color: #003966;
    color: #fff;
}

/* ===================== */
/* Footer                */
/* ===================== */

.footer {
    background-color: #333;
    padding-top: 80px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    gap: 120px;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 50px 60px;
}

.footer-info {
    max-width: 350px;
    margin-top: 10px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.footer-logo img {
    height: 51px;
    filter: brightness(0) invert(1);
}

.footer-logo span {
    font-size: 16px;
    font-weight: 500;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-left: 7px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #ffffffaa;
    font-size: 16px;
    transition: color 0.25s ease-in-out;
}

.contact-item:hover {
    color: #fff;
}

.contact-item img,
.contact-item svg {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
    opacity: 0.6;
    flex-shrink: 0;
    margin-top: 2px;
    transition: opacity 0.25s ease-in-out;
}

.contact-item:hover img,
.contact-item:hover svg {
    opacity: 1;
}

.contact-item svg {
    filter: none;
    color: rgba(255, 255, 255, 0.6);
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 60px;
    margin-top: 40px;
    flex: 1;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-col-title {
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 400;
}

.footer-col a {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.25s ease-in-out;
    position: relative;
}

.footer-col a::before {
    content: '▸';
    position: absolute;
    left: -20px;
    opacity: 0;
    color: #fff;
    transition: all 0.25s ease-in-out;
}

.footer-col a:hover {
    color: #fff;
    transform: translateX(20px);
}

.footer-col a:hover::before {
    opacity: 1;
    left: -20px;
}

.footer-col-main {
    gap: 20px;
}

.footer-main-link {
    font-weight: 500;
}

.footer-bottom {
    text-align: center;
    padding: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-size: 15px;
    color: #ffffffaa;
}

/* ===================== */
/* Menu Toggle & Mobile  */
/* ===================== */

.menu-toggle {
    display: flex;
    width: 28px;
    height: 19px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1001;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ===================== */
/* Fullscreen Menu       */
/* ===================== */

.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000;
    z-index: 999;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}

.fullscreen-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.fullscreen-menu-content {
    max-width: 1600px;
    margin: 0 auto;
    padding: 100px 60px 80px;
    display: flex;
    flex-direction: column;
    min-height: auto;
    transform: translateY(15px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transition-delay: 0.05s;
}

.fullscreen-menu.active .fullscreen-menu-content {
    transform: translateY(0);
    opacity: 1;
}



/* Menu Logo */
.menu-logo {
    margin-bottom: 75px;
    transform: translateY(15px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transition-delay: 0.08s;
}

.fullscreen-menu.active .menu-logo {
    transform: translateY(0);
    opacity: 1;
}

.menu-logo img {
    height: 40px;
    filter: brightness(0) invert(1);
}

/* Menu Sitemap */
.menu-sitemap {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    row-gap: 50px;
    flex-wrap: wrap;
    margin-top: 100px;
}

.menu-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translateY(15px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    flex: 0 0 calc(25% - 23px);
}

/* 第二列動畫延遲 */
.menu-col:nth-child(5),
.menu-col:nth-child(6),
.menu-col:nth-child(7),
.menu-col:nth-child(8) {
    flex: 0 0 calc(25% - 23px);
}

.fullscreen-menu.active .menu-col:nth-child(1) {
    transition-delay: 0.1s;
}

.fullscreen-menu.active .menu-col:nth-child(2) {
    transition-delay: 0.13s;
}

.fullscreen-menu.active .menu-col:nth-child(3) {
    transition-delay: 0.16s;
}

.fullscreen-menu.active .menu-col:nth-child(4) {
    transition-delay: 0.19s;
}

.fullscreen-menu.active .menu-col:nth-child(5) {
    transition-delay: 0.22s;
}

.fullscreen-menu.active .menu-col:nth-child(6) {
    transition-delay: 0.25s;
}

.fullscreen-menu.active .menu-col:nth-child(7) {
    transition-delay: 0.28s;
}

.fullscreen-menu.active .menu-col:nth-child(8) {
    transition-delay: 0.31s;
}

.fullscreen-menu.active .menu-col {
    transform: translateY(0);
    opacity: 1;
}

.menu-col-title {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
}

.menu-col a {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease;
    position: relative;
}

.menu-col a:hover {
    color: #fff;
}

/* Menu Contact Info */
.menu-contact-info {
    display: flex;
    justify-content: space-between;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 40px;
    margin-bottom: 40px;
    transform: translateY(15px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transition-delay: 0.3s;
}

.fullscreen-menu.active .menu-contact-info {
    transform: translateY(0);
    opacity: 1;
}

.menu-contact-item {
    display: flex;
    flex-direction: column;
}

.menu-contact-label {
    font-size: 15px;
    font-weight: 500;
    color: #ffffffaa;
    text-transform: uppercase;
}

.menu-contact-item a,
.menu-contact-item span:not(.menu-contact-label) {
    font-size: 18px;
    color: #ffffffaa;
    transition: color 0.3s ease;
}

.menu-contact-item a:hover {
    color: #fff;
}

/* ===================== */
/* Mobile Menu           */
/* ===================== */

.mobile-menu {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: rgba(0, 0, 0, 0.95);
    padding: 30px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-menu.active {
    transform: translateX(0);
}

/* Mobile Search */
.mobile-search {
    margin-bottom: 25px;
    /* padding-bottom: 20px; */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-search-form {
    display: flex;
    align-items: center;
    gap: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.mobile-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    padding: 8px 12px 8px 0;
    background: transparent;
    color: #fff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.mobile-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1.5px;
}

.mobile-search-submit {
    background: transparent;
    border: none;
    color: #ffffffaa;
    width: auto;
    height: auto;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    padding: 8px 0;
}

.mobile-search-submit:active {
    color: #fff;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mobile-nav>a,
.mobile-dropdown-toggle {
    display: block;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-dropdown-toggle {
    position: relative;
    padding-right: 28px;
}

.mobile-dropdown-toggle::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 18px;
    height: 18px;
    display: inline-block;
    background: none;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
}

.mobile-dropdown-toggle::after {
    /* SVG線條箭頭 */
    background-image: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 7L9 12L14 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
}

.mobile-dropdown.active>.mobile-dropdown-toggle::after {
    transform: translateY(-50%) rotate(180deg);
}

.mobile-dropdown-menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(.4, 0, .2, 1), opacity 0.5s cubic-bezier(.4, 0, .2, 1);
    padding-left: 20px;
    background-color: rgba(255, 255, 255, 0.05);
}

.mobile-dropdown-menu.active {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.5s cubic-bezier(.4, 0, .2, 1), opacity 0.5s cubic-bezier(.4, 0, .2, 1);
}

.mobile-dropdown-menu a {
    display: block;
    padding: 12px 15px;
    font-size: 16px;
    color: #ffffffaa;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ===================== */
/* Investor Page         */
/* ===================== */

/* Investor Section 已使用統一的 inner-section 樣式 */

.investor-container {
    margin: 0 auto;
    max-width: 1400px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 60px;
}

/* ===================== */
/* Universal Sidebar Navigation */
/* 統一的側邊欄導航樣式 - 適用於投資人專區和ESG */
/* ===================== */

/* 側邊欄容器 */
.sidebar,
.investor-sidebar,
.esg-sidebar {
    position: sticky;
    top: 60px;
    height: fit-content;
    margin-top: 20px;
    /* 漸層背景：從 #1f4566 到 #27659c，45度角 */
    background: linear-gradient(45deg, #1f4566 0%, #27659c 100%);
    /* 圓角設定 */
    border-radius: 16px;
    /* 內邊距調整 */
    padding: 30px 25px 2px;
}

/* 側邊欄標題 */
.sidebar-title,
.investor-sidebar-title,
.esg-sidebar-title {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    /* 白色文字以配合深色背景 */
    margin-bottom: 5px;
    padding-bottom: 20px;
    /* 標題下方內邊距 */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    /* 分隔線 */
    /* 讓分隔線延伸到容器邊緣（滿版） */
    margin-left: -25px;
    margin-right: -25px;
    padding-left: 25px;
    padding-right: 25px;
    /* 深灰色背景 */
    background-color: rgba(0, 0, 0, 0.2);
    margin-top: -30px;
    /* 對齊容器頂部 */
    padding-top: 30px;
    /* 恢復上方內邊距 */
    border-radius: 16px 16px 0 0;
    /* 上方圓角 */
}

/* 導航列表 */
.sidebar-nav,
.investor-nav,
.esg-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 導航項目 */
.sidebar-nav-item,
.investor-nav-item,
.esg-nav-item {
    display: flex;
    align-items: center;
    padding: 18px 0;
    color: #ffffff;
    /* 白色文字以配合深色背景 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    /* 半透明白色邊框 */
    transition: all 0.3s ease;
    position: relative;
    transform: translateX(0);
    text-decoration: none;
}

/* 移除最後一個導航項目的底線 */
.sidebar-nav-item:last-child,
.investor-nav-item:last-child,
.esg-nav-item:last-child {
    border-bottom: none;
}

/* 箭頭圖標 */
.sidebar-nav-item .nav-arrow,
.investor-nav-item .nav-arrow,
.esg-nav-item .nav-arrow {
    opacity: 0;
    margin-right: 0;
    color: #ffffff;
    /* 白色箭頭以配合深色背景 */
    transition: all 0.3s ease;
    transform: translateX(-10px);
}

/* 導航文字 */
.sidebar-nav-item .nav-text,
.investor-nav-item .nav-text,
.esg-nav-item .nav-text {
    transition: transform 0.3s ease;
}

/* Hover 效果 */
.sidebar-nav-item:not(.active):hover,
.investor-nav-item:not(.active):hover,
.esg-nav-item:not(.active):hover {
    color: #ffffff;
    /* 保持白色 */
    opacity: 0.9;
    /* 稍微降低透明度以表示 hover */
}

.sidebar-nav-item:not(.active):hover .nav-arrow,
.investor-nav-item:not(.active):hover .nav-arrow,
.esg-nav-item:not(.active):hover .nav-arrow {
    opacity: 1;
    margin-right: 8px;
    transform: translateX(0);
}

.sidebar-nav-item:not(.active):hover .nav-text,
.investor-nav-item:not(.active):hover .nav-text,
.esg-nav-item:not(.active):hover .nav-text {
    transform: translateX(5px);
}

/* Active 狀態 */
.sidebar-nav-item.active,
.investor-nav-item.active,
.esg-nav-item.active {
    color: #ffffff;
    /* 白色文字 */
    font-weight: 500;
}

.sidebar-nav-item.active .nav-arrow,
.investor-nav-item.active .nav-arrow,
.esg-nav-item.active .nav-arrow {
    opacity: 1;
    margin-right: 8px;
    transform: translateX(0);
}

/* Mobile Select (hidden on desktop) */
.sidebar-mobile-select,
.investor-mobile-select,
.esg-mobile-select {
    display: none;
}

/* 側邊欄選擇器（手機版） */
.sidebar-select,
.investor-select,
.esg-select {
    width: 100%;
    padding: 15px 20px;
    font-size: 15px;
    font-family: inherit;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.sidebar-select:focus,
.investor-select:focus,
.esg-select:focus {
    outline: none;
    border-color: #2a5a8a;
}

/* Investor Content */
.investor-content-header {
    margin-bottom: 80px;
}

.investor-content-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    text-align: center;
}

/* Investor & ESG Content Common Styles */
.investor-content h2,
.investor-content .content-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;

}

.investor-content h2:first-child,
.investor-content .content-title:first-child {
    margin-top: 0;
}

.investor-content p,
.investor-content li {
    font-size: 20px;
    line-height: 1.6;
    color: #333;
}

.investor-content p {
    margin: 0;
}

.investor-content .content-section {
    margin-bottom: 30px;
}

.investor-content .subsection-title {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 30px 0 15px 0;
}

.investor-content .content-list {
    margin: 15px 0;
    padding-left: 25px;
    list-style-type: disc;
}

.investor-content .content-list li {
    margin-bottom: 10px;
    list-style-type: disc;
}

/* 組織圖容器 */
.org-chart-container {
    margin: 40px auto;
    text-align: center;
    max-width: 1200px;
    /* 桌面版最大寬度 */
    padding: 0 20px;
}

.org-chart-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    object-fit: contain;
    /* 確保圖片完整顯示 */
}

.org-chart-hint {
    margin-top: 12px;
    font-size: 14px;
    color: #666;
    font-style: italic;
    display: none;
    /* 預設隱藏提示文字 */
}

/* Image Lightbox Modal - 圖片放大檢視 */
.image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.image-modal.active {
    display: flex;
}

.image-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    cursor: pointer;
}

.image-modal-content {
    position: relative;
    width: 95%;
    max-width: 1400px;
    max-height: 90vh;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-modal-content img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.image-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 32px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    transition: all 0.3s ease;
    padding: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.image-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* Tablet Responsive Styles - 平板版 */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .org-chart-container {
        margin: 35px auto;
        padding: 0 30px;
        max-width: 900px;
        /* 平板版較小的最大寬度 */
    }

    .org-chart-image {
        border-radius: 6px;
    }
}

/* Mobile Responsive Styles for Investor & ESG Content */
@media screen and (max-width: 768px) {

    .investor-content h2,
    .investor-content .content-title {
        font-size: 18px;
    }

    .investor-content p,
    .investor-content li {
        font-size: 16px;
    }

    .investor-content .subsection-title {
        font-size: 18px;
    }

    /* 手機版組織圖樣式 */
    .org-chart-container {
        margin: 20px auto;
        padding: 0 15px;
    }

    .org-chart-image {
        cursor: pointer;
        /* 手機版才顯示可點擊游標 */
        transition: opacity 0.3s ease;
        border-radius: 4px;
        /* 手機版使用較小的圓角 */
    }

    .org-chart-image:active {
        opacity: 0.85;
        /* 手機版點擊效果 */
    }

    .org-chart-hint {
        display: block;
        /* 手機版顯示提示文字 */
        font-size: 12px;
        margin-top: 10px;
    }

    /* 手機版 modal 樣式 */
    .image-modal-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 28px;
    }

    .image-modal-content {
        width: 98%;
        max-height: 85vh;
    }

    .image-modal-content img {
        max-height: 85vh;
    }
}

/* Extra Small Mobile - 超小螢幕手機 */
@media screen and (max-width: 480px) {
    .org-chart-container {
        margin: 15px auto;
        padding: 0 10px;
    }

    .org-chart-image {
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        /* 較淡的陰影 */
    }

    .org-chart-hint {
        font-size: 11px;
        margin-top: 8px;
    }

    /* 超小螢幕的 modal 調整 */
    .image-modal-close {
        top: 5px;
        right: 5px;
        width: 36px;
        height: 36px;
        font-size: 24px;
    }

    .image-modal-content {
        width: 100%;
        max-height: 80vh;
    }

    .image-modal-content img {
        max-height: 80vh;
    }
}

/* Revenue Toolbar */
.revenue-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.revenue-year-filter {
    display: flex;
    align-items: center;
    gap: 15px;
}

.revenue-year-filter label {
    font-size: 16px;
    font-weight: 500;
}

.year-select {
    padding: 10px 35px 10px 15px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.year-select:focus {
    outline: none;
    border-color: #2a5a8a;
}

.revenue-unit {
    letter-spacing: 0.3px;
    text-align: right;
}

/* Revenue Table */
.investor-table-wrapper {
    overflow-x: auto;
    margin-bottom: 30px;
}

.investor-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Major Shareholders Styles */
.major-shareholders-header {
    margin-bottom: 15px;
}

.major-shareholders-title {
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 700;
}

.major-shareholders-date {
    font-size: 18px;
}

.investor-table thead th {
    background: #1f4566;
    color: #fff;
    padding: 18px 20px;
    text-align: center;
    letter-spacing: 0.5px;
    font-weight: 400;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 18px;
}

.investor-table thead th.col-year {
    width: 120px;
    font-size: 18px;
    font-weight: 400;
}

.investor-table thead th.col-header {
    font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.investor-table thead th.col-amount,
.investor-table thead th.col-change {
    font-size: 18px;
}

.investor-table tbody td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
}

.investor-table tbody td:first-child {
    text-align: left;
    color: #1a1a1a;
}

.investor-table tbody tr:nth-child(odd) {
    background: #f8f8f8;
}

.investor-table tbody tr:nth-child(even) {
    background: #fff;
}

.investor-table tbody tr.highlight {
    background: #f0f5f9;
}

.investor-table tbody tr.total-row {
    background: #295a89;
}

.investor-table tbody tr.total-row td {
    color: #fff;
    font-weight: 500;
    border-bottom: none;
    padding: 18px 20px;
}

/* Financial Statements Section */

.statements-section .section-title {
    font-size: 24px;
    font-weight: 500;
    color: #1f4566;
    margin-bottom: 30px;
    padding-bottom: 12px;
    border-bottom: 3px solid #1f4566;
}

/* ===================== */
/* Investor Table Styles */
/* ===================== */

/* 統一的投資人專區表格樣式 - 適用於所有投資人頁面 */
.investor-table-wrapper {
    overflow-x: auto;
    margin-bottom: 40px;
}

.investor-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-size: 18px;
}

/* 特殊欄位樣式 */
.investor-table thead th.col-year {
    width: 100px;
}

.investor-table thead th.col-consolidated {
    font-size: 18px;
}

.investor-table thead th.col-parent {
    width: 180px;
    line-height: 1.4;
}

/* 次級表頭 - 中藍底白字 */
.investor-table thead tr.sub-header th {
    background: #295a89;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 400;
}

.investor-table thead tr.sub-header th:first-child {
    background: #295a89;
}

/* PDF 圖標相關 */
.investor-table tbody td.pdf-cell {
    padding: 15px;
}

.investor-table .pdf-link {
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.investor-table .pdf-link:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.investor-table .pdf-link img {
    width: 50px;
    height: auto;
    display: block;
}

/* ===================== */
/* 響應式表格樣式 */
/* ===================== */

/* 資料多的表格 - 手機版可左右滑動 */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 30px;
}

.table-scroll .investor-table {
    min-width: 600px;
}

/* 資料少的表格 - 自動適應寬度，不出現捲軸 */
.table-fit {
    width: 100%;
    margin-bottom: 30px;
    overflow: visible;
}

.table-fit .investor-table {
    width: 100%;
}

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

    /* 滑動表格在手機版的優化 */
    .table-scroll {
        border: 1px solid #e8e8e8;
        border-radius: 4px;
    }

    .table-scroll .investor-table {
        font-size: 14px;
        min-width: 600px;
    }

    .table-scroll .investor-table thead th {
        padding: 12px 10px;
        font-size: 14px;
        white-space: nowrap;
    }

    .table-scroll .investor-table tbody td {
        padding: 10px;
        font-size: 14px;
        white-space: nowrap;
    }

    /* 滿版表格在手機版的優化 */
    .table-fit {
        overflow: visible;
    }

    .table-fit .investor-table {
        font-size: 14px;
        width: 100%;
    }

    .table-fit .investor-table thead th {
        padding: 12px 8px;
        font-size: 14px;
    }

    .table-fit .investor-table tbody td {
        padding: 10px 8px;
        font-size: 14px;
    }
}

/* 特殊樣式：年份欄位 */
.investor-table tbody td.year-cell {
    font-weight: 500;
    background: #f8f8f8;
    text-align: center;
}

/* 文字置中的 td */
.investor-table tbody td:not(:first-child) {
    text-align: center;
}

/* ===================== */
/* Universal Inner Page Section Styles */
/* 統一的內頁 Section 樣式 - 適用於所有內頁 */
/* ===================== */

/* 通用 Section 容器 */
.inner-section,
.page-section,
.investor-section,
.guide-section,
.catalog-section,
.data-section,
.video-section,
.contact-section,
.worldwide-section,
.news-section {
    padding: 100px 20px;
    background: #d3d3d3;
    color: #000;
}

/* 灰色背景變體 */
.inner-section-alt,
.catalog-section-alt,
.data-section-alt,
.video-section-alt {
    background: #ddd;
}

/* 特殊背景色 */
.guide-section {
    background: #d3d3d3;
}

.guide-section .section-title-center {
    text-align: center;
    font-size: 42px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.news-section {
    background-color: #eee;
}

/* 通用 Container */
.inner-container,
.page-container,
.investor-container,
.guide-container,
.catalog-container,
.data-container,
.video-container,
.contact-container,
.worldwide-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 不同寬度的 Container 變體 */
.inner-container-narrow,
.data-container,
.contact-container {
    max-width: 960px;
}

.inner-container-wide,
.investor-container,
.guide-container,
.video-container {
    max-width: 1400px;
}

/* ===================== */
/* Guide Page Styles    */
/* ===================== */

/* Guide Hero 已使用統一的 inner-hero 樣式 */
/* Guide Section 已使用統一的 inner-section 樣式 */
/* Guide Container 已使用統一的 inner-container-wide 樣式 */

.guide-header {
    text-align: center;
    margin-bottom: 60px;
}

.guide-title {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 6px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.guide-desc {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
}

/* Guide Grid */
.guide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Guide Card */
.guide-card {
    background: #f8f8f8;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.guide-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.guide-card-image {
    width: 100%;
    aspect-ratio: 16/10;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.guide-card-content {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.spec-item {
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
}

.spec-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.spec-label {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px;
}

.guide-card-model {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.guide-card-type {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.guide-card-price {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
}

.price-label {
    font-size: 11px;
    font-weight: 500;
    color: #999;
}

.price-value {
    font-size: 20px;
    font-weight: 500;
}

.spec-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.spec-list li {
    padding-left: 5px;
}

.guide-card-section h4 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    text-transform: none;
}

.guide-card-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guide-card-section li {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.2px;
    position: relative;
    padding-left: 0;
}

/* ===================== */
/* Universal Button Styles */
/* 統一的按鈕樣式 - 適用於所有頁面 */
/* ===================== */

/* 篩選標籤/分類按鈕（圓角小按鈕） */
.btn-filter,
.filter-tab,
.region-tab,
.category-tab {
    display: inline-block;
    padding: 12px 40px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid #333;
    border-radius: 25px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-filter:hover,
.filter-tab:hover,
.region-tab:hover,
.category-tab:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}

.btn-filter.active,
.filter-tab.active,
.region-tab.active,
.category-tab.active {
    background: #003d6a;
    color: #fff;
    border-color: #003d6a;
}

/* 主要動作按鈕（大圓角按鈕） */
.btn-primary,
.load-more-btn,
.back-btn,
.submit-btn {
    display: inline-block;
    padding: 15px 50px;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid #333;
    border-radius: 30px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary:hover,
.load-more-btn:hover,
.back-btn:hover,
.submit-btn:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* 按鈕容器 */
.btn-group,
.filter-tabs,
.news-filter-tabs,
.region-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* ===================== */
/* News Page Styles      */
/* ===================== */

.news-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Filter Tabs - 已使用統一的按鈕樣式 */
.news-filter-tabs {
    margin-bottom: 80px;
}

/* News Grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 40px;
    row-gap: 50px;
    margin-bottom: 60px;
}

/* News Page Card Styles - Match Homepage */
.news-section .news-card {
    background-color: #fff;
    transition: all 0.5s ease;
}

.news-section .news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.news-section .news-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.news-section .news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-section .news-card:hover .news-image img {
    transform: scale(1.2);
}

.news-section .news-content {
    padding: 25px;
}

.news-section .news-category {
    display: inline-block;
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
}

.news-section .news-card-title {
    font-weight: 500;
    margin-bottom: 12px;
}

.news-section .news-card-desc {
    margin-bottom: 20px;
}

.news-section .news-date {
    font-size: 16px;
    color: #666;
    letter-spacing: 0.5px;
}

/* Load More Button */
.news-load-more {
    display: flex;
    justify-content: center;
}

/* Load More Button - 已使用統一的按鈕樣式 */

/* ===================== */
/* News Detail Page      */
/* ===================== */

.news-detail-section {
    padding: 100px 20px;
}

.news-detail-container {
    max-width: 900px;
    margin: 0 auto;
}

.news-detail-header {
    text-align: center;
    margin-bottom: 40px;
}

.news-detail-title {
    font-size: 42px;
    font-weight: 500;
    text-transform: uppercase;
}

.news-detail-date {
    font-size: 18px;
    font-weight: 400;
    color: #666
}

.news-detail-content {
    margin-bottom: 60px;
}

.news-detail-image {
    width: 100%;
    margin-bottom: 40px;
}

.news-detail-image img {
    width: 100%;
    height: auto;
    display: block;
}

.news-detail-info p {
    margin-bottom: 5px;
}


.news-detail-back {
    display: flex;
    justify-content: center;
}

/* Back Button - 已使用統一的按鈕樣式 */

/* ===================== */
/* Catalog Page          */
/* ===================== */

/* Catalog Hero 已使用統一的 inner-hero 樣式 */
/* Catalog Section 已使用統一的 inner-section 樣式 */
/* Catalog Container 已使用統一的 inner-container 樣式 */

.catalog-header {
    position: relative;
    margin-bottom: 20px;
    padding-left: 30px;
}

.catalog-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 6px;
    height: 80%;
    background: linear-gradient(to bottom, #003966 0%, #0066b3 100%);
}

.catalog-title {
    font-size: 42px;
    font-weight: 500;
    text-transform: uppercase;
}

.catalog-desc {
    margin-bottom: 50px;
}

/* Catalog Grid */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(216px, 1fr));
    gap: 40px 30px;
}

/* Catalog Item */
.catalog-item {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.catalog-item:hover {
    transform: translateY(-5px);
}

.catalog-item-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 322/447;
    background: #fff;
    overflow: hidden;
    margin-bottom: 15px;
}

.catalog-item-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border: 1px solid #ccc;
}

/* Overlay 效果 - 滑鼠懸停時顯示 */
.catalog-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 64, 113, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.catalog-item:hover .catalog-item-overlay {
    opacity: 1;
}

.catalog-download-text {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
}

/* Catalog Item Info */
.catalog-item-info {
    flex: 1;
}

.catalog-item-title {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 5px;
}

.catalog-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.catalog-item-divider {
    color: #ddd;
}


/* ===================== */
/* Data Download Page    */
/* ===================== */

/* Data Hero 已使用統一的 inner-hero 樣式 */
/* Data Section 已使用統一的 inner-section 樣式 */
/* Data Container 已使用統一的 inner-container-narrow 樣式 */

.data-header {
    position: relative;
    margin-bottom: 20px;
    padding-left: 30px;
}

.data-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 6px;
    height: 80%;
    background: linear-gradient(to bottom, #003966 0%, #0066b3 100%);
}

.data-title {
    font-size: 42px;
    font-weight: 500;
    text-transform: uppercase;
}

.data-desc {
    margin-bottom: 50px;
}

/* Data Table */
.data-table-wrapper {
    margin-bottom: 40px;
}

.data-table-wrapper:last-child {
    margin-bottom: 0;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

/* 表格標題行 */
.data-table thead tr {
    background: #003d6a;
}

.data-table-header {
    padding: 18px 25px;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    text-transform: uppercase;
    color: #fff;
}

.data-table-header:first-child {
    width: 60px;
    padding: 18px 15px;
    text-align: center;
}

.data-table-header:nth-child(2),
.data-table-header:nth-child(3) {
    padding-left: 0;
    padding-right: 0;
}

.data-table-header:nth-child(3) {
    text-align: center;
}

.data-table-right {
    text-align: right;
}

/* 表格內容行 */
.data-table-row {
    border-bottom: 1px solid #e5e5e5;
    transition: background 0.2s ease;
    cursor: pointer;
    background: #fff;
}

.data-table-row:nth-child(even) {
    background: #f5f5f5;
}

.data-table-row:hover {
    background: #dbe5f1;
}

.data-table-cell {
    padding: 20px 25px;
    font-size: 18px;

}

.data-table-cell:first-child {
    width: 60px;
    padding: 20px 15px;
    text-align: center;
}

.data-table-cell:nth-child(2),
.data-table-cell:nth-child(3) {
    padding-left: 0;
    padding-right: 0;
}

.data-table-cell:nth-child(3) {
    text-align: center;
}

.data-table-cell a {
    pointer-events: none;
}

/* 下載連結樣式 */
.data-download-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color 0.3s ease;
}

.data-download-link:hover {
    color: #003966;
}

/* ===================== */
/* Video Page            */
/* ===================== */

/* Video Hero 已使用統一的 inner-hero 樣式 */
/* Video Section 已使用統一的 inner-section 樣式 */
/* Video Container 已使用統一的 inner-container-wide 樣式 */

.video-header {
    position: relative;
    margin-bottom: 20px;
    padding-left: 30px;
}

.video-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 6px;
    height: 80%;
    background: linear-gradient(to bottom, #003966 0%, #0066b3 100%);
}

.video-title {
    font-size: 42px;
    font-weight: 500;
    text-transform: uppercase;
}

.video-desc {
    margin-bottom: 50px;
}

/* Video Grid */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Video Item */
.video-item {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 15px;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 半透明黑色遮罩 */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.4s ease;
}

/* Hover 效果 - 圖片放大 + 漸層藍色遮罩 */
.video-item:hover svg {
    transform: scale(1.1);
}

/* .video-item:hover .video-overlay {
    background: linear-gradient(135deg, rgba(0, 57, 102, 0.85) 0%, rgba(52, 152, 219, 0.85) 100%);
} */

/* 播放按鈕 */
.video-play-btn {
    transition: transform 0.3s ease;
}

.video-item:hover .video-play-btn {
    transform: scale(1.1);
}

.video-play-btn svg {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Video Info */
.video-info {
    padding: 0 5px;
}

.video-item-title {
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 400;
}

.video-item-subtitle {
    font-size: 16px;
    color: #333;

}

/* Video Modal - 跳窗 */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.video-modal.active {
    display: flex;
}

.video-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    z-index: 10000;
}

.video-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 50px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease;
    padding: 0;
    width: 50px;
    height: 50px;
}

.video-modal-close:hover {
    color: #3498db;
}

.video-modal-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 比例 */
    background: #000;
}

.video-modal-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ===================== */
/* Contact Page          */
/* ===================== */

/* Contact Hero 已使用統一的 inner-hero 樣式 */
/* Contact Section 已使用統一的 inner-section 樣式 */
/* Contact Container 已使用統一的 inner-container-narrow 樣式 */

.contact-note {
    color: #666;
    text-align: center;
}

.contact-note.btn-filter {
    display: inline-block;
    margin-bottom: 0;
}

.contact-note.btn-filter a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-note.btn-filter:hover a {
    color: #fff;
}

.contact-note:not(.btn-filter) {
    margin-bottom: 40px;
}

.required {
    color: #e74c3c;
    font-family: verdana;
}

/* Contact Form */
.contact-form {
    width: 100%;
}

.form-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    margin-bottom: 0;
    padding-top: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
    align-items: start;
}

.form-row:first-of-type {
    padding-top: 0;
}

.form-row:last-of-type {
    border-bottom: none;
}

.form-label {
    padding-top: 15px;
    text-align: left;
    font-weight: 400;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 15px 18px;
    font-size: 16px;
    background-color: #efefef;
    border: none;
    border-radius: 0;
    font-family: 'Alexandria', 'Noto Sans TC', '思源黑體', sans-serif;
    transition: background-color 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    background-color: #e8e8e8;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #efefef;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    background-color: #e8e8e8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Submit Button */
.form-submit {
    margin-top: 40px;
}

.btn-submit {
    width: 100%;
    padding: 20px 30px;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    background: #333;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-submit:hover {
    background: #003966;
}

/* ===================== */
/* Worldwide Page        */
/* ===================== */

.worldwide-hero {
    position: relative;
    width: 100%;
    min-height: 49vh;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.worldwide-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

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

/* Desktop and Mobile Banner Control for Worldwide */
.worldwide-hero-bg .desktop-only {
    display: block;
}

.worldwide-hero-bg .mobile-only {
    display: none;
}

@media screen and (max-width: 768px) {
    .worldwide-hero-bg .desktop-only {
        display: none;
    }

    .worldwide-hero-bg .mobile-only {
        display: block;
    }
}

.worldwide-hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.worldwide-hero-content {
    text-align: center;
    z-index: 1;
    padding: 60px 50px 0;
}

.worldwide-hero-title {
    font-size: 62px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.worldwide-hero-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.8;
    text-transform: uppercase;
}

/* Worldwide Section */
.worldwide-section {
    background-color: #f5f5f5;
    padding: 100px 20px;
}

.worldwide-container {
    max-width: 1200px;
    margin: 0 auto;
}

.world-map-wrapper {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.world-map-image {
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply
}

.map-icon {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.map-icon img {
    width: 40px;
    height: 40px;
}

.map-icon-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #003d6a;
    color: #fff;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    margin-bottom: 12px;
    pointer-events: none;
}

.map-icon-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #003d6a;
}

.map-icon:hover .map-icon-tooltip {
    opacity: 1;
    visibility: visible;
}

.map-icon:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.map-icon:hover img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(2000%) hue-rotate(195deg) brightness(80%) contrast(95%);
}

/* Headquarters Map Icon - Highlighted */
.map-icon-hq {
    z-index: 20;
    animation: bounce-hq 1.5s ease-in-out infinite;
}

.map-icon-hq::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 12px;
    background: rgba(0, 61, 106, 0.3);
    border-radius: 50%;
    filter: blur(3px);
    animation: shadow-scale 1.5s ease-in-out infinite;
}

.map-icon-hq img {
    width: 50px;
    height: 50px;
}

.map-icon-hq:hover {
    transform: translate(-50%, -50%) scale(1.2);
    animation-play-state: paused;
}

.map-icon-hq:hover::after {
    animation-play-state: paused;
}

.map-icon-hq .map-icon-tooltip {
    background: #003d6a;
    font-weight: 600;
}

.map-icon-hq .map-icon-tooltip::after {
    border-top-color: #003d6a;
}

@keyframes bounce-hq {

    0%,
    100% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-50%, calc(-50% - 10px));
    }
}

@keyframes shadow-scale {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translateX(-50%) scale(0.7);
        opacity: 0.2;
    }
}

/* Region Tabs - 已使用統一的按鈕樣式 */
.region-tabs {
    margin-bottom: 60px;
}

/* Agents Grid */
.agents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Headquarters Card - 置中顯示 */
.agent-card[data-region="headquarters"] {
    grid-column: 1 / -1;
    max-width: 600px;
    margin: 0 auto;
}

/* Agent Card */
.agent-card {
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.agent-card-header {
    background: #333;
    padding: 20px 35px;
    border-radius: 15px 15px 0 0;
    display: flex;
    align-items: center;
    gap: 0;
}

.agent-left-col {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding-right: 25px;
    border-right: 1px solid #666;
}

.agent-right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 25px;
}

.agent-flag {
    flex-shrink: 0;
}

.flag-icon {
    width: 55px;
    height: auto;
    display: block;
}

.agent-country {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
}

.agent-company {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
}

.agent-card-title {
    color: #fff;
    font-weight: 400;
    margin: 0;
}

.agent-card-body {
    padding: 25px 35px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agent-info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: 18px;
    color: #333;
}

.agent-info-item a {
    color: #333;
    transition: color 0.3s ease;
}

.agent-info-item a:hover {
    color: #2a5a8a;
}

/* Agent Icon - 深灰色 */
.agent-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 4px;
    filter: brightness(0) saturate(100%) invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

/* ===================== */
/* RWD - Responsive Design */
/* ===================== */

/* ===================== */
/* 1366px - 中等桌面螢幕   */
/* ===================== */
@media screen and (max-width: 1366px) {
    .header {
        padding: 20px 40px;
    }

    /* 全螢幕選單調整 - 適應 1366x768 解析度 */
    .fullscreen-menu {
        overflow-y: auto;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .fullscreen-menu::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .fullscreen-menu-content {
        padding: 60px 50px 40px;
        min-height: auto;
    }

    .menu-logo {
        margin-bottom: 30px;
    }

    .menu-sitemap {
        margin-top: 45px;
        gap: 22px;
        row-gap: 28px;
    }

    .menu-col {
        gap: 8px;
    }

    .menu-col-title {
        font-size: 19px;
        margin-bottom: 2px;
    }

    .menu-col a {
        font-size: 17px;
        line-height: 1.4;
    }

    .menu-contact-info {
        padding-top: 28px;
        margin-top: 28px;
        margin-bottom: 20px;
    }

    .menu-contact-label {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .menu-contact-item {
        gap: 4px;
    }

    .menu-contact-item a,
    .menu-contact-item span:not(.menu-contact-label) {
        font-size: 16px;
        line-height: 1.4;
    }

    /* News Page 調整 - 適應 1366x768 解析度 */
    .news-section {
        padding: 80px 30px;
    }

    .news-container {
        max-width: 100%;
        padding: 0 10px;
    }

    .news-filter-tabs {
        margin-bottom: 60px;
    }

    .news-grid {
        gap: 25px;
        row-gap: 35px;
    }

    .news-section .news-card {
        width: 100%;
        /* 覆寫固定寬度，讓卡片適應 grid */
    }

    .news-section .news-content {
        padding: 18px;
    }

    .news-section .news-card-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .news-section .news-card-desc {
        font-size: 14px;
        margin-bottom: 12px;
        line-height: 1.5;
    }

    .news-section .news-category {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .news-section .news-date {
        font-size: 14px;
    }

    /* 首頁新聞 slider 在 1024px 以下顯示2則 */
    .news-slider-wrapper {
        max-width: 100%;
        overflow: visible;
        padding: 0 60px;
    }

    .news-slider-wrapper-inner {
        width: 760px;
        max-width: 100%;
    }

    .news-list {
        padding: 0;
    }

    .news-list .news-card {
        width: 360px;
    }

    .news-arrow-left {
        left: 0;
    }

    .news-arrow-right {
        right: 0;
    }

    /* 首頁最新消息 - 1366 解析度顯示 3 則新聞 */
    .news-list .news-card {
        width: 395px;
    }

    .news-slider-wrapper-inner {
        width: 1265px;
    }

    /* Investor Pages 調整 - 適應 1366x768 解析度 */
    .investor-section {
        padding: 80px 30px;
    }

    .investor-container {
        max-width: 100%;
        grid-template-columns: 240px 1fr;
        gap: 40px;
        padding: 0 10px;
    }

    .investor-table-wrapper {
        margin-bottom: 30px;
    }

    .investor-table {
        width: 100%;
        table-layout: auto;
        /* 讓表格自動調整欄位寬度 */
    }

    /* 覆寫 inline style，允許文字折行 */
    .investor-table thead th,
    .investor-table tbody td {
        white-space: normal !important;
        word-wrap: break-word;
        word-break: break-word;
    }

    .investor-table thead th {
        padding: 14px 10px;
    }

    .investor-table tbody td {
        padding: 12px 10px;
        line-height: 1.5;
    }

    /* 保持圖片連結居中 */
    .investor-table .file-link {
        display: inline-flex;
        justify-content: center;
    }

    .about-section {
        padding: 70px 80px;
    }

    .philosophy-section,
    .manufacturing-section {
        padding: 70px 80px;
    }

    .partner-content {
        padding: 150px 180px 120px;
    }

    .footer-container {
        padding: 0 50px 60px;
        gap: 100px;
    }

    .footer-nav {
        gap: 30px 50px;
    }
}

/* ===================== */
/* 1024px - 小桌面/平板橫向 */
/* ===================== */
@media screen and (max-width: 1024px) {
    .news-header {
        padding: 40px 30px 30px;
    }

    .news-header-buttons {
        padding: 0 30px 40px;
        gap: 15px;
    }

    .menu-search {
        right: 50px;
    }

    .fullscreen-menu-content {
        padding: 100px 50px 40px;
    }

    .menu-logo {
        margin-bottom: 50px;
    }

    .menu-sitemap {
        gap: 20px;
        row-gap: 35px;
    }

    .menu-col {
        gap: 14px;
        flex: 0 0 calc(25% - 15px);
    }

    .menu-contact-info {
        padding-top: 40px;
        margin-top: 40px;
        flex-wrap: wrap;
        gap: 30px;
    }

    .menu-contact-item {
        flex: 0 0 calc(25% - 23px);
    }

    .product-quick-nav.is-sticky {
        top: 70px;
    }

    .header {
        padding: 15px 30px;
    }

    .about-section {
        padding: 60px 50px;
    }

    .philosophy-section,
    .manufacturing-section {
        padding: 50px 30px;
    }

    .section-title-center {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .about-intro-image {
        margin: 40px 0;
    }

    .about-certifications img {
        height: 60px;
    }

    .about-container {
        gap: 30px;
    }

    .about-title {
        font-size: 26px;
    }

    .about-divider {
        margin: 0 30px;
    }

    .partner-content {
        padding: 100px 50px;
    }

    .stat-number {
        font-size: 90px;
    }

    .adv-container {
        gap: 50px;
    }

    .footer-container {
        padding: 0 50px 60px;
    }

    .footer-nav {
        gap: 40px;
    }

    /* Catalog Page */
    .catalog-hero {
        height: 350px;
    }

    .catalog-hero-title {
        font-size: 36px;
    }

    .catalog-hero-desc {
        font-size: 13px;
    }

    .catalog-section {
        padding: 60px 50px;
    }

    .catalog-title {
        font-size: 28px;
    }

    .catalog-desc {
        font-size: 15px;
        margin-bottom: 40px;
    }

    .catalog-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 35px 25px;
    }

    /* Data Download Page */
    .data-hero {
        height: 350px;
    }

    .data-hero-title {
        font-size: 36px;
    }

    .data-hero-desc {
        font-size: 13px;
    }

    .data-section {
        padding: 60px 50px;
    }

    .data-title {
        font-size: 28px;
    }

    .data-desc {
        font-size: 15px;
        margin-bottom: 40px;
    }

    .data-table-header {
        padding: 16px 20px;
        font-size: 15px;
    }

    .data-table-cell {
        padding: 18px 20px;
        font-size: 14px;
    }

    .data-download-link {
        font-size: 13px;
    }

    /* Video Page */
    .video-hero {
        height: 350px;
    }

    .video-hero-title {
        font-size: 36px;
    }

    .video-hero-desc {
        font-size: 13px;
    }

    .video-section {
        padding: 60px 50px;
    }

    .video-title {
        font-size: 28px;
    }

    .video-desc {
        font-size: 15px;
        margin-bottom: 40px;
    }

    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
    }

    .video-modal-content {
        width: 85%;
    }

    .video-modal-close {
        font-size: 40px;
        top: -45px;
    }

    /* Contact Page */
    .contact-hero {
        height: 350px;
    }

    .contact-hero-title {
        font-size: 36px;
    }

    .contact-hero-desc {
        font-size: 13px;
    }

    .contact-section {
        padding: 60px 50px 80px;
    }

    .form-row {
        grid-template-columns: 180px 1fr;
        gap: 15px;
    }
}

/* ===================== */
/* 900px - 手機選單狀態   */
/* ===================== */
@media screen and (max-width: 900px) {
    .header.mobile-open {
        background: #000 !important;
        transition: background 0.3s;
    }
}

/* ===================== */
/* 768px - 平板直向      */
/* ===================== */
@media screen and (max-width: 768px) {

    /* 手機版基本文字大小 */
    body {
        font-size: 16px;
    }

    .menu-search {
        top: 80px;
        right: 30px;
    }

    .menu-toggle {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }

    .nav-wrapper {
        gap: 20px;
    }

    .header-right {
        gap: 20px;
    }

    .logo img {
        height: 35px;
    }

    /* Products List */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .products-list-section {
        padding: 60px 30px 80px;
    }

    .guide-button {
        font-size: 13px;
        padding: 10px 24px;
        max-width: 100%;
    }

    .guide-text {
        white-space: normal;
        font-size: 12px;
    }

    /* Product Detail Page */
    .product-hero {
        padding: 140px 30px 60px;
    }

    .product-hero-title {
        font-size: 48px;
        letter-spacing: 5px;
    }

    .product-hero-desc {
        font-size: 12px;
    }

    .product-detail-section {
        padding: 40px 30px 0;
    }

    .product-overview {
        flex-direction: column;
        gap: 40px;
    }

    .overview-image img {
        max-width: 400px;
    }

    .overview-content {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .quick-nav-inner {
        gap: 40px;
        padding: 20px 30px;
    }

    .quick-nav-link {
        font-size: 13px;
    }

    .product-page-section {
        padding: 60px 30px;
    }

    .download-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Slider */
    .slider-arrow {
        width: 40px;
        height: 40px;
    }

    .slider-arrow svg {
        width: 32px;
        height: 32px;
    }

    .slider-arrow-prev {
        left: 15px;
    }

    .slider-arrow-next {
        right: 15px;
    }

    .slide-content {
        bottom: 90px;
    }

    .slide-content h1,
    .slide-content h2 {
        font-size: 48px;
        letter-spacing: 4px;
    }

    .slide-content p {
        font-size: 14px;
        letter-spacing: 2px;
    }

    /* About Section */
    .about-section {
        padding: 50px 30px;
    }

    .about-container {
        flex-direction: column;
        text-align: left;
    }

    .about-left {
        padding-right: 0;
    }

    .about-divider {
        width: 80px;
        height: 1px;
        margin: 0 auto;
    }

    .about-right {
        flex-direction: column;
        gap: 30px;
    }

    .about-content {
        padding-right: 0;
    }

    /* Product Section - Tablet */
    .product-card-title {
        font-size: 24px;
    }

    .product-card-desc {
        font-size: 13px;
    }

    .product-card-info {
        padding: 0 20px;
        bottom: 40px;
    }

    /* News Section */
    .news-title {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .news-list {
        display: flex;
        overflow-x: auto;
        gap: 30px;
        padding: 0 80px 20px;
    }

    .news-card {
        flex: 0 0 calc(50% - 15px);
        width: calc(50% - 15px);
    }

    /* Advantages Section */
    .adv-section {
        padding: 80px 30px;
    }

    .adv-container {
        flex-wrap: wrap;
        gap: 40px;
        justify-content: center;
    }

    .adv-item {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }

    /* Partner Section */
    .partner-content {
        padding: 80px 30px;
    }

    .partner-stats {
        gap: 50px;
    }

    .stat-number {
        font-size: 70px;
    }

    /* Investor Section */
    .investor-content {
        max-width: 768px;
        padding: 40px;
    }

    .investor-title {
        font-size: 32px;
    }

    .investor-links {
        gap: 40px;
    }

    /* Footer */
    .footer-container {
        flex-direction: column;
        gap: 50px;
        padding: 0 30px 60px;
    }

    .footer-info {
        max-width: 100%;
    }

    .footer-nav {
        flex-wrap: wrap;
        gap: 30px 50px;
    }

    /* Guide Page */
    .guide-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .guide-hero {
        height: 250px;
    }

    .guide-hero-title {
        font-size: 36px;
        letter-spacing: 4px;
        margin-bottom: 15px;
    }

    .guide-hero-subtitle {
        font-size: 12px;
    }

    .guide-section {
        padding: 40px 20px 60px;
    }

    .guide-section .section-title-center {
        font-size: 22px;
        margin-bottom: 30px;
    }

    .guide-title {
        font-size: 28px;
        letter-spacing: 3px;
        margin-bottom: 15px;
    }

    .guide-desc {
        font-size: 12px;
    }

    .guide-card-content {
        padding: 25px;
    }

    .guide-card-model {
        font-size: 15px;
    }

    .guide-card-type {
        font-size: 14px;
    }

    .price-value {
        font-size: 18px;
    }

    .guide-card-section h4 {
        font-size: 14px;
    }

    .guide-card-section li {
        font-size: 14px;
    }

    /* News Page */
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        row-gap: 30px;
        padding: 20px;
    }

    .news-hero {
        height: 250px;
    }

    .news-hero-title {
        font-size: 36px;
        letter-spacing: 4px;
        margin-bottom: 15px;
    }

    .news-hero-subtitle {
        font-size: 9px;
    }

    .news-section {
        padding: 40px 20px 60px;
    }

    .news-container {
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .news-filter-tabs {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 30px;
        margin-bottom: 35px;
    }

    .filter-tab {
        padding: 10px 20px;
        font-size: 14px;
    }

    .news-section .news-card {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    .news-section .news-content {
        padding: 20px 15px;
    }

    .news-section .news-card-title {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .news-section .news-category,
    .news-section .news-date {
        font-size: 14px;
    }

    .news-section .news-card-desc {
        font-size: 16px;
    }

    .load-more-btn {
        padding: 10px 40px;
        font-size: 12px;
    }

    /* News Detail Page */
    .news-detail-section {
        padding: 40px 20px 80px;
    }

    .news-detail-title {
        font-size: 22px;
    }

    .news-detail-date {
        font-size: 14px;
    }

    .news-detail-header {
        margin-bottom: 30px;
    }

    .news-detail-content {
        margin-bottom: 40px;
    }

    .news-detail-image {
        margin-bottom: 30px;
    }

    .news-detail-info-item {
        font-size: 13px;
    }

    .info-label {
        min-width: 70px;
    }

    .back-btn {
        padding: 10px 40px;
    }

    /* Catalog Page */
    .catalog-hero {
        height: 300px;
    }

    .catalog-hero-content {
        padding: 0 30px;
    }

    .catalog-hero-title {
        font-size: 28px;
        letter-spacing: 2px;
        margin-bottom: 15px;
    }

    .catalog-hero-desc {
        font-size: 12px;
        line-height: 1.5;
    }

    .catalog-section {
        padding: 40px 20px 60px;
    }

    .catalog-title {
        font-size: 22px;
        margin-top: 20px;
    }

    .catalog-desc {
        font-size: 16px;
        margin-bottom: 35px;
    }

    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 15px;
    }

    .catalog-item-title {
        font-size: 16px;
    }

    .catalog-item-meta {
        font-size: 14px;
    }

    .catalog-download-text {
        font-size: 16px;
    }

    /* Data Download Page */
    .data-hero {
        min-height: 300px;
        max-height: 300px;
    }

    .data-hero-content {
        padding: 60px 20px 0;
    }

    .data-hero-title {
        font-size: 32px;
        letter-spacing: 2px;
        margin-bottom: 15px;
    }

    .data-hero-desc {
        font-size: 12px;
        line-height: 1.5;
    }

    .data-section {
        padding: 40px 20px 60px;
    }

    .data-title {
        font-size: 22px;
        margin-top: 20px;
    }

    .data-desc {
        font-size: 16px;
        margin-bottom: 35px;
    }

    .data-table-wrapper {
        margin-bottom: 30px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 600px;
    }

    .data-table-header {
        padding: 14px 15px;
        font-size: 14px;
    }

    .data-table-header:first-child {
        padding: 14px 10px;
    }

    .data-table-header:nth-child(2),
    .data-table-header:nth-child(3) {
        padding-left: 0;
        padding-right: 0;
    }

    .data-table-header:nth-child(3) {
        text-align: center;
    }

    .data-table-cell {
        padding: 16px 12px;
        font-size: 16px;
    }

    .data-table-cell:first-child {
        padding: 16px 10px;
    }

    .data-table-cell:nth-child(2),
    .data-table-cell:nth-child(3) {
        padding-left: 0;
        padding-right: 0;
    }

    .data-table-cell:nth-child(3) {
        text-align: center;
    }

    .data-download-link {
        font-size: 12px;
    }

    /* Video Page */
    .video-hero {
        min-height: 300px;
        max-height: 300px;
    }

    .video-hero-content {
        padding: 60px 20px 0;
    }

    .video-hero-title {
        font-size: 32px;
        letter-spacing: 2px;
        margin-bottom: 15px;
    }

    .video-hero-desc {
        font-size: 12px;
        line-height: 1.5;
    }

    .video-section {
        padding: 40px 20px 60px;
    }

    .video-title {
        font-size: 22px;
        margin-top: 20px;
    }

    .video-desc {
        font-size: 16px;
        margin-bottom: 35px;
    }

    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .video-item-title {
        font-size: 16px;
    }

    .video-item-subtitle {
        font-size: 16px;
    }

    .video-play-btn svg {
        width: 50px;
        height: 50px;
    }

    .video-modal-content {
        width: 95%;
    }

    .video-modal-close {
        font-size: 35px;
        top: -40px;
    }

    /* Contact Page */
    .contact-hero {
        min-height: 300px;
        max-height: 300px;
    }

    .contact-hero-content {
        padding: 60px 20px 0;
    }

    .contact-hero-title {
        font-size: 32px;
        letter-spacing: 2px;
        margin-bottom: 15px;
    }

    .contact-hero-desc {
        font-size: 12px;
        line-height: 1.5;
    }

    .contact-section {
        padding: 40px 20px 60px;
    }

    .contact-title {
        font-size: 22px;
    }

    .contact-header {
        margin-bottom: 10px;
    }

    .contact-note {
        font-size: 16px;
        margin-bottom: 35px;
        margin-top: 20px;
    }

    .contact-note.btn-filter {
        border-radius: 50px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 0;
        padding-top: 12px;
        padding-bottom: 12px;
        border-bottom: none;
    }

    .form-row:first-of-type {
        padding-top: 0;
    }

    .form-label {
        text-align: left;
        padding-top: 0;
        font-size: 16px;
    }

    .form-input,
    .form-select,
    .form-textarea {
        padding: 14px 16px;
        font-size: 16px;
    }

    .form-submit {
        margin-top: 30px;
    }

    .btn-submit {
        padding: 16px 25px;
        font-size: 16px;
    }

    /* Worldwide Page */
    .worldwide-hero {
        height: 280px;
    }

    .worldwide-hero-title {
        font-size: 32px;
        letter-spacing: 2px;
    }

    .worldwide-hero-subtitle {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .worldwide-hero-desc {
        font-size: 11px;
    }

    .worldwide-section {
        padding: 40px 20px 60px;
    }

    .world-map-wrapper {
        margin-bottom: 10px;
    }

    .region-tabs {
        gap: 8px;
        margin-bottom: 40px;
    }

    .region-tab {
        padding: 8px 20px;
        font-size: 14px;
    }

    .agent-card-header {
        padding: 15px 20px;
        border-radius: 20px 20px 0 0;
        gap: 0;
    }

    .agent-left-col {
        padding-right: 15px;
        gap: 8px;
    }

    .agent-right-col {
        padding-left: 15px;
        gap: 4px;
    }

    .flag-icon {
        width: 50px;
    }

    .agent-country {
        font-size: 12px;
    }

    .agent-company {
        font-size: 14px;
    }

    .agent-card-title {
        font-size: 14px;
    }

    .agent-card-body {
        padding: 20px;
        gap: 12px;
    }

    .agent-card {
        border-radius: 20px;
    }

    .agent-info-item {
        font-size: 15px;
    }

    .agent-icon {
        width: 16px;
        height: 16px;
    }

    /* Investor Page */
    .investor-hero {
        height: 280px;
    }

    .investor-hero-title {
        font-size: 28px;
        letter-spacing: 4px;
    }

    .investor-hero-desc {
        font-size: 11px;
    }

    .investor-section {
        padding: 40px 20px 60px;
    }

    .investor-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .investor-sidebar {
        position: static;
        width: 100%;
        padding: 0;
        /* 手機版移除桌面版的樣式 */
        background: none;
        border-radius: 0;
        margin-top: 0;
    }

    /* 統一側邊欄手機版樣式 */
    .sidebar,
    .esg-sidebar {
        position: static;
        width: 100%;
        padding: 0;
        background: none;
        border-radius: 0;
        margin-top: 0;
    }

    .investor-sidebar-title {
        font-size: 22px;
        text-align: center;
        padding: 0;
        /* 手機版標題樣式調整 */
        color: #1a1a1a;
        background: none;
        border-bottom: none;
        margin: 0 0 20px 0;
        border-radius: 0;
    }

    /* 統一側邊欄標題手機版樣式 */
    .sidebar-title,
    .esg-sidebar-title {
        font-size: 22px;
        text-align: center;
        padding: 0;
        color: #1a1a1a;
        background: none;
        border-bottom: none;
        margin: 0 0 20px 0;
        border-radius: 0;
    }

    /* Hide desktop nav, show mobile select */
    .investor-nav {
        display: none;
    }

    .sidebar-nav,
    .esg-nav {
        display: none;
    }

    .investor-mobile-select {
        display: block;
        width: 100%;
    }

    .sidebar-mobile-select,
    .esg-mobile-select {
        display: block;
        width: 100%;
    }

    .investor-select {
        width: 100%;
        padding: 12px 40px 12px 15px;
        font-size: 14px;
        background-position: right 10px center;
        box-sizing: border-box;
    }

    .sidebar-select,
    .esg-select {
        width: 100%;
        padding: 12px 40px 12px 15px;
        font-size: 14px;
        background-position: right 10px center;
        box-sizing: border-box;
    }

    main.investor-content {
        padding: 0;
        min-width: 0;
    }

    .investor-content-header {
        margin-bottom: 20px;
        padding: 0;
    }

    .investor-content-title {
        font-size: 22px;
        text-align: center;
    }

    .revenue-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 0;
        margin-bottom: 20px;
    }

    .revenue-unit {
        font-size: 14px;
        text-align: left;
    }

    .revenue-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0;
    }

    .investor-table {
        font-size: 14px;
        min-width: 100%;
        width: 100%;
    }

    .investor-table thead th {
        padding: 12px 10px;
    }

    .investor-table tbody td {
        padding: 10px;
    }

    /* Investor Table - Tablet (for multi-column tables) */
    .investor-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .investor-table {
        font-size: 14px;
        min-width: 700px;
    }

    .investor-table thead th {
        padding: 14px 12px;
        font-size: 14px;
    }

    .investor-table tbody td {
        padding: 15px 12px;
    }

    .investor-table .pdf-link img {
        width: 40px;
    }

    .statements-section .section-title {
        font-size: 22px;
    }

    .menu-search {
        display: none;
    }

    .header {
        padding: 15px 20px;
    }

    /* Page Hero */
    .page-hero {
        min-height: 350px;
        max-height: 450px;
    }

    .page-hero-title {
        font-size: 42px;
        letter-spacing: 2px;
    }

    .page-hero-desc {
        font-size: 11px;
    }

    .page-hero-content {
        padding: 40px 30px 0;
    }

    .page-hero-title {
        margin-bottom: 25px;
    }

    .page-breadcrumb {
        padding: 12px 20px;
    }

    .breadcrumb-inner {
        font-size: 12px;
    }

    /* Products List */
    .products-list-section {
        padding: 40px 20px 60px;
    }

    .products-list-title {
        font-size: 28px;
    }

    .products-list-header {
        margin-bottom: 40px;
    }

    .guide-button {
        padding: 10px 20px;
        gap: 8px;
        max-width: 100%;
    }

    .guide-arrow {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: -22px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 50px;
    }

    .product-card {
        width: 100%;
        height: auto;
        padding: 30px 25px;
        min-height: 173px;
        overflow: visible;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    .product-card::before {
        display: none;
    }

    .product-card-info {
        flex: 0 0 auto;
        width: auto;
        max-width: 50%;
        padding-right: 20px;
        z-index: 2;
        position: relative;
        top: 0;
    }

    .product-card-name {
        font-size: 28px;
        line-height: 1.2;
        white-space: normal;
    }

    .product-card-series {
        font-size: 15px;
        line-height: 1.4;
        white-space: normal;
    }

    .product-card-image {
        flex: 0 0 auto;
        width: 50%;
        position: relative;
        right: auto;
        bottom: auto;
        height: auto;
    }

    .product-card-image img {
        max-width: 100%;
        max-height: 160%;
    }

    /* Override for products-list-section: image on top, text below */
    .products-list-section .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 100%;
    }

    .products-list-section .products-grid .product-card {
        display: flex;
        flex-direction: column;
        padding: 0;
        height: auto;
        min-height: 200px;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }

    .products-list-section .products-grid .product-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
        z-index: 2;
        pointer-events: none;
    }

    .products-list-section .products-grid .product-card-image {
        position: relative;
        width: 100%;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        flex-shrink: 0;
    }

    .products-list-section .products-grid .product-card-image img {
        padding: 8px;
        padding-top: 12px;
    }

    .products-list-section .products-grid .product-card-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30%;
        z-index: 2;
    }

    .products-list-section .products-grid .product-card-info {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        left: 0;
        right: 0;
        padding: 12px 8px;
        text-align: center;
        z-index: 3;
        display: block;
        box-sizing: border-box;
        margin: 0;
    }

    .products-list-section .products-grid .product-card-name {
        font-size: 18px;
        text-align: center;
        display: block;
        width: 100%;
    }

    .products-list-section .products-grid .product-card-series {
        text-align: center;
        display: block;
        width: 100%;
    }

    /* Hover effects for mobile */
    .products-list-section .products-grid .product-card:hover .product-card-overlay {
        height: 100%;
        background: rgba(0, 64, 113, 0.6);
    }

    .products-list-section .products-grid .product-card:hover .product-card-info {
        bottom: 50%;
        transform: translateY(-50%);
    }

    /* Dynamax Mobile 版本保持兩欄設計 */
    .dynamax-section .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-banner {
        padding: 35px 30px;
        flex-direction: column;
        gap: 20px;
        text-align: center;
        margin-top: 40px;
    }

    .contact-banner-title {
        font-size: 22px;
    }

    /* Product Detail Page */
    .product-hero {
        padding: 120px 20px 50px;
    }

    .product-hero-title {
        font-size: 36px;
        letter-spacing: 4px;
        margin-bottom: 20px;
    }

    .product-hero-desc {
        font-size: 11px;
    }

    .product-detail-section {
        padding: 40px 20px 60px;
        flex-direction: column;
    }

    .overview-image {
        position: relative;
        top: 0;
        width: 100%;
        flex: none;
        padding: 0px;
        max-height: none;
    }

    .product-info-wrapper {
        width: 100%;
        padding: 80px 0 0;
    }

    .product-gallery {
        max-width: 100%;
    }

    .gallery-arrow {
        font-size: 40px;
    }

    .gallery-arrow-prev {
        left: 10px;
    }

    .gallery-arrow-next {
        right: 10px;
    }

    .overview-image img {
        max-width: 300px;
    }

    .section-title {
        font-size: 22px;
    }

    .title-bar {
        height: 22px;
    }

    .product-quick-nav.is-sticky {
        top: 69px;
    }

    .quick-nav-inner {
        gap: 25px;
        padding: 15px 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .quick-nav-link {
        font-size: 12px;
    }

    .product-page-section {
        padding: 50px 20px;
    }

    .specs-table {
        font-size: 14px;
        min-width: 800px;
    }

    .specs-table th {
        font-size: 15px;
    }

    .specs-table th,
    .specs-table td {
        padding: 6px 8px;
    }

    .specs-notes {
        font-size: 14px;
        padding: 0 10px;
    }

    .dimension-diagram {
        margin-bottom: 30px;
    }

    .dimension-diagram img {
        max-width: 100%;
    }

    .dimension-models {
        gap: 20px;
    }

    .dimension-model img {
        width: 70px;
        height: 70px;
    }

    .download-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .download-card-info h3 {
        font-size: 16px;
    }

    .download-card-info p {
        font-size: 14px;
    }

    .mobile-menu {
        top: 60px;
        height: calc(100vh - 60px);
        padding: 20px;
    }

    /* Slider - 滿版高度讓按鈕和進度條可見 */
    .slider-section {
        height: 100svh;
        height: 100dvh;
        background-color: #000;
        /* 手機版黑色背景 */
    }

    .slide-content {
        padding: 0 20px;
        bottom: 80px;
    }

    .slide-content h1,
    .slide-content h2 {
        font-size: 32px;
        letter-spacing: 2px;
        margin-bottom: 10px;
    }

    .slider-pagination {
        bottom: 30px;
    }

    /* About Section */
    .about-title {
        font-size: 22px;
        text-align: center;
    }

    .about-subtitle {
        font-size: 20px;
    }

    .about-text {
        font-size: 14px;
    }

    /* Product Section - Mobile */
    .product-section {
        height: auto;
        min-height: auto;
        background: transparent;
        overflow: hidden;
        position: relative;
    }

    .product-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 10;
        padding: 0;
        font-size: 48px;
        opacity: 0.8;
    }

    .product-arrow:active {
        opacity: 1;
    }

    .product-arrow.hidden {
        display: none;
    }

    .product-arrow-left {
        left: 15px;
    }

    .product-arrow-right {
        right: 15px;
    }

    .product-arrow svg {
        display: block;
    }

    .product-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }

    .product-grid::-webkit-scrollbar {
        display: none;
    }

    .product-card {
        flex: 0 0 100%;
        min-width: 100%;
        height: 100vh;
        scroll-snap-align: start;
        position: relative;
    }

    .product-card-img {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .product-card .desktop-img {
        display: none !important;
    }

    .product-card .mobile-img {
        display: block !important;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .homepage-products .product-grid .product-card-overlay {
        display: block !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 35% !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%) !important;
        z-index: 1;
    }

    .homepage-products .product-grid .product-card-info {
        position: absolute !important;
        top: auto !important;
        bottom: 10% !important;
        left: 50% !important;
        right: auto !important;
        width: 95% !important;
        max-width: 400px !important;
        padding: 0 15px !important;
        text-align: center !important;
        background-color: transparent !important;
        z-index: 2 !important;
        transform: translateX(-50%) !important;
    }

    .homepage-products .product-grid .product-card-title {
        font-size: 32px;
        color: #fff;
        text-align: center !important;
        white-space: nowrap;
        margin: 0 auto;
    }

    .homepage-products .product-grid .product-card-desc {
        font-size: 16px;
        color: #ffffffaa;
        text-align: center;
        width: 100%;
    }

    /* 手機版停用 hover 效果 */
    .homepage-products .product-grid .product-card:hover .product-card-img img {
        transform: none;
    }

    .homepage-products .product-grid .product-card:hover .product-card-overlay {
        height: 35%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
    }

    .homepage-products .product-grid .product-card:hover .product-card-info {
        top: auto !important;
        bottom: 10% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* News Section */
    .news-section {
        padding: 80px 0;
    }

    .news-header {
        padding: 35px 20px 25px;
    }

    .news-header-buttons {
        padding: 0 20px 30px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .news-header-buttons .btn-more {
        flex: 1;
        min-width: 140px;
        text-align: center;
        font-size: 12px;
        padding: 10px 15px;
    }

    .news-header-buttons .btn-more-large {
        padding: 15px 15px;
    }

    .news-subtitle {
        font-size: 16px;
    }

    .news-subtitle br {
        display: none;
    }

    .news-card {
        width: calc(100vw - 60px);
        max-width: 100%;
    }

    .news-list {
        padding: 0;
        gap: 20px;
    }

    .news-arrow {
        display: none;
    }

    .news-arrow svg {
        width: 32px;
        height: 32px;
    }

    .news-arrow-left {
        left: 10px;
    }

    .news-arrow-right {
        right: 10px;
    }

    /* 手機版新聞 slider 全寬 */
    .news-slider-wrapper {
        max-width: 100%;
        overflow: visible;
        padding: 0;
    }

    .news-slider-wrapper-inner {
        width: calc(100vw - 60px);
        max-width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

    .news-list {
        padding: 0;
        gap: 20px;
    }

    .news-arrow-left {
        left: 10px;
    }

    .news-arrow-right {
        right: 10px;
    }

    .news-image {
        aspect-ratio: 16 / 10;
        height: auto;
    }

    .news-content {
        padding: 20px;
    }

    .news-card-title {
        font-size: 18x;
    }

    .news-card-desc {
        font-size: 14px;
    }

    /* Advantages */
    .adv-section {
        padding: 60px 20px;
    }

    .adv-header {
        padding-bottom: 15px;
    }

    .adv-container {
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
    }

    .adv-item {
        flex: 0 0 calc(50% - 15px);
        max-width: calc(50% - 15px);
    }

    .adv-icon {
        width: 80px;
        height: 80px;
    }

    .adv-title {
        margin-bottom: 15px;
        font-size: 32px;
    }

    .adv-subtitle {
        font-size: 16px;
        line-height: 1.6;
    }

    .adv-four-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .adv-desc {
        font-size: 16px;
        line-height: 1.6;
    }

    /* Support Center */
    .support-center-section {
        padding: 60px 20px;
        min-height: auto;
    }

    .support-header {
        margin-bottom: 40px;
    }

    .support-title {
        font-size: 32px;
        font-weight: 500;
        margin-bottom: 15px;
    }

    .support-subtitle {
        font-size: 16px;
        line-height: 1.5;
        font-weight: 100;
    }

    .support-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .support-card {
        padding: 20px;
        min-height: 100px;
    }

    .support-card-large {
        grid-column: span 1;
    }

    .support-card-small {
        grid-column: span 1;
    }

    .support-grid .support-card:nth-child(3),
    .support-grid .support-card:nth-child(4),
    .support-grid .support-card:nth-child(5) {
        grid-column: 1;
        grid-row: auto;
    }

    .support-card-icon {
        width: 36px;
        height: 36px;
        margin-right: 10px;
        margin-top: 7px;
    }

    .support-card-title {
        font-size: 18px;
        margin-left: 4px;
        letter-spacing: 0;
    }

    .support-card-desc {
        font-size: 16px;
        margin-left: 50px;
        margin-top: -15px;
    }

    /* Partner */
    .partner-section {
        min-height: auto;
    }

    .partner-content {
        position: relative;
        padding: 60px 30px;
    }

    .partner-title {
        font-size: 32px;
        font-weight: 500;
    }

    .partner-desc {
        font-size: 16px;
    }

    .partner-desc br {
        display: none;
    }

    .partner-stats {
        gap: 30px;
        align-items: flex-start;
    }

    .stat-number {
        font-size: 60px;
    }

    .stat-label {
        font-size: 16px;
        color: #fff;
    }

    /* Investor & ESG */
    .investor-esg-section {
        flex-direction: column;
    }

    .investor-side,
    .esg-side {
        width: 100%;
        min-height: 214px;
    }

    .investor-content,
    .esg-content {
        padding: 0 15px;
    }

    .investor-stock {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .investor-title,
    .esg-title {
        font-size: 22px;
        margin-bottom: 10px;
        margin-top: 0;
    }

    .investor-desc,
    .esg-desc {
        margin-bottom: 20px;
    }

    .investor-links {
        flex-direction: column;
        gap: 30px;
    }

    .investor-title {
        font-size: 42px;
    }

    .investor-links {
        flex-direction: row;
        gap: 5px;
        justify-content: flex-start;
    }

    .investor-col {
        gap: 20px;
        align-items: flex-start;
    }

    /* Footer */
    .footer {
        padding-top: 50px;
    }

    .footer-container {
        padding: 0 20px 40px;
    }

    .footer-logo span {
        font-size: 14px;
    }

    .footer-nav {
        flex-direction: column;
        gap: 30px;
    }

    .footer-col-main {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px 30px;
    }

    .footer-bottom {
        padding: 20px;
    }

    .footer-bottom p {
        font-size: 12px;
    }
}

/* ===================== */
/* 480px - 手機          */
/* ===================== */
@media screen and (max-width: 480px) {
    .logo img {
        height: 40px;
    }

    .logo-desktop {
        display: none;
    }

    .logo-mobile {
        display: block;
    }

    .header-right {
        gap: 15px;
    }

    /* News Section - 手機版一行一則 */
    .news-list {
        gap: 20px;
        padding: 0 20px 20px;
    }

    .news-card {
        flex: 0 0 calc(100% - 40px);
        width: calc(100% - 40px);
    }

    .news-title {
        font-size: 24px;
    }

    /* News Page Grid - 手機版一列一個 */
    .news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Video Section - 手機版一列一個 */
    .video-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Slider */
    .slider-arrow {
        width: 36px;
        height: 36px;
    }

    .slider-arrow svg {
        width: 28px;
        height: 28px;
    }

    .slider-arrow-prev {
        left: 10px;
    }

    .slider-arrow-next {
        right: 10px;
    }

    .slide-content {
        bottom: 75px;
    }

    /* Page Hero */
    .page-hero {
        min-height: 300px;
        max-height: 300px;
    }

    .page-hero-title {
        font-size: 32px;
        letter-spacing: 2px;
        margin-bottom: 12px;
    }

    .page-hero-desc {
        font-size: 12px;
        line-height: 1.6;
    }

    .page-hero-content {
        padding: 60px 20px 0;
    }



    /* Products List */
    .products-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .products-list-title {
        font-size: 22px;
        margin-top: 20px;
    }

    .products-list-desc {
        font-size: 14px;
    }

    .product-card {
        width: 100%;
        height: auto;
        min-height: 130px;
        padding: 25px;
    }

    .product-card-image {
        width: 65%;
    }

    .product-card-image img {
        max-height: 150%;
    }

    /* Product Detail Page */
    .page-breadcrumb-detail {
        padding-top: 70px;
    }

    .product-detail-title h1 {
        font-size: 28px;
    }

    /* Product Detail Page */
    .product-hero {
        padding: 100px 20px 40px;
    }

    .product-hero-title {
        font-size: 28px;
        letter-spacing: 3px;
        margin-bottom: 15px;
    }

    .product-hero-desc {
        font-size: 10px;
    }

    .overview-image img {
        max-width: 250px;
    }

    .catalog-download-btn {
        font-size: 15px;
    }

    .section-title {
        font-size: 22px;
        gap: 5px;
    }

    .title-bar {
        height: 24px;
    }

    .quick-nav-inner {
        gap: 25px;
        padding: 12px 15px;
    }

    .quick-nav-link {
        font-size: 15px;
        letter-spacing: 0px;
    }

    .overview-item h3 {
        font-size: 18px;
    }

    .overview-item p,
    .overview-list li {
        font-size: 16px;
    }

    .feature-intro {
        font-size: 16px;
    }

    .feature-list li {
        font-size: 16px;
    }

    .dimension-model img {
        width: 50px;
        height: 50px;
    }

    .dimension-model span {
        font-size: 11px;
    }

    .lang-switch {
        font-size: 12px;
        padding: 1px 5px;
    }

    .lang-option {
        text-align: center;
        padding: 5px 5px;
        font-size: 12px;
    }

    .slide-content h1,
    .slide-content h2 {
        font-size: 36px;
    }

    .btn-more {
        padding: 10px 30px;
        font-size: 14px;
    }

    .about-title {
        font-size: 24px;
    }

    .product-title {
        font-size: 32px;
    }


    .news-card {
        width: 320px;
        margin-left: 20px;
    }

    .news-card:last-child {
        margin-right: 20px;
    }

    .news-arrow {
        width: 36px;
        height: 36px;
    }

    .news-arrow svg {
        width: 28px;
        height: 28px;
    }

    .news-arrow-left {
        left: -20px;
    }

    .news-arrow-right {
        right: -20px;
    }

    .news-more {
        padding-top: 10px;
    }

    /* Product Section Arrows */
    .product-arrow {
        top: 64%;
        transform: translateY(-50%);
        font-size: 36px;
    }

    .product-arrow-left {
        left: 10px;
    }

    .product-arrow-right {
        right: 10px;
    }

    .stat-number {
        font-size: 72px;
    }

    .investor-title {
        font-size: 32px;
    }

    .product-desc {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .product-title {
        margin-bottom: 10px;
    }

    .investor-col {
        min-width: 165px;
    }

    .investor-link {
        font-size: 14px;
    }

    /* News Page */
    .news-section {
        padding: 40px 20px 60px;
    }

    .news-hero {
        height: 200px;
    }

    .news-hero-title {
        font-size: 28px;
        letter-spacing: 3px;
    }

    .news-filter-tabs {
        margin-top: 20px;
        margin-bottom: 25px;
        gap: 5px
    }

    .news-grid {
        gap: 20px;
        row-gap: 20px;
    }

    .footer-contact a {
        color: #ffffffaa;
        transition: color 0.25s ease-in-out, opacity 0.25s ease-in-out;
    }

    .footer-contact a:hover {
        color: #fff;
        opacity: 1;
    }

    .contact-item:hover {
        color: #fff;
    }

    .contact-item:hover img,
    .contact-item:hover svg {
        opacity: 1;
    }

    .product-subtitle {
        font-size: 16px;
    }

    /* Worldwide Page */
    .worldwide-hero {
        min-height: 300px;
        max-height: 300px;
    }

    .worldwide-hero-title {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .region-tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 20px;
    }

    .region-tab {
        padding: 10px 15px;
        text-align: center;
    }

    .map-icon img {
        width: 30px;
        height: 30px;
    }

    .map-icon-tooltip {
        font-size: 12px;
        padding: 8px 10px;
    }

    .agents-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Investor Page */
    .investor-hero {
        min-height: 300px;
        max-height: 300px;
    }

    .investor-hero-title {
        font-size: 32px;
        letter-spacing: 2px;
    }

    .investor-content-title {
        font-size: 18px;
    }

    .revenue-unit {
        font-size: 14px;
    }

    .revenue-table {
        font-size: 14px;
    }

    .investor-table thead th {
        padding: 10px 8px;
        font-size: 14px;
    }

    .investor-table tbody td {
        padding: 15px 10px;
    }

    .mops-link {
        font-size: 16px;
        margin-top: 20px;
    }

    .investor-table thead th.col-amount,
    .investor-table thead th.col-change,
    .investor-table thead th.col-header,
    .investor-table thead th.col-year {
        font-size: 16px;
    }

    .investor-esg-section .investor-title,
    .investor-esg-section .esg-title {
        font-size: 22px;
    }

    .investor-esg-section .investor-content,
    .investor-esg-section .esg-content {
        padding: 60px 30px;
    }

    .catalog-header {
        padding-left: 20px;
        font-size: 22px;
    }

    .catalog-header::before {
        top: 3px;
    }

    .video-header,
    .data-header {
        padding-left: 20px;
    }

    .video-header::before,
    .data-header::before {
        top: 3px;
    }

    /* Mobile Small - 600px 特殊處理 */
    .slide-content {
        max-width: 95vw;
        width: 95vw;
        padding: 0 10px;
        bottom: 70px;
    }

    .footer-nav {
        display: none !important;
    }

    .footer-info {
        max-width: 100vw;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        padding-bottom: 30px;
    }

    /* Investor Table - Mobile (for multi-column tables) */
    .investor-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .investor-table {
        font-size: 16px;
        min-width: 500px;
    }

    .investor-table-650 {
        font-size: 16px;
        min-width: 650px;
    }

    .investor-table-350 {
        font-size: 16px;
        min-width: 350px;
    }

    .investor-table thead th {
        padding: 12px 8px;
        font-size: 16px;
    }

    .investor-table thead tr.sub-header th {
        font-size: 16px;
    }

    .investor-content h2,
    .investor-content .content-titleP {
        font-size: 16px;
    }

    .investor-table tbody td {
        padding: 12px 8px;
        font-size: 16px;
    }

    .investor-table tbody td {
        padding: 12px 8px;
        font-size: 16px;
    }

    .major-shareholders-date {
        font-size: 16px;

    }

    .investor-table .pdf-link img {
        width: 35px;
    }

    .statements-section .section-title {
        font-size: 20px;
    }

    .major-shareholders-title {
        font-size: 18px;
    }

    .major-shareholders-date {
        font-size: 16px;
    }

    .about-intro-text p {
        font-size: 16px;
    }

    .item-text {
        /* font-size: 14px; */
    }

    .item-title {
        font-size: 18px;
    }

    .news-grid {
        padding: 0;
    }
}

/* =================== */
/* Search Results Page */
/* =================== */

/* 搜尋結果區域 */
.search-results-section {
    padding: 60px 20px 100px;
    background-color: #f8f9fa;
    min-height: 60vh;
}

.search-results-container {
    max-width: 900px;
    margin: 0 auto;
}

/* 搜尋摘要 */
.search-summary {
    margin-bottom: 10px;
}

.search-results-title {
    font-size: 36px;
    color: #004080;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.search-results-info {
    font-size: 20px;
    color: #333;
    line-height: 1.6;
}

.search-results-info strong {
    color: #004080;
    font-weight: 600;
}

/* 搜尋結果列表 - 使用條列式風格 */
.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 單一結果項目 */
.search-result-item {
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.search-result-item:first-child {
    border-top: 1px solid #e0e0e0;
}

.search-result-item:hover {
    background-color: #f0f7ff;
    border-left: 4px solid #004080;
    padding-left: 0;
}

.search-result-link {
    display: block;
    padding: 25px 30px;
    text-decoration: none;
    color: inherit;
}

.search-result-item:hover .search-result-link {
    padding-left: 26px;
}

/* 結果標題 */
.search-result-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.search-result-item:hover .search-result-title {
    color: #0056b3;
}

/* 結果描述 */
.search-result-desc {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* 分類標籤 */
.search-result-category {
    display: inline-block;
    font-family: 'Alexandria', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #CCC;
    background-color: #333;
    padding: 4px 12px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* 分頁 */
.search-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
    padding-top: 30px;
}

.pagination-btn {
    font-family: 'Alexandria', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    padding: 10px 18px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 45px;
}

.pagination-btn:hover {
    background-color: #004080;
    color: #ffffff;
    border-color: #004080;
}

.pagination-btn.active {
    background-color: #333;
    color: #ccc;
    border-color: #333;
}

.pagination-next {
    padding: 10px 24px;
}

/* =================== */
/* Responsive Design   */
/* =================== */

@media (max-width: 768px) {

    /* 搜尋結果區域 - Mobile */
    .search-results-section {
        padding: 40px 15px 60px;
    }

    .search-results-container {
        max-width: 100%;
    }

    /* 搜尋摘要 - Mobile */
    .search-summary {
        margin-bottom: 15px;
    }

    .search-results-title {
        font-size: 26px;
        margin-bottom: 10px;
    }

    .search-results-info {
        font-size: 14px;
    }

    /* 結果項目 - Mobile */
    .search-result-link {
        padding: 20px 15px;
    }

    .search-result-item:hover .search-result-link {
        padding-left: 11px;
    }

    .search-result-title {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .search-result-desc {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 8px;
    }

    .search-result-category {
        font-size: 11px;
        padding: 3px 10px;
    }

    /* 分頁 - Mobile */
    .search-pagination {
        gap: 8px;
        margin-top: 40px;
        padding-top: 20px;
    }

    .pagination-btn {
        font-size: 14px;
        padding: 8px 14px;
        min-width: 40px;
    }

    .pagination-next {
        padding: 8px 18px;
    }

    /* iframe 內容區塊 - Mobile */
    .iframe-section {
        padding: 30px 15px;
    }

    .iframe-container {
        height: 500px;
        /* Mobile 版本使用較小的固定高度 */
    }
}

/* =========================================
   Product Lightbox (Image & 3D Viewer)
========================================= */
.product-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.product-lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.product-lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

.product-lightbox-html {
    width: 80vw;
    height: 80vh;
    max-width: 1200px;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.product-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    z-index: 10000;
    padding: 10px;
    transition: transform 0.2s ease;
}

.product-lightbox-close:hover {
    transform: scale(1.1);
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
    z-index: 10000;
}

.lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.4);
}

.lightbox-arrow-prev {
    left: 20px;
}

.lightbox-arrow-next {
    right: 20px;
}

/* =========================================
   Product Lightbox v2 (Image & 3D Viewer)
========================================= */
.product-lightbox {
    position: fixed;
    inset: 0;
    z-index: 19999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.product-lightbox.is-active {
    opacity: 1;
    visibility: visible;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: pointer;
}

.lightbox-container {
    position: relative;
    z-index: 1;
    width: 90vw;
    max-width: 1100px;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3D 模式開啟時，容器改為正方形，取螢幕寬高較短邊的 90% */
.product-lightbox:has(#lightbox3dWrap.is-active) .lightbox-container {
    width: min(90vw, 90vh);
    max-width: min(90vw, 90vh);
    max-height: none;
}

/* Close Button */
.lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20000;
    transition: background 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(4px);
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

/* Image Mode */
.lightbox-image-wrap {
    display: none;
    width: 100%;
    max-height: 90vh;
    align-items: center;
    justify-content: center;
}

.lightbox-image-wrap.is-active {
    display: flex;
}

.lightbox-image-wrap #lightboxImage {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    display: block;
}

/* 3D Mode — 原廠 responsive iframe embed 結構 */
.lightbox-3d-wrap {
    display: none;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.lightbox-3d-wrap.is-active {
    display: block;
}

/* 外容器：填滿父容器（尺寸控制由 .lightbox-container 負責） */
.lightbox-3d-outer {
    width: 100%;
    margin: 0 auto;
}

/* 比例容器：padding-bottom: 100% 建立 1:1 正方形空間 */
.lightbox-3d-ratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}

/* iframe 絕對定位填滿比例容器 */
.lightbox-3d-ratio #lightbox3dFrame {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    min-width: 100%;
    height: 100%;
    border: none;
    display: block;
}

@media screen and (max-width: 768px) {
    .lightbox-container {
        width: 96vw;
        max-height: 85vh;
    }

    /* 手機畫面為章服式，寬度較小，越寬越高 */
    .product-lightbox:has(#lightbox3dWrap.is-active) .lightbox-container {
        width: min(96vw, 85vh);
        max-width: min(96vw, 85vh);
    }

    .lightbox-close {
        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
    }
}