html,body{display:block; overflow-x:hidden; margin:0; overflow-y:auto; -webkit-overflow-scrolling: touch; }
body{font-family: 'Open Sans', Arial, Helvetica, sans-serif;font-size:13px;color:#3d3d3d;background: #022737;}
iframe{vertical-align: middle;}
a{ text-decoration: none; outline: 0; border:none;  color:#333;  }
img{vertical-align:middle; max-width:100%;}
p{margin:10px 0;}
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ul{margin:0; padding:0; list-style:none;}
hr{border:0; border-top:1px solid #e0e0e0; margin:0; }
.clear{clear:both; height:0px;}
.container{
	position:relative;
	max-width: 980px;
	margin:0 auto;
}
.container:after, ul:after{content:''; display:block; clear:both; }
.container > .col{ float:left; }
.table{
	border-collapse:collapse; border: 1px solid #f0f0f0
}
.table td{
	padding: 10px;
}
input{
	font-family: inherit;
}
input:disabled{
	background: transparent;
}



#topmenu, #header, #body, #footer{ width:100%; }


/* ===================== */
.nav_bar  {display:block;margin: 8px 0;padding: 0px 10px 0px 30px;overflow:hidden;background: #fff url('../images/home.png') no-repeat left 5px center;background-size:20px;/* border-bottom:1px dashed #e0e0e0; */border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;height: 0;}
.nav_bar  li{display:inline-block; vertical-align:top;}
.nav_bar a{display:inline-block;padding: 0px 24px 0px 10px;height:28px;line-height: 28px;background: url('../images/breadcrumb-arrow.png') no-repeat center right;vertical-align:top;/* font-family: roboto; */color: #999;}
.nav_bar a:hover{ color: #000; }
.nav_bar li.last a{background:none !important;  color:#F34F4F; font-weight:600; }
.nav_bar li.last:hover a{color:black; text-decoration:none;}
#phantrang{margin:10px 2%;  font-family:Tahoma, Geneva, sans-serif; display:block; text-align:center;}
#phantrang ul li a{padding:4px 8px; font-size:11px; line-height:24px; border:1px solid #ddd; margin-left:5px; color:#777; border-radius: 5px ; -moz-border-radius: 5px ; -webkit-border-radius: 5px ;}
#phantrang ul li a:hover{background-color: #eee;}
#phantrang ul li.selected a{color:#999; font-size:11px; padding:4px 8px; background-color: #eee; line-height:24px; border:1px solid #ddd;  margin-left:5px; border-radius: 5px ; -moz-border-radius: 5px ; -webkit-border-radius: 5px ; }
#flashbox{
	display: none;
	left: 0;
	right: 0;
	background:rgb(255,255,255);
	color: #969696;
	line-height: 18px;
	min-height: 90px;
	padding: 15px 40px 25px 80px;
	position:fixed;
	margin:0px auto;
	top:300px;
	z-index:9999999;
	max-width: 420px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	border: 1px solid #e0e0e0;
}
#flashbox h2{
	margin: 0 0 8px 0;
	font-weight: 500;
	font-size: 18px;
	color: #17b4bb;
}
#flashbox i{
	position: absolute;
	left: 25px;
	top: 25px;
	font-size: 32px;
	color: #aaa;
}
#flashbox span{
	display: block;
	padding:0 2px;
}

.share{ margin-top:10px;}
.share div{vertical-align:bottom !important;}
.info{
	line-height: 20px;
	color: #aaa;
	margin: 0;
	font-size: 12px;
}
.info img{ 
	display: inline-block; 
	vertical-align: top; 
	margin-top:3px; 
	margin-right: 5px;
}
.info span{
	margin-left:200px;
}

.jcarousel > div {
    position: relative;
    overflow: hidden;
}

.jcarousel > div > ul {
    width: 20000em;
    position: relative;

    /* Optional, required in this case since it's a <ul> element */
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel > div > ul > li {
    /* Required only for block elements like <li>'s */
    float: left;
}


.fancyvid{
	display: block;
	position: relative;
}
.fancyvid:before{
	content: '';
	background: rgba(255,255,255,0.75) url('../images/play.png') no-repeat center center;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* ===================== */
.leftside{position:absolute; right:50%; margin-right:490px; top:650px; width:200px; display:block; overflow:hidden; text-align:right;}
.leftside.dynamic{position:fixed; top:25px; }
.rightside{position:absolute; left:50%; margin-left:490px; top:650px; width:200px; display:block; overflow:hidden; text-align:left;}
.rightside.dynamic{position:fixed; top:25px; }

.thumbnail{

}
.thumbnail > li{
	float: left;
	width: 33.3333%;
	padding: 0 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.thumbnail > li > div{
	height: 360px;
	background: #fff;
	color: #444;
	padding: 16px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
.thumbnail .title{
	font-size: 15px;
	font-weight: bold;
	display: block;
	line-height: 20px;
	margin: 0 4px 5px 4px;
}
.side .thumbnail .title{
	color: #fff;
}
.thumbnail .title:hover{
	text-decoration: underline;
}
.thumbnail .images{
	display: block;
}
.thumbnail .images img{
	width: 100%;
}
.thumbnail p{
	line-height: 20px;
}

@media only screen and (max-width: 768px){
	.thumbnail{
		white-space: nowrap;
		overflow-y: scroll;
	}
	.thumbnail > li{
		display: inline-block;
		vertical-align: top;
		float: none;
		white-space: initial;
		width: 50%;
		padding: 10px 0;
	}
	.thumbnail > li > div{
		width: 300px;
		margin: 0 auto;
	}
}
@media only screen and (max-width: 610px){
	.thumbnail{
		
		overflow-y: scroll;
	}
	.thumbnail > li{
		width: 100%;
	}
}

.side .thumbnail > li{
	width: 100%;
	padding:0 0 5px 0;
	margin-bottom: 20px;
	border-bottom: 1px solid #5A727D;
	/* background: #fff; */
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
.side .thumbnail > li .images{
	margin-bottom: 5px;
	position: relative;
}
.side .thumbnail > li .images:before{
	position: absolute;
	content: '';
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(241, 220, 109, 0.89) url('../images/zoom-in.png') no-repeat center top 50px;
}
.side .thumbnail > li:hover .images:before{
	display: block;
}

/* Thumb, name and desc list */
.list-thumb li{margin: 0 0 15px 0;padding-top: 15px;border-top: 1px solid #5A727D;}
.list-thumb li:first-child{border:0;}
.list-thumb li:after{content:''; display:block; clear:both;}
.list-thumb .images{float:left;margin: 0px 15px 5px 4px;background:#fff url('../images/icon-link.png') no-repeat center center;display:block;}
.list-thumb .images img{width: 93px; height:79px;}
.list-thumb .images:hover > img{opacity:0.5;}
.list-thumb .title{margin: 0; line-height: 18px; display: block;font-weight: bold;font-size: 12px;}
.side .list-thumb .title{ color: #fff; }
.list-thumb .title:hover{text-decoration:underline;}
.list-thumb p{ margin:0; font-size: 12px; }
.list-thumb .seemore{
	color: red;
	font-size: 12px;
	font-style: italic;
}

.list-thumb.big .images{width: 190px;height: 130px;padding:4px;border:1px solid #ddd;overflow:hidden;margin-top: 5px;}
.list-thumb.big .images img{width: 180px;height: 120px;-webkit-transition: -webkit-transform 0.25s ease-in-out;-moz-transition: -moz-transform 0.25s ease-in-out;-ms-transition: -ms-transform 0.25s ease-in-out;-o-transition: -o-transform 0.25s ease-in-out;}
.list-thumb.big .images:hover img{}

.list li{margin:0;}
.list li a{display:block; padding:4px 0 4px 20px; background:url('../images/icon5.png') no-repeat left top 6px; font-weight:bold; font-size:12px; color:#656565;}
.list li:hover a{color:#75a43a;}

@media only screen and (max-width:980px){
	.list-thumb.big .info span{
		margin-left: 0;
		float: right;
	}
}
@media only screen and (max-width:420px){
	.list-thumb.big .images{
		width: 260px;
		height: auto;
		margin: 10px auto;
		float: none;

	}
	.list-thumb.big .images img{
		width: 100%;
		height: auto;
	}
}

.tabs{
	display: block;
	text-align: center;
}
.tabs > li{
	display: inline-block;
	vertical-align: top;
}
.tabs > li > a{
	display: block; 
	padding: 6px 12px;
	background: #fff;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	margin: 4px 8px;
}
.tabs > li:hover > a, .tabs > li.active > a{
	color: #009bdf;
}

/* Special grid for product */
.grid > li{
	float: left;
	position: relative;
	width: 245px;
	height: 162px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px;
}
.grid .images{
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	overflow:hidden; 
	position:relative; 
	display: block; 
	background: #dadada;
}
.grid .images img{
	width: 100%;
	max-height: 142px;
}
.grid .title{
	position: absolute;
	display: none;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	background: rgba(241, 220, 109, 0.89) url('../images/search1.png') no-repeat center top 50px;
	color: white;
	line-height: 20px;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	padding: 80px 15px 15px 15px;
}
.grid li:hover .title{
	display: block;
}

.main .grid li{
	width: 33.3333%;
	padding: 10px 0;
}
.main .grid .images{
	width: 225px;
	height: 142px;
	margin: 0 auto;
}
.main .grid .title{
	width: 225px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

@media only screen and ( max-width: 980px ){
	.grid > li{
		width: 33.3333%;
		padding: 10px 0;
	}
	.grid > li .images{
		width: 245px; 
		margin:auto;
	}

	.main .grid li{
		width: 50%;
	}
}
@media only screen and ( max-width: 750px ){
	.grid > li{
		width: 50%;
	}
	
	.main .grid li{
		width: 33.333%;
	}
}
@media only screen and ( max-width: 720px ){
	.main .grid li{
		width: 50%;
	}
}
@media only screen and ( max-width: 500px ){
	.grid > li{
		width: 100%;
	}

	.main .grid li{
		width: 100%;
	}
}



#popup .popup{display:block; width:480px; position:relative; margin:100px auto; text-align:center;}
#popup .popup img{max-width:480px;}
#popup .close{position:absolute; top:-18px; right:-18px; width:36px; height:36px; background:url('../images/close.png') no-repeat center center;}

#captcha_refresh{float:right;margin-right:10px;background:url('../images/ajax-refresh-icon.png') no-repeat right top;width:16px;height:16px;margin-top: 0px;}
#captcha_image{float:right; }

#flashbox{left: 0; right: 0; background:rgba(0,0,0,0.8); color:#fff; line-height:24px; padding:20px 40px; position:fixed; margin:0px auto; top:300px; z-index:9999999; display:none; text-align: center; max-width: 400px;}

#loading{margin: 20px auto; width:94px; height:94px; overflow:hidden; position:relative; padding-right:100px; background:url('../images/loading.png') no-repeat left top; -webkit-animation:loading 5s infinite linear; 	-moz-animation:loading 5s infinite linear; 	-o-animation:loading 5s infinite linear; 	animation:loading 5s infinite linear;}
#loading span{position:absolute; right: 20px; line-height:94px; font-size:14px;}
@keyframes loading{ 
0% 		{background-position-y:0px;}
18% 	{background-position-y: 0px;	}
18.0001% 	{background-position-y: -94px;	} 
36% 	{background-position-y: -94px;	} 
36.0001% 	{background-position-y: -188px;	} 
54% 	{background-position-y: -188px;	} 
54.0001% 	{background-position-y: -376px;	} 
72% 	{background-position-y: -376px;	} 	
72.0001% 	{background-position-y: -282px;	} 	
90% 	{background-position-y: -282px;	} 
90.0001% 	{background-position-y: -470px;	} 
99.999% 	{background-position-y: -470px;	} 
100% 	{background-position-y: 0px;	} 
}
@-moz-keyframes loading{ 
0% 		{background-position-y:0px;}
18% 	{background-position-y: -94px;	} 
36% 	{background-position-y: -188px;	} 
54% 	{background-position-y: -282px;	} 
72% 	{background-position-y: -376px;	} 	
90% 	{background-position-y: -470px;	} 
}
@-o-keyframes loading{ 
0% 		{background-position-y:0px;}
18% 	{background-position-y: -94px;	} 
36% 	{background-position-y: -188px;	} 
54% 	{background-position-y: -282px;	} 
72% 	{background-position-y: -376px;	} 	
90% 	{background-position-y: -470px;	} 
}
@-webkit-keyframes loading{ 
0% 		{background-position-y:0px;}
18% 	{background-position-y: -94px;	} 
36% 	{background-position-y: -188px;	} 
54% 	{background-position-y: -282px;	} 
72% 	{background-position-y: -376px;	} 	
90% 	{background-position-y: -470px;	} 
}

.statistic{padding: 10px 0;}
.statistic p{line-height:20px;  margin:0 0 5px 0; padding:0;}
.statistic p:first-child{color:#FE8D1F; font-weight:600;}
.statistic p img{margin:0 10px 0 10px;}
.statistic p span{display:inline-block;width: 140px;vertical-align: top;font-weight:normal;color: #FFF;}

.table{width:100%; border:1px solid #959595; border-collapse:collapse;  margin:10px 0;}
.table td,.table th{border:1px solid #959595; padding:6px 0; text-align:center; color:#6c6b6b;}
.table th{background:#e2e2e2;}
.table input[type="number"]{width: 30px; }

@media only screen and (max-width:900px){
	.table{display: block; overflow-x:auto;}
	.table tbody{display:table; width:900px;}
}

#topmenu,#header,#body,#footer{width:100%;}
#topmenu{
	height:38px;  
	position:relative;
	background: #035273;
}
#topmenu p{
	margin: 0;	 
	color: #fff;
	line-height: 38px;
}
#topmenu ul{float:right;}
#topmenu ul li{display:inline-block; vertical-align:top; }
#topmenu ul li a{display:block;height: 38px;width: 30px;padding:7px 3px;color: #c8c8c8;font-size: 18px;text-align: center;}
#topmenu ul li:hover a{
	color: #fff;
}
#topmenu ul li a img{vertical-align:top; opacity:0.3; }
#topmenu ul li a:hover img{opacity:1;}

#header{padding:1px 0;height: 124px;background: #0f5877 url('../images/header.png') no-repeat center center;position: relative;z-index: 999;box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);}
#logo { display: block;width: 400px;height: 92px;background-position: 0 center; position: relative; margin: 16px 0;}
#logo a{
	position: absolute; 
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
#header .hotline{position:absolute;right:0px;top: 25px;background:url('../images/hotline.png') no-repeat left center;padding-left: 182px;color: #ffd800;}
#header .hotline strong{float:left;font: bold 32px/48px sans-serif;padding:0 15px;border-left: 1px solid #FFFFFF;}

@media only screen and (max-width:768px){
	#logo{
		width: 100%;
		background-position: center center;
	}
	#header .hotline{
		display: none;
	}
}
@media only screen and (max-width: 480px){
	#logo{
		background-size: 92% auto;
		
	}
	
}

#mainmenu{height: 48px;position:relative;background:#035273;}
#mainmenu > div > ul > li{float:left; position:relative;}
#mainmenu > div > ul > .last{
	float: right;
	position: relative;
}
#mainmenu > div > ul > .last input[type="text"]{
	height: 28px;
	border:0;
	margin: 9px 0;
	padding: 1px 28px 1px 8px;
}
#mainmenu > div > ul > .last input[type="submit"]{
	height: 24px;
	width: 24px;
	background: url('../images/search.png') no-repeat center center;
	border: 0;
	position: absolute;
	right: 4px;
	top: 10px;
}
#mainmenu > div > ul > li > a{display:block;color: #fff;font: bold 14px/48px 'Roboto';padding:0 20px;text-transform: uppercase;}
#mainmenu > div > ul > li:hover > a{background: #FFD800;color: #333;}
#mainmenu > div > ul > li > ul{position:absolute;top: 48px;left:0px;width:200px;background: #011D29;display:none;z-index: 99999;}
#mainmenu > div > ul > li:hover > ul{display:block;}
#mainmenu > div > ul > li > ul > li{position:relative;border-top: 1px solid #03222F;}
#mainmenu > div > ul > li > ul > li > a{display:block; padding:4px 10px; color:#fff;}
#mainmenu > div > ul > li > ul > li:hover > a{background: #283947;}
#mainmenu > div > ul > li > ul > li > ul{position:absolute; left:200px; top:-1px; border-top:1px solid #283947; background: #283947; width:200px; display:none;}
#mainmenu > div > ul > li > ul > li:hover > ul{display:block;}
#mainmenu > div > ul > li > ul > li > ul > li{border-top: 1px solid #283947;}
#mainmenu > div > ul > li > ul > li > ul > li > a{display:block; padding:4px 10px 4px 24px; color: #728697; position:relative; }
#mainmenu > div > ul > li > ul > li > ul > li > a:before{content:''; position:absolute; left:8px; top: 14px; width:5px; height:5px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; background: #3B5061; }
#mainmenu > div > ul > li > ul > li > ul > li:hover > a{color:#fff;}
#mainmenu > div > ul > li > ul > li > ul > li:hover > a:before{background:#fff;}

@media only screen and (max-width:768px){
	body{position:relative;}
	.container{width:100%;}

	#mainmenu{
		position: fixed;
		left: -240px;
		top: 0;
		bottom: 0;
		width: 240px;
		height: 100%;
		padding: 20px 0;
		z-index: 1000;
		overflow-y: scroll;
		background: #022737;
		transition: ease .25s;
		-webkit-transition: ease .25s;
		-moz-transition: ease .25s;
		-o-transition: ease .25s;
		-ms-transition: ease .25s;
	}
	#mainmenu > div > ul > li{
		display: block;
		float:none;
		border-top: 1px solid #08364A;
	}
	#mainmenu > div > ul > li > a{
		line-height: 20px;
		padding: 8px 10px;
		height: 34px;
		font-size: 13px;
		text-align: left;
		white-space: nowrap;
		font-weight: normal;
	}
	#mainmenu > div > ul > li:first-child > a:before{
		display: none;	 
	}
	#mainmenu > div > ul > li > ul{
		position:relative; 
		width:240px; 
		display:block; 
		top: 0;
	}
	#mainmenu > div > ul > li > ul.col > li{
		display: block;
		float: none;
		width: 240px;
		margin: 0px;
	}


	#mainmenu > div > ul > li > ul > li > a{
		color: rgba(255, 255, 255, 0.75);
		font-size: 12px;
		padding: 6px 10px 6px 20px;
	}
	#mainmenu > div > ul > li > ul > li > a:before{
		content: '';
		position: absolute;
		width: 4px;
		height: 1px;
		background: rgba(255, 255, 255, 0.4);
		top: 15px;
		left: 10px;
	}

	#mainmenu > div > ul > .last{
		width: 100%;
	}
	#mainmenu > div > ul > .last form{
		position: relative;
		padding: 0 10px;
	}
	#mainmenu > div > ul > .last input[type="text"]{
		width: 100%;

	}
	#mainmenu > div > ul > .last input[type="submit"]{
		right: 12px;
	}
	#mainmenu > div > ul > .last a{
		display: none;
	}

	.desktop{
		display: none;
	}
	#hambuger{
		display:block;
		position:fixed;
		top:10px;
		right: 10px;
		z-index: 100000; 
		padding: 8px 10px; 
		width: 44px;
		height: 33px;
	}
	#hambuger>span{display:block;background: #009BDF;height: 3px;width: 24px;position:relative;margin-top:4px;}
	#hambuger>span:nth-child(1){margin:0;}

	.moveright{
		-webkit-transform: translate3d(240px, 0, 0);
		-moz-transform: translate3d(240px, 0, 0);
		-o-transform: translate3d(240px, 0, 0);
		-ms-transform: translate3d(240px, 0, 0);
		transform: translate3d(240px, 0, 0);
	}
	#mainmenu.moveright{
		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.75);
	}
}

