a{
  text-decoration: none;
}
.content h2 {
  font-family: 'roboto', cursive;
  font-size: 4rem;
  margin: 0;
}
.wrapper{
  padding: 125px 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.services{
  width: 1100px;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.single-img{
  border-radius: 5px;
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  width: 325px;
  height: 450px;
  overflow: hidden;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
  transform: translate(0, 0);
  transition: .3s;
}
.single-img:hover{
  transform: translate(0, -9px);
}
.img-one{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/photo/chanyo.jpg);
  background-size: cover;
  background-position: center center;
}
.img-two{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/photo/chun-bei-chen.jpg);
  background-size: cover;
  background-position: center center;
}
.img-three{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/photo/lee-yi-chen.jpg);
  background-size: cover;
  background-position: center center;
}
.img-four{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/photo/zhihui-wang.jpg);
  background-size: cover;
  background-position: center center;
}
.img-five{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/photo/linchiayu.jpg);
  background-size: cover;
  background-position: center center;
}
.img-six{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/photo/liu-ding-chen.jpg);
  background-size: cover;
  background-position: center center;
}
.img-seven{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/photo/ming-yu-chang.jpg);
  background-size: cover;
  background-position: center center;
}
.img-eight{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/photo/po-yang-peng.jpg);
  background-size: cover;
  background-position: center center;
}
.img-nine{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/photo/tsai-cheng-yan.jpg);
  background-size: cover;
  background-position: center center;
}
.img-one:hover{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/team/team/yoyo.jpg);
  background-size: cover;
  background-position: center center;
}
.img-two:hover{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/team/team/bei.jpg);
  background-size: cover;
  background-position: center center;
}
.img-three:hover{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/team/team/lu.jpg);
  background-size: cover;
  background-position: center center;
}
.img-four:hover{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/team/team/ju.jpg);
  background-size: cover;
  background-position: center center;
}
.img-five:hover{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/team/team/mel.jpg);
  background-size: cover;
  background-position: center center;
}
.img-six:hover{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/team/team/dickson.jpg);
  background-size: cover;
  background-position: center center;
}
.img-seven:hover{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/team/team/ming.jpg);
  background-size: cover;
  background-position: center center;
}
.img-eight:hover{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/team/team/bo.jpg);
  background-size: cover;
  background-position: center center;
}
.img-nine:hover{
  background-image: url(https://static.igem.wiki/teams/4618/wiki/team/team/tyler.jpg);
  background-size: cover;
  background-position: center center;
}
.img-text{
  background: linear-gradient(to top,rgba(0, 0, 0, 0.9),rgba(255,255,255,0));
  padding: 0 10px 5px 10px;
  width: 100%;
  height: auto;
  position: relative;
  transform: translate(0, 110px);
  line-height: 25px;
  transition: 0.5s ease;
  display: inline-block;
  text-align: center;
  color: #ffffff;
}
.img-top-text{
  background: linear-gradient(to bottom,rgba(0, 0, 0, 0.5),rgba(255,255,255,0));
  padding: 0 10px 5px 10px;
  width: 100%;
  height: auto;
  position: relative;
  transform: translate(0, -425px);
  line-height: 25px;
  transition: 0.5s ease;
  display: inline-block;
  text-align: center;
  color: #ffffff;
}
.img-text h4{
  line-height: 15px;
  padding: 0;
  margin: 16px 0;
  /* font-family: 'Alfa Slab One', cursive; */
  font-size: 40px;
  text-shadow: #4C2719 0.1em 0.1em 0.2em
}
.services button{
  background: #252525;
  color: #fff;
  padding: 10px 35px;
  border: none;
  border-radius: 50px;
  line-height: 3px;
  display: inline-block;
  margin-bottom: 200px;
}
.single-img:hover .img-text{
  transform: translate(0, 0);
}

@media (max-width: 991px){
  .wrapper{
      padding: 0;
  }
  .services{
      width: 100%;
      display: flex;
      flex-direction: column;
  }
  a{
      margin-bottom: 100px;
  }
}

.img-top-text{
  background: linear-gradient(to bottom,rgba(0, 0, 0, 0.1),rgba(255,255,255,0));
  padding: 0 10px 5px 10px;
  width: 100%;
  height: auto;
  position: relative;
  transform: translate(0, -425px);
  line-height: 25px;
  transition: 0.5s ease;
  display: inline-block;
  text-align: center;
  color: #ffffff;
  text-shadow: #4C2719 0.1em 0.1em 0.2em
}

.img-no-text {
  /* background: linear-gradient(to top,rgba(0, 0, 0, 0.9),rgba(255,255,255,0)); */
  padding: 0 10px 5px 10px;
  width: 100%;
  height: auto;
  position: relative;
  transform: translate(0, 0px);
  line-height: 25px;
  transition: 0.5s ease;
  display: inline-block;
  text-align: center;
  color: #ffffff;
}

.img-no-text h4{
  line-height: 15px;
  padding: 0;
  margin: 16px 0;
  /* font-family: 'Alfa Slab One', cursive; */
  font-size: 40px;
  text-shadow: #4C2719 0.1em 0.1em 0.2em
}

.single-img:hover .img-top-text{
  /* 以下不能修改 */
  transform: translate(0, 0);
}