@size-1: 64px;
@size-3: 32px;
@size-5: 20px;
@size-6: 18px;
@size-7: 16px;
@size-8: 14px;
@size-9: 12px;
@general-text-color: #707070;
@s1-bg: #f15a24;
@s2-bg: #172d72;
@s3-bg: #4716a5;

.s1-bg {
  background: @s1-bg;
}

.s2-bg {
  background: @s2-bg;
}

.s3-bg {
  background: @s3-bg;
}

.s1-color {
  color: @s1-bg;
}

.s2-color {
  color: @s2-bg;
}

.s3-color {
  color: @s3-bg;
}

.pc-container {
  width: 100%;
}

.mobile-container {
  display: none;
}

.section-bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70% 80%;
}

.word-modal {
  height: 100vh;
  width: 100vw;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  opacity: 0.95;
  z-index: 6;

  p {
    padding: 1rem;
    color: white;
    max-width: 768px;
    line-height: 1.7;
    font-size: @size-8;
  }
}

.hero {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: inherit !important;
  color: white;
  text-align: center;
  background-color: #1f1b2f;
  background-image: url('https://download.pingcap.com/images/user-words/hero-pc.svg');
  .section-bg;

  background-size: cover;

  .title {
    padding-top: 6rem;
    font-size: @size-1;
    font-weight: bold;
    margin-bottom: 4rem;
  }

  .slogan {
    font-size: @size-7;
    line-height: 2;
  }
}

#slider-control {
  position: fixed;
  opacity: 0;
  padding: 3px;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  z-index: 5;
}

#slider-control a {
  padding: 3px;
}

#slider-control .dot {
  width: 4px;
  margin: 0 10px;
  height: 30px;
  border-radius: 30px;
  background: white;
  border: 1px solid #fff;
}

#slider-control .active .dot {
  background-color: transparent;
  width: 20px;
  height: 35px;
  margin-left: 2px;
  background-image: url('https://download.pingcap.com/images/user-words/control-down.png');
  background-repeat: no-repeat;
  // background-position: center;
  background-size: auto;
  animation: background-move 2s linear infinite;
}

@keyframes background-move {
  0% {
    background-position: top;
  }

  100% {
    background-position: bottom;
  }
}

