.nav-b{ width:100%;
      line-height:50px;
	  background:#41464C;
	  }
.nav-b li a{ display:block;color:#fff}
.nav-b li a:hover{color:#36dffe;}
.nav-b li.active a{color:#36dffe;}
.nav-b ul{ width:1183px;
            height:50px;
			margin:0 auto;}
.nav-b ul li{ float:right; width:80px;color:#fff; font-size:14px; padding-left: 10px; box-sizing:border-box; border-right: 1px solid #373C42; 
	         line-height: 20px;
	         margin-top:15px;
	         text-align: center;
}
.dg{ display:block;
     float:right;
	 width:100px;
	 line-height:30px;
	 color:#3F464C;
	 background:#36DFFE;
	 margin-top:10px;
	 text-align:center;
	 margin-left:20px;}
.zhu{ background-color: #000000;
		  height: 810px;
    	  overflow: hidden;
    	  position: relative;
       }
.box{ width:843px;
       height:276px;
	  position:relative;
	  top:103px;
	  margin:0 auto;
	  z-index:999;
	  box-sizing:border-box;

	  }
.name{ width:100%;
        text-align:center;
		font-size:45px;
		color:#fff;
		margin:10px 0;}
.box p{ width:100%; text-rendering: optimizespeed;letter-spacing: 0.04em; text-align:center;
       font-size:16px;
	   line-height:25px;
	   color:#dbdada;
	  }  
.jiage{ color:#36dffe;
         font-size:20px;
		 width:100%;
		 text-align:center;
		 line-height:30px;
		 margin-top:40px;
		 }
.jiage i{ display: inline-block;
           font-style:normal;
           font-size:40px !important;
		   font-weight:bold;}
.ss{height: inherit;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;}
.sp{ visibility: visible;
    	width: 115%;
    	position: absolute;
    	top:50%;
    	left:50%;
    transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);}
.zhanshi{ max-width: 1920px;
         height:753px;
		 background:url(../images/2.jpg) no-repeat center;
		 position: relative;
		 padding-top:107px;
		 color: #000
		 box-sizing:border-box;}
.zhanshi .wz h1{ font-size:40px;
	             width: 100%;
                 position: relative;
                 margin-bottom:25px ;
                 text-align: center;
                 }
.zhanshi .wz p{ font-size: 20px;
	            width: 100%;
	            text-align: center;
                }
.pz{ max-width: 1920px;
	 height: 753px;
	 background:url(../images/3.jpg) no-repeat center;
	 position: relative;
	 padding-top:107px;
	 box-sizing:border-box;
      }
.pz h1{font-size:45px !important;
	   width: 100% !important;
       position: relative !important;
       margin-bottom:25px  !important;
       text-align: center !important;
   		color: #ccc !important;}  
.pz p{ width: 100%;
       font-size: 20px !important;
       color: #999 !important;
      text-align: center;} 
.pz ul{ width: 1000px;
        
        margin: 0 auto;
         margin-top:50px;}
.pz ul li{ width:243px;
	        border-right: 1px solid #333333;
	        font-size: 30px;
	        color: #36dffe;
	        text-align: center;
	        line-height: 45px;
	        float:left;
			}
.pz ul li i{font-size: 20px;
            color: #36dffe;
            font-style: normal;}  
.js1{ max-width: 1920px;
    height:189px;
    background:url(../images/4.jpg) no-repeat center;
	 position: relative;
	 padding-top:107px;}
.js1 h1{font-size:45px;
	   width: 100%;
       position: relative;
       margin-bottom:25px ;
       text-align: center;
   		color: #000;}
.js1 p{font-size:20px;
	   width: 100%;
       position: relative;
       text-align: center;
   		color: #000;} 
.i-upload {
	display: table-cell; 
		vertical-align: middle;
	background-repeat: no-repeat;
	background-image: url(../images/4.png);
	background-position: center;
	height: 52px;
	width: 52px;
}


.container-infinite {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height:auto;
	display: inline-block;
	position:relative;
	/*height: 600px;*/
	/*height:750px;*/
}
@media screen and (max-width:1366px){
	 .container-infinite{height:545px;}
	}
.w1200 {
	width: 100%;
	max-width: 1200px;
	box-sizing: border-box;
	margin: auto
}

@media screen and (max-width:1240px) {
	.w1200 {
		padding-left: 20px;
		padding-right: 20px
	}
}

.columns-2 {
	width: 50%;
	float: left;
	text-align: left
}
.design-appearance-section .design-appearance-back {
		left: 0
	}

.phone-show-section {
	position: relative
}

.phone-show-section .columns-2 {
	position: relative;
	overflow: hidden
}

.phone-show-section .columns-2 .img-wrap {
	position: relative;
	width: 100%;
	/*height: 300px;*/
	overflow: hidden;
	background: #000;
}

.phone-show-section .update-btn {
	position: absolute;
	
	background: #fff;
	border-radius: 50%;
	
	text-align: center;
		display: table;
	line-height: 90px;
	top: 43%;
	left:48%;
	cursor: pointer;
	width:90px;
	height: 90px;
}

.phone-show-section .update-btn i {
	-moz-transform: rotate(0);
	-ms-transform: rotate(0);
	-webkit-transform: rotate(0);
	transform: rotate(0);
	vertical-align: 0
}

.phone-show-section .update-btn.active i {
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	-moz-transition: -moz-transform .5s;
	-o-transition: -o-transform .5s;
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s
}

@media screen and (max-width:1024px) {
	.phone-show-section .update-btn {
		padding: 10px;
		margin-left: -35px;
		margin-top: -40px
	}
}

@media screen and (max-width:767px) {
	.phone-show-section .update-btn {
		padding: 8px 10px;
		margin-left: -20px;
		margin-top: -20px
	}

	.phone-show-section .update-btn i {
		margin-left: 0;
		margin-top: 0
	}
}

.phone-show-section .scene-graphs-big,.phone-show-section .scene-graphs-bottom,.phone-show-section .scene-graphs-top {
	position: absolute
}

.phone-show-section .scene-graphs-big {
	top: 100%
}

.phone-show-section .scene-graphs-top {
	left: 100%;
	top: 0
}

.phone-show-section .scene-graphs-bottom {
	right: 100%;
	top: 0
}

.phone-show-section.update-img .phone-show-pro-big,.phone-show-section.update-img .phone-show-pro-bottom,.phone-show-section.update-img .phone-show-pro-top,.phone-show-section.update-img .scene-graphs-big,.phone-show-section.update-img .scene-graphs-bottom,.phone-show-section.update-img .scene-graphs-top {
	-moz-transition: -moz-transform .5s;
	-o-transition: -o-transform .5s;
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s
}

.phone-show-section.update-img .phone-show-pro-big,.phone-show-section.update-img .scene-graphs-big {
	-moz-transform: translate3d(0,-100%,0);
	-ms-transform: translate3d(0,-100%,0);
	-webkit-transform: translate3d(0,-100%,0);
	transform: translate3d(0,-100%,0)
}

.phone-show-section.update-img .phone-show-pro-top,.phone-show-section.update-img .scene-graphs-top {
	-moz-transform: translate3d(-100%,0,0);
	-ms-transform: translate3d(-100%,0,0);
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0)
}

.phone-show-section.update-img .phone-show-pro-bottom,.phone-show-section.update-img .scene-graphs-bottom {
	-moz-transform: translate3d(100%,0,0);
	-ms-transform: translate3d(100%,0,0);
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0)
}

.phone-show-section.circulate-stitics .phone-show-pro-big,.phone-show-section.circulate-stitics .phone-show-pro-bottom,.phone-show-section.circulate-stitics .phone-show-pro-top,.phone-show-section.circulate-stitics .scene-graphs-big,.phone-show-section.circulate-stitics .scene-graphs-bottom,.phone-show-section.circulate-stitics .scene-graphs-top {
	-moz-transition: -moz-transform 0s;
	-o-transition: -o-transform 0s;
	-webkit-transition: -webkit-transform 0s;
	transition: transform 0s
}

.phone-show-section.circulate-stitics .phone-show-pro-big {
	-moz-transform: translate3d(0,100%,0);
	-ms-transform: translate3d(0,100%,0);
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0)
}

.phone-show-section.circulate-stitics .phone-show-pro-top {
	-moz-transform: translate3d(100%,0,0);
	-ms-transform: translate3d(100%,0,0);
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0)
}

.phone-show-section.circulate-stitics .phone-show-pro-bottom {
	-moz-transform: translate3d(-100%,0,0);
	-ms-transform: translate3d(-100%,0,0);
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0)
}

