#banner img {
   width: 100%;
   height: auto;
 }

 body {
   background: #eee;
   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
   font-size: 14px;
   color: #000;
   margin: 0;
   padding: 0;
 }

 .swiper {
   width: 100%;
   height: 100%;
   margin-top: 0px!important;
 }

 .swiper-slide {
   text-align: center;
   font-size: 18px;
   background: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .swiper-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .autoplay-progress {
   position: absolute;
   right: 16px;
   bottom: 16px;
   z-index: 10;
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   color: var(--swiper-theme-color);
 }

 .autoplay-progress svg {
   --progress: 0;
   position: absolute;
   left: 0;
   top: 0px;
   z-index: 10;
   width: 100%;
   height: 100%;
   stroke-width: 4px;
   stroke: var(--swiper-theme-color);
   fill: none;
   stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
   stroke-dasharray: 125.6;
   transform: rotate(-90deg);



 }

 .swiper {
   height: auto !important
 }

 .swiper-wrapper {
   height: auto !important;

 }





 @media screen and (min-width: 769px) {
   .swiper-pagination-bullet {
     width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 70px));
     height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
     display: inline-block;
     border-radius: var(--swiper-pagination-bullet-border-radius, 0%);
     background: var(--swiper-pagination-bullet-inactive-color, #000);
     opacity: var(--swiper-pagination-bullet-inactive-opacity, 1);
     background: #fca819;
     box-sizing: border-box;

   }


   .swiper-pagination-bullet-active {
     opacity: var(--swiper-pagination-bullet-opacity, 1);
     background: #028e73;
   }

   .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
     margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 10px);
   }

   /* 移动端样式保持原样 */
   @media screen and (max-width: 768px) {
    .swiper-wrapper {
      height: auto !important;
   
      transition-duration: 0ms;
      transition-delay: 0ms;
      transform: translate3d(0px, 0px, 0px) !important;
    }


   }