@charset "UTF-8";
/* ============================================================
   上半部：原本的 reset + header + hero 樣式
   下半部：淺色科技藍版本（對應目前設計稿），逐行註解
   ============================================================ */
/* ---------- 原本的全域 reset（保留） ---------- */
a {
  text-decoration: none; /* 取消連結底線，樣式自行控制 */
  color: inherit; /* 連結預設繼承父層文字色 */
  cursor: pointer;
  /* 全域連結 hover 色：先定義好主題藍，日後新增連結不會出現瀏覽器預設藍紫色 */
}
a:hover {
  color: #0A84FF;
}

button {
  background-color: transparent;
  color: inherit;
  border-width: 0;
  padding: 0;
  cursor: pointer;
}

figure {
  margin: 0;
}

ul, ol, dd {
  margin: 0;
  padding: 0;
  list-style: none; /* 清單交由版面樣式控制，不要瀏覽器預設圓點 */
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  font-family: "Noto Serif TC", serif, "Microsoft Jhenghei", 微軟正黑體, Verdana, sans-serif;
}

p {
  margin: 0;
  font-family: "Noto Serif TC", serif, "Microsoft Jhenghei", 微軟正黑體, Verdana, sans-serif;
}

cite {
  font-style: normal;
}

fieldset {
  border-width: 0;
  padding: 0;
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
} /* 寬高含 padding/border，計算直覺 */
html, body {
  font-size: large;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
  font-family: "Noto Serif TC", serif, "Microsoft Jhenghei", 微軟正黑體, Verdana, sans-serif;
}

/* ---------- 原本的 header / hero（保留） ---------- */
#scroll-anchor {
  width: 100%;
  height: 0; /* 高度為 0，完全不影響畫面排版 */
  visibility: hidden;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 1;
  align-items: center;
  padding: 1.5rem;
  transition: background 0.5s ease, padding 0.5s ease;
}
header.is-fixed {
  position: fixed;
  background: rgba(26, 36, 53, 0.72);
  backdrop-filter: blur(20px);
  z-index: 10;
  padding: 0.5rem;
}
header .logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
header .logo img {
  height: 3rem;
}
header nav {
  display: flex;
  width: 1300px;
  gap: 3rem;
  justify-content: flex-start;
}
header nav .button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
header nav .button p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  margin-right: 5px;
}
header nav .CTA {
  margin-left: auto;
}
header nav .CTA span {
  display: flex;
  background: #0A84FF;
  color: #fff;
  padding: 10px 34px;
  border-radius: 20px;
  transition: background 0.3s, color 0.3s, transform 0.2s;
}
header nav .CTA p {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: none;
}

header.other {
  position: fixed;
  background: rgb(26, 36, 53);
  z-index: 10;
  padding: 0.5rem;
}