#slider{
	max-width:1600px; 
	max-height:440px; 
	display:block; 
	margin:0 auto;
};
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);}
#banner h1{font-weight:600; font-size:24px; line-height:28px;}
#banner p{line-height:20px;}

.section{padding: 30px 0 40px 0;}
.section h2{
	text-transform: uppercase;
	margin:  0 0 10px 0;
	line-height: 32px;
}
.section:after{content:''; display:block; clear:both;}

.call{
	background:#035273;
	color:#fff;
	font-weight:bold;
	line-height:24px;
}
	.call p{
		line-height: 24px;
		margin: 10px 0 0 0;
	}
	.call .button{float:right; font-size:15px; color:#ac214a; padding:10px 65px; background:#fff; font-weight:bold; text-transform:uppercase; 
		box-shadow:1px 1px 1px #000;
	}
	.call .button:hover{background:#ac214a; color:#fff; }
	.call i{font-size:15px; text-transform:initial; font-weight:normal; font-style:normal;  }

@media only screen and (max-width:960px){
	.call{
		padding: 30px 20px;
	}
}

@media only screen and (max-width:640px){
	.call{ padding-bottom: 80px; text-align:center; line-height:32px; }
	.call p{ float:left; width:100%;  }
	.call .button{
		float:none;
		position: absolute;
		bottom:-60px;
		display: block;
		left:50%;
		transform: translate3d(-50%, 0, 0);
		-webkit-transform: translate3d(-50%, 0, 0);
		-moz-transform: translate3d(-50%, 0, 0);
		-ms-transform: translate3d(-50%, 0, 0);
		-o-transform: translate3d(-50%, 0, 0);
		min-width: 198px;
	}
}


#body .right .thumbnail{padding: 0 5px; }
#body .right .thumbnail > li{margin: 0px; padding: 10px 0 5px 0px; width:auto; border:0; border-top: 1px solid #d6d6d6; background:none; display:block;}
#body .right .thumbnail > li:first-child{border:0;}
#body .right .thumbnail > li:after{display:none;}
#body .right .thumbnail > li > .images {display:block; position:relative; overflow:hidden;}
#body .right .thumbnail > li > .images > img{ display:block; -webkit-transition: -webkit-transform 0.25s ease-in-out; -moz-transition: -moz-transform 0.25s ease-in-out; -ms-transition: -ms-transform 0.25s ease-in-out; -o-transition: -o-transform 0.25s ease-in-out; transition: transform 0.25s ease-in-out; -webkit-transform: scale(1);   -moz-transform: scale(1);   -ms-transform: scale(1);   -o-transform: scale(1);   transform: scale(1); border: 0;width: 210px;height: 126px;}
#body .right .thumbnail > li:hover > .images > img{-webkit-transform: scale(1.2);   -moz-transform: scale(1.2);   -ms-transform: scale(1.2);   -o-transform: scale(1.2);   transform: scale(1.2);}
#body .right .thumbnail > li > .title,#body .right .thumbnail > li > p{margin:10px 0;}



.product .product-image{padding: 15px;border:1px solid #e1e1e1;position:relative;margin: 15px 0;width: 355px;float: left;}
.product .product-image .primary{width:320px;height:320px;display: table-cell;padding-bottom: 20px;vertical-align: middle;}
.product .product-image .jcarousel{margin:0 auto; position:relative;}
.product .product-image .jcarousel li{
	padding:0 1px; height: 84px;
	display: table;
}
.product .product-image .jcarousel li a{
	display: table-cell;
	vertical-align: middle;
	opacity: 0.5;
}
.product .product-image .jcarousel li.chosen a{
	opacity: 1;
}
.product .product-image .jcarousel li img{ max-height: 84px;}
.product .product-image .prev, .product .product-image .next{position:absolute;width:33px;height:44px;bottom: 20px;border:0;outline:0;cursor:pointer;}
.product .product-image .next{right: -35px;background:url('../images/arrow-right.png') no-repeat center center;}
.product .product-image .prev{left: -34px;background:url('../images/arrow-left.png') no-repeat center center;}
.product .product-image .prev:hover, .product .product-image .next:hover{opacity:0.7;}

.product .product-information{
	float:left;
	width: 310px;
	margin-left: 15px;
	font-size:13px;
	line-height:20px;
	margin-top: 20px;
}
.product .product-information .share{
	margin-left: 10px;
}
.product .product-information .line strong{
	width: 120px;
	display: inline-block;
}
.product .product-information h1{
	margin: 0 8px 10px 8px;
	line-height: 32px;
}
.product .product-information h1 strong{
	font-family: 'Roboto';
	font-weight: 500;
	
}
.product .product-information p{
	margin: 5px 10px;
	line-height: 20px;
}
.product .product-information .cat{
	color: #909090;
	margin: 0 0 10px 10px;
}
.product .product-information .cat strong{
	color: #000;
}
.product .product-information .line a{
	color: blue;
}
.product .product-information .line .basket{
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	padding: 0px 32px;
	background: #c40000;
	border: 1px solid #c40000;
	color: #fff;
	height: 40px;
	line-height: 38px;
	margin: 10px 0 10px 5px;
}
.product .product-information .line .buy{
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	padding: 0px 35px;
	background: #fff;
	border: 1px solid #c40000;
	color: #c40000;
	height: 40px;
	line-height: 38px;
	margin: 10px 0;
}
.product .product-information .line .buy i{
	/* float: left; */
}
.product .product-information .line.row{
	border-top: 1px dotted #c9c9c9;
	border-bottom: 1px dotted #c9c9c9;
	padding: 4px 0;
}

.product .product-information .line.row .col{
	border-left: 1px solid #e0e0e0;
	width: 33.333%;
	display: inline-block;
	padding: 0 20px;
}
.product .product-information .line.row .col:first-child{
	border-left:0;	
}
.product .product-information .line.row .col b{
	color: #C40000;
}
.product .product-information .brief{
	border-top: 1px solid #f0f0f0;
	margin-top: 8px;
	padding-top: 5px;
}

.product .product-information .brief ul li:before{content:''; float:left; width:13px; height:13px; margin:4px 5px 0 3px; background: url('../images/bullet.png') no-repeat; }
.product .product-information .brief ul{
	margin-left:10px;
}

@media screen and (max-width: 980px){
	#body .product .side{
		display: none;
	}
	#body .product .main{
		width: 750px;
		padding: 0 10px;
	}
	#body .product .product-information{
		width: 342px;
	}
}
@media screen and (max-width: 750px){
	#body .product .product-image{
		float: none;
		margin: 20px auto;
	}
	#body .product .main{
		width: 100%;
	}
	#body .product .product-information, #body .product .product-detail{
		width: 100%;
		padding: 0 20px;
		margin: 0;
	}
	#body .product .product-detail{
		margin-top: 30px;
	}
}



