@charset "utf-8";

/* 游园路线 */

#xyhasm {
	height: 550px;
	background-image: url(../images/anbanner.jpg);
}

#xyhasm:after,
#xyhasm:before,
#xyhasm .xymait:before {
	display: none;
}

#xyhasm .xymait {
	position: relative;
	width: auto;
	height: auto;
	left: auto;
	right: auto;
	margin: 0 auto;
	top: auto;
	padding-top: 70px;
	background: none;
}

#xyhasm .xymait .touch_icon {
	display: block;
	width: 113px;
	margin: 0 auto;
}

#xyhasm .xymait h1 {
	color: #9a5834;
	letter-spacing: 0.18em;
	width: 292px;
	margin: 20px auto 20px;
	padding: 0;
}


#xyhasm .xymait h2 {
	font-size: 16px;
	text-transform: none;
	color: #9a5834;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-shadow: 5px -1px 5px rgba(255, 255, 255, 0.66);
	margin-bottom: 25px;
}

#xyhasm .xymait p {
	width: 475px;
	margin: 0 auto;
	font-size: 14px;
	line-height: 26px;
	text-align: center;
	padding-top: 15px;
	color: #fff;
	background-color: #9a5834;
	border-radius: 100px;
	padding: 15px 30px;
}

@media screen and (max-width: 800px) {
	#xyhasm {
		height: 300px;
	}

	#xyhasm::before {
		height: 145px;
		bottom: 0px;
		background-size: 498px 130px;
	}

	#xyhasm .xymait {
		padding-top: 30px;
	}

	#xyhasm .xymait .touch_icon {
		width: 40px;
	}

	#xyhasm .xymait h1 {
		width: 125px;
		margin: 3px auto 4px;
		padding: 0;
	}

	#xyhasm .xymait h2 {
		font-size: 10px;
		text-transform: none;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-shadow: 5px -1px 5px rgba(255, 255, 255, 0.8);
		margin-bottom: 14px;
	}

	#xyhasm .xymait p {
		width: 250px;
		font-size: 10px;
		line-height: 2;

	}
}


#xycont {
	width: 100%;
	position: relative;
	margin-top: -5vw;

}

#xycont .xyilla {
	position: absolute;
	overflow: hidden;
	top: -137px;
	left: 0;
	right: 0;
	width: 100%;
	height: 275px;
	z-index: 50;
}

#xycont .xyilla img {
	display: block;
	position: absolute;
	z-index: 150;
}

#xycont .xyilla .xylyun {
	width: 395px;
	top: 0;
	right: calc(50% + 441px);
}

#xycont .xyilla .xyryun {
	width: 446px;
	top: 0;
	left: calc(50% + 443px);
}


.baseimg {
	margin: 0;
	position: relative;
}

.baseimg img {
	z-index: 0;
}

.ficon {
	position: absolute;
	z-index: 10;
	transform: translate3d(-50%, -50%, 0);
}

.ficon a {
	width: 109px;
	height: 93px;
	display: block;
	cursor: pointer;
}

.ficon a.xypcoff {
	display: none;
}

.ficon a img {
	width: 65px;
}

@keyframes anime {
	0% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}

	50% {
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1);
	}

	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
}



.i01 {
	top: 20vw;
	left: 72vw;
	animation-delay: 500ms;
	-webkit-animation: anime 2s linear infinite;
	animation: anime 2s linear infinite;
}

.i02 {
	top: 42vw;
	left: 38vw;
	animation-delay: 1000ms;
	-webkit-animation: anime 2s linear infinite;
	animation: anime 2s linear infinite;
}

.i03 {
	top: 63vw;
	left: 70vw;
	animation-delay: 500ms;
	-webkit-animation: anime 2s linear infinite;
	animation: anime 2s linear infinite;
}

.i04 {
	top: 76vw;
	left: 29vw;
	-webkit-animation: anime 2s linear infinite;
	animation: anime 2s linear infinite;
}

.i05 {
	top: 86vw;
	left: 69vw;
	-webkit-animation: anime 2s linear infinite;
	animation: anime 2s linear infinite;
}

.i06 {
	top: 120vw;
	left: 65vw;
	animation-delay: 1000ms;
	-webkit-animation: anime 2s linear infinite;
	animation: anime 2s linear infinite;
}

.i07 {
	top: 145vw;
	left: 37vw;
	-webkit-animation: anime 2s linear infinite;
	animation: anime 2s linear infinite;
}

.i08 {
	top: 165vw;
	left: 63vw;
	animation-delay: 500ms;
	-webkit-animation: anime 2s linear infinite;
	animation: anime 2s linear infinite;
}



#footer {
	margin-top: -13vw;
}

#header,
#footer {
	z-index: 100;
}

@media screen and (max-width: 800px) {
	#xycont {
		margin-top: -6vw;
	}

	#xycont .xyilla {
		top: -28px;
		height: 80px;
	}

	#xycont .xyilla img {
		display: block;
		position: absolute;
		z-index: 150;
	}

	#xycont .xyilla .xylyun {
		width: 90px;
		top: 0;
		right: calc(100% - 56px);
	}

	#xycont .xyilla .xyryun {
		width: 100px;
		top: 0;
		left: calc(100% - 50px);
	}




	.ficon a {
		width: 49px;
		height: 42px;
		cursor: pointer;
	}

	.ficon a.xypcoff {
		display: block;
	}

	.ficon a img {
		width: 30px;
	}



	.i01 {
		top: 20vw;
		left: 70vw;
		animation-delay: 500ms;
		-webkit-animation: anime 2s linear infinite;
		animation: anime 2s linear infinite;
	}

	.i02 {
		top: 38vw;
		left: 35vw;
		animation-delay: 1000ms;
		-webkit-animation: anime 2s linear infinite;
		animation: anime 2s linear infinite;
	}

	.i03 {
		top: 57vw;
		left: 68vw;
		animation-delay: 500ms;
		-webkit-animation: anime 2s linear infinite;
		animation: anime 2s linear infinite;
	}

	.i04 {
		top: 72vw;
		left: 25vw;
		-webkit-animation: anime 2s linear infinite;
		animation: anime 2s linear infinite;
	}

	.i05 {
		top: 88vw;
		left: 66vw;
		-webkit-animation: anime 2s linear infinite;
		animation: anime 2s linear infinite;
	}

	.i06 {
		top: 121vw;
		left: 64vw;
		animation-delay: 1000ms;
		-webkit-animation: anime 2s linear infinite;
		animation: anime 2s linear infinite;
	}

	.i07 {
		top: 142vw;
		left: 36vw;
		-webkit-animation: anime 2s linear infinite;
		animation: anime 2s linear infinite;
	}

	.i08 {
		top: 159vw;
		left: 62vw;
		animation-delay: 500ms;
		-webkit-animation: anime 2s linear infinite;
		animation: anime 2s linear infinite;
	}

}

@media screen and (max-width: 500px) {
	#xycont {
		margin-top: -10vw;
	}

}