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: #000;color: #000;font: 16px/1.5 \5FAE\8F6F\96C5\9ED1,\9ED1\4F53,Arial,sans-serif,Verdana,Tahoma,Helvetica;}
a{text-decoration: none;}
html,body, .index-main{
  height: 100%;
}
.btn-music::after,
.login-box a,
.dialog-box .btn-close,
.achieve-list li,
.btn-rule i{
  background-image: url(../images/sprite.png);
  background-repeat: no-repeat;
  background-size: 5rem 19.78rem;
}

/* header */
.btn-music{
  position: fixed;
  top: 0.37rem;
  left: 0.2rem;
  z-index: 1000;
  width: 0.8rem;
  height: 0.8rem;
  background: rgba(0,0,0,.5);
  border-radius: 50%;
  text-align: center;
  line-height: .8rem;
}
.btn-music::after{
  position: absolute;
  left: .18rem;
  top: .21rem;
  width: 0.44rem;
  height: 0.38rem;
  background-position: -3.5rem -14.18rem;
  content: '';
}
.btn-music.on::after{
  background-position: -3.47rem -13.77rem;
}
.login-box{
  position: fixed;
  top: .08rem;
  right: 0;
  z-index: 1001;
}
.login-box a{
  display: block;
  height: 1.03rem;
  opacity: 0;
  transition: opacity 1s;
}
.login-box.active a{
  opacity: 1;
}
.login-box .btn-login{
  width: 2.45rem;
  margin-top: 0.04rem;
  background-position: 0 -14.8rem;
}
.login-box .btn-logout{
  width: 3.24rem;
  height: .92rem;
  margin-top: 0.19rem;
  background-position: 0 -13.77rem;
}
.tel{
  position: absolute;
  left: 0.6rem;
  top: .36rem;
  z-index: 1007;
  width: 2.06rem;
  height: 0.58rem;
  font-size: .3rem;
  text-align: center;
  line-height: 0.58rem;
}
.btn-logout span{
  position: absolute;
  width: 0.6rem;
  height: 0.62rem;
  right: 0; 
  top: .38rem;
  z-index: 1002;
}

.index-main{
  position: relative;
  height: 22.75rem;
  background: url(../images/bg.jpg) no-repeat center top;
  background-size: 100% auto;
}
.content{
  padding-top: 9.45rem;
}
.btn-entry{
  display: block;
  width: 4.05rem;
  height: 1.8rem;
  margin-left: 3.27rem;
}

