@media screen and (min-width: 320px){
	.text-p p{
		font-family: 'Kanit', sans-serif;
	
		font-weight: 600;
		color: #fff;	
		z-index: 1;
		font-size: 8px;
		line-height: 0.2;
	}

	.text-p1 p{
	font-family: 'Kanit', sans-serif;
	/*font-family: 'Poppins', sans-serif;*/
	font-weight: 400;
	color: #fff;	
	z-index: 1;
	font-size: 10px;
	line-height: 0.2;
	}

@media screen and (min-width: 375px){
	.text-p p{
		font-family: 'Kanit', sans-serif;
	
		font-weight: 600;
		color: #fff;	
		z-index: 1;
		font-size: 10px;
		line-height: 0.3;
	}

	.text-p1 p{
	font-family: 'Kanit', sans-serif;
	/*font-family: 'Poppins', sans-serif;*/
	font-weight: 400;
	color: #fff;	
	z-index: 1;
	font-size: 12px;
	line-height: 0.3;
	}

}
@media screen and (min-width: 576px){
	.header-website{
		height: 70%
	}
	.header-website video {
	    width: 100%;
	    height: 100%;
	}
	.video-overlay {
	    height: 100%;
	}
	.box-text h1{
		font-size: 45px;
	}
	.text-p p{
		font-family: 'Kanit', sans-serif;
	
		font-weight: 600;
		color: #fff;	
		z-index: 1;
		font-size: 14px;
		line-height: 0.7;
	}

	.text-p1 p{
	font-family: 'Kanit', sans-serif;
	/*font-family: 'Poppins', sans-serif;*/
	font-weight: 400;
	color: #fff;	
	z-index: 1;
	font-size: 18px;
	line-height: 0.7;
	}


	.box-text h2{
		font-size: 30px;
	}
	section#activities{
		height: 850px;
	}
	.activities-box{
		height: 300px;
	}
	.activities-box img{
		padding-left: 215px;
	}
	.photo-team{
		height: 550px;
	}
	.item{
		height: 550px;
	}
	.overlay{
		padding-top: 40%;
		height: 84%;
	}
	section#career h1{
		padding-top: 50px;
	}

}
@media screen and (min-width: 768px){
	.on-des{
		display: none;
	}
	.on-mb{
		display: block;
	}
	.nav-menu img{
		margin-left: 30px;
	}
	.header-website{
		height: 70%
	}
	.header-website video {
	    width: 100%;
	    height: 100%;
	}
	.video-overlay {
	    height: 100%;
	}
	.box-text h1{
		font-size: 45px;
	}
	.box-text h2{
		font-size: 30px;
	}
	.text-p p{
		font-size: 18px;
		line-height: 0.7;
	}

	.text-p1 p{
		font-size: 20px;
		line-height: 0.7;
	}
	/*about*/
	.text-head {
		padding: 0px 0 0px 0;
		text-align: left;
	}
	.text-head h1{
		padding-top: 100px;
		font-size: 40px;
	}
	.content-about p{
		padding: 50px 5px 0 10px;
	}
	.content-about .slide_viewer{
		height: 250px;
	}
	.content-about .directional_nav {
	  height: 100px;
	}
	.content-about .previous_btn {
	  top: 270;
	  left: 85%;
	}

	.content-about .next_btn {
	  right: 0;
	  top: 270;
	}
	/* Q/A*/
	.img-head{
		width: 60%;
		padding-top: 50px;
		padding-left:260px;
	}
	.img-head img{
		width: 80%;

	}
	section#product .slide_viewer {
	  height: 670px;
	}
	.pic-product{
		width: 95%;
		margin-left: 15px;
	}
	section#product .previous_btn {
		left: 10;
	}

	section#product .next_btn {
	 	 right: 10;
	  }
	 .client-logo img{
		width: 90%;
	}
	.client-logo img:hover{
		width:90%;
	}
	section#activities{
		height: 249px;
	}
	.activities-box{
		height: 249px;
	}
	.activities-box h1{
		padding-top: 50px;
	}
	.activities-box img{
		padding-left: 25px;
	}
	.overlay{
		height: 249px;
		font-size: 28px;
		padding-top: 30%;
	}
	section#career h1{
		padding-top: 50px;
	}
	.bg-career{
		background-size: 100%; 
		background-image: url(../img/bg-career-mb.png);
	}
	.detail-position{
		height: 90%;
	}
	.bhoechie-tab-menu .list-group>a.active:after{
	  content: '';
	  position: absolute;
	  left: 100%;
	  top: 70%;
	  margin-top: -13px;
	  color: #fff;
	  border-left: 0;
	  border-bottom: 13px solid transparent;
	  border-top: 13px solid transparent;
	  border-left: 10px solid #303030;
	  border-right: 0;
	  z-index: 100;
	}
	.list-group>a.active:before{
		  content: '';
		  position: absolute;
		  top: 110%;
		  margin-top: -13px;
		  width: 120px;
		  height: 6px;
		  border-radius: 10px; 
		  background: #3398cb;
		  transition: .7s;
	}
	/*footer*/
	.head-contact {
		padding: 50px 0 50px 0;
		text-align: left;
	}
	.facebook{
		padding-top: 30px;
		width: 50%;
	}
	.content-contact {
		padding: 250px 0px 0 0px; 
	}
	.box-contact{
		padding-left: 30px;
	}
	.copy-right{
		padding: 30px 0 30px 0;
	}
}
@media screen and (min-width: 992px){
	.box-text h1{
		font-size: 55px;
	}
	.box-text h2{
		font-size: 38px;
	}

	
	/*about*/
	.content-about .slide_viewer{
		height: 300px;
	}
	.text-head {
		padding: 0px 0 0px 0;
		text-align: left;
	}
	.text-head h1{
		padding-top: 100px;
		font-size: 40px;
	}
	.img-head{
		padding-left: 350px;
	}
	section#service{
		padding-bottom: 50px;
	}
	/*section#service{
		padding-bottom: 150px;
	}*/
	.q-and-a{
		height: 100%;
	}
	section#product h1 {
		text-align: center;
		padding-top: 100px;
	}
	section#activities{
		height: 323px;
	}
	.activities-box{
		height: 323px;
	}
	.activities-box h1{
		padding-top: 50px;
		padding-left: 30px;
		text-align: left;
	}
	.activities-box img{
		padding-left: 25px;
	}
	.photo-team{
		height: 323px;
	}
	.item{
		height: 323px;
	}
	.overlay{
		height: 323px;
		font-size: 28px;
		padding-top: 40%;
	}
}
@media screen and (min-width: 1024px){
	.on-des{
		display: block;
	}
	.on-mb{
		display: none;
	}
	.text-p p{
	
		font-size: 20px;
		line-height: 0.7;
	}

	.text-p1 p{
	font-size: 24px;
	line-height: 0.7;
}
	.nav-menu{
		position: fixed;
		z-index: 100;
		width: 100%;
		background: -moz-linear-gradient(rgba(0,42,64,1) 0%, rgba(8, 62, 97,0.37) 53%, rgba(8, 62, 97, 0) 100%); 
		background: -webkit-linear-gradient(rgba(0,42,64,1) 0%, rgba(8, 62, 97,0.37) 53%, rgba(8, 62, 97, 0) 100%); 
		background: linear-gradient(to bottom, rgba(0,42,64,1) 0%,rgba(8, 62, 97,0.37) 53%,rgba(8, 62, 97, 0) 100%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002a40', endColorstr='#00096794',GradientType=0 );
	}
	.nav-menu.active{
		background:  #114863;
		/*background: #3398cb;*/
	}
	.nav-menu img{
		width: 130px;
		margin-left: 40px;
	}
	.nav{
		margin-left: 335px;
		padding-right: 50px;
		padding-top: 15px;
	}
	.nav-link{
		font-family: 'Poppins', sans-serif;
		font-weight: 400;
		color: #fff;
		font-size: 16px;
	}
	.nav-link:hover{
		color: #fff;
		text-shadow: 0 0 3px #fff;
	}
	.header-website{
		height: 100%
	}
	.header-website video {
	    width: 100%;
	    height: 100%;
	}
	.video-overlay {
	    height: 100%;
	}
/*about*/
	.text-head {
		padding: 0px 0 0px 0;
		text-align: left;
	}
	.text-head h1{
		padding-top: 140px;
		font-size: 40px;
	}
	.box-text h1{
		font-size: 60px;
	}
	.box-text h2{
		font-size: 40px;
	}
	.content-about p{
		padding: 90px 10px 0 40px;
	}
	.content-about .slide_viewer{
		height: 350px;
	}
	.content-about .directional_nav {
	  height: 100px;
	}
	.content-about .previous_btn {
	  top: 250;
	  left: 90%;
	}

	.content-about .next_btn {
	  top: 250;
	}
	section#service{
		padding-bottom: 50px;
	}
	
	/*section#service{
		padding-bottom: 250px;
	}*/
	section#service h1 {
		padding-top: 100px;
	}
	.q-and-a{
		position: absolute;
		width: 97.3%;
		height: 550px;
		background: #fff;
		border-radius: 10px;
		-webkit-box-shadow: 0px -1px 15px -1px rgba(181,181,181,0.20);
		-moz-box-shadow: 0px -1px 15px -1px rgba(181,181,181,0.20);
		box-shadow: 0px -1px 15px -1px rgba(181,181,181,0.20);
	}
	.img-head{
		float: left;
		width: 30%;
		padding-top: 200px;
		padding-left: 80px;
	}
	.img-head img{
		width: 60%;
		margin: 0 auto;

	}
	.content-q-and-a{
		padding:100px 50px 70px 0;
		width: 65%;
		float: left;
		background: none;
		height: auto;
		border-radius: none;
	}
	.line{
		clear: left;
	    border: 0;
	    border-top: 2px solid #e1f0f7;
	}
	.answer{
		padding-top: 100px 0 100px 0;
	}
	.answer p{
		padding:20px 0px 0px 10px;
		line-height: 1.6em;
	}

	section#product h1 {
		text-align: center;
		padding-top: 100px;
	}
	/*section#product h1 {
		text-align: center;
		padding-top: 370px;
	}*/

	/*slide*/
	.slider {
	  margin: 0 auto;
	  max-width: 100%;
	}

	section#product .slide_viewer {
	  height: 340px;
	  overflow: hidden;
	  position: relative;
	}

	.slide_group {
	  height: 100%;
	  position: relative;
	  width: 100%;
	}

	.slide {
	  top: 50;
	  display: none;
	  height: 100%;
	  position: absolute;
	  width: 100%;
	  padding: 0px 50px;
	}

	.slide:first-child {
	  display: block;
	}
	section#product .directional_nav {
	  height: 120px;
	  margin: 0 auto;
	  max-width: 100%;
	  position: relative;
	  top: -200px;
	}
	.pic-product{
		width: 50%;
		float: left;
		margin-left: 0;
	}
	.pic-product img{
		width: 100%
	}
	.content-product{
		width: 50%;
		float: right;
		padding-top: 20px;
		padding-left: 40px;
		text-align: left;
	}
	.content-product h3{
		padding-bottom: 10px;
	}
	.content-product p{
		padding-bottom: 10px;
	}
	section#client h1 {
		padding-top: 30px;
	}
	.client-logo{
		width: 100%;
		padding-bottom: 50px;
	}
	.client-logo img{
		width: 70%;
	}
	.client-logo img:hover{
		width:70%;
	}
	section#activities{
		height: 390px;
	}
	.activities-box{
		height: 333px;
	}
	.activities-box h1{
		padding-top: 50px;
		padding-left: 0px;
		text-align: center;
	}
	.activities-box img{
		padding-left: 70px;
	}
	.item{
		height: 330px;
	}
	.overlay{
		height:330px;
	}
	.detail-position{
		padding: 40px 20px 0 50px;
	}
	.facebook{
		width: 60%;
		padding-top: 30px;
	}
	.content-contact {
		padding: 220px 0px 0 0px; 
	}
	.box-contact{
		padding-left: 60px;
	}
	
}
@media screen and (min-width: 1200px){
	.on-des{
		display: block;
	}
	.on-mb{
		display: none;
	}

	.nav-menu img{
		width: 8%;
	}
	.nav{
		margin-left: 42%;
		padding-top: 10px;
	}
	.main-header{
		width: 100%;
	}
	.header-website{
		width: 100%;
		height: 100%
	}
	.header-website video {
	    width: 100%;
	    height: 100%;
	}
	.video-overlay {
	    width: 100%;
	    height: 100%;
	}
	.box-text h1{
		font-size: 50px
	}
	.box-text h2{
		font-size: 45px;
	}


	/*about*/
	.text-head {
		padding: 0px 0 0px 0;
		text-align: left;
	}
	.text-head h1{
		padding-top: 240px;
		font-size: 40px;
	}
	.content-about{
		width: 100%;
		padding: 90px 50px 40px 50px;
	}
	.content-about p{
		font-size: 16px;
		padding-top: 120px;
	}
	.content-about .slide_viewer{
		height: 400px;
	}
	.content-about .directional_nav {
	  top: -200px;
	}
	.content-about .previous_btn {
	  top: 450;
	  left: 750;
	}

	.content-about .next_btn {
	  right: 0;
	  top: 450;
	}
	section#service{
		padding-bottom: 100px;
	}
	
