* {
  margin: 0;
  padding: 0;
}

html {
  --size: 0px;
  --box-shadow: 0 6rem 21rem 0 #00000018;
  width: 100%;
  height: 100%;
  font-size: var(--size);
  background-color: #F6F8FA;

  body {
    width: 100%;
    font-size: 16rem;
    position: relative;

    .top_placeholder {
      width: 100%;
      height: 100rem;
    }

    .width_space {
      aspect-ratio: 188 / 100;
      height: 100vh;
      max-width: 100vw;
      pointer-events: none;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
    }

    .header {
      width: var(--bodyWidth);
      height: 100rem;
      position: fixed;
      left: 0;
      top: 0;
      box-shadow: 0 2rem 4rem 0 #00000064;
      background-color: #fffa;
      backdrop-filter: blur(4px);

      .header_content {
        height: 100rem;
        width: 1180rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        padding: 0 10rem;

        .logo {
          background-color: #E54C11;
          color: #fff;
          width: 40rem;
          height: 34rem;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rem;
          border-radius: 10rem;
        }

        .title {
          font-size: 24rem;
          font-weight: bold;
          margin-left: 8rem;
        }

        .menus {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;

          .menu {
            font-size: 18rem;
            margin: 0 10rem;
            padding: 0 20rem;
            cursor: pointer;
            position: relative;

            &::before {
              content: "";
              position: absolute;
              left: 0;
              bottom: -8rem;
              width: 100%;
              height: 6rem;
              background-color: #1062D3;
              border-radius: 3rem;
              transform: scaleX(0);
              transition: transform .2s;
            }

            &:hover {
              color: #1062D3;

              &::before {
                transform: scaleY(1);
              }
            }

          }

          .menu.active {
            color: #1062D3;

            &::before {
              transform: scaleY(1);
            }
          }
        }

        .contact_us {
          border-radius: 10rem;
          border: 1rem solid #1062D3;
          width: 105rem;
          height: 44rem;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18rem;
          color: #1062D3;
          cursor: pointer;

          &:hover {
            background-color: #1062D3;
            color: #fff;
          }
        }
      }
    }

    .content {
      width: var(--width);
      margin: 0 auto;

      .tip {
        font-size: 18rem;
        color: #1062D3;
        width: 190rem;
        height: 40rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20rem;
        background-color: #DFE7F9;
        margin-top: 144rem;
      }

      .title {
        font-size: 52rem;
        margin-top: 25rem;
        color: #3A4358;
        font-weight: bold;
      }

      .sub_title {
        font-size: 18rem;
        margin-top: 18rem;
        color: #3A4358;
      }
    }
  }
}

