@charset "utf-8";
:root {  /*กำหนดตัวแปร*/
  --bluetop:#053b50;
  --blue2:#176b87;
  --bluesoft: #abf2ed;
  --white:#eeeeee;
}
a { text-decoration:none;}
body {
	//font-family: Tahoma, Geneva, sans-serif;
	font-family: Arial, Helvetica, sans-serif;
	//font-family: "MS Serif", "New York", serif;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.red{ color:red; font-size:10px; float:left;}
.line1{ border:1px solid #FEFFFF;}
.clear{ clear:both;}

.top{	width:100%;	height:70px;	}
.topbox{	width:1200px;	height: inherit;	margin:auto;	background-color:white;	}
.logo{	margin:5px 0px 5px 10px;	float:left; 	width:60px; 	height:auto;	}
.textlogo{	color: #053b50;		display:block;		text-align:left;		text-decoration: none;		float:left;		padding:8px 6px 8px 6px;	}
.textlogoth{		font-size: 20px;		float: left; 	padding:3px 0px 0px 0px;	}
.textlogoen{	font-size: 13px;		float: left; 	padding:4px 0px;	}
.topright{	
	width:140px;
	height:70px;
	float:right;
}
.iconboxtop{	
	width:35px;
	height:35px;
	float:right;
}
.iconboxbottom{	
	width:35px;
	height:35px;
	float:right;
}

.menutab{	width:100%;	position: -webkit-sticky;	position: sticky;		z-index:99;		background-color: #053b50;  	height: 50px;	top: 0;}
.menutab:after{ clear:both;}
.menutopmain {		width:1200px;	height: inherit;	margin:auto;	}
.menutopmain a{	color:white;		display:block;		text-align: center ;		text-decoration: none;	 	font-size: 16px;		float: left;	padding:15px 20px;	}
.menutopmain a:hover{	background-color:white;	color:#053b50;	float: left;	display:block;		}
.menutoplist {  display: none;  position: absolute;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 99;	}
.menutab #menutopmain a .v {	font-size: 10px;		vertical-align: 2px ;	}

.menutopsearch{
	//border-bottom: #CCC solid thin;
	height:40px;
	margin:10px 0px 0px 0px;
	float:right;
}
.searchbox{
	float:left;
	width: 200px;
	height: 30px;
	box-sizing: border-box;
	border: 0px solid #ccc;
	border-radius: 15px 0px 0px 15px;
	font-size: 16px;
	background-color: white;
	background-repeat: no-repeat;
	padding: 0px 0px 0px 10px;
	margin:0px 0px 0px 0px;
}
.searchbutton{
	float:right;
	width: 30px;
	height: 30px;
	box-sizing: border-box;
	border: 0px solid #ccc;
	border-radius: 0px 15px 15px 0px;
	background-color: white;
	background-image: url(img/searchicon.png);
	background-repeat:no-repeat; 
	background-position: 3px 3px; 
	margin:0px 10px 0px 0px;
}

.tab{width:100%; }
.tab:after{ clear:both;}
.mainpic{
	//background-color:#CCC;
	width: auto;
	height:450px;
	text-align:center;
}

.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1200px;
  position: relative;
  margin: auto;
  overflow: hidden;
}

/* Next & previous buttons */
.prev {
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 3px 0 0 3px;
  user-select: none;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dots {
  position: absolute;
  bottom: 20px; /* ตำแหน่งด้านล่างของรูปภาพ */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}





.iconbar{width:100%; height:170px; background-color:#176b87; text-align:center;}
.w1200{width:1200px;  margin:auto;}
.iconbox{
	width:200px;
	text-align:center;
	//background-color:white;
	float:left;
}
.iconimg{
	width:100px;
	height:auto;
	margin:20px 0px 10px 0px;
}
.icontext{
	color:#f9f9f9;
}

.boxleft{
	width:50%;
	float:left;
	//background-color:yellow;
}
.boxright{
	width:50%;
	float:right;
	//background-color:green;
}
.linehead{
	width:auto;
	margin:15px 10px 0px 10px;
	//background-color:red;
	
}
.lineheadtext{
	border-bottom:1px solid #176b87;
	color:#176b87;
	font-weight:bold;
}
.linemain{
	width:auto;
	margin:5px 10px 5px 10px;
	padding:5px 0px 0px 0px ;
	//background-color:red;
	//float:left;
}
.linemain2{
	width:auto;
	margin:8px 1px 1px 1px;
	//padding:1px 1px 1px 1px ;
	//background-color:red;
	//float:left;
}
.datebox{
	width:56px;
	height:56px;
	background-color:#176b87;
	float:left;
	border-radius:28px;
	text-align:center;
}
.datebox2{
	width:85px;
	height:22px;
	background-color:#176b87;
	float:left;
	border-radius:28px;
	text-align:center;
}
.datetext{
	margin:8px 0px 0px 0px;
	color:#f9f9f9;
	font-size:12px;
	font-weight:bold;
}
.datetext2{
	margin:4px 10px 0px 10px;
	color:#f9f9f9;
	font-size:12px;
	font-weight:bold;
}
.newstext{
	width:auto;
	height:56px;
	//float:left;
	word-wrap:break-word;
	padding:0px 0px 0px 10px;
	font-size:15px;
	overflow:hidden;
	color:#176b87;
}
.newstext2{
	width:auto;
	height:86px;
	//float:left;
	word-wrap:break-word;
	padding:0px 0px 0px 10px;
	font-size:15px;
	overflow:hidden;
	color:#176b87;
}
.newstext3{
	width:auto;
	height:auto;
	//float:left;
	word-wrap:break-word;
	padding:2px 0px 3px 90px;
	font-size:15px;
	//overflow:hidden;
	color:#176b87;
}
.w1200 .boxleft a .linemain { color:black;}
.newsimgs{
	width:160px;
	height:90px;
	background-color:#176b87;
	float:left;
	overflow:hidden;
}

.carlendarhead{
	background-color:#abf2ed;
	color:#053b50;
	font-weight:bold;
	padding:5px;
	text-align:center;
	margin:10px 0px 0px 0px;
}
.carlendarbox{
	width:1200px;
	//height:600px;
	background-color:#FEFFFF;
	float:left;
	padding:10px 0px;
}
.carlendarimg{
	width:100%;
	height: auto;
	float:left;
	
}
.foot{
	background-color:#053b50;
	color:#FEFFFF;
	padding:1px;
	text-align:center;
	margin:0px 0px 0px 0px;
	font-size:12px;
}

.menumaptext{
	width:auto;
	padding:5px 0px;
	border-bottom:1px solid #efefef;
	font-size:14px;
}
.topicheadtext{
	width:auto;
	background-color:#176b87;
	color:#feffff;
	text-align:center;
	padding:5px 0px;
	font-size:16px;
}
.topicmaintext{
	width:auto;
	color:#053b50;
	padding:5px 0px;
	font-size:16px;
	word-wrap:break-word;
}
.topicmaintext a{
	color:#053b50;
}
.topicmaintext a:hover{
	color:#176b87;
}

.menuleft{
	width:25%;
	float:left;
}
.menuleft a{
	text-decoration: none;
	//font-weight: bold;
	font-size:15px;
	color: #eeeeee;
	display: block;
	background-color: #176b87;
	padding: 5px;
	border-bottom: #efefef thin solid;
}

.menuleft a:hover{
	background-color:white;	
	color: #176b87;
	//font-weight: bold;
}
.bodyright{
	width:75%;
	float:right;
}
.bodyrightmain{
	text-align:left;	
	border-left:#efefef thin solid;
	padding:1px;
}
.bodyrighthead{
	font-weight: bold;
	margin:4px 10px;
	font-size:16px;	
}

.date{
	background-color:#176b87;
	color:white;
	font-size:10px;
	padding:2px 7px;
	margin:0px 5px;
	border-radius:8px;	
}

.bodyrighttext{
	word-break:break-all;
	margin: 6px 10px;
}
.bodyrighttext a{
	color: #176b87;
	text-decoration: none;
}
.bodyrighttext a:hover{
	color: #053b50;
	text-decoration: none;
}

.btnlink{	margin:5px 0px 0px 0px;}
.btnlinkgreen{	margin:5px 0px 0px 0px; color: #0C0;}