

body{
	margin:0;
	font-family: 'Sarabun', Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#333;
	}
input, button, select, textarea{font-family: 'Sarabun', Arial, Helvetica, sans-serif;}


h1,h2,h3,h4,h5,h6{font-family: 'Sarabun', Arial, Helvetica, sans-serif;}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	
}
img {
	border: 0;
	max-width: 100%;
	vertical-align:middle;
}

a { text-decoration:none;}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.clear {
	clear: both;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   color: #888;
   
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
:focus {
  outline: 0;
  outline:0;
  outline-offset:0;
}
a:hover,
a:active {
  outline: 0;
}
button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}
button,
input {
  *overflow: visible;
  line-height: normal;
}
button:-moz-focus-inner,
input:-moz-focus-inner {
  padding: 0;
  border: 0;
}


button:focus,
input:focus,
select:focus,
textarea:focus {
 outline: 0;
}
table { border-collapse:collapse; border-spacing: 0; border-padding:0;}

.pull-left {
	float: left !important;
}
.pull-right {
	float: right !important;
}	
.hiden { display:none !important;}	
.text-transform{text-transform:uppercase !important;}
.text-transform-none{text-transform:none !important;}		
.row {
	margin-left: -15px;
	margin-right: -15px;
}
.row:after {
	content:"";
	clear:both;
	display: block;
	}
.col-3, .col-6, .col-12, .col-4, .col, .col-2, .col-8  {
	float:left;
	padding-left:15px;
	padding-right:15px;
	position:relative;
	}
.col-2 {
  width: 16.66666667%;
}
.col-8 {
  width: 66.66666667%;
}	
.col{
	width:20%;	
	}	
.col-3{
	width:25%;	
	}
.col-4{
	width:33.3333%;	
	}
.col-6{
	width:50%;	
	}
.col-12{
	width:100%;	
	}

.red { color: #FF0000 !important;}
.text-center {
	text-align:center !important;
	}

	
.modal-backdrop-s.show { z-index:9; display:block;}
.modal-backdrop-s {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background-color: transparent;
	display:none;
	opacity: .7;
}				
.container {
	padding:0 15px;
	width:100%;
	margin:auto;
	max-width:1140px;
	}

.full-width {
	width:100% !important;	
	display:inline-block;
	}			
.icon-back-top {
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 60px;
    right: 10px;   
    cursor: pointer;
    z-index: 999;
    display: none;
	font-size: 22px;
	color:#fff;
	line-height:40px;
	text-align:center;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	background: linear-gradient(317.47deg, #1A91E7 6.11%, #135EAC 87.01%);
	opacity: 0.95;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}

/*header*/
.home .header{ background-color: transparent; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0);}
.header {
	-webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  }

.header {
	width:100%;
	float:left;
	height:100px;
	background-color: #fff;
	position: fixed;
	z-index:99;
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25);
	}

.header .logo{
	width:80px;
	height:80px;
	background:url(../images/logo.png) no-repeat 0 0;
	background-size: contain;
	float:left;
	text-indent:-9999px;
	
	}
.header .box-logo {
	float:left;
	margin-top:15px;
	}
.header .box-logo .slogan {
	float:left;
	font-size:30px;
	line-height:80px;
	color:#3fa9f5;
	margin-left:10px;
	}
.home .header .box-logo .slogan {
	color:#fff;
	}	
.header .box-logo h1 { margin:0;font-size:30px;}	
 .header.fixed {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 10;
	background-color: #fff;
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25);
	height:60px;
} 			
.header.fixed .logo{
	 background:url(../images/logo.png) no-repeat 0 0;
	background-size: contain;
	height:40px;
	width:40px;
	 }	
