.div_relative{
	width: 100%;
	height: 100%;
	position: relative;
}
.banner_wrap{
	background: #ffffff url(../image/banner_bg.png) no-repeat center center;
	width: 100%;
	height: 850px;
	overflow: hidden;
}
.banner_wrap .mainWrap1{
	position: relative;
	height: 100%;
}
.banner_wrap .mainWrap1 .mainWrap{
	height: 100%;
}
.cir{
	position: absolute;
	
}

.cir1{
	width: 1216px;
	height: 141px;
	background: url(../image/cir1.png) no-repeat 0 0;
	left: 0px;
	top: 337px;
	animation: rotate1 3s cubic-bezier(.41,.03,.22,.84) 1 both;
	-webkit-animation: rotate1 3s cubic-bezier(.41,.03,.22,.84) 1 both;
    -moz-animation: rotate1 3s cubic-bezier(.41,.03,.22,.84) 1 both;
    -ms-animation: rotate1 3s cubic-bezier(.41,.03,.22,.84) 1 both;
	-webkit-transform: rotate(150deg);
	-moz-transform: rotate(150deg);
	-ms-transform: rotate(150deg);
	transform: rotate(150deg);
}

.cir1_ex{
	animation: rotate1_ex 18s linear infinite  both;
	-webkit-animation: rotate1_ex 18s linear infinite  both;
	-moz-animation: rotate1_ex 18s linear infinite  both;
	-ms-animation: rotate1_ex 18s linear infinite  both;
}

.cir2{
	width: 891px;
	height: 77px;
	background: url(../image/cir2.png) no-repeat 0 0;
	left: 154.5px;
	top: 369px;
	/*-webkit-transform: rotate(-25deg);*/
	/*-moz-transform: rotate(-25deg);*/
	/*-ms-transform: rotate(-25deg);*/
	/*transform: rotate(-25deg);*/
	-webkit-transform: rotate(155deg);
	-moz-transform: rotate(155deg);
	-ms-transform: rotate(155deg);
	transform: rotate(155deg);
	animation: rotate2 3s cubic-bezier(.41,.03,.22,.84) 0.3s 1 both;
    -webkit-animation: rotate2 3s cubic-bezier(.41,.03,.22,.84) 0.3s 1 both;
    -moz-animation: rotate2 3s cubic-bezier(.41,.03,.22,.84) 0.3s 1 both;
    -ms-animation: rotate2 3s cubic-bezier(.41,.03,.22,.84) 0.3s 1 both;
}
.cir2_ex{
	animation: rotate2_ex 16s linear infinite  both;
	-webkit-animation: rotate2_ex 16s linear infinite  both;
	-moz-animation: rotate2_ex 16s linear infinite  both;
	-ms-animation: rotate2_ex 16s linear infinite  both;
}

.cir3{
	width: 660px;
	height: 660px;
	background: url(../image/cir3.png) no-repeat 0 0;
	left: 277px;
	top: 84px;
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	transform: rotate(-180deg);
	animation: rotate3 2.8s cubic-bezier(.41,.03,.22,.84) 0.98s both;
    -webkit-animation: rotate3 2.8s cubic-bezier(.41,.03,.22,.84) 0.98s both;
    -moz-animation: rotate3 2.8s cubic-bezier(.41,.03,.22,.84) 0.98s both;
    -ms-animation: rotate3 2.8s cubic-bezier(.41,.03,.22,.84) 0.98s both;
}
.cir3_ex{
	animation: rotate3_ex 13s linear infinite  both;
	-webkit-animation: rotate3_ex 13s linear infinite  both;
	-moz-animation: rotate3_ex 13s linear infinite  both;
	-ms-animation: rotate3_ex 13s linear infinite  both;
}

.cir4{
	width: 263px;
	height: 476px;
	background: url(../image/cir4.png) no-repeat 0 0;
	left: 476.5px;
	top: 169px;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	animation: rotate4 2.8s cubic-bezier(.41,.03,.22,.84) .9s both;
    -webkit-animation: rotate4 2.8s cubic-bezier(.41,.03,.22,.84) .9s both;
    -moz-animation: rotate4 2.8s cubic-bezier(.41,.03,.22,.84) .9s both;
    -ms-animation: rotate4 2.8s cubic-bezier(.41,.03,.22,.84) .9s both;
}
.cir4_ex{
	animation: rotate4_ex 10s linear infinite  both;
	-webkit-animation: rotate4_ex 10s linear infinite  both;
	-moz-animation: rotate4_ex 10s linear infinite  both;
	-ms-animation: rotate4_ex 10s linear infinite  both;
}