.innerHtml {
  display: flex;
  position: relative;
  z-index: 0;
}
.innerHtml .vedeo {
  position: relative;
  display: flex;
  width: 100%;
  height: 100vh;
}
.innerHtml .vedeo .shadow {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 10rem;
  width: 100%;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 100%);
}
.innerHtml .vedeo video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.innerHtml .vedeo::after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.innerHtml .vedeo::before {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
}
.innerHtml .vedeo .bannerText {
  position: absolute;
  bottom: calc(15% + 9rem);
  left: 0%;
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.innerHtml .vedeo .bannerText h1 {
  color: white;
  font-size: 3rem;
  font-weight: 500;
  text-shadow: 0 0 30px rgba(0, 80, 180, 0.6), 0 2px 8px rgba(0, 0, 0, 0.5);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 70%);
  padding: 0.5rem 1.5rem;
  border-radius: 30px;
}
.innerHtml .vedeo .CTA {
  position: absolute;
  bottom: 15%;
  left: 0%;
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.innerHtml .vedeo .CTA h4 {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 15px rgba(10, 132, 255, 0.4);
  min-width: 260px;
  padding: 18px 40px;
  border-radius: 50px;
  font-size: 17px;
  letter-spacing: 0.12em;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 600;
  background: #fff;
  border: 2px solid transparent;
  color: #111;
}
.innerHtml .vedeo .CTA h4.right {
  background: #0A84FF;
  color: #fff;
  border: 2px solid transparent;
}

body {
  background-color: #f5f7fa;
  background-image: radial-gradient(700px 520px at 82% 12%, rgba(10, 132, 255, 0.16), transparent 68%), radial-gradient(480px 420px at 8% 55%, rgba(10, 132, 255, 0.1), transparent 65%);
  background-attachment: fixed;
  background-size: cover;
}

.innerHTML.other {
  margin-top: 72px;
  justify-content: center;
  align-items: center;
}
.innerHTML.other .product-box {
  max-width: 1300px;
  margin: 6rem auto 15rem;
  position: relative;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.innerHTML.other .product-box .vrImg {
  position: absolute;
  top: -1rem;
  right: 0;
  z-index: -1;
  width: 17rem;
}
.innerHTML.other .product-box h3 {
  font-family: "Noto Serif TC", serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 2.2rem);
  line-height: 1.3;
  color: #0A84FF;
  margin-bottom: 3rem;
}
.innerHTML.other .product-box h3.blue {
  color: #0A84FF;
  margin-left: 5rem;
  margin-top: 1rem;
  font-size: 2rem;
}
.innerHTML.other .product-box .product-line {
  display: flex;
  width: 100%;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.innerHTML.other .product-box .product-line .feature-card {
  flex: 0.5;
  background-color: #f5f7fa;
  box-shadow: initial;
  position: relative;
  border: 1px solid rgba(166, 177, 189, 0.56);
  padding-top: 3.3rem;
  padding-bottom: 2.5rem;
}
.innerHTML.other .product-box .product-line .feature-card > .img {
  position: absolute;
  left: 12%;
  transform: translateX(-50%);
  top: -2rem;
  background: linear-gradient(145deg, #2D69B7, #2D69B7);
  height: fit-content;
  width: fit-content;
  border-radius: 15px;
  padding: 0.5rem;
  box-shadow: 0 0 16px 4px #DCEBFF, 4px 6px 14px rgba(0, 0, 0, 0.12);
}
.innerHTML.other .product-box .product-line .feature-card > .img img {
  width: 3rem;
  filter: brightness(0) invert(0.93);
}
.innerHTML.other .product-box .product-line .feature-card p {
  font-size: 18px;
  line-height: 1.4;
  color: #46546a;
}
.innerHTML.other .product-box .product-line .feature-card h3 {
  flex-shrink: 0;
  margin-bottom: 0.8rem;
  border-radius: 5px;
  background: rgba(10, 132, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Serif TC", serif;
  font-weight: 700;
  font-size: 28px;
  color: #0966DF;
  padding: 0.5rem 1.8rem;
  align-self: flex-start;
}
.innerHTML.other .product-box .product-line .feature-card .button {
  display: flex;
  gap: 1rem;
  align-self: flex-end;
}
.innerHTML.other .product-box .product-line .feature-card .button h4 {
  white-space: nowrap;
  margin-top: 2rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2D69B7;
  max-width: 260px;
  width: 100%;
  padding: 8px 30px;
  border-radius: 6px;
  font-size: 17px;
  color: #f2f2f2;
  letter-spacing: 0.12em;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 600;
}
.innerHTML.other .product-box .product-line .feature-card .button h4:nth-child(1) {
  color: white;
  background-color: #EB7E2F;
}
.innerHTML.other .product-box .product-line .feature-card > div {
  flex-direction: column;
  justify-content: center;
  display: flex;
  align-items: center;
}
.innerHTML.other .product-box .product-line .feature-card:nth-child(2) {
  margin-left: initial;
  transform: translateY(50px);
}
section.topback {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1rem 0;
  flex-direction: column;
}
section.topback .left {
  padding-top: 4rem;
}
section.topback .left h3 {
  font-family: "Noto Serif TC", serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.3;
  color: var(--ink);
}
section.topback .left h3.blue {
  color: #0A84FF;
  margin-left: 5rem;
  margin-top: 1rem;
  font-size: 2rem;
}
section.topback .left .sec-lead {
  max-width: initial;
  margin-top: 1rem;
}
section.topback .left .sec-lead .bold {
  display: flex;
  color: #734500;
  background-color: #f9dca4;
  width: fit-content;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  margin-top: 0.5rem;
}
section.topback img {
  width: 1100px;
  border-radius: 30px;
  margin: 0 auto;
}
section.topback.appointment h4 {
  font-size: 1.5rem;
  color: #56617a;
}
section.topback.appointment .vrinfo h4 {
  margin-bottom: 0.3rem;
}
section.topback.appointment .vrinfo p {
  margin-bottom: 1rem;
}
section.topback.appointment .appointment-box {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
section.topback.appointment .appointment-box h2 {
  font-size: 1.2rem;
  background: rgba(6, 90, 174, 0.07);
  color: #0A84FF;
  width: fit-content;
  display: inline-flex;
  padding: 0.8rem 1rem;
  border-radius: 5px;
}
section.topback.promotion {
  padding-bottom: 5rem;
}
section.topback.promotion .date {
  display: inline-flex;
  margin-right: 0.3rem;
}
section.topback.promotion .date img {
  height: 1rem;
  width: fit-content;
}
section.topback.promotion .price-tittle {
  font-family: "Noto Serif TC", serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 1.2rem);
  line-height: 1.3;
  color: #4473C5;
  width: fit-content;
  padding: 1rem 8rem;
  border-radius: 15px;
  margin: 4rem auto 1.5rem;
}
section.topback.promotion .promotin-img {
  display: flex;
}
section.topback.promotion .promotin-img .left {
  flex: 0.7;
  padding: initial;
}
section.topback.promotion .promotin-img .left h3 {
  font-size: 1.2rem;
  text-align: center;
  margin-top: 0.5rem;
  font-weight: normal;
}
section.topback.promotion .promotin-img .left img {
  width: 100%;
}
section.topback.promotion .promotin-img .right {
  flex: 0.3;
  display: flex;
  padding: 0 2rem;
  flex-direction: initial;
}
section.topback.promotion .promotin-img .right .vrinfo {
  display: inline-flex;
  gap: 1rem;
  flex-direction: column;
}
section.topback.promotion .promotin-img .right .vrinfo > .img-box {
  border-bottom: 3px solid white;
  padding: 1rem;
  border-radius: 7px;
}
section.topback.promotion .promotin-img .right .vrinfo > .img-box .new {
  color: rgb(172, 22, 22);
}
section.topback.promotion .promotin-img .right .vrinfo > .img-box h4 {
  color: #0a84ff;
  font-weight: 600;
  font-size: 1.3rem;
}
section.topback.promotion .promotin-img .right .vrinfo > .img-box p {
  font-weight: bold;
  color: #3a3a3a;
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1.2rem;
}
section.topback.promotion .promotin-img .right .vrinfo > .img-box p::before {
  content: "　";
  position: absolute;
  left: 0;
  top: 0;
  width: fit-content;
  background-image: url("../image/VRTAG.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

section.promotin {
  padding-top: 5rem;
}
section.promotin.lower {
  background-color: white;
}

section.form-sec {
  max-width: 1300px;
  display: flex;
  margin: 3rem auto;
  flex-direction: column;
}
section.form-sec .stylered {
  color: #b90909;
  margin: 0 3px;
}
section.form-sec h3 {
  font-family: "Noto Serif TC", serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 2.2rem);
  line-height: 1.3;
  color: #0A84FF;
  margin-bottom: 0.5rem;
}
section.form-sec .submit {
  display: flex;
  background-color: #206BAC;
  color: white;
  width: fit-content;
  margin: 3rem auto;
  padding: 0.7rem 3.5rem;
  font-size: 1rem;
  border-radius: 10px;
  letter-spacing: 3px;
}
section.form-sec .form {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 70rem;
  flex-direction: column;
  padding: 3rem 2rem;
  border: 1px solid #e0ebe8;
  margin: 2rem auto 0;
  background-color: white;
  border-radius: 5px;
}
section.form-sec .form .mi {
  margin: 1rem 0;
}
section.form-sec .form .inputs {
  margin-right: 1rem;
  width: 100%;
  display: flex;
  position: relative;
  text-wrap: nowrap;
  align-items: center;
  margin-bottom: 1rem;
  margin-right: 0;
}
section.form-sec .form .inputs p {
  font-size: 1.15rem;
  color: #525252;
  letter-spacing: initial;
  width: 16rem;
}
section.form-sec .form .inputs p.area {
  align-self: flex-start;
}
section.form-sec .form .inputs input[type=text],
section.form-sec .form .inputs textarea {
  background-color: #e0ebe8;
  width: 100%;
  font-size: 1.2rem;
  border-radius: 3px;
  height: 3rem;
  border: 1px solid transparent;
  color: #040e13;
  cursor: pointer;
  padding: 0 1rem;
  margin-left: 1rem;
}
section.form-sec .form .inputs input[type=text]::placeholder,
section.form-sec .form .inputs textarea::placeholder {
  color: rgba(62, 102, 122, 0.6431372549);
  font-size: 1.2rem;
}
section.form-sec .form .inputs input[type=text]:focus,
section.form-sec .form .inputs textarea:focus {
  outline: 2px solid #0189f8;
}
section.form-sec .form .inputs textarea {
  height: 20rem;
  padding: 1rem 1rem;
}
section.form-sec .form .inputs #thingDate {
  width: 100%;
  margin-left: 1rem;
}
section.form-sec .form .inputs input[type=date] {
  cursor: pointer;
  background-color: #e0ebe8;
  width: 100%;
  font-size: 1.2rem;
  border-radius: 3px;
  height: 3rem;
  border: 1px solid transparent;
  color: #040e13;
  cursor: pointer;
  padding: 0 1rem;
  cursor: pointer;
}
section.form-sec .form .inputs select {
  background-color: #e0ebe8;
  border: initial;
  border-radius: 4px;
  width: 100%;
  padding: 0rem 1rem 0rem;
  font-size: 1.2rem;
  height: 3rem;
  margin-left: 1rem;
  cursor: pointer;
}
section.form-sec .form .inputs select option {
  color: #040e13;
}
section.form-sec .form .centerInfo {
  font-size: 1.2rem;
  margin: 0rem 0 2rem;
  color: white;
  background-color: #19b6a9;
  padding: 1rem;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
section.form-sec .form .centerInfo .material-symbols-outlined {
  font-size: 2rem;
}
section.form-sec .form .tittle {
  margin-top: 3rem;
}
section.form-sec .form .tittle p {
  margin-left: 1.5rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #525252;
  letter-spacing: initial;
}
section.form-sec .form .allow {
  border-radius: 10px;
  padding: 1rem 0.5rem;
  margin: 1rem 0;
  height: 10rem;
  overflow-x: auto;
  background-color: rgb(226, 226, 226);
}
section.form-sec .form .check {
  display: flex;
  margin: 1rem 0 2rem;
  justify-content: center;
  padding: 0.8rem 0;
  width: 100%;
  background-color: rgba(25, 182, 169, 0.0549019608);
}

/* ============================================================
   ↓↓↓ 以下為「首頁下半部」淺色科技藍版本 ↓↓↓
   色票：--accent 科技藍 / --page、--tint 冷灰 / --ink 深藍黑
   ============================================================ */
/* .lower：下半部最外層。以 CSS 變數集中管理配色，換色只需改這四行 */
.lower {
  --accent: #0A84FF; /* 主題強調色：科技藍（按鈕、連結、光暈、圖示底） */
  --page: #f5f7fa; /* 頁面底色：冷灰，淺底高可讀 */
  --tint: #eaeff5; /* 次級底色：深一階冷灰，區塊區隔用 */
  --ink: #0f1a2e; /* 標題色：帶藍的深色，呼應科技感、比純黑柔和 */
  position: relative;
  background: var(--page);
  color: #56617a; /* 內文預設：中灰藍 */
  font-family: "Noto Sans TC", sans-serif; /* 內文無襯線，標題另指定襯線 */
  overflow: hidden; /* 光暈/微粒溢出裁掉，避免水平捲軸 */
}

.container {
  position: relative;
  z-index: 1;
  max-width: 1200px; /* 內容最大寬 */
  margin: 0 auto; /* 水平置中 */
  padding: 0 32px; /* 左右安全邊距 */
}

/* ---------- 共用：小標 eyebrow（短線＋寬字距英文標籤） ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em; /* 寬字距做出科技標籤感 */
  color: var(--accent);
  margin-bottom: 22px;
  /* 裝飾短線 */
}
.eyebrow .line {
  width: 30px;
  height: 2px;
  background: var(--accent);
}

/* ---------- 共用：區塊標題 ---------- */
.sec-title {
  font-family: "Noto Serif TC", serif; /* 標題襯線，與 hero 同調 */
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 50px); /* 隨視窗縮放：手機 28px ↔ 桌機 50px */
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 22px;
  text-wrap: pretty; /* 避免斷行孤字 */
}
.sec-title em {
  font-style: normal; /* 取消 em 斜體 */
  color: var(--accent);
  /* 永久動畫「強調字流光」：亮光每 4.5 秒掃過文字一次 */
  background-image: linear-gradient(110deg, var(--accent) 42%, #8ec8ff 50%, var(--accent) 58%);
  background-size: 200% 100%;
  -webkit-background-clip: text; /* 漸層剪成文字形狀 */
  background-clip: text;
  -webkit-text-fill-color: transparent; /* 文字本身透明、露出漸層 */
  animation: shimmer 4.5s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
} /* 背景左移 = 光帶掃過 */
.sec-lead {
  max-width: 420px; /* 限制行寬，閱讀舒適 */
  font-size: 17px;
  line-height: 1.95;
  color: #56617a;
  margin-bottom: 30px;
}

/* ---------- 進場動畫（一次性；文字原本就在 HTML 中，SEO 不受影響） ---------- */
/* [data-reveal]：進入視窗前隱藏下移，JS 加 .is-in 後淡入上移 */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* [data-chars] 標題逐字浮現：JS 把文字拆成 span.ch、每字給 --i 序號當延遲 */
[data-chars] .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
}
[data-chars].is-in .ch {
  animation: chIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 45ms); /* 一字接一字，每字差 45ms */
}

@keyframes chIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 捲動進度條：固定於頁面頂部的細條，寬度由 JS 依捲動百分比更新 */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent, #0A84FF);
  z-index: 60;
  transition: width 0.1s linear; /* 平滑跟隨，不跳動 */
  box-shadow: 0 0 8px rgba(10, 132, 255, 0.8); /* 發光，強化科技感 */
}

/* ---------- 永久動畫（持續運作、非一次性） ---------- */
/* 光暈呼吸：疊在 fixed 漸層上緩慢明暗；各區同步呼吸，交界不破 */
@keyframes glowBreathe {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
}
.glow-pulse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: glowBreathe 9s ease-in-out infinite;
}

