* {
	-ms-touch-action: none;
	padding: 0;
	margin: 0;
}

html,
body,
.full-screen {
	-ms-touch-action: none;
	font-family: "黑体";
	padding: 0;
	border: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	background-color: #527ffe;
}

.full-screen {
	display: flex;
	align-items: center;
	justify-content: center;
}

#info-content,
#greenhander-content {
	display: none;
}

#greenhander-content {
	position: relative;
}

.show-content {
	overflow: hidden;
	position: absolute;
	background-color: #4268dd;
}

.content-desc {
	color: white;
	margin-left: 12.61%;
	position: relative;
	z-index: 100;
	opacity: 0;
    margin-right: 8%;
}

.content-desc1 {
	color: #01398a;
	margin-left: 12.61%;
	position: relative;
	z-index: 100;
	opacity: 0;
    margin-right: 8%;
}

.content-desc-right {
	color: white;
	margin-right: 12.61%;
	position: relative;
	z-index: 100;
	opacity: 0;
    margin-left: 8%;
}

.post-content-0 {
	background: url("https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/04_3.png") no-repeat left top;
	background-size: 100% auto;
	height: 2rem;
	width: 75%;
	opacity: 0;
	padding: .2rem;
	font-size: .22rem;
}

.post-content-1 {
	background: url("https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/04_4.png") no-repeat right top;
	background-size: 100% auto;
	height: 2rem;
	width: 75%;
	opacity: 0;
	margin-top: -.5rem;
	margin-left: 5%;
	padding: .2rem;
	font-size: .22rem;
}

.post-content-2 {
	background: url("https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/04_5.png") no-repeat left top;
	background-size: 100% auto;
	height: 2rem;
	width: 75%;
	opacity: 0;
	margin-top: -.5rem;
	padding: .2rem;
	font-size: .22rem;
}

.page0-num {
	font-size: .4rem;
	margin: 0 4px;
	font-weight: bold;
	color: #ef831e;
}

.page1-num {
	font-size: .4rem;
	margin: 0 4px;
	font-weight: bold;
	color: #ef831e;
}

.page2-num {
	font-size: .4rem;
	margin: 0 4px;
	font-weight: bold;
	color: #ef831e;
}

.page2-num-s {
	font-size: .3rem;
	margin: 0 4px;
	font-weight: bold;
	color: #ef831e;
}

.normal-txt {
	font-size: .3rem;
	line-height: .6rem;
	letter-spacing: 1px;
}

.text-right {
	text-align: right;
}

