﻿
 /*font-size*/
.fnt_30 { font-size:30px;}
.fnt_16 { font-size: 16px;}
.fnt_18 { font-size: 18px;}
.fnt_24 { font-size: 24px;}

.mp3-wrap{max-width: 1400px;margin: auto;padding-bottom: 40px}
.mp3-wrap-r{ width:calc(100% - 325px); float:right; }

.jp-playlist ul{display: block !important;}
.mp3-list li{ width:100%; height:48px; line-height: 48px; color:#000;}

.mp3-list li.jp-playlist-current.on{ background: #f0f4f845;}
/*.mp3-list li.jp-playlist-current.on a em{ background: url(../images/music.gif) no-repeat left center;}*/
.mp3-list li i{ float:left; display: block; width:104px; line-height: 48px; height:48px; color:#000;}

.mp3-box-top{margin-bottom: 40px;}
.mp3-box-player{ float:left; }
.mp3-box-player-top{height: 92px;padding:18px 0;}
.mp3-box-player-top span{ float:right; line-height: 26px; font-size:12px;}
.mp3-box-player-top p{ float:left; font-size:16px; line-height: 26px;padding-top: 20px}

.mp3-box-player-bottom{ height:22px;  position: absolute; top:-10px; width:calc(100% - 40px);}
.jp-seek-bar{ height:22px; width:100%; background: url(../images/jline.png) repeat-x;width: 100%!important;}
.jp-play-bar{ height:22px; background: #fff; position: relative; overflow: initial!important; background: url(../images/jline_w.png) repeat-x;}
.jp-play-bar em{ background: url(../images/mp3_menu.png) no-repeat; display: block; width:10px; height:11px; position: absolute; right:-5px; top:5px;}

#jquery_jplayer_N{ height:0!important;}

.mp3_fixd{position: fixed;left: 0;bottom: 0;width: 100%;    box-shadow: 0 -8px 10px -12px #000;background: #fff;z-index: 9;}
.mp3_fixd.hide{ display: none;}
.mp3-box-bottom{ background: #fff; max-width: 1400px;margin: auto; padding: 0 20px;position: relative;}
.button-prev{  margin-right: 28px; display: block; width:22px; height:51px; position: relative; top:0px; background: url(../images/mp3_prev.png) no-repeat center; float:left;}
.button-play{ display: block; width:50px; height:51px; position: relative; top:0px; background: url(../images/mp3_play.png) no-repeat center; float:left;}
.jp-state-playing .button-play{ background: url(../images/mp3_pause.png) no-repeat center;}
.button-next{ margin-left: 28px;display: block; width:22px; height:51px; position: relative; top:0px; background: url(../images/mp3_next.png) no-repeat center; float:left;}
.jp-volume-bar{background:#C1C1C1;position: relative;width:165px;height: 2px;cursor: pointer;margin-top: 13px; margin-left: 43px;}
.jp-volume-bar-value{height: 100%;background: #c30e2e;position: relative;}
.jp-volume-bar-value span{display: block;position: absolute;width: 10px;height: 10px;border-radius: 100%;background: #c30e2e;top:-5px;right:0;}
.mp3-voice{float:right;}
.mp3-voice-box{margin-top:54px;margin-left: 40px;}
.mp3-voice .jp-mute{float: left;width: 30px;height: 26px;background: url('./../images/mp3_voice.png') no-repeat center center;border: none;}
.mp3-voice .jp-mute.on{background-image: url('./../images/mp3_voice_c.png');}
.mp3-play-style{float: left;margin-left: 40px;margin-top: 40px;}
.mp3-play-style button{width: 30px;height: 27px;border: none; display: none;}
.mp3-play-style button.jp-repeat{background:url('./../images/mp3_loop1.png') no-repeat;background-size: cover;}
.mp3-play-style button.jp-repeatOne{background-image: url('./../images/mp3_loop3.png'); background-color: transparent;}
.mp3-play-style button.jp-shuffle{background:url('./../images/mp3_loop2.png') no-repeat;background-size: cover;}
.mp3-play-style button.on{ display: block;}
.songD{width: 1280px; margin:0 auto 15px;}


.mp3-list,.mp3-list a{color: #2d2d2d;}
.jp-playlist-item-remove{display: none !important;}
.mp3-list li a{display: block;overflow: hidden;}
.mp3-list li p{float: left;}


.mp3-title{overflow: hidden;border-bottom: 1px solid #2d2d2d;padding-bottom: 20px;margin-bottom: 15px;}
.mp3-title span{float: left;}
.mp3-title .span_01{width: 80px;text-align: center;}
.mp3-title .span_02{width: 350px; padding-left: 44px;   box-sizing: border-box;}
.mp3-title .span_03{width: 240px;}
.mp3-title .span_04{width: 100px;}
.mp3-title .span_05{float: right;width: 230px;text-align: center;}

.mp3-list li .songnum{width: 80px;text-align: center;}
.jp-playlist-current.on p.songnum{background: url(../images/song_btn.png) no-repeat center center;text-indent: -88888px;}
.mp3-list li a>em{width: 350px;padding-left: 44px;    box-sizing: border-box;float: left;}
.mp3-list li .jp-artist{width: 240px;float: left;}
.mp3-list li .songbf{width: 100px;}
.mp3-list li .timer{float: right;width: 230px;text-align: center;}




.mp3-box-player-top dl{overflow: hidden;}
.mp3-box-player-top dt{width: 92px;float: left;}
.mp3-box-player-top dt img{width: 100%;}
.mp3-box-player-top dd{float:left;margin-left: 25px;}
.mp3-box-player-top dd em,.mp3-box-player-top dd i{display: block;}
.mp3-box-player-top dd em{font-weight: bold;}


.song_left{float: left;width: 240px;}
.song_left dt{margin-bottom: 20px;}
.song_left dt img{width: 100%;}
.song_left dd{color: #a7a7a7;}
.song_left dd>div{overflow: hidden;margin-bottom: 10px;}
.song_left dd em{float: left;}
.song_left dd p{color: #2d2d2d;float:right;width: calc(100% - 55px);}
.song_left dd .song_p02 p{color: #2f63a9;}

.s_intr{margin-top: 70px;}
.s_intr h3{margin-bottom: 20px;}
.song_btn{float: left;position: absolute;left: 50%;top:50%;    margin-left: -75px;margin-top: -25px;}

.mp3_t{margin-bottom: 80px;}
.mp3_btn a{display: inline-block;width: 174px;height: 42px !important;line-height: 42px !important;text-align: center;background: #c30e2e;color: #fff;border-radius: 20px;}
.mp3_btn a img{vertical-align: middle;margin-right: 10px;}
.mp3_btn a.a02{background:#eaeaea;color: #2d2d2d;    padding: 0 !important;margin: 0 !important;margin-left: 20px !important;font-size: 16px !important}
.mp3_t h1{font-weight: bold;margin-bottom: 30px;}


.jp-state-playing .mp3-list li.jp-playlist-current.on .songnum{background: url(../images/music.gif) no-repeat center center;text-indent: -8888px;}
.mp3-list li.jp-playlist-current.on .songnum{background: url(../images/song_btn.png) no-repeat center center;text-indent: -8888px;}




/*.jp-state-playing .jp-playlist-current.on .songnum{background: url(../images/song_btn.png) no-repeat center center;text-indent: -8888px;}
*/

.mp3_btn .mp3-play-style{margin: 0;}
.mp3_btn .mp3-play-style button{border: 0;outline: none;display: inline-block;width: 174px;height: 42px;line-height: 42px;text-align: center;background: #c30e2e;color: #fff;border-radius: 20px;}
.mp3_btn .mp3-play-style button img{vertical-align: middle;margin-right: 10px;}
.mp3_btn .mp3-play-style button{display: none;}
.mp3_btn .mp3-play-style button.on{display: block;}

.s_p {height:250px;overflow: auto;}
@media only screen and (min-width:1025px) {
a{transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;}
.mp3-list li a:hover{background: #eeeeee;}
.mp3-list li a:hover .songnum em{text-indent: -8888px; width: 23px;height:48px;background: url(../images/song_btn.png) no-repeat center center;display: inline-block;}
.mp3-list li a:hover .timer{text-indent: -8888px; background: url(../images/song_icon_11.png) no-repeat center center;}


}



@media only screen and (max-width:1425px) {
.mp3-wrap,.mp3-box-bottom{width:auto; margin:0 20px;}
.s_intr{margin-top: 30px;}
.mp3_t{margin-bottom: 30px;}

}
@media only screen and (max-width:1350px) {
    .mp3-wrap-r {
        width: calc(100% - 290px);
    }
    .mp3-list li .timer,.mp3-title .span_05{width: 150px;}
    
}
@media only screen and (max-width:1260px) {

.mp3-list li .jp-artist,.mp3-title .span_03{width: 200px;}
.mp3-list li .timer,.mp3-title .span_05{width: 120px;}
}

@media only screen and (max-width:1180px) {
.mp3-list li a>em,.mp3-title .span_02{width: 260px}
.mp3-list li .jp-artist, .mp3-title .span_03{width: 150px;}
.mp3-list li a>em, .mp3-title .span_02{padding-left: 0;width: 220px;}
}
@media only screen and (max-width:1024px) {
.song_left,.mp3-wrap-r{float: none;width: 100%;}
.song_left dt{width: 300px;margin: auto;margin-bottom: 20px;}
.song_left{margin-bottom: 20px;}
.s_intr{margin-top: 20px;}
.mp3_t{margin-bottom: 20px;}
.jp-volume-bar{width: 90px;}
.mp3-box-player-top dt{width: 50px;}
.mp3-box-player-top p{padding-top: 0;}
.mp3-box-player-top dd{margin-left: 10px;}
.mp3-box-player-top{height: 50px;}
.mp3-voice-box{margin-top: 28px;}
.mp3-box-player-top{padding: 10px 0;}

.s_p{height: auto;}
.mp3_btn a,.mp3_btn .mp3-play-style button{width: 120px !important;height: 30px !important;line-height: 30px !important;font-size: 14px;}
}

@media only screen and (max-width:767px) {

.fnt_16 { font-size: 14px;}
.fnt_18 { font-size: 14px;}
.fnt_24 { font-size: 18px;}
.fnt_30 { font-size:20px;}
.song_left dt{width: 200px;}
.mp3_t h1{margin-bottom: 10px;}
.mp3-title{display: none;}
.mp3-list li .songbf{display: none;}
.mp3-list li .songnum,.mp3-list li a>em,.mp3-list li .songbf,.mp3-list li .timer,.mp3-list li .jp-artist, .mp3-title .span_03{float: left;width: 50%;line-height: 30px;text-align: left;}
.mp3-list li{height: inherit;line-height: inherit;}
.mp3-list li i{line-height: 30px;height: inherit;}
/*.mp3-list li.on.one .songnum{background: url(../images/music.gif) no-repeat 0 center;}
.mp3-list li.on .songnum{background: url(../images/song_btn.png) no-repeat 0 center;}*/

.jp-state-playing .mp3-list li.jp-playlist-current.on .songnum{background: url(../images/music.gif) no-repeat 0 center;text-indent: -8888px;}
.mp3-list li.jp-playlist-current.on .songnum{background: url(../images/song_btn.png) no-repeat 0 center;text-indent: -8888px;}




.mp3-list li a .timer{text-indent: -8888px; background: url(../images/song_icon_11.png) no-repeat 0 center;background-size: 18px;}
.mp3-list li{padding: 10px 0;border-bottom: 1px solid #e5e0e0;}
.mp3_fixd{display: none;}
.mp3-wrap{padding-bottom: 0;}
.mp3_btn a.a02{font-size: 14px !important}


}


.blank_50{position:fixed;width: 100%;height: 100%;background: rgba(0,0,0,0.5);z-index: 9999;top:0;left: 0;}
.song_tac{position:fixed;width: 710px;height: 510px;left: 50%;top:50%; margin-left: -355px;margin-top:-255px;background: #fff;z-index: 99991; }
.song_tac dl{overflow: hidden;}
.song_tac dt{float: left;width: 282px;}
.song_tac dt img{width: 100%;}
.song_tac dd{width: 428px;float: left;}
.song_box{padding: 50px;}
.song_box h1{font-weight: bold;margin-bottom: 40px;}
.song_box input{border: 0;outline: none;background: #f2f2f2;height: 38px;line-height: 38px;padding: 0 10px;    box-sizing: border-box;width: 100%;}
.song_box li{margin-bottom: 25px;}
.song_box li p{margin-bottom: 10px;}
.song_box button{
    font-weight: bold;width: 210px;height: 42px;line-height: 42px;text-align: center;background: #c30e2e;
    border: 0;background: #c30e2e;color: #fff;border-radius: 30px;margin:auto;display: block;

}

.song_form ul{padding-bottom: 20px;}
.song_close{position: absolute;top:25px;right: 25px;cursor: pointer;}
.song_tac,.blank_50{display: none;}

@media only screen and (max-width:767px) {
    .song_close{position: absolute;top:10px;right: 10px;}
    .song_tac{width: 94%;height: auto;margin-left: 0%; left: 3%;height: 308px;margin-top: -154px}
    .song_tac dt{width: 100%;display: none;}
    .song_tac dd{width: 100%;float: none;}
    .song_box{padding:30px 20px;}
    .song_form ul{padding-bottom:10px;}
    .song_box h1{margin-bottom: 10px;text-align: center;}
    .song_box li{margin-bottom: 10px;}
}



.mp3_fixd.cur{position: relative;}


.mp3-box-bottom .mp3-play-style{display: none;}
.mp3-box-player-top dl dd span{position: absolute; right:20px; top:5px;}
.mp3-box-player-top dl dd span em,.mp3-box-player-top dl dd span i{ display: inline-block;}



.jp-repeat{display: block !important;}
.jp-repeatOne{display: none !important;}









