@charset "utf-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, 
form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; }   
fieldset,img { border: 0; } 
address,caption,cite,code,dfn,em,strong,th,var,i { font-weight: normal; font-style: normal; } 
ol,ul,dl,dd { list-style: none; zoom:1; } 
caption,th { text-align: left; } 
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%;} 
q:before,q:after { content:''; } 
abbr,acronym { border: 0; }
.clearbox {border:none;border-top: 1px solid transparent !important;clear: both; 
font-size: 0;height: 0;line-height: 0;margin-top: -1px !important;visibility: hidden;}
/*-- All --*/
body{ color:#6D6D6D; text-align:center;
	font:normal 15px/200% "Microsoft YaHei",宋体,Tahoma,Helvetica,Arial,sans-serif; 
}
a{ color:#6D6D6D; text-decoration:none; outline:none;}
a:hover {color:#3F97E9; text-decoration:underline; }

/*-- Public --*/
.fl{ float:left !important; _display:inline; }
.fr{ float:right !important; _display:inline;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
body{width: 100%;min-width: 1200px; }

.siteWidth{ max-width: 1400px;min-width: 1200px;  margin:0 auto; overflow:hidden;  text-align:left; position:relative;   }
/* #content{ width:1120px; position:relative; z-index:0; margin:0 auto; overflow:hidden;  background:#fff; padding:40px; text-align:left; margin-bottom: 40px;  } */

#header{z-index:1; width:100%; height: 492px; background:url(images/body.jpg) center no-repeat;  }
#header .siteWidth .logo-box{ overflow:visible; height: 40px;margin: 28px 40px 0;}
#header .logo{ display:block; width:158px; height:36px;  float: left; background:url(images/logo.png) no-repeat; }
#header .logo-dy{width: 110px;height: 36px;border-radius: 18px;border: solid 1px #e3e3e3;line-height: 36px;text-align: center;font-size: 16px;color: #fff;display: block;float: right;margin-left: 10px;}


/* 产品概况 */
#content{clear: both;}
#content .hd{position: relative;height: 108px;line-height: 125px;margin-bottom: 30px;}
#content .hd h3{font-size: 30px;color: #4d4d4d;font-weight: 700;}
#content .hd .green-box{width: 37px;height: 5px;background-color: #d5d5d5;position: absolute;left: 0;right: 0;bottom: 0;margin: auto;}
/* box-A */
.box-A{background-color: #f5f5f5;}
.box-A .Brightspot li{width: 18%;float: left;height: 290px;padding: 38px 2% 30px;margin: 0 15px 30px;background-color: #fff;}
.box-A .Brightspot li .title{width: 100%;text-align: center;font-size: 16px;color: #333333;margin: auto;}
.box-A .Brightspot li .intro{font-size: 14px;line-height: 25px;color: #6f6f6f;margin: 20px 0 0;}
.box-A .Brightspot li i{display: block;width: 98px;height: 90px;margin: 0 auto 17px;background: url(images/Brightspot.png) 50% 25px no-repeat;transition: all 0.3s;}
.box-A .Brightspot .li2 i{background-position-y: -126px;}
.box-A .Brightspot .li3 i{background-position-y: -292px;}
.box-A .Brightspot .li4 i{background-position-y: -452px;}
.box-A .Brightspot .li5 i{background-position-y: -602px;}
.box-A .Brightspot .li6 i{background-position-y: -758px;}
.box-A .Brightspot .li7 i{background-position-y: -914px;}
.box-A .Brightspot .li8 i{background-position-y: -1064px;}
.box-A .Brightspot .li9 i{background-position-y: -1222px;}
.box-A .Brightspot .li10 i{background-position-y: -1382px;}
.box-A .Brightspot .li11 i{background-position-y: -1542px;}
.box-A .Brightspot .li12 i{background-position-y: -1698px;}
.box-A .Brightspot li:hover i{transform: rotateY(-360deg)}

/* box-B */
.box-B{background: #fff;}
.box-B .bd{padding-bottom: 20px;}
.box-B .characteristic li{width: 17%;float: left;height: 290px;margin: 0 15px 30px;position: relative;}
.box-B .characteristic li .pic img{width: 100%}
.box-B .characteristic li .intro{width: 84%;position: absolute;top: 30%;transition: all 0.3s;text-align: center;left: 8%;}
.box-B .characteristic li .intro .title{font-size: 18px;color: #fff;margin-bottom: 15px;padding-bottom: 15px;border-bottom: 1px solid #fff;}
.box-B .characteristic li .intro .msg{text-align: left;font-size: 14px;line-height: 25px;color: #fff;}
.box-B .characteristic li .shadow-box{position: absolute;top: 0px;left: 0px;right: 0px;bottom: -3px;transition: all 0.3s;}
.box-B .characteristic li:hover .shadow-box{background: rgba(255, 255, 255, 0.4);}



@media only screen and (max-width: 1400px) {
	.box-B .characteristic li .intro{
		top: 27%;
	}
}