@import url("https://use.typekit.net/ncj4okp.css");
@charset "UTF-8";
/* CSS Document */

body{
	background-color:rgba(47,69,41,1.00);
	/*background-color:rgba(242,68,5,1.00);*/
	
}

.body-bgImage{
	background-image: url("../img/hen.svg"),url("../img/bgRightArr.svg"),url("../img/bgLeftArr.svg");
	background-position:top left, right -1%, 0% 99%;
	background-size: 65%, 50%, 50%;
	background-repeat: no-repeat,no-repeat,no-repeat;
	
}
@media (min-width: 768px) and (max-width: 991px){
	.body-bgImage{
		background-image: url("../img/hen.svg"),url("../img/bgRightArr.svg"),url("../img/bgLeftArr.svg");
		background-position:0% -15px, right -1%, 0% 99%;
		background-size: 100%, 50%, 50%;
		background-repeat: no-repeat,no-repeat,no-repeat;
		
	}	
}
@media (min-width: 992px) and (max-width: 1919px){
	.body-bgImage{
		background-image: url("../img/hen.svg"),url("../img/bgRightArr.svg"),url("../img/bgLeftArr.svg");
		background-position:0% -25px, right -15%, 0% 99%;
		background-size: 90%, 50%, 50%;
		background-repeat: no-repeat,no-repeat,no-repeat;
		
	}	
}
@media (min-width: 1920px){
	.body-bgImage{
		background-image: url("../img/hen.svg"),url("../img/bgRightArr.svg"),url("../img/bgLeftArr.svg");
		background-position:0% -25px, right -15%, 0% 99%;
		background-size: 90%, 50%, 50%;
		background-repeat: no-repeat,no-repeat,no-repeat;
		
	}
}
/*
@media (min-width: 768px) and (max-width: 1399px){
	.popUpConner{
		background-image: url('../img/popUpConner.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		margin-top:-3.5%;
		margin-left:18%;
		aspect-ratio :1/1;
	}
}
@media (min-width: 1400px) {
	.popUpConner{
		background-image: url('../img/popUpConner.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		margin-top:-4%;
		margin-left:17%;
		aspect-ratio :1/1;
	}
}
*/
@media (max-width: 767px){
	.popUpConner1{
		background-image: url('../img/popUpConner1.svg');
		background-repeat: no-repeat;
		background-position: top right;
		background-size: 60%;
		aspect-ratio :1.5/1;
		position:absolute;
		top:-2%;
		left:3%;
		
	}
}
@media (min-width: 768px){
	.popUpConner1{
		background-image: url('../img/popUpConner1.svg');
		background-repeat: no-repeat;
		background-position: top right;
		background-size: 60%;
		aspect-ratio :1.5/1;
		position:absolute;
		top:0px;
		left:5%;
	}
}
@media (min-width: 768px){
	.popUpConner{
		background-image: url('../img/popUpConner.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		aspect-ratio :1/1;
		margin-top:5%;
		margin-left:-5%;
	}
}
.popUpWord{
	font-family: "blenny-thai", sans-serif;
	font-weight: 900;
	font-style: normal;
	
	font-size: 6rem;
	margin-top:-20px;
	-webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px;
	
}
@media (max-width: 574px){
	.popUpWord{
		font-family: "blenny-thai", sans-serif;
		font-weight: 900;
		font-style: normal;
		font-size: 2.5rem;
		margin-top:-10px;
		-webkit-text-fill-color: transparent;
		-webkit-text-stroke: 1px;
		margin-left:-150px;
	}
	
}
@media (min-width: 575px) and (max-width: 767px){
	.popUpWord{
		font-family: "blenny-thai", sans-serif;
		font-weight: 900;
		font-style: normal;
		font-size: 3.5rem;
		margin-top:-13px;
		-webkit-text-fill-color: transparent;
		-webkit-text-stroke: 1px;
		margin-left:-200px;
	}
}

@media (min-width: 768px) and (max-width: 1399px){
	.popUpWord{
		font-family: "blenny-thai", sans-serif;
		font-weight: 900;
		font-style: normal;
		font-size: 4rem;
		margin-top:-13px;
		-webkit-text-fill-color: transparent;
		-webkit-text-stroke: 1px;
		
	}
}


.pageTitle{
	font-family: "blenny-thai", sans-serif;
	font-weight: 900;
	font-style: normal;
	color:#FFC300;
	font-size: 4rem;
}
@media (min-width: 992px) and (max-width: 1199px){
	.pageTitle{
		font-family: "blenny-thai", sans-serif;
		font-weight: 900;
		font-style: normal;
		color:#FFC300;
		font-size: 5rem;
	}
}
@media (min-width: 1200px) and (max-width: 1919px){
	.pageTitle{
		font-family: "blenny-thai", sans-serif;
		font-weight: 900;
		font-style: normal;
		color:#FFC300;
		font-size: 6rem;
	}
}
@media (min-width: 1920px){
	.pageTitle{
		font-family: "blenny-thai", sans-serif;
		font-weight: 900;
		font-style: normal;
		color:#FFC300;
		font-size: 7rem;
	}
}
.pageSubTitle{
	font-family: "greycliff-thai-cf", sans-serif;
	font-weight: 900;
	font-style: normal;
	color:#FFC300;
	font-size: 1.3rem;
}
@media (min-width: 992px) and (max-width: 1199px){
	.pageSubTitle{
		font-family: "greycliff-thai-cf", sans-serif;
		font-weight: 900;
		font-style: normal;
		color:#FFC300;
		font-size: 1.8rem;
	}
	
}
@media (min-width: 1200px){
	.pageSubTitle{
		font-family: "greycliff-thai-cf", sans-serif;
		font-weight: 900;
		font-style: normal;
		color:#FFC300;
		font-size: 2.3rem;
	}
	
}
p{
	font-family: "greycliff-thai-cf", sans-serif;
	font-weight: 900;
	font-style: normal;
	color:#FFF;
	font-size: 0.9rem;
}
@media (min-width: 1200px) and (max-width: 1399px){
	p{
		font-size: 1.1rem;
	}
	
}
@media (min-width: 1400px){
	p{
		font-size: 1.3rem;
		line-height: 2rem;
	}
	
}

.recMenu{
	aspect-ratio : 1 / 1;
	background-size: cover;
	background-position:center;
	background-repeat: no-repeat;
	border-radius: 40px;
	max-width: 500px;
}
@media (min-width: 768px) and (max-width: 1920px){
	.recMenu{
		aspect-ratio : 1 / 1;
		background-size: cover;
		background-position:center;
		background-repeat: no-repeat;
		border-radius: 20px;
		max-width: 500px;
	}
}
.btnText{
	font-family: "greycliff-thai-cf", sans-serif;
	font-weight: 900;
	font-style: normal;
	color:rgba(0,27,113,1.00);
	font-size: 1rem;
	
}
.footer{
	font-family: "greycliff-thai-cf", sans-serif;
	font-weight: 900;
	font-style: normal;
	color:#FFF;
	font-size: 0.9rem;	
}
@media (min-width: 1200px) and (max-width: 1920px){
	.footer{
		font-family: "greycliff-thai-cf", sans-serif;
		font-weight: 900;
		font-style: normal;
		color:#FFF;
		font-size: 1.1rem;	
	}
}
.footer .icon{
	max-width: 35px;
}
@media (min-width: 1200px) and (max-width: 1919px){
	.footer .icon{
		max-width: 45px;
	}
}
@media (min-width: 1920px){
	.footer .icon{
		max-width: 55px;
	}
}

.footerSubtitle{
	font-family: "greycliff-thai-cf", sans-serif;
	font-weight: 900;
	font-style: normal;
	color:#FFC300;
	font-size: 2rem;
}
/*Home*/
home .container-fluid{
	color:white;
	/*font-family: 'Freight-Micro-Pro-light-ltalic';*/
	font-size:1.2rem;
	line-height: 1.5rem;
	/*padding-top: 110px;*/
}
home .banner{
    aspect-ratio : 1 / 0.6; 
    background-image: url("../img/banner/homeBanner-sm.jpg");
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
}
@media (min-width: 768px) and (max-width: 1920px){
	home .banner{
		aspect-ratio : 2.5 / 1; 
		background-image: url("../img/banner/homeBanner.jpg");
		/*background-blend-mode:soft-light;*/
		background-size: cover;
		background-position:center;
		background-repeat: no-repeat;
	}
}
@media (min-width: 1920px){
	home .banner{
		/*aspect-ratio : 3 / 1; */
		background-image: url("../img/banner/homeBanner.jpg");
		/*background-blend-mode:soft-light;*/
		background-size: cover;
		background-position:center;
		background-repeat: no-repeat;
		height: 800px;

	}
}


home .logo{
	aspect-ratio : 1 / 1.1; 
	background-image: url("../img/logo.svg");
	background-size: cover;
	background-position:center;
	background-repeat: no-repeat;
	position: absolute;
	max-width:100px;
}
@media (min-width: 992px) and (max-width: 1199px){
	home .logo{
		aspect-ratio : 1 / 1.1; 
		background-image: url("../img/logo.svg");
		background-size: cover;
		background-position:center;
		background-repeat: no-repeat;
		position: absolute;
		max-width:130px;
	}
}
@media (min-width: 1200px) and (max-width: 1919px){
	home .logo{
		aspect-ratio : 1 / 1.1; 
		background-image: url("../img/logo.svg");
		background-size: cover;
		background-position:center;
		background-repeat: no-repeat;
		position: absolute;
		max-width:150px;
	}
}
@media (min-width: 1920px){
	home .logo{
		aspect-ratio : 1 / 1.1; 
		background-image: url("../img/logo.svg");
		background-size: cover;
		background-position:center;
		background-repeat: no-repeat;
		position: absolute;
		max-width:200px;
		
	}
	
}

home .content-wrapper{
	background-image: url("../img/horBlue.svg");
	background-size:25px;
	background-repeat: repeat-y;
	background-position: 98%;
	max-width: 1920px;
}
@media (min-width: 1200px) and (max-width: 1399px){
	home .content-wrapper{
		background-image: url("../img/horBlue.svg");
		background-size:35px;
		background-repeat: repeat-y;
		background-position: 98%;
	}
}
@media (min-width: 1400px){
	home .content-wrapper{
		background-image: url("../img/horBlue.svg");
		background-size:45px;
		background-repeat: repeat-y;
		background-position: 98%;
	}
}