/* ========================================
   Swiper Lazy Loading 樣式
   ======================================== */

/* Swiper lazy loading 圖片初始狀態 */
.swiper-lazy {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Swiper lazy loading 圖片載入完成 */
.swiper-lazy-loaded {
  opacity: 1;
}

/* Swiper lazy loading 載入中的轉圈圈 */
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  animation: swiper-preloader-spin 1s infinite linear;
  box-sizing: border-box;
  border: 4px solid var(--primary-color, #d4af37);
  border-radius: 50%;
  border-top-color: transparent;
}

@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}

/* ========================================
   字型定義
   ======================================== */

/* Noto Sans TC */
@font-face {
  font-family: 'Noto Sans TC';
  src: url('../fonts/Noto_Sans_TC/NotoSansTC-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans TC';
  src: url('../fonts/Noto_Sans_TC/NotoSansTC-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans TC';
  src: url('../fonts/Noto_Sans_TC/NotoSansTC-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans TC';
  src: url('../fonts/Noto_Sans_TC/NotoSansTC-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans TC';
  src: url('../fonts/Noto_Sans_TC/NotoSansTC-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans TC';
  src: url('../fonts/Noto_Sans_TC/NotoSansTC-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans TC';
  src: url('../fonts/Noto_Sans_TC/NotoSansTC-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans TC';
  src: url('../fonts/Noto_Sans_TC/NotoSansTC-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans TC';
  src: url('../fonts/Noto_Sans_TC/NotoSansTC-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

/* Roboto */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* Times New Roman */
@font-face {
  font-family: 'Times New Roman';
  src: url('../fonts/Times New Roman/Times New Roman.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Times New Roman';
  src: url('../fonts/Times New Roman/Times New Roman Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Times New Roman';
  src: url('../fonts/Times New Roman/Times New Roman Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Times New Roman';
  src: url('../fonts/Times New Roman/Times New Roman Bold Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* ========================================
   主要樣式
   ======================================== */

/* ===== 全螢幕滾動容器 ===== */
.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden; /* 防止水平捲軸 */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  /* 隱藏捲軸但保持滾動功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* 隱藏 Chrome/Safari 的捲軸 */
.scroll-container::-webkit-scrollbar {
  display: none;
}

/* ===== 各屏共用樣式 ===== */
.section {
  min-height: 100vh;
  width: 100%; /* 確保不超出視窗寬度 */
  max-width: 100vw; /* 防止水平捲軸 */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--spacing-2xl) var(--spacing-lg);
  overflow-x: hidden; /* 防止內容超出 */
  box-sizing: border-box; /* 包含 padding 在寬度內 */
  background: transparent; /* 確保每個 section 可以有自己的背景 */
}

.section-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box; /* 包含 padding 在寬度內 */
  padding: 0 var(--spacing-md); /* 加入左右 padding 防止內容貼邊 */
  position: relative; /* 確保內容定位正確 */
  z-index: 1; /* 確保內容在上層 */
  animation: fadeInUp 0.8s ease-out forwards;
}

/* 淡入向上動畫 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 為不同的屏幕添加延遲,創造順序出現的效果 */
#section-aerotropolis .section-content { animation-delay: 0.1s; }
#section-map .section-content { animation: none; } /* 第三屏移除動畫 */
#section-architecture .section-content { animation-delay: 0.1s; }
#section-floorplan .section-content { animation-delay: 0.1s; }
#section-quality .section-content { animation-delay: 0.1s; }
#section-form .section-content { animation-delay: 0.1s; }

.section-title {
  font-size: 48px; /* 明確的字體大小 */
  font-weight: 700;
  color: #333333 !important; /* 確保文字顏色 */
  text-align: center;
  margin-bottom: 16px;
  display: block; /* 確保顯示 */
  opacity: 1; /* 確保不透明 */
  visibility: visible; /* 確保可見 */
}

.section-subtitle {
  font-size: 18px; /* 明確的字體大小 */
  color: #666666 !important; /* 確保文字顏色 */
  text-align: center;
  margin-bottom: 48px;
  display: block; /* 確保顯示 */
  opacity: 1; /* 確保不透明 */
  visibility: visible; /* 確保可見 */
}

/* ===== 第一屏:主視覺 ===== */
#section-hero {
  background-image: url('../images/首頁_紙張紋路底.png');
  padding: 0;
}

/* 新版第一屏 - 電腦版 */
.hero-new-desktop {
  display: block;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-new-desktop .hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-new-desktop .hero-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  z-index: 2;
}

/* 新版第一屏 - 手機版 (電腦版隱藏) */
.hero-new-mobile {
  display: none;
}

.hero-content {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-text {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  padding: 0 var(--spacing-2xl);
  gap: var(--spacing-3xl);
}

/* 左側文字區塊 */
.hero-text-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg);
}

.hero-text-content > div:nth-child(1),
.hero-text-content > div:nth-child(2),
.hero-text-content > div:nth-child(3) {
  font-family: 'Times New Roman', serif;
  font-size: 60px;
  font-weight: 100;
  line-height: .8;
  color: #007F86;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.hero-text-content > div:nth-child(4) {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: #007F86;
  letter-spacing: 3px;
  margin-top: var(--spacing-md);
  line-height: .4;
}

.hero-text-content > div:nth-child(6) {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #B8A382;
  letter-spacing: 4px;
  margin-top: var(--spacing-xl);
  text-transform: uppercase;
}

/* 桌面版隱藏手機版專用元素 */
.hero-subtitle-new,
.hero-mobile-image,
.hero-info-mobile,
.hero-mobile-fullwidth {
  display: none;
}

/* 桌面版建案資訊樣式 */
.hero-info-desktop {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #007F86;
  letter-spacing: 2px;
  display: block;
}
.hero-logo{
  margin-top:30px;
}
.hero-logo img{
  width:270px;
}

/* 右側圖片區塊 */
.hero-image-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image-content img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
  transition: transform 0.3s ease;
}

.hero-image-content img:hover {
  transform: scale(1.02);
}

/* 波浪形狀白色區塊 */
.hero-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  overflow: hidden;
  line-height: 0;
  z-index: 10;
}

.hero-wave svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100vw;
}

.hero-wave svg path {
  fill: #ffffff;
}

/* ===== 第二屏：綠色航空城 ===== */
#section-aerotropolis {
  background: #FFFFFF !important;
  padding-right: 0 !important;
}

#section-aerotropolis .section-content {
  max-width: 100%;
  padding: 0;
  overflow: visible;
}

.aerotropolis-container {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  align-items: center;
  max-width: none;
  margin: 0;
  position: relative;
}

.aerotropolis-text {
  /*padding: var(--spacing-2xl);*/
  /*padding-left: calc((100vw - 1400px) / 2 + var(--spacing-2xl));*/
  padding-right: var(--spacing-3xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 700px;
  position: relative;
  z-index: 2;
}

.aerotropolis-title-en {
  font-family: 'Times New Roman', serif;
  font-size: 72px;
  font-weight: lighter;
  color: #c5b197;
  letter-spacing: -3px;
  line-height: .8;
}

.aerotropolis-title-zh {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 36px;
  font-weight: 500;
  color: #007F86;
  letter-spacing: 4px;
  margin-bottom: 0;
  position: relative;
}

.aerotropolis-divider {
  position: relative;
  left: 0;
  width: calc(100% + 50vw);
  height: 1px;
  background: #c5b197;
  margin: var(--spacing-xl) 0;
  z-index: 1;
}

.aerotropolis-divider::after {
  content: none;
}

.aerotropolis-description {
  color: #000000;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 1.2px;
  font-weight: 600;
  text-align: justify;
}

.aerotropolis-description p {
  margin: 0;
}

.aerotropolis-image {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
  z-index: 3;
}

.aerotropolis-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  display: block;
}

/* Aerotropolis 圖片包裝容器與標籤 */
.aerotropolis-image-placeholder {
  width: 100%;
  height: auto;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.aerotropolis-image-placeholder img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.aerotropolis-image-label {
  position: absolute;
  bottom: 0px;
  right: 0px;
  color: #FFFFFF;
  padding: 8px 16px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  border-radius: 4px;
  text-align: right;
}

/* 標籤內有兩行時的樣式（標題 + 來源） */
.aerotropolis-image-label div:first-child {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1.5px;
  line-height: 1.2;
}

.aerotropolis-image-label div:last-child:not(:first-child) {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-top: 1px;
  opacity: 0.85;
  line-height: 1.2;
}

/* Aerotropolis 輪播導航按鈕 */
.aerotropolis-nav-buttons {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  display: flex;
  gap: 0;
}

.aerotropolis-button-prev,
.aerotropolis-button-next {
  width: 50px;
  height: 50px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  margin: 0;
}

.aerotropolis-button-prev {
  border-radius: 4px 0 0 4px;
}

.aerotropolis-button-next {
  border-radius: 0 4px 4px 0;
}

.aerotropolis-button-prev::after,
.aerotropolis-button-next::after {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
}

.aerotropolis-button-prev:hover,
.aerotropolis-button-next:hover {
  background: none;
  transform: scale(1.05);
}

.aerotropolis-button-prev.swiper-button-disabled,
.aerotropolis-button-next.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== 第三屏:滿版空拍圖 ===== */
#section-map {
  padding: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  background: #FFFFFF !important;
  /* 平滑滾動 */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  position: relative;
}

/* 地圖容器 - 支援水平滾動 */
.map-container {
  width: 100%;
  min-width: max-content;
  height: 100vh;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* iOS 滑動優化 */
}

/* 地圖圖片 */
/* 預設(非手機版)：顯示舊版,隱藏天空加高版 */
.map-image-desktop {
  display: block;
  max-height: 100vh; /* 確保不超過視窗高度 */
  width: auto;
  min-width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: 50% center;
}

.map-image-mobile {
  display: none;
  max-height: 100vh; /* 確保不超過視窗高度 */
  width: auto;
  min-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* 預設隱藏手機版 logo */
.map-logo-mobile {
  display: none;
}

/* 文字覆蓋層 - 桌面版橫向排列 */
.map-text-overlay {
  position: absolute;
  top: 80px;
  left: 80px;
  right: 80px;
  z-index: 10;
  color: #FFFFFF;
  display: flex;
  gap: 30px;
  align-items: flex-start;
  pointer-events: none;
  opacity: 0;
  transition: none;
}

#section-map .map-text-overlay {
  position: fixed;
}

.map-text-overlay.visible {
  opacity: 1;
}
.map-text-overlay{
  display: flex;
}
.map-text-overlay * {
  pointer-events: auto;  
}

.map-text-left {
  display: flex;
  flex-direction: column;
  max-width: 430px;
}

.map-text-right {
  flex: 1;
  max-width: 430px;
  text-align: justify;
}

.map-text-overlay .Title {
  font-family: 'Times New Roman','Noto Sans TC', serif;
  font-size: 60px;
  font-weight: 300;
  color: #c5b197;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 10px;
  text-shadow: 0 0 BLACK;
  display: flex;
  align-items: center;
}
.map-text-overlay .TitleL{
  font-size:40px;
  margin: 0 15px;
}

.map-text-overlay .subTitle {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: 0px;
  margin-bottom: 30px;
  text-shadow: 0 0 BLACK;
}

.map-text-overlay .map-divider {
  width: 100px;
  height: 1px;
  background: rgba(255, 255, 255, 0.8);
  margin: 30px 0;
}

.map-text-overlay p {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0px;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  text-justify: inter-character;
}

/* ===== 第四屏：LAKE | 湖 ===== */
#section-lake {
  background: #FFFFFF !important;
  padding: 0 !important;
  position: relative;
  overflow: visible;
}

/* 底層邊框 div - 置於最底層並居中 */
.lake-border-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54%;
  height: 500px;
  border: 1px solid #c5b197;
  border-top: none;
  border-right: none;
  border-left: none;
  z-index: 0;
  pointer-events: none;
}

/* 使用偽元素繪製左邊框的下半部 */
.lake-border-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 50%;
  width: 1px;
  background: #c5b197;
}

/* 使用偽元素繪製右邊框的下半部 */
.lake-border-box::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  height: 50%;
  width: 1px;
  background: #c5b197;
}

#section-lake .section-content {
  max-width: 1600px;
  padding: 0;
  position: relative;
  margin: 0 auto;
}

.lake-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  padding: 80px 0px;
  overflow: hidden;
}
.lake-background-image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.lake-background-image .lake-background-image2{
  position: relative;
  width: 100%;
  height: 100%;
}
.lake-background-image .lake-background-image2 img{
  position: absolute;
  top: 0;
  left: 0;
}


