@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200&display=swap');

html, body
{
	padding: 0;
	margin: 0;
}
body {
			font-family: 'Kanit', sans-serif;
			font-size: 18px;
			line-height: 30px;
	background-color: #f2f2f2;
	 }
.subject{color:#000000; font-size: 20px; font-weight: bold;}
.header,
.footer
{
	text-align: center;
}
.header{
	
	background: #1f1e48;
	font-size: 18px;
	font-weight: bold;
	color: #fff;

	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%;
	
	padding-bottom: 8px;
	padding-top: 8px;
	z-index:10;

}
.headerbanner{
	
	background: #262553;
	width: 100%;
	text-align: center;

}
.headerbanner2{
	
	background: #017ca5;
	width: 100%;
	text-align: center;

}
.pichead{text-align: center;
width: 100%; max-width: 960px}

.content
{
	width:940px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	background: #ffffff;
	margin-bottom: 10px;
	padding: 10px;
}
.content2
{
	width:650px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	
	
}
.boxdaaress{width: 50%;}
.boxbutoon{width: 313px; text-align: center; float: left; margin-top: 10px;}
.boxbutoon2{width: 50%; text-align: center; float: left; margin-top: 10px;}

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
	font-size: 16px;
}
input[type=number] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
	font-size: 16px;
}

input[type=submit] {
  width: 80%;
  background-color: #002060;
  color: #ffffff;;
  padding: 20px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
 font-size: 16px;
}
input[type=button] {
  width: 80%;
  background-color: #002060;
  color: #ffffff;;
  padding: 20px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
 font-size: 16px;
}

input[type=submit]:hover {
  background-color: #002060;
	font-size: 16px;
}

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
	font-size: 16px;
    resize: none;
}
label{font-size: 18px;
			line-height: 30px; color: #002060;}

@media screen and (max-width: 1024px) {
.content
{
	width:850px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	
}
	.content2
{
	width:650px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	
}
	.boxbutoon{width: 283px; text-align: center; float: left;margin-top: 10px;}
.boxbutoon2{width: 50%; text-align: center; float: left; margin-top: 10px;}
}
@media screen and (max-width: 768px) {
	
	.content { 
		
		width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	}
	.content2 { 
		
		width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-top:18px;
	}
	.boxbutoon{width: 100%; text-align: center; float: none;margin-top: 10px;}
	.boxbutoon2{width: 100%; text-align: center; float: none;margin-top: 10px;}
}