button[data-balloon] {
 overflow:visible
}
[data-balloon] {
 cursor:pointer;
 position:relative
}
[data-balloon]:after {
 background:hsla(0,0%,7%,.9);
 border-radius:4px;
 color:#fff;
 content:attr(data-balloon);
 font-family:sans-serif!important;
 font-size:12px!important;
 font-style:normal!important;
 font-weight:400!important;
 padding:.5em 1em;
 text-shadow:none!important;
 white-space:nowrap
}
[data-balloon]:after,
[data-balloon]:before {
 filter:alpha(opactiy=0);
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 -moz-opacity:0;
 -khtml-opacity:0;
 opacity:0;
 pointer-events:none;
 position:absolute;
 transition:all .18s ease-out .18s;
 z-index:10
}
[data-balloon]:before {
 background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");
 background-size:100% auto;
 content:"";
 height:6px;
 width:18px
}
[data-balloon]:hover:after,
[data-balloon]:hover:before,
[data-balloon][data-balloon-visible]:after,
[data-balloon][data-balloon-visible]:before {
 filter:alpha(opactiy=100);
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 -moz-opacity:1;
 -khtml-opacity:1;
 opacity:1;
 pointer-events:auto
}
[data-balloon].font-awesome:after {
 font-family:FontAwesome
}
[data-balloon][data-balloon-break]:after {
 white-space:pre
}
[data-balloon][data-balloon-blunt]:after,
[data-balloon][data-balloon-blunt]:before {
 transition:none
}
[data-balloon][data-balloon-pos=up]:after {
 margin-bottom:11px
}
[data-balloon][data-balloon-pos=up]:after,
[data-balloon][data-balloon-pos=up]:before {
 bottom:100%;
 left:50%;
 transform:translate(-50%,10px);
 transform-origin:top
}
[data-balloon][data-balloon-pos=up]:before {
 margin-bottom:5px
}
[data-balloon][data-balloon-pos=up]:hover:after,
[data-balloon][data-balloon-pos=up]:hover:before,
[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=up][data-balloon-visible]:before {
 transform:translate(-50%)
}
[data-balloon][data-balloon-pos=up-left]:after {
 left:0;
 margin-bottom:11px
}
[data-balloon][data-balloon-pos=up-left]:after,
[data-balloon][data-balloon-pos=up-left]:before {
 bottom:100%;
 transform:translateY(10px);
 transform-origin:top
}
[data-balloon][data-balloon-pos=up-left]:before {
 left:5px;
 margin-bottom:5px
}
[data-balloon][data-balloon-pos=up-left]:hover:after,
[data-balloon][data-balloon-pos=up-left]:hover:before,
[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before {
 transform:translate(0)
}
[data-balloon][data-balloon-pos=up-right]:after {
 margin-bottom:11px;
 right:0
}
[data-balloon][data-balloon-pos=up-right]:after,
[data-balloon][data-balloon-pos=up-right]:before {
 bottom:100%;
 transform:translateY(10px);
 transform-origin:top
}
[data-balloon][data-balloon-pos=up-right]:before {
 margin-bottom:5px;
 right:5px
}
[data-balloon][data-balloon-pos=up-right]:hover:after,
[data-balloon][data-balloon-pos=up-right]:hover:before,
[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before {
 transform:translate(0)
}
[data-balloon][data-balloon-pos=down]:after {
 margin-top:11px
}
[data-balloon][data-balloon-pos=down]:after,
[data-balloon][data-balloon-pos=down]:before {
 left:50%;
 top:100%;
 transform:translate(-50%,-10px)
}
[data-balloon][data-balloon-pos=down]:before {
 background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");
 background-size:100% auto;
 height:6px;
 margin-top:5px;
 width:18px
}
[data-balloon][data-balloon-pos=down]:hover:after,
[data-balloon][data-balloon-pos=down]:hover:before,
[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=down][data-balloon-visible]:before {
 transform:translate(-50%)
}
[data-balloon][data-balloon-pos=down-left]:after {
 left:0;
 margin-top:11px;
 top:100%;
 transform:translateY(-10px)
}
[data-balloon][data-balloon-pos=down-left]:before {
 background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");
 background-size:100% auto;
 height:6px;
 left:5px;
 margin-top:5px;
 top:100%;
 transform:translateY(-10px);
 width:18px
}
[data-balloon][data-balloon-pos=down-left]:hover:after,
[data-balloon][data-balloon-pos=down-left]:hover:before,
[data-balloon][data-balloon-pos=down-left][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=down-left][data-balloon-visible]:before {
 transform:translate(0)
}
[data-balloon][data-balloon-pos=down-right]:after {
 margin-top:11px;
 right:0;
 top:100%;
 transform:translateY(-10px)
}
[data-balloon][data-balloon-pos=down-right]:before {
 background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");
 background-size:100% auto;
 height:6px;
 margin-top:5px;
 right:5px;
 top:100%;
 transform:translateY(-10px);
 width:18px
}
[data-balloon][data-balloon-pos=down-right]:hover:after,
[data-balloon][data-balloon-pos=down-right]:hover:before,
[data-balloon][data-balloon-pos=down-right][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=down-right][data-balloon-visible]:before {
 transform:translate(0)
}
[data-balloon][data-balloon-pos=left]:after {
 margin-right:11px;
 right:100%;
 top:50%;
 transform:translate(10px,-50%)
}
[data-balloon][data-balloon-pos=left]:before {
 background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M0 33.342V1.338c0 6 12.002 11.627 12.002 16.002C12.002 21.715 0 27.406 0 33.342z'/%3E%3C/svg%3E");
 background-size:100% auto;
 height:18px;
 margin-right:5px;
 right:100%;
 top:50%;
 transform:translate(10px,-50%);
 width:6px
}
[data-balloon][data-balloon-pos=left]:hover:after,
[data-balloon][data-balloon-pos=left]:hover:before,
[data-balloon][data-balloon-pos=left][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=left][data-balloon-visible]:before {
 transform:translateY(-50%)
}
[data-balloon][data-balloon-pos=right]:after {
 left:100%;
 margin-left:11px;
 top:50%;
 transform:translate(-10px,-50%)
}
[data-balloon][data-balloon-pos=right]:before {
 background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M12 2.658v32.004c0-6-12.002-11.627-12.002-16.002C-.002 14.285 12 8.594 12 2.658z'/%3E%3C/svg%3E");
 background-size:100% auto;
 height:18px;
 left:100%;
 margin-left:5px;
 top:50%;
 transform:translate(-10px,-50%);
 width:6px
}
[data-balloon][data-balloon-pos=right]:hover:after,
[data-balloon][data-balloon-pos=right]:hover:before,
[data-balloon][data-balloon-pos=right][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=right][data-balloon-visible]:before {
 transform:translateY(-50%)
}
[data-balloon][data-balloon-length=small]:after {
 white-space:normal;
 width:80px
}
[data-balloon][data-balloon-length=medium]:after {
 white-space:normal;
 width:150px
}
[data-balloon][data-balloon-length=large]:after {
 white-space:normal;
 width:260px
}
[data-balloon][data-balloon-length=xlarge]:after {
 white-space:normal;
 width:380px
}
@media screen and (max-width:768px) {
 [data-balloon][data-balloon-length=xlarge]:after {
  white-space:normal;
  width:90vw
 }
}
[data-balloon][data-balloon-length=fit]:after {
 white-space:normal;
 width:100%
}
@keyframes my-face {
 2% {
  transform:translateY(1.5px) rotate(1.5deg)
 }
 4% {
  transform:translateY(-1.5px) rotate(-.5deg)
 }
 6% {
  transform:translateY(1.5px) rotate(-1.5deg)
 }
 8% {
  transform:translateY(-1.5px) rotate(-1.5deg)
 }
 10% {
  transform:translateY(2.5px) rotate(1.5deg)
 }
 12% {
  transform:translateY(-.5px) rotate(1.5deg)
 }
 14% {
  transform:translateY(-1.5px) rotate(1.5deg)
 }
 16% {
  transform:translateY(-.5px) rotate(-1.5deg)
 }
 18% {
  transform:translateY(.5px) rotate(-1.5deg)
 }
 20% {
  transform:translateY(-1.5px) rotate(2.5deg)
 }
 22% {
  transform:translateY(.5px) rotate(-1.5deg)
 }
 24% {
  transform:translateY(1.5px) rotate(1.5deg)
 }
 26% {
  transform:translateY(.5px) rotate(.5deg)
 }
 28% {
  transform:translateY(.5px) rotate(1.5deg)
 }
 30% {
  transform:translateY(-.5px) rotate(2.5deg)
 }
 32% {
  transform:translateY(1.5px) rotate(-.5deg)
 }
 34% {
  transform:translateY(1.5px) rotate(-.5deg)
 }
 36% {
  transform:translateY(-1.5px) rotate(2.5deg)
 }
 38% {
  transform:translateY(1.5px) rotate(-1.5deg)
 }
 40% {
  transform:translateY(-.5px) rotate(2.5deg)
 }
 42% {
  transform:translateY(2.5px) rotate(-1.5deg)
 }
 44% {
  transform:translateY(1.5px) rotate(.5deg)
 }
 46% {
  transform:translateY(-1.5px) rotate(2.5deg)
 }
 48% {
  transform:translateY(-.5px) rotate(.5deg)
 }
 50% {
  transform:translateY(.5px) rotate(.5deg)
 }
 52% {
  transform:translateY(2.5px) rotate(2.5deg)
 }
 54% {
  transform:translateY(-1.5px) rotate(1.5deg)
 }
 56% {
  transform:translateY(2.5px) rotate(2.5deg)
 }
 58% {
  transform:translateY(.5px) rotate(2.5deg)
 }
 60% {
  transform:translateY(2.5px) rotate(2.5deg)
 }
 62% {
  transform:translateY(-.5px) rotate(2.5deg)
 }
 64% {
  transform:translateY(-.5px) rotate(1.5deg)
 }
 66% {
  transform:translateY(1.5px) rotate(-.5deg)
 }
 68% {
  transform:translateY(-1.5px) rotate(-.5deg)
 }
 70% {
  transform:translateY(1.5px) rotate(.5deg)
 }
 72% {
  transform:translateY(2.5px) rotate(1.5deg)
 }
 74% {
  transform:translateY(-.5px) rotate(.5deg)
 }
 76% {
  transform:translateY(-.5px) rotate(2.5deg)
 }
 78% {
  transform:translateY(-.5px) rotate(1.5deg)
 }
 80% {
  transform:translateY(1.5px) rotate(1.5deg)
 }
 82% {
  transform:translateY(-.5px) rotate(.5deg)
 }
 84% {
  transform:translateY(1.5px) rotate(2.5deg)
 }
 86% {
  transform:translateY(-1.5px) rotate(-1.5deg)
 }
 88% {
  transform:translateY(-.5px) rotate(2.5deg)
 }
 90% {
  transform:translateY(2.5px) rotate(-.5deg)
 }
 92% {
  transform:translateY(.5px) rotate(-.5deg)
 }
 94% {
  transform:translateY(2.5px) rotate(.5deg)
 }
 96% {
  transform:translateY(-.5px) rotate(1.5deg)
 }
 98% {
  transform:translateY(-1.5px) rotate(-.5deg)
 }
 0%,
 to {
  transform:translate(0) rotate(0deg)
 }
}
.dplayer {
 line-height:1;
 overflow:hidden;
 position:relative;
 -webkit-user-select:none;
 -moz-user-select:none;
 user-select:none
}
.dplayer * {
 box-sizing:content-box
}
.dplayer svg {
 height:100%;
 width:100%
}
.dplayer svg circle,
.dplayer svg path {
 fill:#fff
}
.dplayer:-webkit-full-screen {
 background:#000;
 height:100%;
 left:0;
 position:fixed;
 top:0;
 width:100%;
 z-index:100000
}
.dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-bottom.dplayer-danmaku-move,
.dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-top.dplayer-danmaku-move {
 animation:danmaku-center 6s linear;
 animation-play-state:inherit
}
.dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-right.dplayer-danmaku-move {
 animation:danmaku 8s linear;
 animation-play-state:inherit
}
.dplayer.dplayer-live .dplayer-bar-wrap,
.dplayer.dplayer-live .dplayer-setting-loop,
.dplayer.dplayer-live .dplayer-setting-speed,
.dplayer.dplayer-live .dplayer-time,
.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-comment,
.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-danmaku,
.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-danunlimit,
.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-showdan,
.dplayer.dplayer-no-danmaku .dplayer-danmaku {
 display:none
}
.dplayer.dplayer-arrow .dplayer-danmaku {
 font-size:18px
}
.dplayer.dplayer-arrow .dplayer-icon {
 margin:0 -3px
}
.dplayer.dplayer-playing .dplayer-danmaku .dplayer-danmaku-move {
 animation-play-state:running
}
@media (min-width:900px) {
 .dplayer.dplayer-playing .dplayer-controller,
 .dplayer.dplayer-playing .dplayer-controller-mask {
  opacity:0
 }
 .dplayer.dplayer-playing:hover .dplayer-controller,
 .dplayer.dplayer-playing:hover .dplayer-controller-mask {
  opacity:1
 }
}
.dplayer.dplayer-loading .dplayer-bezel .diplayer-loading-icon {
 display:block
}
.dplayer.dplayer-loading .dplayer-danmaku,
.dplayer.dplayer-loading .dplayer-danmaku-move,
.dplayer.dplayer-paused .dplayer-danmaku,
.dplayer.dplayer-paused .dplayer-danmaku-move {
 animation-play-state:paused
}
.dplayer.dplayer-hide-controller {
 cursor:none
}
.dplayer.dplayer-hide-controller .dplayer-controller,
.dplayer.dplayer-hide-controller .dplayer-controller-mask {
 opacity:0;
 transform:translateY(100%)
}
.dplayer.dplayer-show-controller .dplayer-controller,
.dplayer.dplayer-show-controller .dplayer-controller-mask {
 opacity:1
}
.dplayer.dplayer-fulled {
 height:100%;
 left:0;
 position:fixed;
 top:0;
 width:100%;
 z-index:100000
}
.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-camera-icon,
.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-volume {
 display:none
}
.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-full .dplayer-full-in-icon {
 display:inline-block;
 position:static
}
.dplayer.dplayer-mobile .dplayer-bar-time {
 display:none
}
.dplayer-web-fullscreen-fix {
 left:0;
 margin:0;
 padding:0;
 position:fixed;
 top:0
}
[data-balloon]:before {
 display:none
}
[data-balloon]:after {
 background:hsla(0,0%,7%,.7);
 padding:.3em .7em
}
[data-balloon][data-balloon-pos=up]:after {
 margin-bottom:0
}
.dplayer-bezel {
 bottom:0;
 color:#fff;
 font-size:22px;
 left:0;
 pointer-events:none;
 position:absolute;
 right:0;
 top:0
}
.dplayer-bezel .dplayer-bezel-icon {
 background:rgba(0,0,0,.5);
 border-radius:50%;
 box-sizing:border-box;
 height:52px;
 left:50%;
 margin:-26px 0 0 -26px;
 opacity:0;
 padding:12px;
 pointer-events:none;
 position:absolute;
 top:50%;
 width:52px
}
.dplayer-bezel .dplayer-bezel-icon.dplayer-bezel-transition {
 animation:bezel-hide .5s linear
}
@keyframes bezel-hide {
 0% {
  opacity:1;
  transform:scale(1)
 }
 to {
  opacity:0;
  transform:scale(2)
 }
}
.dplayer-bezel .dplayer-danloading {
 animation:my-face 5s ease-in-out infinite;
 font-size:14px;
 line-height:14px;
 margin-top:-7px;
 position:absolute;
 text-align:center;
 top:50%;
 width:100%
}
.dplayer-bezel .diplayer-loading-icon {
 display:none;
 height:36px;
 left:50%;
 margin:-18px 0 0 -18px;
 pointer-events:none;
 position:absolute;
 top:50%;
 width:36px
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-hide {
 display:none
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot {
 animation:diplayer-loading-dot-fade .8s ease infinite;
 opacity:0;
 transform-origin:4px 4px
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-7 {
 animation-delay:.7s
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-6 {
 animation-delay:.6s
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-5 {
 animation-delay:.5s
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-4 {
 animation-delay:.4s
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-3 {
 animation-delay:.3s
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-2 {
 animation-delay:.2s
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-1 {
 animation-delay:.1s
}
@keyframes diplayer-loading-dot-fade {
 0% {
  opacity:.7;
  transform:scale(1.2)
 }
 50% {
  opacity:.25;
  transform:scale(.9)
 }
 to {
  opacity:.25;
  transform:scale(.85)
 }
}
.dplayer-controller-mask {
 background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
 height:98px;
 width:100%
}
.dplayer-controller,
.dplayer-controller-mask {
 bottom:0;
 position:absolute;
 transition:all .3s ease
}
.dplayer-controller {
 height:41px;
 left:0;
 padding:0 20px;
 right:0;
 -webkit-user-select:none;
 -moz-user-select:none;
 user-select:none
}
.dplayer-controller.dplayer-controller-comment .dplayer-icons {
 display:none
}
.dplayer-controller.dplayer-controller-comment .dplayer-icons.dplayer-comment-box {
 display:block
}
.dplayer-controller .dplayer-bar-wrap {
 bottom:33px;
 cursor:pointer;
 height:3px;
 padding:5px 0;
 position:absolute;
 width:calc(100% - 40px)
}
.dplayer-controller .dplayer-bar-wrap:hover .dplayer-bar .dplayer-played .dplayer-thumb {
 transform:scale(1)
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar-preview {
 background:#fff;
 background-size:auto 100%;
 display:none;
 pointer-events:none;
 position:absolute
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar-preview-canvas {
 height:100%;
 pointer-events:none;
 position:absolute;
 width:100%;
 z-index:1
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar-time {
 word-wrap:normal;
 background-color:rgba(0,0,0,.62);
 border-radius:4px;
 color:#fff;
 font-size:12px;
 left:0;
 opacity:1;
 padding:5px 7px;
 pointer-events:none;
 position:absolute;
 text-align:center;
 top:-20px;
 transition:opacity .1s ease-in-out;
 width:30px;
 word-break:normal;
 z-index:2
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar-time.hidden {
 opacity:0
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar {
 background:hsla(0,0%,100%,.2);
 cursor:pointer;
 height:3px;
 position:relative;
 width:100%
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-loaded {
 background:hsla(0,0%,100%,.4);
 transition:all .5s ease
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-loaded,
.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played {
 bottom:0;
 height:3px;
 left:0;
 position:absolute;
 top:0;
 will-change:width
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played .dplayer-thumb {
 border-radius:50%;
 cursor:pointer;
 height:11px;
 margin-right:-10px;
 margin-top:-4px;
 position:absolute;
 right:5px;
 top:0;
 transform:scale(0);
 transition:all .3s ease-in-out;
 width:11px
}
.dplayer-controller .dplayer-icons {
 bottom:0;
 height:38px;
 position:absolute
}
.dplayer-controller .dplayer-icons.dplayer-comment-box {
 bottom:0;
 color:#fff;
 display:none;
 height:38px;
 left:20px;
 position:absolute;
 right:20px;
 transition:all .3s ease-in-out;
 z-index:2
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-icon {
 padding:7px
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-icon {
 left:0;
 position:absolute;
 top:0
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-send-icon {
 position:absolute;
 right:0;
 top:0
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box {
 background:rgba(28,28,28,.9);
 border-radius:4px;
 bottom:41px;
 box-shadow:0 0 25px rgba(0,0,0,.3);
 font-size:14px;
 left:0;
 padding:10px 10px 16px;
 position:absolute;
 transform:scale(0);
 transition:all .3s ease-in-out;
 width:204px
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box.dplayer-comment-setting-open {
 transform:scale(1)
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box input[type=radio] {
 display:none
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box label {
 cursor:pointer
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-title {
 color:#fff;
 font-size:13px;
 line-height:30px
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type {
 font-size:0
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type .dplayer-comment-setting-title {
 margin-bottom:6px
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type label:nth-child(2) span {
 border-radius:4px 0 0 4px
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type label:nth-child(4) span {
 border-radius:0 4px 4px 0
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type span {
 border:1px solid #fff;
 box-sizing:border-box;
 color:#fff;
 cursor:pointer;
 display:inline-block;
 font-size:12px;
 line-height:16px;
 margin-right:-1px;
 padding:4px 6px;
 text-align:center;
 width:33%
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type input:checked+span {
 background:#e4e4e6;
 color:#1c1c1c
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color {
 font-size:0
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color label {
 display:inline-block;
 font-size:0;
 padding:6px
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color span {
 border-radius:50%;
 box-sizing:border-box;
 cursor:pointer;
 display:inline-block;
 height:22px;
 width:22px
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color span:hover {
 animation:my-face 5s ease-in-out infinite
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input {
 background:none;
 border:none;
 border-radius:4px;
 box-sizing:border-box;
 color:#fff;
 font-size:14px;
 height:100%;
 line-height:18px;
 margin:0;
 outline:none;
 padding:8px 31px;
 text-align:center;
 width:100%
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input::-moz-placeholder {
 color:#fff;
 opacity:.8
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input::placeholder {
 color:#fff;
 opacity:.8
}
.dplayer-controller .dplayer-icons.dplayer-icons-left .dplayer-icon {
 padding:7px
}
.dplayer-controller .dplayer-icons.dplayer-icons-right {
 right:20px
}
.dplayer-controller .dplayer-icons.dplayer-icons-right .dplayer-icon {
 padding:8px
}
.dplayer-controller .dplayer-icons .dplayer-live-badge,
.dplayer-controller .dplayer-icons .dplayer-time {
 color:#eee;
 cursor:default;
 font-size:13px;
 line-height:38px;
 text-shadow:0 0 2px rgba(0,0,0,.5);
 vertical-align:middle
}
.dplayer-controller .dplayer-icons .dplayer-live-dot {
 border-radius:6px;
 content:"";
 display:inline-block;
 height:6px;
 margin-right:5px;
 vertical-align:4%;
 width:6px
}
.dplayer-controller .dplayer-icons .dplayer-icon {
 background-color:transparent;
 border:none;
 box-sizing:border-box;
 cursor:pointer;
 display:inline-block;
 height:100%;
 outline:none;
 vertical-align:middle;
 width:40px
}
.dplayer-controller .dplayer-icons .dplayer-icon .dplayer-icon-content {
 opacity:.8;
 transition:all .2s ease-in-out
}
.dplayer-controller .dplayer-icons .dplayer-icon:hover .dplayer-icon-content {
 opacity:1
}
.dplayer-controller .dplayer-icons .dplayer-icon.dplayer-quality-icon {
 color:#fff;
 font-size:14px;
 line-height:22px;
 width:auto
}
.dplayer-controller .dplayer-icons .dplayer-icon.dplayer-comment-icon {
 padding:10px 9px 9px
}
.dplayer-controller .dplayer-icons .dplayer-icon.dplayer-setting-icon {
 padding-top:8.5px
}
.dplayer-controller .dplayer-icons .dplayer-icon.dplayer-volume-icon {
 width:43px
}
.dplayer-controller .dplayer-icons .dplayer-volume {
 cursor:pointer;
 display:inline-block;
 height:100%;
 position:relative
}
.dplayer-controller .dplayer-icons .dplayer-volume:hover .dplayer-volume-bar-wrap .dplayer-volume-bar {
 width:45px
}
.dplayer-controller .dplayer-icons .dplayer-volume:hover .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb {
 transform:scale(1)
}
.dplayer-controller .dplayer-icons .dplayer-volume.dplayer-volume-active .dplayer-volume-bar-wrap .dplayer-volume-bar {
 width:45px
}
.dplayer-controller .dplayer-icons .dplayer-volume.dplayer-volume-active .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb {
 transform:scale(1)
}
.dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap {
 display:inline-block;
 height:100%;
 margin:0 10px 0 -5px;
 vertical-align:middle
}
.dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar {
 background:#aaa;
 height:3px;
 position:relative;
 top:17px;
 transition:all .3s ease-in-out;
 width:0
}
.dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner {
 bottom:0;
 height:100%;
 left:0;
 position:absolute;
 transition:all .1s ease;
 will-change:width
}
.dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb {
 border-radius:50%;
 cursor:pointer;
 height:11px;
 margin-right:-10px;
 margin-top:-4px;
 position:absolute;
 right:5px;
 top:0;
 transform:scale(0);
 transition:all .3s ease-in-out;
 width:11px
}
.dplayer-controller .dplayer-icons .dplayer-setting,
.dplayer-controller .dplayer-icons .dplayer-subtitle-btn {
 display:inline-block;
 height:100%
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box {
 background:rgba(28,28,28,.9);
 border-radius:2px;
 bottom:50px;
 overflow:hidden;
 padding:7px 0;
 position:absolute;
 right:0;
 transform:scale(0);
 transition:all .3s ease-in-out;
 width:150px;
 z-index:2
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box>div {
 display:none
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box>div.dplayer-setting-origin-panel {
 display:block
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-open {
 transform:scale(1)
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-narrow {
 height:180px;
 text-align:center;
 width:70px
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-speed .dplayer-setting-origin-panel {
 display:none
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-speed .dplayer-setting-speed-panel {
 display:block
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-item,
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-speed-item {
 box-sizing:border-box;
 cursor:pointer;
 height:30px;
 padding:5px 10px;
 position:relative
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-item:hover,
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-speed-item:hover {
 background-color:hsla(0,0%,100%,.1)
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku {
 padding:5px 0
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-label {
 display:inline;
 padding:0 10px
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku:hover .dplayer-label {
 display:none
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku:hover .dplayer-danmaku-bar-wrap {
 display:inline-block
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku.dplayer-setting-danmaku-active .dplayer-label {
 display:none
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku.dplayer-setting-danmaku-active .dplayer-danmaku-bar-wrap {
 display:inline-block
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap {
 box-sizing:border-box;
 display:none;
 height:100%;
 padding:0 10px;
 vertical-align:middle;
 width:100%
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar {
 background:#fff;
 height:3px;
 position:relative;
 top:8.5px;
 transition:all .3s ease-in-out;
 width:100%
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar .dplayer-danmaku-bar-inner {
 background:#aaa;
 bottom:0;
 height:100%;
 left:0;
 position:absolute;
 transition:all .1s ease;
 will-change:width
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar .dplayer-danmaku-bar-inner .dplayer-thumb {
 background:#aaa;
 border-radius:50%;
 cursor:pointer;
 height:11px;
 margin-right:-10px;
 margin-top:-4px;
 position:absolute;
 right:5px;
 top:0;
 transition:all .3s ease-in-out;
 width:11px
}
.dplayer-controller .dplayer-icons .dplayer-full {
 display:inline-block;
 height:100%;
 position:relative
}
.dplayer-controller .dplayer-icons .dplayer-full:hover .dplayer-full-in-icon {
 display:block
}
.dplayer-controller .dplayer-icons .dplayer-full .dplayer-full-in-icon {
 display:none;
 position:absolute;
 top:-30px;
 z-index:1
}
.dplayer-controller .dplayer-icons .dplayer-quality {
 display:inline-block;
 height:100%;
 position:relative;
 z-index:2
}
.dplayer-controller .dplayer-icons .dplayer-quality:hover .dplayer-quality-list,
.dplayer-controller .dplayer-icons .dplayer-quality:hover .dplayer-quality-mask {
 display:block
}
.dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-mask {
 bottom:38px;
 display:none;
 left:-18px;
 padding-bottom:12px;
 position:absolute;
 width:80px
}
.dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-list {
 background:rgba(28,28,28,.9);
 border-radius:2px;
 color:#fff;
 display:none;
 font-size:12px;
 overflow:hidden;
 padding:5px 0;
 text-align:center;
 transition:all .3s ease-in-out;
 width:80px
}
.dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-item {
 box-sizing:border-box;
 cursor:pointer;
 height:25px;
 line-height:25px
}
.dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-item:hover {
 background-color:hsla(0,0%,100%,.1)
}
.dplayer-controller .dplayer-icons .dplayer-comment {
 display:inline-block;
 height:100%
}
.dplayer-controller .dplayer-icons .dplayer-label {
 color:#eee;
 display:inline-block;
 font-size:13px;
 vertical-align:middle;
 white-space:nowrap
}
.dplayer-controller .dplayer-icons .dplayer-toggle {
 font-size:0;
 height:20px;
 position:absolute;
 right:10px;
 text-align:center;
 top:5px;
 vertical-align:middle;
 width:32px
}
.dplayer-controller .dplayer-icons .dplayer-toggle input {
 display:none;
 max-height:0;
 max-width:0
}
.dplayer-controller .dplayer-icons .dplayer-toggle input+label {
 border:1px solid #dfdfdf;
 border-radius:10px;
 box-shadow:inset 0 0 0 0 #dfdfdf;
 box-sizing:border-box;
 cursor:pointer;
 display:inline-block;
 height:20px;
 position:relative;
 transition:.2s ease-in-out;
 width:32px
}
.dplayer-controller .dplayer-icons .dplayer-toggle input+label:after,
.dplayer-controller .dplayer-icons .dplayer-toggle input+label:before {
 border-radius:15px;
 content:"";
 display:block;
 height:18px;
 left:0;
 position:absolute;
 top:0;
 transition:.2s ease-in-out;
 width:18px
}
.dplayer-controller .dplayer-icons .dplayer-toggle input+label:after {
 background:#fff;
 box-shadow:0 1px 3px rgba(0,0,0,.4)
}
.dplayer-controller .dplayer-icons .dplayer-toggle input:checked+label {
 border-color:hsla(0,0%,100%,.5)
}
.dplayer-controller .dplayer-icons .dplayer-toggle input:checked+label:before {
 background:hsla(0,0%,100%,.5);
 width:30px
}
.dplayer-controller .dplayer-icons .dplayer-toggle input:checked+label:after {
 left:12px
}
.dplayer-danmaku {
 bottom:0;
 color:#fff;
 font-size:22px;
 left:0;
 position:absolute;
 right:0;
 top:0
}
.dplayer-danmaku .dplayer-danmaku-item {
 cursor:default;
 display:inline-block;
 pointer-events:none;
 text-shadow:.5px .5px .5px rgba(0,0,0,.5);
 -webkit-user-select:none;
 -moz-user-select:none;
 user-select:none;
 white-space:nowrap
}
.dplayer-danmaku .dplayer-danmaku-item--demo {
 position:absolute;
 visibility:hidden
}
.dplayer-danmaku .dplayer-danmaku-right {
 position:absolute;
 right:0;
 transform:translateX(100%)
}
.dplayer-danmaku .dplayer-danmaku-right.dplayer-danmaku-move {
 animation:danmaku 5s linear;
 animation-play-state:paused;
 will-change:transform
}
@keyframes danmaku {
 0% {
  transform:translateX(100%)
 }
}
.dplayer-danmaku .dplayer-danmaku-bottom,
.dplayer-danmaku .dplayer-danmaku-top {
 position:absolute;
 text-align:center;
 visibility:hidden;
 width:100%
}
.dplayer-danmaku .dplayer-danmaku-bottom.dplayer-danmaku-move,
.dplayer-danmaku .dplayer-danmaku-top.dplayer-danmaku-move {
 animation:danmaku-center 4s linear;
 animation-play-state:paused;
 will-change:visibility
}
@keyframes danmaku-center {
 0% {
  visibility:visible
 }
 to {
  visibility:visible
 }
}
.dplayer-logo {
 left:20px;
 max-height:50px;
 max-width:50px;
 pointer-events:none;
 position:absolute;
 top:20px
}
.dplayer-logo img {
 background:none;
 max-height:100%;
 max-width:100%
}
.dplayer-menu {
 background:rgba(28,28,28,.85);
 border-radius:2px;
 display:none;
 overflow:hidden;
 padding:5px 0;
 position:absolute;
 width:170px;
 z-index:3
}
.dplayer-menu.dplayer-menu-show {
 display:block
}
.dplayer-menu .dplayer-menu-item {
 box-sizing:border-box;
 cursor:pointer;
 height:30px
}
.dplayer-menu .dplayer-menu-item:hover {
 background-color:hsla(0,0%,100%,.1)
}
.dplayer-menu .dplayer-menu-item a {
 box-sizing:border-box;
 color:#eee;
 display:inline-block;
 font-size:13px;
 line-height:30px;
 overflow:hidden;
 padding:0 10px;
 text-overflow:ellipsis;
 vertical-align:middle;
 white-space:nowrap;
 width:100%
}
.dplayer-menu .dplayer-menu-item a:hover {
 -webkit-text-decoration:none;
 text-decoration:none
}
.dplayer-notice {
 background:rgba(28,28,28,.9);
 border-radius:2px;
 bottom:60px;
 color:#fff;
 font-size:14px;
 left:20px;
 opacity:0;
 overflow:hidden;
 padding:7px 20px;
 pointer-events:none;
 position:absolute;
 transition:all .3s ease-in-out
}
.dplayer-subtitle {
 bottom:40px;
 color:#fff;
 font-size:20px;
 left:5%;
 position:absolute;
 text-align:center;
 text-shadow:.5px .5px .5px rgba(0,0,0,.5);
 width:90%
}
.dplayer-subtitle.dplayer-subtitle-hide {
 display:none
}
.dplayer-mask {
 bottom:0;
 display:none;
 left:0;
 position:absolute;
 right:0;
 top:0;
 z-index:1
}
.dplayer-mask.dplayer-mask-show {
 display:block
}
.dplayer-video-wrap {
 background:#000;
 font-size:0;
 height:100%;
 position:relative;
 width:100%
}
.dplayer-video-wrap .dplayer-video {
 display:none;
 height:100%;
 width:100%
}
.dplayer-video-wrap .dplayer-video-current {
 display:block
}
.dplayer-video-wrap .dplayer-video-prepare {
 display:none
}
.dplayer-info-panel {
 background:rgba(28,28,28,.8);
 border-radius:2px;
 color:#fff;
 font-size:12px;
 left:10px;
 padding:10px;
 position:absolute;
 top:10px;
 width:400px
}
.dplayer-info-panel-hide {
 display:none
}
.dplayer-info-panel .dplayer-info-panel-close {
 cursor:pointer;
 position:absolute;
 right:10px;
 top:10px
}
.dplayer-info-panel .dplayer-info-panel-item>span {
 display:inline-block;
 line-height:15px;
 overflow:hidden;
 text-overflow:ellipsis;
 vertical-align:middle;
 white-space:nowrap
}
.dplayer-info-panel .dplayer-info-panel-item-title {
 margin-right:10px;
 text-align:right;
 width:100px
}
.dplayer-info-panel .dplayer-info-panel-item-data {
 width:260px
}