#__bs_notify__ {
  display: none !important;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  cursor: pointer;
}
body {
  background: #1e1e1e;
  font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}
#app {
  width: 100%;
  min-height: 100%;
}
.main {
  width: 1280px;
  margin: 0 auto;
}
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0 30px 80px;
}
.header .logo {
  display: flex;
  align-items: center;
}
.header .logo img {
  height: 50px;
}
.header .menu {
  display: flex;
  align-items: center;
}
.header a {
  width: 80px;
  height: 36px;
  line-height: 36px;
  margin-right: 36px;
  border: 2px solid #1e1e1e;
  border-radius: 43px;
  text-align: center;
  color: #777e91;
  font-size: 14px;
  font-weight: bold;
  box-sizing: content-box;
  text-decoration: none;
}
.header a:hover {
  color: #fff;
}
.header .on {
  border: 2px solid #6587ee;
  background: #556ff7;
  border-radius: 43px;
  color: #fff;
}
.footer {
  margin-top: 100px;
  width: 100%;
  text-align: center;
  padding: 42px 0;
  border-top: 1px solid #23262f;
  font-weight: 400;
  font-size: 12px;
  color: #777e91;
}
.down {
  position: relative;
  width: 100%;
  height: 776px;
  background: url('../images/down_bg.png') center no-repeat;
  background-size: cover;
}
.down .content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.down .content .left h1 {
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.02em;
  font-family: "DM Sans";
  color: #000;
}
.down .content .left p {
  display: inline-block;
  width: 447px;
  margin: 16px 0 10px 0;
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 20px;
  color: #000;
}
.down .content .left .btn {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 390px;
}
.down .content .left .btn a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 56px;
  margin-top: 20px;
  padding-left: 24px;
  border-radius: 8px;
  font-size: 500px;
}
.down .content .left .btn a:nth-child(2n) {
  margin-left: 30px;
}
.down .content .left .btn a small {
  font-size: 12px;
}
.down .content .left .btn a span {
  font-size: 20px;
}
.down .content .left .btn .and {
  background: url('../images/android.png') #000 20px center no-repeat;
  background-size: 36px 36px;
  color: #fff;
}
.down .content .left .btn .ios {
  padding-left: 30px;
  background: url('../images/apple.png') #fff 20px center no-repeat;
  background-size: 36px 36px;
  color: #000;
}
.down .content .right {
  width: 377px;
  height: 788px;
  margin-left: 160px;
  animation: floatUD 2s ease infinite;
}
.down .tips {
  position: absolute;
  bottom: -77px;
  left: 80px;
  width: 1120px;
  height: 252px;
  padding: 30px 40px 0 40px;
  background: linear-gradient(92.98deg, #161a29 3.54%, rgba(22, 26, 41, 0.7) 93.38%);
  border: 1px solid #353945;
  box-shadow: 0px 40px 64px -32px rgba(15, 15, 15, 0.1);
  backdrop-filter: blur(16px);
  border-radius: 24px;
}
.down .tips h1 {
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  padding: 0 0 28px 0;
  border-bottom: 1px solid rgba(119, 126, 145, 0.3);
}
.down .tips h1 span {
  color: #6587ee;
}
.down .tips .step {
  display: flex;
  margin-top: 40px;
}
.down .tips .step > div {
  display: flex;
}
.down .tips .step > div:nth-child(2n) {
  margin-left: 150px;
}
.down .tips .step > div div {
  margin-left: 20px;
  font-weight: 400;
  font-size: 14px;
  color: #777e91;
}
.down .tips .step > div p {
  font-weight: 600;
  font-size: 24px;
  color: #fcfcfd;
  margin-bottom: 5px;
}
.down .tips .step .num {
  width: 38px;
  height: 24px;
  line-height: 24px;
  margin-top: 5px;
  text-align: center;
  background: #6587ee;
  border-radius: 100px;
  font-size: 14px;
  color: #fcfcfd;
}
.advantage {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  margin-top: 240px;
}
.advantage .title {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.advantage .title h1 {
  font-weight: 700;
  font-size: 48px;
  color: #fcfcfd;
}
.advantage .title p {
  margin-top: 5px;
  font-weight: 400;
  font-size: 24px;
  color: #777e91;
}
.advantage .edge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1200px;
  margin-top: 130px;
}
.advantage .edge > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.advantage .edge > div img {
  width: 125px;
}
.advantage .edge > div .txt {
  padding-left: 30px;
  color: #fff;
}
.advantage .edge > div .txt p {
  padding-bottom: 20px;
}
.advantage .edge > div .txt span {
  display: inline-block;
  height: 25px;
  line-height: 25px;
  padding: 0 10px;
  border-radius: 13px;
  font-size: 12px;
  background: #353945;
}
.antifraud {
  margin-top: 200px;
}
.antifraud .title {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.antifraud .title h1 {
  font-weight: 700;
  font-size: 48px;
  color: #fcfcfd;
}
.antifraud .title p {
  margin-top: 5px;
  font-weight: 400;
  font-size: 24px;
  color: #777e91;
}
.antifraud .arrow {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.antifraud .arrow a {
  width: 40px;
  height: 40px;
  margin: 0 20px;
}
.antifraud .arrow img {
  width: 40px;
  height: 40px;
}
.antifraud .schedule {
  width: 302px;
  height: 8px;
  margin: 40px auto;
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.2);
}
.antifraud .schedule .percentage {
  height: 8px;
  border-radius: 23px;
  background: #fff;
  transition: width 0.2s;
}
.antifraud .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.antifraud .swiper-container {
  margin-left: 80px;
  width: 372px;
  height: 872px;
  overflow: hidden;
}
.antifraud .notify .block {
  padding-bottom: 40px;
}
.antifraud .notify .block:nth-child(2) span {
  background: #556ff7;
}
.antifraud .notify .block:nth-child(3) span {
  background: #58c27d;
}
.antifraud .notify .hd span {
  display: inline-block;
  width: 38px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: #6587ee;
  border-radius: 100px;
  font-size: 14px;
  color: #fcfcfd;
}
.antifraud .notify .hd h1 {
  line-height: 60px;
  font-weight: 600;
  font-size: 24px;
  color: #fcfcfd;
}
.antifraud .notify .bd {
  line-height: 24px;
  font-weight: 400;
  font-size: 14px;
  color: #777e91;
}
.antifraud .group {
  position: relative;
  width: 640px;
  height: 677px;
  background: url('../images/group.png') center no-repeat;
  background-size: cover;
}
.antifraud .group .pay {
  position: absolute;
  right: 60px;
  bottom: 180px;
  width: 195px;
  height: 220px;
  background: linear-gradient(92.98deg, #161a29 3.54%, rgba(22, 26, 41, 0.7) 93.38%);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  animation: floatUD 2s ease infinite;
}
.antifraud .group .pay span {
  display: inline-block;
  margin: 10px;
  padding: 7px 15px;
  border-radius: 15px;
  color: #fff;
  background: #3a71fe;
  font-size: 12px;
  font-weight: bold;
}
.antifraud .group .pay .pic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 10px auto;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
}
.antifraud .group .pay .pic img {
  width: 60px;
  height: 60px;
}
.antifraud .group .pay h1 {
  text-align: center;
  font-size: 15px;
  font-weight: normal;
  color: #fff;
}
.antifraud .group .pay p {
  line-height: 30px;
  text-align: center;
  font-size: 10px;
  color: #8f8ea8;
}
.antifraud .group .comment {
  position: absolute;
  top: 478px;
  display: flex;
  align-items: center;
  width: 250px;
  height: 70px;
  padding: 10px;
  background: linear-gradient(92.98deg, #161a29 3.54%, rgba(22, 26, 41, 0.7) 93.38%);
  backdrop-filter: blur(5px);
  border-radius: 35px;
  animation: floatUD 2s ease infinite;
}
.antifraud .group .comment .name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #556ff7;
  border-radius: 25px;
  color: #fff;
}
.antifraud .group .comment .info {
  padding-left: 20px;
  color: #fff;
}
.antifraud .group .comment .info p {
  line-height: 30px;
  font-size: 15px;
  font-weight: normal;
}
.antifraud .group .comment .star {
  font-size: 12px;
}
.antifraud .group .comment .star img {
  width: 12px;
  height: 12px;
}
.serve {
  margin-top: 70px;
}
.serve .title {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.serve .title h1 {
  margin-bottom: 15px;
  font-weight: 700;
  font-size: 48px;
  color: #fcfcfd;
}
.serve .title h2 {
  line-height: 24px;
  font-weight: 400;
  font-size: 12px;
  color: #777e91;
}
.serve .title a {
  width: 112px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 16px;
  color: #fcfcfd;
  background: #3b71fe;
  border-radius: 90px;
}
.serve .content {
  display: flex;
  justify-content: space-between;
  width: 1120px;
  margin: 0 auto;
  margin-top: 100px;
}
.serve .content .card {
  width: 360px;
  height: 296px;
  background: #23262f;
  border-radius: 20px;
  padding: 68px 40px 0 30px;
}
.serve .content .card img {
  width: 50px;
  height: 50px;
}
.serve .content .card h1 {
  padding: 30px 0 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: #fcfcfd;
}
.serve .content .card p {
  line-height: 24px;
  font-weight: 400;
  font-size: 14px;
  color: #777e91;
}
.tutorial {
  width: 1120px;
  margin: 0 auto;
}
.tutorial .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 560px;
  color: #ffffff;
}
.tutorial .title h1 {
  font-weight: 700;
  font-size: 96px;
}
.tutorial .title h2 {
  line-height: 150px;
  font-weight: 400;
  font-size: 24px;
}
.tutorial .title p {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 34px;
}
.tutorial .content {
  background: linear-gradient(92.98deg, #23262f 3.54%, rgba(35, 38, 47, 0.7) 93.38%);
  border: 1px solid #353945;
  box-shadow: 0px 40px 64px -32px rgba(15, 15, 15, 0.1);
  backdrop-filter: blur(16px);
  border-radius: 24px;
}
.tutorial .content .hd {
  display: flex;
  padding: 22px 40px;
  border-bottom: 1px solid #353945;
}
.tutorial .content .hd a {
  width: 88px;
  height: 40px;
  border: 2px solid #353945;
  border-radius: 90px;
  line-height: 40px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  margin-right: 20px;
  color: #777e91;
  box-sizing: content-box;
}
.tutorial .content .hd .on {
  background: #556ff7;
  color: #fff;
}
.tutorial .content .bd {
  padding: 0 150px 50px 150px;
}
.tutorial .content .tutorial_item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.tutorial .content .tutorial_item .step {
  width: 48%;
  padding-top: 40px;
}
.tutorial .content .tutorial_item .step .t {
  padding: 15px 0;
  color: #ffffff;
}
.tutorial .content .tutorial_item .step .t h1 {
  font-weight: 600;
  font-size: 20px;
}
.tutorial .content .tutorial_item .step .t p {
  line-height: 30px;
  font-weight: 500;
  font-size: 13px;
}
.tutorial .content .tutorial_item .step img {
  width: 80%;
}
.flexed {
  position: fixed;
  bottom: 50px;
  right: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}
.flexed .serve {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.flexed .kefu {
  width: 104px;
  height: 230px;
}
.flexed .float {
  width: 124px;
  height: 66px;
  animation: moveLR 1s ease infinite;
  cursor: pointer;
}
.flexed .qrcode {
  width: 164px;
  height: 164px;
}
.flexed .qrcode canvas {
  width: 164px;
  height: 164px;
}
.flexed .qrcode img {
  width: 164px;
  height: 164px;
}
.model {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  z-index: 999;
}
.model .layout {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}
.model .content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 590px;
  height: 510px;
  margin: 0 auto;
  border-radius: 32px;
  background: #23262f;
}
.model h1 {
  line-height: 56px;
  margin-bottom: 42px;
  font-weight: 700;
  font-size: 48px;
  color: #fcfcfd;
}
.model h2 {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #777e91;
}
.model a {
  width: 150px;
  height: 52px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  line-height: 48px;
  background: #556ff7;
  border: 3px solid #6587ee;
  border-radius: 90px;
  font-weight: 700;
  font-size: 16px;
  margin-top: 48px;
  color: #fcfcfd;
}
.model a img {
  width: 20px;
  height: 20px;
  margin-left: 5px;
}
.model p {
  margin-top: 40px;
  font-weight: 400;
  font-size: 15px;
  color: #777e91;
}
.model p span {
  cursor: pointer;
  color: #6587ee;
}
.model .close {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 30px;
  height: 30px;
  background: url('../images/close.png') no-repeat;
  background-size: cover;
  cursor: pointer;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.i-fade-enter-active,
.i-fade-leave-active {
  transition: opacity 0.3s ease;
}
.i-fade-enter,
.i-fade-leave-to {
  opacity: 0;
}
@keyframes floatUD {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 20px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes moveLR {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(10px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}