tv_xiaoyouxi/game/EnglishTest/style/style.css

* {
	position: absolute;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%, 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}

html,
body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
	font-size: 12px;
}

#content {
	width: 100%;
	height: 100%;
}

#pages {
	width: 100%;
	height: 100%;
	perspective: 500;
	-webkit-perspective: 500;
}

#load {
	width: 100%;
	height: 100%;
	background-color: #fbe8ab;
	z-index: 999;
}

#load .action1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 167.5px;
	height: 85.5px;
	background-image: url(../image/load_1.png);
	transform: translate3d(0, -20px, 0);
	-webkit-transform: translate3d(0, -20px, 0);
	animation: sixth .1s infinite;
	-webkit-animation: sixth .1s infinite;
}

#load .action1.on {
	background-image: url(../image/load_1.png);

}

@keyframes sixth {
	0% {
		transform: translate3d(0, -20px, 0);
		background-image: url(../image/load_1.png)
	}

	50% {
		transform: translate3d(0, -20px, 0);
		background-image: url(../image/load_2.png)
	}

	100% {
		transform: translate3d(0, -20px, 0);
		background-image: url(../image/load_3.png)
	}
}

@-webkit-keyframes sixth {
	0% {
		-webkit-transform: translate3d(0, -20px, 0);
		background-image: url(../image/load_1.png)
	}

	50% {
		-webkit-transform: translate3d(0, -20px, 0);
		background-image: url(../image/load_2.png)
	}

	100% {
		-webkit-transform: translate3d(0, -20px, 0);
		background-image: url(../image/load_3.png)
	}
}

#load .action2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 167.5px;
	height: 85.5px;
	background-image: url(../image/load_5.png);
	transform: translate3d(0, -20px, 0);
	-webkit-transform: translate3d(0, -20px, 0);
	animation: seventh .1s infinite;
	-webkit-animation: seventh .1s infinite;
}

#load .action2.on {
	background-image: url(../image/load_5.png);

}

@keyframes seventh {
	0% {
		transform: translate3d(0, -20px, 0) scale(1)
	}

	25% {
		transform: translate3d(0, -20px, 0) scale(1.03)
	}

	50% {
		transform: translate3d(0, -20px, 0) scale(1.06)
	}

	75% {
		transform: translate3d(0, -20px, 0) scale(1.1)
	}

	100% {
		transform: translate3d(0, -20px, 0) scale(1)
	}
}

@-webkit-keyframes seventh {
	0% {
		-webkit-transform: translate3d(0, -20px, 0) scale(1)
	}

	25% {
		-webkit-transform: translate3d(0, -20px, 0) scale(1.03)
	}

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

	75% {
		-webkit-transform: translate3d(0, -20px, 0) scale(1.1)
	}

	100% {
		-webkit-transform: translate3d(0, -20px, 0) scale(1)
	}
}

#load .pic {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 80px;
	height: 30px;
	background-image: url(../image/load_4.png);
	transform: translate3d(0, 55px, 0);
	-webkit-transform: translate3d(0, 55px, 0);
}

#load .text {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 80px;
	height: 30px;
	color: #09242c;
	font-size: 20px;
	text-align: center;
	line-height: 30px;
	font-weight: 600;
	transform: translate3d(0, 35px, 0);
	-webkit-transform: translate3d(0, 35px, 0);
}

#load.out {
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: all 0s;
	-webkit-transition: all 0s;
}

#bg {
	width: 100%;
	height: 100%;
	background-image: url(../image/bg.jpg);
	opacity: 0;
}

#bg.in {
	opacity: 1;
	transition: all .1s;
	-webkit-transition: all .1s;
}

#bgq {
	width: 100%;
	height: 100%;
	background-image: url(../image/bgq.jpg);
	display: none;
}

#fpage {
	width: 100%;
	height: 100%;
	opacity: 0;
	transform-origin: left;
	-webkit-transform-origin: left;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

#fpage.in {
	opacity: 1;
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#fpage.out {
	opacity: 1;
	transform: rotateY(-90deg);
	-webkit-transform: rotateY(-90deg);
	overflow: hidden;
	transition: all 1s;
	-webkit-transition: all 1s;
}

#fpage .layer {
	width: 100%;
	height: 100%;
}

#begin {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(0, 218px, 0);
	-webkit-transform: translate3d(0, 218px, 0);
	width: 115px;
	height: 40px;
	background-image: url(../image/fp_8.png);
	display: none;
}

/*#fpage.in #begin
{
    display:block;
    transition:all .5s 4s;
    -webkit-transition:all .5s 4s;
}*/
#fpage .foil {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(0, -95px, 0) scale(.1);
	-webkit-transform: translate3d(0, -95px, 0)scale(.1);
	width: 320px;
	height: 302px;
	background-image: url(../image/fp_1a.png);
	opacity: 0;
}

#fpage.in .foil {
	opacity: 1;
	transform: translate3d(0, -95px, 0) scale(1);
	-webkit-transform: translate3d(0, -95px, 0) scale(1);
	transition: all .5s .5s;
	-webkit-transition: all .5s .5s;
}

#fpage .foil.in {
	background-image: url(../image/fp_1b.png);
	transition: all .2s;
	-webkit-transition: all .2s;
	animation: second .4s .2s forwards;
	-webkit-animation: second .4s .2s forwards;
}

@keyframes second {
	0% {
		transform: translate3d(0, -95px, 0) scale(1) rotate3d(1, 1, 1, 0deg);
	}

	10% {
		transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, -4deg);
	}

	30% {
		transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, 0deg);
	}

	40% {
		transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, 4deg);
	}

	50% {
		transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, 0deg);
	}

	60% {
		transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, -4deg);
	}

	70% {
		transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, 0deg);
	}

	80% {
		transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, 4deg);
	}

	90% {
		transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, -4deg);
	}

	100% {
		transform: translate3d(0, -95px, 0) scale(1) rotate3d(1, 1, 1, 0deg);
	}
}

@-webkit-keyframes second {
	0% {
		-webkit-transform: translate3d(0, -95px, 0) scale(1) rotate3d(1, 1, 1, 0deg);
	}

	10% {
		-webkit-transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, -4deg);
	}

	30% {
		-webkit-transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, 0deg);
	}

	40% {
		-webkit-transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, 4deg);
	}

	50% {
		-webkit-transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, 0deg);
	}

	60% {
		-webkit-transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, -4deg);
	}

	70% {
		-webkit-transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, 0deg);
	}

	80% {
		-webkit-transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, 4deg);
	}

	90% {
		-webkit-transform: translate3d(0, -95px, 0) scale(1.1) rotate3d(1, 1, 1, -4deg);
	}

	100% {
		-webkit-transform: translate3d(0, -95px, 0) scale(1) rotate3d(1, 1, 1, 0deg);
	}
}

#fpage.in .men.in {
	background-image: url(../image/fp_2b.png);
	transition: all .1s;
	-webkit-transition: all .1s;
	animation: third .1s 0s forwards;
	-webkit-animation: third .1s 0s forwards;
}

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

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes third {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}






#fpage .men {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(0, -83px, 0);
	-webkit-transform: translate3d(0, -83px, 0);
	width: 241px;
	height: 217.5px;
	background-image: url(../image/fp_2a.png);
	opacity: 0;
}

#fpage.in .men {
	opacity: 1;
	transform: translate3d(0, -83px, 0);
	-webkit-transform: translate3d(0, -83px, 0);
	transition: all 1s .3s;
	-webkit-transition: all 1s .3s;
}

#fpage .sound {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(3px, -95px, 0);
	-webkit-transform: translate3d(3px, -95px, 0);
	width: 309px;
	height: 293px;
	opacity: 1;
}

