.page_container{
    background-color: #eff1f8;
}

/*apply*/
.apply_center{
    background: url("../images/sq_banner_02.png") no-repeat;
    background-size: 100% 260px;
}
.zs_img{
    width: 88%;
    padding: 20px 3%;
    margin: 0 auto;
    margin-top: 48px;
    margin-bottom: 35px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #d1dff4;
}
.zs_img img{
    box-shadow: 0 0 10px #c0d6fc;
    width: 100%;
}
.apply_btn{
    width: 85%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 20px;
}
.pm_btn_blue{
    background-color: #6467fc;
    background-image: linear-gradient(to right,#6467fc,#1e21ba);
}
.pm_btn_orange{
    background-color: #ff6750;
    background-image: linear-gradient(to right,#ed8e4d,#ff6750);
}
.apply_btn a{
    width: 100%;
    color: #fff;
}


/*answer*/
.dt_info{
    width: 92%;
    height: 50px;
    line-height: 50px;
    padding: 0 4%;
    background-color: #fff;
    border-bottom: 1px #dcdddd solid;
}
.dt_info p{
    float: left;
}
.dt_type{
    width: calc(33% - 22px);
    color: #4d76ed;
    padding-left: 22px;
    background: url("../images/icon_02.png") no-repeat;
    background-size: 18px 18px;
    background-position: left center;
}
.dt_time{
    width: 34%;
    height: 30px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    margin-top: 10px;
    letter-spacing: 0;
    background-color: #4d76ed;
    border-radius: 5px;
}
.dt_num{
    width: 33%;
    color: #4d76ed;
    text-align: right;
}
.question{
    width:92%;
    line-height: 30px;
    word-break: break-word;
    background-color: #fff;
    padding: 20px 4% 50px 4%;
}
.read_content{
    font-size: 16px;
    margin-bottom: 25px;
}
.read_content p{
    color: orangered;
    font-weight: bold;
    font-size: 17px;
}
.anwer_choice{
    width: 100%;
    margin-bottom: 25px;
}
.anwer_item{
    display: flex;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 11px;
}
.anwer_item:last-child{
    border: none;
}
.anwer_item input{
    display: none;
    margin-right: 15px;
}
.anwer_item>label{
    position: relative;
    display: inline-block;
    width: 85%;
    word-break: break-word;
}
.anwer_item>label::before{
    display: inline-block;
    content: "";
    position: relative;
    bottom: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #e6e7e7;
    margin-right:15px;
    vertical-align: bottom;
    background-color: #edeef3;
}
.anwer_item>input:checked+label::before{
    background-color: #4d76ed;
    border: 1px #4d76ed solid;
}
.anwer_item input[type='checkbox']{
    display: inline-block;
    position: relative;
    top: 6px;
    width: 18px;
    height: 18px;
}
.anwer_item input[type='checkbox']+label::before{
    display: none;
}

.dt_btn{
    position: fixed;
    left: 0;
    bottom: 76px;
    z-index: 10;
    width: 100%;
    max-width: 750px;
    padding: 10px 0;
    background-color: #efefef;
}
.submit_btn{
    width: 92%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #4d76ed;
    border-radius: 5px;
    margin-left: 4%;
}
.submit_btn input{
    display: inline-block;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 17px;
    background-color: #4d76ed;
    border: 1px #4c75ec solid;
}

/*�޸ĸ�ѡ�����ɫ*/
input[type=checkbox] {
    cursor: pointer;
    position: relative;
}
input[type=checkbox]::after {
    position: absolute;
    top: 0;
    background-color: #fff;
    color: #fff;
    width: 18px;
    height: 18px;
    display: inline-block;
    visibility: visible;
    padding-left: 0;
    text-align: center;
    content: ' ';
    border-radius: 2px;
    box-sizing: border-box;
    border: 1px solid #ddd;
}
input[type=checkbox]:checked::after {
    content: "";
    background-color: #4d76ed;
    border-color: #4d76ed;
}
input[type=checkbox]:checked::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 7px;
    width: 3px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    z-index: 1;
}
@media screen and (min-width: 750px) {
    .dt_btn{
        left: calc((100% - 750px) / 2);
    }
}


.dt_card{
    position: fixed;
    right: 5%;
    bottom: 20vh;
    width: 60px;
    height: 50px;
    line-height: 18px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    background-color: #3161eb;
    border-radius: 50%;
    padding: 5px 0;
}
.dt_card img{
    width: 22px;
}
.dt_card_box{
    display: none;
    position: absolute;
    top: 112px;
    left: 0;
    z-index: 3;
    width: 88%;
    height: calc(100vh - 202px);
    padding: 10px 6% 20px 6%;
    overflow-y: auto;
    background-color: #fff;
}
.dt_card_box::-webkit-scrollbar{
    width:5px;
    height:5px;
}
.dt_card_box::-webkit-scrollbar-track{
    background: rgb(239, 239, 239);
    border-radius:2px;
}
.dt_card_box::-webkit-scrollbar-thumb{
    background: #bfbfbf;
    border-radius:10px;
}
.dt_card_box::-webkit-scrollbar-thumb:hover{
    background: #3161eb;
}
.dt_card_box::-webkit-scrollbar-corner{
    background: #3161eb;
}
.close{
    width: 100%;
    text-align: right;
}
.close img{
    width: 30px;
}
.dt_card_box ul li{
    float: left;
    width: 28px;
    margin: 8px;
}
.dt_card_box ul li a{
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 1px #aaa solid;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: #999;
}
.dt_card_box ul li a:hover{
    color: #fff;
    background-color: #6990e0;
    border: 1px #6990e0 solid;
}


/*login*/
.login_page{
    background-color: #f6f7fb;
}
.login_btn{
    width: 200px;
    margin: 0 auto;
    line-height: 30px;
    color: #333;
    padding-top: 22vh;
    text-align: center;
}
.login_btn img{
    width: 130px;
    margin-top: 25px;
}
.login_btn p:nth-child(1){
    font-size: 18px;
    color: #1e21ba;
}
.login_btn p:nth-child(2){
    font-size: 14px;
}
.privacy{
    width: 100%;
    color: #333;
    margin: 15px 0;
    text-align: center;
}
.privacy input{
    margin-right: 5px;
}
.privacy a{
    color: #333;
    text-decoration: underline;
}


/*my_info*/
.p_i_title{
    width:356px;
    text-align: center;
    font-size: 30px;
    color:#fff;
    margin: 0 auto;
    margin-top: 15px;
}
.p_i_title img{
    width: 120px;
}
.my_info_item{
    width: 84%;
    height: 42px;
    line-height: 42px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px #989eaf solid;
    margin: 0 auto;
    margin-bottom: 15px;
}
.my_info_item input,.my_info_item select{
    width: 94%;
    height: 40px;
    border: none;
    outline: none;
    color: #333;
    font-size: 15px;
    padding: 0 3%;
    background-color: transparent;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #989eaf;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #989eaf;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #989eaf;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #989eaf;
}
.my_info_item select{
    color: #666;
    padding-left: 3.5%;
}
.confirm_btn{
    width: 84%;
    margin: 0 auto;
}
.confirm_btn input{
    display: inline-block;
    width: 100%;
    height: 44px;
    text-align: center;
    line-height: 44px;
    border-radius: 5px;
    color: #fff;
    border: none;
    outline: none;
    font-size: 16px;
    background-color: #0953b6;
    background-image: linear-gradient(to right,#6467fc,#1e21ba);
}
.page_tips{
    width: 84%;
    margin: 0 auto;
    color: red;
    margin-top: 15px;
    text-align: center;
}

/*result*/
.result_center{
    background: url("../images/cj_bg_02.png") no-repeat;
    background-size: 100% auto;
    background-color: #fff;
}
.result_title{
    width: 90%;
    padding: 0 5%;
    color: #fff;
    margin-top: 30px;
}
.t_c{
    font-size: 23px;
    margin: 5px 0;
}
.t_line{
    width: 40px;
    height: 3px;
    background-color: #fff;
}
.user_info{
    position: relative;
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 10px;
    padding: 30px 5% 20px 5%;
    background: url(../images/cj_info_bg_03.png) no-repeat;
    background-size: 100% auto;
    background-color: #fff;
    box-shadow: 0 5px 20px #deebfa;
}
.user_info h4{
    font-size: 18px;
    color: #1e21ba;
    margin-bottom: 10px;
    font-weight: bold;
}
.score{
    position: absolute;
    top: 25px;
    right: 5%;
    text-align: right;
    color: #1e21ba;
}
.grade{
    position: relative;
    font-size: 50px;
}
.grade::after{
    content: ' ';
    display: inline-block;
    position: relative;
    top: -32px;
    right: 0;
    width: 12px;
    height: 12px;
    background-color: #ffa30c;
    border-radius: 50%;
}
.r_right span:last-child{
    position: relative;
    right: 14px;
    font-size: 17px;
    font-weight: bold;
}
.s_info{
    display: flex;
    width: 100%;
    height: 55px;
    line-height: 55px;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px #dcdddd solid;
}
.s_info:last-child{
    border: none;
}
.s_info span:first-child{
    display: inline-block;
    width: 52px;
    font-weight: bold;
}
.view_cs_btn,.again_btn,.view_history{
    width: 85%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 20px;
    background-image: linear-gradient(to right,#6467fc,#1e21ba);
}
.again_btn{
    background-image: linear-gradient(to right,#ed8e4d,#ff6750);
}
.view_history{
    background-image: linear-gradient(to right,#fecb7e,#ffa30c);
}
.view_cs_btn a,.again_btn a,.view_history a{
    display: inline-block;
    width: 100%;
    color: #fff;
}

.view_zs_btn{
    width:80%;
    margin: 0 auto;
    padding: 30px 0;
}
.view_zs_btn a,.follow_wx{
    display: inline-block;
    width: 100%;
    height: 44px;
    color: #fff;
    text-align: center;
    line-height: 44px;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 10px;
}
.follow_wx{
    background-color: #ffa30c;
    background-image: linear-gradient(to right,#fecb7e,#ffa30c);
}
.zs_receive{
    display: none;
    width: 100%;
    text-align: center;
}
.zs_receive p{
    margin: 10px 0;
}
.zs_receive img{
    width: 180px;
}
.test_details{
    width: 86%;
    margin: 0 auto;
    line-height: 30px;
    margin-top: 30px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 4%;
}
.question{
    width: 90%;
    padding: 15px 5%;
    background-color: #fff;
}
.question p{
    margin-bottom: 15px;
}
.choose_answer{
    width: 100%;
    margin-top: 10px;
}
.anwer_item{
    margin-bottom: 30px;
    margin-left: 11px;
}
.anwer_item input{
    display: none;
    margin-right: 15px;
}
.anwer_item>label{
    position: relative;
}
.anwer_item>label::before{
    display: inline-block;
    content: "";
    position: relative;
    bottom: 7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #e6e7e7;
    margin-right:15px;
    vertical-align: bottom;
    background-color: #edeef3;
}
.anwer_item>input:checked+label::before{
    background-color: #3161eb;
    border: 1px #3161eb solid;
}
.a_right label:before{
    background-color: #0cc462;
}
.a_error label:before{
    background-color: #eb3131;
    border:1px #eb3131 solid;
}

/*volunteer*/
.zyz_center{
    background: url("../images/p_banner.png") no-repeat;
    background-size: 100% 260px;
}
.zyz_main{
    width: 86%;
    margin: 0 auto;
    padding: 20px 4%;
    background-color: #fff;
    margin-top: 15px;
    border-radius: 10px;
}
.invite_btn,.zyz_zs_btn,.bm_zyz_btn{
    width: 100%;
    text-align: center;
}
.i_link,.i_poster,.zs_electronic,.zs_paper,.bm_zyz_btn input{
    display: inline-block;
    width: 80%;
    height: 40px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    margin: 6px 20px;
    border-radius: 6px;
    background-color: #457aff;
    border: 1px #457aff solid;
}
.i_poster,.bm_zyz_btn input{
    background-color: #fa5b28;
    border: 1px #fa5b28 solid;
}
.zs_electronic{
    color: #c11d10;
    background-color: #fff;
    border: 1px #c11d10 solid;
}
.zs_paper{
    background-color: #c11d10;
    border: 1px #c11d10 solid;
}
#link_m{
    width: 90%;
    margin: 30px auto;
    line-height: 30px;
}
#poster_m{
    width: 360px;
    text-align: center;
    line-height: 30px;
    padding: 30px 0;
}
#poster_m a{
    width: 100%;
}
.add_qun{
    width: 100%;
    text-align: center;
    margin-top: 6px;
}
.add_qun a{
    display: inline-block;
    width: 80%;
    height: 40px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    margin: 0 20px;
    margin-bottom: 15px;
    border-radius: 6px;
    background-color: cornflowerblue;
    border: 1px cornflowerblue solid;
}
.invite_data{
    width: 100%;
    text-align: center;
}
.zs_demo{
    width: 100%;
    margin-top: 20px;
}
.zs_demo h4{
    font-size: 16px;
    font-weight: bold;
}
.zs_demo span{
    display: inline-block;
    width: 100%;
    text-align: center;
}
.invite_notic{
    width: 100%;
    margin-top: 25px;
}
.invite_notic h3{
    width: 100%;
    text-align: center;
    margin-bottom: 7px;
    font-size: 18px;
    font-weight: bold;
}


/*paper*/
.payinfo{
    width:90%;
    padding: 20px 5%;
    padding-bottom:30px;
}
.apply_tips{
    width:100%;
    margin:auto;
    text-align:left;
}
.apply_tips h3{
    width: 100%;
    text-align: center;
    margin-bottom: 7px;
    font-size: 18px;
    font-weight: bold;
}
.buyinfo,.buyinfo1{
    margin-top:18px;
}
.pro{
    margin-top: 0;
}
.text{
    width:98.5%;
    height:48px;
    line-height:48px;
    border:#c9caca 1px solid;
    padding-left:5px;
    border-radius:4px;
    font-size:16px;
    outline:none;
}
.text2 {
    width:98.5%;
    height:55px;
    outline:none;
    border:#d3d3d3 1px solid;
    border-radius:4px;
    padding-left:5px;
    font-size:16px;
    margin-top: 18px
}
.buyinfo .form-group{
    width: 100%;
    margin-top: 18px;
}
.buyinfo select {
    width:80%;
    height: 48px;
    color:#666;
    line-height:48px;
    border: #d3d3d3 1px solid;
    border-radius: 4px;
    padding-left: 5px;
    font-size:16px;
    outline:none;
}
.apply_zs_btn{
    width:100%;
    text-align: center;
    margin-top: 12px;
}
.apply_zs_btn input{
    display: inline-block;
    width: 100%;
    color: #fff;
    height: 45px;
    text-align: center;
    line-height: 45px;
    border-radius: 5px;
    border: none;
    outline: none;
    font-size: 16px;
    background-color: #03989c;
    background-image: linear-gradient(to right,#00a5ff,#03989c);
}
.select_pay{
    width: 100%;
    text-align: center;
}
.pay_item{
    width: 100%;
    padding-bottom: 10px;
}
.pay_item img{
    margin-left: 5px;
}
.pay_item input{
    position: relative;
    top: 3px;
    width: 18px;
    height: 18px;
}


/*rank*/
.rank_banner{
    width: 100%;
}
.rank_banner img{
    width: 100%;
}
.rank_content{
    width: 94%;
    border: 1px #dcdddd solid;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 12px;
    overflow: hidden;
}
.ranking th{
    height: 50px;
    line-height: 50px;
    color: #222;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    border-bottom: 1px #e3e3e3 solid;
}
.rank_content table{
    width: 94%;
    text-align: center;
    margin: 0 auto;
}
.rank_content table tr{
    width: 100%;
}
.rank_content table tr td{
    width: 25%;
    color: #3e3a39;
    padding: 17px 0;
    border-bottom: 1px #e3e3e3 solid;
}
.rank_content table tr:last-child td{
   border: none;
}