caimei-authentic-ross-static/css/brand-ross.scss

.advertising {
  width: 100%;
  height: 1055px;
  box-sizing: border-box;
  background: #f2f2f2;
  overflow: hidden;
  background: url(/img/brand-ross-ad.jpg) no-repeat center;
  background-size: cover;

  .video-container {
    position: relative;
    width: 1200px;
    height: 570px;
    margin: 0 auto;
    margin-top: 485px;
    background: pink;

    .play {
      position: absolute;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      z-index: 2;
      bottom: 155px;
      left: 50%;
      transform: translateX(-50%);
      cursor: pointer;
    }

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

.main {
  .wrapper {
    margin-top: 120px;
    .title {
      font-size: 34px;
      text-align: center;
    }

    .content {
      margin-top: 80px;
    }
  }

  .about {
    .content {
      height: 540px;
      .swiper {
        width: 720px;
        height: 100%;
        position: relative;

        .swiper-prev,
        .swiper-next {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 48px;
          height: 72px;
          background-color: rgba(55, 55, 55, 0.3) !important;
          z-index: 5;
          cursor: pointer;
          background: url(/img/icon-arrow-left.png) no-repeat center;
        }

        .swiper-next {
          left: unset;
          right: 0;
          background: url(/img/icon-arrow-right.png) no-repeat center;
        }

        img {
          width: 100%;
          height: 540px;
        }
      }

      .section {
        width: 480px;
        height: 540px;
        background: url(/img/icon-comma-01.png), url(/img/icon-comma-02.png);
        background-color: #f3920d;
        background-repeat: no-repeat;
        background-position: 48px 48px, 341px 410px;

        .item {
          width: 390px;
          margin: 0 auto;
          margin-top: 73px;
          display: none;

          .num {
            font-size: 32px;
            color: #fff;
            text-align: center;
          }

          .line {
            width: 1px;
            height: 24px;
            margin: 25px auto 40px;
            background: #fff;
          }

          .desc {
            font-size: 16px;
            color: #fff;
            line-height: 40px;
          }
        }
      }
    }
  }

  .therapy {
    .content {
      margin-top: 80px;
      height: 540px;
      .item {
        float: left;
        width: 180px;
        height: 100%;
        position: relative;
        overflow: hidden;
        transition: width 0.4s;

        &.hover {
          width: 480px;
          .cover {
            opacity: 0;
          }
          .active {
            opacity: 1;
          }
        }

        &:first-child {
          .cover {
            border-left: 0;
          }
        }

        .cover,
        .active {
          transition: opacity 0.4s;
        }

        .cover {
          position: absolute;
          left: 50%;
          top: 0;
          transform: translateX(-50%);
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border-left: 1px solid rgba(243, 146, 13, 0.2);
          background: linear-gradient(180deg, transparent 50%, rgba(243, 146, 13, 0.3) 100%);
          overflow: hidden;
          opacity: 1;

          .tip {
            font-size: 16px;
            text-align: center;
            margin-top: 57px;
            margin-bottom: 40px;
            font-weight: bold;
          }

          .line {
            width: 24px;
            height: 2px;
            background: #f3920d;
            margin: 0 auto;
          }

          img {
            position: absolute;
            width: 128px;
            height: 128px;
            bottom: 44px;
            left: 50%;
            transform: translateX(-50%);
          }
        }

        .active {
          position: absolute;
          left: 50%;
          top: 0;
          transform: translateX(-50%);
          opacity: 0;
          width: 480px;
          height: 100%;
          text-align: center;
          color: #fff;

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

          .info {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .tip {
              font-size: 24px;
              margin-bottom: 10px;
            }
            .subtip {
              font-size: 16px;
              margin-bottom: 60px;
            }
            .section {
              width: 160px;
              margin: 0 auto;
              border: 1px solid #fff;
              padding: 36px 0;
              dl {
                padding: 0;
                dt {
                  margin-bottom: 24px;
                }
                dd {
                  margin: 0;
                  margin-top: 10px;
                }
              }
            }
          }
        }
      }
    }
  }

  .application {
    .content {
      .item {
        position: relative;
        float: left;
        width: 390px;
        height: 390px;
        margin-right: 15px;
        margin-top: 15px;
        overflow: hidden;

        img {
          display: block;
          width: 100%;
          height: 100%;
          transition: all 0.4s;
        }

        &:nth-child(-n + 3) {
          margin-top: 0;
        }
        &:nth-child(5),
        &:nth-child(6) {
          width: 795px;
        }

        &:nth-child(3),
        &:nth-child(5),
        &:nth-child(7) {
          margin-right: 0;
        }

        .active {
          opacity: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.39);
          z-index: 1;
          top: 0;
          left: 0;
          transition: all 0.4s;

          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          .info {
            .num {
              font-size: 50px;
              background: linear-gradient(to bottom, #fff, transparent);
              -webkit-background-clip: text;
              color: transparent;
              text-align: center;
            }
            .tip {
              font-size: 24px;
              color: #fff;
              text-align: center;
            }
            .line {
              width: 28px;
              height: 2px;
              background: #fff;
              margin: 24px auto;
            }
            .link {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 160px;
              height: 48px;
              border: 1px solid #fff;
              font-size: 16px;
              color: #fff;
              margin-top: 52px;
              cursor: pointer;
            }
          }
        }

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

          img {
            transform: scale(1.06);
          }
        }
      }
    }
  }

  .distribution {
    .content {
      img {
        display: block;
        width: 100%;
      }

      .section {
        display: flex;
        justify-content: space-between;
        margin-top: 80px;

        .line {
          width: 1px;
          height: 12px;
          background: #b2b2b2;
          transform: translateY(52px);
        }
        .item {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          .row:first-child {
            padding-left: 36px;
            background: url(/img/icon-star.png) no-repeat left center;
            line-height: 37px;
            font-size: 28px;
          }

          .row.company {
            background-image: url(/img/icon-company.png);
          }

          .row.doctor {
            background-image: url(/img/icon-doctor.png);
          }

          .row.heart {
            background-image: url(/img/icon-heart.png);
          }

          .row:last-child {
            font-size: 14px;
            color: #999;
            margin-top: 12px;
          }
        }
      }
    }
  }

  .contact {
    .content {
      .cover {
        width: 626px;
        height: 418px;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .form-container {
        box-sizing: border-box;
        textarea {
          display: block;
          width: 526px;
          height: 344px;
          box-sizing: border-box;
          padding: 12px;
          line-height: 26px;
          font-size: 16px;
          border-color: #dedede;
        }

        .submit {
          font-size: 16px;
          color: #fff;
          height: 48px;
          background: #f3920d;
          text-align: center;
          line-height: 48px;
          margin-top: 26px;
          cursor: pointer;
          transition: all 0.4s;

          &:hover {
            background: #e78d0d;
          }
        }
      }
    }
  }
}