#fpage .no1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(-98px, -69px, 0);
	-webkit-transform: translate3d(-98px, -69px, 0);
	width: 109px;
	height: 116px;
	background-image: url(../image/fp_3a.png);
	opacity: 0;
}

#fpage .no2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(-44px, -107px, 0);
	-webkit-transform: translate3d(-44px, -107px, 0);
	width: 50.5px;
	height: 81px;
	background-image: url(../image/fp_3b.png);
	opacity: 0;
}

#fpage .no3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(115px, -65px, 0);
	-webkit-transform: translate3d(115px, -65px, 0);
	width: 78px;
	height: 105px;
	background-image: url(../image/fp_3c.png);
	opacity: 0;
}

#fpage .no4 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(-94px, 114px, 0);
	-webkit-transform: translate3d(-94px, 114px, 0);
	width: 70px;
	height: 67px;
	background-image: url(../image/fp_3d.png);
	opacity: 0;
}

#fpage .no1.in {
	opacity: 1;
	transition: all .5s .4s;
	-webkit-transition: all .5s .4s;
}

#fpage .no2.in {
	opacity: 1;
	transition: all .5s .8s;
	-webkit-transition: all .5s .8s;
}

#fpage .no3.in {
	opacity: 1;
	transition: all .5s .6s;
	-webkit-transition: all .5s .6s;
}

#fpage .no4.in {
	opacity: 1;
	transition: all .5s 1s;
	-webkit-transition: all .5s 1s;
}

#fpage .text1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(138px, 63px, 0);
	-webkit-transform: translate3d(138px, 63px, 0);
	width: 242px;
	height: 72.5px;
	background-image: url(../image/fp_4.png);
	opacity: 0;
}

#fpage.in .text1 {
	opacity: 1;
	transform: translate3d(-3px, 63px, 0);
	-webkit-transform: translate3d(-3px, 63px, 0);
	transition: all .5s 1.2s;
	-webkit-transition: all .5s 1.2s;
}

#fpage .frame {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(-132px, 150px, 0);
	-webkit-transform: translate3d(-132px, 150px, 0);
	width: 238.5px;
	height: 130.5px;
	background-image: url(../image/fp_5.png);
	opacity: 0;
}

#fpage.in .frame {
	opacity: 1;
	transform: translate3d(10px, 134px, 0);
	-webkit-transform: translate3d(10px, 134px, 0);
	transition: all .5s 1.5s;
	-webkit-transition: all .5s 1.5s;
}

#fpage .texta {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 215.5px;
	height: 51px;
	background-image: url(../image/fp_6a.png);
	background-position: left center;
}

#fpage .loca {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(10px, 74px, 0);
	-webkit-transform: translate3d(10px, 74px, 0);
	width: 215.5px;
	height: 51px;
}

#fpage .bya {
	width: 0px;
	height: 114px;
	opacity: 0;
}

#fpage.in .bya {
	opacity: 1;
	width: 215.5px;
	transition: all .8s 2.1s;
	-webkit-transition: all .8s 2.1s;
	overflow: hidden;
}

#fpage .textb {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 215.5px;
	height: 51px;
	background-image: url(../image/fp_6b.png);
	background-position: left center;
}

#fpage .locb {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(10px, 104px, 0);
	-webkit-transform: translate3d(10px, 104px, 0);
	width: 215.5px;
	height: 51px;
}

#fpage .byb {
	width: 0px;
	height: 114px;
	opacity: 0;
}

#fpage.in .byb {
	opacity: 1;
	width: 215.5px;
	transition: all .8s 2.6s;
	-webkit-transition: all .8s 2.6s;
	overflow: hidden;
}

#fpage .textc {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 215.5px;
	height: 43px;
	background-image: url(../image/fp_6c.png);
	background-position: left center;
}

#fpage .locc {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(10px, 134px, 0);
	-webkit-transform: translate3d(10px, 134px, 0);
	width: 215.5px;
	height: 43px;
}

#fpage .byc {
	width: 0px;
	height: 114px;
	opacity: 0;
}

#fpage.in .byc {
	opacity: 1;
	width: 215.5px;
	transition: all .8s 3.1s;
	-webkit-transition: all .8s 3.1s;
	overflow: hidden;
}





#fpage .pen {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: translate3d(-61px, 131px, 0);
	-webkit-transform: translate3d(-61px, 131px, 0);
	width: 48.5px;
	height: 35.5px;
	background-image: url(../image/fp_7.png);
	opacity: 0;
}

#fpage.in .pen {
	animation: first 1.3s 2.2s forwards;
	-webkit-animation: first 1.3s 2.2s forwards;
}

@keyframes first {
	0% {
		transform: translate3d(-61px, 131px, 0);
		opacity: 1;
	}

	18% {
		transform: translate3d(138px, 106px, 0);
		opacity: 1;
	}

	36% {
		transform: translate3d(-61px, 163px, 0);
		opacity: 1;
	}

	54% {
		transform: translate3d(138px, 135px, 0);
		opacity: 1;
	}

	72% {
		transform: translate3d(-61px, 190px, 0);
		opacity: 1;
	}

	90% {
		transform: translate3d(138px, 174px, 0);
		opacity: 1;
	}

	100% {
		transform: translate3d(118px, 200px, 0);
		opacity: 1;
	}
}

@-webkit-keyframes first {
	0% {
		-webkit-transform: translate3d(-61px, 131px, 0);
		opacity: 1;
	}

	18% {
		-webkit-transform: translate3d(138px, 106px, 0);
		opacity: 1;
	}

	36% {
		-webkit-transform: translate3d(-61px, 163px, 0);
		opacity: 1;
	}

	54% {
		-webkit-transform: translate3d(138px, 135px, 0);
		opacity: 1;
	}

	72% {
		-webkit-transform: translate3d(-61px, 190px, 0);
		opacity: 1;
	}

	90% {
		-webkit-transform: translate3d(138px, 174px, 0);
		opacity: 1;
	}

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

#questions {
	width: 100%;
	height: 0;
	opacity: 0;
}

#questions .pro {
	width: 100%;
	height: 100%;
	display: none;
}

#questions.in {
	height: 100%;
	opacity: 1;
	transition: all 0s;
	-webkit-transition: all 0s;
}

#questions .mark-r {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	width: 29px;
	height: 24.5px;
	background-image: url(../image/right.png);
	display: none;
}

#questions .mark-w {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	width: 28px;
	height: 32.5px;
	background-image: url(../image/wrong.png);
	display: none;
}


#question0.in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question0.out {
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
	-webkit-transform: translate3d(-100%, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question0 .not0 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 267.5px;
	height: 213.5px;
	transform: translate3d(0px, -124px, 0);
	-webkit-transform: translate3d(0px, -124px, 0);
	background-image: url(../image/p1_1n.png);
	display: none;
}

#question0 .wrong0 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 267.5px;
	height: 213.5px;
	transform: translate3d(0px, -124px, 0);
	-webkit-transform: translate3d(0px, -124px, 0);
	background-image: url(../image/p1_1w.png);
	display: none;
}

#question0 .right0 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 267.5px;
	height: 213.5px;
	transform: translate3d(0px, -124px, 0);
	-webkit-transform: translate3d(0px, -124px, 0);
	background-image: url(../image/p1_1r.png);
	display: none;
}

#question0 .title0 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 247px;
	height: 94px;
	transform: translate3d(100%, 25px, 0);
	-webkit-transform: translate3d(100%, 25px, 0);
	background-image: url(../image/p1_t.png);
	opacity: 0;
}

#question0 .title0.in {
	opacity: 1;
	transition: all .3s .2s;
	-webkit-transition: all .3s .2s;
	transform: translate3d(0px, 25px, 0);
	-webkit-transform: translate3d(0px, 25px, 0);
}

#question0 .ele0a {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 40px;
	height: 64px;
	transform: translate3d(-101px, 135px, 0);
	-webkit-transform: translate3d(-101px, 135px, 0);
	background-image: url(../image/pen1.png);
	opacity: 1;
}