/* 左側背景裝飾區 */
.lake-background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(50% + 100px);
  height: 43%;
  background-image: url('../images/shutterstock_396573496.jpg');
  background-size: inherit;
  background-position: center;
  z-index: 1;
  pointer-events: none;
}

/* 左側文字區 */
.lake-text {
  padding: 0 40px 0 60px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: start;
  text-align: left;
}

.lake-title-en {
  font-family: 'Times New Roman','Noto Sans TC', serif;
  font-size: 56px;
  font-weight: 400;
  color: #007F86;
  letter-spacing: -1px;
  line-height: 0.8;
  margin: 0;
  display: flex;
  align-items: center;
}
.lake-title-enL{
  font-size:36px;
  margin: 0 15px;
}

.lake-title-zh {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #007F86;
  letter-spacing: 3px;
  margin: 0;
}

.lake-description {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #000000;
  font-weight: 700;
  padding-top:65px;
  margin-top:15px;
  background-color: #FFF;
}

.lake-description p {
  margin: 0 0 8px 0;
}

/* 電腦版文字 - 預設顯示 */
.lake-description-desktop {
  display: block;
}

/* 手機版文字 - 預設隱藏 */
.lake-description-mobile {
  display: none;
}

/* 手機版文字樣式 - 左右對齊 */
.lake-description-mobile p {
  text-align: justify;
  margin: 0;
}

