@font-face{
    font-family: Futura-Bold-local; 
    src: url('./Futura_2.ttf');
}

@font-face{
    font-family: Avenir-Heavy-local; 
    src: url('./Avenir_4.ttf');
}


@font-face{
    font-family: Avenir-Heavy-local-m; 
    src: url('./Avenir_0.ttf');
}

@font-face{
    font-family: TrebuchetMS-Bold-local; 
    src: url('./Trebuchet-MS-Bold.ttf');
}

html,body{
    margin:0;
    background: #000000;
    padding: 0;
    height: 100%;
}

.main{
    display: flex;
    width: 100%;
    padding: 0.7813rem 0.4063rem;
    box-sizing: border-box;
    flex-direction: column;
}

.top{
    width: 100%;
    display: flex;
    cursor: pointer;
    align-items: center;
}

.top .logo img{
    width: 1.25rem;

}

.top .logoText{
    display: flex;
    flex-direction: column;
    font-size: 0.6875rem;
    margin-left:0.3125rem;
    justify-content: center;
}

.top .logoText>span:first-child{
    font-size: 0.6875rem;
    color: #FFFFFF;
    font-family: TrebuchetMS-Bold, TrebuchetMS-Bold-local;
}

.top .logoText>span:last-child{
    font-size: 0.375rem;
    color: rgba(255,255,255,0.70);
    font-family: TrebuchetMS-Bold, TrebuchetMS-Bold-local;
}

.middle{
    position: relative;
    width:100%;
    background: #FFFFFF;
    border-radius: 0.2813rem;
    border-radius: 0.2813rem;
    height: 22.9063rem;
    margin-top: 0.7813rem;
    display: flex;
    flex-direction: column;
    padding: 0.625rem 0.5625rem 0 0.5625rem;
    box-sizing: border-box;
    justify-content: space-between;
}

.x1{
    position: absolute;
    width: 0.7813rem;
    top: 0.2188rem;
    left: 5.875rem
}

.x2{
    position: absolute;
    width: 0.7813rem;
    top: 5.9375rem;
    left: -0.4063rem;
}

.x3{
    position: absolute;
    width: 0.7813rem;
    top: 5.3438rem;
    left: 7.4063rem;
}

.middle .leftWrap{
    display: flex;
    flex-direction: column; 
}

.middleText .leftWrap{
    font-family: PingFangSC-Semibold;
    font-size: 0.5625rem;
    color: #4A4A4A;
}

.middleText{
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    font-family: PingFangSC-Semibold;
    font-size: 0.3438rem;
    color: #4A4A4A;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom:0.625rem;
}
.middle .leftWrap .middleTitle1{
    font-family: Futura-Bold, Futura-Bold-local;
    font-size: 1rem;
    color: #FF00A1;
}

.middle .leftWrap .middleTitle2{
    font-family: Futura-Bold, Futura-Bold-local;
    font-size: 0.8438rem;
    color: #000000;
    margin-top:0.5rem;
}

.appStore{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.2188rem;
}

.appStore img{
    width: 3.7188rem;
}

.middleText .rightWrap{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.rightWrap{
    display:flex;
    justify-content: center;
    align-items: center;
}

.rightWrap img{
    width: 8.1563rem;
    display: block;
}

.bottom{
    display: flex;
    flex-direction: column;
    font-family: Avenir-Heavy, Avenir-Heavy-local;
    font-size: 0.375rem;
    color: rgba(255,255,255,0.70);
    text-decoration: underline;
    justify-content: center;
    align-items: center;
}

.bottom span{
    margin-top:0.6563rem;
    cursor: pointer;
}

.footer{
    margin-top: 2.875rem;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Avenir-Medium, Avenir-Heavy-local-m;
    font-size: 0.25rem;
    color: rgba(255,255,255,0.50);
}

.middleText::-webkit-scrollbar-track 
    { 
      border-radius: 10px; 
      background-color: rgba(255,255,255,.5);
    }

@media only screen and (min-width: 1025px) {
    .main{
        width: 8.7431rem;
        margin:0 auto;
        padding: 0.3125rem 0;
    }

    
    .x1{
        position: absolute;
        width:0.2778rem;
        top: 0.2986rem;
        left: 3.4028rem;
    }

    .x2{
        position: absolute;
        width:0.2778rem;
        top: 2.4236rem;
        left: -0.1875rem;
    }

    .x3{
        position: absolute;
        width:0.2778rem;
        top: 3.4722rem;
        left: 3.4722rem;
    }

    .top .logo img{
        width: 0.5rem;
    }

    .top .logoText{
        margin-left: 0.1111rem;
    }
    
    .top .logoText>span:first-child{
        font-size: 0.2778rem;
    }
    
    .top .logoText>span:last-child{
        font-size: 0.1597rem;
    }
    
    .middle{
        width:8.7431rem;
        background: #FFFFFF;
        border-radius: 0.125rem;
        height: 5.3611rem;
        margin-top: 0.1806rem;
        display: flex;
        flex-direction: row;
        padding: 0.4236rem 0.4236rem 0 0.4236rem;
        box-sizing: border-box;
        justify-content: space-between;
    }
    
    .middle .leftWrap{
        display: flex;
        flex-direction: column; 
    }

    .middleText .leftWrap{
        font-family: PingFangSC-Semibold;
        font-size: 0.2222rem;
        color: #4A4A4A;
    }

    .middleText .rightWrap{
        font-family: PingFangSC-Semibold;
        font-size: 0.125rem;
        color: #4A4A4A;
    }
    
    .middleText{
        justify-content: flex-start;
        font-family: PingFangSC-Semibold;
        font-size: 0.2222rem;
        color: #4A4A4A;
        overflow: auto;
        padding-bottom:0.625rem;
        flex-direction: column;
    }

    .middle .leftWrap .middleTitle1{
        font-size: 0.5556rem;
        color: #FF00A1;
    }
    
    .middle .leftWrap .middleTitle2{
        font-size: 0.4028rem;
        color: #000000;
        margin-top:0.2847rem;
    }
    
    .appStore{
        width: 4.4028rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top:0;
        height: 2.0833rem;
    }
    
    .appStore img{
        width: 1.6528rem;
    }
    
    .rightWrap{
        display:flex;
        justify-content: center;
        align-items: flex-end;
    }
    
    .rightWrap img{
        width: 2.7986rem;
        display: block;
    }
    
    .bottom{
        display: flex;
        flex-direction: row;
        font-size: 0.125rem;
        color: rgba(255,255,255,0.70);
        text-decoration: underline;
        justify-content: flex-end;
        align-items: center;
    }
    
    .bottom span{
        margin-top:0.2083rem;
        margin-left:0.3958rem;
    }

    .footer{
        margin-top: 0.5764rem;
        width:100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Avenir-Medium, Avenir-Heavy-local-m;
        font-size: 0.0972rem;
        color: rgba(255,255,255,0.50);
    }
}