/* =================================================================
   M r?vn?峹 w ee{?
   -----------------------------------------------------------------
   E ???w .m-shaped eA|vTxL?
   E Dee?Tw 1200pxB????m
   E w RWD]O / ^?
   E [\Gh  / p  /  / Ws / blockquote /  / M / ?
   ================================================================= */

/* ---- c餤r]D?uBζA?\?h^---- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Noto+Serif+TC:wght@700;900&display=swap');

/* =========================================================
   1. eP|?
   ========================================================= */
.m-shaped {
  /* ww mt ww */
  --ms-ink:          #20302b;   /* Dr */
  --ms-ink-soft:     #51625b;   /* nr / ? */
  --ms-primary:      #1d6b5b;   /* DG`Q]? E H E ^*/
  --ms-primary-dark: #154f43;
  --ms-primary-soft: #e9f3f0;   /* DL */
  --ms-accent:       #b8893b;   /* IGx]P^*/
  --ms-accent-dark:  #8a6420;
  --ms-accent-soft:  #fbf5e9;   /* xL */
  --ms-accent-line:  #efe1c6;
  --ms-bg:           #ffffff;
  --ms-soft:         #f5f7f6;   /* ?L */
  --ms-line:         #e3eae7;   /* ju */
  --ms-radius:       14px;
  --ms-shadow:       0 12px 30px -14px rgba(20, 60, 50, .22);

  max-width: 1200px;            /*  Dee */
  margin: 0 auto;               /*  ????m */
  padding: 28px 28px 72px;
  box-sizing: border-box;

  color: var(--ms-ink);
  background: var(--ms-bg);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
  font-size: clamp(16px, 0.6vw + 13.5px, 18px);
  line-height: 1.95;
  letter-spacing: .01em;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.m-shaped *,
.m-shaped *::before,
.m-shaped *::after { box-sizing: border-box; }

.m-shaped > :first-child { margin-top: 0; }

/* =========================================================
   2. D h2 / h3 / h4
   ========================================================= */
.m-shaped h2 {
  font-family: "Noto Serif TC", "Noto Sans TC", serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 1.6vw + 1rem, 1.7rem);
  line-height: 1.45;
  color: var(--ms-primary-dark);
  margin: 3em 0 1em;
  padding-bottom: .5em;
  border-bottom: 2px solid var(--ms-line);
}
.m-shaped h2::before {            /* DW誺uu */
  content: "";
  display: block;
  width: 58px;
  height: 5px;
  margin-bottom: .65em;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ms-primary), var(--ms-accent));
}

.m-shaped h3 {
  font-weight: 700;
  font-size: clamp(1.22rem, 0.7vw + 1rem, 1.45rem);
  line-height: 1.55;
  color: var(--ms-primary-dark);
  margin: 2.4em 0 .8em;
  padding-left: 16px;
  border-left: 5px solid var(--ms-primary);
}

.m-shaped h4 {
  font-weight: 700;
  font-size: clamp(1.1rem, 0.4vw + 1rem, 1.22rem);
  line-height: 1.5;
  color: var(--ms-accent-dark);
  margin: 2em 0 .7em;
  padding-left: 13px;
  border-left: 4px solid var(--ms-accent);
}

/* =========================================================
   3.  p /  strong
   ========================================================= */
.m-shaped p { margin: 0 0 1.3em; }

.m-shaped strong {
  font-weight: 700;
  color: var(--ms-primary-dark);
  /* x????uIAj SEO e?JI */
  background: linear-gradient(transparent 62%, rgba(184, 137, 59, .22) 62%);
  padding: 0 1px;
}

/* =========================================================
   4. Ws a
   ========================================================= */
.m-shaped a {
  color: var(--ms-primary);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(29, 107, 91, .35);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.m-shaped a:hover {
  color: var(--ms-primary-dark);
  border-bottom-color: var(--ms-primary);
  background-color: var(--ms-primary-soft);
}
/* 餺sG?KIPsu[ */
.m-shaped strong a { background: none; }

/* =========================================================
   5. ? img P? p.p-quote
   ========================================================= */
.m-shaped img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--ms-radius);
}
.m-shaped p:has(img),
.m-shaped .table-title { text-align: center; margin-bottom: .55em; }

