body { background: url(/img/web/usercenter_bg.jpg) top 100px center no-repeat; background-size: 100%; }
.main > .wrap { position: relative; }
.banner > .wrap { display: flex; flex-flow: column wrap; justify-content: center; align-items: center; }

/*sing in css*/
.signBody { margin-bottom: 40px; }
.signBody .wrap { width: 860px; margin: 0 auto; }
.signinForm { background: #fff; padding: 80px 120px; font-size: 18px; box-sizing: border-box; margin: 0; width: 100%; }

.signinForm .formSecTit { padding: 40px 0; }
.signinForm .formSecTit > b { font-size: 24px; font-weight: bold; display: inline-flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; gap: 10px; }
.signinForm .formSecTit > b::after { content: ''; display: inline-flex; height: 2px; background: #1a5eff; width: 60%; }

.signinForm .row { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; margin-bottom: 20px; width: 100%; }
.signinForm .fed { font-weight: 400; margin-bottom: 10px; }
.signinForm .fed.reqFed::before { content: '*'; margin-right: 4px; color: red; }

.signinForm .ctrl { width: 100%; position: relative; }
.signinForm .ctrl > .textBox { width: 100%; padding: 0 0 0 36px; }
.signinForm .ctrl::before { position: absolute; z-index: 9999; left: 0; top: 8px; bottom: 0; content: ''; display: inline-flex; height: 24px; width: 24px; background: url(/img/web/ico/smartphone_tablet_black.svg) left center no-repeat; background-size: 24px; }
.signinForm .ico_account::before { background-image: url(/img/web/ico/smartphone_tablet_black.svg); }
.signinForm .ico_account:focus-within::before { background: #1a5eff; mask: url(/img/web/ico/smartphone_tablet_black.svg) center center no-repeat alpha; mask-size: 24px; }
.signinForm .ico_password::before { background-image: url(/img/web/ico/key_black.svg); }
.signinForm .ico_password:focus-within::before { background: #1a5eff; mask: url(/img/web/ico/key_black.svg) center center no-repeat alpha; mask-size: 24px; }
.signinForm .ico_vfcode { display: flex; flex-flow: row nowrap; justify-content: space-between; justify-items: center; gap: 10px; }
.signinForm .ico_vfcode > a.getcode { flex-shrink: 0; color: #1a5eff; }
.signinForm .ico_vfcode > a.getcode:hover { color: #7d9ffc; }
.signinForm .ico_vfcode::before { background-image: url(/img/web/ico/pin_code_black.svg); }
.signinForm .ico_vfcode:focus-within::before { background: #1a5eff; mask: url(/img/web/ico/pin_code_black.svg) center center no-repeat alpha; mask-size: 24px; }
.signinForm .ico_org::before { background-image: url(/img/web/ico/city_buildings_black.svg); }
.signinForm .ico_org:focus-within::before { background: #1a5eff; mask: url(/img/web/ico/city_buildings_black.svg) center center no-repeat alpha; mask-size: 24px; }
.signinForm .ico_name::before { background-image: url(/img/web/ico/name_black.svg); }
.signinForm .ico_name:focus-within::before { background: #1a5eff; mask: url(/img/web/ico/name_black.svg) center center no-repeat alpha; mask-size: 24px; }
.signinForm .ico_country::before { background-image: url(/img/web/ico/asia_black.svg); }
.signinForm .ico_country:focus-within::before { background: #1a5eff; mask: url(/img/web/ico/asia_black.svg) center center no-repeat alpha; mask-size: 24px; }
.signinForm .ico_normal::before { display: none; }
.signinForm .ico_normal > input.textBox { padding: 0; }

.signinForm .btnRow { padding: 40px 0 0 0; text-align: right; }
.signinForm .btnRow a.button { display: inline-flex; height: 50px; justify-content: center; align-items: center; padding: 0 40px; background: linear-gradient(-167deg, #1a5eff, #496bf2, #7373fa, #9966ff); color: #fff; border-radius: 25px; font-weight: 400; }
.signinForm .btnRow a.button:hover { opacity:.8; }
.signinForm .btnRow a.secButton { display: inline-flex; height: 50px; justify-content: center; align-items: center; padding: 0 40px; background: #eee; color: #000; border-radius: 25px; font-weight: 400; }
.signinForm .btnRow a.secButton:hover { background: #ddd; }
.signinForm .btnRow a.disabled,
.signinForm .btnRow a.disabled:hover { cursor: default; background: #ccc; color: #fff; }
.signinForm .fromOth { text-align: right; line-height: 26px; margin-top: 20px; font-size: 14px; color: #888; }
.signinForm .fromOth a { color: #1a5eff; margin-left: 4px; }
.signinForm .fromOth a:hover { color: #7d9ffc; text-decoration: underline; }

.signinForm .groupRow { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.signinForm .groupRow .row { margin: 0; }


.signinForm .vldMsg { display: none; color: #d7373f; font-size: 14px; margin-top: 10px; }
.signinForm .fedDes { display: flex; color: #aaa; font-size: 14px; margin-top: 10px; }
.signFrmHd { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; }
.signFrmHd::before { content: ''; display: inline-flex; height: 96px; width: 96px; background: url(/img/web/ico/mailing_black.svg) center center no-repeat; background-size: 100%; opacity: .3; }
.signFrmHd.noico::before { display: none; }
.signFrmHd h2 { font-size: 40px; font-weight: bold; margin-bottom: 20px; }
.signFrmHd p { font-size: 16px; margin-bottom: 20px; }
.signFrmHd .uInfo { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: 20px; margin-bottom: 20px; }
.signFrmHd .uInfo > img { display: inline-flex; flex-shrink: 0; background: #f6f6f4; width: 48px; height: 48px; padding: 26px; border-radius: 50%; }
.signFrmHd .uInfo > p { display: flex; flex-flow: column nowrap; gap: 5px; margin: 0; padding: 0; }
.signFrmHd .uInfo > p > b { font-size: 20px; font-weight: bold; font-family: 'HarmonySansCondensed'; }
.signFrmHd .uInfo > p > span { font-family: 'HarmonySansCondensed'; }
.signFrmHd .uInfo > p > em { color: #aaa; }

.vfCode { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap:10px; width: 100%; }
.vfCode > input { font-size: 40px; font-weight: 400; font-family: 'HarmonySansCondensed'; border: solid 2px #ddd; height: 80px; width: 60px; box-sizing: border-box; border-radius: 10px; text-align: center; transition: all .3s; -webkit-transition: all .3s; }
.vfCode > input:focus { color: #1a5eff; border-color: #1a5eff; }

/*密码规则校验*/
.signinForm .psdck { padding: 16px 0 0 0; }
.signinForm .psdck > h2 { font-size: 14px; font-weight: 400; margin-bottom: 10px; }
.signinForm .psdck > ul { }
.signinForm .psdck > ul > li { font-size: 14px; color: #888; line-height: 20px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; }
.signinForm .psdck > ul > li::before { flex-shrink: 0; margin-right: 4px; content: ''; display: inline-flex; height: 16px; width: 16px; background: url(/img/web/ico/info_gray.svg) center center no-repeat; background-size: 16px; }
.signinForm .psdck > ul > li.ok { color: #12805c; }
.signinForm .psdck > ul > li.ok::before { background-image: url(/img/web/ico/checkmark_green.svg); opacity: 1; }
.signinForm .psdck > ul > li.war { color: #d7373f; }
.signinForm .psdck > ul > li.war::before { background-image: url(/img/web/ico/delete_red.svg); opacity: 1; }

/*表单控件图标*/
.signinForm .textBox::before { content: ''; display: inline-flex; height: 36px; width: 26px; position: absolute; z-index: 9; left: 0; top: 0; background-position: center center; background-repeat: no-repeat; background-size: 24px; }
.signinForm .textBox.icoEmail::before { background-image: url(/img/en/email.svg); }
.signinForm .textBox.icoPassword::before { background-image: url(/img/en/password.svg); }
.signinForm .textBox.icoTel::before { background-image: url(/img/en/telephone.svg); }
.signinForm .textBox.icoName::before { background-image: url(/img/en/name.svg); }
.signinForm .textBox.icoCompany::before { background-image: url(/img/en/company.svg); }
.signinForm .textBox.icoJob::before { background-image: url(/img/en/permanent_job.svg); }
.signinForm .textBox.icoPin::before { background-image: url(/img/en/pin_code.svg); }
.signinForm .getEmailCode { display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; gap: 10px; }
.signinForm .getEmailCode > input { width: 100%; }
.signinForm .getEmailCode a.getcode { flex-shrink: 0; color: #0066ff; font-size: 14px; }
.signinForm .getEmailCode a.getcode:hover { text-decoration: underline; }

/*表单控件验证图标*/
.signinForm > .row > .textBoxErr > input.textBox { border-color: #d7373f; color: #d7373f; padding-right: 36px; }
.signinForm .textBoxErr::after { position: absolute; top: 8px; right: 0px; content: ''; display: inline-flex; height: 24px; width: 24px; background: url(/img/web/ico/error_theme_red.svg) center center no-repeat; background-size: 24px; }