html, body {
  height: 100%;
  position: relative;

  overflow: hidden;
}

body {
  background-image: url("../img/animations/bg_gate@2x.png");
  background-size: 100% 100%;
}

.animation {
  height: 100%;
}

.animation * {
  position: absolute;
}

.brick {
  display: block;

  width: 1.28rem;
  height: 1.28rem;

  background-image: url("../img/animations/btn_block_locked@2x.png");
  background-size: 100% 100%;

  color:white;

  z-index: 20;
}

.brick--end {
  bottom:11rem;
  left:1.5rem;
}

.brick--No1 {
  bottom:2.5rem;
  right:1rem;
}

.brick--No2 {
  bottom:4.2rem;
  right:4.4rem;
}

.brick--No3 {
  bottom:6.2rem;
  left:1rem;
}


.brick--No4 {
  right:4.4rem;
  bottom:7.9rem;
}

.brick--No5 {
  bottom:9.6rem;
  right:1.4rem;
}

.brick::after {
  text-align: center;
  line-height: 1.28rem;

  font-weight: 600;
  font-size: .426667rem;
  display: block;
}

.brick--No1::after {
  content: "01";
}

.brick--No2::after {
  content: "02";
}

.brick--No3::after {
  content: "03";
}

.brick--No4::after {
  content: "04";
}

.brick--No5::after {
  content: "05";
}

.brick--end::after{
  content: "终"
}

.brick--active {
  color:#000;
  background-image: url("../img/animations/btn_block_unlocked@2x.png");
}

.moon {

  top: .666667rem;
  right: .266667rem;

  width: 1.626667rem;
  height: 1.6rem;

  background-size: 100% 100%;
  background-image: url("../img/animations/moon@2x.png");
}

.back-btn {
  bottom: 1.5033333rem;
  left:50%;
}

.back-btn  img{
  width:  3.2rem;
  height: 1.066667rem;

  transform: translateX(-50%);
}

.cloudA {
  width:  .586667rem;
  height:  .4rem;

  top:1.03333rem;
  right:5.0rem;

  background-size: 100% 100%;
  background-image: url("../img/animations/cloud_a@2x.png");

  z-index: 10;

}

.cloudB {
  width:  .693333rem;
  height:  .48rem;

  top: 1.833333rem;
  right: 1rem;

  background-size: 100% 100%;
  background-image: url("../img/animations/cloud_b@2x.png");

  z-index: 10;
}

.police {
  bottom:3.57rem;
  right:1.55rem;

  width:  2.106667rem;
  height:  2.666667rem;

  background-size: 100% 100%;

  z-index: 20;
}

.police--misson-completed {
  background-image: url("../img/animations/police_missioncompleted@3x.png") !important;
  transition: background-image 0.5s;
}

.police--jumpToPart2 {
  animation: jumpToPart2 2.5s ease-in-out forwards;
}

.police--jumpToPart3 {
  animation: jumpToPart3 2.5s ease-in-out forwards;
}

.police--jumpToPart4 {
  animation: jumpToPart4 2.5s ease-in-out forwards;
}

.police--jumpToPart5 {
  animation: jumpToPart5 2.5s ease-in-out forwards;
}

.police--jumpToEnd {
  animation: jumpToEnd 2.5s ease-in-out forwards;
}

.police--towardLeft {
  background-image: url("../img/animations/run_left.gif?version=33");
}

.police--towardRight {
  background-image: url("../img/animations/run_right.gif?version=33");
}

.cheater {
  bottom:12.3rem;
  left:1.7rem;

  width: 1.2rem;
  height:  1.853333rem;

  background-size: 100%;
  background-image: url("../img/animations/cheat.gif?version=33");

  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;

  z-index: 20;
}

.lightA {

  top:30%;
  left: -.133333rem;

  height: 3.973333rem;
  width: 120%;

  background-size: 100% 100%;
  background-image:url("../img/animations/light_a@2x.png");

  animation: shake 5s linear infinite;


  transform-origin: left bottom;

}

.lightB {
  top:31%;
  right:  0;

  height: 3.973333rem;
  width: 120%;

  background-size: 100% 100%;
  background-image:url("../img/animations/light_b@2x.png");

  transform-origin: bottom right;
  animation: shakeFromRightBottom 5s linear infinite;

}

