@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, #004280 0%, #298EE0 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;
	--line-height-tight: 1;
	/* 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);
	--color-text-primary: var(--color-brand-blue-900);
	--color-text-success: var(--color-success);
	--color-text-warning: var(--color-warning);
	--color-text-error: var(--color-error);
	/* Border */
	--color-border: var(--color-grey-300);
	/* 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, span {
	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-primary);
}

.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-xxs);
	padding: var(--space-xs);
	border-radius: var(--radius-component);
	height: 100%;
}

	/* 針對標題設定最小高度，確保不論 1 行還 2 行都佔據 2 行的空間 */
	.ui-card__content .item__title {
		font-size: 18px; /* 根據你實際的字體大小調整 */
		line-height: 1.5; /* 關鍵：固定的行高 */
		min-height: 3em; /* 關鍵：1.5 line-height * 2 行 = 3em */
		/* 多載防護：如果未來標題不小心超過兩行，可以用 line-clamp 斷字，避免撐開 */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.ui-card__content .item__meta {
		margin-top: auto;
	}

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

	.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__title {
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.item__text {
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.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;
}



/*-------------------------
  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: 10001;
	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;
}

@media (max-width: 768px) {
	.ui-accordion__trigger {
		padding: var(--space-xxs);
	}
}


/* -------------------------------
     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 變體矮版 compact ----- */
.ui-kv-banner--compact .kv-banner__slide {
	min-height: 300px;
}

.ui-kv-banner--compact .kv-banner__content h1 {
	font-size: var(--font-size-h2);
	-webkit-line-clamp: 2;
}

.ui-kv-banner--compact .kv-banner__media {
	width: 52%;
}

.ui-kv-banner--compact .kv-banner__slide::before {
	right: -130px;
	bottom: -60px;
	width: 330px;
	height: 330px;
}

.ui-kv-banner--compact .kv-banner__slide .kv-banner__media::after {
	bottom: -15px;
	left: -25%;
	width: 85%;
	height: 85%;
}

.ui-kv-banner--compact .kv-banner__media--mask .kv-banner__media-inner {
	mask-position: left 75%;
}

.ui-kv-banner--compact .controls-wrap {
	bottom: 30px;
}

.ui-kv-banner--compact .kv-banner__content {
	gap: var(--space-xs);
	padding-top: var(--space-md);
}

.ui-kv-banner--compact .kv-banner__slide--dark .ui-btn--textlink {
	color: var(--color-text-inverse);
	font-size: var(--font-size-h4);
}


.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;
	object-position: center;
}

/* --- 影片變體 --- */
.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('css-img/kv-mask.svg');
	mask-image: url('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: 100;
}

.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;
	}

	.ui-kv-banner--compact .kv-banner__content {
		height: 170px;
	}

	.ui-kv-banner--compact .kv-banner__media {
		width: 100%;
		aspect-ratio: 22 / 10;
	}

	.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");
	}

	.ui-kv-banner--compact .kv-banner__slide::before {
		width: 35%;
		height: 35%;
		right: -15%;
		top: 17%;
	}
}

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

	.ui-kv-banner--compact .kv-banner__content {
		height: 140px;
	}

	.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-xs) 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.75);
	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: 1;
}

.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);
	justify-content: space-between;
}

.ui-carousel__body .ui-carousel__content {
	width: 78%;
}

.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,
.ui-table tbody tr:first-child th[rowspan] {
	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;
	}
}


/* =========================
   Form Elements
============================ */

/* --------- ui-input --------- */
.ui-input {
	display: block;
	width: 100%;
	padding: var(--space-xxs);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-base);
	color: var(--color-text-default);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-element);
	outline: none;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	box-sizing: border-box;
}

	.ui-input::placeholder {
		color: var(--color-text-disabled);
	}

	.ui-input:focus {
		outline: none;
	}

	.ui-input:disabled {
		background: var(--bg-surface-soft);
		color: var(--color-text-disabled);
		cursor: not-allowed;
	}

/* --------- ui-field --------- */
.ui-field {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-xxs) / 2);
}

.ui-field__label {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-default);
	line-height: var(--line-height-base);
}

.ui-field.is-disabled .ui-field__label {
	color: var(--color-text-disabled);
}

/* --------- ui-field-group --------- */
.ui-field-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

	.ui-field-group.ui-field-group--inline {
		flex-direction: row;
		align-items: flex-end;
		flex-wrap: wrap;
		gap: var(--space-xs);
	}

		.ui-field-group.ui-field-group--inline > .ui-field {
			flex: 1;
			min-width: 0;
		}

@media (max-width: 768px) {
	.ui-field-group.ui-field-group--inline {
		flex-direction: column;
	}
}

