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

@media (min-width: 0px)
{
	:where(:root)
	{
		--standard-width	: 1fr;
		--standard-padding	: var(--standard-padding-xs);
	}
}

@media (min-width: 576px)
{
	:where(:root)
	{
		--standard-width	: var(--standard-width-sm);
		--standard-padding	: 1fr;
	}
}

@media (min-width: 768px)
{
	:where(:root)
	{
		--standard-width	: var(--standard-width-md);
		--standard-padding	: 1fr;
	}
}

@media (min-width: 992px)
{
	:where(:root)
	{
		--standard-width	: var(--standard-width-lg);
		--standard-padding	: 1fr;
	}
}

@media (min-width: 1200px)
{
	:where(:root)
	{
		--standard-width	: var(--standard-width-xl);
		--standard-padding	: 1fr;
	}
}

@media (min-width: 1400px)
{
	:where(:root)
	{
		--standard-width	: var(--standard-width-xxl);
		--standard-padding	: 1fr;
	}
}




















/* 滚动时检测哨兵、高度收缩、背景色渐变 */

:where(body:not([data-page-name='home'])>header)
{
	--nav-height	: 80px;
	--full-height	: calc(1.25 * var(--nav-height));
}

:where(body:not([data-page-name='home'])>.scroll-sentinel.outside-view + header)
{
	--nav-height	: 60px;
	--full-height	: var(--nav-height);
}

:where(body[data-page-name='home']>header)
{
	--nav-height	: 130px;
	--full-height	: calc(2 * var(--nav-height));
	--bg-scrolled	: var(--bs-secondary);
}

:where(body[data-page-name='home']>.scroll-sentinel.outside-view + header)
{
	--nav-height	: 60px;
	--full-height	: var(--nav-height);
}

:where(body>header)
{
	position	: fixed;
	left	: 0;
	right	: 0;
	
	display	: grid;
	
	grid-template-columns	:
		[full-start]
			var(--standard-padding)
		[standard-start]
			var(--standard-width)
		[standard-end]
			var(--standard-padding)
		[full-end]
	;
	
	grid-template-rows	:
		[full-start nav-start]
			var(--nav-height)
		[nav-end]
			calc(var(--full-height) - var(--nav-height))
		[full-end]
	;
}

:where(body>header>nav)
{
	grid-column	: standard;
	grid-row	: nav;
	
	z-index	: 1;
}

:where(body>header>.bg-top)
{
	grid-column	: full;
	grid-row	: full;
	background	: linear-gradient(
		to bottom,
		#000000B0,
		#00000000
	);
}

:where(body>header>.bg-scrolled)
{
	grid-column	: full;
	grid-row	: nav;
	background	: var(--bg-scrolled, var(--bs-secondary));
}


:where(.scroll-sentinel)
{
	position	: absolute;
	top	: 0;
	height	: 0;
	z-index	: -1;
	pointer-events	: none;
}

:where(:where(.scroll-sentinel.outside-view + header)>.bg-scrolled)
{
	opacity	: 1;
}

:where(:where(.scroll-sentinel.outside-view + header)>.bg-top)
{
	opacity	: 0;
}

:where(:where(.scroll-sentinel.inside-view + header)>.bg-scrolled)
{
	opacity	: 0;
}

:where(:where(.scroll-sentinel.inside-view + header)>.bg-top)
{
	opacity	: 1;
}

:where(.scroll-sentinel.inside-view + header>nav)
{
	--nav-item-hover-background	: var(--bs-secondary-rgb);
}

:where(:not(.scroll-sentinel.inside-view) + header>nav)
{
	--nav-item-hover-background	: var(--bs-dark-rgb);
}


:where(
	body>header,
	body>header>:where(
		.bg-scrolled,
		.bg-top,
		nav
	)
)
{
	transition	: all 1s;
}

/* nav 网格定义 */

