.swiper-container {
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
    width: 100%
}

.top-banner {
    height: 100vh;
    position: relative;
    width: 100%
}

.top-banner.transformToTop {
    transform: translateY(-200px);
    transform: translateY(-12.5rem)
}

.top-banner .top-bg {
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .8s ease-in
}

.top-banner .cloud {
    animation: cloudMove 3s linear infinite;
    position: absolute;
    right: 0;
    top: 10%;
    width: 22%;
    z-index: 8
}

.top-banner .meteor-all {
    animation: meteorAll 3s linear infinite;
    animation-fill-mode: forwards;
    left: -500px;
    left: -31.25rem;
    position: absolute;
    top: -500px;
    top: -31.25rem;
    width: 30.8%;
    z-index: 8
}

.top-banner .meteor-all.bounce {
    animation: bounce 1s infinite
}

.top-banner .text-wrap {
    color: #fff;
    left: 0;
    position: absolute;
    text-align: center;
    top: 20%;
    width: 100%;
    z-index: 9
}

.top-banner .text-wrap h3 {
    color: #fff;
    font-size: 38px;
    font-size: 2.375rem;
    font-weight: 500;
    margin-bottom: 23px;
    margin-bottom: 1.4375rem
}

.top-banner .text-wrap .tags-wrap {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 23px;
    font-size: 1.4375rem;
    justify-content: center
}

.top-banner .text-wrap .tags-wrap span {
    display: block;
    padding: 0 26px;
    padding: 0 1.625rem;
    position: relative
}

.top-banner .text-wrap .tags-wrap span:after {
    background-color: #fff;
    content: "";
    height: 20px;
    height: 1.25rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-43%);
    width: 1px
}

.top-banner .text-wrap .tags-wrap span:last-child:after {
    content: none
}

@keyframes meteorAll {
    0% {
        transform: translateY(0)
    }

    to {
        left: 0;
        top: 0
    }
}

@keyframes bounce {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-50px);
        transform: translateY(-3.125rem)
    }
}

.top-banner .radio {
    animation: scaleMove 2s linear infinite;
    cursor: pointer;
    height: 80px;
    height: 5rem;
    position: absolute;
    transition: transform .8s ease-in;
    width: 80px;
    width: 5rem;
    z-index: 11
}

.top-banner .radio img {
    left: 0;
    top: 0;
    z-index: 10
}

.top-banner .radio img,.top-banner .radio:after {
    border-radius: 50%;
    height: 100%;
    position: absolute;
    width: 100%
}

.top-banner .radio:after {
    animation: scaleMove2 2s linear infinite;
    background: hsla(0,0%,100%,.5);
    content: "";
    left: 50%;
    margin-left: -40px;
    margin-left: -2.5rem;
    margin-top: -40px;
    margin-top: -2.5rem;
    top: 50%;
    z-index: 9
}

.top-banner .radio-01 {
    bottom: 46%;
    left: 5%
}

.top-banner .radio-02 {
    bottom: 38%;
    right: 16%
}

