@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600;700;800;900&display=swap');

html, body, div{ margin:0; padding:0; }
html { 
	-ms-text-size-adjust: 100%; 
	-webkit-text-size-adjust: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
}
*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}
 
body{
 font-family: 'Kanit', Arial, Tahoma; font-size:16px; line-height:1.5; font-weight:400; 
 background:#ffffff; color:#242424; min-width: 320px;  overflow-x:hidden; -webkit-text-size-adjust: none;   } 

 
img{ border:none; max-width:100%; outline:0; vertical-align:middle;  }
:focus { outline:0; }
a:active { outline:none; }
.word-wrap { word-wrap: break-word; } 
.clear{ clear:both; }
.clearvdo{ clear:both; }
.box{ display:block; position:relative; }
.boxleft, .left{ float:left; }
.boxright, .right{ float:right; }

.txt-center{ text-align:center; }
.txt-left{ text-align:left; }
.txt-right{ text-align:right; }

.table{ display:table; width:100%; margin:0; padding:0; position:relative; }
.table-row{ display:table-row; }
.table-cell{ display:table-cell; }

a:link{ text-decoration:none; color:#333333; }
a:visited{ text-decoration:none; color:#333333; }
a:hover{ text-decoration:none; color:#333333; }
 

h1, .h1{ font-size:60px; line-height:1.1; padding:0; margin:0; font-weight:normal;  }
h2, .h2{ font-size:36px; line-height:1.2; padding:0; margin:0; font-weight:normal;  }
h3, .h3{ font-size:22px; line-height:1.3; padding:0; margin:0; font-weight:normal;  }
h4, .h4{ font-size:18px; line-height:1.3; padding:0; margin:0; font-weight:normal;  }
h5, .h5{ font-size:14px; line-height:1.3; padding:0; margin:0; font-weight:normal;  } 
 
#page{ display:block; position: relative;  /*transition: transform 1000ms ease-out;*/	 }
.content{ display:block; position: relative; width:95.3125%; margin: 0 auto;  }
.contentx{ display:block; position: relative; width:88.75%; margin: 0 auto;  }
 
.tb{ display:table; position: relative; width:100%; height:100%;  }
.tb > .tc{ display:table-cell; position: relative;  }
.tb > .tc.vtop{ vertical-align:top; }
.tb > .tc.vmid{ vertical-align:middle; }
.tb > .tc.vbtm{ vertical-align:bottom; }

#bxheader{ display:block; position: fixed; z-index:6999; background:#fff; width:100%; transition: ease 0.5s; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);  }
.bxheader{ display:block; position: relative; height:90px; } 
.bxheader > .tb{ display:table; position: relative; width:100%; height:100%; }
.bxheader > .tb > .c1{ display:table-cell; position: relative; width: 248px;  vertical-align: middle;  }
.bxheader > .tb > .c2{ display:table-cell; position: relative; vertical-align: middle; text-align: right; }
.bxheader > .tb > .c2 > .bx{ display:block; position: relative; }
.bxheader > .tb > .cm{ display:none; }

.bxlogo{ display:block; position: relative;  } 

.bxnav{ display:inline-block; position:relative; }
.bxnav > ul{ position:relative; padding:0; margin:0; list-style:none; }
.bxnav > ul > li{ display:inline-block; position: relative; margin:0 18px;  }
.bxnav > ul > li > a{ display:block; position: relative; font-weight:500; transition:ease 0.5s; color:#000;  }
.bxnav > ul > li > a:hover,
.bxnav > ul > li > a.activ{ color:#e94615; } 
 
.bxlang{ display:inline-block; position:relative; margin: 0 13px; }
.langbx{ display:inline-block; position:relative; width:36px; height:36px; vertical-align:middle; background-size:100%; margin:0 7px;  } 
a.langbx > span{ position:absolute; top:0; left:0; bottom:0; right:0; transition: ease 0.5s; background-size:100%; opacity:0;  }

a.langbx.langth{  background: url("../../img/lang-th.png") no-repeat #fff;  } 
a.langbx.langth > span{ background: url("../../img/lang-th-activ.png") no-repeat #fff;  }
a.langbx.langth:hover > span{ opacity:1; }
span.langbx.langth{ background: url("../../img/lang-th-activ.png") no-repeat #fff;  }

a.langbx.langen{  background: url("../../img/lang-en.png") no-repeat #fff;  } 
a.langbx.langen > span{ background: url("../../img/lang-en-activ.png") no-repeat #fff;  }
a.langbx.langen:hover > span{ opacity:1; }
span.langbx.langen{ background: url("../../img/lang-en-activ.png") no-repeat #fff;  }

a.langbx.langjp{  background: url("../../img/lang-jp.png") no-repeat #fff;  } 
a.langbx.langjp > span{ background: url("../../img/lang-jp-activ.png") no-repeat #fff;  }
a.langbx.langjp:hover > span{ opacity:1; }
span.langbx.langjp{ background: url("../../img/lang-jp-activ.png") no-repeat #fff;  }
 
.bxline{ display:inline-block; position: relative; background:#ccc; width: 1px; height: 54px; vertical-align: middle; }
.bxcall{ display:inline-block; position: relative; vertical-align: middle; margin-left:16px;  }
.bxcall > div{ display:block; position: relative; }
.bxcall > div > img{ margin-right:9px;  }
.bxcall > div > h3{ display:inline-block; position: relative; font-weight:700; color:#000000; vertical-align: middle; }

 
#bxnavmobile{ display:none; }

  
#bxhomeimg{ display:block; position: relative; height:88vh; background: url("../../img/leadhome.jpg") center no-repeat; background-size: cover;  }
#bxhomeimg > .tb{ display:table; position: relative; width:100%; height:100%;   }
#bxhomeimg > .tb > .tc{ display:table-cell; position: relative; text-align: center; vertical-align:bottom; }

.bxhometxt{ display:block; position: relative; padding:0 0 65px; } 
.bxhometxt > h1{ display:block; position: relative; color:#fff; font-weight:500; padding:0 0 32px; }
.bxhometxt > .bxhomebx{ display:block; position: relative; width:750px; margin:0 auto; }
.bxhometxt > .bxhomebx > .tb{  display:table; position: relative; width:100%; height:100%;  }
.bxhometxt > .bxhomebx > .tb > .tc{  display:table-cell; position: relative; width:250px; vertical-align:bottom; }
.bxhometxt > .bxhomebx > .tb > .tc:nth-child(1){ background:#ffffff; }
.bxhometxt > .bxhomebx > .tb > .tc:nth-child(2){ background:#ededed; }
.bxhometxt > .bxhomebx > .tb > .tc:nth-child(3){ background:#d6d6d6; }
.bxhometxt > .bxhomebx > .tb > .tc > .bx{ display:block; position: relative; text-align: center; }
.bxhometxt > .bxhomebx > .tb > .tc > .bx > .bximg{ display:block; position: relative; }
.bxhometxt > .bxhomebx > .tb > .tc > .bx > .bxtxt{ display:block; position: relative;  }
.bxhometxt > .bxhomebx > .tb > .tc > .bx > .bxtxt > h4{ display:table-cell; position: relative; height:78px; vertical-align: middle; text-align:center; width:250px; }

#bxhomewelc{ display:block; position: relative; background:#ededed; padding:30px 0 65px;   }
.bxheadwel{ display:block; position:relative; height:175px; background: url("../../img/bg-homewelc.jpg") center no-repeat; background-size:cover; color:#fff; }
.bxheadwel > .tb{ display:table; position: relative; width:100%; height:100%;  }
.bxheadwel > .tb > .tc{ display:table-cell; position: relative; text-align: center; vertical-align: middle; }
.bxheadwel > .tb > .tc > h2{ font-weight:500px; }

.bxweltxt{ display:block; position:relative; width:54%; margin:0 auto; padding:36px 0 0; text-align: center;  }
.bxweltxt > .bxlink{ display:block; position: relative; padding:52px 0 0;  }

#bxlogofooter{ display:block; position: relative; padding:26px 0;  }
.logofooterbx{ display:block; position: relative; text-align: center;   }
.logofooterbx > .bxc{ display:inline-block; position: relative; width:24%; vertical-align: middle;  }



#pageinner{ display:block; position: relative; padding:90px 0 0;  }
.innerlead{ display:block; position: relative; height:175px; background: url("../../img/bg-leadinner.jpg") center no-repeat; background-size: cover; color:#fff; }
.innerlead > .tb{ display:table; position: relative; width:100%; height:100%;  }
.innerlead > .tb > .tc{ display:table-cell; position: relative; vertical-align: middle; text-align: center; }
.innerlead h1{ font-weight:600; }

.bxinfo{ display:block; position: relative; background: #ededed; padding:52px 0;  }
.infobx{ display:block; position: relative; text-align:center; }
.infobx h2{ font-weight:600; padding:0 0 26px; }

.bxservices{ display:block; position: relative; max-width:1000px; width:82%; margin:0 auto; padding:65px 0; }
.servbx{ display:block; position: relative; width:25%; float:left; }
.servbx:nth-child(1){ background:#f8f8f8; }
.servbx:nth-child(2){ background:#ededed; }
.servbx:nth-child(3){ background:#e4e4e4; }
.servbx:nth-child(4){ background:#d6d6d6; }
.servbx > .bx{ display:block; position: relative; }
.servbx > .bx > .bximg{ display:block; position: relative; }
.servbx > .bx > .bximg > img{ width:100%; }
.servbx > .bx > .bxtxt{ display:block; position: relative; padding:20px 26px 36px; text-align: center; }
.servbx > .bx > .bxtxt > h4{ font-weight:700; }
.servbx > .bx > .bxtxt > .line{ display:block; position: relative; width:80px; height:1px; background:#333; margin:20px auto;  }




.bxgray{ display:block; position: relative; background: #ededed; }
.bxabout{ display:block; position: relative; width:74%; margin:0 auto; text-align: center; padding:52px 0; }
.bxabout > .bximg{ display:block; position: relative; padding:52px 0 0; }
.bxabout > .bximg > span{ display:inline-block; position: relative; margin:0 10px; }
.bxabout > .bximg > span > img{ box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3); }
.bxabout > .bximg.nodrop > span > img{ box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0); }
 

.bxcontacttop{ display:block; position: relative; padding:65px 0; width:78.68%; margin:0 auto; }
.bxcontacttop > .bx{ display:block; position: relative; }
.bxcontacttop > .bx > .tb{ display:table; position: relative; width:100%; }
.bxcontacttop > .bx > .tb > .c1{ display:table-cell; position: relative; vertical-align: top; width:36%;  }
.bxcontacttop > .bx > .tb > .c2{ display:table-cell; position: relative; vertical-align: top; width:36%;  }
.bxcontacttop > .bx > .tb > .c3{ display:table-cell; position: relative; vertical-align: top; width:28%;  }
.bxcontacttop h2{ font-weight:500; padding:0 0 26px;  }
.bxcontacttop a{ transition:ease 0.5s;  }
.bxcontacttop a:hover{ color:#e94615; }
.tbc{ display:table; position: relative; width:100%; }
.tbc > .c1{ display:table-cell; position: relative; vertical-align: top; width:60px; }
.tbc > .c2{ display:table-cell; position: relative; vertical-align: top; width:8px; }
.tbc > .c3{ display:table-cell; position: relative; vertical-align: top; }
.tbcx{ display:table; position: relative; width:100%; }
.tbcx > .c1{ display:table-cell; position: relative; vertical-align: top; width:100px; }
.tbcx > .c2{ display:table-cell; position: relative; vertical-align: top; width:8px; }
.tbcx > .c3{ display:table-cell; position: relative; vertical-align: top; }

.bxcontact{ display:block; position: relative; width:620px; margin:0 auto; padding:52px 0; }
 

.contactbx{ display:block; position: relative; margin:0 0 26px;  }
.contactbx.bxlast{ padding:26px 0 0; }
.contactbx > .bxl{ display:block; position: relative; float:left; width:48%; }
.contactbx > .bxr{ display:block; position: relative; float:right;  width:48%; }
.contactbx > .bxf{ display:block; position: relative; width:100%; }

.contactbx > .bxl > .bx,
.contactbx > .bxr > .bx,
.contactbx > .bxf > .bx{ display:block; position: relative; padding:20px 0 0;  }

#contactform{ display:block; position:relative; margin:0; font-family:inherit; font-size:inherit; color:inherit; font-weight: inherit; } 
#contactform input{
  display:block; position:relative; width:100%; font-family:inherit; font-size:inherit; color:inherit;
  border:none; border-bottom:#e5e5e5 solid 2px; padding:6px 10px; }
#contactform input[type=text]{     }
#contactform textarea{ 
  display:block; position:relative; width:100%; font-family:inherit; font-size:inherit; color:inherit;
  border:none; border-bottom:#e5e5e5 solid 2px; padding:6px 10px;  height:90px; resize: none; }


#contactform input[type=submit]{ display:block; position: relative; width:202px; background:#e94615; color:#fff; border-radius:26px; transition: ease  0.4s all; font-family:inherit; font-weight:400; border: none; cursor: pointer; padding:14px 6px; margin:0 auto; }
#contactform input[type=submit]:hover{ background:#000;   }
#contactform input[type=submit]:disabled {  }

 
#contactform input:focus{ border-bottom-color:#b2b2b2;  }  
#contactform textarea:focus{  border-bottom-color:#b2b2b2;   }  

#contactform .placeholder{ position: absolute; top:0; padding:0; margin:0; pointer-events: none; color:#b9b9b9; }
#contactform .placeholder.txta{ bottom:90px; }
#contactform .input:focus ~ .placeholder { color: #333; }
 

#contactform label.error{ display:block; position:relative; padding:0; color:#ff0000; font-size:13px; font-style:italic; text-align: left; font-weight:300; }
#contactform input.error, #contactform textarea.error{ border-bottom-color:#ff0000;   }


.bxcontactgg{ display:block; position: relative; height:400px; }
.bxcontactgg iframe{ width:100%; height:100%; }



a.linkorange{ transition:ease 0.5s; text-decoration: underline; }
a.linkorange img{ margin-right:6px; vertical-align: middle; }
a.linkorange:hover{ color:#e94615; }


a.bxbtn{ display:inline-block; position: relative; width:202px; background:#e94615; border-radius:26px; color:#fff; text-align: center; padding:14px 6px; transition: ease 0.5s;  }
a.bxbtn > .icon{ display:inline-block; position: relative; width:6px; height: 9px; background: url("../../img/icon-arrow-right.png") no-repeat; vertical-align: middle; margin-left:12px;   }
a.bxbtn:hover{ background:#111111;  }


#bxfooter{ display:block; position: relative; background:#111111; padding:52px 0; color:#fff;  } 
.bxfooter{ display:block; position: relative; padding:0 0 39px;  }
.bxfooter > .c1{ display:block; position: relative; width:36%; float:left; }
.bxfooter > .c2{ display:block; position: relative; width:40%; float:left; }
.bxfooter > .c3{ display:block; position: relative; width:24%; float:left; }
.footerbx{ display:block; position: relative; }
.footerbx > .bxh{ display:block; position: relative; padding:0 0 26px;  }
.footerbx > .bxh > h3{ display:inline-block; position: relative; border-bottom:rgba(214,214,214,0.3) solid 1px; padding:0 0 8px; font-weight:500;    }
.footerbx ul{ margin:0; padding:0 0 0 15px; line-height:2;  }
.footerbx a{ color:#fff; transition: ease 0.5s; }
.footerbx a:hover{ color:#e94615; }
.footerbx a.txtline{ text-decoration:underline; }

.bxcopy{ display:block; position: relative; border-top:rgba(214,214,214,0.3) solid 1px; padding:20px 0 0; text-align: center; } 



#topcontrol{ z-index:199; display:none;  }
#btntop{ display:block; position: relative; width:56px; height:56px; background:#cccccc; text-align: center; bottom:20px; right:20px; border-radius:50%;   }
#btntop > span{ 
 display:inline-block; position: relative; width:9px; height:6px; background: url("../img/icon-top.png") no-repeat;  
 -webkit-transform: translateY(12px); transform: translateY(12px); transition: all .2s ease; background-size:100%;  }
#btntop:hover > span{  -webkit-transform: translateY(6px); transform: translateY(6px); }