html,
body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    overflow-x: hidden;
    overflow-y: auto;
}

.banner {
    position: relative;
    width: 100vw;
    height: 43vw;
    background-image: linear-gradient(90deg, #129bdc 0%, #4b0068 100%);
}

.padding {
    padding: 2vw 19vw;
}

.content-margin {
    margin-top: 5vw;
}

.header {
    position: relative;
}

.menus {
    width: 48.5vw;
    display: inline-block;
    text-align: right;
    cursor: pointer;
}

.menu {
    display: inline-block;
    font-family: SourceHanSansCN-Regular;
    padding: 0.521vw 1.25vw;
    font-size: 0.833vw;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0;
    color: white;
    cursor: pointer;
}

.menu-current {
    color: #4463ae;
    background-color: white;
    border-radius: 0.2rem;
}

.icon {
    display: inline-block;
    width: 12.604vw;
    height: 2.188vw;
    background-image: url(images/icon.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    vertical-align: middle;
    cursor: pointer;
}

.banner-bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-image: url(images/banner.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.banner-info {}

.banner-title {
    color: white;
    font-size: 3.75vw;
    line-height: 5.208vw;
}

.banner-separator {
    width: 3.073vw;
    height: 0.677vw;
    margin-top: 2.292vw;
    background-color: white;
}

.banner-desc {
    color: white;
    font-size: 2.863vw;
    font-weight: normal;
    font-stretch: normal;
}

.detail-btn {
    display: inline-block;
    border-radius: 5px;
    margin-top: 5vw;
    padding: 0.885vw 2.292vw;
    color: white;
    background-color: #2dc173;
    cursor: pointer;
}

.introduction {}

.intro {
    font-size: 2.5vw;
    text-align: center;
    line-height: 5.208vw;
    color: #333;
}

.intro-trans {
    color: #aaaaaa;
}

.intro-content {
    position: relative;
}

.intro-article {
    display: inline-block;
    width: 54%;
    vertical-align: top;
}

.intro-article>div {
    font-size: 1.563vw;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.875vw;
    margin-top: 2vw;
    font-weight: bold;
    color: #333333;
}

.intro-article>div>div {
    font-size: 0.938vw;
    font-weight: normal;
    color: #333333;
}

.intro-bg {
    width: 35%;
    height: 21.7vw;
    display: inline-block;
    background-image: url(images/introduction.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.resolution {}

.resolution-bg {
    width: 35%;
    height: 21.7vw;
    display: inline-block;
    background-image: url(images/resolution.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.safe {
    width: 100vw;
    height: 22.76vw;
    background-image: url(images/safe.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    cursor: pointer;
}

.mode {
    width: 100vw;
    height: 34.74vw;
    background-image: url(images/mode.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    cursor: pointer;
}

.footer {
    position: relative;
    width: 100vw;
    height: 25.729vw;
    background-image: url(images/footer.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.beian {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
}

.beian > a{
    color: white;
    text-decoration: under;
}