* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #fff; }
body { margin: 0; color: #2c2c2c; font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif; }
p, ol { margin: 0; padding: 0; }
img { display: block; border: 0; }
.page-viewport { position: relative; margin: 0 auto; overflow: visible; }
body { overflow-x: clip; }
.product-arrow { position: absolute; z-index: 30; display: block; width: 67px; height: 67px; border-radius: 50%; }
.arrow-ring { position: absolute; inset: 0; width: 67px; height: 67px; }
.arrow-center { position: absolute; inset: 7px; display: grid; place-items: center; border-radius: 50%; background: #2b685d; }
.arrow-glyph { width: 20px; height: 23px; transform: rotate(90deg); }
.product-arrow[data-direction="right"] .arrow-glyph { transform: rotate(-90deg); }
.product-arrow:hover .arrow-center { background: #367e6f; }
.product-arrow:focus-visible { outline: 3px solid #cb8461; outline-offset: 5px; }
.design-page { position: relative; transform-origin: top left; background: #fff; }
.hero-slide { position: absolute; left: 0; top: 0; width: 100%; height: 677px; z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 650ms ease-in-out, visibility 0s 650ms; }
.hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity 650ms ease-in-out; }
.hero-slide.is-active .hotspot { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .hero-slide, .hero-slide.is-active { transition: none; } }
.hotspot { position: absolute; display: block; z-index: 20; border-radius: 4px; cursor: pointer; -webkit-tap-highlight-color: #ffffff33; }
.hotspot:hover { background: #ffffff0d; }
.hotspot:focus-visible { outline: 3px solid #cb8461; outline-offset: 5px; background: #ffffff22; }
.footer-nav { position: absolute; right: 72px; display: flex; align-items: center; gap: 25px; z-index: 25; height: 40px; font-size: 14px; }
.footer-nav a { color: rgba(255,255,255,.55); text-decoration: none; white-space: nowrap; padding: 8px 0; transition: color .15s ease; }
.footer-nav a:hover, .footer-nav a[aria-current="page"] { color: #fff; }
.footer-nav a[aria-current="page"] { font-weight: 600; }
.footer-nav a:focus-visible { outline: 2px solid #cb8461; outline-offset: 5px; }
::selection { color: #fff; background: #245d51; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .page-viewport { width: 100% !important; height: auto !important; overflow: visible; }
  .design-page { zoom: .48; transform: none !important; }
  .hotspot { display: none; }
}