@charset "utf-8";
/* ============================================================
   蓝太平洋官网 - 响应式适配样式
   建立日期：2026-11-02
   说明：
     1. 本文件必须在所有原有 CSS 之后加载，用于覆盖固定宽度布局
     2. 分四层：通用兜底 / 通用布局 / 首页 / 内页与新闻
     3. 断点：1024（平板）/ 900（导航）/ 768（手机）/ 480（小屏）
     4. 原站为 1000px 固定宽度 + float 布局，此处以覆盖方式改造，
        不修改原有 CSS 文件，便于随时回退
   ============================================================ */

/* ============================================================
   第一层：通用兜底（任何页面都适用，风险最低）
   ============================================================ */
@media (max-width: 1024px) {
    /* 防止任何元素撑出横向滚动条 */
    html,
    body {
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    /* 图片 / 媒体自适应容器宽度 */
    img,
    video,
    iframe,
    embed,
    object,
    canvas {
        max-width: 100% !important;
    }

    img {
        height: auto !important;
    }

    /* 表格不溢出 */
    table {
        max-width: 100%;
    }
}

/* ============================================================
   第二层：通用布局（覆盖固定宽度容器与 float）
   ============================================================ */
@media (max-width: 1024px) {
    /* ---- 固定 1000px 容器改为弹性 ---- */
    .top_con,
    .nav,
    .content1,
    .content2-k,
    .content3,
    .content4,
    .bottom-k,
    .bottom-k ul,
    .wrapper,
    .container,
    .main {
        width: 100% !important;
        max-width: 1000px;
        box-sizing: border-box;
    }

    /* ---- 内页常见固定宽度主栏 ---- */
    .s-right,
    .c4-right {
        width: auto !important;
        max-width: 100%;
        float: none !important;
    }

    /* ---- 固定高度容器改为自适应（内容重排后必须放开） ---- */
    .content1,
    .content2,
    .content3,
    .content4 {
        height: auto !important;
        min-height: 0 !important;
    }

    /* ---- 万能兜底：任何元素都不得超出父级宽度 ----
       原站 49 套模板中存在大量固定像素宽度容器（.cms .company .contactus
       .healthy .news .yunpingtai .box1_con .top 等），逐一列举不可维护，
       此处统一收口。max-width 不改变本就小于父级的元素，仅限制超宽者。 */
    body * {
        max-width: 100% !important;
        /* 老站常见 min-width:1000px/1180px 撑开布局，max-width 无法压制，
           必须一并归零，否则媒体查询再对也压不下宽度 */
        min-width: 0 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* 已知高频固定宽度容器，同时把宽度改为流式 */
    .cms,
    .top,
    .company,
    .contactus,
    .healthy,
    .media,
    .news,
    .yunpingtai,
    .box1_con,
    .s-c-left1,
    .s-c-right1,
    .n-right,
    .n-left {
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* ---- 说明：未采用"全站取消 float"的做法。
   实测在整页切图型老页面（如 healthy.html）上会导致元素重叠，
   收益为零、风险显著，故仅对已确认的页面做针对性布局重排。 */

/* ---- 平板：内容区留出安全边距 ---- */
@media (max-width: 1024px) and (min-width: 769px) {

    .top_con,
    .nav,
    .content1,
    .content2-k,
    .content3,
    .bottom-k {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ============================================================
   第三层：导航（900px 以下改为换行居中）
   ============================================================ */
@media (max-width: 900px) {

    .top {
        height: auto;
        padding: 4px 0;
    }

    .top_con {
        padding-left: 12px;
        padding-right: 12px;
    }

    .top_right {
        float: none;
        text-align: center;
    }

    .top_kefu {
        line-height: 28px;
        font-size: 12px;
        color: #999;
    }

    /* 导航整体改为纵向流式 */
    .nav {
        height: auto !important;
        margin-top: 0 !important;
        padding: 8px 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: visible;
    }

    .logo {
        float: none !important;
        width: auto !important;
        padding: 6px 0 10px;
    }

    .logo img {
        max-height: 42px;
        width: auto;
    }

    .nav_dao {
        width: 100% !important;
        float: none !important;
        line-height: normal !important;
    }

    .nav_dao ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px 0;
    }

    .nav_dao ul li {
        float: none !important;
        padding-left: 0 !important;
    }

    .nav_dao ul li a {
        display: block;
        padding: 9px 13px;
        font-size: 14px;
        line-height: 1.4;
    }

    .nav_dao ul li .dangqian,
    .nav_dao ul li a:hover {
        border-bottom-width: 2px;
        padding-bottom: 7px;
    }
}

/* ============================================================
   第四层：Banner 轮播
   ------------------------------------------------------------
   原图为 1920x400 通栏（比例 4.8:1），核心内容集中在中间 1000px 区域
   （即整图的 52%）。移动端令容器高 = 宽 x 0.4，配合 cover 居中，
   恰好显示中间 52% 的核心区，标题不会被裁切、比例也不变形。
   ============================================================ */
@media (max-width: 900px) {

    .flexslider,
    .flexslider .slides,
    .flexslider .slides > li {
        height: 40vw !important;
        min-height: 130px !important;
        max-height: 300px !important;
    }

    .flexslider .slides > li {
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /* 各 banner 构图不同，按标题实际位置单独取景（40vw 下可视范围为 52%） */
    .flexslider .slides > li[style*="gb-banner6-opt"] {
        background-position: 63% center !important;
    }

    .flexslider .slides > li[style*="gb-zhisoAi"] {
        background-position: 65% center !important;
    }

    .flexslider .slides > li[style*="gb-banner5"] {
        background-position: 30% center !important;
    }

    .flexslider .slides > li[style*="gb-banner3"] {
        background-position: 65% center !important;
    }

    .flexslider .slides > li[style*="gb-banner6.jpg"] {
        background-position: 50% center !important;
    }

    .flexslider .flex-direction-nav a {
        width: 30px;
        height: 30px;
        margin-top: -15px;
        opacity: .5;
    }

    .flexslider .flex-direction-nav .flex-prev {
        left: 6px;
    }

    .flexslider .flex-direction-nav .flex-next {
        right: 6px;
    }

    .flexslider .flex-control-nav {
        bottom: 6px;
    }

    .flexslider .flex-control-paging li a {
        width: 9px;
        height: 9px;
    }
}

/* ============================================================
   第四层补充：第三方客服浮窗
   该浮窗由 kefu.cckefu1.com 脚本注入，class 前缀 kf_qycn_com_cckf_*
   移动端默认 150x250，会遮挡正文，此处收缩为侧边小条
   ============================================================ */
@media (max-width: 900px) {

    /* 大图标浮窗直接隐藏（移动端遮挡面积过大） */
    .kf_qycn_com_cckf_icon {
        display: none !important;
    }

    /* 侧边竖条缩小并移到底部右侧，避免遮挡导航与 banner */
    .kf_qycn_com_cckf_dock {
        top: auto !important;
        bottom: 72px !important;
        right: 0 !important;
        transform: scale(.72);
        transform-origin: right bottom;
        opacity: .92;
    }
}

/* ============================================================
   第五层：首页 - 产品卡片区 (.content1)
   ============================================================ */
@media (max-width: 900px) {

    .content1 {
        padding-top: 26px;
        padding-bottom: 26px;
    }

    .content1 ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }

    .content1 ul li,
    .content1 .c-li1,
    .content1 .c-li2 {
        float: none !important;
        width: calc(33.333% - 14px) !important;
        min-width: 150px;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
        background: #fff;
    }

    .content1 ul li img {
        width: 74px;
        height: 74px;
        padding-top: 22px;
        padding-bottom: 8px;
        margin: 0 auto;
    }

    .content1 ul li h2 {
        font-size: 15px !important;
        line-height: 1.5 !important;
        padding: 0 6px !important;
        margin: 0 !important;
        text-align: center;
    }

    .content1 ul li .p-small {
        font-size: 13px;
        line-height: 1.65;
        padding: 6px 10px 18px;
        text-align: left;
    }
}

@media (max-width: 600px) {

    .content1 ul li,
    .content1 .c-li1,
    .content1 .c-li2 {
        width: calc(50% - 14px) !important;
        min-width: 0;
    }
}

/* ============================================================
   第六层：首页 - 全生命周期数据服务 (.content2)
   ============================================================ */
@media (max-width: 900px) {

    .content2 {
        padding-top: 26px;
        padding-bottom: 30px;
    }

    .content2-k h2 {
        text-align: center;
    }

    .c2-span1 {
        font-size: 20px;
    }

    .c2-span2 {
        font-size: 15px;
        line-height: 1.6;
    }

    .t-k1,
    .gb-bj1,
    .gb-bj4,
    .t-k2,
    .t-k3 {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    .t-k1 {
        margin-top: 22px;
        text-align: center;
    }

    .t-k1 > img {
        float: none !important;
        margin: 0 auto 10px !important;
        max-width: 70%;
    }

    .gb-bj1 {
        margin: 0 auto 14px !important;
        background-size: 100% 100%;
        max-width: 340px;
    }

    .gb-bj1 ul {
        width: 100% !important;
        box-sizing: border-box;
        padding: 12px 0;
    }

    .gb-bj4 {
        max-width: 340px;
        margin: 0 auto 16px !important;
        background-size: 100% 100%;
    }

    .gb-bj4 span {
        margin-left: 0 !important;
        line-height: 149px !important;
        font-size: 15px;
    }

    .t-k2,
    .t-k3 {
        height: 190px !important;
        margin: 0 auto 16px !important;
        max-width: 340px;
        background-size: 100% 100% !important;
    }

    .t-k2 span,
    .t-k3 span {
        line-height: 190px !important;
        font-size: 15px;
    }
}

/* ============================================================
   第七层：首页 - 产品详解区 (.content3 / .ctn-box)
   ============================================================ */
@media (max-width: 900px) {

    /* 原 HTML 内联 height:2800px，必须放开 */
    .content3 {
        height: auto !important;
        margin-top: 26px;
        margin-bottom: 26px;
    }

    .ctn-box {
        display: block !important;
        margin-bottom: 26px;
        overflow: visible !important;
    }

    /* 覆盖内联 float:left 与固定宽高 */
    .ctn-box > img {
        float: none !important;
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto 14px !important;
    }

    .c3-r,
    .c3-r2 {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 12px 16px !important;
        box-sizing: border-box;
    }

    .c3-r h2,
    .c3-r2 h2 {
        font-size: 17px !important;
        line-height: 1.5 !important;
        text-align: center;
        padding: 8px 0 !important;
        margin: 0 !important;
    }

    .c3-r span,
    .c3-r2 span {
        display: block;
        font-size: 14px;
        line-height: 1.8;
        text-align: left;
    }

    .c3-an1,
    .c3-an2 {
        margin-top: 12px !important;
    }
}

/* ============================================================
   第八层：页脚 (.bottom)
   ============================================================ */
@media (max-width: 900px) {

    .bottom {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .bottom-k ul {
        width: 100% !important;
        padding-left: 0 !important;
        height: auto !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        line-height: 2 !important;
    }

    .bottom-k ul li {
        float: none !important;
    }

    .bottom-k ul li a {
        font-size: 13px;
        padding: 2px 4px;
        display: inline-block;
    }

    .bottom-k p {
        font-size: 12.5px;
        line-height: 1.9;
        padding: 8px 12px 0;
        word-break: break-all;
    }
}

/* ============================================================
   第九层：内页通用（产品页 / 方案页 / 新闻页）
   ============================================================ */
@media (max-width: 900px) {

    /* 内页常见的左侧栏 + 右内容 float 结构 */
    .s-left {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        padding: 10px 0;
    }

    .s-left-li1,
    .s-left-li2 {
        margin-bottom: 0 !important;
    }

    /* 内容区文字大小微调，提升小屏可读性 */
    .content1,
    .c3-r,
    .c3-r2,
    .c4-right {
        font-size: 14px;
    }

    /* 新闻正文：避免长英文/URL 撑破布局 */
    .news_content,
    .article,
    .content,
    .detail {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* ============================================================
   第十层：新闻详情页（viscms 模板）
   原模板 .n-xq 固定 1000px，正文 20px，移动端会溢出被裁
   ============================================================ */
@media (max-width: 900px) {

    .n-xq,
    .commWidth,
    .position.commWidth {
        width: 100% !important;
        max-width: 100%;
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-bottom: 40px !important;
        box-sizing: border-box;
    }

    .n-xq-p1 {
        font-size: 19px !important;
        line-height: 1.5 !important;
        padding: 14px 0 6px !important;
    }

    .n-xq-p2 {
        line-height: 1.9 !important;
        font-size: 12.5px !important;
        padding-bottom: 8px;
    }

    .n-xq-congtent {
        font-size: 16px !important;
        line-height: 1.9 !important;
        margin-top: 12px !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .n-xq-congtent p {
        margin-bottom: .9em !important;
        text-align: justify;
    }

    .n-xq-congtent img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
        margin: 10px auto;
    }

    .n-xq-congtent table {
        width: 100% !important;
        font-size: 13px;
    }
}

/* ============================================================
   第十一层：产品中心页（.p-* 系列）
   ============================================================ */
@media (max-width: 900px) {

    .p-content,
    .p-ul,
    .s-x {
        width: 100% !important;
        max-width: 100%;
        padding-left: 14px;
        padding-right: 14px;
        box-sizing: border-box;
    }

    .p-ul {
        margin-top: 26px !important;
    }

    /* 原为多列浮动，移动端改单列，避免文字被压到看不清 */
    .p-ul-li1,
    .p-ul-li2 {
        float: none !important;
        width: 100% !important;
        margin-bottom: 26px !important;
        border-bottom: 1px dashed #e3e3e3;
        padding-bottom: 18px;
        box-sizing: border-box;
    }

    .p-ul-content {
        overflow: hidden;
    }

    .p-ul-content p {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    .p-ul-content p:first-child {
        font-size: 16px !important;
        font-weight: 600;
    }

    .p-ul-img {
        width: 36px !important;
        margin-right: 10px !important;
    }

    .s-x {
        margin-bottom: 24px !important;
    }
}

/* ============================================================
   第十二层：cms.css 模板通用缺陷修复
   该模板（21 个页面）把 banner 容器高度写死 400px，内部却是 <img>，
   移动端图片缩到 ~80px 后容器仍占 400px，产生大片空白；
   切换条 .mainnr / .healthy 同样写死 52px，文字换行后溢出重叠。
   ============================================================ */
@media (max-width: 900px) {

    .s-banner {
        height: auto !important;
        line-height: 0;
    }

    .s-banner img {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

    .mainnr,
    .healthy {
        height: auto !important;
        background-size: 100% 100%;
    }

    .healthy ul,
    .healthy .liebiao,
    .liebiao {
        height: auto !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 0;
        padding: 10px 0 !important;
    }

    .healthy li,
    .liebiao li,
    .fdz {
        float: none !important;
        width: auto !important;
        height: auto !important;
        padding: 4px 8px;
    }

    .healthy li a,
    .liebiao li a {
        font-size: 14px;
        line-height: 1.6;
    }

    /* 该模板中大量写死高度的内容块，内容重排后必须放开 */
    .cms-t1,
    .cms-t2,
    .cms-t3,
    .cms-t4 {
        height: auto !important;
    }
}

/* ============================================================
   第十三层：box-sizing 兜底（解决「内边距把元素撑出视口」）
   现象：service.html 视口 390 却出现 436 宽的元素。
   原因：老站全部按 content-box 写，max-width:100% 只约束「内容盒」，
        390 + 左右 padding 46 仍然溢出。
   做法：小屏统一 border-box，使 max-width 把 padding 一并算进去。
   ============================================================ */
@media (max-width: 1024px) {

    body *,
    body *::before,
    body *::after {
        box-sizing: border-box;
    }
}

/* ============================================================
   第十四层：固定偏移量归零（解决「margin-left 把元素推出屏幕」）
   现象：healthy.html 视口 390 却出现 right=680 的图片。
   原因：老站在 1000px 画布里用 margin-left:224px / 290px 做水平居中，
        图片被 max-width 压到 390 后，左边距仍是 224，右边缘冲到 614。
   做法：小屏下取消所有内联水平外边距。这些数值只在 ≥1000px 的画布
        里成立，小屏下一律是错的。
   ============================================================ */
@media (max-width: 1024px) {

    [style*="margin-left"],
    [style*="margin-right"],
    /* 内联 margin 简写同样致命：margin:30px 0 0 740px 被上面的
       margin-left 选择器漏掉过，必须一并收口 */
    [style*="margin:"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ============================================================
   第十五层：全站扫描后剩余的 10 个具体溢出容器
   数据来源：110 页 × 390px 视口全量扫描（2026-11-03）
   107 页中 15 页有溢出，收口后仅剩下列类名，逐一处理。
   断点取 1024：这些容器在 940~1024px（平板横屏）同样溢出，
   只压到 900 会漏档（实测 service.html 在 1024 下仍溢出到 1072px）。
   ============================================================ */
@media (max-width: 1024px) {

    /* 影响 6 页（kefu / education / Prevent / webldsm / education industry）
       宽 100% 却还带 margin-left:15px，右边缘固定多出 15px */
    .education,
    .company-right,
    .s-c-right1 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        float: none !important;
    }

    /* download.html：横向排列的下载条目，左右各 91/130px 外边距 */
    .d-l,
    .d-l2-k {
        float: none !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }

    /* langlang.html：卡片左右各 24px 外边距 */
    .wz,
    .gn {
        float: none !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }

    /* biradar.html：产品列表按 2 列写死 780px（390×2），小屏改单列 */
    ul.Product,
    .Product {
        width: 100% !important;
    }

    .Product li,
    ul.Product li {
        float: none !important;
        width: 100% !important;
        margin: 0 0 8px 0 !important;
    }

    /* news.html：新闻标题栏内超长英文串/URL 不换行，撑到 1319px */
    .n-right a,
    .n-right p,
    .n-right span {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* ============================================================
   第十六层：两个需要改「布局模式」而非宽度的问题
   断点取 1024 而非 900：biradar.html 的列溢出现象在 940~1024px
   （iPad 横屏 / 小笔记本）同样存在，只压到 900 会漏掉这一档。
   ============================================================ */
@media (max-width: 1024px) {

    /* news.html：<a> 在原 CSS 里是 white-space:nowrap，
       单靠 word-break / overflow-wrap 一律无效（不换行就没有断点），
       必须先把 nowrap 改回 normal，文字才可能折行 */
    .n-right a,
    .n-right p,
    .n-right span {
        white-space: normal !important;
    }

    /* biradar.html：ul.Product 是 display:flex + flex-direction:column
       + flex-wrap:wrap。列方向下「换行」等于「另起一列」，容器高度不够时
       第 3、4 项直接排到 x=390 的第二列，表现为横向溢出。
       小屏必须禁止换列，并放开固定高度让它向下长。 */
    ul.Product,
    .Product {
        flex-wrap: nowrap !important;
        height: auto !important;
        max-height: none !important;
    }
}