/* =========================================================
   mod_custommenu － 水平 / 垂直、多層子選單
   顏色由模組參數以 CSS 變數注入，以下為預設值
   ========================================================= */
.cm {
  --cm-bg: #24445c;
  --cm-color: #ffffff;
  --cm-hover-bg: #315a78;
  --cm-hover-color: #ffffff;
  --cm-sub-bg: #ffffff;
  --cm-sub-color: #22313f;
  --cm-sub-hover-bg: #eaf1f5;
  --cm-accent: #e0b84c;
  --cm-radius: 6px;
  --cm-indent: 0px;
  --cm-speed: .2s;

  position: relative;
  box-sizing: border-box;
  background: var(--cm-bg);
  color: var(--cm-color);
  border-radius: var(--cm-radius);
  font-size: 1rem;
  line-height: 1.4;
}

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

.cm ul { list-style: none; margin: 0; padding: 0; }
.cm__item { position: relative; margin: 0; }
.cm__row {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  transition: background-color var(--cm-speed) ease, color var(--cm-speed) ease, box-shadow var(--cm-speed) ease;
}

/* ---------- 連結 / 標題 / 箭頭按鈕 ---------- */
.cm__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .75em 1em .75em calc(1em + var(--cm-indent));
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cm__link:hover,
.cm__link:focus { color: inherit; text-decoration: none; }
.cm__separator,
.cm__heading:not(button) { cursor: default; opacity: .75; }
.cm__heading .cm__chev { margin-left: auto; }
/* 項目圖片 */
.cm__link img,
.cm__img {
  display: block;
  flex: 0 0 auto;
  height: var(--cm-img-h, 1.4em);
  width: auto;
  max-width: none;
  border-radius: 3px;
  object-fit: contain;
}

/* Font Awesome 圖示 */
.cm__icon {
  flex: 0 0 auto;
  width: 1.2em;
  text-align: center;
  line-height: 1;
  color: var(--cm-icon-color, currentColor);
  transition: color var(--cm-speed) ease, transform var(--cm-speed) ease;
}
.cm .cm__icon::before { display: inline-block; }
/* 動畫圖示（SVG）：大小跟著文字，顏色跟著文字或圖示顏色設定 */
.cm .cm__aicon { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; line-height: 1; }
.cm .cm__aicon svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Font Awesome 5 Free：固定字型與粗細，避免被模板的 font-family 覆蓋
   （同時列出 6 版字型名稱，網站載入的是 6 版時也能顯示） */
