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%; max-width: 1920px; margin: 0 auto;}
.adapt_screen img{display: block; width:100%;}
.isshow{display: block !important; z-index: 2;}
.sk-color{color: #488eff!important;}
section p{font-size: 16px; line-height: 30px;}
h2{font-weight: 700;}
ul li{list-style: none;}
span{display:inline-block;}
video {display: block; object-fit:cover;}
html{overflow-x: hidden;position: relative;}
.isshow{display: block!important;}

/* pocket头部 */
.pocket-header img{width:100%;}
.pocket-header .pocket-des{width:32.2%; position: absolute; left: 14.7%; color: #fff; top: 18.75%;}
.pocket-header .pocket-des img{width:49%;}
.pocket-header .pocket-des h2{font-size: 40px;text-shadow:2px 2px 5px #76a7f4; margin: 20px 0;}
.pocket-des #viss{height: 120px; width: 190px; position: relative; background: url(../jpg/videobg.jpg) no-repeat; margin-top: 10px;}
.pocket-des #viss .list-shade{cursor: pointer; position: absolute; height: 120px; width: 190px; background: rgba(0,0,0,0.4);}
.pocket-des #viss .list-shade img{cursor: pointer; height: 28px; width: 28px; position: absolute; left: 50%; top: 50%; margin-left: -14px; margin-top: -14px;}
.pocket-des #viss .list-shade:hover{background: rgba(0,0,0,0); opacity: 0.6;}

/* 小身躯 */
.energy-des{width:28%; position: absolute; top: 21.25%; left: 19.8%; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.energy-des h2{font-size: 42px;  background-image:-webkit-linear-gradient(left,#47beff,#b0b4fb,#f6acb9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom: 20px;}
.energy-des .scale{margin-top: 25%;}
.energy-des .scale span{font-size: 16px; display: block;}
.energy-des .scale p{font-size: 50px; color: #68bdfe; font-weight: 700; margin-top: 3%;}
.energy-des .scale p em{font-style: normal; font-size: 16px;}
.energy-run{animation: des 2s forwards;}

/* 特色 */
.characteristic p{width:800px; position: absolute; bottom: 12%; text-align: center; left:50%; margin-left: -400px; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.chara-run{animation: des 2s forwards;}

/* 图标 */
.func{padding: 60px 0;}
.func-list{width:1100px; margin: 0 auto;}
.func-list li{width:25%; text-align: center; float: left}
.func-list li img{width:36%; margin: 0 auto;}
.func-list li p{font-weight: 700; margin-top: 10px;}

/* 广角 */
.wide-des{width:990px; text-align: center; padding-top: 30px; margin: 0 auto 20px; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.wide-run{animation: des 2s forwards; animation-delay:0.5s; -webkit-animation-delay:0.5s;}
.wide-des h2{font-size: 42px;  background-image:-webkit-linear-gradient(left,#47beff,#b0b4fb,#f6acb9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom: 20px;}

.wrapper{overflow: hidden;}
.wrapper .bg{position: relative; width: 100%; overflow: hidden;}
.wrapper .bg .img{display: block; width: 100%; height: auto; opacity: 1; transition:opacity 800ms cubic-bezier(0.4, 0, 0.25, 1);}
.wrapper .bg .mask{position: absolute; top: 0; left: 0; right: 0;}
.wrapper .mask-left,.wrapper .mask-right{position: absolute; width: 50%; top: 0; height: 100%; background: #fff; transition:transform 800ms cubic-bezier(0.4, 0, 0.25, 1), -webkit-transform 800ms cubic-bezier(0.4, 0, 0.25, 1);}
.wrapper .mask-left{right: 50%;}
.wrapper .mask-right{left: 50%;}

/* 防抖 */
.contrast-des{width: 980px; text-align: center; margin: 50px auto; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.contrast-des h2{font-size: 42px;  background-image:-webkit-linear-gradient(left,#47beff,#b0b4fb,#f6acb9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom: 20px;}
.contrast .clist{width: 62.5%; margin: 30px auto;}
.contrast .clist li{float: left; width: 33%; text-align: center;}
.contrast .clist li p{font-size: 20px; font-weight: 700;}
.contrast video{width: 62.5%; margin: 0 auto;}
.contrast .con-list{margin: 60px auto; width: 62.5%;}
.contrast .con-list li{float: left; text-align: center; width: 25%;}
.contrast .con-list li img{width: 30%; margin: 0 auto 20px;}
.contrast .con-list li p{width: 70%; margin: 0 auto;}
.contrast-run{animation: des 2s forwards;}
/* 玩法 */
.play-des{width:860px; margin: 50px auto; text-align: center; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.play-des h2{font-size: 42px;  background-image:-webkit-linear-gradient(left,#47beff,#b0b4fb,#f6acb9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom: 20px; line-height: 60px;}
.play-run{animation: des 2s forwards;}
.play .play-video{width:56.25%; margin: 0 auto;}
.play .play-video video{width:100%; display: none;}

.play .play-icon{width: 40.5%; margin: 60px auto 20px; border-bottom: 1px solid #cfcfcf;}
.play .play-icon li{float: left; width:17.5%; margin-right: 10%; text-align: center; cursor: pointer; position: relative;}
.play .play-icon li:nth-last-of-type(1){margin-right: 0px;}
.play .play-icon li img{width:50%; margin: 0 auto;}
.play .play-icon li p{font-size: 14px; margin-bottom: 10px;}
.play .play-icon li span{position: absolute; width:100%; height: 3px; background: #000; bottom: -2px; left: 0px; display: none;}
.play .play-model{width:430px; margin: 0 auto 40px; text-align: center;}
.play .play-model p{display: none;}

/* 卡片 */
.jianting{margin: 0 auto;}
.jianting .j-list li.card{opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0); width: 980px; height: 800px;top: calc((100vh - 800px)/2)!important; padding:40px 0; margin: 0 auto; transform:translate(0,0); display:flex; align-items:center}

.j-list li .card-container{width: 750px; height: 750px; position: relative; margin: 50px auto 0;}
.j-list li .card-container img{box-shadow:4px 12px 40px 6px rgba(0,0,0,.09); border-radius:16px; display: block; width: 100%; height: 100%;}
.jianting .j-list li.sticky{position: sticky!important;}
.bian{animation: dddd 2s forwards;}

.cards-wrapper .j-list .card-box,.cards-wrapper .j-list .box-sp{width: 560px; margin: 0 auto; position: absolute; left: 50%; -webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%); top: 45px; text-align: center; color: #fff;}
.cards-wrapper .j-list .card-box h3{font-size: 28px; margin-bottom: 10px; font-weight: 700; text-shadow:2px 2px 4px #b2c6f7;}
.cards-wrapper .j-list .card-box p{letter-spacing: 2px; font-size: 16px; text-shadow:2px 2px 4px #b2c6f7;}
.cards-wrapper .j-list .box-sp{top: 680px !important; color: #a98493;}

/* 功能 */
.face-body{background: #fff;padding: 10px 0 50px 0;}
.face-body h3{margin-top: 30px; text-align: center; font-size: 42px; font-weight: 700; background-image:-webkit-linear-gradient(left,#47beff,#b0b4fb,#f6acb9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom: 20px;}
.face-container,.body-container{width: 1200px; height: 432px; margin: 80px auto 50px; background: #fff;}
.face-container .container-left,.body-container .container-right{position: relative; width: 50%; height: 100%;}
.face-container .container-left video,.body-container .container-right video{object-fit:fill; width: 600px; height: 432px; display: block; position: absolute; top: 0;}
.face-container .container-left .face-play,.body-container .container-right .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(../png/phone_play.png) no-repeat;}
.face-container .container-left .face-play:hover,.body-container .container-right .body-play:hover{background: url(../png/phone_play_hov.png) no-repeat; opacity: 0.5;}
.face-container .container-right,.body-container .container-left{width: 40%; margin-left: 10%;}
.body-container .container-left{margin: 0 10% 0 0; width: 40%;}
.face-container .container-right h2,.body-container .container-left h2{font-size: 28px; margin-bottom: 20px; padding-top: 100px; color: #000; width: 100%;}
.face-container .container-right p,.body-container .container-left p{width: 100%; line-height: 32px; font-size: 16px; color: #000;}

/* 炫技 */
.skill{background: #fff; padding: 50px 0;}
.skill-des{width:1200px; margin: 0 auto; background: #fff;}
.skill-des .s-img{float: left; width: 50%;}
.skill-des .s-img img{width: 100%; display: none;}
.skill-des .s-content{float: left; width: 45%; padding-top: 30px; padding-left: 5%; position: relative;}
.skill-des .s-content h2{font-size: 28px; margin-bottom: 20px;}
.skill-des .s-content .s-list{margin-top: 50px; width: 80%;}
.skill-des .s-content .s-list li,.skill-des .s-content .list-hover li{float: left; width: 25%; text-align: center; cursor: pointer; position: relative;}
.skill-des .s-content .s-list li img{width: 50%; margin: 0 auto;}
.skill-des .s-content .s-list li p{font-size: 14px;}
.skill-des .s-content .list-hover{position: absolute; bottom: 10.5%; width: 80%;}
.skill-des .s-content .list-hover li:nth-of-type(1) img{position: absolute; left: 22%; width:44%; bottom: 0;}
.skill-des .s-content .list-hover li:nth-of-type(2) img{position: absolute; left: 112%; width:44%; bottom: 0;}
.skill-des .s-content .list-hover li:nth-of-type(3) img{position: absolute; left: 200%; width:44%; bottom: 0;}
.skill-des .s-content .list-hover li:nth-of-type(4) img{position: absolute; left: 290%; width:44%; bottom:0; z-index: 10;}
.skill-des .s-content .list-hover li img{display: none;}

.model{width: 1200px; margin: 0 auto; padding: 50px 0;}
.model-content{float: left; width: 50%; float: left; padding-right: 8%; margin-top: 100px;}
.model-img{width: 50%; float: left;}
.model-content h2{margin-bottom: 20px; font-size: 28px; line-height: 40px;}

/* 续航 */
.xuhang-des{position: absolute; left:12%; top: 28%; width:600px; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.xuhang-des h2{font-size: 42px;  background-image:-webkit-linear-gradient(left,#47beff,#b0b4fb,#f6acb9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom: 20px; line-height: 60px;}
.xuhang-run{animation:des 2s forwards;}

/* 配件 */
.parts-des{padding: 50px 0; width:900px; text-align: center; margin:0 auto; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;}
.parts-des h2{font-size: 42px;  background-image:-webkit-linear-gradient(left,#47beff,#b0b4fb,#f6acb9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom: 20px; line-height: 60px;}
.parts{width: 1040px; margin: 0 auto; position: relative;}
.parts-run{animation:des 2s forwards;}
.box-hover-modal {width: 500px;position: relative;background: #aaa;overflow: hidden;vertical-align: text-top;display:inline-block;text-align: left;}
.parts .box-hover-modal:nth-of-type(1){top: 0;left: 0;}
.parts .box-hover-modal:nth-of-type(2){top: 0;left: 20px;}
.parts .box-hover-modal:nth-of-type(3){top: 20px;left: 0;}
.parts .box-hover-modal:nth-of-type(4){top: -150px;left: 20px;}
.box-hover-modal-con img{width: 100%;display: block;}
.box-hover-modal-m {display: none;position: absolute;width: 95%;height: 95%;top: 2.5%;left: 2.5%;background: rgba(255,255,255,.8);border-radius: 5px;}
.box-hover-modal-m .box-des{position: absolute; bottom: 6%; left: 5%; width: 90%;}
.box-hover-modal-m .box-des h2{font-size: 32px; font-weight: 700; color: rgba(0,0,0,.65); margin-bottom: 10px;}
.box-hover-modal-m .box-des p{font-size: 16px; color: rgba(0,0,0,.65);}



/* 宣传视频 */
.body-shade,.publicity-video2{cursor: pointer; display: none; top: 0; position: fixed; height: 100%; width: 100%; background: rgba(0,0,0,0.5); z-index: 100;}
.publicity-video,.publicity-video2{position: fixed;display: none; left: 50%; top: 50%; margin-left: -480px; height: 540px; width:960px; margin-top: -299px; z-index: 100;}
.publicity-video video,.publicity-video2 video{width: 100%;}

@media screen and (min-width: 1200px) and (max-width:1599px) {
    .pocket-header .pocket-des{width:40%; left: 12%; top: 10.75%;}
    .pocket-header .pocket-des h2,.energy-des h2,.wide-des h2,.xuhang-des h2,.parts-des h2,.play-des h2,.play-des h2,.face-body h3,.contrast-des h2{font-size: 32px;}
    .energy-des{width:32%; left:16%;}
    .xuhang-des{left:14%;}
    .parts,.contrast-des{width:860px;}
    .box-hover-modal{width:400px;}
    .parts .box-hover-modal:nth-of-type(4){top: -120px;left: 20px;}
    .play-des{width: 700px;}
    .play .play-video,.play .play-icon{width: 64%;}
    .face-container,.body-container{width: 1000px; height: 360px;}
    .face-container .container-left video,.body-container .container-right video{height: 360px; width: 500px;}
    .face-container .container-right h2,.body-container .container-left h2{padding-top: 80px;}
    .skill-des,.model{width: 1000px;}
    .model-content h2,.face-container .container-right h2,.body-container .container-left h2,.skill-des .s-content h2{font-size: 24px;}
    .contrast video{width: 80%;}
    .contrast .con-list li p{width: 95%; margin: 0 auto;}
    .play .play-icon li p{line-height: 24px; font-size: 12px;}
    .skill-des .s-content .list-hover li:nth-of-type(1) img,.skill-des .s-content .list-hover li:nth-of-type(2) img,.skill-des .s-content .list-hover li:nth-of-type(3) img,.skill-des .s-content .list-hover li:nth-of-type(4) img{bottom: -4px;}
    .xuhang-des h2{line-height: 40px;}
    .xuhang-des{left: 8%; width: 480px;}
}


/*字推移*/
@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; 
	}
}

@keyframes dddd{
	from{
		transform: scale(1); 
	}
	to{
		transform: scale(0.5);
	}
}