/* Noto Sans SC (简体中文回退) */
@font-face {
	font-family: 'Noto Sans SC';
	src: url('/webfonts/noto-sans-sc.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}
/* Noto Sans TC (繁体中文回退) */
@font-face {
	font-family: 'Noto Sans TC';
	src: url('/webfonts/noto-sans-tc.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}
/* Jost (西文字体回退) */
@font-face
{
	font-family: 'Jost';
	src: url('/webfonts/jost-normal.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: 'Jost';
	src: url('/webfonts/jost-italic.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}


/* Karla (西文字体回退) */
@font-face
{
	font-family: 'Karla';
	src: url('/webfonts/karla-normal.woff2') format('woff2');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: 'Karla';
	src: url('/webfonts/karla-italic.woff2') format('woff2');
	font-weight: 300 800;
	font-style: italic;
	font-display: swap;
}














/*
@font-face {
    font-family: "Futura W01 Bold";
    src: url(/webfonts/FuturaW01-Bold.woff2) format("woff2");
    font-display: swap
}
*/












:where(:root)
{
	--title-font-family	: 'Jost', 'Noto Sans SC', 'Noto Sans TC';
	--title-font-weight	: bold;
	
	--glyph-font	: "Font Awesome 6 Free";
	--glyph--prev	: "\f053";
	--glyph--next	: "\f054";
	--glyph--redirect	: "\f054";
	--glyph--email	: "\f0e0";
	--glyph--location	: "\f3c5";
	--glyph--play-video	: "\f144";
	--glyph--search	: "\f002";
}

:where(:root)
{
	--standard-edge-xs	: 1rem;
	
	--standard-width-sm		: 540px;
	--standard-width-md		: 720px;
	--standard-width-lg		: 960px;
	--standard-width-xl		: 1140px;
	--standard-width-xxl	: 1320px;
}

:where(.zone)
{
	:where(.xs &)
	{
		--standard-width	: 1fr;
		--standard-width	: calc(100% - 2 * var(--standard-edge));
		--standard-edge	: var(--standard-edge-xs);
		--spacing-y	: 5rem;
	}
	
	:where(.sm &)
	{
		--standard-width	: var(--standard-width-sm);
		--standard-edge	: 1fr;
		--spacing-y	: 5rem;
	}
	
	:where(.md &)
	{
		--standard-width	: var(--standard-width-md);
		--standard-edge	: 1fr;
		--spacing-y	: 5rem;
	}
	
	:where(.lg &)
	{
		--standard-width	: var(--standard-width-lg);
		--standard-edge	: 1fr;
		--spacing-y	: 5rem;
	}
	
	:where(.xl &)
	{
		--standard-width	: var(--standard-width-xl);
		--standard-edge	: 1fr;
		--spacing-y	: 5rem;
	}
	
	:where(.xxl &)
	{
		--standard-width	: var(--standard-width-xxl);
		--standard-edge	: 1fr;
		--spacing-y	: 5rem;
	}
	
	--compact-rate	: 0.8;
	--compact-shrink-rate	: calc( ( 1 - var(--compact-rate) ) * 0.5 );
	--compact-shrink	: calc( var(--compact-shrink-rate) * var(--standard-width) );
	--compact-width	: calc(var(--standard-width) * var(--compact-rate));
}

:where(.zone)
{
	display	: grid;
	
	/*
	grid-template-columns	:
		[full-start]
			var(--standard-edge)
		[standard-start]
			var(--standard-width)
		[standard-end]
			var(--standard-edge)
		[full-end]
	;
	*/
	
	grid-template-columns	:
		[full-start]
			var(--standard-edge)
		[standard-start]
			var(--compact-shrink)
		[compact-start]
			var(--compact-width)
		[compact-end]
			var(--compact-shrink)
		[standard-end]
			var(--standard-edge)
		[full-end]
	;
	
	:where(&.flush)
	{
		padding	: 0;
	}
	
	:where(&:not(.flush))
	{
		padding-top	: var(--spacing-y);
		padding-bottom	: var(--spacing-y);
	}
	
	row-gap	: var(--spacing-y);
	
	:where(&>.wide)
	{
		grid-column	: full;
	}
	
	:where(&>.standard)
	{
		grid-column	: standard;
	}
	
	:where(&>.compact)
	{
		grid-column	: compact;
	}
	
	:where(&>.content)
	{
		display	: grid;
	}
}

:where(button)
{
	cursor	: pointer;
}

:where(a.button, button.button)
{
	/* 设置 */
	
	--glyph-width	: 1em;
	--text-width	: auto;
	--height		: auto;
	--cursor		: pointer;
	--glyph-offset	: 0em;
	--hover--glyph-offset	: 0.25em;
	
	--press-offset	: 3px;
	--hover--press-offset	: 4px;
	
	/*
	--font-size	: 1em;
	--padding-y	: 0.5em;
	--padding-x	: 1em;
	*/
	--font-size	: 1.125em;
	--padding-y	: 0.75em;
	--padding-x	: 1.125em;
	
	--font-weight	: normal;
	
	/* 变体设置 */
	:where(&, &.primary)
	{
		--color	: black;
		--background	: var(--bs-primary);
		--hover--color	: white;
		--hover--background	: black;
		--shadow-color	: rgb(var(--bs-primary-rgb), 0.5);
		--hover--shadow-color	: rgb(var(--bs-dark-rgb), 0.7);
	}
	
	:where(&.current)
	{
		--cursor	: default;
	}
	
	:where(&.secondary)
	{
		--color	: white;
		--background	: var(--bs-secondary);
		--hover--color	: white;
		--hover--background	: black;
		--shadow-color	: rgb(var(--bs-secondary-rgb), 0.5);
		--hover--shadow-color	: rgb(var(--bs-dark-rgb), 0.7);
	}
	
	:where(&.prev)
	{
		--has-before	: 1;
		--before-content	: var(--glyph--prev);
	}
	
	:where(&.next)
	{
		--has-after	: 1;
		--after-content	: var(--glyph--next);
	}
	
	:where(&.redirect)
	{
		--has-after	: 1;
		--after-content	: var(--glyph--redirect);
	}
	
	:where(&.search)
	{
		--has-before	: 1;
		--before-content	: var(--glyph--search);
		--glyph-width	: 1.5em;
		
	}
	
	/*布局*/
	display	: inline-grid;
	grid-template-columns	:
		[full-start before-start]
			calc(var(--has-before, 0) * var(--glyph-width))
		[before-end text-start]
			var(--text-width, 1fr)
		[text-end after-start]
			calc(var(--has-after, 0) * var(--glyph-width))
		[after-end full-end]
	;
	
	grid-template-rows	: [full-start] var(--height) [full-end];
	
	align-items	: center;
	align-content	: center;
	justify-content	: center;
	justify-items	: center;
	
	&::before
	{
		grid-column	: before;
		display	: grid;
		place-self	: center;
	}
	
	&::after
	{
		grid-column	: after;
		display	: grid;
		place-self	: center;
	}
	
	/* 功能 */
	
	border	: none;
	text-decoration	: none;
	cursor	: var(--cursor);
	user-select	: none;
	white-space	: nowrap;
	font-size	: var(--font-size);
	font-weight	: var(--font-weight);
	color	: var(--color);
	fill	: var(--color);
	background	: var(--background);
	
	--shadow-offset	: var(--press-offset);
	--self-offset	: calc(-1 * var(--press-offset));
	
	box-shadow	: var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-color);
	transform	: translate(calc(5px + var(--self-offset)), var(--self-offset));
	
	padding	: var(--padding-y) var(--padding-x);
	
	/* 箭头 */
	&::before, &::after
	{
		font-family	: var(--glyph-font);
	}
	
	&::before
	{
		content	: var(--before-content, "");
	}
	
	&::after
	{
		content	: var(--after-content, "");
	}
	
	/* 状态 */
	
	&::before
	{
		transform	: translateX( calc( -1 * var(--glyph-offset) ) );
	}
	
	&::after
	{
		transform	: translateX(var(--glyph-offset));
	}
	
	&, &::before, &::after
	{
		transition	: all 0.2s;
	}
	
	:where(&:hover)
	{
		--color	: var(--hover--color);
		--background	: var(--hover--background);
		--glyph-offset	: var(--hover--glyph-offset);
		--shadow-color	: var(--hover--shadow-color);
		--press-offset	: var(--hover--press-offset);
	}
}

:where(body:not([data-page-name="home"]) h1)
{
	----text-shadow	: 0.125rem 0.125rem 0.5px #00000040;
}



:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6)
{
	margin	: 0px;
	font-weight	: unset;
	------line-height	: 1;
	
	
	
	&:where(h1, .h1)
	{
		font-family	: var(--title-font-family);
		font-weight	: var(--title-font-weight);
		
		:where(.xs, .sm, .md) &
		{
			font-size	: 1.5rem;
		}
		
		:where(.lg, .xl, .xxl) &
		{
			font-size	: 2.5rem;
			font-size	: 3.5rem;
		}
		
		
	}
	
	&:where(h5, .h5)
	{
		:where(.xs, .sm, .md) &
		{
			font-size	: 1rem;
		}
		
		:where(.lg, .xl, .xxl) &
		{
			font-size	: 1.125rem;
		}
	}
	
	&:where(h6, .h6)
	{
		:where(.xs, .sm, .md) &
		{
			font-size	: 1rem;
		}
		
		:where(.lg, .xl, .xxl) &
		{
			font-size	: 1.1rem;
		}
	}
	
}

:where(a.item)
{
	text-decoration	: none;
	----color	: white;
}

:where(img, video, iframe, object, embed)
{
	min-width	: 0;
	/* 浏览器默认min-width:auto，对于img等源自外部资源的替换元素，auto意味着该资源的固有尺寸，也就是含义为“宽度不可小于其固有尺寸”，即“不可缩小（至网格轨道尺寸）”；在放入网格轨道的场景下，此行为是违反直觉的，所以设置为0来遵循直觉
	*/
	min-height	: 0;
	max-width	: 100%;
	/* 可选：防止意外溢出 */
	height: auto;
	/* 保持比例 */
	object-fit	: cover;
}

:where(a.button, .item, .rounded-corners)
{
	border-radius	: 0.5rem;
	overflow	: hidden;
	
}

:where(dl, dt, dd)
{
	margin	: 0;
	margin-bottom	: 0.5rem;
	
}


















:where(#kv-banner.zone)
{
	--background-color	: var(--bs-secondary);
	--color	: white;
	--background-image	: none;
	
	:where(.xxl, .xl, .lg) &
	{
		--spacing-top	: 10rem;
		--spacing-bottom	: 8.75rem;
		--title-size	: 5rem;
		--subtitle-size	: 3rem;
		
		--spacing-top	: 16rem;
		--spacing-bottom	: 12rem;
	}
	
	:where(.md, .sm, .xs) &
	{
		--spacing-top	: 10rem;
		--spacing-bottom	: 5rem;
		--title-size	: 3rem;
		--subtitle-size	: 2rem;
	}
	
	gap	: 0;
	
	display	: grid;
	grid-template-rows	:
		[spacing-start]
			var(--spacing-top)
		[spacing-end text-start]
			auto
		[text-end spacing-start]
			var(--spacing-bottom)
		[spacing-end]
	;
	
	background-color	: var(--background-color, var(--bs-secondary));
	background-image	: var(--background-image, none);
	background-repeat	: no-repeat;
	background-size		: cover;
	background-position	: center;
	
	:where(&>.bg-mask)
	{
		grid-row	: 1 / -1;
		background	: #00000040;
	}
	
	:where(&>.text)
	{
		grid-row	: text;
		place-self	: center;
		
		display	: grid;
		grid-template-rows	: auto auto;
		place-items	: center;
		place-content	: center;
		
		color	: var(--color);
		
		:where(&>h1)
		{
			text-align	: center;
		}
		
		:where(&>h2)
		{
			text-align	: center;
		}
	}
}

:where(#main-content.zone)
{
	background	: var(--bs-light);
}

:where(tr)
{
	border-bottom	: 1px solid lightgray;
}

:where(td)
{
	padding	: 0.25rem 0.5rem;
	padding	: 0.75rem 1.5rem;
}

:where(td p)
{
	margin	: 0px;
}

:where(table)
{
	width	: fit-content;
	margin: 0 auto;
	border-collapse: collapse;
}

:where(form)
{
	margin	: 0;
}


:where(article a, p a, a.plain):not(.button)
{
	color	: black;
	text-decoration	: underline;
	
	transition	: all 0.2s;
	
	-----------padding	: 0 0.5em;
	
	&:hover
	{
		color	: white;
		background	: black;
	}
}




:where(.wrap-when-compact)
{
	& :where(br)
	{
		:where(.xs, .sm, .md) &
		{
			
		}
		
		:where(.lg, .xl, .xxl) &
		{
			display	: none;
		}
	}
}

:where(.shine)
{
	--beam-size	: 10em;
	--beam-size	: 40em;/*???*/
	--beam-initial-pos	: calc(-1 * var(--beam-size));
	--beam-final-pos	: calc(100% + 1 * var(--beam-size));
	--color	: transparent;
	--beam-pos	: var(--beam-initial-pos);
	
	--scale	: 1.05;
	
	transform	: scale(var(--scale));
	
	display	: inline-block;
	
	color	: transparent;
	background-clip	: text;
  	background-color	: var(--color);
	background-position	: var(--beam-pos) center;
	background-repeat	: no-repeat;
	transition	: none;
	background-size: var(--beam-size);
	
	.text:has(&)
	{
		display	: grid;
		grid-template-columns	: auto;
		grid-template-rows	: auto;
		
		&>span
		{
			grid-column	: 1;
			grid-row	: 1;
			
		}
	}
	
	--shining	: 0.0;
	
	#hero:has(&):hover &,
	[data-shine-on-hover]:has(&):hover &
	{
		--beam-pos	: var(--beam-final-pos);
		transition	: background-position 0.8s linear;
		--shining	: 1.0;
	}
	
	background-image	: url("/img/beam.svg");
}


.equally>*
{
	flex	: 1;
}

.equally
{
	justify-content: stretch;
}


.card
{
	--bs-card-bg	: transparent;
}

:root
{
	--bs-card-bg	: transparent;
	--bs-body-font-family	: "Karla", "Noto Sans SC", "Noto Sans TC";
}

body
{
}

/*
:where(:not(ol)>li, ul li)::marker
{
	color	: var(--bs-secondary);
}

:where(ul, ol)
{
	margin	: 0;
	padding-left	: 0;
	list-style-position: inside;
}
*/


/*:where(tr:nth-child(even), td:nth-child(even))*/
:where(tr:nth-child(1), td:nth-child(1))
{
	background-color: rgb(var(--bs-secondary-rgb), 0.25);
	font-weight	: bold;
}

:where(.table-scroller)
{
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch; /* 移动端顺滑滚动 */
}







:where(:not(ol)>li, ul li)::marker
{
	color	: var(--bs-secondary);
}

:where(ul, ol)
{
	margin	: 0;
	padding-inline-start	: 1.25rem;
}