.home {
  padding: 140rem 0;

  .home_content {
    width: 1139rem;
    height: 583rem;
    margin: 0 auto;
    position: relative;

    .home_tip {
      font-size: 18rem;
      color: #1062D3;
      width: 260rem;
      height: 40rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20rem;
      background-color: #DFE7F9;
      position: absolute;
      left: 0;
      top: 0;
    }

    .home_right {
      position: absolute;
      right: 0;
      top: 0;
      width: 484rem;
      height: 538rem;

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

    .home_titles {
      position: absolute;
      left: 0;
      top: 80rem;
      font-size: 72rem;

      .home_title {
        height: 80rem;
        line-height: 80rem;
        font-weight: 450;

        .bule {
          color: #2059E9;
        }

        .red {
          color: #E54C11;
        }
      }
    }

    .text {
      position: absolute;
      width: 530rem;
      left: 0;
      font-size: 16rem;
      color: #3A4358;
    }

    .text_1 {
      top: 280rem;
    }

    .buttons {
      display: flex;
      position: absolute;
      top: 360rem;

      .button {
        margin: 0 10rem;
        border-radius: 20rem;
        width: 170rem;
        height: 60rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        &:hover {
          box-shadow: var(--box-shadow);
        }
      }

      .red {
        background-color: #E54C11;
        color: #fff;
      }

      .white {
        background-color: #DFE7F9;
      }
    }

    .text_2 {
      top: 460rem;
    }

    .text_3 {
      top: 490rem;
      font-size: 20rem;
      font-weight: 600;

      span+span {
        margin-left: 20rem;
      }
    }
  }
}

.data {
  width: 100%;
  height: 200rem;
  background-color: #2E6EDC;
  display: flex;
  align-items: center;
  justify-content: center;

  .data_item {
    color: #fff;
    margin: 0 70rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .num {
      font-size: 72rem;
      font-weight: bold;
    }

    .title {
      font-size: 16rem;
    }
  }
}

.solution {
  display: flex;
  flex-direction: column;
  align-items: center;

  .solution_items {
    display: flex;
    margin-top: 80rem;

    .solution_item {
      width: 282rem;
      border-radius: 20rem;
      overflow: hidden;
      position: relative;
      background-color: #fff;
      cursor: pointer;

      &:hover {
        box-shadow: var(--box-shadow);
      }

      .solution_img {
        width: 282rem;
        height: 200rem;
      }

      .solution_icon {
        position: absolute;
        right: 20rem;
        top: 179.5rem;
        background-color: #EDECEC;
        width: 45rem;
        height: 45rem;
        border-radius: 22.5rem;
      }

      .title {
        margin-top: 30rem;
        font-size: 24rem;
        font-weight: 500;
        margin-left: 20rem;
      }

      .details {
        font-size: 16rem;
        margin: 20rem;
        height: 60rem;
        color: #3A4358;
      }

      .details_content {
        margin: 10rem 20rem 0;
        padding: 10rem 0;
        border-top: 1rem solid #DEDCDC;
        border-bottom: 1rem solid #DEDCDC;

        .details_item {
          color: #3D568E;
          position: relative;
          height: 24rem;
          margin-left: 14rem;

          &::before {
            content: "";
            position: absolute;
            left: -14rem;
            top: 9rem;
            width: 6rem;
            height: 6rem;
            background-color: #E54C11;
          }
        }
      }

      .to_details {
        padding: 20rem;
        color: #333333;
      }
    }

    .solution_item+.solution_item {
      margin-left: 27rem;
    }
  }
}

.service {
  display: flex;
  flex-direction: column;
  align-items: center;

  .service_items {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 80rem;

    .service_item {
      display: flex;
      height: 240rem;
      padding: 65rem 0;

      .text {
        width: 490rem;
        display: flex;
        flex-direction: column;
        align-items: end;

        .message {
          background-color: #2059E9;
          color: #fff;
          font-size: 24rem;
          width: 218rem;
          height: 57rem;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 10rem;
          position: relative;
        }

        .details {
          margin-top: 30rem;
        }

        .details_items {
          color: #3D568E;
          font-size: 16rem;

          .details_item {
            margin-top: 8rem;
            position: relative;

            &::before {
              content: "";
              position: absolute;
              left: -14rem;
              top: 9rem;
              width: 6rem;
              height: 6rem;
              background-color: #2059E9;
            }
          }
        }
      }

      .interval {
        height: calc(100% + 130rem);
        width: 3rem;
        background-color: #C4C4C4;
        margin: -65rem 65rem;

        .number {
          width: 46rem;
          height: 46rem;
          font-size: 18rem;
          color: #fff;
          background-color: #E54C11;
          border-radius: 23rem;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 70.5rem 0 0 -21.5rem;
        }
      }

      .service_img_space {
        width: 490rem;
        display: flex;

        .service_img_content {
          width: 387rem;
          height: 201rem;
          padding: 14rem;
          background-color: #fff;
          border-radius: 20rem;
          box-shadow: var(--box-shadow);

          .service_img {
            width: 387rem;
            height: 201rem;
          }
        }
      }
    }

    .service_item_left {
      .details {
        text-align: right;
      }

      .message::before {
        content: "";
        position: absolute;
        right: -16rem;
        top: 20.5rem;
        width: 0;
        height: 0;
        border-top: 8rem solid transparent;
        border-bottom: 8rem solid transparent;
        border-left: 16rem solid #2059E9;
      }

    }

    .service_item_right {
      flex-direction: row-reverse;

      .text {
        align-items: start;

        .details_items {
          margin-left: 14rem;
        }
      }

      .message::before {
        content: "";
        position: absolute;
        left: -16rem;
        top: 20.5rem;
        width: 0;
        height: 0;
        border-top: 8rem solid transparent;
        border-bottom: 8rem solid transparent;
        border-right: 16rem solid #2059E9;
      }

      .service_img_space {
        justify-content: end;
      }
    }
  }
}

.advantage {
  display: flex;
  flex-direction: column;
  align-items: center;

  .advantage_center {
    margin-top: 80rem;
    display: flex;
    width: 1200rem;

    .advantage_center_img_1 {
      width: 224rem;
      height: 334rem;
      border-radius: 20rem;
    }

    .advantage_center_img_2 {
      margin-left: 44rem;
      width: 196rem;
      height: 334rem;
    }

    .advantage_center_details {
      margin-left: 40rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .details_title {
        font-size: 24rem;
        font-weight: bold;
      }

      .details_item {
        display: flex;

        .details_item_icon {
          background-color: #DFE7F9;
          border-radius: 20rem;
          width: 51rem;
          height: 51rem;
        }

        .details_item_content {
          margin-left: 20rem;
          height: 51rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .details_item_content_title {
            font-size: 20rem;
            color: #3D568E;
          }
        }
      }
    }
  }

  .advantage_bottom_items {
    display: flex;
    width: 1200rem;
    margin-top: 40rem;

    .advantage_bottom_item {
      background-color: #fff;
      border-radius: 20rem;
      padding: 30rem 20rem;
      box-shadow: var(--box-shadow);

      .advantage_bottom_img {
        padding: 10rem;
        width: 50rem;
        height: 50rem;
      }

      .advantage_bottom_title {
        font-size: 24rem;
        color: #3D568E;
      }

      .advantage_bottom_text {
        margin-top: 20rem;
      }
    }

    .advantage_bottom_item+.advantage_bottom_item {
      margin-left: 18rem;
    }
  }
}

.risk {
  display: flex;
  flex-direction: column;
  align-items: center;

  .risk_content {
    width: 1200rem;
    height: 350rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20rem;
    box-shadow: var(--box-shadow);
    margin-top: 100rem;

    .risk_img {
      width: 1080rem;
      height: 300rem;
    }
  }
}

.success {
  display: flex;
  flex-direction: column;
  align-items: center;

  .success_items {
    display: flex;
    width: 1200rem;
    margin-top: 80rem;

    .success_item {
      flex: 1;
      padding: 40rem;
      background-color: #fff;
      box-shadow: var(--box-shadow);
      border-radius: 20rem;

      .success_item_top {
        display: flex;

        .top_img {
          width: 36rem;
          height: 36rem;
        }

        .top_right {
          margin-left: 20rem;

          .star {
            color: #F4930C;
            font-size: 18rem;
            height: 18rem;
            line-height: 18rem;
          }

          .sub {
            font-size: 14rem;
          }
        }
      }

      .success_item_content {
        margin-top: 30rem;
      }

      .divide {
        width: 100%;
        height: 1rem;
        background-color: #DEDCDC;
        margin: 18rem 0;
      }

      .details_title {
        font-weight: bold;
      }

      .details_item {
        position: relative;
        margin-top: 10rem;
        color: #3D568E;
        margin-left: 14rem;

        &::before {
          content: "";
          position: absolute;
          left: -14rem;
          top: 9rem;
          width: 6rem;
          height: 6rem;
          background-color: #2059E9;
        }
      }
    }

    .success_item+.success_item {
      margin-left: 22rem;
    }
  }
}

.about {
  display: flex;
  flex-direction: column;
  align-items: center;

  .about_content {
    margin-top: 80rem;
    height: 530rem;
    width: 1200rem;
    display: flex;

    .about_content_left {
      height: 530rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .about_item_title {
        font-size: 24rem;
        color: #3D568E;
      }

      .about_item_text {
        margin-top: 20rem;
        color: #666;
      }
    }

    .about_content_right {
      width: 440rem;
      height: 460rem;
      padding: 40rem 30rem 30rem;
      background-color: #fff;
      border-radius: 20rem;
      box-shadow: var(--box-shadow);
      margin-left: 40rem;

      .about_content_right_title {
        font-size: 24rem;
        color: #3D568E;
      }

      .about_content_right_text {
        margin-top: 20rem;
        color: #666;
      }

      .icon_items {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .icon_item {
          width: 120rem;
          margin-top: 50rem;
          display: flex;
          flex-direction: column;
          align-items: center;

          .icon {
            width: 73rem;
            height: 73rem;
          }

          .icon_item_title {
            margin-top: 12rem;
            color: #3D568E;
            font-size: 18rem;
          }
        }
      }
    }
  }

  .partner_title {
    color: #3A4358;
    font-size: 30rem;
    margin-top: 70rem;
  }

  .partner_items {
    display: flex;
    width: 1200rem;
    justify-content: space-between;
    margin-top: 30rem;

    .partner_item {
      width: 158rem;
      height: 64rem;
      border: 1rem solid #AFB7CB;
    }
  }
}

.contact_us {
  display: flex;
  flex-direction: column;
  align-items: center;

  .contact_us_content {
    display: flex;
    margin-top: 70rem;

    .contact_us_card {
      background-color: #fff;
      border-radius: 20rem;
      box-shadow: var(--box-shadow);
      height: 680rem;
      width: 520rem;
      padding: 15rem 30rem;
    }

    .contact_us_left {
      .label {
        margin: 22rem auto 0;
        width: 520rem;
        color: #506597;
      }

      .input {
        width: 500rem;
        margin: 0 auto;
        display: block;
        height: 40rem;
        font-size: 20rem;
        padding: 0 10rem;
        border: 1rem solid #C8C8C8;
        outline: #506597;
        background-color: #F6F8FA;
        color: #666;
      }

      .input.error {
        border: 1rem solid #f004;
        background-color: #f001;
      }

      .textarea {
        width: 500rem;
        margin: 0 auto;
        display: block;
        height: 130rem;
        font-size: 20rem;
        padding: 10rem;
        border: 1rem solid #C8C8C8;
        outline: #506597;
        background-color: #F6F8FA;
        color: #666;
        resize: none;
      }

      .textarea.error {
        border: 1rem solid #f004;
        background-color: #f001;
      }

      .submit {
        width: 520rem;
        height: 40rem;
        background-color: #337DF7;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 40rem auto 0;
        color: #fff;
        cursor: pointer;
      }
    }

    .contact_us_right {
      margin-left: 22rem;

      .card_title {
        color: #0E3D7D;
        font-size: 24rem;
        margin-top: 28rem;
      }

      .card_items {
        .card_item {
          margin-top: 32rem;
          display: flex;

          .icon {
            width: 48rem;
            height: 48rem;
          }

          .card_content {
            margin-left: 20rem;

            .card_item_title {
              color: #333;
              font-size: 18rem;
            }

            .card_item_text {
              color: #666;
            }
          }
        }
      }

      .card_bottom {
        display: flex;
        margin-top: 60rem;

        .attention {
          flex: 1;

          .text {
            font-size: 24rem;
          }

          .icons {
            display: flex;
            margin-top: 20rem;

            .icon {
              width: 48rem;
              height: 48rem;
            }

            .icon+.icon {
              margin-left: 20rem;
            }
          }
        }

        .scan {
          width: 101rem;
          height: 120rem;
          position: relative;

          .scan_block {
            position: absolute;
            left: 0;
            top: 0;
            width: 99rem;
            height: 99rem;
            border: 1rem solid #2059E9;
            border-radius: 10rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            transition: transform .2s;
            cursor: none;

            .scan_block_center {
              position: relative;
              background-color: #DFE7F9;
              width: 77rem;
              height: 77rem;

              .qrcode {
                width: 100%;
                height: 100%;
                border: 1rem solid #ccc;
              }
            }
          }

          .scan_block:hover {
            transform: scale(3);
            z-index: 100;
          }

          .scan_text {
            margin-top: 6rem;
            width: 101rem;
            text-align: center;
            height: 18rem;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 101rem;
          }
        }

        .scan+.scan {
          margin-left: 10rem;
        }
      }
    }
  }

}

.bottom {
  background-color: #1A2434;
  width: var(--bodyWidth);
  height: 400rem;
  margin-top: 120rem;
  padding-top: 30rem;

  .bottom_content {
    color: #fff;
    width: 1200rem;
    margin: auto;
    display: flex;
    justify-content: space-between;

    .bottom_item_1 {
      width: 357rem;

      .bottom_item_top {
        display: flex;
        align-items: center;

        .logo {
          width: 32rem;
          height: 28rem;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #425383;
          background-color: #fff;
          border-radius: 10rem;
        }

        .text {
          margin-left: 6rem;
          font-size: 20rem;
        }
      }

      .bottom_item_text {
        color: #858F9E;
        margin-top: 24rem;
      }

      .icons {
        display: flex;
        margin-top: 20rem;
      }

      .icon {
        width: 41rem;
        height: 41rem;
      }

      .icon+.icon {
        margin-left: 18rem;
      }
    }

    .bottom_item_2 {
      width: 80rem;

      .bottom_item_title {
        font-size: 18rem;
        color: #fff;
      }

      .bottom_item_link {
        font-size: 14rem;
        color: #858F9E;
        margin-top: 20rem;
      }
    }

    .bottom_item_3 {
      width: 300rem;

      .bottom_item_title {
        font-size: 18rem;
        color: #fff;
      }

      .bottom_item_link {
        font-size: 14rem;
        color: #858F9E;
        margin: 20rem 0 0 20rem;
      }
    }
  }

  .divide {
    background-color: #576171;
    height: 1rem;
    margin-top: 40rem;
  }

  .bottom_copyright {
    margin-top: 10rem;
    color: #576171;
    text-align: center;
  }
}