body {
        padding-top: 56px;
        background-color: #7baef0;
    }
    
    .left-aligned {
        margin-left: auto;
    }
    
    .bg-dark {
        background-color: #343a40 !important;
    }
    /*上面原来一大块绿色的"家"*/
    /*要删掉！！！！*/
    
    .bg-hero {
        background-color: #82AEF9;
    }
    /* 防止页面滚动 */
    
    .no-scroll {
        overflow: hidden;
        height: 100vh;
    }
    /* 最终Logo样式 - 在所有页面显示 */
    
    .logo-final {
        position: fixed;
        top: 20px;
        left: 20px;
        width: 120px;
        /* 放大两倍 */
        height: 120px;
        /* 放大两倍 */
        opacity: 1;
        z-index: 10000;
        object-fit: contain;
        pointer-events: none;
        /* 防止干扰页面交互 */
    }
    /* 单行容器 - 所有图片在同一行，占据整个宽度 */
    
    .single-row-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    /* 左侧重叠容器 - home1.1 和 home1.4 */
    
    .overlap-container-left {
        position: relative;
        width: 45%;
        max-width: 800px;
        display: flex;
        justify-content: flex-start;
        margin-left: 0;
    }
    /* home1.1 样式 - 贴紧网页左边 */
    
    .home-1-1 {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
    }
    
    .home-1-1:hover {
        transform: scale(1.01);
    }
    /* home1.4 样式 - 覆盖在 home1.1 上方 */
    
    .home-1-4 {
        position: absolute;
        top: 13%;
        right: 0;
        width: 42%;
        height: auto;
        z-index: 5;
        transition: transform 0.3s ease;
    }
    
    .home-1-4:hover {
        transform: scale(1.01);
    }
    /* 右侧重叠容器 - home1.2 和 home1.3 */
    
    .overlap-container-right {
        position: relative;
        width: 45%;
        max-width: 800px;
        margin-right: 0;
        transform: translateX(-100px);
        /* 向左移动50px，根据需要调整数值 */
    }
    /* home1.2 样式 */
    
    .home-1-2 {
        top: 16%;
        left: 30%;
        width: 125%;
        height: auto;
        display: block;
        transition: transform 0.3s ease;
        position: relative;
        left: -70px;
        /* 向左移动50px，根据需要调整数值 */
    }
    
    .home-1-2:hover {
        transform: scale(1.01);
    }
    /* home1.3 样式 - 与 home1.2 重叠且在上方 */
    
    .home-1-3 {
        position: absolute;
        top: 16%;
        left: 0;
        width: 100%;
        /* 使用百分比宽度 */
        height: auto;
        /* 高度自适应 */
        max-height: 400px;
        /* 设置最大高度 */
        z-index: 10;
        /* 确保在上方 */
        cursor: crosshair;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    .col-lg-12 {
        white-space: nowrap;
        font-size: 0;
    }
    /* 地球交互容器新样式 */
    
    .earth-interactive-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    /* ========== 地球交互样式 - 新增部分 ========== */
    /* 数据弹出框 - 改进样式*/
    
    .popup-data {
        position: absolute;
        background: linear-gradient(135deg, #1a2980, #26d0ce);
        color: white;
        padding: 0;
        border-radius: 15px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
        font-family: "Comic Sans MS", cursive;
        z-index: 1000;
        pointer-events: none;
        opacity: 0;
        transform: translateY(20px) scale(0.9);
        transition: all 0.2s ease-out;
        min-width: 180px;
        border: 2px solid rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(10px);
    }
    /* 测试数据弹出框的代码 
.popup-data {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: red;
    //使用醒目的颜色
    z-index: 10000;
}*/
    
    .popup-data.show {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    
    .popup-content {
        padding: 20px;
        text-align: center;
    }
    
    .region-name {
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 8px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    }
    
    .region-data {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 8px;
        color: #FFD700;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    
    .region-desc {
        font-size: 1rem;
        opacity: 0.9;
        line-height: 1.4;
    }
    
    .popup-data::after {
        content: '';
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid #1a2980;
    }
    /* 区域高亮效果 */
    
    .region-highlight {
        position: absolute;
        background: rgba(255, 215, 0, 0.3);
        border: 2px solid rgba(255, 215, 0, 0.6);
        border-radius: 8px;
        z-index: 5;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    
    .region-highlight.active {
        opacity: 1;
    }
    /* ========== 地球交互样式结束 ========== */
    
    @media (max-width: 768px) {
        .single-row-container {
            flex-direction: column;
            gap: 20px;
            padding: 0 10px;
        }
        .overlap-container-left,
        .overlap-container-right {
            width: 100%;
            max-width: none;
            margin-bottom: 15px;
        }
        .home-1-3 {
            width: 100%;
            height: auto;
            max-height: 300px;
        }
        .earth-interactive-container {
            width: 100%;
            height: auto;
        }
        .col-lg-12 {
            white-space: normal;
            font-size: inherit;
        }
        /* 响应式地球交互样式 */
        .popup-data {
            min-width: 160px;
            transform: translateY(10px) scale(0.95);
        }
        .region-name {
            font-size: 1.2rem;
        }
        .region-data {
            font-size: 1.6rem;
        }
        .region-desc {
            font-size: 0.9rem;
        }
    }
    /*网页前端右下角的小牛管家，吉祥物*/
    
    .mascot-nenu {
        position: fixed;
        bottom: 1px;
        right: 1px;
        max-width: 600px;
        z-index: 9999;
    }
    /* CALLOUT */
    
    .bd-callout {
        padding: 1.25rem;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        border: 1px solid #e9ecef;
        border-left-width: 0.25rem;
        border-radius: 0.25rem;
    }
    
    .bd-callout h4 {
        margin-bottom: 0.25rem;
    }
    
    .bd-callout p:last-child {
        margin-bottom: 0;
    }
    
    .bd-callout code {
        border-radius: 0.25rem;
    }
    
    .bd-callout+.bd-callout {
        margin-top: -0.25rem;
    }
    
    .bd-callout-info {
        border-left-color: #5bc0de;
    }
    
    .bd-callout-warning {
        border-left-color: #f0ad4e;
    }
    
    .bd-callout-danger {
        border-left-color: #d9534f;
    }
    /* footer */
    
    footer a {
        color: white;
        font-weight: bold;
        text-decoration: none;
    }
    
    footer a:hover {
        color: white;
        text-decoration: underline;
    }
    /* 1. 把导航栏背景色改成 D2DEED */
    
    .navbar {
        background-color: #D2DEED !important;
    }
    /* 2. 把导航栏字体改成 Comic Sans MS */
    
    .navbar,
    .navbar a {
        font-family: "Comic Sans MS", "Comic Sans", cursive;
    }
    /* 1. 隐藏浏览器原生滚动条（仅 WebKit & Firefox） */
    
    html {
        scrollbar-width: none;
        /* Firefox */
    }
    
    body::-webkit-scrollbar {
        width: 0;
        /* Chrome/Edge/Safari */
    }
    /* 2. 伪轨道容器：固定在右侧，占满视口高度 */
    
    .scroll-track {
        position: fixed;
        top: 0;
        right: 0;
        width: 8px;
        /* 轨道宽度 */
        height: 100vh;
        background: linear-gradient(to bottom, #D2DEED, #82AEF9);
        z-index: 9999;
        /* 确保在最上层 */
        pointer-events: none;
        /* 让鼠标事件透下去，不影响正文 */
    }
    /* 3. 伪滑块 */
    
    .scroll-thumb {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.7);
        /* 半透明白色，可改 */
        border-radius: 4px;
        transition: height .1s, top .1s;
    }
    /* 整体导航栏容器 */
    /* 导航栏整体样式 */
    
    #odd-navbar {
        background: #D2DEED !important;
        padding: 0;
    }
    
    .nav-container {
        display: flex;
        align-items: center;
        height: 64px;
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 1rem;
    }
    /* 左侧半圆 Logo */
    
    .semi-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 160px;
        height: 160px;
        background: #D2DEED;
        color: #fff;
        font-family: Arial, sans-serif;
        font-weight: bold;
        font-size: 1.2rem;
        border-radius: 50%;
        position: relative;
        left: -80px;
        margin-right: -80px;
        z-index: 2;
        text-decoration: none;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        order: -1;
        margin-left: -60px;
    }
    
    .semi-circle:hover {
        background: #a8c6e0;
        transform: scale(1.05);
    }
    /* 菜单项间距与字体 */
    
    .navbar-nav {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin: 0;
    }
    /* 一级导航链接样式 */
    
    .nav-link {
        color: #000000 !important;
        /* 黑色字体 */
        font-family: Arial, sans-serif !important;
        font-size: 1.1rem !important;
        /* 比原来大一号 */
        font-weight: 500;
        padding: 0.8rem 1.2rem !important;
        border-radius: 4px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    /* 一级导航链接悬停效果 */
    
    .nav-item .nav-link:hover,
    .nav-item .nav-link:focus {
        background-color: #08126D !important;
        /* 深蓝色背景 */
        color: #ffffff !important;
        /* 白色字体 */
    }
    /* 下拉菜单激活状态 */
    
    .nav-item.dropdown.show .nav-link {
        background-color: #08126D !important;
        color: #ffffff !important;
    }
    /* 下拉菜单样式 */
    
    .dropdown-menu {
        background-color: #D2DEED !important;
        /* 浅蓝色背景 */
        border: none;
        border-radius: 4px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        padding: 0.5rem 0;
        margin-top: 0.5rem;
    }
    /* 二级菜单项样式 */
    
    .dropdown-item {
        font-family: Arial, sans-serif !important;
        font-size: 1rem;
        color: #000000 !important;
        /* 黑色字体 */
        padding: 0.6rem 1.2rem !important;
        transition: all 0.2s ease;
        text-decoration: none;
    }
    /* 二级菜单项悬停效果 */
    
    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: #b8c9e6 !important;
        /* 稍深的蓝色 */
        color: #000000 !important;
    }
    /* 移动端折叠按钮颜色调整 */
    
    .navbar-toggler {
        border-color: rgba(0, 0, 0, .3) !important;
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
    /* 新增样式：确保导航内容正确排列 */
    
    .navbar-collapse {
        flex-grow: 0;
    }
    /* 响应式设计 */
    
    @media (max-width: 991px) {
        .navbar-nav {
            gap: 0.5rem;
        }
        .nav-link {
            padding: 0.6rem 1rem !important;
            font-size: 1rem !important;
        }
        .dropdown-menu {
            background-color: transparent !important;
            box-shadow: none;
            margin-top: 0;
            padding: 0;
        }
        .dropdown-item {
            padding-left: 2rem !important;
        }
    }
    /* 演示内容样式 */
    
    .demo-content {
        padding: 40px 20px;
        text-align: center;
        background: white;
        border-radius: 10px;
        margin: 30px 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .instructions {
        background: #e8f4fc;
        padding: 20px;
        border-radius: 8px;
        margin: 20px 0;
        border-left: 4px solid #3498db;
    }
    
    .code-block {
        background: #2d2d2d;
        color: #f8f8f2;
        padding: 15px;
        border-radius: 5px;
        font-family: 'Consolas', 'Monaco', monospace;
        overflow-x: auto;
    }
    /*平滑滚动先关CSS*/
    
    #smooth-wrapper {
        position: static !important;
        overflow: visible !important;
        transform: none !important;
    }
    
    #smooth-content {
        position: static !important;
        overflow: visible !important;
        transform: none !important;
    }
    /* 区域热区（调试用，正式使用时可以隐藏） */
    /* .region-hotspot {
        position: absolute;
        background: rgba(255, 0, 0, 0.2);
        border: 1px dashed rgba(255, 0, 0, 0.5);
        z-index: 2;
        pointer-events: none;
        display: none;
        /* 默认隐藏，调试时可设为block */
    /*} */
    
    body {
        padding-top: 70px;
        background-color: #7baef0;
    }
    
    .left-aligned {
        margin-left: auto;
    }
    
    .bg-dark {
        background-color: #343a40 !important;
    }
    /*上面原来一大块绿色的"家"*/
    /*要删掉！！！！*/
    
    .bg-hero {
        background-color: #FCF6DC;
    }
    /* 防止页面滚动 */
    
    .no-scroll {
        overflow: hidden;
        height: 100vh;
    }
    /* 最终Logo样式 - 在所有页面显示 */
    
    .logo-final {
        position: fixed;
        top: 70px;
        left: 20px;
        width: 120px;
        /* 放大两倍 */
        height: 120px;
        /* 放大两倍 */
        opacity: 1;
        z-index: 10000;
        object-fit: contain;
        pointer-events: none;
        /* 防止干扰页面交互 */
    }
    /* 单行容器 - 所有图片在同一行，占据整个宽度 */
    
    .single-row-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    /* 左侧重叠容器 - home1.1 和 home1.4 */
    
    .overlap-container-left {
        position: relative;
        width: 45%;
        max-width: 800px;
        display: flex;
        justify-content: flex-start;
        margin-left: 0;
    }
    /* home1.1 样式 - 贴紧网页左边 */
    
    .home-1-1 {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
    }
    
    .home-1-1:hover {
        transform: scale(1.01);
    }
    /* home1.4 样式 - 覆盖在 home1.1 上方 */
    
    .home-1-4 {
        position: absolute;
        top: 13%;
        right: 0;
        width: 42%;
        height: auto;
        z-index: 5;
        transition: transform 0.3s ease;
    }
    
    .home-1-4:hover {
        transform: scale(1.01);
    }
    /* 右侧重叠容器 - home1.2 和 home1.3 */
    
    .overlap-container-right {
        position: relative;
        width: 45%;
        max-width: 800px;
        margin-right: 0;
        transform: translateX(-100px);
        /* 向左移动50px，根据需要调整数值 */
    }
    /* home1.2 样式 */
    
    .home-1-2 {
        top: 16%;
        left: 30%;
        width: 125%;
        height: auto;
        display: block;
        transition: transform 0.3s ease;
        position: relative;
        left: -70px;
        /* 向左移动50px，根据需要调整数值 */
    }
    
    .home-1-2:hover {
        transform: scale(1.01);
    }
    /* home1.3 样式 - 与 home1.2 重叠且在上方 */
    
    .home-1-3 {
        position: absolute;
        top: 16%;
        left: 0;
        width: 100%;
        /* 使用百分比宽度 */
        height: auto;
        /* 高度自适应 */
        max-height: 400px;
        /* 设置最大高度 */
        z-index: 10;
        /* 确保在上方 */
        cursor: crosshair;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    .col-lg-12 {
        white-space: nowrap;
        font-size: 0;
    }
    /* 地球交互容器新样式 */
    
    .earth-interactive-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    /* ========== 地球交互样式 - 修复弹窗位置 ========== */
    /* 数据弹出框 - 修复位置问题 */
    
    .popup-data {
        position: fixed;
        /* 改为 fixed 定位 */
        background: linear-gradient(135deg, #1a2980, #26d0ce);
        color: white;
        padding: 0;
        border-radius: 15px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
        font-family: "Comic Sans MS", cursive;
        z-index: 10000;
        /* 提高 z-index */
        pointer-events: none;
        opacity: 0;
        transform: translateY(20px) scale(0.9);
        transition: all 0.2s ease-out;
        min-width: 180px;
        border: 2px solid rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(10px);
        display: none;
        /* 初始隐藏 */
    }
    
    .popup-data.show {
        opacity: 1;
        transform: translateY(0) scale(1);
        display: block;
        /* 显示时设置为 block */
    }
    
    .popup-content {
        padding: 20px;
        text-align: center;
    }
    
    .region-name {
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 8px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    }
    
    .region-data {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 8px;
        color: #FFD700;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    
    .region-desc {
        font-size: 1rem;
        opacity: 0.9;
        line-height: 1.4;
    }
    
    .popup-data::after {
        content: '';
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid #1a2980;
    }
    /* 区域高亮效果 */
    
    .region-highlight {
        position: absolute;
        background: rgba(255, 215, 0, 0.3);
        border: 2px solid rgba(255, 215, 0, 0.6);
        border-radius: 8px;
        z-index: 5;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    
    .region-highlight.active {
        opacity: 1;
    }
    /* ========== 地球交互样式结束 ========== */
    
    @media (max-width: 768px) {
        .single-row-container {
            flex-direction: column;
            gap: 20px;
            padding: 0 10px;
        }
        .overlap-container-left,
        .overlap-container-right {
            width: 100%;
            max-width: none;
            margin-bottom: 15px;
        }
        .home-1-3 {
            width: 100%;
            height: auto;
            max-height: 300px;
        }
        .earth-interactive-container {
            width: 100%;
            height: auto;
        }
        .col-lg-12 {
            white-space: normal;
            font-size: inherit;
        }
        /* 响应式地球交互样式 */
        .popup-data {
            min-width: 160px;
            transform: translateY(10px) scale(0.95);
        }
        .region-name {
            font-size: 1.2rem;
        }
        .region-data {
            font-size: 1.6rem;
        }
        .region-desc {
            font-size: 0.9rem;
        }
    }
    /*网页前端右下角的小牛管家，吉祥物*/
    
    .mascot-nenu {
        position: fixed;
        bottom: 1px;
        right: 1px;
        max-width: 600px;
        z-index: 9999;
    }
    /* CALLOUT */
    
    .bd-callout {
        padding: 1.25rem;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        border: 1px solid #e9ecef;
        border-left-width: 0.25rem;
        border-radius: 0.25rem;
    }
    
    .bd-callout h4 {
        margin-bottom: 0.25rem;
    }
    
    .bd-callout p:last-child {
        margin-bottom: 0;
    }
    
    .bd-callout code {
        border-radius: 0.25rem;
    }
    
    .bd-callout+.bd-callout {
        margin-top: -0.25rem;
    }
    
    .bd-callout-info {
        border-left-color: #5bc0de;
    }
    
    .bd-callout-warning {
        border-left-color: #f0ad4e;
    }
    
    .bd-callout-danger {
        border-left-color: #d9534f;
    }
    /* footer */
    
    footer a {
        color: white;
        font-weight: bold;
        text-decoration: none;
    }
    
    footer a:hover {
        color: white;
        text-decoration: underline;
    }
    /* 1. 把导航栏背景色改成 D2DEED */
    
    .navbar {
        background-color: #D2DEED !important;
    }
    /* 2. 把导航栏字体改成 Comic Sans MS */
    
    .navbar,
    .navbar a {
        font-family: "Comic Sans MS", "Comic Sans", cursive;
    }
    /* 1. 隐藏浏览器原生滚动条（仅 WebKit & Firefox） */
    
    html {
        scrollbar-width: none;
        /* Firefox */
    }
    
    body::-webkit-scrollbar {
        width: 0;
        /* Chrome/Edge/Safari */
    }
    /* 2. 伪轨道容器：固定在右侧，占满视口高度 */
    
    .scroll-track {
        position: fixed;
        top: 0;
        right: 0;
        width: 8px;
        /* 轨道宽度 */
        height: 100vh;
        background: linear-gradient(to bottom, #D2DEED, #82AEF9);
        z-index: 9999;
        /* 确保在最上层 */
        pointer-events: none;
        /* 让鼠标事件透下去，不影响正文 */
    }
    /* 3. 伪滑块 */
    
    .scroll-thumb {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.7);
        /* 半透明白色，可改 */
        border-radius: 4px;
        transition: height .1s, top .1s;
    }
    /* 整体导航栏容器 */
    
    #odd-navbar {
        background: #D2DEED !important;
        /* 由子元素自行上色 */
        padding: 0;
    }
    
    .nav-container {
        display: flex;
        align-items: center;
        height: 64px;
        /* 横杠高度 */
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 1rem;
    }
    /* 左侧半圆 Logo */
    
    .semi-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 160px;
        height: 160px;
        background: #D2DEED;
        color: #ffffff00;
        font-family: "Comic Sans MS", cursive;
        font-weight: bold;
        font-size: 1.2rem;
        border-radius: 50%;
        position: relative;
        left: -80px;
        margin-right: -80px;
        z-index: 2;
        text-decoration: none;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        /* 新增：确保在最左侧 */
        order: -1;
        margin-left: -60px;
    }
    
    .semi-circle:hover {
        background: #a8c6e0;
        transform: scale(1.05);
    }
    /* 菜单项间距与字体 */
    
    .navbar-nav {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin: 0;
    }
    
    .nav-link {
        color: hsl(0, 0%, 0%) !important;
        font-family: "Comic Sans MS", cursive;
    }
    
    .nav-link:hover {
        color: #003366 !important;
    }
    /* 移动端折叠按钮颜色调整 */
    
    .navbar-toggler {
        border-color: rgba(255, 255, 255, .5);
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    /* 新增样式：确保导航内容正确排列 */
    
    .navbar-collapse {
        flex-grow: 0;
    }
    /* 演示内容样式 */
    
    .demo-content {
        padding: 40px 20px;
        text-align: center;
        background: white;
        border-radius: 10px;
        margin: 30px 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .instructions {
        background: #e8f4fc;
        padding: 20px;
        border-radius: 8px;
        margin: 20px 0;
        border-left: 4px solid #3498db;
    }
    
    .code-block {
        background: #2d2d2d;
        color: #f8f8f2;
        padding: 15px;
        border-radius: 5px;
        font-family: 'Consolas', 'Monaco', monospace;
        overflow-x: auto;
    }
    /*平滑滚动先关CSS*/
    
    #smooth-wrapper {
        position: static !important;
        overflow: visible !important;
    }
    
    #smooth-content {
        position: static !important;
        overflow: visible !important;
    }
    /* 区域热区（调试用，正式使用时可以隐藏） */
    
    .region-hotspot {
        position: absolute;
        background: rgba(255, 0, 0, 0.2);
        border: 1px dashed rgba(255, 0, 0, 0.5);
        z-index: 2;
        pointer-events: none;
        display: none;
        /* 默认隐藏，调试时可设为block */
    }
    /* ========== 团队成员页面样式 - 新增部分 ========== */
    /* 进度条容器 */
    
    .my-progress-bar-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: transparent;
        z-index: 10001;
    }
    
    .my-progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
        width: 0%;
        transition: width 0.3s ease;
    }
    /* 团队头部区域 */
    
    .team-header {
        background-image: url('https://static.igem.wiki/teams/5470/hezhao.jpg');
        background-size: cover;
        background-position: center;
        height: 60vh;
        display: flex;
        align-items: center;
    }
    
    .textbiaoti {
        font-family: "Comic Sans MS", cursive;
        font-size: 4rem;
        font-weight: bold;
        color: #fff;
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
        margin-bottom: 2rem;
    }
    
    .team-intro {
        font-family: "Comic Sans MS", cursive;
        font-size: 1.2rem;
        color: #fff;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        max-width: 800px;
        line-height: 1.6;
    }
    /* 团队内容区域 */
    
    .team-content {
        background-color: #FCF6DC;
        padding: 2rem 0;
    }
    
    .team-section {
        margin-bottom: 4rem;
    }
    /* 标题包装 */
    
    .hl-wrap {
        display: flex;
        justify-content: center;
        margin-bottom: 3rem;
    }
    
    .hl-wrap h1 {
        font-family: "Comic Sans MS", cursive;
        font-size: 3rem;
        font-weight: bold;
        color: #A57E70;
        position: relative;
        padding: 0 2rem;
    }
    
    .hl-wrap h1::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: transparent;
        -webkit-text-stroke: 2px #A57E70;
        z-index: -1;
    }
    /* 卡片行布局 */
    
    .line {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2rem;
        padding: 0 2rem;
    }
    /* 团队成员卡片 */
    
    .card {
        background: white;
        border-radius: 20px;
        padding: 2rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        position: relative;
        max-width: 400px;
        min-height: 500px;
        display: flex;
        flex-direction: column;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }
    /* 卡片孔洞效果 */
    
    .hole {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 40px;
        background: #FCF6DC;
        border-radius: 50%;
        z-index: 1;
    }
    
    .hole::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        width: 30px;
        height: 30px;
        background: white;
        border-radius: 50%;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    /* 星星装饰 */
    
    .star {
        position: absolute;
        top: 15px;
        right: 20px;
        width: 30px;
        height: 30px;
        background: #FFD700;
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    }
    /* 卡片中间内容区域 */
    
    .mid {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    /* 头像样式 */
    
    .avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        border: 5px solid #A57E70;
        margin-bottom: 1.5rem;
        position: relative;
    }
    
    .avatar::before {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        border-radius: 50%;
        border: 2px solid #FFD700;
        animation: rotate 10s linear infinite;
    }
    
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    /* 滚动文字区域 */
    
    .scroll {
        max-height: 200px;
        overflow-y: auto;
        margin-bottom: 1.5rem;
        padding-right: 10px;
    }
    
    .scroll::-webkit-scrollbar {
        width: 6px;
    }
    
    .scroll::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .scroll::-webkit-scrollbar-thumb {
        background: #A57E70;
        border-radius: 3px;
    }
    
    .scroll p {
        font-family: "Comic Sans MS", cursive;
        color: #666;
        line-height: 1.6;
        margin-bottom: 1rem;
    }
    /* 底部信息 */
    
    .bot {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 1rem;
        border-top: 2px solid #F0F0F0;
    }
    
    .name {
        font-family: "Comic Sans MS", cursive;
        font-size: 1.5rem;
        font-weight: bold;
        color: #A57E70;
        margin-bottom: 0.5rem;
    }
    
    .tag {
        font-family: "Comic Sans MS", cursive;
        font-size: 1rem;
        color: #888;
        background: #F0F0F0;
        padding: 0.3rem 1rem;
        border-radius: 15px;
    }
    /* 响应式设计 */
    
    @media (max-width: 768px) {
        .team-header {
            height: 40vh;
        }
        .textbiaoti {
            font-size: 2.5rem;
        }
        .team-intro {
            font-size: 1rem;
        }
        .hl-wrap h1 {
            font-size: 2rem;
        }
        .line {
            padding: 0 1rem;
        }
        .card {
            max-width: 100%;
            min-height: auto;
        }
        .avatar {
            width: 100px;
            height: 100px;
        }
    }
    
    @media (max-width: 480px) {
        .team-header {
            height: 30vh;
        }
        .textbiaoti {
            font-size: 2rem;
        }
        .hl-wrap h1 {
            font-size: 1.5rem;
        }
        .card {
            padding: 1.5rem;
        }
    }
    /* 第二行图片容器样式 */
    
    .second-row-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        margin-top: 200px;
        /* 增加间隔 */
        padding: 0 20px;
        box-sizing: border-box;
        min-height: 700px;
        /* 确保有足够空间 */
    }
    /* home2.2 容器 - 相对定位用于放置 home2.1 */
    
    .home2-2-container {
        position: relative;
        width: 50%;
        display: flex;
        justify-content: flex-start;
    }
    /* home2.2 样式 - 放大1.5倍 */
    
    .home-2-2 {
        width: auto;
        height: 600px;
        /* 400px * 1.5 = 600px */
        opacity: 0;
        transform: translateX(-100%);
        will-change: transform, opacity;
    }
    /* home2.3 样式 - 放大1.5倍 */
    
    .home-2-3 {
        width: auto;
        height: 600px;
        /* 400px * 1.5 = 600px */
        opacity: 0;
        transform: translateX(100%);
        will-change: transform, opacity;
    }
    /* home2.1 样式 - 放大1.5倍并重新计算位置 */
    
    .home-2-1 {
        position: absolute;
        top: 210px;
        /* (340px * 1.5) / 3 = 170px */
        left: 285px;
        /* (570px * 1.5) / 3 = 285px */
        width: auto;
        height: 150px;
        /* 100px * 1.5 = 150px */
        opacity: 0;
        z-index: 10;
        pointer-events: none;
        will-change: opacity;
    }
    /* 响应式调整 */
    
    @media (max-width: 1200px) {
        .second-row-container {
            margin-top: 150px;
            min-height: 500px;
        }
        .home-2-2,
        .home-2-3 {
            height: 450px;
        }
        .home-2-1 {
            top: 128px;
            left: 214px;
            height: 112px;
        }
    }
    
    @media (max-width: 768px) {
        .second-row-container {
            flex-direction: column;
            align-items: center;
            gap: 50px;
            margin-top: 100px;
            min-height: 800px;
        }
        .home2-2-container {
            width: 100%;
            justify-content: center;
        }
        .home-2-2,
        .home-2-3 {
            height: 350px;
        }
        .home-2-1 {
            top: 99px;
            left: 166px;
            height: 87px;
        }
    }
    /* 第三行容器样式 */
    
    .third-row-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-top: 150px;
        padding: 0 40px;
        box-sizing: border-box;
        min-height: 600px;
    }
    /* 左侧图片容器 */
    
    .home3-1-container {
        width: 45%;
        display: flex;
        justify-content: flex-start;
    }
    /* home3.1 图片样式 */
    
    .home-3-1 {
        width: 100%;
        max-width: 500px;
        height: auto;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease;
    }
    /* 右侧文本框容器 */
    
    .text-box-container {
        width: 50%;
        display: flex;
        justify-content: flex-start;
        /* 改为flex-start使其向左移动 */
        margin-left: -150px;
        /* 向左移动150px */
    }
    /* 文本框样式 - 增大长度并居中对齐 */
    
    .text-box {
        background-color: #e3d685;
        padding: 40px 30px;
        border-radius: 25px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        max-width: 650px;
        /* 增加150px (500px + 150px) */
        width: 100%;
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease 0.2s;
        border: 3px solid #c9b75e;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 水平居中 */
        justify-content: center;
        /* 垂直居中 */
        text-align: center;
        /* 文字居中对齐 */
    }
    /* 文本行样式 - 居中对齐 */
    
    .third-row-container .text-line {
        font-family: "Comic Sans MS", cursive;
        font-size: 1.4rem;
        color: #333;
        line-height: 1.6;
        margin-bottom: 12px;
        text-align: center;
        /* 文字居中对齐 */
        font-weight: 600;
        width: 100%;
    }
    
    .third-row-container .text-line:last-child {
        margin-bottom: 0;
    }
    /* 第三行动画激活状态 */
    
    .third-row-container.animated .home-3-1,
    .third-row-container.animated .text-box {
        opacity: 1;
        transform: translateY(0);
    }
    /* 响应式设计 */
    
    @media (max-width: 1024px) {
        .third-row-container {
            padding: 0 30px;
            margin-top: 120px;
        }
        .text-box-container {
            margin-left: -100px;
            /* 响应式调整左移距离 */
        }
        .text-box {
            max-width: 550px;
            /* 响应式调整宽度 */
            padding: 30px 25px;
        }
        .third-row-container .text-line {
            font-size: 1.2rem;
        }
    }
    
    @media (max-width: 768px) {
        .third-row-container {
            flex-direction: column;
            gap: 50px;
            margin-top: 100px;
            padding: 0 20px;
        }
        .home3-1-container,
        .text-box-container {
            width: 100%;
            justify-content: center;
            margin-left: 0;
            /* 移动端取消左移 */
        }
        .home-3-1 {
            max-width: 400px;
        }
        .text-box {
            max-width: 400px;
            padding: 25px 20px;
            margin-left: 0;
            /* 移动端取消左移 */
        }
        .third-row-container .text-line {
            font-size: 1.1rem;
        }
    }
    
    @media (max-width: 480px) {
        .third-row-container {
            margin-top: 80px;
            padding: 0 15px;
            gap: 40px;
        }
        .home-3-1 {
            max-width: 300px;
        }
        .text-box {
            max-width: 300px;
            padding: 20px 15px;
        }
        .third-row-container .text-line {
            font-size: 1rem;
        }
    }
    /* 第四行容器样式 */
    
    .fourth-row-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 120px;
        padding: 0 40px;
        box-sizing: border-box;
        min-height: 200px;
    }
    /* 矩形包装器 */
    
    .rectangle-wrapper {
        width: 80%;
        max-width: 1000px;
        position: relative;
    }
    /* 细长直角矩形样式 */
    
    .rectangle {
        background-color: #e3d685;
        padding: 25px 40px;
        width: 100%;
        border-radius: 0;
        /* 直角 */
        position: relative;
        overflow: hidden;
    }
    /* 显示遮罩 - 用于从左到右的显示效果 */
    
    .reveal-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #82AEF9;
        /* 与页面背景色相同 */
        z-index: 2;
        transform: translateX(-100%);
    }
    /* 文本内容容器 */
    
    .text-content {
        position: relative;
        z-index: 1;
    }
    /* 文本行样式 */
    
    .text-line {
        font-family: "Comic Sans MS", cursive;
        font-size: 2rem;
        color: #333;
        line-height: 1.4;
        margin-bottom: 8px;
        opacity: 1;
        text-align: center
        /* 文本始终可见，但被遮罩覆盖 */
    }
    
    .text-line:last-child {
        margin-bottom: 0;
    }
    /* 响应式设计 */
    
    @media (max-width: 1024px) {
        .rectangle-wrapper {
            width: 90%;
        }
        .rectangle {
            padding: 20px 30px;
        }
        .text-line {
            font-size: 1.8rem;
        }
    }
    
    @media (max-width: 768px) {
        .fourth-row-container {
            margin-top: 80px;
            padding: 0 20px;
        }
        .rectangle-wrapper {
            width: 95%;
        }
        .rectangle {
            padding: 18px 25px;
        }
        .text-line {
            font-size: 1.5rem;
        }
    }
    
    @media (max-width: 480px) {
        .fourth-row-container {
            margin-top: 60px;
            padding: 0 15px;
        }
        .rectangle {
            padding: 15px 20px;
        }
        .text-line {
            font-size: 1.3rem;
        }
    }
    /* 第五行容器样式 */
    
    .fifth-row-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 150px;
        padding: 0 40px;
        box-sizing: border-box;
        min-height: 400px;
    }
    /* 第五行图片容器 */
    
    .fifth-row-images {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 1200px;
        gap: 40px;
    }
    /* 第五行图片通用样式 */
    
    .home-5-1,
    .home-5-2,
    .home-5-3 {
        width: 30%;
        height: auto;
        border-radius: 15px;
        /*box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);*/
        opacity: 0;
        transform: translateY(60px);
        transition: all 0.8s ease;
    }
    /* 每张图片的延迟动画 */
    
    .home-5-1 {
        transition-delay: 0.1s;
    }
    
    .home-5-2 {
        transition-delay: 0.2s;
    }
    
    .home-5-3 {
        transition-delay: 0.3s;
    }
    /* 第五行动画激活状态 */
    
    .fifth-row-container.animated .home-5-1,
    .fifth-row-container.animated .home-5-2,
    .fifth-row-container.animated .home-5-3 {
        opacity: 1;
        transform: translateY(0);
    }
    /* 图片悬停效果 */
    
    .home-5-1:hover,
    .home-5-2:hover,
    .home-5-3:hover {
        transform: translateY(-10px) scale(1.03);
        /*box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);*/
    }
    /* 响应式设计 */
    
    @media (max-width: 1024px) {
        .fifth-row-container {
            margin-top: 120px;
            padding: 0 30px;
        }
        .fifth-row-images {
            gap: 30px;
        }
    }
    
    @media (max-width: 768px) {
        .fifth-row-container {
            margin-top: 100px;
            padding: 0 20px;
        }
        .fifth-row-images {
            flex-direction: column;
            gap: 40px;
        }
        .home-5-1,
        .home-5-2,
        .home-5-3 {
            width: 80%;
            max-width: 400px;
        }
    }
    
    @media (max-width: 480px) {
        .fifth-row-container {
            margin-top: 80px;
            padding: 0 15px;
        }
        .fifth-row-images {
            gap: 30px;
        }
        .home-5-1,
        .home-5-2,
        .home-5-3 {
            width: 90%;
        }
    }
    /* 禁止滚动样式 */
    
    .body-no-scroll {
        overflow: hidden;
        height: 100vh;
    }
    /* 加载遮罩 */
    
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*background: rgba(0, 0, 0, 0.5);*/
        z-index: 99999;
        display: none;
        justify-content: center;
        align-items: center;
        color: white;
        font-family: "Comic Sans MS", cursive;
        font-size: 1.5rem;
    }
    
    .loading-overlay.show {
        display: flex;
    }
    /* 第六行容器样式 */
    
    .sixth-row-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 120px;
        padding: 0 40px;
        box-sizing: border-box;
        min-height: 400px;
    }
    /* 第六行图片包装器 */
    
    .home6-1-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* home6.1 图片样式 */
    
    .home-6-1 {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        /*box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);*/
        opacity: 0;
        transform: scale(0.9);
        transition: all 1.2s ease;
    }
    /* 第六行动画激活状态 */
    
    .sixth-row-container.animated .home-6-1 {
        opacity: 1;
        transform: scale(1);
    }
    /* 图片悬停效果 */
    
    .home-6-1:hover {
        transform: scale(1.02);
        /*box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);*/
    }
    /* 响应式设计 */
    
    @media (max-width: 1024px) {
        .sixth-row-container {
            margin-top: 100px;
            padding: 0 30px;
        }
    }
    
    @media (max-width: 768px) {
        .sixth-row-container {
            margin-top: 80px;
            padding: 0 20px;
        }
        .home-6-1 {
            max-width: 90%;
        }
    }
    
    @media (max-width: 480px) {
        .sixth-row-container {
            margin-top: 60px;
            padding: 0 15px;
        }
        .home-6-1 {
            max-width: 95%;
        }
    }
    /* 第七行容器样式 - 全宽 */
    
    .seventh-row-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 120px;
        padding: 0;
        /* 移除左右内边距，让图片完全贴边 */
        box-sizing: border-box;
        overflow: hidden;
        /* 防止内容溢出 */
        position: relative;
    }
    /* 第七行容器样式 - 全宽 */
    
    .seventh-row-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 20px;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        z-index: 2;
        /* 确保在白色背景之上 */
        min-height: 850.8px;
        /* 确保容器高度足够容纳图片 */
    }
    /* 第七行图片包装器 - 全宽 */
    
    .home7-1-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    /* home7.1 图片样式 - 全宽 */
    
    .home-7-1 {
        width: 80vw;
        /* 宽度为视窗宽度的80% */
        height: 850.8px;
        /* 709 * 1.2 = 850.8px */
        object-fit: cover;
        /* 保持比例覆盖容器 */
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s ease;
        position: relative;
        z-index: 2;
        margin: 0 auto;
        /* 居中显示 */
        display: block;
    }
    /* home7.2 图片样式 - 全宽 */
    
    .home-7-2 {
        width: 80vw;
        /* 宽度为视窗宽度的80% */
        height: 850.8px;
        /* 709 * 1.2 = 850.8px */
        object-fit: cover;
        /* 保持比例覆盖容器 */
        opacity: 0;
        transform: scale(1);
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        /* 居中定位 */
        z-index: 3;
        transition: opacity 0.5s ease;
    }
    /* 白色背景区域 */
    
