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

@media screen and (min-width: 768px) {
  .main {
    .about {
      margin-top: 100px;

      .container {
        position: relative;
      }
      .cover {
        position: absolute;
        left: 0;
        top: 0;
        width: 680px;
        height: 452px;
      }

      .content {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        .title {
          font-size: 24px;
          font-weight: bold;
          padding: 10px 0 20px;
          text-align: center;
        }

        .subtitle {
          font-size: 16px;
          text-align: center;
        }

        .title,
        .subtitle,
        .section {
          padding-left: 735px;
        }
        .section {
          height: 427px;
          padding-left: 735px;
          padding-top: 52px;
          padding-right: 40px;
          margin-top: 53px;
          background: url(/img/product-mesobiolift-about-bg.png) no-repeat;
          background-position: 20px 26px;
          background-color: #f7f7f7;
          .description {
            line-height: 32px;
          }
          ul {
            li {
              line-height: 40px;
            }
          }
        }
      }
    }

    .service {
      margin-top: 180px;

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

        .cover {
          height: 578px;
        }
      }
      &.two {
        .content {
          background-image: url(/img/service-title-bg-two.png);
        }

        .cover {
          height: 700px;
        }
      }

      .cover {
        width: 567px;
        background-color: pink;
      }

      .content {
        width: 560px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 113px;

        background-repeat: no-repeat;
        background-position: left top;
        .title {
          font-size: 24px;
          font-weight: bold;
        }
        .line {
          height: 3px;
          width: 32px;
          background-color: #f7f7f7;
          margin: 32px 0;
        }
        .description {
          font-size: 16px;
          line-height: 40px;
        }
        .detail {
          margin-top: 32px;
          li {
            line-height: 40px;
          }

          .text {
            color: #999;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .main {
    .container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
    }
    .about {
      margin-top: 1.2rem;
      .cover {
        width: 6.14rem;
        height: 4.08rem;
        margin-top: 0.4rem;

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

      .content {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 5.82rem;
        text-align: center;

        .title {
          font-size: 0.3rem;
          font-weight: bold;
          text-align: center;
        }

        .subtitle {
          font-size: 0.26rem;
          text-align: center;
          color: #999;
          margin: 0.16rem 0 0.4rem;
        }

        .section {
          .description {
            line-height: 0.4rem;
            font-size: 0.26rem;
          }
          ul {
            margin-top: 0.24rem;
            li {
              line-height: 0.48rem;
              font-size: 0.26rem;
            }
          }
        }
      }
    }

    .service {
      margin-top: 1.2rem;

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

      .cover {
        width: 5.68rem;
        margin-top: 0.32rem;
        img {
          display: block;
          width: 100%;
        }
      }

      .content {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        background-repeat: no-repeat;
        background-position: center top;
        background-size: 2rem;
        text-align: center;
        width: 6rem;
        .title {
          font-size: 24px;
          font-weight: bold;
          text-align: center;
          margin-top: 0.85rem;
        }
        .line {
          height: 0.03rem;
          width: 0.4rem;
          background-color: #f7f7f7;
          margin: 0.4rem auto 0.32rem;
        }
        .description {
          font-size: 0.26rem;
          line-height: 0.4rem;
        }
        .detail {
          margin-top: 0.32rem;
          font-size: 0.24rem;
          li {
            line-height: 0.48rem;
            font-size: 0.26rem;
          }

          .text {
            color: #999;
            font-size: 0.26rem;
          }
        }
      }
    }
  }
}