@layer base, plugin, components, layout, custom, pages, media_query, print_query;



/* ========================= ========================= ========================= ========================= ========================= =========================
***
* please make sure all base css inside @layer base {}
***
* please make sure all base css inside @layer base {}
* please make sure all base css inside @layer base {}
* Use CSS @layer
* Use CSS @layer
* Use CSS @layer
***
 ========================= ========================= ========================= ========================= ========================= =========================*/

/* ========================= ========================= ========================= ========================= ========================= =========================
***
* use base.css to reset the browser style and style basic tag, some class cannot be clasifiy also include in base css, color variable also set in base.css for global use
***
* then use @layer plugin to include all plugin related css
* then use @layer components to include all components such as button, modal, card, accordion, etc
* then use @layer form_components to include all components related to form
* then use @layer layout to put style the layout. @layer layout also inculde header footer, mobile menu and body area styling
* then use @layer custom to put style for special styling
* then use @layer pages to put style for specfic pages. eg login page has login.css with @layer pages
* then use @layer inline_style for inline_style class
* then use @layer media_query to put style for mobile and responsive design
* last use @layer print to put style for print version
***
 ========================= ========================= ========================= ========================= ========================= =========================*/


@layer base {
	:root {
		--en_font_family: "Segoe UI", "Arial", "Helvetica", "microsoft jhenghei", "PingFang TC", sans-serif;
		--tc_font_family: "Segoe UI", "microsoft jhenghei", "PingFang TC", sans-serif;
		--sc_font_family: "Segoe UI", "microsoft jhenghei", "PingFang TC", sans-serif;

		--en_letter_spacing: normal;
		--chi_letter_spacing: normal;
		--white: #fff;
		--black: #000;

		--filter00806F: invert(29%) sepia(74%) saturate(1639%) hue-rotate(147deg) brightness(91%) contrast(102%);

		--black_filter: invert(0%) sepia(7%) saturate(7474%) hue-rotate(15deg) brightness(95%) contrast(105%);
		--white_filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(137deg) brightness(103%) contrast(101%);
		--bluegreen_filter: invert(38%) sepia(75%) saturate(472%) hue-rotate(142deg) brightness(90%) contrast(99%);
		--greygreen_400_filter: var(--filter00806F);
		--purple_400_filter: brightness(0) saturate(100%) invert(22%) sepia(27%) saturate(1894%) hue-rotate(233deg) brightness(90%) contrast(95%);

		--main_theme_color: var(--purple_400);

		--greygreen_200: #b4aba8;
		--greygreen_300: #06aa94;
		--greygreen_400: #00806F;
		--greygreen_500: #008573;
		--greygreen_600: #42424a;
		--greygreen_700: #37363c;


		--green_400: #2c621d;



		--light_grey_100: #f9fafb;
		--light_grey_200: #f3f3f3;

		--light_grey_300: #d9d9d9;
		--light_grey_400: #cdcdcd;
		--light_grey_500: #9d9d9d;
		--light_grey_600: #696969;

		--main_text_color: #090b10;

		--light_blue_100: #f1ffff;
		--light_blue_200: #91fdfc;
		--light_blue_300: #d8ceff;

		--purple_200: #7A15E0;
		--purple_400: #502e73;
		--purple_500: oklch(32.161% 0.08903 305.005);
		--purple_600: #21142e;

		--orange_400: #f48221;



		--menu0_text_color: var(--purple_400);
		--menu0_active_text_color: var(--purple_400);
		--menu1_bg_color: transparent;
		--menu1_text_color: var(--purple_400);
		--menu1_active_bg_color: var(--light_grey_200);
		--menu1_active_text_color: var(--purple_500);
		--menu2_bg_color: var(--greygreen_700);
		--menu2_text_color: #fff;
		--menu2_hover_bg_color: var(--greygreen_300);
		--menu2_hover_text_color: #000;






		--h1_color: var(--purple_200);
		--h2_color: var(--purple_400);
		--h3_color: #696969;
		--h4_color: #333;
		--h5_color: #333;
		--h6_color: #333;

		--disabled_input_bg_color: #E3E3E3;
		--disabled_text_color: #636669;

		--top_menu_item_spacing: 2.75rem;


		--menu_bar_size: 3.25rem;

		--fontsize_h1: 2.5rem;
		--fontsize_h2: 1.75rem;
		--fontsize_h3: 1.22rem;
		--fontsize_h4: 1.2rem;
		--fontsize_h5: 1rem;
		--fontsize_h6: 1rem;



		--border_radius1: .375rem;
		--border_radius1_5: .625rem;
		--border_radius2: 1rem;
		--border_radius3: 1.2rem;
		--border_radius4: 1.5rem;
		--border_radius_extreme: 62.4375rem;

		--box_shadow1: 0 .625rem 1.3rem rgba(12, 14, 22, .06);
		--box_shadow1_5: 0 .625rem 1.3rem rgba(12, 14, 22, .1);
		--box_shadow2: 0 1.125rem 3.75rem rgb(143 163 243 / 50%);



		--main_table_td_pad_left: clamp(1rem, 1.25vw, 2rem);
		--main_table_td_pad_right: clamp(1rem, 1.25vw, 2rem);
		--main_table_td_pad_top: 1rem;
		--main_table_td_pad_bottom: 1rem;
		--main_table_borderradius: 0.5rem;

		--left_menu_bg_color: #f3f7fb;
		--left_menu_menu0_text_color: var(--main_text_color);
		--left_menu_menu0_active_text_color: #fff;
		--left_menu_menu0_active_bg_color: var(--main_theme_color);
		--left_menu_menu0_hover_text_color: #fff;
		--left_menu_menu0_hover_bg_color: var(--purple_200);
		--left_menu_menu0_fontsize: 1rem;
		--left_menu_menu1_text_color: var(--main_text_color);
		--left_menu_menu1_active_text_color: var(--main_theme_color);
		--left_menu_menu1_padding_top: 0.75rem;
		--left_menu_menu1_padding_bottom: 0.75rem;
		--left_menu_menu1_fontsize: 1rem;
		--left_menu_menu2_text_color: var(--main_text_color);
		--left_menu_menu2_active_text_color: var(--purple_500);
		--left_menu_menu2_fontsize: 0.95rem;


		--dpo_minimum_require_btn_size: max(1.5rem, 24px);
	}

	/* Light */
	@font-face {
		font-family: "Segoe UI";
		src: url("fonts/segue-ui/segoeuil.ttf") format("truetype");
		font-weight: 300;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Segoe UI";
		src: url("fonts/segue-ui/seguili.ttf") format("truetype");
		font-weight: 300;
		font-style: italic;
		font-display: swap;
	}

	/* Semilight */
	@font-face {
		font-family: "Segoe UI";
		src: url("fonts/segue-ui/segoeuisl.ttf") format("truetype");
		font-weight: 350;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Segoe UI";
		src: url("fonts/segue-ui/seguisli.ttf") format("truetype");
		font-weight: 350;
		font-style: italic;
		font-display: swap;
	}

	/* Regular */
	@font-face {
		font-family: "Segoe UI";
		src: url("fonts/segue-ui/segoeui.ttf") format("truetype");
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Segoe UI";
		src: url("fonts/segue-ui/segoeuii.ttf") format("truetype");
		font-weight: 400;
		font-style: italic;
		font-display: swap;
	}

	/* Semibold */
	@font-face {
		font-family: "Segoe UI";
		src: url("fonts/segue-ui/seguisb.ttf") format("truetype");
		font-weight: 600;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Segoe UI";
		src: url("fonts/segue-ui/seguisbi.ttf") format("truetype");
		font-weight: 600;
		font-style: italic;
		font-display: swap;
	}

	/* Bold */
	@font-face {
		font-family: "Segoe UI";
		src: url("fonts/segue-ui/segoeuib.ttf") format("truetype");
		font-weight: 700;
		font-style: normal;
		font-display: swap;
	}

	/* Black (Extra Bold) */
	@font-face {
		font-family: "Segoe UI";
		src: url("fonts/segue-ui/segoeuiz.ttf") format("truetype");
		font-weight: 800;
		font-style: normal;
		font-display: swap;
	}

	/* Black Italic */
	@font-face {
		font-family: "Segoe UI";
		src: url("fonts/segue-ui/seguibl.ttf") format("truetype");
		font-weight: 900;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Segoe UI";
		src: url("fonts/segue-ui/seguibli.ttf") format("truetype");
		font-weight: 900;
		font-style: italic;
		font-display: swap;
	}

	html {
		font-size: clamp(13px, calc(0.5vw + 0.4rem), 20px);
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}



	.wrap {
		min-height: 100%;
		height: auto;
		overflow-x: hidden;
	}


	a {
		color: #1164B5;
	}

	h1,
	.h1_style {
		font-weight: 700;
		color: var(--h1_color);
		text-align: left;
		display: block;
		font-size: var(--fontsize_h1);
		margin-top: 0;
		margin-bottom: 2.5rem;
	}

	.chineseVersion :where(h1, .h1_style) {
		-webkit-text-stroke: clamp(0.35px, 0.04vw, 0.7px) var(--h1_color);
	}

	h2,
	.h2_style {
		margin-right: 0;
		padding-right: 0;
		font-size: var(--fontsize_h2);
		margin-bottom: 2rem;
		font-weight: bold;
		color: var(--h2_color);

	}

	.chineseVersion :where(h2, .h2_style) {
		-webkit-text-stroke: clamp(0.35px, 0.04vw, 0.7px) var(--h2_color);
	}

	:where(h1, .h1_style, h2, .h2_style):before,
	:where(h1, .h1_style, h2, .h2_style):after {
		content: '';
		display: block;
		height: 1px;
		width: min(15rem, 22vw);
		background: linear-gradient(90deg, transparent, rgba(12, 14, 22, .18), transparent);
	}

	:where(h1, .h1_style, h2, .h2_style):has(.heading_inner) {
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 1rem;

	}

	:where(h1, .h1_style, h2, .h2_style) .heading_inner {
		text-align: center;
		display: block;
		line-height: 1.3;
	}

	h3,
	.h3_style {
		font-size: var(--fontsize_h3);
		margin-left: 0;
		padding: 0;
		margin-right: 0;
		margin-top: 0;
		margin-bottom: 0.75rem;
		font-weight: 400;
		color: var(--h3_color);
	}

	h4,
	.h4_style {
		margin-top: 0;
		font-size: var(--fontsize_h4);
		color: var(--h4_color);
	}

	h5,
	.h5_style {
		font-size: var(--fontsize_h5);
		margin-top: 0;
		color: var(--h5_color);
	}

	h6,
	.h6_style {
		font-size: var(--fontsize_h6);
		color: var(--h6_color);
	}

	label {
		font-weight: inherit;
	}

	.mainContent li {
		margin-left: 0;
		margin-right: 0.6em;
		margin-top: 0.6em;
		margin-bottom: 0.6em;
	}

	.mainContent hr {
		color: #bbb;
		max-width: 100%;
	}

	body .row {
		margin: 0;
		width: 100%;
		/*ie11*/
	}

	img,
	table {
		border: 0;
	}

	table {
		border-collapse: collapse;
	}

	.access,
	.sr-only {
		position: absolute;
		/*	visibility: hidden;*/
		left: -9999px;
		font-size: 0;
		padding: 0;
		width: 0;
		height: 0;
		z-index: -1;
	}

	body {
		font-family: var(--en_font_family);
		color: #3e5259;

		line-height: 1.4;

		color: var(--main_text_color);
		visibility: hidden;
		opacity: 0;
	}

	body.show_page {
		visibility: visible;
		opacity: 1;
	}

	.tradition {
		font-family: var(--tc_font_family);
		line-height: 1.5;
		letter-spacing: var(--chi_letter_spacing);

	}


	.simplify {

		line-height: 1.5;
		letter-spacing: var(--chi_letter_spacing);
		font-family: var(--sc_font_family);
	}

	.ieVersion {
		overflow-x: hidden;
	}




	.container {
		max-width: 1500px;
		width: 100%;
		padding-left: 3rem;
		padding-right: 3rem;
		margin-right: auto;
		margin-left: auto;
		/*margin:auto;
		margin: 0 auto;*/
	}


	.text_left {
		text-align: left;
	}

	.text_center {
		text-align: center;
	}

	.text_right {
		text-align: right;
	}

	img,
	table {
		border: 0;
	}

	img {
		vertical-align: middle;
		max-width: 100%;
	}

	table {
		width: 100%;
		overflow: hidden;
	}


	ul,ol{
		padding-left: 1.4rem;
	}



	ul li {

		/*padding-top: 10px;
		padding-bottom: 10px;
		color: #333;*/
	}

	:where(ul, ol) li:not(:last-child) {
		margin-bottom: 0.5rem;
	}

	table,
	div {
		border-collapse: collapse;
		text-align: left;
		vertical-align: top;
	}

	.clearBoth {
		display: block;
		float: none;
		clear: both;
		width: 0;
		padding: 0;
		margin: 0;
		border: 0;
	}

	.nowrap,
	.noWrap {
		white-space: nowrap;
	}

	.access {
		position: absolute;
		left: -9999px;
	}

	#skiptocontent.access {
		position: fixed;
		top: 0;
		left: 0.5rem;
		background-color: #555;
		color: var(--white);
	}


	#skiptocontent.access:focus,
	#skiptocontent.access:active {
		height: auto;
		width: auto;
		padding: 0.125rem 0.5rem;
		font-size: 1rem;
		z-index: 9999;
	}



	.disIB {
		display: inline-block;
	}

	.nobr {
		display: inline-block;
		margin: 0;
		word-break: break-all;
		word-wrap: break-word;
	}

	html,
	body {
		margin: 0;
		padding: 0;
	}

	a,
	a:link,
	a:active,
	a:visited {
		text-decoration: none;
	}

	a:hover,
	a:focus {
		text-decoration: underline;
	}


	video {
		max-width: 100%;
	}

	iframe {
		max-width: 100%;
	}

	p {
		text-align: left;
		margin-top: 1rem;
		margin-bottom: 1.375rem;

		color: var(--main_text_color);
	}


	li>p:last-child {
		margin-bottom: 0;
	}

	ol>li>ul {
		list-style-type: disc;
	}

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


	.listStyleInline {
		display: inline;
	}

	/**safari/
	/* Safari 7.1+ */

	@media not all and (min-resolution:.001dpcm) {
		@media {

			.row:before,
			.row:after {
				display: none;
			}
		}
	}

	.disable {
		display: none;
	}



	#top {
		display: block;
		visibility: hidden;
		position: relative;
	}

	.removeoutline {
		outline: none;
	}

	.row {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-right: -15px;
		margin-left: -15px;
	}


	.activebody {
		overflow: hidden;
	}


	.anchor {
		display: block;
		position: relative;
		height: 1px;
		visibility: hidden;
		width: 100%;
	}

	.fake_sortsite {
		display: none;
	}

	p+.section {
		margin-top: 4rem;
	}

	.section:not(:last-child) {
		margin-bottom: 4rem;
	}

	.sub_title {
		margin-top: 1rem;
		font-size: 1.3rem;
		font-weight: 700;
		color: var(--green_400);
		margin-bottom: .5rem;
	}

	.chineseVersion .sub_title {
		-webkit-text-stroke: clamp(0.35px, 0.04vw, 0.7px) var(--green_400);
	}

	.sub_title2 {
		margin-bottom: .75rem;
		font-weight: bold;
		font-size: 1.2rem;
	}

	.note{
		font-style: italic;
	}
}

/*please make sure all base css inside @layer base {}*/