.login-icon { background-image: url("/static/public/images/gather_icon.png"); background-size: 1000px 1000px; background-repeat: no-repeat; }

.login-public-wrap { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 3000; }
.login-public-wrap .login-content { background-color: #fff; border-radius: 14px; padding: 36px 20px 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 80%; z-index: 2;max-width: 30rem;}
.login-public-wrap .login-content .login-close-wrap { width: 50px; height: 30px; position: absolute; top: 5px; right: 0; text-align: right; }
.login-public-wrap .login-content .login-close-wrap i { display: inline-block; width: 18px; height: 18px; background-image: url("/static/public/images/login/loginClose.png"); background-size: 14px 14px; background-repeat: no-repeat; position: absolute; top: 8px; right: 15px; }
.login-public-wrap .login-content .title { font-size: 24px; color: #333; font-weight: bold; margin-bottom: 20px; }
.login-public-wrap .login-content .title .title-small { font-size: 15px; color: #666; font-weight: 300; float: right; padding-top: 8px; width: 50px; text-align: right; }
.login-public-wrap .login-content .input-wrap { width: 100%; height: 44px; border-radius: 5px; background-color: #f7f7f7; position: relative; margin-bottom: 15px; box-sizing: border-box; }
.login-public-wrap .login-content .input-wrap .inp-big-wrap { font-size: 14px; color: #464646; border: none; width: calc(100% - 40px); height: 100%; box-sizing: border-box; position: absolute; top: 0; left: 40px; line-height: 44px; }
.login-public-wrap .login-content .input-wrap .inp-big-wrap.big-short { width: 43%; }
.login-public-wrap .login-content .input-wrap .inp-big-wrap input { width: 100%; height: 20px; display: inline-block; line-height: 20px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); font-size: 14px; }
.login-public-wrap .login-content .input-wrap .input-icon-wrap { display: inline-block; width: 40px; height: 100%; box-sizing: border-box; position: relative; }
.login-public-wrap .login-content .input-wrap .input-icon-wrap i { display: inline-block; width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
.login-public-wrap .login-content .input-wrap .input-icon-wrap i.input-phone-icon { background-image: url("/static/public/images/login/loginPhone.png"); background-size: 20px 20px; background-repeat: no-repeat; }
.login-public-wrap .login-content .input-wrap .input-icon-wrap i.input-num-icon { background-image: url("/static/public/images/login/loginCode.png"); background-size: 20px 20px; background-repeat: no-repeat; }
.login-public-wrap .login-content .input-wrap .input-icon-wrap i.input-code-icon { background-image: url("/static/public/images/login/loginSuo.png"); background-size: 20px 20px; background-repeat: no-repeat; }
.login-public-wrap .login-content .input-wrap .get-code, .login-public-wrap .login-content .input-wrap .check-code { height: 100%; width: 80px; font-size: 12px; text-align: center; line-height: 44px; position: absolute; right: 0px; top: 0px; color: #cc3244; box-sizing: border-box; }
.login-public-wrap .login-content .input-wrap .get-code::before, .login-public-wrap .login-content .input-wrap .check-code::before { content: ""; display: inline-block; width: 0; height: 16px; border-right: 2px solid #ccc; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.login-public-wrap .login-content .input-wrap .img-code { width: 38%; height: 38px; position: absolute; right: 3px; display: inline-block; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.login-public-wrap .login-content .login { width: 100%; height: 45px; border-radius: 23px; font-size: 18px; color: #fff; text-align: center; line-height: 45px; margin-top: 30px; background-color: #F9B2BE; box-sizing: border-box; }
.login-public-wrap .login-content .login.active { background-color: #cc3244; }
.login-public-wrap .login-content .agree-wrap { padding-top: 17px; text-align: center; color: #666; font-size: 12px; }
.login-public-wrap .login-content .agree-wrap .service-text, .login-public-wrap .login-content .agree-wrap .privacy-text { color: #cc3244; }
.login-public-wrap .login-content .SF-sound { font-size: 12px; color: #999999; position: relative; text-indent: 9px; }
.login-public-wrap .login-content .SF-sound i { display: inline-block; width: 3px; height: 3px; background-color: #999999; border-radius: 50%; position: absolute; top: 6px; left: 0px; }
.login-public-wrap .login-content .SF-sound .account { color: #151515; font-weight: bold; }
.login-public-wrap .login-content .login-a { font-size: 14px; color: #cc3244; text-align: center; display: block; margin-top: 15px; text-decoration: underline; opacity: .5; }
.login-public-wrap .login-content .login-a.active { opacity: 1; }
.login-public-wrap .protocol-page-wrap { width: 90%; background-color: #fff; border-radius: 14px; padding: 20px 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); z-index: 2; box-sizing: border-box; }
.login-public-wrap .protocol-page-wrap .protocol-title-text { font-size: 16px; color: #333; text-align: center; font-weight: bold; padding-bottom: 20px; }
.login-public-wrap .protocol-page-wrap .protocol-text-wrap { padding: 15px; background-color: #f7f7f7; font-size: 13px; color: #333; }
.login-public-wrap .protocol-page-wrap .protocol-text-wrap .protocol-text-p { text-indent: 26px; padding-bottom: 10px; line-height: 18px; }
.login-public-wrap .protocol-page-wrap .protocol-text-wrap .protocol-text-p .bold-text { font-weight: bold; color: #151515; }
.login-public-wrap .protocol-page-wrap .protocol-text-wrap .protocol-text-p .pro-color { color: #cc3244; }
.login-public-wrap .protocol-page-wrap .protocol-btn-wrap { padding-top: 20px; overflow: hidden; display: flex; display: -webkit-flex; justify-content: space-around; }
.login-public-wrap .protocol-page-wrap .protocol-btn-wrap span { display: block; width: 100px; height: 30px; text-align: center; line-height: 30px; font-size: 13px; border-radius: 15px; }
.login-public-wrap .protocol-page-wrap .protocol-btn-wrap span.disagree-btn { border: 1px solid #ccc; color: #333; float: left; }
.login-public-wrap .protocol-page-wrap .protocol-btn-wrap span.agree-btn { background-color: #cc3244; color: #fff; float: right; }
.login-public-wrap .mask { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.75); }
.login-public-wrap .authorization { background: #ffffff; background-color: #fff; border-radius: 4px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 80%; z-index: 2; }
.login-public-wrap .authorization .authorization-title { height: 44px; text-align: center; line-height: 44px; border-bottom: 1px solid #ececec; }
.login-public-wrap .authorization .authorization-title span { font-size: 17px; color: #333333; font-weight: bold; }
.login-public-wrap .authorization .authorization-logo { margin: 0 15px; border-bottom: 1px solid #ececec; height: 75px; }
.login-public-wrap .authorization .authorization-logo img { width: 32px; height: 32px; float: left; margin: 20px 11px 0px 90px; border-radius: 50%; }
.login-public-wrap .authorization .authorization-logo span { font-size: 14px; font-weight: bold; line-height: 75px; }
.login-public-wrap .authorization .authorization-phone { height: 60px; border-bottom: 1px solid #ececec; padding: 10px 15px; font-size: 12px; color: #666666; }
.login-public-wrap .authorization .authorization-button { height: 43px; line-height: 43px; font-size: 15px; font-weight: bold; }
.login-public-wrap .authorization .authorization-button .update-phone { width: 57%; border-right: 1px solid #ececec; text-align: center; display: inline-block; }
.login-public-wrap .authorization .authorization-button .empower { color: #cc3244; text-align: center; width: 43%; display: inline-block; }