label.error {font-size:12px; line-height:20px; color:#ff0000;}
input.error {border-color:#ff0000;}

.top {background-color:#302e3c; border-bottom:2px solid #fff; padding:5px 0;}
	.top .wrap>a, .top .wrap>p {display:block; float:left; font-size:12px; font-weight:600; line-height:30px; color:#bcbcbc;}
	.top .wrap>p {margin:0 0 0 80px;}
		.top .wrap>a:before {content:''; display:block; float:left; width:13px; height:13px; background:url('/images/sprite.png') 0 -81px; margin:8px 10px 9px 0;}
		.top .wrap>p:before {content:''; display:block; float:left; width:14px; height:14px; background:url('/images/sprite.png') -23px -80px; margin:8px 8px 8px 0;}
	.top ul {float:right; margin-right:-20px;}
		.top li {float:left;}
		.top li a {display:block; font-size:12px; line-height:30px; color:#bcbcbc; padding:0 20px;}

.header {padding:20px 0 110px;}
	.header h1 {width:300px; height:62px;}
		.header h1 a {display:block; height:62px; background:url('/images/sprite.png') 0 0; text-indent:-9999px;}
		
.menu {position:absolute; top:145px; left:0; right:0; z-index:9999;}
.menu.fixed {position:fixed; top:0;}
	.close-nav {display:none;}

	.menu>ul {background-color:#f9f9f9; box-shadow:inset 0 0 0 2px #fff, 0 0 2px rgba(0,0,0,.1); border-radius:5px; height:48px; padding:10px 0; margin:0 auto;}
	.menu>ul>li {float:left; width:16.66%; position:relative;}
		.menu>ul>li+li:before {content:''; width:1px; background-color:#f1f1f1; position:absolute; top:0; left:0; bottom:0;}
		.menu>ul>li>a {display:block; font-size:13px; font-weight:bold; color:#1e568b; text-decoration:none; line-height:20px; padding:4px 0; text-align:center;}
		.menu>ul>li>a.active:before {content:''; height:3px; background-color:#5ba72f; position:absolute; top:-9px; left:0; right:0;}
		.menu>ul>li>a.active {color:#5ba72f;}

.banner {margin:-54px auto 10px; max-width:1200px; border-radius:5px; overflow:hidden; position:relative;}
	.banner .info {position:absolute; top:0; left:0; bottom:0; background-color:rgba(48,46,60,.9); box-sizing:border-box; padding:6% 40px; border-radius:5px 0 0 5px;}
		.banner .info h2 {font-size:50px; font-weight:bold; color:#fff; line-height:62px; margin-bottom:10%; text-align:left;}
		.banner .info h2 span {color:#ccccff;}
		.banner .info h3 {font-size:15px; font-weight:600; color:#fff; margin-bottom:20px; text-align:left;}
		.banner .info p {font-size:13px; color:#fff; line-height:26px;}
		
	.banner img {display:block; width:100%; border-radius:5px;}
		
.content {padding:30px 0; box-sizing:border-box; position:relative;}	
	.image {border:1px solid #ddd; border-radius:4px; padding:2px; background-color:#fff; margin-bottom:15px!important;}
	.image img, .references img {width:100%; display:block; border-radius:2px;}
	.references li {box-sizing:border-box; border:1px solid #ddd; border-radius:4px; padding:15px; background-color:#fff; margin-bottom:15px!important;}
	.references p {margin:5px 0; line-height:18px;}
	.contact p {margin:10px 0; line-height:20px;}
			.references p:before, .contact p:before {content:''; display:block; float:left; width:12px; height:13px; background:url('/images/sprite.png') -270px -78px; margin:3px 5px 0 0;}
			.references p.phone:before, .contact p.phone:before {background-position:-288px -78px;}
			.references p.web:before, .contact p.web:before {background-position:-307px -78px;}
			.references p.fax:before, .contact p.fax:before {background-position:-327px -78px;}
	label {clear:both; display:block; margin:5px 0;}
		label span {display:block; width:150px; font-size:13px; float:left; line-height:27px;}

.news {margin:20px 0 10px;}
	.news a {display:block;}
	.news .detail {width:50px; height:90px; float:left; background-color:#302e3c; border-radius:5px; text-align:center; margin:3px 20px 15px 0;}
		.news .detail p {padding:5px 0; font-size:22px; font-weight:bold; color:#fff; line-height:24px; margin:0;}
		.news .detail p span {display:block; font-size:13px; font-weight:600; color:#97979d; line-height:14px;}
		.news .detail>span {display:block; height:42px; border-radius:0 0 5px 5px; background:#5ba72f url('/images/sprite.png') -31px -97px no-repeat; text-indent:-9999px;}
			.news .detail>span.references {background-position:10px -97px;}
	
.brands {margin:0 40px; padding:10px 0;}
	.brands img {-webkit-filter:grayscale(100%); filter:grayscale(100%); opacity:.5; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; -ms-transition:all 0.2s linear; transition:all 0.2s linear;}
	.brands img:hover {-webkit-filter:grayscale(0); filter:grayscale(0); opacity:1;}
	
.footer {background-color:#f1f1f3; padding:20px 0;}
	.footer .wrap>p {font-size:12px; color:#484848; line-height:26px; float:left;}
		.footer .wrap>p strong {display:block; font-weight:normal!important; color:#666;}
	.footer .wrap>div {float:right; font-size:0;}
		.footer .wrap>div p {display:inline-block; margin:0; line-height:26px; margin-right:20px;}
			.footer .wrap>div p:before {content:''; display:block; float:left; width:16px; height:17px; background:url('/images/sprite.png') -94px -78px; margin:4px 5px 0 0;}
			.footer .wrap>div p.phone:before {background-position:-117px -78px;}
			.footer .wrap>div p.fax:before {background-position:-142px -78px;}
		.footer .wrap>div p+p+p {margin-right:0;}
	.footer .wrap ul {clear:both; margin:0 -16px; text-align:center; font-size:0;}
		.footer .wrap ul li {display:inline-block; font-size:12px; color:#484848; line-height:20px; padding:0 10px;}

ul.pager {clear:both; float:right; margin:20px 0;}
ul.pager li {float:left;}
ul.pager li.current, ul.pager li.item, ul.pager li.first, ul.pager li.last {width:28px;}
ul.pager li a {display:block; font-size:12px; line-height:24px; margin-right:3px;}
ul.pager li.current a, ul.pager li.item a, ul.pager li.first a, ul.pager li.last a {display:block; text-align:center; border-radius:3px; border:1px solid #eee;}
ul.pager li.current a, ul.pager li.item:hover a, ul.pager li.first:hover a, ul.pager li.last:hover a {color:#ffffff; background-color:#302e3c;}
ul.pager li.previous a, ul.pager li.next a {line-height:26px; margin:0 10px;}

.detail-banner {margin:-54px auto 10px; max-width:1200px; border-radius:5px; position:relative; padding-top:54px;}
	.detail-banner>div {position:absolute; top:0; left:0; right:0; z-index:-1}
		.detail-banner>div>img {pointer-events:none; opacity:.15; width:100%; border-radius:5px;}
		.detail-banner>div>div {position:absolute; bottom:0; left:0; right:0; height:150px; background:url('/images/gradient.png') repeat-x;}
.detail-info {text-align:center;}
.list {clear:both;}
.detail-info+hr {padding-top:0;}

.vcard {display:block; margin-top:30px; font-size:13px; color:#1e568b; line-height:20px; vertical-align:middle;}
.vcard:before {content:url('/images/vcard.png'); float:left; vertical-align:middle; margin-right:10px;}

.teamviewer {display:block; background-color:rgba(255,255,255,.8); border-radius:10px; font-size:16px; font-weight:bold; color:#1e568b; padding:20px; margin-bottom:40px; text-align:center;}
.teamviewer:before {content:url('/images/teamviewer.png'); display:block; margin-bottom:10px;}

@media only screen and (max-width: 1300px) {
	.banner .info {padding:6% 30px;}
		.banner .info h2 {font-size:48px; line-height:55px; margin-bottom:10%;}
}

@media only screen and (max-width: 1200px) {
	.top .wrap>p {margin-left:40px;}
		
	.menu>ul>li>a {font-size:12px;}
		
	.footer .wrap>div {clear:both; float:none;}
	.footer .fax {margin-bottom:10px!important;}
	.footer .wrap ul {background-color:#302e3c; padding:10px; margin:0;}
		.footer .wrap ul li a {display:block; color:#fff; padding:3px 0;}
	
	.footer .wrap>p, .footer .wrap>div {text-align:center; float:none; margin-bottom:10px;}
	.footer .wrap>p strong {display:inline;}
	.footer .wrap>p strong:before {content:' / ';}
}

@media only screen and (max-width: 1100px) {
		.banner .info h2 {font-size:45px; line-height:50px; margin-bottom:8%;}
}

@media only screen and (max-width: 1024px) {
	body {padding-top:70px; background:#f7f7f7;}
	.hide {display:block!important;}
	
	.top {display:none;}
	.header {width:100%; height:50px; position:fixed; top:0; padding:5px 0; background-color:#f3f3f3; border-bottom:2px solid #fff; z-index:9999;}
	.header h1 {width:237px; height:50px; float:left; margin:0 5px;}
		.header h1 a {height:50px; background-position:-300px 0;}
	
	.overlay-nav {display:none; position:fixed!important; top:0; left:0; right:0; bottom:0; background-color:rgba(48,46,60,0.8); z-index:99999;}
	.opened .menu {right:0;}
	.open-nav {position:absolute; left:-55px; top:5px; width:50px; height:50px; background:#302e3c url('/images/sprite.png') -167px -63px no-repeat; cursor:pointer;}
	.close-nav {display:block; width:50px; height:50px; background:#707980 url('/images/sprite.png') -208px -63px no-repeat; position:absolute; top:5px; left:20px; cursor:pointer;}

	.menu {width:320px; padding:35px 20px; position:fixed; top:0; right:-360px; left:auto; bottom:0; background-color:#f3f3f3; z-index:99999;}	
	.menu>ul {clear:both; width:auto; height:auto; overflow:auto; background-color:transparent; border:none; box-shadow:none; margin-top:30px;}
		.menu>ul>li {float:none; padding:0; width:100%;}
		.menu>ul>li>a {text-align:left; font-size:18px; line-height:25px; padding:10px; border-bottom:1px solid #e5e5e5;}
		.menu>ul>li>a.active:before {content:none;}
		.menu>ul>li>a br {display:none;}
		
	.content {padding:15px;}
}

@media only screen and (max-width: 970px) {
	.banner {margin-top:-8px;}
	.banner .info {padding:4% 30px;}
		.banner .info h2 {font-size:40px; line-height:45px; margin-bottom:4%;}
		.banner .info h3 {font-size:16px; margin-bottom:0;}
	.detail-banner {margin-top:-8px; padding-top:8px;}
}

@media only screen and (max-width: 830px) {
	.banner .info {padding:4% 20px;}
}

@media only screen and (max-width: 767px) {
	.menu {width:85%; padding-left:5%; padding-right:5%; right:-95%;}
	.banner {margin-bottom:10px;}
	.banner .info {position:relative; padding-top:20px; padding-bottom:30px;}
		.banner .info br {display:none;}
		.banner .info h2 {font-size:25px; line-height:30px;}
		.banner .info h3 {font-size:18px; line-height:24px; margin-bottom:20px;}
		.banner .info p {font-size:14px; line-height:18px;}
		.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {bottom:15px!important;}
}
@media only screen and (max-width: 480px) {
	label span {float:none;}
}