.audio-box {
  width: 300px;
  border: 1px solid #ddd;
  background-color: rgba(0, 0, 0, 0.01);
  padding: 5px;
  margin: 0 auto;
}

.audio-box .study-btns-area:before {
  display: table;
  content: " ";
}

.audio-box .study-btns-area:after {
  display: table;
  content: " ";
  clear: both;
}



.audio-box h5 {
  padding: 10px 0 10px 0;
  font-size: 14px;
}

.audio-box .sound-desc {
  padding: 0 37px 18px 37px;
  color: #9a9898;
}

.audio-box .study-progress {
  padding: 18px 37px;
  display: -webkit-box;
  position: relative;
}

.audio-box .study-progress span.i {
  display: block;
  position: relative;
  width: 18px;
  height: 18px;
  background-color: #c3c3c3;
  border-radius: 50%;
  box-shadow: 0 0 3px #888888;
  z-index: 81;
}

.audio-box .study-progress span.i .progress-text {
  position: absolute;
  top: 28px;
  left: -37px;
  width: 93px;
  font-size: 12px;
  text-align: center;
}

.audio-box .study-progress span.leftI {
  background: #ff7c6d
}

.audio-box .study-progress span.line {
  position: relative;
  display: block;
  background-color: #c3c3c3;
  height: 3px;
  -webkit-box-flex: 1;
  margin-top: 0.75px;
  margin-left: -1px;
  margin-right: -1px;
  z-index: 80
}

.audio-box .study-progress span.line .curProgress {
  display: block;
  background: #ff7c6d;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 3px #888888;
  z-index: 82
}

.audio-box .study-progress .study-progress-bar-area {
  position: absolute;
  left: 37px;
  right: 0.75rem;
  top: 0;
  bottom: 0;
}

.audio-box .study-progress .study-progress-bar-area i.bar {
  display: block;
  background: #ff7c6d;
  height: 37px;
  width: 18px;
  border-radius: 3px;
  position: absolute;
  left: 0;
  top: 10px;
  box-shadow: 0 0 3px #888888;
  z-index: 84;
}


/*音频缓存进度条*/

.audio-box .study-progress span.line .bufferedProgress {
  display: block;
  background: #666666;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 79
}

.audio-box .study-btns-area {}

.audio-box .study-btns-area button {
  display: block
}

.audio-box .study-btns-area button img {
  width: 100%;
}

.audio-box .study-btns-area .col {
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  height: 70px;
}

.audio-box .study-btns-area .col-1 {
  width: 23%;
  float: left;
  text-align: center;
}

.audio-box .study-btns-area .col-2 {
  width: 12%;
  float: left;
  text-align: center;
}

.audio-box .study-btns-area .col-3 {
  width: 30%;
  float: left;
  text-align: center;
}

.audio-box .study-btns-area .col-4 {
  width: 12%;
  float: left;
  text-align: center;
}

.audio-box .study-btns-area .col-5 {
  width: 23%;
  float: left;
  text-align: center;
}

.audio-box .study-btns-area .btn-playlist {
  display: block;
  margin: 0 auto;
}

.audio-box .study-btns-area .btn-playlist img {
  width: 48px;
  height: 45px;
}

.audio-box .study-btns-area .btn-prev {
  height: 131px;
  line-height: 131px;
  font-size: 20px;
  color: #fcd2c3;
  display: block;
}

.audio-box .study-btns-area .btn-play {
  width: 131px;
  height: 131px;
  border-radius: 262px;
  background: #c3c3c3;
  vertical-align: middle;
  margin: 0 auto;
  font-size: 150px;
  box-shadow: 0 0 .5rem #888888;
  color: #fff;
  line-height: 525px;
  display: block;
  text-align: center
}

.audio-box .study-btns-area .btn-play.activate {
  background: #f7725f !important;
}

.player-opt-btn {
  width: 20px;
  height: 20px;
  display: block;
  margin: 0 auto;
}

.player-opt-btn img {
  width: 100%;
  height: 100%;
}

