.fx-login-name {
    position: relative
}

.fx-login-name .name-input {
    width: 100%
}

.fx-login-name .name-input .addon-combo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 86px;
    padding: 0 6px 0 12px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-right: none;
    border-radius: 3px 0 0 3px;
    -webkit-animation: fadeIn .2s;
    animation: fadeIn .2s
}

.fx-login-name .name-input .addon-combo.disabled {
    color: #91a1b7;
    background-color: #f4f6f9
}

.fx-login-name .name-input .addon-combo.disabled .area-select {
    cursor: default
}

.fx-login-name .name-input .addon-combo .area-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.fx-login-name .name-input .addon-combo .select-icon {
    color: #bababa;
    font-size: 18px
}

.fx-login-name .name-input .x-inner-wrapper {
    flex: auto
}
.fx-account-layout {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #f7f7f7
}

.fx-account-layout .account-logo {
    position: absolute;
    top: 40px;
    left: 60px
}

.fx-account-layout .account-logo > img {
    display: block;
    max-width: 200px;
    max-height: 200px
}

.fx-account-layout .account-logo > img.official-logo {
    height: 40px
}

.fx-account-layout .account-pane-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.fx-account-layout .account-pane {
    display: flex;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 8px 0 hsla(0, 0%, 85.9%, .5)
}

.fx-account-layout .mobile-account-banner {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 15px
}

.fx-account-layout .mobile-account-banner .banner {
    display: inline-block
}

.fx-account-layout .mobile-account-banner .banner > img {
    width: auto;
    height: 82px
}

.fx-account-layout .mobile-account-banner .content-text {
    display: inline-block;
    padding-left: 10px;
    color: #1f2d3d;
    font-weight: 300;
    font-size: 15px;
    line-height: 22px
}

.fx-account-layout .signin-container-banner {
    position: relative;
    width: 340px;
    overflow: hidden;
    vertical-align: middle
}

.fx-account-layout .signin-container-banner .banner-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 2px 0 0 2px
}

.fx-account-layout .account-container {
    width: 400px
}

@media screen and (max-width: 768px) {
    .fx-account-layout {
        padding-top: 30px
    }

    .fx-account-layout .account-logo {
        display: none
    }

    .fx-account-layout .account-pane-container {
        position: static;
        padding: 0 18px;
        transform: none
    }

    .fx-account-layout .account-pane-container.hide-mobile-banner {
        margin-top: 100px
    }

    .fx-account-layout .account-pane {
        display: block;
        width: 100%;
        max-width: 400px;
        margin: 0 auto
    }

    .fx-account-layout .mobile-account-banner {
        display: flex
    }

    .fx-account-layout .signin-container-banner {
        display: none
    }

    .fx-account-layout .account-container {
        width: 100% !important
    }
}

@media screen and (max-width: 768px) {
    .fx-password-set-container {
        width: 100%
    }

    .fx-password-set-container .password-content {
        padding: 0 20px 20px
    }
}

@media screen and (max-width: 768px) {
    .fx-custom-login.has-info-collect .account-pane-container {
        margin-top: 0 !important
    }
}

.fx-custom-login.has-info-collect .account-container {
    width: 500px
}

.fx-custom-login.has-info-collect .login-lang-switch {
    float: left;
    margin-top: 15px
}

.fx-custom-login .login-lang-switch {
    float: right;
    margin-top: 15px
}

.fx-custom-login .fill-name-title {
    padding-top: 30px;
    font-size: 24px;
    text-align: center
}

@media screen and (max-width: 768px) {
    .fx-custom-login .fill-name-title {
        height: 52px;
        padding-top: 0;
        font-size: 20px;
        line-height: 52px;
        border-bottom: 1px solid #e9e9e9
    }
}

.fx-custom-login .one-item-content .item-header {
    height: 60px;
    font-size: 14px;
    line-height: 60px;
    text-align: center;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1)
}

.fx-custom-login .account-login-container {
    padding: 10px 40px 0
}

.fx-custom-login .account-login-container.show-error {
    padding-top: 0
}

.fx-custom-login .account-login-container .login-password, .fx-custom-login .account-login-container .phone-code {
    width: 100%;
    height: 40px;
    margin-top: 15px
}

.fx-custom-login .account-login-container .auto-login-panel {
    display: flex;
    justify-content: space-between;
    margin-top: 15px
}

.fx-custom-login .account-login-container .auto-login-panel.hide-auto-login {
    justify-content: flex-end
}

.fx-custom-login .account-login-container .auto-login-panel .forget-password {
    color: #0db3a6;
    font-size: 12px
}

.fx-custom-login .account-login-container .login-btn {
    width: 100%;
    margin-top: 15px
}

.fx-custom-login .account-login-container .other-login-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px
}

.fx-custom-login .account-login-container .other-login-panel .login-item {
    display: inline-block
}

.fx-custom-login .account-login-container .other-login-panel .operate-item {
    color: #0db3a6;
    font-size: 12px;
    cursor: pointer
}

.fx-custom-login .account-login-container .other-login-panel .login-divider {
    margin: 0 6px
}

.fx-custom-login .account-login-container .invalid-msg {
    margin: 15px 0;
    padding: 8px 12px;
    color: #e64340;
    font-size: 14px;
    background-color: #ffeeec;
    border-radius: 3px
}

.fx-custom-login .remember-check {
    font-size: 12px;
    cursor: pointer
}

