﻿* { margin: 0; padding: 0;}
body { font: 16px/1.8 "Microsoft Yahei",verdana;}
a{ text-decoration:none; color: #fff;}


/*过渡页面*/

#preload {
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:#41b1e7;
	z-index:999999;
	overflow:hidden;
	text-align:center;
	-webkit-animation:preload-layer 4.8s cubic-bezier(0.77,0,0.175,1) both;
	-moz-animation:preload-layer 4.8s cubic-bezier(0.77,0,0.175,1) both;
	animation:preload-layer 4.8s cubic-bezier(0.77,0,0.175,1) both
}
.csstransitions #preload {
	clip:rect(0px 2560px 2000px 0)
}
.no-csstransitions .preload-logo {
	background:url('index-logo2.png') no-repeat 50% 0
}
.preload {
	width:550px;
	height:580px;
	position:absolute;
	top:60%;
	left:50%;
	margin:-275px 0 0 -290px;
	color:#fff;
	overflow:hidden
}
.preload article {
	color:#fff
}
.preload-logo2 {
	margin:10px 0 10px;
	height:50px
}
.preload-logo1 {
	width:165px;
	height:195px;
	margin:0 auto;
	margin-top:-2px;
	margin-top:0px\9
}
.preload-logo1 svg path {
	stroke-dasharray:1000;
	stroke-dashoffset:-680;
	stroke-width:1
}
#preload .preload-logo1 svg path {
	-webkit-animation:preload 2.2s cubic-bezier(0.77,0,0.175,1) both;
	-moz-animation:preload 2.2s cubic-bezier(0.77,0,0.175,1) both;
	animation:preload 2.2s cubic-bezier(0.77,0,0.175,1) both
}
#preload .preload-logo2 svg path {
	stroke-dasharray:908.1746215820312;
	stroke-dashoffset:-900;
	stroke-width:2;
	-webkit-animation:preload2 2.5s cubic-bezier(0.77,0,0.175,1) both .2s;
	-moz-animation:preload2 2.5s cubic-bezier(0.77,0,0.175,1) both .2s;
	animation:preload2 2.5s cubic-bezier(0.77,0,0.175,1) both .2s
}
.preload-logo3 {
	height: 30px;
	-webkit-animation:preload3 .5s cubic-bezier(0.215,0.61,0.355,1) both 2s;
	-moz-animation:preload3 .5s cubic-bezier(0.215,0.61,0.355,1) both 2s;
	animation:preload3 .5s cubic-bezier(0.215,0.61,0.355,1) both 2s
}
#preload .title {
	height: 50px;
	-webkit-animation:preload3 1.5s cubic-bezier(0.215,0.61,0.355,1) both 2s;
	-moz-animation:preload3 1.5s cubic-bezier(0.215,0.61,0.355,1) both 2s;
	animation:preload3 1.5s cubic-bezier(0.215,0.61,0.355,1) both 2s
}
#preload article {
	-webkit-animation:preload3 2.2s cubic-bezier(0.215,0.61,0.355,1) both 2s;
	-moz-animation:preload3 2.2s cubic-bezier(0.215,0.61,0.355,1) both 2s;
	animation:preload3 2.2s cubic-bezier(0.215,0.61,0.355,1) both 2s
}
#preload article img{
	opacity: 0.7;
}
@-moz-keyframes preload {
	0% {
	fill:rgba(255,255,255,0);
	stroke-dashoffset:-650;
	stroke-width:1
}
80% {
	fill:rgba(255,255,255,0);
	stroke-dashoffset:0;
	stroke-width:1
}
100% {
	fill:rgba(255,255,255,1);
	stroke-dashoffset:0;
	stroke-width:0
}
}@-webkit-keyframes preload {
	0% {
	fill:rgba(255,255,255,0);
	stroke-dashoffset:-650;
	stroke-width:2
}
80% {
	fill:rgba(255,255,255,0);
	stroke-dashoffset:0;
	stroke-width:2
}
100% {
	fill:rgba(255,255,255,1);
	stroke-dashoffset:0;
	stroke-width:0
}
}@keyframes preload {
	0% {
	fill:rgba(255,255,255,0);
	stroke-dashoffset:-650;
	stroke-width:2
}
80% {
	fill:rgba(255,255,255,0);
	stroke-dashoffset:0;
	stroke-width:2
}
100% {
	fill:rgba(255,255,255,1);
	stroke-dashoffset:0;
	stroke-width:0
}
}@-moz-keyframes preload2 {
	0% {
	fill:rgba(255,255,255,0);
	stroke-dashoffset:-900;
	stroke-width:2
}
80% {
	fill:rgba(255,255,255,0);
	stroke-dashoffset:0;
	stroke-width:2
}
100% {
	fill:rgba(255,255,255,1);
	stroke-dashoffset:0;
	stroke-width:0
}
}@-webkit-keyframes preload2 {
	0% {
	fill:rgba(255,255,255,0);
	stroke-dashoffset:-900;
	stroke-width:2
}
80% {
	fill:rgba(255,255,255,0);
	stroke-dashoffset:0;
	stroke-width:2
}
100% {
	fill:rgba(255,255,255,1);
	stroke-dashoffset:0;
	stroke-width:0
}
}@keyframes preload2 {
	0% {
	fill:rgba(255,255,255,0);
	stroke-dashoffset:-900;
	stroke-width:2
}
80% {
	fill:rgba(255,255,255,0);
	stroke-dashoffset:0;
	stroke-width:2
}
100% {
	fill:rgba(255,255,255,1);
	stroke-dashoffset:0;
	stroke-width:0
}
}@-moz-keyframes preload3 {
	0% {
	-webkit-transform:translateY(60px);
	opacity:0
}
100% {
	-webkit-transform:translateY(0px);
	opacity:1
}
}@-webkit-keyframes preload3 {
	0% {
	-webkit-transform:translateY(60px);
	opacity:0
}
100% {
	-webkit-transform:translateY(0px);
	opacity:1
}
}@keyframes preload3 {
	0% {
	-webkit-transform:translateY(60px);
	opacity:0
}
100% {
	-webkit-transform:translateY(0px);
	opacity:1
}
}@-moz-keyframes preload-layer {
	0% {
	visibility:visible;
	clip:rect(0px 2560px 1400px 0)
}
60% {
	visibility:visible;
	clip:rect(0px 2560px 1400px 0)
}
100% {
	visibility:hidden;
	clip:rect(0px 2560px 0px 0)
}
}@-webkit-keyframes preload-layer {
	0% {
	visibility:visible;
	clip:rect(0px 2560px 1400px 0)
}
60% {
	visibility:visible;
	clip:rect(0px 2560px 1400px 0)
}
100% {
	visibility:hidden;
	clip:rect(0px 2560px 0px 0)
}
}@keyframes preload-layer {
	0% {
	visibility:visible;
	clip:rect(0px 2560px 1400px 0)
}
60% {
	visibility:visible;
	clip:rect(0px 2560px 1400px 0)
}
100% {
	visibility:hidden;
	clip:rect(0px 2560px 0px 0)
}
}