.logo{
	position: absolute;
	top: 20px;
	left: 20px;
}
.banner_font1,.banner_font2,.banner_btn{
	position: absolute;
}
.banner_font1{
	top: 300px;
	left:261px ;
}
.banner_font2{
	top: 415px;
	left:525.5px ;
}
.banner_btn{
	top:500px;
	left:375.5px ;
}
.pagegry{
	background: #fafafa;
	height: 743px;
	width: 100%;
}
.page{
	background: #FFFFFF;
	height: 743px;
	width: 100%;
}
.page1 .mainWrap,.page2 .mainWrap,.page3 .mainWrap,.page4 .mainWrap,.page5 .mainWrap{
	height: 100%;
	position: relative;
}
.page1_key{
	position: absolute;
	right: 0px;
	top: 185px;
	height: 344px;
	width: 594px;
}
.page2_key{
	position: absolute;
	left: 0px;
	top: 180px;
	z-index: 9;
	height: 338px;
}
.page1_huo{
	position: absolute;
	right: 0px;
	top: 355px;
}

.page1_cir{
	position: absolute;
	right: -87px;
	top: 225px;
}
.page1_font{
	position: absolute;
	left: 0px;
	top: 280px;
}
.page2_font{
	position: absolute;
	right: 0;
	top: 275px;
}

.page2_cir{
	position: absolute;
	width: 740px;
	height: 740px;
	left: -70px;
	top: 0;
}
.page2_huojian{
	position: absolute;
	width: 150px;
	height: 457px;
	bottom: 0;
	left: 463px;
	z-index: 19;
}
.page3_key{
	width: 690px;
	height: 460px;
	position: absolute;
	left: -33px;
	top: 140px;
    opacity: 0;
}
.page3_key_ul{
	background: url("../image/page3_key1_bg.png") no-repeat scroll;
    width: 100%;
    height: 100%;
}
.page3_key_ul li{
	display: none;
}
.page3_key_ul li:first-child{
	display: block;
}
.page3_key_ul img{
    position: absolute;
    display: none;
}

.page3_key_ul .page3_key_img_1{
    left: 38px;
    top: 54px;
}
.page3_key_ul .page3_key_img_2{
    left: 38px;
    top: 54px;
}
.page3_key_ul .page3_key_img_3{
    left: 38px;
    top: 54px;
}
.page3_key_ul .page3_key_img_4{
    left: 38px;
    top: 54px;
}
.page3_zhuanpan{
	position: absolute;
	width: 286px;
	height: 286px;
	top: 356px;
	left: 377px;
    opacity: 1;
}
.page3_zhuanpan_wait{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
    opacity: 0;
}
.page3_zhuanpan_img{
	animation: rotate6 6s linear 1;
    -webkit-animation: rotate6 6s linear 1;
    -moz-animation: rotate6 6s linear 1;
    -ms-animation: rotate6 6s linear 1;
}
.page3_key_bd{
	position: relative;
}
.page3_key_bd li{
	position: absolute;
}
.page3_i1{
    top: 63px;
    left: 29px;	
}
.page3_i2{
	top: 93px;
	right: 17px;
}
.page3_i3{
	top: 215px;
	left: 98px;
}
.page3_i4{
	top: 215px;
	left: 156px;
}
#.page3_key_bd li:hover img{
#	transform: scale(1.1);
#}
.page3_font{
	position: absolute;
	top: 280px;
	right: 0;
    opacity: 0;
}
.page4{
	background: #FFFFFF;
	height: 890px;
	width: 100%;
}
.page4_font{
	position: absolute;
	top: 133px;
	left: 353px;
}
.page4_key{
	position: absolute;
	top: 294px;
	left: -40px;
	z-index: 22;
}
.page4_key_ul{
    width: 988px;
    height: 347px;
    left: 152.5px;
    position: relative;
    font-size: 0px;
}
.page4_key_ul li,.box_shadow{
	box-shadow: 10px 20px 102px rgba(79,79,79,0.14);
	-webkit-box-shadow:10px 20px 102px rgba(79,79,79,0.14) ;
}
.show_images_list_li {
    position: absolute;
    cursor: pointer;
    vertical-align: bottom;
    display: block;
}
.page4_hua{
	position: absolute;
	width: 679px;
	height: 611px;
	top: 225px;
	left: 50%;
	margin-left: -339px;
}
.page4_cir{
	position: absolute;
	left: 168.5px;top: 134px;
	-webkit-transform: translateX(0) translateY(100px) translateZ(-20px) rotateX(106deg) rotateY(-180deg) rotateZ(0deg) scaleX(1.1) scaleY(1) scaleZ(1);
	-moz-transform: translateX(0) translateY(100px) translateZ(-20px) rotateX(106deg) rotateY(-180deg) rotateZ(0deg) scaleX(1.1) scaleY(1) scaleZ(1);
	-ms-transform: translateX(0) translateY(100px) translateZ(-20px) rotateX(106deg) rotateY(-180deg) rotateZ(0deg) scaleX(1.1) scaleY(1) scaleZ(1);
	transform: translateX(0) translateY(100px) translateZ(-20px) rotateX(106deg) rotateY(-180deg) rotateZ(0deg) scaleX(1.1) scaleY(1) scaleZ(1);
	
}
.page4_cir img{
	-webkit-animation: z 3s linear 0s infinite;
	-moz-animation: z 3s linear 0s infinite;
	-ms-animation: z 3s linear 0s infinite;
	animation: z 3s linear 0s infinite;
}
.page5{
	width: 100%;
	height: 330px;
	background: #fafafa;
}
.footlogo{
	display: block;
	width:330px ;
	height: 48px;
	position: absolute;
	top: 125px;
	left: 50%;
	margin-left: -165px;
}
.footer_down{
	display: block;
	position: absolute;
	width: 338px;
	height: 66px;
	top: 210px;
	left: 50%;
	margin-left: -169px;
}

