@keyframes example {
    from {
        bottom: 1.9rem;
        opacity: 1;
    }
    to {
        bottom: 1.4rem;
        opacity: 0.4;
    }
}

@keyframes example1 {
    from {
        bottom: 0.6rem;
        opacity: 1;
    }
    to {
        bottom: 0.1rem;
        opacity: 0.2;
    }
}

* {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}

.root-box {
    width: 100%;
    height: 100%;
}

.root-box .box1 {
    width: 100%;
    height: 100vh;
    position: relative;
    background: #080351;
}

.root-box .zhushijue {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.root-box .m-zhushijue {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.root-box .zsj-jt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.4rem;
    margin: auto;
    width: 1rem;
    cursor: pointer;
    animation-name: example1;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.xia {
    position: relative;
    top: 0;
    background: url('../bg-img/root-bg.png')no-repeat;
    background-size: 100% 100%;
}

.box2 {
    background: url('../bg-img/box2-bg.png')no-repeat;
    background-size: 100% auto;
    padding: 1rem 0;
}

.img-title {
    display: block;
    height: 1.9rem;
    padding-left: 6%;
    margin-top: 0.2rem;
}

.box2-inner {
    width: 72%;
    margin: 0 auto;
    background: url('../bg-img/box2-inner.png')no-repeat;
    background-size: 100% 100%;
    font-size: 0.19rem;
    color: #96d3e8;
}

.box2-inner p {
    padding: 0.72rem 1.5rem;
    text-indent: 0.4rem;
    line-height: 0.3rem;
}

.box2-inner p:last-child {
    padding: 0.42rem 1.5rem 0.72rem;
}

.box3 {
    margin-top: 1rem;
}

.box3-inner1 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../bg-img/box3-bg.png')right center no-repeat;
    background-size: 12%;
    margin-top: 1.4rem;
}

.box3-inner1 .box3-znh {
    width: 40%;
    padding-right: 2rem;
}

.box3-inner1 .znh-img {
    width: 50%;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: inherit;
}

.box3-inner1 .znh-img img {
    width: 5rem;
    cursor: pointer;
    display: block;
    margin: 0rem 0 0.4rem 1rem;
}

.box3-inner2 {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row-reverse;
    margin-top: 1.4rem;
    overflow: hidden;
}

.box3-inner2 .box3-ddh {
    width: 40%;
    padding-left: 2.8rem;
}

.box3-inner2 .ddh-img {
    text-align: left;
    width: 50%;
}

.box3-inner2 .ddh-img img {
    width: 5rem;
    cursor: pointer;
    display: block;
    margin: 0rem 0 0.4rem 1rem;
}

.box3-inner3 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.4rem;
}

.box3-inner3 .dnh-img {
    width: 50%;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: inherit;
}

.box3-inner3 .box3-dnh {
    width: 40%;
    padding-right: 2rem;
}

.box3-inner3 .dnh-img img {
    width: 5rem;
    cursor: pointer;
    display: block;
    margin: 0rem 0 0.4rem 1rem;
}

.box4 {
    margin-top: 1.4rem;
}

.p-box4-inner {
    width: 80%;
    margin: 0 auto;
    display: block;
}

.p-box4-inner img {
    width: 100%;
    display: block;
    margin-top: 0.2rem;
}

.p-box4-inner img:last-child {
    margin-top: 1rem;
}

.m-box4-inner {
    display: none;
}

.box5 {
    width: 100%;
    margin-top: 2rem;
}

.p-box5-inner {
    width: 80%;
    margin: 0 auto;
    margin-top: 1rem;
    display: block;
}

.m-box5-inner {
    display: none;
}

.rc-dj img {
    display: block;
    cursor: pointer;
    height: 1rem;
    border: none;
}

.box6 {
    margin-top: 2rem;
}

.box6 img {
    width: 80%;
    display: block;
    margin: 0 auto;
    padding-bottom: 3.8rem;
}

.box6 .zwwl {
    display: block;
}

.box6 .m-zwwl {
    display: none;
}

