/*-----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:#338076 url(../images/bg.jpg)  no-repeat top center; background-size: 100vw 100vh; 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;}

/*正常背景*/


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


/*头部内容*/
.content{ position:relative;}
header{ position: relative; z-index: 10; width:42%; margin-top: 15%; margin-left: 51%; -webkit-animation: h1 1s;animation: h1 1s;}


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

.btn{z-index: 10; left:54%; width:37%; top:130%; position: absolute;}
.btn a{ margin-bottom: 8%; display: block;}
.btn img{ width: 100%;}

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

/*答题页*/
.bg{background:#e5f3fb url(../images/bg3.png)  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)
}
}