/* --- Global Styles --- */
:root {
  --left-color: #57b7c9;
  --right-color: #8489db;
  --page-bg: #ffffff; /* 若頁面背景非白色，改這裡 */
}
body {
  margin: 0;
  font-family: "Noto Sans TC", sans-serif;
  background-color: #f6f6f6;
  color: #333;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}
/* --- 修改後的 CSS --- */

/* h2 容器的樣式 */
.languages-section h2 {
  font-size: 45px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.languages-section h2::before {
  display: none;
}

.languages-section h2 > span {
  background: linear-gradient(to right, #57b7c9, #8489db);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 570px) {
  .languages-section h2 {
    font-size: 35px;
  }
}

/* 新增的小圖示的樣式 */
.title-icon {
  width: 70px; /* 設定圖示寬度 */
  height: 70px; /* 設定圖示高度 */
  object-fit: contain; /* 確保圖示比例正確 */
}

/* 【重要】特別處理 marketing-section 內的 h2 */
/* 因為那個區塊背景是深色，需要讓文字變回白色 */
/* .marketing-section h2 > span {
  background: none; 
  color: white; 
} */
/* marketing-section 內的圖示也需要調整 */
.marketing-section h2 .title-icon {
  /* 如果您有白色版本的圖示，可以在這裡替換 */
  /* filter: invert(1); 可以簡單地將深色圖示變白色，但不一定完美 */
}

/* --- Header --- */
.banner {
  position: relative;
  width: 100%;
  height: 550px;
  background: #fff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner-bg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 85%;
  max-width: 1920px;
  display: flex;
  justify-content: space-between;
}
.banner-bg-left,
.banner-bg-right {
  width: 50%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
}
.banner-bg-left {
  background-image: url("../images/banner-bg-left.svg");
  background-position: bottom left;
}
.banner-bg-right {
  background-image: url("../images/banner-bg-right.svg");
  background-position: bottom right;
}
.banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 20px;
  width: 100%;
  height: 100%;
}

.banner-title-img {
  max-width: 25%;
  height: auto;
  object-fit: contain;
}

.banner-speaker-img {
  max-width: 19%;
  height: auto;
  object-fit: contain;
  align-self: flex-end;
}

@keyframes slideInFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleInFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.banner-title-img {
  max-width: 25%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  animation: slideInFadeIn 1s ease-out forwards;
  animation-delay: 0.3s;
}

.banner-speaker-img {
  max-width: 19%;
  height: auto;
  object-fit: contain;
  align-self: flex-end;
  opacity: 0;
  transform-origin: bottom center;
  animation: slideInFadeIn 1s ease-out 0.5s forwards;
}

/* 背景地標圖案容器 */
.banner-bg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 85%;
  max-width: 1920px;
  display: flex;
  justify-content: space-between;

  /* (關鍵) 新增這一行，讓元素預設為透明 */
  opacity: 0;

  animation: scaleInFadeIn 1.2s ease-out forwards;
}

/* --- ↑↑↑ Banner 區塊的載入動畫樣式結束 ↑↑↑ --- */

@media (max-width: 1350px) {
  .banner-title-img {
    max-width: 27%;
  }

  .banner-speaker-img {
    max-width: 21%;
  }
}

@media (max-width: 1120px) {
  .banner-title-img {
    max-width: 30%;
  }

  .banner-speaker-img {
    max-width: 24%;
  }
}

@media (max-width: 950px) {
  .banner-title-img {
    max-width: 34%;
  }

  .banner-speaker-img {
    max-width: 27%;
  }
}

@keyframes slideInFadeIn-mobile {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(40px);
  }
}

