@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'thsarabun';
    src: url('../fonts/THSarabunNew/thsarabunnew-webfont.woff');
}

body {
	/*
	background-image:url(../images/bg-all_en.jpg) !important; 
	background-position:center top; 
	background-repeat:no-repeat;
	background-size: cover;	
	*/
	font-family: 'thsarabun', Verdana, Arial, sans-serif;
	font-size:10pt;
	color:#000000;
	margin:0;
	padding:0;
	
} 


img{ border:0;}

/* Ribbon Blak King 9*/
.black-ribbon {
  position: fixed;
  z-index: 99999999999999999;
  width: 70px;
}
@media only all and (min-width: 768px) {
  .black-ribbon {
    width: auto;
  }
}

.stick-left { left: 0; }
.stick-right { right: 0; }
.stick-top { top: 0; }
.stick-bottom { bottom: 0; }

#menuContainer{
	width: 100%;
	height:96px;
	background-image:url(images/index/index_01.jpg); background-repeat:repeat-x;
	z-index: 1;
	position: relative;
}
#menu {
	position: absolute;
	width: 100%;
	height: 96px;
}
/*#ListMenu{
	width: 749px;
	height: 35px;
	position: absolute;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	-webkit-box-shadow: 1px 1px 1px 1px #878787;
	box-shadow: 1px 1px 1px 1px #878787;
	left: 242px;
	top: 45px;
	padding-top:10px;
	z-index: 0;
}
*/

#ContainnerCheck {
	position: relative;
	background-image:url(images/bg-check.jpg); background-repeat:no-repeat;
	width: 100%;
	height: 431px;
	z-index: 0;

}
#ButtonCheck {
	position: absolute;
	left: 410px;
	top: 322px;
	width: 258px;
	height: 51px;
}


#Banner{
	position: relative;
	width:100%;
	height:160px;
	background-color:#CCC;
    vertical-align: middle;
	padding-top:15px;
	}

#Pay{
	position: relative;
	width: 100%;
	}

#Footer{
	position:  relative;
	background-image:url(images/bg-check.jpg); background-repeat:no-repeat;
	width: 100%;
	height: 290px;
}

#Check{
	position: relative;
	width:100%;
	background-color:#CCC;
    vertical-align: middle;
	padding-top:15px;
	}

.header-text{
	font-family:'thsarabun', Verdana, Geneva, sans-serif;
	font-size:16pt; line-height:26px;
	color:#ffffff;
	 /*color:#99cc00;green*/
}

.text-kit55f-20pt{
	font-family:'thsarabun', Verdana, Geneva, sans-serif;
	font-size:20pt; 
	 /*color:#99cc00;green*/
}

.text-kit55f-18pt{
	font-family:'thsarabun', Verdana, Geneva, sans-serif;
	font-size:18pt;
	 /*color:#99cc00;green*/
}

.text-kit55f-17pt{
	font-family:'thsarabun', Verdana, Geneva, sans-serif;
	font-size:17pt;
}

.text-9{	font-size:9pt;}
.text-10{	font-size:10pt;}
.text-11{	font-size:11pt;}
.text-12{	font-size:12pt;}
.text-14{	font-size:14pt;}
.text-16{	font-size:16pt;}

.text-blue{
	color:#36F;
}
.text-red{
	color:red;
}
.text-green{
	color:#678d03;
}
.text-white{
	color:white;
}
.padding-LR10{
	padding-left:10px;
	padding-right:10px;}

.L10{	padding-left:10px;	}
.L20{	padding-left:20px;	}
.LRBT10{	padding:10px;	}
.LRBT20{	padding:20px;	}
.LR20{	padding-left:20px; padding-right:20px;	}

.radius5 {
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	border: 1px solid #eaeaea;
}

.boxshadow {
-webkit-box-shadow: 2px 2px 2px 2px #D6D6D6;
box-shadow: 2px 2px 2px 2px #D6D6D6;
}

.bg-gradient {
	background: rgb(238,238,238); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-8 */
}

.border{
	-webkit-border-radius: 1px 1px 1px 1px;
	border-radius: 1px 1px 1px 1px;
	border-color:#999;
}
.column1{  
    position:relative;  
    float:left;  
    width:420px;  
  
}  
.column2{  
    position:relative;  
    float:left;  
    width:33%;  
    margin:0px 0.5%;  
    background-color:#C96;    
}  
.column3{  
    position:relative;  
    float:right;  
    width:33%;    
    background-color:#69F;    
}  
.column4{  
    position:relative;  
    float:right;  
    width:66%;    
    background-color:#69F;    
}  



