body {
    background-color: #22162d;
}

.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.4rem;
    padding: .46rem .6rem;
    background-image: url('../image/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;
}

.fixed-top .top-l .logo-icon {
    margin-right: .6rem;
    width: 1.9rem;
    height: .5rem;
}

.fixed-top .top-l .tab-item {
    padding: 0 .24rem;
    cursor: pointer;
}

.fixed-top .top-l .tab-item img {
    width: .32rem;
    height: .06rem;
    visibility: hidden;
    margin: auto;
}


.fixed-top .top-l .tab-item.on {
    color: #fff;
    font-weight: 700;
}

.fixed-top .top-l .tab-item.on img {
    visibility: visible;
}

.fixed-top .top-r .btn {
    background-image: url('../image/btn-download-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* width: 2.09rem;
    height: .66rem; */
    /* line-height: .66rem; */
    text-align: center;
    font-weight: 700;
    color: #fff;
    font-size: .24rem;
    padding: .14rem .3rem;
    cursor: pointer;
}

.fixed-top .top-r .btn img {
    width: .34rem;
    height: .34rem;
}

.screen1 .bg-halo {
    top: 0;
    left: 0;
}

.screen1 .bg-halo2 {
    top: 0;
    left: 5.7rem;
}

.screen1-title {
    width: 5.44rem;
    height: 2.45rem;
}

.screen1 {
    padding-left: .6rem;
}

.screen1-left {
    padding-top: 2.47rem;
}

.screen1 .summary {
    margin-top: .6rem;
    font-size: .24rem;
    line-height: .4rem;
    font-weight: 400;
    color: #878DA1;
    width: 5.76rem;
}

.screen1 .summary img {
    margin-bottom: .2rem;
    /* width: 2.4rem; */
    height: .48rem;
}

.screen1 .btn-group {
    margin-top: .6rem;
    font-weight: 700;
    color: #fff;
    font-size: .24rem;
}

.screen1 .btn-group .btn {
    /* width: 2.48rem;
    height: .68rem; */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.screen1 .btn-group .btn:first-child {
    margin-right: .37rem;
}

.screen1 .btn-group .andriod-btn {
    background-image: url('../image/btn-android-bg.png');
    /* padding: .15rem .18rem .15rem .16rem; */
    padding: .15rem 0;
    display: flex;
    justify-content: center;
    width: 48%;
}

.screen1 .btn-group .btn img {
    margin-right: .04rem;
}

.screen1 .btn-group .andriod-btn img,
.screen1 .btn-group .ios-btn img {
    width: .36rem;
    height: .36rem;
}

.screen1 .btn-group .ios-btn {
    /* background-image: url('../images/btn-ios-bg.png'); */
    background-image: url('../image/btn-android-bg.png');
    /* padding: .14rem .75rem .14rem .7rem ; */
    padding: .15rem 0;
    display: flex;
    justify-content: center;
    width: 48%;
}

.screen1 .screen1-right {
    margin-left: 1.57rem;
    position: absolute;
    left: 6rem;
    top: 0;
}
/* 旧版 */
/* .screen1 .screen1-right img {
    position: absolute;
    width: 4.5rem;
    height: 6rem;
}

.screen1 .screen1-right img:nth-child(1),
.screen1 .screen1-right img:nth-child(2),
.screen1 .screen1-right img:nth-child(3) {
    left: 0;
}

.screen1 .screen1-right img:nth-child(1),
.screen1 .screen1-right img:nth-child(6) {
    top: -4.19rem;
}

.screen1 .screen1-right img:nth-child(2),
.screen1 .screen1-right img:nth-child(7) {
    top: 2.01rem;
}

.screen1 .screen1-right img:nth-child(3),
.screen1 .screen1-right img:nth-child(8) {
    top: 8.21rem;
}

.screen1 .screen1-right img:nth-child(4),
.screen1 .screen1-right img:nth-child(5) {
    left: 4.7rem;
}

.screen1 .screen1-right img:nth-child(4) {
    top: -.6rem;
}

.screen1 .screen1-right img:nth-child(5) {
    top: 5.67rem;
}

.screen1 .screen1-right img:nth-child(6),
.screen1 .screen1-right img:nth-child(7),
.screen1 .screen1-right img:nth-child(8) {
    left: 9.4rem;
} */

/* 新版 */
.screen1 .screen1-right img {
    position: absolute;
}

.screen1 .screen1-right img.screen-pic1{
    width: 3.92rem;
    height: 5.99rem;
    left: -.7rem;
    top: -2.57rem;
}

.screen1 .screen1-right img.screen-pic2{
    width: 2.42rem;
    height: 3.7rem;
    left: 0;
    top: 3.86rem;
}

.screen1 .screen1-right img.screen-pic3{
    width: 3.74rem;
    height: 5.74rem;
    left: -.58rem;
    top: 7.93rem;
}

.screen1 .screen1-right img.screen-pic4{
    width: 3.87rem;
    height: 5.92rem;
    left: 4.25rem;
    top: -3.96rem;
}

.screen1 .screen1-right img.screen-pic5{
    width: 4.59rem;
    height: 6.85rem;
    top: 2.35rem;
    left: 3.36rem;
}

.screen1 .screen1-right img.screen-pic6{
    width: 3.40rem;
    height: 5.22rem;
    left: 4.07rem;
    top: 9.74rem;
}

.screen1 .screen1-right img.screen-pic7{
    width: 3.13rem;
    height: 4.78rem;
    left: 8.79rem;
    top: -1.76rem;
}

.screen1 .screen1-right img.screen-pic8{
    width: 2.7rem;
    height: 4.12rem;
    top: 3.54rem;
    left: 8.51rem;
}

.screen1 .screen1-right img.screen-pic9{
    width: 3.9rem;
    height: 5.99rem;
    left: 8.28rem;
    top: 8.19rem;
}

.screen1 .screen1-right img.screen-mask{
    width: 13.16rem;
    height: 12.72rem;
    top: -1.07rem;
}

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

.screen-top-pic{
    width: 100%;
    height: 5.8rem;
    position: absolute;
    top: 0;
    left: 0;
    /* visibility: hidden;
    opacity: 0; */
    z-index: -1;
}

.screen-top-pic img{
    width: 100%;
    /* height: 3.32rem; */
    position: absolute;
    top: 0;
    left: 0;
    max-height: 5.2rem;
}

.screen-top-pic img:last-child{
    height: 5.2rem;
}

.screen2-top{
    margin-top: 1.8rem;
    width: 9.74rem;
    margin-left: calc(50% - 4.87rem);
    text-align: center;
    color: #fff;
    font-size: .34rem;
    line-height: .48rem;
}

.screen2-top img{
    margin: auto;
    margin-bottom: .2rem;
    height: 0.9rem;
}

.screen2-sub-title{
    width: 14rem;
    text-align: left;
    margin: auto;
    margin-top: .74rem;
    font-size: .6rem;
    font-weight: 700;
    color: #fff;
}

.screen2-sub-desc{
    width: 14rem;
    text-align: left;
    margin: auto;
    /* margin-top: .2rem; */
    /* font-size: .36rem; */
    /* font-weight: 400; */
    /* line-height: .6rem; */
    /* color: #fff; */
    margin-top: 1.33rem;
}
.screen2-sub-desc img{
    height: .6rem;
}


.screen2-item-group{
    /* width: 100%; */
    text-align: left;
    /* padding: 0 2.6rem; */
    width: 14rem;
    margin: auto;
    margin-top: .41rem;
}

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

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

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

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

/* .screen2-item-title{
    position: absolute;
    left: .2rem;
    top: 1.88rem;
    font-size: .42rem;
    font-weight: 700;
}

.screen2-item-desc{
    position: absolute;
    left: .2rem;
    top: 2.58rem;
    font-size: .24rem;
    font-weight: 400;
} */



/* screen3 */


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

.screen3-bg{
    width: 100%;
    height: 5.8rem;
    position: absolute;
    top: 0;
    left: 0;
}


.screen3-top{
    margin-top: 1.8rem;
    width: 9.74rem;
    margin-left: calc(50% - 4.87rem);
    text-align: center;
    color: #fff;
    font-size: .34rem;
    line-height: .48rem;
}

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

.screen3-sub-title{
    width: 14rem;
    text-align: left;
    /* padding: 0 2.6rem; */
    margin: auto;
    margin-top: .74rem;
    font-size: .6rem;
    font-weight: 700;
    color: #fff;
}

.screen3-sub-desc{
    width: 14rem;
    text-align: left;
    margin: auto;
    margin-top: 1.33rem;
    font-size: .36rem;
    font-weight: 400;
    line-height: .6rem;
    color: #fff;
}

.screen3-sub-desc img{
    height: .6rem;
}

/* .screen3-item-pic{
    width: 14rem;
    height: 3.32rem;
    margin: auto;
    margin-top: .3rem;
    background-image: url('../images/screen3-pic1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: .24rem;
    position: relative;
    color: #fff;
}

.screen3-item-title{
    position: absolute;
    left: .4rem;
    top: 2.04rem;
    font-size: .42rem;
    font-weight: 700;
}

.screen3-item-desc{
    position: absolute;
    left: .4rem;
    top: 2.56rem;
    margin-top: .1rem;
    font-size: .24rem;
    font-weight: 400;
} */

.screen3-item-group{
    /* width: 100%; */
    text-align: left;
    /* padding: 0 2.6rem; */
    width: 14rem;
    margin: auto;
    margin-top: .41rem;
}

.screen3-item{
    width: 6.8rem;
    height: 3.32rem;
    border-radius: .24rem;
    position: relative;
    color: #fff;
    background-size: 100% 100%;
}



/* screen4 */

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

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

.screen4-top img{
    margin: auto;
    margin-bottom: .16rem;
    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('../image/screen4-pic1.png');
}

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

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

.screen4-item-title{
    position: absolute;
    left: .4rem;
    top: 4.59rem;
    font-size: .42rem;
    font-weight: 700;
}

.screen4-item-desc{
    position: absolute;
    left: .4rem;
    top: 5.16rem;
    font-size: .24rem;
    font-weight: 400;
}


/* screen4动画 */
/* .screen4.animate{
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-name: slideInUp;
} */

#fp-nav.fp-right {
    right: 1.2rem !important;
}

#fp-nav ul li a span{
    background-color: #CED9FF !important;
}


