html{ width: 100%; height: 100%;}
@media screen and (max-width: 1200px) {
    html,body{ overflow-x: auto;}
}
body{ background: url(/user/images/login/login_bg.png) no-repeat; background-position: center top; background-size: cover; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1;}
.main{ position: relative; z-index: 1; height: calc(100% - 100px); padding-top: 100px;}
.main *{ box-sizing: border-box;}

.top_div{ padding: 20px 10px; position: relative; z-index: 99;}
.top_div a:first-of-type{ float: left; margin-top: 0;}
.top_div a{ float: right; color: #fff; font-size: 16px; margin-right: 20px; margin-top: 10px; position: relative; z-index: 1; line-height: 20px;}
.top_div a:nth-of-type(2) { margin-right: 0;}
.top_div a *{vertical-align: middle;}
.top_div a span:first-of-type{ padding: 0 15px;}
.top_div a:hover .qrcode{ display: block;}
.top_div .weixin_server{ position: relative; z-index: 1; cursor: default;}
.top_div .qrcode{ position: absolute; top: 100%; right: 0; z-index: 1; padding-top: 10px; display: none; box-shadow: 0 0 10px rgba(0,0,0,.1);}
.top_div .weixin_server:hover .qrcode { display: block;}

.clr{ clear: both;}
.main_div{width: 100%;}
.main_div .pic_div,.main_div .form_div{ width: 580px; margin: 0 10px;}
.main_div .pic_div{ float: left; width: calc(100% - 523px); padding-left: 80px; padding-top: 20px;}
.register_main_div .pic_div{ padding-top: 30px;}
.main_div .text_view{ padding-left: 80px;}
.main_div .pic_div p{ font-size: 40px; color: #fff; line-height: 1; position: relative; z-index: 2; margin: 20px 0; text-align: left;}
.main_div .pic_div p span{ font-family: 'Gabriola'; font-size: 70px; color: #f1d95d; font-weight: bold;}


/*表单*/
.main_div{ width: 100%;}
.main_div .weixin_box,.main_div .form_div form{ width: 100%;}
.main_div .form_div{ width: 483px;  position: relative; z-index: 2; float: right; box-shadow: 4px 4px 8px rgba(0,0,0,.04);}
.main_div .form_div:after{ display: none; content: ''; position: absolute; top: 100%; width: 100%; height: 46px; left: 0; background: url(/user/images/login/form_bg.png) no-repeat; background-position: 1px 0;}
.main_div .form_div form{ background: #fff; padding: 40px 65px 30px; margin: 0 auto;}
.main_div .form_div .form_title{ overflow: hidden; margin-bottom: 25px;}
.main_div .form_div .form_title a{ transition: all .2s ease-in-out; font-size: 24px; float: left; text-align: center; width: calc(50% - 10px); height: 50px; line-height: 47px; border-bottom: 3px solid transparent; cursor: pointer;}
.main_div .form_div .form_title a:first-of-type{margin-right: 20px;}
.main_div .form_div .form_title a.current,.main_div .form_div .form_title a:hover{ border-bottom-color: #c00; color: #c00; text-decoration: none;}
.main_div .form_div .input_div{ background-repeat: no-repeat; background-position: left center; border-bottom: 1px solid #ddd; position: relative;}
.main_div .form_div .input_div .iconimage{position: absolute;left: 0;top: 50%;transform: translateY(-50%);-wikit-transform: translateY(-50%);-o-transform: translateY(-50%);-moz-transform: translateY(-50%);font-size: 27px;margin-left: -3px;color: #999;}
.main_div .form_div .input_div .eye_image{    position: absolute;right: 0;top: 50%;transform: translateY(-50%);-wikit-transform: translateY(-50%);-o-transform: translateY(-50%);-moz-transform: translateY(-50%);font-size: 26px;margin-left: -3px;color: #666666;}

.main_div .input_div input{ width: calc(100% - 20px); margin-left: 20px; height: 60px; font-size: 14px; padding: 0 10px; border: none; background: transparent;}
.main_div .form_div a{ display: inline-block; width: 50%; font-size: 14px; color: #666; }
.main_div .form_div .other_login{ text-align: center; display: block; margin: 0 auto;float: left;}
.main_div .form_div .other_login span{ color: #666;}
.main_div .form_div a img{ vertical-align: middle; margin-right: 10px;}
.main_div .form_div a.register{ text-align: right; margin-left: 10px;}
.main_div .form_div .submit{ width: 100%; font-size: 18px; text-align: center; height: 50px; line-height: 50px; cursor: pointer; margin-top: 14px; background: #c00; border: none;}
.main_div.register_main_div .submit{ margin-top: 0;}
.main_div .or_div{ font-size: 14px; height: 40px; line-height: 40px; margin: 10px 0; }
.main_div .or_div a{ float: right; width: auto;}


.main_div .password .eye_btn{display: block;width: 30px;height: 100%;position: absolute;top: 0;right: 0;z-index: 10;background-size: 20px auto;background-repeat: no-repeat;background-position: center;}
.main_div .form_div .input_div:hover,.main_div .form_div .input_div.focus{border-bottom-color: #c00;}

/* 注册 */
.main_div .tel_code input{ width: calc(100% - 100px);}
.main_div .form_div .send{ font-size: 14px; color: #0066cc; background: transparent; width: 90px; height: 35px; line-height: 35px; cursor: pointer; position: absolute; right: 0; top:50%; z-index: 2; margin-top: -17.5px;}
.main_div .agree_box a{ display: inline-block; width: auto; color: #0066cc; line-height: 13px; height: 16px;}
.main_div .agree_box label{ cursor: pointer;}
.main_div .agree_box *{ vertical-align: middle;}
.main_div .go_login{ font-size: 14px; text-align: center; margin-top: 20px;}
.main_div .go_login a{ color: #0066cc; display: inline;}
.main_div .tel_code .send{ height: 60px; line-height: 60px; width: 120px; text-align: right; margin-top: -30px;}

.bottom_div{ color: rgba(255,255,255,.07); font-size: 14px; line-height: 1; text-align: right; margin: 0 10px; clear: both;}
@media screen and (min-width: 1601px) {
    .main_div{position: absolute; left: 0; top: 50%; z-index: 1; margin-top: -280px;}
    .main_div.register_main_div{ margin-top: -300px;}
    .bottom_div{ position: absolute; right: 0; bottom: 40px; z-index: 1; width: 100%;}
}
@media screen and (max-width: 1600px) {
    .main_div{ margin-top: 100px; height: calc(calc(100% - 195px));}
    .bottom_div{ padding: 40px 0;}
}
.error{color: red;font-size: 14px;}
#user_name{display: none}

#usercheck{ display: none;}
.agree_box{ margin: 20px 0; line-height: 16px; height: 16px;}
.agree_box #checkbox{ width: 15px; height: 15px; margin-right: 5px; margin-top: -2px;}
.agree_box #checkbox span{ font-size: 16px;}

.change_login{ position: absolute; right: 10px; top: 10px; z-index: 12; cursor: pointer;}
.change_login *{ vertical-align: middle;}
.change_login span{ margin-right: 5px; color: #999;font-size: 14px;}
/* 微信扫码 */
.main_div .weixin_box{ display: none; height: 100%; position: absolute; left: 0; top: 0; z-index: 11; background: #fff; padding: 40px 70px 30px; transition: transform .5s; transform-origin: left bottom;}
.main_div .scan_rotate{ display: block;}
.main_div .weixin_box span{ color: #999;}
.main_div .weixin_box span,.main_div .weixin_box img,.main_div .weixin_box h1{ vertical-align: middle;}
.main_div .weixin_box>div:nth-of-type(2){ font-size: 14px; text-align: center; padding-top: 40px;}
.main_div .weixin_box>div:nth-of-type(2) img,.main_div .weixin_box>div:nth-of-type(2) img{ margin-right: 10px;}
.main_div .weixin_box>div:first-of-type{ text-align: center; clear: both; padding: 60px 0 40px;}
.main_div .weixin_box>div:first-of-type img{ margin-right: 10px;}
.main_div .weixin_box>div h1{ display: inline-block; margin-bottom: 0;}
.weixin_scan{ border: 1px solid #ccc; padding: 20px; width: 180px; height: 180px; margin: 0 auto 21px; overflow: hidden; position: relative;}
.weixin_scan img{ width: 140px; height: 140px; background: #ccc;}

.weixin_scan iframe{ position: absolute; left: 0; top: 0;}

.bind_wx h1{ margin-bottom: 20px;}
.bind_wx .main_div{ width: 100%;}
.bind_wx .main_div .form_div{ width: 100%; margin-left: 0; float: none;}
.bind_wx .form_div form{ width: 50%;}
.bind_wx .form_div:after{ display: none;}
.bind_wx .form_div .submit{ width: 200px; display: block; margin: 20px auto 0; }

/* 产品体验提示文案 */
.pic_tip_div{color: #fff;float: left;}
.main_tip_title{font-size: 32px;padding-bottom: 35px;}
.sub_tip_title{font-size: 24px;padding-bottom: 22px;}
.tip_item{font-size: 16px;padding-bottom: 22px;}

@media screen and (min-width: 1601px) {
    .bind_wx .main_div.noUser{ margin-top: -320px;}
    .bind_wx .main_div.hasUser{ margin-top: -250px;}
}
#header{
    position: absolute;
    width: 100%;
    z-index: 2;
}