/* 右側圖片區 */
.lake-image-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 3;
  align-self: center;
  justify-self: center;
  box-sizing: border-box;
  overflow: hidden;
}

/* 主圖片輪播 */
.lake-main-slider {
  width: 100%;
  max-width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.lake-swiper {
  width: 100%;
  height: auto;
}

.lake-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

/* 電腦版：顯示電腦版 slide，隱藏手機版 slide */
.lake-swiper .swiper-slide.desktop-only {
  display: flex;
}
.lake-swiper .swiper-slide.mobile-only {
  display: none;
}

.lake-image-placeholder {
  width: 100%;
  height: auto;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.lake-image-placeholder img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.lake-image-label {
  position: absolute;
  bottom: 0px;
  right: 0px;
  color: #FFFFFF;
  padding: 8px 16px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  border-radius: 4px;
}

/* Lake 輪播導航按鈕 */
.lake-nav-buttons {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  display: flex;
  gap: 0;
}

.lake-button-prev,
.lake-button-next {
  width: 50px;
  height: 50px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  margin: 0;
}

.lake-button-prev {
  border-radius: 4px 0 0 4px;
}

.lake-button-next {
  border-radius: 0 4px 4px 0;
}

.lake-button-prev::after,
.lake-button-next::after {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
}

.lake-button-prev:hover,
.lake-button-next:hover {
  background: none;
  transform: scale(1.05);
}

.lake-button-prev.swiper-button-disabled,
.lake-button-next.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 右下角小圖片展示區 */
.lake-thumbnail-grid {
  position: absolute;
  bottom: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  width: 400px;
  z-index: 4;
}

.lake-thumbnail-item {
  width: 100%;
  height: 120px;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.lake-thumbnail-item:hover {
  border-color: #007F86;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(60, 118, 112, 0.3);
}

.lake-thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 湖景區底部圖片展示 */
.lake-bottom-images {
  position: absolute;
  bottom: -155px;
  right: 0;
  width: 100%;
  z-index: 4;
}

.lake-bottom-images-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lake-bottom-image-left,
.lake-bottom-image-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lake-bottom-image-left img,
.lake-bottom-image-right img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 桌面版樣式 (> 767px) */
@media (min-width: 768px) {
  .lake-bottom-images {
    width: 500px !important;
  }
  
  .lake-bottom-image-left {
    display: none !important;
  }
}

/* ===== 第5.1屏：新區塊 1 ===== */
/* 桌面版預設隱藏，只在手機版顯示 */
#section-5-1 {
  display: none !important;
  background: #FFFFFF !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}

#section-5-1 .section-content {
  max-width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.section-5-1-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}

/* section-5-1 內的 section-5-3-text 置中 */
#section-5-1 .section-5-3-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 左側文字區 */
.section-5-1-text {
  padding: 0 75px 0 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: start;
  text-align: left;
}

.section-5-1-title-en {
  font-family: 'Times New Roman','Noto Sans TC', serif;
  font-size: 56px;
  font-weight: 400;
  color: #007F86;
  letter-spacing: -1px;
  line-height: 0.8;
  margin: 0;
  display: flex;
  align-items: center;
}

.section-5-1-title-enL {
  font-size: 36px;
  margin: 0 15px;
}

.section-5-1-title-zh {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #007F86;
  letter-spacing: 3px;
  margin: 0;
  line-height: 1.6;
}

.section-5-1-description {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 1.2px;
  color: #000000;
  font-weight: 600;
  margin-top: 10px;
}

.section-5-1-description p {
  margin: 0 0 15px 0;
}

.section-5-1-description p:last-child {
  margin-bottom: 0;
}

/* 右側圖片區 */
.section-5-1-image-section {
  position: relative;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 3;
  align-self: center;
  justify-self: end;
  box-sizing: border-box;
  overflow: hidden;
}

.section-5-1-main-slider {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.section-5-1-swiper {
  width: 100%;
  height: auto;
}

.section-5-1-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

.section-5-1-image-placeholder {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #F5F5F5;
}

.section-5-1-image-placeholder img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.section-5-1-image-label {
  position: absolute;
  bottom: 0px;
  right: 0px;
  color: #FFFFFF;
  padding: 8px 16px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  border-radius: 4px;
}

/* 5.1屏 輪播導航按鈕 */
.section-5-1-nav-buttons {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  display: flex;
  gap: 0;
}

.section-5-1-button-prev,
.section-5-1-button-next {
  width: 50px;
  height: 50px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  margin: 0;
}

.section-5-1-button-prev::after,
.section-5-1-button-next::after {
  color: #FFFFFF;
  font-size: 18px;
}

/* ===== 第5.2屏：新區塊 2 ===== */
/* 桌面版預設隱藏，只在手機版顯示 */
#section-5-2 {
  display: none !important;
  background: #000000 !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}

/* 滿版輪播容器 */
.section-5-2-fullscreen-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

#section-5-2 .section-content {
  max-width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.section-5-2-container {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0px;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: relative;
  padding: 80px 100px 80px 0;
  overflow: hidden;
}

/* 左側圖片區 */
.section-5-2-image-section {
  position: relative;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 3;
  align-self: center;
  justify-self: start;
  box-sizing: border-box;
  overflow: hidden;
}

.section-5-2-main-slider {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.section-5-2-swiper {
  width: 100%;
  height: 100%;
}

.section-5-2-swiper .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.section-5-2-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.section-5-2-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.section-5-2-image-label {
  position: absolute;
  bottom: 0px;
  right: 0px;
  color: #FFFFFF;
  padding: 8px 16px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  border-radius: 4px;
}

/* 右側文字區 */
.section-5-2-text {
  padding: 0 60px 0 75px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: end;
  text-align: left;
}

.section-5-2-title-en {
  font-family: 'Times New Roman','Noto Sans TC', serif;
  font-size: 56px;
  font-weight: 400;
  color: #007F86;
  letter-spacing: -1px;
  line-height: 0.8;
  margin: 0;
  display: flex;
  align-items: center;
}

.section-5-2-title-enL {
  font-size: 36px;
  margin: 0 15px;
}

.section-5-2-title-zh {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #007F86;
  letter-spacing: 3px;
  margin: 0;
  line-height: 1.6;
}

.section-5-2-description {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 1.2px;
  color: #000000;
  font-weight: 600;
  margin-top: 10px;
}

.section-5-2-description p {
  margin: 0 0 15px 0;
}

.section-5-2-description p:last-child {
  margin-bottom: 0;
}

/* 5.2屏 輪播導航按鈕 */
.section-5-2-nav-buttons {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  display: flex;
  gap: 0;
}

.section-5-2-button-prev,
.section-5-2-button-next {
  width: 50px;
  height: 50px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  margin: 0;
}

.section-5-2-button-prev {
  left: 20px;
}

.section-5-2-button-next {
  right: 20px;
}

.section-5-2-button-prev::after,
.section-5-2-button-next::after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 28px;
  color: #FFFFFF;
}

.section-5-2-button-prev::after {
  content: '\f053';
}

.section-5-2-button-next::after {
  content: '\f054';
}

.section-5-2-button-prev:hover,
.section-5-2-button-next:hover {
  transform: translateY(-50%) scale(1.1);
}

/* ===== 第5-3屏：GARDEN | 苑（僅手機版顯示）===== */
#section-5-3 {
  display: none !important; /* 電腦版隱藏 */
  background: #FFFFFF !important;
  padding: 0 !important;
  position: relative;
  overflow: visible;
}

/* 左側背景裝飾區 */
.section-5-3-background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 87%;
  height: 40vw;
  background-image: url('../images/shutterstock_396573496.jpg');
  background-size: inherit;
  background-position: center;
  z-index: 1;
  pointer-events: none;
}

/* 底層邊框 div */
.section-5-3-border-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14%;
  height: 36%;
  border: 1px solid #c5b197;
  z-index: 0;
  pointer-events: none;
}

