/* 宣告層級順序：由基礎到特殊 */
@layer reset, base, components, layout, sections1, sections2, sections3, sections4, sections5, sections6, sections7, sections8, sections9, sections10, survey, utils;

/* ========== Reset ========== */
@layer reset {
  * {
    box-sizing: border-box;
  }
  html {
    overflow-x: hidden;
    width: 100%;
    scroll-behavior: smooth;
  }
  body {
    overflow-x: hidden;
    margin: 0;
    width: 100%;
    max-width: 100vw;
  }
}

/* ========== Base（變數與全域文字設定）========== */
@layer base {
  :root {
    /* 字型 */
    --font-title: Roboto, "Noto Sans TC", sans-serif;
    --font-body: Roboto, "Microsoft JhengHei", "微軟正黑體", sans-serif;
    --font-section5-number: Roboto, sans-serif;
    /* 字級 */
    --fs-title-xl: clamp(33px, 4vw + 10px, 48px);
    --fs-title-lg: clamp(18px, 2.2vw + 8px, 20px);
    --fs-title-md: clamp(6.5vw, 1.5vw + 6px, 30px);
    --fs-subtitle: clamp(16px, 0.85vw + 15px, 32px);
    --fs-body: clamp(18px, 0.85vw + 5px, 24px);
    --fs-body-sm: clamp(15px, 0.75vw + 5px, 28px);
    --fs-caption: clamp(14px, 0.8vw + 4px, 20px);
    --fs-note: clamp(12px, 0.5vw + 3px, 12px);
    --data-desc: clamp(18px, 1.5vw + 6px, 22px);
    --survey_desc: clamp(14px, 1.85vw + 5px, 28px);
    --product-intro-desc: clamp(14px, 1.24vw + 5px, 16px);
    --section9_feature-desc: clamp(15px, 0.55vw + 5px, 15px);
    /* 行高 */
    --lh-tight: 1;
    --lh-body: 1.6;
    --lh-loose: 1.7;
    --lh-text: 1.8;
    /* 字重 */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    /* 副標題預設變數 */
    --subtitle-font-size: var(--fs-subtitle);
    --subtitle-color: #051D7C;
    --subtitle-margin: 8px 0 0;
    --subtitle-line-height: var(--lh-body);
    --subtitle-max-width: none;
    --subtitle-font-weight: var(--fw-bold);
  }
  body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #2b2b2b;
    background-color: #EFF3FA;
  }
}

