* {
  margin: 0;
  padding: 0;
}

html,
body {
  font-size: calc(100vw / 1920);
  overscroll-behavior: none;
}
header {
  width: 100vw;
  height: 1076rem;
  background: url("/img/about.png") no-repeat;
  background-size: cover;
  background-position: top;
  position: relative;
  display: flex;
  flex-direction: column;
}

.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;
  box-sizing: border-box;
}

.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);
}

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

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

  color: #ffe100;
  text-align: center;
  font-family: Inter;
  font-size: 36.923rem;
  font-style: normal;
  font-weight: 700;
  line-height: 80rem;
}
.bg {
  width: 100vw;
  background: url("/img/session-img.png") no-repeat;
  background-position: center bottom;
  background-size: contain;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.bg h2 {
  color: var(--NB_Gray, #3d3d3d);
  text-align: center;
  font-family: Inter;
  font-size: 40rem;
  font-weight: bold;
  margin-top: 81rem;
  margin-bottom: 28rem;
}

.bg .logo {
  width: 490.722rem;
  height: 80rem;
}

header .text {
  width: 541rem;
  height: 333rem;
  text-align: end;
  margin-left: 278rem;
  margin-top: 239rem;
}

.text svg {
  width: 425rem;
  height: 69rem;
  margin-top: 21rem;
}

.text h2 {
  color: #fff;
  text-align: right;
  font-family: Inter;
  font-size: 60rem;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.text h3 {
  color: #fff;
  text-align: right;
  font-family: Inter;
  font-size: 40rem;
  font-style: normal;
  font-weight: 400;
  line-height: 90rem;
}

.open-try {
  display: flex;
  gap: 55rem;
}

.bg p {
  width: 880rem;
  height: 82rem;
  margin-top: 33rem;
  margin-bottom: 34rem;

  color: var(--NB_Gray, #3d3d3d);
  text-align: center;
  font-family: Inter;
  font-size: 24rem;
  font-style: normal;
  font-weight: 500;
}

.bg .sharp {
  margin-top: 10rem;
  width: 897rem;
  height: 82rem;
}

.bg h1 {
  color: var(--NB_Gray, #3d3d3d);
  text-align: center;
  font-family: Inter;
  font-size: 40rem;
  font-style: normal;
  font-weight: 900;
  line-height: 40rem;
  text-transform: uppercase;
  margin-top: 53rem;
}

.open,
.try {
  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: 54rem;
  cursor: pointer;
}
.model {
  /* 设置相对定位，为后续伪元素定位做准备 */
  position: relative;

  width: 883.471rem;
  height: 342.975rem;

  padding: 54.55rem 34.71rem 13.22rem 38.02rem;

  /* 圆角设置，让内容区域有圆角 */
  border-radius: 9.917rem;

  /* 设置背景色，这里你可以换成图片或其他背景 */
  background: linear-gradient(180deg, #fff 40.38%, #d9d9d9 100%);

  /* 保证这个层级在伪元素之上 */
  z-index: 0;

  box-shadow: 16.53rem 16.53rem #3d3d3d;

  margin-bottom: 42.15rem;
}

/* 创建一个伪元素，专门用来做渐变边框 */
.model::before {
  /* 生成内容为空 */
  content: "";
  /* 绝对定位，占据整个 .box 区域 */
  position: absolute;
  inset: 0; /* 等同于 top:0; right:0; bottom:0; left:0; */
  /* 关键：内边距用来控制“边框的宽度”，这里是 1px */
  padding: 1rem;
  /* 伪元素的圆角要和 box 一致，否则会露边 */
  border-radius: 9.917rem;
  /* 设置边框渐变背景（你可以改成其他方向或颜色） */
  background: linear-gradient(to bottom, red, transparent 100% 0);
  /* 接下来是重点：只显示边框那 1px 的部分，遮掉里面 */
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
    /* 内容区遮罩 */ linear-gradient(#fff 0 0); /* 全部区域遮罩 */
  -webkit-mask-composite: xor; /* 组合遮罩，留下边框部分 */
  mask-composite: exclude; /* Firefox 语法，作用一样 */
  /* 把伪元素放到 .box 背后 */
  z-index: -1;
}

.model h1.title {
  text-transform: none;
  color: var(--NB_Red-01, #ff2929);
  font-size: 39.669rem;
  font-weight: 900;
  text-align: left;
  margin-top: 0;
  margin-bottom: 14.81rem;
  line-height: 39.669rem;
}

.model p.text {
  width: 810.744rem;
  height: 212.397rem;
  margin-top: 14.81rem;
  color: #868686;
  font-family: Inter;
  font-size: 21.488rem;
  font-style: normal;
  line-height: 29.752rem;
  text-align: left;
}
.model .triangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 74rem;
  height: 75rem;
}

.model img {
  width: 74.38rem;
  height: 74.38rem;

  position: absolute;
  right: 34.71rem;
  top: 19.83rem;
}

.get {
  width: 1120rem;
  height: 280rem;
  background: url("/img/image\ 6.png") no-repeat center;
  background-size: contain;
  border-radius: 140rem;
  position: relative;
  bottom: -140rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.get .left {
  /* justify-content: center; */
  /* align-items: center; */
}

.get .left .title {
  font-family: Inter;
  font-size: 48rem;
  font-style: normal;
  font-weight: 900;
  line-height: 36rem; /* 75% */
  background: linear-gradient(288deg, #d71717 8.34%, #ffc8c8 91.66%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 99;
}

.get .left .title2 {
  width: 540rem;
  height: 65rem;
  color: #fff;
  font-family: Inter;
  font-size: 28rem;
  font-style: normal;
  font-weight: 600;
  line-height: 36rem; /* 128.571% */
  margin-top: 18rem;
}

.get .right .button {
  width: 238rem;
  height: 60rem;
  border-radius: 30rem;

  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 24rem;
  font-style: normal;
  font-weight: 500;
  line-height: 225%;
  background-color: #ff2929;
  box-shadow: 0px 4px 60px 0px rgba(255, 41, 41, 0.6);
  cursor: pointer;
}

.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);
}