* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@font-face {
  font-family: "PingFang SC";
  src: url("../assets/fonts/PingFang-SC-Regular.woff") format("woff");
}

html {
  font-size: calc(100vw / 750 * 100);
}

html body {
  overflow-x: hidden;
}

a {
  color: #8B8A8A;
  text-decoration: none;
}

@media (min-width: 750px) {
  html {
    font-size: 100px;
  }
  html .main {
    width: 750px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  html {
    font-size: calc(100vw / 750 * 100) !important;
  }
  @-webkit-keyframes slide-left-in1 {
    0% {
      margin-left: -200px;
    }
    100% {
      margin-left: -2px;
    }
  }
  @keyframes slide-left-in1 {
    0% {
      margin-left: -200px;
    }
    100% {
      margin-left: -2px;
    }
  }
  html .main {
    width: 100vw !important;
  }
}

.main {
  width: 100vw;
  margin: 0 auto;
  font-family: "Microsoft Yahei", -apple-system, "PingFang SC", "Helvetica Neue",
 STHeiti, Tahoma, Simsun, sans-serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.main .section1 {
  height: 16.24rem;
  background-color: black;
  position: relative;
}

.main .section1 .logo {
  overflow: hidden;
}

.main .section1 .logo .box {
  width: 2.58rem;
  overflow: hidden;
  margin-left: 0.6rem;
}

.main .section1 .logo .box img {
  width: 2.58rem;
  height: 0.38rem;
  margin-top: 0.72rem;
  display: block;
}

.main .section1 .logo > img {
  display: block;
  width: 4.22rem;
  height: 4.22rem;
  position: absolute;
  left: 4.74rem;
  top: -1.44rem;
}

.main .section1 .text img {
  width: 2.78rem;
  height: 1.58rem;
  margin-left: 0.6rem;
  display: block;
  margin-top: 3.12rem;
}

.main .section1 .text p {
  color: #fff;
  font-weight: bold;
  margin-left: 0.6rem;
}

.main .section1 .text p:nth-of-type(1) {
  font-size: 1.2rem;
  line-height: 1.12rem;
  margin-top: 0.1rem;
  margin-bottom: 0.36rem;
}

.main .section1 .text p:nth-of-type(2) {
  font-size: 0.42rem;
  line-height: 0.38rem;
}

.main .section1 .text p:nth-of-type(3) {
  width: 2.38rem;
  font-size: 0.28rem;
  position: absolute;
  right: 4.56rem;
  overflow: hidden;
  white-space: nowrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.main .section1 .text .line {
  width: 0.54rem;
  height: 0.02rem;
  background: #FFFFFF;
  margin-left: 0.6rem;
  margin-top: 1.46rem;
  margin-bottom: 0.1rem;
}

.main .section1 > img {
  position: absolute;
}

.main .section1 > img:nth-of-type(1) {
  width: 2.66rem;
  height: 2.66rem;
  bottom: -0.26rem;
  left: 0.8rem;
  z-index: 1;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  opacity: 0;
  -webkit-animation: ball-in 1s, fade-in 1s;
          animation: ball-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section1 > img:nth-of-type(2) {
  width: 8.7rem;
  height: 8.8rem;
  top: 5.64rem;
  left: 1.7rem;
  opacity: 0;
  -webkit-animation: slide-right-in 1s, fade-in 1s;
          animation: slide-right-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 1;
}

.main .section1 > img:nth-of-type(3) {
  width: 1.82rem;
  height: 0.84rem;
  bottom: 1.98rem;
  left: 0rem;
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section1 .mask {
  width: 1.6rem;
  height: 0.77rem;
  position: absolute;
  top: 6.84rem;
  left: 4.66rem;
  border-radius: 50%;
  -webkit-box-shadow: 0 -0.08rem 0.4rem 0.05rem #000000;
          box-shadow: 0 -0.08rem 0.4rem 0.05rem #000000;
  opacity: 0;
  -webkit-animation: slide-right-in 1.5s, fade-in 1s;
          animation: slide-right-in 1.5s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section2, .main .section3, .main .section4, .main .section5, .main .section6, .main .section7, .main .section8, .main .section9 {
  position: relative;
}

.main .section2 .title, .main .section3 .title, .main .section4 .title, .main .section5 .title, .main .section6 .title, .main .section7 .title, .main .section8 .title, .main .section9 .title {
  overflow: hidden;
  padding: 0 0.64rem;
}

.main .section2 .title p, .main .section3 .title p, .main .section4 .title p, .main .section5 .title p, .main .section6 .title p, .main .section7 .title p, .main .section8 .title p, .main .section9 .title p {
  font-weight: bold;
}

.main .section2 .title p:nth-of-type(1), .main .section3 .title p:nth-of-type(1), .main .section4 .title p:nth-of-type(1), .main .section5 .title p:nth-of-type(1), .main .section6 .title p:nth-of-type(1), .main .section7 .title p:nth-of-type(1), .main .section8 .title p:nth-of-type(1), .main .section9 .title p:nth-of-type(1) {
  line-height: 0.74rem;
  color: #000000;
  font-size: 0.6rem;
  margin-top: 1rem;
}

.main .section2 .title p:nth-of-type(2), .main .section3 .title p:nth-of-type(2), .main .section4 .title p:nth-of-type(2), .main .section5 .title p:nth-of-type(2), .main .section6 .title p:nth-of-type(2), .main .section7 .title p:nth-of-type(2), .main .section8 .title p:nth-of-type(2), .main .section9 .title p:nth-of-type(2) {
  color: #D9BA90;
  font-size: 0.8rem;
  margin-bottom: 0.48rem;
  margin-top: 0.06rem;
}

.main .section2 .circle, .main .section3 .circle, .main .section4 .circle, .main .section5 .circle, .main .section6 .circle, .main .section7 .circle, .main .section8 .circle, .main .section9 .circle {
  position: absolute;
  width: 1.14rem;
  height: 1.14rem;
  top: 0.2rem;
  right: 0.38rem;
}

.main .section2 .circle div, .main .section3 .circle div, .main .section4 .circle div, .main .section5 .circle div, .main .section6 .circle div, .main .section7 .circle div, .main .section8 .circle div, .main .section9 .circle div {
  position: absolute;
}

.main .section2 .circle div:nth-of-type(1), .main .section3 .circle div:nth-of-type(1), .main .section4 .circle div:nth-of-type(1), .main .section5 .circle div:nth-of-type(1), .main .section6 .circle div:nth-of-type(1), .main .section7 .circle div:nth-of-type(1), .main .section8 .circle div:nth-of-type(1), .main .section9 .circle div:nth-of-type(1) {
  width: 1.14rem;
  height: 1.14rem;
  background: #292929;
  border-radius: 50%;
  top: 0.38rem;
  left: -0.46rem;
}

.main .section2 .circle div:nth-of-type(2), .main .section3 .circle div:nth-of-type(2), .main .section4 .circle div:nth-of-type(2), .main .section5 .circle div:nth-of-type(2), .main .section6 .circle div:nth-of-type(2), .main .section7 .circle div:nth-of-type(2), .main .section8 .circle div:nth-of-type(2), .main .section9 .circle div:nth-of-type(2) {
  width: 1.14rem;
  height: 1.14rem;
  border: 0.04rem solid #D9BA90;
  border-radius: 50%;
  top: 0rem;
  right: 0rem;
}

.main .section2 {
  padding: 0 0;
}

.main .section2 .title {
  padding: 0 0.64rem;
}

.main .section2 > p {
  color: #000000;
  font-size: 0.28rem;
  padding: 0 0.56rem 0 0.64rem;
}

.main .section2 > img {
  width: 6.22rem;
  height: 4.14rem;
  margin-top: 0.48rem;
  margin-left: 0.64rem;
  display: block;
}

.main .section3 {
  margin-top: 0.82rem;
}

.main .section3 .title p:nth-of-type(2) {
  margin-bottom: 0.56rem;
}

.main .section3 ul {
  list-style: none;
  padding: 0 0.64rem;
}

.main .section3 ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 0.8rem;
}

.main .section3 ul li:nth-of-type(3) {
  margin-bottom: 0rem;
}

.main .section3 ul li > div:nth-of-type(1) {
  width: 1.2rem;
  height: 1.76rem;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin-top: -0.08rem;
}

.main .section3 ul li > div:nth-of-type(1) > div {
  margin-left: -0.1rem;
  width: 1.2rem;
  height: 1.76rem;
  background: #292929;
  -webkit-transform: skewX(-6deg);
          transform: skewX(-6deg);
}

.main .section3 ul li > div:nth-of-type(1) p {
  position: absolute;
  font-size: 0.54rem;
  font-weight: bold;
  color: #FFFFFF;
  top: 50%;
  left: 0.22rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.main .section3 ul li > div:nth-of-type(2) {
  width: 5.48rem;
  height: 1.6rem;
  background: #F2F2F2;
  position: relative;
  margin-left: 0.74rem;
}

.main .section3 ul li > div:nth-of-type(2) p {
  color: #000000;
  font-size: 0.28rem;
  width: 4.22rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0.4rem;
}

.main .section4 {
  margin-top: 1rem;
}

.main .section4 ul {
  list-style: none;
  padding: 0 0.64rem;
}

.main .section4 ul li:nth-of-type(1) p:nth-of-type(1) {
  margin-top: 0rem;
}

.main .section4 ul li p {
  color: #000000;
}

.main .section4 ul li p:nth-of-type(1) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: bold;
  font-size: 0.36rem;
  margin-top: 0.56rem;
}

.main .section4 ul li p:nth-of-type(1) span {
  width: 0.14rem;
  height: 0.14rem;
  background: #292929;
  border-radius: 50%;
  margin-right: 0.18rem;
}

.main .section4 ul li p:nth-of-type(2) {
  font-size: 0.28rem;
  margin-left: 0.3rem;
  margin-top: 0.16rem;
}

.main .section5 {
  padding: 0 0;
}

.main .section5 .top {
  width: 7.5rem;
  height: 6.16rem;
  margin-top: 0.64rem;
  overflow: hidden;
  position: relative;
}

.main .section5 .top .title {
  position: absolute;
  z-index: 1;
  width: 100%;
}

.main .section5 .top .title p:nth-of-type(1) {
  color: #fff;
  margin-top: 1.6rem;
}

.main .section5 .top .circle {
  top: 0.8rem;
}

.main .section5 .top .circle div:nth-of-type(1) {
  background: #FFFFFF;
}

.main .section5 .top .box {
  width: 7.5rem;
  height: 6.16rem;
  background: #000000;
  -webkit-transform: skew(0deg, -10.5deg);
          transform: skew(0deg, -10.5deg);
  position: absolute;
  top: -0.7rem;
  overflow: hidden;
}

.main .section5 .top .box p {
  font-size: 0.4rem;
  font-weight: bold;
  color: #FFFFFF;
  -webkit-transform: skew(0deg, 10.5deg);
          transform: skew(0deg, 10.5deg);
  position: absolute;
  left: 1.74rem;
  bottom: -0.27rem;
  font-family: 'PingFang SC';
}

.main .section5 ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 0.64rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: -0.7rem;
  position: relative;
  z-index: -1;
}

.main .section5 ul li:nth-of-type(1) > div > div {
  top: 50% !important;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.main .section5 ul li:nth-of-type(1) > div > div:nth-of-type(1) {
  z-index: 1;
}

.main .section5 ul li:nth-of-type(1), .main .section5 ul li:nth-of-type(2) {
  margin-bottom: 0.18rem;
}

.main .section5 ul li:nth-of-type(1) > p, .main .section5 ul li:nth-of-type(2) > p {
  margin-bottom: 0.12rem;
}

.main .section5 ul li:nth-of-type(3) p, .main .section5 ul li:nth-of-type(4) p {
  margin-top: 0.12rem;
}

.main .section5 ul li > p {
  font-weight: bold;
  color: #000000;
  font-size: 0.4rem;
  text-align: center;
  font-family: 'PingFang SC';
}

.main .section5 ul li > div {
  width: 3.02rem;
  height: 3.02rem;
  background: #F2F2F2;
  border-radius: 0.8rem;
  padding: 0.14rem;
  position: relative;
}

.main .section5 ul li > div > div {
  width: 1.52rem;
  height: 1.52rem;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  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;
  font-weight: 500;
  font-size: 0.28rem;
  color: #000000;
  position: absolute;
}

.main .section5 ul li > div > div:nth-of-type(1) {
  top: 0.14rem;
  left: 0.14rem;
}

.main .section5 ul li > div > div:nth-of-type(2) {
  top: 0.14rem;
  left: 1.36rem;
}

.main .section5 ul li > div > div:nth-of-type(3) {
  top: 1.36rem;
  left: 0.14rem;
}

.main .section5 ul li > div > div:nth-of-type(4) {
  top: 1.36rem;
  left: 1.36rem;
}

.main .section6 {
  margin-top: 1.4rem;
}

.main .section6 .title p:nth-of-type(2) {
  margin-bottom: 0.64rem;
}

.main .section6 ul {
  list-style: none;
  padding: 0 0.64rem;
}

.main .section6 ul li:nth-of-type(1) img {
  height: 2.5rem;
}

.main .section6 ul li:nth-of-type(3) p:nth-of-type(2) {
  margin-bottom: 0rem;
}

.main .section6 ul li img {
  width: 6.22rem;
  height: 2.92rem;
  display: block;
}

.main .section6 ul li p {
  color: #000000;
}

.main .section6 ul li p:nth-of-type(1) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: bold;
  font-size: 0.36rem;
  margin-top: 0.32rem;
}

.main .section6 ul li p:nth-of-type(1) span {
  width: 0.14rem;
  height: 0.14rem;
  background: #292929;
  border-radius: 50%;
  margin-right: 0.18rem;
}

.main .section6 ul li p:nth-of-type(2) {
  font-size: 0.28rem;
  margin-left: 0.32rem;
  margin-top: 0.12rem;
  margin-bottom: 0.72rem;
}

.main .section7 {
  margin-top: 1rem;
}

.main .section7 .title p:nth-of-type(2) {
  margin-bottom: 0.32rem;
}

.main .section7 .box {
  padding: 0 0.64rem;
}

.main .section7 .box > p {
  font-size: 0.28rem;
}

.main .section7 .box > img {
  display: block;
  width: 6.22rem;
  height: 3.92rem;
  margin-top: 0.64rem;
}

.main .section7 .box .text {
  margin-top: 0.6rem;
  margin-left: 0.16rem;
}

.main .section7 .box .text p {
  color: #000000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: bold;
  font-size: 0.28rem;
  line-height: 0.6rem;
}

.main .section7 .box .text p span {
  width: 0.14rem;
  height: 0.14rem;
  background: #292929;
  border-radius: 50%;
  margin-right: 0.18rem;
}

.main .section8 {
  margin-top: 1rem;
}

.main .section8 .title p:nth-of-type(2) {
  margin-bottom: 0.64rem;
}

.main .section8 > img {
  display: block;
  width: 6.22rem;
  height: 3.92rem;
  margin-bottom: 0.48rem;
  margin-left: 0.64rem;
}

.main .section8 ul {
  list-style: none;
  padding: 0 0.64rem;
}

.main .section8 ul li:nth-of-type(1) div, .main .section8 ul li:nth-of-type(4) div {
  width: 1.92rem;
}

.main .section8 ul li:nth-of-type(2) div {
  width: 3.72rem;
}

.main .section8 ul li:nth-of-type(3) div {
  width: 2.64rem;
}

.main .section8 ul li:nth-of-type(4) p {
  margin-bottom: 0rem;
}

.main .section8 ul li div {
  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;
  font-weight: bold;
  font-size: 0.36rem;
  color: #FFFFFF;
  background: #D9BA90;
  border-radius: 0.52rem;
  height: 0.72rem;
}

.main .section8 ul li p {
  color: #000000;
  font-size: 0.28rem;
  margin-top: 0.24rem;
  margin-bottom: 0.64rem;
}

.main .section9 {
  margin-top: 1rem;
}

.main .section9 .title p:nth-of-type(2) {
  margin-bottom: 0.64rem;
}

.main .section9 ul {
  list-style: none;
  margin-left: 0.12rem;
  padding: 0 0.64rem;
}

.main .section9 ul li {
  margin-bottom: 0.56rem;
}

.main .section9 ul li:nth-of-type(4) {
  margin-bottom: 0rem;
}

.main .section9 ul li > div {
  margin-bottom: 0.24rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.main .section9 ul li > div > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.main .section9 ul li > div > div > p {
  font-size: 0.36rem;
  font-weight: bold;
  color: #000000;
  opacity: 0.52;
}

.main .section9 ul li > div > div span {
  font-size: 0.28rem;
  font-weight: bold;
  color: #EC6F6F;
  margin-left: 0.06rem;
  margin-top: 0.02rem;
}

.main .section9 ul li > div #p1, .main .section9 ul li > div #p2 {
  font-size: 0.28rem;
  color: #EC6F6F;
  margin-right: 0.36rem;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.main .section9 ul li input {
  width: 5.74rem;
  height: 0.86rem;
  border: 0.02rem solid #DCDCDC;
  border-radius: 0.16rem;
  outline: none;
  display: block;
  font-size: 0.36rem;
  padding-left: 0.5em;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-appearance: none;
}

.main .section9 ul li .btn {
  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;
  width: 5.74rem;
  height: 0.86rem;
  border-radius: 0.16rem;
  background: #000000;
  font-size: 0.36rem;
  font-weight: bold;
  color: #FFFFFF;
  margin-bottom: 0rem;
  cursor: pointer;
  opacity: 0.8;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.main .section9 ul li .imgBox {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 0.05rem solid #eee;
  border-top: 0.05rem solid #746f6f;
  z-index: 1;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-70%);
          transform: translateX(-70%);
  margin-top: -0.65rem;
  display: none;
}

.main .section9 .mask {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 0 0.24rem 0 0.28rem;
  height: 0.72rem;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  background-color: rgba(255, 223, 180, 0.6);
  border-radius: 0.08rem;
  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;
  font-size: 0.28rem;
  color: #744300;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  pointer-events: none;
}

.main .footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 0.64rem 0 0.56rem;
  margin-top: 0.84rem;
  margin-bottom: 1.2rem;
}

.main .footer .left p {
  color: #8B8A8A;
  font-size: 0.28rem;
}

.main .footer .left p:nth-of-type(1) {
  font-weight: bold;
  color: #000000;
  margin-bottom: 0.12rem;
}

.main .footer .right {
  -ms-flex-item-align: end;
      align-self: flex-end;
  height: 1.72rem;
  margin-bottom: 0.1rem;
}

.main .footer .right img {
  width: 1.72rem;
  height: 1.72rem;
}
/*# sourceMappingURL=index.css.map */