/* ==========================================================================
   移动端自适应补丁（方案 A）
   --------------------------------------------------------------------------
   加载顺序：index.css -> common.css -> indexv2.css -> mobile.css
   原则：全部规则包裹在媒体查询内，>=1200px 的 PC 外观零改动。
   断点分工：
     <=1199  窄桌面 / 平板 / 手机 —— 把 1200 定宽内容改为百分比，消除横向溢出
     <=959   平板 / 大屏手机     —— 头部高度补偿（40px 顶部条 + 50px 导航 = 90px）
     <=767   手机               —— 单列布局
     <=479   小屏手机           —— 字号与间距微调
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 窄桌面 / 平板 / 手机（<=1199）：固定像素宽改百分比
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {

    .wp-12 {
        box-sizing: border-box;
        padding: 0 15px;
    }

    /* 品牌数据：4 列自适应 */
    .guide dl {
        width: 23.2%;
        margin-right: 2.4%;
        height: auto;
        min-height: 376px;
    }
    .guide dl:nth-of-type(4) { margin-right: 0; }
    /* 卡片紫色底是 :before 上的一张固定尺寸图 yinz_k.jpg（278x376），
       indexv2 只写了 `background: url() no-repeat`，没给 background-size，
       于是底图永远按原尺寸从左上角铺 —— PC 端卡片刚好 278x376，看不出问题；
       但只要卡片被拉宽或变高（<=767 是 width:100%，375 屏卡片宽 375），
       超出的部分就没有底色。而 hover 时文字是白色的，白字落在白底上等于消失
       （截图中「功率」「电」「超」被裁掉就是这个原因）。
       这里让底图铺满整张卡片，卡片多大紫色就多大。 */
    .guide dl:before {
        background-size: cover;
        background-position: center;
    }

    /* 产品 1：左 435 + 右 765 = 1200，改为百分比 */
    .pro01_l { width: 36.5%; }
    .pro01_r { width: 63.5%; }
    .pro_qie { padding-left: 8%; }
    .pro_qie ul li { width: 100%; height: auto; }
    .pro_qie ul li img { width: 100%; height: auto; }
    .pro_next { right: 0; }

    /* 产品 2：dt 581 固定宽 + dd 420 固定宽会撑破容器 */
    .pro02 { height: auto; padding: 40px 0; background-size: cover; }
    .pro02 dl { height: auto; }
    .pro02 dl dt { width: 48.4%; height: auto; }
    .pro02 dl dt img { width: 100%; height: auto; margin: 0; }
    .pro02 dl dd { width: 48%; padding: 60px 0 0 3%; }

    /* 产品 3：385 x 3 固定宽 + 21 间距 = 1197 */
    .pro03 dl { width: 32%; margin-right: 2%; }
    .pro03 dl dt,
    .pro03 dl dt img { width: 100%; height: auto; }
    .pro03 dl dd .pro_ul01 { height: auto; }
    /* SuperSlide 生成的 .tempWrap 会略宽于容器，兜住它避免出现横向滚动条 */
    .pro03_m { overflow: hidden; }
    /* 产品 3 左右箭头：原样式按 1200 定宽容器设计，放在容器外侧 -120px，
       视口一旦小于 1320 就顶出屏幕产生横向滚动条 */
    .pro03_prev,
    .pro03 p.pro03_prev { left: 0; }
    .pro03_next,
    .pro03 p.pro03_next { right: 0; }

    /* 广告条：466 固定高 + 电话区 padding-left 390 会顶出屏幕 */
    .ban01 { height: auto; padding: 50px 0 40px; background-size: cover; }
    .ban01_m { height: auto; padding: 0; }
    .ban01_m ul { padding-left: 0; display: flex; flex-wrap: wrap; justify-content: center; }
    .ban01_tel { padding-left: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }

    /* 合作客户：222 x 5 + 间距 = 1198 */
    .hz_bg { height: auto; padding-bottom: 30px; background-size: cover; }
    .hz ul li { width: 18.4%; height: auto; margin-right: 2%; }
    .hz ul li img { width: 100%; height: auto; }
    .hz ul li:nth-child(5n) { margin-right: 0; }

    /* 研发优势：915 / 750 固定高 */
    .fanw { height: auto; }
    .serv_c { height: auto; }
    .serv_c ul { width: 100%; height: auto; }
}

