/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-green: #2d5016;
    --light-green: #4a7c2a;
    --accent-green: #6b9f3d;
    --bg-green: #1a3d0a;
    --light-bg: #f5f5f0;
    --beige: #faf8f3;
    --light-green-bg: #e8f5e0;
    --white: #ffffff;
    --dark-gray: #1a1a1a;
    --text-dark: #2c2c2c;
    --text-light: #666666;
}

body {
    font-family: 'Noto Sans TC', 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    overflow-x: hidden;
}

/* ============================================
   GLOBAL PRELOADER - 已禁用，不显示 loading 图标
   ============================================ */
.preloader {
    position: fixed;
    inset: 0;
    background: #071307;
    display: none !important; /* 完全隐藏 preloader */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    visibility: hidden !important;
    opacity: 0 !important;
}

.preloader-hidden {
    opacity: 0;
    visibility: hidden;
}

.preloader-inner {
    text-align: center;
    color: #ffffff;
}

.preloader-logo img {
    width: 140px;
    height: auto;
    margin-bottom: 20px;
}

.preloader-text {
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 18px;
    opacity: 0.8;
}

.preloader-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #49C080;
    animation: preloader-spin 0.9s linear infinite;
    margin: 0 auto;
}

@keyframes preloader-spin {
    to {
        transform: rotate(360deg);
    }
}

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

/* ============================================
   HERO SECTION - 森林背景，Logo在顶部中央
   ============================================ */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #0d1f05; /* 深绿色背景，作为视频加载前的后备 */
    /* 輕微限制觸控行為，只允許垂直滾動 */
    touch-action: pan-y;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140%; /* 增加高度以支持视差效果 */
    background-image: url('../images/bg01.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    will-change: transform;
    top: -20%;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    will-change: transform;
    opacity: 0.6; /* 降低视频透明度，让背景更亮 */
    mix-blend-mode: screen; /* 使用 screen 模式，让背景更亮 */
}

/* HTML5 Video Player 作為背景影片 (Technology Section) */
#technologyVideoPlayer {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 覆蓋整個容器 */
    object-position: center;
    /* 不放大，保持原始比例和清晰度 */
    transform: none;
    transform-origin: center;
    pointer-events: none; /* 讓上方內容可點擊 */
    opacity: 1; /* HTML5 video 可以直接顯示 */
    transition: opacity 0.4s ease;
    /* 確保畫質清晰 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* 影片元素本身不使用混合模式，由容器處理 */
    mix-blend-mode: normal;
}

/* HTML5 Video Player 作為背景影片 (Hero Section) */
#heroVideoPlayer {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 覆蓋整個容器 */
    object-position: center;
    /* 放大一點避免黑邊 */
    transform: scale(1.2);
    transform-origin: center;
    pointer-events: none; /* 讓上方內容可點擊 */
    opacity: 0.6; /* 與原本的 mix-blend-mode: screen 效果相似 */
    transition: opacity 0.4s ease;
    mix-blend-mode: screen; /* 使用 screen 模式，让背景更亮 */
}

/* HTML5 Video Player 作為背景影片 (About Section) */
#aboutVideoPlayer {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 覆蓋整個容器 */
    object-position: center;
    /* 放大一點避免黑邊 */
    transform: scale(1.2);
    transform-origin: center;
    pointer-events: none; /* 讓上方內容可點擊 */
    opacity: 1; /* HTML5 video 可以直接顯示 */
    transition: opacity 0.4s ease;
}

/* 手机版：確保 HTML5 Video Player 能正常顯示 */
@media (max-width: 768px) {
    /* Hero Section - 確保容器和影片可見 */
    .hero .hero-video,
    #heroVideoContainer {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Hero Video Player 手機版樣式 */
    #heroVideoPlayer {
        opacity: 0.6 !important;
        display: block !important;
        visibility: visible !important;
        /* 手機版不使用 transform: scale，改用 object-fit 覆蓋，避免 compositing 問題 */
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important; /* 使用 translate 居中，避免 scale */
        width: 120% !important; /* 用 width 放大 */
        height: 120% !important; /* 用 height 放大 */
        max-width: 120% !important;
        max-height: 120% !important;
        min-width: 100% !important; /* 確保覆蓋整個容器 */
        min-height: 100% !important;
        transform-origin: center !important;
        will-change: auto !important; /* 移除 will-change */
        filter: none !important;
        backdrop-filter: none !important;
        mix-blend-mode: screen !important; /* 保持 screen 模式 */
        isolation: auto !important;
        perspective: none !important;
        transform-style: flat !important;
        object-fit: cover !important;
        object-position: center !important;
        z-index: 1 !important;
    }
    
    /* Technology Section - 確保容器和影片可見 */
    .technology .technology-video,
    #technologyVideoContainer {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Technology Section - 確保背景圖片顯示 */
    .technology::before {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
        z-index: 0 !important;
    }
    
    /* Technology Video Container 手機版樣式 */
    .technology-video,
    #technologyVideoContainer {
        opacity: 0.4 !important; /* 與桌面版一致 */
        mix-blend-mode: hard-light !important; /* 與桌面版一致 */
        display: block !important;
        visibility: visible !important;
        z-index: 1 !important;
        position: absolute !important;
        top: -20% !important;
        left: 0 !important;
        width: 100% !important;
        height: 140% !important;
    }
    
    /* Technology Video Player 手機版樣式 */
    #technologyVideoPlayer {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
        /* 手機版 1:1 比例，不縮小也不放大 */
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important; /* 不放大，保持原比例 */
        transform-origin: center !important;
        will-change: auto !important; /* 移除 will-change，避免不必要的 GPU 加速 */
        filter: none !important;
        backdrop-filter: none !important;
        mix-blend-mode: normal !important; /* video 元素本身不使用混合模式，由容器處理 */
        isolation: auto !important;
        perspective: none !important;
        transform-style: flat !important;
        object-fit: cover !important; /* 覆蓋整個容器 */
        object-position: center !important;
        z-index: 1 !important;
        /* 確保畫質清晰 */
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
    
    /* About Section 手機版 - 簡化樣式 */
    .about-video,
    #aboutVideoContainer {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
        z-index: 1 !important;
    }
    
    #aboutVideoPlayer {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
        transform: none !important;
    }
}


