@font-face {
	font-family: kanit;
	src: url(../font/kanit-Medium.ttf);
}

@font-face {
	font-family: kanit;
	src: url(../font/kanit-Bold.ttf);
	font-weight: bold;
}
table {
	width: 100%;
	border: 2px solid #187B9A;
	border-collapse: collapse;
}
tr{
	font: inherit;
	background: #ffffff;
	border: 2px solid #187B9A;
	font-size: 0.8em;
}
tr:nth-of-type(odd) { 
	background: #e6f1ff; 
	border: 2px solid #187B9A;
	font-size: 0.8em;
}
th { 
	font: inherit;
	font-size: 0.8rem;
	background: #187B9A; 
	color: white;
	text-align: center;
	border: 2px solid #187B9A;
	font-size: 1rem;
}

td{
	font: inherit;
	text-align: center;
	padding: 1.5% 0.5% 0.75% 0.5%; 
	border: 1px solid #187B9A; 
	font-size: 1rem;

}
.btn_active{
	width: 80%;
	background-color: #3b3b3b;
	border-radius: 0.5rem;
	margin: 0 auto;
}
.t_color_r{color: #c20605; display: inline-block;}
.t_color_rn{color: #a1a1a1; display: inline-block;}
.t_color_y{color: #dcb809; display: inline-block;}
.t_color_g{color: #00b900; display: inline-block;}
.t_color_gn{color: #a1a1a1; display: inline-block;}
.t_color_print{color: #187b9a; }
.t_color1_print{color: #FFFFFF; }


.fontawesome{
	color: #187B9A;
	display: inline-block;
	font-size: 3.5rem;
	padding: 1rem;
	margin-left: 18%;
}
.fontawesome1{
	color: #187B9A;
	display: inline-block;
	font-size: 1.5rem;
	padding: 0.5;
	margin-left: 20%;
	background-color: #d9f0f7;
	border: 0px solid black;
}
.t-input{
	background-color: #d9f0f7;
	font-size: 1.8rem;
	padding: 0.5;
	border: 0px solid black;
	color: #187B9A;
}
.container{
	display: inline-block;
}
.container1{
	width:100%;
}
.pp{
	font-size: 0.75rem;
	margin-left: 4%;
}
.pp0{
	font-size: 0.75rem;
	margin-left: 4%;
	margin-top: -3%;
}
.pp1{
	font-size: 0.55rem;
	margin-top: -50%;
	display: inline-block;
}
.ppp{
	font-size: 0.75rem;
	margin-left: 4%;
	display: inline-block;
}
.pppint{

	font-size: 0.75rem;
	float: right;
	text-align: right;
	margin-top: 15%;
	margin-right: 5%;
	clear: both;
}
.ppess{
	font-size: 0.75rem;
	color: #4289C1;
}
.imgQR{
	margin-left: 7%;
	margin-top: -3%;
}

body {
	font-family: kanit;
	background-color: #F3F5F7;
}
a {
	color: #FFFFFF;
	
	text-decoration: none;
}
.rotation{
	transform: rotate(45deg);
	display: inline-block;
}
.taga {
	background-color: #2CA8A8;
	color: #FFFFFF;
	font-weight: bold;
	opacity:98%;
	text-decoration: none;
	padding: 0 0.2rem 0 0.2rem;
}
.taga2 {
	font-weight: bold;
	opacity:98%;
	text-decoration: none;
	padding: 0 0.2rem 0 0.2rem;
}
.align {
	display: grid;
	place-items: center;
}
.alignsv {
	display: grid;
	place-items: center;
	background-image: url("../img/BGsv.png");
	background-size: cover;
}
.alignsvp {
	display: grid;
	place-items: center;
	background-color: #FFFFFF;
	background-size: cover;
}
.grid{
	margin-top: 5%;
	inline-size: 100%;
	margin-inline: center;
	max-inline-size:35rem;
}
.grid1{
	margin-top: 5%;
	inline-size: 100%;
	margin-inline: center;
	max-inline-size:50rem;
}
.grid2{
	inline-size: 100%;
	margin-inline: center;
	max-inline-size:75rem;
}
.grid3{
	inline-size: 100%;
	margin-inline: center;
	max-inline-size:50rem;
}
.grid4{
	inline-size: 100%;
	margin-inline: center;
	max-inline-size:120rem;
}
.grid5{
	inline-size: 100%;
	margin-inline: center;
	max-inline-size:50rem;
	margin-top:-5%;
}
.headder {
	position: absolute;
	right: 0;
	top: 0;
	left: 0;
	padding: 1rem;
	color: #FFFFFF;
	background-color: #2CA8A8;
	z-index: 10;
}
.headderprint {
	right: 0;
	top: 0;
	left: 0;
	width: 100%;
	padding: 1rem;
	z-index: 10;
}
.footer {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	color: #FFFFFF;
	background-color: #2CA8A8;
	text-align: center;
	width: 100%;
}
.center1{
	width: 85%;
	margin: 0 auto 0 auto;
	text-align: center;
}
.center_logo{
	width: 9%;
	margin: 0 auto 0 auto;
}
.center_logo2{
	padding-top: 10%;
	width: 100%;
	text-align: center;
	margin: 0 auto 0 auto;
	color: #1F474F;
}
.center_logo3{
	padding-top: 3%;
	width: 100%;
	text-align: center;
	margin: 0 auto 0 auto;
}
.center_logoprint{
	width: 100%;
	text-align: center;
	margin: 0 auto 0 auto;
}
.Htext{
	width: 50%;
	background-color: #2CA8A8;
	display: inline-block;
}
.Htext3{
	width: 14%;
	background-color: #2CA8A8;
	display: inline-block;
	margin-bottom: -2%;
	margin-left : -1%
}
.Htext4{
	background-color: #2CA8A8;
	display: inline-block;
	margin-bottom: -2%;
	float: right;

}
.Htext1{
	width: 15%;
	background-color: #2CA8A8;
	display: inline-block;
	margin-bottom: -2%;
	margin-left : -13%
}
.Htext2{
	width: 15%;
	background-color: #2CA8A8;
	display: inline-block;
	margin-bottom: -2%;
	float: right;
	margin-right : 6%
}
.Stext{
	width: 100%;
	color: #FFFFFF;
	background-color: #187B9A;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	clear: both;
}
.bookcen{
	width: 22%;
	font-size: 0.6rem;
	margin: 10% 0 0 0;
	padding-left: 3%;
	float: left;
	background-color: #FFFFFF;
}
.book0{
	width: 50%;
	font-size: 1.5rem;
	margin: 3% 0 0 5%;
	float: left;
	background-color: #FFFFFF;
}
.book00{
	width: 50%;
	font-size: 1.5rem;
	margin: 0 0 0 5%;
	float: left;
	background-color: #FFFFFF;

}
.book1{
	font-size: 1rem;
	margin: -12% 0 0 5%;
}
.book2{
	font-size: 1.3rem;
	margin: 5% 0 0 5%;
}
.QRimg{
	background-color: #FFFFFF;
	width: 20%;
	float: right;
	display: inline-block;
}
.QRimg1{
	background-color: #FFFFFF;
	width: 25%;
	float: right;
	margin-right: 5%;
	display: inline-block;
}
.box{

	margin-top: 30%;
	width: 100%;
}
.box1{
	margin-top: 12%;
	margin-bottom: 2.5%;
	width: 100%;
	background-color: #FFFFFF;
	border-radius: 0.5rem;
	box-shadow: 2px 2px #888888;
}
.box-show{
	margin-top: 10%;
	margin-bottom: 5%;
	width: 100%;
	background-color: #FFFFFF;
	border-radius: 0.5rem;
	box-shadow: 2px 2px #888888;
}
.box-show1{
	margin-top:0%;
	margin-bottom: 5%;
	width: 100%;
	background-color: #FFFFFF;
	border-radius: 0.5rem;
	box-shadow: 2px 2px #888888;
}
.box1:hover,
.box2:hover,
.box3:hover,
.box6:hover
{
	transition: 0.5s;
	box-shadow: 5px 5px #d6d6d6;
}
.box2{
	margin-bottom: 2.5%;
	width: 100%;
	background-color: #FFFFFF;
	border-radius: 0.5rem;
	box-shadow: 2px 2px #888888;
}
.box3{
	width: 60%;
	background-color: #c2e6f2;
	border-radius: 0.5rem;
	text-align:center;
	margin: 0 auto 3% auto;
}
.box4{
	width: 60%;
	background-color: #60BDBF;
	opacity: 80%;
	border-radius: 0.5rem;
	text-align:center;
	margin: 0 auto 3% auto;
}
.box5{
	width: 80%;
	background-color: #60BDBF;
	opacity: 80%;
	border-radius: 0.5rem;
	text-align:center;
	margin: 0 auto 3% auto;
}
.box6{
	width: 40%;
	background-color: #5fbdbf;
	border-radius: 0.3rem;
	text-align:center;
	margin: 0 auto 0 auto;
}
.search{
	width: 60%;
	padding: 1rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	border: 0px solid black;
	margin-right: 10px;
	text-align: center;
}
.search2{
	width: 60%;
	padding: 1rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	border: 0px solid black;
	margin: 2% auto 2% auto;
	text-align: center;
}
.sub_sv{
	width: 65%;
	padding: 1rem;
	border-radius: 0.5rem;
	background-color: #187B9A;
	color : #ffffff;
	border: 0px solid black;
	margin: 2% auto 2% auto;
	text-align: center;
}
.sub_sv:hover{
	transition: 0.5s;
	background-color: #1d8caf;
	box-shadow: 2px 2px #888888;
	cursor: pointer;
}
.submit{
	width: 25%;
	padding: 1rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #187B9A;
	color: #FFFFFF;
	border: 0px solid black;
}
.submit1{
	width: 25%;
	padding: 1rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #187B9A;
	color: #FFFFFF;
	border: 0px solid black;
	margin-bottom: 5%;
}
.submit2{
	width: 25%;
	padding: 1rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #187B9A;
	color: #FFFFFF;
	border: 0px solid black;
	margin-bottom: 5%;
	margin-left: 23%;
	margin-top: 5%;
	display: inline;
	margin-bottom: 5%;
}
.submit3{
	width: 20%;
	padding: 1rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #187B9A;
	color: #FFFFFF;
	border: 0px solid black;
	margin-bottom: 5%;
	margin-left: 35%;
	margin-top: 8%;
	display: inline;
	clear: both;
}
.submit4{
	width: 25%;
	padding: 1rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #187B9A;
	color: #FFFFFF;
	border: 0px solid black;
	margin-bottom: 5%;
	margin-left: 3%;
	margin-top: 5%;
	display: inline;
	margin-bottom: 5%;
}
.submit5{
	width: 9%;
	padding: 1rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #2CA8A8;
	color: #FFFFFF;
	border: 0px solid black;
	display: inline-block;
	cursor: pointer;
}
.btn_no2{
	width: 5%;
	padding: 0.7rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #187B9A;
	color: #FFFFFF;
	border: 0px solid black;
	text-align: center;
	display: inline-block;
	margin-left: 1%;
}
.btn_no3{
	width: 20%;
	padding: 0.2rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #c20606;
	color: #FFFFFF;
	border: 0px solid black;
	text-align: center;
	display: inline-block;
	margin-left: 1%;
}
.submit2:hover,
.submit3:hover,
.submit4:hover{
	transition: 0.5s;
	background-color: #1d8caf;
	box-shadow: 5px 5px #888888;
	cursor: pointer;
}

.submit-login{
	width: 25%;
	padding: 1rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #187B9A;
	color: #FFFFFF;
	border: 0px solid black;
	margin: 2% auto 8% 37%;
}
.submit-login:hover{
	transition: 0.5s;
	background-color: #1d8caf;
	cursor : pointer;
}
.warpper{
	width: 60%;
	margin: 0 auto 0 auto;
	clear: both;
}
.btn_cancel{
	width: 20%;
	padding: 1rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #C20606;
	color: #FFFFFF;
	border: 0px solid black;
	text-decoration: none;
	margin-left: 3%;
	text-align: center;
}
.btn_radio0{
	width: 10%;
	padding: 0.6rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #69C4D7;
	color: #FFFFFF;
	border: 0px solid black;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	margin: 0 2% 5% 2%;
}
.btn_radio1{
	width: 10%;
	padding: 0.6rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #4299AA;
	color: #FFFFFF;
	border: 0px solid black;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	margin: 0 2% 5% 2%;
}
.btn_radio2{
	width: 10%;
	padding: 0.6rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #327481;
	color: #FFFFFF;
	border: 0px solid black;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	margin: 0 2% 5% 2%;
}
.btn_radio3{
	width: 10%;
	padding: 0.6rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #1F474F;
	color: #FFFFFF;
	border: 0px solid black;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	margin: 0 2% 5% 2%;
}
.btn_yes{
	width: 20%;
	padding: 1rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #6B9ED7;
	color: #FFFFFF;
	border: 0px solid black;
	text-decoration: none;
	text-align: center;
	display: inline-block;
}
.btn_no{
	width: 20%;
	padding: 1rem;
	border-radius: 0.5rem;
	border-color: #ffffff;
	box-shadow: 2px 2px #888888;
	background-color: #1F474F;
	color: #FFFFFF;
	border: 0px solid black;
	text-decoration: none;
	margin-left: 3%;
	text-align: center;
	display: inline-block;
}
.btn_cancel:hover{
	transition: 0.5s;
	background-color: #e10707;
	box-shadow: 5px 5px #888888;
	cursor : pointer;
}
.submit:hover,
.search:hover,
.btn_yes:hover,
.btn_no:hover{
	transition: 0.5s;
	box-shadow: 5px 5px #888888;
	cursor: pointer;
}
.search:focus{
	transition: 2s;
	box-shadow: 10px 10px #888888;
	border: 0px solid black;
}
#headr{
	display: grid;
	place-items: center;
	text-align: left;
	font-weight: bold;
	color: #626161;
	font-size: 1.5rem;
}
#headr1{
	text-align: left;
	font-weight: bold;
	color: #626161;
	font-size: 1.5rem;

}
#headr2{
	font-size: 1.2rem;
	text-align: left;
	color: #626161;
	margin-top: -2%;
}
#headr3{
	color: #FFFFFF;
	font-size: 1.2rem;
	text-align:center;

}
#headr4{
	color: #000000;
}
.box3 a {
	color: #000000;
	text-decoration: none;
}

.b-left{
	width: 45% ;
	float:left;
	padding-left: 5%;
}
.b-leftess{
	width: 45% ;
	float:left;
	padding-left: 5%;
}
.b-left-p{
	width: 80% ;
	float:left;
	text-align: left;
	padding-left: 5%;
}
.b-left_H{
	width: 15% ;
	float:left;
	padding-left: 5%;
}
.b-left_HP{
	width: 15% ;
	margin-top: -2%;
	float:left;
	padding-left: 5%;
}
.b-right_H{
	width: 70% ;
	float:left;
	padding-top: 2.75%;
}
.b-left_H2{
	width: 15% ;
	float:left;
	padding-top: 10%
}
.b-right_H2{
	width: 75% ;
	float:left;
	padding-top: 5%;
	padding-left: 2%;
}
.b-left2{
	width: 20% ;
	float:left;
	padding-left: 25%;
}
.b-left3{
	width: 45% ;
	float:left;
	padding-left: 3%;
}
.b-left-redius{
	font-size: 0.8rem;
	width: 45% ;
	display: inline-block;
	text-align: left;
	border-style: solid;
	margin-left: -2.8%;
	margin-top: 3%;
	padding-top: -2%;
	padding-left: 1%;
	padding-right: 1%;
	padding-bottom: 3%;
}
.b-right-redius{
	font-size: 0.8rem;
	width: 47% ;
	float: right;
	display: inline-block;
	text-align: left;
	border-style: solid;
	margin-top: 3%;
	padding-top: -2%;
	padding-left: 1%;
	padding-right: 1%;
	padding-bottom: 3%;
}
.b-right{
	width: 45% ;
	float:right;
}
.b-right3{
	width: 45% ;
	float:right;
	padding-right: 3%;
}
.pic-l{
	width: 20% ;
	margin-right: 80%; 
}
.pic-full{
	max-width: 100% ;

}
.con-l{
	width: 100% ;
	text-align: left; 
}
.b-bottom{
	width: 100% ;
	clear: both;
	padding-top: 3%;
	text-align:center;
}
.b-bottomprint{
	width: 100% ;
	clear: both;
	padding-top: 0.5%;
	text-align:center;
}
.textcolour{
	color: #888888;
	display:inline;
}
.textcolour2{
	color: #000000;
	display:inline;
	font-size: 1.2rem;
}

ul a{
	background:#2CA8A8;
}
#navmenu1{
	list-style:none;
}
ul#navmenu,.sub1,.sub2{
	list-style:none;
	background:#2CA8A8;
	opacity: 98%;
}
#navmenu li{
	width:200px;
	text-align:center;
	position:relative;
	float:left;
	margin-right:4px;
	background:#ffffff;
}
#navmenu a{
	text-decoration:none;
	display:block;
	width:200px;
	height:30px;
	line-height:25px;
	color:#ffffff;
}
#navmenu.sub1 a{
	margin-left:3px;
}
#navmenu.sub2 a{
	margin-left:8px;
}
#navmenu li:hover a{
	background:#2CA8A8;
}
#navmenu li:hover a:hover{
	color:#FFFFFF;
	background:#187B9A;
	transition: 0.5s;
}
#navmenu ul.sub1{
	display:none;
	position:absolute;
	top:30px;
	left:0px;
}
#navmenu ul.sub2{
	display:none;
	position:absolute;
	top:0px;
	left:86px;
}
#navmenu li:hover .sub1{
	display:block;
}
#navmenu .sub1 li:hover .sub2{
	display:block;
}
nav{
	display: none;
}
.HtextMenu {
	display: none;
}

