.clear { clear:both; } 
.left { float:left; } 
label {color:#999; } 
body {  } 



 body {
background:#FFFFFF; font-size:14px; 

    margin: 0;
    
    background-image: url("images/backdrop-3.jpg") ;
	 background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
  }

  .image {
    display: inline-block;
    margin: 4px;
    border: 0px solid #CCCCCC;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 120%;
  }


  .image.size-fixed {

    width: 120px;
    height: 120px;

  }


  .image.scale-fill {
    background-size: ;
  }

  .image img {
    display: none;
  }



.container_web { width:100%; } 
.logo1 , .logo2 { width:49% ; float:left; } 


.sayhi { width:100%;  padding-top:10px; padding-left:10px; padding-bottom:5px; background:#294cff; color:#FFF; } 


ul.btnpay , ul.btn_logout { width:60%; float:left; } 
ul.btn_logout { width:40%; float:left; } 
ul.btnpay li {list-style:none; float:left; padding-left:5px; width:98%;  }
ul.btn_logout li { width:100%;  list-style:none; text-align:right; padding-right:3px; } 



.logo1 img { height:50px; width:auto; } 
.logo2 img { height:50px; margin-right:0px; } 


.menubar { margin-top:10px; } 
.menubar ul li { font-size:12px; font-weight:bold;  list-style:none; float:left; padding:3px; text-align:center; margin-left:3px; background:#F3F3F3; cursor:pointer; } 
li.menu1 { width:25% ; } 
li.menu2 { width:40%; } 
li.menu3 { width:30%; } 

.shownews { padding:5px; font-size:10px; margin-top:20px; } 
.shownews p { padding-top:20px; } 

.headtest {width:100% ;  font-size:20px; font-weight:bold; padding-top:10px; } 
.headtest1 { font-size:18px; font-weight:bold;  } 
.headtest1  span { font-size:16px;   } 

.btnregis { margin-top:20px;  background:#FF0000; height:60px; border-radius:25px; border:1px solid #FF0000; padding-left:10px; padding-right:10px; color:#FFF; font-weight:bold; padding-top:10px; padding-bottom:10px; cursor:pointer; } 
.btnconti { margin-top:15px;  background:#FF0000; height:30px; border-radius:25px; border:1px solid #FF0000; padding-left:20px; padding-right:20px; color:#FFF; font-weight:bold; padding-top:5px; padding-bottom:5px; cursor:pointer; } 
.btnpayment { margin-top:15px;  background:#159430; height:30px; border-radius:25px; border:1px solid #159430; padding-left:20px; padding-right:20px; color:#FFF; font-weight:bold; padding-top:5px; padding-bottom:5px; cursor:pointer; } 
.btnlogout {  font-size:14px; background:#f7f689; height:25px; border-radius:15px; border:1px solid #f7f689; padding-left:15px; padding-right:15px; color:#000; font-weight:bold; padding-top:2px; padding-bottom:2px; cursor:pointer; } 


.btnregis_2_nonac { align:center; width:150px;  margin-top:20px;  background:#989898; height:60px; border-radius:25px; border:1px solid #989898; padding-left:10px; padding-right:10px; color:#d8d8d7; font-weight:bold; padding-top:10px; padding-bottom:10px; cursor:pointer; } 
.btnregis_2_active { align:center; width:150px;  margin-top:20px;  background:#4b9800; height:60px; border-radius:25px; border:1px solid #4b9800; padding-left:10px; padding-right:10px; color:#d8d8d7; font-weight:bold; padding-top:10px; padding-bottom:10px; cursor:pointer; } 


.tbn_son , .tbn_kon , .tbn_ubo { font-size:14px;  padding-top:15px;  } 
.tbn_son { width:100%; } 
.tbn_kon , .tbn_ubo {  width:100%;  float:left;  } 

#bottomzone { height:100px; background:#CCC;      
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0;  } 
.mfrom { padding:5px; } 
select.select_form   { padding-top:10px; padding-bottom:10px; width:100%; border:1px solid #CCC;  } 
input.form-control { font-size:16px; } 
.input-text  , .textinput { margin-top:5px; font-size:10px; } 

.col-sm-6 { padding-bottom:5px; } 
.sublabel { color:#8b9c7a; }

.tabname { width:100%; padding-left:15px; padding-bottom:5px;  } 
.tabname_half  {  width:100%;  padding-left:15px; padding-bottom:5px;  } 
.tabname_half   { padding-bottom:5px; } 
.namex , .lastnamex , .birth_d , .birth_m, .birth_y { padding-top:10px;  } 

.errortext { color:#FF0000; } 

.testsitex  { padding:5px;  width:95% ; margin:5px auto;  background:#FAFAFA; border:1px solid #999;  } 
.testsitex b { color: #1a79ef ; } 
.testsitex ul li { width:40px; height:40px; text-align:center; float:left; margin-left:8px; font-size:16px; border:1px solid #555; font-weight:bold; padding-top:10px; cursor:pointer;  }
.testsitex ul li:hover { background:#CCC;    }

.regisdetail {   width:98% ; margin:10px auto; min-height:80px; border:1px solid #CCC;  padding-bottom:15px;  } 
.regisdetail ul  , .regis_personal ul { width:100%;   }
.regisdetail ul li.rd01 { clear:both;  float:left; width:48%; padding:5px; text-align:right; } 
.regisdetail ul li.rd02 { float:left; width:48%; padding:5px; text-align:left; font-weight:bold; color:#013d82;  } 

li.regis_p01 { width:20%;  } 
li.regis_p02 { width:75%;  } 

.registab1 {width:97% ;  margin-top:5px; } 
.registab2 { width:97% ;  padding-left:10px;   } 

.input-name , .input-lastname{ width:100%; } 
.input-lastname{ margin-top:5px;  } 

.fillform { width:100%; font-size:14px; } 
.fillformtxt { width:100%;} 
select.fillformtxt { font-size:14px;padding-top:5px; padding-bottom:5px;  } 
.boxbirth { width:30%; } 
.left5 { margin-left:5px; } 
.left5_big { margin-left:0px; } 

.top20 { width:250px; height:30px;  } 

.small_2cal1 { width:30; float:left;  } 
.small_2cal2  { width:70%; float:left;  } 

ul.dropdown { z-index:9999; } 

ul.headtb { width:100%; margin:10px auto; } 
ul.headtb li { list-style:none; padding:3px; text-align:center; font-size:10px; color:#fd3f70;  } 

li.usejp01 { width:100%; } 
.w20 { width:18%; text-align:center;  } 
ul.bodytb { margin-top:10px; } 

ul.bodytb li { font-size:10px; } 
.registab2x  { width:100%;  }

.registab_step { width:100%;} 
ul.bodytb_step { width:95% ; padding-left:5px;  margin-top:15px;   }
li.u_step1 { width:30%; font-size:10px; color:#FF5555; float:left;  } 
li.u_step2 { width:20%; font-size:10px; color:#555; float:left;  } 
li.u_step3 { width:30%; font-size:10px; color:#555; float:left;  } 

.bodytext { width:98%; margin:0 auto; padding:5px; } 
ul.rede li { width:100%; padding-bottom:10px; } 

.headtabx { font-weight:bold; font-size:16px; padding-bottom:15px;   margin-top:20px; } 

ul.eximg , ul.eximg_no { width:100%; } 
ul.eximg li , ul.eximg_no li { width:100%; float:left; text-align:center;  } 
 ul.eximg_no { margin-top:15px; } 



.btn_accept { font-size: 14px; font-weight:bold; padding:5px; padding-left:15px; padding-right:15px; background:#098cfc; border:1px solid #555; color:#FFF;  }
.btn_accept_green { font-size: 14px; font-weight:bold; padding:5px; padding-left:15px; padding-right:15px; background:#03a41a; border:1px solid #555; color:#FFF;   width:150px; }
.btn_gray { font-size: 14px; font-weight:bold; padding:5px; padding-left:15px; padding-right:15px; background:#c9c6c5; border:1px solid #555; color:#FFF;   } 
.btn_accept_red { font-size: 14px; font-weight:bold; padding:5px; padding-left:15px; padding-right:15px; background:#FF0000; border:1px solid #555; color:#FFF;   width:150px; }

 .btn_accept_green:hover { background:#f3fcb6 ; color:#000; border:1px solid #555; }

 #showphoto , #showphotox {    position: relative;  z-index:999; margin:10px auto;   }
.showphoto { width:150px; height:200px; background:#f4f4f4;  border:1px solid #CCC; } 
img.thumb-image , .thumb-image {  width:150px; height:200px; }

.imgid {width:98%; margin:0 auto; height:auto; } 

.fontshow {  font-family: 'Sarabun', sans-serif;  } 

.textthank { width:90%; font-size:16px; font-weight:bold; color:green; margin:20px auto;   font-family: 'Sarabun', sans-serif;   }
.textthank p { padding-top:5px; padding-bottom:5px; }


.blockdata { width:100% ; padding:10px; text-align:left ; font-size:14px;  } 
.headtextboldxx { font-size:18px; font-weight:bold; color:#FF0000;  } 
.block_detail { text-align:left; } 




.smalladd { width:33%; float:left; } 
.smalladd input { width:80%; } 


.memdata { font-weight:bold; font-size:14px; color:#000011; }

/* Extra small devices (phones, 200-360 px and down) */
@media only screen and (min-width: 200px) and (max-width: 359px){





}






/* Extra small devices (phones, 480px and down) */
@media only screen and (min-width: 360px) and (max-width: 599px){

.logo1 img { height:60px; width:auto; } 
.logo2 img { height:60px; margin-right:0px; } 

.tbn_kon , .tbn_ubo {  width:45%; float:left;  } 

.headtest {width:100% ;  font-size:14px; font-weight:bold; padding-top:10px; } 

}





/* Extra small devices (phones, 600px and down) */
@media (max-width: 600px) {

.tbn_kon , .tbn_ubo {  width:45%; float:left;  } 



}







/* Small devices (portrait tablets and large phones, 600px and up) */
@media  (min-width: 600px) { 


.headtextboldxx { font-size:18px; font-weight:bold; color:#FF0000;  } 
.block_detail { text-align:left; } 

.block_img { width:30%; float:left; } 
.block_img img {width:95%; height:auto; } 
.block_detail { width:65%; float:left; text-align:justify; } 


.tbn_kon , .tbn_ubo {  width:45%; float:left;  } 
.headtest {width:100% ;  font-size:14px; font-weight:bold; padding-top:10px; } 

.genderx { width:20%; float:left; } 
.namex , .lastnamex { width:39%; float:left; padding-left:10px; padding-top:0px; } 
.emailx{ width:50%; } 
.streetx  { width:98%; } 


.birth_d , .birth_m, .birth_y { width:16%; float:left;  padding-top:0px; } 
.birth_d , .birth_m { padding-left:10px;  } 

.tabname_half { width:50% ; float:left; } 

.testsitex  { width:30%; float:left; margin-left:10px;  } 

.regisdetail {   width:50% ; } 

li.regis_p01 { width:10%;  text-align:right; padding-right:5px; } 
li.regis_p02 { width:75%; padding-left:5px;  } 


.registab1 { clear:both; width:35% ;  float:left; text-align:right; padding-right:5px; background:#FAFAFA;  } 
.registab2 { width:65% ;  padding-left:5px;   float:left; padding:5px;   } 

.input-name , .input-lastname{ width:50%; } 

.boxbirth { width:15%; } 
.fillform{ width:100%;} 
.fillformtxt { width:50%;} 

.add_2col { width:25%; float:left; } 
.add_2col input.fillformtxt { width:100%; } 

.left5_big { margin-left:5px; } 


ul.headtb { width:100%; margin:10px auto; } 
ul.headtb li { width:18%; } 


.registab2x  { width:50%; }

.registab_step { width:60%; } 
li.u_step1 { width:10%; font-size:10px; color:#FF5555; float:left;  } 
li.u_step2 { width:8%; font-size:10px; color:#555; float:left;  } 
li.u_step3 { width:10%; font-size:10px; color:#555; float:left;  } 

li.u_step2 select  { font-size:12px; padding:5px; } 

ul.eximg  { width:20%; float:left; } 
ul.eximg_no { width:70%; float:left; } 
ul.eximg li { width:30%; float:left; text-align:center;  } 
 ul.eximg_no li { width:20%; float:left; text-align:center;  } 
 ul.eximg_no { margin-top:15px; } 

.imgid {width:400px; height:auto;  margin:0 auto; } 
}


ul.editform { margin-top:20px; } 
ul.editform li { list-style:none; float:left; padding:5px; border:1px solid #CCC; margin-left:5px; padding-left:15px; padding-right:15px;  background:#03a41a; color:#FFF; cursor:pointer; }



/* Medium devices (landscrape tablets, 768px and up) */
@media  (min-width: 768px) { 

.logo1 img { height:80px; width:auto; } 
.logo2 img { height:80px; margin-right:0px; } 





}



/* Medium devices (landscrape tablets, 768px and up) */
@media  (max-width: 768px) { 

.tbn_kon , .tbn_ubo {  width:45%; float:left;  } 



}


/* Medium devices (landscrape tablets, 991px and up) */
@media  (max-width: 991px) {


.tbn_kon , .tbn_ubo {  width:45%; float:left;  } 

}




/* Large devices (laptops/desktops, 992px and up) */
@media  (min-width: 992px) {



}







/* Extra large devices (large laptops and desktops, 1200px and up) */
@media  (min-width: 1200px) {

.container_web { width:1200px; margin:0 auto;  } 




}