/* Home page styles. */
.home-hero {
  min-height: 100vh;
  min-height: 100dvh;
  background: #080a0e;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.hero-bg {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  color: #fff;
}
.hero-art {
  background:
    radial-gradient(circle at 82% 20%, rgba(244, 164, 49, .18), transparent 26%),
    radial-gradient(circle at 70% 70%, rgba(80, 143, 190, .18), transparent 28%),
    #080a0e;
}
.hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-mask {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, .2);
}
.hero-art::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 10, 14, .46) 0%, rgba(8, 10, 14, 0) 12%, rgba(8, 10, 14, 0) 88%, rgba(8, 10, 14, .46) 100%),
    linear-gradient(180deg, rgba(8, 10, 14, .34) 0%, rgba(8, 10, 14, 0) 14%, rgba(8, 10, 14, 0) 82%, rgba(8, 10, 14, .52) 100%);
}
.hero-art::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 0, rgba(8, 10, 14, .58) 0, rgba(8, 10, 14, .34) 12rem, rgba(8, 10, 14, 0) 28rem),
    radial-gradient(circle at 100% 0, rgba(8, 10, 14, .58) 0, rgba(8, 10, 14, .34) 12rem, rgba(8, 10, 14, 0) 28rem),
    radial-gradient(circle at 0 100%, rgba(8, 10, 14, .62) 0, rgba(8, 10, 14, .38) 14rem, rgba(8, 10, 14, 0) 30rem),
    radial-gradient(circle at 100% 100%, rgba(8, 10, 14, .62) 0, rgba(8, 10, 14, .38) 14rem, rgba(8, 10, 14, 0) 30rem);
}
.hero-title-wrap {
  position: absolute;
  left: 50%;
  top: 21.8125rem;
  bottom: auto;
  z-index: 1;
  width: min(53.5625rem, 46vw, calc(100vw - 10rem));
  transform: translateX(-50%);
}
.hero-title-img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0.625rem 1.75rem rgba(0, 0, 0, .28));
  animation: hero-title-slide-in 2s cubic-bezier(.22, 1, .36, 1) both;
}
.hero-scroll-guide {
  position: absolute;
  left: 50%;
  bottom: 2.1875rem;
  z-index: 2;
  transform: translateX(-50%);
  opacity: .95;
  animation: hero-scroll-bounce 1.65s ease-in-out infinite;
}
.hero-scroll-guide img {
  width: 1.375rem;
  height: 8.125rem;
  filter: drop-shadow(0 0 .75rem rgba(255, 255, 255, .4));
}
@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); opacity: .95; filter: drop-shadow(0 0 .35rem rgba(255, 255, 255, .28)); }
  50% { transform: translateX(-50%) translateY(.875rem) scale(1.12); opacity: .45; filter: drop-shadow(0 0 1.125rem rgba(255, 255, 255, .72)); }
}
@keyframes hero-title-slide-in {
  from {
    opacity: 0;
    transform: translateY(-3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-copy { width: min(35rem, 100%); }
.eyebrow { margin: 0 0 0.75rem; color: var(--brand-dark); font-size: 0.875rem; font-weight: 800; }
.hero-copy .eyebrow, .page-cover .eyebrow { color: #ffd082; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.75rem, 7vw, 5.75rem); line-height: 1.05; margin-bottom: 1.5rem; letter-spacing: 0; }
h2 { font-size: clamp(1.75rem, 3vw, 2.625rem); line-height: 1.25; margin-bottom: 1.125rem; letter-spacing: 0; }
h3 { line-height: 1.35; }

.product-showcase {
  position: relative;
  min-height: 45rem;
  background: #050505;
  color: #fff;
  overflow: hidden;
}
.product-stage {
  position: relative;
  min-height: 38.75rem;
}
.product-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(20rem, 32.5rem) minmax(22.5rem, 1fr);
  gap: min(7vw, 5.625rem);
  align-items: center;
  padding: 5.875rem min(9vw, 8.75rem) 9.375rem;
  opacity: 0;
  pointer-events: none;
  transform: translateX(1.5rem);
  transition: opacity .42s ease, transform .42s ease;
}
.product-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.product-slide.dark { background: linear-gradient(110deg, #10131a, #28303e 48%, #513533); }
.product-slide.warm { background: linear-gradient(110deg, #fff7d6, #f1d56f 52%, #ee9940); color: #342711; }
.product-slide.cool { background: linear-gradient(110deg, #dff2ff, #a6cceb 50%, #766eac); color: #18304a; }
.product-slide.bright { background: linear-gradient(110deg, #f6fbff, #c7ecff 45%, #ffd1de); color: #263057; }
.product-slide.ink { background: linear-gradient(110deg, #151c23, #334b59 45%, #1c2932); }
.product-copy h2 { font-size: clamp(2.625rem, 6vw, 4.75rem); margin-bottom: 1.375rem; }
.product-copy p:not(.eyebrow) { font-size: 1.0625rem; max-width: 32.5rem; }
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.625rem;
  margin-top: 1.625rem;
  padding: 0 1.375rem;
  border: 1px solid currentColor;
  border-radius: 62.4375rem;
  font-weight: 800;
}
.product-art {
  min-height: 24.375rem;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.38);
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.44), transparent 25%),
    radial-gradient(circle at 28% 70%, rgba(255,255,255,.28), transparent 28%),
    rgba(255,255,255,.18);
  box-shadow: 0 1.875rem 5rem rgba(0, 0, 0, .22);
}
.product-art span {
  padding: 0.625rem 1.125rem;
  border-radius: 62.4375rem;
  background: rgba(255,255,255,.7);
  color: rgba(31,35,41,.72);
  font-size: 0.875rem;
}

/* ===== Homepage sections ===== */
.home-section-title {
  position: relative;
  margin: 0 0 2.25rem;
  padding-bottom: 0.875rem;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .06em;
}
.home-section-title::before,
.home-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0.25rem;
  border-radius: 2px;
  background: var(--brand);
}
.home-section-title::before { width: 1.75rem; }
.home-section-title::after { left: 2.125rem; width: 3.5rem; opacity: .45; }
.home-section-title--center { text-align: center; }
.home-section-title--center::before,
.home-section-title--center::after { left: 50%; transform: translateX(-50%); }
.home-section-title--center::after { margin-left: 2.125rem; transform: translateX(calc(-50% + 2.125rem)); }

.home-products {
  position: relative;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.product-bg-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.product-bg-stage .product-visual-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transform: scale(1.045);
  transition:
    opacity .72s ease,
    transform 1s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  will-change: opacity, transform;
}
.product-bg-stage .product-visual-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.product-visual-bg,
.product-visual-illustration {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.product-visual-bg {
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1) brightness(1);
}
.product-visual-foot {
  position: absolute;
  z-index: 1;
  max-width: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}
.product-visual-foot--yzhsl {
  width: min(1324px, 122.5926dvh);
  height: min(238px, 22.037dvh);
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
}
.product-visual-illustration {
  inset: auto 0 auto auto;
  top: calc(50% - 528px);
  z-index: 1;
  width: 1583px;
  height: 1068px;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0;
  transform: translateX(100vw);
  transition:
    opacity 2s ease,
    transform 2s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.product-visual-slide.active .product-visual-illustration {
  opacity: 1;
  transform: translateX(0);
  animation: product-illustration-in 2s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes product-illustration-in {
  from {
    opacity: 0;
    transform: translateX(100vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.home-products-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}
.home-products-head {
  position: absolute;
  left: 4.2708vw;
  top: 9.125rem;
  z-index: 3;
  width: 10.875rem;
  height: 3.75rem;
  margin: 0;
}
.home-products-title-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.home-products-popular-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: 0;
  transform: none;
  transition: opacity .72s ease;
  animation: none;
}
.home-products-popular-img.active {
  opacity: 1;
  transform: none;
}
.home-products-inner.is-light-text .product-corner-name {
  color: #3a3f47;
}
.product-copy-slide::before {
  content: "";
  position: absolute;
  left: 4.2708vw;
  top: 16.4375rem;
  z-index: 1;
  display: block;
  width: var(--product-title-img-width);
  height: var(--product-title-img-height, 6.3125rem);
  background: var(--product-title-img) left top / contain no-repeat;
  opacity: 0;
  transform: translateX(-100vw);
  pointer-events: none;
}
.product-copy-slide:nth-child(1) {
  --product-title-img: url("../../image/games/game-yzhsl-title.png");
  --product-title-img-width: 21.6875rem;
}
.product-copy-slide:nth-child(2) {
  --product-title-img: url("../../image/games/game-sxj-title.png");
  --product-title-img-width: 11.0625rem;
  --product-title-img-height: 3.5625rem;
}
.product-copy-slide:nth-child(3) {
  --product-title-img: url("../../image/games/game-xdrj-title.png");
  --product-title-img-width: 14.8125rem;
}
.product-copy-slide:nth-child(4) {
  --product-title-img: url("../../image/games/game-smzl-title.png");
  --product-title-img-width: 24.625rem;
}
.product-copy-slide:nth-child(5) {
  --product-title-img: url("../../image/games/game-fxc-title.png");
  --product-title-img-width: 14.5rem;
  --product-title-img-height: 3.625rem;
}
.product-copy-slide:nth-child(6) {
  --product-title-img: url("../../image/games/game-cwys-title.png");
  --product-title-img-width: 14.6875rem;
}
.product-copy-slide::after {
  content: "";
  position: absolute;
  left: 4.2708vw;
  top: 25.8125rem;
  width: 32.25rem;
  height: 2px;
  background: url("../../image/common/white-lind.png") center center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity .5s ease;
}
/* 分割线淡入淡出：在标题图文字入场动画(2s)结束前 0.3s 淡入，切换离开时立即淡出 */
.product-copy-slide.active::after {
  opacity: 1;
  transition-delay: 1.7s;
}
.home-products-inner.is-light-text .product-copy-slide::after {
  background: url("../../image/common/gray-line.png") center center / 100% 100% no-repeat;
}
/* 防线出击使用白色标题图与白色分割线 */
.product-copy-slide:nth-child(5)::before {
  filter: brightness(0) invert(1);
}
.home-products-inner.is-light-text .product-copy-slide:nth-child(5)::after {
  background-image: url("../../image/common/white-lind.png");
}
/* 宠我一生：上半屏背景偏暗，标题区与分割线保持白色 */
.home-products-inner.is-light-text .product-copy-slide:nth-child(6)::after {
  background-image: url("../../image/common/white-lind.png");
}
.product-copy-slide.active::before {
  animation: product-copy-text-in 2s cubic-bezier(.22, 1, .36, 1) both;
}
.product-copy-slide.product-title-animation-reset::before {
  animation: none !important;
}
.product-game-title {
  position: absolute;
  left: 4.427vw;
  top: 13.25rem;
  width: max-content;
  max-width: 47.5rem;
  margin: 0;
  font-size: 3.75rem;
  font-weight: 900;
  line-height: 5.5625rem;
  color: #fff;
  letter-spacing: .04em;
  transition: color .35s ease;
  opacity: 0 !important;
  pointer-events: none;
}
.product-title-region {
  display: inline-block;
  margin-left: .45em;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 3.25rem;
  vertical-align: bottom;
  letter-spacing: .08em;
}
.product-game-sub {
  position: absolute;
  left: 4.375vw;
  top: 17.1875rem;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  color: rgba(255, 255, 255, .55);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 3.25rem;
  letter-spacing: .08em;
  transition: color .35s ease;
  opacity: 0 !important;
  pointer-events: none;
}
.product-game-sub--match-title {
  width: auto;
  min-width: max-content;
  text-align: left;
  text-align-last: auto;
  white-space: nowrap;
}
.home-products-inner.is-light-text .product-game-sub {
  color: rgba(31, 35, 41, .42);
}
/* 宠我一生：副标题落在深色天空上，保持白色 */
.home-products-inner.is-light-text .product-copy-slide:nth-child(6) .product-game-sub {
  color: rgba(255, 255, 255, .78);
}
.product-game-area {
  position: absolute;
  left: 4.2708vw;
  top: 22.875rem;
  width: 12rem;
  height: 2.25rem;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-100vw);
}
.product-game-area--smzl {
  width: 14.625rem;
}
.product-copy-slide.active .product-game-area {
  animation: product-copy-text-in 2s cubic-bezier(.22, 1, .36, 1) both;
}
.product-game-desc {
  position: absolute;
  left: 4.2708vw;
  top: 28.6875rem;
  width: 53.125rem;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 1.5rem;
  line-height: 3.25rem;
  max-width: none;
  transition: color .35s ease;
}
.product-copy-slide .product-desc-line {
  opacity: 0;
  transform: translateX(-100vw);
}
.product-copy-slide.active .product-desc-line {
  animation: product-copy-text-in 2s cubic-bezier(.22, 1, .36, 1) both;
}
.product-desc-line {
  display: block;
}
.product-copy-slide.active .product-desc-line {
  animation-delay: calc((var(--line-index) + 1) * .2s);
}
@keyframes product-copy-text-in {
  from {
    opacity: 0;
    transform: translateX(-100vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.home-products-inner.is-light-text .product-game-desc {
  color: var(--muted);
}
/* 防线出击、宠我一生的游戏描述固定为白色 */
.product-copy-slide:nth-child(5) .product-game-desc,
.product-copy-slide:nth-child(6) .product-game-desc {
  color: #fff;
}
.product-copy-stage {
  position: absolute;
  inset: 0;
  margin: 0;
}
.product-copy-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(-.5rem);
  transition:
    opacity .5s ease,
    transform .5s ease;
  pointer-events: none;
  will-change: opacity, transform;
}
.product-copy-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.product-carousel-nav {
  position: absolute;
  left: 4.2708vw;
  top: 43.0625rem;
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  max-width: none;
}
.product-arrow[data-product-next] {
  position: relative;
  left: auto;
  top: auto;
}
.product-arrow[data-product-prev] {
  margin-left: -1rem;
}
.product-arrow {
  flex: 0 0 auto;
  width: 2.1875rem;
  height: 2.8125rem;
  margin-top: 3.5625rem;
  position: relative;
  z-index: 3;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: .65;
  transition: opacity .2s, transform .2s ease;
  display: grid;
  place-items: center;
}
.product-arrow::before {
  content: "";
  width: 2.1875rem;
  height: 2.8125rem;
  background: url("../../image/common/arrow-right.png") center center / contain no-repeat;
}
.product-arrow[data-product-prev]::before {
  background-image: url("../../image/common/arrow-left.png");
}
.product-arrow[data-product-next]::before {
  background-image: url("../../image/common/arrow-right.png");
}
.product-arrow:hover {
  opacity: 1;
  transform: translateY(-1px);
}
/* 小岛日记激活时箭头用灰色 */
.home-products-inner.is-light-text .product-arrow::before { background-image: url("../../image/common/arrow-right-gray.png"); }
.home-products-inner.is-light-text .product-arrow[data-product-prev]::before { background-image: url("../../image/common/arrow-left-gray.png"); }
.home-products-inner.is-light-text .product-arrow[data-product-next]::before { background-image: url("../../image/common/arrow-right-gray.png"); }
/* 防线出击、宠我一生激活时箭头用白色 */
.product-copy-stage:has(.product-copy-slide:nth-child(5).active) ~ .product-carousel-nav .product-arrow::before,
.product-copy-stage:has(.product-copy-slide:nth-child(6).active) ~ .product-carousel-nav .product-arrow::before { background-image: url("../../image/common/arrow-right.png"); }
.product-copy-stage:has(.product-copy-slide:nth-child(5).active) ~ .product-carousel-nav .product-arrow[data-product-prev]::before,
.product-copy-stage:has(.product-copy-slide:nth-child(6).active) ~ .product-carousel-nav .product-arrow[data-product-prev]::before { background-image: url("../../image/common/arrow-left.png"); }
.product-copy-stage:has(.product-copy-slide:nth-child(5).active) ~ .product-carousel-nav .product-arrow[data-product-next]::before,
.product-copy-stage:has(.product-copy-slide:nth-child(6).active) ~ .product-carousel-nav .product-arrow[data-product-next]::before { background-image: url("../../image/common/arrow-right.png"); }
.home-products .product-tabs {
  position: static;
  transform: none;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  margin-left: 1.1875rem;
  margin-right: 1.125rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.125rem;
  overflow: visible;
}
.home-products .product-tab {
  position: relative;
  z-index: 1;
  flex: 0 0 6.4375rem;
  width: 6.4375rem;
  height: 6.4375rem;
  margin-top: 1.375rem;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  overflow: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: top center;
  transition: none;
}
.home-products .product-tab.active {
  z-index: 2;
  flex: 0 0 6.4375rem;
  width: 6.4375rem;
  height: 6.4375rem;
  margin-top: 1.375rem;
  margin-left: 1.46875rem;
  margin-right: 1.46875rem;
  opacity: 1;
  transform: translate3d(0, -1.375rem, 0) scale(1.4563);
}
.home-products .product-tab img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  backface-visibility: hidden;
}
.home-products .product-tab .tab-idle {
  display: block;
}
.home-products .product-tab .tab-active {
  display: none;
}
.home-products .product-tab.active .tab-idle {
  display: none;
}
.home-products .product-tab.active .tab-active {
  display: block;
}

.product-logo-corner {
  position: absolute;
  left: 4.2708vw;
  top: 55.875rem;
  width: 16.25rem;
  height: 7.5rem;
}
.product-corner-logo,
.product-corner-name {
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  transform: translateX(-3.75rem) translateY(0.625rem) scale(.96);
  filter: blur(0.1875rem);
  transition:
    opacity .5s ease,
    transform .6s cubic-bezier(.22, 1, .36, 1),
    filter .5s ease;
  pointer-events: none;
  will-change: opacity, transform, filter;
}
.product-corner-logo {
  left: var(--logo-left, 0);
  width: var(--logo-w);
  height: var(--logo-h);
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: left bottom;
}
.product-corner-logo--yzhsl { --logo-w: 14.0625rem; --logo-h: 3.375rem;  --logo-left: 0; }
.product-corner-logo--sxj   { --logo-w: 15.2625rem; --logo-h: 4.025rem;   --logo-left: -2.5rem; }
.product-corner-logo--xdrj  { --logo-w: 13.375rem;  --logo-h: 5.125rem;  --logo-left: -0.1875rem; bottom: -0.3125rem; }
.product-corner-logo--smzl  { --logo-w: 14.8125rem; --logo-h: 8.25rem; --logo-left: -1.8125rem; bottom: -0.9375rem; }
.product-corner-logo--fxc   { --logo-w: 12.6875rem; --logo-h: 6.375rem;  --logo-left: 0; }
.product-corner-logo--cwys  { --logo-w: 17.0625rem; --logo-h: 7.625rem;  --logo-left: -1.3125rem; bottom: -1.25rem; }
.product-corner-name {
  font-size: 1.75rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  transition: color .35s ease;
}
.product-corner-logo.active,
.product-corner-name.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}

@media (max-height: 999px) and (min-width: 861px) {
  .home-products-head {
    top: 2.25rem;
  }
  .product-game-title {
    top: 9.5rem;
  }
  .product-game-sub {
    top: 14.75rem;
  }
  .product-game-desc {
    top: 23.75rem;
  }
  .product-carousel-nav {
    top: 36.8125rem;
  }
  .product-logo-corner {
    top: 50.4375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-bg-stage .product-visual-slide,
  .product-visual-illustration,
  .product-copy-slide,
  .product-copy-slide::after,
  .product-corner-logo,
  .product-corner-name,
  .home-products .product-tab {
    transition-duration: .01ms;
    transition-delay: 0ms;
    animation-duration: .01ms;
  }
}

.home-about {
  --home-edge: clamp(3.25rem, 4.2vw, 5rem);
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  background: #fffaf0;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.home-about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  background: url("../../image/about/about-office-bg.jpg") center / cover no-repeat;
  opacity: .52;
  pointer-events: none;
}
.home-about > .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  margin: 0;
}
.home-about-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.home-about-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  padding-left: 0;
  margin-left: 0;
  pointer-events: none;
}
.home-about .home-block-title {
  position: absolute;
  left: 4.2708vw;
  top: 8.75rem;
  display: block;
  width: 12.5rem;
  height: 3.375rem;
  margin: 0;
}
.home-about .home-block-title p {
  font-size: 1.875rem;
  line-height: 1.875rem;
  background: linear-gradient(180deg, #ffc15d 20%, #fff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.home-about .home-block-title h2 {
  top: 0.9375rem;
  bottom: auto;
  font-size: 2.25rem;
  line-height: 2.25rem;
}
.home-about-heading {
  position: absolute;
  left: 4.2708vw;
  top: 17.375rem;
  width: 32.25rem;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}
.home-about-heading::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 11.625rem;
  width: 32.25rem;
  height: 2px;
  background: url("../../image/common/gray-line.png") center center / 100% 100% no-repeat;
}
.home-about-heading h3 {
  margin: 0;
  color: #3f4145;
  font-size: 3.75rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 3.25rem;
}
.home-about-heading p {
  position: absolute;
  left: 0;
  top: 5.3125rem;
  margin: 0;
  color: rgba(112, 116, 124, .48);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .34em;
  line-height: 3.25rem;
}
.home-about-copy > p {
  position: absolute;
  left: 4.2708vw;
  top: 31.875rem;
  width: 49.4375rem;
  margin: 0;
  padding-left: 0;
  color: #555a62;
  font-size: 1.5rem;
  line-height: 3.25rem;
  text-align: left;
}
.home-about-text {
  position: absolute;
  left: 4.2708vw;
  top: 31.875rem;
  width: 49.4375rem;
  margin: 0;
  padding-left: 0;
  display: flex;
  flex-direction: column;
}
.about-text-line {
  display: block;
  color: #555a62;
  font-size: 1.5rem;
  line-height: 3.25rem;
  text-align: left;
  opacity: 0;
  transform: translateX(-100%);
}
.home-about.is-animated .about-text-line {
  animation: about-copy-text-in 1s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(0.6s + var(--line-index) * 0.2s);
}
.home-about-heading h3,
.home-about-heading p,
.home-about-copy > p {
  opacity: 0;
  transform: translateX(-100%);
}
.home-about.is-animated .home-about-heading h3,
.home-about.is-animated .home-about-heading p,
.home-about.is-animated .home-about-copy > p {
  animation: about-copy-text-in 1s cubic-bezier(.22, 1, .36, 1) both;
}
.home-about.is-animated .home-about-heading h3 {
  animation-delay: 0s;
}
.home-about.is-animated .home-about-heading p {
  animation-delay: .2s;
}
.home-about.is-animated .home-about-copy > p {
  animation-delay: .4s;
}
@keyframes about-copy-text-in {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.home-about-btn {
  position: absolute;
  left: 4.2708vw;
  top: 51.75rem;
  display: inline-block;
  pointer-events: auto;
  transition: transform .2s, filter .2s;
}
.home-about-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
}
.home-about-btn img {
  width: 14.6875rem;
  height: 5.5625rem;
}
.home-about-visual {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: 0;
  pointer-events: auto;
}
.home-about-stats {
  position: absolute;
  right: 0;
  bottom: -5rem;
  z-index: 3;
  width: 21.0625rem;
  height: 60.875rem;
  object-fit: fill;
  object-position: right top;
  filter: drop-shadow(0 1.125rem 1.75rem rgba(105, 62, 14, .24));
  pointer-events: none;
  opacity: 0;
  transform: translateX(100%);
}
.home-about.is-animated .home-about-stats {
  animation: about-image-in 2s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 0.4s;
}
.home-about-building {
  position: absolute;
  right: 0;
  top: auto;
  bottom: 0;
  z-index: 5;
  width: 60.875rem;
  height: 48.8125rem;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: right top;
  pointer-events: auto;
  transform: translateX(100%);
  transform-origin: right top;
  opacity: 0;
}
.home-about.is-animated .home-about-building {
  animation: about-image-in 2s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: 0.6s;
}
.home-about-building:hover {
  animation: building-shake 0.6s ease-in-out;
}
@keyframes building-shake {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  10% { transform: translateX(0) translateY(2px) rotate(-0.5deg); }
  20% { transform: translateX(0) translateY(-2px) rotate(0.5deg); }
  30% { transform: translateX(0) translateY(-2px) rotate(-0.5deg); }
  40% { transform: translateX(0) translateY(2px) rotate(0.5deg); }
  50% { transform: translateX(0) translateY(1px) rotate(-0.3deg); }
  60% { transform: translateX(0) translateY(-1px) rotate(0.3deg); }
  70% { transform: translateX(0) translateY(-1px) rotate(-0.3deg); }
  80% { transform: translateX(0) translateY(1px) rotate(0.3deg); }
  90% { transform: translateX(0) translateY(0px) rotate(-0.2deg); }
}
@keyframes about-image-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-height: 1000px) and (min-width: 861px) {
  .home-about-heading {
    top: 14.125rem;
  }
  .home-about-copy > p {
    top: 28.625rem;
  }
  .home-about-btn {
    top: 51.6875rem;
  }
}

.home-block-title {
  position: relative;
  z-index: 2;
  width: 12.5rem;
  height: 3.125rem;
  margin: 0 0 1.75rem;
  overflow: visible;
}
.home-block-title img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.home-block-title p {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  width: 12.5rem;
  height: 1.5rem;
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.5rem;
  letter-spacing: 0;
  background: linear-gradient(180deg, #ffc15d 20%, #fff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.home-block-title h2 {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  width: 12.5rem;
  height: 2.125rem;
  font-size: 2rem;
  font-weight: 900;
  line-height: 2.125rem;
  letter-spacing: 0;
  background: linear-gradient(180deg, #fff 30%, #4a4d53 70%);
  -webkit-background-clip: text;
  background-clip: text;
}

.home-join {
  --home-edge: clamp(3.25rem, 4.2vw, 5rem);
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(2.75rem, 6vh, 4.5rem) 0 clamp(3.375rem, 7vh, 5.125rem);
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.home-join > .container {
  position: relative;
  width: auto;
  max-width: none;
  margin: 0;
  flex: 1;
}
.home-join > .container > .home-block-title {
  position: absolute;
  left: 4.219vw;
  top: 8.5rem;
  width: 9.25rem;
  height: 3rem;
  margin: 0;
  padding: 0;
  z-index: 10;
}
.home-join > .container > .home-block-title img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.home-join-watermark {
  position: absolute;
  left: 45%;
  right: auto;
  top: -0.9375rem;
  z-index: 0;
  margin: 0;
  width: 54.375rem;
  height: 14.0625rem;
  object-fit: contain;
  opacity: .9;
  pointer-events: none;
  user-select: none;
  transform: translateX(-50%);
}
.home-join-grid {
  position: absolute;
  left: 10.469vw;
  right: 0;
  top: 10.8125rem;
  display: grid;
  grid-template-columns: 37.875rem 1fr;
  gap: 4.0625rem;
  align-items: start;
  padding-right: 0;
}
.home-join-photos {
  position: relative;
  display: grid;
  gap: 4.125rem;
  padding-left: 0;
  min-height: 0;
  z-index: 1;
}
.home-join-photos::before {
  content: "";
  position: absolute;
  left: -2.25rem;
  top: -2.125rem;
  width: 9.75rem;
  height: 9.75rem;
  background: #FFCE6F;
  border-radius: 0.5rem;
  z-index: 0;
}
.home-join-photos img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 0.5rem;
  object-fit: cover;
}
.home-join-main-photo {
  position: relative;
  width: 37.875rem;
  height: 20.3125rem;
  overflow: visible;
  border-radius: 0.5rem;
}
.home-join-main-photo img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .42s ease;
  border-radius: 0.5rem;
  overflow: hidden;
}
.home-join-main-photo img:not(:first-of-type) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-join-main-photo img.active {
  opacity: 1;
}
.home-join-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.0625rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.home-join-dots span {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: #d8d8d8;
}
.home-join-dots span.active { background: #ff9b50; }
.home-join-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .42);
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .22s ease, background-color .22s ease, transform .22s ease;
}
.home-join-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .75rem;
  height: .75rem;
  border-top: .1875rem solid #fff;
  border-left: .1875rem solid #fff;
}
.home-join-arrow--prev {
  left: 1rem;
}
.home-join-arrow--prev::before {
  transform: translate(-35%, -50%) rotate(-45deg);
}
.home-join-arrow--next {
  right: 1rem;
}
.home-join-arrow--next::before {
  transform: translate(-65%, -50%) rotate(135deg);
}
.home-join-main-photo:hover .home-join-arrow,
.home-join-arrow:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.home-join-arrow:hover,
.home-join-arrow:focus-visible {
  background: rgba(0, 0, 0, .58);
  transform: translateY(-50%) scale(1.04);
}
.home-join-arrow:focus-visible {
  outline: .125rem solid rgba(255, 255, 255, .9);
  outline-offset: .1875rem;
}
.home-join-photo-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: 20.625rem 16rem;
  grid-template-rows: 10.8125rem 15.25rem;
  gap: 1.1875rem;
  width: 37.8125rem;
  height: 27.25rem;
  padding: 0 0 0 0;
}
.home-join-photo-mosaic::after {
  content: "";
  position: absolute;
  right: -0.9375rem;
  bottom: -0.9375rem;
  width: 4.5rem;
  height: 4.5rem;
  background: #FFE9BF;
  border-radius: 0.5rem;
  z-index: 0;
}
.home-join-photo-mosaic img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 0.75rem;
  transition: transform .2s, filter .2s;
}
.home-join-photo-mosaic img:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
}
.home-join-photo-tall {
  grid-row: span 2;
}
.home-join-panel {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-right: 0;
}
.home-join-columns {
  display: grid;
  grid-template-columns: repeat(4, 13.5rem);
  justify-content: start;
  column-gap: 2.5rem;
  row-gap: 0;
  width: calc(100% + 10.469vw);
  margin-right: calc(-10.469vw);
  height: 25.5rem;
  padding: 1.625rem 10.469vw 2.3125rem 1.3125rem;
  border-radius: 0.5rem;
  background: linear-gradient(180deg, #ffd076 0%, #ffe3a2 100%);
}
.home-join-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 21.5625rem;
  min-height: 0;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #fff8e6;
  background-clip: padding-box;
  box-shadow: none;
}
.home-join-card h4 {
  margin: 0 1.5625rem;
  padding: 1.25rem 0 0.8125rem;
  border: 0;
  position: relative;
  color: #4e4f54;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.2;
  background: transparent;
}
.home-join-card h4::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: url("../../image/common/gray-line.png") center center / 100% 100% no-repeat;
}
.home-join-card ul {
  margin: 0;
  padding: 1rem 1.5625rem 1.375rem;
  list-style: none;
  color: #797d84;
  font-size: 1.5rem;
  line-height: 1.85;
  text-align: left;
  flex: 1;
  background: transparent;
}
.home-join-card li.muted {
  font-size: .9375rem;
  line-height: 1.4;
}
.home-join-actions {
  position: relative;
  flex: 1;
  min-height: clamp(14.875rem, 30vh, 20rem);
  margin-top: 2.1875rem;
  padding-top: 0;
  display: grid;
  grid-template-columns: 22.5rem minmax(0, 1fr);
  align-items: end;
  gap: 3.75rem;
  overflow: visible;
}
.home-join-btns {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  margin-top: 5.75rem;
  transform: none;
}
.home-join-btns a {
  display: block;
  transition: transform .2s;
}
.home-join-btns a:hover { transform: translateY(-2px); filter: brightness(1.03); }
.home-join-btns img { width: 22.5rem; height: 7.5rem; object-fit: contain; }
.home-join-qrcodes {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 1.125rem;
  margin-top: 5.75rem;
}
.home-join-qr-item {
  margin: 0;
  color: #5d5d5d;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.3;
}
.home-join-qr-item img {
  width: 14.0625rem;
  height: 14.0625rem;
  margin: 0 auto 0.625rem;
  border: 2px solid #f5c77c;
  border-radius: 0.375rem;
  background: #fff;
  object-fit: contain;
}

.home-contact {
  width: 100%;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  background: linear-gradient(180deg, #fffaf2 0%, #fff6e9 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}
.home-contact .container {
  width: 100%;
  max-width: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  height: 100%;
  max-height: none;
  gap: 0;
  padding-top: 1.25rem;
}
.home-contact .home-block-title {
  flex: 0 0 auto;
  margin-bottom: 0;
  margin-left: 4.167vw;
  padding-left: 0;
  margin-top: 0;
}
.home-contact-visual {
  width: min(99.25rem, calc(100% - 2.5rem));
  flex: 0 0 37.875rem;
  min-height: 0;
  height: 37.875rem;
  max-height: 37.875rem;
  margin: 1.875rem auto 0;
  outline: 1px solid rgba(255, 178, 80, .9);
  border-radius: 0.5rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 49.8125rem;
  background: #fff;
}
.home-contact-map {
  position: relative;
  z-index: 0;
  min-width: 0;
  height: 37.875rem;
  background: #f5efe4;
}
.home-contact-map-canvas {
  width: 100%;
  height: 100%;
}
.home-contact-map .leaflet-control-container {
  display: none;
}
.contact-map-pin {
  position: relative;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}
.contact-map-pin-title {
  position: absolute;
  left: 0;
  bottom: 0.95rem;
  display: block;
  padding: 0.625rem 1.125rem;
  border-radius: 62.4375rem;
  background: #fff;
  color: #333842;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 0.625rem 1.75rem rgba(48, 42, 32, .18);
  border: 1px solid rgba(255, 178, 80, .78);
  transform: translateX(-50%);
}
.contact-map-pin-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.4375rem;
  width: 0.875rem;
  height: 0.875rem;
  background: #fff;
  border-right: 1px solid rgba(255, 178, 80, .78);
  border-bottom: 1px solid rgba(255, 178, 80, .78);
  transform: translateX(-50%) rotate(45deg);
}
.contact-map-pin-dot {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  border: 0.1875rem solid #fff;
  border-radius: 50%;
  background: #e53935;
  box-shadow: 0 0.25rem 0.75rem rgba(229, 57, 53, .35);
  transform: translate(-50%, -50%);
}
.contact-map-pin-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(229, 57, 53, .16);
  transform: translate(-50%, -50%);
  z-index: -1;
}
.contact-map-pin-company {
  position: absolute;
  left: 0;
  top: 0.95rem;
  display: block;
  color: #333842;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 2px 0.5rem rgba(255, 255, 255, .92);
  transform: translateX(-50%);
}
.home-contact-company {
  width: 49.8125rem;
  height: 37.875rem;
  object-fit: cover;
}
.home-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 30rem);
  justify-content: space-between;
  flex: 0 0 auto;
  width: min(99.25rem, calc(100% - 2.5rem));
  margin: 2.8125rem auto 0;
  padding: 0;
}
.home-contact-cards article {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
  width: 30rem;
  height: 9rem;
  padding: 1.25rem 1.875rem;
  background: #fff;
  border: 1px solid rgba(255, 178, 80, .72);
  border-radius: 0.5rem;
}
.home-contact-icon {
  flex: 0 0 5.3125rem;
  width: 5.3125rem;
  height: 5.3125rem;
  object-fit: contain;
}
.home-contact-cards h4 {
  margin: 0;
  color: #555961;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 2.1875rem;
}
.home-contact-cards p {
  margin: 0;
  color: #8b8f97;
  font-size: 1rem;
  line-height: 2.1875rem;
}

.product-tabs {
  position: absolute;
  left: 50%;
  bottom: 2.625rem;
  transform: translateX(-50%);
  z-index: 5;
  width: min(45rem, calc(100% - 2.5rem));
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0.875rem;
}
.product-tab {
  width: 4.125rem;
  height: 4.125rem;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 1.125rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.58)),
    var(--soft);
  color: #49371d;
  cursor: pointer;
  box-shadow: 0 0.75rem 1.75rem rgba(0,0,0,.16);
  transition: width .22s ease, height .22s ease, transform .22s ease, border-color .22s ease;
}
.product-tab span {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
}
.product-tab.active {
  width: 6rem;
  height: 6rem;
  transform: translateY(-0.5rem);
  border-color: #ffd082;
}

