body,dl,dd,h1,h2,h3,h4,h5,h6,form,p{margin:0;}
h1,h2,h3,h4,h5,h6{font-weight: normal;font-size: 100%;}
ul,ol,input{margin: 0;padding: 0;list-style:none;}
img{border:0;}
article, aside, dialog, footer, header, section, footer, nav, figure, menu {display: block;}
i,em{font-style: normal;}
body{background-color: #fff5c9;;color: #5f3436;font: .24rem/1.5 \5FAE\8F6F\96C5\9ED1,\9ED1\4F53,Arial,sans-serif,Verdana,Tahoma,Helvetica;}
a{
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-user-select: none;
	-moz-user-focus: none;
	-moz-user-select: none;
}
html, body, .index-main{
  height: 100%;
}
.section{ min-height: 13.34rem; height: 100%;}
.hide{ display: none;}
.left{ float: left; }
.text-center{ text-align: center; }

.btn-login,
.btn-login i,
.btn-logout,
.btn-play,
.btn-play .off,
.btn-play .on,
.dialog-box .btn-close,
.dialog-box .hd,
.btn-confirm,
.i-icon,
.button a,
.btn-draw,
.answer-list li::after,
.btn-redeem,
.btn-change,
.buttons a,
.exchange-img .icon,
.get-card .title,
.btn-get,
.answer-dialog .hd,
.btnRedeem{
  background: url(../images/sprite.png) no-repeat;
  background-size: 5.1rem 12.64rem;
  text-indent: -99rem;
}

/* menu */
.menu-bar{
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 90;
  width: 100%;
  height: 1.6rem;
  background: url(../images/menu_bg.png) no-repeat;
  background-size: 100% auto;
}
.menu-bar ul{
  margin-left: .4rem;
}
.menu-bar li{
  float: left;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: .1rem;
  text-indent: -99rem;
}

/* section1 */
.login-box,
.music-box{
  position: fixed;
  left: 0;
  z-index: 98;
}
.login-box{
  top: 0.38rem;
}
.login-box a{
  display: block;
  height: .85rem;
}
.btn-login{
  width: 1.8rem;
  overflow: hidden;
}
.btn-login i{
  display: block;
  width: 0.58rem;
  height: 0.27rem;
  margin-left: .66rem;
  margin-top: .32rem;
  background-position: -2.9rem -1.17rem;
}
.btn-logout{
  width: 2.74rem;
  padding-top: .26rem;
  padding-left: .62rem;
  background-position: 0 -.89rem;
  box-sizing: border-box;
  color: #fdf9c2;
  font-size: .25rem;
  font-weight: bold;
  text-indent: 0;
}
.btn-logout span{
  position: absolute;
  width: 0.6rem;
  height: 0.62rem;
  right: 0;
  top: .14rem;
  z-index: 2;
}

.music-box{
  top: 1.46rem;
  left: 0;
  width: 1.56rem;
  transition: left 1s linear;
}
.btn-play{
  display: block;
  height: .85rem;
  background-position: 0 -1.82rem;
  overflow: hidden;
}
.btn-play span{
  display: block;
  margin-left: .87rem;
  margin-top: .28rem;
}
.btn-play .on{
  width: 0.33rem;
  height: 0.28rem;
  background-position: -1.67rem -2.12rem;
}
.btn-play .off{
  width: 0.29rem;
  height: 0.25rem;
  background-position: -2.12rem -2.13rem;
}

/* section2 */
.section2 .inner{
  overflow: hidden;
}
.music-up{
  top: .4rem;
}
.music-box.fold{
  left: -.78rem;
}
.task-list{
  width: 6.26rem;
  height: 1.55rem;
  margin-left: .07rem;
  margin-top: 2.14rem;
}
.task-list li{
  float: left;
  width: 2.06rem;
  margin-top: .2rem;
  color: #fdf9c2;
  text-align: center;
  line-height: .34rem;
  font-size: .22rem;
}
.task-list li:nth-child(2){
  width: 2.14rem;
}
.button a,
.btn-change{
  display: block;
  width: 1.5rem;
  height: 0.4rem;
  margin: 0.1rem auto;
  text-align: center;
  line-height: .4rem;
  color: #fdf9c2;
  text-indent: 0;
}
.button .todo,
.button .collect,
li.active .btn-change{
  background-position: -3.48rem 0;
}
.button .collected,
.btn-change{
  background-position: -1.93rem 0;
}
.task-list li:nth-child(3) .name{
  letter-spacing: -1px;
}

.card-box .card,
.card-shake{
  width: 3.62rem;
  height: 5.94rem;
  margin: .43rem auto 0.15rem;
  background: url(../images/card.png?v=1) no-repeat;
  background-size: 100% 100%;
}
.card-box .card-shake{
  position: relative;
  background: none;
}
.card-shake img{
  position: absolute;
  left: -0.8rem;
  top: -.94rem;
  width: 144%;
}

.card-box .card.active{
  animation: shake 1.5s .15s ease-in-out;
  -moz-animation: shake 1.5s .15s ease-in-out; /* Firefox */
  -webkit-animation: shake 1.5s .15s ease-in-out; /* Safari and Chrome */
  -o-animation: shake 1.5s .15s ease-in-out; /* Opera */
}
@keyframes shake{ 
  10% { 
    transform: rotate(15deg); 
  } 
  20% { 
    transform: rotate(-10deg); 
  } 
  30% { 
    transform: rotate(5deg); 
  } 
  40% { 
    transform: rotate(-5deg); 
  } 
  50%,100% { 
    transform: rotate(0deg); 
  } 
}
.btn-draw{
  display: block;
  width: 2.48rem;
  height: 0.82rem;
  margin: 0 auto;
  background-position: -1.93rem -5.22rem;
}
.card-times{
  color: #5f3436;
  font-size: .26rem;
  text-align: center;
}
.card-times span{
  font-weight: bold;
}

/* section3 */
.prize-box{
  height: 1.6rem;
  padding-top: 2.02rem;
}
.prize-box .txt{
  width: 4.08rem;
  height: 1.18rem;
  padding-left: 1.6rem;
  padding-top: .1rem;
  box-sizing: border-box;
}
.prize-box .txt span{
  font-weight: bold;
}
.prize-right{
  width: 2.25rem;
}
.btn-redeem{
  display: block;
  width: 1.79rem;
  height: 0.59rem;
  margin-left: .28rem;
  margin-top: .32rem;
  background-position: 0 -4.99rem;
}
.btn-redeem.active{
  background-position: 0 -4.35rem;
}
.btn-redeem.redeemed{
  background-position: 0 -5.64rem;
}

.card-list{
  margin-left: .43rem;
}
/* .section3 .card-list{
  height: 7.66rem;
  padding-bottom: 1.88rem;
} */
.card-list li{
  float: left;
  width: 1.73rem;
  margin-right: .2rem;
  margin-bottom: .2rem;
}
.card-list .img,
.out .img,
.get .img{
  height: 2.74rem;
  background: url(../images/card_list.png?v=1) no-repeat;
  background-size: 12.57rem 8.53rem;
}
.get .img{
  background-position: -10.8rem 0;
}
[data-card="1"] .img{
  background-position: 0 -2.85rem;
}
[data-card="2"] .img{
  background-position: -1.8rem -2.85rem;
}
[data-card="3"] .img{
  background-position: -3.6rem -2.85rem;
}
[data-card="4"] .img{
  background-position: -5.4rem -2.85rem;
}
[data-card="5"] .img{
  background-position: -7.2rem -2.85rem;
}
[data-card="6"] .img{
  background-position: -9rem -2.85rem;
}
[data-card="1"].active .img{
  background-position: 0 0;
}
[data-card="2"].active .img{
  background-position: -1.8rem 0;
}
[data-card="3"].active .img{
  background-position: -3.6rem 0;
}
[data-card="4"].active .img{
  background-position: -5.4rem 0;
}
[data-card="5"].active .img{
  background-position: -7.2rem 0;
}
[data-card="6"].active .img{
  background-position: -9rem 0;
}
[data-card="1"].light .img{
  background-position: 0 -5.66rem;
}
[data-card="2"].light .img{
  background-position: -1.8rem -5.66rem;
}
[data-card="3"].light .img{
  background-position: -3.6rem -5.66rem;
}
[data-card="4"].light .img{
  background-position: -5.4rem -5.66rem;
}
[data-card="5"].light .img{
  background-position: -7.2rem -5.66rem;
}
[data-card="6"].light .img{
  background-position: -9rem -5.66rem;
}
.card-list .num{
  text-align: center;
}
.btn-change{
  margin-bottom: 0;
}

/* section4 */
.rules{
  width: 5.5rem;
  padding-top: 4rem;
  margin: 0 auto;
  color: #fdf9c2;
  font-size: .24rem;
  line-height: .4rem;
}
.rules p{
  margin-bottom: .15rem;
}

.section{
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.section .outer{
  height: 100%;
  background: url(../images/bg_bottom.png) no-repeat 0 11.65rem;
  background-size: 100% auto;
}
.section .inner{
  width: 6.4rem;
  margin: 0 auto;
}
.section1{
  background-color: #ffefc0;
  background-image: url(../images/bg_01.jpg?v=1);
}
.section2{
  background-image: url(../images/bg_02.jpg);
}
.section3{
  background-image: url(../images/bg_03.jpg?v=1);
}
.section4{
  background-image: url(../images/bg_04.jpg);
}

/* dialog */
.dialog-box{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  height: 100%;
  overflow: auto;
  background: rgba(0,0,0,.6);
}
.dialog-box .btn-close{
  position: absolute;
  bottom: -.78rem;
  left: 50%;
  z-index: 101;
  width: 0.58rem;
  height: 0.58rem;
  margin-left: -.29rem;
  background-position: -2.9rem -.52rem;
}
.dialog-box .inner{
  position: absolute;
  left: 50%;
  top: 3rem;
  z-index: 101;
  width: 5.38rem;
  height: 3.71rem;
  margin-left: -2.69rem;
  background: url(../images/dialog_bg.png) no-repeat;
  background-size: 100% auto;
}

/* login */
.login-dialog .tips{
  position: absolute;
  top: 2.2rem;
  z-index: 1;
  width: 100%;
  color: #f00;
  text-align: center;
}
.login-dialog .input-box{
  position: relative;
  margin-left: .76rem;
  padding-top: .75rem;
}
.login-dialog .input-txt{
  width: 3.5rem;
  height: .32rem;
  margin-bottom: .3rem;
  padding: .1rem .15rem;
  border: .01rem solid #db978c;
  background: #f9f3ed;
  outline: none;
  color: #45242c;
  font-size: .24rem;
  line-height: 0.32rem;
}
.login-dialog .btn-input,
.login-dialog .btn-input2{
  position: absolute;
  left: 2.62rem;
  top: 1.7rem;
  color: #cc4732;
  text-decoration: underline;
}
.login-dialog .btn-input2{
  margin-left: .4rem;
  text-decoration: none;
}
input::-webkit-input-placeholder{
  color:#45242c;
}
input::-moz-placeholder{
  color:#45242c;
}
input:-moz-placeholder{
  color:#45242c;
}
input:-ms-input-placeholder{
  color:#45242c;
}
.login-dialog .hd{
  position: absolute;
  left: 1.67rem;
  top: -.33rem;
  z-index: 101;
  width: 1.98rem;
  height: 0.74rem;
  background-position: 0 -6.97rem;
}
.login-dialog .btn-confirm{
  display: block;
  margin: 0.13rem auto 0;
  width: 3.8rem;
  height: 0.6rem;
  background-position: 0 -3.68rem;
}
.login-dialog .i-icon{
  position: absolute;
  top: -0.37rem;
  right: 0;
  width: 0.88rem;
  height: 0.94rem;
  background-position: -4.20rem -.49rem;
}

/* 问答 */
.answer-dialog{
  color: #5f3436;
}
.answer-noimg .inner{
  top: 2rem;
}
.answer-img .inner{
  top: 1.5rem;
}
.answer-img .inner{
  width: 5.38rem;
  height: 6.12rem;
  background-image: url(../images/answer_bg1.png);
}
.answer-noimg .inner{
  height: 4.76rem;
  background-image: url(../images/answer_bg2.png);
}
.answer-img .img{
  width: 3.68rem;
  height: 1.58rem;
  margin-left: .18rem;
  margin-top: .82rem;
  border: 1px solid #5f3436;
  overflow: hidden;
}
.question{
  margin-left: .65rem;
  margin-right: .42rem;
}
.question .img img{
  width: 100%;
}
.question .title{
  display: table-cell;
  height: 0.65rem;
  padding-top: .1rem;
  font-weight: bold;
  font-size: .24rem;
  vertical-align: middle;
}
.question .title span{
  display: inline-block;
}
.answer-list li{
  position: relative;
  height: 0.42rem;
  margin-left: .15rem;
  margin-bottom: .19rem;
  line-height: .42rem;
  font-size: .24rem;
}
.answer-list li::after{
  position: absolute;
  top: -.08rem;
  height: 0.56rem;
  content: '';
}
.answer-list .right::after{
  right: .32rem;
  width: 0.61rem;
  background-position: -4.48rem -3.63rem;
}
.answer-list .wrong::after{
  right: .36rem;
  width: 0.57rem;
  background-position: -4.52rem -4.28rem;
}
.answer-noimg .img{
  display: none;
}
.answer-noimg .title{
  height: 1rem;
  padding-top: .61rem;
}
.answer-dialog .hd{
  position: absolute;
  left: .76rem;
  top: -.18rem;
  z-index: 1;
  width: 3.8rem;
  height: 0.6rem;
}
.answer1 .hd{
  background-position: 0 -11.35rem;
}
.answer2 .hd{
  background-position: 0 -12.02rem;
}

/* code码兑换成功 */
.code-dialog .hd{
  width: 2.75rem;
  height: 0.77rem;
  margin: .54rem auto .2rem;
  background-position: 0 -7.75rem;
}
.code-dialog .hd,
.code-dialog .bd{
  position: relative;
  z-index: 2;
}
.code-box{
  font-size: .24rem;
  line-height: .38rem;
  text-align: center;
}
.code-box .code{
  color: #cc4732;
  font-weight: bold;
}
.code-dialog .btn-confirm,
.confirm-dialog .btn-confirm{
  display: block;
  width: 3.8rem;
  height: 0.6rem;
  margin: .3rem auto;
  background-position: 0 -6.29rem;
}
.code-dialog .yanhua{
  position: absolute;
  top: -.88rem;
  left: -.35rem;
  z-index: 1;
  width: 6.04rem;
  height: 4.25rem;
  background: url(../images/yanHua.png) no-repeat;
  background-size: 100% auto;
}

/* 确认兑换弹窗 */
.confirm-dialog .txt{
  padding-top: .65rem;
  font-size: .28rem;
  text-align: center;
  line-height: .46rem;
}
.exchange-dialog .btn-close,
.copylink-dialog .btn-close,
.exchange-dialog .btn-close,
.create-dialog .btn-close{
  left: auto;
  top: 0.08rem;
  right: 0;
  background: none;
}

/* 确认交换魂卡弹窗 */
.exchange-dialog .inner,
.copylink-dialog .inner{
  top: 2.3rem;
  width: 6.9rem;
  height: 8.53rem;
  margin-left: -3.45rem;
  margin-bottom: 2.3rem;
  background-image: url(../images/dialog_bg2.png);
}
.exchange-dialog .txt{
  padding-top: 1.3rem;
  padding-bottom: 1rem;
  font-weight: bold;
  font-size: .3rem;
  text-align: center;
}
.exchange-dialog .txt span{
  color: #cc4732;
}
.exchange-img .out,
.exchange-img .get{
  width: 1.73rem;
}
.exchange-img .out,
.create-dialog .exchange-img .get{
  margin-left: 1rem;
  margin-right: .2rem;
}
.create-dialog .exchange-img .out,
.exchange-img .get{
  margin-left: .25rem;
}
.exchange-img{
  height: 3.96rem;
}
.exchange-img .left img{
  width: 100%;
}
.exchange-img .left p{
  font-size: .3rem;
  font-weight: bold;
  text-align: center;
}
.exchange-img .icon{
  width: 0.91rem;
  height: 1.11rem;
  margin-top: 0.68rem;
  background-position: -3.93rem -6.1rem;
}
.buttons{
  text-align: center;
}
.buttons a,
.card-dialog .btn-confirm,
.alert-dialog .btn-confirm{
  display: inline-block;
  width: 2.48rem;
  height: 0.82rem;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}
.buttons .btn-quit{
  background-position: -2.55rem -2.75rem;
}

.alert-dialog .btn-confirm,
.buttons .btn-confirm,
.card-dialog .btn-confirm{
  background-position: -2.55rem -1.84rem;
}

/* 复制交换链接弹窗 */
.copylink-dialog .txt{
  height: 1.45rem;
  padding-top: 1.06rem;
  font-size: .3rem;
  font-weight: bold;
  line-height: .48rem;
  text-align: center;
}
.link-box{
  height: 4rem;
  padding-top: .25rem;
  font-size: .24rem;
  line-height: .45rem;
  text-align: center;
}
.link-box span,
.link-box a{
  color: #cc4732;
}
.link{
	width: 5.3rem;
	margin: 0 auto .1rem;
  word-break: break-all;
}
.link-box a{
  text-decoration: underline;
}

/* 生成交换链接弹窗 */
.create-dialog .inner{
  position: absolute;
  top: .35rem;
  width: 6.9rem;
  height: 12.56rem;
  margin-bottom: .35rem;
  margin-left: -3.45rem;
  background-image: url(../images/dialog_bg3.png);
}
.create-dialog .exchange-img{
  height: 3.7rem;
  margin-top: 1.2rem;
}
.create-dialog .card-list{
  margin-left: .65rem;
  margin-bottom: .2rem;
  overflow: hidden;
}
.create-dialog .card-list li{
  margin-bottom: 0;
}
.create-dialog .btn-confirm{
  background-position: -1.91rem -4.34rem;
}

/* 魂卡详情 */
.card-dialog .inner{
  width: 6.9rem;
  height: 11.39rem;
  top: 0.6rem;
  margin-left: -3.45rem;
  background-image: url(../images/card_popup.png);
}
.card-dialog .all-cards{
  margin-top: .4rem;
}
.card-dialog .btn-confirm{
  display: block;
  margin: 0 auto;
}
.card-dialog .card-img img{
  margin-bottom: .05rem;
}

/* 恭喜获得魂卡 */
.get-card{
  perspective: 700px;
}
.get-card .inner{
  left: 0;
  top: 0;
  z-index: 95;
  width: 100%;
  height: 100%;
  min-height: 13.34rem;
  margin-left: 0;
  background: url(../images/liusi_bg.jpg) no-repeat;
  background-size: 100% 100%;
  transform: scale(0.4);
  transform-style: preserve-3d;
  transition: ease-in 1000ms;
}
.get-card.active .inner{
  transform: scale(1);
  width: 100%;
}
.get-card .title{
  margin-top: 0.7rem;
  margin-left: 1.76rem;
  width: 3.98rem;
  height: 1.19rem;
  background-position: 0 -10.11rem;
}
.card-img{
  text-align: center;
  line-height: 0;
}
.card-img img{
  width: 3.62rem;
  height: 5.94rem;
  margin-bottom: .1rem;
}
.desc{
  display: table-cell;
  color: #fdf9c2;
  font-size: .26rem;
  vertical-align: middle;
}
.desc-inner{
  display: inline-block;
  width: 5.7rem;
	height: auto;
	min-height: 3.6rem;
  margin-left: .6rem;
}
.desc p{
  margin-bottom: .2rem;
}
.get-card .desc-inner{
  width: 6.1rem;
	min-height: 3.8rem;
  margin-left: .7rem;
}
.get-card .btn-get{
  margin-top: 0;
  margin-bottom: 0;
}
.btn-get{
  display: block;
  width: 2.48rem;
  height: 0.82rem;
  margin: .4rem auto .3rem;
  background-position: 0 -2.75rem;
}

/* 通用 */
.alert-dialog .tips{
  display: table-cell;
  width: 4.3rem;
  height: 1.8rem;
  padding-left: 0.54rem;
  padding-top: .35rem;
  font-size: .32rem;
  vertical-align: middle;
  text-align: center;
}
.alert-dialog .tips span{
  display: inline-block;
}
.alert-dialog .btn-confirm{
  display: block;
  margin: 0 auto;
}


@media screen and (min-width: 750px){
  html,body{
      height: 100%;
  }
  .section, .index-main {
    min-height: auto;
    height: 13.34rem;
  }
  body{
      background: #fff;
  }
  .index-wrap{
    position: relative;
    width: 100%;
    min-height: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: #e9e9e9;
    box-shadow: 0 0 2px #bdbdbd;
    overflow: scroll;
  }
  .index-main{
    position: relative;
    overflow: hidden;
  }
  .index-wrap .music-box, .menu-bar, .login-box, .dialog-box{
    position: absolute;
  }
	.dialog-box{
		height: 13.34rem;
	}
}