/* 編號圖示錯相漂浮：三張卡以不同 animation-delay 上下輕漂 */
@keyframes iconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.float-icon {
  animation: iconFloat 5.5s ease-in-out infinite;
}

/* Ken Burns：背景照片 24 秒一輪緩慢縮放，畫面永遠微動 */
@keyframes kenburns {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}
.kenburns {
  animation: kenburns 24s ease-in-out infinite;
  will-change: transform;
}

/* 勾選點輪流發光：三個藍勾依序脈衝，像系統燈號 */
@keyframes dotGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 transparent;
  }
  30% {
    box-shadow: 0 0 0 6px rgba(10, 132, 255, 0.25);
  }
  60% {
    box-shadow: 0 0 0 0 transparent;
  }
}
.pulse-dot {
  animation: dotGlow 3.6s ease-in-out infinite;
}

/* 漂浮微粒：淡藍點從區塊底部上飄；--po 控透明度、--px 控橫向漂移 */
@keyframes rise {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  12% {
    opacity: var(--po, 0.5);
  } /* 出場先淡入 */
  85% {
    opacity: calc(var(--po, 0.5) * 0.7);
  } /* 尾段開始變淡 */
  100% {
    transform: translateY(-720px) translateX(var(--px, 0px));
    opacity: 0;
  }
}
.particle {
  position: absolute;
  bottom: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(10, 132, 255, 0.45);
  animation: rise linear infinite;
  pointer-events: none; /* 純裝飾，不擋點擊 */
  /* 近景：大、濃、微模糊 */
  /* 遠景：小、淡 */
}
.particle--near {
  width: 9px;
  height: 9px;
  --po: .55;
  filter: blur(1px);
}
.particle--far {
  width: 3px;
  height: 3px;
  --po: .35;
}