/* 懸浮裝飾圖片 */
.section-5-3-decoration-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  transition: width 0.3s ease, left 0.3s ease, top 0.3s ease;
  opacity: 0;
}

.section-5-3-decoration-image.show {
  animation: fadeInSection53 0.8s ease-out forwards;
}

@keyframes fadeInSection53 {
  from { opacity: 0; }
  to { opacity: 1; }
}

.section-5-3-decoration-image img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

#section-5-3 .section-content {
  max-width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.section-5-3-container {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0px;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: relative;
  padding: 80px 100px 80px 0;
  overflow: visible;
}

.section-5-3-image-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 3;
}

.section-5-3-image-section {
  position: relative;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 3;
  align-self: center;
  justify-self: start;
  box-sizing: border-box;
  overflow: visible;
  margin-left: 0;
  padding-left: 0;
}

.section-5-3-main-slider {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.section-5-3-swiper {
  width: 100%;
  height: auto;
}

.section-5-3-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

.section-5-3-image-placeholder {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #F5F5F5;
}

.section-5-3-image-placeholder img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.section-5-3-image-label {
  position: absolute;
  bottom: 0px;
  right: 0px;
  color: #FFFFFF;
  padding: 8px 16px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  border-radius: 4px;
}

.section-5-3-text {
  padding: 0 60px 0 75px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: end;
  text-align: left;
}

.section-5-3-title-en {
  font-family: 'Times New Roman','Noto Sans TC', serif;
  font-size: 56px;
  font-weight: 400;
  color: #007F86;
  letter-spacing: -1px;
  line-height: 0.8;
  margin: 0;
  display: flex;
  align-items: center;
}

.section-5-3-title-enL {
  font-size: 36px;
  margin: 0 15px;
}

.section-5-3-title-zh {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #007F86;
  letter-spacing: 3px;
  margin: 0;
  line-height: 1.6;
  width: fit-content;
}

.section-5-3-description {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 1.2px;
  color: #000000;
  font-weight: 600;
  margin-top: 10px;
}

.section-5-3-description p {
  margin: 0 0 15px 0;
}

.section-5-3-description p:last-child {
  margin-bottom: 0;
}

.section-5-3-nav-buttons {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  display: flex;
  gap: 0;
}

.section-5-3-button-prev,
.section-5-3-button-next {
  width: 50px;
  height: 50px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  margin: 0;
}

.section-5-3-button-prev {
  border-radius: 4px 0 0 4px;
}

.section-5-3-button-next {
  border-radius: 0 4px 4px 0;
}

.section-5-3-button-prev::after,
.section-5-3-button-next::after {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
}

.section-5-3-button-prev:hover,
.section-5-3-button-next:hover {
  background: none;
  transform: scale(1.05);
}

.section-5-3-button-prev.swiper-button-disabled,
.section-5-3-button-next.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== 第5-4屏：複製自5-3（僅電腦版顯示）===== */
#section-5-4 {
  display: flex !important; /* 電腦版顯示 */
  background: #FFFFFF !important;
  padding: 0 !important;
  position: relative;
  overflow: visible;
}

