button[id="login"] {
    background-color: #79A100;
    border-color: #79A100;
    color: #FFFFFF;
}

    button[id="login"]:hover {
        background-color: #BBCF15;
        border-color: #BBCF15;
        color: #FFFFFF;
    }

    button[id="login"]:focus {
        color: #FFFFFF;
    }

#CaptchaInputText {
    width: 100%;
}

form {
    width: 90%;
    margin: auto;
}

.checkbox {
    margin-left: -11px;
}

[data-icon="logo"] {
    width: 100%;
    height: 110px;
}

[data-icon="logo"]::before {
    content: "";
    background: url(/image/logo.png) center center no-repeat;
    background-size: contain;
    display: block;
    width: 100%;
    height: 70px;
    margin-top: 40px;
    float: left;
}

span.suppliername {
    display: block;
    height: 70px;
    width: 65%;
    margin-top: 40px;
    margin-right: 10px;
    font-size: 48px;
    font-weight: bold;
    float: left;
}

.pagetitle {
    padding-top: 0
}

.systemname {
    position: relative;
    text-align: center
}

    .systemname > span {
        background: #f5f5f5;
        margin: auto;
        padding: 0 10px;
        position: relative
    }

    .systemname:before {
        content: "";
        width: 100%;
        border-bottom: 3px solid #BBCF15;
        display: inline-block;
        position: absolute;
        top: 12px;
        left: 0
    }

.info_box {
    cursor: pointer;
    display: none;
    color: #de0000;
    font-size: 12px;
    line-height: 20px;
    min-width: 50px;
    width: auto;
    height: auto;
    padding: 10px 10px 10px 40px;
    border: 1px solid #cecece;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    top: 42px;
    position: absolute;
    z-index: 2;
    left: 20px;
    -webkit-box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.4);
    -moz-box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.4);
    box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.4);
    background: #fff url(data:image/png;base64,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) 10px 10px no-repeat;
    text-align: left;
}

@media only screen and (max-width: 479px) {
    .info_box {
        width: auto
    }
}

.info_box::before {
    content: "";
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-width: 0 7px 7px;
    border-color: transparent transparent #cecece;
    position: absolute;
    top: -7px;
    left: 10px
}

.info_box::after {
    content: "";
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-width: 0 6px 6px;
    border-color: transparent transparent #fff;
    position: absolute;
    top: -6px;
    left: 11px
}

.info_box > span::before {
    content: "請符合要求的格式。";
    color: #000;
    font-size: 16px;
    line-height: 20px;
    display: block;
    text-align: left;
}

.info_box > span[data-alert]::before {
    content: attr(data-alert)
}

html:lang(zh-cn) .info_box > span::before {
    content: "请符合要求的格式"
}

html:lang(en-us) .info_box > span::before {
    content: "Please match the requested format"
}

html:lang(ja) .info_box > span::before {
    content: "要求された形式と一致してください。"
}

.info_box > span > span::after {
    content: attr(data-counter);
    color: #dedede;
    font-size: 12px;
    line-height: 20px;
    display: block;
    position: absolute;
    top: 36px;
    left: 7px;
    width: 24px;
    text-align: center
}

span[data-plh]::after {
    content: attr(data-plh)
}

input[data-plh="plh_back_id"]::before {
    content: "帳號"
}

input[data-plh="plh_back_id"]::after,
span[data-plh="plh_back_id"]::after {
    content: "請輸入帳號"
}

span[data-plh="plh_back_id"][data-alert="limitaccount"]::after {
    content: "限制帳號" !important
}

input[data-placemsg="sex"]::before {
    content: "請選擇性別"
}

input[data-placemsg="Captcha1"]::before {
    content: "請輸入右側圖片英數字"
}

@media only screen and (max-width: 767px) {
    input[data-placemsg="Captcha1"]::before {
        content: "請輸入下方圖片英數字"
    }
}

