/* ==========================================================================
   site-v2.css  ——  路线 A 保守补丁层
   --------------------------------------------------------------------------
   定位：最后加载的覆盖层。不动语义、不改结构，只解决「老页面在新设备上
        溢出 / 难读」的问题。css.css（1463 行，63 个手写页 + 首页在用）
        保持不动，避免牵一发动全身。

   加载顺序必须是最后一个 <link>，否则会被 css.css 覆盖：
       <link href="/css/site-v2.css" rel="stylesheet" />

   可调参数集中在 :root。注意 CSS 变量**不能**用在 @media 查询条件里
   （规范限制），断点值在媒体查询里必须写死，改断点要同时改下面两处注释
   标注的位置。
   ========================================================================== */

:root {
    --cs-content-pad: 12px;   /* 小屏内容左右内边距 */
    --cs-nav-gap: 6px;        /* 小屏导航项间距 */
    /* 断点：下面两处 @media 里写死了 1100px / 768px，改这里的同时要改那里 */
}

/* --------------------------------------------------------------------------
   1. 全局防溢出（不限断点）
   老页面大量硬编码 width="900"、620px 表格、900px 图片。
   图片必须限制（否则撑破布局）；表格不压缩（压缩后文字挤成一团），
   改为让父容器横向滚动。
   -------------------------------------------------------------------------- */
img,
video,
iframe,
embed {
    max-width: 100%;
}

img {
    height: auto;
}

/* 代码块：允许自身横向滚动，不影响周围排版 */
pre,
code,
.insertcode,
.code {
    max-width: 100%;
    overflow-x: auto;
}

/* 宽内容不撑破页面：容器级横向滚动（css.css 只在 <=1000px 给了
   .content_back，这里补齐到全断点 + 覆盖更多容器） */
.content_back,
.page_container,
.cs-article-body,
.pw {
    overflow-x: auto;
}