#footer{
	background: #0f5877;
	color:#fff;
	height:329px;
}
#footer > ul{
	background: #08658c;
	text-align:center;
	margin-bottom:20px;
}
#footer > ul li{display:inline-block; vertical-align:top; }
#footer > ul li a{display:block;font-size:12px;line-height:24px;margin:12px 0;padding:0 20px;color:#fff;font-weight:bold;text-transform: uppercase;}
#footer > ul li a:hover{color: #FED265;}
#footer > .container{display:table;}
#footer > .container > .col{
	display:table-cell;
	vertical-align: top;
	float: none;
}
#footer > .container > .col:nth-child(1){
	position: relative;
	width:260px; 
	text-align:center; 
	height: 214px; 
	vertical-align:middle;
}
#footer > .container > .col:nth-child(1):before{
	position: absolute;
	content: '';
	width: 358px;
	height: 173px;
	top: 50%;
	left: 50%;
	display: block;
	background: url('../images/world.png') no-repeat center center;

	transform: translate3d(-50%,-50%,0);
	-webkit-transform: translate3d(-50%,-50%,0);
	-moz-transform: translate3d(-50%,-50%,0);
	-ms-transform: translate3d(-50%,-50%,0);
	-o-transform: translate3d(-50%,-50%,0);
}
#footer > .container > .col:nth-child(2){width:200px; padding:0 10px;}
#footer > .container > .col:nth-child(3){width:220px; padding:0 15px;}

