.v_music_box{margin-bottom:20px;font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif,"宋体";}
#player_container{width:100%;}
#player {
  height:auto;
  position: relative;
  padding:0;
  margin-left:1px;
}
#player::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 12px;
  z-index: 0;
}
#player .cover{
	position: relative;
	z-index: 1;
}
#player .cover img {
	width:100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}
#player .ctrl{
	width:100%;
	position:absolute;
	bottom:0px;
	background-color:#3C3C3C;
    background: -webkit-linear-gradient(top,rgba(60,60,60,0),rgba(60,60,60,0.4)); /*Safari 5.1-6*/
  background: -o-linear-gradient(bottom,rgba(60,60,60,0),rgba(60,60,60,0.4)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(bottom,rgba(60,60,60,0),rgba(60,60,60,0.4)); /*Fx 3.6-15*/
  background: linear-gradient(to bottom,rgba(60,60,60,0), rgba(60,60,60,0.4)); /*Standard*/
  padding:7px 0 15px 20px;
  line-height:25px;
}
#player .playing-current{
	margin:0;
	font-size:20px;
	color:#fff;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
	}
#player .playing-current .artist{
	display:block;
	font-size:14px;
	color:#EEECEA;
	opacity:0.8;
	text-shadow: 0 1px 3px rgba(0,0,0,0.4)
}
#player .playing-current .artist-dash{
		display:none;
	}
