@charset "utf-8";

* {
  margin: 0;
  padding: 0;
}
html,
body {
  color: #fff;
  font-family: Helvetica Neue, PingFang SC, Microsoft YaHei, Helvetica, Arial,
    sans-serif;
  height: 100%;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
img{
  width: 100%;
}

.flex{
  display: flex;
}

.space-between{
  justify-content: space-between;
}

.items-center{
  align-items: center;
}

header{
  position: fixed;
  left: 0;
  right: 0;
  padding: 0.36rem 0;
  background: #6EE877;
  color: #fff;
  z-index: 10;
}

nav{
  padding: 0 1.8rem 0 1.66rem;
}

.logo img{
  width: 0.48rem;
}

.logo span{
  font-weight: bold;
  font-size: 0.36rem;
  color: #fff;
  margin-left: 0.2rem;
}

.link{
  background: #fff;
  color: #1A1A1A;
  padding: 0.14rem 0.12rem;
  border-radius: 0.25rem;
  font-size: 0.14rem;
}

h2{
  width: 7.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  text-align: left;
}

.tip {
  font-weight: 400;
  font-size: 0.44rem;
  color: #FFFFFF;
  opacity: 0.5;
  margin-top: 0.24rem;
}

.box1{
  background: #6EE877;
  padding: 1.6rem 1.13rem 0.6rem 2.25rem;
}

.box1 img{
  width: 9.16rem;
  margin-left: -0.5rem;
}

.box2{
  background: #418EFF;
  border-radius: 0.58rem;
  margin-top: -0.6rem;
  margin-bottom: -0.6rem;
  position: relative;
  z-index: 1;
  padding: 0.83rem 2.34rem 0 1.92rem;
}

.box2 img{
  width: 6.97rem;
}

.box3{
  background: #FFD365;
  padding: 1.16rem 0.58rem 0 2.48rem;
}

.box3 img{
  width: 7.74rem;
}