#question0 .ele0b {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 130.5px;
	height: 162.5px;
	transform: translate3d(67px, 155px, 0);
	-webkit-transform: translate3d(67px, 155px, 0);
	background-image: url(../image/p1_2.png);
	opacity: 1;
}

#question0 .answer0 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 103.5px;
	height: 33.5px;
	transform: translate3d(100%, 93px, 0);
	-webkit-transform: translate3d(100%, 93px, 0);
	background-image: url(../image/p1_aa.png);
	opacity: 0;
}

#question0 .answer0.in {
	opacity: 1;
	transition: all .3s .4s;
	-webkit-transition: all .3s .4s;
	transform: translate3d(-16px, 93px, 0);
	-webkit-transform: translate3d(-16px, 93px, 0);
}

#question0 .answer1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 102.5px;
	height: 35.5px;
	transform: translate3d(100%, 133px, 0);
	-webkit-transform: translate3d(100%, 133px, 0);
	background-image: url(../image/p1_ab.png);
	opacity: 0;
}

#question0 .answer1.in {
	opacity: 1;
	transition: all .3s .6s;
	-webkit-transition: all .3s .6s;
	transform: translate3d(-16px, 133px, 0);
	-webkit-transform: translate3d(-16px, 133px, 0);
}

#question0 .answer2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 104px;
	height: 38.5px;
	transform: translate3d(100%, 174px, 0);
	-webkit-transform: translate3d(100%, 174px, 0);
	background-image: url(../image/p1_ac.png);
	opacity: 0;
}

#question0 .answer2.in {
	opacity: 1;
	transition: all .3s .8s;
	-webkit-transition: all .3s .8s;
	transform: translate3d(-17px, 174px, 0);
	-webkit-transform: translate3d(-17px, 174px, 0);
}

#question0 .answer3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 95px;
	height: 36.5px;
	transform: translate3d(100%, 214px, 0);
	-webkit-transform: translate3d(100%, 214px, 0);
	background-image: url(../image/p1_ad.png);
	opacity: 0;
}

#question0 .answer3.in {
	opacity: 1;
	transition: all .3s 1s;
	-webkit-transition: all .3s 1s;
	transform: translate3d(-21px, 214px, 0);
	-webkit-transform: translate3d(-21px, 214px, 0);
}











#question1.in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question1.out {
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
	-webkit-transform: translate3d(-100%, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question1 .not1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 243.5px;
	height: 209px;
	transform: translate3d(0px, -121px, 0);
	-webkit-transform: translate3d(0px, -121px, 0);
	background-image: url(../image/p2_1n.png);
	display: none;
}

#question1 .wrong1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 243.5px;
	height: 209px;
	transform: translate3d(0px, -121px, 0);
	-webkit-transform: translate3d(0px, -121px, 0);
	background-image: url(../image/p2_1w.png);
	opacity: 1;
	display: none;
}

#question1 .right1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 243.5px;
	height: 209px;
	transform: translate3d(0px, -121px, 0);
	-webkit-transform: translate3d(0px, -121px, 0);
	background-image: url(../image/p2_1r.png);
	opacity: 1;
	display: none;
}

#question1 .title1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 252px;
	height: 96px;
	transform: translate3d(100%, 22px, 0);
	-webkit-transform: translate3d(100%, 22px, 0);
	background-image: url(../image/p2_t.png);
	opacity: 0;
}

#question1 .title1.in {
	opacity: 1;
	transition: all .3s .2s;
	-webkit-transition: all .3s .2s;
	transform: translate3d(0px, 22px, 0);
	-webkit-transform: translate3d(0px, 22px, 0);
}

#question1 .ele1a {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 45.5px;
	height: 72.5px;
	transform: translate3d(-110px, 114px, 0);
	-webkit-transform: translate3d(-110px, 114px, 0);
	background-image: url(../image/pen2.png);
	opacity: 1;
}

#question1 .ele1b {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 124.5px;
	height: 118.5px;
	transform: translate3d(91px, 164px, 0);
	-webkit-transform: translate3d(91px, 164px, 0);
	background-image: url(../image/rubber.png);
	opacity: 1;
}

#question1 .answer0 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 103.5px;
	height: 34px;
	transform: translate3d(100%, 91px, 0);
	-webkit-transform: translate3d(100%, 91px, 0);
	background-image: url(../image/p2_aa.png);
	opacity: 0;
}

#question1 .answer0.in {
	opacity: 1;
	transition: all .3s .4s;
	-webkit-transition: all .3s .4s;
	transform: translate3d(-16px, 91px, 0);
	-webkit-transform: translate3d(-16px, 91px, 0);
}

#question1 .answer1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 102.5px;
	height: 36px;
	transform: translate3d(100%, 130px, 0);
	-webkit-transform: translate3d(100%, 130px, 0);
	background-image: url(../image/p2_ab.png);
	opacity: 0;
}

#question1 .answer1.in {
	opacity: 1;
	transition: all .3s .6s;
	-webkit-transition: all .3s .6s;
	transform: translate3d(-16px, 130px, 0);
	-webkit-transform: translate3d(-16px, 130px, 0);
}

#question1 .answer2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 104px;
	height: 38.5px;
	transform: translate3d(100%, 170px, 0);
	-webkit-transform: translate3d(100%, 170px, 0);
	background-image: url(../image/p2_ac.png);
	opacity: 0;
}

#question1 .answer2.in {
	opacity: 1;
	transition: all .3s .8s;
	-webkit-transition: all .3s .8s;
	transform: translate3d(-17px, 170px, 0);
	-webkit-transform: translate3d(-17px, 170px, 0);
}

#question1 .answer3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 108px;
	height: 36.5px;
	transform: translate3d(100%, 211px, 0);
	-webkit-transform: translate3d(100%, 211px, 0);
	background-image: url(../image/p2_ad.png);
	opacity: 0;
}

#question1 .answer3.in {
	opacity: 1;
	transition: all .3s 1s;
	-webkit-transition: all .3s 1s;
	transform: translate3d(-16px, 211px, 0);
	-webkit-transform: translate3d(-16px, 211px, 0);
}









#question2.in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question2.out {
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
	-webkit-transform: translate3d(-100%, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question2 .not2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 261.5px;
	height: 197.5px;
	transform: translate3d(0px, -150px, 0);
	-webkit-transform: translate3d(0px, -150px, 0);
	background-image: url(../image/p3_1n.png);
	display: none;
}

#question2 .not2 #btn {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 80px;
	height: 80px;
	transform: translate3d(-56px, 30px, 0);
	-webkit-transform: translate3d(-56px, 30px, 0);
	background-image: url(../image/p3_btn.png);
	background-size: 80px 80px;
	border-radius: 40%;
}

#question2 .not2 #btn.on {
	animation: fifth 1.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
	-webkit-animation: fifth 1.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes fifth {
	0% {
		width: 16.1px;
		height: 15.8px;
	}

	100% {
		width: 80.5px;
		height: 79px;
	}
}

@-webkit-keyframes fifth {
	0% {
		width: 16.1px;
		height: 15.8px;
	}

	100% {
		width: 80.5px;
		height: 79px;
	}
}

#question2 .not2 #finger {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 51.5px;
	height: 55.5px;
	transform: translate3d(-84px, 56px, 0);
	-webkit-transform: translate3d(-84px, 56px, 0);
	background-image: url(../image/p3_finger.png);
	animation: fourth 1s infinite;
	-webkit-animation: fourth 1s infinite;
}

@keyframes fourth {
	0% {
		transform: translate3d(-110px, 72px, 0) scale(1);
	}

	50% {
		transform: translate3d(-99px, 64px, 0) scale(1);
	}

	100% {
		transform: translate3d(-110px, 72px, 0) scale(1);
	}
}

