@charset "utf-8";
/* CSS Document */
*,html,body{
    margin:0;
	padding:0;	
}
body{
    font-family:微软雅黑;
	font-size:18px;	
	background:#eee;
}
ul,li{
    margin:0;
	padding:0;
	list-style:none;	
}
i,em{
    font-style:normal;	
}
a{
    text-decoration:none;	
}
.center{
    text-align:center;	
}
.clearfix{ 
    *zoom: 1; 
} 
.clearfix:before, 
.clearfix:after { 
    display: table; 
    line-height: 0; 
    content: ""; 
}
.clearfix:after{ 
    clear: both; 
} 
.header{
	position:relative;
	height:550px;
	background:url(../images/banner.jpg) no-repeat top center;
}
.container{
	position:relative;
    width:990px;
	margin:0 auto;	
}
.layer-1{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:3;
}
.banner-text{
    float:left;
	margin-top:184px;
	margin-left:124px;	
	width:380px;
}
.tele-phone{
    float:left;	
}
.btn-warning{
	display:inline-block;
	width:160px;
	height:40px;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	line-height:40px;
	text-align:center;
    background:#ff9900;	
	border-radius:12px;
	cursor:pointer;
}
.btn-warning.margin-left{
    margin-left:-30px;	
}
.btn-warning.margin-top{
    margin-top:70px;	
}
.btn-warning.ios{
    margin-left:15px;	
}
.andriod,.ios{
	float:left;
    position:relative;	
}
.qr-andriod{
	display:none;
    position:absolute;
	left:0;
	top:20px;
	cursor:pointer;
}
.qr-ios{
	display:none;
    position:absolute;
	left:15px;
	top:20px;	
	cursor:pointer;
}
.tele-phone{
	float:left;
    margin-top:210px;	
	margin-left:78px;
}
.player-2{
    position:absolute;
	left:1110px;
	top:322px;	
    animation:myratate linear 10s 0s infinite;
    -webkit-animation:myratate linear 10s 0s infinite; 
}
@-webkit-keyframes myratate{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}
@keyframes myratate{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}
.player-3{
	position:absolute;
	width:990px;
	height:100%;
	left:50%;
	margin-left:-495px;
	z-index:2;
}
.cloud-1{
    position:absolute;
	top:200px;
}
.cloud-1.class2{
	animation:move linear 150s 0s infinite;
    -webkit-animation:move linear 150s 0s infinite;
}
@-webkit-keyframes move{
    0%{
	  left:-675px;	
	}
	15%{
	  opacity:1;	
	}
	16%{
	  opacity:0;
	  left:-1500px;	
	}
	30%{
	  opacity:0;
	  left:1920px;	
	}
	31%{
	  opacity:1;
	}
	100%{
	  left:-675px;
	}
}
@keyframes move{
    0%{
	  left:-675px;	
	}
	15%{
	  opacity:1;	
	}
	16%{
	  opacity:0;
	  left:-1500px;	
	}
	30%{
	  opacity:0;
	  left:1920px;	
	}
	31%{
	  opacity:1;
	}
	100%{
	  left:-675px;
	}
}
.cloud-2{
	position:absolute;	
	top:330px;	
}
.cloud-2.class2{
	animation:move2 linear 150s 0s infinite;
    -webkit-animation:move2 linear 150s 0s infinite;
}
@-webkit-keyframes move2{
    0%{
	  left:-144px;	
	}
	15%{
	  opacity:1;	
	}	
	16%{
	  opacity:0;
	  left:-1780px;	
	}
	50%{
	  opacity:0;
	  left:2150px;	
	}
	51%{
	  opacity:1;	
	}
	100%{
	  left:-144px;	
	}
}
@keyframes move2{
    0%{
	  left:-144px;	
	}
	15%{
	  opacity:1;	
	}	
	16%{
	  opacity:0;
	  left:-1780px;	
	}
	50%{
	  opacity:0;
	  left:2150px;	
	}
	51%{
	  opacity:1;
	}
	100%{
	  left:-144px;	
	}
}
.cloud-3{
	position:absolute;	
	top:102px;
}
.cloud-3.class2{
	animation:move3 linear 160s 0s infinite;
    -webkit-animation:move3 linear 160s 0s infinite;
}
@-webkit-keyframes move3{
    0%{
	  left:-27px;	
	}
	22%{
	  opacity:1;	
	}	
	23%{
	  opacity:0;
	  left:-1660px;	
	}
	50%{
	  opacity:0;
	  left:2270px;	
	}
	51%{
	 opacity:1;	
	}
	100%{
	  left:-27px;		
	}
}
@keyframes move3{
    0%{
	  left:-27px;	
	}
	22%{
	  opacity:1;	
	}	
	23%{
	  opacity:0;
	  left:-1660px;	
	}
	50%{
	  opacity:0;
	  left:2270px;	
	}
	51%{
	 opacity:1;
	}
	100%{
	  left:-27px;	
	}
}

