@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap");
@import 'reset.css';
.cookie-confirm {
    background-color: #D8D8D8;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}
.cookie-confirm .cc-btn-close {
    position: absolute;
    top: 5px;
    right: 20px;
}
.cookie-confirm .cc-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
}
.cookie-confirm .cc-wrap .cc-txt {
    color: #454545;
}
.cookie-confirm .cc-wrap .cc-link {
    font-size: inherit;
    color: #004DA1;
    text-decoration: underline;
    display: block;
}
.cookie-confirm .cc-wrap .cc-btn {
    width: 80px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #fff;
    background-color: #fb7400;
    margin-right: 30px;
    border-radius: 8px;
    flex-shrink: 0;
    text-decoration: none;
    transition: all 0.3s;
}

@media screen and (min-width: 769px) {
    .cookie-confirm .cc-wrap {
        width: 90%;
        margin: 0 auto;
    }
    .cookie-confirm .cc-wrap .cc-txt {
        line-height: 26px;
    }
    .cookie-confirm .cc-wrap .cc-btn:hover {
        filter: brightness(1.2);
        transition: 0.3s linear;
    }
}
@media screen and (max-width: 768px) {
    .cookie-confirm .cc-wrap .cc-txt {
        font-size: 14px;
        line-height: 22px;
    }
}
.CM-lh-1 {
    line-height: 1.2 !important;
}

.CM-lh-2 {
    line-height: 1.4 !important;
}

.CM-lh-3 {
    line-height: 1.6 !important;
}

.CM-fz-xl {
    font-size: 20px !important;
}

.CM-fz-l {
    font-size: 18px !important;
}

.CM-fz-m {
    font-size: 16px !important;
}

.CM-fz-s {
    font-size: 14px !important;
}

.CM-blank-05 {
    width: 100%;
    height: 5px;
}

.CM-blank-1 {
    width: 100%;
    height: 10px;
}

.CM-blank-15 {
    width: 100%;
    height: 15px;
}

.CM-blank-2 {
    width: 100%;
    height: 20px;
}

.CM-blank-3 {
    width: 100%;
    height: 30px;
}

.CM-gray-hr {
    border-bottom: 1px solid #dcdcdc;
    height: 1px;
    width: 100%;
}

.CM-notice {
    line-height: 1.4;
}
.CM-notice ol {
    margin-left: 20px;
}
.CM-notice ol li {
    list-style-type: decimal;
}
.CM-notice ul {
    margin-left: 20px;
}
.CM-notice ul li {
    list-style-type: disc;
}
@media screen and (max-width: 768px) {
    .CM-notice {
        font-size: 14px;
    }
}

.CM-text-primary {
    color: #1e1e1e !important;
}

.CM-text-sec {
    color: #666 !important;
}

.CM-text-accent {
    color: #808080 !important;
}

.CM-text-red {
    color: #F55431 !important;
}

.CM-text-orange {
    color: #fb7400 !important;
}

.CM-text-green {
    color: #82B500 !important;
}

.CM-text-blue {
    color: #0071B8 !important;
}

.CM-link {
    color: #0071B8;
    font-size: 14px;
    line-height: 14px;
}
.CM-link.link-black {
    color: #1e1e1e;
}
.CM-link.nl {
    text-decoration: none;
}
.CM-link.nl:hover {
    text-decoration: underline;
}

.CM-text-l {
    text-align: left !important;
}

.CM-text-c {
    text-align: center !important;
}

.CM-text-r {
    text-align: right !important;
}

.CM-flex {
    display: flex;
}

.jc-s {
    justify-content: start;
}

.jc-c {
    justify-content: center;
}

.jc-e {
    justify-content: end;
}

.jc-sa {
    justify-content: space-around;
}

.jc-sb {
    justify-content: space-between;
}

.jc-se {
    justify-content: space-evenly;
}

.ai-s {
    align-items: start;
}

.ai-c {
    align-items: center;
}

.ai-e {
    align-items: end;
}

.gap-1 {
    gap: 5px;
}

.gap-2 {
    gap: 10px;
}

.gap-3 {
    gap: 15px;
}

.grow-0 {
    flex-grow: 0;
}

.grow-1 {
    flex-grow: 1;
}

.shrink-0 {
    flex-shrink: 0;
}

.shrink-1 {
    flex-shrink: 1;
}