p.album-title{
	font-size:16px;
	color:#fff;
	margin:0;
}
#player .icon {
  vertical-align:middle;
  display:inline-block;
  background-size:100% auto !important;
  opacity: 1;
  filter:alpha(opacity=100);
  cursor:pointer;
  position:relative;
}
#player .icon[title]:hover::after {
	content:attr(title);
	position:absolute;
	bottom:calc(100% + 4px);
	left:50%;
	transform:translateX(-50%);
	background:rgba(var(--accent-rgb), 0.9);
	color:#fff;
	padding:2px 7px;
	border-radius:3px;
	font-size:11px;
	line-height:1.4;
	white-space:nowrap;
	pointer-events:none;
	z-index:999;
}
#player .icon:hover, #player .icon.enable {
  opacity: .8;
  filter:alpha(opacity=80)
}
#player  .rewind {
	width:22px;height:19px;
	position:relative;
	cursor:pointer;
	z-index: 1;
}
#player .rewind::before {
	content:'';
	position:absolute;
	top:50%;left:50%;
	transform:translate(-50%,-50%);
	width:0;height:0;
	border-style:solid;
	border-width:6px 10px 6px 0;
	border-color:transparent rgba(255,255,255,0.85) transparent transparent;
	margin-left:4px;
	transition:all .2s ease;
}
#player .rewind i {
	position:absolute;
	top:50%;left:50%;
	transform:translate(-50%,-50%);
	width:3px;height:10px;
	background:rgba(255,255,255,0.85);
	margin-left:12px;
	transition:all .2s ease;
}
#player .rewind:hover::before,
#player .rewind:hover i {
	filter:brightness(1.5) drop-shadow(0 0 4px rgba(255,255,255,0.6));
	transform:translate(-50%,-50%) scale(1.2);
}
#player .rewind:active::before,
#player .rewind:active i {
	opacity:.8;
	transform:translate(-50%,-50%) scale(0.9);
}
#player  .playback {
  width:36px;height:36px;margin:0 14px;
  position:relative;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#player .playback::before {
	content:'';
	position:absolute;
	top:50%;left:55%;
	transform:translate(-50%,-50%);
	width:0;height:0;
	border-style:solid;
	border-width:9px 0 9px 16px;
	border-color:transparent transparent transparent rgba(255,255,255,0.85);
	transition:all .2s ease;
}
#player .playback:hover::before { opacity:1; transform:translate(-50%,-50%) scale(1.12); }
#player .playback:active::before { transform:translate(-50%,-50%) scale(0.85); }
#player .playback.playing::before {
	width:4px;height:16px;
	background:rgba(255,255,255,0.85);
	box-shadow:8px 0 0 rgba(255,255,255,0.85);
	border:none;
	left:50%;
	margin-left:-6px;
	top:50%;
}
#player .playback.playing:hover::before { opacity:1; transform:translate(-50%,-50%) scale(1.1); }
#player .playback.playing:active::before { transform:translate(-50%,-50%) scale(0.85); }
#player .fastforward {
	width:22px;height:19px;
	position:relative;
	cursor:pointer;
	z-index: 1;
}
#player .fastforward::before {
	content:'';
	position:absolute;
	top:50%;left:50%;
	transform:translate(-50%,-50%);
	width:0;height:0;
	border-style:solid;
	border-width:6px 0 6px 10px;
	border-color:transparent transparent transparent rgba(255,255,255,0.85);
	margin-left:-4px;
	transition:all .2s ease;
}
#player .fastforward i {
	position:absolute;
	top:50%;left:50%;
	transform:translate(-50%,-50%);
	width:3px;height:10px;
	background:rgba(255,255,255,0.85);
	margin-left:-12px;
	transition:all .2s ease;
}
#player .fastforward:hover::before,
#player .fastforward:hover i {
	filter:brightness(1.5) drop-shadow(0 0 4px rgba(255,255,255,0.6));
	transform:translate(-50%,-50%) scale(1.2);
}
#player .fastforward:active::before,
#player .fastforward:active i {
	opacity:.8;
	transform:translate(-50%,-50%) scale(0.9);
}
#player .repeat {
	width:24px;height:24px;
	position:relative;cursor:pointer;
	font-size:16px;line-height:24px;text-align:center;color:rgba(255,255,255,0.7);
	transition:color .2s;
}
#player .repeat:hover {color:#fff;}
#player .repeat:before {content:'↻';}
#player .repeat.once {color:#6d4daf;opacity:1;}
#player .repeat.once:hover {color:#8b6fd4;}
#player .repeat.all {color:#6d4daf;opacity:1;}
#player .repeat.all:hover {color:#8b6fd4;}
#player .repeat.all:before {content:'↺';}
#player .shuffle {
	width:24px;height:24px;
	position:relative;cursor:pointer;
	font-size:14px;line-height:24px;text-align:center;color:rgba(255,255,255,0.7);
	transition:color .2s;
}
#player .shuffle:hover {color:#fff;}
#player .shuffle:before {content:'⇄';}
#player .shuffle.enable {color:#6d4daf;opacity:1;}
#player .shuffle.enable:hover {color:#8b6fd4;}
#player  .progress {
	border-radius:0;
	position:absolute;
	right:0;bottom:0px;
	overflow:visible;
	width:100%;
	height:auto;
	margin:0;
	z-index:99;
}
.play-btns{
	position:absolute;
	right:10px;
	bottom: 22px;
	z-index:10;
	display:flex;
	align-items:center;
	gap:6px;
}
#player .play-list-bar{
	position:absolute;left:15px;bottom:-45px;width:22px;height:18px;cursor:pointer;z-index:1;
}
#player .play-list-bar::before{
	content:'';
	position:absolute;
	top:50%;left:50%;
	transform:translate(-50%,-50%);
	width:18px;height:2px;
	background:var(--accent, rgba(255,255,255,0.85));
	box-shadow:0 6px 0 var(--accent, rgba(255,255,255,0.85)),0 -6px 0 var(--accent, rgba(255,255,255,0.85));
	transition:all .2s ease;
}
#player .play-list-bar:hover::before{
	filter:brightness(1.5) drop-shadow(0 0 4px rgba(255,255,255,0.5));
	transform:translate(-50%,-50%) scale(1.1);
}
#player .play-list-bar:active::before{
	opacity:.8;
	transform:translate(-50%,-50%) scale(0.9);
}