.section-5-4-border-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14%;
  height: 36%;
  border: 1px solid #c5b197;
  z-index: 0;
  pointer-events: none;
}

.section-5-4-decoration-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  transition: width 0.3s ease, left 0.3s ease, top 0.3s ease;
  opacity: 0;
}

.section-5-4-decoration-image.show {
  animation: fadeInSection54 0.8s ease-out forwards;
}

@keyframes fadeInSection54 {
  from { opacity: 0; }
  to { opacity: 1; }
}

.section-5-4-decoration-image img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

#section-5-4 .section-content {
  max-width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.section-5-4-container {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0px;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: relative;
  padding: 80px 100px 80px 0;
  overflow: visible;
}

.section-5-4-image-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 3;
}

.section-5-4-image-section {
  position: relative;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 3;
  align-self: center;
  justify-self: start;
  box-sizing: border-box;
  overflow: visible;
  margin-left: 0;
  padding-left: 0;
}

.section-5-4-main-slider {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.section-5-4-swiper {
  width: 100%;
  height: auto;
}

.section-5-4-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

.section-5-4-image-placeholder {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #F5F5F5;
}

.section-5-4-image-placeholder img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.section-5-4-image-label {
  position: absolute;
  bottom: 0px;
  right: 0px;
  color: #FFFFFF;
  padding: 8px 16px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  border-radius: 4px;
}

.section-5-4-text {
  padding: 0 60px 0 75px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: end;
  text-align: left;
}

.section-5-4-title-en {
  font-family: 'Times New Roman','Noto Sans TC', serif;
  font-size: 56px;
  font-weight: 400;
  color: #007F86;
  letter-spacing: -1px;
  line-height: 0.8;
  margin: 0;
  display: flex;
  align-items: center;
}

.section-5-4-title-enL {
  font-size: 36px;
  margin: 0 15px;
}

.section-5-4-title-zh {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #007F86;
  letter-spacing: 3px;
  margin: 0;
  line-height: 1.6;
}

.section-5-4-description {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 1.2px;
  color: #000000;
  font-weight: 600;
  margin-top: 10px;
}

.section-5-4-description p {
  margin: 0 0 15px 0;
}

.section-5-4-description p:last-child {
  margin-bottom: 0;
}

.section-5-4-nav-buttons {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  display: flex;
  gap: 0;
}

.section-5-4-button-prev,
.section-5-4-button-next {
  width: 50px;
  height: 50px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  margin: 0;
}

.section-5-4-button-prev {
  border-radius: 4px 0 0 4px;
}

.section-5-4-button-next {
  border-radius: 0 4px 4px 0;
}

.section-5-4-button-prev::after,
.section-5-4-button-next::after {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
}

.section-5-4-button-prev:hover,
.section-5-4-button-next:hover {
  background: none;
  transform: scale(1.05);
}

.section-5-4-button-prev.swiper-button-disabled,
.section-5-4-button-next.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== 第六屏：BRAND ===== */
#section-brand {
  background: #FFFFFF !important;
  padding: 0 !important;
  position: relative;
  overflow: visible;
}

