* {
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}

html,
body {
	width: 100%;
	height: 100%;
	font-size: 10px;
	-webkit-overflow-scrolling: touch;
	overflow-x: hidden;
	-webkit-touch-callout: none !important;
	-webkit-overflow-scrolling: touch;
	background-color: #FFFFFF;
	/*overflow:hidden;*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow-x: hidden;
	position: fixed;
	overflow: hidden;
}

body {
	font-family: "microsoft yahei";
}

img {
	display: block;
	position: absolute;
}

.none {
	display: none;
}

.tiaobox {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	overflow: auto;
}

.tiao {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
}

.back {
	position: fixed;
	width: 7%;
	top: 1%;
	right: 2%;
}

.loading,
.page,
.pagebg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 1500px;
	overflow: hidden;
}

.loadingText {
	position: absolute;
	width: 100%;
	text-align: center;
	top: 53.1%;
	left: 0;
	font-size: 5.5rem;
	color: #FFF;
	animation: flash 2s 0s linear both infinite;
}

.percent {
	position: absolute;
	width: 100%;
	text-align: center;
	top: 59.1%;
	left: 0;
	font-size: 4.5rem;
	color: #FFF;
}

.page1 {
	background-color: rgba(0, 0, 0, 0.7);
}

.page1-1 {
	width: 25.4%;
	left: 37.3%;
	top: 12.3%;
}

.page1-2 {
	width: 71.5%;
	left: 14.3%;
	top: 35.8%;
}

.page1-3 {
	width: 76.1%;
	left: 12%;
	top: 66.5%;
}

.page1-4 {
	width: 76.8%;
	left: 11.6%;
	top: 66.7%;
}

.page1-5 {
	width: 52%;
	left: 24%;
	top: 81.7%;
	animation: pulse 2s 0s linear both infinite;
}

.page2-1 {
	width: 20%;
	left: 41%;
	top: 40%;
	animation: bounceIn 2s 0.1s linear both;
}

.page2-2 {
	width: 20%;
	left: 28.3%;
	top: 10%;
	animation: bounceIn 2s 0.2s linear both;
}

.page2-3 {
	width: 20%;
	left: 70.6%;
	top: 19%;
	animation: bounceIn 2s 0.3s linear both;
}

.page2-4 {
	width: 20%;
	left: 9%;
	top: 19.6%;
	animation: bounceIn 2s 0.1s linear both;
}

.page2-5 {
	width: 20%;
	left: 46.3%;
	top: 17.5%;
	animation: bounceIn 2s 0.2s linear both;
}

.page2-6 {
	width: 20%;
	left: 6.9%;
	top: 32.6%;
	animation: bounceIn 2s 0.4s linear both;
}

.page2-7 {
	width: 20%;
	left: 31%;
	top: 27.8%;
	animation: bounceIn 2s 0.2s linear both;
}

.page2-8 {
	width: 20%;
	left: 68.6%;
	top: 31.7%;
	animation: bounceIn 2s 0.3s linear both;
}

.page2-9 {
	width: 20%;
	left: 78.6%;
	top: 42.2%;
	animation: bounceIn 2s 0.4s linear both;
}

.page2-10 {
	width: 20%;
	left: 10%;
	top: 43.8%;
	animation: bounceIn 2s 0.2s linear both;
}

.page2-11 {
	width: 20%;
	left: 36.3%;
	top: 51.6%;
	animation: bounceIn 2s 0.1s linear both;
}

.page2-12 {
	width: 20%;
	left: 84.6%;
	top: 52.3%;
	animation: bounceIn 2s 0.3s linear both;
}

.page2-13 {
	width: 20%;
	left: 16%;
	top: 57%;
	animation: bounceIn 2s 0.1s linear both;
}

.page2-14 {
	width: 20%;
	left: 59.3%;
	top: 57.4%;
	animation: bounceIn 2s 0.2s linear both;
}

.page2-15 {
	width: 20%;
	left: 4.6%;
	top: 66.4%;
	animation: fadeIn 2s 0.4s linear both;
}

.page2-16 {
	width: 20%;
	left: 41%;
	top: 70%;
	animation: fadeIn 2s 0.3s linear both;
}

.page2-17 {
	width: 20%;
	left: 19.3%;
	top: 75%;
	animation: fadeIn 2s 0.1s linear both;
}

.page2-18 {
	width: 20%;
	left: 67.6%;
	top: 77%;
	animation: fadeIn 2s 0.2s linear both;
}

.page3-1 {
	width: 20.3%;
	left: 4.9%;
	top: 11%;
}

.page3-2 {
	width: 80.7%;
	left: 9.6%;
	top: 11.9%;
}

.page3-3 {
	width: 42.1%;
	left: 28.9%;
	top: 71.9%;
	animation: pulse 2s 0s linear both infinite;
}

.page3-4 {
	width: 62%;
	left: 18.9%;
	top: 79.2%;
}

.page3-5 {
	width: 7.7%;
	left: 17.8%;
	top: 77.8%;
}

.page4-1 {
	width: 20.3%;
	left: 4.9%;
	top: 11.1%;
}

.page4-2 {
	width: 15.3%;
	left: 78.7%;
	top: 11.7%;
}

.searchBox {
	position: absolute;
	width: 100%;
	height: 18.2vw;
	/* left: 10%; */
	top: 18.1%;
	background: url(http://qiniu.cdjoie.com/dysjtoupiao/img/12.png) no-repeat left top/100% 100%;
	/* background-color: red; */
}

.searchInput {
	position: absolute;
	color: #000;
	height: 10.6vw;
	border: none;
	top: 20%;
	width: 72%;
	left: 8.3%;
	text-align: center;
	outline: none;
	font-size: 4rem;
	background-color: transparent;
	border: none;
}

.searchBtn {
	width: 6.3%;
	left: 80.9%;
	top: 33.6%;
}

.ruleBtn {
	width: 22.6%;
	right: 0;
	top: 67.2%;
}

.paihangbangBtn {
	width: 22.6%;
	right: 0;
	top: 72.5%;
}

.jieshaoruleBtn {
	width: 22.6%;
	right: 0;
	top: 62.1%;
}

.inforuleBtn {
	width: 22.6%;
	right: 0;
	top: 36.4%;
}

.infopaihangbangBtn {
	width: 22.6%;
	right: 0;
	top: 40.5%;
}

.infojieshaoruleBtn {
	width: 22.6%;
	right: 0;
	top: 32.1%;
}

.saveruleBtn {
	width: 22.6%;
	right: 0;
	top: 63.4%;
}

.savepaihangbangBtn {
	width: 22.6%;
	right: 0;
	top: 67.5%;
}

.savejieshaoruleBtn {
	width: 22.6%;
	right: 0;
	top: 59.1%;
}

.friendsruleBtn {
	width: 22.6%;
	right: 0;
	top: 35%;
}

.friendspaihangbangBtn {
	width: 22.6%;
	right: 0;
	top: 39.2%;
}

.friendsjieshaoruleBtn {
	width: 22.6%;
	right: 0;
	top: 30.7%;
}

.listBox {
	position: absolute;
	width: 100%;
	height: 126vw;
	top: 27.2%;
	/* background-color: red; */
	overflow-y: scroll;
	/* padding-bottom: 10vw; */
}


/*.topThreeBox {
	position: absolute;
	width: 100%;
	height: 99vw;
	top: 27.2%;
}*/

.one,
.two,
.three {
	position: relative;
	width: 100%;
	height: 31vw;
	/* background-color: red; */
}

.listCotainer {
	position: absolute;
	width: 76.3%;
	left: 11.5%;
	height: 53.6vw;
	top: 80%;
	/* background-color: blue; */
}

.friendslistCotainer {
	position: absolute;
	width: 76.3%;
	left: 11.5%;
	height: 53.6vw;
	top: 69.7%;
	/* background-color: red; */
	overflow-y: scroll;
}

.head1,
.head2,
.head3 {
	position: absolute;
	width: 23%;
	left: 11%;
	top: 12.4%;
	font-size: 2rem;
	border-radius: 50%;
	border: 6px solid #FFFFFF;
}

.listvoteBtn1 {
	width: 23%;
	left: 40%;
	top: 70.4%;
}

.listvoteBtn2 {
	width: 80%;
	left: 16%;
	top: 85.4%;
}

.head1 {
	top: 21%;
}

.head2 {
	top: 16.7%;
}

.storeName1,
.storeName2,
.storeName3 {
	position: absolute;
	width: 54%;
	left: 40%;
	top: 22%;
	font-size: 4rem;
	color: #FFFFFF;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* background-color: red; */
}

.storeName2 {
	top: 22%;
}

.storeName3 {
	top: 22%;
}

.storeList1,
.storeList2,
.storeList3 {
	position: absolute;
	width: 15%;
	left: 40%;
	top: 47%;
	font-size: 2.5rem;
	/* background-color: red; */
	color: #FFFFFF;
}


/*.storeList2 {
	top: 58.9%;
}

.storeList3 {
	top: 53.5%;
}*/

.storeVote1,
.storeVote2,
.storeVote3 {
	position: absolute;
	width: 30%;
	left: 57%;
	top: 47%;
	font-size: 2.5rem;
	/* background-color: red; */
	color: #FFFFFF;
}


/*.storeVote2 {
	top: 58.8%;
}

.storeVote3 {
	top: 53.5%;
}*/

.line {
	position: relative;
	width: 75%;
	left: 12.5%;
	margin-top: 5%;
}

.listInfo {
	position: relative;
	width: 32%;
	height: 37vw;
	left: 0%;
	margin-right: 1%;
	/* background-color: red; */
	float: left;
	/*margin-bottom: 50px;*/
}

.listHead {
	position: absolute;
	width: 78%;
	left: 11%;
	top: 1.4%;
	font-size: 2rem;
	border-radius: 50%;
	border: 6px solid #FFFFFF;
}

.listName {
	position: absolute;
	width: 100%;
	left: 5%;
	top: 60%;
	font-size: 2.5rem;
	text-align: center;
	color: #FFFFFF;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* background-color: red; */
}

.listNum {
	position: absolute;
	width: 34%;
	left: 7%;
	top: 73%;
	font-size: 1.6rem;
	/* background-color: red; */
	color: #FFFFFF;
}

.listVote {
	position: absolute;
	width: 58%;
	left: 44%;
	top: 73%;
	font-size: 1.6rem;
	/*background-color: red;*/
	color: #FFFFFF;
	text-align: left;
}

.page5-1 {
	width: 20.1%;
	left: 4.9%;
	top: 11.7%;
}

.page5-2 {
	width: 27.9%;
	left: 64.7%;
	top: 11.2%;
}

.page5-3 {
	width: 5.5%;
	right: 0;
	top: 21.9%;
}

.infoBox {
	position: absolute;
	width: 80%;
	left: 10%;
	height: 89.6vw;
	top: 24.1%;
	/* background-color: red; */
}

.photoCotainer {
	position: absolute;
	width: 59%;
	left: 19%;
	height: 67.6vw;
	top: 0.1%;
	border: 6px solid #fff;
	background-color: transparent;
}

.page5-4,
.page10-1 {
	width: 100%;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
}

.page5-5 {
	width: 37.2%;
	left: 31.5%;
	top: 4.2%;
}

.page5-6 {
	width: 27.6%;
	left: 5.8%;
	top: 82.4%;
}

.page5-7 {
	width: 27.6%;
	left: 36.1%;
	top: 82.4%;
}

.page5-8 {
	width: 27.6%;
	left: 66.3%;
	top: 82.4%;
}

.page6 {
	background-color: rgba(0, 0, 0, 0.6);
}

.infoName {
	position: absolute;
	width: 100%;
	/* left: 5%; */
	top: 79.1%;
	font-size: 5rem;
	text-align: center;
	color: #FFFFFF;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	/* background-color: red; */
}

.infoAddress {
	position: absolute;
	width: 100%;
	/* left: 5%; */
	top: 91.4%;
	font-size: 2.3rem;
	text-align: center;
	color: #FFFFFF;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	/* background-color: red; */
}

.infoNum {
	position: absolute;
	width: 32%;
	left: 9%;
	top: 103.4%;
	font-size: 3.5rem;
	/* background-color: red; */
	color: #FFFFFF;
}

.infoVote {
	position: absolute;
	width: 61%;
	left: 45%;
	top: 103.4%;
	font-size: 3.5rem;
	/* background-color: red; */
	color: #FFFFFF;
}

.infoBox1 {
	position: absolute;
	width: 80%;
	left: 10%;
	height: 90.9vw;
	top: 27.2%;
	background-color: #fff;
}

.page6-1 {
	width: 93.6%;
	left: 3.8%;
	top: 3.7%;
}

.page6-2 {
	width: 21.1%;
	left: 6.7%;
	top: 5.7%;
}

.page6-3 {
	width: 42.1%;
	left: 6.7%;
	top: 80.7%;
}

.page6-4 {
	width: 42.1%;
	left: 52.5%;
	top: 80.7%;
}

.page7 {
	background-color: #FFFFFF;
}

.infoBox1Name {
	position: absolute;
	width: 84%;
	left: 7%;
	top: 56.4%;
	font-size: 3.5rem;
	/* background-color: red; */
	color: #000;
	font-weight: 700;
}

.smallName {
	font-size: 2rem;
}

.infoBox1address {
	position: absolute;
	width: 77%;
	left: 7%;
	top: 65.4%;
	font-size: 2rem;
	/* background-color: red; */
	color: #000;
}

.infoBox2 {
	position: absolute;
	width: 100%;
	left: 0;
	height: 145.9vw;
	top: 9.8%;
	/* background-color: red; */
	overflow-y: scroll;
}

.page7-1 {
	position: relative;
	width: 100%;
	left: 0;
	margin-bottom: 10px;
}

.page7-2 {
	position: relative;
	width: 100%;
	left: 0;
	margin-bottom: 10px;
}

.page7-3 {
	width: 40.1%;
	left: 52.4%;
	top: 83.7%;
}

.infoBox1Name2 {
	position: relative;
	width: 84%;
	left: 7%;
	/* top: 56.4%; */
	font-size: 3.5rem;
	/* background-color: red; */
	color: #000;
	font-weight: 700;
	margin-bottom: 0px;
	margin-top: 30px;
}

.smallName2 {
	font-size: 2rem;
}

.infoBox1address2 {
	position: relative;
	width: 77%;
	left: 7%;
	/* top: 65.4%; */
	font-size: 2rem;
	/* background-color: red; */
	color: #000;
}

.line1 {
	position: relative;
	width: 50px;
	height: 2px;
	margin-top: 50px;
	background-color: #000;
	margin-left: 54px;
}

.infoText {
	position: relative;
	width: 85%;
	left: 7%;
	/* top: 65.4%; */
	font-size: 2rem;
	/* background-color: red; */
	color: #000;
	margin-top: 50px;
	letter-spacing: 1px;
	text-align: justify;
}

#canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.page8-1 {
	width: 20%;
	left: 5%;
	top: 11%;
}

