* {
  margin: 0;
  padding: 0;
}

.pages {
  position: relative;
  height: 43.88rem;
  background: url(../image/page-bgc.jpg) no-repeat;
  background-size: 100% auto;
  max-width: 750px;
  margin: 0 auto;
}

img {
  display: block;
  width: 100%;
  margin: 0 auto;
  image-rendering: pixelated;
}

.pages .header {
  height: .74rem;
  background: url(../image/header-bg.png) no-repeat;
  background-size: 100% auto;
  padding: 0 .3rem;
  box-sizing: border-box;
}

.pages .header .logo {
  width: 1.62rem;
  height: .47rem;
  background: url(../image/logo.png) no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: .13rem;
}

.pages .header .slide {
  width: 3.5rem;
  height: .5rem;
  position: absolute;
  left: 2rem;
  top: .15rem;
}

.pages .header .slide .speaker {
  width: .24rem;
  height: .29rem;
  background: url(../image/speaker.png) no-repeat;
  background-size: 100% auto;
  float: left;
  margin-top: .1rem;
}

.pages .header .slide .dot {
  width: 0.09rem;
  height: .27rem;
  background: url(../image/three-dot.png) no-repeat;
  background-size: 100% auto;
  float: left;
  margin-top: .1rem;
}

.pages .header .slide .swiper-notice {
  overflow: hidden;
  width: 3rem;
  height: .45rem;
  line-height: .45rem;
  background: url(../image/speaker-content-bg.png) no-repeat;
  background-size: 100% auto;
  float: right;
  font-size: .18rem;
  padding-left: .2rem;
  box-sizing: border-box;
}
.pages .header .slide .swiper-notice .swiper-slide{
  color: #000;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pages .header .line {
  width: 0.02rem;
  height: .5rem;
  background-color: #949494;
  position: absolute;
  top: .12rem;
  right: 1.8rem;
}

.pages .header .lang-box {
  position: absolute;
  right: .2rem;
  top: .12rem;
  width: 1.6rem;
  line-height: .5rem;
  height: .5rem;
  text-align: center;
  color: #949494;
  border: none;
  outline: none;
}

.pages .header .lang-box .lang-current {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: .5rem;
  height: .5rem;
  z-index: 2;
}

.pages .header .lang-box .lang-list {
  position: absolute;
  top: .6rem;
  right: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  z-index: 30;
  transition: all .3s ease;
  background: rgba(0, 0, 0, .95);
}

.pages .header .lang-box.open .lang-list {
  height: auto;
  transition: all .3s ease;
}

.pages .header .lang-box .lang-list .item {
  width: 100%;
  text-align: center;
  display: block;
  color: #fff;
  line-height: .5rem;
  height: .5rem;
}

.pages .main {
  position: relative;
  box-sizing: border-box;
}

