@charset "UTF-8";

@media (max-width: 1919px) and (min-width: 768px) {
    html {
/*        zoom: 93%;*/
    }

    @-ms-viewport {
        width: 1920px;
    }
}

input[type=number] {
    -moz-appearance: textfield;
}

input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

select,
button {
    vertical-align: middle;
    font-size: 18px;
    padding: 0
}

input {
    border: none;
    vertical-align: middle;
    font-size: 16px;
    border-radius: 4px;
    padding: 0;
    -moz-user-select: text !important;
    -webkit-user-select: text !important;
    user-select: text !important
}

    input::-ms-clear,
    input::-ms-reveal {
        display: none;
    }

.displayFlex {
    display: flex;
    align-items: center;
}

input[name='VerifyCode'],
input[name='Username'] {
    background-size: 16px;
    background-position: 95% 50%;
    background-repeat: no-repeat
}

i {
    font-style: normal
}

.eyeIcon {
    position: absolute;
    top: 11px;
    width: 20px;
    height: 20px;
    border: none;
    right: 4px;
    transition: color .3s;
    cursor: pointer;
    fill: #7D849B;
}

    .eyeIcon svg {
        fill: #7D849B;
    }
#CodeWords, #ConfirmCodeWords {
    padding-right: 30px
}

#clearInput {
    position: absolute;
    width: 40px;
    height: 40px;
    cursor: pointer;
    top: 0;
    right: 0;
    background-size: 16px;
    background-repeat: no-repeat;
    background-image: url(../../img/error.png);
    background-position: center;
}

button {
    height: 40px;
    padding: 10px 32px;
    line-height: 1.3;
    white-space: nowrap;
}

input {
    background: none
}

button:hover {
    cursor: pointer
}

a {
    outline: none;
    text-decoration: none;
}

    a:hover {
        cursor: pointer;
    }

html {
    height: 100%
}

p {
    margin: 0
}

body {
    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    min-height: 630px;
    width: 100%;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    overflow: auto;
    background-color: #F0F5FB
}

    body > form {
        height: 100%
    }

.body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative;
    background-color: #F0F5FB
}

.login-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    background: #F0F5FB;
}

.login-background {
    margin-right: 94px;
    line-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .login-background .title {
        margin-bottom: 14px;
        font-size: 24px;
        font-weight: bold
    }

    .login-background > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

        .login-background > div img {
            width: 698px;
        }

    .login-background p {
        margin: 0
    }

fieldset {
    border: none;
    padding: 0;
    margin: 0
}

#IsPersistent {
    height: 0;
    width: 0;
    opacity: 0;
    position: absolute
}

#warningBySystem {
    width: 100%;
    /* display: none; */
    font-size: 14px;
    max-width: 344px;
    margin: auto;
    margin-top: 10px;
}

    #warningBySystem ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        #warningBySystem ul li {
            text-align: left
        }

#VerifyCodeBox .success {
    background-image: url("../../img/success.png");
}

.box input {
    border: none;
    border-bottom: #818181 1px solid;
}
/*登录页面*/
.loginBlock {
    flex: 0 0 410px;
    position: relative;
}

    .loginBlock .title {
        font-size: 20px;
        text-align: center;
        color: #4d4d4d;
        font-weight: bold;
        margin-bottom: 28px
    }

    .loginBlock .already_have {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 10px;
        font-size: 16px
    }
.loginBlock_inner {
    padding: 35px 33px;
    box-sizing: border-box;
    background-color: #fff;
    /*box-shadow: 0px 2px 13px 2px rgba(212,212,212,0.42);*/
    overflow: hidden;
    border-radius: 16px;
    font-size: 14px;
    font-family: Tahoma, Geneva, sans-serif;
    background-color: #fff;
    /*margin: 130px 102px 10px 102px;*/
    overflow: hidden;
    position:relative
}

.login-head {
    height: 49px;
    flex: 0 0 49px;
    box-sizing: border-box;
    width: 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    font-size: 16px
}
.login-head {
    justify-content: space-between
}

    .login-head > div {
        display: flex;
        align-items: center
    }
    .login-head i {
        display: inline-block;
        height: 15px;
        width: 1px;
        margin: -2px 9px 0 6px
    }
        .login-head p{
            margin-top:-6px
        }

        .login-head {
            padding: 0 102px;
            box-sizing: border-box
        }