ul.showInColumn{  
    display:block;float:left;  
    list-style:none;  
    padding:0;margin:0;  
    width:280px;   
	/*background-color:#fcd900;*/
    border:0px solid #333333;  /* เทียบใกล้เคียงกับการกำหนด  ของ table  */    
    padding:2px 0 2px 2px;  
}  
ul.showInColumn li{  
    list-style:none;  
    display:block;
	float:left;  
    margin:5px;  /* เทียบใกล้เคียงกับการกำหนด  cellspacing"  ของ table  */  
    margin-left:3px;  
    padding:0px; /* เทียบใกล้เคียงกับการกำหนด  cellpadding  ของ table  */  
    border:0px solid #333333;  /* เทียบใกล้เคียงกับการกำหนด border ใน td ของ table  */  
    width:280px; /*  กำหนดความกว้างของแต่ละคอลัมน์  */  
	
}  


ul.showInColumnFooter{  
    display:block;float:left;  
    list-style:none;  
    padding:0;margin:0;  
    /*width:180px;   /*
	/*background-color:#fcd900;*/
    border:0px solid #333333;  /* เทียบใกล้เคียงกับการกำหนด  ของ table  */    
    padding:2px 0 2px 2px;  
	text-align:left; color:#FFF; width:175px;
}  
ul.showInColumnFooter li{  
    list-style:none;  
    display:block;
	float:left;  
    margin:5px;  /* เทียบใกล้เคียงกับการกำหนด  cellspacing"  ของ table  */  
    margin-left:3px;  
    padding:0px; /* เทียบใกล้เคียงกับการกำหนด  cellpadding  ของ table  */  
    border:0px solid #333333;  /* เทียบใกล้เคียงกับการกำหนด border ใน td ของ table  */  
   /* width:180px; /*  กำหนดความกว้างของแต่ละคอลัมน์  */  
   text-align:left; color:#FFF; width:175px;
	
}  


.btn-buy {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn-buy:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}