/* Home page desktop scaling and low-height adjustments. */
@media (min-width: 1801px) and (min-height: 1000px) {
  .home-contact .container {
    padding-top: 3.125rem;
  }
  .home-contact-visual {
    margin-top: 6.25rem;
  }
}

@media (max-width: 1800px) {
  .home-join-grid {
    grid-template-columns: 37.875rem 1fr;
    gap: clamp(1.75rem, 3vw, 3.25rem);
  }
  .home-join-photos {
    padding-left: clamp(1.5rem, 4vw, 5rem);
  }
  .home-join-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
    gap: clamp(1.125rem, 2vw, 2rem);
    padding-left: clamp(1.125rem, 1.6vw, 1.5625rem);
  }
  .home-join-card h4 {
    margin-inline: clamp(1rem, 1.4vw, 1.5625rem);
    font-size: clamp(1.375rem, 1.55vw, 1.75rem);
  }
  .home-join-card ul {
    padding-inline: clamp(1rem, 1.4vw, 1.5625rem);
    font-size: clamp(1.125rem, 1.35vw, 1.5rem);
  }
  .home-join-actions {
    grid-template-columns: minmax(16.25rem, 22.5rem) minmax(0, 1fr);
    gap: clamp(1.75rem, 3vw, 3.75rem);
  }
  .home-join-btns img {
    width: min(22.5rem, 100%);
  }
  .home-join-qr-item {
    font-size: clamp(1.125rem, 1.35vw, 1.5rem);
  }
  .home-join-qr-item img {
    width: clamp(9.375rem, 12vw, 14.0625rem);
    height: clamp(9.375rem, 12vw, 14.0625rem);
  }
  .home-contact-visual {
    width: min(93.75rem, calc(100% - 5rem));
    grid-template-columns: minmax(0, 1fr) minmax(26.25rem, 42%);
  }
  .home-contact-company {
    width: 100%;
  }
  .home-contact-cards {
    width: min(93.75rem, calc(100% - 5rem));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
  }
  .home-contact-cards article {
    width: 100%;
  }
}

