new_sdk_wu/www/new_sdk/public/static/css/common.css

/* 登录页 */
.public_top_left>div>div {
    top: -1px !important;
}

.public_nav h1 {
    font-size: 22px;
    color: #BFBFBF;
    float: left;
    margin-left: 10px;
    margin-top: 48px;
    line-height: 22px;
    border-left: 2px solid #EEEEEE;
    padding-left: 10px;
}

.warp_login {
    width: 100%;
    height: 621px;
    overflow: hidden;

}

.login {
    margin-top: 30px;
    height: 457px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    justify-content: center;
}

.login_img {
    float: left;
    margin: 55px 264px 28px 149px;
}

.login_right {
    width: 330px;
    float: left;
    margin: 84px auto 0;
}

.login_form h2 {
    font-size: 22px;
    color: #1C1C1C;
    font-weight: bold;
    margin-bottom: 22px;
}

.login_form h2 span {
    font-size: 9px;
    color: #1C1C1C;
    font-weight: 100;
    padding-left: 5px;
}

.username,
.password,
.password-one,
.phonenumber,
.sms_code {
    position: relative;
    height: 60px;
}

.username img,
.password img,
.password-one img,
.phonenumber img,
.sms_code img {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 11px;
    left: 8px;
}

.login_form p {
    display: none;
    font-size: 12px;
    color: #FC5351;
    line-height: 30px;
}

input.submit {
    font-size: 17px;
    color: #fff;
    width: 320px;
    height: 44px;
    border: none;
    background: #51a7ff;
    margin-top: 16px;
    cursor: pointer;
    border-radius: 5px;
}

.remember span {
    font-size: 12px;
    position: relative;
    top: -2px;
}

.remember input {
    display: none;
}

.remember input[type="checkbox"]:checked+label {
    background: url(../images/icon/hook-02.png) no-repeat;
    background-size: 14px 14px;
}

.remember label {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(../images/icon/hook-01.png) no-repeat;
    background-size: 14px 14px;
}

.login_bottom a {
    font-size: 12px;
    margin-top: 12px;
}

.login_bottom a:hover {
    color: #51a7ff;
    text-decoration: underline;
}

.login_bottom a:first-child {
    float: left;
}

.login_bottom a:first-child+a {
    float: right;
}

/* .footer ul{
    background: #fff !important;
    color: #494949;
}
.footer ul a{color: #494949;} */

/* 注册 */

#userreg_form span {
    font-size: 12px;
    /* color: #a0a0a0; */
}

#userreg_form span a:hover {
    color: #51a7ff;
}

.form_right {
    width: 330px;
    float: left;
    margin-top: 84px;
}

.userreg_right {
    margin-top: 50px !important;
}

.phonereg_right {
    margin-top: 40px !important;
    display: block;
}

.phonereg_right input.submit {
    margin-top: 12px !important;
}

.sms_code input {
    float: left;
}

input.w130 {
    width: 100px !important;
    margin-right: 12px;
}

input.getCodeone {
    width: 80px;
    height: 33px;
    color: #fff;
    background: #51a7ff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#TencentCaptcha {
    width: 80px;
    height: 33px;
    color: #fff;
    background: #D2D2D2;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#phonereg_form span {
    font-size: 12px;
    margin-bottom: 12px;

}

#phonereg_form span a:hover {
    color: #51a7ff;
}




/* 忘记密码 */
.warp_forgetpd {
    width: 100%;
    height: 521px;
    background: #F6F7F7;
}

.forgetpd {
    height: 457px;
    width: 100%;
    background: #fff;
    margin-top: 30px;
    border-radius: 10px;
    display: inline-block;
}

.rebinding-box {
    width: 1049px;
    margin: auto;

}

.rebinding-box .box-title {
    background: url(../images/icon/bg-1.png) no-repeat;
}

.rebinding-box .box-title {
    width: 160px;
    height: 34px;
    margin: auto;
    text-align: center;
    margin-top: 43px;
    margin-bottom: 26px;
}

.box-timeline {
    border-top: 1px solid #eee;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.mtb5 {
    margin: 5px 0;
    font-size: 20px;
    line-height: 32px;
    color: #fff;
}

