@charset "UTF-8";

html body,
* {
    font-family: "Noto Sans TC", Arial, Helvetica, sans-serif;
    font-size: 16px;
}

p {
    margin: 0;
}

body {
    background: url("/imgs/Common/BG.png");
    background-size: cover;
    overflow: hidden;
    overflow-y: auto;
    height: 100vh;
}

body.ssoContract {
    background: #f5f5f5;
}

body main {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body.ssoContract main {
    height: auto;
    min-height: 100vh;
}
button {
    background-color: transparent;
    border: none;
    outline: unset;
    cursor: pointer;
}

button.outline {
    border-radius: 1rem;
    border: 2px solid var(--l-brand-03, #22bda4);
    background: var(--g-white, #fff);
    color: var(--l-brand-03, #22bda4);
    /* Medium/18 */
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    /* 133.333% */
}

button.fill {
    border-radius: 1rem;
    background: var(--l-brand-03, #22bda4);
    color: var(--g-white, #fff);
    /* Medium/18 */
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    /* 133.333% */
}

button.disable {
    color: var(--g-200, #b0bfc5);
    /* Medium/16 */
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    /* 150% */
    border-radius: 1rem;
    background: var(--g-50, #edeff1);
}

.btn-h-group {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    gap: 1.5rem;
}

.btn-h-group > button {
    -ms-flex: 1;
    flex: 1;
}

a {
    margin: 0 auto;
    text-decoration: unset;
}

a.fill {
    display: -ms-flexbox;
    display: flex;
    height: 3.25rem;
    padding: 0.9375rem 1.5rem;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 1rem;
    background: var(--l-brand-03, #22bda4);
    color: var(--g-white, #fff);
    /* Medium/18 */
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    /* 133.333% */
}

*::-webkit-scrollbar {
    width: 0.325rem;
}

*::-webkit-scrollbar-track {
    background-color: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 0.325rem;
}

/*hover的時候scroll bar才顯示*/
*:hover::-webkit-scrollbar-thumb {
    background-color: #edeff1;
    border-radius: 0.325rem;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

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

.form-control:focus {
    border: 2px solid var(--l-brand-02, #027ba1);
    background: var(--g-white, #fff);
    box-shadow: 0px 0px 0px 2px rgba(2, 123, 161, 0.2);
}

.form-control.error:focus {
    border: 2px solid var(--Alert, #fd3363);
    background: var(--g-white, #fff);
    box-shadow: 0px 0px 0px 2px rgba(253, 51, 99, 0.2);
}

.container {
    overflow: hidden;
    overflow-y: auto;
    padding: 1rem;
    height: 100dvh;
    border-radius: 0rem 0rem 2rem 2rem;
    background: var(--g-white, #fff);
    /* Drop Shadow */
    box-shadow: 0px 0px 80px 4px rgba(0, 0, 0, 0.04);
}

.container .login-container,
.container .login-container form {
    display: -ms-flexbox;
    display: flex;
    gap: 1.5rem;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
}

.container .login-container .container-actions {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: absolute;
    /* margin: 0 -1.5rem; */
}
.container .login-container .container-actions a {
    margin: unset;
}

.container .login-container .container-actions button > i {
    color: #78919d;
    font-size: 1.75rem;
}

.container .login-container .container-actions a > i {
    color: #78919d;
    font-size: 1.75rem;
}

.container .login-container .login-title {
    color: var(--L-Brand05, #28465e);
    text-align: center;
    /* Bold/18 */
    font-family: "Noto Sans TC";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 133.333% */
}

.container .login-container .inputs {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

.container .login-container .inputs > .button-groups {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    padding: 0.38rem;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.25rem;
    border-radius: 3rem;
    background: #f9fafb;
}

.container .login-container .inputs > .button-groups button {
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    color: #78919d;
    padding: 0.5rem 1rem;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    /* Medium/14 */
    font-family: Noto Sans TC;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    /* 142.857% */
    border-radius: 2rem;
}

.container .login-container .inputs > .button-groups button.active {
    color: #ffffff;
    background: var(--l-brand-02, #027ba1);
}

.container .login-container .inputs > .third-login-buttons {
    display: -ms-flexbox;
    display: flex;
    gap: 1.5rem;
    -ms-flex-pack: center;
    justify-content: center;
}

.container .login-container .inputs > .third-login-buttons > button {
    background: #ffffff;
    width: 2.38rem;
    height: 2.38rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 2.5rem;
    border: 1px solid #edeff1;
}

.container .login-container .submit-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
}

.container .login-container .submit-container > p {
    color: #78919d;
    text-align: center;
    /* Regular/14 */
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    /* 142.857% */
}

.container .login-container .submit-container > p > a {
    color: #027ba1;
    text-decoration: unset;
    /* Medium/14 */
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
}

.container .login-container .circle {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    background: #ffeef2;
    border-radius: 100%;
    width: 64px;
    height: 64px;
}

.container .login-container .circle > i {
    color: #fd3363;
    /* font-size: 3rem; */
    font-size: 32px;
}

.container .login-container .description {
    color: var(--G-700, #445b63);
    /* Regular/14 */
    font-family: "Noto Sans TC";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem; /* 142.857% */
}

select.form-select {
    background-image: url("/imgs/Common/Icons/ArrowDownFill.png"), var(--bs-form-select-bg-icon, none);
    background-size: 0.75013rem 0.5625rem;
}

.input-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.5rem;
}

.input-container label {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: hidden;
    color: #445b63;
    text-overflow: ellipsis;
    /* Medium/14 */
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25rem;
    /* 142.857% */
}

.input-container label > a {
    text-decoration: unset;
    overflow: hidden;
    color: var(--L-Brand02, #027ba1);
    text-overflow: ellipsis;
    /* Medium/14 */
    font-family: "Noto Sans TC";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    /* 150% */
}
.input-container label > a.f-r {
    margin-right: 0;
}
.input-container input {
    padding: 0.94rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid var(--g-50, #edeff1);
    background: var(--g-white, #fff);
    height: 3rem;
    /* Regular/16 */
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
}

.input-container input::placeholder {
    /* CSS 3 標準 */
    color: #b0bfc5;
    /* Regular/16 */
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
}

.input-container input::-webkit-input-placeholder {
    /* Chrome, Safari */
    color: #b0bfc5;
    /* Regular/16 */
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
}

.input-container input:-ms-input-placeholder {
    /* IE 10+ */
    color: #b0bfc5;
    /* Regular/16 */
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
}

.input-container input::-moz-placeholder {
    /* Firefox 19+ */
    color: #b0bfc5;
    opacity: 1;
    /* Regular/16 */
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
}

.input-container input.error {
    border: 2px solid #fd3363;
}

.input-container select {
    padding: 0.9375rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid #edeff1;
    width: 6.75rem;
    color: #344049;
    height: 3rem;
    /* Regular/16 */
    font-family: "Noto Sans TC";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
}

.input-container select.error {
    border: 2px solid #fd3363;
}

.input-container .input-validation {
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
}

.input-container .input-validation > input {
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    height: 48px;
}

.input-container .input-with-btn {
    position: relative;
}

.input-container .input-with-btn button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
}

.input-container .input-with-select {
    display: -ms-flexbox;
    display: flex;
    gap: 0.75rem;
}

.input-container .input-with-select > select {
    width: 6.75rem;
}

.input-container .input-with-select > input {
    -ms-flex: 1;
    flex: 1;
}

.input-container .error-msg {
    overflow: hidden;
    color: #fd3363;
    text-overflow: ellipsis;
    /* Regular/14 */
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    /* 142.857% */
}
.input-container .error-msg.show {
    display: block;
}
.input-container .error-msg.hide {
    display: none;
}
.submit-button-groups {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    gap: 1.5rem;
}

.submit-button-groups > button {
    -ms-flex: 1;
    flex: 1;
}

.submit-button {
    display: -ms-flexbox;
    display: flex;
    padding: 0.625rem 1.25rem;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    border-radius: 1rem;
    /* Medium/16 */
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    /* 150% */
}

.submit-button.disable {
    cursor: not-allowed;
    background: #edeff1;
    color: #b0bfc5;
}

.submit-button.active {
    background: #22bda4;
    color: #ffffff;
}

.submit-button.outline.active {
    border-radius: 1rem;
    border: 2px solid #22bda4;
    background: #ffffff;
    color: #22bda4;
}

.sso-footer {
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0.75rem 0;
    height: 3rem;
    width: 17.8rem;
    margin: 0 auto;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
}
.sso-footer > div {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.sso-footer div img {
    object-fit: contain;
    max-width: 100%;
    height: auto;
}

.info {
    border-radius: 1rem;
    background: var(--bg-01, #f0fcff);
    color: var(--g-700, #445b63);
    display: -ms-flexbox;
    display: flex;
    padding: 1rem;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    text-align: center;
    /* Regular/20 */
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
    /* 140% */
}
/* 通知的toast */
.notification {
    top: 2.5rem;
    display: block;
    position: fixed;
    display: -ms-flexbox;
    display: flex;
    width: 28.125rem;
    padding: 1.5rem;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 16px;
    border: 2px solid var(--G-400, #78919d);
    background: var(--G-White, #fff);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--g-50, #edeff1);
    /* Regular/16 */
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    /* 150% */
}

.notification.hide {
    transition: 600ms;
    transform: translateY(-100%);
    top: 0rem;
}
.notification.success {
    border: 2px solid var(--L-Brand03, #22bda4);
    background: var(--BG-01, #f0fcff);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}
.notification.error {
    border: 2px solid var(--Error, #fd3363);
    background: var(--Error-BG, #ffeef2);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}
.notification.warning {
    border: 2px solid #ffc700;
    background: var(--Alert-BG, #fffef0);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}
.notification .notification-title {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: var(--G-900, #273139);
    /* Bold/18 */
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 133.333% */
}

.notification > .description {
    color: var(--G-700, #445b63);
    /* Regular/16 */
    font-family: "Noto Sans TC";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.notification .notification-title i::before {
    color: var(--G-700, #445b63);
}

#register-tab,
#login-tab {
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#sso-error .img-wrap {
    padding: 2rem 0.6rem;
    margin: 0 auto;
    max-width: 15rem;
}

#sso-error .login-title {
    margin-bottom: -0.5rem;
}

#sso-error .login-container {
    -ms-flex-pack: start;
    justify-content: start;
}

#sso-error .description {
    text-align: center;
}

@media screen and (min-width: 575px) {
    #sso-error .login-container {
        -ms-flex-pack: center;
        justify-content: center;
    }
    .container .login-container .container-actions {
        position: relative;
    }
}

@media screen and (min-width: 575px) {
    html body,
    * {
        font-family: Noto Sans TC, Arial, Helvetica, sans-serif;
        font-size: 16px;
    }

    .container {
        border-radius: 2rem;
        margin-top: 4rem;
        background: #ffffff;
        width: 35rem;
        height: 45rem;
        padding: 2rem 3rem;
    }

    .sso-footer {
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0;
        height: 3rem;
        width: 27.7rem;
        overflow: hidden;
        display: -ms-flexbox;
        display: flex;
        gap: 1rem;
        margin: 0 auto;
    }
    .sso-footer > div {
        flex: 1;
        overflow: hidden;
        padding: 0.5rem 0;
    }

    .container .login-container .circle {
        width: 96px;
        height: 96px;
    }
    .container .login-container .circle > i {
        font-size: 48px;
    }
    .input-container input {
        height: 3.25rem;
        /* Regular/18 */
        font-family: "Noto Sans TC";
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5rem; /* 133.333% */
    }
    .input-container input::placeholder {
        /* Regular/18 */
        font-family: "Noto Sans TC";
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 400;
    }

    .input-container input::-webkit-input-placeholder {
        /* Regular/18 */
        font-family: "Noto Sans TC";
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 400;
    }

    .input-container input:-ms-input-placeholder {
        /* Regular/18 */
        font-family: "Noto Sans TC";
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 400;
    }

    .input-container input::-moz-placeholder {
        /* Regular/18 */
        font-family: "Noto Sans TC";
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 400;
    }
    .input-container label {
        /* Medium/16 */
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px; /* 150% */
    }
    .input-container label > a {
        /* Medium/16 */
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px; /* 150% */
    }

    .input-container .input-validation {
        display: -ms-flexbox;
        display: flex;
        gap: 24px;
    }

    .input-container .input-validation > input {
        -ms-flex: 1;
        flex: 1;
        height: 52px;
        text-align: center;
    }

    .input-container select {
        padding: 0.94rem 1rem;
        height: 3.25rem;
        /* Regular/18 */
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1rem; /* 133.333% */
    }

    .container .login-container .login-title {
        color: var(--L-Brand05, #28465e);
        text-align: center;
        /* Bold/24 */
        font-family: "Noto Sans TC";
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 700;
        line-height: 2rem; /* 133.333% */
    }

    .container .login-container .description {
        color: #445b63;
        /* Regular/16 */
        font-size: 1rem;
        font-style: normal;
        font-weight: 500;
        line-height: 1.5rem;
        /* 150% */
    }
}

@media screen and (min-width: 1281px) {
    html body,
    * {
        font-family: "Noto Sans TC", Arial, Helvetica, sans-serif;
        font-size: 16px;
    }
}

/*條款頁相關*/
#ssoContract .container {
    padding-top: 0;
    margin: 0;
    width: 100%;
    height: calc(100dvh - 3rem);
    max-width: unset;
    border-radius: 0;
}
.nav.nav-underline {
    position: sticky;
    top: -1px;
    display: flex;
    padding: 0rem 0.75rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    background: #ffffff;
}

.nav.nav-underline li.nav-item {
    flex: 1;
    text-align: center;
}

.nav.nav-underline li.nav-item .nav-link {
    color: var(--G-200, #b0bfc5);
    padding: 0.625rem 1.25rem;
    /* Regular/16 */
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; /* 150% */
}

.nav.nav-underline li.nav-item .nav-link.active {
    color: var(--L-Brand03, #22bda4);
}
#contract-tab,
#privacy-tab,
#commercial-tab {
    padding: 1.5rem 1rem;
}
@media screen and (min-width: 1281px) {
    #ssoContract .container {
        padding: 0 15rem;
    }
    .nav.nav-underline {
        justify-content: unset;
        padding-top: 5rem;
    }
    .nav.nav-underline li.nav-item {
        flex: unset;
        text-align: center;
    }
    .nav.nav-underline li.nav-item .nav-link {
        padding: 0.75rem 1.5rem 1rem 1.5rem;
        /* Medium/20 */
        font-family: "Noto Sans TC";
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 500;
        line-height: 1.75rem; /* 140% */
    }
}
/*條款頁相關 end*/

/* 新版服務條款、隱私權政策、聯絡我們頁面 start*/
.contract-container {
    display: flex;
    width: 100%;
    height: 100vh;
    background: #fff;
}

.contract-left {
    width: 512px;
    height: 100vh;
    background-image: url('/imgs/Common/NewBG.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.contract-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
}

.contract-content {
    width: 100%;
    padding-left: 48px;
    padding-right: 80px;
}

.threeAreas-container {
    width: 100%;
}

.threeAreas-container .content-title-container {
    font-size: 1.25rem;
    font-weight: 500;
    color: #223E48;
    margin-bottom: 2rem;
    padding: 2rem 0.5rem 1.25rem 0rem;
    line-height: 1.75rem;
    font-family: "Noto Sans TC";
    height: 6.25rem;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
}
.threeAreas-container .content-title-container .content-title{
    color: #223E48;
    font-family: "Noto Sans TC";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 3rem;
    height: 3rem;
}
.threeAreas-container .nav.nav-underline {
    position: sticky;
    top: 6.25rem;
    background: #fff;
    z-index: 10;
    gap: 1.25rem;
    padding: 0rem 1.25rem;
}
.threeAreas-container .nav.nav-underline li.nav-item .nav-link{
    font-family: "Noto Sans TC";
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.375rem;
    padding: 0.5rem 0.5rem 0.625rem 0.5rem;
    text-align: center;
}
.threeAreas-container .nav.nav-underline li.nav-item .nav-link.active,
.threeAreas-container .nav.nav-underline li.nav-item .nav-link:hover{
    color: #28465E;
}

.threeAreas-container .nav-underline .nav-link.active{
    border-bottom-color: #28465E;
}

.threeAreas-container .content {
    color: #28465E;
    line-height: 1.8;
}

.threeAreas-container .nav.nav-underline{
    border-bottom: 1px solid #B0BFC5;
}








@media screen and (min-width: 1025px) {
    .contract-left {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1;
    }
    
    .contract-right {
        margin-left: 512px;
    }
    
    .threeAreas-container .content-title-container {
        margin-bottom: 0;
        padding-bottom: 1.25rem;
    }
    
    .threeAreas-container .nav.nav-underline {
        padding-top: unset;
    }
}

.threeAreas-container .content {
    color: #223E48;
    font-family: "Noto Sans TC";
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
}

.threeAreas-container .content h5 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #28465E;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.threeAreas-container .content ol {
    padding-left: 1.5rem;
}

.threeAreas-container .content ol li {
    margin-bottom: 0.5rem;
}

@media screen and (max-width: 1024px) {
    .contract-container {
        min-height: 100vh;
        background-image: url('/imgs/Common/NewBG_M.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .contract-left {
        display: none;
    }
    
    .contract-right {
        height: auto;
        min-height: 100vh;
    }
    
    .contract-content {
        padding: 1.5rem 1.25rem;
    }
    
    .threeAreas-container .content-title-container {
        text-align: center;
        top: 0;
        background: none;
        margin-bottom: 0;
        height: fit-content;
        padding: 0;
        position: static;
    }
    
    .threeAreas-container .nav.nav-underline {
        top: 5rem;
        padding: unset;
        position: static;
    }
    
    .threeAreas-container .nav.nav-underline li.nav-item {
        text-align: left;
    }
    .threeAreas-container .nav.nav-underline{
        background: none;
    }
    .threeAreas-container .nav.nav-underline li.nav-item .nav-link{
        padding:0.5rem 0.5rem 0.625rem 0.5rem;
    }
}
/* 新版服務條款、隱私權政策、聯絡我們頁面 end */