@-webkit-keyframes fourth {
	0% {
		-webkit-transform: translate3d(-110px, 72px, 0) scale(1);
	}

	50% {
		-webkit-transform: translate3d(-99px, 64px, 0) scale(1);
	}

	100% {
		-webkit-transform: translate3d(-110px, 72px, 0) scale(1);
	}
}





#question2 .wrong2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 261.5px;
	height: 197.5px;
	transform: translate3d(0px, -150px, 0);
	-webkit-transform: translate3d(0px, -150px, 0);
	background-image: url(../image/p3_1w.png);
	display: none;
}

#question2 .right2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 261.5px;
	height: 197.5px;
	transform: translate3d(0px, -150px, 0);
	-webkit-transform: translate3d(0px, -150px, 0);
	background-image: url(../image/p3_1r.png);
	display: none;
}

#question2 .title2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 251.5px;
	height: 229.5px;
	transform: translate3d(100%, -3px, 0);
	-webkit-transform: translate3d(100%, -3px, 0);
	background-image: url(../image/p3_t.png);
	opacity: 0;
}

#question2 .title2.in {
	opacity: 1;
	transition: all .3s .2s;
	-webkit-transition: all .3s .2s;
	transform: translate3d(0px, -3px, 0);
	-webkit-transform: translate3d(0px, -3px, 0);
}

/*#question2 .ele2a {
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 45.5px;
    height: 72.5px;
    transform: translate3d(-110px,114px,0);
    -webkit-transform: translate3d(-110px,114px,0);
    background-image: url(../image/pen2.png);
    opacity: 1;
}*/

#question2 .ele2b {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 75.5px;
	height: 167.5px;
	transform: translate3d(87px, 150px, 0);
	-webkit-transform: translate3d(87px, 150px, 0);
	background-image: url(../image/p3_radio.png);
}

#question2 .answer0 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 172px;
	height: 34px;
	transform: translate3d(100%, 82px, 0);
	-webkit-transform: translate3d(100%, 82px, 0);
	background-image: url(../image/p3_aa.png);
	opacity: 0;
}

#question2 .answer0.in {
	opacity: 1;
	transition: all .3s .4s;
	-webkit-transition: all .3s .4s;
	transform: translate3d(-16px, 82px, 0);
	-webkit-transform: translate3d(-16px, 82px, 0);
}

#question2 .answer1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 172px;
	height: 37px;
	transform: translate3d(100%, 121px, 0);
	-webkit-transform: translate3d(100%, 121px, 0);
	background-image: url(../image/p3_ab.png);
	opacity: 0;
}

#question2 .answer1.in {
	opacity: 1;
	transition: all .3s .6s;
	-webkit-transition: all .3s .6s;
	transform: translate3d(-16px, 121px, 0);
	-webkit-transform: translate3d(-16px, 121px, 0);
}

#question2 .answer2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 172px;
	height: 36.5px;
	transform: translate3d(100%, 161px, 0);
	-webkit-transform: translate3d(100%, 161px, 0);
	background-image: url(../image/p3_ac.png);
	opacity: 0;
}

#question2 .answer2.in {
	opacity: 1;
	transition: all .3s .8s;
	-webkit-transition: all .3s .8s;
	transform: translate3d(-17px, 161px, 0);
	-webkit-transform: translate3d(-17px, 161px, 0);
}

#question2 .answer3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 172px;
	height: 35px;
	transform: translate3d(100%, 202px, 0);
	-webkit-transform: translate3d(100%, 202px, 0);
	background-image: url(../image/p3_ad.png);
	opacity: 0;
}

#question2 .answer3.in {
	opacity: 1;
	transition: all .3s 1s;
	-webkit-transition: all .3s 1s;
	transform: translate3d(-16px, 202px, 0);
	-webkit-transform: translate3d(-16px, 202px, 0);
}




#question3.in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question3.out {
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
	-webkit-transform: translate3d(-100%, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question3 .not3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 250.5px;
	height: 234px;
	transform: translate3d(2px, -139px, 0);
	-webkit-transform: translate3d(2px, -139px, 0);
	background-image: url(../image/p4_1n.png);
	display: none;
}

#question3 .wrong3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 250.5px;
	height: 234px;
	transform: translate3d(2px, -139px, 0);
	-webkit-transform: translate3d(2px, -139px, 0);
	background-image: url(../image/p4_1w.png);
	opacity: 1;
	display: none;
}

#question3 .right3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 250.5px;
	height: 234px;
	transform: translate3d(2px, -139px, 0);
	-webkit-transform: translate3d(2px, -139px, 0);
	background-image: url(../image/p4_1r.png);
	opacity: 1;
	display: none;
}

#question3 .title3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 243.5px;
	height: 93px;
	transform: translate3d(100%, 10px, 0);
	-webkit-transform: translate3d(100%, 10px, 0);
	background-image: url(../image/p4_t.png);
	opacity: 0;
}

#question3 .title3.in {
	opacity: 1;
	transition: all .3s .2s;
	-webkit-transition: all .3s .2s;
	transform: translate3d(0px, 10px, 0);
	-webkit-transform: translate3d(0px, 10px, 0);
}


#question3 .ele3a {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 83px;
	height: 134px;
	transform: translate3d(-118px, 145px, 0);
	-webkit-transform: translate3d(-118px, 145px, 0);
	background-image: url(../image/p4_bow.png);
	opacity: 1;
}

#question3 .ele3b {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 44px;
	height: 60.5px;
	transform: translate3d(86px, 147px, 0);
	-webkit-transform: translate3d(86px, 147px, 0);
	background-image: url(../image/p4_rubber.png);
	opacity: 1;
}

#question3 .answer0 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 151px;
	height: 33.5px;
	transform: translate3d(100%, 80px, 0);
	-webkit-transform: translate3d(100%, 80px, 0);
	background-image: url(../image/p4_aa.png);
	opacity: 0;
}

#question3 .answer0.in {
	opacity: 1;
	transition: all .3s .4s;
	-webkit-transition: all .3s .4s;
	transform: translate3d(-12px, 80px, 0);
	-webkit-transform: translate3d(-12px, 80px, 0);
}

#question3 .answer1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 151px;
	height: 36.5px;
	transform: translate3d(100%, 120px, 0);
	-webkit-transform: translate3d(100%, 120px, 0);
	background-image: url(../image/p4_ab.png);
	opacity: 0;
}

#question3 .answer1.in {
	opacity: 1;
	transition: all .3s .6s;
	-webkit-transition: all .3s .6s;
	transform: translate3d(-12px, 120px, 0);
	-webkit-transform: translate3d(-12px, 120px, 0);
}

#question3 .answer2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 151px;
	height: 36px;
	transform: translate3d(100%, 159px, 0);
	-webkit-transform: translate3d(100%, 159px, 0);
	background-image: url(../image/p4_ac.png);
	opacity: 0;
}

#question3 .answer2.in {
	opacity: 1;
	transition: all .3s .8s;
	-webkit-transition: all .3s .8s;
	transform: translate3d(-13px, 159px, 0);
	-webkit-transform: translate3d(-13px, 159px, 0);
}

#question3 .answer3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 151px;
	height: 35px;
	transform: translate3d(100%, 199px, 0);
	-webkit-transform: translate3d(100%, 199px, 0);
	background-image: url(../image/p4_ad.png);
	opacity: 0;
}

#question3 .answer3.in {
	opacity: 1;
	transition: all .3s 1s;
	-webkit-transition: all .3s 1s;
	transform: translate3d(-12px, 199px, 0);
	-webkit-transform: translate3d(-12px, 199px, 0);
}


#question4.in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question4.out {
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
	-webkit-transform: translate3d(-100%, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question4 .not4 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 239.5px;
	height: 198.5px;
	transform: translate3d(2px, -130px, 0);
	-webkit-transform: translate3d(2px, -130px, 0);
	background-image: url(../image/p5_1n.png);
	display: none;
}

