﻿


.jpanimate720{width:auto;left:5%;bottom:5%;font-size:18px;position:absolute;z-index:100000;}
.jpanimate1080{width:auto;right:5%;bottom:5%;font-size:18px;margin-left:50%;position:absolute;z-index:100000;}


.subtitle{font-size:22px;padding-bottom:10px;}
.change-block {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    margin-top: -170px;
    margin-left: -470px;
    -webkit-user-select: none;
    width: 940px;
    height: 528px;
}

.change-block .newpage {
    background-image: url(https://d3pk9z7j5el572.cloudfront.net/h21/images/1080p/1080p2.jpg);
    z-index: 4;
    width: 470px;
}

.change-block .newpage .nav-btn {
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    width: 66px;
    height: 66px;
    top: 50%;
    right: -33px;
    margin-top: -33px;
    cursor: pointer;
}
.change-block .newpage .nav-btn {
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    width: 66px;
    height: 66px;
    top: 50%;
    right: -33px;
    margin-top: -33px;
    cursor: pointer;
}


.change-block .newpage, .change-block .oldpage {
    width: 940px;
    height: 528px;
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
}


.rightang {
    position: absolute;
    width: 14px;
    height: 20px;
    top: 24px;
    background-repeat: no-repeat;
    background-image: url(https://d3pk9z7j5el572.cloudfront.net/h21/images/f-2.png);
}

.change-block .oldpage {
    background-image: url(https://d3pk9z7j5el572.cloudfront.net/h21/images/1080p/1080p.png);
    z-index: 2;
}
.change-block .newpage, .aminate .change-block .oldpage {
    width: 940px;
    height: 528px;
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
}
.change-block .newpage, .change-block .oldpage {
    width: 940px;
    height: 528px;
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
}


.change-block .newpage .nav-btn .leftang,.aminate .change-block .newpage .nav-btn .rightang
{
	position: absolute;
	width: 14px;
	height: 20px;
	top: 24px;
	background-repeat: no-repeat;
	background-image: url(https://d3pk9z7j5el572.cloudfront.net/h21/images/f-2.png)
}

.change-block .newpage .nav-btn .leftang
{
	left: 13px
}
.change-block .newpage .nav-btn .rightang
{
	right: 13px;
	background-position: -14px 0
}

.change-block .newpage .nav-btn .leftang,.aminate .change-block .newpage .nav-btn .rightang
{
	position: absolute;
	width: 14px;
	height: 20px;
	top: 24px;
	background-repeat: no-repeat;
	background-image: url(https://d3pk9z7j5el572.cloudfront.net/h21/images/f-2.png)
}

 .change-block .newpage .nav-btn .leftang
{
	left: 13px
}


.change-block .newpage .nav-btn .rightang
{
	right: 13px;
	background-position: -14px 0
}







.section
{
	-webkit-font-smoothing: antialiased;
	color: #000;
	display: block
}









#ssss9 video {
    margin-top: 3%;
    margin-left: -9%;
    width: 110%;
    height: auto;
}





.title_2{color:#fff}
.text_2{color:#fff}

.title_3{color:#fff}
.text_3{color:#fff}





.homecamera-top-content_2{
	width: 100%;
    float: left;
    margin-bottom: 10%;
    height: auto;
    margin-top: 8%;
	
}
.accessories_content_2{
	
	width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
	
}

.homecamera-top-content2_2 img{width:120%;margin-left:-10%;margin-top:4%;float:left;}


.homecamera-top-content2_2_2{
	    width: 100%;
		float: left;background:#ECECEC;
		z-index: 100;height:900px;
		position:relative;
		text-align:left;
}
.homecamera-top-content2_2_2_2{
	    width: 100%;
		float: left;background:#2F2E34;
		z-index: 100;height:900px;
		position:relative;
		text-align:left;
}





.homecamera-top-content2_2_2_3{
	    width: 100%;
		float: left;background:#fff;
		z-index: 100;height:auto;
		position:relative;
		text-align:left;
}

.homecamera-top-content2_2_2_4{
	    width: 100%;
		float: left;background:#fff;
		z-index: 100;height:auto;
		position:relative;
		text-align:left;
}



.homecamera-top-content2_2_2_5{
	    width: 100%;
		float: left;background:#2F2E34;
		z-index: 100;height:auto;
		position:relative;
		text-align:left;
}


.homecamera-top-content2_2_2_6{
	    width: 100%;
		float: left;background:#ECECEC;
		z-index: 100;height:950px;
		position:relative;
		text-align:left;
}



.homecamera-top-content2_2{
	    width: 100%;
		float: left;
		z-index: 100;
		position:relative;
		text-align:center;
}
.content{width:80%;margin-left:10%; margin-top:5%;float:left;text-align:center}


.videog{
	float:left;
    height: 600px;
    width: 1244px;
	margin-top:0px;
	margin-left:0px;
}

.menu-down-home2-h2-2{
	float:left;width:100%;
	margin-top:15%;
	margin-left:-5%;
}

.menu-down-home2-h2
{
position:absolute;
float:left;width:100%;
opacity:0;

animation:menu-home2-h2 2s;/* animation-iteration-count:3;  次数 */
-moz-animation:menu-home2-h2 2s; /* Firefox */  
-webkit-animation:menu-home2-h2 2s; /* Safari and Chrome *//*-webkit-animation-iteration-count:3;  Safari 和 Chrome   次数*/
-o-animation:menu-home2-h2 2s; /* Opera */
animation-fill-mode:forwards; /*完成后保持*/
-webkit-animation-fill-mode:forwards;
animation-delay:2s;
}



.section-intro-table table{width:100%;}

.section-intro-table .mobile-content-title-2{
	
	font-size: 24px;
    margin-top: 3%;
    line-height: 30px;
	margin-bottom:5%;
    text-align: center;
	
	
}
.mobile-content-title-2span{ color: #1b97d7;}
.mobile-content-title-2img{margin-bottom:5%;float:left;}





.section-wide-angle .stage
{
	position: absolute;
	width: 735px;
	height: 460px;
	left: 50%;
	top: 20%;
	margin-left: -368px;
	margin-top: -60px;
	-webkit-perspective: 200px;
	perspective: 200px
}

.section-wide-angle .stage:after,.section-wide-angle .stage:before
{
	position: absolute;
	top: -20px;
	z-index: 3;
	width: 191px;
	height: 500px;
	content: ''
}

.section-wide-angle .stage:before
{
	left: -191px;
	border-right: 1px dashed #dfdfdf
}

.section-wide-angle .stage:after
{
	right: -190px;
	border-left: 1px dashed #dfdfdf
}
.section-wide-angle .stage
	{
		margin-top: -75px
	}
.section-phone .stage
	{
		width: 1000px;
		margin-left: -500px;
		margin-top: -240px
	}
	.section-wide-angle .stage
	{
		margin-top: -105px
	}
	
	
.section-wide-angle .wide-c {
    position: relative;
    z-index: 2;
}


.wide-l,.wide-r
{
	opacity: 0;
	position: absolute;
	top: 0;
	z-index: 1;
	display: block;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s ease-out;
	transition: all .7s ease-out
}

.wide-l
{
	left: -191px;
	transform: rotateY(-90deg);
	transform-origin: 100% 0
}

.wide-r
{
	right: -191px;
	transform: rotateY(90deg);
	transform-origin: 0 0
}

.aminate .wide-l,.aminate .wide-r
{
	opacity: 1;
	transform: rotateY(0)
}



.section-cpu {
    display: block;
    background: url(https://d3pk9z7j5el572.cloudfront.net/h21/images/anback/anback_1920.jpg) 50% 50% no-repeat;
}


.section-cpu .stage {
    width: 780px;
    height: 435px;
    position: absolute;
    top: 0%;
    left: 50%;
    margin-top: -10px;
    margin-left: -390px;
}

.section-cpu .centerImg {
    margin: 0 auto;
    height: 435px;
    width: 407px;
}





.section-cpu
{
	background-color: #000
}

.section-cpu .centerImg
{
	margin: 0 auto;
	height: 435px;
	width: 407px
}

.section-cpu .stage
{
	width: 780px;
	height: 435px;
	position: absolute;
	top: 55%;
	left: 50%;
	margin-top: -10px;
	margin-left: -390px
}

.section-cpu .stage .text
{
	margin: 18px 0 0;
	line-height: 1
}

.section-cpu .leftBottom,.section-cpu .leftTop,.section-cpu .rightBottom,.section-cpu .rightTop
{
	position: absolute;
	width: 100px;
	height: 90px
}

.section-cpu .leftBottom .title,.section-cpu .leftTop .title,.section-cpu .rightBottom .title,.section-cpu .rightTop .title
{
	font-size: 44px
}

.section-cpu .leftTop
{
	left: 0;
	top: 0
}

.section-cpu .rightTop
{
	right: 0;
	top: 0
}

.section-cpu .leftBottom
{
	left: 0;
	bottom: 0
}

.section-cpu .rightBottom
{
	right: 0;
	bottom: 0
}

.section-cpu .container
{
	width: 780px;
	padding: 0;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -385px;
	margin-left: -390px
}

.section-cpu .title
{
	color: #fff
}

.section-cpu .text
{
	margin-top: 20px;
	color: #fff
}

.section-cpu .feture
{
	line-height: 1em;
	margin: 0
}
.section-compare{z-index:100;background:#fff;}

.section-compare .fp-tableCell
{
	vertical-align: top
}

.section-compare .content
{
	width: 1170px;
	position: absolute;
	height: 728px;
	left: 50%;
	top: 50%;
	margin-top: -364px;
	margin-left: -585px
}
@media (max-width:1366px){
	.section-compare .content
	{
		width: 1170px;
		position: absolute;
		height: 728px;
		left: 50%;
		top: 50%;
		margin-top: -304px;
		margin-left: -585px
	}
		
}
.section-compare .lineclass
{
	height: 1px;
	border: none;
	border-top: 1px solid #6D6968;
	width: 93.5%;
	float: left;
	opacity: .4;
	margin-top: 0;
	margin-bottom: 0
}

.section-compare .title
{
	text-align: center
}

.section-compare .table
{
	width: 100%;
	margin-right: auto;
	margin-left: auto
}

.section-compare .table table
{
	width: 100%;
	text-align: left;
	color: #6D6968;
	line-height: 25px;
	font-size: 14px
}
@media (max-width:1366px){
	.section-compare .table table
	{
		width: 100%;
		text-align: left;
		color: #6D6968;
		line-height: 22px;
		font-size: 14px
	}
}

.lastImg
{
	width: 100%
}

.homecamera-top-foot
{
	position: absolute;
	margin-top: 0%;
	/*margin-left: 17%*/
}
.homecamera-top-foot-2{
	margin-top: -50%;
	
}

.wide-l,.wide-r
{
	opacity: 0;
	position: absolute;
	top: 0;
	z-index: 1;
	display: block;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s ease-out;
	transition: all .7s ease-out
}

.wide-l
{
	left: -191px;
	transform: rotateY(-90deg);
	transform-origin: 100% 0
}

.wide-r
{
	right: -191px;
	transform: rotateY(90deg);
	transform-origin: 0 0
}

.aminate .wide-l,.aminate .wide-r
{
	opacity: 1;
	transform: rotateY(0)
}

.aminate .leftBottom,.aminate .leftTop,.aminate .rightBottom,.aminate .rightTop
{
	opacity: 1;
	transform: scale(1,1)
}

.leftBottom,.leftTop,.rightBottom,.rightTop
{
	opacity: 0;
	transform: scale(.5,.5);
	transition: all 1s
}

.slideInUp
{
	opacity: 0;
	transition: all 2s
}

.aminate .anima
{
	margin-top: -350px;
	opacity: 1
}
@media (max-width:1366px){
	.aminate .anima
	{
		margin-top: -330px;
		opacity: 1
	}
	
	
}





.section-phone .title {
    font-size: 32px;
    -webkit-margin-before: .83em;
    -webkit-margin-after: .83em;
    color: #000;
}
.section-phone .stage {
    position: absolute;
    width: 1112px;
    left: 50%;
    top: 50%;
    margin-left: -556px;
    margin-top: -252px;
}

.section-phone .phone_video {
    z-index: 50;
    position: relative;
}

.section-phone .phone_video .phoneContent {
    width: 824px;
    position: relative;
    margin: 0 auto;
}

 .phoneBack{width: 824px;height: 404px;float:left;}
 .phoneBack-day{
    background: url(https://d3pk9z7j5el572.cloudfront.net/h21/images/day_phone.png) no-repeat;
}
 .phoneBack-night{
    background: url(https://d3pk9z7j5el572.cloudfront.net/h21/images/night_phone.png) no-repeat;
}

.phone-night {
    width: 396px;background:#ff0000;
}

.section-phone .phone-img {
    width: 792px;
    margin: 12px auto 0;
    position: relative;
}

.phone_click{cursor:pointer;}

.section-phone .phone-img a {
    float: left;margin-top:8%;
    width: 192px;
    height: 108px;
    margin-right: 6px;
    position: relative;
}

.section-phone .phone-img a img {
    width: 100%;
    height: 100%;
}
.section-phone .phone-img a span {
    width: 192px;
    position: absolute;
    display: none;
    height: 56px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

.section-phone .phoneBack #phoneVideo {
    position: absolute;
    left: 99px;
    top: 26px;
    width: 620px;
    height: 353px;
}

.section-phone .phone-img {
    width: 792px;
    margin: 12px auto 0;
    position: relative;
}



.phone_video .leftBtn {
    left: 20px;
}

.leftBtn{width:100%;float:left;left:5%;text-decoration:none;z-index:10000;}
.rightBtn {width:100%;float:right;right:5%;text-decoration:none;z-index:10000;}
 .leftBtn,  .rightBtn {
    display: block;
    width: 60px;
    text-align: center;
    color: #000;
    position: absolute;
    top: 182px;
   
}
.leftBtn, .phone-day, .phone-night, .phoneBack, .rightBtn {
    transition: all .3s;
}

 .leftBtn:hover,  .rightBtn:hover {
	text-decoration:none;
	color: #000;

 }









@media (max-width:2560px)
{
	.section-cpu.aminate
	{
		display: block;
		background: url(https://d3pk9z7j5el572.cloudfront.net/h21/images/anback/anback_2560.jpg) 50% 50% no-repeat
	}
}

@media (max-width:1920px)
{
	.section-cpu.aminate
	{
		display: block;
		background: url(https://d3pk9z7j5el572.cloudfront.net/h21/images/anback/anback_1920.jpg) 50% 50% no-repeat
	}
}

@media (max-width:1366px)
{
	.section-cpu.aminate
	{
		display: block;
		background: url(https://d3pk9z7j5el572.cloudfront.net/h21/images/anback/anback_1366.jpg) 50% 50% no-repeat
	}
}

@media (max-width:1024px)
{
	.hello
	{
		margin-left: -92px
	}

	.triangle-topleft
	{
		left: 258px
	}

	.triangle-bottomright
	{
		left: 372px
	}
}
@media (max-width:1366px){/*video*/
	.section-start video
	{
		margin-top: -200px;
		margin-left: -498px;
		height: 360px;
		width: 996px
	}
}

@media (min-height:770px)
{
	.aminate .anima
	{
		margin-top: -396px
	}
	/*video*/
	.section-start video
	{
		margin-top: -240px;
		margin-left: -498px;
		height: 560px;
		width: 996px
	}
	
	
	#section9 dl
	{
		margin-top: -400px
	}

	#section9 video
	{
		height: 600px;
		width: 1067px;
		margin-left: -594px;
		margin-top: -130px
	}
}




.grayText {
    background: rgba(98,102,113,.8);
    padding-left: 30px;padding-top:30px;
    padding-right: 30px;padding-bottom:30px;line-height:25px;
    color: #fff;
}
.hello{width:20%;margin-left:60%;margin-top:-8%;float:left;}
.hello2{width:20%;margin-left:20%;margin-top:-8%;float:left;}
@media (max-width:1366px)
{	.hello{width:40%;margin-left:50%;margin-top:-8%;float:left;}
	.hello2{width:40%;margin-left:10%;margin-top:-8%;float:left;}	
	
	.triangle-topleft {
		width: 0;margin-left:50%;
		height: 0;
		border-right: 25px solid transparent;
	}

	.triangle-topleft2{
		width: 0;margin-left:10%;
		height: 0;
		border-right: 25px solid transparent;
	}

	
	
}





.triangle-topleft {
    width: 0;margin-left:60%;
    height: 0;
    border-right: 25px solid transparent;
}

.triangle-topleft2{
    width: 0;margin-left:20%;
    height: 0;
    border-right: 25px solid transparent;
}

.triangle-topleft, .triangle-topright , .triangle-topleft2 {
    border-top: 25px solid rgba(98,102,113,.8);
}

.carousel_slide{
	width:100%;margin-top:30%;height:auto;position:absolute;margin-top:50%;
}

.carousel_slide2{background:rgba(85,86,90,.8);}
.carousel_slide2-1{background:rgba(85,86,90,.1);}

.carousel_slide2_1{border-radius: 10px 0px 0px 10px;}
.carousel_slide2_3{border-radius: 0px 10px 10px 0px;}



@keyframes menu-home2-h2
{
	0%    {opacity:0;margin-top:3%;}
	
	100%  {opacity:1;margin-top:0%;}
}

@-moz-keyframes menu-home2-h2 /* Firefox */
{
	0%    {opacity:0;margin-top:3%;}
	
	100%  {opacity:1;margin-top:0%;}
}

@-webkit-keyframes menu-home2-h2 /* Safari and Chrome */
{
	0%    {opacity:0;margin-top:3%;}

	100%  {opacity:1;margin-top:0%;}
}

@-o-keyframes menu-home2-h2 /* Opera */
{
	0%    {opacity:0;margin-top:3%;}
	
	100%  {opacity:1;margin-top:0%;}
}