.cm--fa5 .cm__icon.fas,
.cm--fa5 .cm__icon.far,
.cm--fa5 .cm__icon.fab {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.cm--fa5 .cm__icon.fas { font-weight: 900; }
.cm--fa5 .cm__icon.far { font-weight: 400; }
.cm--fa5 .cm__icon.fab { font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands"; font-weight: 400; }
.cm__row:hover .cm__icon { transform: scale(1.12); }

.cm__caret {
  flex: 0 0 auto;
  width: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

/* 箭頭：預設朝下 */
.cm__chev {
  display: inline-block;
  width: .45em;
  height: .45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.12em) rotate(45deg);
  transition: transform var(--cm-speed) ease;
  flex: 0 0 auto;
}

.cm a:focus-visible,
.cm button:focus-visible {
  outline: 2px solid var(--cm-accent);
  outline-offset: -2px;
}

/* ---------- 第一層 ---------- */
/* 滑過：換背景色（「背景填滿」效果改由 ::before 滑入，所以這裡排除） */
.cm:not(.cm-fx-fill) .cm__level-1 > .cm__item > .cm__row:hover,
.cm:not(.cm-fx-fill) .cm__level-1 > .cm__item.is-open > .cm__row,
.cm--hover:not(.cm--mobile):not(.cm-fx-fill) .cm__level-1 > .cm__item:hover > .cm__row,
.cm--mobile .cm__level-1 > .cm__item > .cm__row:hover,
.cm--mobile .cm__level-1 > .cm__item.is-open > .cm__row {
  background: var(--cm-hover-bg);
  color: var(--cm-hover-color);
}
.cm--horizontal:not(.cm--mobile) .cm__level-1 > .cm__item:first-child > .cm__row { border-radius: var(--cm-radius) 0 0 var(--cm-radius); }
.cm--horizontal:not(.cm--mobile) .cm__level-1 > .cm__item:last-child > .cm__row { border-radius: 0 var(--cm-radius) var(--cm-radius) 0; }

/* 目前所在的主選單：以強調色標示 */
.cm--horizontal:not(.cm--mobile) .cm__level-1 > .cm__item.active > .cm__row { --cm-e2c: inset 0 -3px 0 var(--cm-accent); }
.cm--vertical .cm__level-1 > .cm__item.active > .cm__row,
.cm--mobile .cm__level-1 > .cm__item.active > .cm__row { --cm-e2c: inset 3px 0 0 var(--cm-accent); }

/* ---------- 水平 ---------- */
.cm--horizontal:not(.cm--mobile) > .cm__level-1 { display: flex; flex-wrap: wrap; }
.cm--horizontal:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row .cm__link { white-space: nowrap; }
.cm--align-center:not(.cm--mobile) > .cm__level-1 { justify-content: center; }
.cm--align-right:not(.cm--mobile) > .cm__level-1  { justify-content: flex-end; }
.cm--align-justify:not(.cm--mobile) > .cm__level-1 > .cm__item { flex: 1 1 0; }
.cm--align-justify:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row .cm__link { justify-content: center; }

/* ---------- 彈出式子選單（水平、垂直 flyout） ---------- */
.cm--popup:not(.cm--mobile) .cm__sub {
  --cm-indent: 0px;
  position: absolute;
  z-index: 1000;
  min-width: 13em;
  padding: .35em 0;
  background: var(--cm-sub-bg);
  color: var(--cm-sub-color);
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-e3);
  opacity: 0;
  visibility: hidden;
  /* 出現前的位置，依方向與效果由變數決定 */
  --cm-from-slide: translateY(8px);
  --cm-from-drop: scaleY(.6);
  --cm-from: var(--cm-from-slide);
  transform-origin: top center;
  transform: var(--cm-from);
  transition: opacity var(--cm-speed) ease, transform var(--cm-speed) cubic-bezier(.2, .8, .3, 1), visibility 0s linear var(--cm-speed), box-shadow var(--cm-speed) ease;
}

/* 水平：第二層在下方 */
.cm--horizontal.cm--popup:not(.cm--mobile) .cm__level-2 { top: 100%; left: 0; }
.cm--horizontal.cm--popup:not(.cm--mobile) .cm__level-2.cm__sub--left { left: auto; right: 0; }

/* 垂直第二層、以及所有第三層以後：在右側 */
.cm--vertical.cm--popup:not(.cm--mobile) .cm__level-2,
.cm--popup:not(.cm--mobile) .cm__sub .cm__sub {
  top: -.35em; left: 100%;
  --cm-from-slide: translateX(8px);
  --cm-from-drop: scaleX(.6);
  transform-origin: left top;
}
.cm--vertical.cm--popup:not(.cm--mobile) .cm__level-2.cm__sub--left,
.cm--popup:not(.cm--mobile) .cm__sub .cm__sub.cm__sub--left {
  left: auto; right: 100%;
  --cm-from-slide: translateX(-8px);
  transform-origin: right top;
}

/* 顯示 */
.cm--popup:not(.cm--mobile) .cm__item.is-open > .cm__sub,
.cm--popup.cm--hover:not(.cm--mobile) .cm__item:hover > .cm__sub,
.cm--popup.cm--hover:not(.cm--mobile) .cm__item:focus-within > .cm__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* 子選單項目 */
.cm--popup:not(.cm--mobile):not(.cm-subfx-slide) .cm__sub .cm__row:hover,
.cm--popup:not(.cm--mobile):not(.cm-subfx-slide) .cm__sub .cm__item.is-open > .cm__row,
.cm--popup.cm--hover:not(.cm--mobile):not(.cm-subfx-slide) .cm__sub .cm__item:hover > .cm__row { background: var(--cm-sub-hover-bg); }
.cm--popup:not(.cm--mobile) .cm__sub .cm__link { padding-top: .6em; padding-bottom: .6em; }
.cm--popup:not(.cm--mobile) .cm__sub .cm__item.current > .cm__row { --cm-e4c: inset 3px 0 0 var(--cm-accent); font-weight: 600; }

/* 箭頭方向：彈出到右側的一律朝右 */
.cm--popup:not(.cm--mobile) .cm__sub .cm__chev,
.cm--vertical.cm--popup:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row .cm__chev { transform: rotate(-45deg); }
.cm--horizontal.cm--popup:not(.cm--mobile) .cm__level-1 > .cm__item.is-open > .cm__row .cm__chev { transform: translateY(.12em) rotate(225deg); }

/* ---------- 內嵌展開（垂直手風琴、手機版） ---------- */
.cm--accordion .cm__sub,
.cm--mobile .cm__sub {
  display: none;
  background: rgba(0, 0, 0, .14);
}
.cm--accordion .cm__item.is-open > .cm__sub,
.cm--mobile .cm__item.is-open > .cm__sub { display: block; }

.cm--accordion .cm__sub .cm__row:hover,
.cm--mobile .cm__sub .cm__row:hover { background: var(--cm-hover-bg); color: var(--cm-hover-color); }
.cm--accordion .cm__item.current > .cm__row,
.cm--mobile .cm__item.current > .cm__row { font-weight: 600; }
.cm--accordion .cm__item.is-open > .cm__row .cm__chev,
.cm--mobile .cm__item.is-open > .cm__row .cm__chev { transform: translateY(.12em) rotate(225deg); }

/* 逐層縮排 */
.cm__level-2 { --cm-indent: 1em; }
.cm__level-3 { --cm-indent: 2em; }
.cm__level-4 { --cm-indent: 3em; }
.cm__level-5 { --cm-indent: 4em; }

/* 垂直時項目之間細線 */
.cm--vertical .cm__level-1 > .cm__item + .cm__item,
.cm--mobile .cm__level-1 > .cm__item + .cm__item { border-top: 1px solid rgba(255, 255, 255, .08); }
.cm--vertical .cm__level-1 > .cm__item:first-child > .cm__row { border-radius: var(--cm-radius) var(--cm-radius) 0 0; }
.cm--vertical .cm__level-1 > .cm__item:last-child > .cm__row { border-radius: 0 0 var(--cm-radius) var(--cm-radius); }

/* ---------- 手機版漢堡按鈕 ---------- */
.cm__toggle {
  display: none;
  width: 100%;
  align-items: center;
  gap: .7em;
  padding: .8em 1em;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.cm__burger { position: relative; width: 1.2em; height: .9em; }
.cm__burger::before,
.cm__burger::after,
.cm__burger span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.cm__burger::before { top: 0; }
.cm__burger span { top: 50%; margin-top: -1px; }
.cm__burger::after { bottom: 0; }
.cm.is-expanded .cm__burger::before { transform: translateY(calc(.45em - 1px)) rotate(45deg); }
.cm.is-expanded .cm__burger span { opacity: 0; }
.cm.is-expanded .cm__burger::after { transform: translateY(calc(-.45em + 1px)) rotate(-45deg); }

.cm--mobile .cm__toggle { display: flex; }
.cm--mobile > .cm__level-1 { display: none; border-top: 1px solid rgba(255, 255, 255, .12); }
.cm--mobile.is-expanded > .cm__level-1 { display: block; }
.cm--mobile .cm__level-1 > .cm__item > .cm__row { border-radius: 0 !important; }
.cm--mobile .cm__caret { width: 3em; }

/* =========================================================
   滑入效果
   ========================================================= */

/* ---------- 主選單：底線滑入（水平）／色條滑入（垂直） ---------- */
.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: var(--cm-accent);
  transition: transform var(--cm-speed) cubic-bezier(.2, .8, .3, 1);
}
.cm--horizontal.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::after {
  left: .9em; right: .9em; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
}
.cm--vertical.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::after {
  left: 0; top: .45em; bottom: .45em; width: 3px;
  border-radius: 0 3px 3px 0;
  transform: scaleY(0);
}
.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row:hover::after,
.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item.is-open > .cm__row::after,
.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item.active > .cm__row::after,
.cm-fx-underline.cm--hover:not(.cm--mobile) .cm__level-1 > .cm__item:hover > .cm__row::after { transform: none; }
/* 底線已標示目前位置，不再疊加色條 */
.cm.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item.active > .cm__row { --cm-e2c: 0 0 #0000; }

/* ---------- 主選單：背景填滿（水平由下往上、垂直由左往右） ---------- */
.cm-fx-fill:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--cm-hover-bg);
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--cm-speed) cubic-bezier(.2, .8, .3, 1);
}
.cm--vertical.cm-fx-fill:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::before {
  transform: scaleX(0);
  transform-origin: left;
}
.cm-fx-fill:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row:hover::before,
.cm-fx-fill:not(.cm--mobile) .cm__level-1 > .cm__item.is-open > .cm__row::before,
.cm-fx-fill.cm--hover:not(.cm--mobile) .cm__level-1 > .cm__item:hover > .cm__row::before { transform: none; }
.cm-fx-fill:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row:hover,
.cm-fx-fill:not(.cm--mobile) .cm__level-1 > .cm__item.is-open > .cm__row,
.cm-fx-fill.cm--hover:not(.cm--mobile) .cm__level-1 > .cm__item:hover > .cm__row { color: var(--cm-hover-color); }

/* ---------- 子選單出現方式 ---------- */
.cm--popup.cm-open-fade:not(.cm--mobile) .cm__sub { --cm-from: none; }
.cm--popup.cm-open-drop:not(.cm--mobile) .cm__sub { --cm-from: var(--cm-from-drop); }
.cm--popup.cm-open-none:not(.cm--mobile) .cm__sub { --cm-from: none; transition: none; }

/* 手風琴、手機版展開時 */
@keyframes cm-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.cm--accordion .cm__item.is-open > .cm__sub,
.cm--mobile .cm__item.is-open > .cm__sub { animation: cm-reveal var(--cm-speed) ease; }
.cm-open-none .cm__item.is-open > .cm__sub { animation: none; }

