@charset "utf-8";
.play-pre, .play-next, .icon-play, .icon-pause, .progress span i, .volume-btn, .jp-volume-bar-value i, .play-btn, .icon-player { background: url("../images/icon.png") no-repeat; }
.icon-player { float: left; width: 24px; height: 28px; background-position: 0px 0px; margin: 4px 10px 0 0; }

/*播放控制条*/
.music-player { position: fixed; left: 0; bottom: 0; z-index: 10; width: 100%; height: 60px; background: url("../images/bg60.jpg") repeat-x; }
.music-player-cont { width: 1100px; margin: 0 auto; }
.play-pre { float: left; width: 34px; height: 34px; margin-top: 12px; margin-right: 26px; background-position: 0 -99px; }
.play-next { float: left; width: 34px; height: 34px; margin-top: 12px; margin-right: 50px; background-position: -35px -99px; }
.icon-play { display: inline-block; float: left; width: 48px; height: 48px; margin-top: 6px; margin-right: 26px; background-position: -54px -47px; }
.icon-pause { float: left; width: 48px; height: 48px; margin-top: 6px; margin-right: 26px; background-position: 0 -49px; }
.play-tit { height: 32px; line-height: 26px; padding-top: 3px; font-size: 14px; color: #7f7f7f; overflow: hidden; }
.play-tit a { color: #fff; }
.jp-playlist ul li { display: none !important; }
.jp-playlist ul .jp-playlist-current { display: block !important; }
.progress-box { float: left; width: 680px; height: 600px; margin-right: 16px; }
.progress { position: relative; width: 680px !important; height: 8px; background: #171719; border-top: 1px solid #060606; border-bottom: 1px solid #2d2d32; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; cursor: pointer; }
.progress span { height: 100%; position: absolute; left: 0; top: -1px; background: #c94c1c; border-top: 1px solid #ff5716; border-bottom: 1px solid #0c0b0d; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; }
.progress span i { position: absolute; right: -14px; top: -6px; width: 18px; height: 18px; background-position: -104px -72px; }
.play-time { float: left; font-size: 12px; color: #9797a7; margin-top: 30px; margin-right: 34px; }
.play-time i, .play-time .jp-duration { color: #767681; }
.volume-box { position: relative; float: right; width: 22px; height: 22px; margin: 20px 0 0 20px; }
.volume-level { position: absolute; left: 22px; bottom: 10px; width: 8px; height: 140px; border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; -ms-border-radius: 12px; background: #000; cursor: pointer; }
.volume-bar-value-box { display: none; position: absolute; z-index: 99; left: -14px; bottom: 41px; width: 52px; height: 164px; background: #1a1e25; }
.jp-volume-bar-value { width: 100%; position: absolute; left: 0; bottom: 0; width: 8px; background: #c94c1c; border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; -ms-border-radius: 12px; }
.jp-volume-bar-value i { position: absolute; left: 50%; top: -8px; content: ""; width: 18px; height: 18px; background-position: -104px -72px; margin-left: -9px; }
.volume-btn { display: block; position: absolute; left: 0; bottom: 0; width: 22px; height: 22px; margin-top: 21px; background-position: -105px -47px; }
.topbar-con .menu li:hover .child { display: block; }
.banners { width: 100%; height: 300px; position: relative; }
.banners .bannerbg { height: 300px; width: 100%; top: 0; background-size: cover; position: absolute; z-index: 1; background-position: center; background-repeat: no-repeat; opacity: 0; filter: alpha(opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; transition: 1.5s; -webkit-transition: 1.5s; -moz-transition: 1.5s; -mz-transition: 1.5s; -o-transition: 1.5s; }
.banners .bannerbg.cur { opacity: 1; filter: alpha(opacity=1); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; }