.wrap{
    width:50vmin;
    height:50vmin;
    position:relative;
    margin: 0 auto;
}
.avatar-pic{
    width:50vmin;
    height:50vmin;
    border-radius:50%;
    overflow:hidden;
    display:block;
    cursor:default;
}
.avatar-pic>img{
    width: 100%;
    height: 100%;
}
.wrap>i{
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin:auto;
    width:12.5vmin;
    height:12.5vmin;
    outline:none;
    border-radius:50%;
    cursor:pointer;
    background-color:rgba(0,0,0,.4);
}
.zantin{
    background:url(../img/sys/playing.png) no-repeat 0px top;
    background-size:cover;
}
.action{
    background:url(../img/sys/playing.png) no-repeat 0px bottom;
    background-size:cover;
}



.avatar{
    animation:rotator 10s linear infinite;
    -webkit-animation:rotator 10s linear infinite;
    -moz-animation:rotator 10s linear infinite;
    -o-animation:rotator 10s linear infinite;
    -ms-animation:rotator 10s linear infinite;

    -webkit-animation-play-state:running;
    -moz-animation-play-state:running;
    -o-animation-play-state:running;
    -ms-animation-play-state:running;
    animation-play-state:running;
}
.pause{
    animation-play-state:paused;
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    -ms-animation-play-state:paused;
}

@keyframes rotator{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}
@-webkit-keyframes rotator{
    form{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotator{
    form{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}
@-o-keyframes rotator{
    form{-o-transform:rotate(0deg);}
    to{-o-transform:rotate(360deg);}
}
@-ms-keyframes rotator{
    form{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(360deg);}
}

/* 视频播放器 */

video {
    width: 100%;
    max-height: calc(100vh - 5.5rem);
}