/* Swiper容器的样式 */
        .swiper-container {
            width: 100%; /* 容器宽度 */
            height: 350px; /* 容器高度 */
            border-radius: 15px; /* 设置圆角 */
            margin-top: 15px;
            left: 50%; /* 水平居中 */
            transform: translateX(-50%); /* 通过平移实现水平居中 */
            position: relative; /* 相对定位 */
            overflow: hidden; /* 溢出内容隐藏 */
        }

        /* 每个Swiper幻灯片的样式 */
        .swiper-slide {
            width: 100%; /* 宽度占满父容器 */
            height: 100%; /* 高度占满父容器 */
          /*text-align: center;*/ /* 文本居中 */
          /*font-size: 18px;*/ /* 设置字体大小 */
            background: #fff; /* 背景颜色为白色 */
            overflow: hidden; /* 溢出内容隐藏 */
        }

        /* 幻灯片内部容器的样式 */
        .slide-inner {
            width: 100%; /* 宽度占满父容器 */
            height: 100%; /* 高度占满父容器 */
            background-size: cover; /* 背景图片覆盖整个容器 */
            background-position: center; /* 背景图片居中 */
            display: flex; /* 使用flex布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            color: #fff; /* 文字颜色为白色 */
        }

        /* 分页器的样式 */
        .swiper-pagination {
            bottom: -30px !important; /* 分页器初始位置在容器下方30px处 */
            left: 50% !important; /* 水平居中 */
            transform: translateX(-50%); /* 通过平移实现水平居中 */
            position: absolute; /* 绝对定位 */
            z-index: 10; /* 设置层级，确保分页器在最上层 */
            display: flex; /* 使用flex布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            transition: bottom 0.3s ease; /* 添加过渡动画，当bottom属性变化时会有0.3秒的过渡效果 */
        }

        /* 分页器小圆点的样式 */
        .swiper-pagination-bullet {
            width: 10px; /* 小圆点的宽度 */
            height: 2px; /* 小圆点的高度 */
            background-color: rgba(255, 255, 255, 0.5); /* 背景颜色为半透明白色 */
            opacity: 1; /* 不透明度为1（完全不透明） */
            margin: 0 5px; /* 左右间距为5px */
            border-radius: 0.2px; /* 设置为圆形 */
            cursor: pointer; /* 鼠标悬停时显示为手型 */
        }

        /* 当前激活的分页器小圆点的样式 */
        .swiper-pagination-bullet-active {
            background-color: white; /* 背景颜色为白色 */
        }

        /* 导航按钮的样式 */
        .swiper-button-next,
        .swiper-button-prev {
            top: 50%; /* 垂直居中 */
            transform: translateY(5%); /* 通过平移实现垂直居中 */
            width: 30px; /* 按钮宽度 */
            height: 30px; /* 按钮高度 */
            background-color: rgba(0, 0, 0, 0.5); /* 背景颜色为半透明黑色 */
            border-radius: 50%; /* 设置为圆形 */
            color: white; /* 文字颜色为白色 */
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            z-index: 10; /* 设置层级 */
            opacity: 1; /* 不透明度为1（完全不透明） */
            transition: all 0.3s ease; /* 添加过渡动画，所有属性变化时会有0.3秒的过渡效果 */
        }

        /* 下一个按钮的初始隐藏位置和过渡效果 */
        .swiper-button-next {
            right: -40px; /* 初始隐藏位置，位于容器右侧40px处 */
            transition: right 0.3s ease; /* 当right属性变化时会有0.3秒的过渡效果 */
        }

        /* 上一个按钮的初始隐藏位置和过渡效果 */
        .swiper-button-prev {
            left: -40px; /* 初始隐藏位置，位于容器左侧40px处 */
            transition: left 0.3s ease; /* 当left属性变化时会有0.3秒的过渡效果 */
        }

        /* 导航按钮图标的样式 */
        .swiper-button-next::after,
        .swiper-button-prev::after {
            font-size: 15px; /* 设置图标字体大小 */
        }

        /* 鼠标悬停时显示导航按钮和分页器 */
        .swiper-container:hover .swiper-button-next {
            right: 5px; /* 鼠标悬停时，下一个按钮显示在容器右侧5px处 */
        }

        .swiper-container:hover .swiper-button-prev {
            left: 5px; /* 鼠标悬停时，上一个按钮显示在容器左侧5px处 */
        }

        .swiper-container:hover .swiper-pagination {
            bottom: 10px !important; /* 鼠标悬停时，分页器显示在容器底部10px处 */
        }

        /* 手机端样式 */
        @media only screen and (max-width: 768px) {
            .swiper-container { height: 200px; border-radius: 10px; }
        }