.phone-show-section.circulate-img .phone-show-pro-big,.phone-show-section.circulate-img .phone-show-pro-bottom,.phone-show-section.circulate-img .phone-show-pro-top,.phone-show-section.circulate-img .scene-graphs-big,.phone-show-section.circulate-img .scene-graphs-bottom,.phone-show-section.circulate-img .scene-graphs-top {
	-moz-transition: -moz-transform .5s;
	-o-transition: -o-transform .5s;
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s
}

.phone-show-section.circulate-img .phone-show-pro-big,.phone-show-section.circulate-img .phone-show-pro-bottom,.phone-show-section.circulate-img .phone-show-pro-top {
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0)
}

.phone-show-section.circulate-img .scene-graphs-big {
	-moz-transform: translate3d(0,-200%,0);
	-ms-transform: translate3d(0,-200%,0);
	-webkit-transform: translate3d(0,-200%,0);
	transform: translate3d(0,-200%,0)
}

.phone-show-section.circulate-img .scene-graphs-top {
	-moz-transform: translate3d(-200%,0,0);
	-ms-transform: translate3d(-200%,0,0);
	-webkit-transform: translate3d(-200%,0,0);
	transform: translate3d(-200%,0,0)
}

.phone-show-section.circulate-img .scene-graphs-bottom {
	-moz-transform: translate3d(200%,0,0);
	-ms-transform: translate3d(200%,0,0);
	-webkit-transform: translate3d(200%,0,0);
	transform: translate3d(200%,0,0)
}


	.phone-show-section .phone-show-pro-bottom {
		background-image: url(../images/4-2.png);
		background-repeat: no-repeat;
		background-position: center center;
		width: 100%;
		padding-bottom: 40.10417%;
		background-size: cover;
	}




	.phone-show-section .phone-show-pro-top {
		background-image: url(../images/4-1.png);
		background-repeat: no-repeat;
		background-position: center center;
		width: 100%;
		padding-bottom: 40.10417%;
		background-size: cover;
		position:relative;
	}




	.phone-show-section .phone-show-pro-big {
		background-image: url(../images/4-3.png);
		background-repeat: no-repeat;
		background-position: center center;
		width: 100%;
		padding-bottom: 80.20833%;
		background-size: cover;
		position:relative;
		
	}




	.phone-show-section .scene-graphs-big {
		background-image: url(../images/4-6.png);
		background-repeat: no-repeat;
		background-position: center center;
		width: 100%;
		padding-bottom: 80.20833%;
		background-size: cover;
		
	}