#footer > .container > .col h3{margin:  10px 0;line-height:24px;font-size: 13px;text-transform:uppercase;}
#footer > .container > .col p{
	margin:0 0 5px 0; 
	line-height:18px; 
	font-size:12px;
}
#footer > .container > .col p.phone{
	padding-left: 24px;
	background:url('../images/icon_phone.png') no-repeat 1px 2px;
}
#footer > .container > .col p.mail{
	padding-left: 24px;
	background:url('../images/icon_mail.png') no-repeat 0px 4px;
}
#footer > .container > .col p.address{
	padding-left: 24px;
	background:url('../images/icon_address.png') no-repeat 2px 2px;
}
#footer > .container > .col a{color:#fff;}
#footer > .container > .col a:hover{text-decoration:underline;}
#footer > .container > .col *{text-shadow:1px 1px 0px #000;}

#footer .copyright{height:46px;border-top: 1px solid #0D4F6B;line-height:46px;font-size:12px;}
#footer .copyright a{ color: #fff; font-weight: 600;}
#footer .copyright .gotop{float:right; }

@media only screen and (max-width:960px){
	#footer{
		height: auto;
	}
	#footer > .container > .col{
		display: none;
	}
	#footer > .container > .col:first-child, #footer > .container > .col:last-child{
		display: block;
		width: 50%;
		padding: 0 30px;
	}

	#footer > .copyright{
		padding: 0 10px;
	}
}
@media only screen and (max-width:568px){
	#footer > ul{
		height: 48px;
		overflow: hidden;
	}
	#footer > .container > .col:first-child{
		width: 100%;
	}
	#footer > .container > .col:last-child{
	 	display: none;
	}
}
@media only screen and (max-width:480px){
	#footer .copyright{
		text-align: center;
		height: auto;
		padding: 10px;
		line-height: 20px;
	}	
	#footer .copyright .gotop{
		display: block;
		float: none;
	}
}

