.start{
	background: url(../img/bgstart1.jpg) no-repeat;
	background-size: 100% 100%;
}

.bgs2{
	-webkit-animation: bgs2 4s linear infinite;
}
@-webkit-keyframes bgs2{
	from{
		opacity: 0;
		-webkit-transform: translate(0,0);
	}
	50%{
		opacity: 0.8;
	}
	to{
		opacity: 0;
		-webkit-transform: translate(2rem,5rem);
	}
}

.bgs3{
	-webkit-animation: bgs3 4s linear infinite;
}
@-webkit-keyframes bgs3{
	from{
		opacity: 1;
	}
	50%{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

.bgs4{
	-webkit-animation: bgs4 6s linear infinite;
}
.bgs5{
	-webkit-animation: bgs4 6s 1s linear infinite;
}

@-webkit-keyframes bgs4{
	from{
		opacity: 1;
		-webkit-transform: translateY(0);
	}
	50%{
		opacity: 0.4;
		-webkit-transform: translateY(30px);
	}
	to{
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}
.s1{
    position: absolute;
    width: 9.375rem;
    height: 9rem;
    right: 2.5rem;
    top: 20%;
    display: none;
    background: url(../img/s1.png) no-repeat;
    background-size: 100%;
    -webkit-animation: s1 1.5s linear both;
}
@-webkit-keyframes s1{
	from{
		height: 0;
	}
	to{
		height: 10rem;
	}
}
.s2{
    position: absolute;
    width: 8rem;
    height: 11.5rem;
    left: 3.4rem;
    top: 28%;
    display: none;
    background: url(../img/s2.png) no-repeat;
    background-size: 100%;
    -webkit-animation: s2 1.5s 1.5s linear both;
}
@-webkit-keyframes s2{
	from{
		height: 0;
	}
	to{
		height: 12.5rem;
	}
}

.s3{
	position: absolute;	
	width: 7rem;
	left: 4.5rem;
	bottom: 1.5rem;
}

#cur{
    position: absolute;
    width: 2rem;
    text-align: center;
    bottom: 1.4rem;
    color: #3373C9;
    font-size: 1rem;
    left: 7.9rem;
}


/*p1*/
.p1{
	background: #fff;
}
.p11{
	position: absolute;
	width: 16rem;
	height: 98%;
	bottom: 0;
	left: 0;
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: p11 4s linear infinite;
}

@-webkit-keyframes p11{
	from{
		opacity: 0.4;
		-webkit-transform: scaleY(1);
	}
	50%{
		opacity: 1;
		-webkit-transform: scaleY(1.02);
	}
	to{
		opacity: 0.4;
		-webkit-transform: scaleY(1);
	}
}

.p12{
	position: absolute;
	width: 6rem;
	top: 2rem;
	left: 1rem;
	display: none;
	-webkit-animation: p12 3s linear infinite;
}
@-webkit-keyframes p12{
	from{
		opacity: 0;
		-webkit-transform: translateX(5rem);
	}
	15%{
		opacity: 1;
	}
	85%{
		opacity: 1;
	}
	to{
		opacity: 0;
		-webkit-transform: translateX(0);
	}
}
.p1t1{
	position: absolute;
	width: 12rem;
	height: 2.35rem;
	left: 1rem;
	top: 5rem;
	background: url(../img/p1t1.png) no-repeat;
	background-size: auto 100%;
	-webkit-animation: p1t1 2s 0.5s linear both;
}
@-webkit-keyframes p1t1{
	from{
		width: 0rem;
	}
	to{
		width: 14.2rem;
	}
}
.p1t2{
	position: absolute;
	width: 14.175rem;
	height: 2.275rem;
	left: 1rem;
	top: 7.5rem;
	background: url(../img/p1t2.png) no-repeat;
	background-size: auto 100%;
	-webkit-animation: p1t1 2s 2.3s linear both;
}
.p1t3{
	position: absolute;
    width: 1.6rem;
    right: 1.5rem;
    top: 5.2rem;
    -webkit-animation: fadeIn 0.6s 4.3s both;
}
.btstart{
	position: absolute;
	width: 10.675rem;
	top: 16rem;
	left: 2.6625rem;	
	-webkit-animation: fadeIn 0.6s 4.3s both;
}
.jts{
	position: absolute;
	width: 2rem;
	top: 19rem;
	left: 9rem;
	pointer-events: none;
	-webkit-animation: mjt 2s linear infinite,fadeIn 0.6s 4.3s both;
}
.pw1{
	position: absolute;
	width: 16rem;
	height: 98%;
	bottom: 0;
	left: 0;
	display: none;
}

.lang{
    position: absolute;
    width: 8rem;
    left: 4.5rem;
    bottom: 15%;
    height: 35%;
    display: none;
    
}

#fish1{
    position: absolute;
    bottom: 29%;
    left: 6rem;
    width: 4.693rem;
    height: 4rem;
	background: url(../img/fish2.png) no-repeat;
	background-size: auto 100%;
	-webkit-animation: fish11 0.6s steps(4) infinite,fish1move 1.5s 0.3s linear both;
	display: none;
}
@-webkit-keyframes fish11{
	from{
		background-position-x: 0;
	}
	to{
		background-position-x: -18.772rem;
	}
}
@-webkit-keyframes fish1move{
	from{
		opacity: 0;
		-webkit-transform: scale(1)  translate(0,0) rotateZ(25deg);
	}
	10%{
		opacity: 1;
	}
	75%{
		opacity: 1;
	}
	to{
		opacity: 0;
		-webkit-transform: scale(1.2)  translate(1rem,-9rem) rotateZ(59deg);
	}
}

.p2{
	position: absolute;
	background: #FFFFFF;
	/*overflow-x: scroll;*/
	width: 100%;
	height: 100%;
}
.p2main{
	position: relative;
	width: auto;
	height: 100%;
	overflow-y: hidden;
}
.bgmian1{
	width: auto;
	height: 100%;
}
.bgmian3{
	position: absolute;
	left: 0;
	top: 0;
	height: calc(100% - 40px);
}
.bgmian2{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../img/bgmain2.png) repeat-y;
	background-size: 100%;
	-webkit-animation: bgmain2 6s linear infinite;
}
@-webkit-keyframes bgmain2{
	from{
		background-position-y: 0;
		opacity: 0.3;
	}
	50%{
		opacity: 1;
	}
	to{
		opacity: 0.3;
		background-position-y: -25.5rem;
	}
}
.bgmian3{
	-webkit-animation: bgmain3 3s linear infinite;
}
@-webkit-keyframes bgmain3{
	from{
		opacity: 1;
	}
	50%{
		opacity: 0.2;
	}
	to{
		opacity: 1;
	}
}