@media (max-width: 768px) {
  .banner-content {
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 20px;
    gap: 15px;
  }

  .banner-title-img {
    max-width: 42%;
  }

  .is-ios .banner-title-img {
    animation-name: slideInFadeIn-mobile;
  }

  .banner-speaker-img {
    max-width: 27%;
    align-self: center;
  }

  .banner-bg {
    bottom: 40px;
    height: 60%;
  }
  .banner-bg-left,
  .banner-bg-right {
    background-size: contain;
  }

  .banner-bg-left {
    background-image: url("../images/banner-bg-left-m.svg");
    background-position: bottom left;
  }
  .banner-bg-right {
    background-image: url("../images/banner-bg-right-m.svg");
    background-position: bottom right;
  }
}

@media (max-width: 570px) {
  .banner-title-img {
    max-width: 52%;
  }

  .banner-speaker-img {
    max-width: 33%;
  }
}

@media (max-width: 500px) {
  .banner-title-img {
    max-width: 58%;
  }

  .banner-speaker-img {
    max-width: 38%;
  }
}

@media (max-width: 450px) {
  .banner-title-img {
    max-width: 60%;
  }
}

@media (max-width: 400px) {
  .banner-title-img {
    max-width: 69%;
  }

  .banner-speaker-img {
    max-width: 44%;
  }
}

@media (max-width: 365px) {
  .banner-title-img {
    max-width: 75%;
  }

  .banner-speaker-img {
    max-width: 47%;
  }
}

.top-nav {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 3;
}
.top-nav a {
  display: inline-block;
  margin-left: 10px;
  width: 45px;
  height: 45px;
}

.logo-desktop {
  display: inline-block;
  position: absolute;
  top: 20px;
  left: 30px;
  z-index: 3;
  width: 100px;
  height: auto;
}
.logo-mobile {
  display: none;
  position: absolute;
  top: 20px;
  left: 30px;
  z-index: 3;
  width: 170px;
  height: auto;
}

@media (max-width: 768px) {
  .logo-desktop {
    display: none;
  }
  .logo-mobile {
    display: inline-block;
  }
}

@media (max-width: 365px) {
  .logo-mobile {
    width: 140px;
  }
}

/* ------------------------------------------------- */
/* --- 這是 clip-path + SVG 引用法的最終完美版本 --- */