.pages .main .page-item {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.pages .main .page-item .top-info {
  position: relative;
  font-size: .2rem;
  color: #acdbff;
  box-sizing: border-box;
  padding: 0 .3rem;
}

.pages .main .page-item.prizes-activity .top-info {
  position: absolute;
  top: 1.3rem;
  left: 0;
  width: 100%;
}

.pages .main .page-item.cards-activity .top-info {
  position: absolute;
  top: 1.3rem;
  left: 0;
  width: 100%;
}

.pages .main .page-item .top-info .desc-top {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.pages .main .page-item .top-info .desc-bottom {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.pages .main .page-item .top-info .left {
  float: left;
}

.pages .main .page-item .top-info .unline {
  text-decoration: underline;
}

.pages .main .page-item .top-info .right {
  float: right;
}

.main .top-title {
  text-align: center;
  font-size: .24rem;
  margin-top: .1rem;
  color: #fff;
}

.login-info-title {
  display: none;
}

.main .top-title .bind {
  padding: 0 .1rem;
  text-decoration: underline;
}

.main .top-title .login-out {
  text-decoration: underline;
}

/* 抽奖活动 */

.main .prizes-activity {
  margin: .2rem 0;
}

.main .prizes-activity .prizes-title {
  /* width: 0.09rem; */
  height: .68rem;
  background: url(../image/prize-title.png) no-repeat;
  background-size: 100% auto;
}

.main .prizes-activity .prizes-content {
  height: 8.82rem;
  background: url(../image/prizes-pan-bg.png) no-repeat center;
  background-size: 100% auto;
  margin-top: -1.2rem;
  position: relative;
}

.main .prizes-activity .prizes-content .btn {
  font-size: .2rem;
  color: #acdbff;
  margin-top: .7rem;
  position: absolute;
  width: 100%;
}

.main .prizes-activity .prizes-content .btn .prizes-list {
  text-decoration: underline;
}

.main .prizes-activity .prizes-content .btn .search-probability {
  float: right;
  margin-top: .1rem;
  color: #acdbff;
  text-decoration: underline;
}

.main .prizes-activity .prizes-content .top {
  position: absolute;
  /* left: 2.7rem; */
  width: 100%;
  top: 3.2rem;
}

.main .prizes-activity .prizes-content .top img {
  width: 3.11rem;
  height: 2.7rem;
  background-size: 100% auto;
}

.main .prizes-activity .prizes-content .top .swiper-container {
  width: 4rem;
  height: 3.3rem;
  text-align: center;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: .4rem!important;
}

.prizes-activity .prizes-content .top .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet {
  display: inline-block;
  width: .21rem !important;
  height: .23rem !important;
  background: url(../image/icon-start.png) no-repeat center center;
  background-size: 100% auto;
  opacity: 1!important;
}

/*分页器选中*/

.prizes-activity .prizes-content .top .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  display: inline-block !important;
  width: .21rem !important;
  height: .23rem !important;
  background: url(../image/icon-start-c.png) no-repeat center center;
  background-size: 100% auto;
  opacity: 1!important;
}

.main .prizes-activity .prizes-content .bottom {
  position: absolute;
  bottom: .6rem;
  left: .05rem;
}

.main .prizes-activity .prizes-content .bottom .bottom-swiper-container {
  width: 7.4rem;
  margin: 0 auto;
  overflow: hidden;
}

.prizes-activity .prizes-content .bottom .swiper-button-prev, .prizes-activity .prizes-content .bottom .swiper-button-next {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: url(../image/left-arrow.png) no-repeat center center;
  background-size: 100% auto;
  cursor: none;
}

.prizes-activity .prizes-content .bottom .swiper-button-prev {
  left: .2rem;
  margin-top: -.6rem;
}

.prizes-activity .prizes-content .bottom .swiper-button-next {
  background: url(../image/right-arrow.png) no-repeat center center;
  background-size: 100% auto;
  right: .2rem;
  margin-top: -.6rem;
}

.main .prizes-activity .prizes-content .bottom img {
  width: 7.4rem;
  height: 1.85rem;
}

.main .prizes-activity .prizes-content .bottom-text {
  position: absolute;
  bottom: .35rem;
  width: 5rem;
  height: .5rem;
  left: 1.2rem;
  z-index: 2;
  text-align: center;
}

.main .prizes-activity .prizes-content .bottom-text .btn-start {
  margin: 0 auto;
  width: 1.49rem;
  height: .38rem;
  color: #ffbc0d;
  font-size: .34rem;
  font-weight: bold;
}

/* 集卡活动 */

.main .cards-activity {
  margin-top: .6rem;
}

.main .cards-activity .cards-title {
  height: .68rem;
  background: url(../image/cards-title.png) no-repeat;
  background-size: 100% auto;
}

.main .cards-activity .cards-content {
  height: 10.15rem;
  background: url(../image/cards-pan-bg.png) no-repeat 0 -.6rem;
  background-size: 100% auto;
  margin-top: -1.2rem;
  position: relative;
}

.main .cards-activity .cards-content .btn {
  font-size: .2rem;
  color: #fff;
  margin: 1.2rem 0;
}

.main .cards-activity .cards-content .btn .search-probability {
  margin-top: .1rem;
}

.curent-score {
  text-align: center;
  font-size: .28rem;
  font-weight: 700;
}

.main .cards-activity .cards-content .btn .search-package {
  width: 1.77rem;
  height: .55rem;
  background: url(../image/cards-btn-bg.png) no-repeat;
  margin-left: .2rem;
  text-align: center;
  line-height: .55rem;
  margin: .2rem auto;
}

.main .cards-activity .cards-content .top-arrow {
  position: absolute;
  width: 1.06rem;
  height: .79rem;
  background-size: 100% auto;
  top: 5.2rem;
  left: 50%;
  transform: translate(-50%);
  z-index: 2;
}

.main .cards-activity .cards-content .bottom-arrow {
  position: absolute;
  width: 1.06rem;
  height: .79rem;
  background-size: 100% auto;
  top: 2.8rem;
  left: 50%;
  transform: translate(-50%);
  z-index: 2;
}

.main .cards-activity .cards-content .top {
  position: absolute;
  left: 1.3rem;
  top: 3rem;
}

.main .cards-activity .cards-content .top .cards-swiper-container {
  width: 4.9rem;
  overflow: hidden;
}

.main .cards-activity .cards-content .top .cards-swiper-container .swiper-slide {
  width: 1.87rem!important;
  height: 2.57rem!important;
}

.main .cards-activity .cards-content .top img {
  width: 1.87rem;
  height: 2.56rem;
  background-size: 100% auto;
}

.main .cards-activity .cards-content .top .name {
  font-size: .12rem;
  color: #fff;
  text-align: center;
  width: 1.87rem;
  height: .28rem;
  line-height: .28rem;
  position: absolute;
  bottom: 0.08rem;
  left: 0;
}

.main .cards-activity .cards-content .btn-rightnow-cards {
  width: 2.03rem;
  height: .6rem;
  position: absolute;
  bottom: 3.2rem;
  left: .75rem;
}

.main .cards-activity .cards-content .btn-exchange-prizes {
  width: 1.9rem;
  height: .87rem;
  position: absolute;
  bottom: 3.1rem;
  left: 2.8rem;
}

.main .cards-activity .cards-content .btn-ten-prizes {
  width: 2.03rem;
  height: .6rem;
  position: absolute;
  bottom: 3.2rem;
  right: .75rem;
}

.main .cards-activity .cards-info {
  width: 6.6rem;
  height: 2rem;
  position: absolute;
  bottom: .8rem;
  left: 50%;
  margin-left: -3.3rem;
  font-size: .18rem;
  color: #acdbff;
}

.main .cards-activity .one-hundred {
  width: 3.09rem;
  height: .61rem;
  position: absolute;
  top: .2rem;
  left: .1rem;
}

.main .cards-activity .five-hundred {
  width: 3.09rem;
  height: .61rem;
  position: absolute;
  top: .2rem;
  right: .1rem;
}

.main .cards-activity .one-hundred-chance {
  position: absolute;
  top: .9rem;
  text-align: center;
  left: .1rem;
  width: 3.09rem;
}

.main .cards-activity .five-hundred-chance {
  position: absolute;
  width: 3.09rem;
  top: .9rem;
  text-align: center;
  right: .1rem;
}

.main .cards-activity .tip {
  position: absolute;
  width: 100%;
  bottom: .1rem;
  text-align: center;
  left: 0;
}

.module-title {
  width: 7.5rem;
  box-sizing: border-box;
  padding: 0 .3rem;
  margin: .2rem auto;
  height: .68rem;
  position: relative;
}

.activity-rule {
  color: #acdbff;
  word-break: break-all;
  margin-bottom: .2rem;
}

.activity-rule .main {
  width: 6.69rem;
  margin: .4rem auto auto;
  position: relative;
  height: 8.42rem;
  overflow-y: auto;
}

/* 做任务活动 */

.main .task-activity .task-content {
  background: url(../image/p2-task-bg.png) no-repeat center;
  background-size: 100% auto;
  width: 7.5rem;
  height: 9.61rem;
  overflow: hidden;
  position: relative;
}

.main .task-activity .task-content .box {
  width: 6.23rem;
  margin: .6rem auto auto auto;
  position: relative;
  overflow: hidden;
}

.main .task-activity .task-content .box .item {
  background: url(../image/p2-task-item.png) no-repeat;
  background-size: 100% auto;
  font-size: .2rem;
  color: #fff;
  box-sizing: border-box;
  width: 6.23rem;
  height: .65rem;
  padding: 0 .2rem;
  position: relative;
  line-height: .65rem;
  margin-top: .2rem;
}

.main .task-activity .task-content .box .item .left{
  width: 3.3rem;
  display: inline-block;
  overflow: hidden;
  line-height: .28rem;
}

.main .task-activity .task-content .box .tip {
  font-size: .18rem;
  margin-top: .1rem;
  color: #94b6ff;
}

.main .task-activity .task-content .title {
  color: #ede5d0;
  font-size: .24rem;
  text-align: center;
  width: 2.5rem;
  margin: .3rem 0;
  height: .42rem;
  line-height: .42rem;
  border: 1px solid #9c7845;
}

.main .task-activity .task-content .title.t2 {
  border: 1px solid #80a0e6;
  color: #80a0e6;
}

.main .task-activity .task-content .box .right {
  float: right;
}

.main .task-activity .task-content .box .right a {
  color: #efc124;
  margin-left: .1rem;
  text-decoration: underline;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2rem;
  font-size: .2rem;
}

.footer .link {
  text-align: center;
}

.footer .link a {
  color: #fff;
}

.footer .link a:nth-child(2) {
  margin: 0 .4rem;
}

.brand {
  height: .7rem;
  margin-top: .3rem;
}

.brand .yoozoo {
  width: 1.1rem;
  height: .65rem;
  background: url(../image/yoozoo-logo.png) no-repeat center center;
  background-size: 100% auto;
  float: left;
  margin-left: .8rem;
}

.brand .gtarcade {
  width: 1.45rem;
  height: .65rem;
  background: url(../image/gtarcade-logo.png) no-repeat center center;
  background-size: 100% auto;
  float: left;
  margin-left: .6rem;
}

.brand .tencent {
  width: 2.26rem;
  height: .65rem;
  background: url(../image/tencent-logo.png) no-repeat center center;
  background-size: 100% auto;
  float: right;
  margin-right: .7rem;
}

.footer .date {
  width: 4.82rem;
  height: .21rem;
  background: url(../image/date.png) no-repeat center center;
  background-size: 100% auto;
  margin: .2rem auto;
}

/* 蒙层 */

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .75);
  display: none;
  z-index: 99;
}