/* ========== Utils（工具類）========== */
@layer utils {
  .img-full {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .d-none { display: none !important; }
  .d-block { display: block !important; }
  @media (min-width: 601px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
  }
  @media (min-width: 769px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
  }
  @media (min-width: 821px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
  }
  @media (min-width: 1025px) {
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
  }
}

/* ========== Layout（全域佈局）========== */
@layer layout {
  .container {
    width: 80%;
    margin: 0 auto;
  }
  .inner {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }
  .section2 .inner,
  .section3 .inner {
    max-width: 100%;
  }
  main {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  .kv {
    display: block;
    width: 100%;
    line-height: 0;
    position: relative;
  }
  .kv_img {
    display: block;
    width: 100%;
    height: auto;
    line-height: 0;
  }
  .kv,.section1 {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ========== Components（通用組件：標題、副標、按鈕、彈窗等）========== */
@layer components {
  .title,
  .subtitle,
  .tag,
  .card-name,
  h1, h2, h3, h4 {
    font-family: var(--font-title);
  }
  .subtitle {
    padding: 0.5em 2%;
    font-size: var(--fs-subtitle);
    color: var(--subtitle-color);
    margin: var(--subtitle-margin);
    line-height: var(--subtitle-line-height);
    max-width: var(--subtitle-max-width);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========== Sections（各區塊樣式）========== */
@layer sections1 {
/* ========== Section1：圖層結構（HTML 不變） ========== */
/* 圖層 1：區塊外層／背景 */
.section1 {
  overflow-y: hidden;
  background: #EFF3FA url("../images/section1-bg-01.jpg") top/cover no-repeat;
  padding: 5% 20px 50px;
  background-position-y: -50px;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

.section1 .inner {
  max-width: 1440px;
  padding-top: 25px;
}

/* 02：標題層 */
.section1 .title-wrap {
  text-align: center;
  margin-bottom: 26px;
}

/* 03：內容容器與排列 */
.section1_content {
  font-family: var(--font-title);
  margin-bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.section1_wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.section1_wrap + .section1_wrap {
  margin-top: 40px;
}

/* 04：媒體層（六角形與圖片） */
.section1_media {
  position: relative;
  width: 190px;
  min-height: 130px;
  flex-shrink: 0;
}

.section1_hex--a {
  width: 190px;
  height: 40px;
}

.section1_hex--b {
  position: absolute;
  left: 0;
  top: 0;
  width: 190px;
  height: 210px;
  z-index: 2;
}

.section1_hex .section1_img {
  width: 90%;
  height: auto;
  display: block;
  object-fit: cover;
}

.section1_hex .hex1 {
  position: absolute;
  top: 0;
  left: -45%;
  transform: translateX(5%);
  width: 85%;
}

.section1_hex .hex2 {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(3%);
  top: -15%;
  width: 145%;
}

/* 05：文字層 */
.section1_text {
  position: relative;
  margin-left: -7%;
  margin-top: 2%;
  flex: 1;
  align-self: flex-start;
  background: #ffffff1f;
  border: 3px solid rgba(255, 255, 255, 0.356);
  border-radius: 18px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 15px;
  padding-right: 15px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
}

.section1_text--a {
  top: 0;
  max-width: 45%;
}

.section1_text--b {
  padding-left: 25px;
  margin-left: 13%;
  top: 0;
  padding-top: 16px;
  padding-bottom: 16px;
  max-width: 50%;
  z-index: -1;
}

.section1_paragraph {
  margin: 0;
  font-size: var(--fs-body);
  color: #2e2e2e;
  font-weight: 500;
  line-height: 1.6;
}

.section1_text--b .section1_paragraph {
  line-height: 1.9;
  margin-top: 0;
  margin-bottom: 0;
}

.section1_paragraph--small {
  font-size: var(--fs-caption);
  color: #3b3b3b;
}

/* 06：頁腳層 */
.section1_footer {
  text-align: center;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-text);
  color: #2b2b2b;
  font-weight: bold;
  width: 95%;
  margin: 10% auto 0;
}

.section1_footer p {
  margin: 0 0 8px;
}

.section1_footer span {
  color: #0381C6;
  font-weight: var(--fw-bold);
}

/* Section1 RWD：平板（821px - 1240px），圖層對應覆寫 */
@media (min-width: 821px) and (max-width: 1240px) {
  /* 02：標題層 */
  .section1 .title-wrap {
    margin-bottom: 24px;
  }

  /* 03：內容容器與排列 */
  .section1_content {
    margin-bottom: 28px;
    gap: 0;
  }

  .section1_wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 0 15%;
  }

  .section1_wrap + .section1_wrap {
    margin-top: 28px;
  }

  /* 04：媒體層 */
  .section1_media {
    width: 140px;
    min-width: 140px;
    min-height: 140px;
    flex-shrink: 0;
  }

  .section1_hex--a {
    width: 140px;
    height: 162px;
    overflow: hidden;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }

  .section1_hex--b {
    position: relative;
    left: auto;
    top: auto;
    width: 140px;
    height: 162px;
    z-index: 0;
    overflow: hidden;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }

  .section1_hex .section1_img,
  .section1_hex .hex1,
  .section1_hex .hex2 {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* 05：文字層 */
  .section1_text {
    flex: 1;
    min-width: 0;
    margin-left: 0;
    margin-top: 0;
    top: auto;
    padding: 14px 18px;
    background: rgb(255 255 255 / 38%);
    border: 1px solid rgba(255, 255, 255, 0.97);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  .section1_text--a {
    max-width: none;
  }

  .section1_text--b {
    margin-left: 0;
    padding-left: 18px;
    padding-top: 14px;
    padding-bottom: 14px;
    max-width: none;
  }

  .section1_paragraph {
    font-size: var(--fs-body);
    line-height: 1.65;
  }

  .section1 .title-wrap .title--section {
    padding: 8px 50px;
    font-size: clamp(24px, 3.5vw + 6px, 40px);
  }

  /* 06：頁腳層 */
  .section1_footer {
    /* font-size: var(--fs-body); */
    line-height: 1.8;
    padding: 0 20px;
  }

  .section1_footer p {
    margin: 0 0 12px;
    line-height: 1.8;
  }
}
@media screen and (min-width: 1480px) {
  .section1_text--b {
    margin-left: 13%;
  }
}

/* 螢幕 1240~1620px：縮短文字框右側多餘空間，圖片與文字框位置不變 */
@media (min-width: 1240px) and (max-width: 1620px) {
  .section1_text--a {
    max-width: 560px;
  }
  .section1_text--b {
    max-width: 640px;
  }
}

/* Section1 RWD：手機（≤820px），圖層對應覆寫 */
@media (max-width: 820px) {
  /* 01：區塊外層／背景 */
  .section1 {
    padding: 5px 10px 40px;
    background-color: #EFF3FA;
    background-image: url(../images/common/left_bg.png);
    background-position: left center, right top;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto;
  }

  /* 02：標題層 */
  .section1 .title-wrap {
    margin-bottom: 32px;
  }

  /* 03：內容容器與排列 */
  .section1_content {
    margin-bottom: 32px;
    gap: 24px;
  }

  .section1_wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    text-align: left;
  }

  .section1_wrap + .section1_wrap {
    margin-top: 24px;
  }

  /* 04：媒體層 */
  .section1_media {
    flex-shrink: 0;
    width: 140px;
    min-width: 140px;
    min-height: 140px;
    margin-bottom: 0;
    margin-left: 0;
  }

  .section1_hex--a,
  .section1_hex--b {
    position: relative;
    left: auto;
    top: auto;
    width: 140px;
    height: 162px;
    flex-shrink: 0;
    overflow: hidden;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }

  .section1_hex .section1_img,
  .section1_hex .hex1,
  .section1_hex .hex2 {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .section1_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 05：文字層 */
  .section1_text {
    flex: 1;
    min-width: 0;
    margin-left: 0;
    margin-top: 0;
    padding: 14px 16px;
    max-width: none;
    background: linear-gradient(127deg, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 78%) 100%);
    border: 1px solid rgb(242 250 255 / 96%);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgb(139 171 178 / 12%);
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  .section1_text--a {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .section1_text--b {
    padding-left: 16px;
    margin-left: 0;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .section1_paragraph {
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
    color: #2b2b2b;
    margin: 0;
    text-align: left;
  }

  .section1_paragraph br {
    display: none;
  }

  .section1_text--b .section1_paragraph {
    line-height: var(--lh-loose);
  }

  /* 06：頁腳層 */
  .section1_footer {
    font-size: var(--fs-body);
    line-height: 1.8;
    margin: 8% auto;
    padding: 0;
    text-align: left;
  }

  .section1_footer p {
    margin: 0 0 16px;
    font-size: var(--fs-body);
    line-height: 1.8;
    font-size: 1.45rem;
  }

  .section1_footer span {
    color: #0381C6;
    font-weight: var(--fw-bold);
  }
}

/* Section1 RWD：小手機（≤480px）圖上文下，圖層 3～5 覆寫 */
@media (max-width: 480px) {
  /* 03：內容容器與排列 */
  .section1_wrap {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    text-align: center;
  }

  .section1_wrap + .section1_wrap {
    margin-top: 24px;
  }

  /* 04：媒體層 */
  .section1_media {
    margin-left: 0;
  }

  /* 05：文字層 */
  .section1_text {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  .section1_paragraph {
    text-align: center;
  }

  .section1_text--b .section1_paragraph {
    text-align: center;
  }
}

} /* @layer sections1 */

/* ---------- 通用標題組件（標題框、標題樣式）---------- */
@layer components {
/* ========== 通用標題樣式 ========== */
/* 
  組件說明：
  1. 無標籤標題（簡約款）：.title-wrap > .title-frame > .title--section
  2. 帶標籤標題：.title-wrap > .title-inner > (.title-tag + .title-frame + .title-icon)
  
  手機版樣式已自動套用，包含虛線邊框和背景圖案
*/

/* 白線框：獨立 class，用偽元素在最後方畫空心白框（右下方略偏移） */
.title-frame {
  display: inline-block;
  position: relative;
  z-index: 0;
  overflow: visible;
}

.title-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: -3px;
  bottom: 9px;
  border: 2px solid #ffffff;
  border-radius: 14px;
  transform: translate(4px, 4px);
  z-index: 0;
  pointer-events: none;
  box-sizing: border-box;
}

.title--section {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 8px 100px;
  border: 2px solid #64c4df;
  border-radius: 14px;
  font-size: var(--fs-title-xl);
  font-weight: var(--fw-bold);
  color: #2aa3cf;
  background-color: #eff3fa;
  letter-spacing: 1px;
  margin: 0 0 12px;
}

.title--section::before,
.title--section::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 54px;
  height: 20px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: contain;
}

.title--section::before {
  left: -9%;
  top: 110%;
  width: 270px;
  height: 45px;
  background-image: url("../images/common/title-left-1.png");
}

.title--section::after {
  right: -38px;
  top: 1px;
  height: 35px;
  width: 100px;
  background-image: url("../images/common/title-right-1.png");
}

.title--card {
  font-size: var(--fs-title-lg);
  font-weight: var(--fw-bold);
  margin: 0 0 24px;
  text-align: center;
  background: linear-gradient(180deg, #56CBF5 0%, #087AB0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.product_card .title--card {
  font-size: var(--fs-subtitle);
  background: linear-gradient(180deg, #56CBF5 0%, #087AB0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}


.title--pill {
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-bold);
  color: #fff;
  background: #1a3a52;
  margin: 0 0 16px;
  padding: 10px 20px;
  border-radius: 8px;
  display: inline-block;
}

.card-name {
  font-size: var(--fs-body);
  color: #1a3a52;
  font-weight: var(--fw-semibold);
}

} /* @layer components：通用標題組件 */

@layer sections2 {
/* ========== Section2：別讓舊工具、5 場景輪播、預設圓點 ========== */
/* Section2～Section3 右側曲線背景 */
.section2-3-wrap {
  position: relative;
  background-image: url("../images/curve_bg.png");
  background-position: right 55%;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

@media (max-width: 768px) {
  .section2-3-wrap {
    background-position: 800% 55%;
  }
}

.section2 {
  --subtitle-margin: 0;
  padding: 48px 0 56px;
}


.title-wrap {
  text-align: center;
  width: 100%;
  max-width: 100%;
}

.section2 .title-wrap {
  margin-bottom: 32px;
}


.section2_content {
  overflow: visible;
}

/* Swiper 容器：overflow visible，讓兩側卡片可部分露出 */
.section2-swiper.swiper {
  overflow: visible;
  position: relative;
}

/* 每個 slide 寬度：slidesPerView: 'auto' 時由 CSS 決定；行動端卡片更大，桌機約露出 2.5 張且單卡比例更大 */
.section2_slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .section2_slide {
    width: calc((100% - 40px) / 2.2);
    max-width: 860px;
  }
}

.section2_link {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.section2_scene {
  width: 100%;
}

.section2_scene-media {
  transition: filter 0.3s ease;
  overflow: hidden;
}

.section2_scene-media:hover {
  filter: brightness(1.0) saturate(1.3);
}

.section2_scene-media img {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.section2_scene-media:hover img {
  filter: brightness(1.0) saturate(1.3);
  transform: scale(1.02);
}

.section2_pagination {
  margin-top: 28px;
  position: relative;
  text-align: center;
}

.section2_pagination .swiper-pagination-bullet {
  background: #94DCF7;
  opacity: 0.8;
  width: 12px;
  height: 12px;
}

.section2_pagination .swiper-pagination-bullet-active {
  background: #0381C6;
  opacity: 1;
  border-color: #64c4df;
}

} /* @layer sections2 */

/* Section2 輪播分頁：覆寫 Swiper 預設（未包入 layer，優先於第三方） */
.section2_content .swiper-pagination.section2_pagination {
  margin-top: 28px;
  position: relative;
  bottom: auto;
  left: auto;
  width: auto;
  text-align: center;
}
.section2_content .section2_pagination .swiper-pagination-bullet {
  background: #94DCF7;
  opacity: 0.8;
  width: 12px;
  height: 12px;
}
.section2_content .section2_pagination .swiper-pagination-bullet-active {
  background: #0381C6;
  opacity: 1;
  border-color: #64c4df;
}

/* ---------- 彈窗組件（Section2 影片彈窗）---------- */
@layer components {
.section2_modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.section2_modal[aria-hidden="false"] {
  display: flex;
  opacity: 1;
}

.section2_modal_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.section2_modal_content {
  position: relative;
  width: 65%;
  max-width: 1200px;
  padding: 0 20px 20px;
  background: #ffffff;
  z-index: 1;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.section2_modal_header {
  position: relative;
  padding: 24px 60px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

/* 影片彈窗：關閉鈕僅覆寫位置*/
.section2_modal_header .modal-close {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.section2_modal_header .modal-close:hover {
  transform: translateY(-50%) rotate(90deg) scale(1.1);
}
.section2_modal_header .modal-close:active {
  transform: translateY(-50%) rotate(90deg) scale(0.95);
}

.section2_modal_title {
  color: #0381C6;
  font-size: 36px;
  font-weight: 600;
  text-align: center;
  margin: 0;
  flex: 1;
}

/* ========== 統一彈窗關閉按鈕樣式 ========== */
.modal-close {
  position: absolute;
  top: 3%;
  right: 2%;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: #333;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.modal-close:hover {
  color: #2aa3cf;
  transform: rotate(90deg) scale(1.1);
  opacity: 0.8;
}

.modal-close:active {
  transform: rotate(90deg) scale(0.95);
  opacity: 0.6;
}

.modal-close span {
  display: block;
  line-height: 1;
  transition: transform 0.3s ease;
}

/* 彈窗標題統一樣式（所有彈窗共用，勿個別寫） */
.modal_title {
  color: #0381C6;
  font-size: 36px;
  font-weight: var(--fw-bold);
  text-align: center;
  margin: 0 0 32px;
  padding-top: 8px;
}

@media (max-width: 1023px) {
  .modal_title {
    font-size: 24px;
    margin-bottom: 24px;
  }
}

@media (max-width: 768px) {
  .modal_title {
    font-size: 20px;
    margin-bottom: 20px;
  }
}

.section2_modal_video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.section2_modal_video iframe {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 768px) {
  /* .title--section {
    padding: 8px 2%;
  } */
  .section2_modal_content {
    width: 95%;
  }
  
  .section2_modal_header {
    padding: 15px 50px 16px;
  }
  
  .section2_modal_title {
    font-size: 20px;
  }
  
  /* RWD：所有彈窗關閉鈕統一在右上角 */
  .modal-close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 24px;
  }
  
  .section2_modal_header .modal-close {
    top: 12px;
    right: 12px;
    transform: none;
  }
  
  .section2_modal_header .modal-close:hover {
    transform: rotate(90deg) scale(1.1);
  }
  
  .section2_modal_header .modal-close:active {
    transform: rotate(90deg) scale(0.95);
  }
}

} /* @layer components：Section2 影片彈窗、統一關閉按鈕 */

/* ========== 產品介紹彈窗組件 (Modal_DellProduct_Intro) ========== */
@layer components {
.modal-product-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-product-intro[aria-hidden="false"] {
  display: flex;
  opacity: 1;
}

.modal-product-intro_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.modal-product-intro_content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  padding: 12px 40px 40px;
  background: #ffffff url("../images/common/modal_bg.png") center/cover no-repeat;
  z-index: 1;
  border-radius: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}


.modal-product-intro_body {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.modal-product-intro_card {
  flex: 1;
  background: #D9F5FD;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.modal-product-intro_card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(100, 196, 223, 0.3);
}

.modal-product-intro_card-title {
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-bold);
  color: #1a3a52;
  margin: 0;
}

.modal-product-intro_card-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.modal-product-intro_card-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-product-intro_item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-product-intro_tag {
  display: inline-block;
  background: #00B1E9;
  color: #fff;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  padding: 8px 16px;
  border-radius: 20px;
  text-align: center;
  width: fit-content;
}

/* 產品介紹彈窗描述文字 */
.modal-product-intro_desc {
  font-size: var(--product-intro-desc);
  font-family: var(--font-title);
  color: #000;
  line-height: 1.8;
  margin: 0;
  text-align: left;
}

/* 響應式設計 */
@media (max-width: 1023px) {
  .modal-product-intro_body {
    flex-direction: column;
  }

  .modal-product-intro_card {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .modal-product-intro_content {
    width: 95%;
    padding: 10px 20px;
    border-radius: 16px;
  }

  .modal-product-intro_card {
    padding: 16px;
  }

  .modal-product-intro_card-title {
    font-size: var(--fs-body);
  }
  .modal-product-intro_card-icon {
    width: 30px;
    height: 30px;
  }

  .modal-product-intro_tag {
    font-size: var(--fs-body-sm);
    padding: 6px 12px;
  }

  .modal-product-intro_desc {
    font-size: var(--fs-caption);
    line-height: 1.7;
  }
}

} /* @layer components：產品介紹彈窗 */

/* ========== 活動注意事項彈窗 ========== */
@layer components {
.modal-precaution {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-precaution[aria-hidden="false"] {
  display: flex;
  opacity: 1;
}

.modal-precaution_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.modal-precaution_content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  padding: 40px;
  background: #ffffff;
  z-index: 1;
  border-radius: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(206, 242, 255, 0.8);
}

.modal-precaution_body {
  color: #1a3a52;
}

.modal-precaution_list {
  margin: 0;
  padding-left: 1.25em;
  list-style-type: disc;
  font-size: var(--fs-body-sm);
  line-height: 1.8;
}

.modal-precaution_list li {
  margin-bottom: 12px;
}

.modal-precaution_list li:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .modal-precaution_content {
    padding: 24px 20px;
    width: 95%;
  }

  .modal-precaution_list {
    font-size: var(--fs-caption);
    line-height: 1.7;
  }
}

} /* @layer components：活動注意事項彈窗 */

/* ========== Section5 產品彈窗組件 (Modal_Section5_Product) ========== */
@layer components {
.modal-section5-product {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.modal-section5-product[aria-hidden="false"] {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.modal-section5-product_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.modal-section5-product_content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  padding: 12px 40px 40px;
  background: #ffffff url("../images/common/modal_bg.png") center/cover no-repeat;
  z-index: 1;
  border-radius: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-section5-product[aria-hidden="false"] .modal-section5-product_content {
  transform: scale(1);
  opacity: 1;
}


.modal-section5-product_body {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.modal-section5-product_card {
  flex: 1;
  background: #D9F5FD;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.modal-section5-product_card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(100, 196, 223, 0.3);
}

.modal-section5-product_card-title {
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-bold);
  color: #000;
  margin: 0;
}

.modal-section5-product_card-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.modal-section5-product_card-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-section5-product_item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-section5-product_tag {
  display: inline-block;
  background: #00B1E9;
  color: #fff;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  padding: 8px 16px;
  border-radius: 20px;
  text-align: center;
  width: fit-content;
}

/* Section5 產品彈窗響應式設計 */
@media (max-width: 1023px) {
  .modal-section5-product_body {
    flex-direction: column;
  }

  /* 平板與手機：新推出區塊排序在上方 */
  .modal-section5-product_body .modal-section5-product_card:nth-child(1) {
    order: 2;
  }
  .modal-section5-product_body .modal-section5-product_card:nth-child(2) {
    order: 1;
  }

  .modal-section5-product_content {
    padding: 32px 24px;
  }

  .modal-section5-product_card {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .modal-section5-product_content {
    width: 95%;
    padding: 10px 20px;
    border-radius: 16px;
  }

  .modal-section5-product_card {
    padding: 16px;
  }

  .modal-section5-product_card-title {
    font-size: var(--fs-body);
  }

  .modal-section5-product_card-icon {
    width: 30px;
    height: 30px;
  }

  .modal-section5-product_tag {
    font-size: var(--fs-body-sm);
    padding: 6px 12px;
  }
}

} /* @layer components：Section5 產品彈窗 */

/* ========== Section6 產品彈窗組件 (Modal_Section6_Product) ========== */
@layer components {
.modal-section6-product {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.modal-section6-product[aria-hidden="false"] {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.modal-section6-product_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.modal-section6-product_content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  padding: 12px 40px 40px;
  background: #ffffff url("../images/common/modal_bg.png") center/cover no-repeat;
  z-index: 1;
  border-radius: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-section6-product[aria-hidden="false"] .modal-section6-product_content {
  transform: scale(1);
  opacity: 1;
}


.modal-section6-product_body {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.modal-section6-product_card {
  flex: 1;
  background: #D9F5FD;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.modal-section6-product_card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(100, 196, 223, 0.3);
}

.modal-section6-product_card-title {
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-bold);
  color: #000;
  margin: 0;
}

.modal-section6-product_card-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.modal-section6-product_card-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-section6-product_item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-section6-product_tag {
  display: inline-block;
  background: #00B1E9;
  color: #fff;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  padding: 8px 16px;
  border-radius: 20px;
  text-align: center;
  width: fit-content;
}

/* Section6 產品彈窗響應式設計 */
@media (max-width: 1023px) {
  .modal-section6-product_body {
    flex-direction: column;
  }

  .modal-section6-product_content {
    padding: 32px 24px;
  }

  .modal-section6-product_card {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .modal-section6-product_content {
    width: 95%;
    padding: 10px 20px;
    border-radius: 16px;
  }

  .modal-section6-product_card {
    padding: 16px;
  }

  .modal-section6-product_card-title {
    font-size: var(--fs-body);
  }

  .modal-section6-product_card-icon {
    width: 30px;
    height: 30px;
  }

  .modal-section6-product_tag {
    font-size: var(--fs-body-sm);
    padding: 6px 12px;
  }
}

} /* @layer components：Section6 產品彈窗 */

/* ========== Section7 產品彈窗組件 (Modal_Section7_Product) ========== */
@layer components {
.modal-section7-product {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.modal-section7-product[aria-hidden="false"] {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.modal-section7-product_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.modal-section7-product_content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  padding: 12px 40px 40px;
  background: #ffffff url("../images/common/modal_bg.png") center/cover no-repeat;
  z-index: 1;
  border-radius: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-section7-product[aria-hidden="false"] .modal-section7-product_content {
  transform: scale(1);
  opacity: 1;
}


.modal-section7-product_body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 24px;
}

.modal-section7-product_card {
  flex: 1;
  max-width: 100;
  background: #D9F5FD;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.modal-section7-product_card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(100, 196, 223, 0.3);
}

.modal-section7-product_card-title {
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-bold);
  color: #000;
  margin: 0;
}

.modal-section7-product_card-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.modal-section7-product_card-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-section7-product_item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-section7-product_tag {
  display: inline-block;
  background: #00B1E9;
  color: #fff;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  padding: 8px 16px;
  border-radius: 20px;
  text-align: center;
  width: fit-content;
}

/* Section7 產品彈窗響應式設計 */
@media (max-width: 1023px) {
  .modal-section7-product_body {
    flex-direction: column;
  }

  .modal-section7-product_content {
    padding: 32px 24px;
  }

  .modal-section7-product_card {
    padding: 20px;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .modal-section7-product_content {
    width: 95%;
    padding: 10px 20px;
    border-radius: 16px;
  }

  .modal-section7-product_card {
    padding: 16px;
  }

  .modal-section7-product_card-title {
    font-size: var(--fs-body);
  }

  .modal-section7-product_card-icon {
    width: 30px;
    height: 30px;
  }

  .modal-section7-product_tag {
    font-size: var(--fs-body-sm);
    padding: 6px 12px;
  }

  .modal-section7-product_desc {
    font-size: var(--fs-caption);
    line-height: 1.7;
  }

}

} /* @layer components：Section7 產品彈窗 */

@layer sections3 {
/* ========== Section3：為新世代工作者、卡片輪播、左右箭頭+虛線取代圓點 ========== */
.section3 {
  padding: 48px 0 56px;
  overflow-x: hidden;
}

.section3 .title-wrap {
  margin-bottom: 36px;
}


/* 輪播區：偏右起始、滑動時可滿版（overflow visible） */
.section3_content {
  overflow: visible;
  background: linear-gradient(180deg, #d4eaf2 0%, #b8dce8 50%, #9ecfdf 100%);
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.section3-swiper.swiper {
  overflow: visible;
  max-width: 100%;
  margin-left: 0;
}

.section3-swiper .swiper-wrapper {
  align-items: stretch;
}

.section3_slide {
  height: auto;
  box-sizing: border-box;
}

/* 卡片大小比例與間距對齊設計圖：等寬、內留白一致 */
.section3_card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12% 1% 28px;
  text-decoration: none;
  color: inherit;
  height: 100%;
  box-sizing: border-box;
}

a.section3_card:hover,
a.section3_card:focus {
  text-decoration: none;
  color: inherit;
}

.section3_card-media {
  flex: 1;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: filter 0.3s ease;
}

.section3_card-media:hover {
  filter: brightness(1.0) saturate(1.3);
}

.section3_card-media .user_card-wrapper {
  width: 100%;
  max-width: 100%;
  transition: transform 0.3s ease;
}

.section3_card-media:hover .user_card-wrapper {
  transform: translateY(-6px);
}

.section3_card-media img,
.section3_card-media .user_base-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: filter 0.3s ease;
}

.section3_card-media:hover img,
.section3_card-media:hover .user_base-img {
  filter: brightness(1.2) saturate(1.3);
}

.section3_nav-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  width: 100%;
  margin: 0 auto;
  padding: 0 3% 5%;
}

.section3_nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: filter 0.3s ease, transform 0.2s ease;
}

.section3_nav:hover {
  filter: brightness(1.3);
  transform: scale(1.05);
}

.section3_nav img {
  display: block;
  width: auto;
  height: 90px;
  max-width: 200px;
  object-fit: contain;
  transition: filter 0.3s ease;
}

.section3_nav-dash {
  position: relative;
  display: inline-block;
  flex: 1;
  max-width: 830px;
  height: 0;
  border: none;
  border-top: 3px dashed #087AB0;
  margin: 0;
  vertical-align: middle;
}

.section3_nav-dash::before,
.section3_nav-dash::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background: #087AB0;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

.section3_nav-dash::before {
  left: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.section3_nav-dash::after {
  right: 0;
  transform: translate(50%, -50%) rotate(45deg);
}

/* Section3 手機版：導航按鈕縮小、左右保留間距 */
@media (max-width: 820px) {
  .section3_nav-wrap {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
  .title--section{
    padding: unset
  }
  .section3_nav img {
    height: 50px;
  }
}

} /* @layer sections3 */

@layer sections4 {
/* ========== Section4：Dell Pro 系列（標題在外、中央一塊淺藍 card） ========== */
/* Section4+5 共用：左側曲線背景（由 section4 延伸到 section5） */
.section4-5-wrap {
  position: relative;
  background-image: url("../images/curve_bg2.png"), url("../images/curve_bg1.png");
  background-position: left center, right center;
  background-repeat: no-repeat, no-repeat;
  background-size: auto 100%, auto 100%;
}

.section4 {
  --subtitle-font-size: var(--fs-title-md);
  --subtitle-font-weight: var(--fw-semibold);
  --subtitle-color: #051D7C;
  --subtitle-margin: 0 0 12px;
  padding: 48px 20px 56px;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
  /* 右上角 right_bg1.png、左下 left_bg.png */
  background-image: url("../images/common/right_bg1.png"), url("../images/common/left_bg.png");
  background-position: right top, left bottom;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, auto;
}


/* 標題區：在 card 外 */
.section4_header {
  text-align: center;
  margin-bottom: 28px;
}

.section4_header .title-wrap {
  margin-bottom: 16px;
}

} /* @layer sections4 */

/* ---------- 可重用標題組件（帶標籤和裝飾圖標）---------- */
@layer components {
/* 組件結構：.title-inner > (.title-tag + .title-frame + .title-icon) */

.title-inner {
  display: inline-block;
  position: relative;
  padding-top: 4%;
  overflow-x: visible;
  overflow-y: visible;
  max-width: 100%;
}

/* 左側標籤圖（可選）- 相對於 title-frame 定位，永遠在左上方，使用百分比適應文字長度 */
.title-tag {
  position: absolute;
  left: -7%;
  top: -55%;
  transform: translate(-35%, -18%);
  z-index: 2;
  display: block;
  line-height: 0;
  white-space: nowrap;
}

.title-tag img {
  display: block;
  max-height: 105px;
  width: auto;
  height: auto;
}

/* 右下方裝飾型 icon（可選）- 相對於 title-frame 定位，永遠在右下方，使用百分比適應文字長度 */
.title-icon {
  position: absolute;
  right: -20%;
  bottom: 0;
  transform: translate(18%, 25%);
  z-index: 0;
  display: block;
  line-height: 0;
  white-space: nowrap;
}

.title-icon img {
  display: block;
  max-width: 80px;
  width: auto;
  height: auto;
  opacity: 0.8;
}

/* br-mobile	僅手機（≤768px）	平板、桌機
br-md	僅平板（769px～1024px）	手機、桌機
br-sm	手機 + 平板（≤1024px）	僅桌機
br-xs	手機 + 平板（≤1024px）	僅手機
br-lg	僅桌機（≥1025px）	手機、平板 */

/* 僅手機版顯示的換行：桌機/平板隱藏 */
.br-mobile {
  display: none;
}

@media (max-width: 768px) {
  .br-mobile {
    display: block;
  }
}

/* 僅桌機版顯示的換行：平板/手機隱藏 */
.br-lg {
  display: none;
}

@media (min-width: 1025px) {
  .br-lg {
    display: block;
  }
}

/* 僅平板版顯示的換行：桌機/手機隱藏 */
.br-md {
  display: none;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .br-md {
    display: block;
  }
}

/* 手機+平板顯示的換行：僅桌機隱藏 */
.br-sm {
  display: none;
}

@media (max-width: 1024px) {
  .br-sm {
    display: block;
  }
}
/* 手機 */
.br-xs {
  display: none;
}

@media (max-width: 360px) {
  .br-xs {
    display: block;
  }
}
/* 僅桌機顯示的 inline 內容（如 |）：平板/手機隱藏、不換行 */
.inline-lg {
  display: none;
}

@media (min-width: 1025px) {
  .inline-lg {
    display: inline;
  }
}

/* 統一的描述文字樣式 */
.desc {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: #1E1E1E;
  line-height: var(--lh-loose);
  margin: 0 0 28px;
  max-width: 1165px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  letter-spacing: 0.1rem;
}

/* 中央一塊淺藍 card */
.product_card {
  position: relative;
  background: #CEF2FF;
  background-image: 
    url("../images/common/box_left-top.png"),
    url("../images/common/box_right-bottom.png");
  background-position: 
    left top,
    right bottom;
  background-repeat: no-repeat;
  background-size: 180px auto, 180px auto;
  border-radius: 20px;
  padding: 36px 32px 40px;
  box-shadow: 0 8px 32px rgba(26, 58, 82, 0.1);
  overflow: hidden;
}

/* 五個產品同一 grid：5 欄等寬、第二列等高 */
.product_card-body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0 20px;
  position: relative;
  border-radius: 12px;
  padding: 0;
}

/* 左邊筆記型電腦區域的漸層 */
.product_card-body::before {
  content: "";
  position: absolute;
  left: 0;
  right: calc(40% + 10px);
  top: 5%;
  bottom: 0;
  background: linear-gradient(360deg, rgb(206 242 255) 0%, rgba(255, 255, 255, 1) 100%);
  border-radius: 0 0 0 12px;
  z-index: 0;
  pointer-events: none;
}

/* 右邊桌上型電腦區域的漸層 */
.product_card-body::after {
  content: "";
  position: absolute;
  left: calc(60% + 13px);
  right: 0;
  top: 5%;
  bottom: 0;
  background: linear-gradient(360deg, rgb(206 242 255) 0%, rgba(255, 255, 255, 1) 100%);
  border-radius: 0 0 12px 0;
  z-index: 0;
  pointer-events: none;
}

/* 手機版替換為單張圖，桌機隱藏 */
.product_card-body_xs {
  display: none;
}

.product_card-body_xs img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

.section4_category-header {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.section4_product {
  position: relative;
  z-index: 1;
  padding: 24px 0;
}

.section4_category-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-bold);
  color: #fff;
  margin: -3% 0;
  border-radius: 8px;
}

/* 左側標籤與 .product_card-body::before 左右對齊（紅框範圍） */
.section4_category-header--left {
  grid-column: 1 / span 3;
  width: 100%;
  max-width: 100%;
  justify-self: start;
  justify-content: flex-start;
}

.section4_category-header--right {
  grid-column: 4 / span 2;
}

.section4_category-header .section4_tag-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 5px 0 0 0;
}
.section4_product {
  display: flex;
  flex-direction: column;
  text-align: center;
  min-height: 0;
}

.section4_product-media {
  position: relative;
  flex: 1;
  min-height: 120px;
  aspect-ratio: 1;
  margin-bottom: -5%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.section4_product-media:hover {
  filter: brightness(1.2) saturate(1.3);
  transform: scale(1.02);
}

.section4_product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.section4_product-icon {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #00B1E9;
  color: #fff;
  font-size: var(--fs-body-sm);
  font-style: italic;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: var(--lh-tight);
}

.section4_product-name {
  font-size: var(--fs-caption);
  color: #333333;
  font-weight: var(--fw-semibold);
  min-height: 80px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 1.5;
  text-align: center;
  padding-top: 0;
  margin-top: -5%;
}

.section4_cta {
  text-align: center;
}

/* ---------- 按鈕組件（瞭解更多）---------- */
.btn_more {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.btn_more:hover {
  opacity: 0.9;
  filter: brightness(1.2);
}

.btn_more img {
  display: block;
  height: 100%;
  width: 100%;
  transition: filter 0.3s ease;
  z-index: 1;
}

.btn_more:hover img {
  filter: brightness(1.2);
}

} /* @layer components：可重用標題、按鈕 */

@layer sections5 {
/* ========== Section5：Dell Pro Max | Precision 工作站 ========== */
.section5 {
  --subtitle-margin: 0 0 16px;
  padding: 48px 2% 56px;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

/* 右上角裝飾 #1（絕對定位，字形由變數控制） */
.section5::before {
  content: "#1";
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-section5-number);
  font-size: clamp(80px, 15vw, 180px);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}


.section5 .title-wrap,
.section6 .title-wrap,
.section7 .title-wrap {
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.section5 .tag {
  margin: 0 0 12px;
}

.section5_tag img {
  display: inline-block;
  max-height: 28px;
  width: auto;
}



.section5_showcase {
  position: relative;
  background: #CEF2FF;
  background-image: 
    url("../images/common/box_left-top.png"),
    url("../images/common/box_right-bottom.png");
  background-position: 
    left top,
    right bottom;
  background-repeat: no-repeat;
  background-size: 180px auto, 180px auto;
  border-radius: 20px;
  padding: 36px 32px 40px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(26, 58, 82, 0.1);
  overflow: hidden;
}

.section5_showcase .title--card {
  font-size: var(--fs-subtitle);
  text-align: center;
  margin: 0 0 28px;
  color: #051D7C;
}

.section5_cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  border-radius: 12px;
  background: linear-gradient(360deg, rgb(206 242 255) 0%, rgba(255, 255, 255, 1) 100%);
}

.section5_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.section5_card-media {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.section5_card-media[data-modal] {
  cursor: pointer;
}

.section5_card-media[data-modal]:hover {
  filter: brightness(1.2) saturate(1.3);
  transform: scale(1.02);
}

.section5_card-media img,
.section5_card-media .section5_hero-img {
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  transition: filter 0.3s ease, transform 0.3s ease;
}
.section5_card-badge::before {
  content: "★";
  font-size: 14px;
  color: #fff;
  line-height: 1;
}

.product-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(360deg, rgb(206 242 255) -80%, rgba(255, 255, 255, 1) 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 3px 20px;
  margin: 12px 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  width: 100%;
  max-width: 200px;
}

.product-link:hover {
  background: #6bbfdd;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

a.product-link {
  text-decoration: none;
  color: inherit;
}

.section5_card-name {
  font-size: var(--fs-caption);
  color: #1a3a52;
  font-weight: var(--fw-semibold);
  margin-top: -5%;
  line-height: 1.5;
}

.section5_showcase .section5_cta {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 8px;
}

.section5_footer {
  font-size: var(--fs-note);
  color: #888;
  text-align: center;
  margin: 0;
}

} /* @layer sections5 */

@layer sections6 {
/* ========== Section6：Dell Pro Essential ========== */
.section6 {
  padding: 48px 20px 56px;
  position: relative;
  width: 100%;
  max-width: 100vw;
  /* 背景圖：右上 right_bg、左下 left_bg、偏右下 curve_level_bg1、偏左下 modal_bg */
  background-image: url("../images/common/right_bg.png"), url("../images/common/left_bg.png"), url("../images/curve_level_bg1.png"), url("../images/common/modal_bg.png");
  background-position: right top, left bottom, right bottom, left bottom;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, auto, auto;
}

/* Section6 點陣裝飾：左上角 */
.section6 .inner::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 80px;
  height: 80px;
  background-image: radial-gradient(circle, #CEF2FF 2px, transparent 2px);
  background-size: 16px 16px;
  background-position: 0 0;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

/* Section6 點陣裝飾：右下角 */
.section6 .inner::after {
  content: "";
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  background-image: radial-gradient(circle, #CEF2FF 2px, transparent 2px);
  background-size: 16px 16px;
  background-position: 0 0;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

.section6 .tag,
.section7 .tag {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: #2aa3cf;
  margin: 0 0 12px;
}


.section6_products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
  justify-items: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* 第一個產品卡片：佔中間偏左 2 欄 */
.section6_card:nth-of-type(1) {
  grid-column: 1 / span 2;
  max-width: 100%;
}

/* 第二個產品卡片：佔中間偏右 2 欄 */
.section6_card:nth-of-type(2) {
  grid-column: 3 / span 2;
  max-width: 100%;
}

.section6_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
}

.section6_category-header {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  width: 100%;
}

.section6_category-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-bold);
  color: #fff;
  margin: 0 0 16px;
  border-radius: 8px;
}

.section6_category-header img {
  height: auto;
  width: 100%;
  object-fit: contain;
  border-radius: 5px 0 0 0;
}

/* 白色漸層偽元素 - 左側卡片 */
.section6_card:nth-of-type(1)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6%;
  bottom: 0;
  background: linear-gradient(360deg, rgb(206 242 255) 0%, rgba(255, 255, 255, 1) 100%);
  border-radius: 0 0 12px 12px;
  z-index: 0;
  pointer-events: none;
}

/* 白色漸層偽元素 - 右側卡片 */
.section6_card:nth-of-type(2)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6%;
  bottom: 0;
  background: linear-gradient(360deg, rgb(206 242 255) 0%, rgba(255, 255, 255, 1) 100%);
  border-radius: 0 0 12px 12px;
  z-index: 0;
  pointer-events: none;
}

.section6_card-media {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  z-index: 1;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.section6_card-media[data-modal] {
  cursor: pointer;
}

.section6_card-media[data-modal]:hover {
  filter: brightness(1.2) saturate(1.3);
  transform: scale(1.02);
}

.section6_card-media img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  transition: filter 0.3s ease, transform 0.3s ease;
  image-rendering: -webkit-optimize-contrast;
  filter: contrast(100%);
}

.section6_card-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #CEF2FF;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 10px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  width: 100%;
  max-width: 200px;
  z-index: 1;
  position: relative;
}

.section6_card-info:hover {
  background: #00B1E9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.section6_card-info-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 13px;
  font-style: italic;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.section6_card-info-text {
  color: #fff;
  white-space: nowrap;
  font-size: 14px;
}

.section6_card-name {
  font-size: var(--fs-caption);
  color: #1a3a52;
  font-weight: var(--fw-semibold);
  margin-top: -10%;
  line-height: 1.5;
  position: relative;
  z-index: 1;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* section6 內 product-link 僅做對齊（樣式與 section5 共用 .product-link） */
.section6_products .product-link {
  margin-top: auto;
  z-index: 1;
  position: relative;
}

.section6_cta {
  text-align: center;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .section6_card-media{
    min-height: 100px;
  }
}

} /* @layer sections6 */

@layer sections7 {
/* ========== Section7：Dell XPS 筆記型電腦 ========== */
.section7 {
  padding: 48px 20px 56px;
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  /* 背景圖：右上 right_bg、左下 left_bg、左下曲線 curve_left_bg */
  background-image: url("../images/common/right_bg.png"), url("../images/common/left_bg.png"), url("../images/curve_left_bg.png.png");
  background-position: right top, left bottom, left bottom;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, auto;
}

} /* @layer sections7 */

@layer sections8 {
/* ========== Section8：硬體只是起點、整合式 AI（圖 RWD 切換） ========== */
.section8 {
  padding: 48px 20px 56px;
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background-image: url("../images/common/right_bg.png"), url("../images/common/left_bg.png");
  background-position: right top, left bottom;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, auto;
}

.section8 .title-wrap {
  margin-bottom: 24px;
}

.section8 .subtitle {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0.5em 5%;
}

.section8_media {
  margin-top: 32px;
  text-align: center;
}

.section8_image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* 兩產品並排、置中；與 Section5/Section6 同比例（760 容器、單卡 max 420） */
.section7_products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
  justify-items: center;
  align-items: start;
  max-width: 760px;
  width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background: linear-gradient(360deg, rgb(206 242 255) 0%, rgba(255, 255, 255, 1) 100%);
  border-radius: 12px 12px 0 0;
}

.section7_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
}

/* Section7 主視覺圖片 */
.section7_hero-image {
  text-align: center;
  margin: 32px auto;
  position: relative;
  z-index: 1;
}

.section7_hero-image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.section7_card-media {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  z-index: 1;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.section7_card-media[data-modal] {
  cursor: pointer;
}

.section7_card-media[data-modal]:hover {
  filter: brightness(1.2) saturate(1.3);
  transform: scale(1.02);
}

.section7_card-media img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.section7_card-name {
  font-size: var(--fs-caption);
  color: #1a3a52;
  font-weight: var(--fw-semibold);
  margin-top: 0;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.section7_cta {
  text-align: center;
  position: relative;
  z-index: 1;
}
} /* @layer sections8 */

@layer sections9 {
/* ========== Section9：釋放潛力，完成高效辦公的最終拼圖 ========== */
.section9 {
  padding: 48px 20px 5em;
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: #EFF3FA;
  background-image: url("../images/common/right_bg.png"), url("../images/common/left_bg.png");
  background-position: right 15%, left bottom;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, auto;
}

.section9 .inner {
  max-width: 1192px;
  margin: 0 auto;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.section9 .title-wrap {
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.section9 .subtitle {
  text-align: center;
  font-size: var(--fs-subtitle);
  color: #051D7C;
  margin: 16px 0 0;
  line-height: 1.6;
}

/* 產品情境圖 */
.section9_product-scene {
  margin: 32px 0 -40px;
  text-align: center;
  position: relative;
}

.section9_product-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* 特點卡片與數據圖表 */
.section9_features {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: stretch;
}

.section9_features-left {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section9_features-right {
  flex: 0 0 50%;
  display: flex;
  align-items: stretch;
}

.section9_feature-card {
  background: rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 3% 3.5%;
  box-shadow: 0 4px 12px rgb(0 0 0 / 2%), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
}

.section9_feature-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section9_feature-title {
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-bold);
  background: linear-gradient(180deg, #56CBF5 0%, #087AB0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin: 0;
  flex: 1;
}

.section9_feature-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-left: 12px;
}

.section9_feature-decorate {
  position: absolute;
  bottom: -2%;
  right: -2%;
  width: 30%;
  height: auto;
  z-index: 0;
}

.section9_feature-desc {
  font-size: var(--section9_feature-desc);
  color: #000;
  line-height: 1.8;
  letter-spacing: 0.5px;
  margin: 0;
  position: relative;
  z-index: 1;
}

.section9_data-card {
  position: relative;
  background: linear-gradient(20deg, #C3EEFF 25.45%, #EFF3FA 70.19%), rgba(0, 0, 0, 0.00);
  border-radius: 16px;
  padding: 10%;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.section9_data-card::after {
  content: "";
  position: absolute;
  top: -7%;
  right: -8%;
  width: 100%;
  height: 100%;
  background-image: url("../images/decorate-right.png");
  background-position: right top;
  background-repeat: no-repeat;
  background-size: auto;
  pointer-events: none;
  z-index: 0;
}

.section9_data-card .section9_data-image,
.section9_data-card .section9_data-desc {
  position: relative;
  z-index: 1;
}

.section9_data-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto 16px;
  display: block;
  flex-shrink: 0;
}

.section9_data-desc {
  font-size: var(--data-desc);
  font-family: var(--font-title);
  color: #000;
  line-height: 1.8;
  margin: 0;
  text-align: left;
  flex: 1;
}

/* Section8 響應式設計 */
@media (max-width: 1024px) {
  .section9_features {
    flex-direction: column;
  }

  .section9_features-right {
    width: 100%;
  }

  .section9_data-card {
    text-align: center;
  }

  .section9_data-desc {
    text-align: center;
  }
  .section9_product-scene {
    margin: 24px 0 40px;
  }
}

@media (max-width: 768px) {
  .section9 {
    padding: 32px 16px 40px;
  }

  .section9 .subtitle {
    font-size: var(--fs-body-sm);
    padding: 0 8px;
  }

  .section9_feature-card {
    padding: 20px 16px;
  }

  .section9_feature-title {
    font-size: var(--fs-body);
  }

  .section9_feature-icon {
    width: 32px;
    height: 32px;
    margin-left: 8px;
  }

  .section9_feature-decorate {
    width: 115px;
    bottom: -2%;
    right: 0%;
  }

  .section9_data-card {
    padding: 24px 16px;
  }

  .section9_data-image {
    max-width: 200px;
  }
}

} /* @layer sections9 */

@layer sections10 {
/* ========== Section10：攜手 Dell，加速企業躍進 AI 世代 ========== */
.section10 {
  background-color: #E3F8FF;
  background-image: url("../images/common/right_bg.png");
  background-repeat: no-repeat;
  background-position: right top;
  padding: 60px 20px 80px;
  width: 100%;
  box-sizing: border-box;
}

.section10 .title--section{
  background-color: #e3f8ff;
}

.section10 .inner {
  max-width: 1400px;
  margin: 0 auto;
}

.section10 .title-wrap {
  margin-bottom: 48px;
  text-align: center;
}

/* 桌機版：5 欄平鋪，卡片等寬 */
.section10_cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  align-items: stretch;
}

.section10_card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  min-width: 0; /* 確保 grid 子項可等分 */
}

.section10_card img,
.section10_card .section10_card-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  vertical-align: top;
}
/* 平板／手機版：2 欄一排，所有卡片等寬，最後一張置中 */
@media (max-width: 1024px) {
  .section10 {
    padding: 48px 5%;
  }

  .section10 .title-wrap {
    margin-bottom: 32px;
  }

  .section10_cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: stretch;
  }

  .section10_card {
    min-width: 0; /* 平板時也確保等寬 */
  }

  /* 最後一張佔一整行，寬度與上方單張卡片相同並置中 */
  .section10_card--last {
    grid-column: 1 / -1;
    width: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    box-sizing: border-box;
  }
}

} /* @layer sections10 */

@layer survey {
/* ========== Survey：邁出升級第一步，解鎖好禮 ========== */
.survey {
  background-color: #EFF3FA;
  background-image: url("../images/footer-bg.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  padding: 60px 20px 80px;
  width: 100%;
  box-sizing: border-box;
}

.survey .inner {
  max-width: 1200px;
  margin: 0 auto;
}

.survey .title-wrap {
  margin-bottom: 24px;
  text-align: center;
}

.survey_desc,
.survey_info,
.survey_notice {
  font-size: var(--survey_desc);
  color: #000;
  line-height: var(--lh-loose);
  margin: 0 auto;
  max-width: 1200px;
  text-align: center;
  font-weight: 600;
}

.survey_notice {
  margin-bottom: 32px;
}

.precautions_link {
  color: #994CCC;
  text-decoration: none;
}

/* 桌機版：3 欄，首獎在中間 */
.survey_cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 40px;
}

.survey_card {
  display: block;
  min-width: 0;
}

.survey_card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  vertical-align: top;
}

/* CTA 按鈕 */
.survey_cta-wrap {
  text-align: center;
}

/* 手機版：1 + 2 排版，首獎第一行，圖片等寬 */
@media (max-width: 1024px) {
  .survey {
    padding: 48px 16px 60px;
  }

  .survey .title-wrap {
    margin-bottom: 20px;
  }

  .survey_desc,
  .survey_info,
  .survey_notice {
    font-size: var(--fs-body-sm);
    margin-bottom: 0;
  }

  .survey_notice {
    margin-bottom: 24px;
  }

  .survey_cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
  }

  .survey_card {
    min-width: 0; /* 平板／手機時確保等寬 */
  }

  /* 第一行：首獎單獨一排，寬度與下方單張卡片相同並置中 */
  .survey_card--first {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
    box-sizing: border-box;
  }

  /* 第二行：二獎、三獎並排 */
  .survey_card[data-prize="second"] {
    grid-row: 2;
    grid-column: 1;
  }

  .survey_card[data-prize="third"] {
    grid-row: 2;
    grid-column: 2;
  }
}

/* RWD section4～7 */

/* 平板：顯示單張圖 product_card-body_xs，隱藏 grid */
@media (min-width: 601px) and (max-width: 900px) {
  .product_card-body {
    display: none;
  }

  .product_card-body_xs {
    display: block;
    cursor: pointer;
    margin-bottom: 16px;
  }

  .product_card-body_xs img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* 手機版：隱藏單張圖，改為原本的 grid 切版 */
@media (max-width: 600px) {
  .section4 {
    padding: 48px 5px 56px;
    background: none;
  }

  .product_card-body_xs {
    display: none;
  }

  .product_card-body {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 0 12px;
    padding: 0;
  }

  .section4_category-header--left {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* 手機版：前三個產品（筆記型電腦）橫向排列，各佔 2 欄 */
  .section4_product:nth-of-type(1) {
    grid-column: 1 / span 2;
    grid-row: 2;
    padding: 0;
  }

  .section4_product:nth-of-type(2) {
    grid-column: 3 / span 2;
    grid-row: 2;
    padding: 0;
  }

  .section4_product:nth-of-type(3) {
    grid-column: 5 / span 2;
    grid-row: 2;
    padding: 0;
  }

  .section4_category-header--right {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 24px;
    margin-bottom: 0;
  }

  /* 手機版：後兩個產品（桌上型電腦）橫向排列，貼合分類標題下方、無間隙 */
  .section4_product:nth-of-type(4) {
    grid-column: 1 / span 3;
    grid-row: 4;
    padding: 0;
    margin-top: -16px;
  }

  .section4_product:nth-of-type(5) {
    grid-column: 4 / span 3;
    grid-row: 4;
    padding: 0;
    margin-top: -16px;
  }

  /* 手機版：第一個分類（筆記型電腦）的白色背景漸層 - 從分類標題下方開始 */
  .product_card-body::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 3%;
    bottom: calc(50% + 16px);
    background: linear-gradient(360deg, rgb(206 242 255) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 0;
    z-index: 0;
    pointer-events: none;
    margin: 0;
  }

  /* 手機版：第二個分類（桌上型電腦）的白色漸層 - 改為綁在分類圖片 .section4_category-header--right 下方，RWD 不分離 */
  .product_card-body::after {
    content: none;
  }

  .section4_category-header--right {
    position: relative;
  }

  .section4_category-header--right::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 30vh;
    background: linear-gradient(360deg, rgba(212, 234, 242, 0.8) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 0 0 12px 12px;
    z-index: 0;
    pointer-events: none;
  }

  /* 確保「瞭解更多」按鈕在漸層之上，不被擋住 */
  .product_card .section4_cta {
    position: relative;
    z-index: 1;
  }

  /* 手機版：product_card padding 調整 */
  .product_card {
    padding: 24px 10px 28px;
    background-size: 60px auto, 60px auto;
  }

  .section5_showcase {
    background-size: 60px auto, 60px auto;
  }

  .section5_cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .product-link {
    padding: 6px 12px;
    font-size: 5px;
  }

  .product-link-text {
    font-size: 12px;
  }

  .section6_products {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .section6_card {
    max-width: 420px;
  }

  .section6_card:nth-of-type(1) {
    grid-column: 1 / span 2;
  }

  .section6_card:nth-of-type(2) {
    grid-column: 3 / span 2;
  }

  .section7_card-info {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
}

/* 平板尺寸標題樣式調整（821px - 1024px）- 避免標題超出畫面 */
@media (min-width: 821px) and (max-width: 1024px) {
  /* 平板版標題樣式（無標籤款） */
  .title-wrap > .title-frame .title--section {
    padding: 8px 50px;
    font-size: clamp(24px, 3.5vw + 6px, 40px);
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* 平板版標題樣式（帶標籤款） */
  .title-wrap > .title-inner .title-frame .title--section {
    padding: 20px 50px;
    font-size: clamp(24px, 3.5vw + 6px, 40px);
    /* max-width: 95%; */
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* 平板版：title-tag 調整 */
  .title-wrap > .title-inner .title-tag {
    max-width: 75%;
  }

  .title-wrap > .title-inner .title-tag img {
    max-height: 95px;
  }

  /* 平板版：title-inner 調整 */
  .title-wrap > .title-inner {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}

/* 中等平板尺寸（1025px - 1200px）- 適度調整 */
@media (min-width: 1025px) and (max-width: 1200px) {
  .title-wrap > .title-frame .title--section,
  .title-wrap > .title-inner .title-frame .title--section {
    /* padding: 8px 60px; */
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 820px) {
  /* Section4-5 手機版：隱藏共用曲線背景 */
  .section4-5-wrap {
    background-image: none;
  }

  /* Section5 手機版：隱藏右上角 #1 裝飾 */
  .section5::before {
    display: none;
  }

  /* 手機版標題樣式（無標籤款）- 最多兩行、彈性左右間距；overflow 僅用於內層，不裁切裝飾圖 */
  .title-wrap > .title-frame .title--section {
    font-size: var(--fs-title-md);
    border: 2px solid #64c4df;
    border-radius: 16px;
    /* background-color: #eff3fa; */
    background-image: 
      radial-gradient(circle, rgba(100, 196, 223, 0.15) 1px, transparent 1px),
      radial-gradient(circle, rgba(100, 196, 223, 0.1) 1px, transparent 1px);
    background-size: 16px 16px, 20px 20px;
    background-position: 0 0, 8px 8px;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(100, 196, 223, 0.3);
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px clamp(12px, 4vw, 28px);
    overflow: visible;
  }

  /* 手機版標題樣式（帶標籤款）- 最多兩行、彈性左右間距；overflow 僅用於內層，不裁切裝飾圖 */
  .title-wrap > .title-inner .title-frame .title--section {
    font-size: var(--fs-title-md);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px clamp(12px, 4vw, 28px);
    overflow: visible;
  }


  /* 客製化每個section的標題 */
  .section1 .title-wrap > .title-frame .title--section{
    padding: 10px 20vw;
  }

  .section2 .title-wrap > .title-frame .title--section{
    padding: 10px 8vw;
  }

  .section3 .title-wrap > .title-frame .title--section{
    padding: 10px 15vw;
    max-width: 100%;
  }

  .section4 .title-wrap > .title-inner .title-frame .title--section{
    padding: 10px 22vw;
  }


  /* 手機版：title-tag 固定於 title-frame 正上方，不隨標題斷行改變 */
  .title-wrap > .title-inner .title-frame {
    position: relative;
    padding-top: 0;
  }

  .title-wrap > .title-inner .title-tag {
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: -17px;
    transform: translateX(-50%);
    right: auto;
    top: auto;
  }

  /* 手機版：title-tag img 高度調整 */
  .title-wrap > .title-inner .title-tag img {
    max-height: 4em;
  }

  /* 手機版：內部虛線邊框效果（使用 title-frame 的偽元素） */
  .title-frame::before {
    transform: translate(43px, 7px);
    width: 90%;
  }

  /* 手機版：調整裝飾圖案位置和大小 */
  .title-wrap > .title-frame .title--section::before {
    left: -5%;
    top: 105%;
    width: 270px;
    height: 30px;
  }

  .title-wrap > .title-frame .title--section::after {
    right: -28px;
    top: 0;
    height: 20px;
    width: 66px;
  }

  /* 手機版：帶標籤款的裝飾圖案位置和大小 */
  .title-wrap > .title-inner .title-frame .title--section::before {
    left: -5% !important;
    top: 105% !important;
    width: 270px !important;
    height: 30px !important;
  }

  .title-wrap > .title-inner .title-frame .title--section::after {
    right: -28px !important;
    top: 0 !important;
    height: 20px !important;
    width: 66px !important;
  }

  .section5_showcase {
    background-size: 60px auto, 60px auto;
  }

  .section5_cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 20px 16px;
  }

  .product-link {
    padding: 8px 14px;
    font-size: 13px;
  }
  @media screen and (max-width: 480px) {
    .section5_card{
      height: 220px;
    }
  }

  .product_card {
    background-size: 60px auto, 60px auto;
  }

  /* Section6 手機版樣式：隱藏會擋住文字的六邊形/裝飾背景圖 */
  .section6 {
    padding: 32px 16px 40px;
    width: 100%;
    box-sizing: border-box;
    background-image: none;
    background-color: #EFF3FA;
  }

  .section6 .inner::before,
  .section6 .inner::after {
    display: none;
  }

  .section6 .inner {
    max-width: 100%;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .section6 .product_card {
    padding: 24px 16px 28px;
    width: 100%;
    box-sizing: border-box;
  }

  .section6_products {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 100%;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .section6_card {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .section6_card:nth-of-type(1),
  .section6_card:nth-of-type(2) {
    grid-column: auto;
  }

  .section6_products .product-link {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .desc {
    padding: 0 8px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Section8 手機版樣式：隱藏背景圖 */
  .section8 {
    padding: 32px 0 40px;
    width: 100%;
    box-sizing: border-box;
    background-image: none;
  }

  .section8_media {
    margin-top: 24px;
  }

  /* Section7 手機版：隱藏會擋住文字的六邊形/裝飾背景圖 */
  .section7 {
    padding: 32px 16px 40px;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
    background-image: none;
    background-color: #EFF3FA;
  }

  .section7 .inner {
    max-width: 100%;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .section7 .product_card {
    padding: 24px 16px 28px;
    width: 100%;
    box-sizing: border-box;
  }

  .section7_products {
    gap: 16px;
    width: 100%;
    max-width: 760px;
    padding: 0;
    box-sizing: border-box;
  }

  .section7_card-info {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  .title-frame::before {
    width: 90%;
    transform: translate(30px, 5px);
  }
}
@media (max-width: 480px) {
  .section5_cards{
    padding: 0;
  }
  .section5_showcase{
    padding: 34px 5px 35px;
  }
}

} /* @layer survey */

/* 跳至主要內容（無障礙／SEO，不影響版型） */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 99999;
  padding: 0.75rem 1rem;
  background: #0381C6;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Section3 區塊導覽語意化（nav 與 div 同為 block，不影響版型） */
.section3_nav-region {
  display: block;
}