html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu {
    margin: 0;
    padding: 0
}

html,body,fieldset,img,iframe,abbr {
    border: 0
}

li {
    list-style: none
}

textarea {
    overflow: auto;
    resize: none
}

a,button {
    cursor: pointer
}

i,em {
    font-style: normal;
}

h1,h2,h3,h4,h5,h6,em,strong,b {
    font-weight: 400;
    font-style: normal
}

a,a:hover {
    text-decoration: none;
}

input,textarea,a,div,button,select {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

input:-webkit-autofill {
    background: transparent;
    transition: background-color 50000s ease-in-out 0s;
    -webkit-text-fill-color: unset;
    color: #333;
}

/* html {
    font-size: calc(100vw / 1920 * 100)!important;
} */
body{
    font: 14px / 24px 'Microsoft YaHei', Arial, Helvetica, sans-serif;
    color: #f8f2dc;    
    background: #22237b;
}
.page{
    width: 100%;
    text-align: center;
}
.header, .part1,.part2,.part3{
    position: relative;
    background-repeat: no-repeat;
    background-position: center top;
}
.btn{
    display: inline-block;
    font-size: 0;
    background: url('../images/btns.png') no-repeat -9999px;
    height: 60px;
    width: 200px;
}
.btn:hover{
    filter: brightness(1.1);
}
.btn.not,.btn.not:hover{
    filter: grayscale(100);
}

.header{
    height: 908px;
    background-image: url('../images/header.jpg');
}
.top-link{
    position: absolute;
    top: 32px;
    left: 50%;
    margin-left: 420px;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    padding: 0 14px;
    background: rgba(39,48,90,.6);
    color: #ead78f;
}
.top-link a{
    font-size: 16px;
    color: #ead78f;
    display: inline-block;
    padding: 0 4px;
}
.top-link a:hover{
    color: #ffd200;
}
.logo{
    display: block;
    position: absolute;
    top: 20px;
    left: 50%;
    width: 233px;
    margin-left: -588px;
}
.intro{
    padding-top: 70px;
    color: #9b96ab;
}
.intro span{
    color: #ffea97;
}
.intro .link{
    color: #ffea97;
    font-weight: bold;
    text-decoration: underline;
}
.part1{
    height: 649px;
    background-image: url('../images/part1.jpg');
}
.gift-box{
    margin-top: 260px;
}
.gift-box b{
    color: #f8f2dc;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
}
.btn-get{
    background-position: 0 0;
    display: block;
    margin: 10px auto;
}
.part2{
    height: 999px;
    background-image: url('../images/part2.jpg');
}
.part2 .intro{
    height: 408px;
    line-height: 21px;
}
.notice{
    width: 408px;
    height: 35px;
    line-height: 35px;
    margin: 0 auto 208px;
    position: relative;
    overflow: hidden;
    color: #ffea97;
}
.notice li span{
    display: inline-block;
    padding-left: 20px;
    background: url('../images/lb.png') no-repeat left center;
}
.btn-moon{
    background-position: 0 -70px;
}
.last{
    padding: 22px 0;
    color: #ffea97;
}
.last .num{
    font-weight: bold;
    font-size: 18px;
}
.btn-award,.btn-edit{
    display: inline-block;
    line-height: 38px;
    border-radius: 20px;
    border: 1px solid #ffea97;
    padding: 0 30px;
    color: #ffea97;
    margin: 0 10px;
    transition: all .2s linear;

}
.btn-award:hover,.btn-edit:hover{
    background: #ffea97;
    color: #333283;
}
.part3{
    height: 940px;
    background-image: url('../images/part3.jpg');
}
.word{
    display: flex;
    justify-content: center;
    margin: 30px 0 40px;
}
.word li{
    width: 120px;   
    position: relative;
    margin: 0 35px;
    filter: grayscale(100);
}
.word li .num{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    right: -10px;
    text-align: center;
    line-height: 40px;
    border-radius: 20px;
    background: url('../images/num.png') no-repeat center / cover;
}
.word li.on{
    filter: grayscale(0);
}
.btn-light{
    background-position: 0 -140px;
}
.exchange{
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.exchange li{
    background-repeat: no-repeat;
    background-size: cover;
    width: 294px;
    height: 294px;
    margin: 0 6px;
    position: relative;
    overflow: hidden;
    color: #ffffff;
}
.exchange li .title{
    padding-top: 39px;
    font-size: 18px; 
    height: 24px;
    font-weight: bold;
    font-family: '创艺简老宋', '宋体';
    margin-bottom: 103px;
}
.exchange li:nth-child(1){
    background-image: url('../images/e1.png');
}
.exchange li:nth-child(2){
    background-image: url('../images/e2.png');
}
.exchange li:nth-child(3){
    background-image: url('../images/e3.png');
}
.btn-exchange{
    background-position: 0 -210px;
    height: 40px;
    width: 120px;
}

.side{
    position: fixed;
    right:60px;
    top: 50%;
    margin-top: -215px;
    width: 160px;
    height: 374px;
    padding-top: 8px;
    background: url('../images/side.png') no-repeat center top;
    overflow: hidden;
    padding-top: 56px;
    font-size: 14px;
}
.side .item{
    text-align: center;
    color: #ffca4a;
    line-height: 20px;
    height: 185px;
}
.side .st{
    color: #dcc895;
    margin: 10px 0 5px;
}


.twpop{
    z-index: 100;
    position: relative;
}
.twpop .twpop-main{
    background-color: #2a265f; 
    color: #ffea97; 
    border:2px solid #353170; 
    border-radius: 0;
}
.twpop .twpop-title{
    color: #ffea97;
    font-size: 16px;
    font-weight: bold;
    border-color: #353170;
}
.twpop .twpop-close {
    background: url('../images/close.png') no-repeat center / 20px;
}
.twpop .twpop-btn{
    color: #80280a; 
    border-color: #ffd33d; 
    border-radius: 20px; 
    font-size: 16px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    padding: 0 50px;
    background: #ffd96d; 
    background: -webkit-linear-gradient(linear,top,from(#ffd948),to(#ffdb85));
    background: linear-gradient(#ffd948, #ffdb85);
}
.twpop .twpop-from-bd{
    background-color: #fff;
}
.gray {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}


.twpop-list li{text-align: left; display: flex;justify-content: space-between; align-items: center; padding: 4px;}



@media screen and (min-width:320px) and (max-width: 1024px) {
    html{
        font-size: calc(100vw/7.5)!important;
    }
    body{
        font-size: .22rem;
        line-height: .3rem;
    }
    .logo{
        display: block;
        position: absolute;
        top: .15rem;
        left: .25rem;
        width: 1.84rem;
        margin: 0;
    }
    .logo{
        display: block;
        width: 1.84rem;
    }
    .side{
        display: none;
    }
    .top-link{
        top: .85rem;
        left: auto;
        right: .2rem;
        margin-left: 0;
        height: .5rem;
        line-height: .5rem;
        border-radius: .25rem;
        padding: 0 .18rem;
    }
    .top-link a{
        font-size: .24rem;
        padding: 0 .06rem;
    }
    .top-link .pc{
        display: none;
    }
    #username{
        display: inline-block;
        max-width: 1.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
    #role_info{
        display: inline-block;
        max-width: 2.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
    .page{
        width: 7.5rem;
    }
    .page img{
        display: block;
        width: 100%;
    }
    .btn{
        background-repeat: no-repeat;
        background-size: 2rem 2.5rem;
        width: 2rem;
        height: .6rem;
    }
    .header,.part1,.part2,.part3{
        background-size: cover;
    }
    .header{
        height: 7.67rem;
        background-image: url('../images/wap/header.jpg');
    }
    .part1{
        height: 7.07rem;
        background-image: url('../images/wap/part1.jpg');
    }
    .part2{
        height: 11.66rem;
        background-image: url('../images/wap/part2.jpg');
    }
    .part3{
        height: 13.6rem;
        background-image: url('../images/wap/part3.jpg');
    }
    .intro{
        width: 7.4rem;
        margin: 0 auto;
        padding-top: .9rem;
    }
    .gift-box{
        margin-top: 2.82rem;
    }
    .gift-box b{
        font-size: .22rem;
    }
    .btn-get{
        margin: .12rem auto;
    }
    .part2 .intro{
        height: 5.45rem;
        font-size: .2rem;
        line-height: .34rem;
    }
    .notice{
        height: .41rem;
        line-height: .41rem;
        margin: 0 auto 1.97rem;
        font-size: .18rem;
    }
    .notice li span{
        padding-left: .22rem;
        background-size: .16rem auto;
    }
    .btn-moon{
        background-position: 0 -.7rem;
    }
    .last{
        padding: .2rem 0 .23rem;
    }
    .last .num{
        font-size: .22rem;
    }
    .btn-award,.btn-edit{
        display: inline-block;
        line-height: .48rem;
        border-radius: .24rem;
        padding: 0 .38rem;
        margin: 0 .15rem;
    }
    .word{
        margin: .2rem 0 .44rem;
    }
    .word li{
        width: 1.2rem;
        margin: 0 .3rem;
    }
    .word li .num{
        width: .4rem;
        height: .4rem;
        line-height: .4rem;
        top: .1rem;
        right: -.1rem;
        font-size: .16rem;
    }
    .btn-light{
        background-position: 0 -1.4rem;
    }
    .exchange{
        margin-top: .3rem;
        flex-wrap: wrap;
    }
    .exchange li{
        width: 2.94rem;
        height: 2.94rem;
        margin: 0 .26rem .06rem;
        background-size: cover;
    }
    .exchange li .title{
        padding-top: .39rem;
        font-size: .22rem; 
        height: .24rem;
        margin-bottom: 1.03rem;
    }
    .btn-exchange{
        background-position: 0 -2.1rem;
        height: .4rem;
        width: 1.2rem;
    }
    .twpop .twpop-btn{
        border-radius: .3rem; 
        font-size: .24rem;
        font-weight: bold;
        height: .54rem;
        line-height: .54rem;
        padding: 0 .3rem;
    }
}