/*===========CONTACT===========*/
#mapcont{display:block; height:400px;}
#body .contact_form{display:inline-block;width: 445px;vertical-align:top;margin:10px 10px 0px 10px;color: #fff;}
#body .contact_form>h2,#body .contact_infor>h2{ font-size:16px;}
#body .contact_form label{line-height:36px;}
#body .contact_form input[type="text"]{float:right;outline:0;color: #757575;width: 316px;margin-bottom: 5px;padding: 10px;background-color: #FFFFFF;border-bottom: 1px solid #dedede;font-family: inherit;font-size: inherit;border-top: none;border-right: none;border-left: none;}
#body .contact_form select{float:right; outline:0; color: #757575; width: 80px; margin-bottom: 15px; padding: 10px; background-color: #f4f4f4; border-bottom: 1px solid #dedede; font-family: inherit; font-size: inherit; border-top: none; border-right: none; border-left: none;}
#body .contact_form textarea{float:right;height: 135px;outline:0;width: 316px;margin-top: 2px;margin-bottom: 8px;color: #757575;background-color: #FFFFFF;border-bottom: 1px solid #dedede;font-family: inherit;font-size: inherit;border-top: none;border-right: none;border-left: none;padding:8px;}
#body .contact_form input[type="submit"]{
	float:right; 
	border: 0px solid #e0e0e0;
	outline: 0;
	font-size:15px; color:#fff; padding:10px 65px; background:#ac214a; font-weight:bold; text-transform:uppercase; 
	box-shadow:1px 1px 1px #000;
	margin: 0 0 20px 0;
	cursor: pointer;
}
#body .contact_form input[type="submit"]:hover{  }
#body .contact_form li{margin-bottom:10px;}
#body .contact_form li:after{display:block; content:''; clear:both;}
#body .contact_form img{float:right;}
#body .contact_form .errorMessage{float:right; text-align:right; width:100%; color:red;}