:where(body>header>nav)
{
	display	: grid;
	
	grid-template-rows	: 1fr;
	
	align-items	: stretch;
	justify-content	: stretch;
	
	:where(&>*)
	{
		grid-row	: 1;
	}
	
	:where(&>.courses)
	{
		grid-column	: courses;
	}
	
	:where(&>.apply)
	{
		grid-column	: apply;
	}
	
	:where(&>.support)
	{
		grid-column	: support;
	}
	
	:where(&>.search)
	{
		grid-column	: search;
	}
	
	:where(&>.menu)
	{
		grid-column	: menu;
	}
	
	:where(&>.en)
	{
		grid-column	: en;
	}
	
	:where(&>.branding)
	{
		grid-column	: branding;
	}
	
	:where(&>:where(.text-item))
	{
		text-shadow	: 0.125rem 0.125rem 0 #00000080;
	}
	
	:where(&>:where(.text-item, .glyph-item, .branding))
	{
		display	: grid;
		justify-content	: stretch;
		align-items	: stretch;
		
		:where(&>a)
		{
			display	: grid;
			justify-content	: center;
			align-items	: center;
			font-size	: var(--item-font-size);
			
			transition	: all 0.2s;
		}
	}
	
	:where(&>.branding)
	{
		z-index	: -1;
		
	}
	
	:where(&>.branding>a)
	{
		font-weight	: normal;
	}

	:where(&>.text-item>a)
	{
		font-weight	: bold;
	}

	:where(&>.glyph-item>a)
	{
		font-weight	: normal;
	}

	:is(& a)
	{
		color	: white;
		text-decoration	: none;
	}
	
	:is(&>:where(.text-item, .glyph-item) a):hover
	{
		transform	: translate(0, -2px);
		background	: rgba(var(--nav-item-hover-background), 60%);
	}
}

/* nav 自适应位置、尺寸及隐藏 */
/* 目前写在nav基本定义的后边，所以具有覆盖意图的设置暂时可以用:where */


/*@media (min-width: 0px)*/
@media (max-width: 991.99px)
{
/*:where(body:where(.xs, .sm, .md)>header>nav)*/
:where(body>header>nav)
{
	--glyph-item-width	: 2em;
	--item-font-size	: 18px;
	--branding-logo-height	: 24px;
	--branding-font-size	: 16px;
	
	--branding-width	: 14em;
	
	grid-template-columns	:
		[branding-start search-start]
			var(--glyph-item-width)
		[search-end blank-start]
			1fr
		[blank-end menu-start]
			var(--glyph-item-width)
		[menu-end branding-end]
	;
	
	:where(&>:where(.text-item))
	{
		display	: none;
	}
	
	:where(&>.branding>a)
	{
		justify-self	: center;
		
		display	: grid;
		
		grid-template-columns	: var(--branding-width);
		grid-template-rows	: repeat(2, 1fr);
		
		justify-content	: center;
		
		row-gap	: 0.25rem;
		
		:where(&>.logo)
		{
			align-self	: end;
			
			display	: grid;
			grid-template-rows	: auto;
			justify-content	: center;
			align-items	: end;
			
			:where(&>img)
			{
				width	: 100%;
				object-fit	: contain;
				overflow	: hidden;
			}
		}
		
		:where(&>.title)
		{
			align-self	: start;
			
			display	: grid;
			justify-content	: center;
			align-items	: start;
		}
	}
}

.wide-only
{
	display	: none !important;
}

}
/*:where(body:where(.lg, .xl, .xxl)>header>nav)*/
@media (min-width: 992px)
{
:where(body>header>nav)
{
	--text-item-width	: 5em;
	--glyph-item-width	: 3.5em;
	--item-font-size	: 24px;
	--branding-logo-width	: 170px;
	--branding-logo-height	: 48px;
	--branding-font-size	: 24px;
	--branding-divider-thickness	: 0.25ch;
	--branding-divider-length	: 48px;
	--branding-divider-spacing	: 0.5em;
	--branding-title-width	: 9em;
	
	--branding-offset	: calc( (var(--branding-title-width) - var(--branding-logo-width) ) / 2 );
	
	/*(LOGO宽度 + 竖线宽度 + 间距) / 2 - 竖线宽度 / 2*/
	
	grid-template-columns	:
		[branding-start courses-start]
			var(--text-item-width)
		[courses-end apply-start]
			var(--text-item-width)
		[apply-end support-start]
			var(--text-item-width)
		[support-end blank-start]
			1fr
		[blank-end search-start]
			var(--glyph-item-width)
		[search-end menu-start]
			var(--glyph-item-width)
		[menu-end en-start]
			var(--glyph-item-width)
		[en-end branding-end]
	;
	
	:where(&>.branding>a)
	{
		justify-self	: center;
		
		display	: grid;
		column-gap	: var(--branding-divider-spacing);
		padding	: 0 var(--branding-divider-spacing);
		
		transform	: translateX(var(--branding-offset));
		
		grid-template-columns	:
			[logo-start]
				auto
			[logo-end divider-start]
				var(--branding-divider-thickness)
			[divider-end title-start]
				auto
			[title-end]
		;
		
		justify-content	: center;
		align-items	: stretch;
		
		:where(&>.logo)
		{
			grid-column	: logo;
		}
		
		:where(&>.divider)
		{
			grid-column	: divider;
			
			background	: white;
			
			margin	: calc((var(--nav-height) - var(--branding-divider-length)) / 2) 0;
		}
		
		:where(&>.title)
		{
			grid-column	: title;
		}
		
		:where(&>*)
		{
			display	: grid;
			align-items	: center;
		}
	}
}

.compact-only
{
	display	: none !important;
}
	
}






























