@charset "utf-8";

@keyframes my-face { 
  2% { transform: translate(0px, 1.5px) rotate(1.5deg); }
  4% { transform: translate(0px, -1.5px) rotate(-0.5deg); }
  6% { transform: translate(0px, 1.5px) rotate(-1.5deg); }
  8% { transform: translate(0px, -1.5px) rotate(-1.5deg); }
  10% { transform: translate(0px, 2.5px) rotate(1.5deg); }
  12% { transform: translate(0px, -0.5px) rotate(1.5deg); }
  14% { transform: translate(0px, -1.5px) rotate(1.5deg); }
  16% { transform: translate(0px, -0.5px) rotate(-1.5deg); }
  18% { transform: translate(0px, 0.5px) rotate(-1.5deg); }
  20% { transform: translate(0px, -1.5px) rotate(2.5deg); }
  22% { transform: translate(0px, 0.5px) rotate(-1.5deg); }
  24% { transform: translate(0px, 1.5px) rotate(1.5deg); }
  26% { transform: translate(0px, 0.5px) rotate(0.5deg); }
  28% { transform: translate(0px, 0.5px) rotate(1.5deg); }
  30% { transform: translate(0px, -0.5px) rotate(2.5deg); }
  32% { transform: translate(0px, 1.5px) rotate(-0.5deg); }
  34% { transform: translate(0px, 1.5px) rotate(-0.5deg); }
  36% { transform: translate(0px, -1.5px) rotate(2.5deg); }
  38% { transform: translate(0px, 1.5px) rotate(-1.5deg); }
  40% { transform: translate(0px, -0.5px) rotate(2.5deg); }
  42% { transform: translate(0px, 2.5px) rotate(-1.5deg); }
  44% { transform: translate(0px, 1.5px) rotate(0.5deg); }
  46% { transform: translate(0px, -1.5px) rotate(2.5deg); }
  48% { transform: translate(0px, -0.5px) rotate(0.5deg); }
  50% { transform: translate(0px, 0.5px) rotate(0.5deg); }
  52% { transform: translate(0px, 2.5px) rotate(2.5deg); }
  54% { transform: translate(0px, -1.5px) rotate(1.5deg); }
  56% { transform: translate(0px, 2.5px) rotate(2.5deg); }
  58% { transform: translate(0px, 0.5px) rotate(2.5deg); }
  60% { transform: translate(0px, 2.5px) rotate(2.5deg); }
  62% { transform: translate(0px, -0.5px) rotate(2.5deg); }
  64% { transform: translate(0px, -0.5px) rotate(1.5deg); }
  66% { transform: translate(0px, 1.5px) rotate(-0.5deg); }
  68% { transform: translate(0px, -1.5px) rotate(-0.5deg); }
  70% { transform: translate(0px, 1.5px) rotate(0.5deg); }
  72% { transform: translate(0px, 2.5px) rotate(1.5deg); }
  74% { transform: translate(0px, -0.5px) rotate(0.5deg); }
  76% { transform: translate(0px, -0.5px) rotate(2.5deg); }
  78% { transform: translate(0px, -0.5px) rotate(1.5deg); }
  80% { transform: translate(0px, 1.5px) rotate(1.5deg); }
  82% { transform: translate(0px, -0.5px) rotate(0.5deg); }
  84% { transform: translate(0px, 1.5px) rotate(2.5deg); }
  86% { transform: translate(0px, -1.5px) rotate(-1.5deg); }
  88% { transform: translate(0px, -0.5px) rotate(2.5deg); }
  90% { transform: translate(0px, 2.5px) rotate(-0.5deg); }
  92% { transform: translate(0px, 0.5px) rotate(-0.5deg); }
  94% { transform: translate(0px, 2.5px) rotate(0.5deg); }
  96% { transform: translate(0px, -0.5px) rotate(1.5deg); }
  98% { transform: translate(0px, -1.5px) rotate(-0.5deg); }
  0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
}

.dplayer { position: relative; overflow: hidden; user-select: none; line-height: 1; }

.dplayer * { box-sizing: content-box; }

.dplayer svg { width: 100%; height: 100%; }

.dplayer svg path, .dplayer svg circle { fill: rgb(255, 255, 255); }

