/*@import url(animation.css);
@import url(animate.css);*/
body,
div,
p,
ul,
li,
ol,
dl,
dd,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
span,
i,
input,
img,
a,
button,
select,
table,
tr,
th,
td,
label,
textarea {
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
li {
  list-style: none;
}
i {
  font-style: normal;
}
a {
  text-decoration: none;
}
img {
  border: 0 none;
  vertical-align: top;
}
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: ".";
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}
body,
button {
  font-size: 14px;
  font-family: "microsoft yahei";
}
body {
  position: relative;
  overflow: hidden;
}
.body {
  position: relative;
  background-size: 100% 100%;
  overflow: hidden;
    /*background: url('../images/bg.jpg') center no-repeat;*/
}
body {
  background:#f0fdff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 100px;
  color: #000;
  margin: 0;
  padding: 0;

}
body {
    -webkit-text-size-adjust: 100% !important;
}
#body{
	overflow-y:scroll;
}

.loadgif{
  position: absolute;
    width: 3.19rem;
    height: 1.29rem;
    top: 5.5rem;
    left: 2.1rem;
}
.audwrap{
    background: url('../images/music.png') center no-repeat;background-size: 100%; position: absolute;
    width: 0.48rem;
    height: 0.51rem;
    right: 0.3rem;
    top: 0.6rem;
    z-index: 9999;
}
.audwrap img{width: 100%;-webkit-animation: show 0.8s linear infinite;animation: show 0.8s linear infinite;opacity: 0;}
.audwrap.off img{display: none;}
.audwrap.on{
  -webkit-animation: rotateani 2s linear forwards infinite;animation: rotateani 2s linear forwards infinite;
}

.conwrap,
.conwrap2{
    background: url('../images/bg.jpg') center no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 16.24rem;
    top:50%;
    left:0;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    overflow: hidden;
}
.conwrap2{
    display: none;
}
.conwrap3{
    height: 100%;
    top: 0;
     -webkit-transform: translate(0,0);
     transform: translate(0,0);
    overflow-y: auto;
}