/* 弹框 */

.dialog {
  width: 6.65rem;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 101;
}

.close {
  width: .37rem;
  height: .37rem;
  background: url(../image/pop-close.png) no-repeat;
  background-size: 100% auto;
  position: absolute;
  right: -.1rem;
  top: -.1rem;
}

/* 奖池内容弹框 */

.prizes-list-dialog {
  width: 6.65rem;
  height: 9.34rem;
  background: url(../image/pop-jcnr.png) no-repeat;
  background-size: 100% auto;
}

.dialog .pop-title {
  color: #e8c58f;
  font-size: .4rem;
  font-weight: bold;
  margin: .4rem auto auto;
  text-align: center;
}

.dialog .main {
  width: 5.5rem;
  margin: .3rem auto;
}

/* 抽奖概率弹框 */

.prizes-probability-dialog {
  background: url(../image/pop-jcnr.png) no-repeat;
  background-size: 100% auto;
  width: 6.65rem;
  height: 9.34rem;
}

.prizes-probability-dialog .main {
  height: 8rem;
  width: 5.5rem;
  margin: .3rem auto;
  overflow-y: auto;
}

.rightnow-prizes-dialog {
  height: 4.34rem;
  background: url(../image/pop-ljck-bg.png) no-repeat;
  background-size: 100% auto;
}