.box7 {
    width: 100%;
    background: #161b93;
    color: #6a6dba;
    font-size: 0.2rem;
    text-align: center;
}

.znh,
.ddh,
.dnh {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9999;
}

.znh div,
.ddh div,
.dnh div {
    width: 75%;
    margin: 0 auto;
    position: relative;
    display: none;
}

.znh div .inner,
.ddh div .inner,
.dnh div .inner {
    display: block;
    width: 100%;
    margin-top: 0.2rem;
}

.znh div .m-inner,
.ddh div .m-inner,
.dnh div .m-inner {
    display: none;
    width: 100%;
    margin-top: 0.2rem;
}

.close {
    width: 0.4rem;
    position: absolute;
    right: 0.4rem;
    top: 0.2rem;
    cursor: pointer;
}

@media screen and (max-width: 750px) {
    .root-box .zhushijue {
        width: 100%;
        display: none;
    }
    .root-box .m-zhushijue {
        width: 100%;
        display: block;
        object-fit: fill;
    }
    .root-box .zsj-jt {
        width: 0.6rem;
        bottom: 0.9rem;
        animation-name: example;
        animation-duration: 1s;
        animation-iteration-count: infinite;
    }
    .box2-inner {
        width: 94%;
        background: url('../bg-img/m-box2-inner.png')no-repeat;
        background-size: 100% 100%;
        margin-top: 0.4rem;
    }
    .box2-inner p {
        padding: 0.4rem 0.3rem;
    }
    .box2-inner p:last-child {
        padding: 0.4rem 0.3rem;
    }
    .img-title {
        padding-left: 0;
    }
    .box3-inner1 {
        width: 100%;
        flex-direction: column-reverse;
        background: url('../bg-img/box3-bg.png')right 1.3rem no-repeat;
        background-size: 20%;
        margin-top: 0.4rem;
    }
    .box3-inner1 .box3-znh {
        width: 60%;
    }
    .box3-inner1 .znh-img {
        width: 100%;
    }
    .box3-inner1 .znh-img img {
        margin: 0.3rem auto;
    }
    .box3-inner2 {
        flex-direction: column-reverse;
    }
    .box3-inner2 .ddh-img {
        width: 100%;
    }
    .box3-inner2 .ddh-img img {
        margin: 0.4rem auto;
    }
    .box3-inner2 .box3-ddh {
        width: 60%;
        padding-left: 1.8rem;
    }
    .box3-inner3 {
        flex-direction: column-reverse;
    }
    .box3-inner3 .box3-dnh {
        width: 60%;
    }
    .box3-inner3 .dnh-img {
        width: 100%;
    }
    .box3-inner3 .dnh-img img {
        margin: 0.4rem auto;
    }
    .p-box4-inner {
        display: none;
    }
    .m-box4-inner {
        display: block;
        width: 90%;
        margin: 0 auto;
    }
    .m-box4-inner img {
        width: 100%;
        display: block;
        margin-top: 0.4rem;
    }
    .m-box4-inner img:last-child {
        margin-top: 1rem;
    }
    .p-box5-inner {
        width: 80%;
        margin: 0 auto;
        display: none;
    }
    .m-box5-inner {
        display: block;
        width: 95%;
        margin: 0 auto;
        margin-top: 0.4rem;
    }
    .rc-dj img {
        height: 0.8rem;
    }
    .box6 .zwwl {
        display: none;
    }
    .box6 .m-zwwl {
        width: 95%;
        display: block;
    }
    .znh div,
    .ddh div,
    .dnh div {
        width: 94%;
    }
    .znh div .m-inner,
    .ddh div .m-inner,
    .dnh div .m-inner {
        display: block;
        width: 100%;
        margin-top: 0.2rem;
    }
    .znh div .inner,
    .ddh div .inner,
    .dnh div .inner {
        display: none;
        width: 100%;
        margin-top: 0.2rem;
    }
    .xia {
        background: url('../bg-img/m-root-bg.png')no-repeat;
        background-size: 100% 100%;
    }
    .box6 {
        margin-top: 2rem;
    }
    .box6 img {
        padding-bottom: 2rem;
    }
}