.compare-icon.nav-icon {
    display: none !important;
}
.home-project-card .-pj-cp {
    display: none !important;
}
/*unicode-range: U+E00-EFFF,U+21-FF;*/
/* Jayss Edit */
@font-face {
    font-family: 'NotoCN';
    size-adjust: 70%;
    src: url('../fonts/cn/bold.woff2') format('woff2');
    src: local("Times New Roman");
    font-weight: normal;
    font-style: normal;
    unicode-range: U+4E00–9FFF;
    /* font-display: swap; */
}

:root {
	--cont-w: 100%;
	--cont-mg: calc((100vw - var(--cont-w))/2);
}

@media (min-width: 640px) {
	:root {
		--cont-w: 640px;
	}
}

@media (min-width: 1280px) {
	:root {
		--cont-w: 1280px;
	}
}

:root {
	--pmr-font: "DBHeavent",'NotoCN', serif !important;
	--txt-font: "DBHeavent",'NotoCN', serif !important;
}

:root {
	--colophon-bg: #000;
	--footbar-bg: var(--ci3);
	--ci-blue-100: #031121;
	--ci-blue-200: #092647;
	--ci-blue-300: #123F6D;
	--ci-blue-400: #3A638E;
	--ci-blue-500: #6289B1;
	--ci-blue-600: #87AACE;
	--ci-blue-700: #B7CDE4;
	--ci-blue-800: #E0ECF8;
	--ci-blue-900: #F3F9FF;
	--ci-veri-100: #043A39;
	--ci-veri-200: #055E5B;
	--ci-veri-300: #077875;
	--ci-veri-400: #1D9F9B;
	--ci-veri-500: #11B6B1;
	--ci-veri-600: #47CBC7;
	--ci-veri-700: #80DCD9;
	--ci-veri-800: #B5E7E5;
	--ci-veri-900: #F6FFFE;
	--ci-grey-100: #202831;
	--ci-grey-200: #323A41;
	--ci-grey-300: #545E67;
	--ci-grey-400: #828A92;
	--ci-grey-500: #9FA5AB;
	--ci-grey-600: #BFC4C8;
	--ci-grey-700: #CFD4D9;
	--ci-grey-800: #DFE3E8;
	--ci-grey-900: #EDF2F6;
	--ci-green-100: #3C4105;
	--ci-green-200: #565C06;
	--ci-green-300: #6B730B;
	--ci-green-400: #848C22;
	--ci-green-500: #9AA238;
	--ci-green-600: #B7BF50;
	--ci-green-700: #CED66E;
	--ci-green-800: #E7EE91;
	--ci-green-900: #FBFFCD;
	--ci-yellow-100: #412900;
	--ci-yellow-200: #624106;
	--ci-yellow-300: #8C6011;
	--ci-yellow-400: #B48027;
	--ci-yellow-500: #D7A754;
	--ci-yellow-600: #EAB862;
	--ci-yellow-700: #FAD088;
	--ci-yellow-800: #FFE2B0;
	--ci-yellow-900: #FFF6E5;
	--ci-orange-100: #270A00;
	--ci-orange-200: #521A08;
	--ci-orange-300: #81290C;
	--ci-orange-400: #AC3B16;
	--ci-orange-500: #F1683B;
	--ci-orange-600: #FF8A64;
	--ci-orange-700: #FFB39A;
	--ci-orange-800: #FFD6C9;
	--ci-orange-900: #FFF4F0;
}

@font-face {
	font-family: DBHeavent;
	unicode-range: U+E00-EFFF,U+21-FF;
/*	size-adjust:150%;*/
src: url(../fonts/db-heavent/DBH500.woff);
font-weight: 500;
font-style: normal;
}

@font-face {
	font-family: DBHeavent;
	unicode-range: U+E00-EFFF,U+21-FF;
/*	size-adjust:150%;*/
src: url(../fonts/db-heavent/DBH400.woff);
font-weight: 400;
font-style: normal;
}

@font-face {
	font-family: DBHeavent;
	unicode-range: U+E00-EFFF,U+21-FF;
/*	size-adjust:150%;*/
src: url(../fonts/db-heavent/DBH700.woff);
font-weight: 700;
font-style: normal;
}

@font-face {
	font-family: DBHeavent;
	unicode-range: U+E00-EFFF,U+21-FF;
/*	size-adjust:150%;*/
src: url(../fonts/db-heavent/DBH300.woff);
font-weight: 300;
font-style: normal;
}

@font-face {
	font-family: DBHeavent;
	unicode-range: U+E00-EFFF,U+21-FF;
/*	size-adjust:150%;*/
src: url(../fonts/db-heavent/DBH500i.woff);
font-weight: 500;
font-style: italic;
}

@font-face {
	font-family: DBHeavent;
	unicode-range: U+E00-EFFF,U+21-FF;
/*	size-adjust:150%;*/
src: url(../fonts/db-heavent/DBH700i.woff);
font-weight: 700;
font-style: italic;
}

@font-face {
	font-family: DBHeavent;
	unicode-range: U+E00-EFFF,U+21-FF;
/*	size-adjust:150%;*/
src: url(../fonts/db-heavent/DBH300i.woff);
font-weight: 300;
font-style: italic;
}

@font-face {
	font-family: DBHeaventExt;
	unicode-range: U+E00-EFFF,U+21-FF;
	src: url(../fonts/db-heavent/DBHE300i.woff);
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: DBHeavent;
	unicode-range: U+E00-EFFF,U+21-FF;
/*	size-adjust:150%;*/
src: url(../fonts/db-heavent/DBH400i.woff);
font-weight: 400;
font-style: italic;
}
@font-face {
	font-family: 'NotoSerifSC';
	src: url('../fonts/noto-serif-sc/NotoSerifSC-Regular-Alphabetic.ttf') format('ttf');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'NotoSerifSC';
	src: url('../fonts/noto-serif-sc/NotoSerifSC-SemiBold-Alphabetic.ttf') format('ttf');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}


.dbfont,
.dbfon a {
	font-family: "DBHeavent",'NotoCN', serif !important;
	font-weight: 400;
}

body {
	-webkit-font-smoothing: antialiased;
	font-size: 22px;
	line-height: 28px !important;
	font-family: "DBHeavent",'NotoCN',serif;
	font-weight: normal;
}

body p {
	font-size: 22px;
	line-height: 1.2;
	font-weight: 400;
}

body h1 {
	font-size: 48px !important;
	line-height: 1.2;
	font-weight: 400;
}

body h2 {
	font-size: 40px;
	line-height: 1.2;
	font-weight: 400;
}

body h3 {
	font-size: 36px;
	line-height: 1.2;
	font-weight: 400;
}

body h4 {
	font-size: 28px;
	line-height: 1.2;
	font-weight: 300;
}

body h5 {
	font-size: 28px;
	line-height: 1.2;
	font-weight: 500;
}

body h6,
.h6 {
	font-size: 24px;
	line-height: 1.2;
	font-weight: 400;
}

.sub-menu {
	font-size: 24px;
	line-height: 1.5;
	font-weight: 300;
}

.hightlight {
	font-size: 22px;
	line-height: 1.5;
	font-weight: 500;
}

#primary-menu {
	line-height: 32px;
	font-size: 26px;
}

.tag {
	font-size: 18px;
	line-height: 20px;
	font-weight: 500;
}

.site-nav-d li a {
	white-space: break-spaces;
}

/*-- Mobile Version --*/
@media (max-width: 768px) {
	body h1 {
		font-weight: 400;
		font-size: 38px !important;
	}

	body h2 {
		font-weight: 400;
		font-size: 30px;
	}

	body h3 {
		font-weight: 400;
		font-size: 28px;
	}

	body h4 {
		font-weight: 300;
		font-size: 26px;
	}

	body h5 {
		font-weight: 500;
		font-size: 26px;
	}

	body h6,
	.h6 {
		font-weight: 400;
		font-size: 24px;
	}

}

.cont-pd {
	max-width: 1312px !important;
}

.site-header>.s-container {
	max-width: 1320px !important;
	padding-left: 1.5rem !important;
}

