@import "../../styles/vars";
.banner_container{
  @media screen and (max-width: $width-mobile-max) {
    margin-top: 0rem;
    margin-bottom: 0.88rem;
    margin-bottom: 0rem;
  }
}
.banner_swiper_btn{
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 9;
  margin-top: -1.125rem;
  top: 50%;
  cursor: pointer;
  border-radius: var(--border-radius);
  background-color: var(--swiper-btn-bg);
  //opacity:0.6;
  &:hover{
    background-color: var(--nav-item-hover);
  }
  & .swiper_icon{
    width: 12px;
    fill: var(--text);
  }
  &.swiper_prev{
    left: -2.25rem;
    & .swiper_icon{
      transform: rotate(180deg);
    }
  }
  &.swiper_next{
    right: -2.25rem;
  }
}
.banner_pagination{
  height: 1.75rem;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  bottom: -1.97rem;
  z-index: 9;
  @media screen and (max-width: $width-mobile-max) {
    margin-top: -1.75rem;
  }
  & .banner_pagination_dot_active{
    background: #fff;
    width: 1.75rem;
    @media screen and (max-width: $width-mobile-max) {
      width: .625rem;
      width: 0.74rem;
    }
  }
  span{
    cursor: pointer;
    width: .625rem;
    width: 0.74rem;
    height: .625rem;
    border-radius: .3125rem;
    transition: width .3s linear;
    margin: 0 .3125rem;
    margin: 0;
    margin-right: 0.36rem;
    overflow: hidden;
    background: rgba(151, 151, 151, .3);
    border-radius: 90rem;
    background: rgba(89, 91, 99, 1);
    @media screen and (max-width: $width-mobile-max) {
      width: .375rem;
      width: 0.74rem;
      height: .375rem;
      border-radius: .1875rem;
      margin: 0 .1875rem;
      margin: 0 0.18rem;
      background: rgba(151, 151, 151, .4);
      border-radius: 90rem;
      background: rgba(89, 91, 99, 1);
    }
  }
}
