@charset "utf-8";
body{
	font-family:"Microsoft Yahei","SimSun";
	font-size:16px;
	color:#000;
	background: #fff;

}

@media (max-width: 380px) {
	body{ font-size:14px; }
}

@media (max-width: 325px) {
	body{ font-size:12px; }
}

@media (min-width: 760px) {
	body{ font-size:22px; }
}

a{
	color:#000;
	text-decoration: none!important;
}

img{
	display:block;
	width: 100%;
	height: auto;
}

.fw{
	color: #fff;
}

.fw a{
	color: #fff;
}

.fw a:hover{
	color: #dfdfdf !important;
}

h1,h2,h3,h4,h5{
	font-family:"Microsoft Yahei","SimHei";
	overflow:hidden;
	font-weight: normal;
}

p,li{
	overflow:hidden;
}

.page{
	position: relative;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: 100% auto;
	background-repeat: no-repeat;
	margin: 0px auto;
}

@media(orientation:landscape){
	.page{ width: 640px; min-height: 1040px; }
}

.abs{
	position: absolute;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0;
}

.bg1{ background-image: url("images/bg1.jpg"); }
.bg2{ background-image: url("images/bg2.jpg"); }
.bg3{ background-image: url("images/bg3.jpg"); }


.logo1{
	width: 36%;
	height: 5.7%;
	left: 2.4%;
	top: 8.6%;
	background-image: url("images/logo1.png");
}

.logo2{
	width: 26.1%;
	height: 5.7%;
	right: 1.7%;
	top: 8.6%;
	background-image: url("images/logo2.png");
}

.topic{
	width: 90.2%;
	height: 13.4%;
	left: 4.9%;
	top: 15.3%;
	background-image: url("images/topic.png");
}

.infor{
	width: 91.6%;
	height: 26%;
	left: 4.2%;
	top: 31.2%;
	background-image: url("images/infor.png");
}

.kite{
	width: 24.7%;
	height: 18.5%;
	right: 4.2%;
	top: 54.2%;
	background-image: url("images/kite.png");
}

.start{
	width: 61.8%;
	height: 7.6%;
	left: 19.1%;
	top: 76.8%;
	background-image: url("images/start.png");
}

.next{
	width: 61.8%;
	height: 7.6%;
	left: 19.1%;
	top: 68.2%;
	background-image: url("images/next.png");
}

.finish{
	width: 61.8%;
	height: 7.6%;
	left: 19.1%;
	top: 68.2%;
	background-image: url("images/finish.png");
}

.main{
	width: 94.6%;
	height: 48.7%;
	left: 2.7%;
	top: 16.1%;
	background-size: contain 100%;
}

.main1{	background-image: url("images/main1.png"); }
.main2{	background-image: url("images/main2.png"); }
.main3{	background-image: url("images/main3.png"); }
.main4{	background-image: url("images/main4.png"); }
.main5{	background-image: url("images/main5.png"); }
.main6{	background-image: url("images/main6.png"); }
.main7{	background-image: url("images/main7.png"); }
.main8{	background-image: url("images/main8.png"); }
.main9{	background-image: url("images/main9.png"); }
.main10{ background-image: url("images/main10.png"); }

.main .check{
	position: absolute;
	width: 86%;
	left: 7%;
	height: 9.15%;
}

.main .check_a{ top: 33.2%; }
.main .check_b{ top: 45.4%; }
.main .check_c{ top: 57.6%; }
.main .check_d{ top: 69.8%; }
.main .check_e{ top: 81.9%; }

.swiper-container .swiper-wrapper .swiper-slide .drop{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-color:rgba(64,80,149,0.7);
	display: none;
	z-index: 99;
}

.swiper-container .swiper-wrapper .swiper-slide .drop,.swiper-container .swiper-wrapper .swiper-slide .drop .abs{
	opacity: 1 !important;
}

@media(orientation:landscape){
.swiper-container .swiper-wrapper .swiper-slide .drop{ width: 640px; min-height: 1040px; left: 50%; margin-left: -320px; }
}

.swiper-container .swiper-wrapper .swiper-slide .drop .right{
	width: 94.8%;
	height: 44.8%;
	left: 2.6%;
	top: 27.6%;
	background-image: url("images/right.png");
}

.swiper-container .swiper-wrapper .swiper-slide .drop .right .next2{
	width: 65.2%;
	height: 17%;
	left: 17.4%;
	top: 59.4%;
	background-image: url("images/next.png");
}

.swiper-container .swiper-wrapper .swiper-slide .drop .right .finish2{
	width: 65.2%;
	height: 17%;
	left: 17.4%;
	top: 59.4%;
	background-image: url("images/finish.png");
}

.swiper-container .swiper-wrapper .swiper-slide .drop .error{
	width: 94.8%;
	height: 68%;
	left: 2.6%;
	top: 16%;
	background-image: url("images/error.png");
}

.swiper-container .swiper-wrapper .swiper-slide .drop .error .next2{
	width: 65.2%;
	height: 11.2%;
	left: 17.4%;
	top: 72.4%;
	background-image: url("images/next.png");
}

.swiper-container .swiper-wrapper .swiper-slide .drop .error .finish2{
	width: 65.2%;
	height: 11.2%;
	left: 17.4%;
	top: 72.4%;
	background-image: url("images/finish.png");
}