/* CTA 按鈕光澤掃過（hover 觸發）：一道斜向亮光滑過表面 */
.shine {
  position: relative;
  overflow: hidden;
  /* hover 時光帶從左掃到右 */
}
.shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg); /* 斜切光帶 */
  transition: left 0.7s ease;
}
.shine:hover::after {
  left: 120%;
}

/* 合作夥伴跑馬燈：HTML 放兩份相同 logo 列，位移 -50% 後無縫接回起點 */
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee 28s linear infinite;
}

/* ---------- 區塊一：特色（左 sticky 標題＋右錯落卡片） ---------- */
.features {
  position: relative;
  z-index: 1;
  padding: 120px 0 0;
  /* 背景光暈用 background-attachment:fixed：捲動時漸層固定於視窗形成視差，
     且與下方合作夥伴區共用同一張漸層 → 交界完全連續、無邊界 */
  background-image: radial-gradient(700px 520px at 82% 12%, rgba(10, 132, 255, 0.16), transparent 68%), radial-gradient(480px 420px at 8% 55%, rgba(10, 132, 255, 0.1), transparent 65%);
  background-attachment: fixed;
  background-size: cover;
}

.features-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 5fr 7fr; /* 左窄右寬的不對稱雙欄 */
  gap: 64px;
  align-items: start; /* 讓左欄能 sticky */
}

