.piano {
	width: 482px;
	margin-bottom: 4px;
	margin-right: auto;
	margin-left: auto;
}
.white {
	margin-left: 0px;
	padding-left: 1px;
	margin-top: -4px;
}
.keys li {
  float: left;
  display: block;
  border: 1px solid #333;
  text-align: center;
}
.white li {
	height: 260px;
	width: 66px;
	padding-top: 220px;
	cursor: pointer;
}
.w2 li {
	width: 19px;
	display: none;
}

.white li:hover {
  -webkit-box-shadow: 5px -3px 5px 5px #eee inset;
}

.black {
	top: 0;
	margin-left: 49px;
	color: #fff;
}
.black li {
	border-bottom-right-radius: 4px 5px;
	border-bottom-left-radius: 3px 5px;
	height: 130px;
	width: 36px;
	background: black;
	margin-right: 30px;
	font-size: 16px;
	padding-top: 18px;
	cursor: pointer;
	margin-left: 0px;
	position: relative;
	top: 130px;
	margin-top: -86px;
}
.black_li_W {
	background-color: #FFFFFF;
	visibility: hidden;
}
.black li:hover {
  -webkit-box-shadow: 2px 2px 1px 1px #bbb;
}
audio {
  visibility: hidden;
}

@media screen and (max-width: 520px) {
.piano {
	display: none;
}

.piano {
	width: max-content;
}
.white li {
	width: 32px;
}
.black li {
	width: 13px;
	font-size: 18px;
}
.black {
	top: 0;
	margin-left: 27px;
	color: #aeaeae;
}

}