/* 頁首背景輪播樣式 */
        .header-slideshow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .header-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
        }

        .header-slide.active {
            opacity: 1;
        }

        /* 統一濾鏡層 - 深色漸層 + 去飽和 */
        .header-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                135deg,
                rgba(30, 60, 80, 0.75) 0%,
                rgba(28, 97, 86, 0.65) 50%,
                rgba(50, 70, 90, 0.7) 100%
            );
            z-index: 2;
            backdrop-filter: saturate(0.7) brightness(0.95);
        }

        /* 向下滾動提示 */
        .scroll-indicator {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            color: rgba(255,255,255,0.7);
            font-size: 0.75rem;
            letter-spacing: 2px;
        }

        .scroll-line {
            width: 1px;
            height: 40px;
            background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.2));
            animation: scrollPulse 2s ease-in-out infinite;
        }

        @keyframes scrollPulse {
            0%, 100% { opacity: 0.5; transform: scaleY(1); }
            50% { opacity: 1; transform: scaleY(1.2); }
        }

        /* 覆蓋原本的 page-header 背景 */
        .page-header {
            background: none !important;
            position: relative;
            overflow: hidden;
            padding: 10rem 0 8rem;
            min-height: 50vh;
        }
        /* 覆蓋 style.css 的 page-title 深色 !important，強制白色 */
        .page-header .page-title {
            color: #fff !important;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        /* banner 內容靠左（與 AI 企業解決方案相同） */
        .page-header .container {
            margin-left: 4rem;
            margin-right: auto;
        }

/* ========================================
           淺色高潔風格 - 服務項目總覽
           ======================================== */

        .service-overview-section {
            position: relative;
            min-height: 85vh;
            width: 100%;
            overflow: hidden;
            display: flex;
        }

        /* 淺色漸層背景 */
        .light-ambient-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, #F2F9F7 60%, #E6F0ED 100%);
            z-index: 0;
            overflow: hidden;
        }

        /* 背景光暈效果 - 第一個光暈 */
        .light-ambient-bg::before {
            content: '';
            position: absolute;
            width: 700px;
            height: 700px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(45, 125, 107, 0.12) 0%, transparent 70%);
            filter: blur(100px);
            top: -150px;
            left: -100px;
            animation: floatGlow1 25s ease-in-out infinite;
        }

        /* 背景光暈效果 - 第二個光暈 */
        .light-ambient-bg::after {
            content: '';
            position: absolute;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(74, 222, 128, 0.10) 0%, transparent 70%);
            filter: blur(100px);
            bottom: -100px;
            right: -50px;
            animation: floatGlow2 30s ease-in-out infinite;
        }

        @keyframes floatGlow1 {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
            33% { transform: translate(50px, -80px) scale(1.1); opacity: 0.8; }
            66% { transform: translate(-30px, 60px) scale(0.95); opacity: 0.7; }
        }

        @keyframes floatGlow2 {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
            33% { transform: translate(-60px, 40px) scale(1.15); opacity: 0.7; }
            66% { transform: translate(40px, -50px) scale(0.9); opacity: 0.6; }
        }

        /* 精密導航網格 */
        .precision-grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                linear-gradient(rgba(45, 125, 107, 0.03) 0.5px, transparent 0.5px),
                linear-gradient(90deg, rgba(45, 125, 107, 0.03) 0.5px, transparent 0.5px);
            background-size: 40px 40px;
            z-index: 1;
            pointer-events: none;
        }

        /* 極淡流體線條 */
        .ambient-fluid-lines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }

        .ambient-line {
            fill: none;
            stroke: url(#lightFluidGradient);
            stroke-width: 1.5;
            stroke-linecap: round;
            animation: ambientFlow 25s ease-in-out infinite;
        }

        .ambient-line:nth-child(2) { animation-delay: -6s; stroke-width: 1; }
        .ambient-line:nth-child(3) { animation-delay: -12s; stroke-width: 2; }
        .ambient-line:nth-child(4) { animation-delay: -18s; stroke-width: 1; }

        @keyframes ambientFlow {
            0%, 100% {
                stroke-dasharray: 0, 2000;
                stroke-dashoffset: 0;
            }
            50% {
                stroke-dasharray: 800, 2000;
                stroke-dashoffset: -400;
            }
        }

        /* 微弱粒子 */
        .subtle-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3;
            pointer-events: none;
            overflow: hidden;
        }

        .subtle-particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: radial-gradient(circle, rgba(45, 125, 107, 0.15) 0%, transparent 70%);
            border-radius: 50%;
            animation: subtleFloat 20s ease-in-out infinite;
        }

        .subtle-particle:nth-child(1) { left: 15%; top: 25%; animation-delay: 0s; }
        .subtle-particle:nth-child(2) { left: 30%; top: 65%; animation-delay: -4s; }
        .subtle-particle:nth-child(3) { left: 55%; top: 20%; animation-delay: -8s; }
        .subtle-particle:nth-child(4) { left: 70%; top: 75%; animation-delay: -12s; }
        .subtle-particle:nth-child(5) { left: 85%; top: 35%; animation-delay: -16s; }
        .subtle-particle:nth-child(6) { left: 45%; top: 85%; animation-delay: -20s; }

        @keyframes subtleFloat {
            0%, 100% { transform: translate(0, 0); opacity: 0.3; }
            25% { transform: translate(20px, -30px); opacity: 0.5; }
            50% { transform: translate(-15px, -50px); opacity: 0.4; }
            75% { transform: translate(25px, -25px); opacity: 0.5; }
        }

        /* 波紋效果容器 */
        .ripple-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 4;
            pointer-events: none;
            overflow: hidden;
        }

        .ripple {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(45, 125, 107, 0.15);
            animation: rippleExpand 1.2s ease-out forwards;
        }

        @keyframes rippleExpand {
            0% {
                width: 0;
                height: 0;
                opacity: 0.5;
            }
            100% {
                width: 300px;
                height: 300px;
                opacity: 0;
            }
        }

        /* ========================================
           主要內容區佈局
           ======================================== */
        .overview-content {
            position: relative;
            z-index: 10;
            display: flex;
            width: 100%;
            min-height: 85vh;
        }

        /* ========================================
           左側導覽區
           ======================================== */
        .side-navigation {
            width: 30%;
            min-width: 320px;
            max-width: 400px;
            padding: 4rem 2.5rem 4rem 4rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            z-index: 20;
            background: transparent;
        }

        /* 分隔線 */
        .side-navigation::after {
            content: '';
            position: absolute;
            right: 0;
            top: 10%;
            height: 80%;
            width: 1px;
            background: linear-gradient(
                to bottom,
                transparent 0%,
                rgba(45, 125, 107, 0.15) 20%,
                rgba(45, 125, 107, 0.25) 50%,
                rgba(45, 125, 107, 0.15) 80%,
                transparent 100%
            );
        }

        /* 導航介紹區 */
        .nav-intro {
            margin-bottom: 3rem;
        }

        .nav-eyebrow {
            font-family: 'Noto Sans TC', sans-serif;
            font-size: 0.7rem;
            font-weight: 500;
            color: #2D7D6B;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            margin-bottom: 0.875rem;
        }

        .nav-main-title {
            font-family: 'Noto Sans TC', sans-serif;
            font-size: 2.25rem;
            font-weight: 400;
            color: #0d1f1c;
            line-height: 1.4;
            margin-bottom: 1rem;
        }

        .nav-description {
            font-family: 'Noto Sans TC', sans-serif;
            font-size: 1.05rem;
            color: #3A4A4E;
            line-height: 1.8;
            font-weight: 400;
        }

        /* 分類區塊 */
        .nav-category {
            margin-bottom: 2rem;
        }

        .category-label {
            font-family: 'Noto Sans TC', sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            color: #145c50;
            letter-spacing: 0.08em;
            margin-bottom: 1rem;
            padding-left: 0.5rem;
            position: relative;
        }

        .category-label::before {
            content: '';
            position: absolute;
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 16px;
            background: linear-gradient(135deg, #2D7D6B, #4ade80);
            border-radius: 2px;
        }

        /* 導航項目 */
        .nav-items {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: transparent;
        }

        .item-indicator {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: transparent;
            border: 1.5px solid rgba(45, 125, 107, 0.3);
            transition: all 0.4s ease;
            flex-shrink: 0;
        }

        .item-text {
            font-family: 'Noto Sans TC', sans-serif;
            font-size: 1.15rem;
            font-weight: 500;
            color: #1A2A2E;
            transition: all 0.4s ease;
            letter-spacing: 0.03em;
        }

        .nav-item:hover {
            background: rgba(45, 125, 107, 0.04);
        }

        .nav-item:hover .item-indicator {
            border-color: #2D7D6B;
            background: rgba(45, 125, 107, 0.2);
        }

        .nav-item:hover .item-text {
            color: #1c6156;
            font-weight: 500;
        }

        .nav-item.active {
            background: rgba(45, 125, 107, 0.06);
        }

        .nav-item.active .item-indicator {
            background: #2D7D6B;
            border-color: #2D7D6B;
            box-shadow: 0 0 8px rgba(45, 125, 107, 0.4);
        }

        .nav-item.active .item-text {
            color: #1c6156;
            font-weight: 600;
        }

        /* ========================================
           右側內容展示區
           ======================================== */
        .dynamic-content-area {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3rem;
            overflow: hidden;
        }

        /* 圖片層 */
        .image-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .service-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transform: scale(1.03);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .service-image.active {
            opacity: 1;
            transform: scale(1);
        }

        .service-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: saturate(0.85) brightness(0.95);
            /* 圖片羽化遮罩 */
            mask-image: linear-gradient(
                to right,
                transparent 0%,
                rgba(0,0,0,0.3) 10%,
                rgba(0,0,0,0.7) 40%,
                rgba(0,0,0,0.9) 70%,
                rgba(0,0,0,0.6) 100%
            );
            -webkit-mask-image: linear-gradient(
                to right,
                transparent 0%,
                rgba(0,0,0,0.3) 10%,
                rgba(0,0,0,0.7) 40%,
                rgba(0,0,0,0.9) 70%,
                rgba(0,0,0,0.6) 100%
            );
        }

        /* 圖片淺色濾鏡層 */
        .service-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                135deg,
                rgba(248, 250, 250, 0.3) 0%,
                rgba(245, 248, 247, 0.15) 50%,
                rgba(248, 250, 250, 0.25) 100%
            );
            z-index: 2;
        }

        /* 預設狀態 */
        .default-state {
            position: relative;
            z-index: 10;
            text-align: center;
            transition: all 0.5s ease;
        }

        .default-state.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .default-icon {
            color: rgba(45, 125, 107, 0.25);
            margin-bottom: 1rem;
        }

        .default-text {
            font-family: 'Noto Sans TC', sans-serif;
            font-size: 0.95rem;
            color: #8A9A9E;
            font-weight: 300;
            line-height: 1.8;
            letter-spacing: 0.03em;
        }

        /* 詳細內容疊加層 */
        .detail-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 15;
            width: 90%;
            max-width: 620px;
            max-height: 85%;
            overflow-y: auto;
            opacity: 0;
            pointer-events: none;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .detail-overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .detail-overlay.visible .detail-content {
            transform: translateY(0);
        }

        .detail-content {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 2.5rem 3rem;
            box-shadow:
                0 20px 60px rgba(0, 45, 35, 0.08),
                0 8px 25px rgba(0, 45, 35, 0.05);
            transform: translateY(20px);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .detail-badge {
            display: inline-block;
            padding: 0.375rem 1rem;
            background: linear-gradient(135deg, rgba(45, 125, 107, 0.1), rgba(45, 125, 107, 0.05));
            border: 1px solid rgba(45, 125, 107, 0.2);
            border-radius: 20px;
            color: #2D7D6B;
            font-family: 'Noto Sans TC', sans-serif;
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            margin-bottom: 1.25rem;
        }

        .detail-title {
            font-family: 'Noto Sans TC', sans-serif;
            font-size: 2rem;
            font-weight: 500;
            color: #0d1f1c;
            margin-bottom: 0.75rem;
            line-height: 1.4;
        }

        .title-decoration {
            width: 60px;
            height: 2px;
            background: linear-gradient(90deg, #2D7D6B, rgba(45, 125, 107, 0.2));
            margin-bottom: 1.5rem;
            border-radius: 1px;
        }

        .detail-description {
            font-family: 'Noto Sans TC', 'PingFang TC', sans-serif;
            font-size: 1rem;
            color: #2A3A3E;
            line-height: 1.9;
            font-weight: 400;
            margin-bottom: 0;
        }

        /* 核心內容表格樣式 */
        .core-content-table {
            margin-bottom: 1.5rem;
        }

        .service-item {
            margin-bottom: 0.9rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid rgba(45, 125, 107, 0.1);
            font-family: 'Noto Sans TC', sans-serif;
        }

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

        .service-label {
            font-size: 1rem;
            font-weight: 400;
            color: #1c5c50;
            margin-bottom: 0.25rem;
        }

        .service-label::after {
            content: ' :';
        }

        .service-value {
            font-size: 1rem;
            font-weight: 400;
            color: #1A2A2E;
            line-height: 1.7;
        }

        /* 服務介紹標籤 */
        .service-intro {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(45, 125, 107, 0.1);
        }

        .intro-label {
            font-family: 'Noto Sans TC', sans-serif;
            font-size: 1rem;
            font-weight: 400;
            color: #1c5c50;
            margin-bottom: 0.5rem;
        }

        .intro-label::after {
            content: ' :';
        }

        /* 行動按鈕 - 玻璃擬態 */
        .detail-actions {
            margin-top: 2rem;
            display: flex;
            gap: 1rem;
            justify-content: center;
        }

        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.875rem 1.5rem;
            border-radius: 10px;
            font-family: 'Noto Sans TC', sans-serif;
            font-size: 0.875rem;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .action-primary {
            background: linear-gradient(135deg, #1c6156 0%, #2D7D6B 100%);
            color: #ffffff;
            border: none;
            box-shadow: 0 4px 15px rgba(28, 97, 86, 0.3);
        }

        .action-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(28, 97, 86, 0.4);
        }

        .action-secondary {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            color: #2D7D6B;
            border: 1px solid rgba(45, 125, 107, 0.2);
            box-shadow: 0 2px 10px rgba(0, 45, 35, 0.05);
        }

        .action-secondary:hover {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(45, 125, 107, 0.4);
            box-shadow: 0 4px 15px rgba(0, 45, 35, 0.08);
        }

        /* ========================================
           響應式設計
           ======================================== */
        @media (max-width: 1200px) {
            .side-navigation {
                width: 35%;
                min-width: 280px;
                padding: 3rem 2rem 3rem 3rem;
            }

            .nav-main-title {
                font-size: 1.75rem;
            }
        }

        @media (max-width: 1024px) {
            .overview-content {
                flex-direction: column;
            }

            .side-navigation {
                width: 100%;
                max-width: none;
                min-width: auto;
                padding: 2rem;
                order: 2;
            }

            .side-navigation::after {
                display: none;
            }

            .dynamic-content-area {
                min-height: 50vh;
                order: 1;
            }

            .nav-category {
                margin-bottom: 1.5rem;
            }

            .nav-items {
                flex-direction: row;
                flex-wrap: wrap;
                gap: 0.5rem;
            }

            .nav-item {
                padding: 0.5rem 0.875rem;
            }

            .item-text {
                font-size: 0.85rem;
            }

            .detail-content {
                padding: 2rem;
            }
        }

        @media (max-width: 768px) {
            .nav-main-title {
                font-size: 1.5rem;
            }

            .nav-intro {
                margin-bottom: 2rem;
            }

            .detail-content {
                padding: 1.5rem;
            }

            .detail-title {
                font-size: 1.375rem;
            }

            .detail-description {
                font-size: 0.9rem;
            }

            .detail-actions {
                flex-direction: column;
            }

            .action-btn {
                justify-content: center;
            }
        }

        @media (max-width: 640px) {
            .side-navigation {
                padding: 1.5rem;
            }

            .nav-items {
                gap: 0.375rem;
            }

            .nav-item {
                padding: 0.5rem 0.75rem;
            }

            .item-text {
                font-size: 0.8rem;
            }

            .category-label {
                font-size: 0.8rem;
            }
        }


/* === 轉換自 inline style="" === */
.is-b1f54b6a {
    position: relative;
    overflow: hidden;
    padding: 10rem 0 8rem;
    min-height: 50vh;
}

.is-eb5005ab {
    background-image: url('../../assets/images/corporate-ai/corporate-esg01.jpg');
    background-position: center 25%;
}

.is-b2da9be7 {
    background-image: url('../../assets/images/corporate-ai/corporate-esg02.jpg');
    background-position: right 40% center;
}

.is-3b23a154 {
    background-image: url('../../assets/images/corporate-ai/corporate-esg03.jpg');
}

.is-4d8c1345 {
    position: relative;
    z-index: 10;
}

.is-6bf739c4 {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.is-731b0d67 {
    color: rgba(255,255,255,0.9);
}

.is-4f35d476 {
    stop-color: rgba(45, 125, 107, 0.06);
}

.is-7549b80d {
    stop-color: rgba(45, 125, 107, 0.08);
}

.is-a94d562d {
    stop-color: rgba(45, 125, 107, 0.04);
}