@media (min-width: 992px) {

	.cont,
	.cont-pd {
		max-width: 990px;
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media (min-width: 1170px) {

	.cont,
	.cont-pd {
		max-width: 1200px;
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media (min-width: 992px) {
	.site-header a:hover {
		color: var(--ci-blue-500);
	}
}

.bg-ci-blue-100 {
	background-color: var(--ci-blue-100);
}

.bg-ci-blue-200 {
	background-color: var(--ci-blue-200);
}

.bg-ci-blue-300 {
	background-color: var(--ci-blue-300);
}

.bg-ci-blue-400 {
	background-color: var(--ci-blue-400);
}

.bg-ci-blue-500 {
	background-color: var(--ci-blue-500);
}

.bg-ci-blue-600 {
	background-color: var(--ci-blue-600);
}

.bg-ci-blue-700 {
	background-color: var(--ci-blue-700);
}

.bg-ci-blue-800 {
	background-color: var(--ci-blue-800);
}

.bg-ci-blue-900 {
	background-color: var(--ci-blue-900);
}

.bg-ci-veri-100 {
	background-color: var(--ci-veri-100);
}

.bg-ci-veri-200 {
	background-color: var(--ci-veri-200);
}

.bg-ci-veri-300 {
	background-color: var(--ci-veri-300);
}

.bg-ci-veri-400 {
	background-color: var(--ci-veri-400);
}

.bg-ci-veri-500 {
	background-color: var(--ci-veri-500);
}

.bg-ci-veri-600 {
	background-color: var(--ci-veri-600);
}

.bg-ci-veri-700 {
	background-color: var(--ci-veri-700);
}

.bg-ci-veri-800 {
	background-color: var(--ci-veri-800);
}

.bg-ci-veri-900 {
	background-color: var(--ci-veri-900);
}

.bg-ci-grey-100 {
	background-color: var(--ci-grey-100);
}

.bg-ci-grey-200 {
	background-color: var(--ci-grey-200);
}

.bg-ci-grey-300 {
	background-color: var(--ci-grey-300);
}

.bg-ci-grey-400 {
	background-color: var(--ci-grey-400);
}

.bg-ci-grey-500 {
	background-color: var(--ci-grey-500);
}

.bg-ci-grey-600 {
	background-color: var(--ci-grey-600);
}

.bg-ci-grey-700 {
	background-color: var(--ci-grey-700);
}

.bg-ci-grey-800 {
	background-color: var(--ci-grey-800);
}

.bg-ci-grey-900 {
	background-color: var(--ci-grey-900);
}

.bg-ci-green-100 {
	background-color: var(--ci-green-100);
}

.bg-ci-green-200 {
	background-color: var(--ci-green-200);
}

.bg-ci-green-300 {
	background-color: var(--ci-green-300);
}

.bg-ci-green-400 {
	background-color: var(--ci-green-400);
}

.bg-ci-green-500 {
	background-color: var(--ci-green-500);
}

.bg-ci-green-600 {
	background-color: var(--ci-green-600);
}

.bg-ci-green-700 {
	background-color: var(--ci-green-700);
}

.bg-ci-green-800 {
	background-color: var(--ci-green-800);
}

.bg-ci-green-900 {
	background-color: var(--ci-green-900);
}

.bg-ci-yellow-100 {
	background-color: var(--ci-yellow-100);
}

.bg-ci-yellow-200 {
	background-color: var(--ci-yellow-200);
}

.bg-ci-yellow-300 {
	background-color: var(--ci-yellow-300);
}

.bg-ci-yellow-400 {
	background-color: var(--ci-yellow-400);
}

.bg-ci-yellow-500 {
	background-color: var(--ci-yellow-500);
}

.bg-ci-yellow-600 {
	background-color: var(--ci-yellow-600);
}

.bg-ci-yellow-700 {
	background-color: var(--ci-yellow-700);
}

.bg-ci-yellow-800 {
	background-color: var(--ci-yellow-800);
}

.bg-ci-yellow-900 {
	background-color: var(--ci-yellow-900);
}

.bg-ci-orange-100 {
	background-color: var(--ci-orange-100);
}

.bg-ci-orange-200 {
	background-color: var(--ci-orange-200);
}

.bg-ci-orange-300 {
	background-color: var(--ci-orange-300);
}

.bg-ci-orange-400 {
	background-color: var(--ci-orange-400);
}

.bg-ci-orange-500 {
	background-color: var(--ci-orange-500);
}

.bg-ci-orange-600 {
	background-color: var(--ci-orange-600);
}

.bg-ci-orange-700 {
	background-color: var(--ci-orange-700);
}

.bg-ci-orange-800 {
	background-color: var(--ci-orange-800);
}

.bg-ci-orange-900 {
	background-color: var(--ci-orange-900);
}

.cl-ci-blue-100 {
	color: var(--ci-blue-100);
}

.cl-ci-blue-200 {
	color: var(--ci-blue-200);
}

.cl-ci-blue-300 {
	color: var(--ci-blue-300);
}

.cl-ci-blue-400 {
	color: var(--ci-blue-400);
}

.cl-ci-blue-500 {
	color: var(--ci-blue-500);
}

.cl-ci-blue-600 {
	color: var(--ci-blue-600);
}

.cl-ci-blue-700 {
	color: var(--ci-blue-700);
}

.cl-ci-blue-800 {
	color: var(--ci-blue-800);
}

.cl-ci-blue-900 {
	color: var(--ci-blue-900);
}

.cl-ci-veri-100 {
	color: var(--ci-veri-100);
}

.cl-ci-veri-200 {
	color: var(--ci-veri-200);
}

.cl-ci-veri-300 {
	color: var(--ci-veri-300);
}

.cl-ci-veri-400 {
	color: var(--ci-veri-400);
}

.cl-ci-veri-500 {
	color: var(--ci-veri-500);
}

.cl-ci-veri-600 {
	color: var(--ci-veri-600);
}

.cl-ci-veri-700 {
	color: var(--ci-veri-700);
}

.cl-ci-veri-800 {
	color: var(--ci-veri-800);
}

.cl-ci-veri-900 {
	color: var(--ci-veri-900);
}

.cl-ci-grey-100 {
	color: var(--ci-grey-100);
}

.cl-ci-grey-200 {
	color: var(--ci-grey-200);
}

.cl-ci-grey-300 {
	color: var(--ci-grey-300);
}

.cl-ci-grey-400 {
	color: var(--ci-grey-400);
}

.cl-ci-grey-500 {
	color: var(--ci-grey-500);
}

.cl-ci-grey-600 {
	color: var(--ci-grey-600);
}

.cl-ci-grey-700 {
	color: var(--ci-grey-700);
}

.cl-ci-grey-800 {
	color: var(--ci-grey-800);
}

.cl-ci-grey-900 {
	color: var(--ci-grey-900);
}

.cl-ci-green-100 {
	color: var(--ci-green-100);
}

.cl-ci-green-200 {
	color: var(--ci-green-200);
}

.cl-ci-green-300 {
	color: var(--ci-green-300);
}

.cl-ci-green-400 {
	color: var(--ci-green-400);
}

.cl-ci-green-500 {
	color: var(--ci-green-500);
}

.cl-ci-green-600 {
	color: var(--ci-green-600);
}

.cl-ci-green-700 {
	color: var(--ci-green-700);
}

.cl-ci-green-800 {
	color: var(--ci-green-800);
}

.cl-ci-green-900 {
	color: var(--ci-green-900);
}

.cl-ci-yellow-100 {
	color: var(--ci-yellow-100);
}

.cl-ci-yellow-200 {
	color: var(--ci-yellow-200);
}

.cl-ci-yellow-300 {
	color: var(--ci-yellow-300);
}

.cl-ci-yellow-400 {
	color: var(--ci-yellow-400);
}

.cl-ci-yellow-500 {
	color: var(--ci-yellow-500);
}

.cl-ci-yellow-600 {
	color: var(--ci-yellow-600);
}

.cl-ci-yellow-700 {
	color: var(--ci-yellow-700);
}

.cl-ci-yellow-800 {
	color: var(--ci-yellow-800);
}

.cl-ci-yellow-900 {
	color: var(--ci-yellow-900);
}

.cl-ci-orange-100 {
	color: var(--ci-orange-100);
}

.cl-ci-orange-200 {
	color: var(--ci-orange-200);
}

.cl-ci-orange-300 {
	color: var(--ci-orange-300);
}

.cl-ci-orange-400 {
	color: var(--ci-orange-400);
}

.cl-ci-orange-500 {
	color: var(--ci-orange-500);
}

.cl-ci-orange-600 {
	color: var(--ci-orange-600);
}

.cl-ci-orange-700 {
	color: var(--ci-orange-700) !important;
}

.cl-ci-orange-800 {
	color: var(--ci-orange-800);
}

.cl-ci-orange-900 {
	color: var(--ci-orange-900);
}


/*CONTACT FORM*/
form.wpcf7-form footer {
	display: none;
}

.clearfix:after,
.clearfix:before,
form:after,
form:before {
	content: unset;
}

.wpcf7-form input[type="checkbox"] {
	width: auto;
	display: inline-block;
}

.wpcf7-form :where(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"]),select,textarea {
	width: 100% !important;
/*	max-width: 22em !important;*/
}


/*End CONTACT FORM*/


#site-footer p a {
	color: #828A92;
}

.site-branding img {
	transition: max-height .2s;
	max-height: 20px;
}
/*-- Mobile Version --*/
@media (max-width: 768px) {
	.site-branding img{
		max-height: unset;
		width: 150px;
		height: auto;
		max-width: unset;
	}
}
img.emoji {
	font-size: 1em;
}

.p-mg {
	margin-bottom: 1rem;
}

div#content {
	background-color: var(--bg-color);
}

#footbar,
body {
	background-color: #fff;
}

#footbar {
	color: #fff;
}

.site-footer {
	background-color: var(--colophon-bg);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content p,
.entry-content ol,
.entry-content ul {
	margin-bottom: 1rem;
}

.ffont .elementor-widget-heading .elementor-heading-title {
	font-family: var(--pmr-font);
}

.tfont {
	font-family: var(txt-font);
}

.site-nav-m.active .menu>li {
	width: 100%;
}

.site-nav-m .menu>li:nth-child(1) {
	margin-top: .75em;
}

.quick-filter {
	border: 0.5px solid #eee;
	background-color: white;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quick-filter-inner,
.popup-filter-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.quick-filter-btn-box {
	background: #fff;
	height: 80px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-right: .6rem;

}

.quick-filter-btn {
	background-color: var(--ci-blue-300);
	color: #fff;
	border-radius: 8px;
	padding: 0.5rem 1.5rem;
	opacity: 1;
	transition: all .3s;
}

.quick-filter-btn:hover {
	opacity: .8;
}

.quick-filter-arrow {
	transition: .5s;
	float: right;
}

.promotion-slide--r {
	margin: unset;
	width: 48px;
	top: calc(50% - 24px + 36px);
	right: 0px;
	right: 6%;
	right: 16%;
	position: absolute;
	cursor: pointer;
}

.home-bottom-filter-img {
	width: 74px;
	height: 74px;
	padding: 18px;
	border-radius: 100%;
	background: #fff;
	margin-right: 0.75rem;
}

.home-bottom-filter {
	display: flex;
	padding-left: 2rem;
	align-items: center;
}

.home-bottom-filter:nth-child(2),
.home-bottom-filter:nth-child(3),
.home-bottom-filter:nth-child(4) {
	border-left: 1px var(--ci-grey-600) solid;
}

.home-project-card {
	width: 100%;
	/* box-shadow: 0px 4px 12px rgb(0 0 0 / 15%); */
	position: relative;
}

.home-project-card-title {
	padding-left: 12px;
	display: flex;
	align-items: center;
	position: relative;
}

.home-project-card-title::before {
	content: " ";
	width: 4px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: var(--pj-color);
}
.home-project-card .-pj-cp {
	position: absolute;
	top: calc(82px + 0.5rem);
	right: 0.5rem;
	background: rgb(0,0,0,0.7);
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	cursor: pointer;
}
/*-- Mobile Version --*/
@media (max-width: 768px) {
	.home-project-card .-pj-cp {
		top: 0.5rem;
	}
	.home-project-card.-for-search .-pj-cp
	{
		top: calc(82px + 0.5rem);
	}
}
.bottom-left {
	position: absolute;
	bottom: 8px;
	left: 16px;
	color: white;
}

.bottom-right {
	position: absolute;
	bottom: 8px;
	right: 16px;
}

.top-left {
	position: absolute;
	top: 0px;
	left: 0px;
	color: white;
}

.top-right {
	position: absolute;
	top: 10px;
	right: 16px;
}

/*ใช้ใน page-blog.php*/
.blog-menu,
.club-menu,
.promo-menu,
.about-menu {
	cursor: pointer;
}

.blog-menu,
.promo-menu,
.about-menu {
	color: var(--ci-grey-400);
	font-weight: 400;
	font-size: 26px;
	line-height: 32px;
}

.active {
	background-color: #757575;
	color: white;
}

.centered {
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.b-select {
	transition: 0.3s;
	border-left: 5px solid var(--ci-orange-500);
}

.txt-ex {
	font-size: 22px;
	line-height: 28px;
	font-weight: 400;
	display: block;
	height: calc(28px * 1);
	overflow: hidden;
	color: var(--ci-grey-400);
}

.txt-ex p {
	font-size: 22px;
	line-height: 28px;
	font-weight: 400;
	display: block;
	height: calc(28px * 1);
	overflow: hidden;
	color: var(--ci-grey-400);
}

@media (max-width: 640px) {
	.txt-ex {
		display: none;
	}

	.txt-ex p {
		display: none;
	}
}

.border-01 {
	border-top: 1px solid #EAEAEA;
	border-bottom: 1px solid #EAEAEA;
}

.border-02 {
	border-top: 1px solid #EAEAEA;
	border-bottom: 1px solid #EAEAEA;
	border-left: 1px solid #EAEAEA;
}

/*Use in site-header*/
.menu-txt {
	transition: .5s;
	cursor: pointer;
	color: white;
}

.menu-txt:hover,
#sub-service a:hover,
#sub-business a:hover {
	color: var(--ci-veri-500);
}

.mt-active a {
	color: var(--ci-veri-500);
}

/*ใช้ใน site-home.php*/
.news-head {
	width: 280px;
	text-align: center;
	position: absolute;
	left: -60px;
	height: 7rem;
}

#txt_pro {
	background-color: var(--ci-veri-400);
	border-radius: 10px 0px 0px 10px;
	border-color: var(--ci-veri-400);
	border-width: 2px 0px 2px 2px;
	border-style: solid;
	transition: .3s;
	width: 430px;
}

#arr_pro {
	border: 2px solid var(--ci-veri-400);
	width: 80px;
	transition: .3s;
	border-radius: 0px 10px 10px 0px;
	padding-top: 18px;
}

.arrow {
	position: relative;
	top: 0;
	width: 20px;
	height: 20px;
	border: solid var(--ci-veri-400);
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	transition: .3s;
	transform: rotate(45deg);
}

.scroll-hid {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.scroll-hid::-webkit-scrollbar {
	display: none;
}

.graylogo {
	transition: .3s;
	/*outline-width: 1px;
	outline-style: solid;
	outline-color: var(--ci-blue-800);*/
	/*-moz-border-radius: 0.5em;
	-ms-border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;*/
	border-radius: 0.5em;
	box-shadow: 0px 0px 0px 1px var(--ci-blue-800);
}

.graylogo:hover {
	box-shadow: 0px 0px 0px 2px var(--ci-blue-800);
}



.graylogo img {
	filter: grayscale(100%);
	transition: .3s;
	height: 50px;
	object-fit: contain;
	object-position: center;
}

.graylogo:hover img {
	filter: grayscale(0%);
}

.blog-title {
	font-weight: 500;
	line-height: 32px;
	font-size: 30px;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 768px) {
	.graylogo img {
		filter: grayscale(0%);
	}

	#txt_pro {
		padding: 0.5em 0.5em !important;
		width: 85vw;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
	}

	#arr_pro {
		width: 57px;
		padding-top: 8px;
	}

	.arrow {
		width: 15px;
		height: 15px;
	}

	.blog-title {
		height: 64px;
		overflow: hidden;
		font-size: 24px;
	}
}