.self_animate__animated {
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

.page {
	position: absolute;
	height: 100%;
	width: 100%;
}

img {
	display: block;
	position: absolute;
}

.page-0,
.page-1,
.page-2,
.page-3,
.page-4,
.page-5,
.page-6,
.page-7 {
	display: none;
}

.p0-img1 {
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50%;
	position: absolute;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/02_2.png') center center no-repeat;
	background-size: 100% auto;
}

.p0-img2 {
	left: 0;
	bottom: 0;
	width: 100%;
	position: absolute;
	height: 27.5%;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/02_3.png') center bottom no-repeat;
	background-size: 100% auto;
}

.p0-img3 {
	right: 0;
	top: .5rem;
	height: 26%;
	position: absolute;
	height: 26%;
	width: 100%;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/02_4.png') center center no-repeat;
	background-size: 100% auto;
}

.p0-img4 {
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/02_5_1.png') center center no-repeat;
	background-size: 100% auto;
	position: absolute;
	height: 73.6%;
}

.p0-img5 {
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/02_5_2.png') center center no-repeat;
	background-size: 100% auto;
	position: absolute;
	height: 73.6%;
}

.p0-img6 {
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/02_5_3.png') center center no-repeat;
	background-size: 100% auto;
	position: absolute;
	height: 73.6%;
}

.p1-img1 {
	width: 100%;
	height: 100%;
	transform-origin: right bottom;
	z-index: -1;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/03_2.png') right bottom no-repeat;
	background-size: 100% 100%;
	position: absolute;
}

.p1-img2 {
	height: 11%;
	top: 73%;
	left: 1.8rem;
	width: 14.4%;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/03_7.png') left top no-repeat;
	background-size: 100% auto;
	position: absolute;
}

.p1-img3 {
	height: 29%;
	top: 55%;
	left: 3.6rem;
	width: 28.8%;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/03_3.png') left top no-repeat;
	background-size: 100% auto;
	position: absolute;
}

.p1-img4 {
	height: 10.8%;
	top: 58%;
	left: 3rem;
	width: 19%;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/03_4.png') left top no-repeat;
	background-size: 100% auto;
	position: absolute;
}

.p1-img5 {
	height: 7%;
	top: 68%;
	left: 5rem;
	width: 13.4%;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/03_5.png') left top no-repeat;
	background-size: 100% auto;
	position: absolute;
}

.p1-img6 {
	height: 9%;
	top: 73%;
	left: 3.1rem;
	width: 15.7%;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/03_6.png') left top no-repeat;
	background-size: 100% auto;
	position: absolute;
}

.p1-opt {
	opacity: 0;
}

.p2-img1 {
	transform-origin: left top;
	z-index: -1;
	width: 130%;
	height: 111.8%;
	left: 1.14rem;
	top: -5%;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/04_2.png') right top no-repeat;
	background-size: 100% auto;
	position: absolute;
}

.p3-img1 {
	bottom: 0;
	right: 0;
	height: 31.3%;
	width: 100%;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/05_3.png') right bottom no-repeat;
	background-size: 100% auto;
	position: absolute;
}

.p3-img2 {
	bottom: 3.5rem;
	right: 1rem;
	height: 13.5%;
	width: 24%;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/05_4.gif') right bottom no-repeat;
	background-size: 100% auto;
	position: absolute;
}

.p3-img3 {
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/05_2_1.png') right bottom no-repeat;
	background-size: 100% auto;
	position: absolute;
}

.p3-img4 {
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/05_2_2.png') right bottom no-repeat;
	background-size: 100% auto;
	position: absolute;
}

.p3-img5 {
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/05_2_3.png') right bottom no-repeat;
	background-size: 100% auto;
	position: absolute;
}

.p4-img1 {
	bottom: 0;
	right: 0;
	height: 40%;
	width: 100%;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/06_3.gif') right bottom no-repeat;
	background-size: 100% auto;
	position: absolute;
}

.p4-img2 {
	height: .36rem;
	right: 18%;
	top: 26%;
	width: 4.5%;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/06_2.png') right bottom no-repeat;
	background-size: 100% auto;
	position: absolute;
}

.p5-img1 {
	width: 100%;
	height: 100%;
	z-index: 0;
	top: 0;
	left: 0;
	position: absolute;
}

.p5-img2 {
	width: 52.4%;
	height: 7%;
	left: 23.8%;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/07_btn1.png') center center no-repeat;
	background-size: 100% auto;
	position: absolute;
	bottom: 9%;
}

.p5-img3 {
	width: 52.4%;
	height: 7%;
	left: 23.8%;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/07_btn2.png') center center no-repeat;
	background-size: 100% auto;
	bottom: 2%;
	position: absolute;
}

.p5-img4 {
	width: 33%;
	height: 2.2%;
	z-index: 0;
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/07_tip.png') center center no-repeat;
	background-size: 100% auto;
	position: absolute;
	bottom: 17%;
	left: 33%;
	animation: fadeInOut 1s linear infinite both;
	-webkit-animation: fadeInOut 1s linear infinite both;
}

.center-c {
	display: flex;
	justify-content: center;
	height: 100%;
	position: absolute;
	width: 100%;
}

.page-login {
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/01_1new.png')center center no-repeat;
	background-size: auto 100%;
}

.music-btn {
	display: block;
	right: 13%;
	top: 4%;
	width: 7.6%;
	z-index: 10000;
}

.slide-tip {
	width: .56rem;
	bottom: 1.6%;
	margin-left: -.28rem;
	left: 50%;
	z-index: 10000;
	display: none;
	animation: float 1.5s linear infinite both;
	-webkit-animation: float 1.5s linear infinite both;
}

.center {
	position: absolute;
	height: 11%;
	bottom: 8%;
	width: 100%;
	display: block;
	opacity: 0;
}

.hideToTop {
	animation: hideToTop .3s linear 1 both;
	-webkit-animation: hideToTop .3s linear 1 both;
}

.hideToDown {
	animation: hideToDown .3s linear 1 both;
	-webkit-animation: hideToDown .3s linear 1 both;
}

.showFromTop {
	animation: showFromTop .3s linear 1 both;
	-webkit-animation: showFromTop .3s linear 1 both;
}

.showFromDown {
	animation: showFromDown .3s linear 1 both;
	-webkit-animation: showFromDown .3s linear 1 both;
}

.center-title {
	width: 70%;
	top: 16%;
}

.page1-star {
	width: 100%;
	position: absolute;
	right: 0;
	top: 14.7%;
	opacity: 0;
}

.phone {
	width: 100%;
	bottom: 0;
	opacity: 0;
}

.phone-light1 {
	position: absolute;
	opacity: 0;
	bottom: 0;
	width: 100%;
}

.phone-light2 {
	position: absolute;
	opacity: 0;
	bottom: 0;
	width: 100%;
}

.light1-fly {
	animation: floatLeftRight 3s linear infinite both;
	-webkit-animation: floatLeftRight 3s linear infinite both;
}

.light2-fly {
	animation: fadeInOut 1s linear infinite both;
	-webkit-animation: fadeInOut 1s linear infinite both;
}

.boy {
	opacity: 0;
	position: absolute;
	left: 39%;
	bottom: 33%;
	width: 17.7%;
}

.boy-android-show {
	animation: fadeIn 1s linear 1 both;
	-webkit-animation: fadeIn 1s linear 1 both;
}

.boy-fly {
	animation: float 3s linear infinite both;
	-webkit-animation: float 3s linear infinite both;
}

.click-btn {
	position: absolute;
	width: 46%;
	left: 27%;
}

.click-guide {
	width: 11.4%;
	top: 20%;
	left: 60%;
}

.sub-title-ani1 {
	width: 100%;
	animation: flyFromLeft 1s 2s linear 1 both;
	-webkit-animation: flyFromLeft 1s 2s linear 1 both;
}

.sub-title-ani2 {
	width: 100%;
	animation: flyFromLeft 1s 3s linear 1 both;
	-webkit-animation: flyFromLeft 1s 3s linear 1 both;
}

.star-inAndOut-1 {
	animation: fadeInOut1 1.5s linear infinite both;
	-webkit-animation: fadeInOut1 1.5s linear infinite both;
}

.star-inAndOut-2 {
	animation: fadeInOut2 1.5s linear infinite both;
	-webkit-animation: fadeInOut2 1.5s linear infinite both;
}

.star-inAndOut-3 {
	animation: fadeInOut3 1.5s linear infinite both;
	-webkit-animation: fadeInOut3 1.5s linear infinite both;
}

.page-fadeIn {
	animation: fadeIn .5s linear 1 both;
	-webkit-animation: fadeIn .5s linear 1 both;
}

.page-fadeOut {
	animation: fadeOut .5s linear 1 both;
	-webkit-animation: fadeOut .5s linear 1 both;
}

.fadeInUp {
	animation: fadeInUpPage 0.5s linear 1 both;
	-webkit-animation: fadeInUpPage 0.5s linear 1 both;
}

@-webkit-keyframes fadeInUpPage {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 10%, 0);
		transform: translate3d(0, 10%, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes fadeInUpPage {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 10%, 0);
		transform: translate3d(0, 10%, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@-webkit-keyframes showFromTop {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}

	100% {
		-webkit-transform: translate3d(0, , 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes showFromTop {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}

	100% {
		-webkit-transform: translate3d(0, , 0);
		transform: translate3d(0, 0, 0)
	}
}

@-webkit-keyframes showFromDown {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes showFromDown {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@-webkit-keyframes hideToTop {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	100% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}
}

@keyframes hideToTop {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	100% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}
}

@-webkit-keyframes hideToDown {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0)
	}
}

@keyframes hideToDown {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0)
	}
}