.head_text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Tahoma, Geneva, sans-serif;
    margin-bottom: 12px
}

    .head_text i {
        font-size: 18px;
        font-weight: 600;
    }

        .head_text i:last-child {
            font-size: 25px;
        }

.box {
    text-align: center;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    display: flex;
}

    .box input {
        line-height: 40px;
        height: 40px;
        border-radius: 0;
        text-align: left;
        outline: 0;
        box-sizing: border-box;
    }

.isIcon_input {
    width: 100%;
}

.button_full {
    width: 100%;
    border: none;
    height: 40px;
    margin-top: 38px;
    outline: none;
    opacity: 1;
    transition: background-color 0.3s
}

    .button_full.disabled {
        /* opacity: 0.4;
    cursor: not-allowed */
    }

.border_none {
    border: none;
}

.registerBtn {
    width: 100%;
    height: 36px;
    font-size: 16px;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

    .registerBtn.hidden {
        display: none;
    }

    .registerBtn a {
        position: relative;
        transition: color 0.3s
    }

.register .head_text {
    justify-content: space-between;
}

#accountContent,
#phoneContent {
    overflow: hidden
}

    #phoneContent .box.border_none,
    #accountContent div[class='box']:last-child,
    .loginBlock_inner.bindPhone .box {
        margin-top: 36px
    }

.loginBlock_inner.bindPhone > div:nth-child(2) {
    margin-top: 12px
}

/*其他登录方式*/
.otherLogin {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center
}

    .otherLogin .head {
        font-size: 13px;
        margin-right: 24px
    }

.loginWay {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
}

    .loginWay button {
        background-color: initial;
        height: initial;
        padding: 0;
        border: none;
        font-size: 12px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        flex-direction: column;
    }

        .loginWay button:hover {
            background: none;
            border: none;
        }

        .loginWay button > div {
            height: 24px;
            width: 24px;
            transition: background-image .2s;
            background-size: 24px 24px;
            background-repeat: no-repeat;
            background-position: center;
        }

    .loginWay div:hover {
        cursor: pointer
    }

.footer {
    bottom: 0;
    overflow: hidden;
    margin-top: 28px;
    flex: 0 0 auto;
    left: 0;
    font-size: 12px;
}

    .footer .line {
        flex: 0 0 100%;
        position: relative;
        border-bottom: 1px solid
    }

    .footer > div:nth-child(2) {
        justify-content: flex-start
    }

        .footer > div:nth-child(2) > div {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

            .footer > div:nth-child(2) > div:first-child {
                gap: 12px;
            }

    .footer > div {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        white-space: nowrap
    }

    .footer div img {
        width: 49px;
        filter: grayscale(1);
        margin-right: 12px
    }

    .footer i {
        display: none
    }

    .footer span {
        display: inline-block;
        color: #838789;
        margin: 0 6px 0 6px;
        font-size: 10px;
        transform: scale(0.9);
    }

    .footer a,
    .footer p {
        display: inline-block;
        transition: color 0.3s;
        white-space: nowrap;
        color: #838789;
    }

/*自动登录*/
.loginChecked {
    display: flex;
    justify-content: space-between;
    margin-top: 19px;
    height:32px;
    white-space: nowrap
}

#Agreed,
#Agreed2 {
    height: 0;
    width: 0;
    position: absolute;
}

    #Agreed + label,
    #Agreed2 + label {
        display: inline-block;
        flex: 0 0 14px;
        width: 14px;
        height: 14px;
        cursor: pointer;
        border-radius: 4px;
        position: relative;
        background: none;
        vertical-align: middle;
        transition: background-color .2s ease-in-out;
        margin: 3px 8px 0 0;
    }

    #Agreed:checked + label::after,
    #Agreed2:checked + label::after {
        box-sizing: content-box;
        content: '';
        background-image: url(../../img/Elementyes.png);
        left: -1px;
        width: 16px;
        height: 16px;
        background-size: 16px;
        position: absolute;
        top: -1px;
        transition: transform .15s ease-in .2s;
        transform-origin: center;
    }

/*tab切换*/
.tablist {
    width: 100%;
    margin: 0 auto 28px auto;
    white-space: nowrap;
    position: relative;
    display: flex;
    justify-content: flex-start;
    height: 37px;
}

    .tablist button {
        background: none;
        padding: 0;
        color: #000;
        font-weight: bold;
        font-size: 16px;
        border: none;
        text-align: center;
        cursor: pointer;
        transition: color 0.3s
    }

        .tablist button:hover {
            background: none
        }

