/* ============================================================
   mobile.css - 移动端访问优化
   仅在媒体查询断点内生效，桌面端(≥992px)零影响
   注意：必须放在 main.css 与各页面 css 之后引入，
   依赖加载顺序覆盖 main.css 中的旧规则
   ============================================================ */

/* ---------- 通用：导航栏（小屏保留"免费试用"转化入口） ---------- */
@media only screen and (max-width:767px) {
    .navbar-toggler {
        position: static;
        margin-left: auto
    }

    .header-btn {
        display: flex;
        margin: 0 0 0 12px
    }

    .header-btn .login-btn {
        display: none
    }

    .header-btn .main-btn {
        padding: 8px 14px;
        font-size: 14px
    }

    .navbar-nav .nav-item a {
        padding: 14px 0
    }
}

/* ---------- 首页：首屏 banner ---------- */
@media only screen and (max-width:767px) {
    .box1 {
        height: auto;
        min-height: 520px;
        padding-top: 74px;
        display: flex;
        flex-direction: column
    }

    .box1 .bg-wrap {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }

    .box1 .bg-img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .box1 .min-box {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        width: 88%;
        height: auto;
        margin: 36px auto 48px;
        padding: 26px 0 32px;
        background-size: cover
    }

    .box1 .main-content h1 {
        font-size: 26px;
        line-height: 1.5;
        margin: 6px 0 0;
        transform: none
    }

    .box1 .service-content {
        flex-wrap: wrap;
        font-size: 14px;
        line-height: 1.8;
        margin: 26px 0 30px
    }

    .box1 .service-content .service-item {
        padding-right: 8px;
        margin-right: 8px
    }
}

/* ---------- 首页：区块标题与功能/行业网格 ---------- */
@media only screen and (max-width:767px) {
    .sectionWrapper {
        margin: 20px 0
    }

    .sectionWrapper .titleView {
        font-size: 22px;
        margin-bottom: 14px
    }

    .sectionWrapper .sectionContent.row {
        margin-left: 0;
        margin-right: 0;
        row-gap: 6px
    }

    .sectionWrapper .sectionContent.row>.col-xxl-2 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%
    }

    .sectionWrapper .sectionContent.row>.col-xxl-3 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .sectionWrapper .sectionContent.row>.col-xxl-4 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .sectionWrapper .sectionContent .itemView {
        margin-bottom: 10px;
        padding-bottom: 10px
    }

    /* 覆盖 HTML 内联的 margin-top:66px（桌面端用于左右列对齐，单列布局下不需要） */
    .sectionWrapper .sectionContent .itemView[style*="margin-top"] {
        margin-top: 0 !important
    }

    .sectionWrapper .sectionContent .itemView .title {
        font-size: 18px;
        line-height: 1.8
    }

    .sectionWrapper .sectionContent .itemView .text {
        font-size: 14px
    }

    .sectionWrapper .sectionContent .itemView .industryImg {
        width: 100%;
        height: auto;
        max-width: 246px
    }

    /* 定制版 bootstrap 未包含 img { max-width:100% } 兜底，
       约束品牌客户大图等裸 img，避免固有宽度撑出横向溢出 */
    .sectionWrapper .sectionContent .itemView img {
        max-width: 100%;
        height: auto
    }
}

/* ---------- 下载页 ---------- */
/* 堆叠布局（≤991）下 .down-btn 为块级元素，需 margin auto 水平居中 */
@media only screen and (max-width:991px) {
    .download-content .down-btn {
        margin-left: auto;
        margin-right: auto
    }
}

@media only screen and (max-width:767px) {
    .download-content .title {
        font-size: 26px
    }

    .download-content .desc {
        font-size: 14px;
        margin: 14px 0 40px
    }

    .download-content .qr-img {
        width: 200px;
        height: 200px
    }

    .download-content .down-btn {
        width: 210px;
        font-size: 16px
    }

    /* 归零 .row 负 gutter，避免容器内无 col 类时左右溢出 */
    .download-content .row {
        margin-left: 0;
        margin-right: 0
    }
}

/* ---------- 关于页（原样式全为固定宽度，需整体适配） ---------- */
@media only screen and (max-width:1199px) {
    .aboutContainer .contentWrapper {
        width: 100%
    }

    .aboutContainer .intro-head {
        width: 100%
    }
}

@media only screen and (max-width:991px) {
    .aboutContainer {
        padding-top: 86px
    }

    .aboutContainer .contentWrapper {
        padding: 0 16px
    }

    .aboutContainer .containerItem-we {
        margin-top: 56px
    }

    .aboutContainer .siteItem-left,
    .aboutContainer .siteItem-right {
        width: 100%
    }

    .aboutContainer .we-contactItems li {
        margin-right: 28px;
        margin-bottom: 10px
    }

    .aboutContainer .we-content {
        padding: 0 12px
    }
}

/* ---------- 页脚 ---------- */
@media only screen and (max-width:767px) {
    .footerContainer .footer-main {
        padding: 40px 6% 0
    }
}

@media only screen and (max-width:575px) {
    .footerContainer .footer-main .row>.col-3 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .footerContainer .footer-main h5 {
        font-size: 15px;
        margin-bottom: 12px !important
    }

    .footerContainer .wxMpQrCodeImg {
        width: 100px;
        height: 100px
    }
}

/* ---------- iPhone 底部安全区 ---------- */
@supports (padding: max(0px)) {
    .scroll-top {
        bottom: calc(30px + env(safe-area-inset-bottom))
    }

    .footerContainer>.container {
        padding-bottom: env(safe-area-inset-bottom)
    }
}