@media only screen and (max-width: 1200px) {
	.HtextMenu {
		display: inline;
		margin-left: -12%;
	}
	label span {
		font-size: 1.5rem;
	}
	.Htext {
		display: none;
	}
	#navmenu{
		display: none;
	}
	nav{
		display: inline;
	}
	nav input{
		display:none;
	}
	nav input:checked ~ label span:last-child{
		display:none;
	}
	nav input:not(:checked) ~ label span:first-child{
		display:none;
	}
	nav label{
		display:block;
		position:absolute;
		left:0px;
		top:0px;
		user-select:none;
		width:45px;
		height:45px;
		text-align:center;
		line-height:40px;
		background:#333;
		color:white;
		border-bottom-right-radius:20px;
		cursor:pointer;
	}
	nav ul{
		overflow:hidden;
		width:0;
		height:0;
		padding:0;
		margin:0;
		transition:width 0.5s, height 0.5s;
		list-style:none;
	}
	nav input:checked ~ ul{
		width:100%;
		height:100%;
	}
	nav ul li a{
		color:#e0e0e0;
		text-transform:uppercase;
		text-decoration:none;
		display:block;
		width:90%;
		height:30px;
		line-height:30px;
		letter-spacing:1px;
		text-align:center;
		transition:color 0.5s, background 0.5s;
		margin: 0 auto 0 auto;
	}
	nav ul li a:hover{
		background:#333;
		color:white;
	}
	.b-left2{
		width: 35% ;
		float:left;
		padding-left: 10%;
	}
	.b-left3{
		width: 95% ;
		clear: both;
		padding-left: 3%;
		padding-right: 1%;
	}
	.b-right3{
		width: 95% ;
		clear: both;
		padding-left: 3%;
		padding-right: 1%;
	}
	.center_logo2{
		padding-top: 10%;
	}
	.Htext4{
		display: none;
	}
}
@media only screen and (max-width: 850px) {
	.center_logo2{
		margin-top: 3%;
	}

}
@media only screen and (max-width: 660px) {
	.center_logo2{
		margin-top: 15%;
	}
	.fontawesome{
		padding: 0 25% 0 25%	;
		display: inline-block;
	}
	.container{
		padding: 0 25% 0 25%	;
		display: inline-block;
	}

}
@media only screen and (max-width: 485px) {
	.grid{
		margin-top: 25%;
	}
	.HtextMenu {
		margin-left: -30%;
	}
	.center_logo2{
		padding-top: 10%;
		margin-top: 25%;
	}

}