ul.text-center {
    width: 884px;
    margin: auto;
    overflow: auto;
    margin-top: 20px;
}



/* 公共样式 */
.step1,
.step2,
.step3,
.step4 {
    float: left;
    width: 100px;
    font-size: 14px;
    position: relative;
    margin-right: 60px;
    margin-left: 60px;
    color: #B2B2B2;
}

.step1 .box-outside,
.step2 .box-outside,
.step3 .box-outside,
.step4 .box-outside {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    line-height: 37px;
    margin: 10px auto;
    /* display: flex;
    display: -webkit-flex; */
    align-items: center;
    background-color: #d7d7d7;
}

.step1 .box-num,
.step2 .box-num,
.step3 .box-num,
.step4 .box-num {
    width: 26px;
    height: 26px;
    display: inline-block;
    line-height: 26px;
    vertical-align: middle;
    /* margin: 14px auto; */
    border-radius: 50%;
    color: #fff;
    background-color: #999;
}

.step1 .box-num::before,
.step2 .box-num::before,
.step3 .box-num::before,
.step4 .box-num::before {
    content: "";
    position: absolute;
    height: 3px;
    width: 88px;
    background-color: #EEEEEE;
    top: 26px;
    right: 73px;
    z-index: 2;
}

.step1 .box-num::after,
.step2 .box-num::after,
.step3 .box-num::after,
.step4 .box-num::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 88px;
    background-color: #EEEEEE;
    top: 26px;
    left: 71px;
    z-index: 2;
}


/* 当前样式 */
.step1.current,
.step2.current,
.step3.current,
.step4.current {
    color: #51a7ff;
}

.step1.current .box-outside,
.step2.current .box-outside,
.step3.current .box-outside,
.step4.current .box-outside {
    background-color: #a3d7ef;
}

.step1.current .box-num,
.step2.current .box-num,
.step3.current .box-num,
.step4.current .box-num {
    background-color: #51a7ff;
}

.step1.current .box-num::before,
.step2.current .box-num::before,
.step3.current .box-num::before,
.step4.current .box-num::before,
.step2.pass .box-num::before,
.step3.pass .box-num::before,
.step1.pass .box-num::before {
    content: "";
    position: absolute;
    height: 3px;
    width: 88px;
    background-color: #51a7ff;
    top: 26px;
    right: 73px;
    z-index: 2;
}

.step1.current .box-num::after,
.step2.current .box-num::after,
.step3.current .box-num::after,
.step4.current .box-num::after,
.step2.pass .box-num::after,
.step3.pass .box-num::after,
.step1.pass .box-num::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 88px;
    background-color: #51a7ff;
    top: 26px;
    left: 71px;
    z-index: 2;
}

/* 已完成样式 */

.step2.pass,
.step3.pass,
.step1.pass {
    color: #51a7ff;
}

.step2.pass .box-outside,
.step3.pass .box-outside,
.step1.pass .box-outside {
    background-color: #a3d7ef;
}

.step2.pass .box-num,
.step3.pass .box-num,
.step1.pass .box-num {
    background-color: #51a7ff;
}




/* 忘记密码内容 */

/* 确认账号 */
/* .rebinding-box  .twobox-form{display: none;}
.rebinding-box  .threebox-form{display: none;} */
.rebinding-box div[class*=box-form] {
    width: 100%;
    margin: auto;
    margin-top: 58px;
}

.oneform,
.reset_password {
    width: 284px;
    margin: auto;
}

.oneform input,
.reset_password input {
    width: 232px;
    height: 39px;
    font-size: 14px;
    border: 1px solid #DCDCDC;
    padding-left: 50px;
    border-radius: 2px;
    line-height: 41px;
}

.username_not_exist,
.new_password_erro,
.again_error {
    color: #FC5350;
    font-size: 12px;
    line-height: 29px;
    display: none;
}

.warp_username,
.new_password,
.again_password {
    width: 100%;
    height: 70px;
}

.oneform button,
.reset_password button {
    width: 284px;
    height: 41px;
    background: #51a7ff;
    border: navajowhite;
    border-radius: 2px;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
}

