@charset "utf-8";
/**
 * reset.less
 * 每个页面都应该引入一份
 * Created by Wangbw on 2016/6/2.
 */
/* reset */
html,
body {
  overflow-x: hidden;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img,
iframe {
  border: 0 none;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: 400;
}
ol,
ul,
li {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: 400;
}
q:before,
q:after {
  content: '';
}
a {
  text-decoration: none;
}
img {
  vertical-align: middle;
  border: none;
}
article,
aside,
footer,
header,
nav,
section {
  display: block;
}
button,
input,
select,
textarea {
  font-size: 100%;
  font-family: inherit;
}
::-webkit-scrollbar {
  display: none;
}
/* 文字排版 */
.f12 {
  font-size: 12px;
}
.f13 {
  font-size: 13px;
}
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px;
}
.f20 {
  font-size: 20px;
}
.fb {
  font-weight: 700;
}
.fn {
  font-weight: 400;
}
.fi {
  font-style: italic;
}
.t2 {
  text-indent: 2em;
}
.unl {
  text-decoration: underline;
}
.no_unl {
  text-decoration: none;
}
/* 定位 */
.tl {
  text-align: left;
}
.tc {
  text-align: center;
}
.tr {
  text-align: right;
}
.bc {
  margin-left: auto;
  margin-right: auto;
}
.fl {
  float: left;
  display: inline;
}
.fr {
  float: right;
  display: inline;
}
.cb {
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 0;
}
.cl {
  clear: left;
}
.cr {
  clear: right;
}
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *height: 1%;
  zoom: 1;
}
.vm {
  vertical-align: middle;
}
.pr {
  position: relative;
}
.pa {
  position: absolute;
}
.abs-right {
  position: absolute;
  right: 0;
}
.zoom {
  zoom: 1;
}
.hidden {
  visibility: hidden;
}
.none {
  display: none;
}
.block {
  display: block;
}
.iblock {
  display: inline-block;
}
/* 长度高度 */
.w {
  width: 100%;
}
.h {
  height: 100%;
}
/* 边距 */
.m10 {
  margin: 10px;
}
.m15 {
  margin: 15px;
}
.m30 {
  margin: 30px;
}
.mt5 {
  margin-top: 5px;
}
.mt0 {
  margin-top: 0;
}
.mt10 {
  margin-top: 10px;
}
.mt15 {
  margin-top: 15px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
.mb5 {
  margin-bottom: 5px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.ml5 {
  margin-left: 5px;
}
.ml10 {
  margin-left: 10px;
}
.ml15 {
  margin-left: 15px;
}
.ml20 {
  margin-left: 20px;
}
.ml30 {
  margin-left: 30px;
}
.mr5 {
  margin-right: 5px;
}
.mr10 {
  margin-right: 10px;
}
.mr15 {
  margin-right: 15px;
}
.mr20 {
  margin-right: 20px;
}
.mr30 {
  margin-right: 30px;
}
.p10 {
  padding: 10px;
}
.p15 {
  padding: 15px;
}
.p30 {
  padding: 30px;
}
.pt5 {
  padding-top: 5px;
}
.pt10 {
  padding-top: 10px;
}
.pt15 {
  padding-top: 15px;
}
.pt20 {
  padding-top: 20px;
}
.pt30 {
  padding-top: 30px;
}
.pb5 {
  padding-bottom: 5px;
}
.pb10 {
  padding-bottom: 10px;
}
.pb15 {
  padding-bottom: 15px;
}
.pb20 {
  padding-bottom: 20px;
}
.pb30 {
  padding-bottom: 30px;
}
.pl5 {
  padding-left: 5px;
}
.pl10 {
  padding-left: 10px;
}
.pl15 {
  padding-left: 15px;
}
.pl20 {
  padding-left: 20px;
}
.pl30 {
  padding-left: 30px;
}
.pr5 {
  padding-right: 5px;
}
.pr10 {
  padding-right: 10px;
}
.pr15 {
  padding-right: 15px;
}
.pr20 {
  padding-right: 20px;
}
.pr30 {
  padding-right: 30px;
}
/**
 * 公共变量
 */
/** 
 * 全局配置 
 */
html {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
html::-webkit-scrollbar {
  width: 0px;
}
body,
html {
  font-family: "FZYaSongS-R-GB", "FZYaSong-M-GBK", "PingFang SC", miui, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}
body {
  background-color: #fff;
  font-size: 16px;
  color: #333;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/**
 * 公共组合类
 */
.dot {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  font-family: "FZYaSongS-R-GB", "PingFang SC", miui, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}
html::-webkit-scrollbar {
  width: 0px;
}
html.bangs-new-style {
  padding-top: 88px;
}
html.ios-new-style {
  padding-top: 64px;
}
html.new-style {
  padding-top: 44px;
}
body {
  position: relative;
  box-sizing: border-box;
  background-color: #FAFBFC;
}
body.pure-video {
  background-color: #fff;
}
body.pure-video #xxqg-content {
  padding-bottom: 10px;
}
body .xxqg-wrapper {
  height: 100%;
}
body.outside {
  padding-bottom: 60px;
}
body.outside #xxqg-banner.banner-bottom-fixed {
  margin-bottom: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  border-bottom: 0 none;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
#xxqg-header {
  padding: 0 18px;
  margin-bottom: 24px;
}
#xxqg-header h1 {
  font-family: "FZYaSong-H-GBK", "FZYaSongS-R-GB", "PingFang SC", miui, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.5rem;
  text-align: left;
  line-height: 2.25rem;
  padding: 12px 0;
  margin: 0;
  color: #333;
  word-break: break-all;
}
#xxqg-header .header-info {
  font-family: "PingFang SC", miui, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  position: relative;
  height: auto;
  line-height: 0;
}
#xxqg-header .header-info .header-site-logo {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  overflow: hidden;
  bottom: 1px;
}
#xxqg-header .header-info .header-site-logo::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  content: '';
  width: 18px;
  height: 18px;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 32px;
  box-sizing: border-box;
}
#xxqg-header .header-info .header-site-logo .header-site-logo-pic {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  z-index: 1;
}
#xxqg-header .header-info .header-site-logo .header-site-logo-txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  font-size: 12px;
  overflow: hidden;
  text-align: center;
  background-color: rgba(34, 34, 34, 0.05);
}
#xxqg-header .header-info .header-site-logo-txt {
  font-size: 0.875rem;
  line-height: 18px;
  display: inline-block;
  vertical-align: top;
  margin-right: 6px;
}
#xxqg-header .header-info .header-site-time {
  font-size: 14px;
  line-height: 18px;
  color: #bbb;
  display: inline-block;
  vertical-align: top;
}
#xxqg-header .header-info.xxqg-author {
  height: 40px;
}
#xxqg-header .header-info.xxqg-author.small {
  height: auto;
}
#xxqg-header .header-info.xxqg-author .header-site-logo-big {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 32px;
  bottom: 1px;
}
#xxqg-header .header-info.xxqg-author .header-site-logo-big .header-site-logo-pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  z-index: 1;
  transition: opacity 200ms ease 0s;
  opacity: 1;
}
#xxqg-header .header-info.xxqg-author .header-site-logo-big .header-site-logo-txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  font-size: 26px;
  overflow: hidden;
  text-align: center;
  background-color: rgba(34, 34, 34, 0.05);
}
#xxqg-header .header-info.xxqg-author .xxqg-subscribe {
  position: absolute;
  right: 0;
  bottom: -6px;
  color: #fff;
  background-color: #e32416;
}
#xxqg-header .header-info.xxqg-author .xxqg-subscribe.active {
  background-color: #ABB3BA;
}
#xxqg-header .header-desc {
  display: inline-block;
  vertical-align: top;
}
#xxqg-header .header-desc .source-name {
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  margin-bottom: 2px;
}
#xxqg-header .header-desc .source-name .source-author-name {
  padding-left: 12px;
}
#xxqg-header .header-desc .author-name {
  font-size: 12px;
  line-height: 17px;
}
#xxqg-header .header-desc .author-name > span {
  color: #bbb;
}
#xxqg-header .header-info-editor {
  font-family: "PingFang SC", miui, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  margin-top: 8px;
  font-size: 0.875rem;
}
#xxqg-content {
  position: relative;
  max-width: 720px;
  min-height: 100%;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
  color: #333;
  padding-bottom: 30px;
  box-sizing: border-box;
}
#xxqg-content.web-video .xxqg-content.xxqg-video .video-box {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
}
#xxqg-content.web-video .xxqg-content.xxqg-video {
  position: relative;
  padding-top: 56.25%;
}
#xxqg-content .xxqg-content {
  position: relative;
  font-size: 1.125rem;
  line-height: 2.25rem;
  text-align: justify;
  padding: 0 18px 5px;
}
#xxqg-content .xxqg-content p {
  text-align: justify;
  text-indent: unset;
  margin: 0 0 20px;
  word-wrap: break-word;
}
#xxqg-content .xxqg-content p.sub-title {
  font-weight: bold;
}
#xxqg-content .xxqg-content .img-para {
  position: relative;
  text-align: center;
  text-indent: unset;
  margin: 0 0 20px;
}
#xxqg-content .xxqg-content .img-para .placeholder {
  width: 100%;
  z-index: -1;
  display: none;
}
#xxqg-content .xxqg-content .img-para img {
  max-width: 100%;
  text-align: center;
}
#xxqg-content .xxqg-content .img-para img.loaded {
  background-color: transparent;
}
#xxqg-content .xxqg-content > div img {
  max-width: 100%;
  text-align: center;
}
#xxqg-content .xxqg-content .img-desc,
#xxqg-content .xxqg-content .imgDesc {
  font-family: "PingFang SC", miui, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  text-indent: 0;
  text-align: left;
  margin-top: -10px;
  font-size: 0.875rem;
  color: #999999;
  line-height: 1.25rem;
  border-bottom: 3px solid #f2f2f5;
  padding-bottom: 15px;
}
#xxqg-content .xxqg-content .video-box {
  margin-bottom: 20px;
}
#xxqg-content .xxqg-content .caption p {
  margin: 0;
  text-align: center;
}
#xxqg-content .xxqg-content .caption p span {
  text-indent: 0;
  text-align: left;
  margin-top: -10px;
  font-size: 0.875rem;
  color: #bbb;
  line-height: 1.25rem;
}
#xxqg-content .xxqg-content.xxqg-video {
  position: relative;
  padding: 0;
}
#xxqg-content .xxqg-content.xxqg-video .video-box {
  display: none;
  margin: 0;
}
#xxqg-content .xxqg-content.xxqg-video .video-desc {
  background-color: #fff;
  box-sizing: border-box;
  margin: 0 16px;
  padding: 16px 0;
}
#xxqg-content .xxqg-content.xxqg-video .video-desc .title {
  font-family: "FZYaSong-H-GBK", "FZYaSongS-R-GB", "PingFang SC", miui, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  margin-bottom: 8px;
  font-size: 1.1875rem;
  line-height: 1.5rem;
  color: #191F25;
  font-weight: normal;
  text-align: left;
}
#xxqg-content .xxqg-content.xxqg-video .video-desc .desc {
  font-family: "PingFang SC", miui, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  color: #abb3ba;
}
#xxqg-content .xxqg-content.xxqg-video .video-info {
  box-sizing: border-box;
  padding: 16px;
  border-top: 1px solid #f7f7f7;
  background-color: #fff;
  background-image: linear-gradient(180deg, #f7f7f7, #fff 16px);
}
#xxqg-content .xxqg-content.xxqg-video .video-info .info-title {
  font-family: "FZYaSong-H-GBK", "FZYaSongS-R-GB", "PingFang SC", miui, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  position: relative;
  font-size: 1.1875rem;
  line-height: 1.6rem;
  font-weight: normal;
  margin-bottom: 12px;
  padding-left: 12px;
  color: #000;
}
#xxqg-content .xxqg-content.xxqg-video .video-info .info-title::before {
  position: absolute;
  left: 0;
  top: 3px;
  background-color: #E32416;
  content: '';
  height: 1rem;
  width: 4px;
}
#xxqg-content .xxqg-content.xxqg-video .video-info .info-detail {
  position: relative;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: #666;
  overflow: hidden;
}
#xxqg-content .xxqg-content.xxqg-video .video-info .info-detail .actor {
  margin-right: 10px;
}
#xxqg-content .xxqg-content p {
  text-indent: unset;
  text-align: justify;
}
#xxqg-content .xxqg-content ol,
#xxqg-content .xxqg-content ul,
#xxqg-content .xxqg-content li {
  list-style: inherit;
}
#xxqg-content .xxqg-content [data-node-type="Paragraph"] {
  font-size: 1.125rem;
  line-height: 1.9125rem;
}
#xxqg-content .xxqg-content h3 > [data-node-type="Paragraph"] {
  line-height: 1.75rem;
  margin-bottom: 20px;
}
#xxqg-content .xxqg-content h3 [data-node-type="Paragraph"] {
  color: #2C2E31;
  font-weight: bolder;
  font-size: 1.1875rem;
}
#xxqg-content .xxqg-content h1 {
  color: #2C2E31;
  font-weight: bolder;
  font-size: 1.1875rem;
}
#xxqg-content .xxqg-content h1 > [data-node-type="Paragraph"] {
  line-height: 1.75rem;
  margin-bottom: 20px;
  color: #2C2E31;
  font-weight: bolder;
  font-size: 1.1875rem;
}
#xxqg-content .xxqg-content .hugo-text-border {
  border: 1px solid #333;
}
#xxqg-content .xxqg-content .hugo-align-right {
  text-align: right;
}
#xxqg-content .xxqg-content .hugo-align-right [data-node-type="Paragraph"] {
  text-align: right;
}
#xxqg-content .xxqg-content .hugo-pagination {
  display: none;
}
#xxqg-content .xxqg-content b,
#xxqg-content .xxqg-content strong {
  font-weight: bolder;
}
#xxqg-content .xxqg-content .hugo-image {
  padding: 20px;
  cursor: pointer;
}
#xxqg-content .xxqg-content .hugo-image .image {
  display: block;
  max-height: 415px;
  max-width: 100%;
  margin: 0 auto;
}
#xxqg-content .xxqg-content .hugo-image > .caption {
  padding: 20px 0;
}
#xxqg-content .xxqg-content .hugo-image > .caption > [data-node-type="Paragraph"] {
  color: #949699;
  font-size: 0.875rem;
}
#xxqg-content .xxqg-content blockquote {
  font-family: "PingFang SC", miui, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  font-style: normal;
  background: #f2f2f2;
  margin-bottom: 20px;
}
#xxqg-content .xxqg-content blockquote [data-node-type="Paragraph"] {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  padding: 8px;
  color: #999999;
  margin: 0;
}
#xxqg-content .xxqg-content .hugo-divider {
  position: relative;
  bottom: 6px;
  margin-bottom: 8px;
}
#xxqg-content .xxqg-content .hugo-divider hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #EDEDEE;
  margin: 0;
  padding: 0;
}
#xxqg-content .xxqg-content ol {
  list-style-type: decimal;
  list-style-position: inside;
  margin-bottom: 20px;
}
#xxqg-content .xxqg-content ol li,
#xxqg-content .xxqg-content ul li {
  padding: 2px 0;
}
#xxqg-content .xxqg-content ul {
  list-style-type: disc;
  list-style-position: inside;
  margin-bottom: 20px;
}
#xxqg-content .xxqg-content .article-editor-content {
  font-family: "PingFang SC", miui, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  margin-bottom: 10px;
}
#xxqg-content .xxqg-content .article-editor-content .article-editor-name {
  font-size: 0.875rem;
  line-height: 1rem;
  text-align: left;
  color: #bbb;
}
#xxqg-content .xxqg-content .article-editor-content .article-editor-name:first-child {
  margin-bottom: 10px;
}
#footer-end-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 50px 0 30px 0;
  text-align: center;
  display: none;
}
#footer-end-content .footer-line {
  position: relative;
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  color: rgba(25, 31, 37, 0.4);
}
#footer-end-content .footer-line::before,
#footer-end-content .footer-line::after {
  position: absolute;
  top: 50%;
  content: '';
  width: 60px;
  height: 1px;
  background-color: #e8e8e8;
}
#footer-end-content .footer-line::before {
  left: -70px;
}
#footer-end-content .footer-line::after {
  right: -70px;
}
#xxqg-banner {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  font-size: 0;
  padding: 0 16px;
  opacity: 1;
  display: block;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  animation-duration: 0.5s;
}
#xxqg-banner.hide {
  opacity: 0;
  display: none;
}
#xxqg-banner > div {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
}
#xxqg-banner .banner-logo {
  width: 44px;
  height: 44px;
  margin-right: 13px;
  background-image: url(https://boot-source.xuexi.cn/static/app-logo.png);
  background-color: #f9f9f9;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}
#xxqg-banner .banner-txt {
  height: 100%;
  padding-top: 10px;
  width: 60%;
}
#xxqg-banner .banner-txt .banner-txt-title {
  color: #191F25;
  font-size: 1rem;
  font-weight: 500;
  line-height: initial;
  line-height: 22px;
}
#xxqg-banner .banner-txt .banner-txt-desc {
  color: #9B9B9B;
  font-size: 0.75rem;
  line-height: initial;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#xxqg-banner .banner-btn {
  position: absolute;
  right: 16px;
  top: 15px;
  width: 50px;
  height: 30px;
  line-height: 30px;
  font-size: 0.875rem;
  text-align: center;
  border-radius: 20px;
  background-color: #D0021B;
  color: #fff;
}
#xxqg-gg-subscribe {
  position: relative;
  width: 100%;
  border: 1px solid #F5F5F7;
  background-color: #FAFBFC;
  padding: 12px 16px;
  font-size: 1rem;
  box-sizing: border-box;
  border-radius: 5px;
}
#xxqg-gg-subscribe.hide {
  display: none;
}
#xxqg-gg-subscribe.nodesc .gg-subscribe-txt .gg-subscribe-txt-title {
  margin-bottom: 0;
}
#xxqg-gg-subscribe > div {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
}
#xxqg-gg-subscribe .gg-subscribe-logo {
  width: 44px;
  height: 44px;
  margin-right: 13px;
  background-color: #f9f9f9;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  -webkit-background-size: 104%;
  -moz-background-size: 104%;
  -o-background-size: 104%;
  background-size: 104%;
}
#xxqg-gg-subscribe .gg-subscribe-txt {
  width: 60%;
  height: 100%;
}
#xxqg-gg-subscribe .gg-subscribe-txt .gg-subscribe-txt-title {
  color: #191F25;
  font-size: 1rem;
  font-weight: 500;
  line-height: initial;
  line-height: 22px;
  width: 100%;
  margin-bottom: 4px;
}
#xxqg-gg-subscribe .gg-subscribe-txt .gg-subscribe-txt-desc {
  color: #9B9B9B;
  font-size: 0.75rem;
  line-height: initial;
  width: 100%;
}
#xxqg-gg-subscribe .gg-subscribe-txt > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#xxqg-gg-subscribe .xxqg-subscribe {
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: -15px;
  color: #F90620;
  background-color: #F5F5F7;
}
#xxqg-gg-subscribe .xxqg-subscribe:before,
#xxqg-gg-subscribe .xxqg-subscribe:after {
  background-color: #F90620;
}
#xxqg-gg-subscribe .xxqg-subscribe.active {
  background-color: #F5F5F7;
  color: #687078;
}
.xxqg-subscribe {
  position: relative;
  color: #fff;
  background-color: #e32416;
  display: inline-block;
  font-size: 14px;
  z-index: 8;
  width: 60px;
  height: 30px;
  line-height: 31px;
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
  padding-left: 16px;
  border-radius: 4px;
  font-family: PingFang SC, miui, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, sans-serif;
}
.xxqg-subscribe:before {
  content: '';
  position: absolute;
  top: 14px;
  left: 10px;
  width: 12px;
  height: 1px;
  background-color: #fff;
}
.xxqg-subscribe:after {
  content: '';
  position: absolute;
  top: 14px;
  left: 10px;
  width: 12px;
  height: 1px;
  background-color: #fff;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.xxqg-subscribe.hide {
  display: none;
}
.xxqg-subscribe.active {
  background-color: #ABB3BA;
  padding-left: 0;
}
.xxqg-subscribe.active:before {
  display: none;
}
.xxqg-subscribe.active:after {
  display: none;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 0.3;
  }
  60% {
    opacity: 0.5;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 0.3;
  }
  60% {
    opacity: 0.5;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 0.3;
  }
  60% {
    opacity: 0.5;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 0.3;
  }
  60% {
    opacity: 0.5;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
#subscribe-wrapper {
  padding: 0px 72px 0px 48px;
  font-family: "PingFang SC";
  -webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.03);
  -moz-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.03);
  box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.03);
  max-width: 100%;
  position: relative;
  border: 0 none;
  background-color: #fff;
  line-height: 44px;
  height: 44px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
  font-size: 14px;
  color: #191F25;
  font-weight: 500;
}
#subscribe-wrapper.padding-left {
  padding-left: 16px;
}
#subscribe-wrapper.padding-right-pc {
  padding-right: 16px;
}
#subscribe-wrapper .subscribe-icon {
  position: absolute;
  left: 16px;
  top: 10px;
  display: inline-block;
  margin-right: 8px;
  height: 24px;
  width: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
  border-radius: 24px;
  line-height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
