/* ============================================================
   ii-vv.com 手机端响应式适配样式（新增文件）
   ------------------------------------------------------------
   · 本文件只做「覆盖」，不改动 style.css / index.css 原有样式
   · 必须在所有样式表之后加载（模板中已置于 head 末尾）
   · 断点参照主流设备：768px（平板竖屏以下）、480px（手机）
   ============================================================ */

/* ---------- 全局 ---------- */
@media (max-width: 768px) {

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        font-size: 14px;
    }

    /* 所有图片自适应，防止撑破容器 */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Bootstrap 容器收窄内边距 */
    .container {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 覆盖模板内联 style="padding: 0 60px" 等大内边距 */
    .container[style*="60px"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 区块大标题降级：f-30 / f-34-bold → 20px */
    .f-30,
    .f-34-bold {
        font-size: 20px !important;
        line-height: 1.5 !important;
    }

    /* 副标题降级 */
    .f-20 {
        font-size: 14px !important;
    }

    .f-18 {
        font-size: 14px !important;
    }

    .f-16 {
        font-size: 13px !important;
    }

    .subtitle-mg {
        margin-top: 8px !important;
    }

    .content-margint {
        margin-top: 20px !important;
    }

    .margin-tsix,
    .margin-tfive {
        margin-top: 30px !important;
    }

    /* ---------- 顶部导航 ---------- */
    .navbar {
        padding-top: 0 !important;
        min-height: 52px;
    }

    .navbar-header {
        padding: 6px 15px !important;
        float: left;
    }

    /* logo 等比缩小 */
    .navbar-header img {
        height: 34px !important;
        width: auto !important;
    }

    /* 汉堡按钮（Bootstrap 3 在 <768px 自动显示） */
    .navbar-toggle {
        display: block !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        margin-right: 10px !important;
        padding: 9px 10px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px;
        background: #fff !important;
        float: right;
    }

    .navbar-toggle .icon-bar {
        background: #286cec !important;
    }

    /* 展开后的下拉菜单 */
    .navbar-collapse {
        background: #fff;
        border-top: 1px solid #e8e8e8;
        box-shadow: 0 6px 12px rgba(0, 0, 0, .08);
        max-height: 70vh;
        overflow-y: auto;
    }

    /* 覆盖 .nav-ul 的 calc(100% - 220px) */
    .nav-ul {
        width: 100% !important;
        margin: 0 !important;
    }

    .navbar-nav {
        margin: 0 !important;
    }

    .navbar-nav > li {
        float: none !important;
        border-bottom: 1px solid #f5f5f5;
    }

    .navbar-nav > li:last-child {
        border-bottom: none;
    }

    .navbar-nav > li > a {
        padding: 12px 18px !important;
        line-height: 1.6 !important;
    }

    .nav-item-a {
        font-size: 15px !important;
    }

    /* 「解决方案」二级菜单在手机上直接展开，不用悬停 */
    .dropdown-custom .dropdown-menu {
        position: static !important;
        display: block !important;
        width: 100% !important;
        float: none !important;
        box-shadow: none !important;
        border: none !important;
        background: #f8f9fb !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dropdown-custom .dropdown-menu li a {
        padding: 10px 18px 10px 34px !important;
        font-size: 14px;
    }

    /* ---------- 首屏轮播 ---------- */
    #home-slider img {
        width: 100% !important;
        height: auto !important;
    }

    .sy-box {
        min-height: 0 !important;
    }

    /* 轮播「免费咨询」按钮：居中，避免定位到屏幕外 */
    .box-cont {
        left: 50% !important;
        top: 68% !important;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }

    .box-button.home-slider {
        padding: 8px 22px !important;
        font-size: 14px !important;
    }

    .box-button.home-slider .spanText {
        font-size: 14px !important;
    }

    /* ---------- 轮播下方数据条（5年/500+/30+…）---------- */
    /* 原为绝对定位悬浮，手机改为常规流式布局 */
    .banner-nav {
        position: static !important;
        margin-top: 12px;
    }

    .banner-nav .banner-nav-container {
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 0 !important;
    }

    /* 5 个数据卡：3 列换行 */
    /* 横幅数据条：覆盖 Bootstrap .row 负 margin，每行 2 项 */
    .banner-nav-container.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .banner-nav-container .b-item {
        width: 50% !important;
        float: left !important;
        margin-bottom: 10px;
    }

    .banner-nav-container .b-item h2 {
        font-size: 20px !important;
        margin: 0 0 2px !important;
    }

    .banner-nav-container .b-item span {
        font-size: 12px !important;
    }

    /* ---------- 服务图标区（原 8 列 → 4 列）---------- */
    .parenter-icon {
        padding: 24px 0 !important;
    }

    .parenter-icon .icon-item {
        width: 25% !important;
        margin-bottom: 14px;
    }

    .parenter-icon .icon-item img {
        height: 34px !important;
    }

    .parenter-icon .icon-item span,
    .parenter-icon .icon-item p,
    .parenter-icon .icon-item h4,
    .parenter-icon .icon-item h5 {
        font-size: 12px !important;
        line-height: 1.3 !important;
        word-break: keep-all !important;
    }

    /* ---------- 为什么选择我们（3 列 → 1 列）---------- */
    .choose-us-item {
        width: 100% !important;
        float: none !important;
        padding: 16px !important;
        margin-bottom: 16px;
        background: #f8f9fb;
        border-radius: 8px;
    }

    .choose-us-item .double-p {
        height: auto !important;
        min-height: 0 !important;
    }

    .choose-us-item h1 {
        font-size: 18px !important;
        margin: 0 0 10px !important;
    }

    /* ---------- 服务方案图标（原 5 列 → 2 列，消除文字竖排）---------- */
    .solution-item-content {
        display: block !important;
    }

    .solution-item-content a {
        width: 50% !important;
        float: left !important;
        border-bottom: 1px solid #e2e2e2 !important;
    }

    .solution-items {
        height: auto !important;
        padding: 20px 15px !important;
        border-left: none !important;
    }

    .solution-title .thu {
        height: 40px !important;
        width: auto !important;
    }

    .solution-title .acthu {
        display: none !important;
    }

    .under-zhong-solu p {
        display: inline-block !important;
        padding: 2px 6px !important;
        background: #f0f2f5;
        border-radius: 4px;
        margin: 0 4px 6px 0 !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .under-detail-solu {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-top: 8px !important;
    }

    /* ---------- 服务流程 / 优势区（6 项并排 → 2 列）---------- */
    .weus-under {
        flex-wrap: wrap !important;
        display: block !important;
    }

    .weus-under .under-item {
        width: 100% !important;
        margin-bottom: 14px;
    }

    .under-item .under-item-content {
        padding: 24px 16px !important;
    }

    .under-item .under-title h2 {
        font-size: 24px !important;
    }

    .under-item .under-title p {
        font-size: 15px !important;
    }

    .under-item .under-detail {
        font-size: 13px !important;
    }

    /* ---------- 行业解决方案（左侧竖排导航）---------- */
    /* 原 col-xs-2 / col-xs-10 在手机上过窄，改为上下结构 */
    .ver-types {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        margin-bottom: 16px;
    }

    .ver-types .ver-type {
        display: inline-block;
        padding: 6px 14px !important;
        margin: 0 8px 8px 0 !important;
        border: 1px solid rgba(255, 255, 255, .5);
        border-radius: 16px;
        font-size: 13px !important;
    }

    .type-detail {
        width: 100% !important;
    }

    /* 行业解决方案背景（原固定 800px 高）自适应 */
    .vertical-bg {
        height: auto !important;
        min-height: 0 !important;
        padding: 30px 0 !important;
    }

    /* ---------- 案例卡片 ---------- */
    .abscase2 {
        display: block !important;
    }

    .case-div-item {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .case-img img {
        width: 100% !important;
        height: auto !important;
    }

    .case-h4 {
        font-size: 16px !important;
    }

    .case-p {
        font-size: 13px !important;
    }

    /* ---------- 合作伙伴 logo（25% → 50%）---------- */
    .logo-content {
        padding: 24px 0 !important;
    }

    .logo-content .logo-item {
        width: 50% !important;
        margin-bottom: 12px;
    }

    /* ---------- 服务客户墙 ---------- */
    .cooprates-item-parent {
        width: 33.3% !important;
    }

    /* ---------- 底部联系区 / 页脚 ---------- */
    .concat,
    .process {
        padding: 30px 0 16px !important;
        background-size: cover !important;
    }

    .us {
        padding: 24px 0 !important;
        background-size: cover !important;
    }

    /* 页脚四个信息栏（原 col-xs-2 挤成一条 → 每行一个）*/
    .fourlian > [class*="col-"] {
        width: 100% !important;
        float: none !important;
        margin-bottom: 18px;
        text-align: center !important;
    }

    .fourlian .consulting img {
        height: 40px;
    }

    .fourlian h4 {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }

    .fourlian h5 {
        font-size: 13px !important;
        line-height: 2 !important;
    }

    /* 页脚顶部 4 个服务承诺（col-xs-3 → 每行 2 个）*/
    .intro {
        width: 50% !important;
        float: left !important;
        margin-bottom: 14px;
        font-size: 12px !important;
    }

    .intro img {
        height: 28px !important;
        width: auto !important;
    }

    /* 返回顶部按钮缩小 */
    #backtotop {
        font-size: 32px !important;
        bottom: 70px !important;
        right: 12px !important;
    }

    /* 覆盖竖排流程图等固定高度区块 */
    .process .row > [class*="col-"],
    .realy-bg .container {
        padding-left: 0;
        padding-right: 0;
    }

    .width100 {
        width: 100% !important;
    }
}

/* ============================================================
   小屏手机微调（≤480px，如 iPhone SE / 安卓小屏）
   ============================================================ */
@media (max-width: 480px) {

    /* 数据条 2 列布局，避免文字换行挤压 */
    .banner-nav-container .b-item {
        width: 33.3% !important;
    }

    /* 合作伙伴 logo 2 列 */
    .cooprates-item-parent {
        width: 50% !important;
    }

    /* 服务图标 2 列，留足文字空间 */
    .parenter-icon .icon-item {
        width: 50% !important;
    }

    /* 服务方案图标小屏改 1 列 */
    .solution-item-content a {
        width: 100% !important;
        float: none !important;
    }

    .navbar-header img {
        height: 30px !important;
    }
}

/* ============================================================
   平板适配（768px ~ 992px，轻度调整）
   ============================================================ */
@media (min-width: 768px) and (max-width: 992px) {

    .parenter-icon .icon-item {
        width: 25% !important;
    }

    .choose-us-item {
        width: 50% !important;
    }

    .logo-content .logo-item {
        width: 33.3% !important;
    }

    .fourlian > [class*="col-"] {
        width: 50% !important;
    }
}

/* ============================================================
   v2 新增：右侧悬浮咨询窗 → 手机端固定底部咨询栏
   ------------------------------------------------------------
   原样式为 fixed right:0 bottom:40% 宽 50px，手机端长期遮挡
   右侧内容；手机端改为通栏底部固定栏（在线咨询/微信/电话）。
   ============================================================ */
@media (max-width: 768px) {

    /* 给页面底部留出底栏高度，避免遮住页脚最后内容 */
    body {
        padding-bottom: calc(62px + constant(safe-area-inset-bottom)) !important;
        padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
    }

    /* 悬浮窗 → 通栏底部固定栏 */
    .consulting-modal {
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        display: flex !important;
        background: #fff !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .12) !important;
        z-index: 9999 !important;
        padding-bottom: constant(safe-area-inset-bottom) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    /* 三个按钮均分一行，图标 + 文字标签竖排 */
    .consulting-modal .con-item {
        flex: 1 1 0 !important;
        width: auto !important;
        height: 62px !important;
        float: none !important;
        flex-direction: column !important;
        -webkit-flex-direction: column !important;
        gap: 3px;
        cursor: pointer;
    }

    .consulting-modal .con-item .iconimg {
        width: 22px !important;
        height: 22px !important;
    }

    /* 文字标签（原结构无文字，用伪元素补上） */
    .consulting-modal .con-item::after {
        content: "在线咨询";
        font-size: 11px;
        line-height: 1;
        color: #fff;
    }

    .consulting-modal .con-item:nth-child(2)::after {
        content: "微信咨询";
    }

    .consulting-modal .con-item:nth-child(3)::after {
        content: "电话咨询";
    }

    /* 电话条目：隐藏横向展开的号码条，改为整块可点的透明热区 */
    .consulting-modal .con-item .phone-num {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        border: none !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
        line-height: 100 !important;
    }

    /* 微信二维码：禁用 hover 展开逻辑，改为点击弹出（配合模板 JS） */
    .consulting-modal .con-item .scanjpg {
        display: none !important;
    }

    .consulting-modal .con-item .scanjpg.m-show {
        display: block !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: 264px !important;
        height: 232px !important;
        transform: translate(-50%, -50%);
        z-index: 10000 !important;
        border-radius: 8px;
        box-shadow: 0 8px 40px rgba(0, 0, 0, .35) !important;
        animation: qrIn .25s ease;
    }

    @keyframes qrIn {
        from { opacity: 0; transform: translate(-50%, -46%) scale(.92); }
        to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    /* 二维码弹出时的暗色遮罩（由模板 JS 添加） */
    .qr-mask {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, .55);
        z-index: 9998;
    }

    /* 页面滚动到底部时底栏不与返回顶部按钮叠压 */
    #totop, .totop, .back-to-top {
        bottom: 78px !important;
    }
}