.features-head {
  position: sticky;
  top: 48px; /* 捲動時標題停留在視窗內 */
}
.features-head .link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--accent);
  font-size: 15.5px;
  letter-spacing: 0.04em;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-card {
  display: flex;
  gap: 24px;
  padding: 32px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(15, 26, 46, 0.07);
  box-shadow: 0 20px 50px -32px rgba(15, 26, 46, 0.4);
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; /* hover 快速反應 */
  /* 輕微上浮（取代 3D 傾斜，更俐落） */
  /* 三張卡階梯狀錯落，打破死板 */
  /* hover 圖示微放大旋轉 */
  /* 三張卡的漂浮動畫錯相：延遲不同 → 不會同步上下，畫面更自然 */
}
.feature-card:hover {
  transform: translateY(-6px);
}
.feature-card:nth-child(2) {
  margin-left: 36px;
}
.feature-card:nth-child(3) {
  margin-left: 72px;
}
.feature-card .feature-num {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(10, 132, 255, 0.12); /* 主題色 12% 淡底 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Serif TC", serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--accent);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.feature-card:hover .feature-num {
  transform: scale(1.1) rotate(-6deg);
}
.feature-card:nth-child(2) .float-icon {
  animation-delay: -1.8s;
}
.feature-card:nth-child(3) .float-icon {
  animation-delay: -3.6s;
}
.feature-card h3 {
  font-family: "Noto Serif TC", serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}
.feature-card p {
  font-size: 15px;
  line-height: 1.85;
  color: #5a6577;
}

/* ---------- 區塊二：合作夥伴（跑馬燈） ---------- */
.partners {
  position: relative;
  z-index: 1;
  padding: 50px 0 90px;
  /* 與特色區同一張 fixed 漸層 → 光暈視差連續不中斷 */
  background-image: radial-gradient(700px 520px at 82% 12%, rgba(10, 132, 255, 0.16), transparent 68%), radial-gradient(480px 420px at 8% 55%, rgba(10, 132, 255, 0.1), transparent 65%);
  background-attachment: fixed;
  background-size: cover;
}

.partners-cap {
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.26em;
  color: #8a93a6;
  margin-bottom: 34px;
  padding: 0 32px;
}

.marquee-mask {
  overflow: hidden;
  /* 左右遮罩淡出：logo 於畫面邊緣自然消失而非硬切 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.partner-logo {
  width: 170px;
  height: 72px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15, 26, 46, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace; /* 等寬字提示這是待替換的佔位框 */
  font-size: 11px;
  color: #aab2c0;
  flex-shrink: 0; /* 跑馬燈內不允許壓縮變形 */
}

.partner-logo img {
  max-width: 90%;
  max-height: 85%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ---------- 區塊三：滿版沉浸體驗（照片疊字） ---------- */
.immersive {
  position: relative;
  z-index: 1;
  min-height: 580px;
  display: flex;
  align-items: center;
  overflow: hidden; /* 裁掉視差位移後超出的圖 */
}

.immersive-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 中層（JS 視差位移）：圖片四周各放大 40px，位移 ±25px 也不會露出邊界 */
.immersive-bg-inner {
  position: absolute;
  inset: -40px;
  /* 內層（CSS Ken Burns 縮放）：與外層 translate 分屬不同元素，transform 不互相覆蓋 */
}
.immersive-bg-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.immersive-overlay {
  position: absolute;
  inset: 0;
  /* 左深右透明的漸層壓黑：確保左側白色文字對比充足 */
  background: linear-gradient(100deg, rgba(8, 13, 24, 0.92) 0%, rgba(8, 13, 24, 0.6) 42%, rgba(8, 13, 24, 0.08) 78%, transparent 100%);
}

/* 背景光暈漂移＋呼吸：讓深色照片區也有持續微動 */
@keyframes glowDrift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translate(-40px, 30px) scale(1.15);
    opacity: 1;
  }
}
.immersive-glow {
  position: absolute;
  top: 10%;
  right: 8%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle at center, rgba(127, 192, 255, 0.28), transparent 65%);
  filter: blur(24px);
  pointer-events: none;
  animation: glowDrift 14s ease-in-out infinite;
  animation-delay: -3s; /* 負延遲 = 載入即在動畫中段 */
}