/* 底層邊框 div */
.brand-border-box {
  position: absolute;
  top: 72%;
  left: 37%;
  transform: translate(-50%, -50%);
  width: 27%;
  height: 200px;
  border: 1px solid #c5b197;
  border-top: none;
  border-left: none;
  z-index: 0;
  pointer-events: none;
}

/* 使用偽元素繪製左邊框的下半部 */
.brand-border-box::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 50%;
  width: 1px;
  background: #c5b197;
}

#section-brand .section-content {
  max-width: 1600px;
  padding: 0;
  position: relative;
  margin: 0 auto;
}

.brand-container {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  padding: 80px 0px;
  overflow: hidden;
}

/* 左側背景裝飾區 */
.section-brand-background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 40%;
  background-image: url('../images/shutterstock_396573496.jpg');
  background-size: inherit;
  background-position: center;
  z-index: 1;
  pointer-events: none;
}

/* 左側文字區 */
.brand-text {
  padding: 0 40px 0 60px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 2;
  align-self: flex-start;
  justify-self: start;
  text-align: left;
  height: 100%;
}

.brand-title-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom:60px
}

.brand-title-en {
  font-family: 'Times New Roman', serif;
  font-size: 56px;
  font-weight: 400;
  color: #007F86;
  letter-spacing: 2px;
  line-height: 0.8;
  margin: 0;
}

