@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: "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);
		--tango_500_filter: brightness(0) saturate(100%) invert(45%) sepia(75%) saturate(393%) hue-rotate(338deg) brightness(92%) contrast(88%);
		--blue_450_filter: brightness(0) saturate(100%) invert(14%) sepia(100%) saturate(3426%) hue-rotate(188deg) brightness(91%) contrast(97%);

		--main_theme_color: #00806F;



		--green_300: #08b173;
		--green_400: #048656;
		--green_500: #036944;
		--green_600: #044e33;
		--green_700: #073f2a;


		--grey_50: #F2F2F2;
		--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;

		--tango_100: #FFECE4;
		--tango_400: #E97D28;
		--tango_450: #D66723;
		--tango_500: #BF4D1D;
		--tango_600: #9e4018;
		--tango_700: #891818;

		--blue_50: #f4f4f6;
		--blue_100: #dfdce8;
		--blue_150: #B0D8E3;
		--blue_200: #2ab4bb;
		--blue_300: #5278A3;
		--blue_400: #3E5B7A;
		--blue_450: #045886;
		--blue_500: #00426D;
		--blue_600: #003253;

		--main_text_color: var(--grey_800);

		--footer_slider_area_bg_color: #d7e8e8;



		--footer_menu1_fontsize: 1rem;


		--menu0_text_color: #000;
		--menu0_active_text_color: var(--grey_600);
		--menu1_bg_color: transparent;
		--menu1_text_color: #fff;
		--menu1_active_bg_color: var(--blue_500);
		--menu1_active_text_color: #fff;
		--menu2_bg_color: var(--grey_700);
		--menu2_text_color: #fff;
		--menu2_hover_bg_color: var(--grey_500);
		--menu2_hover_text_color: #000;



		--h1_color: var(--blue_300);
		--h2_color: var(--blue_400);
		--h3_color: var(--tango_500);
		--h4_color: #000;
		--h5_color: #000;
		--h6_color: var(--main_text_color);


		--fontsize_h1: 3.8rem;
		--fontsize_h2: 2rem;
		--fontsize_h3: 1.6rem;
		--fontsize_h4: 1.35rem;
		--fontsize_h5: 1.2rem;
		--fontsize_h6: 1.08rem;

		--border_radius1: .375rem;

		--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(--blue_500);
		--left_menu_menu0_hover_text_color: #fff;
		--left_menu_menu0_hover_bg_color: var(--blue_600);
		--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;
	}

	@font-face {
		font-family: "Resource Han Rounded CN";
		src: url(fonts/Resource_Han_Rounded_CN.woff2) format('woff2');
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	html {
		--min_font_size: .8125rem;
		--normal_font_size: calc(0.5vw + .4rem);
		--max_font_size: 1.25rem;
		font-size: clamp(var(--min_font_size), var(--normal_font_size), var(--max_font_size));
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}

	html:has(.mySize0) {
		--min_font_size: calc(.8125rem - .1rem);
		--normal_font_size: calc(0.5vw + .3rem);
		--max_font_size: calc(1.25rem - .1rem);
	}

	html:has(.mySize1) {
		--min_font_size: .8125rem;
		--normal_font_size: calc(0.5vw + .4rem);
		--max_font_size: 1.25rem;
	}

	html:has(.mySize2) {
		--min_font_size: calc(.8125rem + .2rem);
		--normal_font_size: calc(0.5vw + .6rem);
		--max_font_size: calc(1.25rem + .2rem);
	}

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

	}


	a {
		color: #1164B5;
	}

	h1,
	.h1_style {
		font-family: 'Resource Han Rounded CN', 'microsoft jhenghei', sans-serif;
		font-weight: 700;
		color: var(--h1_color);
		text-align: left;
		display: block;
		font-size: var(--fontsize_h1);
		margin-bottom: 3rem;
	}

	:where(h1, .h1_style) .heading_inner {

		position: relative;
		display: block;
	}

	:where(h1, .h1_style) .heading_inner .true_element {
		-webkit-text-stroke: clamp(0.35px, .04vw, 0.7px) currentColor;
		position: absolute;
		display: block;
		top: 0;
		left: 0;

		z-index: 59;

	}

	:where(h1, .h1_style) .heading_inner .fake_element {
		--shadow: -10px -10px 3px #fff;
		--shadow2: 10px -10px 3px #fff;
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		-webkit-text-stroke: clamp(4px, 2vw, 29px) #fff;
		/*text-shadow: var(--shadow),
     var(--shadow2),
    var(--shadow),
     var(--shadow2);*/
		z-index: 10;
	}


	h2,
	.h2_style {
		margin-right: 0;
		padding-right: 0;
		font-size: var(--fontsize_h2);
		line-height: 1.2;
		margin-bottom: 2rem;
		font-weight: bold;
		color: var(--h2_color);
		display: grid;
		grid-template-columns: max-content 1fr;
		column-gap: 1rem;
		-webkit-text-stroke: clamp(0.35px, 0.04vw, 0.7px) currentColor;
	}


	:where(h2, .h2_style)::before {
		content: '';
		display: block;
		width: 2rem;
		aspect-ratio: 33/40;
		background-image: url('../images/icon/icon_footprint.svg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;


	}

	:where(h2, .h2_style) .heading_inner {

		position: relative;
		display: grid;
		grid-template-areas: 'stack3';
	}

	:where(h2, .h2_style) .heading_inner .true_element {
		-webkit-text-stroke: clamp(0.35px, .04vw, 0.7px) var(--h2_color);
		grid-area: stack3;
		display: block;

		z-index: 59;

	}

	:where(h2, .h2_style) .heading_inner .fake_element {

		display: block;
		grid-area: stack3;
		-webkit-text-stroke: clamp(4px, .45vw, 9px) #fff;
		z-index: 10;
	}

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


	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;
		line-height: 1.4;
		color: var(--h3_color);
	}

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


	:where(h4,
		.h4_style)+p {
		margin-top: .5rem;
	}

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

	:where(h5,
		.h5_style)+* {
		margin-top: 0;
	}

	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.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: 1412px;
		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;
	}



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

	ul li {

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

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

	:where(ul, ol)>li :where(ul, ol)>li {
		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-color: #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);
	}

	p:has(+ul),
	p:has(+ol) {
		margin-bottom: 1rem;
	}

	p+:where(ul, ol) {
		margin-top: 0;
	}


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

	.important_highlight {
		color: var(--blue_450);
		font-size: 1.5rem;
		font-weight: 700;

	}

	.chineseVersion .important_highlight {
		-webkit-text-stroke: clamp(0.35px, .04vw, 0.7px) currentColor;
	}

	.highlight1 {
		color: var(--tango_500);
	}

	.chineseVersion .highlight1 {
		-webkit-text-stroke: clamp(0.35px, .04vw, 0.7px) currentColor;
	}

	input[type="text"] {
		display: block;
		width: 100%;
		padding: .75rem 1rem;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		color: var(--grey_600);
		background-color: #fff;
		border: 1px solid var(--grey_50);
		border-radius: 5px;
		transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	}
}

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