/*@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;

}
body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 100px;
    color: #000;
    margin: 0;
    padding: 0;
	top:0;
    /*top: 50%;
    transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);*/
    /*height: 16.24rem;*/
    height: 100%;
    position: absolute;
    left: 0;
    width: 100%;
}

.swiper-pagination-bullet {
    background: #fff;
}

.re{position: relative;}
.ra{position: absolute;}
.rf{position: fixed;}
.sec {
    overflow: hidden;
    -webkit-transition: all 1s;
    transition: all 1s;
    display: none;
    position: absolute;
    width:100%;
    height: 14.48rem;
    top:50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
.sec.actived{
    display: block;
}
/*.loading{width:100%;height:100%;position: absolute;z-index: 999;    background: #f0fdff;}
.loading img{     width: 100%;
    left: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
  }*/

.loadgif{
  position: absolute;
    width: 3.19rem;
    height: 1.29rem;
    top: 1.5rem;
    left: 2.1rem;
}
.loadww{
    background: #f0fdff;
    background-size: contain;
    position: absolute;
    height: 16.24rem;
    width: 100%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    left: 0;
    z-index: 99999;
}
.progress {
    width: 3.6rem;
    height: 0.3rem;
    /* border: 3px solid #f2a523; */
    position: absolute;
    left: 0.1rem;
    top: 4.8rem;
    right: auto;
    /* bottom: 0; */
    margin: auto;
    border-radius: 0.2rem;
}
.percent {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 30px;
    font-size: 0.3rem;
    color: #3368e7;
    position: absolute;
    text-align: center;
    top: 2rem;
    font-weight: bold;
    left: 3.6rem;
}
.audwrap{
	background: url('../images/music2.png?2805') center no-repeat;
	background-size: 100%; 
	position: absolute;	
	    right: 0.22rem;
    top: 0.68rem;
	width:0.6rem;
	height:0.6rem;
	z-index: 999999;
}
.audwrap img{width: 100%;-webkit-animation: show 0.8s linear infinite;animation: show 0.8s linear infinite;opacity: 0;}
.audwrap.off{
	background: url('../images/music-off.png') center no-repeat;background-size: 100%;
}
.audwrap.on{
    -webkit-animation: rotateani 2s linear forwards infinite;animation: rotateani 2s linear forwards infinite;
}

@-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);
    }
}
.part2{
	width:100%;
	height:16.24rem;
	position:absolute;
	left:0;
	z-index:9999;
	overflow:hidden;
	top:50%;
	transform:translate(0,-50%);
	-webkit-transform:translate(0,-50%);
	display:none;
}
.part2.actived{
	display:block;
}

