#root-master, body, html {
    height: 100%;
    font-size: 14px;
    font-family: CeraPro, NotoSansHans, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: block;
    margin: 0;
    padding: 0;
}

.lego-crm-form .lego-crm-form-item {
    flex-wrap: wrap;
    max-width: 575px
}

.lego-crm-form .lego-crm-form-item .lego-crm-form-item-control, .lego-crm-form .lego-crm-form-item .lego-crm-form-item-label {
    flex: 0 0 100%;
    max-width: 100%;
}

.lego-crm-form-vertical .lego-crm-form-item {
    flex-direction: column;
}

.lego-crm-form-item-with-help {
    margin-bottom: 0;
    transition: none;
}

.lego-crm-row {
    display: flex;
    flex-flow: row wrap;
}

.lego-crm-col-xs-24 {
    display: block;
    flex: 0 0 100%;
    max-width: 100%;
}

.lego-crm-col {
    position: relative;
    max-width: 100%;
    min-height: 1px;
}

.relativeContainer {
    position: relative;
}

.lego-crm-col-lg-12 {
    display: block;
    flex: 0 0 50%;
    max-width: 50%;
}

.leftContainerBg {
    width: 100%;
    height: 100%;
}

.leftContainerBg svg {
    width: 100%;
    min-height: 100vh;
}

.mainTool {
    position: absolute;
    bottom: 3.19vw;
    left: 5.55vw;
}

.mainTool svg {
    width: 33.33vw;
    max-width: 480px;
    height: 40.27vw;
    max-height: 580px;
}

.anticon {
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -0.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.anticon > * {
    line-height: 1;
}

.anticon svg {
    display: inline-block;
}

.anticon::before {
    display: none;
}

.anticon .anticon-icon {
    display: block;
}

.anticon[tabindex] {
    cursor: pointer;
}

.anticon-spin::before,
.anticon-spin {
    display: inline-block;
    -webkit-animation: loadingCircle 1s infinite linear;
    animation: loadingCircle 1s infinite linear;
}

.formCenter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

div {
    display: block;
}

.languageContainer {
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    display: flex;
    position: absolute;
    top: 120px;
    right: 120px;
    cursor: pointer;
    z-index: 998;

    a {
        color: #000;
        text-decoration: none;
    }

    .activeLanguageText {
        color: #357ab5;
        font-weight: 600;
    }
}

.logoContainer {
    display: flex;
    margin-bottom: 60px;
    padding-left: 60px;
    margin-top: -100px;
}

.logo svg {
    width: 60px;
    height: 60px;
}

.logoContent {
    display: inline-flex;
    flex-flow: column;
    justify-content: space-between;
    margin-left: 8px;
}

.logoWelcome {
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
}

.logoCRM {
    color: #333;
    font-weight: 600;
    font-size: 25px;
    line-height: 1;
}

.main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-top: -40px;
    background-size: 50px;
}