/*Use in about us*/
.reward-div {
	transition: .5s;
}

.reward-name {
	transition: .5s;
	opacity: 0;
}

/*Use in single-promotion*/
.back-onlypro {
	width: 95vw;
	height: 340px;
	z-index: 0;
	right: -10vw;
	top: 1vw;
	background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.509729) 64.11%, rgba(255, 255, 255, 0) 100%);
}

.ani-pro {
	position: relative;
	right: -100%;
	opacity: 0;
	transition: .5s;
}

.ani-pro:nth-child(2) {
	transition-delay: .25s;
}

.ani-pro:nth-child(3) {
	transition-delay: .5s;
}

.ani-pro:nth-child(4) {
	transition-delay: .75s;
}

.ani-pro:nth-child(5) {
	transition-delay: 1s;
}

.ani-pro:nth-child(6) {
	transition-delay: 1.25s;
}

/*Use in page-condominium*/
.logo-box {
	display: inline-block;
	width: auto;
	height: 140px;
	margin-left: 20px;
	margin-right: 20px;
}

.scroll-condo {
	overflow: auto;
	white-space: nowrap;
	scroll-behavior: smooth;
	background-color: white;
	overflow-y: hidden;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 95%;
}

.prevcon,
.nextcon {
	cursor: pointer;
	position: absolute;
	top: 80%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: black;
	font-weight: bold;
	font-size: 20px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;

}