.rightnow-prizes-dialog .prizes {
  width: 1.4rem;
  height: 1.4rem;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
}

.rightnow-prizes-dialog .prizes .name{
  font-size: .16rem;
  color: #adceff;
  text-align: center;
  width: 4rem;
  margin-left: -1.4rem;
}

.rightnow-prizes-dialog .prizes.prizes1 {
  background-position: -2.8rem -1.5rem;
}

.rightnow-prizes-dialog .prizes.prizes2 {
  background-position: -4.2rem -1.5rem;
}

.rightnow-prizes-dialog .prizes.prizes3 {
  background-position: 0 -6.3rem;
}

.rightnow-prizes-dialog .prizes.prizes4 {
  background-position: -1.5rem -6.3rem;
}

.rightnow-prizes-dialog .prizes.prizes5 {
  background-position: 0 -3.1rem;
}

.rightnow-prizes-dialog .prizes.prizes6 {
  background-position: -1.4rem -3.1rem;
}

.rightnow-prizes-dialog .prizes.prizes7 {
  background-position: -4.2rem -3.1rem;
}

.rightnow-prizes-dialog .prizes.prizes8 {
  background-position: -2.8rem -3.1rem;
}

.rightnow-prizes-dialog .prizes.prizes9 {
  background-position: 0 -4.7rem;
}

