/* =====================工程案例================= */
.case{padding-top: 100px;}
.case-tit{border: 0.5px solid #E2E2E2;padding: 0 40px;margin-bottom: 50px;}
.titlist{border-bottom: 0.5px solid #E2E2E2;}
.titlist .titl{width: 138px;color: #303133;padding-left: 4px;}
.titlist .titr a{color: #999999;transition: all ease-in-out .2s;cursor: pointer; display: inline-block;margin:0 50px 0px 0;}
.titlist .titr a:hover,.titlist .titr a.hover{color: #16813D;}
.titlist .titr{padding: 24px 0;flex:1;}
.titlist:nth-last-child(1){border-bottom:none}

.case-body a{display: block;position: relative;margin:0 2.85% 2.85% 0;top: 0;transition: all ease-in-out .2s; width: 31.42%; height: 330px;overflow: hidden;}
.case-body a .pic img{display: block;transition: all ease-in-out 1s;}
.case-body a .des h2,.case-body a .des .catel{color: #fff;}
.case-body a .des h2{font-size: 20px;height: 30px;line-height: 30px;margin-bottom: 12px;}
.case-body a .des .cater img{width: 20px;height: 20px;}
.case-body a .des .cate{height: 27px;line-height: 27px;}
.case-body a .des .catel span{display: inline-block;margin-right: 24px;font-size: 18px;}
.case-body a .pic,.case-body a .pic img{width: 100%;height: 100%;overflow: hidden;}
.case-body a .gradient,.case-body a .des{width: 100%;left: 0;bottom: 0;}
.case-body a .gradient{height: 120px;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 92.75%);}
.case-body a .des{z-index: 9;bottom: -24px;transition: all ease-in-out .3s;}
.case-body a .gradient{z-index: 7;}
.case-body a .desi{padding: 0 14px 0 20px;}
.case-body a:nth-child(3n){margin-right: 0;}
.case-body a:hover .pic img{transform: scale(1.1);}
.case-body a:hover .des{bottom: 25px;}
.case-body a:hover{top: -10px;}

.cdetail{margin-bottom: 100px;}
.case-detail .cdetail .title{text-align: center;margin-bottom: 40px;}
.case-detail .cdetail .title h1{font-size: 42px;}
.case-detail .cdetail .title span{color: #999999;position: relative;margin: 0 35px;}
.case-detail .cdetail .title span::after{content: "";position: absolute;right: -34px;top: 5px; width: 1px;display: block; height: 18px;background: #E2E2E2;}
.case-detail .cdetail{margin-top: 60px;}
.case-detail .cdetail .title span:nth-last-child(1){margin-right: 0;}
.case-detail .cdetail .title span:nth-last-child(1)::after{display: none;}
.case-detail .cdetail .title span:nth-child(1){margin-left: 0;}
.cdetail .swp{
    margin-bottom: 40px;
}
.cdetail .swp img{
    width: 100%;
}
.cdetail .backto a{
    display: block;
    font-size: 14px;
    margin: 0 10px;
    border: 1px solid #E2E2E2;
    width: 132px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    transition: all ease-in-out .2s;
}
.cdetail .backto a:hover{
    color: #16813D;
    border: 1px solid #16813D;
}
.recpro {
  padding-bottom: 120px;
}
.recpro .prolist{
    margin-top: 47px;
}
.recpro .prolist a{display: block;
  width: 31.42%;
  margin-right: 2.85%;
  position: relative;
  top: 0;
  transition:  all ease-in-out .2s;

}
.recpro .prolist a .pic{
  width: 100%;
}
.recpro .prolist a .pic img{width: 100%;display: block;height: auto;}
.recpro .prolist a .des{
  border: 1px solid #F1F1F1;
  border-top: none;
  padding: 20px 20px;
}
.recpro .indexcommon-tit h2{
    font-weight: 500;
    font-size: 42px;
    line-height: 62px;
    margin-bottom: 14px;
}
.recpro .indexcommon-tit h3{
    font-size: 20px;
    line-height: 30px;
    color: #999999;
}
.recpro .prolist a .pic img{
  object-fit: cover;
  height: auto;
}
.recpro .prolist a .des h2{
  transition: all ease-in-out .2s;
  font-size: 30px;
  height: 44px;
  line-height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 12px;
}
.recpro .prolist a .des .pp .p{
  color: #999999;
  height: 27px;
  line-height: 27px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recpro .prolist a .des .pp .arow{
  margin-left: 30px;
}
.recpro .prolist a .des .pp .arow img{
  width: 20px;
  height: 20px;
}
.recpro .prolist a:nth-child(3n){margin-right: 0;}
.recpro .prolist a:hover{
  top: -20px;
}
.recpro .prolist a:hover .des h2{
  color: #16813D;
}
.recpro .more{
  margin-top: 60px;
}
.recpro .more a{
  display: block;
  border: 1px solid #E2E2E2;
  width: 186px;
  height: 56px;
  text-align: center;
  line-height: 56px;
  transition: all ease-in-out .2s;
  font-size: 20px;
}
.recpro .more a:hover{
  color: #16813D;
  border: 1px solid #16813D;
}