#subscribe-wrapper .subscribe-icon-wrapper {
  display: inline-block;
  width: 24px;
  height: 24px;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid gray;
  background-color: #fff;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
  border-radius: 24px;
  text-align: left;
}
#subscribe-wrapper .subscribe-name {
  display: inline-block;
  line-height: 20px;
  font-size: 14px;
  color: #191F25;
  font-weight: 500;
}
#subscribe-wrapper .subscribe-action {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 16px;
  height: 44px;
}
#subscribe-wrapper .subscribe-action.action-hide {
  display: none;
}
#subscribe-wrapper .subscribe-action .subscribe-action-icon-wrapper {
  display: inline-block;
  line-height: 0;
  padding: 4px 14px;
  background-color: #E32416;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
#subscribe-wrapper .subscribe-action .subscribe-action-icon-wrapper .subscribe-action-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAURJREFUWAntWEsKwjAQbesHBY/hwqWIO0EEj+Ep3Lt07xVceQpX7hUv4C26UFHqe0Jg0JS0jJjNDEwzmcxMXl9SEpokP5CiKFo/KKMvASBd6BF6g26hfX1VRQUAmEClPNAZK0ommSYZuZ9L1YCvp6mpBaSZ25trgLy0CKcxJMjwmsaQlxbhNIYEGV7TGPLSIpxN2jgQO2hG0Db7NWToiR2insf9dpUN5GmaHhmR8oECezRz2pHkgXkHAHXJAIasTCMBcdNypVbsZEB1R7tjJ7IsSI77ytYA84wM6EBy3nuIQICON726lytu6g3zhSxhn0W/islVOgHQtUpwaQxeYgb9lFlpQoUBt2QVQv8TYoBCPBtDxlCIgdC47SFjKMRAaFy7h3goSuGNIZeOv9o4VTvQPfQO3ULj/rBybw8gde/iLvWrfQFRuHxXZqHFogAAAABJRU5ErkJggg==") no-repeat center / 12px;
}
#subscribe-wrapper .subscribe-action .subscribe-action-icon-wrapper.subscribed {
  background-color: #CCD0D4;
}
#subscribe-wrapper .subscribe-action .subscribe-action-icon-wrapper.subscribed .subscribe-action-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABjklEQVRYR+2Vuy5EURSGv7+aqKZxSSQajUQnSLReYDoKFCqeQDJegJB4gikkKlEpeAAhKhLxFJQq5ZIt50yO7dyvzexmmj3r+/ba699HdLzUMZ+JQOsdMLNF4A74lLTZqkAAfwbmgtnrtSYQA3cOa60IJMCdwHbjAinwa2CvUYEM+I4ka0wgD9zdQSMCeeGNCBSBjwXMbBW4AOaBWeBe0m7R70RReFTgHDjygENJZ3klysCjAjPAK7AQARowkOSezdRlZkvAQ+SFC/dfAftu2pMKjIfQzJaBF2Aqsvkb2JD0nlQggD8B096eTPi/ITSzAXDrpeMDWJHkfv+sqvDYFJjZEDj1WK4DrhOuI7+rDnhiDM3sBtjyJNwsuJmwuuBpAj3gEVj3JFwqLoHSd+5fY+JLaGZxyXD//wL6XqERcJg27ZkpiNuQkAx/60jSQVZUSwkEwxaXjLBeJXjiDMTE7Rg48dte5eRhrdxfQy8ZlU9eRiBMxlsdJy8sEMxDX5JLQW0r9xXURvQKTQQ678APhOWspthLVxsAAAAASUVORK5CYII=") no-repeat center / 12px;
}
#xxqg-content .xxqg-content .video-subscribe {
  border-top: 1px solid #f7f7f7;
  background-color: #fff;
  background-image: linear-gradient(180deg, #f7f7f7, #fff 16px);
}
#xxqg-content .xxqg-content .video-subscribe .video-desc-subscribe {
  background-color: transparent;
}
#xxqg-content .xxqg-content .video-subscribe .video-info-subscribe {
  padding: 16px 0px;
  margin: 0px 16px;
  background-image: none;
}
.video-cover-compatibility {
  height: 10px;
}
.video-cover-hide {
  display: none;
  opacity: 0;
}
.border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.audio {
  /* width: 100%; */
  font-family: "PingFang SC";
  background-color: #FFF;
  padding: 25px 16px 25px 72px;
  margin: 12px 0;
  position: relative;
  -webkit-box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.05);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.audio .audio-duration {
  font-size: 10px;
  line-height: 12px;
  color: #ABB3BA;
  text-align: center;
  margin-top: 3px;
}
.audio .audio-title {
  /* width: 100%; */
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #191F25;
  font-weight: 500;
  max-height: 2.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.audio .audio-left {
  position: absolute;
  left: 16px;
  top: 50%;
  overflow: hidden;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
}
.audio .play {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 2px solid #E32416;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  border-radius: 40px;
  box-sizing: border-box;
  text-align: center;
  /* line-height: 44px; */
  /* background-color: #E32416; */
  background: #E32416 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEGklEQVRoQ+2ZgVFUQQyGkwqUCoQKhAqUCtQK1ArECsQK1AqUCoQKlAqECoQKhArifEyW2ctl39t33D2GGTJzA3N3bzd/8v/ZZE/lgZs+cP/lEcB9Z3BtGTCzFyLyWkR2HdS2iPDCLvzF/2cicqyqp+sAfycAZvZSRD6ICH+fTnToSkR+i8g3VeXvSrYSAHf8kzu+0sbhIQB8XgXIJABmRpS/iMi7dXidrPFDRD6qKtnpsm4AZgaff1YcjxtcOiWORQQHLlQV7os/y/MEAJ1AuWcND9HIm/LsGIouAGaGMH81eI4YD6em32l4KCKIPxoB2FdVwAzaKACnzd/E+XMROZjqePTGgXwVkefhM0DsjNGpBwCRJ+W1Hbnz3VwdCqMHCRBvo7hVdX/o2UEAZkaKqTa1US14f+22yn5NAC48qLMQeVXdVAW62cfMqEQxE1DppiBEGwJASjmkilFldsc4ede0OJ0Qb12lmllPATSES2mjRG7czIwsf682agq6BeDAD6zb6Ktq6Ws2DsCpBGXqLHDAwYoFawHgaK/r83tVhZuzmZnFIJ6qaqyG+TxgZhY83do092NknMb/6vdVdSngS2/4wULtL5YinyMVZhaZwOm80LlmAGLtp90lnbObmcVKuFSNMgAR9WzVJ6ERjR8NZJMNPQCW0jZXKnroPAogE86MAGi/ayEv6TEDsFCB7hOAnweD/kwG4LPBE8/CZe/g0cqa91zlwLqOM0As6TGgXQDM7JVPUogqDu+IHqFPaq29ziPQeDixDi0LNxcnqwCgkaqHCxYcu3E4U9W9Kdowsz8D42lZKu7dpYFYRnv96p4TGn1/zz5rAXDtl1M0d3WzxRC/0+OFmVFZ6qwynhJtZu+ir2ypLgDZFIbT8PJHOcqdw3SM9YajTV/SKrP2dtGQ137aafQWwXSdxIiq7oVwci8TaTI9HY1NbGZGICgKxdJnPEDopG7jx3uhrPaKSNqNJifllapuDdEooU960mcjbVc36gCikNNhwr8Ld+tUk630PicBTN1PK9xd54E4TDQFmrS8TR0k/G+26mbGhUJNn3TdoZk4CjTNQlISm+W097tJ9BeEXlN06FYiVqN0sE6i2hRyIuClqDr3EW9NrWm3Es5tFohZgNuI7rZt6Gl5S8TGJiyvPFTA8iMJjzajz4djN3PxeoNnFkCsC0DDefYbPFt67kbjWMeiZID3uSNFaPW5MYVC3HuSZW7iKByxIo2Os6MAGmV1qNRPEfHQOl2XCb0AiAz3QvUJ2tp86ByA2wh0zE74FainRe8CUImQNFOdWg3XuarWAlxy1Mxiu15/B8HyY8nSDVwL8SQAVXUqzVbpHrn4pcdh88HBxsVKEGjW6GZLd1uaxUmD0WQAY7mf+/NHAHNHPO734DPwH0KeEk8OLNuwAAAAAElFTkSuQmCC") no-repeat center / 20px;
}
.audio .play.paused {
  border: 2px solid lightgrey;
  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABF0lEQVRoQ+1ZQQqDMBDchd5rD3oLFewD+oX+rE+L/8hBak+2oC9oiqhQArYb3Yt0POtkZ3aYDMi08Yc3Pj/9D4F7np79zu+Ne5YaW9PCE2/gVqQtMyfD8N4SsSV62aWEtPDEBOpT5ueV99a4xyVmM1p4SgSIjGvEWD3R7wTkeOJDtQ6ctqSFBwKTorBQkABSQWAhWGjm8oCFQmG0chv3QKAsUggphBQSlnikUCCUliBIIaQQUggpNCggrb8ocyhzK1MDFoKFYKFBAZS50Qloo2ijK0MBFiLyZf/Dz7jmKiy2P1IoDk++gSKriOk4DTz+obQxQ3++WyvhiQm0eZIcqq5bOnD4nRaemIDW4No4IKCtaCze5jfwBqw1akDrGjt/AAAAAElFTkSuQmCC") no-repeat center / 20px;
}
.audio .play.playing {
  border: 2px solid lightgrey;
  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABmUlEQVRoQ+2ZQUrDQBSG30jd6UKKghAL0t5Hj2BPYHuDeIP0Bh6hvUnd2zK2y1iI2zThSVpRlGKczHszbzDZZBEy839584U3iYLADxV4fmgBfFfwf1ZgNejeVE++97yZBVeBdf88AaXu98FxrgoYRjqd+wIxXkLrwQX+DIuAyWmxfTjTWeYahARgVwsEDVCOe4vN1CUEGcBnaIRpp8zHlzrTLkDoAXbVwEwhxFfLdMINwQLwFZpfcmaAj3cVo+ROADgldwbAJbl7AGLJvQBQSu4ZwF5yEQA2kosBaCq5PABDyUUCmEguHGCPohCH0SJ9PNRXBQFQBe8U+fWhDrcF4G6XA19C+KQKuPttzy1yCSHi2xFiHC1fk7oKiwNAhNlxmY/+uiWVA4DwglCOTD8KyABAnJyU27jJZxnPAPWSinTARFJxAKaSygFoKKkMAAtJPQPYS+oFgFJS5wDUkroDYJLUDQCjpPQA338x1ba7dQFsrxu3EtWEq373tjqbNl62YUn2xBwhbMZsVAGbCanvbQGon6jpeMFX4B38rU5As8XneQAAAABJRU5ErkJggg==") no-repeat center / 20px;
}
.audio .play.play-loading {
  border: 2px solid #E32416;
  background: #E32416;
}
.audio .audio-loading {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 1;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
  border-radius: 24px;
  background: #E32416 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAAAXNSR0IArs4c6QAAIQJJREFUeAHtnVmsbGlVx2nmQURmEJruRkCQQZmFMDgTjJhIgkMCmJZEJNEYp2BiIFF8cHjw0WjCgw8ajYovkk58UGToNCDIYASboZuxmaemmaFdv6r9q/uv73y7aledOueeW6dWsmqN37S+f31716665152mz2lW2+99bINljYl99ZV/V122WUr46vaXsqx21/Kk8+5dwAzBRTZxab5tD2XoDlu0bL9qelbAKQFxDp73VpasKSduv0s+fb1hNqbE8hdG6RgUeJOvWcPTScJwEF/giT1SR3sS9K+AShBkjr7taktOHp7TV/fiT5X5fba743vzAJo4iUrQZE6G4SdPvWU6us2FIAIEuVtw2d7Y9p7L6cW8MQLsSVgnD8ydebLBkP6WzvbZN6sUb0kGNBl4ujfHqQ2J5JtMpc4ZGxm7Ms90Zk9gWZVXn5pN1xAkJUxdWXG8fVsffPo8qtgQAISyf4Fhn0b16+9l/JSA5CbkJvlRirJQRdg5mJnjnHzU+bmq3Pi2AafTDuJ/s1P3fjeybMKIDe9J/W5mdiwAGGTtNV7tu3IgVo7TxtAQVzQrJL2BeD2nk4NQBve47iZSOl2g2IsAYOubZx8dZqmrR8Jac+t+WsCCN17HsCDzXgCyVykPvsu18yHTWyv6NQANKFqWXDStZGyfmwBgw+9BUhrkwNDbfvsf55x4X6HTbddgkNQkU/cPskhhp20d+BhcWcJQMynLXra6Nq5YbTD1mdeayeg7lT5VxRfOUj0exXfrcPfLN+niv+r+Jria4shxmEMAYPuCeQ8y7XfdGoLbS5h7bjYMhVHbwHQ2oDfNkgAQg6ETMBcVfZTi59Y/APF9y92jFJnhA0h5ZljsNHxA6RXFF9fDGDkbwy6gPrWYJdYXNaIzWhfPsZbNNe1M9kAhn7bsXKT0AUIuejaxhIwxLCRUNrk37P42cVPGPg+JfFDSnTb9/yZRxwy/+bSX1b85mIB9PXSuU/yFOLkQof0JYCMzTMu0ddekXaylAkAYjMcH6mNDucJQkzAGL/DkEcMvkvxM4ufU8xpQz6Ufc89y+P2fI6RMTafOUHEv1T8guIPFgOcrw2SPMAhgLD1IWdUJ9ABQBajJ9cAyA1S0kUCBv/YiUMsAcUl6XnFP1783cUQOZL5+pTEe7r5ts88xtUGDG8tfmFxAghgnBsA+S6tNZ8ouVEpczPcNKRMPHUApg/55OIXFz+pmLxtaNt2jsUcnl78xmLnqjQHeWQc3mD7cB+0MwCtOXEooptvQbFhCMlczKHgdyx2M/BjI3+4+EXFjy2GzFFPqZ45+HpEDoTkdNHG1yPzfqaC1xUzN04epO3tY3HpqtiM9gE8LGRnAJqXZfSVQsokoVNofehpe9qk/zGV85vFjxhySyzIDdOhTf+QG6g99057XdeGExByLY499468Hk6gkcKscLsRFlqZwGl17HsU/1ox9zn2UeriXd7bsMwjVxJI2GM55k6VPBLo0a767/V9ZnwndQJRPAuoZNH682TBh92eOtiA5qXF3BxnP2Uu7DE/OT0yXzmWsyrea7OR79xfwtbc81D8ZIoLWPUBmLznASx8LEeSw7v6FcWPG+wSC8Cgb0OeVJueQrZrx7SfT1YAXSav1fEt0dRL2FBn6vWdswi6kzqBKJZgQacA2kp8yZ5ATyv/y4u/pxgiP8n26buYOk+m15FgW+RtAYbbFZgAETfqZ4ZOGkAsVAC48UrBo80J9KvFPJxLsvj2g62eeZvq9ttrtyqW+eS9tjjze/ou5su4tx1OpDNzGu0KQIKARWax9Ldg0VZyyXpVMQ8Foexj7um/rstzM8fyiLexnq83OnlvKb62mFMBxpdc5oyoMw8bd0HMl9Po21ucYrsYf6mPyQAakJ+N28JrI2H6Vgco2AIGyTfiyCuK/6z4fsVtH7av0CKGDpk7ty68soFS5qSfeMawjesfs839Qil/UMyXpoDDL09bMFVoNhb92Se+4xBzvH3tybcuNogmA2jNai06cowTPOo82/mjYj5lUXj7KXUBNnSIOGSOm6FNrO0DHzS2efYxz1p+zX7bPL9MvWHom3HJUdKTbZB8L7aWChDUpSXmgT/no36navONi3lf1Jtwu4CpNotyYeopGctCIJ9a/CfFfn9V6oLsZ+EYlDF/m6fN5sn6jiu5af7F4rcV27eSvlPHhgT/3Nrt6x0LRHwAuSi0qxOIybu5CRp0gZPyJ8r/+8WMT8FtW+qSjp3U5mYsdfKg7HfuufBqjnIs9yvV5DPFAOffivOexxNHaV/I5DJPhJyzJxGX0VOlbQHExGUmjO7pok7f+niH3HGwn1JS8JAL2dcqe555FHBuGnH07MOY0j6UN5VyQ/GHiz80yC+WvKX4ywP7QzHvcegLwLQ/18g4OcllzmzkSREnEd/Q7upmfdI8twVQ23kCoNUFEZJPWa8s9silyOaXeoSMHwlMcGRbdOizxW8fmEvQJ4qNeYqUa+ZjI4jJ2uQlGx+Tlb4YA30bamuE3SNOoq+fJoiOAyAXkdKFIgFMguchZfNRnZOIYkPkpT5zDi/4M25MX0piY/lfq9gbirn8AB5IADg2Eh+Erq2OFEDG7IM26ubj24ZYU0s9nznGlPjvUiD66mmBaBMA5SR7CyAOt8DB5iP6Hxd/VzFFti91NoC8JHKIj1Ebw86T7WNl/0Px64oBEQBIkGBDtION4WsBYRx/5qsjoZTG5pE1r1x9hhQlpnorjeE3hk+6W/X35dP4dDYKoFiQk1I6aU8XbHQ2Tx+6320hX1l83+IxyiKk7obQTt3x2r6Is8EfKP674n8vzlMjdXPts2fjy7jtyz3zJ5jG2pM7o9pM+9LVk6wt15/6lHxzaHfX2sNbJo5ru43lKIBGelq1IGICSB37V4ofGf1lH+gwxdWvroymoyq5ny/+62IuVdjc1CJl7XIdOWH0ISHaCJC01ZHGyYVamb5ZwjFerI2SrlLvdc2bmIe1nL4nRpsCKCfCApJb8BDjE9fzh0bYbiZ6UmtnrKe7WcTYyH8tfnUxn5yI4ZNLXeiOb479aJOrj/aQNrLV025zsU+aqJu1U+aY3FTzlcekB5nZcKo+FUBO1EmmPabz/dbvDBOxHaa6Mn1D+mKjtJG5Wd7r8CmKh5HvKe59rHbTkV6C7Acb0t4UMPZtH2nPOt7ixVraNGukb1PJ/dDNBSLXu2n7lfmrANROXttFcuJ46iDZVFj/y0vnKXO2K7NLbmI3ODgzh81+Y/GfF3PqYPu8xo1MwOBLu8xZG/tspXGkJMC0bYOtrrzNju89ejXU53xWSf7JE3XaOa0CUA7mZJHJ5GgLJuznFHPfQ9GxIYprjjYx/Er8SRlzc5B/VfxPxYKCcVInx3sedJgc9VJnNhIfpJxby7ltvM1t4/axiaQGsu20UxpDUk+JHKn18+09X7zu/H5oKoCcmJPMBbU6p87VNghp23At1N6GEGzbcJnim/s3FQsIpLogoj996NqlLkDkmK0kB9KfevpmSbt6qc39Dvcr1V9vT7LG2w7JpWznX7z2JnubGqjdOCatL2UuDB3kX11898gv9UhbfKuo3Shsvl54VfG7igEHxW7BMxU01XQBEMdSEoPW2fOsHb5yn1K1Z1wetiZZ5/RtqtMHfzyCXxLsjBYAGgENAzn5lAAF5p4HPzp9cdni8oUPUrabMY9e2CTjSNuYgwQ8v1d8fTE5ACXvebDbS5anUYVmbXIMfJC+Vp8Fm7i+mdzxPc6i7+EkYm0JImpiXZSLNh1lLMevOuh/J7QA0EhvORF0bXUlAEJ/6Yp+bDuSsrSZ5AgmFvuHxdcXe+IgPYHIg42VOrP192x9SIn8BZ0UQBYDrFAGEHG55iHsLok94NuAz+2qUzZ+UxIISts/sZSHFedGuIn6lLRpY/gk8wDJnxZ72RIk2RYdv77U9SkrbUbYZ5oKRKwdELV1znkTa9k9bf20w8cvGfN0w781rTqBGAxqJ9LaTBh+QbEb4ya6GP22rdQlwp856PCri71hFjytNNcx7Ud/dbEgYwvHWVYAUW02QMqTiFpJ3EK0ZI0zL3XyuUfllwnHpjEAOWBKwIANM3EZ/+OKuf8xv9QjxAbTZtUmGkNeW/zPxQKGS5kgQfrgsNRFTrYnpyXju35O046zM7tA9PUCEfvU7pW1VuaYvnH1meP671B93om+TdhWtgNlPw6qJIbe458fGjrBwVwrzEem/qmy/6JY8KTkHQmnj7bY9pN9tb5Ku+ToKzVj1ndcyr3jXujYtApAbecCSWn84aVwAm1KbjLtcpMpFM96fMKcQBEktlG2feHfG6qTgvV9tTgB0O7DpuvlF4zHvhdaB6CcMBN00kjaIn+yWBIIY7ZgME+Z+deU4Scu40rbCyT92R4d/15RgYjHFFzGk3J/3JPcU+O2aW2+4jgW5XWVziUHSilgkDI/F3iGjULaLlxL6tjG82+t/qaYQnGPw6WKXACDbbsEUrkX/gVwhnctsX0iTiFqvq6+Y2umXRK/GfrScWqVAMqOW90JpyTnycV3LXZjibvhTlZfhRYnGPpiszGKsF9dzJNS+1B64ijxw1Ar5949fGWjiwARXxdBWeO5Z/6ap5D+sVxOIe6xtqLeQKs6YhI5kR8pOzcw9VX9tDHa3Vj8umJ0uQWM/pSVvpgD+r4Tn5yoi/uwyXrdv5R8vbE1zQBUqO5NJgdJncGw+cNPj8cYITYZys0e08nj23UBo2zzyWvJcVr/XtrD5cafZuS+TNF7Nblz7X/veVIv94hv6iWMhk4Q0KFz+fIEYxPxuZnoLbU55pL38eLXF/t9Fvc+6ABJMClpB2Mv6DjX8UUnl47CKUSNevtn7ZW5KvcLX8a3/r1QduhAdJycgzko8rE2CGm7cM1UwaLEmfpryqYgLWBa0NAm22mnr1L2m4Y3y9b3LZ3q3Lnjm+TqAahtmKDJ2KPTCN3NzM3t+WgCQG4p5uuKNqdcRyhzjgTPmYMfh7E37KFv3HVyrERbA6h3BLaDOCn92JcX8xfEvIzgg1Kiu+HEyDWOX76udIqBPXbimFspB6ICdQrxAzQuZb2bYOs8S+WlQ5kze6hYfbbPmTrNll18M2tHKdFlWqCDdDmfPNuOPIkNb6kFgeD7j0rk8pWXMGIwPsi2ypnvnN33zArRvHAZ630lkXuSOvUbI+6DNgbQuksYgzuB1Ln/SXtsUvrbiWvzb7neXSww2hOI9saU+A40r4Af6XdRj62eSq8D0NjErqyAJ0jm5Canbg6+BAm/84EyVz3lPOvwulSB4QTOeyGvEEt5YRhHegAoecK9MQkgOoGUc6v/yhdw92lCbTs2vyUBgV/9f0oXUOlHTzrS3+HytSjPrv6lRd7OLDpfp6y6iW5Ral8PHBRBoH9MuvmtJD9/aZj3QPbdazM2znn19wDkwdDWpH2jE9eH5HDgsjiZxgBkp21H+L+32A1m081FyqUukfk4BQW/+fn0YBtvZeYbw3egoQJ1En+rPghRG58m5360dTI25t8ZgNoB0uYE2nQzzc8FfGToh76J92jM38s9zz5+qeDPXq2xMuvS8xHXD4A2orGjrteJgzyoF9zC9/GhTYJEXblFt+eyCQDaBW0MoLyECRDl2IT8KUEv7sbThzp56l7ysD9WzA10Mn5vqpXlWrRHP9DRCgCg3LfUj2aPexIP41kRWdeAicg0Q+exNxstKEpdEPHWr50SnRNIHx2gp43vQNMqMBVA7E+StnXf5Io062cdgHIw9a0eOA2NnShyp//E1smdU+kT++Mu/8QBxMbzwInLC+SJk3IeOfpKW9sR5Zd1EH44KW11ZeYd9HkFqE0eBp4sm9Yn+5jUdmPEVa+9b25XbS4x2Ulh8z2OfiSkPbcOr1MrkG/MqW16eRvjYWPE1aicQL2N9hTqTcz8BEr7AMyY7W2D3cbMOch5BfxwYj22PYF8lmQ/a+U2AFrb6SHh1CsAYASNb2TtE53MuiPLUyBle3I4wU1Pid6l0L4OcrMKrNvHqb1tfCnMEwgATEEvN7/8iElQJdLtgwm3gMrJEctLYZtLe/u1z14OeQe68KtEa7EtoDaucQLIwddJfoJ6ryHJzcVcNWnyZHLRj/M4gD4OdKEC3Lvk/Qv13YbyTT6p/TYA4gRqwcBpweCeGu3gbT62p1ibe7A3r0C7j/lm3gRMm+TOZpkDrZu2IMh7IAdU9voYiz2gl9zxCUplJ+Xcu7b6MVinahs/kGyRa59sOieKAEPHB/P/aRkvdS2RC9leHQAJCiWxlrJ9GzvY8wrwgcS9wmPN0FfVlnjSxgDKQbOjVbrfovdycuK9ePp6JxCLbResrcw+Dvq8Ars6gTb6MRlDj51AYxsDQG5qgvhyc1sQaStt/mCVgzx2BfhAknuwbYdbA0gQKJ2Am87kjHECcdTl6UVcLnXpCNW2L+U9K3Dv4s+QUOQY6jPn4WV1BerHiJw+/IWUJGucPvSeH5+1z/vbtm3XThC0CXTc408MfvKdUErbEG+pzXtUJQi8dbLt62DPK8AfuVhXu1VxMUDOxieQjZlKu7n4esRvT3p/4dP2vTZjPgAEMfmWer4252Bf+FtBx63FVv8NQgJobAKeKClvrOT8ZJaxVTpjZPyROIJ8p4TroI5VYPhXxZxAu6Ct/ljDKgC50U4u7ffo7EjyoBZg6Zsl1AuL9xTSlzJPIcGlzLzzqvPzYn5M39aEfYX1T5Fb/cDvts0/0BMkgqDmMKP0Awz+QaA+bMGiNNbKWWfxwsKeVozMBafu4qNZDV7/pj95KXh+jPvWUq1Pym0q8KVtGq37GA8AkrT5QTz/rt3jk8kDHgjdPGxBpK40/4fKwb8GWPUvC+jzQFGBevPw3RcA4s3WUtY/Y61f+5t1kPgL0cxfq/cGH2skEByUy5i+PHlSN67s9c1T1CcV5zuoBxjjvT7Oow/wACLroqQWvfrhH6OtTh86mwGouYw5iEDRTklMALX+BItgMseYfWv/VCXkZYt8C9IWo7Xt+9zI4eb5IU2Nsl5TdWoO8/XUVjQDUKelG4sUBEp9b68YDxSxIeXcmvbKQml3/+InFOfCE1CpZ85Cz/uhocDV3d4Spw9Pn6mLbC2wIW2lvlkwXqg/tyNbkYPRmI5kO8OGUqpz1/7uIZbgMq6k/RR6biW5WCSkPbcOr1aA02dX9IW6Aq26/1w5TgJoZeJI8NryCxRk6jTRN0U+qPKfQqOiBE4PTPrm2efotU5XvoTmr5KtqoH1myL5Axdb0yoArQKDJ847a+RbirH1Ibm0wfr1tdJLoLnPrzZ+r+Piy7VUrFWFI3dvqcDDM5/vL0byCRr214gp2VfZOmKj60eyx58r3propEc98CQYiGPz3clbizMf3Tg52qUuQKZP6SLvXjnPK24XmwtvdWxIOTP29J7oYbU4vjxlrUvrnS36wovxdfLTdflij7amMQDRIZsLuclz64Jt/PVDjmBpJ2Se0n7G5DMrcEVxLn5snhZROdbnJe+vNwR/FffyHS+EL8aPRWMb0+sUACQItG8s//82DYwpBZf2KklXVxfzKSMpAZX+vdeHS9fjOgvNmrCXcid15jKO/GKdPlt9fZGd09EqYqN7pF8gXDMkpb/Xbp3Pk+TelfjCIVlfSgtHin71jA1dXPLiMbUC7g1dm/I4C/vQcRrbdgEgHibKBgcpSJScJi1zAr0//OYqh64WAn+StpIY77gfLWaOPnFFlykiusVEJqV/6Xsz7o8y8SzrNderan48J2vJNSytc0hq62KOffB/hPF/sx2bGOgIAaQjzuXLF2Fykl9btpcqPlX5yQrJf5yibY5ttY3jR0f+bDHvPiiL0NP1IfeCCjwPrIWwft5A7JWftNB7tj4l+flpDT/1+VDxTogONyE2FVLOrfkr39AzsV4s83o6bXrM/H65+PuKWbhc6hEd395Qgec+tRi/Ixxbl/WYKunn5jogej8IHBtjpX8qgASFm0yn6in/fvA7qO20N5W0Z44vKeZBI0SxxigL2easatfmXlS7wMMnrqcWuz+5rtS3mef7tmk01sYJ9uIJDOKCQb/3QV56kB8ofkOxlyVzleTI+pAtZZHQ+cb+14t5DoLNvHvcttOu9BlpH7knqk1b8tngtOVw8jyjxuXSIy3mrWNLeVOdPlt/cdobcxWAevludrv5af9LNcyfR9qm7c82+DNHf/rIAUQvLX5sMQWFLOzcumD3/OYo7UP7ossCD3+D++nFCZ7evHrry/X45jIPyX0oH3R2SpsCqB28t9l8tfGa4jyFUu/10fq0BZHjUNgXFz+z2IJlkWx3yckCz8Nr0nnZcg29dabPvHXyfXX6bP2l6VjnTuRInCM9nOopBR8+mDt+deRvF3PzK+GDBMXcmr8KkIwBOoFHFpc+CT+/BPjHYk87c+0DO8kx0pe67Wa+kU+imb8TverMrzGfUszpwxqdh7JcszogIf1I1zwLxEu7dn6u8ZaTWJObGmPP1QZAODMXPZm4AEInxqeIlxfzVzhs6+LLNfOljS9tdI5dfRYFW6Ywf1v84eK2mJlf4UU/6vaL3aOV8V1sRtWYB6b8JpwaMd4YgHIu6m1+NV+Qa8fBqXNtzferi+gOFTf2SJdrAEQ+J5DtkdroMIDiGQb3LRA+F9/a+pXE0SmExcA2nj7064qvKaZI5mR+uRf9oENtfO698Go/FzyhHQdAw6nDvZwfCpwLa1HP8Xs6PvNjZjPV+mC8rebK/0tyIsSmdmkigGgrYFrpifRzlfNjQx4L641pgZSVNiuk70j8sjFt2/C7Xh5m/ncnlzZZVGzbo/fIfnsx/svJlfFuo3JWXR9a4geL+VZdci4pjSHz8u24ba5+8l3rDTXP9+I4Kept5mysCQASMOSjewJho2sjf6v4qmIXVuqREwlfEgXhEgb1imXB7BNJ/k3F/1nMg0185o3JSpmR8TFb/0xuAqChlldWQ04dnvFwWcnx0Fsu14K2ARBfVby55ml9Fp3tUmHjJ9EaQLUAwvYEQqdov1v83cUSfoqm1K9k4S7e4hJD7/nxeWKR9+ni1xdzs+2G0VayD+0cQ1/KbDvpBKqa8anxqmKAc/ehM/pxPoNrASbnlGOh49enpK356PqR/JGENxV4Nv5jCXS0CbF5k2gLAHkC0T/j8CnjN4q9YXRsFuziS12iXuHMt3jm6E9JZxQREL2r+IZi4pB5c+uC35h+pe1m9tgJNNSJtfKx/PJi3kiQ7R23tcnxpDFmO9eojYSsAbptvlE64LkZ50mTm7h2nAkAoi+Z/gSQY1DIq4pfVsxPMvW3Ba3QgnoFIh+/MaTFU7Y+3vH4KOoNwdw32UZZroUPXcr40glUteF0eVAxwEHy0wvy86SxPVIudUl3TeYaz5O1jZED4SePT1yfw3Ea5CauHWsNgGgPYCD6hHs2/kcWv6TYS1wWs9xLZEFxWjjBYUybnJ6PdtwbGbMfJIXmUvfZYD7J8VNdmHczxLMaQA/zRJxL8j1Deqrad4Vm8z1NALE+7nk+yeCnRZMB1E6oACVADGVf6DJx9DyRHl/2CwcfRZfJy00oc0H6kfmOJMH2ggRpPjr5xvRnP/rMaW/eq/msP/zmImXHMzaWr998bds5vrbxzMcnsS6IfD6uf3RmneILN3nbUi6yt/H4JHOVfNTm3uTqYuagHwln2zKPRfaFzL4dk87b2NQB7dt8bftubfNaaZ5+7Sn9ACKeMp/qyeNE21NE/y4ki7cA9KetfG/5/rLYryLIkbKdvinSvls5pa05jt3rw5i520jBgUymL2PZr77M1cclkhvmiwKesQnn5Ef15p7IBWW+4DTmJcxx8eO7XzH3RNxTQG4ScY/09BNvj3Q32/yMZ7590x85vUsSsbFLWF46HROpP/tHb+dB35D9o9sm+8EPZSxtdN54byjw8EHgopGbe+wJbHFPxNiOz03pi4qvKLZo6wBUqYtc2iTnxpGXtv2PAYg4MduYTz/txjvmpgAiX7J/ZAKauLE2l5v+E/t+y8GmSDdwSu7KnDUnkmBR0pcnFDp+PpX9dPGziiU2sSWK6uYaw5fcxtN2U/DlhrXtbWM+Y7UAwkc8+9GX/akTg8YAJBDnWRcA5ByQ/1f87jp5mN9Fp4sBIBbtuCkF1KMq/gvFPEvJQpe5IDdXhxukbOO5MW4GOa0/29uH+Yy1KwDRt2T/yB4QySPGIwU+pn8cx1khN/DY81lzAtG/AHHMVhLXxyXtl4ofUpxEIbPg6uSgszFuTsZaoJBPXuunTfajTT50sQDEs6rrCjz8WO9MkRu280l17olyDMZ17JSt/uTKe04xp1FSDySCR+AoaUdMW3nSAHJcJGM6rnra5iSg8fEw8x3FHyzwmI//zJAbtvMJbXAiOfbYCXWXSnhuMf/ExSKy+cxdu9TuiYIfIl+yzSoAkUMcaT7tx06gduNtl31kP735EDefsd5f/I4CDiA6s3QxAcTYOb4AsljGlJdX4HnFfN/kZihpg54bmbHcMPVePj7Zzcx+NgEQc2I+kH2mbr9KYuTz9QoPBj+D46yTm7PzeTYnEP33xtKXMnXnlT6+5X52MYDK4qO76aV2T530ky/g7AeZ/WjTDjpJAHGf884CzsdmI10iL27MiU+3AVQ7rraS+aTesx9azmcVI6HceO1ZoF48ddKPTwCZJ2AEorbx4wDIPtp58qnqXQWcT5hwKcl2k05s7g2AGKc3dvp6evqc64NLeULxo4v51pwNglKq63cTEyhtzDZK4rsCEN8D3lB8/aVyqWLxPeptSC/v2L5jAojx27m2Ng8iH1HM740fVpyUIEAXOErjyIzThzH04wCIfj5S/L7iDxdwOP0ueWo34cQWNBFAOX7OLXVytJXZDp2P/YDpquIri/kkJxBSCqAKz0ibnGSC2Lnpq/oxxnMb7mngGws0nDx7RWMbcOKL3DGg1s2Xf6N2ZfEVxQ8ovkexgHCzy7UEGvyysXUA4heP3AwDmI8WYD5Pw32mswSgts7r5pbx1Nt+ejaPDO7VMKcW91B3KOY3SkjvqfgagecxnCD8hAKb0+ULxXzsBij8ybi8xJVr/2nTwu+sIp0TqO173dwyjs5pkb62v7Tz1NHf8xlDLsULLEt2Jp4n/Ti/SDxLdXIzlVPmtknulP7OZc7Ud+ypF2cHJ9Rx57wEsMOJ0y/npXwCLW1wLe+4b4a2v37FDt6lCrTfPy0FD8ahAusqcADQugod4isrcNxjf2XnpxmccM+00XQO9zzTynU4gabV6ZA1UoEDgEYKc3BPq8ABQNPqdMg6VOBQgUMFDhU4cxX4f2GRV/1w3NXNAAAAAElFTkSuQmCC") no-repeat center / 20px;
  -webkit-animation: audioLoading 0.6s linear 0.24s infinite;
          animation: audioLoading 0.6s linear 0.24s infinite;
}
.audio .audio-loading.audio-loading-hide {
  display: none;
}
.audio .canvas {
  /* width: 50px;
    height: 50px; */
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
@keyframes audioLoading {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes audioLoading {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes my-face {
  2% {
    -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
            transform: translate(0, 1.5px) rotate(1.5deg);
  }
  4% {
    -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);
            transform: translate(0, -1.5px) rotate(-0.5deg);
  }
  6% {
    -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
            transform: translate(0, 1.5px) rotate(-1.5deg);
  }
  8% {
    -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
            transform: translate(0, -1.5px) rotate(-1.5deg);
  }
  10% {
    -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
            transform: translate(0, 2.5px) rotate(1.5deg);
  }
  12% {
    -webkit-transform: translate(0, -0.5px) rotate(1.5deg);
            transform: translate(0, -0.5px) rotate(1.5deg);
  }
  14% {
    -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
            transform: translate(0, -1.5px) rotate(1.5deg);
  }
  16% {
    -webkit-transform: translate(0, -0.5px) rotate(-1.5deg);
            transform: translate(0, -0.5px) rotate(-1.5deg);
  }
  18% {
    -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);
            transform: translate(0, 0.5px) rotate(-1.5deg);
  }
  20% {
    -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
            transform: translate(0, -1.5px) rotate(2.5deg);
  }
  22% {
    -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);
            transform: translate(0, 0.5px) rotate(-1.5deg);
  }
  24% {
    -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
            transform: translate(0, 1.5px) rotate(1.5deg);
  }
  26% {
    -webkit-transform: translate(0, 0.5px) rotate(0.5deg);
            transform: translate(0, 0.5px) rotate(0.5deg);
  }
  28% {
    -webkit-transform: translate(0, 0.5px) rotate(1.5deg);
            transform: translate(0, 0.5px) rotate(1.5deg);
  }
  30% {
    -webkit-transform: translate(0, -0.5px) rotate(2.5deg);
            transform: translate(0, -0.5px) rotate(2.5deg);
  }
  32% {
    -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);
            transform: translate(0, 1.5px) rotate(-0.5deg);
  }
  34% {
    -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);
            transform: translate(0, 1.5px) rotate(-0.5deg);
  }
  36% {
    -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
            transform: translate(0, -1.5px) rotate(2.5deg);
  }
  38% {
    -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
            transform: translate(0, 1.5px) rotate(-1.5deg);
  }
  40% {
    -webkit-transform: translate(0, -0.5px) rotate(2.5deg);
            transform: translate(0, -0.5px) rotate(2.5deg);
  }
  42% {
    -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
            transform: translate(0, 2.5px) rotate(-1.5deg);
  }
  44% {
    -webkit-transform: translate(0, 1.5px) rotate(0.5deg);
            transform: translate(0, 1.5px) rotate(0.5deg);
  }
  46% {
    -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
            transform: translate(0, -1.5px) rotate(2.5deg);
  }
  48% {
    -webkit-transform: translate(0, -0.5px) rotate(0.5deg);
            transform: translate(0, -0.5px) rotate(0.5deg);
  }
  50% {
    -webkit-transform: translate(0, 0.5px) rotate(0.5deg);
            transform: translate(0, 0.5px) rotate(0.5deg);
  }
  52% {
    -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
            transform: translate(0, 2.5px) rotate(2.5deg);
  }
  54% {
    -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
            transform: translate(0, -1.5px) rotate(1.5deg);
  }
  56% {
    -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
            transform: translate(0, 2.5px) rotate(2.5deg);
  }
  58% {
    -webkit-transform: translate(0, 0.5px) rotate(2.5deg);
            transform: translate(0, 0.5px) rotate(2.5deg);
  }
  60% {
    -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
            transform: translate(0, 2.5px) rotate(2.5deg);
  }
  62% {
    -webkit-transform: translate(0, -0.5px) rotate(2.5deg);
            transform: translate(0, -0.5px) rotate(2.5deg);
  }
  64% {
    -webkit-transform: translate(0, -0.5px) rotate(1.5deg);
            transform: translate(0, -0.5px) rotate(1.5deg);
  }
  66% {
    -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);
            transform: translate(0, 1.5px) rotate(-0.5deg);
  }
  68% {
    -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);
            transform: translate(0, -1.5px) rotate(-0.5deg);
  }
  70% {
    -webkit-transform: translate(0, 1.5px) rotate(0.5deg);
            transform: translate(0, 1.5px) rotate(0.5deg);
  }
  72% {
    -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
            transform: translate(0, 2.5px) rotate(1.5deg);
  }
  74% {
    -webkit-transform: translate(0, -0.5px) rotate(0.5deg);
            transform: translate(0, -0.5px) rotate(0.5deg);
  }
  76% {
    -webkit-transform: translate(0, -0.5px) rotate(2.5deg);
            transform: translate(0, -0.5px) rotate(2.5deg);
  }
  78% {
    -webkit-transform: translate(0, -0.5px) rotate(1.5deg);
            transform: translate(0, -0.5px) rotate(1.5deg);
  }
  80% {
    -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
            transform: translate(0, 1.5px) rotate(1.5deg);
  }
  82% {
    -webkit-transform: translate(0, -0.5px) rotate(0.5deg);
            transform: translate(0, -0.5px) rotate(0.5deg);
  }
  84% {
    -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
            transform: translate(0, 1.5px) rotate(2.5deg);
  }
  86% {
    -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
            transform: translate(0, -1.5px) rotate(-1.5deg);
  }
  88% {
    -webkit-transform: translate(0, -0.5px) rotate(2.5deg);
            transform: translate(0, -0.5px) rotate(2.5deg);
  }
  90% {
    -webkit-transform: translate(0, 2.5px) rotate(-0.5deg);
            transform: translate(0, 2.5px) rotate(-0.5deg);
  }
  92% {
    -webkit-transform: translate(0, 0.5px) rotate(-0.5deg);
            transform: translate(0, 0.5px) rotate(-0.5deg);
  }
  94% {
    -webkit-transform: translate(0, 2.5px) rotate(0.5deg);
            transform: translate(0, 2.5px) rotate(0.5deg);
  }
  96% {
    -webkit-transform: translate(0, -0.5px) rotate(1.5deg);
            transform: translate(0, -0.5px) rotate(1.5deg);
  }
  98% {
    -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);
            transform: translate(0, -1.5px) rotate(-0.5deg);
  }
  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes my-face {
  2% {
    -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
            transform: translate(0, 1.5px) rotate(1.5deg);
  }
  4% {
    -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);
            transform: translate(0, -1.5px) rotate(-0.5deg);
  }
  6% {
    -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
            transform: translate(0, 1.5px) rotate(-1.5deg);
  }
  8% {
    -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
            transform: translate(0, -1.5px) rotate(-1.5deg);
  }
  10% {
    -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
            transform: translate(0, 2.5px) rotate(1.5deg);
  }
  12% {
    -webkit-transform: translate(0, -0.5px) rotate(1.5deg);
            transform: translate(0, -0.5px) rotate(1.5deg);
  }
  14% {
    -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
            transform: translate(0, -1.5px) rotate(1.5deg);
  }
  16% {
    -webkit-transform: translate(0, -0.5px) rotate(-1.5deg);
            transform: translate(0, -0.5px) rotate(-1.5deg);
  }
  18% {
    -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);
            transform: translate(0, 0.5px) rotate(-1.5deg);
  }
  20% {
    -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
            transform: translate(0, -1.5px) rotate(2.5deg);
  }
  22% {
    -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);
            transform: translate(0, 0.5px) rotate(-1.5deg);
  }
  24% {
    -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
            transform: translate(0, 1.5px) rotate(1.5deg);
  }
  26% {
    -webkit-transform: translate(0, 0.5px) rotate(0.5deg);
            transform: translate(0, 0.5px) rotate(0.5deg);
  }
  28% {
    -webkit-transform: translate(0, 0.5px) rotate(1.5deg);
            transform: translate(0, 0.5px) rotate(1.5deg);
  }
  30% {
    -webkit-transform: translate(0, -0.5px) rotate(2.5deg);
            transform: translate(0, -0.5px) rotate(2.5deg);
  }
  32% {
    -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);
            transform: translate(0, 1.5px) rotate(-0.5deg);
  }
  34% {
    -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);
            transform: translate(0, 1.5px) rotate(-0.5deg);
  }
  36% {
    -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
            transform: translate(0, -1.5px) rotate(2.5deg);
  }
  38% {
    -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
            transform: translate(0, 1.5px) rotate(-1.5deg);
  }
  40% {
    -webkit-transform: translate(0, -0.5px) rotate(2.5deg);
            transform: translate(0, -0.5px) rotate(2.5deg);
  }
  42% {
    -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
            transform: translate(0, 2.5px) rotate(-1.5deg);
  }
  44% {
    -webkit-transform: translate(0, 1.5px) rotate(0.5deg);
            transform: translate(0, 1.5px) rotate(0.5deg);
  }
  46% {
    -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
            transform: translate(0, -1.5px) rotate(2.5deg);
  }
  48% {
    -webkit-transform: translate(0, -0.5px) rotate(0.5deg);
            transform: translate(0, -0.5px) rotate(0.5deg);
  }
  50% {
    -webkit-transform: translate(0, 0.5px) rotate(0.5deg);
            transform: translate(0, 0.5px) rotate(0.5deg);
  }
  52% {
    -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
            transform: translate(0, 2.5px) rotate(2.5deg);
  }
  54% {
    -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
            transform: translate(0, -1.5px) rotate(1.5deg);
  }
  56% {
    -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
            transform: translate(0, 2.5px) rotate(2.5deg);
  }
  58% {
    -webkit-transform: translate(0, 0.5px) rotate(2.5deg);
            transform: translate(0, 0.5px) rotate(2.5deg);
  }
  60% {
    -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
            transform: translate(0, 2.5px) rotate(2.5deg);
  }
  62% {
    -webkit-transform: translate(0, -0.5px) rotate(2.5deg);
            transform: translate(0, -0.5px) rotate(2.5deg);
  }
  64% {
    -webkit-transform: translate(0, -0.5px) rotate(1.5deg);
            transform: translate(0, -0.5px) rotate(1.5deg);
  }
  66% {
    -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);
            transform: translate(0, 1.5px) rotate(-0.5deg);
  }
  68% {
    -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);
            transform: translate(0, -1.5px) rotate(-0.5deg);
  }
  70% {
    -webkit-transform: translate(0, 1.5px) rotate(0.5deg);
            transform: translate(0, 1.5px) rotate(0.5deg);
  }
  72% {
    -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
            transform: translate(0, 2.5px) rotate(1.5deg);
  }
  74% {
    -webkit-transform: translate(0, -0.5px) rotate(0.5deg);
            transform: translate(0, -0.5px) rotate(0.5deg);
  }
  76% {
    -webkit-transform: translate(0, -0.5px) rotate(2.5deg);
            transform: translate(0, -0.5px) rotate(2.5deg);
  }
  78% {
    -webkit-transform: translate(0, -0.5px) rotate(1.5deg);
            transform: translate(0, -0.5px) rotate(1.5deg);
  }
  80% {
    -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
            transform: translate(0, 1.5px) rotate(1.5deg);
  }
  82% {
    -webkit-transform: translate(0, -0.5px) rotate(0.5deg);
            transform: translate(0, -0.5px) rotate(0.5deg);
  }
  84% {
    -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
            transform: translate(0, 1.5px) rotate(2.5deg);
  }
  86% {
    -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
            transform: translate(0, -1.5px) rotate(-1.5deg);
  }
  88% {
    -webkit-transform: translate(0, -0.5px) rotate(2.5deg);
            transform: translate(0, -0.5px) rotate(2.5deg);
  }
  90% {
    -webkit-transform: translate(0, 2.5px) rotate(-0.5deg);
            transform: translate(0, 2.5px) rotate(-0.5deg);
  }
  92% {
    -webkit-transform: translate(0, 0.5px) rotate(-0.5deg);
            transform: translate(0, 0.5px) rotate(-0.5deg);
  }
  94% {
    -webkit-transform: translate(0, 2.5px) rotate(0.5deg);
            transform: translate(0, 2.5px) rotate(0.5deg);
  }
  96% {
    -webkit-transform: translate(0, -0.5px) rotate(1.5deg);
            transform: translate(0, -0.5px) rotate(1.5deg);
  }
  98% {
    -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);
            transform: translate(0, -1.5px) rotate(-0.5deg);
  }
  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
}
.dplayer-box {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}
.dplayer {
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
          user-select: none;
  line-height: 1;
  padding-top: 56.25%;
}
.dplayer * {
  box-sizing: content-box;
}
.dplayer svg {
  width: 100%;
  height: 100%;
}
.dplayer svg path,
.dplayer svg circle {
  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, 0);
          transform: translate(0, 0);
}
.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-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 {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.dplayer.dplayer-hide-controller {
  cursor: none;
}
.dplayer.dplayer-hide-controller .dplayer-controller-mask {
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.dplayer.dplayer-hide-controller .dplayer-controller {
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.dplayer.dplayer-show-controller .dplayer-controller-mask {
  opacity: 1;
}
.dplayer.dplayer-show-controller .dplayer-controller {
  opacity: 1;
}
.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-camera-icon {
  display: none;
}
.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, 0.5);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.dplayer-bezel .dplayer-bezel-icon.dplayer-bezel-transition {
  -webkit-animation: bezel-hide 0.5s linear;
          animation: bezel-hide 0.5s linear;
}
@-webkit-keyframes bezel-hide {
  from {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}
@keyframes bezel-hide {
  from {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}
.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 0.8s ease infinite;
          animation: diplayer-loading-dot-fade 0.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: 0.7s;
          animation-delay: 0.7s;
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-6 {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-5 {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-4 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-3 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-2 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-1 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
@-webkit-keyframes diplayer-loading-dot-fade {
  0% {
    opacity: 0.7;
    -webkit-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
  }
  50% {
    opacity: 0.25;
    -webkit-transform: scale(0.9, 0.9);
            transform: scale(0.9, 0.9);
  }
  to {
    opacity: 0.25;
    -webkit-transform: scale(0.85, 0.85);
            transform: scale(0.85, 0.85);
  }
}
@keyframes diplayer-loading-dot-fade {
  0% {
    opacity: 0.7;
    -webkit-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
  }
  50% {
    opacity: 0.25;
    -webkit-transform: scale(0.9, 0.9);
            transform: scale(0.9, 0.9);
  }
  to {
    opacity: 0.25;
    -webkit-transform: scale(0.85, 0.85);
            transform: scale(0.85, 0.85);
  }
}
.dplayer-controller-mask {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
  height: 98px;
  width: 100%;
  position: absolute;
  bottom: 0;
  transition: all 0.3s ease;
}
.dplayer-controller {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 41px;
  padding: 0 20px;
  -webkit-user-select: none;
          user-select: none;
  transition: all 0.3s ease;
}
.dplayer-controller .dplayer-bar-wrap {
  padding: 5px 0;
  cursor: pointer;
  position: absolute;
  bottom: 33px;
  width: calc(100% - 40px);
  height: 3px;
  -webkit-tap-highlight-color: transparent;
}
.dplayer-controller .dplayer-bar-wrap:hover .dplayer-bar .dplayer-played {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.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: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.4);
  height: 3px;
  transition: all 0.5s ease;
  will-change: width;
}
.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 0.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-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: #eee;
  text-shadow: 0 0 2px rgba(0, 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: 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;
  opacity: 0.8;
}
.dplayer-controller .dplayer-icons .dplayer-icon:hover .dplayer-icon-content {
  opacity: 1;
}
.dplayer-controller .dplayer-icons .dplayer-full {
  display: inline-block;
  height: 100%;
  position: relative;
}
.dplayer-controller .dplayer-icons .dplayer-label {
  color: #eee;
  font-size: 13px;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}
.dplayer-controller .dplayer-icons .dplayer-toggle {
  width: 32px;
  height: 20px;
  text-align: center;
  font-size: 0;
  vertical-align: middle;
  position: absolute;
  top: 5px;
  right: 10px;
}
.dplayer-controller .dplayer-icons .dplayer-toggle input {
  max-height: 0;
  max-width: 0;
  display: none;
}
.dplayer-controller .dplayer-icons .dplayer-toggle input + label {
  display: inline-block;
  position: relative;
  box-shadow: #dfdfdf 0 0 0 0 inset;
  border: 1px solid #dfdfdf;
  height: 20px;
  width: 32px;
  border-radius: 10px;
  box-sizing: border-box;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
.dplayer-controller .dplayer-icons .dplayer-toggle input + label:before {
  content: "";
  position: absolute;
  display: block;
  height: 18px;
  width: 18px;
  top: 0;
  left: 0;
  border-radius: 15px;
  transition: 0.2s ease-in-out;
}
.dplayer-controller .dplayer-icons .dplayer-toggle input + label:after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  border-radius: 15px;
  background: #fff;
  transition: 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  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-notice {
  opacity: 0;
  position: absolute;
  bottom: 60px;
  left: 20px;
  font-size: 14px;
  border-radius: 2px;
  background: rgba(28, 28, 28, 0.9);
  padding: 7px 20px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  color: #fff;
  pointer-events: 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-custom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  display: none;
  padding: 0 20px;
  -webkit-user-select: none;
          user-select: none;
  transition: all 0.3s ease;
  font-size: 30px;
  color: #fff;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  text-align: center;
  background: #1e1e1e;
}
.dplayer-show-custom .dplayer-custom {
  display: block;
}
.dplayer-custom .custom-box {
  position: absolute;
  width: 260px;
  left: 50%;
  margin-left: -130px;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
}
.dplayer-custom .video-btn {
  padding: 6px 0px;
  font-size: 12px;
  color: #fff;
  line-height: 16px;
  background-color: #E32416;
  border-radius: 50px;
  border: none;
  width: 68px;
}
.dplayer-custom .video-text {
  margin: 12px;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}
.dplayer-custom .video-replay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  display: -webkit-flex;
  display: flex;
  font-size: 30px;
  color: #fff;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  text-align: center;
}
.dplayer-custom .video-replayText {
  margin: 12px;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}
.dplayer-custom .video-replayText::before {
  content: ' ';
  display: inline-block;
  width: 19.5px;
  height: 19px;
  margin-right: 6px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAMAAABwIXKiAAAAb1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8v0wLRAAAAJHRSTlMABvnQ9DsR2GEtJQzuk1Thpp+BSBXDh3x4Zui8q2wcybhxQq8oL7c1AAABXElEQVQ4y42U55qDIBAAEST2WJJYUky5ef9nPGK8Oxue80fU+Vh2gRUznDBsj2KdXXP1JAb3Urysls4kAzzfWbKOOQapsqouykeM4byfa/v3n5Mf/bwHiQvk0US7AUqPF1tJE7wdfStAPmcxAs+Iw9x9ox3EHOcL1Cf03hcidHFNzCXxAlk3CrlrBcZeJFLwiZRiuAobgcTr6tiVrXSsYgJNt0DepHvrXrqcun3AIO9FaxMzCN9PpZJDJOy8oOpyF/8gTZpbUKhNXoZ0tngJRBu9TfPlILbwIN7kxVy2aAEU/Wh1mVV/srSHv6I5Z85OfyC8Fc+H+rc+N3uLSHF3n2EbI0Ob9wXlYGq1W9ZucP/L8moTn+AOQkUn8IK5VoI0F2IsynpSRq3APUzuaQ6k9SD4KwNivdywTH88BEGomyTFkB+XGmB1ZsRJ27aoecT0pGW4fjr827Nu9LRK3zaBIcssV5h+AAAAAElFTkSuQmCC');
  background-size: 100% 100%;
  vertical-align: -5px;
}
.video-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
}
.video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.video-mask {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  font-size: 30px;
  color: #fff;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  text-align: center;
  background: #1e1e1e;
}

.loading {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display: none;
}
.ios .loading {
  position: absolute;
  height: 100vh;
}
.state-loading .loading {
  opacity: 1;
}
.loading .loading-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  line-height: 4px;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
.loading i {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 2px;
  border-radius: 4px;
}
.loading i:first-child {
  background: #fa7474;
  -webkit-animation: loadingAnimation 0.9s linear 0.12s infinite;
          animation: loadingAnimation 0.9s linear 0.12s infinite;
}
.loading i:nth-child(2) {
  background: #f8c86a;
  -webkit-animation: loadingAnimation 0.9s linear 0.24s infinite;
          animation: loadingAnimation 0.9s linear 0.24s infinite;
}
.loading i:nth-child(3) {
  background: #7ac1fc;
  -webkit-animation: loadingAnimation 0.9s linear 0.36s infinite;
          animation: loadingAnimation 0.9s linear 0.36s infinite;
}
@keyframes loadingAnimation {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  15.90909% {
    -webkit-transform: translate3d(0, 3px, 0);
    transform: translate3d(0, 3px, 0);
  }
  47.72727% {
    -webkit-transform: translate3d(0, -3px, 0);
    transform: translate3d(0, -3px, 0);
  }
  63.63636% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@-webkit-keyframes loadingAnimation {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  15.90909% {
    -webkit-transform: translate3d(0, 3px, 0);
    transform: translate3d(0, 3px, 0);
  }
  47.72727% {
    -webkit-transform: translate3d(0, -3px, 0);
    transform: translate3d(0, -3px, 0);
  }
  63.63636% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

#edit-info {
  font-family: "PingFang SC";
  margin-top: 14px;
}
#edit-info .edit-info-action-wrapper {
  font-size: 12px;
  color: #ABB3BA;
  line-height: 18px;
  font-weight: 500;
}
#edit-info .edit-info-action-wrapper #edit-info-action {
  padding-right: 16px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABXElEQVRYR+2UMUvEQBCF39yhhaX4M2zsbNMkjQlYJFhdp4VoYeG/sBAURG0ExeIiNrkml95C8h9sLS1FcEdWXMmFzd1uLpBmt9xd9n3vzewQel7Usz4cgEvAJeASmEmgLMuVt/ePbTAPQeIr3gleuhhUz5N885sHG4OBEOtrq6+e532qd2cA0mzqA8j/RZnP4ig4XQZinE13wZwS0VC+w4xREvn3WgC5Oc6KIwJfdAGRTvI9FnhQ4mA+j6PgpGpI24RdQEhxMD0Cf+NeIy5BGn9BHYKByyT0j03KYSo+F0BXDhOINCtGAN8tct7YA3WHT1mxz+AbtT8PwlZ8YQJK1ASijbgxgLxYhwD4Ng6Dg8rZtYqdwVdJGBya9IvVKNZBMKEkJin+u2zErRJoKkfVpa14KwB9OeydG/+CpjpWy9HG+dIAKgkBsWXacDozVk1o0tW2dxyAS8Al0HsCP9NLwyEMqvEBAAAAAElFTkSuQmCC") no-repeat right center / 12px auto;
}
#edit-info .edit-info-action-wrapper #edit-info-action.expand {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABQklEQVRYR+2UvU7CUBTHz6lhhIeRR9DCAh342hx1koRBEgcMgwMDJA46werUOlHSpN53cOE5WEicjB5SzKXQ1tJ7asJy73hz7/n9zv9+IJx44In5oAV0AjqBXAk4rhgS/RQ6VnXAfc5sAXvu3yPiaAsmmrStap8jwRI4gEsqU0JZIBGeQ0JJIA6nh182Pu7iV0wis0AMTthvW+YkADtzcQdIY45EJoE0uIRyJY4KOAvRA6KnsLuw8+it50ikCkThBNjt1M2XtOdmu+IWgZ6zHsefAhy4hKpIJArkgatKxASicAS8adXNGeeXy5LEgYDjvlcAwJewPHBZ480V1wQ03dVEuGrVKq8hY681z/NKn9+F82DKIGPdtC4+OJ1H99gLv4xkFIP5sy9cNhqXq0SB/4Cp1jj6D6gWVF2vBXQCOgGdwAYP/Ksh1SH6QQAAAABJRU5ErkJggg==") no-repeat right center / 12px auto;
}
#edit-info #edit-info-detail {
  margin-top: 13px;
  display: none;
}
#edit-info #edit-info-detail.edit-detail-show {
  display: block;
}
#edit-info #edit-info-detail .edit-info-line {
  font-size: 12px;
  color: #ABB3BA;
  font-weight: 400;
  line-height: 160%;
}