/* ============================================================
   核心页精修 (2026-11-03)
   ------------------------------------------------------------
   作用域：
     1) .hero-claim —— 首页首屏定位条（仅 index.html 使用；桌面隐藏，仅移动/平板显示）
     2) 移动端首页产品卡片：双列小卡 → 单列横排卡
     3) 移动端导航与客服条：触摸目标 38px → 44px，字号微调
     4) 移动端首页 banner：40vw → 44vw
   约束：
     - 必须在本文件在 bp-responsive.css 之后引入，靠加载顺序覆盖
     - 不改任何原 CSS 文件，删除本文件即完全回退
     - 桌面端版式不动（.hero-claim 在桌面已隐藏）
   ============================================================ */

/* ============================================================
   1. 首页首屏定位条（仅移动端）
   ------------------------------------------------------------
   原首页 h1 挂在 logo 上且只有图片，全页无一句可读定位文案。
   该条承接 banner、引出产品卡片；桌面端按要求隐藏，
   仅在小屏作为首屏文字定位使用。
   ============================================================ */
/* 桌面端（≥1025px）不展示该定位条：banner 下方直接接产品卡片。
   该模块仅在移动端 / 平板端呈现，作为小屏首屏的文字定位。
   桌面端用 clip 视觉隐藏而非 display:none —— 视觉结果相同（不占位、不可见），
   但保留 h1 供搜索引擎与读屏软件识别，避免整站首页在 PC 端丢失主标题语义。 */
