.ub-banner {
  width: 100%;
  overflow: hidden;
  --swiper-navigation-size: 20px
}

.ub-banner.container .swiper-slide .cover {
  max-width: 100%;
  margin: 0 auto
}

.ub-banner .swiper-slide {
  display: block
}

.ub-banner .swiper-slide .cover {
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  background-position: center;
  overflow: hidden;
  display: block;
  position: relative
}

.ub-banner .swiper-slide .cover:after {
  content: '';
  display: block;
  margin-top: 50%
}

.ub-banner .swiper-pagination-bullet {
  box-shadow: #666 0 0 .25rem;
  width: 16px;
  height: 4px;
  border-radius: 4px
}

.ub-banner .swiper-pagination-bullet.swiper-pagination-bullet-active {
  box-shadow: none
}

.ub-banner .swiper-pagination .swiper-pagination-bullet-active {
  background: #023793
}

.ub-banner.ratio-1-1 .swiper-slide .cover:after {
  margin-top: 100%
}

.ub-banner.ratio-3-2 .swiper-slide .cover:after {
  margin-top: 66.66%
}

.ub-banner.ratio-4-3 .swiper-slide .cover:after {
  margin-top: 75%
}

.ub-banner.ratio-2-1 .swiper-slide .cover:after {
  margin-top: 50%
}

.ub-banner.ratio-1-1 .swiper-slide .cover:after {
  margin-top: 100%
}

.ub-banner.ratio-3-1 .swiper-slide .cover:after {
  margin-top: 33.33%
}

.ub-banner.ratio-4-1 .swiper-slide .cover:after {
  margin-top: 25%
}

.ub-banner.ratio-5-1 .swiper-slide .cover:after {
  margin-top: 20%
}

.ub-banner.ratio-5-2 .swiper-slide .cover:after {
  margin-top: 40%
}

.ub-banner.ratio-5-3 .swiper-slide .cover:after {
  margin-top: 60%
}

.ub-banner.ratio-10-1 .swiper-slide .cover:after {
  margin-top: 10%
}

@media screen and (max-width:40rem) {
  .ub-banner.m-ratio-1-2 .swiper-slide .cover:after {
    margin-top: 200%
  }

  .ub-banner.m-ratio-2-3 .swiper-slide .cover:after {
    margin-top: 150%
  }

  .ub-banner.m-ratio-1-1 .swiper-slide .cover:after {
    margin-top: 100%
  }

  .ub-banner.m-ratio-3-2 .swiper-slide .cover:after {
    margin-top: 66.66%
  }

  .ub-banner.m-ratio-4-3 .swiper-slide .cover:after {
    margin-top: 75%
  }

  .ub-banner.m-ratio-2-1 .swiper-slide .cover:after {
    margin-top: 50%
  }

  .ub-banner.m-ratio-1-1 .swiper-slide .cover:after {
    margin-top: 100%
  }

  .ub-banner.m-ratio-3-1 .swiper-slide .cover:after {
    margin-top: 33.33%
  }

  .ub-banner.m-ratio-4-1 .swiper-slide .cover:after {
    margin-top: 25%
  }

  .ub-banner.m-ratio-5-1 .swiper-slide .cover:after {
    margin-top: 20%
  }

  .ub-banner.m-ratio-5-2 .swiper-slide .cover:after {
    margin-top: 40%
  }

  .ub-banner.m-ratio-5-3 .swiper-slide .cover:after {
    margin-top: 60%
  }

  .ub-banner.m-ratio-10-1 .swiper-slide .cover:after {
    margin-top: 10%
  }
}