/* --------- ui-input-group --------- */
.ui-input-group {
	position: relative;
	display: flex;
	align-items: stretch;
}

	.ui-input-group .ui-input {
		flex: 1;
		min-width: 0;
		border-radius: var(--radius-element);
		border-right: 1px solid var(--color-border);
		padding-right: 36px;
	}

.ui-input-group__prepend {
	display: flex;
	align-items: center;
	padding: 0 0 0 var(--space-xxs);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-right: none;
	border-radius: var(--radius-element) 0 0 var(--radius-element);
}

	.ui-input-group__prepend i {
		background-image: var(--color-brand-gradient);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.ui-input-group__prepend + .ui-input {
		border-radius: 0 var(--radius-element) var(--radius-element) 0;
		border-left: none;
	}

.ui-input-group__clear {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--color-text-muted);
	cursor: pointer;
	transition: color 0.3s ease;
}

	.ui-input-group__clear:hover {
		color: var(--color-text-default);
	}

.ui-input-group__toggle {
	display: flex;
	align-items: center;
	padding: 0 var(--space-xxs);
	background: var(--bg-surface-soft);
	border: 1px solid var(--color-border);
	border-left: none;
	border-radius: 0 var(--radius-element) var(--radius-element) 0;
	color: var(--color-text-default);
	cursor: pointer;
	transition: background-color 0.3s ease;
}

	.ui-input-group__toggle:hover {
		background-color: var(--color-border);
	}

.ui-input-group__select {
	padding: 0 var(--space-xxs);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 0 var(--radius-element) var(--radius-element) 0;
	color: var(--color-text-default);
	font-size: var(--font-size-base);
	cursor: pointer;
	outline: none;
}

	.ui-input-group__select option {
		background: var(--color-white);
		color: var(--color-text-default);
	}

.ui-input-group .ui-input:focus {
	box-shadow: none;
}

/* -- highlight variant -- */
.ui-input-group--highlight {
	border-radius: var(--radius-pill);
}

	.ui-input-group--highlight .ui-input {
		border: 2px solid #53c3fd;
		border-right: none;
		border-radius: var(--radius-pill) 0 0 var(--radius-pill);
		padding-left: var(--space-xs);
	}

		.ui-input-group--highlight .ui-input:focus {
			box-shadow: none;
		}

	.ui-input-group--highlight .ui-btn {
		border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
	}

	.ui-input-group--highlight .ui-input-group__prepend {
		border: none;
		border-radius: var(--radius-pill) 0 0 var(--radius-pill);
	}

		.ui-input-group--highlight .ui-input-group__prepend + .ui-input {
			border: none;
			border-radius: 0;
		}

	.ui-input-group--highlight .ui-input-group__clear {
		border: none;
		border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
	}

	.ui-input-group--highlight .ui-input-group__select {
		border: none;
		border-left: 1px solid var(--color-border);
		border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
	}

	.ui-input-group--highlight .ui-input-group__toggle {
		border: none;
		border-left: 1px solid var(--color-border);
		border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
	}

/* --------- ui-select --------- */
.ui-select {
	display: block;
	width: 100%;
	padding: var(--space-xxs);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-base);
	color: var(--color-text-default);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-element);
	outline: none;
	cursor: pointer;
	transition: border-color 0.3s ease;
	box-sizing: border-box;
}

	.ui-select:focus {
		outline: none;
	}

	.ui-select:disabled {
		background: var(--bg-surface-soft);
		color: var(--color-text-disabled);
		cursor: not-allowed;
	}

/* --------- ui-checkbox --------- */
.ui-checkbox {
	display: inline-flex;
	align-items: flex-start;
	gap: calc(var(--space-xxs) / 2);
	cursor: pointer;
	user-select: none;
	line-height: 1.5;
}

	.ui-checkbox:has(.ui-checkbox__input:disabled) {
		cursor: not-allowed;
	}

.ui-checkbox__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.ui-checkbox__box {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 20px;
	height: 20px;
	border-radius: var(--radius-element);
	background: var(--bg-surface);
	transition: all 0.2s ease;
	flex-shrink: 0;
	border: 1px solid var(--color-border);
	box-sizing: border-box;
}

	.ui-checkbox__box::after {
		content: '\f00c';
		font-family: 'Font Awesome 6 Pro';
		font-weight: 900;
		font-size: 12px;
		color: var(--color-white);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0);
		transition: transform 0.15s ease;
		line-height: 1;
	}

.ui-checkbox__input:checked + .ui-checkbox__box {
	background: var(--color-brand-gradient);
	border-color: transparent;
	border: none;
}

	.ui-checkbox__input:checked + .ui-checkbox__box::after {
		transform: translate(-50%, -50%) scale(1);
	}

