.mySwiper {
  cursor: pointer;
}
.bannerWrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  .bannerImg {
    // max-width: 1920px;
    object-fit: cover;
    height: 400px;
    margin: 0 auto;
  }
}

:global {
  .bannerSwiper {
    .mySwiper {
      overflow: hidden;
      height: 400px;
      &:hover {
        .myprev,
        .mynext {
          visibility: visible !important;
          &:active {
            opacity: 0.9;
          }
        }
      }
    }
    .myprev,
    .mynext {
      // width: 40px;
      // height: 72px;
      // background: rgba(0, 0, 0, 0.26);
      // border-radius: 8px;
      z-index: 100;
      position: absolute;
      top: 50%;
      margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
      z-index: 10;
      cursor: pointer;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      // color: var(--swiper-navigation-color, var(--swiper-theme-color));
      img {
        width: 44px;
        height: 44px;
      }
      visibility: hidden;
    }
    .myprev {
      left: 130px;
    }
    .mynext {
      right: 130px;
      img {
        transform: rotate(180deg);
      }
    }
    .swiper-pagination {
      // height: 6px;
      // background-color: #fff;
      bottom: 24px !important;
    }
    .swiper-pagination-bullet-active {
      width: 50px;
      height: 6px;
      background: #2dc7aa !important;
      border-radius: 3px;
    }
    .swiper-pagination-bullet {
      width: 50px;
      height: 6px;
      background: #999999;
      border-radius: 3px;
    }
  }
}
