.clear { *zoom :1;}
.clear:after{ content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden;}
.adapt_screen{position: relative; width: 100%; max-width: 1920px; margin: 0 auto;}
.isshow{display: block !important; z-index: 2;}
h2{font-weight: 700; font-size: 30px;}
p{font-size: 16px;}
img{display: block;}
.adapt_screen img,.adapt_screen video{display: block;}
.opac{filter:alpha(opacity=80) !important; -moz-opacity:0.8 !important; -khtml-opacity: 0.8 !important; opacity: 0.8 !important;}
.section{height: 100%; position: relative;}
		 



/* 阴影 */
.body-shade{cursor: pointer; display: none; top: 0; position: fixed; height: 100%; width: 100%; background: rgba(0,0,0,0.7); z-index: 10000;}
.publicity-video,.lan-video{position: fixed;display: none; left: 50%; top: 50%; margin-left: -480px; height: 540px; width:960px; margin-top: -299px; z-index: 20000;}
.publicity-video video,.lan-video video{width: 100%;}

/* 变 */
.change{width: 100%;}
.change video{width: 100%;}
.change .change-shade{position: absolute; background: rgba(0,0,0,0.4); height: 100%; width: 100%; top: 0;}
.change .change-des{position: absolute; top: 30%; width: 360px; left: 50%; margin-left: -180px; color: #fff; z-index: 10;}
.change .change-des img{width: 66.8%; margin: 0 auto;}
.change .change-des h2{line-height: 62px;}
.change .change-des p{font-size: 20px; margin-bottom: 5%; text-align: center;}
.change .change-des a{line-height: 28px; font-size: 14px; color: #fff; width: 70%; margin: 0 auto; display: block;}
.change .change-des a span{border-bottom: 1px solid #fff;}
.change .change-des a img{margin-right: 10px; margin-top: 2px; width:24px; float: left;}
.change .change-des a:hover span{border-bottom: 1px solid #6cf; color: #6cf;}

/* 劲 */
.strength-des{position: absolute; left: 18.7%; top: 8%; color:#fff; width: 650px; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.strength-des h2{line-height: 60px; font-weight: 300; font-size: 26px; }
.strength-des h2 span{font-size: 58px;}
.strength-des p{line-height: 30px;}

.strength-line{position: absolute; left: 18.7%; bottom: 17%; color: #fff;}
.strength-line p{margin-bottom: 10px;}
.strength-line .line1{width: 683px; margin-bottom: 20px; position: relative;} 
.strength-line .line1 img{width: 0%; height: 13px;}
.strength-line .line1 h2{font-size: 32px; top: -40px; right: -380px; position: absolute; color: #37ecfb;}
.strength-line .line1 h2 span{font-size: 100px;}
.strength-line .line2{width: 542px; position: relative;}
.strength-line .line2 img{width: 0%; height: 13px;}
.strength-line .line2 p{font-size: 26px; top: -10px; right: -100px; position: absolute;}

.strength-run{animation: des 2s forwards;}
.line-run{animation: imgwidth 2s forwards;}

/* 轻 */
.light-des{position: absolute; left: 18%; top: 20%; color: #000; width: 520px; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.light-des h2{line-height: 60px; font-weight: 300; font-size: 26px;}
.light-des h2 span{font-size: 58px;}
.light-des p{line-height: 30px;}
.light-run{animation: des 2s forwards;}

.light-suspension{position: absolute;left: 56.6%;top: 12.44%;animation: mymove 4s infinite;}
@keyframes mymove
{
0% {top:12.44%;}
50% {top:16%;}
100%{top:12.44%;}
}

/* control */
.cd-fixed-background {height: 900px; padding: 0; color: #000; position: relative;}
.cd-fixed-background h2 {line-height: 60px; font-weight: 300; font-size: 26px; text-align: center;}
.cd-fixed-background h2 span{font-size: 58px;}
.cd-fixed-background p {line-height: 30px; font-size: 16px; color: #969696; text-align: center;}
.cd-fixed-background .cd-content {
    width: 490px;
    position: absolute;
    left: 50%;
    top: 40%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.cd-fixed-background .cd-content::after {display: none !important;}
.cd-fixed-background.img-1 {background-image: url("../jpg/control-1.jpg");}
.cd-fixed-background.img-2 {background-image: url("../jpg/control-2.jpg");}
.cd-fixed-background.img-3 {background-image: url("../jpg/control-3.jpg");}
.cd-fixed-background.img-4 {background-image: url("../jpg/control-4.jpg");}
.cd-fixed-background {
  position: relative;
  padding: 3em 5% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.cd-fixed-background .cd-content::after {
  content: '';
  display: block;
  width: 100%;
  padding: 60% 0;
  margin: 2em auto 0;
}

.cd-content .cont2-header{margin:0 auto;}
.cd-content .cont-list{width: 100%; margin-top: 20px;}
.cd-content .cont-list li{float: left; width: 122px; text-align: center;}
.cd-content .cont-list li img{margin: 0 auto 10px;}
.cd-content .cont-list li p{line-height: 24px; font-size: 14px;}
.section .cd-fixed-background:nth-of-type(3) h2{text-align: center;line-height: 40px; margin-bottom: 10px;}
.section .cd-fixed-background:nth-of-type(4) .cd-content{width: 500px;}

.cd-content .cont3-list{width: 450px; margin:20px auto 0;}
.cd-content .cont3-list li{float: left; text-align: center; width: 150px;}
.cd-content .cont3-list li img{margin: 0 auto 10px;}
.cd-content .cont3-list li p{line-height: 24px; font-size: 14px;}

.cd-content .cont4-list{width: 500px; margin:20px auto 0;}
.cd-content .cont4-list li{float: left; text-align: center; width: 100px;}
.cd-content .cont4-list li img{margin: 0 auto 10px;}
.cd-content .cont4-list li p{line-height: 24px; font-size: 14px;}

@media only screen and (min-width: 1048px) {
  .cd-fixed-background {
    background-attachment: fixed;
  }
}

/* 快 */
.quick video{width: 100%;}
.quick-des{position: absolute; left: 12.7%; top: 6.7%; color: #fff; width: 640px; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.quick-des h2{line-height: 60px; font-weight: 300; font-size: 26px;}
.quick-des h2 span{font-size: 58px;}
.quick-des p{line-height: 30px; margin-top: 10px;}
.quick-run{animation: des 2s forwards;}

.quick-list{width: 640px; margin-top: 40px;}
.quick-list li{width: 180px; text-align: center; float: left;}
.quick-list li img{margin: 0 auto;}

@media screen and (min-width: 1200px) and (max-width:1599px) {
	.strength-line{bottom: 10%;}
	.strength-line .line1{width: 512px;}
	.strength-line .line2{width: 406px;}
	.strength-line .line1 h2{right: -230px;}
	.cd-fixed-background{height: 700px;}
	.quick-des{top: 8%; left: 8%;}
	.quick-des h2{line-height: 50px;}
	.quick-list{margin-top: 20px;}


}

/* 便 */
.conven{background: #fbf8f8; padding: 140px 0;}
.convenient{width: 75%; margin:0 auto;}
.convenient .conv-video{float: left; width: 48.6%; margin-right: 11.4%;}
.convenient .conv-video video{width: 100%;}
.convenient .conv-des{float: left; width: 40%; color: #000; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.conv-run{animation: des 2s forwards;}
.convenient .conv-des h2{line-height: 30px; font-weight: 300; font-size: 26px; margin-bottom: 10px;}
.convenient .conv-des h2 span{font-size: 58px; margin-bottom: 30px; display: block;}
.convenient .conv-des p{line-height: 30px; margin-top: 10px; color: #969696;}

.conv-list{width: 100%;}
.conv-list li{float: left; width: 33%; text-align: center;}
.conv-list li img{margin: 0 auto;}

@media screen and (min-width: 1200px) and (max-width:1599px) {
	.convenient .conv-des h2{line-height: 30px; font-weight: 300; font-size: 20px; margin-bottom: 5px;}
	.convenient .conv-des h2 span{font-size: 38px; display: block; margin-bottom: 5px;}
	.convenient .conv-des p{line-height: 24px; font-size: 14px; margin-top: 5px;}
	.convenient .conv-video{margin-top: 20px;}
}

/* 稳 */
.stable-des{position: absolute; left: 18%; top: 12%; color: #fff; width: 600px;}
.stable-des h2{line-height: 30px; font-weight: 300; font-size: 26px; margin-bottom: 10px;}
.stable-des h2 span{font-size: 58px; margin-bottom: 30px; display: block;}
.stable-des p{line-height: 30px; margin-top: 10px;}

.stable-camera{margin-top: 40px;}
.camera-list{width: 480px; margin-top: 40px;}
.camera-list li{float: left; width: 25%; text-align: center; cursor: pointer;}
.camera-list li img{margin:0 auto;}
.camera-list li img:nth-of-type(1){opacity: 0.2;}
.camera-list li .sanjiao{display: none;}
.camera-list li p{display: none;}

.parameter-camer{width: 480px; border-top: 1px solid #b50b1a;}
.parameter-camer .para-list{width: 100%; display: none;}
.parameter-camer .para-list li{float: left; width: 33%; text-indent: 24px;}
.parameter-camer .para-list li p{font-size: 14px;}

@media screen and (min-width: 1200px) and (max-width:1599px) {
	.stable-des{position: absolute; left: 12%; top: 6%; color: #fff; width: 600px;}
}

/* extent */
.exten-des{position: absolute; width: 900px; text-align: center; color: #fff; top: 6%; left: 50%; margin-left: -450px; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.exten-run{animation: des 2s forwards;}
.exten-des h2{line-height: 50px; font-weight: 300; font-size: 26px; margin-bottom: 10px;}
.exten-des h2 span{font-size: 58px;}
.exten-des p{line-height: 30px; margin-top: 10px;}

.exten-list{position: absolute; bottom: 20%; width: 100%;}
.extenion .box{width: 56.25%; margin:0 auto; position: relative;}
#roll{max-width: 1080px; max-height: 485px; margin: 0 auto; width: 100%;}
#roll li{width:25.6%; float: left; margin:0 2.1%; cursor: pointer; position: relative;}
#roll li img{margin: 0 auto; width: 100%;}
.box span{position: absolute;top: 40%; left:-50px; display: inline-block;width: 50px;text-align: center;cursor: pointer; z-index: 1000;}

.box .next{right:50px; left:auto; background: url(../png/video-right2.png) no-repeat; height: 32px; width: 20px;}
.box .prev{background: url(../png/video-left2.png) no-repeat; height: 32px; width: 20px; left: -50px;}

.ex-list{position: absolute; bottom: 18%; width: 46.8%; left: 26.2%;}
.ex-list li{float: left; width: 33%; text-align: center; }
.ex-list li img{width: 80%; margin: 0 auto 20px;}
.ex-list li p{line-height: 30px;}


@media screen and (min-width: 1200px) and (max-width:1439px) {
	#roll{max-height: 325px; max-width: 680px;}
	.exten-list{ bottom: 16%;}
}

@media screen and (min-width: 1440px) and (max-width:1599px) {
	#roll{max-height: 395px; max-width: 780px;}
}

@media screen and (min-width: 1600px) and (max-width:1919px) {
	#roll{max-height: 455px; max-width: 860px;}
}

/* 精 */
.exquisite{padding: 80px 0 150px;}
.exquisite-des{margin:0 auto 20px; width: 960px; color: #000; text-align: center; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.exquisite-des h2{line-height: 50px; font-weight: 300; font-size: 26px; margin-bottom: 10px;}
.exquisite-des h2 span{font-size: 58px;}
.exquisite-des p{line-height: 30px; margin-top: 10px;}
.exquisite-run{animation: des 2s forwards;}

.exq-list{margin: 0 auto; width: 1000px;}
.exq-list li{width: 487px; float: left; margin-bottom: 26px; cursor: pointer; position: relative;}
.exq-list li img{width: 487px;}
.exq-list li:nth-of-type(2n+1){margin-right: 26px;}
.exq-list li .exq-opa{position: absolute; top: 0; left: 0; width: 570px; height: 500px; z-index: 10; max-width: 570px; display: none;}
.exq-list li:nth-of-type(2n+1) .exq-opa{left: -82px;}


/* 变 */
.changes{width: 100%;}
.changes .changes-des{position: absolute; top: 12.5%; left: 60.4%; color: #fff; width: 480px; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.changes .changes-des h2{line-height: 30px; font-weight: 300; font-size: 26px; margin-bottom: 10px;}
.changes .changes-des h2 span{font-size: 58px; margin-bottom: 30px; display: inline-block;}
.changes .changes-des p{line-height: 30px;}
.changes .changes-des em{font-size: 14px; font-style: normal;}
.changes .changes-run{animation: des 2s forwards;}

.changes .changes-video{position: absolute; top: 57.5%; left: 60.4%; width: 19.3%; cursor: pointer;}
.changes .changes-video:hover{opacity: 0.8;}
.changes .change-play{position: absolute; width: 40px; height: 40px; left: 50%; margin-left: -20px; top: 50%; margin-top: -20px;}

/* 智 */
.wisdom-des{position: absolute; left: 57%; top: 16%; color:#fff; width: 460px; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.wisdom-run{animation: des 2s forwards;}
.wisdom-des h2{line-height: 30px; font-weight: 300; font-size: 26px;}
.wisdom-des h2 span{font-size: 58px; margin-bottom: 30px; display: inline-block;}
.wisdom-des p{line-height: 30px;}

/* 酷 */
.cool-des{position: absolute; left: 63.5%; top: 55.5%; color:#fff; width:460px; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.cool-run{animation: des 2s forwards;}
.cool-des h2{line-height: 30px; font-weight: 300; font-size: 26px; margin-bottom: 20px;}
.cool-des h2 span{font-size: 58px; display: inline-block; margin: 30px 0;}
.cool-des p{line-height: 30px;}

@media screen and (min-width: 1200px) and (max-width:1439px) {
	.cool-des{top: 45%;}
	.changes .changes-video{top: 67.5%;}
}

/* 炫 */
.video-bg video{object-fit:fill; height: 100%; width: 100%;}
.display-box {
  position: relative;
  width: 100%;
  background-color: rgba(123, 124, 125, .6);
  height: 800px;overflow:hidden;
}
@media screen and (min-width: 1200px) and (max-width:1599px) {
    .display-box {height: 600px}
}

.fy-list,
.v-func-list {
  display: block;
  position: absolute;
  top: 0;
  left: 0
}

.fy-list {
  width: 100%;
  height: 100%;
  z-index: 9
}

.fy-list:after,
.v-func-list:after {
  content: '';
  display: block;
  height: 0;
  clear: both
}

.fy-list .fy-item {
  height: 100%;
  width: 25%;
  float: left;
  position: relative;
  transition: all .5s ease-in-out;
  cursor: pointer;
}

.fy-list .fy-item .fy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: all .5s ease-in-out;
  z-index: 2
}

.fy-list .fy-item .s-bg {
  opacity: 1;
  transition: all .5s ease-in-out;
  z-index: 1
}

.fy-list .fy-item .text,
.fy-list .fy-item .top-text {
  width: 100%;
  transition: all .3s ease-in-out;
  position: absolute;
  z-index: 3
}

.fy-list .fy-item .top-text {
  bottom: 8%;
  text-transform: uppercase;
  left: 15%;
  opacity: 0
}

.fy-list .fy-item .top-text .describe {
  font-size: 24px;
  color: #fff;
}

.fy-list .fy-item .text {
  bottom: 5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 1
}

.fy-list .fy-item .text p{font-size: 24px;font-weight: 700; color: #fff; width: 80%; margin:0 auto;}

.fy-list .fy-item .text .number {
  font-size: 30px;
  color: #fff;
  margin-bottom: 18px
}

.fy-list .fy-item .text .describe {
  font-size: 24px!important;
  color: #fff;
  font-weight: 300;
  padding: 0 15%
}

.fy-list .fy-item .text .icon {
  margin-bottom: 20px
}

.fy-list .fy-item .bottom-text,
.fy-list .fy-item .video-tip {
  text-align: left;
  color: #fff;
  position: absolute;
  width: 100%;
  padding: 0 15%;
  display: none;
  z-index: 3
}

.fy-list .fy-item .bottom-text h2{line-height:40px;}

.fy-list .fy-item .bottom-text {
  bottom: 5%;
  line-height: 28px;
  font-size: 16px
}

.fy-list .fy-item .bottom-text .describe {
  font-size: 24px;
  margin-bottom: 20px;
  color: #fff;
  text-align: left;
  text-transform: uppercase;
}

.fy-list .fy-item .video-tip {
  font-size: 14px;
  top: 5%;
  opacity: .5;
}

.fy-list:hover .fy-item {
  box-sizing:border-box;
  border-right: 1px solid rgba(112, 116, 115, .7)
}


.fy-list:hover .fy-item .s-bg {
  opacity: 0
}

.fy-list:hover .fy-item .fy {
  background: rgba(0, 0, 0, .4)
}

.fy-list:hover .fy-item .top-text {
  opacity: .5
}

.fy-list:hover .fy-item .text {
  opacity: 0
}

.fy-list:hover .fy-item .bottom {
  display: none
}

.fy-list .fy-item.active {
  color: #ddd
}

.fy-list .fy-item.active .top-text {
  opacity: 0
}

.fy-list .fy-item.active .bottom-text {
  display: block;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp
}

.fy-list .fy-item.active .video-tip {
  display: block
}

.v-func-list {
  z-index: 8
}

.v-func-list .v-func-item {
  height: 100%;
  width: 25%;
  float: left;
  position: relative;
  transition: opacity .5s ease-in-out
}

.v-func-list .v-func-item .s-bg {
  background-color: #000;
  height: 100%;
  width: 100%;
  background-position:center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.v-func-list,.v-list {
  width: 100%;
  height: 100%
}

.v-list .v-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0
}

.v-list .v-item .video-bg {
  position: relative;
  height: 100%;
  overflow: hidden
}

.v-list .v-item .video-bg video {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.v-list .v-item .video-bg video[poster] {
  width: 100%
}


@keyframes imgwidth{
	from{
		width: 0%;
	}
	to{
		width: 100%;
	}
}



/*字推移*/
@keyframes des{
	from{
		-webkit-transform: translateY(35px);
		-ms-transform: translateY(35px);
		-o-transform: translateY(35px);
		transform: translateY(35px);
		filter:alpha(opacity=0);  
	    -moz-opacity:0;  
	    -khtml-opacity: 0;
      	opacity: 0;  
	}
	to{
		-webkit-transform: translateY(0px);
		-ms-transform: translateY(0px);
		-o-transform: translateY(0px);
		transform: translateY(0px);
		filter:alpha(opacity=100);  
	    -moz-opacity:1;  
	    -khtml-opacity: 1;
      	opacity: 1; 
	}
}