html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
html,body,fieldset,img,iframe,abbr{border:0;}
li{list-style:none;}
textarea{overflow:auto;resize:none;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:300;}
a,a:hover{text-decoration:none;}
body,html{width:100%;height:100%;font-weight:400;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:center;}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:"Microsoft YaHei","Helvetica Neue",Arial,HelveticaNeue,Helvetica,"BBAlpha Sans",sans-serif;font-size: 20px;}
body{background:#000;opacity:1;-webkit-transition:opacity 500ms ease-in;transition:opacity 500ms ease-in;}
input{-webkit-appearance:none}
*{outline:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-focus-ring-color:rgba(0,0,0,0);}
a{color:#434343;}
@media screen and (orientation: portrait) {
  /*竖屏显示*/
}
@media screen and (orientation: landscape) {
  /*横屏 css*/
}
/*淡入淡出*/
@-webkit-keyframes nextArrow{0%{-webkit-transform:translateY(-.15rem)}100%{-webkit-transform:translateY(0.15rem)}}
@-moz-keyframes nextArrow{0%{-moz-transform:translateY(-.15rem)}100%{-moz-transform:translateY(0.15rem)}}
@-o-keyframes nextArrow{0%{-o-transform:translateY(-.15rem)}100%{-o-transform:translateY(0.15rem)}}
@keyframes nextArrow{0%{transform:translateY(-.15rem)}100%{transform:translateY(0.15rem)}}
/*************横竖屏start**************/
#forhorview{position:fixed;z-index:1000;top:0;bottom:0;left:0;right:0;width:100%;background:#000;-webkit-box-align:center;-moz-box-align:center;box-align:center;-webkit-box-pack:center;-moz-box-pack:center;box-pack:center; display: none;}
#forhorview p{font-size:1rem;color:#ddd;}
#forhorview.show{display:-webkit-box;display:-moz-box;display:box;}
/*************横竖屏end***************/
.wrap{width:100%;height:100%;min-height:100%;background:#000;background-size:contain;position:relative;overflow:hidden;}
.swiper-container{width:100%;height:100%;}
.swiper-slide{visibility:hidden; position: relative;}
.swiper-slide-next,.swiper-slide-prev,.swiper-slide-active{visibility:visible;}
/*moveup*/
.up{display: block;width:1.2rem;height:0.82rem;left:50%;bottom: 0.5rem;margin-left:-.6rem;z-index: 999; background: url(../images/p_up.png) no-repeat center; background-size: 100% 100%; position: absolute; -webkit-animation: nextArrow ease-in-out 1s 0s infinite alternate both; -moz-animation: nextArrow ease-in-out 1s 0s infinite alternate both; -ms-animation: nextArrow ease-in-out 1s 0s infinite alternate both;   animation: nextArrow ease-in-out 1s 0s infinite alternate both;}
/*page1*/
.page1{background:url(../images/p1_bg2.jpg) no-repeat;background-size:100% 100%; overflow:hidden; width:100%; }
.page1 h1{ width: 6.6rem; height: 3.63rem; margin: 0 auto; background: url(../images/p1_logo.png) no-repeat; background-size: 100% 100%; margin-top: 1.2rem; background-position: center center;text-indent: -9999px;}
.page1 .midname{ width: 7.3rem; height: 2.13rem; background: url(../images/p1_2.png) no-repeat; background-size: 100% 100%; background-position: center bottom; position: absolute; top: 0;left:50%;-webkit-transform:translate3d(-50%,11rem,0);-moz-transform:translate3d(-50%,11rem,0);-ms-transform:translate3d(-50%,11rem,0);transform:translate3d(-50%,11rem,0);opacity:0;}
.slide-animated.page1 .midname{-webkit-transform:translate3d(-50%,7rem,0);-moz-transform:translate3d(-50%,7rem,0);-ms-transform:translate3d(-50%,7rem,0);transform:translate3d(-50%,7rem,0);transition:all 1s ease .2s;opacity:1}

.page1 .company{ position: absolute; bottom: .4rem; left: 5%; overflow: hidden; height: 0.84rem; width: 90%; zoom:1;}
.page1 .company li{ float: left;width:30%;display: block; height: 0.84rem; }
.page1 .company li.wangyi{ background: url(../images/p1_wangyi.png) no-repeat center; background-size: 100% 100%; }
.page1 .company li.mojiang{ background: url(../images/p1_mojiang.png) no-repeat center; background-size: 100% 100%; margin:0 5%;}
.page1 .company li.yxdown{ background: url(../images/p1_yxdown.png) no-repeat center; background-size: 100% 100%; }
.page1 .up{ bottom: 1.26rem; }

/*page2*/
.page2{background:url(../images/p2_bg.jpg) no-repeat;background-size:100% 100%; overflow:hidden; width:100%; color: #fff; position: relative;}
.page2 h2{ width: 83.3%; height: 2rem; font-size: .8rem; margin: 0 auto; margin-top: 1.2rem; border-bottom: 2px solid #fff; margin-bottom:0.64rem; line-height: 2rem; overflow: hidden;}
.page2 .content{ width: 83.3%; margin: 0 auto; font-size: 0.41rem; overflow: hidden; position: absolute; top: 0;left:50%;-webkit-transform:translate3d(-50%,11rem,0);-moz-transform:translate3d(-50%,11rem,0);-ms-transform:translate3d(-50%,11rem,0);transform:translate3d(-50%,11rem,0); opacity: 0;}
.page2 .content p{ line-height: 0.68rem; margin-bottom: 0.68rem; }
.slide-animated.page2 .content{-webkit-transform:translate3d(-50%,3.8rem,0);-moz-transform:translate3d(-50%,3.8rem,0);-ms-transform:translate3d(-50%,3.8rem,0);transform:translate3d(-50%,3.8rem,0);transition:all 1s ease .2s;opacity:1}

/*page3*/
.page3{background:url(../images/p3_bg.jpg) no-repeat;background-size:100% 100%; overflow:hidden; width:100%; color: #fff; position: relative;}
.page3 h2{ width: 90%; height: 2rem; font-size: .8rem; margin: 0 auto; margin-top: 1.2rem; border-bottom: 1px solid #fff; margin-bottom:0.35rem; line-height: 2rem; overflow: hidden; font-family: impact; font-weight: bold; background: url(../images/p3_icon1.png) no-repeat; background-size: auto 37.5%; background-position: 0 50%;}
.page3 .content{ width: 9rem; font-size: 0.41rem; overflow: hidden; position: absolute; left:0; top: 0; -webkit-transform:translate3d(.5rem,11rem,0);-moz-transform:translate3d(.5rem,11rem,0);-ms-transform:translate3d(.5rem,11rem,0);transform:translate3d(.5rem,11rem,0); opacity: 0;}
.slide-animated.page3 .content{-webkit-transform:translate3d(.5rem,3.55rem,0);-moz-transform:translate3d(.5rem,3.55rem,0);-ms-transform:translate3d(.5rem,3.55rem,0);transform:translate3d(.5rem,3.55rem,0);transition:all 1s ease .2s; opacity: 1;}
.page3 .content p{ line-height: 0.68rem; text-align: left;}

/*page4*/
.page4{background:url(../images/p4_bg2.jpg) no-repeat;background-size:100% 100%; overflow:hidden; width:100%; color: #fff; position: relative; }
.page4 h2{ width: 90%; height: 2rem; font-size: .8rem; margin: 0 auto; margin-top: 1.2rem; border-bottom: 1px solid #fff; margin-bottom:0.35rem; line-height: 2rem; overflow: hidden; font-family: impact; font-weight: bold; text-align: right;background: url(../images/p4_icon1.png) no-repeat; background-size: auto 37.5%; background-position: 100% 50%;}
.page4 .content{ width: 90%; font-size: 0.41rem; overflow: hidden;position: absolute; left:50%; top: 0; -webkit-transform:translate3d(-50%,11rem,0);-moz-transform:translate3d(-50%,11rem,0);-ms-transform:translate3d(-50%,11rem,0);transform:translate3d(-50%,11rem,0); opacity: 0;}
.page4 .content p{ line-height: 0.68rem; text-align: right;}
.slide-animated.page4 .content{-webkit-transform:translate3d(-50%,3.55rem,0);-moz-transform:translate3d(-50%,3.55rem,0);-ms-transform:translate3d(-50%,3.55rem,0);transform:translate3d(-50%,3.55rem,0);transition:all 1s ease; opacity: 1;}

/*page5*/
.page5{background:url(../images/p5_bg.jpg) no-repeat;background-size:100% 100%; overflow:hidden; width:100%; color: #fff; }
.page5 .title{ width: 8.7rem; height: 2.53rem; margin:.5rem auto 0; background: url(../images/p5_icon1.png) no-repeat; background-size: auto 100%; background-position:left center; margin-bottom: .5rem;}
.page5 .title p{ padding-left: 1rem;}
.page5 .title .p1{ font-size:0.73rem; padding-top: 0.35rem; height: 1.1rem; line-height: 1.1rem; overflow: hidden; font-weight: 500; }
.page5 .title .p2{ font-size: 0.41rem; height: 0.44rem; overflow: hidden; line-height: 0.44rem; overflow: hidden; }
.page5 .up{ bottom: .5rem; }

/* .page5 .intro{ position:absolute; left: 0; top: 0; } */
.page5 .model_1{ width: 100%; height: 12rem;background: url(../images/p5_bg1.png) no-repeat; background-size: 100% 100%; position: relative; }
.page5 .model_1 .intro{ width: 6rem; position: absolute; font-size: .41rem; left:0; top:0;-webkit-transform:translate3d(-6rem,1.7rem,0);-moz-transform:translate3d(-6rem,1.7rem,0);-ms-transform:translate3d(-6rem,1.7rem,0);transform:translate3d(-6rem,1.7rem,0); }
.page5 .model_1 .intro p{ line-height:.64rem; text-align:right; }
.slide-animated.page5 .model_1 .intro{-webkit-transform:translate3d(4.4rem,1.7rem,0);-moz-transform:translate3d(4.4rem,1.7rem,0);-ms-transform:translate3d(4.4rem,1.7rem,0);transform:translate3d(4.4rem,1.7rem,0);transition:all 1s ease .3s;}


.page5 .model_2{ width: 100%; height:12rem ;background: url(../images/p5_bg2.png) no-repeat; background-size: 100% 100%; position: relative; }
.page5 .model_2 .intro{ width: 7rem; position: absolute;  font-size: .41rem; left:0;top:0; -webkit-transform:translate3d(-7rem,1.7rem,0);-moz-transform:translate3d(-7rem,1.7rem,0);-ms-transform:translate3d(-7rem,1.7rem,0);transform:translate3d(-7rem,1.7rem,0);}
.page5 .model_2 .intro p{ line-height:.64rem; text-align:left; }
.slide-animated.page5 .model_2 .intro{-webkit-transform:translate3d(.4rem,1.7rem,0);-moz-transform:translate3d(.4rem,1.7rem,0);-ms-transform:translate3d(.4rem,1.7rem,0);transform:translate3d(.4rem,1.7rem,0);transition:all 1s ease .3s;}

.page5 .model_3{ width: 100%; height:12rem ;background: url(../images/p5_bg3.png) no-repeat; background-size: 100% 100%; position: relative; }
.page5 .model_3 .intro{ width:7rem; position: absolute; font-size: .41rem; left:0; top:0;-webkit-transform:translate3d(-7rem,1.7rem,0);-moz-transform:translate3d(-7rem,1.7rem,0);-ms-transform:translate3d(-7rem,1.7rem,0);transform:translate3d(-7rem,1.7rem,0);}
.page5 .model_3 .intro p{ line-height:.64rem; text-align:left; }
.slide-animated.page5 .model_3 .intro{-webkit-transform:translate3d(3.3rem,1.7rem,0);-moz-transform:translate3d(3.3rem,1.7rem,0);-ms-transform:translate3d(3.3rem,1.7rem,0);transform:translate3d(3.3rem,1.7rem,0);transition:all 1s ease .3s;}


/*page6*/
.page6{background:url(../images/p6_bg.jpg) no-repeat;background-size:100% 100%; overflow:hidden; width:100%; color: #fff; }
.page6 h2{ width: 95%; height: 1.6rem; font-size: .66rem; margin: 0 auto; border-bottom: 1px solid #fff; margin-bottom:0.2rem; line-height: 1.6rem; overflow: hidden;}
.page6 .content{ width: 95%; margin: 0 auto; font-size: 0.41rem; overflow: hidden; max-height: 1.5rem; }
.page6 .content p{ line-height: 0.5rem; }

.page6 .bota_nav{ width: 8.4rem; height: 4.16rem;position: absolute; left: 50%; margin-left: -3.8rem; top: 12rem; z-index: 2;}
.page6 .bota_nav li{ width:1.9rem; height: 2rem; position: absolute; background: url(../images/p6_iconbg1.png) no-repeat; background-size: 100% 100%; transform:rotate(45deg);  }
.page6 .bota_nav li.active{ background: url(../images/p6_iconbg2.png) no-repeat; }
.page6 .bota_nav li.nav_1{ left: 0; top: 0; }
.page6 .bota_nav li.nav_2{ left: 1.86rem; top: 1.29rem; }
.page6 .bota_nav li.nav_3{ left:3.7rem; top: 0; }
.page6 .bota_nav li.nav_4{ left: 5.57rem; top: 1.29rem; }
.page6 .bota_nav li p{ width:100%; height: 100%; font-size: .52rem; line-height: 2.05rem; overflow: hidden;text-align: center; transform:rotate(-45deg); }

.page6 .mid_box{ width: 100%; position: absolute; top: 3.5rem; height: 9.5rem;}
.page6 .mid_box div{ display: none; }
.page6 .mid_box div.active{ display: block; }
.page6 .mid_box .box_1{ width: 5.6rem; height:7.5rem; padding-left: 1.3rem;background: url(../images/p6_line1.png) no-repeat left center;   position: absolute; top: .7rem; left: 2.5rem; background-size: auto 100%;}
.page6 .mid_box .box_1 p{ max-height: 1.1rem; line-height: .55rem; font-size: .4rem; overflow: hidden; margin-bottom: .2rem; }
.page6 .mid_box .box_1 img{ width: 5rem; height: 2.64rem; } 

.page6 .mid_box .box_2{ width: 5.2rem; height:9rem;background: url(../images/p6_line2.png) no-repeat right bottom;   position: absolute;left: .3rem; background-size: auto 80%; top: .5rem;}
.page6 .mid_box .box_2 p{ width: 9rem; max-height: 1.1rem; line-height: .55rem; font-size: .4rem; overflow: hidden; margin-bottom: .2rem; }
.page6 .mid_box .box_2 img{ width: 5rem; height: 2.64rem; } 

.page6 .mid_box .box_3{ width: 5.2rem; height:8rem;background: url(../images/p6_line3.png) no-repeat right bottom;   position: absolute;left: 2.2rem; background-size: auto 85%;}
.page6 .mid_box .box_3 p{ width: 8rem; max-height: 1.1rem; line-height: .55rem; font-size: .4rem; overflow: hidden; margin-bottom: .2rem; }
.page6 .mid_box .box_3 img{ width: 5rem; height: 2.64rem; }

.page6 .mid_box .box_4{ width: 5.2rem; height:9rem;background: url(../images/p6_line2.png) no-repeat right bottom;   position: absolute;left: 3.8rem; background-size: auto 72%; top: .5rem;}
.page6 .mid_box .box_4 p{ width: 6rem; max-height: 1.5rem; line-height: .5rem; font-size: .4rem; overflow: hidden; margin-bottom: .2rem; }
.page6 .mid_box .box_4 img{ width: 5rem; height: 2.64rem; }


.page6 .up{ bottom: .5rem; }
/*page7*/
.page7{background:url(../images/p7_bg.jpg) no-repeat;background-size:100% 100%; overflow:hidden; width:100%; color: #fff; }
.page7 .code_box{ width:5.4rem; background: #fff; border-radius: 0.4rem; margin: 2.4rem auto 0; padding:0.4rem; }
.page7 .code_box .code{ width: 100%; overflow: hidden; }
.page7 .code_box .code img{ width: 100%; height: auto;}
.page7 .code_box .code p{ font-size: .36rem; height: .5rem; line-height: .5rem; overflow: hidden;color: #666;text-align: center; }
.page7 .code_box .code span{ display: block; width: 100%; text-align: center; color: #31ae1f; font-size: .36rem; height: .5rem;line-height: .5rem; overflow:hidden; }
.page7 .shareBtn{ width:3.85rem; height: 1.23rem; position: absolute; left: 3.58rem; top: 11.2rem; background: url(../images/p7-btn1.jpg) no-repeat center; background-size: 100% 100%;}
.page7 .again{ width:3.02rem; height: 1.06rem; position: absolute; left: 2.16rem; top:13.2rem; background: url(../images/p7_btn2.jpg) no-repeat center; background-size: 100% 100%;  }
.page7 .more{ width:3.02rem; height: 1.06rem; position: absolute; left: 5.85rem; top:13.2rem; background: url(../images/p7_btn3.jpg) no-repeat center; background-size: 100% 100%;  }

.page7 .share-bg{display:none;width:100%;height:100%;position:absolute;top:0;left:0;/*background:rgba(0,0,0,.7)*/background: url(../images/p7_shares.png) no-repeat; background-size: 100% 100%; z-index: 1;}
/* .page7 .share-bg .share-text{width:100%;height:auto;background:url(../images/p7_share.png) no-repeat;background-size:contain; height: 4.3rem;} */


/*page8*/
.page8{background:url(../images/p8_bg.jpg) no-repeat;background-size:100% 100%; overflow:hidden; width:100%; color: #fff; position: relative; }
.page8 .world{display: block; width: 3.3rem; height: 1.9rem; margin: 0 auto; background: url(../images/p1_logo.png) no-repeat; background-size: 100% 100%; margin-top: 0.4rem; background-position: center center; margin-bottom: .3rem;  }
.page8 p.date{ font-size: .6rem; text-align: center; line-height: .6rem; height: .6rem; overflow: hidden; color: #cdc9c6; font-family:impact; font-weight: bold;  }

.page8 .down,.page8 .team,.page8 .start,.page8 .store{ position: absolute; left: 0; top: 0; }
.page8 .down{ width:3.5rem;position: absolute;-webkit-transform:translate3d(-4rem,3.4rem,0);-moz-transform:translate3d(-4rem,3.4rem,0);-ms-transform:translate3d(-4rem,3.4rem,0);transform:translate3d(-4rem,3.4rem,0);}
.page8 .down em{ display: block;width: 100%; height: 4.45rem; background: url(../images/p8_icon1-4.png) no-repeat center; background-size: 100% 100%; }
.page8 .down span{ display: block; width:2.7rem; height: 1.3rem; background: url(../images/p8_icon1-1.png) no-repeat center; background-size: 100% 100%; margin: 0 auto;  }
.slide-animated.page8 .down{-webkit-transform:translate3d(1.4rem,3.4rem,0);-moz-transform:translate3d(1.4rem,3.4rem,0);-ms-transform:translate3d(1.4rem,3.4rem,0);transform:translate3d(1.4rem,3.4rem,0);transition:all 1s ease 0s;}
.slide-animated.page8 .down.active em{ background: url(../images/p8_icon1-3.png) no-repeat center; background-size: 100% 100%; }
.slide-animated.page8 .down.active span{ background: url(../images/p8_icon1-2.png) no-repeat center; background-size: 100% 100%;}


.page8 .team{ width:3.43rem; position: absolute;/*  left:6.35rem; */-webkit-transform:translate3d(11rem,3rem,0);-moz-transform:translate3d(11rem,3rem,0);-ms-transform:translate3d(11rem,3rem,0);transform:translate3d(11rem,3rem,0);  }
.page8 .team em{  display: block;width: 100%; height: 4.45rem; background: url(../images/p8_icon2-4.png) no-repeat center; background-size: 100% 100%;}
.page8 .team span{ display: block; width:2.7rem; height: 1.3rem; background: url(../images/p8_icon2-1.png) no-repeat center; background-size: 100% 100%; margin: 0 auto;  }
.slide-animated.page8 .team{-webkit-transform:translate3d(6.35rem,3rem,0);-moz-transform:translate3d(6.35rem,3rem,0);-ms-transform:translate3d(6.35rem,3.2rem,0);transform:translate3d(6.35rem,3.2rem,0);transition:all 1s ease .3s;}
.slide-animated.page8 .team.active em{ background: url(../images/p8_icon2-3.png) no-repeat center; background-size: 100% 100%; }
.slide-animated.page8 .team.active span{ background: url(../images/p8_icon2-2.png) no-repeat center;  background-size: 100% 100%;}


.page8 .start{ width:3.65rem; position: absolute; /* left:.74rem; */ -webkit-transform:translate3d(-6rem,9.5rem,0);-moz-transform:translate3d(-6rem,9.5rem,0);-ms-transform:translate3d(-6rem,9.5rem,0);transform:translate3d(-6rem,9.5rem,0);}
.page8 .start em{ display: block;width: 100%; height: 6.09rem; background: url(../images/p8_icon3-4.png) no-repeat center; background-size: 100% 100%;}
.page8 .start span{ display: block; width:2.7rem; height: 1.3rem; background: url(../images/p8_icon3-1.png) no-repeat center; background-size: 100% 100%; position: absolute; top: 4.5rem; left:2.5rem;  }
.slide-animated.page8 .start{-webkit-transform:translate3d(0.74rem,9.5rem,0);-moz-transform:translate3d(0.74rem,9.5rem,0);-ms-transform:translate3d(0.74rem,9.5rem,0);transform:translate3d(0.74rem,9.5rem,0);transition:all 1s ease .6s;}
.slide-animated.page8 .start.active em{ background: url(../images/p8_icon3-3.png) no-repeat center; background-size: 100% 100%;}
.slide-animated.page8 .start.active span{ background: url(../images/p8_icon3-2.png) no-repeat center; background-size: 100% 100%; }


.page8 .store{ width:3.44rem; position: absolute; /* left:5.4rem; */ -webkit-transform:translate3d(11rem,9rem,0);-moz-transform:translate3d(11rem,9rem,0);-ms-transform:translate3d(11rem,9rem,0);transform:translate3d(11rem,9rem,0);}
.page8 .store em{ display: block;width: 100%; height: 4.38rem; background: url(../images/p8_icon4-4.png) no-repeat center; background-size: 100% 100%;}
.page8 .store span{ display: block; width:2.7rem; height: 1.3rem; background: url(../images/p8_icon4-1.png) no-repeat center; background-size: 100% 100%; position: absolute; top: 3.6rem; left:2rem;}
.slide-animated.page8 .store{-webkit-transform:translate3d(5.4rem,9rem,0);-moz-transform:translate3d(5.4rem,9rem,0);-ms-transform:translate3d(5.4rem,9rem,0);transform:translate3d(5.4rem,9rem,0);transition:all 1s ease .9s;}
.slide-animated.page8 .store.active em{ background: url(../images/p8_icon4-3.png) no-repeat center; background-size: 100% 100%; }
.slide-animated.page8 .store.active span{ background: url(../images/p8_icon4-2.png) no-repeat center; background-size: 100% 100%; }