@charset "utf-8";
body{ margin:0px auto; padding:0px; font-family:"microsoft Yahei"; font-size:12px; background:#FFF; color:#333; line-height:23px;}
ul,li,ol{ list-style:none; margin:0px; padding:0px;}
a{ color:#333; text-decoration: none; }
a:hover{ text-decoration:none;}


/* top ============== */

.top{ clear: both; display: block; width: 1200px; height: 115px; margin: 0px auto; position: relative; }
.logo{ height: 60px; position: absolute; left: 20px; bottom: 35px; }
.logo img{ border: 0px; height: 80px; }
.tel{ position: absolute; right: 0px; bottom: 20px; }



.menu{ clear: both; display: block; width: 100%; height:50px; background: #353638; }
.diyMenu{ clear: both; display: block; width: 1200px; margin: 0px auto; }
.diyMenu .fMenu{ float: left; display:block; text-decoration:none;position:relative; list-style:none; width: 150px; height: 50px; text-align: center; }
.diyMenu .fMenu a{ display: block; width: 150px; height: 50px; line-height: 50px; color: #fff; font-size: 14px; }
.diyMenu .fMenu a:hover{ background: #ff4b00; color: #fff; transition: all 0.3s; }
.diyMenu .fMenu .on{ background: #ff4b00; color: #fff; }

.diyMenu .submenu{ position: absolute; display: none; z-index: 3000; width: 150px; background: #fff; top: 50px; }
.diyMenu .submenu div{ position: relative; width: 100%; border-bottom: 1px solid #e3e3e3; }
.diyMenu .submenu div a{ clear: both; display: block; width: 100%; height: 45px; line-height: 45px; text-indent: 0.5em; color: #333; }

.diyMenu .submenu .thirdmenu{ position: absolute; display: none; width: 200px; background: #fff; top: 0px; left: 150px; height: auto; border-left: 1px solid #e3e3e3; }
.diyMenu .submenu .thirdmenu div{ position: relative; width: 100%; height: 45px; line-height: 45px; }
.diyMenu .submenu .thirdmenu div a{ clear: both; display: block; width: 100%; height: 45px; line-height: 45px; position: relative; text-align: left; font-size: 12px; }

.diyMenu .submenu .thirdmenu .fourmenu{ position: absolute; display: none; width: 150px; background: #fff; top: -1px; left: 150px; border: 1px solid #ccc; height: auto; }
.diyMenu .submenu .thirdmenu .fourmenu div{ position: relative; width: 100%; height: 35px; line-height: 35px; }

.havsonclass{ background: URL(../images/menuicon.png) 130px 50% no-repeat; }

/* ============ swiper ============= */
.swiper-container {	width: 100%; }
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide img{ border: 0px; max-height: 100%; }


/* banner style start */
.banner{ clear: both; display: block; width: 100%; margin: 0px auto 30px; z-index: 10; }
.mainbanner{height:500px;overflow:hidden; position:relative; }
.mainbanner_window{left:50%;width:1920px;height:500px;overflow:hidden;margin-left:-960px;position:absolute;}
.mainbanner_window ul{width:999999px;height:500px;position:relative;}
.mainbanner_window li{ width:1920px;height:500px;text-align:center;font-size:0px;float:left;display:inline;}
.mainbanner_window li img{ border:0px;}
.mainbanner_list{left:50%; bottom:20px;width:500px;height:30px;margin-left:-60px;position:absolute;}
.mainbanner_list li{width:30px;height:30px; margin:0px 3px; overflow:hidden;float:left;display:inline;z-index:20;}
.mainbanner_list li img{ z-index:100;}
.mainbanner_list a{ background:#ccc; width:15px; height:15px; line-height:15px; overflow:hidden; text-align:center; color:rgb(255, 255, 255); font-size:12px; font-weight:700;float:left; display:inline-block; }
.mainbanner_list li.active a{background:#000; }
.mainbanner_list li a:hover{background:#000; }


/* index style */
.index{ clear: both; display: block; width: 1200px; margin: 0px auto; }
.indexC{ clear: both; display: block; width: 1200px; margin: 20px auto; }
.clear, .clearC{ clear:both; display: block; }



/* index about  */
.indexAbout{ clear: both; display: block; width: 1200px; margin: 80px auto 50px; }
.indexAboutPic{ float: left; display: block; width: 530px; }
.indexAboutPic img{ border: 0px; width: 100%; box-shadow: 0px 10px 20px #555; }

.indexAboutTxt{ float: right; display: block; width: 630px; font-size: 14px; line-height: 30px; color: #666; }
.indexAboutTitle{ clear: both; display: inline-block; height: 40px; line-height: 20px; border-bottom: 1px solid #666; font-size: 20px; margin-bottom: 30px; font-weight: bold; }
.indexaboutCon{ clear: both; display: block; color: #777; font-size: 14px; line-height: 32px; }



/* index title */
.indexTitle{ clear: both; display: block; text-align: center; }
.indexTitle strong{ clear: both; display: block; height: 54px; line-height: 54px; color: #fff; font-size: 30px; }
.indexTitle strong a{ color: #043471; }
.indexTitle span{ clear: both; display: block; font-size: 14px; color: #afafaf; }


/* index product tab list  */
.indexProduct{ clear: both; display: block; height: 940px; overflow: hidden; margin: 40px 0px; padding: 60px 0px 0px; background: #353638 URL(../images/pro-bg.jpg) center top no-repeat; }
.indexProductTitle{ clear: both; display: block; text-align: center; overflow: hidden; margin: 50px auto 20px; }
.indexProductTitle span{ display: inline-block; width: 150px; margin: 0px 10px; border-radius: 6px; height: 50px; line-height: 50px; font-size: 16px; text-align: center; cursor: pointer; background: #e3e3e3; transition: all 0.5s; }
.indexProductTitle .cur{ background: #ff4b00; color: #FFF; transition: all 0.3s; }
.indexProductTitle .cur a{ color: #fff; }
.indexProductTitle div img{ clear: both; display: block; margin: 10px auto; width: 80px; height: 80px; border: 0px; }
.indexProductTitle div span{ clear: both; display: block; font-size: 18px;}

.indexProductMore{ clear: both; display: block; text-align: center; height: 50px; line-height: 50px; }
.indexProductMore a{ font-size: 14px; color: #fff; }


.indexProductList{ clear: both; display: block; width: 1200px; margin: 0px auto; }
.indexProductList div{ display: none; }
.indexProductList div div{ display: table-cell; width: 290px; height: 290px; text-align: center; vertical-align: middle;}
.indexProductList div li{ float: left; display: block; width: 290px; margin: 10px 5px 20px; overflow: hidden; position: relative; background: rgba(255,255,255,1); }
.indexProductList div li:hover{ background: rgba(0,0,0,0.3); transition: all 0.5s; }

.indexProductList a img{ border: 0px; max-width: 290px; max-height: 290px; width: 290px; height: 290px; margin: 0px; }
.indexProductList div span{ display: none; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 50px; line-height: 50px; background: rgba(0,0,0,0.5); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.indexProductList .cur{ display: block;}
.indexProductList div span a{ color: #fff; font-size: 14px; }





/* index news */
.indexNews{ clear: both; display: block; width: 1200px; margin: 50px auto; }
.indexLeft{ float: left; display: block; width: 580px; padding-bottom: 20px; border: 1px solid #e3e3e3; box-shadow: 0px 10px 10px #999; }
.indexRight{ float: right; display: block; width: 580px; padding-bottom: 20px; border: 1px solid #e3e3e3; box-shadow: 0px 10px 10px #999; }

.indexNewsTitle{ clear: both; display: block; margin: 20px; height: 95px; line-height: 95px; font-size: 28px; color: #fff; text-align: center; }
.indexLeft .indexNewsTitle{ background: #043471; }
.indexRight .indexNewsTitle{ background: #1fad75; }
.indexNewsList{ clear: both; display: block; margin: 0px 20px; }
.indexNewsList li{ clear: both; display: block; padding: 10px; height: 175px; border-bottom: 1px dashed #e3e3e3; transition: all 0.5s; }
.indexNewsList li:nth-child(2n){ border-bottom: none; }
.indexNewsList li:hover{ background: #e3e3e3; transition: all 0.5s; }
.indexNewsList li strong{ clear: both; display: block; height: 35px; line-height: 35px; overflow: hidden; text-overflow: ellipsis; white-space: normal; }
.indexNewsList li strong a{ color: #333; font-weight: normal; font-size: 16px; }
.indexNewsList li span{ clear: both; display: block; font-size: 16px; color: #043471; height: 30px; line-height: 30px; }
.indexNewsList li p{ clear: both; display: block; margin: 10px 0px; padding: 0px; }
.indexNewsList li i{ clear: both; display: block; text-align: right; }
.indexNewsList li i:hover a{ color: #f40; transition: all 0.4s; }


/* index cases */
.indexCases{ clear: both; display: block; width: 1200px; margin: 0px auto; text-align: center; }
.indexCasesTit{ clear: both; display: inline-block; margin: 0px auto; height: 54px; line-height: 24px; text-align: center; font-size: 30px; font-weight: bold; margin-bottom: 50px; border-bottom: 1px solid #666; }

.indexCasesList{ clear: both; display: block; position: relative; width: 100%; overflow: hidden; }
.indexCasesList:hover .control{display:block}
.indexCasesList{ position:relative; width:100%; height:300px;overflow:hidden; margin-bottom: 40px;}

.roll__list{ width:9999px; position: absolute; left: 0; top: 0;}
.roll__list li{ float:left; display:block; margin-right: 52px; width:260px; height:260px; text-align: center; }
.roll__list li p{ clear: both; display: block; position: relative; width: 260px; height: 260px; margin: 0px; padding: 0px; overflow: hidden; border: 1px solid #e3e3e3; background: #f7f7f7; }
.roll__list li p a{ clear: both; display: table-cell; width: 260px; height: 260px; text-align: center; vertical-align: middle; }
.roll__list li p img{ border: 0px; max-width: 100%; max-height: 100%; }
.roll__list li span{ clear: both; display: block; height: 40px; line-height: 40px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: normal; font-size: 16px; }

.control{ position:absolute; top:50%; display:none; width: 40px; height: 70px; margin-top: -35px; line-height: 70px; font-weight: bold; font-size: 40px; text-align: center; text-decoration:none; color:#fff; background-color:rgba(0,0,0,.3)}
.control:hover{background-color:rgba(0,0,0,.5)}

.control.pre{left:5px}
.control.next{right:5px}


/*left style */
.left{ float: left; display: block; width: 230px; background: #fff;}



.leftTit{ clear: both; display: block; height: 45px; line-height: 45px; background: #353638; color: #fff; font-size: 15px; text-indent: 1em; font-weight: bold; }

.leftProduct{ clear: both; display: block; border: 1px solid #e3e3e3; margin-bottom: 15px; }


.leftList{ clear: both; display: block; }
.leftList li{ clear: both; display: block; border-bottom: 1px solid #e3e3e3; }
.leftList li a{ clear: both; display: block; height: 40px; line-height: 40px; text-indent: 1em; font-size: 14px; background: #fff; }
.leftList li a:hover{ background: #ccc; color: #000; transition: all 0.5s; }
.leftList .cur a{ color: #ff4b00; font-weight: bold; }

.leftContact{ clear: both; display: block; border: 1px solid #e3e3e3; }
.leftContactTxt{ clear: both; display: block; margin: 5px 15px; font-size: 14px; line-height: 26px; }



/* right style */

.right{ float:right; width:935px; border: 1px solid #e3e3e3; }

.location{ clear: both; display: block; background: #353638; height: 45px; line-height: 45px; color: #fff; font-size: 15px; }
.locationName{ float: left; display: block; margin-left: 15px; }
.locationUrl{ float: right; display: block; margin-right: 15px; font-size: 12px; color: #fff; }
.locationUrl a{ color: #fff; }

/* sub common product */
.productOther{ clear: both; display: block; margin: 20px; }
.pageProTxt{ float: right; display: block; width: 550px; }
.pageProChannel{ clear: both; display: block; font-weight: bold; font-size: 25px; line-height: 50px; margin-bottom: 20px; color: #ff4b00; }
.pageProTitle{ clear: both; display: block; height: 40px; line-height: 40px; font-size: 16px; }
.pageProTitle strong{ float: left; display: block; color: #888; font-weight: normal; }
.pageProTitle span{ float: left; display: block; color: #666; }

.pageProTime{ clear: both; display: block; height: 40px; line-height: 40px; font-size: 16px; }
.pageProTime strong{ float: left; display: block; color: #888; font-weight: normal; }
.pageProTime span{ float: left; display: block; color: #666; }

.pageProShare{ clear: both; display: block; }

.pageProPic{ float: left; display: block; width: 300px; border: 1px solid #e3e3e3; }
.pageProPic img{ border: 0px; width: 300px; }


.pageProTab{ clear: both; display: block; margin: 20px; height: 35px; background: #e3e3e3; }
.pageProTab span{ float: left; display: block; height: 35px; line-height: 35px; padding: 0px 20px; border-right: 1px solid #fff; font-size: 14px; cursor: pointer; }
.pageProTab .cur{ background: #ff4b00; color: #fff; }


.pageProCon{ clear: both; display: block; margin: 0px 20px; }
.pageProCon img{ border: 0px; max-width: 100%; height: auto; }

.pageProConPic{ clear: both; display: block; text-align: center; }
.pageProConPic img{ border: 0px; max-width: 100%; height: auto; }



/* sub cases */
.casesList{ clear: both; display: block; width: 1200px; margin: 0px auto 20px; }
.casesList ul{ clear: both; display: block; margin-top: 20px; }
.casesList ul li{ float: left; display: block; width: 285px; height: 285px; position: relative; margin-right: 20px; }

.casesList ul li:nth-child(4n){ margin-right: 0px; }
.casesList ul li div{ clear: both; display: table-cell; width: 283px; height: 283px; text-align: center; vertical-align: middle; border: 1px solid #e3e3e3; transition: all 0.5s; background: #fff; }
.casesList ul li:hover div{ background: #e3e3e3; box-shadow: 0px 0px 20px #ccc; }
.casesList ul li div img{ border: 0px; max-width: 283px; max-height: 283px; }
.casesList ul li span{ position: absolute; left: 0px; bottom: 0px; width: 100%; display: none; height: 40px; line-height: 40px; background: rgba(0,0,0,0.4); text-align: center; }
.casesList ul li span a{ color: #fff; font-size: 14px; }

/* sub news */
.newsList{ clear: both; display: block; margin: 15px 20px; }
.newsList li{ clear: both; display: block; background: #f7f7f7; margin-bottom: 25px; padding: 15px 0px; transition: all 0.5s; }
.newsList li a{ clear: both; display: block; padding: 0px 15px; }
.newsListPic{ float: left; display: block; width: 220px; height: 140px; }
.newsListPic img{ border: 0px; width: 220px; height: 140px; }
.newsListTxt{ float: right; display: block; width: 620px; }
.newsListTxt strong{ clear: both; display: block; font-size: 18px; font-weight: normal; }
.newsListTxt i{ clear: both; display: block; height: 40px; line-height: 40px; font-size: 13px; color: #888; }
.newsListTxt p{ clear: both; display: block; height: 50px; line-height: 25px; overflow: hidden; font-size: 14px; }
.newsList li:hover{ background: #e3e3e3; box-shadow: 3px 3px 5px #ccc; transition: all 0.5s; }

.pageContent{ clear: both; display: block; width: 1200px; margin: 20px auto; }
.pageContentTitle{ clear: both; display: block; font-size: 20px; line-height: 35px; margin: 20px; text-align: center; }
.pageContentInfo{ clear: both; display: block; font-size: 14px; color: #777; height: 40px; line-height: 40px; text-align: center; }
.pageContentText{ clear: both; display: block; margin: 20px; font-size: 14px; line-height: 35px; color: #444; }




/* sub page common */
.pageTitle{ clear: both; display: block; margin: 60px 0px 40px; font-size: 28px; color: #666; text-align: center; }
.pageChannel{ clear: both; display: block; text-align: center; margin-bottom: 40px; }
.pageChannel span{ display: inline-block; border-radius: 4px; background: #e3e3e3; margin-left: 10px; }
.pageChannel a{ clear: both; display: block; padding: 0px 20px; height: 40px; line-height: 40px; font-size: 14px; border-radius: 6px; }
.pageChannel .cur{ background: #ff4b00; }
.pageChannel .cur a{ color: #fff; }

.pageInfo{ clear: both; display: block; height: 30px; line-height: 30px; text-align: center; color: #999; }
.pageText{ clear: both; display: block; margin: 20px 0px; }

.pageOneText{ clear: both; display: block; width: 1200px; margin: 0px auto; line-height: 30px; font-size: 14px; }



/* copyright */
.copyright{ clear: both; display: block; background: #353638; color: #fff; padding-top: 15px; margin-top: 50px; }
.copyright a{ color: #b4b4b4; }

.copymenu{ clear: both; display: block; width: 1200px; margin: 0px auto; }


.copyChannel{ float: left; display: block; width: 1000px; border-right: 1px solid #2a2b2d; }
.copyChannel ul{ float: left; display: block; width: 140px; }
.copyChannel ul strong{ clear: both; display: block; font-size: 14px; }
.copyChannel ul a{ display: block; width: 150px; height: 35px; line-height: 35px; }



.copyQrcode{ float: right; display: block; text-align: center; }
.copyQrcode p{ clear: both; display: block; width: 116px; height: 116px; margin: 0px; padding: 0px; background: #fff; }
.copyQrcode p img{ border: 0px; width: 100px; margin-top: 8px; }

.copytext{ clear: both; display: block; text-align: center; padding: 20px 0px; line-height: 40px; background: #2a2b2d; margin-top: 25px; }



/* pro list */
.picList{ clear: both; display: block; }
.picList ul{ padding: 20px 0px; }
.picList li{ float: left; display: block; width: 200px; margin-left: 25px; margin-bottom: 15px; }
/*.picList li:nth-child(4n){ margin-right: 0px; }*/
.picList li div{ clear: both; display: table-cell; width: 200px; height: 200px; text-align: center; vertical-align: middle; border: 1px solid #e3e3e3; transition: all 0.5s; }
.picList li:hover div{ box-shadow: 0px 0px 20px #666; transition: all 0.5s; }
.picList li img{ border: 0px; max-width: 200px; max-height: 200px; }
.picList li span{ clear: both; display: block; height: 40px; line-height: 30px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.pagePic{ clear: both; display: block; margin: 20px 0px; text-align: center; }
.pagePic img{ border: 0px; max-width: 80%; }



/* page list */
.pageList{ clear: both; display: block; text-align: center; }
.pageList a, .pageList b{ display: inline-block; margin-left: 10px; padding: 0px 10px; height: 30px; line-height: 30px; border-radius: 3px; transition: all 0.5s; }
.pageList a{ background: #e3e3e3; }
.pageList a:hover{ background: #ff4b00; color: #fff; transition: all 0.5s; }
.pageList b{ background: #ff4b00; color: #fff; }

.page{ clear: both; display: block; margin: 20px; padding-top: 10px; border-top: 1px solid #ccc; }
.page div{ clear: both; display: block; height: 30px; line-height: 30px; }



/* scroll start */
.grow {
	width:1200px;
	margin:0px auto;
	overflow:hidden;
}
.grow2 {
	width:auto;
	height:auto;
	font-size:14px;
	float:left;
	overflow:hidden;
}
.grow2 li{
	float:left;
	margin:0px 6px;
	text-align:center;
	list-style:none;
	padding:0px;
}
.grow2 li p{ margin:0px; padding:0px; display:block; clear:both; }
.grow2 li span{ clear:both; display:block; height: 35px; line-height: 35px; font-size: 16px;}
.grow img{
	height:210px;
	margin-top:12px;
	border:1px solid #CCC;
	padding:1px;
}
.scroll{ width:400%; }
/* scroll end */


.dongshiPic{ float: left; display: block; margin-right: 15px; }