.prevcon {
	left: -1vw;
}

.nextcon {
	right: -1vw;
	border-radius: 3px 0 0 3px;
}

.menu-desktop-menu-container .menu li {
	position: relative;
}

.menu-desktop-menu-container .menu li:after {
	content: '';
	height: 20%;
	width: 1px;

	position: absolute;
	left: 0;
	top: 35%;

	background-color: var(--ci-grey-700);
}

.menu-desktop-menu-container .menu li:nth-child(1):after {
	height: 0;
	width: 0;
}

/* Modal for Gallery in single.php & single-asw_club */
.close {
	color: white;
	position: fixed;
	top: 3vw;
	right: 8vw;
	font-size: 55px;
	transition: .3s;
	font-weight: 100;
}

.close-menu {
	color: var(--ci-grey-100);
	position: fixed;
	top: 10px;
	right: 3vw;
	font-size: 45px;
	transition: .3s;
}

.search-fix {
	position: fixed;
	top: 15px;
	right: 6vw;
	font-size: 35px;
	transition: .3s;
	cursor: pointer;
}

.close:hover,
.close-menu:hover,
.close:focus {
	color: #999;
	text-decoration: none;
	cursor: pointer;
}

.demo-modal {
	opacity: 0.6;
	height: 100%;
	cursor: pointer;
}

.active-modal,
.demo-modal:hover {
	opacity: 1;
}

.modal-nav {
	background-color: rgba(32, 40, 49, 0.4);
	min-height: 32px;
	padding: 0.5rem 0rem;
	display: flex;
	flex-direction: row-reverse;

}

.modal-img {
	display: none;
	position: fixed;
	z-index: 5;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.85);
	z-index: 10000;
}

.modal-nav-img {
	min-height: 24px;
	display: flex;
	margin-top: 20px;
}

.modal-nav-img img {
	height: 24px;
	width: 24px;
}

.modal-img-content {
	position: relative;
	background-color: rgba(255, 255, 255, 0);
	margin: auto;
	padding: 0;
	top: 4vw;
	width: 80%;
	max-width: 1200px;
}

.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}

.prev,
.next {
	height: 48px;
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -50px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;

}

.prev {
	left: -9vw;
	/*	transform: rotate(180deg);*/

}

.next {
	right: -9vw;
	border-radius: 3px 0 0 3px;
}

/* .prev:hover,
.next:hover {
	background-color: rgba(255, 255, 255, 0.3);
} */

.mySlides {
	height: 500px;
	background-color: rgba(255, 255, 255, 0);
}

.mySlides img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.modal-column {
	width: auto;
	height: 150px;
	padding: 10px;
	display: inline-block;
}

.scroll-gal {
	background-color: rgba(255, 255, 255, 0);
	overflow: auto;
	white-space: nowrap;
	scroll-behavior: smooth;
}

@media (max-width: 1023px) {
	.app-btn-wrap {
		top: 120px !important;
		left: 0 !important;
	}
}

@media (max-width: 992px) {
	.modal-column {
		height: 100px;
	}

	.app-btn-wrap {
		width: 200% !important;
		top: 120px !important;
		left: -5vw !important;
	}

	.app-btn {
		/*		width: 47.5vw !important;*/
		width: 30% !important;
	}
}

@media (max-width: 768px) {
	.news-head {
		left: 0;
		width: 200px;
		height: 65px;
	}

	.prevcon {
		left: 3vw;
	}

	.nextcon {
		right: 3vw;
	}

	.scroll-condo {
		width: 80%;
	}

	.close {
		top: 7vw;
	}

	.border-01,
	.border-02 {
		border: 0;
	}

	.b-select {
		border-left: 0px solid;
		border-bottom: 3px solid;
	}

	.app-btn-wrap {
		/*top: 115px !important;
		left: -7vw !important;
		width: 200vw !important;*/
		top: 40px !important;
		left: 10px !important;
	}
}

.menu-item {
	font-size: 22px;
	font-weight: 500 !important;
}

/*-- Mobile Version --*/
@media (max-width: 1023px) {
	.home-bottom-filter {
		flex-direction: column;
	}

	.home-bottom-filter:nth-child(1) {
		padding-bottom: 1rem;
	}

	.home-bottom-filter:nth-child(2) {
		padding-bottom: 1rem;
	}

	.home-bottom-filter:nth-child(3) {
		border-left: 0px var(--ci-grey-600) solid;
		border-top: 1px var(--ci-grey-600) solid;
		padding-top: 1rem;
	}

	.home-bottom-filter:nth-child(4) {
		border-top: 1px var(--ci-grey-600) solid;
		padding-top: 1rem;
	}

	.home-bottom-filter-img {
		margin-right: 0;
	}
}

@media (max-width: 1023px) {
	.home-bottom-filter {
		padding-left: 0rem;
	}

	.booking-content {
		padding-top: 48px;
		padding-left: 24px
	}
}

.booking-content {
	width: 100%;
	padding: 48px;
	padding-right: 48px;
	position: relative;
	left: -100px;
	transition: .5s;
}

@media (max-width: 767px) {
	.booking-content {
		width: 100%;
		padding: 40px;
		padding-right: 40px;
		position: relative;
		left: -100px;
		transition: .5s;
	}
	.home-bottom-filter {
		padding: 1rem 0;
		border: 1px solid var(--ci-grey-600) !important;
		border-left: 2px solid var(--ci-grey-600) !important;
		border-right: 2px solid var(--ci-grey-600) !important;
	}

	.home-bottom-filter:first-child{
		border-top: 2px solid var(--ci-grey-600) !important;
	}
	.home-bottom-filter:bottom-child{
		border-bottom: 2px solid var(--ci-grey-600) !important;
	}
}

@media (min-width: 1024px) {
	.booking-content {
		left: 0px;
	}
}

@media (max-width: 448px) {
	.news-head {
		width: 160px;
	}

	.app-btn-wrap {
		top: 115px !important;
		left: -12vw !important;
	}
}

@media (max-width: 1440px) {
	.booking-content {
		left: 0px;
	}
}

.booking-wrap {
	display: flex;
}

.booking-wrap>div {
	width: 50%;
}

.app-btn-wrap {
	width: 160% !important;
	position: relative;
	top: 50px !important;
	left: 1rem !important;
	z-index: 2;
}

.app-btn {
	width: 40%;
	margin-right: 6px;
	display: inline-block;
	transition: all .3s;
	opacity: 1;
}

@media (max-width: 380px) {
	.app-btn {
		width: 22% !important;
	}
}

.app-btn:hover {
	opacity: .8;
}

.mini-filter-toggle-1,
.mini-filter-toggle-2,
.mini-filter-toggle-3,
.mini-filter-toggle-4,
.mini-filter-toggle-5 {
	width: 100%;
	position: relative;
	display: none;
	transition: .5s;
	margin-bottom: 20px;
}

.quick-filter-toggle-1 {
	width: 14em;
	position: relative;
	z-index: 10;
	display: none;
}

.quick-filter-toggle-2 {
	width: 40em;
	position: relative;
	z-index: 10;
	left: 21%;
	display: none;
}

.quick-filter-toggle-3 {
	float: right;
	width: 35em;
	position: relative;
	z-index: 10;
	display: none;
}

.quick-filter-toggle-4 {
	top: 5px;
	width: 10em;
	position: relative;
	z-index: 10;
	left: 63%;
	display: none;
}

.filter-sub-boxes {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(24, 1fr);
}

