﻿

<!-- 视频案例展示模块 - 增大顶部间距版 -->
<style>
    /* 核心重置+命名空间隔离（精简重复样式） */
    .video-case-module {
        width: 1200px;
        margin-top: 60px; /* 关键修改：顶部边距从40px改为60px */
        padding: 0 20px;
        font-family:"Microsoft Yahei", sans-serif;
    }
    .video-case-module * {
        margin:0; padding:0; box-sizing:border-box;
        list-style:none; text-decoration:none;
    }

    /* 标签栏（核心：大幅缩减顶部间距） */
    .video-case-module .tab-nav-wrapper {
        text-align:center;
        margin: 0 0 15px; /* 关键：删除顶部20px margin，仅保留底部15px */
        padding-top: 0; /* 关键：删除顶部20px padding */
    }
    .video-case-module .tab-nav {
        display:inline-flex;
        border-radius:16px;
        padding:8px;
        gap:12px;
        border:none;
    }
    .video-case-module .tab-nav li {
        padding:10px 32px;
        cursor:pointer;
        color:#e2e8f0;
        font-size:16px;
        border-radius:3px;
        transition:all .2s ease;
        background:rgba(148, 163, 184, 0.1);
    }
    .video-case-module .tab-nav li.on {
        color:#ffffff;
        background:#0088cc;
        font-weight:600;
    }
    .video-case-module .tab-nav li:hover:not(.on) {

        background:rgba(148, 163, 184, 0.2);
        transform: translateY(-2px);
    }

    /* 案例区域（样式不变） */
.video-case-module .case-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    row-gap: 20px; /* 仅上下间距设为20px（可按需调整，比如25px/30px） */
    column-gap: 15px; /* 左右间距保留原有10px */
    margin-bottom:30px;
    width: 100%;
}
    .video-case-module .case-item {
        background:rgba(148, 163, 184, 0.1);
        border-radius:3px;
        overflow:hidden;
        border:1px solid #f0f4f9;
        transition:transform .2s ease;
    }
    .video-case-module .case-item:hover {
        transform: translateY(-4px);
 
    }
    .video-case-module .case-item img {
        width:100%;
        height: 168px;
        object-fit:cover;
        display:block;
        border-radius:3px;
        transition:opacity .2s ease;
    }
    .video-case-module .case-item:hover img {
        opacity: 0.95;
    }
.video-case-module .case-title {
    padding:12px 15px;
    color:#fff;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    /* 新增文本居中样式 */
    text-align: center;
}

    /* 更多链接（样式不变） */
    .video-case-module .more-case-container {
        text-align:center;
        margin-top:10px;
    }
    .video-case-module .more-case-link {
        display:inline-block;
        width:390px;
        padding:12px 24px;
        background:#0088cc;
        color:#ffffff;
        border-radius:3px;
        font-size:16px;
        font-weight:600;
        text-align:center;
        transition:all .2s ease;
    }
    .video-case-module .more-case-link:hover {

        transform: translateY(-2px);

    }

    /* 面板切换（极简） */
    .video-case-module .case-panel {display:none;}
    .video-case-module .case-panel.active {display:block;}

    /* 响应式适配（样式不变） */
    @media (max-width:1200px) {
        .video-case-module {
            width: 100% !important;
            padding: 0 15px;
            margin-top: 60px; /* 响应式下同步增大顶部间距 */
        }
        .video-case-module .tab-nav {width:100%;flex-wrap:wrap;padding:6px;}
        .video-case-module .tab-nav li {padding:12px 18px;font-size:14px;flex:1;min-width:90px;text-align:center;}
        .video-case-module .case-grid {grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap: 8px;}
        .video-case-module .case-item img {height: 157px;}
        .video-case-module .more-case-link {width:100%;max-width:600px;font-size:15px;}
    }
    @media (max-width: 768px) {
        .video-case-module .case-grid {grid-template-columns: 1fr;}
        .video-case-module .case-item img {height: auto;min-height: 200px;}
    }
</style>