/* login.html edit 19/08/06 */
i > svg {
    display: block;
    width: 100%;
    height: 100%;
}

input[type="text"] {
    transform: translate3d(0, 0, 0);
}

input[type="button"] {
    cursor: pointer;
}

.login {
    background: #f5f5f5;
}

.bg_login {
    width: 100%;
    min-height: 100%;
    padding-bottom: 16px;
    background: #f5f5f5;
    flex: none;
    /*
    background: url('../images/hg/bg_login.jpg') no-repeat;
    background-position: center 56px;
    */
}

.ios15 .bg_login {
    height: -webkit-fit-content;
    padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}

.box_language {
    width: 100%;
    height: 56px;
    line-height: 56px;
    text-align: center;
    font-size: 14px;
    background: #503f32;
}

.btn_language {
    display: inline-block;
    width: 33.33%;
    height: 100%;
    max-width: 107px;
    margin-right: -4px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.72);
    transition: all 0.3s ease;
}

.btn_language.on {
    color: #debb69;
}

.icon_login {
    display: block;
    width: 55px;
    height: 55px;
    margin: 16px auto;
    border-radius: 50%;
    background: url(../images/hg/icon_login.svg) no-repeat;
    background-size: contain;
}

.box_login {
    width: 100%;
    max-width: 320px;
    margin: 16px auto;
    padding: 24px 16px 16px 16px;
    text-align: center;
    background: #fff;
    /* box-shadow: 0 -1px 20px 0 rgba(0, 0, 0, 0.24); */
}

.lab_input {
    position: relative;
    display: block;
    width: 100%;
    height: 48px;
    margin-bottom: 16px;
}

.input_chgpwd .lab_input {
    margin-bottom: 0;
}

.lab_input > input {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 32px 0 16px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.32);
    color: #000;
    box-shadow: none;
    transition: all 0.3s ease;
    pointer-events: auto;
}

.text_input {
    line-height: normal !important;
    pointer-events: none;
}

.text_input:after {
    content: attr(data-tooltip);
    position: absolute;
    top: 0px;
    left: 14px;
    display: flex;
    height: 100%;
    align-items: center;
    padding: 0 4px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.24);
    background: #fff0;
    transition: all 0.3s ease, background 0.1s 0.1s;
}

.lab_input > input:valid ~ .text_input:after {
    top: -8px;
    height: 16px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.56);
    background: #fff;
}

.lab_input.error > input {
    border: 2px solid #e76565 !important;
}

.lab_input.error > input:valid ~ .text_input:after,
.lab_input.on.error .text_input:after {
    color: #e76565 !important;
}

.text_error {
    display: block;
    width: 100%;
    line-height: 16px;
    margin-bottom: 16px;
    text-align: center;
    font-size: 12px;
    color: #ce3636;
}

.lab_input .btn_clear {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 8px;
    background-image: url(../images/hg/icon_close_b.svg);
    background-repeat: no-repeat;
    background-position: center;
    transition: none !important;
    pointer-events: auto;
    z-index: -1;
}

.lab_input .btn_clear svg {
    width: 100%;
    height: 100%;
    opacity: 0;
    fill: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.btn_login {
    width: 100%;
    height: 48px;
    line-height: 48px;
    margin-bottom: 16px;
    padding: 0 16px;
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    border: none;
    color: #fff;
    background: #19805c;
    transition: background 0.3s ease;
}

.box_remember {
    width: 100%;
    height: 48px;
    line-height: 48px;
    margin-bottom: 11px;
    text-align: left;
}

.lab_radio {
    position: relative;
    float: left;
    display: block;
    color: rgba(0, 0, 0, 0.64);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.check_remember {
    height: 48px;
    margin-right: 8px;
}

.lab_radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 3px;
    vertical-align: middle;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.64);

    background: url('../images/hg/icon_check.svg') no-repeat;
    background-size: contain;
    background-position: -24px;
}

.lab_radio tt {
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.64);
}

.lab_radio input:checked ~ .checkmark {
    border: none !important;
    background-position: 0;
}

.btn_forgot {
    float: right;
    display: block;
    margin-top: 1px;
    text-align: right;
    font-size: 14px;
    color: #0066CC;
    cursor: pointer;
}

.btn_passcode {
    width: 100%;
    height: 48px;
    line-height: 48px;
    margin-bottom: 16px;
    padding: 0 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    color: #fff;
    background: #9b8d79;
    transition: background 0.3s ease;
}

