quepass_game/css/index.css

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
div,
dl,
dt,dd,
section {
	padding: 0;
	margin: 0;
}

html,
body {
	width: 100%;
	height: 100%;
	font-family: "微软雅黑";
}

.waitting {
	z-index: 99;
	background-color: #7f943d;

}
.pacman {
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

@-webkit-keyframes rotate_pacman_half_up {
	0% {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg);
	}

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

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

@keyframes rotate_pacman_half_up {
	0% {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg);
	}

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

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

@-webkit-keyframes rotate_pacman_half_down {
	0% {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	50% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

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

@keyframes rotate_pacman_half_down {
	0% {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	50% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

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

@-webkit-keyframes pacman-balls {
	75% {
		opacity: 0.7;
	}

	100% {
		-webkit-transform: translate(-100px, -6.25px);
		transform: translate(-100px, -6.25px);
	}
}

@keyframes pacman-balls {
	75% {
		opacity: 0.7;
	}

	100% {
		-webkit-transform: translate(-100px, -6.25px);
		transform: translate(-100px, -6.25px);
	}
}

.pacman>div:nth-child(2) {
	-webkit-animation: pacman-balls 1s 0s infinite linear;
	animation: pacman-balls 1s 0s infinite linear;
}

.pacman>div:nth-child(3) {
	-webkit-animation: pacman-balls 1s 0.33s infinite linear;
	animation: pacman-balls 1s 0.33s infinite linear;
}

.pacman>div:nth-child(4) {
	-webkit-animation: pacman-balls 1s 0.66s infinite linear;
	animation: pacman-balls 1s 0.66s infinite linear;
}

.pacman>div:nth-child(5) {
	-webkit-animation: pacman-balls 1s 0.99s infinite linear;
	animation: pacman-balls 1s 0.99s infinite linear;
}

.pacman>div:first-of-type {
	width: 0px;
	height: 0px;
	border-right: 25px solid transparent;
	border-top: 25px solid #fff;
	border-left: 25px solid #fff;
	border-bottom: 25px solid #fff;
	border-radius: 25px;
	-webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
	animation: rotate_pacman_half_up 0.5s 0s infinite;
}

.pacman>div:nth-child(2) {
	width: 0px;
	height: 0px;
	border-right: 25px solid transparent;
	border-top: 25px solid #fff;
	border-left: 25px solid #fff;
	border-bottom: 25px solid #fff;
	border-radius: 25px;
	-webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
	animation: rotate_pacman_half_down 0.5s 0s infinite;
	margin-top: -50px;
}

.pacman>div:nth-child(3),
.pacman>div:nth-child(4),
.pacman>div:nth-child(5),
.pacman>div:nth-child(6) {
	background-color: #fff;
	width: 15px;
	height: 15px;
	border-radius: 100%;
	margin: 2px;
	width: 10px;
	height: 10px;
	position: absolute;
	-webkit-transform: translate(0, -6.25px);
	-ms-transform: translate(0, -6.25px);
	transform: translate(0, -6.25px);
	top: 25px;
	left: 100px;
}
.wait-text{
	display:block;
	color:#fff;
	font-size:12px;
	margin-top:20px;
}

.all {
	position: relative;
	width: 100%;
	height: 100%;

}

.all section {
	position: absolute;
}

.ren-text{
	width:20vw;
	float:right;
	color:#fff;
	font-size:14px;
	position:absolute;
	z-index:2;
	right:0;
	top:10px;
}
.full {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.bg {
	background-repeat: repeat-y;
	background-size: 100vw 177vw;
	background-image: url(../img/bg.png);
	background-position-x: center;
	animation: bg 6s infinite linear;
}

@keyframes bg {
	0% {
		background-position-y: 0;
	}

	100% {
		background-position-y: -177vw;
	}
}

.line {
	position: absolute;
	width: 1vw;
	top: 10%;
	bottom: 5%;
	background: url(../img/line.png) repeat center top;
	background-size: 100% auto;
}

.l2 {
	left: 35%;
}

.l3 {
	left: 65%;
}

#renBox {
	z-index: 11;
}
.ren-box{
	bottom:2vh;
}

.ren-num {
	position:absolute;
	bottom:0;
	width: 25vw;
	height: 5vw;
	text-align: center;
	box-sizing: border-box;
	line-height: 5vw;
	/* background-color: rgba(255, 255, 255, 0.8); */
	border-radius: 50%;
	font-size: 3vw;

}

.ren-num>span {
	font-size: 5vw;
}

.ren1 {
	left: 7vw;
}

.ren2 {
	left: 42vw;
}

.ren3 {
	left: 73vw;
}

.time {
	width: 20vw;
	height: 20vw;
	border: 5px solid #FEDE82;
	border-radius: 50%;
	background-color: #fff;
	top: 1vw;
	left: 3vw;
	z-index: 3;
	line-height: 20vw;
	text-align: center;
	font-size: 11vw;
	color: #ff5216;
}

.question-box {
	top: 10vw;
	width: 92vw;
	background: url(../img/qus-top.png) no-repeat center top;
	background-size: auto 11vw;
	left: 4vw;
}

#go,
#renBox,
#endBox,
#fail,
#success {
	display: none;
}
.mute { position: absolute; z-index: 999; top: 5vw; right: 5vw; width: 8vw; height: 8vw; background: url(../img/mute.png) no-repeat; background-size: 100% auto; opacity: 1;}
.mute * { position: absolute; width: 100%; height: 100%; background: url(../img/mute.png) no-repeat; background-size: 100% auto;}
.mute dt {-webkit-animation: muteANI 2s linear infinite;  background-position: 0 41%;}
.mute dd { display: none; background-position: 0 83.5%; }
.mute.on dt { display: none;}
.mute.on dd { display: block;}
@-webkit-keyframes muteANI{
	0%{ -webkit-transform: rotate(0deg);}
	100%{-webkit-transform: rotate(360deg);}
}

.question {
	box-sizing: border-box;
	border: 5px solid #fede82;
	border-radius: 5vw;
	background-color: rgba(0, 0, 0, 0.8);
	width: 100%;
	min-height: 30vw;
	margin-top: 10vw;
	padding: 10px;
	padding-bottom: 5vw;
	color: #fff;
	line-height: 1.8;

}

.question>img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.text {
	position: absolute;
	width: 30vw;
	height: 9.7vw;
	background: url(../img/text-bg.png) no-repeat center center;
	background-size: contain;
	bottom: -4vw;
	left: 31vw;
	font-size: 18px;
	text-align: center;
	line-height: 9.7vw;
}

.box {
	position: absolute;
	left: 5%;
	width: 90%;
	top: 10%;
	bottom: 20%;
	/* padding:0 1vw;
	height:119vw;
	overflow:hidden; */
}

.answer-box {
	width: 90%;
	left: 5%;
	bottom: 10vw;
	z-index: 12;
}

.ans {
	position: absolute;
	bottom: 0;
	width: 20vw;
	height: 20vw;
	border-radius: 50%;
	border: 3px solid #FEDE82;
	font-size: 12vw;
	text-align: center;
	line-height: 20vw;
	color: #fff;
	font-weight: bold;
	overflow: hidden;
}

.ans.active {
	transform: translate(3px, 3px);
	-webkit-transform: translate(3px, 3px);
}

.ans.active:before {
	content: "";
	position: absolute;
	background: rgba(0, 0, 0, 0.3);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.ans-1 {
	left: 5vw;
	background-color: #09874b;
}

.ans-2 {
	left: 35vw;
	background-color: #008aa2;
}

.ans-3 {
	left: 65vw;
	background-color: #be4b46;
}

.trapbox {
	display: none;
}

.trap {
	position: absolute;
	bottom: 5%;
	width: 35vw;
	height: 32vw;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 95% auto;
	animation: ani 2s both linear;
	z-index: 11;
}

.trap.r0 {
	left: 0
}

.trap.r1 {
	left: 35vw;
}

.trap.r2 {
	left: 62vw;
}

.trap1 {
	background-image: url(../img/trap1.png);
}

.trap2 {
	background-image: url(../img/trap2.png);
}

.trap3 {
	background-image: url(../img/trap3.png);
}

.trap4 {
	background-image: url(../img/trap4.png);
}

@keyframes ani {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-200vw);
	}
}

.end-box {
	z-index: 12;
	background: rgba(0, 0, 0, 0.8);
}

.end-box:before {
	content: "";
	position: absolute;
	top: 20vh;
	left: 10vw;
	width: 80vw;
	height: 5vh;
	background: url(../img/qus-top.png) no-repeat center top;
	background-size: auto 5vh;
}

.end {
	margin: 25vh auto 0;
	background-color: #fede82;
	height: 60vw;
	width: 80vw;
	border-radius: 5vw;
	box-sizing: border-box;
	padding: 20vw 5px;
	line-height: 10vw;
	font-size: 6vw;
	text-align: center;
	color: #FF5216;
	font-weight: bold;
}

.figure {
	width: 10vw;
	height: 10vw;
	background-repeat: no-repeat;
	background-image: url(../img/figure.png);
	background-size: 50vw auto;
	position: absolute;
	transition: all 1s;
	left: -20vw;
	bottom: 100vh;
}

.figure.err {
	transform: translateY(-100vh);
	-webkit-transform: translateY(-100vh);
	transition: all 2s linear;
}

.figure.me {
	z-index: 10;
}

.figure.me:before,
.figure.me:after {
	z-index: 9;
	content: "";
	position: absolute;
	left: 0vw;
}

.figure.me:before {
	content: "me";
	top: -12vw;
	width: 10vw;
	height: 10vw;
	background-color: #fff;
	border-radius: 50%;
	z-index: 10;
	font-size: 4.5vw;
	line-height: 10vw;
	text-align: center;
	font-weight: bold;
	color: #a8483b;
}

.figure.me:after {
	top: -6vw;
	border-top: 7vw solid #fff;
	border-left: 5vw solid transparent;
	border-right: 5vw solid transparent;
}

.f1 {
	background-position: 1vw -1.5vw;
}

.f2 {
	background-position: -9vw -1.5vw;
}

.f3 {
	background-position: -17.5vw 0;
	background-size: 45vw auto;
}

.f4 {
	background-position: -30vw -1.5vw;
}

.f5 {
	background-position: -40.8vw -1.5vw;
}

.f6 {
	background-position: 1vw -12vw;
}

.f7 {
	background-position: -9vw -12vw;
}

.f8 {
	background-position: -20vw -12vw;
}

.f9 {
	background-position: -30vw -12vw;
}

.f10 {
	background-position: -40.5vw -12vw;
}

.f11 {
	background-position: 1vw -22.8vw;
}

.f12 {
	background-position: -9vw -22.8vw;
}

.f13 {
	background-position: -20vw -22.8vw;
}

.f14 {
	background-position: -30vw -22.8vw;
}

.f15 {
	background-position: -40.8vw -22.8vw;
}

.f16 {
	background-position: 1vw -33vw;
}

.f17 {
	background-position: -9vw -33vw;
}

.f18 {
	background-position: -20vw -33vw;
}

.f19 {
	background-position: -30vw -33vw;
}

.f20 {
	background-position: -40.8vw -33vw;
}

.d0-0 {
	bottom: 0vw;
	left: 20vw;
}

.d0-1 {
	bottom: 0vw;
	left: 10vw;
}

.d0-2 {
	bottom: 0vw;
	left: 0vw;
}

.d0-3 {
	bottom: 10vw;
	left: 20vw;
}

.d0-4 {
	bottom: 10vw;
	left: 10vw;
}

.d0-5 {
	bottom: 10vw;
	left: 0vw;
}

.d0-6 {
	bottom: 20vw;
	left: 20vw;
}

.d0-7 {
	bottom: 20vw;
	left: 10vw;
}

.d0-8 {
	bottom: 20vw;
	left: 0vw;
}

.d0-9 {
	bottom: 30vw;
	left: 20vw;
}

.d0-10 {
	bottom: 30vw;
	left: 10vw;
}

.d0-11 {
	bottom: 30vw;
	left: 0vw;
}

.d0-12 {
	bottom: 40vw;
	left: 20vw;
}

.d0-13 {
	bottom: 40vw;
	left: 10vw;
}

.d0-14 {
	bottom: 40vw;
	left: 0vw;
}

.d0-15 {
	bottom: 50vw;
	left: 20vw;
}

.d0-16 {
	bottom: 50vw;
	left: 10vw;
}

.d0-17 {
	bottom: 50vw;
	left: 0vw;
}

.d0-18 {
	bottom: 60vw;
	left: 20vw;
}

.d0-19 {
	bottom: 60vw;
	left: 10vw;
}

.d0-20 {
	bottom: 60vw;
	left: 0vw;
}

.d0-21 {
	bottom: 70vw;
	left: 20vw;
}

.d0-22 {
	bottom: 70vw;
	left: 10vw;
}

.d0-23 {
	bottom: 70vw;
	left: 0vw;
}

.d0-24 {
	bottom: 80vw;
	left: 20vw;
}

.d0-25 {
	bottom: 80vw;
	left: 10vw;
}

.d0-26 {
	bottom: 80vw;
	left: 0vw;
}

.d0-27 {
	bottom: 90vw;
	left: 20vw;
}

.d0-28 {
	bottom: 90vw;
	left: 10vw;
}

.d0-29 {
	bottom: 90vw;
	left: 0vw;
}

.d0-30 {
	bottom: 100vw;
	left: 20vw;
}

.d0-31 {
	bottom: 100vw;
	left: 10vw;
}

.d0-32 {
	bottom: 100vw;
	left: 0vw;
}

.d0-33 {
	bottom: 110vw;
	left: 20vw;
}

.d0-34 {
	bottom: 110vw;
	left: 10vw;
}

.d0-35 {
	bottom: 110vw;
	left: 0vw;
}

.d0-36 {
	bottom: 120vw;
	left: 20vw;
}

.d0-37 {
	bottom: 120vw;
	left: 10vw;
}

.d0-38 {
	bottom: 120vw;
	left: 0vw;
}

.d0-39 {
	bottom: 130vw;
	left: 20vw;
}

.d0-40 {
	bottom: 130vw;
	left: 10vw;
}

.d0-41 {
	bottom: 130vw;
	left: 0vw;
}

.d1-0 {
	bottom: 0vw;
	left: 50vw;
}

.d1-1 {
	bottom: 0vw;
	left: 40vw;
}

.d1-2 {
	bottom: 0vw;
	left: 30vw;
}

.d1-3 {
	bottom: 10vw;
	left: 50vw;
}

.d1-4 {
	bottom: 10vw;
	left: 40vw;
}

.d1-5 {
	bottom: 10vw;
	left: 30vw;
}

.d1-6 {
	bottom: 20vw;
	left: 50vw;
}

.d1-7 {
	bottom: 20vw;
	left: 40vw;
}

.d1-8 {
	bottom: 20vw;
	left: 30vw;
}

.d1-9 {
	bottom: 30vw;
	left: 50vw;
}

.d1-10 {
	bottom: 30vw;
	left: 40vw;
}

.d1-11 {
	bottom: 30vw;
	left: 30vw;
}

.d1-12 {
	bottom: 40vw;
	left: 50vw;
}

.d1-13 {
	bottom: 40vw;
	left: 40vw;
}

.d1-14 {
	bottom: 40vw;
	left: 30vw;
}

.d1-15 {
	bottom: 50vw;
	left: 50vw;
}

.d1-16 {
	bottom: 50vw;
	left: 40vw;
}

.d1-17 {
	bottom: 50vw;
	left: 30vw;
}

.d1-18 {
	bottom: 60vw;
	left: 50vw;
}

.d1-19 {
	bottom: 60vw;
	left: 40vw;
}

.d1-20 {
	bottom: 60vw;
	left: 30vw;
}

.d1-21 {
	bottom: 70vw;
	left: 50vw;
}

.d1-22 {
	bottom: 70vw;
	left: 40vw;
}

.d1-23 {
	bottom: 70vw;
	left: 30vw;
}

.d1-24 {
	bottom: 80vw;
	left: 50vw;
}

.d1-25 {
	bottom: 80vw;
	left: 40vw;
}

.d1-26 {
	bottom: 80vw;
	left: 30vw;
}

.d1-27 {
	bottom: 90vw;
	left: 50vw;
}

.d1-28 {
	bottom: 90vw;
	left: 40vw;
}

.d1-29 {
	bottom: 90vw;
	left: 30vw;
}

.d1-30 {
	bottom: 100vw;
	left: 50vw;
}

.d1-31 {
	bottom: 100vw;
	left: 40vw;
}

.d1-32 {
	bottom: 100vw;
	left: 30vw;
}

.d1-33 {
	bottom: 110vw;
	left: 50vw;
}

.d1-34 {
	bottom: 110vw;
	left: 40vw;
}

.d1-35 {
	bottom: 110vw;
	left: 30vw;
}

.d1-36 {
	bottom: 120vw;
	left: 50vw;
}

.d1-37 {
	bottom: 120vw;
	left: 40vw;
}

.d1-38 {
	bottom: 120vw;
	left: 30vw;
}

.d1-39 {
	bottom: 130vw;
	left: 50vw;
}

.d1-40 {
	bottom: 130vw;
	left: 40vw;
}

.d1-41 {
	bottom: 130vw;
	left: 30vw;
}

.d2-0 {
	bottom: 0vw;
	left: 81vw;
}

.d2-1 {
	bottom: 0vw;
	left: 71vw;
}

.d2-2 {
	bottom: 0vw;
	left: 61vw;
}

.d2-3 {
	bottom: 10vw;
	left: 81vw;
}

.d2-4 {
	bottom: 10vw;
	left: 71vw;
}

.d2-5 {
	bottom: 10vw;
	left: 61vw;
}

.d2-6 {
	bottom: 20vw;
	left: 81vw;
}

.d2-7 {
	bottom: 20vw;
	left: 71vw;
}

.d2-8 {
	bottom: 20vw;
	left: 61vw;
}

.d2-9 {
	bottom: 30vw;
	left: 81vw;
}

.d2-10 {
	bottom: 30vw;
	left: 71vw;
}

.d2-11 {
	bottom: 30vw;
	left: 61vw;
}

.d2-12 {
	bottom: 40vw;
	left: 81vw;
}

.d2-13 {
	bottom: 40vw;
	left: 71vw;
}

.d2-14 {
	bottom: 40vw;
	left: 61vw;
}

.d2-15 {
	bottom: 50vw;
	left: 81vw;
}

.d2-16 {
	bottom: 50vw;
	left: 71vw;
}

.d2-17 {
	bottom: 50vw;
	left: 61vw;
}

.d2-18 {
	bottom: 60vw;
	left: 81vw;
}

.d2-19 {
	bottom: 60vw;
	left: 71vw;
}

.d2-20 {
	bottom: 60vw;
	left: 61vw;
}

.d2-21 {
	bottom: 70vw;
	left: 81vw;
}

.d2-22 {
	bottom: 70vw;
	left: 71vw;
}

.d2-23 {
	bottom: 70vw;
	left: 61vw;
}

.d2-24 {
	bottom: 80vw;
	left: 81vw;
}

.d2-25 {
	bottom: 80vw;
	left: 71vw;
}

.d2-26 {
	bottom: 80vw;
	left: 61vw;
}

.d2-27 {
	bottom: 90vw;
	left: 81vw;
}

.d2-28 {
	bottom: 90vw;
	left: 71vw;
}

.d2-29 {
	bottom: 90vw;
	left: 61vw;
}

.d2-30 {
	bottom: 100vw;
	left: 81vw;
}

.d2-31 {
	bottom: 100vw;
	left: 71vw;
}

.d2-32 {
	bottom: 100vw;
	left: 61vw;
}

.d2-33 {
	bottom: 110vw;
	left: 81vw;
}

.d2-34 {
	bottom: 110vw;
	left: 71vw;
}

.d2-35 {
	bottom: 110vw;
	left: 61vw;
}

.d2-36 {
	bottom: 120vw;
	left: 81vw;
}

.d2-37 {
	bottom: 120vw;
	left: 71vw;
}

.d2-38 {
	bottom: 120vw;
	left: 61vw;
}

.d2-39 {
	bottom: 130vw;
	left: 81vw;
}

.d2-40 {
	bottom: 130vw;
	left: 71vw;
}

.d2-41 {
	bottom: 130vw;
	left: 61vw;
}