.wzatitle{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    width: 100%;
    font-size: 16px;
    text-align: center;
    color: black;
    font-weight: 200;
    line-height: 30px;
    text-indent: 10px;}
.jp-audio { margin: 30px auto !important; min-width: 320px; max-width: 380px; padding: 5px; }
.jp-interface {position: relative;background-color: #fff;width: 100%;box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);transition: all 0.5s ease-out;}
.jp-interface:hover{transition: all 0.3s ease;transform: scale(1.05);box-shadow: 0 0 5px rgba(0, 196, 255, 0.7)}
.jp-audio .jp-interface {height: 80px;border-radius: 8px; overflow: hidden;}
.jp-controls-holder {clear: both;margin: 0 auto;position: relative;overflow: hidden;top: -20px;padding: 5px 0;}
.jp-interface .jp-controls {margin: 0;padding: 0;}
.jp-audio .jp-controls {    
    width: 100%;
    position: absolute;
    bottom: 0px;
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;}
.jp-controls button {display: block;float: left;overflow: hidden;text-indent: -9999px;cursor: pointer; border-radius: 32px;border: solid 1px #E8EAF2}
.jp-play {width: 32px;height: 32px;background: url("../img/wzaplayer.png") 2px 1px no-repeat; background-size: 600%;transition: all 0.3s ease-out;}
.jp-play:focus,.jp-play:hover {background: url("../img/wzaplayer.png") -27px 1px no-repeat;background-size: 600%;border: solid 1px rgba(255, 132, 0, 0.51);box-shadow: 0 0 2px 1px rgba(255, 132, 0, 0.4);transition: all 0.3s ease;transform: scale(1.1);}
/*.jp-state-playing .jp-play {background: url("../img/wzaplayer.png") 1px -28px no-repeat; background-size: 600%;}*/
.jp-state-playing .jp-play{background: url("../img/bofang.gif") 0 0 no-repeat;background-size: 100%;border: none;transition: all 0.3s ease-out;}
.jp-state-playing .jp-play:focus,.jp-state-playing .jp-play:hover {background: url("../img/wzaplayer.png") -28px -28px no-repeat; background-size: 600%;border: solid 1px #ff9900;transition: all 0.3s ease;}
.jp-stop, .jp-previous, .jp-next {width: 28px;height: 28px;margin-top: 2px; }
.jp-stop {background: url("../img/wzaplayer.png") 1px -49px no-repeat;margin-left: 10px;background-size: 600%; transition: all 0.3s ease-out}
.jp-stop:focus,.jp-stop:hover {background: url("../img/wzaplayer.png") -24px -49px no-repeat;background-size: 600%;border: solid 1px rgba(255, 132, 0, 0.51);box-shadow: 0 0 2px 1px rgba(255, 132, 0, 0.4);transition: all 0.3s ease;transform: scale(1.1);}
.jp-audio .jp-progress {
    width: calc(100% - 110px)!important;
    height: 12px;
    margin-right: 10px;
}
.jp-audio .jp-progress:hover{cursor: pointer;display: block;}
.jp-audio .jp-type-single .jp-progress {width: 186px; }
.jp-seek-bar {width: 100% !important;height: 2px; cursor: pointer; transition: all 0.3s ease-out;background-color: #E9EBF3;
    margin-top: 6px;}
.jp-play-bar {width: 0px;border-radius: 10px;height: 2px; background-image: linear-gradient(to right, #6DFFFF 0%, #27B9F4 100%);position: relative;right: 5px;overflow: inherit !important;}
.jp-play-bar:after {content: "";display: block;width: 6px;height: 6px;position: absolute;right: -4px;top: -2px;background: #27B9F4;box-shadow: 0 0 3px 1px #27B9F4;border-radius: 100%;}
.jp-audio .jp-progress:hover .jp-seek-bar{box-shadow: 0 0 8px #00c4ff;background-color: rgba(0, 196, 255, 0.51);height: 6px;}
.jp-audio .jp-progress:hover .jp-play-bar{height: 6px;}
.jp-audio .jp-progress:hover .jp-play-bar:after{width: 10px;height: 10px;}
.jp-state-no-volume .jp-volume-controls {display: block; }
.jp-volume-controls {
    position: relative;
    /* top: 39px; */
    /* right: 10px; */
    width: 130px;
    display: block;
    height: 18px;
    left: inherit;
    margin-right: 10px;
}
.jp-volume-controls button {display: block;position: absolute;overflow: hidden;text-indent: -9999px;border: none;cursor: pointer; }
.jp-mute,.jp-volume-max {width: 18px;height: 18px; }
.jp-volume-max {right: 0;}
.jp-mute {background: url("../img/wzaplayer.png") -8px -181px no-repeat; background-size: 1200%;transition: all 0.3s ease-out;}
.jp-mute:focus, .jp-mute:hover {background: url("../img/wzaplayer.png") -42px -181px no-repeat; background-size: 1200%;transition: all 0.3s ease;transform: scale(1.2);}
.jp-state-muted .jp-mute {background: url("../img/wzaplayer.png") -42px -181px no-repeat; background-size: 1200%;transition: all 0.3s ease-out;}
.jp-state-muted .jp-mute:focus, .jp-state-muted .jp-mute:hover {background: url("../img/wzaplayer.png") -8px -181px no-repeat; background-size: 1200%;transform: scale(1.2);}
.jp-volume-max {background: url("../img/wzaplayer.png") -8px -112px no-repeat; background-size: 1200%;transition: all 0.3s ease-out;}
.jp-volume-max:focus, .jp-volume-max:hover {background: url("../img/wzaplayer.png") -42px -112px no-repeat; background-size: 1200%; transition: all 0.3s ease;transform: scale(1.2);}
.jp-volume-bar {position: absolute;top: 8px;left: 22px;width: 82px;height: 2px;cursor: pointer; background-color: #E8EAF2;border-radius: 5px;transition: all 0.3s ease-out;}
.jp-volume-bar:hover{box-shadow: 0 0 8px #ff9900;background-color: #babdc7;transition: all 0.3s ease;transform: scale(1.1);}
.jp-volume-bar-value {width: 0px;border-radius: 5px;height: 2px;background-image: linear-gradient(to right, #fff167 0%, #ff7e00 100%);position: relative;overflow: inherit !important;}
.jp-volume-bar-value:after{content: "";display: block;width: 6px;height: 6px;border-radius: 50%;position: absolute;top: -2px;right: 0;background: #ff7e00;box-shadow: 0 0 3px 1px #ff7e00;}
/* .jp-audio .jp-time-holder {position: absolute;top: 0;} */
.jp-audio .jp-type-single .jp-time-holder {display: block;}
.jp-current-time,.jp-duration {font-size: 12px;font-style: oblique; color: rgba(129, 135, 158, 0); font-weight: 200;line-height: 24px;transition: all 0.6s ease-out;}
.jp-current-time {float: left;display: inline;cursor: default;}
.jp-duration {float: right;display: inline;text-align: right;cursor: pointer;  }
.jp-state-playing .jp-current-time,.jp-state-playing .jp-duration{color: #81879e;transition: all 0.6s ease;}
.jp-jplayer audio, .jp-jplayer {width: 100%;height: 100%; position: relative;}
.jp-jplayer img{border-top-left-radius:5px;border-top-right-radius:5px}
.jp-jplayer video,.jp-jplayer img{width: 100%;height: 100%;}
.jp-toggles {padding: 0;margin: 0 auto;overflow: hidden; }
.jp-audio .jp-type-single .jp-toggles {width: 25px; }
.jp-toggles button {display: block;float: left;width: 25px;height: 18px;text-indent: -9999px;line-height: 100%;border: none;cursor: pointer; }
.jp-lang-controls{position: absolute; top: 35px;left: 100px;font-weight: 200;}
.jp-lang-controls button{font-size: 12px;margin: -3px;border: solid 1px #E8EAF2;background-color: #fff;color: #A2A7BA;}
.jp-lang-controls button:hover,.jp-lang-controls button:focus,.jp-lang-controls button.active{color: #00c4ff;cursor: pointer;}
.jp-lang-controls button.lang-standard{border-top-left-radius: 22px;border-bottom-left-radius: 22px;transition: all 0.3s ease-out;}
.jp-lang-controls button.lang-shanghai{border-top-right-radius: 22px;border-bottom-right-radius: 22px;transition: all 0.3s ease-out}
.jp-lang-controls button:hover {border-color:#ff9900;transform: scale(1.2);transition: all 0.3s ease;border-radius: 22px;color: #ff9900;}
.jp-gui.jp-interface p{display: none;}
.jp-first{margin-left: 10px;}
@media (max-width: 480px) {
    .jp-volume-controls,button.jp-stop{display: none !important;}
    .jp-gui.jp-interface p{display: block;}
    .jp-gui.jp-interface p{font-size: 12px;position: absolute;left: 40%;top: -2px;color: #999;}
    .jp-interface {background: none !important;box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);}
    .jp-state-playing .jp-interface{box-shadow: 0 0 5px rgba(0, 196, 255, 0.7)}
    .jp-interface:hover,.jp-progress:hover{transform: scale(1);}
    .jp-audio .jp-interface {border: 1px solid #eee;background: #fdfdfd;border-radius: 80px;}
    .jp-audio .jp-controls {margin-bottom: 16px;}
    .jp-controls button {-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}
    .jp-gui .jp-controls .jp-play {width: 48px;height: 48px;background: url("../img/stopplay.png") no-repeat !important;background-size: 100% !important;}
    .jp-play:focus {background: none !important;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}
    .jp-state-playing .jp-gui .jp-controls .jp-play {background: url("../img/bofang.gif") no-repeat !important;background-size: 100% !important;}
    .jp-state-playing .jp-gui .jp-controls .jp-play:focus {background: url("../img/bofang.gif") no-repeat !important;background-size: 100% !important;}
    .jp-gui .jp-controls .jp-stop {background: url("../img/stopplay.png") no-repeat !important;background-size: 100% !important;}
    .jp-gui .jp-controls .jp-stop:focus {background: url("../img/stopplay.png") no-repeat !important;background-size: 100% !important;}
    .jp-progress {background-color: #eee;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}
    .jp-seek-bar{margin: 0;}
    .jp-lang-controls button{font-size: 16px;padding: 2px 12px;}
    .jp-play-bar {height: 2px;position: relative;overflow: inherit !important;}
    .jp-play-bar:after {content: "";display: block;width: 8px;height: 8px;border-radius: 50%;background: rgb(0, 198, 255);position: absolute;right: -2px;top: -3px;box-shadow: 0 0 8px rgba(0, 198, 255, 0.75);}
    .jp-audio .jp-time-holder {position: absolute;
        top: 16px;
        width: 80% !important;
        left: 10% !important;
        color: #999;}
    .jp-audio .jp-progress {position: absolute;height: 2px;width:73% !important;left: 84px !important;top: 26px;}
    /*鏂板姞*/
    .jp-audio .jp-progress:hover{width:76% !important}
    .jp-duration{ margin-right: 26px;}
    .jp-current-time{margin-left: 16px;}
    .wzatitle {top: 1px;left: 23px;width: inherit;position: absolute !important;display: block;}
    .jp-lang-controls {position: absolute;top: 38px;left: 144px;}
}

@media screen and (max-width: 750px){
  .top{
    width: 1200px !important;
     background-size: 100% 100% !important;
  }
  .center{
     display: block  !important;
   }
  .container .footer{
  width: 1200px !important;
  }
}