.my-video{width:57vw;height:32vw;margin:48px auto 0;position:relative}.my-video .video-content{display:block;height:100%;margin:0 auto}.my-video .video-title{position:absolute;z-index:1;top:0;left:0;opacity:.8;background-image:linear-gradient(180deg,rgba(0,0,0,.7) 0,rgba(0,0,0,0) 100%);width:100%;height:80px;font-size:20px;color:#FFF;line-height:80px;padding-left:24px;margin:0;box-sizing:border-box}.my-video .video-play{display:block;width:64px;height:64px;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;background:rgba(255,255,255,.2);border-radius:100%;cursor:pointer}.my-video .video-control{position:absolute;z-index:1;bottom:0;left:0;display:-ms-flexbox;display:flex;width:100%;height:80px;opacity:.8;background-image:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.7) 100%)}.my-video .video-control .video-next,.my-video .video-control .video-start,.my-video .video-control .video-stop{width:40px;height:40px;margin:24px 0 0 24px;background-size:cover;background-position:center center;background-repeat:no-repeat;background-color:transparent;cursor:pointer}.my-video .video-control .video-start{background-image:url(/content/images/play40_normal.png)}.my-video .video-control .video-start:active{background-image:url(/content/images/play40_press.png)}.my-video .video-control .video-stop{background-image:url(/content/images/pause40_normal.png)}.my-video .video-control .video-stop:active{background-image:url(/content/images/pause40_press.png)}.my-video .video-control .video-next{background-image:url(/content/images/next40_normal.png)}.my-video .video-control .video-next:active{background-image:url(/content/images/next40_press.png)}.my-video .video-control .video-now{font-size:16px;color:#FFF;line-height:24px;margin:32px 0 0 32px;font-weight:700}.my-video .video-control .video-progress{width:522px;height:6px;background:rgba(255,255,255,.4);border-radius:4px;margin:40px 0 0 24px;cursor:pointer}.my-video .video-control .video-progress.long{width:1421px}.my-video .video-control .video-progress .progress-bar{background:#0AF;height:6px;width:0%;border-radius:3px;position:relative}.my-video .video-control .video-progress .progress-bar .progress-button{width:8px;height:16px;background:#FFF;box-shadow:0 0 8px 0 rgba(0,170,255,.5);border-radius:2px;position:absolute;right:-8px;top:-5px;z-index:3}.my-video .video-control .video-total{font-size:16px;color:#FFF;line-height:24px;margin:32px 0 0 24px;font-weight:700;white-space:nowrap}.my-video .video-control .video-voice{width:40px;height:40px;position:relative;margin:24px 0 0 24px}.my-video .video-control .video-voice .voice{width:40px;height:40px;background-image:url(/content/images/sound40_normal.png);background-size:cover;background-position:center center;background-repeat:no-repeat;background-color:transparent;cursor:pointer}.my-video .video-control .video-voice .voice:active{background-image:url(/content/images/sound40_press.png)}.my-video .video-control .video-voice .voice-box{position:absolute;width:24px;height:160px;background:rgba(0,0,0,.6);border-radius:2px;bottom:39px;left:8px;padding:2px 0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.my-video .video-control .video-voice .voice-box .voice-number{width:24px;height:24px;color:#fff;line-height:24px;font-size:12px;text-align:center;margin-bottom:2px}.my-video .video-control .video-voice .voice-box .voice-bg{width:8px;height:100px;background-color:#fff;display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.my-video .video-control .video-voice .voice-box .voice-bg .voice-bar{width:8px;background-color:#08f;position:relative}.my-video .video-control .video-voice .voice-box .voice-bg .voice-bar .voice-botton{width:14px;height:14px;position:absolute;border-radius:14px;background-color:#fff;top:-7px;left:-3px;cursor:pointer}.my-video .video-control .video-setting{width:40px;height:40px;position:relative;margin:24px 0 0 24px}.my-video .video-control .video-setting .setting{width:40px;height:40px;background-image:url(/content/images/setting40_normal.png);background-size:cover;background-position:center center;background-repeat:no-repeat;background-color:transparent;cursor:pointer}.my-video .video-control .video-setting .setting:active{background-image:url(/content/images/setting40_press.png)}.my-video .video-control .video-setting .setting-box{position:absolute;width:128px;height:208px;background:#FFF;border:1px solid #e6e6e6;box-shadow:0 0 12px 0 rgba(0,0,0,.2);border-radius:8px;bottom:56px;left:-44px;padding:8px 0 12px;box-sizing:border-box}.my-video .video-control .video-setting .setting-box .setting-title{font-size:16px;color:#666;line-height:44px;font-weight:600;width:100%;height:44px;box-sizing:border-box;padding:0 0 0 24px;margin:0}.my-video .video-control .video-setting .setting-box .setting-item{font-size:20px;color:#333;line-height:48px;font-weight:600;text-align:center;width:100%;height:48px;box-sizing:border-box;margin:0}.my-video .video-control .video-setting .setting-box .setting-item:active,.my-video .video-control .video-setting .setting-box .setting-item:hover{color:#08F}.my-video .video-control .video-setting .setting-box .setting-item.active{color:#08F;background-color:#E5F3FF}.my-video .video-control .video-exit,.my-video .video-control .video-full{width:40px;height:40px;margin:24px 24px 0;cursor:pointer;background-size:cover;background-position:center center;background-repeat:no-repeat;background-color:transparent}.my-video .video-control .video-full{background-image:url(/content/images/fullscreen40_normal.png)}.my-video .video-control .video-full:active{background-image:url(/content/images/fullscreen40_press.png)}.my-video .video-control .video-exit{background-image:url(/content/images/esc_normal.png)}.my-video .video-control .video-exit:active{background-image:url(/content/images/esc_press.png)}