@-webkit-keyframes p1 {
	0% {
		background-color: #e62129;
		-webkit-box-shadow: 0 0 9px #e62129;
	}

	50% {
		background-color: #e62129;
		-webkit-box-shadow: 0 0 18px #e62129;
	}

	100% {
		background-color: #e62129;
		-webkit-box-shadow: 0 0 9px #e62129;
	}
}

@-webkit-keyframes p2 {
	0% {
		background-color: #151afa;
		-webkit-box-shadow: 0 0 9px #151afa;
	}

	50% {
		background-color: #151afa;
		-webkit-box-shadow: 0 0 18px #151afa;
	}

	100% {
		background-color: #151afa;
		-webkit-box-shadow: 0 0 9px #151afa;
	}
}

@-webkit-keyframes p3 {
	0% {
		background-color: #ff00ba;
		-webkit-box-shadow: 0 0 9px #ff00ba;
	}

	50% {
		background-color: #ff00ba;
		-webkit-box-shadow: 0 0 18px #ff00ba;
	}

	100% {
		background-color: #ff00ba;
		-webkit-box-shadow: 0 0 9px #ff00ba;
	}
}

@-webkit-keyframes p4 {
	0% {
		background-color: #15b1fa;
		-webkit-box-shadow: 0 0 9px #15b1fa;
	}

	50% {
		background-color: #15b1fa;
		-webkit-box-shadow: 0 0 18px #15b1fa;
	}

	100% {
		background-color: #15b1fa;
		-webkit-box-shadow: 0 0 9px #15b1fa;
	}
}

@-webkit-keyframes p5 {
	0% {
		background-color: #faac15;
		-webkit-box-shadow: 0 0 9px #faac15;
	}

	50% {
		background-color: #faac15;
		-webkit-box-shadow: 0 0 18px #faac15;
	}

	100% {
		background-color: #e62129;
		-webkit-box-shadow: 0 0 9px #faac15;
	}
}

@-webkit-keyframes p6 {
	0% {
		background-color: #5e2dff;
		-webkit-box-shadow: 0 0 9px #5e2dff;
	}

	50% {
		background-color: #5e2dff;
		-webkit-box-shadow: 0 0 18px #5e2dff;
	}

	100% {
		background-color: #5e2dff;
		-webkit-box-shadow: 0 0 9px #5e2dff;
	}
}

@-webkit-keyframes p7 {
	0% {
		background-color: #4dc600;
		-webkit-box-shadow: 0 0 9px #4dc600;
	}

	50% {
		background-color: #4dc600;
		-webkit-box-shadow: 0 0 18px #4dc600;
	}

	100% {
		background-color: #4dc600;
		-webkit-box-shadow: 0 0 9px #4dc600;
	}
}

@-webkit-keyframes scaleout {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.8;
	}

	100% {
		opacity: 1;
	}
}


.map {
	position: relative;
}

	.map img {
		z-index: 1;
	}

	.map .point {
		width: 100%;
		height: 100%;
	}


		.map .point img {
			position: absolute;
			z-index: 0;
			width: 6%;
			cursor: pointer;
			-webkit-animation-name: scaleout;
			-webkit-animation-duration: 3s;
			-webkit-animation-iteration-count: infinite;
		}


		.map .point .p1 {
			top: 42.5%;
			left: 29.5%;
		}

		.map .point .p2 {
			top: 53%;
			left: 54.5%;
			z-index: 2;
		}

		.map .point .p3 {
			top: 46.5%;
			left: 57.5%;
		}

		.map .point .p4 {
			top: 50.5%;
			left: 70%;
			z-index: 3;
		}

		.map .point .p5 {
			top: 43.5%;
			left: 68.5%;
		}

		.map .point .p6 {
			top: 34%;
			left: 67.5%;
			width: 4.5%;
		}

		.map .point .p7 {
			top: 46%;
			left: 76%;
			width: 5%;
		}


.msgbox {
	width: 40%;
	color: #FFF;
	padding: 1%;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 100;
	display: none;
}

	.msgbox p {
		padding: 0px;
		margin: 0px;
	}


.p11 {
	top: 28.5%;
	left: 12%;
	background-color: #e62129;
	-webkit-animation-name: p1;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
}

.p22 {
	top: 38.5%;
	left: 38%;
	background-color: #151afa;
	-webkit-animation-name: p2;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
}

.p33 {
	top: 31.5%;
	left: 40%;
	background-color: #ff00ba;
	-webkit-animation-name: p3;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
}

.p44 {
	top: 35%;
	left: 52%;
	background-color: #15b1fa;
	-webkit-animation-name: p4;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
}

.p55 {
	top: 28%;
	left: 50%;
	background-color: #faac15;
	-webkit-animation-name: p5;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
}

.p66 {
	top: 19%;
	left: 50%;
	background-color: #5e2dff;
	-webkit-animation-name: p6;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
}

.p77 {
	top: 31.5%;
	left: 57%;
	background-color: #4dc600;
	-webkit-animation-name: p7;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
}

.act {
	display: block;
}

@media screen and (max-width:750px ) {
	.p11 {
		top: 28%;
		left: 12%;
		width: 40%;
	}

	.p22 {
		top: 28%;
		left: 38%;
		width: 40%;
	}

	.p33 {
		top: 28%;
		left: 40%;
	}

	.p44 {
		top: 35%;
		left: 53%;
	}

	.p55 {
		top: 28%;
		left: 53%;
	}

	.p66 {
		top: 17%;
		left: 50%;
	}

	.p77 {
		top: 28%;
		left: 57%;
	}

	.msgbox {
		font-size: 12px;
	}
}



@media screen and (max-width:480px) {
	.p11 {
		top: 15%;
		left: 5%;
		width: 56%;
		padding: 2%;
	}

	.p22 {
		top: 26%;
		left: 30%;
		width: 56%;
		padding: 2%;
	}

	.p33 {
		top: 21%;
		left: 30%;
		width: 62%;
		padding: 2%;
	}

	.p44 {
		top: 25%;
		left: 30%;
		width: 62%;
		padding: 2%;
	}

	.p55 {
		top: 18%;
		left: 34%;
		width: 62%;
		padding: 2%;
	}

	.p66 {
		top: 8%;
		left: 34%;
		width: 62%;
		padding: 2%;
	}

	.p77 {
		top: 22%;
		left: 34%;
		width: 62%;
		padding: 2%;
	}

	.msgbox {
		font-size: 12px;
	}
}