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

:root {
  /*------------  Primitive  values -----------*/
  /* Brand colors */
  --color-brand-blue-100: #d3e3fa;
  --color-brand-blue-200: #b5d0f5;
  --color-brand-blue-600: #336899;/* CI 輔助藍 */
  --color-brand-blue-800: #313b59;
  --color-brand-blue-900: #004280;/* CI 研華藍 */
  --color-white: #ffffff;
  --color-black: #000000;
  /* Neutral / Grey */
  --color-grey-100: #f2f2f2;
  --color-grey-200: #e0e0e0;
  --color-grey-300: #d1d1d1;
  --color-grey-400: #b5b5b5;
  --color-grey-500: #999999;
  --color-grey-600: #7f7f7f;
  --color-grey-700: #666666;
  --color-grey-800: #4d4d4d;
  --color-grey-900: #333333;
  /* glow */
  --color-brand-blue-glow: #c0dafb;
  /* Gradient primitives */
  --color-brand-gradient: linear-gradient(90deg, #53c3fd 0%, #456de5 80%);
  --color-brand-gradient-inverse: linear-gradient(270deg, #53c3fd 0%, #456de5 80%);

  /* Secondary 專用設定 */
  --btn-secondary-border-width: 2px;
  /* radius scale */
  --radius-element: 5px;
  --radius-component: 15px;
  --radius-surface: 30px;
  --radius-pill: 999px;
  /* font size */
  --font-size-h1: 60px;
  --font-size-h2: 44px;
  --font-size-h3: 22px;
  --font-size-h4: 18px;
  /* Typography scale */
  --font-size-base: 16px;
  --line-height-base: 1.5;
  /* Font weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  /*	space */
  --space-xxs: 10px;
  --space-xs: 20px;
  --space-sm: 30px;
  --space-md: 50px;
  --space-lg: 60px;
  --space-xl: 70px;
  --space-xxl: 100px;
  /*------------ semantic usage -------------*/
  /* color */
  --bg-brand-primary: var(--color-brand-blue-900);
  --bg-brand-secondary: var(--color-brand-blue-600);
  --bg-brand-light: var(--color-brand-blue-100);
  --bg-brand-mid: var(--color-brand-blue-200);
  --bg-brand-deep: var(--color-brand-blue-800);
  --bg-surface: var(--color-white);
  --bg-surface-soft: var(--color-grey-100);
  /* Gradient */
  --bg-brand-glow: var(--color-brand-blue-glow);
  /* Text colors */
  --color-text-default: var(--color-black);
  --color-text-inverse: var(--color-white);
  --color-text-muted: var(--color-grey-700);
  --color-text-disabled: var(--color-grey-400);
  /* Border */
  --color-border: var(--color-grey-200);
  /* ui-effect */
  --bleed-sm: var(--space-xs);
  /* 20px */
  --bleed-md: var(--space-lg);
  /* 60px */
  --bleed-lg: calc(var(--space-lg) * 2);
  /* 120px */
  /* Scroll Reveal Motion */
  --ui-reveal-duration: 1.2s;
  --ui-reveal-distance: 50px;
  --ui-reveal-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ======= 微動畫通用 class ======= */
/* 基本狀態 */
.ui-reveal {
  opacity: 0;
  transition:
    opacity var(--ui-reveal-duration) var(--ui-reveal-easing),
    transform var(--ui-reveal-duration) var(--ui-reveal-easing);
  will-change: opacity, transform;
}

/* 方向 */
.ui-reveal--left {
  transform: translateX(calc(-1 * var(--ui-reveal-distance)));
}

.ui-reveal--right {
  transform: translateX(var(--ui-reveal-distance));
}

.ui-reveal--top {
  transform: translateY(calc(-1 * var(--ui-reveal-distance)));
}

.ui-reveal--bottom {
  transform: translateY(var(--ui-reveal-distance));
}

/* 觸發後 */
.ui-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

@media (max-width: 1600px) {
  :root {
    --font-size-h3: 18px;
  }
}

@media (max-width: 1200px) {
  :root {
    --font-size-h1: 44px;
    --font-size-h2: 36px;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-h1: 36px;
    --font-size-h2: 26px;
  }
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

p {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

a,
a:hover,
a:active,
a:focus {
  color: var(--color-text-default);
}

.bg-brand-light {
  background-color: var(--bg-brand-light) !important;
}

.bg-brand-mid {
  background-color: var(--bg-brand-mid) !important;
}

.bg-brand-deep {
  background-color: var(--bg-brand-deep) !important;
}

.bg-surface {
  background-color: var(--bg-surface) !important;
}

.bg-surface-soft {
  background-color: var(--bg-surface-soft) !important;
}

.container-limited.bg-brand-light,
.container-limited.bg-brand-mid,
.container-limited.bg-brand-deep {
  padding: var(--space-md);
  border-radius: var(--radius-surface);
}

.bg-brand-glow-tl {
  background-image: linear-gradient(135deg, var(--bg-brand-glow), transparent 30%);
}

.bg-brand-glow-tr {
  background-image: linear-gradient(225deg, var(--bg-brand-glow), transparent 30%);
}

.bg-brand-glow-bl {
  background-image: linear-gradient(45deg, var(--bg-brand-glow), transparent 30%);
}

.bg-brand-glow-br {
  background-image: linear-gradient(350deg, var(--bg-brand-glow), transparent 30%);
}

.item__image {
  width: 100%;
}

.item__image img {
  width: 100%;
  border-radius: var(--radius-component);
  object-fit: cover;
  display: block;
}

/* 從父層容器啟用子項目間距 */
.ui-flow-xs>*+* {
  margin-top: calc(var(--space-xs) / 2);
}

.ui-flow-sm>*+* {
  margin-top: calc(var(--space-sm) / 2);
}

.ui-flow-md>*+* {
  margin-top: calc(var(--space-md) / 2);
}


/* ========== Button Base ========== */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xxs) var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  border: var(--btn-border-width, 2px) solid transparent;
  background: none;
  transition: color 0.3s ease, background 0.4s ease, box-shadow 0.3s ease;
}

/* ========== Primary Button ========== */
.ui-btn--primary {
  color: var(--color-text-inverse);
  background:
    linear-gradient(transparent, transparent) padding-box,
    var(--color-brand-gradient) border-box;
}

.ui-btn--primary:hover,
.ui-btn--primary:focus-visible {
  color: var(--color-text-inverse);

  background:
    linear-gradient(transparent, transparent) padding-box,
    var(--color-brand-gradient-inverse) border-box;
  text-decoration: none;
}

/* ========== Secondary Button (Gradient Outline - NEW STRUCTURE) ========== */
.ui-btn--secondary {
  color: #456de5;
  border: var(--btn-secondary-border-width) solid transparent;

  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--color-brand-gradient) border-box;
}

/* Hover → 變成實心漸層 */
.ui-btn--secondary:hover,
.ui-btn--secondary:focus-visible {
  color: var(--color-text-inverse);
  border: var(--btn-secondary-border-width) solid transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    var(--color-brand-gradient-inverse) border-box;
  text-decoration: none;
}

.ui-btn--textlink {
  color: var(--color-text-default);
}

.ui-btn--textlink::after {
  content: "\f178";
  font-family: "Font Awesome 6 Pro";
  font-size: 18px;
  font-weight: bold;
  margin-left: var(--space-xxs);
  display: inline-block;
  color: transparent;
  background-image: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.ui-btn--textlink:hover {
  text-decoration: none;
  color: var(--color-text-default);
}

/* -------------------------
   Image mask fade utilities
----------------------------*/

/* 下方淡出 */
.ui-mask-fade-bottom img {
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* 上方淡出 */
.ui-mask-fade-top img {
  -webkit-mask-image: linear-gradient(to top,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to top,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/*-------------------------
ui-card
--------------------------*/
.ui-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-component);
  padding: 0;
  background: var(--bg-surface-soft);
  transition: all 0.3s linear;
}

.ui-card:hover {
  transform: translateY(-3px);
}

.bg-brand-light .ui-card,
.bg-surface-soft .ui-card {
  background: var(--bg-surface);
}

/* 整張卡片可點擊區域 */
.ui-card__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

/* 內容區塊要在 link 上層 */
.ui-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border-radius: var(--radius-component);
}

.ui-card__actions {
  position: relative;
  display: flex;
  gap: var(--space-xxs);
  z-index: 2;
  /* 確保按鈕可點擊 */
}

.ui-card__actions>.ui-btn {
  flex: 0 0 auto;
}

/* 只要不是唯一一顆（代表有兩顆以上）→ 平分 */
.ui-card__actions>.ui-btn:not(:only-child) {
  flex: 1 1 0;
}

.ui-card__media {
  position: relative;
}

.ui-card__media img {
  border-radius: var(--radius-component) var(--radius-component) 0 0;
}

/*--------------------------
  元件共用 info 
----------------------------*/

.item__meta {
  font-size: var(--font-size-base);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
}

.item__video {
  position: relative;
  text-align: center;
  overflow: hidden;
}
.item__video .play-icon {
  position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.item__video .play-icon::after {
	content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-brand-gradient);
}
.item__video .play-icon i {
	font-size: 60px;
    background: var(--color-white);
    z-index: 2;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.item__video img {
  width: 100%;
}




/*-------------------------
ui-card--list
--------------------------*/
.ui-card.ui-card--list .item__title {
  text-align: center;
}

.ui-card.ui-card--list .item__title::after {
  content: "\f178";
  font-family: "Font Awesome 6 Pro";
  font-size: 18px;
  font-weight: bold;
  margin-left: var(--space-xxs);
  display: inline-block;
  color: transparent;
  background-image: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ========== Group ========== */
.ui-card-group--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.ui-card-group--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.ui-split:has(.ui-split__primary > .ui-card-group--3,
  .ui-split__primary > .ui-card-group--4,
  .ui-split__secondary > .ui-card-group--3,
  .ui-split__secondary > .ui-card-group--4) {
  align-items: flex-start;
}

/* ========== Layout ========== */
.container-full {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-xl) 0;
}

.container-limited {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  box-sizing: border-box;
}
.container-narrow {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: relative;
}



/* ========== Bleed Modifiers ========== */
/* 疊加在 container-full 上 */

/*KV用，全滿版*/
.container-full.is-bleed {
  padding: 0 !important;
}

/* fouce用 768以下恢復*/
.container-full.is-bleed-x {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.container-full.is-bleed-y {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/*offset用*/
.container-full.is-bleed-right {
  padding-right: 0 !important;
}

.container-full.is-bleed-left {
  padding-left: 0 !important;
}



/* ========== 比例設定 ========== */
.ui-split {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-lg);
}

.ui-split__primary,
.ui-split__secondary {
  min-width: 0;
  /* 防止內容撐爆 */
}

/* 比例定義 */
.ui-split--7-3 .ui-split__primary {
  flex: 7;
}

.ui-split--7-3 .ui-split__secondary {
  flex: 3;
}

.ui-split--3-7 .ui-split__primary {
  flex: 3;
}

.ui-split--3-7 .ui-split__secondary {
  flex: 7;
}

.ui-split--6-4 .ui-split__primary {
  flex: 6;
}

.ui-split--6-4 .ui-split__secondary {
  flex: 4;
}

.ui-split--4-6 .ui-split__primary {
  flex: 4;
}

.ui-split--4-6 .ui-split__secondary {
  flex: 6;
}

.ui-split--5-5 .ui-split__primary,
.ui-split--5-5 .ui-split__secondary {
  flex: 1;
}

/* ========== section title ========== */
.ui-section-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  max-width: 820px;
  text-align: center;
  align-items: center;
  margin: 0 auto;
}

.ui-section-title__eyebrow::after {
  content: '';
  display: block;
  margin: var(--space-xxs) auto 0 auto;
  width: 70px;
  height: 8px;
  background-image: var(--color-brand-gradient);
  border-radius: var(--radius-pill);
}

.ui-section-title__eyebrow {
  margin: 0;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
}

.ui-section-title__heading {
  margin: 0;
}

.ui-split .ui-section-title {
  text-align: left;
  align-items: flex-start;
  margin: inherit;
}

.ui-split .ui-section-title__eyebrow::after {
  margin-left: 0;
}

/*-------------------------
  input
--------------------------*/
.btn-group {
  display: flex;
   gap: var(--space-xxs);
}

.btn-group input {
  border: #53c3fd 2px solid;
  border-right: none;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  margin-right: -25px;
  padding: 0 var(--space-xs);
  font-size: var(--font-size-base);
  width: 100%;
  max-width: 70%;
}


/*-------------------------
  UI effect
--------------------------*/
/* bleed direction */
.ui-effect--bleed-top {
  margin-top: calc(var(--bleed-size) * -1);
}

.ui-effect--bleed-bottom {
  margin-bottom: calc(var(--bleed-size) * -1);
}

/* bleed depth */
.ui-effect--bleed-sm {
  --bleed-size: var(--bleed-sm);
}

.ui-effect--bleed-md {
  --bleed-size: var(--bleed-md);
}

.ui-effect--bleed-lg {
  --bleed-size: var(--bleed-lg);
}

/* ui-bleed-scope - 補回被吃掉的空間 */
.ui-bleed-scope--sm {
  padding-top: calc(var(--space-xl) + var(--bleed-sm));
}

.ui-bleed-scope--md {
  padding-top: calc(var(--space-xl) + var(--bleed-md));
}

.ui-bleed-scope--lg {
  padding-top: calc(var(--space-xl) + var(--bleed-lg));
}

/* ========== RWD (Breakpoint Overrides Only) ========== */
/* < 1200px: slightly tighter section padding */
@media (max-width: 1600px) {
  .container-full {
    padding: var(--space-md);
  }
}

/* < 992px: split layout stacks; card grids drop to 2 columns */
@media (max-width: 1024px) {
  .container-full .row {
    gap: var(--space-sm);
  }

  .ui-split {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .ui-split .ui-section-title {
    text-align: center;
    align-items: center;
    margin: 0 auto;
  }

  .ui-split .ui-section-title__eyebrow::after {
    margin-left: auto;
  }

  .ui-card-group--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ui-card-group--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Demo HTML contains an inline fixed width; override it on smaller screens */
  .ui-card-group--4[style] {
    width: auto !important;
    max-width: 100%;
  }

  .ui-effect--bleed-top,
  .ui-effect--bleed-bottom {
    margin-top: inherit;
    margin-bottom: inherit;
  }
}

@media (max-width: 768px) {

  /* fouce用 768以下恢復*/
  .container-full.is-bleed-x {
    padding-left: var(--space-sm) !important;
    padding-right: var(--space-sm) !important;
  }
}

/* < 576px: single-column cards with tighter gaps */
@media (max-width: 580px) {
  .container-full {
    padding: var(--space-sm);
  }

  .ui-card-group--3,
  .ui-card-group--4 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}



/*-------------------------------
        Navbar
--------------------------------*/
.fixed-top {
	opacity: .95;
	z-index: 1000;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
}

.ui-navbar.fixed-top.show-siteName .ui-navbar__sitename {
	display: block;
	width: 100%;
	border-bottom: 1px solid var(--color-grey-300);
	background-color: var(--color-white);
	padding: 1px 0 0 0;
}

.ui-navbar__sitename p {
	margin: 6px 0;
	font-size: 26px;
	font-weight: var(--font-weight-bold);
	color: var(--color-brand-blue-900);
}

html[lang=ko-kr] .ui-navbar__sitename p,
html[lang=ja-jp] .ui-navbar__sitename p,
html[lang=zh-cn] .ui-navbar__sitename p,
html[lang=zh-tw] .ui-navbar__sitename p,
html[lang=vi-vn] .ui-navbar__sitename p {
	font-size: 26px;
}

.ui-navbar.ui-navbar__wrapper {
	background-color: rgba(255, 255, 255, 1);
	border-bottom: 4px solid var(--color-grey-300);
}

.ui-navbar.ui-navbar__wrapper.active {
	border-bottom: 4px solid var(--color-brand-blue-600);
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__nav {
	padding: 0;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__list {
	display: flex;
	list-style: none;
	margin-bottom: 0;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__collapse {
	justify-content: space-between;
	display: flex !important;
	flex-basis: auto;
	align-items: center;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item {
	position: relative;
	padding-right: var(--space-xs);
	padding-left: var(--space-xs);
	font-weight: var(--font-weight-bold);
	cursor: pointer;
	font-size: var(--font-size-base);
	line-height: 1.5;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item:nth-of-type(2) {
	padding-left: 0;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item .ui-navbar__link {
	padding: 16px 0;
	display: inline-block;
	color: var(--color-brand-blue-900);
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item i {
	margin-left: 6px;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item:hover .ui-navbar__link {
	text-decoration: none;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item:hover::before {
	content: "";
	position: absolute;
	width: calc(100% - 40px);
	bottom: 0;
	left: 19px;
	bottom: -4px;
	height: 4px;
	background-color: var(--color-brand-blue-900);
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item:nth-of-type(2).active::before,
.ui-navbar.ui-navbar__wrapper .ui-navbar__item:nth-of-type(2):hover::before {
	left: 0px;
	width: calc(100% - 20px);
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item::after {
	content: " ";
	position: absolute;
	right: 0;
	top: 13px;
	width: 1px;
	height: 32px;
	border-right: 1px solid var(--color-grey-300);
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item.active .ui-navbar__link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #4c7aa6;
	z-index: 1;
}

.ui-navbar__item.dropdown .dropdown-content {
	display: none;
	position: absolute;
	background-color: rgba(57, 85, 115, 0.9);
	min-width: 150px;
	z-index: 1;
}

.ui-navbar__nav .ui-navbar__cta p {
	margin: 0;
}

.ui-navbar__nav .ui-navbar__cta p a {
	display: block;
	font-size: var(--font-size-base);
	background-color: var(--color-brand-blue-600);
	height: 40px;
	line-height: 40px;
	padding: 2px 28px;
	color: var(--color-white);
}

.ui-navbar__nav .ui-navbar__cta p a:hover {
	background-color: var(--color-brand-blue-900);
}

.ui-navbar .ui-navbar__toggle,
.ui-navbar .ui-navbar__sitename,
.ui-navbar .ui-navbar__next,
.ui-navbar .ui-navbar__prev {
	display: none;
}

.ui-navbar__mobilebar {
	display: none;
}

/*Secondary Nav*/
.ui-navbar.ui-navbar__secondary-wrapper {
	background-color: var(--color-grey-100);
	border-bottom: 1px solid var(--color-grey-300);
}

.ui-navbar.ui-navbar__secondary-wrapper.fixed-top {
	border-bottom: 4px solid var(--color-grey-300);
}

.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__nav {
	padding: 0;
}

.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__collapse {
	justify-content: space-between;
	display: flex !important;
	flex-basis: auto;
	align-items: center;
}

.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__list {
	display: flex;
	list-style: none;
	margin-bottom: 0;
}

.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item {
	position: relative;
	margin-right: 30px;
	font-weight: var(--font-weight-bold);
	cursor: pointer;
	font-size: var(--font-size-base);
}

.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item .ui-navbar__link {
	padding: 16px 0;
	display: inline-block;
	font-weight: normal;
	text-decoration: none;
	color: var(--color-brand-blue-900);
}

.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item .ui-navbar__link:hover {
	text-decoration: none;
}

.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item.active::before,
.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item:hover::before {
	content: "";
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	height: 4px;
	background-color: var(--color-brand-blue-900);
}

.ui-navbar.ui-navbar__secondary-wrapper.fixed-top .ui-navbar__item.active::before,
.ui-navbar.ui-navbar__secondary-wrapper.fixed-top .ui-navbar__item:hover::before {
	bottom: -4px;
}

/*Dropdown menu*/
.nav-item.dropdown i {
	margin-left: 6px;
}

.nav-item.dropdown .dropdown-content {
	display: none;
	position: absolute;
	background-color: rgba(57, 85, 115, 0.9);
	min-width: 150px;
	z-index: 1;
	left: 0;
}

.nav-item.dropdown.active .dropdown-content {
	display: block;
}

.nav-item.dropdown.active i.fa-angle-down:before {
	content: "\f106";
}

.dropdown-content ul {
	list-style: none;
	margin-bottom: 0;
}

.dropdown-content ul li a {
	display: block;
	font-size: var(--font-size-base);
	margin: 0 15px;
	padding: 8px 0;
	border-top: 1px solid #7593b1;
	color: var(--color-white);
}

.dropdown-content ul li:first-child a {
	border-top: none;
}

.dropdown-content ul li a:hover {
	text-decoration: underline;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item.dropdown.active .dropdown-content a {
	padding: 8px 0;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item.dropdown.active .dropdown-content a:hover {
	text-decoration: underline;
}

.ui-navbar.ui-navbar__wrapper.fixed-top .ui-navbar__item.active .ui-navbar__link::after {
	content: none;
}

.ui-navbar.ui-navbar__wrapper.fixed-top .ui-navbar__item.active::before {
	content: "";
	position: absolute;
	width: calc(100% - 40px);
	left: 19px;
	bottom: -4px;
	height: 4px;
	background-color: var(--color-brand-blue-900);
}

.ui-navbar.ui-navbar__wrapper.fixed-top .ui-navbar__item:nth-of-type(2).active::before,
.ui-navbar.ui-navbar__wrapper.fixed-top .ui-navbar__item:nth-of-type(2):hover::before {
	left: 0px;
	width: calc(100% - 20px);
}

@media screen and (max-width: 768px) {

	/*Navbar*/
	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav.close #navbar.ui-navbar__collapse ul {
		display: none;
	}

	.ui-navbar.ui-navbar__wrapper {
		border-color: var(--color-brand-blue-900);
	}

	.ui-navbar.ui-navbar__wrapper.fixed-top {
		border: none;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item.active::before,
	.ui-navbar.ui-navbar__wrapper .ui-navbar__item:hover::before,
	.ui-navbar.ui-navbar__wrapper .ui-navbar__item::after {
		content: none;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__collapse.swipenavigation .ui-navbar__item::before,
	.advan-nav.secondary-nav-wrapper .navbar-collapse.swipenavigation .navbar-nav li.nav-item::before {
		content: "";
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		height: 4px;
		background-color: #DDD;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__collapse.swipenavigation .ui-navbar__item.active::before,
	.ui-navbar.ui-navbar__wrapper .swipenavigation .ui-navbar__item:hover::before,
	.advan-nav.secondary-nav-wrapper .navbar-collapse.swipenavigation .navbar-nav li.nav-item.active::before,
	.advan-nav.secondary-nav-wrapper .swipenavigation .navbar-nav li.nav-item:hover::before {
		content: "";
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		height: 4px;
		background-color: var(--color-brand-blue-900);
	}

	.ui-navbar .ui-navbar__cta {
		display: none;
	}

	.ui-navbar.fixed-top.show-siteName .ui-navbar__sitename p {
		margin-bottom: 0;
		padding: 0 0 1%;
		font-size: var(--font-size-base);
		border-bottom: none;
		font-weight: var(--font-weight-bold);
		color: var(--color-brand-blue-900);
	}

	.ui-navbar .ui-navbar__toggle {
		display: block;
		width: 100%;
		background-color: var(--color-brand-blue-900);
		color: var(--color-white);
		padding: 12px 3%;
		box-sizing: border-box;
	}

	.ui-navbar .ui-navbar__nav.close .ui-navbar__toggle {
		background-color: var(--color-white);
		color: var(--color-brand-blue-900);
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav {
		flex-flow: column;
		align-items: flex-start;
	}

	.ui-navbar .ui-navbar__toggle i {
		font-size: 20px;
		vertical-align: middle;
		margin-right: 3px;
	}

	.ui-navbar .ui-navbar__toggle span {
		font-size: var(--font-size-base);
		line-height: 1.5;
		font-weight: var(--font-weight-bold);
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav .ui-navbar__collapse.close {
		display: none !important;
	}

	.ui-navbar .ui-navbar__next.show {
		display: block;
		position: absolute;
		right: 0;
		bottom: 12px;
		padding-right: 4px;
		width: 40px;
		text-align: right;
		background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
		cursor: pointer;
	}

	.ui-navbar .ui-navbar__prev.show {
		display: block;
		position: absolute;
		left: 0;
		bottom: 12px;
		padding-left: 4px;
		width: 40px;
		text-align: left;
		background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
		cursor: pointer;
		z-index: 999;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav .ui-navbar__collapse {
		width: 93%;
		margin-left: 3%;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__list {
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
		padding: 0;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item {
		margin: 0;
		padding-left: 0;
		width: 100%;
		border-bottom: 1px solid var(--color-grey-300);
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item:nth-last-of-type(2) {
		border-bottom: none;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item .ui-navbar__link {
		padding: 12px;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item:last-child {
		border-bottom: none;
	}

	.ui-navbar.fixed-top .ui-navbar__toggle {
		display: none;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation,
	.advan-nav.secondary-nav-wrapper .navbar-expand-md .navbar-collapse.swipenavigation {
		width: 100%;
		margin-left: 0;
	}

	.ui-navbar.ui-navbar__wrapper .swipenavigation .ui-navbar__item:nth-child(2) .ui-navbar__link {
		padding-left: 0;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation .ui-navbar__list,
	.advan-nav.secondary-nav-wrapper .navbar-expand-md .navbar-collapse.swipenavigation .navbar-nav {
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation .ui-navbar__item,
	.advan-nav.secondary-nav-wrapper .navbar-expand-md .navbar-collapse.swipenavigation .navbar-nav li.nav-item {
		width: auto;
		padding: 0 3.5%;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation .ui-navbar__item::after,
	.advan-nav.secondary-nav-wrapper .navbar-expand-md .navbar-collapse.swipenavigation .navbar-nav li.nav-item::after {
		content: " ";
		position: absolute;
		right: -1px;
		top: 10px;
		width: 1px;
		height: 26px;
		border-right: 1px solid var(--color-grey-300);
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation .ui-navbar__item:nth-last-of-type(2)::after,
	.advan-nav.secondary-nav-wrapper .navbar-expand-md .navbar-collapse.swipenavigation .navbar-nav li.nav-item:nth-last-of-type(2)::after {
		border-right: none;
	}

	.ui-navbar.ui-navbar__wrapper.fixed-top .ui-navbar__item {
		border-bottom: none;
	}

	.swipenavigation ul {
		width: auto;
		list-style: none;
		margin: 0;
		padding: 0;
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.mobile-menubar-wrapper {
		display: block;
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 100%;
		background: var(--color-white);
		box-shadow: 0 5px 20px 0 rgba(3, 3, 3, .2);
	}

	.ui-navbar__mobilebar-inner {
		z-index: 100;
	}

	.ui-navbar__mobilebar ul {
		display: flex;
		justify-content: space-between;
		margin-bottom: 0;
	}

	.ui-navbar__mobileitem {
		flex: 1 1 25%;
		color: var(--color-grey-700);
		display: block;
		text-align: center;
		padding: 10px 0;
		border-top: var(--color-white) 3px solid;
		line-height: inherit;
	}

	.ui-navbar__mobileitem a {
		color: var(--color-grey-700);
	}

	.ui-navbar__mobileitem span {
		display: block;
	}

	.ui-navbar__mobileitem span i {
		font-size: 20px;
		margin-bottom: 5px;
	}

	/*Secondary*/
	.ui-navbar.ui-navbar__secondary-wrapper.fixed-top {
		border-bottom: none;
	}

	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__list {
		flex-direction: column;
		flex-wrap: wrap;
		width: 100%;
	}

	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item {
		margin-right: 0;
		padding-left: 3%;
		border-bottom: 1px solid var(--color-grey-300);
	}

	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item .ui-navbar__link {
		padding: 12px 0;
	}

	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__next.show {
		background: linear-gradient(to right, rgba(242, 242, 242, 0) 0%, rgba(242, 242, 242, 1) 70%, rgba(242, 242, 242, 1) 100%);
	}

	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__prev.show {
		background: linear-gradient(to left, rgba(242, 242, 242, 0) 0%, rgba(242, 242, 242, 1) 70%, rgba(242, 242, 242, 1) 100%);
		cursor: pointer;
	}

	/*Dropdown menu*/
	.ui-navbar__item.dropdown .dropdown-content {
		position: relative;

	}

	.ui-navbar__item.dropdown .dropdown-content ul li {
		display: block;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item {
		padding-left: 0;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item .dropdown-content {
		margin-left: 12px;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item.dropdown.active {
		padding-bottom: 20px;
	}

	.ui-navbar.ui-navbar__wrapper .swipenavigation .ui-navbar__item.dropdown.active .dropdown-content {
		position: fixed;
		top: 48px;
		left: 0;
		width: 100%;
		margin-left: 0;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item.active .ui-navbar__link::after {
		content: none;
	}

}


/* ==========================
   Horizontal Tab
============================== */
.ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xxs);
  margin-bottom: var(--space-xs);
}

.ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab {
  background: var(--bg-brand-light);
  padding: var(--space-xxs) var(--space-xs);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-default);
  white-space: nowrap;
}

.ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab i {
  margin-right: var(--space-xxs);
  font-size: 18px;
}

.ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab.is-active, .ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab:hover {
    color: var(--color-text-inverse);
    background-image: var(--color-brand-gradient);
}

.ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab::before,
.ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab::after {
  display: none;
}

.ui-tabs--horizontal > .ui-tabs__body > .ui-tab-panel.is-active {
  padding-top: var(--space-sm);
}
.bg-brand-light .ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab, .bg-surface-soft .ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab {
  background-color: var(--color-white);
}

/* --------------------------
    List 
  -------------------------- */
.ui-list {
	display:flex;
	gap:var(--space-sm);
}
.ui-list__media {
	width:40%;
}
.ui-list__media img {
  width: 100%;
  border-radius: var(--radius-component);
  object-fit: cover;
}
.ui-list__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    border-radius: var(--radius-component);
	width: 60%;
}
.ui-list__group {
    display: flex;
    gap: var(--space-xs);
    flex-direction: column;
}
.ui-list__group .ui-list {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-xs);
}
.ui-list__group .ui-list:last-child {
    border-bottom: none;
}
.ui-list__meta {
  font-size: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
}

/* Horizonta list */
 .ui-list__group--2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

/* ========== Card ========== */
/* Horizonta card */
.ui-card.ui-card--horizontal {
  flex-direction: row;
}
.ui-card.ui-card--horizontal .ui-card__media {
  width: 50%;
}
.ui-card.ui-card--horizontal .ui-card__content {
  width: 50%;
}
.ui-card.ui-card--horizontal .ui-card__media img{
  border-radius: var(--radius-component) 0 0 var(--radius-component);	
}  
 

@media (max-width: 768px) {
	.ui-card.ui-card--horizontal {
		flex-direction: column;
	}
    .ui-card.ui-card--horizontal .ui-card__content {
		width: 100%;
		box-sizing: border-box;
	}
	.ui-card.ui-card--horizontal .ui-card__media img {
    	border-radius: var(--radius-component) var(--radius-component) 0 0;
	}
	.ui-card.ui-card--horizontal .ui-card__media {
		width: 100%;
	}
	.ui-list__group--2col {
		grid-template-columns: repeat(1, 1fr);
	}
}
@media (max-width: 580px) {
	.ui-list {
		flex-direction: column;
	}
	.ui-list__media {
		width: 100%;
	}
	.ui-list__content {
		width: 100%;
	}
}

/*----------------------------------
ui-bento
-----------------------------------*/
.ui-bento__grid {
  display: grid;
  gap: var(--space-sm);
}

.ui-bento__grid.ui-bento-layout__A {
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.ui-bento__grid.ui-bento-layout__B {
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

/*預設直向*/
.ui-bento-item {
  background-color: var(--bg-surface-soft);
  border-radius: var(--radius-component);
  display: flex;
  flex-direction: column;
}

.bg-brand-light .ui-bento-item {
  background-color: var(--bg-surface);
}

.ui-bento-item.bg-brand-deep {
  color: var(--color-text-inverse);
}

.ui-bento-item.bg-brand-deep .ui-btn--textlink {
  color: var(--color-text-inverse);
}

.ui-bento-item__media.ui-media__icon .item__image {
  display: flex;
  justify-content: end;
  margin-top: auto;
}

.ui-bento-item__media.ui-media__icon img {
  max-width: 100px;
  padding-right: var(--space-xs);
  padding-bottom: var(--space-xs);
}

.ui-bento-item__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-xs);
  padding: var(--space-xs);
}

.ui-bento-item .item__meta {
  padding: var(--space-xs);
}

.ui-bento-item__content .ui-btn {
  width: fit-content;
}

.ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-1 {
  grid-column: 1 / span 3;
  grid-row: 1 / span 4;
}

.ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-2 {
  grid-column: 4 / span 3;
  grid-row: 1 / span 4;
}

.ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-3 {
  grid-column: 7 / span 2;
  grid-row: 1 / span 2;
}

.ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-4 {
  grid-column: 9 / span 2;
  grid-row: 1 / span 2;
}

.ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-5 {
  grid-column: 7 / span 4;
  grid-row: 3 / span 2;
}

.ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-1 {
  grid-area: 1 / 1 / 4 / 4;
}

.ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-2 {
  grid-area: 1 / 4 / 4 / 6;
}

.ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-3 {
  grid-area: 4 / 1 / 6 / 3;
}

.ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-4 {
  grid-area: 4 / 3 / 6 / 6;
}

.ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-5 {
  grid-area: 1 / 6 / 6 / 8;
}

/*可選擇橫向排列*/
.ui-bento-item.ui-bento-item--row {
  flex-direction: row;
}

.ui-bento-item.ui-bento-item--row .ui-bento-item__content {
  justify-content: flex-start;
}

.ui-bento-item.ui-bento-item--row .ui-bento-item__media {
  flex: 0 1 40%;
  display: flex;
}

/*-------------------------
ui-bento (RWD overrides)
Only add styles at breakpoints
--------------------------*/
@media (max-width: 1200px) {
  .ui-bento__grid.ui-bento-layout__A {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-1 {
    grid-column: 1 / span 1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-2 {
    grid-column: 2 / span 1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-3 {
    grid-column: 1 / span 1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-4 {
    grid-column: 2 / span 1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-5 {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-1 {
    grid-column: 1 / span 2;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-2 {
    grid-column: 3 / span 2;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-3 {
    grid-column: 5 / span 2;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-4 {
    grid-column: 1 / span 3;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-5 {
    grid-column: 4 / span 3;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.ui-bento-item--row {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  .ui-bento__grid.ui-bento-layout__B {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-1,
  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-2,
  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-3 {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-4 {
    grid-column: 1 / span 1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-5 {
    grid-column: 2 / span 1;
    grid-row: auto;
  }
}

@media (max-width: 580px) {
  .ui-bento__grid.ui-bento-layout__A {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--space-xs);
  }

  .ui-bento__grid.ui-bento-layout__B {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--space-xs);
  }

  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-1,
  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-2,
  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-3,
  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-4,
  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-5,
  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-1,
  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-2,
  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-3,
  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-4,
  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-5 {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ui-bento-item.ui-bento-item--row {
    flex-direction: column;
  }

  .ui-bento-item.ui-bento-item--row .ui-bento-item__content {
    flex: 1;
  }

  .ui-bento-item.ui-bento-item--row .ui-bento-item__media {
    flex: 0 0 auto;
  }

  .ui-bento-item.ui-bento-item--row .ui-bento-item__media img.ui-media__icon {
    position: static;
  }
}

/*-------------------------
  Vertical tabs
--------------------------*/
.ui-tabs {
  width: 100%;
}

.ui-tabs__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.ui-tabs__nav .ui-tab {
  padding: var(--space-xs);
  background: var(--bg-surface-soft);
  border-radius: var(--radius-component);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  text-align: left;

}


.ui-tabs__nav .ui-tab.is-active {
  background: var(--bg-brand-light);
}

.ui-tabs__nav .ui-tab::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;

  background-color: #53c3fd;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.ui-tabs__nav .ui-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 6px;
  width: 100%;
  background-image: var(--color-brand-gradient);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
}

.ui-tabs__nav .ui-tab:hover::before {
  opacity: 1;
}

.ui-tabs__nav .ui-tab:hover::after {
  opacity: 1;
  animation: tab-bar-reveal 0.8s cubic-bezier(.4, 0, .2, 1) forwards;
}

.ui-tabs__nav .ui-tab.is-active::before {
  opacity: 1;
}

.ui-tabs__nav .ui-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
  animation: none;
}

@keyframes tab-bar-reveal {
  from {
    transform: scaleX(0);
    opacity: 0;
  }

  to {
    transform: scaleX(1);
    opacity: 1;
  }
}



/*--------------------------------------------*/
.bg-brand-light .ui-tabs__nav .ui-tab,
.bg-surface-soft .ui-tabs__nav .ui-tab {
  background: var(--bg-surface);
}



.ui-tab .item__text {
  margin-top: var(--space-xxs);
  display: none;
}

.ui-tab.is-active .item__text {
  display: block;
}

.ui-tabs__panels {
  position: relative;
}

.ui-tab-panel {
  display: none;
}

.ui-tab-panel.is-active {
  display: block;
}

@media (max-width: 1440px) {
  .ui-tabs__nav .ui-tab {
    padding: var(--space-xxs) var(--space-xs);
  }
}

/* --- Tab Layout Variants (Layout A: 4:6 / Layout B: 5:5) --- */
.ui-tabs-layout__A,
.ui-tabs-layout__B {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-lg);
}

.ui-tabs .ui-tabs-layout__A,
.ui-tabs .ui-tabs-layout__B {
  align-items: initial;
}

.ui-tabs__control,
.ui-tabs__main {
  min-width: 0;
}

.ui-tabs__control > * + * {
  margin-top: calc(var(--space-md) / 2);
}

.ui-tabs-layout__A .ui-tabs__control {
  flex: 4;
}

.ui-tabs-layout__A .ui-tabs__main {
  flex: 6;
}

.ui-tabs-layout__B .ui-tabs__control,
.ui-tabs-layout__B .ui-tabs__main {
  flex: 1;
}
.ui-tabs-layout__A .ui-section-title {
  text-align: left;
  align-items: flex-start;
  margin: inherit;
}

.ui-tabs-layout__A .ui-section-title__eyebrow::after {
  margin-left: 0;
}

@media (max-width: 1024px) {

  .ui-tabs-layout__A,
  .ui-tabs-layout__B {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
}

@media (max-width: 580px) {

  .ui-tabs-layout__A,
  .ui-tabs-layout__B {
    gap: var(--space-xs);
  }
}

/*-------------------------------
  Accordion
---------------------------------*/
.ui-accordion {
  display: block;
}

.ui-accordion__item {
  background: var(--bg-surface-soft);
  border-radius: var(--radius-component);
  margin-bottom: var(--space-xxs);
  position: relative;
  overflow: hidden;
}

.bg-brand-light .ui-accordion__item,
.bg-surface-soft .ui-accordion__item {
  background: var(--bg-surface);
}

.ui-accordion__trigger {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-xs);
  cursor: pointer;
  position: relative;

}

/* Font Awesome icon via ::after */
.ui-accordion__trigger::after {
  content: "\f107";
  font-family: "Font Awesome 6 pro";
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  transition: transform 0.2s ease;
  margin-left: auto;
  /* 讓箭頭靠右 */
}

/* 展開時旋轉 */
.ui-accordion__trigger[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Panel 動畫 */
.ui-accordion__panel {
  overflow: hidden;
  height: 0;
  padding: 0;
  transition: height 0.3s ease, padding 0.3s ease;
}

.ui-accordion__content {
  padding: 0 var(--space-xs);
  color: var(--color-text-secondary);
}

/* 開啟狀態（只給 class，不寫數值在 JS） */
.ui-accordion__item.is-open .ui-accordion__panel {
  padding-bottom: var(--space-xs);
}

.ui-accordion__item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;

  background-color: #53c3fd;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.ui-accordion__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 6px;
  width: 100%;
  background-image: var(--color-brand-gradient);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
}

.ui-accordion__item:hover::before {
  opacity: 1;
}

.ui-accordion__item:hover::after {
  opacity: 1;
  animation: tab-bar-reveal 0.8s cubic-bezier(.4, 0, .2, 1) forwards;
}

.ui-accordion__item.is-open::after {
  opacity: 1;
  transform: scaleX(1);
  animation: none;
}

.ui-accordion__item.is-open::before {
  opacity: 1;
}

.ui-split:has(.ui-split__primary > .ui-accordion,
  .ui-split__secondary > .ui-accordion) {
  align-items: flex-start;
}



/* -------------------------------
     KV Banner 
----------------------------------- */

.swiper {
  padding-bottom: 0;
}

.ui-kv-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--color-grey-300);
  box-sizing: border-box;
}

.kv-banner__slide {
  position: relative;
  overflow: hidden;
  min-height: 650px;
  display: flex;
  /* 讓子元素可用 stretch 撐滿 */
  align-items: stretch;
}
.kv-banner__slide--dark{
  background-color: var(--bg-brand-deep);
}

.kv-banner__slide--dark .kv-banner__content {
  color: var(--color-text-inverse);
}

/* 限寬層：文字內容對齊 1600px */
.kv-banner__inner {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}


.kv-banner__slide::before {
  content: '';
  position: absolute;
  right: -260px;
  bottom: -20px;
  width: 530px;
  height: 530px;
  background-image: url("css-img/kv-square-2.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
  pointer-events: none;
  z-index: 2;

  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.kv-banner__slide.ui-motion--active::before {
  opacity: 0.85;
  transform: translateX(0);
}

.kv-banner__slide .kv-banner__media::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -35%;
  width: 100%;
  height: 100%;
  max-height: 370px;
  aspect-ratio: 78 / 37;
  background-image: url("css-img/kv-square.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
  pointer-events: none;
  z-index: -1;

  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.kv-banner__slide .kv-banner__media.ui-motion--active::after {
  opacity: 1;
  transform: translateX(0);
}

.kv-banner__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-lg);
  width: 48%;
  max-width: 740px;
  position: relative;
  z-index: 1;
}


.kv-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
}

.kv-banner__media {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 56%;
  z-index: 1;
}

.kv-banner__media-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.kv-banner__media--image .kv-banner__media-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 影片變體 --- */
.kv-banner__media--video .kv-banner__media-inner video,
.kv-banner__media--video .kv-banner__media-inner iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

/* ========== mask-image 版（修飾 class: kv-banner__media--mask）========== */
.kv-banner__media--mask .kv-banner__media-inner {
  -webkit-mask-image: url('https://advantechfiles.blob.core.windows.net/design/ui-kit2.0/css/css-img/kv-mask.svg');
  mask-image: url('https://advantechfiles.blob.core.windows.net/design/ui-kit2.0/css/css-img/kv-mask.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.controls-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 50px;
  width: 100%;
  max-width: 1600px;
  box-sizing: border-box;
  display: flex;
  gap: var(--space-xxs);
  z-index: 10000;
}

.ui-kv-banner .swiper-button-prev,
.ui-kv-banner .swiper-button-next {
  left: 0 !important;
  bottom: 0 !important;
  position: relative !important;
}

/* ========== RWD ========== */


@media (max-width: 1600px) {

  .kv-banner__content,
  .ui-kv-banner .controls-wrap {
    padding-left: var(--space-md);
    box-sizing: border-box;
  }

}

@media (max-width: 1440px) {
  .kv-banner__slide .kv-banner__media::after {
    left: -45%;
  }
}

@media (max-width: 1024px) {
  .kv-banner__content {
    padding: var(--space-md) var(--space-md) 0 var(--space-md);
    height: 260px;
    width: 100%;
    max-width: initial;
  }

  .kv-banner__content,
  .ui-kv-banner .controls-wrap {
    bottom: 15px;
  }


  .kv-banner__slide {
    min-height: unset;
    flex-direction: column;
  }

  .kv-banner__inner {
    flex-direction: column;
  }

  .kv-banner__media {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    padding: var(--space-sm) var(--space-md) var(--space-xl) var(--space-md);
    box-sizing: border-box;
  }

  .kv-banner__media--mask .kv-banner__media-inner {
    -webkit-mask-image: none;
    mask-image: none;
    ;
  }

  .kv-banner__media--mask .kv-banner__media-inner img,
  .kv-banner__media--video .kv-banner__media-inner video,
  .kv-banner__media--video .kv-banner__media-inner iframe {
    border-radius: var(--radius-surface);
  }

  /* ── 偽元素：裝飾 Blob（::before）────────────────────────────
     僅調整尺寸與位置；transform 動畫由 base + ui-motion--active 控制，
     此處絕對不可覆蓋 transform，否則 transition 動畫會失效。
  ──────────────────────────────────────────────────────────── */

  .kv-banner__slide .kv-banner__media::after {
    left: -70px;
    background-image: url("css-img/kv-square-3.png");
  }

  .kv-banner__slide::before {
    width: 45%;
    height: 45%;
    right: -22%;
    top: 28%;
    background-image: url("css-img/kv-square-5.png");
  }

}

/* ≤ 768px */
@media (max-width: 768px) {
  .kv-banner__content {
    padding: var(--space-md) var(--space-sm) 0 var(--space-sm);
    height: 240px;
  }

  .kv-banner__content,
  .ui-kv-banner .controls-wrap {
    bottom: 8px;
    padding-left: var(--space-sm);
  }

  .ui-kv-banner .controls-wrap {
    justify-content: flex-end;
    padding-right: var(--space-sm);
  }

  .kv-banner__media {
    padding: var(--space-sm) var(--space-sm) var(--space-lg) var(--space-sm);
  }

}

/* ≤ 580px */
@media (max-width: 580px) {
  .kv-banner__media {
    padding: var(--space-sm) var(--space-sm) var(--space-xl) var(--space-sm);
    aspect-ratio: 16 / 9;
  }

  .kv-banner__actions {
    width: 100%;
  }

  .kv-banner__actions .ui-btn:only-child {
    width: fit-content;
  }
    .kv-banner__media--mask .kv-banner__media-inner img,
  .kv-banner__media--video .kv-banner__media-inner video,
  .kv-banner__media--video .kv-banner__media-inner iframe {
    border-radius: var(--radius-component);
  }
}

@media (max-width: 480px) {
  .kv-banner__content {
    height: 280px;
  }
}


/*-------------------------------
  Swiper - btn Style 
---------------------------------*/

.swiper-button-prev i::before,
.swiper-button-next i::before {
  border-radius: var(--radius-pill);
  color: #456de5;
  font-size: 26px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  display: inline-block;
  text-align: center;
  padding: 0;

  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--color-brand-gradient) border-box;
}

.swiper-button-prev:hover i::before,
.swiper-button-next:hover i::before {
  color: var(--color-text-inverse);
  border: var(--btn-secondary-border-width) solid transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    var(--color-brand-gradient-inverse) border-box;
}


.swiper-button-prev i,
.swiper-button-next i {
  font-size: 26px;
}

.swiper-button-prev i.swiper-button-disabled::before,
.swiper-button-next i.swiper-button-disabled::before {
  background: var(--color-text-disabled);
  color: var(--color-white);
}

/* ========== Carousel 共用 ========== */

/* Card Carousel */
  .swiper {
    overflow: hidden;
    width: 100%;
    /*padding-bottom: var(--space-sm);*/
  }

  /* Swiper Wrapper 確保高度自適應 */
  .swiper-wrapper {
    display: flex;
    align-items: stretch;
  }

  /* Swiper Slide 合併 ui-card 樣式 */
  .swiper-slide.ui-card {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* 確保容器正常流向 */
  .swiper-wrapper .swiper-slide {
    flex-shrink: 0;
  }
  .swiper-button-prev,  .swiper-button-next {
    left: 0 !important;
    bottom: 0 !important;
    position: relative !important;
  }

/* Offset Carousel  */


  /* Swiper 容器允許溢出顯示 */
  .ui-carousel-offset {
    overflow: visible;
    width: 100%;
  }

  /* Swiper Wrapper */
  .ui-carousel-offset .swiper-wrapper {
    display: flex;
    align-items: stretch;
  }

  /* 卡片適應 Slide - 合併樣式 */
  .ui-carousel-offset .swiper-slide.ui-card {
    width: 35%;
    flex-shrink: 0;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-horizontal.swiper-pagination-bullets {
    bottom: var(--swiper-pagination-bottom, 0px);
  }
  /* RWD 斷點 */
  @media (max-width: 991px) {
    .ui-carousel-offset .swiper-slide.ui-card {
      width: 45%;
    }
  }

  @media (max-width: 767px) {
    .ui-carousel-offset .swiper-slide.ui-card {
      width: 75%;
    }
  }

/* buttons top-right */

/* 讓 .row 成為箭頭定位基準 */
.container-limited .row:has(.ui-carousel-card) {
  position: relative;
}

/* 為按鈕預留頂部空間 */
.container-limited .row:has(.ui-carousel-card) .ui-carousel {
  padding-top: 56px;
}

/* 隱藏 ui-carousel-card 的分頁圓點 */
.ui-carousel-card .swiper-pagination {
  display: none;
}

/* ui-carousel-card 取消多餘的 padding-bottom */
.ui-carousel-card {
  padding-bottom: 0 !important;
}

/*  Focus Effect */
.ui-carousel .swiper.ui-carousel-focus {
  width: 100%;
  overflow: hidden;
}

.ui-carousel .ui-carousel-focus .swiper-wrapper {
  align-items: stretch;
}

.ui-carousel .ui-carousel-focus .ui-carousel__item {
  width: 860px;              
  height: auto;
  transition: transform .4s ease, opacity .4s ease;
}
.ui-carousel .ui-carousel-focus .ui-carousel__body {
	display:none;
}
.item__image {
  position: relative;
  overflow: hidden;
}

.ui-carousel .ui-carousel-focus .ui-carousel__item  .item__image::after {
  content: '';
  position: absolute;
  inset: 0; 
  background: rgba(0, 0, 0, 0.3); 
  pointer-events: none; 
  border-radius: var(--radius-component);	
}
.ui-carousel .ui-carousel-focus .ui-carousel__inner{
  transform: scale(0.83);
  transform-origin: center;
  transition: transform .4s ease, opacity .4s ease;
  opacity: .7;
}

.ui-carousel .ui-carousel-focus .swiper-slide-active .ui-carousel__inner{
  transform: scale(1);
  opacity: 1;
}
.ui-carousel .ui-carousel-focus .swiper-slide-active .ui-carousel__body {
	display:flex;
	padding: var(--space-xs) 0;
	gap: var(--space-xs);
}
.ui-carousel .ui-carousel-focus .ui-carousel__item.swiper-slide-active .item__image::after {
  content: none;
}  
	
/* ui-carousel 根容器：定位基準 + overflow 控制 */
.ui-carousel {
  position: relative;
  overflow: hidden;
}


/* 為 offset 按鈕預留頂部空間（.ui-split__secondary.ui-carousel 已是 position:relative） */
.ui-carousel:has(.ui-carousel-offset) {
  padding-top: 56px;
}

/* 隱藏 offset swiper 的分頁圓點 */
.ui-carousel-offset .swiper-pagination {
  display: none;
}

/* offset swiper 取消多餘的 padding-bottom */
.ui-carousel-offset {
  padding-bottom: 0 !important;
}

.ui-carousel .controls-wrap {
  justify-content: flex-end;
  top: 25px;
  bottom: auto;
}

@media (max-width: 820px) {
  .ui-carousel .ui-carousel-focus .ui-carousel__item {
    width: 100%;
  }
  .ui-carousel .ui-carousel-focus .ui-carousel__inner {
    transform: scale(1) !important;
    opacity: 1 !important;
  }
  .ui-carousel .ui-carousel-focus .ui-carousel__item .item__image::after {
    content: none !important;
  }
  .ui-carousel .ui-carousel-focus .ui-carousel__body {
    display: flex !important;
    padding: var(--space-xs) 0;
    gap: var(--space-xs);
  }
}

@media (max-width: 768px) {
  .ui-carousel .ui-carousel-focus .ui-carousel__item {
    padding-top: 50px;
  }
  .ui-carousel .controls-wrap {
    top:20px;
  }
  .ui-carousel .ui-carousel-focus .swiper-slide-active .ui-carousel__body {
    flex-direction: column;
  }
}


/* =========================
	 ui-table
============================ */

.ui-table {
  --table-header-bg: var(--color-brand-blue-800);
  --table-header-text: var(--color-text-inverse);
  --table-first-column-bg: var(--color-grey-200);
  --table-parent-row-bg: var(--color-grey-200);
  /* Collapsible trigger row  */
  --table-striped-bg: rgb(from var(--color-grey-200) r g b / 0.2);
  /* Striped */
  --table-hover-bg: var(--color-grey-300);

  width: 100%;
  max-width: 100%;
  display: block;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-surface-soft);
  border-radius: var(--radius-component);
}


.bg-brand-light .ui-table,
.bg-surface-soft .ui-table {
  background: var(--bg-surface);
}

/* sticky-header showcase viewport (not part of module) */
.ui-table-viewport {
  height: 360px;
}

.ui-table-viewport>.ui-table {
  height: 100%;
}

.ui-table>table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

.ui-table th,
.ui-table td {
  padding: var(--space-xxs) var(--space-xs);
  line-height: var(--line-height-base);
  vertical-align: middle;
  text-align: left;
  border-bottom: 1px solid var(--color-grey-300);
  white-space: nowrap;
}

.ui-table thead th {
  font-weight: var(--font-weight-medium);
  background: var(--table-header-bg);
  color: var(--table-header-text);
  border-bottom: 1px solid var(--color-grey-300);
}

.ui-table tbody tr:last-child th,
.ui-table tbody tr:last-child td {
  border-bottom: none;
}

.ui-table tbody th[scope="row"] {
  font-weight: var(--font-weight-medium);
}


/* ui-table--striped */

.ui-table--striped tbody tr:nth-child(odd)>th,
.ui-table--striped tbody tr:nth-child(odd)>td {
  background: var(--table-striped-bg);
}

/* ui-table--sticky-header */

.ui-table--sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ui-table--sticky-column */

.ui-table--sticky-column th:first-child,
.ui-table--sticky-column td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--table-first-column-bg) !important;
}

.ui-table--sticky-column thead th:first-child {
  z-index: 3;
  background: var(--table-header-bg) !important;

}

/* ui-table--collapsible - CSS only via checkbox state */

.ui-table--collapsible {
  position: relative;
}

/* Prevent column reflow when details expand */
.ui-table--collapsible>table {
  width: 100%;
  table-layout: fixed;
}

.ui-table__state {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ui-table--collapsible .ui-table__row--detail>th,
.ui-table--collapsible .ui-table__row--detail>td {
  padding: 0 var(--space-xxs);
  font-size: 0;
  line-height: 0;
  color: transparent;
  border-bottom-width: 0;
  border-bottom-color: transparent;
  transition: padding 220ms ease, font-size 220ms ease, line-height 220ms ease, color 180ms ease, border-bottom-color 220ms ease, border-bottom-width 220ms ease;
}

.ui-table--collapsible .ui-table__row--detail>td {
  white-space: normal;
}

/* Expand (scales to any number of groups) */
.ui-table--collapsible .ui-table__group:has(.ui-table__state:checked) .ui-table__row--detail>th,
.ui-table--collapsible .ui-table__group:has(.ui-table__state:checked) .ui-table__row--detail>td {
  padding: var(--space-xxs) var(--space-xs);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  border-bottom-width: 1px;
  border-bottom-color: var(--color-grey-300);
}

.ui-table--collapsible .ui-table__group:has(.ui-table__state:checked) .ui-table__row--detail>th {
  color: var(--color-text-default);
  font-weight: var(--font-weight-medium);
}

.ui-table--collapsible .ui-table__group:has(.ui-table__state:checked) .ui-table__row--detail>td {
  color: var(--color-text-default);
}

.ui-table--collapsible .ui-table__row--summary>th,
.ui-table--collapsible .ui-table__row--summary>td {
  background: var(--table-parent-row-bg);
  border-bottom-color: var(--color-grey-400);
}

/* Make the whole summary row clickable */
.ui-table--collapsible .ui-table__row--summary>th,
.ui-table--collapsible .ui-table__row--summary>td {
  padding: 0;
}

.ui-table--collapsible .ui-table__row--summary label {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 100%;
  padding: var(--space-xxs) var(--space-xs);
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}

.ui-table--collapsible .ui-table__summary-inner {
  display: flex;
  align-items: center;
  width: 100%;
}

.ui-table--collapsible .ui-table__summary-inner>.ui-table__toggle {
  flex: 1;
}

.ui-table__toggle-cell {
  gap: 0;
}


.ui-table__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  cursor: pointer;
  user-select: none;
}

.ui-table__chevron {
  display: inline-block;
  position: relative;

}

.ui-table__chevron::after {
  content: "\f107";
  font-family: "Font Awesome 6 Pro";
  font-size: 18px;
  font-weight: bold;
  margin-left: var(--space-xxs);
  display: inline-block;
  transition: transform 180ms ease;
  transform: rotate(0deg);
}

.ui-table--collapsible .ui-table__group:has(.ui-table__state:checked) .ui-table__chevron::after {
  transform: rotate(-180deg);
}

/* ----------------------------
	 ui-table--collapsible-default-open (optional)
	 - Opt-in behavior: groups are expanded by default
	 - Keeps existing .ui-table--collapsible behavior unchanged
------------------------------- */

.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__row--detail>th,
.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__row--detail>td {
  padding: var(--space-xxs) var(--space-xs);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  border-bottom-width: 1px;
  border-bottom-color: var(--color-grey-300);
}

.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__row--detail>th {
  color: var(--color-text-default);
  font-weight: var(--font-weight-medium);
}

.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__row--detail>td {
  color: var(--color-text-default);
}

/* In this variant, checked means collapsed */
.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__group:has(.ui-table__state:checked) .ui-table__row--detail>th,
.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__group:has(.ui-table__state:checked) .ui-table__row--detail>td {
  padding: 0 var(--space-xxs);
  font-size: 0;
  line-height: 0;
  color: transparent;
  border-bottom-width: 0;
  border-bottom-color: transparent;
}

/* Chevron points down when collapsed */
.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__chevron::after {
  transform: rotate(-180deg);
}

.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__group:has(.ui-table__state:checked) .ui-table__chevron::after {
  transform: rotate(0deg);
}


/* =========================
	 ui-modal
============================ */

.ui-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1002;
  background-color: rgba(0, 0, 0, 0);
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-lg) var(--space-xs);
  box-sizing: border-box;
  transition: background-color 0.3s ease;
  overflow-y: auto;
}

.ui-modal.is-open {
  display: flex;
  background-color: rgba(0, 0, 0, 0.7);
}

.ui-modal__dialog {
  position: relative;
  width: 100%;
  background-color: var(--bg-surface);
  border-radius: var(--radius-component);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ui-modal.is-open .ui-modal__dialog {
  opacity: 1;
  transform: translateY(0);
}

/* 尺寸修飾 class 置於第一層容器 */
.ui-modal--xl .ui-modal__dialog {
  max-width: 1600px;
}

.ui-modal--lg .ui-modal__dialog {
  max-width: 1200px;
}

.ui-modal--md .ui-modal__dialog {
  max-width: 960px;
}

.ui-modal--sm .ui-modal__dialog {
  max-width: 500px;
}

.ui-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xxs);
  padding: var(--space-xs);
  background-color: var(--bg-surface-soft);
}


.ui-modal__close {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ui-modal__close i {
  background-image: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 0.2s ease;
}

.ui-modal__body {
  padding: var(--space-xs);
}


.ui-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-xxs);
  padding: var(--space-xs);
}

/* --- Sticky Variant (Header / Footer 固定，對話框主體捲動) --- */
.ui-modal--sticky {
  overflow: hidden; /* 防止外層滾動 */
}

.ui-modal--sticky .ui-modal__dialog {
  max-height: calc(100vh - (var(--space-lg) * 2));
  display: flex;
  flex-direction: column;
}

.ui-modal--sticky .ui-modal__header,
.ui-modal--sticky .ui-modal__footer {
  flex-shrink: 0;
}

.ui-modal--sticky .ui-modal__body {
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* 確保 Flexbox 內可正確滾動 */
}

@media (max-width: 580px) {
  .ui-modal {
    align-items: flex-start;
  }

  .ui-modal__footer {
    flex-direction: column;
  }

  .ui-modal__footer .ui-btn {
    width: 100%;
    justify-content: center;
  }
}


/* =========================
	 ui-loading
============================ */
/*
  使用方式：
    區塊用：element.classList.add('is-loading')
    整頁用：document.body.classList.add('is-loading--fullpage')
  JS 會自動在容器內注入 .ui-loading__overlay
*/

/* 區塊用：讓容器成為 overlay 的定位基準 */
.is-loading {
  position: relative;
}

/* 整頁用：防止 body 捲動 */
.is-loading--fullpage {
  overflow: hidden;
}

/* JS 注入的覆蓋層 */
.ui-loading__overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: inherit;
}

/* 整頁版覆蓋層改用 fixed */
.is-loading--fullpage > .ui-loading__overlay {
  position: fixed;
  z-index: 5002;
  border-radius: 0;
}

.ui-loading__dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ui-loading__dot {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background-color: var(--color-brand-blue-900);
  animation: ui-loading-bounce 1.4s ease-in-out infinite both;
}

.ui-loading__dot:nth-child(1) { animation-delay: -0.32s; }
.ui-loading__dot:nth-child(2) { animation-delay: -0.16s; }
.ui-loading__dot:nth-child(3) { animation-delay: 0s; }

@keyframes ui-loading-bounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
  40%            { transform: scale(1); opacity: 1;   }
}