/* ================= 首页全屏视频背景 ================= */
.hero-section {
    position: relative;
    width: 100vw;
    height: 100vh; /* 占满整个屏幕的高度 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.image-container {
    position: relative;
    width: 40%;
    height: 100%;
    overflow: hidden;
}
.image-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 280px; /* 控制渐变过渡区域的宽度，越宽越柔和 */
    height: 100%;
    
    /* 🌟 核心魔法：从透明，渐渐变成你网页右侧的底色！
       注意：这里的 #1a1921 必须替换成你右侧大背景的真实颜色代码 */
    background: linear-gradient(to right, transparent, #121118);
    
    z-index: 3; /* 盖在照片上方 */
    pointer-events: none;
}

/* 视频本身的定位与铺满 */
.bg-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;          
}

/* 半透明遮罩层 */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 15, 20, 0.5); /* 50%透明度的深邃暗色，压制视频亮度 */
    z-index: 2;
}

/* 叠在视频上方的文字容器 */
.hero-content {
    position: relative;
    z-index: 3; /* 确保文字永远浮在视频和遮罩的最上层 */
    color: white;
    padding: 0 20px;
    flex: 1; /* 占据剩余空间，确保文字区域自适应 */
    text-align: center;
}

/* 在文字的背后生成一个发光球体 */
.hero-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;  /* 光晕的宽度 */
    height: 800px; /* 光晕的高度 */
    
    /* 🌟 核心魔法：中心是微弱的香槟金，向四周慢慢变透明 */
    background: radial-gradient(circle, rgba(229, 223, 130, 0.08) 0%, transparent 80%);
    
    z-index: -1; /* 绝对关键：让光晕躲在文字的后面，否则会蒙上一层灰 */
    pointer-events: none;
}


.hero-content h1 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 3.5rem;
    font-weight: 300; /* 使用较细的字重，高级感立现 */
    letter-spacing: 4px;
    margin-bottom:10px;
}

.hero-content p {
    font-size: 1.1rem;
    color: #b0b0b0;
    letter-spacing: 1px;
}






































/* =========================================
   8. 视频展示板块 (Video Section)
========================================= */
.video-display-section {
    background-color: #1a1921; /* 保持暗黑底色 */
    padding: 45px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    color: white;
}

.section-title h2 {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.section-title p {
    color: #a0a0b0;
    font-size: 1rem;
}

.video-gallery {
    position: relative;
    display: flex;             /* 开启弹性盒子，让里面的东西横向排列 */
    justify-content: center;   /* 整体居中 */
    gap: 100px;                 /* 视频之间的空隙（可以随意调大调小） */
    width: 100%;
    max-width: 1200px;         /* 限制总宽度，防止大屏幕上分得太开 */
    flex-wrap: wrap;           /* 核心：如果屏幕变小（如手机），允许它们自动换行 */

}

.video-gallery::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 200px;
    background: rgba(235, 234, 234, 0.08); /* 淡淡的香槟金光晕 */
    filter: blur(80px); /* 极度模糊 */
    z-index: 0;
}


/* 核心：视频的外壳容器 */
.video-container {
    position: relative;
    opacity: 0;
    transform: translateY(60px);
    
    /* 设定动画的持续时间和丝滑程度 (cubic-bezier 让它有种“刹车”的缓冲感) */
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    width:18%;
    align-items: center;
    
    /* 💡 重点调节这里：
       如果你的视频是横屏（16:9），建议设为 900px
       如果你的视频是竖屏手机直播（9:16），建议设为 350px 左右，不然太长了 */
    max-width: 800px; 
    
    background-color: #000; /* 垫底纯黑 */
    border-radius: 16px;    /* 丝滑的圆角 */
    overflow: hidden;       /* 配合圆角，把视频直角切掉 */
    border: 1px solid #353340; /* 细微的边框增加质感 */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); /* 强烈的悬浮阴影 */
}



.video-container.slide-up-active {
    opacity: 1;
    transform: translateY(0);
}

/* 3. 核心高级感：让三个视频依次错开出场，而不是傻傻地一起弹出来 */
.video-container:nth-child(1) { transition-delay: 0.3s; }
.video-container:nth-child(2) { transition-delay: 0.9s; }
.video-container:nth-child(3) { transition-delay: 1.5s; }

/* 让里面的视频标签乖乖填满外壳 */
.video-container video {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16; /* 🌟 强制锁死为完美的手机竖屏比例，确保三个框永远一样高 */
    object-fit: cover;    /* 🌟 核心魔法：保持画面原始比例填满整个框，多出来的边缘会自动裁剪掉，绝不拉伸变形 */
    display: block; /* 消除视频底部的幽灵空白 */
    outline: none;  /* 点选视频时不要出现丑陋的蓝框 */
}

