/*-----global CSS 清除浏览默认样式-----*/
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

html {
	position: relative;
	height: 100%;
	width: 100%;
}

body {
	font-family: Microsoft YaHei, SimHei, Arial, Helvetica, sans-serif, SimSun;
	color: #333;
	font-size: 16px;
	background-size: cover;
	padding-bottom: 30px;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
	color: #333;
}

a:hover {
	text-decoration: none;
}

img {
	border: none;
	vertical-align: bottom;
	display: inline-block;
	display: block;
	border: 0;
}

h1 {
	font-size: 16px;
	font-weight: normal;
}

h2 {
	font-size: 14px;
	font-weight: normal;
}

h3 {
	font-size: 14px;
	font-weight: normal;
}

h4 {
	font-size: 14px;
	font-weight: normal;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.mb10 {
	margin-bottom: 10px;
}

.mb15 {
	margin-bottom: 15px;
}

.mb30 {
	margin-bottom: 30px;
}

.mr10 {
	margin-right: 10px;
}

.fb {
	font-weight: bold;
}

input::-moz-focus-inner {
	border: none;
	padding: 0;
}

/*正常背景*/

.abg {
	background: #f7e4e4 url(../images/bg.jpg) no-repeat top center;
	background-size: 100vw 100vh;
}

/*-----首页-----*/
header {
	width: 100%;
}

header img {
	width: 100%;
}

/*头部内容*/
header {
	position: relative;
	z-index: 10;
	width: 100%;
	margin: 10% auto 0;
	-webkit-animation: h1 1s;
	animation: h1 1s;
}

.titleimage {
	width: 90%;
	margin: 9% auto 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.water {
	position: relative;
	z-index: 10;
	width: 50%;
	margin: 5% auto;
}

.water img {
	width: 100%;
}

.btn {
	z-index: 10;
	width: 80%;
	margin: 10% auto 0;
	margin-top: 10%;
	display: flex;
}

.btn a {
	margin-bottom: 8%;
	display: block;
	-webkit-animation: tada 1.5s 1s 2;
	animation: tada 1.5s 1s 2;
	margin: 5px;
}

.btn a:nth-child(2) {
	-webkit-animation: tada 1.5s 2s 3;
	animation: tada 1.5s 2s 3;
}

.btn a:last-child {
	-webkit-animation: tada 1.5s 4s 2;
	animation: tada 1.5s 4s 2;
}

.btn img {
	width: 100%;
}

.bottom-txt {
	width: 100%;
	text-align: center;
	color: #125eb3;
	position: absolute;
	z-index: 1;
	bottom: 0%;
	left: 0;
	font-size: 14px;
	font-weight: bold;
}

.bottom-txt img {
	width: 100%;
}

/* 首页 */
.bg1 {
	background: #fd8232 url(../images/bg01.jpg) no-repeat top center;
	background-size: cover;
}

.index-btn {
	display: flex;
	justify-content: space-between;
	width: 76%;
	margin: 10% auto 0;
}

.index-btn a {
	display: block;
	width: 28%;
}

.index-btn a img {
	width: 100%;
}

.index-btn a:nth-child(2) {
	-webkit-animation: tada 1s 1s 1;
	animation: tada 1s 1s 1;
}

.index-btn a:first-child {
	-webkit-animation: tada 1s 2s 1;
	animation: tada 1s 2s 1;
}

.index-btn a:last-child {
	-webkit-animation: tada 1s 3s 1;
	animation: tada 1s 3s 1;
}

.top-tittle {
	width: 90%;
	margin: 9% auto 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.top-tittle img {
	width: 100%;
}

header {
	position: relative;
	z-index: 10;
	width: 94%;
	margin: 8% auto 0;
	-webkit-animation: bounceIn 1s;
	animation: bounceIn 1s;
}

header img {
	width: 100%;
}

.back-btn {
	position: fixed;
	;
	right: 3%;
	top: 0;
	width: 22%;
	z-index: 99;
}

.back-btn img {
	width: 100%;
}

/* 活动规则 */
.bg2 {
	background: #fd8232 url(../images/bg01.jpg) no-repeat top center;
	background-size: cover;
	margin: 0 auto;
	background-attachment: fixed;
}
/* 背景ios兼容性问题 */
.bg2:before{
    content: "";
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: inherit;
    -webkit-background-size: cover!important;
    -o-background-size: cover;
    background-size: cover!important;
}

.intro img {
	width: 100%;
}

.intro-txt {
	width: 94%;
	margin: 8% auto 3%;
}


.intro-item {
	background: #fff6f0;
	box-shadow: 0 0 0 3px #fb5a2f, 0 0 0 8px #fff6f0;
	width: 80%;
	margin: 0 auto;
	padding: 0 5%;
	text-align: justify;
	border-radius: 10px;
	;
}

.intro-txt .intro-tit img {
	width: 100%;
}

.intro-item h2 {
	text-align: center;
	background: #48a789;
	width: 28%;
	margin: 0 auto 10px;
	padding: 3px 0 3px 3px;
	color: #fff;
	text-indent: 0;
}

.intro-item h2 b {
	background: #fff;
	color: #48a789;
	padding: 0 2px;
	margin-left: 10px;
}

.orange {
	color: #fb5a2f;
}

.intro-item h3 {
	text-align: center;
	margin-bottom: 5px;
	text-indent: 0;
}

.intro-item p {
	font-size: 16px;
	line-height: 28px;
	border-bottom: 1px solid #f6f6f6;
	padding: 3% 0;
}

.intro-item p img {
	width: 80%;
	margin: 0 auto;
}

.btn-bg {

	padding: 8% 5%;
	display: block;
	width: 80%;
	margin: 0 auto;
}

.btn {
	display: block;
	/* width: 60%; */
	margin: 0 auto;
	-webkit-animation: tada 1s 1s 2;
	animation: tada 1s 1s 2;
}

.btn img {
	width: 100%;
}

/*答题页*/
.bg {
	background: url(../images/bg1.jpg) no-repeat top center;
	background-size: cover;
}

/* 子页顶部文字 */
.top-txt {
	width: 90%;
	margin: 8% auto 0;
}

.top-txt img {
	width: 100%;
}

/* 微信 得分 时间 */
.weixin-mod {
	overflow: hidden;
	zoom: 1;
	width: 85%;
	margin: 5% auto 0;
	background: #fff;
	box-shadow: 0 0 20px #1f75e5;
	border-radius: 10px;
	padding: 2%;
	box-sizing: border-box;
}

.weixin-img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	border: 4px solid #c6ebff;
	box-sizing: border-box;
}

.weixin-img img {
	width: 100%;
	height: 100%;
}

.weixin-img,
.score,
.time {
	float: left;
	text-align: center;
}

.score {
	width: 30%;
	vertical-align: middle;
	margin-top: 5px;
}

.time {
	width: 30%;
	vertical-align: middle;
	margin-top: 5px;
}

.score b,
.time b {
	color: #ff5432;
}

.time b {
	font-size: 18px;
}

/* 答题 */
.dt-mod {
	position: relative;
	z-index: 10;
	width: 85%;
	margin: 5% auto;
}

.dt-cont {
	position: relative;
	z-index: 11;
	padding: 5%;
}

.dt-cont h3 {
	font-size: 20px;
	text-align: center;
	margin-bottom: 10px;
	color: #1457ad;
	font-weight: bold;
}

.dt-cont h3 b {
	color: #ff5432;
	padding: 0 3px;
}

.dt-txt {
	margin-bottom: 10px;
	text-align: justify;
	font-size: 18px;
	color: #333;
	-webkit-animation: bounceIn 1s;
	animation: bounceIn 1s;
}

.dt-option p:nth-child(1) {
	-webkit-animation: bounceIn 1s 0.2s;
	animation: bounceIn 1s 0.2s;
}

.dt-option p:nth-child(2) {
	-webkit-animation: bounceIn 1s 0.4s;
	animation: bounceIn 1s 0.4s;
}

.dt-option p:nth-child(3) {
	-webkit-animation: bounceIn 1s 0.6s;
	animation: bounceIn 1s 0.6s;
}

.dt-option p:nth-child(4) {
	-webkit-animation: bounceIn 1s 0.8s;
	animation: bounceIn 1s 0.8s;
}

.dt-option p {
	font-size: 14px;
	background: #b4e1ff;
	padding: 8px 10px;
	border-radius: 30px;
	margin-bottom: 10px;
}

.dt-option .false {
	background: #ff6546;
	color: #fff;
}

.dt-option .right {
	background: #ffc640;
	color: #fff;
}

.dt-bg {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	box-shadow: 0 0 20px #1f75e5;
	border-radius: 10px;
	opacity: 0.9;
}

/* 活动规则 */
.rule-mod {
	position: relative;
	z-index: 10;
	width: 70%;
	margin: 10% auto 5%;
	background: #fff;
	padding: 5%;
	border-radius: 10px;
	box-shadow: 0 0 20px #1f75e5;
}

.rule-mod h3 {
	width: 50%;
	margin: 0 auto 5%;
}

.rule-mod h3 img {
	width: 100%;
}

.rule-txt {
	text-align: justify;
}

.rule-txt2 p {
	margin-bottom: 10px;
}

.rule-btn {
	position: relative;
	z-index: 10;
	display: block;
	width: 50%;
	margin: 0 auto;
	-webkit-animation: tada 1.5s 1s 2;
	animation: tada 1.5s 1s 2;
}

.rule-btn img {
	width: 100%;
}

/* 答对答错弹框 */
.modal img {
	width: 100%;
}

.modal-bg {
	width: 100%;
	height: 100%;
	background: #000;
	position: absolute;
	opacity: 0.7;
}

.suc-mod,
.false-mod {
	position: absolute;
	z-index: 100;
	width: 70%;
	left: 50%;
	top: 40%;
	margin-left: -35%;
	background: #fff;
	box-sizing: border-box;
	margin-top: -90px;
	box-shadow: 0 0 20px #333;
	border-radius: 10px;
	padding: 20px;
}

.mod-display {
	display: none;
}

.false-img {
	margin: 20px 0 30px;
	-webkit-animation: bounceIn 1s 0.2s;
	animation: bounceIn 1s 0.2s;
}

.suc-btn,
.false-btn {
	width: 80%;
	margin: 15px auto 0;
	-webkit-animation: tada 1s 0.5s 2;
	animation: tada 1s 0.5s 2;
}

/* 题库 */
.tiku-bg {
	background: #e5f3fb url(../images/bg3.png) no-repeat top center;
	background-size: cover;
	background-attachment: fixed;
}

.tiku {
	z-index: 2;
	box-shadow: 0 0 20px #1f75e5;
	border-radius: 10px;
	padding: 20px;
	background: #fff;
	width: 80%;
	margin: 10px auto;
}

.tiku h3 {
	width: 40%;
	margin: 0 auto;
	margin-bottom: 10px;
}

.tiku h3 img {
	width: 100%;
}

/*动画*/
@-webkit-keyframes bounceIn {

	0%,
	20%,
	40%,
	60%,
	80%,
	to {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1)
	}

	40% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9)
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03)
	}

	80% {
		-webkit-transform: scale3d(.97, .97, .97);
		transform: scale3d(.97, .97, .97)
	}

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

