.conter{padding: 20px 0 30px; zoom: 1; overflow: hidden;}

/* slide */
.slide { position: relative; width: 1100px; height: 360px; overflow: hidden;}
.slide .bd { position: relative; z-index: 0; }
.slide .bd img { display: block; width: 1100px; height: 360px; border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; }
.slide .hd { width: 100%; position: absolute; bottom: 10px; text-align: center; font-size: 0; z-index: 1; }
.slide .hd li { width: 16px; height: 16px; overflow: hidden; cursor: pointer; display: inline-block; *display: inline; zoom: 1; margin: 0 2px; background: url(../images/dot.png) no-repeat 0 -16px; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; }
.slide .hd .on { background-position: 0 0; }
.slide .prev, .slide .next { display: none; position: absolute; z-index: 2; top: 50%; margin-top: -25px; overflow: hidden; width: 51px; height: 51px; line-height: 51px; text-indent: -999em; background: url(../images/arrow.png) no-repeat;}
.slide .prev { left: 10px; background-position: left top; }
.slide .next { right: 10px; background-position: right bottom; }
.slide .prev:hover { background-position: left bottom; }
.slide .next:hover { background-position: right top; }

.tit { position: relative; display: block; margin-top: 20px; line-height: 24px; font-size: 20px; color: #666; font-weight: 300;}
.tit h3 { margin-left: 12px }
.tit .more { position: absolute; right: 10px; top: 6px; font-size: 14px; line-height: 1.2 }
.tit .more .fa { margin-left: 5px }

.box { background: #fff; position: relative; z-index: 0; overflow: hidden; margin-top: 18px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .14); box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1); box-sizing: border-box }

/* hot */
.hot li { height: 360px; padding: 15px; box-sizing: border-box; float: left; width: 275px !important; text-align: center; position: relative; border-left: 1px solid #f2f2f2 }
.hot li:first-child { border-left: none }
.hot li.item{border-top: 1px solid #f2f2f2;}
.hot li .image { margin: 0 auto; width: 258px; height: 258px; display: block; }
.hot li .info { margin-top: 20px; z-index: 1; width: 100%; box-sizing: border-box }
.hot li .info h4 { font-size: 16px; color: #424242; font-weight: 300; line-height: 24px; overflow: hidden; display: -webkit-box; display: -moz-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.hot li .info p { font-size: 12px; color: #B2B2B2; line-height: 18px; margin-top: 13px; display: inline-block; overflow: hidden; display: -webkit-box; display: -moz-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.hot li .cover-link { display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 4; }
.hot li:hover .cover-link { box-shadow: 0 0 38px rgba(0, 0, 0, .08) inset; -webkit-transition: all .15s ease; transition: all .15s ease; }
.hot .tit .more a{margin-left: 15px;}
.hot .tit .more a.on{color: #d6050a;}
.hot .box{height: 365px!important}

/* pro */
.pro li { height: 275px; padding: 20px; box-sizing: border-box; float: left; width: 25%; text-align: center; position: relative; border-left: 1px solid #f2f2f2 }
.pro li:first-child { border-left: none }
.pro li.item{border-top: 1px solid #f2f2f2;}
.pro li .image { margin: 0 auto; width: 213px; height: 213px; display: block; }
.pro li .info { margin-top: 20px; z-index: 1; width: 100%; box-sizing: border-box }
.pro li .info h4 { font-size: 16px; color: #424242; font-weight: 300; line-height: 24px; overflow: hidden; display: -webkit-box; display: -moz-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.pro li .info p { font-size: 12px; color: #B2B2B2; line-height: 18px; margin-top: 13px; display: inline-block; overflow: hidden; display: -webkit-box; display: -moz-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.pro li .cover-link { display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 4; }
.pro li:hover .cover-link { box-shadow: 0 0 38px rgba(0, 0, 0, .08) inset; -webkit-transition: all .15s ease; transition: all .15s ease; }
.pro .tit .more a{display: inline-block; height: 26px; line-height: 26px; padding: 0 20px;border-radius: 4px;}
.pro .tit .more a.on{color: #fff;background: #fff; background: linear-gradient(#d6050a, #b40105); border-color: #d6050a;}
.pro .bd{height: 570px; overflow: hidden;}

/* case */
.case li { height: 360px; padding: 20px; box-sizing: border-box; float: left; width: 25%; text-align: left; position: relative; border-left: 1px solid #f2f2f2 }
.case li:first-child { border-left: none }
.case .image { display: block; width: 100%; background: #f2f2f2; border-radius: 4px }
.case .info { margin-top: 20px; z-index: 1; width: 100%; box-sizing: border-box }
.case .info h4 { font-size: 16px; color: #424242; font-weight: 300; line-height: 24px; overflow: hidden; display: -webkit-box; display: -moz-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.case .info p { font-size: 12px; color: #B2B2B2; line-height: 18px; margin-top: 13px; display: inline-block; overflow: hidden; display: -webkit-box; display: -moz-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.case .info a { display: block; margin-top: 8px; line-height: 1.2; font-size: 12px }
.case .info a .fa{ margin-left: 5px }
.case .cover-link { display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 4; }

/* about */
.about .box{padding: 20px}
.about .fl { width: 500px; }
.about .fl h2 { font-size: 18px; color: #333; }
.about .fl h2 em { color: #d6050a; }
.about .fl span { display: inline-block; width: 40px; height: 2px; background: #d6050a }
.about .fl p { line-height: 24px; font-size: 12px; }
.about .fr { width: 200px; text-align: right; color: #333; }
.about .fr h3 { font-size: 15px; }
.about .fr p { font: bold 20px/55px Arial; }
.about .fr ul li { display: inline-block; margin-left: 20px; vertical-align: middle; text-align: center; height: 27px; font-size: 12px }
.about .fr ul li span { display: none; }
.about .fr ul li:hover span { display: block; }
.about .fr i.fa { width: 25px; height: 25px; line-height: 25px; margin-bottom: 10px; font-size: 14px; cursor: pointer; color: #999; background-color: #fff; border: 1px solid #999; border-radius: 8px; }
.about .fr ul li:hover i.fa { color: #fff; background-color: #d6050a; border-color: #d6050a; }

a.btn { display: inline-block; vertical-align: middle; border: 1px solid #c8c7c8; padding: 5px 10px; margin-top: 15px; font-size: 12px; color: #333 }
a.btn i.fa { margin-left: 50px; }
a.btn:hover { background-color: #d6050a; border-color: #d6050a; color: #fff; }
a.btn:hover i.fa { color: #fff; }

.special { height: 59px; margin-top: 20px; }
.special img { margin-right: 42px; }

/* news */
.news{width: 540px;}
.news .box{padding: 20px}
.news dl { width: 100%; height: 100px }
.news dl.item { margin: 20px 0 }
.news dl dt span { float: left; width: 60px; height: 50px; line-height: 50px; text-align: center; background: #dbdbdb; font-size: 18px; color: #767676; -webkit-transition: all 0.3s ease-in-out;}
.news dl dt a { float: left; width: 418px; height: 50px; line-height: 50px; padding-left: 20px; color: #000; font-size: 16px; background: url(../images/comm.png) 419px 15px no-repeat; -webkit-transition: all 0.3s ease-in-out;}
.news dl dd span { float: left; width: 60px; height: 50px; line-height: 50px; text-align: center; background: #fff; font-size: 26px; font-weight: bold; color: #959595; }
.news dl dd p { float: left; width: 418px; height: 50px; line-height: 18px; padding-left: 20px; font-size: 12px; color: #b0b0b0; }
.news dl:hover dt span { background: #d6050a; color: #fff; }
.news dl:hover dt a { color: #d6050a; background-position: 419px -54px; }

/* link */
.link { width: 100%; line-height: 21px;}
.link .box{padding: 20px}
.link h2 { float: left; margin-right: 10px; color: #333; }
.link h2 .fa { vertical-align: middle; }
.link ul { overflow: hidden; }
.link ul li { float: left; margin-right: 15px; font-size: 12px; }