.brand-title-zh {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #007F86;
  letter-spacing: 3px;
  margin: 0;
  line-height: 1.6;
  width: fit-content;
}

.brand-description {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #000000;
  font-weight: 700;
  height: 100%;
  background-color: #FFF;
}

.brand-description p {
  margin: 0 0 8px 0;
}

/* 電腦版/平板版顯示多個 p，手機版隱藏 */
.brand-description-desktop {
  display: block;
}

/* 手機版單一段落，預設隱藏 */
.brand-description-mobile {
  display: none;
}

/* 手機版 Fitwel Logo 內嵌樣式 */
.brand-description-mobile .fitwel-logo-inline {
  height: 11px;
  width: auto;
  max-width: 90px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

/* Fitwel 認證文字 */
.brand-fitwel-text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 0 0 8px 0;
}

.brand-fitwel-text img {
  height: 13px;
  width: auto;
  max-width: 100px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

/* 右側圖片區 */
.brand-image-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 3;
  align-self: center;
  justify-self: center;
  box-sizing: border-box;
  overflow: hidden;
}

/* 主圖片輪播 */
.brand-main-slider {
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}

.brand-swiper {
  width: 100%;
  height: 100%;
}

.brand-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 電腦版：顯示電腦版 slide，隱藏手機版 slide */
.brand-swiper .swiper-slide.desktop-only {
  display: flex;
}
.brand-swiper .swiper-slide.mobile-only {
  display: none;
}

.brand-image-placeholder {
  width: 100%;
  height: 100%;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.brand-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-image-label {
  position: absolute;
  bottom: 0px;
  right: 0px;
  color: #FFFFFF;
  padding: 8px 16px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  border-radius: 4px;
}

/* Brand 輪播導航按鈕 */
.brand-nav-buttons {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  display: flex;
  gap: 0;
}

.brand-button-prev,
.brand-button-next {
  width: 50px;
  height: 50px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  margin: 0;
}

.brand-button-prev {
  border-radius: 4px 0 0 4px;
}

.brand-button-next {
  border-radius: 0 4px 4px 0;
}

.brand-button-prev::after,
.brand-button-next::after {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
}

.brand-button-prev:hover,
.brand-button-next:hover {
  background: none;
  transform: scale(1.05);
}

.brand-button-prev.swiper-button-disabled,
.brand-button-next.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 波浪形狀區塊 (使用背景圖片) */
.brand-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  overflow: hidden;
  line-height: 0;
  z-index: 10;
}

.brand-wave svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100vw;
}

.brand-wave2{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 200px;
  background-image: url('../images/彩色底資訊2.png');
  background-size:cover;
}

/* ===== 第七屏：滿版視覺 ===== */
#section-vision {
  padding: 0;
}

.vision-background {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.vision-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 電腦版顯示桌面圖，隱藏手機圖 */
.vision-bg-desktop {
  display: block;
}

.vision-bg-mobile {
  display: none;
}

.vision-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--color-text-white);
  width: 90%;
  max-width: 900px;
  z-index: 5;
}

.vision-logo {
  margin-bottom: 40px;
  animation: fadeInUp 0.8s ease-out forwards;
}

.vision-logo img {
  height: 120px;
  width: auto;
  display: inline-block;
}

.vision-main-title {
  font-size: 38px;
  font-weight: 500;
  margin-bottom: 5px;
  color: #FFFFFF;
  letter-spacing: 20px;
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
  opacity: 0;
  font-family: 'Noto Sans TC', sans-serif;
}

/* 電腦版 span 不換行 */
.vision-title-line1,
.vision-title-line2 {
  display: inline;
}

.vision-subtitle {
  font-size: 32px;
  font-weight: 300;
  margin-bottom: 60px;
  color: #FFFFFF;
  letter-spacing: 3px;
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
  opacity: 0;
  font-family: 'Noto Sans TC', sans-serif;
}

.vision-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  animation: fadeInUp 0.8s ease-out 0.6s forwards;
  opacity: 0;
}

.vision-rooms {
  font-size: 24px;
  font-weight: 400;
  color: #FFFFFF;
  letter-spacing: 2px;
  font-family: 'Noto Sans TC', sans-serif;
}

.vision-rooms .room-number {
  font-size: 48px;
  font-weight: 600;
}

.vision-divider {
  font-size: 32px;
  color: #FFFFFF;
  opacity: 0.6;
}

.vision-phone {
  font-size: 24px;
  font-weight: 400;
  color: #FFFFFF;
  letter-spacing: 2px;
  font-family: 'Roboto', sans-serif;
}