/* 弹窗 */
.layer {
  position: fixed;

  top:0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.8);

  display: none;

  z-index: 40;
}

.pop-up {
  min-height: 4.64rem;

  margin:0 .546667rem;

  border-radius:  .213333rem;
  background-color: #fff;

  margin-top:60%;

  position: relative;
}

.pop-up .close-btn {

  position: absolute;

  right: 0;
  top: -.966667rem;

  background-color: rgba(0, 0, 0, 0.8);

  content: '';
  display: block;

  width:  .8rem;
  height: .8rem;
}

.pop-up_logo-wrap {
  text-align: center;

  padding-top: .466667rem;
}

.pop-up_logo {
  width: 2.32rem;
}

.pop-up_text {
  color:#FF1382;
  font-size:  .426667rem;
  line-height: .613333rem;
  font-weight: 500;
  text-align: center;

  margin-top: .573333rem;
  margin-bottom: .52rem;
}

.pop-up_btn-wrap {
  display: flex;
  display: -webkit-flex;

  justify-content: space-between;
  padding:0 .693333rem;
}

.pop-up_btn {

  display: block;

  width:  3.066667rem;
  height:  .8rem;


  background-size: 100% 100%;
}

.pop-up_btn--continue {
  background-image: url("../img/animations/btn_lately@3x.png");
}

.pop-up_btn--goToDraw {
  background-image: url("../img/animations/btn_reanswer@3x.png");
}

/* 1关跳2关动画 */
@keyframes jumpToPart2 {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-3.4rem, -2.2rem);
  }

  100% {
    transform: translate(-3.4rem, -1.7rem);
  }
}

/* 2关到3关 */
@keyframes jumpToPart3 {
  0% {
    transform: translate(0, 0);
    background-image: url("../img/animations/run_left.gif?version=33");
  }

  50% {
    transform: translate(-2.3rem, -2.2rem);
    background-image: url("../img/animations/run_left.gif?version=33");
  }

  70% {
    transform: translate(-2.3rem, -2.0rem);
    background-image: url("../img/animations/run_right.gif?version=33");
  }

  100% {
    transform: translate(-1.5rem, -2.0rem);
    background-image: url("../img/animations/run_right.gif?version=33");
  }
}


@keyframes jumpToPart4 {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(5.5rem, -2.0rem);
  }

  100% {
    transform: translate(5.5rem, -1.7rem);
  }
}

@keyframes jumpToPart5 {
  0% {
    transform: translate(0, 0);
    background-image: url("../img/animations/run_right.gif?version=33");
  }

  50% {
    transform: translate(4.9rem, -2.0rem);
    background-image: url("../img/animations/run_right.gif?version=33");
  }

  70% {
    transform: translate(4.9rem, -1.7rem);
    background-image: url("../img/animations/run_left.gif?version=33");
  }

  100% {
    transform: translate(3.3rem, -1.7rem);
    background-image: url("../img/animations/run_left.gif?version=33");
  }
}

/* 跳到终点 */
@keyframes jumpToEnd {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-4.6rem, -2.0rem);
  }

  100% {
    transform: translate(-4.6rem, -1.2rem);
  }
}

/* 匪徒掉落 */
@keyframes moveToLeftTop{
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(30deg) translateX(-10rem);
  }

  100% {
    transform: translateY(-10rem);
  }
}


.flag {
  width:  6.106667rem;
  height:  2.973333rem;

  background-size: 100% 100%;
  background-image: url("../img/animations/bg_scroll@3x.png");

  top:-0.4rem;
  left:2.25rem;

  z-index: 11;

  display: none;
}

@keyframes shake {
  0% {
    transform: rotate(0deg)
  }

  25% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(0deg)
  }

  75% {
    transform: rotate(5deg)
  }

  100% {
    transform: rotate(0deg)
  }
}

@keyframes shakeFromRightBottom {
  0% {
    transform: rotate(0deg)
  }

  25% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(0deg)
  }

  75% {
    transform: rotate(-5deg)
  }

  100% {
    transform: rotate(0deg)
  }
}