/* --------------------------------------------------------------------------
   2. 平板 / 大屏手机（<=959）：头部高度补偿、导航可滚动、产品优势字号缩放
   -------------------------------------------------------------------------- */
@media (max-width: 959px) {

    /* 【注意】不要改 body padding-top。
       实测头部高度 = 40px 顶部条 + 1px 描边 + 50px 导航 = 91px，
       而各页面已用自身偏移量配合原来的 body padding-top:50px：
         · 首页 <=479：50 + .pics_wrap margin-top:44 = 94（正合适）
         · 子页面 <=959：50 + .cp-banner margin-top:44 = 94（正合适）
       把 body 改成 90px 会在这些页面顶部多出 40px 空白带，
       所以这里只补首页 480~959 缺失的那段偏移（见下方媒体查询）。 */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 9999;
        background-color: #fff;
        box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
    }
    .header > .top-bar {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #f2f2f2;
    }
    .header-nav { overflow: hidden; }

    /* 下拉菜单：从头部下沿开始，并允许滚动查看全部菜单项
       （common.css 写的是 top:50px / height:100%，与 91px 头高错位，
        且 menu 底部 41px 被视口截掉、无法滚动） */
    .css-nav {
        top: 91px;
        height: calc(100% - 91px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .css-nav > li > a { padding: 0 20px; }

    /* 产品优势：五列在窄屏下按 rem 缩放文字，保留原有 hover 滑动机制 */
    .qua01,
    .qua01 dl { height: 22rem; }
    .qua_dl02 { top: -22.2rem; }
    .qua_dl01 dd { padding: 2.2rem 0 0 13%; }
    .qua_dl01 dd h5 { font-size: 1.2rem; line-height: 1.6rem; height: 5rem; }
    .qua_dl01 dd h5 i { font-size: .75rem; }
    .qua_dl01 dd em,
    .qua_dl01 dd em img { width: 1.6rem; height: 1.6rem; }
    .qua_dl02 dt { padding: 3rem 0 0; }
    .qua_dl02 dt img { width: 3rem; height: 3rem; }
    .qua_dl02 dd h5 { font-size: 1.3rem; height: 3.4rem; line-height: 3.4rem; }
    .qua_dl02 dd p { font-size: .72rem; line-height: 1.2rem; padding: .6rem 0 0; }
    .qua_dl02 dd span { padding-top: 1.6rem; }
    .qua_dl02 dd span a { font-size: .72rem; height: 1.8rem; line-height: 1.8rem; }

    /* ---- 新闻资讯（<=959）----
       common.css 在这一档用「父级 -40px / 子项 +40px」的对冲写法来实现首项定位：
         .in-news { margin-top: -40px }
         .in-news .item { margin-top: 40px }
       补丁把 .item 的上下 margin 归一后，父级那个 -40px 就失去了配对对象，
       实测会把上内边距吃成净 10px，让「公司新闻」标题贴住研发优势黑块。
       所以父级负边距必须一并去掉，由 .section 的上内边距统一控制留白。 */
    .in-news { margin-left: 0; margin-top: 0; }
    .in-news .item { float: none; width: auto; margin: 0 0 30px; }
}

/* --------------------------------------------------------------------------
   2b. 首页首屏偏移补丁（480~959）
   --------------------------------------------------------------------------
   indexv2.css 只在 <=479 给了 .pics_wrap{margin-top:44px}，
   于是 480~959 这段（大屏手机横屏 / 小平板）里轮播会被 fixed 头部压住约 41px。
   这里只补这一段，<=479 保持原样、不重复叠加。 */
@media (min-width: 480px) and (max-width: 959px) {
    .pics_wrap { margin-top: 41px; }
}

/* --------------------------------------------------------------------------
   3. 手机（<=767）：单列布局
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    img { max-width: 100%; }

    /* ---- 轮播：容器高度交给图片自己撑开 ---- */
    .pics_wrap { height: auto; overflow: hidden; }
    .pics_wrap #html5zoo-1 { height: auto !important; }
    .pics_wrap > div { height: auto !important; }
    .pics_wrap img { width: 100% !important; height: auto !important; display: block; }

    /* ---- 搜索 + 快捷入口 ---- */
    .indexMain .row-a1 { padding: 15px 0; }
    /* 搜索：.inp 是 content-box，且 .sub 按钮是绝对定位覆盖在输入框右侧，
       所以这里用 100% + border-box，而不是减法 */
    .m-so01 { width: 100%; }
    .m-so01 .inp { width: 100%; box-sizing: border-box; }
    .m-so01 .tips { display: none; }
    .ul-link01 { display: flex; float: none; width: 100%; margin-top: 15px; }
    .ul-link01 li { width: 33.33%; float: none; }

    /* ---- 栏目公共标题 ----
       底部装饰图 yinz_tico.png 原始尺寸仅 159x27，原来放在固定高度块里贴底显示；
       改成 height:auto 后必须留出足够的下内边距，否则装饰图会压到副标题上 */
    .gui_tit {
        height: auto;
        padding-bottom: 40px;
        font-size: 24px;
        line-height: 1.4;
        background-size: auto 27px;
        background-position: center bottom;
    }
    .gui_tit span { font-size: 14px; margin-top: 6px; }
    .section { padding: 30px 0; }

    /* ---- 品牌数据 ---- */
    .guide { padding: 30px 0; }
    .guide dl {
        width: 100%;
        float: none;
        height: auto;
        min-height: 0;
        margin: 0 0 15px;
    }
    .guide dl dd p { display: block; -webkit-line-clamp: unset; padding-top: 10px; }
    .digital { margin-top: 15px !important; }
    .ibrand-num { display: flex; flex-wrap: wrap; }
    .ibrand-num li { width: 50%; height: auto; padding: 12px 0; font-size: 14px; }
    .ibrand-num li b { font-size: 30px; line-height: 1.2; display: block; padding-right: 0; }
    .ibrand-num li:nth-child(odd):before { background: none; }

    /* ---- 广告条 ---- */
    .ban01 { height: auto; padding: 25px 0; background-size: cover; }
    .ban01_m { height: auto; padding: 0; }
    .ban01_m b { font-size: 20px; height: auto; line-height: 1.5; padding: 0 10px; }
    .ban01_m ul { padding-left: 0; display: flex; flex-wrap: wrap; justify-content: center; }
    .ban01_m ul li {
        font-size: 14px;
        height: 36px;
        line-height: 36px;
        padding: 0 16px 0 26px;
        background-size: 14px 14px;
    }
    .ban01_tel { padding-left: 0; display: block; text-align: center; }
    .ban01_tel p {
        float: none;
        background: none;
        padding-left: 0;
        margin-bottom: 12px;
    }
    .ban01_tel p i { font-size: 22px; }
    .ban01_tel b { float: none; margin: 0 auto; }

    /* ---- 产品 1 ---- */
    .pro01 { padding: 30px 0 10px; }
    .pro01_l { width: 100%; float: none; padding: 20px 0 0; }
    .pro01_r { width: 100%; float: none; margin: 15px 0 0; height: auto; }
    .pro_qie { padding-left: 0; }
    .pro_qie ul li { width: 100%; height: auto; }
    .pro_qie ul li img { width: 100%; height: auto; }
    /* 文字列「标题 + 列表 + 按钮」—— 产品 1/2/3 共用这些类，
       移动端整块居中（indexv2 里原作者也留了一行注释掉的 .pro_bt{text-align:center}） */
    .pro_bt {
        height: auto;
        line-height: 1.4;
        padding-bottom: 10px;
        text-align: center;
    }
    /* 标题下的装饰横线随文字居中（原为 left:0 左对齐） */
    .pro_bt:before { left: 50%; margin-left: -30px; }
    .pro_bt a { font-size: 24px; }
    .pro_ul01 { height: auto; padding-top: 15px; text-align: center; }
    /* 列表箭头图标原本挂在 li 的左边缘，整列一居中就会和文字脱开，
       所以把图标从 li 下移到 a 上，让「图标 + 文字」作为一个整体居中 */
    .pro_ul01 li {
        height: auto;
        line-height: 2;
        text-align: center;
        background: none;
    }
    .pro_ul01 li a {
        display: inline-block;
        padding-left: 22px;
        background: url(../images/cp_ico01.png) no-repeat 0 center;
        background-size: 14px 14px;
    }
    .pro_btn {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 15px;
    }
    .pro_btn a {
        float: none;
        width: auto;
        height: 36px;
        font-size: 14px;
        padding: 0 16px;
        margin: 0 5px 10px;
    }
    .pro01_r p { width: 40px; height: 40px; top: calc(50% - 20px); }
    .pro01_r p img { width: 40px; height: 40px; }
    .pro_prev { left: 8px; }
    .pro_next { right: 8px; }

    /* ---- 产品 2 ---- */
    .pro02 { padding: 30px 0; }
    .pro02 dl { height: auto; }
    .pro02 dl dt { width: 100%; float: none; height: auto; }
    .pro02 dl dt img { width: 100%; height: auto; margin: 0; }
    .pro02 dl dd { width: 100%; float: none; padding: 20px 0 0; }

    /* ---- 产品 3 ---- */
    .pro03 { padding: 30px 0 10px; }
    .pro03 dl { width: 100%; float: none; margin: 0 0 25px; }
    .pro03 dl dt,
    .pro03 dl dt img { width: 100%; height: auto; }
    .pro03 dl dd { padding: 15px 0 0; }
    .pro03 dl dd .pro_bt { height: auto; line-height: 1.4; text-align: center; }
    .pro03 dl dd .pro_bt a { font-size: 20px; }
    .pro03 dl dd .pro_ul01 { height: auto; padding-top: 12px; text-align: center; }
    /* 产品 3 的 li 选择器层级比通用 .pro_ul01 li 更深，需照抄一份才能收回图标 */
    .pro03 dl dd .pro_ul01 li {
        height: auto;
        line-height: 2;
        text-align: center;
        background: none;
    }
    .pro03 p { width: 40px; height: 40px; top: 120px; }
    .pro03 p img { width: 40px; height: 40px; }
    .pro03_prev { left: 8px; }
    .pro03_next { right: 8px; }

    /* ---- 产品优势：五列改单列；紫色信息卡「叠加」在图片上（浮层） ----
       结构：.qua_dl01 = 图片层，.qua_dl02 = 紫色信息卡。
       移动端不采用 PC 的 hover 滑动（高度写死），而是让紫卡在文档流里
       用负上边距上移，压在图片下缘之上，形成叠卡效果。 */
    .quality { padding: 30px 0 10px; }
    .quality .qua01 {
        width: 100%;
        float: none;
        height: auto;
        margin: 0 0 20px;
        border-radius: 8px;
        /* 允许被子元素上移压住，并让紫卡的投影不被裁掉 */
        overflow: visible;
    }
    .quality .qua01 dl,
    .quality .qua01 .qua_dl01 { height: auto; }
    /* 图片层 = 卡片上半部分：定高 + 裁切（原图 378x562 竖图，不裁会拉到 500+px） */
    .quality .qua01 .qua_dl01 {
        position: relative;
        height: 240px;
        overflow: hidden;
        border-radius: 8px;
    }
    .quality .qua01 .qua_dl01 dt,
    .quality .qua01 .qua_dl01 dt img { width: 100%; height: 100%; }
    .quality .qua01 .qua_dl01 dt img {
        display: block;
        object-fit: cover;
        border-radius: 8px;
    }
    /* 图上自带的标题文字层：紫卡里已有同名标题，隐藏避免重复 */
    .quality .qua_dl01 dd { display: none; }
    /* 紫色信息卡：文档流内常显 + 负上边距上移，叠加在图片下缘之上
       注意 indexv2 给 .qua01 dl 写了 width:100%，这里必须收回 auto，
       否则 100% + 左右 margin 会撑出父容器 */
    .quality .qua_dl02 {
        position: relative;
        top: auto;
        width: auto;
        margin: -56px 10px 10px;
        padding-bottom: 18px;
        border-radius: 8px;
        background: url(../images/pinz_k.jpg) no-repeat center 0;
        background-size: cover;
        box-shadow: 0 8px 20px rgba(76, 29, 149, .25);
        -webkit-transition: none;
        transition: none;
    }
    /* 覆盖 PC 的 hover / .cur 滑动定位，移动端始终停在叠加位 */
    .quality .qua01:hover .qua_dl02,
    .quality .qua01.cur .qua_dl02 { top: auto; }
    .qua_dl02 dt { padding: 18px 0 0; }
    .qua_dl02 dt img { width: 3rem; height: 3rem; }
    .qua_dl02 dd { width: 88%; }
    .qua_dl02 dd h5 { font-size: 18px; height: auto; line-height: 1.5; padding-bottom: 8px; }
    .qua_dl02 dd h5:before { display: none; }
    .qua_dl02 dd p {
        font-size: 14px;
        line-height: 1.7;
        display: block;
        -webkit-line-clamp: unset;
    }
    .qua_dl02 dd span { width: auto; padding-top: 15px; }
    .qua_dl02 dd span a {
        display: inline-block;
        width: auto;
        padding: 0 24px;
        font-size: 14px;
        height: 36px;
        line-height: 36px;
    }

    /* ---- 合作客户 ---- */
    .hz_bg { height: auto; padding-bottom: 25px; background-size: cover; }
    .hz_tit { height: auto; line-height: 1.5; padding: 18px 0; }
    .hz_tit a { font-size: 20px; }
    .hz ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .hz ul li { width: 48%; float: none; height: auto; margin: 0 0 10px; }
    .hz ul li img { width: 100%; height: auto; }

    /* ---- 研发优势：四列改单列（宽度由 JS 注入 wind/4，需 !important 覆盖）
       注意：li 内的 .mo / .hav 都是绝对定位，li 自身没有文档流内容，
       只写 height:auto 会让卡片塌成 0 高（=.padding），所以必须给 min-height 撑开。
       .bock 原为 hover 浮层，这里改成常显，并用 flex 贴底；opacity 加 !important
       是为了不被 js 的 mouseenter 动画改回 0。 ---- */
    .fanw { height: auto; margin: 30px auto 0; }
    .serv_c { height: auto; margin-top: 20px; }
    .serv_c ul { width: 100%; height: auto; }
    .serv_c li {
        width: 100% !important;
        float: none;
        height: auto;
        min-height: 340px;
        padding: 0;
        position: relative;
        background-size: cover !important;
        background-position: center center !important;
    }
    .serv_c li:before { display: none; }
    .serv_c li .hav {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .shu2 { display: none; }
    .bock {
        position: static;
        width: auto;
        height: auto;
        opacity: 1 !important;
    }
    .bock dl {
        position: static;
        width: auto;
        height: auto;
        padding: 16px 15px;
        background: rgba(0, 0, 0, .72);
    }
    .bock dt { float: none; width: auto; height: auto; padding: 0 0 8px; font-size: 15px; }
    .bock dt:before { display: none; }
    .bock dt span { font-size: 12px; margin-top: 4px; }
    .bock dd { float: none; width: auto; font-size: 13px; line-height: 1.7; padding-top: 8px; }
    .bock dd p { padding: 0; }

    /* ---- 新闻资讯 ----
       父级负边距 / item margin 的对冲已在 <=959 里统一处理（见上方说明）。
       这里只负责手机档的图片自适应，以及给新闻区留出与上方黑块的呼吸空间：
       <=767 的 .section 上内边距被压到 30px，新闻区紧跟研发优势的深色卡片，
       所以单独提到 50px（= PC 端 .section 的原值）。 */
    .in-news .img-center img { width: 100%; }
    .fanw + .section { padding-top: 50px; }

    /* ---- 页脚 ---- */
    .fd-top { padding: 20px 15px; border-radius: 0; }
    .fd-qr { float: none; margin: 0 auto; }

    /* ---- 悬浮客服：与 <=479 保持一致，手机上不展示滑出面板 ---- */
    .client-2 { display: none; }
}

/* --------------------------------------------------------------------------
   4. 小屏手机（<=479）：字号与间距微调
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {

    .gui_tit { font-size: 20px; }
    .gui_tit span { font-size: 13px; }
    .ibrand-num li b { font-size: 26px; }
    .ban01_m b { font-size: 18px; }
    .ban01_m ul li { font-size: 13px; padding: 0 10px 0 22px; }
    .pro_bt a { font-size: 20px; }
    .ul-link01 li { width: 33.33%; }
    .top-m { font-size: 12px; line-height: 20px; }
}