.aestheticsInfo-banner {
  position: relative;
  width: 100%;
  height: 100vh;
}
.aestheticsInfo-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-text {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
/*
 * 白字压在实拍图上，图亮的时候读不了。「云上涌动春意」那张的天空加大理石桌面
 * 平均亮度 151/255，白字对比度只有 2.91:1 —— 大字要求 3:1、正文要求 4.5:1，
 * 两条都不够。中英文站用的是同一批图，两边都有这个问题。
 *
 * 不改图，也不把字改成深色 —— 深色在暗调的图上同样会糊。加一层由下而上的暗色
 * 渐变垫在文字底下：亮图上把对比拉回来，暗图上几乎看不出来。
 *
 * 注意选择器：空间详情页走的是 show_space_model.html，用的是 .aestheticsInfo-banner。
 * space.css 里的 .wg-space-detail 属于 show_space.html，两个站都没绑那个模板。
 */
.aestheticsInfo-banner .banner-text::before {
  content: "";
  position: absolute;
  /* 比文字块四周各放出一截，边缘才不会有硬边 */
  /*
   * 底部只放出一点点：放太多的话渐变最实的一段落在文字下方的空白上，
   * 文字本身反而只吃到很淡的一层。左右多放一些，边缘才不会有硬边。
   */
  inset: -28px -56px -12px;
  /* 文字落在 70%~100% 这一段，所以那里要留住足够的不透明度 */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 0;
}

.aestheticsInfo-banner .banner-text > * {
  position: relative;
  z-index: 1;
}

.banner-text p {
  color: #fff;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  line-height: 50px;
  letter-spacing: 10px;
}
.banner-text p:last-of-type {
  font-size: 13px;
  line-height: 25px;
  margin-top: 25px;
  letter-spacing: 5px;
}

.c-main,
.a-main {
  padding: 20px;
  display: flex;
  align-items: center;
}
.c-main-right,
.a-main-left {
  width: 40%;
}
.c-main-right img,
.a-main-left img {
  width: 100%;
  object-fit: contain;
}
.c-main-left,
.a-main-right {
  max-width: 60%;
  width: fit-content;
  margin: 0px auto;
}

.item-1 {
  font-size: 1rem;
  margin-bottom: 18px;
  color: #555;
}

.item-2 {
  margin-bottom: 10px;
  line-height: 25px;
}

.item-3 {
  color: #555;
  font-size: 1rem;
}

.item-4 {
  font-size: 1rem;
  color: #555;
  line-height: 25px;
  display: flex;
}

.product-list {
  margin-right: 25px;
  text-decoration: underline;
  position: relative;
  width: fit-content;
  height: fit-content;
  flex: 0 0 auto;
}

.product-list::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
  width: 14px;
  height: 14px;
  background: url(../images/below-arrow.png) no-repeat center center;
  background-size: contain;
  transition: 0.3s;
}

.product-list.zk::after {
  transform: translateY(-50%) rotate(359deg);
}

.item-4-container {
  position: relative;
  height: 20px;
  width: 100%;
  flex: 1 1 auto;
  overflow: hidden;
}

.item-4-content a:hover {
  text-decoration: underline;
}