.page8-2 {
	width: 59.7%;
	left: 20.3%;
	top: 19.4%;
}

.tuijian {
	position: absolute;
	width: 100%;
	left: 0;
	top: 47.3%;
	text-align: center;
	font-size: 5rem;
	/* background-color: red; */
	color: #fff;
	font-weight: 700;
}

.page8-3 {
	width: 36%;
	left: 32%;
	top: 56%;
	font-size: 2rem;
	border-radius: 50%;
	border: 4px solid #FFFFFF;
}

.qrcode {
	position: absolute;
	width: 18vw;
	height: 18vw;
	top: 77%;
	left: 66%;
	border: 4px solid #fff;
}

.page8-4 {
	width: 37.8%;
	left: 15.8%;
	top: 78.1%;
}

.page8-5 {
	width: 37.8%;
	left: 15.8%;
	top: 78.1%;
}

.save {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0;
}

.shibie {
	position: absolute;
	width: 17%;
	left: 69%;
	top: 87.1%;
	/* text-align: center; */
	font-size: 1.4rem;
	/* background-color: red; */
	color: #fff;
}

.page9-1 {
	width: 20.3%;
	left: 4.9%;
	top: 11%;
}

.page9-2 {
	width: 80.7%;
	left: 9.6%;
	top: 19.6%;
}

