/*** play */

body {
  text-align: center;
  background-color: #000000;
}
.ap-unibody {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 80px;
  background-color: #000000;
  overflow: hidden;
  z-index: 100;
}
.ap-unibody li {
  position: relative;
  padding: 0px !important;
  border: none !important;
}
.ap-unibody .play-btn {
  position: relative;
  color: #7a7a7a;
  font-size: 30px;
  width: 109px;
  line-height: 109px;
  cursor: pointer;
  left: -109px;
  -webkit-transition: left .4s ease-out .2s;
  -khtml-transition: left .4s ease-out .2s;
  -moz-transition: left .4s ease-out .2s;
  -o-transition: left .4s ease-out .2s;
  transition: left .4s ease-out .2s;
}
.ap-unibody .volume-btn {
    display: none;
}
.ap-unibody .play-btn>div {
  padding: 1.5rem;
}
.ap__play,
.ap__pause,
.play-btn svg,
.play-btn svg path {
  cursor: pointer;
}
.-playing .ap__play {
  display: none;
}
.-playing .ap__pause {
  display: block;
}
.-pausing .ap__play {
  display: block;
}
.-pausing .ap__pause {
  display: none;
}
.ap-unibody .container {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 0px;
  -webkit-transition: height .2s ease-out;
  -khtml-transition: height .2s ease-out;
  -moz-transition: height .2s ease-out;
  -o-transition: height .2s ease-out;
  transition: height .2s ease-out;
}
.ap-unibody:hover .container {
  height: 1.1px !important;
}
.ap-unibody .progress-bar-container {
  background-color: #000000;
}
.ap-unibody .progress-bar-container,
.ap-unibody .volume-bar-container {
  height: 100%;
  margin: 0px;
  padding: 0px;
  color: #F8CA4D;
}
.ap-unibody .volume-bar-container {
  display: none;
}
.ap-unibody .load-bar {
  background-color: #7a7a7a;
}
.ap-unibody .seek-bar {
  background-color: transparent;
}
.ap-unibody .volume-bar,
.ap-unibody .play-bar {
  background-color: #B23159;
}
.ap-unibody .volume-bar,
.ap-unibody .play-bar,
.ap-unibody .load-bar {}
.ap-unibody .time-current {
  font-size: 10px;
  font-weight: 300;
  line-height: 29px;
  -webkit-font-smoothing: subpixel-antialiased;
  padding: 0 0px;
  color: #7a7a7a;
}
.ap-unibody .time-current {
  position: relative;
  padding-left: 46px;
  font-size: 24px;
  font-weight: 100;
  line-height: 75px;
  top: -109px;
  -webkit-transition: top .6s ease-out;
  -khtml-transition: top .6s ease-out;
  -moz-transition: top .6s ease-out;
  -o-transition: top .6s ease-out;
  transition: top .6s ease-out;
}
.ap-unibody .sep {
  width: 0;
  height: 100%;
  border-left: solid 1px #000;
  border-right: solid 1px #666;
  -m2-opacity: 0;
  opacity: 0;
  -webkit-transition: opacity .5s ease-out;
  -khtml-transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
  transition: opacity .5s ease-out;
}
.ap-unibody.live .sep {
  opacity: 0.2;
}
.ap-unibody.live .play-btn {
  left: 0;
}
.ap-unibody.live .container {
  height: 1.1px;
}
.ap-unibody.live .time-current {
  top: 0;
}
.icn {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: #7a7a7a;
  fill: #7a7a7a;
}