.item-4-content {
  transition: 0.3s;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 20px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-4-content > div:first-child {
  max-height: 120px;
  overflow-y: auto;
  width: fit-content;
}

.xjt {
  width: 15px;
  height: 15px;
  background: url("../images/below-arrow.png") no-repeat center center;
  background-size: contain;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

.item-4-content > div::-webkit-scrollbar {
  display: none;
}

.item-4-content div a {
  display: block;
  line-height: 25px;
  font-size: 1rem;
  white-space: nowrap;
  width: fit-content;
}

.bottom-button {
  margin-top: 15px;
  display: flex;
  align-items: center;
}

.bottom-like {
  position: static !important;
  margin-right: 15px;
}

.swiper-container .swiper-slide > img {
  width: 100%;
  object-fit: contain;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}
.swiper-button-prev,
.swiper-button-next {
  height: 150px;
  width: 50px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0px;
}
.swiper-button-prev img,
.swiper-button-next img {
  height: 100%;
}

.d-main {
  width: 100%;
  height: fit-content;
  overflow: hidden;
}
.swiper-container1 {
  position: relative;
  height: fit-content;
}
.swiper-container1 .swiper-slide {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: space-around;
}
.item-left {
  width: 60%;
}
.item-left img {
  width: 100%;
  object-fit: contain;
  max-height: 550px;
}
.item-right {
  width: 40%;
  position: relative;
  max-width: 500px;
}
.button {
  margin-top: 30px;
}
.button.hide {
  opacity: 0;
}
.button a {
  width: 58%;
  min-width: 180px;
  height: 35px;
  text-align: center;
  font-size: 1rem;
  line-height: 35px;
}
.button a:first-child {
  background: #000;
  color: #fff;
  margin-bottom: 10px;
}
.button a:last-child {
  background: transparent;
  color: #000;
  border: 1px solid #000;
}
.fx {
  position: absolute;
  bottom: 0px;
  right: 0.8rem;
  text-decoration: underline;
}
.swiper-container1 .swiper-pagination {
  width: fit-content !important;
  bottom: 2rem !important;
  left: 30% !important;
  transform: translateX(-50%) !important;
  right: unset !important;
}
.swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  background: #666 !important;
  margin: 0px 8px !important;
}

.e-main {
  padding: 30px 0px;
}

.space-detail-page {
  padding-bottom: 40px;
}

.space-detail-hero {
  padding: 36px 20px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.space-detail-hero-media {
  width: min(58%, 900px);
}

.space-detail-hero-media img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.space-detail-hero-copy {
  flex: 1 1 320px;
  max-width: 520px;
}

.space-detail-kicker {
  color: #6a6a6a;
  font-size: 13px;
  letter-spacing: 3px;
  margin-bottom: 18px;
}

.space-detail-hero-copy h1 {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 18px;
}

.space-detail-summary {
  color: #4f4f4f;
  font-size: 16px;
  line-height: 1.8;
}

.space-detail-content {
  padding: 0 20px 24px;
}

.space-detail-intro,
.space-copy,
.space-banner,
.space-inline-image,
.space-gallery {
  max-width: 1180px;
  margin: 0 auto 28px;
}

.space-detail-intro {
  max-width: 900px;
}

.space-detail-intro p,
.space-copy p,
.space-copy li {
  color: #2f2f2f;
  font-size: 16px;
  line-height: 1.9;
}

.space-copy-primary {
  max-width: 900px;
}

.space-banner img,
.space-inline-image img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.space-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.space-gallery-item {
  margin: 0;
}

.space-gallery-item img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.space-gallery-item figcaption {
  color: #6a6a6a;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 8px;
}

.space-related .card-container .main img {
  width: 100%;
  display: block;
}

@media screen and (max-width: 1100px) {
  .swiper-button-prev,
  .swiper-button-next {
    height: 80px;
    width: 30px;
  }
}
@media screen and (max-width: 750px) {
  .a-main,
  .c-main {
    display: block;
  }
  .c-main-right,
  .a-main-left {
    width: 100%;
  }

  .c-main-left,
  .a-main-right {
    max-width: 100%;
    margin: 30px auto;
  }
  .swiper-button-prev,
  .swiper-button-next {
    width: 20px;
    height: 50px;
  }
  .swiper-container1 .swiper-slide {
    display: block;
    padding: 20px 20px 40px;
  }
  .item-left {
    width: 100%;
  }
  .item-right {
    width: 100%;
    max-width: 100%;
  }
  .swiper-container1 .swiper-pagination {
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 10px !important;
  }

  .space-detail-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .space-detail-hero-media,
  .space-detail-hero-copy {
    width: 100%;
    max-width: none;
  }

  .space-detail-hero-copy h1 {
    font-size: 28px;
  }

  .space-gallery {
    grid-template-columns: 1fr;
  }
}
/* Mobile: a wide banner photo inside a 100vh portrait box gets cropped to
   its middle sliver, which hides any text composed into the image. Let the
   image keep its own aspect ratio and drop the caption below it. */
@media screen and (max-width: 750px) {
  .aestheticsInfo-banner {
    height: auto;
  }
  .aestheticsInfo-banner > img {
    display: block;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  .aestheticsInfo-banner .banner-text {
    position: static;
    left: auto;
    transform: none;
    padding: 24px 15px 0;
  }
  .aestheticsInfo-banner .banner-text p,
  .aestheticsInfo-banner .banner-text p:last-of-type {
    color: #000;
  }
  .aestheticsInfo-banner .banner-text p {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: 4px;
  }
  .aestheticsInfo-banner .banner-text p:last-of-type {
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 2px;
    margin-top: 12px;
  }
}