/* ---------------------------浏览器统一样式开始------------------- */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
legend,
input,
textarea,
button,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}


/* 隐藏滚动条但可以滚动 */
.container-with-scroll {
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.container-with-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

body {
    background: #17957845;
    text-align: center;
    font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    border: none;
}


/* 全局强制隐藏横向溢出 */
* {
    box-sizing: border-box;
    max-width: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}


/* ---------------------------浏览器统一样式结束------------------- */


/* ---------------------------主页面logo加边框开始------------------- */
/* Logo容器样式 */
.logo1 {
    position: relative;
    padding-left: 100px;
    float: left;
    z-index: 10;
    top: -15px;
}

/* 小房子图标样式 */
/* .home-icon {
    position: absolute;
    top: 30%;
    left: 78%;
    transform: translateX(-50%);
    width: 65px;
    height: 65px;
    background: #e3d273;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #131212;
    font-size: 16px;
    box-shadow: 0 0 10px rgba(228, 214, 135, 0.7);
    z-index: 100;
    opacity: 0;
    transition: all 0.3s;
} */

/* .home-link:hover .home-icon {
    opacity: 0.5;
    transform: translateX(-50%) scale(1.2);
    box-shadow: 0 0 15px;
;
} */

/* .home-link:hover .logo-frame::before,
.home-link:hover .logo-frame::after {
    transform: scaleY(1);
} */

/* 图片样式 */
.logo1-frame img {
    display: block;
    transition: transform 0.3s ease;
}

/* .home-link:hover .logo-frame img {
    transform: scale(1.05);
} */
/* ---------------------------主页面logo加边框结束------------------- */





/* ---------------------------加载动画样式开始------------------------- */
/* 加载动画容器 */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* 初始黑色背景 */
.black-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 1;
}

/* 图片背景 */
.image-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/主页面/山林.jpg') no-repeat center center;
    background-size: cover;
    opacity: 0;
    z-index: 2;
}

/* 文字内容 */
.loading-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #fff;
}

.loading-text {
    font-size: 5rem;
    /* font-weight: bold; */
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(30px);
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
    /* 书法感现代字体组合 */
    font-family: "STLiti", "华文隶书", "LiSu", "隶书", "FZShuTi", "方正舒体", sans-serif;
    color: #d4af37;
    /* 金色调增加时尚感 */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(212, 175, 55, 0.3);
}

.loading-subtext {
    font-size: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    /* 时尚简洁的搭配 */
    font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif;
    font-weight: 300;
    color: #e0e0e0;
    letter-spacing: 1px;
    /* 添加分隔符 */
    letter-spacing: 0.5em;
    /* 增加字符间距 */
}



/* ---------------------------加载动画样式结束------------------------- */






/* ---------------------------导航栏样式开始------------------------- */
/* 导航栏容器 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 10 5%; */
    z-index: 9999;
    /* 背景图片设置 */
    background-image: url('../images/导航栏长图.jpg');
    background-size: cover;
    /* background-position: center; */
    /* 默认透明度 */
    opacity: 0.9;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* margin-bottom: 500px; */
}

/* 导航栏内容 */
.nav-content {
    display: flex;
    width: 100%;
    /* 这行代码是导航栏内容均居中显示 */
    /* justify-content: space-between; */
    align-items: center;
}

/* 左侧字体向右移动 */
.navbar .nav-content .nav-links {
    float: left;
    padding: 50px;
}

/* 右侧字体向右移动 */
.navbar .nav-content .right-nav-links {
    float: left;
    padding: 35px;
}

/* 导航链接 */
.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li {
    margin: 0 15px;
    float: left;
}


.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    transition: color 0.3s;
    padding: 5px 0;
    position: relative;
}

.nav-links a:hover {
    color: #FFD700;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #FFD700;
    transition: width 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}


/* 右侧导航栏的字体 */
.right-nav-links {
    position: absolute;
    right: 3%;
    display: flex;
    gap: 30px;
    list-style: none;
}

.right-nav-links li {
    /* 上右下左 */
    margin: 0 10px;
    float: right;
}

/* 右侧字体 */
.nav-content .right-nav-links {
    padding-left: 90px;
}

.right-nav-links a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    transition: color 0.3s;
    padding: 5px 0;
    position: relative;
}

.right-nav-links a:hover {
    color: #FFD700;
}

.right-nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #FFD700;
    transition: width 0.3s;
}

.right-nav-links a:hover::after {
    width: 100%;
}

/* 右侧导航栏的字体结束 */

.nav-content .right-nav-links {
    padding-left: 90px;
}

/* 搜索框容器 */
.search-container {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 30px;
    /* 上右下左 */
    padding: 5px 15px;
    transition: all 0.3s;
}

.nav-content .search-container {
    margin-left: 5px;
}

.search-container:hover {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* 搜索输入框 */
.search-box {
    width: 550px;
    height: 35px;
    padding: 0 10px;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    transition: all 0.3s;
}

/* 搜索框缩小之后的宽度 */
.search-box:focus {
    width: 270px;
}


/* 搜索按钮 */
.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-image: url('https://cdn-icons-png.flaticon.com/512/149/149852.png');
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s;
}

.search-btn:hover {
    transform: scale(1.1);
}


/* 响应式设计 */
@media (max-width: 992px) {
    .nav-links li {
        margin: 0 10px;
    }

    .search-box {
        width: 150px;
    }

    .search-box:focus {
        width: 180px;
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 0 20px;
        height: 70px;
    }

    .logo {
        font-size: 20px;
    }

    .nav-links {
        display: none;
        /* 移动端可以替换为汉堡菜单 */
    }

    .search-container {
        margin-left: auto;
    }
}

/* -----------------------导航栏样式结束------------------------- */



/* ----------------------- 全屏轮播框样式开始 ----------------------- */
.carousel-container {
    position: relative;
    width: 100%;
    height: 95vh;
    /* 全屏高度 */
    overflow: hidden;
    margin-top: 80px;
    /* 导航栏高度 */
}

.carousel-slides {
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.carousel-item.active {
    opacity: 1;
}

.carousel-item img,
.carousel-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 保持宽高比覆盖整个容器 */
}

.carousel-caption {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    max-width: 80%;
    opacity: 0;
    transition: opacity 1s ease 0.5s;
}

.carousel-item.active .carousel-caption {
    opacity: 1;
}


.carousel-caption h3 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: 2px;
}

.carousel-caption p {
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: 1px;
}

.carousel-indicators {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
}


.carousel-indicators .indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s;
}

.carousel-indicators .indicator.active {
    background: white;
    transform: scale(1.2);
}

/* 新增的轮播进度条样式 */
.carousel-progress-container {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%)translateY(140px);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 10;
    padding: 10px;
    background: none;
    border-radius: 10px;
}

/* 进度条项目容器 */
.progress-items-container {
    display: flex;
    gap: 25px;
    position: relative;
    z-index: 10;

}

/* 进度条项目 */
.progress-item {
    width: 360px;
    position: relative;
    cursor: pointer;
    border-radius: 5px;
    overflow: visible;
    border: none;
    transition: border-color 0.3s;
    padding-bottom: 8px;
    /* 为进度条留出空间 */
    min-height: 200px;
    /* 略大于缩略图高度 */
    height: 4px;
}

.progress-item.active {
    border-color: #494948;
}

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

/* 标题样式 - 直接放在进度条项目内部 */
.progress-title {
    transition: color 0.3s ease;
    color: #888;
    /* 默认灰色 */
}

.progress-item.active .progress-title {
    color: #fff;
    /* 激活时白色 */
}

.progress-item .progress-title {
    position: absolute;
    bottom: calc(100% + 10px);
    /* 紧贴在进度条上方 */
    left: 0;
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    color: #888;
    /* 默认灰色 */
    text-align: left;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    /* opacity: 0.8; */
    transition: opacity 0.3s ease;
    pointer-events: none;
    margin: 0;
    z-index: 13;
}

.progress-timer {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #a8e6cf, #4caf50);
    /* 浅绿色到深绿色渐变 */
    /* transition: width 3s linear; */
}



/* 添加双向动画的关键帧 */
@keyframes smoothProgressAnimation {
    0% {
        width: 0%;
    }

    50% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}


/* 修复进度条动画 */
.progress-item.active .progress-bar {
    animation: smoothProgressAnimation 6s linear forwards !important;
    background: linear-gradient(to right, #a8e6cf, #4caf50);
    /* 浅绿色到深绿色渐变 */
}


/* 缩略图样式 */
.progress-thumbnail {
    position: absolute;
    bottom: calc(100% + 5px);
    /* 在标题上方 */
    left: 0;
    width: 360px !important;
    height: 200px !important;
    object-fit: cover;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 12;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(10px);
    max-width: none !important;
    max-height: none !important;
}

/* 鼠标悬停时显示缩略图，隐藏标题 */
.progress-item:hover .progress-thumbnail {
    opacity: 1;
    visibility: visible;
    transform: translateY(-5px);
}

.progress-item:hover .progress-title {
    color: white;
    /* 鼠标悬停时变为白色 */
    opacity: 1;
    bottom: calc(100% + 218px);
    /* 调整位置到图片上方 */
}

/* 响应式设计 */
@media (max-width: 992px) {
    .carousel-caption h3 {
        font-size: 2.5rem;
    }

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

    .progress-item {
        width: 280px;
    }

    .progress-thumbnail {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .carousel-caption h3 {
        font-size: 2rem;
    }

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

    .carousel-indicators {
        bottom: 30px;
    }

    .progress-item {
        width: 200px;
    }

    .progress-thumbnail {
        width: 200px;
        height: 80px;
    }

    .carousel-progress-container {
        bottom: 60px;
    }
}

/* ----------------------- 全屏轮播框样式结束 ----------------------- */






/* ----------------------- 全屏添加阴影的效果开始 ----------------------- */
/* 使用单独的阴影层 */
.shadow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.shadow-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3), transparent);
}

.shadow-overlay::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3), transparent);
}

/* ----------------------- 全屏添加阴影的效果结束 ----------------------- */

/* ----------------------- 全屏产品图片样式开始 ----------------------- */
/* 产品区域样式 - 初始在屏幕外 */
.product-section {
    position: fixed;
    top: 100vh; /* 初始在屏幕下方 */
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000000 !important; /* 关键：图片没出来时，先用黑色填满空间 */
    background: url('../images/主页面/map.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    z-index: 100;
    transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    overflow-x: hidden; /* 隐藏横向溢出 */
    background-attachment: scroll;
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 加一个背景滤镜 */
    /* background: rgba(10, 10, 26, 0.85); */
}

/* 左侧文本框样式 */
.left-text-box {
    position: absolute;
    top: 15%;
    left: 5%;
    /* transform: translateY(-50%); */
    width: 35%;
    /* background: rgba(0, 0, 0, 0.7); */
    padding: 20px;
    /* border-radius: 8px; */
    z-index: 101;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); */
    transition: transform 0.3s ease-out;
    background: none;
    text-align: left;
}

.left-text-box p {
    font-family: "SimHei", "黑体", sans-serif;
    color: white;
    font-weight: bold;
    font-size: 25px;
    line-height: 1.6;
    margin: 10px 0;
}


/* 右侧图片文字框样式 */
.right-content-box {
    position: absolute;
    top: 15.5%;
    right: 0px;
    /* 向下移动 */
    /* transform: translateY(10%); */
    width: 774px;
    z-index: 101;
    background: transparent;
    border-radius: 0;
    transition: transform 1.5s ease-out;
    transition: transform 0.3s ease;
    overflow: hidden; /* 确保放大图片不超出边框 */
    cursor: pointer; /* 添加手型光标表示可点击 */
}

/* 确保整个内容框都可点击 */
.right-content-box * {
    cursor: pointer;
}

/* .right-content-box:hover .right-text { */
    /* 备选#696969 */
    /* background: #2E5D4C;  */
    /* background: #708090;  */
    /* background: #1B4D3E;  */
    /* background: #2F4F4F;  */
    /* background: #0A5C36;     */
    /* background: #2a2a2a; 
    transition: background-color 0.3s ease;
} */


.right-content-box:hover .right-text {
    background: rgba(42, 42, 42, 0.95); /* 深黑色带透明度 */
    backdrop-filter: blur(1px); /* 磨砂模糊效果 */
    -webkit-backdrop-filter: blur(8px); /* Safari 支持 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}


.right-content-box:hover .right-image {
    transform: scale(1.1); /* 放大7% */
    transition: transform 1.5s ease;
}

/* 添加树的图片样式 */
.right-content-box::after {
    content: '';
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 80px; /* 调整树图片大小 */
    height: 100px; /* 调整树图片大小 */
    background-image: url('../images/主页面/处理图片2.png'); /* 替换为你的树图片路径 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    z-index: 102;
    pointer-events: none; /* 确保不干扰点击事件 */
}

/* 鼠标悬停时显示树图片 */
.right-content-box:hover::after {
    opacity: 1;
    transform: translateY(0);
}


/* 确保树图片在正确的位置 */
.right-content-box .right-image {
    position: relative;
    z-index: 1;
}

.right-content-box .right-text {
    position: relative;
    z-index: 2;
}

.right-image {
    width: 774px;
    height: 638px;
    object-fit: cover;
    border-radius: 0;
}

.right-text {
    background: white;
    padding: 25px;
    border-radius: 0;
    margin-top: -5px;
    position: relative;
    height: 258px;
    transition: background-color 0.3s ease;
}

