/* ========================= ========================= ========================= ========================= ========================= =========================
***
* please make sure all media_query css inside @layer media_query 
***
* please make sure all media_query css inside @layer media_query 
* please make sure all media_query css inside @layer media_query 
* 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 media_query {
	@media(max-width: 1189px) {
		:root {
			--fontsize_h1: 2.875rem;
			/*--fontsize_h2: calc(1.4125rem + 1.95vw);*/
			--fontsize_h2: 2.5rem;
			/*--fontsize_h3: calc(1.3375rem + 1.05vw);
			--fontsize_h4: calc(1.275rem + 0.3vw);
			--fontsize_h5: 1.2rem;
			--fontsize_h6: 1.08rem;*/
		}
	}
}

@layer media_query {
	@media (min-width: 576px) {

		.container:not(.header_inner, .container3) {
			max-width: 540px;
		}
	}

	@media (min-width: 768px) {

		.container:not(.header_inner, .container3) {
			max-width: 720px;
		}
	}

	@media (min-width: 992px) {

		.container:not(.header_inner, .container3) {
			max-width: 960px;
		}
	}

	@media (min-width: 1200px) {

		.container:not(.header_inner, .container3) {
			max-width: 1140px;
		}

	}

	@media(min-width: 1690px) {

		.header_inner,
		.container3,
		.container:not(.header_inner, .container3) {
			max-width: 1670px
		}
	}
}

@layer media_query {

	@media (max-width: 1199px) {


		.subMenuVersion .content_area {
			width: 100%;
		}

		.body_area {
			padding-top: 2rem;
		}


		.mobile {
			display: inherit;
		}


		.subMenuVersion .content_area {
			padding-left: 0;
			width: 100%;
		}

	}




	@media (max-width: 1199px) {
		.breadcrumb {}

		.breadcrumb_bigwrap {}
	}

	@media(max-width: 575px) {
		.breadcrumb_bigwrap {
			padding-bottom: 1rem;
		}
	}
}

@layer media_query {
	@media(max-width: 1199px) {
		.toggle_menu {
			display: grid;
			opacity: 0;
			pointer-events: none;
		}

		.mobile_menu_active .mobile_menu {

			opacity: 1;
			pointer-events: auto;
		}
	}
}

