* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

html,
body {
  font-size: calc(100vw / 1920);
  overscroll-behavior: none;
}
header {
  width: 100vw;
  height: 1076rem;
  background: url("/img/image\ 1.png") no-repeat;
  background-size: cover;
  position: relative;
  display: flow-root;
}

.menu-bar {
  width: 1313rem;
  height: 120rem;
  border-radius: 60px;
  border: 1px solid var(--NB_Red-01, #ff2929);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(9px);
  margin: 0 auto;
  margin-top: 100rem;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-bar .logo {
  width: 255rem;
  height: 69rem;
  margin-left: 37rem;
}

.menu-bar ul {
  display: flex;
  gap: 30.22rem;
  margin-left: 20.48rem;
}

.menu-bar ul li a {
  color: var(--NB_Gray, #3d3d3d);
  font-family: Inter;
  font-size: 20.444rem;
  font-style: normal;
  font-weight: 900;
  line-height: 225%; /* 46px */
}

.menu-bar ul li a:hover {
  color: var(--NB_Red-01, #ff2929);
}

.menu-bar ul li img {
  box-sizing: border-box;
  vertical-align: middle;
  width: 66.444rem;
  height: 46rem;
}

.menu-bar ul li a.active {
  border-bottom: 4rem solid #ff2929;
}
.register-login {
  display: flex;
  gap: 16rem;
  margin-right: 26.6rem;
}

.register-login .register,
.register-login .login {
  cursor: pointer;
  box-sizing: border-box;
  width: 134.4rem;
  height: 48rem;
  color: #fff;
  font-family: Inter;
  font-size: 19.2rem;
  font-style: normal;
  font-weight: 500;
  border-radius: 24rem;
  text-align: center;
  background: var(--NB_Red-01, #ff2929);
  line-height: 48rem;
}

.register-login .login {
  border-radius: 24rem;
  border: 1.6rem solid var(--NB_Red-01, #ff2929);
  background: var(--NB_Gray, #3d3d3d);
}
.text-area {
  .t1 {
    color: #fff;
    font-family: Inter;
    font-size: 60rem;
    font-style: normal;
    font-weight: 900;
    line-height: 225%; /* 135px */
    position: absolute;
    top: 449rem;
    left: 1033rem;
  }
  .t2 {
    width: 425rem;
    height: 69rem;
    position: absolute;
    top: 574rem;
    left: 1152rem;
  }
  .t3 {
    color: #fff;

    font-family: Inter;
    font-size: 40rem;
    font-style: normal;
    font-weight: 400;
    line-height: 225%; /* 90px */
    position: absolute;
    top: 650rem;
    left: 1193rem;
  }
  .t4 {
    color: #fff;
    font-family: Inter;
    font-size: 34rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
  }
  .t4-1 {
    position: absolute;
    top: 765rem;
    left: 1014rem;
  }
  .t4-2 {
    position: absolute;
    top: 854rem;
    left: 1076rem;
  }
  .t4-3 {
    position: absolute;
    top: 943rem;
    left: 1146rem;
  }
}

/* register区域 */

.register-button {
  width: 100vw;
  height: 190rem;
  background-color: #ff2929;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.register-button button {
  width: 573.846rem;
  height: 80rem;
  border-radius: 9.231rem;
  border: 1.538rem solid var(--NB_Yellow, #ffe100);
  background-color: #ff2929;
  cursor: pointer;

  color: #ffe100;
  text-align: center;
  font-family: Inter;
  font-size: 36.923rem;
  font-style: normal;
  font-weight: 700;
  line-height: 80rem;
}

/* bg区域 */
.bg {
  width: 100vw;
  height: 1962rem;
  background: url("/img/image\ 3.png") no-repeat;
  background-size: cover;

  display: flex;
  flex-direction: column;
  align-items: center;
  .bg-text {
    color: var(--NB_Gray, #3d3d3d);
    text-align: center;
    font-family: Inter;
    font-size: 40rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
    padding-top: 81rem;
  }
  .bg-text1 {
    color: var(--NB_Red-01, #ff2929);
    text-align: center;
    font-family: Inter;
    font-size: 70rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 1rem;
  }
  .bg-text2 {
    color: #868686;
    text-align: center;
    font-family: Inter;
    font-size: 46rem;
    font-style: normal;
    font-weight: 700;
    line-height: 56rem;
    text-transform: uppercase;
    margin-top: 5rem;
  }
  .bg-text3 {
    color: #868686;
    text-align: center;
    font-size: 40rem;
    font-weight: 400;
    line-height: 40rem;
    text-transform: uppercase;
    margin-top: 12rem;
  }
  .tree-trading {
    display: flex;
    padding-top: 234rem;
    gap: 37rem;

    .trading-item {
      width: 383rem;
      height: 264rem;
      border-radius: 40rem;
      /* box-shadow: var(--sds-size-depth-0) var(--sds-size-depth-400)
          var(--sds-size-depth-400) var(--sds-size-depth-negative-200)
          var(--sds-color-black-200),
        var(--sds-size-depth-0) 33rem 68.7rem 26rem var(--sds-color-black-100); */

      .tr-title {
        width: 260rem;
        height: 44rem;
        border-radius: 22rem;
        /* background: var(--NB_Red-01, #ff2929); */
        color: #fff;
        text-align: center;
        /* font-family: Inter; */
        font-size: 34rem;
        line-height: 44rem;
        margin: 0 auto;
      }
      .tr-title2 {
        color: #2986ff;
        text-align: center;
        font-family: Inter;
        font-size: 28rem;
        font-style: normal;
        font-weight: 600;

        margin-top: 11rem;
      }
      .shuangpai {
        display: flex;
        justify-content: center;
        gap: 36rem;
        margin-top: 17rem;
        .right-title {
          text-align: right;
        }

        .hui {
          color: #868686;
          font-family: Inter;
          font-size: 22rem;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }
        .lan {
          color: #2986ff;
          font-family: Inter;
          font-size: 22rem;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          margin-bottom: 18rem;
        }
        .hei {
          color: #000;
          font-family: Inter;
          font-size: 22rem;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
        }
      }
    }
  }
  .bg-text4 {
    width: 1223rem;
    height: 82rem;
    color: var(--NB_Gray, #3d3d3d);
    text-align: center;
    font-family: Inter;
    font-size: 16rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;

    margin-top: 26rem;
  }
  .bg-text5 {
    color: var(--NB_Gray, #3d3d3d);
    text-align: center;
    font-family: Inter;
    font-size: 40rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
    margin-top: 166.98rem;
  }
  .bg-text-top {
    margin-top: 53rem;
  }
  .bg-text6 {
    color: #fff;
    font-family: Inter;
    font-size: 34rem;
    font-style: normal;
    font-weight: 600;
    line-height: 41rem;
    margin-bottom: 77rem;
  }
  .cta-buttons {
    display: flex;
    gap: 55rem;
    margin-top: 73rem;

    .btn {
      width: 408rem;
      height: 60rem;
      border-radius: 30rem;
      background: var(--NB_Red-01, #ff2929);
      color: #fff;
      text-align: center;
      font-family: Inter;
      font-size: 24rem;
      font-style: normal;
      font-weight: 500;
      line-height: 60rem;
      box-sizing: border-box;
    }
    .black {
      border-radius: 30rem;
      border: 2rem solid var(--NB_Red-01, #ff2929);
      background: var(--NB_Gray, #3d3d3d);
    }
  }
}

.safe-container {
  background: url("/img/image\ 4.png") no-repeat;
  background-size: cover;
  width: 100vw;
  height: 847rem;
  position: relative;

  .text-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 158rem;
    right: 160rem;
  }

  .safe-t1 {
    width: 422rem;
    height: 96rem;
    color: var(--NB_Gray, #3d3d3d);
    text-align: center;
    font-family: Inter;
    font-size: 40rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
  }
  .safe-t2 {
    color: var(--NB_Red-01, #ff2929);
    text-align: center;
    font-family: Inter;
    font-size: 70rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
    margin-top: 2rem;
  }
  .safe-t3 {
    color: #868686;
    text-align: center;
    font-family: Inter;
    font-size: 46rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 5rem;
  }
  .safe-t4 {
    width: 794rem;
    height: 200rem;
    flex-shrink: 0;
    color: #868686;
    font-family: Inter;
    font-size: 26rem;
    font-style: normal;
    font-weight: 500;
    line-height: 36rem; /* 138.462% */
    margin-top: 40rem;
  }

  .safe-t5 {
    width: 408rem;
    height: 60rem;
    border-radius: 30px;
    border: 2rem solid var(--NB_Red-01, #ff2929);
    background: var(--NB_Gray, #3d3d3d);
    color: #fff;
    text-align: center;
    font-family: Inter;
    font-size: 24rem;
    font-style: normal;
    font-weight: 500;
    line-height: 60rem; /* 54px */
  }
}

.ser-container {
  background: url("/img/image\ 7.png") no-repeat;
  background-size: cover;
  width: 100vw;
  height: 2122rem;
  position: relative;

  .ser-t1 {
    width: 607rem;
    height: 96rem;
    color: var(--NB_Gray, #3d3d3d);
    text-align: center;
    font-family: Inter;
    font-size: 40rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
    margin: 0 auto;
    padding-top: 82rem;
  }
  .ser-t2 {
    color: #fff;
    text-align: center;
    font-family: Inter;
    font-size: 70rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
  }
  .ser-double {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 225rem;
    gap: 179rem;
    .ser-red {
      color: var(--NB_Red-01, #ff2929);
      font-family: Inter;
      font-size: 48rem;
      font-style: normal;
      font-weight: 900;
      line-height: normal;
      text-transform: uppercase;
      margin-bottom: 18rem;
    }
    .ser-black {
      color: #868686;
      font-family: Inter;
      font-size: 26rem;

      font-weight: 500;
      line-height: 36rem; /* 138.462% */
      height: 421rem;
    }
    .ser-left .ser-up-black,
    .ser-right .ser-up-black {
      margin-bottom: 269rem;
    }
    .ser-left .ser-up-red,
    .ser-left .ser-up-black,
    .ser-left .ser-down-black {
      width: 400rem;
    }

    .ser-left .ser-down-red {
      width: 390rem;
    }
    .ser-right .ser-up-red {
      width: 432rem;
    }
    .ser-right .ser-down-red {
      width: 394rem;
    }

    .ser-right .ser-up-black,
    .ser-right .ser-down-black {
      width: 389rem;
      position: relative;
      left: 20rem;
    }
  }
}

.get-start {
  background: url("/img/image\ 6.png") no-repeat;
  background-size: cover;
  width: 1120rem;
  height: 280rem;
  position: absolute;

  left: 400rem;
  top: -300rem;
}
footer {
  position: relative;
}

.right .text {
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 20rem;
  font-style: normal;
  font-weight: 600;
  line-height: 225%; /* 45px */
}

footer .fllow {
  color: var(--NB_Gray, #3d3d3d);
  text-align: center;
  font-family: Inter;
  font-size: 32rem;
  font-style: normal;
  font-weight: 600;
  line-height: 44rem; /* 137.5% */
  margin-top: 151rem;
}

footer .container {
  display: flex;
  justify-content: center;
  align-items: start;
  margin-top: 101rem;
}

.container img {
  width: 369.565rem;
  height: 100rem;
  margin-right: 138.43rem;
}

.container .website {
  margin-right: 172rem;
}
.container .website.right {
  margin-right: 0;
}

.container .website .our {
  color: var(--NB_Red-01, #ff2929);
  font-family: Inter;
  font-size: 40rem;
  font-style: normal;
  font-weight: 700;
  line-height: 36rem; /* 90% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-color: var(--NB_Gray, #3d3d3d);
  text-decoration-thickness: 8%; /* 3.2px */
  text-underline-offset: 25%; /* 10px */
  text-underline-position: from-font;
  text-transform: uppercase;
  margin-bottom: 40rem;
}

.container .website ul li {
  color: var(--NB_Gray, #3d3d3d);
  font-family: Inter;
  font-size: 20rem;
  font-style: normal;
  font-weight: 400rem;
  line-height: 49rem; /* 245% */
}

.container .website ul li ul {
  margin-left: 10rem;
}

.container .website.right {
  width: 555rem;
}

.container .website.right ul li {
  color: var(--NB_Gray, #3d3d3d);
  font-family: Inter;
  font-size: 20rem;
  font-style: normal;
  font-weight: 400;
  line-height: 26rem;
  margin-bottom: 16rem;
}

.container .website.right ul li span {
  font-weight: bold;
}

footer .session {
  width: 1494rem;
  color: var(--NB_Gray, #3d3d3d);
  font-family: Inter;
  font-size: 18rem;
  font-style: normal;
  font-weight: 400;
  line-height: 30rem;
  margin-top: 49rem;
  margin: 49rem auto 49rem;
}

.copyRight {
  height: 120rem;
  background: var(--NB_Gray, #3d3d3d);
  padding-left: 213rem;
  color: #fff;
  font-family: Inter;
  font-size: 18rem;
  font-style: normal;
  font-weight: 400;

  line-height: 120rem; /* 166.667% */
}

.copyRight span.red {
  color: var(--NB_Red-01, #ff2929);
}