.aestheticsInfo-banner {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.aestheticsInfo-banner img {
  display: block;
  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，
 * 两条都不够。
 *
 * 不改图，也不把字改成深色 —— 深色在暗调的图上同样会糊。加一层由下而上的暗色
 * 渐变：亮图上把对比拉回来，暗图上几乎看不出来。
 *
 * **垫在图上，不是垫在文字块上。**原来这层是 .banner-text::before，跟着文字块走：
 *   · 文字块离图底 5rem，于是暗色到那儿就断了，图片最下面还留着一条亮边 ——
 *     看着就是「一条黑的没跟图片底下对齐」，客户就是这么指出来的；
 *   · 左右各放出 56px 去补硬边，结果比图还宽，横向溢出到视口外；
 *   · 手机端文字块跑到图**下面**、字也变成黑的（见下面的媒体查询），
 *     那层渐变跟着过去，成了黑字后面的一块灰底。
 * 挂到 banner 上、贴着底边，这三件事一起没了。
 */
.aestheticsInfo-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 遮罩本身和图片同尺寸；上半部透明，只在文字所在的底部逐渐压暗。 */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.46) 24%, rgba(0, 0, 0, 0) 58%);
  pointer-events: none;
}
/* ::after 在 DOM 顺序上排在文字块后面，不给层级的话会盖住字 */
.aestheticsInfo-banner .banner-text {
  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::after {
    content: none;
  }
  .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;
  }
}