@media (max-width: 1500px) {
  .home-about {
    --home-edge: clamp(2.25rem, 3.6vw, 3.5rem);
  }
  .home-about-wrap {
    grid-template-columns: minmax(22.5rem, 42%) minmax(0, 58%);
  }
  .home-about .home-block-title {
    margin-bottom: clamp(4.5rem, 10vh, 7rem);
  }
  .home-about-heading h3 {
    font-size: 2.25rem;
  }
  .home-about-copy > p {
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 2.25rem;
  }
  .home-about-building {
    width: min(45rem, calc(56vw - 4.375rem));
    max-width: 60.875rem;
  }
  .home-join {
    --home-edge: clamp(1.75rem, 3.4vw, 3.5rem);
  }
  .home-join-grid {
    grid-template-columns: minmax(0, 38vw) minmax(0, 54vw);
    gap: clamp(1.5rem, 2.4vw, 2.25rem);
  }
  .home-join-photos {
    padding-left: 0;
  }
  .home-join > .container > .home-block-title {
    margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
  }
  .home-contact-visual,
  .home-contact-cards {
    width: min(80rem, calc(100% - 3.5rem));
  }
}

@media (max-height: 900px) and (min-width: 861px) {
  .hero-title-wrap {
    bottom: auto;
    width: min(43.125rem, 42vw, calc(100vw - 10rem));
  }
  .hero-scroll-guide {
    bottom: 1.375rem;
  }
  .hero-scroll-guide img {
    height: 5.75rem;
    width: auto;
  }
  .home-products {
    padding-top: 5.125rem;
    padding-bottom: 6rem;
  }
  .home-products-inner {
    min-height: max(22.5rem, calc(100dvh - 11.125rem));
  }
  .home-products-head {
    margin-bottom: 2rem;
  }
  .home-products .product-tab {
    flex-basis: 3.5rem;
    width: 3.5rem;
    height: 3.5rem;
  }
  .home-products .product-tab.active {
    flex-basis: 6.625rem;
    width: 6.625rem;
    height: 6.625rem;
  }
  .home-about {
    min-height: max(45rem, 100dvh);
    padding-top: 2.25rem;
  }
  .home-about-wrap,
  .home-about-visual {
    min-height: 42.75rem;
  }
  .home-about .home-block-title {
    margin-bottom: 4.375rem;
  }
  .home-about-heading {
    margin-bottom: 1.25rem;
    padding-bottom: 1.625rem;
  }
  .home-about-copy > p {
    margin-bottom: 1.75rem;
    line-height: 1.85;
  }
  .home-about-building {
    max-height: 38.75rem;
  }
  .home-join {
    min-height: max(47.5rem, 100dvh);
    padding-top: 2.125rem;
    padding-bottom: 2.625rem;
  }
  .home-join > .container {
    justify-content: flex-start;
  }
  .home-join > .container > .home-block-title {
    margin-bottom: 1.75rem;
  }
  .home-join-main-photo {
    width: min(33.75rem, 100%);
  }
  .home-join-photo-mosaic {
    width: min(33.75rem, 100%);
  }
  .home-join-columns {
    min-height: 20.625rem;
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
  }
  .home-join-card {
    height: 18.375rem;
  }
  .home-join-card h4 {
    padding-top: 1rem;
    padding-bottom: 0.625rem;
    font-size: 1.375rem;
  }
  .home-join-card ul {
    padding-top: 0.75rem;
    font-size: 1.125rem;
    line-height: 1.65;
  }
  .home-join-actions {
    min-height: 13.125rem;
    margin-top: 1.5rem;
  }
  .home-join-watermark {
    width: min(45rem, 46vw);
    height: auto;
  }
  .home-join-btns,
  .home-join-qrcodes {
    margin-top: 3.5rem;
  }
  .home-join-btns img {
    height: 5.625rem;
  }
  .home-join-qr-item img {
    width: 9.625rem;
    height: 9.625rem;
  }
  .home-contact {
    min-height: max(52rem, 100dvh);
    height: auto;
  }
  .home-contact .container {
    height: auto;
    padding-top: 1.125rem;
  }
  .home-contact-visual {
    flex-basis: auto;
    width: min(99.25rem, calc(100% - 2.5rem)) !important;
    height: 33.25rem;
    max-height: 33.25rem;
    margin-top: 4.375rem;
  }
  .home-contact-map {
    height: 100%;
  }
  .home-contact-company {
    height: 100%;
  }
  .home-contact-cards {
    width: min(99.25rem, calc(100% - 2.5rem)) !important;
    margin-top: 1.625rem;
  }
  .home-contact-cards article {
    height: 7rem;
    padding-block: 0.875rem;
  }
  .home-contact-icon {
    flex-basis: 4rem;
    width: 4rem;
    height: 4rem;
  }
  .home-contact-cards h4 {
    font-size: 1.375rem;
    line-height: 1.3;
  }
}

