@font-face {
    font-family: 'calibri';
    src: url('../font/calibri.eot');
    src: url('../font/calibri.eot') format('embedded-opentype'),
         url('../font/calibri.woff2') format('woff2'),
         url('../font/calibri.woff') format('woff'),
         url('../font/calibri.ttf') format('truetype'),
         url('../font/calibri.svg#calibri') format('svg');
}

@font-face {
	font-family: 'Kanit-Regular';
	src: url('../font/Kanit-Regular.eot');
    src: url('../font/Kanit-Regular.eot') format('embedded-opentype'),
         url('../font/Kanit-Regular.woff2') format('woff2'),
         url('../font/Kanit-Regular.woff') format('woff'),
         url('../font/Kanit-Regular.ttf') format('truetype'),
         url('../font/Kanit-Regular.svg#Kanit-Regular') format('svg');
}


.body.th,.about.th,.wedo.th,.team.th { font-family: 'Kanit-Regular'; }


html,body{
  padding: 0;
  margin: 0; 
  height: 100%;
}  
body{  
  font-family: 'calibri', sans-serif;
  font-size: 18px !important;
  font-weight: 400; 
  color: #000000;
  background-color: #ffffff;
  line-height: 1.50;
  
  margin:0;
  padding:0;  

  position: relative;
  overflow-x: hidden;
}

b, strong, .bold{
  font-weight: bold; 
  font-family: inherit;
}
h1,h2,h3,h4,h5,h6{   
  margin:0;  
  color:inherit; 
  line-height: 1.4; 
  font-weight: 500;
  font-style: normal;  
}  

.nowrap{ white-space: nowrap; }
 