.input_field {
    -webkit-transition: -webkit-box-shadow .6s 2s ease;
    -moz-transition: -moz-box-shadow .6s 2s ease;
    -o-transition: box-shadow .6s 2s ease;
    transition: box-shadow .6s 2.6s ease;
    -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0) inset;
    -moz-box-shadow: 0 0 0 0 rgba(0,0,0,0) inset;
    box-shadow: 0 0 0 0 rgba(0,0,0,0) inset
}

    .input_field input[type="text"], .input_field input[type="password"] {
        outline: 0;
    }

    .input_field input[type="text"], .input_field input[type="password"] {
        border: #aaa 1px solid;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        height: 40px;
        padding-left: 3px;
        padding-right: 3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        background-image: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(1%,#eee),color-stop(15%,#fff));
        background-image: -webkit-linear-gradient(top,#eee 1%,#fff 15%);
        background-image: -moz-linear-gradient(top,#eee 1%,#fff 15%);
        background-image: -o-linear-gradient(top,#eee 1%,#fff 15%);
        background-image: -ms-linear-gradient(top,#eee 1%,#fff 15%);
        background-image: linear-gradient(top,#eee 1%,#fff 15%);
        color: #008FFF;
    }

#loginForm .input_field:hover {
    -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}

#loginForm input[type="text"], #loginForm input[type="password"], #loginForm input[type="email"] {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    /*position: absolute;*/
    top: 3px;
    left: 40px;
    width: calc(100% - 60px);
    height: 24px;
    padding: 7px;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    border: 0 none;
    border-left: 1px solid #DFDFDF;
    background: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    z-index: 1;
    -webkit-transition: -webkit-transform .15s ease;
    transition: transform .15s ease;
    /*-webkit-transform: scale(1);*/
    -ms-transform: scale(1);
    /*transform: scale(1);*/
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box
}

    #loginForm input[type="text"]:focus, #loginForm input[type="password"]:focus, #loginForm input[type="email"]:focus {
        font-size: 18px;
        height: 30px;
        line-height: 30px;
        top: -4px;
        outline: none;
        -webkit-transition: -webkit-transform .15s ease;
        transition: transform .15s ease;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        background: #fff;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: 0 0 5px rgba(81,203,238,1);
        -moz-box-shadow: 0 0 5px rgba(81,203,238,1);
        box-shadow: 0 0 5px rgba(81,203,238,1);
        border: 1px solid rgba(81,203,238,1)
    }

#loginForm .resetCaptcha:hover img[data-img="imgCaptcha"] {
    cursor: pointer;
    -webkit-transition: -webkit-transform .15s ease;
    transition: transform .15s ease;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

#loginForm .resetCaptcha:hover img[data-img="imgCaptcha"] {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 5px rgba(81,203,238,1);
    -moz-box-shadow: 0 0 5px rgba(81,203,238,1);
    box-shadow: 0 0 5px rgba(81,203,238,1);
    border: 1px solid rgba(81,203,238,1)
}

#loginForm .resetCaptcha:hover .fa-refresh {
    -webkit-animation: spin 2s infinite linear;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
    display: inline-block
}

.input_field {
    /*position: relative;*/
    height: 45px;
    border: 1px solid #C2C2C2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 0 10px 2px rgba(0,0,0,0.1) inset
}

#loginForm .fa {
    width: 40px;
    text-align: center;
    font-size: 18px;
    line-height: 40px;
    color: #cecece
}

.input_field_group .input_field {
    width: calc(100% - 200px);
    display: inline-block
}

.input_field_group .captcha {
    width: 190px;
    display: inline-block;
    float: right;
    margin: 0;
    vertical-align: top
}

.input_field_group .resetCaptchabutton {
    position: relative;
    margin-left: 40px;
    top: -40px;
}

    .input_field_group .resetCaptchabutton img {
        width: 148px;
        height: 43px;
        /*position: relative;*/
        top: 0;
        border: 0;
        border-left: 1px solid #cecece;
        -webkit-border-top-right-radius: 3px;
        -webkit-border-bottom-right-radius: 3px;
        -moz-border-radius-topright: 3px;
        -moz-border-radius-bottomright: 3px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px
    }

@media only screen and (max-width: 767px) {
    .input_field_group .input_field {
        width: 100%;
    }

    .input_field_group .captcha::before {
        content: "刷新";
        position: absolute;
        top: -22px;
        left: 0;
        font-size: .8em;
        font-weight: 700;
        cursor: pointer;
    }

    .input_field_group .captcha {
        width: 100%;
        float: none;
        margin-top: 27px;
    }

    .input_field_group .resetCaptchabutton img {
        width: 100%;
        min-width: 200px
    }
}

/*New Form*/