.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 31, 5, 0.05); /* 降低遮罩层透明度，让背景更亮 */
    z-index: 2;
    pointer-events: none; /* 不阻挡点击事件 */
    mix-blend-mode: normal; /* 使用正常模式 */
}

/* 如果没有图片，使用深绿色渐变作为后备 */
.hero-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(13, 31, 5, 0.3) 0%, rgba(26, 61, 10, 0.5) 100%);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--white);
    padding: 60px 20px;
    width: 100%;
    will-change: transform;
}

/* Logo - 在顶部中央 */
.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;
}

.logo-img {
    max-width: 234px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    will-change: opacity, transform; /* 优化动画性能 */
}

.hero-slogans {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 60px;
}

.hero-slogan-img {
    width: min(90%, 650px);
    height: auto;
    filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.4));
    max-width:571px;
    will-change: opacity, transform; /* 优化动画性能 */
}

/* 分子图标连接线 */
.hero-floating-icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-floating-icon {
    position: absolute;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.4));
    animation: float 6s ease-in-out infinite;
    will-change: transform;
}

.hero-floating-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-top-left {
    top: 18%;
    left: 24%;
    animation-delay: 0s;
}

.icon-bottom-center {
    bottom: 18%;
    left: 45%;
    animation-delay: 1.5s;
}

.icon-right {
    top: 30%;
    right: 18%;
    animation-delay: 3s;
}

/* .hero-floating-icon::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
} */

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

/* ============================================
   ABOUT US SECTION - 浅米色背景，右侧绿色点状波浪
   ============================================ */
.about {
    background: var(--beige);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/bg04.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.4; /* 降低背景图片透明度，让视频更明显 */
}

.about-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    display: block;
    opacity: 1;
}

#aboutVideoPlayer {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 1;
}

.about-video-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    transform: scale(1.2);
    transform-origin: center;
    pointer-events: none; /* 不阻挡上层内容点击 */
}

.about-video-overlay {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    background: rgba(250, 248, 243, 0.2); /* 增加遮罩层，让背景图片也可见 */
    z-index: 2;
    pointer-events: none; /* 不阻挡点击事件 */
    mix-blend-mode: multiply; /* 使用 multiply 让混合更自然 */
    transform: translate3d(0, var(--parallax-y, 0), 0);
}


.about-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 500px;
    height: 100%;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 15px,
        rgba(107, 159, 61, 0.08) 15px,
        rgba(107, 159, 61, 0.08) 30px
    );
    transform: rotate(-15deg);
    transform-origin: top right;
    z-index: 1;
}

.about-title {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.about-content {
    position: relative;
    z-index: 3; /* 确保内容在视频和遮罩层之上 */
    max-width: 690px;
    margin: 0 auto;
    will-change: transform;
}

.section-title {
    font-size: 3.75em; /* 60px based on 16px */
    font-weight: 900;
    color: #000;
    
    line-height: 1;
    font-family: 'Noto Sans TC', sans-serif;
}

/* 英文标题使用 Fira Sans Black 900 Italic */
.section-title-en {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 900;
    font-style: italic;
}

.about-text {
    font-size: 15px;
    line-height: 1.24;
    color: var(--text-dark);
    font-weight: 400;
}

.about-text p {
    margin-bottom: 24px;
}

.about-list {
    list-style: none;
    margin: 24px 0;
}

.about-list li {
    margin-bottom: 16px;
    padding-left: 24px;
    position: relative;
    line-height: 1.24;
    /* font-size: 15px; */
}

.about-list li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: normal;
}

/* ============================================
   TECHNOLOGY SECTION - 深绿色背景，闪烁粒子效果
   ============================================ */
.technology {
    background: linear-gradient(135deg, #0d1f05 0%, #1a3d0a 50%, #2d5016 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

.technology::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    background-image: url('../images/bg02.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    will-change: transform;
    transform: translate3d(0, var(--parallax-y, 0), 0);
    opacity: 1; /* 桌面版显示 */
}

.technology-video {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    z-index: 1;
    will-change: transform;
    opacity: 0.4; /* 降低视频透明度，让效果更柔和 */
    mix-blend-mode: hard-light; /* 使用 hard-light 混合模式，高对比度效果 */
    transform: translate3d(0, var(--parallax-y, 0), 0);
    overflow: hidden;
}

.technology-video-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    transform: scale(1.05); /* 降低放大倍率以減少模糊 */
    transform-origin: center;
    pointer-events: none; /* 不阻挡上层内容互动 */
}

.technology-video-overlay {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    background: rgba(13, 31, 5, 0.25); /* 恢復原本的遮罩 */
    z-index: 2;
    pointer-events: none; /* 不阻挡点击事件 */
    mix-blend-mode: multiply; /* 使用 multiply 让混合更自然 */
    transform: translate3d(0, var(--parallax-y, 0), 0);
}

.technology-content-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 透明黑色遮罩，确保内容清晰可见 */
    z-index: 3; /* 在视频和遮罩层之上，但在粒子效果和内容之下 */
    pointer-events: none; /* 不阻挡点击事件 */
}