#body .contact_infor{display:inline-block;width: 440px;vertical-align:top;margin:10px 10px 0px 30px;color: #fff;}
#body .contact_infor h3{font-size:12px;line-height: 24px;text-transform:uppercase;margin:10px 0;color: #FFD800;}
#body .contact_infor p strong{display:inline-block;  width:90px; margin-right:10px; padding-left:24px; }
#body .contact_infor p.hotline>strong{background:url('../images/mobile.png') no-repeat 0px center;}
#body .contact_infor p.email>strong{background:url('../images/mail.png') no-repeat 0px center;}
#body .contact_infor p.address>strong{background:url('../images/address.png') no-repeat 2px center;}
#body .contact_infor p.website>strong{background:url('../images/website.png') no-repeat 0px center;}
#body .contact_infor p b{color:#444;}
#body .contact_infor a{
	color: #fff;
	font-weight: bold;
}

@media only screen and (max-width:980px){
	#body .contact_form, #body .contact_infor{
		float: left;
		width: 50%; 
		margin:0; 
		padding:0 10px 0 0; 
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box; 
		box-sizing: border-box;
	}
	#body .contact_infor{
		width: 50%; 
		padding-left: 10px;
		padding-right: 0;
	}
	#body .contact_form label{
		display:block;
		line-height: 20px;
		margin-left: 5px;
	}
	#body .contact_form input[type="text"], #body .contact_form textarea{
		float:left; 
		width:100%; 
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
}
@media only screen and (max-width:768px){
	#body .contact_form,#body .contact_infor{
		width:100%; 
		margin:0; 
		padding:0 20px; 
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box; 
		box-sizing: border-box;
	}
	#body .contact_infor{
		margin:20px 0;
	}
	#body .contact_form label{
		display:block;
	}
	#body .contact_form input[type="text"],#body .contact_form textarea{
		float:left; 
		width:100%; 
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box; 
		box-sizing: border-box
	;}
	#captcha_image{
		margin-bottom: 10px;
	}
}



