@charset "utf-8";

* {
  margin: 0;
  padding: 0;
}
html,
body {
  color: #333;
  font-family: Helvetica Neue, PingFang SC, Microsoft YaHei, Helvetica, Arial,
    sans-serif;
  background: url(./images/bg1.webp) no-repeat;
  background-size: 100%;
}
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{
  /* position: fixed;
  left: 0;
  right: 0; */
  padding: 0.42rem 0;
  color: #333;
  /* z-index: 10; */
}

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

.logo img{
  width: 0.72rem;
}

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

.link{
  background: #00A6FF;
  color: #fff;
  padding: 0.2rem 0.42rem;
  border-radius: 0.6rem;
  font-size: 0.18rem;
}

.tip {
  font-weight: 400;
  font-size: 0.44rem;
  color: #666666;
}

.top-box{
  padding-top: 0.89rem;
  text-align: center;
}

.top-box h1{
  font-size: 1.1rem;
  color: #333;
  text-align: center;
}

.top-box .tip{
  margin: 0.16rem 0 0.6rem;
}

.top-img{
  margin: 0 2.3rem;
  line-height: 0;
}

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

.box1{
  padding: 1.71rem 1.83rem 1.71rem 1.39rem;
}

.box1 > img{
  width: 6.89rem;
  margin-right: 1.09rem;
}

.box1 .tip{
  margin-top: 0.85rem;
}

.box1 > div{
  position: relative;
}

.title-img{
  width: 2.38rem;
  position: absolute;
  margin-top: -1.5rem;
  right: -0.6rem;
}

.box2{
  background: #F8F8F8;
  border-radius: 0.46rem;
  position: relative;
  z-index: 1;
  padding: 0.91rem 1.27rem 0.66rem 0.43rem;
  margin: 0 1rem 1.96rem;
}

.box2 img{
  width: 6.65rem;
  margin-right: 1.29rem;
}

.box2 .tip{
  margin-top: 0.58rem;
}

@media screen and (max-width: 640px) {
}