@charset "utf-8";

* {
  margin: 0;
  padding: 0;
}
html,
body {
  color: #0F0D22;
  font-family: Helvetica Neue, PingFang SC, Microsoft YaHei, Helvetica, Arial,
    sans-serif;
  background: url(./images/bg.webp) no-repeat;
  background-size: cover;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
ul,
li {
  list-style: none;
}
img{
  width: 100%;
}

.flex{
  display: flex;
}

.space-between{
  justify-content: space-between;
}

.items-center{
  align-items: center;
}

header{
  padding: 0.34rem 0;
  color: #0F0D22;
}

nav{
  padding: 0 1.8rem 0 1.66rem;
}

.logo img{
  width: 0.48rem;
}

.logo span{
  font-weight: bold;
  font-size: 0.36rem;
  margin-left: 0.2rem;
}

.link{
  gap: 0.2rem;
}

.link a{
  background: #fff;
  color: #1A1A1A;
  padding: 0.14rem 0.12rem;
  border-radius: 0.25rem;
  font-size: 0.14rem;
}

.link img{
  width: 0.14rem;
  margin-left: 0.05rem;
}

.link .change-link{
  background: #4282F9;
  color: #fff;
}

.link .change-link img {
  width: 0.18rem;
}

h2{
  width: 8rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #0F0D22;
  text-align: left;
}

.tip {
  font-weight: 400;
  font-size: 0.44rem;
  color: #FFFFFF;
  opacity: 0.5;
  margin-top: 0.24rem;
}

.box1{
  padding: 0 1.63rem 0 2.48rem;
}

.box1 h2{
  margin-right: -1rem;
}

.box1 img{
  width: 9.31rem;
}

.box1 .icon{
  width: 1.69rem;
  margin: 1.19rem 0 0.62rem;
}

.box2{
  background: #fff;
  padding: 0.54rem 2.34rem 0 2.48rem;
}

.box2 h2{
  margin-top: 3.17rem;
}

.box2 img{
  width: 6.87rem;
  margin-right: 0.3rem;
}

.box2 .icon{
  width: 1.8rem;
  margin: 0.77rem 0 0 0.8rem;
}

.box3{
  padding: 0.65rem 1.66rem 0 2.48rem;
}

.box3 h2{
  margin-top: 3.06rem;
}

.box3 img{
  width: 7rem;
}

.box3 .icon{
  width: 1.3rem;
  margin: 0.34rem 0 0 6.31rem;
}

.box4{
  background: #fff;
  padding: 0.7rem 2.34rem 0 2.35rem;
}

.box4 h2{
  margin-top: 3.01rem;
}

.box4 img{
  width: 6.92rem;
  margin-right: 0.39rem;
}

.box4 .icon{
  width: 1.6rem;
  margin: 0.61rem 0 0 1.39rem;
}
@media screen and (max-width: 640px) {
}