@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 */
/* Text Block Padding */
/* Section Spacing - Mobile */
/* Section Spacing - Desktop */
/* Text Block Padding */
/* Text Block Padding */
html,
body {
  background-color: #e9f2e0;
}

.page-zh-title {
  margin-bottom: 0.556em;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: 500;
  font-size: calc(30 * var(--vw-base));
  line-height: 1.8;
}
@media (min-width: 992px) {
  .page-zh-title {
    font-size: calc(45 * var(--vw-base));
    margin-bottom: 0.556em;
  }
}

.page-zh-subtitle {
  font-size: calc(30 * var(--vw-base));
}
@media (min-width: 992px) {
  .page-zh-subtitle {
    font-size: calc(52 * var(--vw-base));
  }
}

.page-en-label {
  font-size: calc(18 * var(--vw-base));
  margin-block: calc(50 * var(--vw-base));
}
@media (min-width: 992px) {
  .page-en-label {
    font-size: calc(20 * var(--vw-base));
    margin-block: calc(25 * var(--vw-base));
    letter-spacing: 0.2em;
  }
}

.page-zh-label {
  font-size: calc(32 * var(--vw-base));
}
@media (min-width: 992px) {
  .page-zh-label {
    font-size: calc(35 * var(--vw-base));
  }
}

.txt-body p {
  font-size: calc(24 * var(--vw-base));
  color: #232323;
  line-height: 1.7;
}
@media (min-width: 992px) {
  .txt-body p {
    font-size: calc(20 * var(--vw-base));
  }
}

/* 直式文字 */
.text-vertical {
  writing-mode: vertical-rl;
}

@media (max-width: 991px) {
  .text-vertical-m {
    writing-mode: vertical-rl;
  }
}