@media (max-height: 780px) and (min-width: 861px) {
  html:has(body.page-home) {
    scroll-snap-type: y proximity;
  }
  .home-about,
  .home-join,
  .home-contact {
    overflow: visible;
  }
  .home-about {
    min-height: 43.75rem;
  }
  .home-join {
    min-height: 45rem;
  }
  .home-contact {
    min-height: 43.75rem;
  }
  .home-contact-visual {
    height: 24.375rem;
  }
  .home-contact-cards article {
    height: 6.25rem;
  }
}

@media (max-height: 1000px) {
  .home-join > .container > .home-block-title {
    top: -2.75rem !important;
  }
  .home-join-grid {
    top: 2.0625rem !important;
  }
  .home-join-photos {
    gap: 2.5rem !important;
  }
  .home-join-photos::before {
    left: -1rem !important;
    top: -1.125rem !important;
  }
}

@media (max-width: 1180px) {
  .home-join-grid {
    grid-template-columns: minmax(21.875rem, .82fr) minmax(0, 1.18fr);
    gap: 1.75rem;
  }
  .home-about-wrap {
    grid-template-columns: minmax(21.875rem, .82fr) minmax(0, 1.18fr);
    gap: 1.75rem;
  }
  .home-join-photos {
    width: auto;
    margin: 0;
    padding-left: 0;
  }
  .home-join-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .home-contact-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }
  .home-contact-cards article {
    width: 100%;
    padding: 1.125rem 1.25rem;
  }
}

