.home-index-body .home-head-placeholder {
  display: none;
  height: 0;
  margin: 0;
  padding: 0;
}

.home-index-body .banstem.home-banner-is-empty {
  display: none !important;
}

.home-index-body .banstem.home-banner-pending .banner-top {
  opacity: 0;
}

.home-index-body .banstem.home-banner-pending .hot_banner_box::after {
  animation: homeBannerPendingPulse 1.2s ease-in-out infinite alternate;
  background: var(--tpl-bg-muted);
  border-radius: var(--tpl-radius-cover, 8px);
  content: "";
  left: 50%;
  opacity: 0.72;
  position: absolute;
  transform: translateX(-50%);
  z-index: 0;
}

.home-index-body .banstem .banner-top {
  transition: opacity 0.2s ease;
}

@keyframes homeBannerPendingPulse {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 0.82;
  }
}

body.home-index-body.home-banner-data-empty .member-wrap > .container,
body.home-index-body.home-banner-data-empty .home-unified {
  padding-top: 0;
}

body.home-index-body.home-banner-data-empty .home-head-placeholder {
  display: block;
}

body.home-index-body.home-banner-data-empty .home-detail {
  margin-top: 0.15rem;
}

body.home-index-body.home-banner-data-empty #topnav .head_box {
  background: var(--tpl-bg-base) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
}

body.home-index-body.home-banner-data-empty #topnav .head_box.show-pc .head_menu_a a,
body.home-index-body.home-banner-data-empty #topnav .head_box .top_link,
body.home-index-body.home-banner-data-empty #topnav .head_box .top_link i.iconfont,
body.home-index-body.home-banner-data-empty #topnav .head_box .head_menu_b a.menu {
  color: var(--tpl-text) !important;
}

body.home-index-body.home-banner-data-empty #topnav .head_box.show-pc .head_menu_a li.active a {
  color: var(--tpl-accent) !important;
}

@media screen and (min-width: 821px) {
  body.home-index-body.home-banner-disabled .home-head-placeholder,
  body.home-index-body.home-banner-data-empty .home-head-placeholder {
    height: 1.4rem;
  }

  body.home-index-body.home-banner-disabled .home-detail,
  body.home-index-body.home-banner-data-empty .home-detail {
    margin-top: 0.15rem;
  }

  .banstem.hot_banner:not(.banstem-style-active-2):not(.banstem-style-active-3) .hot_banner_box {
    height: clamp(520px, 52vw, 720px);
    min-height: 520px;
    padding-top: clamp(58px, 7vw, 88px);
  }

  .banstem.banstem-style-active-2 .hot_banner_box {
    padding-top: clamp(58px, 7vw, 88px);
  }

  .banstem.banstem-style-active-2 .banner-top {
    width: min(1540px, 100%);
  }

  .banstem.banstem-style-active-2 .banner-top > .swiper-wrapper {
    height: clamp(380px, 32vw, 460px);
  }

  .banstem.banstem-style-active-2 .banner-top .swiper-slide {
    aspect-ratio: 1200 / 420;
    max-width: min(calc(100% - 40px), 1320px);
  }

  .home-index-body .banstem.home-banner-pending.banstem-style-active-2 .hot_banner_box::after {
    aspect-ratio: 1200 / 420;
    max-height: 460px;
    top: clamp(58px, 7vw, 88px);
    width: min(calc(100% - 40px), 1320px);
  }

  .home-index-body .banstem.home-banner-pending.banstem-style-active-3 .hot_banner_box::after {
    height: 176px;
    top: 130px;
    width: calc(100% - 36px);
  }

  .home-index-body .banstem.home-banner-pending:not(.banstem-style-active-2):not(.banstem-style-active-3) .hot_banner_box::after {
    border-radius: 0;
    bottom: 0;
    height: auto;
    max-height: none;
    top: 0;
    width: 100%;
  }
}

@media screen and (max-width: 820px) {
  body.home-index-body.home-banner-disabled .home-head-placeholder,
  body.home-index-body.home-banner-data-empty .home-head-placeholder {
    height: 0;
  }

  body.home-index-body.home-banner-disabled .home-detail,
  body.home-index-body.home-banner-data-empty .home-detail {
    margin-top: 0.1rem;
  }

  .banstem.hot_banner:not(.banstem-style-active-2):not(.banstem-style-active-3) .hot_banner_box {
    height: clamp(300px, 72vw, 500px);
    min-height: 280px;
  }

  .banstem.banstem-style-active-2 .banner-top > .swiper-wrapper {
    height: clamp(205px, 48vw, 320px);
  }

  .banstem.banstem-style-active-2 .banner-top .swiper-slide {
    height: auto;
    max-width: min(calc(100% - 48px), 360px);
    width: calc(100% - 48px);
  }

  .home-index-body .banstem.home-banner-pending.banstem-style-active-2 .hot_banner_box::after {
    aspect-ratio: 286 / 123;
    max-width: 360px;
    top: 50px;
    width: calc(100% - 48px);
  }

  .home-index-body .banstem.home-banner-pending.banstem-style-active-3 .hot_banner_box::after {
    height: 160px;
    top: 20px;
    width: calc(100% - 20px);
  }

  .home-index-body .banstem.home-banner-pending:not(.banstem-style-active-2):not(.banstem-style-active-3) .hot_banner_box::after {
    border-radius: 0;
    bottom: 0;
    height: auto;
    max-width: none;
    top: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-index-body .banstem .banner-top {
    transition: none;
  }
}

.home-index-body .home-unified > .vod-play-tagwall {
  box-sizing: border-box;
  overflow: hidden;
}

@media screen and (min-width: 821px) {
  .home-index-body .home-unified > .vod-play-tagwall {
    margin: 24px auto 8px;
    max-width: 1200px;
    width: calc(100% - 48px);
  }
}

@media screen and (max-width: 820px) {
  .home-index-body .home-unified > .vod-play-tagwall {
    margin: 16px auto 8px;
    width: calc(100% - 24px);
  }
}

@media screen and (min-width: 821px) {
  body.home-index-body .mac-cw-fab {
    display: none !important;
  }
}