#works .photo {
  width: 1040px;
  margin: 50px auto;
}
#works .photo h2>img{
  width: auto;
  height: 15px;
}
#works .works_wrap{
  width: 1040px;
  margin: 10px auto;
  position: relative;
  border-top: solid 1px;
}
.tab-buttons span{
  font-family: inherit;
  letter-spacing: 4px;
  font-size:1.3rem;
  color:#000;
  cursor:pointer;
  display:block;
  width:20%;
  float:left;
  text-align:center;
  height:40px;
  line-height:40px;
  margin:30px 0;
}
span.content2{
  margin-right: 10px;
  margin-left: 10px;
}
.tab-content{
  clear: both;
  color:#333;
}
#lamp{
  width:20%;
  height:40px;
  background:#e6e1c0;
  display:block;
  position:absolute;
  top:0px;
  z-index: -1;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
margin: 30px 0;
}
#lamp.content2{
  left:21%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content3{
  left:42%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content1{
  left:0;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}

#works .tab-content ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* justify-content: center; */
    flex-wrap: wrap;
}
#works .tab-content ul>li:first-child {
    margin-left: 0;
}
#works .tab-content li {
    width: 300px;
    margin: 10px 3.3333%;
}
#works .tab-content ul>li:last-child {
    margin-right: 0;
}
#works .tab-content ul>li:nth-child(3n) {
    margin-right: 0;
}
#works .tab-content ul>li:nth-child(3n+1) {
    margin-left: 0;
}

#works .tab-content li>img {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

#works .tab-content li>span {
    display: block;
    margin: 10px 0;
    font-size: 1.3rem;
}

#works .tab-content .number {
  float: left;
  width: 20%;
  font-size: 3rem;
  margin-top: 10px;
}
#works .tab-content .prof {
  float: right;
  width: 80%;
  font-size: 1.3rem;
  margin-top: 10px;
  line-height: 20px;
}

@media screen and (max-width: 768px){
  #works {
    margin-top: 100px;
    padding: 0 10px;
  }
  #works .photo {
    width: 100%;
  }
  #works .works_wrap {
    width: 100%;
  }
  .tab-buttons span {
    width: 31.3%;
    letter-spacing: 0;
  }
  #works .tab-content ul {
    justify-content: center;
  }
  #lamp {
    width: 31.6%;
  }
  #lamp.content2{
    left:34.2%;
  }
  #lamp.content3{
    left:68.5%;
  }
  #works .tab-content ul>li:first-child,
  #works .tab-content ul>li:last-child,
  #works .tab-content ul>li:nth-child(3n),
  #works .tab-content ul>li:nth-child(3n+1)
  {
    margin-left: 3.3333%;
    margin-right: 3.3333%;
  }
  #works .tab-content li{
    width: 40%;
  }
  #works .tab-content .number {
    font-size: 2rem;
    width: 100%;
  }
  #works .tab-content .prof {
    width: 100%;
}

}