.bannerArea {
  aspect-ratio: 991/1714;
}
.bannerArea video {
  aspect-ratio: 991/1714;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 992px) {
  .bannerArea {
    aspect-ratio: 16/9;
  }
  .bannerArea video {
    aspect-ratio: 16/9;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

.page03 .img-wrap::after {
  content: "水碓景觀公園\a綿延貿商二村綠帶";
  white-space: pre;
  color: #fff;
  font-size: clamp(18.1px, 0.03px + 1.82vw, 35px);
  position: absolute;
  top: 2%;
  left: 2%;
}
@media (max-width: 991px) {
  .page03 .img-wrap::after {
    content: "水碓景觀公園綿延貿商二村綠帶";
    white-space: nowrap;
    writing-mode: vertical-rl;
    font-size: clamp(12.6px, 0.01px + 3.23vw, 32px);
    letter-spacing: 0.3em;
    right: 20%;
    left: auto;
    top: 18%;
  }
}
.page03 .page-zh-title::before {
  content: "";
  width: 1px;
  height: 500%;
  background-color: #50781b;
  position: absolute;
  left: -2%;
  bottom: 20%;
}
@media (max-width: 991px) {
  .page03 {
    --txt-py: clamp(29.9px, calc(-0.02px + 7.67vw), 76px);
  }
  .page03 .page-zh-title {
    letter-spacing: 0.5em;
    font-size: clamp(15.7px, -0.07px + 4.04vw, 40px);
    margin: 0;
  }
  .page03 .page-zh-title::before {
    left: -10%;
    bottom: 1%;
    height: 133%;
  }
}

.page04 .img-caption {
  padding-left: var(--content-edge);
}
@media (max-width: 991px) {
  .page04 .img-caption {
    padding-inline: 0;
  }
}
.page04 .page04-title::before {
  content: "搖晃樹影 內外兼綠";
  color: #fff;
  font-size: clamp(23.3px, 0.1px + 2.34vw, 45px);
  display: block;
  text-align: start;
  margin-bottom: 0.5em;
}
@media (max-width: 991px) {
  .page04 .page04-title::before {
    font-size: clamp(11.8px, -0.01px + 3.03vw, 30px);
    text-align: end;
    padding-right: calc(187 * var(--vw-base));
  }
}

.page05 img {
  max-width: 100%;
  width: 100%;
}
.page05 .page05-img-wrap::after {
  content: "有一種房子\a會讓人不自覺\a開始想像未來";
  white-space: pre;
  writing-mode: vertical-rl;
  font-size: clamp(23.3px, 0.1px + 2.34vw, 45px);
  color: #50781b;
  position: absolute;
  left: 13%;
  top: 0%;
}
@media (max-width: 991px) {
  .page05 .page05-img-wrap::after {
    font-size: clamp(11.8px, -0.01px + 3.03vw, 30px);
    left: 3.5%;
    top: 0%;
    line-height: 2.2;
  }
}
@media (min-width: 992px) {
  .page05 .left-box {
    padding-right: clamp(31px, 3.13vw, 60px);
  }
}

@media (min-width: 992px) {
  .page06 .left-box {
    padding-left: var(--content-edge);
  }
}
.page06 .img-box .imgSwiper {
  position: relative;
}
.page06 .img-box .img-title {
  position: absolute;
  z-index: 10;
  top: 10%;
  left: 8.5%;
}
.page06 .img-box .img-title .page-zh-title {
  text-shadow: 4px 2px 20px rgba(35, 35, 35, 0.3254901961);
  font-weight: 400;
}
@media (max-width: 991px) {
  .page06 .img-box .img-title .page-zh-title {
    letter-spacing: 0.4em;
  }
}
@media (min-width: 992px) {
  .page06 .right-border {
    border-right: 1px solid #7a7c76;
  }
}
@media (max-width: 991px) {
  .page06 .txt-body p {
    font-size: calc(22 * var(--vw-base));
  }
}
.page06 .deco-title {
  font-size: clamp(15.7px, -0.07px + 4.04vw, 40px);
}
.page06 .deco-title::before {
  content: "";
  width: 1px;
  height: 500%;
  background-color: #50781b;
  position: absolute;
  left: -2%;
  bottom: 20%;
}
@media (max-width: 991px) {
  .page06 .deco-title {
    margin-left: 2em;
    margin-bottom: 0;
  }
  .page06 .deco-title::before {
    left: auto;
    right: -60%;
    bottom: 0%;
    height: 154%;
  }
}

.page07 img {
  max-width: 100%;
  width: 100%;
}
@media (max-width: 991px) {
  .page07 img {
    width: 100%;
  }
}
.page07 ul {
  list-style: none;
}
.page07 ul li {
  font-size: calc(20 * var(--vw-base));
}
@media (max-width: 991px) {
  .page07 ul li {
    font-size: calc(24 * var(--vw-base));
    color: #232323;
  }
}
@media (max-width: 991px) {
  .page07 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 0.3em;
  }
}
.page07 {
  /* 共用基礎樣式 */
}
.page07 .photo-grid {
  display: grid;
  gap: calc(15 * var(--vw-base));
  width: 100%;
}
.page07 .grid-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.page07 {
  /* ==========================================
   📱 1. 手機版佈局 (預設：標準 3 欄網格)
   ========================================== */
}
.page07 .photo-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
  .page07 .item-1 {
    grid-area: img1;
  }
  .page07 .item-2 {
    grid-area: img2;
  }
  .page07 .item-3 {
    grid-area: img3;
  }
  .page07 .item-4 {
    grid-area: img4;
  }
  .page07 .item-5 {
    grid-area: img5;
  }
  .page07 .item-6 {
    grid-area: img6;
  }
  .page07 .item-7 {
    grid-area: img7;
  }
  .page07 .item-8 {
    grid-area: img8;
  }
  .page07 .item-9 {
    grid-area: img9;
  }
  .page07 .photo-grid {
    grid-template-areas: "img1 img3 img2" "img9 img5 img8" "img6 img4 img7";
  }
}
@media (max-width: 991px) {
  .page07 .grid-item {
    aspect-ratio: 1/1;
  }
}
.page07 {
  /* 如果你想微調手機版的圖片順序，可以用 grid-row 或 order，
   但如果直接照預設順序排，這裡甚至不用寫任何特定 item 的 span */
  /* ==========================================
   💻 2. 電腦版佈局 (當螢幕寬度大於 991px 時變身)
   ========================================== */
}
@media (min-width: 992px) {
  .page07 .photo-grid {
    grid-template-columns: repeat(4, 1fr); /* 變成 4 欄 */
    grid-auto-rows: calc(220 * var(--vw-base));
  }
  .page07 {
    /* 針對電腦版需要「跨欄」的特殊圖片做設定 */
  }
  .page07 .item-3 {
    grid-column: span 2; /* 水管公園橫跨 2 欄 */
    padding-right: calc(78 * var(--vw-base));
  }
  .page07 .item-4 {
    grid-column: span 2; /* 輕軌橫跨 2 欄 */
    padding-left: var(--content-edge);
  }
  .page07 {
    /* 調整特定圖片的順序或位置 (如果電腦版與手機版的圖片先後順序不同) 
    例如：圖書館(item-9)在手機版是第4格，電腦版是右下角，
     我們可以用 grid-column / grid-row 來指定它在電腦版的位置 */
  }
  .page07 .item-9 {
    grid-column: 3/5; /* 讓圖書館在電腦版橫跨後兩欄 */
    padding-right: calc(78 * var(--vw-base));
  }
}