.player-opt-btn-play {
  display: block;
  margin: 0 auto;
  width: 25px;
  height: 25px;
  background-color: #4f8db8;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAtCAYAAADYxvnjAAAABGdBTUEAALGPC/xhBQAABExJREFUWAntWNFLU1EcTle6tcqsqBZWVFBE/0AMAw2hNwUVQSEfIs03IUx6iOh5LKiXajoIEpQe1UxHEoSmqLSXMiYIA1FjoS6Ttam59X1jR+7u7tqd7t7twR98O+eenXvud797fuf3Oydvn7LloVkK9orEIK/zWnMjGbmxLR8wAPtjJdvCMfxFuRWrk7wuRjJSEyQPoNEEHAKOxEpesz/7ELoalZMaCZCMESiampq6FwwG+8Ph8MelpaVOh8NxE+3HgcOxPnwhjiEfB03aGkkeBM6A5JNIJLIox8zMzJuKiorr6HMOIGn2F4R1U5pzkp/6YiAQ+ConKa5DoZCnt7f3PvpdBixAEcCvwPupruaEqUwxcEWQ+l+5uLg41NLScgv9LwAnADNQAIi5jGpmTP7mJMr5dxoEh9U8Ymtra2NiYuJtdXV1l8/n+4V7AkAIEKuDdFlTM6RiHyUnIHn5CyjezEaDwVBgtVpvY+467Xb7DTRp4mxyQlSUc5SKfkCZrkU8Ho+rqanJMTo6+gM3U90gsAlw7d2xupkmCi747qGQf2BgwFFbWzuEyzXgD7AOcDqIwIGqelP69OrvTtLTaDQW19TUPJyfn38Kda+hGx2UwaMQkEY7XKozTRSVPhrBIjQ2NtZdVVXVs7KyIpyN6nI6UF1V00ETRaVE8/PzjaWlpXdmZ2c7bDabFf8JZ2NIFoEiJQ/NFZWSRj08PT39vrGx0eF2u3/iWixlKZ1Nb6JR3oh6K319fS8aGhq4sghn20A9qbOllDw6coZ/zGbzsfr6+kdzc3M2qHsVw9PZRFQjpwReWVFU+t6IbMGRkZGuysrK7rW1NT/+43SgumLdjXZPYB5t1fEHkc1UVlbW7PV6XyIMn8Wj6WRcwuJEjLvAn7uNTBhi57awsPCppKTkAUagsswXqGrUsq6oIMLSYrFYC2GoJmRfOUVUSlpezymiyG8/r8NAMs6RSDpniCK8fm9tbbWDE7OtBKL0rqyawvJEolz447biWVUU2dUEFvy75eXlr7GGLoOcWENFsrItYlYU3UkI1Zsok5JBqPgq3aREN6J+v9/rdDqftbe3u/E9mYhwLopEhPORnzupaU6UifP4+HgPY3nOJs4IiV+w729G4twJkj7IxQyf+yeRdCQ4TTJJNVGUm7v+/v6Ourq6QTxY5Ju72txlmqhm2+WMEV1dXZ2Dszxva2ubgoq/gbScJdknF+1KRFXtCsUAeh3piOeJkvloOodkg3odkskVpZpMCDZxgPvTZDKdFG8gLZHgrLpcrk7s1d+hXclZ0voq0rHV1rcPcicnJx8rHTnmykEukxSebx4FzvPUGcp+w6I9v7y8PIyj8Qa0XwJOATyeFNm45smNfM/Eaz6Uc5UnyNxosWQbpwT3MQQX7JSHBuiTMZMT5cCCLKcB57DYvzCKEOKAVnVUwT27NiWiHJTtUrBN6iDSOv/bsz0FtFLgHySObBtFLigUAAAAAElFTkSuQmCC);
  background-origin: content-box;
  background-size: 50% 50%;
  background-position: 7px center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.player-opt-btn-pause {
  display: block;
  margin: 0 auto;
  width: 25px;
  height: 25px;
  background-color: #4f8db8;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAtCAYAAADYxvnjAAAABGdBTUEAALGPC/xhBQAAAglJREFUWAntmU1Ow0AMhUmBlqqbVqgHoBJbzsBduAwH6h6W9BJlg9RFBbu2lJ8Ef8lMNQxOsqgXERpLjie25/nFM+rCzU7qJXMhrNdC1l4Js24TExwPEhfD3xM9FT1zFh/EvkW/nM2dT4wqVjhlp+IKgEPwXPQiUIhD7D3QT1lDXOusFY7A/xUPPpTQ5XQ6vV4sFvfr9fppu92+YHnHT1yUPD6KfaFY4YSYv9YU6ItOILNarR52u92rkHzzyjt+R3bi8jWiFjgHchxnKBTkTg7n8/ndeDy+yfO8Fyt+4uS5fI2oBY7AV6IR5SgHs9nstiiKDCU1tKyJi3sgSr5G1AJHoCupI9ofjUZXITnSw3fi4uJ4m4gei0PZUjSidKeXZRlHVysuzn7ytY5a4Bzqx0QJaIUPG6JFU25TLIJpr6kRjUE68Z6IWh9D6mjqqHUHrPHSHU0dte6ANV66o6mj1h2wxkt3NHXUugPWeOmOpo5ad8AaT7uj4aC2rV5TblMsxm3NjYn6DbmMbxjW1oqL+0Eu+0KxwjlgakQZzH5sNptnGduUBDRLnDxRbZDLPgscgamkjuh+uVw+QlAjiY+4QOxFm4gei1OxVJ7MiywGsFY4CsXKRQHGiJ0bjUMsFk+2U382aEQhjp/7S3c7+/eNcCvFfwTWq//ZKX8NxO9ttUN/WuHo6Mn73zvwA/xOxEKlpWGSAAAAAElFTkSuQmCC);
  background-origin: content-box;
  background-size: 50% 50%;
  background-position: 6.5px center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.audio-box .study-btns-area .btn-prev.activate,
.audio-box .study-btns-area .btn-next.activate {
  color: #f96645 !important;
}

.player-opt-icon-text {
  margin-top: 10px;
  font-size: 12px;
}

.audio-box .study-btns-area .btn-next {
  height: 131px;
  line-height: 131px;
  font-size: 20px;
  color: #fcd2c3;
  display: block;
}

.audio-box .study-btns-area .btn-clock {
  display: none;
  margin: 0 auto;
}

.audio-box .study-btns-area .btn-clock img {
  width: 48px;
  height: 45px;
}

.audio-box .study-info {
  padding: 0 75px 150px 75px;
  text-align: center;
}

span.s-box {
  padding-left: 112px;
  height: 2.150px;
  line-height: 2.150px;
  display: inline-block;
  color: #a4a4a4;
  font-size: 1.150px;
}

span.s-icon-zj {
  background: url(/resource/H5/learningEdition/images/icon005.jpg) 0 .5rem no-repeat;
  background-size: 1.75px 1.75px;
}

span.s-icon-sj {
  background: url(/resource/H5/learningEdition/images/icon006.jpg) 0 .5rem no-repeat;
  background-size: 1.75px 1.75px;
}

span.s-icon-rs {
  background: url(/resource/H5/learningEdition/images/icon014.jpg) 0 .5rem no-repeat;
  background-size: 1.75px 1.75px;
}

span.s-icon-clock {
  background: url(/resource/H5/learningEdition/images/icon015.jpg) 0 .5rem no-repeat;
  background-size: 1.75px 1.75px;
}

span.s-icon-view {
  background: url(/resource/H5/learningEdition/images/icon016.jpg) 0 .5rem no-repeat;
  background-size: 1.75px 1.75px;
}

/***************************************************** */
.audio-container {
  z-index: 3000;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background-color: rgba(14, 60, 130, .9);
  background-image: -webkit-linear-gradient(90deg, #0E3C82, #1d4581);
  transition: all .2s ease 0s;
  
}
.audio-container.hide {
  display: none;
}

.audio-container.expand {
  bottom: -70px;
}

.audio-main {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  padding-top: 10px;
}

.audio-main .audio-expand {
  position: absolute;
  left: 0;
  top: -24px;
  width: 38px;
  height: 24px;
  border-radius: 5px 5px 0 0;
  background: #1d4581;
  cursor: pointer;
}

.audio-main .audio-expand::after {
  content: '';
  display: block;
  overflow: hidden;
  margin: 8px 0 0 8px;
  width: 22px;
  height: 13px;
  background-image: url(data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAANCAYAAABGkiVgAAACEUlEQVQ4jY3TzYraUBjG8SdVC9LahbQLi6LVbbeFWdoRXIwECxbvQSiUXkB31oJIEcSVC3EhUhQFMwiuegPutKBo0wQ/+sWs1LFOzjkpr+gwjON0XgghJPz4n3CO5HK5oCjKHwCPAfQAHMuyTM93GkVRjgGcArADyMuy/OYegPvT6fQtY8xgjD03DONLo9F4chewVquFGGOnjDH7er3ut9vtTwCsVPoIgC+RSLwKBoPvJUmymqb5VZKkl/F4/GBxpVIJWSwWhQpXq9X3TCbzrtvtdgHMLA6HwwLgYafTWdtstonf738hhHAxxk5isVi1Xq+fXwdLpVKIVs45t8/ncz2VSn3o9/s/APwGsCCUA1gDEL1eby6E0AKBwNEOjkaj1WazeQkXCoWQaZobcLFY6Ol0OqmqqgpA3aIXhJoADAB/AfDBYLDknOs+n++Ic+4yDOMkEolUW63WeS6XCwkhFPqHVJjNZpOaphH2DcDPbRwIpfsOXhE8HA6XQgjd6/VeFofD4TPTND9T4XK51PP5fFLX9T3wKrqD2bZYjEajDezxeDawEOI159xGYKFQSI7H4xvB6+gerKrqBna73QRbCSwWi8nJZHIQvAndgzVNI3jidDqflsvlj7PZ7FaQZnOiDgwdjAcA3ACe0bYDQPuW0IMgjfXQC6oEsAQw2ZYTegbg123g/9Cr8Hj77cX2OjwA/gFwckGK8HAP3wAAAABJRU5ErkJggg==);
  transition: all .2s ease 0s;

}

.audio-main .audio-expand.expand::after {
  transform: rotate(180deg);
  margin-top: 4px;
  margin-left: 8px;
}

.bui-audio {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* align-items: center; */
}

.bui-audio .player-controls {
  /* width: 100px; */
  padding-top: 5px;
  padding-right: 20px;
  margin-left: 10px;
  margin-right: 10px;
  border-right: 1px solid hsla(0, 0%, 40.8%, .58);
  margin-bottom: 5px;
}

.bui-audio .player-info {
  flex: 1;
  max-width: 560px;
  margin-left: 10px;
  margin-right: 10px;
}

.bui-audio .player-info .player-info-title {
  margin-bottom: 8px;
  font-size: 16px;
  color: #ffffff;
  overflow: hidden;
  
}
.bui-audio .player-info .player-info-title-text{
  display: inline;
  float: left;
  white-space: nowrap;
  animation: scrollText 15s linear infinite; 
}
@keyframes scrollText {
  0% { transform: translateX(560px); } /* 初始状态 */
  100% { transform: translateX(-100%); } /* 结束状态 */
}
.bui-audio .player-info .player-info-progress {
  text-align: right;
  font-size: 12px;
  color: #ffffff;
}

.bui-audio .player-info .player-progress {
  flex: 1;
  position: relative;
  height: 10px;
  background-color: #aab7c0;
  border-radius: 5px;
}

.bui-audio .player-info .player-progress .player-progress-box {
  height: 100%;
  background-color: #6aa9d6;
  border-radius: 5px;
}

.bui-audio .player-info .player-progress .player-progress-bar-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 20px;
}

.bui-audio .player-info .player-progress .player-progress-bar-box .player-progress-bar {
  position: absolute;
  top: -5px;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 15px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.bui-audio .player-info .player-progress .player-progress-bar-box .player-progress-bar::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background-color: #4f8db8;
  margin-top: -6px;
  margin-left: -6px;
  border-radius: 50%;
}


.bui-audio .player-info .player-progress .player-progress-bar-box .player-progress-bar .float-progress-bar {
  position: absolute;
  top: -30px;
  left: 50%;
  width: 100px;
  height: 25px;
  background: #4f8db8;
  border-radius: 12px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  line-height: 25px;
  margin-left: -50px;
}

.bui-audio .player-other-controls {
  display: flex;
  margin-left: 10px;
  border-left: 1px solid hsla(0, 0%, 40.8%, .58);
  padding-left: 20px;
  margin-bottom: 5px;
}

.bui-audio .player-other-controls .controls-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60px;
  /* height: 56px; */
}

.bui-audio .player-other-controls .controls-item .item-tag {
  color: #ffffff;
  font-size: 12px;
  border: 1px #ffffff solid;
  padding: 3px;
  cursor: pointer;
  user-select:none;
}

.player-controls-btn {
  width: 40px;
  height: 41px;
  /* background-color: #4f8db8; */
  cursor: pointer;
  /* background-origin: content-box; */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* border-radius: 50%; */
}

.player-controls-btn.play {
  background-image: url(data:img/png;base64,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);
}

.player-controls-btn.pause {
  background-image: url(data:img/png;base64,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);
}

.fade-in {
  animation: fadein 0.5s forwards;
}

.fade-out {
  animation: fadeout 0.5s forwards;
}

@keyframes fadein {
  from {
    opacity: 0;
    display: none;
  }

  to {
    opacity: 1;
    display: block;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
    display: block;
  }

  to {
    opacity: 0;
    display: none;
  }
}