#fp-nav ul li a.active span{
    background-color: #A295FF !important;
}

.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: .12rem;
    /* -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px); */
    color: #7B829E;
    background-color: transparent;
    text-align: center;
}

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

.footer .p1 a {
    /* text-decoration: underline; */
    color: #7B829E;
    margin: 0 0.11rem;
}

.footer .p1 a:hover{
    text-decoration: underline;
}

.footer .p2 {
    margin: 0.16rem 0 0;
    font-size: 0.13rem;
    line-height: 1.25;
}


.footer .p2 a {
    display: inline-block;
    color: #7B829E;
    text-decoration: underline;
}

.footer .p2 a:hover {
    text-decoration: underline;
}


/* screen5 */

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

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

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

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

.screen5-item{
   width: 3.2rem;
   height: 3.6rem;
   border-radius: .16rem;
   /* position: relative; */
   color: #000000;
   background-color: #fff;
}

.screen5-item-title{
    width: 100%;
    text-align: center;
    font-size: .24rem;
    font-weight: 700;
    margin-top: .32rem;
}

.screen5-item img{
    width: 2.5rem;
    height: 2.5rem;
    margin: auto;
    margin-top: .14rem;
}

.screen5-item:last-child{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url('../image/screen5-item4-bg.png');
    background-size: 100% 100%;
}

.screen5-item:last-child img{
    width: .52rem;
    height: .52rem;
    margin-bottom: .06rem;
    margin-top: 0;
}

.screen5-item:last-child .screen5-item-title{
    margin-top: 0;
}

.screen5-item:last-child .screen5-item-desc{
    width: 100%;
    text-align: center;
    font-size: .24rem;
    font-weight: 700;
}