@charset "utf-8";
/* ==========================================================================
   用友BIP 智能体团队（.yybip）—— 响应式适配
   仅作用于 index.html 中的 <section class="yybip">，不影响其它页面/模块
   断点：>1200 保持原样 / ≤1199 容器自适应 + tab 横向滚动 / ≤767 手机端
   ========================================================================== */

/* ---------------- ≤1199：容器自适应、tab 横向滚动、卡片流式 ---------------- */
@media screen and (max-width: 1199px) {

    /* 1. 容器：1200px 固定宽 → 全宽 */
    .yybip {
        overflow-x: hidden;
    }

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

    .yybip .mk-autoweb-image-block {
        min-height: 0;
        padding-bottom: 40px;
    }

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

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

    /* 3. tab 导航：11 个页签横向滑动，切换逻辑不变 */
    .yybip .mk-autoweb-image-block-nav {
        margin: 12px 0 18px;
        overflow: hidden;
        border-bottom-color: #e6e6e6;
    }

    .yybip .mk-autoweb-image-block-nav ul {
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
    }

    .yybip .mk-autoweb-image-block-nav ul::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .yybip .mk-autoweb-image-block-nav li {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 2px 16px 14px !important;
        font-size: 15px;
        line-height: 1.4;
        white-space: nowrap;
    }

    /* 原样式里 ::after 缺 content，选中态下划线一直不显示，这里补上 */
    .yybip .mk-autoweb-image-block-nav li::after {
        content: "";
    }

    /* 4. 卡片：改为「图片在上、文字在下」的流式布局，高度自适应 */
    .yybip .index-changjing-box .image-up-text-down li {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        width: calc(25% - 15px);
        min-width: 0;
        height: auto;
        margin: 0 20px 20px 0;
        padding: 0;
        background: #fff;
        border-radius: 6px;
        overflow: hidden;
        -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    }

    .yybip .index-changjing-box .image-up-text-down li:nth-child(4n) {
        margin-right: 0;
    }

    .yybip .index-changjing-box .image-up-text-down li .image-block-img {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        /* 原图比例并不完全一致，锁定比例避免同一行卡片高低不齐 */
        aspect-ratio: 478 / 257;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .yybip .index-changjing-box .image-up-text-down li .image-block-info {
        position: static;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        height: auto;
        padding: 10px 14px 12px;
        margin: 0;
        overflow: visible;
    }

    /* 标题位原本是空的 &nbsp; 占位，隐藏掉省空间 */
    .yybip .index-changjing-box .image-up-text-down li .image-block-info .image-block-info-title {
        display: none;
    }

    .yybip .index-changjing-box .image-up-text-down li .image-block-info .image-block-info-desc {
        margin: 0;
        height: auto;
        min-height: 0;
        font-size: 14px;
        line-height: 1.5;
        color: #333;
        -webkit-line-clamp: 2;
        white-space: normal;
    }

    /* 按钮沉底，同一行卡片的按钮自动对齐 */
    .yybip .index-changjing-box .image-up-text-down li .image-block-info .image-block-info-btn {
        margin-top: auto;
        padding-top: 8px;
        text-align: left;
    }

    .yybip .index-changjing-box .image-up-text-down li .image-block-info .image-block-info-btn a {
        padding: 4px 10px;
        font-size: 13px;
    }

    /* 5. 翻页条：从绝对定位改为常规流，避免压住卡片 */
    .yybip .index-changjing-box .image-up-text-down {
        padding-bottom: 4px;
    }

    .yybip .swiper-caozuo {
        position: static;
        max-height: none;
        margin: 6px 0 0;
    }

    .yybip .index-changjing-box .image-up-text-down .swiper-pagination {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        margin: 0 18px;
    }

    .yybip .index-changjing-box .image-up-text-down .mk-autoweb-image-swiper-button-prev,
    .yybip .index-changjing-box .image-up-text-down .mk-autoweb-image-swiper-button-next {
        width: 28px;
        height: 28px;
        -webkit-flex: 0 0 28px;
        flex: 0 0 28px;
    }
}

/* ---------------- ≤991：平板，3 列 ---------------- */
@media screen and (max-width: 991px) {
    .yybip .mk-autoweb-module-title {
        font-size: 22px;
    }

    .yybip .index-changjing-box .image-up-text-down li {
        width: calc(33.3333% - 13.3333px);
    }

    .yybip .index-changjing-box .image-up-text-down li:nth-child(4n) {
        margin-right: 20px;
    }

    .yybip .index-changjing-box .image-up-text-down li:nth-child(3n) {
        margin-right: 0;
    }
}

/* ---------------- ≤767：手机端 ---------------- */
@media screen and (max-width: 767px) {
    .yybip .w1200 {
        padding: 0 14px;
    }

    .yybip .mk-autoweb-image-block {
        padding-bottom: 30px;
        background-position: 100% 100% !important;
    }

    /* 标题 */
    .yybip .mk-autoweb-module-title {
        font-size: 19px;
        line-height: 1.5;
        letter-spacing: .5px;
        padding: 24px 0 8px;
    }

    .yybip .mk-autoweb-module-subtitle {
        font-size: 13px;
        line-height: 1.6;
        padding: 0 0 10px;
    }

    /* tab：紧凑 + 可滑动 + 下划线指示器 */
    .yybip .mk-autoweb-image-block-nav {
        margin: 6px 0 16px;
    }

    .yybip .mk-autoweb-image-block-nav li {
        padding: 0 14px 10px !important;
        font-size: 14px;
    }

    .yybip .mk-autoweb-image-block-nav li::after {
        height: 3px;
    }

    /* 卡片：2 列 */
    .yybip .index-changjing-box .image-up-text-down li {
        width: calc(50% - 5px);
        margin: 0 10px 10px 0;
        border-radius: 5px;
    }

    .yybip .index-changjing-box .image-up-text-down li:nth-child(4n) {
        margin-right: 10px;
    }

    .yybip .index-changjing-box .image-up-text-down li:nth-child(3n) {
        margin-right: 10px;
    }

    .yybip .index-changjing-box .image-up-text-down li:nth-child(2n) {
        margin-right: 0;
    }

    .yybip .index-changjing-box .image-up-text-down li .image-block-info {
        padding: 8px 10px 10px;
    }

    .yybip .index-changjing-box .image-up-text-down li .image-block-info .image-block-info-desc {
        font-size: 13px;
        line-height: 1.45;
    }

    .yybip .index-changjing-box .image-up-text-down li .image-block-info .image-block-info-btn {
        padding-top: 6px;
    }

    .yybip .index-changjing-box .image-up-text-down li .image-block-info .image-block-info-btn a {
        padding: 3px 8px;
        font-size: 12px;
    }

    /* 翻页条 */
    .yybip .index-changjing-box .image-up-text-down .swiper-pagination {
        margin: 0 14px;
    }

    .yybip .index-changjing-box .image-up-text-down .mk-autoweb-image-swiper-button-prev,
    .yybip .index-changjing-box .image-up-text-down .mk-autoweb-image-swiper-button-next {
        width: 26px;
        height: 26px;
        -webkit-flex: 0 0 26px;
        flex: 0 0 26px;
    }

    .yybip .index-changjing-box .image-up-text-down .mk-autoweb-image-swiper-button-prev:after,
    .yybip .index-changjing-box .image-up-text-down .mk-autoweb-image-swiper-button-next:after {
        font-size: 12px;
    }
}