* {
    box-sizing: border-box;
}

html {
    font-size: 100px;
}

body {
    margin: 0;
}

.header {
    height: 5.31rem;
    padding-top: 0.2rem;
    text-align: center;
    background: #0C395D;
}

.head-hd {
    height: .22rem;
    margin-bottom: .05rem;
    font-size: .16rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    text-align: center;
    line-height: .22rem;
}

.head-desc {
    height: .2rem;
    margin-bottom: .2rem;
    font-size: .14rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #52FFFF;
    text-align: center;
    line-height: .2rem;
}

.img {
    width: 3.45rem;
    display: block;
    margin: auto;
}

.header .img {
    margin-bottom: .18rem;
}

.text {
    padding: 0 .15rem;
    text-align: justify;
    font-size: .14rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: .24rem;
}

.section {
    height: 5.08rem;
    padding-top: .2rem;
    text-align: center;
    background: #0B2A45;
}

.img {
    margin-bottom: .28rem;
}

.desc {
    position: relative;
    height: .2rem;
    margin-bottom: .18rem;
    padding-left: .34rem;
    font-size: .14rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    text-align: left;
    line-height: .2rem;
}

.desc::before {
    position: absolute;
    left: .2rem;
    top: 0.02rem;
    content: '';
    display: block;
    width: 4px;
    height: 16px;
    background: #52FFFF;
}

.section2 {
    height: 4.38rem;
    background: #0C395D;
}

.section3 {
    height: 4.32rem;
    background: #0B2A45;
}

.section4 {
    height: 3.4rem;
    background: #0C395D;
}

.bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .12rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    height: .3rem;
    text-decoration: none;
    background: #010101;
}
.img-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 .1rem;
}
.img-box img{
    display: block;
    width: 50%;
    height: 100%;
}
.mobile{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0.82rem;
    background: #010101;
}
.mb-img{
    width: .2rem;
    height: .2rem;
    margin-right: .1rem;
}
.mobile-z{
    height: .28rem;
    font-size: .2rem;
    font-weight: 400;
    color: #FFFFFF;
    line-height: .28rem;
    text-decoration: none;
}