body{
  font-family: 'Microsoft YaHei','PingFang SC';
}
.list_content{

  width: 90%;

  max-width: 1000px;
  margin: 0 auto;

 /* padding:50px 20px 0px; */

}

.list_content:last-of-type{

  padding:40px 20px 30px;

}

.list_content h2.tt{

  font-size:26px;

  text-align:center;

  padding-bottom: 18px;

  font-weight: 900;
  
  color: #1e2944;
  line-height: 42px;

  width: 100%;
  margin: 0 auto;
}

.list_content h3.pp{

  font-size: 16px;

  text-align:center;

  padding-bottom:40px;

  max-width:1000px;

  width:100%;

  margin:0 auto;
  color: #1e2944;

  line-height:2;
}

.list_conr{

  width:100%;

  display:flex;

  justify-content: center;

  width: 100%;
  margin: 0 auto;
}

.list_conr a.items{

  display:block;

  width:33.33%;

  padding:0px 15px;

  position:relative;

  overflow: hidden;

  margin-bottom:20px;

}

.list_conr a.items img{

  width:100%;

}

.list_conr a.items h3.title{

  position: absolute;

  z-index: 1;

  color:#fff;

  font-size:28px;

  left:5%;

  top: calc(50% - 15px);

  width: 90%;

  text-align: center;

  line-height: 1.75;

  font-weight: bold;

  transition: all 0.3s ease-out;

}

.list_conr a.items:hover h3.title {

    top: 10%;

}

.list_conr a.items h4.pro {

    /* font-size: 18px; */

    /* font-weight: 700; */

    color: #fff;

    position: absolute;

    z-index: 1;

    left:10%;

    top: calc(50% + 50px);

    width: 80%;

    opacity: 0;

    text-align: center;

    line-height: 1.5;

    transition: all 0.3s ease-out;

    font: bold 18px Arial, sans-serif;

}

.list_conr a.items:hover h4.pro {

    top: calc(10% + 40px);

    opacity: 1;

}

.list_conr a.items i {

    position: absolute;

    bottom: 10%;

    left: 0;

    right: 0;

    width: 30px;

    height: 30px;

    margin: auto;

    border-radius: 50%;

    border: solid 1px rgba(255, 255, 255, 0.3);

    color: #FFF;

    text-align: center;

    line-height: 27px;

    font-size: 20px;

    transition: all 0.3s ease-out;

}

.fa-angle-up:before {

    content: "";

    background-image: url(../image/up.svg);

    width: 20px;

    height: 20px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

.list_conr a.items:hover i {

    bottom: calc(50% - 15px);

    width: 35px;

    height: 35px;

    border: solid 1px rgba(255, 255, 255, 0);

    color: #333;

    background-color: #FFF;

    line-height: 32px;

    font-size: 30px;

}

.list_conr a.items:hover .fa-angle-up:before {

    background-image: url(../image/right.svg);

}

.list_conr a.items p.mes {

    position: absolute;

    z-index: 1;

    color: #FFF;

    bottom: -30%;

    width:90%;

    left:5%;

    padding: 15px;

    opacity: 0;

    line-height: 1.75;

    font-size:16px;

    font-weight: bold;

    transition: all 0.3s ease-out 0s;

}

.list_conr a.items:hover p.mes {

    bottom: 0;

    opacity: 1;

    transition: all 0.3s ease-out 0.15s;

}

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

  .list_conr a.items h4.pro{

    /* font-size: 16px; */

    font: bold 16px Arial, sans-serif;

  }
  .list_conr a.items p.mes{
    font-size:14px;
  }
  .list_conr a.items:hover i{

    bottom: calc(50% );

    width: 30px;

    height: 30px;

  }

}

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

  .list_conr a.items{

    padding: 0px 5px;

  }

  .list_conr a.items h4.pro{

    /* font-size: 14px; */

    font: bold 14px Arial, sans-serif;

  }

  .list_conr a.items p.mes{

    font-size: 12px;

  }

}



.list_conr a.items h3.new_title{

  font-size:20px;

  padding-top:20px;

  text-align:center;

  padding-bottom: 10px;

  width:90%;
  margin:0 auto;
}

.list_conr a.items p.new_pro{

  font-size:14px;

  text-align:center;

  padding:0px;

  width:90%;

  line-height: 1.4;
  margin:0 auto;



}

@media screen and (max-width:767px){
  .list_content h2.tt{
    font-size: 20px !important;
    padding-bottom: 5px
  }
  .list_content h3.pp {
    font-size: 14px !important;
    padding-bottom: 20px;
  } 
  .list_conr{

    flex-wrap:wrap;

  }

  .list_conr a.items{

   width:100%;

   padding:0px;

  }
  .list_conr a.items h3.new_title{
    font-size: 16px;
  }
  .list_conr a.items p.new_pro{
    font-size: 12px;
  }
}