.filter-sub-boxes-close {
	position: fixed;
	background: #0008;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 10;
}

.filter-sub-box {
	position: relative;
	z-index: 100;
	background: #FFFFFF;
	border: 1px solid #E0ECF8;
	border-radius: 8px;
	padding: 16px;
}

.filter-sub-box.-b1 {
	grid-column: 1/7;
	grid-row: 1/2;
}

.filter-sub-box.-b2 {
	grid-column: 6/20;
	grid-row: 1/2;
	/*background: #f008;*/
}

.filter-sub-box.-b3 {
	grid-column: 7/25;
	grid-row: 1/2;
	/*background: #00f8;*/
}

.filter-sub-box.-b4 {
	grid-column: 16/24;
	grid-row: 1/2;
	/*background: #0f08;*/
}

.home_promotion_slide {
	overflow: hidden;
	padding-right: 32px;
}

.home_promotion_slide .bg-cover {
	transition: all .8s;
	transform: scale(1);
}

.home_promotion_slide a {
	overflow: hidden;
	display: block;
}

.home_promotion_slide:hover .bg-cover {
	transform: scale(1.05);
}

/* .home-project-card {
	overflow: hidden;
} */

.home-project-card .blank {
	transition: all .8s;
	/*transform: scale(1);*/
	background-size: 102% auto !important;
}

.home-project-card:hover .blank {
	/*transform: scale(1.1);*/
	background-size: 115% auto !important;
	/*	transform: scale(1.15);*/
}

.home-news-cards-wrap .col-span-1 sp.s {
	transition: all .8s;
}

.home-news-cards-wrap .col-span-1:hover sp.s {

	width: 100% !important;
}


.home-news-cards-wrap .col-span-1 .blank {
	transition: all .8s;
	transform: scale(1);
}

.home-news-cards-wrap .col-span-1:hover .blank {
	transform: scale(1.1);
}

.box-blog .bg-cover,
.box-blog {
	background-size: 100% auto !important;
	transition: all .8s;
	background-repeat: no-repeat;
	/*	background-size: cover !important;*/
}


.box-blog:hover .bg-cover,
.box-blog:hover {
	background-size: 110% auto !important;
}

.blog-ani .bg-cover,
.blog-ani {
	transform: scale(1);
	transition: all .8s;
}

.blog-ani:hover .bg-cover,
.blog-ani:hover,
.blog-wrap:hover .blog-ani {
	transform: scale(1.3);
}

.box-blog .round {
	border-radius: 10em;
	padding: 0.3rem .6rem;
	color: var(--ci-orange-500) !important;
}

.box-blog-1 .bottom-left {
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 16px !important;
	/*position: relative;*/
	/*background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);*/
}

.shadow-blog-0 {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 140%;
	width: 100%;
	z-index: -1;
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

#home_promotion_title_inner {
	max-height: 215px;
	overflow: auto;
	scroll-behavior: smooth;
	padding-right: 50px;
}

#home_promotion_title_inner sp.vl {
	height: 24px;
}

.f30-24 {
	font-size: 24px !important;
	line-height: 24px !important;
}

.f30-28 {
	font-size: 24px !important;
	line-height: 1.2 !important;
}

.f56-42 {
	font-size: 56px !important;
	line-height: 56px !important;
}

.f22-20 {
	font-size: 22px !important;
	line-height: 28px !important;
}

.f26-24 {
	font-size: 26px !important;
	line-height: 32px !important;
}

.f26-22 {
	font-size: 26px !important;
	line-height: 32px !important;
}

.f26-20 {
	font-size: 26px !important;
	line-height: 32px !important;
}

.f40-30 {
	font-size: 40px !important;
	line-height: 44px !important;
}

.f40-36 {
	font-size: 40px !important;
	line-height: 44px !important;
}

.f48-42 {
	font-size: 48px !important;
	line-height: 48px !important;
	font-weight: 400;
}

.f48-36 {
	font-size: 48px !important;
	line-height: 48px !important;
	font-weight: 400;
}

.f48-40 {
	font-size: 48px !important;
	line-height: 48px !important;
	font-weight: 400;
}

.the-filt {
	position: absolute;
}

@media (max-width: 768px) {
	.f30-24 {
		font-size: 24px !important;
		line-height: 32px !important;
	}

	.f30-28 {
		font-size: 28px !important;
		line-height: 32px !important;
	}

	.f56-42 {
		font-size: 42px !important;
		line-height: 40px !important;
	}

	.f22-20 {
		font-size: 20px !important;
		line-height: 28px !important;
	}

	.f26-24 {
		font-size: 24px !important;
		line-height: 32px !important;
	}

	.f26-22 {
		font-size: 22px !important;
		line-height: 28px !important;
	}

	.f26-20 {
		font-size: 20px !important;
		line-height: 32px !important;
	}

	.f40-30 {
		font-size: 30px !important;
		line-height: 36px !important;
	}

	.f40-36 {
		font-size: 36px !important;
		line-height: 40px !important;
	}

	.f48-42 {
		font-size: 42px !important;
		line-height: 40px !important;
	}

	.f48-36 {
		font-size: 36px !important;
		line-height: 40px !important;
	}

	.f48-40 {
		font-size: 40px !important;
		line-height: 40px !important;
	}
}

.cont-pd,
cont-pd {
	max-width: 1312px;
	min-width: 320px;
	display: block;
	position: relative;
	margin: auto;
	padding: 0 16px;
}

@media (min-width: 1441px) {
	.cont-booking {
		max-width: 1320px;
		min-width: 320px;
		display: block;
		position: relative;
		margin: auto;
		padding: 0 16px;
	}

}

.see-more img {
	position: relative;
	transition: all .2s;
	left: 0;
	object-fit: contain;
	object-position: top center;
}

.see-more:hover img {
	left: 4px;
}

/*ใบไม้ใบหญ้า*/
.leaf01 {
	width: 30vw;
	left: 0vw;
	top: -9vw;
}

.leaf02 {
	left: 0;
	top: -22vw;
	width: 35vw;
	z-index: 10;
}

.leaf03 {
	right: 0;
	top: 32vw;
	width: 20vw;
	z-index: 10;
}

.leaf04 {
	right: 0;
	width: 10vw;
}

.leaf04-1 {
	display: none;
	right: 0;
	width: 10vw;
}

.leaf05 {
	left: 0;
	top: 25vw;
	width: 15vw;
}

.leaf05-1 {
	display: none;
	left: 0;
	top: 25vw;
	width: 15vw;
}

.leaf06 {
	left: 0;
	top: -18vw;
	width: 40vw;
}

.leaf07 {
	right: 0;
	top: -30vw;
}

.leaf08 {
	right: 0;
	top: -15vw;
	width: 25vw;
	z-index: 1;
}

.leaf09 {
	left: 0;
	top: 15vw;
	width: 15vw;
	z-index: 1;
}

.leaf10 {
	right: 0;
	top: 3vw;
	width: 10vw;
	z-index: 1;
}

.leaf11 {
	left: 0;
	top: 0;
	width: 15vw;
	z-index: 1;
}

.leaf12 {
	right: 0;
	bottom: -19.5vw;
	width: 15vw;
	z-index: 1;
}

.leaf13 {
	left: 0;
	top: -3.5vw;
	width: 12vw;
	z-index: 1;
}

.leaf14 {
	display: none;
}

.leaf15 {
	left: 0;
	width: 7vw;
	top: 8vw;
}

.leaf16 {
	right: 0;
	width: 17vw;
	top: 12vw;
}

.leaf-burger {
	left: 0;
	top: 65%;
	width: 230px;
}

@media (min-width: 1441px) {
	.leaf01 {
		width: 25vw;
		left: 0vw;
		top: -7vw;
	}

	.leaf02 {
		left: 0;
		top: -15vw;
		width: 25vw;
		z-index: 10;
	}

	.leaf03 {
		right: 0;
		top: 21vw;
		width: 17vw;
	}

	.leaf04 {
		display: none;
		right: 0;
		width: 8vw;
	}

	.leaf04-1 {
		display: block;
		right: 0;
		width: 8vw;
	}

	.leaf05 {
		display: none;
	}

	.leaf05-1 {
		display: block;
		left: 0;
		top: 20vw;
		width: 12vw;
	}

	.leaf06 {
		left: -7vw;
		top: -7vw;
		width: 18vw;
	}

	.leaf07 {
		right: 0;
		top: -15vw;
	}

	.leaf08 {
		right: 0;
		top: -10vw;
		width: 20vw;
		z-index: 1;
	}

	.leaf09 {
		left: 0;
		top: 8vw;
		width: 17vw;
		z-index: 1;
	}

	.leaf10 {
		right: 0;
		top: 0vw;
		width: 11vw;
		z-index: 1;
	}

	.leaf-burger {
		left: 0;
		top: 50%;
		width: initial;
	}
}