.CM-btn {
    text-decoration: none;
    border-radius: 8px;
    display: inline-flex;
    height: 46px;
    line-height: 46px;
    border-width: 1px;
    border-style: solid;
    align-items: center;
    justify-content: center;
    transition: 0.3s linear;
}
.CM-btn img {
    height: 24px;
}
.CM-btn.btn-fill-white {
    background-color: #fff;
    border-color: #fff;
    color: #1e1e1e;
}
.CM-btn.btn-fill-orange {
    background-color: #fb7400;
    border-color: #fb7400;
    color: #fff;
}
.CM-btn.btn-fill-orange:hover {
    filter: brightness(1.15);
    transition: 0.3s linear;
}
.CM-btn.btn-border-orange {
    background-color: #fff;
    border-color: #fb7400;
    color: #fb7400;
}
.CM-btn.btn-border-orange:hover {
    background-color: #fb7400;
    color: #fff;
    transition: 0.3s linear;
}
.CM-btn.btn-fill-green {
    background-color: #82b500;
    border-color: #82b500;
    color: #fff;
}
.CM-btn.btn-fill-green:hover {
    filter: brightness(1.15);
    transition: 0.3s linear;
}
.CM-btn.btn-border-green {
    background-color: #fff;
    border-color: #82b500;
    color: #82b500;
}
.CM-btn.btn-border-green:hover {
    background-color: #82b500;
    color: #fff;
    transition: 0.3s linear;
}
.CM-btn.btn-fill-gray {
    background-color: #f4f4f4;
    border-color: #f4f4f4;
    color: #1e1e1e;
}
.CM-btn.btn-fill-darkgray {
    background-color: #808080;
    border-color: #808080;
    color: #fff;
}
.CM-btn.btn-fill-darkgray:hover {
    filter: brightness(1.15);
    transition: 0.3s linear;
}
.CM-btn.disabled {
    background-color: #D9D9D9;
    border-color: #D9D9D9;
    color: #808080;
    cursor: default;
}
.CM-btn.disabled:hover {
    filter: brightness(1);
}
@media screen and (max-width: 768px) {
    .CM-btn {
        font-size: 14px;
    }
}

input::placeholder {
    font-size: 14px;
    color: #808080;
}

.CM-input {
    position: relative;
}
.CM-input input[type=text],
.CM-input input[type=email],
.CM-input input[type=tel],
.CM-input input[type=password],
.CM-input input[type=date],
.CM-input input[type=time],
.CM-input input[type=url],
.CM-input input[type=number],
.CM-input textarea {
    width: 100%;
    color: #1e1e1e;
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    font-size: 14px;
    padding: 11px 14px;
    transition: 0.3s linear;
}
.CM-input input[type=text]:focus,
.CM-input input[type=email]:focus,
.CM-input input[type=tel]:focus,
.CM-input input[type=password]:focus,
.CM-input input[type=date]:focus,
.CM-input input[type=time]:focus,
.CM-input input[type=url]:focus,
.CM-input input[type=number]:focus,
.CM-input textarea:focus {
    outline: 0;
    border: 1px solid #fb7400;
    transition: 0.3s linear;
}
.CM-input input[type=text]:disabled,
.CM-input input[type=email]:disabled,
.CM-input input[type=tel]:disabled,
.CM-input input[type=password]:disabled,
.CM-input input[type=date]:disabled,
.CM-input input[type=time]:disabled,
.CM-input input[type=url]:disabled,
.CM-input input[type=number]:disabled,
.CM-input textarea:disabled {
    background-color: #f4f4f4;
    color: #808080;
}
.CM-input input[type=date],
.CM-input input[type=time] {
    appearance: none;
    background-color: #fff;
    padding: 11px 14px;
    height: 46px;
}
.CM-input input[type=time] {
    font-size: 16px;
}
.CM-input textarea {
    resize: none;
    height: 100px;
}
.CM-input .error-tip {
    margin-top: 5px;
    color: #f55431;
    font-size: 14px;
}
.CM-input input[type=number]::-webkit-outer-spin-button,
.CM-input input[type=number]::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    margin: 0;
}
.CM-input.pwd-input .ic-eye {
    position: absolute;
    right: 15px;
    bottom: 9px;
}
.CM-input.pwd-input .ic-eye .close {
    display: block;
}
.CM-input.pwd-input .ic-eye .open {
    display: none;
}
.CM-input.pwd-input .ic-eye.open .open {
    display: block;
}
.CM-input.pwd-input .ic-eye.open .close {
    display: none;
}
.CM-input.send-input input[type=text] {
    padding: 11px 40px 11px 14px;
}
.CM-input.send-input .ic-send {
    position: absolute;
    right: 15px;
    bottom: 9px;
}
.CM-input.date-input input[type=date]::-webkit-date-and-time-value {
    text-align: left;
}
.CM-input.date-input input[type=date]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 100%;
    position: absolute;
    right: 0;
    box-sizing: border-box;
    z-index: 1;
    height: 100%;
}
.CM-input.date-input input[type=date] {
    padding: 11px 40px 11px 14px;
}
.CM-input.date-input:after {
    content: "";
    background: url(../Images/ico-date1.svg) no-repeat center center;
    position: absolute;
    right: 12px;
    height: 24px;
    width: 24px;
    top: 0;
    bottom: 0;
    margin: auto;
    pointer-events: none;
}
.CM-input.date-time input[type=time]::-webkit-calendar-picker-indicator {
    opacity: 0.4;
}
.CM-input.search-input:after {
    content: "";
    background: url(../Images/ico_search.svg) no-repeat center center;
    position: absolute;
    right: 12px;
    height: 24px;
    width: 24px;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}