.dplayer:-webkit-full-screen { width: 100%; height: 100%; background: rgb(0, 0, 0); position: fixed; z-index: 100000; left: 0px; top: 0px; margin: 0px; padding: 0px; transform: translate(0px, 0px); }

.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-showdan, .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 { display: none; }

.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-comment { display: none; }

.dplayer.dplayer-no-danmaku .dplayer-danmaku { display: none; }

.dplayer.dplayer-live .dplayer-time { display: none; }

.dplayer.dplayer-live .dplayer-bar-wrap { display: none; }

.dplayer.dplayer-live .dplayer-setting-speed { display: none; }

.dplayer.dplayer-live .dplayer-setting-loop { display: none; }

.dplayer.dplayer-live.dplayer-no-danmaku .dplayer-setting { display: none; }

.dplayer.dplayer-arrow .dplayer-danmaku { font-size: 18px; }

.dplayer.dplayer-arrow .dplayer-icon { margin: 0px -3px; }

.dplayer.dplayer-playing .dplayer-danmaku .dplayer-danmaku-move { animation-play-state: running; }

@media (min-width: 900px) {
  .dplayer.dplayer-playing .dplayer-controller-mask { opacity: 0; }
  .dplayer.dplayer-playing .dplayer-controller { opacity: 0; }
  .dplayer.dplayer-playing:hover .dplayer-controller-mask { opacity: 1; }
  .dplayer.dplayer-playing:hover .dplayer-controller { opacity: 1; }
}

.dplayer.dplayer-loading .dplayer-bezel .diplayer-loading-icon { display: block; }

.dplayer.dplayer-loading .dplayer-danmaku, .dplayer.dplayer-paused .dplayer-danmaku, .dplayer.dplayer-loading .dplayer-danmaku-move, .dplayer.dplayer-paused .dplayer-danmaku-move { animation-play-state: paused; }

.dplayer.dplayer-hide-controller { cursor: none; }

.dplayer.dplayer-hide-controller .dplayer-controller-mask { opacity: 0; transform: translateY(100%); }

.dplayer.dplayer-hide-controller .dplayer-controller { opacity: 0; transform: translateY(100%); }

.dplayer.dplayer-show-controller .dplayer-controller-mask { opacity: 1; }

.dplayer.dplayer-show-controller .dplayer-controller { opacity: 1; }

.dplayer.dplayer-fulled { width: 100% !important; height: 100% !important; }

.dplayer.dplayer-fulled { position: fixed; z-index: 100000; left: 0px; top: 0px; }

.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-volume, .dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-camera-icon, .dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-airplay-icon, .dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-chromecast-icon, .dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-play-icon { 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.dplayer-mobile.dplayer-hide-controller .dplayer-mobile-play { display: none; }

.dplayer.dplayer-mobile .dplayer-mobile-play { display: block; }

.dplayer-web-fullscreen-fix { position: fixed; top: 0px; left: 0px; margin: 0px; padding: 0px; }

[data-balloon]::before { display: none; }

[data-balloon]::after { padding: 0.3em 0.7em; background: rgba(17, 17, 17, 0.7); }

[data-balloon][data-balloon-pos="up"]::after { margin-bottom: 0px; }

.dplayer-bezel { position: absolute; inset: 0px; font-size: 22px; color: rgb(255, 255, 255); pointer-events: none; }

.dplayer-bezel .dplayer-bezel-icon { position: absolute; top: 50%; left: 50%; margin: -26px 0px 0px -26px; height: 52px; width: 52px; padding: 12px; box-sizing: border-box; background: rgba(0, 0, 0, 0.5); border-radius: 50%; opacity: 0; pointer-events: none; }

.dplayer-bezel .dplayer-bezel-icon.dplayer-bezel-transition { animation: 0.5s linear 0s 1 normal none running bezel-hide; }

@keyframes bezel-hide { 
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; 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; animation: 5s ease-in-out 0s infinite normal none running my-face; }

.dplayer-bezel .diplayer-loading-icon { display: none; position: absolute; top: 50%; left: 50%; margin: -18px 0px 0px -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 { animation: 0.8s ease 0s infinite normal none running diplayer-loading-dot-fade; opacity: 0; transform-origin: 4px 4px; }

.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-1 { animation-delay: 0.1s; }

.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-2 { animation-delay: 0.2s; }

.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-3 { animation-delay: 0.3s; }

.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-4 { animation-delay: 0.4s; }

.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-5 { animation-delay: 0.5s; }

.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-6 { animation-delay: 0.6s; }

.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-7 { animation-delay: 0.7s; }

@keyframes diplayer-loading-dot-fade { 
  0% { opacity: 0.7; transform: scale(1.2, 1.2); }
  50% { opacity: 0.25; transform: scale(0.9, 0.9); }
  100% { opacity: 0.25; transform: scale(0.85, 0.85); }
}

.dplayer-controller-mask { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==") center bottom repeat-x; height: 98px; width: 100%; position: absolute; bottom: 0px; transition: all 0.3s ease 0s; }

.dplayer-controller { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 41px; padding: 0px 20px; user-select: none; transition: all 0.3s ease 0s; }

.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 0px; cursor: pointer; position: absolute; bottom: 33px; width: calc(100% - 40px); height: 3px; }

.dplayer-controller .dplayer-bar-wrap:hover .dplayer-bar .dplayer-played .dplayer-thumb { transform: scale(1); }

.dplayer-controller .dplayer-bar-wrap:hover .dplayer-highlight { display: block; width: 8px; 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: rgb(255, 255, 255); text-align: center; transform: translateX(-3px); transition: all 0.2s ease-in-out 0s; }

.dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover .dplayer-highlight-text { display: block; }

.dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover ~ .dplayer-bar-preview { opacity: 0; }

.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, 0.62); color: rgb(255, 255, 255); border-radius: 4px; font-size: 12px; white-space: nowrap; transform: translateX(-50%); }

