#factory{margin: 0 auto;  }

#factory>.display{margin: 100px auto;}
#factory>.display .lists{ margin: 0 auto;}
#factory>.display .lists>ul{margin: 0 auto;}
#factory>.display .lists>ul>li{display: block;float: left;width:22.75%; margin-right: 3%; margin-bottom: 3%; position: relative; overflow: hidden; border-radius: 3px;  background: #fff; transition: all .35s; }
#factory>.display .lists>ul>li:nth-child(4n){margin-right: 0;}
#factory>.display .lists>ul>li .img{ position: relative; width: 100%;background:#fff; overflow: hidden;  text-align:center; 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;}
#factory>.display .lists>ul>li .img>img{
  width: 90% !important;       /* 宽度铺满 */
  height: auto !important;       /* 高度自动等比例（关键） */
  max-height: 400px !important;   /* 限制最高高度（可自己改） */
  object-fit: contain !important; /* 保持比例，不拉伸（关键） */
  transition: all .8s;
}
#factory>.display .lists>ul>li .tit{font-size:1.1rem; color: #6e6e6e; text-align: center;padding: 20px; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; transition: all .35s;}
#factory>.display .lists>ul>li:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.16);}
#factory>.display .lists>ul>li:hover .img>img{transform: scale(1.05);}
#factory>.display .lists>ul>li:hover .tit{ color: #fff; background: #e62129;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix {zoom: 1;}
* {margin: 0;padding: 0;list-style: none;outline:none;box-sizing:border-box;font-family: 'sourcehansans', sans-serif;}
.wrapp{ width: 86%; max-width: 1470px; margin: 0 auto;}
@media only screen and (max-width: 1280px){

    #factory>.display .lists>ul>li{width:31.33%; }
    #factory>.display .lists>ul>li:nth-child(4n){margin-right: 3%;}
    #factory>.display .lists>ul>li:nth-child(3n){margin-right: 0;}
    #factory>.display .lists>ul>li .tit{font-size:1.4rem;}

}


@media only screen and (max-width: 1080px){


    #factory>.display .lists>ul>li{width:48%; margin-right: 0; }
    #factory>.display .lists>ul>li:nth-child(4n){margin-right: 0;}
    #factory>.display .lists>ul>li:nth-child(3n){margin-right: 0;}

    #factory>.display .lists>ul>li:nth-child(even){float: right;}


}

@media only screen and (max-width: 640px){

    #factory>.display{ margin: 0 auto; padding: 30px 0;}

}
@media only screen and (max-width: 520px){

    #factory>.display .lists>ul>li{display: block;float: none!important;width:100%; margin-right: 0;  height: auto; margin-bottom: 20px; }


}