@charset "UTF-8";
/* ========================
  🎨 Design Tokens - Variables
======================== */
/* Color */
/* Breakpoints（對齊 Bootstrap） */
/* Font Family */
/* Section Spacing - 常見預設 */
/*
  手機常用：padding-inline 20-48px、padding-block 32-64px
  桌機常用：padding-inline 90-150px、padding-block 48-80px
  row 間距：手機 16-28px、桌機 24-36px
  如果不需要 gutter，可用 .section-pad--px-0 / .section-pad--py-0 等類別來局部去除。
*/
/* Section Spacing - Desktop */
/* Section Spacing - 常見預設 end*/
/* Section Spacing - Mobile */
/* Section Spacing - Desktop */
section::before,
section::after,
section *::before,
section *::after {
  pointer-events: none;
}

@media (max-width: 991px) {
  body {
    padding-bottom: 74px;
  }
}

.page01 {
  background-color: #e3e3e2;
  aspect-ratio: 9/16;
}
@media (min-width: 992px) {
  .page01 {
    aspect-ratio: 16/9;
  }
}

.page-zh-title {
  font-size: clamp(24px, 1.94px + 5.66vw, 58px);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  letter-spacing: normal;
  line-height: 1.5;
  color: #008442;
  font-weight: bold;
  margin-bottom: 0.88em;
}

.txt-body p {
  font-size: clamp(14px, 1.02px + 3.33vw, 34px);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  letter-spacing: normal;
  line-height: 1.75;
  color: #040000;
  font-weight: 300;
}

@media (min-width: 992px) {
  .page-zh-title {
    font-size: clamp(25.8px, -0.07px + 2.61vw, 50px);
    line-height: 1.4;
  }
  .txt-body p {
    font-size: clamp(10px, -1.76px + 1.19vw, 21px);
    margin-bottom: 5.661rem;
  }
}
.page02::before {
  content: "LOCATION";
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -62%);
  color: #e3e3e2;
  opacity: 0.35;
  font-family: "Cinzel", "Playfair Display", "Times New Roman", serif;
  font-size: clamp(178.25px, 17.97vw, 345px);
}
@media (max-width: 991px) {
  .page02::before {
    font-size: clamp(64px, -6.08px + 17.97vw, 172px);
  }
}

