* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

html,
body {
  font-family: "Microsoft YaHei", sans-serif;
  color: #333;
  line-height: 1.6;
  width: 100%;
  font-size: 0.520833vw;
  background: linear-gradient(to bottom, #e3efff 0%, #a0bfff 100%);
  overflow-x: hidden;
}

.header {
  width: 100vw;
  height: 40rem;
}

.banner {
  width: 100vw;
  height: 40rem;
}

.lede {
  margin: 9.8rem auto 0;
  padding: 1.8rem;
  max-width: 155.2rem;
  border-radius: 1rem;
  background: linear-gradient(to bottom, #1baeff 0%, #1158ff 100%);
}

.lede .wrapper {
  position: relative;
  padding: 4rem;
  border: 0.4rem solid #b8faff;
  border-radius: 0.8rem;
}

.lede .wrapper .accent span {
  position: absolute;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #66ecf7;
  border-top: 0.4rem solid #ffffff;
}

.lede .wrapper .accent span:nth-child(1) {
  left: 1.6rem;
  top: 1.6rem;
}

.lede .wrapper .accent span:nth-child(2) {
  right: 1.6rem;
  top: 1.6rem;
}

.lede .wrapper .accent span:nth-child(3) {
  left: 1.6rem;
  bottom: 1.6rem;
}

.lede .wrapper .accent span:nth-child(4) {
  right: 1.6rem;
  bottom: 1.6rem;
}

.lede .wrapper .content {
  font-size: 3rem;
  color: #d1feff;
}

.section {
  display: flex;
  margin: 9rem auto 0;
  max-width: 155.2rem;
}

.section .frame {
  flex-shrink: 0;
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: inherit;
}

.section:nth-of-type(even) .frame {
  flex-direction: row-reverse;
}

.section .frame .serial {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 4.4rem;
  height: 4.8rem;
}

.section:nth-of-type(even) .frame .serial {
  flex-direction: row-reverse;
}

.section .frame .serial::before {
  display: block;
  content: "";
  width: 6.4rem;
  height: 4.8rem;
  background: url(./images/01.png) no-repeat;
  background-size: 100%;
}

.section:nth-of-type(2) .frame .serial::before {
  background: url(./images/02.png) no-repeat;
  background-size: 100%;
}

.section:nth-of-type(3) .frame .serial::before {
  background: url(./images/03.png) no-repeat;
  background-size: 100%;
}

.section:nth-of-type(4) .frame .serial::before {
  background: url(./images/04.png) no-repeat;
  background-size: 100%;
}

.section:nth-of-type(5) .frame .serial::before {
  background: url(./images/05.png) no-repeat;
  background-size: 100%;
}

.section:nth-of-type(6) .frame .serial::before {
  background: url(./images/06.png) no-repeat;
  background-size: 100%;
}

.section:nth-of-type(7) .frame .serial::before {
  background: url(./images/07.png) no-repeat;
  background-size: 100%;
}
.section:nth-of-type(8) .frame .serial::before {
  background: url(./images/08.png) no-repeat;
  background-size: 100%;
}
.section:nth-of-type(9) .frame .serial::before {
  background: url(./images/09.png) no-repeat;
  background-size: 100%;
}
.section:nth-of-type(10) .frame .serial::before {
  background: url(./images/10.png) no-repeat;
  background-size: 100%;
}

.section .frame .serial::after {
  display: block;
  content: "";
  margin: 0 2rem;
  width: 17.8rem;
  height: 3.6rem;
  background: url(./images/arrow.png) no-repeat;
  background-size: 100%;
}

.section:nth-of-type(even) .frame .serial::after {
  transform: scale(-1, 1);
}

.section .frame .brand {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3.2rem 6.2rem 0 6.2rem;
  min-width: 50%;
  height: 100%;
  z-index: 0;
}

.section .frame .brand .inner {
  display: flex;
  align-items: center;
}

.section .frame .brand::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 7.5rem;
  border: 0.4rem solid #b8faff;
  background: linear-gradient(to bottom, #095aea 0%, #6fa2f3 100%);
  z-index: 0;
}

.section .frame .brand .name {
  position: relative;
  margin: 0 5rem;
  font-size: 4.5rem;
  color: #ffffff;
  z-index: 1;
}

.section .frame .brand .accent {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #66ecf7;
  border-top: 0.4rem solid #ffffff;
  z-index: 1;
}

.section .wrapper {
  position: relative;
  flex-shrink: 0;
  margin-top: 10.7rem;
  margin-left: -100%;
  padding-right: 6.6rem;
  width: 100%;
}

.section:nth-of-type(even) .wrapper {
  position: relative;
  flex-shrink: 0;
  margin-top: 10.7rem;
  margin-left: -100%;
  padding-left: 6.6rem;
  padding-right: 0;
  width: 100%;
}

.section .wrapper .inner {
  padding: 4rem;
  border-radius: 5rem;
  border: 0.4rem solid #b8faff;
  background: linear-gradient(to bottom, #f6f7fcf2 0, #fefefef2 100%);
  z-index: 1;
}

.section .wrapper .inner .field {
  display: flex;
  justify-content: space-between;
  margin-top: 3.6rem;
}

.section .wrapper .inner .field:first-of-type {
  margin-top: 0;
}

.section .wrapper .inner .field .label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  height: 5rem;
  font-size: 3rem;
  line-height: 5rem;
  color: #ffffff;
  font-weight: 600;
  border-radius: 1rem 6rem 6rem 1rem;
  background: linear-gradient(to bottom, #54bef9 0, #1158ff 100%);
}

.section .wrapper .inner .field a.label {
  padding-right: 0.8rem;
  text-decoration: none;
}

.section .wrapper .inner .field a.label::after {
  content: "";
  margin-left: 0.8rem;
  display: inline-block;
  width: 3.4rem;
  height: 3.4rem;
  background: url(./images/touch.png) no-repeat;
  background-size: 100%;
}

.section .wrapper .inner .field .content {
  display: block;
  padding: 0 2rem;
  width: 100%;
  max-width: 118.8rem;
  font-size: 3rem;
  line-height: 5rem;
}

.tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8.5rem;
}

.tools .title {
  margin-bottom: 4.8rem;
  width: 15.7rem;
  height: 5.67rem;
}

.tools .title img {
  width: 100%;
}

.tools .content {
  display: flex;
  margin-bottom: 2.5rem;
}

.tools .content .tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 9.6rem;
  width: 20.4rem;
  height: 13.26rem;
  border-radius: 0.9rem;
  border: 0.2rem solid #b8faff;
  background: linear-gradient(to bottom, #6fa2f3 0, #095aea 100%);
}

.tools .content .tool img {
  width: 6rem;
  height: 6rem;
  object-fit: contain;
}

.tools .content .tool span {
  margin-top: 1.6rem;
  font-size: 2.252rem;
  color: #ffffff;
}

.propagate {
  margin-bottom: 2rem;
  width: 100%;
  height: 14.3rem;

  a {
    display: block;
    width: 100%;
    height: 100%;

    .image {
      width: 100%;
      height: 100%;
    }
  }
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 16.8rem;
  background: #0a5bea;
}

.footer p {
  font-size: 2rem;
  color: #f8f8f8;
  text-align: center;
  margin-bottom: 1rem;
}
.footer p a {
  font-size: 2rem;
  color: #f8f8f8;
}
.footer p:last-child {
  margin-bottom: 0;
}

#backToTop {
  position: fixed;
  bottom: 22.8rem;
  right: 5.7rem;
  display: none;
  width: 7rem;
  height: 7rem;
  background: url(./images/top.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  z-index: 999;
}
@media (max-width: 768px) {
  html,
  body {
    font-family: "Microsoft YaHei", sans-serif;
    color: #333;
    line-height: 1.6;
    width: 100%;
    font-size: 1.041666vw;
    background: linear-gradient(to bottom, #e3efff 0%, #a0bfff 100%);
    overflow-x: hidden;
  }

  .lede {
    margin: 9.8rem 3.2rem 0 3.2rem;
    padding: 1.8rem;
    border-radius: 1rem;
    background: linear-gradient(to bottom, #1baeff 0%, #1158ff 100%);
  }

  .lede .wrapper .content {
    font-size: 3.2rem;
    color: #d1feff;
  }

  .section {
    display: flex;
    margin: 9rem auto 0;
    padding: 0 3.2rem;
  }

  .section .frame .brand::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 4.8rem;
    border: 0.4rem solid #b8faff;
    background: linear-gradient(to bottom, #095aea 0%, #6fa2f3 100%);
    z-index: 0;
  }

  .section .frame .brand .name {
    position: relative;
    margin: 0 3rem;
    font-size: 3.6rem;
    color: #ffffff;
    z-index: 1;
  }

  .section .wrapper .inner {
    padding: 4rem;
    border-radius: 3.6rem;
    border: 0.4rem solid #b8faff;
    background: linear-gradient(to bottom, #f6f7fcf2 0, #fefefef2 100%);
    z-index: 1;
  }

  .section .wrapper .inner .field .content {
    display: block;
    padding: 0 2rem;
    width: 100%;
    max-width: 75%;
    font-size: 3.2rem;
    line-height: 5rem;
  }

  .tools .content .tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 4.2rem;
    width: 20.4rem;
    height: 13.26rem;
    border-radius: 0.9rem;
    border: 0.2rem solid #b8faff;
    background: linear-gradient(to bottom, #6fa2f3 0, #095aea 100%);
  }

  .propagate {
    margin-bottom: 2rem;
    width: 100%;
    height: 16.8rem;

    a {
      display: block;
      width: 100%;
      height: 16.8rem;
      background-color: #ffffff;

      .image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .footer .links {
    display: none;
  }

  .footer .copyright,
  .footer .mail {
    font-size: 2.8rem;
  }

  #backToTop {
    display: none !important;
  }
}