/* --------------------------------------------------------------------------
   2. 填补 1001~1100px 断点间隙
   css.css 的补丁从 max-width:1000px 才生效，1024px 屏（老笔记本/iPad 横屏）
   会出现 999px 容器 + body 边距 > 视口，产生整页横向滚动条。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
    .page_container,
    .page_header .headerImg,
    .p_header_bk,
    .p_header_main_page,
    .page_footer_outer,
    .pw {
        max-width: 100%;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   3. 小屏增强（断点写死 768px，与 :root 注释同步）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    /* 导航：原来是定宽 <li style="width:70px"> 横排共约 795px，
       小屏必然溢出。改为 flex 换行 + 自适应宽度。 */
    #navigation {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--cs-nav-gap);
        padding: 0;
    }

    #navigation > li {
        width: auto !important;
        min-width: 0;
    }

    /* 内容留白，避免文字贴边 */
    .page_container,
    .content_back,
    .page_footer_outer {
        padding-left: var(--cs-content-pad);
        padding-right: var(--cs-content-pad);
    }

    /* 表单控件 >=16px，防 iOS Safari 聚焦时自动放大页面 */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    /* 长英文/URL 不撑破容器 */
    body,
    td,
    li,
    p {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* --------------------------------------------------------------------------
   4. 大屏自适应容器（2026-09-23，用户要求旧页与文章列表/详情页 v2 一致）
   镜像 article-v2.css §1：拆 999px 定宽、去 float、容器居中、最大 1200px。
   仅 ≥1101px 启用 —— ≤1100px 由上面 §2 的 width:100% 接管，互不覆盖。
   ⚠️ 必须 float:none：浮体上 margin:auto 不生效、宽度收缩到内容（article-v2 实测）。
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1101px) {
    .page_container,
    .content_back,
    .p_header_bk,
    .p_header_main_page,
    .share,
    .location,
    .bk_foot_bk {
        width: auto !important;
        min-width: 0 !important;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        float: none !important;
    }

    /* 面包屑内层虚线框：css.css 写死 986px + float:left + padding-left:2px + height:18px，
       外层解宽后右侧空 ~180px、长标题顶满拥挤（2026-09-23 用户反馈「宽度不够、拥挤」）。
       放开成满宽 + 左右 10px 内边距，行高放宽，小图标与文字垂直居中。 */
    .location > div {
        float: none;
        width: auto !important;
        height: auto !important;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 20px;
    }

    .location > div img {
        vertical-align: middle;
    }

    /* 菜单条内层：css-menu.css 写死 950px，只占加宽后菜单条（1168/1176px）的左侧，
       右侧空一截（2026-09-23 用户报「主页的菜单宽度不够」）。
       放开成满宽后，菜单项靠左、#login1（float:right）贴菜单条右缘，
       与文章页 v2 的菜单行观感一致。 */
    #navframe,
    #navigation {
        width: auto !important;
        max-width: 100%;
    }

    /* #login1（登录|注册，float:right）原贴菜单条右缘太靠边（2026-09-23 用户反馈），
       与内容区一致内收 120px */
    #login1 {
        margin-right: 120px;
    }

    .page_container {
        padding-left: var(--cs-content-pad);
        padding-right: var(--cs-content-pad);
        box-sizing: border-box;
    }

    /* 页脚白盒与红横幅齐平（article-v2 同款：顶部不留外边距） */
    .page_footer_outer {
        float: none;
        width: auto !important;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* 页脚上方的红横幅：999px 背景在加宽后的容器里两侧露底 → cover 补满。
       clear:both 必须保留：浮动内容（成功案例/6.0 发布页等）不撑普通流，
       少了它横幅会升到内容顶部（2026-09-23 用户报「public_img 跑上面去了」）。 */
    .public_img {
        float: none;
        clear: both;
        width: auto !important;
        max-width: 100%;
        margin: 10px auto 0;
        background-position: center;
        background-size: cover;
    }

    /* 页脚倒影底图：999px no-repeat 拉宽后右侧盖不住 → 拉伸铺满 */
    .bk_foot_bk {
        background-size: 100% 100%;
        background-position: top center;
    }

    /* 头部 logo 条（.page_header 内）：css.css 写死 999px，内嵌 959px 表格。
       放开到容器宽后表格居中，与下方内容列对齐（2026-09-23 用户报「布局图片是乱的」）。 */
    .page_header .headerImg {
        width: auto !important;
        min-width: 0 !important;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        float: none !important;
    }

    .page_header .headerImg table {
        margin-left: auto;
        margin-right: auto;
    }

    /* 产品列表页：css.css 的 .product1 行由 .left(130px)+.right(750px) 两个浮块
       拼成 902px 左对齐，右侧留一大块空白；分隔线 .line1 也是 890px 定宽。
       改 flex 让行撑满内容区。 */
    .product1 {
        float: none;
        display: flex;
        align-items: flex-start;
        margin-left: 0;
    }

    .product1 .left {
        float: none;
        flex: 0 0 130px;
        box-sizing: border-box;
    }

    .product1 .right {
        float: none;
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        box-sizing: border-box;
    }

    .line1 {
        width: auto !important;
        margin-left: 0;
    }

    /* 产品页横幅：.product-title-img 内是 999px 原图，容器加宽后 text-align:center
       居中、两侧露深蓝底 → 图拉伸铺满整行（与 .public_img 同思路）。 */
    .product-title-img {
        float: none;
    }

    .product-title-img img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 左侧「导航菜单」悬浮电梯（product 页 lift-effect）：top:100px 正好压住
       菜单行（y98-144），下移到菜单行下方 —— 999px 时代就压「首页」，容器加宽后更甚。 */
    .lift-nav {
        top: 150px;
    }

    /* 站内搜索页（/do-search.aspx，API 服务端渲染的 SearchPageShell）：
       css-legacy.css 给 .search-area 写死 977px（含内边距/边框共占 989px）、
       .search-item 写死 990px（含左内边距 995px，比它自己的边框卡片还宽 27px、
       直接戳出卡片外）。容器加宽到 1200px 后更明显（2026-09-23 用户报
       「搜索页面的宽度与其他页面不一致」）。
       放开成容器内满宽 + border-box，左右各留 5px 与原观感一致。 */
    .search-area {
        width: auto !important;
        box-sizing: border-box;
        margin-left: 5px;
        margin-right: 5px;
    }

    .search-item {
        width: auto !important;
        box-sizing: border-box;
    }

    /* ------------------------------------------------------------------
       主页（default.htm）主体：三列表格 #main-frame-table 仍是 999px 设计宽
       （#t1 60 + #t2 680 + #t3 220 ≈ 1001px），容器解宽到 1176 后右侧空 178px
       （2026-09-23 用户报「主页右侧有空白，把左边的内容加宽一点，填充整个页面」）。
       主内容列 #t2 吸收剩余宽度、列内定宽块跟随；右栏 #t3 保持 220px；
       底部简介表格 / 客户 logo 用 padding 替代 margin：左边界不动、右缘贴满。
       轮播：easySlider1.5.js 按首个 li 的宽高初始化（读一次定死），li 定宽由
       default.htm 内联脚本按容器实际宽度设定；此处只放行外层容器并让图片等比跟宽
       （banner 源图 672×307，aspect-ratio 保证 JS 读高时图片未加载也有正确高度）。 */
    /* table-layout:fixed 必须加：auto 布局下 t2 的宽度由内容首选宽参与计算，
       与列内 width:100% 的嵌套表格互相撑（实测 t2 被撑到 2616px）；
       fixed 后列宽只由 #t1(60)/#t3(220) 的指定宽度决定，#t2 稳定吃剩余。 */
    #main-frame-table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    #main-frame-table #t2 {
        width: auto !important;
    }

    /* #t2 里还有一层无名包裹表格（各行一个 td），auto 宽由内容首选宽决定，
       与「列内 100% 规则 + easySlider 按 li 宽写回 obj」互相循环放大
       （实测 #slider 被撑到 2616px）→ 一并 fixed 收进列宽。 */
    #t2 > table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    #t2 #slider_header,
    #t2 #slider {
        width: auto !important;
        max-width: 100%;
    }

    /* li 原 height:307px 会把放大后的图裁掉下沿 → 放开由图片等比撑起
       （aspect-ratio 保证 easySlider 读 li 高时图片未加载也有正确值）。
       注意宽度不能在这里放开：!important 会压过 easySlider/default.htm
       内联脚本写给 li 的像素宽（内联在 CSS !important 面前失效）→ 循环复发。 */
    #slider li {
        height: auto !important;
    }

    #slider img {
        width: 100%;
        height: auto;
        aspect-ratio: 672 / 307;
        display: block;
    }

    /* 轮播箭头原 top:115px 按 307px 高硬编码，轮播变高后不再居中 */
    #prevBtn,
    #nextBtn {
        top: 50%;
        transform: translateY(-50%);
    }

    #t2 .comment-products,
    #t2 #comment_products,
    #t2 #main-recomment,
    #t2 #main-newly-doc,
    #t2 #main-cert,
    #t2 table[style*="width: 680px"],
    #t2 table[style*="width:680px"] {
        width: 100% !important;
    }

    #main-frame-table1 {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 50px;
        box-sizing: border-box;
    }

    #main-frame-table1 .w {
        width: auto !important;
    }

    .customer-logo-main {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 70px;
        box-sizing: border-box;
    }

    /* ------------------------------------------------------------------
       产品详情页正文（36 页通用布局 .product_area > .jonny1 + .jonny2）：
       .jonny2 各页内联写死 width:700/720/730px，容器解宽 1176 后右侧空约
       300px（2026-09-23 用户报「center-container 写死了700px，导致右侧很大
       空白」）。改 flex：左缩略图固定、正文列吃剩余；个别页 .product_area 下
       还有额外兄弟（.TABLE/.BR/.DIV），flex-basis:100% 令其换行独占一行，
       避免挤到正文右侧。
       正文截图（多为一屏大图，放大 1.3~1.5x 会模糊）不放大：max-width:100%
       防溢出；独占容器的图（<div><img/></div>，img:only-child）在加宽列内
       居中 —— 行内小图标（item1.gif 等，父元素含伴随内容）不受影响。 */
    .product_area {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        height: auto !important;   /* css.css 写死 330px（float 时代靠溢出显示） */
    }

    .product_area > .jonny1 {
        float: none !important;
        flex: 0 0 auto;
    }

    .product_area > .jonny2 {
        flex: 1 1 600px;
    }

    /* 类级放开：cd-details.htm 的 .jonny2 在 table td 里（不在 .product_area 下），
       其余 35 页在 flex 里（float 对 flex item 无效，无副作用） */
    .jonny2 {
        float: none !important;   /* 各页 jonny2 的内联 float:left 压过普通声明（内联 > 普通规则），必须 !important */
        width: auto !important;    /* 压过各页内联 700/720/730px */
        margin-right: 120px;       /* 2026-09-23 用户要求：正文列右侧预留 120px 边距，不贴满容器 */
        min-width: 0;
        box-sizing: border-box;
    }

    /* cd-details.htm：裸 table 的两列按内容收缩（jonny2 放开 width 后 td 反而缩窄），
       上 fixed 布局 + 左列定宽，第二列吃剩余（与主页 #main-frame-table 同款方案） */
    .content_back > table:has(.jonny2) {
        width: 100% !important;
        table-layout: fixed;
    }

        .content_back > table:has(.jonny2) > tbody > tr > td:first-child {
            width: 140px;
        }

    .product_area > *:not(.jonny1):not(.jonny2) {
        float: none !important;
        flex: 0 0 100%;
    }

    /* vip.htm 特有：.jonny1/.jonny2 外面还包了一层 .jonnyscode（css.css float:left
       收缩容器，全站仅此一页），同样转 flex 让正文列吃剩余 */
    .content_back > .jonnyscode {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        width: auto !important;
    }

        .content_back > .jonnyscode > .jonny1 {
            flex: 0 0 auto;
        }

        .content_back > .jonnyscode > .jonny2 {
            flex: 1 1 600px;
            min-width: 0;
        }

        /* vip 页收费标准表（内联 800px）在加宽列内居中，与图片同策略 */
        .content_back > .jonnyscode .jonny2 > table {
            margin-left: auto !important;
            margin-right: auto;
        }

    .jonny2 img {
        max-width: 100%;
        height: auto;
    }

    .jonny2 img:only-child {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;   /* 坏图（naturalWidth=0）不按容器拉宽，收缩到 alt 文本 */
    }
}