.m-shaped p img,
.m-shaped .table-title img { box-shadow: var(--ms-shadow); }

/* ?U軡r */
.m-shaped .p-quote {
  margin: 0 auto 2.6em;
  text-align: center;
  font-size: .9em;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ms-ink-soft);
}
.m-shaped .p-quote::before {
  content: "\25B2";
  margin-right: .4em;
  color: var(--ms-accent);
}

/* s]?]p? CTA^GuB[JaB_?G */
.m-shaped a:has(img) {
  display: inline-block;
  border: none;
}
.m-shaped a:has(img):hover { background: none; }
.m-shaped a img { transition: transform .3s ease, box-shadow .3s ease; }
.m-shaped a:has(img):hover img {
  transform: translateY(-3px);
  box-shadow: var(--ms-shadow);
}

/* =========================================================
   6. M ul / ol
   ========================================================= */
.m-shaped ul,
.m-shaped ol {
  margin: 0 0 1.6em;
  padding: 1.2em 1.5em 1.2em 1.6em;
  list-style: none;
  background: var(--ms-soft);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
}
.m-shaped li { margin: 0 0 .55em; line-height: 1.8; }
.m-shaped li:last-child { margin-bottom: 0; }

/* L?MGI? */
.m-shaped ul li {
  position: relative;
  padding-left: 1.45em;
}
.m-shaped ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .68em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ms-primary);
}

/* ?MGΧ? */
.m-shaped ol {
  counter-reset: ms-counter;
  padding-left: 1.6em;
}
.m-shaped ol li {
  position: relative;
  padding-left: 2.5em;
  counter-increment: ms-counter;
  min-height: 1.7em;
}
.m-shaped ol li::before {
  content: counter(ms-counter);
  position: absolute;
  left: 0;
  top: .15em;
  width: 1.7em;
  height: 1.7em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ms-primary);
  color: #fff;
  font-size: .82em;
  font-weight: 700;
}

/* =========================================================
   7. \? blockquote
   ========================================================= */
.m-shaped blockquote {
  margin: 1.7em 0 2.2em;
  padding: 1.1em 1.3em 1.1em 1.4em;
  background: var(--ms-accent-soft);
  border: 1px solid var(--ms-accent-line);
  border-left: 5px solid var(--ms-accent);
  border-radius: 10px;
}
.m-shaped blockquote p { margin: 0; font-size: .98em; }
.m-shaped blockquote strong { background: none; color: var(--ms-ink); }
.m-shaped blockquote a {
  color: var(--ms-accent-dark);
  font-weight: 700;
  border-bottom-color: rgba(184, 137, 59, .4);
}
.m-shaped blockquote a:hover {
  color: #6f4f17;
  background-color: #f6ead2;
  border-bottom-color: var(--ms-accent);
}

/* =========================================================
   8.  #content-table / table
   ========================================================= */
.m-shaped #content-table {
  margin: 1.6em 0 2.4em;
  overflow-x: auto;                 /* iV */
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
}
.m-shaped table {
  width: 100% !important;
  min-width: 560px;                 /* ?L */
  height: auto !important;          /* ?\ inline height */
  border-collapse: collapse;
  background: var(--ms-bg);
  font-size: .96em;
}
.m-shaped table td {
  padding: 14px 16px;
  border: 1px solid var(--ms-line);
  vertical-align: middle;
  line-height: 1.7;
}

/* Y]?@C^*/
.m-shaped #content-table tr:first-child td {
  background: linear-gradient(180deg, var(--ms-primary), var(--ms-primary-dark));
  color: #fff;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  border-color: rgba(255, 255, 255, .18);
}
.m-shaped #content-table tr:first-child td a { color: #fff; }

/* eC */
.m-shaped #content-table tr:not(:first-child):nth-child(even) td { background: var(--ms-soft); }

/* ?@] / BJ ^*/
.m-shaped #content-table tr:not(:first-child) td:first-child {
  background: var(--ms-primary-soft);
  color: var(--ms-primary-dark)!important;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* e]u?l class^*/
