.floor1_moible {
  display: none;
}
.floor4_mobile {
  display: none;
}
.mobile {
  display: none;
}
.floor1 {
  width: 100%;
  height: 56.25vw;
  background: url('../images/shadow/floor1_bg.webp') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.floor1 .floor1-wrapper {
  width: 85.9375vw;
  height: 45.72916667vw;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.floor1 .floor1-wrapper .floor1-container {
  width: 76.04166667vw;
  margin: 0 auto;
  height: 32.8125vw;
  margin-top: 8.33333333vw;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
}
.floor1 .floor1-wrapper .floor1-container .viewport-container {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
}
.floor1 .floor1-wrapper .floor1-container .viewport-container .viewport {
  flex-grow: 1;
  height: 22.91666667vw;
  border-radius: 20px;
  overflow: hidden;
}
.floor1 .floor1-wrapper .floor1-container .viewport-container .viewport .swiper {
  width: 100%;
  height: 100%;
}
.floor1 .floor1-wrapper .floor1-container .viewport-container .viewport .swiper .floor1-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.52083333vw;
  align-items: center;
  justify-items: center;
}
.floor1 .floor1-wrapper .floor1-container .viewport-container .viewport .swiper .floor1-items img.active {
  opacity: 1;
}
.floor1 .floor1-wrapper .floor1-container .viewport-container .viewport .mySwiper-l .swiper-slide {
  height: 20.83333333vw;
}
.floor1 .floor1-wrapper .floor1-container .viewport-container .viewport .mySwiper-l .swiper-slide img {
  width: 4.375vw;
  height: 9.94791667vw;
  opacity: 0.5;
}
.floor1 .floor1-wrapper .floor1-container .viewport-container .viewport .mySwiper-r .swiper-slide {
  height: 21.875vw;
}
.floor1 .floor1-wrapper .floor1-container .viewport-container .viewport .mySwiper-r .swiper-slide img {
  width: 4.11458333vw;
  height: 11.14583333vw;
  opacity: 0.5;
}
.floor1 .floor1-wrapper .floor1-container .viewport-container .flavor_name {
  position: absolute;
  width: 100%;
  bottom: 2.86458333vw;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.25vw;
  font-weight: bold;
}
.floor1 .floor1-wrapper .floor1-container .viewport-container .custom-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.floor1 .floor1-wrapper .floor1-container .viewport-container .custom-nav .custom-button-prev,
.floor1 .floor1-wrapper .floor1-container .viewport-container .custom-nav .custom-button-next {
  position: static;
  /* 移除绝对定位，改为 flex 布局 */
  width: 2.5vw;
  height: 2.5vw;
  text-align: center;
  transition: background 0.2s, transform 0.2s;
  margin: 0;
}
.floor1 .floor1-wrapper .floor1-container .viewport-container .custom-nav .custom-button-next:hover,
.floor1 .floor1-wrapper .floor1-container .viewport-container .custom-nav .custom-button-prev:hover {
  transform: scale(1.05);
}
.floor1 .floor1-wrapper .floor1-container .middle {
  position: relative;
  display: grid;
  top: -1.45833333vw;
  align-items: center;
  justify-items: center;
}
.floor1 .floor1-wrapper .floor1-container .middle .middle_l_container {
  opacity: 1;
  width: 16.25vw;
  height: 30.46875vw;
  position: absolute;
  --bg-url: url('../images/shadow/middle_left/01_left.webp');
}
.floor1 .floor1-wrapper .floor1-container .middle .middle_l_container:after {
  content: '';
  position: absolute;
  top: 100%;
  /* 紧贴图片底部 */
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--bg-url);
  /* 继承容器的背景图（即图片） */
  filter: blur(4px);
  background-size: cover;
  background-position: center;
  transform: scaleY(-1);
  /* 垂直翻转 */
  mask-image: linear-gradient(to top, #fff, #fff, transparent 13%);
  -webkit-mask-image: linear-gradient(to top, #fff, transparent 13%);
  opacity: 1;
  pointer-events: none;
  /* 防止点击干扰 */
}
.floor1 .floor1-wrapper .floor1-container .middle .middle_r_container {
  opacity: 1;
  width: 16.25vw;
  height: 30.46875vw;
  position: absolute;
  --bg-url: url('../images/shadow/middle_right/01_right.webp');
  /* 容器显示原图 */
  background-image: var(--bg-url);
  background-size: cover;
  background-position: center;
}
.floor1 .floor1-wrapper .floor1-container .middle .middle_r_container:after {
  content: '';
  position: absolute;
  top: 100%;
  /* 紧贴图片底部 */
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--bg-url);
  /* 继承容器的背景图（即图片） */
  filter: blur(4px);
  background-size: cover;
  background-position: center;
  transform: scaleY(-1);
  /* 垂直翻转 */
  mask-image: linear-gradient(to top, #fff, #fff, transparent 13%);
  -webkit-mask-image: linear-gradient(to top, #fff, transparent 13%);
  opacity: 1;
  pointer-events: none;
  /* 防止点击干扰 */
}
.floor1 .floor1-wrapper .floor1-container .middle img {
  width: 16.25vw;
  height: 30.46875vw;
  opacity: 1;
  position: absolute;
}
.floor2 {
  width: 100%;
}
.floor2 video {
  display: block;
}
.floor3 {
  width: 100%;
}
.floor3 img {
  height: 100%;
  display: block;
}
.floor4 {
  width: 100%;
  height: 56.25vw;
  display: flex;
  align-items: center;
  background: url('../images/shadow/floor4_bg.webp') no-repeat center center;
  background-size: cover;
}
.floor4 .floor4-container {
  width: 85%;
  margin: 0 auto;
  display: grid;
  gap: 1.04166667vw;
  grid-template-columns: 31.51041667vw 29.89583333vw 22.03125vw;
}
.floor4 .floor4-container .floor4-items {
  height: 34.16666667vw;
  gap: 20px;
}
.floor4 .floor4-container .floor4-items img {
  display: block;
  /* 移除图片底部多余空白 */
  width: 100%;
  height: 100%;
}
.floor4 .floor4-container .floor4-items img:hover {
  transform: scale(1.05);
  transform-origin: center;
  transition: transform 0.2s;
}
.floor4 .floor4-container .floor4-items.middle {
  display: grid;
  grid-template-rows: 14.84375vw 18.07291667vw;
}
.floor5 {
  width: 100%;
}
.floor5 .floor5-container .floor5-items picture {
  display: block;
  width: 100%;
  height: 100%;
}
.floor5 .floor5-container .floor5-items picture img {
  display: block;
  /* 消除 img 底部白边 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 防止图片拉伸变形，按需使用 */
}
.floor6 {
  width: 100%;
}
.floor6 .floor6-container .floor6-items video {
  display: block;
}
/*** media ***/
@media (max-width: 768px) {
  .pc {
    display: none;
  }
  .floor1_moible {
    display: block;
    width: 100%;
    height: 199.06976744vw;
    background: url('../images/shadow/floor1_bg_mobile.webp') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .floor1_moible .floor1-container {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .floor1_moible .floor1-container .top {
    height: 88.37209302vw;
  }
  .floor1_moible .floor1-container .top .top_container {
    top: 16.27906977vw;
    width: 42.3255814vw;
    height: 77.20930233vw;
    position: relative;
  }
  .floor1_moible .floor1-container .top .top_container .middle_l_m_container {
    position: absolute;
    width: 42.3255814vw;
    height: inherit;
    --bg-url: none;
  }
  .floor1_moible .floor1-container .top .top_container .middle_r_m_container {
    position: absolute;
    width: 42.3255814vw;
    height: inherit;
    --bg-url: none;
  }
  .floor1_moible .floor1-container .top .top_container img {
    width: 42.3255814vw;
    height: 77.20930233vw;
    position: absolute;
  }
  .floor1_moible .floor1-container .viewport-container {
    width: 100%;
    height: 30.23255814vw;
    margin-top: 6.97674419vw;
    position: relative;
  }
  .floor1_moible .floor1-container .viewport-container .viewport {
    height: 100%;
    overflow: hidden;
  }
  .floor1_moible .floor1-container .viewport-container .viewport .mySwiper-l-m {
    height: 100%;
  }
  .floor1_moible .floor1-container .viewport-container .viewport .mySwiper-l-m .swiper-slide {
    text-align: center;
    font-size: 0.9375rem;
    width: 10.23255814vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .floor1_moible .floor1-container .viewport-container .viewport .mySwiper-l-m .swiper-slide img {
    width: 10.23255814vw;
    height: 22.3255814vw;
    opacity: 0.5;
  }
  .floor1_moible .floor1-container .viewport-container .viewport .mySwiper-l-m .swiper-slide img.active {
    opacity: 1;
  }
  .floor1_moible .floor1-container .viewport-container .viewport .mySwiper-r-m {
    height: 100%;
  }
  .floor1_moible .floor1-container .viewport-container .viewport .mySwiper-r-m .swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .floor1_moible .floor1-container .viewport-container .viewport .mySwiper-r-m .swiper-slide img {
    width: 9.30232558vw;
    height: 25.11627907vw;
    opacity: 0.5;
  }
  .floor1_moible .floor1-container .viewport-container .viewport .mySwiper-r-m .swiper-slide img.active {
    opacity: 1;
  }
  .floor1_moible .floor1-container .viewport-container .flavor_name {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
  }
  .floor1_moible .floor1-container .viewport-container .custom-button-prev {
    position: absolute;
    width: 6.27906977vw;
    height: 7.20930233vw;
    left: -6.97674419vw;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  .floor1_moible .floor1-container .viewport-container .custom-button-next {
    position: absolute;
    width: 6.27906977vw;
    height: 7.20930233vw;
    right: -6.97674419vw;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  .floor4_mobile {
    display: block;
    width: 100%;
    height: 142.3255814vw;
    background: url('../images/shadow/floor4_bg_mobile.webp') no-repeat center center;
    background-size: cover;
  }
  .floor4_mobile .floor4-container {
    width: 87.90697674vw;
    display: grid;
    margin: 0 auto;
    grid-template-columns: 41.8vw 44.1vw;
    grid-template-rows: 53.5vw 45.1vw 22.5vw;
    gap: 5px;
    grid-template-areas: "top top" "left1 right" "left2 right";
  }
  .floor4_mobile .floor4-container .floor4-items-top {
    grid-area: top;
  }
  .floor4_mobile .floor4-container .floor4-items-left1 {
    grid-area: left1;
  }
  .floor4_mobile .floor4-container .floor4-items-left2 {
    grid-area: left2;
  }
  .floor4_mobile .floor4-container .floor4-items-right {
    grid-area: right;
  }
  .floor5 .floor5-container .floor5-items .mobile {
    display: block;
  }
}