.bottomArea{
  background-color: #1d1d1d;
  width: 100%;
  height: 45px;
  position: absolute;
  bottom: 0;
}
.controlArea{
  height: 100%;
  position: relative;
  margin: 0 auto;
  bottom: 0;
  /*background: url(../img/controls/cLogo.png) no-repeat 5px center;*/
}

.controlArea div{
  vertical-align: top;
}

/*
.playRateBtn{
  font-family: 'NotoSansCJKkr-Regular';
  font-size: 18px;
  color: #fff;
  position: relative;
  width: 75px;
  height: 100%;
  text-align: center;
  line-height: 46px;
  left: 165px;
  display: inline-block;
  cursor: pointer;
}
.playRateBtn:hover{
  background-color: #2b80f5;
}
.playRatePop{
  position: absolute;
  width: 75px;
  bottom: -55px;
  left: 165px;
  text-align: center;
  font-family: 'NotoSansCJKkr-Regular';
  font-size: 18px;
  color: #fff;
  background-color: #3c3c3c;
  opacity: 0;
  z-index: -1;
}
.playRatePop div{
  line-height: 33px;
  height: 30px;
  cursor: pointer;
}
.playRatePop div:hover{
    background-color: #2b80f5;
}
*/

.curTime{
  font-family: 'NotoSansCJKkr-Regular';
  font-size: 18px;
  color: #fff;
  position: relative;
  width: 65px;
  height: 100%;
  text-align: center;
  line-height: 48px;
  left: 0px;
  display: inline-block;
}

.progressBar-main{
  width: 450px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  position: relative;
  top: 19px;
  left: 5px;
  border-radius: 10px;
  display: inline-block;
}
.progressBar-Under{
  width: 0;
  height: 100%;
  background-color: #2b80f5;
  cursor: pointer;
  border-radius: 10px;
}
.progressBar-Pointer{
  background-color: rgb(255, 255, 255);
  background-size: 80%;
  width: 8px;
  height: 26px;
  float: right;
  margin-top: -10px;
  cursor: pointer;
  border-radius: 10px;
}

.totalTime{
  font-family: 'NotoSansCJKkr-Regular';
  font-size: 18px;
  color: #fff;
  position: relative;
  width: 65px;
  height: 100%;
  text-align: center;
  line-height: 48px;
  left: 5px;
  display: inline-block;
}

.pause{
  background: url(../img/controls/pause.png) no-repeat center;
  position: relative;
  width: 25px;
  height: 100%;
  left: 15px;
  display: inline-block;
  cursor: pointer;
}
.pause:hover{
  background: url(../img/controls/pauseOver.png) no-repeat center;
}
.pause .pauseBubble{
  position: absolute;
  width: 109px;
  height: 38px;
  left: -41px;
}

.play{
  background: url(../img/controls/play.png) no-repeat center;
  position: relative;
  width: 25px;
  height: 100%;
  left: 15px;
  display: inline-block;
  cursor: pointer;
}
.play:hover{
  background: url(../img/controls/playOver.png) no-repeat center;
}
.play .pauseBubble{
  position: absolute;
  width: 109px;
  height: 38px;
  left: -41px;
}

.replay{
  background: url(../img/controls/rePlay.png) no-repeat center;
  position: relative;
  width: 35px;
  height: 100%;
  left: 30px;
  display: inline-block;
  cursor: pointer;
}
.replay:hover{
  background: url(../img/controls/rePlayOver.png) no-repeat center;
}
.replay .rePlayBubble{
  position: absolute;
  width: 109px;
  height: 38px;
  left: -37px;
}

.script{
  background: url(../img/controls/script.png) no-repeat center;
  position: relative;
  width: 35px;
  height: 100%;
  left: 75px;
  display: inline-block;
  cursor: pointer;
}
.script:hover{
  background: url(../img/controls/scriptOver.png) no-repeat center;
}
.script .scriptBubble{
  position: absolute;
  width: 109px;
  height: 38px;
  left: -38px;
}

.volumeOnBtn{
  background: url(../img/controls/volumeOn.png) no-repeat left center;
  position: relative;
  width: 35px;
  height: 100%;
  left: 95px;
  display: inline-block;
  cursor: pointer;
}
.volumeOnBtn:hover{
  background: url(../img/controls/volumeOffOver.png) no-repeat left center;
}
.volumeOnBtn .volumeBubble{
  position: absolute;
  width: 109px;
  height: 38px;
  left: -38px;
}

.volumeOffBtn{
  background: url(../img/controls/volumeOff.png) no-repeat left center;
  position: relative;
  width: 35px;
  height: 100%;
  left: 95px;
  display: inline-block;
  cursor: pointer;
}
.volumeOffBtn:hover{
  background: url(../img/controls/volumeOnOver.png) no-repeat left center;
}
.volumeOffBtn .volumeBubble{
  position: absolute;
  width: 109px;
  height: 38px;
  left: -38px;
}

.volumeBar-main{
  width: 50px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  position: relative;
  top: 19px;
  left: 95px;
  border-radius: 10px;
  display: inline-block;
}
.volumeBar-Under{
  width: 0;
  height: 100%;
  background-color: #2b80f5;
  cursor: pointer;
  border-radius: 10px;
}

.help{
  background: url(../img/controls/help.png) no-repeat left center;
  position: relative;
  width: 35px;
  height: 100%;
  left: 115px;
  display: inline-block;
  cursor: pointer;
}
.help:hover{
  background: url(../img/controls/helpOver.png) no-repeat left center;
}
.help .helpBubble{
  position: absolute;
  width: 109px;
  height: 38px;
  left: -38px;
}

.prevBtn{
  background: url(../img/controls/prev.png) no-repeat center;
  position: relative;
  width: 24px;
  height: 100%;
  left: 150px;
  display: inline-block;
  cursor: pointer;
}
.prevBtn:hover{
  background: url(../img/controls/prevOver.png) no-repeat center;
}
.prevBtn .prevBtnBubble{
  position: absolute;
  width: 109px;
  height: 38px;
  left: -38px;
}

.normal{
  font-family: 'NotoSansCJKkr-Regular';
  font-size: 20px;
  color: #fff;
  position: relative;
  width: auto;
  height: 100%;
  text-align: center;
  line-height: 48px;
  margin-top: -2px;
  left: 160px;
  display: inline-block;
}

.pageNumSlash{
  background: url(../img/controls/pageNumSlash.png) no-repeat center;
  position: relative;
  width: 10px;
  height: 100%;
  left: 160px;
  display: inline-block;
}

.nextBtn{
  background: url(../img/controls/next.png) no-repeat center;
  position: relative;
  width: 24px;
  height: 100%;
  left: 170px;
  display: inline-block;
  cursor: pointer;
}
.nextBtn:hover{
  background: url(../img/controls/nextOver.png) no-repeat center;
}
.nextBtn .nextBtnBubble{
  position: absolute;
  width: 109px;
  height: 38px;
  left: -38px;
}
.endBubble{
  background: url(../img/controls/bubble_next.png) no-repeat center;
  width: 100px;
  height: 81px;
  position: absolute;
  bottom: -149px;
  right: 15px;
  opacity: 0;
  z-index: -1;
}