#menu
{
	border	: 1px solid var(--bs-primary);
	background	: #FFFFFFE0;
	-transition	: all .2s;
	height	: fit-content;
	top	: 65px;
	-margin-top	: 130px;
}

/*
#menu:not(.show)
{
	opacity	: 0.0;
}
*/

#menu.show,
#menu.showing,
#menu.hiding
{
	top	: 65px;
	overflow	: hidden;
	-opacity	: 1.0;
}

#menu.hiding
{
	-top	: 130px;
}

#menu.show
{
	-top	: 130px;
}

#menu.showing
{
	-top	: 130px;
}

#menu a
{
	text-decoration	: none !important;
	color	: var(--bs-secondary);
}

#menu dt
{
	------margin-top		: 0.5rem;
	------margin-bottom	: 0.5rem;
	------padding	: 0.5rem;
	border-bottom	: 1px solid gray;
	text-align	: center;
	color	: black;
}

#menu dd
{
	margin-bottom	: 0.5rem;
	padding	: 0 1rem;
}

#menu dt.gap-top
{
	-margin-top	: 2rem;
}

#menu dt.deco-0
{
	border	: 0;
}





















/********************************************************************/
:where(#social-qrcodes.zone)
{
	--spacing-y	: 2.5rem;
	--qr-code-size	: 128px;
	background	: var(--bs-primary);
	
	:where(&>.title)
	{
	}
	
	:where(&>.content)
	{
		display	: grid;
		
		grid-template-rows	: auto auto;
		
		&>:where(.title)
		{
			grid-row	: 1;
		}
		
		&>:where(.list)
		{
			grid-row	: 2;
			
			display	: grid;
			
			:where(.xs, .sm, .md) &
			{
				grid-auto-columns	: var(--qr-code-size);
				grid-auto-flow	: row;
			}
			
			:where(.lg, .xl, .xxl) &
			{
				grid-auto-columns	: var(--qr-code-size);
				grid-auto-flow	: column;
			}
			
			column-gap	: 2.5rem;
			row-gap	: 1.5rem;
			
			:where(&>.item)
			{
				display	: grid;
				
				grid-template-columns	: 1fr;
				
				:where(&>*)
				{
					grid-column	: 1;
				}
				
				grid-template-rows	: auto auto;
				
				row-gap	: 0.25rem;
				
				grid-column	: auto;
				
				:where(&>img)
				{
					grid-row	: 1;
					
					height	: auto;
					
					border-radius	: 0.5rem;
				}
				
				:where(&>h5)
				{
					grid-row	: 2;
					
					text-align	: center;
				}
				
				border-radius	: 0;
			}
		}
		
		row-gap	: 2.5rem;
		
		place-content	: center;
		place-items	: center;
		
	}
}

:where(#links.zone)
{
	padding-top	: 2.5rem;
	padding-bottom	: 2.5rem;
	
	background	: var(--bs-dark);
	
	font-size	: 0.875rem;
	
	:where(.xs, .sm) &>:where(.content)
	{
		grid-column	: standard;
	}
	
	&>:where(.content)
	{
		--glyph-element-size	: 1lh;
		--glyph-scale			: 1.5;
		--glyph-gap				: calc( 1lh * ( var(--glyph-scale) - 0.5 ) );
		--glyph-font-size		: 1em;
		
		display	: grid;
		grid-template-columns	:
			3fr 4fr 3fr
		;
		
		:where(.lg, .xl, .xxl) &
		{
			&>:where(#academy)
			{
				justify-self	: left;
			}
			
			&>:where(#contact)
			{
				justify-self	: center;
			}
			
			&>:where(#china-office)
			{
				justify-self	: right;
			}
		}
		
		:where(.xs, .sm, .md) &
		{
			display	: block;
		}
		
		& :where(dt)
		{
			color	: var(--bs-primary);
			margin-top	: 1.5em;
		}
		
		& :where(dd)
		{
			color	: white;
			font-weight	: normal;
		}
		
		& :where(dt, dd) :where(a)
		{
			transition	: all 0.2s;
			
			font-weight	: bold;
			text-decoration	: none;
			
			color	: inherit;
			
			/*padding	: 0 0.5rem;*/
			
			&:hover
			{
				background	: var(--bs-primary);
				color	: black;
			}
		}
		
		&>:where(:not(#academy)) :where(dt, dd),
		:where(.xs, .sm, .md) & :where(dt, dd)
		{
			display	: grid;
			
			grid-template-columns	:
				[glyph-start]
					var(--glyph-element-size)
				[glyph-end text-start]
					auto
				[text-end]
			;
			
			column-gap	: var(--glyph-gap);
			
			justify-content	: start;
			align-items	: center;
			
			&::before
			{
				grid-column	: glyph;
				content	: "";
				font-family	: var(--glyph-font);
				
				font-size	: var(--glyph-font-size);
				width	: var(--glyph-element-size);
				height	: var(--glyph-element-size);
				
				display	: grid;
				place-items	: center;
			}
		}
		
		:where(.email, .location)
		{
			margin	: 0;
		}
		
		:where(.email, .location)::before
		{
			color	: var(--bs-dark);
			background	: var(--bs-primary);
			place-self	: center;
			border-radius	: 50%;
			transform	: scale(var(--glyph-scale));
		}
		
		:where(.email)::before
		{
			content	: var(--glyph--email);
		}

		:where(.location)::before
		{
			content	: var(--glyph--location);
		}

		
	}
}

:where(#social-icons.zone)
{
	padding-top	: 0;
	padding-bottom	: 3rem;
	
	
	background	: var(--bs-dark);
	color	: var(--bs-primary);
	
	:where(&>.content)
	{
		place-self	: center;
		
		display	: grid;
		
		grid-template-rows	: 1fr;
		grid-auto-columns	: auto;
		grid-auto-flow	: column;
		
		column-gap : 1em;
		
		place-items	: center;
		place-content	: center;
		
		&>:where(.connect-with-us)
		{
			font-size	: 0.875rem;
		}
		
		&>:where(.fa-brands)
		{
			font-size	: 2rem;
			
			:where(.xs, .sm, .md) &
			{
				font-size	: 1.5rem;
			}
			
			color	: var(--bs-primary);
			text-decoration	: none;
			
			&:hover
			{
				color	: white;
				transition	: all 0.5s;
			}
		}
	}
}

:where(#copyright.zone)
{
	padding	: 1rem 0;
	background	: var(--bs-secondary);
	
	&>:where(.content)
	{
		color	: white;
		
		& :where(a)
		{
			transition	: all 0.2s;
			
			text-decoration	: none;
			color	: white;
			
			padding	: 0 0.5rem;
			
			&:hover
			{
				background	: var(--bs-primary);
				color	: black;
			}
		}
	}
}