.dplayer-controller .dplayer-bar-wrap .dplayer-bar-preview { position: absolute; background: 0% 0% / 16000px 100% rgb(255, 255, 255); pointer-events: none; display: none; }

.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: 0px; top: -20px; border-radius: 4px; padding: 5px 7px; background-color: rgba(0, 0, 0, 0.62); color: rgb(255, 255, 255); font-size: 12px; text-align: center; opacity: 1; transition: opacity 0.1s ease-in-out 0s; overflow-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: rgba(255, 255, 255, 0.2); cursor: pointer; }

.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-loaded { position: absolute; left: 0px; top: 0px; bottom: 0px; background: rgba(255, 255, 255, 0.4); height: 3px; transition: all 0.5s ease 0s; will-change: width; }

.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played { position: absolute; left: 0px; top: 0px; bottom: 0px; height: 3px; will-change: width; }

.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played .dplayer-thumb { position: absolute; top: 0px; right: 5px; margin-top: -4px; margin-right: -10px; height: 11px; width: 11px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease-in-out 0s; transform: scale(0); }

.dplayer-controller .dplayer-icons { height: 38px; position: absolute; bottom: 0px; }

.dplayer-controller .dplayer-icons.dplayer-comment-box { display: none; position: absolute; transition: all 0.3s ease-in-out 0s; z-index: 2; height: 38px; bottom: 0px; left: 20px; right: 20px; color: rgb(255, 255, 255); }

.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: 0px; top: 0px; }

.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-send-icon { position: absolute; right: 0px; top: 0px; }

.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box { position: absolute; background: rgba(28, 28, 28, 0.9); bottom: 41px; left: 0px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 25px; border-radius: 4px; padding: 10px 10px 16px; font-size: 14px; width: 204px; transition: all 0.3s ease-in-out 0s; transform: scale(0); }

.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 { font-size: 13px; color: rgb(255, 255, 255); line-height: 30px; }

.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type { font-size: 0px; }

.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 0px 0px 4px; }

.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type label:nth-child(4) span { border-radius: 0px 4px 4px 0px; }

.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: rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255); 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: rgb(228, 228, 230); color: rgb(28, 28, 28); }

.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color { font-size: 0px; }

.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color label { font-size: 0px; 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 { animation: 5s ease-in-out 0s infinite normal none running my-face; }

.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: 0px; height: 100%; box-sizing: border-box; width: 100%; color: rgb(255, 255, 255); }