.swiper-container .swiper-wrapper .swiper-slide .drop .error .ans{
	width: 77.8%;
	height: 31.9%;
	left: 11.1%;
	top: 34.8%;
}

.drop .error .ans1{ background-image: url("images/ans1.png"); }
.drop .error .ans2{ background-image: url("images/ans2.png"); }
.drop .error .ans3{ background-image: url("images/ans3.png"); }
.drop .error .ans4{ background-image: url("images/ans4.png"); }
.drop .error .ans5{ background-image: url("images/ans5.png"); }
.drop .error .ans6{ background-image: url("images/ans6.png"); }
.drop .error .ans7{ background-image: url("images/ans7.png"); }
.drop .error .ans8{ background-image: url("images/ans8.png"); }
.drop .error .ans9{ background-image: url("images/ans9.png"); }
.drop .error .ans10{ background-image: url("images/ans10.png"); }

.rank{
	width: 99.4%;
	height: 41.8%;
	left: 0%;
	top: 15.2%;
}

.rank1{ background-image: url("images/rank1.png"); }
.rank2{ background-image: url("images/rank2.png"); }
.rank3{ background-image: url("images/rank3.png"); }
.rank4{ background-image: url("images/rank4.png"); }

.score{
	width: 57%;
	height: 17.5%;
	left: 21.5%;
	top: 32.6%;
}

.score0{ background-image: url("images/score0.png"); }
.score10{ background-image: url("images/score10.png"); }
.score20{ background-image: url("images/score20.png"); }
.score30{ background-image: url("images/score30.png"); }
.score40{ background-image: url("images/score40.png"); }
.score50{ background-image: url("images/score50.png"); }
.score60{ background-image: url("images/score60.png"); }
.score70{ background-image: url("images/score70.png"); }
.score80{ background-image: url("images/score80.png"); }
.score90{ background-image: url("images/score90.png"); }
.score100{ background-image: url("images/score100.png"); }

.again{
	width: 61.8%;
	height: 7.6%;
	left: 19.1%;
	top: 58.1%;
	background-image: url("images/again.png");
}

.name{
	width: 60%;
	height: 1.8%;
	left: 20%;
	top: 68.4%;
	background-image: url("images/name.png");
}

@-ms-keyframes m1{
	from{ transform: scale(0.8,0.8); }
	to{ opacity: 1; }
}
@-moz-keyframes m1{
	from{ transform: scale(0.8,0.8); }
	to{ opacity: 1; }
}
@-o-keyframes m1{
	from{ transform: scale(0.8,0.8); }
	to{ opacity: 1; }
}
@-webkit-keyframes m1{
	from{ transform: scale(0.8,0.8); }
	to{ opacity: 1; }
}
@keyframes m1{
	from{ transform: scale(0.8,0.8); }
	to{ opacity: 1; }
}

.logo1,.logo2{
	animation:'m1' 0.5s ease-in-out 0s forwards;
	-ms-animation:m1 0.5s ease-in-out 0s forwards;
	-moz-animation:m1 0.5s ease-in-out 0s forwards;
	-o-animation:'m1' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'m1' 0.5s ease-in-out 0s forwards;
}

.topic,.main,.next,.finish,.rank,.score{
	animation:'m1' 0.5s ease-in-out 0.4s forwards;
	-ms-animation:m1 0.5s ease-in-out 0.4s forwards;
	-moz-animation:m1 0.5s ease-in-out 0.4s forwards;
	-o-animation:'m1' 0.5s ease-in-out 0.4s forwards;
	-webkit-animation:'m1' 0.5s ease-in-out 0.4s forwards;
}

.infor,.kite,.again,.name{
	animation:'m1' 0.5s ease-in-out 0.8s forwards;
	-ms-animation:m1 0.5s ease-in-out 0.8s forwards;
	-moz-animation:m1 0.5s ease-in-out 0.8s forwards;
	-o-animation:'m1' 0.5s ease-in-out 0.8s forwards;
	-webkit-animation:'m1' 0.5s ease-in-out 0.8s forwards;
}

.start{
	animation:'m1' 0.5s ease-in-out 1.2s forwards;
	-ms-animation:m1 0.5s ease-in-out 1.2s forwards;
	-moz-animation:m1 0.5s ease-in-out 1.2s forwards;
	-o-animation:'m1' 0.5s ease-in-out 1.2s forwards;
	-webkit-animation:'m1' 0.5s ease-in-out 1.2s forwards;
}
.music{
	position: fixed;
	width: 2em;
	height: 2em;
	right: 1em;
	top: 1em;
	z-index: 999;
	background: url("images/music.png");
	background-size: 100% 100%;
}

@-ms-keyframes music{
	from{  }
	to{ transform:rotate(360deg); }
}
@-moz-keyframes music{
	from{  }
	to{ transform:rotate(360deg); }
}
@-o-keyframes music{
	from{  }
	to{ transform:rotate(360deg); }
}
@-webkit-keyframes music{
	from{  }
	to{ transform:rotate(360deg); }
}
@keyframes music{
	from{  }
	to{ transform:rotate(360deg); }
}

.music.on{
	animation:'music' 2s linear 0s infinite;
	-ms-animation:music 2s linear 0s infinite;
	-moz-animation:music 2s linear 0s infinite;
	-o-animation:'music' 2s linear 0s infinite;
	-webkit-animation:'music' 2s linear 0s infinite;
}