.iope-hero-banner {
  display: block;
  overflow: hidden;
}
.iope-hero-banner__container {
  position: relative;
  overflow: hidden;
}
.iope-hero-banner__item {
  position: relative;
  height: 100%;
}
.iope-hero-banner__assets {
  margin: 0 auto;
  height: max(calc(900px / (1920 / var(--page-medium-width-cqi))), 46.875vw);
}
.iope-hero-banner__assets img,
.iope-hero-banner__assets video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.iope-hero-banner__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 100px 0 120px;
  box-sizing: border-box;
}
.iope-hero-banner__content .page-width {
  position: relative;
  display: flex;
  height: 100%;
}
.iope-hero-banner__inner {
  --transition-top: -50px;
  flex: 0 1 770px;
}
.iope-hero-banner__inner .banner-title {
  color: var(--color);
  font-weight: 800;
  transition-delay: 0.1s;
  transform: translateY(var(--transition-top));
  font-size: 52px;
  line-height: 1.4;
  letter-spacing: -0.01em;

}
.iope-hero-banner__inner .banner-text {
  margin-top: 0.552em;
  color: var(--color);
  font-weight: 400;
  transition-delay: 0.2s;
  transform: translateY(var(--transition-top));
  font-size: 24px;
  line-height: 1.5;
}
.iope-hero-banner__inner .banner-footnote {
  margin-top: 38px;
  color: var(--color);
  font-weight: 400;
  transition-delay: 0.2s;
  transform: translateY(var(--transition-top));
  font-size: 13px;
  line-height: 1.4;
}
@media (max-width: 750px) {
  .iope-hero-banner__inner .banner-title {
    font-size: 24px;
  }
  .iope-hero-banner__inner .banner-text {
    margin-top: 4px;
    font-size: 16px;
  }
  .iope-hero-banner__inner .banner-footnote {
    margin-top: 12px;
    font-size: 10px;
  }
}
@media (min-width: 1680px) {
  .iope-hero-banner__inner .banner-title {
    font-size: 62px;
  }
  .iope-hero-banner__inner .banner-text {
    font-size: 29px;
  }
  .iope-hero-banner__inner .banner-footnote {
    font-size: 16px;
  }
}
.iope-hero-banner__inner .banner-button {
  margin-top: 50px;
  transition-delay: 0.3s;
  transform: translateY(var(--transition-top));
}
.iope-hero-banner__inner :where(.banner-title, .banner-text, .banner-button, .banner-footnote) {
  opacity: 0;
  transition: all var(--duration-extra-longer) ease;
}
.iope-hero-banner__item.swiper-slide-active .iope-hero-banner__inner :where(.banner-title, .banner-text, .banner-button, .banner-footnote) {
  transform: translateY(0);
  opacity: 1;
}

.iope-hero-banner .swiper-control {
  --pager-color: var(--color-black);
  --pager-fill: 0, 0, 0;
  position: absolute;
  z-index: 1;
  inset: auto 0 40px;
  color: var(--pager-color);
  line-height: 1.42;
  transition: all var(--duration-default) ease;
}
.iope-hero-banner .swiper-control--lighten {
  --pager-color: var(--color-white);
  --pager-fill: 255, 255, 255;
}
.iope-hero-banner .swiper-control:has([class*=pagination-lock]) {
  display: none;
}
.iope-hero-banner .swiper-control .page-width {
  display: flex;
  align-items: center;
  column-gap: 12px;
}
.iope-hero-banner .swiper-control .swiper-pager {
  display: flex;
  align-self: center;
  column-gap: 4px;
  font-size: 14px;
  line-height: 1;
}
.iope-hero-banner .swiper-control .swiper-pager span {
  width: 20px;
  text-align: center;
}
.iope-hero-banner .swiper-control .swiper-pagination {
  position: relative;
  inset: auto;
  width: 160px;
  height: 2px;
  background: rgba(var(--pager-fill), 0.2);
}
.iope-hero-banner .swiper-control .swiper-pagination-progressbar-fill {
  background: rgba(var(--pager-fill));
}
.iope-hero-banner .swiper-control .swiper-navi {
  display: inline-flex;
  align-items: center;
}
.iope-hero-banner .swiper-control .swiper-navi__btn {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: var(--pager-color);
  transition: all 0.3s ease;
}
.iope-hero-banner .swiper-control .swiper-navi__btn--prev {
  mask: center/cover url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10.5 3.38672L5.5 8.38714L10.5 13.3867" stroke="%23fff"/></svg>') no-repeat;
}
.iope-hero-banner .swiper-control .swiper-navi__btn--next {
  mask: center/cover url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M5.5 3.38672L10.5 8.38714L5.5 13.3867" stroke="%23fff"/></svg>') no-repeat;
}
.iope-hero-banner .swiper-control .swiper-navi__btn--pause {
  mask: center/cover url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5 13L5 3' stroke='black'/%3E%3Cpath d='M11 13L11 3' stroke='black'/%3E%3C/svg%3E") no-repeat;
}
.iope-hero-banner .swiper-control .swiper-navi__btn--play {
  mask: center/cover url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 8L4 14L4 2L12 8Z' fill='black'/%3E%3C/svg%3E") no-repeat;
}
@media (max-width: 750px) {
  .iope-hero-banner__container {
    height: auto;
  }
  .iope-hero-banner__assets {
    height: 140vw;
  }
  .iope-hero-banner__content {
    padding: 40px 0 64px;
  }
  .iope-hero-banner__inner .banner-button {
    margin-top: 16px;
  }
  .iope-hero-banner .swiper-control {
    bottom: 20px;
  }
  .iope-hero-banner .swiper-control .swiper-pagination {
    flex: 1;
  }
}