@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,700|Playfair+Display');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;700&display=swap');

body {
    background: rgb(177,239,255);
    background: linear-gradient(180deg, rgba(177,239,255,1) 0%, rgba(177,239,255,1) 15%, rgba(135,216,243,1) 50%, rgba(81,186,227,1) 65%, rgba(32,159,213,1) 100%);;
    color: #414042; font-family: 'Kanit', sans-serif;
    font-style: normal;
     overflow-x: hidden;	
}

html, body {
 width: 100%;
 /*height: 100%; */
}


h1,h2,h3,h4,h5,h6 {
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0px;
}

h1 {
  color: #3d3d3f;
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  line-height: normal;
}

h2 {
  color: #575757;
  font-size: 35px;
  line-height: normal;
}

h3 {
  color: #d7b065;
  font-size: 16px;
  font-weight: bold;
  line-height: 32px;
  letter-spacing: 6px;
  text-transform: uppercase;
}

h4 {
  color: #797979;
  font-size: 20px;
  font-weight: 400;
}

p {margin: 0px!important;}

@media (min-width: 1200px){
.container {
    width:1000px!important;
}
}
.container{margin-right:auto; margin-left:auto; z-index: 10; }
.row{z-index: 11;}




/*---------------------------------------
  General               
-----------------------------------------*/

html{
  -webkit-font-smoothing: antialiased;
}

a {
  color: #575757;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none !important;
}

a:hover, a:active, a:focus {
  color: #000000;
  outline: none;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.section-title {
margin: 0; padding: 0;
min-height: 52px;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(233,251,255,1) 25%, rgba(189,241,255,1) 50%, rgba(117,206,238,1) 75%, rgba(38,164,215,1) 100%);
  
}


footer{ 
  z-index: 10;
  position: relative;
  padding: 20px 0px 20px 0px;
  
}

/*---------------------------------------
  Pre loader section              
-----------------------------------------*/

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  background: none repeat scroll 0 0 #ffffff;
}

.spinner {
  border: 1px solid transparent;
  border-radius: 5px;
  position: relative;
}

.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 65px;
  height: 65px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 1px solid #000000;
  border-top-color: #f9f9f9;
  animation: spinner .9s linear infinite;
}

@-webkit-@keyframes spinner {
  to {transform: rotate(360deg);}
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}

/*top*/
#top {
  background: url('../images/images-pcd-01.png') no-repeat ;
  background-position: bottom center;
	
  /*background-size: cover;
  border-radius: 5px;*/
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /*-webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
   align-items: center;*/
  height: 166px;
 /* text-align: center;
  position: relative;*/
  margin: 0px 0px 0 0px;
  position: relative;
}


.logo{ width: 255px; height: auto;}

#lang-top
{ height:75px;
  width:74px; 
  position: absolute;
  top: 0px;
  right: 0;
  z-index: 5;
}
#lang-top a{ 
 float:left;
 padding-top:25px;
 height:55px;
 width:37px; 
 display: block; 
 background: url('../images/bg-lang.png') no-repeat ;
 background-position: bottom center;
 background-color: #84d0ea;
 color:rgba(0,0,0,1.00) ;
 text-transform: uppercase;
 text-align: center;
 font-weight:300;
}

#lang-top a:hover{ background-color: #44a0c4;  height:70px; color:rgba(0,0,0,1.00) ;}

#lang-top a.cere{
background-color: #0072b0; height:55px;
color:rgba(255,255,255,1.00);
} 

.padtop{ padding-top: 25px;}
#top-in {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /*-webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
   align-items: center;*/
  height: 200px;
 text-align: center;
  position: relative;
  margin: 0px 0px 0 0px;
  position: relative;
}



/*---------------------------------------
  text top section              
-----------------------------------------*/

.box-top{background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(233,251,255,1) 25%, rgba(189,241,255,1) 50%, rgba(117,206,238,1) 75%, rgba(38,164,215,1) 100%);}



#home {
  background: url('../images/home-bg.jpg') 50% 0 repeat-y fixed;
  background-size: cover;
  background-position: center center;
  border-radius: 5px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
   align-items: center;
  height: 75vh;
  text-align: center;
  position: relative;
  margin: 82px 12px 0 12px;
}

.home-wrapper {
  background: rgba(250,250,250,0.8);
  padding: 32px 12px;
}




/*---------------------------------------
  Work section              
-----------------------------------------*/

#work {
}



#head-top{ 
 /*display: -webkit-box;
  display: -webkit-flex;*/
  display: -ms-flexbox;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;}