.rightnow-prizes-dialog .prizes.prizes10 {
  background-position: 0 -1.5rem;
}

.rightnow-prizes-dialog .prizes.prizes11 {
  background-position: -3.1rem ;
}

.rightnow-prizes-dialog .prizes.prizes12 {
  background-position: 0 0;
}

.rightnow-prizes-dialog .prizes.prizes13 {
  background-position: 0 0;
}

.rightnow-prizes-dialog .prizes.prizes14 {
  background-position: 0 0;
}

.rightnow-prizes-dialog .prizes.prizes15 {
  background-position: 0 0;
}

.rightnow-prizes-dialog .prizes.prizes16 {
  background-position: 0 0;
}

.rightnow-prizes-dialog .prizes.prizes17 {
  background-position: 0 0;
}

.rightnow-prizes-dialog .prizes.prizes18 {
  background-position: 0 0;
}

.rightnow-prizes-dialog .save-pack {
  width: 1.66rem;
  height: .51rem;
  position: absolute;
  bottom: .3rem;
  left: 50%;
  transform: translate(-50%);
}

.cards-probability-dialog {
  height: 5.44rem;
}


.cards-package-dialog {
  height: 4.94rem;
  background: url(../image/pop-card-bg.png) no-repeat;
  background-size: 100% auto;
}

.cards-package-dialog .cards-total-count {
  background: url(../image/tag-bg.png) no-repeat;
  background-size: 100% auto;
  width: 2.26rem;
  height: .36rem;
  line-height: .36rem;
  text-align: center;
  font-size: .16rem;
  color: #fff;
  margin: .2rem auto;
}

.cards-package-dialog .list {
  margin-top: .2rem;
  overflow: hidden;
}

.cards-package-dialog .list .item {
  font-size: 0;
  float: left;
  margin-left: .13rem;
  position: relative;
}

.cards-package-dialog .list .item .img {
  width: 1.18rem;
  height: 1.63rem;
  background-size: 1.18rem 1.63rem;
}

.cards-package-dialog .list .item .num {
  width: .3rem;
  height: .3rem;
  line-height: .3rem;
  border-radius: 50%;
  border: 1px solid #e19432;
  margin: .1rem auto;
  text-align: center;  
  color: #fff;
  font-size: .18rem;
}

.cards-package-dialog .list .item .name{
  font-size: .12rem;
  color: #fff;
  text-align: center;
  width: 100%;
  height: .28rem;
  line-height: .28rem;
  position: absolute;
  bottom: 0.55rem;
  left: 0;
}

.cards-package-dialog .list .item .num span {
  color: #fff;
  font-size: .18rem;
}

.cards-package-dialog .btn {
  margin-top: .2rem;
  overflow: hidden;
}

.cards-package-dialog .btn .btn-item {
  width: 1.66rem;
  height: .51rem;
  margin: .1rem auto;
  float: left;
  margin-left: .4rem;
}

.cards-package-dialog .btn .click-prizes {
  position: relative;
}

.cards-package-dialog .btn .nums {
  width: .3rem;
  height: .3rem;
  text-align: center;
  line-height: .3rem;
  background: url(../image/cards-nums.png) no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -.1rem;
  right: -.1rem;
}

.cards-package-dialog .btn .nums span {
  color: #fff;
  font-size: .18rem;
}

.search-prizes-record,.search-card-record,.friend-record{
  width: 6.65rem;
  height: 6.44rem;
  background: url(../image/pop-cjjl.png) no-repeat;
  background-size: 100% auto;
}

.search-prizes-record .title,.friend-record .title,.search-card-record .title{
  position: absolute;
  left: .4rem;
  top: 1rem;
  line-height: .5rem;
  width: 5.85rem;
}

.search-prizes-record .title .left ,.friend-record .title .left,.search-card-record .title .left{
  float: left;
  font-size: .2rem;
  color: #acdbff;
}

.search-prizes-record .title .search-prizes ,.friend-record .title .back-activity,.search-card-record .title .search-card{
  width: 1.7rem;
  height: .46rem;
  float: right;
  margin-left: 2rem;
}

