/* CSS Document */



/*Reset*/

* {

	vertical-align: baseline;

	font-weight: inherit;

	font-family: inherit;

	font-style: inherit;

	padding: 0;

	margin: 0;

	border: none;

}



body {

	font-family: STXihei, Microsoft YaHei, SimSun, Arial;

	font-size: 62.5%;

}



ol,

ul {

	list-style: none;

}



img {

	border: none;

	text-decoration: none;

	display: block;

}



h1,

h2,

h3,

h4,

h5,

h6 {

	font-weight: normal;

	font-size: 12px;

}



a {

	text-decoration: none;

}



a img,

:link img,

:visited img {

	border: 0px;

}



.clear {

	clear: both;

}



.clearfix:after {

	content: ".";

	display: block;

	height: 0;

	clear: both;

	visibility: hidden;

}



* html .clearfix {

	height: 1%;

}



*+html .clearfix {

	min-height: 1%;

}



/*basic*/

.fl {

	float: left;

}



.fr {

	float: right;

}



img {

	width: 100%;

}



/*main*/

html {

	height: 100%;

	width: 100%;

}



body {

	position: relative;

	height: 100%;

	width: 100%;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	touch-action: none;



	-webkit-touch-callout: none;

	/*系统默认菜单被禁用*/



	-webkit-user-select: none;

	/*webkit浏览器*/



	-khtml-user-select: none;

	/*早起浏览器*/



	-moz-user-select: none;

	/*火狐浏览器*/



	-ms-user-select: none;

	/*IE浏览器*/



	user-select: none;

	/*用户是否能够选中文本*/



}



canvas {

	display: block;

	width: 100%;

}



a:focus,

input:focus,

p:focus,

div:focus {

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	-webkit-user-modify: read-write-plaintext-only;

}



#pcShow {

	width: 750px;

	margin: 0 auto;

	overflow: hidden;

	display: none;

}





#webShow {

	width: 750px;

	height: 100%;

	position: absolute;

	left: 0;

	top: 0;

	z-index: 11;

	display: none;

}





/*音乐控件*/

#music {

	width: 80px;

	height: 80px;

	position: fixed;

	top: 1%;

	right: 1%;

	z-index: 9999;

}



#control {

	width: 44px;

	height: 44px;

	margin: 18px 18px;

	background: url(../images/music-off.png) no-repeat;

	background-size: 100% 100%;

}



#control-after {

	width: 80px;

	height: 80px;

	position: absolute;

	top: 0;

	left: 0;

	background: url(../images/music-on.gif) no-repeat;

	background-size: 100% 100%;

}



.picZhuan {

	transform-origin: 50% 50%;

	animation: zhuan 4s infinite linear;

	-webkit-animation: zhuan 4s infinite linear;

}



@keyframes zhuan {

	0% {

		-webkit-transform: rotate(0deg);

		transform: rotate(0deg);

	}



	100% {

		-webkit-transform: rotate(360deg);

		transform: rotate(360deg);

	}

}



@-webkit-keyframes zhuan {

	0% {

		-webkit-transform: rotate(0deg);

		transform: rotate(0deg);

	}



	100% {

		-webkit-transform: rotate(360deg);

		transform: rotate(360deg);

	}

}



/*音乐控件*/





.loading {

	width: 750px;

	height: 100%;

	position: absolute;

	z-index: 99;

	overflow: hidden;

	top: 0%;

	background: url(../images/bg.png) no-repeat center center;

	background-size: cover;

}



.loadpro {

	width: 285px;

	height: 17px;

	border: 1px solid#ad8745;

	border-radius: 10px;

	position: absolute;

	left: 50%;

	margin-left: -143px;

	top: 40%;

}



.pro {

	background: #ffcc7d repeat-x;

	border-radius: 10px;

	width: 0%;

	height: 17px;

	position: absolute;

	z-index: 10;

}



.loadimg {

	width: 750px;

	height: 100%;

	position: absolute;

	top: 0%;

	z-index: 11;

}