.slider {
  background: #cdcdcd;
  height: 14px;
  position: relative;
  cursor: pointer;
  border-radius: 7px;
}
.slider a,.slider span{
  background: #ed5d6e;
  margin-left:0;
  position: absolute;
  display:none;
  line-height: 17px;
  font-size:12px;
  border-radius:8px;
  top:-7px;
  left:0;
  width:78px;
  color:#fff;
  outline:none;
  text-align:center;
}
.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;
  */
}
.slider .loaded {
  background-color:#666666;
}
.slider .pace {
  background-color:#ed5d6e;
    background: -webkit-linear-gradient(left,rgba(236,87,105,0.3),rgba(236,87,105,1)); /*Safari 5.1-6*/
  background: -o-linear-gradient(right,rgba(236,87,105,0.3),rgba(236,87,105,1)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(right,rgba(236,87,105,0.3),rgba(236,87,105,1)); /*Fx 3.6-15*/
  background: linear-gradient(to right, rgba(236,87,105,0.3), rgba(236,87,105,1)); /*Standard*/
}

.slider .time-tip {
  display: none;
}
.slider .time-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  text-shadow: 0 0 3px rgba(0,0,0,0.6);
}
.slider .progress-range,
.slider .volume-range {
  position: absolute;
  top: -4px;
  left: 0;
  width: 100%;
  height: 16px;
  opacity: 1;
  cursor: pointer;
  z-index: 100;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.slider .progress-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6d4daf;
  border: 2px solid rgba(255,255,255,0.6);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(109,77,175,0.5);
}
.slider .progress-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6d4daf;
  border: 2px solid rgba(255,255,255,0.6);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(109,77,175,0.5);
}
.slider .progress-range::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}
.slider .progress-range::-moz-range-track {
  height: 4px;
  background: transparent;
}

#playlist {margin:0 0 0 0;padding: 0;min-height:100%;max-height:240px;overflow-y:auto;position:relative;z-index:1;
	background: rgba(255,255,255,0.22);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