#mainlogin {
    max-width: 400px; 
    margin: 80px auto 10px;
}

.login-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.form-horizontal .form-group {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

#mainlogin.well {
    display: none;
    width: 100%;
    position: relative;
    overflow: hidden
}

#mainlogin[data-status="visible"].well {
    display: block;
}

    #mainlogin[data-status="visible"].well::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(270deg,#f8f8f8,#fff);
        z-index: -1;
        opacity: 1;
        transition: opacity .3s 1.2s
    }

    #mainlogin[data-status="visible"].well:hover::before {
        opacity: 0;
        transition: opacity .3s 1.2s
    }

    #mainlogin[data-status="visible"].well:hover::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(270deg,#f0fcf0,#fff);
        z-index: -1;
        opacity: 0;
        transition: opacity .3s 1.2s
    }

    #mainlogin[data-status="visible"].well:hover::after {
        opacity: 1;
        transition: opacity .3s 1.2s
    }

    #mainlogin[data-status="visible"].well:hover {
        box-shadow: 0 0 12px rgba(0,0,0,.12);
        border: 2px solid rgba(227,227,227, 1);
        transition: box-shadow .3s 1.2s, border .3s 0.2s;
    }

        #mainlogin[data-status="visible"].well:hover:not(:has(.input_field:hover)) {
            border: 2px solid rgba(190,209,21,1);
            transition: border .3s 0.2s
        }


/* overflow shadow */
#mainlogin form {
    overflow: hidden;
    overflow-y: auto;
    max-height: 80vh;
    box-sizing: content-box;
    padding: 30px 10px 20px 10px;
}

    #mainlogin form::-webkit-scrollbar {
        width: 0;
        background: transparent;
    }

    #mainlogin form .input-group:nth-child(1) {
        position: sticky;
        top: 0;
        z-index: 9;
        height: 56px;
        transition: box-shadow 0.3s ease-in-out;
    }

        #mainlogin form .input-group:nth-child(1).shadow::after {
            content: "";
            backdrop-filter: blur(5px);
            z-index: -1;
            width: calc(100% + 20px);
            left: -10px;
            height: 88px;
            display: block;
            position: absolute;
            bottom: 0;
            box-shadow: 0 2px 10px -5px rgba(0, 0, 0, 0.3);
        }

    #mainlogin form .input-group:last-child {
        position: sticky;
        bottom: 0;
        z-index: 9;
        transition: box-shadow 0.3s ease-in-out;
    }

        #mainlogin form .input-group:last-child.shadow::after {
            content: "";
            height: 78px;
            width: calc(100% + 20px);
            left: -10px;
            box-shadow: 0 -2px 10px -5px rgba(0, 0, 0, 0.3);
            display: block;
            position: absolute;
            z-index: -1;
            bottom: -20px;
            backdrop-filter: blur(5px);
        }
/* */

#mainlang.well {
    padding: 20px;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*text-align: center;*/
    max-width: 400px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

#mainlang.well {
    border: 2px solid rgba(227,227,227, 1);
    transition: border 0.2s 0.1s;
}

#mainlang[data-status="visible"].well {
    display: block;
}

    #mainlang[data-status="visible"].well::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(270deg,#f8f8f8,#fff);
        z-index: -1;
        opacity: 1;
        transition: opacity 0.3s 1.2s
    }

    #mainlang[data-status="visible"].well:hover::before {
        opacity: 0;
        transition: opacity 0.3s 1.2s
    }

    #mainlang[data-status="visible"].well::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(270deg,#f0fcf0,#fff);
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s 1.2s;
    }

    #mainlang[data-status="visible"].well:hover::after {
        opacity: 1;
        transition: opacity 0.3s 1.2s
    }

    #mainlang[data-status="visible"].well:hover {
        box-shadow: 0 0 12px rgba(0,0,0,.12);
        border: 2px solid rgba(227,227,227,1);
        transition: box-shadow 0.3s 1.2s, border 0.3s 0.2s;
    }

        #mainlang[data-status="visible"].well:hover:not(:has(.lang_switch li:hover)) {
            border: 2px solid rgba(190,209,21,1);
            transition: border 0.3s 0.2s
        }