@-webkit-keyframes flyFromLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}

@keyframes flyFromLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}

webkit-keyframes floatLeftRight {
	0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
	50%{opacity:1;-webkit-transform:translate3d(5%,0,0);transform:translate3d(5%,0,0)}
	100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}

@keyframes floatLeftRight {
	0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
	50%{opacity:1;-webkit-transform:translate3d(5%,0,0);transform:translate3d(5%,0,0)}
	100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}

webkit-keyframes float {
	0% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		opacity: 1;
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0,-10px, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes float {
	0% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		opacity: 1;
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0,-10px, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

webkit-keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}
webkit-keyframes fadeInOut {
	0% {
		opacity: 0
	}

	50% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}

@keyframes fadeInOut {
	0% {
		opacity: 0
	}

	50% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}

webkit-keyframes fadeInOutFly {
	0% {
		opacity: 1
	}

	50% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes fadeInOutFly {
	0% {
		opacity: 1
	}

	50% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

webkit-keyframes fadeInOut1 {
	0% {
		opacity: 0
	}

	25% {
		opacity: 1
	}

	50% {
		opacity: 0
	}

	75% {
		opacity: 0
	}

	100% {
		opacity: 0
	}
}

@keyframes fadeInOut1 {
	0% {
		opacity: 0
	}

	25% {
		opacity: 1
	}

	50% {
		opacity: 0
	}

	75% {
		opacity: 0
	}

	100% {
		opacity: 0
	}
}

webkit-keyframes fadeInOut2 {
	0% {
		opacity: 0
	}

	25% {
		opacity: 0
	}

	50% {
		opacity: 1
	}

	75% {
		opacity: 0
	}

	100% {
		opacity: 0
	}
}

@keyframes fadeInOut2 {
	0% {
		opacity: 0
	}

	25% {
		opacity: 0
	}

	50% {
		opacity: 1
	}

	75% {
		opacity: 0
	}

	100% {
		opacity: 0
	}
}

webkit-keyframes fadeInOut3 {
	0% {
		opacity: 0
	}

	25% {
		opacity: 0
	}

	50% {
		opacity: 0
	}

	75% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}

@keyframes fadeInOut3 {
	0% {
		opacity: 0
	}

	25% {
		opacity: 0
	}

	50% {
		opacity: 0
	}

	75% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}

.page-0 {
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/02_1new.png')center center no-repeat;
	background-size: auto 100%;
}

.page0-star {
	top: 12%;
	left: 0;
	width: 100%;
}

.page0-fade {
	animation: scaleAni 3s linear infinite both;
	-webkit-animation: scaleAni 3s linear infinite both;
}

webkit-keyframes scaleAni {
	0% {
		opacity: 1
	}

	33.3% {
		opacity: 0
	}

	66.6% {
		opacity: 1
	}

	100% {
		opacity: 1
	}
}

@keyframes scaleAni {
	0% {
		opacity: 1
	}

	33.3% {
		opacity: 0
	}

	66.6% {
		opacity: 1
	}

	100% {
		opacity: 1
	}
}

.star1-inAndOut-1 {
	animation: page0Star1 6s linear infinite both;
	-webkit-animation: page0Star1 6s linear infinite both;
}

.star1-inAndOut-2 {
	animation: page0Star2 6s linear infinite both;
	-webkit-animation: page0Star2 6s linear infinite both;
}

.star1-inAndOut-3 {
	animation: page0Star3 6s linear infinite both;
	-webkit-animation: page0Star3 6s linear infinite both;
}

webkit-keyframes page0Star1 {
	0% {
		opacity: 0
	}

	16.6% {
		opacity: 1
	}

	33.3% {
		opacity: 1
	}

	50% {
		opacity: 0
	}

	66.6% {
		opacity: 0
	}

	83.3% {
		opacity: 0
	}

	100% {
		opacity: 0
	}
}

@keyframes page0Star1 {
	0% {
		opacity: 0
	}

	16.6% {
		opacity: 1
	}

	33.3% {
		opacity: 1
	}

	50% {
		opacity: 0
	}

	66.6% {
		opacity: 0
	}

	83.3% {
		opacity: 0
	}

	100% {
		opacity: 0
	}
}

webkit-keyframes page0Star2 {
	0% {
		opacity: 0
	}

	16.6% {
		opacity: 0
	}

	33.3% {
		opacity: 0
	}

	50% {
		opacity: 1
	}

	66.6% {
		opacity: 1
	}

	83.3% {
		opacity: 0
	}

	100% {
		opacity: 0
	}
}

@keyframes page0Star2 {
	0% {
		opacity: 0
	}

	16.6% {
		opacity: 0
	}

	33.3% {
		opacity: 0
	}

	50% {
		opacity: 1
	}

	66.6% {
		opacity: 1
	}

	83.3% {
		opacity: 0
	}

	100% {
		opacity: 0
	}
}

webkit-keyframes page0Star3 {
	0% {
		opacity: 0
	}

	16.6% {
		opacity: 0
	}

	33.3% {
		opacity: 0
	}

	50% {
		opacity: 0
	}

	66.6% {
		opacity: 0
	}

	83.3% {
		opacity: 1
	}

	100% {
		opacity: 1
	}
}

@keyframes page0Star3 {
	0% {
		opacity: 0
	}

	16.6% {
		opacity: 0
	}

	33.3% {
		opacity: 0
	}

	50% {
		opacity: 0
	}

	66.6% {
		opacity: 0
	}

	83.3% {
		opacity: 1
	}

	100% {
		opacity: 1
	}
}

.page-1 {
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/03_1new.png')center center no-repeat;
	background-size: auto 100%;
}

.page1-move {
	animation: page1Move 3s linear infinite both;
	-webkit-animation: page1Move 3s linear infinite both;
}

.page1-float {
	animation: page1Float 6s linear infinite both;
	-webkit-animation: page1Float 6s linear infinite both;
}

webkit-keyframes page1Float {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		-webkit-transform: translate3d(0, -40px, 0);
		transform: translate3d(0, -40px, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes page1Float {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		-webkit-transform: translate3d(0, -40px, 0);
		transform: translate3d(0, -40px, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

webkit-keyframes page1Move {
	50% {
		-webkit-transform: scale3d(1.12, 1.12, 1.12);
		transform: scale3d(1.12, 1.12, 1.12)
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

@keyframes page1Move {
	50% {
		-webkit-transform: scale3d(1.12, 1.12, 1.12);
		transform: scale3d(1.12, 1.12, 1.12)
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

.page-2 {
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/04_1new.png')center center no-repeat;
	background-size: auto 100%;
}

.post-title {
	/* padding-top: 2%; */
	font-size: .22rem;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

.post-txt {
	font-size: .2rem;
	/* padding-left: 2%; */
	/* padding-right: 2%; */
	word-break: break-word;
	line-height: .4rem;
}

.page2-bannerShow {
	animation: fadeInDown .6s linear 1 both;
	-webkit-animation: fadeInDown .6s linear 1 both;
}

.page2-bannerFloat {
	animation: bannerFloat 4.8s linear infinite both;
	-webkit-animation: bannerFloat 4.8s linear infinite both;
}

.page2-scaleFromLeft {
	animation: fadeIn .5s linear 1 both;
	-webkit-animation: fadeIn .5s linear 1 both;
}

.page2-scaleFromRight {
	animation: fadeIn .5s linear 1 both;
	-webkit-animation: fadeIn .5s linear 1 both;
}

.page2-c1 {
	margin-top: 18%;
}

.page3-c1 {
	margin-top: 1.4rem;
}

.phone1-move-opa {
	animation: phone1MoveOpt 3s linear infinite both;
	-webkit-animation: phone1MoveOpt 3s linear infinite both;
}

.phone1-move {
	animation: phone1Move 3s linear infinite both;
	-webkit-animation: phone1Move 3s linear infinite both;
}

.phone2-move-opa {
	animation: phone2MoveOpt 4s linear infinite both;
	-webkit-animation: phone2MoveOpt 4s linear infinite both;
}

.phone2-move {
	animation: phone2Move 4s linear infinite both;
	-webkit-animation: phone2Move 4s linear infinite both;
}

.phone3-move-opa {
	animation: phone3MoveOpt 5s linear infinite both;
	-webkit-animation: phone3MoveOpt 5s linear infinite both;
}

.phone3-move {
	animation: phone3Move 5s linear infinite both;
	-webkit-animation: phone3Move 5s linear infinite both;
}

webkit-keyframes phone1Move {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes phone1Move {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

webkit-keyframes phone2Move {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes phone2Move {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

webkit-keyframes phone3Move {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		-webkit-transform: translate3d(0, -20px, 0);
		transform: translate3d(0, -20px, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes phone3Move {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		-webkit-transform: translate3d(0, -20px, 0);
		transform: translate3d(0, -20px, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

webkit-keyframes phone1MoveOpt {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		opacity: 1;
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0)
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes phone1MoveOpt {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		opacity: 1;
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0)
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

webkit-keyframes phone2MoveOpt {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		opacity: 1;
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0)
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes phone2MoveOpt {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		opacity: 1;
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0)
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

webkit-keyframes phone3MoveOpt {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		opacity: 1;
		-webkit-transform: translate3d(0, -20px, 0);
		transform: translate3d(0, -20px, 0)
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes phone3MoveOpt {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	50% {
		opacity: 1;
		-webkit-transform: translate3d(0, -20px, 0);
		transform: translate3d(0, -20px, 0)
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

webkit-keyframes bannerShow {
	0% {
		-webkit-transform: scale3d(0.1, 0.1, 0.1);
		transform: scale3d(0.1, 0.1, 0.1)
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

@keyframes bannerShow {
	0% {
		-webkit-transform: scale3d(0.1, 0.1, 0.1);
		transform: scale3d(0.1, 0.1, 0.1)
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

webkit-keyframes bannerFloat {
	0% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1)
	}

	50% {
		-webkit-transform: scaleY(0.95);
		transform: scaleY(0.95)
	}

	100% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1)
	}
}

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -20%, 0);
		transform: translate3d(0, -20%, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -20%, 0);
		transform: translate3d(0, -20%, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}

@keyframes bannerFloat {
	0% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1)
	}

	50% {
		-webkit-transform: scaleY(0.95);
		transform: scaleY(0.95)
	}

	100% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1)
	}
}

.page-3 {
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/05_1new.png')center center no-repeat;
	background-size: auto 100%;
}

.page3-star {
	right: 0;
	top: 0;
	width: 39.7%;
	height: 54%;
}

.page-4 {
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/06_1new.png')center center no-repeat;
	background-size: auto 100%;
}

.rotate-self {
	animation: ratateSelf 5s linear infinite both;
	-webkit-animation: ratateSelf 5s linear infinite both;
}

webkit-keyframes ratateSelf {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes ratateSelf {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.page-5 {
	background: url('https://community-front-static.vivo.com.cn/bbsreport/vivoSummary/img/07_1.png')center center no-repeat;
	background-size: auto 100%;
}

.page5-c {
	width: 100%;
	height: 100%;
}

#my-canvas {
	x: 0;
	y: 0;
	position: absolute;
	display: none;
}

.my-honor {
	top: 0;
	left: 0;
	position: absolute;
	z-index: -10000;
	opacity: 0;
}

.my-honor-c {
	width: 100%;
	height: 100%;
}

.my-honor-img {
	top: 10%;
	position: absolute;
	z-index: 20;
}

.my-title-icon {
	width: 20%;
	left: 5%;
	top: 3%;
	z-index: 20;
}

.my-title {
	width: 40%;
	right: 5%;
	top: 5%;
	z-index: 20;
}

.my-sub-icon {
	/* width: 12%;
	left: 10%;
	top: 16%; */
	z-index: 20;
	    position: absolute;
	    width: 12%;
	    left: 10%;
	    top: 16%;
	    z-index: 20;
	    overflow: hidden;
	    height: 12%;
}
.my-sub-icon1{
	width: 100%;
	border-radius: 50%;
}

.my-sub-title {
	width: 40%;
	left: 24%;
	top: 17%;
	z-index: 20;
	position: absolute;
	font-size: .2rem;
	font-weight: bold;
}

.my-sub-title1 {
	width: 24%;
	right: 8%;
	top: 15.5%;
	z-index: 20;
}

.my-sub-title2 {
	width: 54%;
	left: 8%;
	top: 28%;
	z-index: 20;
}

.my-qrcode {
	width: 20%;
	left: 7.5%;
	bottom: 6.8%;
	z-index: 20;
}

.my-qrcode-desc {
	width: 35%;
	bottom: 6.5%;
	left: 31%;
	z-index: 20;
	position: absolute;
	font-size: .2rem;
}

.my-name {
	position: absolute;
	font-size: .24rem;
	top: 19.6%;
	left: 23.3%;
	overflow: hidden;
	max-width: 40%;
	z-index: 10;
	z-index: 20;
}

.my-year-title {
	left: 7.7%;
	width: 55.8%;
	top: 32.3%;
	z-index: 20;
}

.my-info {
	max-width: 55%;
	top: 45%;
	position: absolute;
	left: 8.5%;
	font-size: .24rem;
	z-index: 20;
}

.my-info-item {
	margin-top: 5px;
}

.info-num {
	color: #2059fb;
	margin: 0 3px;
}

.my-badge {
	position: absolute;
	left: 64.2%;
	width: 28.6%;
	top: 24.6%;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 100;
}

.badge-icon {
	width: 100%;
	position: relative;
}

.gh-username{
	z-index: 200;
	position: absolute;
	bottom: 11.5%;
	font-size: .24rem;
	left: 33%;
}