.loadtxt {

	position: absolute;

	font-size: 30px;

	left: 45%;

	top: 42%;

	text-align: center;

	color: #ffcc7d;

	z-index: 12;

}



.loadtip {

	position: absolute;

	font-size: 30px;

	width: 370px;

	margin-left: -185px;

	left: 50%;

	top: 45%;

	text-align: center;

	color: #ffcc7d;

	z-index: 12;

}



.lobtn {

	position: absolute;

	background: url(../images/lo1.png) no-repeat;

	background-size: 100% 100%;

	width: 200px;

	height: 262px;

	left: 50%;

	margin-left: -130.5px;

	top: 50%;

	z-index: 50;

	animation: pulse 3s infinite linear;

	display: none;

}



.swiper {

	width: 750px;

	height: 100%;

	overflow: hidden;

	top: 0%;

	background: url(../images/bg.png) no-repeat center center;

	background-size: cover;

	display: none;

}


.pagefm{
	background: url(../images/fm_bg1.png) no-repeat center bottom;

}

.fm_bg{
	width: 750px;
	height: 1334px;
	background: url(../images/fm_bg.png) no-repeat;
	position: absolute;
	bottom: 0px;
	left: 0px;
}


.fm_1 {

	position: absolute;

	background: url(../images/fm_1.png) no-repeat;

	width: 140px;

	height: 180px;

	left: 570px;

	bottom: 56px;

}




.fm_2 {

	position: absolute;

	background: url(../images/fm_2.png) no-repeat;

	width: 139px;

	height:211px;

	left: 21px;

	bottom: 37px;

}




.fm_bt {

	position: absolute;

	background: url(../images/fm_bt.png) no-repeat;

	width: 750px;

	height: 271px;

	left: 8px;

	top: 12.14%;

	opacity: 0;

}



.swiper-slide-active .fm_bt {

	animation: fadeIn 1s forwards ease-in-out;

}



.arr {

	position: absolute;

	background: url(../images/arr.png) no-repeat;

	width: 96px;

	height: 113px;

	left: 50%;

	margin-left: -48px;

	z-index: 30;

	bottom: 0%;

	animation: fadeOutUp 1s infinite ease-out;

}

.p1_1 {

	position: absolute;

	background: url(../images/p1_1.png) no-repeat;

	width: 750px;

	height: 294px;

	left: 0px;

	top: 10px;

	opacity: 0;

}



.swiper-slide-active .p1_1 {

	animation: fadeInDown 1s forwards ease-in-out;

}


.p1_2 {

	position: absolute;

	background: url(../images/p1_2.png) no-repeat;

	width: 660px;

	height: 387px;

	left: 40px;

	top: 21.58%;

	opacity: 0;

}



.swiper-slide-active .p1_2 {

	animation: fadeInUp 1s 0.3s forwards ease-in-out;

}

.p1_3 {

	position: absolute;

	background: url(../images/p1_3.png) no-repeat;

	width: 711px;

	height: 568px;

	left: 18px;

	top: 54.42%;

	opacity: 0;

}



.swiper-slide-active .p1_3 {

	animation: fadeIn 1s 0.3s forwards ease-in-out;

}





.p2_1 {

	position: absolute;

	background: url(../images/p2_1.png) no-repeat;

	width: 750px;

	height: 294px;

	left: 0px;

	top: 10px;

	opacity: 0;

}



.swiper-slide-active .p2_1 {

	animation: fadeInDown 1s forwards ease-in-out;

}

.p2_2 {

	position: absolute;

	background: url(../images/p2_2.png) no-repeat;

	width: 724px;

	height: 669px;

	left: 6px;

	top: 18.1%;

	opacity: 0;

}



.swiper-slide-active .p2_2 {

	animation: fadeIn 1s 0.3s forwards ease-in-out;

}


.p2_3 {

	position: absolute;

	background: url(../images/p2_3.png) no-repeat;

	width: 714px;

	height: 373px;

	left: 22px;

	top: 69.56%;

	opacity: 0;

}



.swiper-slide-active .p2_3 {

	animation: fadeInUp 1s 0.3s forwards ease-in-out;

}


