/* 1. Banner 专用布局样式 */
    .bn-wrapper {
      position: relative;
      width: 100%;
      overflow: hidden;
      user-select: none;
    }

    /* Embla 视口容器 */
    .bn-embla {
      overflow: hidden;
      width: 100%;
    }

    /* 幻灯片横向排布容器 */
    .bn-container {
      display: flex;
      will-change: transform;
    }

    /* 单个幻灯片单元 */
    .bn-slide {
      flex: 0 0 100%;
      position: relative;
    }

    /* 图片基础样式：确保宽度撑满 */
    .bn-slide img,
    .bn-slide picture {
      display: block;
      width: 100%;
      height: auto;
      pointer-events: none;
    }

    /* 2. 指示条样式 (悬浮在图片下方) */
    .bn-pagination {
      position: absolute;
      bottom: 10px;
      /* 距离图片底部距离 */
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 10;
    }

    /* 未激活状态的圆点/条 */
    .bn-pagination span {
      width: 35px;
      height: 3px;
      background: #e9eef6;
      border-radius: 2px;
      opacity: 0.8;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    /* 激活状态的圆点/条 */
    .bn-pagination span.is-active {
      width: 50px;
      background: #000;
      opacity: 1;
    }

    /* 手机端指示条适配 */
    @media (max-width: 768px) {
      .bn-pagination {
        bottom: 5px;
        gap: 6px;
      }

      .bn-pagination span {
        width: 20px;
        height: 2px;
      }

      .bn-pagination span.is-active {
        width: 30px;
      }
    }