.recproducts{
    width:100%;
    background-color: #f4f7fc;
    padding-top:70px;
}

.recprolist{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 65px;
    flex-wrap: wrap;
}
.recproitem{
    width: 23%;
    background:white;
    margin-bottom: 15px;
    position: relative;
}
.recproitem::before{
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.60);
    top: 0;
    content: "";
    opacity: 0;
    transition: .5s;
    z-index: 1;
}
.recproitem:hover::before{
    opacity: 1;
}
.recproitemimg{
    padding:20px 0;
    width:100%;
}
.recproitemimg img{
    width:100%;
}
.recproitemtitle{
    height:60px;
    padding: 0 10px;
    line-height: 60px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    background-color: #eee;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.item-icon{
  position: absolute;
  left: 50%;
  right: 0;
  top: 50%;
  text-align: center;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) scaleX(0);
  opacity: 0;
  transition: .5s;
  /*transition-delay: 1000ms;*/
  width: 60px;
  height:60px;
  line-height: 60px;
  border-radius: 30px;
  background:#FF3C00;
  font-size:25px;
  overflow: hidden;
}
.item-icon::before{
    content: "";
    position: absolute;
    top:0;
    left:0;
    width:60px;
    height:60px;
    background: #d6b9b0;
    border-radius: 30px;
    transform: scale(0);
    opacity: 0;
    z-index: -1;
    transition: all 0.3s;
}
.item-icon:hover::before{
    animation: iconbg 1s;
    animation-iteration-count: infinite;
}
.item-icon a{
    color:white;
}
.recproitem:hover .item-icon{
    opacity: 1;
    z-index:10;
    transform: translate(-50%, -50%) scaleX(1);
}

@keyframes iconbg{
    0% {transform: scale(0);opacity: 1;}
    100% {transform: scale(1);opacity: 0;}
}

@media screen and (max-width:600px){
	.recproitem{width: 48%;margin-bottom: 2%;}
}

@media screen and (min-width:601px) and (max-width:1000px){
	.recproitem{width: 31%;}
}
@media screen and (min-width:1001px){
	.recproitem{width: 23%;}
}