.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input::placeholder { color: rgb(255, 255, 255); opacity: 0.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-time, .dplayer-controller .dplayer-icons .dplayer-live-badge { line-height: 38px; color: rgb(238, 238, 238); text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px; vertical-align: middle; font-size: 13px; 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: 40px; 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 0.2s ease-in-out 0s; opacity: 0.8; }

.dplayer-controller .dplayer-icons .dplayer-icon:hover .dplayer-icon-content { opacity: 1; }

.dplayer-controller .dplayer-icons .dplayer-icon.dplayer-quality-icon { color: rgb(255, 255, 255); width: auto; line-height: 22px; font-size: 14px; }

.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 { 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; margin: 0px 10px 0px -5px; vertical-align: middle; height: 100%; }

.dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar { position: relative; top: 17px; width: 0px; height: 3px; background: rgb(170, 170, 170); transition: all 0.3s ease-in-out 0s; }

.dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner { position: absolute; bottom: 0px; left: 0px; height: 100%; transition: all 0.1s ease 0s; 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: 0px; right: 5px; margin-top: -4px; margin-right: -10px; height: 11px; width: 11px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease-in-out 0s; transform: scale(0); }

.dplayer-controller .dplayer-icons .dplayer-subtitle-btn { display: inline-block; height: 100%; }

.dplayer-controller .dplayer-icons .dplayer-subtitles { display: inline-block; height: 100%; }

.dplayer-controller .dplayer-icons .dplayer-subtitles .dplayer-subtitles-box { position: absolute; right: 0px; bottom: 50px; transform: scale(0); width: fit-content; max-width: 240px; min-width: 120px; border-radius: 2px; background: rgba(28, 28, 28, 0.9); padding: 7px 0px; transition: all 0.3s ease-in-out 0s; overflow: auto; z-index: 2; }

.dplayer-controller .dplayer-icons .dplayer-subtitles .dplayer-subtitles-box.dplayer-subtitles-panel { display: block; }

.dplayer-controller .dplayer-icons .dplayer-subtitles .dplayer-subtitles-box.dplayer-subtitles-box-open { transform: scale(1); }

.dplayer-controller .dplayer-icons .dplayer-subtitles .dplayer-subtitles-item { height: 30px; padding: 5px 10px; box-sizing: border-box; cursor: pointer; position: relative; }

.dplayer-controller .dplayer-icons .dplayer-subtitles .dplayer-subtitles-item:hover { background-color: rgba(255, 255, 255, 0.1); }

.dplayer-controller .dplayer-icons .dplayer-setting { display: inline-block; height: 100%; }

.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box { position: absolute; right: 0px; bottom: 50px; transform: scale(0); width: 150px; border-radius: 2px; background: rgba(28, 28, 28, 0.9); padding: 7px 0px; transition: all 0.3s ease-in-out 0s; 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 { transform: scale(1); }

.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-narrow { width: 70px; 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: rgba(255, 255, 255, 0.1); }

.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku { padding: 5px 0px; }

.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-label { padding: 0px 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: 0px 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: rgb(255, 255, 255); transition: all 0.3s ease-in-out 0s; }

.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar .dplayer-danmaku-bar-inner { position: absolute; bottom: 0px; left: 0px; height: 100%; transition: all 0.1s ease 0s; background: rgb(170, 170, 170); 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: 0px; right: 5px; margin-top: -4px; margin-right: -10px; height: 11px; width: 11px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease-in-out 0s; background: rgb(170, 170, 170); }

.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 { display: block; }

.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: 38px; left: -18px; width: 80px; padding-bottom: 12px; }

.dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-list { display: none; font-size: 12px; width: 80px; border-radius: 2px; background: rgba(28, 28, 28, 0.9); padding: 5px 0px; transition: all 0.3s ease-in-out 0s; overflow: hidden; color: rgb(255, 255, 255); text-align: center; }

.dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-item { height: 25px; box-sizing: border-box; cursor: pointer; line-height: 25px; }

.dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-item:hover { background-color: rgba(255, 255, 255, 0.1); }

.dplayer-controller .dplayer-icons .dplayer-comment { display: inline-block; height: 100%; }

.dplayer-controller .dplayer-icons .dplayer-label { color: rgb(238, 238, 238); 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: 0px; vertical-align: middle; position: absolute; top: 5px; right: 10px; }

.dplayer-controller .dplayer-icons .dplayer-toggle input { max-height: 0px; max-width: 0px; display: none; }

.dplayer-controller .dplayer-icons .dplayer-toggle input + label { display: inline-block; position: relative; box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; border: 1px solid rgb(223, 223, 223); height: 20px; width: 32px; border-radius: 10px; box-sizing: border-box; cursor: pointer; transition: all 0.2s ease-in-out 0s; }

.dplayer-controller .dplayer-icons .dplayer-toggle input + label::before { content: ""; position: absolute; display: block; height: 18px; width: 18px; top: 0px; left: 0px; border-radius: 15px; transition: all 0.2s ease-in-out 0s; }

.dplayer-controller .dplayer-icons .dplayer-toggle input + label::after { content: ""; position: absolute; display: block; left: 0px; top: 0px; border-radius: 15px; background: rgb(255, 255, 255); transition: all 0.2s ease-in-out 0s; box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 3px; height: 18px; width: 18px; }

.dplayer-controller .dplayer-icons .dplayer-toggle input:checked + label { border-color: rgba(255, 255, 255, 0.5); }

.dplayer-controller .dplayer-icons .dplayer-toggle input:checked + label::before { width: 30px; background: rgba(255, 255, 255, 0.5); }

.dplayer-controller .dplayer-icons .dplayer-toggle input:checked + label::after { left: 12px; }

.dplayer-mobile-play { display: none; width: 50px; height: 50px; border: none; background-color: transparent; outline: none; cursor: pointer; box-sizing: border-box; bottom: 0px; opacity: 0.8; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.dplayer-danmaku { position: absolute; inset: 0px; font-size: 22px; color: rgb(255, 255, 255); }

.dplayer-danmaku .dplayer-danmaku-item { display: inline-block; pointer-events: none; user-select: none; cursor: default; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.5) 0.5px 0.5px 0.5px; }

.dplayer-danmaku .dplayer-danmaku-item--demo { position: absolute; visibility: hidden; }

.dplayer-danmaku .dplayer-danmaku-right { position: absolute; right: 0px; transform: translateX(100%); }

.dplayer-danmaku .dplayer-danmaku-right.dplayer-danmaku-move { will-change: transform; animation-timing-function: linear; animation-play-state: paused; }

@keyframes danmaku { 
  0% { transform: translateX(100%); }
}

.dplayer-danmaku .dplayer-danmaku-top, .dplayer-danmaku .dplayer-danmaku-bottom { position: absolute; width: 100%; text-align: center; visibility: hidden; }

.dplayer-danmaku .dplayer-danmaku-top.dplayer-danmaku-move, .dplayer-danmaku .dplayer-danmaku-bottom.dplayer-danmaku-move { will-change: visibility; animation-timing-function: linear; animation-play-state: paused; }

@keyframes danmaku-center { 
  0% { visibility: visible; }
  100% { 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, 0.85); padding: 5px 0px; 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: rgba(255, 255, 255, 0.1); }

.dplayer-menu .dplayer-menu-item a { padding: 0px 10px; line-height: 30px; color: rgb(238, 238, 238); 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-list { position: absolute; bottom: 60px; left: 20px; }

.dplayer-notice-list .dplayer-notice { border-radius: 2px; background: rgba(28, 28, 28, 0.9); transition: all 0.3s ease-in-out 0s; overflow: hidden; color: rgb(255, 255, 255); display: table; pointer-events: none; animation: 0.3s ease 0s 1 normal forwards running showNotice; }

.dplayer-notice-list .remove-notice { animation: 0.3s ease 0s 1 normal forwards running removeNotice; }

@keyframes showNotice { 
  0% { padding: 0px; font-size: 0px; margin-top: 0px; }
  100% { padding: 7px 20px; font-size: 14px; margin-top: 5px; }
}

@keyframes removeNotice { 
  0% { padding: 7px 20px; font-size: 14px; margin-top: 5px; }
  20% { font-size: 12px; }
  21% { font-size: 0px; padding: 7px 10px; }
  100% { padding: 0px; margin-top: 0px; font-size: 0px; }
}

.dplayer-subtitle { position: absolute; bottom: 40px; width: 90%; left: 5%; text-align: center; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.5) 0.5px 0.5px 0.5px; font-size: 20px; }

.dplayer-subtitle.dplayer-subtitle-hide { display: none; }

.dplayer-mask { position: absolute; inset: 0px; z-index: 1; display: none; }

.dplayer-mask.dplayer-mask-show { display: block; }

.dplayer-video-wrap { position: relative; background: rgb(0, 0, 0); font-size: 0px; 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, 0.8); padding: 10px; color: rgb(255, 255, 255); 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; }