/**{
	-moz-filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	filter: gray;
	filter: grayscale(100%);
}*/
@font-face {
    font-family: 'supermarketregular';
    src: url('../fonts/supermarket-webfont.eot');
    src: url('../fonts/supermarket-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/supermarket-webfont.woff2') format('woff2'),
         url('../fonts/supermarket-webfont.woff') format('woff'),
         url('../fonts/supermarket-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body{
	margin: 0;
	padding: 0;
	font-family: 'supermarketregular' !important;
	font-size: 18px !important;
	padding-top: 80px;
	/*cursor: url(../img/mousehover.png), auto;*/
}

/*scroll bar style*/
body::-webkit-scrollbar-track{
	background-color: #eee;
}
body::-webkit-scrollbar{
	width: 6px;
	background-color: #337ab7;
}
body::-webkit-scrollbar-thumb{
	background-color: #337ab7;
}

.spiner{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}
.spiner .windows8{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

/*wellcome*/
.wellcome{
	position: absolute;
	width: 100%;
	height: 100%;
}
.box-well{
	/*width: 960px;*/
	/*height: 500px;*/
	/*background-color: #fff;*/
	/*border: 5px solid #fff;*/
	max-width: 100%;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%)
}
.box-well img{
	max-width: 100%;
	max-height: 100%;
}
.box-btn{
	height: 40px;
	text-align: center;
	position: fixed;
	bottom: 20px;
	right: 50%;
	margin-right: -140px;
	border-radius: 5px;
}
.btn-site{
	display: block;
	width: 140px;
	height: 40px;
	text-align: center;
	line-height: 42px;
	background-color: #fff;
	color: #333;
	text-decoration: none;
}
.TH{
	float: left;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	border-right: 1px solid #ccc;
}
.EN{
	float: right;
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
}

.btn-site:hover{
	background-color: #ccc;
}

/*---------------------------------------------------------------------*/
@font-face {
    font-family: Charmonman;
    src: url('../fonts/TH Charmonman.ttf');
}
.col-md-2{
	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	width: 16.66%;
	float: left;
	padding: 0 15px;
}
#fullpage .section1{
	background-image: url('../img/candle-bg.jpg');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
}
#fullpage .section1 .section1-label{
	position: absolute;
    width: 500px;
    bottom: 120px;
    right: 50%;
    margin-right: -250px;
}
#fullpage .section1 .section1-img{
	position: absolute;
	right: 50%;
	margin-right: -14%;
	top: 30px;
	width: 28%;
}
#fullpage .section1 .section1-label h1{
	font-family: "Charmonman";
    font-size: 50px;
    font-weight: 500;
    margin: 0;
    padding: 0;
}
#fullpage .section2{
	background-image: url('../img/section2-bg.jpg');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
}
#fullpage .section2 .condole-count{
	position: absolute;
	top: 0;
	width: 100%;
	padding: 5px 0;
	background-color: #000;
}
#fullpage .section2 .condole-list{
	width: 90%;
	margin: auto;
}
#fullpage .section2 .condole-list .condole-item{
	position: relative;
	width: 120px;
	margin: auto;
	border-radius: 100px;
	background-color: #000;
	margin-top: 80px;
	padding: 5px 0;
	cursor: pointer;
}
.txt-center{
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%)
}
#fullpage .section2 .condole-list .condole-item:hover{
	opacity: 0.7;
}
#fullpage .section4{
	background: rgba(0,0,0,1);
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(31,31,31,1) 70%, rgba(31,31,31,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(70%, rgba(31,31,31,1)), color-stop(100%, rgba(31,31,31,1)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(31,31,31,1) 70%, rgba(31,31,31,1) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(31,31,31,1) 70%, rgba(31,31,31,1) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(31,31,31,1) 70%, rgba(31,31,31,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(31,31,31,1) 70%, rgba(31,31,31,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#1f1f1f', GradientType=0 );
}
.felicitate-header h1{
	margin: 0;
	padding: 0;
	font-size: 36px;
	font-family: "Charmonman";
}
.btn-felicitate{
	position: absolute;
	display: block;
	width: 200px;
	padding: 10px 0;
	background-color: #FFFFFF;
	text-decoration: none;
	font-family: "Charmonman";
	border-radius: 5px;
	border: 1px solid #ccc;
	font-size: 28px;
	color: #555;
	text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
	bottom: 20px;
	right: 50%;
	margin-right: -100px;
}
.btn-felicitate:hover{
	background-color: #ccc;
}

.felicitate-content{
	position: relative;
	margin: auto;
	width: 500px;
	border-radius: 10px;
	box-shadow: 5px 5px 10px #111;
	background-color: #FFFFFF;
}
.felicitate-content .felicitate-header{
	padding: 5px;
	background-color: transparent;
	border-bottom: 1px solid #ccc;
}
.felicitate-content .felicitate-header h1{
	margin: 0;
	padding: 0;
	color: #333;
	font-size: 28px;
	font-weight: 500px;
}
.felicitate-content .felicitate-body .box-body-1{
	padding: 15px;
	border-bottom: 1px solid #ccc;
}
.felicitate-content .felicitate-body .box-body-1 select{
	width: 85%;
	padding: 10px;
	background-color: #f1f1f1;
	border: 1px solid #ddd;
	outline: none;
	border-radius: 3px;
}
.felicitate-content .felicitate-body .box-body-2{
	padding: 15px;
}
.felicitate-content .felicitate-body .box-body-2 span{
	display: block;
	color: #333;
	font-size: 22px;
	margin-bottom: 10px;
	font-family: "Charmonman";
}
.felicitate-content .felicitate-body .box-body-2 input{
	padding: 10px;
	background-color: #f1f1f1;
	border: 1px solid #ddd;
	box-shadow: 2px 2px 5px #bbb inset;
	outline: none;
	border-radius: 3px;
	transition: border-color 0.5s ease;
}
.felicitate-body .box-body-2 .box-body-btn{
	padding: 20px 0 0 0;
}
.box-body-btn .box-border{
	width: 100px;
	height: 100px;
	border-radius: 100px;
	padding: 10px;
	margin: auto;
	background-color: #ddd;
	box-shadow: 3px 3px 5px #bbb inset;
	transition: background-color 0.5s ease;
}
.box-body-btn .box-border .btn{
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 100px;
	border: 1px solid #ddd;
	background-color: #f1f1f1;
	box-shadow: 5px 5px 5px #bbb;
	outline: none;
	cursor: pointer;
	transition: background-color 0.5s ease;
}
.box-body-btn .box-border .btn:active{
	box-shadow: 0px 0px 5px #bbb;
}
.box-body-btn .box-border .btn .fa{
	font-size: 50px;
	color: #ddd;
	text-shadow: 1px 1px white, -1px -1px #bbb;
	transition: background-color 0.5s ease;
}

.modal-ajax{
	text-decoration: none;
	color: #FFFFFF;
}
.modal-body{
	text-align: center;
}
.modal-body h1{
	font-family: "Charmonman";
	line-height: 45px;
}
.modal-footer{
	text-align: center;
}
.modal-footer h1, .modal-footer h2{
	font-family: "Charmonman";
}

/*//----------------------------------------------------------------------*/

.h10{
	height: 10px;
}
.h20{
	height: 20px;
}
.clear{
	clear: both;
}
.selected{
	color: #fff !important;
  	background-color: #337ab7;
}
.lang{
	position: absolute;
	top: 0;
	right: 10px;
	padding: 5px 0;
}

.section{
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
	color: #fff;
}
.section h1, .section h2{
	display: block;
	position: relative;
	z-index: 2;
}
.sectionHome{
	background-image: url('../img/kcs2.png');
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.sectionAbout{
	background-image: url('../img/aboutus.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.sectionPartners{
	background-image: url('../img/partner.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.sectionSku{
	background:
		-webkit-linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
		-webkit-linear-gradient(315deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
		-webkit-linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
		-webkit-linear-gradient(135deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
	background:
		linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
		linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
		linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
		linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
}
.sectionNewsAndActivity{
	background-image: url('../img/n&a.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.sectionRegis{
	background-image: url('../img/regis.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.sectionContact{
	background-image: url('../img/contact.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.sku-container{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 70px;
	left: 0;
}
.sku-border{
	border:3px solid #337ab7;
}
.sku-active{
	border:3px solid red;
}

.translucent {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
    opacity: 0.4;
    filter: alpha(opacity = 40);
}
.video-icon i{
	color: #fff;
	font-size: 50px;
	position: relative;
	cursor: pointer;
}
.video-icon i:hover{
	color: red;
}
.video-container{
	display: none;
	position: relative;
	width: 50%;
	margin: 80px auto 0 auto;
}

.video {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video iframe, .video object, .video embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.content{
	width: 100%;
	background: #fff;
	position: relative;
	z-index: 3;
	box-shadow: 0px -3px 20px #111;
}
.margin_top_header{
	margin-top: 80px;
}
.anchor{
	width: 50px;
	background-color: #337ab7;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;

	position: absolute;
	left: 50%;
	bottom: 0;
	margin-right: -50%;
	transform: translate(-50%) 
}
.anchor:hover{
	opacity: 0.8;
}
.anchor i{
	font-size: 35px;
	color: #fff;
}

.history{
	text-indent: 2em;
}

.zoom{
	position: relative !important;
	padding: 0 !important;
	border-radius: 0 !important;
	border: 1px solid #ddd;
	overflow: hidden;
}
.zoom .caption_p{
	position: absolute;
	width: 100%;
	height: 40px;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: red;
	opacity: 0.8;
	line-height: 40px;
	text-align: center;
	color: #fff;
}

.img-middle{
	position: relative;
	overflow: hidden;
	background-color: #000;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
.list-activity{
	height: 240px;
}
.list-news{
	height: 400px;
}
.view{
	height: 600px;
}
.thum{
	height: 200px;
}
.img-middle img{
	max-width: 100%;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%)
}

.img-job{
	display: block;
	width: 100%;
	height: 240px;
	overflow: hidden;
	border: 1px solid #ddd;
}

.contact_text div{
	font-size: 14px;	
}

.tab-pane{
	padding: 5px 0;
}

.dt-bold{
	font-weight: 600;
}
.dd-padding{
	padding-left: 20px;
}

fieldset.scheduler-border {
    border: 1px solid #bbb !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
}
legend.scheduler-border {
    font-size: 1em !important;
    font-weight: 600 !important;
    text-align: left !important;
    width:auto;
    padding:0 10px;
    border-bottom:none;
    color: #666;
}

.resume-tabs{
	padding-right: 0 !important;
}
.resume-tab-content{
	padding-left: 0 !important;
}
.tab-container{
	padding: 20px;
	border-left: 5px solid #337ab7;
	border-right: 1px solid #337ab7;
	border-top: 1px solid #337ab7;
	border-bottom: 1px solid #337ab7;
}
.resume-tabs .nav-pills > li > a{
	border-top-left-radius: 5px !important;
	border-bottom-left-radius: 5px !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;

	border: 1px solid #337ab7;
	border-right: none;
}

.preview-img{
	position: relative;
	width: 100px;
	height: 100px;
	border:1px dashed #999;
	overflow: hidden;
}
.preview-img .fileupload{
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
	height:100%;
	width:100%;
	z-index: 999;
}
.preview-img img{
	max-width: 100%;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%) 
}
.preview-img:hover{
  	background: #ddd;
}

.map{
	width: 100%;
	padding: 10px 10px;
	margin: 10px 0;
	background: #eee;
}
.map-item{
	border-bottom: 1px solid #ddd;
	padding: 10px;
}
.map-item:hover{
	background: #f5f5f5;
	cursor: pointer;
}

@media (max-width: 767px) {
	.lang{
		top: 8px;
		right: 70px;
	}
	.anchor{
		display: none;
	}
	.video-container{
		width: 100%;
	}
	.resume-tabs{
		padding-bottom: 10px;
	}
	.resume-tabs .nav-pills > li > a{
		border-top-left-radius: 5px !important;
		border-bottom-left-radius: 5px !important;
		border-top-right-radius: 5px !important;
		border-bottom-right-radius: 5px !important;

		border: 1px solid #337ab7;
		border-right: 1px solid #337ab7;
	}
	.resume-tabs{
		padding-right: 15px !important;
	}
	.resume-tab-content{
		padding-left: 15px !important;
	}
}
.footer{ 
	width: 100%;
	height: 120px;
	padding-top: 25px;
	background-color: #333;
	position: relative;
	z-index: 4;
	color: #999;
}
.social{
	color: #fff;
	font-size: 30px;
}
.counter{
	width: 100%;
	padding: 10px;
	text-align: center;
	background-color: #222;
	position: relative;
	z-index: 4;
}

.black-ribbon {
  position: fixed;
  z-index: 9999;
  width: 70px;
}

@media only all and (min-width: 768px) {
  .black-ribbon {
    width: auto;
  }
}

.stick-left { left: 0; }
.stick-right { right: 0; }
.stick-top { top: 0; }
.stick-bottom { bottom: 0; }

/* Smaller than standard 960 (devices and browsers) */
/*@media only screen and (max-width: 959px) {}*/

/* Tablet Portrait size to standard 960 (devices and browsers) */
/*@media only screen and (min-width: 768px) and (max-width: 959px) {}*/

/* All Mobile Sizes (devices and browser) */
/*@media only screen and (max-width: 767px) {}*/

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
/*@media only screen and (min-width: 480px) and (max-width: 767px) {}
*/
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
/*@media only screen and (max-width: 479px) {}*/

.box-gray{
	position: fixed; 
	bottom: 0; 
	right: 10px; 
	z-index: 1; 
	background-color: #ccc;
	padding: 8px 10px 10px 8px;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
}

.box-gray .head{
	text-align: center;

}

.switch_box{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}

.input_wrapper{
  width: 80px;
  height: 40px;
  position: relative;
  cursor: pointer;
}

.input_wrapper input[type="checkbox"]{
  width: 80px;
  height: 40px;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #315e7f;
  border-radius: 30px;
  position: relative;
  outline: 0;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.input_wrapper input[type="checkbox"]:after{
  position: absolute;
  content: "";
  top: 3px;
  left: 3px;
  width: 34px;
  height: 34px;
  background: #dfeaec;
  z-index: 2;
  border-radius: 30px;
  -webkit-transition: all .35s;
  transition: all .35s;
}

.input_wrapper span{
	display: block;
  position: absolute;
  top: 50%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  fill: #fff;
  -webkit-transition: all .35s;
  transition: all .35s;
  z-index: 1;
}

.input_wrapper .is_checked{
  width: 18px;
  left: 15%;
  -webkit-transform: translateX(190%) translateY(-30%) scale(0);
          transform: translateX(190%) translateY(-30%) scale(0);
}

.input_wrapper .is_unchecked{
  width: 15px;
  right: 22%;
  -webkit-transform: translateX(0) translateY(-30%) scale(1);
          transform: translateX(0) translateY(-30%) scale(1);
}

/* Checked State */
.input_wrapper input[type="checkbox"]:checked{
  background: #23da87;
}

.input_wrapper input[type="checkbox"]:checked:after{
  left: calc(100% - 37px);
}

.input_wrapper input[type="checkbox"]:checked + .is_checked{
  -webkit-transform: translateX(0) translateY(-30%) scale(1);
          transform: translateX(0) translateY(-30%) scale(1);
}

.input_wrapper input[type="checkbox"]:checked ~ .is_unchecked{
  -webkit-transform: translateX(-190%) translateY(-30%) scale(0);
          transform: translateX(-190%) translateY(-30%) scale(0);
}

/*// Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575px) {
	body{
		padding-top: 50px;
	}

	.sectionHome h1{
		font-size: 20px;
	}

	.sectionHome h2{
		font-size: 18px;
	}
}

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767px) {
	body{
		padding-top: 50px;
	}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991px) {
	
}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199px) {

}

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}