@charset"utf-8";
@import "reset.css";
/*
    author:zhu
    version:service app1.0
*/

/*
    public Style
*/
body,html{height: 100%;font-family: 微软雅黑;min-width: 320px;min-height: 480px;background-color: #fff; }
html{font-size: 625%;}
*{padding: 0;margin: 0;list-style: none;text-decoration: none;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color: #aaa;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color: #aaa;}
input:focus{outline: 0;}
/*
    align Style
*/
.txt_center{text-align: center;}
.txt_rig{text-align: right}
.txt_left{text-align: left}

/*
    background-color Style
*/
.bg{background-color: #f79238;}
.bg01{background-color: #65c437;}
.bg02{background-color: #f6f6f6;}
/*
    color Style
*/
.col_white{color: #fff;}
.col_blue{color: #167ac1;}
.col_block{color: #2b3236}
.col_blue01{color: #5d7d92}
.col_gray{color:#afb4b8}

/*
  margin And Padding
*/

.mar_bot{margin-bottom: .2rem;}
.mar_bot01{margin-bottom: .2rem;}
.mar_bot02{margin-bottom: .5rem;}
.mar_bot03{margin-bottom: .1rem;}
.pad_left{padding-left: .15rem;}

.border_bot{border-bottom: solid 1px #e7e7e7;}
/*
    font Style
*/
.blod{font-weight: bolder;}
.font_12{font-size: .12rem;}
.font_16{font-size: .16rem;}
.font_18{font-size: .18rem;}
.font_14{font-size: .14rem;}
.font_20{font-size: .20rem}
.font_24{font-size: .24rem}


/*
    login Style
*/
.content{margin:0 auto;width:320px;height:500px;position:relative; font-size: .24rem; font-family:微软雅黑;}

.header{background-color:#f6f6f6;position: relative;/*padding-bottom: .2rem*/}
.logo { width: 3.19rem; height:2rem;background-size:70%;margin: 0 auto .15rem;}
.logo_merchant{background:url("images/logo_merchant.png")center center no-repeat;  width: 3.19rem; height:2rem;background-size:70%;margin: 0 auto .15rem; }
.logo_icon{width:20%; height:30%; display: block;position: absolute;left: .1rem; top: .1rem; background: url("images/logo_icon.png")no-repeat;background-size: 60%}
.logo_icon img{width: 100%; height: 100%}
.logo_name{height: .5rem;background-size: 50%;  }
.logo_merchant_name{height: .68rem;background:url("images/logo_merchant_name.png")center center no-repeat;background-size: 50%;  }

.log_id{  height:.5rem; line-height: .5rem; border-top: 1px solid #e9e9e9}
.log_id a{width: 49%;display: inline-block;  text-align: center; background:url("images/id_bg.png")center center no-repeat; position: relative;color: #c6c7c8 }
.login_type.selected{background:url("images/id_selected.png")center center no-repeat;background-size:100%;color: #167ac1;}





#web_login{background-color:#fff;height: 100%}
#g_list{margin:0 auto; width:90%; padding: .2rem 0 0 0; }
#g_list li{height: .5rem;line-height: .5rem;}
#g_list li.mar_bot{
	display: -webkit-box; display: -moz-box; display: -ms-flexbox;/* Add from @jecksonzhang, By date 2017/6/22 */
}
#g_list li .inputfiled{
	-webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1;/* Add from @jecksonzhang, By date 2017/6/22 */
}
#g_list li .inputfiled .input_style{
	width: 100%;/* Add from @jecksonzhang, By date 2017/6/22 */
}
.input_style{display:inline-block;height: .4rem;width:80%;-webkit-appearance: none;   background: 0 0;border: none; padding-left: 0rem;border-radius:0px;}

/*
    修改占位文本颜色
*/
.input_style::-webkit-input-placeholder { /* WebKit browsers */
    color: #888;
}
.input_style:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #888;
}
.input_style::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #888;
}
.input_style:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #888;
}


.del_touch,.inputstyle{-webkit-tap-highlight-color:rgba(255,255,255,0)}

/*.del_touch {position:absolute}*/
.del_touch{ display:inline-block;height:.5rem;width:.5rem;z-index:1; }


#del_touch_n{background:  url(images/login_user.png) no-repeat center center; background-size: 100% 100%;}
#del_touch_p{background:  url(images/login_pas.png) no-repeat center center; background-size: 100% 100%;}
#del_touch_y{background:  url(images/yzm.png) no-repeat center center; background-size: 100% 100%;}
#del_touch_g{background:  url(images/company.png) no-repeat center center; background-size: 100% 100%;}

.input_check{font-size: .12rem;}
.memory{height: .3rem; line-height: .3rem; left: .1rem; display: inline-block;color: #2b3236;}
.forget{display: inline-block;float: right;color: #2b3236;}
.btn_login{width:100%;height: .44rem; background-color: #167ac1; line-height: .44rem; border-radius: .04rem; color: #fff; border: none;font-size: .20rem;}
.btn_login.cancle{background-color: #ccc; }
.ui-checkbox {display: inline-block;vertical-align: middle;margin-right: 5px; font-size: 0; line-height: 0;  }

:root .ui-checkbox-normal { display: none;  }
.ui-checkbox-normal {vertical-align: text-top;  }
:root .ui-checkbox-normal:checked+.ui-checkbox-simulation {background-position: -24px 0;
}
:root .ui-checkbox-simulation {display: block;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;background-image: url(images/sprite.png); background-position: -48px 0;width: 19px; height: 16px;  }
.ui-checkbox-simulation {display: none; cursor: pointer;  }

.u-checkbox-label { display: inline-block;line-height: 16px;vertical-align: middle;cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

label { cursor: default;  }




/*
    qrcodelogin Style
*/
.body_qrcode_bg{background: url("images/qrcode_l_bg.jpg") center center no-repeat;background-size: 100% 100%;}
.qrcode_bg{position:relative;min-height: 480px;}
.qrcode_bg a{display: block;color: #0085e0;width:160px; margin: 0 auto .06rem auto;text-align: center;height: 40px;line-height: 35px;}
.qrcode_login{background: url("images/qrcode_l_btn.png") center center no-repeat;background-size: 100% 100%;}
.qrcode_txt{position: absolute; width: 100%;text-align: center;bottom: 20%;}
@media screen and (min-width:320px){
    .mar_bot {
        margin-bottom: .1rem;}
    .mar_top {
        margin-bottom: 0;
    }
    .logo {   width: 3.19rem; height:1.8rem;background-size:50%;margin: 0 auto .15rem;}
    .qrcode_bg a{display: block;color: #0085e0;width:160px; margin: 0 auto .02rem auto;text-align: center;height: 35px;line-height: 35px;}
    .qrcode_txt{position: absolute; width: 100%;text-align: center;bottom: 25%;}
}
@media screen and (min-width:320px) and (min-height:568px){

    .qrcode_bg a{display: block;color: #0085e0;width:160px; margin: 0 auto .1rem auto;text-align: center;height: 35px;line-height: 35px;}
    .qrcode_txt{position: absolute; width: 100%;text-align: center;bottom: 10%;}
}



@media screen and (min-width:375px) and (max-width:413px){
    #g_list {
        margin: 0 auto;
        width: 80%;

    }
    .logo {  width: 3.19rem; height:2rem;background-size:70%;margin: 0 auto .15rem;}
    .qrcode_bg a{display: block;color: #0085e0;width:160px; margin: 0 auto .1rem auto;text-align: center;height: 35px;line-height: 35px;}
    .qrcode_txt{position: absolute; width: 100%;text-align: center;bottom:0;}
}
@media screen and (min-width:360px){
    .qrcode_bg a{display: block;color: #0085e0;width:160px; margin: 0 auto .1rem auto;text-align: center;height: 35px;line-height: 35px;}
    .qrcode_txt{position: absolute; width: 100%;text-align: center;bottom:0;}
}
@media screen and (min-width:414px){
    .qrcode_bg a{display: block;color: #0085e0;width:160px; margin: 0 auto .1rem auto;text-align: center;height: 35px;line-height: 35px;}
    .qrcode_txt{position: absolute; width: 100%;text-align: center;bottom:-8%;}
}
@media screen and (min-width:768px) and (max-width:1024px){
    .logo { width: 3.19rem; height:2rem;background-size:70%;margin: 0 auto .15rem;}
    .qrcode_bg a{display: block;color: #0085e0;width:160px; margin: 0 auto .1rem auto;text-align: center;height: 35px;line-height: 35px;}
    .qrcode_txt{position: absolute; width: 100%;text-align: center;bottom:-40%;}
}
@media screen and (min-width:1024px){
    .qrcode_bg a{display: block;color: #0085e0;width:220px; margin: .3rem auto .3rem auto;text-align: center;height: 65px;line-height: 65px;}
    .qrcode_txt{position: absolute; width: 100%;text-align: center;bottom:-100%;}
}
@media screen and (min-width:560px) and (max-width:639px){
    .logo {  width: 3.19rem; height:2rem;background-size:70%;margin: 0 auto .15rem;}
}
@media screen and (min-width:640px){
    .logo {  width: 3.19rem; height:2rem;background-size:70%;margin: 0 auto .15rem;}
}
@media screen and (min-width:375px){
    .logo {  width: 3.19rem; height:2rem;background-size:70%;margin: 0 auto .15rem;}
}