.eform-data {width:90%;height: auto;margin: 0 auto;padding-bottom: 30px;font-family:'Kanit', sans-serif;letter-spacing: 1px;  }

.headtext {font-size: 40px; font-weight: bold;color: #222;text-align: center;}

.h-paragraph {width: 100%;height: auto;margin: 0 auto;padding-bottom: 30px}
.h-bullet , .headparagraph {display: inline-block;vertical-align: middle;}
.h-bullet {width: 40px;height: auto;}
.headparagraph {font-size: 30px;font-weight: bold;color: #222;padding : 0 20px 0 10px;margin: 0 auto;}

.form-data {width: 90%; height: auto;margin: 0 auto;font-size: 24px;color: #333;}
.form-data span {color: red}
input[type=text], select{
  width: 21%;
  padding: 2px 10px;
  margin: 8px 10px 8px 5px;
  display: inline-block;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  font: 24px 'Kanit', sans-serif;
  letter-spacing: 1px;
  color: #333;
  background-color:#ffd199;
  outline: none;
  min-width: 250px;
}
input[type=email]{
   width: 400px !important;
  padding: 2px 10px;
  margin: 8px 10px 8px 5px;
  display: inline-block;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  font: 24px 'Kanit', sans-serif;
  letter-spacing: 1px;
  color: #333;
  background-color:#ffd199;
  outline: none;
  min-width: 250px;
}
.c_number {
  width: 520px !important;
  padding: 2px 10px;
  margin: 8px 10px 8px 5px;
  display: inline-block;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  font: 24px 'Kanit', sans-serif;
  letter-spacing: 1px;
  color: #333;
  background-color:#ffd199;
  outline: none;
  min-width: 250px;
}
.radio {display: inline-block;padding: 0 40px;}
label {padding-left: 5px;}
input[type="radio"]{
  width:23px;
  height:23px;
  /*box-shadow: -4px 0 0 #333; */
  border-radius: 999px;
  -webkit-appearance: inherit;
  border:1px solid #999999;
  position:relative;
  box-sizing:border-box;
   outline: none;
   font: 24px 'Kanit', sans-serif;color: #333;
       background-color: #fcfff4;
}

input[type="radio"]:checked:before {
  content:"";
  position:absolute;
  border-radius: 999px;
  left:25%;
  top:25%;
  width:50%;
  height:50%;
  background:#ff8c00;
}
.input-txt {width: 100%;height: auto;margin:0;padding: 0;}
.form-number {display: inline-block;vertical-align: top;width: 10px;font-size: 24px;line-height: 83px;padding-right: 10px;}
.one-input {display: inline-block;vertical-align: top;min-width: 300px;}
.two-input {display: inline-block;vertical-align: top;min-width: 300px;padding-left: 30px;}
.input-txt p{display: inline-block;font-size: 24px;}
.r-num {display: inline-block;font-size: 24px;}
.p-remark{margin: -10px 0 20px;padding: 0;color:red;font-size: 20px !important;font-style: italic;line-height: 20px; }

.detailtxt {font-size: 24px;text-align: justify;text-indent: 90px;margin: 0 auto;width: 100%;
	color: #333}
.detailtxt_h {font-size: 24px;text-align: justify;text-indent: 50px;margin: 0 auto;width: 100%;
	color: #333;font-weight: bold;}
.detailtxt_ch {font-size: 24px;margin : 10px 0 10px 70px;color: #333;
	background-color: #ffd199;padding: 5px 20px;display: inline-block;}
.ch_data  {list-style-type: none;margin: 0 auto;padding: 0;width: 80%;}
.ch_data  li{list-style-type: none;margin: 0;padding: 0;font-size: 24px;color: #333;text-indent: -20px;}

.detail-img {width: 100%;height: auto;margin:40px 0;padding: 0;text-align: center;}
.boxx {display: inline-block; border: 4px solid #656565;margin: 0 auto;padding: 20px 80px;
	border-radius: 15px;font-size: 24px;color: #333;letter-spacing: 1px}
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.arrow {
  border: solid #656565;
  border-width: 0 15px 15px 0;
  display: inline-block;
  padding: 15px;
  margin: 5px 0 30px;
}

/* .squaredFour */
.check1,.check2,.check3,.check4,.check5,.check6,.check7,.check8 {
    width: 20px;position: relative;display: inline-block;}/*margin: 20px auto;*/
.check1  label,.check2 label,.check3  label,.check4 label,.check5  label,.check6 label,.check7 label,.check8 label
{
    width: 23px;height: 23px;cursor: pointer;position: absolute;
    top: 0;left: 0;background: #fcfff4;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
  }
.check1 :after,.check2 :after,.check3 :after,.check4 :after,.check5 :after,.check6 :after,.check7 :after,.check8 :after   {
      content: '';width: 10px;height: 9px;position: absolute;
      top: 2px;left: 6px;border: 5px solid #ff8c00;border-top: none;border-right: none;
      background: transparent;opacity: 0;transform: rotate(-45deg);}
.check1:hover::after,.check2:hover::after,.check3:hover::after,.check4:hover::after,
.check5:hover::after,.check6:hover::after,.check7:hover::after,.check8:hover::after {
  opacity: 0.5;}
 .checkkk {visibility: hidden;}
 .checkkk:checked + label:after {opacity: 1;}
/* end .squaredFour */
 
.choice-data, td, th { border: 1px solid #ddd;text-align: left;}

.choice-data {
  border-collapse: collapse;
  width: 93%;height: auto;margin: 30px auto; 
  font: 24px 'Kanit', sans-serif;color: #333;
  box-shadow: 0 0 18px 4px rgba(50, 50, 50, 0.7);
}
th {text-align: center;background-color: #ccc}
th, td {padding: 5px 5px 5px 20px;}
td p{display: inline-block;margin: 0 0 0 20px;vertical-align: sub;}

input[type=submit] {
  width: 200px;
  background-color: #515151;
  color: #fff;
  padding: 14px 20px;
  margin: 8px auto;
  border-radius: 15px;
  cursor: pointer;
  font: 24px 'Kanit', sans-serif;
  font-weight: bold;
  display: inherit;
  border: none
  -webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type=submit]:focus {outline:0;}

input[type=submit]:hover {background-color: #ff8c00;color: #fff;border: none}

.remark-detail{width: 80%;height: auto;margin : 40px auto;background-color: #ffd199;padding: 20px 40px;
border-radius: 15px;border: 1px solid #ff8c00;font: 24px 'Kanit', sans-serif;color: #333;}
.remark-detail span {font-weight: bold;}

@media only screen and (min-width: 641px) and (max-width: 1000px) {
.eform-data {width: 95%;height: auto;margin: 0 auto}
.input-txt p {width: 90%;margin: 20px 0 5px}
input[type=text], select,input[type=email] {width: 400px;}
p.r-num {width: 100%}
td p {width: 80%;display: inline-block;vertical-align: top;}
.p-remark {width: 100% !important;font-size: 20px !important;}
.headparagraph {width: 85%;vertical-align: top;}
.one-input{width: 50%}
.form-number {line-height: 75px;}
}

@media only screen and (min-width: 481px) and (max-width: 640px) {
  .headtext {font-size: 34px;}
  .headparagraph {font-size: 24px;width: 80%;}

  .form-data {font-size: 22px;width: 100%}
  .radio {display: inline-block;padding: 0 20px;}
  .input-txt p {font-size: 22px;width: 100%;margin: 20px 0 5px}
  input[type=text], select,input[type=email] {width: 300px !important;font: 22px 'Kanit', sans-serif;}
.form-number {width: 5px;font-size: 22px;padding-right: 7px;line-height: 67px;}
.two-input {padding-left: 20px;}
.one-input{width: 50%}
.c_number {margin-left: 25px !important;}
.detailtxt,.detailtxt_h {font-size: 22px;}
.detailtxt {text-indent: 70px;}
.detailtxt_ch {margin: 10px 0 10px 50px;font-size: 22px;}
.ch_data {margin: 20px auto;}
.ch_data li {font-size: 22px;margin-bottom: 15px;}
.boxx {font-size: 22px;padding: 10px 50px;border: 2px solid #656565;}
.arrow {border-width: 0 10px 10px 0;padding: 10px;}
.choice-data {font: 22px 'Kanit', sans-serif;width: 100%;}
td p{width: 80%;vertical-align: top;}
input[type=submit] {font: 24px 'Kanit', sans-serif;}
.remark-detail {font: 22px 'Kanit', sans-serif;}
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
  .headtext {font-size: 24px;}
  .headparagraph {font-size: 20px;width: 70%;}
  .form-data {font-size: 20px;width: 100%}
  .radio {display: inline-block;padding: 0 20px;}
  .input-txt p {font-size: 20px;width: 100%;margin: 20px 0 5px}
  .p-remark {font-size: 18px !important;}
  input[type=text], select,input[type=email] {width: 200px !important;font:20px 'Kanit', sans-serif;}
.form-number {width: 5px;font-size: 20px;padding-right: 7px;line-height: 70px;}
.two-input {padding-left: 20px;min-width: 200px}
.one-input{width: 50%;min-width: 250px}
.c_number {margin-left: 25px !important;}
.detailtxt,.detailtxt_h {font-size: 20px;}
.detailtxt {text-indent: 50px;}
.detailtxt_ch {margin: 10px 0 10px 0px;font-size: 20px;}
.ch_data {margin: 20px auto;}
.ch_data li {font-size: 20px;margin-bottom: 15px;}
.boxx {font-size: 20px;padding: 10px 10px;border: 2px solid #656565;}
.arrow {border-width: 0 8px 8px 0;padding: 8px;}
.choice-data {font: 20px 'Kanit', sans-serif;width: 100%;}
td p{width: 70%;vertical-align: top;}
input[type=submit] {font: 20px 'Kanit', sans-serif;}
.remark-detail {font: 20px 'Kanit', sans-serif;width: 80%;padding: 20px}
th, td {padding: 5px 5px 5px 10px;}
}