/* ========================================
   Banner Area
======================================== */

.hero-banner {
  width: 1100px;
  height: 730px;

  margin: 0 auto;

  position: relative;
  overflow: hidden;

  background: #fff;
}

/* ========================================
   Swiper
======================================== */

.banner-swiper {
  width: 100%;
  height: 650px;

  overflow: visible;
}

/* ========================================
   Slide
======================================== */

.swiper-slide {
  width: 500px;

  opacity: 0.5;
  transition:
    opacity 0.4s ease;
}

.swiper-slide-prev,
.swiper-slide-next {
  opacity: 0.85;
}

.swiper-slide-active {
  opacity: 1;
}

.swiper-slide a {
  display: block;
}

.swiper-slide img {
  width: 100%;
  display: block;

  border-radius: 8px;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0);
}

/* ========================================
   Arrow
======================================== */

.swiper-button-prev,
.swiper-button-next {
  width: 50px;
  height: 50px;

  background: #FF8EB8;
  border-radius: 50%;

  color: #fff;
}

.swiper-button-prev {
  left: 10px;
}

.swiper-button-next {
  right: 10px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 20px;
  font-weight: bold;
}

/* ========================================
   Pagination
======================================== */

.swiper-pagination {
  position: absolute;

  left: 0;
  bottom: 15px;

  width: 100%;

  text-align: center;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;

  margin: 0 7px !important;

  background: #000;
  opacity: 0.25;
}

.swiper-pagination-bullet-active {
  background: #ff8c8c;
  opacity: 1;
}