@media screen{
	/*#player{
		margin-left: -320px;
		padding-left: 50%;
	}*/
	.intro_box {
		/*display: inline;
		position: absolute;*/
		float: right;
		padding: 0.5vw;
		width: calc(80vw - 660px);
	}
}
@media screen and (max-width:1024px){
	.intro_box {
		float: none;
		padding: 0.5vw;
		width: 100%;
	}
}
@media screen and (max-width:640px){
	#player{
		width: 100%;
	}
	.intro_box {
		float: none;
		padding: 0.5vw;
		width: 100%;
	}
}
.video_box {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
}
.config_box{
}
.config_box div{
	display: inline;
	position: relative;
}
.show_box {
	overflow: hidden;
}
.list {
	display: inline-block;
	width: 100%;
    padding: 0;
}
.simple li {
	width: calc((100% - 50px)/3);
}
.normal li {
	width: calc((100% - 50px)/5);
}
.bigpic li {
	width: calc((100% - 50px)/3);
}
.list li {
	cursor: pointer;
	float: left;
	/*margin-left: 21px;*/
	padding: 5px 0px 5px 10px;
	line-height: 25px;
}
.list li:hover {
	background: aliceblue;
}
.list p {
	overflow: hidden;
    text-overflow: ellipsis;
	white-space: nowrap;
	padding: unset;
}
li img{
	/*display: none;*/
	width: 100%;
	/*height: fit-content;*/
}
.page_link{
	width: 100%;
	text-align: center;
}
.page_link a{
	color: black;
	font-size: 12px;
	padding: 1px 5px 1px 5px;
	margin: 0 3px 0 3px
}
.page_link a:hover{
	background: lightblue;
}
.page_link .active{
	background: lightblue;
}
#title,#up{
	padding-right: 10px;
}
#oshirase{
	display: none;
}
#oshirase > p{
	font-size: 12px;
	color: gray;
}
#show_oshi{
	font-size: 12px;
	color: gray;
}
#hide_oshi{
	font-size: 12px;
	color: gray;
	display: none;
}
.play_bar{
	display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
	height: 40px;
	background-color: rgba(166,207,247,0.7);
    border-top: 1px solid #cecece;
}
.play_container{
	position: relative;
	margin: 0 auto;
	width: 80vw;
	padding: 0;
}
.play_container button{
	height: 40px;
	border: 0;
	margin: auto 10px;
	font: 0/0 a;
	color: transparent;
}
#prev_song{
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTcgNmgydjEySDdWNnptMiA2bDggNlY2bC04IDZ6Ii8+PC9zdmc+Cg==) no-repeat center;
}
#play_pause{
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTggNXYxNGwxMS03eiIvPjwvc3ZnPgo=) no-repeat 55% center;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTYgMTloNFY1SDZ2MTR6bTgtMTR2MTRoNFY1aC00eiIvPjwvc3ZnPgo=) no-repeat center;
}
#next_song{
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTcgMThsOC02LTgtNnYxMnptOC0xMnYxMmgyVjZoLTJ6Ii8+PC9zdmc+Cg==) no-repeat center;
}
#loop{
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iI2Y1MCIgZD0iTTEzLjU4NiAxN2wtOC04SDNWN2gzLjQxNGw4IDhIMTd2MmgtMy40MTR6TTMgMTVoMi41ODZsMi4yMDctMi4yMDcgMS40MTQgMS40MTQtMi41MDEgMi41MDEtLjI5My4yOTJIM3YtMnptMTQtNmgtMi41ODZsLTIuMjA3IDIuMjA3LTEuNDE0LTEuNDE0TDEzLjU4NiA3SDE3djJ6bTQgN2wtNCAzdi02bDQgM3ptMC04bC00IDNWNWw0IDN6Ii8+PC9zdmc+Cg==);
}
#random{
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTEyIDhIOWE0IDQgMCAxIDAgMCA4aDZhNCA0IDAgMCAwIDIuMTA0LTcuNDAzbDEuNzctMS4xOC4wMi4wMThBNiA2IDAgMCAxIDE1IDE4SDlBNiA2IDAgMSAxIDkgNmgzVjRsNCAzLTQgM1Y4eiIvPjwvc3ZnPgo=);
}