.immersive-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 90px 32px;
  width: 100%;
}

.immersive-content {
  max-width: 540px;
  color: #fff;
  /* 深底上用亮一階的藍 */
}
.immersive-content .eyebrow {
  color: #7fc0ff;
}
.immersive-content .sec-title {
  color: #fff;
}

.immersive-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* 三個勾勾的脈衝錯相：依序發光而非同時 */
}
.immersive-list .row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.immersive-list .check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
}
.immersive-list .row:nth-child(2) .check {
  animation-delay: 1.2s;
}
.immersive-list .row:nth-child(3) .check {
  animation-delay: 2.4s;
}
.immersive-list .text {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- 區塊四：FAQ（左 sticky 標題＋右手風琴） ---------- */
.faq {
  position: relative;
  z-index: 1;
  padding: 110px 0;
  /* fixed 漸層光暈：與下方聯絡區共用同一張 → 視差連續、交界無縫 */
  background-image: radial-gradient(620px 420px at 68% 72%, rgba(10, 132, 255, 0.14), transparent 70%);
  background-attachment: fixed;
  background-size: cover;
}

.faq-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 4fr 7fr; /* 左標題右問答 */
  gap: 56px;
  align-items: start;
}
.faq-inner .faqImg {
  position: absolute;
  left: 0;
  bottom: -5rem;
  width: 20rem;
}