/* ---------- 子選單項目：背景由左滑入 ---------- */
.cm-subfx-slide.cm--popup:not(.cm--mobile) .cm__sub .cm__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--cm-sub-hover-bg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--cm-speed) cubic-bezier(.2, .8, .3, 1);
}
.cm-subfx-slide.cm--popup:not(.cm--mobile) .cm__sub .cm__row:hover::before,
.cm-subfx-slide.cm--popup:not(.cm--mobile) .cm__sub .cm__item.is-open > .cm__row::before,
.cm-subfx-slide.cm--popup.cm--hover:not(.cm--mobile) .cm__sub .cm__item:hover > .cm__row::before { transform: none; }

/* ---------- 子選單項目：左側色條滑入 ---------- */
.cm-subfx-bar.cm--popup:not(.cm--mobile) .cm__sub .cm__row::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  pointer-events: none;
  background: var(--cm-accent);
  transform: scaleY(0);
  transition: transform var(--cm-speed) cubic-bezier(.2, .8, .3, 1);
}
.cm-subfx-bar.cm--popup:not(.cm--mobile) .cm__sub .cm__row:hover::after,
.cm-subfx-bar.cm--popup:not(.cm--mobile) .cm__sub .cm__item.is-open > .cm__row::after,
.cm-subfx-bar.cm--popup.cm--hover:not(.cm--mobile) .cm__sub .cm__item:hover > .cm__row::after { transform: none; }

/* 兩種子選單效果都讓文字往右滑一點 */
.cm-subfx-slide.cm--popup:not(.cm--mobile) .cm__sub .cm__link,
.cm-subfx-bar.cm--popup:not(.cm--mobile) .cm__sub .cm__link { transition: padding-left var(--cm-speed) ease; }
.cm-subfx-slide.cm--popup:not(.cm--mobile) .cm__sub .cm__row:hover .cm__link,
.cm-subfx-bar.cm--popup:not(.cm--mobile) .cm__sub .cm__row:hover .cm__link { padding-left: 1.4em; }

/* =========================================================
   框線（套用對象由 .cm-bd-box / .cm-bd-top / .cm-bd-sub 決定）
   --cm-bd-t/r/b/l = 1 或 0，表示該邊是否有框線
   ========================================================= */
.cm-bd-box,
.cm-bd-top .cm__level-1 > .cm__item > .cm__row,
.cm-bd-sub .cm__sub .cm__row {
  border-style: var(--cm-bd-s);
  border-color: var(--cm-bd-c);
  border-width:
    calc(var(--cm-bd-t) * var(--cm-bd-w))
    calc(var(--cm-bd-r) * var(--cm-bd-w))
    calc(var(--cm-bd-b) * var(--cm-bd-w))
    calc(var(--cm-bd-l) * var(--cm-bd-w));
  transition: border-color var(--cm-speed) ease, border-width var(--cm-speed) ease,
    background-color var(--cm-speed) ease, color var(--cm-speed) ease, box-shadow var(--cm-speed) ease;
}

/* 滑鼠滑入 */
.cm-bd-box:hover,
.cm-bd-box:focus-within,
.cm-bd-top .cm__level-1 > .cm__item > .cm__row:hover,
.cm-bd-top .cm__level-1 > .cm__item.is-open > .cm__row,
.cm-bd-top.cm--hover:not(.cm--mobile) .cm__level-1 > .cm__item:hover > .cm__row,
.cm-bd-sub .cm__sub .cm__row:hover,
.cm-bd-sub .cm__sub .cm__item.is-open > .cm__row,
.cm-bd-sub.cm--hover:not(.cm--mobile) .cm__sub .cm__item:hover > .cm__row {
  border-style: var(--cm-bd-hs);
  border-color: var(--cm-bd-hc);
  border-width:
    calc(var(--cm-bd-t) * var(--cm-bd-hw))
    calc(var(--cm-bd-r) * var(--cm-bd-hw))
    calc(var(--cm-bd-b) * var(--cm-bd-hw))
    calc(var(--cm-bd-l) * var(--cm-bd-hw));
}

/* 水平選單的主選單項目：左右框線都有時，相鄰兩格的框線不要疊成兩倍粗 */
.cm--horizontal.cm-bd-top:not(.cm--mobile) .cm__level-1 > .cm__item + .cm__item > .cm__row { margin-left: calc(-1 * var(--cm-bd-l) * var(--cm-bd-r) * var(--cm-bd-w)); }
/* 垂直、手機版與子選單：相鄰上下框線同理 */
.cm--vertical.cm-bd-top .cm__level-1 > .cm__item + .cm__item > .cm__row,
.cm--mobile.cm-bd-top .cm__level-1 > .cm__item + .cm__item > .cm__row,
.cm-bd-sub .cm__sub > .cm__item + .cm__item > .cm__row { margin-top: calc(-1 * var(--cm-bd-t) * var(--cm-bd-b) * var(--cm-bd-w)); }
/* 滑入的那一格疊在鄰居上面，框線不會被蓋住 */
.cm-bd-top .cm__level-1 > .cm__item > .cm__row:hover,
.cm-bd-sub .cm__sub .cm__row:hover { z-index: 1; }

/* =========================================================
   陰影
   每個元素的 box-shadow 由幾組變數疊加，互不干擾：
     整個選單 (.cm)        e1a = 主選單陰影（整條）  e1b = 框線陰影
     主選單項目            e2a = 主選單陰影（項目）  e2b = 框線陰影  e2c = 目前位置強調色
     子選單彈出框          e3  = 子選單陰影（彈出框）
     子選單項目            e4a = 子選單陰影（項目）  e4b = 框線陰影  e4c = 目前位置強調色
   --cm-sh-top / -top-h / -sub / -sub-h / -bd / -bd-h 由模組參數輸出（-h = 滑鼠滑入）
   ========================================================= */