.video-info {
    padding: 20px;
    background-color: #000; /* 完美融合视频下方的纯黑底色 */
    text-align: left;
    /* 在视频和文字之间加一条极细的分割线，增加精致感 */
    border-top: 1px solid #2a2835; 
}

.video-info h4 {
    /* 使用一种偏亮/偏金的颜色，呼应你背后的光晕 */
    color: #e0d0b0; 
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.video-info p {
    color: #88869b;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.sound-toggle-btn {
    position: absolute;
    bottom: 100px;      /* 距离视频底部 15px */
    right: 0px;       /* 距离视频右侧 15px */
    z-index: 10;
    justify-content: center;
    
    /* 契合你网站的高级感样式 */
    background-color: rgba(26, 25, 33, 0.7); /* 半透明暗色底 */
    color: #e0d0b0;                          /* 香槟金文字 */
    border: 1px solid rgba(224, 208, 176, 0.4);
    border-radius: 20px;                     /* 胶囊形小按钮 */
    padding: 6px 14px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sound-toggle-btn:hover {
    background-color: rgba(224, 208, 176, 0.2);
}

/* =========================================
   📱 移动端自适应特调（当屏幕宽度小于 768px 时生效）
========================================= */
@media screen and (max-width: 768px) {

    /* 1. 缩小大标题，防止手机端标题直接溢出或换行太难看 */
    .video-display-section h2, 
    .section-title h2 {
        font-size: 1.5rem !important;
    }

    /* 2. 优化视频下方信息卡的文字排版 */
    .video-info {
        padding: 12px !important; /* 手机端减少内边距，省出空间 */
    }

    .video-info h4 {
        font-size: 0.95rem !important; /* 稍微缩小主播名字字号 */
        letter-spacing: 1px !important; /* 减小字间距，防止挤压 */
        white-space: nowrap !important; /* 强制名字不换行，保持一行显示 */
    }

    .video-info p {
        font-size: 0.75rem !important; /* 缩小描述文字字号 */
        line-height: 1.4 !important;
    }

    /* 3. 如果手机端视频想变成上下单列排列（避免挤在同一行），顺便可以加上这个 */
    .video-gallery {
        flex-direction: column !important; /* 让 3 个视频在手机上从上到下单列排 */
        align-items: center !important;
    }

    .video-container {
        width: 90% !important; /* 手机上让视频卡片撑宽一点，视觉更饱满 */
        max-width: 320px;
    }


    /* ================= 修复手机端视频被金线穿透的问题 ================= */
    /* 强行隐藏导致重叠的左右两侧发光装饰线 */
    .video-display-section::before,
    .video-display-section::after {
        display: none !important;
    }
}

.photo-gallery-section{
    background-color: #1a1921; /* 保持暗黑底色 */
    padding: 45px 20px;
    flex-direction: column;
    align-items: center;
    justify-content: center;   /* 整体居中 */
    display: flex;
}

.image-gallery{
    display: flex;             /* 开启弹性盒子，让里面的东西横向排列 */
    justify-content: center;   /* 整体居中 */
    width: 100%;
    max-width: 1200px;         /* 限制总宽度，防止大屏幕上分得太开 */
    flex-wrap: wrap;           /* 核心：如果屏幕变小（如手机），允许它们自动换行 */
    gap: 100px;                 /* 图片和图片之间的间距（你可以自由修改这个数字） */

    
}



/* 让动画效果直接作用在 .gallery-container 身上 */
.gallery-container {
    overflow: hidden;
    border-width: 2.5px;
    border-radius: 5px;
    display: flex;
    justify-content: center;

    /* 动画初始状态：透明且向下沉 */
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 触发显示状态 */
.gallery-container.photo-show {
    opacity: 1;
    transform: translateY(0);
}

/* 🌟 完美的阶梯式延时：现在大盒子错开时间了，动画就会一张接一张登场！ */
.gallery-container:nth-child(1) { transition-delay: 0.1s; }
.gallery-container:nth-child(2) { transition-delay: 0.3s; }
.gallery-container:nth-child(3) { transition-delay: 0.5s; }

/* 照片本身保持干净 */
.gallery-container img {
    width: 220px;
    height: auto;
    border: #e5df82 solid 2px;
    border-radius: 5px;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .gallery-container {
        flex-direction: column; /* 当屏幕小于 768px（手机端）时，恢复成上下排列，防止挤压 */
        gap: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
        
    }
    
    .gallery-container img {
        width: 60%;            
        margin: 0 auto;
    }
}


.mission-vision-section{

 background-color: #1a1921; /* 保持与网站一致的暗黑底色 */
 padding: 80px 20px;        /* 上下留出充足的留白，增加大厂呼吸感 */
 color: white;

}

.mv-container{

    display: flex;
    justify-content: center;
    align-items: stretch;      /* 🌟 核心魔法：强制左右两张卡片永远保持一样高，绝对整齐 */
    gap: 40px;                 /* 卡片之间的间距 */
    width: 100%;
    max-width: 1100px;         /* 限制最大宽度，让排版更紧凑高级 */
    margin: 0 auto;            /* 让整个容器在屏幕中央 */
}
.mv-card h3{

    text-align: center;
}





.mv-card {
    flex: 1;                   /* 左右卡片平分宽度 */
    background: #24232c;       /* 比底色稍微亮一点点的深灰色，做出空间层级感 */
    padding: 50px 40px;
    border-radius: 20px;       /* 圆角设计 */
    border: 1px solid rgba(229, 223, 130, 0.15); /* 一圈非常暗的香槟金细线，隐隐约约的质感 */
    text-align: justify; /* 文字两端对齐，增加高级感 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* 极其丝滑的动画过渡 */
}

/* 🌟 鼠标悬浮时的“微光浮动”交互（极具高级感） */
.mv-card:hover {
    transform: translateY(-10px); /* 整体向上轻轻浮起 10px */
    border-color: #e5df82;        /* 边框瞬间点亮成完整的香槟金 */
    box-shadow: 0 15px 35px rgba(229, 223, 130, 0.15); /* 底部透出淡淡的金色发光阴影 */
}


/* 标题设计 */
.mv-card h3 {
    color: #e5df82;            /* 标题使用你们的主题香槟金色 */
    font-size: 1.6rem;
    margin-bottom: 15px;
    letter-spacing: 1.5px;     /* 字间距稍微拉开，增加呼吸感 */
}

/* 描述文字设计 */
.mv-card p {
    color: #b0b0b0;            /* 文字使用高级灰，不要纯白，这样看着不刺眼 */
    font-size: 1.05rem;
    line-height: 1.8;          /* 加大行高，让长句子阅读起来极其舒适 */
    margin: 0;
}

/* ================= 手机端自适应 ================= */
@media (max-width: 768px) {
    .mv-container {
        flex-direction: column; /* 手机端自动变成上下叠放 */
        gap: 30px;
    }
    
    .mv-card {
        padding: 40px 25px;     /* 手机端稍微缩小一点内边距，给文字腾出空间 */
    }
}

/* ==========================================================
   📱 About Us 整页移动端响应式与照片墙重构适配
========================================================== */
@media screen and (max-width: 768px) {

    /* 1. 全局页面溢出防御 */
    body {
        overflow-x: hidden;
    }

    /* 2. 导航栏在手机端防挤压 */
    .navbar {
        padding: 10px 15px !important;
    }
    .brand-name {
        font-size: 1rem !important;
    }
    .nav-right a {
        font-size: 0.85rem !important;
        margin-left: 10px !important;
    }

    /* 3. 所有板块统一内边距，告别松散感 */
    .video-display-section,
    .photo-gallery-section,
    .mission-vision-section {
        padding: 40px 15px !important;
    }

    /* 4. 统一所有板块的标题大小 */
    .section-title h2 {
        font-size: 1.6rem !important;
    }
    .section-title p {
        font-size: 0.9rem !important;
    }

    /* 5. 🌟 彻底修复照片墙排版：改为单列大图排列，告别高低不平与挤压 */
    .image-gallery {
        flex-direction: column !important; /* 强制改为从上到下排列 */
        align-items: center !important;    /* 强制居中 */
        gap: 25px !important;              /* 照片之间留出舒适的上下间距 */
    }

    .gallery-container {
        width: 90% !important;             /* 让照片占据手机屏幕 90% 的宽度，展现细节 */
        max-width: 380px !important;
        margin: 0 !important;
    }

    .gallery-container img {
        width: 100% !important;                      
        border-radius: 8px !important;     
        /* 👇 删掉原本的 height: auto，换成这两行神仙代码 👇 */
        aspect-ratio: 542 / 834 !important;  /* 🌟 魔法1：强制所有照片变成统一的 4:3 比例 */
        object-fit: cover !important;    /* 🌟 魔法2：像相框一样填满，多余的部分自动裁掉，绝不拉伸人脸！ */
        
        border-radius: 8px !important;     
        border: 2px solid #e5df82 !important; 
        box-sizing: border-box !important;
    }
    /* 6. 愿景与使命卡片（Mission & Vision）手机端优化 */
    .mv-container {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .mv-card {
        padding: 30px 20px !important;
    }
    
    .mv-card h3 {
        font-size: 1.3rem !important;
    }
}


/* ==========================================================
   方案 2：侧边纵向科技水印与极简网格线
========================================================== */
.video-display-section {
    position: relative;
    overflow: hidden;
    background-color: #1a1921;
    padding: 45px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==========================================================
   方案 3：演播室科技导向竖线与边框装饰
========================================================== */
.video-display-section {
    position: relative;
    overflow: hidden;
    background-color: #1a1921;
    padding: 45px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==========================================================
   方案 3 升级版：高亮科技边框与对称导向线（效果明显）
========================================================== */

/* 左侧：往中间收一点，调亮颜色并加粗 */
.video-display-section::before {
    content: '';
    position: absolute;
    left: 80px;                /* 离左边缘更近一点，确保在屏幕中央区域内可见 */
    top: 15%;
    height: 70%;
    width: 2px;                /* 加粗到 2px */
    background: linear-gradient(to bottom, transparent, #f2eeb7, transparent); /* 直接使用你们醒目的香槟金 */
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(229, 223, 130, 0.4); /* 加上一层微微的金光发效 */
}

/* 右侧：对称的高亮导向线 */
.video-display-section::after {
    content: '';
    position: absolute;
    right: 80px;               /* 离右边缘对称 */
    top: 15%;
    height: 70%;
    width: 2px;
    background: linear-gradient(to bottom, transparent,#f2eeb7, transparent);
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(229, 223, 130, 0.4);
}


/* =========================================
   🏆 公司成就轮播图板块样式
========================================= */
.achievements-section {
    background-color: #1a1921; /* 保持与整站统一的暗黑底色 */
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px; /* 控制轮播图的最大宽度 */
    margin: 0 auto;
    border-radius: 16px;
    border: 1px solid rgba(229, 223, 130, 0.15); /* 香槟金微弱边框 */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); /* 高级悬浮阴影 */
    background-color: #000;
}

/* 轨道容器，隐藏超出部分 */
.carousel-track-container {
    overflow: hidden;
    border-radius: 16px;
    width: 100%;
}

/* 核心滑动轨道 */
.carousel-track {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* 极其丝滑的滑动动画 */
}

.carousel-slide {
    min-width: 100%;
}

/* 照片防拉伸魔法 */
.carousel-slide img {
    width: 100%;
    aspect-ratio: 16 / 9; /* 强制所有照片变成 16:9 比例 (类似电脑屏幕) */
    object-fit: cover;    /* 核心：不变形填满，多余自动裁剪 */
    display: block;
}

/* 左右切换按钮设计 */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(26, 25, 33, 0.6); /* 半透明黑 */
    color: #e5df82; /* 香槟金箭头 */
    border: 1px solid rgba(229, 223, 130, 0.3);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    cursor: pointer;
    font-size: 1.2rem;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-btn:hover {
    background: rgba(229, 223, 130, 0.3);
    box-shadow: 0 0 15px rgba(229, 223, 130, 0.4);
}

.prev-btn { left: 15px; }
.next-btn { right: 15px; }

/* 底部小圆点指示器 */
.carousel-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

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

/* 当前处于激活状态的小圆点 */
.carousel-indicator.current-indicator {
    background: #e5df82; /* 变成金色 */
    box-shadow: 0 0 8px rgba(229, 223, 130, 0.6);
    transform: scale(1.3); /* 稍微变大一点点 */
}

/* 📱 手机端适配 */
@media screen and (max-width: 768px) {
    .carousel-btn {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
    
    /* 手机上看，照片可以不用那么宽扁，调成 4:3 比例更好看 */
    .carousel-slide img {
        aspect-ratio: 4 / 3; 
    }

    /* ================= 修复 About Us 页面首屏手机端排版 ================= */
    .hero-section {
        justify-content: center !important; /* 强制让内容在手机端居中，而不是靠左 */
    }

    /* 1. 让原本只占 40% 的照片容器，变成绝对定位，100% 铺满整个屏幕 */
    .image-container {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important; /* 乖乖躲到最底层当背景 */
    }

    /* 2. 手机端照片既然铺满了，就不需要那个从左到右变黑的渐变遮罩了，直接隐藏它 */
    .image-container::after {
        display: none !important;
    }

    /* 3. 增强原本的黑色半透明遮罩，保证文字能看清 */
    .image-overlay {
        z-index: 1 !important;
        background-color: rgba(15, 15, 20, 0.6) !important; 
    }

    /* 4. 让文字容器脱离左右分栏的限制，居中悬浮 */
    .hero-content {
        z-index: 2 !important; /* 确保文字浮在照片和遮罩的最上面 */
        flex: none !important; /* 取消 flex:1 的分栏限制 */
        width: 100% !important;
    }
}