.right-text h3 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.right-text p {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

/* 添加小字样式 - 放在 right-text 相关样式后面 */
.right-text .subtitle {
    font-size: 14px;
    font-weight: 700;
    color: #666;
    font-weight: normal;
    display: block;
    margin-top: 5px;
    line-height: 1.4;
    font-family: "SimHei", "黑体", sans-serif;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 鼠标悬停时显示副标题 */
.right-content-box:hover .subtitle {
    opacity: 1;
    max-height: 50px; /* 根据实际内容调整 */
}

/* 鼠标悬停时文字颜色变为白色 */
.right-content-box:hover .top-text,
.right-content-box:hover .top-text h3,
.right-content-box:hover .subtitle,
.right-content-box:hover .bottom-text,
.right-content-box:hover .bottom-text p {
    color: white !important;
    transition: color 0.3s ease;
}

/* 确保默认状态下标题和底部文字显示 */
.top-text,
.bottom-text {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* 上部文本框 - 靠近图片底部 */
.right-text .top-text {
    position: absolute;
    top: 25px;
    left: 25px;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    font-family: "SimHei", "黑体", sans-serif;
    text-align: left;
    margin: 0;
}

/* 确保图片容器有正确的溢出处理 */
.right-content-box .right-image {
    transition: transform 1.5s ease;
    transform-origin: center; /* 从中心点放大 */
}


/* 下部文本框 - 左下角 */
.right-text .bottom-text {
    position: absolute;
    bottom: 25px;
    left: 25px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
    color: #333;
    font-family: "SimHei", "黑体", sans-serif;
    text-align: left;
    margin: 0;
    width: 550px;
}

/* 全屏背景样式 */
.fullscreen-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}


/* ----------------------- 全屏产品图片样式结束 ----------------------- */


/* ----------------------- 全屏产品图片样式开始 ----------------------- */

/* ----------------------- 师演匠文化扩展页样式开始 ----------------------- */
.expansion-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.expansion-overlay.active {
    display: block;
    opacity: 1;
}

.expansion-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 66.67%; /* 占据屏幕三分之二宽度 */
    height: 100%;
    background-color: #d4d4d4;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.expansion-overlay.active .expansion-container {
    transform: translateX(0);
}

/* 关闭按钮 */
.expansion-close {
    position: fixed; /* 关键：使用fixed定位 */
    top: 0px; /* 距离顶部距离 */
    right: 0px; /* 距离右侧距离 */
    width: 67px; /* 宽度 */
    height: 67px; /* 高度 */
    background-color: #2e5d4c; /* 墨绿色 */
    border-radius: 0px; /* 轻微圆角方形 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 10001; /* 确保在最上层 */
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.expansion-close:hover {
    background-color: #1e3d30;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* 顶部图片区域 */
.expansion-header {
    width: 100%;
    height: 955px; /* 可根据需要调整高度 */
    overflow: hidden;
}

.expansion-header-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 内容区域 */
.expansion-content {
    padding-top: 31px;
    padding-left: 28px;

}

/* 主标题区域 */
.expansion-title {
    margin-bottom: 15px;
    position: relative;
    
}

.title-black {
    font-size: 120px;
    font-weight: bold;
    color: #000;
    margin-bottom: 0px;
    font-family: "SimHei", "黑体", sans-serif;
    text-align: left;
}

.title-white {
    position: relative;
    font-size: 120px;
    font-weight: 300;
    color: #fff;
    margin-top: 0;
    font-family: "SimHei", "黑体", sans-serif;
    text-align: left;
}

.year {
    float: right;
}

/* 内容主体区域 */
.expansion-body {
    display: flex;
    padding-top: 120px;
}

/* 左侧内容 (37.5%) */
.expansion-left {
    width: 37.5%;
    text-align: left; /* 确保整体左对齐 */
}

/* 右侧内容 (62.5%) */
.expansion-right {
    width: 62.5%;
}

/* 通用内容样式 */
.expansion-left h3,
.expansion-right h3 {
    font-size: 24px;
    color: #000;
    margin-bottom: 15px;
    font-family: "SimHei", "黑体", sans-serif;
    text-align: left;
    
}

.expansion-left h4{
    font-size: 24px;
    color: #fff;
    text-align: left;
    font-family: "SimHei", "黑体", sans-serif;
}


.expansion-left p {
    font-size: 24px;
    line-height: 1.6;
    color: #000;
    margin-bottom: 30px;
    text-align: left;
    font-family: "SimHei", "黑体", sans-serif;
    font-weight: 700;
    /* 添加以下代码来控制宽度和右侧留白 */
    width: 69.3%; 
    /* max-width: 690px;  */
    margin-right: auto; /* 保持左对齐 */
}

/* 扩展页左侧附加内容样式 */
.expansion-left-additional {
    margin-top: 945px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-left-additional1 {
    margin-top: 1880px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-left-additional2 {
    margin-top: 30px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-left-additional3 {
    margin-top: 90px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-left-additional4 {
    margin-top: 32px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-left-additional5 {
    margin-top: 650px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-left-additional h3
.expansion-left-additional1 h3
.expansion-left-additional2 h3
.expansion-left-additional3 h3
.expansion-left-additional4 h3
.expansion-left-additional5 h3{
    font-size: 24px;
    color: #000;
    margin-bottom: 15px;
    font-family: "SimHei", "黑体", sans-serif;
    text-align: left;
}

.expansion-left-additional h4
.expansion-left-additional1 h4
.expansion-left-additional2 h4
.expansion-left-additional3 h4
.expansion-left-additional4 h4
.expansion-left-additional5 h4{
    font-size: 24px;
    color: #fff;
    text-align: left;
    font-family: "SimHei", "黑体", sans-serif;
}


/* -----------------扩展页右侧内容样式开始--------------------- */
.expansion-right h1 {
    font-size: 24px;
    line-height: 1.6;
    color: #000;
    margin-bottom: 30px;
    text-align: left;
    font-family: "SimHei", "黑体", sans-serif;
    font-weight: 700;
    /* 添加以下代码来控制宽度和右侧留白 */
    width: 75%; 
    /* max-width: 690px;  */
    margin-right: auto; /* 保持左对齐 */
}

/* 内容模块基础样式 */
.content-module {
    margin-bottom: 60px; /* 模块之间的基础间距 */
    position: relative;
    transition: all 0.3s ease;
}

/* 图片模块样式 */
.image-module {
    margin-bottom: 80px; /* 图片模块间距可以更大一些 */
    position: relative;
}

/* 为每个模块设置特定的间距控制 */
.content-module[data-module="1"] {
    padding-top: 40px ;    /* 第三段与上方图片的间距 */
    margin-bottom: 50px; /* 第一段与第二段的间距 */
}

.content-module[data-module="2"] {
    margin-bottom: 70px; /* 第二段与图片的间距 */
}

.content-module[data-module="3"] {
    padding-top: 110px ;    /* 第三段与上方图片的间距 */
    margin-bottom: 0px ; /* 第三段与下方图片的间距 */
}

.content-module[data-module="4"] {
    padding-top: 100px ;    /* 第三段与上方图片的间距 */
    margin-bottom: 0px ; /* 第三段与下方图片的间距 */
}

.content-module[data-module="5"] {
    padding-top: 35px ;    /* 第三段与上方图片的间距 */
    margin-bottom: 0px ; /* 第三段与下方图片的间距 */
}

.content-module[data-module="6"] {
    padding-top: 35px ;    /* 第三段与上方图片的间距 */
    margin-bottom: 0px ; /* 第三段与下方图片的间距 */
}

.content-module[data-module="7"] {
    padding-top: 35px ;    /* 第三段与上方图片的间距 */
    margin-bottom: 0px ; /* 第三段与下方图片的间距 */
}

.content-module[data-module="8"] {
    padding-top: 100px ;    /* 第三段与上方图片的间距 */
    margin-bottom: 0px ; /* 第三段与下方图片的间距 */
}


.content-module[data-module="3"] h1{
    font-size: 24px;
    line-height: 1;
    color:#000;
    margin-bottom:30px;
    text-align: left;
    font-family:"SimHei","黑体",sans-serif;
    font-weight: 700;/*添加以下代码来控制宽度和右侧留白 */
    width:75%;
    /* max-width: 690px;
    margin-right:auto;/*保持左对齐 */
}

.content-module[data-module="5"] h1{
    font-size: 24px;
    line-height: 1;
    color:#000;
    margin-bottom:30px;
    text-align: left;
    font-family:"SimHei","黑体",sans-serif;
    font-weight: 700;/*添加以下代码来控制宽度和右侧留白 */
    width:75%;
    /* max-width: 690px;
    margin-right:auto;/*保持左对齐 */
}


.content-module[data-module="3"] .section-two{
    padding-top: 45px;
}

.content-module[data-module="3"] .section-three{
    padding-top: 45px;
}

.content-module[data-module="3"] .section-two h2,
.section-three h2{
    font-size: 24px;
    line-height: 1;
    color:#000;
    margin-bottom:30px;
    text-align: left;
    font-family:"SimHei","黑体",sans-serif;
    font-weight: 700;/*添加以下代码来控制宽度和右侧留白 */
    width:75%;
    /* max-width: 690px;
    margin-right:auto;/*保持左对齐 */
}


.image-module[data-module="image1"] {
    margin-top: 30px;
    margin-bottom: 10px;
}

/* .image-module[data-module="image2"] {
    margin-top: 90px;
    margin-bottom: 0px;
} */


.image-module[data-module="image2"] h5,
.image-module[data-module="image1"] h5,
.image-module[data-module="image3"] h5,
.image-module[data-module="image4"] h5{
    position: relative;
    margin-top: 40px; /* 使用margin-top来向下移动 */
    width: 80%;
    font-size: 18px;
    color: #666;
    font-family: "SimHei", "黑体", sans-serif;
    font-weight: normal;
    margin-bottom: 0px;
    padding: 40px 0;
    text-align: center;
}

/* 如果需要更精细的控制，可以使用类名 */
.content-module.large-spacing {
    margin-top: 80px;
    margin-bottom: 80px;
}

.content-module.medium-spacing {
    margin-top: 40px;
    margin-bottom: 40px;
}

.content-module.small-spacing {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* 图片样式保持不变 */
.expansion-image {
    margin-top: 75px;
    position: relative;
}

.expansion-image img {
    width: 80%; 
    height: auto;
    border-radius: 5px;
    margin-left: 0;
    display: block;
    float: left;
    clear: both;
}


/* -----------------产品页扩展页3-1转化产品二级扩展页开始--------------------- */
/* ----------------------- 转化产品二级扩展页样式开始 ----------------------- */


/* 为二级扩展页设置更高的z-index */
.expansion-overlay#expansionOverlay3-1 {
    z-index: 10001; /* 比普通扩展页高一级 */
}

.expansion-overlay#expansionOverlay3-1 .expansion-container {
    width: 50%;
    background: transparent;
    padding: 0;
    overflow: visible;
    overflow-y: auto;
    height: 100vh;
}

/* 转化产品二级扩展页的盒子样式 */
.expansion-overlay#expansionOverlay3-1 .box-container {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 0px;
    min-height: 100vh;
    overflow-y: auto;
    background: transparent;
    overflow: visible;
}

.expansion-overlay#expansionOverlay3-1 .box {
    display: flex;
    width: 100%;
    height: 550px;
    background: #fff;
    min-height: 550px;
    border-radius: 0px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 0px;
    flex-shrink: 0;
}

.expansion-overlay#expansionOverlay3-1 .text-section {
    width: 66.1%;
    padding: 0px;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background-color 0.3s ease;
    position: relative;
    border-bottom: 1px solid #dad8d8;
}

.expansion-overlay#expansionOverlay3-1 .box:hover .text-section {
    background: rgba(42, 42, 42, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid #0a0a0a;
}

.expansion-overlay#expansionOverlay3-1 .text-section h3 {
    position: absolute;
    top: 37px;
    left: 18px;
    font-size: 42px;
    font-weight: bold;
    color: #333;
    font-family: "SimHei", "黑体", sans-serif;
    text-align: left;
    margin: 0;
    transition: color 0.3s ease;
}

.expansion-overlay#expansionOverlay3-1 .text-section p {
    position: absolute;
    bottom: 63px;
    left: 18px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
    color: #333;
    font-family: "SimHei", "黑体", sans-serif;
    text-align: left;
    margin: 0;
    transition: color 0.3s ease;
    width: calc(100% - 50px);
}

.expansion-overlay#expansionOverlay3-1 .text-section h1 {
    position: absolute;
    bottom: 40px;
    left: 18px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
    color: #a6a6a6;
    font-family: "SimHei", "黑体", sans-serif;
    text-align: left;
    margin: 0;
    transition: color 0.3s ease;
    width: calc(100% - 50px);
}

.expansion-overlay#expansionOverlay3-1 .text-section h2 {
    position: absolute;
    bottom: 18px;
    left: 18px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
    color: #a6a6a6;
    font-family: "SimHei", "黑体", sans-serif;
    text-align: left;
    margin: 0;
    transition: color 0.3s ease;
    width: calc(100% - 50px);
}




/* 副标题样式 */
.expansion-overlay#expansionOverlay3-1 .box[data-box="1"] .subtitle {
    position: relative;
    left: 250px;
    top: 40px;
    font-size: 22px;
    color: #666;
    display: block;
    line-height: 1.6;
    font-family: "Hiragino Mincho ProN", "Source Han Serif SC", "SimSun", "宋体", serif;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    font-weight: 700;
    margin-bottom: 1px;
    width: 100%;
    text-align: left;
}

.expansion-overlay#expansionOverlay3-1 .box[data-box="2"] .subtitle {
    position: relative;
    left: 250px;
    top: 40px;
    font-size: 22px;
    color: #666;
    display: block;
    line-height: 1.6;
    font-family: "Hiragino Mincho ProN", "Source Han Serif SC", "SimSun", "宋体", serif;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    font-weight: 700;
    margin-bottom: 1px;
    width: 100%;
    text-align: left;
}

.expansion-overlay#expansionOverlay3-1 .box[data-box="3"] .subtitle {
    position: relative;
    left: 250px;
    top: 40px;
    font-size: 22px;
    color: #666;
    display: block;
    line-height: 1.6;
    font-family: "Hiragino Mincho ProN", "Source Han Serif SC", "SimSun", "宋体", serif;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    font-weight: 700;
    margin-bottom: 1px;
    width: 100%;
    text-align: left;
}

/* 鼠标悬停时显示副标题 */
.expansion-overlay#expansionOverlay3-1 .box:hover .subtitle {
    opacity: 1;
    max-height: none;
    overflow: visible;
}

/* 鼠标悬停时文字颜色变为白色 */
.expansion-overlay#expansionOverlay3-1 .box:hover .text-section h3,
.expansion-overlay#expansionOverlay3-1 .box:hover .subtitle,
.expansion-overlay#expansionOverlay3-1 .box:hover .text-section p,
.expansion-overlay#expansionOverlay3-1 .box:hover .text-section h1,
.expansion-overlay#expansionOverlay3-1 .box:hover .text-section h2 {
    color: white !important;
    transition: color 0.3s ease;
}

/* 图片区域 */
.expansion-overlay#expansionOverlay3-1 .image-section {
    width: 33.9%;
    overflow: hidden;
}

.expansion-overlay#expansionOverlay3-1 .image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 为二级扩展页添加最小化按钮支持 */

.expansion-overlay#expansionOverlay3-1 .box:hover .image-section img {
    transform: scale(1.5);
}
/* ----------------------- 转化产品二级扩展页样式结束 ----------------------- */

/* -----------------产品页扩展页3-1转化产品二级扩展页结束--------------------- */


/* -----------------扩展页3样式开始--------------------- */
#expansionContainer3 .expansion-left {
    width: 20%;
    text-align: left; /* 确保整体左对齐 */
}

/* 右侧内容 (62.5%) */
#expansionContainer3.expansion-right {
    width: 80%;
}

#expansionContainer3 .expansion-image img {
    width: 125%; 
    height: auto;
    border-radius: 5px;
    margin-left: 0;
    display: block;
    float: left;
    clear: both;
}

/* 为三级扩展页设置更高的z-index */
.expansion-overlay#expansionOverlay3 {
    z-index: 10002; /* 比二级扩展页高一级 */
}

/* 扩展页左侧附加内容样式 */
.expansion-overlay#expansionOverlay3 .expansion-container#expansionContainer3 .expansion-left{
    margin-top: 50px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay3 .expansion-container#expansionContainer3 .expansion-left .expansion-left-additional {
    margin-top: 500px ; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay3 .expansion-container#expansionContainer3 .expansion-left .expansion-left-additional1 {
    margin-top: 1665px ; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay3 .expansion-container#expansionContainer3 .expansion-left .expansion-left-additional2 {
    margin-top: 480px ; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay3 .expansion-container#expansionContainer3 .expansion-left .expansion-left-additional3 {
    margin-top: 1660px ; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay3 .expansion-container#expansionContainer3 .expansion-left .expansion-left-additional4 {
    margin-top: 480px ; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay3 .expansion-container#expansionContainer3 .expansion-left .expansion-left-additional5 {
    margin-top: 3407px ; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay3 .expansion-container#expansionContainer3 .expansion-left .expansion-left-additional6 {
    margin-top: 2225px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay3 .expansion-container#expansionContainer3 .expansion-left .expansion-left-additional7 {
    margin-top: 480px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay3 .expansion-container#expansionContainer3 .expansion-left .expansion-left-additional8 {
    margin-top: 450px ; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay3 .expansion-container#expansionContainer3 .expansion-left .expansion-left-additional9 {
    margin-top: 6950px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay3 .expansion-container#expansionContainer3 .expansion-left .expansion-left-additional10 {
    margin-top: 4578px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay3 .expansion-container#expansionContainer3 .expansion-left .expansion-left-additional11 {
    margin-top: 485px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}
/* -----------------扩展页3样式结束--------------------- */





/* -----------------扩展页4样式开始--------------------- */
#expansionContainer4 .expansion-left {
    width: 20%;
    text-align: left; /* 确保整体左对齐 */
}

/* 右侧内容 (62.5%) */
#expansionContainer4.expansion-right {
    width: 80%;
}

#expansionContainer4 .expansion-image img {
    width: 125%; 
    height: auto;
    border-radius: 5px;
    margin-left: 0;
    display: block;
    float: left;
    clear: both;
}

/* 扩展页左侧附加内容样式 */
.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left{
    margin-top: 50px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional {
    margin-top: 2280px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional1 {
    margin-top: 475px; /* 流量 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional2 {
    margin-top: 485px; /* 地推 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional3 {
    margin-top: 1660px; /* 外部 */
    padding: 20px 0;
    position: relative; 
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional4 {
    margin-top: 1670px ; /* 户外 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional5 {
    margin-top: 1650px ; /* 裂变 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional6 {
    margin-top: 1665px ; /* 大众 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional7 {
    margin-top: 2250px ; /* 市场 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional8 {
    margin-top: 1070px ; /* 营销 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional9 {
    margin-top: 480px ; /* 大型 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional10 {
    margin-top: 2255px ; /* 四季 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional11 {
    margin-top: 3405px ; /* 重大 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional12 {
    margin-top: 1650px ; /* 二十四 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional13 {
    margin-top: 2850px ; /* 管理 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional14 {
    margin-top: 3435px ; /* 运营 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay4 .expansion-container#expansionContainer4 .expansion-left .expansion-left-additional15 {
    margin-top: 1660px ; /* 文化 */
    padding: 20px 0;
    position: relative;
}
/* -----------------扩展页4样式结束--------------------- */




/* -----------------扩展页5样式开始--------------------- */
#expansionContainer5 .expansion-left {
    width: 20%;
    text-align: left; /* 确保整体左对齐 */
}

/* 右侧内容 (80%) */
#expansionContainer5.expansion-right {
    width: 80%;
}

#expansionContainer5 .expansion-image img {
    width: 125%; 
    height: auto;
    border-radius: 5px;
    margin-left: 0;
    display: block;
    float: left;
    clear: both;
}

