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

.page-zh-title {
  font-size: clamp(12.6px, 0.01px + 3.23vw, 32px);
  margin-block: 2em;
}

.page-zh-subtitle {
  font-size: clamp(14.16px, -0.01px + 3.63vw, 36px);
  margin-bottom: 1.667em;
}

.page-en-label {
  font-size: clamp(7px, -0.14px + 1.83vw, 18px);
  letter-spacing: 0.25rem;
}

body {
  font-size: clamp(8px, -0.44px + 2.16vw, 21px);
  font-family: "Noto Serif HK", "Noto Serif TC", "PMingLiU", serif;
  color: #4d4d4d;
}

@media (min-width: 992px) {
  .page-zh-title {
    font-size: clamp(15.5px, 1.56vw, 30px);
    margin-bottom: 2em;
  }
  .page-zh-subtitle {
    font-size: clamp(24.8px, 2.5vw, 48px);
    margin-bottom: 1.667em;
  }
  .page-en-label {
    font-size: clamp(8.2px, -0.14px + 0.84vw, 16px);
  }
  body {
    font-size: clamp(10.5px, -0.72px + 1.13vw, 21px);
  }
}
.vertical-text {
  writing-mode: vertical-lr;
}

.bannerArea {
  background-color: #6e8000;
  aspect-ratio: 991/1714;
}
@media (min-width: 992px) {
  .bannerArea {
    aspect-ratio: 16/9;
  }
}

.page01 .txt-body {
  color: #6e8800;
}
.page01 .txt-title {
  margin-block: 2em;
}
@media (min-width: 992px) {
  .page01 .img-wrap {
    width: 88%;
  }
  .page01 .txt-body {
    color: #4d4d4d;
  }
  .page01 .txt-title {
    margin-block: 0;
  }
}