.m-shaped .major-item-10 { width: 10%; }
.m-shaped .major-item-20 { width: 20%; }
.m-shaped .major-item-40 { width: 35%; }
.m-shaped .item-20 { width: 20%; text-align: center; }   /* uem */

/* =========================================================
   9. RWD w OP
   ========================================================= */
@media (max-width: 992px) {
  .m-shaped { padding: 24px 22px 60px; }
}

@media (max-width: 768px) {
  .m-shaped { padding: 18px 16px 48px; line-height: 1.88; }
  .m-shaped h2 { margin-top: 2.4em; }
  .m-shaped h3 { margin-top: 1.9em; }
  .m-shaped h4 { margin-top: 1.6em; }
  .m-shaped ul,
  .m-shaped ol { padding: 1.05em 1.15em 1.05em 1.25em; }
  .m-shaped ol li { padding-left: 2.3em; }
  .m-shaped blockquote { padding: 1em 1.05em; }
  .m-shaped table { font-size: .92em; }
  .m-shaped table td { padding: 11px 12px; }
}

@media (max-width: 480px) {
  .m-shaped { padding: 14px 13px 40px; }
  .m-shaped .p-quote { margin-bottom: 2.1em; }
  .m-shaped table { min-width: 480px; }
}

/* =================================================================
   e??]A / ?s /  / ? / v^
   -----------------------------------------------------------------
   E u m-shaped.css P@M]ptΡ]m??BrBh2 ?^
   E C??H <section class="ms-section"> AiW?m
   E ?DDuθ? h2 ?]uu?u^
   E Dee 1200px mAw RWD]321 ^
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Noto+Serif+TC:wght@700;900&display=swap');

/* =========================================================
   1. ?eP]p??]P m-shaped.css @P^
   ========================================================= */
.ms-section {
  --ms-ink:          #20302b;
  --ms-ink-soft:     #51625b;
  --ms-muted:        #8a958f;   /* s/?nT */
  --ms-primary:      #1d6b5b;
  --ms-primary-dark: #154f43;
  --ms-primary-soft: #e9f3f0;
  --ms-accent:       #b8893b;
  --ms-bg:           #ffffff;
  --ms-soft:         #eef3f1;
  --ms-line:         #e3eae7;
  --ms-radius:       14px;
  --ms-shadow:       0 12px 30px -14px rgba(20, 60, 50, .22);
  --ms-shadow-hover: 0 20px 44px -16px rgba(20, 60, 50, .30);
  --ms-media:        16 / 10;   /* ? */

  max-width: 1200px;            /*  Dee */
  margin: 56px auto;            /*  ????m */
  box-sizing: border-box;
  color: var(--ms-ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
  font-size: clamp(15px, 0.5vw + 13px, 16.5px);
  line-height: 1.85;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
.ms-section *,
.ms-section *::before,
.ms-section *::after { box-sizing: border-box; }

/* =========================================================
   2. ?DD]uθ? h2 ?^
   ========================================================= */
.ms-section h2 {
  font-family: "Noto Serif TC", "Noto Sans TC", serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2.05rem);
  line-height: 1.45;
  color: var(--ms-primary-dark);
  margin: 0 0 1.4em;
  padding-bottom: .5em;
  border-bottom: 2px solid var(--ms-line);
}
.ms-section h2::before {
  content: "";
  display: block;
  width: 58px;
  height: 5px;
  margin-bottom: .65em;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ms-primary), var(--ms-accent));
}

/* =========================================================
   3. du]3  2  1 ^
   ========================================================= */
.ms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* =========================================================
   4. d
   ========================================================= */
.ms-card {
  display: flex;
  flex-direction: column;
  background: var(--ms-bg);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  overflow: hidden;
  box-shadow: var(--ms-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ms-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ms-shadow-hover);
  border-color: #cfe0da;
}

/* ? */
.ms-card__media {
  position: relative;
  aspect-ratio: var(--ms-media);
  background: linear-gradient(135deg, var(--ms-soft), #dfeae6);
  overflow: hidden;
}
.ms-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  font-size: .8rem;          /* ?J alt rjp */
  color: var(--ms-ink-soft);
  transition: transform .4s ease;
}
.ms-card:hover .ms-card__media img { transform: scale(1.04); }

