﻿/********公共样式*********/
html {
    height: 100%;
}
body {
    font-family:"SimHei",'microsoft yahei',sans-serif;
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    color:#007d50;
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
}
ul,ol,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,div,input,button,a,form,textarea,th,tr,td,table,span{
    margin:0;
    padding:0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
ul,ol{
    list-style:none;
}
input,button {
    -webkit-appearance: none;
    border-radius: 0;
    border: none;
    outline: none;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;
}
.clearfix:before {
    content: '';
    display: table;
}
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.none {
    display: none;
}
.none_fade{
    opacity: 0!important;
}
.block{
    display:block;
}
.img_loading{
    position: fixed;
    left: 50%;
    top:40%;
    width:2rem;
    height:2rem;
    margin-left:-1rem;
    z-index: 101;
}
/********公共样式结束*********/
/*主页面*/
.loading{
    position: fixed;
    z-index: 1110;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background:#fff;
}
.loading .pro {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -80px;
    font-size: 2rem;
}
.home_start{
    position: absolute;
    left: 0;
    right:0;
    top:0;
    bottom: 0;
    text-align: center;
    background: #fff;
}

@keyframes homeScale {
    0%{
        transform: scale(0.95);
    }
    100%{
        transform: scale(1);
    }
}
@-webkit-keyframes homeScale {
    0%{
        -webkit-transform: scale(0.95);
    }
    100%{
        -webkit-transform: scale(1);
    }
}
.img_start{
    width: 54%;
    margin-top:6.25rem;
    will-change:transform;
}
.home_scale{
    animation:homeScale 3s ease both;
    -webkit-animation:homeScale 3s ease both;
    will-change:auto;
}
.home_contain{
    background: #f9ec00;
    position: absolute;
    left: 0;
    right:0;
    top:0;
    bottom: 0;
    text-align: center;
    overflow-y: hidden;
}
.home_head{
    width:100%;
    height:9.3rem;
    background: #007d50 url('../images/home_h.png') no-repeat center 1rem;
    background-size: auto 7.6rem;
}
.home_space{
    width: 100%;
    height:0.65rem;
    background: #fff;
}
.home_gift{
    width: 46.6%;
    margin-top:2.1rem;
}
.home_bottom{
    width: 100%;
    position: absolute;
    bottom: 0;
}
.active_btn{
    width:4.5rem;
    height:1.5rem;
    background: rgba(255,255,255,0.7);
    border-radius: 0.8rem;
    line-height: 1.5rem;
    margin: auto;
    font-size: 0.72rem;
}
.active_join{
    width: 87%;
    height: 2.65rem;
    line-height: 2.65rem;
    background: #009ee0;
    color: #fff;
    font-size: 1.35rem;
    text-align: center;
    border-radius: 0.4rem;
    margin: 0.85rem auto 1.1rem auto;
    box-shadow: 0 0 17px 2px rgba(0,0,0,0.4);
    font-weight: bold;
    letter-spacing: 0.1rem;
}
.active_content{
    width: 87%;
    position: absolute;
    top: 1.05rem;
    bottom: 1.1rem;
    left: 6.5%;
    background: url(../images/home_blur.png) no-repeat center bottom;
    background-size: 100% auto;
    box-shadow:-3px 0 10px transparent, /*左边阴影*/
    3px 0 10px transparent, /*右边阴影*/
    0 -3px 10px transparent, /*顶部阴影*/
    0 3px 17px 2px rgba(0,0,0,0.4); /*底边阴影*/
    border-radius: 0.4rem;
}
.active_head{
    width: 100%;
    height:2.4rem;
    line-height: 2.4rem;
    background: #f9ec00;
    border-radius:0.4rem 0.4rem 0 0 ;
    font-size: 0.9rem;
    box-shadow: 0 0 17px 2px rgba(100,100,100,0.3);
    font-weight: bold;
}
.active_body{
    width: 100%;
    position: absolute;
    top: 2.4rem;
    bottom: 4rem;
    padding:0.6rem 1.1rem 0 1.1rem;
    overflow: scroll;
    text-align: left;-webkit-overflow-scrolling: touch;
}
.active_body h3{
    font-size: 0.64rem;
    font-weight:bold;
    padding:0.3rem 0 0.1rem 0;
}
.active_body p{
    font-size: 0.64rem;
    text-indent:2em;
    line-height: 1.5em;
}
.active_pre{
    padding-left: 1.2rem;
    text-indent: 0!important;
    text-align: justify;
}
.active_body li{
    font-size: 0.64rem;
    line-height: 1.5em;
    padding-left:1.2rem;
    position: relative;
    text-align: justify;
}
.active_body li b{
    position: absolute;
    top:0;
    left: 0.3rem;
    font-weight: normal;
}
.active_body li b.lg_nine
{
    left:0;
}
.copyright{
    font-size: 0.64rem;
    margin-top: 0.8rem;
    text-align: left;
    margin-bottom: 0.3rem;
    font-weight: bold;
}
.active_close{
    width: 3.2rem;
    height: 2.05rem;
    line-height: 2rem;
    background: #f9ec00;
    font-size: 0.8rem;
    text-align: center;
    position: absolute;
    bottom: 1.15rem;
    left: 50%;
    margin-left: -1.6rem;
    border-radius: 0.4rem;
    font-weight: bold;
    box-shadow: 0 0 17px 1px rgba(80,80,80,0.4);
}
/*主页面结束*/
/*登录页面*/
.login_contain{
    width:100%;
    height:100%;
    background:url('../images/bg_login.png') no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top:0;
}
.login_title{
    font-size: 1.35rem;
    font-weight: bold;
    position: absolute;
    top:1.75rem;
    left:7.2%;
    opacity: 1;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.login_logo{
    width: auto;
    height:3.35rem;
    position: absolute;
    right:6.9%;
    top:0.8rem;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.form_cont_blur{
    width: 85.6%;
    height: 13.5rem;
    position: absolute;
    top: 6rem;
    left: 7.2%;
    background: url('../images/bg_login.png') no-repeat;
    background-size: 116.8% auto;
    background-position: center -6rem;
    -webkit-filter: blur(6px);
}
.form_cont{
    width:85.6%;
    height:13.3rem;
    position: absolute;
    top:6rem;
    left:7.2%;
    background: rgba(255,255,255,0.5);
    border-radius: 0.4rem;
    transform: translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
    will-change:transform;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    box-shadow: 0 0 17px 2px rgba(0,0,0,0.4);
}
.form_change .form_cont{
    background: #f9ec00;
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
}
.cont_trans .form_cont{
    transform:translate3d(-72.6%,0,0);
    -webkit-transform:translate3d(-72.6%,0,0);
    transition: all 0.9s ease;
    -webkit-transition: all 0.9s ease;
}
.form_cont input{
    width: 100%;
    height:3.65rem;
    padding-left:43.5%;
    background-color: transparent;
    font-size: 0.8rem;
    font-weight: bold;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    color:#007d50;
}
.input_tel{
    background: url(../images/f_tel.png) no-repeat 36% 49%;
    background-size: auto 1.05rem;
}
.input_code{
    border-bottom:none!important;
    background: url(../images/f_envel.png) no-repeat 36% 49%;
    background-size: auto 0.75rem;
}
.form_cont input::-webkit-input-placeholder{
    color:#007d50;
}
.border_gl{
    display: block;
    width: 100%;
    border-bottom: 1px solid #005c3b;
}
.login_select{
    width: 100%;
    height:3.65rem;
    line-height: 3.6rem;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding-left: 43.5%;
    font-weight: bold;
    position: relative;
}
.f_car{
    width: 1.45rem;
    position: absolute;
    left: 32%;
    top:1.4rem;
}
.img_car{
    position: absolute;
    width: 1.45rem;
    top: 6.6rem;
    right: 9rem;
    margin-top: -1.5rem;
    will-change:transform;
    transform: translate3d(0,0,0);
     -webkit-transform: translate3d(0,0,0);
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    z-index: 9999;
}
.car_change .img_car{
    transform: translate3d(0,1.5rem,0);
    -webkit-transform: translate3d(0,1.5rem,0);
}
.cont_trans .img_car{
    transform: translate3d(6.9rem,1.5rem,0);
     -webkit-transform: translate3d(6.9rem,1.5rem,0);
    transition: all 0.9s ease;
    -webkit-transition: all 0.9s ease;
}
.login_select span{
    max-width: 5rem;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.login_more{
    width: 0;
    height: 0;
    border-top: 0.25rem solid transparent;
    border-right: 0.25rem solid #007d50;
    border-bottom: 0.25rem solid #007d50;
    border-left: 0.25rem solid transparent;
    display: inline-block;
    margin-left: 0.3rem;
    position: absolute;
    top: 46%;
}
.get_message{
    width:100%;
    height:2.4rem;
    line-height: 2.4rem;
    background: #007d50;
    color:#fff;
    text-align: center;
    font-size: 0.8rem;
    box-shadow:-3px 0 10px transparent, /*左边阴影*/
    3px 0 10px transparent, /*右边阴影*/
    0 -2px 14px 1px rgba(30,30,30,0.4), /*顶部阴影*/
    0 3px 17px 2px transparent; /*底边阴影*/
    border-radius: 0 0 0.4rem 0.4rem;
}
.error_message{
    position: absolute;
    bottom: -1.3rem;
    font-size: 0.7rem;
    color: #f9ec00;
    padding-left: 0.3rem;
}
.btn_login{
    width:85.6%;
    position: absolute;
    bottom:1.1rem;
    left:7.2%;
    background:#f9ec00;
    font-size: 1rem;
    height:2.85rem;
    line-height:2.85rem ;
    text-align: center;
    font-weight: bold;
    border-radius: 0.4rem;
    box-shadow: 0 0 17px 2px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.select_list_blur{
    width: 10.65rem;
    height: 20.3rem;
    position: absolute;
    right: 0;
    top: 2.65rem;
    background: url(../images/bg_login.png) no-repeat 100% -2.65rem;
    -webkit-filter: blur(6px);
    background-size: 169% auto;
}
.select_list{
    width: 10.65rem;
    height: 20.15rem;
    background: rgba(255,255,255,0.6);
    border-radius: 0.4rem 0 0 0.4rem;
    position: absolute;
    right: 0;
    top: 2.65rem;
    will-change:transform;
    transform: translate3d(100%,0,0);
    -webkit-transform: translate3d(100%,0,0);
    transition: all 0.6s ease-out;
    -webkit-transition: all 0.6s ease-out;
    box-shadow: 0 0 17px 2px rgba(0,0,0,0.4);
}
.select_trans .select_list{
    transform: translate3d(0%,0,0);
    -webkit-transform: translate3d(0%,0,0);
}
.select_list li{
    width:100%;
    height:3.35rem;
    line-height: 3.35rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    border-top:1px solid #005c3b;
    font-size: 0.8rem;
    font-weight: bold;
}
.select_list li:not(:last-child):active{
    background: #f9ec00;
}
.select_list li:first-child{
    border-top:none;
}
.select_list li:last-child{
    border-bottom:none;
    border-radius: 0 0 0 0.4rem;
    height: 3.3rem;
}
.select_list input::-webkit-input-placeholder{
    color:#007d50;
}
.select_list input{
    width: 100%;
    height:100%;
    background: transparent;
    text-align: center;
    font-weight: bold;
    color:#007d50;
    font-size: 0.8rem;
    border-radius: 0 0 0 0.4rem;
    padding: 0 1rem;
}
.select_list input:focus{
    color:#fff;
    background:#007d50;
    border-top:none ;
    height: 105%;;
}
/*登录页面结束*/
/*扫描页面*/
.scan_html{
    overflow: hidden;
}
.scan_page{
    background: url('../images/bg_scan.png') no-repeat center 3.63rem;
    background-size: 100% auto;
    overflow: hidden;
}
.scan_both_wrap{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.scan_head{
    width: 100%;
    height:3.63rem;
    background: #f9ec00;
}
.scan_tab_list{
    padding-left:1.1rem;
}
.scan_tab_list li{
    float: left;
    height: 3.63rem;
    line-height: 3.6rem;
    width: 5rem;
    text-align: center;
}
.tab_scan,.tab_record{
    font-size: 0.8rem;
}
.tab_scan.tab_current span,.tab_record.tab_current span{
    font-size: 0.9rem;
    font-weight: bold;
    padding-bottom:0.2rem;
    border-bottom: 2px solid #007d50;
}
.scan_start{
    width: 100%;
    position: absolute;
    top: 6rem;
    left: 0;
    will-change:transform;
    transform: translate3d(0%,0,0);
    -webkit-transform: translate3d(0%,0,0);
    transition: all 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.scan_wrap{
    width: 15.35rem;
    height: 15.35rem;
    background: rgba(255,255,255,0.6);
    text-align: center;
    box-shadow: 0 0 17px 2px rgba(0,0,0,0.4);
    border-radius: 0.4rem;
    margin: auto;
}
.img_scan{
    width:5.9rem;
    margin-top: 3.2rem;
}
.btn_scan{
    width: 14.15rem;
    height: 2.2rem;
    background: #007d50 url(../images/QRcode.png) no-repeat 34% center;
    background-size: 6.5%;
    color: #f9ec00;
    font-size: 1rem;
    border: none;
    margin-top: 2.7rem;
    padding-left: 1.6rem;
    border-radius: 0.4rem;
}
.scan_bottom_wrap{
    width: 15.35rem;
    border-radius: 0.4rem;
    margin: 1.65rem auto 0 auto;
}
.scan_bottom{
    width: 15.35rem;
    height:2.65rem;
    position: relative;
}
.scan_bottom_input{
    border:none;
    width: 100%;
    height:100%;
    padding-left:0.6rem;
    font-size:0.73rem;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 0 17px 2px rgba(0,0,0,0.4);
    border-radius: 0.4rem;
    color:#666;
}
.scan_bottom_input::-webkit-input-placeholder{
    color:#666;
}
.scan_bottom_btn{
    width:3.5rem;
    height:2.05rem;
    background: #999;
    color:#fff;
    border:none;
    font-size:0.8rem;
    font-weight: bold;
    position: absolute;
    top:0.3rem;
    right:0.6rem;
    border-radius: 0.4rem;
}
.scan_bottom_btn_sure{
    color:#007d50;
    background: #f9ec00;
}
.record{
    width: 100%;
    position: absolute;
    top: 6rem;
    left: 0;
    will-change:transform;
    transform: translate3d(100%,0,0);
    -webkit-transform: translate3d(100%,0,0);
    transition: all 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.record_box{
    width: 15.35rem;
    height: 19.7rem;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 0 17px 2px rgba(0,0,0,0.4);
    border-radius: 0.4rem;
    margin: auto;
    font-weight: bold;
    font-size: 0.8rem;
}
.record_head{
    width:100%;
    height:2rem;
    line-height: 2rem;
    border-bottom: 3px solid #007d50;
    font-size: 0.8rem;
    position: relative;
}
.record_body{
    width: 100%;
    height: 17rem;
    overflow-y: auto;
}
.record_left{
    float: left;
    width: 10.65rem;
    text-align: center;
}
.record_left span{
    position: relative;
    left: -0.6rem;
}
.record_right{
    width: 7rem;
    position: absolute;
    right: 2.8rem;
    text-align: right;
}
.record_right span{
    border-left: 1px solid #007d50;
    padding-left: 1.5rem;
}
.record_item{
    width: 100%;
    height:3.35rem;
    line-height: 3.35rem;
    border-bottom: 1px solid #007d50;
    position: relative;
}
.record_more{
    width: 0;
    height: 0;
    border-top: 0.25rem solid transparent;
    border-right: 0.25rem solid #007d50;
    border-bottom: 0.25rem solid #007d50;
    border-left: 0.25rem solid transparent;
    display: inline-block;
    position: absolute;
    top: 46%;
    right: 1.91rem;
}
.record_btn{
    width: 3rem;
    height: 100%;
    position: absolute;
    right:1.7rem;
    z-index: 99;
}
.record_result{
    width: 100%;
    height:100%;
    background: #f9ec00;
    position: absolute;
    box-shadow: 0 0 17px 2px rgba(0,0,0,0.4);
    will-change:transform;
    transform: translate3d(100%,0,0);
    -webkit-transform: translate3d(100%,0,0);
    transition: all 0.4s cubic-bezier(.17,.47,.64,1);
    -webkit-transition: all 0.4s cubic-bezier(.17,.47,.64,1);
}
.rr_content{
    width: 100%;
    margin: 6.6rem auto 0 auto;
    padding: 0 2.5rem;
}
.rr_title{
    font-size: 2.2rem;
    padding-bottom: 0.3rem;
    border-bottom: 3px solid #007d50;
}
.rr_time{
    font-size: 1.05rem;
    height: 2.2rem;
    line-height: 2.2rem;
    border-bottom: 1px solid #007d50;
    font-weight: bold;
    white-space: nowrap;
}
.rr_status{
    font-size: 0.8rem;
    line-height: 1.5em;
    border-bottom: 3px solid #007d50;
    padding: 0.3em 0;
}
.rr_help{
    font-size: 0.64rem;
    line-height: 1.3em;
    margin-top:0.4rem;
    font-weight: bold;
}
.rr_back{
    width: 2.15rem;
    height:auto;
    position: absolute;
    bottom: 2.7rem;
    left: 50%;
    margin-left:-1.075rem;
}
.record_result.rr_move_left{
    transform: translate3d(0%,0,0);
    -webkit-transform: translate3d(0%,0,0);
    will-change:auto;
}
.move_right .scan_start{
    transform: translate3d(-100%,0,0);
    -webkit-transform: translate3d(-100%,0,0);
    will-change:auto;
}
.move_right .record{
    transform: translate3d(0%,0,0);
    -webkit-transform: translate3d(0%,0,0);
    will-change:auto;
}
/*扫描页面结束*/
/*扫描结果页面*/
.result_page{
    background: #f9ec00;
    overflow-x: hidden;
    overflow-y: auto;
}
.img_result{
    width: 100%;
    height:15.9rem;
    display: block;
    overflow: hidden;
}
.img_result img{
    width: 100%;
}
.result_content{
    width: 100%;
    margin: auto;
    padding: 0 2.5rem;
    position: relative;
    z-index: 100;
}
.rc_title{
    font-size: 2.24rem;
    padding-bottom: 0.4rem;
    border-bottom: 3px solid #007d50;
    margin-top: 0.8rem;
    font-weight: bold;
}
.rc_title_s{
    font-size: 2.1rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #007d50;
    margin-top: 1rem;
    font-weight: bold;
}
.rc_name{
    font-size: 0.8rem;
    line-height: 2.6em;
    border-bottom: 1px solid #007d50;
    font-weight: bold;
}
.rc_list{
    border-bottom:3px solid #007d50;
    font-size: 0.8rem;
    padding: 0.5em 0 0.6em 0;
}
.rc_list li{
    line-height: 1.4em;
}
.rc_help{
    font-size: 0.64rem;
    margin-top:1em;
    font-weight: bold;
    line-height: 1.3em;
    margin-bottom: 0.2rem;
}
.rc_img{
    width:9.15rem;
    position: absolute;
    top:-5.2rem;
    right:0;
    z-index: -100;
}
/*页面适配*/
@media only screen and (min-device-width: 374px) and (min-device-width: 376px) and (orientation : portrait){
    .active_join{
        line-height: 2.56rem;
    }
    .active_close{
        line-height: 1.9rem;
    }
    .login_title{
        top:1.65rem;
    }
}