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



@import "swiper-bundle.min.css" layer(plugin);



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

		/*#05810A*/
		--green_filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1428%) hue-rotate(100deg) brightness(99%) contrast(96%);

		/*#B00E21*/
		--red_filter: brightness(0) saturate(100%) invert(23%) sepia(30%) saturate(4413%) hue-rotate(330deg) brightness(86%) contrast(122%);

		/*0000ff*/
		--blue_filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7466%) hue-rotate(248deg) brightness(92%) contrast(143%);

		/*ffa500*/
		--orange_filter: brightness(0) saturate(100%) invert(72%) sepia(83%) saturate(2436%) hue-rotate(357deg) brightness(97%) contrast(108%);


		--greygreen_200: #b4aba8;
		--greygreen_300: #06aa94;
		--greygreen_400: #00806F;
		--greygreen_500: #008573;
		--greygreen_600: #007A6A;
		--greygreen_700: #4A545C;

		--emerald_green_300: #53a255;
		--emerald_green_400: #05810A;


		--green_400: #1F845C;
		--green_500: #287444;
		--green_600: #18472a;

		--light_blue_400: #ccd3ee;

		--blue_300: #007bff;
		--blue_400: #2f55d4;
		--blue_500: #2443ac;
		--blue_600: #26339e;

		--turquoise_400: #5a6d90;
		--turquoise_500: #465571;


		--red_400: #d21e32;
		--red_500: #B00E21;

		--orange_300: #ff6701;
		--orange_400: #d55b0e;
		--orange_500: #C5530D;

		--light_grey_200: #f8f9fc;
		--light_grey_300: #e9ecef;
		--light_grey_400: #cdcdcd;
		--light_grey_500: #9d9d9d;
		--light_grey_600: #696969;


		--main_text_color: #161c2d;
		--sub_text_color: #3c4858;

		--section_header_banner_bg_color: #f8f9fc;

		--filter202942: brightness(0) saturate(100%) invert(12%) sepia(10%) saturate(3421%) hue-rotate(186deg) brightness(94%) contrast(88%);
		--footer_area1_5_bg_color: #202942;
		--footerarea2_bg_color: #fff;





		--shadow2: 0 0 3px rgba(0, 0, 0, 0.15);






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

		--disabled_input_bg_color: #e5e5e5;
		--disabled_text_color: #636669;




		--fontsize_min16: max(1rem, 16px);



		--fontsize_h1: 2.5rem;
		--fontsize_h2: 2rem;
		--fontsize_h3: 1.75rem;
		--fontsize_h4: 1.5rem;
		--fontsize_h5: 1.25rem;
		--fontsize_h6: 1rem;


		--borderradius1: 0.625rem;

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



	}

	/* cyrillic-ext */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 300;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIOOaBXso.woff2) format('woff2');
		unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
	}

	/* cyrillic */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 300;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
		unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
	}

	/* vietnamese */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 300;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
		unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
	}

	/* latin-ext */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 300;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
		unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}

	/* latin */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 300;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	/* cyrillic-ext */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIOOaBXso.woff2) format('woff2');
		unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
	}

	/* cyrillic */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
		unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
	}

	/* vietnamese */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
		unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
	}

	/* latin-ext */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
		unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}

	/* latin */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	/* cyrillic-ext */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 600;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIOOaBXso.woff2) format('woff2');
		unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
	}

	/* cyrillic */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 600;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
		unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
	}

	/* vietnamese */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 600;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
		unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
	}

	/* latin-ext */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 600;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
		unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}

	/* latin */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 600;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	/* cyrillic-ext */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 700;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIOOaBXso.woff2) format('woff2');
		unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
	}

	/* cyrillic */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 700;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
		unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
	}

	/* vietnamese */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 700;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
		unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
	}

	/* latin-ext */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 700;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
		unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}

	/* latin */
	@font-face {
		font-family: 'Nunito';
		font-style: normal;
		font-weight: 700;
		font-display: swap;
		src: url(fonts/nunito/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}


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

	.clearBoth {
		clear: both;
	}

	a {
		color: #1164B5;
	}

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

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


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

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

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

	h6,
	.h6_style {
		font-size: var(--fontsize_h6);
		font-weight: 600;
		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;

	}

	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;
		visibility: visible;
		line-height: 1.4;
	}

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

	}


	body.simplify {

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

	body.ieVersion {
		overflow-x: hidden;
	}

	#page_bg {
		color: var(--main_text_color);
	}

	.wrap {

		visibility: hidden;
		opacity: 0;
	}

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

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

	}





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

	body .disNone {
		display: none;
	}


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

	body .bold {
		font-weight: bold;
	}

	video {
		max-width: 100%;
	}

	iframe {
		max-width: 100%;
	}


	.font_bold {
		font-weight: bold;
	}


	.font_underline {
		text-decoration: underline;
	}

	.font_italic {
		font-style: italic;
	}


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

		color: #333;
	}

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

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

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

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

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

	.dOnly {
		position: static;
		left: auto;
	}

	.dtOnly {
		position: static;
		left: auto;
	}

	.mOnly {
		position: absolute;
		visibility: hidden;
		left: -9999px;
	}

	.tmOnly {
		position: absolute;
		visibility: hidden;
		left: -9999px;
	}

	.smOnly {
		position: absolute;
		visibility: hidden;
		left: -9999px;
	}


	*,
	*::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%;
	}

	fieldset {
		min-width: 0;
		padding: 0;
		margin: 0;
		border: 0;
	}

	legend {
		padding-left: 0;
		padding-right: 0;
	}

	.fake_sortsite {
		display: none;
	}

	section {
		padding-top: 3.2rem;
		padding-bottom: 6.25rem;
	}

	.deep_section {
		padding-top: 6rem;
	}

	*:has(+.badge) {
		margin-right: .5rem;
	}

	.report_status {
		margin-bottom: max(2rem, 5vw);
		text-align: center;
	}
}

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