@media (min-width: 1025px) {
    section.hero-claim {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.hero-claim {
    max-width: 1000px;
    margin: 0 auto;
    padding: 36px 0 28px;
    box-sizing: border-box;
}

.hero-claim h1 {
    margin: 0 0 14px;
    padding: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.5px;
    color: #1f2f5e;
    text-align: left;
}

.hero-claim .hero-sub {
    margin: 0;
    max-width: 800px;
    font-size: 15px;
    line-height: 1.95;
    color: #5c6472;
    text-align: left;
}

/* ============================================================
   2. 移动端 / 平板：触摸目标与辅助文字
   ------------------------------------------------------------
   bp-responsive.css 里导航项 padding 为 9px 13px，
   14px 字号下实测热区高 38px，低于 44px 的可用性下限。
   ============================================================ */
@media (max-width: 1024px) {
    .nav_dao ul li a {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* 悬停/当前项出现 2px 下划线时，同步回退 2px 保持总高不变 */
    .nav_dao ul li .dangqian,
    .nav_dao ul li a:hover {
        padding-bottom: 10px;
    }

    .top_kefu {
        font-size: 13px;
    }

    /* 原样式把 .content1.home-cards 左右内边距压成 0，卡片会贴到屏幕边缘，
       与上方标题、下方区块的左对齐关系断掉 */
    .content1.home-cards {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* logo 的 <a> 是行内元素，热区只有 19px；图片本身 42px 高 */
    .logo a {
        display: inline-block;
    }

    /* 轮播圆点视觉 9px 不变，用 padding + background-clip 把热区撑到 25px */
    .flexslider .flex-control-paging li a {
        width: 9px;
        height: 9px;
        padding: 8px;
        box-sizing: content-box;
        background-clip: content-box;
    }

    .flexslider .flex-control-paging li {
        margin: 0 2px;
    }

    /* 首页卡片标题：双列布局下 15px 偏小 */
    .content1.home-cards ul li h2 {
        font-size: 16px !important;
    }
}

@media (max-width: 640px) {
    /* ---- 首页 banner：40vw 在 390px 下仅 156px，图内文案过小 ---- */
    .flexslider,
    .flexslider .slides,
    .flexslider .slides > li {
        height: 44vw !important;
    }

    /* ---- 首屏定位条：紧凑化，让卡片能在首屏末尾露出 ---- */
    .hero-claim {
        padding: 24px 20px 22px;
    }

    .hero-claim h1 {
        margin-bottom: 11px;
        font-size: 21px;
        line-height: 1.5;
        letter-spacing: 0.2px;
    }

    .hero-claim .hero-sub {
        margin-bottom: 0;
        font-size: 14px;
        line-height: 1.8;
    }

    /* ============================================================
       3. 首页产品卡片：双列 168px 小卡 → 单列横向卡
       ------------------------------------------------------------
       原双列布局下卡片内容宽仅约 148px，13px 正文一行只容得下
       12 个字，阅读非常吃力。改为单列后「图标在左、标题与描述
       在右」，正文可提到 14px，同时首屏仍能露出 2 张卡片。
       卡片结构（img / h2 / p 同属 a.card-link）无需改 HTML，
       用 grid-template-areas 让图标纵向跨两行即可。
       ============================================================ */
    .content1.home-cards ul {
        flex-direction: column;
        gap: 12px;
    }

    .content1.home-cards ul li,
    .content1.home-cards .c-li1,
    .content1.home-cards .c-li2 {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* 注意：原样式里有 `.content1.home-cards ul li a.card-link{display:block}`（特异性 0,2,3），
       比 `.content1.home-cards .card-link`（0,2,0）更高，所以这里必须用同等或更高的选择器。 */
    .content1.home-cards ul li a.card-link {
        display: grid !important;
        grid-template-columns: 52px 1fr;
        grid-template-areas:
            "ic tt"
            "ic dd";
        column-gap: 14px;
        align-items: start;
        padding: 16px 14px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e2e5eb;
        border-radius: 4px;
    }

    .content1.home-cards ul li a.card-link img {
        grid-area: ic;
        width: 52px !important;
        height: 52px !important;
        padding: 0 !important;
        margin: 2px 0 0 !important;
        display: block;
    }

    .content1.home-cards ul li a.card-link h2 {
        grid-area: tt;
        margin: 0 0 5px !important;
        padding: 0 !important;
        font-size: 16.5px !important;
        line-height: 1.45 !important;
        text-align: left !important;
    }

    .content1.home-cards ul li a.card-link .p-small {
        grid-area: dd;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px;
        line-height: 1.72;
        text-align: left;
    }
}


/* ============================================================
   核心页精修 · 第二批
   ------------------------------------------------------------
   1) 内页 banner：原图 1920x400，按 4.8 比例整体缩放，不再裁字
   2) product.html 产品卡片：li 内两个 float 子元素导致高度塌陷到 19px
      （卡片互相叠压），改为块级 + 清除浮动
   3) healthy 类模板标签栏：链接仅 19px 高，扩到 34px
   4) 独立模板汉堡按钮 26x20 -> 44x44
   5) 首页轮播：幻灯片主体是背景图，a 只有 19px 高，铺满整块
   ============================================================ */

@media (max-width: 1024px) {

    /* ---------- 1. 内页 banner ---------- */
    /* 84 个页面共用 .p-banner，全部是 height:400px + 背景原尺寸居中。
       390 宽时等于只露出中间 1/5，两端文字被切断。按原图比例缩放即完整可见。 */
    .p-banner {
        height: 20.84vw !important;
        min-height: 78px;
        max-height: 214px;
        background-size: 100% 100% !important;
        background-position: 50% 50% !important;
        margin-bottom: 22px !important;
        line-height: 0;
    }

    .p-banner img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    /* .s-banner 部分页面用背景图（无内层 img），height:auto 会塌成 0 */
    .s-banner {
        min-height: 20.84vw !important;
        background-size: 100% 100% !important;
        background-position: 50% 50% !important;
    }

    /* ---------- 2. product.html 产品卡片 ---------- */
    .p-ul ul {
        display: block !important;
        height: auto !important;
    }

    .p-ul li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
        box-sizing: border-box;
        margin: 0 0 10px !important;
        padding: 14px 0 16px !important;
    }

    /* a 原为 inline，导致整卡不可点；改块级后整块热区 */
    .p-ul li > a {
        display: block !important;
        overflow: hidden;
        text-decoration: none;
    }

    .p-ul-img {
        float: left !important;
        width: 44px !important;
        margin: 3px 12px 0 0 !important;
    }

    .p-ul-img img {
        width: 44px !important;
        height: auto !important;
        padding: 0 !important;
    }

    .p-ul-content {
        float: none !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        margin-left: 56px;
    }

    .p-ul-content p {
        margin: 0 0 6px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        font-weight: 600;
    }

    .p-ul-content span {
        display: block;
        font-size: 14px !important;
        line-height: 1.72 !important;
        color: #5d6673;
    }

    /* 卡片里的“查看详情”是 <input type=button>，无任何行为，
       整卡已是链接，留着只会让人以为按钮可点 */
    .p-ul-content .p-button {
        display: none !important;
    }

    /* ---------- 3. healthy 类模板标签栏 ---------- */
    .mainnr .liebiao a.ah1,
    .mainnr .liebiao a.ah2,
    .liebiao a.zh14 {
        display: inline-block !important;
        min-height: 34px;
        line-height: 34px !important;
        padding: 0 10px !important;
        box-sizing: border-box;
    }

    .mainnr .liebiao li.fdz {
        margin: 3px 2px !important;
    }

    /* ---------- 4. 独立模板汉堡按钮 ---------- */
    button.menu-toggle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        min-height: 44px;
        padding: 10px !important;
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        background: none;
        border: 0;
        cursor: pointer;
    }

    button.menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: #1a1d21;
    }

    /* ---------- 5. 首页轮播热区与指示点 ---------- */
    /* 幻灯片视觉来自 li 的背景图，a 内只有 opacity:0 的占位 img，
       导致 a 只有一行文字高 —— 点 banner 中间没反应 */
    .flexslider .slides > li > a {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        z-index: 1;
        text-indent: -9999px;
        overflow: hidden;
    }

    .flexslider .flex-control-nav,
    .flexslider .flex-direction-nav {
        z-index: 3;
    }

    .flexslider .flex-control-nav a {
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
        font-size: 12px !important;
    }
}


/* ---------- 6. 老 cms 模板正文：横向零内边距导致文字顶边 ---------- */
@media (max-width: 1024px) {
    .cms {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    /* 中文长段落行高偏紧，1.9 更接近移动端阅读舒适区间 */
    .cms p,
    .cms li,
    .cms .c-zw {
        font-size: 15px !important;
        line-height: 1.9 !important;
    }

    .cms img {
        height: auto !important;
    }
}


/* ---------- 7. mainnr 切换条：1000px 装饰底图拉到 390 会变形 ---------- */
@media (max-width: 1024px) {
    .mainnr {
        background: none !important;
        border-bottom: 1px solid #e6e9ef;
        padding: 10px 8px 12px !important;
        margin-bottom: 18px !important;
    }

    .healthy {
        background: none !important;
        height: auto !important;
    }

    .liebiao li {
        width: auto !important;
        min-width: 46%;
        height: auto !important;
    }
}


/* ---------- 8. service 页左右栏：float 未下沉导致正文与标题重叠 ---------- */
@media (max-width: 1024px) {
    .s-c-left1,
    .s-c-left2,
    .s-c-right1,
    .s-c-right2 {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    .s-c-left1 img,
    .s-c-left2 img {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

    .s-c-right1 p,
    .s-c-right2 p {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin: 0 0 10px !important;
        text-align: left !important;
    }

    .s-c-right1 span,
    .s-c-right2 span {
        display: block;
        font-size: 15px !important;
        line-height: 1.85 !important;
        text-align: left !important;
    }
}


/* ---------- 9. company 页两栏：左栏仍 float 且只有 200px，压住右栏 509px ---------- */
@media (max-width: 1024px) {
    .company-left,
    .company-right {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 18px !important;
        box-sizing: border-box;
    }

    .company-left img,
    .company-right img {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

    /* 二维码 / 微信关注块在窄屏居中，别顶边 */
    .company-left {
        text-align: center;
    }

    .company-left img {
        display: inline-block;
        width: auto !important;
        max-width: 62%;
        margin: 0 auto 10px;
    }
}


/* ---------- 10. company 页首屏顺序：三个二维码占了 70% 首屏，简介被压到下面 ---------- */
@media (max-width: 1024px) {
    .company {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 正文优先，二维码下沉到页尾 */
    .company-right {
        order: 1;
    }

    .company-left {
        order: 2;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 10px;
        margin-top: 8px !important;
        padding-top: 14px;
        border-top: 1px solid #e9edf2;
    }

    .company-left .qqweibo {
        float: none !important;
        width: 31% !important;
        max-width: 118px;
        margin: 0 !important;
        text-align: center;
    }

    .company-left .qqweibo img {
        display: block;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto 6px !important;
    }

    .company-left .qqweibo p {
        font-size: 11.5px !important;
        line-height: 1.45 !important;
        text-align: center !important;
        margin: 0 !important;
        color: #5d6673;
    }

    /* 简介正文 */
    .company-right .c-p2 {
        font-size: 15px !important;
        line-height: 1.9 !important;
        text-align: justify;
    }
}


/* 10b. company 正文横向零内边距，文字顶到两边 */
@media (max-width: 1024px) {
    .company {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    .company-right {
        padding-top: 18px !important;
    }
}


/* ---------- 11. biradar 图标/文字栏 & contactus 标题贴合 ---------- */
@media (max-width: 1024px) {
    .biradarList-li1,
    .biradarList-li2 {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 14px !important;
        box-sizing: border-box;
    }

    .biradarList-li1 .iPic,
    .biradarList-li2 .iPic,
    .biradarList-li1 .iTxt,
    .biradarList-li2 .iTxt {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .biradarList-li1 .iPic,
    .biradarList-li2 .iPic {
        margin-bottom: 10px !important;
    }

    .biradarList-li1 .iTxt p,
    .biradarList-li2 .iTxt p {
        font-size: 15px !important;
        line-height: 1.8 !important;
    }

    /* contactus：h1 与地址块贴太近 */
    .p-content .contactus {
        margin-top: 10px !important;
    }
}


/* ---------- 12. news 列表：标题/摘要被 nowrap + 固定 70px 截成一行 ---------- */
@media (max-width: 1024px) {
    .news .n-left {
        width: 64px !important;
        height: 64px !important;
        margin-right: 12px !important;
    }

    .news .n-p1 {
        font-size: 20px !important;
        line-height: 20px !important;
        margin-top: 12px !important;
        margin-bottom: 4px !important;
    }

    .news .n-p2 {
        font-size: 12px !important;
        line-height: 14px !important;
    }

    .news .n-right {
        float: none !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        white-space: normal !important;
        padding-top: 4px !important;
    }

    .news .n-right a {
        display: block;
    }

    .news .n-right a p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin: 0 0 5px !important;
        white-space: normal !important;
    }

    .news .n-right a span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13.5px !important;
        line-height: 1.65 !important;
        color: #66707c;
        white-space: normal !important;
    }

    /* 分隔虚线图不参与布局挤压 */
    .news li > img {
        max-width: 100%;
        height: auto;
    }
}


/* ---------- 13. 首页「全生命周期数据服务」整块在移动端不展示 ----------
   该模块是 PC 端的拼图式版式：外层固定高 451px，内部 .t-k1(480) + .t-k2/.t-k3(249)
   全部 float 并靠固定像素定位，背景是切好的整块位图（gb-bj1jpg.jpg / gb-bj2jpg.jpg…）。
   这类版式没有可压缩的余地，窄屏下只能堆成 999px 高一列被裁一半的图，故整块隐藏。
   范围：仅 ≤1024px；桌面端完全不受影响。全站只有 index.html 使用该结构。
   ============================================================ */
@media (max-width: 1024px) {
    .content2 {
        display: none !important;
    }
}


/* ---------- 14. 全站手机端体检（588 页）后的修补 ----------
   14.1 六种「特殊 banner」仍是 height:400px + 背景原尺寸居中：
        390 宽时只露出原图中间 1/5，标题两侧被切断（solution / biradar / ny2 最明显）。
   14.2 .banner（33 个二级产品页）：高度写死 453px 或 70vh，内层 img 按原始像素铺开。
   14.3 新模板 17 页的 .hero：min-height:220px + object-fit:cover，把 1920×400 的图裁成 1.77:1。
   14.4 新模板正文 .container 在手机上宽 100% 且 padding 为 0，文字顶到屏幕边缘。
   14.5 分页数字链接只有 24×16，手指很难点中。
   14.6 safety.html 的英文副标题用 &nbsp; 连写，20px 下宽 447px 撑破 390 视口。
   ============================================================ */
@media (max-width: 1024px) {

    /* 14.1 背景图型 banner：统一成原图 4.8:1 的比例条 */
    .solution-banner,
    .zf-banner,
    .yun-banner,
    .big-banner,
    .blueapp-banner,
    .hulianw-banner {
        height: 20.84vw !important;
        min-height: 78px;
        max-height: 214px;
        background-size: cover !important;
        background-position: 50% 50% !important;
        overflow: hidden;
    }

    /* 14.2 img 型 banner：取消固定高度，让图片按自身比例铺满宽度。
       quick.html / bluecms.html 的 .banner 是「图片 + 文案」复合块，加了 .banner-keep 排除在外，
       否则图片铺满会把内层固定宽度撑出来（quick.html 实测溢出到 439px）。 */
    .banner:not(.banner-keep) {
        height: auto !important;
        overflow: visible;
    }

    .banner:not(.banner-keep) img {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

    /* 14.3 新模板 hero：同样压成比例条，覆盖层是绝对定位，随 hero 一起裁掉 */
    .hero {
        height: auto !important;
        overflow: hidden;
    }

    .hero img {
        min-height: 0 !important;
        height: 20.84vw !important;
        width: 100% !important;
        object-fit: cover;
    }

    /* govai.html / ityunwei.html 的覆盖层有可见渐变与白字，保持原高度 */
    .hero.hero-over-keep img {
        height: auto !important;
        min-height: 220px !important;
    }

    /* 14.4 新模板正文左右留白 */
    main .container {
        width: auto !important;
        max-width: none !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    /* 14.5 分页数字：24×16 → 至少 36×36 的触摸区 */
    a.a1.bai,
    a.current {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
        margin: 0 2px;
        box-sizing: border-box;
    }

    /* 14.6 英文副标题用 &nbsp; 连写，窄屏会撑破；字号随宽度收缩 */
    .c-bt .c-span2 {
        font-size: min(17px, 4.2vw) !important;
        line-height: 1.4;
    }
}