/* e */
.ms-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 22px;
}

/*  */
.ms-card__date {
  display: flex;
  align-items: center;
  gap: .4em;
  margin-bottom: .7em;
  font-size: .88em;
  font-weight: 500;
  color: var(--ms-muted);
}

/* D */
.ms-card__title {
  margin: 0 0 .6em;
  font-size: clamp(1.05rem, 0.4vw + .95rem, 1.18rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--ms-ink);
}
.ms-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.ms-card__title a:hover { color: var(--ms-primary); }

/* yz]?h 3 AOdFp??i line-clamp^*/
.ms-card__desc {
  margin: 0 0 1em;
  color: var(--ms-ink-soft);
  font-size:15px ;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kd / ? */
.ms-card__note {
  margin: 0 0 .8em;
  font-size: .8em;
  line-height: 1.6;
  color: var(--ms-muted);
}

/* TC] / s /  / ??s^*/
.ms-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-bottom: 1.1em;
  font-size: .85em;
  color: var(--ms-muted);
}
.ms-meta { display: inline-flex; align-items: center; gap: .35em;font-size: 12px; }
.ms-meta a { color: var(--ms-primary); text-decoration: none; }
.ms-meta a:hover { text-decoration: underline; }
.ms-meta--id { margin-left: auto; }      /* ??sak */

/* p? */
.ms-ico {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  color: var(--ms-primary);
}
.ms-meta--plain .ms-ico { color: var(--ms-muted); }

/* =========================================================
   5. s
   ========================================================= */
.ms-btn {
  --btn-bg: var(--ms-primary);
  --btn-bg-hover: var(--ms-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  padding: .72em 1.6em;
  border: none;
  border-radius: 999px;
  background: var(--btn-bg);
  color: #fff;
  font-weight: 700;
  font-size: .95em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ms-btn:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--ms-shadow);
}
.ms-btn--block { width: 100%; border-radius: 10px; }
.ms-btn--lg { padding: .9em 2.6em; font-size: 1.05em; }

/* sTwbd?????A?d? */
.ms-card__body .ms-btn { margin-top: auto; }

/* ushvms */
.ms-more { margin-top: 36px; text-align: center; }

/* =========================================================
   6. v
   ========================================================= */
.ms-card__media--video::before {     /* vY?[@hHtn */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 35, 30, .18);
  z-index: 1;
}
.ms-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ms-primary-dark);
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transition: transform .25s ease, background-color .25s ease;
}
.ms-play svg { width: 26px; height: 26px; margin-left: 3px; }
.ms-card:hover .ms-play { transform: scale(1.1); background: #fff; }

/* =========================================================
   7. ??
   ========================================================= */
/* A?GDPemBsnsB? */
.ms-section--service { --ms-media: 4 / 3; }
.ms-section--service .ms-card__body { align-items: center; text-align: center; }
.ms-section--service .ms-card__btn { margin-top: auto; }

/*  / vGsηxI]PL??j^*/
.ms-section--testimonial .ms-btn,
.ms-section--video .ms-btn {
  --btn-bg: var(--ms-primary);
  --btn-bg-hover: #8a6420;
}

/* =========================================================
   8. RWD
   ========================================================= */
@media (max-width: 992px) {
  .ms-section { margin: 44px auto; padding: 0 22px; }
  .ms-grid { gap: 22px; }
}

@media (max-width: 768px) {
  .ms-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .ms-section { margin: 36px auto; padding: 0 0px; }
  .ms-grid { grid-template-columns: 1fr; gap: 20px; }
  .ms-card__body { padding: 18px 18px 20px; }
  .ms-btn--lg { width: 100%; }
}

/* =================================================================
   ★★★ 五大區塊：版面鎖定 + 修正補丁（最終版）★★★
   -----------------------------------------------------------------
   目的：強制「圖／影片在最上方滿版 → 標題 → 短描述 → 其餘資訊」垂直堆疊，
        桌機與手機排法一致；並壓過站台主題對 img/div 的干擾。
   範圍：全部限定 .ms-section（這五個區塊），不影響頁面其他任何區塊。
   ================================================================= */

/* ---- 1. 格線：桌機 3 欄、平板 2 欄、手機 1 欄 ---- */
.m-shaped .ms-section .ms-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  align-items: stretch !important;
}

