/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html, button, input, select, textarea {
	color: #444;
}
body {
	font-size: 12px;
	font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
	line-height: 22px;
	overflow-x:hidden
}
a {
	color: #444;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color:#e42022;
}

::-moz-selection {
 background: #b3d4fc;
 text-shadow: none;
}
::selection {
	background: #b3d4fc;
	text-shadow: none;
}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}
img {
	vertical-align: middle;
	border: 0
}
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
textarea {
	resize: vertical;
}
.chromeframe {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}
.list-none {
	margin: 0;
	padding: 0;
	list-style: none
}
.wrap {
	width: 1200px;
	margin: 0 auto;
}
h1, h2, h3, h4, .h5 {
	font-weight: normal;
	color: #444
}
.fl-left { float:left}
.fl-right { float:right}
p { margin:0 0 2em 0}

.red { color:#F00}



/* ==========================================================================
   头部样式
   ========================================================================== */
header { background:url(headerbg.png)/*tpa=http://www.huili.com/images/headerbg.png*/; height:90px; width:100%; position:fixed; z-index:99999; }
header .wrap { position:relative}
.logo { margin-top:15px}
.nav { list-style:none; padding:0; margin:0}
.nav li { float:left; margin-left:25px; position:relative}
.nav li > a:link,.nav li > a:visited { color:#000; font-size:14px; padding:0 10px; display:block; line-height:86px}
.nav li > a:hover,.nav li > a:active,.nav li.current > a { color:#005bac;border-bottom:4px solid #005bac}

.nav li .drop { display:none; background-color:#FFF; width:140px; position:absolute; top:86px; left:0}
.nav li:hover .drop { display:block}
.nav li .drop a { color:#000; font-size:12px; padding:0 10px; display:block; line-height:34px;}
.nav li .drop a:hover { background-color:#f7f7f7}


/* ==========================================================================
  首页
   ========================================================================== */
   
/*******************banner_js**************************/
.flexslider {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.flexslider .slides > li {
	display: none;
} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
	max-width: 100%;
	display: block;
}
.flex-pauseplay span {
	text-transform: capitalize;
}
/* Clearfix for the .slides element */
.slides:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
html[xmlns] .slides {
	display: block;
}
* html .slides {
	height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {
	display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider {
	position: relative;
	zoom: 1;
}
.flexslider .slides {
	zoom: 1;
}
.flexslider .slides > li {
	position: relative;
}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {
	zoom: 1;
	position: relative;
}
/* Direction Nav */
.flex-direction-nav { list-style:none; padding:0; margin:0; display:none}
/* Control Nav */
.flex-control-nav {
	position: absolute;
	right: 25px;
	top:40%;
	z-index:99999;
}
.flex-control-nav li {
	margin: 0;
	display:block;
	zoom: 1;
}
.flex-control-nav li:first-child {
	margin: 0;
}
.flex-control-nav li a {
	width: 13px;
	height: 13px;
	display: block;
	background-color:#FFf;
	cursor: pointer;
	text-indent: -9999px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	margin-bottom:10px
}
.flex-control-nav li a:hover {
	background-color:#005bac
}
.flex-control-nav li a.active {
	background-color:#005bac
}
/*******************banner_js**************************/


.index { position:relative}
.index .body { background:url(indexbg.png)/*tpa=http://www.huili.com/images/indexbg.png*/; margin-top:-239px; z-index:99999}

.index h4 { color:#ffffff; font-size:24px;margin:0; line-height:40px; margin-bottom:10px}
.index h4 a { padding-left:10px}
.index .news { width:300px; padding-top:40px}
.index .news ul {list-style:none; margin:0; padding:0;}
.index .news ul li { margin-bottom:20px}
.index .news ul li a {line-height:24px; color:#FFF; font-size:14px}

.index .product { background:url(indexbg.png)/*tpa=http://www.huili.com/images/indexbg.png*/; margin:25px 0 0 30px; padding:16px;  }
.index .product ul li { float:left; text-align:center; margin-right:5px}
.index .product ul li a { color:#fff}
.index .product ul li a img { width:160px; height:110px}
.index .product ul li.line { width:20px;}

.index .sidle { width:300px; float:right; margin-top:25px;}
.index .sidlefont {text-align:center;color:#FFF;font-size:12px;}

/* ==========================================================================
  内页
   ========================================================================== */
.banner-about { background:url(banner-about.jpg)/*tpa=http://www.huili.com/images/banner-about.jpg*/ center no-repeat; height:310px}  
.banner-group { background:url(banner-group.jpg)/*tpa=http://www.huili.com/images/banner-group.jpg*/ center no-repeat; height:310px}  
.banner-news { background:url(banner-news.jpg)/*tpa=http://www.huili.com/images/banner-news.jpg*/ center no-repeat; height:310px}  
.banner-case { background:url(banner-case.jpg)/*tpa=http://www.huili.com/images/banner-case.jpg*/ center no-repeat; height:310px}  
.banner-contact { background:url(banner-contact.jpg)/*tpa=http://www.huili.com/images/banner-contact.jpg*/ center no-repeat; height:310px}  
.banner-stock { background:url(banner-stock.jpg)/*tpa=http://www.huili.com/images/banner-stock.jpg*/ center no-repeat; height:310px} 
	  
 
.page { background-color:#eee; padding-bottom:40px}  
.page-stock { background-color:#fff; padding-bottom:40px} 
   
.side { width:15%; margin-top:-40px; position:relative}
.side img { position:absolute; right:-13px}
.sidenav { margin-bottom:10px;}
.sidenav h4 { background-color:#005bac; color:#FFF; line-height:72px; font-size:20px; font-weight:bold; margin:0; text-align:center}
.sidenav ul { background-color:#FFF; border-bottom:2px solid #ddd;border-right:2px solid #ddd; margin-top:10px; padding-bottom:100px}
.sidenav ul li a { display:block; line-height:72px; border-bottom:1px solid #eeeeee; text-align:center; font-size:14px;color:#333333}
.sidenav ul li a:hover,.sidenav ul li a.current { background-color:#00a5e3; color:#fff}


.banner-stock .wrap { position:relative; height:310px}
.sidenav-stock { position:absolute; bottom:0}
.sidenav-stock ul li { float:left; display:block; width:140px; margin-right:5px}
.sidenav-stock ul li a { display:block; line-height:60px; background-color:#005bac; text-align:center; color:#FFF; font-size:14px;filter:alpha(opacity=80); /*IE滤镜，透明度50%*/
-moz-opacity:0.8; /*Firefox私有，透明度50%*/
opacity:0.8;/*其他，透明度50%*/}

.sidenav-stock ul li a:hover,.sidenav-stock ul li a.current { background-color:#FFF; color:#005bac;
filter:alpha(opacity=100); /*IE滤镜，透明度50%*/
-moz-opacity:1; /*Firefox私有，透明度50%*/
opacity:1;/*其他，透明度50%*/
border-bottom:2px solid #3278b6; line-height:58px
}


.main { width:80%}
.position { clear:both; line-height:60px;  font-size:12px; padding-left:20px; margin:0; text-align:right}
.main .detail { padding:30px; background-color:#FFF;border-bottom:2px solid #ddd;border-right:2px solid #ddd; min-height:400px }
.detail h4 { color:#005bac; font-size:20px; border-left:4px solid #005bac; padding-left:10px;}
.detail .ling { background-color:#eeeeee; padding:20px; margin-bottom:20px}
.detail h5 { color:#00a5e3; font-size:16px; margin:20px 0}

.detail .link { text-align:center}
.detail .link a { width:120px; font-size:1.2em; line-height:3em; background-color:#00a5e3; color:#fff; text-align:center; display:inline-block;	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px; margin-right:10px}
	
.detail .link a:hover { background-color:#005bac}
 
.newslist {
	padding-top: 10px
}
.newslist li {
	height: 40px;
	clear: both;
	padding-top: 5px;
	overflow:hidden
}
.newslist li a {
	display: block;
	line-height: 31px;
	border-left: 3px solid #c0c0c0;
	padding-left: 20px;
	font-size: 14px;
}
.newslist li a:hover {
	border-left: 3px solid #00a5e3;
	color: #00a5e3
}
.newslist li a span {
	float: right;
	margin-right: 10px
}
.pages {
	text-align: center;
	margin: 50px 0 30px 0
}
.pages span {
	display: inline-block;
	background-color: #ebebeb;
	cursor: pointer;
	padding: 6px 12px;
	margin-right: 10px;
	color: #666;
	margin-bottom:10px
}
.pages span:hover, .pages span.current {
	color: #fff;
	background-color: #00a5e3
}
.newstitle {
	text-align: center;
	font-size: 20px;
	font-weight: normal;
	margin-bottom: 20px;
	 color:#005bac
}
.info {
	text-align: center;
	color: #999;
	border-bottom: 1px dotted #ccc;
	line-height: 40px;
	margin-bottom: 20px
}


.caselist li { float:left; width:290px; overflow:hidden; margin-right:10px; margin-bottom:10px}
.caselist li a { display:block; }
.caselist li a.title { line-height:40px; text-align:center; font-size:14px;}
.caselist li a.img { width:298px; height:228px;overflow:hidden; position:relative} 
.caselist li a img { position:absolute;
transition: all 2s ease 0s;
      -webkit-transition: all 2s ease 0s;
      transform: scale(1);
      -webkit-transform: scale(1);}
	  
.caselist li a:hover img {
	transition: all 2s ease 0s;
  -webkit-transition: all 2s ease 0s;
  transform: scale(1.1);
  -webkit-transform: scale(1.1); 
	
	}




#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}

table.jobs {border-collapse:collapse;}
table.jobs th,table.jobs td{border:solid 1px #f0f0f0; padding:10px}
table.jobs th { background-color:#e5e5e5;}
table.jobs tr:nth-child(odd) { background-color:#fafafa}
.jobn h4.title { text-align:center; font-size:20px; margin-top:0;border-left:0px;}

.message { background:url(message-bg.jpg)/*tpa=http://www.huili.com/images/message-bg.jpg*/ right no-repeat; min-height:470px}
.message li { line-height:40px; margin:0 0 20px 50px}
.message li .input { height:30px; width:340px; border:1px solid #cccccc; padding-left:10px}
.message li .textarea { width:330px; height:80px; border:1px solid #cccccc;padding:10px}
.message li.button { padding-left:44px}


/* ==========================================================================
  底部
   ========================================================================== */
   
footer { background-color:#00417e; padding-top:20px; color:#FFF; clear:both}   
footer a { color:#FFF}
footer a:hover {color:#00a5e3}
.footnav { float:left;}
.footnav  li { float:left; width:120px; margin-right:60px} 
.footnav  li h3 { font-size:16px; border-bottom:1px solid #4d7aa5; line-height:40px; color:#FFF; margin-bottom:10px}
.footnav  li a { display:block;line-height:22px; font-size:14px;}
.qrcode { float:right; text-align:center; color:#FFF; margin-top:-50px}
.qrcode span { display:inline-block; width:100px; margin-left:20px}
.links { font-size:14px; line-height:30px; padding:20px 0; margin-top:10px}
.links span { font-weight:bold}
.search { float:right; border:1px solid #cccccc; margin-top:20px}
.search input { float:left; }
.search input.key {background-color:#00417e; border:0px; width:240px; line-height:28px; height:28px; padding:4px; color:#fff}
.footer { background-color:#00274b; line-height:45px; height:45px}
.footer .copyright { float:left; color:#FFF; font-size:14px}
.footer .weibo { float:right;}
.footer .weibo a {padding-left:20px}


/* ==========================================================================
   Media Queries
   ========================================================================== */
@media screen and (max-width: 1360px) { 


.index .body {  background:#333; margin-top:0px; z-index:99999}

.index .news {padding-top:30px; overflow:hidden;width:24%;}

.index .product { background:url(indexbg.png)/*tpa=http://www.huili.com/images/indexbg.png*/; margin:25px 0 0 5px; padding:10px; width:50% }
.index .product ul li { float:left; text-align:center; margin-right:5px;width:30%;}
.index .product ul li a { color:#fff; font-size:1.2em; line-height:2em}
.index .product ul li a img {width:100%;}
.index .product ul li.line { width:15px;}

.index .sidle { width:22%; float:right; margin-top:25px;}
.index .sidle img { width:100%}
.index h4{ font-size:21px; margin-bottom:0;}

}
 
   
   
@media screen and (max-width: 1200px) { 

.wrap { width:98%}
header { height:70px;}
.logo { margin-top:10px}
.logo img { width:280px}
.nav-btn { display:none}
.nav { display:block}
.nav li { float:left; margin-left:15px}
.nav li > a:link,.nav li > a:visited { color:#000; font-size:14px; padding:0 6px; display:block; line-height:66px}
.nav li .drop {top:66px;}




.footnav  li { float:left; width:110px; margin-right:60px} 
.search { display:none}
} 

@media screen and (max-width: 960px) { 

.wrap { width:96%}
.logo img { width:200px}
header { height:60px; position:static}
.nav-btn { display:block;}
.nav-btn li{ width:30px; height:6px; border-bottom:5px solid #005bac; margin-right:4px}
.nav-btn li.l1 { margin-top:10px}
.nav { clear:both; float:right; display:none; background-color:#FFF; width:40%;filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9; padding-bottom:10px}
.nav li  { display:block; float:none;}
.nav li a:link,.nav li a:visited { color:#000; font-size:1.5em; padding:0 8px; display:block; line-height:2em}
.nav li a:hover,.nav li a:active,.nav li.current a { color:#005bac;border-bottom:0}
.nav li:hover .drop { display:none}

.index { background:url(indexbg.png)/*tpa=http://www.huili.com/images/indexbg.png*/; margin-top:0px}
.index .wrap { width:100%;}
.index .news { float:none;padding:5% 5% 0 5%; width:90%;height:auto; overflow:hidden}

.index .news ul {list-style:none; margin:0; padding:0;}
.index .news ul li { margin-bottom:20px}
.index .news ul li a {line-height:24px; color:#FFF; font-size:14px}

.index .product { float:none; background:#333; margin:0;padding:0 5%;width:90%;}
.index .product ul { margin:0; padding:0;}
.index .product ul li { float:left; text-align:center; width:31%}
.index .product ul li a img {width:100%; height:auto}

.index .sidle {float:none;padding:0 5% 5% 5%;width:90%;}
.index .sidle img {width:100%;}


.side h4 { display:none;}
.side img { display:none;}
.side { float:none; width:100%; padding-top:2em;}
.sidenav ul { border-right:0;border-bottom:0; padding-bottom:0px}
.sidenav ul li { float:left; margin-right:5px; width:23%; margin-bottom:5px}
.sidenav ul li a { display:block; line-height:3em; border-bottom:0px; text-align:center; font-size:1.2em;color:#fff; background-color:#005bac; width:100% }
.sidenav ul li a:hover,.sidenav ul li a.current { background-color:#00a5e3; color:#fff}

.main { float:none; width:100%}
.main .detail p{ font-size:1em}

.caselist li { float:none; margin-right:0;}
.caselist li a img { width:100%}

.banner-contact { background:url(banner-contact.jpg)/*tpa=http://www.huili.com/images/banner-contact.jpg*/ -400px center no-repeat; height:310px}  


.banner-stock .wrap { position:relative; height:310px}
.sidenav-stock { position:absolute; bottom:0; width:100%}
.sidenav-stock ul li { float:left; display:block; width:23%; margin-right:5px; margin-top:5px}
.sidenav-stock ul li a { display:block; line-height:60px; background-color:#005bac; text-align:center; color:#FFF; font-size:14px;filter:alpha(opacity=80);}

.sidenav-stock ul li a:hover,.sidenav-stock ul li a.current { background-color:#FFF; color:#005bac;
border-bottom:2px solid #3278b6; line-height:58px}


footer {  padding-top:30px;}   
.footnav { float:none; width:100%}
.footnav  li { float:none; width:100%;border-bottom:1px solid #4d7aa5; margin-bottom:10px} 
.footnav  li h3 { font-size:1.5em; border-bottom:0px solid #4d7aa5; line-height:2em; color:#FFF; margin:0}
.footnav  li a { display:inline;line-height:28px; font-size:1.2em; padding-right:10px}
.qrcode { display:none}

.links { font-size:1em; line-height:1.5em; padding:30px 0; margin:0}
.links span { font-weight:bold; font-size:1.5em}
.copyright { float:none; width:100%; text-align:center}
.weibo { display:none} 

   
}

@media screen and (max-width: 760px) { 

.index .product { float:none; background:#333; margin:0;padding:0 5%;width:90%;}
.index .product ul { margin:0; padding:0; border-bottom:1px solid #666}
.index .product ul li { float:none; text-align:center; width:100%; margin-bottom:2%}
.index .product ul li.line { display:none}
.index .product ul li a img {width:100%; height:auto}
.index .product ul li a { font-size:1em}

}

@media screen and (max-width: 640px) { 

.caselist li { float:left; margin-right:0;}
.caselist li a img { width:100%}
   
}
   

@media only screen and (min-width: 35em) {
}
 @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
 *text-indent: -9999px;
}
.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 150%;
}
.hidden {
	display: none !important;
	visibility: hidden;
}
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}
.invisible {
	visibility: hidden;
}
.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
 *zoom: 1;
}
.clearfix img { display:block; border:0;}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
* {
	background: transparent !important;
	color: #000 !important; /* Black prints faster: h5bp.com/s */
	box-shadow: none !important;
	text-shadow: none !important;
}
a, a:visited {
	text-decoration: underline;
}
a[href]:after {
	content: " (" attr(href) ")";
}
abbr[title]:after {
	content: " (" attr(title) ")";
}
/*
     * Don't show links for images, or javascript/internal links
     */

.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
	content: "";
}
pre, blockquote {
	border: 1px solid #999;
	page-break-inside: avoid;
}
thead {
	display: table-header-group; /* h5bp.com/t */
}
tr, img {
	page-break-inside: avoid;
}
img {
	max-width: 100% !important;
}
 @page {
 margin: 0.5cm;
}
p, h2, h3 {
	orphans: 3;
	widows: 3;
}
h2, h3 {
	page-break-after: avoid;
}
}