.main .box {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 800px;
    /*height: 600px;*/
    margin: 0 auto;
    overflow: hidden;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.main .box .content {
    width: 450px;
    height: 100%;
    padding: 60px 20px 0;
    background: #fff;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.main .box .content .header {
    position: relative;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
}

.main .box .content .title {
    color: #333;
    font-weight: 500;
    font-size: 24px;
    line-height: 1;
}


.main .box .content .weComLoginButton {
    color: #006CB7;
    font-weight: 500;
    font-size: 24px;
    line-height: 1;
    background: none;
    border: none;
}

.main .box .sso .header {
    position: relative;
}

.main .box .sso .title {
    margin-bottom: 16px;
    color: #333;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0 auto;
    padding: 0;
}

.main .loginFormBox {
    position: relative;
}

.lego-crm-form {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum", "tnum";
}

.lego-crm-form-item {
    box-sizing: border-box;
    padding: 0;
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum", "tnum";
    margin: 0 0 24px;
    vertical-align: top;
    transition: margin-bottom .3s linear 17ms;
}

.lego-crm-col-24.lego-crm-form-item-label, .lego-crm-col-xl-24.lego-crm-form-item-label, .lego-crm-form-vertical .lego-crm-form-item-label {
    padding: 0 0 10px;
    line-height: 1.5715;
    white-space: normal;
    text-align: left;
}

.lego-crm-form-item-label {
    font-weight: 500;
}

.lego-crm-form-item-label {
    display: inline-block;
    flex-grow: 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}

.lego-crm-form-item-control {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.lego-crm-form-item-control-input {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 32px;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
}

.main .box .content .formItem .input {
    height: 50px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
}

.lego-crm-input {
    box-sizing: border-box;
    margin: 0;
    font-variant: tabular-nums;
    list-style: none;
    font-feature-settings: "tnum", "tnum";
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 0;
    padding: 4px 11px;
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    line-height: 1.5715;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    transition: all .3s;
}

.main .box .content {
    width: 490px;
    height: 100%;
    padding: 60px 60px 0;
    background: #fff;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.main .box .sso {
    width: 490px;
    height: 100%;
    padding: 60px 60px 0;
    background: #fff;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.main .box .content .formItemPW {
    margin-bottom: 10px;
}

.lego-crm-input-affix-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    line-height: 1.5715;
    background-color: #fff;
    background-image: none;
    transition: all .3s;
    display: inline-flex;
    padding: 4px 11px;
}

.lego-crm-input-affix-wrapper:before {
    width: 0;
    visibility: hidden;
    content: "\a0";
}

.lego-crm-form-item-control-input-content {
    -ms-flex: 1;
    height: 100%;
}

.lego-crm-form-item-control-input-content {
    flex: auto;
    max-width: 100%;
}

.main .box .content .formItem .input input {
    font-family: "NotoSansHans";
    background-color: #fff !important;
}

.main .box.content.formItem .input {
    height: 50px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
}

.lego-crm-form-item-control-input-content > span > .lego-crm-input {
    border-color: #e6e6e6;
    outline: none;
}

.lego-crm-input-affix-wrapper > input.lego-crm-input {
    padding: 0;
    border: none;
    outline: none;
}

.main .box .content .formItem .password .lego-crm-input-suffix {
    display: flex;
    padding: 4px 11px;
    flex-direction: row-reverse;
}

.lego-crm-input-suffix {
    margin-left: 4px;
}

.lego-crm-input-prefix, .lego-crm-input-suffix {
    display: flex;
    flex: none;
    align-items: center;
}

.lego-crm-input-password-icon.anticon {
    color: rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: all .3s;
}

.main .box .content .formItem .input svg {
    width: 16px;
    height: 16px;
}

.main .box .content .checkBox {
    /*position: absolute;*/
    /*top: 200px;*/
    /*right: 0;*/
    margin-bottom: 16px;
    text-align: right;

    .forget-layout {
        display: inline-flex;
        align-items: center;

        .forget-check-span {
            display: inline-flex;

            .forget-check-input {
                cursor: pointer;
            }
        }
    }
}

input[type=checkbox] {
    background-color: white;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 17px;
    height: 17px;
    cursor: pointer;
    position: relative;
}

input[type=checkbox]:checked {
    border: none;
    background-color: #F8CF47;
    background: #F8CF47 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

.lego-crm-checkbox-wrapper {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    font-variant: tabular-nums;
    list-style: none;
    font-feature-settings: "tnum", "tnum";
    display: inline-flex;
    align-items: baseline;
    line-height: unset;
    cursor: pointer;
}

.lego-crm-checkbox {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    font-variant: tabular-nums;
    list-style: none;
    font-feature-settings: "tnum", "tnum";
    position: relative;
    top: 0.2em;
    line-height: 1;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
}

.main .box .content .checkBox .lego-crm-checkbox-wrapper .lego-crm-checkbox-checked .lego-crm-checkbox-inner {
    background-color: #ffcf02;
    border-color: #ffcf02;
}

.main .box .content .checkBox .lego-crm-checkbox-wrapper .lego-crm-checkbox-checked:after {
    border: 1px solid #ffcf02;
}

.lego-crm-checkbox-wrapper:after {
    display: inline-block;
    width: 0;
    overflow: hidden;
    content: "\a0";
}

.main .box .content .bt {
    width: 100%;
    height: 50px;
    color: #333;
    font-weight: 500;
    font-size: 16px;
    background-color: #ffcf02;
    border: none;
    border-radius: 8px;
}

.main .box .sso .bt {
    width: 100%;
    height: 50px;
    color: #333;
    font-weight: 500;
    font-size: 16px;
    background-color: #ffcf02;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    line-height: 45px;
    margin-bottom: 10px;
}

.main .box .content .btAccount {
    /*position: absolute;*/
    /*top: 250px;*/
}

.lego-crm-btn, .lego-crm-btn:active, .lego-crm-btn:focus {
    outline: 0;
}

.buttonIcon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
}

.buttonText {
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 2px;
}

.lego-crm-btn {
    line-height: 1.5715;
    position: relative;
    display: inline-block;
    font-weight: 400;
    white-space: nowrap;
    text-align: center;
    box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
    cursor: pointer;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
    height: 32px;
    padding: 4px 15px;
    font-size: 14px;
    border-radius: 2px;
    color: rgba(0, 0, 0, .85);
    border: 1px solid #d9d9d9;
    background: #fff;
}

.lego-crm-btn-link {
    color: rgb(58, 158, 230);
    box-shadow: none;
    border-color: transparent;
    background: transparent;
}

.lego-crm-btn-none {
    color: rgb(134, 134, 134);
    box-shadow: none;
    border-color: transparent;
    background: transparent;
}

.lego-crm-underline {
    text-decoration: underline;
}

.ssoBtn {
    display: inline-block;
}

.forgotBtn {
    padding-left: 0;
    color: #247BBF;
    margin-top: 16px;
}

.localBtn {
    position: absolute;
    top: 200px;
    padding-left: 0;
    text-decoration: none;
}

.captchaBox .lego-crm-form-item {
    margin-bottom: 8px !important;
}

.lego-crm-form-item-control-input {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 32px;
}

.detailValue, .lego-crm-form-item-control-input-content {
    color: #666 !important;
}

.captchaBox .lego-crm-form-item input {
    box-sizing: border-box;
    height: 50px;
    font-family: "NotoSansHans";
    background-color: #fff !important;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
}

.captchaBox .lego-crm-form-item button {
    position: absolute !important;
    top: 11px;
    right: 10px;
    box-sizing: border-box;
    height: 30px;
    color: #333;
    border: none;
    border-left: 1px solid #e6e6e6 !important;
    border-radius: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: none;
}

.main .box .content .title .unChoose {
    color: #b3b3b3;
    font-weight: 400;
    cursor: pointer;
}

.main .box .content .title span:last-child {
    margin-left: 60px;
}

.main .box .content .title .choose {
    cursor: pointer;
}

.noShow {
    display: none;
}

.main .box .content .arrow {
    position: absolute;
    top: -42px;
    cursor: pointer;
}

.textBox {
    display: flex;
    flex-direction: row;
}

.textBox .icon {
    margin-top: 2px;
    font-size: 20px;
}

.footerContainer {
    position: absolute;
    width: 100%;
    bottom: 1px;
}

.police {
    margin-left: 40px;
    width: 20px;
    height: 20px;
}

.ssoBox {
    position: absolute;
    top: 310px;
}

.ssoBtnBox {
    position: absolute;
}

.main .box .content .ssoAccount {
    margin-bottom: 20px;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    position: fixed;
    visibility: hidden;
    width: 400px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    z-index: 999;
    bottom: 70%;
    left: 60%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.form-label {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
}

.mt-40 {
    margin-top: 40px;
}

.mt24 {
    margin-top: 24px;
}

.fts-16 {
    font-size: 16px;
}

.ftw-700 {
    font-weight: 700 !important;
}

.forget-content-span {
    padding-right: 0;
    padding-left: 10px;
    user-select: none;
    cursor: pointer;
}

.input-suffix {
    position: absolute;
    right: 10px;
    top: 0;
    height: 50px;
    display: inline-flex;
    align-items: center;
    width: 20px;
    cursor: pointer;
}

.password-rl {
    position: relative;
}

.hide {
    display: none;
}

.notify-tips {
    font-size: 12px;
}

.banner-container {
    height: 44px;
    background: #FFD400;
    text-align: center;
    position: absolute;
    top: 0;
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
}

.banner-title {
    display: inline-block;
    font-weight: 500;
}

.banner-set-password {
    font-weight: 500;
}

.banner-close {
    position: absolute;
    right: 24px;
    cursor: pointer;
}

.callbackBgImg {
    width: 581px;
    height: 389px;
    top: 272px;
    left: 40vw;
    position: fixed;
    display: inline-block;
}

.errorBox {
    position: fixed;
    left: 283px;
    top: 169px;
    display: flex;
    z-index: 1;
    flex-direction: column;
}

.errorTitle {
    color: #292928;
    font-size: 49px;
    font-weight: 500;
    line-height: 60px;
}

.errorSubTitle {
    font-size: 25px;
    font-weight: 500;
    line-height: 36px;
    color: #292928;
    margin-top: 40px;
}

.errorText {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #292928;
    margin-top: 16px;
    max-width: 400px;
}

.returnLoginButton {
    width: 223px;
    height: 64px;
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 2px;
    border-radius: 4px;
    background-color: #F8CF47;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 48px;

    a {
        color: #000000;
        text-decoration: none;
    }
}

/* ===================== 移动端适配样式 ===================== */
@media screen and (max-width: 768px) {
    html, body, #root-master, body > div:first-child {
        min-height: 100vh !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .main {
        margin-top: 20px !important;
        margin-bottom: auto !important;
        align-self: center !important;
    }
    .leftContainerBg {
        display: none;
    }
    .mainTool {
        display: none;
    }
    .logoContainer {
        display: flex;
        margin-bottom: 60px;
        padding-left: 60px;
        margin-top: -100px;
    }
    /* ===== 主内容区 ===== */
    .main .box {
        flex-direction: column !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        min-height: 0 !important;
        max-height: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        z-index: 1 !important;
        padding: 0 !important;
    }
    .main .box .content {
        width: 92vw !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        background: #fff !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
        padding: 32px 16px 24px 16px !important;
        position: relative !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-height: unset !important;
        z-index: 2 !important;
    }
    .main .box .content .title {
        font-size: 20px !important;
        margin-bottom: 24px !important;
        text-align: left !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        position: relative !important;
        z-index: 3 !important;
    }
    .main .box .content .formItem {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    .main .box .content .formItem .input {
        height: 38px !important;
        border-radius: 8px !important;
    }
    .main .box .content .bt,
    .main .box .sso .bt {
        height: 44px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        margin-bottom: 16px !important;
        width: 100% !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
        position: relative !important;
        z-index: 3 !important;
    }
    .main .box .content .bt:last-child,
    .main .box .sso .bt:last-child {
        margin-bottom: 0 !important;
    }
    .main .box .content .checkBox {
        margin-bottom: 8px !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* ===== 右侧内容独占一行 ===== */
    .lego-crm-col-xs-24,
    .lego-crm-col-sm-24,
    .lego-crm-col-md-24 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        display: block !important;
    }

    /* ===== 语言切换 ===== */
    .languageContainer {
        top: 24px !important;
        right: 24px !important;
        font-size: 16px !important;
        position: fixed !important;
        z-index: 10 !important;
    }

    /* ===== footer 固定底部 ===== */
    .footerContainer {
        position: fixed !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        background: transparent !important;
        z-index: 99 !important;
        margin: 0 !important;
        padding: 4px 0 6px 0 !important;
        font-size: 11px !important;
        text-align: center !important;
    }

    /* ===== 其他辅助类 ===== */
    .formCenter {
        padding: 0 !important;
        min-height: 0 !important;
        display: block !important;
    }
}

button.loading {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button.loading::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: button-loading-spinner 0.75s linear infinite;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

button[disabled],
button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background-color: #e6e6e6;
    color: #999;
    border-color: #d9d9d9;
    box-shadow: none;
}