@charset "UTF-8";
.wrap[data-v-27d15136] {
  color: #19191A;
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 50;
  background: #F4F2F5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /*被拖拽对象的样式*/
  /*选中样式*/
}
.wrap .bg[data-v-27d15136] {
    width: 100%;
    height: 100%;
    position: fixed;
}
.wrap .bg img[data-v-27d15136]:first-child {
      width: 100%;
      height: 100%;
}
.wrap .bg img[data-v-27d15136]:last-child {
      position: absolute;
      bottom: 0.53rem;
      width: 4.56rem;
      left: 50%;
      -webkit-transform: translate(-50%);
          -ms-transform: translate(-50%);
              transform: translate(-50%);
}
.wrap .bg p[data-v-27d15136] {
      position: absolute;
      bottom: 1.92rem;
      left: 50%;
      -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
      color: #2C3549;
      font-size: .28rem;
}
.wrap .read-container[data-v-27d15136] {
    position: fixed;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.7);
}
.wrap .read-container > img[data-v-27d15136] {
      height: .3rem;
      z-index: 100;
}
.wrap .div-timer[data-v-27d15136] {
    padding-bottom: .3rem;
    color: #6D6DB3;
    font-size: .32rem;
    text-shadow: 0px 2px 0px #FFFFFF;
    width: 1.1rem;
    margin: 0 auto;
}
.wrap .div-timer span[data-v-27d15136]:first-child {
      font-size: .48rem;
      font-weight: 500;
}
.wrap .img1[data-v-27d15136] {
    width: 100%;
    height: 100%;
    position: fixed;
    background: url(data:image/png;base64,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) repeat;
    left: 0;
    top: 0;
    z-index: -1;
    -webkit-animation: myMove-data-v-27d15136 8s linear infinite;
            animation: myMove-data-v-27d15136 8s linear infinite;
    background-position: 0px 0px;
    background-size: cover;
}
@-webkit-keyframes myMove-data-v-27d15136 {
25% {
    background-position: 10px 10px;
}
50% {
    background-position: 10px 0px;
}
75% {
    background-position: 0px 10px;
}
100% {
    background-position: 0px 0px;
}
}
@keyframes myMove-data-v-27d15136 {
25% {
    background-position: 10px 10px;
}
50% {
    background-position: 10px 0px;
}
75% {
    background-position: 0px 10px;
}
100% {
    background-position: 0px 0px;
}
}
.wrap .imgready[data-v-27d15136] {
    -webkit-animation: imgscale-data-v-27d15136 1s 2 forwards;
            animation: imgscale-data-v-27d15136 1s 2 forwards;
    width: 60px;
}
@-webkit-keyframes imgscale-data-v-27d15136 {
0% {
    width: 60px;
    height: auto;
}
100% {
    width: 150px;
    height: auto;
}
}
@keyframes imgscale-data-v-27d15136 {
0% {
    width: 60px;
    height: auto;
}
100% {
    width: 150px;
    height: auto;
}
}
.wrap .item[data-v-27d15136] {
    color: #a9a9a9;
    font-size: 0;
    width: 6.9rem;
    margin: .2rem auto;
    background-color: transparent;
    position: relative;
}
.wrap .item img[data-v-27d15136] {
      width: 100%;
      margin-top: -.33rem;
}
.wrap .item .spellImg[data-v-27d15136] {
      z-index: 6000;
}
.wrap .item-first[data-v-27d15136] {
    margin-bottom: .2rem !important;
    margin-top: .5rem !important;
}
.wrap .item-last[data-v-27d15136] {
    margin-top: .2rem !important;
    margin-bottom: .4rem !important;
}
.wrap .item-spell[data-v-27d15136] {
    background: url(../img/icon-spell-item-bg3.14efca56.png) repeat;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-animation: mymove-data-v-27d15136 .5s linear forwards;
            animation: mymove-data-v-27d15136 .5s linear forwards;
    height: -webkit-calc(100% + 0.9rem);
    height: calc(100% + 0.9rem);
    position: absolute;
    left: -.3rem;
    top: -.78rem;
    padding: .2rem 0;
    width: 7.5rem !important;
    z-index: 1000;
}
@-webkit-keyframes mymove-data-v-27d15136 {
0% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
    opacity: 1;
}
30% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
    opacity: 1;
}
100% {
    -webkit-transform: scaleX(1.1) scaleY(1.2);
            transform: scaleX(1.1) scaleY(1.2);
    opacity: 0;
}
}
@keyframes mymove-data-v-27d15136 {
0% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
    opacity: 1;
}
30% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
    opacity: 1;
}
100% {
    -webkit-transform: scaleX(1.1) scaleY(1.2);
            transform: scaleX(1.1) scaleY(1.2);
    opacity: 0;
}
}
.wrap .chosen[data-v-27d15136] {
    border: transparent !important;
}
.wrap .ghost[data-v-27d15136] {
    visibility: hidden;
}
.createBox[data-v-27d15136] {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  position: fixed;
  padding: 2rem .5rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-transition: all .3s;
  transition: all .3s;
}
.createBox.active[data-v-27d15136] {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    z-index: 4000;
}