#tabBtn {
    display: none;
    font-size:18px;
    line-height:1.3
}

#LoginBtn {
    margin-top: 15px;
    margin-bottom: 4px;
}

#MobileLogin {
    margin-right: 31px
}

.tablist .line {
    width: 64px;
    position: absolute;
    bottom: 0;
    transform: translateX(0);
    height: 4px;
    border-radius: 2px;
    transition: transform 0.3s
}

    .tablist .line.move {
        transform: translateX(95px);
    }

.input60 {
    height: 100%;
    width: calc(100% - 125px);
    position: relative
}

.input_icon {
    display: inline-block;
    height: 100%;
    line-height: 48px;
    width: 20px;
    left: 8px;
    position: absolute
}

    .input_icon img {
        width: 16px;
        height: 16px;
        opacity: 0.8
    }

.input60 input {
    box-sizing: border-box;
    width: 100%;
}

.button40 {
    box-sizing: border-box;
    width: 40%;
    flex: 0 0 40%;
    font-size: 18px;
    padding: 0;
    border: none !important;
}

i[name='emailAddress'] {
    color: #006CE1
}

/*注册页面*/
.bp_name {
    margin-top: 36px;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.65);
}

.bp_name_tips {
    font-size: 16px;
    color: #8C8C8C;
    padding: 0 15px
}

.inputFull {
    box-sizing: border-box;
    width: 100%;
}

.dropBox {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 120% 120%;
    border-radius: 4px;
    height: 40px;
    margin-top: 36px
}

.dropText {
    position: absolute;
    z-index: 3;
    top: 0px;
    line-height: 40px;
    text-align: center;
    width: 100%;
    right: 0;
}

.successLocation {
    z-index: 2;
    background-image: url(../../img/square.png);
    background-size: 40px 40px;
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    left: 230px;
    bottom: -1px;
    position: absolute;
}

.greenStrip {
    height: 40px;
    width: 0;
    position: absolute;
    top: -1px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.drop {
    z-index: 4;
    width: 38px;
    height: 38px;
    border-radius: 4px;
    position: absolute;
    top: -1px;
    left: 0;
    background-position: center;
    background-repeat: no-repeat !important;
}

    .drop:hover {
        cursor: pointer
    }

.checkboxText {
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    font-size: 13px;
    margin-top: 8px;
    height: auto;
    line-height: 22px
}

    .checkboxText a {
        position: relative
    }

.specialSymbols {
    font-size: 20px
}

.bottomButton {
    width: 100%;
    overflow: hidden;
}

#haveAccount {
    font-size: 16px;
    display: flex;
    cursor: pointer;
    align-items: center;
    transition: all 0.2s;
    padding-right: 16px;
    background-position: right 5px;
    background-repeat: no-repeat;
    background-size: 12px 12px
}


/* 密码提示弹窗 */
.popover-box {
    position: relative;
}

.popover {
    width: 65%;
    position: absolute;
    margin: auto;
    right: 20%;
    top: -88px;
    border-radius: 2px 2px 2px 0px;
    color: #4a4a4a;
    z-index: 99
}

.popover_inner {
    text-align: left;
    font-weight: bold;
    padding: 10px;
}

    .popover_inner p {
        text-align: left;
        display: flex;
        font-size: 12px;
        margin-top: 5px;
        margin-bottom: 0;
        line-height: 18px;
        font-weight: normal;
    }

        .popover_inner p i {
            background-image: url(../../img/codeword_icon.png);
            background-repeat: no-repeat;
            background-size: 14px 14px;
            display: block;
            height: 14px;
            flex: 0 0 14px;
            margin-right: 4px;
            margin-top: 2px;
        }

.arrow {
    right: 32px;
    position: absolute;
    z-index: 2;
    left: 50%;
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    border: 5px dashed transparent;
    font-size: 0;
}

    .arrow span {
        position: absolute;
        top: -6px;
        left: -5px;
        display: block;
        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;
        border-left: 5px dashed transparent;
        border-right: 5px dashed transparent;
        border-bottom: 5px dashed transparent;
    }


.warning,
.box.warning {
    text-align: left;
    font-size: 14px;
    margin-top: 10px;
}

