body{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: #ffc107;
}
.beian{
    color: rgba(0, 0, 0,.5);
    text-decoration: none;
}


@media screen and (min-width: 0px) and (max-width: 768px) {
    .mailiBearContPC{
        display: none;
    }
    .mailiBearContPAD{
        display: none;
    }
    .mailiBearContMobile{
        display: table;
        width: calc(100vw * 375 / 375);
        margin: 0 auto;
    }
    .mailiBear{
        width:calc(100vw * 205 / 375);
        height: calc(100vw * 165 / 375);
        margin: 0 auto;
        margin-top: calc(100vw * 25 / 375);
    }
    .HIMaiLiBear{
        width:calc(100vw * 205 / 375);
        height: calc(100vw * 165 / 375);
    }
    .title{
        width:calc(100vw * 270/ 375);
        height: calc(100vw * 96 / 375);
        margin: 0 auto;
        text-align: center;
        font-size: calc(100vw * 20 / 375);
        color: #FFF;
        margin-top: calc(100vw * 10 / 375);
    }
    .titleImg{
        width:calc(100vw * 260 / 375);
        height: calc(100vw * 52 / 375);
    }
    .service{
        width:calc(100vw * 270 / 375);
        height: calc(100vw * 88 / 375);
        margin: 0 auto;
        margin-top: calc(100vw * 17 / 375);
        display: flex;
        justify-content: space-between;
    }
    .serviceCont{
        width: 30%;
        height: 100%;
        text-align: center;
    }
    .IconImg{
        display: inline;
        width:calc(100vw * 60 / 375);
        height: calc(100vw * 60 / 375);
    }
    .iconTitle{
        font-size: calc(100vw * 14 / 375);
        color: #FFF;
        padding: 0;
        margin-top:calc(100vw * 8 / 375) 0 0 0;
    }
    .weChatCode{
        width:calc(100vw * 222 / 375);
        height: calc(100vw * 222 / 375);
        margin: 0 auto;
        margin-top: calc(100vw * 50 / 375);
        text-align: center;
        line-height: calc(100vw * 222 / 375);
        position: relative;
    }
    .mailiBearGo{
        width:calc(100vw * 50 / 375);
        height: calc(100vw * 50 / 375);
        position: absolute;
        top: calc(-100vw * 32 / 375);
        left: calc(100vw * 80 / 375);
    }
    .codeBorder{
        width:calc(100vw * 222 / 375);
        height: calc(100vw * 222 / 375);
        top: calc(100vw * 20 / 375);
        left: calc(100vw * 29 / 375);

    }
    .code{
        position: absolute;
        width:calc(100vw * 160 / 375);
        height: calc(100vw * 182 / 375);
        top: calc(100vw * 20 / 375);
        left: calc(100vw * 29 / 375);
    }
    .varCharRecord{
        color: rgba(0, 0, 0,.5);
        width: calc(100vw * 358 / 375);
        min-height: calc(100vw * 40 / 375);
        font-size: calc(100vw * 12 / 375);
        margin: 0 auto;
        text-align: center;
        margin-top: calc(100vw * 40 / 375);
    }
    .varCharRecord p{
        margin: 0;
        padding: 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .mailiBearContPC{
        display: none;
    }
    .mailiBearContMobile{
        display: none;
    }
    .mailiBearContPAD{
        display: table;
        width: calc(100vw * 768 / 768);
        margin: 0 auto;
        position: relative;
    }
    .mailiBear{
        width:calc(100vw * 270 / 768);
        height: calc(100vw * 210 / 768);
        margin: 0 auto;
        margin-top: calc(100vw * 40 / 768);
    }
    .HIMaiLiBear{
        width:calc(100vw * 270 / 768);
        height: calc(100vw * 210 / 768);
    }
    .title{
        width:calc(100vw * 270/ 768);
        height: calc(100vw * 96 / 768);
        margin: 0 auto;
        text-align: center;
        font-size: calc(100vw * 20 / 768);
        color: #FFF;
        margin-top: calc(100vw * 10 / 768);
    }
    .titleImg{
        width:calc(100vw * 270 / 768);
        height: calc(100vw * 52 / 768);
    }
    .service{
        width:calc(100vw * 600 / 768);
        height: calc(100vw * 137 / 768);
        margin: 0 auto;
        margin-top: calc(100vw * 60 / 768);
        display: flex;
        justify-content: space-between;
    }
    .serviceCont{
        width: 30%;
        height: 100%;
        text-align: center;
        position: relative;
    }
    .IconImg{
        display: inline;
        width:calc(100vw * 88 / 768);
        height: calc(100vw * 88 / 768);
    }
    .iconTitle{
        font-size: calc(100vw * 20 / 768);
        color: #FFF;
        padding: 0;
        margin-top:calc(100vw * 20 / 768) 0 0 0;
    }
    .sleepBear{
        position: absolute;
        bottom: calc(100vw *132 / 768);
        left: calc(100vw *60 / 768);
        width:calc(100vw * 50 / 768);
        height: calc(100vw * 50 / 768);
    }
    .weChatCode{
        width:calc(100vw * 222 / 768);
        height: calc(100vw * 222 / 768);
        margin: 0 auto;
        margin-top: calc(100vw * 80 / 768);
        text-align: center;
        line-height: calc(100vw * 222 / 768);
        position: relative;
    }
    .mailiBearGo{
        width:calc(100vw * 50 / 768);
        height: calc(100vw * 50 / 768);
        position: absolute;
        top: calc(-100vw * 32 / 768);
        left: calc(100vw * 80 / 768);
    }
    .codeBorder{
        width:calc(100vw * 222 / 768);
        height: calc(100vw * 222 / 768);
        top: calc(100vw * 20 / 768);
        left: calc(100vw * 29 / 768);

    }
    .code{
        position: absolute;
        width:calc(100vw * 160 / 768);
        height: calc(100vw * 182 / 768);
        top: calc(100vw * 20 / 768);
        left: calc(100vw * 29 / 768);
    }
    .together{
        width:calc(100vw * 100 / 768);
        height: calc(100vw * 100 / 768);
        position: absolute;
        bottom: calc(100vw * 0 / 768);
        left: calc(100vw * 40 / 768);
    }

    .togetherImg{
        width:calc(100vw * 100 / 768);
        height: calc(100vw * 100 / 768);
    }

    .varCharRecord{
        color: rgba(0, 0, 0,.5);
        font-size: calc(100vw * 12 / 768);
        /*position: absolute;*/
        /*bottom: calc(100vw * 0 / 768);*/
        /*left: calc(100vw * 189 / 768);*/
    }
    .footer{
        width: 100%;
        height: calc(100vw * 20 / 768);
        text-align: center;
        line-height:calc(100vw * 20 / 768);
    }


}

@media screen and (min-width: 992px) {
    .mailiBearContPAD{
        display: none;
    }
    .mailiBearContMobile{
        display: none;
    }
    .mailiBearContPC{
        display: table;
    }
    .title{
        width:calc(100vw * 600 / 1920);
        height: calc(100vw * 200 / 1920);
        margin-top: calc(100vw * 190 / 1920);
        margin-left: calc(100vw * 220 / 1920);
        text-align: center;
        font-size: calc(100vw * 40 / 1920);
        color: #FFF;
    }
    .titleImg{
        width:calc(100vw * 600 / 1920);
        height: calc(100vw * 120 / 1920);
    }
    .service{
        width:calc(100vw * 600 / 1920);
        height: calc(100vw * 137 / 1920);
        margin-top: calc(100vw * 60 / 1920);
        margin-left: calc(100vw * 220 / 1920);
        display: flex;
        justify-content: space-between;
    }
    .serviceCont{
        width: 30%;
        height: 100%;
        text-align: center;
        position: relative;
    }
    .IconImg{
        display: inline;
        width:calc(100vw * 88 / 1920);
        height: calc(100vw * 88 / 1920);
    }
    .iconTitle{
        font-size: calc(100vw * 20 / 1920);
        color: #FFF;
        padding: 0;
        margin-top:calc(100vw * 20 / 1920) 0 0 0;
    }
    .sleepBear{
        position: absolute;
        bottom: calc(100vw *132 / 1920);
        left: calc(100vw *60 / 1920);
        width:calc(100vw * 50 / 1920);
        height: calc(100vw * 50 / 1920);
    }
    .weChatCode{
        width:calc(100vw * 222 / 1920);
        height: calc(100vw * 222 / 1920);
        margin-top: calc(100vw * 80 / 1920);
        margin-left: 50%;
        text-align: center;
        line-height: calc(100vw * 222 / 1920);
        position: relative;
    }
    .mailiBearGo{
        width:calc(100vw * 50 / 1920);
        height: calc(100vw * 50 / 1920);
        position: absolute;
        top: calc(-100vw * 32 / 1920);
        left: calc(100vw * 80 / 1920);
    }
    .codeBorder{
        width:calc(100vw * 222 / 1920);
        height: calc(100vw * 222 / 1920);
        top: calc(100vw * 20 / 1920);
        left: calc(100vw * 29 / 1920);

    }
    .code{
        position: absolute;
        width:calc(100vw * 160 / 1920);
        height: calc(100vw * 182 / 1920);
        top: calc(100vw * 20 / 1920);
        left: calc(100vw * 29 / 1920);
    }
    .mailiBear{
        width:calc(100vw * 700 / 1920);
        height: calc(100vw * 564 / 1920);
        position: absolute;
        top: calc(100vw * 220 / 1920);
        right: calc(100vw * 256 / 1920);
    }
    .HIMaiLiBear{
        width:calc(100vw * 700 / 1920);
        height: calc(100vw * 564 / 1920);
    }
    .together{
        width:calc(100vw * 100 / 1920);
        height: calc(100vw * 100 / 1920);
        position: fixed;
        bottom: calc(100vw * 0 / 1920);
        left: calc(100vw * 60 / 1920);
    }

    .togetherImg{
        width:calc(100vw * 100 / 1920);
        height: calc(100vw * 100 / 1920);
    }
    .varCharRecord{
        color: rgba(0, 0, 0,.5);
        font-size: calc(100vw * 14 / 1920);
        position: fixed;
        bottom: calc(100vw * 0 / 1920);
        left: calc(100vw * 631 / 1920);
    }
}