.technology-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(107, 159, 61, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(107, 159, 61, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(107, 159, 61, 0.2) 0%, transparent 60%);
    animation: particleShimmer 6s ease-in-out infinite;
    z-index: 3.5; /* 在内容遮罩层之上，但在内容之下 */
}

@keyframes particleShimmer {
    0%, 100% { 
        opacity: 0.6;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.1);
    }
}

.technology .container {
    position: relative;
    z-index: 4; /* 确保内容在最上层，在视频、遮罩层和粒子效果之上 */
    max-width: 800px;
    text-align: center;
    will-change: transform;
}

.section-title-white {
    font-size: 3.75em; /* 60px based on 16px */
    font-weight: 900;
    color: var(--white);
    
    margin-bottom: 12px;
    font-family: 'Noto Sans TC', sans-serif;
}

/* 英文标题使用 Fira Sans Black 900 Italic */
.section-title-white.section-title-en {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 900;
    font-style: italic;
}

.section-subtitle-white {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 80px;
    font-weight: 600;
    margin-top: -20px;
}

.macs-section {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    align-items: flex-start;
    max-width: 800px;
    z-index: 2;
}

.macs-wrapper {
    flex: 1;
    min-width: 0;
}

.macs-header {
    margin-bottom: 10px;
    max-width: 215px;
}

.macs-title-img {
    display: block;
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 0 auto;
}

.macs-content {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.macs-description {
    color: rgba(255, 255, 255, 0.95);
    max-width: 100%;
}

.macs-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.macs-logo-img {
    width: 100%;
    max-width: 215px;
    height: auto;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8));
    /* 淡入 + 缩放进入动画 */
    animation: macsLogoFadeIn 1.2s ease-out forwards,
               macsLogoPulse 3s ease-in-out 1.2s infinite;
    opacity: 0;
    transform: scale(0.8);
    transition: transform 0.4s ease, filter 0.4s ease;
    will-change: transform;
}

/* 淡入 + 缩放进入动画 */
@keyframes macsLogoFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 脉冲发光效果 */
@keyframes macsLogoPulse {
    0%, 100% {
        filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8));
    }
    50% {
        filter: drop-shadow(0 0 50px rgba(255, 255, 255, 0.9)) 
                drop-shadow(0 0 80px rgba(255, 255, 255, 0.5));
    }
}

/* 悬停效果：放大 + 增强发光 */
.macs-logo-container:hover .macs-logo-img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 60px rgba(255, 255, 255, 1)) 
            drop-shadow(0 0 100px rgba(255, 255, 255, 0.6));
    animation-play-state: paused;
}

/* 可选：旋转进入效果（取消注释以启用） */
/*
.macs-logo-img {
    animation: macsLogoRotateIn 1.2s ease-out forwards,
               macsLogoPulse 3s ease-in-out 1.2s infinite;
}

@keyframes macsLogoRotateIn {
    0% {
        opacity: 0;
        transform: scale(0.6) rotate(-15deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}
*/

/* 可选：浮动效果（取消注释以启用） */
/*
.macs-logo-img {
    animation: macsLogoFadeIn 1.2s ease-out forwards,
               macsLogoFloat 4s ease-in-out 1.2s infinite;
}

@keyframes macsLogoFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}
*/

.macs-description > p {
    font-size: 15px;
    text-align: left;
    margin-bottom: 0;
}

.macs-applications {
    display: grid;
    grid-template-columns: 2.8fr 2.2fr;
    gap: 30px;
    width: 100%;
    flex-basis: 100%;
    /* margin-top: 30px; */
}

.application-card {
    /* background: rgba(255, 255, 255, 0.12); */
    padding: 0px;
    border-radius: 12px;
    /* backdrop-filter: blur(10px); */
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    display: flex;
    /* gap: 20px; */
    /* align-items: flex-start; */
}


.app-content {
    flex: 1;
    color: #fff;
    text-align: left;
}

.app-icon {
    width: 85px;
    height: 94px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    /* background: rgba(107, 159, 61, 0.3); */
    /* border-radius: 50%; */
    flex-shrink: 0;
    align-self: flex-end;
    position: relative;
}

.app-icon::after {
    content: '';
    position: absolute;
    right: -30.5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 1);
}

.application-card.agriculture .app-icon::after {
    display: none;
}

.app-icon svg {
    width: 30px;
    height: 30px;
    stroke: var(--white);
    stroke-width: 2.5;
}

.app-icon-img {
    /* width: 30px;
    height: 30px; */
    object-fit: contain;
}

.application-card h4 {
    font-size: 26px;
    color: var(--white);
    margin-bottom: 24px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
}

.application-card ul {
    list-style: none;
}

.application-card ul li {
    padding-left: 15px;
    /* margin-bottom: 14px; */
    position: relative;
    /* line-height: 1.8; */
    font-size: 15px;
}

.application-card ul li::before {
    content: '.';
    position: absolute;
    left: 0;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
}

/* ============================================
   SUBSIDIARIES SECTION - 浅绿色背景，左侧波浪图案
   ============================================ */
