:root{
	--border-color:rgb(226 ,198,54) ;
}
#allmap {
		  width: 100%;
			height: 500px;
			 overflow: hidden;
			text-align: center;
		}
.player{
	position: relative;
	text-align: center;
	height: 400px;
}
.player .play-btn{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #FFFFFF;
	cursor: pointer;
}
.progress{
	cursor: pointer;
}
.Dream_img{
	position: absolute;
	background: url(../img/Chasing%20dreams.jpg) no-repeat center;
	background-size: cover;
	top:50%;
	left: 50%;
	border-radius: 50%;
	box-sizing: border-box;
	border:solid 2px var(--border-color);
	box-sizing: border-box;
	transform: translate(-50%,-50%);
	/* animation: dongtai 20s linear backwards infinite; */
	width: 250px;
	height: 250px;
}
.shanzha_img{
	position: absolute;
	background: url(../img/shanzhatree2016.jpg) no-repeat center;
	background-size: cover;
	top:50%;
	left: 50%;
	border-radius: 50%;
	box-sizing: border-box;
	border:solid 2px var(--border-color);
	box-sizing: border-box;
	transform: translate(-50%,-50%);
	/* animation: dongtai 20s linear backwards infinite; */
	width: 250px;
	height: 250px;
}
.huran_img{
	position: absolute;
	background: url(../img/huranzhijian.jpg) no-repeat center;
	background-size: cover;
	top:50%;
	left: 50%;
	border-radius: 50%;
	box-sizing: border-box;
	border:solid 2px var(--border-color);
	box-sizing: border-box;
	transform: translate(-50%,-50%);
	/* animation: dongtai 20s linear backwards infinite; */
	width: 250px;
	height: 250px;
}
.bici_img{
	position: absolute;
	background: url(../img/bici.jpg) no-repeat center;
	background-size: cover;
	top:50%;
	left: 50%;
	border-radius: 50%;
	box-sizing: border-box;
	border:solid 2px var(--border-color);
	box-sizing: border-box;
	transform: translate(-50%,-50%);
	/* animation: dongtai 20s linear backwards infinite; */
	width: 250px;
	height: 250px;
}
.dongtaibian{
	position: absolute;
	top:50%;
	left: 50%;
	border-radius: 50%;
	box-sizing: border-box;
	border:solid 2px var(--border-color);
	transform: translate(-50%,-50%);
	animation: dongtaibian 2s ease-in backwards infinite;
	width: 250px;
	height: 250px;
}
input.range{
	width: 100px;
	background-color: red;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}
.volume{
	display: inline-block;
	vertical-align: middle;
	font-size: 20px;
	cursor: pointer;
}
@keyframes dongtai{
	0%{
		transform: translate(-50%,-50%) rotate(0);
		
	}
	100%{
		transform: translate(-50%,-50%) rotate(360deg);
	}
}
@keyframes dongtaibian{
	0%{
		transform: translate(-50%,-50%) scale(1.0);
		border:solid 2px var(--border-color);
	}
	100%{
		transform: translate(-50%,-50%) scale(1.2);
		border:solid 2px rgba(0,0,0,0);
	}
}