@layer media_query {
	@media (max-width: 1199px) {
		.scroll_table {
			position: relative;
		}

		.scroll_table .table_wrapper1,
		.scroll_table table {
			min-width: 33rem;
		}

		.scroll_table_inside_wrapper {}

		.need_to_scroll:before {
			content: "";
			position: absolute;
			z-index: 25;
			top: 5rem;
			right: 0.9375rem;
			width: 3rem;
			height: 2rem;
			transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
				opacity 0.3s ease-in-out;
			-webkit-animation: passing 1.3s linear infinite;
			animation: passing 1.3s linear infinite;
			background: url(../images/icon/icon_next.svg) no-repeat center center;
			background-size: contain;
		}

		.need_to_scroll:after {
			content: "";
			position: absolute;
			z-index: 22;
			top: 0;
			right: 0;
			display: block;
			width: 3.75rem;
			height: 100%;
			transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
				opacity 0.3s ease-in-out;
			pointer-events: none;
			background-image: -webkit-gradient(linear,
					left top,
					right top,
					from(rgba(255, 255, 255, 0)),
					color-stop(30%, rgba(255, 255, 255, 0.5)),
					to(#fff));
			background-image: -o-linear-gradient(left,
					rgba(255, 255, 255, 0) 0,
					rgba(255, 255, 255, 0.5) 30%,
					#fff 100%);
			background-image: linear-gradient(to right,
					rgba(255, 255, 255, 0) 0,
					rgba(255, 255, 255, 0.5) 30%,
					#fff 100%);
		}

		.need_to_scroll.reachend:before {
			width: 0;
			height: 0;
			opacity: 0;
			overflow: hidden;
		}

		.need_to_scroll.reachend:after {
			width: 0;
			height: 0;
			opacity: 0;
			overflow: hidden;
		}
	}

}

@layer media_query {
	@media (max-width: 1199px) {
		.mobile_left_menu {
			display: block;
		}

		.mobile_left_menu_nav {
			display: block;
		}

		body:has(.mobile_left_menu.active) .js_scroll_blanket {
			display: block;
		}

		.body_area .left_menu {
			display: none;
		}
	}
}

@layer media_query {
	@media all and (max-width: 1199px) {


		.shareList {}

		.mobile_menu_active {
			overflow: hidden;
		}

		.headerMenu {}

		.headerTool .header_inner {}

		.clientTool>*:not(.menu_btn, .shareTool) {
			padding-right: .5rem;
		}

		.tool_item:nth-child(5) {
			order: 1;
		}

		.tool_item.language {
			order: 2;
		}

		.tool_item.shareTool {
			order: 3;
			padding-right: 0;
		}

		.menu_btn {
			order: 4;
			--menu_bar_size: 1.5rem;
			padding-left: .75rem;
			display: block;
		}

		.tool_item img {
			min-width: unset;
			max-width: unset;
			min-height: unset;
			width: 80%;
		}

		.moblang a,
		.mobSearch a {}

		.mobSearch {}

		.mobSearch img {}

		.search_menu .mobSearch {
			display: none;
		}

		.lang_menu .moblang {
			display: none;
		}

		.header_area .shareTool {}


		.headerMenu .my_menu>a {}


		.header_area .headerTop {
			display: none;
		}

		.header_area {}



		.mobile_menu .moblang {
			display: none;
		}

		.mobile_menu .langTool {
			display: block;
			position: static;
		}

		.mobile_menu .menu_lv0 {
			border-top: 0;
		}


		.headerTool .search_btn {
			display: inline-block;
		}

		.myLogo {
			padding-top: 0;
			padding-bottom: 0;
		}

		.headerTool .myLogo img {
			width: 108px;
		}

		.big_clientTool {
			background-color: transparent;
			margin-top: 0;
			display: flex;
		}

		.print.tool_item {
			display: none;
		}

		.tool_item img {}

		.clientTool>.tool_item {}

		.tool_item::after {
			width: 0;
			height: 0;
		}

		.clientTool .AStyleArea {
			display: none;
		}

		.tool_item .moblang {
			display: block;
		}

		.tool_item .langTool {
			display: none;
		}
	}

	@media(max-width: 992px) {
		.headerTool .header_inner {
			flex-wrap: wrap;
		}

		.headerTool .myLogo {}

		.big_clientTool {}
	}

	@media(max-width: 767px) {
		.headerTool .myLogo {}

	}

	@media all and (min-width: 1200px) {
		.header_area .headerTool .active_section>a {
			color: var(--menu0_active_text_color);
		}

		.header_area .headerTool .my_menu.open>a {
			color: var(--menu0_active_text_color);
		}
	}
}

@layer media_query {
	@media(max-width: 1689px) {
		.section_header_banner h1 {
			/*padding-left: 0;*/
		}
	}

	@media (max-width: 1199px) {
		.section_header_banner .graphic {
			margin-left: -290px;
		}

		.section_header_banner h1 {
			padding-left: 5rem;
		}
	}

	@media(max-width:992px) {
		.mobile_weather .container {
			padding-left: 0;
			padding-right: 0;
		}

		.section_header_banner {}

		.section_header_banner .graphic {
			margin-left: -265px;
			margin-top: -35px;
			width: 650px;
			height: 747px;
		}

		.section_header_banner .desktop_weather {
			display: none;
		}

		.section_header_banner .mobile_weather {
			display: none;
			/*width: 100%;
			grid-area: unset;*/
		}

		.section_header_banner>.container {
			/*display: grid;
			grid-template-rows: max-content 1fr;*/

		}

		.section_header_banner h1 {}
	}

	@media(max-width:767px) {
		.section_header_banner {
			height: 350px;
		}

		.section_header_banner h1 {
			padding-left: 3rem;
		}

		.section_header_banner .graphic {
			margin-left: -190px;
			margin-top: -110px;
			width: 450px;
			height: 667px;
		}

		.section_header_banner>.container>div:first-child {}

		.section_header_banner .bg {}

		.section_header_banner img {}
	}

	@media(max-width:575px) {
		.section_header_banner {
			height: 250px;
		}

		.section_header_banner h1 {
			padding-left: .5rem;
		}

		.section_header_banner .graphic {
			width: 310px;
			height: 457px;
			margin-left: -142px;
			top: -145px;
		}
	}
}

@layer media_query {
	@media(max-width: 767px) {

		.equal_height_column1,
		.equal_height_column2,
		.equal_height_column3,
		.equal_height_column4,
		.equal_height_column5,
		.equal_height_column6,
		.equal_height_column7,
		.equal_height_column8,
		.equal_height_column9,
		.equal_height_column10,
		.equal_height_column11,
		.equal_height_column12,
		.equal_height_column13,
		.equal_height_column14,
		.equal_height_column15,
		.equal_height_column16,
		.equal_height_column17,
		.equal_height_column18,
		.equal_height_column19,
		.equal_height_column20 {
			height: auto;
		}
	}

	@media(min-width:1200px) {

		.social_media_btn__btn:hover,
		.social_media_btn__btn:focus {
			background-color: var(--tsunami_600);

		}
	}
}

@layer media_query {
	@media only screen and (max-width:992px) {
		.responsive_card_table:before {
			width: 0;
			height: 0;
		}

		.responsive_card_table {
			margin-top: 1rem;
			border-radius: 0;
			border: 0;
			box-shadow: none;
		}

		.responsive_card_table table {
			box-shadow: none;
			border-radius: 0;
			border: 0;
		}

		.responsive_card_table tbody {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
			row-gap: 1rem;
			column-gap: 1rem;
		}

		.responsive_card_table .mobiletd {
			display: block;
			font-weight: var(--font_weight_semi_bold);
			color: #000;
			margin-bottom: 5px;
		}

		.responsive_card_table tbody>tr:nth-child(odd):not(.th_row) {
			background-color: #eaf4f4;
		}

		.responsive_card_table tbody>tr:nth-child(even):not(.th_row) {
			background-color: var(--light_blue_200);
		}

		.responsive_card_table tr:not(.th_row) {
			display: block;

			padding-top: 1.3636rem;
			padding-bottom: 1.3636rem;
			/*margin-bottom: 1rem;*/
		}

		.responsive_card_table .th_row {
			display: block;
			width: 100%;

		}

		.responsive_card_table .th_row th {
			width: 100%;
			display: block;
		}

		.responsive_card_table td>div {
			text-align: left;
			display: block;
		}

		.responsive_card_table td>* {
			text-align: left;
		}

		.responsive_card_table td {
			display: block;
			width: 100%;
			padding-top: 0;
			border-bottom: 0;
			text-align: left;
			background-color: transparent;
			padding-bottom: 1rem;
			border: 0;
		}

		.responsive_card_table tr>td:last-child {
			padding-bottom: 0;
		}

		.responsive_card_table thead {
			display: none;
		}
	}

	@media(min-width:993px) {
		.responsive_card_table .mobiletd {
			display: none;
		}
	}
}

@layer media_query {


	@media all and (max-width: 992px) {


		.footer_area .fTool {
			justify-content: flex-end;
		}

		.footer_area .footer_icon {
			justify-content: flex-end;
			margin-bottom: .5rem;
		}

		.footer_area .info {
			text-align: right;
			margin-bottom: .5rem;
		}

		.footer_area .footer_row {
			grid-template-areas: 'icon_group'
				'info1' 'update_date';
			justify-content: flex-end;
		}

		.footer_area .copyright {
			text-align: right;
		}

		.footer_area .updateDate {
			margin-top: .5rem;
			text-align: right;
		}

		.footer_left {
			justify-content: center;
			flex-wrap: wrap;
		}
	}

	@media all and (max-width: 767px) {
		.footer_area1.in_view .top_btn {
			right: 1rem;
			bottom: 0.5rem;
		}

	}

	@media(max-width: 767px) {
		.footer_slider_area .swiperhugecontainer {
			--swiper_btn_size: .5rem;
			--swiper_btn_gap: .5rem;
		}
	}
}





@layer media_query {
	@media (max-width: 992px) {
		.card_grid2 {
			container-type: inline-size;
			container-name: card_grid_container2;
			grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
		}

		.main_content:not(:has(.card_grid2)) .logo_card {
			grid-template-columns: 100%;
			grid-row: span 4;
		}

		.logo_card .card_logo {
			
			
		}

		.logo_card .card_main {
			margin-bottom: 1rem;
		}

		.logo_card .card_content {
			
		}

		.logo_card :where(.under_btn_wrap, .btn_row) {
			
		}
	}

	/*2 cards same row*/
	/*400px = each card width *2 means 2 cards in the same row + column gap 2.5rem*/
	@container card_grid_container2 (width >=calc(400px * 2 + 2.5rem)) {
		.card_grid2 .logo_card {
			grid-template-columns: 100%;
			grid-row: span 4;
		}
	}

	/*1 card same row*/
	/*400px = each card width *2 means 2 cards in the same row + column gap 2.5rem*/
	@container card_grid_container2 (width < calc(400px * 2 + 2.5rem)) {
		.card_grid2 .logo_card {
			grid-template-columns: 100%;
			grid-row: unset;
			grid-template-rows: unset;
		}
	}
}


@layer media_query {
	@media(max-width: 992px) {
		.mytab_bigcontainer:not(.mytab_bigcontainer3) {
			display: grid;
			row-gap: .25rem;
		}

		.mytab_bigcontainer:not(.mytab_bigcontainer3) .typerow {
			display: none;
		}

		.mytab_bigcontainer:not(.mytab_bigcontainer3) .tab_dropdown {
			display: block;
		}

		.mytab_bigcontainer:not(.mytab_bigcontainer3) .mytab_container{
			display: grid;
			row-gap: .25rem;
		}

		.mytab_bigcontainer:not(.mytab_bigcontainer3) .mytab {
			padding-top: 1.3rem;
			padding-bottom: 2rem;
		}
	}
}

@layer media_query {
	@media(max-width: 767px) {
		.mytab_bigcontainer3 .typerow a {
			padding-top: 1rem;
			padding-bottom: 1rem
		}
	}
}

@layer media_query {
	@media(max-width: 1199px) {
		.card2 .card_inner2 {
			grid-template-columns: 100%;
		}
	}

	@media(max-width: 767px) {
		.card2 .card_inner {
			grid-template-columns: 100%;
		}
	}
}

@layer media_query {
	@media(max-width: 1199px) {
		.card2_2 {
			padding: 2rem 2.5rem
		}
	}
}


@layer media_query {
	@media(max-width: 1689px) {


		.card_row4 {
			--item_in_each_row: 4;
		}
	}

	@media(max-width: 1199px) {
		.card_row4 {
			--item_in_each_row: 3;
		}
	}

	@media(max-width: 992px) {
		.limited_section {
			max-width: 75%;
		}

		.card_row4 {
			--item_in_each_row: 2;
		}
	}

	@media(max-width: 767px) {
		.card_row4 {
			--item_in_each_row: 1;
			
		}

		.card_row4>*{
			width: min(230px,100%);
		}
	}
}

@layer media_query {
	@media(max-width: 1920px) {
		.theme_card:nth-child(odd) .sme_icon_inner {
			margin-right: 0;
		}

		.theme_card:nth-child(odd) .sme_icon_inner>* {
			margin-left: calc(var(--clip_path_size) / 4 * -1);

		}
	}

	@media(max-width: 1599px) {

		.theme_card .sme_icon_inner>* {
			margin-top: -4rem;

		}
	}

	@media(max-width: 1599px) {
		.theme_card_grid .theme_card {
			--arrow_graphic_size: 27.5%;
		}



		.theme_card .sme_icon_inner>* {
			margin-top: -4rem;

		}

		.theme_card .sme_icon_wrap::before {
			clip-path: polygon(0% 0%, var(--clip_path_size) 0%, 90% 64%, 68% 100%, 0% 100%);
		}

	}

	@media(max-width: 1199px) {
		.theme_card .theme_card_content {
			padding-right: 2.5rem;
		}

		.theme_card_grid .theme_card {
			--arrow_graphic_size: 39%;
		}

		.theme_card .sme_icon_wrap {
			--clip_path_size: 55%;
		}

	}

	@media(max-width: 992px) {
		.theme_card {
			grid-template-columns: 100%;
		}

		.theme_card .theme_card_content {
			/*padding-left: clamp(1.4rem, 3vw, 4rem);
			padding-right: clamp(1.4rem, 3vw, 4rem);*/
			padding-left: 2.5rem;
			padding-right: 2.5rem;
			grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
			padding-top: 1.5rem;
		}


		.theme_card_grid .theme_card:nth-child(even) .sme_icon_wrap {
			order: 1;
		}

		.theme_card_grid .theme_card:nth-child(even) .sme_icon_wrap::before {
			transform: none;
		}

		.theme_card .sme_icon_wrap {
			padding-top: 1.2rem;
			padding-bottom: 5rem;

		}


		.theme_card .sme_icon_inner {
			margin-left: auto;
			margin-right: auto;
			display: block;
			height: auto;

		}

		.theme_card .sme_icon_wrap::before {
			/*border-style: solid;
			border-width: 146px 400px 0 161px;
			border-width: 18vw 73.3vw 0 21vw;
			border-color: var(--theme_card_element_color) transparent transparent transparent;
			clip-path: none;

			width: auto;
			height: auto;
			display: block;

			background: transparent;
			top: 100%;*/
			clip-path: polygon(100% 0, 100% 44%, 39% 92%, 0 47%, 0 0);

		}

		.theme_card:nth-child(odd) .sme_icon_inner>*,
		.theme_card:nth-child(even) .sme_icon_inner>* {
			display: grid;
			grid-template-columns: clamp(50px, 15vw, 94px) 1fr;
			column-gap: 1.5rem;
			width: fit-content;
			align-items: center;
			margin-left: auto;
			margin-right: auto;
			margin-top: 0;
		}

		.theme_card .sme_icon_inner img {
			margin-left: 0;
			margin-right: 0;
			margin-bottom: 0;
		}

		.theme_card .sme_icon_title {
			width: auto;
		}
	}
}


/* ========================= ========================= ========================= ========================= ========================= =========================
***
* please make sure all media_query css inside @layer media_query 
***
* please make sure all media_query css inside @layer media_query 
* please make sure all media_query css inside @layer media_query 
* Use CSS @layer
* Use CSS @layer
* Use CSS @layer
***
 ========================= ========================= ========================= ========================= ========================= =========================*/