@media (max-width: 980px) {
  .home-join-grid,
  .home-about-wrap {
    grid-template-columns: 1fr;
  }
  .home-join-photos {
    width: min(42.5rem, 100%);
    margin: 0 auto;
  }
}

/* PC rem adaptation: keep the 1920 x 1080 design canvas proportional. */
body.page-home .home-hero,
body.page-home .home-products,
body.page-home .home-about,
body.page-home .home-join,
body.page-home .home-contact {
  width: 100%;
  min-width: var(--pc-min-width);
  height: 100vh;
  height: 100dvh;
  min-height: var(--pc-stage-height);
  padding: 0;
  overflow: hidden;
}

body.page-home .hero-bg,
body.page-home .home-products-inner,
body.page-home .home-about > .container,
body.page-home .home-join > .container,
body.page-home .home-contact .container {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: var(--pc-stage-height);
  margin: 0;
}

body.page-home .hero-bg {
  width: 100%;
}

body.page-home .hero-title-wrap {
  left: 50%;
  top: calc(var(--pc-stage-top) + 16.9375rem);
  width: 53.5625rem;
  max-width: none;
}

body.page-home .hero-title-img {
  filter: drop-shadow(0 .625rem 1.75rem rgba(0, 0, 0, .28));
  animation: hero-title-slide-in 2s cubic-bezier(.22, 1, .36, 1) both;
}