/* ---- 2. 卡片：永遠直向堆疊（圖在上、內容在下），禁止被改成橫向/浮動 ---- */
.m-shaped .ms-section .ms-card {
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

/* ---- 3. 圖／影片區：固定最上方、滿版、維持比例 ---- */
.m-shaped .ms-section .ms-card__media {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  order: -1 !important;                         /* 保證在最上方 */
  aspect-ratio: var(--ms-media) !important;
  overflow: hidden !important;
  border: none !important;
}
.m-shaped .ms-section .ms-card__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---- 4. 內容區：在圖片下方，靠左垂直堆疊 ---- */
.m-shaped .ms-section .ms-card__body {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  text-align: left !important;
  align-items: stretch !important;
}
.m-shaped .ms-section .ms-card__title { text-align: left !important; }
/* 熱門服務區也統一改成靠左（與其他區塊一致，不再置中）*/
.m-shaped .ms-section--service .ms-card__body {
  align-items: stretch !important;
  text-align: left !important;
}

/* ---- 5. 按鈕：文字白色、無底線（只作用區塊內，不動其他綠色 a）---- */
.m-shaped .ms-section a.ms-btn {
  color: #fff !important;
  border-bottom: none !important;
}

.m-shaped .ms-section a.ms-btn:hover,
.m-shaped .ms-section a.ms-btn:focus {
  color: #fff !important;
  border-bottom: none !important;
  background-color: #154f43!important;
}

/* ---- 6. 卡片標題 h3：移除左側色條，底線只在 hover 出現 ---- */
.m-shaped .ms-section h3.ms-card__title {
  margin: 0 0 .6em !important;
  padding-left: 0 !important;
  border-left: none !important;
  color: var(--ms-ink) !important;
  line-height:0 !important;
}
.m-shaped .ms-section h3.ms-card__title a {
  color: inherit !important;
  background: none !important;
  border-bottom: 1.5px solid transparent !important;
}
.m-shaped .ms-section h3.ms-card__title a:hover {
  color: var(--ms-primary) !important;
  background: none !important;
  border-bottom-color: currentColor !important;
}
.m-shaped .ms-section .ms-meta a { border-bottom: none !important; }

/* ---- 7. 圖示（後台會過濾 <svg>，故改用 CSS 背景圖呈現）---- */
.m-shaped .ms-section .ms-card__date::before,
.m-shaped .ms-section .ms-meta--tag::before,
.m-shaped .ms-section .ms-meta--views::before,
.m-shaped .ms-section .ms-meta--shares::before {
  content: "";
  width: 1.05em;
  height: 1.05em;
  flex: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.m-shaped .ms-section .ms-card__date::before   { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a958f%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%203v3M17%203v3M4%208h16%27/%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%2716%27%20height%3D%2716%27%20rx%3D%272%27/%3E%3C/svg%3E"); }
.m-shaped .ms-section .ms-meta--tag::before    { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231d6b5b%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2011V5a2%202%200%200%201%202-2h6l9%209-8%208-9-9Z%27/%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%277.5%27%20r%3D%271.4%27%20fill%3D%27%231d6b5b%27%20stroke%3D%27none%27/%3E%3C/svg%3E"); }
.m-shaped .ms-section .ms-meta--views::before  { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a958f%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207-10-7-10-7Z%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27/%3E%3C/svg%3E"); }
.m-shaped .ms-section .ms-meta--shares::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a958f%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%276%27%20cy%3D%2712%27%20r%3D%272.4%27/%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%276%27%20r%3D%272.4%27/%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2718%27%20r%3D%272.4%27/%3E%3Cpath%20d%3D%27m8.2%2010.8%207.6-3.6M8.2%2013.2l7.6%203.6%27/%3E%3C/svg%3E"); }

/* ---- 8. 影片播放鍵（取代被過濾的 <svg>）---- */
.m-shaped .ms-section .ms-card__media--video::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .92);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M8%205v14l11-7z%27%20fill%3D%27%23154f43%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 54% center;
  background-size: 26px 26px;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transition: transform .25s ease, background-color .25s ease;
}
.m-shaped .ms-section .ms-card:hover .ms-card__media--video::after {
  transform: scale(1.1);
  background-color: #fff;
}

/* ---- 9. RWD ---- */
@media (max-width: 768px) {
  .m-shaped .ms-section .ms-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  .m-shaped .ms-section .ms-grid { grid-template-columns: 1fr !important; }
}


/* ---- 10. 卡片外觀：明確的卡片框（白底、圓角、邊框、陰影）---- */
/*    站台背景為白色，故加強邊框與陰影，並以 !important 壓過主題把卡片框清掉的設定 */
.m-shaped .ms-section .ms-card {
  background: #ffffff !important;
  border: 1px solid #e2e8e4 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(20, 60, 50, .07),
              0 14px 30px -12px rgba(20, 60, 50, .22) !important;
}
.m-shaped .ms-section .ms-card:hover {
  border-color: #cfe0da !important;
  box-shadow: 0 2px 6px rgba(20, 60, 50, .09),
              0 22px 44px -14px rgba(20, 60, 50, .30) !important;
}
.m-shaped .ms-section .ms-card__body {
  padding: 20px 20px 24px !important;
  background: #ffffff !important;
}

/* =================================================================
   文章目錄（anchor-box / anchor-list）─ 深綠/暖金風格，含 RWD + 平滑收合
   -----------------------------------------------------------------
   • 箭頭寫在 HTML：<span class="anchor-arrow">▼</span>
   • 收合動畫由 anchor-toggle.js 控制（高度/透明度平滑過渡）。
   • 未載入 JS 時，目錄完整顯示、箭頭朝上，不影響閱讀。
   ================================================================= */

/* 標題列 */
.m-shaped .anchor-box .anchor-title {
  margin: 1.9em 0 0 !important;
  padding: 14px 18px 14px 20px;
  display: flex;
  align-items: center;
  gap: .55em;
  background: linear-gradient(135deg, var(--ms-primary, #1d6b5b), var(--ms-primary-dark, #154f43));
  color: #fff;
  font-weight: 700;
  font-size: 1.02em;
  letter-spacing: .02em;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 10px 24px -14px rgba(20, 60, 50, .35);
  cursor: pointer;
  user-select: none;
  transition: border-radius .25s ease;
}
.m-shaped .anchor-box .anchor-title::before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  flex: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M9%206h11M9%2012h11M9%2018h11%27/%3E%3Ccircle%20cx%3D%274.5%27%20cy%3D%276%27%20r%3D%271.2%27%20fill%3D%27%23fff%27%20stroke%3D%27none%27/%3E%3Ccircle%20cx%3D%274.5%27%20cy%3D%2712%27%20r%3D%271.2%27%20fill%3D%27%23fff%27%20stroke%3D%27none%27/%3E%3Ccircle%20cx%3D%274.5%27%20cy%3D%2718%27%20r%3D%271.2%27%20fill%3D%27%23fff%27%20stroke%3D%27none%27/%3E%3C/svg%3E");
}

/* 右側收合箭頭 */
.m-shaped .anchor-box .anchor-arrow {
  margin-left: auto;
  flex: none;
  display: inline-block;
  font-size: .72em;
  line-height: 1;
  color: #fff;
  transform: rotate(180deg);              /* 展開時朝上 */
  transition: transform .3s ease;
}

/* 清單容器（覆蓋文章 ol；並加上平滑過渡）*/
.m-shaped .anchor-box ol.anchor-list {
  margin: 0 0 2.2em !important;
  padding: 10px 18px 14px !important;
  list-style: none !important;
  background: var(--ms-bg, #ffffff) !important;
  border: 1px solid var(--ms-line, #e2e8e4) !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px !important;
  counter-reset: anchor;
  column-count: 2;
  column-gap: 30px;
  overflow: hidden;
  /* 平滑收合：高度、內距、透明度一起過渡 */
  transition: max-height .42s ease, opacity .3s ease,
              padding-top .42s ease, padding-bottom .42s ease;
}
.m-shaped .anchor-box ol.anchor-list > li {
  counter-increment: anchor;
  break-inside: avoid;
  margin: 0 !important;
  padding: 0 !important;
}
.m-shaped .anchor-box ol.anchor-list > li::before { content: none !important; }

/* 連結列 */
.m-shaped .anchor-box ol.anchor-list a {
  display: flex;
  align-items: flex-start;
  gap: .6em;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--ms-ink, #20302b) !important;
  font-weight: 500;
  text-decoration: none;
  border-bottom: none !important;
  background: none;
  line-height: 1.55;
  transition: background-color .18s ease, color .18s ease;
}
.m-shaped .anchor-box ol.anchor-list a::before {
  content: counter(anchor);
  flex: none;
  width: 1.65em;
  height: 1.65em;
  margin-top: .12em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--ms-primary-soft, #e9f3f0);
  color: var(--ms-primary-dark, #154f43);
  font-size: .8em;
  font-weight: 700;
  transition: background-color .18s ease, color .18s ease;
}
.m-shaped .anchor-box ol.anchor-list a:hover {
  background: var(--ms-primary-soft, #e9f3f0) !important;
  color: var(--ms-primary-dark, #154f43) !important;
}
.m-shaped .anchor-box ol.anchor-list a:hover::before {
  background: var(--ms-primary, #1d6b5b);
  color: #fff;
}

/* 收合狀態：箭頭朝下、標題列獨立成完整圓角（清單高度由 JS 控制）*/
.m-shaped .anchor-box.is-collapsed .anchor-arrow { transform: rotate(0deg); }
.m-shaped .anchor-box.is-collapsed .anchor-title { border-radius: 14px; }

/* RWD：手機改單欄 */
@media (max-width: 640px) {
  .m-shaped .anchor-box ol.anchor-list { column-count: 1; padding: 8px 12px 12px !important; }
  .m-shaped .anchor-box .anchor-title { padding: 12px 16px; font-size: .98em; }
}

/* =================================================================
   圖卡比例修正：依各區塊圖檔真實比例設框，不裁切、不留白、維持 RWD
   服務 700×490=10/7  見證 600×315=40/21  文章 600×315=40/21  案例 700×700=1/1
   ================================================================= */

/* 1) 每區塊套用該批圖的真實比例（變數會自動被 .ms-card__media 的 aspect-ratio 取用） */
.m-shaped .ms-section--service     { --ms-media: 700 / 490; }   /* 10 : 7  */
.m-shaped .ms-section--testimonial { --ms-media: 600 / 315; }   /* 40 : 21 */
.m-shaped .ms-section--knowledge   { --ms-media: 600 / 315; }   /* 40 : 21 */
.m-shaped .ms-section--case        { --ms-media: 700 / 700; }   /* 1 : 1   */

/* 2) 框比例＝圖比例 → cover 不會裁到內容，也不會留白 */
.m-shaped .ms-section .ms-card__media {
  aspect-ratio: var(--ms-media) !important;
  overflow: hidden !important;
  background: #f5f7f6 !important;        /* 萬一某張圖尺寸略有出入時的底色，正常不會看到 */
}
.m-shaped .ms-section .ms-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* =================================================================
   影片卡修正：YouTube 播放器比例 + 標題重疊
   ================================================================= */

/* (A) 標題重疊 ── 原本 line-height:0 讓換行標題疊在一起，改回正常行高 */
.m-shaped .ms-section h3.ms-card__title {
  line-height: 1.5 !important;
}

/* (B) 影片框 ── YouTube 原生 16:9，與卡片同寬、置頂、上緣圓角、不裁切 */
.m-shaped .ms-section--video .video-container {
  position: relative !important;
  order: -1 !important;                     /* 置於卡片最上方 */
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  border-radius: 14px 14px 0 0 !important;  /* 對齊卡片上方圓角 */
}

/* (C) 播放器本體 / 點擊後注入的 iframe / 縮圖 ── 全部填滿整個框 */
.m-shaped .ms-section--video .video-container .youtube-player {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;                    /* 清掉部分腳本自帶的 padding-bottom 撐高 */
  margin: 0 !important;
  background-size: cover !important;
  background-position: center !important;
}
.m-shaped .ms-section--video .video-container iframe,
.m-shaped .ms-section--video .video-container .youtube-player > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  object-fit: cover !important;
}