.pao{
	position: absolute;
	left: 6%;
	top: 5%;
}
.pao1{
    left: 1%;
    top: 8%;
}
.pao2{
    left: 0.5%;
    top: 47%;
}
.pao3{
    left: 2%;
    top: 24%;
}
.pao4{
    left: 2%;
    top: 52%;
}
.pao5{
    left: 4%;
    top: 10%;
}
.pao6{
    left: 4.5%;
    top: 27%;
}
.pao7{
    left: 5.8%;
    top: 50%;
}

.mbt1{
	position: absolute;
	left: 2.9%;
    top: 59%;
    width: 11rem;
}
.mjt{
	position: absolute;
	width: 2rem;
	-webkit-animation: mjt 2s linear infinite;
	pointer-events: none;
}
@-webkit-keyframes mjt{
	from{
		-webkit-transform: translate(0,0);
	}
	50%{
		-webkit-transform: translate(0.5rem,0.5rem);
	}
	to{
		-webkit-transform: translate(0,0);
	}
}
.mjt1{
	position: absolute;
    left: 4.9%;
    top: 81%;
    width: 2rem;
}

.pao8{
    left: 7.8%;
    top: 13%;
}
.pao9{
    left: 8.3%;
    top: 65%;
}
.pao10{
    left: 9.3%;
    top: 17%;
}
.pao11{
    left: 12.3%;
    top: 9%;
}
.pao111{
    left: 11.3%;
    top: 72%;
}
.pao12{
	left: 12.3%;
    top: 48%;
}
.pao13{
    left: 17.3%;
    top: 71%;
}