#question4 .wrong4 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 239.5px;
	height: 198.5px;
	transform: translate3d(2px, -130px, 0);
	-webkit-transform: translate3d(2px, -130px, 0);
	background-image: url(../image/p5_1w.png);
	opacity: 1;
	display: none;
}

#question4 .right4 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 239.5px;
	height: 198.5px;
	transform: translate3d(2px, -130px, 0);
	-webkit-transform: translate3d(2px, -130px, 0);
	background-image: url(../image/p5_1r.png);
	opacity: 1;
	display: none;
}

#question4 .title4 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 245px;
	height: 93px;
	transform: translate3d(100%, 10px, 0);
	-webkit-transform: translate3d(100%, 10px, 0);
	background-image: url(../image/p5_t.png);
	opacity: 0;
}

#question4 .title4.in {
	opacity: 1;
	transition: all .3s .2s;
	-webkit-transition: all .3s .2s;
	transform: translate3d(0px, 10px, 0);
	-webkit-transform: translate3d(0px, 10px, 0);
}


#question4 .ele4a {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 81px;
	height: 63px;
	transform: translate3d(-114px, 150px, 0);
	-webkit-transform: translate3d(-114px, 150px, 0);
	background-image: url(../image/p5_bow.png);
	opacity: 1;
}

#question4 .ele4b {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 141.5px;
	height: 109px;
	transform: translate3d(50px, 120px, 0);
	-webkit-transform: translate3d(50px, 120px, 0);
	background-image: url(../image/p5_ink.png);
	opacity: 1;
}

#question4 .answer0 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 196.5px;
	height: 34px;
	transform: translate3d(100%, 80px, 0);
	-webkit-transform: translate3d(100%, 80px, 0);
	background-image: url(../image/p5_aa.png);
	opacity: 0;
}

#question4 .answer0.in {
	opacity: 1;
	transition: all .3s .4s;
	-webkit-transition: all .3s .4s;
	transform: translate3d(-12px, 80px, 0);
	-webkit-transform: translate3d(-12px, 80px, 0);
}

#question4 .answer1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 196.5px;
	height: 36px;
	transform: translate3d(100%, 120px, 0);
	-webkit-transform: translate3d(100%, 120px, 0);
	background-image: url(../image/p5_ab.png);
	opacity: 0;
}

#question4 .answer1.in {
	opacity: 1;
	transition: all .3s .6s;
	-webkit-transition: all .3s .6s;
	transform: translate3d(-12px, 120px, 0);
	-webkit-transform: translate3d(-12px, 120px, 0);
}

#question4 .answer2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 196.5px;
	height: 35.5px;
	transform: translate3d(100%, 159px, 0);
	-webkit-transform: translate3d(100%, 159px, 0);
	background-image: url(../image/p5_ac.png);
	opacity: 0;
}

#question4 .answer2.in {
	opacity: 1;
	transition: all .3s .8s;
	-webkit-transition: all .3s .8s;
	transform: translate3d(-13px, 159px, 0);
	-webkit-transform: translate3d(-13px, 159px, 0);
}

#question4 .answer3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 196.5px;
	height: 34px;
	transform: translate3d(100%, 199px, 0);
	-webkit-transform: translate3d(100%, 199px, 0);
	background-image: url(../image/p5_ad.png);
	opacity: 0;
}

#question4 .answer3.in {
	opacity: 1;
	transition: all .3s 1s;
	-webkit-transition: all .3s 1s;
	transform: translate3d(-12px, 199px, 0);
	-webkit-transform: translate3d(-12px, 199px, 0);
}



#question5.in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question5.out {
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
	-webkit-transform: translate3d(-100%, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question5 .not5 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 257px;
	height: 215.5px;
	transform: translate3d(0px, -131px, 0);
	-webkit-transform: translate3d(0px, -131px, 0);
	background-image: url(../image/p6_1n.png);
	display: none;
}

#question5 .wrong5 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 257px;
	height: 215.5px;
	transform: translate3d(0px, -131px, 0);
	-webkit-transform: translate3d(0px, -131px, 0);
	background-image: url(../image/p6_1w.png);
	display: none;
}

#question5 .right5 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 257px;
	height: 215.5px;
	transform: translate3d(0px, -131px, 0);
	-webkit-transform: translate3d(0px, -131px, 0);
	background-image: url(../image/p6_1r.png);
	display: none;
}

#question5 .title5 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 252px;
	height: 96px;
	transform: translate3d(100%, 14px, 0);
	-webkit-transform: translate3d(100%, 14px, 0);
	background-image: url(../image/p6_t.png);
	opacity: 0;
}

#question5 .title5.in {
	opacity: 1;
	transition: all .3s .2s;
	-webkit-transition: all .3s .2s;
	transform: translate3d(0px, 14px, 0);
	-webkit-transform: translate3d(0px, 14px, 0);
}

/*#question5 .ele5a
{
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:45.5px;
    height:72.5px;
    transform:translate3d(-124px,130px,0);
    -webkit-transform:translate3d(-124px,130px,0);
    background-image:url(../image/pen.png);
    opacity:1;
}*/
#question5 .ele5b {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 124.5px;
	height: 118.5px;
	transform: translate3d(105px, 136px, 0);
	-webkit-transform: translate3d(105px, 136px, 0);
	background-image: url(../image/rubber.png);
	opacity: 1;
}

#question5 .answer0 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 248.5px;
	height: 34px;
	transform: translate3d(100%, 82px, 0);
	-webkit-transform: translate3d(100%, 82px, 0);
	background-image: url(../image/p6_aa.png);
	opacity: 0;
}

#question5 .answer0.in {
	opacity: 1;
	transition: all .3s .4s;
	-webkit-transition: all .3s .4s;
	transform: translate3d(-1px, 82px, 0);
	-webkit-transform: translate3d(-1px, 82px, 0);
}

#question5 .answer1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 248.5px;
	height: 37px;
	transform: translate3d(100%, 122px, 0);
	-webkit-transform: translate3d(100%, 122px, 0);
	background-image: url(../image/p6_ab.png);
	opacity: 0;
}

#question5 .answer1.in {
	opacity: 1;
	transition: all .3s .6s;
	-webkit-transition: all .3s .6s;
	transform: translate3d(-1px, 122px, 0);
	-webkit-transform: translate3d(-1px, 122px, 0);
}

#question5 .answer2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 248.5px;
	height: 36.5px;
	transform: translate3d(100%, 165px, 0);
	-webkit-transform: translate3d(100%, 165px, 0);
	background-image: url(../image/p6_ac.png);
	opacity: 0;
}

#question5 .answer2.in {
	opacity: 1;
	transition: all .3s .8s;
	-webkit-transition: all .3s .8s;
	transform: translate3d(-4px, 165px, 0);
	-webkit-transform: translate3d(-4px, 165px, 0);
}

#question5 .answer3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 248.5px;
	height: 35.5px;
	transform: translate3d(100%, 205px, 0);
	-webkit-transform: translate3d(100%, 205px, 0);
	background-image: url(../image/p6_ad.png);
	opacity: 0;
}

#question5 .answer3.in {
	opacity: 1;
	transition: all .3s 1s;
	-webkit-transition: all .3s 1s;
	transform: translate3d(-2px, 205px, 0);
	-webkit-transform: translate3d(-2px, 205px, 0);
}




#question6.in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question6.out {
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
	-webkit-transform: translate3d(-100%, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question6 .not6 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 234px;
	height: 205px;
	transform: translate3d(0px, -131px, 0);
	-webkit-transform: translate3d(0px, -131px, 0);
	background-image: url(../image/p7_1n.png);
	display: none;
}

