.hornor-wrapper .hornor-box {
  display: flex;
  display: -webkit-box;
  /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -moz-box;
  /* Firefox 17- */
  display: -webkit-flex;
  /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex;
  /* Firefox 18+ */
  display: -ms-flexbox;
  /* IE 10 */
  flex-flow: wrap;
  margin-bottom: .13rem;
}
.hornor-wrapper .list {
  flex: 1;
}
.hornor-wrapper .list ul {
  display: flex;
  display: -webkit-box;
  /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -moz-box;
  /* Firefox 17- */
  display: -webkit-flex;
  /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex;
  /* Firefox 18+ */
  display: -ms-flexbox;
  /* IE 10 */
  flex-flow: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;

}
.hornor-wrapper .list ul li {
  width: 306px;
  flex: 0 0 306px;

  margin-bottom: .4rem;
  padding: .15rem .3rem .38rem;
  background: #f9f9f9;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
.hornor-wrapper .list ul li:hover {
  transform: translateY(-5px);
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  background: #fff;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width:1920px){
.hornor-wrapper .list ul li .pic {
  width: 100%;
}
.hornor-wrapper .list ul li .pic img {
  width: 100%;
  height: 2rem;
  object-fit: contain;
}
.hornor-wrapper .list ul li .pic22 {
  width: 100%;
}
.hornor-wrapper .list ul li .pic22 img {
  width: 100%;
  height: 2rem;
  object-fit: contain;
}
.hornor-wrapper .list ul li .info22 {
  margin-top: .14rem;
  color:#b1b1b1;
    line-height: 22px;
  font-size: .18px;
}
.date{
  font-size: .18px;
}
}

@media only screen and (max-width:500px){
.hornor-wrapper .list ul li {
  width: 100%;
  flex: 0 0 100%;

  margin-bottom: .4rem;
  padding: .30rem .1rem .38rem .3rem;
  background: #f9f9f9;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

.hornor-wrapper .list ul li .pic22 {
  float:left;
  width: 28%;
}
.hornor-wrapper .list ul li .pic22 img {
  width: 100%;
  height: 2rem;
  object-fit: contain;
  margin-top: .1rem;
}
.hornor-wrapper .list ul li .info22 {
  float:left;
  width:72%;
  padding-left:7px;
  font-size: .16px;
  line-height: 23px;
  margin-top: .10rem;

}

.hornor-wrapper .list ul li .info {
  margin-top: .14rem;
}
.hornor-wrapper .list ul li .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  color: #393f4b;
  margin-bottom: .1rem;
}
.hornor-wrapper .list ul li .title span {
  display: inline-block;
  margin-left: .1rem;
}
.hornor-wrapper .list ul li .date {
  font-family: Arial;
  color: #b1b1b1;
  font-size: 14px;
}

}