@keyframes bounceIn {

	0%,
	20%,
	40%,
	60%,
	80%,
	to {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1)
	}

	40% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9)
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03)
	}

	80% {
		-webkit-transform: scale3d(.97, .97, .97);
		transform: scale3d(.97, .97, .97)
	}

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

@-webkit-keyframes bounce {

	0%,
	20%,
	53%,
	80%,
	to {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}

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

	40%,
	43%,
	70% {
		-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		animation-timing-function: cubic-bezier(.755, .05, .855, .06)
	}

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

	90% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0)
	}
}

@keyframes bounce {

	0%,
	20%,
	53%,
	80%,
	to {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}

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

	40%,
	43%,
	70% {
		-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		animation-timing-function: cubic-bezier(.755, .05, .855, .06)
	}

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

	90% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0)
	}
}

@-webkit-keyframes tada {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}

	10%,
	20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
		transform: scale3d(.9, .9, .9) rotate(-3deg)
	}

	30%,
	50%,
	70%,
	90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
	}

	40%,
	60%,
	80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
	}

	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}

@keyframes tada {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}

	10%,
	20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
		transform: scale3d(.9, .9, .9) rotate(-3deg)
	}

	30%,
	50%,
	70%,
	90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
	}

	40%,
	60%,
	80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
	}

	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}