/* 为五级扩展页设置更高的z-index */
.expansion-overlay#expansionOverlay5 {
    z-index: 10003; /* 比三级扩展页高一级 */
}

/* 扩展页左侧附加内容样式 */
.expansion-overlay#expansionOverlay5 .expansion-container#expansionContainer5 .expansion-left{
    margin-top: 60px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay5 .expansion-container#expansionContainer5 .expansion-left .expansion-left-additional {
    margin-top: 1930px ; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}


/* -----------------扩展页5样式结束--------------------- */




/* -----------------扩展页6样式开始--------------------- */
#expansionContainer6 .expansion-left {
    width: 20%;
    text-align: left; /* 确保整体左对齐 */
}

/* 右侧内容 (80%) */
#expansionContainer6.expansion-right {
    width: 80%;
}

#expansionContainer6 .expansion-image img {
    width: 125%; 
    height: auto;
    border-radius: 5px;
    margin-left: 0;
    display: block;
    float: left;
    clear: both;
}

/* 为五级扩展页设置更高的z-index */
.expansion-overlay#expansionOverlay6 {
    z-index: 10003; /* 比三级扩展页高一级 */
}

/* 扩展页左侧附加内容样式 */
.expansion-overlay#expansionOverlay6 .expansion-container#expansionContainer6 .expansion-left{
    margin-top: 60px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay6 .expansion-container#expansionContainer6 .expansion-left .expansion-left-additional {
    margin-top: 1940px ; /* 因何而来 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay6 .expansion-container#expansionContainer6 .expansion-left .expansion-left-additional1 {
    margin-top: 2060px ; /* 是什么 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay6 .expansion-container#expansionContainer6 .expansion-left .expansion-left-additional2 {
    margin-top: 920px ; /* 九周 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay6 .expansion-container#expansionContainer6 .expansion-left .expansion-left-additional3 {
    margin-top: 1180px ; /* 工具 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay6 .expansion-container#expansionContainer6 .expansion-left .expansion-left-additional4 {
    margin-top: 1305px ; /* 参加 */
    padding: 20px 0;
    position: relative;
}
/* -----------------扩展页6样式结束--------------------- */


/* -----------------联合创始人开始--------------------- */
#expansionContainer7 .expansion-left {
    width: 20%;
    text-align: left; /* 确保整体左对齐 */
}

/* 右侧内容 (80%) */
#expansionContainer7.expansion-right {
    width: 80%;
}

#expansionContainer7 .expansion-image img {
    width: 125%; 
    height: auto;
    border-radius: 5px;
    margin-left: 0;
    display: block;
    float: left;
    clear: both;
}

/* 为七级扩展页设置更高的z-index */
.expansion-overlay#expansionOverlay7 {
    z-index: 10003; /* 比其他扩展页高一级 */
}

/* 扩展页左侧附加内容样式 */
.expansion-overlay#expansionOverlay7 .expansion-container#expansionContainer7 .expansion-left{
    margin-top: 60px; /* 调整这个值来控制距离 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay7 .expansion-container#expansionContainer7 .expansion-left .expansion-left-additional {
    margin-top: 2460px; /* 计划概述 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay7 .expansion-container#expansionContainer7 .expansion-left .expansion-left-additional1 {
    margin-top: 2560px; /* 核心权益 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay7 .expansion-container#expansionContainer7 .expansion-left .expansion-left-additional2 {
    margin-top: 1165px; /* 加入条件 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay7 .expansion-container#expansionContainer7 .expansion-left .expansion-left-additional3 {
    margin-top: 1480px; /* 合作模式 */
    padding: 20px 0;
    position: relative;
}

.expansion-overlay#expansionOverlay7 .expansion-container#expansionContainer7 .expansion-left .expansion-left-additional4 {
    margin-top: 1660px; /* 成功案例 */
    padding: 20px 0;
    position: relative;
}
/* -----------------联合创始人样式结束--------------------- */

/* ----------------- 联合创始人黑卡权益页面样式开始 ----------------- */
.black-card-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    padding: 60px 40px;
    min-height: 80vh;
}

/* 左侧卡片展示区域 - 保持不变 */
.card-display-section {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.card-3d-container {
    position: relative;
    perspective: 1000px;
    margin-bottom: 40px;
}

.black-card-3d {
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 215, 0, 0.1),
        inset 0 0 50px rgba(255, 215, 0, 0.1);
    transform: rotateY(-5deg) rotateX(5deg);
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
}

.card-3d-container:hover .black-card-3d {
    transform: rotateY(0deg) rotateX(0deg) translateY(-10px);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 215, 0, 0.3),
        inset 0 0 80px rgba(255, 215, 0, 0.2);
}

.card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(
        circle at center,
        rgba(212, 175, 55, 0.3) 0%,
        rgba(212, 175, 55, 0.1) 40%,
        transparent 70%
    );
    filter: blur(20px);
    z-index: 1;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.card-info {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-info h3 {
    font-size: 24px;
    color: #9a6d34;
    margin-bottom: 10px;
    font-weight: bold;
}

.card-info p {
    color: #2c2c2c;
    margin-bottom: 15px;
    opacity: 0.8;
}



/* 右侧权益区域 - 修改布局 */
.benefits-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* 修改权益网格布局为单列 */
.benefits-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}

/* 修改权益卡片宽度与summary-card保持一致 */
.benefit-card {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 100%; /* 确保宽度100% */
    box-sizing: border-box; /* 包含padding和border */
    min-height: 250px; /* 最小高度 */
    height: auto; /* 自动高度 */
}

.benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    transition: left 0.6s ease;
}

.benefit-card:hover::before {
    left: 100%;
}

.benefit-card:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.benefit-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #605633, #9a6d34);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: #000;
}

.benefit-content{
    margin-top: -20px;
}

.benefit-content h4 {
    font-size: 26px;
    color: #9a6d34;
    margin-bottom: 10px;
    font-weight: bold;
    margin-top: -10px;
}

.benefit-content p {
    color: #313131;
    line-height: 1.5;
    font-size: 20px;
    margin-bottom: 5px;
    opacity: 0.9;
    margin-top: 0;
}



/* 权益总结 - 调整宽度与benefit-card一致 */
.benefits-summary {
    margin-top: 20px;
    width: 100%;
}

.summary-card {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    width: 100%; /* 确保宽度100% */
    box-sizing: border-box; /* 包含padding和border */
}

.summary-card h3 {
    font-size: 28px;
    color: #9a6d34;
    margin-bottom: 15px;
}

.summary-card p {
    color: #3a3939;
    font-size: 20px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.expansion-overlay#expansionOverlay7 .expansion-container#expansionContainer7 .benefits-summary .stats {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.expansion-overlay#expansionOverlay7 .expansion-container#expansionContainer7 .benefits-summary .stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.expansion-overlay#expansionOverlay7 .expansion-container#expansionContainer7 .benefits-summary .stats .stat-item .stat-number {
    font-size: 36px;
    font-weight: bold;
    color: #9a6d34;
    margin-bottom: 5px;
}

.expansion-overlay#expansionOverlay7 .expansion-container#expansionContainer7 .benefits-summary .stats .stat-item .stat-label {
    font-size: 14px;
    color: #090909;
    opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .black-card-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .card-display-section {
        position: relative;
        top: 0;
    }
    
    .black-card-3d {
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .black-card-layout {
        padding: 40px 20px;
    }
    
    .benefit-card {
        padding: 25px;
    }
    
    .expansion-overlay#expansionOverlay7 .expansion-container#expansionContainer7 .benefits-summary .stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .summary-card {
        padding: 30px 20px;
    }
}

/* 滚动动画 */
.benefit-card {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

.benefit-card:nth-child(1) { animation-delay: 0.1s; }
.benefit-card:nth-child(2) { animation-delay: 0.2s; }
.benefit-card:nth-child(3) { animation-delay: 0.3s; }
.benefit-card:nth-child(4) { animation-delay: 0.4s; }
.benefit-card:nth-child(5) { animation-delay: 0.5s; }
.benefit-card:nth-child(6) { animation-delay: 0.6s; }
.benefit-card:nth-child(7) { animation-delay: 0.7s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ----------------- 联合创始人黑卡权益页面样式结束 ----------------- */


/* ----------------------- 精品线下课扩展页样式开始 ----------------------- */
#expansionContainer8 .expansion-left {
    width: 20%;
    text-align: left; /* 确保整体左对齐 */
}

/* 右侧内容 (80%) */
#expansionContainer8.expansion-right {
    width: 80%;
}

.expansion-overlay#expansionOverlay8 .expansion-container#expansionContainer8 .expansion-left .expansion-left-additional {
    margin-top: 2330px !important; 
    padding: 20px 0;
    position: relative;
}


.expansion-overlay#expansionOverlay8 .expansion-container#expansionContainer8 .expansion-left .expansion-left-additional1 {
    margin-top: 1665px !important; 
    padding: 20px 0;
    position: relative;
}




/* 调整精品线下课扩展页中的海报样式 */
#expansionContainer8 .poster-gallery {
    width: 100%; /* 确保海报容器占满80%的右侧宽度 */
    max-width: none; /* 移除最大宽度限制 */
}


/* 顶部视频区域样式 */
#expansionContainer8 .expansion-header-video {
    width: 100%;
    height: 955px;
    position: relative;
    overflow: hidden;
}

#expansionContainer8 .expansion-header-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#expansionContainer8 .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

#expansionContainer8 .video-overlay h2 {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    font-family: "SimHei", "黑体", sans-serif;
}

#expansionContainer8 .video-overlay p {
    font-size: 1.8rem;
    max-width: 600px;
    line-height: 1.6;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

#expansionContainer8 .video-controls {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    gap: 10px;
}

#expansionContainer8 .control-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background 0.3s ease;
}

#expansionContainer8 .control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 课程板块通用样式 */
#expansionContainer8 .course-section {
    margin-bottom: 80px;
    /*--------------------------------------------------------------------- 这里上一个设置得是124% */
    width: 100%;
    
}

/* 近期课程预告海报样式 - 新增部分 */
.poster-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 60px;
    max-width: 100%;
}




.poster-item {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    cursor: pointer;
}

.poster-item:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.poster-image {
    width: 630px;
    height: 100%; /* 适合长图海报的高度 */
    position: relative;
    overflow: hidden;
}

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

.poster-item:hover .poster-image img {
    transform: scale(1.05);
}

/* 海报悬停效果 */
.poster-overlay {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(46, 93, 76, 0) 0%,
        rgba(46, 93, 76, 0.1) 50%,
        rgba(46, 93, 76, 0.8) 100%
    );
    opacity: 0;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
}

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

.poster-info {
    color: white;
    transform: translateY(20px);
    transition: transform 0.4s ease;
   
}

.poster-item:hover .poster-info {
    transform: translateY(0);
}

.poster-info h4 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: "SimHei", "黑体", sans-serif;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.poster-date {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    opacity: 0.9;
}

.poster-desc {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0;
    max-height: 0;
    transition: all 0.4s ease;
    margin-bottom: 20px;
}

.poster-item:hover .poster-desc {
    opacity: 1;
    max-height: 100px;
}

.btn-poster-register {
    background: rgba(255, 255, 255, 0.9);
    color: #2e5d4c;
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "SimHei", "黑体", sans-serif;
    font-size: 14px;
    opacity: 0;
    transform: translateY(10px);
}

.poster-item:hover .btn-poster-register {
    opacity: 1;
    transform: translateY(0);
}

.btn-poster-register:hover {
    background: white;
    color: #1e3d30;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 海报标签 */
.poster-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #2e5d4c, #4a8c76);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(46, 93, 76, 0.3);
}


.section-title {
    font-size: 36px;
    color: #000;
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: 2px solid #2e5d4c;
    font-family: "SimHei", "黑体", sans-serif;
    font-weight: bold;
}

/* 视频播放器通用样式 */
.video-player, .testimonial-video-player {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.video-player video, .testimonial-video-player video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-controls-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.video-player:hover .video-controls-overlay,
.testimonial-video-player:hover .video-controls-overlay {
    opacity: 1;
}

.play-btn {
    width: 80px;
    height: 80px;
    background:rgb(46, 93, 76,0.7);
    border: none;
    border-radius: 50%;
    color: rgb(255, 255, 255,0.7);
    font-size: 30px;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;

}

.play-btn:hover {
    transform: scale(1.1);
    background: rgba(212, 175, 55, 1);
}

.video-info {
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
}

/* 近期课程预告视频样式 */
.video-gallery {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.video-item {
    display: flex;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.video-item .video-player {
    width: 50%;
    height: 350px;
}

.video-details {
    width: 50%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.video-details h4 {
    font-size: 28px;
    margin-bottom: 15px;
    color: #333;
    font-family: "SimHei", "黑体", sans-serif;
}

.course-date {
    color: #2e5d4c;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 18px;
}

.course-desc {
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 16px;
}

.btn-register {
    background: #2e5d4c;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
    font-family: "SimHei", "黑体", sans-serif;
    font-size: 16px;
    align-self: flex-start;
}

.btn-register:hover {
    background: #1e3d30;
}



/* 往期课程回顾样式单行 */
.video-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
    gap: 30px;
    width: 100%;
}

.video-grid-item {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}

.video-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.video-grid-item .video-player {
    height: 250px;
}

.video-grid-details {
    padding: 25px;
}

.video-grid-details h4 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
    font-family: "SimHei", "黑体", sans-serif;
}

.review-date {
    color: #2e5d4c;
    font-weight: bold;
    margin-bottom: 15px;
}

.review-stats {
    display: flex;
    gap: 20px;
}

.review-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #888;
    font-size: 14px;
}

/* 客户评价视频样式 */
.testimonial-video-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 30px;
}

.testimonial-video-item {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-video-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.testimonial-video-player {
    height: 300px;
}

.testimonial-video-content {
    padding: 30px;
}

.client-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.client-info h4 {
    margin: 0;
    font-size: 20px;
    color: #333;
    font-family: "SimHei", "黑体", sans-serif;
}

.client-info p {
    margin: 0;
    color: #888;
    font-size: 14px;
}

.rating {
    color: #d4af37;
    margin-left: auto;
}

.testimonial-quote {
    margin-bottom: 20px;
}

.testimonial-quote p {
    color: #555;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
    text-align: left;
}

.testimonial-footer {
    border-top: 1px solid #eee;
    padding-top: 15px;
    color: #888;
    font-size: 14px;
}



/* 视频模态框样式优化 */
.video-modal {
    display: none;
    position: fixed;
    z-index: 10010;
    left: 0;
    top: 0;
    width: 47%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    background: #000;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 视频容器 - 关键修改 */
.modal-video-container {
    position: relative;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px; /* 添加内边距 */
    width: auto;
    height: auto;
    min-height: 200px; /* 设置最小高度 */
}

/* 横屏视频的下移距离 */
.modal-video-container:has(#modalVideo.custom-landscape) {
    margin-top: 25%; /* 横屏视频下移5% */
}

/* 竖屏视频的下移距离 */
.modal-video-container:has(#modalVideo.portrait) {
    margin-top: 12.2%; /* 竖屏视频下移10% */
}

#modalVideo {
    max-width: auto;
    max-height: auto; /* 限制最大高度 */
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 自定义横屏视频尺寸 - 这里可以随意调节 */
#modalVideo.custom-landscape {
    max-width: 1195px !important;    /* 调节宽度 */

    /* border: 2px solid #d4af37;       */
}

/* 竖屏视频保持原样 */
#modalVideo.portrait {
    max-height: 80vh;
    max-width: 50vh;
    width: auto !important;
    height: auto !important;
}


.modal-video-info {
    padding: 20px;
    background: #fff;
    border-top: 1px solid #eee;
}

.modal-video-info h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-family: "SimHei", "黑体", sans-serif;
    font-size: 24px;
}

.modal-video-info p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10011;
    transition: color 0.3s ease;
    background: rgba(0, 0, 0, 0.5);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-modal:hover {
    color: #d4af37;
    background: rgba(0, 0, 0, 0.7);
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .video-item {
        flex-direction: column;
    }
    
    .video-item .video-player,
    .video-details {
        width: 100%;
    }
    
    .video-item .video-player {
        height: 300px;
    }
}