.mbt2{
    position: absolute;
    left: 13.5%;
    top: 7%;
    width: 9rem;
}
.mjt2{
    left: 14.9%;
    top: 35%;
}
.pao14{
left: 17.3%;
    top: 27%;
}
.pao15{
    left: 20.3%;
    top: 62%;
}
.pao16{
    left: 21.3%;
    top: 10%;
}
.pao166{
    position: absolute;
    width: 8rem;
    left: 17%;
    top: 5%;
    -webkit-animation: pao166 3s linear infinite;
}
@-webkit-keyframes pao166{
	from{
		opacity: 0;
		-webkit-transform: translate(28rem,0);
	}
	15%{
		opacity: 1;
	}
	85%{
		opacity: 1;
	}
	to{
		opacity: 0;
		-webkit-transform: translate(0rem,1rem);
	}
}
.pao17{
	left: 22.3%;
    top: 43%;
}
.pao18{
    left: 24.3%;
    top: 7%;
}
.pao19{
    left: 26.3%;
    top: 21%;
}

.mbt3{
    position: absolute;
    left: 24.3%;
    width: 5.35rem;
    top: 50%;
}
.mjt3{
left: 25.3%;
    top: 77%;
}
.pao20{
    left: 27%;
    top: 51%;
}
.pao21{
    left: 30%;
    top: 67%;
}
.pao22{
    left: 31%;
    top: 8%;
}
.pao23{
	left: 34.5%;
    top: 12%;
}
.pao24{
left: 35%;
    top: 44%;
}
.mbt4{
    position: absolute;
    width: 12rem;
    left: 31%;
    top: 47%;
}
.mjt4{
    left: 34%;
    top: 74%;
}
.pao25{
    left: 37%;
    top: 26%;
}
.pao26{
	left: 37.3%;
    top: 60%;
}
.pao27{
    left: 41.3%;
    top: 12%;
}
.pao28{
    left: 40.3%;
    top: 51%;
}
.mbt51{
    position: absolute;
    width: 8.25rem;
    left: 43.3%;
    top: 11%;
}
.mbt52{
    position: absolute;
    width: 12.2rem;
    left: 44.5%;
    top: 6%;
}
.mjt5{
left: 45.5%;
    top: 30%;
}
.fire1{
	position: absolute;
	width: 16rem;
	bottom: 0;
	left: 41.6%;
	-webkit-animation: fire1 3s linear infinite;
	-webkit-transform-origin: 50% 100%;
}
@-webkit-keyframes fire1{
	from{
		-webkit-transform: scaleY(1);
	}
	50%{
		-webkit-transform: scaleY(1.3);
	}
	to{
		-webkit-transform: scaleY(1);
	}
}
.pao29{
    left: 46.3%;
    top: 61%;
}
.pao291{
	position: absolute;
	width: 4.9rem;
	left: 48.3%;
    top: 6%;
    -webkit-animation: pao166 4s linear infinite;
}
.pao30{
    left: 51%;
    top: 66%;
}
.pao31{
    left: 52%;
    top: 15%;
}
.pao32{
left: 56%;
    top: 40%;
}
.pao33{
    left: 53.5%;
    top: 34%;
}
.pao34{
    left: 56.5%;
    top: 13%;
}
.pao35{
    left: 69.5%;
    top: 29%;
}
.pao36{
    left: 59.5%;
    top: 21%;
}
.pao37{
left: 64.5%;
    top: 10%;
}
.mbt8{
    position: absolute;
    width: 12rem;
    bottom: 0;
    left: 69%;
}
.mbt7{
    position: absolute;
    width: 8.5rem;
    top: 10%;
    left: 65%;
}

