@import "//at.alicdn.com/t/font_1818392_rj71nrki32n.css";
#wstatus {
    position:fixed;
    left:200px;
    top:400px;
    width:auto;
    max-width:80%;
    height:auto;
    text-align:center;
    line-height:20px;
    background:rgba(0,0,0,.7)!important;
    border-radius:6px;
    padding:9px;
    z-index:9999999
}
#wstatus .wstatus_s {
    position: relative;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    margin:auto;
    justify-content:center;
}
#wstatus .wstatus_s i {
    font-size:28px;
    color:#fff;
}
#wstatus .wstatus_s2 {
     opacity:0;
     animation:tiptop .5s linear .6s forwards;
 }
@keyframes tiptop {
    0% {
        transform:scale(0.8);
    }
    10% {
        opacity:1;
    }
    50% {
        transform:scale(1.2);
        opacity:1;
    }
    100% {
        transform:scale(1);
        opacity:1;
    }
}#wstatus .wstatus_s3 {
     background:url(./loading.svg);
     position:relative;
     top:-.01rem;
     display:block;
     margin:0 auto;
     background-size:100% 100%;
     vertical-align:middle;
     -webkit-animation:fa-spin 2s infinite linear;
     animation:fa-spin 2s infinite linear;
 }
@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform:rotate(0);
        transform:rotate(0);
    }
    100% {
        -webkit-transform:rotate(359deg);
        transform:rotate(359deg);
    }
}@keyframes fa-spin {
     0% {
         -webkit-transform:rotate(0);
         transform:rotate(0);
     }
     100% {
         -webkit-transform:rotate(359deg);
         transform:rotate(359deg);
     }
 }#wstatus .wstatus_s4 {
      border-radius:50%;
      border:2px solid rgba(255,255,255,0.5);
      box-sizing:content-box;
      height:34px;
      padding:0;
      position:relative;
      width:34px;
      animation:animateErrorIcon .5s;
  }
