:root {
  --remV: 75;
}

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

.hc {
  color: #3066ff;
  margin: 0 calc(10 / var(--remV) * 1rem);
}

.co {
  width: calc(750 / var(--remV) * 1rem);
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
  padding: calc(52 / var(--remV) * 1rem) 0;
  background-image: url("./b.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.m-c {
  position: relative;
}

.logo {
  text-align: center;
}

.logo img {
  width: calc(278 / var(--remV) * 1rem);
  height: calc(70 / var(--remV) * 1rem);
  object-fit: contain;
}

.t-s {
  text-align: center;
}

.m-t {
  font-family: "Loong-FlashSansGB", "PingFang SC", sans-serif;
  font-weight: 700;
  font-size: calc(42 / var(--remV) * 1rem);
  color: #52607d;
  margin-bottom: calc(30 / var(--remV) * 1rem);
}

.banner {
  width: 100%;
  height: auto;
}

.s {
  margin-top: calc(-74 / var(--remV) * 1rem);
  font-weight: 600;
  font-size: calc(42 / var(--remV) * 1rem);
  background: linear-gradient(90deg, #438dfb 0%, #2f6cff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.s-2 {
  font-weight: 600;
  font-size: calc(24 / var(--remV) * 1rem);
  background: linear-gradient(90deg, #438dfb 0%, #2f6cff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.de {
  font-weight: 600;
  font-size: calc(26 / var(--remV) * 1rem);
  color: #52607d;
  text-align: center;
  margin-top: calc(30 / var(--remV) * 1rem);
}

.db {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: calc(26 / var(--remV) * 1rem);
  display: flex;
  flex-wrap: row;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: "PingFang SC";
  font-size: calc(26 / var(--remV) * 1rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border-radius: 53px;
  background: radial-gradient(
      70% 21.87% at 50% 101.56%,
      rgba(255, 255, 255, 0.56) 0%,
      rgba(255, 255, 255, 0) 72.93%
    ),
    radial-gradient(
      72.9% 34.37% at 50% 0%,
      rgba(255, 255, 255, 0.32) 0%,
      rgba(255, 255, 255, 0) 79.06%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.24) -21.87%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(106.07% 84.72% at 50% 15.28%, #5dcaf9 0%, #3066ff 90.4%);
  background-blend-mode: overlay, overlay, overlay, normal;
  box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.9) inset;
  width: calc(500 / var(--remV) * 1rem);
  height: calc(80 / var(--remV) * 1rem);
}

.db img{
  margin-right: calc(16 / var(--remV) * 1rem);
  width: calc(24 / var(--remV) * 1rem);
  height: calc(24 / var(--remV) * 1rem);
  object-fit: contain;
}

.bi {
  margin-right: calc(18 / var(--remV) * 1rem);
  width: calc(22.5 / var(--remV) * 1rem);
  height: calc(24 / var(--remV) * 1rem);
}

.bt {
  font-weight: 500;
  font-size: calc(26 / var(--remV) * 1rem);
  color: #ffffff;
}

.t-se {
  border-radius: 20px;
  margin-top: calc(30 / var(--remV) * 1rem);
  padding: 0 calc(20 / var(--remV) * 1rem);
}

.t-t {
  font-weight: 600;
  font-size: calc(28 / var(--remV) * 1rem);
  color: #4d5673;
  margin-bottom: calc(15 / var(--remV) * 1rem);
}

.t-s {
  font-weight: 600;
  font-size: calc(24 / var(--remV) * 1rem);
  color: #2f64ff;
  text-align: center;
  margin-top: calc(26 / var(--remV) * 1rem);
}

.tu-s {
  margin-bottom: calc(30 / var(--remV) * 1rem);
}

.st {
  display: flex;
  flex-wrap: row;
  font-weight: 600;
  font-size: calc(24 / var(--remV) * 1rem);
  color: #52607d;
  margin-bottom: calc(16 / var(--remV) * 1rem);
}

.d-os {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(20 / var(--remV) * 1rem);
  background: #ffffff;
  border-radius: 20px;
  margin-bottom: calc(30 / var(--remV) * 1rem);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: calc(30 / var(--remV) * 1rem) calc(15 / var(--remV) * 1rem);
}

.d-o {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(10 / var(--remV) * 1rem);
  width: calc(210 / var(--remV) * 1rem);
  height: calc(80 / var(--remV) * 1rem);
  background: #222222;
  border-radius: 20px;
  cursor: pointer;
  font-size: calc(24 / var(--remV) * 1rem);

  font-family: "PingFang SC";
  font-style: normal;
  line-height: normal;
  color: white;
}
.d-o:nth-child(2) {
  margin-right: calc(30 / var(--remV) * 1rem);
}
.d-o:nth-child(1) {
  margin-left: calc(30 / var(--remV) * 1rem);
}

.d-o img {
  width: calc(40 / var(--remV) * 1rem);
  height: calc(40 / var(--remV) * 1rem);
  object-fit: contain;
}

/* 教程图片 */
.tu-i {
  width: 100%;
  height: calc(538 / var(--remV) * 1rem);
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: calc(30 / var(--remV) * 1rem);
}

.tu-i img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fn {
  text-align: center;
  margin-top: calc(20 / var(--remV) * 1rem);
}

.fn p {
  font-weight: 600;
  font-size: calc(22 / var(--remV) * 1rem);
  color: #97a3c7;
}