style.css 9.71 KB
@charset "utf-8";

/*
 * 常用记录
 *		color:#07907c,#2dd1af 
 *		多行省略 : overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
 *		单行省略 : white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
 */
@import url("font-awesome.css");
body{ max-width:640px; margin:0 auto; background:#fff; overflow-x:hidden; position:relative; width:100%;}
body.bodybg{ background:#e4f3ee; }
input[type="submit"],input[type="text"],input[type="button"],select{ -webkit-appearance:none; outline:none;}
select{border-radius:4px; border:1px solid #e8e8e8;  padding:0 20px 0 8px; position:relative; background:url(../images/down.png) no-repeat 99% center #fff; background-size:20px; font-size:14px;}

/*首页*/
.indexbg{ width:100%;height:100%; display:block; position:relative; z-index:9; background:url(../images/indexbg.jpg) center bottom no-repeat; background-size:100% auto;}
.indexbg .index-top{ position:absolute; width:50%; left:0; top:0;}
.indexbg .index-mid{ position:absolute; width:80%; left:10%; top:75px;}
.index-wrap{ position:absolute; bottom:28.76%; width:90%; left:5%; z-index:10; text-align:center;}
.index-wrap a{ display:block; background:#bbe3d6; color:#50b19d; width:200px; height:40px; line-height:40px; text-align:center; margin:0 auto; border-radius:5px; font-size:16px; font-weight:bold;}
.index-wrap a:hover{ opacity:.5;}
.index-wrap a.gameover{ background-color:#fff; color:#666;}


.cover-bg{ position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:100;}
.index-rule{ position:absolute; top:10%; left:7%; right:7%; height:auto;  background:#fff; border-radius:5px; z-index:101; box-shadow:0 2px 4px rgba(0,0,0,.2);}
.index-rule h3{ font-size:16px; padding:15px; background:#50b19d; color:#fff; border-radius:5px 5px 0 0;}
.index-rule article{font-size:14px; padding:8px 20px; line-height:22px; color:#666;}
.index-rule article p{ padding:10px 0; border-bottom:1px dashed #e8e8e8;word-break:break-all;}
.index-rule article p span{ /*font-weight:bold; color:#333; font-size:16px; */ color:#fe6765; margin-left:2px;}
.index-rule .rule-close{ display:block; position:absolute; right:0; top:0; width:46px; height:46px; text-align:center; color:#fff; line-height:46px; font-size:18px; z-index:1000;}
.index-rule .rule-close:hover{ background:#2dd1af; border-radius:0 5px 0 0;}
.index-rule .tips{ color:#bbb; line-height:40px; font-size:12px; display:block; text-align:center;}
.index-rule.hide{ -webkit-animation:fadeOutRight .5s ease both; opacity:0;}
.index-rule.show{ -webkit-animation:fadeInRight .5s ease both; opacity:1;}
.index-rule-open{ display:block; position:absolute; left:20px; top:40px; width:55px; height:55px; background:url(../images/rule-open.png) no-repeat center center;background-size:100%; color:#fff; z-index:11; font-size:12px; line-height:15px; -webkit-transition:all .4s ease;}
.index-rule-open:before{ content:""; display:block; height: 60px; width:3px; background:#50b19d; top:-57px; left:25.5px; position:absolute;}
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
  100% {
	opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@-webkit-keyframes fadeInRight {
  0% {
	opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
	opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes indexA{
	0%{ opacity:0; -webkit-transform:translateY(100%);}
	100%{ opacity:1; -webkit-transform:translateX(0);}
}

/*顶部*/
.header{ background:#07907c; color:#fff; height:45px; line-height:45px; position:fixed; top:0; left:0; width:100%; box-shadow:0 1px 2px rgba(0,0,0,.1); z-index:1000;}
.header .back{ display:block; position:absolute; left:0; top:0; width:45px; height:45px; background:url(../images/left-white.png) no-repeat center center; background-size:25px;}
.header .back:hover{ background-color:#2dd1af;}
.header .mid{ margin:0 50px; text-align:center; font-weight:bold; font-size:16px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.h-header{ height:45px;}

/*提交时的背景*/
#submitBg{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:999; }

/*学校选择*/
.school-wrap{ width:320px; margin:50px auto 0; position:relative;}
.school-wrap .circle{ background:rgba(11,159,137,.1); width:300px; height:auto;padding:1px 0; margin:0 auto; border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.05); position:relative;}
.school-wrap .form{ padding:20px 20px 7px; margin:10px; background:rgba(11,159,137,.2);}
.school-wrap .form-t{ margin-bottom:25px; color:#333;}
.school-wrap .form-t .fa{ font-size:18px; margin:0 8px 0 0;}
.school-wrap .form-t .fa-mobile-phone{ font-size:24px;}
.school-wrap select{ display:block; width:100%; height:40px; margin-bottom:15px; color:#333; border:0;}
.school-wrap select option{ width:100%;}
.school-wrap .input-1{display:block; width:100%; height:40px; margin-bottom:15px; color:#333; border:0; border-radius:4px; padding:0 12px; box-sizing:border-box; font-size:14px; outline:none;}

.school-wrap .input-submit{ display:block; height:50px; text-align:center; background:#07907c; color:#fff; font-weight:bold; font-size:16px; border:0; border-radius:5px; width:200px; margin:20px auto; outline:none;}
.school-wrap .input-submit:hover{ background:#2dd1af;}

.school-wrap-one .form{margin-top:70px;}
.checkerror{ border:1px solid #ff780a!important; background-color:#fee7e7;}

.school-wrap .verbox{ position:relative;}
.school-wrap .verbox .input-1{ width:50%; float:left;}
.school-wrap .verbox .btn-send{ display:block; width:45%; float:left; margin-left:5%; height:40px; line-height:40px; border-radius:5px; background:#d53529; text-align:center; color:#fff; -webkit-transition:all .5s ease}
.school-wrap .verbox .btn-send.hasSend{ background:#999;}

.school-wrap .slide-0 .a-student,
.school-wrap .slide-0 .a-people{ display:block; width:100%; text-align:center; height:40px; line-height:40px; background:#07907c; color:#fff; margin:16px 0;}
.school-wrap .slide-0 .a-people{ margin:0 0 24px;}
.school-wrap .slide-0 .a-student:hover,
.school-wrap .slide-0 .a-people:hover{ background:#2dd1af}

/*开始答题*/

.hasChecked{ position:fixed; bottom:15px; right:15px; text-align:center; padding:5px 10px; line-height:30px; background:rgba(0,0,0,.5); z-index:999; color:#fff; border-radius:1px;}
.question-wrap{ padding:30px 15px 0; font-size:14px; color:#333; line-height:28px; position:relative;}
.question-wrap .topTitle{ font-size:20px; color:#333; font-weight:bold;}
.question-wrap .p-school{ position:relative; line-height:25px; margin-bottom:4px;}
.question-wrap .p-school .schoolname{ position:absolute; display:inline-block; width:42px; top:0; left:0;}
.question-wrap .p-school .mid{ margin-left:42px;}
.question-wrap .question{ margin-bottom:50px;}
.question-wrap .question .t{ position:relative; font-size:18px; margin-bottom:10px; word-break:break-all;}
.question-wrap .question .t .num{ font-weight:bold; color:#07907c; text-shadow:0 1px 2px rgba(0,0,0,.1); font-size:22px;}
.question-wrap .question .b .opt{ display:block; background:#fff; border-radius:5px; margin:7px 0 0; padding:10px 8px; color:#666; word-break:break-all; box-shadow:0 1px 1px rgba(0,0,0,.1)}
.question-wrap .question .b .iradio_flat-orange{ margin:-5px 5px 0 0;}
.question-wrap .input-submit{ display:block; height:50px; text-align:center; background:#07907c; color:#fff; font-weight:bold; font-size:16px; border:0; border-radius:5px; width:200px; margin:40px auto; outline:none;}
.question-wrap .input-submit:hover{ background:#2dd1af;}
.question-wrap .input-gray{background:#999!important;}
.question-wrap textarea{ display:block; width:100%; padding:8px; box-sizing:border-box; border:0; background:#fff; height:64px; line-height:24px; text-align:left; outline:none; -webkit-appearance:none; border-radius:5px;box-shadow:0 1px 1px rgba(0,0,0,.1);word-break:break-all; font-size:14px;}
.question-wrap .loading{ text-align:center; color:#aaa; font-size:14px; display:none; }

/*底部*/
.footer{ font-size:12px; color:#444; text-align:center;  padding:10px 0 50px; line-height:25px;}
.footer img{ height:30px; vertical-align:middle; margin-top:-5px;}
.footer a{ color:#111; }

/*广告*/
.guanggao{ padding:0 15px; position:relative;}
.guanggao img{ width:100%; display:block;}
.guanggao p{ background:#fff; padding:3px 5px; font-size:10px; text-align:center; line-height:14px;}
.guanggao .guanggao-4{ width:50%; position:absolute; right:15px; bottom:0; line-height:25px; text-align:left; letter-spacing:5px;}

/*答对题数*/
.thanks-top{ position:relative; width:80%; margin:0 auto; padding-top:70px; display:block;}

.thanks-info{ position:relative; width:250px; display:block; margin:10% auto 0; font-size:14px; line-height:30px; color:#737373;  background:rgba(11,159,137,.1); padding:15px; border-radius:5px; color:#333;}
.thanks-info .box{  background:rgba(11,159,137,.3); padding:15px 10px; }
.thanks-info i.fa{ vertical-align:middle; margin:-2px 5px 0 -5px;}
.thanks-info .thanks-title{  height:35px; margin:0 auto 7px; display:block; text-align:center; color:#07907e}
.thanks-info .row{ padding:0 10px;}
.thanks-bottom{ position:absolute; bottom:0; width:100%; left:0;}
@-webkit-keyframes reportUp{
	0%{ opacity:0; -webkit-transform:translateY(50px)}
	100%{ opacity:1; -webkit-transform:translateY(0)}
}


/*errorPage*/
.errorPage{ text-align:center;}
.errorPage img{ width:50%; margin:20% auto 10%; display:block;}
.errorPage .errorMsg{ font-size:20px; color:#c00000;}
.errorPage .home{ display:inline-block; width:150px; height:45px; line-height:45px; margin-top:20%; background:#c00000; color:#fff;font-size:16px; border-radius:5px;}
.errorPage .home:hover{ background:#ff0000;}