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%;
}
.firstpage{
    width: 100%;
    height: 100%;
    background: url(../../img/grs/banner.png) no-repeat;
    background-size: 100% 100%;
}
.first{
    height: 29rem;
    width: 94.5rem;
    position: relative;
    margin: auto;
    top: 28.52%;
}
.grs{
    width: 10.6875rem;
    height: 14.0625rem;
    background: url("../../img/grs/GRS.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 17.4375rem;
}
.slogan{
    width: 45.375rem;
    height: 12.875rem;
    background: url("../../img/grs/slogan.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 16.125rem;
}
.secondpage{
    width: 100%;
    height: 100%;
}
.second{
    width: 56.25rem;
    height: 43.75rem;
    background: #091A47;
    border-radius: 1.875rem;
    position: relative;
    left: 50%;
    margin-left: -56.25rem;
    top: 50%;
    transform: translate(0, -50%);
}
.grp{
    width: 47.6875rem;
    height: 3.3125rem;
    font-size: 3.75rem;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #FFFFFF;
    position: absolute;
    left: 3.6875rem;
    top: 3rem;
}
.grpback{
    width: 50.4375rem;
    height: 3.5625rem;
    font-size: 3.375rem;
    font-family: Source Han Sans CN;
    font-weight: 800;
    color: #FFFFFF;
    opacity: 0.15;
    position: absolute;
    left: 3.6875rem;
    top: 4.2rem;
}
.one{
    width: 1.875rem;
    height: 1.875rem;
    background: url("../../img/grs/gisimg/1.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 16.0625rem;
    top: 12.5rem;
}
.efficiency{
    width: 22.6875rem;
    height: 1.25rem;
    background: url("../../img/grs/gisimg/efficiency.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 14.5rem;
    top: 13.0625rem;
}
.two{
    width: 1.875rem;
    height: 1.875rem;
    background: url("../../img/grs/gisimg/2.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 16.0625rem;
    top: 19.375rem;
}
.rich{
    width: 17.875rem;
    height: 1.25rem;
    background: url("../../img/grs/gisimg/rich.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 19.25rem;
    top: 19.9375rem;
}
.three{
    width: 1.875rem;
    height: 1.875rem;
    background: url("../../img/grs/gisimg/3.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 16.0625rem;
    bottom: 15.625rem;
}
.power{
    width: 18.3125rem;
    height: 1.25rem;
    background: url("../../img/grs/gisimg/power.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 18.8125rem;
    bottom: 15.625rem;
}
.four{
    width: 1.875rem;
    height: 1.875rem;
    background: url("../../img/grs/gisimg/4.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 16.0625rem;
    bottom: 8.75rem;
}
.fast{
    width: 13.75rem;
    height: 1.25rem;
    background: url("../../img/grs/gisimg/fast.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 19.125rem;
    bottom: 8.9375rem;
}
.secondmore{
    width: 6.0625rem;
    height: 1.4375rem;
    font-size: 1.5rem;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;
    position: absolute;
    right: 5.0625rem;
    bottom: 5.125rem;
}
a{
    color: #FFFFFF;
}
.secondarrow{
    width: 7.75rem;
    height: 1.25rem;
    background: url("../../img/grs/gcp/arrow.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 3.75rem;
    bottom: 3.75rem;
}
.grpimg{
    width: 62.5%;
    height: 100%;
    background: url("../../img/grs/gisimg/img.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    margin-left: -15rem;
}
.thirdpage{
    width: 100%;
    height: 100%
}
.third{
    width: 112.5rem;
    height: 50.9375rem;
    position: relative;
    margin: auto;
    top: 50%;
    transform: translate(0, -50%);
}
.gearth{
    width: 34.5625rem;
    height: 3.3125rem;
    font-size: 3.75rem;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #000000;
    position: relative;
    margin: auto;
    top: -1.3rem;
}
.gearthback{
    width: 20.1875rem;
    height: 3.5625rem;
    font-size: 3.375rem;
    font-family: Source Han Sans CN;
    font-weight: 800;
    color: #000000;
    opacity: 0.15;
    position: relative;
    margin: auto;
    top: -3.5rem;
}
.thirdrectangle1{
    width: 22rem;
    height: 43.75rem;
    background: url("../../img/grs/gisearth/2d3d/bottom.png") no-repeat;
    background-size: 100% 100%;
    opacity: 0.8;
    position: absolute;
    bottom: 0rem;
}
.number1{
    width: 2.75rem;
    height: 1.5rem;
    background: url("../../img/grs/gisearth/2d3d/01.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 2.4375rem;
    top: 3.0625rem;
}
.dd{
    width: 12.5rem;
    height: 1.375rem;
    font-size: 1.875rem;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #FFFFFF;
    position: absolute;
    left: 2.5rem;
    top: 5.4rem;
}
.thirdyellow{
    width: 3.5rem;
    height: 0.25rem;
    background: #FFC334;
    border-radius: 0.125rem;
    position: absolute;
    left: 2.4375rem;
    top: 7.6875rem;
}
.thirdyellow1{
    width: 3.5rem;
    height: 0.25rem;
    background: #FFC334;
    border-radius: 0.125rem;
    position: absolute;
    left: 2.4375rem;
    top: 7.6875rem;
}
.thirdmore{
    width: 6.0625rem;
    height: 1.4375rem;
    font-size: 1.5rem;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;
    position: absolute;
    left: 7.5rem;
    bottom: 5.125rem;
    opacity: 0;
}
.thirdarrow{
    width: 7.75rem;
    height: 1.25rem;
    background: url("../../img/grs/gisearth/rightarrow.png") no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    position: absolute;
    left: 7.125rem;
    bottom: 3.75rem;
}
.thirdrectangle2{
    width: 22rem;
    height: 43.75rem;
    background: url("../../img/grs/gisearth/data/bottom.png") no-repeat;
    background-size: 100% 100%;
    opacity: 0.8;
    position: absolute;
    bottom: 0rem;
    left: 22.5rem;
}
.number2{
    width: 2.75rem;
    height: 1.5rem;
    background: url("../../img/grs/gisearth/data/02.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 2.4375rem;
    top: 3.0625rem;
}
.data{
    width: 18rem;
    height: 1.375rem;
    font-size: 1.875rem;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #FFFFFF;
    position: absolute;
    left: 2.5rem;
    top: 5.4rem;
}
.thirdrectangle3{
    width: 22rem;
    height: 43.75rem;
    background: url("../../img/grs/gisearth/display/bottom.png") no-repeat;
    background-size: 100% 100%;
    opacity: 0.8;
    position: absolute;
    bottom: 0rem;
    left: 45.25rem;
}
.number3{
    width: 2.75rem;
    height: 1.5rem;
    background: url("../../img/grs/gisearth/display/03.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 2.4375rem;
    top: 3.0625rem;
}
.display{
    width: 12.5625rem;
    height: 1.375rem;
    font-size: 1.875rem;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #FFFFFF;
    position: absolute;
    left: 2.5rem;
    top: 5.4rem;
}
.thirdrectangle4{
    width: 22rem;
    height: 43.75rem;
    background: url("../../img/grs/gisearth/space/bottom.png") no-repeat;
    background-size: 100% 100%;
    opacity: 0.8;
    position: absolute;
    bottom: 0rem;
    right: 22.625rem;
}
.number4{
    width: 2.75rem;
    height: 1.5rem;
    background: url("../../img/grs/gisearth/space/04.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 2.4375rem;
    top: 3.0625rem;
}
.space{
    width: 16.1875rem;
    height: 1.375rem;
    font-size: 1.875rem;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #FFFFFF;
    position: absolute;
    left: 2.5rem;
    top: 5.4rem;
}
.thirdrectangle5{
    width: 22rem;
    height: 43.75rem;
    background: url("../../img/grs/gisearth/service/bottom.png") no-repeat;
    background-size: 100% 100%;
    opacity: 0.8;
    position: absolute;
    bottom: 0rem;
    right: 0rem;
}
.number5{
    width: 2.75rem;
    height: 1.5rem;
    background: url("../../img/grs/gisearth/service/05.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 2.4375rem;
    top: 3.0625rem;
}
.service{
    width: 8.9375rem;
    height: 1.375rem;
    font-size: 1.875rem;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #FFFFFF;
    position: absolute;
    left: 2.5rem;
    top: 5.4rem;
}
.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;
}
.forthpage{
    width: 100%;
    height: 100%;
    background: url("../../img/grs/gcp/bottom.png") no-repeat;
    background-size: 100% 100%;
}
.forth{
    width: 105rem;
    height: 55rem;
    position: relative;
    margin: auto;
    top: 50%;
    transform: translate(0,-50%);
}
.gcp{
    width: 64.0625rem;
    height: 3.3125rem;
    font-size: 3.75rem;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #FFFFFF;
    position: relative;
    margin: auto;
}
.gcpback{
    width: 39.1875rem;
    height: 3.625rem;
    font-size: 3.375rem;
    font-family: Source Han Sans CN;
    font-weight: 800;
    color: #FFFFFF;
    opacity: 0.15;
    position: relative;
    margin: auto;
    top: -2.2rem;
}
.forthrectangle1{
    width: 56.875rem;
    height: 30.5625rem;
    background: url("../../img/grs/gcp/group.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 8.75rem;
}
.forthrectangle2{
    width: 34.375rem;
    height: 30rem;
    background: rgba(255,255,255,0.05);
    box-shadow: 0.4375rem 0.4375rem 0rem 0rem rgba(0,0,0,0.1);
    border-radius: 1.875rem;
    position: absolute;
    bottom: 10.2rem;
    right: 8.75rem;
}
.order{
    width: 9.625rem;
    height: 1.25rem;
    position: absolute;
    top: 5.5625rem;
    left: 8.4375rem;
}
.or{
    width: 9.625rem;
    height: 1.25rem;
    background: url("../../img/grs/gcp/order.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -0.5rem;
    left: 0.4rem;
}
.tk{
    width: 12.75rem;
    height: 1.25rem;
    background: url(../../img/grs/gcp/task.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -0.5rem;
    left: 0.5rem;
}
.forthyellow{
    width: 1.875rem;
    height: 1.25rem;
    background: rgba(255, 195, 52, 1);
    position: absolute;
    bottom: -0.375rem;
    left: -0.4375rem;
}
.task{
    width: 12.75rem;
    height: 1.25rem;
    position: absolute;
    top: 9.6875rem;
    left: 8.4375rem;
}
.node{
    width: 9.5625rem;
    height: 1.25rem;
    position: absolute;
    top: 13.6875rem;
    left: 8.4375rem;
}
.ne{
    width: 9.5625rem;
    height: 1.25rem;
    background: url("../../img/grs/gcp/node.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -0.5rem;
    left: 0.5rem;
}
.manage{
    width: 12.75rem;
    height: 1.25rem;
    position: absolute;
    bottom: 11.0625rem;
    left: 8.4375rem;
}
.me{
    width: 12.75rem;
    height: 1.25rem;
    background: url("../../img/grs/gcp/manage.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -0.5rem;
    left: 0.5rem;
}
.forthmore{
    width: 6.0625rem;
    height: 1.4375rem;
    font-size: 1.5rem;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;
    position: absolute;
    bottom: 4.5rem;
    right: 4.4375rem;
}
.fortharrow{
    width: 7.75rem;
    height: 1.25rem;
    background: url("../../img/grs/gcp/arrow.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 3.125rem;
    right: 3.125rem;
}
.ht5{height: 33.125rem}
.ht6{height: 35.1875rem}