button[data-balloon] {
    overflow:visible
}
[data-balloon] {
    position:relative;
    cursor:pointer
}
[data-balloon]:after {
    font-family:sans-serif!important;
    font-weight:400!important;
    font-style:normal!important;
    text-shadow:none!important;
    font-size:12px!important;
    background:hsla(0, 0%, 7%, .9);
    border-radius:4px;
    color:#fff;
    content:attr(data-balloon);
    padding:.5em 1em;
    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;
    transition:all .18s ease-out .18s;
    position:absolute;
    z-index:10
}
[data-balloon]:before {
    background:no-repeat url("data:image/svg+xml;charset=utf-8,");
    background-size:100% auto;
    width:18px;
    height:6px;
    content:""
}
[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%;
    -webkit-transform:translate(-50%, 10px);
    transform:translate(-50%, 10px);
    -webkit-transform-origin:top;
    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 {
    -webkit-transform:translate(-50%);
    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%;
    -webkit-transform:translateY(10px);
    transform:translateY(10px);
    -webkit-transform-origin:top;
    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 {
    -webkit-transform:translate(0);
    transform:translate(0)
}
[data-balloon][data-balloon-pos=up-right]:after {
    right:0;
    margin-bottom:11px
}
[data-balloon][data-balloon-pos=up-right]:after, [data-balloon][data-balloon-pos=up-right]:before {
    bottom:100%;
    -webkit-transform:translateY(10px);
    transform:translateY(10px);
    -webkit-transform-origin:top;
    transform-origin:top
}
[data-balloon][data-balloon-pos=up-right]:before {
    right:5px;
    margin-bottom: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 {
    -webkit-transform:translate(0);
    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%;
    -webkit-transform:translate(-50%, -10px);
    transform:translate(-50%, -10px)
}
[data-balloon][data-balloon-pos=down]:before {
    background:no-repeat url("data:image/svg+xml;charset=utf-8,");
    background-size:100% auto;
    width:18px;
    height:6px;
    margin-top:5px
}
[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 {
    -webkit-transform:translate(-50%);
    transform:translate(-50%)
}
[data-balloon][data-balloon-pos=down-left]:after {
    left:0;
    margin-top:11px;
    top:100%;
    -webkit-transform:translateY(-10px);
    transform:translateY(-10px)
}
[data-balloon][data-balloon-pos=down-left]:before {
    background:no-repeat url("data:image/svg+xml;charset=utf-8,");
    background-size:100% auto;
    width:18px;
    height:6px;
    left:5px;
    margin-top:5px;
    top:100%;
    -webkit-transform:translateY(-10px);
    transform:translateY(-10px)
}
[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 {
    -webkit-transform:translate(0);
    transform:translate(0)
}
[data-balloon][data-balloon-pos=down-right]:after {
    right:0;
    margin-top:11px;
    top:100%;
    -webkit-transform:translateY(-10px);
    transform:translateY(-10px)
}
[data-balloon][data-balloon-pos=down-right]:before {
    background:no-repeat url("data:image/svg+xml;charset=utf-8,");
    background-size:100% auto;
    width:18px;
    height:6px;
    right:5px;
    margin-top:5px;
    top:100%;
    -webkit-transform:translateY(-10px);
    transform:translateY(-10px)
}
[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 {
    -webkit-transform:translate(0);
    transform:translate(0)
}
[data-balloon][data-balloon-pos=left]:after {
    margin-right:11px;
    right:100%;
    top:50%;
    -webkit-transform:translate(10px, -50%);
    transform:translate(10px, -50%)
}
[data-balloon][data-balloon-pos=left]:before {
    background:no-repeat url("data:image/svg+xml;charset=utf-8,");
    background-size:100% auto;
    width:6px;
    height:18px;
    margin-right:5px;
    right:100%;
    top:50%;
    -webkit-transform:translate(10px, -50%);
    transform:translate(10px, -50%)
}
[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 {
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%)
}
[data-balloon][data-balloon-pos=right]:after {
    left:100%;
    margin-left:11px;
    top:50%;
    -webkit-transform:translate(-10px, -50%);
    transform:translate(-10px, -50%)
}
[data-balloon][data-balloon-pos=right]:before {
    background:no-repeat url("data:image/svg+xml;charset=utf-8,");
    background-size:100% auto;
    width:6px;
    height:18px;
    left:100%;
    margin-left:5px;
    top:50%;
    -webkit-transform:translate(-10px, -50%);
    transform:translate(-10px, -50%)
}
[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 {
    -webkit-transform:translateY(-50%);
    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%
}
@-webkit-keyframes my-face {
    2% {
        -webkit-transform:translateY(1.5px) rotate(1.5deg);
        transform:translateY(1.5px) rotate(1.5deg)
    }
    4% {
        -webkit-transform:translateY(-1.5px) rotate(-.5deg);
        transform:translateY(-1.5px) rotate(-.5deg)
    }
    6% {
        -webkit-transform:translateY(1.5px) rotate(-1.5deg);
        transform:translateY(1.5px) rotate(-1.5deg)
    }
    8% {
        -webkit-transform:translateY(-1.5px) rotate(-1.5deg);
        transform:translateY(-1.5px) rotate(-1.5deg)
    }
    10% {
        -webkit-transform:translateY(2.5px) rotate(1.5deg);
        transform:translateY(2.5px) rotate(1.5deg)
    }
    12% {
        -webkit-transform:translateY(-.5px) rotate(1.5deg);
        transform:translateY(-.5px) rotate(1.5deg)
    }
    14% {
        -webkit-transform:translateY(-1.5px) rotate(1.5deg);
        transform:translateY(-1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform:translateY(-.5px) rotate(-1.5deg);
        transform:translateY(-.5px) rotate(-1.5deg)
    }
    18% {
        -webkit-transform:translateY(.5px) rotate(-1.5deg);
        transform:translateY(.5px) rotate(-1.5deg)
    }
    20% {
        -webkit-transform:translateY(-1.5px) rotate(2.5deg);
        transform:translateY(-1.5px) rotate(2.5deg)
    }
    22% {
        -webkit-transform:translateY(.5px) rotate(-1.5deg);
        transform:translateY(.5px) rotate(-1.5deg)
    }
    24% {
        -webkit-transform:translateY(1.5px) rotate(1.5deg);
        transform:translateY(1.5px) rotate(1.5deg)
    }
    26% {
        -webkit-transform:translateY(.5px) rotate(.5deg);
        transform:translateY(.5px) rotate(.5deg)
    }
    28% {
        -webkit-transform:translateY(.5px) rotate(1.5deg);
        transform:translateY(.5px) rotate(1.5deg)
    }
    30% {
        -webkit-transform:translateY(-.5px) rotate(2.5deg);
        transform:translateY(-.5px) rotate(2.5deg)
    }
    32% {
        -webkit-transform:translateY(1.5px) rotate(-.5deg);
        transform:translateY(1.5px) rotate(-.5deg)
    }
    34% {
        -webkit-transform:translateY(1.5px) rotate(-.5deg);
        transform:translateY(1.5px) rotate(-.5deg)
    }
    36% {
        -webkit-transform:translateY(-1.5px) rotate(2.5deg);
        transform:translateY(-1.5px) rotate(2.5deg)
    }
    38% {
        -webkit-transform:translateY(1.5px) rotate(-1.5deg);
        transform:translateY(1.5px) rotate(-1.5deg)
    }
    40% {
        -webkit-transform:translateY(-.5px) rotate(2.5deg);
        transform:translateY(-.5px) rotate(2.5deg)
    }
    42% {
        -webkit-transform:translateY(2.5px) rotate(-1.5deg);
        transform:translateY(2.5px) rotate(-1.5deg)
    }
    44% {
        -webkit-transform:translateY(1.5px) rotate(.5deg);
        transform:translateY(1.5px) rotate(.5deg)
    }
    46% {
        -webkit-transform:translateY(-1.5px) rotate(2.5deg);
        transform:translateY(-1.5px) rotate(2.5deg)
    }
    48% {
        -webkit-transform:translateY(-.5px) rotate(.5deg);
        transform:translateY(-.5px) rotate(.5deg)
    }
    50% {
        -webkit-transform:translateY(.5px) rotate(.5deg);
        transform:translateY(.5px) rotate(.5deg)
    }
    52% {
        -webkit-transform:translateY(2.5px) rotate(2.5deg);
        transform:translateY(2.5px) rotate(2.5deg)
    }
    54% {
        -webkit-transform:translateY(-1.5px) rotate(1.5deg);
        transform:translateY(-1.5px) rotate(1.5deg)
    }
    56% {
        -webkit-transform:translateY(2.5px) rotate(2.5deg);
        transform:translateY(2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform:translateY(.5px) rotate(2.5deg);
        transform:translateY(.5px) rotate(2.5deg)
    }
    60% {
        -webkit-transform:translateY(2.5px) rotate(2.5deg);
        transform:translateY(2.5px) rotate(2.5deg)
    }
    62% {
        -webkit-transform:translateY(-.5px) rotate(2.5deg);
        transform:translateY(-.5px) rotate(2.5deg)
    }
    64% {
        -webkit-transform:translateY(-.5px) rotate(1.5deg);
        transform:translateY(-.5px) rotate(1.5deg)
    }
    66% {
        -webkit-transform:translateY(1.5px) rotate(-.5deg);
        transform:translateY(1.5px) rotate(-.5deg)
    }
    68% {
        -webkit-transform:translateY(-1.5px) rotate(-.5deg);
        transform:translateY(-1.5px) rotate(-.5deg)
    }
    70% {
        -webkit-transform:translateY(1.5px) rotate(.5deg);
        transform:translateY(1.5px) rotate(.5deg)
    }
    72% {
        -webkit-transform:translateY(2.5px) rotate(1.5deg);
        transform:translateY(2.5px) rotate(1.5deg)
    }
    74% {
        -webkit-transform:translateY(-.5px) rotate(.5deg);
        transform:translateY(-.5px) rotate(.5deg)
    }
    76% {
        -webkit-transform:translateY(-.5px) rotate(2.5deg);
        transform:translateY(-.5px) rotate(2.5deg)
    }
    78% {
        -webkit-transform:translateY(-.5px) rotate(1.5deg);
        transform:translateY(-.5px) rotate(1.5deg)
    }
    80% {
        -webkit-transform:translateY(1.5px) rotate(1.5deg);
        transform:translateY(1.5px) rotate(1.5deg)
    }
    82% {
        -webkit-transform:translateY(-.5px) rotate(.5deg);
        transform:translateY(-.5px) rotate(.5deg)
    }
    84% {
        -webkit-transform:translateY(1.5px) rotate(2.5deg);
        transform:translateY(1.5px) rotate(2.5deg)
    }
    86% {
        -webkit-transform:translateY(-1.5px) rotate(-1.5deg);
        transform:translateY(-1.5px) rotate(-1.5deg)
    }
    88% {
        -webkit-transform:translateY(-.5px) rotate(2.5deg);
        transform:translateY(-.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform:translateY(2.5px) rotate(-.5deg);
        transform:translateY(2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform:translateY(.5px) rotate(-.5deg);
        transform:translateY(.5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform:translateY(2.5px) rotate(.5deg);
        transform:translateY(2.5px) rotate(.5deg)
    }
    96% {
        -webkit-transform:translateY(-.5px) rotate(1.5deg);
        transform:translateY(-.5px) rotate(1.5deg)
    }
    98% {
        -webkit-transform:translateY(-1.5px) rotate(-.5deg);
        transform:translateY(-1.5px) rotate(-.5deg)
    }
    0%, to {
        -webkit-transform:translate(0) rotate(0deg);
        transform:translate(0) rotate(0deg)
    }
}
@keyframes my-face {
    2% {
        -webkit-transform:translateY(1.5px) rotate(1.5deg);
        transform:translateY(1.5px) rotate(1.5deg)
    }
    4% {
        -webkit-transform:translateY(-1.5px) rotate(-.5deg);
        transform:translateY(-1.5px) rotate(-.5deg)
    }
    6% {
        -webkit-transform:translateY(1.5px) rotate(-1.5deg);
        transform:translateY(1.5px) rotate(-1.5deg)
    }
    8% {
        -webkit-transform:translateY(-1.5px) rotate(-1.5deg);
        transform:translateY(-1.5px) rotate(-1.5deg)
    }
    10% {
        -webkit-transform:translateY(2.5px) rotate(1.5deg);
        transform:translateY(2.5px) rotate(1.5deg)
    }
    12% {
        -webkit-transform:translateY(-.5px) rotate(1.5deg);
        transform:translateY(-.5px) rotate(1.5deg)
    }
    14% {
        -webkit-transform:translateY(-1.5px) rotate(1.5deg);
        transform:translateY(-1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform:translateY(-.5px) rotate(-1.5deg);
        transform:translateY(-.5px) rotate(-1.5deg)
    }
    18% {
        -webkit-transform:translateY(.5px) rotate(-1.5deg);
        transform:translateY(.5px) rotate(-1.5deg)
    }
    20% {
        -webkit-transform:translateY(-1.5px) rotate(2.5deg);
        transform:translateY(-1.5px) rotate(2.5deg)
    }
    22% {
        -webkit-transform:translateY(.5px) rotate(-1.5deg);
        transform:translateY(.5px) rotate(-1.5deg)
    }
    24% {
        -webkit-transform:translateY(1.5px) rotate(1.5deg);
        transform:translateY(1.5px) rotate(1.5deg)
    }
    26% {
        -webkit-transform:translateY(.5px) rotate(.5deg);
        transform:translateY(.5px) rotate(.5deg)
    }
    28% {
        -webkit-transform:translateY(.5px) rotate(1.5deg);
        transform:translateY(.5px) rotate(1.5deg)
    }
    30% {
        -webkit-transform:translateY(-.5px) rotate(2.5deg);
        transform:translateY(-.5px) rotate(2.5deg)
    }
    32% {
        -webkit-transform:translateY(1.5px) rotate(-.5deg);
        transform:translateY(1.5px) rotate(-.5deg)
    }
    34% {
        -webkit-transform:translateY(1.5px) rotate(-.5deg);
        transform:translateY(1.5px) rotate(-.5deg)
    }
    36% {
        -webkit-transform:translateY(-1.5px) rotate(2.5deg);
        transform:translateY(-1.5px) rotate(2.5deg)
    }
    38% {
        -webkit-transform:translateY(1.5px) rotate(-1.5deg);
        transform:translateY(1.5px) rotate(-1.5deg)
    }
    40% {
        -webkit-transform:translateY(-.5px) rotate(2.5deg);
        transform:translateY(-.5px) rotate(2.5deg)
    }
    42% {
        -webkit-transform:translateY(2.5px) rotate(-1.5deg);
        transform:translateY(2.5px) rotate(-1.5deg)
    }
    44% {
        -webkit-transform:translateY(1.5px) rotate(.5deg);
        transform:translateY(1.5px) rotate(.5deg)
    }
    46% {
        -webkit-transform:translateY(-1.5px) rotate(2.5deg);
        transform:translateY(-1.5px) rotate(2.5deg)
    }
    48% {
        -webkit-transform:translateY(-.5px) rotate(.5deg);
        transform:translateY(-.5px) rotate(.5deg)
    }
    50% {
        -webkit-transform:translateY(.5px) rotate(.5deg);
        transform:translateY(.5px) rotate(.5deg)
    }
    52% {
        -webkit-transform:translateY(2.5px) rotate(2.5deg);
        transform:translateY(2.5px) rotate(2.5deg)
    }
    54% {
        -webkit-transform:translateY(-1.5px) rotate(1.5deg);
        transform:translateY(-1.5px) rotate(1.5deg)
    }
    56% {
        -webkit-transform:translateY(2.5px) rotate(2.5deg);
        transform:translateY(2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform:translateY(.5px) rotate(2.5deg);
        transform:translateY(.5px) rotate(2.5deg)
    }
    60% {
        -webkit-transform:translateY(2.5px) rotate(2.5deg);
        transform:translateY(2.5px) rotate(2.5deg)
    }
    62% {
        -webkit-transform:translateY(-.5px) rotate(2.5deg);
        transform:translateY(-.5px) rotate(2.5deg)
    }
    64% {
        -webkit-transform:translateY(-.5px) rotate(1.5deg);
        transform:translateY(-.5px) rotate(1.5deg)
    }
    66% {
        -webkit-transform:translateY(1.5px) rotate(-.5deg);
        transform:translateY(1.5px) rotate(-.5deg)
    }
    68% {
        -webkit-transform:translateY(-1.5px) rotate(-.5deg);
        transform:translateY(-1.5px) rotate(-.5deg)
    }
    70% {
        -webkit-transform:translateY(1.5px) rotate(.5deg);
        transform:translateY(1.5px) rotate(.5deg)
    }
    72% {
        -webkit-transform:translateY(2.5px) rotate(1.5deg);
        transform:translateY(2.5px) rotate(1.5deg)
    }
    74% {
        -webkit-transform:translateY(-.5px) rotate(.5deg);
        transform:translateY(-.5px) rotate(.5deg)
    }
    76% {
        -webkit-transform:translateY(-.5px) rotate(2.5deg);
        transform:translateY(-.5px) rotate(2.5deg)
    }
    78% {
        -webkit-transform:translateY(-.5px) rotate(1.5deg);
        transform:translateY(-.5px) rotate(1.5deg)
    }
    80% {
        -webkit-transform:translateY(1.5px) rotate(1.5deg);
        transform:translateY(1.5px) rotate(1.5deg)
    }
    82% {
        -webkit-transform:translateY(-.5px) rotate(.5deg);
        transform:translateY(-.5px) rotate(.5deg)
    }
    84% {
        -webkit-transform:translateY(1.5px) rotate(2.5deg);
        transform:translateY(1.5px) rotate(2.5deg)
    }
    86% {
        -webkit-transform:translateY(-1.5px) rotate(-1.5deg);
        transform:translateY(-1.5px) rotate(-1.5deg)
    }
    88% {
        -webkit-transform:translateY(-.5px) rotate(2.5deg);
        transform:translateY(-.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform:translateY(2.5px) rotate(-.5deg);
        transform:translateY(2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform:translateY(.5px) rotate(-.5deg);
        transform:translateY(.5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform:translateY(2.5px) rotate(.5deg);
        transform:translateY(2.5px) rotate(.5deg)
    }
    96% {
        -webkit-transform:translateY(-.5px) rotate(1.5deg);
        transform:translateY(-.5px) rotate(1.5deg)
    }
    98% {
        -webkit-transform:translateY(-1.5px) rotate(-.5deg);
        transform:translateY(-1.5px) rotate(-.5deg)
    }
    0%, to {
        -webkit-transform:translate(0) rotate(0deg);
        transform:translate(0) rotate(0deg)
    }
}
.dplayer {
    position:relative;
    overflow:hidden;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    line-height:1
}
.dplayer * {
    box-sizing:content-box
}
.dplayer svg {
    width:100%;
    height:100%
}
.dplayer svg circle, .dplayer svg path {
    fill:#fff
}
.dplayer:-webkit-full-screen {
    width:100%;
    height:100%;
    background:#000;
    position:fixed;
    z-index:100000;
    left:0;
    top:0;
    margin:0;
    padding:0;
    -webkit-transform:translate(0);
    transform:translate(0)
}
.dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-bottom.dplayer-danmaku-move, .dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-top.dplayer-danmaku-move {
    -webkit-animation:danmaku-center 6s linear;
    animation:danmaku-center 6s linear;
    -webkit-animation-play-state:inherit;
    animation-play-state:inherit
}
.dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-right.dplayer-danmaku-move {
    -webkit-animation:danmaku 8s linear;
    animation:danmaku 8s linear;
    -webkit-animation-play-state:inherit;
    animation-play-state:inherit
}
.dplayer.dplayer-live .dplayer-bar-wrap, .dplayer.dplayer-live.dplayer-no-danmaku .dplayer-setting, .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 {
    -webkit-animation-play-state:running;
    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 {
    -webkit-animation-play-state:paused;
    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;
    -webkit-transform:translateY(100%);
    transform:translateY(100%)
}
.dplayer.dplayer-show-controller .dplayer-controller, .dplayer.dplayer-show-controller .dplayer-controller-mask {
    opacity:1
}
.dplayer.dplayer-fulled {
    position:fixed;
    z-index:100000;
    left:0;
    top:0;
    width:100%;
    height:100%
}
.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 {
    position:static;
    display:inline-block
}
.dplayer.dplayer-mobile .dplayer-bar-time {
    display:none
}
.dplayer-web-fullscreen-fix {
    position:fixed;
    top:0;
    left:0;
    margin:0;
    padding:0
}
[data-balloon]:before {
    display:none
}
[data-balloon]:after {
    padding:.3em .7em;
    background:hsla(0, 0%, 7%, .7)
}
[data-balloon][data-balloon-pos=up]:after {
    margin-bottom:0
}
.dplayer-bezel {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    font-size:22px;
    color:#fff;
    pointer-events:none
}
.dplayer-bezel .dplayer-bezel-icon {
    position:absolute;
    top:50%;
    left:50%;
    margin:-26px 0 0 -26px;
    height:52px;
    width:52px;
    padding:12px;
    box-sizing:border-box;
    background:rgba(0, 0, 0, .5);
    border-radius:50%;
    opacity:0;
    pointer-events:none
}
.dplayer-bezel .dplayer-bezel-icon.dplayer-bezel-transition {
    -webkit-animation:bezel-hide .5s linear;
    animation:bezel-hide .5s linear
}
@-webkit-keyframes bezel-hide {
    0% {
        opacity:1;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
    to {
        opacity:0;
        -webkit-transform:scale(2);
        transform:scale(2)
    }
}
@keyframes bezel-hide {
    0% {
        opacity:1;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
    to {
        opacity:0;
        -webkit-transform:scale(2);
        transform:scale(2)
    }
}
.dplayer-bezel .dplayer-danloading {
    position:absolute;
    top:50%;
    margin-top:-7px;
    width:100%;
    text-align:center;
    font-size:14px;
    line-height:14px;
    -webkit-animation:my-face 5s infinite ease-in-out;
    animation:my-face 5s infinite ease-in-out
}
.dplayer-bezel .diplayer-loading-icon {
    display:none;
    position:absolute;
    top:50%;
    left:50%;
    margin:-18px 0 0 -18px;
    height:36px;
    width:36px;
    pointer-events:none
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-hide {
    display:none
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot {
    -webkit-animation:diplayer-loading-dot-fade .8s ease infinite;
    animation:diplayer-loading-dot-fade .8s ease infinite;
    opacity:0;
    -webkit-transform-origin:4px 4px;
    transform-origin:4px 4px
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-7 {
    -webkit-animation-delay:.7s;
    animation-delay:.7s
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-6 {
    -webkit-animation-delay:.6s;
    animation-delay:.6s
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-5 {
    -webkit-animation-delay:.5s;
    animation-delay:.5s
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-4 {
    -webkit-animation-delay:.4s;
    animation-delay:.4s
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-3 {
    -webkit-animation-delay:.3s;
    animation-delay:.3s
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-2 {
    -webkit-animation-delay:.2s;
    animation-delay:.2s
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-1 {
    -webkit-animation-delay:.1s;
    animation-delay:.1s
}
@-webkit-keyframes diplayer-loading-dot-fade {
    0% {
        opacity:.7;
        -webkit-transform:scale(1.2);
        transform:scale(1.2)
    }
    50% {
        opacity:.25;
        -webkit-transform:scale(.9);
        transform:scale(.9)
    }
    to {
        opacity:.25;
        -webkit-transform:scale(.85);
        transform:scale(.85)
    }
}
@keyframes diplayer-loading-dot-fade {
    0% {
        opacity:.7;
        -webkit-transform:scale(1.2);
        transform:scale(1.2)
    }
    50% {
        opacity:.25;
        -webkit-transform:scale(.9);
        transform:scale(.9)
    }
    to {
        opacity:.25;
        -webkit-transform:scale(.85);
        transform:scale(.85)
    }
}
.dplayer-controller-mask {
    background: #000;
    opacity: .8;
    /* background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom; */
    /* height: 2rem; */
    height: .76rem;
    width:100%
}
.dplayer-controller,
.dplayer-controller-mask {
    position:absolute;
    bottom:0;
    transition:all .3s ease
}
.dplayer-controller {
    left:0;
    right:0;
    height: .76rem;
    /* padding: 0 .2rem; */
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-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 {
    padding:5px 0;
    cursor:pointer;
    position:absolute;
    bottom:.66rem;
    width: 100%;
    height:3px
}
.dplayer-controller .dplayer-bar-wrap:hover .dplayer-bar .dplayer-played .dplayer-thumb {
    -webkit-transform:scale(1);
    transform:scale(1)
}
.dplayer-controller .dplayer-bar-wrap:hover .dplayer-highlight {
    display:block;
    width:8px;
    -webkit-transform:translateX(-4px);
    transform:translateX(-4px);
    top:4px;
    height:40%
}
.dplayer-controller .dplayer-bar-wrap .dplayer-highlight {
    z-index:12;
    position:absolute;
    top:5px;
    width:6px;
    height:20%;
    border-radius:6px;
    background-color:#fff;
    text-align:center;
    -webkit-transform:translateX(-3px);
    transform:translateX(-3px);
    transition:all .2s ease-in-out
}
.dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover .dplayer-highlight-text {
    display:block
}
.dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover~.dplayer-bar-preview, .dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover~.dplayer-bar-time {
    opacity:0
}
.dplayer-controller .dplayer-bar-wrap .dplayer-highlight .dplayer-highlight-text {
    display:none;
    position:absolute;
    left:50%;
    top:-24px;
    padding:5px 8px;
    background-color:rgba(0, 0, 0, .62);
    color:#fff;
    border-radius:4px;
    font-size:12px;
    white-space:nowrap;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%)
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar-preview {
    position:absolute;
    background:#fff;
    pointer-events:none;
    display:none;
    background-size:16000px 100%
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar-preview-canvas {
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar-time {
    position:absolute;
    left:0;
    top:-20px;
    border-radius:4px;
    padding:5px 7px;
    background-color:rgba(0, 0, 0, .62);
    color:#fff;
    font-size:12px;
    text-align:center;
    opacity:1;
    transition:opacity .1s ease-in-out;
    word-wrap:normal;
    word-break:normal;
    z-index:2;
    pointer-events:none
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar-time.hidden {
    opacity:0
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar {
    position:relative;
    height:3px;
    width:100%;
    background:hsla(0, 0%, 100%, .2);
    cursor:pointer
}
.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 {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    height:3px;
    will-change:width
}
.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played .dplayer-thumb {
    position:absolute;
    top:0;
    right:5px;
    margin-top:-4px;
    margin-right:-10px;
    height:11px;
    width:11px;
    border-radius:50%;
    cursor:pointer;
    transition:all .3s ease-in-out;
    -webkit-transform:scale(0);
    transform:scale(0)
}
.dplayer-controller .dplayer-icons {
    height: .72rem;
    position:absolute;
    bottom:0;
}
.dplayer-controller .dplayer-icons.dplayer-comment-box {
    display:none;
    position:absolute;
    transition:all .3s ease-in-out;
    z-index:2;
    height:38px;
    bottom:0;
    left:20px;
    right:20px;
    color:#fff
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-icon {
    padding:7px
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-icon {
    position:absolute;
    left:0;
    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 {
    position:absolute;
    background:rgba(28, 28, 28, .9);
    bottom:41px;
    left:0;
    box-shadow:0 0 25px rgba(0, 0, 0, .3);
    border-radius:4px;
    padding:10px 10px 16px;
    font-size:14px;
    width:204px;
    transition:all .3s ease-in-out;
    -webkit-transform:scale(0);
    transform:scale(0)
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box.dplayer-comment-setting-open {
    -webkit-transform:scale(1);
    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 {
    font-size:13px;
    color:#fff;
    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 {
    width:33%;
    padding:4px 6px;
    line-height:16px;
    display:inline-block;
    font-size:12px;
    color:#fff;
    border:1px solid #fff;
    margin-right:-1px;
    box-sizing:border-box;
    text-align:center;
    cursor:pointer
}
.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 {
    font-size:0;
    padding:6px;
    display:inline-block
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color span {
    width:22px;
    height:22px;
    display:inline-block;
    border-radius:50%;
    box-sizing:border-box;
    cursor:pointer
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color span:hover {
    -webkit-animation:my-face 5s infinite ease-in-out;
    animation:my-face 5s infinite ease-in-out
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input {
    outline:none;
    border:none;
    padding:8px 31px;
    font-size:14px;
    line-height:18px;
    text-align:center;
    border-radius:4px;
    background:none;
    margin:0;
    height:100%;
    box-sizing:border-box;
    width:100%;
    color:#fff
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input::-webkit-input-placeholder {
    color:#fff;
    opacity:.8
}
.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input:-ms-input-placeholder, .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input::-ms-input-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-comment-box .dplayer-comment-input::-ms-clear {
    display:none
}
.dplayer-controller .dplayer-icons.dplayer-icons-left .dplayer-icon {
    padding:.2rem
}
.dplayer-controller .dplayer-icons.dplayer-icons-left {
    left: 0
}
.dplayer-controller .dplayer-icons.dplayer-icons-right {
    right: 0
}
.dplayer-controller .dplayer-icons.dplayer-icons-right .dplayer-icon {
    padding:8px
}
.dplayer-controller .dplayer-icons .dplayer-live-badge, .dplayer-controller .dplayer-icons .dplayer-time {
    line-height:.76rem;
    color:#eee;
    text-shadow:0 0 2px rgba(0, 0, 0, .5);
    vertical-align:middle;
    font-size:.26rem;
    cursor:default
}
.dplayer-controller .dplayer-icons .dplayer-live-dot {
    display:inline-block;
    width:6px;
    height:6px;
    vertical-align:4%;
    margin-right:5px;
    content:"";
    border-radius:6px
}
.dplayer-controller .dplayer-icons .dplayer-icon {
    width: .8rem;
    height:100%;
    border:none;
    background-color:transparent;
    outline:none;
    cursor:pointer;
    vertical-align:middle;
    box-sizing:border-box;
    display:inline-block
}
.dplayer-controller .dplayer-icons .dplayer-icon .dplayer-icon-content {
    transition:all .2s ease-in-out;
    opacity:.8
}
.dplayer-controller .dplayer-icons .dplayer-icon:hover .dplayer-icon-content {
    opacity:1
}
.dplayer-controller .dplayer-icons .dplayer-icon.dplayer-quality-icon {
    color:#fff;
    width:auto;
    line-height: .44rem;
    font-size: .28rem;
}
.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 {
    position:relative;
    display:inline-block;
    cursor:pointer;
    height:100%
}
.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 {
    -webkit-transform:scale(1);
    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 {
    -webkit-transform:scale(1);
    transform:scale(1)
}
.dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap {
    display:inline-block;
    margin:0 10px 0 -5px;
    vertical-align:middle;
    height:100%
}
.dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar {
    position:relative;
    top:17px;
    width:0;
    height:3px;
    background:#aaa;
    transition:all .3s ease-in-out
}
.dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner {
    position:absolute;
    bottom:0;
    left:0;
    height:100%;
    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 {
    position:absolute;
    top:0;
    right:5px;
    margin-top:-4px;
    margin-right:-10px;
    height:11px;
    width:11px;
    border-radius:50%;
    cursor:pointer;
    transition:all .3s ease-in-out;
    -webkit-transform:scale(0);
    transform:scale(0)
}
.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 {
    position:absolute;
    right:0;
    bottom:50px;
    -webkit-transform:scale(0);
    transform:scale(0);
    width:150px;
    border-radius:2px;
    background:rgba(28, 28, 28, .9);
    padding:7px 0;
    transition:all .3s ease-in-out;
    overflow:hidden;
    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 {
    -webkit-transform:scale(1);
    transform:scale(1)
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-narrow {
    width:70px;
    height:180px;
    text-align:center
}
.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 {
    height:30px;
    padding:5px 10px;
    box-sizing:border-box;
    cursor:pointer;
    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 {
    padding:0 10px;
    display:inline
}
.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 {
    padding:0 10px;
    box-sizing:border-box;
    display:none;
    vertical-align:middle;
    height:100%;
    width:100%
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar {
    position:relative;
    top:8.5px;
    width:100%;
    height:3px;
    background:#fff;
    transition:all .3s ease-in-out
}
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar .dplayer-danmaku-bar-inner {
    position:absolute;
    bottom:0;
    left:0;
    height:100%;
    transition:all .1s ease;
    background:#aaa;
    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 {
    position:absolute;
    top:0;
    right:5px;
    margin-top:-4px;
    margin-right:-10px;
    height:11px;
    width:11px;
    border-radius:50%;
    cursor:pointer;
    transition:all .3s ease-in-out;
    background:#aaa
}
.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 {
    position:absolute;
    top:-30px;
    z-index:1;
    display:none
}
.dplayer-controller .dplayer-icons .dplayer-quality {
    position:relative;
    display:inline-block;
    height:100%;
    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 {
    display:none;
    position:absolute;
    bottom: .8rem;
    left: 50%;
    width: 1.2rem;
    transform: translateX(-50%);
}
.dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-list {
    display:none;
    font-size: .2rem;
    width: 100%;
    border-radius: 2px;
    background:rgba(28, 28, 28, .9);
    padding: .1rem 0;
    transition:all .3s ease-in-out;
    overflow:hidden;
    color:#fff;
    text-align:center
}
.dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-item {
    height: .5rem;
    box-sizing:border-box;
    cursor:pointer;
    line-height: .5rem;
}
.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;
    font-size:13px;
    display:inline-block;
    vertical-align:middle;
    white-space:nowrap
}
.dplayer-controller .dplayer-icons .dplayer-toggle {
    width:32px;
    height:20px;
    text-align:center;
    font-size:0;
    vertical-align:middle;
    position:absolute;
    top:5px;
    right:10px
}
.dplayer-controller .dplayer-icons .dplayer-toggle input {
    max-height:0;
    max-width:0;
    display:none
}
.dplayer-controller .dplayer-icons .dplayer-toggle input+label {
    display:inline-block;
    position:relative;
    box-shadow:inset 0 0 0 0 #dfdfdf;
    border:1px solid #dfdfdf;
    height:20px;
    width:32px;
    border-radius:10px;
    box-sizing:border-box;
    cursor:pointer;
    transition:.2s ease-in-out
}
.dplayer-controller .dplayer-icons .dplayer-toggle input+label:after, .dplayer-controller .dplayer-icons .dplayer-toggle input+label:before {
    content:"";
    position:absolute;
    display:block;
    height:18px;
    width:18px;
    top:0;
    left:0;
    border-radius:15px;
    transition:.2s ease-in-out
}
.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 {
    width:30px;
    background:hsla(0, 0%, 100%, .5)
}
.dplayer-controller .dplayer-icons .dplayer-toggle input:checked+label:after {
    left:12px
}
.dplayer-danmaku {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    font-size:22px;
    color:#fff
}
.dplayer-danmaku .dplayer-danmaku-item {
    display:inline-block;
    pointer-events:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default;
    white-space:nowrap;
    text-shadow:.5px .5px .5px rgba(0, 0, 0, .5)
}
.dplayer-danmaku .dplayer-danmaku-item--demo {
    position:absolute;
    visibility:hidden
}
.dplayer-danmaku .dplayer-danmaku-right {
    position:absolute;
    right:0;
    -webkit-transform:translateX(100%);
    transform:translateX(100%)
}
.dplayer-danmaku .dplayer-danmaku-right.dplayer-danmaku-move {
    will-change:transform;
    -webkit-animation:danmaku 5s linear;
    animation:danmaku 5s linear;
    -webkit-animation-play-state:paused;
    animation-play-state:paused
}
@-webkit-keyframes danmaku {
    0% {
        -webkit-transform:translateX(100%);
        transform:translateX(100%)
    }
}
@keyframes danmaku {
    0% {
        -webkit-transform:translateX(100%);
        transform:translateX(100%)
    }
}
.dplayer-danmaku .dplayer-danmaku-bottom, .dplayer-danmaku .dplayer-danmaku-top {
    position:absolute;
    width:100%;
    text-align:center;
    visibility:hidden
}
.dplayer-danmaku .dplayer-danmaku-bottom.dplayer-danmaku-move, .dplayer-danmaku .dplayer-danmaku-top.dplayer-danmaku-move {
    will-change:visibility;
    -webkit-animation:danmaku-center 4s linear;
    animation:danmaku-center 4s linear;
    -webkit-animation-play-state:paused;
    animation-play-state:paused
}
@-webkit-keyframes danmaku-center {
    0% {
        visibility:visible
    }
    to {
        visibility:visible
    }
}
@keyframes danmaku-center {
    0% {
        visibility:visible
    }
    to {
        visibility:visible
    }
}
.dplayer-logo {
    pointer-events:none;
    position:absolute;
    left:20px;
    top:20px;
    max-width:50px;
    max-height:50px
}
.dplayer-logo img {
    max-width:100%;
    max-height:100%;
    background:none
}
.dplayer-menu {
    position:absolute;
    width:170px;
    border-radius:2px;
    background:rgba(28, 28, 28, .85);
    padding:5px 0;
    overflow:hidden;
    z-index:3;
    display:none
}
.dplayer-menu.dplayer-menu-show {
    display:block
}
.dplayer-menu .dplayer-menu-item {
    height:30px;
    box-sizing:border-box;
    cursor:pointer
}
.dplayer-menu .dplayer-menu-item:hover {
    background-color:hsla(0, 0%, 100%, .1)
}
.dplayer-menu .dplayer-menu-item a {
    padding:0 10px;
    line-height:30px;
    color:#eee;
    font-size:13px;
    display:inline-block;
    vertical-align:middle;
    width:100%;
    box-sizing:border-box;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden
}
.dplayer-menu .dplayer-menu-item a:hover {
    text-decoration:none
}
.dplayer-notice {
    opacity: 0;
    position: absolute;
    bottom: .9rem;
    left: 0.2rem;
    font-size: .24rem;
    border-radius: 2px;
    background: rgba(28, 28, 28, .8);
    padding: .1rem .1rem;
    transition: all .3s ease-in-out;
    overflow: hidden;
    color: #fff;
    pointer-events: none;
}
.dplayer-subtitle {
    position:absolute;
    bottom:40px;
    width:90%;
    left:5%;
    text-align:center;
    color:#fff;
    text-shadow:.5px .5px .5px rgba(0, 0, 0, .5);
    font-size:20px
}
.dplayer-subtitle.dplayer-subtitle-hide {
    display:none
}
.dplayer-mask {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:1;
    display:none
}
.dplayer-mask.dplayer-mask-show {
    display:block
}
.dplayer-video-wrap {
    position:relative;
    background:#000;
    font-size:0;
    width:100%;
    height:100%
}
.dplayer-video-wrap .dplayer-video {
    width:100%;
    height:100%;
    display:none
}
.dplayer-video-wrap .dplayer-video-current {
    display:block
}
.dplayer-video-wrap .dplayer-video-prepare {
    display:none
}
.dplayer-info-panel {
    position:absolute;
    top:10px;
    left:10px;
    width:400px;
    background:rgba(28, 28, 28, .8);
    padding:10px;
    color:#fff;
    font-size:12px;
    border-radius:2px
}
.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;
    vertical-align:middle;
    line-height:15px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden
}
.dplayer-info-panel .dplayer-info-panel-item-title {
    width:100px;
    text-align:right;
    margin-right:10px
}
.dplayer-info-panel .dplayer-info-panel-item-data {
    width:260px
}