body {
    background-color: #22162d;
}

.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.4rem;
    padding: .46rem .6rem;
    background-image: url('../images/pic-top-mask.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 10000;
}

.fixed-top .top-l {
    color: #CED9FF;
    font-size: .24rem;
    text-align: center;
    line-height: .42rem;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.fixed-top .top-l .logo-icon {
    margin-right: .1rem;
    width: 3.16rem;
    height: .52rem;
}

.fixed-top .top-r{
    text-align: center;
    /* font-weight: 500; */
    color: #fff;
    font-size: .14rem;
}

.fixed-top .top-r i{
    text-decoration: underline;
    font-style: normal;
    
}

.screen1{
    background: url('../images/bg-light.png');
    background-size: 100% 100%;
}

.screen1-container{
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0 1.21rem 0 .6rem;
    display: flex;
    flex-direction: row;
}

.screen1-l{
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.screen1-l > img{
    width: 6.98rem;
    height: 1rem;
    margin-bottom: .6rem;
}

.screen1-l > p{
    font-weight: 400;
    font-size: .18rem;
    color: #BBC3E0;
    line-height: .37rem;
    word-break: normal;
}

.screen1-r{
    width: 5.87rem;
    margin-left: .65rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    height: 100%;
    justify-content: center;
}

.screen1-r img{
    width: 5.86rem;
    height: 3.54rem;
}

.screen1-r img:last-child{
    margin-top: .4rem;
}

.screen1-l > div{
    width: 100%;
    margin-top: .6rem;
}
.screen1-l > div img{
    margin: auto;
    width: 4rem;
    height: 1.06rem;
}

.screen1-l > div .screen1-l-btn{
    margin: auto;
    width: 4rem;
    height: 1.06rem;
    background: url(../images/btn-bg.png);
    background-size: 100% 100%;
    display: flex;
    flex-direction: row;
    color: #fff;
    padding: 0 .3rem;
    justify-content: center;
    text-align: center;
    align-items: center;

}

.screen1-l > div .screen1-l-btn img{
    width: .6rem;
    height: .6rem;
    margin: 0;
    margin-right: .2rem;
}

.screen1-l > div .screen1-l-btn div p:first-child{
    font-size: .34rem;
    font-weight: 500;
}

.screen1-l > div .screen1-l-btn div p:last-child{
    font-size: .2rem;
}



/* screen4 */

.screen4-container{
    width: 100%;
    height: 100%;
    position: relative;
}

.screen4-top{
    margin: auto;
    margin-top: 2rem;
    width: 8.12rem;
    text-align: center;
    color: #fff;
    font-size: .36rem;
    line-height: .48rem;
}

.screen4-top img{
    margin: auto;
    margin-bottom: .9rem;
    height: .9rem;
}

.screen4-item-group{
    width: 14rem;
    text-align: left;
    margin: auto;
    margin-top: .18rem;
}

.screen4-item{
   width: 4.44rem;
   height: 5.92rem;
   border-radius: .24rem;
   position: relative;
   color: #fff;
   background-size: 100% 100%;
}

.screen4-item-pic1{
    background-image: url('../images/pic3.png');
}

.screen4-item-pic2{
    background-image: url('../images/pic4.png');
}

.screen4-item-pic3{
    background-image: url('../images/pic5.png');
}




.refreshing-page{
    color: rgba(255,255,255,.6);
    font-size: .24rem;
    text-align: center;
    margin-top: 26%;
}

.refreshing-page img{
    display: block;
    margin: auto;
    margin-bottom: .1rem;
}



.footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    font-size: .14rem;
    /* -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px); */
    color: #fff;
    background-color: transparent;
    text-align: center;
}

.footer .p1 {
    margin: 0 0 0.2rem;
}