.carousel-panel{
	float: left;
	width: 220px;
	height: 450px;
	background-image: url('../images/bubble.png');
	background-size: 100% 100%;
	padding: 25px;
	color: #000;
	border-bottom: 10px solid #0278aa;
	margin-bottom: 10px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.carousel-panel p{
	margin: 25px 0;
	line-height: 22px;
}
.carousel-panel .title{
	font-size: 24px;
	line-height: 140%;
	margin-top:10px;
}
.carousel-panel .title strong{
	font-size: 32px;
	text-transform: uppercase;
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e0e0e0;
}
.carousel-panel .prev, .carousel-panel .next{
	display: inline-block;
	width: 42px;
	height: 32px;
	border: 1px solid #ddd;
	cursor: pointer;
	background: url('../images/arrow-jcarousel-left.png') no-repeat center center;
}
.carousel-panel .next{
	background-image: url('../images/arrow-jcarousel-right.png');
}
.carousel-panel .prev:hover, .carousel-panel .next:hover{
	background-color: #FFD800;
}

.index{
	float: left;
	margin-left: 26px;
	width: 734px;
}
.index > div > ul > li{
	padding: 0 12px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.index > div > ul > li > div{
	background: #fff;
	height: 450px;
	color: #444444;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
.index > div > ul > li > div .images{
	display: block;
	margin-bottom:20px;
	max-height: 150px;
	overflow: hidden;
}
.index > div > ul > li > div .images img{
	width: 100%;
	border-radius: 3px 3px 0 0;
	-moz-border-radius: 3px 3px 0 0;
	-webkit-border-radius: 3px 3px 0 0;
}

.index > div > ul > li > div .title{
	margin: 4px 14px;
	display: block;
	font-weight: bold;
	font-size: 16px;
	text-transform: uppercase;
	color: #444444;
}
.index > div > ul > li > div .title:hover{
	color: #009bdf;
}

.index > div > ul > li > div hr{
	margin: 10px 14px;
	border-color: #ddd;
}
.index > div > ul > li > div p{
	text-transform: uppercase;
}
.index > div > ul > li > div p, .index > div > ul > li > div ul{
	margin: 0 14px;
}
.index > div > ul > li > div ul{
	height: 160px;
}
.index > div > ul > li > div ul li{
	border-top: 1px dashed #eee;
}
.index > div > ul > li > div ul li:first-child{
	border:0;
}
.index > div > ul > li > div ul li a{
	position: relative;
	display: block;
	line-height: 18px;
	padding: 2px 20px;
	font-weight: bold;
}
.index > div > ul > li > div ul li a:before{
	position: absolute;
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	background: #eee;
	left: 4px;
	top: 8px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
.index > div > ul > li > div ul li:hover a{
	color: #009bdf;
	font-weight: bold;
}

.index > div > ul > li > div .seemore{
	position: relative;
	overflow: hidden;
	display: block;
	background: #035273;
	margin: 10px 14px;
	padding: 6px 0;
	text-align: center;
	color: #fff;
}
.index > div > ul > li > div .seemore strong{
	position: relative;
	z-index: 10;
}
.index > div > ul > li > div .seemore:before{
	position: absolute;
	content: '';
	display: block;
	width: 400px;
	height: 400px;
	background: #009bdf;
	top: -310px;
	right: -300px;
	transform: rotateZ(50deg);
	-webkit-transform: rotateZ(50deg);
	-moz-transform: rotateZ(50deg);
	-o-transform: rotateZ(50deg);
	-ms-transform: rotateZ(50deg);

	transition: all ease 0.25s;
	-webkit-transition: all ease 0.25s;
	-moz-transition: all ease 0.25s;
	-o-transition: all ease 0.25s;
	-ms-transition: all ease 0.25s;
}
.index > div > ul > li > div .seemore:hover:before{
	transform: rotateZ(50deg) translate3d(0, 140px, 0);
	-webkit-transform: rotateZ(50deg) translate3d(0, 140px, 0);
	-moz-transform: rotateZ(50deg) translate3d(0, 140px, 0);
	-o-transform: rotateZ(50deg) translate3d(0, 140px, 0);
	-ms-transform: rotateZ(50deg) translate3d(0, 140px, 0);
}

@media only screen and (max-width:960px){
	.carousel-panel{
		width: 25%;
		margin: 0 1% 0 2.5%;
	}
	.index{
		width: 70%;
		margin: 0;
	}
}
@media only screen and (max-width:768px){
	.carousel-panel{
		width: 30%;
		margin: 0 1% 0 2.3%;
	}
	.index{
		width: 66.6666%;
	}
	.index > div > ul > li > div ul{
		overflow: hidden;
	}
}
@media only screen and (max-width:640px){
	.carousel-panel{
		width: 35%;
		margin: 0 5%;
	}
	.index{
		width: 45%;
		margin: 0 5%;
	}
}
@media only screen and (max-width:586px){
	.carousel-panel{
		width: 40%;
		margin: 0 0 0 4%;
	}
}
@media only screen and (max-width:520px){
	.carousel-panel{
		width: 48%;
		margin: 0 0 0 2%;
	}
	.index{
		width: 50%;
		margin: 0;
	}
}
@media only screen and (max-width:420px){
	.carousel-panel{
		display: none;
	}
	.index{
		width: 280px;
		margin: 0 auto;
		float: none;
	}
}

#body .main{
	float: left;
	width: 710px;
	margin-left: 25px;
	margin-bottom: 30px;
	padding: 0 15px 15px 15px;
	background: #fff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
#body .side{
	width: 245px;
	float: left;
}

#body .main .content{
	line-height: 1.8em;
}

@media only screen and (max-width:980px){
	#body > .container {
		width: 750px;
	}
	#body .main{
		width: 505px;
	}
}
@media only screen and (max-width:750px){
	#body > .container{
		width: 100%;
	}
	#body .side{
		display:none;
	}
	#body .main{
		width: 100%;
		padding: 0 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
}

