.bottomArea{
  background: url(../img/controls/bottomBg.png) no-repeat center;
  width: 100%;
  height: 36px;
  position: absolute;
  bottom: 0;
}
.bottomArea div{
  display: inline-block;
}
.indexMenu{
  background: url(../img/controls/menu.png) no-repeat center;
  cursor: pointer;
  width: 57px;
  height: 100%;
  margin-left: 25px;
  margin-right: 25px;
}
.indexMenu:hover{
  background: url(../img/controls/menuOver.png) no-repeat center;
}
.progressBar-main{
  width: 260px;
  height: 7px;
  background-color: #5d5d5d;
  vertical-align: top;
  top: 14px;
  cursor: pointer;
  border-radius: 15px;
  position: absolute;
  overflow: hidden;
}
.progressBar-Under{
  height: 7px;
  background-color: #46ffff;
  cursor: pointer;
  position: absolute;
  top: 0;
}
.time{
  color: #cccccc;
  font-size: 13px;
  position: absolute;
  top: 11px;
  left: 380px;
}
.pause{
  background: url(../img/controls/pause.png) no-repeat center;
  width: 20px;
  height: 100%;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 500px;
}
.pause:hover{background: url(../img/controls/pauseOver.png) no-repeat center;}

.play{
  background: url(../img/controls/play.png) no-repeat center;
  width: 20px;
  height: 100%;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 500px;
}
.play:hover{background: url(../img/controls/playOver.png) no-repeat center;}

.replay{
  background: url(../img/controls/rePlay.png) no-repeat center;
  width: 20px;
  height: 100%;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 440px;
}
.replay:hover{background: url(../img/controls/rePlayOver.png) no-repeat center;}

.script{
  background: url(../img/controls/script.png) no-repeat center;
  width: 20px;
  height: 100%;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 381px;
}
.fs{
  background: url(../img/controls/fs.png) no-repeat center;
  width: 20px;
  height: 100%;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 321px;
}
.fs:hover{
  background: url(../img/controls/fsOver.png) no-repeat center;
}
.volumeOnBtn{
  background: url(../img/controls/volumeOn.png) no-repeat left center;
  width: 22px;
  height: 100%;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 260px;
}
.volumeOnBtn:hover{background: url(../img/controls/volumeOnOver.png) no-repeat left center;}

.volumeOffBtn{
  background: url(../img/controls/volumeOff.png) no-repeat left center;
  width: 22px;
  height: 100%;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 260px;
}
.volumeOffBtn:hover{background: url(../img/controls/volumeOffOver.png) no-repeat left center;}

.volumeBar-main{
  width: 7%;
  height: 7px;
  background-color: #5d5d5d;
  vertical-align: top;
  top: 14px;
  right: 177px;
  cursor: pointer;
  border-radius: 15px;
  position: absolute;
  overflow: hidden;
}
.volumeBar-Under{
  height: 7px;
  background-color: #46ffff;
  cursor: pointer;
  position: absolute;
  top: 0;
  border-radius: 15px;
}
.volumeBar-point{
  width: 6px;
  height: 10px;
  vertical-align: top;
  margin-top: -2px;
  cursor: pointer;
  float: right;
}
.prevBtn{
  background: url(../img/controls/prev.png) no-repeat center;
  width: 21px;
  height: 100%;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 130px;
}
.prevBtn:hover{
  background: url(../img/controls/prevOver.png) no-repeat center;
}
.nextBtn{
  background: url(../img/controls/next.png) no-repeat center;
  width: 21px;
  height: 100%;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 10px;
}
.nextBtn:hover{
  background: url(../img/controls/nextOver.png) no-repeat center;
}

.thisPageNum, .totalPageNum{
  vertical-align: top;
  color: #c6c6c6;
  font-size: 20px;
  position: absolute;
  bottom: 5px;

}
.thisPageNum{
  right: 90px;
}
.totalPageNum{
  right: 50px;
}
.endBubble{
  background: url(../img/controls/bubble_next.png) no-repeat left top;
  width: 88px;
  height: 47px;
  position: absolute;
  bottom: 33px;
  right: 20px;
  opacity: 0;
  z-index: -1;
}