/*----------------------------- style of tag name --------------------------------*/
*, *:before, *:after {-webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit;}
* {margin:0; padding:0; letter-spacing:normal; line-height: normal; font-family:'kanit',sans-serif;}
html, body{
	font-size:100%;
	text-size-adjust: 100%;
 	 -webkit-text-size-adjust: 100%;
  	-moz-text-size-adjust: 100%;
  	-ms-text-size-adjust: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/*html {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}*/
main, article, aside, footer, header, nav, section, figcaption, figure, time {display:block;}  /* Using HTML5 elements in non-HTML5 browsers */ 
h1{font-size:125%} h2{font-size:120%} h3{font-size:115%} h4{font-size:110%} h5{font-size:105%} h6{font-size:100%}
/* h1{font-size:140%} h2{font-size:130%} h3{font-size:120%} h4{font-size:110%} h5{font-size:100%} h6{font-size:90%} */
a, a:hover, a:focus, a:active, a:visited{text-decoration:none; color:inherit;}
a{border-bottom:1px solid transparent; 
-webkit-transition:all 0.3s ease-out;
   -moz-transition:all 0.3s ease-out;
	-ms-transition:all 0.3s ease-out;
	 -o-transition:all 0.3s ease-out;
		transition:all 0.3s ease-out;
}
a:hover{border-color: inherit;}
button{font-size:104%;background-color:transparent;border:0;cursor:pointer;font-weight:600;}
/* html body class */
.html-body{}
/*-------------------------------- template object *--------------------------------*/
.bdchk *{border:1px solid #666;}
.sc-cover{width:100%; min-width:320px;}
.screensize{max-width:1270px; margin:0 auto;}
.list-all{position:absolute;right:0;opacity:0.6;} .list-all:hover{opacity:1;}
.block-head{padding-bottom:10px; position:relative;}
/* break point object */
.bp-main{width:100%; height:100vh;}
.bp-body{width:100%; height:100%; text-align:center; display: table;}
.bp-content{display:table-cell; vertical-align: middle; width:100%; max-width:1300px; height:auto; text-align:center;}
.bp-content img{width:100%; max-width:1300px; height:auto;}
.bp-button-entry{display:inline-block; margin:10px 10px;}
.bp-button-altentry{display:inline-block; margin:10px 10px;}
/* header object */
.hd{width:100%;} .hd-bg{background-image:url(../img/bg-head.jpg); background-repeat:no-repeat; background-size:cover; background-position:top;}
.hd-mnu{display:inline-block;position:absolute;right:0;top:2px;}
	.mnu-body{text-align:right;}
	.mnu-box{color:#FFF; display:inline-block;}
	.mnu-icon {width:34px; height:34px; line-height:34px; display:inline-block; text-align:center; vertical-align:middle; border:0;}
	.mnu-icon:hover{background-color:#506e81;}
	#gsc_box{width:320px; background-color:#333;display:none;background-color:#C63;}
	.gsc-icon:hover #gsc_box{display:inline-block;position:absolute;top:34px;right:0;z-index:99;}
.hd-logo{width:100%;/*background-color:#FFF;*/} 
	.logo-body{position:relative;padding-left:10px;padding-right:10px;} 
	.logo-imgs{display:inline-block;padding-top:15px;}
	.logo-img{width:80px;height:auto;padding-left:10px;padding-right:10px;vertical-align:bottom;display:inline-block;} 
	.logo-text{display:inline-block;}
	.logo-th{white-space: nowrap;font-size:140%;font-weight:bold;vertical-align:bottom;border:0;} 
	.logo-en{white-space: nowrap;font-size:100%;}
/* navigation bar */
.hd-nav{width:100%;}
	.nav-body{padding-left:10px;padding-right:10px;}
/* main object */
.mn{width:100%;}
	.mn-body{padding-left:10px;padding-right:10px;}
	.mn-date{color:#C00; white-space: nowrap;}
	.mn h3.menu-shadow{
		margin-bottom:10px; 
		display:inline-block;
}
/* footer object */
.ft{width:100%; border-top:1px solid #E1E1E1; /*background-color:#eaf5f9;*/
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,254,255,1) 0%, rgba(193,237,249,1) 100%);}
.ft-body{padding-left:10px;padding-right:10px;padding-top:15px;} .ft-body div{display:inline-block;vertical-align:top;}
.ft-mn{width:100%;}
.ft-contact{min-width:260px;width:26%;display:inline-block;vertical-align:top; margin-bottom:15px;}
	.contact-item{}
	.contact-hotline{font-size:120%;font-weight:600;color:#C00}
.ft-policy{ width:18%; margin-bottom:15px;} 
	.policy-body{padding-left:5px; width:100%; max-width:220px; text-align:left;}
	.ft-policy a {white-space:nowrap; display:inline-block; text-align:left; margin-left:5px;} 
	.ft-policy a:hover{margin-left:10px;}
	.ft-policy h4{text-align:left;}
.ft-menu{min-width:320px; width:35%; margin-bottom:15px;}
	.ft-menu h4{width:100%;}
	.menu-body{width:auto;}
	.menu-flex{display:flex; flex-wrap: wrap; align-content: flex-start; height: 200px;} 
	.menu-item{flex: 0 0 50%; width: 50%; white-space:nowrap; padding-left:5px; text-align:left; transition:padding-left 0.3s ease-out;} .menu-item:hover{padding-left:10px;}
.ft-lddnet{width:18%; margin-bottom:15px; text-align:center;}
	.lddnet-body{width:210px; border-radius:5px; padding:5px;background-color: #FFF;}
	.lddnet-body button{width:100%; padding:10px; color:#FFF; font-weight: 600;}
	.lddnet-content {width:100%; min-height:120px; height:auto; padding:5px; background: #FFF; border-radius: 5px; text-align:center;}
	.lddnet-content img{width:160px; height:auto;}
.ft-bottom{width:100%; padding-top:20px; padding-bottom:15px;}
	.bottom-body{display:flex; flex-wrap: wrap; padding-left:10px;padding-right:10px;}
/*.ft-poweredby{width:100%;background-color:#333}*/
	.poweredby-body{width:50%; display:inline-block;}
	.poweredby-txt{color:#FFF;}
	.poweredby-tool{color:#FFF; font-size:80%;}
	.validate-body{width:50%; display:inline-block; text-align:right; margin-top:15px;} 
	.validate-item img{margin-left:5px;}
#ft-fixed{position:fixed; bottom:0; left:0; width:100%; height:auto;z-index:99;}
	#ft-messenger{position:relative;width:100%;}
	#ft-messenger-img{position:absolute;width:auto;height:auto;bottom:0;right:15px;}
	#accept-pdpa{position:relative;width:100%;background-color:#289CC8;color:#FFF;padding:20px;text-align: center;border-top:1px solid #FFF;}
	#accept-pdpa a{ font-weight: 600; color:#000}
	#accept-pdpa button{padding:5px 15px 5px 15px; border-radius: 5px;}
	#ft-scrolltop{position:relative;width:100%;}
		#scrolltop{position:absolute;bottom:95px;right:15px;z-index:999;background-color:#333;display:none;color:#FFF;border:1px solid #CCC;width:32px; height:32px; line-height:32px; text-align:center; vertical-align:middle;opacity:0;}
		#scrolltop:hover{background-color:#666;} #scrolltop:active{background-color:#333;}


/*----------------------------------- class all -----------------------------------*/
/* other */
.no-bottom{border:0;}
.bg-item-1{
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 40%, #f2f2f2 100%);
	background: -webkit-linear-gradient(top,  #ffffff 40%,#f2f2f2 100%);
	background: linear-gradient(to bottom,  #ffffff 40%,#f2f2f2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
}
.bg-item-2{
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 26%, #ffffff 26%, #d5e8f7 100%);
	background: -webkit-linear-gradient(top,  #ffffff 26%,#ffffff 26%,#d5e8f7 100%);
	background: linear-gradient(to bottom,  #ffffff 26%,#ffffff 26%,#d5e8f7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d5e8f7',GradientType=0 );
}
.bg-section{
	background: #d5e8f7;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to bottom, #d5e8f7, #fef1e0);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to bottom, #d5e8f7, #fef1e0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
/*.bg-black{
  background-color: #41535f;
  background-image: url(fallback-gradient.svg); 
  background-image: -webkit-gradient(linear, bottom top, from(#41535f), to(#101821));
  background-image: -webkit-linear-gradient(top, #41535f, #101821);
  background-image: -moz-linear-gradient(top, #41535f, #101821);
  background-image: -o-linear-gradient(top, #41535f, #101821);
  background-image: linear-gradient(to top, #41535f, #101821);
}*/
.show{display:block;} .hide{display:none;} .disable{visibility:hidden;} .enable{visibility:visible;} .show_inline{display:inline-block;} 
.menu-shadow{border-radius:5px; padding-left:3px; padding-right:3px; box-shadow: rgba(15, 106, 122, 0.4) 0px 2px, rgba(19, 135, 156, 0.3) 0px 4px, rgba(22, 166, 190, 0.2) 0px 6px, rgba(26, 195, 226, 0.1) 0px 8px}
.box-shadow{border:1px solid #FFF; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
.round {
	border-radius: 4px;
	/* Prevent background color leak outs */
	-webkit-background-clip: padding-box; 
	-moz-background-clip:    padding; 
	background-clip:         padding-box;
}
.co-gray{color:#999 !important;}
.co-red{color:#B70000 !important;}
.co-blue{color:#1F85B6 !important;}
.co-dark-blue{color:#1B729C !important;}
.blue-line{background-image: linear-gradient(90deg, #1F85B6, transparent);border:0; height:2px;}
.bgg-blue {
	background: linear-gradient(270deg, #4fbed0, #4b8bd5, #17729d);
    background-size: 200% 200%;
    -webkit-animation: bgg-blue 10s ease infinite;
    -moz-animation: bgg-blue 10s ease infinite;
	-o-animation: bgg-blue 10s ease infinite;
    animation: bgg-blue 10s ease infinite;
}
@-webkit-keyframes bgg-blue{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes bgg-blue{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes bgg-blue{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

/*--------------------- button effect --------------------------*/
.btn1{display:inline-block; color:#333; border:1px solid #CCC; padding:5px 20px; background-color:#FFF; font-weight:600; border-radius:5px; box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;}
.btn1:hover{background-color:#F5F5F5; border:1px solid #FFF; color:#000;} .btn1:link{color:#333;}

.bg-sizing {
  background-size: 110%;
  background-repeat: no-repeat;
  background-position: 0%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 300ms ease-in-out;
}
.bg-sizing:hover {
  background-position: 100%;
}

.btn-anglebg {
  color: #FFF;
  border: 1px solid #2295cc;
  background-image: -webkit-linear-gradient(32deg, #2295cc 49%, transparent 50%);
  background-image: linear-gradient(32deg, #2295cc 49%, transparent 50%);
  background-size: 500px;
  background-repeat: no-repeat;
  background-position: 0%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 300ms ease-in-out;
  cursor: pointer;
}
.btn-anglebg:hover {
  background-position: 100%;
  color: #000;
}

.btn-anglebg2 {
  color: #FFF;
  border: 1px solid #2295cc;
  background-image: -webkit-linear-gradient(170deg, #2295cc 49%, transparent 50%);
  background-image: linear-gradient(170deg, #2295cc 49%, transparent 50%);
  background-size: 1000px;
  background-repeat: no-repeat;
  background-position: 0%;
  -webkit-transition: background 200ms ease-in-out;
  transition: background 200ms ease-in-out;
  cursor: pointer;
}
.btn-anglebg2:hover {
  background-position: 100%;
  color: #000;
}
.btn-shadow {
  border: 2px solid #3c73ff;
  background-color: #3c73ff;
  border-radius: 20px;
  color: #fff;
  transition: .3s;
}
.btn-shadow:hover {
  box-shadow: 8px 8px #99bdff;
  transition: .3s;
}

.btn-gradient{
  width: 400px;
  border-radius: 5px;
  background-color: #F4FAFF;
  background: #F4FAFF;
  background-image: -moz-linear-gradient(top, #fff 0%, #F4FAFF 100%); 
  background-image: -webkit-linear-gradient(top, #fff 0%,#F4FAFF 100%); 
  background-image: linear-gradient(to bottom, #fff 0%,#F4FAFF 100%); 
  background-size: 600px;
  background-repeat: no-repeat;
  background-position: 0%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 300ms ease-in-out;
}
.btn-gradient:hover {
  background-position: -200%;
  transition: background 300ms ease-in-out;
}