#question6 .wrong6 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 234px;
	height: 205px;
	transform: translate3d(0px, -131px, 0);
	-webkit-transform: translate3d(0px, -131px, 0);
	background-image: url(../image/p7_1w.png);
	display: none;
}

#question6 .right6 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 234px;
	height: 205px;
	transform: translate3d(0px, -131px, 0);
	-webkit-transform: translate3d(0px, -131px, 0);
	background-image: url(../image/p7_1r.png);
	display: none;
}

#question6 .title6 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 238.5px;
	height: 91px;
	transform: translate3d(100%, 14px, 0);
	-webkit-transform: translate3d(100%, 14px, 0);
	background-image: url(../image/p7_t.png);
	opacity: 0;
}

#question6 .title6.in {
	opacity: 1;
	transition: all .3s .2s;
	-webkit-transition: all .3s .2s;
	transform: translate3d(0px, 14px, 0);
	-webkit-transform: translate3d(0px, 14px, 0);
}

#question6 .ele6a {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 81px;
	height: 63px;
	transform: translate3d(-114px, 153px, 0);
	-webkit-transform: translate3d(-114px, 153px, 0);
	background-image: url(../image/p5_bow.png);
}

#question6 .ele6b {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 141.5px;
	height: 109px;
	transform: translate3d(50px, 118px, 0);
	-webkit-transform: translate3d(50px, 118px, 0);
	background-image: url(../image/p5_ink.png);
}

#question6 .answer0 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 231.5px;
	height: 35px;
	transform: translate3d(100%, 82px, 0);
	-webkit-transform: translate3d(100%, 82px, 0);
	background-image: url(../image/p7_aa.png);
	opacity: 0;
}

#question6 .answer0.in {
	opacity: 1;
	transition: all .3s .4s;
	-webkit-transition: all .3s .4s;
	transform: translate3d(-1px, 82px, 0);
	-webkit-transform: translate3d(-1px, 82px, 0);
}

#question6 .answer1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 231.5px;
	height: 36.5px;
	transform: translate3d(100%, 122px, 0);
	-webkit-transform: translate3d(100%, 122px, 0);
	background-image: url(../image/p7_ab.png);
	opacity: 0;
}

#question6 .answer1.in {
	opacity: 1;
	transition: all .3s .6s;
	-webkit-transition: all .3s .6s;
	transform: translate3d(-1px, 122px, 0);
	-webkit-transform: translate3d(-1px, 122px, 0);
}

#question6 .answer2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 231.5px;
	height: 36px;
	transform: translate3d(100%, 165px, 0);
	-webkit-transform: translate3d(100%, 165px, 0);
	background-image: url(../image/p7_ac.png);
	opacity: 0;
}

#question6 .answer2.in {
	opacity: 1;
	transition: all .3s .8s;
	-webkit-transition: all .3s .8s;
	transform: translate3d(-4px, 165px, 0);
	-webkit-transform: translate3d(-4px, 165px, 0);
}

#question6 .answer3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 231.5px;
	height: 34.5px;
	transform: translate3d(100%, 205px, 0);
	-webkit-transform: translate3d(100%, 205px, 0);
	background-image: url(../image/p7_ad.png);
	opacity: 0;
}

#question6 .answer3.in {
	opacity: 1;
	transition: all .3s 1s;
	-webkit-transition: all .3s 1s;
	transform: translate3d(-2px, 205px, 0);
	-webkit-transform: translate3d(-2px, 205px, 0);
}






#question7.in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question7.out {
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
	-webkit-transform: translate3d(-100%, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question7 .not7 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 266.5px;
	height: 203px;
	transform: translate3d(0px, -119px, 0);
	-webkit-transform: translate3d(0px, -119px, 0);
	background-image: url(../image/p8_1n.png);
	display: none;
}

#question7 .wrong7 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 266.5px;
	height: 203px;
	transform: translate3d(0px, -119px, 0);
	-webkit-transform: translate3d(0px, -119px, 0);
	background-image: url(../image/p8_1w.png);
	display: none;
}

#question7 .right7 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 266.5px;
	height: 203px;
	transform: translate3d(0px, -119px, 0);
	-webkit-transform: translate3d(0px, -119px, 0);
	background-image: url(../image/p8_1r.png);
	display: none;
}

#question7 .title7 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 245px;
	height: 100.5px;
	transform: translate3d(100%, 14px, 0);
	-webkit-transform: translate3d(100%, 14px, 0);
	background-image: url(../image/p8_t.png);
	opacity: 0;
}

#question7 .title7.in {
	opacity: 1;
	transition: all .3s .2s;
	-webkit-transition: all .3s .2s;
	transform: translate3d(0px, 14px, 0);
	-webkit-transform: translate3d(0px, 14px, 0);
}

#question7 .ele7a {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 58px;
	height: 38px;
	transform: translate3d(-114px, 108px, 0);
	-webkit-transform: translate3d(-114px, 108px, 0);
	background-image: url(../image/glass.png);
}

#question7 .ele7b {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 99.5px;
	height: 135px;
	transform: translate3d(80px, 155px, 0);
	-webkit-transform: translate3d(80px, 155px, 0);
	background-image: url(../image/book.png);
}

#question7 .answer0 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 124px;
	height: 34.5px;
	transform: translate3d(100%, 82px, 0);
	-webkit-transform: translate3d(100%, 82px, 0);
	background-image: url(../image/p8_aa.png);
	opacity: 0;
}

#question7 .answer0.in {
	opacity: 1;
	transition: all .3s .4s;
	-webkit-transition: all .3s .4s;
	transform: translate3d(-25px, 82px, 0);
	-webkit-transform: translate3d(-25px, 82px, 0);
}

#question7 .answer1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 124px;
	height: 35.5px;
	transform: translate3d(100%, 122px, 0);
	-webkit-transform: translate3d(100%, 122px, 0);
	background-image: url(../image/p8_ab.png);
	opacity: 0;
}

#question7 .answer1.in {
	opacity: 1;
	transition: all .3s .6s;
	-webkit-transition: all .3s .6s;
	transform: translate3d(-25px, 122px, 0);
	-webkit-transform: translate3d(-25px, 122px, 0);
}

#question7 .answer2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 124px;
	height: 34.5px;
	transform: translate3d(100%, 165px, 0);
	-webkit-transform: translate3d(100%, 165px, 0);
	background-image: url(../image/p8_ac.png);
	opacity: 0;
}

#question7 .answer2.in {
	opacity: 1;
	transition: all .3s .8s;
	-webkit-transition: all .3s .8s;
	transform: translate3d(-25px, 165px, 0);
	-webkit-transform: translate3d(-25px, 165px, 0);
}

#question7 .answer3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 124px;
	height: 34.5px;
	transform: translate3d(100%, 205px, 0);
	-webkit-transform: translate3d(100%, 205px, 0);
	background-image: url(../image/p8_ad.png);
	opacity: 0;
}

#question7 .answer3.in {
	opacity: 1;
	transition: all .3s 1s;
	-webkit-transition: all .3s 1s;
	transform: translate3d(-25px, 205px, 0);
	-webkit-transform: translate3d(-25px, 205px, 0);
}










#question8.in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question8.out {
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
	-webkit-transform: translate3d(-100%, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question8 .not8 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 247px;
	height: 207px;
	transform: translate3d(0px, -131px, 0);
	-webkit-transform: translate3d(0px, -131px, 0);
	background-image: url(../image/p9_1n.png);
	display: none;
}

#question8 .wrong8 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 247px;
	height: 207px;
	transform: translate3d(0px, -131px, 0);
	-webkit-transform: translate3d(0px, -131px, 0);
	background-image: url(../image/p9_1w.png);
	display: none;
}

#question8 .right8 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 247px;
	height: 207px;
	transform: translate3d(0px, -131px, 0);
	-webkit-transform: translate3d(0px, -131px, 0);
	background-image: url(../image/p9_1r.png);
	display: none;
}

