@layer tinymce_base, base, plugin, icons, components, layout, pages, animate, inline_style, media_query, print_query, greyscale, cms_content_editor_custom;



/* ========================= ========================= ========================= ========================= ========================= =========================
***
* 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 reusable  components such as button, modal, card, accordion, etc
* then use @layer components to include all reusable  components related to form, eg datepicker, custom select, form layout, checkbox, radio box
* then use @layer layout to put style the layout. @layer layout also inculde header footer, mobile menu and body area styling
* then use @layer pages to put style for specfic pages. eg login page has login.css with @layer pages
* then use @layer animate to put style for animation
* then use @layer inline_style for inline_style class. eg. width10p = width: 10%;
* then use @layer media_query to put style for mobile and responsive design
* last use @layer print_query to put style for print version
* last last use @layer greyscale to put style for greyscale
***
 ========================= ========================= ========================= ========================= ========================= =========================*/


@layer base {
	:root {
		--en_font_family: "Urbanist", "Microsoft Yahei", "Segoe UI", "Helvetica Neue", "Arial", "Noto Sans", sans-serif;
		--tc_font_family: "Urbanist", "Microsoft Yahei", "Segoe UI", "Helvetica Neue", "Arial", "Noto Sans", sans-serif;
		--sc_font_family: "Urbanist", "Microsoft Yahei", "Segoe UI", "Helvetica Neue", "Arial", "Noto Sans", 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%);
		/* --grey_100_filter: brightness(0) saturate(100%) invert(99%) sepia(10%) saturate(1066%) hue-rotate(171deg) brightness(102%) contrast(90%); */
		--grey_100_filter: none;
		--tsunami_500_filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(525%) hue-rotate(156deg) brightness(94%) contrast(92%);
		--gin_200_filter: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(321%) hue-rotate(63deg) brightness(112%) contrast(92%);
		--orange_400_filter: brightness(0) saturate(100%) invert(25%) sepia(99%) saturate(2198%) hue-rotate(25deg) brightness(92%) contrast(93%);
		--bluegreen_filter: invert(38%) sepia(75%) saturate(472%) hue-rotate(142deg) brightness(90%) contrast(99%);
		--grey_500_filter: brightness(0) saturate(100%) invert(54%) sepia(2%) saturate(0%) hue-rotate(152deg) brightness(92%) contrast(87%);
		--grey_600_filter: brightness(0) saturate(100%) invert(41%) sepia(6%) saturate(174%) hue-rotate(169deg) brightness(90%) contrast(86%);



		--grey_50: #F2F2F2;
		--grey_100: #e9f2f2;
		--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_text_color: var(--grey_800);

		--light_blue_200: #e8f8f9;
		--light_blue_300: #8edddf;

		--tsunami_100: #dcf3fd;
		--tsunami_200: #64d1ff;
		--tsunami_300: #4a7b83;
		--tsunami_350: #3c646b;
		--tsunami_400: #257DA3;
		--tsunami_500: #104159;
		--tsunami_550: #0e3c53;
		--tsunami_600: #0a2939;
		--tsunami_700: #05171f;

		--indigo_300: #1967d2;
		--indigo_400: #2B54BD;
		--indigo_500: #233390;
		--indigo_600: #3a1788;

		--orange_red_100: #ecf5e9;

		--orange_red_300: #c4af2c;
		/*--orange_red_400: #BD550A;*/
		
		--orange_red_400: #B35009;
		--orange_red_500: #7c3503;

		--blue_400: #4E7988;


		--gin_200: #ebf5e8;
		--gin_400: #fef9d7;
		--gin_500: #fcf3bd;

		--yellow_green_400: #5fbe2e;

		--yellow_400: #fadf38;


		--kumera_400: #8A741F;

		--green_400: #1A7024;

		--red_400: #BD382B;

		--tsunami_gradient: linear-gradient(180deg, var(--tsunami_500) 0%, var(--light_blue_300) 400%);

		--footer_slider_area_bg_color: var(--light_blue_300);
		--footerarea2_bg_color: var(--light_blue_300);



		--menu0_text_color: var(--grey_700);
		--menu0_active_text_color: var(--grey_700);

		--mobile_menu_active_text_color: var(--tsunami_600);

		--menu2_bg_color: var(--grey_900);
		--menu2_text_color: #fff;
		--menu2_hover_bg_color: var(--grey_500);
		--menu2_hover_text_color: #000;






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




		/*--fontsize_h1: 3.7rem;
		--fontsize_h2: 2.7rem;
		--fontsize_h3: 1.75rem;
		--fontsize_h4: 1.5rem;
		--fontsize_h5: 1.3rem;
		--fontsize_h6: 1.08rem;*/

		--fontsize_h1: 3.7rem;
		--fontsize_h2: 2.7rem;
		--fontsize_h3: 1.5rem;
		--fontsize_h4: 1.4rem;
		--fontsize_h5: 1.3rem;
		--fontsize_h6: 1.08rem;

		--font_weight_medium: 500;
		--font_weight_semi_bold: 600;
		--font_weight_bold: 700;

		--border_radius1: .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;
		--main_table_borderradius: .5rem;



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


		--box_shadow1: 0 2px .625rem rgba(0, 0, 0, .08);
		--box_shadow2: 0 3px 1.25rem rgba(0, 0, 0, .16);
		--box_shadow3: 0 .625rem .625rem rgba(0, 0, 0, .16);

		--card_shadow2: var(--box_shadow2);
	}

	:root:has(.theme2) {
		--h2_color: var(--orange_red_400);
	}

	/* latin-ext */
	@font-face {
		font-family: 'Urbanist';
		font-style: italic;
		font-weight: 100 900;
		font-display: swap;
		src: url(fonts/urbanist/L0x4DF02iFML4hGCyMqgXSFsjkK3.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: 'Urbanist';
		font-style: italic;
		font-weight: 100 900;
		font-display: swap;
		src: url(fonts/urbanist/L0x4DF02iFML4hGCyMqgXS9sjg.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;
	}

	/* latin-ext */
	@font-face {
		font-family: 'Urbanist';
		font-style: normal;
		font-weight: 100 900;
		font-display: swap;
		src: url(fonts/urbanist/L0x-DF02iFML4hGCyMqrbS10ig.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: 'Urbanist';
		font-style: normal;
		font-weight: 100 900;
		font-display: swap;
		src: url(fonts/urbanist/L0x-DF02iFML4hGCyMqlbS0.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;
	}


	@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(.5vw + .4rem), 1.25rem);*/
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}



	.wrap {}


	a {
		color: var(--tsunami_500);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.h1_style,
	.h2_style,
	.h3_style,
	.h4_style,
	.h5_style,
	.h6_style {

		line-height: 1.2;
	}

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

	h2,
	.h2_style {
		margin-right: 0;
		padding-right: 0;
		font-size: var(--fontsize_h2);
		line-height: 1.5;
		margin-bottom: 2rem;
		font-weight: 900;
		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: 1rem;
		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);
		margin-bottom: 1rem;
	}

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

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

	:where(h5, .h5_style, h6, .h6_style)+p {
		margin-top: .5rem;
	}


	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.5;
		color: var(--main_text_color);

	}

	.body_wrap {
		visibility: hidden;
		opacity: 0;
	}

	.body_wrap.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 {
		--container_pad_left: max(1.2rem, 20px);
		--container_pad_right: max(1.2rem, 20px);
		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 ul {
		list-style: disc;
	}

	ul li {

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

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

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


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

	p:not(:has(+*)) {
		/*margin-bottom: 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;
			}
		}
	}

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

	.fake_sortsite {
		display: none;
	}

	.hidden_val {
		display: none;
	}

	input {
		font-family: inherit;
	}

	button{
		font-family: inherit;
		font-size: inherit;
		font-weight: inherit;
	}
	button[disabled]{
		color: var(--grey_500);
	}
	button:not([disabled]) {
		cursor: pointer;
	}

	.limited_section {
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	::-webkit-scrollbar {
		width: 8px;
	}

	::-webkit-scrollbar-thumb {
		background-color: var(--grey_200);
		border-radius: 4px;
	}

	.strange_position{
		margin-top: 60rem;
	}
}

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