.btn_oldsite {
    width: 100%;
    height: 48px;
    line-height: 48px;
    padding: 0 16px;
    border-radius: 4px;
    font-size: 14px;
    border: none;
    color: #007ba8;
    background: #fff;
    transition: background 0.3s ease;
    /* display: none!important; */
}

.gridContainer.clearfix.login {
    background: none;
}

.gridContainer.clearfix {
    width: 100%;
}

.open_bet,
.open_bet.chg_psw_title {
    background-image: url(../images/hg/bg_all_sport.png);
    background-position: bottom;
}

.box_img {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 16px auto 0 auto;
}

.img_ip {
    position: relative;
    display: block;
    /* display: none; */
    width: 100%;
    padding-bottom: 48.75%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.img_ip.no_ip {
    pointer-events: none;
}

.img_ip span {
    position: absolute;
    display: inline-flex;
    height: 32px;
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
    color: #0499C8;
    align-items: center;
}

.TW .img_ip span,
.CN .img_ip span {
    top: 90px;
    left: 16px;
}

.EN .img_ip span {
    top: 97px;
    left: 16px;
}

.TW .img_ip {
    background-image: url('../images/hg/img_ip_tw.png');
}

.CN .img_ip {
    background-image: url('../images/hg/img_ip_cn.png');
}

.EN .img_ip {
    background-image: url('../images/hg/img_ip_en.jpg');
}

@media screen and  (-webkit-min-device-pixel-ratio: 2) {
    .TW .img_ip {
        background-image: url('../images/hg/img_ip_tw2.png');
    }

    .CN .img_ip {
        background-image: url('../images/hg/img_ip_cn2.png');
    }

    .EN .img_ip {
        background-image: url('../images/hg/img_ip_en2.jpg');
    }
}

.img_festival {
    display: none;
    /* display: block; */
    width: 100%;
    padding-bottom: 40.625%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.TW .img_festival {
    background-image: url('../images/hg/festival_tw.jpg');
}

.CN .img_festival {
    background-image: url('../images/hg/festival_cn.jpg');
}

.EN .img_festival {
    background-image: url('../images/hg/festival_en.jpg');
}


.lab_input.on > input {
    border: 2px solid #19805c;
}

.lab_input.on .text_input:after {
    top: -8px;
    height: 16px;
    font-size: 12px;
    color: #19805c !important;
    background: #fff;
}

.lab_input.error.on > input {
    border: 2px solid #e76565 !important;
}

.lab_input.error.on .text_input:after {
    top: -8px;
    font-size: 12px;
    color: #e76565;
}

.lab_input.on > input:valid ~ .btn_clear {
    z-index: 1;
    cursor: pointer;
}

.lab_input .btn_clear:active {
    z-index: 1;
}

.lab_input .btn_clear {
    z-index: -1;
}

.lab_input.on .icon_status {
    visibility: hidden;
}

.box_browser {
    display: flex;
    width: 100%;
    max-width: 320px;
    margin: 16px auto;
    padding: 16px;
    line-height: 16px;
    font-size: 14px;
    flex-direction: column;
    align-content: center;
    flex: none;
    color: #000;
    background: #fff;
}

.box_browser > span {
    width: 100%;
    font-weight: bold;
}

.box_browser a {
    display: inline-block;
    color: #0066CC;
    cursor: pointer;
}

.wrap_browser {
    display: flex;
    width: 100%;
    margin: 16px 0;
    align-items: center;
    justify-content: center;
}

.btn_browser {
    display: flex;
    width: 64px;
    height: 84px;
    margin-right: 8px;
    line-height: 16px;
    font-size: 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #000;
    cursor: pointer;
}

.btn_browser span {
    font-size: 12px;
}

.btn_browser:last-child {
    margin-right: 0;
}

.btn_browser i {
    width: 56px;
    height: 56px;
    margin-bottom: 4px;
    border-radius: 50%;
    background-position: top center;
    background-size: cover;
}

.icon_chrome {
    background-image: url('../images/hg/icon_chrome.svg');
}

.icon_uc {
    background-image: url('../images/hg/icon_uc.svg');
}

.icon_safari {
    background-image: url('../images/hg/icon_safari.svg');
}

.icon_firefox {
    background-image: url('../images/hg/icon_firefox.svg');
}


/* first_login */
.title_chgpwd {
    display: flex;
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding: 0 8px 0 16px;
    margin-bottom: 16px;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #503f32;
}

.mobile .btn_oldsite {
    display: none !important;
}

.title_chgpwd span {
    display: inline-block;
    font-size: 16px;
}

.btn_help {
    position: absolute;
    top: 0;
    right: 8px;
    display: inline-block;
    width: 32px;
    height: 32px;
    padding: 8px;
    margin: 12px 0;
}

.btn_help svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #fff;
    opacity: 0.64;
}

.content_chgpwd {
    margin: 0 auto;
    padding: 0 16px 16px 16px;
}

@media screen and (min-width: 1024px) {
    .title_chgpwd {
        margin-bottom: 32px;
    }

    .first_login_help {
        margin-bottom: 16px;
    }

    .content_chgpwd {
        width: 100%;
        max-width: 650px;
        padding: 0 0 16px 0;
    }
}

.content_chgpwd .text_user {
    display: block;
    line-height: 16px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #000;
}

.content_chgpwd .text_user b {
    font-weight: bold;
}

.content_chgpwd .text_sub,
.content_chgpwd .text_normal {
    font-size: 14px;
    color: #000;
}

.content_chgpwd .text_sub {
    display: flex;
    min-height: 16px;
    line-height: 16px;
    align-items: center;
}

.content_chgpwd.forpwd .text_sub {
    margin: 16px 0 24px 0;
}

.content_chgpwd.forpwd .text_normal {
    margin: 0 0 24px 0;
}

.forpwd .text_sub.text_sub_st4 {
    margin: 0 0 16px 0;
}

.forpwd_help .text_normal {
    margin: 0 0 16px 0;
}

.content_chgpwd .text_sub ~ .text_sub {
    /* margin-top: 8px; */
}

.input_chgpwd {
    display: flex;
    margin-top: 24px;
    align-items: center;
    justify-content: space-between;
}

.input_chgpwd .lab_login {
    margin-bottom: 0;
    flex: 1 1 auto;
}

.icon_status {
    position: absolute;
    top: 0px;
    right: 87px;
    display: block;
    width: 40px;
    height: 100%;
    background: url('../images/hg/icon_allow.svg') no-repeat center left;
    z-index: 1;
}

.icon_status.error {
    display: block !important;
    visibility: visible !important;
    background: url('../images/hg/icon_disallow.svg') no-repeat center left;
}

.btn_choose {
    width: 79px;
    height: 48px;
    line-height: 48px;
    margin-left: 8px;
    flex: 0 0 79px;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #19805c;
    cursor: pointer;
}

.btn_choose.unable {
    background: rgba(0, 0, 0, 0.24);
    pointer-events: none;
}

.tip_chgpwd {
    width: 100%;
    margin-top: 16px;
    padding: 16px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.64);
    background: #ededed;
}

