/* CSS Document */
@font-face {
    font-family: 'kit55f-webfont';
    src: url('fonts/kit55f-webfont.eot');
    src: url('fonts/kit55f-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/kit55f-webfont.woff') format('woff'),
         url('fonts/kit55f-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'kit75f';
    src: url('fonts/kit75f.eot');
    src: url('fonts/kit75f.eot?#iefix') format('embedded-opentype'),
         url('fonts/kit75f.woff') format('woff'),
         url('fonts/kit75f.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'kit65f';
    src: url('fonts/kit65f.eot');
    src: url('fonts/kit65f.eot?#iefix') format('embedded-opentype'),
         url('fonts/kit65f.woff') format('woff'),
         url('fonts/kit65f.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
img{ border:0; margin:auto;}
*{ margin:0; padding:0;}
a,a:hover, a:focus{ text-decoration: none; color:inherit; }

body {
	background:#FFF ;
    font-family: 'kit55f-webfont';
	font-size:18px;
	color:#000;
}
.carousel-inner>.item>img {
    margin: auto;
	width:100%;
}

.cleaner {clear:both; width:100%; height:0px;}
.h30{clear:both; width:100%; height:30px;}
.h20{clear:both; width:100%; height:20px;}
.h10{clear:both; width:100%; height:10px;}
.pull-left{
	margin-left:5%;
}
#back-to-top{
	width:40px;
	height:40px;
    position: fixed;
    z-index: 9999;
    bottom: 2%;
    right: 5%;
    line-height: 0.7;
	text-align:center;
	display:none;
	background:rgba(0,0,0,0.7);
}
#back-to-top a{
	color:#FFF;
	font-size: 18px;
	line-height:0;
    text-transform: uppercase;
}
.arrow-color{
	color: #FFF;
	font-size:30px;
	line-height: 1;
	margin-top: -5px;
}
#back-to-top a:hover{
	color: #FFF;
}
.top-text{
	color:#FFF;
}
/*///////////////////////////////////////////////////////////////////////////head///////////////////////////////////////////////////////////////////////////*/

/*///////////////////////////////////////////////////////////////////////////head///////////////////////////////////////////////////////////////////////////*/
.navbar-brand{
	width:75%;
	height:80px;
	position: relative;
}
.navbar-brand>img {
    width: 2em;
    margin-top: -4%;
}
.navbar{
	border:0;
	border-radius:0;
	margin-bottom:0;
}
.navbar-default {
    border-color: transparent;
    background:url(../images/head-bg.png) top center no-repeat;
	background-size:cover !important;
	transition: all 0.3s;
}
.navbar-default .navbar-nav>li>a {
    color: #303030;
}
.navbar-toggle .icon-bar{
	width:30px;
	height:4px;
}
.navbar-default .navbar-toggle{
	margin:5% 0 0 5%;
	padding:6px 0;
}
.navbar-default .navbar-toggle .icon-bar{
    background-color: #1c1c1c;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
	color:#FFF;
    background-color: #666;
}
.navbar-default .navbar-nav>li:focus>a, .navbar-default .navbar-nav>li:hover>a{
	color:#FFF;
    background-color: #666;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
	background-color:transparent;
}
.navbar-default .navbar-toggle{
	border:0;
}
.navbar-default .navbar-brand {
    color: #fff;
	font-size:50px;
}
.nav>li>a {
    font-size: 24px;
}
.bg1 {
	background:url(../images/bg1.png) top center no-repeat;
	background-size:cover !important;
    padding: 4% 0;
}
.bg2 {
	background:url(../images/bg2.png) top center no-repeat;
	background-size:cover !important;
    padding: 3% 0 6%;
}
.xs-contact {
	text-align:center;
}
.xs-contact p {
    font-family: 'kit65f';
    color: #ff0000;
    font-size: 30px;
	margin-bottom:0;
}
.xs-contact a {
    color: #000;
    font-size:23px;
	letter-spacing: 2px;
}
.xs-icon {
	text-align:center;
	margin-top:6%;
}
.height-box {
	height:80px;
}
.slim.navbar-default {
    box-shadow: 0 0 8px rgba(0,0,0,0.5); 
}
/*///////////////////////////////////////////////////////////////////////////head///////////////////////////////////////////////////////////////////////////*/


/*///////////////////////////////////////////////////////////////////////////content///////////////////////////////////////////////////////////////////////////*/

.bg-content{
	background:#F96;
}
.content-left{
	color:#FFF;
	margin:5% 0;
	font-size:30px;
	padding:10% 0;
	text-align:center;
	background: #c34949;
}
.content-right{
	color:#FFF;
	margin:5% 0;
	font-size:30px;
	padding:10% 0;
	text-align:center;
	background:#966;
}
.head-logo {
	text-align:center;
    margin-top: 5%;
}
.product-slide {
    margin: 0 17%;
}

.bx-wrapper .bx-prev {
    left: -30px;
    background:url(../images/slide-btn1.png) center no-repeat;
}
.bx-wrapper .bx-next {
    right: -30px;
    background:url(../images/slide-btn2.png) center no-repeat;
}
.bg1-text {
	text-align:center;
}
.bg1-text h1 {
}
.bg1-text h1 span {
	color:#303030;
    font-family: 'kit65f';
}
.bg1-text h1 span.red {
	color:#fe0000;
}
.bg1-text h1 {
    font-size: 30px;
}
.bg1-text p{
	color:#ffc600;
    font-size: 30px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    font-family: 'kit65f';
}
.bg1-text p a {
	color:#ffc600;
}
.bg1-text p span {
	color:#ff0000;
}
.bg1-text img {
	width:9em;
}
.product-slide .bxslider li img {
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
.product-slide .bxslider li {
    margin: 10px !important;
}
.product-slide .bx-viewport {
    height: 95px !important;
}
.all-product-head {
	text-align:center;
	padding-bottom: 5%;
}
.all-product-head p {
    font-family: 'kit65f';
	margin:0;
	color:#FFF;
	font-size:40px;
    line-height: 1;
}
.all-product-head a {
	background:#ffff00;
	color:#000;
    font-size: 19px;
	padding: 0 5%;
}
.product-pic span a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #FFF;
    border: 1px solid #FFF;
    line-height: 1;
    padding: 0 6%;
    font-size: 23px;
}
.menu-top .dropdown-menu li {
	border:0;
}
.xs-language-box {
	text-align:center;
}
.xs-language-box a {
	color:#000;
    font-size: 24px;
}
.xs-language-box .dropdown-menu>li>a {
    padding: 0 5%;
}
.xs-language-box .dropdown-menu {
    min-width: 142px;
    left: 24%;
}
.xs-language-box .svg-inline--fa.fa-w-10 {
    font-size: 15px;
    vertical-align: baseline;
}
li .language-box{
	text-transform: none;
}
/*///////////////////////////////////////////////////////////////////////////content///////////////////////////////////////////////////////////////////////////*/


/*///////////////////////////////////////////////////////////////////////////footer///////////////////////////////////////////////////////////////////////////*/

.bg-footer{
	text-align:center;
	background: #1c1c1c;
	color:#FFF;
    font-size: 21px;
    padding: 0 9%;
}
.bg-copyright{
	background:#66ffff;
}
.bg-footer a {
	color:#FFF;
}
.copyright{
	color:#000;
	text-align:center;
    padding: 0.5% 0;
}
.copyright a{
	color:#000;
}
.social-box {
	text-transform:uppercase;
}
.footer1 h2 {
	margin:0;
}
.footer2 ul {
	list-style:none;
}
.footer2 p {
    margin-top: 12px;
}
.product-pic img {
	width:100%;
}
.product-box {
	text-align:center;
	cursor:pointer;
}
.product-text {
	background:#FFF;
	position:relative;
	text-transform:uppercase;
	padding-top: 5%;
	margin-top: 14%;
}
.product-text span {
	position: absolute;
    background: #66ffff;
    color: #FFF;
    transform: translate(-50%,0);
    left: 50%;
    top: -44%;
    width: 26px;
    line-height: 26px;
    border-radius: 24px;
    font-size: 17px;
}
.product-box2 .product-text {
	margin-top:10%;
	margin-bottom:4%;
}
.product-box:hover span {
	opacity:1;
}
.product-pic {
	position:relative;
}
.product-pic span {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    border: 1px solid #FFF;
	opacity:0;
	transition:all 0.3s;
	z-index: 1;
}
.social-box a {
	position:relative;
}s
.social-box a img {
	transition:all 0.3s;
}
.social-box a img.icon-hover {
	position:absolute;
	top: -17%;
    left: 0;
	opacity:0;
}
.social-box a:hover img.icon-hover  {
	opacity:1;
}
.brand-box {
	transition:all 0.3s;
}
.brand-box:hover {
	transform:scale(1.05)
}
/*///////////////////////////////////////////////////////////////////////////footer///////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////menu///////////////////////////////////////////////////////////////////////////*/
.dropdown-header{
	font-size:20px;
	padding:0;
}
.dropdown-menu {
    padding: 0;
    font-size: 20px;
    min-width: 100%;
    /*background-color: #ce0011;*/
    border: 0;
	color:#FFF;
}
.navbar-nav .dropdown-menu li.dropdown-submenu:hover a,
.navbar-nav .dropdown-menu li.dropdown-submenu a{
	color:#FFF !important;
}
.dropdown .dropdown-menu li.dropdown-submenu:hover {
    background: #9d171e;
	position: relative;
    transition: all 0.3s;
}
.dropdown .dropdown-menu li.dropdown-submenu:hover .dropdown-menu li:hover{
    background: #9d171e;
    transition: all 0.3s;
}
.navbar-nav .open .dropdown-menu{
    background: #ce0011;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -2px;
    margin-left: 0px;
}
.btn-group .dropdown-header {
    font-size: 18px;
    display: inline-block;
    padding: 5px 10px;
}
.font-web{
	color:#941621;
}
/*-----CATE----/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
ul.category {
	list-style:none ;
	text-align:center !important;
}
ul.category li{
    display: inline-block;
    cursor: pointer;
    font-weight: 300;
    font-size: 20px;
	color:#303030;
    text-transform: uppercase;
    padding: 5px 15px;
    border: 1px solid #303030;
    margin: 1%;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
ul.category li.active,
ul.category li:hover{
    color: #FFF;
    background: #9d171e;
    border: 1px solid #c31124;
}
/*///////////////////////////////////////////////////////////////////////////about-us///////////////////////////////////////////////////////////////////////////*/
.why-choose ul{
	list-style:none;
	line-height:2;
}
.why-choose ul li{
	cursor:pointer;
	padding-left: 60px;
	margin: 10px;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
    /*background-size:10% !important;*/
	background:url(../images/icon-why.png) top  left no-repeat;
}
.why-choose ul li:hover{
	color:#f00;
	transform: translateY(-5px);
	background: url(../images/icon-why-hover.png) top  left no-repeat;
}
.text-indexnt { text-indent:30px;}
.font-large{ font-size:120%;}
/*///////////////////////////////////////////////////////////////////////////prod///////////////////////////////////////////////////////////////////////////*/
.prod-box-detail{
	background:#FFF;
	margin:10px 0;
	padding:10px;
	position:relative;
	box-shadow:0px 0px 5px rgba(0,0,0,0.5);
}
.img-prod .box-img{
	/*width: 100%;
    float: left;
    height: auto;*/
    overflow: hidden;
    position: relative;
    padding-bottom: 80%;
}
.prod-box-detail:hover .box-img img
.box-img:hover img
{
	top: 0%;
    left: 0%;
}

.img-prod .box-img img{
    /*max-width: 100%;
    max-height: 100%;
	top: 0%;
    left: 0%;
    position: absolute;*/
	
	height: auto;
	/*height: 100%;*/
    max-width: 100%;
	max-height: 100%;
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.img-prod .box-img:hover img
{
	top: 0%;
    left: 0%;
    /*top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);*/
}

.box-img img {
    transition: all 0.3s;
}
.detail-prod{ text-align:center; }
.detail-prod .more{
	color:#FFF;
	/*width:30%;*/
	margin:10px auto;
	text-align:center;
	background: #d00e23;
	background-image: linear-gradient(to top, #590d17 0%, #d00e23 100%);
	transition: all 0.3s;
	text-shadow:0 2px 3px rgba(0,0,0,0.5);
}
.detail-prod:hover .more{
	background:#666;
}
.detail-line-clamp{
	display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
	max-height: 3.0em;
}
.img-prod{
	width:100%;
	position:relative;
	overflow:hidden;
}
.img-prod img{
	max-width: 100%;
    max-height: 100%;
	transition: all 0.3s;
}
.img-prod:hover img{
	transform: scale(1.08);
	left: 0%;
    top: 0%;
}
.img-prod span{
	z-index:1;
	opacity:0;
	color:#FFF;
	width:100%;
	height:100%;
	/*font-size:25px;*/
	text-align:center;
	padding-top:40%;
	position:absolute;
	text-transform:uppercase;
	background:rgba(0,0,0,0.5);
}
.img-prod:hover span{
	opacity:1;
}
.box-index{
	display: -webkit-box;
    -webkit-box-orient: vertical;
    position: relative;
    line-height: 1;
    text-overflow: ellipsis;
    overflow: hidden;
}
.box-index{
    -webkit-line-clamp: 2;
    height: calc(2em);
}

/*///////////////////////////////////////////////////////////////////////////trend///////////////////////////////////////////////////////////////////////////*/
.readmore{
	float:right;
	background:#b80012;
	padding:0 10px;
	color:#FFF;
}
.readmore:hover{
	background:#f8b529;
	color:#000;
	transition: all 0.6s;
}
.line-bottom{
	border-bottom:1px solid #7d7d7d;
}
.trend-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.box-img {
    position: relative;
    overflow: hidden;
    padding-bottom: 65%;
}
.box-img img {
	height: auto;
    /*max-height: 100%; 
    max-width: 100%;*/
     width: auto; 
    position: absolute;
    /*top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);*/
}
.img-prod .box-img:hover{
	transition: all 0.3s;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}
.fontred {
	color:#b00713;	
}

.product-pic{
	position: relative;
    overflow: hidden;
    padding-bottom: 75%;
    margin: auto;
    padding-bottom: 80%;
    background: #FFFFFF;
    box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
}
.product-pic img{
	height: auto;
	/*height: 100%;*/
    max-width: 100%;
	max-height: 100%;
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.path a:hover,
.path .svg-inline--fa{ color:#d00e23; }

/*///////////////////////////////////////////////////////////////////////////contact///////////////////////////////////////////////////////////////////////////*/
.map {
    width: 100%;
    height: 300px;
    box-shadow: 1px 1px 2px #c4c4c4;
    border: 10px solid #FFF;
    overflow: hidden;
    text-align: center;
}
.btn-send{
    color: #fff;
    background: #540f19;
    background-image: linear-gradient(to top, #540f19 0%, #d80d26 100%);
	border:none;
	text-align:center;
	padding:5px 10px;
	width:100%;
	line-height: 1;
}
.btn-send:hover{
	transition: all 0.6s;
	color:#f6b22a;
    background: #d80d26;
    background-image: linear-gradient(to top, #d80d26 0%, #540f19 100%);
}

.text-line-clamp {
	display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.text-indent {
	text-indent:30px;
}
.right { float:right; }
.page-title{
	color: #b80012;
    /*text-shadow: 0 1px 1px rgba(0,0,0,0.8);*/
    font-size: 4rem; /*ขอใหญ่อีกจ้า*/
	font-size: 5rem;
    line-height: 1;
	display: inline-block;
    border-bottom: 2px solid #f5ab26;
}
.page-title img{
	padding: 10px 0;
}
.font-blue { color: #083479; }
.font24{ font-size:24px; }
@media (max-width: 414px) {
	.font24 {	font-size:16px;}
	.form-horizontal,
	.contact-list li,
	.bg-white{ font-size:20px;}
	.about h1{ font-size:22px;}
}
.right { float:right; }
.contact-form ,
.contact-list{
	list-style: none;
	float:left;
}
.contact-list a h1 .fa-youtube:hover{
	color:#d72a26;
	transition: all 0.6s;
}
.contact-list a h1 .fa-facebook-square:hover{
	color:#314987;
	transition: all 0.6s;
}
.contact-list a h1 .fa-twitter:hover{
	color:#4b9cda;
	transition: all 0.6s;
}

.contact-list a h1 .fa-map-marker:hover{
	color:#ee7600;
	transition: all 0.6s;
}
.contact-list a h1 .fa-line:hover{
	color:#00b900;
	transition: all 0.6s;
}

/*///////////////////////////////////////////////////////////////////////////pagelist///////////////////////////////////////////////////////////////////////////*/


.pagelist{
 float:right;
 padding:5px;
 border-radius:0px;
 margin:0 5px 20px 5px;
}
.pagelist li{
 display:inline-block;
 font-size:23px;
 cursor:pointer;
}
.pagelist li.disabled a,
.pagelist li.disabled a:hover{
	 color:#0e0e0e;
	 transition: all 0.4s;
}
.pagelist li.disabled a,
.pagelist li.disabled a:hover{
 color:#d4d4d4;
}
.pagelist li a{
	color:#777;
	display:block;
	padding:0px 12px;
	font-style:italic;
	font-weight:bold;
}
.pagelist li a i.fa{
 font-size:18px;
 vertical-align: middle;
}

.pagelist>li:first-child>a, .pagelist>li:first-child>span , .pagelist>li:last-child>a, .pagelist>li:last-child>span {
 border-radius:0px;
}

.pagelist li a:hover{
    color: #a41f23;
	transition: all 0.4s;
    border-bottom: 1px solid #a41f23;
}
.pagelist li.active a {
    color: #a41f23;
}

/*///////////////////////////////////////////////////////////////////////////media///////////////////////////////////////////////////////////////////////////*/

@media (max-width: 767px ) {
.page-title {    font-size: 2.5rem;}
	body{
		max-width: 100% !important;
	}
	.navbar-collapse{
		position: fixed;
		width: 250px;
		background: #fff;
		height: 100vh !important;
		max-height: none !important;
		top: 0;
		display: block;
		left: -250px;
		margin: 0 !important;
		z-index: 9999;
	}
	.navbar-collapse.in{
		left: 0 !important;
	}
	.all-container{
		width: 100%;
	}
	.all-container.-collapse{
		margin-left: 250px;
	}
	.navbar-default, .navbar-collapse, .navbar-collapse.collapsing, .all-container.all-container.all-container {
		transition: all 0.5s !important;
	}
	.navbar-default.-collapse {
		margin-left: 250px;
		width:100%;
	}
}

/*///////////////////////////////////////////////////////////////////////////media///////////////////////////////////////////////////////////////////////////*/