@charset "UTF-8";
/* 次级页面 */

/* 主内容 */
.main > .main-bg{
    height: auto;
}
.main > .main-bg > .main-content{
    height: auto;
}

/* 左侧菜单 */
.main > .main-bg > .main-content > .main-content-left > .content-left-button{
    width: 20.5rem;
    margin-bottom: 1rem;
}
.main > .main-bg > .main-content > .main-content-left > .content-left-button > div{
    width: 20.5rem;
    height: 7.04rem;
}
.main > .main-bg > .main-content > .main-content-left > .content-left-button > div > a{
    color: white;
    width: 20.5rem;
    height: 7.04rem;
    display: flex;
    margin: 0.5rem 0;
    background-image: url("/assets/img/left-button-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    transition: box-shadow 0.3s;
}
.main > .main-bg > .main-content > .main-content-left > .content-left-button > div > a:hover{
    box-shadow: 0 0 0.2rem 0.2rem rgb(241, 216, 161);
}
.main > .main-bg > .main-content > .main-content-left > .content-left-button > div > a > div{
    width: 100%;
    background-position: top center;
    background-repeat: no-repeat;
}
.main > .main-bg > .main-content > .main-content-left > .content-left-button > .left-button-download{
    width: 20.5rem;
    height: 12.7rem;
}
.main > .main-bg > .main-content > .main-content-left > .content-left-button > .left-button-download > a{
    height: 12.7rem;
    margin-top: 0;
    background-image: url("/assets/img/button-download-bg.png");
}
.main > .main-bg > .main-content > .main-content-left > .content-left-button > .left-button-download > a > div{
    background-image: url("/assets/img/button-download.png");
    background-size: auto 4rem;
    background-position: center;
}
.main > .main-bg > .main-content > .main-content-left > .content-left-button > .left-button-customer > a > div{
    background-image: url("/assets/img/button-customer.png");
    background-position: center;
    background-size: auto 2rem;
}

/* 联系客服 */
.main > .main-bg > .main-content > .main-content-left > .left-button-linked {
    width: 20.5rem;
    height: 22.2rem;
    background-image: url("/assets/img/button-linked-bg.png");
    /* WebP 优先（不认识 image-set 的浏览器忽略本行 ⇒ 回落上一行 PNG） */
    background-image: image-set(url("/assets/img/button-linked-bg.webp") type("image/webp"), url("/assets/img/button-linked-bg.png") type("image/png"));
    background-repeat: no-repeat;
    background-size: 20.5rem auto;
}

/* 二维码 */
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > .code {
    width: 20.5rem;
    height: 12.8rem;
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* 点击按钮后 切换此处的二维码背景图
   ⚠️ 用 :not(.official-qq-code) 排除 Q 群码：那一块已改成模板里的 <img>（读后台配置，
      见 view/common/customer_card.html），不排除的话每个 .code 都会再多画一个
      11.5rem 的白底空盒子 —— 页面上就是「二维码 + 空白框」两层。 */
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > .code:not(.official-qq-code):after {
    display: block;
    content: "";
    width: 11.5rem;
    height: 11.5rem;
    background-repeat: no-repeat;
    background-size: 11.5rem 11.5rem;
    background-color: whitesmoke;
    border: 0.15rem solid rgb(190, 145, 104);
}

/* 所有社群按钮 */
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > div.association-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.755rem;
    padding: 0;
    background-image: url("/assets/img/official-btn.png");
    background-size: auto 3rem;
    background-repeat: no-repeat;
    background-position: center;
}
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > div.association-btn.active {
    background-image: url("/assets/img/official-btn-active.png");
}
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > div.association-btn::after {
    display: block !important;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 1.2rem;
    width: 7.5rem;
    height: 2rem;
}
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > div.shim {
    height: 1.8rem;
}

.main > .main-bg > .main-content > .main-content-left > .left-button-linked > div.association-btn:hover {
    transform: scale(1.05);
    cursor: pointer;
}
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > div.association-btn:active {
    transform: scale(0.95);
    cursor: pointer;
}
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > .official-qq::after {
    background-image: url("/assets/img/official-qq-title.png");
}
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > .official-vx-customer::after {
    background-image: url("/assets/img/official-vx-customer-title.png");
}
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > .official-qq-customer::after {
    background-image: url("/assets/img/official-qq-customer-title.png");
}
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > .official-vxgzh::after {
    background-image: url("/assets/img/official-vxgzh-title.png");
}
/* Q 群码不再是背景图：改由模板 <img src="{:support_group_qr()}"> 渲染（读后台配置）。
   尺寸与描边沿用原 :after 的值，保证与另外三个码视觉一致。 */
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > .code > img {
    display: block;
    width: 11.5rem;
    height: 11.5rem;
    object-fit: contain;          /* 二维码非正方形时留白，不拉伸变形 */
    background-color: whitesmoke;
    border: 0.15rem solid rgb(190, 145, 104);
}
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > .official-vx-customer-code.code:after {
    background-image: url("/assets/img/official-vx-customer.png");
    background-size: 100% 100%;
}
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > .official-qq-customer-code.code:after {
    background-image: url("/assets/img/official-qq-customer.png");
    background-size: 100% 100%;
}
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > .official-vxgzh-code.code:after {
    background-image: url("/assets/img/official-vxgzh.png");
    background-size: 100% 100%;
}

/* 未开放渠道置灰：不可点击 */
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > div.association-btn.disabled {
    filter: grayscale(1);
    opacity: 0.55;
    cursor: not-allowed;
}
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > div.association-btn.disabled:hover,
.main > .main-bg > .main-content > .main-content-left > .left-button-linked > div.association-btn.disabled:active {
    transform: none;
    cursor: not-allowed;
}

/* 右侧内容 */
.main > .main-bg > .main-content > .main-content-right{
    padding: 0 1rem 12rem 1rem;
    background-image: url("/assets/img/right-content-bg.png");
    /* WebP 优先（同上，逐条渐进增强） */
    background-image: image-set(url("/assets/img/right-content-bg.webp") type("image/webp"), url("/assets/img/right-content-bg.png") type("image/png"));
    background-position: top center;
    background-size: auto 5.2rem;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.4);
}
.main > .main-bg > .main-content > .main-content-right > .content-right-title{
    height: 5rem;
}