.cm { box-shadow: var(--cm-e1a, 0 0 #0000), var(--cm-e1b, 0 0 #0000); }
/* 有外框時，框線區塊已經設定了包含 box-shadow 的 transition */
.cm:not(.cm-bd-box) { transition: box-shadow var(--cm-speed) ease; }
.cm__level-1 > .cm__item > .cm__row {
  box-shadow: var(--cm-e2a, 0 0 #0000), var(--cm-e2b, 0 0 #0000), var(--cm-e2c, 0 0 #0000);
}
.cm__sub .cm__row {
  box-shadow: var(--cm-e4a, 0 0 #0000), var(--cm-e4b, 0 0 #0000), var(--cm-e4c, 0 0 #0000);
}
/* 滑入的項目疊在鄰居上面，陰影不會被蓋住 */
.cm__row:hover { z-index: 1; }

/* 主選單：整條 */
.cm-sh-bar { --cm-e1a: var(--cm-sh-top, 0 0 #0000); }
.cm-sh-bar:hover,
.cm-sh-bar:focus-within { --cm-e1a: var(--cm-sh-top-h, var(--cm-sh-top, 0 0 #0000)); }

/* 主選單：每個項目 */
.cm-sh-topitem .cm__level-1 > .cm__item > .cm__row { --cm-e2a: var(--cm-sh-top, 0 0 #0000); }
.cm-sh-topitem .cm__level-1 > .cm__item > .cm__row:hover,
.cm-sh-topitem .cm__level-1 > .cm__item.is-open > .cm__row,
.cm-sh-topitem.cm--hover:not(.cm--mobile) .cm__level-1 > .cm__item:hover > .cm__row { --cm-e2a: var(--cm-sh-top-h, var(--cm-sh-top, 0 0 #0000)); }

/* 子選單：彈出框（預設就有，勾掉才關閉） */
.cm--popup:not(.cm--mobile) .cm__sub {
  --cm-e3: var(--cm-sh-sub, 0 12px 28px -8px rgba(15, 30, 45, .35), 0 0 0 1px rgba(15, 30, 45, .06));
}
.cm--popup:not(.cm--mobile) .cm__sub:hover {
  --cm-e3: var(--cm-sh-sub-h, var(--cm-sh-sub, 0 12px 28px -8px rgba(15, 30, 45, .35), 0 0 0 1px rgba(15, 30, 45, .06)));
}
.cm--popup.cm-sh-subbox-off:not(.cm--mobile) .cm__sub,
.cm--popup.cm-sh-subbox-off:not(.cm--mobile) .cm__sub:hover { --cm-e3: 0 0 #0000; }

/* 子選單：每個項目 */
.cm-sh-subitem .cm__sub .cm__row { --cm-e4a: var(--cm-sh-sub, 0 0 #0000); }
.cm-sh-subitem .cm__sub .cm__row:hover,
.cm-sh-subitem .cm__sub .cm__item.is-open > .cm__row,
.cm-sh-subitem.cm--hover:not(.cm--mobile) .cm__sub .cm__item:hover > .cm__row { --cm-e4a: var(--cm-sh-sub-h, var(--cm-sh-sub, 0 0 #0000)); }

/* 框線陰影：套用在「框線」分頁勾選的對象 */
.cm-bd-box { --cm-e1b: var(--cm-sh-bd, 0 0 #0000); }
.cm-bd-box:hover,
.cm-bd-box:focus-within { --cm-e1b: var(--cm-sh-bd-h, var(--cm-sh-bd, 0 0 #0000)); }
.cm-bd-top .cm__level-1 > .cm__item > .cm__row { --cm-e2b: var(--cm-sh-bd, 0 0 #0000); }
.cm-bd-top .cm__level-1 > .cm__item > .cm__row:hover,
.cm-bd-top .cm__level-1 > .cm__item.is-open > .cm__row,
.cm-bd-top.cm--hover:not(.cm--mobile) .cm__level-1 > .cm__item:hover > .cm__row { --cm-e2b: var(--cm-sh-bd-h, var(--cm-sh-bd, 0 0 #0000)); }
.cm-bd-sub .cm__sub .cm__row { --cm-e4b: var(--cm-sh-bd, 0 0 #0000); }
.cm-bd-sub .cm__sub .cm__row:hover,
.cm-bd-sub .cm__sub .cm__item.is-open > .cm__row,
.cm-bd-sub.cm--hover:not(.cm--mobile) .cm__sub .cm__item:hover > .cm__row { --cm-e4b: var(--cm-sh-bd-h, var(--cm-sh-bd, 0 0 #0000)); }

/* =========================================================
   主題：手繪風
   像用鋼筆在筆記紙上畫的選單：歪歪的線框、硬邊投影、螢光筆劃過的滑入效果
   ========================================================= */
.cm.cm-theme-hand {
  --cm-bg: #fffdf5;
  --cm-color: #2b2a28;
  --cm-hover-bg: #ffe885;
  --cm-hover-color: #2b2a28;
  --cm-sub-bg: #fffdf5;
  --cm-sub-color: #2b2a28;
  --cm-sub-hover-bg: #ffe885;
  --cm-accent: #d6453d;
  --cm-sh-sub: 4px 5px 0 rgba(43, 42, 40, .9);
  --cm-sh-sub-h: 4px 5px 0 rgba(43, 42, 40, .9);
  font-family: "LXGW WenKai TC", "Kaiti TC", "BiauKai", "DFKai-SB", "標楷體", cursive;
  font-size: 1.08rem;
  border-radius: 255px 14px 225px 14px / 14px 225px 14px 255px;
}
/* 線框與投影用最低優先順序，「框線」「陰影」分頁的設定可以蓋過去 */
:where(.cm.cm-theme-hand) {
  border: 2px solid #2b2a28;
  --cm-e1a: 3px 4px 0 rgba(43, 42, 40, .85);
}
.cm.cm-theme-hand .cm__row { transition: background-color var(--cm-speed) ease, color var(--cm-speed) ease, transform var(--cm-speed) ease, box-shadow var(--cm-speed) ease; }

/* 滑入：螢光筆塗過，只塗中間一段，再歪一點點 */
.cm.cm-theme-hand:not(.cm-fx-fill) .cm__level-1 > .cm__item > .cm__row:hover,
.cm.cm-theme-hand:not(.cm-fx-fill) .cm__level-1 > .cm__item.is-open > .cm__row,
.cm.cm-theme-hand.cm--hover:not(.cm--mobile):not(.cm-fx-fill) .cm__level-1 > .cm__item:hover > .cm__row,
.cm.cm-theme-hand.cm--popup:not(.cm--mobile):not(.cm-subfx-slide) .cm__sub .cm__row:hover,
.cm.cm-theme-hand.cm--popup:not(.cm--mobile):not(.cm-subfx-slide) .cm__sub .cm__item.is-open > .cm__row {
  background: linear-gradient(176deg, transparent 22%, var(--cm-hover-bg) 24% 80%, transparent 82%);
  color: var(--cm-hover-color);
}
.cm.cm-theme-hand:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row:hover { transform: rotate(-1.2deg); }
.cm.cm-theme-hand:not(.cm--mobile) .cm__level-1 > .cm__item:nth-child(even) > .cm__row:hover { transform: rotate(1deg); }

/* 底線滑入：換成紅筆波浪線 */
.cm.cm-theme-hand.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::after {
  height: 7px;
  bottom: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='7' viewBox='0 0 16 7'%3E%3Cpath d='M0 4 Q4 0 8 4 T16 4' fill='none' stroke='%23d6453d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 7px;
  border-radius: 0;
}
.cm--vertical.cm.cm-theme-hand.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::after { width: 3px; height: auto; background: #d6453d; border-radius: 3px; }

/* 子選單：筆記紙，左上角稍微歪 */
.cm.cm-theme-hand.cm--popup:not(.cm--mobile) .cm__sub {
  border: 2px solid #2b2a28;
  border-radius: 14px 225px 14px 255px / 255px 14px 225px 14px;
}
.cm.cm-theme-hand.cm--accordion .cm__sub,
.cm.cm-theme-hand.cm--mobile .cm__sub {
  background: transparent;
  margin-left: 1.1em;
  border-left: 2px dashed rgba(43, 42, 40, .35);
}
.cm.cm-theme-hand.cm--vertical .cm__level-1 > .cm__item + .cm__item,
.cm.cm-theme-hand.cm--mobile .cm__level-1 > .cm__item + .cm__item { border-top: 1.5px dashed rgba(43, 42, 40, .3); }
.cm.cm-theme-hand.cm--mobile > .cm__level-1 { border-top: 2px solid #2b2a28; }

/* =========================================================
   主題：賽博龐克
   深色霓虹面板、切角外框、掃描線、滑入時的訊號干擾
   切角用偽元素畫，選單本身不裁切，子選單才能正常彈出
   ========================================================= */
.cm.cm-theme-cyber {
  --cm-bg: #0d1020;
  --cm-color: #d8f9ff;
  --cm-hover-bg: rgba(0, 240, 255, .12);
  --cm-hover-color: #00f0ff;
  --cm-sub-bg: #0d1020;
  --cm-sub-color: #d8f9ff;
  --cm-sub-hover-bg: rgba(255, 42, 109, .18);
  --cm-accent: #ff2a6d;
  --cm-radius: 0px;
  --cm-sh-sub: 0 0 #0000;
  --cm-sh-sub-h: 0 0 #0000;
  --cm-cut: 14px;
  font-family: "Orbitron", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent;
  border-radius: 0;
  isolation: isolate;
}

/* 外框：::before 是霓虹漸層，::after 是內層深色底，兩者都切角 */
.cm.cm-theme-cyber::before,
.cm.cm-theme-cyber::after,
.cm.cm-theme-cyber.cm--popup:not(.cm--mobile) .cm__sub::before,
.cm.cm-theme-cyber.cm--popup:not(.cm--mobile) .cm__sub::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  clip-path: polygon(0 0, calc(100% - var(--cm-cut)) 0, 100% var(--cm-cut), 100% 100%, var(--cm-cut) 100%, 0 calc(100% - var(--cm-cut)));
}
.cm.cm-theme-cyber::before,
.cm.cm-theme-cyber.cm--popup:not(.cm--mobile) .cm__sub::before {
  inset: 0;
  background: linear-gradient(110deg, #00f0ff, #7a5cff 55%, #ff2a6d);
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, .55));
}
.cm.cm-theme-cyber::after,
.cm.cm-theme-cyber.cm--popup:not(.cm--mobile) .cm__sub::after {
  inset: 1.5px;
  --cm-cut: 13px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, var(--cm-bg), #141a33);
}

/* 子選單 */
.cm.cm-theme-cyber.cm--popup:not(.cm--mobile) .cm__sub {
  --cm-cut: 10px;
  background: transparent;
  border-radius: 0;
  isolation: isolate;
}
.cm.cm-theme-cyber.cm--popup:not(.cm--mobile) .cm__sub::after { --cm-cut: 9px; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px), var(--cm-sub-bg); }
.cm.cm-theme-cyber.cm--accordion .cm__sub,
.cm.cm-theme-cyber.cm--mobile .cm__sub { background: rgba(0, 240, 255, .05); border-left: 2px solid rgba(0, 240, 255, .5); }
.cm.cm-theme-cyber.cm--vertical .cm__level-1 > .cm__item + .cm__item,
.cm.cm-theme-cyber.cm--mobile .cm__level-1 > .cm__item + .cm__item { border-top: 1px solid rgba(0, 240, 255, .15); }

/* 霓虹字與訊號干擾 */
.cm.cm-theme-cyber .cm__text { display: inline-block; }
.cm.cm-theme-cyber .cm__row:hover .cm__text,
.cm.cm-theme-cyber .cm__item.is-open > .cm__row .cm__text { text-shadow: 0 0 6px rgba(0, 240, 255, .85), 0 0 14px rgba(0, 240, 255, .4); }
.cm.cm-theme-cyber .cm__sub .cm__row:hover .cm__text { text-shadow: 0 0 6px rgba(255, 42, 109, .85); color: #ffd1de; }
.cm.cm-theme-cyber .cm__row:hover .cm__text { animation: cm-glitch .38s steps(2, end) 1; }
@keyframes cm-glitch {
  0%   { transform: translate(0); text-shadow: 2px 0 #ff2a6d, -2px 0 #00f0ff; }
  25%  { transform: translate(-1px, 1px); text-shadow: -2px 0 #ff2a6d, 2px 0 #00f0ff; }
  50%  { transform: translate(1px, -1px); text-shadow: 2px 1px #ff2a6d, -2px -1px #00f0ff; }
  75%  { transform: translate(-1px, 0); text-shadow: 0 0 6px rgba(0, 240, 255, .85); }
  100% { transform: translate(0); }
}
.cm.cm-theme-cyber .cm__icon { filter: drop-shadow(0 0 4px rgba(0, 240, 255, .7)); }
.cm.cm-theme-cyber.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::after {
  background: var(--cm-accent);
  box-shadow: 0 0 8px var(--cm-accent), 0 0 2px #fff;
  border-radius: 0;
}
.cm.cm-theme-cyber .cm__level-1 > .cm__item > .cm__row { border-radius: 0 !important; }

/* =========================================================
   主題：極簡科技
   米白底、近黑字、單一橘紅強調色；膠囊形項目、白色浮卡子選單、黑色圖示方塊
   ========================================================= */
.cm.cm-theme-clean {
  --cm-bg: #f9f9f6;
  --cm-color: #5d5d5a;
  --cm-hover-bg: rgba(20, 20, 17, .05);
  --cm-hover-color: #141411;
  --cm-sub-bg: #ffffff;
  --cm-sub-color: #141411;
  --cm-sub-hover-bg: #f4f4f0;
  --cm-accent: #f04f25;
  --cm-ink: #141411;
  --cm-radius: 16px;
  --cm-sh-sub: 0 18px 40px -12px rgba(20, 20, 17, .18), 0 0 0 1px rgba(20, 20, 17, .05);
  --cm-sh-sub-h: 0 18px 40px -12px rgba(20, 20, 17, .18), 0 0 0 1px rgba(20, 20, 17, .05);
  font-family: "Inter", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: .95rem;
  letter-spacing: -.005em;
  padding: .45em;
}
:where(.cm.cm-theme-clean) { border: 1px solid rgba(20, 20, 17, .06); }

/* 主選單項目：膠囊形，滑入時淡灰底、字變深 */
.cm.cm-theme-clean .cm__level-1 > .cm__item > .cm__row { border-radius: 999px !important; }
.cm.cm-theme-clean:not(.cm--mobile) .cm__level-1 > .cm__item + .cm__item { margin-left: .15em; }
.cm.cm-theme-clean .cm__level-1 > .cm__item > .cm__row .cm__link { padding: .6em 1.15em; }
.cm.cm-theme-clean .cm__level-1 > .cm__item > .cm__row .cm__caret { width: 2em; margin-left: -.7em; }
.cm.cm-theme-clean .cm__level-1 > .cm__item.active > .cm__row { color: var(--cm-ink); font-weight: 500; }
.cm.cm-theme-clean .cm__level-1 > .cm__item.active > .cm__row,
.cm.cm-theme-clean.cm--mobile .cm__level-1 > .cm__item.active > .cm__row { --cm-e2c: 0 0 #0000; }

/* 底線滑入：換成橘色小圓點，滑入時拉長成短線 */
.cm.cm-theme-clean.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::after {
  left: 50%; right: auto; bottom: .25em;
  width: 18px; height: 3px; margin-left: -9px;
  border-radius: 3px;
  background: var(--cm-accent);
  transform: scale(0);
  transition: transform var(--cm-speed) cubic-bezier(.2, .8, .3, 1), width var(--cm-speed) ease, height var(--cm-speed) ease, margin var(--cm-speed) ease, border-radius var(--cm-speed) ease;
}
.cm.cm-theme-clean.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item.active > .cm__row::after { transform: none; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; }
.cm.cm-theme-clean.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row:hover::after,
.cm.cm-theme-clean.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item.is-open > .cm__row::after { transform: none; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; }
.cm--vertical.cm.cm-theme-clean.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::after { left: .5em; top: 50%; bottom: auto; width: 6px; height: 6px; margin: -3px 0 0; border-radius: 50%; }

/* 子選單：白色浮卡 */
.cm.cm-theme-clean.cm--popup:not(.cm--mobile) .cm__sub {
  --cm-radius: 14px;
  padding: .45em;
  min-width: 15em;
  margin-top: .4em;
}
.cm.cm-theme-clean.cm--popup:not(.cm--mobile) .cm__sub .cm__sub { margin-top: 0; margin-left: .35em; }
.cm.cm-theme-clean .cm__sub .cm__row { border-radius: 10px; }
.cm.cm-theme-clean .cm__sub .cm__row::before,
.cm.cm-theme-clean .cm__level-1 > .cm__item > .cm__row::before { border-radius: inherit; }
.cm.cm-theme-clean.cm--popup:not(.cm--mobile) .cm__sub .cm__link { padding: .55em .7em; }
.cm.cm-theme-clean.cm--popup:not(.cm--mobile) .cm__sub .cm__item.current > .cm__row { --cm-e4c: 0 0 #0000; background: #f4f4f0; }
.cm.cm-theme-clean.cm--popup:not(.cm--mobile) .cm__sub .cm__item.current > .cm__row .cm__text::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: .5em; vertical-align: middle;
  border-radius: 50%; background: var(--cm-accent);
}

/* 子選單圖示：黑色圓角方塊 */
.cm.cm-theme-clean .cm__sub .cm__icon {
  width: 2em; height: 2em; line-height: 2em;
  border-radius: 9px;
  background: var(--cm-item-icon-color, var(--cm-ink));
  color: #fff;
  font-size: .85em;
}
.cm.cm-theme-clean .cm__sub .cm__row:hover .cm__icon { transform: none; background: var(--cm-accent); }
.cm.cm-theme-clean .cm__sub .cm__aicon svg { width: 1.15em; height: 1.15em; }

/* 手風琴、手機版 */
.cm.cm-theme-clean.cm--accordion .cm__sub,
.cm.cm-theme-clean.cm--mobile .cm__sub { background: transparent; margin-left: 1.1em; border-left: 1px solid rgba(20, 20, 17, .1); }
.cm.cm-theme-clean.cm--vertical .cm__level-1 > .cm__item + .cm__item,
.cm.cm-theme-clean.cm--mobile .cm__level-1 > .cm__item + .cm__item { border-top: 0; margin-top: .1em; }
.cm.cm-theme-clean.cm--mobile > .cm__level-1 { border-top: 1px solid rgba(20, 20, 17, .08); padding-top: .35em; }
.cm.cm-theme-clean .cm__toggle { color: var(--cm-ink); }

/* 最後一個主選單項目做成按鈕：黑色膠囊＋橘色圓形箭頭 */
.cm.cm-theme-clean.cm-clean-cta:not(.cm--mobile).cm--horizontal > .cm__level-1 > .cm__item:last-child { margin-left: auto; padding-left: .6em; }
.cm.cm-theme-clean.cm-clean-cta .cm__level-1 > .cm__item:last-child > .cm__row {
  background: var(--cm-ink) !important;
  color: #fff !important;
  --cm-e2c: 0 0 #0000;
}
.cm.cm-theme-clean.cm-clean-cta .cm__level-1 > .cm__item:last-child > .cm__row::after { display: none; }
.cm.cm-theme-clean.cm-clean-cta .cm__level-1 > .cm__item:last-child > .cm__row > .cm__link {
  padding: .3em .3em .3em 1.2em;
  gap: .75em;
  font-weight: 500;
}
.cm.cm-theme-clean.cm-clean-cta .cm__level-1 > .cm__item:last-child > .cm__row > .cm__link::after {
  content: "";
  flex: 0 0 auto;
  width: 2.1em; height: 2.1em;
  border-radius: 50%;
  background: var(--cm-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") no-repeat center / 45%;
  transition: transform var(--cm-speed) cubic-bezier(.2, .8, .3, 1);
}
.cm.cm-theme-clean.cm-clean-cta .cm__level-1 > .cm__item:last-child > .cm__row:hover > .cm__link::after { transform: rotate(-45deg); }
.cm.cm-theme-clean.cm-clean-cta .cm__level-1 > .cm__item:last-child > .cm__row:hover { background: #2a2a26 !important; }
.cm.cm-theme-clean.cm-clean-cta.cm--vertical .cm__level-1 > .cm__item:last-child,
.cm.cm-theme-clean.cm-clean-cta.cm--mobile .cm__level-1 > .cm__item:last-child { margin-top: .5em; }
.cm.cm-theme-clean.cm-clean-cta.cm--vertical .cm__level-1 > .cm__item:last-child > .cm__row > .cm__link,
.cm.cm-theme-clean.cm-clean-cta.cm--mobile .cm__level-1 > .cm__item:last-child > .cm__row > .cm__link { justify-content: space-between; }

/* =========================================================
   圖示動畫
   圖示（或沒有圖示時的圖片）加上 .cm-anim-名稱；觸發方式由 nav 的 class 決定：
     .cm-at-hover   滑鼠滑入（或鍵盤移到）項目時播放一次
     .cm-at-always  一直播放，每次之間停一下
     .cm-at-active  只有目前所在的項目一直播放
   ========================================================= */
.cm { --cm-anim-dur: .8s; }
.cm .cm-anim { display: inline-block; transform-origin: 50% 50%; backface-visibility: hidden; }
.cm .cm-anim-swing { transform-origin: 50% 0; }
.cm .cm-anim-bounce { transform-origin: 50% 100%; }

@keyframes cm-a-bounce    { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-38%) scaleY(1.06); } 50% { transform: translateY(0) scaleY(.92); } 70% { transform: translateY(-14%); } }
@keyframes cm-a-shake     { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes cm-a-spin      { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes cm-a-pulse     { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }
@keyframes cm-a-swing     { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(18deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(7deg); } 80% { transform: rotate(-3deg); } }
@keyframes cm-a-flip      { from { transform: perspective(200px) rotateY(0); } to { transform: perspective(200px) rotateY(360deg); } }
@keyframes cm-a-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.22); } 70% { transform: scale(1); } }
@keyframes cm-a-tada      { 0%, 100% { transform: scale(1) rotate(0); } 10%, 20% { transform: scale(.9) rotate(-4deg); } 30%, 50%, 70% { transform: scale(1.15) rotate(5deg); } 40%, 60% { transform: scale(1.15) rotate(-5deg); } 80% { transform: scale(1.05) rotate(0); } }

/* 滑鼠滑入時播放一次（取代原本的放大效果） */
.cm-at-hover .cm__row:hover .cm-anim,
.cm-at-hover .cm__row:focus-within .cm-anim { animation: var(--cm-anim-name) var(--cm-anim-dur) cubic-bezier(.3, .7, .4, 1) 1; transform: none; }

/* 一直播放：動畫佔整個週期的前段，其餘時間靜止，比較不會分心 */
.cm-at-always .cm-anim,
.cm-at-active .cm__item.current > .cm__row .cm-anim,
.cm-at-active .cm__item.active > .cm__row .cm-anim { animation: var(--cm-anim-name) calc(var(--cm-anim-dur) * 3) ease-in-out infinite; }
.cm-at-always .cm-anim-spin,
.cm-at-active .cm__item.current > .cm__row .cm-anim-spin,
.cm-at-active .cm__item.active > .cm__row .cm-anim-spin { animation-timing-function: linear; }

.cm-at-always .cm-anim { --cm-anim-name: var(--cm-anim-loop); }
.cm-at-active .cm__item.current > .cm__row .cm-anim,
.cm-at-active .cm__item.active > .cm__row .cm-anim { --cm-anim-name: var(--cm-anim-loop); }

.cm .cm-anim-bounce    { --cm-anim-name: cm-a-bounce;    --cm-anim-loop: cm-l-bounce; }
.cm .cm-anim-shake     { --cm-anim-name: cm-a-shake;     --cm-anim-loop: cm-l-shake; }
.cm .cm-anim-spin      { --cm-anim-name: cm-a-spin;      --cm-anim-loop: cm-a-spin; }
.cm .cm-anim-pulse     { --cm-anim-name: cm-a-pulse;     --cm-anim-loop: cm-a-pulse; }
.cm .cm-anim-swing     { --cm-anim-name: cm-a-swing;     --cm-anim-loop: cm-l-swing; }
.cm .cm-anim-flip      { --cm-anim-name: cm-a-flip;      --cm-anim-loop: cm-l-flip; }
.cm .cm-anim-heartbeat { --cm-anim-name: cm-a-heartbeat; --cm-anim-loop: cm-a-heartbeat; }
.cm .cm-anim-tada      { --cm-anim-name: cm-a-tada;      --cm-anim-loop: cm-l-tada; }

/* 一直播放用的版本：動作在前 1/3，後面靜止 */
@keyframes cm-l-bounce { 0%, 34%, 100% { transform: translateY(0); } 10% { transform: translateY(-38%) scaleY(1.06); } 17% { transform: translateY(0) scaleY(.92); } 24% { transform: translateY(-14%); } }
@keyframes cm-l-shake  { 0%, 30%, 100% { transform: rotate(0); } 5% { transform: rotate(-14deg); } 10% { transform: rotate(12deg); } 15% { transform: rotate(-9deg); } 20% { transform: rotate(6deg); } 25% { transform: rotate(-3deg); } }
@keyframes cm-l-swing  { 0%, 34%, 100% { transform: rotate(0); } 7% { transform: rotate(18deg); } 14% { transform: rotate(-12deg); } 21% { transform: rotate(7deg); } 28% { transform: rotate(-3deg); } }
@keyframes cm-l-flip   { 0% { transform: perspective(200px) rotateY(0); } 34%, 100% { transform: perspective(200px) rotateY(360deg); } }
@keyframes cm-l-tada   { 0%, 34%, 100% { transform: scale(1) rotate(0); } 4%, 7% { transform: scale(.9) rotate(-4deg); } 10%, 17%, 24% { transform: scale(1.15) rotate(5deg); } 14%, 21% { transform: scale(1.15) rotate(-5deg); } 28% { transform: scale(1.05) rotate(0); } }

/* =========================================================
   文字大小（有設定才套用；主題的字級會被蓋過去）
   子選單用 em 時以整個選單的字級為基準；第三層以後與第二層同大
   ========================================================= */
.cm.cm-fs-top .cm__level-1 > .cm__item > .cm__row { font-size: var(--cm-fs-top); }
.cm.cm-fs-sub .cm__level-1 > .cm__item > .cm__sub { font-size: var(--cm-fs-sub); }
.cm.cm-fs-sub .cm__sub .cm__sub { font-size: 1em; }
/* 手機版：整個選單一起調整，覆蓋上面兩個設定 */
.cm.cm-fs-mobile.cm--mobile { font-size: var(--cm-fs-mobile); }
.cm.cm-fs-mobile.cm--mobile .cm__level-1 > .cm__item > .cm__row,
.cm.cm-fs-mobile.cm--mobile .cm__level-1 > .cm__item > .cm__sub { font-size: 1em; }

/* =========================================================
   選單標題
   水平：放在選單左邊（像網站名稱）；垂直：放在最上面一列；手機版：與選單按鈕同一列
   ========================================================= */
.cm__title {
  display: flex;
  align-items: center;
  gap: .55em;
  padding: .7em 1em;
  font-size: var(--cm-mt-size, 1.1em);
  font-weight: 700;
  line-height: 1.2;
  color: var(--cm-mt-color, inherit);
  white-space: nowrap;
}
.cm__title-link { display: flex; align-items: center; gap: .55em; color: inherit; text-decoration: none; }
.cm__title-link:hover, .cm__title-link:focus { color: inherit; text-decoration: none; }
.cm__title-logo { display: block; height: 1.8em; width: auto; }
.cm__title .cm__icon { color: var(--cm-mt-color, var(--cm-icon-color, currentColor)); }

.cm--horizontal.cm-has-title:not(.cm--mobile) { display: flex; align-items: center; }
.cm--horizontal.cm-has-title:not(.cm--mobile) > .cm__title { flex: 0 0 auto; padding-right: 1.4em; }
.cm--horizontal.cm-has-title:not(.cm--mobile) > .cm__level-1 { flex: 1 1 auto; min-width: 0; }

.cm--vertical.cm-has-title:not(.cm--mobile) > .cm__title { box-shadow: inset 0 -1px 0 rgba(128, 128, 128, .28); white-space: normal; }

.cm--mobile.cm-has-title { display: flex; flex-wrap: wrap; align-items: center; }
.cm--mobile.cm-has-title > .cm__title { flex: 1 1 0; min-width: 0; overflow: hidden; padding-right: .4em; }
.cm--mobile.cm-has-title > .cm__title .cm__title-link { min-width: 0; }
.cm--mobile.cm-has-title .cm__title-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cm--mobile.cm-has-title > .cm__toggle { padding-left: .6em; }
.cm--mobile.cm-has-title > .cm__toggle { width: auto; flex: 0 0 auto; margin-left: auto; }
.cm--mobile.cm-has-title > .cm__level-1 { flex: 1 0 100%; }
.cm--mobile.cm-has-title.cm-title-nomobile > .cm__title { display: none; }
.cm--mobile.cm-has-title.cm-title-nomobile > .cm__toggle { width: 100%; }

/* 主題 */
.cm.cm-theme-clean .cm__title { color: var(--cm-mt-color, var(--cm-ink)); font-weight: 600; letter-spacing: -.01em; }
.cm.cm-theme-cyber .cm__title { color: var(--cm-mt-color, #00f0ff); text-shadow: 0 0 8px rgba(0, 240, 255, .6); }
.cm.cm-theme-hand .cm__title { font-size: var(--cm-mt-size, 1.3em); }

/* =========================================================
   選單來源之間的分隔線
   水平：直線；垂直、手機版：橫線。「只留空白」時不畫線，只留間距
   ========================================================= */
.cm .cm__sep { list-style: none; flex: 0 0 auto; pointer-events: none; }
.cm--horizontal:not(.cm--mobile) .cm__level-1 > .cm__sep {
  align-self: stretch;
  width: 0;
  margin: .6em var(--cm-sep-gap, 8px);
  border-left: var(--cm-sep-w, 1px) var(--cm-sep-s, solid) var(--cm-sep-c, rgba(128, 128, 128, .45));
}
.cm--horizontal.cm-sep-full:not(.cm--mobile) .cm__level-1 > .cm__sep { margin-top: 0; margin-bottom: 0; }
.cm--vertical .cm__level-1 > .cm__sep,
.cm--mobile .cm__level-1 > .cm__sep {
  height: 0;
  margin: var(--cm-sep-gap, 8px) 1em;
  border-top: var(--cm-sep-w, 1px) var(--cm-sep-s, solid) var(--cm-sep-c, rgba(128, 128, 128, .45));
}
.cm--vertical.cm-sep-full .cm__level-1 > .cm__sep,
.cm--mobile.cm-sep-full .cm__level-1 > .cm__sep { margin-left: 0; margin-right: 0; }
/* 分隔線後面的第一個項目不要再畫項目之間的細線 */
.cm--vertical .cm__level-1 > .cm__sep + .cm__item,
.cm--mobile .cm__level-1 > .cm__sep + .cm__item { border-top: 0; }
.cm.cm-theme-cyber .cm__level-1 > .cm__sep { --cm-sep-c: rgba(0, 240, 255, .5); }
.cm.cm-theme-hand .cm__level-1 > .cm__sep { --cm-sep-c: rgba(43, 42, 40, .5); }

/* 只給螢幕閱讀器的文字（例如隱藏的「選單」按鈕文字） */
.cm .cm-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .cm *, .cm *::before, .cm *::after { transition: none !important; animation: none !important; }
}

/* 滑鼠移到項目（或鍵盤移到、子選單打開）時的圖示顏色；優先於項目自己的圖示顏色 */
.cm.cm-ih .cm__row:hover .cm__icon,
.cm.cm-ih .cm__row:focus-within .cm__icon,
.cm.cm-ih.cm--hover:not(.cm--mobile) .cm__item:hover > .cm__row .cm__icon { color: var(--cm-icon-hover); }
.cm.cm-ih.cm-theme-clean .cm__sub .cm__row:hover .cm__icon { background: var(--cm-icon-hover); }

/* =========================================================
   中心展開底線：主選單（水平、垂直）、子選單、手機版都可以用
   每一列最後有一個 <span class="cm__uline">，沒開啟時不顯示
   ========================================================= */
.cm .cm__uline {
  display: none;
  position: absolute;
  left: calc(var(--cm-ul-inset, 1em) + var(--cm-indent, 0px));
  right: var(--cm-ul-inset, 1em);
  bottom: 0;
  height: var(--cm-ul-w, 2px);
  border-radius: var(--cm-ul-w, 2px);
  background: var(--cm-ul-c, var(--cm-accent));
  transform: scaleX(0);
  transform-origin: var(--cm-ul-origin, 50%) 50%;
  transition: transform var(--cm-ul-speed, var(--cm-speed)) cubic-bezier(.2, .8, .3, 1);
  pointer-events: none;
  z-index: 2;
}
.cm.cm-ul-top:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row > .cm__uline,
.cm.cm-ul-sub:not(.cm--mobile) .cm__sub .cm__row > .cm__uline,
.cm.cm-ul-mobile.cm--mobile .cm__row > .cm__uline { display: block; }
.cm .cm__row:hover > .cm__uline,
.cm .cm__row:focus-within > .cm__uline,
.cm .cm__item.current > .cm__row > .cm__uline,
.cm .cm__item.active > .cm__row > .cm__uline,
.cm:not(.cm--mobile) .cm__item.is-open > .cm__row > .cm__uline,
.cm.cm--hover:not(.cm--mobile) .cm__item:hover > .cm__row > .cm__uline { transform: none; }
/* 主選單同時選了「底線滑入」效果時，只保留這條線，避免兩條重疊 */
.cm.cm-ul-top.cm-fx-underline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row::after { display: none; }

/* =========================================================
   滑過效果：文字底線從中心點展開（主選單、子選單）
   線畫在文字本身（背景漸層），寬度跟文字一樣；文字換行時每行都有
   粗細、顏色、展開方向、秒數與「中心展開底線」共用
   ========================================================= */
.cm.cm-fx-textline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row .cm__text,
.cm.cm-subfx-textline:not(.cm--mobile) .cm__sub .cm__row .cm__text {
  background-image: linear-gradient(var(--cm-ul-c, var(--cm-accent)), var(--cm-ul-c, var(--cm-accent)));
  background-repeat: no-repeat;
  background-size: 0% var(--cm-ul-w, 2px);
  background-position: var(--cm-ul-origin, 50%) 100%;
  padding-bottom: .18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size var(--cm-ul-speed, var(--cm-speed)) cubic-bezier(.2, .8, .3, 1);
}
.cm.cm-fx-textline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row:hover .cm__text,
.cm.cm-fx-textline:not(.cm--mobile) .cm__level-1 > .cm__item > .cm__row:focus-within .cm__text,
.cm.cm-fx-textline:not(.cm--mobile) .cm__level-1 > .cm__item.is-open > .cm__row .cm__text,
.cm.cm-fx-textline:not(.cm--mobile) .cm__level-1 > .cm__item.active > .cm__row .cm__text,
.cm.cm-fx-textline.cm--hover:not(.cm--mobile) .cm__level-1 > .cm__item:hover > .cm__row .cm__text,
.cm.cm-subfx-textline:not(.cm--mobile) .cm__sub .cm__row:hover .cm__text,
.cm.cm-subfx-textline:not(.cm--mobile) .cm__sub .cm__row:focus-within .cm__text,
.cm.cm-subfx-textline:not(.cm--mobile) .cm__sub .cm__item.is-open > .cm__row .cm__text,
.cm.cm-subfx-textline:not(.cm--mobile) .cm__sub .cm__item.current > .cm__row .cm__text { background-size: 100% var(--cm-ul-w, 2px); }
/* 文字底線已標示目前位置，不再疊加色條 */
.cm.cm-fx-textline:not(.cm--mobile) .cm__level-1 > .cm__item.active > .cm__row { --cm-e2c: 0 0 #0000; }