.search-prizes-record .record-list,.friend-record .record-list,.search-card-record .record-list{
  width: 5.5rem;
  height: 4.27rem;
  position: absolute;
  top: 1.62rem;
  left: .56rem;
}

.search-prizes-record .record-list .list,.friend-record .record-list .list,.search-card-record .record-list .list{
  height: 3.7rem;
  overflow-y: auto;
  width: 100%;
}

.record-list .item span{
  display: inline-block;
  font-size: .2rem;
  color: #fff;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  margin-bottom: .15rem;
}
.record-list .item span.s1{
  width: 1.2rem;
  font-size: .2rem;
  color: #fff;
  margin-bottom: .15rem;
  margin-right: .15rem;
}

.record-list .item span.s2{
  width: 2rem;
  font-size: .2rem;
  color: #fff;
  margin-bottom: .15rem;
  margin-right: .15rem;
}

.record-list .item span.s3{
  width: 1.8rem;
  font-size: .2rem;
  color: #fff;
  margin-bottom: .15rem;
}

.prizes-package-dialog {
  height: 4.94rem;
  background: url(../image/personal-prizes-package-bg.png);
  background-size: 100% auto;
}

.prizes-package-dialog .title {
  font-size: .24rem;
  color: #fff;
  text-align: center;
  margin-top: 1.2rem;
}

.prizes-package-dialog .list {
  height: 2.3rem;
  width: 5.8rem;
  margin: .2rem auto;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
}

.prizes-package-dialog .list .items {
  margin: .2rem;
}

.prizes-package-dialog .footer-btn {
  margin-left: 1.5rem;
}

.prizes-package-dialog .footer-btn .left {
  width: 1.66rem;
  height: .51rem;
  background: url(../image/search-prizes-record.png) no-repeat;
  background-size: 100% auto;
  float: left;
}

.prizes-package-dialog .footer-btn .right {
  width: 1.66rem;
  height: .51rem;
  background: url(../image/back-prizes.png) no-repeat;
  background-size: 100% auto;
  float: left;
  margin-left: .3rem;
}

/* 立即抽卡 */

.rightnow-cards-dialog {
  height: 3.94rem;
  background: url(../image/rightnow-cards-dialog-bg.png) no-repeat;
  background-size: 100% auto;
}

.rightnow-cards-dialog .prizes {
  width: 1.87rem;
  height: 2.57rem;
  position: absolute;
  left: 50%;
  top: 45%;
  margin-top: -1.3rem;
  margin-left: -.94rem;
  transform-style: preserve-3d;
  transition: transform .3s .3s ease-in-out;
}

.rightnow-cards-dialog .name{
  font-size: .12rem;
  color: #fff;
  text-align: center;
  width: 1.87rem;
  height: .28rem;
  line-height: .28rem;
  position: absolute;
  bottom: 0.94rem;
  left: 50%;
  margin-left: -.935rem;
  display: none;
}