.scene-graphs-big  .jies{ position: absolute;
                         width:100%;
						 height:100%;
						 background:rgba(0,0,0,0.5);
						 filter:alpha(opacity=50);
						 top:0;
						 left:0;transform: translate3d(0px, 0px, 0px);
						 display:none;}
.scene-graphs-big	 h1 { font-size:30px; color:#ccc; position:absolute;top:250px; left:250px;}
.scene-graphs-big	.line{ width:50px; height:1px;background:#36dffe;position:absolute;top:315px; left:300px; }
.scene-graphs-big	.xq{ font-size:18px;
                               color:#999;position:absolute;top:360px; left:120px;} 
.phone-show-pro-big  .jies{ position: absolute;
                         width:100%;
						 height:100%;
						 background:rgba(0,0,0,0.5);
						 filter:alpha(opacity=50);
						 top:0;
						 left:0;display:none;}
.phone-show-pro-big	 h1 { font-size:30px; color:#ccc; position:absolute;top:250px; left:240px;}
.phone-show-pro-big	.line{ width:50px; height:1px;background:#36dffe;position:absolute;top:315px; left:300px; }
.phone-show-pro-big	.xq{ font-size:18px;
                               color:#999;position:absolute;top:360px; left:120px;} 

.phone-show-pro-top .jies{ position: absolute;
                         width:100%;
						 height:100%;
						 background:rgba(0,0,0,0.8);
						 filter:alpha(opacity=80);
						 top:0;
						 left:0;display:none;}
.phone-show-pro-top .jies h1 { font-size:30px; color:#ccc; position:absolute;top:84px; right:235px;}
.phone-show-pro-top .jies .line{ width:50px; height:1px;background:#36dffe;position:absolute;top:149px; right:299px;}
.phone-show-pro-top .jies .xq{ font-size:18px;
                               color:#999;position:absolute;top:197px; right:120px;} 
							   
.phone-show-pro-bottom .jies{ position: absolute;
                         width:100%;
						 height:100%;
						 background:rgba(0,0,0,0.6);
						 filter:alpha(opacity=60);
						 top:0;
						 left:0;display:none;}
.phone-show-pro-bottom .jies h1 { font-size:30px; color:#ccc; position:absolute;top:84px; right:235px;}
.phone-show-pro-bottom .jies .line{ width:50px; height:1px;background:#36dffe;position:absolute;top:149px; right:299px; display:}
.phone-show-pro-bottom .jies .xq{ font-size:18px;
                               color:#999;position:absolute;top:197px; right:120px;} 

	.phone-show-section .scene-graphs-top {
		background-image: url(../images/4-4.png);
		background-repeat: no-repeat;
		background-position: center center;
		width: 100%;
		padding-bottom: 40.10417%;
		background-size: cover;
		
	}
.scene-graphs-top{ position:relative;}
.scene-graphs-top .jies{ position: absolute;
                         width:100%;
						 height:100%;
						 background:rgba(0,0,0,0.6);
						 filter:alpha(opacity=60);
						 top:0;
						 left:0;
						 transform: translate3d(0px, 0px, 0px);display:none;
						}

.scene-graphs-top .jies h1 { font-size:30px; color:#ccc; position:absolute;top:84px; right:235px;}
.scene-graphs-top .jies .line{ width:50px; height:1px;background:#36dffe;position:absolute;top:149px; right:299px;}
.scene-graphs-top .jies .xq{ font-size:18px;
                               color:#999;position:absolute;top:197px; right:175px;} 
.scene-graphs-bottom .jies{ position: absolute;
                         width:100%;
						 height:100%;
						 background:rgba(0,0,0,0.5);
						 filter:alpha(opacity=50);
						 top:0;
						 left:0;
						 transform: translate3d(0px, 0px, 0px);display:none;
						
						}

.scene-graphs-bottom .jies h1 { font-size:30px; color:#ccc; position:absolute;top:84px; right:260px;}
.scene-graphs-bottom .jies .line{ width:50px; height:1px;background:#36dffe;position:absolute;top:149px; right:299px;}
.scene-graphs-bottom .jies .xq{ font-size:18px;
                               color:#999;position:absolute;top:197px; right:135px;} 



	.phone-show-section .scene-graphs-bottom {
		background-image: url(../images/4-5.png);
		background-repeat: no-repeat;
		background-position: center center;
		width: 100%;
		padding-bottom: 40.10417%;
		background-size: cover;
		}



	.phone-show-section .columns-2:nth-child(1) {
		float: right;
		/*height: 600px;*/
	}
.sbjs{ width:100%;
        height:860px;
		background:#fff;
		padding-top:83px;
		box-sizing:border-box;
		}
.sbjs h1{ font-size:45px;
           color:#000;
		   width:100%;
		   text-align:center;
		   margin-bottom:20px;}
.sbjs p{ width:850px;
         text-align:center;
		 font-size:20px;
		 color:#000;
		 margin:0 auto;
		 line-height:35px;}
.slideBox{ width:1050px; height:545px; overflow:hidden; position:relative; margin:auto; margin-top:40px;}
.slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
.slideBox .hd ul{ overflow:hidden; zoom:1; float:left;  }
.slideBox .hd ul li{ float:left; margin-right:2px;  width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
.slideBox .hd ul li.on{ background:#f00; color:#fff; }
.slideBox .bd{ position:relative; height:100%; z-index:0;   width:900px;margin:0 auto; }
.slideBox .bd li{ zoom:1; vertical-align:middle; text-align:center;}
/* .slideBox .bd img{display:block;  display: table-cell; 
		vertical-align: middle;} */

.slideBox .prev, .slideBox .next{ position:absolute; display:block; width:51px; height:102px; }
.slideBox .prev{ background:url(../images/left.png)  no-repeat;left:0;
top:220px;}
.slideBox .next{ background:url(../images/right.png)  no-repeat;right:0;
top:220px;}
.sx{ max-width:1920px;
      height:848px;
	   background:url(../images/6.png) no-repeat center;
	  padding-top:103px;
	  box-sizing:border-box;
	  }
.sx h1{ font-size:45px;
           color:#fff;
		   width:100%;
		   text-align:center;
		   margin-bottom:20px;}
.sx p{ width:100%;
         text-align:center;
		 font-size:20px;
		 color:#fff;
		 margin:0 auto;
		 line-height:35px;}

.box p a:hover{  text-decoration:underline;}










@charset "utf-8";
/* CSS Document */
body{ background:#fff;}
.banner{ max-width:1920px;
         height:467px;
		 background:url(../images/ty-0.jpg) no-repeat center;
		 padding-top:156px;
		 box-sizing:border-box;
          }
.banner h1{ width:100%;
            text-align:center;
			font-size:45px;
			color:#fff;}
.banner p{ width:100%;
            text-align:center;
			font-size:20px;
			color:#fff;
			line-height:75px;}
#container{ width:1220px; margin: 0 auto;}
#container li{ position:relative;width: 400px;height: 260px; text-align: center; margin:10px 10px 10px 0; float: left; overflow: hidden;}
#container li p{ height:100%; width: 100%; 
       position: absolute; 
	   left: 0; top: -100%; 
	   color: #ffffff;
        z-index: 2; 
		margin-top: 0;
		display: table;
		_position: relative;}
#container li .img{ width: 400px; height: 260px; display: block;
        -moz-transition:.5s ease-in;
        -webkit-transition:.5s ease-in;
        -o-transition:.5s ease-in;
        -ms-transition:.5s ease-in;
        transition:.5s ease-in;}
#container li:hover .img{ transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1)}
#container li p i{ width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0;z-index: -1;background: #000000; opacity: 0.8; -moz-opacity:0.8; filter:alpha(opacity=80);  }
#container li p span{ display: block; line-height: 24px; font-size: 14px; padding:20px; color:#999; box-sizing:border-box;text-align:center;display: table-cell; 
		vertical-align: middle;_position:absolute;
		_top:50%;
		_left:50%;
}
.explain{ display: block; margin:0 auto;}
.jx1{ width:100%;
	text-align:center;
	font-size:16px;
	color:#36dffe;
	line-height:100px;
	display:block;}