#body .side .box{
	margin-top: 15px;
}
#body .side .box:first-child{
	margin-top: 0;
}
#body .side .box > *{margin:0 0px 20px 0; }
#body .side .box > .title{position:relative;background: #07384d;color:#FFF;text-transform:uppercase;margin: 0 40px 10px 0px;padding:7px 10px;font: bold 14px/24px 'Roboto';}
#body .side .box > .title:before{content:''; position:absolute; right:-38px; top:0px; border-top:19px solid transparent; border-right:19px solid transparent; border-left:19px solid #07384d; border-bottom:19px solid #07384d; }
#body .side .box > .title span{ height: 24px; display: inline-block;  }
#body .side .box > .title i{margin-right: 15px;font-size: 16px;margin-top: 2px;vertical-align: middle;}
#body .side .box .box-body{
	color: #fff;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

.side .categories{/* background: #f0f0f0; */padding: 0 0 15px 0;}
	.side .categories > li{border-top: 1px solid rgba(255, 255, 255, 0.35);position:relative;/* margin: 0 15px; */padding: 0 0 5px 0;}
	.side .categories > li:first-child{border:none;}
	.side .categories li a{display:block;line-height: 18px;padding: 6px 10px;}
	.side .categories > li > a{font-weight: bold;border-bottom: 1px dashed rgba(255, 255, 255, 0.35);color: #fff;}
	.side .categories > li > ul > li > a{padding: 4px 10px 4px 10px;color: #fff;font-weight: bold;}
	.side .categories > li > ul > li > a:before{content:'-'; margin-right:5px;}
	.side .categories > li > ul{ display:block; padding:5px 0; }
	.side .categories > li:hover > a, .side .categories > li > ul > li:hover > a{
		color: #FFD800;
	}


h1.subject{
	font-size: 24px;
	line-height: 28px;
	margin: 15px 0 20px 0;
}
h2.subject{
	font-size: 18px;
}


/* Thumb, name and desc, 2 on a line */
.ngrid .seemore{padding-top:0;}
.ngrid > li{float: left;vertical-align:top;width: 50%;line-height:18px;padding:0 10px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;height:174px;padding-top: 10px;border-top: 1px solid #eee;}
.ngrid > li:nth-child(odd){padding-left:0;width: 50%;} 
.ngrid > li:nth-child(even){padding-right:0;} 
.ngrid > li:first-child,.ngrid > li:first-child + li{border:0; padding-top:0;}
.ngrid > li .title{color:#32629e; font-weight:bold; display:block; line-height: 18px; margin: 0 0 5px 0;}
.ngrid > li .title:hover{
	color: #000;
}
.ngrid > li .images{float:left;width:180px;height: 120px;margin: 6px 15px 0 0;overflow:hidden;}
.ngrid > li .images img{width:180px;height: 120px;-webkit-transition: -webkit-transform 0.4s linear;-moz-transition: -moz-transform 0.4s linear;-ms-transition: -ms-transform 0.4s linear;-o-transition: -o-transform 0.4s linear;transition: transform 0.4s linear;}
.ngrid > li .images:hover img{-webkit-transform: scale(1.1);   -moz-transform: scale(1.1);   -ms-transform: scale(1.1);   -o-transform: scale(1.1);   transform: scale(1.1);}
.ngrid > li p{margin:5px 0; line-height: 18px;}
.ngrid > li:after{content:''; display:block; clear:both;}

@media only screen and (max-width:980px) and (min-width: 750px){
	.ngrid > li{
		height:auto;
	}
	.ngrid > li .images{
		width: 200px;
		margin: 10px auto;
		float: none;
		display: block; 
		height:auto;
	}
}
@media only screen and (max-width:568px){
	.ngrid > li{
		height:auto;
	}
	.ngrid > li .images{
		width: 100%;
		margin: 10px auto;
		float: none;
		display: block; 
		height:auto;
		text-align: center;
	}
}