/**contact**/

/********* TITLE **************/
.clssTitlebar_1{font-size:24px; padding-bottom:80px;}
@media (min-width: 320px) {
	.clssTitlebar_1{font-size:32px; padding-bottom:0px; padding-top:40px;}
}
@media (min-width: 768px) {
	.clssTitlebar_1{font-size:38px; padding-bottom:0px; padding-top:80px;}
}
@media (min-width: 1280px) {
	.clssTitlebar_1{font-size:42px; padding-bottom:0px; padding-top:80px;}
}
@media (min-width: 1366px) {
	.clssTitlebar_1{font-size:42px; padding-bottom:00px; padding-top:80px;}
}
/********* TITLE **************/
/********* ADDRESS **************/
.officeName{font-size:17px; padding-bottom:20px;}
.officeAdd{font-size:17px;  padding:0px 0px 10px 0px;}
.contPanel{
	margin-top:80px;  
	height: 615px;
  	-webkit-backdrop-filter: blur(30px);
  	backdrop-filter: blur(30px);
  	box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.16);
  	background-color: #ffffff;
}
@media (min-width: 320px) {
	.officeName{font-size:17px; padding-bottom:0px; font-weight:600;}
	.officeAdd{font-size:16px;  padding:20px 0px 0px 0px;}
	.contPanel{
		margin-top:0px;  
		height: 690px;
		-webkit-backdrop-filter: blur(30px);
		backdrop-filter: blur(30px);
		box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.16);
		background-color: #ffffff;
	}
}
@media (min-width: 768px) {
	.officeName{font-size:17px; padding-bottom:20px; font-weight:600;}
	.officeAdd{font-size:16px;  padding:20px 0px 0px 0px;}
	.contPanel{
		margin-top:60px;  
		height: 630px;
		-webkit-backdrop-filter: blur(30px);
		backdrop-filter: blur(30px);
		box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.16);
		background-color: #ffffff;
	}
}
@media (min-width: 1024px) {
	.officeName{font-size:22px; padding-bottom:20px;}
	.officeAdd{font-size:16px;  padding:20px 0px 0px 0px;}
	.contPanel{
		margin-top:60px;  
		height: 590px;
		-webkit-backdrop-filter: blur(30px);
		backdrop-filter: blur(30px);
		box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.16);
		background-color: #ffffff;
	}
}
@media (min-width: 1366px) {
	.officeName{font-size:26px; padding-bottom:20px;}
	.officeAdd{font-size:16px;  padding:20px 0px 0px 0px;}
	.contPanel{
		margin-top:60px;  
		height: 610px;
		-webkit-backdrop-filter: blur(30px);
		backdrop-filter: blur(30px);
		box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.16);
		background-color: #ffffff;
	}
}
@media (min-width: 1440px) {
	.officeName{font-size:28px; padding-bottom:20px;}
	.officeAdd{font-size:16px;  padding:20px 0px 0px 0px;}
}
@media (min-width: 1680px) {
	.officeName{font-size:32px; padding-bottom:20px;}
	.officeAdd{font-size:17px;  padding:20px 0px 0px 0px;}
}
@media (min-width: 1920px) {
	.officeAdd{font-size:18px;  padding:0px 0px 20px 0px;}
	.officeAdd{font-size:16px;  padding:20px 0px 0px 0px;}
}
/********* ADDRESS **************/





.group {
	font-family: 'Roboto','Kanit', sans-serif;
  position: relative;
	margin: 15px 0;
}

textarea {
  resize: none;
}

input,
textarea {
  background: none;
  color: #666;
  font-size: 18px;
  padding: 10px 10px 0px 5px;
  display: block;
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid #c6c6c6;
}
input:focus,
textarea:focus {
  outline: none;
   border-bottom:2px #f6921e solid;
}
input:focus ~ label, input:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label {
  top: -10px;
  font-size: 12px;
  color: #000000;
  font-weight:400;
  opacity:0.7;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
  width: 100%;
}

input[type="password"] {
  letter-spacing: 0.3em;
}

