@mixin c3($key , $value){
  -webkit-#{$key}: $value;
  -moz-#{$key}: $value;
  -o-#{$key}: $value;
  #{$key}: $value;
}
.jf-shadow{
 width: 100%;
 height: 100%;
 position: fixed;
 left: 0;
 top: 0;
 z-index: 10002;
}
.jf-toast{
  top: 50%;
  max-width: 80%;
  left: 50%;
  @include c3(transform,translate3d(-50%,-50%,0))
  @include c3(transition,all .3s linear)
  overflow: hidden;
  z-index: 12;
  @include font-dpr(28);
  text-align: center;
  position: fixed;
  width: 100%;
}
.jf-toast_info{
  border-radius: .2667rem;
  -webkit-border-radius: .2rem;
  background: rgba(0,0,0,.8);
  color: #fff;
  text-align: center;
  padding: .4rem .5333rem;
  line-height: 160%;
  display: inline-block;
  box-shadow: 1px 1px 1px #000;
}
.toast-fade-enter-active {
  @include c3(animation,toast-fade-in .5s)
}

.toast-fade-leave-active {
  @include c3(animation,toast-fade-out .5s)
}
@keyframes toast-fade-in {
0% {
  @include c3(transform,translate3d(0, 5%, 0))
  opacity: 0;
}
100% {
  @include c3(transform,translate3d(0, 0, 0))
  opacity: 1;
}
}

@keyframes toast-fade-out {
0% {
  @include c3(transform,translate3d(0, 0, 0))
  opacity: 1;
}
100% {
  @include c3(transform,translate3d(0, 5%, 0))
  opacity: 0;
}
}