html, body { background-color: #F7FAFC; }
/*body{ background: url(../images/user/bg.jpg) no-repeat center 0; }*/
.user-box { width: 390px; padding: 0; position: absolute; left: 50%; margin-left: -195px; top: 50%; margin-top: -250px; background-color: #fff; display: block; }
.user-box .user-item { padding-bottom: 30px; width: 330px; padding: 0 30px 30px; display: none; position: absolute; left: 0; top: 0; background-color: #fff; box-shadow: 0 2px 5px #E6E6E6; border-radius: 2px; }
.user-box .logo { padding: 50px 0; height: 40px; text-align: center; }
.user-box .logo img { width: 120px; }
.user-box a:hover { text-decoration: underline; }
.user-box .tip { text-align: center; font-size: 14px; line-height: 20px; margin-top: 30px; color: #999 }
.user-box .form-item { padding-bottom: 20px; position: relative; }
.user-box .form-item input { width: 298px; color: #373B3D; padding: 0 15px; border: 1px solid #EDEDED; height: 38px; line-height: 38px; background-color: #fff; border-radius: 2px; font-size: 16px; }
.user-box .form-item input:focus { border-color: #49C9F5 }
.user-box .btn-submit { padding-top: 6px; }
.user-box .btn-submit a { display: block; height: 40px; line-height: 40px; text-align: center; background-color: #49C9F5; color: #fff; font-size: 16px; border-radius: 2px; }
.user-box .btn-submit span { display: inline-block; position: relative; }
.user-box .btn-submit i { width: 16px; height: 16px; background: url(../images/user/loading.png) no-repeat; background-size: 100% auto; position: absolute; left: -24px; top: 12px; -webkit-animation: loading 1s infinite linear; animation: loading 1s infinite linear; display: none; }
.user-box .btn-submit .disabled i { display: block; }
.user-box .user-signin .item-password { padding-bottom: 0 }
.user-box .btn-submit a:hover { text-decoration: none; background-color: #27B7E8 }
.user-box .btn-submit .disabled, .user-box .btn-submit .disabled:hover { background-color: #83D9F7 }
.user-box .link-signup, .user-box .link-signin, .user-box .link-index { text-align: center; margin-top: 26px; color: #A5A6A6; line-height: 20px; font-size: 14px; }
.user-box .link-index{ margin-top: 60px;}
.user-box .link-signup a, .user-box .link-signin a, .user-box .link-index a { color: #49C9F5; margin-left: 3px; display: inline-block; padding-right: 18px; background: url(../images/user/ico-arrow.png) no-repeat right center; background-size: 14px; auto; }
.user-box .link-forgot, .user-box .link-change { text-align: right; margin-top: 12px; line-height: 20px }
.user-box .link-forgot a, .user-box .link-change a { color: #49C9F5; font-size: 14px; }
.user-box .link-forgot { margin-bottom: 20px; }
.user-box .link-change { margin-bottom: 12px; margin-top: 0; }
.user-box .clear { width: 16px; height: 16px; background: url(../images/ico-clear.png) no-repeat; background-size: 100% auto; position: absolute; top: 12px; right: 12px; cursor: pointer; display: none; opacity: .8 }
.user-box .clear:hover { opacity: 1; }
.user-box .item-smscode .clear{ right: 139px;}
.user-box  .error-info { font-size: 14px; color: #FC4427; line-height: 20px; padding-top: 6px; clear: both; display: none; }
.user-box .error .error-info { display: block; }
.user-box .item-smscode { overflow: hidden; }
.user-box .item-smscode input { width: 170px; float: left; }
.user-box .get-smscode { width: 116px; height: 40px; line-height: 40px; background-color: #49C9F5; color: #fff; float: right; border-radius: 2px; font-size: 16px; text-align: center; }
.user-box .get-smscode:hover { text-decoration: none !important; background-color: #27B7E8 }
.user-box .disabled, .user-box .disabled:hover { background-color: #83D9F7 }
.user-box .forgot-mobile { padding-bottom: 50px; }
.user-box .email-sent { text-align: center; padding-top: 35px; padding-bottom: 50px; }
.email-sent p { margin-top: 15px; font-size: 16px; color: #2D3235 }
.email-sent .p-2 { font-size: 14px; color: #49C9F5; }
.email-sent .p-3 { font-size: 14px; color: #999 }
.email-sent .btn-submit { padding-top: 40px }
.user-box .signup-mobile .item-password, .user-box .signup-mobile .item-password2 { display: none; }

.item-status{ text-align: center;}
.item-status .ico{ width: 43px; height: 43px; background: url(../images/user/ico-success.png) no-repeat; background-size: 40px auto; position: absolute; left: 50%; margin-left: -22px; top: 50px;}
.item-fail .ico{ background: url(../images/user/ico-fail.png) no-repeat; background-size: 40px auto;}
.item-status .title{ font-size: 18px; line-height: 24px; padding-top: 110px; color: #484848; font-weight: 600;}
.item-status .info{ margin-top: 12px; text-align: center; color: #6C6C6C; line-height: 20px; font-size: 14px;}
.item-status .info a{ color: #49C9F5}
.item-status .btn-submit{ padding-top: 40px}

.signup-mobile2 .ico, .signup-email2 .ico{ width: 43px; height: 43px; background: url(../images/user/ico-success.png) no-repeat; background-size: 40px auto; position: absolute; left: 50%; margin-left: -22px; top: 50px;}
.signup-mobile2 .title, .signup-email2 .title{ font-size: 18px; line-height: 24px; padding-top: 110px; color: #484848; font-weight: 600; text-align: center;}
.signup-mobile2 .invite-code{ width: 185px; height: 162px; margin: 20px auto 0; background: url(../images/user/invite-code.png) no-repeat right 0; text-align: center;}
.signup-mobile2 .invite-code .code{ font-size: 20px; line-height: 28px; font-weight: 600; color: #EA5238; padding-top: 25px;}
.signup-mobile2 .invite-code .name{ font-size: 12px; color: #bbb; margin-top: 4px;}
.signup-mobile2 .info, .signup-email2 .info{ font-size: 14px; color: #424445; margin-top: 30px; text-align: left; line-height: 20px;}

.signup-email2{ text-align: center;}
.signup-email2 .hd{ margin-top: 43px; font-size: 24px; color: #49C9F5;}
.signup-email2 .qrcode{ margin-top: 18px;}
.signup-email2 .qrcode img{ width: 100px; margin: 0 auto;}
.signup-email2 .code{ margin-top: 22px; color: #757575; font-size: 14px;}

.coupon-tip{ text-align: center; color: #49C9F5; font-size: 14px; padding-bottom: 10px;}

@-webkit-keyframes loading {
    0% { -webkit-transform: rotate(0) }
    100% { -webkit-transform: rotate(-360deg) }
}
@keyframes loading {
    0% { transform: rotate(0) }
    100% { transform: rotate(360deg) }
}