.music-act {position: absolute; top: 50%; left: 50%; margin-top: -90px; margin-left: -275px; background: url(images/backbg.png) repeat; border-radius: 15px; box-shadow: 0 1px 3px 0 #000;}
.button {display: inline-block; zoom: 1; 
*display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: 0.25em 0.6em 0.3em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2);}
.red {color: #faddde; border: solid 1px #980c10; background: #d81b21; background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715)); background: -moz-linear-gradient(top, #ed1c24, #A51715); 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');}
.red:hover {background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color: #fff;}
.red:active {color: #de898c; background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24)); background: -moz-linear-gradient(top, #aa1317, #ed1c24); 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
.cor_bs, .cor_bs:hover {color: #ffffff;}
.keBody {background: url(images/bodyBg.jpg) repeat #333;}
.keTitle {height: 100px; line-height: 100px; font-size: 30px; font-family: '微软雅黑'; color: #FFF; text-align: center; background: url(images/bodyBg3.jpg) repeat-x bottom left; 
 background:
 font-weight: normal}
.kePublic {background: #333; padding: 50px;}
.keBottom {color: #FFF; padding-top: 25px; line-height: 28px; text-align: center; font-family: '微软雅黑'; background: url(images/bodyBg2.jpg) repeat-x top left; padding-bottom: 25px}
.keTxtP {font-size: 16px; color: #ffffff;}
.keUrl {color: #FFF; font-size: 30px;}
.keUrl:hover {text-decoration: underline; color: #FFF;}
.mKeBanner, .mKeBanner div {text-align: center;}
.left {float: left;}
.right {float: right;}
.clear {clear: both;}
#background {background-size: cover; position: fixed; top: 0; left: 0; width: 100%; height: 100%; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none;}
#player {width: 500px; height: 130px; padding: 25px; position: relative; margin:0 auto;}
#player .cover {/*background: url(images/headimg.jpg) center no-repeat;*/position: absolute;top: 0px;left: 0px;overflow: hidden;-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 50%;width: 168px;height: 168px;border: 2px solid #fff;}
#player .cover img {-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; width: 100%; height: 100%;}
#player .ctrl {line-height: 28px;margin: 0px 0 0 167px;}
#player .ctrl .tag strong, #player .ctrl .tag span {display: block;text-overflow: ellipsis;/* color: #fff; */font-size: 16px;font-weight: bold;}
#player .ctrl .tag strong{height:50px; display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
overflow: hidden;}
#player .ctrl .tag span {font-size: 12px; margin-top: 5px; color: #ccc;}
#player .ctrl .icon {background-repeat: no-repeat; background-position: center; display: inline-block; opacity: 0.69; filter: alpha(opacity=69); cursor: pointer; width: 24px; height: 24px; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none;}
#player .ctrl .icon:hover, #player .ctrl .icon.enable {opacity: 1; filter: alpha(opacity=100);}
#player .ctrl .icon:active {opacity: 0.3; filter: alpha(opacity=30);}
#player .ctrl .control {margin-top: 23px; height: 25px;}
#player .ctrl .control .rewind {background-image: url(images/rewind.png);}
#player .ctrl .control .playback {background-image: url(images/play.png);}
#player .ctrl .control .playback.playing {background-image: url(images/pause.png);}
#player .ctrl .control .fastforward {background-image: url(images/fastforward.png);}
#player .ctrl .control .volume .mute {background-image: url(images/volume.png);}
#player .ctrl .control .volume .mute.enable {background-image: url(images/mute.png);}
#player .ctrl .control .volume .slider {margin-top: 11px; margin-left: 10px; width: 100px;}
#player .ctrl .progress {margin-top: 13px;}
#player .ctrl .progress .timer {font-size: 13px;/* color: #fff; */margin-top: 7px;line-height: 20px;}
#player .ctrl .progress .repeat, #player .ctrl .progress .shuffle {background-position: center bottom;}
#player .ctrl .progress .repeat {background-image: url(images/repeat.png);}
#player .ctrl .progress .repeat.once, #player .ctrl .progress .repeat.all {opacity: 1;}
#player .ctrl .progress .repeat.once {position: relative;}
#player .ctrl .progress .repeat.once:before {content: "1"; position: absolute; top: -3px; right: -4px; font-size: 8px; color: #fff;}
#player .ctrl .progress .shuffle {background-image: url(images/shuffle.png);}
.slider {background: #5c6b83; height: 6px; position: relative; cursor: pointer; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;}
.slider:hover a, .slider.enable a {opacity: 1;}
.slider a {background: #fff; margin-left: -2.5px; position: absolute; opacity: 0; width: 5px; height: 6px; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s;}
.slider .loaded, .slider .pace {position: absolute; height: 100%; opacity: 0.7; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}
.slider .loaded {background: rgba(255, 255, 255, 0.1);}
.slider .pace {background: #50cafe;}
#playlist {background: rgba(0, 0, 0, 0.5); width: 470px; margin: 0 auto 50px; padding: 10px 15px; list-style: none; position: relative; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); display: none;}
#playlist li {color: #aaa; font-size: 12px; line-height: 2; padding-left: 25px; cursor: pointer; text-overflow: ellipsis; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;}
#playlist li:hover {color: #fff;}
#playlist li.playing {background: url(images/playing.png) no-repeat 0 center; color: #fff; font-weight: bold;}