body{
        margin: 0px;
        padding: 0px;
        background-color: #ececec;
        font-family: 'pingfang SC', 'helvetica neue', arial, 'hiragino sans gb', 'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif;
    }

    .item{
        position: relative;
        width: 100%;
        height: 8.125rem;
        overflow: hidden;
    }
    .topbg{
        background-image: url(../img/bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .topItem{
        position: absolute;
        height: 100%;
        padding-top:0.55rem;
        padding-bottom: 1rem;
        padding-left: 0.2rem;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: space-between;
        -webkit-flex-direction: column;
        -webkit-justify-content: space-between;
        box-sizing: border-box;
        text-align: left;
    }
    .icon{
       margin: 0 auto 0 0;
    }
    .btList{
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: center;
        display: -webkit-flex;
        -webkit-flex-direction: row;
        -webkit-align-items: flex-end;
        -webkit-justify-content:center;
        position: absolute;
        bottom: 1rem;
        left: 0;
        right: 0;
    }
    .androidbt{
        margin-left: 0.5rem; 
    }
    .iosbt{
        margin-left: 0.25rem;
    }
    .lbg{
        position: absolute;
        right: 3rem;
        height: 8.2rem;
        width: 20rem;
        background: radial-gradient(circle, #eeeeee,#fdfdfd);
    }
    .rbg{
        position: absolute;
        left: 3rem;
        height: 8.2rem;
        width: 20rem;
        background: radial-gradient(circle, #292a37,#313345);
    }
    .itemImg1{
        position: absolute;
        height: 7.3375rem;
        bottom: 0;
        margin-left: -0.2rem;
        z-index: 100;
    }
    .itemImg2{
        position: absolute;
        height: 6.875rem;
        top:0;
        margin-right: -0.2rem;
        z-index: 100;
    }
    .itemImg3{
        position: absolute;
        height: 100%;
        margin-left: -0.6rem;
        z-index: 100;
    }
    .itemImg4{
        position: absolute;
        height: 7.75rem;
        margin-right: -1.2rem;
        bottom: 0;
        z-index: 100;
    }
    .itemWhite{
        background-color: #fdfdfd;
    }
    .itemBlue{
        background-color: #313345;
    }
    .leftArea{
        position: absolute;
        color: white;
        text-align: left;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        -webkit-flex-direction:column;
        align-items: flex-start;
        -webkit-align-items:flex-start;
    }
    
    .leftLine{
        width: 0.75rem;
        height: 0.03rem;
        background-color: white;
        border-radius: 0.015rem;
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
    }

    .rightArea{
        position: absolute;
        color: black;
        text-align: right;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        -webkit-flex-direction:column;
        align-items: flex-end;
        -webkit-align-items:flex-end;
    }
    .rightLine{
        width: 0.75rem;
        height: 0.03rem;
        background-color: black;
        border-radius: 0.015rem;
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
    }
    
    @media (max-width:400px){
        .topicon{
            height: 0.66rem;
        }
        .title{
            height: 0.92rem;
        }
        .qricon{
            height: 1.44rem;
        }
        .bt{
            height: 0.74rem;
        }
        .itemTitle{
            font-size: 0.88rem;
        }
        .itemDesc{
            font-size: 0.36rem;
        }
        .itemTop{
            top:1.975rem;
        }
        .itemIcon{
            margin-top: 1.3rem;
            height:0.54rem;
        }
        .rDistance{
            right: 1.4rem;
        }
        .lDistance{
            left: 1.4rem;
        }
        .rights{
            color: #949494;
            font-size: 0.4rem;
            text-align: center;
            padding-left: 0.2rem;
            padding-right: 0.2rem;
            padding-top: 0.2rem;
            padding-bottom: 0.2rem;
        }
        .topbt{
            position: fixed;
            height: 0.94rem;
            bottom: 0.4rem;
            margin-right: -0.8rem;
        }
    }
    @media (min-width:400px) and (max-width:800px){
        .topicon{
            height: 0.5775rem;
        }
        .title{
            height: 0.805rem;
        }
        .qricon{
            height: 1.26rem;
        }
        .bt{
            height: 0.6475rem;
        }
        .itemTitle{
            font-size: 0.82rem;
        }
        .itemDesc{
            font-size: 0.315rem;
        }
        .itemTop{
            top:2.275rem;
        }
        .itemIcon{
            margin-top: 1.5rem;
            height:0.4725rem;
        }

        .rDistance{
            right: 1.5rem;
        }
        .lDistance{
            left: 1.5rem;
        }
        .rights{
            color: #949494;
            font-size: 0.35rem;
            text-align: center;
            padding-left: 0.2rem;
            padding-right: 0.2rem;
            padding-top: 0.2rem;
            padding-bottom: 0.2rem;
        }
        .topbt{
            position: fixed;
            height: 0.8475rem;
            bottom: 0.4rem;
            margin-right: -0.8rem;
        }
    }
    @media (min-width:600px) and (max-width:800px){
        .topicon{
            height: 0.495rem;
        }
        .title{
            height: 0.69rem;
        }
        .qricon{
            height: 1.08rem;
        }
        .bt{
            height: 0.555rem;
        }
        .itemTitle{
            font-size: 0.71rem;
        }
        .itemDesc{
            font-size: 0.27rem;
        }
        .itemTop{
            top:2.475rem;
        }
        .itemIcon{
            margin-top: 1.6rem;
            height:0.405rem;
        }
        .rDistance{
            right: 1.6rem;
        }
        .lDistance{
            left: 1.6rem;
        }
        .rights{
            color: #949494;
            font-size: 0.3rem;
            text-align: center;
            padding-left: 0.2rem;
            padding-right: 0.2rem;
            padding-top: 0.2rem;
            padding-bottom: 0.2rem;
        }
        .topbt{
            position: fixed;
            height: 0.755rem;
            bottom: 0.4rem;
            margin-right: -0.8rem;
        }
    }
    @media (min-width:800px){
        .topicon{
            height: 0.4125rem;
        }
        .title{
            height: 0.575rem;
        }
        .qricon{
            height: 0.9rem;
        }
        .bt{
            height: 0.4625rem;
        }
        .itemTitle{
            font-size: 0.6rem;
        }
        .itemDesc{
            font-size: 0.225rem;
        }
        .itemTop{
            top:2.775rem;
        }
        .itemIcon{
            margin-top: 1.8rem;
            height:0.3375rem;
        }
        .rDistance{
            right: 1.8rem;
        }
        .lDistance{
            left: 1.8rem;
        }
        .rights{
            color: #949494;
            font-size: 0.25rem;
            text-align: center;
            padding-left: 0.2rem;
            padding-right: 0.2rem;
            padding-top: 0.2rem;
            padding-bottom: 0.2rem;
        }
        .topbt{
            position: fixed;
            width: 0.4625rem;
            height: 0.4625rem;
            bottom: 0.4rem;
            margin-right: -0.8rem;
        }
    }