.text-danger {
    overflow: hidden;
}

    .text-danger ul {
        margin: 10px 0 0;
        list-style: none;
        padding: 0;
        font-size: 14px;
    }

.dialog {
    padding: 36px 48px !important;
    text-align: center
}

.dialog-title {
    font-size: 25px;
    font-weight: bold;
}

.dialog-content {
    font-size: 18px;
    margin: 24px 0 30px 0;
}

.dialog-footer {
    text-align: center;
}

#NextStepDontSubmit {
    display: none
}

.Tips {
    display: none;
}

/*绑定手机号*/
.MobileBind .loginBlock {
    width: 60%;
    margin: 0;
    padding: 4% 0;
    border-right: 1px #d8d8d8 solid
}

.MobileBind .loginBlock_inner {
    width: 368px;
    margin: auto;
}

.MobileInstruction {
    padding: 4% 0 0;
    width: calc(40% - 1px);
}

.MobileInstruction-inner {
    width: 70%;
    margin: auto
}

#tip {
    font-size: 13px;
    color: #727272;
    margin: 14px 0 6px 0;
    height: 22px;
}

#apple {
    display: none;
}
#close {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 18px;
    right: 18px;
    cursor: pointer;
}
    #close i {
        color: #818181;
        transition:color .3s;
        font-size: 20px
    }
/*适配手机版*/
@media screen and (max-width:559px) {

    .login-content {
        background-color: #fff
    }

    .login-head {
        height: 48px;
        font-size: 14px;
    }

        .login-head i {
            margin-right: 6px
        }
        .login-head a{
            display:none
        }
        #clearInput {
            display: none !important
        }

    button {
        width: 100%;
    }

    body {
        background-color: #fff;
        min-width: 360px;
        background-image: none !important;
    }

    #warningBySystem,
    .field-validation-error {
        margin: initial !important
    }

    .button40 {
        height: 30px;
        width: auto;
    }

    .loginBlock .title {
        color: #181818;
    }

    #phoneContent .box.border_none,
    #accountContent div[class='box']:last-child,
    .loginBlock_inner.bindPhone .box {
        margin-top: 24px;
    }

    .box input {
        border: #ccc 1px solid;
        padding: 0 12px;
        border-radius: 8px;
        height: 32px;
        background-image: none !important;
        transition: border-color .3s
    }
    
    .button40{
        position:absolute;
        font-size:14px;
        right:0;
        top:1px;
        width:100px
    }
    input {
        font-size: 14px;
    }

    .login-content {
        height: calc(100% - 49px);
        align-items: flex-start
    }

    .register .loginBlock {
        padding: 48px 0 0 0;
    }

    .register .head_text {
        margin-bottom: 48px;
        justify-content: center;
    }

    .body.mobile .registerBtn {
        justify-content: space-between
    }

        .body.mobile .registerBtn i {
            display: none
        }

    .loginBlock {
        height: auto;
        flex: 0 0 100% !important;
        margin: 0 !important;
        padding: 68px 0;
        box-shadow: none;
    }

        .loginBlock .already_have {
            display: none
        }

    .loginBlock_inner {
        margin: auto;
        padding: 0;
        border-radius: 0;
        width: calc(100% - 40px) !important
    }

    .head_text {
        font-size: 20px;
        margin-bottom: 48px;
    }

        .head_text i:last-child {
            font-size: 20px;
        }

    #haveAccount {
        right: 26px
    }

    #loginChecked {
        display: none !important;
    }

    /*登录*/
    .otherLogin {
        margin-top: 22px
    }

    .loginWay {
        gap: 36px
    }

    .tablist {
        display: none
    }

    #accountContent {
        height: auto;
        margin-top: 40px;
    }

    #phoneContent {
        height: auto;
        margin-top: 40px;
    }

    .button_full {
        margin-top: 20px
    }

    #tabBtn {
        display: block;
        background: none;
        color: #595959;
        box-sizing: border-box;
        text-align: center;
        line-height: 2.2;
        position: relative;
        margin-bottom: 20px
    }

        #tabBtn:hover {
            cursor: pointer
        }

    .input60 {
        width: 100%
    }

    #wechat,
    #weibo,
    #microsoft {
        display: none
    }

    #apple {
        display: block !important;
    }

    .eyeIcon {
        transform: scale(0.8);
        top: 6px;
        right: 12px;
    }

    /*忘记密码*/
    .bp_name {
        font-size: 14px !important;
    }

    .bp_name_tips {
        font-size: 14px
    }

    .dropBox {
        display: none !important
    }

    #NextStepDontSubmit {
        display: block
    }

    #VerifyCode {
        background-position: 65%
    }

    .Tips {
        display: block;
        color: #595959;
        margin-top: 18px;
        margin-bottom: 14px;
    }

        .Tips.p {
            color: rgba(0, 0, 0, 0.65);
            margin-top: 30px;
            margin-bottom: -16px;
        }

    /*弹窗*/
    .body.dialogBody {
        background-color: rgba(0, 0, 0, .6)
    }

    .dialogBlock {
        margin: 20% auto 0;
        position: inherit
    }

    .loginBlock_inner.dialog {
        border-radius: 16px
    }

    .dialog-title {
        font-size: 20px
    }

    .dialog-content {
        font-size: 14px;
        margin: 8px 0 48px 0;
    }

    .footer {
        display: none !important
    }
}