body.page-home .hero-scroll-guide {
  top: calc(var(--pc-stage-top) + 48.75rem);
  bottom: auto;
}

body.page-home .hero-scroll-guide img {
  width: 1.375rem;
  height: 8.125rem;
}

@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); opacity: .95; filter: drop-shadow(0 0 .35rem rgba(255, 255, 255, .28)); }
  50% { transform: translateX(-50%) translateY(.875rem) scale(1.12); opacity: .45; filter: drop-shadow(0 0 1.125rem rgba(255, 255, 255, .72)); }
}

body.page-home .home-products {
  padding: 0;
}

body.page-home .home-products-head {
  left: 4.2708vw;
  top: max(calc(var(--pc-stage-top) + 8.75rem), calc(var(--pc-header-height) + 20px));
  width: 10.875rem;
  height: 3.75rem;
}

body.page-home .home-products-title-wrap,
body.page-home .home-products-popular-img {
  width: 100%;
  height: 100%;
}

body.page-home .product-visual-illustration {
  transform: translateX(3.5rem);
}

body.page-home .product-visual-slide.active .product-visual-illustration {
  transform: translateX(0);
}

body.page-home .product-visual-slide--xdrj .product-visual-illustration {
  top: auto;
  right: 0;
  bottom: 0;
  width: auto;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: right bottom;
}

body.page-home .product-game-title {
  left: 4.427vw;
  top: calc(var(--pc-stage-top) + 13.875rem);
  max-width: 47.5rem;
  font-size: 3.75rem;
  line-height: 5.5625rem;
}

body.page-home .product-copy-slide::before {
  left: 4.2708vw;
  top: calc(var(--pc-stage-top) + 16.4375rem);
}

body.page-home .product-game-sub {
  left: 4.375vw;
  top: calc(var(--pc-stage-top) + 19.125rem);
  font-size: 1.5rem;
  line-height: 3.25rem;
}

body.page-home .product-game-area {
  left: 4.2708vw;
  top: calc(var(--pc-stage-top) + 24.8125rem);
}

body.page-home .product-copy-slide::after {
  left: 4.2708vw;
  top: calc(var(--pc-stage-top) + 27.75rem);
  width: 32.25rem;
  height: 2px;
}

body.page-home .product-game-sub::after {
  top: 6.125rem;
  width: 32.25rem;
  height: .125rem;
}

body.page-home .product-game-desc {
  left: 4.2708vw;
  top: calc(var(--pc-stage-top) + 30.625rem);
  width: 53.125rem;
  font-size: 1.5rem;
  line-height: 3.25rem;
}

body.page-home .product-copy-slide:nth-child(2)::after,
body.page-home .product-copy-slide:nth-child(3)::after,
body.page-home .product-copy-slide:nth-child(5)::after {
  top: calc(var(--pc-stage-top) + 22.125rem);
}

