/* ============================================
   service.html 内容区域移动端自适应样式
   仅在 @media (max-width: 768px) 生效，不影响 PC 端
   导航栏和页脚的移动端样式由 /styles.css 统一处理
   ============================================ */

@media (max-width: 768px) {

    /* ---------- 基础容器 ---------- */
    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* 强制覆盖内联 <style> 中的 min-width: 1360px */
    html[style],
    body[style] {
        min-width: 0 !important;
    }

    /* ---------- Banner ---------- */
    .banner {
        margin-top: 48px !important;
        height: 240px !important;
        min-height: 240px !important;
        overflow: hidden !important;
    }

    .banner[style*="height: 749px"] {
        height: 240px !important;
    }

    .banner .swiper {
        height: 240px !important;
        overflow: hidden !important;
    }

    /* 重置 swiper-wrapper 桌面端 transform，显示第一张 */
    .banner .swiper-wrapper {
        transform: none !important;
        transition: none !important;
        height: 240px !important;
    }

    .banner .swiper-slide {
        width: 100% !important;
        height: 240px !important;
    }

    .banner .swiper-slide[style*="width"] {
        width: 100% !important;
    }

    .banner .item {
        width: 100% !important;
        height: 240px !important;
        background-size: cover !important;
        background-position: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 20px !important;
    }

    .banner .item[style*="background-size: 100%"] {
        background-size: cover !important;
    }

    /* 隐藏 swiper 导航按钮 */
    .banner .swiper-button-next,
    .banner .swiper-button-prev {
        display: none !important;
    }

    /* 隐藏播放按钮 */
    .banner .play,
    .banner .popup-video-btn {
        display: none !important;
    }

    .banner-title {
        font-size: 18px !important;
        margin: 0 0 6px !important;
    }

    .banner-title[style*="font-size: 48px"] {
        font-size: 18px !important;
    }

    .banner-content {
        font-size: 13px !important;
        line-height: 22px !important;
        margin: 0 !important;
    }

    .banner-content[style*="font-size: 32px"] {
        font-size: 13px !important;
        line-height: 22px !important;
    }

    .banner-content[style*="font-size: 28px"] {
        font-size: 12px !important;
        line-height: 20px !important;
    }

    .banner-content[style*="line-height: 60px"] {
        line-height: 22px !important;
    }

    .banner-content span[style*="font-size: 48px"] {
        font-size: 15px !important;
    }

    /* ---------- 主内容区 ---------- */
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* ---------- no1-section（固定 1600px → 自适应） ---------- */
    .no1-section {
        height: auto !important;
        min-height: auto !important;
        margin-top: 30px !important;
        margin-bottom: 0 !important;
        background-size: 100% auto !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        padding: 20px 0 40px !important;
    }

    .no1-section[style*="margin-top: 100px"] {
        margin-top: 30px !important;
    }

    .no1-section[style*="height: 1600px"],
    .no1-section[style*="height:1600px"] {
        height: auto !important;
    }

    .no1-container {
        width: 100% !important;
        height: auto !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    /* ---------- no1-header（大数字 + 标题） ---------- */
    .no1-header {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding-left: 0 !important;
        margin-top: 15px !important;
        margin-bottom: 0 !important;
    }

    .no1-header > div:first-child {
        font-size: 44px !important;
        line-height: 1 !important;
    }

    .no1-header > div:first-child[style*="font-size: 140px"] {
        font-size: 44px !important;
    }

    .no1-header > div:last-child {
        flex: 1;
        min-width: 0;
    }

    .no1-index {
        font-size: 12px !important;
        margin-bottom: 4px !important;
        line-height: 1.4 !important;
    }

    .no1-index span[style*="font-size: 34px"] {
        font-size: 14px !important;
    }

    .no1-index .sub {
        font-size: 12px !important;
    }

    .no1-title p {
        line-height: 1.4 !important;
        margin: 2px 0 !important;
    }

    .no1-title p[style*="font-size: 46px"] {
        font-size: 18px !important;
    }

    .no1-title p[style*="font-size: 34px"] {
        font-size: 14px !important;
    }

    .no1-title p[style*="font-size: 30px"] {
        font-size: 13px !important;
    }

    .no1-title p[style*="font-size: 26px"] {
        font-size: 11px !important;
    }

    /* ---------- no1-content（大 margin/padding → 流式） ---------- */
    .no1-content {
        margin-top: 25px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 覆盖内联 margin-top */
    .no1-content[style*="margin-top"] {
        margin-top: 25px !important;
    }

    .no1-content .content-1,
    .no1-content .content-2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
    }

    .no1-content .content-1 h3,
    .no1-content .content-2 h3 {
        font-size: 15px !important;
        min-width: auto !important;
        margin-bottom: 8px !important;
        margin-top: 0 !important;
    }

    .no1-content .content-1 .target,
    .no1-content .content-2 .list {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-bottom: 10px !important;
    }

    .no1-content .content-2 .list p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-bottom: 4px !important;
    }

    .no1-content .content-2 .list .small-text {
        font-size: 12px !important;
        padding-left: 12px !important;
        line-height: 1.5 !important;
        margin-bottom: 4px !important;
    }

    /* ---------- 全宽图片 section ---------- */
    section[style*="margin-top: 260px"] {
        margin-top: 30px !important;
    }

    section[style*="margin-top: 260px"] img {
        width: 100% !important;
    }

    /* ---------- 案例介绍 section ---------- */
    section[style*="max-width: 1425px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    section[style*="max-width: 1425px"] h2 {
        font-size: 16px !important;
    }

    section[style*="max-width: 1425px"] > div {
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    /* 上部：左文字+右图片 → 纵向 */
    section[style*="max-width: 1425px"] > div > div[style*="display: flex; gap: 40px"],
    section[style*="max-width: 1425px"] > div > div[style*="display: flex;gap: 40px"] {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: stretch !important;
    }

    section[style*="max-width: 1425px"] h3[style*="font-size:  32px"],
    section[style*="max-width: 1425px"] h3[style*="font-size: 32px"] {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    section[style*="max-width: 1425px"] p[style*="font-size: 26px"] {
        font-size: 12px !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
    }

    section[style*="max-width: 1425px"] img {
        max-width: 100% !important;
    }

    /* 左侧图片 margin-left: 20% → 居中 */
    section[style*="max-width: 1425px"] img[style*="margin-left: 20%"] {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 300px !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* 右侧图片 → 全宽 */
    section[style*="max-width: 1425px"] div[style*="width: 34%"] {
        width: 100% !important;
    }

    /* 底部图片行：负 margin + flex → 纵向 */
    section[style*="max-width: 1425px"] div[style*="margin-top: -9rem"] {
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 15px !important;
        align-items: stretch !important;
    }

    section[style*="max-width: 1425px"] div[style*="width: 35%"] {
        width: 100% !important;
    }

    section[style*="max-width: 1425px"] div[style*="flex: 1"] {
        width: 100% !important;
        flex: none !important;
    }

    /* 底部两张并排图片 → 各占 48% */
    section[style*="max-width: 1425px"] div[style*="display: flex; gap: 20px"] img,
    section[style*="max-width: 1425px"] div[style*="display: flex;gap: 20px"] img {
        width: 48% !important;
    }

    /* 案例文字段落 margin-bottom 重置 */
    section[style*="max-width: 1425px"] p[style*="margin-bottom: 50px"] {
        margin-bottom: 12px !important;
    }

    /* ---------- 卡片容器（4 卡片 flex → 纵向） ---------- */
    .container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 10px 15px !important;
        box-sizing: border-box !important;
        gap: 12px !important;
    }

    .card {
        flex: none !important;
        padding: 15px !important;
    }

    .title-box {
        font-size: 16px !important;
        padding: 6px 0 !important;
        margin-bottom: 8px !important;
    }

    .card .content {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    /* ---------- 中网充 section ---------- */
    section > div[style*="margin-top: 60px"] {
        margin-top: 20px !important;
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    section > div[style*="margin-top: 60px"] h3[style*="font-size: 32px"] {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }

    /* 顶部三栏 flex → 纵向 */
    section > div[style*="margin-top: 60px"] > div[style*="display: flex;gap: 20px"],
    section > div[style*="margin-top: 60px"] > div[style*="display: flex; gap: 20px"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    section > div[style*="margin-top: 60px"] > div[style*="display: flex;gap: 20px"] > div[style*="flex: 1"],
    section > div[style*="margin-top: 60px"] > div[style*="display: flex; gap: 20px"] > div[style*="flex: 1"] {
        width: 100% !important;
        flex: none !important;
    }

    /* 右侧 calc 宽度列 → 全宽 */
    section > div[style*="margin-top: 60px"] div[style*="width: calc(46%"] {
        width: 100% !important;
    }

    /* 两张并排小图 → 各 48% */
    section > div[style*="margin-top: 60px"] div[style*="display: flex;gap: 20px"] img[style*="width: calc(50% - 10px)"] {
        width: 48% !important;
    }

    /* 信息行：图标+文字 */
    section > div[style*="margin-top: 60px"] div[style*="display: flex;gap: 20px;align-items: center"] {
        gap: 10px !important;
    }

    section > div[style*="margin-top: 60px"] div[style*="display: flex;gap: 20px;align-items: center"] > div[style*="width: 30%"] {
        width: 40px !important;
        min-width: 40px !important;
    }

    section > div[style*="margin-top: 60px"] p[style*="font-size: 24px"] {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    /* ---------- 末尾大图 section ---------- */
    section[style*="margin: 80px auto"] {
        margin: 20px auto !important;
    }

    section[style*="margin: 80px auto"] > div {
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    /* ---------- 右侧浮动栏（移动端隐藏，由公共联系浮窗承担） ---------- */
    .right-box {
        display: none !important;
    }

    /* ---------- 旧页脚 ---------- */
    .footer-con-bg {
        padding: 10px 0 !important;
    }

    .footer-con {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        gap: 10px !important;
    }

    .footer-con-left,
    .footer-con-right {
        width: 100% !important;
    }

    .footer-con-right p,
    .footer-con-left p {
        font-size: 11px !important;
        line-height: 20px !important;
        text-align: left !important;
    }

    /* ---------- 通用：强制覆盖内联 <style> 的 section min-width: 1360px ---------- */
    section,
    section[style],
    .main-content > section,
    .main-content > section[style] {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* ---------- 通用：防止图片溢出 ---------- */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

}

/* 超小屏幕（≤480px）进一步压缩 */
@media (max-width: 480px) {
    .banner {
        height: 200px !important;
        min-height: 200px !important;
    }

    .banner .swiper,
    .banner .swiper-wrapper,
    .banner .swiper-slide,
    .banner .item {
        height: 200px !important;
    }

    .banner-title,
    .banner-title[style*="font-size: 48px"] {
        font-size: 15px !important;
    }

    .banner-content,
    .banner-content[style*="font-size: 32px"],
    .banner-content[style*="font-size: 28px"] {
        font-size: 11px !important;
    }

    .no1-header > div:first-child,
    .no1-header > div:first-child[style*="font-size: 140px"] {
        font-size: 36px !important;
    }

    .no1-title p[style*="font-size: 46px"] {
        font-size: 16px !important;
    }

    .no1-title p[style*="font-size: 34px"] {
        font-size: 13px !important;
    }
}