.forpwd .tip_chgpwd {
    margin: 0 0 16px 0;
}

.tip_chgpwd b,
.tip_forpwd b {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.text_msg {
    display: block;
    width: 100%;
    line-height: 16px;
    margin-top: 16px;
    text-align: center;
    font-size: 12px;
    color: #19805c;
}

.text_msg.error {
    color: #ce3636;
}

.btn_chgpwd {
    display: flex;
    width: 100%;
    margin-top: 16px;
    align-items: center;
    justify-content: space-between;
}

.btn_chgpwd > div {
    display: inline-block;
    width: 50%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    flex: 1 1 auto;
}

.btn_chgpwd > div ~ div {
    margin-left: 16px;
}

.btn_cancel {
    color: #fff;
    background: #7a7a7a;
}

.btn_chgpwd .btn_submit,
.box_help_btn .btn_submit {
    color: #fff;
    background: #19805c;
}

.btn_sendcode {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    color: #fff;
    background: #9b8d79;
}

/* Change the password */
.chg_psw_title {
    width: 100%;
    height: 48px;
    background: #503F32;
    line-height: 48px;
    text-align: center;
}

.chg_psw_title.no_login {
    color: #fff;
}

.chg_psw_title i {
    display: block;
    position: absolute;
    width: 32px;
    height: 32px;
    line-height: 32px;
    background-position: center;
    background-repeat: no-repeat;
    margin: 8px;
    padding: 8px;
}

.noteBox {
    margin-bottom: 24px;
}

.noteBox1 {
    display: block;
    width: 100%;
    line-height: 20px;
    color: #000;
    font-size: 14px;
    margin-bottom: 8px;
}

.EN .noteBox1 {
    margin-bottom: 1rem;
}

.noteBox2 {
    display: block;
    width: 100%;
    line-height: 20px;
    color: #000;
    font-size: 14px;
}

.noteBox2 li {
    list-style-type: decimal;
    margin-left: 1rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
}

.noteBox2 li:last-child {
    margin-bottom: 0;
}

.btn_cancel {
    display: block;
    width: 100%;
    height: 48px;
    line-height: 48px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    background-color: #7a7a7a;
    color: #fff;
    transition: background 0.3s ease;
}


/* Help set mail */

.deepGrayBtn {
    color: #fff;
    display: block;
    width: 100%;
    height: 48px;
    line-height: 48px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    -webkit-box-flex: 1;
    background: #19805c;
}


.betSubmitBtn.error,
.deepGrayBtn.error {
    background: rgba(0, 0, 0, 0.24);
}


.forpwd_help li {
    margin: 16px 0 16px 16px;
    margin-bottom: 16px;
    list-style: decimal;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.64);
}