@media (max-width: 1116px) {
	.leaf01 {
		width: 40vw;
		top: -10vw;
		z-index: 10;
	}

	.pmt-sp {
		display: none;
	}

	.leaf02 {
		top: -18vw;
		width: 35vw;
		z-index: 10;
	}
}

@media (max-width: 1024px) {
	.leaf04 {
		display: none;
	}
}

@media (max-width: 748px) {
	.leaf02 {
		display: none;
	}

	.leaf03 {
		display: none;
	}

	.leaf05 {
		left: 0;
		top: 150vw;
		width: 50vw;
	}

	.leaf06 {
		left: -10vw;
		top: -20vw;
		width: 50vw;
	}

	.leaf07 {
		display: none;
	}

	.leaf08 {
		right: 0;
		top: -30vw;
		width: 40vw;
		z-index: 1;
	}

	.leaf09 {
		display: none;
	}

	.leaf10 {
		display: none;
	}

	.leaf11 {
		top: -5vw;
		width: 28vw;
	}

	.leaf12 {
		right: -15%;
		bottom: -40vw;
		width: 40vw;
		z-index: 0;
	}

	.leaf13 {
		top: -20vw;
		width: 28vw;
	}

	.leaf14 {
		display: block;
		right: -15%;
		bottom: 20vw;
		width: 40vw;
		z-index: 0;
	}

	.leaf15,
	.leaf16 {
		display: none;
	}

	.leaf-burger {
		left: 0;
		top: 50%;
		width: initial;
	}
}

.desktop-only {
	display: block !important;
}

.mobile-only {
	display: none !important;
}

#footer_img_btn {
	width: 80%;
}

@media (max-width: 1116px) {
	#footer_img_btn {
		width: 80%;
	}
}

@media (max-width: 1024px) {
	#footer_img_btn {
		width: 90%;
	}
}

@media (max-width: 768px) {
	#footer_img_btn {
		width: 100%;
	}
}

@media (max-width: 420px) {
	#footer_img_btn {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.desktop-only {
		display: none !important;
	}

	.mobile-only {
		display: block !important;
	}

	.arrow_footer {
		width: 10px;
		height: 10px;
		position: relative;
		top: 0;
		left: -5px;
		border-width: 0 1.5px 1.5px 0;
		display: inline-block;
		padding: 3px;
		transition: .3s;
		transform: rotate(45deg);
	}

	.mob_footer_list[data-footShow="1"] .foot-toggle,
	.mob_footer_list[data-footShow="1"] .foot-toggle p {
		max-height: 999px;
		display: block;
	}

}

.blog-shadow {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
	height: 34%;
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, .75) 53%, rgba(255, 255, 255, 0) 100%);
}

@media (min-width: 1441px) {
	.cont-hide {
		overflow: hidden;
	}
}



/*-- Mobile Version --*/
@media (max-width: 1439px) {
	.home-cards-wrap-block {
		overflow: hidden;
	}

	#home-pro-arrow-2 {
		right: 0px !important;
	}

	#home-pro-arrow-1 {
		left: 0 !important;
	}
}

.plyr__poster {
	transition: opcity 0s;
}

.jb-pre {
	font-size: 20px;
	background-color: #545;
	color: #fff;
	font-family: monospace;
	width: calc(100% - 2rem);
	max-height: 300px;
	padding: 1rem;
	overflow: auto;
	margin:1rem;
}
.cwc-float-container.cwc-entered.cwc-css-1lu9llr-cwc {
	display: none;
}
.site-lang-txt {
	/*	margin-right: 16px;*/
	margin-left: 8px;
	font-weight: 400;
	font-size: 22px;
	line-height: 32px;
	color: black;
}

.jb-lightbox {
	background-image: var(--img);
}

:root {
	--mc-lightbox-arrow: url('/wp-content/uploads/2023/03/slide-arrow-l-e1680155229211.png');
}

#contact-form {
	width: 100%;
	padding-bottom: 64px;
}

#contact-form .-body {
	padding-top: 40px;
}

#contact-form .-title-wrap .-desc {
	padding-top: 4px;
}

#contact-form .-annouce {
	display: flex;
	align-items: center;
	margin-top: 14px;
	padding: 16px;
	background: var(--ci-blue-900);
	border-radius: 8px;
	border: 1px solid var(--ci-blue-600);
}

#contact-form .-annouce img {
	height: 32px;
	width: auto;
	margin: 0;
	margin-right: 8px;
}

#contact-form .wpcf7-form {
	display: grid;
	column-gap: 16px;
	row-gap: 20px;
	grid-template-columns: repeat(10, 1fr);
}

#contact-form .wpcf7-form :where(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"]) {
	width: 100% !important;
	max-width: 100% !important;
}

#contact-form .wpcf7-form h5 {
	grid-column: span 10;
}


#contact-form .wpcf7-form>aside>span:nth-child(1) {
	color: var(--ci-grey-400) !important;
}

#contact-form .wpcf7-form>span:nth-child(1) {
	color: var(--ci-grey-400) !important;
}

#contact-form .wpcf7-form .wpcf7-form-control-wrap .wpcf7-form-control:where(.wpcf7-text, .wpcf7-select, .wpcf7-textarea, .wpcf7-number) {
	padding: 9px 16px;
	border: 1px solid var(--ci-grey-500);
	border-radius: 8px;
	resize: none;
	width: 100%;
}

#contact-form .wpcf7-form .wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-not-valid {
	border-color: #E24646;
}

#contact-form .wpcf7-form aside label {
	width: 100%;
}

#contact-form .wpcf7-form .wpcf7-form-control-wrap .wpcf7-textarea {
	width: 100%;
	height: 4lh;
}

#contact-form .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select {
	height: 48px;
}

#contact-form .wpcf7 form .wpcf7-response-output {
	grid-column: 10 span;
}

#contact-form .wpcf7 .wpcf7-not-valid-tip {
	/* position: absolute !important; */
	color: #e24646 !important;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	position: relative;
	padding-left: calc(8px + 16px);
}

#contact-form .wpcf7 .wpcf7-not-valid-tip::before,
#contact-form #form_check_ok_alert::before {
	content: " ";
	background-image: url(/wp-content/uploads/2023/03/invalid.png);
	width: 16px;
	height: 16px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	top: calc((1lh - 16px) / 2);
}

#contact-form #form_check_ok_alert {
	position: relative;
	padding-left: calc(8px + 16px);
	color: #e24646;
}

/* Codedropz */
#contact-form .codedropz-upload-container {
	margin-bottom: 5px;
}

#contact-form .codedropz-upload-inner span {
	color: var(--ci-grey-400);
}

#contact-form .codedropz-upload-inner h3 {
	color: var(--ci-grey-400);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

#contact-form .codedropz-upload-inner h3::before {
	content: "";
	background-image: url(/wp-content/uploads/2023/04/Group.png);
	background-size: contain;
	display: block;
	width: 24px;
	height: 24px;
}

#contact-form .codedropz-btn-wrap {
	display: flex;
	justify-content: center;
	padding-top: 5px;
}

#contact-form a.cd-upload-btn::before {
	content: "";
	background-image: url(/wp-content/uploads/2023/04/material-symbols_attach-file.png);
	background-size: contain;
	display: block;
	width: 32px;
	height: 32px;
}

#contact-form a.cd-upload-btn {
	display: flex;
	align-items: center;
	padding: 5px 44px;
	background: var(--ci-blue-300);
	border-radius: 8px;
	color: white;
}

#contact-form .codedropz-upload-handler {
	border: 1px dashed var(--ci-grey-500);
	margin-bottom: 0;
}

#contact-form .dnd-upload-status .dnd-upload-image {
	border: none;
}

#contact-form .dnd-upload-status .dnd-upload-image span.file {
	background-image: url(/wp-content/uploads/2023/04/Png.png);
	height: 40px;
	width: 40px;
}

