.cases{
    width: 100%;
    padding: 0 50px;
    box-sizing: border-box;
}
.cases .row{
    /* margin: 0 15px; */
}

.cases .category {
  padding-top: 150px;
  text-align: center;
}

.cases .category a {
  font-size: 14px;
  position: relative;
}

.cases .category a:before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background-color: #333;
  transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transform: scale(0, 1);
  transform-origin: 0 0;
}

.cases .category a.active:before,
.cases .category a:hover:before {
  transform: scale(1, 1);
}

.cases .category span {
  margin: 0 40px;
}

.cases .category span:last-child {
  display: none;
}

.cases .main {
  padding-top: 130px;
}

.cases .main .item {
  margin-bottom: 30px;
  text-align: center;
}

.cases .main .item .image {
  padding-top: 63%;
  background-color: #333;
  background-size: cover;
  position: relative;
}

.cases .main .item .image .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}



.cases .main .item .image .bg .text {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translateY(-45%);
  transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}

.cases .main .item .image .bg .text span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #333;
}

.cases .main .item .image .bg .text .content {
  font-size: 12px;
  line-height: 23px;
  padding: 0 15%;
}

.cases .category a{
    color: #333;
    text-decoration: none;
    font-size: 1.4rem;
}
.cases .category span {
    margin: 0 40px;
}
#case,
#contact2,
.cases .category,
#news,
#studio {
    padding-top: 30px
}

@media (hover: hover){
  .cases .main .item .image .bg:hover {
    opacity: 1;
  }
  
  .cases .main .item .image .bg:hover .text {
    transform: translateY(-50%);
  }
}
@media all and (max-width:1450px){
  .cases .category {
    text-align: left;
  }
  .cases .category span {
    display: none;
  }
  .cases .category a{
    margin-right: 40px ;
  }
  .cases .main{
    padding-top: 60px;
  }
}