.forpwd_help li:first-child {
    margin-top: 0px;
}

.img_chgpwd {
    width: 100%;
    height: 584px;
    margin-top: 16px;
    background-repeat: no-repeat;
    background-position: center center;
}

.TW .img_chgpwd1 {
    background-image: url(../images/hg/img_chgid_1_tw.png);
}

.TW .img_chgpwd2 {
    background-image: url(../images/hg/img_chgid_2_tw.png);
}

.TW .img_chgpwd3 {
    background-image: url(../images/hg/img_chgid_3_tw.png);
}

.TW .img_chgpwd4 {
    background-image: url(../images/hg/img_chgid_1_tw.png);
}

.CN .img_chgpwd1 {
    background-image: url(../images/hg/img_chgid_1_tw.png);
}

.CN .img_chgpwd2 {
    background-image: url(../images/hg/img_chgid_2_tw.png);
}

.CN .img_chgpwd3 {
    background-image: url(../images/hg/img_chgid_3_tw.png);
}

.CN .img_chgpwd4 {
    background-image: url(../images/hg/img_chgid_1_tw.png);
}

.EN .img_chgpwd1 {
    background-image: url(../images/hg/img_chgid_1_en.png);
}

.EN .img_chgpwd2 {
    background-image: url(../images/hg/img_chgid_2_en.png);
}

.EN .img_chgpwd3 {
    background-image: url(../images/hg/img_chgid_3_en.png);
}

.EN .img_chgpwd4 {
    background-image: url(../images/hg/img_chgid_1_en.png);
}

.title_chgpwd .btn_close {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    margin-top: 4px;
    padding: 8px;
}

.title_chgpwd .btn_close i {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 8px;
    background-image: url(../images/hg/icon_close.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
    opacity: 0.56;
}

.title_chgpwd .btn_close svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #fff;
}

.help_pwd {
    width: 100%;
}

.title_help {
    display: flex;
    width: 100%;
    height: 48px;
    align-items: center;
    flex: none;
    background-image: url('../images/hg/bg_op_league.jpg');
    background-position: bottom;
    background-color: #e1dbd8;
}

.title_help .btn_back {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 8px;
    flex: 0 0 32px;
    transition: background 0.3s ease;
}

.title_help .btn_back i {
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px;
}

.btn_back svg {
    fill: rgba(0, 0, 0, 0.64);
}

.title_help span {
    display: inline-block;
    width: calc(100% - 96px);
    height: 24px;
    line-height: 24px;
    padding: 0 4px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    flex: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000;
}

.box_help_pwd {
    width: 100%;
}

.text_help_pwd {
    width: 100%;
    line-height: 16px;
    margin-bottom: 24px;
    padding: 0 16px;
    font-size: 14px;
    color: #000;
}

.box_help_input {
    width: 100%;
    padding: 0 16px;
}

.box_help_pwd .text_error {
    display: block;
}

.box_help_btn {
    display: flex;
    width: 100%;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
}

.box_help_btn + .box_help_btn {
    margin-top: 16px;
}

.box_help_pwd .btn_cancel,
.box_help_pwd .btn_next,
.box_help_pwd .btn_submit,
.box_help_pwd .btn_safecode {
    display: inline-block;
    width: 100%;
    height: 48px;
    line-height: 48px;
    flex: 1 1 auto;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    color: #fff;
}