.info-section {
  position: relative;
  background: linear-gradient(90deg, #57b7c9, #8489db);
  color: white;
  margin-top: -130px;
  z-index: 5;
  -webkit-clip-path: url(#concave-clip);
  clip-path: url(#concave-clip);
}

/* 內容欄位需要足夠的 padding-top 來避開被裁切掉的弧形區域 */
.info-section .columns {
  display: flex;
  justify-content: space-around;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  /* 這個 padding-top 的值需要比弧線的深度稍大 */
  padding: 150px 20px 60px;
}

/* 欄位樣式（與之前相同） */
.info-section .column {
  flex: 1;
  padding: 0 20px;
}
.info-section .column:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.info-section .column .info-section-icon {
  width: 70px;
  height: auto;
  margin-bottom: 10px;
}
.info-section .column h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
}

.info-section .column a {
  text-decoration: none;
  color: #fff;
}

.info-section .info-section-arrow {
  margin-top: 15px;
  width: 32px;
}

/* --- ↓↓↓ 箭頭向下引導動畫的樣式 ↓↓↓ --- */

/* 1. 定義名為 "scroll-down-hint" 的動畫關鍵影格 */
@keyframes scroll-down-hint {
  /* 開始狀態：在原位，完全可見 */
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  /* 動畫中點：向下移動 10px，並開始淡出 */
  50% {
    opacity: 0.5;
    transform: translateY(10px);
  }
  /* 結束狀態：向下移動 20px，完全透明 */
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* 2. 為箭頭圖片設定基本樣式與動畫 */
.info-section-arrow {
  /* 建議加上一些基本樣式，確保位置與大小適當 */
  display: block; /* 讓 margin 生效 */
  width: 30px; /* 自訂寬度 */
  margin: 15px auto 0; /* 調整與上方標題的距離 */

  /* animation 屬性說明：
      - scroll-down-hint: 使用我們上面定義的動畫名稱
      - 2s:     動畫完整循環一次的時間為 2 秒
      - infinite: 無限次循環播放
      - ease-in-out: 動畫速度曲線，讓動作更平滑
    */
  animation: scroll-down-hint 2s infinite ease-in-out;
}

/* 3. (推薦) 為三個箭頭分別設定 animation-delay，創造錯開效果 */

/* 第一個箭頭 (無延遲) */
.column:nth-child(1) .info-section-arrow {
  animation-delay: 0s;
}

/* 第二個箭頭 (延遲 0.2 秒) */
.column:nth-child(2) .info-section-arrow {
  animation-delay: 0.2s;
}

/* 第三個箭頭 (延遲 0.4 秒) */
.column:nth-child(3) .info-section-arrow {
  animation-delay: 0.4s;
}

/* --- ↓↓↓ 手機版響應式樣式 (僅調整凹陷程度) --- */

@media (max-width: 768px) {
  /* 1. 在手機上，減少與 Banner 的重疊距離 */
  /* .info-section {
    margin-top: -120px;
  } */

  /* 2. 讓 SVG 遮罩的高度變矮，弧線視覺上就會變淺 */
  .info-section .divider-svg {
    height: 40px; /* 從 120px 減少到 80px */
  }

  /* 3. 對應地，減少內容的顶部間距 */
  .info-section .columns {
    padding-top: 95px;
    padding-bottom: 30px;
  }

  .info-section .column .info-section-icon {
    width: 55px;
  }
  .info-section .column h3 {
    font-size: 1.2rem;
  }
}
/* --- ↑↑↑ 響應式樣式結束 --- */

/* --- Languages Section --- */
.languages-section {
  text-align: center;
}
.languages-grid {
  display: grid;
  grid-template-columns: min(90%, 400px);
  gap: 25px;
  margin-bottom: 40px;
  justify-content: center;
}

@media (max-width: 768px) {
  .languages-grid {
    gap: 15px;
  }
}

.lang-card {
  position: relative;
  min-height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.lang-card:hover {
  transform: scale(1.03);
  cursor: pointer;
}

.lang-card.card-hidden {
  opacity: 0;
  transform: translateY(30px);
}

.lang-card a {
  display: block;
  text-decoration: none;
  line-height: 0;
}

/* 3. 關鍵：為每張卡片設定不同的動畫延遲時間，製造「依次出現」的效果 */
.lang-card:nth-child(2) {
  transition-delay: 0.1s;
}
.lang-card:nth-child(3) {
  transition-delay: 0.2s;
}
.lang-card:nth-child(4) {
  transition-delay: 0.3s;
}

.lang-card-single-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 1. 按鈕的外部容器 */
.seminar-cta-wrapper {
  text-align: center;
  position: relative;
  padding-bottom: 25px;
}

/* --- 請用這段新的 .seminar-cta-btn 樣式進行替換 --- */
.seminar-cta-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 10px 35px 10px 35px;
  border: 4px solid transparent;
  border-radius: 40px;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to right, #57b7c9, #8489db) border-box;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* 4. 下方三角形 */
.seminar-cta-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  width: 40px;
  height: 20px;
  background: linear-gradient(to right, #57b7c9, #8489db);
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.seminar-cta-btn:hover {
  transform: scale(1.04);
}

/* 5. 左側圖示 */
.seminar-cta-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background-color: #e87a5e;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 50%;
  margin-right: 15px;
  flex-shrink: 0;
  padding: 5px;
}

/* 6. 漸層文字 */
.seminar-cta-text {
  font-size: 42px;
  font-weight: 800;
  background: linear-gradient(to right, #64dfdf, #8489db);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 7. 右側的人物圖片 */
.seminar-cta-image {
  height: 110px;
  width: auto;
  margin-left: 15px;
  margin-right: -10px;
  margin-top: -25px;
  margin-bottom: -10px;
}
@media (max-width: 657px) {
  .seminar-cta-text {
    font-size: 32px;
  }
}

@media (max-width: 569px) {
  .seminar-cta-text {
    font-size: 28px;
  }

  .seminar-cta-btn {
    padding: 10px 25px 10px 20px;
  }
}

@media (max-width: 501px) {
  .seminar-cta-text {
    font-size: 26px;
  }

  .seminar-cta-btn {
    padding: 6px 15px 6px 15px;
  }

  .seminar-cta-image {
    height: 100px;
    margin-left: 0px;
  }

  .seminar-cta-icon {
    width: 22px;
    height: 22px;
    margin-right: 2px;
  }
}

@media (min-width: 900px) {
  .languages-grid {
    grid-template-columns: repeat(2, 420px);
  }
}

/* --- Marketing Section (全新樣式) --- */

/* 1. 滿版漸層背景區塊 */
.marketing-section {
  background: linear-gradient(120deg, #64dfdf 0%, #8489db 100%);
  color: white;
  padding: 80px 0;
}

/* 1. 標題區容器  */
.section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  margin-bottom: 60px;
}

/* 2. 左側圖示 */
.section-icon {
  width: 80px;
  height: auto;
  margin-right: 30px;
  flex-shrink: 0;
}

/* 3. 右側文字區 */
.header-text p {
  font-size: 16px;
  line-height: 1.7;
  opacity: 0.9;
  margin-top: 10px;
}

/* h2 標題的基本樣式 */
.section-header h2 {
  font-size: 42px;
  margin: 0;
  color: white;
  text-align: left;
}
.section-header h2 > span {
  background: none;
  color: white;
}

@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    margin-bottom: 40px;
  }

  .section-icon {
    margin-right: 0;
    margin-bottom: 20px;
  }
}

/* 3. 三個項目的網格排版 */
.marketing-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
}
.mkt-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 250px; /* 固定寬度 */
}

/* --- 新增：單純圖片的樣式 --- */
.mkt-image {
  width: 180px;
  height: auto;
}

/* 5. 項目下方的箭頭按鈕 */
/* --- 修改 .mkt-arrow-btn 的樣式 --- */
.mkt-arrow-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  padding: 2px;
  border: 8px solid white;
  border-radius: 50%;
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 24px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}
.mkt-arrow-btn:hover {
  transform: scale(1.15);
}
.mkt-arrow-btn-svg {
  width: 35px;
  height: 35px;
}
/* 為三個按鈕設定不同顏色 */
.mkt-arrow-btn.color-1 {
  background-color: #2ca5b3;
}
.mkt-arrow-btn.color-2 {
  background-color: #9ccc65;
}
.mkt-arrow-btn.color-3 {
  background-color: #e87a5e;
}

/* 6. 項目下方的標題 */
.mkt-item h3 {
  font-size: 38px;
  font-weight: bold;
  color: white;
  margin-top: 10px;
}

/* --- 全球市場行銷力動畫樣式 --- */

/* 1. 定義一個新的、多次彈跳且帶有停頓的動畫 */
@keyframes multi-bounce-delayed {
  /* 動畫總長度為 4 秒。我們將多次彈跳動作壓縮在前 40% 的時間 (約 1.6 秒) 內完成。
      剩下的 60% 時間 (約 2.4 秒) 則是用來暫停。
    */

  /* 開始狀態 */
  0% {
    transform: translateY(0);
  }

  /* 第一次、也是最大的一次彈跳 */
  10% {
    transform: translateY(-20px);
  }
  20% {
    transform: translateY(0);
  }

  /* 第二次、較小的反彈 */
  25% {
    transform: translateY(-10px);
  }
  30% {
    transform: translateY(0);
  }

  /* 第三次、最輕微的反彈 */
  35% {
    transform: translateY(-5px);
  }

  /* 在 40% 的時間點落地，並開始暫停直到 100% */
  40%,
  100% {
    transform: translateY(0);
  }
}

/* 1. 先為所有的圖片設定好基礎動畫 */
.mkt-item .mkt-image {
  animation: multi-bounce-delayed 3s infinite ease-in-out;
  transform-origin: bottom;
  transition: transform 0.3s ease;
}

/* 第一個項目 (無延遲，立即開始) */
.mkt-item:nth-child(1) .mkt-image {
  animation-delay: 0s;
}

/* 第二個項目 (延遲 0.3 秒後開始) */
.mkt-item:nth-child(2) .mkt-image {
  animation-delay: 0.3s;
}

/* 第三個項目 (延遲 0.6 秒後開始) */
.mkt-item:nth-child(3) .mkt-image {
  animation-delay: 0.6s;
}

/* --- Seminar Section (全新樣式) --- */

/* 1. 最外層容器與背景圖 */
.seminar-section {
  background-image: url("../images/map-background.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  padding: 80px 0px 40px 0px;
}
.seminar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap; /* 在小螢幕時換行 */
}

/* --- 請用這段新樣式替換舊的 .seminar-img 樣式 --- */
.seminar-img {
  width: 300px;
  height: auto;
}

/* 3. 右側內容區 */
.seminar-content {
  flex-basis: 500px; /* 設定一個基準寬度 */
}
.seminar-title {
  display: flex;
  align-items: center;
  gap: 15px;
}
.seminar-title-icon {
  width: 55px;
  height: auto;
}
.seminar-title-text h3 {
  font-size: 42px;
  font-weight: 800;
  margin: 0;
  color: #57b7c9;
}
.seminar-title-text p {
  font-size: 20px;
  font-weight: 700;
  color: #57b7c9;
  margin: 2px 0 0 0;
}

/* --- ↓↓↓ 滾動觸發的滑入動畫樣式 ↓↓↓ --- */

/* 1. 定義一個名為 "slide-in-left" 的動畫關鍵影格 */
@keyframes slide-in-left {
  0% {
    /* 初始狀態：在左邊 100px 的位置，且完全透明 */
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    /* 結束狀態：回到原位，且完全可見 */
    transform: translateX(0);
    opacity: 1;
  }
}

/* 2. 設定圖片的初始狀態 */
.seminar-img {
  /* 預設為透明，等待動畫觸發 */
  opacity: 0;
  /* 增加一個過渡，如果JS失效或動畫不支援時，也能平滑顯示 */
  transition: opacity 0.5s;
}

/* 3. 創建一個用來觸發動畫的 class */
/* 當這個 class 被加到 .seminar-img 上時，動畫就會播放 */
.seminar-img.animate {
  animation: slide-in-left 1s ease-out forwards;
}

/* 4. 中間的 "0元起" 區塊 */
.seminar-offer {
  display: flex;
  align-items: flex-end;
  margin: 20px 0;
}
.offer-price {
  font-size: 180px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(to bottom, #57b7c9, #8489db);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.offer-details {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding-bottom: 15px;
}

.offer-unit,
.offer-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  background: linear-gradient(to right, #2ca5b3, #8489db);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- ↓↓↓ 文字不規則閃現動畫樣式 ↓↓↓ --- */
/* --- ↓↓↓ 文字完全消失且速度放慢的動畫樣式 ↓↓↓ --- */

/* 1. 更新關鍵影格，讓文字完全消失 */
@keyframes text-flicker {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    /* (修改) 將 opacity 改為 0，讓文字在閃爍時完全消失 */
    opacity: 0;
  }
}

/* 2. 將動畫速度放慢，並套用到所有三個文字元素上 */
.offer-price,
.offer-unit,
.offer-title {
  /* (修改) 將動畫總時長從 3s 延長到 4s，讓節奏變慢 */
  animation: text-flicker 4s infinite ease-in-out;
}

/* 3. 保持不規則的 animation-delay 設定不變 */
.offer-price {
  animation-delay: 0.5s;
}
.offer-unit {
  animation-delay: 0s;
}
.offer-title {
  animation-delay: 0.9s;
}

/* 5. 底部的漸層連結按鈕 */
/* --- 1. 修改 .seminar-link 的樣式 --- */
.seminar-link {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(to right, #2ca5b3, #8489db);
  color: white;
  padding: 10px 15px 10px 30px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 22px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.seminar-link:hover {
  transform: scale(1.05);
}

/* --- 箭頭樣式 --- */

/* 箭頭的圓形背景 */
.arrow-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  background-color: white;
  border-radius: 50%;
  margin-left: 15px;
  flex-shrink: 0;
  color: #8489db;
}

.arrow-icon-svg {
  width: 18px;
  height: 18px;
}

/* --- 新增：Seminar 區塊在手機版的置中樣式 --- */
@media (max-width: 768px) {
  /* 1. 將左右並排改為垂直堆疊 */
  .seminar-container {
    flex-direction: column; /* 改為垂直堆疊 */
    gap: 30px; /* 縮小垂直間距 */
  }

  /* 2. 讓右側內容區塊本身，以及它裡面的所有東西都置中 */
  .seminar-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* 讓所有子項目水平置中 */
  }
}

/* --- Footer --- */

/* 1. 外部容器的基本設定 */
footer {
  background-color: #f6f6f6;
  padding: 20px 0;
  border-top: 1px solid #eee; /* 頁尾頂部分隔線 (可選) */
}

/* 2. 電腦版樣式 (預設) */
.footer-container {
  display: flex;
  justify-content: center; /* 將左右兩個項目推到兩邊 */
  align-items: center; /* 垂直置中 */
  flex-wrap: wrap; /* 在極端情況下換行 */
  gap: 20px; /* 彈性間距 */
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 15px; /* 圖示之間的間距 */
}

.social-icons img {
  width: 50px;
  height: 50px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.social-icons a:hover img {
  opacity: 1;
}

.footer-text {
  margin: 0; /* 移除 p 標籤的預設邊距 */
  font-size: 14px;
  color: #000;
  /* 關鍵：用 border-left 製作分隔線 */
  border-left: 1px solid #000;
  padding-left: 30px; /* 分隔線與文字的間距 */
  margin-left: 30px; /* 分隔線與左邊圖示的間距 */
}

.footer-text a {
  color: #000;
  text-decoration: none;
}

/* 3. 手機版樣式 (當螢幕寬度 <= 768px) */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column; /* 改為垂直堆疊 */
    justify-content: center; /* 水平置中 */
    gap: 25px; /* 上下間距 */
  }

  .footer-text {
    border-left: none; /* << 關鍵：隱藏分隔線 */
    margin-left: 0; /* 移除因分隔線產生的空間 */
    padding-left: 0; /* 移除因分隔線產生的空間 */
    text-align: center; /* 文字置中 */
  }
}

/* --- ↓↓↓ 更新後的回到頂部按鈕樣式 (白色半透明) ↓↓↓ --- */
#backToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 1000;

  width: 50px;
  height: 50px;

  /* 1. 背景色改為白色半透明 */
  background-color: rgba(172, 172, 172, 0.8); /* 0.8 代表 80% 不透明度 */

  /* 2. 圖示顏色改為主題紫色，形成對比 */
  color: #fff;

  border: none;
  border-radius: 50%;
  cursor: pointer;

  /* (可選) 增加陰影，讓按鈕在複雜背景下更突出 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  /* (可選) 增加毛玻璃效果 (部分瀏覽器支援) */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s; /* 讓所有變化的過渡都平滑 */
}

/* 按鈕內的 SVG 圖示大小 */
#backToTopBtn svg {
  width: 28px;
  height: 28px;
}

/* 當按鈕需要顯示時，添加這個 class */
#backToTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 滑鼠懸停時的效果，改為完全不透明的白色 */
#backToTopBtn:hover {
  background-color: rgba(172, 172, 172); /* 變為完全不透明的白色 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 陰影加深 */
  transform: translateY(-2px); /* 稍微向上浮動 */
}
/* --- ↑↑↑ 樣式結束 ↑↑↑ --- */
/* --- ↑↑↑ 樣式結束 ↑↑↑ --- */