#head-top .col-md-8{padding-top: 15px; padding-bottom: 15px;}
#head-top .col-md-4{text-align: right; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; border-top:0px solid #FFFFFF;}

.text-c{ text-align: center;}
.border-r01{ border-right: 1px solid #707070; border-bottom: 0px dashed #707070;}
.text-count{ text-align: center; font-size:10px;}
.text-cunnum{font-size:25px!important; color:#0077ba; }
.nopd{ padding: 0px!important}
.treport{font-size:23px; margin-top: 0px!important; margin-bottom: 0px!important; color: #0274b3; padding-top:13px; padding-bottom: 10px; padding-left: 15px; }
.tfer{font-size:19px; color: #3e3e40; font-weight: 500; padding-top:20px; padding-bottom:20px;}
.bg-green{ background-color: #8abd44; }
.bg-white{ background-color: #f9f9f9;}
.tdate{ min-height:50px; font-size:14px; color: rgba(255,255,255,1.00);}
.tceter{ text-align: center!important;}
.bg-grey{ background-color: #e6e7e9;}
.pdtop2{ padding-top: 20px; padding-bottom: 20px;}
.logo3{ padding-top: 70px; padding-bottom: 20px; width:503px; margin:0 auto;}
.bg-white-01{background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.49763655462184875) 50%, rgba(255,255,255,0.7) 100%); z-index: 30;}
.cloud-btn{width:421px; height: 273px; position:relative; margin-left:auto; margin-right:auto; font-family: 'Kanit', sans-serif;}
.cloud-btn a{ color: rgba(38,38,38,1.00); font-size:17px; line-height:19px; font-weight: 300;} .cloud-btn a:hover{ color: #0072b0;}
.cloud-btn p{ position: absolute; text-align: center; width:100%; bottom:48px;}
.pd80{padding-bottom:80px; padding-top:80px; }
.cloud-btn img{width:421px; height: 273px;}
.pd20{padding-top:0px; padding-bottom: 0px;}
/*.bg-cloud{ background:url('../images/images-pcd-img06.png') no-repeat bottom center;background:url('../images/bg-top.png') no-repeat top center;}*/
.bg-topc{ 
  background-image: url("../images/bg-top.png"), url("../images/images-pcd-img06.png");
  background-repeat: no-repeat, no-repeat;
  background-position:top center, bottom center; }
.wimg {width: 100%; height: auto; }

@media (max-width: 768px) {
	
.wimg {width: 226px; height: 48px;}	
}

@media (max-width: 580px) {
.wimg {width: 226px; height: 48px;  }		
}

@media (max-width: 360px) {
 .logo{ width: 90%; padding-top: 15px; }
}



.air-level01{ color: #35c0df!important; font-weight: 500; text-align:left;} 
.air-level02{ color: #3ad21f!important; font-weight: 500; text-align:left;}
.air-level03{ color: #ffc30e!important; font-weight: 500; text-align:left;}
.air-level04{ color: #ff5e00!important; font-weight: 500; text-align:left;}
.air-level05{ color: #e91c21!important; font-weight: 500; text-align:left;}

.air-level01 span, .air-level02 span, .air-level03 span, .air-level04 span, .air-level05 span {width:40px; display: inline-flex; }
.air-level01 img, .air-level02 img, .air-level03 img, .air-level04 img, .air-level05 img { margin-left: 5px; width: 42px; height: auto;}


#table01 {
  font-size: 16px;
  border-collapse: collapse;
  width: 100%; border-color: #e6e7e9;
}

#table01 td, #table01 th {
  border:1px solid #c8c9cb;
  padding:13px 20px;
}

#table01 th {background-color: #D1D3D4;}

#table01 tr:nth-child(even){background-color:#e0e3e8;}
#table01 td:ntd-child(even){ align:center;}

#table01 tr:hover {background-color: #e0e3e8;}

#table01 th {
  padding-top: 12px;
  padding-bottom: 12px; padding-left:15px;
  text-align: left;
  background-color: #d2d3d5;
	color: #202020;}


.navicon {
  width: 100%;
 /* overflow: auto; */
}

.navicon a {
  float: left; height:130px;
  padding:20px 10px 15px 10px;
  color: rgba(0,0,0,1.00);
  text-decoration: none;
  font-size: 14px; line-height: 15px;
  width:20%; /* Four links of equal widths */
  text-align: center;
 display: block; 
}
.navicon p {height:15px; }
.navicon img{ padding-bottom:5px; padding-top: 5px;  }
.navicon a:hover {
  background-color: #c6c6c6;
}

hr.new1 {z-index: 12!important;
 background: url("../images/bg-01.jpg") top center;
 height:2px;
 border-top: 0px solid #eee; }

.copyr{ font-size:5px!important; line-height:10px; padding-top: 5px;}

/*---------------------------------------
  Footer section              
-----------------------------------------*/

footer {
  background: #FFFFFF;
  color: #414042; font-family: 'Kanit', sans-serif;}
footer p{ padding: 0; margin: 0}

footer h4 {
  color: #f9f9f9;
}


footer a {
  color: #aaa;
}

footer a:hover {
  color: #fff;
}


.ftext{color: #fff;}

footer .col-md-7 .support-cus{ font-family: 'Kanit', sans-serif;
  padding-top:0px; font-size:16px;  line-height: 22px; font-weight:300; text-align: center; min-height:70px; padding-left: 10px; padding-right:10px; }

footer .col-md-4 .support-cus:last-child {
  padding-top: 12px;
}

footer .col-md-4 .support-cus p {
  line-height: 20px;
}



footer .dash-line {
  border-top: 1px solid #292929;
  margin-top: 62px;
  padding-bottom: 52px;
  position: relative;
}


/*---------------------------------------
  Mobile Responsive styles              
-----------------------------------------*/

@media (max-width: 980px) {

 h1 {font-size: 30px;}

 #about .about-thumb {
  padding-left: 0px;
 }

 #work .work-thumb {
  margin-top: 25px;
 }

}

@media (max-width: 768px) {
 .container{margin-right:5px; margin-left:5px; }
  #top {
  background: url('../images/images-pcd-01.png') no-repeat ;
  background-position: bottom left;}
  h1 { font-size: 27px; }
  h2 {font-size: 25px;}	
  footer .col-md-3 { margin-bottom:15px; padding-bottom: 15px; }
  footer .col-md-7 .support-cus{ font-size:16px;  }	
  footer .col-md-7 {   margin-bottom:15px; padding-bottom: 15px; }	
 .border-r01{ border-right: 0px solid #707070; border-bottom: 1px dashed #e2e5eb;}
 #head-top .col-md-4{text-align: left; padding-right: 0px; border-top:1px solid #FFFFFF;}
.treport{font-size:18px; line-height: 20px; font-weight: 500; }	#lang-top{ right:15px; }	
.logo3{ padding-top: 70px; padding-bottom: 20px; width:80%; margin:0 auto;  }	
.cloud-btn{width:320px; height:208px;} .cloud-btn img{width:320px; height:208px;}
.cloud-btn p{ position: absolute; text-align: center; width:100%; bottom: 35px;}
.pd20{padding-top:20px; padding-bottom: 20px;}

 
}

@media (max-width: 580px) {

#top-in{ height:150px; }
.navicon a {padding: 20px 3px 15px 3px; font-size:13px; line-height: 15px; } .navicon img{ padding-bottom:10px; width:35px; height:auto;}	
.navicon p {height:25px; }
.air-level01 span, .air-level02 span, .air-level03 span, .air-level04 span, .air-level05 span { width:100%; display: block;}		
.air-level01 img, .air-level02 img, .air-level03 img, .air-level04 img, .air-level05 img { margin-left:0px; width: 30px; height: auto;}	
.air-level01, .air-level02, .air-level03, .air-level04, .air-level05{text-align: center;}
	
#table01 td, #table01 th { padding:8px 10px;}
	#table01 { font-size: 14px;	}
.cloud-btn{width:280px; height:182px;} 
.cloud-btn a{ font-size:14px; line-height:15px;}	
.cloud-btn img{width:100%; height:auto;}
.cloud-btn p{ position: absolute; text-align: center; width:100%; bottom: 30px;}
.pd80 {
    padding-bottom:40px;
    padding-top:15px;}	
}

@media (max-width: 360px) {
  #top-in{ height:120px; }

}



/*

.table-scrollable{
	
	overflow-x:auto;
   overflow-y:auto;
	max-height: 120px;  
}

.table-scrollable thead,
.table-scrollable tbody {
  display: block;
}

.table-scrollable tbody {
overflow: auto; 
  height:300px; 
}

.table-scrollable thead tr,
.table-scrollable tbody tr {
  display: flex;
}

.table-scrollable thead tr th,
.table-scrollable tbody tr td {
  flex-basis: 100%;
  border: 1px solid #ddd;
}

@media (max-width: 768px) {
  .table-scrollable {
width:700px; overflow-y:visible;
  height:300px;
}

}

@media (max-width: 580px) {


}
@media (max-width: 360px) {


}*/