#wstatus .wstatus_f {
    width:auto;
    text-align:center;
    font-size:15px;
    color:#fff;
    font-family:"微软雅黑";
    display:block;
    margin:5px auto 5px;
    letter-spacing:2px;
    word-wrap:break-word
}
#bremove {
    width:100%;
    height:100%;
    background:#000;
    opacity:0.3;
    filter:alpha(opacity=30);
    z-index:9999;
    position:fixed;
    left:0;
    top:0;
}
body .span {
    display:block;
    width:120px;
    height:34px;
    line-height:34px;
    background:#390;
    margin:20px 0 0 100px;
    color:#f00;
    text-align:center;
    font-family:"微软雅黑";
    font-size:14px;
}
body .span:hover {
    background:#360;
    cursor:pointer;
}
.cirqueBox {
    position:relative;
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.cirqueRed {
    position:absolute;
    width:70%;
    height:70%;
    content:'';
    border-radius:50%;
    border:2px solid #FFFFFF;
    animation:mymove .5s linear 1 forwards;
}
@keyframes mymove {
    0% {
        clip-path:polygon(0 0,0 0,0 0,0 0,0 0);
    }
    5% {
        clip-path:polygon(50% -1%,75% -1%,100% -1%,75% 75%,50% 50%);
    }
    12% {
        clip-path:polygon(50% -1%,100% -1%,100% 50%,75% 50%,50% 50%);
    }
    25% {
        clip-path:polygon(50% -1%,100% -1%,100% 50%,100% 100%,50% 50%);
    }
    50% {
        clip-path:polygon(50% -1%,100% -1%,100% 100%,50% 100%,50% 50%);
    }
    62% {
        clip-path:polygon(50% -1%,100% -1%,100% 100%,-1% 100%,50% 50%);
    }
    75% {
        clip-path:polygon(50% -1%,300% -1%,-1% 300%,-1% 50%,50% 50%);
    }
    87% {
        clip-path:polygon(50% -1%,300% -1%,-1% 300%,0 0,50% 50%);
    }
    100% {
        clip-path:polygon(50% -1%,300% -1%,-1% 300%,-1% -1%,50% -1%);
    }
}.sa-error-x {
     display:block;
     position:absolute;
     z-index:2;
     top:14px;
 }
.sa-error-left,.sa-error-right {
    border-radius:2px;
    display:block;
    height:2px;
    width:15px;
    position:absolute;
    z-index:2;
    background-color:#FFFFFF;
    top:11px;
}
.sa-error-left {
    left:5px;
    transform:rotate(45deg);
    opacity:0;
    animation:animateXLeft .25s .5s alternate forwards;
}
.sa-error-right {
    right:4px;
    opacity:0;
    transform:rotate(-45deg);
    animation:animateXRight .25s .5s alternate forwards;
}
@keyframes animateXLeft {
    0% {
        left:31px;
        top:24px;
        width:0;
        opacity:0;
    }
    50% {
        left:17px;
        top:17px;
        width:9px;
        opacity:0.5;
    }
    100% {
        left:5px;
        top:11px;
        width:15px;
        opacity:1;
    }
}@keyframes animateXRight {
     0% {
         right:30px;
         top:24px;
         width:0;
         opacity:0;
     }
     50% {
         right:16px;
         top:17px;
         width:7px;
         opacity:0.5;
     }
     100% {
         right:4px;
         top:11px;
         width:15px;
         opacity:1;
     }
 }.sa-correct-v {
      display:block;
      position:absolute;
      z-index:2;
      top: 0;
      left: 0;
      right: 0;
    margin: 0 auto;
  }
.sa-correct-left {
    border-radius:2px;
    height:2px;
    width:8px;
    position:absolute;
    z-index:2;
    background-color:#FFFFFF;
    left: 3px;
    top: 15px;
    opacity:0;
    transform:rotate(45deg);
    animation:animateXLeftv .5s .35s alternate forwards;
}
.sa-correct-right {
    border-radius:2px;
    height:2px;
    width:15px;
    position:absolute;
    z-index:2;
    background-color:#FFFFFF;
    /*left: 7px;*/
    /*top: 13px;*/
    opacity:0;
    transform:rotate(-45deg);
    animation:animateXRightv .5s .5s alternate forwards;
}
@keyframes animateXLeftv {
    0% {
        width:17px;
        transform:rotate(45deg);
        opacity:0;
        left: -5px;
        top: 11px;
    }
    100% {
        width:9px;
        left: 3px;
        top: 15px;
        opacity:1;
    }
}@keyframes animateXRightv {
     0% {
         left: 9px;
         top: 17px;
         width:0;
         opacity:0;
     }
     100% {
         left: 7px;
         top: 12px;
         width:17px;
         opacity:1;
     }
 }.sa-tip-v {
      display:block;
      position:absolute;
      top:8px;
      left:8px;
      z-index:2;
      width:34px;
      height:34px;
  }
.tip-icon {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    width:24px;
    height:24px;
    background:url(tip.svg) no-repeat;
    background-size:100%;
    opacity:0;
    z-index:10;
    animation:scalebig .25s 0.45s alternate forwards;
}
@keyframes scalebig {
    0% {
        opacity:0;
        transform:scale(0);
    }
    80% {
        opacity:1;
        transform:scale(1.1);
    }
    100% {
        opacity:1;
        transform:scale(1);
    }
}.Jittercss {
     animation:Jitteranimate .5s;
 }
@keyframes Jitteranimate {
    0% {
        transform:translate(-15px,0);
    }
    15% {
        transform:translate(15px,0);
    }
    35% {
        transform:translate(-15px,0);
    }
    50% {
        transform:translate(15px,0);
    }
    75% {
        transform:translate(-15px,0);
    }
    90% {
        transform:translate(15px,0);
    }
    100% {
        transform:translate(0,0);
    }
}