.faq-head {
  position: sticky;
  top: 48px;
}
.faq-head .sec-title {
  font-size: clamp(28px, 3.4vw, 44px);
  margin-bottom: 18px;
}
.faq-head p {
  font-size: 15px;
  line-height: 1.85;
  color: #5a6577;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* 階梯進場：容器進入視窗（.is-in）後，五張卡依 nth-child 延遲依序浮現 */
}
.faq-list .faq-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.faq-list.is-in .faq-item {
  opacity: 1;
  transform: none;
}
.faq-list.is-in .faq-item:nth-child(1) {
  transition-delay: 0.05s;
}
.faq-list.is-in .faq-item:nth-child(2) {
  transition-delay: 0.15s;
}
.faq-list.is-in .faq-item:nth-child(3) {
  transition-delay: 0.25s;
}
.faq-list.is-in .faq-item:nth-child(4) {
  transition-delay: 0.35s;
}
.faq-list.is-in .faq-item:nth-child(5) {
  transition-delay: 0.45s;
}

.faq-item {
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 26, 46, 0.08);
  box-shadow: 0 14px 36px -30px rgba(15, 26, 46, 0.4);
  padding: 24px 26px;
  cursor: pointer; /* 整張卡可點擊切換 */
  /* 答案容器：預設收合（高 0、透明），details[open] 時撐開；max-height 過渡做展開動畫 */
}
.faq-item .faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 問題左、＋號右 */
  gap: 16px;
  font-family: "Noto Serif TC", serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
}
.faq-item .faq-q::-webkit-details-marker {
  display: none;
}
.faq-item .faq-icon {
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 300;
  color: var(--accent);
  transition: transform 0.3s; /* ＋ 轉 ×（45°）的旋轉過渡 */
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}
.faq-item .faq-a {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.55s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.4s ease, margin-top 0.4s ease;
}
.faq-item .faq-a p {
  font-size: 15px;
  line-height: 1.85;
  color: #5a6577;
}
.faq-item[open] .faq-a {
  max-height: 260px;
  opacity: 1;
  margin-top: 16px;
}