.btn-call {
  background: #6e6e6e;
  background-image: -webkit-linear-gradient(top, #6e6e6e, #242424);
  background-image: -moz-linear-gradient(top, #6e6e6e, #242424);
  background-image: -ms-linear-gradient(top, #6e6e6e, #242424);
  background-image: -o-linear-gradient(top, #6e6e6e, #242424);
  background-image: linear-gradient(to bottom, #6e6e6e, #242424);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn-call:hover {
  background: #bdbdbd;
  background-image: -webkit-linear-gradient(top, #bdbdbd, #828282);
  background-image: -moz-linear-gradient(top, #bdbdbd, #828282);
  background-image: -ms-linear-gradient(top, #bdbdbd, #828282);
  background-image: -o-linear-gradient(top, #bdbdbd, #828282);
  background-image: linear-gradient(to bottom, #bdbdbd, #828282);
  text-decoration: none;
}

.btn-red{
  background: #ff0000;
  background-image: -webkit-linear-gradient(top, #ff0000, #bd2900);
  background-image: -moz-linear-gradient(top, #ff0000, #bd2900);
  background-image: -ms-linear-gradient(top, #ff0000, #bd2900);
  background-image: -o-linear-gradient(top, #ff0000, #bd2900);
  background-image: linear-gradient(to bottom, #ff0000, #bd2900);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn-red:hover {
  background: #d60000;
  background-image: -webkit-linear-gradient(top, #d60000, #ff0000);
  background-image: -moz-linear-gradient(top, #d60000, #ff0000);
  background-image: -ms-linear-gradient(top, #d60000, #ff0000);
  background-image: -o-linear-gradient(top, #d60000, #ff0000);
  background-image: linear-gradient(to bottom, #d60000, #ff0000);
  text-decoration: none;
}

.table-compare {
    border-collapse: collapse;
    border: 1px solid #CCC;
}

a:link 		{  font-family: 'thsarabun', Verdana, Arial, sans-serif;	font-size:10pt; color: #000000; text-decoration:none;}
a:visited 	{  font-family: 'thsarabun', Verdana, Arial, sans-serif;	font-size:10pt; color: #000000; text-decoration:none;}
a:hover 	{  font-family: 'thsarabun', Verdana, Arial, sans-serif;	font-size:10pt; color: #678d03; text-decoration:none;}
a:active 	{  font-family: 'thsarabun', Verdana, Arial, sans-serif;	font-size:10pt; color: #000000; text-decoration:none;}

a:link#green 			{    color: #678d03; text-decoration:none;}
a:visited#green 		{    color: #678d03; text-decoration:none;}
a:hover#green 		{    color: #ffbc00; text-decoration:none;}
a:active#green 		{    color: #678d03; text-decoration:none;}

a:link#white		{  font-family: 'thsarabun', Verdana, Geneva, sans-serif; font-size:16pt; color: #FFFFFF; text-decoration:none;}
a:visited#white 	{  font-family: 'thsarabun', Verdana, Geneva, sans-serif; font-size:16pt; color: #FFFFFF; text-decoration:none;}
a:hover#white 	{  font-family: 'thsarabun', Verdana, Geneva, sans-serif; font-size:16pt; color: #FFBC00; text-decoration:none;}
a:active#white 	{  font-family: 'thsarabun', Verdana, Geneva, sans-serif; font-size:16pt; color: #FFFFFF; text-decoration:none;}

a:link#white-s			{  color: #FFFFFF; text-decoration:none;}
a:visited#white-s 	{  color: #FFFFFF; text-decoration:none;}
a:hover#white-s 	{  color: #FFBC00; text-decoration:none;}
a:active#white-s 	{  color: #FFFFFF; text-decoration:none;}



/* popup call back */
.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 580px;
	height: 300px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background-color:#fcd900;
/*	background: #fff;
	background: -moz-linear-gradient(#2d81c9, #85b8e4);
	background: -webkit-linear-gradient(#2d81c9, #85b8e4);
	background: -o-linear-gradient(#2d81c9, #85b8e4);
*/}
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;

/*popup call back */

A:link#wh 		{	font-family: Arial, Tahoma, Verdana;	font-size: 10pt;	COLOR:#ffffff;	TEXT-DECORATION: none;}
A:visited#wh	{	font-family: Arial, Tahoma, Verdana;	font-size: 10pt;	COLOR:#ffffff;	TEXT-DECORATION: none;}
A:hover#wh	{	font-family: Arial, Tahoma, Verdana;	font-size: 10pt;	COLOR:#678d03;	TEXT-DECORATION: underline;}
A:active#wh 	{	font-family:  Arial, Tahoma, Verdana;	font-size: 10pt;	COLOR:#ffffff;	TEXT-DECORATION: none;}

A:link#mefi 		{	font-family: Arial, Tahoma, Verdana;	font-size: 8pt;	COLOR:#ffffff;	TEXT-DECORATION: none;}
A:visited#mefi	{	font-family: Arial, Tahoma, Verdana;	font-size: 8pt;	COLOR:#ffffff;	TEXT-DECORATION: none;}
A:hover#mefi		{	font-family: Arial, Tahoma, Verdana;	font-size: 8pt;	COLOR:#ffffff;	TEXT-DECORATION: underline;}
A:active#mefi 	{	font-family:  Arial, Tahoma, Verdana;	font-size: 8pt;	COLOR:#ffffff;	TEXT-DECORATION: none;}


.column {
	width:200px;	
	float:left;
}

.column ul li {
	list-style:none;
	float:left;
}
.column ul li a {
	color:white;
	text-decoration:none;
}
.column ul li a:hover  {
    display: block;
	color:red;
}


.circle {
	border-radius: 50%;
	width: 180px;
	height: 180px;
	-webkit-box-shadow:  0px 1px 5px 2px rgba(9, 9, 9, 0.2);
    box-shadow:  0px 1px 5px 2px rgba(9, 9, 9, 0.2);
	margin:10px;
	z-index:99;
}

.number {
	font-family: "Courier New", Courier, monospace, Arial, Comic Sans MS, Microsoft Sans Serif, Helvetica, sans-serif;
	font-size: 10pt;
	/*background-image: url(images/icon-number_03.png);*/
	background-repeat: no-repeat;
	text-align: center;
	height: 30px;
	width: 30px;
	padding-top: 5px;
	float:left;
	border-radius: 90px;
    border: 1px solid #666;
	margin-left: 7px;
    margin-top: -5px;
}

.button-result {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-webkit-border-top-left-radius:6px;
	-moz-border-radius-topleft:6px;
	border-top-left-radius:6px;
	-webkit-border-top-right-radius:6px;
	-moz-border-radius-topright:6px;
	border-top-right-radius:6px;
	-webkit-border-bottom-right-radius:6px;
	-moz-border-radius-bottomright:6px;
	border-bottom-right-radius:6px;
	-webkit-border-bottom-left-radius:6px;
	-moz-border-radius-bottomleft:6px;
	border-bottom-left-radius:6px;
	text-indent:0;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:40px;
	line-height:40px;
	width:550px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
}
.button-result:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}
.button-result:active {
	position:relative;
	top:1px;
}
.bg-name {
	background-image: url(images/member/member_line.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	font-family: 'thsarabun', Verdana, Arial, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #993300;
	line-height: 25px;
}
.bg-name2018 {
	background-image: url(images/member/member_line-2018.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	font-family: 'thsarabun', Verdana, Arial, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #993300;
	line-height: 25px;
}
.bg-name2 {	
	font-family: 'thsarabun', Verdana, Arial, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #993300;
	/*line-height: 25px;*/
}
.border-dot {
	border: 1px dotted #822B00;
}