.page9-3 {
	width: 46.4%;
	left: 26.8%;
	top: 75.5%;
	animation: pulse 2s 0s linear both infinite;
}


/*.page10-1 {
	width: 60%;
	left: 20%;
	top: 0.6%;
}*/

.page10-2 {
	width: 37.2%;
	left: 31.5%;
	top: 4.2%;
}

.page10-3 {
	width: 20.1%;
	left: 4.9%;
	top: 11.7%;
}

.page10-4 {
	width: 27.9%;
	left: 64.7%;
	top: 11.2%;
}

.page10-5 {
	width: 43.9%;
	left: 52.7%;
	top: 93.5%;
}

.friendsinfoBox {
	position: absolute;
	width: 80%;
	left: 10%;
	height: 89.6vw;
	top: 21.5%;
	/* background-color: red; */
}

.friendsinfoName {
	position: absolute;
	width: 100%;
	/* left: 5%; */
	top: 77.6%;
	font-size: 4rem;
	text-align: center;
	color: #FFFFFF;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	/* background-color: red; */
}

.friendsinfoAddress {
	position: absolute;
	width: 100%;
	/* left: 5%; */
	top: 88.4%;
	font-size: 2.3rem;
	text-align: center;
	color: #FFFFFF;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	/* background-color: red; */
}

.friendsinfoNum {
	position: absolute;
	width: 32%;
	left: 6%;
	top: 91.5%;
	font-size: 2.8rem;
	/* background-color: red; */
	color: #FFFFFF;
}

.friendsinfoVote {
	position: absolute;
	width: 61%;
	left: 6%;
	top: 97.8%;
	font-size: 2.8rem;
	/* background-color: red; */
	color: #FFFFFF;
}

.friendslistCotainer {
	position: absolute;
	width: 76.3%;
	left: 11.5%;
	height: 28.6vw;
	top: 76%;
	/*background-color: red;*/
}

.dialogue-tips {
	position: absolute;
	width: 70%;
	background: rgba(0, 0, 0, .6);
	border-radius: 20px;
	color: #fff;
	text-align: center;
	padding: 5%;
	font-size: 3rem;
	letter-spacing: 5px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
}

.dialogBox {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	overflow: hidden;
	z-index: 999;
}

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

.musicBtn {
	position: fixed;
	width: 6%;
	bottom: 2%;
	left: 4%;
	z-index: 999;
}

.rotate {
	-webkit-animation: rotate 6s 0s linear both infinite;
	animation: rotate 6s 0s linear both infinite;
}