@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:#0072a6;
}


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; }


/* Login */
.box-login{ width:120px; height:60px; overflow:hidden; float:right; background:#1d1d1d; }
.text-login{ overflow:hidden; text-align:center; font-size:13px; color:#fff; padding-top:4px; }
.bt-member{ width:65px; height:auto; padding:2px; overflow:hidden; float:right; border-radius:5px; background:#f9e515; font-size:16px; color:#000; text-align:center; bottom:0px; }
.bt-member:hover{ opacity: .5; }

.box-login2{ width:120px; height:auto; overflow:hidden; background:#1d1d1d; margin:auto; display:block; margin-top:5px; }

/* Menu Button */
.section-btn{ width:100%; height:60px; overflow:hidden; position:fixed; z-index:10; }
.logo-btn{ width:175px; height:60px; 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:60px; overflow:hidden; display:block; 
	background:rgba(0, 114, 166, 1.0); text-align:center; 
	position:fixed; z-index:100; border-bottom:0px solid #d92a75;
}
.sub-section1{ width:1000px; height:auto; overflow:hidden; display:block; margin:auto; }
.logo{ width:175px; height:60px; overflow:hidden; display:block; float:left; }
.menu{ width:60%; height:60px; overflow:hidden; display:block; float:right; padding:0px; }
.bt{ 
	width:auto; height:100%; float:right; text-align:center; 
	font-size:30px; margin-left:30px; list-style-type:none; 
	font-family: 'PSL162';	color: #fff;
}

.bt{
	position: relative;
	transition:600ms;
}
.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: #fff555;
	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;
}


/* 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;}

.video-background {
  background: #fff;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.t-box01{ 
	width:50%; height:auto; overflow:hidden; display:block; 
	text-align:left; margin:auto; margin-top:120px; margin-left: 130px; margin-bottom: 20px;
	line-height:0.8; float: left; 
}
.t-big01{ 
	width:auto; height:auto; overflow:hidden; margin:auto;  
	font-size:80px; color:#FFF; text-shadow: 1px 1px 1px #000; 
	font-family: 'PSL162'; ; 
}
.t-small01{ 
	width:auto; height:auto; overflow:hidden; margin:auto; margin-top: 10px; 
	font-size:120px; color:#FFF; text-shadow: 1px 1px 1px #000; 
	font-family: 'PSL162'; line-height: 0.8; 
}
.t-small02{ 
	width:auto; height:auto; overflow:hidden; margin:auto; 
	font-size:50px; color:#FFF; text-shadow: 1px 1px 1px #000; 
	font-family: 'PSL162'; line-height: 1;
}
.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'; 
}
.pic-box{width: 30%; overflow: hidden; display: block; float: left; margin-left: 0px;}
.bt-call{ 
	width: 300px; height: auto; overflow: hidden; display: block; margin: auto; float: left; 
	padding: 20px;  background: #fdbc22; font-size:40px; font-weight: bold; color:#1d013d; 
	font-family: 'PSL162'; text-align: center; border-radius:10px;
}
.bt-call:hover{opacity: 0.8;}


.box-down, .box-down2{ width:500px; height:auto; margin:auto; margin-top:0px; overflow:hidden; display:block; padding:10px; }
.bt-download{ width:235px; height:auto; overflow:hidden; float:left; margin-left:10px; }
.bt-download:hover{opacity: 0.8;}


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

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

.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  #018dff; 
}
.sub-section3 { width:100%; height:auto; overflow:hidden; margin:40px auto; margin-bottom:20px; padding:25px 0px; }

/* News */


.topic{ width:100%; height:auto; overflow:hidden; margin:0 auto; }
.topic-text{ width:auto; height:auto; overflow:hidden; float:left; margin:4px 0 0 30px; font-size:50px; color:#d92a75; font-weight:bold; font-family: 'PSL162'; }
.bt-more{ 
	width:100px; height:40px;  
	float:right; text-align:center; 
	line-height: 2; font-size:18px; color:#1d1d1d; 
	font-weight:bold; margin-top:20px;
	text-decoration:underline; 
}
.bt-more:hover{opacity: 0.8;}
.line-gif{ width:auto; height:4px; overflow:hidden; display:block; margin:auto; text-align:center; background:url("../images/line_pattern1.gif") repeat center top fixed ; }


.group-news{ width:100%; height:auto; float:left; }
.sub-group-news{ width:92%; height:auto; margin:auto; }
.sub-news{ width:353px; height:auto; float:left; overflow:hidden; margin:10px auto; margin-left:7px;}
.pic-news{
	width:auto; height:auto; margin:auto; 
	overflow:hidden; display:block; 
	background: -webkit-linear-gradient(-45deg, #3cff32 0%,#c11aff 100%); 
	background: linear-gradient(-45deg, #3cff32 0%,#c11aff 100%);
}
.pic-news img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;	transition: opacity 0.35s, transform 0.35s; }
.pic-news:hover img{ opacity: 0.7;	-webkit-transform: scale3d(1.2,1.2,1);	transform: scale3d(1.2,1.2,1);}

.tnews-big{ width:auto; height:60px; margin:auto; font-family: 'thaisans_neueregular'; font-weight:900;  font-size:28px; color:#d92a75; line-height:30px; text-align:left; }
.tnews-small{ width:auto; height:70px; margin:auto; font-size:16px; color:#000; text-align:left; }
.tnews-date{float:left; margin-bottom:2px; font-size:14px; color:#d92a75; }


/* Sub Page */
.section-sub{ width:1130px; height:auto; overflow:hidden; margin:60px auto; display:block; }
.subpage-box{ width:100%; height:auto; overflow:hidden; margin:0px auto; display:block;   }
.subbox{ width:90%; height:auto; overflow:hidden; margin:5px auto; }
.sub-titel{ width:100%; height:auto; overflow:hidden; float:left; text-align:left; bottom:5px; border-bottom:1px dotted #b3b3b3; line-height:44px; }
.sub-date{ width:100%; height:auto; overflow:hidden; float:left; text-align:left; margin:10px 0 10px 0;  font-size:1em; color:#b3b3b3; font-weight:200; line-height:20px; }
.box-share{ width:100%; height:auto; overflow:hidden; float:left; margin:20px auto; }
.bt-share{ max-width:150px; height:auto; overflow:hidden; float:left; margin-right:5px; }
.bt-share:hover img{ opacity: .5; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.sub-content{ 
	width:100%; height:auto; text-align:left; margin:0 auto; 
	overflow:hidden; margin-bottom:30px; padding-bottom:20px; 
	display:block; float:left; border-bottom:1px dotted #b3b3b3; }
.sub-pic{ width:100%; height:auto; margin:0 auto; overflow:hidden; text-align:center;}
.box350{ width:350px; height:auto; overflow:hidden; float:left; margin-left:5px; }
.bt350{ width:350px; height:auto; overflow:hidden; display:block; margin:auto; margin-bottom:6px; }
.bt350:hover { opacity: 0.8;  }

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

.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;}


/****** Sub Profile ********/

.box-member{ 
	width:300px; height:auto; overflow:hidden; display:block; 
	margin:20px auto; background:#018da1; border-radius:10px;
	padding:10px; text-align:center; color:#FFF;
}

.box-sub-member{ width:300px; height:auto; overflow:hidden; display:block; margin:auto; background:#fff; padding:10px; }

.pic-member{ width:120px; height:120px; overflow:hidden; display:block; margin:auto; margin-top:20px; background:#666; border-radius:80px; border:5px solid #fff; } 
.sub-member {
    width: 280px; height: auto; overflow: hidden;
    display: block; margin:10px auto; background: #ebebeb;
    text-align: center; color:#d92a75; font-size:12px; 
	font-weight:bold; border-radius: 10px; padding: 5px; 
}
.sub-period {
    width: 130px; height: auto; overflow: hidden; display: inline-block; 
    margin:5px; background: #ebebeb; text-align: center; color:#d92a75;
    border-radius: 10px; padding: 5px; float:left;
}

.sub-history {
    width: 280px; height: auto; overflow: hidden; display: block;
    margin: 10px auto; background: #ebebeb; text-align: center;
    padding: 5px; border-radius: 10px; color:#d92a75;
}

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

/****** 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:#0072a6; border-top:0px 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:#fff; 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}
.box-banner{ width:100%; margin:auto; }
.banner{ width:100%; }
.sub-section4, .sub-section5, .sub-section6{ width:100%; height:auto; text-align:center; }
.text-section4, .text-section5, .text-section6{ margin:10px auto; overflow:hidden; float:none; text-align:center;  }
.pic-mobile1, .pic-mobile2, .pic-mobile3{ float:none; margin:auto; }

.group-news{ width:100%; padding:0px;}
.topic{ width:95%; height:auto; margin-bottom:10px; }
.sub-news{ width:30%; float:left; margin:10px auto; margin-left:10px; }
.tnews-big{ height:auto; }
.tnews-small{ height:auto; }
.section-sub{ width:100%;}
.subpage-box{ width:100%; }
.t-box01{ margin-top:50px;  }
}

@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; }
.t-small01{ font-size:80px; }
}

@media screen and (max-width: 768px){
.video-background { display:none; }
.section2{ height:auto; }
.sub-section3 { margin-top:60px; margin-bottom:10px; }
.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; }
.t-small01{ font-size:80px; }
}

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

@media screen and (min-width: 490px) and (max-width: 812px){
a.back-to-top { width:60px; height:60px; background: url("../images/back-to-top-35x35.png") no-repeat center 43%; }
.t-small01{ font-size:60px; line-height: 0.8; }
.t-small02{ font-size:36px; padding: 15px; 0.4; }
}

@media screen and (min-width: 380px) and (max-width: 480px){
.box-down, .box-down2{ width:auto; height:auto; }
.bt-download{ width:235px; height:auto; overflow:hidden; float:none; margin:auto; margin-top:15px; }
.sub-section3 { margin-top:60px; margin-bottom:10px; padding:0px; }
.group-news{ padding:0px; }
.sub-group-news{ width:100%;}
.topic-text{ font-size:30px; margin:16px 0 0 5px; }
.bt-more{ width:80px; height:30px; font-size:13px; }
.sub-news{ width:95%; margin:auto; margin-bottom:10px; float:none; margin-left:10px;  }
.tnews-big{ height:auto; }
.tnews-small{ height:auto; }
.sub-social { margin:auto; float:none; }
.text-social{ float:none; text-align:center; }
.group-bt{ margin:auto; margin-left:1px;  padding:0px; }
.bt-social{ margin-right:5px; }
.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-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; }
.t-small01{ font-size:60px; line-height: 0.8; }
.t-small02{ font-size:36px; padding: 15px; 0.4; }

}

@media screen and (min-width: 320px) and (max-width: 375px){
.box-down, .box-down2{ width:auto; height:auto; }
.bt-download{ width:235px; height:auto; overflow:hidden; float:none; margin:auto; margin-top:15px; }
.topic-text{ font-size:30px; margin:16px 0 0 5px; }
.bt-more{ width:80px; height:30px; border-radius:20px;  font-size:13px; }
.sub-section3 { margin-top:60px; margin-bottom:10px; padding:0px; }
.sub-group-news{ width:100%;}
.sub-news{ width:95%; margin:auto; margin-bottom:10px; float:none; margin-left:10px; }
.tnews-big{ height:auto; }
.tnews-small{ height:auto; }
.livechat{ margin:auto; margin-top:15px; padding:0px; text-align:center; float:none; }
.sub-social { margin:auto; float:none; }
.text-social{ float:none; text-align:center; }
.group-bt{ margin:auto; margin-left:1px;  padding:0px; }
.bt-social{ margin-right:5px; }
.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-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{ width: 85%; float:none; }
.t-small01{ font-size:60px; line-height: 0.8; }
.t-small02{ font-size:32px; padding: 15px; line-height:1; }
}


@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; }
}