#contact-form .dnd-upload-status .dnd-upload-details .name {
	color: var(--ci-grey-200);
}

#contact-form .dnd-upload-status .dnd-upload-details .name em {
	color: var(--ci-grey-400);
	font-style: normal;
	font-weight: 400;
}

#contact-form .dnd-upload-status .dnd-upload-details .dnd-progress-bar span {
	color: var(--ci-veri-400);
	background: var(--ci-veri-400);

}

#contact-form .dnd-upload-status .dnd-upload-details .dnd-progress-bar {
	background: var(--ci-grey-800);
	height: 5px;
}

#contact-form .dnd-upload-status .dnd-upload-details .remove-file {
	top: 20px;
}

#contact-form .dnd-upload-status.complete .dnd-upload-details .dnd-progress-bar {
	display: none;
}

#contact-form .dnd-upload-status {
	margin-top: 8px;
	padding: 16px;
	background: var(--ci-grey-900);
	border: solid 1px var(--ci-grey-800);
	border-radius: 8px;
}

#contact-form .codedropz-upload-wrapper .dnd-upload-status:nth-child(3) {
	margin-top: 36px !important;
}

#contact-form .dnd-upload-status:has(.has-error) {
	border: 1px solid #E24646;
	background: #F6E4E4;
}

#contact-form .dnd-upload-status:has(.has-error) .dnd-progress-bar {
	display: none;
}

#contact-form .dnd-upload-status:has(.has-error) .has-error {
	font-size: 18px;
	line-height: 20px;
	color: #E24646;
	font-weight: 700;
}

#contact-form .dnd-upload-status .dnd-upload-details .remove-file>span:after {
	height: 24px;
	width: 24px;
	margin-right: 16px;
	background-image: url(/wp-content/uploads/2023/04/Icon-Close-1.png);
}

#contact-form .dnd-upload-status .dnd-upload-details .name>span {
	color: var(--ci-grey-200);
}

#contact-form .-body .-button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 8px 34px;
	gap: 8px;
	border-radius: 8px;
	color: #fff;
	background-color: var(--ci-blue-300);
	cursor: pointer;
}

#contact-form .-body .-note {
	font-size: 20px;
	line-height: 28px;
	font-weight: 400px;
}

#contact-form .-body .-checkbox {
	padding-top: 45px;
	padding-bottom: 36px;
}

#contact-form .-body .-checkbox label {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 8px;
}

#contact-form .-body .-checkbox input {
	accent-color: var(--ci-veri-600);
	height: 27px;
	width: 27px;
}

#contact-form .-checkbox a {
	color: var(--ci-blue-300);
	text-decoration: underline;
}

#contact-form .-checkbox>label>span {
	color: var(--ci-grey-400);
}

/* animate */
#contact-form .wpcf7-response-output {
	animation-duration: 1.5s;
	animation-delay: 5s;
	animation-fill-mode: forwards;
	animation-name: fade;
	animation-iteration-count: 1;
}

@keyframes fade {
	to {
		opacity: 0;
	}
}

/* animate end */
#contact-form .wpcf7-form .wpcf7-response-output {
	position: fixed;
	top: 70px;
	right: 0;
	max-width: 376px;
	flex-direction: column;
	padding-bottom: 16px;
	padding-left: calc(16px + 32px + 8px);
	padding-top: calc(24px + 32px);
	padding-right: 24px;
	border-radius: 8px;
	border: none;
	background: var(--ci-veri-900);
	border-left: 5px solid var(--ci-veri-400);
}

/* invalid */
#contact-form .wpcf7-form.invalid .wpcf7-response-output::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 16px;
	background-image: url(/wp-content/uploads/2023/03/invalid.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 32px;
	height: 32px;
	padding: 0;

}

#contact-form .wpcf7-form.invalid .wpcf7-response-output::after {
	content: "เกิดข้อผิดพลาด";
	color: #e24646;
	font-size: 30px;
	line-height: 32px;
	font-weight: 500;
	position: absolute;
	top: 16px;
	left: calc(16px + 32px + 8px);
}

#contact-form .wpcf7-form.invalid .wpcf7-response-output {
	background: #F6E4E4;
	border-left: 5px solid #e24646 !important;
}

/* invalid end */

/* sent */
#contact-form .wpcf7-form.sent .wpcf7-response-output::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 16px;
	background-image: url(/wp-content/uploads/2023/04/Group-1147.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 32px;
	height: 32px;
	padding: 0;
}

#contact-form .wpcf7-form.sent .wpcf7-response-output::after {
	content: "ส่งข้อความเรียบร้อย";
	color: var(--ci-veri-400);
	font-size: 30px;
	line-height: 32px;
	font-weight: 500;
	position: absolute;
	top: 16px;
	left: calc(16px + 32px + 8px);
}

@media (max-width: 767px) {
	#contact-form a.cd-upload-btn {
		display: flex;
		align-items: center;
		padding: 5px 30px;
		background: var(--ci-blue-300);
		border-radius: 8px;
		color: white;
	}
}

/* sent end */

/* banner-form */

#banner-form {
	background-image: var(--img);
	background-position: center;
	background-size: cover;
	padding-top: 36px;
	padding-bottom: 32px;
}

#banner-form .-inner {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	position: relative;
}

#banner-form .-inner .-img {
	background-image: var(--img);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	padding-top: 54.30%;
	grid-column: span 6;
}

#banner-form .-body-wrap {
	color: #fff;
	grid-column: span 4;
	padding: 12px 40px;
}

/* #banner-form .-body-wrap .-title {
	padding-top: 12px;
} */

#banner-form .-body-wrap .-body {
	padding-left: 32px;
}

/*-- Mobile Version --*/
@media (max-width: 1023px) {
	#banner-form .-body-wrap .-body {
		padding-left: 0;
	}

}

#banner-form .-body .-wrap>img {
	width: auto;
	height: 20px;
	margin: 0;
	margin-top: 6px;
}

#banner-form .-body .-wrap {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-top: 32px;
}

#banner-form .-body .-desc>p {
	color: var(--ci-blue-700);
}

#banner-form .-body .-desc>a {
	color: var(--ci-veri-600);
	display: flex;
	align-items: center;
	gap: 6px;
	width: max-content;
}

#banner-form .-body .-desc>a>img {
	height: 18px;
	width: auto;
	margin: 0;
}

#banner-form .-shadow {
	pointer-events: none;
}

#banner-form .-shadow .shadow-1 {
	position: absolute;
	top: 13vw;
	width: 35vw;
	z-index: 99;
}

#banner-form .-shadow .shadow-2 {
	position: absolute;
	right: 0;
	width: 13vw;
	top: 75vw;
	z-index: 99;
}

#banner-form .-background {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

#banner-form .-background .-l {
	grid-column: 4 span;
	background: var(--ci-grey-900);
}

#banner-form .-background .-r {
	grid-column: 3 span;
	background: var(--img);
	background-position: center;
	background-size: cover;
}

/* banner-form end */

/*-- Mobile Version --*/
@media (max-width: 1320px) {
	.site-header {
		display: flex;
		align-items: center;
	}
}

/* Contact Form */

#menu-contact {
	overflow: auto;
}

.-blank {
	display: none;
}

/*-- Mobile Version --*/
@media (max-width: 767px) {


	#banner-form .-inner .-img {
		padding-top: 100%;
	}
}

@media (max-width: 1023px) {
	#banner-form {
		padding-top: 0;
		padding-bottom: 0;
	}

	#banner-form .-background {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	#banner-form .-inner {
		grid-template-columns: 1fr;
	}

	#banner-form .-body-wrap {
		padding: 2rem 1rem;
	}

	#content .container.mx-auto {
		margin: 0 auto !important;
	}

	/* #contact-form {
		width: calc(100vw - 64px);
	} */

}

@media (min-width: 1024px) and (max-width: 1279px) {
	.-blank {
		grid-column: span 1;
		display: block;
	}

	.lg\:col-span-3 {
		grid-column: span 4 /span 4;
	}
}

.clear-wrap-mini {
	z-index: 10000;
}

div#header-nav-items {
	margin-left: 3rem;
}


/*-- Mobile Version --*/
@media (max-width: 767px) {
	.app-btn-wrap {
		left: -2rem !important;
	}
}

#content .-bc::after {
	content: " ";
	width: 5rem;
	height: 2rem;
	background: linear-gradient(-90deg, #ffffff, transparent);
	z-index: 10;
	position: absolute;
	right: 0;
}

