@charset "utf-8";
/* CSS Document */
@charset "utf-8";

/* 1. 核心字體與排版：營造高訂感 */
body {
    font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
    color: #333;
    line-height: 1.8;
    background-color: #fff;
}

/* 2. 女神級標題視覺 (SEO 友善) */
.title-glory {
    font-size: 2rem;
    font-weight: bold;
    color: #b08d57; /* 職人典藏金 */
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

/* 3. 圖片數位優化容器 (防止排版破碎) */
.img-container {
    max-width: 100%;
    height: auto;
    border: 1px solid #eee; /* 微細邊框增加博物館質感 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* 4. 針對行動裝置 (中彰受眾多使用手機預約) */
@media (max-width: 768px) {
    .title-glory {
        font-size: 1.5rem;
    }
}
.slider { position: relative; width: 100%; height: 100vh; overflow: hidden; background: #000; } .slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease-in-out; } .slide.active { opacity: 1; z-index: 1; } .slide img { width: 100%; height: 100%; object-fit: cover; } /* Caption */ .caption { position: absolute; top: 10%; left: 5%; color: #fff; max-width: 70%; text-shadow: 0 2px 12px rgba(0,0,0,0.35); } /* 標題字體特效（無黑線條） */ .hero-title { font-size: 3.5rem; /* 桌機版字體放大 */ font-weight: 700; letter-spacing: 0.18rem; display: inline-block; } @media (max-width: 768px) { .hero-title { font-size: 2.2rem; } /* 手機版稍微小一點 */ } .hero-title span { opacity: 0; transform: translateY(20px) scale(0.9); animation: fadeInUp 0.6s forwards; display: inline-block; /* 漸層文字 */ background: linear-gradient(45deg, #ff99cc, #ffffff, #66ccff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* 柔和光暈，不閃爍 */ text-shadow: 0 0 6px rgba(255,255,255,0.6); } .hero-title span:nth-child(1) { animation-delay: 0.1s; } .hero-title span:nth-child(2) { animation-delay: 0.3s; } .hero-title span:nth-child(3) { animation-delay: 0.5s; } .hero-title span:nth-child(4) { animation-delay: 0.7s; } .hero-title span:nth-child(5) { animation-delay: 0.9s; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0) scale(1); } } .hero-subtitle { margin-top: 10px; font-size: 1.25rem; } .hero-btn { display: inline-block; margin-top: 16px; padding: 10px 20px; background: #fff; color: #111; text-decoration: none; border-radius: 6px; font-weight: 600; transition: background 0.25s ease, color 0.25s ease; } .hero-btn:hover { background: #f0c; color: #fff; } /* 箭頭 */ .arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.45); color: #fff; border: none; font-size: 2rem; cursor: pointer; padding: 10px 12px; z-index: 10; } .arrow.prev { left: 12px; } .arrow.next { right: 12px; } /* dots */ .dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .dots span { width: 12px; height: 12px; background: rgba(255,255,255,0.5); border-radius: 50%; cursor: pointer; } .dots span.active { background: #fff; } /* 進度條 */ .progress-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(255,255,255,0.25); } .progress { height: 100%; width: 0; background: #fff; transition: width 4s linear; } /* 桌機/手機顯示控制 */ #desktopSlider { display: block; } #mobileSlider { display: none; } @media (max-width: 768px) { #desktopSlider { display: none; } #mobileSlider { display: block; } } .caption {
  position: absolute;
  top: 10%;
  left: 5%;
  max-width: 70%;
  /* 移除黑色背景框 */
  padding: 0; 
  background: none;
}

.hero-title {
  font-size: 3.5rem;   /* 桌機版字體放大 */
  font-weight: 900;
  letter-spacing: 0.18rem;
  display: inline-block;
  color: #fff; /* 純白字體 */
  text-shadow: 0 0 6px rgba(0,0,0,0.5); /* 微光暈，讓字體更清楚 */
}

@media (max-width: 768px) {
  .hero-title { font-size: 2.2rem; }
}

.hero-title span {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s forwards;
  display: inline-block;
}

.hero-title span:nth-child(1) { animation-delay: 0.1s; }
.hero-title span:nth-child(2) { animation-delay: 0.3s; }
.hero-title span:nth-child(3) { animation-delay: 0.5s; }
.hero-title span:nth-child(4) { animation-delay: 0.7s; }
.hero-title span:nth-child(5) { animation-delay: 0.9s; }

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

.hero-title span:nth-child(1) { animation-delay: 0.1s; }
.hero-title span:nth-child(2) { animation-delay: 0.3s; }
.hero-title span:nth-child(3) { animation-delay: 0.5s; }
.hero-title span:nth-child(4) { animation-delay: 0.7s; }
.hero-title span:nth-child(5) { animation-delay: 0.9s; }

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}
/* 1. 讓 body 可以捲動 */
body {
  margin: 0;
  min-height: 100vh; /* 改為最小高度 */
  background: linear-gradient(135deg, #ffe0f0, #fff);
  overflow-y: auto !important; /* 強制開啟垂直捲軸 */
  overflow-x: hidden; /* 防止橫向跑出來 */
}

/* 2. 讓輪播器不要霸佔整個網頁的所有空間 */
.slider {
  position: relative;
  width: 100%;
  height: 85vh; /* 稍微縮小一點輪播高度，提示下方還有內容 */
  overflow: hidden;
  background: #000;
}

/* 3. 確保花瓣特效不會擋住文字點擊 */
.petal-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 999; /* 稍微降一點層級，讓文案按鈕好點擊 */
}
    } margin: 0;
      font-family: sans-serif;
      background: linear-gradient(135deg, #ffe0f0, #fff);
      color: #333;
    }

    .hero-caption {
      position: relative;
      padding: 60px 40px;
      text-align: left;
      color: #fff;
      text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
      background: url('images/Homepage-Image/Wedding-dress-model-sample-photos001.png') no-repeat center/cover;
      height: 100vh;
    }
    .hero-title {
      font-size: 2.4em;
      margin: 0;
    }
    .hero-subtitle {
      font-size: 1.2em;
      margin: 10px 0;
    }

    /* 按鈕共用樣式 */
    .hero-btn {
      display: inline-block;
      font-size: 0.9em;
      padding: 10px 16px;
      background: linear-gradient(135deg, #ff7eb3, #ff758c);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-weight: bold;
      text-decoration: none;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      margin-top: 15px; /* 副標題下方距離 */
      opacity: 0; /* 初始透明 */
      animation: fadeZoomIn 1.2s forwards; /* 淡入動畫 */
      animation-delay: 0.8s; /* 延遲出現 */
    }
    .hero-btn:hover {
      transform: scale(1.05);
      background: linear-gradient(135deg, #ff9a9e, #fad0c4);
      color: #333;
      box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    }

    /* 淡入動畫 */
    @keyframes fadeZoomIn {
      from { opacity: 0; transform: translateY(20px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

/* 手機版：固定在底部並拉高按鈕 */
@media screen and (max-width:768px) {
  .hero-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    z-index: 10001;

    /* 新增的部分 */
    padding: 2px 28px;       /* 上下拉高，左右保持 */
    font-size: 1.1rem;        /* 字體稍微放大 */
    line-height: 1.6;         /* 文字行距拉高 */
  }
}
/* 圖片 hover 效果 */
.slide a img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide a img:hover {
  transform: scale(1.05);   /* 微微放大 */
  opacity: 0.9;             /* 稍微淡化，營造互動感 */
}

/* 手機版點擊效果 (active 狀態) */
@media (max-width: 768px) {
  .slide a img:active {
    transform: scale(0.95); /* 點擊時稍微縮小，模擬按下去的感覺 */
    opacity: 0.8;
  }
}

/* 圖片互動效果 */
.slide a img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide a img:hover {
  transform: scale(1.05);   /* 滑鼠移過去微微放大 */
  opacity: 0.9;             /* 稍微淡化，提示可點 */
}

@media (max-width: 768px) {
  .slide a img:active {
    transform: scale(0.95); /* 手機點擊時縮小，模擬按下去 */
    opacity: 0.8;
  }
}

/* 按鈕互動效果 */
.hero-btn {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.hero-btn:hover {
  background-color: #d94f70; /* 滑鼠移過去改顏色 (可依品牌色調整) */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* 增加陰影 */
  transform: translateY(-2px); /* 微微浮起 */
}

.hero-btn:active {
  background-color: #b83d5a; /* 點擊時更深色 */
  transform: translateY(1px); /* 模擬按下去 */
}
/* 圖片互動效果 */
.slide a img {
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;                /* 初始透明 */
  animation: fadeIn 1s ease forwards; /* 淡入動畫 */
}

.slide a img:hover {
  transform: scale(1.05);    /* 滑鼠移過去微微放大 */
  opacity: 0.9;              /* 稍微淡化，提示可點 */
}

@media (max-width: 768px) {
  .slide a img:active {
    transform: scale(0.95);  /* 手機點擊時縮小，模擬按下去 */
    opacity: 0.8;
  }
}

/* 按鈕互動效果 */
.hero-btn {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  opacity: 0;                /* 初始透明 */
  animation: fadeInUp 1s ease forwards; /* 往上淡入 */
  animation-delay: 0.5s;     /* 延遲，讓圖片先出現 */
}

.hero-btn:hover {
  background-color: #d94f70; /* 滑鼠移過去改顏色 (可依品牌色調整) */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* 增加陰影 */
  transform: translateY(-2px); /* 微微浮起 */
}

.hero-btn:active {
  background-color: #b83d5a; /* 點擊時更深色 */
  transform: translateY(1px); /* 模擬按下去 */
}

/* 標題與副標題淡入效果 */
.hero-title, .hero-subtitle {
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}

.hero-title {
  animation-delay: 0.3s;
}

.hero-subtitle {
  animation-delay: 0.4s;
}

/* 動畫定義 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 幻燈片容器 */
.slide {
  opacity: 0;
  transition: opacity 1s ease; /* 切換時淡入淡出 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* 當前顯示的幻燈片 */
.slide.active {
  opacity: 1;
  position: relative; /* 保持正常顯示 */
  z-index: 1;
}
/* 幻燈片切換淡入淡出 */
.slide {
  opacity: 0;
  transition: opacity 1s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.slide.active {
  opacity: 1;
  position: relative;
  z-index: 1;
}

/* 圖片互動效果 */
.slide a img {
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}
.slide a img:hover {
  transform: scale(1.05);
  opacity: 0.9;
}
@media (max-width: 768px) {
  .slide a img:active {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

/* 標題與副標題淡入效果 */
.hero-title, .hero-subtitle {
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}
.hero-title { animation-delay: 0.3s; }
.hero-subtitle { animation-delay: 0.4s; }

/* 按鈕互動效果 */
.hero-btn {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
  animation-delay: 0.5s;
}
.hero-btn:hover {
  background-color: #d94f70;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}
.hero-btn:active {
  background-color: #b83d5a;
  transform: translateY(1px);
}

/* 進度條效果 (像 IG 限時動態) */
.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: #d94f70;
  width: 0%;
  animation: progress 5s linear forwards; /* 5秒一張，可依需求調整 */
}
.slide.active .progress-bar {
  width: 100%;
}

/* 動畫定義 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes progress {
  from { width: 0%; }
  to { width: 100%; }
}
@media screen and (max-width: 1024px) {
  .caption .hero-title {
    margin-top: -40px !important;   /* 往上拉 20px */
    position: relative;
    top: -20px;                     /* 再往上移動 10px */
  }

  .caption .hero-subtitle {
    margin-top: -10px !important;   /* 副標題也稍微拉近 */
  }
}/* 桌機版標題 */ .hero-title { font-size: 2.5rem; /* 原本可能是 3rem，縮小一些 */ line-height: 1.4; }
/* 手機版標題 */ @media screen and (max-width: 1024px) { .hero-title { font-size: 1.8rem !important; /* 手機版再縮小 */ line-height: 1.4 !important; } }
  .queen-final-box {
        display: flex;
        flex-wrap: wrap;
        background: #000;
        border: 2px solid #d4af37;
        margin: 20px auto;
        max-width: 1250px;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    }

    /* 左側：核心動態區 */
    .side-brand-active {
        flex: 1;
        min-width: 300px;
        position: relative;
        background: radial-gradient(circle, #333 0%, #000 100%);
        border-right: 1px solid #333;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30px;
    }

    /* 強力心跳圓環 */
    .promo-circle-active {
        width: 210px;
        height: 210px;
        border: 6px double #d4af37;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 5;
        background: rgba(0,0,0,0.85);
        /* 動畫：心跳縮放 + 外發光 */
        animation: heart-beat 1.2s infinite ease-in-out, gold-glow 1.5s infinite alternate;
    }

    /* 5折文字：閃爍跳動感 */
    .discount-text {
        font-size: 4.5rem;
        color: #fff;
        margin: 5px 0;
        font-weight: 900;
        text-shadow: 0 0 15px #d4af37;
        /* 加入文字閃爍動畫 */
        animation: text-flash 0.8s infinite alternate;
    }

    @keyframes text-flash {
        from { opacity: 1; transform: scale(1); color: #fff; }
        to { opacity: 0.8; transform: scale(1.05); color: #d4af37; }
    }

    @keyframes heart-beat {
        0% { transform: scale(1); }
        10% { transform: scale(1.18); }
        20% { transform: scale(1); }
        30% { transform: scale(1.25); }
        100% { transform: scale(1); }
    }

    @keyframes gold-glow {
        from { box-shadow: 0 0 20px rgba(212, 175, 55, 0.4); }
        to { box-shadow: 0 0 70px rgba(212, 175, 55, 1); }
    }

    /* 中間與右側維持專業配置 */
    .video-core { flex: 1.2; min-width: 350px; background: #000; display: flex; align-items: center; }
    .video-core video { width: 100%; height: auto; }

    .text-content-dynamic {
        flex: 1.2;
        padding: 40px;
        background: #fff;
        color: #333;
        display: flex;
        flex-direction: column;
        justify-content: center;
        animation: fadeInUp 1.2s ease-out;
    }

    .cta-pulse {
        background: linear-gradient(135deg, #d4af37 0%, #b8962d 100%);
        color: #fff !important;
        padding: 20px 30px;
        text-align: center;
        text-decoration: none;
        font-weight: 900;
        border-radius: 50px;
        font-size: 1.4rem;
        cursor: pointer;
        border: none;
        margin-top: 25px;
        animation: pulse-glow 2s infinite;
    }

    @keyframes pulse-glow {
        0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
        70% { box-shadow: 0 0 0 20px rgba(212, 175, 55, 0); }
        100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
    }
 /* 容器設定 */
    .db-special-section {
        max-width: 1100px;
        margin: 60px auto;
        padding: 40px;
        background-color: #ffffff; 
        border: 1px solid #d4af37; /* 經典金邊 */
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 40px;
        font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        box-shadow: 0 15px 45px rgba(0,0,0,0.1);
    }

    /* 左側影像區：典藏金框處理與尺寸控制 */
    .db-framed-box {
        flex: 1;
        max-width: 320px; /* 精確控制圖片容器的最大寬度 */
        position: relative;
    }

    .db-framed-box img {
        width: 100%;
        height: auto;
        border-radius: 2px;
        /* 植入金色偏移陰影，營造博物館典藏畫作感 */
        filter: drop-shadow(15px 15px 0px #d4af37); 
        transition: transform 0.3s ease;
    }
    
    .db-framed-box:hover img {
        transform: scale(1.03); /* 微幅縮放增加動態感 */
    }

    /* 右側文案區 */
    .db-content-card {
        flex: 1.3;
        min-width: 320px;
    }

    .db-label {
        background: #d4af37;
        color: #fff;
        padding: 5px 15px;
        font-size: 0.9rem;
        letter-spacing: 2px;
        display: inline-block;
        margin-bottom: 15px;
    }

    .db-title {
        font-size: 1.8rem; /* 標題尺寸優化 */
        color: #1a1a1a;
        line-height: 1.4;
        margin-bottom: 25px;
        font-weight: 900;
        letter-spacing: 1px;
    }

    .db-text {
        font-size: 1.1rem; /* 內文尺寸優化 */
        color: #444;
        line-height: 1.8;
        margin-bottom: 30px;
    }

    /* 亮點區塊：深紅底、白/金字，解決「色差吃字」問題 */
    .db-info-card {
        background: #7b0d0d; /* 典藏深紅背景 */
        padding: 25px;
        border-left: 6px solid #d4af37;
        box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    }

    .db-info-card p {
        color: #ffffff !important; /* 純白文字 */
        margin: 10px 0;
        font-size: 1.05rem;
        display: flex;
        align-items: center;
    }

    .db-focus {
        color: #f1c40f !important; /* 亮金色關鍵字 */
        font-weight: 900;
        font-size: 1.2rem;
        margin-right: 10px;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }

    /* 行動裝置適應 */
    @media (max-width: 768px) {
        .db-special-section {
            flex-direction: column;
            padding: 20px;
            margin: 30px 15px;
        }
        .db-title {
            font-size: 1.4rem;
        }
        .db-framed-box {
            max-width: 250px;
        }
    }

 /* 1. 全域容器：控制網頁寬度與居中 */
    .db-outer-wrapper {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 15px;
        box-sizing: border-box;
    }

    .db-special-section-final {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        background-color: #ffffff;
        align-items: center;
        justify-content: center;
        font-family: "Microsoft JhengHei", sans-serif;
    }

    /* 2. 影像典藏框：控制相片寬度 */
    .db-framed-box-final {
        padding: 10px;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border: 1px solid #e0e0e0;
        flex: 0 0 450px; /* 固定圖片區寬度 */
        max-width: 100%;
    }

    .db-framed-box-final img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 3. 文案內容區 */
    .db-content-card-final {
        flex: 1;
        min-width: 320px;
        max-width: 600px;
    }

    .db-label-final {
        display: inline-block;
        background: #b8976d;
        color: #fff;
        padding: 4px 12px;
        font-size: 0.85rem;
        margin-bottom: 15px;
        letter-spacing: 1px;
    }

    .db-title-final {
        font-size: 1.8rem;
        color: #222;
        line-height: 1.4;
        margin: 0 0 20px 0;
        font-weight: bold;
    }

    .db-text-final {
        font-size: 1.05rem;
        color: #444;
        line-height: 1.8;
        margin-bottom: 25px;
    }

    /* 4. 重點資訊卡：解決白字被吃掉的問題 */
    .db-info-card-final {
        background: #2c2c2c; /* 深色底，確保白字跳出 */
        padding: 25px;
        border-left: 5px solid #b8976d;
        border-radius: 0 8px 8px 0;
    }

    .db-info-card-final p {
        margin: 12px 0;
        font-size: 1rem;
        color: #ffffff !important; /* 強制純白文字 */
        line-height: 1.6;
    }

    .db-info-card-final strong {
        color: #e6c192; /* 金色強調字 */
        font-weight: bold;
    }

    /* 手機版適配 */
    @media (max-width: 768px) {
        .db-special-section-final { flex-direction: column; text-align: center; }
        .db-info-card-final { text-align: left; }
        .db-framed-box-final { flex: 0 0 100%; }
    }
  /* 1. 容器優化：增加層次感，確保不跑版 */
    .gallery-container {
        max-width: 1100px;
        margin: 40px auto;
        font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
        padding: 20px;
    }

    /* 2. 標題強化：加深色澤，確保金黃色立體感 */
    .main-title {
        text-align: center;
        font-size: 34px;
        color: #8c734b !important; /* 深典藏金 */
        margin-bottom: 5px;
        font-weight: bold;
        letter-spacing: 2px;
        text-shadow: 1px 1px 3px rgba(255,255,255,0.8); /* 淺色背光，確保黑底也清晰 */
    }
    .sub-title {
        text-align: center;
        font-size: 18px;
        color: #444 !important;
        margin-bottom: 40px;
        font-weight: 500;
    }

    /* 3. 關鍵修復：加入「微透白護罩」，字體絕不消失 */
    .feature-row {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        align-items: center;
        margin-bottom: 50px;
        background: rgba(255, 255, 255, 0.92); /* 92% 不透明白底，徹底隔離背景干擾 */
        padding: 35px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* 輕微浮雕感 */
    }

    /* 4. 影像優化：展現 30 年攝影執導眼界 */
    .feature-img {
        flex: 1.2;
        min-width: 350px;
        border-radius: 10px;
        box-shadow: 0 12px 25px rgba(0,0,0,0.2);
        transition: transform 0.4s ease;
    }
    .feature-img:hover { transform: scale(1.03); }

    /* 5. 文字內容：高對比度，SEO 友善 */
    .feature-text {
        flex: 1;
        min-width: 320px;
        padding: 10px 20px;
    }
    .feature-text h3 {
        color: #8c734b;
        font-size: 26px;
        margin-bottom: 15px;
        border-left: 6px solid #D4AF37;
        padding-left: 15px;
    }
    .feature-text p {
        font-size: 17px;
        color: #222 !important; /* 純深色文字，讀起來不費力 */
        line-height: 2.0;
        text-align: justify;
    }

    /* 6. 高亮區塊：針對彰化在地 SEO 關鍵字 */
    .highlight-box {
        background: #fdfaf5;
        border: 1px dashed #b08d57;
        padding: 15px;
        margin-top: 20px;
        font-size: 15px;
        color: #555;
    }

    /* 手機版自動對齊 */
    @media (max-width: 768px) {
        .feature-row { padding: 20px; flex-direction: column !important; }
        .main-title { font-size: 26px; }
        .feature-img { min-width: 100%; }
    }

 /* 數位博物館典藏風格容器 */
    .gallery-container {
        font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
        max-width: 1000px;
        margin: 40px auto;
        padding: 40px;
        background-color: #ffffff;
        border: 1px solid #d4af37; /* 典藏金邊框 */
        box-shadow: 0 15px 40px rgba(0,0,0,0.08);
        color: #333;
        line-height: 1.8;
    }
    .main-title {
        color: #8b0000; /* 尊榮紅 */
        text-align: center;
        font-size: 32px;
        margin-bottom: 5px;
        letter-spacing: 3px;
        font-weight: bold;
    }
    .sub-title {
        text-align: center;
        color: #666;
        margin-bottom: 50px;
        font-size: 18px;
        border-bottom: 2px solid #f0f0f0;
        padding-bottom: 20px;
    }
    .feature-row {
        display: flex;
        align-items: center;
        gap: 40px;
        margin-bottom: 60px;
        flex-wrap: wrap;
    }
    .feature-img {
        flex: 1;
        min-width: 350px;
        max-width: 500px;
        border-radius: 8px;
        box-shadow: 10px 10px 0px #f5f5f5; /* 數位博物館陰影感 */
        transition: 0.4s;
    }
    .feature-img:hover {
        transform: translateY(-5px);
        box-shadow: 15px 15px 30px rgba(0,0,0,0.1);
    }
    .feature-text {
        flex: 1;
        min-width: 320px;
    }
    .feature-text h3 {
        color: #1a1a1a;
        font-size: 24px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
    }
    .feature-text h3::before {
        content: "";
        width: 6px;
        height: 24px;
        background: #d4af37;
        display: inline-block;
        margin-right: 12px;
    }
    .family-badge {
        background: #fff5f5;
        border: 1px solid #ffcccc;
        color: #d0021b;
        padding: 5px 15px;
        font-size: 14px;
        border-radius: 4px;
        display: inline-block;
        margin-bottom: 10px;
        font-weight: bold;
    }
    .highlight-box {
        background: #fafafa;
        border-left: 4px solid #333;
        padding: 20px;
        font-size: 15px;
        color: #555;
        margin-top: 25px;
    }
    @media (max-width: 768px) {
        .feature-row { flex-direction: column !important; }
        .feature-img { max-width: 100%; min-width: 100%; }
    }

  /* 1. 基礎結構優化 */
    .hsu-live-archive {
        max-width: 900px;
        margin: 40px auto;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        box-shadow: 0 15px 40px rgba(0,0,0,0.08);
        font-family: "Microsoft JhengHei", sans-serif;
        overflow: hidden; /* 確保動態不會溢出 */
    }
    .archive-inner { display: flex; flex-wrap: wrap; }

    /* 2. 照片：動態入鏡對焦效果 */
    .archive-photo {
        flex: 1;
        min-width: 300px;
        position: relative;
        overflow: hidden;
        background: #000;
    }
    .archive-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        /* 初顯效果：縮放 + 模糊 (模擬鏡頭開機對焦) */
        transform: scale(1.1);
        filter: blur(5px);
        transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1), filter 1s ease;
    }
    
    /* 當網頁滑到這裡或滑鼠移入，啟動對焦 (您可以手動觸發) */
    .hsu-live-archive:hover .archive-photo img {
        transform: scale(1);
        filter: blur(0);
    }

    /* 3. LIVE 標籤：自動呼吸閃爍 */
    .live-tag {
        position: absolute;
        top: 15px;
        left: 15px;
        background: #ff0000;
        color: #fff;
        padding: 4px 12px;
        font-weight: bold;
        font-size: 0.8rem;
        letter-spacing: 2px;
        z-index: 5;
        /* 閃爍動畫 */
        animation: hsu-blink 1.5s infinite;
    }
    @keyframes hsu-blink {
        0% { opacity: 1; box-shadow: 0 0 0px #ff0000; }
        50% { opacity: 0.4; box-shadow: 0 0 10px #ff0000; }
        100% { opacity: 1; box-shadow: 0 0 0px #ff0000; }
    }

    /* 4. 文案區 */
    .archive-text {
        flex: 1.2;
        padding: 40px;
        min-width: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #fff;
    }
    .吸睛標題 {
        font-size: 1.5rem;
        color: #333;
        margin-bottom: 20px;
        border-left: 5px solid #d4af37;
        padding-left: 15px;
    }
    .hsu-commentary p {
        font-size: 1rem;
        line-height: 1.8;
        color: #555;
        margin-bottom: 15px;
    }
    .archive-footer {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #eee;
        font-size: 0.85rem;
        color: #888;
        display: flex;
        justify-content: space-between;
    }
/* 職人區塊專屬美學 CSS */
.expert-content-section {
    padding: 60px 20px;
    background: #fff;
    color: #333;
    font-family: "Microsoft JhengHei", sans-serif;
}
.expert-container {
    max-width: 1000px;
    margin: 0 auto;
}
.expert-header {
    text-align: center;
    margin-bottom: 40px;
}
.expert-tag {
    background: #d4af37;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
}
.expert-main-title {
    font-size: 28px;
    color: #8b0000;
    margin-top: 15px;
}
.expert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.expert-card {
    background: #fafafa;
    padding: 30px;
    border-radius: 12px;
    border-left: 5px solid #d4af37;
}
.expert-card h3 {
    color: #444;
    margin-bottom: 15px;
}
.expert-card p {
    line-height: 1.8;
    color: #666;
}
.expert-footer {
    text-align: center;
    margin-top: 50px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}
.cta-button {
    display: inline-block;
    background: #8b0000;
    color: #fff;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 50px;
    margin-top: 20px;
    transition: 0.3s;
}
.cta-button:hover { background: #d4af37; }
 /* 1. 樣式直接寫在這裡，不用去改 CSS 檔 */
        .money-rain-particle {
            position: fixed;
            top: -60px;
            z-index: 99999;
            pointer-events: none;
            user-select: none;
            font-family: "Apple Color Emoji", "Segoe UI Emoji", Arial;
            animation: hsu-fall linear forwards;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
        }

        @keyframes hsu-fall {
            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
            15% { opacity: 1; }
            100% { transform: translateY(110vh) rotate(720deg); opacity: 0.7; }
        }/* 自訂網頁滑鼠樣式：圓形小紅點 */
body {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="6" fill="red" stroke="white" stroke-width="2"/></svg>'), auto;
}

/* 當移到連結或按鈕時，紅點稍微放大 */
a:hover, button:hover {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><circle cx="24" cy="24" r="10" fill="rgba(255,0,0,0.7)" stroke="white" stroke-width="2"/></svg>'), pointer;
}
 * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: #000; font-family: "Microsoft JhengHei", sans-serif; color: #fff; overflow-x: hidden; scroll-behavior: smooth; }
        #dbsystem-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%); }
        #confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2500; }

        /* 1. 3D 標題框架 */
        .brand-header { text-align: center; margin-top: 50px; margin-bottom: 120px; perspective: 1200px; }
        .title-frame {
            position: relative; display: inline-block; padding: 25px 60px;
            border: 3px solid #d4af37; background: rgba(0, 0, 0, 0.85);
            transform: rotateX(10deg); box-shadow: 0 30px 80px rgba(0,0,0,1);
        }
        .title-frame::before {
            content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            border: 2px solid #fff; clip-path: inset(0 0 95% 0);
            animation: border-flow 4s infinite linear; box-shadow: 0 0 20px #fff;
        }
        @keyframes border-flow { 0% { clip-path: inset(0 0 95% 0); } 25% { clip-path: inset(0 0 0 95%); } 50% { clip-path: inset(95% 0 0 0); } 75% { clip-path: inset(0 95% 0 0); } 100% { clip-path: inset(0 0 95% 0); } }
        .brand-title { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 900; letter-spacing: 15px; background: linear-gradient(to bottom, #fff 20%, #d4af37 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

        /* 2. 轉盤區：指針下移避開標題 */
        .game-section { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; position: relative; }
        .wheel-container { position: relative; width: 560px; height: 560px; display: flex; align-items: center; justify-content: center; }
        .pointer { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 45px; height: 65px; background: #ff0000; clip-path: polygon(50% 100%, 0 0, 100% 0); z-index: 100; filter: drop-shadow(0 5px 15px rgba(255,0,0,0.5)); border-top: 5px solid #fff; }
        .wheel-outer { position: relative; padding: 12px; background: linear-gradient(135deg, #fff 0%, #ffe4b5 20%, #d4af37 50%, #8b6d00 80%, #fff 100%); border-radius: 50%; box-shadow: 0 0 60px rgba(255,228,181,0.5), inset 0 0 15px rgba(255,255,255,1); }
        #wheel { width: 480px; height: 480px; border-radius: 50%; border: 12px solid #111; background: radial-gradient(circle, rgba(0,0,0,0.4) 36%, transparent 40%, transparent 92%, rgba(0,0,0,0.6) 100%), conic-gradient(#FF0000 0deg 36deg, #FF8C00 36deg 72deg, #FFD700 72deg 108deg, #32CD32 108deg 144deg, #008000 144deg 180deg, #00BFFF 180deg 216deg, #0000FF 216deg 252deg, #8A2BE2 252deg 288deg, #FF1493 288deg 324deg, #8B0000 324deg 360deg); transition: transform 6s cubic-bezier(0.15, 0, 0.15, 1); position: relative; box-shadow: inset 0 0 40px rgba(0,0,0,0.8); }

        /* 中心 0.05px 髮絲黑環 */
        .wheel-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 50%; z-index: 25; background: radial-gradient(circle at 30% 30%, #fff 0%, #d4af37 40%, #664400 100%); box-shadow: 0 0 0 1px #fff, 0 0 0 0.05px #000, 0 0 0 3px #fff, 0 0 0 18px #443300, 0 15px 40px rgba(0,0,0,0.9), inset 0 4px 10px rgba(255,255,255,0.8); border: 1px solid #775500; }

        .spin-btn { margin-top: 50px; padding: 22px 110px; background: linear-gradient(to bottom, #d4af37, #8b6d00); border: 3px solid #fff; border-radius: 60px; color: #000; font-weight: 900; font-size: 2rem; letter-spacing: 8px; cursor: pointer; box-shadow: 0 15px 40px rgba(212,175,55,0.6); transition: 0.3s; }
        .spin-btn:hover { transform: scale(1.05); filter: brightness(1.2); }
        .hsu-gold-text { font-size: 2.5rem; font-weight: 900; margin-top: 50px; background: linear-gradient(to right, #d4af37, #fff, #d4af37); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; }

        /* 3. 十君子矩陣特效補回 */
        .matrix-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; max-width: 1400px; margin: 100px auto; padding: 0 20px; }
        .matrix-card { 
            background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(212, 175, 55, 0.2); 
            padding: 40px 20px; text-decoration: none; color: #fff; text-align: center; 
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); position: relative; overflow: hidden;
        }
        /* 補回：滑鼠掃描白光 */
        .matrix-card::after {
            content: ""; position: absolute; top: -50%; left: -100%; width: 20%; height: 200%;
            background: rgba(255,255,255,0.3); transform: rotate(30deg); transition: 0s;
        }
        .matrix-card:hover { border-color: #fff; background: rgba(212, 175, 55, 0.2); transform: translateY(-15px) scale(1.03); box-shadow: 0 25px 50px rgba(0,0,0,0.9); }
        .matrix-card:hover::after { left: 150%; transition: 0.8s; } /* 光影掃過 */
        .matrix-card h4 { font-size: 1.5rem; color: #d4af37; margin-bottom: 12px; font-weight: 900; }
        .matrix-card p { font-size: 1rem; opacity: 0.7; letter-spacing: 3px; }

        /* 彈窗 */
        #popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 2000; backdrop-filter: blur(20px); }
        #popup-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #000; border: 3px solid #d4af37; padding: 60px; text-align: center; border-radius: 30px; box-shadow: 0 0 120px #d4af37; width: 90%; max-width: 500px; }

 /* 1. 滑鼠自定義樣式 */
    body {
        /* 隱藏原生滑鼠，由下方自定義元素取代 */
        cursor: url('https://cur.cursors-4u.net/arrows/arr-13/arr1235.cur'), auto;
    }

    /* 紅點 */
    .db-cursor-dot {
        width: 8px;
        height: 8px;
        background: #ff0000;
        position: fixed;
        border-radius: 50%;
        pointer-events: none; /* 確保不干擾點擊 */
        z-index: 9999;
        transition: transform 0.1s ease-out;
    }

    /* 紅圈 */
    .db-cursor-outline {
        width: 30px;
        height: 30px;
        border: 2px solid #ff0000;
        position: fixed;
        border-radius: 50%;
        pointer-events: none;
        z-index: 9998;
        transition: transform 0.15s ease-out; /* 緩動效果，讓圈圈跟著跑 */
    }

    /* 2. 原有的頁面樣式鎖定 */
    .db-outer-wrapper {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 15px;
        box-sizing: border-box;
    }

    .db-special-section-final {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        background-color: #ffffff;
        align-items: center;
        justify-content: center;
        font-family: "Microsoft JhengHei", sans-serif;
    }

    .db-framed-box-final {
        padding: 10px;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border: 1px solid #e0e0e0;
        flex: 0 0 450px;
        max-width: 100%;
    }

    .db-framed-box-final img {
        width: 100%;
        height: auto;
        display: block;
    }

    .db-content-card-final {
        flex: 1;
        min-width: 320px;
        max-width: 600px;
    }

    .db-label-final {
        display: inline-block;
        background: #b8976d;
        color: #fff;
        padding: 4px 12px;
        font-size: 0.85rem;
        margin-bottom: 15px;
    }

    .db-title-final {
        font-size: 1.8rem;
        color: #222;
        line-height: 1.4;
        margin: 0 0 20px 0;
        font-weight: bold;
    }

    .db-text-final {
        font-size: 1.05rem;
        color: #444;
        line-height: 1.8;
        margin-bottom: 25px;
    }

    .db-info-card-final {
        background: #2c2c2c;
        padding: 25px;
        border-left: 5px solid #b8976d;
        border-radius: 0 8px 8px 0;
    }

    .db-info-card-final p {
        margin: 12px 0;
        font-size: 1rem;
        color: #ffffff !important;
        line-height: 1.6;
    }

    .db-info-card-final strong {
        color: #e6c192;
        font-weight: bold;
    }

    @media (max-width: 768px) {
        .db-special-section-final { flex-direction: column; text-align: center; }
        .db-info-card-final { text-align: left; }
        .db-framed-box-final { flex: 0 0 100%; }
        /* 手機版隱藏自定義滑鼠 */
        .db-cursor-dot, .db-cursor-outline { display: none; }
    }
 .petal-container {
        position: fixed;
        top: -120px;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 9999;
    }

    .petal {
        position: absolute;
        background-image: url('https://www.leehi.tw/images/petal.png');
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0;
        /* 結合下落、擺動、以及縮放(景深)動畫 */
        animation: petal-fall linear infinite, petal-swing ease-in-out infinite;
    }

    @keyframes petal-fall {
        0% { transform: translateY(0) rotate(0deg); opacity: 0; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
    }

    @keyframes petal-swing {
        0%, 100% { margin-left: -30px; }
        50% { margin-left: 30px; }
    }

    /* --- DBSYSTEM 節奏分配：大小、速度、透明度、延遲 --- */
    
    /* 前景：大葉片、速度快、帶點模糊感 (模擬近鏡頭) */
    .p1 { left: 15%; width: 45px; height: 45px; animation-duration: 8s, 3s; animation-delay: 0s, 0s; filter: blur(1px); opacity: 0.7; }
    .p2 { left: 75%; width: 40px; height: 40px; animation-duration: 10s, 4s; animation-delay: 5s, 1s; filter: blur(0.5px); }

    /* 中景：標準大小、清晰、中速 (主體視覺) */
    .p3 { left: 40%; width: 28px; height: 28px; animation-duration: 14s, 5s; animation-delay: 2s, 0s; }
    .p4 { left: 60%; width: 25px; height: 25px; animation-duration: 16s, 4s; animation-delay: 8s, 2s; }

    /* 背景：微小、慢速、半透明 (增加空間深度) */
    .p5 { left: 5%;  width: 15px; height: 15px; animation-duration: 22s, 6s; animation-delay: 1s, 0s; opacity: 0.5; }
    .p6 { left: 90%; width: 18px; height: 18px; animation-duration: 20s, 7s; animation-delay: 12s, 3s; opacity: 0.6; }
    .p7 { left: 30%; width: 12px; height: 12px; animation-duration: 25s, 8s; animation-delay: 4s, 1s; opacity: 0.4; }