/*-----global CSS 清除浏览默认样式-----*/
*{margin:0;padding:0;list-style-type:none;}
html{position: relative; min-height: 100%; width: 100%;}
body{font-family:Microsoft YaHei,SimHei,Arial, Helvetica, sans-serif, SimSun;color:#3c4c58;  font-size:16px;
 background:#0059a5 /*url(../images/bg.jpg) */ no-repeat top center; background-size: cover; padding-bottom: 30px;}
li{ list-style:none;}
a{ text-decoration:none; color:#3c4c58;}
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;}


/* 01前言 */
.bg2{ background:#0059a5  no-repeat top center; background-size: cover; margin: 0 auto; }
.bg2 header{ margin-top: 12%;}
.intro{ background: #fff; box-shadow:0 0 0 3px #0059a5,0 0 0 8px #fff; width: 80%; margin: 8% auto; padding: 5%; border-radius: 20px;}
.intro img{ width: 100%;}

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


/* 02个人信息页 */
.bg{ background:#0059a5  no-repeat top center; background-size: cover; }
.bg header{ margin-top: 10%;}

.mod-form{ position: relative; background: #fff; box-shadow:0 0 0 3px #f36f52,0 0 0 8px #fff; width: 80%; margin: 10% auto; padding: 5% 5% 10%; border-radius: 20px;}
.form-group label { margin-top:8px;}
.top-bar{ padding: 4% 5% 0%; display: flex; justify-content: space-between; align-items: center;}
.top-bar img{ width: 35%; height: auto;}
.top-bar a{ display: inline; }
.top-bar a img{width: 60%; float: right; }


.top-bar2{ padding: 4% 7% 0%; display: flex; justify-content: space-between; align-items: center;}
.top-bar2 img{ width: 35%; height: auto;}
.top-bar2 a{ display: inline; }
.top-bar2 a img{width: 60%; float: right; }


header{ position: relative; z-index: 10; width:80%; margin:0 auto;-webkit-animation: bounceIn 1s;animation: bounceIn 1s;}
header img{ width:100%;}
.bottom-bar{ padding: 5% 5% 0%; display: block; justify-content: right; align-items: center;}
.bottom-bar img{ width: 40%; float:right; margin: 6% auto;}

.form-list p{ display: flex; justify-content: space-between; margin-bottom: 10px; }
.form-list label{ text-align: right; width: 25%; font-weight: bold; color: #48a789; font-size: 18px;}
.form-list input{ height: 30px; line-height: 30px;}
.form-list input,.form-list textarea{ width: 69%;border: 1px solid #aeaeae; border-radius:8px ; padding-left: 1%;}
.form-txt{ font-size: 12px;}

.btn2{ display: block; width: 50%; margin: 8% auto 0;-webkit-animation: tada 1s 1s 2;animation: tada 1s 1s 2;}
.btn2 img{ width: 100%;}

.book{ position: absolute; width: 20%; bottom: 5%; }
.people{ position: absolute; width: 25%; left: 50%; margin-left: -12.5%;}

/* 03主菜单页 */
.bg1{ background:#0059a5  no-repeat top center; background-size: cover; }
.bg1 header{ margin-top: 8%; width: 90%;}


.index-btn{ display: block; justify-content: space-between; width: 50%; margin: 5% auto 0; }
.index-btn a{ display:block; width: 100%; margin-bottom:10%;}
.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;}

/* 04 知识题库页 */
.bg3{ background:#0059a5 no-repeat top center; background-size: cover; }
.bg3 header{ margin-top: 8%;}

.bg3 .head-txt{ width: 40%; margin: 3% auto;}
.bg3 .head-txt img{ width: 100%;}

.tiku-btn{ width: 80%; margin: 0 auto;}
.tiku-btn a{ display: block; margin-bottom: 10px;}
.tiku-btn a img{ width: 100%;}

.tiku-btn a:first-child{-webkit-animation: tada 1s 1s 1;animation: tada 1s 1s 1;}
.tiku-btn a:nth-child(2){-webkit-animation: tada 1s 2s 1;animation: tada 1s 2s 1;}
.tiku-btn a:last-child{-webkit-animation: tada 1s 3s 1;animation: tada 1s 3s 1;}

.btn3{ display: block; width: 40%; margin:0 auto;}
.btn3 img{ width: 100%;}

/* 05 答题页 */
/* 倒计时 */
.date{ font-weight: bold;background-size: contain;  font-size: 16px; color: #fff; text-align: center; width: 50%; margin: 5% auto; }
.date img{ display: inline-block; width: 10%; vertical-align: middle;}
.date b{ padding:0 5px; color:#ffbd5f;}

/* 答题 */
.dt-mod{  z-index: 10; width: 75%; margin: 3% auto 5%; background: #fff; border: 3px solid #d4ebff; border-radius: 20px; padding:5%;}
.dt-num{box-shadow:0 0 0 3px #fff,0 0 0 6px #d4ebff; background: #d4ebff; border-radius: 20px; padding: 5px; width: 40%; margin: 0 auto 5%; color: #0059a5; text-align: center; font-size: 18px; font-weight: bold;}

.dt-txt{ margin-bottom: 10px; text-align: justify; font-size: 18px;color: #333; font-weight: 700;}
/* .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: 16px;  margin-bottom: 10px;}
.dt-option p input[ type="radio"]{ margin-right: 5px;}
.next-btn{ width: 45%; display: block; margin: 0 auto;}
.next-btn img{ width: 100%;}

/* 06 答题结果页 */
.result-mod{ position: relative; width: 70%; margin: 12% auto 5%; padding: 6% 5%;}
.result-mod:after{ content: ""; display: block; position: absolute; top: 0; left: 0; z-index: -1; border-radius: 20px;
 width: 100%; height: 100%; background: #fff; /*opacity: 0.6;*/}
.result-mod h2{ width: 70%; margin: 0 auto 6%;  background: #fff; border-radius: 10px; font-size: 20px; 
padding: 10px 14px; text-align: center; color: #f36f52; font-weight: bold; box-shadow: 0 4px #f36f52;
}
.result-mod img{ margin: 5% auto; width: 40%;}
.result-mod h3{ width: 60%; margin: 0 auto 6%; text-align: center;background: #fff; box-shadow: 0 4px #f36f52; padding: 10px; border-radius: 10px;
 font-size: 28px;}
.result-mod h3 b{ text-align: center; display:inline-block;color: #f36f52;font-size: 60px; }
.result-mod p{font-size: 20px; font-weight: bold; width: 90%;padding: 10px 14px 0;  text-align: center; }
.result-mod p b{color: #f36f52; padding: 0 5px;}

.jf-btn{ width: 60%; margin: 8% auto 0; display: block;}
.jf-btn img{ width: 100%;}

/* 08 积分榜页 */
.bd-phb{width: 88%;margin:5% auto 10%;}
.bd-phb table{ background-color: #fff; border-spacing: 0; border-collapse: collapse;}
.bd-phb table tr {border-bottom: 1px solid #d4d0d0; height:45px;}
.bd-phb th { text-align: center; padding: 3px; color: #333333;font-size: 16px;font-weight: normal;}
.bd-phb .number img { margin: 0 auto;padding: 3px;color: #333333; width: 16%;}
.jf-table{ text-align: center; }
.jf-table th,.jf-table td{ padding: 5px;}
.jf-table th{ color: #08765d;}
.jf-table tr:nth-child(2) td:first-child{ background:url(icon3.png) no-repeat left center; background-size: 30%;  font-size: 24px;}
.jf-table tr:nth-child(3) td:first-child{ background:url(icon4.png) no-repeat left center; background-size: 30%;font-size: 22px;}
.jf-table tr:nth-child(4) td:first-child{ background:url(icon5.png) no-repeat left center; background-size: 30%;  font-size: 20px;}

/* 新加样式 */
.jf-table .red td{ color: red;}
.my-jf{margin:4% auto; width: 60%;   text-align: center;  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fdddcc; background: #fdddcc; border-radius: 30px; padding: 1%;}
.my-jf h3{ color: #333; font-weight: bold; font-size: 16px;}
.my-jf b{ font-size: 20px; color: #f36f52; padding-left: 5%;}


/* 08-10 长图 */
.bg4{ position: relative; background:#def1c4 url(../images/bg5.jpg)  no-repeat top center; background-size: 100% auto;  }
.bg4 .top-bar{ padding: 4% 4% 0;}
.bg4 .top-bar img{ width: 23%;}
.bg4 header{ margin-top: -2%; margin-bottom: 38%; width: 85%;}

.content{ width: 90%; margin: 0 auto 5%;}
.content img{ width: 100%;}

.back-btn{ position:absolute; right: 3%;  top: 0; width: 24%;}
.back-btn img{ width: 100%;}




/* 新加样式 logo */
.top-bar2{ padding: 4% 7% 0%; display: flex; justify-content: space-between; align-items: center;}
.top-bar2 img{ width: 35%; height: auto;}
.top-bar2 a{ display: inline; }
.top-bar2 a img{width: 60%; float: right; }


/* 前言页 */
.intro-txt dl{ margin-bottom: 20px;}
.intro-txt dt{ text-align: center; font-weight: bold; font-size: 24px; color: #f36f52; margin-bottom: 10px;}
.intro-txt dd{text-indent: 0px; text-align: justify; margin-bottom: 10px; font-size: 14px;}
.intro-txt dt.intro-tit{ text-align: center; font-size: 16px; color: #fff; background:#1581de ; display: inline-block; 
padding: 5px; border-radius: 5px; width:30%; margin-left:35%;}
.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: #f36f52;}
.intro-item h3{ text-align: center; margin-bottom: 5px; text-indent: 0;}
.intro-item p{ font-size: 16px; line-height: 28px;}

/* 挑战成功失败弹框 */
.modal{ position: absolute; z-index: 10; top: 0; left: 0; height: 100%; 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{ display: block; width: 80%; margin: 15px auto 0;-webkit-animation: tada 1s 0.5s 2;animation: tada 1s 0.5s 2 ;}

.tips{ width: 75%; margin: 0 auto 15px; background: #fff; border-radius: 20px; padding: 15px; }
.tips b{ margin-bottom: 10px;display: block; text-align: center; color: #0045a2;}


/*-----首页-----*/
/*头部内容*/
/* .btn{position: absolute; z-index: 1; bottom: 10%; left: 50%;  width: 40%; margin-left: -20%; }
.btn a{ margin-bottom: 5%; display: block;-webkit-animation: tada 1.5s 1s 2;animation: tada 1.5s 1s 2;}
.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: 50%; margin-left: -25%; text-align: center; color: #125eb3; position: absolute; z-index: 1; bottom: 6%; left: 50%; font-size: 14px; font-weight: bold;}
.bottom-txt img{ width: 100%;}




/* 活动规则弹出 */
.mod-rule-wrap{ display: none;  position:absolute; z-index: 10; top: 0; left: 0; height: 100%; width: 100%;}
.mod-rule-wrap:after{ content: ""; display: block; position: absolute; left: 0; top: 0; opacity: 0.7; width: 100%; height: 100%;  background: #000;}
.mod-rule{ position:relative; z-index: 10; width: 80%; margin: 35% auto 0;}
.mod-rule h2{ width: 60%; margin: 0 auto -30px; }
.mod-rule h2 img{ width: 100%;}
.rule-txt{ background: #fff; border: 4px solid #007cdc; border-radius: 20px; padding: 13% 5% 6%;}
.close-btn{ margin: 5% auto; width: 15%;}



/* 微信 得分 时间 */
.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;}



/* 题库 */
.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)
}
}
@media screen and (min-width: 1080px) {
   html,body{ width:500px; margin:0 auto;}
}