@font-face{
    font-family: "字体";
    src: url('/public/font/HYWH-85W.ttf');
}
*{
		margin: 0;padding: 0;
		box-sizing: border-box;
		font-family: "字体";
		font-weight: 300;color: #000;
	}
	html,body{
		background: rgb(244,244,244);margin: 0;padding: 0;
	}
	#topbar{
		background: rgb(39,39,39);
		position: fixed;text-align: center;top: 0;left: 0;
		width: 100vw;padding: 9px 0;
		color: #eee;height: 50px;
		font-weight: 200;z-index: 8;
	}
	.show-bar{
		width: 90vw;height: 40vw;margin: 15px auto;
		border: 1px solid #000;border-radius: 8px;
	}
	#page{
		position: relative;
	}
	.content{
		display: inline-block;
		width: 45%;margin: 6px 0 6px 3.3%;height: 30vw;
		background: #fff;padding: 12px;
		border: 1px solid #eee;border-radius: 8px;
		position: relative;background-size: 100%;
		z-index: 0;
	}
	.content .init{
		position: absolute;width: 100%;height: 100%;top: 0;left: 0;
		padding: 12px;background: rgb(255,255,255,0.5);
		overflow: hidden;transition: 0.6s;
	}
	#music{
		position: fixed;bottom: 0;width: 100vw;padding: 3px 20px;
		background: #fff;display: flex;justify-content: space-around;
		border-top: 1px solid #eee;
		z-index: 9;transition: 0.35s;
	}
	#music *{
		color: #fff;display: inline-block;font-size: 10px;font-weight: 200;
	}
	
	#tools{
		width: 100vw;display: flex;
		background: #fff;border-bottom: 1px solid #eee;
		position: fixed;top: 50px;height: 30px;
		overflow-x: auto;padding: 1px 5px;
		z-index: 8;
	}
	#tools li{
		display: inline-block;margin: 1px 15px;white-space: no-warp;
		flex: 0 0 auto;font-size: 14px;font-weight: 300;
	}
	.text244{
		color: rgb(122,122,122);
	}
	.c-text{
		text-align: center;
	}
	#player{
		width: 100vw;height: 100vh;
		position: fixed; top: 160vh;left: 0;
		background-color: rgb(255,255,255,0.7);
		background-size: cover;background-repeat: no-repeat;
		transition: 1s;display: block;background-position: center;
		z-index: 8;
	}
    #playerSection{
        display: block;min-width: 250px;
        position: absolute;top: 0;left: 0;
        padding: 10px;width: 50vw;height: 100vh;overflow: hidden;transition: 0.3s;
        background-image: linear-gradient(to bottom right,rgb(0,0,0,0.55),rgb(0,0,0,0));
    }
    #playerSection:hover{
        background-image: linear-gradient(to bottom right,rgb(0,0,0,0.4),rgb(0,0,0,0));
    }
    @media screen and (max-width:500px) {
        width: 100vw;
    }
		#boardMusicTitle{
			display: block;color: #fff;
			font-size: 9vw;font-weight: 300;
			padding: 16px;
			transition: 0.7s;
			/* For opacity */
		}
	#playerBG{
		background-repeat: no-repeat;background-size: 100%;
		transition: 0.7s;
		/* Also */
	}
	audio::-webkit-media-controls-time-remaining-display{
		color: #9cf;/*后数*/
	}
	audio::-webkit-media-controls-current-time-display{
		color: #08f;/*前数*/
	}
	audio::-webkit-media-controls-play-button{
		color: #08f;
	}
	.back{
		display: block;position: absolute;
		background: none;font-weight: 200;transition: 0.3s;border-radius: 50%;
		width: 50px;height: 50px;font-size: 14px;text-align: center;border: none;padding: 15px;
		outline: none;background: rgb(255,255,255,0.3);z-index: 10;
	}
	.back:hover{
		background: rgb(255,255,255,0.85);
	}
	#listenContent{
		position: fixed;right: 16px;bottom: 65px;background: #fff;
        border-radius: 50%;border: none;width: 55px;height: 55px;z-index: 10;
	visibility: hidden; transition: 0.3s;
    }
	.float-around{
		text-align: center;padding: 20px;border: none;
		outline: none;font-size: 25px;font-weight: 600;
        background-image: linear-gradient(to bottom right, #fb698f, #08f);background-clip:text;-webkit-background-clip:text;color: transparent;		
	}
    /*
    .float-around::before{
		position: absolute;background-color: #fff;
        		border-radius: 50%;border: none;
                width: 100%;height: 100%;
    }
    */
	#listenContent:active{opacity: 0.72;}
	.common-button,full-button:hover{
		background: #fff;border: 1px solid #08f;border-radius: 30px;
		outline: none;padding: 10px 18px;height: 48px;color: #08f;text-align: center;
		transition: 0.4s;margin: 8px;max-width:150px; max-height: 90px;
	}
		.full-button,.common-button:hover{
			background: #08f;border: 1px solid #eee;border-radius:  30px;
			outline: none;padding: 10px 18px;height: 48px;color: #fff;text-align: center;
			transition: 0.4s;margin: 8px;
		}
	.space{
		display: flex;justify-content: space-around;width: 100%;
	}
	.space>*{
		display: block;
	}
	.little-float-model-box{
		display: block;background: #fff;border: 1px solid #eee;border-radius: 8px;
		padding: 16px;position: fixed;
		top: 0;bottom: 0;left: 0;right: 0;margin: auto;
		width: 38vw; height: 38vw;overflow: auto;
		max-width: 300px;max-height: 300px;
		font-size: 15px;
		z-index: 29;
	}
	#playerInner{
		padding: 6px;color: #fff;font-size: 4.5vw;font-weight: 300;
	    transition: 0.3s;
	}
	#playerInner:hover,#musicUserSelect>*:active{color: rgb(255,255,255,0.68);}
	#musicUserSelect{
		display: flex;justify-content: space-around;
		position: absolute;
		bottom: 25vh;width: 100%;padding: 0 75px;margin: 0 auto;
	}
	#musicUserSelect>*{
		font-size: 21px;color:rgb(255, 255, 255);padding: 28px;border-radius: 50%;width: 49px;height: 49px;text-align: center;
	}
    #ifr{
        position: fixed;top: 0;left: 0;
        width: 100%;height: 100%;
        border: none;display: none;
        z-index: 9;
    }
    .load-more-music{
        background: rgb(222,222,222);color: #414141;padding: 16px;text-align: center;width: 100%;
    }
    .fa-heart-o{
        color: #fff !important;
        transition: 0.6s;
    }
    .fa-heart{
        color: red !important;
        transition: 0.6s;
    }