.nav-menu{
            font-size: 1.3rem;
        }
         .meta-item span{
            color:#666 !important;   
        }
        .navbar{
            background:rgba(255,255,255,0) !important;
        }
        
        .navbar2{
            background: linear-gradient(89deg, #7f12ad, #2e07a0) !important;
            clip-path: inset(100% 0 0 0);
            animation: slideClip 1s ease forwards;
        }
        
        @keyframes slideClip {
            0% {
                clip-path: inset(100% 0 0 0);
            }
            100% {
                clip-path: inset(0 0 0 0);
            }
        }
           
             /* 确保 body 可以正确使用 top 属性 */
        body {
            position: relative;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            overflow-x: hidden;
        }
        body.xxbody {
            position: relative;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            overflow-x: hidden;
            will-change: transform; /* 优化性能 */
            transform: translateY(0); /* 初始位置 */
        }
        /* 可选：添加一个包装器来处理可能的空白 */
        .content-wrapper {
            position: relative;
            width: 100%;
        }
        /* 父容器样式 */
        .hero-container {
            position: relative;
            height: 100vh;  /* 或者根据需要设置 */
            overflow: hidden;  /* 防止出现空白 */
        }
        
        /* hero 元素样式 */
        .hero {
            position: relative;  /* 或 absolute */
            width: 100vw;
            top: 0;
            left: 0;
            margin-top:0;
            transition: 1s cubic-bezier(0.4, 0, 0.2, 1);
            height:100vh;
            /* 移除之前的 transform 相关样式 */
        }
        
        /* 当 hero 处于负top状态时 */
        .hero.top-negative {
            top: -100vh;
        }
        .nav-container a{
            color:#fff;
        }
        
        .xxshow{
            top:0 !important;
        }
        
        .xxbody0{
            display: block;
            position: fixed;
            top: 0;
            z-index: 1;
            transition:1s;
        }
        
        .xxbody{
            position: fixed;
            top: 100vh;
            transition: 1s;
            z-index: 222;
            height: 100vh;
            width:100vw;
            overflow-y: auto;
            overflow-x: hidden;
            transition:1s;
        }
        
        /* 包装所有 item 的滑动条 —— JS 动态控制 transform */
        .banner-slider {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.3s ease-out;  /* 滑动过渡 */
            cursor: grab;
        }
        
        .banner-slider:active {
            cursor: grabbing;
        }
        
        .xxbanner{
            height: 100vh;
            position: relative;
            width:100vw;
        }
        /* 每一个 item 占满整个视口，flex-shrink:0 保证一行排列 */
        .xxbanner .item {
            flex: 0 0 100vw;
            height: 100vh;
            position: relative;
            user-select: none;          /* 拖动时禁止选中图片 */
            pointer-events: auto;        /* 链接可点 */
        }

        .xxbanner .item a {
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
        }

        .xxbanner .item img {
            display: block;
            width: 100vw;
            height: 100vh;              /* 与内联样式保持一致 */
            object-fit: cover;           /* 保证图片覆盖区域不变形 */
            pointer-events: none;        /* 避免拖动时误触图片拖拽 */
        }

        /* 左右箭头导航 */
        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            background: rgba(0,0,0,0.35);
            backdrop-filter: blur(4px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 28px;
            font-weight: 300;
            cursor: pointer;
            z-index: 20;
            transition: background 0.2s;
            user-select: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        .arrow:hover {
            background: rgba(0,0,0,0.7);
        }

        .arrow-left {
            left: 20px;
        }

        .arrow-right {
            right: 20px;
        }

        /* 指示点 (dots) */
        .dots {
            position: absolute;
            bottom: 24px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 12px;
            z-index: 20;
            pointer-events: none;        /* 让点击可以穿透到图片，但点本身还是要可点，所以单独设置子元素 */
        }

        .dots span {
            width: 8px;
            height: 8px;
            border-radius: 20px;
            background: rgba(255,255,255,0.5);
            transition: all 0.3s;
            cursor: pointer;
            pointer-events: auto;        /* 允许点击指示点 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .dots span.active {
            width: 24px;
            background: white;
        }

        /* 兼容移动端触摸区域 */
        @media (max-width: 768px) {
            .arrow {
                width: 36px;
                height: 36px;
                font-size: 24px;
            }
            .arrow-left { left: 8px; }
            .arrow-right { right: 8px; }
            .dots { bottom: 16px; }
        }