/* .page{
   position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    overflow: hidden;
} */
.page1{
    /*z-index: 999;*/
    background: url('../images/bg.jpg') no-repeat;
    background-size: 100%;
	position: absolute;
    width: 100%;
    height: 16.24rem;
    top:50%;
    left:0;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    overflow: hidden;
}
.ttitle{
    background: url("../images/ttitle.png") no-repeat;
    background-size:100% 100%;
	position:absolute;
	left:0.88rem;
	top:2.07rem;
	width:5.79rem;
	height:3.08rem;
}
.tips_wrap{
	background:rgba(0,0,0,0.5);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	z-index:99999;
	display:none;
}
.tips{
    width: 5.64rem;
    height: 2.6rem;
    position: absolute;
    top: 5.5rem;
    left: 0.95rem;
    background: #fff;
    border-radius: 0.1rem;
    opacity: 0;
    -webkit-transform: translate(0,-15px);
    transform: translate(0,-15px);
    -webkit-animation: show 0.3s linear forwards;
    animation: show 0.3s linear forwards;
}
.tips .newnote {
    font-family: PingFangSC-Semibold;
    font-size: 0.32rem;
    color: #010101;
    width: 100%;
    height: 1.48rem;
    line-height: 1.48rem;
    text-align: center;
    display: block;
}
.tips .newsdiv {
    width: 100%;
    height: 1.08rem;
    line-height: 1.08rem;
    border-top: 1px solid #F6F6F6;
    position:absolute;
    bottom: 0;
}
.tips .btncancle {
    font-family: PingFangSC-Regular;
    font-size: 0.32rem;
    color: #013365;
    display: block;
    float: left;
    width: 50%;
    text-align: center;
}
.tips .btngo {
    font-family: PingFangSC-Regular;
    font-size: 0.32rem;
    color: #E9B20A;
    display: block;
    float: left;
    width: 50%;
    text-align: center;
    right: 0;
}
.rbtn1{
    background:url("../images/rbtn1.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	right:0;
    top: 1.82rem;
    width: 0.48rem;
    height: 0.8rem;
    z-index: 99;
    display: none;
}
.rbtn2{
    background:url("../images/rbtn2.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	right:0;
    top: 3.6rem;
    width: 0.48rem;
    height: 0.8rem;
    z-index: 99;
    display: none;
}
.rbtn3{
    background:url("../images/rbtn3.png?0527") no-repeat;
	background-size:100% 100%;
	position:absolute;
	right:0;
    top: 2.82rem;
    width: 0.48rem;
    height: 1.57rem;
    z-index: 99;
    display: none;
}
.shouye{
    background: url("../images/shouye.png") no-repeat;
    background-size: 100%;
    position:absolute;
    width: 0.92rem;
    height: 0.65rem;
    right: 0;
    top: 13.6rem;

}
.logo{
    background: url('../images/logo.png') no-repeat;
    background-size: 100%;
	left:1.4rem;
	top:14.37rem;
	width:4.55rem;
	height:0.38rem;
    position: absolute;
}
.nav1{
    background: url("../images/btn1.png") no-repeat;
    background-size: 100%;
    position: absolute;
    width: 2.05rem;
    height: 0.72rem;
    left: 0.9rem;
    top:5.43rem;
}
.nav2{
    background: url("../images/btn2.png") no-repeat;
    background-size: 100%;
    position:absolute;
	left:3.23rem;
	top:5.43rem;
	width:3.35rem;
	height:0.72rem;
}
.nav3{
    background: url("../images/btn3.png") no-repeat;
    background-size: 100%;
    position:absolute;
	left:0.41rem;
	top:6.33rem;
	width:2.05rem;
	height:0.72rem;
}
.nav4{
    background: url("../images/btn4.png") no-repeat;
    background-size: 100%;
    position:absolute;
	left:2.75rem;
	top:6.33rem;
	width:2.05rem;
	height:0.72rem;
}
.nav5{
    background: url("../images/btn5.png") no-repeat;
    background-size: 100%;
    position:absolute;
	left:5.09rem;
	top:6.33rem;
	width:2.05rem;
	height:0.72rem;
}
.nav1.actived{
    background: url("../images/btn1_active.png") no-repeat;
    background-size: 100%; 
}
.nav2.actived{
    background: url("../images/btn2_active.png") no-repeat;
    background-size: 100%; 
}
.nav3.actived{
    background: url("../images/btn3_active.png") no-repeat;
    background-size: 100%; 
}
.nav4.actived{
    background: url("../images/btn4_active.png") no-repeat;
    background-size: 100%; 
}
.nav5.actived{
    background: url("../images/btn5_active.png") no-repeat;
    background-size: 100%; 
}
.swiper1{
	width: 100%;/* 7.5rem; */
    height: 5.8rem;
    position: relative;
    margin-top: 7.46rem;
}
.swiper1 .swiper-slide {
    width: 4.7rem;
    height: 5.8rem;
	overflow: hidden;
    top: 0;
    left: 0;
	/* margin-top:0.72rem; */
}

.swiper1 .swiper-slide-active .img1{
    width: 4.7rem;
    height: 5.8rem;
    position:absolute;
    left: 0;
    top: 0;
}
.swiper1 .img1{
    width: 4.7rem;
    height: 5.8rem;
    position:absolute;
    left: 0;
    top: 0;
}
.swiper1 .swiper-slide-active .imgs .kuang{
    width: 4.07rem;
    height: 6.61rem;
    position:absolute;
    left: 0;
    top: 0;
    z-index: 999;
}
.swiper1 .imgs .kuang{
    width: 100%;
    height: 100%;
    position:absolute;
    left: 0;
    top: 0;
    z-index: 999;
}



.page2{
    background: url('../images/bg2.jpg') no-repeat;
    background-size: 100%;
    /*background: rgba(0,0,0,0.5);*/
    position: absolute;
    width: 100%;
    height: 67.72rem;
    top: 0;
    left: 0;
	overflow-y:scroll;
    display: none;
    z-index: 99;
}
.zanwu{
    font-size: 0.5rem;
    color: #efd34d;
    top: 40%;
    width: 100%;
    text-align: center;
    z-index: 999;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.page2.actived{
    display: block;
}
.btn1{
	background:url("../images/btn.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:3.85rem;
	top:4.67rem;
	width:2.91rem;
	height:0.65rem;
}
.btn2{
	background:url("../images/btn.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:3.82rem;
	top:8.95rem;
	width:2.91rem;
	height:0.65rem;
}
.btn3{
	background:url("../images/btn.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:3.85rem;
	top:13.27rem;
	width:2.88rem;
	height:0.64rem;
}
.back{
	background:url("../images/back.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:0.56rem;
	top:2.26rem;
	width:0.31rem;
	height:0.57rem;
}

.h2{
    background: url('../images/p2_2.png') no-repeat;
    background-size: 100%;
    width: 6.71rem;
    height: 1.4rem;
    position: absolute;
    top: 0.8rem;
    left: 0.35rem;
}

.notewrap{
    background: url('../images/maskbg.png') center no-repeat;
    background-size: 100%;
    width: 7.32rem;
    height: 3.76rem;
    position: absolute;
    top: 8.8rem;
    left: 0.15rem;
    display: block;
    opacity: 0;
    -webkit-transform: translate(100%,0);
    transform: translate(100%,0);
}
.notewrap span{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.share{
    background: url(../images/share.png) no-repeat;
    background-size: 100%;
    width: 0.7rem;
    height: 0.7rem;
    right: 0.4rem;
    top: 2.16rem;
}

.latestbtn{
    top: 4.5rem;
    left: 4.4rem;
    width: 1.9rem;
    height: 0.6rem;
    display: block;
    position: absolute;
}


.sp{
    display: none;
}


.page3{
    background: url('../images/bg3.jpg') center no-repeat;
    background-size: 100%;
    /*background: rgba(0,0,0,0.5);*/
    position: absolute;
    width: 100%;
    height: 74.83rem;
    top: 0;
    left: 0;
    display: none;
	overflow:scroll;
    z-index: 99;
}
.page3.actived{
    display:block;
}
.page4{
    background: url('../images/bg4.jpg') no-repeat;
    background-size: 100%;
    /*background: rgba(0,0,0,0.5);*/
    position: absolute;
    width: 100%;
    height: 76.6rem;
    top: 0;
    left: 0;
    display: none;
	overflow:scroll;
    z-index: 99;
}
.page4.actived{
    display:block;
}
.success{
	background: url('../images/success.png') no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:1.22rem;
	top:5.09rem;
	width:5.06rem;
	height:3.94rem;
}

  @-webkit-keyframes rotateani {
    0% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes rotateani {
    0% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

.progress {
    width: 3.6rem;
    height: 0.3rem;
    /*border: 3px solid #f2a523;*/
    position: absolute;
    left: 1.9rem;
    top: 5.5rem;
    right: auto;
    /* bottom: 0; */
    margin: auto;
    border-radius: 0.2rem;
}
.progressbar {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background-color: #66a482;
    transition: width ease-in 200ms;
    -webkit-transition: width ease-in 200ms;
    border-radius: 0.2rem;
}
.percent {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 30px;
    font-size: 0.3rem;
    color: #4b64a4;
    position: absolute;
    text-align: center;
    top: 0.5rem;
    font-weight: bold;
    left:1.9rem;
}

span{
  position: absolute;
}


.secbg2,.secbg22{
    position: absolute;width: 100%;top: 0;left: 0;
}
.loadww{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    background: #f0fdff;
}
.playbtn{
    background: url('../images/playbtn.png') center no-repeat;background-size: contain;
    width: 2.15rem;
    height: 0.97rem;
    position: absolute;
    top: 10rem;
    left: 2.8rem;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    animation : show 1s 1s ease-in-out alternate infinite;
    -webkit-animation : show 1s 1s ease-in-out alternate infinite;
}

.videobox{
    position: absolute;
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.6);
    top: 0;
    left: 0;
    z-index: 99999;
    display: none;
}
.videos{
    background: url("../images/videobg.png") no-repeat;
    background-size: 100%;
    position: absolute;
    width: 6.9rem;
    height: 8.28rem;
    left: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.video{
    background: #000;
    position:absolute;
    left: 0.39rem;
    top: 0.77rem;
    width:6.14rem;
	height:3.46rem;
}
#video{
    width:6.14rem;
	height:3.46rem;
    position:absolute;
    left: 0;
    top: 0;
    object-fit: fill;
    display: none;
}
.videobg{
	width:100%;
	height:100%;
}
.vbg{
	width: 100%;
    height: 100%;	
}
.playbtn2{
	width: 0.78rem;
    height: 0.78rem;
    position: absolute;
	left:0.37rem;
	top:2.54rem;
}
.vtitle{
    position: absolute;
    font-size: 0.36rem;
    color: #ffd143;
    left: 0.18rem;
    top: 5.33rem;
    width: 6.5rem;
    height: 1.17rem;
    overflow: hidden;
    line-height: 0.4rem;
}
.close{
	position:absolute;
	left:3.05rem;
	top:7.48rem;
	width:0.8rem;
	height:0.8rem;
}
.secbg22{opacity: 0;}
.section1.actived .secbg22{animation : show3 3s ease-in-out forwards;-webkit-animation : show3 3s ease-in-out forwards;}

  @-webkit-keyframes show3 {
    100%{
      opacity: 1;
    }
  }
  @keyframes show3 {
    100%{
      opacity:1;
    }
  }

.opera{position: absolute;width:5.46rem;height: 1.27rem;top:9rem;left:1rem;background: url('../images/1p2.png') center no-repeat;background-size: contain;/*-webkit-transform: translate(0,1rem);transform: translate(0,1rem);*/opacity: 0;}
.gobtn{
    background: url('../images/gobtn.png') center no-repeat;background-size: contain;
   	left:2.66rem;
	top:10.01rem;
	width:2.18rem;
	height:2.23rem;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    animation: show 0.5s ease-in-out alternate infinite;
    -webkit-animation: show 0.5s ease-in-out alternate  infinite;
}

.sharewrap{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 9999999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
    background: rgba(0,0,0,0.5);
    /*background: url('../images/ad.jpg') center no-repeat;background-size: 100% 100%;*/
}
.sharewrap span{
    background: url('../images/sharebg.png') center no-repeat;background-size: 100%;
    position: absolute;
    width: 3.15rem;
    height: 1.49rem;
    right: 0.4rem;
    top: 0.5rem;
    /*width:100%;*/
    /*height: 1rem;*/
    /*font-size: 0.3rem;*/
    /*color: #fff;*/
    /*top: 14.2rem;*/
    /*text-align: center;*/
    opacity: 0;
    -webkit-animation: show 1s ease-in-out infinite;
    animation: show 1s ease-in-out infinite;
}
.sharewrap span.againbtn{
    left: 3.7rem;
}
.sharenote{
    background: rgba(0,0,0,0.5);
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;    display: none;
    z-index: 9999999;
}
/*.share{
    position: absolute;width: 5.51rem;height: 2.64rem;background: url('../images/share.png') center no-repeat;background-size: 100%;
    top: 0.2rem;right:0.3rem;
    opacity:0;
    -webkit-animation: show 2s ease-in-out infinite;animation: show 2s ease-in-out infinite;
}*/

.sharewrap img{
    width:100%;}

.morebtn.shown,.sharewrap.shown{ 
  -webkit-animation: show 0.5s ease-in-out forwards;animation: show 0.5s ease-in-out forwards;
}






/* .swiper-slide{opacity: 0;} */
.bg{width: 100%;position: absolute;top: 0;left: 0;}




.secwrap{width: 100%;height: 100%;}

.sec2bg{
  background: url('../images/bg2-2.png') center no-repeat;background-size: 100%;position: absolute;width: 100%;height: 14.48rem;top: 50%;margin-top:-7.24rem;opacity: 0;-webkit-transform: scale(1.2);transform: scale(1.2);
}

.jt2{
  position: absolute;width: 2.58rem;height: 2.66rem;top: 1.3rem;left: 2.1rem;background: url('../images/jt2.gif') center no-repeat;background-size: 100%;z-index: 10;
}

.vdcon{
  position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 9999;opacity: 0; -webkit-transform: translate(0,-100%);transform: translate(0,-100%);
}
.vdcon.actived{
  -webkit-animation: show 0.8s ease-in-out alternate forwards;animation: show 0.8s ease-in-out alternate forwards;
}



.vdwrap{position: absolute;width: 100%;height: 4.27rem;left: 0;top: 3.8rem;background: #000 url('../images/2p4.png') top center no-repeat;background-size: 100%;    z-index: 99;display: none;}
.vdwrap.sp{width: 4.6rem;
    height: 8rem;
    left: 1.3rem;
    top: 2rem;
    background: #000 url(../images/2p4.png) top center no-repeat;
    background-size: 100% 100%;}
.vdwrap.sp .s2vd{
    width: 4.4rem;
    height: 7.7rem;
    top: 0.18rem;
    left: 0.12rem;
}
.closebtn,.clsbtn2{
    width: 0.68rem;
    height: 0.68rem;
    top: 0.2rem;
    right: 0.2rem;
}
.closebtn2{background: url('../images/close.png') top center no-repeat;background-size: 100%;width: 0.68rem;height: 0.68rem;/*top: 2.3rem;*/
top: 1.3rem;
right: 0.8rem;z-index: 99; }

.pullinbtn{
      background: url(../images/2p8.png) top center no-repeat;
    background-size: 100%;
    width: 3.88rem;
    height: 0.99rem;
    top: 10.5rem;
    left: 1.8rem;
    z-index: 99;
    display: none;
}
.pullinbtn.actived{
      -webkit-animation: bounceIn 2s 0.8s ease-in-out forwards;
    animation: bounceIn 2s 0.8s ease-in-out forwards;
    display: block;
}

img[src=""],img:not([src]){opacity:0;}

.vdnote{
  position: absolute;left: 0.5rem;top: 1.7rem;width: 6.29rem;height: 8.11rem;
}
.s2vd,.s2pic{
width: 7.2rem;
    height: 4rem;
    /*background: #000;*/
    position: absolute;
    left: 0.15rem;
    top: 0.15rem;
}




.p3img{
    width: 100%;
}
.btnswrap{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    display: none;
    z-index: 9999999;
}
.vdbtns{
    background: url('../images/p2_11.png') top center no-repeat;background-size: 100%;
    position: absolute;
    width:7.25rem;
    height: 7.08rem;
    top: 4rem;
    left: 0.125rem;
    z-index: 999999;
}

.nextbtn{
    position: absolute;
    width: 3.3rem;
    height: 1rem;
    top: 5.4rem;
    left: 3.7rem;
}

.imggif{
    display: none;
    position: absolute;
    width: 100%;
    top:0;
}


.weibo{
    background: url('../images/wbbtn.png') center no-repeat;
    background-size: 100%;
    width:4.93rem;height: 0.87rem;
    position: absolute;
    top: 12.2rem;
    left: 1.45rem;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    animation: show 1s 1s ease-in-out alternate infinite;
    -webkit-animation: show 1s 1s ease-in-out alternate infinite;
}

.andriodvd{
  background: url('../images/bg222.jpg') center no-repeat;
    background-size: 100%;
    width:100%;height: 100%;
    position: absolute;
    top:0;
    left:0;
    z-index:9999999;
    display: none;
}

.gif {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    display: none;
}
.gif img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
.gif span{
    position: absolute;
    width: 2.94rem;
    height: 0.97rem;
    position: absolute;
    left:2.4rem;
}

.skipbtn{
/*    background: url('../images/skip.png') center no-repeat;
    background-size: contain;*/
    position: absolute;
    width: 1.13rem;
    height: 0.53rem;
    top: 1.5rem;
    right: 0.5rem;
    font-size: 0.3rem;
    text-align: center;
    text-decoration: underline;
    z-index:999999;
    color: rgba(218, 218, 218, 0.85);
    /*display: none;*/
}
.logobg{
    background: url('../images/logo.png') center no-repeat;
    background-size: contain;
    position: absolute;
    width: 5.08rem;
    height: 0.93rem;
    bottom: 0.3rem;
    left: 1.25rem;
}

.jumpbtn{
    background: url('../images/b0.png') center no-repeat;
    background-size: 100%;
    position: absolute;
    width: 2.15rem;
    height: 0.97rem;
    top: 9rem;
    left: 2.6rem;
    font-size: 0.3rem;
    text-align: center;
    text-decoration: underline;
    z-index:999999;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    animation: show 1s 1s ease-in-out alternate infinite;
    -webkit-animation: show 1s 1s ease-in-out alternate infinite;
    display: none;
}
.vdbox3{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 99999999;
}

.sltwrap{
    background: url('../images/3-1.png') center no-repeat;background-size: 100%;width: 5.68rem;
    height: 2.47rem;
    top: 5rem;
    left: 0.9rem;
    position: absolute;
    z-index: 99999999;
    opacity: 0;
    transform: translate(0,-1.5rem);
    -webkit-transform: translate(0,-1.5rem);
}

.sltwrap.actived{
    -webkit-animation: show 1s ease-in-out forwards;animation: show 1s ease-in-out forwards;

}
.sltwrap span{
    width:100%;height: 1.1rem;
    margin-bottom:0.2rem;
    position: initial;
    display: block;
}




@-webkit-keyframes moveani {
    0%{
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }
    30%{
        -webkit-transform: translate(-13rem,0);
        transform: translate(-13rem,0);
    }
    70%{
        -webkit-transform: translate(-13rem,0);
        transform: translate(-13rem,0);
    }
    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }
}
@keyframes moveani {
    0%{
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }
    30%{
        -webkit-transform: translate(-13rem,0);
        transform: translate(-13rem,0);
    }
    70%{
        -webkit-transform: translate(-13rem,0);
        transform: translate(-13rem,0);
    }
    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }
}

@-webkit-keyframes moveani2 {
    30%{
        -webkit-transform: translate(6.5rem,0);
        transform:translate(6.5rem,0);
    }
    70%{
        -webkit-transform: translate(6.5rem,0);
        transform:translate(6.5rem,0);
    }
    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}
@keyframes moveani2 {
    30%{
        -webkit-transform: translate(6.5rem,0);
        transform:translate(6.5rem,0);
    }
    70%{
        -webkit-transform: translate(6.5rem,0);
        transform:translate(6.5rem,0);
    }
    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}




  @-webkit-keyframes show {
    100% {
      -webkit-transform: translate(0, 0) scale(1) rotate(0) skew(0);
      transform: translate(0, 0) scale(1) rotate(0) skew(0);
      opacity: 1;
    }
  }
  @keyframes show {
    100% {
      -webkit-transform: translate(0, 0) scale(1) rotate(0) skew(0);
      transform: translate(0, 0) scale(1) rotate(0) skew(0);
      opacity: 1;
    }
  }

  /*iPhoneX的适配*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    /* .handwrap{
        
    } */
}

  /*iPhoneXS XR的适配*/
/*body.xx .handwrap{top: 10rem;}*/



/* @media screen and (min-device-height:720px) and (min-device-width: 444px) {
    .handwrap{
        
    }

} */


@-webkit-keyframes bounceIn{
    0%,20%,40%,60%,80%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
    0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
    20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
    40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
    60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
    80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
    100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes bounceIn{
    0%,20%,40%,60%,80%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
    0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
    20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
    40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
    60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
    80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
    100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}
@-webkit-keyframes zoomIn{
	0%{
		opacity:0;
		-webkit-transform:scale3d(.3,.3,.3);
		transform:scale3d(.3,.3,.3)
	}
	100%{
		opacity:1
	}
}
@keyframes zoomIn{
	0%{
		opacity:0;
		-webkit-transform:scale3d(.3,.3,.3);
		transform:scale3d(.3,.3,.3)
	}
	100%{
		opacity:1
	}
}