/* 白色背景区域 - 固定区块 */
.white-background-section {
    position: absolute;
    width: 100%;
    background-color: #ffffff;
    z-index: 3;
    height: 0; /* 初始高度为0，由JS设置 */
    pointer-events: none; /* 防止干扰交互 */
}

/* 移除原有的渐变效果，因为现在有专门的渐变条 */
.white-background-section::before {
    content: none; /* 移除之前的渐变 */
}
    /* 第七行动画激活状态 */
    
    .seventh-row-container.animated .home-7-1 {
        opacity: 1;
        transform: scale(1);
    }
    /* 确保第七行之前的内容保持蓝色背景 */
    
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #7baef0;
        /* 保持蓝色背景 */
        z-index: -1;
        pointer-events: none;
    }
    /* 响应式设计 */
    
    @media (max-width: 768px) {
        .seventh-row-container {
            margin-top: 80px;
        }
    }
    
    @media (max-width: 480px) {
        .seventh-row-container {
            margin-top: 60px;
        }
    }
    /* 第八行容器样式 */
    /* 第八行图片容器 */
    
    .eighth-row-container {
        width: calc(100% - 100px);
        /* 减少宽度以适应向右移动 */
        margin-top: -400;
        padding: 0 40px;
        box-sizing: border-box;
        position: relative;
        z-index: 80;
        min-height: 400px;
        margin-top: -450px;
        margin-left: 100px;
    }
    
    .eighth-row-images {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        gap: 0;
        /* 图片之间不留空隙 */
    }
    /* home8.1 样式 - 最左侧 */
    
    .home-8-1 {
        width: auto;
        height: 800px;
        opacity: 0;
        transform: translateX(-220px);
        /* 移除transition，由GSAP控制 */
    }
    /* home8.2 样式 */
    
    .home-8-2 {
        width: auto;
        height: 700px;
        opacity: 0;
        /*  transform: translateY(-920px);
        transform: translateX(-200px);*/
        /* 移除transition，由GSAP控制 */
    }
    /* home8.3 样式 */
    
    .home-8-3 {
        width: auto;
        height: 900px;
        opacity: 0;
        /*transform: translateY(-30px);
        transform: translateX(-400px);*/
        /* 移除transition，由GSAP控制 */
    }
    /* home8.4 样式 - 最右侧 */
    
    .home-8-4 {
        width: auto;
        height: 700px;
        opacity: 0;
        /* transform: translateX(-200px);*/
        margin-left: -400px;
        /* 向左移动300px */
        /* 移除transition，由GSAP控制 */
    }
    /* 移除原来的动画激活状态，因为现在由GSAP控制 */
    /* .eighth-row-container.animated .home-8-1,
.eighth-row-container.animated .home-8-2,
.eighth-row-container.animated .home-8-3,
.eighth-row-container.animated .home-8-4 {
    opacity: 1;
    transform: translate(0, 0);
} */
    /* 响应式设计 */
    
    @media (max-width: 1024px) {
        .eighth-row-container {
            padding: 0 30px;
        }
        .home-8-1,
        .home-8-4 {
            height: 400px;
        }
        .home-8-2 {
            height: 240px;
        }
        .home-8-3 {
            height: 160px;
        }
    }
    
    @media (max-width: 768px) {
        .eighth-row-container {
            padding: 0 20px;
        }
        .eighth-row-images {
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        .middle-column {
            align-items: center;
        }
        .home-8-1,
        .home-8-2,
        .home-8-3,
        .home-8-4 {
            height: auto;
            max-width: 100%;
        }
    }
    /* 黄色背景区域 - 修复偏移问题 */
    
    .yellow-background-section {
        position: absolute;
        left: 0;
        width: 100vw;
        /* 使用视窗宽度确保完全覆盖 */
        background-color: #FCF6DC;
        z-index: 8;
        height: 0;
        overflow: hidden;
    }
    /* 确保黄色背景区域从左侧边缘开始 */
    
    .yellow-background-section::before {
        content: '';
        position: absolute;
        left: -10px;
        /* 稍微扩展到左侧外一点 */
        width: calc(100% + 20px);
        /* 确保覆盖整个宽度 */
        height: 100%;
        background-color: #FCF6DC;
        z-index: 8;
    }
    /* Overview容器样式 - IHP专用 */
    
    .overview-containerihp {
        background-color: white;
        border-radius: 15px;
        padding: 40px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 40px;
        border: 1px solid #f0f0f0;
    }
    
    .overview-titleihp {
        font-family: Arial, sans-serif;
        font-size: 3rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 25px;
        text-align: left;
    }
    
    .overview-contentihp {
        font-family: Arial, sans-serif;
        font-size: 1.1rem;
        line-height: 1.8;
        color: #555;
        text-align: justify;
        margin: 0;
    }
    
    @media (max-width: 768px) {
        .overview-containerihp {
            padding: 25px;
            margin-bottom: 30px;
        }
        .overview-titleihp {
            font-size: 2.2rem;
            margin-bottom: 20px;
        }
        .overview-contentihp {
            font-size: 1rem;
            line-height: 1.6;
        }
    }
/* 不透明的白色到黄色渐变条 */
.white-yellow-gradient-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(to bottom, 
        #FFFFFF 0%,    /* 纯白色开始 */
        #FFFFFF 10%,   /* 保持白色 */
        #FCF6DC 90%,   /* 渐变到黄色 */
        #FCF6DC 100%   /* 纯黄色结束 */
    );
    z-index: 9;
    pointer-events: none;
    opacity: 1; /* 确保完全不透明 */
}
    /* 左下角对齐的图片 - 调整大小 */
    