.p2img1{
	background:url(../images/p2img1.png) no-repeat;
	background-size:100%;
	position:absolute;
	left:0.86rem;
	top:1.58rem;
	width:5.9rem;
	height:2.42rem;
	opacity:0;
	-webkit-transform: translate(0,-2rem);
    transform: translate(0,-2rem);
}
.p2img2{
	background:url("../images/p2img2.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:0.73rem;
	top:4.77rem;
	width:6.32rem;
	height:7.57rem;
	opacity:0;
	-webkit-transform: translate(0,2rem);
    transform: translate(0,2rem);
}
.p2img3{
	background:url("../images/p2img3.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	width:2.78rem;
	height:1.14rem;
	top: 12.5rem;
    left: 1.1rem;
}
.p2img4{
	background:url("../images/p2img4.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	width:2.79rem;
	height:1.14rem;
	top: 12.32rem;
    left: 4rem;
}
.part2 .p2img1,.part2 .p2img2{
	
    animation: show 1s ease forwards;
    -webkit-animation: show 1s ease forwards;
}
.p3top{
	background:url("../images/p3top.png") no-repeat;
	background-size:100% 100%;
	width:7.5rem;
	height:4.26rem;
	position: absolute;
	top:0;
	left:0;
}
.p3img1{
	background:url("../images/p3img1.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:0.55rem;
	top:1.18rem;
	width:6.62rem;
	height:2.58rem;

}
.p5img1{
	background:url("../images/p3img2.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:0.55rem;
	top:1.18rem;
	width:6.62rem;
	height:2.58rem;

}
.upload{
	background:url("../images/upload.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 3.9rem;
    top: 3.75rem;
    width: 3.19rem;
    height: 0.86rem;
    z-index: 999;
}
/*span{
    position: absolute;
}*/

.part3{
	width:100%;
	height:16.24rem;
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	overflow:hidden;
	display:none;
}
.part3.actived{
	display:block;
}
.part5{
	width:100%;
	height:16.24rem;
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	overflow:hidden;
	display:none;
}
.part5.actived{
	display:block;
}

.p3ul{
    width: 100%;
    height: 8.65rem;
    position: absolute;
    top: 4.8rem;
    left: 0;
    overflow: scroll;
}
.p3li{
	background:url("../images/libg.png") no-repeat;
	background-size:100%;
	position:relative;
	float:left;
	width:3.51rem;
	height:7.02rem;
	margin-right:0.21rem;
	margin-bottom:0.2rem;
}
.p3li:nth-child(odd){
	margin-left:0.135rem;
}
.p3li:nth-child(even){
	margin-right:0;
}
.p3img{
	width:3.37rem;
	height:6rem;
	position:absolute;
	top:0.07rem;
	left:0.07rem;
}
.p3name{
	font-size:0.24rem;
	color:#85403f;
	position: absolute;
    top: 6.3rem;
        left: 0.19rem;
    width: 3.15rem;
    overflow: hidden;
	max-height: 0.6rem;
    line-height: 0.3rem;
}
.p5ul{
    width: 100%;
    height: 8.65rem;
    position: absolute;
    top: 4.8rem;
    left: 0;
    overflow: scroll;
}
.p5li{
	background:url("../images/libg.png") no-repeat;
	background-size:100%;
	position:relative;
	float:left;
	width:3.51rem;
	height:7.02rem;
	margin-right:0.21rem;
	margin-bottom:0.2rem;
}
.p5li:nth-child(odd){
	margin-left:0.135rem;
}
.p5li:nth-child(even){
	margin-right:0;
}
.p5img{
	width:3.37rem;
	height:6rem;
	position:absolute;
	top:0.07rem;
	left:0.07rem;
}
.p5name{
	font-size:0.24rem;
	color:#85403f;
	position: absolute;
    top: 6.3rem;
        left: 0.19rem;
    width: 3.15rem;
    overflow: hidden;
	max-height: 0.6rem;
    line-height: 0.3rem;
}
.author{
	font-size:0.16rem;
	color:#85403f;
	position: absolute;
    top: 6.55rem;
    left: 0.2rem;
}
.flowers{
	width: 0.46rem;
    height: 0.49rem;
    position: absolute;
    top: 0;
    left: 0.33rem;
}
.flower1{
	background:url("../images/flower2.png") no-repeat;
	background-size:100%;
	width:0.46rem;
	height:0.49rem;
	position:absolute;
	left:0;
	top:0;
	z-index:99999;
}
.flower2{
	background:url("../images/flower2.png?1305") no-repeat;
	background-size:100%;
	width:0.46rem;
	height:0.49rem;
	position:absolute;
	left:0;
	top:0;
	z-index:999999;
}
.flower1.actived{
	animation: show4 1.5s ease forwards;
    -webkit-animation: show4 1.5s ease forwards;
}

.count{
	font-size: 0.26rem;
    position: relative;
    top: 0.1rem;
    margin-left: 0;
    color: red;
    opacity: 1;
    display: none;
}
.count.actived{
	display:initial;
	animation: show2 1.5s ease forwards;
    -webkit-animation: show2 1.5s ease forwards;
}
@-webkit-keyframes show4 {
	0{
		opacity:1;
		top:0;
	}
	50%{
		opacity:1;
	}
    100%{
		top:-0.5rem;
        opacity: 0;
    }
}
@keyframes show4 {
	0{
		opacity:1;
		top:0;
	}
	50%{
		opacity:1;
	}
    100%{
		top:-0.5rem;
        opacity: 0;
    }
}
@-webkit-keyframes show2 {
	0{
		opacity:1;
	}
    100%{
        opacity: 0;
    }
}
@keyframes show2 {
	0{
		opacity:1;
	}
    100%{
        opacity:0;
    }
}
.votes{
    font-size: 0.26rem;
    color: #85403f;
    font-weight: bold;
    position: relative;
    top: 0.15rem;
    margin-left: 0.9rem;
    /* width: 0.8rem; */
    overflow: hidden;
    text-align: left;
	display:inline-block;
}

.part4{
	width:100%;
	height:16.24rem;
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	overflow:hidden;
	display:none;
}
.part4.actived{
	display:block;
}
.part6{
	width:100%;
	height:16.24rem;
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	overflow:hidden;
	display:none;
}
.part6.actived{
	display:block;
}
.p4img1{
	background:url("../images/p4img1.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:1.07rem;
	top:0.67rem;
	width:5.34rem;
	height:2.08rem;
}
.back{
	background:url("../images/back.png?1250") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:2.28rem;
	top:2.46rem;
	width:2.97rem;
	height:0.76rem;
}
.back2{
	background:url("../images/back.png?1250") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:2.28rem;
	top:2.46rem;
	width:2.97rem;
	height:0.76rem;
}
.back3{
	background:url("../images/back3.png") no-repeat;
	background-size: 100% 100%;
    width: 3.19rem;
    height: 0.86rem;
    position: absolute;
    top: 3.75rem;
    left: 0.4rem;
}
.back4{
	background:url("../images/back3.png") no-repeat;
	background-size: 100% 100%;
    width: 3.19rem;
    height: 0.86rem;
    position: absolute;
    top: 3.75rem;
    left: 0.4rem;
}
.sharebtn{
    background: url(../images/sharebtn.png?1257) center no-repeat;
    background-size: 100%;
    position: relative;
    margin-top: 0.2rem;
    margin-left: 1.76rem;
    /* left: 6.7rem; */
    /* top: 1.15rem; */
    width: 2.74rem;
    height: 0.73rem;
    z-index: 99999;
	margin-bottom:0.3rem;
}
.sharebtn2{
    background: url(../images/sharebtn.png?1257) center no-repeat;
    background-size: 100%;
    position: relative;
    margin-top: 0.2rem;
    margin-left: 1.76rem;
    /* left: 6.7rem; */
    /* top: 1.15rem; */
    width: 2.74rem;
    height: 0.73rem;
    z-index: 99999;
	margin-bottom:0.3rem;
}
.p4cont{
	position:absolute;
	width:6.2rem;
	height:10rem;
	left:0.65rem;
	top:3.47rem;
	overflow-y:scroll;
	color:#af3e3c;
	font-size:0.32rem;
}
.p6cont{
	position:absolute;
	width:6.2rem;
	height:10rem;
	left:0.65rem;
	top:3.47rem;
	overflow-y:scroll;
	color:#af3e3c;
	font-size:0.32rem;
}
#video{
    object-fit: fill;
    position: relative;
    top: 0;
    left: 0.25rem;
    width: 5.71rem;
    height: 10.15rem;
    z-index: 999;
}
#video2{
    object-fit: fill;
    position: relative;
    top: 0;
    left: 0.25rem;
    width: 5.71rem;
    height: 10.15rem;
    z-index: 999;
}
.vote{
	position: relative;
	margin-top:0.3rem;
	width:100%;
	height:0.5rem;
}
.p4name{
	position: relative;
    /* top: 10.3rem; */
    width: 5.71rem;
    left: 0.25rem;
    margin-top: 0.3rem;
}
.p4name span{
	color:#631210;
}
.p6name{
	position: relative;
    /* top: 10.3rem; */
    width: 5.71rem;
    left: 0.25rem;
    margin-top: 0.3rem;
}
.p6name span{
	color:#631210;
}
.author2{
	position: relative;
    /* top: 10.3rem; */
    width: 5.71rem;
    left: 0.25rem;
    margin-top: 0.1rem;	
}
.p4intro{
	position: relative;
    /* top: 10.3rem; */
    width: 5.71rem;
    left: 0.25rem;
    margin-top: 0.15rem;	
}
.p4intro span{
	color:#631210;
}


.msgnote {
    background: rgba(0,0,0,0.6);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    display: none;
}
.msgnote11{
     background: url('../images/msg.png') center no-repeat;background-size: 100%;
     width: 5.55rem;
     height: 2.34rem;
     position: absolute;
     top: 5.9rem;
     left:0.975rem;
     z-index: 9999;
 }
.msgnote111{
    background: url('../images/msg.png') center no-repeat;background-size: 100%;
}

.msgnote p{
    font-size: 0.4rem;
    color: #f0d278;
    position: absolute;
    width: 100%;
    top: 0.9rem;
    text-align: center;
}
.btncls{
	width: 0.4rem;
    height: 0.4rem;
    position: absolute;
    top: 0.1rem;
    left: 5rem;
}
.btncls2{
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    /*top: 0.7rem;*/
    /*left: 6.4rem;*/
    /*background: red;*/
    top: 7.1rem;
    left: 3.1rem;
    background: rgba(0,0,0,0.8);
    border-radius: 50%;
    text-align: center;
    font-size: 0.5rem;
    line-height: 0.8rem;
    color: #fff;
}
.secbg2,.secbg22{position: absolute;width: 100%;top: 50%;left: 0;
    -webkit-transform:translate(0,-50%);
    transform:translate(0,-50%);
}
.secbg22{opacity: 0;}
.section1.actived .secbg22{animation : show3 3s ease-in-out forwards;-webkit-animation : show3 3s ease-in-out forwards;}

.secbg3{
    width:100%;
}

@-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) bottom right no-repeat;
    background-size: 1.1rem 0.4rem;
    top: 11rem;
    left: 2.6rem;
    width: 1.6rem;
    height: 1.6rem;
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    animation: show 1s ease-in-out infinite;
    -webkit-animation: show 1s ease-in-out infinite;
}
.section1.actived .opera{animation : show 0.5s 5s linear forwards;-webkit-animation : show 0.5s 5s linear forwards;}


.section2{position: absolute;width: 100%; height: 100%;left: 0;top: 0;overflow-y: auto;display: none;-webkit-overflow-scrolling: touch;}
.secbg3{width: 100%;}
.picscroll{position: absolute;width: 4.95rem;height: 4.95rem;left: 1.26rem;top: 2.88rem;}
.picscroll span{    width: 33.333%;
    height: 33.333%;
    /* background: red; */
    position: initial;
    display: block;
    float: left;}





.secwrap2{
    /*      position: absolute;
        width: 100%;
        top: 50%;
        left: 0;
        -webkit-transform: translate(0,-50%);
        transform: translate(0,-50%);*/
}
.sharewrap{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 9999999;
    overflow: hidden;
    display: none;
    background: rgba(0,0,0,0.7);
}


.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-container-vertical>.swiper-scrollbar {
    position: absolute;
    right: 1px;
    top: 0;
    z-index: 50;
    width: 3px;
    height: 90%;
}



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

.s2wrap{position: absolute;width: 7.02rem;height: 8.47rem;background: url('../images/1p3.png') center no-repeat;background-size: 100%;top: 0;left: 0.2rem;
    -webkit-transform: translate(0,-100%);transform: translate(0,-100%);opacity: 0;}
.s2note{
    position: absolute;width:6.36rem;height: 1.73rem;background: url('../images/2-1.png') center no-repeat;background-size: 100%;
    top: 1.3rem;left:0.6rem;
    opacity: 0;-webkit-transform: translate(0,-0.3rem);transform: translate(0,-0.3rem);
}
.sec4 .s2note{
    position: absolute;width: 4.15rem;height: 3.52rem;background: url('../images/3p1.png') center no-repeat;background-size: 100%;top: 4.2rem;left:1.7rem;
}
.s2ple{
    position: absolute;width: 2.97rem;height: 6.13rem;
    background: url('../images/1p2.png') center no-repeat;background-size: 100%;bottom: 0;left:0;
    -webkit-transform: translate(-100%,0);transform: translate(-100%,0);opacity: 0;
}
.s2guide{
    position: absolute;width: 3.41rem;height: 3.55rem;background: url('../images/1p1.png') center no-repeat;background-size: 100%;bottom: 0;right:0.2rem;
    -webkit-transform: rotate(90deg);opacity: 0;
    transform: rotate(90deg);
}
.swiper-slide-active .s2note{-webkit-animation: show 1s 0.3s ease-in-out forwards;animation: show 1s 0.3s ease-in-out forwards;}


.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);
}
.s2title{
    background: url('../images/2p1.png') center no-repeat;background-size: 100%;position: absolute;width: 5.1rem;height: 2.66rem;top: 1.85rem;left:1.15rem;-webkit-transform: translate(0,2rem);transform: translate(0,2rem);opacity: 0;
}
.s2wap{ position: absolute;width: 6.34rem;height:7.87rem;top: 4.3rem;left: 0.75rem;
    background: url('../images/tian.png') center no-repeat;background-size: 100%;
}

.tttwrap{
    position: absolute;
    top: 3.4rem;
    left: 0.6rem;
    width: 6.4rem;
}
.ttt1{
    width: 4.27rem;height:1.58rem;
    background: url('../images/2-2-1.png') center no-repeat;background-size: 100%;
    position: relative;
    display: block;
    margin: 0 auto;
}
.ttt2{
    position: relative;width: 4.15rem;
    height: 0.43rem;
    background: url('../images/2-2-2.png') center no-repeat;background-size: 100%;
    display: block;
    margin: 0 auto;
}
.plces{
    margin: 0.2rem auto;
    height: 1.7rem;
}
.plces a{
    font-size: 0.38rem;
    color: #717d08;
    display: inline-block;
    height: 0.5rem;
    line-height: 0.5rem;
    padding: 0.1rem 0;
    position: relative;
    font-weight: bold;
    float: left;
    margin: 0.1rem 0.2rem 0;
    opacity: 0;
    -webkit-transform: translate(0.2rem,0);
    transform: translate(0.2rem,0);
}
.swiper-slide-active .plces a:nth-child(1){-webkit-animation: show 1s ease-in-out forwards;animation: show 1s ease-in-out forwards;}
.swiper-slide-active .plces a:nth-child(2){-webkit-animation: show 1s 0.2s ease-in-out forwards;animation: show 1s 0.2s ease-in-out forwards;}
.swiper-slide-active .plces a:nth-child(3){-webkit-animation: show 1s 0.4s ease-in-out forwards;animation: show 1s 0.4s ease-in-out forwards;}
.swiper-slide-active .plces a:nth-child(4){-webkit-animation: show 1s 0.6s ease-in-out forwards;animation: show 1s 0.6s ease-in-out forwards;}
.swiper-slide-active .plces a:nth-child(5){-webkit-animation: show 1s 0.8s ease-in-out forwards;animation: show 1s 0.8s ease-in-out forwards;}
.swiper-slide-active .plces a:nth-child(6){-webkit-animation: show 1s 1s ease-in-out forwards;animation: show 1s 1s ease-in-out forwards;}
.swiper-slide-active .plces a:nth-child(7){-webkit-animation: show 1s 1.2s ease-in-out forwards;animation: show 1s 1.2s ease-in-out forwards;}
.swiper-slide-active .plces a:nth-child(8){-webkit-animation: show 1s 1.4s ease-in-out forwards;animation: show 1s 1.4s ease-in-out forwards;}
.rltwrap{
    width: 100%;
    text-align: center;
    height: 1rem;
    line-height: 1rem;
    color: #fd5b14;
    font-size: 0.64rem;
    position: absolute;
    top: 1.4rem;
    font-weight: bold;
    opacity: 0;
    -webkit-transform: translate(0,-0.3rem);
    transform: translate(0,-0.3rem);
}
.mmm{
    position: absolute;width: 4.94rem;height:5.95rem;
    background: url('../images/3-1.png') center no-repeat;background-size: 100%;
    top:3rem;
    left:1.25rem;
    opacity: 0;
    -webkit-transform: translate(0, 0) scale(0) rotate(0) skew(0);
    transform: translate(0, 0) scale(0) rotate(0) skew(0);
}
.handbtn{
    position: absolute;
    width: 0.6rem;
    height: 0.83rem;
    background: url('../images/hand.png') center no-repeat;background-size: 100%;
    top: 2.2rem;
    left: 0.65rem;
    opacity: 0;
    -webkit-animation: show 1s ease-in-out infinite;animation: show 1s ease-in-out infinite;

}

/*.swiper-slide-active .sharebtn {
    animation: show 1s ease forwards;
    -webkit-animation: show 1s ease forwards;
}*/
.sharebt{
	position: absolute;
    left: 4.98rem;
    top: 8.5rem;
    width: 0.82rem;
    height: 0.37rem;
}
.stitle{
	background:url("../images/stitle.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:0.4rem;
	top:3.46rem;
	width:6.58rem;
	height:1.27rem;
	z-index:215;
}
.share1{
	background:url("../images/share1.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:0.48rem;
	top:5.55rem;
	width:6.38rem;
	height:1.73rem;
	z-index:195;
}
.share2{
	background:url("../images/share2.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:0.58rem;
	top:7.75rem;
	width:6.28rem;
	height:1.66rem;
	z-index:196;
}
.share3{
	background:url("../images/share3.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:0.51rem;
	top:9.77rem;
	width:6.35rem;
	height:1.9rem;
	z-index:197;
}
/*.share2{
	position:absolute;
	left:4.42rem;
	top:0.71rem;
	width:2.67rem;
	height:1.16rem;
	display:none;
}*/











.secbg{
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
.gcbpwrap{
    width: 6.14rem;height: 9.81rem;position: absolute;top: 0.2rem;left: 0.7rem;/*background: url('../images/bg6.jpg') center no-repeat;background-size: 100%;*/
}
.gcbpwrap img{width: 100%;position: absolute;top: 0;left: 0;}
.savenote{
    width: 2.54rem;height: 0.45rem;position: absolute;    top: 8.6rem;
    left: 1.8rem;background: url('../images/5p2.png') center no-repeat;background-size: 100%;
}

.shbg{
    background: url(../images/share.png) center no-repeat;
    background-size: 100%;
    position: absolute;
    width: 3.4rem;
    height: 3.08rem;
    top: 0;
    right: 0.65rem;
}

.conwrap{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
}
.swiper-container-v {
    width: 100%;
    height: 16.24rem;
    top: 50%;
    left:0;
	position:absolute;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
/*.p1,.p2{
	top:50%;
	-webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}*/
.swiper-slide {
    /*background: url(../images/1-3.png) center no-repeat;*/
    /*background-size: 100%;*/
    /*width: 5.36rem;*/
    /*height: 8.01rem !important;*/
    /*border: 0.1rem solid #2932ea;*/

}

.swiper-container-scrollbar {
    width: 100%;
    height: 100%;
    position: relative;
}


.swiper-container-scrollbar .swiper-slide {
    height: auto;
    width: 100%;
    overflow: hidden;
}

.btns{
    position: absolute;
    top:0;
    left:0;
    width:100%;
}
.btns span{
    width:2.6rem;
    height: 0.82rem;
    left: 2.1rem;
}
.btns span:nth-child(1){top:21.5rem;}
.btns span:nth-child(2){top:28.8rem;}
.btns span:nth-child(3){top:36.2rem;}
.btns span:nth-child(4){top:43.5rem;}
.btns span:nth-child(5){top:50.7rem;}
.btns span:nth-child(6){top:57.8rem;}
.btns span:nth-child(7){top:65.4rem;}
.btns span:nth-child(8){top:72.2rem;}
.btns span:nth-child(9){top:79.5rem;}
.btns span:nth-child(odd){
    left:2.6rem;
}

.tnote{
    width: 5.71rem;
    height: 2.1rem;
    position: absolute;
    top: 11.3rem;
    left: 0.9rem;
    overflow: hidden;
}
.tnote span{
    background: url(../images/1-7.png) center no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    top:0;left:0;
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%);
}
.swiper-slide-active .tnote span{
    animation: show 10s 0.5s ease forwards; -webkit-animation: show 10s 0.5s ease forwards;
}
.mxpwrap{
    position: fixed;
    width:100%;
    height: 100%;
    left:0;
    top:0;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 99999;
}
.mxp{
    width: 5.33rem;
    top: 40%;
    left: 1.1rem;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    position: absolute;
}
.clsbtn{
    background: url(../images/close.png) center no-repeat;
    background-size: 0.65rem 0.65rem;
    width: 0.65rem;
    height: 0.65rem;
    top: 10rem;
    left: 3rem;
    padding: 0.3rem;
}

.mxpwrap.actived{
    display: block;
}

.s2note{

}
.part1{
	width:100%;
	height:16.24rem;
	position:absolute;
	left:0;
	z-index:9999;
	overflow:hidden;
	top:50%;
	transform:translate(0,-50%);
	-webkit-transform:translate(0,-50%);
	display:none;
}
.part1.actived{
	display:block;
}
.logo1{
	background:url("../images/logo1.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:4.71rem;
	top:1.58rem;
	width:2.66rem;
	height:0.29rem;
}
.p1img1{
	position:absolute;
	left:0.67rem;
	top:2.15rem;
	width:6.39rem;
	height:3.44rem;
	background:url(../images/p1img1.png?1300) no-repeat;
	background-size:100%;
	opacity:0;
	-webkit-transform: translate(0,-2rem);
    transform: translate(0,-2rem);

}
.p1img2{
	background:url("../images/p1img2.png?1300") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:1.16rem;
	top:6.6rem;
	width:4.59rem;
	height:5.08rem;
	animation: zoomIn 1s ease forwards;
    -webkit-animation: zoomIn 1s ease forwards;
}
.logo2{
	background:url("../images/logo2.png?0214") no-repeat;
	background-size:100% 100%;
	position: absolute;
    left: 0.31rem;
    top: 12.85rem;
    width: 6.89rem;
    height: 0.92rem;
}
.title2{
	width:4.8rem;
	height:9.94rem;
	position:absolute;
    top: 2.35rem;
    left: 1.4rem;
	background:url(../images/title2.png) no-repeat;
	background-size:100%;
	opacity:0;
	-webkit-transform: translate(0,2rem);
    transform: translate(0,2rem);

}
.part1 .p1img1,.part1 .title2{
    animation: show 1s ease forwards;
    -webkit-animation: show 1s ease forwards;
}
.jt{
    background: url(../images/jt.png) center no-repeat;
    background-size: 100%;
    width: 0.54rem;
    height: 2.02rem;
    top: 0.7rem;
    left: 2.3rem;
    -webkit-transform: translate(0,0.2rem);
    transform: translate(0,0.2rem);
    animation: show 2s ease infinite;
    -webkit-animation: show 2s ease infinite;
    z-index: 999;
}
.jswrap{
    background: url(../images/p1title.png) center no-repeat;
    background-size: 100%;
	left:1.32rem;
	top:1.57rem;
	width:4.82rem;
	height:2.72rem;
    position: absolute;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
	z-index:9;
}
.swiper-slide-active .jswrap{
      animation: show 2.5s ease forwards;
      -webkit-animation: show 2.5s ease forwards;
}

.zhezhao{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:rgba(0,0,0,0.8);
	z-index:9999;
	display:none;
}
.zimg{
	width:7rem;
	position: absolute;
	top:50%;
	transform:translate(0,-50%);
	-webkit-transform:translate(0,-50%);
	left:0.25rem;	
}
.zimg img{
	width:7rem;
}
.zhezhao2{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:rgba(0,0,0,0.8);
	z-index:9999;
	display:none;
}
.close{
	background: url('../images/close.png') center no-repeat;
	background-size: 100%;
	width:0.7rem;
	height:0.7rem;
	position:absolute;
	top: 3.5rem;
    left: 3.4rem;
}
.swiper2{
	width:7rem;
	height:5.4rem;
	position: absolute;
	left:0.25rem;
	top:50%;
	transform:translate(0,-50%);
	-webkit-transform:translate(0,-50%);
}
.swiper-pagination{
	font-size:0.34rem;
	color:#fff;
}

.s2img{
	width:7rem;
}
.zhezhao3{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:rgba(0,0,0,0.8);
	z-index:9999;
	display:none;
}
.close2{
	background: url('../images/close.png') center no-repeat;
	background-size: 100%;
	width:0.7rem;
	height:0.7rem;
	position:absolute;
	top: 3.5rem;
    left: 3.4rem;
}
.swiper3{
	width:7rem;
	height:5.4rem;
	position: absolute;
	left:0.25rem;
	top:50%;
	transform:translate(0,-50%);
	-webkit-transform:translate(0,-50%);
}
.swiper-pagination2{
	font-size:0.34rem;
	color:#fff;
}

.s3img{
	width:7rem;
}

.down{
	background:url("../images/up2.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:3.45rem;
	top:11.83rem;
	width:0.6rem;
	height:0.51rem;	
	z-index:999;
}
.down2{
	background:url("../images/up2.png") no-repeat;
	background-size:100% 100%;
	position:absolute;
	left: 3.45rem;
    top: 13.73rem;
	width:0.6rem;
	height:0.51rem;	
	z-index:999;
}
.part1 .down,.part2 .down2{
	-webkit-transform: translate(0,-0.2rem);
    transform: translate(0,-0.2rem);
    animation: show 1s ease infinite;
    -webkit-animation: show 1s ease infinite;
}

.sharebg{
    background: url("../images/share.png?1007") center no-repeat;
    background-size: 100%;
	position:absolute;
	left:3.51rem;
	top:1.05rem;
	width:3.6rem;
	height:0.89rem;
    opacity: 0;
    animation: show 1s ease-in-out infinite;
    -webkit-animation: show 1s ease-in-out infinite;
}
.downbtn3{
	background:url("../images/downbg.png") no-repeat;
    background-size:100% 100%;
    position:absolute;
    left:1.935rem;
    top:10.32rem;
    width:3.63rem;
    height:2.18rem;
    z-index:71;
}
h1{
    background: url(../images/1-2.png) center no-repeat;
    background-size: 100%;
    width: 7.44rem;
    height: 2.36rem;
    /*top: 0.7rem;*/
    top: 1.1rem;
    left: 0.03rem;
    position: absolute;
    z-index: 999;
}
.vdbox,.vdbox2,.vdbox3{
    /*display: none;*/
}
.vdbox2{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    top: 0;
    left: 0;
    z-index: 99999;
    display: none;
}
.videobox{
    /*position: absolute;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*background: #000;*/
    /*top: 0;*/
    /*left: 0;*/
}
.sec2title{
    background: url(../images/2-2.png) center no-repeat;
    background-size: 100%;
    width: 5.11rem;
    height: 0.86rem;
    opacity: 0;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    top: 1.3rem;
    left: 1rem;
}
.actived .sec2title{
    animation: show 1s ease-in-out forwards; -webkit-animation: show 1s ease-in-out forwards;
}
.vwrap{
    position: absolute;
    width: 5.36rem;
    height: 8.01rem;
    top: 0;
    left: 0;
    z-index: 999;
}
.vwrap img{
    width: 100%;
    height: 100%;
}

@-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;
    }
}

@keyframes opacity-change {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}
@-webkit-keyframes opacity-change {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}
@-moz-keyframes opacity-change {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}
@-o-keyframes opacity-change {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}
 @keyframes star-ani {
    0% {
        opacity: 0.8;
        transform: scale(1) translate3d(0, 0, 0);
    }

    100% {
        opacity: 1;
        transform: scale(1) translate3d(-320px, 200px, 0);
    }
}
@-webkit-keyframes star-ani {
    0% {
        opacity: 0.8;
        transform: scale(1) translate3d(0, 0, 0);
    }

    100% {
        opacity: 1;
        transform: scale(1) translate3d(-320px, 200px, 0);
    }
}
@-webkit-keyframes zoomIn{
  0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
  50%{opacity:1}
}
@keyframes zoomIn{
  0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
  50%{opacity:1}
}
/*iPhoneX的适配*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

}

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

@media screen and (min-device-height:720px) and (min-device-width: 444px) {


}