.page08 {
  background-image: url(../images/img/page08-bg-pc.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  --section-py: calc(144 * var(--vw-base));
}
@media (max-width: 991px) {
  .page08 {
    --section-py: calc(144 * var(--vw-base));
  }
}
.page08 .txt-wrap h3 {
  font-size: calc(30 * var(--vw-base));
  letter-spacing: 0.3em;
  line-height: 1.7;
}
.page08 .txt-wrap h4 {
  font-size: calc(23 * var(--vw-base));
  letter-spacing: 0.2em;
  line-height: 1.7;
  font-weight: 400;
}
.page08 .txt-wrap h4 > span {
  font-size: calc(26 * var(--vw-base));
  letter-spacing: 0.2em;
  font-weight: 600;
}
.page08 .txt-wrap .deco-line::after {
  content: "";
  display: block;
  width: 64%;
  height: 2px;
  background-color: #fff;
  margin: 0 auto;
  margin-block: 4%;
}
@media (max-width: 991px) {
  .page08 .txt-wrap h3 {
    font-size: calc(34 * var(--vw-base));
  }
  .page08 .txt-wrap h4 {
    font-size: calc(26 * var(--vw-base));
  }
  .page08 .txt-wrap h4 > span {
    font-size: calc(26 * var(--vw-base));
  }
}
.page08 img {
  max-width: 100%;
  width: 44%;
}
@media (max-width: 991px) {
  .page08 img {
    width: 45%;
  }
}
.page08 form {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: lighter;
}
.page08 form input {
  background-color: #fff;
}
.page08 form label {
  color: #285d30;
}
.page08 form .form-control {
  color: #285d30;
}
.page08 form .btn {
  background-color: #bfdf3b;
  color: #232323;
}
@media (max-width: 991px) {
  .page08 form p.small {
    font-size: 0.9rem;
  }
  .page08 form .form-check-label {
    font-size: 0.9rem;
  }
  .page08 form .form-check {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
  .page08 form .form-check-input {
    width: 1.6em;
    height: 1.6em;
    margin-top: 0;
    flex-shrink: 0;
  }
}
.page08 form .form-floating {
  --bs-form-floating-label-transform: scale(0.55) translateY(-0.5rem)
    translateX(0.15rem);
}
@media (min-width: 992px) {
  .page08 form .form-floating {
    font-size: 0.85rem;
  }
}
@media (max-width: 991px) {
  .page08 form .form-floating {
    --bs-form-floating-label-transform: scale(0.82) translateY(-0.5rem)
      translateX(0.15rem);
    --bs-form-floating-height: calc(2.8rem + var(--bs-border-width) * 2);
    --bs-form-floating-padding-t: 0.75rem;
    --bs-form-floating-input-padding-t: 1.1rem;
    --bs-form-floating-input-padding-b: 0.35rem;
  }
  .page08 form .form-floating > .form-control {
    height: var(--bs-form-floating-height);
    min-height: var(--bs-form-floating-height);
    padding-top: var(--bs-form-floating-input-padding-t);
    padding-bottom: var(--bs-form-floating-input-padding-b);
  }
  .page08 form .form-floating > label {
    display: flex;
    align-items: center;
    padding-block: 0;
  }
}/*# sourceMappingURL=style.css.map */