@media (min-width: 992px) {
  .page02 .deco-img::before {
    content: "";
    position: absolute;
    top: 54%;
    right: 2%;
    width: 17%;
    aspect-ratio: 387/196;
    background-image: url(../images/img/page03-deco-img.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 40;
  }
}
.page02 .txt-body {
  color: #4d4d4d;
}
.page02 .txt-title::after {
  content: "";
  position: absolute;
  top: -32%;
  width: 1px;
  height: 16em;
  background-color: #6e8800;
  margin-top: 0.75em;
}
@media (max-width: 991px) {
  .page02 .txt-title::after {
    right: 110%;
    bottom: 0;
    top: auto;
  }
}
@media (min-width: 992px) {
  .page02 .txt-py {
    padding-block: clamp(46px, 0.03px + 4.63vw, 89px);
  }
}
@media (min-width: 992px) {
  .page02 .row-2 {
    padding-block: clamp(32.5px, -0.1px + 3.29vw, 63px);
  }
}
@media (max-width: 991px) {
  .page02 .page-en-label {
    margin-block: clamp(29.1px, -0.04px + 7.47vw, 74px);
  }
}

.page03 .page-en-label {
  margin-top: clamp(33.1px, 0.07px + 3.33vw, 64px);
}
.page03 .txt-py {
  padding-block: clamp(26.9px, 0.07px + 2.7vw, 52px);
}
@media (max-width: 991px) {
  .page03 .img-title::after {
    content: "滿滿綠意也是日常";
    color: #fff;
    font-family: "Noto Serif HK", "Noto Serif TC", "PMingLiU", serif;
    font-size: clamp(12.6px, 0.01px + 3.23vw, 32px);
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1;
  }
}
@media (min-width: 992px) {
  .page03 .txt-title::after {
    content: "";
    background-color: #6e8800;
    width: 200%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

.page04 .txt-body {
  color: #6e8800;
}
.page04 .txt-title {
  margin-block: 2em;
}
@media (min-width: 992px) {
  .page04 .img-wrap {
    width: 88%;
  }
  .page04 .txt-body {
    color: #4d4d4d;
  }
  .page04 .txt-title {
    margin-block: 0;
  }
  .page04 .deco-img::before {
    content: "";
    position: absolute;
    bottom: -54%;
    left: 0%;
    width: 32%;
    aspect-ratio: 228/201;
    background-image: url(../images/img/page04-deco-img.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 40;
  }
}

.page05 .page-zh-subtitle {
  margin-inline: 0;
}
.page05 .page-en-label {
  margin-block: clamp(20.7px, 0.07px + 2.08vw, 40px);
}
.page05 .txt-title {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(41.3px, -0.07px + 4.17vw, 80px);
}
@media (max-width: 991px) {
  .page05 .txt-title {
    margin-bottom: 0;
  }
}
.page05 .txt-title::after {
  content: "";
  position: absolute;
  bottom: -16%;
  right: 12.5%;
  width: 73%;
  height: 1px;
  background-color: #6e8800;
}
@media (max-width: 991px) {
  .page05 .txt-title::after {
    left: auto;
    transform: translateX(-50%);
    bottom: 0;
    right: 110%;
    width: 1px;
    height: 16em;
    margin-top: 0.75em;
  }
}
.page05 .txt-py {
  padding-block: clamp(26.9px, 0.07px + 2.7vw, 52px);
}
.page05 .deco-img {
  display: flex;
  justify-content: center;
}
.page05 .deco-img img {
  width: 122%;
}
@media (min-width: 992px) {
  .page05 .deco-img {
    padding-bottom: clamp(26.9px, 0.07px + 2.7vw, 52px);
  }
}

.page06 {
  padding-bottom: 34%;
}
@media (min-width: 992px) {
  .page06 .txt-py {
    padding-block: clamp(32px, -0.07px + 3.23vw, 62px);
  }
}
.page06 .page-en-label {
  margin-top: clamp(53.2px, -0.03px + 5.37vw, 103px);
}
.page06::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  aspect-ratio: 1921/1081;
  width: 100%;
  background-image: url(../images/img/page06-deco-img.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  overflow: hidden;
}
@media (max-width: 991px) {
  .page06::before {
    background-image: url(../images/img/page06-deco-m-1.png);
    aspect-ratio: 654/304;
    width: 140%;
    background-position: center;
    bottom: -19%;
    left: -18%;
  }
}
@media (min-width: 992px) {
  .page06 .txt-title::after {
    content: "";
    background-color: #6e8800;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
@media (max-width: 991px) {
  .page06 .page-en-label {
    margin-top: 7.25em;
  }
  .page06 {
    padding-bottom: 25%;
  }
  .page06 .img-title::after {
    content: "日常精品美學";
    color: #fff;
    font-family: "Noto Serif HK", "Noto Serif TC", "PMingLiU", serif;
    font-size: clamp(12.6px, 0.01px + 3.23vw, 32px);
    position: absolute;
    top: 19%;
    left: 77%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1;
  }
}

.page07 {
  background-color: #6e8800;
  padding-bottom: 11%;
}
.page07 .page-en-subtitle {
  font-size: clamp(15.5px, 1.56vw, 30px);
}
@media (max-width: 991px) {
  .page07 .page-en-subtitle {
    font-size: clamp(11px, -0.03px + 2.83vw, 28px);
  }
}
@media (max-width: 991px) {
  .page07 {
    padding-bottom: 40%;
    overflow: hidden;
  }
}
.page07::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  aspect-ratio: 1921/1081;
  width: 100%;
  background-image: url(../images/img/page07-deco-img.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  overflow: hidden;
}
@media (max-width: 991px) {
  .page07::before {
    background-image: url(../images/img/page06-deco-m-1.png);
    aspect-ratio: 654/304;
    width: 140%;
    background-position: center;
    bottom: -9%;
    left: -18%;
  }
}
.page07 form {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: lighter;
}
.page07 form input {
  background-color: #fff;
}
.page07 form label {
  color: #285d30;
}
.page07 form .form-control {
  color: #285d30;
}
.page07 form .btn {
  background-color: #f1f15a;
  color: #285d30;
}
@media (max-width: 991px) {
  .page07 form p.small {
    font-size: 0.9rem;
  }
  .page07 form .form-check-label {
    font-size: 0.9rem;
  }
  .page07 form .form-check {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
  .page07 form .form-check-input {
    width: 1.6em;
    height: 1.6em;
    margin-top: 0;
    flex-shrink: 0;
  }
}
.page07 form .form-floating {
  --bs-form-floating-label-transform: scale(0.55) translateY(-0.5rem) translateX(0.15rem);
}
@media (min-width: 992px) {
  .page07 form .form-floating {
    font-size: 0.85rem;
  }
}
@media (max-width: 991px) {
  .page07 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-input-padding-t: 1.1rem;
    --bs-form-floating-input-padding-b: 0.35rem;
  }
  .page07 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);
  }
}/*# sourceMappingURL=style.css.map */