.mjt7{
    top: 30%;
    left: 67%;
}
.mbt6{
    position: absolute;
    width: 10rem;
    left: 54%;
    bottom: 10%;
}
.mjt6{
left: 56%;
    bottom: 13%;
}
.tree1{
    position: absolute;
    height: 77%;
    bottom: 0;
    left: 73%;
}
.cloud1{
	position: absolute;
	left: 73%;
	top: 8%;
	width: 12rem;
	-webkit-animation: pao166 4s linear infinite;
}
.q1{
    position: absolute;
    width: 12rem;
    bottom: 5%;
    left: 80%;
}
.q2{
    position: absolute;
    width: 8rem;
    bottom: 3%;
    left: 80%;
}
.boat1{
position: absolute;
    width: 1.25%;
    left: 86%;
    top: 77%;
    -webkit-animation: boat1 5s linear infinite;
}
@-webkit-keyframes boat1{
	from{
		opacity: 0;
		-webkit-transform: translateX(0);
	}
	15%{
		opacity: 1;
	}
	85%{
		opacity: 1;
	}
	to{
		opacity: 0;
		-webkit-transform: translateX(120%);
	}
}
.boat2{
position: absolute;
    width: 1.25%;
    left: 83%;
    top: 72%;
    -webkit-animation: boat1 5s 2s linear infinite;
}
.car1{
    position: absolute;
    width: 1%;
    left: 90.5%;
    top: 89%;
    -webkit-animation: car1 1.5s linear infinite;
}
@-webkit-keyframes car1{
	from{
		opacity: 0;
		-webkit-transform: translate(0);
	}
	15%{
		opacity: 1;
	}
	85%{
		opacity: 1;
	}
	to{
		opacity: 0;
		-webkit-transform: translate(120%,-100%);
	}
}
.car2{
    position: absolute;
    width: 0.6%;
    left: 97%;
    top: 57%;
      -webkit-animation: car2 1.5s 0.2s linear infinite;
}
@-webkit-keyframes car2{
	from{
		opacity: 0;
		-webkit-transform: translate(0);
	}
	15%{
		opacity: 1;
	}
	85%{
		opacity: 1;
	}
	to{
		opacity: 0;
		-webkit-transform: translate(-120%,78%)
	}
}
.car3{
    position: absolute;
    width: 0.6%;
    left: 95.1%;
    top: 53%;
    -webkit-animation: car3 1.5s 0.6s linear infinite;
}
@-webkit-keyframes car3{
	from{
		opacity: 0;
		-webkit-transform: translate(0);
	}
	15%{
		opacity: 1;
	}
	85%{
		opacity: 1;
	}
	to{
		opacity: 0;
		-webkit-transform: translate(-120%,-50%)
	}
}
.car4{
    position: absolute;
    width: 0.6%;
    left: 94%;
    top: 52%;
    -webkit-animation: car4 1.5s 0.8s linear infinite;
}
@-webkit-keyframes car4{
	from{
		opacity: 0;
		-webkit-transform: translate(0);
	}
	15%{
		opacity: 1;
	}
	85%{
		opacity: 1;
	}
	to{
		opacity: 0;
		-webkit-transform: translate(120%,100%)
	}
}
.car5{
    position: absolute;
    width: 0.6%;
    left: 93.8%;
    top: 70%;
     -webkit-animation: car1 1.5s 1s linear infinite;
}
.car6{
    position: absolute;
    width: 1%;
    left: 92.6%;
    top: 74%;
    -webkit-animation: car2 1.5s 1.2s linear infinite;
    
}
.q3{
    position: absolute;
    width: 1.5%;
    top: 46%;
    left: 90%;
}
.q4{
    position: absolute;
    width: 1.5%;
    top: 46%;
    left: 89.3%;
}
.q5{
position: absolute;
    width: 1.5%;
    top: 46%;
    left: 90.7%;
}
.q6{
position: absolute;
    width: 1.5%;
    top: 77%;
    left: 80%;
}
.q7{
	position: absolute;
    width: 1%;
    top: 60%;
    left: 86%;
}

@-webkit-keyframes pao{
	from{
		-webkit-transform: scale(1);
	}
	50%{
		-webkit-transform: scale(1.15);
	}
	to{
		-webkit-transform: scale(1);
	}
}

.openmenu{
	position: fixed;
	width: 1.6rem;
	top: 1rem;
	right: 0;
	display: none;
}
.menu{
	position: fixed;
	right: -8.4rem;
	/*right: 0;*/
	top: 1rem;
	width: 10rem;
	height: 18rem;
	background: url(../img/bgmenu.png) no-repeat;
	background-size: 100%;
	display: none;
	-webkit-transition: all 0.8s;
}
.closemenu{
	position: absolute;
	width: 1.6rem;
	height: 2rem;
	left: 0;
	top: 0;
}
.menubt1{
    position: absolute;
    width: 3rem;
    top: 1.5rem;
    left: 2.5rem;
}
.menubt2{
    position: absolute;
    width: 3rem;
    top: 0.5rem;
    left: 6.5rem;
}
.menubt3{
    position: absolute;
    width: 1.5rem;
    top: 5rem;
    left: 3.2rem;
}
.menubt4{
    position: absolute;
    width: 2.5rem;
    top: 5rem;
    left: 6.5rem;
}
.menubt5{
	position: absolute;
    width: 4.5rem;
    top: 8.3rem;
    left: 2.3rem;
}
.menubt6{
    position: absolute;
    width: 3.2rem;
    top: 8.7rem;
    left: 6.5rem;
}
.menubt7{
    position: absolute;
    width: 3.2rem;
    top: 12.5rem;
    left: 2.5rem;
}
.menubt8{
    position: absolute;
    width: 1.6rem;
    top: 12.6rem;
    left: 7.1rem;
}

