body{background-color: #e4e8ee;}
.warpper{margin-bottom: 30px;}
.rig-title-over, .rig-title .crumbs{padding-top: 0;padding-bottom: 0;}

.fixed-banner{height: 285px;position: relative;}
.fixed-banner h3{font-size: 34px;color: #fff;font-weight: bold;position: absolute;text-align: center;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;}
.fixed-banner h3 p{font-size: 16px;font-weight: normal;display: inline-block;width: 100%;padding-top: 2%;}


.service-area{width: 100%;max-width: 1400px;margin: 4% auto 0;}
.service-area .li-area{margin: 0 calc(9% - 15px) 14%;}
.service-area .li-area .s-tit{padding: 8% 0 8% 11%;background-size: 100%;transition: all 0.5s;background-position: center;}
.service-area .li-area .s-tit h3{font-size: 29px;font-weight: bold;color: #282828;}
.service-area .li-area .s-tit p{font-size: 15px;color: #636363;margin-top: 3%;}
.service-area .li-area .s-con .con-info{width: 100%;padding: 11%;background-color: #fff;}
.service-area .li-area .s-con .con-info p{font-size: 14px;line-height: 30px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;height: 120px;}
.service-area .li-area .s-con a{display: inline-block;width: 100%;background-color: #fff;padding: 4% 7% 6%;font-size: 15px;color: #636363;transition: all 0.5s;}
.service-area .li-area .bt-h{height: 14px;width: 100%;display: inline-block;background-color: #636363;float: left;}
.service-area .li-area .bt-h i{display: inline-block;float: left;width: 0%;background-color: #0956a4;height: 100%;transition: all 0.5s;}
.service-area .li-area:hover .s-tit{background-size: 120%;}
.service-area .li-area:hover .s-con a{color: #0956a4;}
.service-area .li-area:hover .bt-h i{width: 100%;}

/* caseinfo */
.a-title{float: left;width: 100%;margin-bottom: 2%;}
.a-title h2{font-size: 32px;color: #0956a4;display: block;float: left;position: relative;}
.a-title span{width: 70px;height: 5px;background-color: #0956a4;display: block;position: absolute;right: -100px;top: 50%;transform: translateY(-50%);}
.a-title .t-con{display: block;width: 100%;float: left;line-height: 30px;padding: 1.5% 0;font-size: 15px;}
.re-pro{display: block;float: left;width: 100%;margin: 1.5% 0 4%;}
.re-pro li{display: block;width: calc(33.333333% - 2px);float: left;border: 1px solid #bfbfbf;border-left: 0px;}
.re-pro li:first-child{border-left: 1px solid #bfbfbf;}
.re-pro li div:first-child{width: 120px;float: left;}
.re-pro li div:last-child{width: calc(100% - 120px);float: left;}
.re-pro li div {height: 120px;padding: 3%;}
.re-pro li div img{width: 100%;height: 100%;object-fit: contain;}
.re-pro li div h2{font-size: 20px;font-weight: bold;line-height: 36px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.re-pro li div p{font-size: 14px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.re-pro li div a{width: 20px;height: 20px;text-align: center;display: inline-block;border-radius: 20px;line-height: 19px;color: #fff;background-color: #000;margin-top: 2%;}
.case-area{width: 100%;float: left;margin: 2% 0;}
.case-area li{text-align: center;}
.case-area li div{overflow: hidden;border-radius: 50%;margin: 10%;}

.c-tel{display: block;line-height: 45px;border: 1px solid #0956a4;color: #fff;float: left;width: 100%;max-width: 450px;background-color: #0956a4;text-align: center;margin: 2% 0 5%;}
.c-tel span{display: inline-block;width: 50%;background-color: #fff;color: #0956a4;float: right;}
.c-tel:hover{
    color: #fff;
}

/* news */
.news-area{width: 100%;float: left;background-color: #fff;}
.news-area .li-area{padding: 3.2%;border-right: 1px solid #e1e1e1;border-bottom: 1px solid #e1e1e1;position: relative;overflow: hidden;}
.news-area .li-area .s-tit h3{font-size: 22px;line-height: 35px;margin-bottom: 4%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.news-area .li-area .s-con .con-info{line-height: 30px;color: #777;overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    height: 60px;
    -webkit-box-orient: vertical;}
.news-area .li-area .s-con b{display: block;width: 100%;float: left;margin: 6% 0;font-family: fz;line-height: 30px;color: #777;font-weight: normal;transition: .4s;font-size: 13px;}
.news-area .li-area .s-con a{line-height: 30px;}
.news-area .li-area:nth-child(3){border-right: 0;}

.news-area .li-area .con-h{
    position: absolute;
    display: inline-block;width: 100%;height: 100%;
    color: #fff;right: 0;top: 100%;padding: 10%;transition: all 0.3s;
    background-image: url(../../zm001/images/product-banner-bg2.jpg);
    background-size: cover;background-position: center;line-height: 30px;

    
}
.news-area .li-area .con-h p{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}


.news-area .li-area .con-h b{position: absolute;color: #fff;writing-mode: vertical-lr;right: 0;top: 0;padding: 10% 5%;font-size: 20px;font-family: ui-monospace;}
.news-area .li-area:hover .con-h{top: 0;}

.contenbox p,.contenbox span{font-size: 15px!important;font-family: '微软夜黑'!important;line-height: 30px!important;}
.contenbox table{width: 100%!important;font-size: 13px!important;text-align: center;}
.contenbox table tr td{border: 1px solid #000;}

@media screen and (min-width: 0px) and (max-width:1024px){
    .a-title h2{font-size: 24px;}
}
@media screen and (min-width: 0px) and (max-width:991px){
    .news-area .li-area:nth-child(3){border-right: 1px solid #e1e1e1;}
    .news-area .li-area:nth-child(2){border-right: 0;}
}

@media screen and (min-width: 0px) and (max-width:768px){
    .fixed-banner{height: 180px;}
    .re-pro li{width: calc(50% - 2px);}
    .re-pro li:last-child{border: 1px solid #bfbfbf;border-top: 0;}
    .news-area .li-area{border-right: 0;}
    .news-area .li-area .con-h b{padding: 10% 2%;}
    .news-area .li-area .s-tit h3{font-size: 18px;}
}

@media screen and (min-width: 0px) and (max-width:375px){
    .rig-title-over, .rig-title .crumbs{line-height: 60px;}
    .re-pro li{width: calc(100% - 2px);border: 1px solid #bfbfbf;border-top: 0;}
    .re-pro li:first-child{border: 1px solid #bfbfbf;}
    .fixed-banner h3 p{font-size: 14px;}
}

@media screen and (min-width: 0px) and (max-width:320px){
    .fixed-banner h3 p,.service-area .li-area .s-tit p,.service-area .li-area .s-con .con-info p{font-size: 12px;}
    .fixed-banner h3 p, .service-area .li-area .s-tit p, .service-area .li-area .s-con .con-info p{line-height: 24px;}
    .service-area .li-area .s-tit h3{font-size: 24px;}
    .rig-title-over, .rig-title .crumbs{line-height: 60px;}
    .a-title h2{font-size: 22px;}
}