.voice {
  position: fixed;
  z-index: 9999999;
  left: 0;
  bottom: 0;
  background: url("../images/voice/voice-bg.png") repeat-x 0 0;
  height: 56px;
  width: 100%;
}

.voice .controller {
  position: relative;
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}

.voice .controller .left {
  position: relative;
  float: left;
  width: 135px;
  margin-left: -100%;
  height: 100%;
}

.voice .controller .left .prev {
  position: absolute;
  cursor: pointer;
  left: 15px;
  top: 50%;
  background: url("../images/voice/prev.png") no-repeat 0 0;
  width: 29px;
  margin-left: -14px;
  height: 29px;
  margin-top: -14px;
}

.voice .controller .left .next {
  position: absolute;
  cursor: pointer;
  left: 100px;
  top: 50%;
  background: url("../images/voice/next.png") no-repeat 0 0;
  width: 29px;
  margin-left: -14px;
  height: 29px;
  margin-top: -14px;
}

.voice .controller .left .play {
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 58px;
  background: url("../images/voice/play.png") no-repeat 0 0;
  width: 34px;
  margin-left: -17px;
  height: 34px;
  margin-top: -17px;
}

.voice .controller .left .play.pause {
  background: url("../images/voice/pause.png") no-repeat 0 0;
}

.voice .controller .right {
  position: relative;
  float: left;
  width: 140px;
  height: 100%;
  margin-left: -140px;
}

.voice .controller .right:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 33px;
  margin-top: -16px;
  width: 1px;
  background: #747373;
}

.voice .controller .right .share {
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 21px;
  background: url("../images/voice/share.png") no-repeat 0 0;
  width: 18px;
  margin-left: -9px;
  height: 18px;
  margin-top: -9px;
}
.voice .controller .right .share .towCode {
  top: -204px;
  bottom: auto;
}

.voice .controller .right .volume {
  position: absolute;
  left: 35px;
  height: 100%;
}

.voice .controller .right .volume .mute {
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 0;
  background: url("../images/voice/volume.png") no-repeat 0 0;
  width: 25px;
  height: 22px;
  margin-top: -11px;
}

.voice .controller .right .volume .mute.muted {
  background: url("../images/voice/muted.png") no-repeat 0 0;
}

.voice .controller .right .volume .progress {
  position: absolute;
  background: #000000;
  top: 50%;
  left: 26px;
  width: 71px;
  height: 2px;
  margin-top: -1px;
}

.voice .controller .right .volume .progress .progress_inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: #b90008;
}

.voice .controller .right .volume .progress .progress_inner .progress_handle {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0;
  background: url("../images/voice/handle.png") no-repeat 0 0;
  height: 10px;
  width: 10px;
  margin-right: -5px;
  margin-top: -5px;
}

.voice .controller .middle {
  float: left;
  width: 100%;
  height: 100%;
}

.voice .controller .middle .center {
  position: relative;
  margin-left: 135px;
  margin-right: 140px;
  height: 100%;
}

.voice .controller .middle .center .progress-bar {
  position: absolute;
  z-index: 99;
  top: 29px;
  width: 90%;
  height: 2px;
  background: #000000;
}

.voice .controller .middle .center .progress-bar .progress-bar_inner {
  position: absolute;
  left: 0;
  width: 0%;
  height: 2px;
  background: #b90008;
}

.voice .controller .middle .center .progress-bar .progress-bar_inner .progress-bar_handle {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 50%;
  background: url("../images/voice/handle.png") no-repeat 0 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-right: -5px;
}

.voice .controller .middle .center .time {
  position: absolute;
  left: 91%;
  top: 23px;
  font-size: 12px;
  line-height: 1;
  color: #ffffff;
}

.voice .controller .middle .center .currenttitle {
  position: absolute;
  top: 15px;
  font-size: 12px;
  line-height: 1;
  margin-top: -6px;
  color: #ffffff;
}