@media (max-width: 992px) {
    .video-gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .testimonial-video-container {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
}

@media (max-width: 768px) {
    .video-overlay h2 {
        font-size: 2.5rem;
    }
    
    .video-overlay p {
        font-size: 1.2rem;
    }
    
    .video-gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .testimonial-video-container {
        grid-template-columns: 1fr;
    }
    
    .testimonial-video-item {
        margin-bottom: 30px;
    }
    
    .client-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .rating {
        margin-left: 0;
    }
}


/* ----------------------- 精品线下课扩展页样式结束 ----------------------- */












/* -----------------扩展页右侧内容样式结束--------------------- */

/* 响应式设计 */
@media (max-width: 992px) {
    .expansion-container {
        width: 80%;
    }
    
    .expansion-body {
        flex-direction: column;
        gap: 30px;
    }
    
    .expansion-left,
    .expansion-right {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .expansion-container {
        width: 100%;
    }
    
    .expansion-content {
        padding: 20px;
    }
    
    .title-black {
        font-size: 28px;
    }
    
    .title-white {
        font-size: 24px;
    }
}
/* ----------------------- 师演匠文化扩展页样式开始 ----------------------- */
/* ----------------------- 全屏产品图片样式结束 ----------------------- */


/* ----------------------- 师演匠咨询扩展页样式开始 ----------------------- */
/* 当资讯扩展页激活时显示最小化按钮 */

/* 扩展页容器样式 - 只包含盒子 */
.expansion-overlay#expansionOverlay2 .expansion-container {
    width: 66.7% ;
    background: transparent;
    padding: 0;
    overflow: visible ;
    overflow-y: auto; /* 添加垂直滚动 */
    height: 100vh; /* 确保容器高度为视口高度 */
}


/* ----------------------- 转化产品最小化按钮样式开始 ----------------------- */
.expansion-minimize[data-expansion="2"] {
    position: fixed; /* 使用fixed定位相对于视口 */
    top: 31px; /* 距离顶部距离 */
    left: 753.5px; /* 距离左侧距离 - 在屏幕左上角 */
    width: 67px;
    height: 67px;
    background-color: #2e5d4c;
    border-radius: 0px;
    display: none; /* 默认隐藏 */
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 10002; /* 确保在最上层 */
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.expansion-overlay#expansionOverlay2.active ~ #globalMinimizeBtn {
    display: flex;
}

.expansion-minimize[data-expansion="2"]:hover {
    background-color: #1e3d30;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}


/* ----------------------- 转化产品最小化按钮样式结束 ----------------------- */

/* ----------------------- 转化产品最小化按钮样式开始 ----------------------- */
.expansion-minimize[data-expansion="3-1"] {
    position: fixed; /* 使用fixed定位相对于视口 */
    top: 31px; /* 距离顶部距离 */
    left: 1182px; /* 距离左侧距离 - 在屏幕左上角 */
    width: 67px;
    height: 67px;
    background-color: #2e5d4c;
    border-radius: 0px;
    display: none; /* 默认隐藏 */
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 10002; /* 确保在最上层 */
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.expansion-overlay#expansionOverlay3-1.active ~ #globalMinimizeBtn3-1 {
    display: flex;
}

.expansion-minimize[data-expansion="3-1"]:hover {
    background-color: #1e3d30;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
/* ----------------------- 转化产品最小化按钮样式结束 ----------------------- */








/* ----------------------- 扩展页跳转横向栏样式开始 ----------------------- */
.expansion-navbar {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 99999;
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: none;
}

.expansion-navbar.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.expansion-nav-content {
    background-color: #2e5d4c;
    padding: 15px 0; /* 只保留上下内边距，左右设为0 */
    border-radius: 0px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    width: 852px;
    height: 62px;
    display: flex; /* 关键 */
    align-items: center; /* 垂直居中 */
    z-index: 99999; /* 内容也设置高z-index */
    position: relative; /* 确保z-index生效 */
    transition: none !important;
}

/* 师演匠资讯扩展页的特殊宽度 */
.expansion-nav-content.wide {
    min-width: 1279px; 
}



/* 为无体验转化全案也设置1279px宽度 */
.expansion-nav-content[data-type="no-experience"] {
    min-width: 1279px;
    width: 1279px;
}

.expansion-nav-content:hover {
    background-color: #1e3d30;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.nav-item {
    display: flex;
    align-items: center;
    color: white;
    font-family: "SimHei", "黑体", sans-serif;
    position: relative;
    width: 100%;
}

.nav-prefix {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    position: absolute;
    left: 20px; /* 现在可以设为0了 */
    margin-left: 20px; /* 或者用margin来控制距离 */
}

.nav-title {
    font-size: 18px;
    font-weight: 700;
    position: absolute;
    left: 120px; /* 自由调节 */
}

/* 鼠标滑过prefix的效果 */
.nav-prefix:hover {
    color: #bfae4d !important; /* 金色效果 */
    transition: color 0.3s ease;
}

/* 鼠标滑过title的效果 */
.nav-title:hover {
    color: #bfae4d !important; /* 金色效果 */
    transition: color 0.3s ease;
}

/* 整个bar栏悬停时prefix和title也变色 */
.expansion-nav-content:hover .nav-prefix,
.expansion-nav-content:hover .nav-title {
    color: #bfae4d;
}

.nav-date {
    font-size: 16px;
    font-weight: 700;
    opacity: 0.9;
    position: absolute;
    right: 20px; /* 自由调节 */
    margin-right: 20px; /* 或者用margin */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .expansion-navbar {
        bottom: 20px;
        left: 20px;
    }
    
    .expansion-nav-content {
        padding: 12px 20px;
    }
    
    .expansion-nav-content.wide,
    .expansion-nav-content[data-type="no-experience"] {
        width: 90vw;
        min-width: auto;
    }

    .nav-item {
        gap: 10px;
    }
    
    .nav-prefix {
        font-size: 14px;
    }
    
    .nav-title {
        font-size: 16px;
    }
    
    .nav-date {
        font-size: 12px;
    }
}
/* ----------------------- 扩展页跳转横向栏样式结束 ----------------------- */



/* ----------------------- 新闻页面开始 ----------------------- */
/* --------第一条新闻开始-------- */

.box-container {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 0px;
    min-height: 100vh; /* 最小高度为视口高度 */
    overflow-y: auto;
    background: transparent;
    overflow: visible; /* 改为visible */
}

/* 盒子基础样式 */
.box {
    display: flex;
    width: 100%;
    height: 550px; /* 2:2长宽比，高度固定 */
    /* background: #fff; */
    min-height: 550px; /* 添加最小高度 */
    border-radius: 0px;
    overflow: hidden;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
    transition: all 0.3s ease;
    cursor: pointer;
    border: 0px;
    flex-shrink: 0; /* 防止盒子被压缩 */
}


/* 文本区域 - 占据2/3宽度 */
.text-section {
    width: 40%;
    padding: 0px;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background-color 0.3s ease;
    position: relative; /* 为绝对定位文字提供参考 */
    border-bottom: 1px solid #dad8d8; /* 内部分隔线 */
}

.box:hover .text-section {
    background: rgba(42, 42, 42, 0.95); /* 深黑色带透明度 */
    backdrop-filter: blur(8px); /* 磨砂模糊效果 */
    -webkit-backdrop-filter: blur(8px); /* Safari 支持 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid #0a0a0a; /* 悬停时保持分隔线 */
}

.text-section h3 {
    position: absolute;
    top: 37px;
    left: 18px;
    font-size: 35px;
    font-weight: bold;
    color: #333;
    font-family: "SimHei", "黑体", sans-serif;
    text-align: left;
    margin: 0;
    transition: color 0.3s ease;
}

.text-section p {
    position: absolute;
    bottom: 63px;
    left: 18px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
    color: #333;
    font-family: "SimHei", "黑体", sans-serif;
    text-align: left;
    margin: 0;
    transition: color 0.3s ease;
    width: calc(100% - 50px); /* 考虑padding */
}


.text-section h1 {
    position: absolute;
    bottom: 40px;
    left: 18px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
    color: #a6a6a6;
    font-family: "SimHei", "黑体", sans-serif;
    text-align: left;
    margin: 0;
    transition: color 0.3s ease;
    width: calc(100% - 50px); /* 考虑padding */
}

.text-section h2 {
    position: absolute;
    bottom: 18px;
    left: 18px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
    color: #a6a6a6;
    font-family: "SimHei", "黑体", sans-serif;
    text-align: left;
    margin: 0;
    transition: color 0.3s ease;
    width: calc(100% - 50px); /* 考虑padding */
}

/* 鼠标悬停时文字颜色变为白色 */
.box:hover .text-section h3,
.box:hover .subtitle,
.box:hover .text-section p,
.box:hover .text-section h1,
.box:hover .text-section h2 {
    color: white !important;
    transition: color 0.3s ease;
}

/* 图片区域 - 占据1/3宽度 */
.image-section {
    width: 60%;
    overflow: hidden;
}

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

.box:hover .image-section img {
    transform: scale(1.5);
}

/* 为新闻模态框添加新的ID选择器，保持原有样式 */
#newsModalImage {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

#newsModalVideo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* 新闻模态框的视频尺寸控制 */
#newsModalVideo.custom-landscape {
    max-width: 100%;
    max-height: 80vh;
}

#newsModalVideo.portrait {
    max-height: 80vh;
    max-width: 50vh;
    width: auto !important;
    height: auto !important;
}



/* ======================= 右侧多图布局 ======================= */
/* 图片/视频缩略图通用样式 */
.media-thumb {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    background: #000;
}

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

.media-thumb:hover img {
    transform: scale(1.05);
}

.media-thumb:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* 视频缩略图特殊样式 */
.video-thumb .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(73, 189, 147, 0.9);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    transition: all 0.3s ease;
    z-index: 2;
}

.video-thumb:hover .play-icon {
    background: rgba(73, 189, 147, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

/* 四张图片：2x2网格 */
.image-section.grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    height: 100%;
}

/* 三张图片：一行三列 */
.image-section.grid-3 {
    display: flex;
    height: 100%;
}

.image-section.grid-3 .media-thumb {
    flex: 1;
    height: 100%;
    border-right: 2px solid transparent;
}

.image-section.grid-3 .media-thumb:last-child {
    border-right: none;
}

/* 两张图片：一行两列 */
.image-section.grid-2 {
    display: flex;
    height: 100%;
}

.image-section.grid-2 .media-thumb {
    flex: 1;
    height: 100%;
    border-right: 2px solid transparent;
}

.image-section.grid-2 .media-thumb:last-child {
    border-right: none;
}

/* ======================= 左侧媒体模态框 ======================= */
.media-modal {
    display: none;
    position: fixed;
    z-index: 10010;
    left: 0;
    top: 0;
    width: 33.3%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(5px);
}

.media-modal .modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
}

.modal-media-container {
    position: relative;
    flex: 1;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow: hidden;
}

#modalImage {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

#modalVideo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.modal-media-info {
    padding: 20px;
    background: #fff;
    border-top: 1px solid #eee;
    min-height: 120px;
}

.modal-media-info h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-family: "SimHei", "黑体", sans-serif;
    font-size: 24px;
}

.modal-media-info p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

