@content5: content5;
.@{content5}-wrapper {
  background-color: #fafafa;
  min-height: 720px;
  .@{content5} {
    > p {
      text-align: center;
    }
    &-img-wrapper {
      margin: 0 auto;
      left: 0;
      right: 0;
      .block {
        margin-bottom: 24px;
        .content5-block-content {
          display: block;
          background: #fff;
          border-radius: 4px;
          padding: 10px;
          text-align: center;
          position: relative;
          overflow: hidden;
          & img {
            border: 1px solid #000;
            -moz-box-shadow: 3px 3px 4px #000;
            -webkit-box-shadow: 3px 3px 4px #000;
            box-shadow: 3px 3px 4px #000;
            filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');
          }
          .page-pro();
          border: none;
          transition: box-shadow 0.3s @ease-out, transform 0.3s @ease-out;
          & > span {
            width: 100%;
            height: 200px;
            display: block;
            background: @line-color;
            padding: 0px;
          }
          & p {
            width: 100%;
            line-height: 30px;
          }
          &:hover {
            & p {
              bottom: 0;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .@{content5}-wrapper {
    height: 2400px;
    overflow: hidden;
    .@{content5} {
      ul {
        li {
          display: block;
          width: 100%;
          padding: 2%;
          span {
            height: 168px;
          }
          p {
            position: relative;
            bottom: 0;
          }
        }
      }
    }
  }
}