.CM-fileupload-input .input-file {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}
.CM-fileupload-input .input-file input[type=file] {
    display: none;
}
.CM-fileupload-input .input-file .CM-btn {
    height: 40px;
    line-height: 40px;
    width: 82px;
    margin: auto 0 auto auto;
}

.CM-fileuploaded {
    background-color: #f4f4f4;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.CM-fileuploaded span {
    font-size: 14px;
    color: #666;
}
.CM-fileuploaded a {
    width: 20px;
}
.CM-fileuploaded a img {
    width: 100%;
    vertical-align: top;
}

.CM-tel-input {
    display: flex;
    position: relative;
    align-items: center;
    z-index: 100;
    gap: 8px;
}
.CM-tel-input .CM-tel-select-wrap {
    -webkit-user-select: none;
            user-select: none;
    width: 30%;
    flex-shrink: 0;
}
.CM-tel-input .CM-tel-select-wrap .default-option {
    background-color: #fff;
    position: relative;
    height: 42px;
    border-radius: 5px;
    border: 1px solid #dcdcdc;
}
.CM-tel-input .CM-tel-select-wrap .default-option li {
    line-height: 45px;
    padding: 0 10px;
    color: #1e1e1e;
}
.CM-tel-input .CM-tel-select-wrap .default-option li:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 8px;
    width: 4px;
    height: 4px;
    border: 2px solid;
    border-color: transparent transparent #555555 #555555;
    transform: rotate(-45deg);
}
.CM-tel-input .CM-tel-select-wrap .CM-tel-select-ul {
    position: absolute;
    top: 47px;
    left: 0;
    width: 100%;
    border-radius: 5px;
    display: none;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    padding: 10px;
}
.CM-tel-input .CM-tel-select-wrap .CM-tel-select-ul li {
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.CM-tel-input .CM-tel-select-wrap .CM-tel-select-ul li span {
    color: #1e1e1e;
}
.CM-tel-input .CM-tel-select-wrap .CM-tel-select-ul li:hover span {
    color: #FB7400;
}
.CM-tel-input .CM-tel-select-wrap.active .default-option {
    border: 1px solid #fb7400;
}
.CM-tel-input .CM-tel-select-wrap.active .CM-tel-select-ul {
    display: block;
    box-sizing: border-box;
    overflow-y: scroll;
    max-height: 200px;
}
.CM-tel-input.verify .CM-btn {
    width: 160px;
}
.CM-tel-input.verify .CM-tel-select-wrap {
    width: 20%;
}
@media screen and (max-width: 768px) {
    .CM-tel-input.verify .CM-btn {
        width: 90px;
        flex-shrink: 0;
    }
    .CM-tel-input.verify .CM-tel-select-wrap {
        width: 80px;
    }
}

.CM-verify-sms-input {
    display: flex;
    align-items: center;
    gap: 8px;
}
.CM-verify-sms-input .CM-btn {
    width: 160px;
}
@media screen and (max-width: 768px) {
    .CM-verify-sms-input .CM-btn {
        width: 90px;
        flex-shrink: 0;
    }
}

.CM-verify-code-input {
    display: flex;
    align-items: center;
    gap: 8px;
}
.CM-verify-code-input .v-code {
    width: 90px;
    vertical-align: top;
}
.CM-verify-code-input a {
    display: flex;
    align-items: center;
    width: 16px;
}
.CM-checkbox {
    position: relative;
    font-size: 16px;
    display: flex;
    align-items: center;
    line-height: 26px;
}
.CM-checkbox label {
    padding-left: 26px;
    position: relative;
    display: flex;
    align-items: center;
}
.CM-checkbox input[type=checkbox] {
    display: none;
}
.CM-checkbox input[type=checkbox] + span {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.CM-checkbox input[type=checkbox]:checked + span {
    background: url(../Images/icon_check.svg) no-repeat center center;
    border-color: transparent;
}
.CM-checkbox.check-2 label {
    padding-left: 30px;
}
.CM-checkbox.check-2 input[type=checkbox] + span {
    width: 26px;
    height: 26px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: url(../Images/ico_check-2.svg) no-repeat center center;
    background-size: 100%;
}
.CM-checkbox.check-2 input[type=checkbox]:checked + span {
    background: url(../Images/ico_check-1.svg) no-repeat center center;
    background-size: 100%;
}

.CM-radio {
    position: relative;
    font-size: 16px;
    display: inline-block;
    line-height: 26px;
}
.CM-radio label {
    padding-left: 23px;
    position: relative;
}
.CM-radio input[type=radio] {
    display: none;
}
.CM-radio input[type=radio] + span {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #a5a5a5;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.CM-radio input[type=radio] + span:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.CM-radio input[type=radio]:checked + span {
    border-color: #F55431;
}
.CM-radio input[type=radio]:checked + span:before {
    background-color: #F55431;
}
.CM-radio.bd {
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    padding: 0 14px;
    flex-grow: 1;
    height: 42px;
    line-height: 41px;
    background-color: #fff;
}
.CM-radio.bd label {
    display: block;
}
.CM-radio.radio-2 input[type=radio]:checked + span {
    border: unset;
}
.CM-radio.radio-2 input[type=radio]:checked + span:before {
    background: url(../Images/ico_check-1.svg) no-repeat center center;
    background-size: 100%;
    width: 18px;
    height: 18px;
}

.CM-select {
    position: relative;
}
.CM-select:after {
    content: "";
    position: absolute;
    background: url(../Images/ico-arrow-down.svg) no-repeat center center;
    width: 20px;
    height: 20px;
    background-size: 20px;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.CM-select select {
    width: 100%;
    color: #454545;
    box-sizing: border-box;
    border: 0;
    border: 1px solid #dcdcdc;
    font-size: 16px;
    padding: 8px 35px 8px 10px;
    height: 44px;
    border-radius: 5px;
    background-color: #fff;
    appearance: none;
    transition: 0.3s linear;
}
.CM-select select:focus {
    outline: 0;
    border-color: #F55431;
    transition: 0.3s linear;
}

.CM-tip {
    font-size: 14px;
    background-color: #f4f4f4;
    border-radius: 8px;
    padding: 12px 16px 12px 35px;
    position: relative;
    line-height: 1.4;
}
.CM-tip img {
    margin-right: 5px;
    align-items: center;
    position: absolute;
    left: 12px;
    top: 13px;
}
.CM-tip.tip-2 {
    background-color: #FFFCDF;
}
.CM-tip.tip-2 img {
    width: 16px;
    height: 16px;
}

.CM-pages-row {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
}
.CM-pages-row a, .CM-pages-row span {
    display: inline-flex;
    height: 48px;
    line-height: 48px;
    border-radius: 10px;
    font-size: 14px;
    justify-content: center;
    color: #1e1e1e;
    text-decoration: none;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    min-width: 48px;
}
.CM-pages-row a img, .CM-pages-row span img {
    vertical-align: top;
}
.CM-pages-row a.active, .CM-pages-row span.active {
    background-color: #fb7400;
    color: #fff;
}
@media screen and (max-width: 768px) {
    .CM-pages-row a, .CM-pages-row span {
        height: 40px;
        line-height: 40px;
        min-width: 40px;
    }
}

.CM-table table {
    width: 100%;
    color: #1e1e1e;
}
.CM-table table td, .CM-table table th {
    border: 1px solid #dcdcdc;
    padding: 10px 16px;
    vertical-align: middle;
}
.CM-table.table-wb td, .CM-table.table-wb th {
    border: 1px solid #fff;
}
.CM-table.table-nb td, .CM-table.table-nb th {
    border: none;
}
.CM-table .bgc-ly {
    background-color: #FFFCDF;
}
.CM-table .bgc-gray {
    background-color: #808080;
    color: #fff;
}
.CM-table td.nw {
    white-space: nowrap;
}

.CM-page-tab {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-bottom: 40px;
}
.CM-page-tab a {
    display: inline-block;
    padding: 15px 20px;
    color: #808080;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    font-size: 20px;
}
.CM-page-tab a.active {
    color: #fb7400;
    border-color: #fb7400;
}
@media screen and (max-width: 768px) {
    .CM-page-tab {
        margin-bottom: 20px;
        gap: 0;
    }
    .CM-page-tab a {
        font-size: 16px;
        padding: 12px 0;
        flex-grow: 1;
        text-align: center;
    }
}

.CM-step-row {
    display: flex;
    justify-content: space-around;
    position: relative;
    width: 100%;
    max-width: 720px;
    padding: 30px 0 45px 0;
    margin: auto;
}
.CM-step-row dl {
    width: 33.3333333333%;
    flex-shrink: 0;
    text-align: center;
    color: #666;
    position: relative;
    z-index: 1;
}
.CM-step-row dl dt {
    border-radius: 50%;
    background-color: #dcdcdc;
    font-size: 18px;
    font-weight: bold;
    width: 46px;
    line-height: 46px;
    height: 46px;
    margin: 0 auto 8px;
    color: #1e1e1e;
}
.CM-step-row dl.active dt {
    color: #fff;
    background-color: #fb7400;
}
.CM-step-row dl.active dd {
    color: #fb7400;
}
.CM-step-row:after {
    content: "";
    height: 3px;
    width: 70%;
    top: 54px;
    right: 0;
    left: 0;
    margin: auto;
    position: absolute;
    background-color: #dcdcdc;
}
@media screen and (max-width: 768px) {
    .CM-step-row {
        background-color: #f4f4f4;
        padding: 25px 0;
    }
    .CM-step-row dl dt {
        margin-bottom: 0;
    }
    .CM-step-row dl dd {
        display: none;
    }
    .CM-step-row:after {
        top: 49px;
    }
}

.CM-copy-alert {
    position: fixed;
    height: 40px;
    width: 109px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    color: #d9d9d9;
    background-color: #454545;
    border-radius: 6px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9999;
    display: none;
}

.CM-lightbox-bg {
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1100;
    width: 0;
    margin: auto;
    overflow-x: hidden;
}
.CM-lightbox-bg.open {
    width: 100%;
}

.CM-lightbox {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1100;
    width: 0;
    margin: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.CM-lightbox.open {
    width: 100%;
    height: 100%;
}
.CM-lightbox .wrap {
    position: relative;
    background-color: #fff;
    max-width: 450px;
    border-radius: 10px;
    width: 100%;
    padding: 50px 40px;
    color: #454545;
    box-sizing: border-box;
}
.CM-lightbox .wrap a.lb-header {
    position: absolute;
    right: 15px;
    top: 15px;
}
.CM-lightbox .wrap a.lb-header img {
    vertical-align: top;
}
.CM-lightbox .wrap .lb-title {
    font-size: 18px;
    font-weight: 500;
    position: absolute;
    top: 25px;
}
.CM-lightbox .wrap .btn-row {
    display: flex;
    align-items: center;
    margin-top: 50px;
    gap: 10px;
}
.CM-lightbox .wrap .btn-row a {
    flex-grow: 1;
    width: 40%;
}
.CM-lightbox .wrap .btn-row a.btn-cancal {
    color: #808080;
    text-align: center;
    text-decoration: none;
}
.CM-lightbox .wrap .btn-row a.btn-cancal:hover {
    text-decoration: underline;
}
@media screen and (max-width: 768px) {
    .CM-lightbox .wrap {
        width: 95%;
    }
}

body, body * {
    font-family: "Noto Sans TC", "microsoft jhenghei", Verdana, Arial, sans-serif;
}

body {
    overflow-x: hidden;
    background-color: #2a2722;
}
body.bg-w {
    background-color: #fff;
}
body.bg-w article {
    background-color: #fff;
}
body.fixed {
    overflow: hidden;
}
body * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body header {
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 500;
}
body header .rwd-web__hide {
    display: none !important;
}
body header > .web {
    box-sizing: border-box;
}
body header > .web .header {
    background-color: #1d1d1d;
}
body header > .web .header .wrapper {
    width: 95%;
    max-width: 100%;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    height: 80px;
    align-items: center;
    box-sizing: border-box;
}
body header > .web .header .wrapper a {
    text-decoration: none;
}
body header > .web .header .flex-l {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 36px;
    position: relative;
}
body header > .web .header .flex-l .tab {
    height: 100%;
    position: relative;
}
body header > .web .header .flex-l .tab:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    height: 6px;
    transition: 0.3s linear;
}
body header > .web .header .flex-l .tab a {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 17px;
}
body header > .web .header .flex-l .tab:hover a {
    color: #F7D33E;
    transition: 0.3s linear;
}
body header > .web .header .flex-l .tab:hover:after {
    background-color: #F7D33E;
    transition: 0.3s linear;
}
body header > .web .header .flex-r {
    display: flex;
    align-items: center;
}
body header > .web .header .flex-r .lang {
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 16px;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 8px;
    padding: 10px 15px;
    border: 1px solid #333;
    position: relative;
    transition: 0.3s linear;
    position: relative;
}
body header > .web .header .flex-r .lang img.default {
    opacity: 1;
    position: relative;
}
body header > .web .header .flex-r .lang img.hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
body header > .web .header .flex-r .lang .default, body header > .web .header .flex-r .lang .hover {
    margin: 0 0 0 10px;
}
body header > .web .header .flex-r .lang:hover {
    color: #ffeca2;
    transition: 0.3s linear;
}
body header > .web .header .flex-r .lang:hover img.hover {
    opacity: 1;
    position: relative;
}
body header > .web .header .flex-r .lang:hover img.default {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
body header > .web .header .flex-r #dropdown-with-lang {
    width: 125px;
}
body header > .web .header .flex-r #dropdown-with-lang ul {
    min-width: 120px;
}
body header > .web .header .flex-r #dropdown-with-lang li a {
    padding: 10px;
    text-align: center;
}
body header > .web .header .flex-r #dropdown-with-icons {
    width: 365px;
}
body header > .web .header .flex-r #dropdown-with-icons li a {
    padding: 10px 10px 10px 44px;
}
body header > .web .header .flex-r .dropdown-menu li a {
    color: #5a5a5a;
    font-size: 16px;
    letter-spacing: 1px;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
}
body header > .web .header .flex-r .dropdown-menu li a:hover {
    background-color: #FFD220;
    color: #5a5a5a;
}
body header > .web .header .flex-r .dropdown-menu li a:hover span {
    color: #5a5a5a;
}
body header > .web .header .flex-r .dropdown-menu li a > img {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 44px;
    margin: auto;
}
body header > .web .header .flex-r .dropdown-menu li a span {
    display: block;
    font-size: 13px;
}
body header > .web .header .logo {
    height: 52px;
}
body header > .web .header .logo a {
    display: inline-block;
    height: 100%;
}
body header > .web .header .logo a img {
    height: 100%;
    vertical-align: top;
}
@media screen and (max-width: 768px) {
    body header .rwd-mobile__hide {
        display: none !important;
    }
    body header .rwd-web__hide {
        display: block !important;
    }
    body header {
        background-color: #1f1b16;
    }
    body header .header-wrapper {
        padding: 8px 5px;
        box-sizing: border-box;
        line-height: 40px;
        overflow-x: hidden;
        display: flex;
        justify-content: space-between;
    }
    body header .header-wrapper .menu-icon {
        position: relative;
        width: 44px;
        height: 44px;
        z-index: 1;
    }
    body header .header-wrapper .menu-icon span {
        position: absolute;
        top: 0;
        left: 0;
        width: 44px;
        height: 44px;
        bottom: 0;
        margin: auto;
        display: none;
    }
    body header .header-wrapper .menu-icon span.tip:after {
        content: "";
        background-color: #f00;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        position: absolute;
        top: 9px;
        right: 5px;
    }
    body header .header-wrapper .menu-icon span img {
        vertical-align: top;
    }
    body header .header-wrapper .menu-icon span i {
        vertical-align: top;
        color: #fff;
        position: relative;
        top: 2px;
    }
    body header .header-wrapper .menu-icon.open span.close {
        display: block;
    }
    body header .header-wrapper .menu-icon:not(.open) span.menu {
        display: block;
    }
    body header .header-wrapper .logo {
        margin: auto;
        position: absolute;
        right: 0;
        left: 0;
        text-align: center;
        z-index: 0;
        color: #fff;
    }
    body header .header-wrapper .logo img {
        height: 38px;
        vertical-align: middle;
    }
    body header .left-sidebar {
        background-color: #faaa39;
        position: fixed;
        z-index: 100;
        width: 100%;
        top: 60px;
        bottom: 0;
        left: -100%;
        box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
        overflow: auto;
        transition: 0.3s linear;
    }
    body header .left-sidebar.open {
        left: 0;
        transition: 0.3s linear;
    }
    body header .left-sidebar .list li.lang-change.open .arrow {
        transform: rotate(90deg);
        transition: 0.3s linear;
    }
    body header .left-sidebar .list li a {
        display: block;
        font-size: 16px;
        padding: 13px 20px 13px 0;
        position: relative;
        color: #000;
        margin-left: 20px;
        text-decoration: none;
    }
    body header .left-sidebar .list li a:after {
        content: "";
        box-shadow: inset 0 -0.5px 0 0 #e68700;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px;
        width: 100%;
    }
    body header .left-sidebar .list li a span.tip {
        position: relative;
    }
    body header .left-sidebar .list li a span.tip:after {
        content: "";
        background-color: #f00;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        position: absolute;
        top: -3px;
        right: -3px;
    }
    body header .left-sidebar .list li a img {
        vertical-align: text-bottom;
        margin-right: 5px;
        width: 18px;
    }
    body header .left-sidebar .list li a .arrow {
        position: absolute;
        right: 15px;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 18px;
        color: #946100;
    }
    body header .left-sidebar .list li > ul {
        background-color: #ffeca2;
        display: none;
    }
    body header .left-sidebar .list li > ul li a {
        padding: 13px 0;
        margin: 0 20px 0 40px;
    }
    body header .left-sidebar .list li > ul li a:after {
        content: "";
        box-shadow: inset 0 -0.5px 0 0 #e5d286;
    }
    body header .left-sidebar .list li > ul li a img {
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 16px;
        height: 16px;
    }
    body header .left-sidebar .list li > ul li.current a {
        color: #fb6700;
    }
    body header .left-sidebar .list li > ul li.current a img {
        display: block;
    }
}
body footer {
    background-color: #2a2722;
}
body footer .wrap {
    width: 1100px;
    max-width: 90%;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    padding: 18px 0;
    box-sizing: border-box;
    align-items: center;
    color: #fff;
    font-size: 14px;
    gap: 30px;
    line-height: 1.6;
}
body footer .wrap .btn-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: auto 0 auto auto;
}
body footer .wrap .btn-row .btn {
    color: #fc944c;
    border: 1px solid currentcolor;
    border-radius: 6px;
    font-weight: 500;
    display: block;
    padding: 8px;
    text-decoration: none;
    transition: 0.3s linear;
}
body footer .wrap .btn-row .btn:hover {
    transform: translateY(-3px);
    transition: 0.3s linear;
}
@media screen and (max-width: 1024px) {
    body footer .wrap {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    body footer .wrap .btn-row {
        grid-area: 1/1/2/2;
        margin: unset;
    }
    body footer .wrap .btn-row .btn {
        flex-grow: 1;
        text-align: center;
    }
    body footer .wrap dl {
        grid-area: 2/1/3/2;
    }
    body footer .wrap .copyright {
        grid-area: 3/1/4/2;
    }
}
body article {
    padding: 32px 0;
    background-color: #f4f4f4;
    min-height: calc(100vh - 81px - 64px - 80px);
}
body article .breadcrumb-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
body article .breadcrumb-wrap.wp-large {
    width: 1100px;
    max-width: 100%;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 17px;
}
body article .breadcrumb-wrap.wp-medium {
    width: 895px;
    max-width: 100%;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 17px;
}
body article .breadcrumb-wrap.wp-small {
    width: 680px;
    max-width: 100%;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 17px;
}
body article .breadcrumb-wrap .breadcrumb {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}
body article .breadcrumb-wrap .breadcrumb a, body article .breadcrumb-wrap .breadcrumb span {
    font-size: 14px;
}
body article .wrap {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    padding: 30px 50px;
}
body article .wrap.wp-large {
    width: 1100px;
    max-width: 100%;
    overflow: hidden;
    margin: 0 auto;
}
body article .wrap.wp-medium {
    width: 680px;
    max-width: 100%;
    overflow: hidden;
    margin: 0 auto;
}
@media screen and (max-width: 1000px) {
    body article {
        background-color: #fff;
        padding: 0;
    }
    body article .breadcrumb-wrap {
        background-color: #f4f4f4;
        padding: 10px;
        box-sizing: border-box;
    }
    body article .breadcrumb-wrap.wp-large, body article .breadcrumb-wrap.wp-medium {
        margin-bottom: 0;
    }
    body article .wrap {
        border-radius: 0;
        box-shadow: unset;
        padding: 20px;
    }
}
@media screen and (max-width: 768px) {
    body article {
        min-height: calc(100vh - 124px - 60px);
    }
}

.page-buy .sc-title {
    font-size: 20px;
    font-weight: bold;
    color: #666;
}
.page-buy .sc-scope {
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 300px;
    grid-template-rows: repeat(2, auto);
    gap: 15px;
    align-items: start;
}
.page-buy .sc-scope .wrap {
    padding: 30px;
}
.page-buy .sc-scope .sc-section {
    grid-area: 1/1/2/2;
}
.page-buy .sc-scope .sc-section .product-info {
    display: grid;
    grid-template-columns: 130px auto;
    gap: 0px 20px;
}
.page-buy .sc-scope .sc-section .product-info .img {
    grid-area: 1/1/4/2;
    width: 130px;
    height: 130px;
    border-radius: 8px;
    overflow: hidden;
    padding: 15px;
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}
.page-buy .sc-scope .sc-section .product-info .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-buy .sc-scope .sc-section .product-info .p-title {
    grid-area: 1/2/2/3;
    font-size: 17px;
    margin-bottom: 8px;
}
.page-buy .sc-scope .sc-section .product-info .p-title .p-name {
    color: #1e1e1e;
}
.page-buy .sc-scope .sc-section .product-info .p-title .p-price {
    color: #fb7400;
}
.page-buy .sc-scope .sc-section .product-info .p-title .tag-img {
    grid-area: 2/2/3/3;
    width: 60px;
}
.page-buy .sc-scope .sc-section .product-info .p-title .tag-img img {
    width: 100%;
    vertical-align: top;
}
.page-buy .sc-scope .sc-section .product-info .p-caption {
    grid-area: 3/2/4/3;
}
.page-buy .sc-scope .sc-section .product-info .p-caption .num-row {
    display: grid;
    grid-template-columns: 35px auto 35px;
    gap: 5px;
    width: 200px;
}
.page-buy .sc-scope .sc-section .product-info .p-caption .num-row .CM-input input {
    text-align: center;
    border-radius: 6px;
    padding: 7px 14px;
    color: #666;
}
.page-buy .sc-scope .sc-section .product-info .p-caption .num-row a {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
}
.page-buy .sc-scope .sc-section .product-info .p-caption .num-row .btn-minus {
    background: #fff url(../Images/ico-minus.svg) no-repeat center center;
}
.page-buy .sc-scope .sc-section .product-info .p-caption .num-row .btn-plus {
    background: #fff url(../Images/ico-plus.svg) no-repeat center center;
}
.page-buy .sc-scope .caption-scope {
    grid-area: 2/1/3/2;
}
.page-buy .sc-scope .pay-method {
    grid-area: 3/1/4/2;
}
.page-buy .sc-scope .pay-method .pay-btn-list {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.page-buy .sc-scope .pay-method .pay-btn-list a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #666;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    width: 235px;
    box-sizing: border-box;
}
.page-buy .sc-scope .pay-method .pay-btn-list a.active {
    color: #fb7400;
    border: 1px solid #fb7400;
    box-shadow: 0 0 0 1px #fb7400;
}
.page-buy .sc-scope .sc-aside {
    grid-area: 1/2/7/3;
    position: sticky;
    top: 100px;
    z-index: 50;
}
.page-buy .sc-scope .sc-aside .details {
    background-color: #FFFCDF;
    padding: 15px;
    border-radius: 10px;
}
.page-buy .sc-scope .sc-aside .amount-row {
    margin: 25px 0;
}
.page-buy .sc-scope .sc-aside .amount-row .amount {
    font-size: 20px;
}
.page-buy .sc-scope .sc-aside .CM-btn {
    width: 100%;
}
.page-buy .sc-scope .buyer {
    grid-area: 4/1/5/2;
    position: relative;
}
.page-buy .sc-scope .invoice {
    grid-area: 5/1/6/2;
    position: relative;
}
.page-buy .sc-scope .notice-scope {
    grid-area: 6/1/7/2;
    position: relative;
}
@media screen and (max-width: 1100px) {
    .page-buy {
        padding: 32px 10px;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 1000px) {
    .page-buy {
        padding: 10px 0;
        background-color: #f4f4f4;
    }
    .page-buy .sc-scope {
        grid-template-columns: 1fr;
    }
    .page-buy .sc-scope .sc-section {
        grid-area: 1/1/2/2;
    }
    .page-buy .sc-scope .caption-scope {
        grid-area: 2/1/3/2;
    }
    .page-buy .sc-scope .pay-method {
        grid-area: 3/1/4/2;
    }
    .page-buy .sc-scope .sc-aside {
        grid-area: 4/1/5/2;
        position: relative;
        top: 0;
    }
    .page-buy .sc-scope .buyer {
        grid-area: 5/1/6/2;
    }
    .page-buy .sc-scope .invoice {
        grid-area: 6/1/7/2;
    }
    .page-buy .sc-scope .notice-scope {
        grid-area: 7/1/8/2;
    }
}
@media screen and (max-width: 768px) {
    .page-buy {
        padding-bottom: 0;
    }
    .page-buy .sc-scope {
        gap: 10px;
    }
    .page-buy .sc-scope .wrap {
        padding: 20px;
    }
    .page-buy .sc-scope .sc-section .product-info {
        grid-template-columns: 100px 1fr;
        gap: 20px;
    }
    .page-buy .sc-scope .sc-section .product-info .img {
        grid-area: 1/1/2/2;
        width: 100px;
        height: 100px;
        padding: 10px;
    }
    .page-buy .sc-scope .sc-section .product-info .p-title {
        grid-area: 1/2/2/3;
    }
    .page-buy .sc-scope .sc-section .product-info .p-title .CM-flex {
        flex-wrap: wrap;
        gap: 5px;
    }
    .page-buy .sc-scope .sc-section .product-info .p-title .p-name, .page-buy .sc-scope .sc-section .product-info .p-title .p-price {
        width: 100%;
    }
    .page-buy .sc-scope .sc-section .product-info .p-caption {
        grid-area: 2/1/3/3;
    }
    .page-buy .sc-scope .pay-method .pay-btn-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .page-buy .sc-scope .pay-method .pay-btn-list a {
        box-sizing: border-box;
        padding: 12px 5px 12px 8px;
        width: auto;
        font-size: 14px;
        gap: 5px;
    }
    .page-buy .sc-scope .sc-section {
        grid-area: 1/1/2/2;
    }
    .page-buy .sc-scope .caption-scope {
        grid-area: 2/1/3/2;
    }
    .page-buy .sc-scope .pay-method {
        grid-area: 3/1/4/2;
    }
    .page-buy .sc-scope .buyer {
        grid-area: 4/1/5/2;
    }
    .page-buy .sc-scope .invoice {
        grid-area: 5/1/6/2;
    }
    .page-buy .sc-scope .notice-scope {
        grid-area: 6/1/7/2;
    }
    .page-buy .sc-scope .sc-aside {
        position: sticky;
        bottom: 0;
        width: 100%;
        top: unset;
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
        grid-area: 6/1/7/2;
    }
}

.CM-content.page-buy-confirm .page-title {
    font-size: 20px;
    color: #fb6700;
    text-align: center;
}
.CM-content.page-buy-confirm .product-info {
    background-color: #f8f8f8;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 6px;
    display: flex;
    gap: 20px;
}
.CM-content.page-buy-confirm .product-info .img {
    width: 130px;
    height: 130px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    padding: 15px;
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    background-color: #fff;
}
.CM-content.page-buy-confirm .product-info .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.CM-content.page-buy-confirm .product-info .p-name {
    font-size: 17px;
    color: #1e1e1e;
}
.CM-content.page-buy-confirm .CM-table {
    font-weight: 500;
}
.CM-content.page-buy-confirm .btn-row a {
    max-width: 50%;
}
@media screen and (max-width: 768px) {
    .CM-content.page-buy-confirm .product-info .img {
        width: 100px;
        height: 100px;
        padding: 10px;
    }
}

.CM-lightbox.pp-buy .lb-content {
    max-height: 300px;
    overflow-y: scroll;
}