.header.fixed  .box-logo {
   
    margin-top: 10px;
}	 
 .header.fixed   .box-logo .slogan{ line-height:40px; font-size:14px;color:#3fa9f5;}
  .header.fixed   .box-logo .slogan h1 {font-size:14px;}	 	
.home .header .logo {	
	background:url(../images/logo.png) no-repeat 0 0;
	background-size: contain;
	}
.logo  h1 { margin:0; text-indent:-9999px;}		
.button-menu { display:none;}
.nav {
	float:right;
	margin-top:35px;
	}
.header.fixed .nav {
    float: right;
    margin-top: 13px;
}	
.menu-top {	
	margin:0;
	padding:0;
	float:left;
	
	}


.menu-top li {
	float:left;
	position:relative;
	list-style:none;	
	margin:0 5px;
	font-weight: normal;
	font-size: 14px;
	text-transform: uppercase;	
	
	}
.menu-top li:last-child { margin-right:0;}	
.menu-top li a {
	display:block;
	padding:5px 15px;
	color: #333;
	line-height:24px;
	}
.home 	.menu-top li a { color:#ddd;}
.header.fixed .menu-top li a { color:#333;}
.menu-top li:hover {
	background: linear-gradient(160.91deg, #3fa9f5 18.98%, #FFCE51 111.98%);
	border-radius: 5px;
	}	
.menu-top li:hover a,  .header.fixed .menu-top a:hover,  .header.fixed .menu-top li:hover a{ color:#fff;}	
.menu-top .active a, .header.fixed .menu-top .active a, .home .menu-top .active a {		
	color:#fff;
	border-radius: 5px;
	background: linear-gradient(160.91deg, #3fa9f5 18.98%, #FFCE51 111.98%);
	}
.menu-top .sub-menu {
	display:none;
	position:absolute;
	left:0;
	top:34px;
	z-index:10;
	background-color:#fff;
	width:250px;
	margin:0;
	padding:10px 0;
	border-radius: 5px;

	}
.menu-top .sub-menu li {
	text-transform:none;
	width:100%;
	margin:0;
	padding:0;
	line-height:20px;
	}
.menu-top .sub-menu li a { color:#333;}	
.header.fixed .menu-top li .sub-menu li a { color:#333;}
.nav .menu-top .sub-menu li:hover { background: none transparent;}
.menu-top .sub-menu li a:hover { color:#ff6600;}		
.menu-top li:hover .sub-menu{ display:block}		
.home .content{
	padding-top:0;
	
	}	
.content {
	width:100%;
	display:inline-block;
	padding-top:150px;
	}
.heading {
	margin:0;
	position:relative;	
	font-size: 40px;
	line-height: 48px;
  	padding-top:70px;
	/*margin-bottom:30px;*/
	text-align:center;
	    font-weight: normal;
		color:#333;
	}
.heading:before {
	content:'';
	position:absolute;
	top:0;
	left:50%;
	height:70px;
	width:2px;
	background: linear-gradient(91.42deg, #3fa9f5 18.98%, #FFCE51 111.98%);
	}

.relative {position:relative;}
.b-column, .c-column {
    float: left;
    min-height: 300px;
	width:100%;
}
 .c-column { font-size:16px;
 line-height:22px; color:#333;}
 .c-column h2,  .c-column h3 {color: #2483C5; margin-top:0; font-size:25px; font-weight:600;}
/*footer*/
.footer {
	width:100%;
	background: #333;
	position:relative;
	padding-top:40px;
	text-align:center;
	}
.footer:before {
	content:'';
	width:100%;
	height:10px;
	left:0;
	position:absolute;
	top:0;
	background: linear-gradient(179.66deg, #3fa9f5 18.98%, #FFCE51 111.98%);
	}
.footer .logo {
	width:220px;
	height:45px;
	display:inline-block;
	background:url(../images/logo.png) no-repeat  center 0;
	background-size: contain;
	text-indent:-99999px;
	margin-bottom:30px;
	}	
.footer .text {
	margin:0;
	font-weight: normal;
	font-size: 16px;
	line-height: 19px;
	text-align: center;
	color:rgba(255,255,255,0.4);
	position:relative;
	padding-bottom:30px;
	}
.footer .text:before {
	content:'';
	position:absolute;
	left:50%;
	height:4px;
	width:50px;
	background: linear-gradient(174.73deg, #C49A67 18.98%, #FFCE51 111.98%);
	border-radius: 2px;
	bottom:0;
	margin-left:-25px;
	}
.footer .Address {
	margin:30px 0 40px 0;
	font-weight: normal;
	font-size: 16px;
	line-height: 19px;
	text-align: center;
	color: #FFFFFF;
	}
.footer .net-work {
	display:inline-block;
	width:100%;
	}
.footer .net-work .icon {
	height:50px;
	width:50px;
	display:inline-block;
	border: 2px solid #FFFFFF;
	box-sizing: border-box;
	margin:0 10px;
	text-align:center;
	line-height:46px;
	font-size:18px;
	color:#fff;	
	border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
cursor:pointer;
	}
.footer .net-work .icon:hover {
	background: #FFFFFF;
	
	}
.footer .net-work .icon:hover i {
	background: linear-gradient(113.43deg, #C49A67 18.98%, #FFCE51 111.98%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}													
.footer .copyright {
	width:100%;
	display:inline-block;
	padding:10px 0;
	text-align:center;
	color:#fff;
	font-size:14px;
	background:#3fa9f5;
	margin-top:15px;
	}
.box-link {
	width:100%;
	display:inline-block;
	background: #F0F0F0;
	padding-bottom:30px;
	margin-top:40px;
	}
.box-link .item {
	width:33.333%;
	float:left;
	padding:0 15px;
	}
.box-link .alink {
	margin:8px 0;
	font-size:15px;
	font-weight:normal;
	position:relative;
	padding-left:10px;
	
	}
.box-link .alink a { color:#333; display:block;}	
.box-link .alink a:hover { color:#ff6600;}	
.box-link .alink:before {
	content:'';
	position:absolute;
	top:8px;
	left:0;
	height:3px;
	width:3px;
	background:#3fa9f5;
	}		
			
/*end pc*/
@media only screen and (min-width: 960px) {
	.b-column {
    width: 67.12223%;
    padding-right: 15px;
}
.c-column {
    width: 32.87777%;
    padding-left: 15px;
    
}
	}

@media only screen and (min-width: 768px) and (max-width: 980px){
	.heading { font-size:25px;padding-top: 50px;}
	.heading:before { height:40px;}
	.footer { padding:25px 0;}
	.footer .logo {
    width: 180px;
    height: 25px;
    background: url(../images/Logo-white.svg) no-repeat 0 0;
    background-size: contain;
    margin-bottom: 10px;
	margin-top:10px;
}
.footer .text { 
    padding-bottom: 20px;
}
.footer .Address {
    margin: 20px  0;
    font-size: 14px;
}
.header .logo {
	width:50px;
	height:50px;
	margin-top:10px;
	
	}	
.header .box-logo h1 { font-size:18px;}
.button-menu{ margin-top:20px;}
.header.fixed .button-menu{ margin-top:0px;}
.header.fixed .menu-top li a {
    color: #fff;
}
.menu-top .active a, .header.fixed .menu-top .active a{ background:none;}
	 }	 
@media only screen and (max-width:960px){
	.header { height:60px; padding-top:9px;}
	.header.fixed {
		padding-top:10px;
		}

.header.fixed .button-menu .icon-menu {
    color: #ff6600;
}	
.show .header  {background: #1D1F48 !important;}
	.button-menu {
		z-index:2;
		border:0;
		padding:0;
		display:block;
		float:right;
		background-color:transparent;
		height:40px;

	}

.home .button-menu .icon-menu {color: #fff;}

.button-menu .icon-menu {
	font-size: 30px;
	 color:#3fa9f5;
	}
.button-menu .icon-menu:before {
	margin:0;
	}	
.button-menu .icon-menu.show:before  {
	content: '\e800';
	}
.nav {
	width:100%;
	position:absolute;
	z-index:10;
	left:0;
	top:0;
	right:0;
	bottom:0;
	transition: -webkit-transform ease 0.4s;
    transition: transform ease 0.4s;
	opacity:0;
	 -webkit-transform: translatex(-100%);
    transform: translatex(-100%);	
	overflow:auto;
	}
.show { overflow:hidden;}	
.show .header .nav {
	opacity:1;
	-webkit-transform: translatex(0px);
    transform: translatex(0px); 
	position:fixed;
	margin-top:60px;
	background: #313262;
	overflow:auto;
	padding-bottom:80px;
	}	
.show  .header.fixed   .logo {
	
	}			
.menu-top {	
	width:100%;
	float:left;
	padding-top:10px;	
	position:absolute;
	left:0;
	top:0;
	height:100%;
	bottom:0;
	overflow:auto;
	
	}


.menu-top li {
	width:100%;
	float:left;
	position:relative;
	list-style:none;
	text-align: center;
	margin:0;
	padding:10px 0;
	
	}

.menu-top li a {
	padding:10px;
	display:block;
	font-size:16px;
	line-height:19px;
	padding:10px 0;
	font-weight:bold;
	position:relative;
	color:#fff;
	}

.menu-top li .sub-menu a { font-weight:normal; font-size:14px; line-height:20px; padding:5px 10px;}

.menu-top li a:hover, .menu-top .active a {
    background:  none;
    border-radius: 0;
}
.menu-top li a:hover:before, .menu-top .active a:before {
	content:"";
	height:2px;
	width:20px;
	background: linear-gradient(173.42deg, #C49A67 18.98%, #FFCE51 111.98%);
	border-radius: 14px;
	left:50%;
	margin-left:-10px;
	bottom:0;
	position:absolute;
	}	
.content {
   
    padding-top: 90px;
}
.show .header .logo {
    height:40px;
	width:40px;
	margin-top:0;
}
.show  .header .box-logo { margin-top:0;}	
.show  .header .box-logo h1 {
    font-size: 16px;
	line-height:40px;
}
.show .button-menu { margin-top:0;}
.home .header.fixed .logo, .header.fixed .box-logo { margin-top:0;}
.menu-top .sub-menu {
	position:relative;
	left:auto;
	top:auto;
	width:240px;
	display: inline-block;
	}
.heading { padding-top:40px; font-size:22px;  margin-bottom:10px; line-height:30px;}	
	} 
@media only screen and (max-width: 767px){
	.bg-menu { display:none;}
	.container {
		padding:0 10px;
		}
.header .logo {
	width:50px;
	height:50px;
	}	
.header .box-logo .slogan { line-height:50px; font-size:20px;}
.header .box-logo .slogan  h1 { font-size:20px;}
.header .box-logo { margin-top:0; }	
.heading { padding-top:20px; font-size:22px; line-height:26px; margin-bottom:10px;}
.heading:before { display:none;}
.box-link {
	width:100%;
	display:inline-block;
	background: #F0F0F0;
	padding-bottom:30px;
	margin-top:40px;
	}
.box-link .item {
	width:100%;
	float:left;
	padding:0 10px;
	}
.box-link .row {
	margin:0 -10px;
	}		
.footer {

    padding-top: 25px;  
}
.footer:before {
    
    height: 5px;
}
.footer .logo {
	width:137px;
	height:40px;
	}
.footer .text {
    font-size: 12px;
    line-height: 14px;
    padding-bottom: 10px;
}	
.footer .Address {
    margin: 20px 0 25px 0;
    font-size: 12px;
    line-height: 14px;
}
.footer .net-work .icon {
	height:40px;
	width:40px;
	border: 1px solid #FFFFFF;
	line-height:38px;
	font-size:14px;
	}
.header.fixed .menu-top li a { color:#fff;}	
.menu-top .active a, .header.fixed .menu-top .active a { background:none;}
	 }

.news-detail h1 {
	margin: 0;
}

.lblMessage, .field-validation-error {
	color: red;
}
.not-allowed, .disabled {
	background: #ccc !important;
	cursor: not-allowed;
}