.media-modal .close-modal {
    position: absolute;
    top: 15px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10011;
    transition: color 0.3s ease;
    background: rgba(0, 0, 0, 0.5);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.media-modal .close-modal:hover {
    color: #d4af37;
    background: rgba(0, 0, 0, 0.7);
}

/* ======================= CSS样式补全 ======================= */
/* 盒子1的样式 */
.box[data-box="1"] .quotes-container {
    position: relative;
    padding: 0 60px;
    margin: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.box[data-box="1"]:hover .quotes-container {
    opacity: 1;
    max-height: none;
}


.box[data-box="1"] .quotes-container .subtitle {
    display: block;
    margin-bottom: 12px;
    margin-left: 80px;
    line-height: 1.6;
    font-size: 22px;
    color: #666;
    font-weight: 400;
    font-family: "Hiragino Mincho ProN", "Source Han Serif SC", "SimSun", "宋体", serif;
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.box[data-box="1"]:hover .quotes-container .subtitle {
    opacity: 1;
    transform: translateY(0);
}

.box[data-box="1"] .quotes-container::before,
.box[data-box="1"] .quotes-container::after {
    content: '';
    position: absolute;
    font-size: 48px;
    color: #49bd93;
    font-family: serif;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.box[data-box="1"] .quotes-container::before {
    content: "「";
    left: 35px;
    top: 5px;
}

.box[data-box="1"] .quotes-container::after {
    content: "」";
    right: 35px;
    bottom: 5px;
}

.box[data-box="1"]:hover .quotes-container::before,
.box[data-box="1"]:hover .quotes-container::after {
    opacity: 1;
}

/* 盒子2的样式 */
.box[data-box="2"] .quotes-container {
    position: relative;
    padding: 0 60px;
    margin: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.box[data-box="2"]:hover .quotes-container {
    opacity: 1;
    max-height: none;
}

.box[data-box="2"] .quotes-container .subtitle {
    display: block;
    margin-left: 40px;
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 22px;
    color: #666;
    font-weight: 400;
    font-family: "Hiragino Mincho ProN", "Source Han Serif SC", "SimSun", "宋体", serif;
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.box[data-box="2"]:hover .quotes-container .subtitle {
    opacity: 1;
    transform: translateY(0);
}

.box[data-box="2"] .quotes-container::before,
.box[data-box="2"] .quotes-container::after {
    content: '';
    position: absolute;
    font-size: 48px;
    color: #49bd93;
    font-family: serif;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.box[data-box="2"] .quotes-container::before {
    content: "「";
    left: 35px;
    top: 5px;
}

.box[data-box="2"] .quotes-container::after {
    content: "」";
    right: 35px;
    bottom: 5px;
}

.box[data-box="2"]:hover .quotes-container::before,
.box[data-box="2"]:hover .quotes-container::after {
    opacity: 1;
}




/* 盒子3的样式（中秋） */
.box[data-box="3"] .quotes-container {
    position: relative;
    padding: 0 60px;
    margin: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.box[data-box="3"]:hover .quotes-container {
    opacity: 1;
    max-height: none;
}

.box[data-box="3"] .quotes-container .subtitle {
    display: block;
    margin-left: 45px;
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 22px;
    color: #666;
    font-weight: 400;
    font-family: "Hiragino Mincho ProN", "Source Han Serif SC", "SimSun", "宋体", serif;
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.box[data-box="3"]:hover .quotes-container .subtitle {
    opacity: 1;
    transform: translateY(0);
}

.box[data-box="3"] .quotes-container::before,
.box[data-box="3"] .quotes-container::after {
    content: '';
    position: absolute;
    font-size: 48px;
    color: #d4af37; /* 中秋金色 */
    font-family: serif;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.box[data-box="3"] .quotes-container::before {
    content: "「";
    left: 35px;
    top: 5px;
}

.box[data-box="3"] .quotes-container::after {
    content: "」";
    right: 35px;
    bottom: 5px;
}

.box[data-box="3"]:hover .quotes-container::before,
.box[data-box="3"]:hover .quotes-container::after {
    opacity: 1;
}

/* 盒子4的样式（视频） */
.box[data-box="4"] .quotes-container {
    position: relative;
    padding: 0 60px;
    margin: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.box[data-box="4"]:hover .quotes-container {
    opacity: 1;
    max-height: none;
}

.box[data-box="4"] .quotes-container .subtitle {
    display: block;
    margin-left: 95px;
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 22px;
    color: #666;
    font-weight: 400;
    font-family: "Hiragino Mincho ProN", "Source Han Serif SC", "SimSun", "宋体", serif;
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.box[data-box="4"]:hover .quotes-container .subtitle {
    opacity: 1;
    transform: translateY(0);
}

.box[data-box="4"] .quotes-container::before,
.box[data-box="4"] .quotes-container::after {
    content: '';
    position: absolute;
    font-size: 48px;
    color: #3498db; /* 视频蓝色 */
    font-family: serif;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.box[data-box="4"] .quotes-container::before {
    content: "「";
    left: 35px;
    top: 5px;
}

.box[data-box="4"] .quotes-container::after {
    content: "」";
    right: 35px;
    bottom: 5px;
}

.box[data-box="4"]:hover .quotes-container::before,
.box[data-box="4"]:hover .quotes-container::after {
    opacity: 1;
}

/* 盒子5的样式（深圳） */
.box[data-box="5"] .quotes-container {
    position: relative;
    padding: 0 60px;
    margin: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.box[data-box="5"]:hover .quotes-container {
    opacity: 1;
    max-height: none;
}

.box[data-box="5"] .quotes-container .subtitle {
    display: block;
    margin-left: 125px;
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 22px;
    color: #666;
    font-weight: 400;
    font-family: "Hiragino Mincho ProN", "Source Han Serif SC", "SimSun", "宋体", serif;
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.box[data-box="5"]:hover .quotes-container .subtitle {
    opacity: 1;
    transform: translateY(0);
}

.box[data-box="5"] .quotes-container::before,
.box[data-box="5"] .quotes-container::after {
    content: '';
    position: absolute;
    font-size: 48px;
    color: #9b59b6; /* 深圳紫色 */
    font-family: serif;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.box[data-box="5"] .quotes-container::before {
    content: "「";
    left: 35px;
    top: 5px;
}

.box[data-box="5"] .quotes-container::after {
    content: "」";
    right: 35px;
    bottom: 5px;
}

.box[data-box="5"]:hover .quotes-container::before,
.box[data-box="5"]:hover .quotes-container::after {
    opacity: 1;
}

/* 盒子6的样式（人事任命） */
.box[data-box="6"] .quotes-container {
    position: relative;
    padding: 0 60px;
    margin: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.box[data-box="6"]:hover .quotes-container {
    opacity: 1;
    max-height: none;
}

.box[data-box="6"] .quotes-container .subtitle {
    display: block;
    margin-left: 75px;
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 22px;
    color: #666;
    font-weight: 400;
    font-family: "Hiragino Mincho ProN", "Source Han Serif SC", "SimSun", "宋体", serif;
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.box[data-box="6"]:hover .quotes-container .subtitle {
    opacity: 1;
    transform: translateY(0);
}

.box[data-box="6"] .quotes-container::before,
.box[data-box="6"] .quotes-container::after {
    content: '';
    position: absolute;
    font-size: 48px;
    color: #2ecc71; /* 任命绿色 */
    font-family: serif;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.box[data-box="6"] .quotes-container::before {
    content: "「";
    left: 35px;
    top: 5px;
}

.box[data-box="6"] .quotes-container::after {
    content: "」";
    right: 35px;
    bottom: 5px;
}

.box[data-box="6"]:hover .quotes-container::before,
.box[data-box="6"]:hover .quotes-container::after {
    opacity: 1;
}

/* 盒子7的样式（乔迁） */
.box[data-box="7"] .quotes-container {
    position: relative;
    padding: 0 60px;
    margin: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.box[data-box="7"]:hover .quotes-container {
    opacity: 1;
    max-height: none;
}

.box[data-box="7"] .quotes-container .subtitle {
    display: block;
    margin-left: 90px;
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 22px;
    color: #666;
    font-weight: 400;
    font-family: "Hiragino Mincho ProN", "Source Han Serif SC", "SimSun", "宋体", serif;
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.box[data-box="7"]:hover .quotes-container .subtitle {
    opacity: 1;
    transform: translateY(0);
}

.box[data-box="7"] .quotes-container::before,
.box[data-box="7"] .quotes-container::after {
    content: '';
    position: absolute;
    font-size: 48px;
    color: #e74c3c; /* 乔迁红色 */
    font-family: serif;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.box[data-box="7"] .quotes-container::before {
    content: "「";
    left: 35px;
    top: 5px;
}

.box[data-box="7"] .quotes-container::after {
    content: "」";
    right: 35px;
    bottom: 5px;
}

.box[data-box="7"]:hover .quotes-container::before,
.box[data-box="7"]:hover .quotes-container::after {
    opacity: 1;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .image-section.grid-4,
    .image-section.grid-3,
    .image-section.grid-2 {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(auto-fill, 1fr);
        gap: 1px;
    }
    
    .image-section.grid-3,
    .image-section.grid-2 {
        flex-direction: column;
    }
    
    .media-modal {
        width: 100%;
    }
    
    .modal-media-container {
        padding: 10px;
    }
}





/* ----------------------- 师演匠咨询扩展页样式结束 ----------------------- */

/* ----------------------- 师演匠咨询扩展页样式结束 ----------------------- */


/* ----------------------------------------业绩页样式开始 --------------------------------------*/

/* 业绩页 - 动画版本（固定定位）- 保持现有滤镜 */
.yeji-page.animated {
    position: fixed;
    top: 100vh;
    left: 0;
    width: 100%;
    height: 100vh;
    /* 102 */
    z-index: 102;
    transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 100px 20px 20px;
    background: url('../images/主页面/业绩页面/张总侧脸2_副本.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

.yeji-page.animated.active {
    transform: translateY(-100vh);
}

/* 保持现有的滤镜层 */
.yeji-page.animated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(to top,
            rgba(19, 19, 19, 0.95) 0%,
            rgba(19, 19, 19, 0.9) 20%,
            rgba(19, 19, 19, 0.7) 40%,
            rgba(19, 19, 19, 0.05) 60%,
            rgba(19, 19, 19, 0.05) 80%,
            rgba(19, 19, 19, 19) 100%);
}

/* rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.9) 20%,
        rgba(0, 0, 0, 0.7) 40%,
        rgba(0, 0, 0, 0.05) 60%,
        rgba(0, 0, 0, 0.05) 80%,
        rgba(0, 0, 0, 0) 100% */

/* 业绩页 - 自然滚动版本（同样保持滤镜效果） */
.yeji-page.natural {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: url('../images/主页面/业绩页面/张总侧脸2_副本.jpg') no-repeat center center;
    background-size: cover;
    display: none;
    /*  */
    z-index: 101;
    overflow: hidden;
    padding: 100px 20px 20px;
    transform: none !important;
    top: 0 !important;
}

/* 确保自然版本在正确的位置 */
.yeji-page.natural .yeji-page-content {
    margin-top: 695px;
    position: relative;
    z-index: 2;
}

/* 自然滚动版本也需要同样的滤镜 */
.yeji-page.natural::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(to top,
            rgba(19, 19, 19, 0.95) 0%,
            rgba(19, 19, 19, 0.9) 20%,
            rgba(19, 19, 19, 0.7) 40%,
            rgba(19, 19, 19, 0.05) 60%,
            rgba(19, 19, 19, 0.05) 80%,
            rgba(19, 19, 19, 19) 100%);
}

/* 业绩页内容保持现有定位 */
.yeji-page-content {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: 695px;
    position: relative;
    z-index: 2;
}

.yeji-page-content h2 {
    font-size: 2.2rem;
    margin-bottom: 30px;
    color: #f1f0f0;
    line-height: 0.8;
    font-family: 'PingFang SC Light', 'Microsoft YaHei Light', 'Helvetica Light', sans-serif;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 银色按钮样式 */
.more-yeji-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 15px 40px;
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8, #a0a0a0);
    color: #333;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.more-yeji-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #d0d0d0, #f0f0f0, #b0b0b0);
}

.more-yeji-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.more-yeji-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.more-yeji-btn:hover::before {
    left: 100%;
}


/* 银色按钮样式 */
.more-yejianimated-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 15px 40px;
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8, #a0a0a0);
    color: #333;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.more-yejianimated-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #d0d0d0, #f0f0f0, #b0b0b0);
}

.more-yejianimated-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.more-yejianimated-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.more-yejianimated-btn:hover::before {
    left: 100%;
}

/* 银色按钮样式 */
.more-testimonials-btn {
    display: inline-block;
    margin-top: 70px;
    padding: 15px 40px;
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8, #a0a0a0);
    color: #333;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.more-testimonials-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #d0d0d0, #f0f0f0, #b0b0b0);
}

.more-testimonials-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.more-testimonials-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.more-testimonials-btn:hover::before {
    left: 100%;
}




/* logo容器样式调整 */
.logo-container {
    width: 100%;
    max-width: 100%;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 20px auto 0;
    position: relative;
}

.logocontainer {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

/* 创建3行 */
.logo-row {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: fit-content;
    width: 200%;
    overflow: visible;
}

/* 确保每行内的logo总宽度足够 */
.logo-row:nth-child(1) {
    width: calc(150px * 88);
    animation: scrollLeft 30s linear infinite;
}

.logo-row:nth-child(2) {
    width: calc(150px * 88);
    animation: scrollRight 60s linear infinite;
}

.logo-row:nth-child(3) {
    width: calc(150px * 88);
    animation: scrollLeft 30s linear infinite;
}

.logocontainer:hover {
    animation-play-state: paused;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 80px;
    padding: 0 25px;
    flex-shrink: 0;
    background-color: transparent;
    transition: transform 0.3s ease;
    position: relative;
    transform-origin: center;
}

.logo-item:hover {
    transform: scale(2);
    z-index: 1000;
    position: relative;
}

.logo-item img {
    max-height: 35px;
    max-width: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.logo-item img.original-color {
    filter: none;
}

.logo-item img.big_larger {
    max-height: 60px;
    max-width: 100%;
}

.logo-item img.middle_larger {
    max-height: 50px;
    max-width: 100%;
}

.logo-item img.larger {
    max-height: 45px;
    max-width: 100%;
}

.logo-item img.small_larger {
    max-height: 40px;
    max-width: 100%;
}

.logo-item img.smaller {
    max-height: 30px;
    max-width: 100%;
}

.logo-item:hover img {
    opacity: 1;
}

/* 确保内容在滤镜层上方 */
.yeji-page-content h2,
.yeji-page-content .more-testimonials-btn,
.logo-container {
    position: relative;
    z-index: 2;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(calc(-100% / 2));
    }

    100% {
        transform: translateX(0);
    }
}

.logocontainer:hover .logo-row {
    animation-play-state: paused;
}


@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

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

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

/* ----------------------------------------业绩页样式结束 --------------------------------------*/





/* ----------------------------------------好评页面开始 --------------------------------------*/
/* 第一个盒子样式 */
.testimonial-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #131313;
    /* background-color: #112725; */

    color: white;
    padding: 80px 20px;
    z-index: 100;
    box-sizing: border-box;
    overflow-x: hidden;
    left: 0;
    right: 0;
    /* 负边距让底部重叠 */

}

/* 添加渐变遮罩层 */
.testimonial-page::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20vh; /* 视窗高度的20% */
    background: linear-gradient(to bottom, transparent 0%, #131313 100%);
    pointer-events: none;
    z-index: -1;
}

.testimonial-container {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    /* 确保容器内也没有横向滚动 */
}


/* 盒子容器样式 */
.cases-container {
    display: flex;
    gap: 23px;
    margin-top: 40px;
    padding-left: 14.8%;
    /* 容器左边距 */
}

/* 单个盒子样式 */
.case {
    /* #1f1f1f */
    background-color: #1f1f1f;
    border-radius: 16px;
    padding: 30px;
    width: 570px;
    height: 969px;
    /* width: 26.7%; */
    /* 固定宽度 */
    /* aspect-ratio: 1 / 1.7; */
    /* 宽高比 1:2 */
    flex: none;
    /* 禁用flex自动调整 */
    transition: all 0.3s ease;
}

/* 媒体容器样式 */
.media-container {
    position: relative;
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-image {
    width: 60%;
    aspect-ratio: 1 / 2.1;
    /* 宽高比 1:2 */
    object-fit: cover;  
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-top: 6.5%;
}

.video-overlay {
    position: absolute;
    /* 52.4% */
    top: 52.4% !important;
    left: 50.05% !important;
    transform: translate(-50%, -50%);
    width: 54.9% !important;
    height: 112% !important;
    border-radius: 42px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.video-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.small-images-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block; 
    pointer-events: none;
    z-index: 5;
}


.small-image {
    position: absolute; /* 使用绝对定位，可以自由定位 */
    object-fit: contain; /* 改为contain确保完整显示图片 */
    transition: all 0.3s ease;
    pointer-events: all;
}

/* 上面的摄像头 */
#smallImage1 {
    width: 17%;  /* 自定义宽度 */
    height: 5%; /* 自定义高度 */
    /* -1.5% */
    top: -1.5%;    /* 距离顶部位置 */
    left: 41.5%;    /* 距离左侧位置 */
    border-radius: 8px;
}

/* 静音 */
#smallImage2 {
    width: 8.7%;
    height:8.7%;
    top: 92.2%;
    left: 32.8%;
    /* border-radius: 12px; */
}

/* 挂断 */
#smallImage3 {
    width: 10.2%;
    height: 10.2%;
    top: 91.5%;
    left: 45%;
    /* border-radius: 6px; */
}

/* 关闭摄像头 */
#smallImage4 {
    width: 8.7%;
    height: 8.7%;
    top: 92.2%;
    left: 58.5%;
    /* border-radius: 10px; */
}


/* 视频下面的文本 */

/* 文本框容器样式 */
.text-container {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    align-items: center; /* 添加这行：让文本框在容器内居中 */
}

/* 单个文本框样式 */
.text-box {
    padding: 10px;
    transition: all 0.3s ease;
    text-align: center; /* 文本内容居中 */
    width: fit-content; /* 宽度适应内容 */
    max-width: 90%; /* 防止在小屏幕上过宽 */
}

/* 标题样式 */
.text-title {
    color: #ffffff;
    font-size: 35px;
    font-weight: 300;
    margin-bottom: 10px;
    margin-top: 0;
    font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}

/* 内容样式 */
.text-content {
    color: rgba(255, 255, 255, 0.8);
    font-size: 17px;
    line-height: 2.5;
    margin: 0;
    font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
    width: 400px; /* 设置为父容器宽度的80% */

}

.text-box-2 {
    margin-top: -23px; /* 向上移动10px */
}


/* 视频播放控制按钮样式 */
.video-overlay {
    position: relative;
}

.video-play-control {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
}

.video-play-control:hover {
    background: rgba(0, 0, 0, 0.9);
}

.video-play-control i {
    font-size: 24px;
}

.volume-control {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
}

.volume-control:hover {
    background: rgba(0, 0, 0, 0.7);
}

.volume-control i {
    font-size: 14px;
}

/* 静音小图片添加指针 */
.small-image[id="smallImage2"] {
    cursor: pointer;
}





/* 三个翻页按钮css */
/* 页面容器样式 */
.page {
    display: none;
    width: 100%;
    height: 100%;
}

.page.active {
    display: block;
}

/* 翻页指示器样式 */
.page-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 80px 0 0 0; /* 上边距增加到30px，其他边距保持不变 */
    padding: 5px 0;
    height: 20px; /* 固定高度，不占用太多空间 */
}

.indicator {    
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.indicator.active {
    width: 20px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 2px;
}

.indicator:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.indicator.active:hover {
    background-color: #ffffff;
}

/* 好评页面专用视频样式 */
.testimonial-video-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* 好评页面主图片样式 */
#testimonialMainImage,
#testimonialMainImage2,
#testimonialMainImage3 {
    width: 60%;
    aspect-ratio: 1 / 2.1;
    /* 宽高比 1:2 */
    object-fit: cover;  
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-top: 6.5%;
}

/* 好评页面视频容器 */
#testimonialVideoOverlay1,
#testimonialVideoOverlay2,
#testimonialVideoOverlay3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}




/* 响应式设计 */
@media (max-width: 768px) {
    .cases-container {
        flex-direction: column;
        gap: 20px;
        padding-left: 5%;
    }

    .case {
        width: 90%;
    }
}


/* 响应式设计 */
@media (max-width: 768px) {
    .text-container {
        gap: 12px;
    }
    
    .text-box {
        padding: 15px;
    }
    
    .text-title {
        font-size: 16px;
    }
    
    .text-content {
        font-size: 13px;
    }
}




/* -----------------------------------case2 标题样式----------------------------- */
/* 第二个盒子 */
/* -------------盒子2第一个页面样式---------- */
.text-box-case2 {
    position: absolute;
    color: white;
    z-index: 10;
}

.text-box-1-case2 {
    top: 11.5% ;
    left: 50% ;
    transform: translate(-50%, -50%); /* 如果需要真正居中 */
}

/* 23:23 */
.little-box-1-case2{
    position: absolute;
    top: 13.5% !important;
    left: 49.8% !important;
    transform: translate(-50%, -50%); /* 如果需要真正居中 */

}       
/* 王帅 */
.little-box-2-case2{
    position: absolute;
    top: 15% ;
    left: 45.5% ;
    transform: translate(-50%, -50%); /* 如果需要真正居中 */
}
/* 招生教父 */
.little-box-3-case2{
    position: absolute;
    top: 37.1% ;
    left: 55% ;
    transform: translate(-50%, -50%); /* 如果需要真正居中 */
}
/* 周堃 */
.little-box-4-case2{
    position: absolute;
    top: 51.5% ;
    left: 45% ;
    transform: translate(-50%, -50%); /* 如果需要真正居中 */
}

.image-1-case2{
    position: absolute; 
    top: 14.7% !important ;
    left: 40.5% !important;
    z-index: 15;
    width: 50px;
    height: 50px;
}

.text-box-2-case2 {
    top: 16% ;
    left: 43.2% ;
    width: 340px;
}

.image-2-case2{
    position: absolute; 
    top: 36.6% ;
    left: 57.4%;
    width: 50px;    
    height: 50px;
    border-radius: 20px;
}

.text-box-3-case2 {
    top: 38.1% ;
    left: 43.2% ;
    width: 340px;

}

.image-3-case2{
    position: absolute; 
    top: 51.1% !important;
    left: 40.5%  !important;
    width: 50px;
    height: 50px;
    z-index: 15;
}

.text-box-4-case2 {
    top: 52.5% ;
    left: 43.2% ; 
    width: 340px;
}

.text-title-case2 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;

}

/* 后面三个文本框 - 带背景色 */
.text-box-2-case2,
.text-box-3-case2,
.text-box-4-case2 {
    background-color: #353535;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-align: left;
}


.little-content-case2{
    color: #979595;
    font-size: 10px;
    font-weight: 400;       
    font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}

/* case2 内容样式 */
.text-content-case2 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}

.draggable-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* 翻页 */
/* case2 翻页功能样式 - 确保不影响case1 */
.page-case2 {
    display: none;
    width: 100%;
    height: 100%;
}

.page-case2.active {
    display: block;
}

/* case2 翻页指示器样式 - 精确定位 */
.page-indicators-case2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0; /* 重置margin */
    padding: 0; /* 重置padding */
    height: 20px;
    position: absolute; /* 使用绝对定位精确定位 */
    top: 776px; /* 调整这个值来匹配case1的位置 */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 20;
}

.indicator-case2 {    
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator-case2.active {
    width: 20px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 2px;
}

.indicator-case2:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.indicator-case2.active:hover {
    background-color: #ffffff;
}






/* -------------盒子2第二个页面样式---------- */
.page-case2[data-page="2"] .text-box-1-case2 {
    top: 11.7% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

/* 时间位置 */
.page-case2[data-page="2"] .little-box-1-case2 {
    top: 13.5% ;
    left: 49.8% ;
    transform: translate(-50%, -50%);
}

/* 猫猫老师位置 */
.page-case2[data-page="2"] .little-box-2-case2{
    position: absolute; 
    top: 14.8% !important;
    left: 44.4% !important;
    transform: translate(-50%, -50%);
}

/* 师演匠张丽位置 */
.page-case2[data-page="2"] .little-box-3-case2 {
    position: absolute; 
    top: 25.2% !important;
    left: 44.2% !important;   
    transform: translate(-50%, -50%);
}

/* 对话框样式 */
.page-case2[data-page="2"] .text-box-2-case2 {
    top: 26% !important;
    left: 43.2% !important;
    width: 264.5px;
}

/* 猫猫头像 */
.page-case2[data-page="2"] .image-1-case2 {
    position: absolute; 
    top: 14.5% !important;
    left: 40.5% !important;
    width: 50px;
    height: 50px;
    z-index: 15;
}

/* 张丽头像 */
.page-case2[data-page="2"] .image-3-case2 {
    position: absolute; 
    top: 24.8% !important;
    left: 40.5% !important;
    width: 50px;
    height: 50px;
    border-radius: 20px;
    z-index: 15;
}

/* 支付照片 */
.page-case2[data-page="2"] .image-2-case2 {
    position: absolute; 
    top: 19.5% !important;
    left: 44.7% !important;
    width: 72px !important;
    height: 96.3px !important;
    transform: translate(-50%, -50%);
    z-index: 15;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* 小字框样式 */
.page-case2[data-page="2"] .little-content-case2 {
    color: #979595;
    font-size: 10px;
    font-weight: 400;
    font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}

/* 标题样式 */
.page-case2[data-page="2"] .text-title-case2 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
    text-align: center;
}





/* -------------盒子2第三个页面样式---------- */
/* 第三个页面样式 */
.page-case2[data-page="3"] .text-box-8-case2 {
    top: 11.7% ;
    left: 50% ;
    transform: translate(-50%, -50%);
}

/* 时间位置 */
.page-case2[data-page="3"] .little-box-9-case2 {
    position: absolute;
    top: 13.1% ;
    left: 49.3% ;
}

/* 消息1 */
.page-case2[data-page="3"] .little-box-1-case2 {
    position: absolute;
    top: 7px !important;
    left: 148.5px !important;
    z-index: 15;
}

.page-case2[data-page="3"] .image-1-case2 {
    position: absolute;
    top: 5px !important;
    left: 50px !important;
    width: 50px;
    height: 50px;
    z-index: 15;
}

.page-case2[data-page="3"] .text-box-1-case2 {
    position: absolute;
    top: 86px;
    left: 286.5px;
    width: 333px;
    background-color: #353535;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-align: left;
}




/* 消息2 */
.page-case2[data-page="3"] .little-box-2-case2 {
    position: absolute;
    top: 185px!important;
    left: 148.5px !important;

}

.page-case2[data-page="3"] .image-2-case2 {
    position: absolute;
    top: 181px !important;
    left: 50px !important;
    width: 50px;
    height: 50px;
    z-index: 15;
}

.page-case2[data-page="3"] .text-box-2-case2 {
    top:195px !important;
    left: 120px !important;
    width: 333px;
    background-color: #353535;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-align: left;
}



/* 消息3 */
.page-case2[data-page="3"] .little-box-3-case2 {
    position: absolute;
    top: 341px !important;
    left: 148.5px !important;
    transform: translate(-50%, -50%);
}

.page-case2[data-page="3"] .image-3-case2 {
    position: absolute;
    top: 338px !important;
    left: 50px !important;
    width: 50px;
    height: 50px;
    z-index: 15;
}

.page-case2[data-page="3"] .text-box-3-case2 {
    position: absolute;
    top: 352px !important;          
    left: 120px !important;
    width: 333px;
    background-color: #353535;
    border-radius: 12px;    
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-align: left;
}





/* 消息4 */
.page-case2[data-page="3"] .little-box-4-case2 {
    position: absolute;
    top: 321px !important;
    left: 148.5px !important;
    transform: translate(-50%, -50%);
}

.page-case2[data-page="3"] .image-4-case2 {
    position: absolute;
    top: 318px !important;
    left: 50px !important;
    width: 50px;
    height: 50px;
    z-index: 15;
}

.page-case2[data-page="3"] .text-box-4-case2 {
    position: absolute;
    top: 332px !important;          
    left: 120px !important;
    width: 333px;
    background-color: #353535;
    border-radius: 12px;    
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-align: left;
}



/* 消息5 */
.page-case2[data-page="3"] .little-box-5-case2 {
    position: absolute;
    top: 441px !important;
    left: 148.5px !important;
    transform: translate(-50%, -50%);
}

.page-case2[data-page="3"] .image-5-case2 {
    position: absolute;
    top: 438px !important;  
    left: 50px !important;
    width: 50px;
    height: 50px;
    z-index: 15;
}

.page-case2[data-page="3"] .text-box-5-case2 {
    position: absolute;
    top: 452px !important;          
    left: 120px !important;
    width: 333px;
    background-color: #353535;
    border-radius: 12px;    
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-align: left;
}

/* ----------------------消息移动动画效果开始----------------- */
/* 消息组动画控制 */
.page-case2[data-page="3"] .message-group {
    opacity: 0;
    transition: all 0.4s ease;
}

/* 为每个消息组单独设置动画延迟和位移 */
.page-case2[data-page="3"].stage-1 .message-group-1 {
    opacity: 1;
    transform: translateY(0);
}

.page-case2[data-page="3"].stage-2 .message-group-1,
.page-case2[data-page="3"].stage-2 .message-group-2 {
    opacity: 1;
}

.page-case2[data-page="3"].stage-3 .message-group-1 {
    transform: translateY(-57px);
}
.page-case2[data-page="3"].stage-3 .message-group-2 {
    transform: translateY(-57px);
}
.page-case2[data-page="3"].stage-3 .message-group-3 {
    opacity: 1;
}

.page-case2[data-page="3"].stage-4 .message-group-1 {
    transform: translateY(-334px); /* 57 + 277 */
}
.page-case2[data-page="3"].stage-4 .message-group-2 {
    transform: translateY(-334px);
}
.page-case2[data-page="3"].stage-4 .message-group-3 {
    transform: translateY(-277px);
}
.page-case2[data-page="3"].stage-4 .message-group-4 {
    opacity: 1;
}

.page-case2[data-page="3"].stage-5 .message-group-1 {
    transform: translateY(-491px); /* 57 + 277 + 157 */
}
.page-case2[data-page="3"].stage-5 .message-group-2 {
    transform: translateY(-491px);
}
.page-case2[data-page="3"].stage-5 .message-group-3 {
    transform: translateY(-434px); /*277 + 157 */
}
.page-case2[data-page="3"].stage-5 .message-group-4 {
    transform: translateY(-157px);
}
.page-case2[data-page="3"].stage-5 .message-group-5 {
    opacity: 1;
}


/* 所有消息初始隐藏 */
.page-case2[data-page="3"] .message-group {
    opacity: 0;
}

/* 每个阶段只显示对应的消息 */
.page-case2[data-page="3"].stage-1 .message-group-1 {
    opacity: 1;
}

.page-case2[data-page="3"].stage-2 .message-group-1,
.page-case2[data-page="3"].stage-2 .message-group-2 {
    opacity: 1;
}

.page-case2[data-page="3"].stage-3 .message-group-1,
.page-case2[data-page="3"].stage-3 .message-group-2,
.page-case2[data-page="3"].stage-3 .message-group-3 {
    opacity: 1;
}

.page-case2[data-page="3"].stage-4 .message-group-1,
.page-case2[data-page="3"].stage-4 .message-group-2,
.page-case2[data-page="3"].stage-4 .message-group-3,
.page-case2[data-page="3"].stage-4 .message-group-4 {
    opacity: 1;
}

.page-case2[data-page="3"].stage-5 .message-group-1,
.page-case2[data-page="3"].stage-5 .message-group-2,
.page-case2[data-page="3"].stage-5 .message-group-3,
.page-case2[data-page="3"].stage-5 .message-group-4,
.page-case2[data-page="3"].stage-5 .message-group-5 {
    opacity: 1;
}
/* ----------------------消息移动动画效果结束----------------- */
/* 文本样式 */
.page-case2[data-page="3"] .text-title-case2 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
    text-align: center;
}

.page-case2[data-page="3"] .text-content-case2 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.4;
    margin: 2px 0;
    font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}

.page-case2[data-page="3"] .little-content-case2 {
    color: #979595;
    font-size: 10px;
    font-weight: 400;
    font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}

/* 图片样式 */
.page-case2[data-page="3"] .draggable-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
}

/* ---------------下面大字文本样式-------------- */
/* 文本框容器样式 */
.case .page-case2[data-page="1"] .text-container {
    position: absolute;
    top: 795px; /* 在三个点下面 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 80%;
    align-items: center;
    z-index: 10;
}

/* 文本框容器样式 */
.case .page-case2[data-page="2"] .text-container {
    position: absolute;
    top: 795px; /* 在三个点下面 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 80%;
    align-items: center;
    z-index: 10;
}

/* 文本框容器样式 */
.case .page-case2[data-page="3"] .text-container {
    position: absolute;
    top: 795px; /* 在三个点下面 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 80%;
    align-items: center;
    z-index: 10;
}



/* 特定区域的隐藏容器 */
.page-case2[data-page="3"] .overflow-container {
    position: absolute;
    top: 187px;    /* 距离顶部位置 - 可调节 */
    left: 984px;    /* 距离左侧位置 - 可调节 */
    width: 569px;  /* 容器宽度 - 可调节 */
    height: 569px; /* 容器高度 - 可调节 */
    overflow: hidden;
    /* border: 1px solid #ccc;  */
    background: transparent; /* 透明背景 */
    z-index: 1;
}


/* -----------------------------------case3样式----------------------------- */
/* 盒子3页面1 */
/* 第三个盒子的翻页指示器样式 */
.page-indicators-case3 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    height: 20px;
    position: absolute; /* 必须设置为绝对定位 */
    top: 625px; /* 现在这个会生效 */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 20;
}

.indicator-case3 {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator-case3.active {
   width: 20px; /* 激活时变成横线 */
    height: 3px; /* 激活时高度变小 */
    background-color: #ffffff;
    border-radius: 2px;
}

.indicator-case3.active:hover {
    background-color: #ffffff;
}

/* 第三个盒子的页面样式 */
.page-case3 {
    display: none;
    position: relative; /* 确保父容器有相对定位 */
    width: 100%;
    height: 100%;
}

.page-case3.active {
    display: block;
}

/* 确保第三个盒子的容器有相对定位 */
.case:nth-child(3) {
    position: relative; /* 这是关键 */

}

/* 数据内容区域样式 */
.case:nth-child(3) .page-case3[data-page="1"] .data-content { 
    position: absolute;
    top: 55px;
    left: 13px;
    width: 480px;
    height: 220px;
    background-color: #2a2a2a;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* 左侧统计数据样式 */
.left-stats {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-right: 15px;
    top: 30px;
    /* border-right: 1px solid #444; */
}



.case:nth-child(3) .page-case3[data-page="1"] .stat-label {
    font-size: 14px;
    color: #fff !important;
    font-family: 'Arial', sans-serif;
    font-weight: 700;
    margin-bottom: 5px;  /* 用margin控制间距 */
    margin-left: -68px;  
    margin-top: 0px;
    
}

.case:nth-child(3) .page-case3[data-page="1"] .stat-subtitle{
    font-size: 14px;
    font-weight: 700;   
    color: #a9a9a9;  /* 用浅色区分副标题 */
    font-family: 'Arial', sans-serif;
    margin-bottom: 8px;
    margin-left: 0px;  
    margin-top:13px;
}


.case:nth-child(3) .page-case3[data-page="1"] .stat-number {
    font-size: 48px !important;
    /* font-weight: bold; */
    color: #fff !important;  /* 使用!important确保生效 */
    font-family: 'Arial', sans-serif;
    margin-left:10px;
    margin-top: -15px;
}

.stat-up{
    font-family: 'Arial', sans-serif;
    font-weight: 700;
    margin-left: -75px;  
    margin-top: 9.5px;
}


/* 右侧表格样式 */
.right-table {
    width: 55%;
    display: flex;
    flex-direction: column;
}

.right-table .table-row {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    height: 35px;
    top: 23px;
}


.col-1, .col-2, .col-3 {
    color: #fff;
    font-family: 'Arial', sans-serif;
}


 .col-1 {
    position: absolute;
    font-size: 11px;
    text-align: left;
    color: #a2a2a2;
    width: 45px;
    right: 180px;
    font-weight: 700;

}

.col-2 {
    position: absolute;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    width: 15px;
    right: 155px;
}

.col-3 {
    position: absolute;
    height: 20px;
    right: 0px;
    width: 140px;
}

/* 柱状图样式 */
.bar-chart {
    height: 100%;
    background: #2E7D32; /* 绿色渐变 */
    border-radius: 3px;
    position: relative;
    transition: width 1s ease-in-out;
    width: 0; /* 初始为0，通过JS或CSS动画填充 */
}

/* 为每个柱状图设置不同的绿色深度 */
.table-row:nth-child(2) .bar-chart {
    background: #66BB6A; /* 最深的绿色 */
}

.table-row:nth-child(3) .bar-chart {
    background: #A5D6A7; /* 较深的绿色 */
}

.table-row:nth-child(4) .bar-chart {
    background: #C8E6C9; /* 中等绿色 */
}



/* 表头样式 */
.header .col-1, .header .col-2, .header .col-3 {
    color: #ccc;
    font-weight: bold;
    font-size: 12px;
}





/* 数据内容区域样式 */
.case:nth-child(3) .page-case3[data-page="1"] .left-data-content { 
    position: absolute;
    top: 300px;
    left: 15px;
    width: 225px;
    height: 250px;
    background-color: #2a2a2a;
    border-radius: 12px;
}


/* 上面文本框样式 */
.top-text-box {
    width: 100%;
    margin-top: 15px;
    margin-left: 18px;
    margin-bottom: 15px;
}

.data-title {
    color: #ccc;
    font-weight: 700;
    font-family: 'Arial', sans-serif;
    margin-bottom: 8px;
    font-size: 14px;
    text-align: left;
    /* color: #a2a2a2; */
}

/* 头像容器样式 */
.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
}

/* 圆形头像样式 */
.avatar-circle {
    position: relative;
    width: 50px;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: -22px;
}

.avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #4CAF50;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin-left: -120px;
}


/* 头像信息样式 */
.avatar-info {
    text-align: center;
    margin-left: -120px;
}

.avatar-name {
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    margin-bottom: 3px;
}


/* 下面一段话样式 */
.bottom-text {
    width: 195px;
    text-align: left;
    margin-top: -10px;
    padding-top: 15px;
    margin-left: 17px;
    /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
}

.quote-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Arial', sans-serif;
    font-style: italic;
    position: relative;
    padding: 0 5px;
}

.quote-text::before {
    content: '"';
    position: absolute;
    left: -5px;
    top: -5px;
    font-size: 20px;
    color: #4CAF50;
}

.quote-text::after {
    content: '"';
    position: absolute;
    right: 65px;
    bottom: -3px;
    font-size: 20px;
    color: #4CAF50;
}



/* 数据内容区域样式 */
.case:nth-child(3) .page-case3[data-page="1"] .right-data-content { 
    position: absolute;
    top: 300px;
    left: 265px;
    width: 225px;
    height: 250px;
    background-color: #353e37;
    opacity: 0.99;
    border-radius: 12px;
}


/* 转介绍率文本框 */
.top-rate-box {
    width: 100%;
    text-align: left;
    margin-bottom: 15px;
    margin-top: 2px;
    margin-left: 20px;
}

.rate-title {
    color: #ccc;
    font-size: 14px;
    /* font-weight: 600; */
    margin-bottom: 5px;
    margin-top: 15px;
}



/* 进度圆环容器 */
.progress-ring {
    position: relative;
    width: 183px;
    height: 183px;
    margin-left: 22.5px;
    margin-top: 10px;
}

/* SVG圆环 */
.ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* 让圆环从12点开始 */
}

/* 背景圆环 */
.ring-bg {
    stroke: rgba(255, 255, 255, 0.1);
}

/* 进度圆环 */
.ring-progress {
    stroke-dasharray: 377; /* 圆的周长 2πr = 2*3.14*60 = 377 */
    stroke-dashoffset: 377; /* 初始完全隐藏 */
    transition: stroke-dashoffset 2s ease-in-out;
}

/* 中间数字 */
.ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.ring-percent {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    transition: all 0.1s linear;
}

/* 标签 */
.ring-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    white-space: nowrap;
}



/* 第三个盒子的所有页面text-container统一位置 */
.case:nth-child(3) .text-container {
    position: absolute;
    top: 645px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 80%;
    align-items: center;
    z-index: 10;
}




/* 盒子3页面2 */


/* 盒子3页面2 */
/* 第二个页面样式 */
.case:nth-child(3) .page-case3[data-page="2"] .data-content { 
    position: relative;
    top: 55px;
    left: 13px;
    width: 480px;
    height: 220px;
    background-color: #2a2a2a;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* 标题 */
.case:nth-child(3) .page-case3[data-page="2"] .stats-title {
    position: absolute;
    top: 15px;
    left: 20px;
    color: #ccc;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
}

.case:nth-child(3) .page-case3[data-page="2"] .old-students { 
margin-left: -50px;
}

/* 调整数字箭头容器的布局 */
.case:nth-child(3) .page-case3[data-page="2"] .number-arrow-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
    margin-left: 10px;
}


/* 左边统计区域 */
.case:nth-child(3) .page-case3[data-page="2"] .stats-left {
    width: 45%;
    display: flex;
    flex-direction: row;
    gap: 25px;
    margin-top: 40px;   
    justify-content: space-between;
    position: relative; /* 确保绝对定位的箭头容器以此为参考 */
}

.case:nth-child(3) .page-case3[data-page="2"] .stat-item {
    position: relative;
    display: flex;
    flex-direction: column;
}

.case:nth-child(3) .page-case3[data-page="2"] .stat-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 15px;
    width: 100px;
    height: 30px;
    border: 2px #fff;
}

.case:nth-child(3) .page-case3[data-page="2"] .label-text {
    color: #a9a9a9;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Arial', sans-serif;
    flex-direction: column;
    
}

/* 箭头动画容器 */
.case:nth-child(3) .page-case3[data-page="2"] .stats-left .new-students .arrows-container {
    display: flex;
    flex-direction: column;
    gap: 4px; /* 减小间距 */
    position: absolute;
    left: 50%; /* 从数字右边开始 */
    top: 65.5%;   /* 垂直居中 */
    margin-left: 5px; /* 数字和箭头之间的间距 */
    transform: translateY(-50%);
    z-index: 10;
}

/* 箭头动画容器 */
.case:nth-child(3) .page-case3[data-page="2"] .stats-left .old-students .arrows-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    left: 40%;
    top: 65.5%;
    margin-left: 15px;
    transform: translateY(-50%);
    z-index: 10;
}

.case:nth-child(3) .page-case3[data-page="2"] .stat-number {
    color: #fff;
    font-size: 25px !important;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    transition: all 0.5s ease-out;
}

.case:nth-child(3) .page-case3[data-page="2"] .arrow {
    position: relative; /* 添加这个 */
    width: 25px; /* 设置固定宽度 */
    height: 12px; /* 设置固定高度 */
    margin-bottom: -8px; /* 垂直间距 */
}

/* 左边的线 */
.left-line {
    position: absolute;
    width: 2.5px;
    height: 10px;
    top: 0; /* 调整 */
    left: 0; /* 调整 */
    transform-origin: bottom center;
    transform: rotate(60deg);
    border-radius: 1px;
}

/* 右边的线 */
.right-line {
    position: absolute;
    width: 2.5px;
    height: 10px;
    top: 0; /* 调整 */
    left: 16.5px; /* 调整：控制开口宽度 */
    transform-origin: bottom center;
    transform: rotate(-60deg);
    border-radius: 1px;
}

/* 第一个箭头 - 用深色或渐变开始 */
.arrow1 .left-line,
.arrow1 .right-line {
    background: #FF9A00; /* 橙色 */
}

/* 第二个箭头 - 中间用明亮色 */
.arrow2 .left-line,
.arrow2 .right-line {
    background: #D87C00; 
}

/* 第三个箭头 - 用浅色或渐变结束 */
.arrow3 .left-line,
.arrow3 .right-line {
    /* background: #977c45;  */
    background: #A85C00; 

}

/* 老生的绿色渐变 */
.old-students .arrow1 .left-line,
.old-students .arrow1 .right-line {
    background: #2df1ae; /* 深绿 */
}

.old-students .arrow2 .left-line,
.old-students .arrow2 .right-line {
    background: #2d9f79; /* 中绿 */
}

.old-students .arrow3 .left-line,
.old-students .arrow3 .right-line {
    background: #2a6853; /* 浅绿 */
}

/* 动画延迟 */
.arrow1 { animation-delay: 0s; }
.arrow2 { animation-delay: 0.3s; }
.arrow3 { animation-delay: 0.6s; }  


.case:nth-child(3) .page-case3[data-page="2"] .stat-up {
    position: absolute;
    left: 84px; /* 距离左边 */
    bottom: 11px; /* 距离底部 */
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-family: 'Arial', sans-serif;
    z-index: 10;
    padding: 4px 10px;
}




/* 右边图表区域 */
/* 右边图表区域 - 修改后的样式 */
.case:nth-child(3) .page-case3[data-page="2"] .stats-right {
    width: 100%; /* 改为100%宽度，由容器控制 */
    margin-top: 0;
    margin-left: 0; /* 移除原来的负边距 */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 改为左对齐 */
    padding-left: 20px; /* 向左移动 */
}

/* 图表容器包装 - 新增 */
.case:nth-child(3) .page-case3[data-page="2"] .chart-container {
    width: 100%;
    max-width: 600px; /* 可以自定义宽度 */
    height: 220px; /* 可以自定义高度 */
    position: relative;
    margin-left: -60px; /* 向左移动 */
    margin-top: -80px;
    transform: scale(1.4); /* 放大1.5倍 */
    transform-origin: left top; /* 从左上角开始缩放 */
    margin-bottom: 110px; /* 增加底部边距，防止遮挡下方内容 (220 * 0.5) */
    z-index: 10;
    overflow: visible !important; /* 确保缩放后内容可见 */
}

.case:nth-child(3) .page-case3[data-page="2"] .tangent-line {
    opacity: 0;
    animation: 
        fadeInHorizontal 0.5s ease-in-out 0.3s forwards, /* 淡入动画 */
        keepVisible 3s ease-in-out forwards; /* 保持可见 */
    z-index: 20;
}

/* 淡入动画 */
@keyframes fadeInHorizontal {
    to {
        opacity: 1;
    }
}

/* 保持可见的动画 - 防止被其他动画覆盖 */
@keyframes keepVisible {
    0%, 100% {
        opacity: 1;
        visibility: visible;
    }
}


/* SVG图表 */
.case:nth-child(3) .page-case3[data-page="2"] .chart-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 阴影动画 */
.case:nth-child(3) .page-case3[data-page="2"] .new-shadow,
.case:nth-child(3) .page-case3[data-page="2"] .old-shadow {
    opacity: 0;
    animation: fadeInShadow 3s ease-in-out forwards;
}

.case:nth-child(3) .page-case3[data-page="2"] .new-shadow {
    animation-delay: 1s;
}

.case:nth-child(3) .page-case3[data-page="2"] .old-shadow {
    animation-delay: 0.5s;
}

@keyframes fadeInShadow {
    0% {
        opacity: 0;
        clip-path: polygon(0% 100%, 0% 100%, 100% 100%, 100% 100%);
    }
    100% {
        opacity: 1;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

/* 曲线动画 */
.case:nth-child(3) .page-case3[data-page="2"] .old-line, .new-line {

    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: drawLine 3s ease-in-out forwards;
}

.case:nth-child(3) .page-case3[data-page="2"] .old-line {
    animation-delay: 0.5s;
}

.case:nth-child(3) .page-case3[data-page="2"] .new-line {
    animation-delay: 1s;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeInShadow {
    0% {
        opacity: 0;
        clip-path: polygon(0% 100%, 0% 100%, 100% 100%, 100% 100%);
    }
    100% {
        opacity: 1;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* 纵向虚线动画 */
.case:nth-child(3) .page-case3[data-page="2"] .vertical-line {
    opacity: 0;
    animation: fadeInVertical 0.5s ease-in-out forwards;
}

.case:nth-child(3) .page-case3[data-page="2"] .v1 { animation-delay: 0.1s; }
.case:nth-child(3) .page-case3[data-page="2"] .v2 { animation-delay: 0.2s; }
.case:nth-child(3) .page-case3[data-page="2"] .v3 { animation-delay: 0.3s; }
.case:nth-child(3) .page-case3[data-page="2"] .v4 { animation-delay: 0.4s; }
.case:nth-child(3) .page-case3[data-page="2"] .v5 { animation-delay: 0.5s; }
.case:nth-child(3) .page-case3[data-page="2"] .v6 { animation-delay: 0.6s; }

@keyframes fadeInVertical {
    to {
        opacity: 1;
    }
}

/* 时间标签样式 */
.case:nth-child(3) .page-case3[data-page="2"] .time-labels {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out 1s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* 图例 */
.case:nth-child(3) .page-case3[data-page="2"] .chart-legend {
    display: flex;
    gap: 15px;
    margin-top: -90px;
    margin-left: 20px; /* 向左移动 */

}

.case:nth-child(3) .page-case3[data-page="2"] .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.case:nth-child(3) .page-case3[data-page="2"] .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.case:nth-child(3) .page-case3[data-page="2"] .new-color {
    background-color: #A85C00; /* 修正颜色，与曲线一致 */
}

.case:nth-child(3) .page-case3[data-page="2"] .old-color {
    background-color: #2d9f79; /* 修正颜色，与曲线一致 */
}

.case:nth-child(3) .page-case3[data-page="2"] .legend-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-family: 'Arial', sans-serif;
}



/* 盒子3页面2下面的图 */
.case:nth-child(3) .page-case3[data-page="2"] .data-content-copy { 
    position: absolute;
    top: 320px;
    left: 13px;
    width: 480px !important;
    height: 220px;
    background-color: #2a2a2a;
    border-radius: 12px;
}


/* 标题 */
.case:nth-child(3) .page-case3[data-page="2"] .teacher-data-title {
    color: #ccc;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 25px;
    font-family: 'Arial', sans-serif;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    position: relative; 
    margin-left: -177px;
    margin-top: 17px;
}

/* 数据线容器 */
.case:nth-child(3) .page-case3[data-page="2"] .data-lines-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    margin-left: 22px;
}

/* 单个数据线项 */
.case:nth-child(3) .page-case3[data-page="2"] .data-line-item {
    position: relative;
}

/* 标签区域 */
.case:nth-child(3) .page-case3[data-page="2"] .line-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: -2px;
    position: relative;
}

/* 左侧标签 */
.case:nth-child(3) .page-case3[data-page="2"] .label-left {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-family: 'Arial', sans-serif;
    font-weight: 500;
}

/* 中间标签 */
.case:nth-child(3) .page-case3[data-page="2"] .label-middle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-family: 'Arial', sans-serif;
    position: absolute;
    margin-left: 205px;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 4px;
    z-index: 10;
    font-weight: 500;
    white-space: nowrap;
    margin-top: -5px;
}

/* 线条容器 */
.case:nth-child(3) .page-case3[data-page="2"] .line-container {
    position: relative;
    height: 24px;
    width: 100%;
    background-color: transparent;
}

/* 基础虚线 */
.case:nth-child(3) .page-case3[data-page="2"] .base-dashed-line {
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    transform: translateY(-50%);
    height: 4px;
    background: transparent;
    border-top: 2px dashed rgba(255, 255, 255, 0.25);
    z-index: 1;
}

/* 实线部分 */
.case:nth-child(3) .page-case3[data-page="2"] .line-solid-part {
    position: absolute;
    top: 50%;
    left: 0%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 1px;
    z-index: 2;
    opacity: 0.9;
}

/* 虚线覆盖部分 */
.case:nth-child(3) .page-case3[data-page="2"] .line-dashed-part {
    position: absolute;
    top: 50%;
    left: 5%;
    height: 2px;
    transform: translateY(-50%);
    border-top: 2px dashed rgba(255, 255, 255, 0.8);
    opacity: 0.8;
    width: 50%; 
    left: 0;
}

.case:nth-child(3) .page-case3[data-page="2"] .line-solid-right {
    position: absolute;
    top: 50%;
    left: 215px; /* 初始位置，会被内联样式覆盖 */
    height: 3px;
    transform: translateY(-50%);
    border-radius: 1px;
    z-index: 2;
    opacity: 0.9;

}

/* 只添加这些关键帧，其他CSS都不改 */
@keyframes lineSlideLeft {
    from {
        transform: translateY(-50%) scaleX(0);
    }
    to {
        transform: translateY(-50%) scaleX(1);
    }
}

@keyframes lineSlideRight {
    from {
        transform: translateY(-50%) scaleX(0);
    }
    to {
        transform: translateY(-50%) scaleX(1);
    }
}

@keyframes fadeInLabel {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 确保实线有transform-origin */
.line-solid-part,
.line-solid-right,
.line-dashed-part {
    transform-origin: left center;
}

/* 确保标签初始不可见 */
.case:nth-child(3) .page-case3[data-page="2"] .label-left,
.case:nth-child(3) .page-case3[data-page="2"] .label-middle {
    opacity: 0;
}

/* 悬停效果 */
.case:nth-child(3) .page-case3[data-page="2"] .data-line-item:hover .line-solid-part {
    opacity: 1;
    filter: brightness(1.2);
}

.case:nth-child(3) .page-case3[data-page="2"] .data-line-item:hover .line-dashed-part {
    opacity: 1;
    border-top-color: rgba(255, 255, 255, 0.95);
}

/* 数值说明（可选） */
.case:nth-child(3) .page-case3[data-page="2"] .data-line-item::after {
    content: '';
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-family: 'Arial', sans-serif;
    z-index: 4;
}

/* 第一条数据线 */
.case:nth-child(3) .page-case3[data-page="2"] .data-line-item:nth-child(1)::after {
    content: '37.5%';
}

/* 第二条数据线 */
.case:nth-child(3) .page-case3[data-page="2"] .data-line-item:nth-child(2)::after {
    content: '50%';
}

/* 第三条数据线 */
.case:nth-child(3) .page-case3[data-page="2"] .data-line-item:nth-child(3)::after {
    content: '40%';
}







/* 盒子3页面3 - 复制页面1的样式 */
.case:nth-child(3) .page-case3[data-page="3"] .data-content { 
    position: absolute;
    top: 55px;
    left: 13px;
    width: 480px;
    height: 220px;
    background-color: #2a2a2a;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* 页面3左侧统计数据样式 */
.case:nth-child(3) .page-case3[data-page="3"] .left-stats {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-right: 15px;
    top: 30px;
}

.case:nth-child(3) .page-case3[data-page="3"] .stat-label {
    font-size: 14px;
    color: #fff !important;
    font-family: 'Arial', sans-serif;
    font-weight: 700;
    margin-bottom: 5px;
    margin-left: -62px;  
    margin-top: 0px;
}

.case:nth-child(3) .page-case3[data-page="3"] .stat-subtitle1 {
    font-size: 11px;
    font-weight: 700;   
    color: #a9a9a9;
    font-family: 'Arial', sans-serif;
    margin-bottom: 8px;
    margin-left: -18px;  
    margin-top: -5px;
}

.case:nth-child(3) .page-case3[data-page="3"] .stat-subtitle2 {
    font-size: 11px;
    font-weight: 700;   
    color: #a9a9a9;
    font-family: 'Arial', sans-serif;
    margin-bottom: 8px;
    margin-left: -18px;  
    margin-top: -5px;
}


.case:nth-child(3) .page-case3[data-page="3"] .stat-number1 {
    font-size: 30px !important;
    color: #fff !important;
    font-family: 'Arial', sans-serif;
    margin-left: 0px;
    margin-top: -10px;
}

.case:nth-child(3) .page-case3[data-page="3"] .stat-number2 {
    font-size: 30px !important;
    color: #fff !important;
    font-family: 'Arial', sans-serif;
    margin-left: 12px;
    margin-top: -10px;
}

.case:nth-child(3) .page-case3[data-page="3"] .stat-up {
    font-family: 'Arial', sans-serif;
    font-weight: 700;
    margin-left: -75px;  
    margin-top: 9.5px;
}

/* 右侧竖着柱状图容器 */
.right-table {
    width: 55%;
    height: 170px; /* 固定高度确保对齐 */
    display: flex;
    flex-direction: column;
    position: relative;
}

.vertical-bars {
    display: flex;
    align-items: flex-end; /* 确保底部对齐 */
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding: 0 5px;
    position: relative;
}

/* 底部基线（可选，用于调试对齐） */
.bars-base-line {
    position: absolute;
    bottom: 20px; /* 与bar-label高度对齐 */
    left: 0;
    right: 0;
    height: 1px;
    /* background-color: rgba(255, 255, 255, 0.1); */
    z-index: 1;
}

/* 单个柱子的容器 */
.bar-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;
    height: 100%;
    position: relative;
    z-index: 2;
}

/* 柱子上的金额 */
.bar-value {
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    margin-bottom: 5px;
    text-align: center;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* 初始隐藏 */
    transition: opacity 0.3s ease;
}

/* 柱子容器 - 确保底部对齐 */
.bar-container {
    height: calc(100% - 45px); /* 减去金额和标签的高度 */
    display: flex;
    align-items: flex-end; /* 柱子从底部开始 */
    width: 100%;
    justify-content: center;
}

/* 竖着柱状图样式 */
.bar-chart-vertical {
    width: 22px; /* 柱子宽度 */
    border-radius: 4px 4px 0 0; /* 顶部圆角 */
    transition: height 0.8s ease-in-out;
    position: relative;
    height: 0; /* 初始高度为0 */
    transform-origin: bottom; /* 从底部开始动画 */
}

/* 柱子底部的星期标签 */
.bar-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-family: 'Arial', sans-serif;
    margin-top: 5px;
    text-align: center;
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 不同日期的柱子颜色 - 由浅到深的金色（无渐变，纯色） */
.bar-day-1 {
    background-color: #FFF8DC; /* 星期二 - 最浅 */
}
.bar-day-2 {
    background-color: #FFEC8B; /* 星期三 */
}
.bar-day-3 {
    background-color: #FFD700; /* 星期四 */
}
.bar-day-4 {
    background-color: #FFC125; /* 星期五 */
}
.bar-day-5 {
    background-color: #FFB90F; /* 星期六 */
}
.bar-day-6 {
    background-color: #FF8C00; /* 星期天 - 最深 */
}

/* 柱子悬停效果 */
.bar-column:hover .bar-chart-vertical {
    transform: scaleX(1.1);
    transition: transform 0.3s ease;
}

.bar-column:hover .bar-value {
    opacity: 1;
}

/* 动画完成后的状态 */
.bar-column.animated .bar-chart-vertical {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.bar-column.animated .bar-value {
    opacity: 1;
}




/* 页面3左侧数据内容 */
.case:nth-child(3) .page-case3[data-page="3"] .left-data-content { 
    position: absolute;
    top: 300px;
    left: 15px;
    width: 225px;
    height: 250px;
    background-color: #2a2a2a;
    border-radius: 12px;
}

/* 页面3左侧内容内部样式 */
.case:nth-child(3) .page-case3[data-page="3"] .top-text-box {
    width: 100%;
    margin-top: 15px;
    margin-left: 18px;
    margin-bottom: 15px;
}

.case:nth-child(3) .page-case3[data-page="3"] .data-title {
    color: #ccc;
    font-weight: 700;
    font-family: 'Arial', sans-serif;
    margin-bottom: 8px;
    font-size: 14px;
    text-align: left;
}

.case:nth-child(3) .page-case3[data-page="3"] .avatar-circle {
    position: relative;
    width: 50px;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: -22px;
}

.case:nth-child(3) .page-case3[data-page="3"] .avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #c49a37;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin-left: -120px;
}

.case:nth-child(3) .page-case3[data-page="3"] .bottom-text {
    width: 195px;
    text-align: left;
    margin-top: -10px;
    padding-top: 15px;
    margin-left: 17px;
}

.case:nth-child(3) .page-case3[data-page="3"] .quote-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Arial', sans-serif;
    font-style: italic;
    position: relative;
    padding: 0 5px;
}

.case:nth-child(3) .page-case3[data-page="3"] .quote-text::before {
    content: '"';
    position: absolute;
    left: -5px;
    top: -5px;
    font-size: 20px;
    color: #c49a37;
}

.case:nth-child(3) .page-case3[data-page="3"] .quote-text::after {
    content: '"';
    position: absolute;
    right: 11px;
    bottom: -3px;
    font-size: 20px;
    color: #c49a37;
}

/* 页面3右侧数据内容 */
.case:nth-child(3) .page-case3[data-page="3"] .right-data-content { 
    position: absolute;
    top: 300px;
    left: 265px;
    width: 225px;
    height: 250px;
    background-color: rgb(129, 112, 75);
    opacity: 0.9;
    border-radius: 12px;
}

/* 页面3转介绍率文本框 */
.case:nth-child(3) .page-case3[data-page="3"] .top-rate-box {
    width: 100%;
    text-align: left;
    margin-bottom: 15px;
    margin-top: 2px;
    margin-left: 20px;
}

.case:nth-child(3) .page-case3[data-page="3"] .rate-title {
    color: #ccc;
    font-size: 14px;
    margin-bottom: 5px;
    margin-top: 15px;
}

/* 页面3进度圆环 */
.case:nth-child(3) .page-case3[data-page="3"] .progress-ring {
    position: relative;
    width: 183px;
    height: 183px;
    margin-left: 22.5px;
    margin-top: 10px;

}

.case:nth-child(3) .page-case3[data-page="3"] .ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);


}

.case:nth-child(3) .page-case3[data-page="3"] .ring-bg {
    stroke: rgba(255, 255, 255, 0.1);
}

.case:nth-child(3) .page-case3[data-page="3"] .ring-progress {
    stroke-dasharray: 377;
    stroke-dashoffset: 377;
    transition: stroke-dashoffset 2s ease-in-out;
}

.case:nth-child(3) .page-case3[data-page="3"] .ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.case:nth-child(3) .page-case3[data-page="3"] .ring-percent {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    transition: all 0.1s linear;
}


.more-goodreview-btn {
    display: inline-block;
    margin-top: 50px !important;
    padding: 15px 40px;
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8, #a0a0a0);
    color: #333;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}


/* ----------------------------------------好评页面结束 --------------------------------------*/





/*------------------------ 防止右侧滚动条的代码---------------------- */



/* 隐藏所有滚动条但保留滚动功能 */
html {
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body::-webkit-scrollbar {
    display: none; 
}


* {
    scrollbar-width: none;
    -ms-overflow-style: none;   
}

*::-webkit-scrollbar {
    display: none; 
}

/*------------------------ 底部页脚部分开始---------------------- */
/* 星空云霞滚动效果样式 */
/* ==================== 尾页样式开始 ==================== */
    
.footer-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #0a0a1a;
    color: white;
    overflow: hidden;
    z-index: 105;
}

/* 关键：让图片容器自适应高度 */
.star-bg-container {
    position: relative;
    width: 100%;
    /* 不要设置固定高度 */
}

.star-bg {
    position: relative;
    width: 100%;
    /* 不要设置固定高度 */
}

/* 图片顶部渐变阴影 */


.top-gradient-shadow {
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, 
        rgba(19, 19, 19, 0.9) 0%, 
        rgba(19, 19, 19, 0.9) 30%, 
        rgba(1, 7, 7, 0.7) 50%,
        rgba(1, 7, 7, 0.3) 80%,
        transparent 100%);
    z-index: 106;
    pointer-events: none;
}

/* 调整图片样式 - 确保宽度占满屏幕 */
.star-bg-image {
    display: block;
    width: 100%;
    height: auto; /* 高度自动，保持比例 */
    object-fit: contain; /* 保持比例完整显示 */
    object-position: center top; /* 从顶部开始显示 */
    opacity: 0.8;
    filter: brightness(0.7) contrast(1.2);
}

/* 星空内容文字 - 调整位置 */
.star-content {
    position: absolute;
    top: 55%; /* 调整到更靠上的位置 */
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    z-index: 2;
    width: 80%;
    max-width: 800px;
}

.star-title {
    font-size: 3.5rem;
    font-weight: 300;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    letter-spacing: 3px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards 0.5s;
}

.star-subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards 1s;
}


/* ==================== 页脚信息样式 ==================== */

/* ==================== 流星动画 ==================== */

/* 流星容器 */
.meteor-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

/* 单个流星 */
.meteor {
    position: absolute;
    width: 1px;
    height: 100px;
    background: linear-gradient(to bottom, 
        transparent, 
        rgba(255, 255, 255, 0.8),
        transparent);
    opacity: 0;
    transform: rotate(45deg);
    filter: blur(1px);
}

/* 流星尾部 */
.meteor::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, 
        transparent, 
        rgba(255, 255, 255, 0.3),
        rgba(173, 216, 230, 0.6),
        rgba(135, 206, 250, 0.8));
    filter: blur(3px);
}

/* 流星动画 */
@keyframes meteorShower {
    0% {
        opacity: 0;
        transform: translate(100vw, -100px) rotate(45deg);
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-100px, 100vh) rotate(45deg);
    }
}

/* 创建多个不同位置和延迟的流星 */
.meteor:nth-child(1) {
    top: 10%;
    left: 10%;
    animation: meteorShower 3s linear infinite 0s;
}

.meteor:nth-child(2) {
    top: 20%;
    left: 20%;
    animation: meteorShower 4s linear infinite 2s;
}

.meteor:nth-child(3) {
    top: 15%;
    left: 30%;
    animation: meteorShower 3.5s linear infinite 4s;
}

.meteor:nth-child(4) {
    top: 25%;
    left: 15%;
    animation: meteorShower 5s linear infinite 1s;
}

.meteor:nth-child(5) {
    top: 5%;
    left: 25%;
    animation: meteorShower 4.5s linear infinite 3s;
}

.meteor:nth-child(6) {
    top: 30%;
    left: 5%;
    animation: meteorShower 6s linear infinite 0.5s;
}

/* 更小的流星 */
.meteor.small {
    height: 50px;
    width: 0.5px;
    filter: blur(0.5px);
}

.meteor.small:nth-child(7) {
    top: 40%;
    left: 10%;
    animation: meteorShower 2s linear infinite 1.5s;
}

.meteor.small:nth-child(8) {
    top: 35%;
    left: 25%;
    animation: meteorShower 2.5s linear infinite 2.5s;
}

/* 快速流星 */
.meteor.fast {
    animation-duration: 1.5s !important;
}

.meteor.fast:nth-child(9) {
    top: 45%;
    left: 20%;
    animation: meteorShower 1.5s linear infinite 0.8s;
}

.meteor.fast:nth-child(10) {
    top: 50%;
    left: 15%;
    animation: meteorShower 1.5s linear infinite 1.8s;
}

/* 修改现有CSS - 确保流星在内容之下，图片之上 */
.star-bg {
    position: relative;
    width: 100%;
}

.star-bg-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
    opacity: 0.8;
    filter: brightness(0.7) contrast(1.2);
    z-index: 1;
    position: relative;
}

.star-content {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    z-index: 6; /* 高于流星 */
    width: 80%;
    max-width: 800px;
}

/* ==================== 已有代码保持不变 ==================== */

.footer-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #0a0a1a;
    color: white;
    overflow: hidden;
    z-index: 105;
}

/* 左下角信息 */
.footer-left-info {
    position: absolute;
    bottom: 20px;
    left: 40px;
    z-index: 107; /* 高于其他所有元素 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 0;
    animation: fadeInUp 1s ease forwards 1.5s;
}

/* Logo样式 */
.logo-container {
    margin-bottom: -10px;
}

.footer-logo {
    height: 180px;
    width: auto;
    filter: brightness(0.9);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.footer-logo:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* 版权文字 */
.copyright-text {
    font-size: 0.7rem;
    color: #99a184;
    letter-spacing: 1px;
    font-weight: 300;
}

/* 右下角信息 */
.footer-right-info {
    position: absolute;
    bottom: 15px;
    right: 45px;    
    z-index: 107; /* 高于其他所有元素 */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    opacity: 0;
    animation: fadeInUp 1s ease forwards 1.5s;
}

.company-address p {
    font-size: 0.7rem;
    color: #99a184;
    letter-spacing: 1px;
    font-weight: 300;
    line-height: 1.5;
}

.company-licenses1 {
    position: absolute;
    bottom: 15px;
    left: 340px;
    z-index: 107; /* 高于其他所有元素 */
    opacity: 0;
    animation: fadeInUp 1s ease forwards 1.5s;
}

.company-licenses1 p {
    font-size: 0.7rem;
    color: #99a184;
    letter-spacing: 0.5px;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 3px;
}

.company-licenses2 {
    position: absolute;
    bottom: 15px;
    left: 230px;
    z-index: 107; /* 高于其他所有元素 */
    opacity: 0;
    animation: fadeInUp 1s ease forwards 1.5s;
}

.company-licenses2 p {
    font-size: 0.7rem;
    color: #99a184;
    letter-spacing: 0.5px;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 3px;
}

/* ==================== 动画关键帧 ==================== */

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

/* ==================== 响应式设计 ==================== */

@media (max-width: 1024px) {
    /* 调整流星位置和大小 */
    .meteor {
        height: 80px;
    }
    
    .meteor.small {
        height: 40px;
    }
    
    .footer-left-info,
    .footer-right-info {
        bottom: 30px;
    }
    
    .footer-left-info {
        left: 30px;
    }
    
    .footer-right-info {
        right: 30px;
    }
    
    .footer-logo {
        height: 50px;
    }
    
    .copyright-text,
    .company-address p {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    /* 减少流星数量 */
    .meteor:nth-child(n+6) {
        display: none;
    }
    
    .footer-left-info,
    .footer-right-info {
        bottom: 25px;
    }
    
    .footer-left-info {
        left: 20px;
    }
    
    .footer-right-info {
        right: 20px;
    }
    
    .footer-logo {
        height: 45px;
    }
    
    .copyright-text,
    .company-address p {
        font-size: 0.8rem;
    }
}

@media (max-width: 600px) {
    /* 在小屏幕上隐藏流星 */
    .meteor-container {
        display: none;
    }
    
    /* 在小屏幕上垂直排列 */
    .footer-left-info,
    .footer-right-info {
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        align-items: center;
        text-align: center;
        margin: 20px auto;
        width: 90%;
    }
    
    .footer-left-info {
        margin-bottom: 15px;
        order: 2;
    }
    
    .footer-right-info {
        order: 1;
        margin-bottom: 15px;
    }
    
    .star-bg {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .star-content {
        top: 15%;
        margin-bottom: auto;
    }
}