/* 进度条 */
.flex{
  display: flex;
  justify-content: flex-start;
}
.growth-bar{
  width: 8.66rem;
  height: 1.19rem;
  margin-left: 2.14rem;
}
.growth-bar .percent{
  flex: 1;
  margin-left: .2rem;
  padding-top: .5rem;
  color: #fff;
  font-size: .36rem;
  font-weight: bold;
}
.growth-bar .growth{
  width: 6.35rem;
  height: 0.32rem;
  margin: .61rem auto 0;
  border-radius: 0.16rem;
  background: #0b3b41;
  box-shadow: 0 0 .2rem #61ff7b;
}
.growth-bar .growth p{
  height: 0.32rem;
  border-radius: 0.16rem;
  transition: width 1s;
}
.all-score p{
  background: linear-gradient(90deg, #3bf4cb, #f9fc8a);
}
.personal-score p{
  background: linear-gradient(90deg, #f9a94d, #f9fc8a);
}

/* 达成 */
.achieve-list{
  position: relative;
}
.achieve-list li{
  position: absolute;
  z-index: 1;
  width: 2.43rem;
  height: 2.68rem;
}
.achieve-list li p{
  position: absolute;
  top: 2.6rem;
  left: 0;
  width: 3rem;
  margin-left: -.3rem;
  color: #fff;
  font-size: .34rem;
  font-weight: bold;
  text-align: center;
}
.achieve-list li:nth-child(1){
  top: 0.43rem;
  left: .57rem;
  background-position: 0 0;
}
.achieve-list li:nth-child(1).active{
  background-position: -2.57rem 0;
}
.achieve-list li:nth-child(2){
  left: 4.16rem;
  top: .43rem;
  background-position: 0 -2.75rem;
}
.achieve-list li:nth-child(2).active{
  background-position: -2.57rem -2.75rem;
}
.achieve-list li:nth-child(3){
  left: 7.75rem;
  top: .43rem;
  background-position: 0 -5.5rem;
}
.achieve-list li:nth-child(3).active{
  background-position: -2.57rem -5.5rem;
}
.achieve-list li:nth-child(4){
  left: 0.43rem;
  top: 4.41rem;
  background-position: 0 -8.23rem;
}
.achieve-list li:nth-child(4).active{
  background-position: -2.57rem -8.23rem;
}
.achieve-list li:nth-child(5){
  left: 4.16rem;
  top: 4.41rem;
  background-position: 0 -10.98rem;
}
.achieve-list li:nth-child(5).active{
  background-position: -2.57rem -10.98rem;
}
.achieve-list li:nth-child(6){
  left: 7.75rem;
  top: 4.41rem;
  background-position: 0 -16.22rem;
}
.achieve-list li:nth-child(6).active{
  background-position: -2.57rem -16.22rem;
}

.achieve-list .gif{
  position: absolute;
  top: 0.67rem;
  left: 0.59rem;
  width: 1.27rem;
  height: 1.27rem;
  background: url(../images/01.gif) no-repeat 0 0;
  background-size: 100% 100%;
}
.achieve-list .active .gif{
  display: none;
}

.btn-rule{
  position: absolute;
  right: 0.2rem;
  bottom: 0.18rem;
  z-index: 100;
  width: 2.1rem;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  color: #fff;
  font-size: .3rem;
  font-weight: bold;
  background: rgba(0,0,0,.67);
  border-radius: .12rem;
}
.btn-rule i{
  display: inline-block;
  width: 0.44rem;
  height: 0.44rem;
  margin-right: .05rem;
  background-position: -4.03rem -14.38rem;
  vertical-align: -.1rem;
}



/* dialog */
.dialog-box{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1009;
  background: rgba(0,0,0,.8);
}
.dialog-box .inner{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1010;
  width: 5.74rem;
  margin-left: -2.87rem;
  font-size: .3rem;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
}

.alert-dialog .inner {
  position: absolute;
  left: 50%;
  top: 50%;
  /* margin-left: -1.757rem; */
  margin-top: -2rem;
  background: url(../images/alertbg.png)  no-repeat;
  /* background-size: 3.986rem 4.389rem; */
  /* height: 4.389rem;
  width: 3.986rem; */
  background-size: 5.74rem 6.32rem;
  height: 6.32rem;
  width: 5.74rem;
  margin-left: -2.88rem;

}
.alert-dialog .prize-name {
  text-align: center;
  width: 5.2rem;
  height: 1.62rem;
  margin-top: 4.3rem;
  margin-left: 0.26rem;
  color: #000;
  font-size: 0.2rem;
  line-height: 0.56rem;
  font-weight: normal;
}
.alert-dialog .prize-name span {
  font-weight: bold;
}
.login-dialog .inner{
  height: 7.84rem;
  margin-top: -3.92rem;
  background-image: url(../../images/popup_bg_01.png);
}
.dialog-box .btn-close{
  position: absolute;
  right: -.14rem;
  top: -0.16rem;
  z-index: 1001;
  width: 0.5rem;
  height: 0.55rem;
  background-position: -4.03rem -13.77rem;
}
.dialog-box .hd{
  height: 2.96rem;
  text-indent: -9999rem;
}
.dialog-box .bd{
  position: relative;
  width: 4.8rem;
  margin-left: .46rem;
}
.dialog-box .tips{
  position: absolute;
  bottom: .7rem;
  z-index: 1;
  width: 100%;
  color: #f00;
  text-align: center;
}
.dialog-box .input-box,
.dialog-box .select-box{
  position: relative;
  width: 4.8rem;
}
.dialog-box .input-txt{
  width: 4.8rem;
  height: .68rem;
  margin-bottom: .3rem;
  padding: .1rem .15rem;
  border: .01rem solid #000;
  border-radius: .04rem;
  background: #fff;
  box-sizing: border-box;
  outline: none;
  color: #000;
  font-size: .3rem;
  line-height: 0.48rem;
}
input::-webkit-input-placeholder{
  color:#8d8d8d;
}
input::-moz-placeholder{
  color:#8d8d8d;
}
input:-moz-placeholder{
  color:#8d8d8d;
}
input:-ms-input-placeholder{
  color:#8d8d8d;
}
.dialog-box .btn{
  display: block;
  margin-top: 0;
  width: 4.8rem;
  height: 0.7rem;
  background-color: #775036;
  background: linear-gradient(180deg, #88614d, #603816);
  border-radius: .05rem;
  box-sizing: border-box;
  border: none;
  outline: none;
  line-height: .7rem;
  text-align: center;
  color: #fff;
  font-size: .3rem;
  font-weight: bold;
}

/* login */
.login-dialog .btn-input,
.login-dialog .btn-input2{
  position: absolute;
  right: .2rem;
  top: 1.02rem;
  color: #000;
  text-decoration: underline;
}
.login-dialog .btn-input2{
  margin-left: .4rem;
  text-decoration: none;
}

/* bind-dialog */
.bind-dialog .inner{
  height: 10.42rem;
  margin-top: -5.21rem;
  background-image: url(../../images/popup_bg_02.png);
}
.i-drop{
  position: absolute;
  top: 0.27rem;
  right: 0.38rem;
  z-index: 1;
  border-width: 0 .1rem .14rem .1rem;
  border-color: transparent transparent #6a4224  transparent;
  border-style: dashed dashed solid dashed;
}
.select-list{
  position: absolute;
  top: .68rem;
  left: 0;
  z-index: 10;
  width: 4.74rem;
  height: 4.5rem;
  padding-top: .2rem;
  border: .01rem solid #000;
  border-top: .01rem solid #8d8d8d;
  border-bottom-left-radius: .04rem;
  border-bottom-right-radius: .04rem;
  background-color: #fff;
  overflow: scroll;
}
.select-list li{
  height: 0.7rem;
  padding-left: .2rem;
  box-sizing: border-box;
  font-size: .3rem;
  line-height: .7rem;
}

.rules-dialog .inner{
  width: 8.01rem;
  height: 8.57rem;
  margin-left: -4.1rem;
  margin-top: -4.5rem;
  background-image: url(../images/popup_bg.png);
  color: #fff;
  font-size: .3rem;
  font-weight: bold;
  line-height: .55rem;
}
.rules-dialog .bd{
  width: 5.8rem;
  margin: 2.3rem auto 0;
}
.rules-dialog .btn-close{
  left: 50%;
  top: 8.8rem;
  width: .86rem;
  height: .92rem;
  margin-left: -.35rem;
  background-position: -2.74rem -14.81rem;
}



/* 角色绑定确认弹窗 */
.login-txt-tip{
  margin-top: -.2rem;
  margin-bottom: .1rem;
  font-size: .20rem;
  line-height: 1.2;
}
.sureBind-dialog .inner{
  width: 5.88rem;
  height: 5.37rem;
  margin-left: -2.94rem;
  margin-top: -2.68rem;
}
.sureBind-dialog .btn-close{
  top: -.15rem;
}
.sureBind-dialog .btn-box{
  display: flex;
  justify-content: space-between;
  width: 4.8rem;
  margin: 4.23rem auto 0;
}
.sureBind-dialog .btn-box a{
  display: block;
  width: 2.2rem;
  height: 0.75rem;
  text-indent: -9999rem;
}
.sureBind-dialog .btn-check{
  display: inline-block;
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  border: 0.02rem solid #cb3155;
  vertical-align: -.05rem;
}
.sureBind-dialog .inner{
  background-image: url(../../images/take_photos/check_rolename.png);
}
.sureBind-dialog .checked .btn-check{
  background-image: url(../../images/take_photos/i_check.png);
  background-size: 100% 100%;
}
.sureBind-dialog .btn-box{
  margin-top: 0.33rem;
}
.login-dialog .tips{
  bottom: -.5rem;
}
.sure-bind-role{
  padding: 1.6rem .4rem 0;
  height: 1.6rem;
}
.sure-bind-role span{
  color: #f00;
}
.sureBind-dialog .sure-check{
  height: .5rem;
  padding-top: .1rem;
  margin-left: .7rem;
}


@media screen and (min-width: 1080px){
  .index-main, .header{
    position: relative;
    width: 100%;
    min-width: 1080px;
    max-width: 1080px;
    margin: 0 auto;
  }
  .btn-music, .login-box{
    position: absolute;
  }
  .rules-dialog .inner{
    transform: scale(0.8);
  }
}