.subsidiaries {
    background: var(--light-green-bg);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

.subsidiaries::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    background-image: url('../images/bg03.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    will-change: transform;
    transform: translate3d(0, var(--parallax-y, 0), 0);
    opacity: 1; /* 桌面版显示 */
}

.subsidiaries .container {
    position: relative;
    z-index: 2;
    will-change: transform;
}

.subsidiaries .section-title {
    text-align: center;
    margin-bottom: 16px;
}

.section-description {
    text-align: center;
    font-size: 17px;
    color: #000;
    margin:40px 0;
}

/* 桌面版：隐藏手机版换行，显示桌面版换行 */
.desktop-br {
    display: block;
}

.mobile-br {
    display: none;
}

.subsidiaries-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    position: relative;
    z-index: 3; /* 确保卡片在视频和遮罩层之上 */
}

.subsidiary-card {
    background: var(--primary-green);
    padding: 10px 50px;
    border-radius: 24px;
    color: var(--white);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    margin: 0 0 30px 0;
    z-index: 1; /* 确保卡片在背景图片之上 */
}

.subsidiary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    border-radius: 24px;
}

.subsidiary-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(45, 80, 22, 0.7);
    z-index: 1;
    border-radius: 24px;
}

.subsidiary-card-left::before {
    background-image: url('../images/tech01.jpg');
}

.subsidiary-card-right::before {
    background-image: url('../images/tech02.jpg');
}

.subsidiary-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.subsidiary-card > * {
    position: relative;
    z-index: 2;
}


.subsidiary-icon {
    width: 150px;
    height: 150px;
    margin: 0 auto 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
}

.subsidiary-icon-img {
    width: 100%;
    height: 100%;
}

.subsidiary-card h3 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.subsidiary-name-zh {
    display: block;
    margin: 0 auto 10px;
    max-width: 162px;
    height: auto;
    opacity: 0.9;
}

.subsidiary-name-zh-left {
    max-width: 162px;
}

.subsidiary-name-zh-right {
    max-width: 210px;
}

.subsidiary-description {
    font-size: 15px;
    margin-bottom: 20px;
    color:#fff;
}

.learn-more-btn {
    background: #DEDEDE;
    color: #000;
    border: none;
    padding: 9px 45px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Noto Sans TC', sans-serif;
    margin: 0 0 28px 0;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.learn-more-btn:hover {
    background: var(--accent-green);
    color: var(--white);
    transform: scale(1.05);
}

/* ============================================
   NEWS SECTION - 米色背景
   ============================================ */
.news {
    background: var(--beige);
    padding: 120px 0;
    width: 100%;
    position: relative;
    overflow: hidden; /* 恢复 hidden，但只对背景图生效 */
}

.news::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/bg05.jpg'); /* 桌面版背景图片 */
    background-size: cover; /* 改为 cover 确保覆盖整个区域 */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    will-change: transform;
    transform: translate3d(0, var(--parallax-y, 0), 0);
    opacity: 1; /* 桌面版显示背景图片 */
}