.rightnow-cards-dialog .prizes.flipped {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.rightnow-cards-dialog .prizes .result-img{
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.rightnow-cards-dialog .prizes img {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 260px;
  text-align: center;
  font-weight: bold;
  font-size: 140px;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.rightnow-cards-dialog .cards-save-pack {
  width: 1.86rem;
  height: .51rem;
  position: absolute;
  bottom: .2rem;
  left: 50%;
  transform: translate(-50%);
}

.ten-prizes-dialog {
  height: 4.83rem;
  background: url(../image/pop-10.png) no-repeat;
  background-size: 100% auto;
}

.ten-prizes-dialog .list {
  margin-top: .2rem;
  padding: .2rem;
  overflow: hidden;
  position: relative;
}

.ten-prizes-dialog .list .item {
  float: left;
  margin-right: .08rem;
  margin-bottom: .1rem;
  width: 1.18rem;
  height: 1.63rem;
  transform-style: preserve-3d;
  transition: transform .3s .3s ease-in-out;
}

.ten-prizes-dialog .list .item:nth-child(5n+0){
  margin-right: 0;
}

.ten-prizes-dialog .list.active .item{
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.ten-prizes-dialog .list .item .name{
  display: none;
  font-size: .12rem;
  color: #fff;
  text-align: center;
  width: 100%;
  height: .2rem;
  line-height: .2rem;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
}

.ten-prizes-dialog .list.active .item .name{
  display: block;
}

.ten-prizes-dialog .list .item .result-img{
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.ten-prizes-dialog .list .item img {
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}


.ten-prizes-dialog .save-pack {
  width: 1.66rem;
  height: .51rem;
  position: absolute;
  bottom: .3rem;
  left: 50%;
  transform: translate(-50%);
}

.fivehundred-assign-cards-dialog {
  height: 7.73rem;
  background: url(../image/pop-500.png) no-repeat;
  background-size: 100% auto;
}

.fivehundred-assign-cards-dialog .pop-title {
  margin-top: .2rem;
}

.fivehundred-assign-cards-dialog .main {
  width: 6rem;
}

.fivehundred-assign-cards-dialog .list {
  margin-top: .2rem;
  overflow: hidden;
  text-align: center;
  position: relative;
}

.fivehundred-assign-cards-dialog .list .item {
  width: 1.7rem;
  height: 2.75rem;
  font-size: 0;
  display: inline-block;
  position: relative;
  margin: 0 .13rem .2rem auto;
}

.fivehundred-assign-cards-dialog .list .item:nth-child(3) {
  margin-right: 0;
}

.fivehundred-assign-cards-dialog .list .item .name {
  font-size: .12rem;
  color: #fff;
  text-align: center;
  width: 100%;
  height: .28rem;
  line-height: .28rem;
  position: absolute;
  bottom: 0.45rem;
  left: 0;
}

.fivehundred-assign-cards-dialog .list .item .num {
  width: .14rem;
  height: .14rem;
  background: url(../image/square.png) no-repeat;
  background-size: 100% auto;
  margin: .1rem auto;
  text-align: center;
}

.fivehundred-assign-cards-dialog .list .item .num.active {
  background: url(../image/active-square.png) no-repeat;
}

.fivehundred-assign-cards-dialog .fivehundred-save-pack {
  width: 1.66rem;
  height: .51rem;
  position: absolute;
  bottom: .3rem;
  left: 50%;
  transform: translate(-50%);
}

.cards-not-enough-dialog,.prizes-not-enough-dialog{
  height: 3.54rem;
  background: url(../image/pop-not.png) no-repeat;
  background-size: 100% auto;
}

.cards-not-enough-dialog .tip,.prizes-not-enough-dialog .tip{
  text-align: center;
  margin: .5rem auto auto auto;
  color: #adceff;
  font-size: .2rem;
}

.cards-not-enough-dialog .btn,.prizes-not-enough-dialog .btn{
  margin-top: .8rem;
  margin-left: 1.2rem;
  overflow: hidden;
  width: 4rem;
}

.cards-not-enough-dialog .left,.prizes-not-enough-dialog .left{
  width: 1.66rem;
  height: .51rem;
  float: left;
}
.cards-not-enough-dialog .right,.prizes-not-enough-dialog .right{
  float: right;
  width: 1.66rem;
  height: .51rem;
}

.friend-zhuli{
  height: 3.54rem;
  background: url(../image/pop-not.png) no-repeat;
  background-size: 100% auto;
}
.friend-zhuli .tip{
  text-align: center;
  margin: .5rem auto auto auto;
  color: #adceff;
  font-size: .2rem;
}
.friend-zhuli .btn-join{
  margin: .8rem auto auto;
  overflow: hidden;
  width: 1.66rem;
}


.alerady-login-dialog{
  height: 3.54rem;
  background: url(../image/pop-not.png) no-repeat;
  background-size: 100% auto;
}

.alerady-login-dialog .tip{
  text-align: center;
  margin: .5rem auto auto auto;
  color: #adceff;
  font-size: .2rem;
}

.alerady-login-dialog .btn{
  margin: .8rem auto auto;
  overflow: hidden;
  width: 1.66rem;
}

.alerady-login-dialog .left{
  width: 1.66rem;
  height: .51rem;
  float: left;
}
.alerady-login-dialog .right{
  float: right;
  width: 1.66rem;
  height: .51rem;
}

.activity-rules-dialog {
  height: 10.94rem;
  background: url(../image/activity-rules-bgc.png) no-repeat;
  background-size: 100% auto;
}

.activity-rules-dialog .back-activity {
  width: 1.3rem;
  height: .42rem;
  background: url(../image/back-activity-bg.png);
  background-size: 100% auto;
  position: absolute;
  right: .35rem;
  top: 1rem;
}

.activity-rules-dialog .content-bg {
  width: 5.89rem;
  height: 8.77rem;
  background: url(../image/content-bg.png);
  background-size: 100% auto;
  margin: 1.5rem .4rem;
  padding: .2rem;
  box-sizing: border-box;
  overflow-y: auto;
}

.activity-rules-dialog .content-bg .txt {
  font-size: .22rem;
  color: #acdbff;
  word-break: break-all;
  margin-bottom: .2rem;
}

/* 选择角色 */

.choose-roles-dialog {
  width: 6.23rem;
  height: 2.44rem;
  background: url(../image/pop-select.png) no-repeat;
  background-size: 100% auto;
}

.choose-roles-dialog select {
  position: absolute;
  left: .5rem;
  top: .8rem;
  background: none;
  outline: none;
  width: 5.4rem;
  height: .6rem;
  color: #18417a;
  background: #fff;
}

.choose-roles-dialog select option {
  color: #18417a
}

.choose-roles-dialog .tip {
  position: absolute;
  left: .5rem;
  top: .3rem;
  font-size: .22rem;
  color: #adceff;
}

.choose-roles-dialog .btn {
  position: absolute;
  left: .8rem;
  top: 1.6rem;
}

.choose-roles-dialog .btn .save, .choose-roles-dialog .btn .cancel {
  width: 2.13rem;
  height: .53rem;
  float: left;
}

.choose-roles-dialog .btn .cancel {
  margin-left: .3rem;
}

.share-dialog{
  height: 3.94rem;
  background: url(../image/rightnow-cards-dialog-bg.png) no-repeat;
  background-size: 100% auto;
}
.share-dialog .main{
  position: absolute;
  top: 1rem;
  left: .8rem;
  width: 5rem;
}
.share-dialog .main .share-box{
  height: .6rem;
  line-height: .6rem;
  box-sizing: border-box;
  padding: 0 .2rem;
  width: 100%;
  border: 1px solid #e08317;
  background: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #19437f;
}
.share-dialog .main .share-box .share-link{
  height: .6rem;
  line-height: .6rem;
  position: relative;
  color: #19437f;
  font-size: .18rem;
}
.share-dialog .main .code-box{
  height: 0;
  font-size: 0;
  width: 0;
  height: 0;
}
.share-dialog .main .share-list{
  margin: .2rem auto;
  position: relative;
}
.share-dialog .main .share-list .tip{
  color: #adceff;
  font-size: .18rem;
  margin: .4rem auto;
  text-align: center;
}
.share-dialog .main .share-list .share-item{
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}
.share-dialog .main .share-list .share-item .icon{
  margin-right: .4rem;
  display: inline-block;
  width: .56rem;
  height: .56rem;
}
.share-dialog .main .share-list .share-item .icon.icon-copy{
  background: url(../image/icon-cp.png) no-repeat;
  background-size: 100% auto;
}
.share-dialog .main .share-list .share-item .icon.icon-fb{
  background: url(../image/icon-fb.png) no-repeat;
  background-size: 100% auto;
}
.share-dialog .main .share-list .share-item .icon.icon-tw{
  background: url(../image/icon-tw.png) no-repeat;
  background-size: 100% auto;
}
.share-dialog .main .share-list .share-item .icon.icon-ins{
  background: url(../image/icon-ins.png) no-repeat;
  background-size: 100% auto;
  margin-right: 0;
}

.right-slide{
  position: fixed;
  right: .1rem;
  top: 20%;
  width: .91rem;
  z-index: 10;
}
.right-slide .open{
  background: url(../image/slide-top.png) no-repeat;
  background-size: 100% auto;
  width: .91rem;
  height: 1.49rem;
}


.right-slide .box{
  margin-top: -.2rem;
  padding-top: .1rem;
  overflow: hidden;
  transition: all .3s ease;
  width: .91rem;
  height: 0;
  position: relative;
}
.right-slide .box .bg{
  position: absolute;
  top: 0;
}
.right-slide .box.active{
  transition: all .3s ease;
  width: .91rem;
  height: 3.12rem;
}
.right-slide .box .item{
  position: relative;
  display: block;
  width: 100%;
  height: .52rem;
  z-index: 2;
}