section#real{
  height: 545px;
  box-sizing: border-box;
  padding: 50px 0;
  margin: 50px 0;
}
section#real div.wrap{   
  height: 100%;
  overflow: hidden;
}
section#real div.wrap h2{   

}
section#real div.wrap ul{   

}
section#real div.wrap ul li{   
  overflow: hidden;
}
section#real div.wrap ul li a{
  position: relative;
}
section#real div.wrap ul li a::before{
  content: "";
  width: 318px;
  height: 318px;
  display: block;
  background-color: #ccc;
  background-size: contain;
}
section#real div.wrap ul li:nth-child(1) a::before{
  background-image: url(../img/real1.jpg)
}
section#real div.wrap ul li:nth-child(2) a::before{
  background-image: url(../img/real2.jpg)
}
section#real div.wrap ul li:nth-child(3) a::before{
  background-image: url(../img/real3.jpg)
}
section#real div.wrap ul li:nth-child(4) a::before{
  background-image: url(../img/real4.jpg)
}
section#real div.wrap ul li:nth-child(5) a::before{
  background-image: url(../img/real5.jpg)
}
section#real div.wrap ul li a p{
  width: 318px;
  height: 318px;
  background: linear-gradient(120deg, rgba(245,55,122,0.8), rgba(250,87,83,0.8));
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  position: absolute;
  top: 15px;
  opacity: 0;
  font-weight: 100;
}
section#real div.wrap ul li a:hover::before{
  transform: scale(1.3);
  transition: 0.5s;
}
section#real div.wrap ul li a p:hover{
  opacity: 1;
  transition: 1s;
  font-size: 55px
}