body{
	overflow-y: scroll;
}
#J_yao{
	width: 100px;
  height: 30px;
  line-height: 30px;
  background: #f60;
  color: #fff;
  display: block;
  margin: 0 auto;
  text-align: center;
}
#shake{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    //display: none;
    visibility: hidden;
  
    .shakeTop,.shakeBottom{
      height: 50%;
      background-color: #f4f4f4;
      overflow: hidden;
      position: relative;
    }
    .shakeTop{
      &.animation{
        animation: shakeIn1 .8s ease-in-out;
      }
      &.animation2{
        animation: shakeOut1 .8s ease-in-out forwards;
      }
      .shake-icon{
        width: 45px;
        height: 50px;
        background: url("http://7xon9l.com1.z0.glb.clouddn.com/shake.png") no-repeat;
        background-size: 45px 50px;
        position: absolute;
        left: 50%;
        bottom: -25px;
        margin-left: -23px;
      }
    }
    .shakeBottom{
      &.animation{
        animation: shakeIn2 .8s ease-in-out;
      }
      &.animation2{
        animation: shakeOut2 .8s ease-in-out forwards;
      }
      .shake-icon{
        width: 45px;
        height: 50px;
        background: url("http://7xon9l.com1.z0.glb.clouddn.com/shake.png") no-repeat;
        background-size: 45px 50px;
        position: absolute;
        left: 50%;
        top: -25px;
        margin-left: -23px;
      }
    }
    &>.shake-icon{
      width: 45px;
      height: 50px;
      background: url("http://7xon9l.com1.z0.glb.clouddn.com/shake.png") no-repeat;
      background-size: 45px 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -23px;
      animation: shake_shake .5s ease-in-out;
      display: none;
    }
    .shake-tips{
      display: -none;
    }
    .kart-loader{
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translate(-50%,0) scale(.4);
      margin-left: -80px;
    }
    .tips{
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translate(-50%,0);
      color: #969696;
    }
  }


@keyframes shakeIn1 {
  0%{
    transform: translateY(-100%);
  }
  100%{
    transform: translateY(0);
  }
}

@keyframes shakeIn2 {
  0%{
    transform: translateY(100%);
  }
  100%{
    transform: translateY(0);
  }
}

@keyframes shakeOut1 {
  0%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(-100%);
  }
}

@keyframes shakeOut2 {
  0%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(100%);
  }
}

@keyframes shake_shake {
  0%{
    transform: rotate(0deg);
  }
  7%{
    transform: rotate(15deg);
  }
  14%{
    transform: rotate(30deg);
  }
  21%{
    transform: rotate(45deg);
  }
  28%{
    transform: rotate(60deg);
  }
  35%{
    transform: rotate(45deg);
  }
  42%{
    transform: rotate(30deg);
  }
  47%{
    transform: rotate(15deg);
  }
  54%{
    transform: rotate(30deg);
  }
  61%{
    transform: rotate(45deg);
  }
  68%{
    transform: rotate(60deg);
  }
  75%{
    transform: rotate(45deg);
  }
  82%{
    transform: rotate(30deg);
  }
  89%{
    transform: rotate(15deg);
  }
  96%{
    transform: rotate(0deg);
  }
}