#playlist ul{
	list-style:none;
	margin:0;
	padding:0;
}
#playlist li {
  height:45px;line-height:45px;position:relative;font-size:16px;color:#6e6e6e;font-weight:600;
  border-radius:8px;margin:2px 6px;
}
#playlist li span{display:inline-block;font-weight:100;}
#playlist li .cur{width:4px;height:25px;position:absolute;left:0;top:10px;}
#playlist li.playing .cur{background:#ec5769;}
#playlist li .playlist-index{line-height:45px;color:#c5c6cb;padding:0 5% 0 6%;}
#playlist li .playlist-tit-sm{display:inline-block;width: 200px;}
#playlist .playlist-art{line-height:45px;font-size:12px;color:#808080;}
#playlist .playlist-dl{
	display:block;
	position:absolute;
	right:5%;
	top:50%;
	transform:translateY(-50%);
	width:20px;height:20px;
	opacity:0.5;
	cursor:pointer;
	transition:all .2s ease;
}
#playlist .playlist-dl::before{
	content:'';
	position:absolute;
	top:45%;left:50%;
	transform:translate(-50%,-50%) rotate(45deg);
	width:7px;height:7px;
	border:solid 2px var(--accent, #6d4daf);
	border-top:0;border-left:0;
}
#playlist .playlist-dl::after{
	content:'';
	position:absolute;
	top:20%;left:50%;
	transform:translateX(-50%);
	width:2px;height:6px;
	background:var(--accent, #6d4daf);
}
#playlist .playlist-dl:hover {
	opacity:1;
	transform:translateY(-50%) scale(1.15);
}
#playlist li:hover {
  color: #333;
}
#playlist li .download-file{
	display: inline-block;
	font-size:12px;
	position: absolute;
	right:16px;
	top:10px;
	width:140px;
}
.v_music_box #playlist li.playing {
  background-color: rgba(109,77,175,0.5);
  color: #fff;
  animation: playlistBreath 3s ease-in-out infinite;
}
.v_music_box #playlist li.playing .playlist-tit-sm {
  color: rgba(255,255,255,0.9);
}
.v_music_box #playlist li.playing .playlist-art {
  color: rgba(255,255,255,0.65);
}
.v_music_box #playlist li.playing .playlist-dl::before {
  border-color: transparent rgba(255,255,255,0.85) rgba(255,255,255,0.85) transparent;
}
.v_music_box #playlist li.playing .playlist-dl::after {
  background: rgba(255,255,255,0.85);
}
.v_music_box #playlist li.playing .cur {
  display: none;
}
.lyric{
	max-height:250px;
	height:250px;
	text-align:center;
	padding:28px 5px;
	font-size:13px;
	line-height:26px;
	color:#888;
	overflow-y:auto;
	position:relative;
	z-index:1;
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
	mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
}
.lyric.no-lyric{
	height:16px;
	padding:0;
	-webkit-mask-image:none;
	mask-image:none;
}
footer {
  position: relative;
  font-size: 12px;
  color: white;
  margin-top:160px;
  text-shadow: 0 1px 2px #000;
  text-align: center;
}
footer a {
  color: #fff;
  font-weight: bold;
}
footer a:hover {
  text-decoration: none;
}
.music_copy{height:58px;padding:0 23px 0 55px;position:relative;background:url(../images/mc-f-logo.png) #f1f1f1 no-repeat 22px center;background-size:auto 28px;box-sizing:content-box;color:#686868;}
.music_copy p{height:58px;background:url(../images/w-buer.png) no-repeat 3px center;background-size:auto 18px;}
.music_copy span{position:absolute;right:23px;top:0;line-height:58px;}
p.playlist-album-title{
	padding:20px 0 10px 12%;
	font-size:24px;
	color:#EC5769
}

@media(min-width:768px){
	#player_container{
		width: 48%;
		position: relative;
	}
	#player .play-list-bar{
		display:none;
	}
	#playlist {
		margin:0;
		position: absolute;
		right: -108.3%;
		top: 0;
		width: 105%;
		max-height:100%;
	}
	#playlist li i{
		display:none;
	}
	#playlist li .playlist-index{
		padding-left:6%;
	}
}
@media(max-width:767px){
	#playlist{
		padding:0;
		max-height:none;
		overflow-y:visible;
	}
	#player .play-list-bar{
		display:none;
	}
	#playlist li{
		border-top:solid 1px #e6e6e6;
		height:auto;
		line-height:22px;
		padding:10px 0;
		border-radius:8px;margin:2px 6px;
	}
	#playlist li .playlist-index{
		float:left;
	}
	.playlist-tit-xs i{
		font-size:12px;
		font-style:normal;
		font-weight:100;
		color:#808080;
	}
	#playlist li .cur{
		height:100%;
		top:0;
	}
	#playlist .playlist-art{
		display:none;
	}
	#playlist li .playlist-index {
		font-style:italic;
	}
	#playlist li.playing .playlist-index{
		color: rgba(255,255,255,0.6);
	}
	.download-file{
		display:none !important;
	}
	#playlist li.playing .playlist-tit-xs i{
		color: rgba(255,255,255,0.65);
	}
	#playlist .playing .playlist-dl{
		opacity:0.85;
	}
	#playlist li.playing .playlist-dl::before{
		border-color: transparent rgba(255,255,255,0.85) rgba(255,255,255,0.85) transparent;
	}
	#playlist li.playing .playlist-dl::after{
		background: rgba(255,255,255,0.85);
	}
	#player .playing-current {
		font-size:16px;
		text-shadow: 0 1px 3px rgba(0,0,0,0.5);
		max-width: 70%;
	}
	#player .playing-current .artist{
		display:block;
		font-size:13px;
		color:#fff;
		text-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
	#player .playing-current .artist-dash{
		display:none;
	}
	.play-btns{
		bottom:13px;
	}
	#player .shuffle{
		display:none;
	}
	#player .repeat{
		width:20px;height:20px;
		font-size:12px;line-height:20px;
	}
}

@keyframes playlistBreath {
  0%, 100% { box-shadow: inset 0 0 4px rgba(255,255,255,0.05); }
  50% { box-shadow: inset 0 0 16px rgba(255,255,255,0.15); }
}