:root{
	--primary-color: #54a7dc;
	--secondary-color: #5ac46b;

	--bg-color: #f6f4f0;
	--red: #bc4d42;
	--dark: #231f20;
	
	--gradient: linear-gradient(60deg, rgba(21,40,81,1) 0%, rgba(14,60,157,1) 72%, rgba(21,40,81,1) 100%);
}
.text-grey{ color: #9a9a9a; }
.text-color{ color: #2e98e4 !important;}
.flickity-button:hover{ background-color: var(--primary-color); }
body,
p,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
#mainMenu nav > ul > li > a,
#footer,
button.btn, .btn:not(.close):not(.mfp-close), a.btn:not([href]):not([tabindex]){
	font-family: "Lato", "Noto Sans Thai", serif;
	letter-spacing: 0;
	line-height: 1.5;
}
body, p{ font-size: 16px; color: #3e3e3e;}
.w100, .w-100{ width:100%; }
.italic{ font-style:italic; }
button.btn, .btn:not(.close):not(.mfp-close), a.btn:not([href]):not([tabindex]){
	font-size: 16px;
	padding: 0 20px;
	line-height: 40px;
	border-color: #0167cd;
	background: #0167cd;
	color: #fff;
}
button.btn.btn-primary, .btn:not(.close):not(.mfp-close).btn-primary, a.btn:not([href]):not([tabindex]).btn-primary{
	background-color: #0167cd;
	border-color: #0167cd;
}
button.btn.btn-primary:hover, button.btn.btn-primary:focus, button.btn.btn-primary:not(:disabled):not(.disabled):active, button.btn.btn-primary:not(:disabled):not(.disabled).active, .btn:not(.close):not(.mfp-close).btn-primary:hover, .btn:not(.close):not(.mfp-close).btn-primary:focus, .btn:not(.close):not(.mfp-close).btn-primary:not(:disabled):not(.disabled):active, .btn:not(.close):not(.mfp-close).btn-primary:not(:disabled):not(.disabled).active, a.btn:not([href]):not([tabindex]).btn-primary:hover, a.btn:not([href]):not([tabindex]).btn-primary:focus, a.btn:not([href]):not([tabindex]).btn-primary:not(:disabled):not(.disabled):active, a.btn:not([href]):not([tabindex]).btn-primary:not(:disabled):not(.disabled).active{
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
	color: #fff;
}
a:not(.btn):not(.badge):hover, a:not(.btn):not(.badge):focus, a:not(.btn):not(.badge):active{
	color: #0333e8;
}
.headbar .htitle{ font-size:3em; color: var(--secondary-color);}
.headbar .stitle{  font-size: 1.2em; color: var(--secondary-color);}


#scrollTop{ bottom:60px !important; }
#scrollTop:after, #scrollTop:before{ background:var(--secondary-color); }


@media(max-width:1024px){
	button.btn:not(.btn-creative):not(.btn-slide), .btn:not(.close):not(.mfp-close):not(.btn-creative):not(.btn-slide), a.btn:not([href]):not([tabindex]):not(.btn-creative):not(.btn-slide){
		font-size: 16px;
		height: auto;
		line-height: 40px;
		padding: 0 14px;
	}
}
@media(max-width:991px){
	.headbar .htitle{ font-size:2em; }
}
@media(max-width:768px){
	.headbar .htitle{ font-size: 2em; }
	.headbar .stitle{ font-size:1.2em; }
}
@media(max-width:480px){
	.headbar.m-b-40{ margin-bottom:20px !important; }
}