@charset "utf-8";

/* color set */
@color_default:#496098;
@color_light:lighten(@color_default, 30%);
@color_dark:darken(@color_default, 20%);

/* ----------  public css ---------- */
html {background:transparent; height:100%; margin:0; padding:0; outline:0; vertical-align:top; }

body { font-size:12px; color:#7A7A7D; overflow:hidden;}

a {color:@color_default; text-decoration:none;}
a:hover {color:@color_dark; text-decoration:none;}
::-moz-selection{background-color:@color_dark; color:#fff;}
::selection {background-color:@color_dark; color:#fff;} 
h1, h2, h3, h4, h5{font-family:Microsoft YaHei,Arial,Helvetica,sans-serif; font-weight:normal;}
.price, .date{ font-weight:bold; font-family:Tahoma,Geneva,sans-serif; }

/* button & input style */
.button {padding:5px 25px; font-size:13px; font-weight:bold;  display:inline-block;  line-height:20px; background-color:@color_default; color:#fff;  transition:all 0.5s ease 0s; border-radius:4px;-moz-box-shadow:0 0 5px #999;-webkit-box-shadow:0 0 5px #999;-khtml-box-shadow:0 0 5px #999;box-shadow:0 0 5px #999;}
.button:hover{background-color:@color_dark; color:#fff;}

.button_edit{padding:2px 10px 2px 25px; font-weight:bold; display:inline-block; line-height:20px; color:#fff; border-radius:5px; background:@color_dark;  font-weight:normal; font-size:12px; text-shadow:none; position:relative;  transition:all 0.5s ease 0s;}
.button_edit:before{ position:absolute; font-size:12px; left:6px; top:3px; line-height:20px;}
.button_edit:hover{ color:#fff; background-color:#333;}

#index .button_edit{ margin-left:15px;}
#aboutus .button_edit, #news .button_edit, #product .button_edit{ margin-top:20px;}
#product .button_edit{ display:none;}

.brtools{ clear:both; height:30px; }
.detail .brtools{ margin-top:30px;}


/* ----------  wrapper ---------- */
.wrapper{margin:0; width:100%;}
.wrapper .content{width:100%; margin: 0px; position:absolute; top:80px; left:0; bottom:60px; z-index:1; background-color:#fff; overflow-x:hidden;overflow-y:auto;}
.wrapper #index{z-index:2;}

.nodata{padding:20px; background-color:@color_default; border-radius:15px; color:#fff; font-weight:bold; font-size:18px; text-align:center;font-family:Microsoft YaHei,Arial,Helvetica,sans-serif; line-height:250px; letter-spacing:2px; border:2px dashed #fff;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80); opacity: 0.8;text-shadow:0 1px 0 @color_dark;}
.nodata .font_icon{ padding-right:5px;}


/* ----------  header ---------- */
.header{width:100%; height:80px; position:fixed; background-color:@color_default; top:0; left:0; right:0; z-index:3;}
.header .logo{ height:100px; line-height:100px;  margin-left:30px; padding:0 20px; display:inline-block; font-size:20px; color:@color_default; background-color:#f8f8f8; -moz-box-shadow:0 0 10px #333;-webkit-box-shadow:0 0 10px #333;-khtml-box-shadow:0 0 10px #333;box-shadow:0 0 10px #333; border-radius:0 0 10px 10px;}
.header .logo img{max-width:300px; max-height:80px; padding:10px 10px 10px 0;}


/* menu */
.menu { height:40px; position:absolute; right:30px; top:20px;}
.menu li { display:inline; margin-right:5px; float:left; height:40px;}
.menu li a{display:block; position:relative; height:30px; font-size:14px; line-height:30px; padding:5px 10px 5px 26px; transition:all 0.5s ease 0s; border-radius:4px; color:#fff; font-family:Microsoft YaHei,Arial,Helvetica,sans-serif;}
.menu li a .font_icon{ line-height:30px; font-size:18px; position:absolute; left:9px; top:6px;}
.menu li a strong{ padding-left:8px;}
.menu li a:hover, .menu li.last a:hover{ background-color:@color_light; color:@color_dark;}
.menu li.current a, .menu li.current a:hover{color:#fff; background-color:@color_dark;  -moz-box-shadow:0 0 10px #333 inset;-webkit-box-shadow:0 0 10px #333 inset; box-shadow:0 0 10px #333 inset;}
.menu li.current a .font_icon{color:#fff;}
.menu li.last{ margin:0;}
.menu li.last a{ color:@color_dark;}

/* ----------  footer ---------- */
.footer {clear:both; position:fixed; bottom:0; left:0; right:0;  z-index:3;}

.bottomlink{ background:#282828; padding:10px 0 5px 0;}
.bottomlink ul{padding:0 30px; position:relative; left:50%; float:left;}
.bottomlink li{ float:left; position:relative; margin-right:15px; padding-right:15px; height:16px; margin-bottom:5px; border-right:1px solid @color_default; right:50%;}
.bottomlink li.last{ border:0; padding-right:0; margin-right:0;}
.bottomlink li a{ color:@color_default; line-height:14px; padding-bottom:1px; display:inline-block; border-bottom:1px dotted @color_default;}
.bottomlink li a:hover{color:#fff; border-color:#fff;}

.copyright{ color:#ccc; line-height:16px; background-color:#1c1c1c; padding:5px 30px; position:relative;}

.copyright .sharelink{ position:absolute; color:#555; right:30px; top:5px; height:16px}
.copyright .sharelink h4{ display:inline-block; line-height:16px; float:left;}
.copyright .sharelink li{ float:left; margin-left:10px; padding-left:22px; background-image:url(../images/shareicon_bg.gif); background-repeat:no-repeat; }
.copyright .sharelink li.icon1{ background-position:0 0;}
.copyright .sharelink li.icon2{ background-position:0 -16px;}
.copyright .sharelink li.icon3{ background-position:0 -32px;}

.copyright a{color:@color_dark; transition:all 0.5s ease 0s;}
.copyright a:hover, .copyright .gray:hover{color:#fff; text-decoration:none;}
.copyright .design{ padding-left:30px;}
.copyright span{ padding:0 5px;}
.copyright .gray{ color:#444;}

/* ----------  index css  ---------- */
/* banner */
.banner { width:100%; position:relative; height:45%; padding-bottom:30px; background:url(../images/loading.gif) center no-repeat;}
.slider { display:block; height:100%; list-style:none; padding:0; margin:0; position:relative; overflow:hidden;}
.slider li {width:100%; height:100%; background-position:center center; background-repeat:no-repeat; list-style:none; padding:0; margin:0; position:absolute; -moz-background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-size: cover;}
.slider li a { display:block; width:100%; height:100%;  position:relative;}

.pagination {position:absolute; height:13px; z-index:2; bottom:0; left:50%;}
.pagination li { float:left; margin:0 5px; right:50%; position:relative;}
.pagination li a { display:block;  width:13px; height:13px; _font-size:0; text-indent:-999px;  cursor:pointer; background-color:@color_default; overflow:hidden; border-radius:50%; transition:all 0.5s ease 0s;}
.pagination li.current a{ background-color:@color_dark;}
.pagination li a:hover, .pagination li.current a:hover{ background-color:#333;}


.maingroup{ clear:both; padding:0 30px;}
.mainaboutus, .mainnews, .mainproduct{ width:33%; float:left; position:relative; }
.maingroup ul, .maingroup .nodata, .maingroup p{ position:relative; z-index:2;}
.maingroup h3{ font-size:20px; line-height:30px; padding-bottom:10px; color:@color_dark; text-shadow:0 1px 0 #fff; position:relative; z-index:2;}
.mainaboutus p, .mainnews p{ line-height:24px; padding-right:30px;text-shadow:0 1px 0 #fff; position:relative; z-index:2;}
.maingroup .button{ margin-top:15px;}

.maingroup .group_bg{ width:150px; line-height:150px; font-size:110px; color:#eee; position:absolute; right:0; top:-20px; z-index:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);opacity:0.5;}
.maingroup .nodata{ border-radius:5px; line-height:80px; margin-right:20px;}

.mainproduct li{ padding-right:80px; height:70px; cursor:pointer;  position:relative; margin-bottom:10px;}
.mainproduct li .photo{width:60px;height:60px; border:5px solid @color_light; overflow:hidden; position:absolute; background-color:#fff; right:0; top:0;-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;-khtml-box-shadow:0 0 5px #ccc;box-shadow:0 0 5px #ccc; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";transition:all 0.5s ease 0s;}
.mainproduct li.over .photo{ border-color:@color_dark;}
.mainproduct li.over .productname{color:@color_dark;}
.mainproduct li .photo table {clear:both;width:60px;height:60px;table-layout:fixed;}
.mainproduct li .photo table td{margin:0; padding:0;text-align:center;vertical-align:middle;width:60px;height:60px;}
.mainproduct li .photo table td img{max-width:60px; max-height:60px; }
.mainproduct li .productname{ line-height:20px; padding:5px 0; text-shadow:0 1px 0 #fff; color:#555; display:block; white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; font-size:13px;  font-weight:bold; transition:all 0.5s ease 0s;}
.mainproduct li .productname:hover{ color:@color_dark; }
.mainproduct li p{ line-height:20px; height:40px; overflow:hidden;}


/* ----------  pages css  ---------- */
.htmledit{ clear:both; overflow:hidden; line-height:150%; }
.htmledit table, .htmledit td,  .htmledit th{ border-collapse:inherit;}
.htmledit ul, .htmledit ol{list-style:inside; margin-left:24px;}
.htmledit ol{ list-style-type:decimal;}
.htmledit ul{ list-style-type:disc;}

.detail .htmledit p{ line-height:180%; margin-bottom:5px;}
.detail .htmledit .default_p{ line-height:24px; padding-bottom:10px;}
.quoteinfo{ clear:both;line-height:20px; padding:10px 10px 10px 70px; background:#fff url(../images/icon_quotes.png) 10px 10px no-repeat; }
.detail .htmledit .default_h4{ clear:both; line-height:20px; margin-bottom:10px; color: #191919; font-size: 15px;}
.detail .htmledit .default_strong{font-size:13px; padding:0 5px;}

.content .detail{ clear:both; padding:0 30px;}
.content .page_h2{ font-size:21px; color:@color_default; line-height:40px; margin:50px 0 30px 0; position:relative; padding-left:100px;  text-shadow:0 1px 2px @color_light; border-top:1px solid @color_light; border-bottom:1px solid @color_light;}

.content .page_h2 span.font_icon{ padding:10px; width:40px; display:block; position:absolute; left:30px; top:-10px; background-color:@color_default; overflow:hidden; border-radius:50%; line-height:43px; height:40px; font-size:35px; text-align:center; color:@color_light; text-shadow:none;}

.content .page_h2 .phone{ position:absolute; right:30px; top:5px; display: inline-block; line-height:30px; padding:0 20px 0 40px; background-color:@color_light; border-radius:20px; font-size:20px; color:@color_dark;font-family: Tahoma, Geneva, sans-serif; text-shadow:0 1px 0 #fff; }
.content .page_h2 .phone em.font_icon{background:@color_dark; width:22px; line-height:22px; height:22px; display:block; position:absolute; left:8px; top:4px; border-radius:11px; text-align:center; color:#fff; overflow:hidden; font-size:14px;}

.page_h2 .button_edit{ display:none; position:absolute; right:30px; top:8px;background-color:#333; color:#fff; background-position:5px 0; }
.page_h2 .button_edit:hover{background-color:@color_light; background-position:5px -24px; color:#333;  }


.detailtitle{margin-bottom:20px; border-radius:5px; overflow:hidden; position:relative; background-color:@color_light;}
.detailtitle h4{color:@color_dark; font-size:16px; line-height:20px; padding:10px 150px 10px 15px; text-shadow:0 1px 0 #fff;}
.detailtitle .info{ position:absolute; top:10px; right:15px; line-height:20px; text-align:right; font-weight:bold;color:@color_dark;}
.nes {color:#f00; padding:0 5px;}

/* ----------  product css  ---------- */
.productlist{ clear:both; padding:0 30px 40px 30px; margin:0 auto; position:relative; min-height:180px; min-width:360px;}
.productlist li{width:150px;height:150px;position:relative; cursor:pointer; padding:5px; float:left; display:inline; margin:10px; background-color:#eee; -moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;-khtml-box-shadow:0 0 5px #ccc;box-shadow:0 0 5px #ccc; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";}
.productlist li.last{ margin-right:0;}
.productlist li p{ display:none;}
.productlist li .photo{width:150px;height:150px; background-color:#fff; position:relative; z-index:1; overflow:hidden;}
.productlist li .photo .mask{width:100%; height:100%; line-height:150px; text-align:center; background:url(../images/pop_side.png); color:#fff; font-size:60px; overflow:hidden; display: block; position:absolute; left:0; top:0; z-index:3; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0); opacity: 0;}
.productlist li .photo table {clear:both;width:100%;height:100%;table-layout:fixed;position:relative; z-index:2;}
.productlist li .photo table td{margin:0; padding:0;text-align:center;vertical-align:middle;width:100%;height:100%;}
.productlist li .photo table td img{max-width:100%; max-height:100%; }
.productlist li .productname{ position:absolute; z-index:3; width:140px; padding:0 5px; left:5px; bottom:5px; background:url(../images/slider_bg.png); line-height:25px; display:block; white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;  font-weight:bold; transition:all 0.5s ease 0s;}
.productlist li.over{ background-color:#fff;}
.productlist li.over .productname{ display:none;}

.page_navigation{clear: both;display: block;margin: 0 auto;overflow: hidden;position: absolute;width: 100%;height: 16px;left: 0;bottom:10px;text-align: center;}
.page_link {height: 12px; border-radius:50%; margin-right: 10px; text-indent: -99999px;width: 12px; display:block;display: inline-block !important;text-align: center; background-color:#fff; border:2px solid #999;}
.page_link:hover{background-color:@color_light;}
.active_page {background-color:@color_light; border:2px solid @color_default;}
.next_link, .previous_link{ display:none;}

/* ----------  popwin ----------  */
.popmask{ position:absolute;background:url(../images/slider_bg.png);border:none;height: 100%;left: 0; margin: 0;padding: 0;position: fixed;top: 0;width: 100%;z-index:3000; display:none;}
.popwin{left: 50%; margin-left:-410px; padding:10px;position: fixed; top: 50%;z-index:3001; width:800px; background: url(../images/pop_side.png); display:none;}
.popwin .hide_box{background-color:#fff; position:relative; border:1px solid #fff;}
.popwin .hide_box h3{ color:#fff; background:@color_default; border-bottom:@color_light 5px solid;font-size:16px; line-height: 20px;padding: 8px 20px 6px 10px;}
.hide_box .closebr{display: block; font-size:15px; color:@color_light; height: 16px; line-height:16px; overflow: hidden;position: absolute;right:10px;top:10px;}
.hide_box .closebr:hover{ color:#fff;}

#productdetail{margin-top:-180px;}
#productdetail .popcontent{ clear:both; padding:15px 15px 15px 350px; position:relative; min-height:310px; }
.popcontent .photo{width:300px;height:300px; border:5px solid #eee; position:absolute; left:15px; top:15px; overflow:hidden; background-color:#fff;-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;-khtml-box-shadow:0 0 5px #ccc;box-shadow:0 0 5px #ccc; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";}
.popcontent .photo table {clear:both;width:100%;height:100%;table-layout:fixed;}
.popcontent .photo table td{margin:0; padding:0;text-align:center;vertical-align:middle;width:100%;height:100%;}
.popcontent .photo table td img{max-width:100%; max-height:100%;}
.popcontent .productname{line-height:20x; display:block; text-shadow:0 1px 0 #fff; color:@color_default;font-size:16px; }
.popcontent p{ line-height:24px;  padding:10px 0 20px 0; border-bottom:1px solid @color_light; text-shadow:0 1px 0 #fff;}
.popcontent .brtools{border-top:1px solid #fff; padding-top:15px;}


/* ----------  contact us details ----------  */
.content .col-1{ width:30%;}
.content .col-2{ width:48%;}
.content .col-3{ width:20%;}

#contactus .detail, .content .from_post, .googlemap{ padding:0 30px;}

.googlemap{ height:350px;}
.googlemap iframe{ margin:0; padding:0; overflow:hidden;}
.maplink{line-height:30px; font-size:13px;transition:all 0.5s ease 0s; background-color:@color_light; display:block; text-align:center; font-weight:bold; color:@color_dark;}
.maplink:hover{background-color:@color_dark; color:#fff;}

.content .from_post{ position:relative;}

input, textarea{color:@color_default; padding:2px 6px; border-style:solid; border-width:1px; border-color:@color_default; background:#fff; line-height:24px; height:24px; transition:all 0.5s ease 0s; border-radius:2px; margin-left:100px;}
textarea{height:70px; width:40%; padding:2px 6px;  margin-left:100px;}
select{border-style:solid; border-width:1px; background:@color_default; border-color:@color_default; height:30px; color:#fff;}
input:focus, textarea:focus{color:#333; border-color:@color_dark; -moz-box-shadow:0 0 5px @color_dark;-webkit-box-shadow:0 0 5px @color_dark;-khtml-box-shadow:0 0 5px @color_dark;box-shadow:0 0 5px @color_dark;}
input.type1, select.type1{ width:40%;}
input.type2, select.type2{ width:20%;}
input.type3, select.type3{ width:10%;}
.from_post .fg{padding:0px 5px; line-height:30px; display:inline;}
.from_post .nes{line-height:30px;}
.from_post li{margin-bottom:10px; color:#555; position:relative;}
.from_post li .title{font-weight:bold; font-size:14px; line-height:20px; color:@color_dark; display:block; position:absolute; width:90px; text-align:right; left:0; top:5px;}
.from_post li .check{ clear:both; line-height:20px; color:#555; padding:5px 0 5px 5px; display:inline-block;}
.from_post li .item{ display:inline-block; margin:0 10px 5px 0; line-height:26px;}
.from_post li .check img{ padding:0 5px 0 0;}
.from_post li .codeimg{padding:10px 0 0 10px;cursor:pointer;}
.from_post .radio, .from_post .checkbox{ background:none; display:inline; border:0; padding:0px; width:13px; height:13px; margin:6px 3px 6px 0;}
.from_post .brtools{ margin:15px 0 0 100px;}


@media (max-width: 979px) {
	.wrapper .content{top:60px; bottom:30px;}
	.header{height:60px;}
	.header .logo{ height:60px; line-height:60px;  margin-left:5px; padding:0 210px 0 0;  background-color: transparent; -moz-box-shadow: none;-webkit-box-shadow: none;-khtml-box-shadow: none;box-shadow: none; border-radius:0; overflow: hidden;}
	.header .logo a{font-size:14px; color:#fff; }
	.header .logo img{max-width:100px; max-height:50px; padding:5px 5px 5px 0; float:left;}
	
	/* menu */
	.menu {right:10px; top:10px;}
	.menu li { margin-right:2px;}
	.menu li a strong{ display:none;}
	.menu li.last{ display:none;}
	
	.maingroup{ clear:both; padding:0 20px;}
	.mainaboutus, .mainnews, .mainproduct{ width:auto; float:none; position:relative; margin-bottom:30px;}
	.mainaboutus p, .mainnews p{ padding-right:0;}
	
	.bottomlink{ display:none;}
	.copyright{padding:5px 10px; text-align:center;}
	.copyright .sharelink, .copyright .design{ display:none;}
	
	.popwin{left:20px; right:20px; margin-left:0; padding:5px; top:50%; width:auto;}
	#productdetail{margin-top:-200px;}
	#productdetail .popcontent{ clear:both; padding: 10px; position:relative; height:350px; overflow-y:auto;}
	.popcontent .photo{width:180px; height:180px;  position:inherit; left: auto; top: auto; margin:0 auto 10px auto;}
	.popcontent .brtools{padding-bottom:10px;}
	
	.content .col-1{ float:none; width:auto; margin:0 20px 30px 20px;}
	.content .col-2{ float:none; width:auto; margin:0 20px 30px 20px;}
	.content .col-3{ float:none; width:auto; margin:0 20px 30px 20px;}
	
	#contactus .detail, .content .from_post, .googlemap{ padding:0;}
	.content .page_h2 .phone{ right:20px;padding:0 15px 0 35px; font-size:16px;}
	.content .page_h2 .phone em.font_icon{left:5px; top:4px; border-radius:11px; text-align:center; color:#fff; overflow:hidden; font-size:14px;}
	.googlemap{ height:300px;}
	
	input.type1, select.type1, textarea{ width:70%;}
	input, textarea{ margin-left:0;}
	.from_post li .title{ position: inherit; width:auto; text-align:left; left:auto; top:auto; margin-bottom:5px;}
	.from_post li .check{ clear:both; padding-top:5px; display:block;}
	.from_post .brtools{ margin:15px 0 0 0;}
}