body.page-home .product-copy-slide:nth-child(2) .product-game-desc,
body.page-home .product-copy-slide:nth-child(3) .product-game-desc,
body.page-home .product-copy-slide:nth-child(5) .product-game-desc {
  top: calc(var(--pc-stage-top) + 25rem);
}

body.page-home .product-copy-slide .product-game-title,
body.page-home .product-copy-slide .product-game-sub,
body.page-home .product-copy-slide .product-desc-line {
  transform: translateX(-100vw);
}

@keyframes product-copy-text-in {
  from {
    opacity: 0;
    transform: translateX(-100vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

body.page-home .product-carousel-nav {
  left: 4.2708vw;
  top: calc(var(--pc-stage-top) + 43.0625rem);
}

body.page-home .product-arrow[data-product-next] {
  left: auto;
}

body.page-home .product-arrow {
  width: 2.1875rem;
  height: 2.8125rem;
  margin-top: 3.5625rem;
}

body.page-home .product-arrow::before {
  width: 2.1875rem;
  height: 2.8125rem;
}

body.page-home .home-products .product-tabs {
  margin-left: 1.1875rem;
  margin-right: 1.125rem;
  gap: 1.75rem;
}

body.page-home .home-products .product-tab {
  flex-basis: 6.4375rem;
  width: 6.4375rem;
  height: 6.4375rem;
  margin-top: 1.375rem;
  border-radius: .75rem;
}

body.page-home .home-products .product-tab.active {
  flex-basis: 6.4375rem;
  width: 6.4375rem;
  height: 6.4375rem;
  margin-left: 1.46875rem;
  margin-right: 1.46875rem;
}

body.page-home .product-logo-corner {
  left: 4.2708vw;
  top: calc(var(--pc-stage-top) + 55.875rem);
  width: 16.25rem;
  height: 7.5rem;
}

body.page-home .product-corner-logo {
  left: var(--logo-left, 0);
  width: var(--logo-w);
  height: var(--logo-h);
  max-width: none;
  max-height: none;
}

body.page-home .product-corner-name {
  font-size: 1.75rem;
}

body.page-home .product-corner-logo,
body.page-home .product-corner-name {
  transform: translateX(-3.75rem) translateY(.625rem) scale(.96);
  filter: blur(.1875rem);
}

body.page-home .product-corner-logo.active,
body.page-home .product-corner-name.active {
  transform: translateY(0);
  filter: blur(0);
}

body.page-home .home-block-title {
  width: 12.5rem;
  height: 3.125rem;
  margin: 0 0 1.75rem;
}

body.page-home .home-block-title p {
  width: 12.5rem;
  height: 1.5rem;
  font-size: 1.375rem;
  line-height: 1.5rem;
}

body.page-home .home-block-title h2 {
  width: 12.5rem;
  height: 2.125rem;
  font-size: 2rem;
  line-height: 2.125rem;
}

body.page-home .home-about {
  --home-edge: 5rem;
  padding: 0;
}

body.page-home .home-about .home-block-title {
  left: 4.2708vw;
  top: max(calc(var(--pc-stage-top) + 8.75rem), calc(var(--pc-header-height) + 20px));
  width: 12.5rem;
  height: 3.375rem;
}

body.page-home .home-about .home-block-title p {
  font-size: 1.875rem;
  line-height: 1.875rem;
}

body.page-home .home-about .home-block-title h2 {
  top: .9375rem;
  font-size: 2.25rem;
  line-height: 2.25rem;
}

body.page-home .home-about-heading {
  left: 4.2708vw;
  top: calc(var(--pc-stage-top) + 17.375rem);
  width: 32.25rem;
}

body.page-home .home-about-heading::after {
  left: .0625rem;
  top: 11.625rem;
  width: 32.25rem;
  height: 2px;
}

body.page-home .home-about-heading h3 {
  font-size: 3.75rem;
  line-height: 3.25rem;
}

body.page-home .home-about-heading p {
  top: 5.3125rem;
  font-size: 1.5rem;
  line-height: 3.25rem;
  font-weight: 400;
}

body.page-home .home-about-copy > p {
  left: 4.2708vw;
  top: calc(var(--pc-stage-top) + 31.875rem);
  width: 60rem;
  font-size: 1.5rem;
  line-height: 3.25rem;
}

body.page-home .home-about-text {
  left: 4.2708vw;
  top: calc(var(--pc-stage-top) + 31.875rem);
  width: 60rem;
}

body.page-home .about-text-line {
  font-size: 1.5rem;
  line-height: 3.25rem;
}

body.page-home .home-about-heading h3,
body.page-home .home-about-heading p,
body.page-home .home-about-copy > p {
  transform: translateX(-100%);
}

@keyframes about-copy-text-in {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

body.page-home .home-about-btn {
  left: 4.2708vw;
  top: calc(var(--pc-stage-top) + 51.75rem + 20px);
}

body.page-home .home-about-btn img {
  width: 14.6875rem;
  height: 5.5625rem;
}

body.page-home .home-about-stats {
  right: 0;
  bottom: -5rem;
  width: 21.0625rem;
  height: 60.875rem;
  filter: drop-shadow(0 1.125rem 1.75rem rgba(105, 62, 14, .24));
}

body.page-home .home-about-building {
  right: 0;
  bottom: 0;
  width: 60.875rem;
  height: 48.8125rem;
  max-width: none;
  max-height: none;
}

@media (max-height: 1000px) and (min-width: 861px) {
  body.page-home .home-about {
    overflow: hidden;
  }

  body.page-home .home-about .home-block-title {
    left: 4.2708vw;
    top: max(calc(var(--pc-stage-top) + 8.75rem), calc(var(--pc-header-height) + 20px));
  }

  body.page-home .home-about-heading {
    left: 122px;
    top: calc(var(--pc-stage-top) + 14.125rem + 80px);
  }

  body.page-home .home-about-copy > p,
  body.page-home .home-about-text {
    left: 122px;
    top: calc(var(--pc-stage-top) + 28.625rem + 80px);
  }

  body.page-home .home-about-btn {
    left: 122px;
    top: calc(var(--pc-stage-top) + 45.4375rem + 100px);
  }

  body.page-home .home-about-stats {
    right: 0;
    bottom: -180px;
    width: auto;
    height: min(974px, calc(100dvh + 180px));
  }

  body.page-home .home-about-building {
    right: 0;
    bottom: -100px;
    width: auto;
    height: min(781px, calc(100dvh + 100px));
  }
}

@media (max-width: 860px) {
  body.page-home .home-about {
    overflow: hidden;
  }

  body.page-home .home-about-visual {
    display: none;
  }
}

body.page-home .home-join {
  --home-edge: 5rem;
  padding: 0;
}

body.page-home .home-join > .container > .home-block-title {
  left: 4.2708vw;
  top: max(calc(var(--pc-stage-top) + 8.75rem), calc(var(--pc-header-height) + 20px)) !important;
  width: 9.25rem;
  height: 3rem;
}

body.page-home .home-join-grid {
  left: 50%;
  right: auto;
  top: calc(var(--pc-stage-top) + 15.0625rem) !important;
  width: 91.875rem;
  grid-template-columns: 34.0625rem 53.75rem;
  gap: 4.0625rem;
  transform: translateX(-50%);
}

body.page-home .home-join-panel {
  width: 53.75rem;
  max-width: 100%;
}

body.page-home .home-join-photos {
  gap: 4.125rem !important;
  padding-left: 0 !important;
  max-height: none;
}

body.page-home .home-join-photos::before {
  left: -1.25rem !important;
  top: -1.125rem !important;
  width: 8.75rem;
  height: 8.75rem;
  border-radius: .5rem;
}

body.page-home .home-join-photos img {
  border-radius: .5rem;
}

body.page-home .home-join-main-photo {
  width: 34.0625rem;
  height: 18.3125rem;
  padding: 0;
  border-radius: .5rem;
}

body.page-home .home-join-main-photo img,
body.page-home .home-join-main-photo img:not(:first-of-type) {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: .5rem;
}

body.page-home .home-join-dots {
  left: 0;
  bottom: -1.0625rem;
  gap: .5rem;
}

body.page-home .home-join-dots span {
  width: .6125rem;
  height: .6125rem;
}

body.page-home .home-join-photo-mosaic {
  grid-template-columns: 18.125rem 13.875rem;
  grid-template-rows: 9.375rem 12.625rem;
  column-gap: 2.0625rem;
  row-gap: 1.9375rem;
  width: 34.0625rem;
  height: 23.9375rem;
  padding: 0;
}

body.page-home .home-join-photo-mosaic img:nth-child(3) {
  width: 13.8125rem;
}

body.page-home .home-join-photo-mosaic::after {
  right: -.9375rem;
  bottom: -.9375rem;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: .5rem;
}

body.page-home .home-join-columns {
  width: 53.75rem;
  max-width: 100%;
  grid-template-columns: repeat(4, minmax(0, 11.875rem));
  justify-content: start;
  column-gap: 1.25rem;
  row-gap: 0;
  height: 22.5rem;
  min-height: 0;
  padding: 1.375rem 1.25rem;
  border-radius: .5rem;
}

body.page-home .home-join-card {
  height: 19.75rem;
  border-radius: .5rem;
}

body.page-home .home-join-card h4 {
  margin: 0 1.25rem;
  padding: 1.125rem 0 .75rem;
  font-size: 1.625rem;
}

body.page-home .home-join-card ul {
  padding: .875rem 1.25rem 1.125rem;
  font-size: 1.3125rem;
  line-height: 1.76;
}

body.page-home .home-join-card li.muted {
  font-size: .9375rem;
}

body.page-home .home-join-actions {
  width: 53.75rem;
  max-width: 100%;
  min-height: 14.25rem;
  margin-top: 2.1875rem;
  grid-template-columns: 20.5rem minmax(0, 1fr);
  gap: 3.75rem;
}

body.page-home .home-join-watermark {
  left: 50%;
  top: -.625rem;
  width: 53.75rem;
  height: 14.25rem;
  transform: translateX(-50%);
}

body.page-home .home-join-btns {
  gap: 2.125rem;
  margin-top: 5.625rem;
}

body.page-home .home-join-btns img {
  width: 20.5rem;
  height: 6.75rem;
}

body.page-home .home-join-qrcodes {
  gap: 3.75rem;
  margin-top: 5.625rem;
}

body.page-home .home-join-qr-item {
  font-size: 1.5rem;
}

body.page-home .home-join-qr-item img {
  width: 12.8125rem;
  height: 12.8125rem;
  margin: 0 auto .625rem;
  border-width: .125rem;
  border-radius: .375rem;
}

@media (min-width: 1366px) and (max-width: 1680px) {
  body.page-home .home-join-grid {
    right: auto;
    width: min(91.875rem, calc(100vw - 7.5rem));
    grid-template-columns: minmax(29rem, 34.0625rem) minmax(38rem, 53.75rem);
    gap: clamp(2rem, 3vw, 4.0625rem);
  }

  body.page-home .home-join-main-photo {
    width: min(34.0625rem, 32.5vw);
    height: min(18.3125rem, 17.46vw);
  }

  body.page-home .home-join-photo-mosaic {
    grid-template-columns: minmax(0, 1.289fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, .709fr) minmax(0, 1fr);
    column-gap: clamp(1.25rem, 1.96vw, 2.0625rem);
    row-gap: clamp(1.125rem, 1.84vw, 1.9375rem);
    width: min(34.0625rem, 32.5vw);
    height: min(23.9375rem, 22.83vw);
  }

  body.page-home .home-join-panel,
  body.page-home .home-join-columns {
    width: min(53.75rem, max(38rem, calc(100vw - 48rem)));
  }

  body.page-home .home-join-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 1rem;
    padding-inline: 1rem;
  }

  body.page-home .home-join-card h4 {
    margin-inline: 1rem;
    font-size: clamp(1.375rem, 1.45vw, 1.625rem);
  }

  body.page-home .home-join-card ul {
    padding-inline: 1rem;
    font-size: clamp(1.125rem, 1.2vw, 1.3125rem);
    line-height: 1.75;
  }

  body.page-home .home-join-actions {
    width: min(53.75rem, max(38rem, calc(100vw - 48rem)));
    grid-template-columns: minmax(17rem, 20.5rem) minmax(0, max-content);
    justify-content: space-between;
    gap: 2rem;
  }

  body.page-home .home-join-watermark {
    width: min(53.75rem, max(38rem, calc(100vw - 48rem)));
  }

  body.page-home .home-join-btns img {
    width: min(20.5rem, 100%);
    height: auto;
  }

  body.page-home .home-join-qr-item img {
    width: clamp(10.5rem, 12.2vw, 12.8125rem);
    height: clamp(10.5rem, 12.2vw, 12.8125rem);
  }

  body.page-home .home-join-qrcodes {
    gap: 2rem;
    justify-content: flex-end;
  }
}

body.page-home .home-contact {
  width: 100%;
  padding: 0;
}

body.page-home .home-contact .container {
  position: relative;
  display: block;
  padding-top: 0;
}

body.page-home .home-contact .home-block-title {
  position: absolute;
  left: 3.5708vw;
  top: max(calc(var(--pc-stage-top) + 8.75rem), calc(var(--pc-header-height) + 20px));
  margin: 0;
  padding-left: 0;
}

body.page-home .home-contact-visual {
  position: absolute;
  left: calc(50% - 49.625rem);
  top: calc(var(--pc-stage-top) + 15.625rem);
  width: min(99.25rem, calc(100vw - 8rem));
  height: 37.875rem;
  max-height: none;
  margin: 0;
  grid-template-columns: minmax(0, 1fr) 49.8125rem;
  outline-width: .0625rem;
  border-radius: .5rem;
}

body.page-home .home-contact-map {
  height: 100%;
}

body.page-home .home-contact-company {
  width: 49.8125rem;
  height: 37.875rem;
}

body.page-home .contact-map-pin {
  width: 0 !important;
  height: 0 !important;
}

body.page-home .contact-map-pin-title {
  bottom: .95rem;
  padding: .625rem 1.125rem;
  font-size: 1.125rem;
  box-shadow: 0 .625rem 1.75rem rgba(48, 42, 32, .18);
}

body.page-home .contact-map-pin-title::after {
  bottom: -.4375rem;
  width: .875rem;
  height: .875rem;
}

body.page-home .contact-map-pin-dot {
  width: 1.125rem;
  height: 1.125rem;
  border-width: .1875rem;
  box-shadow: 0 .25rem .75rem rgba(229, 57, 53, .35);
}

body.page-home .contact-map-pin-dot::after {
  width: 2rem;
  height: 2rem;
}

body.page-home .contact-map-pin-company {
  top: .95rem;
  font-size: 2rem;
  text-shadow: 0 .125rem .5rem rgba(255, 255, 255, .92);
}

body.page-home .home-contact-cards {
  position: absolute;
  left: calc(50% - 49.625rem);
  top: calc(var(--pc-stage-top) + 56.3125rem);
  width: min(99.25rem, calc(100vw - 8rem));
  margin: 0;
  grid-template-columns: repeat(3, minmax(28rem, 30rem));
  gap: 0;
  justify-content: space-between;
}

body.page-home .home-contact-cards article {
  gap: 1.25rem;
  width: 30rem;
  height: 9rem;
  padding: 1.25rem 1.875rem;
  border-radius: .5rem;
}

body.page-home .home-contact-icon {
  flex-basis: 5.3125rem;
  width: 5.3125rem;
  height: 5.3125rem;
}

body.page-home .home-contact-cards h4 {
  font-size: 1.75rem;
  line-height: 2.1875rem;
}

body.page-home .home-contact-cards p {
  font-size: 1rem;
  line-height: 2.1875rem;
}

/* 保持 1920x911 及以下高度与 1920x1080 相同的宽度 */
@media (max-height: 911px) and (min-width: 861px) {
  body.page-home .home-contact .home-block-title {
    top: max(calc(var(--pc-stage-top) + 8.75rem), calc(var(--pc-header-height) + 20px));
  }
  
  body.page-home .home-contact-visual {
    top: calc(var(--pc-stage-top) + 13.125rem);
    width: 99.25rem !important;
    height: 41rem !important;
    max-height: 41rem !important;
  }
  
  body.page-home .home-contact-map {
    height: 100%;
  }
  
  body.page-home .home-contact-company {
    height: 100%;
  }
  
  body.page-home .home-contact-cards {
    width: 99.25rem !important;
  }
}