#question8 .title8 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 244px;
	height: 100px;
	transform: translate3d(100%, 14px, 0);
	-webkit-transform: translate3d(100%, 14px, 0);
	background-image: url(../image/p9_t.png);
	opacity: 0;
}

#question8 .title8.in {
	opacity: 1;
	transition: all .3s .2s;
	-webkit-transition: all .3s .2s;
	transform: translate3d(0px, 14px, 0);
	-webkit-transform: translate3d(0px, 14px, 0);
}

#question8 .ele8a {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 236.5px;
	height: 109.5px;
	transform: translate3d(-14px, 180px, 0);
	-webkit-transform: translate3d(-14px, 180px, 0);
	background-image: url(../image/tel.png);
}

#question8 .ele8b {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 66px;
	height: 46.5px;
	transform: translate3d(54px, 101px, 0);
	-webkit-transform: translate3d(54px, 101px, 0);
	background-image: url(../image/beeper.png);
}

#question8 .answer0 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 81px;
	height: 34.5px;
	transform: translate3d(100%, 82px, 0);
	-webkit-transform: translate3d(100%, 82px, 0);
	background-image: url(../image/p9_aa.png);
	opacity: 0;
}

#question8 .answer0.in {
	opacity: 1;
	transition: all .3s .4s;
	-webkit-transition: all .3s .4s;
	transform: translate3d(-35px, 82px, 0);
	-webkit-transform: translate3d(-35px, 82px, 0);
}

#question8 .answer1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 81px;
	height: 35.5px;
	transform: translate3d(100%, 122px, 0);
	-webkit-transform: translate3d(100%, 122px, 0);
	background-image: url(../image/p9_ab.png);
	opacity: 0;
}

#question8 .answer1.in {
	opacity: 1;
	transition: all .3s .6s;
	-webkit-transition: all .3s .6s;
	transform: translate3d(-35px, 122px, 0);
	-webkit-transform: translate3d(-35px, 122px, 0);
}

#question8 .answer2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 81px;
	height: 34px;
	transform: translate3d(100%, 165px, 0);
	-webkit-transform: translate3d(100%, 165px, 0);
	background-image: url(../image/p9_ac.png);
	opacity: 0;
}

#question8 .answer2.in {
	opacity: 1;
	transition: all .3s .8s;
	-webkit-transition: all .3s .8s;
	transform: translate3d(-31px, 165px, 0);
	-webkit-transform: translate3d(-31px, 165px, 0);
}

#question8 .answer3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 81px;
	height: 34px;
	transform: translate3d(100%, 205px, 0);
	-webkit-transform: translate3d(100%, 205px, 0);
	background-image: url(../image/p9_ad.png);
	opacity: 0;
}

#question8 .answer3.in {
	opacity: 1;
	transition: all .3s 1s;
	-webkit-transition: all .3s 1s;
	transform: translate3d(-35px, 205px, 0);
	-webkit-transform: translate3d(-35px, 205px, 0);
}







#question9.in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question9.out {
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
	-webkit-transform: translate3d(-100%, 0, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
}

#question9 .not9 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 265px;
	height: 215px;
	transform: translate3d(0px, -131px, 0);
	-webkit-transform: translate3d(0px, -131px, 0);
	background-image: url(../image/p10_1n.png);
	display: none;
}

#question9 .wrong9 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 265px;
	height: 215px;
	transform: translate3d(0px, -131px, 0);
	-webkit-transform: translate3d(0px, -131px, 0);
	background-image: url(../image/p10_1w.png);
	display: none;
}

#question9 .right9 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 265px;
	height: 215px;
	transform: translate3d(0px, -131px, 0);
	-webkit-transform: translate3d(0px, -131px, 0);
	background-image: url(../image/p10_1r.png);
	display: none;
}

#question9 .title9 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 246.5px;
	height: 94px;
	transform: translate3d(100%, 14px, 0);
	-webkit-transform: translate3d(100%, 14px, 0);
	background-image: url(../image/p10_t.png);
	opacity: 0;
}

#question9 .title9.in {
	opacity: 1;
	transition: all .3s .2s;
	-webkit-transition: all .3s .2s;
	transform: translate3d(0px, 14px, 0);
	-webkit-transform: translate3d(0px, 14px, 0);
}

#question9 .ele9a {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 236.5px;
	height: 109.5px;
	transform: translate3d(-1px, 170px, 0);
	-webkit-transform: translate3d(-1px, 170px, 0);
	background-image: url(../image/tel.png);
}

#question9 .ele9b {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 222.5px;
	height: 217.5px;
	transform: translate3d(4px, 121px, 0);
	-webkit-transform: translate3d(4px, 121px, 0);
	background-image: url(../image/beeper1.png);
}

#question9 .answer0 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 238.5px;
	height: 34.5px;
	transform: translate3d(100%, 82px, 0);
	-webkit-transform: translate3d(100%, 82px, 0);
	background-image: url(../image/p10_aa.png);
	opacity: 0;
}

#question9 .answer0.in {
	opacity: 1;
	transition: all .3s .4s;
	-webkit-transition: all .3s .4s;
	transform: translate3d(-1px, 82px, 0);
	-webkit-transform: translate3d(-1px, 82px, 0);
}

#question9 .answer1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 238.5px;
	height: 35px;
	transform: translate3d(100%, 122px, 0);
	-webkit-transform: translate3d(100%, 122px, 0);
	background-image: url(../image/p10_ab.png);
	opacity: 0;
}

#question9 .answer1.in {
	opacity: 1;
	transition: all .3s .6s;
	-webkit-transition: all .3s .6s;
	transform: translate3d(-1px, 122px, 0);
	-webkit-transform: translate3d(-1px, 122px, 0);
}

#question9 .answer2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 238.5px;
	height: 35px;
	transform: translate3d(100%, 165px, 0);
	-webkit-transform: translate3d(100%, 165px, 0);
	background-image: url(../image/p10_ac.png);
	opacity: 0;
}

#question9 .answer2.in {
	opacity: 1;
	transition: all .3s .8s;
	-webkit-transition: all .3s .8s;
	transform: translate3d(-4px, 165px, 0);
	-webkit-transform: translate3d(-4px, 165px, 0);
}

#question9 .answer3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 238.5px;
	height: 34px;
	transform: translate3d(100%, 205px, 0);
	-webkit-transform: translate3d(100%, 205px, 0);
	background-image: url(../image/p10_ad.png);
	opacity: 0;
}

#question9 .answer3.in {
	opacity: 1;
	transition: all .3s 1s;
	-webkit-transition: all .3s 1s;
	transform: translate3d(-2px, 205px, 0);
	-webkit-transform: translate3d(-2px, 205px, 0);
}





#result {
	width: 100%;
	height: 100%;
	background-image: url(../image/bgq.jpg);
	display: none;
}

#result .pic {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 320px;
	height: 231px;
	transform: translate3d(0px, -61px, 0);
	-webkit-transform: translate3d(0px, -61px, 0);
}

#result .pic #logo {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 83.5px;
	height: 34px;
	background-image: url(../image/logo.png);
	transform: translate3d(200px, -85px, 0);
	-webkit-transform: translate3d(200px, -85px, 0);
	opacity: 0;
}

#result .pic #logo.in {
	animation: twenth 1s cubic-bezier(0, 0, 0, 0) 1.5s forwards;
	-webkit-animation: twenth 1s cubic-bezier(0, 0, 0, 0) 1.5s forwards;
}