.panel {
  height: 750px;
  width: 100%;
  position: relative;

  section {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .section-title {
    position: absolute;
    text-align: center;
    color: white;
    top: 3rem;
    font-weight: bold;
    font-size: @size-6;

    &::after {
      content: '';
      position: absolute;
      width: 40px;
      border-bottom: 2px solid #fff;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .swiper-container {
    z-index: 0;
    height: 450px;
    max-width: 1024px;
    margin: 3rem;
    padding: 0;
  }

  .swiper-slide {
    height: 400px;
    margin: 1rem 0;
    background-color: white;
    position: relative;
  }

  .swiper-pagination {
    z-index: 0;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);

    .swiper-pagination-bullet {
      margin: 0 3px;
      border: 2px solid white;
      background: transparent;
      width: 10px;
      height: 10px;
    }
  }

  .swiper-pagination-bullet-active {
    background: white !important;
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 30px;
    height: 30px;
  }

  .swiper-button-prev {
    left: calc(~'(100vw - 1024px)/2 * 0.5');
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  }

  .swiper-button-next {
    right: calc(~'(100vw - 1024px)/2 * 0.5');
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  }

  .card {
    padding: 1rem;
    height: 100%;
    overflow: hidden;

    .words,
    .name,
    .misc {
      line-height: 1.7;
    }

    .read-more {
      display: none;
    }

    .quote {
      position: absolute;
      top: -10px;
      width: 53px;
      height: 40px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }

    .quote1 {
      background-image: url('https://download.pingcap.com/images/user-words/s1-quote.svg');
    }

    .quote2 {
      background-image: url('https://download.pingcap.com/images/user-words/s2-quote.svg');
    }

    .quote3 {
      background-image: url('https://download.pingcap.com/images/user-words/s3-quote.svg');
    }

    .words {
      font-size: @size-7;
      text-align: justify;
      line-height: 1.7;
      padding: 0 0.5rem;
      margin: 1.5rem 0 1rem;
      height: 220px;
      overflow: auto;
    }

    .name {
      font-size: @size-7;
      font-weight: bold;
      text-align: center;
    }

    .misc {
      font-size: @size-8;
      text-align: center;
    }

    .avatar {
      position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translate(-50%);
      width: 55px;
      height: 55px;

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

.hero-panel {
  height: 600px;
}

.s1 {
  .s1-bg;

  background-image: url('https://download.pingcap.com/images/user-words/s1-bg.svg');
  .section-bg;
}

.s2 {
  .s2-bg;

  background-image: url('https://download.pingcap.com/images/user-words/s2-bg.svg');
  .section-bg;
}

.s3 {
  .s3-bg;

  background-image: url('https://download.pingcap.com/images/user-words/s3-bg.svg');
  .section-bg;
}

.user-case {
  background-color: #211d35;
  color: white;

  .datas {
    display: flex;
    max-width: 1024px;
    margin: 0 auto;
    flex-flow: row wrap;
    justify-content: space-between;

    .data {
      margin: 3rem 0;
      text-align: center;

      .num {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        .section-bg;

        span:nth-child(1) {
          font-size: 2rem;
          font-style: italic;
          margin: 0 10px;
        }

        span:nth-child(2) {
          font-size: @size-7;
        }
      }

      .num1 {
        background-image: url('https://download.pingcap.com/images/user-words/cluster-bg.svg');
      }

      .num2 {
        background-image: url('https://download.pingcap.com/images/user-words/s1-bg.svg');
      }

      .num3 {
        background-image: url('https://download.pingcap.com/images/user-words/s2-bg.svg');
      }

      .num4 {
        background-image: url('https://download.pingcap.com/images/user-words/s3-bg.svg');
      }

      .desc {
        font-size: @size-7;
        margin: 1rem 0;
      }
    }
  }

  .intro {
    max-width: 1024px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
    text-align: center;
    font-size: @size-7;
    line-height: 2;
  }
}

.logos {
  max-width: 1248px;
  height: 1000px;
  margin: 0 auto;
  padding: 2rem 0;
  background-image: url('/images/user-words/logo-pc.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.logo {
  width: 100%;
  height: 100%;
  padding-top: 15%;

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

.logo2 {
  height: 90%;
}

.readMoreBtn {
  text-align: center;

  .readMore-btn {
    border: 1px solid #3351ff;
    color: #3351ff;
    width: 160px;
    font-size: 0.8rem;
    padding: 14px;
    margin-top: 10px;
    background: none;
    position: relative;
    cursor: pointer;
    margin-bottom: 3rem;

    .arrow {
      width: 16px;
      position: absolute;
      opacity: 0;
      top: 50%;
      left: 2px;
      margin-top: -0.4rem;
      transition: all 0.3s ease;
    }

    .btn-text {
      transition: all 0.3s ease;
    }

    &:hover {
      .arrow {
        opacity: 1;
        left: 12px;
      }

      .btn-text {
        padding: 14px 0 14px 20px;
      }
    }
  }
}

@media only screen and (max-width: 1024px) {
  .swiper-container {
    margin: 0;
    padding: 0 2rem;
  }

  .swiper-pagination {
    bottom: 10%;
  }
}

@media only screen and (max-width: 768px) {
  .pc-container,
  .pc-user-case,
  .pc-logos,
  .pc-readMoreBtn,
  .pc-footer {
    display: none;
  }

  .mobile-container {
    height: 100vh;
    display: block;

    .hero-panel {
      height: 100%;
    }

    .panel {
      height: 100%;

      .swiper-container {
        height: 400px;
        margin: 0;
        padding: 0 2rem;
      }

      .swiper-slide {
        height: 350px;
      }

      .swiper-pagination {
        bottom: 14%;
      }

      .section-title {
        font-size: @size-7;
        line-height: 1.7;
        left: 50%;
        width: 280px;
        transform: translateX(-50%);
        top: 5rem;
      }

      .card {
        .words {
          overflow: hidden !important;
          height: 190px;
          margin: 1rem 0;
        }

        .read-more {
          font-size: @size-8;
          display: block;
          padding: 0 0.5rem;
        }

        .quote {
          height: 25px;
          width: 33px;
        }
      }

      .down-arrow {
        position: absolute;
        width: 25px;
        height: 25px;
        bottom: 7%;
        background-image: url('https://download.pingcap.com/images/user-words/down-arrow.svg');
        .section-bg;

        transform: rotate(-90deg);
      }

      .down-arrow-center {
        left: 50%;
        bottom: 2% !important;
        margin-left: -15px;
      }
    }
  }

  .user-case {
    height: 100%;

    .datas {
      justify-content: space-around;
      padding: 2.5rem 1rem 0;

      .data {
        margin: 0 1.5rem;
        width: 100px;

        .num {
          height: 100px;

          span:nth-child(1) {
            font-size: 1rem;
            margin: 0 10px;
          }
        }

        .desc {
          margin: 0.5rem 0;
          font-size: @size-8;
        }
      }
    }

    .intro {
      padding: 0 1rem;
      font-size: @size-8;
    }
  }

  .hero {
    .title {
      padding-top: 11rem;
      font-size: @size-3;
    }

    background-image: url('https://download.pingcap.com/images/user-words/hero-mobile.png');
  }
}

@media only screen and (max-width: 414px) {
  .user-case .datas {
    padding: 5.5rem 1.5rem 1.5rem;

    .data .num {
      height: 80px;
    }
  }
}

@media only screen and (max-width: 375px) and (max-height: 812px) {
  .mobile-container {
    .panel {
      .swiper-container {
        height: 380px;
        margin-top: 3rem;
      }

      .swiper-slide {
        height: 330px;
      }

      .section-title {
        top: 9rem;
      }

      .card {
        .words {
          height: 155px;
        }
      }
    }
  }

  .user-case {
    .datas {
      padding: 6.5rem 0 0;

      .data {
        margin: 0 1.5rem 0.5rem;

        .num {
          height: 70px;
        }

        .desc {
          font-size: @size-9;
        }
      }
    }

    .intro {
      padding: 2rem 2rem 0;
    }
  }
}

@media only screen and (max-width: 375px) and (max-height: 763px) {
  .mobile-container {
    .panel {
      .swiper-container {
        height: 330px;
        margin-top: 3rem;
      }
      
      .section-title {
        top: 6rem;
      }

      .swiper-slide {
        height: 270px;
      }

      .card {
        .words {
          height: 105px;
        }
      }
    }
  }

  .user-case .datas {
    padding: 3.5rem 0 0;

    .data {
      margin: 0 1.5rem 0.5rem;

      .num {
        height: 40px;
      }

      .desc {
        font-size: @size-9;
      }
    }
  }
}

@media only screen and (max-width: 360px) {
  .mobile-container {
    .panel {
      .swiper-container {
        height: 380px;
        margin-top: 3rem;
      }

      .swiper-slide {
        height: 330px;
      }

      .swiper-pagination {
        bottom: 10%;
      }

      .down-arrow {
        bottom: 5%;
      }

      .card {
        .words {
          height: 180px;
        }

        .words,
        .name,
        .misc,
        .read-more {
          font-size: @size-9;
        }
      }
    }
  }

  .hero {
    .title {
      font-size: @size-5;
    }
  }

  .user-case {
    .datas {
      padding: 3.5rem 0 0;

      .data {
        margin: 0 1.5rem 0.5rem;

        .num {
          height: 40px;
        }

        .desc {
          font-size: @size-9;
        }
      }
    }

    .intro {
      padding: 1rem;
    }
  }
}

@media only screen and (max-width: 320px) {
  .user-case {
    .datas {
      padding: 4.5rem 0 0;
    }

    .intro {
      padding: 1rem 1rem 0;
      font-size: @size-9;
    }
  }

  .mobile-container {
    .panel {
      .swiper-container {
        height: 300px;
      }

      .swiper-slide {
        height: 250px;
      }

      .swiper-pagination {
        bottom: 10%;
      }

      .down-arrow {
        bottom: 5%;
      }

      .card {
        .words {
          height: 100px;
        }
      }
    }
  }
}