.cloud-4{
	position:absolute;
	top:209px;
	
}
.cloud-4.class2{
	animation:move4 ease-out 180s 0s infinite;
    -webkit-animation:move4 ease-out 180s 0s infinite;
}
@-webkit-keyframes move4{
    0%{
	  left:200px;	
	}	
	29%{
	  opacity:1;	
	}
	30%{
	  opacity:0;
	  left:-1435px;	
	}
	50%{
	  opacity:0;
	  left:2495px;	
	}
	51%{
	 opacity:1;
	}
	100%{
	  left:200px;	
	}
}
@keyframes move4{
    0%{
	  left:200px;	
	}
	29%{
	  opacity:1;	
	}	
	30%{
	  opacity:0;
	  left:-1435px;	
	}
	50%{
	  opacity:0;
	  left:2495px;	
	}
	51%{
	 opacity:1;	
	}
	100%{
	  left:200px;	
	}
}

.cloud-5{
	position:absolute;	
	top:190px;
	width:111px;
	
}
.cloud-5.class2{
	animation:move5 linear 220s 0s infinite;
    -webkit-animation:move5 linear 220s 0s infinite;
}
@-webkit-keyframes move5{
    0%{
	  left:540px;	
	}	
	29%{
	  opacity:1;	
	}
	30%{
	  opacity:0;
	  left:-975px;	
	}
	50%{
	  opacity:0;
	  left:2955px;	
	}
	51%{
	 opacity:1;
	}
	100%{
	  left:540px;
	}
}
@keyframes move5{
    0%{
	  left:540px;	
	}
	29%{
	  opacity:1;	
	}	
	30%{
	  opacity:0;
	  left:-975px;	
	}
	50%{
	  opacity:0;
	  left:2955px;	
	}
	51%{
	 opacity:1;
	}
	100%{
	  left:540px;	
	}
}

.cloud-6{
	position:absolute;
	top:108px;
	width:193px;
}
.cloud-6.class2{
    animation:move6 linear 260s 0s infinite;
    -webkit-animation:move6 linear 260s 0s infinite;	
}
@-webkit-keyframes move6{
    0%{
	 left:840px;	
	}
	29%{
	  opacity:1;	
	}	
	30%{
	  opacity:0;
	  left:-796px;	
	}
	50%{
	  opacity:0;
	  left:3135px;	
	}
	51%{
	 opacity:1;	
	}
	100%{
	  left:840px;	
	}
}
@keyframes move6{
    0%{
	 left:840px;	
	}
	29%{
	  opacity:1;	
	}	
	30%{
	  opacity:0;
	  left:-796px;	
	}
	50%{
	  opacity:0;
	  left:3135px;	
	}
	51%{
	 opacity:1;
	}
	100%{
	  left:840px;
	}
}

.cloud-7{
	position:absolute;	
	top:219px;
}
.cloud-7.class2{
	animation:move7 cubic-bezier(0.5,0.4,0.3,0.5) 300s 0s infinite;
    -webkit-animation:move7 cubic-bezier(0.5,0.4,0.3,0.5) 300s 0s infinite;
}
@-webkit-keyframes move7{
    0%{
	  left:1130px;	
	}
	29%{
	  opacity:1;	
	}	
	30%{
	  opacity:0;
	  left:-506px;	
	}
	50%{
	  opacity:0;
	  left:3425px;	
	}
	51%{
	 opacity:1;
	}
	100%{
		opacity:1;
	  left:1130px;	
	}
}
@keyframes move7{
    0%{
	  left:1130px;	
	}
	29%{
	  opacity:1;	
	}	
	30%{
	  opacity:0;
	  left:-506px;	
	}
	50%{
	  opacity:0;
	  left:3425px;	
	}
	51%{
	 opacity:1;	
	}
	100%{
		opacity:1;
	  left:1130px;
	}
}