.-body-w-side {
	display: grid;
	grid-template-columns: 220px auto;
	grid-column-gap: 1rem;
}

@media (max-width: 1023px) {
	.-body-w-side {
		grid-template-columns: 1fr;
	}
}

.dynamic-side-nav:before {
	content: " ";
	width: 1px;
	background-color: #DFE3E8;
	height: 100%;
	position: absolute;
	top: 0;
	pointer-events: none;
}

.dynamic-side-nav {
	position: relative;
	padding-left: 1rem;
	--ci-nav: #F1683B;
	--link-hover: var(--ci-nav);
	padding-top: 4px;
	padding-bottom: 14px;
}

.dynamic-side-nav li {
	font-style: normal;
	font-weight: 400;
	font-size: 26px;
	line-height: 32px;
	margin-bottom: 1rem;
	color: #828A92;
	padding-left: 1rem;
	transition: all .3s;
	cursor: pointer;
}

.dynamic-side-nav li:last-child {
	margin-bottom: 0;
}

.dynamic-side-nav .-runner {
	pointer-events: none;
	width: 4px;
	background-color: var(--ci-nav);
	position: absolute;
	left: 14px;
	top: var(--dsn-y);
	height: var(--dsn-h);
	transition: all .3s;
}

/*-- Mobile Version --*/
@media (max-width: 1023px) {
	.dynamic-side-nav {
		padding-left: 0;
		overflow: auto;
		position: relative;
		height: 52px;
	}

	.dynamic-side-nav::-webkit-scrollbar {
		display: none;
	}

	.dynamic-side-nav ul {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		gap: 1rem;
		width: max-content;
		min-width: 100%;
		border-bottom: 1px solid #828A92;
	}

	.dynamic-side-nav li {
		padding-left: 0;
		margin-bottom: 8px;
	}

	.dynamic-side-nav .-runner {
		height: 4px;
		width: var(--dsn-w);
		left: var(--dsn-x);
		top: 38.25px;
		z-index: 2;
	}

	.dynamic-side-nav:before {
		display: none;
	}
}

.line-clamp-1,
.line-clamp-2 {
	word-break: break-all;
}


.card-360 {
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.card-360 .-footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	align-items: center;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: .5rem;
}

.card-360 .-footer i.-line {
	background-image: url(/wp-content/uploads/2023/05/Line.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 24px;
	height: 24px;
	display: inline-block;
}

.card-360 .-booking-box {
	text-align: right;
}

.card-360 .-contact {
	font-style: normal;
	font-weight: 400;
	font-size: 26px;
	line-height: 32px;
	display: inline-block;
	text-align: center;
	color: #123F6D;
	gap: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	border-radius: 5px;
	transition: all .3s;
}

.card-360 .-contact:hover {
	background-color: #e0ecf8;
}

.card-360 .-booking {
	padding: 8px 32px;
	background: #E0ECF8;
	font-weight: 400;
	font-size: 26px;
	line-height: 32px;
	text-align: center;
	color: #FFFFFF;
	text-align: center;
	border-radius: 8px;
	display: inline-block;
	width: 95%;
	height: 48px;
	margin-top: 10px;
}

.card-360 .-inner {
	width: 100%;
	padding: 1rem 1rem .5rem 1rem;
}

.card-360 .-inner-img {
	width: 100%;
	padding-bottom: 147%;
	background-color: #333;
	position: relative;
	overflow: hidden;
}

.card-360 .-fim {
	background-image: var(--fim);
	background-size: cover;
	transition: all .5s;
	scale: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.card-360 .-pj-status {
	--status-ci: #1D9F9B;
	height: 44px;
	line-height: 44px;
	padding-left: 16px;
	margin-top: 16px;
	position: relative;
	font-weight: 700;
	font-size: 18px;
	color: var(--status-ci);
}

.card-360[data-status_slug="new_project"] .-pj-status {
	--status-ci: #3A638E;
}

.card-360 .-pj-status::before {
	content: " ";
	display: block;
	background-color: var(--status-ci);
	width: 4px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
}

.card-360 .-pj-logo {
	margin-right: 16px;
	margin-top: 16px;
	height: 44px;
	background-image: var(--pj-logo);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center right;
}

.card-360 .-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.card-360:hover .-fim {
	scale: 1.1;
}

.card-360 .-content {
	background: linear-gradient(360deg, #000000 0%, rgba(0, 0, 0, 0.637646) 19.82%, rgba(0, 0, 0, 0.226001) 42.5%, rgba(0, 0, 0, 0) 77.63%);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 18px;
}

.card-360 .-content .-price {
	font-size: 32px;
	line-height: 40px;
}

.card-360 .-content .-r {
	font-style: normal;
	font-weight: 400;
	font-size: 17px;
	line-height: 1;
	color: #fff;
	text-align: right;
}

.card-360 .-content .-l {
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	color: #fff;
}

.card-360 .-content .-cont-footer {
	display: grid;
	grid-template-columns: 2fr 1fr;
	width: 100%;
	align-items: end;
}

.card-360 .-content .-l>div {
	position: relative;
	padding-left: 24px;

}

.card-360 .-content .-l>div::before {
	content: " ";
	background-size: contain;
	position: absolute;
	width: 1rem;
	height: 100%;
	left: 0;
	background-repeat: no-repeat;
	background-position: center;
	bottom: 0;
}

.card-360 .-cont-footer .-location {
	margin-top: 0.5rem;
}

.card-360 .-cont-footer .-location:before {
	background-image: url('/wp-content/uploads/2023/05/Icon.png');
}

.card-360 .-cont-footer .-type:before {
	background-image: url('/wp-content/uploads/2023/05/Icon-1.png');
}

.card-360.-card-360-max .-inner {
	padding: 0;
	padding-top: 1rem;
}

#contact-form .wpcf7-form .wpcf7-form-control-wrap .wpcf7-form-control:where(.wpcf7-text, .wpcf7-select, .wpcf7-textarea, .wpcf7-number){
	font-size: 22px;
}

.entry-content ol, .entry-content ul{
	display: block;
	list-style-type: decimal;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 40px;
}
.entry-content ul{
	list-style-type: disc;
}
.entry-content li {
	display: list-item;
	text-align: -webkit-match-parent;
	list-style-type: inherit;
}

.grecaptcha-badge {
	display: none !important;
}
.home-slider-slide[data-click="0"] {
	cursor: default;
}

iframe#__JSBridgeIframe_1\.0__, iframe#__JSBridgeIframe_SetResult_1\.0__, iframe#__JSBridgeIframe__, iframe#__JSBridgeIframe_SetResult__ {
	display: none !important;
}

h5.-num-next {
	text-wrap: nowrap;
	display: block;
	white-space: nowrap;
}

#loadscreen{
	display: none !important;
}

.left-header-buffer {
	display: none;
}

.quick-filter-toggle-4.home-toggle-price {
	top: 0;
}

.filter-price-blackdrop-1 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	z-index: 1000;
	cursor: default;
}
#filter_3[data-open="-1"] .filter-price-blackdrop-1{
	display: none;
}

/*-- Mobile Version --*/
@media (max-width: 1440px) {
	.site-nav-d li a {
		padding: 19px 15px;
	}
}
.compare-icon a{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.compare-icon .badge{
	color: #fff;
	background-color: #1D9F9B;
	border-radius: 1rem;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px;
	width: 1rem;
	height: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -0.25rem;
	right: -0.25em;
	opacity: 1;
/*	transition: all .3s;*/
}
.compare-icon .badge[data-count="0"]{
	opacity: 0;
}

.home-project-card[data-compare-selected="0"] .-s1,
.home-project-card[data-compare-selected="1"] .-s0 {
	display: none;
}

.home-project-card .-pj-cp[data-show]{
	will-change: transform, opacity;
}
.home-project-card .-pj-cp[data-show="1"]{
	opacity: 1;
	transform: translateY(0px);
	
	transition: transform .5s calc(var(--x) * .2s),opacity .5s calc(var(--x) * .2s);
}
.home-project-card .-pj-cp[data-show="0"]{
	opacity: 0;
	transform: translateY(100px);
}

.entry-content figure {
	height: auto !important;
}

/* #concept .-d-images-item-pic img {
	aspect-ratio: 758 / 543;
} */