a{
  color:inherit;
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
a:hover{ text-decoration: none; color:inherit; }

.size10{ font-size : 10px !important; }
.size12{ font-size : 12px !important; }
.size14{ font-size : 14px !important; }
.size16{ font-size : 16px !important; }
.size18{ font-size : 18px !important; }
.size20{ font-size : 20px !important; }
.size30{ font-size : 30px !important; }
.size32{ font-size : 32px !important; }
.size34{ font-size : 34px !important; }
.size36{ font-size : 36px !important; }
.size40{ font-size : 40px !important; }

.red{ color: #ff0000; }
.noborder{ border: none; }
.underline{ text-decoration: underline; }
.clear{ clear: both; }



.content{ width: 100%; min-height: 640px; }

@keyframes fadeIn_10 {
  from { opacity: 0; }
  to { opacity: 1; }
}
.change-lang{ 
	width: fit-content;
	position: fixed;
	bottom: 0px;
	right: 0px;
	z-index: 99;
	opacity: 0;
	animation: fadeIn_10 1s forwards; 
}
.change-lang img{ width: 80%; transition: transform 0.5s ease; }
.change-lang img:hover{ transform: scale(1.05); }


.head{ padding: 33px 0px 33px 0px; }
.head .head-body{ width: 90%; margin: auto; }
.head .head-body a,.head .head-body span.item-menu{
	color: #343434;
	font-size: 1.0em;
	/*text-underline-offset: 0.1em;
	transition: text-underline-offset 0.3s ease;*/
	transition: padding-bottom 0.3s ease;
	margin-left: 35px;
}
.head .head-body a:hover,.head .head-body a.active,.head .head-body span.item-menu:hover,.head .head-body span.item-menu.active{
	color: #65a943;
	/*text-decoration: underline;
	padding-bottom: 5px;
	text-underline-offset: 0.6em; */
	border-bottom: 5px solid currentColor;
	padding-bottom: 5px;
	cursor: pointer;
}
.head-body-menu{ padding-top: 30px; margin-bottom: -50px; text-align: right; }
.head-body-submenu{
	position: absolute;
	left: 0px;
	top: 97px;
	width: 100%;
	background-color: #2b7042;
	z-index: 99999;
}
.head-body-submenu-body{ color: #ffffff; padding: 40px 20px 100px 20px; width: 90%; margin: auto; line-height: 1.7}
.head-body-submenu-body .title-submenu{
	width: 100%;
	font-size: 1.4em;
	border-bottom: 1px solid currentColor;
	padding-bottom: 15px;
	margin-bottom: 15px;
}
.head-body-submenu-body a:hover{ color: #94d160; }
.submenu1,.submenu2,.submenu3{
	display: none;
}



.navbar-header{ position: absolute; top: 8px; right: 15px; width: 40px; height: 45px; display: none; cursor: pointer; z-index: 99999; }

.navbar-header:focus {
  outline: 0;
}
.navbar-header .icon-bar {
  display: block;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background-color: #343434;
  transition: all 300ms ease-in;
}
.navbar-header .icon-bar + .icon-bar {
  margin-top: 7px;
}
.navbar-header:hover .icon-bar{ background-color: #65a943; }

.change .bar1 {
  transform: translate(0, 12px) rotate(-45deg); background-color: #ffffff;
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: translate(0, -12px) rotate(45deg); background-color: #ffffff;
}
.navbar-header-menu{
	display: none;
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 99998;
	width: 100%;
	height: 100% !important;;
	min-height: 100vh !important;;
	background-color: #2b7042;
	color: #ffffff;
	padding: 5% 10% 10% 5%;
	overflow-y: scroll;
}
.navbar-header-menu a{
	color: #ffffff;
	font-size: 1.0em;
}
.navbar-header-menu a:hover,.navbar-header-menu a.active,.navbar-header-menu span.active{
	color: #65a943;
}
.navbar-header-menu .navbar-header-submenu{ padding-left: 30px; }



.about-body{ width: 83%; margin: auto; padding: 5% 0.5% 5% 0.5%; }
.about-body .about-title{ color: #2b7042; font-size: 3em; line-height: 1; padding-bottom: 2%; }
.about-body .about-subtitle{ color: #2b7042; font-size: 1.5em; line-height: 1; padding-bottom: 2%; }
.about-body .about-button,.publication-button{ display: block; cursor: pointer; width : fit-content; color: #ffffff; background-color: #97bf29; padding: 13px 55px 13px 55px; border-radius: 20px; }
.about-body .about-detail{ padding-bottom: 2%; }
.about-button div.move,.publication-button div.move{ transition: transform 0.3s ease; display: inline-block; }
.about-button:hover div.move,.publication-button:hover div.move{ transform: translateX(8px); color: #ffffff; }
.publication-button:hover{ color: #ffffff; }


.wedo{ background-color: #646464; padding: 5% 0.5% 5% 0.5%; }
.wedo .wedo-body{ width: 90%; margin: auto; color: #ffffff; }
.wedo-body .wedo-title{ color: #97bf29; font-size: 3em; padding: 0% 5% 2% 5%; }
.wedo-body .wedo-subtitle{ padding: 0% 5% 5% 5%; }
.wedo-body .wedo-detail{ }
.wedo-body .wedo-detail div.line{ display: table; width: 100%; border-top: solid thin #97bf29; padding: 2% 5% 2% 5%; transition: background-color 0.5s ease, opacity 0.5s ease; } 
.wedo-body .wedo-detail .line:hover{ background-color: #525252; }
.wedo-body .wedo-detail .line.last:hover{ background-color: transparent; }
	div.line .wedo-detail-wrap{ display: table-row; width: 100%; font-size: 1.7em; }
	div.line .wedo-detail-wrap .wedo-content{ display: table-cell; width: 80%; }
	div.line .wedo-detail-wrap div.move{ display: table-cell; width: 20%; text-align: right; transition: transform 0.3s ease; }
	.wedo-detail a:hover div.move{ transform: translateX(15px); }

.team{ width: 90%; margin: auto;}
.team .team-body{}


.team-body .team-ourteam{ display:table; width: 100%; padding: 5% 0.5% 5% 0.5%; }
.team-ourteam .ourteam-row{ display: table-row; }
.team-ourteam .ourteam-wrap{ display: table-cell; width: 30%; color: #ffffff; background-color: #6aac42; vertical-align: middle; padding: 0% 5% 0% 5%; }
	.ourteam-wrap .ourteam-title{ font-size: 3em; padding-bottom: 1%;}
	.ourteam-wrap .ourteam-detail{ padding-bottom: 7%;}
	.ourteam-wrap .ourteam-button,.service .ourteam-button{ padding-bottom: 7%;}
	.ourteam-wrap .ourteam-button div,.service .ourteam-button div{
		width: fit-content;
		border: solid thin;
		cursor: pointer;
		padding: 12px 30px 12px 30px;
		border-radius: 20px;
		background-color: #6aac42;
		color: #ffffff;
		transition: background-color 0.5s ease, opacity 0.5s ease;
	}
	.ourteam-wrap .ourteam-button div:hover,.service .ourteam-button div:hover{
		background-color: #ffffff;
		transition: background-color 0.5s ease, opacity 0.5s ease;
		color: #2b7042;
	}
.team-ourteam .ourteam-img{ display: table-cell; width: 30%; }
.team-ourteam .ourteam-img img{ width: 100%; }


.team-body .team-global{ padding: 0% 0.5% 5% 0.5%; }
.team-body .team-global img{ width: 100%; }

.team-body-go-uhyinter{ 
	background-color: #4aad34;
	color: #ffffff;
	border-radius: 20px;
	padding: 2% 2.5% 2.5% 2.5%;
	margin: auto;
	line-height: 1.0;
}
.go-uhyinter-title{ font-size: 2.8em; font-weight: bold; }
.go-uhyinter-button{
	background-color: #ffffff;
	color: #4aad34;
	border-radius: 25px;
	padding: 7% 0% 7% 0%;
	margin-left: auto;
	text-align: center;
	width: 200px;
	font-size: 1.2em;
	margin-top: 3%;
	cursor: pointer;
	transition: background-color 0.5s ease, opacity 0.5s ease;
}
.go-uhyinter-button:hover{
	background-color: #2b7042;
	transition: background-color 0.5s ease, opacity 0.5s ease;
	color: #ffffff;
}


.precopyright{ width: 90%; margin: auto;  }
.precopyright .precopyright-body{ color: #999999; font-size: 13px; padding: 5% 0.5% 5% 0.5%; }

.footer{ width: 100%; background-color: #097041; }
.footer-menu{ padding-top: 35px; padding-bottom: 40px; line-height: 2.00; }
.footer-menu-body{ }
	.footer-menu-body a,.footer-menu-body span.a{ font-weight: bold; color: #ffffff; }
	.footer-menu-body a:hover,.footer-copyright-name a:hover{ color: #94d160; }
	.footer-menu-body a.footer-submenu{ font-weight: bold; color: #cccccc; font-style: italic; font-size: 0.9em; }
	.footer-menu-body a.footer-submenu:hover{ color: #94d160; }
	.footer-menu1{ width: 10%; }
	.footer-menu2{ width: 20%; }
	.footer-menu3{ width: 25%; }
	.footer-menu4{ width: 15%; }
	.footer-menu5{ width: 10%; text-align: center; }
	.footer-menu6{ width: 10%; text-align: center; }
	.footer-menu7{ width: 10%; text-align: right;}
	.footer-menu2-1{ display: none; }
	.footer-menu5-1{ display: none; }
	.footer-menu6-1{ display: none; }
	.footer-menu7-1{ display: none; }
.footer-copyright{
	margin-bottom: 0px;
	bottom: 0px;
	min-height: 375px;
	background-image: url(../images/template/graphic_bottom.png);
	background-repeat: no-repeat;
	background-position: bottom right;
}
.footer-menu-body,.footer-copyright-body{ width: 90%; margin: auto; }
.footer-blank{ margin-bottom: 190px;}
.footer-copyright-logo{ margin-bottom: 0px; bottom: 0px; }
.footer-copyright-wrap{ }
.footer-copyright-name-wrap{
	width: fit-content;
	text-align: left;
	margin-left: auto;
	color: #ffffff;
	font-size: 1em;
}
.footer-copyright-name{ margin-left: 12px; margin-bottom: 10px; line-height: 1.80; }
.footer-copyright-name-image{}



/*หน้ารอง*/
.content .banner{}
.content .banner img{ width: 100%; background-color: black; }
.banner-body { position: relative; }
.banner-body .key-wrap{ position: absolute; left: 70px; bottom: 10px;}
.content .body{ min-height: 300px; width: 100%; }
.content .body .section1,.content .body .section2,.content .body .section3,.content .body .section4,.content .body .section5,.content .body .section6{ width: 100%; }
	.section1{ background-color: #ffffff; }
		.section1 .title{ color: #2b7042; font-size: 3em; padding-bottom: 2%; line-height: 1em; }
		.section1 .detail{  }
	.section2{ background-color: #fafafa; }
		.section2 .title{ color: #4aad34; font-size: 2.5em; padding-bottom: 2%; line-height: 1em; }
		.section2 .detail{  }
	.section3{ background-color: #e7e7e7; }
		.section3 .title{ color: #43b02a; font-size: 1.5em; padding-bottom: 2%; line-height: 1; }
		.section3 .detail{  }
		.section3-why .section3-row{  }
		.section3-why .section3-col1,.section3 .section3-col2{ float: left; }
		.section3-why .section3-col3{ float: right; }
			.section3-why .section3-col1{ width: 5%; }
			.section3-why .section3-col2{ width: 45%; padding: 5% 3% 5% 3%; }
			.section3-why .section3-col3{ width: 50%; }
			.section3-why .section3-col3 img{ width: 100%; }
	.section4{ background-color: transparent; }
	.section5{ background-color: transparent; }
	.section6{ background-color: transparent; }
		.section-body{ width: 90%; margin: auto; padding: 5% 3% 5% 3%;}
	.section-pager{ width: 90%; padding: 0% 3% 0% 3%; text-align: right; margin: auto; }
		.section-pager .detail{ width: fit-content; padding: 0%; margin-left: auto;  }



@keyframes key_fadeIn_06 {
  from { opacity: 0; }
  to { opacity: 0.6; }
}
@keyframes key_fadeIn_10 {
  from { opacity: 0; }
  to { opacity: 1; }
}

.banner-body .key-wrap .key1{
	font-size: 3.0em;
	color: #ffffff;
	opacity: 0;
	font-style: italic;
	font-weight: bold;
	animation: key_fadeIn_06 1s forwards; 
}
.banner-body .key-wrap .key2{
	font-size: 4.0em;
	color: #ffffff;
	opacity: 0;
	font-style: italic;
	font-weight: bold;
	animation: key_fadeIn_10 1s forwards; 
}
.key1 + .key2{ margin-top: -40px; margin-left: -10px; }


/*ค่อยๆ แสดง content ขึ้นมาด้วย css*/
#key1 { animation-delay: 0s; }
#key2 { animation-delay: 1.0s; }
#chanage-lang{ display: block; }
#change-lang { animation-delay: 1.5s; }
/*ค่อยๆ แสดง content ขึ้นมาด้วย css*/
/*หน้ารอง*/



/*ค่อยๆ แสดง content ขึ้นมาด้วย javascript*/
/* ซ่อนก่อน */
.content_delay {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ตอนแสดง */
.content_delay.active {
  opacity: 1;
  transform: translateY(0);
}
/*ค่อยๆ แสดง content ขึ้นมาด้วย javascript*/



.customSelect{ 
	display: block;
	width: 100%;
	height: 50px;
	font-weight: normal;
	font-size:16px;
	padding-top: 0px;
	padding-left: 6px;
	line-height: 50px;
	color: #000000;
	background-color: #ffffff;
  	border:1px solid rgba(0,0,0,.2);  
    border-radius:0px;
  	font-family: inherit;
    	-webkit-transition: all 0.2s ease-in-out;
       	-moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
} 
.customSelect:focus{
	/*border:1px solid rgba(0,0,0,0.1);*/
}


.aboutus .aboutus-table{ display: table; margin: auto; width: 100%;}
.aboutus .aboutus-row{ display: table-row; }
.aboutus .aboutus-col{ display: table-cell; padding: 5px 5px 5px 0px; }
.aboutus-col.col1{ width: 10%; }
.aboutus-col.col2{ width: 30%; }
.aboutus-col.col3{ width: 60%; }
.aboutus .subtitle{ padding-top: 20px; padding-bottom: 10px; text-decoration: underline; font-weight: bold; }

.contactus .subject,.joinus .subject{ padding-left: 2%; font-style: italic; }
.contactus .detail div,.joinus .detail div{ margin-top: 1.5%; }
.contactus .section2 ::placeholder,.joinus .section1 ::placeholder{ color: transparent; }
.contactus textarea,.joinus textarea{ resize: none; }
.contactus .buttonarea,.joinus .buttonarea{ text-align: left; }
.joinus .section1 .buttonarea{ margin-bottom: -5%;/*ลดระยะช่องว่างด้านล่างลง เนื่องจากมีแค่ 1 section*/ }
.btn{
	max-width: 150px;
	width: 50%;
	border: solid thin;
	cursor: pointer;
	padding: 12px 30px 12px 30px;
	border-radius: 20px;
	transition: background-color 0.5s ease, opacity 0.5s ease;
}
.btn.submit{
	background-color: #6aac42;
	color: #ffffff;
}
.btn.cancel{
	background-color: #F95D5D;
	color: #ffffff;
}
.btn:hover{
	background-color: #ffffff;
	transition: background-color 0.5s ease, opacity 0.5s ease;
	color: #2b7042;
}

.publication{ margin-bottom: 2%; }
.publication div{ padding-left: 1.5%; padding-bottom: 1.5%; }
.publication-table{ display: table; margin: auto; width: 90%; max-width: 300px;}
.publication-row{ display: table-row; }
.publication-col{ display: table-cell; padding: 5px; }
.publication-col.subject{ text-align: center; font-weight: bold; background-color: #CFCFCF }
.publication-col.info{ padding-left: 25px;}

.publication-button.publication-button2{
	background-color: transparent !important;
	color: #65a943;
	padding: 0;
	margin: 0;
}
.publication-button.publication-button2:hover,.service .imagearea.link a:hover,.service .training a:hover,.service .legal a:hover,.service .information-system a:hover,.service .payroll a:hover,.service .audit a:hover{ color: #097041; text-decoration: underline; }
.publication-button.publication-button2:hover div.move{ transform: translateX(8px); color: #097041; }
.publication-section3 .item{ margin-bottom: 3%; }
.publication-inv{ width: fit-content; margin: auto; }

.ournews-item{
	padding: 15px 20px 15px 20px;
  	border-bottom: 1px solid rgba(0,0,0,.2);
	background-color: #ffffff;
	transition: background-color 0.5s ease, opacity 0.5s ease;
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
a:hover .ournews-item{ color: #94d160; }
.ournews-item span + span{ margin-left: 20px; }
.section1 + .section1-1{ margin-top: -10%; }

/*แบ่งหน้า*/
ul.pager{
  padding: 0;
  margin: 0; 
  list-style-type: none;
  display: flex;
}
ul.pager li a,
ul.pager li span{
  display: block;
  padding: 10px 15px;
  margin: 0px 2px 0px 2px;
  background-color: #ffffff;
  transition: background-color 0.5s ease, opacity 0.5s ease;
}
.pc ul.pager li:hover a,
ul.pager li.active a,ul.pager li:hover a{ color: #ffffff; background-color: #2b7042; }
/*แบ่งหน้า*/


.service .imagearea{ width: 90%; margin: auto; }
.service .imagearea img{ width: 100%; margin-top: 2%; margin-bottom: 7%; }
.service .buttonarea{ width: fit-content; margin: auto; margin-top: 3%; margin-bottom: -5%;/*ลดระยะช่องว่างด้านล่างลง เนื่องจากมีแค่ 1 section*/ }
.service .imagearea.link{ width: 100%; margin-top: 2%; margin-bottom: 3%; }
.service .imagearea.link a{ text-decoration: underline; }

.service .register-table,.service .audit-table{ display: table; margin: auto; width: 100%; margin-bottom: 2%; }
.service .register-row,.service .audit-row{ display: table-row; }
	.register-row.light,.audit-row.light{ background-color: #f2f2f2 }
.service .register-col,.service .audit-col{ display: table-cell; padding: 5px; }
	.register-col.col1,.audit-col.col1{ width: 40%; }
	.register-col.col2,.audit-col.col2{ width: 20%; }
	.register-col.col3,.audit-col.col3{ width: 40%; }
	.register-col.subject,.audit-col.subject{ text-align: center; font-weight: bold; background-color: #CFCFCF }

	.audit-col.col1{ width: 10%; text-align: center; }
	.audit-col.col2{ width: 25%; }
	.audit-col.col3{ width: 25%; }
	.audit-col.col4{ width: 20%; text-align: center; }
	.audit-col.col5{ width: 20%; text-align: center; }

.service .training .row,.service .audit .row{ margin-top: 2%; }
.service .training img,.service .audit img{ width: 100%; margin-bottom: 3%; }


/*ลดระยะช่องว่างด้านล่างลง เนื่องจากมีแค่ 1 section*/
.news .newsdetail,.service .register,.service .training,.service .legal,.service .information-system,.service .payroll,.service .audit{ margin-bottom: -5%; }
/*ลดระยะช่องว่างด้านล่างลง เนื่องจากมีแค่ 1 section*/





@media screen and (max-width: 1260px) {
.head .head-body a,.head .head-body span.item-menu{
	margin-left: 30px;
}
.go-uhyinter-button{
	width: 180px;
	margin-top: 4%;
}
	
.banner-body .key-wrap .key1{ font-size: 2.5em; }
.banner-body .key-wrap .key2{ font-size: 3.5em; }
}

@media screen and (max-width: 1200px) {
.head .head-body a,.head .head-body span.item-menu{
	margin-left: 22px;
}
.go-uhyinter-button{
	width: 170px;
	margin-top: 5%;
}
	
.banner-body .key-wrap .key1{ font-size: 2.0em; }
.banner-body .key-wrap .key2{ font-size: 3.0em; }
.key1 + .key2{ margin-top: -30px; margin-left: -8px; }
	
	.footer-menu1{ width: 10%; }
	.footer-menu2{ width: 20%; }
	.footer-menu3{ width: 23%; }
	.footer-menu4{ width: 17%; }
	.footer-menu5{ width: 10%; text-align: center; }
	.footer-menu6{ width: 10%; text-align: center; }
	.footer-menu7{ width: 10%; text-align: right;}
}

@media screen and (max-width: 1024px) {
.head .head-body a,.head .head-body span.item-menu{
	margin-left: 15px;
}
.go-uhyinter-button{
	width: 160px;
	margin-top: 6%;
}
	
.banner-body .key-wrap .key1{ font-size: 1.8em; }
.banner-body .key-wrap .key2{ font-size: 2.8em; }
.key1 + .key2{ margin-top: -25px; margin-left: -8px; }
	
			.section3-why .section3-col1{ width: 0%; float: none; }
			.section3-why .section3-col2{ width: 90%; padding: 5% 3% 0% 3%; float: none; margin: auto; }
			.section3-why .section3-col3{ width: 90%; float: none; margin-left: auto; margin-top: -2%; text-align: right; }
			.section3-why .section3-col3 img{ max-width: 599px; }
}

@media screen and (max-width: 992px) {
.head{ padding: 10px 0px 10px 0px; }
.head .head-body{ width: 100%; margin: auto; }
.head-body-logo img{ width: 200px; }
.head .head-body a,.head .head-body span.item-menu{
	display: none; /*ซ่อนเมนู PC*/
}
.navbar-header{ display: block; }
.navbar-header-menu{
	/*display: block;*/
}

.go-uhyinter-button{
	width: 150px;
	margin-top: 7%;
}
	
.banner-body .key-wrap .key1{ font-size: 1.5em; }
.banner-body .key-wrap .key2{ font-size: 2.5em; }
.key1 + .key2{ margin-top: -20px; margin-left: -8px; }

	.precopyright{ width: 90%; margin: auto; }
	.footer-copyright{
		background-image: none;
	}
	.footer-menu-body,.footer-copyright-body{ width: 90%; margin: auto; }
	
	.footer-menu{ padding-top: 20px; padding-bottom: 0px; }
	.footer-blank{ margin-bottom: 260px;}
	
	.footer-menu1{ width: 35%; }
	.footer-menu2{ width: 0%; display: none; }
	.footer-menu3{ width: 40%; }
	.footer-menu4{ width: 25%; }
	.footer-menu5{ width: 0%; display: none; }
	.footer-menu6{ width: 0%; display: none; }
	.footer-menu7{ width: 0%; display: none; }
	.footer-menu2-1{ display: block; }
	.footer-menu5-1{ display: block; }
	.footer-menu6-1{ display: block; }
	.footer-menu7-1{ display: block; }
}

@media screen and (max-width: 768px) {
.head-body-logo img{ width: 150px; }
.navbar-header{ top: 0px; width: 35px; height: 35px; }
	
.team-ourteam .ourteam-row{ display: table-cell; }
.team-ourteam .ourteam-wrap{ display: table-cell; width: 100%;; }
.team-ourteam .ourteam-img{ display: table-row; width: 100%; }
	
.team-body-go-uhyinter{ 
	padding: 4% 2.5% 2.5% 2.5%;
}
.go-uhyinter-title{ font-size: 2.2em; text-align: center; }
.go-uhyinter-subtitle{ text-align: center; }
.go-uhyinter-button{
	width: 100%;
	margin: 15px 0px 15px 0px;
	padding: 15px 0px 15px 0px;
}
	.change-lang img{ width: 70%;}
	
.banner-body .key-wrap{ left: 35px; }
.banner-body .key-wrap .key1{ font-size: 1.4em; }
.banner-body .key-wrap .key2{ font-size: 2.0em; }
.key1 + .key2{ margin-top: -20px; margin-left: -8px; }
	
	.footer-menu1{ width: 100%; }
	.footer-menu3{ width: 100%; }
	.footer-menu4{ width: 100%; }
	.footer-menu5-1{ display: none; }
	.footer-menu6-1{ display: none; }
	.footer-menu7-1{ display: none; }
	.footer-menu5{ display: block; width: 100%; text-align: left; }
	.footer-menu6{ display: block; width: 100%; text-align: left; }
	.footer-menu7{ display: block; width: 100%; text-align: left; }
	.footer-blank{ margin-bottom: 90px;}
	.footer-copyright-logo{ margin: auto; text-align: center;}
	.footer-copyright-name-wrap{
		text-align: center;
		margin: auto;
		margin-top:  30px;
		margin-bottom: 30px;
	}
	.footer-copyright-name{ margin-left: 0px; }
	.footer-copyright-name-image{ }
	
.contactus .detail div,.joinus .detail div{ padding-left: 3%; margin-bottom: 4%; margin-top: 0%; }
.contactus .subject,.joinus .subject{ font-style: italic; margin-bottom: 0% !important; }
.contactus .section2 .subject,.joinus .section1 .subject{ display: none; }
.contactus .section2 .detail div,.joinus .section1 .detail div{ margin-bottom: 3%; }
.contactus .section2 ::placeholder,.joinus .section1 ::placeholder { color: currentColor; }
.contactus .buttonarea,.joinus .buttonarea{ text-align: center; }
	
	
.publication{ margin-bottom: 5%; }
.publication div{ padding-left: 4.5%; padding-bottom: 1.5%; }

.publication-inv{ width: 100% !important; }
	.publication-inv .publication-button{ width: 100%; text-align: center; padding: 13px 25px 13px 25px; }
	
.aboutus-col.col1{ width: 10%; }
.aboutus-col.col2{ width: 40%; }
.aboutus-col.col3{ width: 50%; }
}

@media screen and (max-width: 576px) {
.head-body-menu{ margin-top: -35px;} /*แก้ไขเมนูสามขีดหล่น*/
.navbar-header{  }
.hidden-sm { display: none !important; }
}















.form-control{
 -webkit-appearance: none;
  
  border-radius: 0;  
  padding:0 15px;

  color: #000000;
  font-weight: normal;
  font-size:16px;

  height:50px;
  line-height:50px; 
  border-radius:0; 
  border:1px solid rgba(0,0,0,.2);  
  background-color:#ffffff;
  font-family: inherit;
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}

textarea.form-control{
  height: 150px;
  line-height: normal;
  padding-top: 15px;
}





.radio-group, 
.checkbox-group{ 
  padding-left:0; 
  position:relative;
  list-style-type:none;
  margin:0px;
  padding:0px;
  text-align:center;
  display:inline-block;
  vertical-align:top
}
.radio-group{ display:inline-block; position:relative}
.radio-group.block{display: block; margin-left:0 !important }


.radio-group input[type="radio"],
.checkbox-group input[type="checkbox"] {
  /*display: none;*/
  visibility: hidden;
  opacity: 0;
  height: 0;
  position: absolute;
  width: 0;
 
}
.checkbox-group label:before,
.radio-group label:before {
  content: "";
  display: inline-block;

  margin-right: 5px;
  position: absolute;
  left:0;
  top:4px;
  background-color:#fff;
  border:1px solid #E0E0E0;
  width:17px;
  height:17px; 

  -webkit-border-radius: 0px;
     -moz-border-radius: 0px;
          border-radius: 0px;
}

.radio-group label:before { 
  top:4px; 
  width:17px;
  height:17px;
  border:2px solid rgba(0,0,0,.2);
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}
 

.radio-group label,
.checkbox-group label {
  position:relative;
  padding-left:25px;
  padding-right:15px;
  text-align:left;
  margin:1px 0;
  display:block;
  font-weight:300;
  font-size:inherit;
  line-height:1.3;
  cursor:pointer;

  -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.checkbox-group label{color: inherit;}
.checkbox-group label span{ font-size: 12px; font-style: italic; color: #8f8f8f } 
.radio-group label{color: inherit; padding-left: 30px} 

 
.radio-group input[type="radio"]:checked + label:after{
  content: "";
  color: #ea6f21;
  background-color: #E0E0E0; 
  position:absolute;
  left: 4px;
  top: 8px;
  width: 11px;
  height: 11px;

  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}
.checkbox-group input[type="checkbox"]:checked + label:after,
.checkbox-group input[type="checkbox"]:checked + span + label:after {
  content: "";
  color: #ea6f21; 
  background-image: url(../images/icons/icon-check-mark.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 55%;
 
  position:absolute;

  top: 3px;
  left: 0px;
  width: 19px;
  height: 19px; 
}
 
.radio-group.no-text,
.checkbox-group.no-text{
  width: 29px;
  height: 29px;
  margin-top:-2px; 
} 

.checkbox-group label a{text-decoration: underline;}
.pc .checkbox-group label a:hover{color: #ED1C24}

.checkbox-group .error{display: none !important;}
.checkbox-group .error + label{color: #ED1C24}

.checkbox-group input[type="checkbox"]:checked + span + label{ color: var(--black) !important }

.form-control::-webkit-input-placeholder {
  color: inherit;
  font-weight: normal;
  opacity:0.5;
}

.form-control::-moz-placeholder {
  color: inherit;
  font-weight: normal;
  opacity:0.5;
}

.form-control:-ms-input-placeholder {
  color: inherit;
  font-weight: normal;
  opacity:0.5;
}

.form-control::-ms-input-placeholder {
  color: inherit;
  font-weight: normal;
  opacity:0.5;
}

.form-control::placeholder {
  color: inherit;
  font-weight: normal;
  opacity:0.5;
}

.form-control:disabled, 
.form-control[readonly] {
  background-color: #e2e2e2;
  border-color: #c7c7c7;
}
  
span.error,
.error-custom{
  font-family: inherit;
  font-size: 16px;
  font-weight: normal;
  padding-top: 5px;
  padding-left: 15px;
  color: red;
  display: block;   
  text-align: right;
  position: absolute;
  bottom: -27px;
  right: 0; 
  display: none;

  background-position: 0 13px;
  background-size:9px;
  background-repeat: no-repeat;
  background-image: url(../images/icons/icon-info.svg);
}  
.form-control.error,.customSelect.error,
.custom-select.error,.field-error .form-control{
  border-color: rgba(255,5,5,.25)
}
.form-control.error:focus,
.custom-select.error:focus {
    box-shadow: 0 0 0 .2rem rgba(255,5,5,.25);
}

.custom-file input.error + span + .custom-file-label{border-color: red}

.select-error .error-custom{display: block !important; font-size: 16px !important}

.select.dropdown select{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  opacity: 0; 
}
.select.dropdown .error{/*opacity: 0; pointer-events: none;*/}
.select.dropdown > a{
  display: flex;
  position: relative;
  padding: 3px 20px 3px 0; 
  font-size: 18px; 
  font-weight: 300;
  color: #838383;
  border-bottom: 1px solid #E0E0E0;
  -ms-flex-align: center;
  align-items: center;
  transition:none !important;
}
.select.dropdown > a.selected{
  color: #222222;
  font-weight: 400;
}
.select.dropdown > a:before{
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  margin-top:-5px;

  -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);  

  border-top: 1px solid #838383;
  border-left: 1px solid #838383;

  transition: all 0.2s ease-in-out;

}
.select.dropdown > a .text{
  display:block;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select.dropdown > a .number{
  font-weight: 300;
  font-size: 16px;
  display:inline-block;
  padding-left: 5px;
} 

.select.dropdown.normal > a{
   border: 1px solid #E0E0E0;
   padding: 9px 30px 9px 15px;
}
.select.dropdown.normal > a:before{
  right: 15px
}

.select.dropdown .dropdown-menu{
  border-radius: 0;
  border-color: #E0E0E0;
  width: 100%;
  margin: -1px 0 0;
  padding: 0; 

  font-size: 18px; 
  font-weight: 400;
  line-height: 1.3;
  background-color:#fff;

  max-height: 200px;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
 
.select.dropdown .dropdown-menu .number{ 
  margin-left: auto;
  padding-top: 2px;

  font-weight: 300;
  font-size: 16px;
  display:inline-block;
  color: #838383;
}
.select.dropdown .dropdown-menu li{
  display: flex;
  padding: 5px 15px;
  cursor: pointer;
} 
.select.dropdown .dropdown-menu li.title{ 
  display: none;
}
.select.dropdown .dropdown-menu li:not(:first-child).li-selected,
.pc .select.dropdown .dropdown-menu li:hover{
  background-color: #F1F6F8;
}