@charset "utf-8";

/*--banner--*/
#banner{width:100%;overflow:hidden;position:relative}
#banner ul.bd{width:100%;}
#banner ul.bd li{width:100%;position:relative}
#banner ul.bd li img{width:100%;}
/*#banner ul.bd li img{height: 500px;}*/
#banner .hd{width:100%;overflow:hidden;height:20px;padding:5px 0;position:absolute;left:0;bottom:5px;text-align:center}
#banner .hd li{width:50px;height:5px;cursor:pointer;display:inline-block;margin:0 5px;text-indent:-9999px;background:#ccc;}
#banner .hd li.on{background-color:#fff}
#banner .prev, #banner .next {position: absolute;top: 40%;width: 46px;height: 80px;background: #4E423C;text-align: center;line-height: 80px;font-size: 26px;color: #E0DFDF;filter: alpha(opacity=60);opacity: 0.6;cursor: pointer;}
#banner .prev {left: 120px;}
#banner .next {right: 120px;}
#banner .prev:hover, #banner .next:hover {background-color: #0183BF;}

.section-1{ width: 100%; padding: 38px 0; background: #f5f5f5;}
.section-1 .mode-list{ width: 1000px; height: 95px; margin-bottom: 20px; overflow: hidden;}
.section-1 .mode-list li{ width: 244px; height: 95px; float: left; margin-left: 8px; color: #fff;  background-repeat: no-repeat;}
.section-1 .mode-list li a{float:left;color: #fff; width: 226px; height: 65px; padding:12px 10px 18px 8px;background:url('../images/bg1.png') no-repeat;overflow:hidden;}
.section-1 .mode-list li a:hover{background:url('../images/bg2.png') no-repeat;}
.section-1 .mode-list li:first-child{ margin-left: 0;}
.section-1 .mode-list li a i{float:left;width:80px;height:65px;background:url('../images/bg_ico.png') no-repeat;}
.section-1 .mode-list li a i.i1{background-position:-25px center;}
.section-1 .mode-list li a i.i2{background-position:-115px center;}
.section-1 .mode-list li a i.i3{background-position:-200px center;}
.section-1 .mode-list li a i.i4{background-position:-288px center;}
.section-1 .mode-list li a span{float:left;width:146px;overflow:hidden;}
.section-1 .mode-list li h3{ line-height: 28px; font-size: 14px;}
.section-1 .mode-list li span{ line-height: 18px;}

.section-1 .pro-mode{ width: 930px; height: 120px; padding: 35px 35px 30px; overflow: hidden; background:url("../images/pro-mode-bg.png") no-repeat;}
.section-1 .pro-mode .item{ width: 460px; height: 120px; float: left; margin-left: 10px;}
.section-1 .pro-mode .item:first-child{ margin-left: 0;}
.section-1 .pro-mode .item dl{ width: 280px; height: auto; float: left;}
.section-1 .pro-mode .item dt{ height: 28px; line-height: 28px; color: #332f3a; font-size: 16px;}
.section-1 .pro-mode .item dd{ line-height: 18px; margin-top: 8px; color: #666; height: 54px; overflow: hidden;}
.section-1 .pro-mode .item dd a{ padding: 0 8px; color: #666;}
.section-1 .pro-mode .item dd a:hover{ color: #0070bd;}
.section-1 .pro-mode .item .more{ color: #0070bd; width: 50px; line-height: 18px; padding-right: 12px; background: url("../images/icon-more.png") no-repeat right center; cursor: pointer; display: block; margin-top: 10px;}
.section-1 .pro-mode .item .more:hover{ text-decoration: underline;}
.section-1 .pro-mode .item .item-img{ float: left; width: 146px; height: auto; margin-left: 20px;}

.section-2{ width: 100%; padding: 55px 0; background:#efefef;}
.title{ text-align: center; display: block;}
.title h2{ font-size: 36px; line-height: 40px; color: #2f2f3a; letter-spacing: 5px;}
.title h2 span{ font-size: 30px; display: block;}
.title p{ line-height: 18px; margin-top:15px; color: #666; font-size: 14px;}
.title p.en{ line-height: 18px; color: #999; margin-top: 10px; font-size: 12px;}

.line-1{width: 180px; margin: 20px auto; height: 1px; background: #d8dee1;}

.pro-list-tab{ height: 30px;}
.pro-list-tab-main{ text-align: center;}
.pro-list-tab-main a{ display: inline-block; height:25px;padding: 0 10px; line-height:20px; margin:0 5px; font-size: 12px; color: #666;}
.pro-list-tab-main a.on{ color: #fff;background:url('../images/cat-hover.png') no-repeat center top; }
.pro-list-main{ height: 220px; margin: 25px auto 0;}
.pro-list-main li{ width: 318px; height: 198px; border: 1px solid #dcdcdc; background: #fff; float: left; margin:0 20px 22px 0;position:relative;}
.pro-list-main li a{display:none;border:8px solid #c0c0c0;width:302px;height:182px;position:absolute;left:0;top:0;}
.pro-list-main li:hover a{display:block;}
.pro-list-main .pro-item{ width: 1000px; height: 200px;  position: relative;}
.section-2 .prevBtn,.section-2 .nextBtn{ width: 64px; height: 64px; display: block;  cursor: pointer; position: absolute; top: 68px;}
.section-2 .prevBtn{ background: url("../images/icon-left.png") no-repeat; left: -100px;}
.section-2 .nextBtn{ background: url("../images/icon-right.png") no-repeat; right: -100px;}
.section-2 .prevBtn:hover,.section-2 .nextBtn:hover{ opacity: 0.8;}

.section-3{ width: 100%; height: 400px; padding:42px 0 0px; background:#fff; color: #585858;}
.about .title h2{ color: #000;}
.about .title p{ color: #676767;}
.index_brand{line-height:20px; color:#676767; margin-bottom:20px;}
.about p{ line-height: 20px; color: #676767; margin-bottom: 20px; text-align: center;}
.about-list{width:100%;height:62px;padding:15px 0;margin-top:20px;background:#efefef;overflow:hidden;}
.about-list ul{}
.about-list ul li{float:left;width:225px;margin-left:95px;height:62px;border-right:1px solid #e5e5e5;overflow:hidden;}
.about-list ul li a i{float:left;width:62px;height:62px;background:url('../images/about-icon.png') no-repeat;}
.about-list ul li a i.ico1{background-position:left top;}
.about-list ul li a:hover i.ico1{background-position:left bottom;}
.about-list ul li a i.ico2{background-position:-63px top;}
.about-list ul li a:hover i.ico2{background-position:-63px bottom;}
.about-list ul li a i.ico3{background-position:right top;}
.about-list ul li a:hover i.ico3{background-position:right bottom;}
.about-list ul li a span{float:left;width:150px;margin-left:13px;color:#000;font-size:18px;height:28px;padding:12px 0;}
.about-list ul li a span em{display:block;}
.about-list ul li a span em.en{font-size:9px;font-family: 'Arial'}
.about-list ul li a:hover span em{color:#0070bd;}


.section-4{ width: 100%; padding:35px 0; background:#fff;}
.case .title p{ color: #676767;font-size:12px;}
.case-list{ width: 100%; height:110px; padding:10px 0; background:#fff;}
.case-list ul{float:left;width:110%;}
.case-list li{ width: 130px; height: 110px; overflow: hidden; float: left; margin:0 40px 0 6px;}
.case-list li a{ display: block; position: relative; width: 130px; height: 110px; overflow: hidden;}
.case-list li .img{float:left;width: 130px; height: 110px;text-align:center;overflow:hidden;filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter:gray;-webkit-filter:grayscale(100%);}
.case-list li:hover .img{filter:none;-webkit-filter:none;}

.section-5{ width: 100%; padding:0 0 0; background:#f1f1f1; }
.contact-map{ width: 1000px; height: 624px; background:#f1f1f1 url("../images/diqiu.png") no-repeat center 90px; position: relative;z-index:1}
.contact-map a{display: block; width: auto; height: 18px; line-height: 18px; color: #fff; cursor: pointer; position: absolute;z-index:10;}
.contact-map a:hover{z-index:999;}
.contact-map a:before{ content: ""; display: block; width: 14px; height: 18px; background: url("../images/location-icon.png") no-repeat center 1px; float: left; margin-right: 2px;}
.contact-map a:hover:before{ background-position: center -17px;}
.contact-map a span{ display: none; color: #fff; line-height: 18px;background:#de0000;padding:0 3px;}
.contact-map a:hover span{ display: block; float: left;}
.contact-info{ width: 970px; height: 100px; padding: 15px; background:#f1f1f1; position: absolute; left: 0; bottom: 0;}
.contact-info .contact-l{ width: 280px; padding-left: 15px; border-right: 1px solid #e7e7e7; float: left;}
.contact-info .contact-l p{ line-height: 18px; color:#555555;}
.contact-info .contact-l .tel{ color: #555555; font-size: 20px; font-weight: bold;}

.contact-info .ewm-box{ width: 300px; height: auto; float: left; margin-left: 30px;  margin-top: 5px;border-right: 1px solid #e7e7e7;}
.contact-info .ewm-box img{ width: 94px; height: 94px; float: left; margin-right: 6px;}
.contact-info .ewm-box .ewm-r{ width: 200px; height: 94px; float: left;}
.contact-info .ewm-box .ewm-r p{ line-height: 18px; color: #555555; margin-bottom: 15px;}
.contact-info .ewm-box .ewm-r h3{ line-height: 20px; color: #555555; font-size: 18px;}
.contact-info .ewm-box .ewm-r h3 span{ display: block; font-size: 14px; line-height: 20px;}

.news-section{ width: 100%; height: 360px; background:#fff;}
.news-section .item{ width: 320px; height: 330px; float: left; margin-right: 20px;}
.news-section .item.last{ margin-right: 0;}
.news-section .item h3{ height: 30px; line-height:30px; padding:50px 0 0; color: #000; font-size: 18px;}
.news-section .item ul{ height: 228px; width: 330px; padding: 12px 0; overflow: hidden;}
.news-section .item li{ height: 38px; line-height: 38px; overflow: hidden;}
.news-section .item li a{ display: block; height: 38px;  padding-left: 88px; position: relative; overflow: hidden; color: #000; white-space: normal; text-overflow:ellipsis;}
.news-section .item li a:hover{ color: #0070bd;}
.news-section .item li span{ width: 88px; height: 38px; text-align: left; display: block; position: absolute; left: 0; top: 0;}