@-webkit-keyframes showloginpannel {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-moz-keyframes showloginpannel {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-ms-keyframes showloginpannel {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes hiddenloginpannel {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-moz-keyframes hiddenloginpannel {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-ms-keyframes hiddenloginpannel {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg)
    }

    100% {
        -moz-transform: rotate(359deg)
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg)
    }
}

@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg)
    }

    100% {
        -o-transform: rotate(359deg)
    }
}

@-ms-keyframes spin {
    0% {
        -ms-transform: rotate(0deg)
    }

    100% {
        -ms-transform: rotate(359deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(359deg)
    }
}
/* */
.body_login[data-flip="visible"] {
    transform: rotateX(180deg)
}

    .body_login[data-flip="visible"] #mainlogin {
        -webkit-transition: opacity 0.3s 0.2s ease;
        -moz-transition: opacity 0.3s 0.2s ease;
        -o-transition: opacity 0.3s 0.2s ease;
        transition: opacity 0.3s 0.2s ease;
        opacity: 0
    }

.body_login[data-flip=""] #mainlogin {
    -webkit-transition: opacity 0.3s 0.1s ease;
    -moz-transition: opacity 0.3s 0.1s ease;
    -o-transition: opacity 0.3s 0.1s ease;
    transition: opacity 0.3s 0.1s ease;
    opacity: 1;
    position: relative;
}

.body_login[data-flip="visible"] #minilogin[data-status="visible"],
.body_login[data-flip="visible"] .minilogin[data-status="visible"] {
    -webkit-transition: opacity 0.4s 0.2s ease;
    -moz-transition: opacity 0.4s 0.2s ease;
    -o-transition: opacity 0.4s 0.2s ease;
    transition: opacity 0.4s 0.2s ease;
    opacity: 1;
    -webkit-transition: display 0.1s ease;
    -moz-transition: display 0.1s ease;
    -o-transition: display .1s ease;
    transition: display .1s ease;
    display: block
}

.body_login[data-flip=""] #minilogin, .body_login[data-flip=""] .minilogin {
    -webkit-transition: opacity 0.3s 0.1s ease;
    -moz-transition: opacity 0.3s 0.1s ease;
    -o-transition: opacity .3s .1s ease;
    transition: opacity .3s .1s ease;
    opacity: 0;
    -webkit-transition: display 0.1s 0.4s ease;
    -moz-transition: display 0.1s 0.4s ease;
    -o-transition: display 0.1s 0.4s ease;
    transition: display 0.1s 0.4s ease;
    display: none
}

.body_login[data-flip=""] #mainlang {
    -webkit-transition: opacity .6s .2s ease;
    -moz-transition: opacity 0.3s 0.1s ease;
    -o-transition: opacity 0.3s 0.1s ease;
    transition: opacity 0.3s 0.1s ease;
    opacity: 0;
    -webkit-transition: display 0.1s 0.7s ease;
    -moz-transition: display 0.1s 0.4s ease;
    -o-transition: display 0.1s 0.4s ease;
    transition: display 0.1s 0.4s ease;
    display: none
}

.body_login {
    transition: .3s;
    transform-style: preserve-3d;
    width: 100%;
    max-width: 400px;
    position: relative;
}

#mainlogin[data-status=""]::before,
#mainlogin[data-status=""]::after {
    content: "";
    -webkit-animation: hiddenloginpannel 0.6s both;
    -moz-animation: hiddenloginpannel 0.6s both;
    -ms-animation: hiddenloginpannel 0.6s both;
    animation: hiddenloginpannel 0.6s both;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

#mainlogin[data-status="visible"]::before,
#mainlogin[data-status="visible"]::after {
    content: "";
    -webkit-animation: showloginpannel 0.6s 0.5s both;
    -moz-animation: showloginpannel 0.6s 0.5s both;
    -ms-animation: showloginpannel 0.6s 0.5s both;
    animation: showloginpannel 0.6s 0.5s both;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

#minilogin {
    display: none;
}

    #minilogin .msg[attr-loginid=""]::before, .minilogin .msg[attr-loginid=""]::before {
        content: "\00a0"
    }

    #minilogin .msg::before, .minilogin .msg::before {
        content: attr(data-loginid);
        color: #FC0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -moz-binding: url(ellipsis.xml#ellipsis);
        width: 175px;
        display: block;
        min-height: 30px;
        font-size: 16px;
        line-height: 30px;
    }

    #minilogin .icon_id, .minilogin .icon_id {
        width: 50px;
        height: 50px;
        float: left;
        background-size: cover;
        margin-right: 10px;
        display: block;
        position: relative;
        border: 1px solid #cecece
    }

        #minilogin .icon_id::before, .minilogin .icon_id::before {
            width: 50px;
            height: 50px;
            left: 0;
            top: 0;
            font: 36px/50px context-menu-icons
        }

