@media screen and (min-width: 1024px){
    .hub-menu{
        width: 100%;
        height: 8.06rem;
        position: fixed;
        top: 0;
        left: 0;
        background: #FFFFFF;
        z-index: 500;
    }
    .hub-menu .box{
        width: 100%;
        height: 100%;
        padding: 0 13rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .hub-menu .box .left,
    .hub-menu .box .right{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hub-menu .box .left img.logo-p{
        width: 15.5rem;
        height: 2.21rem;
    }
    .hub-menu .box .left div{
        margin-left: 1rem;
        font-size: 1.44rem;
    }
    .hub-menu .box .right .login-hut{
        font-size: 1.44rem;
    }
    .hub-menu .box .right .language-selector{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        height: 100%;
        margin-left: 4rem;
    }
    .hub-menu .box .right .language-selector .txt{
        margin-left: .4rem;
        font-size: 1.44rem;
    }
    .hub-menu .box .right .language-selector img{
        width: 1.6rem;
        height: 1.6rem;
    }
    #language-menu {
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        z-index: 1;
        top: 8.06rem;
    }
    #language-menu li {
        list-style-type: none;
    }

    #language-menu li a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        font-size: 1.14rem;
        display: block;
    }

    #language-menu li a:hover {
        background-color: #f1f1f1;
    }
    .hidden{
        display: none;
    }

    .hub-banner{
        margin-top: 8.06rem;
        width: 100%;
        height: calc(100vh - 8.06rem);
        background-image: url("/assets/images/hub/banner.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .hub-banner .box{
        position: absolute;
        top: 50%;
        left: 13rem;
        transform: translate(0,-50%);
        width: 70.5rem;
        height: 36rem;
        background: rgba(255, 255, 255, .4);
        padding: 0 4rem;
    }
    .hub-banner .box .title{
        font-weight: bold;
        font-size: 3.55rem;
        color: #000000;
        line-height: 11.08rem;
    }
    #banner-desc{
        width: 100%;
        height: 6.14rem;
    }
    #banner-desc .carousel-item{
        font-weight: 400;
        font-size: 2.31rem;
        color: #787878;
        line-height: 3.07rem;
    }
    .hub-banner a{
        display:inline-block;
    }
    .hub-banner .start-btn{
        margin-top: 4.86rem;
        width: 23.79rem;
        height: 6.4rem;
        background: #0C42BE;
        border-radius: 0.71rem;
        font-weight: bold;
        font-size: 3.01rem;
        color: #FFFFFF;
    }
    .key-features{
        width: 100%;
        padding: 8rem 18.14rem;
        background: #F2F2F2;
        position: relative;
        text-align: center;
    }
    .key-features .grid-container{
        display: grid;
        place-items: center;
        position: relative;
        /*height: 200px; !* 根据需要调整高度 *!*/
    }
    .key-features .grid-container .title {
        position: relative;
        font-weight: bold;
        font-size: 5rem;
        color: #000;
        z-index: 2;
    }
    .key-features .grid-container .ellipse {
        position: absolute;
        width: 21.29rem;
        height: 2.36rem;
        background: linear-gradient(90deg, #0C42BE 0%, #F2F2F2 79%);
        border-radius: 1.18rem;
        z-index: 1;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .key-features .box{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .key-features .box .item{
        margin-top: 7.64rem;
        width: calc((100% - 5rem) / 2);
        height: 32.34rem;
        position: relative;
    }
    .key-features .box .item img{
        width: 12.56rem;
        height: 12.56rem;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%,0);
        z-index: 10;
    }
    .key-features .box .item .content{
        position: absolute;
        top: 6.2rem;
        left: 0;
        width: 100%;
        height: 26rem;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 8.06rem;

    }
    .key-features .box .item .content .name{
        margin-top: 3.14rem;
        font-weight: bold;
        font-size: 2.71rem;
    }
    .key-features .box .item .content .desc{
        margin-top: 3.14rem;
        font-size: 1.57rem;
    }
    .key-features a{
        display: inline-block;
    }
    .key-features .start-btn{
        margin-top: 7rem;
        width: 42.86rem;
        height: 7.29rem;
        background: #0C42BE;
        border-radius: 3.64rem;
        font-size: 2.86rem;
        color: #FFFFFF;
    }
    .hub-introduce{
        width: 100%;
        height: auto;
        padding: 8rem 18.14rem;
        background: #FFFFFF;
    }
    .hub-introduce .list{
        width: 100%;
        height: 35.64rem;
        margin-bottom: 12rem;
        display: flex;
        justify-content: space-between;
    }
    .hub-introduce .list img{
        width: 46.28rem;
        height: 35.64rem;
    }
    .hub-introduce .list .item{
        width: 49.2rem;
    }
    .hub-introduce .list .item .line{
        width: 8.57rem;
        height: 1.43rem;
        background: #0C42BE;
        margin-top: 4rem;
    }
    .hub-introduce .list .item .title{
        margin-top: 2.5rem;
        font-weight: 800;
        font-size: 2.57rem;
        color: #000000;
    }
    .hub-introduce .list .item .desc{
        font-size: 1.69rem;
        color: #000000;
        line-height: 3.14rem;
    }
    .hub-introduce .list .item .desc1{
        margin-top: 2.86rem;
    }
    .hub-introduce a{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .hub-introduce a .start-btn{
        width: 42.86rem;
        height: 7.29rem;
        background: #0C42BE;
        border-radius: 3.64rem;
        font-size: 2.86rem;
        color: #FFFFFF;
    }
}

@media screen and (min-width: 350px) and (max-width: 1020px){
    .hub-menu{
        width: 100%;
        height: 52px;
        position: fixed;
        top: 0;
        left: 0;
        background: #FFFFFF;
        z-index: 500;
    }
    .hub-menu .box{
        width: 100%;
        height: 100%;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .hub-menu .box .left,
    .hub-menu .box .right{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hub-menu .box .left div{
        margin-left: 10px;
        font-size: 14px;
        display: none;
    }
    .hub-menu .box .left img{
        width: 132px;
        height: auto;
    }
    .hub-menu .box .right .login-hut{
        font-size: 1rem;
    }
    .hub-menu .box .right .language-selector{
        margin-left: 1rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        height: 100%;
        /*margin-left: 4rem;*/
    }
    .hub-menu .box .right .language-selector .txt{
        margin-left: 4px;
        font-size: 1rem;
    }
    .hub-menu .box .right .language-selector img{
        width: 1rem;
        height: 1rem;
    }
    #language-menu {
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        z-index: 1;
        top: 52px;
        right: 0px;
    }
    #language-menu li {
        list-style-type: none;
    }

    #language-menu li a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    #language-menu li a:hover {
        background-color: #f1f1f1;
    }
    .hidden{
        display: none;
    }

    .hub-banner{
        margin-top: 52px;
        width: 100%;
        height: calc(100vh - 52px);
        background-image: url("/assets/images/hub/banner.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .hub-banner .box{
        position: absolute;
        top: 64px;
        left: 16px;
        width: calc(100% - 32px);
        height: calc(100% - 128px);
        background: rgba(255, 255, 255, .4);
        padding: 1rem;
    }
    .hub-banner .box .title{
        margin-top: 1rem;
        font-weight: bold;
        font-size: 2rem;
        color: #000000;
        line-height: 3rem;
    }
    #banner-desc{
        width: 100%;
        margin-top: 2rem;
        height: 16rem;
    }
    #banner-desc .carousel-item{
        font-weight: 400;
        font-size: 1.64rem;
        color: #787878;
        line-height: 3.07rem;
    }
    .hub-banner a{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hub-banner .start-btn{
        margin-top: 2rem;
        width: calc(100% - 32px);
        height: 4.4rem;
        background: #0C42BE;
        border-radius: 0.71rem;
        font-weight: bold;
        font-size: 1.64rem;
        color: #FFFFFF;
    }
    .key-features{
        width: 100%;
        padding: 2rem 1rem;
        background: #F2F2F2;
        position: relative;
        text-align: center;
    }
    .key-features .grid-container{
        display: grid;
        place-items: center;
        position: relative;
        /*height: 200px; !* 根据需要调整高度 *!*/
    }
    .key-features .grid-container .title {
        position: relative;
        font-weight: bold;
        font-size: 2.64rem;
        color: #000;
        z-index: 2;
    }
    .key-features .grid-container .ellipse {
        position: absolute;
        width: 10rem;
        height: 1.36rem;
        background: linear-gradient(90deg, #0C42BE 0%, #F2F2F2 79%);
        border-radius: 1.18rem;
        z-index: 1;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .key-features .box{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .key-features .box .item{
        margin-top: 2rem;
        width: 100%;
        height: 24rem;
        position: relative;
    }
    .key-features .box .item img{
        width: 8rem;
        height: 8rem;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%,0);
        z-index: 10;
    }
    .key-features .box .item .content{
        position: absolute;
        top: 4rem;
        left: 0;
        width: 100%;
        height: 20rem;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 1rem;

    }
    .key-features .box .item .content .name{
        margin-top: 1rem;
        font-weight: bold;
        font-size: 1.64rem;
    }
    .key-features .box .item .content .desc{
        margin-top: 3.14rem;
        font-size: 1rem;
        line-height: 2rem;
    }
    .key-features a{
        display: flex;
        justify-content: center;
    }
    .key-features .start-btn{
        margin-top: 2rem;
        width: 100%;
        height: 4.4rem;
        background: #0C42BE;
        border-radius: 3.64rem;
        font-size: 1.64rem;
        color: #FFFFFF;
    }
    .hub-introduce{
        width: 100%;
        height: auto;
        padding: 2rem 1rem;
        background: #FFFFFF;
    }
    .hub-introduce .list{
        width: 100%;
        height: auto;
        margin-bottom: 2rem;
    }
    .hub-introduce .list:nth-child(2){
        display: flex;
        flex-direction: column-reverse;
    }
    .hub-introduce .list img{
        width: 100%;
        height: auto;
    }
    .hub-introduce .list .item{
        width: 100%;
    }
    .hub-introduce .list .item .line{
        width: 4rem;
        height: 0.86rem;
        background: #0C42BE;
        margin-top: 2rem;
    }
    .hub-introduce .list .item .title{
        margin-top: 1rem;
        font-weight: 800;
        font-size: 1.64rem;
        color: #000000;
    }
    .hub-introduce .list .item .desc{
        font-size: 1rem;
        color: #000000;
        line-height: 2rem;
    }
    .hub-introduce .list .item .desc1{
        margin-top: 1rem;
    }
    .hub-introduce a{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .hub-introduce a .start-btn{
        margin-top: 2rem;
        width: 100%;
        height: 4.4rem;
        background: #0C42BE;
        border-radius: 3.64rem;
        font-size: 1.64rem;
        color: #FFFFFF;
    }
}