@keyframes rotateing {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
.top {
  position: relative; }
  .top .banner {
    width: 7.5rem;
    height: 12rem;
    background: url("../img/index/top/banner.jpg?v=2") center no-repeat;
    background-size: contain; }
  .top .musicplay, .top .stopmusic {
    width: .54rem;
    height: .54rem;
    background: url("../img/index/top/musicplay.png?v=2") center no-repeat;
    background-size: contain;
    position: absolute;
    right: .14rem;
    top: .14rem; }
  .top .stopmusic {
    background: url("../img/index/top/stopmusic.png?v=2") center no-repeat;
    background-size: contain; }
  .top .rotateing {
    animation: rotateing 3s linear infinite; }
  .top .open {
    width: 4.9rem;
    height: 1.59rem;
    background: url("../img/index/top/open.png?v=2") center no-repeat;
    background-size: contain;
    position: absolute;
    left: 1.43rem;
    bottom: 1.67rem; }
    .top .open p {
      font-size: .2rem;
      margin-top: 1.15rem;
      margin-left: 1.7rem;
      color: #ffdab6; }
  .top .username-content, .top .login-content {
    font-size: .24rem;
    position: absolute;
    bottom: 1.26rem;
    width: 100%;
    text-align: center;
    color: #ffff; }
    .top .username-content .switch, .top .login-content .switch {
      color: #fdeeb7; }

.BlessingBag {
  width: 7.5rem;
  height: 12.65rem;
  background: url("../img/index/BlessingBag/banner.jpg?v=2") center no-repeat;
  background-size: contain;
  position: relative;
  margin-top: -1px; }
  .BlessingBag .content {
    padding: 3.12rem .8rem 0 .8rem; }
    .BlessingBag .content .title {
      display: flex; }
      .BlessingBag .content .title div {
        flex: 1;
        width: 2.7rem;
        height: .8rem; }
      .BlessingBag .content .title .yabi {
        background: url("../img/index/BlessingBag/yabi.png?v=2") center no-repeat;
        background-size: contain; }
      .BlessingBag .content .title .yabiActive {
        background: url("../img/index/BlessingBag/yabi-active.png?v=2") center no-repeat;
        background-size: contain; }
      .BlessingBag .content .title .skin {
        background: url("../img/index/BlessingBag/skin.png?v=2") center no-repeat;
        background-size: contain; }
      .BlessingBag .content .title .skinActive {
        background: url("../img/index/BlessingBag/skin-active.png?v=2") center no-repeat;
        background-size: contain; }
  .BlessingBag .yabiContent, .BlessingBag .skinContent {
    margin-top: .33rem; }
    .BlessingBag .yabiContent .role, .BlessingBag .skinContent .role {
      width: 1.8rem;
      height: 3.1rem;
      margin: 0 .07rem 0 .07rem;
      position: relative; }
      .BlessingBag .yabiContent .role img, .BlessingBag .skinContent .role img {
        margin-top: .33rem;
        width: 1.55rem;
        height: 2.8rem;
        margin-left: 0.13rem; }
      .BlessingBag .yabiContent .role .roleIntroduce, .BlessingBag .skinContent .role .roleIntroduce {
        position: absolute;
        width: 1.5rem;
        height: .64rem;
        bottom: 0;
        opacity: .8; }
        .BlessingBag .yabiContent .role .roleIntroduce p, .BlessingBag .skinContent .role .roleIntroduce p {
          font-size: .2rem;
          color: #fff3e0;
          margin-left: .2rem;
          margin-top: .15rem;
          text-align: left;
          line-height: .25rem; }

.spring {
  width: 7.5rem;
  height: 9.6rem;
  background: url("../img/index/spring/banner.jpg?v=2") center no-repeat;
  background-size: contain;
  margin-top: -1px; }
  .spring .videoContent {
    padding-top: 4rem; }
    .spring .videoContent .video {
      width: 6.2rem;
      margin: 0 auto; }
      .spring .videoContent .video div:nth-child(1) {
        padding: 0.04rem;
        height: 3.7rem;
        position: relative; }
        .spring .videoContent .video div:nth-child(1) .start {
          width: 1rem;
          height: 1rem;
          background: url("../img/start.png?v=2") center no-repeat;
          background-size: contain;
          position: absolute;
          top: 1rem;
          left: 50%;
          transform: translate(-50%, 50%); }
        .spring .videoContent .video div:nth-child(1) iframe {
          width: 100%;
          height: 100%; }

.bottom {
  width: 7.5rem;
  height: 10.75rem;
  background: url("../img/index/bottom/banner.jpg?v=2") center no-repeat;
  background-size: contain;
  margin-top: -1px; }
  .bottom .roleContent {
    padding: 2.24rem .43rem 0 .43rem; }
    .bottom .roleContent .role {
      font-size: .24rem;
      color: #bf7a66; }
      .bottom .roleContent .role p {
        margin-bottom: .32rem;
        line-height: .35rem; }
  .bottom .copyrightContent .logo {
    width: 1.48rem;
    height: 1.78rem;
    background: url("../img/logo.png?v=2") center no-repeat;
    background-size: contain;
    margin: .86rem auto auto auto; }
  .bottom .copyrightContent .company {
    margin-bottom: .1rem; }
  .bottom .copyrightContent .copyright {
    color: #a1abeb;
    text-align: center;
    font-size: .2rem;
    margin-top: .2rem; }

.choice {
  width: 6.6rem;
  height: 5.6rem;
  background: url("../img/index/dialog/choice/bg.png?v=2") center no-repeat;
  background-size: contain;
  position: fixed;
  z-index: 11;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto; }
  .choice .headContent {
    padding: 1.33rem .4rem 0 .4rem;
    display: flex; }
    .choice .headContent .head {
      flex: 1;
      text-align: center; }
      .choice .headContent .head .headimgActive {
        width: 1.6rem;
        height: 1.6rem;
        background: url("../img/index/dialog/choice/head-active.png?v=2") center no-repeat;
        background-size: contain;
        margin: 0 auto .1rem auto; }
      .choice .headContent .head .id {
        margin-top: .1rem; }
      .choice .headContent .head .headimg {
        width: 1.5rem;
        height: 1.5rem;
        padding-top: .05rem;
        margin: 0 auto;
        padding-bottom: .08rem; }
      .choice .headContent .head .name {
        font-size: .26rem; }
      .choice .headContent .head .id {
        font-size: .2rem; }
      .choice .headContent .head .name, .choice .headContent .head .id {
        color: #000000; }
      .choice .headContent .head .nameActive, .choice .headContent .head .idActive {
        color: #d54943; }
  .choice .btn {
    width: 4.6rem;
    height: 1rem;
    background: url("../img/index/dialog/choice/btn.png?v=2") center no-repeat;
    background-size: contain;
    margin: .4rem auto auto auto; }
  .choice .close {
    width: .8rem;
    height: .8rem;
    background: url("../img/index/dialog/close.png?v=2") center no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -1.2rem;
    left: 2.88rem; }

.bind {
  width: 6.6rem;
  height: 4rem;
  background: url("../img/index/dialog/bind/bg.png?v=2") center no-repeat;
  background-size: contain;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10; }
  .bind .name {
    margin-top: 1.07rem;
    text-align: center;
    font-size: .44rem;
    color: #d54943; }
  .bind .tips {
    font-size: .28rem;
    color: #c03149;
    text-align: center;
    margin-top: .16rem; }
  .bind .cancel, .bind .determine {
    width: 2.6rem;
    height: .8rem; }
  .bind .btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: .64rem; }
    .bind .btn .cancel {
      background: url("../img/index/dialog/cancel.png?v=2") center no-repeat;
      background-size: contain; }
    .bind .btn .determine {
      background: url("../img/index/dialog/determine.png?v=2") center no-repeat;
      background-size: contain; }
  .bind .close {
    width: .8rem;
    height: .8rem;
    background: url("../img/index/dialog/close.png?v=2") center no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -1.2rem;
    left: 2.88rem; }

.jump {
  width: 6.6rem;
  height: 4rem;
  background: url("../img/index/dialog/jump/bg.png?v=2") center no-repeat;
  background-size: contain;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10; }
  .jump .tips {
    margin-top: 1.3rem;
    text-align: center;
    font-size: .4rem;
    color: #504c95; }
  .jump .cancel, .jump .determine {
    width: 2.6rem;
    height: .8rem; }
  .jump .btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: .8rem; }
    .jump .btn .cancel {
      background: url("../img/index/dialog/cancel.png?v=2") center no-repeat;
      background-size: contain; }
    .jump .btn .determine {
      background: url("../img/index/dialog/determine.png?v=2") center no-repeat;
      background-size: contain; }
  .jump .close {
    width: .8rem;
    height: .8rem;
    background: url("../img/index/dialog/close.png?v=2") center no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -1.2rem;
    left: 2.88rem; }

.all {
  width: 6.6rem;
  height: 10.4rem;
  background: url("../img/index/dialog/all/bg.png?v=2") center no-repeat;
  background-size: contain;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10; }
  .all .allContent {
    padding: 0 .7rem 0 .7rem;
    height: 9rem;
    overflow-x: auto;
    margin-top: 1.3rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: center;
    word-break: break-all; }
    .all .allContent .prize {
      flex: 1;
      margin: 0 .5rem .26rem 0;
      width: calc((100% - 10px) / 3); }
      .all .allContent .prize:nth-child(3n) {
        margin-right: 0; }
      .all .allContent .prize .headimg {
        width: 1.28rem;
        height: 1.2rem;
        margin: 0 auto;
        overflow: hidden;
        border-top-right-radius: 0.2rem;
        border-bottom-left-radius: 0.2rem; }
      .all .allContent .prize .name {
        margin-top: .1rem;
        font-size: .2rem;
        color: #504c95; }
    .all .allContent .skin .headimg {
      background-size: contain;
      background-repeat: no-repeat; }
  .all .close {
    width: .8rem;
    height: .8rem;
    background: url("../img/index/dialog/close.png?v=2") center no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -1.2rem;
    left: 2.88rem; }

/*# sourceMappingURL=index.css.map */