/* ---------- 區塊五：聯絡與地圖 ---------- */
.contact {
  position: relative;
  z-index: 1;
  padding: 100px 0;
  /* 與 FAQ 完全相同的 fixed 漸層：藍色光暈視差一路連續到地圖區，不會中斷 */
  background-image: radial-gradient(620px 420px at 68% 72%, rgba(10, 132, 255, 0.14), transparent 70%);
  background-attachment: fixed;
  background-size: cover;
}
.contact.lower {
  background-image: initial;
  background: transparent;
}

.contact-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}

.contact-panel {
  border-radius: 28px;
  overflow: hidden; /* 地圖 iframe 切齊圓角 */
  background: #fff;
  border: 1px solid rgba(15, 26, 46, 0.08);
  box-shadow: 0 24px 60px -36px rgba(15, 26, 46, 0.4);
  display: grid;
  grid-template-columns: 5fr 7fr; /* 左資訊右地圖 */
  align-items: stretch; /* 兩欄等高，地圖填滿 */
}

.contact-info {
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-info .sec-title {
  font-size: clamp(26px, 3vw, 36px);
  margin-bottom: 0;
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* 電話/信箱連結加粗，示意可點 */
}
.contact-detail .row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.contact-detail .icon {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  color: var(--accent);
  font-size: 17px;
}
.contact-detail .label {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #8a93a6;
  margin-bottom: 4px;
}
.contact-detail .value {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink);
}
.contact-detail a.value {
  font-weight: 600;
}

.contact-btn {
  margin-top: auto; /* 按鈕壓到卡片底部 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 30px;
  border-radius: 50px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  box-shadow: 0 14px 34px -14px rgba(10, 132, 255, 0.7);
  transition: 0.3s;
  /* 只提亮、不位移（依你的要求） */
  /* 圖示反白配實心藍底 */
}
.contact-btn:hover {
  filter: brightness(1.08);
  color: #fff;
}
.contact-btn img {
  width: 24px;
  height: 24px;
}

.contact-map {
  min-height: 360px;
  height: 100%; /* 與左欄等高，避免破圖 */
  position: relative;
  background: var(--tint); /* 地圖載入前的底色 */
}
.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- 頁尾 ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  background: #0c1220; /* 深色收尾，與 hero 前後呼應 */
  padding: 70px 0 36px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr; /* 品牌欄較寬 */
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand img {
  height: 44px;
  margin-bottom: 22px;
}
.footer-brand p {
  font-size: 14.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.55);
  max-width: 300px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  /* 取消 address 預設斜體 */
}
.footer-col h2 {
  font-family: "Noto Serif TC", serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.9);
}
.footer-col a {
  transition: 0.2s;
}
.footer-col a:hover {
  color: var(--accent);
}
.footer-col address {
  font-style: normal;
  line-height: 1.7;
}

.copyright {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.copyright p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.7;
}
.copyright p:last-child {
  color: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   響應式（RWD）：窄螢幕降為單欄
   ============================================================ */
@media (max-width: 980px) {
  .features-inner, .faq-inner, .contact-panel {
    grid-template-columns: 1fr;
  } /* 雙欄 → 單欄 */
  .features-head, .faq-head {
    position: static;
  } /* 單欄時取消 sticky */
  .feature-card { /* 取消錯落位移 */ }
  .feature-card:nth-child(2), .feature-card:nth-child(3) {
    margin-left: 0;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .contact-map {
    min-height: 320px;
  }
  .faq-inner .faqImg {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(20rem, 70vw);
    max-width: 100%;
    height: auto;
    display: block;
    justify-self: center;
    margin-top: 20px;
  }
}
@media (max-width: 640px) {
  .container, .features-inner, .faq-inner, .contact-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .contact-info {
    padding: 36px 28px;
  }
}

/*# sourceMappingURL=main.css.map */

/* 合作夥伴 LOGO 無縫循環：兩組等長內容首尾接續 */
.marquee-track {
  gap: 0;
  animation: marquee var(--marquee-duration, 28s) linear infinite;
  will-change: transform;
}
.marquee-group {
  display: flex;
  gap: 16px;
  padding-right: 16px;
  flex: none;
  width: max-content;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* 合作夥伴：每次只移動一組完整七張的實際寬度，避免 -50% 的接縫問題 */
@keyframes partners-cycle7 {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--marquee-shift, 1302px))); }
}
.marquee-track {
  animation-name: partners-cycle7;
}