caimei-authentic-ross-static/css/product-rollaction.scss

.main {
  .about {
    margin-top: 100px;
    .container {
      height: 592px;
      position: relative;
    }
    .item {
      position: absolute;
      width: 286px;
      height: 286px;
      background-color: pink;

      &:nth-child(3) {
        position: relative;
        width: 592px;
        height: 592px;
        margin: 0 auto;
      }

      &:nth-child(1),
      &:nth-child(2) {
        left: 0;
      }

      &:nth-child(1),
      &:nth-child(4) {
        top: 0;
      }

      &:nth-child(4),
      &:nth-child(5) {
        right: 0;
      }

      &:nth-child(2),
      &:nth-child(5) {
        bottom: 0;
      }

      .cover {
        width: 100%;
        height: 100%;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      &:hover {
        .active {
          opacity: 1;
        }
      }

      .active {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        transition: all 0.4s;
        .title {
          font-size: 24px;
          color: #fff;
        }
        .line {
          width: 32px;
          height: 2px;
          background-color: #ffffff;
          margin: 40px auto;
        }
        .detail {
          font-size: 16px;
          color: #fff;
          line-height: 40px;
          padding: 0 70px;
        }
      }
    }
  }

  .service {
    margin-top: 140px;

    .cover {
      width: 568px;
      height: 568px;
      background: pink;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    &.one {
      .content {
        padding-top: 113px;
        background-image: url(/img/service-title-bg-one.png);
      }
    }

    &.two {
      background: #f7f7f7;
      margin-top: 319px;

      .container {
        position: relative;
        .cover {
          position: absolute;
          bottom: 76px;
          left: 0;
        }

        .content {
          padding-top: 173px;
          height: 456px;
          background-image: url(/img/service-title-bg-two.png);
          background-position: left 60px;
        }
      }
    }

    &.three {
      .content {
        padding-top: 113px;
        background-image: url(/img/service-title-bg-three.png);
      }
    }

    .content {
      width: 560px;
      text-align: justify;
      background-repeat: no-repeat;
      box-sizing: border-box;
      .title {
        font-size: 24px;
        font-weight: bold;
      }
      .line {
        width: 32px;
        height: 3px;
        background-color: #e8e8e8;
        margin: 32px 0;
      }

      .text {
        color: #999;
      }

      .lh40 {
        line-height: 40px;
      }
    }
  }
}