.home-9-2 {
    position: absolute;
    bottom: -20px;     /* 从底部向上移动100px */
    left: 0px;       /* 从左侧向右移动150px */
    width: auto;
    height: 150px;     /* 稍微调整高度 */
    object-fit: contain;
    z-index: 20;
}
    /* 重叠图片容器 - 调整以适应新的图片大小 */
    
    .overlap-images {
        position: relative;
        width: 1920px;
        height: 1080px;
    }
    /* 重叠图片的通用样式保持不变 */
    
    .home-9-1,
    .home-9-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 1920px;
        height: 1080px;
        object-fit: contain;
    }
    .ninth-row-container {
    position: relative;
    width: 100%;
    min-height: 650px;
    margin-top: 60px;
    padding: 30px 20px;
    z-index: 10;
}

.ninth-row-images {
    position: relative;
    width: 95%;
    height: 500px;
    max-width: 1300px;
    margin: 0 auto;
}

.overlap-images {
    position: relative;
    width: 85%;
    height: 400px;
    max-width: 1100px;
    margin: 0 auto 80px;
}
    /* 响应式设计 */
    
    @media (max-width: 1920px) {
        .ninth-row-images {
            width: 100%;
            max-width: 1920px;
            height: 700px !important; /* 添加高度 */
            position: relative !important; /* 确保相对定位 */
        }
        .overlap-images,
        .home-9-1,
        .home-9-2,
        .home-9-3 {
            width: 100%;
            height: auto;
            max-width: 1920px;
        }
        .ninth-row-container {
            min-height: auto;
            height: auto;
        }
    }
    
    @media (max-width: 1200px) {
        .ninth-row-container {
            min-height: 600px;
        }
    }
    
    @media (max-width: 768px) {
        .white-yellow-gradient-bar {
            height: 80px;
            left: -2%;
            width: 104%;
        }
        .ninth-row-container {
            min-height: 400px;
        }
        .ninth-row-images {
            height: auto;
            min-height: 400px;
            height: 700px !important; /* 添加高度 */
            position: relative !important; /* 确保相对定位 */
        }
    }
