/* 스크롤 커스텀 */
::-webkit-scrollbar { width: 6px; height:6px; padding-top:30px;}
::-webkit-scrollbar-track { background:#fff;}
::-webkit-scrollbar-thumb { background: #D8D7D2; height:40px!important; }
::-webkit-scrollbar-thumb:hover { background:#E1CFAB;}


.musicplayer { width:100%; background:#161616; height:40px; position:relative; }
.musicplayer .player { width:1100px; margin:0 auto; height:100%; position:relative;}
.musicplayer .player .info { position:absolute; left:288px;  }
.musicplayer .player .info  .title { max-width:200px; overflow:hidden; white-space:nowrap;  float:left; line-height:40px; color:rgba(255,255,255,1.0); font-size:12px;  text-overflow: ellipsis}
.musicplayer .player .info  .artist {max-width:100px; overflow:hidden; white-space:nowrap;  float:left; line-height:40px; color:rgba(255,255,255,0.7); font-size:12px; margin-left:8px;  text-overflow: ellipsis}

.musicplayer .player .controls { position:absolute; top:4px; left:0; }
.musicplayer .player .controls > div { float:left; width:32px; height:32px; cursor:pointer; }
.musicplayer .player .controls > div.rew { background:url(/image/musicplayer/rewind.png) no-repeat 0 0; background-size:contain; }
.musicplayer .player .controls > div.play { background:url(/image/musicplayer/play.png) no-repeat 0 0; background-size:contain; }
.musicplayer .player .controls > div.pause {display:none; background:url(/image/musicplayer/pause.png) no-repeat 0 0; background-size:contain; }
.musicplayer .player.playing .controls > div.pause {display:block; background:url(/image/musicplayer/pause.png) no-repeat 0 0; background-size:contain; }
.musicplayer .player.playing .controls > div.play {display:none; background:url(/image/musicplayer/pause.png) no-repeat 0 0; background-size:contain; }
.musicplayer .player .controls > div.fwd { background:url(/image/musicplayer/next.png) no-repeat 0 0; background-size:contain; }
.musicplayer .player .controls > div.stop { background:url(/image/musicplayer/stop.png) no-repeat 0 0; background-size:contain; }

.musicplayer .player .volume { position:relative; position:absolute; left:180px; width:88px; height:4px; background:rgba(255,255,255,0.5);top:50%; margin-top:-2px; }
.musicplayer .player.mute .volume-btn {z-index:2; cursor:pointer; position:absolute; top:50%; margin-top:-10px; left:-28px; width:20px; height:20px; position:relative; background: url(/image/musicplayer/volume-off.png) no-repeat; background-size:contain;}
.musicplayer .player .volume-btn {z-index:1; cursor:pointer; position:absolute; top:50%; margin-top:-10px; left:-28px; width:20px; height:20px; position:relative; background: url(/image/musicplayer/volume-up.png) no-repeat; background-size:contain; }
.musicplayer .player .volume-adjust {cursor:pointer; height: 4px; position: relative; width: 100%; background:rgba(255,255,255,0.5); position:absolute; top:0; left:0; }
.musicplayer .player .volume-adjust > div > div { cursor:pointer; height: 4px; background:rgba(255,255,255,1.0); }

.musicplayer .player .progressbar {cursor:pointer; width:340px; height:6px; background:rgba(255,255,255,1.0); position:absolute; top:50%; margin-top:-3px; right:120px;}
.musicplayer .player .novolume .progressbar { color:#fff; right:0;}
.musicplayer .player .progressbar div { width: 0%; height: 6px; position: absolute; left: 0; top: 0; }
.musicplayer .player .bar-loaded { cursor:pointer; background:rgba(255,255,255,0.5); z-index:1;}
.musicplayer .player .bar-played { cursor:pointer; background: #3a80ff; z-index: 2; }
.musicplayer .player .timeHolder {color: #ffffff; font-size: 12px; line-height:40px; position: absolute; right:44px;}
.musicplayer .player .timeHolder > div { float:left; }

.musicplayer .player .btn-playlist {background: url(/image/musicplayer/playlist.png) no-repeat; background-size:contain; cursor: pointer; width:32px;  height: 32px;  position: absolute; top: 5px; right:0;}

.musicplayer .playlist { display:none; position:absolute; z-index:1; padding:24px; width:1100px; left:50%; top:36px; margin-left:-550px; background:#fff; height:auto; border-radius:16px; box-shadow:0px 1px 8px rgba(0,0,0,0.2);}
.musicplayer .playlist.hidden { display:block;}
.musicplayer .playlist .inner-wrap { display:inline-block; width:100%; height:240px; overflow-y:scroll; }
.musicplayer .playlist .inner-wrap .list-btn {display:inline-block; width:100%; height:auto; margin-bottom:4px;}
.musicplayer .playlist .inner-wrap .list-btn li button { transition:all 0.5s; min-width:40px; border:1px solid #161616; color:#161616; background:#fff; font-size:11px; padding:4px 12px; font-weight:600;}
.musicplayer .playlist .inner-wrap .list-btn li button:hover { background:#161616; color:#fff;}
.musicplayer .playlist .inner-wrap .list-btn li.select-all button { float:left; margin-right:4px; position:relative;}
.musicplayer .playlist .inner-wrap .list-btn li.select-all button input {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0;}
.musicplayer .playlist .inner-wrap .list-btn li.play button { float:left; }
.musicplayer .playlist .inner-wrap .list-btn li.play button:before { width:16px; height:16px; content:''; display:block; float:left; background: url(/image/musicplayer/icon_btn_play.png) no-repeat; background-size:contain; margin-right:4px; }
.musicplayer .playlist .inner-wrap .list-btn li.delete button { float:right; }

.musicplayer .playlist .inner-wrap .list-header { display:table; table-layout:fixed; width:100%; height:32px; background:#e9e9e9; }
.musicplayer .playlist .inner-wrap .list-header li { display:table-cell; line-height:32px; font-size:11px; color:#a6a6a6; text-align:left; }
.musicplayer .playlist .inner-wrap .list-header li.checkbox { padding-left:16px; width:80px;}
.musicplayer .playlist .inner-wrap .list-header li.track { width:600px;}

.musicplayer .playlist .inner-wrap .list { transition:all 0.5s; display:table; table-layout:fixed; width:100%; height:32px; border-bottom:1px solid #e9e9e9; }
.musicplayer .playlist .inner-wrap .list li { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:table-cell; line-height:40px; font-size:12px; color:#565656; text-align:left; }
.musicplayer .playlist .inner-wrap .list li.checkbox { padding-left:16px;  width:80px;}
.musicplayer .playlist .inner-wrap .list li.track { width:600px;}
.musicplayer .playlist .inner-wrap .list li.track .music > a { font-weight:600;}
.musicplayer .playlist .inner-wrap .list li.track .music > a:before { width:16px; height:16px; content:''; display:block; float:left; background: url(/image/musicplayer/icon_btn_play.png) no-repeat; background-size:contain; margin-top:11px; margin-right:8px; }

.musicplayer .playlist .inner-wrap .list:hover { background:#f9f9f9; }

.musicplayer .playlist .inner-wrap .modal-close { text-indent:-9999px; position:absolute; bottom:16px; right:16px; width:40px; height:40px; background: url(/image/musicplayer/icon_modal_close.png) no-repeat; background-size:contain; cursor: pointer;  }