/*	section#service{
		padding-bottom: 250px;
	}*/
	

	.q-and-a{
		height: auto;
	}
	.img-head{
		padding-top: 170px;
	}
	.content-q-and-a{
		padding:70px 50px 70px 0;
	}

	.client-logo{
		width: 100%;
		padding-bottom: 50px;
	}
	.client-logo img{
		width: 60%;
	}
	.client-logo img:hover{
		width:60%;
		filter: none;
	    opacity: 1;	
	    transition: filter 0.3s, opacity 0.3s
	}
	section#product h1 {
		padding-top: 100px;
	}
	section#activities{
		width: 100%;
		height: 390px;
	}
	.activities-box{
		height: 390px;
	}
	.activities-box h1{
		padding-top: 150px;
		padding-left: 135px;
		text-align: left;
	}
	.activities-box img{
		padding-left: 135px;
	}
	.photo-team{
		height: 390px;
	}
	.item{
		height: 390px;
	}
	.overlay{
		width: 100%;
		height: 467px;
		padding-top: 35%;
		font-size: 40px;
	}
	section#career h1{
		padding-top: 70px;
	}
	.bg-career{
		background-size: 100%; 
		background-image: url(../img/bg-career.png);
	}

	.bhoechie-tab-menu{
		padding-bottom: 20px;
		background: #303030;
		text-align: left;
	}
	.list-group{
		padding: 70px 0px 70px 0;
		text-align: left;
	}

	.bhoechie-tab-menu .list-group>a{
		padding-left: 0px;
		padding-top: 20px;
	}

	.list-group>a.active:before{
	  margin-left: 0px;
	}

	.bhoechie-tab-content{
		background: #f3f3f3;
		width: 100%;
		padding-bottom: 42px;
	}

	.detail-position{
		width: 100%;
		padding: 40px 80px 0 80px;
	}

	.detail-position p{
		float: left;
		padding-left: 10px;
		padding-top: 10px
	}
	
	.btn-apply{
		padding: 10px 20px;
	  	border-radius: 50px; 
	  	background: #3398cb;
		text-align: center;
		color: #fff;
		font-family: 'Poppins', sans-serif;
	  	font-weight: 400;
	  	font-size: 18px;

	}
	.btn-apply:hover{
		color: #3398cb;
		text-decoration: none;
		background: #fff;
		transition: .5s;
	}

	section#map-web{
		width: 100%;
		
	}


	.head-contact {
		padding: 50px 0 100px 0;
		text-align: left;
	}
	.head-contact h1{
		padding-top: 30px;
	}
	.facebook{
		width: 60%;
		padding-top: 30px;
	}

	.content-contact {
		width:100%;
		padding: 210px 0px 0 0px
		
	}
	.box-contact{
		width: 100%;
		padding-bottom: 50px;
	}
	.box-contact img{
		width: 6%;
		float: left;
		margin-right: 20px;
	}
	.box-contact p{
		font-family: 'Poppins', sans-serif;
		color: #fff;
		font-weight: 400;
		padding-top: 2px;
	}
	.copy-right{
		padding: 50px 0 40px 0;
	}

}
@media screen and (min-width: 1280px){
	.nav{
		margin-left: 50%;
		padding-top: 10px;
	}
	.text-header h1{
		font-size: 75px;

	}
	.text-header h2{
		font-size: 50px;
	}

	section#activities{
		width: 100%;
		height: 467px;
	}
	.activities-box{
		height: 467px;
	}
	.activities-box h1{
		padding-top: 150px;
		padding-left: 135px;
		text-align: left;
	}
	.activities-box img{
		padding-left: 135px;
	}
	.photo-team{
		height: 467px;
	}
	.item{
		height: 467px;
	}
	.overlay{
		width: 100%;
		height: 467px;
		padding-top: 35%;
		font-size: 40px;
	}

}