.top-banner .cover-tips {
    align-items: center;
    background: linear-gradient(180deg,rgba(8,78,133,0),#084e85 61%);
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-size: 1rem;
    height: 100%;
    justify-content: end;
    left: 0;
    line-height: 32px;
    line-height: 2rem;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 1s ease-in-out;
    width: 100%;
    z-index: 9
}

.top-banner .cover-tips .cover-tips-text {
    padding-bottom: 50px;
    padding-bottom: 3.125rem;
    text-align: justify;
    width: 80%
}

@keyframes cloudMove {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-30px);
        transform: translateY(-1.875rem)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes scaleMove {
    0% {
        scale: 1
    }

    20% {
        scale: .8
    }

    50% {
        scale: 1
    }
}

@keyframes scaleMove2 {
    0% {
        scale: 0
    }

    50% {
        scale: 1
    }

    to {
        scale: 1.3
    }
}

.part-01 {
    display: flex;
    gap: 120px;
    gap: 7.5rem;
    justify-content: space-between;
    padding-bottom: 30px;
    padding-bottom: 1.875rem;
    padding-top: 40px;
    padding-top: 2.5rem
}

.part-01 .part-01-left {
    width: 542px;
    width: 33.875rem
}

.part-01 .part-01-left .more-tips {
    display: flex;
    justify-content: end;
    margin-bottom: 15px;
    margin-bottom: 0.9375rem
}

.part-01 .part-01-right {
    width: 672px;
    width: 42rem
}

.part-01 .part-01-right .back-list-btn {
    align-items: center;
    border: 1px solid #005f8f;
    border-radius: 100px;
    border-radius: 6.25rem;
    color: #036;
    display: flex;
    display: none;
    font-size: 14px;
    font-size: 0.875rem;
    height: 34px;
    height: 2.125rem;
    justify-content: center;
    margin-bottom: 15px;
    margin-bottom: 0.9375rem;
    padding: 0 15px;
    padding: 0 0.9375rem;
    width: 120px;
    width: 7.5rem
}

.part-01 .part-01-right .back-list-btn img {
    margin-left: 8px;
    margin-left: 0.5rem;
    width: 16px;
    width: 1rem
}
.act-list-item-wrap{padding-top:2.5rem}
.part-01 .part-01-right .act-list-item {
    cursor: pointer;
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
    margin-bottom: 2rem
}

.part-01 .part-01-right .act-list-item:hover .ellipsis2 {
    color: var(--theme-color-red)
}

.part-01 .part-01-right .act-list-item:last-child {
    margin-bottom: 0
}

.part-01 .part-01-right .act-list-item .act-list-item-img {
    border-radius: 5px;
    border-radius: 0.3125rem;
    flex-shrink: 0;
    height: 140px;
    height:9.5rem;
    overflow: hidden;
    position: relative;
    width: 210px;
    width: 13.225rem
}

.part-01 .part-01-right .act-list-item .act-list-item-img .act-tag {
    background: #e3000c;
    border-radius: 5px;
    border-radius: 0.3125rem;
    color: #fff;
    font-size: 12px;
    font-size: 0.75rem;
    left: 10px;
    left: 0.625rem;
    padding: 5px 10px;
    padding: 0.3125rem 0.625rem;
    position: absolute;
    top: 10px;
    top: 0.625rem
}

.part-01 .part-01-right .act-list-item .act-list-item-img .act-tag.bg-blue {
    background: linear-gradient(213deg,#0c5293,#07315b)
}

.part-01 .part-01-right .act-list-item .act-list-item-msg {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 140px;
    height: 8.75rem;
    justify-content: space-between;
    margin-left: 30px;
    margin-left: 1.875rem;
    width: 58%
}

.part-01 .part-01-right .act-list-item .act-list-item-msg a {
    color: #036;
    display: block;
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 28px;
    line-height: 1.75rem
}

.part-01 .part-01-right .act-list-item .act-list-item-msg .act-bottom h5 {
    color: #7e7e7e;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 36px;
    line-height: 2.25rem
}

.part-01 .part-01-right .act-list-item .act-list-item-msg .act-bottom p {
    color: #333;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 22px;
    line-height: 1.375rem
}

.title {
    color: #001b32;
    font-size: 46px;
    font-size: 2.875rem
}

.part-02 {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    margin-bottom: 1.875rem;
    position: relative
}

.part-02 .btn-01 {
    bottom: 5%;
    left: 3.6%;
    position: absolute
}

.part-02 .m-kc-item {
    display: block;
    position: relative
}

.part-02 .m-kc-item .m-btn-01 {
    bottom: 10%;
    left: 7%;
    position: absolute
}

.part-02 .m-kc-item .m-btn-02 {
    bottom: 54%;
    left: 7%;
    position: absolute
}

.part-02 .m-kc-item .m-btn-03 {
    bottom: 9%;
    left: 7%;
    position: absolute
}

.part-02 .m-kc-item .m-btn-04 {
    bottom: 67%;
    left: 7%;
    position: absolute
}

.part-02 .m-kc-item .m-btn-05 {
    bottom: 37%;
    left: 7%;
    position: absolute
}

.part-02 .m-kc-item .m-btn-06 {
    bottom: 4%;
    left: 7%;
    position: absolute
}

.part-02 .btn-02 {
    bottom: 45%;
    left: 37%;
    position: absolute
}

.part-02 .btn-03 {
    bottom: 5%;
    left: 37%;
    position: absolute
}

.part-02 .btn-04 {
    bottom: 69%;
    left: 70.5%;
    position: absolute
}

.part-02 .btn-05 {
    bottom: 39%;
    left: 70.5%;
    position: absolute
}

.part-02 .btn-06 {
    bottom: 5%;
    left: 70.5%;
    position: absolute
}

.part-02 .part-02-item {
    position: relative;
    width: 32%
}

.part-02 .part-02-left .part-02-one {
    background: linear-gradient(225deg,#d0e9f4 29%,#b1d1e6);
    border-radius: 20px;
    border-radius: 1.25rem;
    position: relative
}

.part-02 .part-02-center {
    background: linear-gradient(217deg,#00c4c1 30%,#0084a2);
    border-radius: 20px;
    border-radius: 1.25rem
}

.part-02 .part-02-right {
    background: linear-gradient(207deg,#0c5293 32%,#07315b);
    border-radius: 20px;
    border-radius: 1.25rem
}

.part-02 .bg-text {
    color: #fff;
    font-size: 195px;
    font-size: 12.1875rem;
    font-weight: 400;
    opacity: .55;
    position: absolute;
    right: 10px;
    right: 0.625rem;
    top: -30px;
    top: -1.875rem
}

.part-02 .bg-text-02 {
    opacity: .2
}

.part-02 .bg-text-03 {
    opacity: .1
}

.part-02 .part-02-content {
    position: relative;
    z-index: 9
}

.part-02 .part-02-content h3 {
    font-size: 31px;
    font-size: 1.9375rem;
    line-height: 32px;
    line-height: 2rem
}

.part-02 .part-02-content p {
    font-size: 19px;
    font-size: 1.1875rem;
    line-height: 34px;
    line-height: 2.125rem;
    margin: 25px 0;
    margin: 1.5625rem 0
}

.part-02 .part-02-content p.card-03-p {
    font-size: 14px;
    font-size: 0.875rem;
    margin: 20px 0;
    margin: 1.25rem 0
}

.part-02 .card-03-title {
    align-items: center;
    display: flex
}

.part-02 .card-03-title img {
    height: 30px;
    height: 1.875rem;
    margin-left: 13px;
    margin-left: 0.8125rem;
    width: 30px;
    width: 1.875rem
}

.part-03 .part-03-title {
    padding-bottom: 20px;
    padding-bottom: 1.25rem
}

.part-03 .part-03-content,.part-03 .part-03-title {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.part-03 .part-03-content {
    gap: 25px;
    gap: 1.5625rem;
    padding-bottom: 50px;
    padding-bottom: 3.125rem
}

.part-03 .part-03-content .part-03-item {
    border-radius: 6px;
    border-radius: 0.375rem;
    display: block;
    height: 662px;
    height: 41.375rem;
    overflow: hidden;
    position: relative;
    width: 50vw
}

.part-03 .part-03-content .part-03-left-text {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    left: 0;
    padding: 0 35px;
    padding: 0 2.1875rem;
    position: absolute;
    transform: translateY(-100%);
    width: 100%
}

.part-03 .part-03-content .part-03-left-text p {
    color: #fff;
    font-size: 31px;
    font-size: 1.9375rem
}

.part-03 .part-03-content .part-03-right {
    display: flex;
    flex-direction: column;
    height: 662px;
    height: 41.375rem;
    justify-content: space-between
}

.part-03 .part-03-content .part-03-right .part-03-right-top {
    background: url(../images/home/img-bg.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    height: 230px;
    height: 14.375rem;
    justify-content: space-between;
    overflow: hidden;
    padding: 25px;
    padding: 1.5625rem;
    width: 100%
}

.part-03 .part-03-content .part-03-right .part-03-right-top .part-03-right-top-text {
    color: #fff;
    font-size: 38px;
    font-size: 2.375rem
}

.part-03 .part-03-content .part-03-right .part-03-right-bottom {
    align-items: center;
    display: flex;
    gap: 20px;
    gap: 1.25rem;
    height: 420px;
    height: 26.25rem;
    justify-content: space-between
}

.part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    gap: 1.25rem;
    height: 100%;
    justify-content: space-between;
    width: 320px;
    width: 20rem
}

.part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-left .card-01 {
    background: #e1e7f3;
    border-radius: 30px;
    border-radius: 1.875rem;
    height: 50vh
}

.part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-left .card-02 {
    background: #fff;
    border-radius: 30px;
    border-radius: 1.875rem;
    height: 50vh
}

.part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-left .card-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 25px;
    padding: 1.5625rem
}

.part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-left .card-item .card-01-title h3 {
    color: #001b32;
    font-size: 20px;
    font-size: 1.25rem;
    margin-bottom: 8px;
    margin-bottom: 0.5rem
}

.part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-left .card-item .card-01-title p {
    color: dimgray;
    font-size: 16px;
    font-size: 1rem
}

.part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-left .card-item .link-wrap {
    display: flex;
    justify-content: end
}

.part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-right {
    background: #d9d9d9;
    border-radius: 20px;
    border-radius: 1.25rem;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 320px;
    width: 20rem
}

.part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-right .bg-img-tips {
    height: 100%;
    -o-object-fit: fill;
    object-fit: fill
}

.part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-right .download-btn {
    align-items: center;
    background: #fff;
    border-radius: 30px;
    border-radius: 1.875rem;
    bottom: 20px;
    bottom: 1.25rem;
    display: flex;
    height: 30px;
    height: 1.875rem;
    justify-content: center;
    position: absolute;
    right: 20px;
    right: 1.25rem;
    width: 30px;
    width: 1.875rem
}

.part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-right .download-btn img {
    width: 18px;
    width: 1.125rem
}

.part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-right .download-text {
    bottom: 25px;
    bottom: 1.5625rem;
    color: #036;
    font-size: 16px;
    font-size: 1rem;
    left: 25px;
    left: 1.5625rem;
    position: absolute
}

.m-top-bg {
    height: 100%;
    width: auto
}

.m-part-01-title,.m-top-bg {
    display: none
}

.wraper {
    width: 100%
}

.pc-top-bg {
    height: 100vh
}

@media screen and (max-width: 750px) {
    @keyframes meteorAll {
        0% {
            transform:translateY(0)
        }

        to {
            left: 0;
            top: 100px;
            top: 6.25rem
        }
    }

    .top-banner {
        height: auto
    }

    .top-banner .radio-01 {
        bottom: 48%;
        left: 5%
    }

    .top-banner .radio-02 {
        bottom: 29%;
        right: 2%
    }

    .top-banner .text-wrap h3 {
        font-size: 22px;
        font-size: 1.375rem
    }

    .top-banner .text-wrap .tags-wrap {
        font-size: 14px;
        font-size: 0.875rem
    }

    .top-banner .text-wrap .tags-wrap span {
        padding: 0 5px;
        padding: 0 0.3125rem
    }

    .top-banner .cloud {
        top: 18%;
        width: 35%
    }

    .top-banner .meteor-all {
        width: 45%
    }

    .top-banner .m-top-bg {
        display: block;
        width: 100vw
    }

    .top-banner .m-top-bg img {
        width: 100%
    }

    .part-01 .part-01-left,.top-banner .pc-top-bg {
        display: none
    }

    .part-01 .part-01-right {
        width: 100%
    }

    .part-01 .part-01-right .act-list-item .act-list-item-img {
        max-height: 123px;
        max-height: 7.6875rem;
        overflow: hidden;
        width: 40%
    }

    .part-01 .part-01-right .act-list-item .act-list-item-img img {
        -o-object-fit: fill;
        object-fit: fill
    }

    .part-01 .part-01-right .act-list-item .act-list-item-msg {
        width: 55%
    }

    .part-01 .m-part-01-title {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        margin-bottom: 1.25rem;
        padding-top: 20px;
        padding-top: 1.25rem
    }

    .part-01 .m-part-01-title h3 {
        color: #036;
        font-size: 46px;
        font-size: 2.875rem
    }

    .part-02 {
        flex-wrap: wrap;
        gap: 20px;
        gap: 1.25rem;
        justify-content: center;
        display: block !important
    }

    .part-02 .part-02-item {
        flex-shrink: 0;
        height: auto;
        width: 100%;
        margin-bottom: 15px;
    }

    .part-03 .part-03-content {
        display: block
    }

    .part-03 .part-03-content .part-03-item {
        height: auto;
        margin-bottom: 14px;
        margin-bottom: 0.875rem;
        width: 100%
    }

    .part-03 .part-03-content .part-03-left-text p {
        font-size: 28px;
        font-size: 1.75rem
    }

    .part-03 .part-03-content .part-03-right .part-03-right-top {
        display: block;
        flex-direction: column-reverse;
        margin-bottom: 14px;
        margin-bottom: 0.875rem
    }

    .part-03 .part-03-content .part-03-right .part-03-right-top .part-03-right-top-text {
        font-size: 28px;
        font-size: 1.75rem
    }

    .part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-left {
        gap: 12px;
        gap: 0.75rem;
        width: 48.5%
    }

    .part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-left .card-item {
height: auto;
        flex: 1.0;
        padding: 12px;
        padding: 0.75rem
    }

    .part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-right {
        background: linear-gradient(180deg,#ced8dc 20%,#838d91 72%,#ced8dc);
        border-radius: 14px;
        border-radius: 0.875rem;
        width: 48.5%
    }

    .part-03 .part-03-content .part-03-right .part-03-right-bottom .part-03-right-bottom-right .bg-img-tips {
        height: auto;
        margin: 42px auto 0;
        margin: 2.625rem auto 0;
        width: 90%
    }
}