/* .banner .package .pic img{
	border:0 none;
	width:auto\9;
	max-width:100%;
	vertical-align:top; 
	height:auto;
	-ms-interpolation-mode: bicubic;windows平台缩放图片时，可能出现图像失真现象
} */
.banner .package .pic{
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	transition: all 2s ease;
}
.banner .package .pic1{
	position: absolute;
	right:0;
	bottom:0;
	z-index: 1;
}
.banner .package .pic2{
	position: absolute;
	left:-20px;
	bottom:0;
	z-index: 2;
}
.banner .package .pic3{
	position: absolute;
	right:0;
	bottom:0;
	z-index: 3;
}
.banner .package .desc{
	position: absolute;
	top:50%;
	left:10%;
	margin-top: -105px;
	text-align: center;
	z-index: 10;
}
.banner .package .desc h1{
	font-size:64px;
	line-height: 1;
	color: #fff;
	font-weight: bold;
	margin-bottom:50px;
}
.banner .package .desc p{
	font-size:32px;
	line-height: 1;
	color: #fff;
}
.surge .box1{
	text-align: center;
	padding:120px 0;
}
.surge .box1 .icon{
	width:970px;
	margin: 0 auto;
	font-size: 0;
}
.surge .box1 .icon img{
	display:block;
	width:40px;
	height: auto;
	margin: 0 auto;
}
.surge .box1 .icon span{
	display: block;
	font-size:12px;
	color: #000;
}
.surge .box1 .icon .list{
	display: inline-block;
	margin: 0 25px;
}
.surge .box2{
	width: 100%;
	overflow: hidden;
	position: relative;
}
.surge .box2 .bg{
	position: absolute;
}
.surge .box3{
	background: #e2e2e2;
	position: relative;
	overflow: hidden;
}
.surge .box3 .play{
	position: absolute;
	left:15%;
	bottom: 0;
	width:400px;
	height: 100%;
	text-align: center;
	z-index: 999;
}
.surge .box3 .play .wrap{
	position: relative;
	display: inline-block;
	width:360px;
	height: 100%;
}
.surge .box3 .play .wrap .ringwrap{
	position:absolute;
	top: 510px;
    left: 178px;
}
.surge .box3 .play .wrap img{
	display: inline-block;
	width:100%;
	height:auto; 
}
.surge .box3 .play .wrap .icon{
	width:53px;
	height:53px;
	background:url(/uploads/image/pheihero/surge_ring2.png) no-repeat center center;
	background-size: 100% auto;
	position: absolute;
	top:483px;
	left:153px;
	z-index:6;
}
.surge .box3 .play.active .wrap .icon{
	width: 358px;
    height: 10px;
    background: url(/uploads/image/pheihero/surge_ring3.png) no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    top: 508px;
    left: 6px;
}
.surge .box3 .play.active .wrap .line-light{
	background:#fd1300;
	/* ie10、firefox and opera，ie9以及更早的版本不支持 */
	animation-name: breathred;                         /* 动画名称 */
	animation-duration: 3s;                         /* 动画时长3秒 */
	animation-timing-function: ease-in-out;         /* 动画速度曲线：以低速开始和结束 */
	animation-iteration-count: infinite;            /* 播放次数：无限 */
	/* safari and chrome */
	-webkit-animation-name: breathred;                 /* 动画名称 */
	-webkit-animation-duration: 3s;                 /* 动画时长3秒 */
	-webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
	-webkit-animation-iteration-count: infinite;    /* 播放次数：无限 */
}
.surge .box3 .play .wrap .line-light{
    width:344px;
    height:7px;
    background:#3adcff;
    position: absolute;
    top: 509px;
    left: 8px;
    z-index:5;
    /* ie10、firefox and opera，ie9以及更早的版本不支持 */
    animation-name: breathblue;                         /* 动画名称 */
    animation-duration: 3s;                         /* 动画时长3秒 */
    animation-timing-function: ease-in-out;         /* 动画速度曲线：以低速开始和结束 */
    animation-iteration-count: infinite;            /* 播放次数：无限 */
    /* safari and chrome */
    -webkit-animation-name: breathblue;                 /* 动画名称 */
    -webkit-animation-duration: 3s;                 /* 动画时长3秒 */
    -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    -webkit-animation-iteration-count: infinite;    /* 播放次数：无限 */
}
@keyframes breathblue {
    from{ 
    	opacity:0.1; 
    }                          
    50%{ 
    	opacity:1;
    	-webkit-box-shadow: 0 0 100px #3adcff;
    	-moz-box-shadow: 0 0 100px #3adcff;
    	box-shadow: 0 0 100px #3adcff;
    }                        
    to{ 
    	opacity:0.1; 
    }                         
}
@-webkit-keyframes breathblue {
    from{ 
    	opacity:0.1; 
    }                          
    50%{ 
    	opacity:1; 
    	-webkit-box-shadow: 0 0 100px #3adcff;
    	-moz-box-shadow: 0 0 100px #3adcff;
    	box-shadow: 0 0 100px #3adcff;
    }                          
    to{ 
    	opacity:0.1; 
    }                          
}
@keyframes breathred {
    from{ 
    	opacity:0.1; 
    }                          
    50%{ 
    	opacity:1;
    	-webkit-box-shadow: 0 0 100px #fd1300;
    	-moz-box-shadow: 0 0 100px #fd1300;
    	box-shadow: 0 0 100px #fd1300;
    }                        
    to{ 
    	opacity:0.1; 
    }                         
}
@-webkit-keyframes breathred {
    from{ 
    	opacity:0.1; 
    }                          
    50%{ 
    	opacity:1; 
    	-webkit-box-shadow: 0 0 100px #fd1300;
    	-moz-box-shadow: 0 0 100px #fd1300;
    	box-shadow: 0 0 100px #fd1300;
    }                          
    to{ 
    	opacity:0.1; 
    }                          
}
.surge .box3 .play .wrap .ring{
	position: absolute;
    border-radius: 50%;
    border: 1px solid #fefefe;
    transform: scale(0);
    -webkit-animation: bowen 3s ease-in infinite;
    animation: bowen 3s ease-in infinite;  
} 
.surge .box3 .play .wrap .ring1{
  	top:-500px;
    left:-500px;
    width:1000px;
    height:1000px;
    -webkit-animation-delay:0.4s;
    animation-delay:0.4s;
}  
.surge .box3 .play .wrap .ring2{
    top:-500px;
    left:-500px;
    width:1000px;
    height:1000px;
    -webkit-animation-delay:0.8s;
    animation-delay:0.8s;
}
.surge .box3 .play .wrap .ring3{
	top:-500px;
    left:-500px;
    width:1000px;
    height:1000px;
    -webkit-animation-delay:1.2s;
    animation-delay:1.2s;
} 
@keyframes bowen{
	0% {
	    transform: scale(0);
	    opacity:1;
	    border-width: 4px;
	}
	33.3%{
	    transform: scale(1);
	    opacity:0;
	    border-width:1px;
	}
	66.7%{
	    transform: scale(1);
	    opacity:0;
	    border-width:1px;
	}
	100% {
	    transform: scale(1);
	    opacity:0;
	    border-width:1px;
	}
}
.surge .box3 .play .wrap .on-off{
	position: absolute;
    top: 485px;
    left: 154px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 99;
}
.surge .box3 .text{
	position:absolute;
	top: 50%;
	left: 56%;
	text-align: center;
	height:335px;
	margin-top: -168px;
}
.surge .box3 .text a{
	font-size:14px;
	color: #000;
	background: url(/uploads/image/pheihero/surge_creat.png) no-repeat right center;
	background-size: 8px auto;
	padding-right: 20px;
}
.surge .box3 .mask{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width:0;
	background: #242424;
	-webkit-transition: width .6s ease;
	-moz-transition: width .6s ease;
	transition: width .6s ease;
}
.surge .box3 .mask a{
	display: inline-block;
	width: 38px;
	height: 39px;
	background: url(/uploads/image/pheihero/surge_ring_close.png) no-repeat center center;
	background-size:36px auto;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
}
.surge .box3 .mask a:hover{
	/*-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);*/
}
.surge .box3 .mask .desc{
	position:absolute;
	top: 50%;
	left: 56%;
	text-align: center;
	height:320px;
	margin-top: -160px;
	width:490px;
	display: none;
}
.surge .box3 .mask .desc h1{
	color: #fff!important;
}
.surge .box3 .mask .desc p{
	color: #fff!important;
}
.surge .box4{
	width:100%;
	height:750px;
	background-color: #8894a0;
	overflow: hidden;
}
.surge .box4 img{
	display: block;
	width:auto;
	height:100%;
	float: right;
}
.surge .box5{
	width:100%;
	background-color: #f4f4f2;
	overflow: hidden;
	position: relative;
}
.surge .box5 .pic{
	display: block;
	position: absolute;
	width:50%;
	height:100%;
	background-image: url(/uploads/image/pheihero/surge12_bg.jpg);
	background-repeat: repeat-y;
	background-size: 100% auto;
}
.surge .box5 .pic .wrap{
	position: relative;
	width: 100%;
	height: 100%;
}
.surge .box5 .pic img{
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: auto;
}
.surge .box5 .desc{
	position: absolute;
	bottom:160px;
	right:10%;
}
.surge .box-wrap{
	position: relative;
}
.surge .box-wrap .slider{
	position: absolute;
	display: block;
	-webkit-transition: top 4s ease;
	-moz-transition: top 4s ease;
	transition: top 4s ease;
}
.surge .box-wrap .slider1{
	top:200px;
	left:0;
	z-index: 2;
}
.surge .box-wrap .slider2{
	top:600px;
	right:0;
}
.surge .box6{
	width: 100%;
	position:relative;
}
.surge .box6 #h7focusimages{
	position: absolute;
    top: 0px;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
