@charset "utf-8";
/* CSS Document */

@font-face {
    font-family:'PSL162';
    src: url('../fonts/PSL162.eot');
    src: url('../fonts/PSL162.eot?#iefix') format('embedded-opentype'),
         url('../fonts/PSL162.woff') format('woff'),
         url('../fonts/PSL162.ttf') format('truetype'),
         url('../fonts/PSL162.svg#thaisans_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family:'thaisans_neueregular';
    src: url('../fonts/thaisansneue-regular-webfont.eot');
    src: url('../fonts/thaisansneue-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/thaisansneue-regular-webfont.woff') format('woff'),
         url('../fonts/thaisansneue-regular-webfont.ttf') format('truetype'),
         url('../fonts/thaisansneue-regular-webfont.svg#thaisans_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{
	margin:0px;
	padding:0px;	
	font-family:Tahoma, Geneva, sans-serif;
	background:#fff;
}


h.a1{font-size:16px; color:#fff; }
h.a2{ font-size:2.6em; color:#fff; font-weight:700; font-family: 'thaisans_neueregular'; }
h.a3{font-size:26px; color:#000; font-weight:bold; }
h.a4{color:#fff; }
h.a5{font-size:60px; color:#ff076b; line-height:50px; letter-spacing:1px; font-weight:bold; font-family: 'PSL162';}
h.a6{font-size:60px; color:#323232; letter-spacing:1px; font-family: 'PSL162';}
h.a7{font-size:42px; color:#323232; letter-spacing:1px; font-family: 'PSL162';}
h.a8{font-size:80px; color:#323232; letter-spacing:0px; }



a:link {text-decoration:none; color:#fff; }
a:hover {text-decoration:none; color:#f6ff00; }

img{ max-width:100% ; background-size:100% auto; }

/* Menu Button */
.section-btn{ width:100%; height:70px; overflow:hidden; position:fixed; z-index:10; }
.logo-btn{ width:auto; height:auto; overflow:hidden; float:left; }
.menu-btn {
  width: 100%;
  height:60px;
  padding-top:5px;
  margin-bottom: 0px;
  background: #fff;
  color: #000;
  text-align: right;
  font-size:30px;
  cursor: pointer;

}


/* Menu*/
.section1{ 
	width:100%; height:70px; overflow:hidden; 
	background:rgba(255, 255, 255, 0.9); text-align:center; 
	position:inherit; z-index:10; border-bottom:1px solid #cdcdcd;
}
.sub-section1{ width:1000px; height:auto; overflow:hidden;  margin:auto; text-align: center; }
.logo{ width:140px; height:68px; overflow:hidden; display:block; float:left; margin-right: 50px; }
.menu-main{ width:60%; height:70px; overflow:hidden; display:block; padding:0px;   }
.bt{ 
	width:auto; height:100%; float:left; text-align:center; 
	font-size:30px; margin-left:30px; list-style-type:none; 
	font-family: 'PSL162';	color: #000; cursor: pointer;
}

.bt{
	position: relative;
	transition:600ms;
	z-index: 20;
}
.bt:after{
	content: attr(data-hover);
	position: absolute;
	left: 0;
	bottom: 0;
	transform:rotateX(90deg);
	-webkit-transform:rotateX(90deg);
	-moz-transform:rotateX(90deg);
	-o-transform:rotateX(90deg);
	-ms-transform:rotateX(90deg);
	transition:300ms;
	opacity: 0;
	color: #035584;
	height: 0;
}
.bt:hover:after{
	transform:rotateX(0deg);
	-webkit-transform:rotateX(0deg);
	-moz-transform:rotateX(0deg);
	-o-transform:rotateX(0deg);
	-ms-transform:rotateX(0deg);
	top: 0;
	opacity: 1;
	height: 100%;
}
.bt:hover{
	color: transparent !important;
}
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin:0;
    padding:0;
    text-decoration: none;
    list-style-type: none;
    outline: none;
}

.dropdown { 
	position:static; margin: auto; display:block; 
	float: left; width: auto; 
}

.dropdown-content {  
	display: none; position:absolute; background-color: #f9f9f9; 
	min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 20; margin-top: 30px; 
}

.dropdown-content a { 
	color: black; padding: 12px 16px; 
	text-decoration: none; display: block; 
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown:hover .dropbtn {
	background-color: #3e8e41;
}


/* Three Line Menu */
.box-shadow-menu {
  position: relative;
  padding-right: 1.25em;
}
.box-shadow-menu:before {
  content: "";
  position: absolute;
  right: 10px;
  top: 0.50em;
  width: 1em;
  height: 0.15em;
  background:#000;
  box-shadow: 
    0 0.25em 0 0 #000,
    0 0.5em 0 0 #000;
}

.section2{ width:100%; height:730px; margin:0px auto; margin-top:0px; overflow:hidden; display:block;}



.t-page01{ 
	width:90%; height:auto; overflow:hidden; display:block; 
	margin:auto; margin-top:100px; margin-bottom: 20px;	
}

.t-big01{ 
	width:auto; height:auto; overflow:hidden; margin:auto;  
	font-size:120px; color:#FFF; text-shadow: 1px 1px 1px #000; 
	font-family: 'PSL162';  
}

.t-small01{ 
	width:auto; height:auto; overflow:hidden; margin:auto; 
	font-size:50px; color:#FFF; text-shadow: 1px 1px 1px #000; 
	font-family: 'PSL162'; 
}

.t-small02{ 
	width:auto; height:auto; overflow:hidden; margin:auto; 
	font-size:16px; color:#FFF; line-height:1.8;
}

.t-contact-box{ 
	width: 90%; height: auto; overflow: hidden; display: block; 
	margin: auto; margin-bottom: 20px; font-size: 40px; text-align: center; 
	color: #fff; text-shadow: 1px 1px 1px #000; font-family: 'PSL162'; 
}

.info-center{ 
	width: 60%; height: auto; overflow: hidden; 
	display: block; margin: auto; text-align: center;
	line-height:0.8; padding:25px 0px; 
}

.info-left{ 
	width: 50%; height: auto; overflow: hidden; 
	display: block; margin: auto; margin-top: 10px; text-align: left; float: left; 
}

.info-right{ 
	width: 50%; height: auto; overflow: hidden; 
	display: block; margin: auto; margin-top: 10px; text-align: left; float: left;
}

.info-small{ 
	width: 20%; height: auto; overflow: hidden; 
	display: block; margin: auto; margin-top: 10px;
	text-align: center; float: left;
}

.info-web{ 
	width: 30%; height: auto; overflow: hidden; 
	display: block; margin: auto; margin-top: 10px; margin-left: 15px;
	text-align: center; float: left;
}



.wrapper{ width:100%; height:auto; margin:0 auto; overflow:hidden;}

.section3-1{ 
	width:100%; height:auto; margin:auto; 
	overflow:hidden; display:block; text-align: center; 
	background:url("../images/bg01.jpg") no-repeat center top #000; 
	 
}

.section3-2{ 
	width:100%; height:auto; margin:auto; 
	overflow:hidden; display:block; text-align: center; 
	background:#035584; 
	 
}

.section3{ 
	width:100%; height:auto; margin:auto; margin-top: 60px; 
	overflow:hidden; display:block; text-align: center; 
	background:url("../images/bg2.jpg") no-repeat center top  #5606a1; 
}
.sub-section3 { width:82%; height:auto; overflow:hidden; margin:20px auto; margin-bottom:20px; padding:10px 0px; }



/*********************/

.section4{ width:100%; height:auto; margin:0 auto; overflow:hidden; display:block; background:#fff; }
.sub-section4 { width:1100px; height:auto; overflow:hidden; margin:auto; margin-top:20px; margin-bottom:20px; text-align: center; }
.pic-mobile1{ width:auto; height:auto; overflow:hidden; display:block; float:left; }
.text-section4{ width:auto; height:auto; margin:150px auto; overflow:hidden; float:left; text-align:left;  }

.section5{ width:100%; height:auto; margin:0 auto; overflow:hidden; display:block; background:#fff; }
.sub-section5 { width:1100px; height:auto; overflow:hidden; margin:auto; margin-top:20px; }
.text-section5{ width:auto; height:auto; margin:200px auto; margin-left:50px; overflow:hidden; float:left; text-align:left; }
.pic-mobile2{ width:auto; height:auto; overflow:hidden; display:block; float:left; }

.section6{ width:100%; height:auto; margin:0 auto; overflow:hidden; display:block; background:rgba(255, 255, 255, 0.7); }
.sub-section6 { width:1000px; height:auto; overflow:hidden; margin:auto; margin-top:10px; text-align:center;  }
.text-section6{ width:auto; height:auto; margin:10px auto; overflow:hidden; margin:auto; text-align:center; font-family: 'PSL162'; color:#323232; }
.pic-mobile3{ width:auto; height:auto; overflow:hidden; display:block; margin:auto; margin-top:20px;}
	

/****** foot *****/
.sub-social { width:200px; height:auto; overflow:hidden; margin-top:20px; float:right; padding:25px; }
.text-social{ font-size:24px; color:#000; float:right; text-align:right; font-weight:bold; }
.group-bt{ width:180px; height:auto; overflow:hidden; margin-top:0px;  padding:10px; }
.bt-social{
	width:50px; height:50px; margin-right:5px; 
	float:right; overflow:hidden; display: block; 
	text-decoration: none; float:right;
	outline: 0; -webkit-transform: scale(1);
	transform: scale(1); -webkit-transition: .3s ease-in-out; 
	transition: .3s ease-in-out;
}

.bt-social:hover{ -webkit-transform: scale(1.4); transform: scale(1.2); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

.foot{ width:100%; height:auto; overflow:hidden; background:#eaeaea; border-top:1px solid #c4c4c4; }
.boxfoot{ width:80%; height:auto; margin:0 auto; margin-top:20px; margin-bottom:40px; text-align:left; padding-left:10px; }
.logofoot{ width:auto; height:auto; }
.textfoot{ width:auto; height:auto; overflow:hidden; margin:5px auto; text-align:left; color:#000; padding-bottom:10px; }




/**** Button to top *****/
a.back-to-top {
	display:none;
	width: 50px;
	height: 50px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 10px;	
	bottom: 10px;
	background: url("../images/back-to-top-01.png") no-repeat center 43%;
	
}
a:hover img.back-to-top {
	opacity: .5;  -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
	
}

@media screen and (min-width: 1700px) and (max-width: 1920px){

.sub-news{ width:24%; height:auto; float:left; overflow:hidden; margin:10px auto; margin-left:7px;}
.banner{ width:100%; height:auto; margin-left:0px; display:block; margin:auto;  }

}

@media screen and (min-width: 1210px) and (max-width: 4600px){
.menu-btn, .logo-btn { display:none;}
.box-down{ margin-top:550px; }
}

@media screen and (max-width: 1370px){
.t-box01{ margin-top:90px;  }
}

@media screen and (max-width: 1200px){
.section1{ display:none;}
.menu-btn, .logo-btn { display:block;}
.section-sub{ width:100%;}
}

@media screen and (max-width: 1440px){
.sub-news{ width:32%; float:left; margin:10px auto; margin-left:10px; }
}

@media screen and (max-width: 1024px){
.wrapper, .boxfoot{ width:100%; }
.sub-section3 { width:100%; padding:0px; }
.section3-1{ background:url("../images/bg2.jpg") no-repeat center top #000614; }
.box-banner{ width:100%; margin:auto; }
.banner{ width:100%; }
.t-box01{ margin-top:50px;  }
.info-center{ width: 80%; margin: auto; margin-top: 60px;  }
.info-left{ width: 50%; margin-top: 10px; text-align: left; float: left; }
}

@media screen and (max-width: 900px){
.t-box01{ width:90%; margin: auto; margin-top:60px; margin-bottom:30px; float: none; text-align: center;  }
.pic-box{ width: 90%; float: none; margin: auto;}
.bt-call{ float:none; }
}

@media screen and (max-width: 768px){
.sub-section3 { margin-top:10px; margin-bottom:40px; }
.t-box01{ width:90%; margin: auto; margin-top:60px; margin-bottom:30px; float: none; text-align: center;  }
.pic-box{ width: 90%; float: none; margin: auto;}
.bt-call{ float:none; }
.sub-news{ width:48%; float:left; margin:10px auto; margin-left:10px; }

}

@media screen and (max-width: 700px){
.banner{ width:100%; }
}

@media screen and (min-width: 490px) and (max-width: 823px){
a.back-to-top { width:60px; height:60px; background: url("../images/back-to-top-35x35.png") no-repeat center 43%; }
.info-center{ width: 90%; margin-top: 60px; }
.info-left{ width: 95%; margin-top: 10px; text-align: center; float: none; }
.info-web{ width: 47%; margin: auto; margin-top: 10px; margin-left: 10px;   }
}

@media screen and (min-width: 380px) and (max-width: 480px){
.t-big01{ font-size:60px; }
.t-small01{ font-size:36px; }
.sub-section3 { margin-top:10px; margin-bottom:10px; padding:0px; }
.boxfoot{ width:100%; height:auto; text-align:center; padding-left:0px; }
.logofoot{ width:40%; height:auto; margin:auto; }
.textfoot{ margin:5px auto; text-align:center; padding-bottom:0px; }
a.back-to-top { width:35px; height:35px; background: url("../images/back-to-top-35x35.png") no-repeat center 43% ; }
.t-small01{ font-size:36px; }
.info-small{ width: 80%; float: none; margin-bottom: 10px; }
.info-center{ width: 90%; margin-top: 60px; }
.info-left{ width: 90%; margin-top: 10px; text-align: center; float: none; }
.info-web{ width: 100%; margin: auto 10px; margin-top: 10px; float: none; }
}

@media screen and (min-width: 320px) and (max-width: 375px){
.t-big01{ font-size:60px; }
.t-small01{ font-size:36px; }
.info-small{ width: 80%; float: none;  }
.info-center{ width: 90%; margin-top: 60px; }
.info-left{ width: 95%; margin-top: 10px; text-align: center; float: none; }
.info-web{ width: 100%; margin: auto; margin-top: 10px;  float: none; }
.boxfoot{ width:95%; height:auto; text-align:center; padding-left:0px; }
.logofoot{ width:40%; height:auto; margin:auto; }
.textfoot{ margin:5px auto; text-align:center; padding-bottom:0px; }
a.back-to-top { width:35px; height:35px; background: url("../images/back-to-top-35x35.png") no-repeat center 43%; }

}


@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}