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



/* ========================= ========================= ========================= ========================= ========================= =========================
***
* 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: "Inter", "Arial", "Helvetica", "microsoft jhenghei", "PingFang TC", sans-serif;
		--tc_font_family: "Inter", "microsoft jhenghei", "PingFang TC", sans-serif;
		--sc_font_family: "Inter", "microsoft jhenghei", "PingFang TC", sans-serif;

		--en_letter_spacing: normal;
		--chi_letter_spacing: normal;


		--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%);
		--grey_600_filter: var(--filter00806F);

		--green_100_filter: brightness(0) saturate(100%) invert(79%) sepia(9%) saturate(2411%) hue-rotate(109deg) brightness(91%) contrast(95%);

		--main_theme_color: #00806F;


		--light_green_200: #FFFFCF;
		--light_green_300: #eeffb7;
		--light_green_400: #b5fa84;
		--light_green_500: #a1fc61;

		--green_50: #72F4C2;
		--green_100: #46D9AF;
		--green_300: #08b173;
		--green_400: #048656;
		--green_500: #036944;
		--green_600: #044e33;
		--green_700: #073f2a;


		--grey_50: #F2F2F2;
		--grey_70: #F7FBFE;
		--grey_100: #E6E6E6;
		--grey_200: #CCCCCC;
		--grey_300: #B3B3B3;
		--grey_400: #999999;

		--grey_500: #808080;
		--grey_600: #666666;
		--grey_700: #4D4D4D;
		--grey_800: #333333;
		--grey_900: #1A1A1A;
		--grey_950: #121212;


		--main_blue_100: #A0F0FF;
		--main_blue_150: #87d5ef;
		--main_blue_200: #5d99df;
		--main_blue_300: #3182eb;
		--main_blue_400: #0562c9;
		--main_blue_450: #004FA8;
		--main_blue_500: #0050fb;
		--main_blue_600: #0646cf;


		--blue_50: #CBF5F9;
		--blue_100: #dbeff6;
		
		--blue_200: #0081A0;
		--blue_250: #285d7e;
		--blue_300: #104F59;

		--blue_500: #09284c;
		--blue_550: #00256c;
		--blue_600: #000738;

		--light_red_100: #ffeaf3;
		--light_red_200: #fdd5e7;
		--light_red_400: #E00074;

		--orange_400: #B45A2D;

		--red_400: #c00808;

		--main_text_color: var(--grey_800);


		--h1_color: var(--main_text_color);
		--h2_color: var(--main_blue_450);
		--h3_color: var(--grey_600);
		--h4_color: var(--main_text_color);
		--h5_color: var(--main_text_color);
		--h6_color: var(--main_text_color);


		--fontsize_h1: 2.5rem;
		--fontsize_h2: 2rem;
		--fontsize_h3: 1.75rem;
		--fontsize_h4: 1.4rem;
		--fontsize_h5: 1.2rem;
		--fontsize_h6: 1.125rem;

		--border_radius1: .375rem;
		--border_radius2: .625rem;

		--shadow1: 0 0 .75rem .25rem rgba(0, 0, 0, .15);
		--shadow2: 0 0 1rem .5rem rgba(0, 0, 0, .15);

		--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: .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(--green_400);
		--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: .75rem;
		--left_menu_menu1_padding_bottom: .75rem;
		--left_menu_menu1_fontsize: 1rem;
		--left_menu_menu2_text_color: var(--main_text_color);
		--left_menu_menu2_active_text_color: var(--grey_600);
		--left_menu_menu2_fontsize: .95rem;

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

	@font-face {
		font-family: "Inter";
		src: url(fonts/inter/Inter-Bold.woff2) format('woff2');
		font-weight: 700;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Inter";
		src: url(fonts/inter/Inter-SemiBold.woff2) format('woff2');
		font-weight: 600;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Inter";
		src: url(fonts/inter/Inter-Medium.woff2) format('woff2');
		font-weight: 500;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Inter";
		src: url(fonts/inter/Inter-Regular.woff2) format('woff2');
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	html {
		/*font-size: clamp(.8125rem, calc(0.5vw + .4rem), 1.25rem);*/
		font-size: clamp(.9rem, calc(0.5vw + .4rem), 1.25rem);
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}



	.wrap {
		min-height: 100%;
		height: auto;

	}


	a {
		color: #1164B5;
	}

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

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

	:where(h2, .h2_style) a {
		color: inherit;
	}

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

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

	.chineseVersion :where(h3, .h3_style) {
		-webkit-text-stroke: clamp(0.25px, 0.03vw, 0.5px) currentColor;
	}

	h4,
	.h4_style {
		margin-top: 0;
		margin-bottom: .5rem;
		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;
	}

	.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);
		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.8;
		letter-spacing: var(--chi_letter_spacing);

	}


	.simplify {

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

	.ieVersion {
		overflow-x: hidden;
	}




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


	img,
	table {
		border: 0;
	}

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

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





	ul li {

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

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

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


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

	#skiptocontent.access {
		position: fixed;
		top: 0;
		left: .5rem;
		background: #555;
		color: #fff;
	}


	#skiptocontent.access:focus,
	#skiptocontent.access:active {
		height: auto;
		width: auto;
		padding: .125rem .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-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;
			}
		}
	}

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

	.removeoutline {
		outline: none;
	}

	.row {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}


	.activebody {
		overflow: hidden;
	}


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

	.fake_sortsite {
		display: none;
	}

	.link_text_is_url{
		word-break: break-all;
	}
	dialog{
		margin: 0;
		padding: 0;
		border: 0;
	}

	*:first-child{
		margin-top: 0;
	}

	*:last-child{
		margin-bottom: 0;
	}
}

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