@media screen and (max-width: 62rem) {
    html,
    body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: auto;
        background-color: white;
    }
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
    }
    .swiper-container{
        width: 100%;
        height: 100%;
    }
    .ht1{height: 13.125rem;}
    .firstpage{
        width: 100%;
        height: 13.125rem;
        background: url(../../img/grs/banner/bottom.png) no-repeat;
        background-size: 100% 100%;
    }
    .first{
        height: 6.875rem;
        width: 19.5625rem;
        position: relative;
        margin: auto;
        top: 2.5rem;
    }
    .grs{
        width: 10.75rem;
        height: 6.9375rem;
        background: url("../../img/grs/banner/title.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
    }
    .ht2{ height: 18.75rem;}
    .secondpage{
        width: 100%;
        height: 18.75rem;
    }
    .second{
        width: 15rem;
        height: 12.5rem;
        background: #091A47;
        border-radius: 0.9375rem;
        position: relative;
        left: 50%;
        margin-left: -10.47rem;
        top: 50%;
        transform: translate(0, -50%);
    }
    .grp{
        width: 12.75rem;
        height: 0.875rem;
        font-size: 1rem;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #FFFFFF;
        position: absolute;
        left: 0.9375rem;
        top: 1.25rem;
    }
    .grpback{
        width: 13.125rem;
        height: 0.9375rem;
        font-size: 0.875rem;
        font-family: Source Han Sans CN;
        font-weight: 800;
        color: #FFFFFF;
        opacity: 0.15;
        position: absolute;
        left: 0.9375rem;
        top: 1.4375rem;
    }
    .one{
        width: 0.875rem;
        height: 0.875rem;
        background: url("../../img/grs/gisimg/1.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 1.625rem;
        top: 3.75rem;
    }
    .efficiency{
        width: 10.5rem;
        height: 0.5625rem;
        background: url("../../img/grs/gisimg/efficiency.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 1.6875rem;
        top: 3.875rem;
    }
    .two{
        width: 0.875rem;
        height: 0.875rem;
        background: url("../../img/grs/gisimg/2.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 1.625rem;
        top: 5.25rem;
    }
    .rich{
        width: 8.25rem;
        height: 0.5625rem;
        background: url("../../img/grs/gisimg/rich.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 3.9375rem;
        top: 5.375rem;
    }
    .three{
        width: 0.875rem;
        height: 0.875rem;
        background: url("../../img/grs/gisimg/3.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 1.625rem;
        bottom: 4.875rem;
    }
    .power{
        width: 8.5rem;
        height: 0.5625rem;
        background: url("../../img/grs/gisimg/power.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 3.6875rem;
        bottom: 5.0625rem;
    }
    .four{
        width: 0.875rem;
        height: 0.875rem;
        background: url("../../img/grs/gisimg/4.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 1.625rem;
        bottom: 3.375rem;
    }
    .fast{
        width: 6.375rem;
        height: 0.5625rem;
        background: url("../../img/grs/gisimg/fast.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 2.8125rem;
        bottom: 3.5625rem;
    }
    .secondmore{
        width: 3.0625rem;
        height: 0.75rem;
        font-size: 0.75rem;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;
        position: absolute;
        right: 1.0625rem;
        bottom: 1.375rem;
    }
    a{
        color: #FFFFFF;
    }
    .secondarrow{
        width: 3.5625rem;
        height: 0.75rem;
        background: url("../../img/grs/gcp/arrow.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 0.625rem;
        bottom: 0.625rem;
    }
    .grpimg{
        width: 12.5rem;
        height: 100%;
        background: url("../../img/grs/pingtai/bottom.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        margin-left: -0.78rem;
    }
    .ht3{height: 23.1875rem;}
    .thirdpage{
        width: 100%;
        height: 23.1875rem;
    }
    .third{
        width: 20.9375rem;
        height: 20rem;
        position: relative;
        margin: auto;
        top: 50%;
        transform: translate(0, -50%);
    }
    .gearth{
        width: 11.5625rem;
        height: 1.125rem;
        font-size: 1.25rem;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #000000;
        position: relative;
        margin: auto;
        top: -1.3rem;
    }
    .gearthback{
        width: 7.5rem;
        height: 1.375rem;
        font-size: 1.25rem;
        font-family: Source Han Sans CN;
        font-weight: 800;
        color: #000000;
        opacity: 0.15;
        position: relative;
        margin: auto;
        top: -2.35rem;
    }
    .thirdrectangle1{
        width: 6.5625rem;
        height: 17.875rem;
        background: url("../../img/grs/xgdq/dd/bottom.png") no-repeat;
        background-size: 100% 100%;
        opacity: 0.8;
        position: absolute;
        bottom: 0rem;
    }
    .number1{
        width: 1.25rem;
        height: 0.75rem;
        background: url("../../img/grs/gisearth/2d3d/01.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0.75rem;
        top: 0.625rem;
    }
    .dd{
        width: 5.0625rem;
        height: 0.625rem;
        font-size: 0.75rem;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #FFFFFF;
        position: absolute;
        left: 0.7rem;
        top: 1.9rem;
    }
    .thirdyellow{
        width: 1.375rem;
        height: 0.125rem;
        background: #FFC334;
        border-radius: 0.0625rem;
        position: absolute;
        left: 0.7rem;
        top: 2.9375rem;
    }
    .thirdyellow1{
        width: 1.375rem;
        height: 0.125rem;
        background: #FFC334;
        border-radius: 0.0625rem;
        position: absolute;
        left: 0.7rem;
        top: 3.9375rem;
    }
    .thirdmore{
        width: 3.0625rem;
        height: 0.75rem;
        font-size: 0.75rem;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;
        position: absolute;
        left: 1.5625rem;
        bottom: 1.75rem;
        opacity: 0;
    }
    .thirdarrow{
        width: 3.5625rem;
        height: 0.75rem;
        background: url("../../img/grs/gisearth/rightarrow.png") no-repeat;
        background-size: 100% 100%;
        opacity: 0;
        position: absolute;
        left: 1.5rem;
        bottom: 1rem;
    }
    .thirdrectangle2{
        width: 6.5625rem;
        height: 8.75rem;
        background: url("../../img/grs/xgdq/data/bottom.png") no-repeat;
        background-size: 100% 100%;
        opacity: 0.8;
        position: absolute;
        bottom: 9.125rem;
        left: 7.1875rem;
    }
    .number2{
        width: 1.25rem;
        height: 0.75rem;
        background: url("../../img/grs/gisearth/data/02.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0.75rem;
        top: 0.625rem;
    }
    .data{
        width: 5.0625rem;
        height: 1.625rem;
        font-size: 0.75rem;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 1rem;
        position: absolute;
        left: 0.7rem;
        top: 1.9rem;
    }
    .thirdrectangle3{
        width: 6.5625rem;
        height: 8.75rem;
        background: url("../../img/grs/xgdq/display/bottom.png") no-repeat;
        background-size: 100% 100%;
        opacity: 0.8;
        position: absolute;
        bottom: 9.125rem;
        left: 14.375rem;
    }
    .number3{
        width: 1.25rem;
        height: 0.75rem;
        background: url("../../img/grs/gisearth/display/03.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0.75rem;
        top: 0.625rem;
    }
    .display{
        width: 5.0625rem;
        height: 0.625rem;
        font-size: 0.75rem;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 1rem;
        position: absolute;
        left: 0.7rem;
        top: 1.9rem;
    }
    .thirdrectangle4{
        width: 6.5625rem;
        height: 8.75rem;
        background: url("../../img/grs/xgdq/space/bottom.png") no-repeat;
        background-size: 100% 100%;
        opacity: 0.8;
        position: absolute;
        bottom: 0rem;
        right: 7.1875rem;
    }
    .number4{
        width: 1.25rem;
        height: 0.75rem;
        background: url("../../img/grs/gisearth/space/04.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0.75rem;
        top: 0.625rem;
    }
    .space{
        width: 5.0625rem;
        height: 1.625rem;
        font-size: 0.75rem;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 1rem;
        position: absolute;
        left: 0.7rem;
        top: 1.9rem;
    }
    .thirdrectangle5{
        width: 6.5625rem;
        height: 8.75rem;
        background: url("../../img/grs/xgdq/service/bottom.png") no-repeat;
        background-size: 100% 100%;
        opacity: 0.8;
        position: absolute;
        bottom: 0rem;
        right: 0rem;
    }
    .number5{
        width: 1.25rem;
        height: 0.75rem;
        background: url("../../img/grs/gisearth/service/05.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0.75rem;
        top: 0.625rem;
    }
    .service{
        width: 3.5625rem;
        height: 0.625rem;
        font-size: 0.75rem;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 1rem;
        position: absolute;
        left: 0.7rem;
        top: 1.9rem;
    }
    .bor{
        width: 100%;
        height: 100%;
    }
    .bor:hover{
        background-color: rgba(9, 26, 71, 0.8);
        background-size: 100% 100%;
    }
    .thirdrectangle1:hover .thirdmore{
        opacity: 1;
    }
    .thirdrectangle1:hover .thirdarrow{
        opacity: 1;
    }
    .thirdrectangle2:hover .thirdmore{
        opacity: 1;
    }
    .thirdrectangle2:hover .thirdarrow{
        opacity: 1;
    }
    .thirdrectangle3:hover .thirdmore{
        opacity: 1;
    }
    .thirdrectangle3:hover .thirdarrow{
        opacity: 1;
    }
    .thirdrectangle4:hover .thirdmore{
        opacity: 1;
    }
    .thirdrectangle4:hover .thirdarrow{
        opacity: 1;
    }
    .thirdrectangle5:hover .thirdmore{
        opacity: 1;
    }
    .thirdrectangle5:hover .thirdarrow{
        opacity: 1;
    }
    .ht4{ height: 24.375rem;}
    .forthpage{
        width: 100%;
        height: 24.375rem;
        background: url("../../img/grs/gcp/bottom.png") no-repeat;
        background-size: 100% 100%;
    }
    .forth{
        width: 20.9375rem;
        height: 21.0625rem;
        position: relative;
        margin: auto;
        top: 50%;
        transform: translate(0,-50%);
    }
    .gcp{
        width: 20.625rem;
        height: 1.125rem;
        font-size: 1.25rem;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #FFFFFF;
        position: relative;
        margin: auto;
    }
    .gcpback{
        width: 14.5rem;
        height: 1.375rem;
        font-size: 1.25rem;
        font-family: Source Han Sans CN;
        font-weight: 800;
        color: #FFFFFF;
        opacity: 0.15;
        position: relative;
        margin: auto;
        top: -1.0625rem;
    }
    .forthrectangle1{
        width: 15.4375rem;
        height: 9.0625rem;
        background: url("../../img/grs/gcp/group.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 10rem;
        left: 2.75rem;
    }
    .forthrectangle2{
        width: 20.9375rem;
        height: 8.75rem;
        background: rgba(255,255,255,0.05);
        box-shadow: 0.4375rem 0.4375rem 0 0 rgba(0,0,0,0.1);
        border-radius: 1.125rem;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .order{
        width: 5.1875rem;
        height: 0.6875rem;
        position: absolute;
        top: 1.25rem;
        left: 1.375rem;
    }
    .or{
        width: 5.1875rem;
        height: 0.6875rem;
        background: url("../../img/grs/gcp/order.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -0.4rem;
        left: 0.2rem;
    }
    .forthyellow{
        width: 0.9rem;
        height: 0.4rem;
        background: rgba(255, 195, 52, 1);
        position: absolute;
        bottom: -0.1rem;
        left: -0.2rem;
    }
    .task{
        width: 6.9375rem;
        height: 0.6875rem;
        position: absolute;
        top: 3rem;
        left: 1.375rem;
    }
    .tk{
        width: 6.9375rem;
        height: 0.6875rem;
        background: url("../../img/grs/gcp/task.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -0.4rem;
        left: 0.2rem;
    }
    .node{
        width: 5.1875rem;
        height: 0.6875rem;
        position: absolute;
        top: 1.3125rem;
        left: 12.6875rem;
    }
    .manage{
        width: 6.9375rem;
        height: 0.6875rem;
        position: absolute;
        bottom: 5.0625rem;
        left: 12.6875rem;
    }

    .ne{
        width: 5.1875rem;
        height: 0.6875rem;
        background: url("../../img/grs/gcp/node.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -0.4rem;
        left: 0.2rem;
    }
    .me{
        width: 6.9375rem;
        height: 0.6875rem;
        background: url("../../img/grs/gcp/manage.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -0.4rem;
        left: 0.2rem;
    }
    .forthmore{
        width: 3.0625rem;
        height: 0.75rem;
        font-size: 0.75rem;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;
        position: absolute;
        bottom: 2rem;
        right: 1.6875rem;
    }
    .fortharrow{
        width: 3.5625rem;
        height: 0.75rem;
        background: url("../../img/grs/gcp/arrow.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 1.25rem;
        right: 1.25rem;
    }
    .ht5{height: 21.9375rem}
    .ht6{height: 47.8rem}

}