@charset "utf-8";
/*-----------------初始化---------------------*/


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

* {
    margin: 0;
    padding: 0
}


ul,
ol,
li {
    list-style: none;
}

em,
i,
var {
    font-style: normal;
}

a {
    text-decoration: none;
    color: #333;
}

a:active {
    opacity: .9;
}

img {
    border: 0 none;
    display: inherit;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    backface-visibility: hidden;
}

html {
    font-size: calc(100vw/7.5);
    height: 100%;
}

body {
    color: #333;
    font-family: "microsoft yahei", Arial, Helvetica, sans-serif;
    font-size: .28rem;
    line-height: .4rem;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    position: relative;
    height: 100%;
    background: #fff;
}

input[type=text],
input[type=password],
input[type=email],
input[type=tel],
select,
textarea {
    font-size: .28rem;
    line-height: .4rem;
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
}

.clear:after {
    content: '\20';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.mt10 {
    margin-top: .1rem;
}

.mt20 {
    margin-top: .2rem;
}

.mt30 {
    margin-top: .3rem;
}

.mt60 {
    margin-top: .6rem;
}

.btn_grey {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

/* 内容 */
.container {
    width: 7.5rem;
    height: 100%;
    margin: 0 auto;
}

.home_btn {
    display: none;
    position: absolute;
    top: .4rem;
    right: .3rem;
    width: 1.12rem;
    height: 1.12rem;
    background: url(../img/home_btn.png) no-repeat 0 0/100% 100%;
    text-indent: -999em;
    z-index: 10;
}

.side_nav {
    position: absolute;
    bottom: .38rem;
    left: .38rem;
    z-index: 10;
}

.side_nav a {
    display: block;
    width: 1.55rem;
    height: 1rem;
    background: url(../img/nav.png) no-repeat 0 0/100% auto;
    float: left;
    margin-right: .18rem;
    text-indent: -999em;
}

.side_nav a:nth-child(2) {
    background-position: 0 0;
}

.side_nav a:nth-child(2).active {
    background-position: 0 -1rem;
}

.side_nav a:nth-child(3) {
    background-position: 0 -2rem;
}

.side_nav a:nth-child(3).active {
    background-position: 0 -3rem;
}

.side_nav a:nth-child(4) {
    background-position: 0 -4rem;
}

.side_nav a:nth-child(4).active {
    background-position: 0 -5rem;
}

.side_nav a:nth-child(5) {
    background-position: 0 -6rem;
}

.side_nav a:nth-child(5).active {
    background-position: 0 -7rem;
}

.page {
    height: 100%;
    background: url(../img/bg.jpg) no-repeat center top/cover;
    overflow: hidden;
    position: relative;
}

/* page1 */
.ren {
    position: absolute;
    left: 0;
    top: 1.4rem;
    width: 7.38rem;
}

.review_tit {
    position: absolute;
    left: .5rem;
    bottom: 3.2rem;
    font-size: .28rem;
    color: #b8ade7;
}

.review {
    background-color: rgba(36, 41, 66, .5);
    height: .64rem;
    line-height: .64rem;
    width: 6.4rem;
    border: 1px solid #7f74af;
    border-radius: 5px;
    position: absolute;
    left: .5rem;
    bottom: 2.4rem;
    color: #fff;
    text-indent: .2rem;
    font-size: .22rem;
    z-index: 10;
}

.review::after {
    content: "\20";
    display: block;
    position: absolute;
    top: 50%;
    right: .2rem;
    width: .31rem;
    height: .16rem;
    margin-top: -.08rem;
    background: url(../img/more.png) no-repeat center top/100% 100%;
}

.review:hover::after {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.dropdown {
    display: none;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: .64rem;
    background-color: rgba(36, 41, 66, .5);
    border-radius: 5px;
    border: 1px solid #7f74af;
    padding: .2rem 0;
}

.dropdown li {
    height: .5rem;
    line-height: .5rem;
    overflow: hidden;
}

.dropdown li a {
    display: block;
    color: #b8ade7;
}

.dropdown li a:hover {
    color: #fff;
    background-color: #7f74af;

}

.review:hover .dropdown {
    display: block;
}

/* page2 */
.title {
    position: absolute;
    top: 1.5rem;
    left:.2rem;
    width: 7.09rem;
}

.userbox {
    position: absolute;
    top: 2.5rem;
    left: .25rem;
    width: 7.06rem;
    height: 8.2rem;
    background: url(../img/userbox.png) no-repeat center/100% 100%;
}

.swiperbox {
    position: absolute;
    top: 1.05rem;
    left: .8rem;
    width:1.88rem;
    height: 2.56rem;
    border: solid 1px #a89cc6;
    padding: 2px;
    background: #d6cece;
}

.swiper-container-user {
    width: 1.88rem;
    height: 2.56rem;
}

.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-info {
    position: absolute;
    bottom: 0;
    left: .7rem;
    z-index: 10;
}

.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-info span {
    width: .18rem;
    height: .18rem;
    display: inline-block;
    background: url(../img/pagination-info.png) no-repeat 0 0/200% 100%;
    opacity: 1;
    margin: 0 1px;
}

.swiper-container-horizontal .swiper-pagination-info span.swiper-pagination-bullet-active {
    background-position: -.18rem 0;

}

.userdpsbox {
    display: block;
    width:1.88rem;
    height: 2.56rem;
}
.userdpsbox img{
    width: 100%;
    height: 100%;
}

.user_info {
    position: absolute;
    top:.9rem;
    left: 3.1rem;
    color: #4c3f81;
    font-size: .26rem;
    line-height: .48rem;
}
/* page3 */
.gamebox{
    position: absolute;
    width: 5.48rem;
    height: 7.84rem;
    top:2.8rem;
    left: 1rem;  
    border: solid 1px #a89cc6;
    padding: 2px;  
}

.game_imgbox{
    width: 100%;
    height:100% ;
}
.game_imgbox img{
    display: block;
    width: 100%;
    height:100% ;
}

.swiper-prev{
    position: absolute;
    top: 50%;
    left: -.8rem;
    margin-top: -.4rem;
    display: block;
    width: .91rem;
    height: .8rem;
    background: url(../img/next.png) no-repeat 0 0/100% 100%;
    cursor: pointer;

}
.swiper-next{
    position: absolute;
    top: 50%;
    right: -.8rem;
    margin-top: -.4rem;
    display: block;
    width: .91rem;
    height: .8rem;
    background: url(../img/next.png) no-repeat 0 0/100% 100%;
    cursor: pointer;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
.swiper-button-disabled{
    opacity: .3;
}

/* page4 */
.exchange_box{
    position: absolute;
    top: 2.8rem;
    left: .38rem;
    width: 6.75rem;
    height: 7.96rem ;
    background: url(../img/exchange_bg.png) no-repeat 0 0/100% 100%;

}
.exchange_scroll{
    margin:.6rem .3rem;
    height: 6.8rem;
    overflow-y: auto;
}

.questions{
    font-size: .22rem;
    color: #fefeff;
    line-height: .34rem;
    margin-bottom: .3rem;
}
.questions dd{
    float: left;
    width: 1.04rem;
    line-height: .38rem;
    border: solid 1px #a89cc6;
    color: #a89cc6;
    border-radius: 3px;
    text-align: center;
    margin-right: .1rem;
}
.questions dt{
    overflow: hidden;
}

.answer{
    font-size: .22rem;
    color: #ffea9c;
    line-height: .34rem;
    margin-bottom: .3rem;
}
.answer dd{
    float: left;
    width: 1.04rem;
    line-height: .38rem;
    border: solid 1px #ffea9c;
    color: #ffea9c;
    border-radius: 3px;
    background: rgba(255, 234, 156,.3);
    text-align: center;
    margin-right: .1rem;
}
.answer dt{
    overflow: hidden;
}

/* page5 */
.giftbag1{
    position: absolute;
    top: 2.8rem;
    left: .38rem;
    width: 6.73rem;
    height: 3.8rem;
    background: url(../img/giftbag1.png) no-repeat 0 0/100% 100%;
}
.giftbag2{
    position: absolute;
    top: 6.95rem;
    left: .38rem;
    width: 6.73rem;
    height: 3.81rem;
    background: url(../img/giftbag2.png) no-repeat 0 0/100% 100%;
}