/*圆形按钮*/
.showcase-preview-bottom{display:block;width:50px;height:50px;overflow:hidden;background:rgba(0,0,0,0.5);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;transition:all .3s ease-out;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;cursor:pointer}
.showcase-preview-bottom:hover{-webkit-animation:ue-pudding 1s linear;-moz-animation:ue-pudding 1s linear;animation:ue-pudding 1s linear;background:#41b1e7}
.showcase-preview-bottom img{display:block;width:12px;height:auto;margin:20px auto}

.showcase-preview-left,.showcase-preview-right{display:block;top:50%;margin-top:-25px;width:50px;height:50px;position:absolute;cursor:pointer;overflow:hidden;background:rgba(0,0,0,0.5);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;transition:all .3s ease-out;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;cursor:pointer}
.showcase-preview-left:hover,.showcase-preview-right:hover{-webkit-animation:ue-pudding 1s linear;-moz-animation:ue-pudding 1s linear;animation:ue-pudding 1s linear;background:#41b1e7}
.showcase-preview-left img,.showcase-preview-right img{display:block;width:9px;height:12px;margin:19px auto}
.showcase-preview-left{left:0px}
.showcase-preview-right{right:0px}

@-webkit-keyframes ue-pudding{0%{-webkit-transform:scale(1.2,0.8)}1%{-webkit-transform:scale(1.18,0.82)}2%{-webkit-transform:scale(1.16,0.84)}3%{-webkit-transform:scale(1.13,0.87)}4%{-webkit-transform:scale(1.1,0.9)}5%{-webkit-transform:scale(1.07,0.93)}6%{-webkit-transform:scale(1.04,0.96)}7%{-webkit-transform:scale(1.01,0.99)}8%{-webkit-transform:scale(0.99,1.01)}9%{-webkit-transform:scale(0.97,1.03)}10%{-webkit-transform:scale(0.95,1.05)}11%{-webkit-transform:scale(0.94,1.06)}12%{-webkit-transform:scale(0.93,1.07)}13%{-webkit-transform:scale(0.93,1.07)}14%{-webkit-transform:scale(0.93,1.07)}15%{-webkit-transform:scale(0.93,1.07)}16%{-webkit-transform:scale(0.94,1.06)}17%{-webkit-transform:scale(0.94,1.06)}18%{-webkit-transform:scale(0.95,1.05)}19%{-webkit-transform:scale(0.96,1.04)}20%{-webkit-transform:scale(0.98,1.02)}21%{-webkit-transform:scale(0.99,1.01)}22%{-webkit-transform:scale(1,1)}23%{-webkit-transform:scale(1,1)}24%{-webkit-transform:scale(1.01,0.99)}25%{-webkit-transform:scale(1.02,0.98)}26%{-webkit-transform:scale(1.02,0.98)}27%{-webkit-transform:scale(1.02,0.98)}28%{-webkit-transform:scale(1.03,0.97)}29%{-webkit-transform:scale(1.03,0.97)}30%{-webkit-transform:scale(1.02,0.98)}31%{-webkit-transform:scale(1.02,0.98)}32%{-webkit-transform:scale(1.02,0.98)}33%{-webkit-transform:scale(1.02,0.98)}34%{-webkit-transform:scale(1.01,0.99)}35%{-webkit-transform:scale(1.01,0.99)}36%{-webkit-transform:scale(1.01,0.99)}37%{-webkit-transform:scale(1,1)}38%{-webkit-transform:scale(1,1)}39%{-webkit-transform:scale(1,1)}40%{-webkit-transform:scale(0.99,1.01)}41%{-webkit-transform:scale(0.99,1.01)}42%{-webkit-transform:scale(0.99,1.01)}43%{-webkit-transform:scale(0.99,1.01)}44%{-webkit-transform:scale(0.99,1.01)}45%{-webkit-transform:scale(0.99,1.01)}46%{-webkit-transform:scale(0.99,1.01)}47%{-webkit-transform:scale(0.99,1.01)}48%{-webkit-transform:scale(0.99,1.01)}49%{-webkit-transform:scale(1,1)}}

@keyframes ue-pudding{0%{transform:scale(1.2,0.8)}1%{transform:scale(1.18,0.82)}2%{transform:scale(1.16,0.84)}3%{transform:scale(1.13,0.87)}4%{transform:scale(1.1,0.9)}5%{transform:scale(1.07,0.93)}6%{transform:scale(1.04,0.96)}7%{transform:scale(1.01,0.99)}8%{transform:scale(0.99,1.01)}9%{transform:scale(0.97,1.03)}10%{transform:scale(0.95,1.05)}11%{transform:scale(0.94,1.06)}12%{transform:scale(0.93,1.07)}13%{transform:scale(0.93,1.07)}14%{transform:scale(0.93,1.07)}15%{transform:scale(0.93,1.07)}16%{transform:scale(0.94,1.06)}17%{transform:scale(0.94,1.06)}18%{transform:scale(0.95,1.05)}19%{transform:scale(0.96,1.04)}20%{transform:scale(0.98,1.02)}21%{transform:scale(0.99,1.01)}22%{transform:scale(1,1)}23%{transform:scale(1,1)}24%{transform:scale(1.01,0.99)}25%{transform:scale(1.02,0.98)}26%{transform:scale(1.02,0.98)}27%{transform:scale(1.02,0.98)}28%{transform:scale(1.03,0.97)}29%{transform:scale(1.03,0.97)}30%{transform:scale(1.02,0.98)}31%{transform:scale(1.02,0.98)}32%{transform:scale(1.02,0.98)}33%{transform:scale(1.02,0.98)}34%{transform:scale(1.01,0.99)}35%{transform:scale(1.01,0.99)}36%{transform:scale(1.01,0.99)}37%{transform:scale(1,1)}38%{transform:scale(1,1)}39%{transform:scale(1,1)}40%{transform:scale(0.99,1.01)}41%{transform:scale(0.99,1.01)}42%{transform:scale(0.99,1.01)}43%{transform:scale(0.99,1.01)}44%{transform:scale(0.99,1.01)}45%{transform:scale(0.99,1.01)}46%{transform:scale(0.99,1.01)}47%{transform:scale(0.99,1.01)}48%{transform:scale(0.99,1.01)}49%{transform:scale(1,1)}}


/* 顶部和底部 */
#logo{position:fixed; z-index:99999; height:55px; width:331px; display:block; top:20px; left:20px; overflow:hidden;}
#copyright { position: fixed; left: 20px; bottom: 20px; z-index: 9999; font-size: 12px;}
#copyright p { line-height: 25px; color:#FFF; }
#music{width:22px;height:22px;position:fixed; right:20px; bottom:20px; display:block;z-index:99998;overflow:hidden}
.music_icon{background:url(../images/music.png) no-repeat -22px 0;width:22px;height:22px;overflow:hidden; display:block; cursor:pointer;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
@-webkit-keyframes reverseRotataZ {0% {-webkit-transform: rotateZ(0deg);} 100% {-webkit-transform: rotateZ(-360deg);}}
.music_off {background:url(../images/music.png) no-repeat;}
audio{display:none;height:0;}


/* 右侧导航 */
#fullPage-nav { _display: none; font-size: 12px;}
#fullPage-nav li { width: auto; height: 21px; margin: 10px 0 0; vertical-align: middle;}
#fullPage-nav li a { float: right; width: 21px; height: 21px; color: #8F9DA4; text-decoration: none; text-align: right; background: url(../images/dot.png) 5px 5px no-repeat;}
#fullPage-nav li .active { background-position: 0 bottom;}
#fullPage-nav span { display: none;}
.fullPage-tooltip { float: left; top: 0; margin-right: 5px; font: 12px "Microsoft Yahei"; color: #8F9DA4; line-height: 21px;}


.i_21{ position: absolute; left: 50%; top: 5%; width: 300px; height: 63px; margin-left: -150px; z-index:9; opacity: 0; transition: all 1s; text-align: center;}
.active .i_21{ opacity: 1; top: 10%; transition-delay: .7s;}

/* 第一屏 */
.mpage{width: 100%;height: 100%;overflow: hidden;margin: 0 auto;position: relative;background: #000;}
.anitOut{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1}
.bgz{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 10;opacity: .7}

.i_10{ position: absolute; left: 50%; top: 50%; width: 905px; height: 236px; margin-left: -452px; margin-top:-168px; z-index:9; opacity: 0; transition: all 1s;}
.i_11{ position: absolute; left: 50%; top: 30%; width: 431px; height: 375px; margin-left: -215px; margin-top:-238px; z-index:8; opacity: 0; transition: all 1s;}
.i_12{ position: absolute; left: 50%; top: 50%; width: 1098px; height: 411px; margin-left: -549px; margin-top:-255px; z-index:7; opacity: 0; transition: all 1s;}

.i_n_b{ position: absolute; left: 50%; bottom: 15%; width: 50px; height: 50px; margin-left: -25px; z-index:999; opacity: 0; transition: all 1s;}

.active .i_10{ opacity: 1; top: 35%; transition-delay: 1s;}
.active .i_11{ opacity: 1; top: 50%; transition-delay: .5s;}
.active .i_12{ opacity: 1; top: 48%; transition-delay: 1.5s;}

.active .i_n_b{ opacity: 1; bottom: 10%; transition-delay: 1.5s;}

/* 第二屏 */
.large-header{ opacity: 0; transition: all 1s; -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5);}
.active .large-header{ opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); transition-delay: 2.8s;}

.Service1 {
			width: 1000px;
			height: 184px;
			float: left;
			position: absolute;
			right: 50%;
			margin-right: -540px;
			bottom: 30%;
			margin-bottom: -92px;
			 transition: all .7s; opacity: 0;
		}
		.active .Service1 { opacity: 1; bottom:50%; transition-delay: 0.7s;}
		 .hi-icon {
			width: 184px;
			height: 184px;
			float: left;
		}
		 .hi-icon div {
			opacity: 0;
		}
		.active .effect-lily {
			opacity: 1;
			transform: translateY(0px);
			-webkit-transform: translateY(0px);
			transition: all 2s cubic-bezier(0.86, 0, 0.03, 1);
			-webkit-transition: all 2s cubic-bezier(0.86, 0, 0.03, 1);
			height: 184px;
			width: 184px;
		}
		
		
		/* 圆圈点击效果 */









figcaption,figure{ margin:0; padding:0;}











.hi-icon {

	display: inline-block;

	cursor: pointer;

	width:184px;

	height:184px;

	border-radius: 50%;

	position: relative;

	z-index:100;

	color: #fff; margin-left:70px;}



.hi-icon:after {

	pointer-events: none;

	position: absolute;

	width: 100%;

	height: 100%;

	border-radius: 50%;

	content: '';

	-webkit-box-sizing: content-box; 

	-moz-box-sizing: content-box; 

	box-sizing: content-box;

}











/* Effect 3 */

.hi-icon {

	box-shadow: 0 0 0 8px #f3e3e3;

	-webkit-transition: color 0.35s;

	-moz-transition: color 0.35s;

	transition: color 0.35s;}



.hi-icon:after {

	top: -2px;

	left: -2px;

	padding: 2px;

	z-index: -1;

	background: #41b1e7;

	-webkit-transition: -webkit-transform 0.25s, opacity 0.35s;

	-moz-transition: -moz-transform 0.25s, opacity 0.35s;

	transition: transform 0.25s, opacity 0.35s;

}



/* Effect 3a */





.hi-icon:hover {box-shadow: 0 0 0 8px #41b1e7;}



.hi-icon:hover:after {

	-webkit-tran =sform: scale(1.3);

	-moz-transform: scale(1.3);

	-ms-transform: scale(1.3);

	transform: scale(1.3);

	opacity: 0;

}













.hi-icon:after {

	-webkit-transform: scale(1.3);

	-moz-transform: scale(1.3);

	-ms-transform: scale(1.3);

	transform: scale(1.3);

	opacity: 0;

}



.hi-icon:hover:after {

	-webkit-transform: scale(1);

	-moz-transform: scale(1);

	-ms-transform: scale(1);

	transform: scale(1);

	opacity: 1;

}













.effect-lily{ width:184px; height:184px;border-radius:50%; position:absolute; text-align:center;}







.effect-lily h1,

.effect-lily h2,

.effect-lily h3 {

	-webkit-transform: translate3d(0,20px,0);

	transform: translate3d(0,20px,0);}







.effect-lily h1 {

	-webkit-transition: -webkit-transform 0.35s;

	transition: transform 0.35s;}



.effect-lily h2 {

	opacity: 0;

	-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;

	transition: opacity 0.2s, transform 0.35s;}



.effect-lily h3 {

	opacity: 0;

	-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;

	transition: opacity 0.2s, transform 0.35s;}















.effect-lily:hover h2,

.effect-lily:hover h3{

	opacity: 1;

}





.effect-lily:hover h1,

.effect-lily:hover h2,

.effect-lily:hover h3 {

	-webkit-transform: translate3d(0,0,0);

	transform: translate3d(0,0,0);

}



.effect-lily:hover h2 {

	-webkit-transition-delay: 0.05s;

	transition-delay: 0.05s;

	-webkit-tranition-duration: 0.35s;

	transition-duration: 0.35s;

}









.effect-lily:hover h3 {

	-webkit-transition-delay: 0.15s;

	transition-delay: 0.15s;

	-webkit-transition-duration: 0.35s;

	transition-duration: 0.35s;

}









/* 圆圈点击效果 end*/

/* 第三屏 */

.layB{position: absolute; left: 50%; top: 37%; margin-left:-450px; width:900px; transition: all .7s; opacity: 0;}
.active .layB { opacity: 1; top:32%; transition-delay: 0.7s;}
.layB .slide1{ width:900px; overflow:hidden; }
.layB ul{ overflow:hidden; zoom:1; }
.layB li{ width:280px; height:180px; margin:10px; display:inline-block; float:left; text-align:center; position:relative; overflow:hidden;}
.layB li a{ color:#FFF;}
.layB li span{ width:280px; height:180px; line-height:300px; display:block; position:absolute; left:0px; top:0px; transition:all .6s; opacity: 0;}

.layB li img{ display:block; transition:all .6s; -webkit-transform: scale(1, 1); transform: scale(1, 1);}
.layB li:hover span{ opacity: 0.8; background:#000; line-height:130px;}
.layB li:hover img{ -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }

.span2 {
				width: 50px;
				height: 65px;
				text-align: center;
				display: block;
				position: absolute;
				left: 50%;
				margin-left: -25px;
				bottom: 20%;
				opacity: 0;
				transform: translateY(40px);
				-webkit-transform: translateY(40px);
				-moz-transform: translateY(40px);
				-o-transform: translateY(40px);
				transition: all 0.5s ease 0.2s;
				-webkit-transition: all 0.5s ease 0.2s;
				-moz-transition: all 0.5s ease 0.2s;
				-o-transition: all 0.5s ease 0.2s;
			}
			
			.slide1 li:hover .span2{
				transform: translateY(0);
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
				-o-transform: translateY(0);
				opacity: 1;
			}
			
			.span2 i {
				display: inline-block;
				transform: rotate(-90deg);
				-webkit-transform: rotate(-90deg);
				-moz-transform: rotate(-90deg);
				-o-transform: rotate(-90deg);
			}
			
			.span2 em {
				display: inline-block;
				width: 50px;
				height: 65px;
				background-image: url(../images/go.png);
				transform: scale(0.7, 0.7);
				-webkit-transform: scale(0.7, 0.7);
				-moz-transform: scale(0.7, 0.7);
				-o-transform: scale(0.7, 0.7);
			}
			
			.slide1 li:hover .span2 i em {
				-ms-animation: sprite-animate-go 1.7s steps(51)infinite;
				animation: sprite-animate-go 1.7s steps(51)infinite;
				-o-animation: sprite-animate-go 1.7s steps(51)infinite;
				-moz-animation: sprite-animate-go 1.7s steps(51)infinite;
				-webkit-animation: sprite-animate-go 1.7s steps(51)infinite;
			}
			
			@-webkit-keyframes sprite-animate-go {
				from {
					background-position: 0 0
				}
				to {
					background-position: -2550px 0
				}
			}
			
			@-moz-keyframes sprite-animate-go {
				from {
					background-position: 0 0
				}
				to {
					background-position: -2550px 0
				}
			}
			
			@-o-keyframes sprite-animate-go {
				from {
					background-position: 0 0
				}
				to {
					background-position: -2550px 0
				}
			}
			
			@keyframes sprite-animate-go {
				from {
					background-position: 0 0
				}
				to {
					background-position: -2550px 0
				}
			}

.prev{ transition: all .7s; opacity: 0;}
.active .prev{ opacity: 1; left: -90px; transition-delay: 0s;}
.next{ transition: all .7s; opacity: 0;}
.active .next{ opacity: 1; right: -90px; transition-delay: 0s;}

.i_30{width:100%; text-align:center; position:absolute; bottom:1%; z-index:9; opacity: 0; transition: all 1s; -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1);}
.active .i_30{ opacity: 1; bottom:1%; -webkit-transform: scale(1, 1); transform: scale(1, 1); transition-delay: .7s;}

/* 第四屏 */
.i_41{ width:751px; height: 579px; position: absolute; left: 50%; top: 30%; z-index: 9; margin-left:-390px; margin-top: -289px; transition: all .7s; opacity: 0;}
.active .i_41 { opacity: 1; top:50%; transition-delay: 0.7s;}
.i_42{ width:313px; height: 163px; position: absolute; left: 50%; top: 70%; z-index: 8; margin-left:-156px; margin-top: -81px; transition: all .7s; opacity: 0;}
.active .i_42 { opacity: 1; top:50%; transition-delay: 0.7s;}
.i_43{ width:390px; height: 390px; position: absolute; left: 50%; top: 50%; z-index: 7; margin-left:-195px; margin-top: -195px; transition: all .7s; opacity: 0; -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1);}
.active .i_43 { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); transition-delay: 0.7s;}
		
/* 第五屏 */
.service-list {
  position: absolute;
  left: 50%;
  top: 70%;
  height: 180px;
  margin-top: -120px;
  margin-left: -470px; 
  opacity: 0; transition: all 1s;
}
.active .service-list {
   opacity: 1; top:50%; transition-delay: 0.7s;
}
.service-list dl {
  position: relative;
  float: left;
  width: 220px;
  margin-left: 20px;
  padding: 40px 0;
  text-align: center;
  opacity: 0;
  filter: alpha(opacity=0);
}
.service-list dl.no-mar-left {
  margin-left: 0;
}
.service-list dt {
	height: 48px;
  margin-bottom: 20px;
}
.service-list dd {
  line-height: 30px;
  color: #999;
}
.service-list dd h4 {
  color: #333;
  font-size: 18px;
  font-weight: 700;
}
.service-list dd.line-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 180px;
}
.service-list dd.line-hover .all {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.service-list dd.line-hover .a1 {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 10;
  display: block;
  width: 0;
  height: 2px;
  margin-left: 0;
  background: #009bf4;
}
.service-list dd.line-hover .a2 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: block;
  width: 2px;
  height: 0;
  background: #009bf4;
}
.service-list dd.line-hover .a3 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
  display: block;
  width: 2px;
  height: 0;
  background: #009bf4;
}
.service-list dd.line-hover .a4 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: block;
  width: 0;
  height: 2px;
  background: #009bf4;
}
.service-list dd.line-hover .a5 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  display: block;
  width: 0;
  height: 2px;
  background: #009bf4;
}	