.p3_2 {

	position: absolute;

	background: url(../images/p3_2.png) no-repeat;

	width: 714px;

	height: 450px;

	left: 18px;

	top: 60.26%;

	opacity: 0;

}



.swiper-slide-active .p3_2 {

	animation: fadeInUp 1s 0.3s forwards ease-in-out;

}

.p3_3 {

	position: absolute;

	background: url(../images/p3_3.png) no-repeat;

	width: 726px;

	height: 670px;

	left: 19px;

	top: 6.44%;

	opacity: 0;

}



.swiper-slide-active .p3_3 {

	animation: fadeIn 1s 0.3s forwards ease-in-out;

}




.p4_2 {

	position: absolute;

	background: url(../images/p4_2.png) no-repeat;

	width: 714px;

	height: 389px;

	left: 18px;

	top: 60.26%;

	opacity: 0;

}



.swiper-slide-active .p4_2 {

	animation: fadeInUp 1s 0.3s forwards ease-in-out;

}

.p4_3 {

	position: absolute;

	background: url(../images/p4_3.png) no-repeat;

	width: 726px;

	height: 670px;

	left: 8px;
    top: 6.44%;

	opacity: 0;

}



.swiper-slide-active .p4_3 {

	animation: fadeIn 1s 0.3s forwards ease-in-out;

}



.p5_2 {

	position: absolute;

	background: url(../images/p5_2.png) no-repeat;

	width: 714px;

	height: 389px;

	left: 18px;

	top: 60.26%;

	opacity: 0;

}



.swiper-slide-active .p5_2 {

	animation: fadeInUp 1s 0.3s forwards ease-in-out;

}

.p5_3 {

	position: absolute;

	background: url(../images/p5_3.png) no-repeat;

	width: 726px;

	height: 670px;

	left: 8px;
    top: 6.44%;

	opacity: 0;

}



.swiper-slide-active .p5_3 {

	animation: fadeIn 1s 0.3s forwards ease-in-out;

}





.p6_2 {

	position: absolute;

	background: url(../images/p6_3.png) no-repeat;

	width: 714px;

	height: 389px;

	left: 18px;

	top: 60.26%;

	opacity: 0;

}



.swiper-slide-active .p6_2 {

	animation: fadeInUp 1s 0.3s forwards ease-in-out;

}

.p6_3 {

	position: absolute;

	background: url(../images/p6_2.png) no-repeat;

	width: 726px;

	height: 670px;

	left: 8px;
    top: 6.44%;

	opacity: 0;

}



.swiper-slide-active .p6_3 {

	animation: fadeIn 1s 0.3s forwards ease-in-out;

}




.p7_1 {

	position: absolute;

	background: url(../images/p7_1.png) no-repeat;

	width: 750px;

	height: 294px;

	left: 0px;

	top: 10px;

	opacity: 0;

}



.swiper-slide-active .p7_1 {

	animation: fadeInDown 1s forwards ease-in-out;

}


.p7_2 {

	position: absolute;

	background: url(../images/p7_2.png) no-repeat;

	width: 715px;

	height: 185px;

	left: 0px;

	top: 21.28%;

	opacity: 0;

}



.swiper-slide-active .p7_2 {

	animation: fadeInLeft 1s 0.3s forwards ease-in-out;

}

.p7_3 {

	position: absolute;

	background: url(../images/p7_3.png) no-repeat;

	width: 712px;

	height: 750px;

	left: 23px;

	top: 39.43%;

	opacity: 0;

}



.swiper-slide-active .p7_3 {

	animation: fadeInLeft 1s 0.6s forwards ease-in-out;

}


.p8_1 {

	position: absolute;

	background: url(../images/p8_1.png) no-repeat;

	width: 736px;

	height: 559px;

	left: 0px;

	top: 5.3%;

	opacity: 0;

}



.swiper-slide-active .p8_1 {

	animation: fadeIn 1s forwards ease-in-out;

}