.btn_cancel {
    background: #7a7a7a;
}

.btn_next {
    background: #19805c;
}

.btn_safecode {
    background: #9b8d79;
}

@media screen and (min-width: 1024px) {
    .box_help_pwd {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    .box_pwd_mail {
        padding: 0;
    }

    .box_help_note {
        margin: 16px 0;
    }

    .box_help_pwd .text_help_pwd {
        padding: 0;
    }

    .box_help_pwd .box_help_input {
        padding: 0;
    }

    .box_help_pwd .box_help_btn {
        padding: 0;
    }
}


/* help_pwd02 */
.box_pwd_mail {
    display: flex;
    width: 100%;
    height: 48px;
    margin-bottom: 16px;
    padding: 0 8px 0 16px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #e6e6e6;
}

.box_pwd_mail span {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    color: #000;
}

.box_pwd_mail .btn_edit,
.box_pwd_mail .btn_delet {
    display: block;
    width: 32px;
    height: 32px;
    padding: 8px;
    flex: none;
}

.box_pwd_mail .btn_delet {
    margin-left: 8px;
}

.box_pwd_mail .btn_edit svg,
.box_pwd_mail .btn_delet svg {
    width: 100%;
    height: 100%;
    fill: rgba(0, 0, 0, 0.56);
}


.box_help_note {
    width: auto;
    margin: 16px;
    padding: 16px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.64);
    background: #ededed;
}

.box_help_note span {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
}

.help_pwd04 .text_help_pwd {
    margin: 16px 0;
}


.msg_help_pwd {
    position: fixed;
    bottom: 16px;
    width: 100%;
    padding: 0 16px;
}

.msg_help_pwd .box_msg {
    display: flex;
    width: 100%;
    height: 64px;
    padding: 0 0 0 16px;
    font-size: 12px;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(0, 0, 0, 0.72);
}

.msg_help_pwd .box_msg span {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    text-align: left;
}

.msg_help_pwd .btn_msg {
    width: 48px;
    height: 48px;
    line-height: 48px;
    margin-left: 24px;
}

.lab_input .btn_delet {
    display: none;
}

.input_safecode {
    text-transform: uppercase;
}

/* 1st login set user id */
.chgid_input {
    position: relative;
}

.chgid_input .error ~ .error .btn_clear {
    display: none !important;
}

.chgid_input input::selection,
.chgid_input input::-moz-selection {
    color: #fff;
    background: #449bf9;
}

.chgid_input .lab_input > input {
    padding: 0 40px 0 16px;
}


/* System Requirements */
.title_sys {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 48px;
    line-height: 48px;
    padding: 0 8px 0 16px;
    margin-bottom: 32px;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #503f32;
}

.title_sys span {
    font-size: 16px;
}

.title_sys .btn_back {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 8px;
    flex: 0 0 32px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.title_sys .btn_back i {
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px;
    transform: rotate(180deg);
}

.title_sys .btn_back svg {
    fill: #fff;
}

.content_sys {
    width: 100%;
    padding-top: 80px;
    padding-bottom: 32px;
    flex: none;
}

.box_l .content_sys {
    max-width: unset;
    padding-top: 0;
    transform: translate3d(0, 0, 0);
    will-change: opacity;
}

.content_sys .title_help {
    margin-bottom: 32px;
}

.box_sys {
    max-width: 650px;
    margin: 0 auto;
}

@media screen and (max-width: 1023px) {
    .box_sys {
        padding: 0 16px;
    }
}

.text_sys {
    display: block;
    line-height: 16px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #000;
}

.subtitle_sys {
    display: block;
    margin-bottom: 16px;
    line-height: 16px;
    font-size: 14px;
    font-weight: bold;
    color: #000;
}

.table_sys {
    width: 100%;
    margin-bottom: 16px;
    font-size: 14px;
    table-layout: fixed;
    border-collapse: collapse;
}

.table_sys tr {
    padding: 0 8px;
}

.table_sys tr {
    border-bottom: #e6e6e6 solid 1px;
}

.table_sys tr.table_sys_title,
.table_sys tr:last-child {
    border-bottom: none;
}

.table_sys tr.table_sys_title {
    background: #ededed;
}

.table_sys th {
    height: 32px;
    padding: 0 8px;
    line-height: 16px;
    font-size: 14px;
    text-align: left;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.72);
}

.table_sys td {
    height: 48px;
    padding: 0 8px;
    line-height: 16px;
    color: #000;
}

