/* Basic sample */
iframe{
	outline: none;
	border:none;
}
*{
	margin: 0;
	padding: 0;
}
/*point events*/
.lostpoint{
	pointer-events: none;
}
*{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-overflow-scrolling: touch;
}
body{
	overflow:hidden;
	background-color:#fff;
	margin:0;
	padding:0;
}
ul,li{
	margin: 0;
	padding: 0;
	list-style: none;
}
html,body{
	height: 100%;
	width: 100%;
}
img{
	display: block;
}
/*引导页*/
.first{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: url(../img/kaichang/yin/bg.png) no-repeat;
	background-size: 100% 100%;
	display: none;
	position: absolute;
}
.first .zi0{
	list-style: none;
	-webkit-transform: translateX(-30px);

}
.first .zi_1{
	position: absolute;
	width: 2.5rem;
	height: 10rem;
	background: url(../img/kaichang/yin/zi3.png) no-repeat;
	background-size: auto 100%;
	top: 50%;
	margin-top: -5rem;
	left: 5rem;
	opacity: 0;
	-webkit-animation: first_out 2s 1s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes first_out{
	from{
		opacity: 0;
		-webkit-transform: translateX(-30px);

	}
	to{
		opacity: 1;
		-webkit-transform: translateX(0px);
	}
}
.first .zi_2{
	position: absolute;
	width: 1.8rem;
	height: 14rem;
	background: url(../img/kaichang/yin/zi1.png) no-repeat;
	background-size: auto 100%;
	top: 50%;
	margin-top: -7rem;
	left: 3.5rem;
	opacity: 0;
	-webkit-animation: first_out 4s 3s linear;
	-webkit-animation-fill-mode: forwards;
}
.first .zi_3{
	position: absolute;
	width: 1.1rem;
	height: 14rem;
	background: url(../img/kaichang/yin/zi2.png) no-repeat;
	background-size: auto 100%;
	top: 50%;
	margin-top: -7rem;
	left: 2.3rem;
	opacity: 0;
	-webkit-animation: first_out 3s 7s linear;
	-webkit-animation-fill-mode: forwards;
}

/*摄影机*/
.act{
	width: 100%;
	height: 100%;
	background: #000;
	display: none;
	position: absolute;
}
.act ul{
	position: absolute;
	top: 0rem;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.act ul .tou1{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	list-style: none;
	-webkit-animation: in 2s 2s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes in{
	from{
		opacity: 1;
	}

	to{
		opacity: 0;
	}
}
.act ul .tou2{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	list-style: none;
	opacity: 0;
	-webkit-animation: in2 2s 3s linear ;
	-webkit-animation-fill-mode: forwards;
}
.act ul .tou3{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	list-style: none;
	opacity: 0;
	-webkit-animation: in2 2s 4s linear ;
	-webkit-animation-fill-mode: forwards;
}
.act ul .tou4{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	list-style: none;
	opacity: 0;
	-webkit-animation: in2 2s 5s linear ;
	-webkit-animation-fill-mode: forwards;
}
.act ul .tou5{
	position: absolute;
	top: 0;
	left: 0.3rem;
	width: 100%;
	height: 100%;
	list-style: none;
	opacity: 0;
	-webkit-animation: in2 2s 6s linear ;
	-webkit-animation-fill-mode: forwards;
}
.act ul .tou6{
	position: absolute;
	top: -0.05rem;
	left: 0.1rem;
	width: 100%;
	height: 100%;
	list-style: none;
	opacity: 0;
	-webkit-animation: in2 2s 7s linear ;
	-webkit-animation-fill-mode: forwards;
}
.act ul .tou7{
	position: absolute;
	top: 0;
	left: 0rem;
	width: 108%;
	height: 102%;
	list-style: none;
	opacity: 0;
	/*z-index: 11;*/
	-webkit-animation: in3 1.5s 8s linear ;
	-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes in2{
	from{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
@-webkit-keyframes in3{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}

}
.act ul li img{
	width: 100%;
	height: 100%;
}
.act .guang{
	width: 18.2rem;
	margin-left: 0rem;
	height: 111%;
	opacity: 0;

}
.act .guang_1{
	-webkit-animation: shan 2s 0.5s linear;
	-webkit-animation-fill-mode: forwards;
	transform-origin: 52% 47.5%;
}
@-webkit-keyframes shan{
	from{
		transform: scale(1);
		opacity: 0;
	}

	50%{
		transform: scale(2);
		opacity: 1;
	}
	70%{
		transform: scale(5);
		opacity: 1;
	}
	to{
		transform: scale(25);
		opacity: 1;
	}
}
.act .hand{
	position: absolute;
	top: calc(59% + 0.2rem);
	right: -5.7rem;
	width: 6rem;
	/*height: 4rem;*/

}
.act .hand_1{
	-webkit-animation: hand 0.8s 1s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes hand{
	from{
		transform: translate(0,0);
	}
	to{
		transform: translate(-72%,-2rem);
	}
}
/*开场黑屏*/
.kaichang{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0.9;
	z-index: 1;
	display: none;
	position: absolute;
}
.kaichang .bg_11,.guo .bg_11{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	
}
.kaichang .bg_22,.guo .bg_22{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.4;

}
@-webkit-keyframes fadein_1{
	from{
		opacity: 1;
	}
	to{
		opacity: 0.5;
	}
}
@-webkit-keyframes fadein_2{
	from{
		opacity: 0.4;
	}
	to{
		opacity: 1;
	}
}
/*开场黑屏字*/


.kaichang .zi_11_1{
	-webkit-animation: dou 1s 1s linear infinite;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes dou{
	from{
		transform: translateX(0);
		opacity: 1;
	}
	50%{
		transform: translateX(0.05rem);
		opacity: 0.7;
	}
	to{

		transform: translateX(0);
		opacity: 1;
	}
}
.kaichang .zi_11_2{
	-webkit-animation: dou2 1s 1.2s linear infinite;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes dou2{
	from{
		transform: translateX(0);
		opacity: 1;
	}
	50%{
		transform: translateX(0.05rem);
		opacity: 0.6;
	}
	to{

		transform: translateX(0);
		opacity: 1;
	}
}

.kaichang .zi_11 img{
	width: 1.1rem;
}
.kaichang .zi_22 img{
	width: 0.8rem;
}
.kaichang .zi_33 img{
	width: 1.3rem;
}
.kaichang .zi_44 img{
	width: 1.2rem;
}
.kaichang .zi_55 img{
	width: 1.5rem;
}

/*主场景最外层*/

.action{
	position: absolute;
	top: 0;
	left: 0;
	width:16rem;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid #ccc;
	display: none;
	background: #465769;
}
.action .top{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 1rem;
	height: 100%;
	z-index: 999;
	overflow: hidden;
	background: #465769 url(../img/jingtou/pian.png) repeat-y;
	background-size: 100% auto;
	-webkit-animation: movetop 24s  linear infinite;
}
.action .bottom{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 1rem;
	height: 100%;
	z-index: 999;
	overflow: hidden;
	background: #465769 url(../img/jingtou/pian2.png) repeat-y;
	background-size: 100%;
	-webkit-animation: movetop 24s linear infinite;
}


@-webkit-keyframes movetop{
	from{
		background-position-y: 0;
		/*opacity: 1;*/
	}

	to{
		background-position-y: 32rem;
		/*opacity: 0;*/
	}
}


/*镜头1*/
/*镜头1移动*/
.block{
	display: block;
}
.action .action_1,.action .action_2,.action .action_3,.action .action_4,.action .action_5,.action .action_6{
	position: absolute;
	top: 0;
	left: 1rem;
	width:14rem;
	height: 100%;
	margin: 0;
	padding: 0;
	/*border: 1px solid #ccc;*/
	display: none;
}
/*左侧场景*/

.action_1 .left{
	position: absolute;
	width:100%;
	height: 50%;
	left: 0;
	z-index: 11;
	/*overflow: hidden;*/
	/*border: 1px solid #000;*/
	/*transition: height 1s 6s;*/
}

.action_1 .left .box{
	position: absolute;
	width: 110%;
	/* top: -5rem; */
	height: 150%;
	/* margin-top: -3.7rem; */
	bottom: 0;
}
.action_1 .left .chang_11_1{
	position: absolute;
	top: -1rem;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
}
.action_1 .left .chang_11_2{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 11;
	opacity: 0.5;
	-webkit-animation: chang_2 2s 2s linear infinite;
	display: none;
}
.action_1 .left .chang_11_3{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 11;
	opacity: 0.5;
	-webkit-animation: chang_3 2s 4s linear infinite;
	display: none;
}
.action_1 .left .pang_1{
	position: absolute;
	bottom: 0;
	right: 1.7rem;
	width: 0;
	height: 1rem;
	z-index: 11;
	background: url(../img/jingtou/zi1.png) no-repeat;
	background-size: auto 0.9rem;
	background-position: right;
	transition: width 5s 2s;
}
.action .chang_1{
	-webkit-animation: chang_1 2s linear infinite;
}
/*场景1右*/
.action_1 .right{
	position: absolute;
	width: 100%;
	height: 50%;
	top: 50%;
	left: 0;
	z-index: 13;

}
.action_1 .right .pang_2{
	position: absolute;
	top: 0.1rem;
	right: 4.2rem;
	width: 0;
	height: 1rem;
	background: url(../img/jingtou/zi2.png) no-repeat;
	background-size: auto 1.2rem;
	background-position: right;
	transition: width 5s 1s;
}

/*场景2*/
.action_2 .left .box{
	position: absolute;
	width: 110%;
	/* top: -5rem; */
	height: 150%;
	margin-top: -3.5rem;
	bottom: 0;
}
.action_2 .left{
	position: absolute;
	bottom:50%;
	left: 0;
	width: 12rem;
	height: 50%;
}
.action_2 .left .chang_22_1{
	position: absolute;
	top: 2rem;
	left: 1rem;
	width: 100%;
	height: 100%;
	z-index: 11;
	opacity: 1;
}
.action_2 .left .pang_1{
	position: absolute;
	bottom: -0.2rem;
	right: 0rem;
	width: 0;
	height: 1rem;
	z-index: 11;
	background: url(../img/jingtou/zi3.png) no-repeat;
	background-size: auto 1.4rem;
	background-position: right;
	transition: width 5s 2s;
}
.action_2 .right .pang_2{
	position: absolute;
	top: 0.4rem;
	right: 1.25rem;
	width: 0;
	height: 1rem;
	background: url(../img/jingtou/zi4.png) no-repeat;
	background-size: auto 1rem;
	background-position: right;
	transition: width 5s 1s;
}

.action_2 .right{
	position: absolute;
	width: 100%;
	height: 50%;
	top: 50%;
	left: 0;
	z-index: 13;
	/*border: 1px solid #000;*/

}


/*场景3*/
.action_3 .left .box{
	position: absolute;
	width: 110%;
	/* top: -5rem; */
	height: 114%;
	/* margin-top: -3.7rem; */
	bottom: 0;
}
.action_3 .left{
	position: absolute;
	width:100%;
	height: 50%;
	left: 0;
	z-index: 11;
	/*overflow: hidden;*/
	/*border: 1px solid #000;*/
	/*transition: height 1s 6s;*/
}

.action_3 .left .chang_33_1{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 11;
	opacity: 1;
}
.action_3 .left .pang_1{
	position: absolute;
	bottom: 0;
	right: 1.85rem;
	width: 0;
	height: 1rem;
	background: url(../img/jingtou/zi5.png) no-repeat;
	background-size: auto 0.9rem;
	background-position: right;
	z-index: 11;
	transition: width 5s 2s;
}
.action_3 .right{
	position: absolute;
	width: 100%;
	height: 50%;
	top: 50%;
	left: 0;
	z-index: 13;
	/*border: 1px solid #000;*/

}
.action_3 .right .pang_2{
	position: absolute;
	top: 0;
	right: 1.85rem;
	width: 0;
	height: 1rem;
	background: url(../img/jingtou/zi6.png) no-repeat;
	background-size: auto 0.9rem;
	background-position: right;
	transition: width 5s 1s;
}
.action_3 .right .chang_33_2{
	position: absolute;
	top: -2rem;
	left: 0;
	width: 100%;
	/*opacity: 0.6;*/
	/*-webkit-animation: chang_3_1 2s 4s linear infinite;*/
}
/*镜头4*/
.action_4 .left .box{
	position: absolute;
	width: 100%;
	/* top: -5rem; */
	height: 115%;
	/* margin-top: -3.5rem; */
	bottom: 0;
}
.action_4 .left{
	position: absolute;
	bottom:50%;
	left: 0;
	width: 12rem;
	/*overflow: hidden;*/
	height: 50%;
}
.action_4 .left .chang_44_1{
	position: absolute;
	bottom: 0;
	left: 2rem;
	width: 100%;
	height: 100%;
	max-height: 100%;
	max-width: 100%;
	z-index: 11;
	opacity: 1;
}
.action_4 .left .pang_1{
	position: absolute;
	bottom: 1rem;
	width: 0;
	right: -1.5rem;
	height: 1rem;
	z-index: 11;
	background: url(../img/jingtou/zi7.png) no-repeat;
	background-size: auto 0.9rem;
	background-position: right;
	transition: width 5s 2s;
}
.action_4 .right .pang_2{
	position: absolute;
	top: 0rem;
	right: 1.8rem;
	width: 0;
	height: 1rem;
	background: url(../img/jingtou/zi8.png) no-repeat;
	background-size: auto 0.9rem;
	background-position: right;
	transition: width 5s 1s;
}

.action_4 .right{
	position: absolute;
	width: 100%;
	height: 50%;
	top: 50%;
	left: 0;
	z-index: 13;
	/*border: 1px solid #000;*/

}


.action_4 .right .chang_44_2{
	position: absolute;
	top: 0;
	left: -0.8rem;
	width: 110%;
	height: 100%;
	/*opacity: 0.6;*/
	/*-webkit-animation: chang_3_1 2s 4s linear infinite;*/
}
/*镜头5*/
.action_5 .left .box{
	position: absolute;
	width: 110%;
	/* top: -5rem; */
	height: 115%;
	margin-top: -3.5rem;
	overflow: hidden;
	bottom: 0;
}
.action_5 .left{
	position: absolute;
	bottom:50%;
	left: 0;
	width: 12rem;
	height: 50%;
}
.action_5 .left .chang_55_1{
	position: absolute;
	top: 0rem;
	left: 1rem;
	width: 100%;
	height: 110%;
	z-index: 11;
	opacity: 1;
}
.action_5 .left .pang_1{
	position: absolute;
	bottom: 0.1rem;
	right: 0rem;
	width: 0;
	height: 1rem;
	z-index: 28;
	background: url(../img/jingtou/zi9.png) no-repeat;
	background-size: auto 1rem;
	background-position: right;
	transition: width 5s 2s;
}
.action_5 .right .pang_2{
	position: absolute;
	top: 0rem;
	right: 3.5rem;
	width: 0;
	height: 1rem;
	background: url(../img/jingtou/zi10.png) no-repeat;
	background-size: auto 1rem;
	background-position: right;
	transition: width 5s 1s;
}
.action_5 .right{
	position: absolute;
	width: 100%;
	height: 50%;
	top: 50%;
	left: 0;
	z-index: 13;
	/*border: 1px solid #000;*/

}
.action_5 .right .chang_55_2{
	position: absolute;
	top: 0;
	left: -0.5rem;
	width: 110%;
	height: 100%;
	/*opacity: 0.6;*/
	/*-webkit-animation: chang_3_1 2s 4s linear infinite;*/
}
/*镜头6*/
.action_6 .left .box{
	position: absolute;
	width: 100%;
	/* top: -5rem; */
	height: 112%;
	/* margin-top: -3.5rem; */
	/* overflow: hidden; */
	bottom: 0;
}
.action_6 .left{
	position: absolute;
	bottom: 50%;
	left: 0;
	width: 12rem;
	height: 50%;
}
.action_6 .left .chang_66_1{
	position: absolute;
	bottom: 0;
	left: 17%;
	width: 100%;
	height: 100%;
	/* z-index: 10; */
	opacity: 1;
	-webkit-transform-origin: 9% 79%;
	-webkit-transform: scale(1.15);
}
.action_6 .left .pang_1{
	position: absolute;
	bottom: 0;
	right: 0.1rem;
	width: 0;
	height: 1rem;
	z-index: 14;
	transition: width 5s 2s;
}
/*.action_6 .right .pang_2{
	position: absolute;
    top: 0.2rem;
    right: 1.7rem;
    width: 0;
    height: 1rem;
    background: url(../img/jingtou/zi9.png) no-repeat;
    background-size: auto 0.9rem;
    background-position: right;
    transition: width 5s 1s;
}*/

.action_6 .right{
	position: absolute;
	width: 100%;
	height: 50%;
	top: 50%;
	left: 0;
	z-index: 13;
	/*border: 1px solid #000;*/

}
.action_6 .right .chang_66_2{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*opacity: 0.6;*/
	/*-webkit-animation: chang_3_1 2s 4s linear infinite;*/
}


/*整体*/
.action .tran1,.action .tran2,.action .tran3,.action .tran4,.action .tran5,.action .tran6{
	-webkit-animation: tran 1s 1s  linear;
	-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes tran{
	from{
		transform: translateY(0);
	}

	to{
		transform: translateY(1.5rem);
	}
}

.action .zou_1{
	-webkit-animation: zou_1 1s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes zou_1{
	from{
		transform: translateY(0);
	}
	to{
		transform: translateY(35rem);
	}
}




@-webkit-keyframes chang_1{

	from{
		opacity: 1;
	}
	to{
		opacity: 0.5;
	}
}


.action_2 .left .chang_22_2,.action_3 .left .chang_33_2{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 11;
	opacity: 0.5;
	-webkit-animation: chang_2 2s 2s linear infinite;
	display: none;
}
@-webkit-keyframes chang_2{

	from{
		opacity: 0.5;
	}
	to{
		opacity: 1;
	}
}



@-webkit-keyframes chang_3{

	from{
		opacity: 0.5;
	}
	to{
		opacity: 1;
	}
}



.action .box_1{
	position: absolute;
	/* padding-top: 1rem; */
	top: 0.2rem;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #fff;
	/* transition: height 1s; */
}
/*.action .box_1_1{
	height:78%;
}*/





.action_1 .left .pang_11,.action_2 .left .pang_11,.action_3 .left .pang_11,.action_4 .left .pang_11,.action_5 .left .pang_11,.action_6 .left .pang_11{
	width: 13rem;
}
.action_1 .right .pang_22,.action_2 .right .pang_22,.action_3 .right .pang_22,.action_4 .right .pang_22,.action_5 .right .pang_22{
	width: 13rem;
}
.action_6 .right .pang_2{
	width: 1rem;
	-webkit-transition: width 0.1s !important;
}
.action_6 .right .pang_22{
	width: 1.1rem;

}
/*镜头1/2/3右屏*/

/*右侧场景*/



/*@-webkit-keyframes chang_3_1{
	from{
		opacity: 0.6;
	}
	to{
		opacity: 1;
	}
}*/
.action_1 .right .chang_11_4,.action_2 .right .chang_22_4,.action_3 .right .chang_33_4{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	/*-webkit-animation: chang_4 2s linear infinite;*/
}
/*@-webkit-keyframes chang_4{
	from{
		opacity: 1;
	}
	to{
		opacity: 0.6;
	}
}*/
.action_1 .right .chang_11_5,.action_2 .right .chang_22_5,.action_3 .right .chang_33_5{
	position: absolute;
	top: 0;
	left: 0;
	width: 107%;
	height: 100%;
	/*opacity: 0.6;*/
	/*-webkit-animation: chang_5 2s 2s linear infinite;*/
}
/*@-webkit-keyframes chang_5{
	from{
		opacity: 0.6;
	}
	to{
		opacity: 1;
	}
}*/

/*胶片移动*/
.action .kuai{
	position: absolute;
	width: 16rem;
	height: 100%;
	z-index: 1000;
	pointer-events: none;

}
.action .kuai img{
	width: 100%;
	margin-top: -206rem;
	opacity: 0;

}

.action .kuai .zou1{
	-webkit-animation: zou 1s linear;
	-webkit-animation-fill-mode: forwards;
}
.action .kuai .zou2{
	-webkit-animation: zou 1s linear;
	-webkit-animation-fill-mode: forwards;
}
.action .kuai .zou3{
	-webkit-animation: zou 1s linear;
	-webkit-animation-fill-mode: forwards;
}
.action .kuai .zou4{
	-webkit-animation: zou 1s linear;
	-webkit-animation-fill-mode: forwards;
}
.action .kuai .zou5{
	-webkit-animation: zou 1s linear;
	-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes zou{
	from{
		opacity: 0;
		transform: translateY(0);
	}
	50%{
		opacity: 1;
		transform: translateY(45rem);
	}
	100%{
		opacity: 0;
		transform: translateY(90rem);
	}
}
/*胶片反向运动*/
.action .kuai .zou_1_1{
	-webkit-animation: zou_2 1s linear;
	-webkit-animation-fill-mode: forwards;
}
.action .kuai .zou_2_1{
	-webkit-animation: zou_2 1s linear;
	-webkit-animation-fill-mode: forwards;
}
.action .kuai .zou_3_1{
	-webkit-animation: zou_2 1s linear;
	-webkit-animation-fill-mode: forwards;
}
.action .kuai .zou_4_1{
	-webkit-animation: zou_2 1s linear;
	-webkit-animation-fill-mode: forwards;
}
.action .kuai .zou_5_1{
	-webkit-animation: zou_2 1s linear;
	-webkit-animation-fill-mode: forwards;
}
.action .kuai .zou_6_1{
	-webkit-animation: zou_2 1s linear;
	-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes zou_2{
	from{
		opacity: 0;
		transform: translateY(0);
	}
	50%{
		opacity: 1;
		transform: translateY(-45rem);
	}
	100%{
		opacity: 0;
		transform: translateY(-90rem);
	}
}
/*镜头反向运动*/
.action .zou_3{
	-webkit-animation: zou_3 1s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes zou_3{
	from{
		transform: translateY(0);
	}
	to{
		transform: translateY(-35rem);
	}
}

/*转场*/
.guo{
	position: absolute;
	top: 0;
	left: 0;
	width: 16rem;
	height: 100%;
	margin: 0;
	display: none;
	padding: 0;
}
.guo .bg_33,.guo .bg_44{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.guo .bg_33_1{
	-webkit-animation: chu 2s 3s linear;
	-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes chu{
	from{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
.guo .bg_44_1{
	-webkit-animation: chu2 2s 1s linear;
	-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes chu2{
	from{
		opacity: 0;
		transform: scale(1);
	}

	to{
		opacity: 1;
		transform: scale(3);
	}
}
.guo li{
	list-style: none;
	float: left;
}
.guo .guo_1{
	position: absolute;
	width: 0.9rem;
	height: 16rem;
	background: url(../img/guo/guo_1.png) no-repeat;
	background-size: 100% 100%;
	top: 50%;
	margin-top: -8rem;
	left: 10rem;
	opacity: 0;
	-webkit-animation: first_out 3s  linear;
	-webkit-animation-fill-mode: forwards;
}
.guo .guo_2{
	position: absolute;
	width: 0.9rem;
	height: 12rem;
	background: url(../img/guo/guo_2.png) no-repeat;
	background-size: 100% 100%;
	top: 50%;
	margin-top: -6rem;
	left: 7.7rem;
	opacity: 0;
	-webkit-animation: first_out 5s 3s linear;
	-webkit-animation-fill-mode: forwards;
}

.guo .guo_3{
	position: absolute;
	width: 1.3rem;
	height: 9rem;
	background: url(../img/guo/guo_3.png) no-repeat;
	background-size: 100% 100%;
	top: 50%;
	margin-top: -4.5rem;
	left: 5.3rem;
	opacity: 0;
	-webkit-animation: first_out 4s 7s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes out{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.guo .chu{
	-webkit-animation: opa 3s  linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes opa{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
.zhuo{
	position: absolute;
	top: 0;
	left: 0;
	width: 16rem;
	height: 100%;
	background: url(../img/guo/zhuo.png) no-repeat;
	background-size: 100% 100%;
	display: none;
	-webkit-animation: ru 2s  linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes ru{
	0% {
		transform: scale(3) translateX(2rem);
	}
	100% {
		transform: scale(1) translateX(0);
	}
}

.logo_1{
	-webkit-animation: logo 3s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes logo{
	from{
		transform: scale(1);
		opacity: 0;
	}

	to{
		transform: scale(2);
		opacity: 1;
	}
}
.zhuo .shu_box{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 19rem;
	/* background: url(../img/guo/shu.png) no-repeat; */
	/* background-size: 100% 100%; */
	margin-left: -9rem;
	height: 17rem;
	margin-top: -8.5rem;
}
.zhuo .shu_box .shu{
	position: absolute;
	width: 100%;
	height: 100%;
	margin-left: 1.5rem;
}
.zhuo .shu_box .shu1,.zhuo .shu_box .shu2,.zhuo .shu_box .shu3,.zhuo .shu_box .shu4,.zhuo .shu_box .shu5{
	position: absolute;
	width: 100%;
	height: 100%;
	margin-left: 1.5rem;
	opacity: 0;
}
.zhuo .shu_box .shu00{
	-webkit-animation: shu00 0.5s linear;
	-webkit-animation-fill-mode: forwards;
}
.zhuo .shu_box .shu11{
	-webkit-animation: shu 1s 0.7s linear;
	-webkit-animation-fill-mode: forwards;
}
.zhuo .shu_box .shu22{
	-webkit-animation: shu 1s 0.8s linear;
	-webkit-animation-fill-mode: forwards;
}
.zhuo .shu_box .shu33{
	-webkit-animation: shu 1s 0.9s linear;
	-webkit-animation-fill-mode: forwards;
}
.zhuo .shu_box .shu44{
	-webkit-animation: shu 1s 1s linear;
	-webkit-animation-fill-mode: forwards;
}
.zhuo .shu_box .shu55{
	-webkit-animation: shu11 1s 1.1s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes shu00{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
@-webkit-keyframes shu{
	from{
		opacity: 0;

	}
	10%{
		opacity: 1;
	}
	90%{
		opacity: 1;
	}
	to{
		opacity: 0;

	}
}
@-webkit-keyframes shu11{
	from{
		opacity: 0;
	}
	10%{
		opacity: 1;
	}
	90%{
		opacity: 1;
	}
	to{
		opacity: 1;

	}
}

.zhuo .shu_box .tishi_1{
	position: absolute;
	width: 1rem;
	/* height: 1rem; */
	left: 50%;
	margin-left: -3.5rem;
	top: 80%;
	margin-top: 0.5rem;
	opacity: 0;
	-webkit-animation: tishi 1s linear infinite;
}
.zhuo .shu_box .tishi_2{
	position: absolute;
	width: 1rem;
	/* height: 1rem; */
	left: 50%;
	margin-left: -3.5rem;

	top: 80%;
	margin-top: 0.5rem;
	/*display: none;*/
	opacity: 0;
	-webkit-animation: tishi 1s 1.5s linear infinite;
}
@-webkit-keyframes tishi{
	from{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
.zhuan{
	-webkit-animation: zhuan 2s linear;
	/*-webkit-animation-fill-mode: forwards;*/
	transform-style: preserve-3d;
	transform-origin:top;
}
@-webkit-keyframes zhuan{
	from{
		transform: rotateX(0deg);
	}
	to{
		transform: rotateX(150deg);
	}
}
/*翻书页*/
#cont{
	width: 100%;
	height: 100%;
	opacity: 0;
	 /*display: none;*/ 
	pointer-events: none;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%) rotateZ(90deg);
}

.flipbook-viewport{
	overflow:hidden;
	width:100%;
	height:100%;
	/*display: none;*/

}

.flipbook-viewport .container{
	position: absolute;
	width: 80%;
	height: 80%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	/* margin: auto; */
}

.flipbook-viewport .flipbook{
	width:100%;
	height:100%;
	/*position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotateZ(90deg);*/
}

.flipbook-viewport .page{
	width:100%;
	height:100%;
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.flipbook .page{
	-webkit-box-shadow:0 0 50px rgba(0,0,0,1);
	-moz-box-shadow:0 0 30px rgba(0,0,0,0.6);
	-ms-box-shadow:0 0 30px rgba(0,0,0,0.6);
	-o-box-shadow:0 0 30px rgba(0,0,0,0.6);
	box-shadow:0 0 50px rgba(0,0,0,1);
}

.flipbook-viewport .page img{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
	/*margin-left:-20px ;*/
}

.flipbook-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow: 0 0 60px rgba(0,0,0,1);
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow: 0 0 60px rgba(0,0,0,1);
	-webkit-transition: all 0.5s;
}
.r1{
	position: absolute;
	top: 52%;
	left: 8%;
	width: 14%;
	opacity: 0;
}
.anim .r1{
	-webkit-animation: ar6 2s 3s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}

.r2{
	position: absolute;
	top: 33%;
	left: 37%;
	width: 10%;
	opacity: 0;
	/*-webkit-animation: ren1 3s 3s ease-in-out;
    -webkit-animation-fill-mode: forwards;*/
}
.anim .r2{
	-webkit-animation: ren1 3s 5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}

.r3{
	position: absolute;
	top: 35.5%;
	width: 10.1%;
	left: 58.5%;
	opacity: 0;
	/*-webkit-animation: ren1 3s 6s ease-in-out;
    -webkit-animation-fill-mode: forwards;*/
}
.anim .r3{
	-webkit-animation: ren1 3s 8s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
.r4{
	position: absolute;
	top: 50.6%;
	width: 16.9%;
	left: 57.7%;
	opacity: 0;
	/*-webkit-animation: ren1 6s 9s ease-in-out;
    -webkit-animation-fill-mode: forwards;*/
}
.anim .r4{
	-webkit-animation: ren4 6s 11s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes ren4{
	from{
		opacity: 0;
	}
	10%{
		opacity: 1;
	}
	90%{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
.r5{
	position: absolute;
	bottom: 7%;
	width: 11%;
	right: 1%;
	opacity: 0;
	/*-webkit-animation: ren1 4s 14s ease-in-out;
    -webkit-animation-fill-mode: forwards;*/
}
.anim .r5{
	-webkit-animation: ar8 3s 16s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
.zi1{
	position: absolute;
	display: block;
	width: 4.3%;
	height: 0%;
	top: 6%;
	background: url(../image/zi1.png) no-repeat top;
	background-size: 100% auto;
	left: 3%;
	z-index: 99;
}
.anim .zi1{
	transition: height 6s 3s linear;
	height: 94%;
}


.r6{
	position: absolute;
	width: 15%;
	bottom: 0;
	left: -1%;
	opacity: 0;
	-webkit-transform: translateX(-100%);
}
.anim .r6{
	-webkit-animation: ar6 2s 1s linear;
	-webkit-animation-fill-mode: forwards;

}

@-webkit-keyframes ar6 {
	from{
		opacity: 0;
		-webkit-transform: translateX(-50%);
	}
	70%{
		opacity: 1;
		-webkit-transform: translateX(0);
	}
	to{
		opacity: 0;
		-webkit-transform: translateX(0);
	}

}

.r7{
	position: absolute;
	width: 24.5%;
	top: 49.8%;
	left: 32.5%;
	opacity: 0;
}
.anim .r7{
	-webkit-animation: ren7 7s 4s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes ren7{
	from{
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
.r8{
	position: absolute;
	width: 21%;
	bottom: 0%;
	left: 79%;
	opacity: 0;
}
.anim .r8{
	-webkit-animation: ar8 4s 11s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes ar8 {
	from{
		opacity: 0;
		-webkit-transform: translateX(0);
	}
	50%{
		opacity: 1;
		-webkit-transform: translateX(0);
	}
	to{
		opacity: 0;
		-webkit-transform: translateX(50%);
	}

}

.yan1{
	position: absolute;
	top: 57%;
	left: 48%;
	width: 8%;
	opacity: 1;
	-webkit-animation: yan 2s linear infinite;
	-webkit-animation-fill-mode: forwards;
}
.yan2{
	position: absolute;
	top: 40%;
	left: 46%;
	width: 10%;
	opacity: 0.8;
	-webkit-animation: yan1 2s 1.5s linear infinite;
	-webkit-animation-fill-mode: forwards;
}
.yan3{
	position: absolute;
	top: 38%;
	left: 45%;
	width: 9%;
	opacity: 0.8;
	-webkit-animation: yan1 2s 3s linear infinite;
	-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes yan{
	from{
		opacity: 1;
	}
	to{
		opacity: 0.7;
	}
}
@-webkit-keyframes yan1{
	from{
		opacity: 0.8;
	}
	to{
		opacity: 1;
	}
}
.zi2{
	position: absolute;
	display: block;
	width: 3.8%;
	height: 0%;
	top: 6%;
	left: 4%;
	background: url(../image/zi2.png) top no-repeat;
	background-size: 100%;
	z-index: 99;
}
.anim .zi2{
	height: 96%;
	transition: height 6s 3s linear;
}
.r9{
	position: absolute;
	width: 20%;
	top: 29%;
	left: 3%;
	opacity: 0;
}
.anim .r9{
	-webkit-animation: ar6 2s 1.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
.r10{
	position: absolute;
	width: 25%;
	top: 34%;
	left: 27%;
	opacity: 0;
}
.anim .r10{
	-webkit-animation: ren10 6s 3.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes ren10{
	from{
		opacity: 0;
	}
	30%{
		opacity: 1;

	}
	70%{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
.r11{
	position: absolute;
	width: 19%;
	bottom: 23%;
	left: 72.5%;
	opacity: 0;
}
.anim .r11{
	-webkit-animation: ren1 4s 8.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
.zi3{
	position: absolute;
	display: block;
	width: 4.7%;
	height: 0%;
	top: 18%;
	right: 3%;
	background: url(../image/zi3.png) no-repeat;
	background-size: 100%;
	z-index: 99;
}
.anim .zi3{
	height: 94%;
	transition: height 6s 3s linear;
}
.r12{
	position: absolute;
	width: 13%;
	top: 17%;
	left: 3.5%;
	opacity: 0;
}
.anim .r12{
	-webkit-animation: ar6 2s 2s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
.r13{
	position: absolute;
	width: 20%;
	top: 9%;
	left: 64%;
	opacity: 0;
}
.anim .r13{
	-webkit-animation: ren13 9s 5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes ren13{
	from{
		opacity: 0;
	}
	10%{
		opacity: 1;
	}
	90%{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
.r14{
	position: absolute;
	width: 13%;
	bottom: 22%;
	left: 82%;
	opacity: 0;
}
.anim .r14{
	-webkit-animation: ren1 3s 14s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
.zi4{
	position: absolute;
	display: block;
	width: 4%;
	height: 0%;
	top: 5%;
	background: url(../image/zi4.png) no-repeat;
	background-size: 100%;
	left: 3%;
	z-index: 99;
}
.anim .zi4{
	transition: height 6s 3s linear;
	height: 96%;
}
.r15{
	position: absolute;
	width: 14%;
	top: 7%;
	left: 87%;
	opacity: 0;
}
.anim .r15{
	-webkit-animation: ar15 3s 2s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes ar15 {
	from{
		opacity: 0;
		-webkit-transform: translateX(0px);
	}
	50%{
		opacity: 1;
		-webkit-transform: translateX(-25px);
	}
	100%{
		opacity: 0;
		-webkit-transform: translateX(-50px);
	}
}
.r16{
	position: absolute;
	width: 19%;
	top: 27%;
	left: 58%;
	opacity: 0;
}
.anim .r16{
	-webkit-animation: ren1 3s 4s linear;
	-webkit-animation-fill-mode: forwards;
}
.r17{
	position: absolute;
	width: 29%;
	top: 35%;
	left: 70%;
	opacity: 0;
}
.anim .r17{
	-webkit-animation: ar17 3s 7s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes ar17 {
	from{
		opacity: 0;
		-webkit-transform: translateX(0px);
	}
	50%{
		opacity: 1;
		-webkit-transform: translateX(25px);
	}
	to{
		opacity: 0;
		-webkit-transform: translateX(50px);
	}
}
.zi5{
	position: absolute;
	display: block;
	width: 4.5%;
	height: 0%;
	background: url(../image/zi5.png) no-repeat;
	background-size: 100%;
	left: 3%;
	z-index: 99;
	top: 4%;
}
.anim .zi5{
	transition: height 6s 3s linear;
	height: 94%;
}
.r18{
	position: absolute;
	width: 10%;
	top: 37%;
	left: 72%;
	opacity: 1;
}
.anim1 .r18{
	-webkit-animation: ren 3s 0.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
.r19{
	position: absolute;
	width: 20%;
	left: 56%;
	top: 33%;
	opacity: 0;
}
.anim1 .r19{
	-webkit-animation: ren1 4s 1.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
.r20{
	position: absolute;
	width: 48%;
	left: 28%;
	top: 25%;
	opacity: 0;

}
.anim1 .r20{
	-webkit-animation: ren2 3s 3.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}


.r21{
	position: absolute;
	width: 23%;
	top: 22%;
	left: 2%;
	opacity: 0;
}
.anim1 .r21{
	-webkit-animation: ren1 3s 2s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
.r22{
	position: absolute;
	width: 16%;
	left: 29%;
	top: 24%;
	opacity: 0;
}
.anim1 .r22{
	-webkit-animation: ren2 3s 3.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
.r23{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.anim .r23{
	-webkit-animation: ren1 1.1s 9s linear;
	-webkit-animation-fill-mode: forwards;
}
.r24{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.anim .r24{
	-webkit-animation: ren1 1.1s 9s linear;
	-webkit-animation-fill-mode: forwards;
}


.r25{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.anim1 .r25{
	-webkit-animation: ren2 3s 7s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
.luo1{
	position: absolute;
	top: 30%;
	left: 10%;
	width: 80%;
	opacity: 0;
}
.anim1 .luo1{
	-webkit-animation: luo11 2s 9s linear;
	-webkit-animation-fill-mode: forwards;
}
.luo2{
	position: absolute;
	top: 50%;
	left: 32%;
	width: 40%;
	opacity: 0;
}
.anim1 .luo2{
	-webkit-animation: luo11 2s 8s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes luo11{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
@-webkit-keyframes ren2{
	from{
		opacity: 0;
	}

	to{
		opacity: 1;
	}

}
.flipbook #end_1{
	position: absolute;
	width: 100%;
	height: 100%;
}
.bg_11{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;

}
.bg_22{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
}
.bg_11_1{
	-webkit-animation: bg 0.2s 0.2s linear infinite;
}
.bg_22_1{
	-webkit-animation: bg_1 0.2s 0.4s linear infinite;
}
@-webkit-keyframes bg{
	from{
		opacity: 1;
	}
	to{
		opacity: 0.5;
	}
}
@-webkit-keyframes bg_1{
	from{
		opacity: 0.4;
	}
	to{
		opacity: 1;
	}
}

.luo3{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 45%;
	margin-left: 50%;
	margin-top: -20%;

}
.luo3_1{
	-webkit-animation: luo3 0.5s 0.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes luo3{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(-130%);
	}
}
.she{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 47%;
	margin-left: -45%;
	margin-top: -25%;
}
.hand_1{
	position: absolute;
	top: -13%;
	left: 6%;
	width: 20%;
	opacity: 0;
}
.hand_1_1{
	-webkit-animation: hand_1_1 1s 6s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes hand_1_1{
	from{
		opacity: 0;
		transform: translate(-15%,-20%);
	}
	50%{
		opacity: 1;
		transform: translate(0,0);
	}
	to{
		opacity: 0;
		transform: translate(0,0);
	}
}
.flipbook .ren1{
	-webkit-animation: ren1 5s   ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
.flipbook .ren{
	-webkit-animation: ren 2s 1s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes ren{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
@-webkit-keyframes ren1{
	from{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
.zi11,.zi22,.zi33,.zi44,.zi55{
	width: 12rem;
}
.number_box{
	position: absolute;
	z-index: 999;
	width: 100%;
	height: 100%;
	background: url(../img/loding/loding.png) no-repeat 1% center;
	background-size: 18rem;
}
.number_box::after{
	content: '';
	display: block;
	position: absolute;
	left: 56.6%;
	top: 49.6%;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: #271C18;
	-webkit-transform: translate(-50%,-50%);
}
.number_box .sz{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3rem;
	margin-left: 1.1rem;
	margin-top: -0.1rem;
	-webkit-animation: rot 15s linear infinite;
	transform-origin: 0 0;
}
@-webkit-keyframes rot{
	from{
		transform: rotateZ(0deg);
	}
	to{
		transform: rotateZ(360deg);
	}
}
.number_box .fz{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.5rem;
	margin-left: 1.1rem;
	-webkit-animation: rot2 3s linear infinite;
	transform-origin: 0 0;
}
@-webkit-keyframes rot2{
	from{
		transform: rotateZ(0deg);
	}
	to{
		transform: rotateZ(360deg);
	}
}
.number_box .beijing{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -2.1rem;
	margin-left: 3.5rem;
	width: 1rem;
	opacity: 0;
}
.bh{
	-webkit-animation: turn 4s linear ;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes turn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.number_box .huijia{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.2rem;
	margin-top: -2.2rem;
	margin-left: 2rem;
	opacity: 0;
}
.number{
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	z-index: 999;
	left: 10%;
	margin-top: -50px;
	margin-left: -50px;
	line-height: 100px;
	font-family: "微软雅黑";
	text-align: center;
	font-size: 20px;
	color: #ff6600;
	-webkit-transform: rotateZ(90deg);
}

/**/
#cont.iframe{
	opacity: 1;
	pointer-events: auto;
	-webkit-animation: jin 2s  linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes jin{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}



/*cont*/
.double{
	background-color: #ff0000;
}

.hide{
	display: none;
}
.show{
	display: block;
}
/*first*/
.dangao{
	position: absolute;
	right: 22%;
	top: 60%;
	width: 28%;
	overflow: hidden;
	-webkit-transform: translateY(60px);
	-webkit-animation: dangao 4s 2s cubic-bezier(0, 0, 0.15, 0.91);
	-webkit-animation-fill-mode: forwards;
}
.dangao img{
	width: 100%;
	display: block;
}
@-webkit-keyframes dangao{
	from{
		-webkit-transform: translateY(60px);
	}
	to{
		-webkit-transform: translateY(-20px);
	}
}
.camera{
	position: absolute;
	left: 3rem;
	top: 12%;
	width: 6rem;
	height: 14rem;
	z-index: 1000;
	/*-webkit-transition: all 1s;*/
}
.camera.mini{
	left: 0.3rem;
	top: 0.3rem;
	-webkit-transform: scale(0.46);
	-webkit-transform-origin: left top;
}
.camera>img{
	width: 100%;
	height: 100%;
	position: absolute;
}
.jiaojuan{
	position: absolute;
	left: 3.8rem;
	top: 0.7rem;
	width: 5.2rem;
	height: 5.2rem;
	border-radius: 50%;
	background: url(../img/kaichang/guo/lun.png);
	background-size: 100% 100%;
}
.anim .jiaojuan{
	-webkit-animation: jiaojuan 6s linear infinite;
}
.j2{
	width: 4.5rem;
	height: 4.5rem;
	left: 5.7rem;
	top: 6.3rem;
}
@-webkit-keyframes jiaojuan{
	from{
		-webkit-transform: rotateZ(0deg);
	}
	to{
		-webkit-transform: rotateZ(360deg);
	}
}
.daizi{
	position: absolute;
	left: 6.3rem;
	top: 5rem;
	width: 6rem;
	height: 0.4rem;
	background: url(../img/kaichang/guo/daizi.png) repeat-x;
	background-size: auto 100%;
	transform: rotateZ(76deg);
}
.anim .daizi{
	-webkit-animation: daizi 3s linear infinite;
}
@-webkit-keyframes daizi{
	from{
		background-position-x: 0;
	}
	to{
		background-position-x: 6rem;
	}
}
.d2{
	left: 1.9rem;
	top: 6rem;
	transform: rotateZ(71deg);
}
.anim .d2{
	-webkit-animation: daizi2 3s linear infinite;
}
@-webkit-keyframes daizi2{
	from{
		background-position-x: 0;
	}
	to{
		background-position-x: -6rem;
	}
}
.camera .gg{
	position: absolute;
	top: 87%;
	left: -2rem;
	width: 9.5rem;
	height: 10rem;
}
.camera .gg li{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0;
}
.camera .gg img{
	width: 100%;
}
.anim .g1{
	-webkit-animation: act_gg 6s linear infinite;
}
.anim .g2{
	-webkit-animation: act_gg 6s 2s linear infinite;
}
.anim .g3{
	-webkit-animation: act_gg 6s 4s linear infinite;
}
@-webkit-keyframes act_gg{
	from{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
.camera .bt-left,.camera .bt-right{
	position: absolute;
	left: -1.45rem;
	top: 5.3rem;
	width: 1.4rem;
	height: 1.4rem;
	padding: 50%;
}
.camera .bt-left{
	top: 0.3rem;
	padding-bottom: 0;
}
.camera .bt-right{
	padding-top: 0;
}


/*zimu1*/
.kaichang .zi_11{
	list-style: none;
	position: absolute;
	top: 50%;
	width: 1.2rem;
	margin-top: -8.2rem;
	left: 50%;
	margin-left: -0.6rem;


}
.kaichang .zi_22{
	list-style: none;
	position: absolute;
	top: 50%;
	width: 0.8rem;
	margin-top: -5.8rem;
	left: 50%;
	margin-left: -0.4rem;

}
.kaichang .zi_33{
	list-style: none;
	position: absolute;
	top: 50%;
	width: 1.6rem;
	margin-top: -9.8rem;
	left: 50%;
	margin-left: -0.8rem;

}
.kaichang .zi_44{
	list-style: none;
	position: absolute;
	top: 50%;
	width: 1.4rem;
	margin-top: -9.7rem;
	left: 50%;
	margin-left: -0.7rem;

}
.kaichang .zi_55{
	list-style: none;
	position: absolute;
	top: 50%;
	width: 1.7rem;
	margin-top: -6.5rem;
	left: 50%;
	margin-left: -0.85rem;

}
.kaichang .zi_11 img,.kaichang .zi_22 img,.kaichang .zi_33 img,.kaichang .zi_44 img,.kaichang .zi_55 img{
	display: block;
	width: 100%;
}

.kaichang li{
	opacity: 0;
	-webkit-transform: translateX(-60px);
}
/*du1*/
.anim .zi_11 {
	-webkit-animation: kc_out 5s 2s linear;
	-webkit-animation-fill-mode: forwards;
}
.anim .zi_22{
	-webkit-animation: kc_out 5s 6s linear;
	-webkit-animation-fill-mode: forwards;
}
.anim .zi_33{
	-webkit-animation: kc_out 7s 10s linear;
	-webkit-animation-fill-mode: forwards;
}
.anim .zi_44{
	-webkit-animation: kc_out 8s 16s linear;
	-webkit-animation-fill-mode: forwards;
}
.anim .zi_55{
	-webkit-animation: kc_out 5s 23s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes kc_out {
	from{
		opacity: 0;
		-webkit-transform: translateX(-60px);
	}
	20%{
		opacity: 1;
		-webkit-transform: translateX(0px);
	}
	80%{
		opacity: 1;
		-webkit-transform: translateX(0px);
	}
	100%{
		opacity: 0;
		-webkit-transform: translateX(60px);
	}
}
.camera .hand{
	position: absolute;
	left: -3rem;
	top: -4rem;
	width: 4rem;
	height: 5rem;
	opacity: 0;
}
.an .hand{
	-webkit-animation: handmove 1.4s linear;
	-webkit-animation-fill-mode: forwards;
	opacity: 1;
}
@-webkit-keyframes handmove{
	from{
		-webkit-transform: translateY(-5rem);
	}
	70%{
		-webkit-transform: translateY(0rem);
	}
	to{
		-webkit-transform: translateY(-5rem);
	}
}
/*.action_1::after,.action_2::after,.action_3::after,.action_4::after,.action_5::after,.action_6::after{
    content: '';
    display: block;
    width: 13rem;
    height: 3rem;
    position: absolute;
    top: calc(50% - 1.5rem);
    left: -0.5rem;
    background: url(../img/kaichang/guo/ge.png);
    background-size: 100% 100%;
    z-index: 999;
	pointer-events: none;
}*/
.action_2::after{
	top: 46.2%;
}
.action_3::after{
	top: 44.5%;
}
.action .left .pang_1{
	bottom: 0.25rem;
}
.action_1 .right .pang_2{
	top: 0.5rem;
}
.action .action_2 .left .pang_1{
	bottom: 0rem;
}
.action .action_2 .right .pang_2{
	top: 0.4rem;
}
.action .action_3 .left .pang_1{
	bottom: 0.1rem;
}
.action .action_3 .right .pang_2{
	top: 0.35rem;
}
.action_4 .right .pang_2{
	top: 0.35rem;
}
.action_5 .right .pang_2{
	top: 0.5rem;
}
/*带子
.flipbook::before{
	content: '';
	position: absolute;
	left: 35.2%;
	bottom: -4.5%;
	width: 15.6%;
	height: 12%;
	background: url(../img/daizi.png) no-repeat;
	background-size: 100% 100%;
}
*/

/*cont anim */
.p1_2,.p1_3,.p1_4,.p1_5,.p1_6,.p1_7,.p1_8,.p1_9{
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
}
.anim .p1_2,.anim1 .p1_2{
	-webkit-animation: ren2 1s linear;
	-webkit-animation-fill-mode: forwards;
}
.anim .p1_3{
	-webkit-animation: ren2 1s 0.5s linear;
	-webkit-animation-fill-mode: forwards;
}
.anim .p1_4,.anim .p1_4{
	-webkit-animation: ren2 1s 1s linear;
	-webkit-animation-fill-mode: forwards;
}
.anim .p1_5{
	-webkit-animation: ren2 1s 1s linear;
	-webkit-animation-fill-mode: forwards;
}
.anim .p1_6{
	-webkit-animation: ren2 1s 2s linear;
	-webkit-animation-fill-mode: forwards;
}
.anim .p1_7{
	-webkit-animation: ren2 1s 3s linear;
	-webkit-animation-fill-mode: forwards;
}
.anim .p1_8{
	-webkit-animation: ren2 1s 4s linear;
	-webkit-animation-fill-mode: forwards;
}
.anim .p1_9{
	-webkit-animation: ren2 1s 5s linear;
	-webkit-animation-fill-mode: forwards;
}
.page.odd::after,.page.even::after{
	content: '';
	display: block;
	position: absolute;

	bottom: 2%;
	width: 12%;
	height: 11%;
	background: url(../img/tishi1.png) no-repeat;
	background-size: 100% 100%;
	-webkit-animation: tishi1 2s ease-out infinite;
	-webkit-transform-origin: 50% 100%;
}
.page.odd::after{
	right: 2%;
}
.page.even::after{
	left: 2%;
}
@-webkit-keyframes tishi1 {
	from{
		opacity: 1;
	}
	50%{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.f_logo{
	position: absolute;
	right: 11%;
	top: 14%;
	width: 37%;
	opacity: 0;
	-webkit-transition: all 2s 1.5s;
	-webkit-transform: translateY(-30px);
}
.anim .f_logo{
	opacity: 1;
	-webkit-transform: translateY(0px);
}
.bird{
	position: absolute;
	left: 30%;
	top: 20%;
	width: 15%;
	-webkit-transition: all 6s 1.5s;
	-webkit-transform: translateX(-30px) scale(0.7);
}
.anim .bird{
	-webkit-transform: translateX(0px) scale(1.2);
}
.code1,.code2{
	position: absolute;
	top: 46%;
	width: 40%;
	left: 5%;
	text-align: center;
	font-size: 20%;
	color: #271C18;
	font-family: '微软雅黑';
	font-weight: 400;
}
.code2{
	left: 49%;
}
.code1 img,.code2 img,.code3 img,.code4 img{
	display: block;
	width: 100%;
	margin-bottom: 4%!important;
}

.code3,.code4{
	position: absolute;
	top: 46.9%;
	width: 28%;
	left: 19.2%;
	text-align: center;
	font-size: 12px;
	color: #271C18;
	font-family: '微软雅黑';
	font-weight: 400;
	-webkit-transform: rotateZ(90deg);
}
.code3{
	top: 29.4%;
}
.back{
	position: fixed;
	width: 1.4rem;
	bottom: 5%;
	right: 4%;
	z-index: 999;
}

/**/
.ying{
	position: absolute;
	left: -5%;
	top: 78%;
	width: 44%;
	opacity: 0;
}
.z_guang{
	position: absolute;
	left: -3%;
	top: 0%;
	width: 40%;
	opacity: 0;
}
.rz{
	position: absolute;
	left: 6%;
	top: 32%;
	width: 24%;
	opacity: 0;
}
.anim .z_guang,.anim .ying,.anim .rz{
	-webkit-transition: all 3s;
	opacity: 1;
}
.t1{
	position: absolute;
	left: 42%;
	top: 32%;
	width: 58%;
	opacity: 0;
	-webkit-transform: translateY(-15px);
}
.t2{
	position: absolute;
	left: 42%;
	top: 56%;
	width: 52%;
	opacity: 0;
	-webkit-transform: translateY(-15px);
}
.t3{
	position: absolute;
	left: 36%;
	top: 44%;
	width: 58%;
	opacity: 0;
	-webkit-transform: translateY(-15px);
}
.t4{
	position: absolute;
	left: 42%;
	top: 68%;
	width: 35%;
	opacity: 0;
	-webkit-transform: translateY(-15px);
}
.anim .t1{
	-webkit-transition: all 1s 1s;
	opacity: 1;
	-webkit-transform: translateY(0px);
	-webkit-animation: outzi 1s 13s linear;
	-webkit-animation-fill-mode: forwards;
}
.anim .t2{
	-webkit-transition: all 1s 3s;
	opacity: 1;
	-webkit-transform: translateY(0px);
	-webkit-animation: outzi 1s 13s linear;
	-webkit-animation-fill-mode: forwards;
}

.anim .t3{
	-webkit-transition: all 2s 2s;
	opacity: 1;
	-webkit-transform: translateY(0px);
	-webkit-animation: outzi 1s 13s linear;
	-webkit-animation-fill-mode: forwards;
}
.anim .t4{
	-webkit-transition: all 2s 4s;
	opacity: 1;
	-webkit-transform: translateY(0px);
	-webkit-animation: outzi 1s 13s linear;
	-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes outzi {
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
.doubleBox1{
	perspective: 300px;
}
.round{
	width: 50%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #000;
}
.round2{
	left: 50%;
}
.anim .round1,.anim .round2{
	-webkit-transition: all 3s 10s;
	-webkit-transform: rotateY(40deg) translateX(-20%);
	-webkit-transform-origin: top left;
	opacity: 0;
}
.anim .round2{
	-webkit-transform: rotateY(-40deg) translateX(20%);
	-webkit-transform-origin: top right;
	opacity: 0;
}
.doubleBox1{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.anim .doubleBox1{
	-webkit-transition: all 5s 10s;
	opacity: 0;
}

/*jiaojuan */
.weix{
	position: absolute;
	left: 19%;
	bottom: 30%;
	width: 4%;
	height: 24%;
	z-index: 12;
	background: url(../img/gn.png) no-repeat no-repeat;
	background-size: 100% 100%;
	opacity: 0;
}
.block .weix{
	-webkit-transition: all 2s 2s;
	opacity: 1;
}
.snow{
	position: absolute;
	left: 78%;
	top: 32%;
	width: 2rem;
	height: 3.3rem;
	background: url(../img/snow.png);
	background-size: 100%;
	transform: rotateZ(90deg);
	-webkit-animation: snow 3s linear infinite;
}
@-webkit-keyframes snow {
	from{
		background-position-y: 0;
	}
	to{
		background-position-y: 3.3rem;
	}
}


/*kuai*/
.kuai_common{
	position: absolute;
	left: 1rem;
	top: 1rem;
	width: 5rem;
}
.kuai5{
	left: 0;
	top: 36%;
	width: 7.2rem;
	height: 34%;
	-webkit-transform: translate(-3rem,6rem);
}
.kuai4{
	left: 6rem;
	top: 36.5%;
	width: 6rem;
	height: 34%;
	-webkit-transform: translate(7rem,7rem);
}
.kuai3{
	left: 5.9rem;
	width: 6rem;
	top: 0.3rem;
	height: 37.6%;
	-webkit-transform: translate(6rem,0);
}
.kuai2{
	top: 0.3rem;
	width: 7.1rem;
	left: 3.6rem;
	height: 34%;
	-webkit-transform: translate(0,-6rem);
}
.kuai1{
	width: 6rem;
	left: 0;
	top: 0.3rem;
	height: 48%;
	-webkit-transform: translate(-6rem,0);
}
.block .kuai1{
	-webkit-transition: transform 2s ;
	-webkit-transform: translate(0,0);
}
.block .kuai2{
	-webkit-transition: transform 2s 1s;
	-webkit-transform: translate(0,0);
}
.block .kuai3{
	-webkit-transition: transform 2s 2s;
	-webkit-transform: translate(0,0);
}
.block .kuai4{
	-webkit-transition: transform 2s 2.5s;
	-webkit-transform: translate(0,0);
}
.block .kuai5{
	-webkit-transition: transform 2s 3s;
	-webkit-transform: translate(0,0);
}
.kuai_box{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 12%;
	transform: scaleY(1.3) scaleX(1.2);
	overflow: hidden;
	-webkit-transform-origin-x: 0%;
}
.twocode{
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 6rem;
	z-index: 99999;
	display: none;
}
.twocode img{
	display: block;
	width: 100%;
}
.action .action_2 .box_1{
	top: 3.2%;
}
.tc_c1{
	position: absolute;
	left: 1.2rem;
	top: 1rem;
	-webkit-transform: rotateZ(90deg);
	z-index: 99999;
	display: none;
}
.tc_c2{
	position: absolute;
	left: 1.2rem;
	bottom: 1rem;
	transform: rotateZ(90deg);
	z-index: 99999;
	display: none;
}

/*mini camera*/
.mini *{
	opacity: 0.3;
}
.mini .bt-left{
	opacity: 1;
}
.mini .bt-right{
	opacity: 1;
}

/*jt-cont*/
.jt-cont{
	position: absolute;
	width: 1.8rem;
	z-index: 12;
	opacity: 0;
}
.block .jt-cont{
	opacity: 1;
}
.action_1 .left .jt-cont{
	left: 10.5rem;
	top: 42%;
	-webkit-transition: all 2s 4s;
}
.action_1 .right .jt-cont{
	left: 7.5rem;
	top: 17%;
	-webkit-transition: all 2s 8s;
}
.action_2 .left .jt-cont{
	top: 39%;
	left: 11rem;
	-webkit-transition: all 2s 4s;
}
.action_2 .right .jt-cont{
	left: 8.5rem;
	top: 19%;
	-webkit-transition: all 2s 8s;
}
.action_3 .left .jt-cont{
	top: 43%;
	left: 6rem;
	width: 2rem;
	/*-webkit-transition: all 2s 4s;*/

}
.action_3.block .left .jt-cont{
	opacity: 0;
	-webkit-animation: wxshine 4s 4s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes wxshine {
	from{
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	40%{
		opacity: 0;
	}
	60%{
		opacity: 1;
	}
	80%{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.action_3 .right .jt-cont{
	left: 17%;
	top: 35%;
	-webkit-transition: all 2s 8s;
}
.action_4 .left .jt-cont{
	left: 4.5rem;
	top: 5rem;
	-webkit-transition: all 2s 4s;
}
.action_4 .right .jt-cont{
	left: 8.5rem;
	top: 20%;
	-webkit-transition: all 2s 8s;
}
.action_5 .left .jt-cont{
	left: 7.5rem;
	top: 57%;
	-webkit-transition: all 2s 4s;
}
.action_5 .right .jt-cont{
	left: 10.5rem;
	top: 10%;
	-webkit-transition: all 2s 8s;
}
.action_6 .left .jt-cont{
	left: 2.5rem;
	top: 31%;
	width: 3rem;
	-webkit-transition: all 3s 4s;
}
/*
.jt-c{
	position: absolute;
	width: 0.8rem;
	opacity: 0;
	-webkit-transform: translateX(-10px);
}
.block .jt-c{
	opacity: 1;
	-webkit-transform: translateX(0px);
}
.jt-c5{
	left: 6rem;
	top: 61%;
	-webkit-transition: all 2s 5s;
}
.jt-c4{
	left: 12.5rem;
	top: 64%;
	-webkit-transition: all 2s 4s;
}
.jt-c3{
	left: 3rem;
	top: 2%;
	-webkit-transition: all 2s 6s;
}
.jt-c2{
	left: 9rem;
	top: 2%;
	-webkit-transition: all 2s 3s;
}
.jt-c1{
	left: 12.6rem;
	top: 13%;
	-webkit-transition: all 2s 2s;
}*/

.a6_mesh{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-transition: opacity 2s 4s;
	background: rgba(0,0,0,0.6);
}
.block .a6_mesh{
	opacity: 1;
}
.a6_mesh img{
	position: absolute;
	opacity:0;
}
.zi12-1{
	left: 7.8rem;
	top: 18%;
	width: 2.1rem;
	-webkit-transition: opacity 2s 6s;
}
.zi12-2{
	left: 7rem;
	top: 47%;
	width: 2rem;
	-webkit-transition: opacity 2s 7s;
}
.zi12-3{
	left: 6rem;
	top: 14%;
	width: 1.4rem;
	-webkit-transition: opacity 2s 8s;
}
.zi12-4{
	left: 5rem;
	top: 35%;
	width: 1.6rem;
	-webkit-transition: opacity 2s 9s;
}
.block .a6_mesh img{
	opacity:1;
}
.zhuozi{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../img/desk-big.jpg") no-repeat center;
	background-size: auto 100%;
	display: none;
}
.zhuozi.anim{
	-webkit-transform-origin: 63% 71%;
	-webkit-animation: focus 3.5s 1s linear;
	-webkit-animation-fill-mode: forwards;

}
@-webkit-keyframes focus {
	from{
		-webkit-transform: scale(1);
	}
	to{
		-webkit-transform: scale(3.6);
	}
}


/*2-14 book  page5*/
.p511,.p512,.p513,.p514,.p5_2,.p5_21,.moveBox{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.anim .p511{
	-webkit-transition: opacity 250ms;
	opacity: 1;
}
.anim .p512{
	-webkit-transition: opacity 250ms 250ms;
	opacity: 1;
}
.anim .p513{
	-webkit-transition: opacity 250ms 500ms;
	opacity: 1;
}
.anim .p514{
	-webkit-transition: opacity 250ms 750ms;
	opacity: 1;
}
.anim .p5_21{
	-webkit-transition: opacity 0ms 750ms;
	opacity: 1;
}
.anim .p5_2{
	-webkit-animation: shu00 4s 750ms;
	-webkit-animation-fill-mode: forwards;
}

.box-left{
	background: url("../i-book/p5_left.png") no-repeat left;
	background-size: auto 100%;
}
.anim .box-left{
	-webkit-animation: boxleft 1.5s 9s cubic-bezier(0, 0.8, 0.31, 1.02);
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes boxleft {
	from{
		opacity: 1;
		-webkit-transform: translateX(-100%);
	}
	to{
		opacity: 1;
		-webkit-transform: translateX(0%);
	}
}
.box-right{
	background: url("../i-book/p5_right.png") no-repeat right;
	background-size: auto 100%;
}
.anim .box-right{
	-webkit-animation: boxright 1.5s 9s cubic-bezier(0, 0.8, 0.31, 1.02);
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes boxright {
	from{
		opacity: 1;
		-webkit-transform: translateX(100%);
	}
	to{
		opacity: 1;
		-webkit-transform: translateX(0%);
	}
}
.p5_br1,.p5_br2{
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	opacity: 0;
}
.anim .p5_br1{
	-webkit-animation: in3 2s 10s linear;
	-webkit-animation-fill-mode: forwards;
}
.anim .p5_br2{
	-webkit-animation: in3 2s 12s linear;
	-webkit-animation-fill-mode: forwards;
}

/*bg-cont 2-14*/
.bg-box,.bg-cont{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.bg-cont{
	background: #ffffff;
}
.bg-cont-bg{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transition: opacity 2s linear;
	opacity: 0;
}

.anim.bg-cont .bg-cont-bg{
	opacity: 1;
}
.bg-cont img{
	pointer-events: none;
	-webkit-transition: all 2s cubic-bezier(0.1, 0.83, 0.24, 0.97);
}

/*cont page2*/
.hua1{
	position: absolute;
	right: -0.5rem;
	top: -1rem;
	width: 30%;
	z-index: 99;
	-webkit-transform: translateX(100%);
}
.hua2{
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	width: 5%;
	z-index: 99;
	-webkit-transform: translateX(-4rem) rotateZ(290deg);
	-webkit-transform-origin: -60% 80%;
}
.hua3{
	position: absolute;
	left: 0.7rem;
	bottom: 0rem;
	width: 5%;
	z-index: 99;
	-webkit-transform: translateX(-3rem) rotateZ(-290deg);
	-webkit-transform-origin: 120% -80%;
}
.hua4{
	position: absolute;
	left: 2rem;
	bottom: 0.5rem;
	width: 5%;
	z-index: 99;
	-webkit-transform: translateX(-3rem) rotateZ(220deg);
	-webkit-transform-origin: -80% 80%;
}
.hua5{
	position: absolute;
	left: 0rem;
	bottom: 2rem;
	width: 5%;
	z-index: 99;
	-webkit-transform: translateX(-3rem) rotateZ(-260deg);
	-webkit-transform-origin: 160% -80%;
}

/*cont page3*/
.c2-phone{
	position: absolute;
	left: 0rem;
	bottom: -1rem;
	width: 12%;
	z-index: 99;
	-webkit-transform: translateX(-3rem) rotateZ(-90deg);
}
.anim img{
	-webkit-transform: translateX(0%) translateY(0%) rotateZ(0deg);
}
.c2-pen{
	position: absolute;
	right: -0.5rem;
	top: 0rem;
	width: 21%;
	z-index: 99;
	-webkit-transform: translateX(100%);
}

/*cont page4*/
.c3-panzi{
	position: absolute;
	left: -1rem;
	bottom: -1.5rem;
	width: 24%;
	z-index: 99;
	-webkit-transform: translateX(-100%);
}
.c3-mianbao{
	position: absolute;
	right: -1rem;
	bottom: 0rem;
	width: 21%;
	z-index: 99;
	-webkit-transform: translateX(100%);
}
/*cont p5*/
.c4-diezi{
	position: absolute;
	left: 0rem;
	bottom: -1rem;
	width: 22%;
	z-index: 99;
	-webkit-transform: translateY(100%);
}
/*cont p6*/
.c5-beizi{
	position: absolute;
	left: 1rem;
	bottom: 0rem;
	width: 22%;
	z-index: 99;
	-webkit-transform: translateX(-100%);
}
.c5-wenjian{
	position: absolute;
	right: -3.5rem;
	bottom: 0rem;
	width: 32%;
	z-index: 99;
	-webkit-transform: translateX(100%);
}

/*cont p6 */
.c6-1{
	position: absolute;
	left: 0rem;
	bottom: -1rem;
	width: 20%;
	z-index: 99;
	-webkit-transform: translateX(-100%);
	-webkit-transition: none;
}
.anim .c6-1{
	-webkit-animation: c61 8s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes c61 {
	from{
		-webkit-transform: translateX(-100%);
	}
	20%{
		-webkit-transform: translateX(0%);
	}
	80%{
		-webkit-transform: translateX(0%);
	}
	to{
		-webkit-transform: translateX(-100%);
	}
}
.c6-2{
	position: absolute;
	right: -2.5rem;
	top: -3rem;
	width: 36%;
	z-index: 99;
	-webkit-transform: translateX(100%);
	-webkit-transition: none;
}
.anim .c6-2{
	-webkit-animation: c62 8s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes c62 {
	from{
		-webkit-transform: translateX(100%);
	}
	20%{
		-webkit-transform: translateX(0%);
	}
	80%{
		-webkit-transform: translateX(0%);
	}
	to{
		-webkit-transform: translateX(100%);
	}
}

.c6-3{
	position: absolute;
	left: 0rem;
	bottom: 0rem;
	width: 20%;
	z-index: 99;
	-webkit-transform: translateX(-100%) !important;
	-webkit-transition: none;
}
.anim .c6-3{
	-webkit-animation: c63 2s 9s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes c63 {
	from{
		-webkit-transform: translateX(-100%);
	}
	to{
		-webkit-transform: translateX(0%);
	}
}
.c6-4{
	position: absolute;
	right: -1.5rem;
	top: 0rem;
	width: 31%;
	z-index: 99;
	-webkit-transform: translateX(100%)!important;
	-webkit-transition: none;
}
.anim .c6-4{
	-webkit-animation: c64 2s 9s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes c64 {
	from{
		-webkit-transform: translateX(100%);
	}
	to{
		-webkit-transform: translateX(0%);
	}
}

/*2-15  何处安放？*/
.big{
	-webkit-animation: big 4s 1s linear;
	-webkit-animation-fill-mode: forwards;
	-webkit-transform-origin: 36% 66%;
}
@-webkit-keyframes big {
	from{
		-webkit-transform: scale(1);
		opacity: 1;
	}
	50%{
		opacity: 1;
	}
	to{
		-webkit-transform: scale(12);
		opacity: 0;
	}
}
.r-jh{
	position: absolute;
	left: 63%;
	top: 40.5%;
	width: 16.5%;
	opacity: 0;
}
.anim .r-jh{
	-webkit-animation: ren7 4.5s 4.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
}

/*演讲 轮播*/
.lunbo{
	position: absolute;
	left: 38.5%;
	top: 3%;
	width: 36%;
	height: 37.5%;
}
.lunbo img{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
}

.anim .lunbo .lun-cont1{
	-webkit-animation: ppt 8s 6s linear infinite;
	-webkit-animation-fill-mode: forwards;
}
.anim .lunbo .lun-cont2{
	-webkit-animation: ppt 8s 8s linear infinite;
	-webkit-animation-fill-mode: forwards;
}
.anim .lunbo .lun-cont3{
	-webkit-animation: ppt 8s 10s linear infinite;
	-webkit-animation-fill-mode: forwards;
}
.anim .lunbo .lun-cont4{
	-webkit-animation: ppt 8s 12s linear infinite;
	-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes ppt {
	from{
		opacity: 0;
	}
	25%{
		opacity: 1;
	}
	50%{
		opacity: 0;
	}
	to{
		opacity: 0;
	}
}
.camera .point{
	position: absolute;
	width: 2rem;
	height: 2rem;
	left: 1.3rem;
	top: 3rem;
	opacity: 1;
	background: #ffffff;
	border-radius: 50%;
	-webkit-animation: point 3s linear infinite;
}
.camera .point1{
	top: 5rem;
}
@-webkit-keyframes point {
	from{
		opacity: 0.6;
		-webkit-transform: scale(1);
	}
	to{
		opacity: 0;
		-webkit-transform: scale(1.5);
	}
}
.heimu img{
	-webkit-transition: all 2s 13s cubic-bezier(0.1, 0.83, 0.24, 0.97);
}
.heimu .bg-cont-bg{
	-webkit-transition: all 2s cubic-bezier(0.1, 0.83, 0.24, 0.97);
}
.zhezhao{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	background: rgba(0,0,0,0.6);
	-webkit-transition: all 2s 13s cubic-bezier(0.1, 0.83, 0.24, 0.97);
}
.anim .zhezhao{
	opacity: 0;
}

/*扉页*/
.rty{
	position: absolute;
	left: 1rem;
	top: 1.6rem;
	width: 5rem;
}
.uio{
	position: absolute;
	left: 7rem;
	top: 5.6rem;
	width: 2.5rem;
}

/**/
.feng1{
	position: absolute;
	right: -2rem;
	z-index: 100;
	top: 0.5rem;
	width: 1rem;
	-webkit-animation: sin 3s linear infinite;
}
.anim .feng1{
	right: 1rem;
}
@-webkit-keyframes sin {
	from{
		-webkit-transform: translateY(0);
	}
	50%{
		-webkit-transform: translateY(1rem);
	}
	to{
		-webkit-transform: translateY(0);
	}
}

/*big-bg*/
.bg-big{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../i-bg/th-big.jpg") no-repeat center;
	background-size: 100%;
}
.anim1 .bg-big{
	-webkit-animation: big-bg 2s 1s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes big-bg {
	from{
		opacity: 1;
		-webkit-transform: scale(1);
	}
	to{
		opacity: 0;
		-webkit-transform: scale(1.2);
	}
}
.camera .fig{
	position: absolute;
	left: -1rem;
	top: 6rem;
	width: 3rem;
	height: 3rem;
	display: none;
	-webkit-animation: fig 3s linear infinite;
	pointer-events: none;
}
@-webkit-keyframes fig {
	from{
		opacity: 1;
	}
	50%{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.mini .fig{
	display: block;
}
.pb{
	position: absolute;
	left: 0rem;
	bottom: 0;
	width: 100%;
	height: 0.8rem;
	line-height: 0.8rem;
	color: #666;
	font-size: 0.5rem;
	text-align: center;
}
.pb img{
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}
.re{
	position: absolute;
	top: 15%;
	right: 1%;
	color: #fff;
	font-size: 36%;
	width: 2rem;
}

/*2-21*/
.t0{
	position: absolute;
	left: 51%;
	top: 17%;
	width: 24%;
	opacity: 0;
	-webkit-transform: translateY(-15px);
}
.anim .t0 {
	-webkit-transition: all 1s;
	opacity: 1;
	-webkit-transform: translateY(0px);
	-webkit-animation: outzi 1s 13s linear;
	-webkit-animation-fill-mode: forwards;
}
.double::after{
	content: '';
	position: absolute;
	right: 50%;
	top: 0;
	height: 100%;
	width: 40%;
	background: url("../img/shadow.png") no-repeat;
	background-size: auto 100%;
}


.lastpage{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/guo/loading2_1.jpg) no-repeat center;
	background-size: 100% 100%;
	display: none;
}
.lastpage_ul{
	width: 80px;
    height: 300px;
    position: absolute;
    left: 60%;
    top: 50%;
    margin-top: -150px;
}
.lastpage_ul li{
	float: right;
    width: 30px;
    margin-left: 10px;
    opacity: 0;
}
.lastpage_ul li img{
	width: 100%;
}
.fadein_0{
	-webkit-animation: in 2s 1s linear;
	-webkit-animation-fill-mode: forwards;
}
.fadein_1{
	-webkit-animation: in 2s 1.5s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes in{ 
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.lastpage_bottom{
	position: absolute;
    left: -180px;
    top: 50%;
    width: 150px;
    height: 600px;
    margin-top: -300px;
}
.lastpage_bottom li{
	width: 140px;
    margin-top: 25px;
}
.lastpage_bottom li img{
	width: 100%;
}
.to_fade{
	-webkit-animation: to_top 0.5s 0.5s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes to_top{
	from{
			transform: translateX(0px);
		 }
	to{
			transform: translateX(210px);
	}
}



/*index_iframe---过场*/
.guo2{
	width:100% ;
	height: 100%;
	background: url(../img/guo/loading2.jpg) no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
}

.layout{
	position: absolute;
    font-family: "微软雅黑";
    font-size: 22px;
    top: 50%;
    margin-top: -20px;
    margin-left: 20px;
    transform: rotate(90deg);

}
/*字*/
.load_text{
	position: absolute;
    width: 120px;
    left: 60%;
    top: 52%;
}
.load_text li{
	    width: 25px;
    	float: left;
    	margin-left:10px ;
    	opacity: 0;
}
.load_text  img{
	display: block;
	width: 100%;
}
.down_0{
	-webkit-animation: dro 0.6s 0.5s linear;
	-webkit-animation-fill-mode: forwards;
}
.down_1{
	-webkit-animation: dro 0.6s 0.8s linear;
	-webkit-animation-fill-mode: forwards;
}
.down_2{
	-webkit-animation: dro 0.6s 1.1s linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes dro{
	from{
		transform: translateY(-100px);
		opacity: 0;
	}
	to{
		transform: translateY(0);
		opacity: 1;
	}
}
/*小人跑*/
.timg{
	width: 120px;
    margin-left: 40px;
    margin-top: -110px;
    opacity: 1;   
}
.move{
	-webkit-animation: pao 4s linear;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes pao{
	from{
		transform: translateY(0);
		opacity: 1;
	}
	50%{
		transform: translateY(324px);
		opacity: 1;
	}
	75%{
		transform: translateY(487px);
		opacity: 0.6;
	}
	to{
		transform: translateY(650px);
		opacity: 0;
	}
}


.ru{
	position: absolute;
    width: 110px;
    top: -120px;
    left: 60px;
    /*transform: rotate(-90deg);*/
    display: none;
    -webkit-animation: go 3s 1s linear;
    -webkit-animation-fill-mode: forwards;
  
}
/*.go{
	 transform: rotate(-90deg);
	-webkit-animation: go 1.5s 3s linear;
    -webkit-animation-fill-mode: forwards;
}*/
@-webkit-keyframes go{
	from{
		transform: translateY(0);
		opacity: 1;
	} 
	75%{
		transform: translateY(240px);
		opacity: 1;
	}
	to{
		transform:translateY(320px);
		opacity: 0;
	}
}