@keyframes twenth {
	0% {
		opacity: 1;
		transform: translate3d(200px, -85px, 0)
	}

	20% {
		opacity: 1;
		transform: translate3d(120px, 0px, 0)
	}

	30% {
		opacity: 1;
		transform: translate3d(115px, 50px, 0)
	}

	38% {
		opacity: 1;
		transform: translate3d(87px, 75px, 0)
	}

	40% {
		opacity: 1;
		transform: translate3d(87px, 75px, 0) rotateZ(-15deg);
		transform-origin: 2px 30px;
	}

	50% {
		opacity: 1;
		transform: translate3d(87px, 75px, 0) rotateZ(15deg);
		transform-origin: 80px 30px;
	}

	60% {
		opacity: 1;
		transform: translate3d(87px, 75px, 0) rotateZ(-8deg);
		transform-origin: 2px 30px;
	}

	70% {
		opacity: 1;
		transform: translate3d(87px, 75px, 0) rotateZ(8deg);
		transform-origin: 80px 30px;
	}

	80% {
		opacity: 1;
		transform: translate3d(87px, 75px, 0) rotateZ(-4deg);
		transform-origin: 2px 30px;
	}

	90% {
		opacity: 1;
		transform: translate3d(87px, 75px, 0) rotateZ(4deg);
		transform-origin: 80px 30px;
	}

	100% {
		opacity: 1;
		transform: translate3d(87px, 75px, 0)
	}
}

@-webkit-keyframes twenth {
	0% {
		opacity: 1;
		-webkit-transform: translate3d(200px, -85px, 0)
	}

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

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

	38% {
		opacity: 1;
		-webkit-transform: translate3d(87px, 75px, 0)
	}

	40% {
		opacity: 1;
		-webkit-transform: translate3d(87px, 75px, 0) rotateZ(-15deg);
		-webkit-transform-origin: 2px 30px;
	}

	50% {
		opacity: 1;
		-webkit-transform: translate3d(87px, 75px, 0) rotateZ(15deg);
		-webkit-transform-origin: 80px 30px;
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(87px, 75px, 0) rotateZ(-8deg);
		-webkit-transform-origin: 2px 30px;
	}

	70% {
		opacity: 1;
		-webkit-transform: translate3d(87px, 75px, 0) rotateZ(8deg);
		-webkit-transform-origin: 80px 30px;
	}

	80% {
		opacity: 1;
		-webkit-transform: translate3d(87px, 75px, 0) rotateZ(-4deg);
		-webkit-transform-origin: 2px 30px;
	}

	90% {
		opacity: 1;
		-webkit-transform: translate3d(87px, 75px, 0) rotateZ(4deg);
		-webkit-transform-origin: 80px 30px;
	}

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

#result .text1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 134px;
	height: 26.5px;
	background-image: url(../image/lpage1.png);
	transform: translate3d(-19px, -181px, 0);
	-webkit-transform: translate3d(-19px, -181px, 0);
}

#result .text2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 90px;
	height: 50.5px;
	transform: translate3d(85px, -184px, 0);
	-webkit-transform: translate3d(85px, -184px, 0);
}

#result .text3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 245px;
	height: 111px;
	transform: translate3d(0px, 87px, 0);
	-webkit-transform: translate3d(0px, 87px, 0);
}

#btn1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 79.5px;
	height: 38.5px;
	background-image: url(../image/lpage5.png);
	transform: translate3d(-170px, 155px, 0);
	-webkit-transform: translate3d(-170px, 155px, 0);
	opacity: 0;
}

#btn2 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 79px;
	height: 38.5px;
	background-image: url(../image/lpage6.png);
	transform: translate3d(170px, 155px, 0);
	-webkit-transform: translate3d(170px, 155px, 0);
	opacity: 0;
}

#btn3 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 105px;
	height: 43px;
	background-image: url(../image/lpage7.png);
	transform: translate3d(0px, 209px, 0);
	-webkit-transform: translate3d(0px, 209px, 0);
	opacity: 0;
}

#btn1.in {
	opacity: 1;
	transition: all .5s .5s;
	-webkit-transition: all .5s .5s;
	transform: translate3d(-70px, 155px, 0);
	-webkit-transform: translate3d(-70px, 155px, 0);
}

#btn2.in {
	opacity: 1;
	transition: all .5s .7s;
	-webkit-transition: all .5s .7s;
	transform: translate3d(70px, 155px, 0);
	-webkit-transform: translate3d(70px, 155px, 0);
}

#btn3.in {
	opacity: 1;
	transition: all 1s .9s;
	-webkit-transition: all 1s .9s;
	transform: translate3d(0px, 209px, 0);
	-webkit-transform: translate3d(0px, 209px, 0);
}

#share {
	width: 100%;
	height: 0;
	opacity: 0;
	top: 0;
	background-position: center top;
	background-color: rgba(0, 0, 0, .8);
	-webkit-transition: opacity .5s, height 0s .5s;
	transition: opacity .5s, height 0s .5s;
	overflow: hidden;
}

#share #share1 {
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 201px;
	height: 197.5px;
	background-image: url(../image/share_1.png);
	transform: translate3d(10px, -75px, 0);
	-webkit-transform: translate3d(10px, -75px, 0);
}

#share.in {
	height: 100%;
	opacity: 1;
	-webkit-transition: opacity .5s, height 0s;
	transition: opacity .5s, height 0s;
	overflow: visible;
}

#bgm_btn {
	width: 42px;
	height: 42px;
	position: absolute;
	top: 0px;
	right: 5px;
	background-size: 70% 70%;
}

#bgm_btn.off {
	background-image: url(../image/off.png);
}

#bgm_btn.on {
	background-image: url(../image/on.png);
}


@media(max-height:480px) {
	#fpage .layer {
		transform: scaleY(.8);
		-webkit-transform: scaleY(.8);

	}

	#questions .pro {
		display: none;
		transform: scale(.88);
		-webkit-transform: scale(.88);
	}

	#question0.out {
		opacity: 0;
		transform: translate3d(-100%, 0, 0) scale(.88);
		-webkit-transform: translate3d(-100%, 0, 0) scale(.88);
		transition: all .5s;
		-webkit-transition: all .5s;
	}

	#question1.out,
	#question2.out,
	#question3.out,
	#question4.out,
	#question5.out,
	#question6.out,
	#question7.out,
	#question8.out,
	#question9.out,
	#question0.out {
		opacity: 0;
		transform: translate3d(-100%, 0, 0) scale(.88);
		-webkit-transform: translate3d(-100%, 0, 0) scale(.88);
		transition: all .5s;
		-webkit-transition: all .5s;
	}

	#result .text3 {
		transform: translate3d(0px, 80px, 0) scale(.9);
		-webkit-transform: translate3d(0px, 80px, 0) scale(.9);
	}

	#btn1 {
		transform: translate3d(-170px, 145px, 0) scale(.9);
		-webkit-transform: translate3d(-170px, 145px, 0) scale(.9);
	}

	#btn2 {
		transform: translate3d(170px, 145px, 0) scale(.9);
		-webkit-transform: translate3d(170px, 145px, 0) scale(.9);
	}

	#btn3 {
		transform: translate3d(0px, 185px, 0) scale(.9);
		-webkit-transform: translate3d(0px, 185px, 0) scale(.9);
	}

	#btn1.in {
		opacity: 1;
		transition: all .5s .5s;
		-webkit-transition: all .5s .5s;
		transform: translate3d(-70px, 145px, 0) scale(.9);
		-webkit-transform: translate3d(-70px, 145px, 0) scale(.9);
	}

	#btn2.in {
		opacity: 1;
		transition: all .5s .7s;
		-webkit-transition: all .5s .7s;
		transform: translate3d(70px, 145px, 0) scale(.9);
		-webkit-transform: translate3d(70px, 145px, 0) scale(.9);
	}

	#btn3.in {
		opacity: 1;
		transition: all 1s .9s;
		-webkit-transition: all 1s .9s;
		transform: translate3d(0px, 185px, 0) scale(.9);
		-webkit-transform: translate3d(0px, 185px, 0) scale(.9);
	}
}
.check{
	border: 3px solid red;
}