/* --------------------------------------------------------------------------
   5. 轮播 banner 图自适应（2026-09-22）
   标记里写了 class="responsive" 但一直没人定义 —— 小屏下 672px 图会溢出。
   -------------------------------------------------------------------------- */
.responsive { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   6. 页头 banner 去圆角（2026-09-23，product-list.htm）
   css.css 的 body img { border-radius:6px } 是全局规则，通栏 banner 被误伤。
   用钩子类限定单页，不影响 product-cms / product-enterprise 的同款 banner。
   -------------------------------------------------------------------------- */
.title-img-square img { border-radius: 0; }

/* --------------------------------------------------------------------------
   7. product-cms.htm 正文列撑满（2026-09-24）
   css.css 的 .cms-container 写死 880px+float:left，容器 1176 下右侧空 206px。
   撑满后与产品详情页 .jonny2 一致：右缘留 120px（1301-120=1181）。
   仅 product-cms.htm 使用该类；≤1100px 走旧布局不参与。
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1101px) {
    .cms-container {
        float: none;
        width: auto;
        margin-right: 120px;
        box-sizing: border-box;
    }
}

/* --------------------------------------------------------------------------
   8. 关于本站 6 页：内容左右各留 100px（2026-09-24）
   用户要求这 6 页内容左右两侧各留 100px（此前是左 50 / 右 120）。
   左距由这里的内边距给（100px）；右距由各内容块自身的 margin-right 控制，
   已同步改为 100px：about/copyright/quotation 的内联 margin-right、
   contact 的表格 calc(100% - 100px)、statement_reg 的 css.css .reg_statement、
   vip 的 .jonny2（见下方覆盖规则）。
   注意：底部红横幅 .public_img 是 content_back 的子元素，会跟着 padding-left
   整体右移 100px → 必须等量负向抵消，横幅才回到与页面同轴（125/124）。
   仅这 6 页带 about6-pad 钩子类，其他页面不受影响。
   -------------------------------------------------------------------------- */
.content_back.about6-pad { padding-left: 100px; }
.content_back.about6-pad > .public_img {
    margin-left: -100px;
    /* §4 的 .public_img{max-width:100%} 会按“扣掉内边距后”的宽度封顶，
       只给负 margin 会变成右缘内缩 100px；这里把上限一并放行 100px。 */
    max-width: calc(100% + 100px);
}

@media (min-width: 1101px) {
    /* vip.htm 正文列右距来自 §4 的 .jonny2{margin-right:120px}（全站共用），
       只对本钩子页覆盖为 100px，其他页面不受影响。 */
    .content_back.about6-pad .jonny2 { margin-right: 100px; }
}

/* --------------------------------------------------------------------------
   9. 企业应用软件页：4 个产品行左右各内缩 100px（2026-09-24）
   .product1 行在 §4 改 flex 后满宽（x125..1301 顶到白盒两缘），用户要求
   两侧各留 100px。横幅 .product-title-img 保持满宽不受影响；
   仅带 ent-prod-pad 钩子的页面生效，product-list/product-cms 不受影响。
   -------------------------------------------------------------------------- */
@media (min-width: 1101px) {
    .content_back.ent-prod-pad .product1 {
        margin-left: 100px;
        margin-right: 100px;
    }
}

/* 企业软件页：左缩略小卡与右产品介绍卡之间留 10px（2026-09-24 用户要求）。
   用 margin-left 而非 column-gap —— ≤1100px 是旧的 float 布局（不是 flex），
   column-gap 不生效，margin 在两种布局下都能产生 10px 间隙。 */
.content_back.ent-prod-pad .product1 .right {
    margin-left: 10px;
}

/* --------------------------------------------------------------------------
   10. 主页：内容左右各留 30px（2026-09-24）
   主页 content_back 内的主表格/底部简介/客户 logo/成功案例等此前满宽顶到
   白盒两缘。加 30px 左右内边距（全断点生效，窄屏同样不贴边）。
   主页无红横幅 public_img，无需负向抵消。仅带 home-pad 钩子的页面生效。
   -------------------------------------------------------------------------- */
.content_back.home-pad {
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
}