.ui-checkbox__input:focus-visible + .ui-checkbox__box {
	box-shadow: 0 0 0 3px var(--color-brand-blue-glow);
}

.ui-checkbox__input:disabled + .ui-checkbox__box {
	border-color: var(--color-grey-300);
}

.ui-checkbox__input:checked:disabled + .ui-checkbox__box {
	background: var(--color-brand-gradient);
	border-color: transparent;
	opacity: 0.5;
}

.ui-checkbox__input:disabled ~ .ui-checkbox__label {
	color: var(--color-text-disabled);
}

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

/* --------- ui-radio --------- */
.ui-radio {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--space-xxs) / 2);
	cursor: pointer;
	user-select: none;
	line-height: 1.5;
}

	.ui-radio:has(.ui-radio__input:disabled) {
		cursor: not-allowed;
	}

.ui-radio__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.ui-radio__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bg-surface);
	transition: all 0.2s ease;
	flex-shrink: 0;
	border: 1px solid var(--color-border);
	box-sizing: border-box;
}

	.ui-radio__dot::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0);
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--color-brand-gradient);
		transition: transform 0.15s ease;
	}

.ui-radio__input:checked + .ui-radio__dot {
	background: var(--color-brand-gradient);
	border-color: transparent;
	border: none;
}

	.ui-radio__input:checked + .ui-radio__dot::after {
		background: var(--color-white);
		transform: translate(-50%, -50%) scale(1);
	}

.ui-radio__input:focus-visible + .ui-radio__dot {
	box-shadow: 0 0 0 3px var(--color-brand-blue-glow);
}

.ui-radio__input:disabled + .ui-radio__dot {
	border-color: var(--color-grey-300);
}

.ui-radio__input:checked:disabled + .ui-radio__dot {
	background: var(--color-brand-gradient);
	border-color: transparent;
	opacity: 0.5;
}

.ui-radio__input:disabled ~ .ui-radio__label {
	color: var(--color-text-disabled);
}

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


/* --------- ui-tag --------- */
.ui-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xxs);
	padding: 5px var(--space-xxs);
	color: var(--color-text-default);
	background: var(--color-white);
	border-radius: var(--radius-element);
	border: 1px solid var(--color-border);
	transition: color 0.3s ease;
	cursor: default;
}

	.ui-tag:has(.ui-tag__remove) {
		background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--color-brand-gradient) border-box;
		border-color: transparent;
	}

.ui-tag--soft {
	background: var(--bg-brand-light);
	color: var(--color-text-default);
}

	.ui-tag--soft:has(.ui-tag__remove) {
		background: linear-gradient(var(--bg-brand-light), var(--bg-brand-light)) padding-box, var(--color-brand-gradient) border-box;
	}

.ui-tag--strong {
	background: var(--bg-brand-deep);
	color: var(--color-text-inverse);
}

	.ui-tag--strong:has(.ui-tag__remove) {
		background: linear-gradient(var(--bg-brand-deep), var(--bg-brand-deep)) padding-box, var(--color-brand-gradient) border-box;
	}

.ui-tag__category {
	color: var(--color-text-muted);
	font-weight: var(--font-weight-regular);
}

.ui-tag--soft .ui-tag__category {
	color: var(--color-text-muted);
}

.ui-tag--strong .ui-tag__category {
	color: var(--color-grey-400);
}

.ui-tag__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font-size: var(--font-size-base);
	background-image: var(--color-brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
}

.ui-tag--soft .ui-tag__remove {
	background-image: var(--color-brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ui-tag--strong .ui-tag__remove {
	background-image: var(--color-brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* -- ui-tag__text / ui-tag__name -- */
.ui-tag:has(.ui-tag__text) {
	max-width: 100%;
}

.ui-tag__text {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-xxs);
	flex: 1;
	min-width: 0;
	align-items: center;
}

	.ui-tag__text .ui-tag__category,
	.ui-tag__name {
		white-space: nowrap;
	}

/* --------- ui-tag-group --------- */
.ui-tag-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xxs);
}

.ui-tag-group--vertical {
	flex-direction: column;
	align-items: flex-start;
}

/* --------- ui-badge --------- */
.ui-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	font-size: 14px;
	color: var(--color-text-default);
	background: var(--color-white);
	border-radius: var(--radius-pill);
	line-height: 1;
}

.ui-badge--soft {
	background: var(--bg-brand-light);
	color: var(--color-text-default);
}

.ui-badge--strong {
	background: var(--bg-brand-deep);
	color: var(--color-text-inverse);
}