label {
  color: #c6c6c6;
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
}
.clssPanelContatc{ background-color:#F9D83F; padding-bottom:182px;}
@media screen and (min-width: 320px) {
	.clssPanelContatc{ background-color:#F9D83F; padding-bottom:70px;}
}
@media screen and (min-width: 768px) {
	.clssPanelContatc{ background-color:#F9D83F; padding-bottom:120px;}
}
@media screen and (min-width: 1024px) {
	.clssPanelContatc{ background-color:#F9D83F; padding-bottom:125px;}
}
@media screen and (min-width: 1280px) {
	.clssPanelContatc{ background-color:#F9D83F; padding-bottom:182px;}
}





.btnContSubmit{
	background-color:#f6921e; 
	border-radius:0px; 
	cursor:pointer; 
	padding:5px 15px 5px 15px; 
	display:inline-block !important; 
	width:120px; 
	font-size:14px; 
	color:#FFF; 
	font-weight:500;
	border:2px #f6921e solid;
}
.btnContSubmit:hover{
	background-color:#000000; 
	border-radius:0px; 
	cursor:pointer; 
	padding:5px 15px 5px 15px; 
	display:inline-block !important; 
	width:120px; 
	font-size:14px; 
	color:#ffffff; 
	font-weight:500;
	border:2px #000000 solid;
}
.btnContCancel{
	background-color:#FFFFFF; 
	color:#000000;
	border-radius:0px; 
	cursor:pointer; 
	padding:5px 15px 5px 15px; 
	display:inline-block !important; 
	width:110px; 
	margin-left:10px; 
	font-size:14px;
	border:2px #f6921e solid;
}
.btnContCancel:hover{
	background-color:#FFFFFF; 
	color:#000000;
	border-radius:0px; 
	cursor:pointer; 
	padding:5px 15px 5px 15px; 
	display:inline-block !important; 
	width:110px; 
	margin-left:10px; 
	font-size:14px;
	border:2px #000000 solid;
}
@media screen and (min-width: 768px) {
	.btnContSubmit{
	background-color:#f6921e; 
	border-radius:0px; 
	cursor:pointer; 
	padding:5px 15px 5px 15px; 
	display:inline-block !important; 
	width:100px; 
	font-size:14px; 
	color:#FFF; 
	font-weight:500;
	border:2px #f6921e solid;
}
.btnContSubmit:hover{
	background-color:#000000; 
	border-radius:0px; 
	cursor:pointer; 
	padding:5px 15px 5px 15px; 
	display:inline-block !important; 
	width:100px; 
	font-size:14px; 
	color:#ffffff; 
	font-weight:500;
	border:2px #000000 solid;
}
.btnContCancel{
	background-color:#FFFFFF; 
	color:#000000;
	border-radius:0px; 
	cursor:pointer; 
	padding:5px 15px 5px 15px; 
	display:inline-block !important; 
	width:100px; 
	margin-left:10px; 
	font-size:14px;
	border:2px #f6921e solid;
}
.btnContCancel:hover{
	background-color:#000000; 
	color:#ffffff;
	border-radius:0px; 
	cursor:pointer; 
	padding:5px 15px 5px 15px; 
	display:inline-block !important; 
	width:100px; 
	margin-left:10px; 
	font-size:14px;
	border:2px #000000 solid;
}
}
@media screen and (min-width: 1024px) {
	.btnContSubmit{
	background-color:#f6921e; 
	border-radius:0px; 
	cursor:pointer; 
	padding:5px 15px 5px 15px; 
	display:inline-block !important; 
	width:120px; 
	font-size:14px; 
	color:#FFF; 
	font-weight:500;
	border:2px #f6921e solid;
}
.btnContSubmit:hover{
	background-color:#000000; 
	border-radius:0px; 
	cursor:pointer; 
	padding:5px 15px 5px 15px; 
	display:inline-block !important; 
	width:120px; 
	font-size:14px; 
	color:#ffffff; 
	font-weight:500;
	border:2px #000000 solid;
}
.btnContCancel{
	background-color:#FFFFFF; 
	color:#000000;
	border-radius:0px; 
	cursor:pointer; 
	padding:5px 15px 5px 15px; 
	display:inline-block !important; 
	width:120px; 
	margin-left:10px; 
	font-size:14px;
	border:2px #f6921e solid;
}
.btnContCancel:hover{
	background-color:#FFFFFF; 
	color:#000000;
	border-radius:0px; 
	cursor:pointer; 
	padding:5px 15px 5px 15px; 
	display:inline-block !important; 
	width:120px; 
	margin-left:10px; 
	font-size:14px;
	border:2px #000000 solid;
}
}


.conDetailIcon{color:#000; font-size:45px;}
@media screen and (min-width: 320px) {
	.conDetailIcon{color:#000; font-size:25px;}
}
@media screen and (min-width: 768px) {
	.conDetailIcon{color:#000; font-size:35px;}
}
@media screen and (min-width: 1024px) {
	.conDetailIcon{color:#000; font-size:30px;}
}
@media screen and (min-width: 1280px) {
	.conDetailIcon{color:#000; font-size:30px;}
}
.FontTitlePage{
	padding-bottom:0px; 
	padding-top:80px; 
	text-align:center; 
	font-size:56px; 
	color:#000; 
	font-weight:600; 
	text-shadow:0 3px 6px rgba(0, 0, 0, 0.16); 
}
@media screen and (min-width: 320px) {
	.FontTitlePage{
		padding-bottom: 50px;
    	padding-top: 50px;
    	text-align: center;
   		font-size: 34px;
    	color: #000;
    	font-weight: 700;
    	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	}
}
@media screen and (min-width: 360px) {
	.FontTitlePage{
		padding-bottom: 50px;
		padding-top: 50px;
		text-align: center;
		font-size: 34px;
		color: #000;
		font-weight: 700;
		text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	}
}
@media screen and (min-width: 768px) {
	.FontTitlePage{
		padding-bottom: 50px;
		padding-top: 50px;
		text-align: center;
		font-size: 44px;
		color: #000;
		font-weight: 700;
		text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	}
}
@media screen and (min-width: 1360px) {
		.FontTitlePage{
		padding-bottom: 80px;
		padding-top: 80px;
		text-align: center;
		font-size: 54px;
		color: #000;
		font-weight: 700;
		text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	}
}
.fontSubtitle{
	padding-top:40px; 
	padding-bottom:13px; 
	padding-left:50px; 
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
  	font-size: 32px;
  	font-weight: bold;
  	font-style: normal;
  	font-stretch: normal;
  	line-height: 1.22;
  	letter-spacing: normal;
  	text-align: left;
  	color: #000000;
}
@media screen and (min-width: 320px) {
	.fontSubtitle{
		padding-top:30px; 
		padding-bottom:13px; 
		padding-left:20px; 
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
		font-size: 18px;
		font-weight: 300;
		font-style: normal;
		font-stretch: normal;
		line-height: 1.22;
		letter-spacing: normal;
		text-align: left;
		color: #000000;
	}
}
@media screen and (min-width: 760px) {
	.fontSubtitle{
		padding-top:30px; 
		padding-bottom:13px; 
		padding-left:20px; 
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
		font-size: 18px;
		font-weight: 300;
		font-style: normal;
		font-stretch: normal;
		line-height: 1.22;
		letter-spacing: normal;
		text-align: left;
		color: #000000;
	}
}
@media screen and (min-width: 1024px) {
	.fontSubtitle{
		padding-top:30px; 
		padding-bottom:13px; 
		padding-left:20px; 
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
		font-size: 19px;
		font-weight: 300;
		font-style: normal;
		font-stretch: normal;
		line-height: 1.22;
		letter-spacing: normal;
		text-align: left;
		color: #000000;
	}
}
@media screen and (min-width: 1366px) {
	.fontSubtitle{
		padding-top:30px; 
		padding-bottom:13px; 
		padding-left:20px; 
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
		font-size: 22px;
		font-weight: 300;
		font-style: normal;
		font-stretch: normal;
		line-height: 1.22;
		letter-spacing: normal;
		text-align: left;
		color: #000000;
	}
}
.FontDetailContactTitle{font-size:17px;}
.FontDetailContact{font-size:17px;}
.FontDetailContactMail{font-size:17px;}
@media screen and (min-width: 320px) {
	.FontDetailContactTitle{font-size:14px; font-weight:500;}
	.FontDetailContact{font-size:14px;}
	.FontDetailContactMail{font-size:14px;}
}
@media screen and (min-width: 350px) {
	.FontDetailContactTitle{font-size:14px; font-weight:500;}
	.FontDetailContact{font-size:14px;}
	.FontDetailContactMail{font-size:14px;}
}
@media screen and (min-width: 760px) {
	.FontDetailContactTitle{font-size:14px; font-weight:500;}
	.FontDetailContact{font-size:14px;}
	.FontDetailContactMail{font-size:14px;}
}
@media screen and (min-width: 1024px) {
	.FontDetailContactTitle{font-size:17px; font-weight:500;}
	.FontDetailContact{font-size:15px;}
	.FontDetailContactMail{font-size:15px;}
}
@media screen and (min-width: 1920px) {
	.FontDetailContactTitle{font-size:19px; font-weight:500;}
	.FontDetailContact{font-size:17px;}
	.FontDetailContactMail{font-size:17px;}
}
/* CONATCT PAGE  */