.cao1{
	position: absolute;
	width: 5rem;
	bottom: 0;
	left: 7%;
}
.cao2{
	position: absolute;
	width: 5rem;
	bottom: 0;
	left: 27.5%;
}

.bfish{
    position: fixed;
    bottom: 45%;
    left: 5rem;
    width: 5.75rem;
    height: 4.4rem;
    background: url(../img/fish1.gif) no-repeat;
    background-size: 100%;
	-webkit-animation: bfish1 2s linear infinite,bfish2 3s linear both;/*bfish 0.6s steps(4) infinite,*/
	/*display: none;*/
	pointer-events: none;
	/*display: ;*/
}
@-webkit-keyframes bfish{
	from{
		background-position-x: 0;
	}
	to{
		background-position-x: -15rem;
	}
}
@-webkit-keyframes bfish1{
	from{
		-webkit-transform: translateY(0) ;
	}
	50%{
		-webkit-transform: translateY(30px) ;
	}
	to{
		-webkit-transform: translateY(0) ;
	}
}
@-webkit-keyframes bfish2{
	from{
		left: 0;
	}
	to{
		left: 5rem;
	}
}
.hc1{
    position: absolute;
    width: 30rem;
    left: 58%;
    bottom: 0%;
    display: none;
    -webkit-animation: hc1 2s linear both;
}
@-webkit-keyframes hc1{
	from{
		opacity: 0;
		-webkit-transform: translateX(-12rem);
	}
	20%{
		opacity: 1;
	}
	to{
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

.rt{
	position: fixed;
	right: 0.5rem;
	width: 0.7rem;
	top: 46%;
	-webkit-animation: rt 2s linear infinite;
}
@-webkit-keyframes rt{
	from{
		opacity: 1;
	}
	50%{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.title8{
	position: absolute;
    width: 2.25rem;
    left: 79%;
    top: 4%;
}
.cont8{
    position: absolute;
    width: 8rem;
    right: 2rem;
    top: 2rem;
}



/*xncfv*/
.xncfv{
	width: 100%;
	position: fixed;
	top: 10%;
	left: 0;
	opacity: 0.4;
}

.w1{
    position: absolute;
    left: 1%;
    bottom: 10%;
    width: 5.2rem;
}
.w2{
    position: absolute;
    left: 14.5%;
    bottom: 10%;
    width: 4.1rem;
}
.w3{
    position: absolute;
    left: 21.5%;
    bottom: 10%;
    width: 5.1rem;
}
.w4{
    position: absolute;
    left: 35.5%;
    bottom: 5%;
    width: 4.1rem;
}
.w5{
    position: absolute;
    left: 41.5%;
    bottom: 63%;
    width: 5.2rem;
}
.w6{
    position: absolute;
    left: 53%;
    bottom: 13%;
    width: 5.2rem;
}
.w7{
    position: absolute;
    left: 62.5%;
    bottom: 60%;
    width: 5.2rem;
}
.w8{
    position: absolute;
    left: 72.5%;
    bottom: 20%;
    width: 5.2rem;
}
.yan2{
	-webkit-animation: yan2 3s linear infinite;
}
@-webkit-keyframes yan2{
	from{
		opacity: 0.2;
	}
	50%{
		opacity: 1;
	}
	to{
		opacity: 0.2;
	}
}
.n7-d{
	display: none;
}
.bgp2{
	-webkit-transform-origin: 100% 56%;
	-webkit-transition: all 2.6s linear;
}

.bgmain4{
	display: inline-block;
	
}

.p2main,.bgmain4{
	float: left;
	
}
.bgmain4{
	position: relative;
}
.last{
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
}