#minilogin, .minilogin {
    display: none;
    width: 240px;
    height: 70px;
    position: absolute;
    margin: -45px 0 0 -130px;
    padding: 10px;
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    color: #686868;
    text-align: left;
    vertical-align: middle;
    font-size: 16px;
    line-height: 30px;
    box-shadow: 0 0 12px rgba(0,0,0,.12);
    border: 2px solid rgba(227,227,227, 1);
}

    #minilogin .msg, .minilogin .msg {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -moz-binding: url(ellipsis.xml#ellipsis);
        width: 175px;
        display: block;
        color: #686868;
        font-size: 12px;
        line-height: 15px;
    }

#minilogin {
    transform: rotateX(180deg)
}

#mainlang .lang_switch {
    position: relative;
    display: block;
    top: auto;
    left: auto;
    max-height: 200px;
    box-shadow: none;
    text-align: left;
    margin-top: 30px;
}

    #mainlang .lang_switch::before {
        content: "";
        height: 10px;
        display: block;
        position: sticky;
        top: 0;
        transition: box-shadow 0.3s ease-in-out;
    }

    #mainlang .lang_switch::after {
        content: "";
        height: 10px;
        display: block;
        position: sticky;
        bottom: 0;
        transition: box-shadow 0.3s ease-in-out;
    }

    #mainlang .lang_switch.shadow::before {
        box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, 0.4);
        width: 100%;
        z-index: 9;
        pointer-events: none;
    }

    #mainlang .lang_switch.tailshadow::after {
        box-shadow: inset 0 -10px 10px -10px rgba(0, 0, 0, 0.4);
        width: 100%;
        z-index: 9;
        pointer-events: none;
    }

#mainlang {
    margin: 10px auto 80px;
    transform: rotateX(180deg);
    display: none;
    height: 100%;
    background: #fff;
    padding: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.setting_box > ul > li:first-child {
    display: none;
}

.setting_box {
    display: block;
    position: relative;
    height: auto;
    padding: 0
}

    .setting_box ul {
        margin: 0;
        padding: 0;
        height: auto
    }

        .setting_box ul li {
            list-style: none;
            position: relative
        }

            .setting_box ul li.input_field {
                margin-bottom: 20px;
            }

    .setting_box > ul > li:not(.input_field) {
        margin-bottom: 20px;
        margin-top: -10px;
    }

.lang_switch {
    border: 1px solid #CCC;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 3;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-weight: 400
}

    .lang_switch ol {
        margin: -10px 0;
        padding: 0;
        background: #fff;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px
    }

        .lang_switch ol li {
            cursor: pointer;
            list-style: none;
            width: 100%;
            height: 37px;
            line-height: 36px;
            vertical-align: top;
            padding: 0;
            border-bottom: 1px solid #CCC;
            display: none;
        }

            .lang_switch ol li span {
                padding: 2px 0 5px;
            }

            .lang_switch ol li:last-child {
                border-bottom: 0
            }

            .lang_switch ol li:hover {
                background: #33b4ff;
                color: #fff
            }

            .lang_switch ol li.selected {
                background: #51cbee;
                color: #fff
            }

                .lang_switch ol li.selected:hover {
                    background: #39F;
                    color: #fff
                }

    .lang_switch li::before {
        content: "";
        width: 29px;
        height: 30px;
        display: inline-block;
        position: relative;
        margin: 0 5px;
        border-right: 1px solid #dfdfdf;
        top: 3px;
        vertical-align: top
    }

li[data-lang="zh-TW"]::before, .setting_lang[data-lang="zh-TW"] div::before {
    background: url(/image/iconpic/country/taiwan.png) 0 8px no-repeat
}

li[data-lang="en-US"]::before, .setting_lang[data-lang="en-US"] div::before {
    background: url(/image/iconpic/country/america.png) 0 8px no-repeat
}

li[data-lang="ja"]::before, .setting_lang[data-lang="ja"] div::before {
    background: url(/image/iconpic/country/japan.png) 0 8px no-repeat
}