.page03 .left-box {
  padding-bottom: clamp(62px, -10.69px + 7.33vw, 130px);
}
@media (max-width: 991px) {
  .page03 .left-box {
    padding-bottom: clamp(52.4px, -0.03px + 13.44vw, 133.2px);
  }
}
.page03 .left-box::after {
  content: "LIFESTYLE";
  position: absolute;
  top: 27%;
  left: 118%;
  transform: translateX(-50%);
  color: #e3e3e2;
  opacity: 0.35;
  font-family: "Cinzel", "Playfair Display", "Times New Roman", serif;
  font-size: clamp(190px, -8.83px + 20.04vw, 376px);
}
@media (max-width: 991px) {
  .page03 .left-box::after {
    font-size: clamp(70px, -9.17px + 20.3vw, 192px);
    top: 62%;
    left: 51%;
  }
}
.page03::after {
  content: "";
  background-image: url(../images/img/page03-deco-1.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  aspect-ratio: 846.7/482.3;
  width: 38%;
  position: absolute;
  bottom: 0;
  left: -6.5%;
}
@media (max-width: 991px) {
  .page03::after {
    left: -23.5%;
  }
}

.page04 {
  overflow: hidden;
}
.page04 .bottom-box {
  padding-bottom: clamp(42px, -0.76px + 4.31vw, 82px);
}
@media (max-width: 991px) {
  .page04 .bottom-box {
    padding-bottom: clamp(50px, -3.99px + 13.84vw, 133.2px);
  }
}
.page04 {
  background: linear-gradient(to bottom, transparent 50%, #008442 100%);
}
.page04::before {
  content: "SURROUNDINGS";
  position: absolute;
  top: 86%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #e3e3e2;
  opacity: 0.35;
  font-family: "Cinzel", "Playfair Display", "Times New Roman", serif;
  font-size: clamp(115px, -0.45px + 11.64vw, 223px);
}
@media (max-width: 991px) {
  .page04::before {
    font-size: clamp(41px, -5.07px + 11.81vw, 112px);
  }
}

.page05 {
  overflow: hidden;
}
@media (max-width: 991px) {
  .page05 .txt-wrap {
    padding-top: clamp(52.4px, -0.03px + 13.44vw, 133.2px);
  }
  .page05 .txt-body {
    padding-bottom: clamp(52.4px, -0.03px + 13.44vw, 133.2px);
  }
}
@media (min-width: 992px) {
  .page05 .left-box {
    padding-right: clamp(57px, 4.62px + 5.28vw, 106px);
    padding-left: clamp(44px, 0.17px + 4.42vw, 85px);
  }
}
.page05::before {
  content: "";
  background-image: url(../images/img/page05-deco-1.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  aspect-ratio: 425.5/261.2;
  width: 23%;
  position: absolute;
  top: 5%;
  right: -3%;
}
@media (max-width: 991px) {
  .page05::before {
    width: 35%;
    right: -5%;
    top: 3%;
  }
}
.page05::after {
  content: "CONNECTIVITY";
  position: absolute;
  bottom: -2%;
  left: 50%;
  transform: translateX(-50%);
  color: #e3e3e2;
  opacity: 0.35;
  font-family: "Cinzel", "Playfair Display", "Times New Roman", serif;
  font-size: clamp(115px, -0.45px + 11.64vw, 223px);
}
@media (max-width: 991px) {
  .page05::after {
    font-size: clamp(42px, -5.37px + 12.15vw, 115px);
    bottom: 2%;
  }
}

.page06 {
  overflow: hidden;
}
@media (max-width: 991px) {
  .page06 .txt-body {
    margin-bottom: clamp(52.4px, -0.03px + 13.44vw, 133.2px);
  }
}
@media (min-width: 992px) {
  .page06 .right-box {
    padding-inline: clamp(44.58px, 3.51px + 4.14vw, 83px);
  }
}
.page06 .txt-wrap::before {
  content: "";
  background-image: url(../images/img/page06-deco-1.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  aspect-ratio: 383.3/406.76;
  width: 62%;
  position: absolute;
  top: -263%;
  right: -38%;
}
@media (max-width: 991px) {
  .page06 .txt-wrap::before {
    width: 30%;
    right: -13.9%;
    top: -48.5%;
  }
}
.page06::before {
  content: "BUILDING";
  position: absolute;
  bottom: 38%;
  left: 10%;
  transform: translateX(-50%) rotate(90deg);
  color: #e3e3e2;
  opacity: 0.35;
  font-family: "Cinzel", "Playfair Display", "Times New Roman", serif;
  font-size: clamp(107px, -5.24px + 11.31vw, 212px);
}
@media (max-width: 991px) {
  .page06::before {
    font-size: clamp(64px, 5.6px + 14.98vw, 154px);
    top: 17%;
    bottom: auto;
  }
}

.page07 {
  overflow: hidden;
  background: linear-gradient(to bottom, #008442 0%, #e3e3e2 14%);
  padding-top: clamp(220px, 214.81px + 1.33vw, 228px);
}
.page07::after {
  content: "";
  background-image: url(../images/logo.svg);
  display: block;
  width: 112px;
  aspect-ratio: 112/167.6;
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1%;
}
.page07::before {
  content: "";
  background-image: url(../images/img/page07-deco-1.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  aspect-ratio: 524/436;
  width: 26%;
  position: absolute;
  top: 37%;
  right: -9.3%;
}
@media (max-width: 991px) {
  .page07::before {
    width: 30%;
    right: -10.9%;
    top: auto;
    bottom: 18%;
  }
}
@media (min-width: 992px) {
  .page07 {
    padding-top: clamp(173.6px, 17.5vw, 336px);
  }
}
.page07 .txt-body ul {
  list-style: none;
}
.page07 .txt-body ul li {
  font-size: clamp(13.4px, -0.04px + 3.45vw, 34.11px);
}
@media (min-width: 992px) {
  .page07 .txt-body ul li {
    font-size: clamp(10px, 0.38px + 0.97vw, 19px);
  }
}
.page07 #form1 .col-12.col-lg-6.d-flex > [class*=col-] {
  width: 100%;
}
.page07 #form1 .col-12:has(> label) {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.page07 #form1 .col-12:has(> label) > label {
  flex: 0 0 4.2em;
}
.page07 #form1 .col-12:has(> label) > .time-label {
  flex: 0 0 6.3em;
}
.page07 #form1 .col-12:has(> label) > .name-label {
  text-align: justify;
  -moz-text-align-last: justify;
       text-align-last: justify;
}
.page07 #form1 .col-12:has(> label) > .form-control {
  flex: 1;
}
.page07 #form1 .col-12:has(> label) > .d-flex {
  flex: 1;
}
.page07 #form1 .col-12:has(> .form-check) {
  padding-top: 0.9rem;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.page07 #form1 .page-en-subtitle {
  font-size: clamp(16px, -1.1px + 1.72vw, 32px);
}
@media (max-width: 991px) {
  .page07 #form1 .page-en-subtitle {
    font-size: clamp(23px, 0.29px + 5.82vw, 58px);
  }
}
@media (max-width: 991px) {
  .page07 #form1 .btn {
    margin-bottom: clamp(90px, 1.1px + 22.8vw, 227px);
  }
}
@media (max-width: 991px) {
  .page07 .left-box {
    padding-top: clamp(23px, 0.29px + 5.82vw, 58px);
  }
}
@media (min-width: 992px) {
  .page07 .left-box {
    padding-left: clamp(112.3px, -57.88px + 17.16vw, 271.5px);
    padding-right: clamp(42px, -2.45px + 11.4vw, 110.5px);
    padding-top: clamp(16px, -1.1px + 1.72vw, 32px);
  }
}
@media (min-width: 992px) {
  .page07 .right-box {
    padding-right: clamp(112.3px, -57.88px + 17.16vw, 271.5px);
    padding-left: clamp(42px, -2.45px + 11.4vw, 110.5px);
  }
}
.page07 .form-control {
  color: #000;
}/*# sourceMappingURL=style.css.map */