@charset "UTF-8";
/* ========================
  🎨 Design Tokens - Variables
======================== */
/* Color */
/* Breakpoints（對齊 Bootstrap） */
/* Font Family */
/* Section Spacing */
/*
  content-edge：內容版心與瀏覽器邊界的預設距離
  section-py：section 上下留白
  如果不需要上下 padding，可用 .section-py--mobile-0 等類別局部去除。
*/
/* Section Spacing - Mobile */
/* Section Spacing - Desktop */
/* Text Block Padding */
/* Layout Pattern */
:root {
  --pg-light: #fff;
  --pg-dark: #161514;
  --pg-txt: #5b5b5b;
  --pg-txt-light: #b9b9b9;
}

html {
  background: #524031;
  scroll-behavior: smooth;
}

.hero-wrap {
  container-type: inline-size;
  overflow: hidden;
  background: #000;
}
.hero-wrap > video {
  display: block;
  width: 100%;
  background: #000;
  -webkit-transform: scale(1.01) translateZ(0);
  transform: scale(1.01) translateZ(0);
}

.hero-logo {
  left: 22.98%;
  top: 7.24%;
  width: 14%;
}

.hero-menu {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-menu a {
  position: absolute;
  pointer-events: auto;
  top: 8.2%;
  z-index: 2;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-weight: 300;
  font-size: 1.35cqw;
  letter-spacing: 0.2em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s;
}
.hero-menu a:hover {
  opacity: 0.6;
}
.hero-menu a:nth-child(1) {
  left: 40.5%;
}
.hero-menu a:nth-child(2) {
  left: 50.3%;
}
.hero-menu a:nth-child(3) {
  left: 58.1%;
}
.hero-menu a:nth-child(4) {
  left: 69.7%;
}

.video-swap .swap-txt {
  z-index: 2;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.video-swap .swap-img {
  z-index: 1;
}
.video-swap.is-swapped .swap-txt {
  opacity: 0;
  transform: translateY(-40px);
}
.video-swap.is-swapped .hero-logo,
.video-swap.is-swapped .hero-menu a {
  pointer-events: none;
}

.hero-txt {
  color: #fff;
  text-shadow: 0 0 9px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.hero-txt p {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  white-space: nowrap;
  line-height: 1;
}
.hero-txt .en {
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
}
.hero-txt .zh,
.hero-txt .sm {
  font-family: "Noto Serif TC", "PMingLiU", serif;
  font-weight: 300;
}
.hero-txt .en,
.hero-txt .zh,
.hero-txt .sm {
  top: var(--t);
  font-size: var(--s);
  letter-spacing: var(--l);
  padding-left: var(--l);
}
.hero-txt .chevron {
  position: absolute;
  left: 50%;
  top: var(--t);
  width: 1.485cqw;
  height: 1.485cqw;
  margin-left: -0.74cqw;
  border-right: max(1px, 0.13cqw) solid #fff;
  border-bottom: max(1px, 0.13cqw) solid #fff;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.45));
}

.hero-txt--idx .en {
  --t: 24.8cqw;
  --s: 2.65cqw;
  --l: .208em;
}
@media (max-width: 991.98px) {
  .hero-txt--idx .en {
    --t: 22.89cqw;
    --s: 3.05cqw;
    --l: .216em;
  }
}
.hero-txt--idx .zh {
  --t: 29.93cqw;
  --s: 1.84cqw;
  --l: .264em;
}
@media (max-width: 991.98px) {
  .hero-txt--idx .zh {
    --t: 29.78cqw;
    --s: 3.56cqw;
    --l: .282em;
  }
}
.hero-txt--idx .chevron {
  display: none;
}
@media (max-width: 991.98px) {
  .hero-txt--idx .chevron {
    display: block;
    --t: 52.7cqw;
  }
}

.hero-txt--res .en {
  --t: 24.33cqw;
  --s: 2.79cqw;
  --l: .178em;
}
@media (max-width: 991.98px) {
  .hero-txt--res .en {
    --t: 23.09cqw;
    --s: 3.05cqw;
    --l: .228em;
  }
}
.hero-txt--res .zh {
  --t: 29.74cqw;
  --s: 1.83cqw;
  --l: .257em;
}
@media (max-width: 991.98px) {
  .hero-txt--res .zh {
    --t: 30cqw;
    --s: 3.54cqw;
    --l: .268em;
  }
}
.hero-txt--res .sm {
  --t: 49.74cqw;
  --s: .97cqw;
  --l: .16em;
}
@media (max-width: 991.98px) {
  .hero-txt--res .sm {
    --t: 47.3cqw;
    --s: 2.15cqw;
    --l: .12em;
  }
}
.hero-txt--res .chevron {
  --t: 52.46cqw;
}
@media (max-width: 991.98px) {
  .hero-txt--res .chevron {
    --t: 53.06cqw;
  }
}

.hero-txt--con .en {
  --t: 24.89cqw;
  --s: 2.36cqw;
  --l: .18em;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: 500;
}
@media (max-width: 991.98px) {
  .hero-txt--con .en {
    --t: 22.63cqw;
    --s: 3.14cqw;
    --l: .134em;
  }
}
.hero-txt--con .zh {
  --t: 29.85cqw;
  --s: 1.73cqw;
  --l: .332em;
}
@media (max-width: 991.98px) {
  .hero-txt--con .zh {
    --t: 30cqw;
    --s: 3.45cqw;
    --l: .197em;
  }
}

.hero-txt--legacy {
  --k: .0519cqw;
  --o: 25.2cqw;
}
@media (max-width: 991.98px) {
  .hero-txt--legacy {
    --k: .1633cqw;
    --o: 21.6cqw;
  }
}
.hero-txt--legacy .en {
  top: calc(var(--o) - 14.9 * var(--k));
  font-size: calc(37 * var(--k) / 0.7);
  line-height: calc(67 * var(--k));
  letter-spacing: 0.185em;
  padding-left: 0.185em;
}
@media (max-width: 991.98px) {
  .hero-txt--legacy .en {
    top: calc(var(--o) - 7 * var(--k));
    font-size: calc(13.7 * var(--k) / 0.7);
    line-height: calc(28.5 * var(--k));
  }
}
.hero-txt--legacy .zh {
  top: calc(var(--o) + 164 * var(--k));
  font-size: calc(35 * var(--k));
  line-height: 1.1;
  letter-spacing: 0.29em;
  padding-left: 0.29em;
}
@media (max-width: 991.98px) {
  .hero-txt--legacy .zh {
    top: calc(var(--o) + 63 * var(--k));
    font-size: calc(21.8 * var(--k));
    letter-spacing: 0.32em;
    padding-left: 0.32em;
  }
}
.hero-txt--legacy .sm {
  top: calc(var(--o) + 478.5 * var(--k));
  font-size: calc(19.5 * var(--k));
  line-height: 1.1;
  letter-spacing: 0.12em;
  padding-left: 0.12em;
}
@media (max-width: 991.98px) {
  .hero-txt--legacy .sm {
    top: calc(var(--o) + 156 * var(--k));
    font-size: calc(13 * var(--k));
  }
}

.m-header,
.m-toggle,
.m-brand,
.m-menu {
  display: none;
}

@media (max-width: 991.98px) {
  .hero-logo,
  .hero-menu {
    display: none;
  }
  .m-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 72px;
    padding: 14px 16px;
  }
  .m-header .logo {
    display: none;
  }
  .m-toggle,
  .m-close {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
  }
  .m-close {
    font-size: 36px;
    line-height: 1;
  }
  .m-toggle {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 1500;
    display: block;
    background: none;
    mix-blend-mode: difference;
  }
  .m-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    margin: 6px auto;
    background: currentColor;
  }
  body.menu-open .m-toggle {
    visibility: hidden;
  }
  .m-brand {
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 44px;
    color: #fff;
    text-decoration: none;
    mix-blend-mode: difference;
  }
  .m-brand img {
    display: block;
    width: 120px;
  }
  body.menu-open .m-brand {
    visibility: hidden;
  }
  .m-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: transparent;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .m-menu.is-open {
    visibility: visible;
    opacity: 1;
  }
  .m-menu .m-top {
    display: flex;
    justify-content: flex-end;
    padding: 14px 16px;
  }
  .m-menu a {
    display: block;
    padding: 28px 0;
    border-bottom: 1px solid #e9e9e9;
    background: #fff;
    color: #000;
    font-family: "Jost", sans-serif;
    font-size: 18px;
    letter-spacing: 0.1em;
    text-align: center;
    text-decoration: none;
    opacity: 0;
    transform: translateY(-28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .m-menu a.active {
    background: #000;
    color: #fff;
  }
  .m-menu.is-open a {
    opacity: 1;
    transform: none;
  }
  .m-menu.is-open a:nth-of-type(1) {
    transition-delay: 0.15s;
  }
  .m-menu.is-open a:nth-of-type(2) {
    transition-delay: 0.35s;
  }
  .m-menu.is-open a:nth-of-type(3) {
    transition-delay: 0.55s;
  }
  .m-menu.is-open a:nth-of-type(4) {
    transition-delay: 0.75s;
  }
}
.page02,
.page03,
.page04 {
  --txt-title-gap: calc(46 * var(--vw-base));
  --txt-body-gap: calc(36 * var(--vw-base));
  --layout-gap: 0;
}
@media (min-width: 992px) {
  .page02,
  .page03,
  .page04 {
    --txt-title-gap: calc(52 * var(--vw-base));
    --txt-body-gap: calc(17 * var(--vw-base));
  }
}
.page02 .page-zh-title,
.page03 .page-zh-title,
.page04 .page-zh-title {
  margin-bottom: calc(20 * var(--vw-base));
  font-weight: 500;
  font-size: calc(42 * var(--vw-base));
  line-height: 1.29;
  letter-spacing: 0.07em;
  color: #4d4d4d;
}
@media (min-width: 992px) {
  .page02 .page-zh-title,
  .page03 .page-zh-title,
  .page04 .page-zh-title {
    margin-bottom: calc(12 * var(--vw-base));
    font-weight: 400;
    line-height: 1.31;
  }
}
.page02 .page-en-subtitle,
.page03 .page-en-subtitle,
.page04 .page-en-subtitle {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: calc(19 * var(--vw-base));
  line-height: 1.37;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #555;
}
@media (min-width: 992px) {
  .page02 .page-en-subtitle,
  .page03 .page-en-subtitle,
  .page04 .page-en-subtitle {
    font-weight: 700;
    font-size: calc(17 * var(--vw-base));
    line-height: 1.3;
    letter-spacing: 0.1em;
    color: #888;
  }
}
.page02 .txt-body p,
.page03 .txt-body p,
.page04 .txt-body p {
  font-size: calc(17.2 * var(--vw-base));
  line-height: 2.09;
  letter-spacing: 0;
  color: #808080;
}
@media (min-width: 992px) {
  .page02 .txt-body p,
  .page03 .txt-body p,
  .page04 .txt-body p {
    font-size: calc(16 * var(--vw-base));
    line-height: 1.875;
    letter-spacing: 0.055em;
  }
}
.page02 .txt-en,
.page03 .txt-en,
.page04 .txt-en {
  --txt-body-gap: calc(18 * var(--vw-base));
  max-width: calc(520 * var(--vw-base));
  margin-top: calc(46 * var(--vw-base));
}
.page02 .txt-en p,
.page03 .txt-en p,
.page04 .txt-en p {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: calc(15.2 * var(--vw-base));
  line-height: 1.19;
  letter-spacing: 0.02em;
  color: #808080;
}
@media (min-width: 992px) {
  .page02 .txt-en p,
  .page03 .txt-en p,
  .page04 .txt-en p {
    font-weight: 500;
    font-size: calc(13.4 * var(--vw-base));
    line-height: 1.4;
    letter-spacing: 0.06em;
  }
}
@media (min-width: 992px) {
  .page02 .txt-en,
  .page03 .txt-en,
  .page04 .txt-en {
    --txt-body-gap: calc(15 * var(--vw-base));
    max-width: calc(524 * var(--vw-base));
    margin-top: calc(60 * var(--vw-base));
  }
}
.page02 .img-caption,
.page03 .img-caption,
.page04 .img-caption {
  right: calc(8 * var(--vw-base));
  bottom: calc(6 * var(--vw-base));
  width: auto;
  padding: 0;
  font-size: calc(9.5 * var(--vw-base));
  font-weight: 700;
  letter-spacing: 0.06em;
  pointer-events: none;
}
@media (min-width: 992px) {
  .page02 .img-caption,
  .page03 .img-caption,
  .page04 .img-caption {
    right: calc(6 * var(--vw-base));
    font-size: calc(10 * var(--vw-base));
  }
}
.page02 .img-wrap a,
.page03 .img-wrap a,
.page04 .img-wrap a {
  cursor: zoom-in;
}

.photo-grid {
  display: flex;
  gap: var(--grid-gap, calc(7 * var(--vw-base)));
}
@media (min-width: 992px) {
  .photo-grid {
    --grid-gap: calc(9 * var(--vw-base));
    --col-gap: calc(9 * var(--vw-base));
  }
}

.photo-col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--col-gap, calc(6 * var(--vw-base)));
  min-width: 0;
}

.is-p {
  --ratio: 1877 / 2159;
}

.is-l {
  --ratio: 2879 / 2159;
}

.page02 .img-caption.img-caption--vertical {
  top: calc(11 * var(--vw-base));
  left: calc(7 * var(--vw-base));
  right: auto;
  bottom: auto;
  max-height: calc(100% - calc(22 * var(--vw-base)));
  width: auto;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: 600;
  font-size: calc(11 * var(--vw-base));
  line-height: 1.5;
  letter-spacing: 0.3em;
  text-align: left;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
  writing-mode: vertical-rl;
  text-orientation: upright;
}
@media (min-width: 992px) {
  .page02 .img-caption.img-caption--vertical {
    top: calc(16 * var(--vw-base));
    left: calc(14 * var(--vw-base));
    max-height: calc(100% - calc(32 * var(--vw-base)));
    font-size: calc(11 * var(--vw-base));
  }
}
.page02 .img-caption.img-caption--dark {
  color: #333;
  text-shadow: none;
}

.tcy {
  text-combine-upright: all;
}

.section-dark {
  background: var(--pg-dark);
}
.section-dark .page-zh-title,
.section-dark .page-en-subtitle,
.section-dark .page-en-title {
  color: #fff;
}
.section-dark .txt-body p {
  color: #808080;
}
.section-dark .txt-body p.txt-em {
  color: #ccc;
}
.section-dark .txt-en p {
  color: #808080;
}

.p-index .page02 {
  --txt-title-gap: calc(50 * var(--vw-base));
  --layout-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
  .p-index .page02 {
    --txt-title-gap: calc(52 * var(--vw-base));
    --layout-columns: calc(1111 * var(--vw-base)) minmax(0, 1fr);
  }
}
.p-index .page02 .layout-split {
  align-items: stretch;
}
@media (min-width: 992px) {
  .p-index .page02 .layout-split {
    align-items: flex-start;
  }
}
.p-index .page02 .txt {
  padding: calc(59 * var(--vw-base)) calc(34 * var(--vw-base)) calc(57 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-index .page02 .txt {
    box-sizing: border-box;
    padding: calc(262 * var(--vw-base)) calc(60 * var(--vw-base)) calc(115 * var(--vw-base)) calc(198 * var(--vw-base));
  }
}
@media (min-width: 992px) {
  .p-index .page02 .txt-wrap {
    max-width: calc(700 * var(--vw-base));
  }
}
.p-index .page02 .media {
  padding: 0 calc(34 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-index .page02 .media {
    padding: 0;
  }
}
.p-index .page03 {
  --txt-body-gap: 0;
  --layout-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
  .p-index .page03 {
    --txt-body-gap: calc(17 * var(--vw-base));
    --layout-columns: calc(900 * var(--vw-base)) minmax(0, 1fr);
  }
}
.p-index .page03 .layout-split {
  align-items: stretch;
}
@media (min-width: 992px) {
  .p-index .page03 .layout-split {
    align-items: center;
    padding: calc(240 * var(--vw-base)) 0 calc(239 * var(--vw-base)) calc(108 * var(--vw-base));
  }
}
.p-index .page03 .txt {
  padding: calc(70 * var(--vw-base)) calc(34 * var(--vw-base)) calc(68 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-index .page03 .txt {
    padding: 0 calc(100 * var(--vw-base)) 0 calc(203 * var(--vw-base));
  }
}
.p-index .page03 .swiper-button-prev,
.p-index .page03 .swiper-button-next {
  color: #fff;
}
.p-index .page03 .swiper-slide .img-cover {
  --ratio: 3 / 2;
}
.p-index .page04 {
  --txt-title-gap: 0;
  background: #000;
  color: #fff;
}
.p-index .page04 .layout-stack {
  padding-top: calc(98 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-index .page04 .layout-stack {
    padding-top: calc(158 * var(--vw-base));
  }
}
.p-index .page04 .txt {
  padding: 0 calc(34 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-index .page04 .txt {
    padding: 0 calc(198 * var(--vw-base));
  }
}
.p-index .page04 .page-en-title {
  margin-bottom: calc(40 * var(--vw-base));
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: calc(32 * var(--vw-base));
  line-height: 1.43;
  letter-spacing: 0.19em;
  color: #fff;
  white-space: normal;
}
@media (min-width: 992px) {
  .p-index .page04 .page-en-title {
    margin-bottom: calc(52 * var(--vw-base));
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.193em;
  }
}
.p-index .page04 .txt-body p {
  font-size: calc(17.9 * var(--vw-base));
  line-height: 2;
  color: #808080;
}
@media (min-width: 992px) {
  .p-index .page04 .txt-body p {
    font-size: calc(16 * var(--vw-base));
    line-height: 1.875;
  }
}

.p-legacy .page02 {
  --layout-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
  .p-legacy .page02 {
    --layout-columns: calc(809 * var(--vw-base)) minmax(0, 1fr);
  }
}
.p-legacy .page02 .layout-split {
  align-items: stretch;
}
@media (min-width: 992px) {
  .p-legacy .page02 .layout-split {
    align-items: flex-start;
  }
}
.p-legacy .page02 .txt {
  padding: calc(59 * var(--vw-base)) calc(34 * var(--vw-base)) calc(57 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-legacy .page02 .txt {
    box-sizing: border-box;
    padding: calc(238 * var(--vw-base)) calc(80 * var(--vw-base)) calc(115 * var(--vw-base)) calc(344 * var(--vw-base));
  }
}
@media (min-width: 992px) {
  .p-legacy .page02 .txt-wrap {
    max-width: calc(700 * var(--vw-base));
  }
}
.p-legacy .page02 .media {
  padding: 0 calc(34 * var(--vw-base)) calc(66 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-legacy .page02 .media {
    padding: 0;
  }
}
.p-legacy .page03 {
  --txt-body-gap: 0;
}
@media (min-width: 992px) {
  .p-legacy .page03 {
    --txt-body-gap: calc(17 * var(--vw-base));
  }
}
.p-legacy .page03 {
  --txt-title-gap: calc(46 * var(--vw-base));
}
.p-legacy .page03 .layout-stack {
  padding: calc(70 * var(--vw-base)) 0 calc(98 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-legacy .page03 .layout-stack {
    position: relative;
    aspect-ratio: 1920/1080;
    padding: 0;
  }
}
.p-legacy .page03 .legacy-masked {
  margin-bottom: calc(40 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-legacy .page03 .legacy-masked {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    margin: 0;
    --size: 100% auto;
    --pos: center;
  }
}
.p-legacy .page03 .txt {
  padding: 0 calc(34 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-legacy .page03 .txt {
    position: absolute;
    padding: 0;
  }
}
@media (min-width: 992px) {
  .p-legacy .page03 .txt {
    top: calc(217 * var(--vw-base));
    left: calc(967 * var(--vw-base));
    width: calc(800 * var(--vw-base));
  }
}
@media (min-width: 992px) {
  .p-legacy .page03 .page-zh-title {
    letter-spacing: 0.09em;
    margin-bottom: calc(13 * var(--vw-base));
  }
}
@media (min-width: 992px) {
  .p-legacy .page03 .txt-title {
    --txt-title-gap: calc(37 * var(--vw-base));
  }
}
.p-legacy .page03 .txt-body:not(.txt-en) p:nth-child(3) {
  margin-top: calc(36 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-legacy .page03 .txt-body:not(.txt-en) p:nth-child(3) {
    margin-top: 0;
  }
}
.p-legacy .page03 .txt-body:not(.txt-en) p:nth-child(4) {
  margin-top: calc(14 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-legacy .page03 .txt-body:not(.txt-en) p:nth-child(4) {
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  .p-legacy .page03 .txt-en {
    max-width: calc(640 * var(--vw-base));
  }
}
.p-legacy .page04 {
  --txt-title-gap: 0;
}
.p-legacy .page04 .layout-stack {
  padding: calc(70 * var(--vw-base)) 0 calc(98 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-legacy .page04 .layout-stack {
    position: relative;
    aspect-ratio: 1920/1080;
    padding: 0;
  }
}
.p-legacy .page04 .legacy-masked {
  margin-bottom: calc(40 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-legacy .page04 .legacy-masked {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    margin: 0;
    --size: 100% auto;
    --pos: center;
  }
}
.p-legacy .page04 .txt {
  padding: 0 calc(34 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-legacy .page04 .txt {
    position: absolute;
    padding: 0;
  }
}
.p-legacy .page04 .layout-stack {
  padding-bottom: calc(116 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-legacy .page04 .layout-stack {
    padding-bottom: 0;
  }
}
@media (min-width: 992px) {
  .p-legacy .page04 .txt {
    top: calc(356 * var(--vw-base));
    left: calc(201 * var(--vw-base));
    width: calc(700 * var(--vw-base));
  }
}
.p-legacy .page04 .page-en-title {
  margin-bottom: calc(20 * var(--vw-base));
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: calc(34 * var(--vw-base));
  line-height: 1.5;
  letter-spacing: 0.14em;
  white-space: normal;
}
@media (min-width: 992px) {
  .p-legacy .page04 .page-en-title {
    margin-bottom: calc(37 * var(--vw-base));
    font-weight: 400;
    font-size: calc(35.6 * var(--vw-base));
    line-height: 1.32;
    letter-spacing: 0.235em;
  }
}

.p-residences .page02 {
  --layout-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
  .p-residences .page02 {
    --layout-columns: calc(1111 * var(--vw-base)) minmax(0, 1fr);
  }
}
.p-residences .page02 .layout-split {
  align-items: stretch;
}
@media (min-width: 992px) {
  .p-residences .page02 .layout-split {
    align-items: flex-start;
  }
}
.p-residences .page02 .txt {
  padding: calc(59 * var(--vw-base)) calc(34 * var(--vw-base)) calc(39 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-residences .page02 .txt {
    box-sizing: border-box;
    padding: calc(308 * var(--vw-base)) calc(60 * var(--vw-base)) calc(115 * var(--vw-base)) calc(198 * var(--vw-base));
  }
}
@media (min-width: 992px) {
  .p-residences .page02 .txt-wrap {
    max-width: calc(700 * var(--vw-base));
  }
}
.p-residences .page02 .txt-en {
  --txt-body-gap: 0;
}
@media (min-width: 992px) {
  .p-residences .page02 .txt-en {
    --txt-body-gap: calc(15 * var(--vw-base));
  }
}
.p-residences .page02 .media {
  padding: 0 calc(34 * var(--vw-base)) calc(66 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-residences .page02 .media {
    padding: 0;
  }
}
.p-residences .page03-arrival {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  aspect-ratio: 610/1080;
  padding: calc(316 * var(--vw-base)) calc(34 * var(--vw-base)) 0;
  background: #1a1510 url("../images/img/residences/residences-page03-img-1.jpg") center/cover no-repeat;
  color: #fff;
  text-align: center;
}
@media (min-width: 992px) {
  .p-residences .page03-arrival {
    aspect-ratio: 1920/1080;
    padding-top: calc(331 * var(--vw-base));
  }
}
.p-residences .page03-arrival .page-en-title {
  margin: 0;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: calc(28.5 * var(--vw-base));
  line-height: 1.9;
  letter-spacing: 0.165em;
  color: #fff;
}
@media (min-width: 992px) {
  .p-residences .page03-arrival .page-en-title {
    font-weight: 400;
    font-size: calc(53 * var(--vw-base));
    line-height: 1.264;
    letter-spacing: 0.17em;
  }
}
.p-residences .page03-arrival .page-zh-subtitle {
  margin: calc(25 * var(--vw-base)) 0 calc(161 * var(--vw-base));
  font-family: "Noto Serif TC", serif;
  font-weight: 400;
  font-size: calc(31 * var(--vw-base));
  line-height: 1.1;
  letter-spacing: 0.3em;
}
@media (min-width: 992px) {
  .p-residences .page03-arrival .page-zh-subtitle {
    margin: calc(46 * var(--vw-base)) 0 calc(96 * var(--vw-base));
    font-size: calc(34.6 * var(--vw-base));
    letter-spacing: 0.32em;
  }
}
.p-residences .page03-arrival .txt-body {
  display: block;
}
.p-residences .page03-arrival .txt-body p {
  margin: 0 0 calc(25 * var(--vw-base));
  font-family: "Noto Serif TC", "PMingLiU", serif;
  font-weight: 400;
  font-size: calc(16.4 * var(--vw-base));
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
@media (min-width: 992px) {
  .p-residences .page03-arrival .txt-body p {
    font-weight: 300;
    font-size: calc(16.5 * var(--vw-base));
    line-height: 1.7;
    letter-spacing: 0.108em;
    margin-bottom: calc(21.5 * var(--vw-base));
  }
}
.p-residences .page03-arrival .txt-body .lead {
  font-size: calc(18 * var(--vw-base));
  line-height: 1.67;
}
@media (min-width: 992px) {
  .p-residences .page03-arrival .txt-body .lead {
    font-size: calc(19.4 * var(--vw-base));
    line-height: 1.55;
    letter-spacing: 0.1em;
  }
}
.p-residences .page04 {
  --txt-title-gap: 0;
  --txt-body-gap: calc(36 * var(--vw-base));
  --layout-columns: minmax(0, 1fr);
  background: #000;
  color: #fff;
}
@media (min-width: 992px) {
  .p-residences .page04 {
    --txt-body-gap: calc(17 * var(--vw-base));
    --layout-columns: calc(1050 * var(--vw-base)) calc(810 * var(--vw-base));
  }
}
.p-residences .page04 .layout-split {
  padding: calc(80 * var(--vw-base)) 0;
}
@media (min-width: 992px) {
  .p-residences .page04 .layout-split {
    align-items: center;
    aspect-ratio: 1920/1080;
    padding: calc(121 * var(--vw-base)) 0 calc(80 * var(--vw-base));
  }
}
.p-residences .page04 .txt {
  padding: 0 calc(34 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-residences .page04 .txt {
    padding: 0 0 calc(17 * var(--vw-base)) calc(198 * var(--vw-base));
  }
}
.p-residences .page04 .page-en-title {
  margin-bottom: calc(20 * var(--vw-base));
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: calc(31.5 * var(--vw-base));
  line-height: 1.58;
  letter-spacing: 0.165em;
  color: #fff;
  white-space: normal;
}
@media (min-width: 992px) {
  .p-residences .page04 .page-en-title {
    margin-bottom: calc(39 * var(--vw-base));
    font-weight: 300;
    font-size: calc(36.9 * var(--vw-base));
    line-height: 1.3;
    letter-spacing: 0.2em;
  }
}
.p-residences .page04 .txt-body p {
  color: #808080;
}
.p-residences .page04 .txt-body p.txt-em {
  color: #ccc;
}

.p-contact .page02 {
  --layout-columns: minmax(0, 1fr);
  background: #000;
  color: #fff;
}
@media (min-width: 992px) {
  .p-contact .page02 {
    --layout-columns: calc(700 * var(--vw-base)) minmax(0, 1fr);
  }
}
.p-contact .page02 .layout-split {
  align-items: stretch;
}
.p-contact .page02 .photo-grid {
  --grid-gap: calc(4 * var(--vw-base));
  --col-gap: calc(4 * var(--vw-base));
}
@media (min-width: 992px) {
  .p-contact .page02 .photo-grid {
    --grid-gap: calc(6 * var(--vw-base));
    --col-gap: calc(6 * var(--vw-base));
  }
}

.page04-legend {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--vw-base)) calc(17 * var(--vw-base));
  margin: calc(110 * var(--vw-base)) 0 calc(60 * var(--vw-base));
  padding: 0 calc(34 * var(--vw-base));
  list-style: none;
}
@media (min-width: 992px) {
  .page04-legend {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: calc(28 * var(--vw-base));
    margin: calc(54 * var(--vw-base)) 0 calc(35 * var(--vw-base));
    padding: 0 calc(95 * var(--vw-base)) 0 0;
  }
}
.page04-legend li {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--vw-base));
  font-size: calc(16.4 * var(--vw-base));
  letter-spacing: 0.2em;
  color: #8f8f8f;
}
@media (min-width: 992px) {
  .page04-legend li {
    font-size: calc(18 * var(--vw-base));
    font-weight: 500;
  }
}
.page04-legend li:first-child {
  color: #fff;
}
.page04-legend i {
  width: calc(16 * var(--vw-base));
  height: calc(16 * var(--vw-base));
  border-radius: 50%;
  background: var(--c);
}
@media (min-width: 992px) {
  .page04-legend i {
    width: calc(17 * var(--vw-base));
    height: calc(17 * var(--vw-base));
  }
}
.page04-legend .legend-1 {
  --c: #b8559f;
}
.page04-legend .legend-2 {
  --c: #8fc18f;
}
.page04-legend .legend-3 {
  --c: #e8101e;
}
.page04-legend .legend-4 {
  --c: #0aa066;
}
.page04-legend .legend-5 {
  --c: #f7a900;
}
.page04-legend .legend-6 {
  --c: #00aacc;
}
.page04-legend .legend-7 {
  --c: #1d2f8f;
}

.page04-map {
  --aerial-h: calc(732 * var(--vw-base));
  --aerial-min-h: 0px;
}
.page04-map::before {
  display: none;
}
.page04-map .aerial-map-inner .page04-map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.legacy-masked {
  --size: 160% auto;
  --pos: var(--pos-m, center);
  position: relative;
  aspect-ratio: 4/3;
  background: var(--img) var(--pos)/var(--size) no-repeat;
}
.legacy-masked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mask) var(--pos)/var(--size) no-repeat;
}

.legacy-masked--b {
  --img: url("../images/img/legacy/legacy-page03-img-1.jpg");
  --mask: url("../images/img/legacy/legacy-page03-img-2.png");
  --pos-m: -6% 50%;
}

.legacy-masked--c {
  --img: url("../images/img/legacy/legacy-page04-img-1.jpg");
  --mask: url("../images/img/legacy/legacy-page04-img-2.png");
  --pos-m: 101.6% 50%;
}

.page04-diagram {
  position: relative;
  margin-top: calc(60 * var(--vw-base));
}
@media (min-width: 992px) {
  .page04-diagram {
    left: calc(-22 * var(--vw-base));
    top: calc(-35 * var(--vw-base));
    margin: calc(60 * var(--vw-base)) 0 0 calc(30 * var(--vw-base));
  }
}
.page04-diagram img {
  display: block;
  width: 100%;
}
.page04-diagram img + img {
  position: absolute;
  inset: 0;
}

.page02-menu {
  display: flex;
  flex-direction: column;
  gap: calc(46.5 * var(--vw-base));
  padding: calc(83.5 * var(--vw-base)) calc(34 * var(--vw-base)) calc(134 * var(--vw-base));
}
@media (min-width: 992px) {
  .page02-menu {
    flex: 0 0 calc(700 * var(--vw-base));
    box-sizing: border-box;
    justify-content: flex-start;
    gap: calc(67.4 * var(--vw-base));
    padding: calc(519 * var(--vw-base)) 0 0 calc(201 * var(--vw-base));
  }
}
.page02-menu a {
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: calc(27 * var(--vw-base));
  line-height: 1;
  letter-spacing: 0.15em;
  color: #fff;
  text-decoration: none;
}
.page02-menu a:hover {
  opacity: 0.6;
}
@media (min-width: 992px) {
  .page02-menu a {
    font-size: calc(38.6 * var(--vw-base));
    line-height: 1;
    letter-spacing: 0.16em;
  }
}

section:has(> .page03-tabs) {
  background: #000;
}

.page03-tabs {
  display: flex;
  gap: calc(6 * var(--vw-base));
  padding: calc(71 * var(--vw-base)) calc(35 * var(--vw-base)) 0;
  background: #000;
}
@media (min-width: 992px) {
  .page03-tabs {
    display: none;
  }
}
.page03-tabs a {
  flex: 1 1 0;
  display: block;
}
.page03-tabs img {
  display: block;
  width: 100%;
}

.page03-side-tabs {
  display: none;
}
@media (min-width: 992px) {
  .page03-side-tabs {
    position: fixed;
    top: 72vh;
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: calc(6 * var(--vw-base));
    width: calc(140 * var(--vw-base));
  }
}
@media (min-width: 992px) {
  .page03-side-tabs img {
    display: block;
    width: 100%;
  }
}

.page03-form {
  padding: calc(88 * var(--vw-base)) calc(45 * var(--vw-base)) calc(90 * var(--vw-base));
  background: #000 url("../images/img/contact/contact-page03-bg.jpg") center/cover no-repeat;
  color: #fff;
  text-align: center;
}
@media (min-width: 992px) {
  .page03-form {
    padding: calc(129 * var(--vw-base)) 0 calc(114 * var(--vw-base));
  }
}
.page03-form .form-zh {
  margin: 0 0 calc(20 * var(--vw-base));
  font-family: "Noto Serif TC", serif;
  font-size: calc(22.4 * var(--vw-base));
  line-height: 1.3;
  letter-spacing: 0.08em;
}
@media (min-width: 992px) {
  .page03-form .form-zh {
    font-size: calc(19.4 * var(--vw-base));
    line-height: 1.39;
    letter-spacing: 0.108em;
    margin-bottom: calc(22 * var(--vw-base));
  }
}
.page03-form .form-zh + .form-en {
  margin-top: calc(62 * var(--vw-base));
}
@media (min-width: 992px) {
  .page03-form .form-zh + .form-en {
    margin-top: calc(57 * var(--vw-base));
  }
}
.page03-form .form-en {
  margin: 0 0 calc(72 * var(--vw-base));
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: calc(13.2 * var(--vw-base));
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
}
@media (min-width: 992px) {
  .page03-form .form-en {
    font-size: calc(12.4 * var(--vw-base));
    line-height: 1.45;
    margin-bottom: calc(75 * var(--vw-base));
  }
}
.page03-form form {
  max-width: calc(520 * var(--vw-base));
  margin: 0 auto;
  text-align: left;
}
@media (min-width: 992px) {
  .page03-form form {
    width: calc(655 * var(--vw-base));
    max-width: none;
  }
}
.page03-form .form-row {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--vw-base));
  margin-bottom: calc(14 * var(--vw-base));
  padding: 0 calc(10 * var(--vw-base));
  min-height: calc(52 * var(--vw-base));
  background: #d4d4d4;
  color: #222;
  font-size: calc(16.4 * var(--vw-base));
  letter-spacing: 0.25em;
}
@media (min-width: 992px) {
  .page03-form .form-row {
    padding: 0 calc(20 * var(--vw-base));
    letter-spacing: 0.3em;
    min-height: calc(65 * var(--vw-base));
    margin-bottom: calc(18 * var(--vw-base));
    font-size: calc(17.6 * var(--vw-base));
  }
}
.page03-form .form-row label.form-label {
  margin-bottom: 0;
  flex: 0 0 auto;
  padding-right: calc(16 * var(--vw-base));
  border-right: 1px solid #555;
  font-weight: 500;
}
.page03-form .form-row input[type=text],
.page03-form .form-row input[type=tel] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: calc(16.4 * var(--vw-base));
  outline: 0;
}
@media (min-width: 992px) {
  .page03-form .form-row input[type=text],
  .page03-form .form-row input[type=tel] {
    font-size: calc(17.6 * var(--vw-base));
  }
}
.page03-form .form-row .form-opt {
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: calc(6 * var(--vw-base));
  letter-spacing: 0.1em;
  cursor: pointer;
}
.page03-form .form-pair {
  display: flex;
  gap: calc(8 * var(--vw-base));
}
@media (min-width: 992px) {
  .page03-form .form-pair {
    flex-direction: row;
    gap: calc(9 * var(--vw-base));
  }
}
.page03-form .form-pair .form-row:first-child {
  flex: 1 1 0;
  min-width: 0;
}
@media (min-width: 992px) {
  .page03-form .form-pair .form-row:first-child {
    flex: 0 0 calc(316 * var(--vw-base));
  }
}
.page03-form .form-pair .form-row:last-child {
  flex: 0 0 auto;
  gap: calc(8 * var(--vw-base));
  padding: 0 calc(6 * var(--vw-base));
}
@media (min-width: 992px) {
  .page03-form .form-pair .form-row:last-child {
    flex: 1 1 0;
  }
}
.page03-form .form-pair .form-row:last-child label.form-label {
  padding-right: calc(8 * var(--vw-base));
  letter-spacing: 0.12em;
}
.page03-form .form-pair .form-row:last-child .form-opt {
  gap: calc(4 * var(--vw-base));
  letter-spacing: 0;
}
.page03-form input[type=radio],
.page03-form input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: calc(17 * var(--vw-base));
  height: calc(17 * var(--vw-base));
  margin: 0;
  border: 1px solid #555;
  border-radius: 50%;
  background: #d4d4d4;
  cursor: pointer;
}
.page03-form input[type=radio]:checked,
.page03-form input[type=checkbox]:checked {
  background: #d4d4d4 radial-gradient(circle, #333 0 38%, transparent 42%);
}
.page03-form .form-recaptcha {
  margin: calc(20 * var(--vw-base)) 0 calc(24 * var(--vw-base));
}
@media (min-width: 992px) {
  .page03-form .form-recaptcha {
    margin: 0 0 calc(28 * var(--vw-base));
  }
}
@media (max-width: 359px) {
  .page03-form .g-recaptcha {
    transform: scale(0.85);
    transform-origin: 0 0;
    margin-bottom: -12px;
  }
}
.page03-form .form-note {
  margin: 0 0 calc(40 * var(--vw-base));
  font-size: calc(14.4 * var(--vw-base));
  line-height: 1.55;
  letter-spacing: 0.06em;
  text-align: left;
}
@media (min-width: 992px) {
  .page03-form .form-note {
    text-align: center;
    line-height: 1.8;
    font-size: calc(14.6 * var(--vw-base));
    margin-bottom: calc(44 * var(--vw-base));
  }
}
.page03-form .form-submit {
  display: block;
  min-width: calc(330 * var(--vw-base));
  margin: 0 auto;
  padding: calc(22 * var(--vw-base)) calc(40 * var(--vw-base));
  border: 0;
  background: #b9a273;
  color: #222;
  font-size: calc(23 * var(--vw-base));
  letter-spacing: 0.2em;
  cursor: pointer;
}
@media (min-width: 992px) {
  .page03-form .form-submit {
    min-width: calc(215 * var(--vw-base));
    padding: calc(17 * var(--vw-base)) calc(30 * var(--vw-base));
    font-size: calc(18 * var(--vw-base));
  }
}

.form-row--center {
  justify-content: center;
}

.page04-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: calc(60 * var(--vw-base)) calc(40 * var(--vw-base));
  background: var(--color-primary);
  color: #fff;
  font-size: calc(21 * var(--vw-base));
  line-height: 2.4;
  letter-spacing: 0.1em;
}
@media (min-width: 992px) {
  .page04-info {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: calc(60 * var(--vw-base));
    padding: calc(40 * var(--vw-base)) calc(120 * var(--vw-base));
    font-size: calc(13 * var(--vw-base));
    text-align: left;
    line-height: 1.9;
  }
}
.page04-info hr {
  display: none;
}
@media (min-width: 992px) {
  .page04-info hr {
    display: block;
    width: 0;
    height: calc(46 * var(--vw-base));
    margin: 0;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    opacity: 1;
  }
}
.page04-info .page04-tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--vw-base));
  margin-top: calc(30 * var(--vw-base));
}
@media (min-width: 992px) {
  .page04-info .page04-tel {
    flex-direction: row;
    align-items: baseline;
    gap: calc(14 * var(--vw-base));
    margin-top: 0;
  }
}
.page04-info .page04-tel span::before,
.page04-info .page04-tel span::after {
  content: "｜";
}
@media (min-width: 992px) {
  .page04-info .page04-tel span::before,
  .page04-info .page04-tel span::after {
    content: none;
  }
}
.page04-info .page04-tel b {
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: calc(54 * var(--vw-base));
  letter-spacing: 0.06em;
  line-height: 1;
}
@media (min-width: 992px) {
  .page04-info .page04-tel b {
    font-size: calc(33 * var(--vw-base));
  }
}
.page04-info .page04-tel a {
  color: #fff;
  text-decoration: none;
}

.bgm-toggle {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  mix-blend-mode: difference;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.bgm-toggle.is-on {
  opacity: 1;
}
body.menu-open .bgm-toggle {
  visibility: hidden;
}
@media (min-width: 992px) {
  .bgm-toggle {
    left: calc(40 * var(--vw-base));
    bottom: calc(40 * var(--vw-base));
    width: calc(54 * var(--vw-base));
    height: calc(54 * var(--vw-base));
    font-size: calc(24 * var(--vw-base));
  }
}