a, a:hover,.menu li a:hover,.menu li.on a,.menu li .subnav a:hover:after,.menu li .subnav a.on,.menu li.subcate:hover a,.menu li.subcate:hover .subnav a:hover,.menu li.subcate:hover .subnav a.on,.menu li.subcate:hover .subnav a.on:after,.sch-m input,.sch-m button:after,.schfixed input,.schclose,.schform input,.schform button:after,.post h2 a:hover,.post h2 .istop:before,.post .user a:hover,.post .date a:hover,.post .cate a:hover,.post .views a:hover,.post .cmtnum a:hover,.post .readmore:hover,.post .readmore:hover:after,.post .tags a:hover,.pages a:hover,a.backlist:hover,.cmtsfoot .reply:hover,.cmtsfoot .reply:hover:before,.cmtsubmit button:hover,.cmtsubmit button:hover:before,.sidebox dd a:hover,#divTags ul li a:hover,#divCalendar td a,#divCalendar #today,#divContorPanel .cp-login a:hover,#divContorPanel .cp-vrs a:hover,#divContorPanel .cp-login a:hover:before,#divContorPanel .cp-vrs a:hover:before,.footer a:hover,.goback:hover,.goback:hover:after,.relateinfo h3 a:hover { color:#0188fb; }@media screen and (max-width:1080px){.menu ul li.subcate.slidedown > a:after {color:#0188fb}}.menu li:before,.schfixed button,.pagebar .now-page,.cmtpagebar .now-page,.pagebar a:hover,.cmtpagebar a:hover,a.backtotop {background:#0188fb}.menuico span {background-color:#0188fb}.menu li .subnav,.schfixed {border-top-color:#0188fb}.menu li.subcate .subnav a {color:#333}.menu li .subnav:before,.sch-m input,.schfixed:before,.schform input,.single h1:after,.single h2:after,.single h3:after,.single h4:after,.single h5:after,.single h6:after,.contitle h1,.contitle h2 {border-bottom-color:#0188fb}.post .readmore:hover,.post .tags a:hover,.pagebar .now-page,.cmtpagebar .now-page,.pagebar a:hover,.cmtpagebar a:hover,a.backlist:hover,.cmtsubmit button:hover,#divTags ul li a:hover,#divCalendar td a,#divContorPanel .cp-login a:hover,#divContorPanel .cp-vrs a:hover,.goback:hover {border-color:#0188fb}.wrapper { background:#f6f8f9; }/* 自定义首屏模块 CSS (视频背景版) */
.custom-hero-wrapper {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    width: 100%;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* 主视觉区 */
.hero-main-visual {
    background-color: #050b14; /* 视频加载前的底色 */
    padding: 180px 10% 150px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden; /* 确保视频不会溢出当前区域 */
}

/* --- 新增：视频背景样式 --- */
.hero-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证视频等比例缩放并填满整个容器 */
    z-index: 0;
    pointer-events: none; /* 防止鼠标误触视频（如暂停等） */
}

/* --- 新增：半透明遮罩层样式 --- */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 11, 20, 0.3); /* 深色半透明遮罩，数值0.3可调节亮度 */
    z-index: 1;
}

/* 文字内容区 */
.hero-content {
    max-width: 600px;
    position: relative; /* 确保 z-index 生效 */
    z-index: 2; /* 层级高于视频和遮罩，确保文字在最前面 */
    text-align: left;
}

.hero-content h1 {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 25px;
    letter-spacing: 2px;
    color: #fff;
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 40px;
    color: #e2e8f0;
    letter-spacing: 1px;
}

