@charset "utf-8";
.pace{
    position: fixed;
    left: 0;top: 0;
    padding-bottom: .7rem;
    width: 100%;
    height: 100%;
    color: #fff;
    background: #2d5a9b url(../images/pace-bg.jpg) no-repeat;
    background-size: 100% auto;
    z-index: 9999;
    display: flex;
    -webkit-display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}

.pace-image{
    width: 6.5rem;
    height: 6.43rem;
    background: url(../images/pace-img.png) no-repeat;
    background-size: 100% 100%;
}

.pace-progress{
    position: relative;
    margin-top: .7rem;
    padding: .08rem;
    width: 4.9rem;
    height: .42rem;
    background-image: linear-gradient(0deg, #a992e9, #34bdf4 70%);
    background-image: -webkit-linear-gradient(0deg, #a992e9, #34bdf4 70%);
    border-radius: 1rem;
}
.pace-progress:after{
    display: block;
    position: absolute;
    right: -.25rem;bottom: .18rem;
    width: .49rem;
    height: .71rem;
    background: url(../images/flag.png) no-repeat;
    background-size: 100% 100%;
    content: '';
    z-index: 10;
}
.pace-progress-inner{
    position: relative;
    height: .26rem;
    background: #009bde;
    border-radius: 1rem;
    box-shadow: inset 0 .03rem .05rem rgba(0,0,0,.1);
    overflow: hidden;
}
@-webkit-keyframes progMov{
  from{ background-position: 40px 0; }
  to{ background-position: 0 0; }
}
@keyframes progMov{
  from { background-position: 40px 0; }
  to { background-position: 0 0; }
}
.pace-progress-inner div{
    position: relative;
    width: 0;
    height: .26rem;
    background-color: #f6bf36;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 40px 40px;
    background-repeat: repeat;
    border-radius: .1rem;
    animation: progMov 2s infinite linear;
    -webkit-animation: progMov 2s infinite linear;
}
.pace-progress-inner div:after{
    display: block;
    position: absolute;
    right: 0;top: 0;left: 0;
    height: .04rem;
    background: #fff37b;
    opacity: .28;
    content: '';
}
.pace-progress-txt{
    position: absolute;
    left: 50%;top: 50%;
    display: flex;
    -webkit-display: flex;
    align-items: center;
    -webkit-align-items: center;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    font-size: .24rem;
    font-family: arial;
    z-index: 10;
    
}
.pace-progress-txt:before{
    margin-right: .12rem;
    width: 1.06rem;
    height: .17rem;
    background: url(../images/loading.png) no-repeat;
    background-size: 100% 100%;
    content: '';
}


.pace-done .pace{
    display: none;
}