.fx-custom-login .remember-check .icon-blank {
    position: relative;
    top: 2px;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    transition: all .2s ease-in-out
}

.fx-custom-login .remember-check .icon-blank:before {
    position: absolute;
    top: 2px;
    left: 1px;
    display: block;
    width: 10px;
    height: 6px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg);
    opacity: 0;
    transition: opacity .2s ease-in-out;
    content: ""
}

.fx-custom-login .remember-check .icon-blank:hover {
    border-color: #5e6d82
}

.fx-custom-login .remember-check.select .icon-blank {
    background-color: #0db3a6;
    border-color: #0db3a6
}

.fx-custom-login .remember-check.select .icon-blank:before {
    opacity: 1
}

.fx-custom-login #wechat-code {
    margin-top: 20px
}

.fx-custom-login #wechat-code > iframe {
    width: 400px;
    height: 400px
}

.fx-custom-login .dingtalk-login-container {
    padding: 0 30px
}

.fx-custom-login .open-tip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px
}

.fx-custom-login .open-tip .open-dingtalk {
    color: #0db3a6;
    cursor: pointer
}

.fx-custom-login .wechat-login-container .member-login {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 320px
}

.fx-custom-login .wechat-login-container .member-login .member-login-link {
    width: 280px;
    height: 280px;
    color: #1f2d3d;
    font-size: 12px;
    text-align: center;
    border-radius: 6px
}

.fx-custom-login .wechat-login-container .member-login .member-login-link:hover {
    background-color: #fafafa
}

.fx-custom-login .wechat-login-container .member-login .member-login-link .login-image {
    display: block;
    height: 128px;
    margin: 57px auto 20px
}

.fx-custom-login .wechat-login-container .auto-login-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px 0;
    font-size: 12px;
    border-top: 1px solid #e9e9e9
}

.fx-custom-login .wechat-login-container .auto-login-panel .admin-login {
    color: #0db3a6;
    cursor: pointer
}

.fx-custom-login #dingtalk-qrcode {
    width: 100%;
    height: 315px;
    margin-top: 30px
}

.fx-custom-login #dingtalk-qrcode > iframe {
    width: 100%;
    height: 100%
}

.fx-custom-login .normal-account-btn {
    color: #0db3a6;
    font-size: 12px;
    line-height: 60px;
    text-align: center;
    border-top: 1px solid #e9e9e9;
    cursor: pointer
}

.fx-custom-login .sso-login-container {
    padding: 50px 40px
}

.fx-custom-login .sso-login-container .sso-image {
    display: block;
    width: 134px;
    margin: 6px auto 30px
}

.fx-custom-login .corp-dingtalk-container .dingtalk-qrcode-preview {
    display: block;
    width: 280px;
    margin: 25px auto 30px
}

.fx-custom-login .corp-dingtalk-container .qrcode-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 340px;
    height: 290px;
    margin: 30px auto;
    background: #f9f9f9;
    border: 1px solid #e8e8e8;
    border-radius: 5px
}

.fx-custom-login .corp-dingtalk-container .open-tip {
    padding: 0 30px
}

.fx-custom-login .mobile-login-title {
    display: none;
    height: 52px;
    color: #3a3a3a;
    font-size: 20px;
    line-height: 52px;
    text-align: center;
    border-bottom: 1px solid #e9e9e9
}

@media screen and (max-width: 768px) {
    .fx-custom-login .mobile-login-title {
        display: block
    }

    .fx-custom-login .login-tab-header {
        display: none
    }

    .fx-custom-login .account-login-container {
        padding: 30px 20px 0
    }

    .fx-custom-login .account-login-container.fill-name-mode .login-btn {
        margin-bottom: 35px
    }

    .fx-custom-login .account-login-container .auto-login-panel {
        margin-top: 10px
    }

    .fx-custom-login .account-login-container .auto-login-panel .forget-password {
        font-size: 13px
    }

    .fx-custom-login .account-login-container .other-login-panel {
        margin-top: 15px;
        padding-bottom: 35px
    }

    .fx-custom-login .account-login-container .other-login-panel .login-divider {
        display: none
    }

    .fx-custom-login .account-login-container .other-login-panel .operate-item {
        font-size: 14px
    }

    .fx-custom-login .account-login-container .other-login-panel .operate-item.more, .fx-custom-login .account-login-container .other-login-panel .operate-item.weChat {
        display: none
    }

    .fx-custom-login .account-login-container .login-password, .fx-custom-login .account-login-container .phone-code {
        margin-top: 15px
    }

    .fx-custom-login .account-login-container .login-btn {
        margin-top: 15px;
        font-weight: 500;
        font-size: 15px
    }

    .fx-custom-login .account-login-container .invalid-msg {
        font-size: 15px
    }

    .fx-custom-login .remember-check {
        font-size: 13px
    }

    .fx-custom-login .corp-dingtalk-container {
        padding-bottom: 30px
    }

    .fx-custom-login .corp-dingtalk-container .qrcode-img-container {
        width: auto;
        height: auto;
        margin-bottom: 10px;
        background: none;
        border: none
    }

    .fx-custom-login .sso-login-container {
        padding: 40px 20px 50px
    }

    .fx-custom-login .sso-login-container .sso-image {
        width: 80px
    }

    .fx-custom-login .sso-login-container .sso-login-btn {
        height: 40px;
        margin-top: 33px;
        line-height: 38px
    }
}