li[data-lang="zh-CN"]::before, .setting_lang[data-lang="zh-CN"] div::before {
    background: url(/image/iconpic/country/china.png) 0 8px no-repeat
}

li[data-lang="th"]::before, .setting_lang[data-lang="th"] div::before {
    background: url(/image/iconpic/country/thailand.png) 0 8px no-repeat
}

li[data-lang="ko"]::before, .setting_lang[data-lang="ko"] div::before {
    background: url(/image/iconpic/country/korea.png) 0 8px no-repeat
}

li[data-lang="vi"]::before, .setting_lang[data-lang="vi"] div::before {
    background: url(/image/iconpic/country/vietnam.png) 0 8px no-repeat
}

li[data-lang="ms"]::before, .setting_lang[data-lang="ms"] div::before {
    background: url(/image/iconpic/country/malaysia.png) 0 8px no-repeat
}

#minilogin .msg::after {
    color: #686868;
    display: block;
    font-size: 12px;
    line-height: 15px;
}

#minilogin .msg:empty::after {
    content: "登入中..."
}

html:lang(zh-cn) #minilogin .msg:empty::after {
    content: "登入中...";
}

html:lang(en-us) #minilogin .msg:empty::after {
    content: "Login...";
}

html:lang(ja) #minilogin .msg:empty::after {
    content: "ログイン...";
}

html:lang(th) #minilogin .msg:empty::after {
    content: "เข้าสู่ระบบ...";
}

html:lang(ko) #minilogin .msg:empty::after {
    content: "로그인 중...";
}

html:lang(vi) #minilogin .msg:empty::after {
    content: "Đang đăng nhập...";
}

html:lang(ms) #minilogin .msg:empty::after {
    content: "Sedang log masuk...";
}

#minilogin.maintain .msg::after {
    content: "更新密碼中...";
}

html:lang(zh-cn) #minilogin.maintain .msg::after {
    content: "更新密码中...";
}

html:lang(en-us) #minilogin.maintain .msg::after {
    content: "Update the password...";
}

html:lang(ja) #minilogin.maintain .msg::after {
    content: "パスワードを変更...";
}

html:lang(th) #minilogin.maintain .msg::after {
    content: "ปรับปรุงรหัสผ่าน...";
}

html:lang(ko) #minilogin.maintain .msg::after {
    content: "비밀번호를 업데이트 중...";
}

html:lang(vi) #minilogin.maintain .msg::after {
    content: "Đang cập nhật mật khẩu...";
}

html:lang(ms) #minilogin.maintain .msg::after {
    content: "Sedang mengemas kini kata laluan...";
}

#minilogin.verifysms .msg::after {
    content: "正在檢查驗證碼...";
}

html:lang(zh-cn) #minilogin.verifysms .msg::after {
    content: "正在检查验证码...";
}

html:lang(en-us) #minilogin.verifysms .msg::after {
    content: "Check the verification code...";
}

html:lang(ja) #minilogin.verifysms .msg::after {
    content: "確認コードを確認する...";
}

html:lang(th) #minilogin.verifysms .msg::after {
    content: "ตรวจสอบรหัสยืนยัน...";
}

html:lang(ko) #minilogin.verifysms .msg::after {
    content: "인증 코드를 확인 중...";
}

html:lang(vi) #minilogin.verifysms .msg::after {
    content: "Đang kiểm tra mã xác minh...";
}

html:lang(ms) #minilogin.verifysms .msg::after {
    content: "Sedang memeriksa kod pengesahan...";
}

#login_pannel .login_head:hover::after {
    content: "變更";
}

html:lang(zh-cn) #login_pannel .login_head:hover::after {
    content: "变更";
}

html:lang(en-us) #login_pannel .login_head:hover::after {
    content: "Change";
}

html:lang(ja) #login_pannel .login_head:hover::after {
    content: "変更";
}

html:lang(th) #login_pannel .login_head:hover::after {
    content: "เปลี่ยนแปลง";
}

html:lang(ko) #login_pannel .login_head:hover::after {
    content: "변경";
}

html:lang(vi) #login_pannel .login_head:hover::after {
    content: "Thay đổi";
}

html:lang(ms) #login_pannel .login_head:hover::after {
    content: "Ubah";
}