body {
  margin: 0
}
video::-webkit-media-controls-panel {
  -webkit-appearance: none;
  display: none !important
}
video::-webkit-media-controls-play-button {
  -webkit-appearance: none;
  display: none !important
}
video::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important
}
video::-webkit-media-controls, video::-webkit-media-controls-container, video::-webkit-media-controls-enclosure {
  opacity: 0;
  -webkit-appearance: none;
  display: none !important
}
.zy_media {
  background: #000;
  position: relative
}
.zy_media video, .zy_media audio {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block
}
.zy_fullscreen {
  overflow: hidden
}
.zy_fullscreen .zy_media {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000
}
.zy_fullscreen .zy_wrap, .zy_fullscreen video {
  width: 100%;
  height: 100%
}
.zy_wrap {
  width: 100%
}
.zy_title {
  height: 34px;
  padding-left: 10px;
  color: #fff;
  font-size: 12px;
  line-height: 34px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background: rgba(0, 0, 0, .25);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  -webkit-transition: top .5s;
  transition: top .5s
}
.zy_media .dec_play, .zy_media .dec_loading, .zy_media .dec_error {
  margin: -21px 0 0 -21px;
  position: absolute;
  top: 50%;
  left: 50%
}
.zy_media .dec_play::before {
  width: 40px;
  height: 40px;
  content: '';
  border-radius: 60px;
  border: #e5e5e4 1px solid;
  display: block
}
.zy_media .dec_play::after {
  width: 0;
  height: 0;
  content: '';
  border-color: transparent transparent transparent #e5e5e4;
  border-width: 10px 15px;
  border-style: solid;
  position: absolute;
  top: 11px;
  left: 16px;
  z-index: 2;
  display: block
}
.zy_media .dec_loading {
  width: 42px;
  height: 42px;
  -webkit-animation: ani_loading .6s infinite linear;
  -webkit-animation-fill-mode: forwards;
  animation: ani_loading .6s infinite linear;
  animation-fill-mode: forwards
}
@-webkit-keyframes ani_loading {
  100% {
    -webkit-transform: rotate(360deg)
  }
}
@keyframes ani_loading {
  100% {
    transform: rotate(360deg)
  }
}
.zy_media .dec_loading::before {
  width: 4px;
  height: 4px;
  content: '';
  border-radius: 4px;
  background: #fff;
  opacity: .8;
  position: absolute;
  top: 25px
}
.zy_media .dec_loading::after {
  width: 34px;
  height: 34px;
  content: '';
  border-radius: 50px;
  border: 4px solid #fff;
  opacity: .2;
  display: block
}
.zy_media .dec_error {
  width: 120px;
  height: 62px;
  margin-top: -53px;
  margin-left: -60px;
  white-space: nowrap;
  color: #fff;
  font-size: 12px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%
}
.zy_controls {
  height: 44px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  -webkit-transition: bottom .5s;
  transition: bottom .5s;
  display: -webkit-box;
  display: box;
  display: -webkit-flex;
  display: flex
}
.zy_playpause_btn_play, .zy_playpause_btn_pause {
  width: 44px;
  height: 44px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 7px 8px;
  position: relative
}
.zy_playpause_btn_play {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAaCAYAAACtv5zzAAABJklEQVRIDWNgAIL///8HA/E5IP4AxDuBOAqIGUFyFAOgQSDDsYFTQEFbalhwHpvpSGJrgWwVsi0Cav6NZBgu5i+gRB8QC5JsES4TcYi/BYoXADEr0RbhMIiQ8G2ggkCiLCFkEgH5Q0B5U7wWETCAGOl/QEVLgFgOq0XEmECkmu9Ada1AzItiEZGaSVH2Eqg4HYiZQRYxgnSi2Eg9zn6gUUG0tADk1Km0tuAFE/VCBKtJTLS2YDUtg2gr0E/BtPDBK6DBmUDsz8jI+BNU2VALgDJaGxBTPaOBioqlQEyTooJmhR2ouA7CmjDRBYEKSQHvgIoLgZikCucnETaAqsx+ICaryjxIwAKKK31QswWUEtABdZotoDgBmhwCxBeA+BMQHwZiqjW8AG00IoLJ8efoAAAAAElFTkSuQmCC)
}
.zy_playpause_btn_pause {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYAgMAAACD0OXYAAAADFBMVEUAAAD///////////84wDuoAAAAA3RSTlMASePizoNQAAAAJElEQVQI12PIc2BgkJ7AsL+BgUH/AcP/AwwM9h8GBwV1EsSBALN6Qeeo4L6aAAAAAElFTkSuQmCC)
}
.zy_timeline {
  margin-left: 14px;
  margin-right: 14px;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto
}
.zy_timeline_slider {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, .5);
  position: relative;
  top: 21px;
  left: 0
}
.zy_timeline_buffering {
  width: 100%;
  height: 15px;
  top: -7px;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  -webkit-background-size: 15px 15px;
  background-size: 15px 15px;
  -webkit-animation: ani_buffering 2s linear infinite;
  animation: ani_buffering 2s linear infinite;
  position: absolute
}
@-webkit-keyframes ani_buffering {
  from {
    background-position: 0 0
  }
  to {
    background-position: 30px 0
  }
}
@keyframes ani_buffering {
  from {
    background-position: 0 0
  }
  to {
    background-position: 30px 0
  }
}
.zy_timeline_loaded {
  width: 0;
  height: 2px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1
}
.zy_timeline_current {
  width: 0;
  height: 2px;
  background: #ff6159;
  position: relative;
  z-index: 2
}
.zy_timeline_handle {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #e5e5e5;
  position: absolute;
  top: -3px;
  left: -4px;
  z-index: 3
}
.zy_time, .zy_currenttime {
  width: auto;
  height: 44px;
  line-height: 44px;
  font-size: 10px;
  color: #e5e5e5;
  text-align: center
}
.zy_time:last-child {
  padding-right: 14px
}
.zy_fullscreen_btn {
  width: 38px;
  height: 44px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaBAMAAABbZFH9AAAAFVBMVEUAAAD///////////////////////9Iz20EAAAABnRSTlMAhcTz+f7GdglEAAAASklEQVQY02NQTUtLc2RgYBAB0kEMYUAyGcgzA9KpDGlIcmkMaQkMMMBGPs/NAc5jSWEQFoDzGA0ZaAFQbUC1nTo+Qg0l1BBECV0AMZkjVRJO9QcAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px
}
.zy_unfullscreen {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAbCAMAAABY1h8eAAAAgVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9d3yJTAAAAKnRSTlMAAQMECw8XHCAhIzdugYWRmpydn6SmxMnX3+Pn6Ovs8PLz9Pb4+fv8/f6584ZkAAAAl0lEQVQoz6XSzQ6CMBAE4K3/FaxSBBUVRK3IvP8DepAmJu1wca5fJpvsrohOhEZ3yBTDBIClmnk1rQlQ2UEdnFAFIFTjOCjBrzL0GhHjANpsvfUjzb6UP7J7v5r6Up2Omwg+/HwsQrx6O0xCrACgWK50xOQM8APXwJ5qA8wt0zswU0xv6KbC1Dy3v6/DT5jKiOZ0ySrN1x8orxmvk2ibBAAAAABJRU5ErkJggg==)
}
.zy_playback_rate {
  width: 60px;
  margin-right: 6px;
  text-align: center;
  position: relative
}
.zy_playback_rate .zy_playback_rate_val {
  height: 44px;
  line-height: 44px;
  color: #e5e5e5;
  font-size: 10px
}
.zy_playback_rate .zy_playback_rate_option {
  width: 60px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #fff;
  border-radius: 2px;
  background: rgba(0, 0, 0, .6);
  position: absolute;
  left: 0;
  bottom: 44px;
  list-style: none;
  display: none
}
.zy_playback_rate .zy_playback_rate_option li {
  line-height: 30px
}
.zy_playback_rate .zy_playback_rate_option li.active {
  color: #1589ff
}