@charset "utf-8";
/* ==========================================================================
   融合端到端价值链（.bips2p）—— 响应式适配
   仅作用于 index.html 中的 <section class="bips2p">，不影响其它页面/模块
   桌面端原布局：左侧竖排页签（130~280px）+ 右侧内容卡
   移动端改为：页签横向滚动在上，内容卡在下（切换逻辑完全复用原脚本）
   断点：>1199 保持原样 / ≤1199 容器自适应 + 页签横向 / ≤767 手机端
   ========================================================================== */

/* ---------------- ≤1199：容器自适应、页签横向、内容卡全宽 ---------------- */
@media screen and (max-width: 1199px) {

    /* 1. 区块与容器 */
    .bips2p {
        overflow-x: hidden;
    }

    .bips2p .w1200 {
        width: 100%;
        max-width: 1200px;
        padding: 0 20px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    /* 背景图原本是 100% 100% 强拉伸，手机上会严重变形，改为等比铺满 */
    .bips2p .mk-autoweb-image-video-text {
        min-height: 0;
        background-size: cover !important;
        padding-bottom: 40px;
    }

    /* 2. 标题 */
    .bips2p .mk-autoweb-module-title {
        font-size: 26px;
        line-height: 1.4;
        letter-spacing: 1px;
        padding: 32px 0 12px;
    }

    .bips2p .mk-autoweb-module-subtitle {
        font-size: 15px;
        padding: 0 0 12px;
    }

    /* 3. 外层由「左右两栏 flex」改成「上下两块」 */
    .bips2p .mk-autoweb-image-video-tab {
        display: block;
        width: 100%;
        margin-top: 8px;
    }

    /* 4. 页签：竖排 → 横向滚动条，样式对齐上面「智能体团队」区块 */
    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-nav {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0 0 18px;
        border: 0;
    }

    /* 原来的上下滚动箭头是给竖排用的，横排后没有意义 */
    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-nav .text-icon {
        display: none !important;
    }

    .bips2p .mk-autoweb-image-video-text-nav .nav-ul {
        height: auto !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-bottom: 1px solid #e6e6e6;
    }

    .bips2p .mk-autoweb-image-video-text-nav .nav-ul::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-nav ul {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        min-width: 100%;
    }

    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-nav li {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        position: relative;
        width: auto !important;
        height: auto !important;
        margin: 0 28px 0 0 !important;
        padding: 2px 0 13px !important;
        font-size: 15px;
        line-height: 1.4;
        white-space: nowrap;
        text-align: center;
        text-overflow: clip;
        overflow: visible;
        background: none !important;
        color: #707070;
    }

    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-nav li:last-child {
        margin-right: 0 !important;
    }

    /* 选中态：去掉原来的红色渐变块，改用红色文字 + 红色下划线（和上面区块一致） */
    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-nav li.open {
        color: #f8000c;
        background: none !important;
        font-weight: bold;
    }

    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-nav li::after {
        content: "";
        display: block !important;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 3px;
        border-radius: 2px;
        background: transparent;
    }

    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-nav li.open::after {
        background: #f8000c;
    }

    /* 5. 内容卡：占满整行 */
    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-right {
        width: 100%;
        padding: 0 0 24px;
        border-radius: 8px;
        overflow: hidden;
    }

    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-content-tab {
        margin-right: 0;
    }

    /* 内容区原本上下各 20px 留白，手机上让图片直接贴住卡片上边缘 */
    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-content {
        padding: 0 0 16px;
    }

    /* 图片：原来是死的 300px 高 + 强制拉满宽度，改成按原图比例（1000×360）缩放 */
    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-content-img img {
        width: 100%;
        height: auto;
        aspect-ratio: 1000 / 360;
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
    }

    .bips2p .mk-autoweb-image-video-text-content h4 {
        font-size: 20px;
        line-height: 1.4;
        margin: 18px 16px 12px;
    }

    .bips2p .mk-autoweb-image-video-text-content p {
        font-size: 14px;
        line-height: 1.7;
        margin: 0 16px 18px;
    }

    /* 按钮：原本绝对定位在卡片右下角外，手机上改为跟随文字流 */
    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-content-text .mk-ldy-btn {
        position: static;
        display: inline-block;
        margin: 0 16px 4px;
        height: 34px;
        line-height: 34px;
        padding: 0 18px;
        font-size: 13px;
        border-radius: 4px;
    }
}

/* ---------------- ≤767：手机端收紧间距与字号 ---------------- */
@media screen and (max-width: 767px) {

    .bips2p .w1200 {
        padding: 0 16px;
    }

    .bips2p .mk-autoweb-image-video-text {
        padding-bottom: 32px;
    }

    .bips2p .mk-autoweb-module-title {
        font-size: 19px;
        line-height: 1.45;
        letter-spacing: 0;
        padding: 26px 0 8px;
    }

    .bips2p .mk-autoweb-module-subtitle {
        font-size: 13px;
    }

    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-nav li {
        margin-right: 22px !important;
        padding: 2px 0 11px !important;
        font-size: 14px;
    }

    .bips2p .mk-autoweb-image-video-text-content h4 {
        font-size: 17px;
        margin: 14px 13px 8px;
    }

    .bips2p .mk-autoweb-image-video-text-content p {
        font-size: 13px;
        line-height: 1.7;
        margin: 0 13px 14px;
    }

    .bips2p .mk-autoweb-image-video-tab .mk-autoweb-image-video-text-content-text .mk-ldy-btn {
        margin: 0 13px 2px;
    }
}