/* 不透明的蓝色到白色渐变条 */
.blue-white-gradient-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px; /* 与白色到黄色渐变条相同高度 */
    background: linear-gradient(to bottom, 
        #7baef0 0%,    /* 纯蓝色开始 */
        #7baef0 10%,   /* 保持蓝色 */
        #ffffff 90%,   /* 渐变到白色 */
        #ffffff 100%   /* 纯白色结束 */
    );
    z-index: 4;
    pointer-events: none;
    opacity: 1; /* 确保完全不透明 */
}



/* 第十行内容样式 */
.tenth-row-container {
    position: relative;
    width: 100%;
    background-color: #FCF6DC; /* 与黄色背景区域一致 */
    padding: 80px 0;
    z-index: 10;
}

.explore-title {
    font-family: Arial, sans-serif;
    font-size: 4rem;
    font-weight: bold;
    color: #000;
    text-align: center;
    margin-bottom: 60px;
}

.explore-images-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.explore-row {
    display: flex;
    justify-content: center;
    gap: 60px;
}

.explore-item {
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 10px;
    /*box-shadow: 0 4px 8px rgba(0,0,0,0.1);*/
    transition: transform 0.3s ease;
}

.explore-item:hover {
    transform: scale(1.05);
}

.explore-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 响应式设计：在小屏幕上调整布局 */
@media (max-width: 768px) {
    .explore-title {
        font-size: 2.5rem;
    }
    
    .explore-row {
        flex-direction: column;
        gap: 30px;
    }
    
    .explore-item {
        width: 250px;
        height: 250px;
    }
}
/* 确保footer正常显示 */
footer.bg-dark {
    position: relative;
    z-index: 100;
    background-color: #343a40 !important;
    width: 100%;
}

/* 确保平滑滚动容器不限制footer */
#smooth-wrapper, #smooth-content {
    position: relative;
}
/* ===== FOOTER FIX - 关键修复 ===== */

/* 1. 确保footer在所有背景之上 */
footer.bg-dark {
    position: relative !important;
    z-index: 10000 !important; /* 大幅提高z-index */
    background-color: #343a40 !important;
    width: 100%;
    margin-top: 0 !important;
}



/* 3. 确保平滑滚动系统不会影响footer */
#smooth-wrapper {
    position: relative;
    min-height: 100vh;
}

#smooth-content {
    position: relative;
    min-height: 100vh;
}

/* ===== 全局Footer样式 ===== */
footer.bg-dark {
    background-color: #343a40 !important;
    color: white;
    position: relative;
    overflow: hidden;
}

footer.bg-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #3498db, #2ecc71, #e74c3c, #f39c12);
}

/* 确保图片容器在所有页面都正确显示 */
footer .image-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

footer .image-placeholder {
    width: 160px;
    height: 160px;
    background: transparent;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid #495057;
    padding: 0;
    margin: 0;
}

footer .footer-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}