@media screen and (max-width: 855px) {

    .login-background {
        display: none
    }
}

@media screen and (max-width: 905px) {

    .footer > div:nth-child(2) {
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        margin: 0;
    }

        .footer > div:nth-child(2) > div:last-child span:first-child {
            display: none
        }
}

@media screen and (max-width: 1024px) {

    .login-head,
    .footer {
        padding: 0 60px
    }

    .login-head {
        background-position: 60px center !important;
        padding-left: 150px !important
    }
}


.testswitch {
    position: relative;
    width: 34px;
    margin-right: 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.testswitch-checkbox {
    display: none;
}

.testswitch.checked .testswitch-switch {
    right: 0;
}

.testswitch.checked .testswitch-inner {
    margin-left: 0;
}

.testswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 20px;
}

.testswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.2s ease-in 0s;
}

    .testswitch-inner::before,
    .testswitch-inner::after {
        display: block;
        float: right;
        width: 50%;
        height: 20px;
        padding: 0;
        line-height: 20px;
        font-size: 10px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    .testswitch-inner::after {
        content: attr(data-on);
        padding-left: 10px;
        color: #FFFFFF;
    }

    .testswitch-inner::before {
        content: attr(data-off);
        padding-right: 10px;
        background-color: #d1d1d1;
        color: #999999;
        text-align: right;
    }

.testswitch-switch {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    background: #FFFFFF;
    margin: 4px;
    top: 0;
    right: 14px;
    bottom: 0;
    border-radius: 20px;
    transition: all 0.2s ease-in 0s;
}

.testswitch-checkbox:checked + .testswitch-label .testswitch-inner {
    margin-left: 0;
}

.testswitch-checkbox:checked + .testswitch-label .testswitch-switch {
    right: 0px;
}

#loginChecked {
    display: flex;
    color: #4d4d4d;
    font-size: 13px;
    align-items: center;
    line-height: 34px
}



#agreeInfoLink {
    outline: none;
    text-decoration: none;
    color: #006CE1;
}

    #agreeInfoLink:hover {
        color: #0051A8;
    }

#agreeInfo {
    display: none;
}

#agreeInfoContainer {
    display: inline-flex;
    font-size: 18px;
    flex-direction: column;
    padding: 18px 0 48px 0;
    position: absolute;
    left: 24px;
    right: 24px;
    top: 177px;
    z-index: 1002;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.17);
}

#agreeInfoHead {
    padding: 0 18px;
    display: flex;
    justify-content: end;
}

#agreeInfoTitle {
    padding: 0 36px;
    font-family: TT Norms Pro;
    font-weight: 500;
    font-size: 25px;
    color: #181818;
    line-height: 30px;
    margin-top: 16px;
}

#agreeInfoContent {
    padding: 0 36px;
    font-family: TT Norms Pro;
    font-weight: 400;
    font-size: 18px;
    color: #181818;
    line-height: 23px;
    margin-top: 8px;
}

#agreeInfoFoot {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

#agreeInfoHeadCloseBtn {
    cursor: pointer;
}

    #agreeInfoHeadCloseBtn:hover path {
        stroke: #005fd1;
    }

#agreeInfoConfirmBtn {
    cursor: pointer;
    width: 122px;
    height: 40px;
    background: #006CE1;
    border-radius: 8px 8px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: TT Norms Pro;
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    transition: background-color 0.3s;
}


    #agreeInfoConfirmBtn:hover {
        background: #0051A8;
    }