.hero-btn {
    display: inline-block;
    background-color: #2b70ff;
    color: #ffffff !important;
    padding: 12px 35px;
    border-radius: 30px;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.hero-btn:hover {
    background-color: #1a5bed;
}

/* 底部数据统计条保持不变 */
.hero-stats-bar {
    background-color: #0b2458;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10%;
    flex-wrap: wrap;
}

.stats-users {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatars {
    display: flex;
}

.avatars img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid #0b2458;
    margin-left: -12px;
    object-fit: cover;
}

.avatars img:first-child {
    margin-left: 0;
}

.stats-users span {
    font-size: 14px;
    color: #a0b2d8;
}

.stats-data {
    display: flex;
    gap: 60px;
}

.stat-item {
    text-align: center;
}

.stat-num {
    font-size: 28px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 5px;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.stat-num sub {
    font-size: 14px;
    font-weight: normal;
    margin-left: 3px;
    bottom: 0;
}

.stat-label {
    font-size: 13px;
    color: #a0b2d8;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .hero-main-visual { padding: 100px 5% 80px; }
    .hero-content h1 { font-size: 32px; }
    .hero-stats-bar { flex-direction: column; gap: 20px; padding: 20px 5%; }
    .stats-data { width: 100%; justify-content: space-between; gap: 10px; }
}

/* --- 流媒体全球网络模块 CSS --- */

.streaming-module {
    position: relative;
    width: 100%;
    /* 设置模块的最小高度，可根据需要微调 */
    min-height: 550px; 
    /* 核心设置：背景图覆盖且绝对居中 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* 使用 Flexbox 让内部内容水平垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    overflow: hidden;
    background-color: #040d21; /* 图片未加载时的默认底色 */
}

/* 深色渐变遮罩层（非常重要：压暗背景图，凸显白色文字） */
.streaming-module::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 采用径向渐变：中心稍微亮一点，四周边缘更暗，模仿截图的电影感效果 */
    background: radial-gradient(circle, rgba(4, 13, 33, 0.6) 0%, rgba(4, 13, 33, 0.95) 100%);
    z-index: 1;
}

/* 内容容器 */
.streaming-content {
    position: relative;
    z-index: 2; /* 层级高于遮罩层 */
    text-align: center; /* 文字水平居中 */
    color: #ffffff;
    padding: 0 20px; /* 防止移动端文字贴边 */
    max-width: 800px;
}

/* 顶部副标题 (Netflix, YouTube...) */
.streaming-subtitle {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

/* 主标题 */
.streaming-title {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 25px;
    letter-spacing: 2px;
    line-height: 1.3;
}

/* 描述文本 */
.streaming-desc {
    font-size: 16px;
    color: #cbd5e1; /* 灰白色，增加层次感 */
    margin-bottom: 40px;
    letter-spacing: 1px;
}

/* 按钮样式 */
.streaming-btn {
    display: inline-block;
    /* 截图中按钮是亮蓝色，这里使用渐变色增加质感 */
    background: linear-gradient(90deg, #2b70ff, #1eb7ff);
    color: #ffffff !important;
    padding: 12px 45px;
    border-radius: 30px;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

.streaming-btn:hover {
    box-shadow: 0 5px 15px rgba(43, 112, 255, 0.4);
    transform: translateY(-2px); /* 鼠标悬浮时微微上浮 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .streaming-module {
        min-height: 400px; /* 移动端高度减小 */
    }
    .streaming-subtitle {
        font-size: 18px;
    }
    .streaming-title {
        font-size: 28px;
    }
    .streaming-desc {
        font-size: 14px;
        margin-bottom: 30px;
    }
}

/* 整个大模块：深色背景，限制溢出 */
.zq-promo-section {
    position: relative;
    width: 100%;
    min-height: 550px;
    background-color: #030814; /* 匹配截图中极暗的深蓝色背景 */
    overflow: hidden;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    display: flex;
    align-items: center;
}

/* 底部场景图定位（就是你发的那张图） */
.zq-promo-art {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%; /* 图片高度撑满模块 */
    max-width: 60%; /* 防止图片太宽挡住左侧文字 */
    object-fit: contain;
    object-position: bottom right; /* 确保石头贴着底部，手机靠右 */
    z-index: 1;
    pointer-events: none; /* 防止图片影响下方按钮点击 */
}

/* 内容布局容器：控制最大宽度并居中 */
.zq-promo-container {
    position: relative;
    z-index: 2; /* 确保文字在图片上面 */
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    padding: 40px 20px;
    display: flex;
    align-items: center;
}

/* 左侧文本区宽度 */
.zq-text-area {
    width: 50%;
    color: #ffffff;
}

/* 标题样式 */
.zq-title {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

/* 列表样式 */
.zq-features {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.zq-features li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 15px;
    font-size: 15px;
    color: #d1d5db; /* 浅灰色文字 */
}

.zq-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    background-color: #3b82f6; /* 蓝色小圆点 */
    border-radius: 50%;
}

/* 倒计时盒子样式 */
.zq-countdown {
    display: flex;
    gap: 15px;
    margin-bottom: 35px;
}

.zq-time-box {
    text-align: center;
}

.zq-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(59, 130, 246, 0.4); /* 半透明蓝色边框 */
    background-color: rgba(3, 8, 20, 0.6);
    border-radius: 8px;
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
}

.zq-label {
    display: block;
    font-size: 13px;
    margin-top: 8px;
    color: #9ca3af;
}

/* 按钮样式 */
.zq-btn {
    display: inline-block;
    background-color: #3b82f6;
    color: #ffffff !important;
    padding: 14px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}

.zq-btn:hover {
    background-color: #2563eb;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

/* 右侧空白区域（用于定位大字） */
.zq-art-area {
    width: 50%;
    position: relative;
    display: flex;
    align-items: center;
}

/* 悬浮的 50% 大字 */
.zq-huge-text {
    font-size: 85px;
    font-weight: bold;
    color: #ffffff;
    position: absolute;
    left: -10%; /* 向左偏移，正好叠在蓝光圈和石头上方 */
    text-shadow: 0 10px 30px rgba(0,0,0,0.8); /* 强烈的阴影增强立体感 */
}

/* === 移动端适配 (屏幕小于 900px 时) === */
@media (max-width: 900px) {
    .zq-promo-container {
        flex-direction: column;
        text-align: center;
    }
    .zq-text-area {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 250px; /* 给底部的石头图片留出空间 */
    }
    .zq-title { font-size: 32px; }
    .zq-features li { padding-left: 0; }
    .zq-features li::before { display: none; } /* 居中时隐藏小圆点 */
    
    .zq-art-area {
        width: 100%;
        justify-content: center;
    }
    .zq-huge-text {
        position: relative;
        left: 0;
        font-size: 60px;
        margin-top: -200px; /* 在手机上把 50% 文字往上提一点 */
    }
    /* 手机端图片改为底部铺满 */
    .zq-promo-art {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

.game-carousel-section {
    background-color: #030814;
    padding: 80px 0;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #ffffff;
    overflow: hidden;
}

.game-header { text-align: center; margin-bottom: 50px; padding: 0 20px; }
.game-header h2 { font-size: 36px; font-weight: bold; margin-bottom: 15px; letter-spacing: 2px; }
.game-header p { font-size: 16px; color: #d1d5db; letter-spacing: 1px; }

.game-swiper-container {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 50px;
}

/* === 新增保底代码：强制横向排列，防止JS未加载时竖着堆叠 === */
.game-swiper-container .swiper-wrapper {
    display: flex !important; 
    flex-direction: row !important;
}

.game-swiper-container .swiper-slide {
    width: 600px;
    height: 340px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: filter 0.3s ease; 
    /* 缩小未激活图片的尺寸以防挤压 */
    flex-shrink: 0; 
}

.game-swiper-container .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slide-text-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 30px 20px 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    text-align: left; font-size: 15px; color: #fff; pointer-events: none;
}

.game-swiper-container .swiper-slide-active {
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
    filter: brightness(1);
}

.game-swiper-container .swiper-slide:not(.swiper-slide-active) {
    filter: brightness(0.35);
}

@media (max-width: 768px) {
    .game-header h2 { font-size: 28px; }
    .game-swiper-container .swiper-slide { width: 85%; height: 220px; }
}
.ip-module-section {
    background-color: #040a1d; /* 深邃的藏蓝色背景 */
    padding: 80px 20px;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #ffffff;
    overflow: hidden;
}

/* 顶部文字区域 */
.ip-module-header {
    text-align: center;
    margin-bottom: 50px;
}

/* 主标题 */
.ip-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

/* 副标题 */
.ip-subtitle {
    font-size: 16px;
    color: #cbd5e1; /* 浅灰色，增加层次感 */
    margin-bottom: 30px;
}

/* 蓝色按钮 */
.ip-btn {
    display: inline-block;
    background-color: #2b70ff;
    color: #ffffff !important;
    padding: 12px 35px;
    border-radius: 30px;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ip-btn:hover {
    background-color: #1a5bed;
    transform: translateY(-2px); /* 鼠标悬浮时轻微上浮 */
    box-shadow: 0 5px 15px rgba(43, 112, 255, 0.3);
}

/* 图片容器：使用 Flexbox 实现并排和居中 */
.ip-module-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* 两张图片之间的间距 */
    flex-wrap: wrap; /* 关键：在手机屏幕上自动换行堆叠 */
    max-width: 1200px; /* 限制最大宽度，防止图片分太开 */
    margin: 0 auto; /* 容器本身居中 */
}

/* 单个图片卡片的样式 */
.ip-image-card {
    flex: 1; /* 让两张卡片平分空间 */
    max-width: 500px; /* 每张图片的最大宽度 */
    min-width: 300px; /* 每张图片的最小宽度，防止被过度挤压 */
    border-radius: 12px;
    overflow: hidden; /* 确保图片不会超出圆角 */
    /* 模仿截图中的深邃阴影和微光边框 */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ip-image-card img {
    width: 100%;
    display: block; /* 消除图片下方的微小空隙 */
}

/* 移动端适配：屏幕宽度小于 900px 时 */
@media (max-width: 900px) {
    .ip-title {
        font-size: 28px;
    }
    .ip-module-images {
        gap: 20px; /* 在手机上减小图片间距 */
    }
}

/* 整个模块的背景和布局 */
.faq-section {
    background-color: #030814; /* 深蓝色背景 */
    padding: 80px 20px;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #ffffff;
}

/* 顶部标题 */
.faq-header {
    text-align: center;
    margin-bottom: 50px;
}

.faq-header h2 {
    font-size: 36px;
    font-weight: bold;
}

/* 问答列表容器 */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

/* 单个问答项 */
.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 问题部分 (用按钮实现，方便点击) */
.faq-question {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    cursor: pointer;
    text-align: left;
    font-size: 17px;
    color: #ffffff;
    font-weight: 500;
}

/* 回答部分 */
.faq-answer {
    /* 核心：用 max-height 实现平滑的展开/折叠动画 */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.faq-answer p {
    margin: 0;
    padding: 0 0 25px 0;
    color: #adb5bd; /* 答案文字用浅灰色 */
    font-size: 15px;
    line-height: 1.6;
}

/* === 交互核心 === */
/* 当 .faq-item 拥有 .active 类时，展开答案 */
.faq-item.active .faq-answer {
    max-height: 200px; /* 设置一个足够大的高度 */
}

/* 图标样式 (用 CSS 绘制一个箭头) */
.faq-icon {
    position: relative;
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease;
    flex-shrink: 0; /* 防止图标被挤压 */
    margin-left: 15px;
}
.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 60%;
    height: 1px;
    background-color: #fff;
}
.faq-icon::before {
    transform: rotate(45deg);
    left: 1px;
}
.faq-icon::after {
    transform: rotate(-45deg);
    right: 1px;
    left: auto;
}
/* 当 .faq-item 拥有 .active 类时，旋转图标 */
.faq-item.active .faq-icon {
    transform: rotate(180deg);
}