.vision-phone .phone-main {
  font-size: 48px;
  font-weight: 600;
}

.vision-tagline {
  position: absolute;
  bottom: 30px;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 300;
  color: #f6ffbf;
  letter-spacing: 4px;
  font-family: 'Roboto', sans-serif;
  animation: fadeInUp 0.8s ease-out 0.8s forwards;
  opacity: 0;
}

/* ===== 第八屏：預約表單 ===== */
#section-form {
  background-image: url('../images/shutterstock_396573496.jpg') !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 0 !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

/* 表單區域整體包裝 */
.form-section-wrapper {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  width: 100%;
  padding:0px 10%;
  margin: 0 auto;
}

/* 左側：地圖容器 */
.form-map-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: #E8E8E8;
  overflow: hidden;
}

.form-map-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右側：表單容器 */
.form-container {
  background: #FFFFFF;
  padding: 50px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.form-title {
  font-family: 'Times New Roman', serif;
  font-size: 42px;
  font-weight: 300;
  color: #007F86;
  letter-spacing: -1px;
  margin-bottom: 10px;
  text-align: center;
}

.form-title-divider {
  width: 80px;
  height: 2px;
  background: #c5b197;
  margin: 0 auto 40px;
}

/* 表單樣式 */
.contact-form {
  width: 100%;
  max-width: 450px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  box-sizing: border-box;
}

.form-group {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 0;
  border-bottom: 1px solid #D0D0D0;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
  overflow: hidden;
}

.form-group:focus-within {
  border-bottom-color: #007F86;
}

.form-group label {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #007F86;
  letter-spacing: 1px;
  white-space: nowrap;
  min-width: 85px;
  text-align: left;
  padding-bottom: 12px;
}

.form-group input,
.form-group select {
  flex: 1;
  padding: 12px 10px;
  border: none;
  border-bottom: none;
  background: transparent;
  font-size: 15px;
  color: #333333;
  transition: none;
  border-radius: 0;
  outline: none;
  text-align: left;
  font-family: 'Noto Sans TC', sans-serif;
}

.form-group input:focus,
.form-group select:focus {
  box-shadow: none;
}

.form-group input::placeholder {
  color: #AAAAAA;
  font-size: 14px;
}

.form-group select {
  appearance: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
  padding-right: 10px;
  cursor: pointer;
  color: #007F86;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}


.form-group select option {
  color: #007F86;
  text-align: center;
}

/* 隱私權同意 */
.privacy-policy {
  margin: 20px 0 25px;
  width: 100%;
  display: flex;
  justify-content: center;
  border-bottom: none;
}

.privacy-policy:focus-within {
  border-bottom: none;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #666666;
  cursor: pointer;
  line-height: 1.6;
  font-family: 'Noto Sans TC', sans-serif;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #007F86;
}

/* 提交按鈕 */
.submit-btn {
  width: 100%;
  padding: 14px 24px;
  background: #007F86;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  border: 2px solid #007F86;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none;
  font-family: 'Noto Sans TC', sans-serif;
}

.submit-btn:hover {
  background: transparent;
  color: #007F86;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(60, 118, 112, 0.3);
}

.submit-btn:active {
  transform: translateY(0);
}

.form-message {
  margin-top: 20px;
  padding: 12px;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

.form-message.success {
  background: #E8F5E9;
  color: #2E7D32;
  border: 1px solid #4CAF50;
}

.form-message.error {
  background: #FFEBEE;
  color: #C62828;
  border: 1px solid #F44336;
}

/* 底部建案資訊條 */
.project-info-bar {
  background: transparent;
  padding: 0px 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* 桌面版:使用 row 顯示 */
.project-info-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px 30px;
  width: 100%;
}

/* 手機版:使用 line 顯示(預設隱藏) */
.project-info-line {
  display: none;
}

.project-info-item {
  font-size: 16px;
  color: #007F86;
  letter-spacing: 0.5px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 700;
}

.info-label {
  font-weight: 700;
  margin-right: 4px;
}

.info-value {
  font-weight: 700;
  opacity: 1;
}

/* ===== Footer ===== */
.footer {
  background: var(--color-bg-dark);
  color: var(--color-text-white);
  text-align: center;
  padding: var(--spacing-lg);
  font-size: var(--font-size-sm);
}

/* ===== Swiper 客製化樣式 ===== */
.swiper-pagination-bullet {
  background: var(--color-text-white);
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  background: var(--color-accent);
  opacity: 1;
}

.swiper-button-prev,
.swiper-button-next {
  color: var(--color-text-white);
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: var(--font-size-xl);
}

/* 隱藏 hero swiper 的導航和頁數 */
.hero-swiper .swiper-pagination,
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  display: none;
}

/* ========================================
   響應式斷點調整 (在 main.css 中)
   ======================================== */

/* ===== 超大螢幕 (>= 2560px) ===== */
@media (min-width: 2560px) {
  
}