#mymuisc{
	width: 100%;
	height: 100%;
	border: 1px solid white;
	display: block;
}

#muisc_imageBox{
	width: 100%;
	height: 65%;
	border: 1px solid black;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: end;
	background: linear-gradient(
	135deg,
	rgba(0, 0, 0, 0.8),
	rgba(1, 1, 1, 0.05)
	);
	box-sizing: border-box;
}
.line_box{
	display: flex;
	justify-content: space-around;
	align-items: end;
	margin-bottom: 5%;
	width: 100px;
	height: 80%;
	border: 0px solid black;
	border-bottom: 5px solid rgb(35, 165, 109);
}
.height_line{
	transition: height 			  0.1s ease,
				border-left-color 0.5s ease;
	margin-bottom: 10px;
	width: 1px;
	height: 10%;
	border-left: 10px solid hsl(156, 86%, 32%);
	border-left-color: hsl(156, 70%, 32%);
}
.muisc_image{
	width: 50%;
	height: 100%;
	border: 1px solid white;
	display: flex;
	justify-content: center;
	align-items: center;
}
#muisc_img{
	width: 180px;
	height: 180px;
	border: 40px solid rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	overflow: hidden;
	animation: roate_muisc 6s linear infinite;
}
@keyframes roate_muisc{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
#muisc_img>img{
	/* width: 100%; */
	height: 100%;
}

#muisc_controlBox{
	width: 100%;
	height: 35%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}


#muisc_hander_btts{
	width: 60%;
	height: 80%;
	border: 1px solid white;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: space-evenly;
}

.music_name{
	width: 100%;
	align-items: center;
	font-size: 26px;
	color: rgb(49, 208, 176);
	user-select: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

#progress{
	width: 280px;
	height: 24px;
	/* transition: all 0.3s ease; */
	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	outline: none;
	--h: 15px;
	--r: 17px;
	--fill: rgb(25, 129, 96);
	--empty: rgb(38, 186, 142);
	/* --ratio: 0%; */
	--bt_color: rgb(169, 255, 237);
	/* --data_ratio: 10%; */
}
#progress::-webkit-slider-runnable-track {
	height: var(--h);
	border-radius: var(--h);
	border: 2px solid rgba(0, 0, 0, 0.5);
	background: linear-gradient(to right,
		var(--fill) var(--ratio, 0%),
		var(--empty) 0
	);
}
#progress::-moz-range-track{
	height: var(--h);
	border-radius: calc(var(--h)/2);
	border: 2px solid rgb(57, 95, 83);
	background: linear-gradient(to right,
		var(--fill) var(--ratio, 0%),
		var(--empty) 0
	);
	box-sizing: border-box;
}
#progress::-webkit-slider-thumb{
	-webkit-appearance: none;
	appearance: none;
	width: var(--r);
	height: var(--r);
	border-radius: 50%;
	background: var(--bt_color);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
	margin-top: calc(var(--h) - var(--r));
}
#progress::-moz-range-thumb{
	width: var(--r);
	height: var(--r);
	border-radius: 50%;
	background: var(--bt_color);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
	border: none;
}

.music_time{
	color: rgb(41, 197, 130);
	width: 80%;
	height: 26px;
	display: flex;
	justify-content: space-between;
	padding: 0px 10px;
	box-sizing: border-box;
	font-size: 17px;
}

/* 音乐播放控件第一组 (播放， 上下音乐切换) */
.pair_btts_one{
	display: flex;
	width: 280px;
	align-items: center;
	justify-content: space-evenly;
}



.iconfont{
	font-size: 26px;
}
.icon-bofang-copy{
	color: rgb(38, 186, 142);
	text-align: center;
}
.icon-tingzhi-copy{
	color: rgb(43, 214, 163);
	text-align: center;
}
#start{
	width: 45px;
	height: 45px;
	border: 0px solid rgba(39, 191, 108, 0.5);
	border-radius: 50%;
	background-color: rgba(27, 107, 87, 0.7);
	box-sizing: border-box;
	transition: font-size 0.3s ease;
}
#muisc_hander_btts>button :hover{
	cursor: pointer;
}
#m_iconfont:hover{
	font-size: 28px;
}
#m_iconfont:active{
	font-size: 26px;
}
#start>span{
	margin-left: 17%;
	transition: all 0.2s ease;
}
.m_change_btt{
	width: 38px;
	height: 38px;
	border: 0px solid rgba(39, 191, 108, 0.5);
	border-radius: 50%;
	background-color: rgba(27, 107, 87, 0.7);
	box-sizing: border-box;
}
#m_icon_xia:hover{
	font-size: 32px;
}
#m_icon_xia:active{
	font-size: 28px;
}
.icon-xiayishou{
	text-align: center;
	font-size: 30px;
	color: rgb(38, 186, 142);
	transition: all 0.2s ease;
}
#m_icon_shang:hover{
	font-size: 32px;
}
#m_icon_shang:active{
	font-size: 28px;
}
.icon-shangyishou{
	text-align: center;
	font-size: 30px;
	color: rgb(38, 186, 142);
	transition: all 0.2s ease;
}
#progress:hover{
	cursor: pointer;
}