.input_img,
.new_password div,
.again_password div {
    width: 42px;
    height: 41px;
    text-align: center;
    background: #DCDCDC;
    border-radius: 2px;
    position: absolute;
}

.input_img img,
.new_password img,
.again_password img {
    width: 21px;
    height: 21px;
    margin-top: 10px;
}

button:focus,
button:active {
    ​border: none;
    outline: none;
}

.threebox-form {
    margin-top: 30px !important;
}

/* 验证身份 */
.twobox-form {
    margin-top: 0px !important;
}

.verification {
    width: 491px;
    margin: auto;
    margin-top: 30px;
}

.verification p {
    font-size: 14px;
    color: #494949;
}

.verification p span {
    color: #ff730c;
}

.verification div {
    width: 491px;
    height: 60px;
    border: 1px solid #eee;
    margin-top: 12px;
}

.verification div p {
    line-height: 60px;
    float: left;
    margin-left: 20px;
}

.verification div p span {
    color: #FC5350;
}

.verification div .bind {
    width: 85px;
    height: 25px;
    float: right;
    margin: 18px;
    background: #fff;
    border: 1px solid #51a7ff;
    color: #51a7ff;
    cursor: pointer;
    border-radius: 2px;
}

.verification div .no_bind {
    width: 85px;
    height: 25px;
    float: right;
    margin: 18px;
    background: #ccc;
    border: 1px solid #ccc;
    color: #fff;
    cursor: pointer;
    border-radius: 2px;
}

.verification div .bind:hover {
    background: #51a7ff;
    color: #fff;
}

.verification a {
    font-size: 12px;
    color: #B2B2B2;
    line-height: 32px;
}

.no_use {
    float: right;
}

.verification a:hover {
    color: #51a7ff;
}

.mailbox_validation,
.phone_validation {
    width: 331px;
    margin: auto;
    margin-top: 30px;
    display: none;
}

.mailbox_validation p,
.phone_validation p {
    font-size: 14px;
    color: #494949;
}

.mailbox_validation p span,
.phone_validation p span {
    color: #FF730C;
}

.bind_num {
    font-size: 12px !important;
    margin: 16px 0;
}

.get_code span {
    font-size: 12px;
    line-height: 41px;
}

.get_code input {
    width: 164px;
    height: 35px;
    padding-left: 9px;
    border: 1px solid #DCDCDC;
    border-radius: 2px;
}

.get_code button {
    width: 93px;
    height: 40px;
    background: #51a7ff;
    border: none;
    color: #fff;
    font-size: 12px;
    margin-left: 3px;
    border-radius: 2px;
    cursor: pointer;
}

.mail_code_erro,
.phone_code_erro {
    color: #FC5350 !important;
    font-size: 12px !important;
    line-height: 29px;
    padding-left: 53px;
    display: none;
}

.get_code {
    height: 70px;
}

button#twobtn {
    width: 331px;
    height: 40px;
    font-size: 18px;
    color: #fff;
    background: #51a7ff;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}

.mailbox_validation a,
.phone_validation a {
    font-size: 12px;
    color: #b2b2b2;
    line-height: 29px;
}

.mailbox_validation a:hover,
.phone_validation a:hover {
    color: #51a7ff;
}

.cutdown {
    background: #D2D2D2 !important;
}

/* 重置完成 */
.fourbox-form {
    /* display: none; */
    margin-top: 30px !important;
}

.reset_success {
    width: 150px;
    margin: auto;
    text-align: center;
}

.reset_success p {
    font-size: 14px;
}

.reset_success .count_down {
    font-size: 12px;
    color: #b2b2b2;
    margin: 16px 0;
}

.reset_success a {
    font-size: 16px;
    color: #fff;
    background: #51a7ff;
    padding: 12px 35px;
    border-radius: 2px;
    display: block;
}

.reset_success a:hover {
    color: #fff !important;
}

.fail {
    color: #b2b2b2 !important;
}

.login_form input[type="text"] {
    width: 290px;
    height: 37px;
    font-size: 12px;
    padding-left: 30px;
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    line-height: 33px;
}

.login_form input[type="password"] {
    width: 290px;
    height: 37px;
    font-size: 12px;
    padding-left: 30px;
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    line-height: 33px;
}