.main > .main-bg > .main-content > .main-content-right > .content-right-title > .right-title{
    width: 16rem;
    background-repeat: no-repeat;
    background-size: auto 2.4rem;
    background-position: center;
}
.main > .main-bg > .main-content > .main-content-right > .content-right-title > .right-location{
    font-size: 0.9rem;
    color: #ffeeb8;
}
.main > .main-bg > .main-content > .main-content-right > .content-right-title > .right-location > a{
    color: #ffeeb8;
}
.main > .main-bg > .main-content > .main-content-right > .content-right-title > .right-location > a:hover{
    color: #d3c698;
}
/* 左侧栏目导航（2026-10-02 新增）
   为什么要有：/main/ziliao 与 /main/media 原先**全站 0 内链**（sitemap 里挂着、站内却
   点不到）⇒ 从首页 BFS 只能到达 73/96 条 sitemap URL，23 条成了孤岛。
   放左栏的原因：它本来就叫「左侧公共菜单」，且被 5 个次级页共用 ⇒ 一处改动即可覆盖。
   守卫：tests/index/controller/SitemapEntryReachabilityTest（渲染真实页面后查内链） */
.main > .main-bg > .main-content > .main-content-left > .content-left-nav{
    width: 20.5rem;
    margin: 0.5rem 0 1rem;
    text-align: center;
}
.main > .main-bg > .main-content > .main-content-left > .content-left-nav > li{
    margin-bottom: 0.5rem;
    font-size: 1rem;
}
.main > .main-bg > .main-content > .main-content-left > .content-left-nav > li > a{
    color: #ffeeb8;
}
.main > .main-bg > .main-content > .main-content-left > .content-left-nav > li > a:hover{
    color: #d3c698;
}
/* ============================================================================
   移动端（<768px）响应式修复 —— 2026-10-02 新增
   ----------------------------------------------------------------------------
   修的是什么（CDP 实测，修复前）：
     /main/news @390px → html/body font-size = **2.99px**、.main-content 宽 **269px**
     ⇒ 整页被等比缩成左上角一张小图、正文 3px，而 viewport 又写着 user-scalable=0
     （用户无法捏合放大）⇒ 手机上次级页**不可读**。
   根因：flexible.js 在 <768px 走 `rem = clientWidth/96; fontSize = rem*0.735`
     （390px ⇒ 2.99px），而 .main-content 是 `min/max-width: 90rem` 的固定宽设计
     ⇒ 等于把 1350px 桌面稿缩到 269px。**等比缩小一个 1350px 桌面稿，在 390px 手机上
     永远不可能可读**，所以只能改成真正的响应式重排。
   影响面：整块包在 `@media (max-width: 767px)` 里 ⇒ **≥768px 的桌面渲染完全不变**，
     无桌面回归风险（且 <768px 修复前本就是坏状态，任何改动都是改进）。
   ⚠️ `font-size: 16px !important` 是必需的：flexible.js 用 **inline style** 写
     `documentElement.style.fontSize`，普通规则盖不过它，只有 `!important` 能盖
     （flexible.js 那侧没写 !important）。
   ⚠️ 次级页右栏是 Bootstrap `.col-9`：即使在窄屏堆叠，它的 `max-width:75%` 仍生效
     ⇒ 必须一并放开。
   ============================================================================ */