.news .container {
    max-width: 100%;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

.news .section-title {
    text-align: center;
    margin-bottom: 50px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

/* News Tabs */
.news-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.news-tab-btn {
    padding: 12px 32px;
    background: transparent;
    border: 2px solid #2B2B2B;
    color: #2B2B2B;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Noto Sans TC', sans-serif;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.news-tab-btn:hover {
    background: none;
    transform: translateY(-2px);
}

.news-tab-btn.active {
    background: #2B2B2B;
    color: var(--white);
    border-color: #2B2B2B;
}

/* Tab button colors based on category */
.news-tab-btn[data-category="exhibition"] {
    border-color: #3F9365;
    color: #3F9365;
}

.news-tab-btn[data-category="exhibition"]:hover {
    background: rgba(63, 147, 101, 0.1);
}

.news-tab-btn[data-category="exhibition"].active {
    background: #3F9365;
    color: var(--white);
    border-color: #3F9365;
}

.news-tab-btn[data-category="award"] {
    border-color: #AA805E;
    color: #AA805E;
}

.news-tab-btn[data-category="award"]:hover {
    background: rgba(170, 128, 94, 0.1);
}

.news-tab-btn[data-category="award"].active {
    background: #AA805E;
    color: var(--white);
    border-color: #AA805E;
}

.news-tab-btn[data-category="press"] {
    border-color: #408F93;
    color: #408F93;
}

.news-tab-btn[data-category="press"]:hover {
    background: rgba(64, 143, 147, 0.1);
}

.news-tab-btn[data-category="press"].active {
    background: #408F93;
    color: var(--white);
    border-color: #408F93;
}

.news-card.hidden {
    display: none;
}

.news-container {
    position: relative;
    display: flex;
    align-items: center; /* 桌面版：按钮和卡片垂直居中对齐 */
    gap: 15px;
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
    min-height: 0; /* 确保容器可以正确计算高度 */
    overflow: visible; /* 确保内容不被切掉 */
}

.news-nav-btn {
    background: #000;
    color: var(--white);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease, transform 0.1s ease;
    flex-shrink: 0;
    padding: 0;
    align-self: center; /* 按钮自身垂直居中，不影响容器对齐 */
    margin-top: 0; /* 确保按钮在顶部对齐 */
    will-change: transform; /* 启用硬件加速 */
}

.news-nav-btn:hover {
    background:#353535;
    transform: scale(1.1);
}

/* 按下時的回饋效果 */
.news-nav-btn:active {
    transform: scale(0.95);
}

.news-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(1);
}

.news-nav-btn:disabled:active {
    transform: scale(1);
}

.news-nav-btn svg {
    width: 22px;
    height: 22px;
    stroke: var(--white);
}

.news-slider {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    overflow-y: visible; /* 确保垂直方向内容不被切掉 */
    scroll-behavior: auto; /* 改为 auto，让 JavaScript 控制滚动行为，点击箭头时立即显示 */
    scroll-snap-type: x mandatory; /* 添加 snap 功能，让手动滑动自动对齐 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
    min-height: 0; /* 确保可以正确计算高度 */
}

/* 桌面版：根据屏幕宽度自动调整卡片宽度，让多张卡片同时可见 */
/* 使用 flex-basis 和 calc() 根据容器宽度动态计算 */
@media (min-width: 769px) {
    .news-card {
        /* 小桌面（769px-1023px）：显示约2张，每张约 (100vw - 按钮和padding) / 2 */
        min-width: 380px;
        flex: 0 0 calc((100vw - 150px) / 2.2); /* 考虑按钮、padding和gap */
        max-width: 450px;
    }
}

@media (min-width: 1024px) {
    .news-card {
        /* 中等桌面（1024px-1439px）：显示约3张 */
        min-width: 350px;
        flex: 0 0 calc((100vw - 180px) / 3.2);
        max-width: 400px;
    }
}

@media (min-width: 1440px) {
    .news-card {
        /* 大桌面（1440px-1919px）：显示约4张 */
        min-width: 380px;
        flex: 0 0 calc((100vw - 210px) / 4.2);
        max-width: 420px;
    }
}

@media (min-width: 1920px) {
    .news-card {
        /* 超大桌面（1920px+）：显示约5张 */
        min-width: 400px;
        flex: 0 0 calc((100vw - 240px) / 5.2);
        max-width: 450px;
    }
}

.news-slider::-webkit-scrollbar {
    display: none;
}

/* 確保圖片和文字元素的初始 transition 設定 */
.news-card .news-image {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.news-card .news-image img {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.6s ease-out;
}

/* 確保文字元素初始 transition 設定 */
.news-card .news-title,
.news-card .news-description,
.news-card .news-header {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.news-card {
    min-width: 400px; /* 默认最小宽度 */
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease, opacity 0.2s ease; /* 添加 opacity transition 用于淡入淡出 */
    position: relative;
    scroll-snap-align: start; /* 添加 snap 对齐点 */
    flex-shrink: 0; /* 防止卡片被压缩 */
    will-change: transform, opacity; /* 启用硬件加速 */
    transform: translateZ(0); /* 强制 GPU 加速 */
    opacity: 1; /* 默认完全可见 */
    visibility: visible;
}

/* 卡片內容淡入動畫（用於切換時）- 增強版，確保圖片和文字分開動畫 */
/* 注意：動畫將通過 JavaScript 直接設置 style 來實現，避免被父元素 transition 影響 */

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

/* 根據分類套用不同顏色的邊框 */
.news-card:has(.category-exhibition) {
    border: 2px solid #3F9365;
}

.news-card:has(.category-award) {
    border: 2px solid #AA805E;
}

.news-card:has(.category-press) {
    border: 2px solid #408F93;
}

/* News Header - 分類標籤和日期並排 */
.news-header {
    display: flex;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
}

/* News Category 分類標籤 */
.news-category {
    padding: 12px 24px;
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    min-height: 48px;
    box-sizing: border-box;
    line-height: 1.2;
}

.news-category i {
    font-size: 24px;
    opacity: 0.9;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.category-exhibition {
    background: #3F9365; /* 綠色 */
}

.category-award {
    background: #AA805E; /* 棕色 */
}

.category-press {
    background: #408F93; /* 青色 */
}

.news-date {
    padding: 12px 24px;
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    /* font-family: 'Inter', sans-serif; */
    flex: 1;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-height: 48px;
    box-sizing: border-box;
    line-height: 1.2;
}

/* 日期使用與分類相同的背景色 */
.news-card:has(.category-exhibition) .news-date {
    background: #3F9365;
}

.news-card:has(.category-award) .news-date {
    background: #AA805E;
}

.news-card:has(.category-press) .news-date {
    background: #408F93;
}

.news-image {
    width: 100%;
    height: 220px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 5px;
    margin: 23px 0 0 0;
    border-radius: 3px;
}

.news-img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    border-radius: 3px;
    /* 优化图片渲染性能 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* 启用硬件加速 */
    transform: translateZ(0);
    will-change: transform;
}

.news-title {
    margin: 15px 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    /* font-family: 'Noto Sans TC', sans-serif; */
    text-align: center;
}

/* 標題使用與分類相同的顏色 */
.news-card:has(.category-exhibition) .news-title {
    color: #3F9365;
}

.news-card:has(.category-award) .news-title {
    color: #AA805E;
}

.news-card:has(.category-press) .news-title {
    color: #408F93;
}

.news-description {
    padding: 0 24px 24px;
    font-size: 14px;
    color: var(--text-light);
  
}

.news-source {
    font-size: 13px;
    display: block;
    margin-top: 12px;
}

.news-source a {
    color: var(--text-light);
    text-decoration: underline;
}

.news-source a:hover {
    color: var(--accent-green);
}

/* ============================================
   CONTACT SECTION - 深灰/黑色背景，顶部几何图案
   ============================================ */
.contact {
    background: var(--dark-gray);
    padding: 120px 0 0;
    position: relative;
    overflow: visible;
}

.contact-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 25px,
        rgba(107, 159, 61, 0.15) 25px,
        rgba(107, 159, 61, 0.15) 50px
    );
    z-index: 0;
}

.contact .container {
    position: relative;
    z-index: 1;
}

.contact-title {
    text-align: center;
    margin-bottom: 60px;
    color: #49C080;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 40px;
    margin-bottom: 60px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 2px;
    white-space: nowrap;
    min-width: 80px;
}

.contact-value-box {
    background: #49C080;
    border-radius: 45px;
    padding: 5px 20px;
    flex: 1;
    display: flex;
    align-items: center;
}

.contact-value {
    font-size: 16px;
    color:#000;
    line-height: 1.5;
}

.social-box {
    padding: 8px 20px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: transform 0.3s ease;
    background: #49C080; /* 亮綠色背景，與設計一致 */
    border-radius: 50%;
    border: none;
}

.social-icon:hover {
    transform: scale(1.1);
    background: #5dd095; /* 懸停時稍亮的綠色 */
}

.social-icon svg {
    width: 20px;
    height: 20px;
    fill: #000;
}

.map-container {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    height: 60vh;
    min-height: 500px;
    max-height: 700px;
    position: relative;
    background: #0b1413; /* 與 tile 背景色對齊，讓接縫視覺上消失 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.map-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Leaflet 地圖樣式 - 避免 tile 接縫問題 */
/* 暫時移除所有 filter，查看原始瓦片的文字清晰度 */
.leaflet-tile-pane {
    filter: none;
}

/* 確保單個 tile 沒有 filter，避免接縫 */
.leaflet-tile {
    filter: none !important;
    /* 設置背景色與地圖底色對齊，讓細微接縫視覺上消失 */
    background-color: #0b1413 !important;
    /* 移除可能的邊框或間隙 */
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 地圖容器和所有相關元素背景色對齊 */
.map-container,
.map-container .leaflet-container,
.map-container .leaflet-pane,
.map-container .leaflet-map-pane {
    background: #0b1413 !important;
}

/* 暫時移除覆蓋層，查看原始瓦片的文字清晰度 */
/* 如果需要調整文字顏色，可以重新啟用以下代碼 */
/*
.leaflet-tile-pane::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%),
        radial-gradient(circle at 50% 50%, rgba(30, 142, 89, 0.05) 0%, transparent 60%);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.3;
    z-index: 1;
}
*/

/* Leaflet 地圖容器背景 */
#map {
    background: #0b1413 !important;
}

#map .leaflet-container {
    background: #0b1413 !important;
}

/* 確保 tile 載入前的背景色 */
.leaflet-tile-container {
    background-color: #0b1413 !important;
}

/* 自訂標記樣式 */
.custom-marker {
    background: transparent !important;
    border: none !important;
}

/* 自訂標籤樣式標記 */
.custom-tag-marker {
    background: transparent !important;
    border: none !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .about-content,
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .subsidiaries-grid {
        grid-template-columns: 1fr;
    }
    
    .macs-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .section-title {
        font-size: 3.75em; /* 60px based on 16px - keep same as desktop */
    }
    
    .section-title-white {
        font-size: 3.75em; /* 60px based on 16px - keep same as desktop */
    }
    
    .macs-title {
        font-size: 5.5em; /* 88px based on 16px */
    }
}

@media (max-width: 768px) {
    /* 手机版：显示手机版换行，隐藏桌面版换行 */
    .desktop-br {
        display: none;
    }
    
    .mobile-br {
        display: block;
    }
    
    .section-description .desc-line-1,
    .section-description .desc-line-2 {
        display: block;
        margin-bottom: 8px;
    }
    
    .hero-title {
        font-size: 48px;
        letter-spacing: 3px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    .section-title,
    .section-title-white {
        font-size: 3.5em; /* 56px based on 16px */
        letter-spacing: 0.05em;
    }
    
    .macs-title {
        font-size: 4.5em; /* 72px based on 16px */
        letter-spacing: 0.08em;
    }
    
    .news .container {
        padding: 0 10px;
    }
    
    /* 手机版：优化 News section 排版 */
    .news-tabs {
        gap: 10px;
        margin-bottom: 30px;
    }
    
    .news-tab-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .news-container {
        padding: 0 3px;
        gap: 6px;
        align-items: flex-start; /* 手机版：使用 flex-start，避免内容被切掉 */
    }
    
    .news-nav-btn {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }
    
    .news-nav-btn svg {
        width: 16px;
        height: 16px;
    }

    /* ============================================
       手机版 About 區塊完整修復方案
       確保顯示米色背景，視頻疊加在上面
       重點：移除所有可能觸發 compositing 的屬性
       ============================================ */
    .about {
        position: relative !important;
        overflow: hidden !important;
        background: var(--beige) !important; /* 確保米色背景顯示 */
        padding: 80px 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 確保所有 sections 的內容可見 */
    .about .container,
    .about .about-content,
    .about .subsidiaries-grid,
    .technology .container,
    .subsidiaries .container,
    .news .container,
    .contact .container {
        position: relative !important;
        z-index: 3 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 手機版：關閉 About 區塊本身的 transform 動畫，避免多餘合成層 */
    section.about.animated {
        transform: none !important;
        will-change: auto !important;
    }
    
    /* 手机版：背景圖在最底層，稍微降低透明度讓視頻更明顯 */
    .about::before {
        display: block !important;
        content: '' !important;
        position: absolute;
        top: 0 !important;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../images/m_bg04.gif') !important;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0 !important; /* 最底層 */
        opacity: 0.6 !important; /* 降低背景圖透明度，讓視頻更明顯 */
        visibility: visible !important;
        transform: none !important;
    }
    
    /* 隱藏裝飾性 pattern */
    .about-pattern {
        display: none !important;
    }
    
    /* 手機版：視頻容器 - 簡化設置，確保正常顯示 */
    section.about .about-video,
    section.about #aboutVideoContainer,
    .about .about-video,
    .about #aboutVideoContainer,
    .about-video,
    #aboutVideoContainer {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* 桌面版：確保視頻容器正常顯示（如果沒有被抽離） */
    @media (min-width: 769px) {
        .about-video,
        #aboutVideoContainer {
            position: absolute !important; /* 桌面版保持 absolute */
            top: -20% !important;
            left: 0 !important;
            width: 100% !important;
            height: 140% !important;
            z-index: 1 !important;
            opacity: 0.2 !important; /* 桌面版保持原來的透明度 */
        }
    }
    
    /* 禁用混合於行動裝置 - 最簡短、立刻緩解方案 */
    /* 若 overlay 是放在 container ::before，這裡改 container 的 mix-blend-mode */
    #aboutVideoContainer.about-video::before,
    #aboutVideoContainer.about-video::after,
    .about-video::before,
    .about-video::after {
        mix-blend-mode: normal !important;
        -webkit-mix-blend-mode: normal !important;
        /* 改用半透明遮罩達成類似視覺效果 */
        background: rgba(0, 0, 0, 0.35) !important;
    }
    
    /* 確保 HTML5 video 有正確的 cover 設定，避免高度被拉長 */
    /* 注意：這個規則會覆蓋上面媒體查詢中的設置，確保高度正常 */
    #aboutVideoPlayer {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 120% !important; /* 保持放大效果 */
        height: 120% !important;
        max-height: 120% !important; /* 限制最大高度 */
        transform: translate(-50%, -50%) !important; /* 居中，但避免使用 scale */
        object-fit: cover !important;
        object-position: center !important;
        min-width: 100% !important; /* 確保覆蓋整個容器 */
        min-height: 100% !important;
        aspect-ratio: 16 / 9 !important; /* YouTube 標準比例 */
    }
    
    /* 如果視頻容器被隱藏（display: none），確保背景圖顯示 */
    #aboutVideoContainer[style*="display: none"],
    #aboutVideoContainer[style*="display:none"] {
        display: none !important;
    }
    
    /* 移除偽元素 overlay，使用原本的 .about-video-overlay */
    
    /* 恢復 overlay 的正常顯示 */
    .about-video-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(250, 248, 243, 0.3) !important;
        z-index: 2 !important;
        pointer-events: none !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        mix-blend-mode: normal !important;
    }
    
    /* 確保內容在視頻上方 */
    .about .container,
    .about-content {
        position: relative;
        z-index: 10 !important; /* 提高層級，確保在視頻上方 */
        background: transparent;
    }
    
    .news-card {
        min-width: calc(100vw - 100px);
        max-width: calc(100vw - 100px);
        width: calc(100vw - 100px); /* 手机版：固定宽度 */
    }
    
    .news-slider {
        display: flex; /* 手机版：改回flex布局，单张显示 */
        grid-template-columns: none; /* 清除grid设置 */
        gap: 12px;
        padding: 10px 5px;
    }
    
    /* 优化新闻卡片 header */
    .news-category {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .news-category i {
        font-size: 18px;
    }
    
    .news-date {
        padding: 10px 16px;
        font-size: 11px;
    }
    
    .macs-applications {
        grid-template-columns: 1fr;
    }
    
    /* 手机版：调整 MACS section 布局，logo 移到上方 */
    .macs-section {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    
    .macs-content {
        order: -1; /* logo 移到最上方 */
        width: 100%;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    .macs-wrapper {
        order: 0; /* 文字内容在中间 */
        width: 100%;
    }
    
    .macs-applications {
        order: 1; /* 应用卡片在下方 */
    }
    
    .news-card {
        min-width: 300px;
    }
    
    .hero-floating-icon {
        width: 60px;
        height: 60px;
    }
    
    .icon-top-left {
        top: 20%;
        left: 15%;
    }
    
    .icon-bottom-center {
        bottom: 18%;
        left: 42%;
    }
    
    .icon-right {
        top: 32%;
        right: 10%;
    }
    
    .about,
    .technology,
    .subsidiaries,
    .news,
    .contact {
        padding: 80px 0;
    }
    
    /* 手机版：切换为手机版背景图 */
    .hero-background {
        background-image: url('../images/m_bg01.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        opacity: 1 !important; /* 确保背景图显示 */
    }
    
    /* 手机版：确保 Hero section 正確顯示 */
    .hero {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        background: #0d1f05 !important; /* 深绿色背景作为后备 */
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 手机版：如果视频容器为空或隐藏，确保背景图可见 */
    .hero-video:empty,
    .hero-video[style*="display: none"],
    #heroVideoContainer:empty,
    #heroVideoContainer[style*="display: none"] {
        display: none !important;
    }
    
    .hero-background::after {
        display: block !important; /* 确保后备背景显示 */
    }
    
    /* 手机版：About 區塊不使用背景圖，改用影片背景 */
    /* .about::before {
        background-image: url('../images/m_bg04.gif') !important;
        opacity: 1 !important;
    } */
    
    .technology::before {
        background-image: url('../images/m_bg02.jpg') !important;
        top: -20%;
        height: 140%;
        background-size: cover;
        background-position: center center;
        opacity: 1 !important; /* 确保手机版显示 */
    }
    
    .subsidiaries::before {
        background-image: url('../images/m_bg03.jpg') !important;
        opacity: 1 !important; /* 确保手机版显示 */
    }
    
    .news::before {
        background-image: url('../images/m_bg05.jpg') !important;
        background-size: cover !important; /* 确保手机版也覆盖整个区域 */
        opacity: 1 !important; /* 手机版显示背景图 */
        top: 0 !important; /* 确保从顶部开始 */
        height: 100% !important; /* 确保覆盖整个高度 */
    }
    
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .contact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .contact-label {
        min-width: auto;
    }
    
    .map-container {
        height: 50vh;
        min-height: 400px;
        max-height: 600px;
    }
}

@media (max-width: 480px) {
    .hero {
        min-height: 600px;
    }
    
    .logo-text h1 {
        font-size: 24px;
    }
    
    .hero-title {
        font-size: 36px;
        letter-spacing: 2px;
    }
    
    .section-title,
    .section-title-white {
        font-size: 2.625em; /* 42px based on 16px */
        letter-spacing: 0.03em;
    }
    
    .macs-title {
        font-size: 3.5em; /* 56px based on 16px */
        letter-spacing: 0.06em;
    }
    
    .container {
        padding: 0 15px;
    }
    
    .news .container {
        padding: 0 5px;
    }
    
    /* 小屏幕：进一步优化 News section 排版 */
    .news .section-title {
        margin-bottom: 30px;
        font-size: 2.5em;
    }
    
    .news-tabs {
        gap: 8px;
        margin-bottom: 25px;
        justify-content: center;
    }
    
    .news-tab-btn {
        padding: 8px 16px;
        font-size: 13px;
        border-width: 1.5px;
    }
    
    .news-container {
        padding: 0 2px;
        gap: 4px;
        align-items: flex-start; /* 手机版：使用 flex-start，避免内容被切掉 */
    }
    
    .news-nav-btn {
        width: 28px;
        height: 28px;
    }
    
    .news-nav-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .news-card {
        min-width: calc(100vw - 80px);
        max-width: calc(100vw - 80px);
        width: calc(100vw - 80px); /* 小屏幕：固定宽度 */
        flex-shrink: 0;
    }
    
    .news-slider {
        display: flex; /* 小屏幕：改回flex布局，单张显示 */
        grid-template-columns: none; /* 清除grid设置 */
        gap: 10px;
        padding: 10px 2px;
    }
    
    .news-image {
        height: 180px;
        margin: 15px 0 0 0;
    }
    
    .news-title {
        font-size: 18px;
        margin: 12px 0;
    }
    
    .news-description {
        padding: 0 20px 20px;
        font-size: 13px;
    }
    
    /* 进一步优化小屏幕的新闻卡片 header */
    .news-category {
        padding: 8px 12px;
        font-size: 12px;
        min-height: 40px;
    }
    
    .news-category i {
        font-size: 16px;
    }
    
    .news-date {
        padding: 8px 12px;
        font-size: 10px;
        min-height: 40px;
    }
    
    /* 小屏幕：确保 MACS logo 在上方 */
    .macs-section {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
    
    .macs-content {
        order: -1;
        width: 100%;
        justify-content: center;
        margin-bottom: 15px;
    }
    
    .macs-wrapper {
        order: 0;
        width: 100%;
    }
    
    .macs-applications {
        order: 1;
    }
    
    .about,
    .technology,
    .subsidiaries,
    .news,
    .contact {
        padding: 60px 0;
    }
    
    /* 小屏幕：确保 technology 背景图片显示 */
    .technology::before {
        background-image: url('../images/m_bg02.jpg') !important;
        top: -5%;
        height: 110%;
        background-size: cover;
        background-position: center center;
        opacity: 1 !important;
    }
    
    .hero-floating-icon {
        width: 48px;
        height: 48px;
    }
    
    .icon-top-left {
        top: 18%;
        left: 12%;
    }
    
    .icon-bottom-center {
        bottom: 16%;
        left: 38%;
    }
    
    .icon-right {
        top: 35%;
        right: 6%;
    }
}

/* Footer Styles */
.footer {
    background: var(--dark-gray);
    padding: 15px 0 15px;
    border-top: 1px solid rgba(73, 192, 128, 0.2);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-logo {
    flex-shrink: 0;
}

.footer-logo-img {
    height: 40px;
    width: auto;
    opacity: 0.9;
}

.footer-info {
    flex: 1;
    min-width: 200px;
}

.footer-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
    font-family: 'Noto Sans TC', sans-serif;
}

.footer-social {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

.footer-social-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(73, 192, 128, 0.1);
    border-radius: 50%;
    border: 1px solid rgba(73, 192, 128, 0.3);
}

.footer-social-icon:hover {
    color: var(--white);
    background: #49C080;
    border-color: #49C080;
    transform: translateY(-2px);
}

.footer-social-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Footer Responsive */
@media (max-width: 768px) {
    .footer {
        padding: 40px 0 30px;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }
    
    .footer-info {
        order: 3;
    }
    
    .footer-social {
        order: 2;
    }
    
    .footer-logo {
        order: 1;
    }
    
    .footer-text {
        font-size: 13px;
    }
}