.cloud-8{
	position:absolute;
	top:175px;
	
}
.cloud-8.class2{
	animation:move8 ease-in-out 360s 0s infinite;
    -webkit-animation:move8 ease-in-out 360s 0s infinite;
}
@-webkit-keyframes move8{
    0%{
	  left:1330px;	
	}	
	29%{
	  opacity:1;	
	}
	30%{
	  opacity:0;
	  left:-306px;	
	}
	50%{
	  opacity:0;
	  left:3625px;	
	}
	51%{
	  opacity:1;
	}
	100%{
	  opacity:1;
	  left:1330px;	
	}
}
@keyframes move8{
    0%{
	  left:1330px;	
	}
	29%{
	  opacity:1;	
	}	
	30%{
	  opacity:0;
	  left:-306px;	
	}
	50%{
	  opacity:0;
	  left:3625px;	
	}
	51%{
	  opacity:1;
	}
	100%{
	  left:1330px;	
	}
}
.summary{
	padding:40px 50px;
	font-size:16px;
	line-height:28px;
}
.main-menu{
	padding:28px 0;
    background:#fff;	
}
ul.menu li{
    float:left;
	margin-left:240px;
	color:#66cccc;
	line-height:28px;	
}
ul.menu li:first-child{
	margin-left:63px;
}
ul.menu li i{
	display:block;
    font-size:20px;
	font-weight:bold;
	text-align:center;	
}
ul.menu li em{
	display:block;
    font-size:16px;
	text-align:center;
}
.story-unit{
    background:#efefef;	
	border-left:20px solid #333;
	border-right:20px solid #333;
}
.j-bg-prev{
	left:-240px !important;	
}
.j-bg-next{
	right:-240px !important;	
}
.class2{
	display:none;	
}
@media screen and (max-width:1633px){
	.class1{
	    display:none;	
	}
    .class2{
		display:block;	
	}
	.j-bg-prev{
	    left:40px !important;
	}
	.j-bg-next{
	    right:40px !important;	
	}
}
@media screen and (max-width:1200px){
    .story-unit{
	    border-left:none;
	    border-right:none;
    }	
	.swiper-button-prev{
	    left:0 !important;
	}
	.swiper-button-next{
	    right:0 !important;	
	}
}
.story-left{
	float:left;
}
.story-left i{
	display:block;
	margin-top:15px;
    color:#66cccc;	
}
.story-left i a{
    color:#66cccc;	
}
.story-right{
	float:left;
	margin-left:50px;
	text-align:left;
	color:#999;
	line-height:22px;
	vertical-align:top;
}
.story-right a{
	color:#999;
}
.story-right h3{
	margin-bottom:16px;
	font-size:22px;
	font-weight:normal;
	color:#333;
	line-height:28px;
}
.story-right h3 a{
    color:#333;	
}
.j-bg-prev,.j-bg-next{
	position:absolute;
	width:80px;
	height:80px;
	top:210px; 
	border-radius:50%;
	z-index:10;	
}
.j-bg-prev.class3,.j-bg-next.class3{
	-webkit-animation:Scales linear forwards .3s 0s 1;
	animation:Scales linear forwards .3s 0s 1;
}  
@-webkit-keyframes Scales{
    0%{
		transform:scale(0,0);
		-webkit-transform:scale(0,0);
		background:#ff9900;
		
		transform-origin:center;
        -ms-transform:center; /* IE 9 */
        -ms-transform-origin:center; /* IE 9 */
        -webkit-transform:center; /* Safari and Chrome */
        -webkit-transform-origin:center; /* Safari and Chrome */
	}	
	100%{
		transform:scale(1,1);
		-webkit-transform:scale(1,1);
		background:#ff9900;
		
		transform-origin:center;
        -ms-transform:center; /* IE 9 */
        -ms-transform-origin:center; /* IE 9 */
        -webkit-transform:center; /* Safari and Chrome */
        -webkit-transform-origin:center; /* Safari and Chrome */
	}
}
@keyframes Scales{
     0%{
		transform:scale(0,0);
		-webkit-transform:scale(0,0);
		background:#ff9900;
		
		transform-origin:center;
        -ms-transform:center; /* IE 9 */
        -ms-transform-origin:center; /* IE 9 */
        -webkit-transform:center; /* Safari and Chrome */
        -webkit-transform-origin:center; /* Safari and Chrome */
	}	
	100%{
		transform:scale(1,1);
		-webkit-transform:scale(1,1);
		background:#ff9900;
		
		transform-origin:center;
        -ms-transform:center; /* IE 9 */
        -ms-transform-origin:center; /* IE 9 */
        -webkit-transform:center; /* Safari and Chrome */
        -webkit-transform-origin:center; /* Safari and Chrome */
	}
}
.white-bg{
	width:118px;
	height:118px;
	margin-left:-20px;
	margin-top:-20px; 
	border-radius:50%;
	opacity:0;
	background:#efefef;
	border:1px solid #ff9900;
}
.j-bg-next .white-bg.class4,.j-bg-prev .white-bg.class4{
	-webkit-animation:Scales1 linear forwards .4s 0s 1;
	animation:Scales1 linear forwards .4s 0s 1; 
}
@-webkit-keyframes Scales1{
    0%{
		opacity:1;
        transform:scale(0.66,0.66);
		-webkit-transform:scale(0.66,0.66);
		background:#efefef;
		border:1px solid #ff9900;
		transform-origin:center;
        -ms-transform:center; /* IE 9 */
        -ms-transform-origin:center; /* IE 9 */
        -webkit-transform:center; /* Safari and Chrome */
        -webkit-transform-origin:center; /* Safari and Chrome */
	}	
	60%{
        transform:scale(1,1);
		-webkit-transform:scale(1,1);
		background:#efefef;
		border:1px solid #ff9900;
		transform-origin:center;
        -ms-transform:center; /* IE 9 */
        -ms-transform-origin:center; /* IE 9 */
        -webkit-transform:center; /* Safari and Chrome */
        -webkit-transform-origin:center; /* Safari and Chrome */
	}
	80%{ 
		opacity:0;		
	}
	100%{ 
		opacity:0;		
	}
}
@keyframes Scales1{
    0%{
		opacity:1;
        transform:scale(0.66,0.66);
		-webkit-transform:scale(0.66,0.66);
		background:#efefef;
		border:1px solid #ff9900;
		transform-origin:center;
        -ms-transform:center; /* IE 9 */
        -ms-transform-origin:center; /* IE 9 */
        -webkit-transform:center; /* Safari and Chrome */
        -webkit-transform-origin:center; /* Safari and Chrome */
	}	
	60%{
        transform:scale(1,1);
		-webkit-transform:scale(1,1);
		background:#efefef;
		border:1px solid #ff9900;
		transform-origin:center;
        -ms-transform:center; /* IE 9 */
        -ms-transform-origin:center; /* IE 9 */
        -webkit-transform:center; /* Safari and Chrome */
        -webkit-transform-origin:center; /* Safari and Chrome */
	}
	80%{ 
		opacity:0;		
	}
	100%{ 
		opacity:0;		
	}
}

.service{
	padding-bottom:50px;
    background:url(../images/service-bg.jpg) no-repeat top center;	
}
.service-title{
	display:inline-block;
	margin-top:50px;
	padding-bottom:5px;
	padding-right:8px;
	font-size:24px;
	font-weight:bold;
    color:#fff;	
	text-shadow:1px 1px 2px rgba(0,0,0,.5);
	border-bottom:2px solid #fff;
}
.service em{
	display:block;
	margin-top:10px;
	margin-bottom:20px;
	color:#fff;
	line-height:36px;
	text-shadow:1px 1px 2px rgba(0,0,0,.5);
}
.service-qq-2{
    margin-left:130px;	
}
.service i{
	display:block;
	margin-top:30px;
    color:#fff;	
}
.footer{
	height:120px;
    font-size:14px;	
	line-height:120px;
}