@import "reset.css";
/*  */
#loading {
	display:block;
	background:#1a1a1a url(../images/loading.gif) center no-repeat;
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:999999;
}
#loading p {
	width:100%;
	height:50px;
	text-align:center;
	position:absolute;
	top:50%;
	margin-top:-15px;
	left:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size:1.5em;
	color:#999;
	z-index:999999999;
}
/* index */
.p-index {position:relative;height: 100%; width: 100%; min-width:320px;max-width:640px;margin:0 auto;overflow: hidden;display: none; transform-style: preserve-3d;-webkit-transform-origin: 0px 0px 0px;-webkit-perspective: 200px; -webkit-backface-visibility: hidden; }
.portrait .p-index { -webkit-transform: scale(0.4); margin-top: -44%; }
/* m- */
.m-page{position:absolute;left:0;top:0%;height:100%;width:100%;min-width:320px;max-width:640px;-webkit-transform-origin: 50px 0px 0px;display:none;}
.m-page.cur{ display:block;z-index:3;}

.m-img{width:100%;height:100%;}
/* page0 */
.m-img1 { 
	background: url(../images/mapPage.jpg) top center no-repeat;
	background-size: 100% 100%;
	position: relative;
}
/* mapAnamate */
.mapAnamate {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.mapAnamate p:nth-child(1) {
	width: 16%;
	height: 8.77%;
	/*border: 1px solid red;*/
	background: url(../images/map1_windmill.png) center center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 74.98%;
	left: 0.8%;
}
.windmill-animate {
	-webkit-animation: rotate360 3s linear infinite;
}
@-webkit-keyframes rotate360 {
	0% { 
		-webkit-transform-origin: 50% 50%;
		-webkit-transform: rotate(0deg);
	}
	100% { 
		-webkit-transform-origin: 50% 50%;
		-webkit-transform: rotate(360deg);
	}
}
.mapAnamate p:nth-child(2) {
	width: 30%;
	height: 15.44%;
	position: absolute;
	top: 58.69%;
	left: 67.6%;
}
.mapAnamate p:nth-child(2) img {
	width: auto;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.mapAnamate p:nth-child(2) img:nth-child(2) {
	top: 0.2%;
	opacity: 0;
}
.dog-animate {
	-webkit-animation: fadeInRight 2s .2s ease infinite;
}
@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(3px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}
.mapAnamate p:nth-child(3) {
	width: 10%;
	height: 3.82%;
	background: url(../images/map3_bird.png) center center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 57.42%;
	left: 2%;
}
.bird-animate {
	-webkit-animation: birdFly 8s .2s linear infinite;
}
@-webkit-keyframes birdFly {
	0% {
		-webkit-transform: translateX(0);
	}
	50%{
		-webkit-transform: translateX(80px);
	}
	51%{
		-webkit-transform: translateX(82px) rotateY(180deg);
		/*-webkit-transform-origin: center center;*/
	}
	100%{
		-webkit-transform: translateX(0) rotateY(180deg);
	}
}
/*.mapAnamate p:nth-child(4) {
	width: 9%;
	height: 3.97%;
	background: url(../images/map4_butterfly.png) 0 0 no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 35.6%;
	left: 70.8%;
}*/
.mapAnamate p:nth-child(4) {
	width: 9%;
	height: 3.97%;
	position: absolute;
	top: 35.6%;
	left: 70.8%;
}
.mapAnamate p:nth-child(4) em:nth-child(1) {
	display: block;
	width: 300%;
	height: 200%;
	position: absolute;
	top: 100%;
	left: 0;
	border-radius: 200%;
}
.mapAnamate p:nth-child(4) em:nth-child(2) {
	display: block;
	width: 100%;
	height: 100%;
	background: url(../images/map4_butterfly.png) 0 0 no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 100%;
	left: 0;
}
.butterfly-animate {
	transform-origin: 40px 26px;
	-webkit-transform-origin: 40px 36px;
	-webkit-animation: rotation 6s linear infinite;
}
@-webkit-keyframes rotation {
	to {
		-webkit-transform: rotate(360deg);
	}
}
.mapAnamate p:nth-child(5) {
	width: 14%;
	height: 8.02%;
	background: url(../images/map5_elephant.png) top left no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 31.63%;
	left: 11.73%;
}
.elephant-animate {
	-webkit-animation: elephantShake 3s linear infinite alternate;
	-webkit-transform-origin: top center;
}
@-webkit-keyframes elephantShake {
	0% {
		-webkit-transform: rotate(0);
	}
	30% {
		-webkit-transform: rotate(10deg);
	}
	60% {
			-webkit-transform: rotate(0);
	}
	100% {
			-webkit-transform: rotate(-10deg);
	}
}
.mapAnamate p:nth-child(6) {
	width: 7%;
	height: 4.12%;
	background: url(../images/map6_shark.png) 0 0 no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 11.01%;
	left: 81.46%;
}
.shark-animate {
	transform-origin: top center;
	-webkit-transform-origin: top center;
	-webkit-animation: sharkMove 8s linear infinite;
}
@-webkit-keyframes sharkMove {
	0% {
		-webkit-transform: rotateY(0) translate(0);
	}
	10% {
		-webkit-transform: rotateY(-60deg) translate(-60px,20px);
	}
	20% {
		-webkit-transform: rotateY(-80deg) translate(-100px,50px);
	}
	30% {
		-webkit-transform: rotateY(-120deg) translate(-60px,50px);
	}
	40% {
		-webkit-transform: rotateY(-180deg) translate(-100px,50px);
	}
	60% {
		-webkit-transform: rotateY(-120deg) translate(-80px,20px);
	}
	70% {
		-webkit-transform: rotateY(-120deg) translate(-100px,0px);
	}
	80% {
		-webkit-transform: rotateY(-180deg) translate(-100px,0);
	}
	82% {
		-webkit-transform: rotateY(-270deg) translate(-100px,0);
	}
	92% {
		-webkit-transform: rotateY(0deg) translate(60px,0);
	}
	100% {
		-webkit-transform: rotateY(0deg) translate(0px,0);
	}
	
}
.mapAnamate p:nth-child(7) {
	width: 15%;
	height: 14.24%;
	background: url(../images/map7_feedingBottle.png) center center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 5.99%;
	left: 6.53%;
	z-index: 3;
}
.feedingBottle-animate {
	transform-origin: center center;
	-webkit-transform-origin: center center;
	-webkit-animation: feedingBottleShake .5s linear infinite alternate;
}
@-webkit-keyframes feedingBottleShake {
	0% {
		-webkit-transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(20deg);
	}
}
/* mapLocation */
.mapLocation {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.mapLocation em:nth-child(10) {
	display: block;
	width: 16%;
	height: 6.14%;
	background: url(../images/map7_goal.png) top left no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 18.14%;
	left: 15.06%;
	z-index: 3;
}
.mapLocation p {
	width: 15%;
	height: 8.32%;
	background-image: url(../images/map_round1.png);
	background-position: top center;
	background-repeat: no-repeat;
	/*background: url(../images/map_round1.png) top center no-repeat;*/
	background-size: auto 100%;
	font-weight: bold;
	color: #fff;
	text-align: center;
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	position: absolute;
}
.mapLocation p:nth-child(1) {
	font-size: 0.85rem;
	top: 88.6%;
	left: 50.93%;
}
.mapLocation p:nth-child(2) {
	font-size: 0.9rem;
	top: 71.06%;
	left: 66.26%;
}
.mapLocation p:nth-child(3) {
	font-size: 0.9rem;
	top: 59.22%;
	left: 27.46%;
}
.mapLocation p:nth-child(4) {
	font-size: 0.7rem;
	top: 37.35%;
	left: 52.4%;
}
.mapLocation p:nth-child(5) {
	font-size: 0.9rem;
	top: 27.43%;
	left: 25.33%;
}
.mapLocation p:nth-child(6) {
	font-size: 0.75rem;
	top: 15.36%;
	left: 62.26%;
}
.mapLocation p:nth-child(7) {
	font-size: 0.58rem;
	line-height: 0.65rem;
	top: 11.39%;
	left: 24.8%;
	z-index: 2;
}
.mapLocation em:nth-child(8) {
	display: block;
	width: 12%;
	height: 7.64%;
	background: url(../images/map_location.png) top left no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 83.95%;
	left: 53%;
	z-index: 4;
}
.mapLocation a:nth-child(9) {
	display: block;
	width: 13%;
	height: 4.42%;
	background: url(../images/map_go.png) top left no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 78.26%;
	left: 52.5%;
	z-index: 4;
	-webkit-animation:pulse 1.6s ease infinite;
}
@-webkit-keyframes pulse{
0%{-webkit-transform:scale(1)}
50%{-webkit-transform:scale(1.2)}
100%{-webkit-transform:scale(1)}
}
/* content */
.content {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
	/*display:none;*/
}
.content ul {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.content li {
	width: 94%;
	height: 16%;
	background: url(../images/titleBg.png) top center no-repeat;
	background-size: 100% 100%;
	margin: 5% 3%;
}
.content li:nth-child(1) {
	margin-top: 24%;
}
.content li h2 {
	width: 100%;
	font-size: 1.2rem;
	color: #633510;
	line-height: 2.6rem;
	font-weight: bold;
	text-align: center;
}
.content li p {
	width: 100%;
	font-size: 1.2rem;
	color: #633510;
	line-height: 1.2rem;
	text-align: center;
}
.content a {
	color: #633510;
	text-decoration: none;
}
/* btn-back*/
.content h6.btnBackSign {
	width: 6%;
	height: 4.19%;
	background: url(../images/btnBack_sign.png) top right no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 2.32%;
	right: 7.5%;
	-webkit-animation: floatUpDown 1s infinite alternate;
}
@-webkit-keyframes floatUpDown {
	0% { -webkit-transform: translateY(-5px);}
	/*70% { -webkit-transform: translateY(5px);}*/
	100% { -webkit-transform: translateY(0);}
}
.content h6.btnBackMap {
	width: 22%;
	height: 2.39%;
	background: url(../images/btnBack_map.png) top right no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 5.47%;
	right: 0;
}

/* farm */
.farm {
	background: url(../images/farmBg.jpg) top center no-repeat;
	background-size: 100% 100%;
}
.farm li {
	margin: 6% auto;
}
.farm li p {
	margin-top: 3.5%;
}
.farm li:nth-child(4) p {
	margin-top: 2%;
}
/* pet */
.pet {
	background: url(../images/petBg.jpg) top center no-repeat;
	background-size: 100% 100%;
}
.pet li {
	margin: 14% auto;
}
.pet li:nth-child(1) {
	margin-top: 32%;
}
.pet li p {
	margin-top: 3.5%;
}
/* zoo */
.zoo {
	background: url(../images/zooBg.jpg) top center no-repeat;
	background-size: 100% 100%;
}
.zoo li {
	width: 96%;
	height: 13.6%;
	background-size: 100% 100%;
	margin: 2% auto;
}
.zoo li:nth-child(1) {
	margin-top: 17%;
}
.zoo li h2 {
	font-size: 1.2rem;
	line-height: 2.2rem;
}
.zoo li p {
	margin-top: 2.6%;
	font-size: 1.1rem;
}
/* bird */
.bird {
	background: url(../images/birdBg.jpg) top center no-repeat;
	background-size: 100% 100%;
}
.bird li {
	margin: 14% auto;
}
.bird li:nth-child(1) {
	margin-top: 28%;
}
.bird li h2 {
	line-height: 2.6rem;
}
.bird li p {
	margin-top: 3%;
	font-size: 1.1rem;
}
/* babyAnimals */
.babyAnimals {
	background: url(../images/babyAnimalsBg.jpg) top center no-repeat;
	background-size: 100% 100%;
}
.babyAnimals li {
	margin: 10% auto;
}
.babyAnimals li h2 {
	line-height: 2.6rem;
}
.babyAnimals li p {
	margin-top: 3.5%;
}
.babyAnimals li:nth-child(1) {
	margin-top: 28%;
}
.babyAnimals li:nth-child(3) p {
	font-size: 1.1rem;
	line-height: 1.3rem;
}
/* ocean */
.ocean {
	background: url(../images/oceanBg.jpg) top center no-repeat;
	background-size: 100% 100%;
}
.ocean li {
	width: 90%;
	height: 13.6%;
	background-size: 100% 100%;
	margin: 4% auto;
}
.ocean li:nth-child(1) {
	margin-top: 20%;
}
.ocean li h2 {
	font-size: 1.2rem;
	line-height: 2.2rem;
}
.ocean li p {
	margin-top: 3%;
	font-size: 1.1rem;
}
.ocean li:nth-child(5) p {
	margin-top: 2.4%;
	font-size: 1rem;
}
/* insect */
.insect {
	background: url(../images/insectBg.jpg) top center no-repeat;
	background-size: 100% 100%;
}
.insect li {
	margin: 10% auto;
}
.insect li:nth-child(1) {
	margin-top: 28%;
}
.insect li h2 {
	font-size: 1.2rem;
	line-height: 2.6rem;
}
.insect li p {
	margin-top: 3%;
	font-size: 1.1rem;
}
/* 5s*/
@media only screen and (min-width: 320px) and (max-width: 359px) {
    .mapLocation p:nth-child(1) {
    	font-size: 0.7rem;
    }
    .mapLocation p:nth-child(2) {
    	font-size: 0.7rem;
    }
	.mapLocation p:nth-child(3) {
    	font-size: 0.7rem;
    }
	.mapLocation p:nth-child(4) {
    	font-size: 0.55rem;
    }
	.mapLocation p:nth-child(5) {
    	font-size: 0.7rem;
    }
	.mapLocation p:nth-child(6) {
    	font-size: 0.55rem;
    }
	.mapLocation p:nth-child(7) {
    	font-size: 0.45rem;
    	line-height: 0.5rem;
    }
	.content li h2 {
		line-height: 2rem;
	}
	.content li p {
		margin-top: 3%;
	}
	.farm li:nth-child(4) p {
		font-size: 1.1rem;
		margin-top: 1%;
		line-height: 1rem;
	}
	.zoo li h2 {
		line-height: 1.8rem;
	}
	.zoo li p {
		margin-top: 2%;
		font-size: 1rem;
	}
	.bird li p {
		font-size: 1rem;
	}
	.babyAnimals li:nth-child(3) p {
		font-size: 1rem;
	}
	.ocean li h2 {
		font-size: 1.2rem;
		line-height: 1.6rem;
	}
	.ocean li p {
		margin-top: 3%;
		font-size: 1.1rem;
	}
	.ocean li:nth-child(5) p {
		margin-top: 2.4%;
		font-size: 0.9rem;
	}
}
/* sony+mi+honor */
@media only screen and (min-width: 360px) and (max-width: 383px){
    .mapLocation p:nth-child(1) {
    	font-size: 0.7rem;
    }
    .mapLocation p:nth-child(2) {
    	font-size: 0.7rem;
    }
	.mapLocation p:nth-child(3) {
    	font-size: 0.7rem;
    }
	.mapLocation p:nth-child(4) {
    	font-size: 0.55rem;
    }
	.mapLocation p:nth-child(5) {
    	font-size: 0.7rem;
    }
	.mapLocation p:nth-child(6) {
    	font-size: 0.55rem;
    }
	.mapLocation p:nth-child(7) {
    	font-size: 0.45rem;
    	line-height: 0.5rem;
    }
    .content li h2 {
		line-height: 2.3rem;
	}
	.content li p {
		margin-top: 2.2%;
	}
	.farm li:nth-child(4) p {
		font-size: 1.1rem;
		margin-top: 0.2%;
		line-height: 1rem;
	}
	.zoo li h2 {
		line-height: 1.8rem;
	}
	.zoo li p {
		margin-top: 2%;
		font-size: 1rem;
	}
	.bird li p {
		font-size: 1rem;
	}
	.ocean li h2 {
		font-size: 1.2rem;
		line-height: 1.6rem;
	}
	.ocean li p {
		margin-top: 3%;
		font-size: 1.1rem;
	}
}