.surge .box6 #h7focusimages img{
	position: absolute;
}
.surge .box6 #h7focusimages .threed{
	transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}
.surge .box6 #h7focustexts{
	position: absolute;
	top: 0px;
    height: 100%;
    width: 50%;
    text-align: center;
    margin-left: 50%;
    overflow: hidden;
    background-color: #333;
    -webkit-transition:background-color .3s ease;
    -moz-transition:background-color .3s ease;
    transition:background-color .3s ease;
}
.surge .box6 .text{
	color: #fff;
	text-align: center;
	width:100%;
	height:278px;
	position: absolute;
}
.surge .box6 .text.black{
	color: #000;
}
.surge .box6 .text h2{
	font-size:14px;
	font-weight: normal;
	margin-bottom: 25px;
}
.surge .box6 .text h1{
	font-size:40px;
	font-weight:bold;
	padding-bottom:35px;
	position: relative;
}
.surge .box6 .text img{
	display: inline-block;
	width:60px;
	height:auto;
	margin-bottom:40px;
}
.surge .box6 .text h1:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -10px;
	width:40px;
	height: 2px;
	background-color: #fff;
}
.surge .box6 .text.black h1:after{
	background-color: #000;
}
.surge .box6 .text p{
	font-size:18px;
    line-height:26px;
    margin-top:35px;
}
.surge .box7{
	width: 100%;
	height:850px;
	background: url(/uploads/image/pheihero/surge19.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
}
.surge .box7 .desc{
	position: absolute;
	top:50%;
	left:5%;
	margin-top: -72px;
}
.surge .box8{
	width: 100%;
	height: 900px;
	overflow: hidden;
	position: relative;
}
.surge .box8 video{
	display: block;
	width: auto;
	height: 100%;
	position: absolute;
}
.surge .box8 img{
	position: absolute;
}
.surge .box8 .desc{
	position: absolute;
	left:0;
	right: 0;
	top: 50%;
	margin-top: -57px;
	z-index:6;
	text-align: center;
}
.surge .box8 .desc p{
	font-size:40px;
	color: #fff;
}
.surge .box9{
	width: 100%;
	height:840px;
	position: relative;
	overflow: hidden;
}
.surge .box9 .icon{
	display: block;
	position: absolute;
	width:600px;
	height:auto;
	top:15%;
	left: 50%;
	margin-left: -320px;
	z-index:20;
}
.surge .box9 .icon img{
	width: 100%;
	height: auto;
}
.surge .box9 .pic{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: none;
}
.surge .box9 .wrap{
	width: 100%;
	height: 100%;
	position: relative;
}
.surge .box9 .desc{
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	bottom:28%;
	text-align: center;
	z-index: 99;
}
.surge .box9 .desc.white{
	color: #fff;
}
.surge .box9 .desc.black{
	color: #000;
}
.surge .box9 .desc h1{
	font-size:38px;
    font-weight: bold;
    margin-bottom:30px;
}
.surge .box9 .desc p{
	font-size:18px;
    line-height: 24px;
}
.surge .box9 .wrap img{
	display: block;
	width:1200px;
	height: auto;
	margin: auto;
}
.surge .box9 .pic{
	z-index: 10;
}
.surge .box9 .tab-bg{
	position: absolute;
	bottom:16%;
	font-size:0;
	width: 100%;
	text-align: center;
	z-index: 10;
}
.surge .box9 .tab-bg span{
	display: inline-block;
	width:30px;
	height:30px;
	margin: 0 13px;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
}
.surge .box9 .tab-bg span.a{
	background: url(/uploads/image/pheihero/surge24_1.png) no-repeat center center;
	background-size:cover;
}
.surge .box9 .tab-bg span.b{
	background: url(/uploads/image/pheihero/surge24_2.png) no-repeat center center;
	background-size:cover;
}
.surge .box9 .tab-bg span.c{
	background: url(/uploads/image/pheihero/surge24_3.png) no-repeat center center;
	background-size:cover;
}
.surge .box9 .tab-bg span.active:after{
	content: "";
	width:30px;
	height:30px;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(/uploads/image/pheihero/surge24_white.png) no-repeat center center;
	background-size:cover;
}
.surge .box9 .tab-bg span.bactive.active:after{
	content: "";
	width:30px;
	height:30px;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(/uploads/image/pheihero/surge24_black.png) no-repeat center center;
	background-size:cover;
}
.surge .box9 .tab-bg span.activeb:after{
	content: "";
	width:30px;
	height:30px;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(/uploads/image/pheihero/surge24_black.png) no-repeat center center;
	background-size:cover;
}
.surge .box9 #bgcontent img{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom:0;
	width:0;
	height: 100%;
	-webkit-transition: width .4s ease;
	-moz-transition: width .4s ease;
	transition: width .4s ease;
}
.surge .box10{
	width: 100%;
	height:auto;
	overflow: hidden;
}
.surge .box10 img{
	border:0 none;
	width:auto\9;
	max-width:100%;
	vertical-align:top; 
	height:auto;
	-ms-interpolation-mode: bicubic;/*windows平台缩放图片时，可能出现图像失真现象*/
	width: 100%;
}
.surge .box10 img{
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	-ms-transform: scale(1.02);
	-moz-transform: scale(1.02);
	-webkit-transform: scale(1.02);
	-o-transform: scale(1.02);
}
.surge .box10 img:hover{
	cursor: pointer;
	transform: scale(1.1);
	-ms-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
}
.surge .box10 .left{
	width: 50%;
	float: left;
}
.surge .box10 .right{
	width: 50%;
	float: right;
}
.surge .box10 .right .right-top{
	width: 100%;
}
.surge .box10 .right .right-top .pic{
	float: left;
	width: 50%;
	overflow:hidden;
}
.surge .box10 .right .right-bot{
	overflow: hidden;
	width: 100%;
}
.surge .parameter{
	width: 100%;
	overflow: hidden;
	background-image: url(/uploads/image/pheihero/parameter_bg1.jpg);
	background-repeat: repeat-y;
	background-size: 100% auto;
	position: relative;
	height: 900px;
}
.surge .parameter .wrap{
	width:900px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left:-450px;
	margin-top: -326px;
	text-align: center;
}
.surge .parameter .desc{
	text-align: left;
}
.surge .parameter .desc h2{
	font-size:14px;
	color: #fff;
	font-weight: normal;
	margin-bottom: 20px;
}
.surge .parameter .desc h1{
	font-size:40px;
	color: #fff;
	font-weight: bold;
}
.surge .parameter .wrap .bg{
	display: block;
	width: 100%;
	height: auto;
	margin:10% 0;
	text-align: center;
}
.surge .parameter .wrap .icon-pack{
	width: 100%;
}
.surge .parameter .wrap .icon-pack .list{
	float: left;
	width: 33.33%;
	margin-bottom:60px;
}
.surge .parameter .wrap .icon-pack .list .item{
	width:200px;
	margin: 0 auto;
}
.surge .parameter .wrap .icon-pack .icon{
	float: left;
	width:40px;
	height:auto;
}
.surge .parameter .wrap .icon-pack .icon img{
	display: block;
	width: 100%;
	height: auto;
}
.surge .parameter .wrap .icon-pack .name{
	float: left;
	margin-left: 10px;
	text-align: left;
	padding-top: 4px;
}
.surge .parameter .wrap .icon-pack .name p{
	font-size:18px;
	color: #fff;
	margin-bottom:25px;
}
.surge .parameter .wrap .icon-pack .name span{
	font-size:14px;
	color: #fff;
	display:block;
	height: 37px;
}
@media screen and (max-width:1700px){
.banner .package .desc h1{
	font-size:48px;
}
.banner .package .desc p{
	font-size:26px;
}
.txt_left{
	font-size:34px;
	left: -280px;
	text-align: center;
}
.cd-image-container .left .txt p,
.cd-image-container .right .txt p{
	font-size:24px;
}
.surge .box6 .text h1{
	font-size:34px;
}
.surge .box6 .text h2{
	font-size: 12px;
	margin-bottom: 20px;
}
.surge .box6 .text p{
	font-size: 16px;
	margin-top: 30px;
}
.surge .box8 .desc p{
	font-size:34px;
}
.surge .box9 .desc h1{
	font-size:34px;
}
.surge .box9 .desc p{
	font-size:14px;
}
.surge .parameter .desc h1{
	font-size:34px;
}
.surge .parameter .wrap .icon-pack .name p{
	font-size: 16px;
}
.surge .parameter .wrap .icon-pack .name span{
	font-size: 12px;
}
}
@media screen and (max-width:1600px){
.surge .box7 .desc{
	margin-top: -320px;
}
}