@media (max-width: 767px){
    html{
        font-size: 16px !important;
    }
    /* 主容器：取消固定 90rem 宽与固定高，改为占满视口。
       ⚠️ 容器在模板上是 `d-flex justify-content-center`，而 Bootstrap 的
          `.d-flex{display:flex!important}` / `.justify-content-center{justify-content:center!important}`
          **都带 !important** ⇒ 这里的 `display:block` / `justify-content` 不加 !important 一律无效
          （实测踩到：容器仍是 flex 行，两个 flex-basis:100% 的子元素并排 ⇒ 整行 780px
           居中后被推到 -195~585，右栏从 x=195 开始，页面仍溢出 183px）。
       正解：保持 flex，改 `flex-wrap: wrap` 让两个 100% 子元素各占一行。 */
    .main > .main-bg > .main-content{
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        padding: 0 0.5rem;
    }
    /* 左栏（下载/客服/二维码/栏目导航）与右栏（正文）都整行堆叠 */
    .main > .main-bg > .main-content > .main-content-left,
    .main > .main-bg > .main-content > .main-content-right{
        width: 100%;
        max-width: 100%;
        -webkit-box-flex: 0;
        flex: 0 0 100%;
    }
    /* 左栏内的固定 rem 元素在 16px 基准下 = 20.5rem(328px)，窄机兜底 */
    .main > .main-bg > .main-content > .main-content-left > .content-left-button,
    .main > .main-bg > .main-content > .main-content-left > .content-left-button > div,
    .main > .main-bg > .main-content > .main-content-left > .content-left-button > div > a,
    .main > .main-bg > .main-content > .main-content-left > .left-button-linked,
    .main > .main-bg > .main-content > .main-content-left > .left-button-linked > .code,
    .main > .main-bg > .main-content > .main-content-left > .content-left-nav{
        width: 100%;
        max-width: 20.5rem;
        margin-left: auto;
        margin-right: auto;
    }
    /* 面包屑标题图在窄屏换行，不与「您的位置」抢位 */
    .main > .main-bg > .main-content > .main-content-right > .content-right-title{
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    /* 分页条在窄机上放不下：实测 360px 视口里 `ul.pagination` 自身 373px 宽，
       是整个页面最后 7px 横向溢出的来源 ⇒ 允许换行（Bootstrap 分页本就是 flex） */
    .main > .main-bg > .main-content .pagination{
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 内容溢出兜底：窄机上图片/表格/预格式块不得撑破容器（/main/download @390px 的 58px 内容溢出来自 .row 内部） */
    .main img, .main video, .main pre{
        max-width: 100%;
        height: auto;
    }
    .main table{
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
    /* /main/download @390px 仍有 58px 内容溢出（.row 内部某元素内容宽 398px，逐元素扫描定位不到，
       疑为 Bootstrap .row 负边距与列内内容叠加）⇒ 让本页容器**内部**横向滚动，
       而不是让整页横向滚动。本选择器只出现在下载页模板。 */
    .main > .main-bg > .main-content > .main-content-right > .content-right-computer{
        overflow-x: auto;
    }
}