/*每个页面公共css */
    
    /*关键词css */
  .container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: flex-start; /* 垂直方向上靠顶部对齐 */
}

.tags {
    padding: 5px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 8px;
    max-width: 100%; /* 最大宽度 */
    text-align: center; /* 文本居中 */
}

.tags h2 {
    margin-bottom: 10px;
}

.tag-list {
    list-style-type: none; /* 去掉列表项默认样式 */
    padding: 0;
    display: flex; /* 使用 flex 布局 */
    justify-content: center; /* 水平居中 */
    flex-wrap: wrap; /* 允许内容换行 */
}

.tag-list li {
    margin: 3px;
    padding: 5px 10px;
    background-color: #e0e0e0;
    border-radius: 20px;
}  
    
    
    /*视频列表改背景文字颜色*/
uni-view.flex.flex-column {
    background: black;
}    
    
    
    
    
    /* 图标 */
    .iconfont {
      font-family: iconfont
    }

    .view,
    .text {
      font-size: 14px;
      line-height: 1.8
    }

    /* 宽度 */
    .w-100 {
      width: 1474px
    }

    .w-50 {
      width: 40%
    }

    .row {
      margin-right: -10px;
      margin-left: -10px;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row
    }

    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
      position: relative;
      padding-right: 10px;
      padding-left: 10px
    }

    .col-12 {
      width: 1474px
    }

    .col-11 {
      width: 343px
    }

    .col-10 {
      width: 312px
    }

    .col-9 {
      width: 281px
    }

    .col-8 {
      width: 250px
    }

    .col-7 {
      width: 218px
    }

    .col-6 {
      width: 187px
    }

    .col-5 {
      width: 156px
    }

    .col-4 {
      width: 125px
    }

    .col-3 {
      width: 93px
    }

    .col-2 {
      width: 62px
    }

    .col-1 {
      width: 31px
    }

    .col-offset-12 {
      margin-left: 1474px
    }

    .col-offset-11 {
      margin-left: 343px
    }

    .col-offset-10 {
      margin-left: 312px
    }

    .col-offset-9 {
      margin-left: 281px
    }

    .col-offset-8 {
      margin-left: 250px
    }

    .col-offset-7 {
      margin-left: 218px
    }

    .col-offset-6 {
      margin-left: 187px
    }

    .col-offset-5 {
      margin-left: 156px
    }

    .col-offset-4 {
      margin-left: 125px
    }

    .col-offset-3 {
      margin-left: 93px
    }

    .col-offset-2 {
      margin-left: 62px
    }

    .col-offset-1 {
      margin-left: 31px
    }

    .col-offset-0 {
      margin-left: 0
    }

    /* flex 布局 */
    .flex {
      display: flex;
      flex-direction: row
    }

    .flex-row {
      flex-direction: row !important
    }

    .flex-column {
      flex-direction: column !important
    }

    .flex-row-reverse {
      flex-direction: row-reverse !important
    }

    .flex-column-reverse {
      flex-direction: column-reverse !important
    }

    .flex-wrap {
      flex-wrap: wrap
    }

    .flex-nowrap {
      flex-wrap: nowrap
    }

    .justify-start {
      justify-content: flex-start
    }

    .justify-end {
      justify-content: flex-end
    }

    .justify-between {
      justify-content: space-between
    }

    .justify-center {
      justify-content: center
    }

    .justify-around {
      justify-content: space-around
    }

    .align-center {
      align-items: center !important
    }

    .align-stretch {
      align-items: stretch
    }

    .align-start {
      align-items: flex-start
    }

    .align-end {
      align-items: flex-end
    }

    .self-end {
      align-self: flex-end
    }

    .content-start {
      align-content: flex-start
    }

    .content-end {
      align-content: flex-end
    }

    .content-center {
      align-content: center
    }

    .content-between {
      align-content: space-between
    }

    .content-around {
      align-content: space-around
    }

    .content-stretch {
      align-content: stretch
    }

    .flex-1 {
      flex: 1
    }

    .flex-2 {
      flex: 2
    }

    .flex-3 {
      flex: 3
    }

    .flex-4 {
      flex: 4
    }

    .flex-5 {
      flex: 5
    }

    .flex-shrink {
      flex-shrink: 0
    }

    .container {
      padding-right: 10px;
      padding-left: 10px
    }

    /*  -- 内外边距 -- */
    .m-0 {
      margin: 0
    }

    .m-auto {
      margin: auto
    }

    .m-1 {
      margin: 5px
    }

    .m-2 {
      margin: 10px
    }

    .m-3 {
      margin: 15px
    }

    .m-4 {
      margin: 20px
    }

    .m-5 {
      margin: 25px
    }

    .mt-0 {
      margin-top: 0
    }

    .mt-auto {
      margin-top: auto
    }

    .mt-1 {
      margin-top: 5px
    }

    .mt-2 {
      margin-top: 10px
    }

    .mt-3 {
      margin-top: 15px
    }

    .mt-4 {
      margin-top: 20px
    }

    .mt-5 {
      margin-top: 25px
    }

    .mb-0 {
      margin-bottom: 0
    }

    .mb-auto {
      margin-bottom: auto
    }

    .mb-1 {
      margin-bottom: 5px
    }

    .mb-2 {
      margin-bottom: 10px
    }

    .mb-3 {
      margin-bottom: 15px
    }

    .mb-4 {
      margin-bottom: 20px
    }

    .mb-5 {
      margin-bottom: 25px
    }

    .ml-0 {
      margin-left: 0
    }

    .ml-auto {
      margin-left: auto
    }

    .ml-1 {
      margin-left: 5px
    }

    .ml-2 {
      margin-left: 10px
    }

    .ml-3 {
      margin-left: 15px
    }

    .ml-4 {
      margin-left: 20px
    }

    .ml-5 {
      margin-left: 25px
    }

    .mr-0 {
      margin-right: 0
    }

    .mr-auto {
      margin-right: auto
    }

    .mr-1 {
      margin-right: 5px
    }

    .mr-2 {
      margin-right: 10px
    }

    .mr-3 {
      margin-right: 15px
    }

    .mr-4 {
      margin-right: 20px
    }

    .mr-5 {
      margin-right: 25px
    }

    .my-0 {
      margin-top: 0;
      margin-bottom: 0
    }

    .my-auto {
      margin-top: auto;
      margin-bottom: auto
    }

    .my-1 {
      margin-top: 5px;
      margin-bottom: 5px
    }

    .my-2 {
      margin-top: 10px;
      margin-bottom: 10px
    }

    .my-3 {
      margin-top: 15px;
      margin-bottom: 15px
    }

    .my-4 {
      margin-top: 20px;
      margin-bottom: 20px
    }

    .my-5 {
      margin-top: 25px;
      margin-bottom: 25px
    }

    .mx-0 {
      margin-left: 0;
      margin-right: 0
    }

    .mx-auto {
      margin-left: auto;
      margin-right: auto
    }

    .mx-1 {
      margin-left: 5px;
      margin-right: 5px
    }

    .mx-2 {
      margin-left: 10px;
      margin-right: 10px
    }

    .mx-3 {
      margin-left: 15px;
      margin-right: 15px
    }

    .mx-4 {
      margin-left: 20px;
      margin-right: 20px
    }

    .mx-5 {
      margin-left: 25px;
      margin-right: 25px
    }

    .p-0 {
      padding: 0
    }

    .p {
      padding: 2px
    }

    .p-1 {
      padding: 5px
    }

    .p-2 {
      padding: 10px
    }

    .p-3 {
      padding: 15px
    }

    .p-4 {
      padding: 20px
    }

    .p-5 {
      padding: 25px
    }

    .pt-0 {
      padding-top: 0
    }

    .pt {
      padding-top: 2px
    }

    .pt-1 {
      padding-top: 5px
    }

    .pt-2 {
      padding-top: 10px
    }

    .pt-3 {
      padding-top: 15px
    }

    .pt-4 {
      padding-top: 20px
    }

    .pt-5 {
      padding-top: 25px
    }

    .pb-0 {
      padding-bottom: 0
    }

    .pb-1 {
      padding-bottom: 5px
    }

    .pb {
      padding-bottom: 2px
    }

    .pb-2 {
      padding-bottom: 10px
    }

    .pb-3 {
      padding-bottom: 15px
    }

    .pb-4 {
      padding-bottom: 20px
    }

    .pb-5 {
      padding-bottom: 25px
    }

    .pl-0 {
      padding-left: 0
    }

    .pl {
      padding-left: 2px
    }

    .pl-1 {
      padding-left: 5px
    }

    .pl-2 {
      padding-left: 10px
    }

    .pl-3 {
      padding-left: 15px
    }

    .pl-4 {
      padding-left: 20px
    }

    .pl-5 {
      padding-left: 25px
    }

    .pr-0 {
      padding-right: 0
    }

    .pr {
      padding-right: 2px
    }

    .pr-1 {
      padding-right: 5px
    }

    .pr-2 {
      padding-right: 10px
    }

    .pr-3 {
      padding-right: 15px
    }

    .pr-4 {
      padding-right: 20px
    }

    .pr-5 {
      padding-right: 25px
    }

    .py-0 {
      padding-top: 0;
      padding-bottom: 0
    }

    .py {
      padding-top: 2px;
      padding-bottom: 2px
    }

    .py-1 {
      padding-top: 5px;
      padding-bottom: 5px
    }

    .py-2 {
      padding-top: 10px;
      padding-bottom: 10px
    }

    .py-3 {
      padding-top: 15px;
      padding-bottom: 15px
    }

    .py-4 {
      padding-top: 20px;
      padding-bottom: 20px
    }

    .py-5 {
      padding-top: 25px;
      padding-bottom: 25px
    }

    .px-0 {
      padding-left: 0;
      padding-right: 0
    }

    .px-1 {
      padding-left: 5px;
      padding-right: 5px
    }

    .px {
      padding-left: 2px;
      padding-right: 2px
    }

    .px-2 {
      padding-left: 10px;
      padding-right: 10px
    }

    .px-3 {
      padding-left: 15px;
      padding-right: 15px
    }

    .px-4 {
      padding-left: 20px;
      padding-right: 20px
    }

    .px-5 {
      padding-left: 25px;
      padding-right: 25px
    }

    /* 文字大小 */
    .font-small {
      font-size: 10px
    }

    .font-sm {
      font-size: 12px
    }

    .font {
      font-size: 15px
    }

    .font-md {
      font-size: 17px
    }

    .font-lg {
      font-size: 20px
    }

    .h1 {
      font-size: 40px;
      line-height: 1.8
    }

    .h2 {
      font-size: 30px;
      line-height: 1.8
    }

    .h3 {
      font-size: 22px;
      line-height: 1.8
    }

    .h4 {
      font-size: 16px;
      line-height: 1.8
    }

    .h5 {
      font-size: 15px;
      line-height: 1.8
    }

    .h6 {
      font-size: 14px;
      line-height: 1.8
    }

    /* 文字缩进 */
    .text-indent {
      text-indent: 2
    }

    /* 文字划线 */
    .text-through {
      text-decoration: line-through
    }

    /* 文字对齐 */
    .text-left {
      text-align: left
    }

    .text-right {
      text-align: right
    }

    .text-center {
      text-align: center
    }

    /* 文字换行溢出处理 */
    .text-ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* 文字粗细和斜体 */
    .font-weight-light {
      font-weight: 300
    }

    /*细*/
    .font-weight-lighter {
      font-weight: 100
    }

    /*更细*/
    .font-weight-normal {
      font-weight: 400
    }

    /*正常*/
    .font-weight-bold {
      font-weight: 700
    }

    /*粗*/
    .font-weight-bolder {
      font-weight: 700
    }

    /*更粗*/
    .font-italic {
      font-style: italic
    }

    /*斜体*/
    /* 文字颜色 */
    .text-white {
      color: #fff
    }

    .text-primary {
      color: #007bff
    }

    .text-hover-primary {
      color: #0056b3
    }

    .text-secondary {
      color: #6c757d
    }

    .text-hover-secondary {
      color: #494f54
    }

    .text-success {
      color: #28a745
    }

    .text-hover-success {
      color: #19692c
    }

    .text-info {
      color: #17a2b8
    }

    .text-hover-info {
      color: #0f6674
    }

    .text-warning {
      color: #ffc107
    }

    .text-hover-warning {
      color: #ba8b00
    }

    .text-danger {
      color: #dc3545
    }

    .text-hover-danger {
      color: #a71d2a
    }

    .text-light {
      color: #f8f9fa
    }

    .text-hover-light {
      color: #cbd3da
    }

    .text-dark {
      color: #343a40
    }

    .text-hover-dark {
      color: #121416
    }

    .text-body {
      color: #212529
    }

    .text-muted {
      color: #6c757d
    }

    .text-light-muted {
      color: #a9a5a0
    }

    .text-light-black {
      color: rgba(0, 0, 0, .5)
    }

    .text-light-white {
      color: hsla(0, 0%, 100%, .5)
    }

    /* 背景颜色 */
    .bg-primary {
      background-color: #007bff
    }

    .bg-hover-primary:hover {
      background-color: #0062cc
    }

    .bg-secondary {
      background-color: #6c757d
    }

    .bg-hover-secondary:hover {
      background-color: #545b62
    }

    .bg-success {
      background-color: #28a745
    }

    .bg-hover-success {
      background-color: #1e7e34
    }

    .bg-info {
      background-color: #17a2b8
    }

    .bg-hover-info {
      background-color: #117a8b
    }

    .bg-warning {
      background-color: #ffc107
    }

    .bg-hover-warning {
      background-color: #d39e00
    }

    .bg-danger {
      background-color: #dc3545
    }

    .bg-hover-danger {
      background-color: #bd2130
    }

    .bg-light {
      background-color: #f8f9fa
    }

    .bg-hover-light {
      background-color: #dae0e5
    }

    .bg-dark {
      background-color: #343a40
    }

    .bg-hover-dark {
      background-color: #1d2124
    }

    .bg-white {
      background-color: #fff
    }

    .bg-transparent {
      background-color: initial
    }

    /* 边框 */
    .border {
      border-width: 1px;
      border-style: solid;
      border-color: #dee2e6
    }

    .border-top {
      border-top-width: 1px;
      border-top-style: solid;
      border-top-color: #dee2e6
    }

    .border-right {
      border-right-width: 1px;
      border-right-style: solid;
      border-right-color: #dee2e6
    }

    .border-bottom {
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #dee2e6
    }

    .border-left {
      border-left-width: 1px;
      border-left-style: solid;
      border-left-color: #dee2e6
    }

    .border-0 {
      border-width: 0 !important
    }

    .border-top-0 {
      border-top-width: 0 !important
    }

    .border-right-0 {
      border-right-width: 0 !important
    }

    .border-bottom-0 {
      border-bottom-width: 0 !important
    }

    .border-left-0 {
      border-left-width: 0 !important
    }

    .border-primary {
      border-color: #007bff
    }

    .border-secondary {
      border-color: #6c757d
    }

    .border-light-secondary {
      border-color: #e9e8e5
    }

    .border-success {
      border-color: #28a745
    }

    .border-info {
      border-color: #17a2b8
    }

    .border-warning {
      border-color: #ffc107
    }

    .border-danger {
      border-color: #dc3545
    }

    .border-light {
      border-color: #f8f9fa
    }

    .border-dark {
      border-color: #343a40
    }

    .border-white {
      border-color: #fff
    }

    /* 圆角 */
    .rounded {
      border-radius: 4px
    }

    .rounded-top {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px
    }

    .rounded-right {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px
    }

    .rounded-bottom {
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px
    }

    .rounded-left {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px
    }

    .rounded-circle {
      border-radius: 50px
    }

    .rounded-0 {
      border-radius: 0
    }

    /* 显示 */
    .d-none {
      display: none
    }

    .d-inline-block {
      display: inline-block
    }

    .d-block {
      display: block
    }

    /* 内容溢出 */
    .overflow-hidden {
      overflow: hidden
    }

    /* 定位 */
    .position-relative {
      position: relative
    }

    .position-absolute {
      position: absolute
    }

    .position-fixed {
      position: fixed
    }

    /* 定位 - 固定顶部 */
    .fixed-top {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 112
    }

    /* 定位 - 固定底部 */
    .fixed-bottom {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 112
    }

    .top-0 {
      top: 0
    }

    .left-0 {
      left: 0
    }

    .right-0 {
      right: 0
    }

    .bottom-0 {
      bottom: 0
    }

    /* 阴影 */
    .shadow {
      box-shadow: 0 1px 6px rgba(0, 0, 0, .15)
    }

    .shadow-lg {
      box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, .175)
    }

    .shadow-none {
      box-shadow: none !important
    }

    body,
    html {
      overflow-x: hidden
    }

    .page {
      background-color: #000;
      min-height: 100vh;
      height: auto;
      flex: 1;
      max-width: 950px;
      margin: 0 auto
    }

    /* 背景颜色 */
    .uni-body {
      background-color: #000 !important
    }

    /* 金色文字 */
    .gold-text {
      color: #ffd100
    }

    /* 公告颜色 */
    .notice-title {
      background-color: #000;
      color: #ddd
    }

    .notice-background {
      background-color: #000
    }

    /* 轮播背景 */
    .swiper-view {
      background-color: #000
    }

    /* 导航 */
    .web-nav {
      margin: 0 0px;
      background-color: #000
    }

    .web-nav-text {
      width: 21%;
      background-color: #49b8cf;
      margin: 5px 0;
      color: #fff;
      font-size: 12px;
      padding: 10px 2px;
      text-align: center;
      border: 1px solid #000 !important;
      font-weight: 700
    }

    .web-nav-on {
      color: #ffd100;
      font-weight: 700
    }

    /* 列表 */
    .web-list {
      background-color: #000
    }

    .list-icon {
      width: 25px;
      height: 25px
    }

    .list-title {
      background-color: #000;
      color: #fff;
      padding: 5px
    }

    .list-title-text {
      color: #fff
    }

    .list-img {
      align-items: center;
      width: 100%;
      height: 110px;
      border-radius: 7px !important;
      box-shadow: #a9a9a9 1px 1px 5px 1px
    }

    .list-video-item {
      background-color: #fff;
      margin: 5px;
      padding: 5px
    }

    .video-name {
      color: #fff;
      font-size: 13px;
      height: 38px;
      width: 100%;
      overflow: hidden;
      padding-top: 2px;
      text-overflow: ellipsis;
      text-align: left;
      padding-left: 2px
    }

    .border-bottom {
      border-bottom: 2px solid #999 !important;
      width: 100%
    }

    .art-name {
      font-size: 15px;
      height: 25px;
      overflow: hidden;
      padding-top: 2px;
      width: 100%;
      color: #000
    }

    .art-list-item {
      background-color: #fff;
      margin: 5px
    }

    .video-date {
      font-size: 12px;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #fff
    }

    .video-data-bg {
      color: #fff
    }

    /* 文章列表样式*/
    .art-line {
      width: 100%
    }

    /* 文章 */
    .art-title {
      color: #49b8cf
    }

    .art-key {
      color: #000
    }

    .list-art-item {
      margin: 5px
    }

    .art-title-time {
      color: #ff0080
    }

    /* 分页按钮 */
    .web-list-page {
      background-color: #000
    }

    .page-button {
      border: 1px solid #444 !important;
      color: #ddd;
      padding: 5px 10px 5px 10px;
      background-color: #444
    }

    .page-now,
    .page-total {
      color: #ddd;
      font-weight: 700
    }

    /* 底部 */
    .footer {
      background-color: #000
    }

    .footer-text {
      color: #fff
    }

    /* app ad */
    .app-background {
      background-color: #000
    }

    .title {
      border-left-color: #ffd100;
      border-left-width: 4px;
      border-style: solid
    }

    .app-title {
      width: 100%;
      height: 44px
    }

    .app-item {
      border: 1px solid #ccc !important;
      background-color: #fff;
      border-radius: 8px
    }

    .app-img {
      width: 80px;
      height: 80px
    }

    .app-name {
      color: #49b8cf;
      font-size: 16px;
      font-weight: 700
    }

    .app-desc {
      color: #999;
      font-size: 14px;
      font-weight: 400
    }

    .app-down {
      font-size: 12px;
      color: #000
    }

    .app-button {
      border: 1px solid #49b8cf;
      background-color: #49b8cf;
      padding: 5px 15px;
      border-radius: 5px;
      font-size: 16px;
      margin-top: -10px
    }

    .app-button-text {
      color: #fff
    }

    .dplayer-video {
      max-height: 65vw
    }

    .dplayer-mobile-play {
      display: none !important
    }

    .dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-airplay-icon,
    .dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-camera-icon,
    .dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-play-icon,
    .dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-volume {
      display: inline-block !important
    }

    uni-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,%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;
      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,%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;
      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,%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;
      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,%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;
      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,%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;
      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,%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;
      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: initial
    }

    .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: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
      height: 98px;
      width: 100%
    }

    .dplayer-controller,
    .dplayer-controller-mask {
      position: absolute;
      bottom: 0;
      transition: all .3s ease
    }

    .dplayer-controller {
      left: 0;
      right: 0;
      height: 41px;
      padding: 0 20px;
      -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: 33px;
      width: calc(100% - 40px);
      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: 38px;
      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 uni-input[type=radio] {
      display: none
    }

    .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box uni-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 uni-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 uni-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 uni-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 uni-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::-webkit-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: 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 {
      line-height: 38px;
      color: #eee;
      text-shadow: 0 0 2px rgba(0, 0, 0, .5);
      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: initial;
      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: 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 {
      -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: 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, .9);
      padding: 5px 0;
      transition: all .3s ease-in-out;
      overflow: hidden;
      color: #fff;
      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: 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 uni-input {
      max-height: 0;
      max-width: 0;
      display: none
    }

    .dplayer-controller .dplayer-icons .dplayer-toggle uni-input+uni-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 uni-input+uni-label:after,
    .dplayer-controller .dplayer-icons .dplayer-toggle uni-input+uni-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 uni-input+uni-label:after {
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .4)
    }

    .dplayer-controller .dplayer-icons .dplayer-toggle uni-input:checked+uni-label {
      border-color: hsla(0, 0%, 100%, .5)
    }

    .dplayer-controller .dplayer-icons .dplayer-toggle uni-input:checked+uni-label:before {
      width: 30px;
      background: hsla(0, 0%, 100%, .5)
    }

    .dplayer-controller .dplayer-icons .dplayer-toggle uni-input:checked+uni-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: 60px;
      left: 20px;
      font-size: 14px;
      border-radius: 2px;
      background: rgba(28, 28, 28, .9);
      padding: 7px 20px;
      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
    }
    
    
    .uni-app--showtabbar uni-page-wrapper {
      display: block;
      height: calc(100% - 50px);
      height: calc(100% - 50px - constant(safe-area-inset-bottom));
      height: calc(100% - 50px - env(safe-area-inset-bottom));
    }

    .uni-app--showtabbar uni-page-wrapper::after {
      content: "";
      display: block;
      width: 100%;
      height: 50px;
      height: calc(50px + constant(safe-area-inset-bottom));
      height: calc(50px + env(safe-area-inset-bottom));
    }

    .uni-app--showtabbar uni-page-head[uni-page-head-type="default"]~uni-page-wrapper {
      height: calc(100% - 44px - 50px);
      height: calc(100% - 44px - constant(safe-area-inset-top) - 50px - constant(safe-area-inset-bottom));
      height: calc(100% - 44px - env(safe-area-inset-top) - 50px - env(safe-area-inset-bottom));
    }    
    
    .float-view[data-v-551d3599] {
      position: relative;
      z-index: 110
    }

    .float-top[data-v-551d3599] {
      position: fixed;
      z-index: 111;
      top: 0;
      width: 100%;
      max-width: 950px;
      height: 85px
    }

    .float-bottom[data-v-551d3599] {
      position: fixed;
      z-index: 111;
      bottom: 0;
      width: 100%;
      max-width: 950px
    }

    .swiper-top[data-v-551d3599] {
      height: 85px;
      position: relative
    }

    .swiper-img-top[data-v-551d3599] {
      width: 100%;
      height: 85px
    }

    .swiper-bottom[data-v-551d3599] {
      height: 100px
    }

    .swiper-img-bottom[data-v-551d3599] {
      width: 100%;
      height: 100px
    }

    .float-div[data-v-551d3599] {
      height: 85px
    }

    .float-del[data-v-551d3599] {
      position: absolute;
      right: 0;
      width: 25px;
      height: 25px
    }

    .bottom-button[data-v-551d3599] {
      top: -25px
    }