.table_sys a {
    color: #0066CC;
    cursor: pointer;
}

.box_sys p {
    font-size: 14px;
    font-weight: 400;
    color: #000;
}

.btn_sys {
    display: flex;
    width: 288px;
    height: 48px;
    margin: 32px auto 0 auto;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #525252;
    border: #525252 solid 1px;
    background: #fff;
    cursor: pointer;
}


/* PC hover effect */
@media (pointer: fine) and (max-resolution: 2dppx), screen and (pointer: fine) and (-webkit-max-device-pixel-ratio: 2),
(-moz-touch-enabled: 0), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .lab_input > input:hover {
        border-color: #33997a;
    }

    .lab_input.on > input:hover ~ .text_input:after {
        color: #33997a;
    }

    .btn_passcode:hover {
        background: #aaa192;
    }

    .btn_browser:hover i {
        background-position: bottom center;
    }

    .box_browser a:hover {
        color: #0070E0;
    }

    .btn_forgot:hover {
        color: #0070E0;
    }

    /* first_login */
    .btn_language:hover {
        color: #debb69;
    }

    .btn_login:hover,
    .btn_choose:hover,
    .btn_chgpwd .btn_submit:hover,
    .box_help_btn .btn_submit:hover {
        background: #379e7a;
    }

    .btn_cancel:hover {
        background: #8f8f8f;
    }

    .btn_help:hover svg {
        fill: #fff;
    }

    .lab_radio:hover .checkmark {
        border: 1px solid #19805c;
    }

    /* Help set mail */
    .betSubmitBtn:hover {
        background: #379e7a;
    }

    .deepGrayBtn:hover {
        background: #379e7a;
    }

    .cancleBtn:hover {
        background: #8f8f8f;
    }

    .btn_sendcode:hover {
        background: #aca190;
    }

    .pswPopBtnBox3 > div:hover {
        background: #5c5c5c;
    }

    .btn_edit:hover svg,
    .btn_delet:hover svg {
        fill: #000;
    }

    .btn_cancel:hover {
        background: #8f8f8f;
    }

    .btn_next:hover {
        background: #20a275;
    }

    .title_chgpwd .btn_close:hover i {
        opacity: 1;
    }

    /* System Requirements */
    .btn_sys:hover {
        background: rgba(0, 0, 0, 0.04);
    }

    .table_sys a:hover {
        color: #0070E0;
    }
}

/* All active effect */
.btn_language:active {
    color: #debb69;
    background: #433429;
}

.btn_login:active,
.btn_choose:active,
.btn_chgpwd .btn_submit:active,
.box_help_btn .btn_submit:active {
    background: #056b48;
}

.btn_forgot:active {
    color: #0052A3;
}

.btn_passcode:active {
    background: #867864;
}

.btn_browser:active i {
    background-position: bottom center;
}

.btn_browser:active {
    background: rgba(0, 0, 0, 0.08);
}

.box_browser a:active {
    color: #0052A3;
}

/* first_login */
.btn_cancel:active {
    background: #666;
}

.btn_help:active,
.title_chgpwd .btn_close:active i {
    opacity: 1;
    background-color: #3c2f26;
}

.btn_help:active svg {
    fill: #fff;
}

/* Help set mail */
.betSubmitBtn:active {
    background: #056b48;
}

.deepGrayBtn:active {
    background: #056b48;
}

.cancleBtn:active {
    background: #666666;
}

.btn_sendcode:active {
    background: #867864;
}

.pswPopBtnBox3 > div:active {
    background: #333333;
}

.btn_edit:active,
.btn_delet:active {
    background: rgba(0, 0, 0, 0.08);
}

.btn_edit:active svg,
.btn_delet:active svg {
    fill: #000;
}

.btn_cancel:active {
    background: #666;
}

.btn_next:active {
    background: #125e43;
}

/* Change the password */
.chg_psw_title i:active {
    background-color: rgba(0, 0, 0, 0.08);
    background-image: url(../images/hg/icon_backbtn.svg);
    background-position: center;
    background-repeat: no-repeat;
}

/* help_pwd02 */
.btn_back:active {
    background: rgba(0, 0, 0, 0.08);
}

/* System Requirements */
.table_sys a:active {
    color: #0052A3;
}

.btn_sys:active {
    background: rgba(0, 0, 0, 0.08);
}

.uppercase {
    text-transform: uppercase;
}