body,hr, p, blockquote,h1,h2,h3,h4,h5,h6, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
    margin: 0;
    padding: 0;
}

.clear { *zoom :1;}
.clear:after{ content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden;}
.pull-left { float:left;}
.pull-right { float:right;}
.adapt_screen{position: relative; width: 100%; margin: 0 auto;}
.isshow{display: block !important; z-index: 2;}
.isvis{visibility:visible !important;}
h2{font-weight: 300 !important;font-size: 28px;}
section p{font-size: 16px;}
ul li{list-style: none;}
em{display: block;}
span{display:inline-block;}
img{display: block;}
video {display: block; object-fit:cover;}
html,body{overflow-x: hidden;position: relative;}
.mag-color{color: #000 !important;}
.bo-span{height: 4px; width: 100%; bottom: 0; background: #1ea1e5;}
/* 头部 */
.spg-header img{width: 100%;}
.spg2-des{position: absolute; width: 300px; top: 30%; left: 64.4%;}
.spg2-des img{width: 100%;}
.spg2-des h2{font-size: 38px; color: #fff;}
.spg2-des p{font-size: 20px; color: #fff; line-height: 40px; margin-bottom: 12%;}
.spg2-des a{line-height: 28px; font-size: 14px; border-bottom: 1px solid #fff; color: #fff;}
.spg2-des a img{margin-right: 10px; margin-top: 2px; width:24px; float: left;}
.spg2-des a:hover{border-bottom: 1px solid #6cf; color: #6cf;}


/* 蓝牙控制 */
.bluetooth img{width: 100%;}
.bluetooth .bluetooth-des{position: absolute; top: 5.6%; width: 820px; left: 50%; margin-left: -400px; text-align: center;}
.bluetooth .bluetooth-des h2{line-height: 40px; color: #fff;}
.bluetooth .bluetooth-des p{color: #fff; line-height: 30px; margin-top: 10px;}
.bluetooth .bluetooth-des p.remark{font-size:12px;line-height: 24px;}
.bluetooth .b-p{position: absolute; width: 200px; left: 50%; margin-left: -100px; color: #333; bottom: 30px; text-align: center;}

.b-transfer{height: 0px; overflow: hidden;}
.b-transfer p{color: #5a5859; font-size: 18px;}
.b-transfer .p1{position: absolute; top: 50.8%; left: 30.9%;}
.b-transfer .p2{position: absolute; top: 50.8%; left: 58.3%;}
.b-transfer .p3{position: absolute; bottom: 14.2%; left: 38.4%; width: 420px; text-align: center;}


@media screen and (min-width: 1200px) and (max-width:1599px) {
	.b-transfer p{font-size: 14px;}
  .b-transfer .p3{width: 320px;}
}


/* 三轴跟随太空模式 */
.space video{width: 100%;}
.space .space-des{position: absolute; top: 4.1%; width: 840px; left: 50%; margin-left: -420px; text-align: center; z-index: 10; color: #fff;}
.space .space-des h2{line-height: 40px;}
.space .space-des p{line-height: 30px; margin-top: 10px;}
.space-shade{position: absolute; top: 0; background: rgba(0,0,0,0.4); height: 100%; width: 100%;}
.space .b-p{position: absolute; width: 200px; left: 50%; margin-left: -100px; color: #333; bottom: 30px; text-align: center; color: #fff;}
/* 太空模式指导 */
.s-explain{height: 0px; overflow: hidden;}
.s-explain img{width: 100%;}
.s-explain p{color:#595757; font-size: 16px; line-height: 30px;}
.s-explain .exp1{position: absolute; left: 30.9%; top: 44.8%;}
.s-explain .exp2{position: absolute; left: 55.9%; top: 44.8%;}
.s-explain .exp3{position: absolute; left: 32.4%; top: 50%;}
.s-explain .exp4{position: absolute; left: 56.9%; top: 50%;}
.s-explain .ex-des{width: 560px; left: 50%; bottom: 9.5%; text-align: center; margin-left: -280px; position: absolute;}

@media screen and (min-width: 1200px) and (max-width:1599px) {
	.s-explain p{font-size: 14px;}
}



/* 专属扳机键 */
.trigger-img{width: 1200px; position: relative; margin:120px auto;}
.video-and-intro-item{width: 100%; position: absolute; top: 0; height: 100%;}

.video-and-intro-item .item-des{width: 50%; float: left; position: relative; height: 100%;}
.video-and-intro-item .item-des h2{position: absolute; top: 14.5%; left: 10.2%; color: #525051; line-height: 40px;}
.video-and-intro-item .item-des p{position: absolute; left: 10.2%; line-height: 30px; top: 48%; width: 88.8%;}

.video-and-intro-item .item-video{width: 50%; float: left; background: red; height: 100%; position: relative;}
.video-and-intro-item .item-video img{width: 100%;}
.video-and-intro-item .item-video .body-play{z-index: 100; width: 80px; height: 80px; position: absolute; left: 50%; margin-left: -40px; top: 50%; margin-top: -40px; cursor: pointer; background: url(../phone_play.html) no-repeat;}
.video-and-intro-item .item-video .body-play:hover{background: url(../phone_play_hov.html) no-repeat;}
.video-and-intro-item .item-video video{width: 100%; position: absolute; top: 0; z-index: 200;}


/* 横拍竖拍 */
.vertical img{width: 100%;}
.vertical-des{position: absolute; top: 10.4%; left: 27.6%; width: 500px;}
.vertical-des h2{line-height: 40px; color: #fff;}
.vertical-des p{color: #fff; margin-top: 10px;}

.vertical .v-left{position: absolute; width: 22.4%; top: 29%; left: 26.5%; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0; }
.vertical .v-right{position: absolute; width: 16.8%; top: 5.4%; left: 56.7%; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0; }

.ver1-run{animation: imgrun 2s forwards;}
.ver2-run{animation: imgruns 2s forwards;}

/* 魔术环 */
.magic{padding: 120px 0; background: #fff; width: 1200px; margin: 0 auto; height: 432px; box-sizing:content-box;}
.magic .magic-video{height: 432px; width: 600px; float: left; position: relative;}
.magic-video .magic-box{display: none;}
.magic-video .magic-box img{width: 100%;}
.magic-video .magic-box video{position: absolute; top: 0; z-index: 10;}
.magic-box .body-play1,.magic-box .body-play2,.magic-box .body-play3{z-index: 100; width: 80px; height: 80px; position: absolute; left: 50%; margin-left: -40px; top: 50%; margin-top: -40px; cursor: pointer; background: url(../phone_play.html) no-repeat;}
.magic-box .body-play1:hover,.magic-box .body-play2:hover,.magic-box .body-play3:hover{background: url(../phone_play_hov.html) no-repeat;}

.magic .magic-video video{width: 100%; height: 100%; position: absolute;}
.magic .magic-des{height: 432px; width: 520px; margin-left: 80px; float: left; position: relative;}
.magic .magic-des h2{line-height: 40px; color: #5b595a;}
.magic .magic-des p{color:#6c6c6c; line-height: 30px; margin-top: 20px;}

.magic-des .mag-list,.magic-des .mag-list2{width: 100%; position: absolute; bottom: 0; cursor: pointer;}
.magic-des .mag-list li,.magic-des .mag-list2 li{float: left; position:relative;}
.magic-des .mag-list li{z-index: 1;}
.magic-des .mag-list li img,.magic-des .mag-list2 li img{width: 66px; height: 67px; margin:0 auto;}
.magic-des .mag-list li p{text-align: center; font-size: 14px; color: #898989; height: 30px; line-height: 30px;}
.magic-des .mag-list li:nth-of-type(1),.magic-des .mag-list2 li:nth-of-type(1){width: 20.8%;}
.magic-des .mag-list li:nth-of-type(2),.magic-des .mag-list2 li:nth-of-type(2){width: 58.4%;}
.magic-des .mag-list li:nth-of-type(2) p{text-align: center; width: 120px; margin:10px auto;}


.magic-des .mag-list li:nth-of-type(3),.magic-des .mag-list2 li:nth-of-type(3){width: 20.8%;}
.magic-des .mag-list2{bottom: 117px;}
.magic-des .mag-list2 li{z-index: 2;}
.magic-des .mag-list2 li:nth-of-type(1){position: absolute; left: 0%;}
.magic-des .mag-list2 li:nth-of-type(2){position: absolute; left: 20.8%;}
.magic-des .mag-list2 li:nth-of-type(3){position: absolute; left: 79.2%;}
.magic-des .mag-list2 li{display: none;}

/* 防泼水 */
.water video{width: 100%;}
.water-des{position: absolute; top: 4%; width: 680px; left: 50%; margin-left: -340px; text-align: center;}
.water-des h2{color: #fff; line-height: 60px;} 
.water-des p{line-height: 30px; color: #fff;}

/* 专属app */
.ex-container{width: 70%; margin: 70px auto;}
.ex-container .ex-title{width: 962px; margin:0 auto;}
.ex-container .ex-title h2{text-align: center; color: #595758; height: 80px; line-height: 80px;}
.ex-title .ex-list{height: 66px; border-bottom: 1px solid #686d71;}
.ex-title .ex-list li{float: left; height: 66px; line-height: 66px; margin-right: 60px; width: 194px; position: relative; cursor: pointer;}
.ex-title .ex-list li p{color:#575757; font-size: 12px;}
.ex-title .ex-list li span{display: block; position: absolute;}
.ex-title .ex-list li:nth-of-type(2){ width: 220px;}
.ex-title .ex-list li:nth-last-of-type(1){margin-right: 0px; width: 160px;}

/* 详情 */
.ex-container .ex-exp1,.ex-container .ex-exp2{width: 693px; margin: 40px auto 0; display: none;}
.ex-container .ex-exp2 video{margin: 0 auto;}
.ex-container .ex-exp3,.ex-container .ex-exp4{width: 718px; margin: 40px auto 0; display: none;}
.ex-container .ex-exp1 img,.ex-container .ex-exp2 img,.ex-container .ex-exp3 img,.ex-container .ex-exp4 img{width: 100%; margin-bottom: 15px;}
.ex-container .ex-exp2 h2{font-size: 20px; height: 40px; line-height: 40px; color: #6a6a6a;}
.ex-container .ex-exp1 p,.ex-container .ex-exp2 p,.ex-container .ex-exp3 p,.ex-container .ex-exp4 p{color: #6a6a6a; line-height: 30px;}



/* 更多特性 */
.char-more{margin: 100px auto; width: 70%;}
.char-more .char-title{width: 100%;}
.char-more .char-title p{height: 54px; line-height: 54px; font-size: 16px; color: #595758;}
.char-more .char-title h2{background:#dfdfdf; width: 100%; display: block; height: 3px;}

.char-more .char-list{margin-top: 36px; width: 100%;}
.char-more .char-list li{float: left; width: 32%;}
.char-more .char-list li:nth-of-type(2){margin:0 2%;}
.char-more .char-list li img{width: 100%;}
.char-more .char-list li h2{margin-top: 33px; line-height: 40px; color: #5b595a; font-size: 22px;}
.char-more .char-list li p{line-height: 26px; color: #5b595a; margin-top: 10px;}

@media screen and (min-width: 1600px) and (max-width:1919px){
	.char-more .char-list li h2{font-size: 22px;}
}

@media screen and (min-width: 1440px) and (max-width:1599px) {
	.char-more .char-list li h2{font-size: 20px;}
	.char-more .char-list li p{font-size: 14px;}
}

@media screen and (min-width: 1200px) and (max-width:1439px) {
	.char-more .char-list li h2{font-size: 18px;}
	.char-more .char-list li p{font-size: 12px;}
}




.b-jia,.jia{position: absolute; bottom: -22px; left: 50%; height: 44px; margin-left: -22px; width: 44px; background: url(../jiahao.html) no-repeat; z-index: 50; cursor: pointer;}

.b-jian{display: none; position: absolute; bottom: 30px; left: 50%; height: 44px; margin-left: -22px; width: 44px; background: url(../jianhao.html) no-repeat; z-index: 50; cursor: pointer;}

.jian{display: none; position: absolute; bottom: 10px; left: 50%; height: 44px; margin-left: -22px; width: 44px; background: url(../jianhao.html) no-repeat; z-index: 50; cursor: pointer;}

/* 阴影 */
.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{position: fixed;display: none; left: 50%; top: 50%; margin-left: -480px; height: 540px; width:960px; margin-top: -299px; z-index: 20000;}
.publicity-video video{width: 100%;}








@media screen and (min-width: 1200px) and (max-width:1599px) {
	/* .magic .magic-des{width: 550px; margin-left: 50px;} */
	.magic .magic-des h2{font-size: 20px;}
	/* .magic .magic-des p{font-size: 14px; width: 80%; text-align: center;} */
	.magic-des .mag-list li p{font-size: 12px;}
}

@media screen and (min-width: 1600px) and (max-width:1919px){
	.magic .magic-des h2{font-size: 24px;}
}


/*css运动*/
@keyframes imgrun{
  from{
    -webkit-transform: translate(-20px,60px);
    -ms-transform: translate(-20px,60px);
    -o-transform: translate(-20px,60px);
    transform: translate(-20px,60px);
	filter:alpha(opacity=0);  
    -moz-opacity:0;  
    -khtml-opacity: 0;
    opacity: 0; 
  }
  to{
    -webkit-transform: translateY(0px,0px);
    -ms-transform: translateY(0px,0px);
    -o-transform: translateY(0px,0px);
    transform: translateY(0px,0px);
    filter:alpha(opacity=100);  
  	-moz-opacity:1;  
  	-khtml-opacity: 1;
    opacity: 1;
  }
}

@keyframes imgruns{
  from{
    -webkit-transform: translate(60px,20px);
    -ms-transform: translate(60px,20px);
    -o-transform: translate(60px,20px);
    transform: translate(60px,20px);
	filter:alpha(opacity=0);  
    -moz-opacity:0;  
    -khtml-opacity: 0;
    opacity: 0; 
  }
  to{
    -webkit-transform: translateY(0px,0px);
    -ms-transform: translateY(0px,0px);
    -o-transform: translateY(0px,0px);
    transform: translateY(0px,0px);
    filter:alpha(opacity=100);  
  	-moz-opacity:1;  
  	-khtml-opacity: 1;
    opacity: 1;
  }
}