@layer base, plugin, components, layout, custom, pages, inline_style, 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 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: "Avenir-Book", "Avenir-Book-IE", "Arial", "Helvetica", "microsoft jhenghei", sans-serif;
		--tc_font_family: "Avenir-Medium", sans-serif;
		--sc_font_family: "Avenir-Medium", sans-serif;*/

		--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;
		--white: #fff;
		--black: #000;

	

		--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%);
		--icon_filter: brightness(0) saturate(100%) invert(76%) sepia(14%) saturate(1826%) hue-rotate(46deg) brightness(92%) contrast(95%);
		--green_400_filter: brightness(0) saturate(100%) invert(43%) sepia(45%) saturate(7496%) hue-rotate(75deg) brightness(92%) contrast(98%);
		--green_600_filter: brightness(0) saturate(100%) invert(17%) sepia(19%) saturate(4475%) hue-rotate(112deg) brightness(96%) contrast(99%);
		--green_700_filter: brightness(0) saturate(100%) invert(19%) sepia(21%) saturate(1553%) hue-rotate(106deg) brightness(93%) contrast(96%);


		--red_400: #d52323;


		--greygreen_200: #b4aba8;
		--greygreen_300: #06aa94;
		--greygreen_400: #008055;
		/*used*/
		--greygreen_500: #008573;
		--greygreen_600: #007A6A;
		--greygreen_700: #4A545C;


		--green_100: #EEFDED;
		--green_150: #E8FDD1;
		--green_200: #91D7B4;
		--green_300: #bfd67f;
		--green_400: #267C03;
		--green_500: #1f6403;
		--green_600: #014519;
		--green_700: #073f2a;

		--blue_100: #f3fbff;
		--blue_200: #eef2f5;
		--blue_250: #e6f4ff;
		--blue_300: #A9D9F4;

		--light_grey_100: #f8f8f8;
		--light_grey_200: #f3f3f3;
		--light_grey_300: #d9d9d9;
		--light_grey_400: #cdcdcd;
		--light_grey_500: #9d9d9d;
		--light_grey_600: #696969;

		--dark_grey_600: #3B3B3B;
		--dark_grey_700: #222222;

		--main_text_color: #333;

		--footer_slider_area_bg_color: #d7e8e8;
		--footerarea1_bg_color: var(--green_100);
		--footer_area1_5_bg_color: var(--greygreen_400);
		--footerarea2_bg_color: var(--green_600);
		--footer_menu1_fontsize: 1rem;


		--menu0_text_color: var(--green_400);
		--menu0_active_text_color: var(--green_600);
		--menu1_bg_color: transparent;
		--menu1_text_color: #000;
		--menu1_active_bg_color: transparent;
		--menu1_active_text_color: #000;
		--menu2_bg_color: transparent;
		--menu2_text_color: #000;
		--menu2_hover_bg_color: transparent;
		--menu2_hover_text_color: #000;






		--h1_color: #333;
		--h2_color: var(--green_400);
		--h3_color: var(--greygreen_400);
		--h4_color: var(--green_400);
		--h5_color: var(--dark_grey_700);
		--h6_color: var(--light_grey_600);






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


		--borderradius1: 0.375rem;
		--borderradius2: 1rem;

		--shadow1: 0 4px 20px rgba(0, 0, 0, 0.18);
		--shadow2: 0 0 3px rgba(0, 0, 0, 0.15);
		--shadow3: 0 12px 40px rgba(0, 0, 0, 0.15);
		--shadow4: 0 2px 8px rgba(0, 0, 0, 0.06);

		--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: 1.75rem;
		--main_table_td_pad_bottom: 1.75rem;

		--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(--green_400);
		--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(--green_400);
		--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(--greygreen_400);
		--left_menu_menu2_fontsize: 0.95rem;

		--container_pad_left: clamp(1.2rem, 5.75vw, 9rem);
		--container_pad_right: clamp(1.2rem, 5.75vw, 9rem);

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

	@font-face {
		font-family: Avenir-Book;
		src: url("fonts/Avenir-Book.ttf");
	}


	@font-face {
		font-family: Avenir-Black;
		src: url("fonts/Avenir-Black.ttf");
	}



	@font-face {
		font-family: Avenir-Heavy;
		src: url("fonts/Avenir-Heavy.ttf");
	}


	@font-face {
		font-family: Avenir-Medium;
		src: url("fonts/Avenir-Medium.ttf");
	}



	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: #0000FF;
	}

	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);
		line-height: 1.3;
	}

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


	h3,
	.h3_style {
		font-size: var(--fontsize_h3);
		margin-left: 0;
		padding: 0;
		margin-right: 0;
		margin-top: 2rem;
		margin-bottom: 0.75rem;

		font-weight: 600;
		color: var(--h3_color);
	}

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

	h4,
	.h4_style {
		font-size: var(--fontsize_h4);
		font-weight: 600;
		color: var(--h4_color);
		margin-bottom: 0.5rem;
		margin-top: 2rem;
	}

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

	h6,
	.h6_style {
		margin-top: 2rem;
		margin-bottom: .5rem;
		font-size: var(--fontsize_h6);
		color: var(--h6_color);
	}


	.indexVersion h2 {
		position: relative;
		width: fit-content;
		color: var(--green_400);
		margin-bottom: 1.7rem;
	}

	.indexVersion h2::after {
		content: '';
		display: block;
		width: 100%;
		height: .31235rem;
		background-color: var(--dark_grey_600);
		border-radius: var(--borderradius1);
		margin-top: 0.3rem;
	}

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

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

		color: var(--main_text_color);
		
	}

	#page_bg{
	visibility: hidden;
		opacity: 0;
	}

	#page_bg.show_page {
		visibility: visible;
		opacity: 1;
	}

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

	}


	.simplify {

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

	.ieVersion {
		overflow-x: hidden;
	}




	.container {
		max-width: 1920px;
		width: 100%;
		padding-left: var(--container_pad_left);
		padding-right: var(--container_pad_right);
		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,
	ol {
		padding-left: 1.4rem;
	}


	ul li {}

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

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

	.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%;
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	iframe {
		max-width: 100%;
		width: 100%;
		aspect-ratio: 16 / 9;
	}

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

		color: #333;
	}


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


	.activebody {
		overflow: hidden;
	}


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

	.sitemap_fake_sortsite,
	.fake_sortsite {
		display: none;
	}

	.slogan {
		font-size: 1.35rem;
	}

	sup {
		color: var(--red_400);
	}

	figure {
		margin: 0;
	}

	.total_result_text {
		color: var(--green_400);
		font-size: 1.625rem;
		font-weight: bold;
		text-align: center;
	}

	.link_text_is_url {
		word-break: break-all;
	}

	.special_title1 {
		font-size: 1.5rem;
		text-align: center;
		font-style: italic;
		font-weight: bold;
	}

	.item_title{
		font-weight: bold;
		font-size: 1.2rem;
	}
	.cert_img{
		max-width: 4rem;
	}
	.qrcode_wrap{
		margin-top: 20px;
		display: none;
		font-size: 12px;
	}
	.qrcode_wrap img{
		margin-bottom: 15px;
	}
}

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