.p8_2 {

	position: absolute;

	background: url(../images/p8_2.png) no-repeat;

	width: 728px;

	height: 620px;

	left: 23px;

	top: 50.37%;

	opacity: 0;

}



.swiper-slide-active .p8_2 {

	animation: fadeIn 1s 0.3s forwards ease-in-out;

}



.p9_1 {

	position: absolute;

	background: url(../images/p9_2.png) no-repeat;

	width: 734px;

	height: 559px;

	left: 0px;

	top: 5.3%;

	opacity: 0;

}



.swiper-slide-active .p9_1 {

	animation: fadeIn 1s forwards ease-in-out;

}

.p9_2 {

	position: absolute;

	background: url(../images/p9_3.png) no-repeat;

	width: 730px;

	height: 611px;

	left: 23px;

	top: 50.37%;

	opacity: 0;

}



.swiper-slide-active .p9_2 {

	animation: fadeIn 1s 0.3s forwards ease-in-out;

}





.p10_1 {

	position: absolute;

	background: url(../images/p10_1.png) no-repeat;

	width: 750px;

	height: 294px;

	left: 0px;

	top: 10px;

	opacity: 0;

}



.swiper-slide-active .p10_1 {

	animation: fadeInDown 1s forwards ease-in-out;

}


.p10_2 {

	position: absolute;

	background: url(../images/p10_2.png) no-repeat;

	width: 723px;

	height: 494px;

	left: 15px;

	top: 19.7%;

	opacity: 0;

}



.swiper-slide-active .p10_2 {

	animation: fadeIn 1s 0.3s forwards ease-in-out;

}

.p10_3 {

	position: absolute;

	background: url(../images/p10_3.png) no-repeat;

	width: 730px;

	height: 611px;

	left: 15px;

	top: 59.5%;

	opacity: 0;

}



.swiper-slide-active .p10_3 {

	animation: fadeIn 1s 0.6s forwards ease-in-out;

}






.p11_2 {

	position: absolute;

	background: url(../images/p11_2.png) no-repeat;

	width: 723px;

	height: 607px;

	left: 15px;

	top: 8.29%;

	opacity: 0;

}



.swiper-slide-active .p11_2 {

	animation: fadeIn 1s forwards ease-in-out;

}

.p11_3 {

	position: absolute;

	background: url(../images/p11_3.png) no-repeat;

	width: 723px;

	height: 494px;

	left: 15px;

	top: 57.5%;

	opacity: 0;

}



.swiper-slide-active .p11_3 {

	animation: fadeIn 1s 0.3s forwards ease-in-out;

}




.p12_2 {

	position: absolute;

	background: url(../images/p12_2.png) no-repeat;

	width: 723px;

	height: 492px;

	left: 16px;

	top: 6.6%;

	opacity: 0;

}



.swiper-slide-active .p12_2 {

	animation: fadeIn 1s forwards ease-in-out;

}

.p12_4 {

	position: absolute;

	background: url(../images/p12_4.png) no-repeat;

	width: 616px;

	height: 60px;

	left: 70px;

	top: 92%;

	opacity: 0;

}



.swiper-slide-active .p12_4 {

	animation: fadeInUp 1s forwards ease-in-out;

}



.p12_3 {

	position: absolute;

	background: url(../images/p12_3.png) no-repeat;

	width: 750px;

	height: 1334px;

	left: 0px;

	bottom: 0px;


}




.replay {

	position: absolute;

	background: url(../images/replay.png) no-repeat;

	width: 253px;

	height: 51px;

	left: 80px;

	top: 950px;

	z-index: 10;

	animation: pulse 3s infinite linear;

}



.sharebtn {

	position: absolute;

	background: url(../images/sharebtn.png) no-repeat;

	width: 253px;

	height: 51px;

	left: 425px;

	top: 950px;

	z-index: 10;

	animation: pulse 3s infinite linear;

}



.sharetips {

	position: absolute;

	background: url(../images/sharetips.png) no-repeat center top;

	width: 750px;

	height: 100%;

	left: 0;

	top: 0;

	display: none;

	z-index: 100;

}