@media only screen and (min-width: 1400px) {
	.mainWrap{
		overflow: inherit;
	}
}
.page3_i1{
	background:url("../image/icon1.png") no-repeat scroll;
    width: 62px;
    height: 62px;
}
.page3_i1:hover {
	background:url("../image/icon1-hover.png") no-repeat scroll;
    width: 62px;
    height: 62px;
}
.page3_i1-hover { 
    animation: page3_i1_move 1.4s ease-in-out 1;
    -webkit-animation: page3_i1_move 1.4s ease-in-out 1;
    -moz-animation: page3_i1_move 1.4s ease-in-out 1;
    -ms-animation: page3_i1_move 1.4s ease-in-out 1;
}
.page3_i2{
	background:url("../image/icon2.png") no-repeat scroll;
    width: 55px;
    height: 56px;
}
.page3_i2:hover {
	background:url("../image/icon2-hover.png") no-repeat scroll;
    width: 55px;
    height: 56px;
}
.page3_i2-hover { 
    animation: page3_i2_move 1.5s ease-in-out 1;
    -webkit-animation: page3_i2_move 1.5s ease-in-out 1;
    -moz-animation: page3_i2_move 1.5s ease-in-out 1;
    -ms-animation: page3_i2_move 1.5s ease-in-out 1;
}
.page3_i3{
	background:url("../image/icon3.png") no-repeat scroll;
    width: 61px;
    height: 61px;
}
.page3_i3:hover {
	background:url("../image/icon3-hover.png") no-repeat scroll;
    width: 61px;
    height: 61px;
}
.page3_i3-hover { 
    animation: page3_i3_move 1.4s ease-in-out 1;
    -webkit-animation: page3_i3_move 1.4s ease-in-out 1;
    -moz-animation: page3_i3_move 1.4s ease-in-out 1;
    -ms-animation: page3_i3_move 1.4s ease-in-out 1;
}
.page3_i4{
	background:url("../image/icon4.png") no-repeat scroll;
    width: 58px;
    height: 59px;
}
.page3_i4:hover {
	background:url("../image/icon4-hover.png") no-repeat scroll;
    width: 58px;
    height: 59px;
}
.page3_i4-hover { 
    animation: page3_i4_move 1.4s ease-in-out 1;
    -webkit-animation: page3_i4_move 1.4s ease-in-out 1;
    -moz-animation: page3_i4_move 1.4s ease-in-out 1;
    -ms-animation: page3_i4_move 1.4s ease-in-out 1;
}
.page3_tip{
    position: absolute;
    top: 487px;
    left: 619px;
    display:none;
}
.page3_tip_hover{
    animation: fade-in;/*动画名称*/  
    animation-duration: 1.5s;/*动画持续时间*/  
    -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  
    -moz-animation: fade-in 1.5s;
    -ms-animation: fade-in 1.5s;
}
.page3_key_bd_hover{
    animation: fade-in;/*动画名称*/  
    animation-duration: 1.5s;/*动画持续时间*/  
    -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  
    -moz-animation: fade-in 1.5s;
    -ms-animation: fade-in 1.5s;
}
.page3_i1{opacity: 0;}
.page3_i2{opacity: 0;}
.page3_i3{opacity: 0;}
.page3_i4{opacity: 0;}
.page3_i_newhover{
   opacity: 1; 
}