html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: NotoSansTC-Light;
    src: url(../fonts/NotoSansTC-Light.otf);
    src: url(../fonts/TaipeiSansTCBeta-Bold.otf);
    src: url(../fonts/TaipeiSansTCBeta-Regular.otf);
    src: url(../fonts/TaipeiSansTCBeta-Light.otf);
}

* {
    box-sizing: border-box;
    /* 這樣確保邊框和內邊距不會使元素寬度超過其容器 */
}

body {
    overflow-x: hidden;
    /* 隱藏水平滾動條 */
}

#content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.body-content {
    flex: 1;
}

.container {
    overflow-x: hidden;
    /* 隱藏水平滾動條 */
}

body {
    font-family: 'NotoSansTC-Light', '微軟正黑體', 'Noto Sans TC', sans-serif, Arial, Helvetica, Microsoft JhengHei, Apple LiGothic, 'Roboto Condensed', Noto Sans TC, Poppins, Microsoft YaHei, sans-serif, Arial;
    font-size: 16px;
    color: #333;
    /* margin: 0; */
    overflow-x: hidden;
}

::-webkit-scrollbar {
    display: none;
}

.sIcon {
    position: relative;
}

.per {
    position: absolute;
    right: 10px;
    top: 0.5em;
    color: #808080;
}

.header-title .block-title {
    color: #232a31;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 20px;
    line-height: 64px;
    margin: 10px 0 -16px;
    overflow: hidden;
    text-align: center;
    text-indent: 20px;
}

.header-title .block-title:before,
.header-title .block-title:after {
    background-color: #e0e4e9;
    content: '';
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

.header-title .block-title:before {
    margin-left: -50%;
    right: 108px;
}

.header-title .block-title:after {
    left: 108px;
    margin-right: -50%;
}

@media screen and (max-width: 900px) {
    .header-title .block-title:before {
        right: 20px;
    }

    .header-title .block-title:after {
        left: 0;
    }
}

.common_ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tinyFont {
    display: block;
    transform: scale(0.916);
}

.responsiveImg {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (min-width: 1200px) {
    .body-content {
        min-height: 800px;
    }
}

@media screen and (min-width: 2500px) {
    .body-content {
        min-height: 1158px;
    }
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-right {
    display: flex;
    justify-content: right;
    align-items: right;
}

.font-through-yellow {
    color: rgb(0, 0, 0);
    background-image: linear-gradient(to top, rgb(253, 197, 99), rgb(253, 197, 99));
    display: inline;
    margin: 0px auto;
    padding: 0px 12px;
    background-repeat: no-repeat;
    background-size: 100% 0.55em;
    background-position: 0% 100%;
}

.inp-required {
    color: #f85766;
    font-size: 13px;
    font-weight: bold;
    margin-left: 2px;
    vertical-align: top;
}

.border-radius-0 {
    border-radius: 0;
}

.border-radius-10 {
    border-radius: 10px;
}

.border-radius-20 {
    border-radius: 20px;
}

.border-radius-50 {
    border-radius: 50px;
}

.relative {
    position: relative;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn-filter {
    color: #fff;
    background-color: #b3183b;
    border: 1px solid #de0022;
    cursor: pointer;
    margin: 0 5px;
    padding: 5px;
}

.btn-filter:hover {
    background-color: #de0022;
    color: #fff;
    border: 1px solid #de0022;
}

.btn-filter-p {
    color: #fff;
    background-color: #f75d19;
    border: 1px solid #f75d19;
    cursor: pointer;
    margin: 0 5px;
    padding: 5px;
}

.btn-filter-p:hover {
    background-color: #e94d0b;
    color: #fff;
    border: 1px solid #e94d0b;
}

.btn-red {
    background-color: #d32f2f;
    color: #fff;
}

.btn-purple {
    background-color: #7c18a5 !important;
    color: #fff !important;
}

.btn-pink {
    background-color: #dd5353;
    border: none;
    color: #fff;
    /* padding: 5px 15px; */
    transition: all 0.5s;
}

.btn-pink:hover {
    color: #cc3636;
}

.btn-skyblue {
    background-color: #39aad4;
    border: none;
    color: #fff;
    padding: 5px;
    transition: all 0.5s;
}

.btn-skyblue:hover {
    background-color: #1e92bd;
    color: #fff;
}

.btn-blue {
    background-color: #336699;
    border: none;
    color: #fff;
    padding: 5px 15px;
    transition: all 0.5s;
}

.btn-blue:hover {
    color: #c8def3;
}

.btn-blue1 {
    background-color: #1d3885;
    color: #fff;
}

.btn-blue2 {
    background-color: #035d99;
    color: #fff;
}


/* 自訂藍色樣式 */
.btn-outline-blue {
    color: #035d99 !important;
    border: 1px solid #035d99 !important;
    background-color: transparent;
    transition: all 0.2s;
}

.btn-outline-blue:hover {
    background-color: #035d99;
    color: #fff !important;
    ;
}

.btn-check:checked+.btn-outline-blue {
    color: #fff !important;
    ;
    background-color: #035d99;
    border-color: #035d99;
}

input[type='checkbox'].btn-check+label.btn-outline-blue {
    background-color: transparent;
    color: #035d99;
    border-color: #035d99;
}

input[type='checkbox'].btn-check:checked+label.btn-outline-blue {
    background-color: #035d99 !important;
    color: #fff !important;
    border-color: #035d99 !important;
}


/* 自訂紫色樣式 */
.btn-outline-purple {
    color: #7c18a5 !important;
    border: 1px solid #7c18a5 !important;
    background-color: transparent;
    transition: all 0.2s;
}

.btn-outline-purple:hover {
    background-color: #7c18a5;
    color: #fff !important;
    ;
}

.btn-check:checked+.btn-outline-purple {
    color: #fff !important;
    ;
    background-color: #7c18a5;
    border-color: #7c18a5;
}

input[type='checkbox'].btn-check+label.btn-outline-purple {
    background-color: transparent;
    color: #7c18a5;
    border-color: #7c18a5;
}

input[type='checkbox'].btn-check:checked+label.btn-outline-purple {
    background-color: #7c18a5 !important;
    color: #fff !important;
    border-color: #7c18a5 !important;
}

.payment-btn-agree {
    display: inline-block;
    background: #fff;
    color: #1eb512;
    padding: 5px 30px;
    border-radius: 2px;
    font-weight: 600;
    margin: 0 5px;
    font-size: 16px;
    letter-spacing: 3px;
    border: 1px solid #1eb512;
}

.btn-brown {
    background-color: #b68410;
    color: #fff;
}

.btn-gray {
    background: #695d60;
    border-radius: 10px;
    color: #ffffff;
    font-size: 12px;
    padding: 2px 6px;
}

.btn-gray:hover {
    background: #373636;
    color: #ffffff;
}

.payment-btn-agree:hover {
    background: #1eb512;
    color: #fff;
    border: 1px solid #1eb512;
}

.payment-btn-agree.active {
    background: #1eb512;
    color: #fff;
    border: 1px solid #1eb512;
}

.btn-light-blue {
    color: #0f6fec;
    background-color: rgba(15, 111, 236, 0.1);
}

.btn-light-blue:hover {
    color: #fff;
    background-color: #3188fa;
}

.btn-light-brown {
    color: #a07c1b;
    background-color: rgba(202, 137, 62, 0.1);
}

.btn-light-brown:hover {
    color: #fff;
    background-color: #a07c1b;
}

.btn-dark {
    background-color: #353a40;
    border: none;
    color: #fff;
    padding: 5px 15px;
    transition: all 0.5s;
}

.btn-dark:hover {
    background-color: rgb(134, 134, 134);
    color: #fff;
}

.btn-green-tick {
    background-color: #8bc34a;
    border: none;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    width: 50%;
}

.btn-green {
    background-color: #8bc34a;
    border: none;
    color: #fff;
    padding: 3px 8px;
    transition: all 0.5s;
}

.btn-green:hover {
    background-color: #508118;
    color: #fff;
}

/* Line顏色的實心+中空按鈕 */
.btn-green2 {
    background-color: #1eb512 !important;
    color: #fff !important;
    background-color: #1eb512 !important;
}

.btn-green2:hover {
    background-color: #1eb512 !important;
    color: #fff !important;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.btn-outline-green {
    color: #1eb512;
    border: 1px solid #1eb512;
    background-color: transparent;
    transition: all 0.15s ease-in-out;
}

.btn-outline-green:hover,
.btn-outline-green:focus {
    color: #fff;
    background-color: #1eb512;
    border-color: #1eb512;
}

.btn-outline-green:active {
    color: #fff;
    background-color: #1eb512;
    border-color: #1eb512;
}

.btn-check:checked+.btn-outline-green {
    color: #fff;
    background-color: #1eb512;
    border-color: #1eb512;
}

input[type='checkbox'].btn-check:checked+label.btn-outline-green {
    background-color: #1eb512;
    color: white;
    border-color: #1eb512;
}

input[type='checkbox'].btn-check+.btn-outline-green {
    background-color: white;
    color: #1eb512;
    border-color: #1eb512;
}

.btn-linepay {
    background-color: #08bf5b;
    border: none;
    border-radius: 5px !important;
    color: #fff;
    padding: 3px 8px;
    transition: all 0.5s;
}

.btn-linepay:hover {
    background-color: #08bf5b;
    color: #fff;
}

.btn-yellow {
    background-color: #d18063;
    border: none;
    color: #fff;
    padding: 5px 15px;
    transition: all 0.5s;
}

.btn-yellow:hover {
    background-color: #ce6139;
    color: #fff;
}

.btn-yellow1 {
    background-color: #ffa100;
    border: 1px solid #ffa100;
    color: #fff;
    padding: 5px 15px;
    transition: all 0.5s;
    border-radius: 5px;
}

.btn-yellow1:hover {
    background-color: #ffa100;
    color: #fff;
}

.btn-yellow2 {
    color: #fff;
    background-color: #cf9e1e;
    border-color: #cf9e1e;
    transition: all 0.15s ease-in-out;
}

.btn-yellow2:hover {
    color: #cf9e1e;
    border: 1px solid #cf9e1e;
    background-color: transparent;
}

.btn-yellow3 {
    background: linear-gradient(to bottom, #fceea2, #ebad28);
    border: none;
    color: #5c3b00 !important;
    border-radius: 50px;
    padding: 10px 24px;
    font-weight: 700;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(235, 173, 40, 0.35);
}

.btn-yellow3:hover {
    background: linear-gradient(to bottom, #fae676, #c58a09);
    color: #5c3b00 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(235, 173, 40, 0.45);
}


.btn-click-wallet1 {
    background-color: #ae7763;
    border: none;
    color: #fff;
    padding: 5px 10px;
    transition: all 0.5s;
}

.btn-click-wallet1:hover {
    background-color: #e28393;
    color: #fff;
}

.btn-click-wallet2 {
    background-color: #6c3d1e;
    border: none;
    color: #fff;
    padding: 5px 10px;
    transition: all 0.5s;
}

.btn-click-wallet2:hover {
    background-color: #773315;
    color: #fff;
}

.btn-click-wallet3 {
    background-color: #b68410;
    border: none;
    color: #fff;
    padding: 5px 10px;
    transition: all 0.5s;
}

.btn-click-wallet3:hover {
    background-color: #7f5b08;
    color: #fff;
}

.btn-click-wallet4 {
    background-color: #888888;
    border: none;
    color: #fff;
    padding: 5px 10px;
    transition: all 0.5s;
}

.btn-click-wallet4:hover {
    background-color: #696868;
    color: #fff;
}

.btn-click-wallet5 {
    background-color: #efb511;
    border: none;
    color: #fff;
    padding: 5px 25px;
    transition: all 0.5s;
    border-radius: 20px;
}

.btn-click-wallet5:hover {
    background-color: #ffa11c;
    color: #fff;
}

.btn-disabled {
    background-color: #646463;
    border: none;
    color: #fff;
    padding: 5px 15px;
    transition: all 0.5s;
}

.btn-disabled:hover {
    background-color: #a0a0a0;
    color: #fff;
}

.btn-click {
    background-color: #876d5a;
    border: none;
    color: #fff;
    padding: 5px 15px;
    transition: all 0.5s;
}

.btn-click:hover {
    background-color: #d18063;
    color: #fff;
}

.btn-copy {
    background-color: #d18063;
    border: none;
    color: #fff;
    padding: 5px 15px;
    transition: all 0.5s;
}

.btn-copy:hover {
    color: #9e5b42;
}

.btn-save {
    background-color: #876d5a;
    border: none;
    color: #fff;
    padding: 5px 45px;
    border-radius: 2px;
    transition: all 0.5s;
}

.btn-save:hover {
    color: #c1baac;
}

.btn-deepblue {
    background-color: #47617a;
    border: none;
    color: #fff;
    padding: 5px 45px;
    border-radius: 2px;
    transition: all 0.5s;
}

.btn-deepblue:hover {
    color: #ffffff;
}

.btn-cancel {
    background-color: #8f8f8f;
    border: none;
    color: #fff;
    padding: 5px 45px;
    border-radius: 2px;
    transition: all 0.5s;
}

.btn-cancel:hover {
    color: #f1f1f1;
}

.btn-search-coupon {
    background-color: #ffad46;
    border: none;
    color: #fff;
    padding: 5px 25px;
    border-radius: 5px;
    transition: all 0.5s;
    float: right;
}

@media screen and (max-width: 768px) {
    .inside-search-coupon {
        width: 100%;
    }
}

.btn-search-coupon:hover {
    color: #f1f1f1;
    background: #ec982f;
}

.btn-coupon {
    background: linear-gradient(45deg, #7a175e, #de0022, #ffa94c);
    border: none;
    color: #fff;
    border-radius: 0px;
    transition: all 0.5s;
}

.btn-coupon:hover {
    color: #f1f1f1;
    background: linear-gradient(135deg, #7a175e, #de0022, #ffa94c);
}

.btn-group1 {
    background: #ffa100;
    border: none;
    color: #fff;
    border-radius: 0px;
    transition: all 0.5s;
}

.btn-group1:hover {
    color: #f1f1f1;
    background: linear-gradient(135deg, #e6a300, #ffd24d, #e6a300);
}

.btn-lecture {
    background: linear-gradient(45deg, #188393, #61b26a, #2d4656);
    border: none;
    color: #fff;
    border-radius: 0px;
    transition: all 0.5s;
}

.btn-lecture:hover {
    color: #f1f1f1;
    background: linear-gradient(135deg, #188393, #61b26a, #2d4656);
}

.btn-activity {
    background: linear-gradient(45deg, #931818, #e37777, #9f4242);
    border: none;
    color: #fff;
    border-radius: 0px;
    transition: all 0.5s;
}

.btn-activity:hover {
    color: #f1f1f1;
    background: linear-gradient(45deg, #931818, #e37777, #9f4242);
}

.btn-forum {
    color: #ffffff;
    background: linear-gradient(135deg, #7a175e, #de0022, #ffa94c);
    border-radius: 12px;
    padding: 5px;
    border: none;
    font-size: 0.75rem;
}

@media only screen and (max-width: 480px) {
    .btn-forum {
        padding: 5px 10px;
    }
}

.btn-forum:hover {
    color: #ffffff;
    background: linear-gradient(45deg, #7a175e, #de0022, #ffa94c);
}

#textlistn {
    width: 100%;
    display: none;
}

.number-color {
    background: linear-gradient(to top, #b48239, #ebc963, #ebc963);
    background: -webkit-linear-gradient(to top, #b48239, #ebc963, #ebc963);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 40px;
    font-weight: bold;
}

.number-color-only {
    background: linear-gradient(to top, #ff9a06, #ebc963, #ebc963);
    background: -webkit-linear-gradient(to top, #b48239, #ebc963, #ebc963);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: bold;
}

.number-color-silver {
    text-shadow: -1px 0 #ff5722, 0 3px #ff5722, 3px 0 #ff5722, 0 -2px #ff5722;
    font-size: 36px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.text-black {
    color: #000;
}

.text-purple {
    color: #7c18a5;
}

.text-blue {
    color: #8bdeff;
}

.text-blue1 {
    color: #035d99;
}

.text-brown {
    color: #9d866d;
}

.text-c-yellow {
    color: #e69214;
}

.text-c-pink {
    color: #dd5353;
}

.text-light-pink {
    color: #fcc;
}

.text-c-blue {
    color: #336699;
}

.text-c-gray {
    color: #eee;
}

.text-gray {
    color: #909090;
}

.text-green {
    color: #bbff54;
}

.text-green1 {
    color: #21f78d;
}

.text-c-darkgray {
    color: rgb(156, 156, 156);
}

.text-c-lightbrown {
    color: #876d5a;
}

.text-c-success {
    color: #0e9915;
}

.text-c-light-green {
    color: #00df0c;
}

.text-c-lightbrown2 {
    color: #c1baac;
}

.text-c-white {
    color: #fff;
}

.text-c-lightOrange {
    color: #ff641e;
}

.text-orange {
    color: #ff6408;
}

.text-orange1 {
    color: #e2bc62;
}

.text-orange2 {
    color: #f26b27;
}

.text-red {
    color: red;
}

.text-red1 {
    color: #ff1c1c;
}

.text-red2 {
    color: #e57067;
}

.text-yellow {
    color: #c5a982 !important;
}

.text-yelloow1 {
    color: #cd9c5e;
}

.text-yellow2 {
    color: #c7a659;
}

.text-yellow3 {
    color: #ffa100;
}

.text-yellow4 {
    color: #cf9e1e;
}

.text-yellow5 {
    color: #ffe28c !important;
}

.text-yellow6 {
    background: linear-gradient(to bottom, #fceea2, #ebad28);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-yellow {
    background: rgb(255, 212, 0);
}

.bg-yellow1 {
    background: #dbc792;
}

.bg-yellow2 {
    background: #ffa100;
    border: 1px solid #ffa100;
}

.bg-yellow3 {
    background: #fdf5e5;
}

.bg-yellow4 {
    background: linear-gradient(15deg, #ffd79f 0%, #ffffff 60%, #f3d08c 100%);
}

.bg-yellow5 {
    background: linear-gradient(135deg,
            #fff3b0 0%,
            #ffd700 25%,
            #ffcc00 50%,
            #f4b400 75%,
            #d4af37 100%);

    color: #5c4300;

    box-shadow:
        0 4px 14px rgba(255, 215, 0, 0.45),
        0 0 18px rgba(255, 223, 0, 0.35);

    border: 1px solid rgba(255, 255, 255, 0.35);
}

.bg-header {
    background: linear-gradient(to bottom, #b3183b, #de0022);
}

.bg-lightblue {
    color: #0f6fec;
    background-color: rgba(15, 111, 236, 0.1);
}

.bg-lightblue2 {
    background-color: rgba(15, 111, 236, 0.1);
}

.bg-lightbrown2 {
    background: #f8f2ea;
}

.bg-lightbrown3 {
    background: #f8f5f3;
}

.bg-lightbrown4 {
    background: #dcdcdc;
}

.bg-lightbrown5 {
    background: url('../img/icon_bg.svg');
    background-size: cover;
}

.bg-lightbrown6 {
    background: #c9c3b2;
}

.bg-lightgray {
    background: #eee;
}

.bg-white {
    background: #fff;
}

.bg-line {
    background: #32ac00;
}

.bg-green {
    background: #1a760f;
}

.bg-green1 {
    background: #cff4c1;
}

.bg-green2 {
    background: url('../img/texas1.png') no-repeat center center;
    background-size: cover;
}

@media (max-width: 768px) {
    .bg-green2 {
        background: url('../img/texas3.png') no-repeat center center;
        background-size: cover;
    }
}

.bg-green3 {
    background: #196d15;
}

.bg-green4 {
    background: #063b07;
}

.bg-green5 {
    background: #0ad15c;
}

.bg-orange {
    background: #ff6408;
}

.bg-orange1 {
    background: #ef6f36;
}

.bg-orange2 {
    background-color: #ff8d00 !important;
}

.bg-orange3 {
    background: #f75d19 !important;
    border: 1px solid #f75d19;
}

.bg-opacity-10 {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.bg-purple {
    background: #7a175e;
}

.bg-purple2 {
    background: linear-gradient(135deg,
            #c86cff 0%,
            #a445d1 18%,
            #7c18a5 42%,
            #5f1280 68%,
            #b05cff 100%);

    color: #fff;

    box-shadow:
        0 4px 14px rgba(124, 24, 165, 0.42),
        0 0 22px rgba(168, 85, 247, 0.30);

    border: 1px solid rgba(255, 255, 255, 0.18);

    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.15);
}

.bg-purple3 {
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 215, 0, 0.08), transparent 35%),
        radial-gradient(circle at 85% 30%, rgba(255, 105, 180, 0.08), transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(0, 255, 255, 0.05), transparent 50%),
        linear-gradient(135deg, #6e3b8c, #1f0f2e);
}

.bg-purple4 {
    background: #a342c9;
}

.bg-lightorange {
    background: #fff8f0;
}

.bg-red {
    background: #b51d29;
}

.bg-red1 {
    background: #c13f3f;
}

.bg-red2 {
    background: linear-gradient(135deg, #c62828, #8b0000);
    color: #fff;
    padding: 1rem;
    box-shadow: 0 8px 20px rgba(139, 0, 0, 0.5), 0 0 15px rgba(255, 0, 0, 0.3);
}


/* .bg-red2 {
    background: linear-gradient(145deg, #c79c43, #f5e09e, #d3af50, #fffbe5);
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.3), inset -2px -2px 4px rgba(0, 0, 0, 0.2);
} */

.bg-transparent {
    background: transparent;
}

.bg-mem-y1 {
    background: #e9df17 !important;
}

.bg-mem-y2 {
    background: #e9e66e !important;
}

.bg-mem-y3 {
    background: #ddda4c !important;
}

.bg-mem-y4 {
    background: #f7f481 !important;
}

.bg-coupon {
    background: linear-gradient(to top, #7a175e, #de0022);
}

.bg-beige {
    background: beige;
}

.bg-gray-pd10 {
    background-color: #f1f1f1;
    padding: 10px 10px 0px 10px;
}

.bg-blue {
    background: linear-gradient(145deg, #0d2567, #4b65b1);
}

.bg-blue1 {
    background: #035d99 !important;
}

.bg-blue2 {
    background: #174669 !important;
}

.bg-blue3 {
    background: #3f9ff3;
}

.bg-blue4 {
    background: linear-gradient(135deg,
            #276687 0%,
            #4fc3f7 25%,
            #2196f3 50%,
            #1565c0 75%,
            #0d47a1 100%);

    color: #ffffff;

    box-shadow:
        0 4px 14px rgba(33, 150, 243, 0.45),
        0 0 18px rgba(79, 195, 247, 0.35);

    border: 1px solid rgba(255, 255, 255, 0.25);
}

.bg-brown {
    background-color: #58432e !important;
}

.bg-brown1 {
    background-color: #c7a659 !important;
}

.bg-brown2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #7e97b8 !important;
    background-color: #e0e8ef;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: rgba(255, 255, 255, 0.333);
    border-radius: 40px 40px 40px 40px;
    padding: 20px 10px;
    transform: translate(0px, 0px) rotate(0deg);
    transition: 0.2s;
    box-shadow: -4px -2px 16px 0px #ffffff, 4px 2px 16px 0px rgb(95 157 231 / 48%);
}

.bg-brown2:hover {
    color: #516d91;
    background-color: #E5EDF5;
    box-shadow: -2px -1px 8px 0px #ffffff, 2px 1px 8px 0px rgb(95 157 231 / 48%);
}

.bg-brown2:active {
    box-shadow: none;
    transform: translateY(0) scale(1);
}


.bg-brown3 {
    background-color: #e9d6ad !important;
    border: none;
}

.vip-img {
    max-width: 600px;
    height: auto;
    border-radius: 20px;
}

@media (max-width: 768px) {
    .vip-img {
        max-width: 350px;
    }
}

.round-20 {
    border-radius: 20px;
}


/* VIP頁面的卡片按鈕顏色 */

.bg-vipbtn {
    background-color: #2b5985 !important;
}

.bg-cbtn0 {
    background-color: #a3a3a3;
    border: #a3a3a3 !important;
}

.bg-cbtn0-1 {
    background-color: #7f7f7f;
    border: #7f7f7f !important;
}

.bg-cbtn1 {
    background-color: #ca8155 !important;
    border: #ca8155 !important;
}

.bg-cbtn1-1 {
    background-color: #cd6a2e !important;
    border: #cd6a2e !important;
}

.bg-cbtn2 {
    background-color: #7d858b !important;
    border: #7d858b !important;
}

.bg-cbtn2-1 {
    background-color: #5b636b !important;
    border: #5b636b !important;
}

.bg-cbtn3 {
    background-color: #caa85f !important;
    border: #caa85f !important;
}

.bg-cbtn3-1 {
    background-color: #b7913d !important;
    border: #b7913d !important;
}

.bg-cbtn4 {
    background-color: #e58931 !important;
    border: #e58931 !important;
}

.bg-cbtn4-1 {
    background-color: #f07344 !important;
    border: #f07344 !important;
}

.bg-cbtn5 {
    background-color: #d1c7f5 !important;
    border: #d1c7f5 !important;
}

.bg-cbtn5-1 {
    background-color: #9c9be9 !important;
    border: #9c9be9 !important;
}

.bg-cbtn6 {
    background-color: #7c85d3 !important;
    border: #7c85d3 !important;
}

.bg-cbtn6-1 {
    background-color: #2c4ea7 !important;
    border: #2c4ea7 !important;
}

.bg-cbtn7 {
    background-color: #8b7546 !important;
    border: #8b7546 !important;
}

.bg-cbtn7-1 {
    background-color: #36322a !important;
    border: #36322a !important;
}

.bg-vipbtn {
    background-color: #2b5985 !important;
}


/* VIP頁面的卡片背景顏色 */

.bg-cbg0 {
    background-color: #d1d5d9 !important;
}

.bg-cbg1 {
    background-color: #e5a97f !important;
}

.bg-cbg2 {
    background-color: #a1a7ad !important;
}

.bg-cbg3 {
    background-color: #e1bd69 !important;
}

.bg-cbg4 {
    background-color: #f2a977 !important;
}

.bg-cbg5 {
    background-color: #b7ade5 !important;
}

.bg-cbg6 {
    background-color: #5068b4 !important;
}

.bg-cbg7 {
    background-color: #675a40 !important;
}

/* VIP頁面的會員按鈕顏色 */

.bg-vbtn0 {
    background-color: #ffffff !important;
    border: none;
    color: #555 !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.18);
}

.bg-vbtn1 {
    background-color: #ffffff !important;
    border: none;
    color: #555 !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.18);
}

.bg-vbtn2 {
    background-color: #ffffff !important;
    border: none;
    color: #555 !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.18);
}

.bg-vbtn3 {
    background-color: #ffffff !important;
    border: none;
    color: #555 !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.18);
}

.bg-vbtn4 {
    background-color: #ffffff !important;
    border: none;
    color: #555 !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.18);
}

.bg-vbtn5 {
    background-color: #ffffff !important;
    border: none;
    color: #555 !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.18);
}

.bg-vbtn6 {
    background-color: #ffffff !important;
    border: none;
    color: #555 !important;
}


/* VIP頁面的會員"升級"按鈕顏色 */

.bg-vbtn0-1 {
    background-color: #2e2b2b !important;
    border: none;
}

.bg-vbtn1-1 {
    background-color: #bb5815 !important;
    border: none;
}

.bg-vbtn2-1 {
    background-color: #b6b6b6 !important;
    border: none;
}

.bg-vbtn3-1 {
    background-color: #d0a054 !important;
    border: none;
}

.bg-vbtn4-1 {
    background-color: #e64821 !important;
    border: none;
}

.bg-vbtn5-1 {
    background-color: #a06df8 !important;
    border: none;
}

.bg-vbtn6-1 {
    background-color: #15459b !important;
    border: none;
}


/* VIP頁面的會員背景顏色 */

.bg-vbg0 {
    background-color: #736f6f !important
}

.bg-vbg1 {
    background-color: #8d7155 !important;
}

.bg-vbg2 {
    background-color: #808080 !important;
}

.bg-vbg3 {
    background-color: #ae7c5e !important;
}

.bg-vbg4 {
    background-color: #788fa1 !important;
}

.bg-vbg5 {
    background-color: #dd9b57 !important;
}

.bg-vbg6 {
    background-color: #ee8367 !important;
}

.badge-fix {
    transform: translate(-100%, 20%);
}


/* #4f133c */

.outline-orange {
    border: 1px solid #ff6408;
}

.outline-green {
    border: 1px solid #1a760f;
}

.mall-link .card {
    border-radius: 15px;
}

.mall-link .card img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 25vh;
    padding: 3rem;
}

.mall-link .card-title {
    color: #0047ba;
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    .mall-link .card img {
        height: 15vh;
        padding: 1rem;
    }
}

.btn-mall {
    display: inline-block;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    /* border-radius: 8px; */
    text-align: center;
    border: none;
    transition: box-shadow 0.2s ease 0s, -ms-transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s, transform 0.1s ease 0s;
    background: linear-gradient(to right, rgb(230, 30, 77) 0%, rgb(227, 28, 95) 50%, rgb(215, 4, 102) 100%);
    color: #fff;
}

.btn-mall_dis {
    display: inline-block;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    border-radius: 8px;
    text-align: center;
    border: none;
    transition: box-shadow 0.2s ease 0s, -ms-transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s, transform 0.1s ease 0s;
    background: linear-gradient(to right, rgb(106 106 106) 0%, rgb(135 123 129) 100%);
    color: #fff;
}

.light-height-10 {
    line-height: 10px;
}

.light-height-20 {
    line-height: 20px;
}

.light-height-30 {
    line-height: 30px;
}

.light-height-40 {
    line-height: 40px;
}

.light-height-50 {
    line-height: 50px;
}

.borde-member {
    border: 2px solid #e3e3e3;
    border-radius: 3px;
    box-shadow: 2px 4px 5px 1px rgba(0, 0, 0, 0.1);
}

.RobotoTxt {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    line-height: 1.2;
}

h3.block_title {
    position: relative;
    padding-bottom: 0.6em;
    margin-bottom: 0.3rem;
    padding-left: 0.5em;
}

h3.block_title:before {
    display: block;
    background-color: #876d5a;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1.3em;
    width: 5px;
    top: -0.1em;
    border-radius: 4px;
}

a,
a:active,
a:hover {
    outline: none;
    border: none;
    color: #333;
    text-decoration: none;
}

ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}


/*20230103新增-index 上方icon用*/

.btn_bg1 {
    background: url('../img/index/1.svg');
}

.btn_bg2 {
    background: url('../img/index/2.svg');
}

.btn_bg3 {
    background: url('../img/index/3.svg');
}

.btn_bg4 {
    background: url('../img/index/4.svg');
}

.btn_bg5 {
    background: url('../img/index/5.svg');
}

.btn_bg6 {
    background: url('../img/index/6.svg');
}

.btn_bg7 {
    background: url('../img/index/7.svg');
}

.btn_bg8 {
    background: url('../img/index/8.svg');
}

.btn_bg9 {
    background: url('../img/index/11.svg');
}

.btn_bg10 {
    background: url('../img/index/10.svg');
}

.btn_bg11 {
    background: url('../img/index/21.svg');
}

.btn_bg12 {
    background: url('../img/index/17.svg');
}

.btn_bg13 {
    background: url('../img/index/13.svg');
}

.btn_bg14 {
    background: url('../img/index/18_1.svg');
}

.btn_bg15 {
    background: url('../img/index/19_1.svg');
}

.btn_bg16 {
    background: url('../img/index/20_1.svg');
}

.btn_bg {
    background-position: center;
    display: inline-block;
    border: none;
    padding: 10px;
    width: 70px;
    height: 70px;
    transition: all 0.5s;
    cursor: pointer;
}

.btn_bg:hover {
    width: 65px;
    height: 65px;
}


/*submenu list*/

.clloect_list {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.clloect_list li {
    width: 180px;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
    margin: 15px 0;
}

.clloect_list li .img {
    width: 160px;
    height: 50px;
}

.clloect_list li .img img {
    max-height: 120%;
}

.clloect_list li .step {
    width: 100%;
    font-size: 1rem;
}

.clloect_list li .step p:first-child {
    padding-top: 10px;
}

.clloect_list li .step p:last-child {
    line-height: 0;
}

@media screen and (max-width: 900px) {
    .clloect_list {
        max-width: initial;
    }

    .clloect_list li {
        width: 25%;
    }

    .clloect_list li .img {
        width: 100%;
        text-align: center;
    }
}

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

    .clloect_list li .step:first-child,
    .clloect_list li .step:last-child {
        font-size: 0.9rem;
    }
}


/*Footer*/

@media screen and (max-width: 475px) {
    .footer-page {
        background: #f8f5f3 none repeat scroll 0 0;
        border-bottom: 1px solid #ebebeb;
        padding: 30px 0;
        margin: 0 0 80px 0;
        text-align: center;
    }
}

.footer-page {
    background: #f8f5f3 none repeat scroll 0 0;
    border-bottom: 1px solid #ebebeb;
    padding: 30px 0;
    text-align: center;
}

.footer-logo {
    color: #876d5a;
}

.footer-copyright {
    color: #505050;
}

.footer-copyright a:hover {
    color: #664b38;
}


/*coupon-scroll-to-top*/

.scroll-to-top {
    position: fixed;
    right: 10px;
    bottom: 50px;
    display: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background: linear-gradient(to top, #7a175e, #de0022);
    line-height: 45px;
    z-index: 9999;
}

.scroll-to-top:focus,
.scroll-to-top:hover {
    color: #fff;
}

.scroll-to-top:hover {
    background: linear-gradient(to top, #8d2971, #e61f3d);
}

.scroll-to-top svg {
    font-weight: 800;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/*coupon-scroll-to-down*/

.scroll-to-down {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background: #c1baac;
    line-height: 45px;
}

.scroll-to-down:focus,
.scroll-to-down:hover {
    color: #fff;
}

.scroll-to-down:hover {
    background: #876d5a;
}

.scroll-to-down i {
    font-weight: 800;
}


/*scroll-social*/

.Scroll-container {
    position: fixed;
    bottom: 90px !important;
    right: 10px;
    z-index: 9999;
    cursor: pointer;
}


/*payment-scroll-to-top*/

.scroll-to-top-p {
    position: fixed;
    right: 10px;
    bottom: 30px;
    display: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background: linear-gradient(to top, #dc4219, #ebc12a);
    line-height: 45px;
    z-index: 9999;
}

.scroll-to-top-p:focus,
.scroll-to-top-p:hover {
    color: #fff;
}

.scroll-to-top-p:hover {
    background: linear-gradient(to top, #dc4219, #ebc12a);
}

.scroll-to-top-p svg {
    font-weight: 800;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 這行確保SVG居中 */
}


/*lecture-scroll-to-top*/

.scroll-to-top-l {
    position: fixed;
    right: 10px;
    bottom: 50px;
    display: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background: linear-gradient(to top, #2d4656, #58aa3d);
    line-height: 45px;
    z-index: 9999;
}

.scroll-to-top-l:focus,
.scroll-to-top-l:hover {
    color: #fff;
}

.scroll-to-top-l:hover {
    background: linear-gradient(to top, #2d4656, #58aa3d);
}

.scroll-to-top-l svg {
    font-weight: 800;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Scroll-icon-holder {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    /* background: #016fb9; */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.Scroll-first {
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

.Scroll-icon-holder img {
    border-radius: 50%;
    width: 100%;
}

.Scroll-icon-holder:hover {
    opacity: 0.8;
}

.Scroll-icon-holder i {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 25px;
    color: #ffffff;
}

.Scroll {
    width: 60px;
    height: 60px;
    /* background: #d23f31; */
}

.Scroll-options {
    list-style-type: none;
    margin: 0;
    position: absolute;
    bottom: 70px;
    right: 0;
    opacity: 0;
    transition: all 0.3s ease;
    transform: scale(0);
    transform-origin: 85% bottom;
}

.Scroll:hover+.fab-options,
.Scroll-options {
    opacity: 0.7;
    transform: scale(1);
}

.Scroll-options li {
    display: flex;
    justify-content: flex-end;
    padding: 5px;
}

.Scroll-label {
    padding: 2px 5px;
    align-self: center;
    user-select: none;
    white-space: nowrap;
    border-radius: 3px;
    font-size: 16px;
    background: #666666;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    margin-right: 10px;
}

@media screen and (max-width: 768px) {
    .scroll-to-top {
        bottom: 50px;
    }

    .scroll-to-top svg {
        top: 15px;
    }

    .Scroll-container {
        bottom: 170px !important;
    }
}


/*activity-scroll-to-top*/

.scroll-to-top-a {
    position: fixed;
    right: 10px;
    bottom: 90px;
    display: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    color: #ab1839;
    background: linear-gradient(to top, #cfcfcf, #ffffff);
    line-height: 45px;
    z-index: 9999;
}

.scroll-to-top-a:focus,
.scroll-to-top-a:hover {
    color: #fff;
}

.scroll-to-top-a:hover {
    background: linear-gradient(to top, #cfcfcf, #ffffff);
}

.scroll-to-top-a svg {
    font-weight: 800;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/*20230103新增-mane背景*/

.title_bg {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}


/*20230103修改-header-page*/

.header-page-bg {
    /* background: url(../img/index/bg_1.svg) center center no-repeat; */
    background-image: linear-gradient(26deg, #a19698 30%, #6c6c6c 100%);
    background-size: cover;
    max-height: 100px;
}

@media (max-width: 768px) {
    .header-page-bg {
        background: url(../img/index/bg.svg) center center no-repeat;
        /* background-image: linear-gradient(120deg, #bbd2c5 0%, #536976 100%); */
        background-size: cover;
        min-height: 120px;
    }
}


/*header-carousel */

.owl-carousel .owl-dots {
    position: absolute;
    width: 100%;
    display: flex;
    bottom: -5px;
    justify-content: center;
}

.owl-carousel button.owl-dot {
    background-color: #dfdfdf;
    border-radius: 5px;
    display: inline-block;
    height: 5px;
    width: 30px;
    margin: 5px;
}

.owl-carousel button.owl-dot.active {
    background-color: #de0022;
    box-shadow: inset 2px 0px 2px -2px #333;
}

.owl-carousel-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
    padding-left: 20px;
}

.owl-carousel-inner p {
    font-size: 3rem;
}

.owl-carousel-inner .display-2 {
    font-size: 2rem;
}

.owl-carousel-inner span {
    font-size: 1.2rem;
}


/* .header-carousel  .owl-carousel-item  {
    background: rgb(238, 235, 235);
    padding: 5px;
  } */

@media (max-width: 768px) {

    /* .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 500px;
        padding: 0;
    } */
    /* .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: auto;
        object-fit: cover;
    
    } */
    .owl-carousel-inner p {
        font-size: 1.3rem;
    }

    .owl-carousel-inner span {
        font-size: 0.9rem;
    }
}


/* .header-carousel .owl-dots {
    position: absolute;
    width: 60px;
    height: 100%;
    top: 0;
    right: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .header-carousel .owl-dots .owl-dot {
    position: relative;
    width: 45px;
    height: 45px;
    margin: 5px 0;
    background: #FFFFFF;
    box-shadow: 0 0 30px rgba(255, 255, 255, .9);
    border-radius: 45px;
    transition: .5s;
  }

  .header-carousel .owl-dots .owl-dot.active {
    width: 60px;
    height: 60px;
  }

  .header-carousel .owl-dots .owl-dot img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 2px;
    border-radius: 45px;
    transition: .5s;
  } */


/*首頁輪播圖 按鈕*/

.index-slideshow .owl-nav {
    width: 1000px;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s;
    position: absolute;
}

.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
    position: absolute;
    background: hsla(0, 0%, 100%, 0.7) !important;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}

.owl-carousel .owl-nav .owl-next {
    right: -1.4rem;
    top: 35%;
}

.owl-carousel .owl-nav .owl-prev {
    left: -1.4rem;
    top: 35%;
}

owl-carousel .owl-nav .owl-next:focus,
.owl-carousel .owl-nav .owl-next:hover,
.owl-carousel .owl-nav .owl-prev:focus,
.owl-carousel .owl-nav .owl-prev:hover {
    transform: scale(1.15);
    transition: 0.3s;
}

.owl-carousel .owl-nav .owl-next span,
.owl-carousel .owl-nav .owl-prev span {
    color: #3c3c3c;
    font-size: 1.8rem;
    line-height: 1;
}


/*名片*/

.box-wrap {
    display: flex;
    justify-content: center;
}

.box-content {
    width: 50%;
}

.header-bar {
    background: linear-gradient(to bottom, #b3183b, #de0022);
    letter-spacing: 1.2px;
    font-size: 0.9rem;
}


/*1222新增-抽獎刮刮樂上方跑馬燈用*/

.header-bar01 {
    background: #dc3545;
    letter-spacing: 1.2px;
    font-size: 1.1rem;
    clear: both;
    position: sticky;
    z-index: 100;
}

.header-bar02 {
    background: #bb2954;
    letter-spacing: 1.2px;
    font-size: 1.1rem;
}

.header-bar .bar,
.header-bar01 .bar {
    text-align: center;
    flex: 1;
    position: relative;
    padding: 8px 0;
}


/*1222新增-抽獎刮刮樂上方跑馬燈用*/

.header-bar .bar span {
    color: #ffffff;
}

.header-bar .bar a {
    margin-left: 15px;
    padding: 4px 20px;
    border-radius: 2px;
    background-color: #ff4f0094;
    transition: all 0.5s;
    color: #fff;
}

.profile-header {
    padding-top: 1.5rem;
}

@media (max-width: 768px) {
    .profile-header {
        text-align: center;
        padding-top: 0;
    }

    .profile-header .breadcrumb {
        justify-content: center;
    }
}

.img-relative {
    position: relative;
    padding-left: 0;
    padding-right: 0;
}

.user-img2 {
    position: absolute;
    width: 120px;
    max-height: 120px;
    top: calc(80% - 65%);
    right: calc(100% - 30%);
    border-radius: 50%;
    height: 100%;
    background: url('../img/2022_vip/no_photo.svg') center center;
    object-fit: cover;
}

.user-img2-1 {
    position: absolute;
    width: 60px;
    max-height: 60px;
    top: calc(100% - 67%);
    right: calc(100% - 19%);
    border-radius: 50%;
    height: 100%;
    background: url('../img/2022_vip/no_photo.svg') center center;
    object-fit: cover;
}

.user-img3 {
    position: absolute;
    top: 7rem;
    left: 15rem;
    font-size: 1rem;
}

.user-img4 {
    width: 60px;
    /* 或任意固定數值 */
    height: 60px;
    /* 保持和寬度相同，確保是正方形 */
    object-fit: cover;
    /* 裁切而非壓縮圖片 */
    border-radius: 50%;
    /* 製作成圓形 */
}

.logo-no {
    width: 80px;
    height: 80px;
    top: calc(100% - 67%);
    right: calc(100% - 21%);
    border-radius: 50%;
    background: url('../img/coupon/no-photo.png') center center;
    object-fit: cover;
    border: 1px solid #a8a8a8;
}

.logo-no img {
    width: 80px !important;
    height: 80px !important;
    top: calc(100% - 67%);
    right: calc(100% - 21%);
    border-radius: 50%;
    background: url('../img/coupon/no-photo.png') center center;
    object-fit: cover;
}

.message-user-img1 {
    position: absolute;
    width: 50px;
    max-height: 50px;
    border-radius: 50%;
    height: 100%;
    background: url('../img/2022_vip/no_photo.svg') center center;
    background-size: 50px;
    object-fit: cover;
}

.message-user-img2 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.user-vip5 {
    position: absolute;
    top: 45%;
    left: 55%;
    font-size: 22px;
}


/*如果螢幕寬度為 481px 以上 且 768px 以下，就套用 css 設定*/

@media screen and (min-width: 481px) and (max-width: 768px) {
    .user-img2 {
        position: absolute;
        max-width: 60px;
        top: calc(100% - 67%);
        right: calc(100% - 19%);
        border-radius: 50%;
        background: url('../img/2022_vip/no_photo.svg') center center;
        background-repeat: no-repeat;
        object-fit: cover;
    }

    .user-img2-1 {
        position: absolute;
        max-width: 60px;
        top: calc(100% - 67%);
        right: calc(100% - 19%);
        border-radius: 50%;
        background: url('../img/2022_vip/no_photo.svg') center center;
        background-repeat: no-repeat;
        object-fit: cover;
    }

    .user-img3 {
        position: absolute;
        top: 49%;
        left: 30%;
        font-size: 0.8rem;
    }

    .user-vip4 {
        position: absolute;
        top: 49%;
        left: 33%;
    }

    .user-vip5 {
        position: absolute;
        top: 19%;
        left: 35%;
    }
}

@media only screen and (min-width: 321px) and (max-width: 768px) {
    .vip_00 {
        font-size: 0.9rem;
        font-weight: 800;
    }

    .vip_00 a,
    vip_00 a:active,
    vip_00 a:hover {
        outline: none;
        border: none;
        color: #b51c2b;
        text-decoration: none;
    }

    .user-vip4 {
        position: absolute;
        top: 48%;
        left: 27%;
        font-size: 0.8rem;
    }

    .user-vip5 {
        position: absolute;
        top: 45%;
        left: 55%;
        font-size: 0.8rem;
    }

    .user-img3 {
        position: absolute;
        top: 6.5rem;
        left: 13rem;
    }
}

.card-label1 {
    position: absolute;
    font-size: 1.9vw;
    top: 33%;
    left: 23%;
    color: #232323;
}

.card-label2 {
    font-size: 1.9vw;
    top: 25%;
    left: 35%;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 250px;
}

.card-label3 {
    position: absolute;
    font-size: 1.9vw;
    top: 33%;
    left: 23%;
    color: #cebd99;
}

.card-label4 {
    position: absolute;
    top: 72%;
    right: 23%;
    color: #cebd99;
}

.card-label5 {
    position: absolute;
    top: 72%;
    left: 13%;
    color: #b1b1b1;
}

.card-label6 {
    position: absolute;
    font-size: 1.9vw;
    top: 40%;
    left: 38%;
    color: #2d2d2d;
}

.mem-disabled {
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

label.card-label6 span {
    color: #871818;
    font-size: 1.1rem;
}

.vip1_4 {
    color: #ffffff;
}

.vip5 {
    color: #cebd99;
}

#member-img3 {
    max-width: 1.2rem;
    top: 32%;
    left: 24%;
}

.title-label {
    margin-left: -15px;
}

@media screen and (max-width: 481px) and (max-width: 768px) {
    .user-img2 {
        max-width: 60px;
        height: 60px;
        width: 100%;
        background: url(../img/2022_vip/no_photo.svg) center center;
        background-size: 60px;
        object-fit: cover;
    }

    .user-img2-1 {
        max-width: 60px;
        height: 60px;
        width: 100%;
        background: url(../img/2022_vip/no_photo.svg) center center;
        background-size: 60px;
        object-fit: cover;
    }

    #member-img3 {
        max-width: 1.5rem;
    }

    .card-label1 {
        font-size: 1.3rem;
    }

    .card-label2,
    .card-label3 {
        font-size: 1.3rem;
    }

    .card-label4,
    .card-label5,
    .card-label6 {
        font-size: 0.95rem;
        letter-spacing: 0.5px;
        left: 18%;
    }

    .box-content {
        width: 100%;
    }
}


/*預覽名片*/

#cardfixShow {
    width: 420px;
    position: fixed;
    bottom: 20px;
    right: 0px;
    z-index: 999;
}

@media screen and (max-width: 481px) and (max-width: 768px) {
    #cardfixShow {
        width: 360px;
        position: fixed;
        bottom: 20px;
        right: 0px;
        z-index: 999;
    }
}

#cardfixShow button {
    background-color: #a19083;
    color: #fff;
    border: none;
}

#cardfixShow button:hover {
    background-color: #8b786a;
    color: #fff;
}


/*詳細資訊*/

.socail .btn-social {
    margin-right: 5px;
    color: #9b9b9b;
    border: 1px solid #9b9b9b;
    border-radius: 38px;
    transition: 0.3s;
}

.socail .btn-social.active {
    margin-right: 5px;
    color: #336699;
    border: 1px solid #336699;
    border-radius: 38px;
    transition: 0.3s;
}

.socail .btn-social.active.square {
    border-radius: 20%;
}

.socail .btn-social.active svg.fa-facebook-f {
    color: #1877f2;
}

.socail .btn-social.active svg.fa-line {
    color: #00c300;
}

.socail .btn-social.active svg.fa-instagram {
    color: #e1306c;
}

.socail .btn-social.active svg.fa-youtube {
    color: #ff0000;
}

.socail .btn-social.active svg.fa-weixin {
    color: #7bb32e;
}

.socail .btn-social.active svg.fa-telegram {
    color: #0088cc;
}

.socail .btn-social.active svg.fa-tiktok {
    color: #010101;
}

.zi_hr_02 {
    background-color: transparent !important;
    /* 顏色透明 */
    position: relative;
    overflow: visible;
    text-align: center;
    border-bottom: 1px black solid;
}

.zi_hr_02::after {
    position: absolute;
    top: -0.7em;
    left: 6%;
    display: inline-block;
    content: '名片按鈕連結';
    background: #ffffff;
    color: black;
}

.text-ig {
    color: #e1306c;
}

.text-line {
    color: #00c300;
}

.text-fb {
    color: #1877f2;
}

.text-apple {}

.text-google {}

.text-tr {
    color: #0088cc;
}


/*alliance*/

.alliance-img {
    width: 80px;
}

.alliance-member {
    margin-bottom: 3rem;
    text-align: center;
}

.alliance-member img {
    width: 10rem;
    height: 10rem;
    border: 0.5rem solid rgba(0, 0, 0, 0.1);
}

.alliance-member h4,
.alliance-member .h4 {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .alliance-img {
        width: 50px;
    }

    .alliance-member img {
        width: 6rem;
        height: 6rem;
        border: 0.3rem solid rgba(0, 0, 0, 0.1);
    }
}


/* GroupTeams */

.GroupTeams-carousel::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.GroupTeams-carousel::after {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

@media (min-width: 768px) {

    .GroupTeams-carousel::before,
    .GroupTeams-carousel::after {
        width: 200px;
    }
}

@media (min-width: 992px) {

    .GroupTeams-carousel::before,
    .GroupTeams-carousel::after {
        width: 300px;
    }
}

.GroupTeams-carousel .owl-nav {
    position: absolute;
    width: 350px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: 0.5s;
    z-index: 1;
}

.GroupTeams-carousel:hover .owl-nav {
    width: 300px;
    opacity: 1;
}

.GroupTeams-carousel .owl-nav .owl-prev,
.GroupTeams-carousel .owl-nav .owl-next {
    position: relative;
    color: #c1baac;
    font-size: 40px;
    transition: 0.5s;
}

.GroupTeams-carousel .owl-nav .owl-prev:hover,
.GroupTeams-carousel .owl-nav .owl-next:hover {
    color: #876d5a;
}

.GroupTeams-carousel .GroupTeams-img img {
    background-image: url(../img/2022_vip/no_photo.svg);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
    width: 100px;
    height: 100px;
}

.GroupTeams-carousel .GroupTeams-img .btn-square {
    position: absolute;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
}

.GroupTeams-carousel .owl-item .GroupTeams-text {
    margin-bottom: 30px;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
    transform: scale(0.8);
    transition: 0.5s;
}

.GroupTeams-carousel .owl-item.center .GroupTeams-text {
    transform: scale(1);
}

.btn-square,
.btn-square img,
.btn-square svg {
    width: 30px;
    height: 30px;
}

.btn-square2 {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* 移除內邊距，讓圖示置中 */
}



/*time line*/

.timeline {
    position: relative;
    padding: 0;
    list-style: none;
}

.timeline:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 80px;
    width: 2px;
    margin-left: -1.5px;
    content: '';
    background-color: #dbdbdc;
}

.timeline>li {
    position: relative;
    min-height: 50px;
    margin-bottom: 50px;
}

.timeline>li:after,
.timeline>li:before {
    display: table;
    content: ' ';
}

.timeline>li:after {
    clear: both;
}

.timeline>li .timeline-panel {
    position: relative;
    float: right;
    width: 100%;
    padding: 0 10px 0 165px;
    text-align: left;
}

.timeline>li .timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0;
}

.timeline>li .timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0;
}

.timeline>li .timeline-image {
    position: absolute;
    z-index: 100;
    left: 0;
    width: 150px;
    height: auto;
    margin-left: 0;
    text-align: center;
    color: white;
    border: 3px solid #e9ecef;
    border-radius: 5px;
    background-color: #fff;
    padding: 5px;
}

.timeline>li .timeline-image h4,
.timeline>li .timeline-image .h4 {
    font-size: 10px;
    line-height: 14px;
    margin-top: 12px;
}

.timeline>li.timeline-inverted>.timeline-panel {
    float: right;
    padding: 0 10px 0 165px;
    text-align: left;
}

.timeline>li.timeline-inverted>.timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0;
}

.timeline>li.timeline-inverted>.timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0;
}

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

.timeline .timeline-heading h4,
.timeline .timeline-heading .h4 {
    margin-top: 0;
    color: #1a3468;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
}

.timeline .timeline-heading h4.subheading,
.timeline .timeline-heading .subheading.h4 {
    text-transform: none;
    font-size: 0.9rem;
    font-weight: 400;
    font-family: 'Microsoft JhengHei;', sans-serif;
    color: #9e5b42;
}

.timeline .timeline-body>ul,
.timeline .timeline-body>p {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .timeline:before {
        left: 50%;
    }

    .timeline>li {
        min-height: 100px;
        margin-bottom: 100px;
    }

    .timeline>li .timeline-panel {
        float: left;
        width: 41%;
        padding: 0 20px 20px 30px;
        text-align: right;
    }

    .timeline>li .timeline-image {
        left: 50%;
        width: 100px;
        height: 100px;
        margin-left: -50px;
    }

    .timeline>li .timeline-image h4,
    .timeline>li .timeline-image .h4 {
        font-size: 13px;
        line-height: 18px;
        margin-top: 16px;
    }

    .timeline>li.timeline-inverted>.timeline-panel {
        float: right;
        padding: 0 30px 20px 20px;
        text-align: left;
    }
}

@media (min-width: 992px) {
    .timeline>li {
        min-height: 120px;
    }

    .timeline>li .timeline-panel {
        padding: 0 20px 20px;
    }

    .timeline>li .timeline-image {
        width: 120px;
        height: auto;
        margin-left: -60px;
        border: 5px solid #e9ecef;
    }

    .timeline>li .timeline-image h4,
    .timeline>li .timeline-image .h4 {
        font-size: 18px;
        line-height: 26px;
        margin-top: 30px;
    }

    .timeline>li.timeline-inverted>.timeline-panel {
        padding: 0 20px 20px;
    }
}

@media (min-width: 1200px) {
    .timeline>li {
        min-height: 20px;
    }

    .timeline>li .timeline-panel {
        padding: 0 20px 20px 100px;
    }

    .timeline>li .timeline-image {
        width: 140px;
        height: auto;
        margin-left: -70px;
        border: 7px solid #e9ecef;
    }

    .timeline>li .timeline-image h4,
    .timeline>li .timeline-image .h4 {
        margin-top: 40px;
    }

    .timeline>li.timeline-inverted>.timeline-panel {
        padding: 0 100px 20px 20px;
    }
}


/*獎勵任務*/

.task-dollar-title {
    font-size: 1.2rem;
}

.wrapA {
    height: 60px;
    margin: 10px;
    display: flex;
}

.wrapA a {
    align-self: flex-end;
}

.line {
    display: inline-block;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    width: 3px;
    min-height: 1em;
    background-color: currentColor;
    opacity: 0.25;
    height: 75px;
}

.task-caculate-area {
    margin-bottom: 3rem;
    text-align: center;
}

.task-caculate {
    background-color: #f8f2ea;
    width: 5rem;
    height: 5rem;
}

.task-caculate-area .task-caculate img {
    padding: 15px;
    width: 5rem;
    height: 5rem;
}

.task-caculate h6 {
    margin-top: 15px;
    color: rgb(85, 85, 85);
}

.task-progress-area {
    background-color: #f3f5f7;
}

.task-progress-wrapper {
    background-color: white;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 30px;
    position: relative;
    z-index: 3;
    text-decoration: none;
    overflow: hidden;
    width: 100%;
    display: block;
    outline: none;
    box-shadow: 0 3px 8px 0 rgb(0 0 0 / 3%);
    transition: border 0.15s linear, transform 0.15s linear, background-color 0.15s linear, box-shadow 0.15s linear, opacity 0.15s linear;
}

.task-box {
    position: relative;
    padding-left: 80px;
}

.task-img {
    width: 100px;
    transition: all 0.3s linear;
}

.task-content {
    color: #9d9d9d;
    font-size: 1.2rem;
    height: 90px;
}

.task-content .rank1 {
    background: linear-gradient(to top, #9c9c9c, #5f5f5f, #5f5f5f);
    background: -webkit-linear-gradient(to top, #9c9c9c, #5f5f5f, #5f5f5f);
}

.task-content .rank2 {
    background: linear-gradient(to top, #867474, #553b30, #553b30);
    background: -webkit-linear-gradient(to top, #867474, #553b30, #553b30);
}

.task-content .rank3 {
    background: linear-gradient(to top, #fce29a, #dfa322, #dfa322);
    background: -webkit-linear-gradient(to top, #fce29a, #dfa322, #dfa322);
}

.task-content .rank4 {
    background: linear-gradient(to top, #976bb1, #507efc, #507efc);
    background: -webkit-linear-gradient(to top, #976bb1, #507efc, #507efc);
}

.task-content .rank5 {
    background: linear-gradient(to top, #91a1ff, #6b184f, #6b184f);
    background: -webkit-linear-gradient(to top, #91a1ff, #6b184f, #6b184f);
}

.task-content .rank {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: bold;
    font-size: 1.8rem;
}

.task-daily-area {
    background-color: #fff;
}

.task-daily-area span {
    /*color: #9c9c9c;*/
}

.border-color {
    border: 1px solid #ebc963;
    margin-left: 1%;
    margin-right: 1%;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 2%;
}

.mission-txt {
    font-size: 0.9rem;
}

.mission-txt a {
    color: #aacaf0;
}

.mission-txt a:hover {
    color: #fff;
}

.img-relative3 {
    position: relative;
}

.image-task-gold p,
.image-task-gray {
    font-family: Microsoft JhengHei;
    color: #727272;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 50px;
}

.image-task-gold {
    background-image: url(../img/coin.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    margin: 0 auto;
    justify-content: center;
    width: 50px;
    height: 50px;
}

.image-task-gray {
    background-image: url(../img/coin_gray.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    margin: 0 auto;
    justify-content: center;
    width: 50px;
    height: 50px;
}

@media (max-width: 768px) {
    .task-img {
        width: 70px;
    }

    .task-box {
        position: relative;
        padding: 0;
    }

    .task-content {
        font-size: 0.8rem;
        height: auto;
    }

    .task-content .rank {
        font-size: 1.8rem;
        margin-bottom: 0px;
    }

    .task-dollar-title {
        font-size: 0.9rem;
    }

    .border-color {
        padding: 3%;
    }
}

.rank img {
    width: 50%;
    margin-top: 20px;
    margin-bottom: 20px;
}

@media screen and (max-width: 900px) {
    .rank img {
        width: 80%;
    }

    .sub-nenu-toggle li {
        font-size: 0.7em;
    }
}


/*member Info 自我介紹*/

.memberInfo-card {
    padding-left: 20px;
    padding-top: 20px;
}

@media (max-width: 768px) {
    .memberInfo-card {
        padding: 0;
    }
}

.announce {
    padding-left: 4rem;
    height: 30px;
    background: url(../img/news.png) left center no-repeat;
    background-size: 60px;
    width: 100%;
}

.announce-info {
    padding-left: 1rem;
    width: 100%;
}

.announce .marquee_box {
    display: block;
    position: relative;
    height: 30px;
    overflow: hidden;
}

.follow-count {
    padding: 60px;
}

.follow-count .follow-item {
    padding: 30px;
    transition: all ease-in-out 0.4s;
    background: #fff;
    height: 100%;
    width: 100%;
}

.follow-count .follow-item .icon img {
    width: 80px;
}

.follow-count .follow-item .service-txt {
    line-height: 24px;
}

.follow-count .follow-item .service-txt h4 {
    color: #485664;
    transition: ease-in-out 0.3s;
}

.follow-count .follow-item .service-txt p {
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 0;
}

.follow-count .follow-item:hover {
    transform: translateY(-10px);
    box-shadow: 0px 0 60px 0 rgb(79, 95, 110, 0.1);
}

.follow-count .follow-item:hover .service-txt p {
    color: #336699;
}

@media (max-width: 768px) {
    .follow-count {
        padding: 10px;
    }

    .follow-count .follow-item .icon img {
        width: 110px;
    }

    .follow-count .follow-item .service-txt {
        padding-top: 10px;
    }
}


/* 錢包 */

.header-wallet {
    background: #efefcd;
    font-family: 'Roboto Condensed', sans-serif, 微軟正黑體;
    letter-spacing: 1.2px;
    font-size: 0.9rem;
}

.wallet h3 {
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #876d5a;
}

.wallet .wallet-member {
    margin-bottom: 3rem;
    background: #ddd7cc;
}

.wallet .wallet-member div {
    flex: 0 0 auto;
    width: 100%;
}

.wallet .wallet-member img {
    width: 10rem;
}

@media (max-width: 768px) {
    .wallet .wallet-member {
        margin-bottom: 0.5rem;
    }

    .wallet .wallet-member img {
        width: 8rem;
    }

    .wallet .wallet-member div {
        flex: 0 0 auto;
        width: 33%;
    }

    .wallet .wallet-member .coin h4 {
        line-height: 60px;
    }

    .wallet .wallet-member .btn-coin {
        padding-top: 40px;
    }
}


/*my card*/

.btn-mycard {
    padding: 5px 15px;
}

.card-info-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
}

.card-copy-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
    height: 750px;
}

.card-memberInfo-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
    height: 650px;
}

.card-collect-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
}

.card-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
    height: 850px;
}

.top-relative {
    position: relative;
}

.border2 {
    position: absolute;
    top: -13px;
    left: 70%;
    background-color: #da5a57;
    border: #da5a57;
    color: white;
    border-radius: 50%;
    height: 25px;
    width: 25px;
}


/*1130-新增*/

.border-top-10 {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.border-bottom-10 {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.card-image {
    position: relative;
    text-align: center;
}

.card-image .check-card {
    position: absolute;
    top: 20px;
    right: 20px;
}

.card-icon {
    position: relative;
    margin: -50px 0 10px 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c1baac;
    background: #ffffff;
    border-radius: 100px;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
    transition: 0.5s;
    border: solid 5px #fff;
}

.opacity-8 {
    opacity: 0.8;
}

.opacity-5 {
    opacity: 0.5;
}

.card-item:hover .card-icon h4 {
    color: #ffffff;
    background: #876d5a;
}

@media (max-width: 768px) {
    .btn-mycard {
        padding: 5px 8px;
    }

    .card-item,
    .card-copy-item,
    .card-collect-item,
    .card-memberInfo-item {
        height: auto;
    }
}


/*表格*/

.col-form-label {
    min-width: 130px !important;
    color: #727272;
}

label.form-control {
    border: 0;
}

.form-select,
input.form-control {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #ced4da;
    color: #727272;
    border-radius: 0;
}

.fd_form {
    border: 1px solid #ced4da;
    color: #727272;
    border-radius: 5px;
    font-size: 0.85rem;
    padding: 5px;
}


/* voucher-list */

.voucher-img2 {
    flex-shrink: 0;
    width: 80px;
}

.voucher-info {
    min-width: 0;
}

.voucher-title1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.voucher-item {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1);
}


/*分享組隊*/

.friend-align {
    text-align: center;
}

.friend-style {
    background-color: #fff;
    margin: 3%;
    margin-bottom: 3%;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 5%;
}

.friend-img,
.voucher-img {
    max-width: 60px;
    min-width: 60px;
    min-height: 60px;
    background: url('../img/2022_vip/no_photo.svg') center center no-repeat;
    object-fit: cover;
}

.friend-img-size {
    width: 60px;
    height: 60px;
}

.voucher-img1 {
    max-width: 60px;
    min-width: 60px;
}

@media screen and (max-width: 768px) {
    .friend-align {
        text-align: left;
    }

    .friend-style {
        border: 0px;
        background-color: #f0efee;
        border-radius: 100px / 135px;
    }

    .friend-info {
        display: none;
    }

    .bouns-change {
        margin-right: 20px;
    }
}


/*兌換券 複製名片*/

.voucher-align,
.copyCard-align {
    text-align: center;
}

.voucher-style,
.copyCard-style {
    background-color: #fff;
    margin: 3%;
    margin-bottom: 3%;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 5%;
}

.voucher-style h6,
.copyCard-style h6 {
    height: 25px;
    font-size: 0.9rem;
}

.btn-voucher {
    color: #e28393;
    background-color: rgba(221, 119, 166, 0.1);
}

.btn-voucher:hover {
    color: #fff;
    background-color: #d84f66;
}

.btn-scratch {
    color: #fff;
    background-color: rgba(154, 2, 67, 1);
}

.btn-scratch:hover {
    color: #fff;
    background-color: #5b0b15;
}

.btn-copyCard {
    color: #409b5e;
    background-color: rgba(81, 211, 103, 0.1);
}

.btn-copyCard:hover {
    color: #fff;
    background-color: #2fad2a;
}

.voucher-give,
.copyCard-give {
    width: 100%;
}

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

    .voucher-align,
    .copyCard-align {
        text-align: left;
    }

    .voucher-style,
    .copyCard-style {
        border: 0px;
        background-color: #f0efee;
        border-radius: 10px;
    }

    .copyCard-give {
        width: 70px;
    }

    .copyCard-style h6 {
        font-size: small;
    }
}

.product-details-title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 20px;
    color: #0a263b;
}

@media screen and (max-width: 768px) {
    .product-details {
        margin-top: 20px;
    }
}


/*購買方案*/

.section-payment-bg {
    background-color: #c2bbb5;
    font-family: 'Roboto', sans-serif;
    padding-top: 30px;
}

.section-payment-title {
    text-align: center;
    padding: 20px 0;
}

.section-payment-title h2 {
    font-size: 32px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 0;
    color: #876d5a;
}

.section-payment-title p {
    margin: 10px;
}

.payment .box:hover {
    /*padding: 15px 15px 15px 15px;*/
    box-shadow: 10px 15px 30px rgba(0, 0, 0, 0.18);
    color: #a11e1e;
}

.payment .box h3 {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: bold;
    height: 40px;
}

.payment .box h4 {
    padding-bottom: 10px;
    font-size: 19px;
    font-weight: bold;
    height: 30px;
}

.payment .box:hover p {
    color: rgb(85 82 82);
}

.payment .box p {
    color: #8a8a8a;
    font-size: 15px;
    margin: 0;
    padding: 0;
    line-height: 25px;
    height: 150px;
}

@media (max-width: 768px) {
    .section-payment-bg {
        padding: 30px 0 20px 0;
    }

    .payment .box p {
        height: auto;
        font-size: 0.9rem;
        line-height: 18px;
    }

    .payment .box h3 {
        margin-bottom: 5px;
        font-size: 18px;
        font-weight: bold;
        height: 40px;
    }

    .payment .box h4 {
        padding-bottom: 0px;
        font-size: 18px;
        font-weight: bold;
        height: 30px;
    }
}

.payment_btn_b {
    color: #564e47;
    padding: 10px;
    border-top: 1px solid #d7d7d7;
    border-left: 1px solid #d7d7d7;
}

.payment_btn_a {
    color: #564e47;
    padding: 10px;
    border-top: 1px solid #d7d7d7;
    border-right: 1px solid #d7d7d7;
    border-left: 1px solid #d7d7d7;
}

.payment_btn,
.payment_btn_l {
    color: #564e47;
    padding: 10px;
    border-right: 1px solid #d7d7d7;
    border-top: 1px solid #d7d7d7;
}

.payment_btn,
.payment_btn02,
.payment_btn03 a {
    color: #564e47;
}

.payment_btn:hover {
    background: #e4dfdf;
}


/* 勾選時改變外觀 */

#scales:checked+label {
    background-color: #1eb512;
    color: white;
}


/*1130新增*/

.payment_btn_l:hover {
    background: #e4dfdf;
    border-bottom-left-radius: 10px;
}

.payment_btn_r:hover {
    background: #e4dfdf;
    border-bottom-right-radius: 10px;
}

.payment_btn_b:hover {
    background: #e4dfdf;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.payment_btn_a:hover {
    background: #e4dfdf;
}


/*提領回饋*/

.payment_btn02,
.payment_btn_r {
    color: #564e47;
    padding: 10px;
    border-top: 1px solid #d7d7d7;
}

.payment_btn02:hover {
    background: #e4dfdf;
}


/*購買方案內頁分享商品鈕*/

.payment_btn03 {
    background: #876d5a;
    color: #fff;
    padding: 10px;
    border-top: 1px solid #d7d7d7;
}

.payment_btn03:hover {
    background: #423535;
    color: #fff;
}

.pay_main {
    display: flex;
    justify-content: center;
    align-items: center;
}

.payment-thumb .percent-count {
    right: 0;
    top: 0;
    position: absolute;
}


/*折扣碼使用*/

.payment-thumb .triangle {
    display: inline-block;
    font-weight: bold;
    text-align: right;
    border-radius: 0 10px 0 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 65px 75px 0;
    border-color: transparent #f75d19 transparent transparent;
}

.payment-thumb .triangle span {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #f3f094;
    font-size: 0.72rem;
    font-weight: 800;
    font-family: '微軟正黑體', 'TaipeiSansTCBeta-Regular', 'TaipeiSansTCBeta-Light';
}

.relative_01 {
    position: relative;
    width: 100%;
    height: 100%;
}

.absolute_001 {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #fff;
    border-top: 50px solid transparent;
    border-right: 70px solid #fc2424;
}

.absolute_001 span {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #fff;
}

.Label_tab {
    min-height: 23px;
}

.Label_tab span {
    background-color: #f59626;
    color: #fff;
    font-size: 0.8rem;
    padding: 5px;
    text-align: center;
    font-family: '微軟正黑體', 'TaipeiSansTCBeta-Regular', 'TaipeiSansTCBeta-Light';
}

.payment-category {
    background: #f5f5f5;
    border-radius: 50%;
    height: 4rem;
    width: 4rem;
    display: flex;
    /* 使用 Flexbox */
    justify-content: center;
    /* 水平置中 */
    align-items: center;
    /* 垂直置中 */
    color: #f75d19;
    margin: 0 auto;
    /* 添加水平自動 margin */
}

.payment-category:hover {
    background: #f75d19;
    color: #fff;
    cursor: pointer;
}

.payment-category .text-center {
    display: flex;
    flex-direction: column;
    /* 使內容垂直排列 */
    align-items: center;
    /* 垂直置中 */
}

.payment-category-text {
    font-size: 0.85rem;
    padding-top: 5px;
}

.btn-search-payment {
    height: 100%;
    width: 100%;
    white-space: nowrap;
    color: #fff;
    border: 0;
    cursor: pointer;
    background: #f75d19;
    transition: all 0.2s ease-out, color 0.2s ease-out;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

@media (max-width: 400px) {
    .payment-category-text {
        font-size: 0.75rem;
    }
}

.box {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/*-------- 新品 Style Css --------*/

.promotePosition {
    position: absolute;
    top: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1;
    max-width: 70%;
    color: #ffffff;
}

.promoteText {
    background-color: #fc7624;
    padding: 1px 5px;
    letter-spacing: normal;
    height: auto !important;
    border-radius: 0 1px 1px 0;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.8rem;
    font-family: 'TaipeiSansTCBeta-Regular', 'TaipeiSansTCBeta-Light', '微軟正黑體';
}

.saleText {
    position: absolute;
    top: 150px;
    background-color: #c92451;
    padding: 1px 10px 1px 5px;
    letter-spacing: normal;
    height: auto !important;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.75rem;
    min-width: 120px;
    background: linear-gradient(-135deg, transparent 15px, #0b3c85 0);
    color: #fff;
}

@media (min-width: 420px) and (max-width: 480px) {
    .saleText {
        top: 186px;
        font-size: 0.8rem;
    }
}

@media (min-width: 980px) and (max-width: 1080px) {
    .saleText {
        position: absolute;
        top: 320px;
        font-size: 18px;
        min-width: 180px;
    }
}

@media only screen and (min-width: 1200px) {
    .saleText {
        position: absolute;
        top: 386px;
        font-size: 18px;
        min-width: 180px;
    }
}

.hstack {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.gap-xl-3 {
    gap: 1rem !important;
}

.vr-line {
    display: inline-block;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background-color: currentColor;
    opacity: 0.25;
}

.icon-md {
    height: 3.5rem;
    width: 3.5rem;
    font-size: 0.9em;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.currency-icon {
    line-height: 70px;
}

.round-image {
    position: relative;
    text-align: center;
}

.round-image .people,
.round-image .people2,
.round-image .people3 {
    position: absolute;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    z-index: -1;
}

.round-image .people {
    top: 10px;
    left: 35px;
}

.round-image .people2 {
    top: 28px;
    left: 35px;
}

.round-image .people3 {
    top: 16px;
    left: 32px;
}

.round-image .rankBorder {
    position: absolute;
    top: -12px;
    left: 15px;
    z-index: 0;
    width: 220px;
}


/*0208新增*/

.item-price .round-image .rankBorder {
    width: 80px;
}

.item-price .round-image .people {
    top: 5px;
    left: 0px;
    z-index: auto;
}

.item-price .round-image .people {
    position: absolute;
    left: 15px;
    top: -15px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .item-price .round-image .rankBorder {
        top: -20px;
        left: 1px;
    }

    .item-price .round-image .people {
        position: absolute;
        left: 15px;
        top: -35px;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        object-fit: cover;
    }

    .item-price .round-image .people {
        top: -20px;
        left: 0px;
        z-index: auto;
        background: url(../img/2022_vip/no_photo.svg) center center no-repeat;
        object-fit: cover;
    }
}

.items-group a {
    display: block;
}


/*0208新增結束*/

.round-image .rankBorder2,
.round-image .rankBorder3 {
    position: absolute;
    top: 0;
    left: -18px;
    z-index: 0;
    width: 280px;
}

.rank-img {
    max-width: 1050px;
    margin-top: 130px;
}

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

    .round-image .people,
    .round-image .people2,
    .round-image .people3 {
        position: absolute;
        width: 80px;
        height: 80px;
    }

    .round-image .people {
        top: 22px;
        left: 15px;
        z-index: auto;
    }

    .round-image .people2 {
        top: 30px;
        left: 18px;
    }

    .round-image .people3 {
        top: 25px;
        left: 18px;
    }

    .round-image .rankBorder {
        top: 10px;
        left: 1px;
        width: 110px;
    }

    .round-image .rankBorder2,
    .round-image .rankBorder3 {
        top: 20px;
        left: -5px;
        width: 125px;
    }

    .rank-img {
        max-width: 100%;
        margin-top: 110px;
    }
}


/*1202新增我的介紹-社群按鈕用*/

.socail_fb {
    background: url(../img/icon/fb.svg) no-repeat center;
    cursor: pointer;
    border: none;
    width: 50px;
    height: 50px;
}

.socail_fb:hover {
    background: url(../img/icon/fb_b.svg) no-repeat center;
}

.socail_line {
    background: url(../img/icon/line.svg) no-repeat center;
    cursor: pointer;
    border: none;
    width: 50px;
    height: 50px;
}

.socail_line:hover {
    background: url(../img/icon/line_b.svg) no-repeat center;
}

.socail_ig {
    background: url(../img/icon/ig.svg) no-repeat center;
    cursor: pointer;
    border: none;
    width: 50px;
    height: 50px;
}

.socail_ig:hover {
    background: url(../img/icon/ig_b.svg) no-repeat center;
}

.socail_yt {
    background: url(../img/icon/yt.svg) no-repeat center;
    cursor: pointer;
    border: none;
    width: 50px;
    height: 50px;
}

.socail_yt:hover {
    background: url(../img/icon/yt_b.svg) no-repeat center;
}

.socail_wc {
    background: url(../img/icon/wc.svg) no-repeat center;
    cursor: pointer;
    border: none;
    width: 50px;
    height: 50px;
}

.socail_wc:hover {
    background: url(../img/icon/wc_b.svg) no-repeat center;
}

.socail_tg {
    background: url(../img/icon/tg.svg) no-repeat center;
    cursor: pointer;
    border: none;
    width: 50px;
    height: 50px;
}

.socail_tg:hover {
    background: url(../img/icon/tg_b.svg) no-repeat center;
}

.socail_tk {
    background: url(../img/icon/tk.svg) no-repeat center;
    cursor: pointer;
    border: none;
    width: 50px;
    height: 50px;
}

.socail_tk:hover {
    background: url(../img/icon/tk_b.svg) no-repeat center;
}


/*0119新增oa開始*/

.socail_oa {
    background: url(../img/icon/oa.svg) no-repeat center;
    cursor: pointer;
    border: none;
    width: 50px;
    height: 50px;
}

.socail_oa:hover {
    background: url(../img/icon/oa_b.svg) no-repeat center;
}


/*0119新增oa結束*/

.Marquee {
    background: #d1c8c2;
    color: #4c4949;
    font-size: 18px;
    font-weight: 500;
}


/*1202新增我的介紹-頁籤樣式用*/

.ah-tab-wrapper {
    position: relative;
}

.ah-tab-wrapper *,
.ah-tab-wrapper *:before,
.ah-tab-wrapper *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.ah-tab {
    border-bottom: 1px solid #ebebeb;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: -0.3em;
}

.ah-tab::before,
.ah-tab::after {
    bottom: 0;
    content: '';
    height: 100%;
    opacity: 0;
    position: absolute;
    z-index: 1;
    transition: opacity 0.3s;
}

.ah-tab::before {
    left: -100%;
    width: 30px;
    background: -moz-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%);
    background: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%);
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
}

.ah-tab::after {
    right: 100%;
    width: 80px;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%);
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
}

.ah-tab-overflow-left::before {
    opacity: 1;
    left: 0;
}

.ah-tab-overflow-right::after {
    /*opacity: 1;*/
    right: 0;
}

.ah-tab-overflow-wrapper {
    position: absolute;
    width: 43px;
    height: 100%;
    right: 100%;
    opacity: 0;
    top: 0;
    z-index: 1;
    text-align: center;
}

.ah-tab-overflow-wrapper[data-ah-tab-active='true'] {
    right: 0;
    opacity: 1;
    transition: opacity 0.3s;
}

.ah-tab-overflow-menu {
    background: transparent url(images/ah-tab-overflow-menu.svg) center center no-repeat;
    background-size: 18px;
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 0;
    cursor: pointer;
    transition: opacity 0.3s;
    opacity: 0.7;
}

.ah-tab-overflow-wrapper:hover .ah-tab-overflow-menu {
    opacity: 1;
}

.ah-tab-overflow-list {
    position: absolute;
    top: -1000%;
    right: 0;
    text-align: left;
    background-color: #fff;
    border: 1px solid #e9e9e9;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.09);
    list-style: none;
    transition: opacity 0.3s;
    opacity: 0;
    max-width: 290px;
}

.ah-tab-overflow-list::after {
    content: ' ';
    display: block;
    position: absolute;
    top: -14px;
    right: 14px;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-bottom-color: #fff;
}

.ah-tab-overflow-list::before {
    content: ' ';
    display: block;
    position: absolute;
    top: -16px;
    right: 13px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: #cdcdcd;
}

.ah-tab-overflow-wrapper:hover .ah-tab-overflow-list {
    top: 99%;
    padding: 10px 0;
    opacity: 1;
}

.ah-tab-overflow-list:hover {
    display: block;
}

.ah-tab-item {
    color: #8b8b8b;
    cursor: pointer;
    display: inline-block;
    letter-spacing: normal;
    transition: all 0.3s;
    text-decoration: none;
    font-size: 16px;
}

.ah-tab>.ah-tab-item {
    border-bottom: 3px solid transparent;
    margin-right: 10px;
    padding: 15=0px 0;
}

@media (min-width: 768px) {
    .ah-tab>.ah-tab-item {
        margin-right: 50px;
    }
}

.ah-tab-item[data-ah-tab-active='true'] {
    color: #876d5a;
}

.ah-tab>.ah-tab-item:hover {
    border-bottom: 3px solid #8b8b8b;
}

.ah-tab>.ah-tab-item[data-ah-tab-active='true'] {
    border-bottom-color: #876d5a;
}

.ah-tab-overflow-list>.ah-tab-item {
    border-left: 3px solid transparent;
    display: block;
    overflow: hidden;
    padding: 10px 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ah-tab-overflow-list>.ah-tab-item:hover {
    border-left-color: #8b8b8b;
}

.ah-tab-overflow-list>.ah-tab-item[data-ah-tab-active='true'] {
    border-left-color: #876d5a;
}

.ah-tab-content-wrapper {
    margin: 10px 0;
}

.ah-tab-content {
    display: none;
    padding: 5px;
}

.ah-tab-content[data-ah-tab-active='true'] {
    display: block;
    height: auto;
}


/*1202新增我的帳號用-圖片上傳部分*/

.image-preview-wrapper {
    display: block;
    width: 80%;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
}

.spinner-wrapper {
    opacity: 0;
    margin: 0;
    padding: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.opacity-1 {
    opacity: 1;
}


/*1202新增我的介紹區-下方任務區用*/

.task-block {
    padding: 10px 0;
    background: linear-gradient(to TOP, #dee2e6 0%, #ffffff 100%);
    text-align: center;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
}

.task-block .pic {
    display: inline-block;
    width: 110px;
    height: 110px;
    margin-bottom: 20px;
    z-index: 1;
    position: relative;
}

.task-block .pic:before {
    content: '';
    width: 100%;
    height: 0;
    border-radius: 50%;
    background: #88939e;
    position: absolute;
    bottom: 105%;
    right: 0;
    left: 0;
    opacity: 0.2;
    transform: scale(2);
    transition: all 0.3s linear 0s;
}

.task-block:hover .pic:before {
    height: 100%;
}

.task-block .pic:after {
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #223040;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.task-block .pic img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    transform: scale(1);
    transition: all 0.9s ease 0s;
}

.task-block:hover .pic img {
    box-shadow: 0 0 0 10px #334456;
    transform: scale(0.7);
}

.task-block .team-content {
    margin-bottom: 5px;
}

.task-block .title {
    font-size: 18px;
    font-weight: 300;
    color: #ffe97b;
    letter-spacing: 1px;
    text-transform: capitalize;
    margin-bottom: 5px;
}

.task-block .post {
    display: block;
    font-size: 22px;
    font-weight: 900;
    color: #ffffff;
    text-transform: capitalize;
}

.task-block .social {
    width: 100%;
    padding: 0;
    margin: 0;
    background: #0d2a37;
    position: absolute;
    bottom: -100px;
    left: 0;
    transition: all 0.5s ease 0s;
}

.task-block:hover .social {
    bottom: 0;
}

.task-block .social li {
    display: inline-block;
}

.task-block .social li a {
    display: block;
    padding: 1px;
    color: #fff;
    transition: all 0.3s ease 0s;
}

.task-block .social li a:hover {
    color: #0d2a37;
    background: #f7f5ec;
}

@media only screen and (max-width: 990px) {
    .task-block {
        margin-bottom: 0px;
    }
}

.ellipsis {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-height: 80px;
}

@media screen and (max-width: 380px) {
    .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 550px;
    }
}


/*明細使用*/

.bouns_table table {
    border-collapse: collapse;
    border-radius: 10px 10px 0px 0px;
}

.bouns_table th {
    width: 25vw;
    height: 40px;
    background: #8b827f;
    color: #ebebeb;
    border-bottom: none;
}

.bouns_table tbody {
    height: 40px;
    text-align: center;
    border-bottom: 1px solid #e3e3e3;
}

.bouns_tabletxt {
    font-size: 0.8rem;
}

@media (min-width: 600px) and (max-width: 1200px) {
    .bouns_tabletxt {
        font-size: calc(1rem + (1.3-1.2) * ((100vw - 600px) / (1200 - 600)));
    }
}

@media (min-width: 1200px) {
    .bouns_tabletxt {
        font-size: 1.1rem;
    }
}

.bouns_table td {
    background-color: #ffffff;
    width: 25vw;
    height: 50px;
    text-align: center;
}

.bouns_table tr {
    height: auto;
    border-bottom: 1px solid #dddddd;
}

.bouns_table tr:last-of-type {
    border-bottom: 2px solid #8b827f;
}

.bouns_table tr:nth-of-type(even) td {
    background-color: #f3f3f3;
}


/*1216新增我的介紹區-所有名片按鈕區用*/


/*1216新增,購買按鈕*/

.btn-shape {
    height: 50px;
    margin: 5px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: 40px;
    color: #000;
    background-color: #d78428;
    position: relative;
    transition: all 0.3s linear;
    font-size: 1.2rem;
}

.btn-shape>span {
    position: relative;
    z-index: 1;
}

.btn-shape::before {
    content: '';
    width: 0%;
    height: 100%;
    display: block;
    background-color: #d15a12;
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.3s ease;
}

.btn-shape:hover {
    color: #fff;
}

.btn-shape:hover::before {
    width: 100%;
}

.btn-shape>a {
    position: relative;
    color: #ffffff;
    z-index: 1;
}

.btn-shape>a:hover {
    position: relative;
    color: #fffec5;
    z-index: 1;
}


/*1216分享引薦按鈕*/

.push-share {
    position: relative;
    height: 40px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    line-height: 38px;
    display: block;
    margin: 5px 0;
}

.push-share:before {
    position: absolute;
    content: '';
    left: -6px;
    right: -6px;
    top: -6px;
    bottom: -10px;
    z-index: -1;
}

.push-share:active {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
    top: 5px;
}

.push-share:active:before {
    top: -11px;
    bottom: -5px;
    content: '';
}

.red-share1 {
    text-shadow: -1px -1px 0 #8e6445;
    background: #d85556;
    /* 設置背景顏色為 #d85556 */
    border: 1px solid #d85556;
    /* 設置邊框顏色為 #d85556 */
    background-image: -webkit-linear-gradient(top, #d85556, #cd3a3a);
    /* 兼容 Safari */
    background-image: -moz-linear-gradient(top, #d85556, #cd3a3a);
    /* 兼容 Firefox */
    background-image: -ms-linear-gradient(top, #d85556, #cd3a3a);
    /* 兼容 IE */
    background-image: -o-linear-gradient(top, #d85556, #cd3a3a);
    /* 兼容 Opera */
    background-image: linear-gradient(to bottom, #d85556, #cd3a3a);
    /* 現代瀏覽器的標準語法 */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 0 #a82e2e, 0 4px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 0 #a82e2e, 0 4px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 0 #a82e2e, 0 4px 2px rgba(0, 0, 0, 0.5);
}

.red-share1:hover {
    background: #cd3a3a;
    /* 滑鼠懸停時背景顏色改為 #cd3a3a */
    background-image: -webkit-linear-gradient(top, #d85556, #cd3a3a);
    /* 兼容 Safari */
    background-image: -moz-linear-gradient(top, #d85556, #cd3a3a);
    /* 兼容 Firefox */
    background-image: -ms-linear-gradient(top, #d85556, #cd3a3a);
    /* 兼容 IE */
    background-image: -o-linear-gradient(top, #d85556, #cd3a3a);
    /* 兼容 Opera */
    background-image: linear-gradient(to bottom, #d85556, #cd3a3a);
    /* 現代瀏覽器的標準語法 */
}

.green-share {
    text-shadow: -1px -1px 0 #1ca043;
    background: #44c507;
    border: 1px solid #1ca043;
    background-image: -webkit-linear-gradient(top, #22b94e, #44c507);
    background-image: -moz-linear-gradient(top, #22b94e, #44c507);
    background-image: -ms-linear-gradient(top, #22b94e, #44c507);
    background-image: -o-linear-gradient(top, #22b94e, #44c507);
    background-image: linear-gradient(top, #22b94e, #44c507);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 0 #1ca043, 0 4px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 0 #1ca043, 0 4px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 0 #1ca043, 0 4px 2px rgba(0, 0, 0, 0.5);
}

.green-share:hover {
    background: #22b94e;
    background-image: -webkit-linear-gradient(top, #44c507, #22b94e);
    background-image: -moz-linear-gradient(top, #44c507, #22b94e);
    background-image: -ms-linear-gradient(top, #44c507, #22b94e);
    background-image: -o-linear-gradient(top, #44c507, #22b94e);
    background-image: linear-gradient(top, #44c507, #22b94e);
}

.blue-share2 {
    text-shadow: -1px -1px 0 #75533b;
    background: #af2c2e;
    /* 設定背景顏色為 #af2c2e */
    border: 1px solid #af2c2e;
    /* 設定邊框顏色為 #af2c2e */
    background-image: -webkit-linear-gradient(top, #af2c2e, #902523);
    /* Safari */
    background-image: -moz-linear-gradient(top, #af2c2e, #902523);
    /* Firefox */
    background-image: -ms-linear-gradient(top, #af2c2e, #902523);
    /* IE */
    background-image: -o-linear-gradient(top, #af2c2e, #902523);
    /* Opera */
    background-image: linear-gradient(to bottom, #af2c2e, #902523);
    /* 現代瀏覽器 */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    /* 修改後的陰影顏色更深 */
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 0 #7f1d1a, 0 4px 2px rgba(0, 0, 0, 0.5);
    /* 加深陰影顏色 */
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 0 #7f1d1a, 0 4px 2px rgba(0, 0, 0, 0.5);
    /* 加深陰影顏色 */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 0 #7f1d1a, 0 4px 2px rgba(0, 0, 0, 0.5);
    /* 加深陰影顏色 */
}

.blue-share2:hover {
    background: #902523;
    /* 滑鼠懸停時背景顏色為 #902523 */
    background-image: -webkit-linear-gradient(top, #af2c2e, #902523);
    /* Safari */
    background-image: -moz-linear-gradient(top, #af2c2e, #902523);
    /* Firefox */
    background-image: -ms-linear-gradient(top, #af2c2e, #902523);
    /* IE */
    background-image: -o-linear-gradient(top, #af2c2e, #902523);
    /* Opera */
    background-image: linear-gradient(to bottom, #af2c2e, #902523);
    /* 現代瀏覽器 */
}

.btn-share {
    height: 50px;
    margin: 5px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: 40px;
    color: #000;
    background-color: #22b94e;
    position: relative;
    transition: all 0.3s linear;
    font-size: 1.1rem;
}

.btn-share>p {
    position: relative;
    z-index: 1;
}

.btn-share::before {
    width: 0%;
    height: 100%;
    display: block;
    background-color: #43c407;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
}

.btn-share:hover {
    color: #fff;
}

.btn-share:hover::before {
    width: 100%;
}

.btn-share>a {
    position: relative;
    color: #ffffff;
    z-index: 1;
}

.btn-share>a:hover {
    position: relative;
    color: #fffec5;
    z-index: 1;
}


/*1216+好友按鈕*/

.btn-joinfd {
    height: 50px;
    display: flex;
    margin: 5px 0;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: 40px;
    color: #000;
    background-color: #5a2929;
    position: relative;
    transition: all 0.3s linear;
    font-size: 1.2rem;
}

.btn-joinfd>p {
    position: relative;
    z-index: 1;
}

.btn-joinfd::before {
    content: '';
    width: 0%;
    height: 100%;
    display: block;
    background-color: #4e2323;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
}

.btn-joinfd:hover {
    color: #fff;
}

.btn-joinfd:hover::before {
    width: 100%;
}

.btn-joinfd>a {
    position: relative;
    color: #ffffff;
    z-index: 1;
}

.btn-joinfd>a:hover {
    position: relative;
    color: #fffec5;
    z-index: 1;
}


/*1216-1新增,我的介紹-留言評論區*/

.comment-date {
    font-size: 15px;
}

.comment-text {
    font-size: 16px;
}

.comment-name {
    color: #513508;
    font-size: 18px;
    font-weight: 600;
}

.comment-cursor:hover {
    color: #742426;
    text-decoration: underline;
}

.comment-cursor {
    color: #352d2d;
}


/*20230130手風琴效果css*/


/* Style the buttons that are used to open and close the accordion panel */

.accordion01 {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 5px 15px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    display: block;
}

.accordion01:not(.collapsed) {
    background-color: #444;
    color: #eee;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

.accordion01:hover {
    background-color: #ccc;
    color: #444;
}

.accordion-body02 {
    padding-top: 10px;
}

.accordion02 {
    background-color: #fff;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    display: block;
}

.accordion02:not(.collapsed) {
    background-color: #fff;
    box-shadow: none;
    color: #444;
}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

.accordion02:hover {
    background-color: #fff;
    color: #444;
}


/*專業介紹用-下方數據*/

.mem_card01 {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #f0f0f0;
    border: none;
}

.mem_section {
    padding: 60px 40px;
    background: #74b9ffaa;
}

.mem_bottom-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 10px;
    font-size: 28px;
    text-transform: inherit;
    color: #672627;
}

.mem_videws span {
    color: #271c1d;
    font-weight: 800;
}

.mem_border01 {
    width: 2px;
    height: 20px;
    background: #bdbdbd;
    margin: 0 25px;
}

.mem_bottom-section span {
    font-size: 13px;
    display: block;
}

.mem_clinch {
    background: #ecffbe;
    line-height: 20px;
}

.mem_clinch span {
    color: #ff5f00;
    font-size: 22px;
}


/*搜尋引薦頁面用*/

.case-info-text01 {
    background: #ff8d00;
    border: 1px solid #fff;
}

.case-info-text02 {
    background: #ff8d00;
    border: 1px solid #fff;
}

.case-info-text03 {
    background: #f37800;
    border: 1px solid #fff;
}

.case-info-text a {
    color: #fff;
    font-size: 16px;
}

.search-item {
    background-color: #f7f7f7;
    text-align: center;
    padding: 15px 15px 0 15px;
    box-sizing: border-box;
    margin: 0 auto 20px;
    break-inside: avoid;
    /*定義頁面、列或是區域發生中斷時的元素表現方式。 auto->元素中斷、acoid->元素不中斷*/
}

@media screen and (max-width: 450px) {
    .mem_clinch span {
        font-size: 25px;
    }

    .mem_videws {
        font-size: 24px;
        line-height: 24px;
        padding: 10px 5px;
        border-bottom: 1px solid #fff;
    }

    .mem_bottom-section span {
        display: block;
    }

    .search-item {
        background-color: #fff;
        text-align: center;
        padding: 5px;
        box-sizing: border-box;
        margin: 0px;
        break-inside: avoid;
        /*定義頁面、列或是區域發生中斷時的元素表現方式。 auto->元素中斷、acoid->元素不中斷*/
    }

    .mem_bottom-section {
        position: relative;
        display: block;
        justify-content: center;
        align-items: center;
        padding: 5px;
        font-size: 22px;
        text-transform: inherit;
        color: #ff6233;
    }
}


/* 任務金信息面板 */

.info-panel {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 0.85rem;
    background: #fff;
    border-radius: 0.15rem;
    position: relative;
    padding-bottom: 0.1rem;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
    margin-bottom: 0.65rem;
}

.info-panel::before {
    content: '';
    position: absolute;
    z-index: 3;
    height: 3.05rem;
    width: 0.01rem;
    top: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
}

.info-panel::after {
    content: '';
    position: absolute;
    z-index: 3;
    width: 5.15rem;
    height: 0.01rem;
    left: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
}

.task-bg {
    background-image: url('../img/task/bg.png') !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}


/* 0512-我的卡片tab用 */

.card-resume-content ul {
    text-align: center;
    margin: 0 0 50px;
}

.card-resume-content ul li {
    display: inline-block;
}

.card-nav-tabs {
    border-bottom: 0;
}

/* 未選中 */
.card-nav-tabs .card-nav-link {
    display: inline-block;

    background: transparent;

    color: #d8d8d8;

    padding: 8px 18px;

    border-radius: 12px;

    font-weight: 600;
    letter-spacing: 1px;

    margin: 5px;

    border: 1px solid #6847ab;

    transition: all 0.25s ease;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.25);
}

/* hover */
.card-nav-tabs .card-nav-link:hover {
    color: #fff;

    background: linear-gradient(to bottom,
            #737373,
            #4e4e4e);

    transform: translateY(-1px);
}

/* 選中 */
.card-nav-tabs .card-nav-link.active {
    background: linear-gradient(to bottom,
            #fceea2,
            #ebad28);

    color: #5c3b00 !important;

    border: 1px solid #cf9e1e;

    box-shadow:
        0 4px 14px rgba(235, 173, 40, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.card-resum-single-heading {
    background-color: #130f40;
    padding: 5px 0 5px 20px;
}

.card-resume-single {
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin: 0 0 30px;
}

.card-resum-single-heading h4 {
    margin: 0;
    font-weight: 600;
    color: #fff;
}

.card-resum-single-body {
    padding: 20px 20px 10px;
}

.card-resum-single-body h5 {
    font-weight: 700;
    color: #876d5a;
    margin: 0 0 6px;
}

.card-resum-single-body h6 {
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #130f40;
    margin: 0 0 6px;
}

.card-tab-pane.active {
    -webkit-animation: slide-down 2s ease-out;
    animation: slide-down 2s ease-out;
}

@-webkit-keyframes slide-down {
    0% {
        opacity: 0;
        -webkit-transform: translate(-5%);
        transform: translate(-5%);
    }

    30% {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}

@keyframes slide-down {
    0% {
        opacity: 0;
        -webkit-transform: translate(-5%);
        transform: translate(-5%);
    }

    30% {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}


/*0627-會員卡片用*/

.box11 {
    position: relative;
    /*在父元素設定相對定位*/
    width: 25rem;
    height: 15rem;
    margin-bottom: 20px;
}

.box12 {
    width: 2rem;
    height: 2rem;
    background-color: #ffffff;
    color: #000;
    position: absolute;
    border-radius: 1rem;
    left: 10rem;
    top: 17.5rem;
    font-size: 1.1rem;
    padding-top: 5px;
    opacity: 0.9;
}

@media screen and (min-width: 480px) and (max-width: 780px) {
    .box11 {
        position: relative;
        /*在父元素設定相對定位*/
        width: 30rem;
        height: 15rem;
        margin-bottom: 20px;
    }

    .box12 {
        width: 1.5rem;
        height: 1.5rem;
        background-color: #191919b8;
        position: absolute;
        border-radius: 0.75rem;
        left: 4.4rem;
        top: 8.3rem;
        font-size: 0.8rem;
        color: #fff;
    }
}

@media screen and (max-width: 450px) {
    .box11 {
        position: relative;
        /*在父元素設定相對定位*/
        width: 23rem;
        height: 15rem;
        margin-bottom: 20px;
    }

    .box12 {
        width: 1.4rem;
        height: 1.4rem;
        background-color: #191919b8;
        position: absolute;
        border-radius: 0.75rem;
        left: 3.3rem;
        top: 7.3rem;
        font-size: 0.8rem;
        color: #fff;
    }
}


/*0713新增訂單用*/


/*0608新增*/

.res-table {
    width: 100%;
    min-width: 300px;
    margin: 1rem 0;
    overflow: hidden;
    border: 1px solid #d8d8d8;
}

.res-table tr:nth-child(even) {
    background-color: #f5f2f2;
}

.res-table th,
.res-table td:before {
    color: #1c1e1f;
    text-align: center;
}

.res-table th {
    display: none;
}

.res-table th,
.res-table td {
    margin: 0.5rem 0.2rem;
}

.res-table td {
    display: block;
    font-size: 90%;
}

.res-table td:first-child {
    padding-top: 1rem;
}

.res-table td:last-child {
    padding-bottom: 1rem;
}

.res-table td:before {
    content: attr(data-th);
    font-weight: bold;
    min-width: 8rem;
    display: inline-block;
    text-align: right;
    padding-right: 20px;
}

.table-2 table td:before {
    min-width: 0;
}

.table-3 table {
    background-color: rgb(46, 53, 62);
}

.table-3 table tr:nth-child(even) {
    background-color: transparent;
}

.table-3 table td:before {
    width: 100%;
    font-weight: normal;
    opacity: 0.8;
}

.table-3 table td {
    margin: 0;
    padding: 1.5rem 2rem 0 2rem;
    font-weight: bold;
}

.table-3 table tr td:first-child {
    background-color: #20262e;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.table-3 table tr td:last-child {
    padding-bottom: 1.5rem;
    border-bottom: 4px solid rgba(255, 255, 255, 0.3);
}

.table-3 table tr:last-child td:last-child {
    border-bottom: none;
}

@media (min-width: 600px) {
    .res-table td:before {
        display: none;
    }

    .res-table th,
    .res-table td {
        display: table-cell;
        border-bottom: 1px solid #c9c9c9;
    }

    .res-table th,
    .res-table td,
    .res-table td:first-child,
    .res-table td:last-child {
        padding: 0.5rem;
        text-align: center;
    }

    .table-3 table {
        background-color: #20262e;
    }

    .table-3 table tr:nth-child(even) {
        background-color: rgb(46, 53, 62);
    }

    .table-3 table td {
        margin: 0.5rem 2rem;
        padding: 1.5rem 2rem;
        font-weight: normal;
    }

    .table-3 table tr td:first-child {
        background-color: transparent;
    }

    .table-3 table tr td:last-child {
        border-bottom: none;
    }
}

.btn-ordetail {
    height: 40px;
    color: #fff;
    background-color: black;
    font-size: 0.9rem;
    width: 100%;
}

.btn-ordetail:hover {
    color: #fff;
    background-color: #373737;
}

.btn-orange-forum {
    color: #fff;
    border: 1px solid #ff801f;
    background-color: #ff801f;
    padding: 5px 10px;
}

.btn-orange-forum:hover {
    color: #ff801f;
    background-color: white;
    border: 1px solid #ff801f;
}

.btn-orange {
    color: #ff801f;
    border: 1px solid #ff801f;
    background-color: white;
    padding: 3px;
    margin: 0 5px 5px 0;
    font-size: 13px;
    transition: all 0.2s ease;
}


/* hover、active 狀態 */

.btn-orange:hover,
.btn-orange:active,
.btn-orange:focus,
.btn-orange:checked {
    color: #fff !important;
    background-color: #ff801f !important;
    border-color: #ff801f !important;
    box-shadow: none !important;
    outline: none !important;
}

.btn-orange1 {
    background-color: #ff5722;
    color: #fff;
}

.btn-orange2 {
    background-color: #ff6000;
    color: #ececed;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

.btn-orange2:hover {
    background-color: #ececed;
    color: #ff7d2e;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.btn-orange3 {
    background-color: #ff9618 !important;
    color: #fff !important;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

.btn-orange3:hover {
    background-color: #cb750f !important;
    color: #fff !important;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.btn-outline-orange {
    color: #f75d19;
    border: 1px solid #f75d19;
    background-color: transparent;
    transition: all 0.15s ease-in-out;
}

.btn-outline-orange:hover,
.btn-outline-orange:focus {
    color: #fff;
    background-color: #f75d19;
    border-color: #f75d19;
}

.btn-outline-orange:active {
    color: #fff;
    background-color: #d44e14;
    border-color: #d44e14;
}

.btn-check:checked+.btn-outline-orange {
    color: #fff;
    background-color: #f75d19;
    border-color: #f75d19;
}

input[type='checkbox'].btn-check:checked+label.btn-outline-orange {
    background-color: #f75d19;
    color: white;
    border-color: #f75d19;
}

input[type='checkbox'].btn-check+.btn-outline-orange {
    background-color: white;
    color: #f75d19;
    border-color: #f75d19;
}

.btn-outline-orange2 {
    color: #f75d19;
    border: 1px solid #ff801f;
    background-color: transparent;
    transition: all 0.15s ease-in-out;
}

.btn-outline-orange2:hover,
.btn-outline-orange2:focus {
    color: #fff;
    background-color: #ff801f;
    border-color: #ff801f;
}

.btn-outline-orange2:active {
    color: #fff;
    background-color: #ff801f;
    border-color: #ff801f;
}

.btn-check:checked+.btn-outline-orange2 {
    color: #fff;
    background-color: #ff801f;
    border-color: #ff801f;
}

input[type='checkbox'].btn-check:checked+label.btn-outline-orange2 {
    background-color: #ff801f;
    color: white;
    border-color: #ff801f;
}

input[type='checkbox'].btn-check+.btn-outline-orange2 {
    background-color: white;
    color: #ff801f;
    border-color: #ff801f;
}

.btn-outline-brown {
    color: #9d866d;
    border-color: #9d866d;
}

.btn-outline-brown:hover,
.btn-outline-brown:focus,
.btn-outline-brown:active,
.btn-outline-brown.active,
.btn-outline-brown:active:focus {
    color: #fff;
    background-color: #9d866d;
    border-color: #9d866d;
    box-shadow: none;
}


.btn-outline-yellow {
    color: #ffa100;
    border: 1px solid #ffa100;
    background-color: transparent;
    transition: all 0.15s ease-in-out;
}

.btn-outline-yellow:hover,
.btn-outline-yellow:focus {
    color: #fff;
    background-color: #ffa100;
    border-color: #ffa100;
}

.btn-outline-yellow:active {
    color: #fff;
    background-color: #d44e14;
    border-color: #d44e14;
}

.btn-check:checked+.btn-outline-yellow {
    color: #fff;
    background-color: #ffa100;
    border-color: #ffa100;
}

input[type='checkbox'].btn-check:checked+label.btn-outline-yellow {
    background-color: #ffa100;
    color: white;
    border-color: #ffa100;
}

input[type='checkbox'].btn-check+.btn-outline-yellow {
    background-color: white;
    color: #ffa100;
    border-color: #ffa100;
}

.btn-outline-yellow1 {
    color: #d1af58 !important;
    border: 1px solid #cf9e1e !important;
    background-color: #4f4f4f !important;
    transition: all 0.15s ease-in-out;
}

/* hover */
.btn-outline-yellow1:hover {
    color: #5c3b00 !important;
    background: linear-gradient(to bottom, #fceea2, #ebad28);
    border-color: #ebad28;
}

/* checked（radio + checkbox 共用） */
input.btn-check:checked+label.btn-outline-yellow1 {
    color: #3b0707 !important;
    background: linear-gradient(to bottom, #fceea2, #ebad28);
    border-color: #cf9e1e;
}

/* 未選中 */
input.btn-check+label.btn-outline-yellow1 {
    background-color: #4f4f4f !important;
    color: #ffffff;
    border-color: #cf9e1e;
}

/* 移除 bootstrap checkbox focus 殘留 */
.btn-check:focus+.btn-outline-yellow1 {
    box-shadow: none !important;
}

/* 未勾選時強制恢復灰色 */
.btn-check:not(:checked)+.btn-outline-yellow1 {
    background: #4f4f4f !important;
    color: #ffffff !important;
    border-color: #cf9e1e !important;
}

/*0802新增*/

.btn-fb {
    border: none;
    background-color: #2d4474;
}

.btn-line {
    border: none;
    background-color: #06c755;
}

.btn-ig {
    border: none;
    background: radial-gradient(circle farthest-corner at left, rgba(230, 152, 9, 0.842), rgba(170, 7, 116, 0.836));
}

.btn-copy {
    border: none;
    background-color: #876d5a;
}

.btn-tk {
    border: none;
    background: radial-gradient(circle farthest-corner at left, #484540, rgb(88 36 71));
}


/*0811新增-訂單用*/

.order-tb tr,
.order-tb td,
.order-tb th {
    border: none;
}

#tabs_01 {
    paddding: 10px;
    margin: 10px;
}

#tabs_02 {
    paddding: 10px;
    margin: 10px;
}

#tabs_03 {
    paddding: 10px;
    margin: 10px;
}

#tabs_04 {
    paddding: 10px;
    margin: 10px;
}


/*0921訂單list用*/

.bg-vue {
    background-color: #9d9d9d;
}

.olb_money_block {
    max-width: 200px;
    background-color: #ff452c;
    padding: 3px 0;
    font-size: 12px;
    color: white;
    text-align: center;
}


/* 添加媒体查询 */

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

    /* 在小屏幕上应用的样式 */
    .ordmenu {
        height: 10vw;
    }

    /* 调整导航菜单 */
    .ordmenu_one {
        width: calc(25% - 1px);
        line-height: 9vw;
        font-size: 2vw;
        text-align: center;
        border-right: 1px #d9d9d9 solid;
        color: #8d8d8d;
    }

    /* 重新排列布局 */
    .ordlist_body_img {
        width: 30%;
    }

    /* 图像响应式处理 */
    .ordlist_body_img img {
        max-width: 100%;
        height: auto;
    }
}


/*0811新增-*/

.payinfo-title {
    display: block;
    font-size: 17px;
    text-align: center;
    font-weight: bold;
    position: relative;
    transition: all 0.3s ease 0s;
}

.payinfo-title button:not(.collapsed) {
    color: #e16b47;
    background-color: #f7c59f;
}

.payinfo-title button.collapsed {
    color: #e16b47;
    background-color: #f7c59f;
    border-bottom: 1px solid #3d3537;
}


/*0831*/


/*0831*/

.gray {
    color: #d4d4d4;
}


/*0905新增-購買頁回饋金折抵用*/

.pay_discount {
    display: flex;
    align-items: center;
    height: 35px;
    padding-right: 8px;
    font-size: 1rem;
    font-weight: 400;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #f0ece3;
    border-radius: 0.25rem;
}

.ellipsis01 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ellipsis02 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}


/*0908新增-購買頁新增按鈕用*/

.swiper-store {
    width: 100%;
    box-sizing: border-box;
    /* 確保padding不會影響寬度 */
    padding: 10px;
    /* 添加外框padding */
    float: left;
    /* 使用浮動以使.slide並排顯示 */
}

.ready_one_link {
    vertical-align: top;
}

.outLink {
    text-align: center;
    line-height: 40px;
    border: 2px solid #0068b7;
    color: #0068b7;
    font-weight: 500;
    display: block;
    /* 設置連結為塊級元素，以避免內容重疊 */
    white-space: nowrap;
    /* 防止文本換行 */
    max-width: 100%;
    /* 限制連結容器的最大寬度 */
}

.ready_one_link .outLink a:active,
.outLink a:hover {
    line-height: 40px;
    border: 2px solid #b30f11;
    color: #b30f11;
    font-weight: 500;
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.15);
}

.outLink i {
    width: 25px;
    height: 35px;
    line-height: 31px;
    color: #0068b7;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
}

.ready_one_link .outLinkTxt {
    font-size: 14px;
    color: #0068b7;
}


/*1020-購買方案內頁折扣金用*/


/* CSS 文件中 */

.custom-link {
    color: inherit;
    /* 设置颜色为继承，以保持链接默认颜色 */
    text-decoration: none;
    /* 去掉下划线 */
}

.discount-applied {
    color: black !important;
}

.discount-canceled {
    color: green;
}


/*0919-購買方案上方輪播用*/

.diepic {
    position: relative;
    max-width: 1000px;
    min-width: 380px;
}

.diepic h2 {
    font-size: 36px;
    margin-bottom: 17px;
    text-align: center;
    font-weight: normal;
    line-height: 42px;
    height: 60px;
}

.diepic .swiper-container {
    padding-bottom: px;
}

@media screen and (min-width: 990px) {
    .diepic {
        position: relative;
        max-width: 1000px;
        min-width: 800px;
    }
}

@media screen and (max-width: 768px) {
    .diepic .swiper-container {
        padding-bottom: 10px;
        max-width: 420px;
    }
}

.diepic .swiper-slide {
    width: 90%;
    /*box-shadow: 0 6px 10px 0 rgba(20, 34, 67, .1);*/
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}


/*
.diepic .swiper-slide img {
	width: 100%;
	display: block;
	border-radius: 10px;
}*/

.diepic .swiper-slide p {
    line-height: 98px;
    padding-top: 0;
    text-align: center;
    color: #636363;
    font-size: 1.1em;
    margin: 0;
}

.diepic .swiper-pagination {
    width: 100%;
    top: 200px;
}

@media screen and (max-width: 395px) {
    .diepic .swiper-pagination {
        width: 100%;
        top: 175px;
    }
}

@media screen and (min-width: 396px) and (max-width: 480px) {
    .diepic .swiper-pagination {
        width: 100%;
        top: 200px;
    }
}


.diepic .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
    border: 3px solid #fff;
    background-color: #030000;
    width: 10px;
    height: 10px;
    opacity: 0.6;
}

.diepic .swiper-pagination-bullets .swiper-pagination-bullet-active {
    width: 34px;
    display: inline-block;
    height: 10px;
    border-radius: 10px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background-image: linear-gradient(80deg, #0989c5, #995cb6);
    opacity: 1;
}

.diepic .swiper-button-prev {
    left: 350px;
    top: 700px;
    width: 45px;
    height: 45px;
}

.diepic .swiper-button-next {
    right: 350px;
    top: 700px;
    width: 45px;
    height: 45px;
}


/*0919新增-分類用*/

.wrapper03 {
    position: relative;
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding: 10px 0;
    height: 55px;
    overflow-x: hidden;
}

@media screen and (max-width: 768px) {
    .wrapper03 {
        font-size: 15px;
        text-align: center;
    }
}

.wrapper03 ::-webkit-scrollbar {
    display: none;
}

.wrapper03 .scroller {
    position: absolute;
    display: flex;
    /*flex-direction: row;*/
    /*flex-wrap: nowrap;*/
    flex-flow: row nowrap;
}

.wrapper03 .scroller a {
    display: block;
    margin: auto 0.2rem;
    font-weight: bold;
    border-radius: 1rem;
}

.wrapper03 .scroller .cur a {
    color: #ff6a88;
    height: 0.33rem;
    border-bottom: 2px solid #ff6a88;
}


/*0919-專業介紹中的引薦次數用*/

.recommend table a:link {
    color: #666;
    font-weight: bold;
    text-decoration: none;
}

.recommend table a:visited {
    color: #999999;
    font-weight: bold;
    text-decoration: none;
}

.recommend table a:active,
.recommend table a:hover {
    color: #bd5a35;
    text-decoration: underline;
}

.recommend table {
    color: #666;
    text-shadow: 1px 1px 0px #fff;
    background: #eaebec;
    border: #ccc 1px solid;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 1px 2px #d1d1d1;
    -webkit-box-shadow: 0 1px 2px #d1d1d1;
    box-shadow: 0 1px 2px #d1d1d1;
    width: 100%;
}

.recommend table th {
    padding: 5px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
    background: -moz-linear-gradient(top, #ededed, #ebebeb);
}

.recommend table th:first-child {
    text-align: center;
}

.recommend table tr:first-child th:first-child {
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
}

.recommend table tr:first-child th:last-child {
    -moz-border-radius-topright: 3px;
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
    text-align: right;
}

.recommend table tr {
    text-align: center;
}

.recommend table td:first-child {
    text-align: center;
    border-left: 0;
    font-size: 13px;
}

.recommend table td {
    padding: 5px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #fafafa;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
    background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}

.recommend table tr.even td {
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
    background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}

.recommend table tr:last-child td {
    border-bottom: 0;
}

.recommend table tr:last-child td:first-child {
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.recommend table tr:last-child td:last-child {
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.recommend table tr:hover td {
    background: #f2f2f2;
    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
    background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
}


/*1018新增-變現引流倒數器*/

.countdown {
    margin: 0 auto;
    align-items: center;
}

.countdown .bloc-time {
    float: left;
    margin-right: 15px;
    text-align: center;
}

.countdown .bloc-time:last-child {
    margin-right: 0;
}

.countdown .count-title {
    display: block;
    margin-bottom: 10px;
    padding-top: 20px;
    font: normal 1em 'Lato';
    color: #fff;
    text-transform: uppercase;
}

.countdown .figure {
    position: relative;
    float: left;
    height: 80px;
    width: 50px;
    margin-right: 5px;
    background-color: #fff;
    border-radius: 8px;
    -moz-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
    -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
}

.countdown .figure:last-child {
    margin-right: 0;
}

.countdown .figure>span {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    font: normal 4.5em/80px 'Lato';
    font-weight: 700;
    color: #de4848;
}

.countdown .figure .top:after,
.countdown .figure .bottom-back:after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.countdown .figure .top {
    z-index: 3;
    background-color: #f7f7f7;
    transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
    -moz-transform: perspective(200px);
    -ms-transform: perspective(200px);
    -webkit-transform: perspective(200px);
    transform: perspective(200px);
}

.countdown .figure .bottom {
    z-index: 1;
}

.countdown .figure .bottom:before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: rgba(0, 0, 0, 0.02);
}

.countdown .figure .bottom-back {
    z-index: 2;
    top: 0;
    height: 50%;
    overflow: hidden;
    background-color: #f7f7f7;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
}

.countdown .figure .bottom-back span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.countdown .figure .top,
.countdown .figure .top-back {
    height: 50%;
    overflow: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.countdown .figure .top-back {
    z-index: 4;
    bottom: 0;
    background-color: #fff;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -moz-transform: perspective(200px) rotateX(180deg);
    -ms-transform: perspective(200px) rotateX(180deg);
    -webkit-transform: perspective(200px) rotateX(180deg);
    transform: perspective(200px) rotateX(180deg);
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.countdown .figure .top-back span {
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    margin: auto;
}

@media screen and (max-width: 480px) {
    .countdown .bloc-time {
        float: left;
        margin-right: 20px;
        text-align: center;
    }

    .countdown .bloc-time:last-child {
        margin-right: 0;
    }

    .countdown .count-title {
        display: block;
        margin-bottom: 5px;
        font: normal 1em 'Lato';
        color: #fff;
        text-transform: uppercase;
    }

    .countdown .figure {
        position: relative;
        float: left;
        height: 40px;
        width: 30px;
        margin-right: 6px;
        background-color: #fff;
        border-radius: 6px;
        -moz-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
        -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
        box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
    }

    .countdown .figure:last-child {
        margin-right: 0;
    }

    .countdown .figure>span {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        font: normal 2.8em/40px 'Lato';
        font-weight: 800;
        color: #de4848;
    }
}


/*1018-流量變現*/

.btn-linear {
    font-size: 28px;
    padding: 10px;
    width: 100%;
    color: #ffffff;
    font-weight: bold;
    border: 0px;
    text-align: center;
    /* -45deg 也等於 top left 的效果 */
    background: linear-gradient(-45deg, #008b8b, #31cf31);
}

.btn-linear:hover {
    color: #fff;
    background: linear-gradient(37deg, #d5b33f, #ffff00);
    /* 特別的角度也可以 */
}

.btn-linear01 {
    padding: 10px;
    width: 100%;
    color: #ffffff;
    font-weight: bold;
    border: 0px;
    text-align: center;
    /* -45deg 也等於 top left 的效果 */
    background: linear-gradient(145deg, #4caf50, #0d2c77);
}

.btn-linear01:hover {
    color: #fff;
    background: linear-gradient(-45deg, #4caf50, #0d2c77);
    /* 特別的角度也可以 */
}

.btn-linear02 {
    padding: 12px 20px;
    width: 100%;
    color: #ffffff;
    font-weight: bold;
    border: none;
    text-align: center;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    background: linear-gradient(145deg, #5AA0FF, #1B2A4A);
    /* background: linear-gradient(145deg, #1B120A, #7A531F); */
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    /* 過渡動畫 */
}

/* 按鈕按下效果 */
.btn-linear02:hover,
.btn-linear02:active {
    background: linear-gradient(145deg, #8FD0FF, #2F4D8F);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 180, 255, 0.4);
    transform: scale(1.02);
}


/* 震動效果 */

@keyframes shake {
    0% {
        transform: translateX(-4px);
    }

    25% {
        transform: translateX(4px);
    }

    50% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }

    100% {
        transform: translateX(0);
    }
}


/* 聚焦時震動 */

.btn-linear02:focus {
    animation: shake 0.5s ease-in-out;
    /* 震動動畫 */
}

.btn-linear03 {
    padding: 12px 20px;
    width: 100%;
    color: #ffffff;
    font-weight: bold;
    border: 2px solid transparent;
    /* 隱藏邊框 */
    text-align: center;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    background: linear-gradient(145deg, #7a175e, #9f2a7e);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    /* 過渡動畫 */
}


/* 按鈕按下效果 */

.btn-linear03:active {
    background: linear-gradient(45deg, #9f2a7e, #7a175e);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: scale(1.02);
    /* 按下時縮小 */
}


/* 震動效果 */

@keyframes shake {
    0% {
        transform: translateX(-4px);
    }

    25% {
        transform: translateX(4px);
    }

    50% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }

    100% {
        transform: translateX(0);
    }
}


/* 聚焦時震動 */

.btn-linear03:focus {
    animation: shake 0.5s ease-in-out;
    /* 震動動畫 */
}


/*  頁籤效果
	            ------------------------------- */

#tab-demo {
    width: 100%;
    height: auto;
}

#tab-demo>ul {
    display: block;
    margin: 0;
    list-style: none;
    text-align: center;
}

.tab-title {
    list-style: none;
}

#tab-demo>ul>li {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    list-style: none;
    box-sizing: border-box;
    padding: 10px 0;
    background: #e9e3d8;
}

#tab-demo>ul>li a {
    color: #ffffff;
    text-decoration: none;
}

#tab-demo>ul>li.active {
    background: #d8c198;
}

#tab-demo>ul>li.active a {
    color: #ffffff;
}

#tab-demo>.tab-inner {
    clear: both;
    color: #000;
}

.tab-inner {
    padding: 5px 0;
}


/* ---------------------------- */


/*  Table Styles
	            ------------------------------- */

.table_bonus {
    border-collapse: collapse;
    width: 100%;
    color: #555;
    border: none;
    background: url('img/bonus_bg.jpg');
    background-position: 50% center;
    border: 3px solid #ffe4a4;
}

.table_bonus td,
.table_bonus th {
    text-align: center;
    padding: 5px 0;
}

.table_bonus td {}

.bonus_img {
    width: 150px;
    margin-bottom: 5px;
}

.tb_1 {
    margin: 10px;
}

.tb_2 {
    min-width: 200px;
}


/*  table ul
	            ------------------------------- */

.table_bonus ul {
    padding: 0 15px;
    margin: 10px;
    text-align: left;
    border-left: 1px solid #ffe4a4;
}

.table_bonus ul li {
    padding: 5px;
    position: relative;
    list-style-type: none;
    font-size: 16px;
}


/*  Responsive
	            ------------------------------- */

@media (max-width: 767px) {
    .table_bonus thead {
        display: none;
    }

    .table_bonus ul {
        padding: 5px 3px 5px 8px;
        margin: 5px;
        text-align: left;
        border-left: 1px solid #ffe4a4;
    }

    .table_bonus ul li {
        padding: 5px;
        position: relative;
        list-style-type: none;
        font-size: 15px;
    }

    .tb_2 {
        min-width: 170px;
    }

    .bonus_img {
        width: 100px;
        margin-bottom: 15px;
    }

    .btn_tx {
        font-size: 14px;
        font-weight: bold;
    }
}


/*  頁籤效果
	            ------------------------------- */

#tab-demo1>ul>li {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    list-style: none;
    box-sizing: border-box;
    padding: 10px 0;
}

#tab-demo1>ul>li a {
    color: #f26b27;
    text-decoration: none;
}

#tab-demo1>ul>li.active {
    background: #f26b27;
}

#tab-demo1>ul>li.active a {
    color: #fff;
}

#tab-demo1>.tab-inner {
    clear: both;
    color: #000;
}

.tab-inner {
    padding: 5px 0;
}


/* ---------------------------- */

.rounded-6 {
    border-radius: 8px;
}

.rounded-15 {
    border-radius: 15px;
}

.rounded-25 {
    border-radius: 25px;
}

.rounded-35 {
    border-radius: 35px;
}

.rounded-45 {
    border-radius: 45px;
}


/*1205新增-購買頁-獎品效果用*/

.GaugeMeter {
    position: Relative;
    text-align: Center;
    overflow: Hidden;
    cursor: Default;
}

.GaugeMeter SPAN,
.GaugeMeter B {
    width: 100%;
    position: Absolute;
    text-align: Center;
    display: Inline-Block;
    color: RGBa(0, 0, 0, 0.8);
    font-family: 'Open Sans', Arial;
    overflow: Hidden;
    white-space: NoWrap;
    text-overflow: Ellipsis;
    top: 8px;
}

.GaugeMeter[data-style='Semi'] B {
    margin: 0 10%;
    width: 90%;
}

.GaugeMeter S,
.GaugeMeter U {
    text-decoration: None;
    font-weight: 200;
    opacity: 0.6;
}

.GaugeMeter B {
    color: Black;
    font-weight: 200;
    opacity: 0.8;
    top: 2px;
}

.payment_Header {
    height: 180px;
    width: 180px;
    border-radius: 90px;
    background: Linear-Gradient(135deg, #cb2332, #970034);
    box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.2);
}


@-moz-keyframes BluePrint {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 1100% 100%;
    }
}

@-webkit-keyframes BluePrint {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 1100% 100%;
    }
}

@keyframes BluePrint {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100% 100%;
    }
}


/*		*/

.main-content {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.main-content .item {
    display: grid;
    grid-template-rows: 1fr min-content;
    justify-content: center;
    height: 200px;
    flex-wrap: wrap;
    background: var(--bg-color);
}

.main-content .item:not(.footer) {
    padding-top: 1rem;
}

.main-content button {
    background: transparent;
    color: #fff;
    /* border: 2px solid #fff; */
    border-radius: 25px;
    padding: 0.8rem 1.8rem;
    font-size: 16px;
    line-height: 20px;
    outline: none;
    cursor: pointer;
    position: relative;
    transition: 0.2s ease-in-out;
    background-color: rgba(0, 0, 0, 0.1);
    background: url('../img/gift.png') no-repeat center;
    background-size: 150px 150px;
}

@media screen and (max-width: 900px) {
    .main-content button {
        background-size: 120px 120px;
    }
}

.main-content button:hover {
    background-color: rgba(184, 0, 36, 0.3);
}

.tit_name {
    width: 100%;
    text-align: center;
    font-size: 16px;
    height: 30px;
    letter-spacing: 0.5px;
    align-content: flex-start;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    align-items: flex-start;
}

.button__wrapper {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-pulse button {
    background: var(--bg-color);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.button-pulse .button__wrapper:hover .pulsing:before {
    animation: pulsing 0.2s linear infinite;
}

.button-pulse .button__wrapper:hover .pulsing:after {
    animation: pulsing1 0.2s linear infinite;
}

@keyframes pulsing {
    0% {
        opacity: 1;
        transform: scaleY(1) scaleX(1);
    }

    20% {
        opacity: 0.5;
    }

    70% {
        opacity: 0.2;
        transform: scaleY(1.8) scaleX(1.4);
    }

    80% {
        opacity: 0;
        transform: scaleY(1.8) scaleX(1.4);
    }

    90% {
        opacity: 0;
        transform: scaleY(1) scaleX(1);
    }
}

@keyframes pulsing1 {
    0% {
        opacity: 1;
        transform: scaleY(1) scaleX(1);
    }

    20% {
        opacity: 0.5;
    }

    70% {
        opacity: 0.2;
        transform: scaleY(1.3) scaleX(1.15);
    }

    80% {
        opacity: 0;
        transform: scaleY(1.3) scaleX(1.15);
    }

    90% {
        opacity: 0;
        transform: scaleY(1) scaleX(1);
    }
}

.button-typewriter button {
    width: 100%;
    height: 100%;
}

.button-typewriter p {
    animation: typing 4s steps(12) infinite;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}

.button-typewriter .button__wrapper:hover p {
    animation: blink 0.3s infinite;
}

@keyframes typing {
    0% {
        width: 0;
    }

    50% {
        width: 100%;
    }

    55%,
    65%,
    75% {
        opacity: 1;
    }

    60%,
    70% {
        opacity: 0;
    }

    80% {
        width: 100%;
    }

    100% {
        width: 0;
    }
}

.button-parrot .parrot {
    position: absolute;
    width: 60px;
    text-align: center;
    animation: blink 0.8s infinite;
    color: transparent;
}

.button-parrot .parrot:before {
    content: 'Click Me!';
}

.button-parrot .parrot:nth-child(1) {
    top: -30px;
    left: -40px;
    font: 12px/1 'Margarine', sans-serif;
    transform: rotate(-20deg);
    animation-duration: 0.5s;
}

.button-parrot .parrot:nth-child(2) {
    font: 12px/1 'Margarine', sans-serif;
    right: -40px;
    top: -20px;
    transform: rotate(15deg);
    animation-duration: 0.3s;
}

.button-parrot .parrot:nth-child(3) {
    font: 16px/1 'Margarine', sans-serif;
    top: -60px;
    left: 15px;
    transform: rotate(10deg);
    animation-duration: 1s;
}

.button-parrot .parrot:nth-child(4) {
    font: 18px/1 'Margarine', sans-serif;
    top: -70px;
    left: 95px;
    transform: rotate(2deg);
    animation-duration: 0.7s;
}

.button-parrot .parrot:nth-child(5) {
    font: 14px/1 'Margarine', sans-serif;
    top: 80px;
    left: 105px;
    transform: rotate(-20deg);
    animation-duration: 0.8s;
}

.button-parrot .parrot:nth-child(6) {
    font: 12px/1 'Margarine', sans-serif;
    top: 80px;
    left: 5px;
    transform: rotate(10deg);
    animation-duration: 1.2s;
}

.button-parrot button:hover .parrot:before {
    content: 'Do it!';
    width: 70px;
}

@keyframes blink {

    25%,
    75% {
        color: transparent;
    }

    40%,
    60% {
        color: #fff;
    }
}

@keyframes up-down {
    50% {
        margin-top: -20px;
    }
}

@keyframes give-score {

    30%,
    80% {
        top: 0;
    }

    40%,
    70% {
        top: 50px;
    }
}

.button-pressure marquee {
    position: absolute;
    width: 90%;
    top: 125%;
    left: 5%;
    font: 18px/1 'Margarine', sans-serif;
}

.button-pressure marquee span {
    display: inline-block;
    height: 20px;
}

.button-pressure marquee span:not(:last-child) {
    margin-right: 130px;
}

.button-pressure button:before {
    content: 'OMG YAS';
    transition: 0.5s ease;
    left: 0;
    right: 0;
    margin: auto;
    top: -15px;
    font-size: 12px;
    opacity: 0;
}

.button-pressure button:hover:before {
    animation: omg-yes 1s;
}

@keyframes rotate-nonstop {
    50% {
        transform: rotate(92deg);
    }
}

@keyframes omg-yes {
    50% {
        opacity: 1;
    }

    100% {
        top: -50px;
    }
}

.button-jittery button {
    animation: jittery 4s infinite;
}

.button-jittery button:hover {
    animation: heartbeat 0.2s infinite;
}

@keyframes jittery {

    5%,
    50% {
        transform: scale(1);
    }

    10% {
        transform: scale(0.9);
    }

    15% {
        transform: scale(1.15);
    }

    20% {
        transform: scale(1.15) rotate(-5deg);
    }

    25% {
        transform: scale(1.15) rotate(5deg);
    }

    30% {
        transform: scale(1.15) rotate(-3deg);
    }

    35% {
        transform: scale(1.15) rotate(2deg);
    }

    40% {
        transform: scale(1.15) rotate(0);
    }
}

.z-10 {
    z-index: 10;
}

.btn-29 a {
    padding: 10px 20px;
    border-radius: 2px;
    text-align: center;
    background: #494949;
    /* border-radius: 27px; */
    color: #ffffff;
    border: none;
    outline: none;
    cursor: pointer;
}

.btn-29 a:hover {
    color: #ffffff;
    background: #151a14;
}

@-webkit-keyframes move-in {
    0% {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes move-in {
    0% {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@-webkit-keyframes move-out {
    0% {
        transform: translateX(100%);
    }

    to {
        transform: translateX(200%);
    }
}

@keyframes move-out {
    0% {
        transform: translateX(100%);
    }

    to {
        transform: translateX(200%);
    }
}

.relative01 {
    position: relative;
    width: 100%;
    height: 400px;
    z-index: 98;
}

.absolute01 {
    position: absolute;
    top: 100px;
    right: 18%;
    width: 255px;
    z-index: 150;
}

.absolute02 {
    position: absolute;
    top: 50px;
    right: 24%;
    line-height: 13px;
    font-size: 11px;
}

.absolute02 button {
    line-height: 15px;
    font-size: 12px;
    padding: 2px;
}

.absolute03 {
    position: absolute;
    top: 140px;
    right: 35%;
    line-height: 15px;
    font-size: 13px;
    opacity: 0.8;
}

@media screen and (min-width: 360px) and (max-width: 400px) {
    .absolute01 {
        position: absolute;
        top: 110px;
        right: -3%;
    }

    .absolute02 {
        position: absolute;
        top: 52px;
        right: 23%;
    }

    .absolute03 {
        position: absolute;
        top: 140px;
        right: 35%;
    }
}

@media screen and (min-width: 401px) and (max-width: 430px) {
    .absolute01 {
        position: absolute;
        top: 120px;
        right: 0%;
        z-index: 150;
    }

    .absolute02 {
        position: absolute;
        top: 55px;
        right: 24%;
    }

    .absolute03 {
        position: absolute;
        top: 145px;
    }
}


/*20240110-首頁宮格用*/


/* Background Image */

.bg-image--1 {
    background-image: url(../img/index/bg/01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.bg-image--2 {
    background-image: url(../img/index/bg/02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}


/**
About Area
*/

.about-area__content h4 {
    text-transform: uppercase;
    margin-bottom: 5px;
    color: #474747;
}

.about-area__content h3 {
    color: #303030;
    text-transform: uppercase;
    padding-right: 50px;
    margin-bottom: 25px;
}

.about-area__content p {
    line-height: 35px;
}

.about-area__content a.cr-btn {
    margin-top: 27px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about-area__image {
        padding: 50px 0;
        text-align: center;
        max-height: auto;
    }

    .about-area__image img {
        position: relative;
    }

    .about-area__content {
        padding: 0;
        padding-bottom: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .about-area__image {
        padding: 50px 0;
        text-align: center;
        max-height: auto;
    }

    .about-area__image img {
        max-width: 100%;
        position: relative;
    }

    .about-area__image img {
        max-width: 100%;
    }

    .about-area__content {
        padding: 0;
        padding-bottom: 50px;
    }
}

@media only screen and (max-width: 575px) {
    .about-area__content {
        padding-left: 0;
        padding-right: 0;
    }

    .about-area__content h3 {
        padding-right: 0;
        padding-left: 0;
    }
}


/**
Features area styles
*/

.features-area div[class^='col-']:nth-child(1) .feature::before {
    background: rgba(164, 159, 141, 0.9);
}

.features-area div[class^='col-']:nth-child(3) .feature::before {
    background: rgba(110, 109, 80, 0.9);
}

.feature {
    padding: 85px 120px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}

.feature::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(139, 139, 116, 0.9);
    z-index: -1;
}

.feature__icon {
    color: #ffffff;
    margin-right: 35px;
    font-size: 45px;
    height: 55px;
    width: 55px;
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.feature__icon span {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.feature__icon span i {
    line-height: 65px;
}

.feature__icon span:first-child {
    top: 0;
}

.feature__icon span:last-child {
    top: 100%;
}

.feature__content {
    -webkit-flex-shrink: 100;
    -moz-flex-shrink: 100;
    -ms-flex-negative: 100;
    flex-shrink: 100;
}

.feature__content h4 {
    font-weight: 700;
    margin-bottom: 10px;
    color: #ffffff;
}

.feature__content h4 a {
    color: #ffffff;
}

.feature__content p {
    margin-bottom: 0;
    color: #ffffff;
}

.feature:hover .feature__icon span:first-child {
    top: -100%;
}

.feature:hover .feature__icon span:last-child {
    top: 0;
}

@media only screen and (min-width: 1600px) and (max-width: 1919px) {
    .feature {
        padding: 70px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .feature {
        padding: 80px 30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .feature {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        text-align: center;
        padding: 50px 30px;
    }

    .feature__icon {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .feature {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        text-align: center;
        padding: 70px 20%;
    }

    .feature__icon {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

@media only screen and (max-width: 767px) {
    .feature {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        text-align: center;
        padding: 70px 20%;
    }

    .feature__icon {
        margin-right: 0;
        margin-bottom: 25px;
    }
}

@media only screen and (max-width: 575px) {
    .feature {
        padding: 30px 9%;
        font-size: 15px;
    }
}


/**
Service Area
*/

.service {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 30px;
    padding: 15px;
    padding: 25px 15px;
    border: 1px solid #eeeeee;
    background: #fafafa;
}

.service__icon {
    text-align: center;
    display: inline-block;
    border-radius: 100%;
    margin-right: 25px;
    color: #9f4b4b;
    height: 55px;
    border: 1px solid #9f4b4b;
    line-height: 53px;
    -webkit-box-flex: 55px;
    -webkit-flex: 55px;
    -moz-box-flex: 55px;
    -moz-flex: 55px;
    -ms-flex: 55px;
    flex: 55px;
    max-width: 55px;
    margin-bottom: 20px;
}

.service__icon i {
    font-size: 24px;
    vertical-align: text-bottom;
}

.service__icon [class^='flaticon-']:before,
.service__icon [class*=' flaticon-']:before,
.service__icon [class^='flaticon-']:after,
.service__icon [class*=' flaticon-']:after {
    vertical-align: text-bottom;
}

.service__content {
    -webkit-flex-shrink: 100;
    -moz-flex-shrink: 100;
    -ms-flex-negative: 100;
    flex-shrink: 100;
}

.service__content h5 {
    text-transform: uppercase;
    font-weight: 700;
    color: #2b2b2b;
}

.service__content h5 a {
    color: #2b2b2b;
}

.service__content h5 a:hover {
    color: #9f4b4b;
}

.service__content p {
    margin-bottom: 0;
}

.service:hover .service__icon {
    -webkit-animation: bounceIn 0.5s ease-in-out 1 both;
    -moz-animation: bounceIn 0.5s ease-in-out 1 both;
    -ms-animation: bounceIn 0.5s ease-in-out 1 both;
    -o-animation: bounceIn 0.5s ease-in-out 1 both;
    animation: bounceIn 0.5s ease-in-out 1 both;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .service {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }

    .service__icon {
        margin-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }

    .service__icon {
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .service {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }

    .service__icon {
        margin-right: 0;
    }
}


/**
Funfact Area
*/

.funfact-wrapper {
    text-align: center;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .funfact-wrapper {
        text-align: left;
    }
}

@media only screen and (max-width: 767px) {
    .funfact-wrapper {
        text-align: left;
    }
}

.funfact {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 20px 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.funfact-icon {
    font-size: 46px;
    color: #fff;
    margin-right: 17px;
}

.funfact-content {
    text-align: left;
    border-left: 1px solid #ffffff;
    padding-left: 15px;
}

.funfact-content h3 {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    line-height: 1;
}

.funfact-content h5 {
    margin-bottom: 0;
    color: #ffffff;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .funfact-icon {
        font-size: 30px;
    }
}


/**
Testimonial Styles
*/


/* Testimonial Content Styles */

.testimonial__content {
    position: relative;
    background: #ffffff;
    padding: 50px 30px;
    -webkit-box-shadow: 0 8px 19px rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 19px rgba(0, 0, 0, 0.1);
}

.testimonial__content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    height: 30px;
    width: 30px;
    display: inline-block;
    margin-top: -20px;
    margin-left: -15px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.07);
    box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.07);
}

.testimonial__content>div {
    position: relative;
}

.testimonial__content .slick-list {
    padding-left: 0;
    padding-right: 0;
}

.testimonial__content__single {
    padding: 0 45px;
}

.testimonial__content__single p {
    margin-bottom: 0;
    font-size: 18px;
}

.testimonial__content__single p::before,
.testimonial__content__single p::after {
    font-family: 'FontAwesome';
    opacity: 0.3;
    font-size: 24px;
}

.testimonial__content__single p::before {
    content: '\f10d';
    padding-right: 20px;
}

.testimonial__content__single p:after {
    content: '\f10e';
    padding-left: 20px;
}

.testimonial__content__single:active,
.testimonial__content__single:focus {
    outline: none;
}


/* Testimonial Author Styles */

.testimonial__author {
    margin-top: 35px;
    display: inline-block;
    width: 65%;
    vertical-align: middle;
}

.testimonial__author .slick-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.testimonial__author__single {
    text-align: center;
    opacity: 0.35;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.testimonial__author__single:active,
.testimonial__author__single:focus {
    outline: none;
}

.testimonial__author__image {
    height: 80px;
    width: 80px;
    border-radius: 100%;
    display: inline-block;
    overflow: hidden;
    border: 8px solid #eeeeee;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
}

.testimonial__author__image img {
    height: 100%;
    width: 100%;
}

.testimonial__author__description {
    margin-top: 5px;
}

.testimonial__author__description h6 {
    font-size: 14px;
    color: #595959;
    font-weight: 700;
    margin-bottom: 0;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.testimonial__author__description span {
    display: block;
    color: #a1a1a1;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 5px;
}

.testimonial__author__single.slick-center {
    opacity: 1;
}

.testimonial__author__single.slick-center .testimonial__author__description h6 {
    color: #9f4b4b;
}

@media only screen and (max-width: 767px) {
    .testimonial__author {
        width: 85%;
    }

    .testimonial__content__single p {
        font-size: 16px;
    }
}

@media only screen and (max-width: 575px) {
    .testimonial__content__single {
        padding: 0;
    }

    .testimonial__author {
        width: 100%;
    }
}


/**
Blog Styles
*/

.blog_h {
    height: 580px;
}

@media only screen and (min-width: 380px) and (max-width: 480px) {
    .blog_h {
        height: 520px;
    }
}

.blog-area__blogs {
    margin-top: 30px;
}

.blog {
    margin-top: 30px;
    -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.blog blockquote {
    margin-bottom: 0;
}

.blog__thumb {
    max-height: 300px;
    overflow: hidden;
}

.blog__thumb img {
    width: 100%;
}

.blog__thumb a {
    display: inline-block;
}

.blog__content__body {
    padding: 25px 30px;
}

.blog__content__body h4 {
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 10px;
}

.blog__content__body h4 a {
    color: #2b2b2b;
}

.blog__content__body h4 a:hover {
    color: #9f4b4b;
}

.blog__content__body p {
    margin-bottom: 0;
}

.blog__content__categories {
    list-style: none;
    padding-left: 0;
    margin-bottom: 10px;
    font-size: 0;
}

.blog__content__categories li {
    display: inline-block;
    color: #9d9d9d;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
}

.blog__content__categories li:after {
    content: '';
    margin: 0 10px;
    height: 5px;
    width: 5px;
    display: inline-block;
    background: #9d9d9d;
}

.blog__content__categories li:last-child:after {
    display: none;
}

.blog__content__categories li a {
    display: inline-block;
    color: #9d9d9d;
}

.blog__content__categories li a:hover {
    color: #9f4b4b;
}

.blog__content__meta {
    padding-left: 0;
    padding-bottom: 5px;
    list-style: none;
    margin: 0;
}

.blog__content__meta li {
    display: inline-block;
    color: #454545;
    font-size: 14px;
    font-weight: 400;
}

.blog__content__meta li:after {
    content: '-';
    padding: 0 5px;
}

.blog__content__meta li:last-child:after {
    display: none;
}

.blog__content__meta li a {
    display: inline-block;
    color: #454545;
}

.blog__content__meta li a:hover {
    color: #9f4b4b;
}

.blog__content__author {
    padding: 12px 30px;
    border-top: 1px solid #eeeeee;
    display: block;
    font-size: 14px;
}

.blog__content__author a {
    color: #454545;
}

.blog__content__author a:hover {
    color: #9f4b4b;
}


/* Pinned Blog Style */

.blog.sticky .blog__thumb {
    position: relative;
}

.blog.sticky .blog__thumb:before {
    content: '\e69b';
    font-family: 'Pe-icon-7-stroke';
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 9;
    font-size: 20px;
    height: 40px;
    width: 40px;
    background: #303030;
    color: #fff;
    text-align: center;
    line-height: 38px;
    border-radius: 100%;
}


/* Only Content Blog */

.blog.blog--onlycontent.sticky .blog__content h2 {
    position: relative;
    text-indent: 60px;
}

.blog.blog--onlycontent.sticky .blog__content h2:before {
    content: '\e69b';
    font-family: 'Pe-icon-7-stroke';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    font-size: 20px;
    height: 40px;
    width: 40px;
    background: #303030;
    color: #fff;
    text-align: center;
    line-height: 38px;
    border-radius: 100%;
    text-indent: 0;
}

.blog.blog--onlycontent.sticky .blog__content .blog__content__header h4 {
    position: relative;
    padding-left: 60px;
}

.blog.blog--onlycontent.sticky .blog__content .blog__content__header h4:before {
    content: '\e69b';
    font-family: 'Pe-icon-7-stroke';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -23px;
    z-index: 9;
    font-size: 20px;
    height: 40px;
    width: 40px;
    background: #303030;
    color: #fff;
    text-align: center;
    line-height: 38px;
    border-radius: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .blog__content__body {
        padding: 20px;
    }

    .blog__content__body h4 {
        font-size: 18px;
    }

    .blog__content__author {
        padding: 12px 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog__content__header h4 {
        font-size: 18px;
    }
}

@media only screen and (max-width: 575px) {
    .blog__content__body {
        padding: 20px;
    }

    .blog__content__body h4 {
        font-size: 18px;
    }

    .blog__content__author {
        padding: 12px 20px;
    }

    .blog__content__header h4 {
        font-size: 18px;
    }
}


/* List Blog Style */

.bloglist {
    margin-top: -60px;
}

.bloglist .blog {
    margin-top: 60px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}

.bloglist .blog__content {
    padding: 40px;
}

.bloglist .blog__content h3 {
    text-transform: uppercase;
    color: #303030;
}

.bloglist .blog__content h3 a {
    color: #303030;
}

.bloglist .blog__content h3 a:hover {
    color: #9f4b4b;
}

.bloglist .blog__content .cr-readmore,
.bloglist .blog__content .cr-readmore-2 {
    margin-top: 10px;
}

.bloglist .blog.sticky .blog__thumb:before {
    left: 40px;
    top: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bloglist .blog__content h2 {
        font-size: 24px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bloglist .blog__content h2 {
        font-size: 24px;
    }
}

@media only screen and (max-width: 767px) {
    .bloglist .blog__content h2 {
        font-size: 24px;
        line-height: 36px;
    }

    .bloglist .blog__content {
        padding: 30px;
    }

    .blog.blog--onlycontent.sticky .blog__content h2:before {
        top: -7px;
    }

    .bloglist .blog.sticky .blog__thumb:before {
        left: 30px;
        top: 30px;
    }

    .bloglist .blog__thumb iframe {
        min-height: 300px;
    }
}


/**
Call to action styles
*/

.calltoaction {
    padding-left: 0;
    padding-right: 55px;
}

.calltoaction.text-left {
    padding-left: 0;
    padding-right: 55px;
}

.calltoaction.text-center {
    padding: 0 55px;
}

.calltoaction.text-right {
    padding-right: 0;
    padding-left: 55px;
}

.calltoaction h3 {
    font-weight: 700;
    text-transform: uppercase;
    color: #303030;
}

.calltoaction p {
    margin-bottom: 0;
}

.calltoaction .calltoaction-button {
    font-weight: 400;
    font-size: 26px;
    text-transform: uppercase;
    color: #333;
    background: #fff;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.calltoaction .calltoaction-button span.calltoaction-icon {
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    background: #9f4b4b;
    color: #fff;
    font-size: 26px;
}

.calltoaction .calltoaction-button a {
    font-weight: 600;
    color: #9f4b4b;
    padding: 0 30px;
}

@media only screen and (max-width: 767px) {
    .calltoaction.text-center {
        padding: 0;
    }

    .calltoaction h6 a {
        font-size: 20px;
    }

    .calltoaction .calltoaction-button {
        font-size: 18px;
    }
}


/**
Features Page
*/

.pg-features {
    margin-top: 130px;
}

.pg-features:first-child,
.pg-features:only-child {
    margin-top: 0;
}

.pg-features:nth-child(even) .pg-features__description {
    padding-right: 0;
    padding-left: 50px;
}

.pg-features:nth-child(even) .pg-features__thumb:after {
    right: auto;
    left: -20px;
    background: #9f4b4b;
}

.pg-features:nth-child(odd) .pg-features__thumb:after {
    background: #333982;
}

.pg-features__thumb {
    position: relative;
}

.pg-features__thumb:after {
    content: '';
    position: absolute;
    right: -20px;
    bottom: -20px;
    height: 70%;
    width: 80%;
    background: #333982;
}

.pg-features__thumb>* {
    z-index: 1;
    position: relative;
}

.pg-features__description {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding-right: 50px;
}

.pg-features__icon {
    -webkit-box-flex: 100;
    -webkit-flex-grow: 100;
    -moz-flex-grow: 100;
    -ms-flex-positive: 100;
    flex-grow: 100;
    font-size: 60px;
    display: inline-block;
    line-height: 65px;
    color: #303030;
    padding-right: 35px;
}

.pg-features__content {
    -webkit-flex-shrink: 100;
    -moz-flex-shrink: 100;
    -ms-flex-negative: 100;
    flex-shrink: 100;
}

.pg-features__content h3 {
    color: #303030;
    text-transform: uppercase;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .pg-features:nth-child(even) .pg-features__description {
        padding-left: 0;
    }

    .pg-features .pg-features__description {
        padding-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pg-features {
        margin-top: 50px;
    }

    .pg-features:nth-child(even) .pg-features__description {
        padding-left: 0;
    }

    .pg-features .pg-features__description {
        padding-right: 0;
    }

    .pg-features__thumb {
        margin-left: 20px;
        display: inline-block;
    }

    .pg-features__thumb:after {
        right: auto;
        left: -20px;
    }

    .pg-features__description {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .pg-features {
        margin-top: 50px;
    }

    .pg-features:nth-child(even) .pg-features__description {
        padding-left: 0;
    }

    .pg-features .pg-features__description {
        padding-right: 0;
    }

    .pg-features__thumb {
        margin-left: 20px;
        display: inline-block;
    }

    .pg-features__thumb:after {
        right: auto;
        left: -20px;
    }

    .pg-features__description {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .pg-features__description {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .pg-features__icon {
        margin-bottom: 20px;
    }
}


/**
Services Page Styles
*/

.pg-services__details h4 {
    margin-bottom: 7px;
    font-weight: 600;
}

.pg-services__details h3 {
    margin-bottom: 20px;
    font-weight: 700;
}

.pg-services__details p:last-child {
    margin-bottom: 0;
}

.pg-services-area__srevicelist {
    margin-top: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .pg-services__details {
        padding-right: 0;
    }

    .pg-services__details h3 {
        margin-bottom: 20px;
    }

    .pg-services__thumb {
        padding: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pg-services__details {
        margin-top: 30px;
        padding-right: 0;
        text-align: center;
    }

    .pg-services__details h3 {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .pg-services__details {
        margin-top: 30px;
        padding-right: 0;
        text-align: center;
    }

    .pg-services__details h3 {
        margin-bottom: 20px;
    }
}


/**
Single Service Page Styles
*/

.pg-service__content {
    padding-left: 30px;
}

.pg-service__content p:last-of-type {
    margin-bottom: 0;
}

.pg-service__block {
    margin-top: 40px;
}

.pg-service__block h3 {
    color: #303030;
    font-size: 24px;
}

.pg-service__insideblocks h6 {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    color: #626262;
    text-decoration: underline;
}

.pg-service__insideblock {
    margin-top: 30px;
}

.pg-service__insideblock p {
    margin-bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .pg-service__content {
        padding-left: 0;
    }

    .pg-service__insideblock {
        padding-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pg-service__content {
        padding-left: 0;
        margin-top: 40px;
    }

    .pg-service__insideblock {
        padding-right: 0;
    }

    .pg-service__thumb-bottom {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .pg-service__content {
        padding-left: 0;
        margin-top: 40px;
    }

    .pg-service__insideblock {
        padding-right: 0;
    }

    .pg-service__thumb-bottom {
        margin-top: 40px;
    }
}


/* Service Pagination */

.pg-service-area {
    position: relative;
}

.pg-service__pagination .service-pagination,
.pg-service__pagination a.service-pagination {
    letter-spacing: 0.5px;
    color: #a5a5a5;
    background: #f2f2f2;
    font-weight: 600;
    display: inline-block;
    width: 54px;
    font-size: 16px;
    text-transform: uppercase;
    padding: 24px 20px 20px;
    word-wrap: break-word;
    line-height: 1.2;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}

.pg-service__pagination .service-pagination.prev,
.pg-service__pagination a.service-pagination.prev {
    right: auto;
    left: 2%;
}

.pg-service__pagination .service-pagination.next,
.pg-service__pagination a.service-pagination.next {
    left: auto;
    right: 2%;
}

.pg-service__pagination .service-pagination:hover,
.pg-service__pagination a.service-pagination:hover {
    background: #9f4b4b;
    color: #ffffff;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .pg-service__pagination {
        text-align: center;
        margin-top: 50px;
    }

    .pg-service__pagination .service-pagination,
    .pg-service__pagination a.service-pagination {
        position: relative;
        width: auto;
        margin-top: 0;
        margin: 0 5px;
        padding: 10px 15px 13px 15px;
        padding-top: 15px;
    }

    .pg-service__pagination .service-pagination.prev,
    .pg-service__pagination a.service-pagination.prev {
        left: auto;
        right: auto;
    }

    .pg-service__pagination .service-pagination.next,
    .pg-service__pagination a.service-pagination.next {
        left: auto;
        right: auto;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pg-service__pagination {
        text-align: center;
        margin-top: 50px;
    }

    .pg-service__pagination .service-pagination,
    .pg-service__pagination a.service-pagination {
        position: relative;
        width: auto;
        margin-top: 0;
        margin: 0 5px;
        padding: 10px 15px 13px 15px;
        padding-top: 15px;
    }

    .pg-service__pagination .service-pagination.prev,
    .pg-service__pagination a.service-pagination.prev {
        left: auto;
        right: auto;
    }

    .pg-service__pagination .service-pagination.next,
    .pg-service__pagination a.service-pagination.next {
        left: auto;
        right: auto;
    }
}

@media only screen and (max-width: 767px) {
    .pg-service__pagination {
        text-align: center;
        margin-top: 50px;
    }

    .pg-service__pagination .service-pagination,
    .pg-service__pagination a.service-pagination {
        position: relative;
        width: auto;
        margin-top: 0;
        margin: 0 5px;
        padding: 10px 15px 13px 15px;
        padding-top: 15px;
    }

    .pg-service__pagination .service-pagination.prev,
    .pg-service__pagination a.service-pagination.prev {
        left: auto;
        right: auto;
    }

    .pg-service__pagination .service-pagination.next,
    .pg-service__pagination a.service-pagination.next {
        left: auto;
        right: auto;
    }
}


/**
Blog Details Styles
*/

.pg-blog-thumb {
    margin-bottom: 50px;
}

.pg-blog-video {
    margin-bottom: 50px;
}

h2.pg-blog-title {
    font-size: 34px;
    font-weight: 700;
    color: #303030;
}

.pg-blog-meta {
    padding-left: 0;
}

.pg-blog-meta li {
    font-size: 14px;
    font-weight: 400;
    color: #a8a8a8;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
}

.pg-blog-meta li:after {
    content: '-';
    padding: 0 10px;
}

.pg-blog-meta li:last-child:after {
    display: none;
}

.pg-blog-meta li a {
    color: #a8a8a8;
}

.pg-blog-meta li a:hover {
    color: #9f4b4b;
}

.pg-blog-content {
    padding-bottom: 50px;
    border-bottom: 1px solid #e1e1e1;
}

.pg-blog-content ol {
    margin-top: 30px;
    margin-bottom: 30px;
    list-style: decimal-leading-zero;
    padding-left: 0;
    list-style-position: inside;
}

.pg-blog-content ol li {
    margin-bottom: 10px;
}

.pg-blog-content img {
    margin-bottom: 20px;
}

.pg-blog-block {
    margin-top: 70px;
}

.pg-blog-block:last-of-type {
    margin-bottom: 40px;
}

.pg-blog-authorbox {
    padding: 40px;
    background: #fafafa;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
}

.pg-blog-authoriamge {
    height: 95px;
    width: 95px;
    display: block;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 25px;
}

.pg-blog-authoriamge img {
    width: 100%;
}

.pg-blog-authordes {
    -webkit-flex-shrink: 100;
    -moz-flex-shrink: 100;
    -ms-flex-negative: 100;
    flex-shrink: 100;
}

.pg-blog-authordes h6 {
    line-height: 28px;
    font-size: 16px;
    color: #5f5f5f;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
}

.pg-blog-authordes p {
    margin-bottom: 0;
}

.pg-blog-social {
    border: 1px solid #e9e9e9;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 5px 20px;
}

.pg-blog-social h6 {
    font-size: 16px;
    font-weight: 400;
    color: #636363;
    margin-right: 10px;
    margin-bottom: 0;
}

.pg-blog-social-icons {
    margin-right: 30px;
}

.pg-blog-social-icons,
.pg-blog-tags {
    padding: 5px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}

.pg-blog-tags ul {
    margin-bottom: 0;
    padding-left: 0;
}

.pg-blog-tags ul li {
    display: inline-block;
    font-size: 16px;
    color: #808080;
    font-weight: 300;
}

.pg-blog-tags ul li:after {
    content: ',';
}

.pg-blog-tags ul li:last-child:after {
    display: none;
}

.pg-blog-tags ul li a {
    color: #808080;
    display: inline-block;
}

.pg-blog-tags ul li a:hover {
    color: #9f4b4b;
}

.pg-blog-block.commentbox form {
    margin-top: -50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .pg-blog-content img.alignright {
        float: none;
        padding-left: 0;
    }

    h2.pg-blog-title {
        font-size: 32px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pg-blog-content img.alignright {
        float: none;
        padding-left: 0;
    }

    h2.pg-blog-title {
        font-size: 28px;
    }
}

@media only screen and (max-width: 767px) {
    .pg-blog-content img.alignright {
        float: none;
        padding-left: 0;
    }

    h2.pg-blog-title {
        font-size: 26px;
    }
}

@media only screen and (max-width: 575px) {
    .pg-blog-content img.alignright {
        float: none;
        padding-left: 0;
    }

    h2.pg-blog-title {
        font-size: 26px;
    }
}


/**
Commentbox & Commentlist Style
*/


/* Commentlist */

.comment {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 60px;
}

.comment:first-child {
    margin-top: 0;
}

.comment.reply {
    margin-left: 150px;
}

.comment__content {
    -webkit-flex-shrink: 100;
    -moz-flex-shrink: 100;
    -ms-flex-negative: 100;
    flex-shrink: 100;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}

.comment__content a.reply {
    font-size: 14px;
    color: #9f4b4b;
    font-weight: 600;
    text-transform: uppercase;
}

.comment__content a.reply:hover {
    color: #333982;
}

.comment__content__top {
    margin-right: 30px;
    margin-bottom: 10px;
}

.comment__content__top h6 {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    color: #5f5f5f;
    text-transform: uppercase;
}

.comment__content__top span {
    font-size: 14px;
    line-height: 20px;
    color: #a2a2a2;
    font-weight: 400;
    text-transform: uppercase;
}

.comment__content__bottom {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -moz-box-flex: 0;
    -moz-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
}


/* Commentbox */

.commentbox .single-input {
    position: relative;
    margin-top: 50px;
}

.commentbox .single-input label {
    position: absolute;
    left: 0;
    top: 10px;
    font-size: 13px;
    color: #4b4b4b;
    font-weight: 400;
    -webkit-transition: all 0.5s cubic-bezier(0.68, 0.01, 0.32, 0.99) 0s;
    -moz-transition: all 0.5s cubic-bezier(0.68, 0.01, 0.32, 0.99) 0s;
    -ms-transition: all 0.5s cubic-bezier(0.68, 0.01, 0.32, 0.99) 0s;
    -o-transition: all 0.5s cubic-bezier(0.68, 0.01, 0.32, 0.99) 0s;
    transition: all 0.5s cubic-bezier(0.68, 0.01, 0.32, 0.99) 0s;
}

.commentbox .single-input label.state-change {
    top: -20px;
}

.commentbox .single-input input,
.commentbox .single-input textarea {
    border: none;
    border-bottom: 1px solid #eeeeee;
    line-height: 28px;
    padding: 7px 20px;
    color: #5b5b5b;
}

.commentbox .single-input input:focus,
.commentbox .single-input input:active,
.commentbox .single-input textarea:focus,
.commentbox .single-input textarea:active {
    outline: none;
    outline: 0;
}

@media only screen and (max-width: 767px) {
    .comment.reply {
        margin-left: 50px;
    }
}

@media only screen and (max-width: 575px) {
    .comment.reply {
        margin-left: 30px;
    }

    .comment {
        margin-top: 38px;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .comment__content {
        padding-top: 20px;
    }

    .pg-blog-authorbox {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 20px;
    }

    .pg-blog-authordes {
        padding-top: 20px;
    }
}


/**
Contact Page Styles
*/

.pg-contact__content {
    background: #333982;
    padding: 40px 30px;
    color: #fff;
}

.pg-contact__content>h1 {
    text-transform: uppercase;
    padding-right: 50px;
}

.pg-contact__content>p {
    padding-right: 50px;
}

.pg-contact__blocks {
    padding-top: 30px;
}

.pg-contact__blocks .single-block {
    font-size: 16px;
}

.pg-contact__blocks .single-block:not(:last-child) {
    margin-bottom: 30px;
}

.pg-contact__blocks .single-block h6 {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 400;
    color: #ffffff;
    position: relative;
}

.pg-contact__blocks .single-block h6:before {
    height: 8px;
    width: 8px;
    content: '';
    left: 0;
    top: -1px;
    display: inline-block;
    background: #ffffff;
    position: relative;
    margin-right: 15px;
}

.pg-contact__blocks .single-block p {
    color: #b1b1b1;
    margin-bottom: 0;
}

.pg-contact__blocks .single-block a {
    color: #b1b1b1;
}

.pg-contact__blocks .single-block a:hover {
    color: #9f4b4b;
}

.google-map {
    height: 450px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .google-map {
        height: 300px;
    }

    .pg-contact__content {
        margin-top: 80px;
    }
}

@media only screen and (max-width: 767px) {
    .google-map {
        height: 300px;
    }

    .pg-contact__content {
        margin-top: 70px;
    }

    .pg-contact__content>h1 {
        padding-right: 0px;
        font-size: 24px;
    }

    .pg-contact__content>p {
        padding-right: 0;
    }
}


/**
Appointment Page Styles
*/

.pg-appintment__title {
    color: #9f4b4b;
}

.pg-appintment__box {
    margin-top: -30px;
}

.pg-appintment__box .single-input {
    position: relative;
    margin-top: 40px;
}

.pg-appintment__box .single-input input,
.pg-appintment__box .single-input textarea,
.pg-appintment__box .single-input select {
    border: none;
    border-bottom: 1px solid #eeeeee;
    line-height: 28px;
    padding: 7px 20px;
    padding-left: 0;
    font-size: 13px;
    color: #4b4b4b;
    font-weight: 400;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.pg-appintment__box .single-input input:focus,
.pg-appintment__box .single-input input:active,
.pg-appintment__box .single-input textarea:focus,
.pg-appintment__box .single-input textarea:active,
.pg-appintment__box .single-input select:focus,
.pg-appintment__box .single-input select:active {
    outline: none;
    outline: 0;
    border-color: #000;
}

.pg-appintment__box .single-input input:placeholder,
.pg-appintment__box .single-input textarea:placeholder,
.pg-appintment__box .single-input select:placeholder {
    font-size: 13px;
    color: #4b4b4b;
    font-weight: 400;
    opacity: 1;
}

.pg-appintment__box .single-input input::-webkit-input-placeholder,
.pg-appintment__box .single-input textarea::-webkit-input-placeholder,
.pg-appintment__box .single-input select::-webkit-input-placeholder {
    font-size: 13px;
    color: #4b4b4b;
    font-weight: 400;
    opacity: 1;
}

.pg-appintment__box .single-input input:-ms-input-placeholder,
.pg-appintment__box .single-input textarea:-ms-input-placeholder,
.pg-appintment__box .single-input select:-ms-input-placeholder {
    font-size: 13px;
    color: #4b4b4b;
    font-weight: 400;
    opacity: 1;
}

.pg-appintment__box .single-input input::-ms-input-placeholder,
.pg-appintment__box .single-input textarea::-ms-input-placeholder,
.pg-appintment__box .single-input select::-ms-input-placeholder {
    font-size: 13px;
    color: #4b4b4b;
    font-weight: 400;
    opacity: 1;
}

.pg-appintment__box .single-input input::placeholder,
.pg-appintment__box .single-input textarea::placeholder,
.pg-appintment__box .single-input select::placeholder {
    font-size: 13px;
    color: #4b4b4b;
    font-weight: 400;
    opacity: 1;
}

.pg-appintment__box .single-input input:-webkit-placeholder,
.pg-appintment__box .single-input textarea:-webkit-placeholder,
.pg-appintment__box .single-input select:-webkit-placeholder {
    font-size: 13px;
    color: #4b4b4b;
    font-weight: 400;
    opacity: 1;
}

.pg-appintment__box .single-input input::-webkit-placeholder,
.pg-appintment__box .single-input textarea::-webkit-placeholder,
.pg-appintment__box .single-input select::-webkit-placeholder {
    font-size: 13px;
    color: #4b4b4b;
    font-weight: 400;
    opacity: 1;
}

.pg-appintment__box .single-input input:-moz-placeholder,
.pg-appintment__box .single-input textarea:-moz-placeholder,
.pg-appintment__box .single-input select:-moz-placeholder {
    font-size: 13px;
    color: #4b4b4b;
    font-weight: 400;
    opacity: 1;
}

.pg-appintment__box .single-input input::-moz-placeholder,
.pg-appintment__box .single-input textarea::-moz-placeholder,
.pg-appintment__box .single-input select::-moz-placeholder {
    font-size: 13px;
    color: #4b4b4b;
    font-weight: 400;
    opacity: 1;
}

.pg-appintment__box .single-input input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pg-appintment__box .single-input input[type='date']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pg-appintment__box .single-input.button {
    text-align: center;
    margin-top: 50px;
}

.pg-appintment__box .single-input.button button:focus,
.pg-appintment__box .single-input.button button:active {
    outline: none;
}

.pg-appintment__box .single-input .select2-container .select2-selection--single {
    border: none;
    border-bottom: 1px solid #eeeeee;
    line-height: 28px;
    padding: 0;
    font-size: 13px;
    color: #4b4b4b;
    font-weight: 400;
}

.pg-appintment__box .single-input .select2-container .select2-selection--single:focus,
.pg-appintment__box .single-input .select2-container .select2-selection--single:active {
    outline: none;
}

.pg-appintment__box .single-input .select2-container .select2-selection--single:focus {
    border-color: #000;
}

.pg-appintment__box .single-input .select2-container .select2-selection--single .select2-selection__rendered {
    color: #4b4b4b;
    padding-left: 0;
}

.pg-appintment__box p.form-message {
    margin-bottom: 0;
}

.pg-appintment__box p.form-message.success {
    color: #9f4b4b;
    padding-top: 15px;
}

.pg-appintment__box p.form-message.error {
    color: #ef785a;
    padding-top: 15px;
}


/**
* Team Details
*/

.pg-advisor__thumb img {
    width: 100%;
}

.pg-advisor__details {
    background: #333982;
    -webkit-flex-shrink: 100;
    -moz-flex-shrink: 100;
    -ms-flex-negative: 100;
    flex-shrink: 100;
    padding: 30px;
    color: #d0d0d0;
    position: relative;
    overflow: hidden;
}

.pg-advisor__details h2 {
    font-size: 30px;
    margin-bottom: 5px;
    color: #fff;
    text-transform: uppercase;
}

.pg-advisor__details h5 {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.pg-advisor__details h5:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: #b7b7b7;
}

.pg-advisor__details ul.social-area {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
    font-size: 0;
    position: absolute;
    right: 0;
    bottom: 60px;
    background: #5c63bf;
    border-radius: 50px 0 0 50px;
}

.pg-advisor__details ul.social-area li {
    display: inline-block;
    font-size: 15px;
}

.pg-advisor__details ul.social-area li a {
    display: inline-block;
    color: #d0d0d0;
    font-size: 15px;
    padding: 0 17px;
    height: 50px;
    line-height: 52px;
    background: #5c63bf;
}

.pg-advisor__details ul.social-area li a:hover {
    color: #fff;
}

.pg-advisor__details ul.social-area li:first-child a {
    padding-left: 34px;
    border-radius: 50px 0 0 50px;
}

.pg-advisor__details ul.social-area li:last-child a {
    padding-right: 34px;
}

.pg-advisor__progress {
    width: 65%;
}

.pg-advisor__progress__single .progress {
    background: #abcce2;
    border-radius: 0;
    height: 10px;
    overflow: visible;
}

.pg-advisor__progress__single {
    overflow: hidden;
    margin-top: 27px;
}

.pg-advisor__progress__single .progress span {
    position: absolute;
    right: 0;
    top: -35px;
    color: #d0d0d0;
    font-size: 16px;
    font-weight: 400;
    -webkit-transform: translate(50%, 0);
    -moz-transform: translate(50%, 0);
    -ms-transform: translate(50%, 0);
    -o-transform: translate(50%, 0);
    transform: translate(50%, 0);
    -webkit-transition: all 0.4s ease 1s;
    -moz-transition: all 0.4s ease 1s;
    -ms-transition: all 0.4s ease 1s;
    -o-transition: all 0.4s ease 1s;
    transition: all 0.4s ease 1s;
}

.pg-advisor__progress__single .progress-bar {
    position: relative;
    background: #5c63bf;
}

.pg-advisor__progress__single h6 {
    margin-bottom: 8px;
    font-size: 16px;
    text-transform: uppercase;
}

.pg-advisor__experience {
    margin-top: 50px;
}

.pg-advisor__experience h3 {
    color: #303030;
    font-size: 24px;
    line-height: 28px;
    padding-left: 40px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.pg-advisor__experience ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.pg-advisor__experience ul li {
    padding-left: 51px;
    position: relative;
    padding-bottom: 40px;
}

.pg-advisor__experience ul li:before {
    content: '';
    left: 10px;
    top: 20px;
    position: absolute;
    height: 100%;
    width: 1px;
    background: #b7b7b7;
    height: calc(100% - 20px);
}

.pg-advisor__experience ul li:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 20px;
    width: 20px;
    background: transparent;
    border: 1px solid #d1d1d1;
    border-radius: 100%;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.pg-advisor__experience ul li:last-child {
    padding-bottom: 0;
}

.pg-advisor__experience ul li:last-child:before {
    display: none;
}

.pg-advisor__experience ul li h6 {
    text-transform: uppercase;
    color: #494949;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 8px;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.pg-advisor__experience ul li p:last-child {
    margin-bottom: 0;
}

.pg-advisor__experience ul li:hover:after {
    border-color: #9f4b4b;
    background: #9f4b4b;
}

.pg-advisor__experience ul li:hover h6 {
    color: #9f4b4b;
}

.pg-advisor__biography {
    margin-top: 50px;
    padding-right: 30px;
}

.pg-advisor__biography h3 {
    color: #303030;
    font-size: 24px;
    line-height: 28px;
    padding-left: 0;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.pg-advisor__biography h4 {
    color: #666;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: 40px;
}

.pg-advisor__biography h6 {
    text-transform: uppercase;
    font-weight: 400;
    color: #303030;
}

.pg-advisor__biography h6 a {
    font-size: 24px;
    color: #9f4b4b;
    text-transform: lowercase;
}

.pg-advisor__biography h6 a:hover {
    color: #ef785a;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .pg-advisor__progress {
        width: 56%;
    }

    .pg-advisor__biography {
        padding-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pg-advisor__thumb {
        text-align: center;
    }

    .pg-advisor__progress {
        width: 60%;
    }

    .pg-advisor__biography {
        padding-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .pg-advisor__thumb {
        text-align: center;
    }

    .pg-advisor__progress {
        width: 80%;
    }

    .pg-advisor__biography {
        padding-right: 0;
    }

    .pg-advisor__details ul.social-area {
        position: relative;
        right: 0;
        bottom: 0;
        border-radius: 50px;
        margin-top: 50px;
        text-align: center;
    }
}

@media only screen and (max-width: 575px) {
    .pg-advisor__thumb {
        text-align: center;
    }

    .pg-advisor__progress {
        width: 100%;
    }

    .pg-advisor__biography {
        padding-right: 0;
    }

    .pg-advisor__details ul.social-area {
        position: relative;
        right: 0;
        bottom: 0;
        border-radius: 50px;
        margin-top: 50px;
        text-align: center;
    }

    .pg-advisor__details ul.social-area li:last-child a {
        padding-right: 0;
    }

    .pg-advisor__details ul.social-area li:first-child a {
        padding-left: 0;
    }
}


/**
 * Portfolio
 */

.portfolio-filters {
    font-size: 0;
    margin-top: 15px;
}

.portfolio-filters button {
    display: inline-block;
    font-size: 16px;
    color: #454545;
    background: transparent;
    padding: 6px 22px 6px 22px;
    outline: none;
    font-weight: 700;
    text-transform: capitalize;
    margin-top: 10px;
    letter-spacing: 1px;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    border: none;
    position: relative;
    border: 1px solid transparent;
}

.portfolio-filters button.is-active {
    color: #9f4b4b;
    border: 1px solid #9f4b4b;
}

.portfolio-filters button:hover {
    color: #9f4b4b;
}

.portfolio-wrap {
    margin-top: 20px;
}

.portfolio {
    margin-top: 30px;
    position: relative;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.portfolio-image {
    position: relative;
    overflow: hidden;
}

.portfolio-image img {
    width: 100%;
    -webkit-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}

.portfolio-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    padding: 15px;
    text-align: center;
    background: rgba(51, 57, 130, 0.9);
    text-align: left;
    padding: 30px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.portfolio-content a {
    color: #ffffff;
}

.portfolio-content h5 {
    font-weight: 500;
    margin-bottom: 10px;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 0.5px;
}

.portfolio-content h6 {
    color: #ffffff;
    margin-bottom: 0;
    font-size: 14px;
    text-transform: uppercase;
}

.portfolio .portfolio-zoomicon {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #ffffff;
    z-index: 3;
    font-size: 22px;
    padding: 2px;
    -webkit-transform: translate(100%, 100%);
    -ms-transform: translate(100%, 100%);
    transform: translate(100%, 100%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.portfolio .portfolio-zoomicon::before {
    position: absolute;
    height: 100px;
    width: 45px;
    background: #9f4b4b;
    bottom: -37px;
    right: -10px;
    z-index: 2;
    content: '';
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.portfolio .portfolio-zoomicon i {
    position: relative;
    z-index: 3;
}

.portfolio:hover {
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
}

.portfolio:hover .portfolio-zoomicon {
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
}

.portfolio:hover .portfolio-image img {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.portfolio:hover .portfolio-content {
    visibility: visible;
    opacity: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .portfolio-content {
        padding: 15px;
    }
}


/**
 * Portfolio Details
 */

.portfolio-details-image img {
    width: 100%;
}

.portfolio-details-meta ul {
    background: #f8f8f8 none repeat scroll 0 0;
    border: 1px solid #e5e5e5;
    padding: 0 20px;
    margin-bottom: 0;
    list-style: none;
    text-transform: uppercase;
    font-size: 14px;
}

.portfolio-details-meta ul li {
    list-style: none;
    border-bottom: 1px solid #e5e5e5;
    color: #666;
    padding: 10px 0;
}

.portfolio-details-meta ul li:last-child {
    border-bottom: 0 none;
}

.portfolio-details-meta ul li i {
    color: #444;
    font-size: 16px;
    line-height: normal;
    margin-right: 20px;
}

.portfolio-details-meta ul li span {
    color: #444;
    font-weight: 600;
    margin-right: 5px;
}

.portfolio-details-meta ul li a {
    color: #454545;
}

.portfolio-details-meta ul li a:hover {
    color: #9f4b4b;
}

.portfolio-details-info .portfolio-title {
    font-weight: 600;
    letter-spacing: 1px;
}

.portfolio-details-info .post-share {
    border-bottom: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    overflow: hidden;
    padding: 10px 0;
    margin-top: 30px;
}

.portfolio-details-info .post-share h6 {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
}

.portfolio-details-info .post-share ul {
    display: inline-block;
    vertical-align: middle;
    padding-left: 0;
    margin-bottom: 0;
}

.portfolio-details-info .post-share ul li {
    display: inline-block;
    list-style: none;
    margin: 0 6px;
    font-size: 14px;
}

.portfolio-details-info .post-share ul li a {
    display: block;
    color: #454545;
}

.portfolio-details-info .post-share ul li a:hover {
    color: #000000;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio-details-info {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .portfolio-details-info {
        margin-top: 50px;
    }
}


/**
Boxed Layout Styles
*/

.boxed--layout {
    margin: 0 150px;
}

.boxed--layout .sticky--header.is-sticky .header__bottom {
    width: calc(100% - 300px);
    margin-left: 150px;
}

.boxed--layout .feature {
    padding: 85px 70px;
}

.boxed--layout .taxcalc__content__inner {
    width: 75%;
}

.boxed--layout .taxcalc__calculation {
    padding: 125px 70px;
}

@media only screen and (min-width: 1600px) and (max-width: 1919px) {
    .boxed--layout {
        margin: 0 80px;
    }

    .boxed--layout .sticky--header.is-sticky .header__bottom {
        width: calc(100% - 160px);
        margin-left: 80px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .boxed--layout {
        margin: 0 30px;
    }

    .boxed--layout .sticky--header.is-sticky .header__bottom {
        width: calc(100% - 60px);
        margin-left: 30px;
    }

    .boxed--layout .taxcalc__calculation {
        padding: 125px 0;
    }

    .boxed--layout .taxcalc__content__inner {
        right: -8%;
        width: 90%;
        padding: 50px;
    }

    .boxed--layout .feature {
        padding: 85px 30px;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .boxed--layout .taxcalc__calculation {
        padding: 125px 15px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .boxed--layout {
        margin: 0 20px;
    }

    .boxed--layout .sticky--header.is-sticky .header__bottom {
        width: calc(100% - 40px);
        margin-left: 20px;
    }

    .boxed--layout .feature {
        padding: 55px 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .boxed--layout {
        margin: 0 10px;
    }

    .boxed--layout .sticky--header.is-sticky .header__bottom {
        width: calc(100% - 20px);
        margin-left: 10px;
    }

    .boxed--layout .feature {
        padding: 55px 30px;
    }
}

@media only screen and (max-width: 767px) {
    .boxed--layout {
        margin: 0 10px;
    }

    .boxed--layout .sticky--header.is-sticky .header__bottom {
        width: calc(100% - 20px);
        margin-left: 10px;
    }
}

@media only screen and (max-width: 575px) {
    .boxed--layout .feature {
        padding: 60px 20px;
    }

    .boxed--layout .taxcalc__content__inner {
        width: 90%;
    }

    .boxed--layout .taxcalc__calculation {
        padding: 80px 10px;
    }
}


/**/

.button__holder {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    &:after {
        content: '';
        position: absolute;
        z-index: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(#1a1a1a, 0.7);
    }
}

.button__holder .plus {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 80px;
    color: #1a1a1a;
    background: #39aad4;
    border-radius: 20px;
    border: none;
    transition: box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), transform 200ms cubic-bezier(0.2, 0, 0.7, 1);

    &:after {
        content: '';
        font-size: 2.5em;
        line-height: 1.1em;
    }

    &:hover {
        transform: rotate(45deg);
        background: #0bb099;
    }
}


/*0412新增-酷碰任務頁面用*/

.coupon__holder {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    &:after {
        content: '';
        position: absolute;
        z-index: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

.coupon__holder .plus {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 80px;
    color: #1a1a1a;
    background: #ff7800;
    border-radius: 50%;
    border: none;
    transition: box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), transform 200ms cubic-bezier(0.2, 0, 0.7, 1);

    &:after {
        content: '';
        font-size: 2.5em;
        line-height: 1.1em;
    }

    &:hover {
        transform: rotate(45deg);
        background: #ff000096;
    }
}


/*0304新增*/

.card-02 {
    position: relative;
    text-align: center;
    background: #f0f0f0;
    border: none;
    box-shadow: 0 6px 10px 0 rgba(20, 34, 67, 0.1);
    margin-bottom: 15px;
    border-radius: 10px;
}

.bg-gray {
    background: #f0f0f0;
}

.bg-gray2 {
    background: #d5cbcb;
}

.bg-gray3 {
    background: #eaeaea !important;
}


/*0307禮券用*/

.cou_tag-pink-orange {
    background-color: #f5e3d5;
    color: #fc7624;
}

.cou_tag {
    border-radius: 30px;
    font-size: 0.72rem;
    padding: 0 0.5rem;
    margin: 0 0.1rem;
    line-height: 1.8;
    display: inline-block;
}

.vip_Text {
    padding: 1px 10px 1px 5px;
    letter-spacing: normal;
    height: auto !important;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 1rem;
    max-width: 150px;
    background: linear-gradient(-135deg, transparent 18px, #e11642 0);
    color: #fff;
}

.f-s07 {
    font-size: 0.75rem;
}

.f-s08 {
    font-size: 0.85rem;
}

.f-s13 {
    font-size: 1.03rem;
    font-weight: bold;
}

.f-g02 {
    font-size: 2rem;
}

.f-g03 {
    font-size: 3rem;
}

.jyMVYv {
    width: 10rem;
    margin: 0 10px;
    height: 20px;
    background-color: #ff7246;
    box-shadow: rgba(247, 66, 47, 0.25) 0px 0px 4px;
    border-radius: 8px;
    position: relative;
}

.jyMVYv .content {
    width: 100%;
    height: 20px;
    line-height: 18px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    position: absolute;
    left: 0px;
    top: 0px;
}


/*倒數用*/

.time span {
    display: block;
    float: left;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    margin: 1px;
    color: #fff;
    background-color: rgba(207, 18, 18, 0.9);
}

.btn-pay {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: none;
    padding: 0.375rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}

.btn_applepay,
.btn_googlepay {
    background-color: #fff;
    border: 1px solid #454545;
    border-radius: 0.25rem;
}

.btn_jkopay {
    background: #e60911;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.btn_pxpay {
    background: #ffd100;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.btn_taiwanpay {
    background: #e94898;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.btn_linepay {
    background: #08bf5b;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.btn_cash {
    background: #a6a6a6;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.btn_mem {
    height: 5rem;
    width: 5rem;
    border-radius: 100px;
    border: none;
    color: #f38900;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.btn_member01 {
    background: #ffffffe3;
}


/* coupon內頁下方用 */

@media (max-width: 1024px) {
    .navbar-vertical-bottom {
        position: fixed;
        top: auto;
        bottom: 0;
        height: auto;
        width: 100%;
        z-index: 99;
    }

    .navbar-vertical-bottom,
    .navbar-vertical-bottom ul.navbar-nav {
        -webkit-transition: none;
        -moz-transition: none;
        transition: none;
        -webkit-transform: none;
        -moz-transform: none;
        transform: none;
    }

    .navbar-vertical-bottom ul.navbar-nav>li {
        display: table-cell;
    }

    .navbar-vertical-bottom ul.navbar-nav>li>a {
        display: inline-block;
        width: 100%;
        text-align: center;
        height: 50px;
        line-height: 30px;
    }

    .navbar-vertical-bottom ul.navbar-nav>li>a>i.fa {
        margin: 0;
    }

    .navbar-vertical-bottom ul.navbar-nav>li>a>span {
        display: none;
    }

    .navbar-vertical-bottom ul.navbar-nav>li>a>p {
        display: block;
    }
}


/* 我的酷碰內頁左右滑動tab用 */

.my-pagination .swiper-pagination-bullet {
    text-align: center;
    border-radius: 0;
    opacity: 1;
}

.my-pagination ul {
    display: -webkit-box;
}

.my-pagination li {
    display: block;
    overflow: hidden;
    box-flex: 1;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    height: 40px;
    line-height: 40px;
    position: relative;
    font-size: 13px;
}

.my-pagination li:after {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 1px;
    content: '';
    background-color: #dcdcdc;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scaleY(0.5);
}

.my-pagination .swiper-pagination-bullet-active {
    color: #fff;
    background-color: #de0022;
}

.my-pagination .swiper-pagination-bullet-active:after {
    opacity: 1;
    background-color: #ff2f00;
    height: 4px;
}


/* lecture-ticket內頁左右滑動tab用 */

.my-pagination-l .swiper-pagination-bullet {
    text-align: center;
    border-radius: 0;
    opacity: 1;
}

.my-pagination-l ul {
    display: -webkit-box;
}

.my-pagination-l li {
    display: block;
    overflow: hidden;
    box-flex: 1;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    height: 40px;
    line-height: 40px;
    position: relative;
    font-size: 13px;
}

.my-pagination-l li:after {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 1px;
    content: '';
    background-color: #dcdcdc;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scaleY(0.5);
}

.my-pagination-l .swiper-pagination-bullet-active {
    color: #61b26a;
}

.my-pagination-l .swiper-pagination-bullet-active:after {
    opacity: 1;
    background-color: #61b26a;
    height: 4px;
}


/* activity-ticket內頁左右滑動tab用 */

.my-pagination-a .swiper-pagination-bullet {
    text-align: center;
    border-radius: 0;
    opacity: 1;
}

.my-pagination-a ul {
    display: -webkit-box;
}

.my-pagination-a li {
    display: block;
    overflow: hidden;
    box-flex: 1;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    height: 40px;
    line-height: 40px;
    position: relative;
    font-size: 13px;
}

.my-pagination-a li:after {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 1px;
    content: '';
    background-color: #dcdcdc;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scaleY(0.5);
}

.my-pagination-a .swiper-pagination-bullet-active {
    color: #ab1839;
}

.my-pagination-a .swiper-pagination-bullet-active:after {
    opacity: 1;
    background-color: #ab1839;
    height: 4px;
}

.topbox {
    background-color: pink;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/*捲軸底色*/

#style-3::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #ffc0cb;
}


/*捲軸寬度*/

#style-3::-webkit-scrollbar {
    width: 6px;
    background-color: black;
}


/*捲軸本體顏色*/

#style-3::-webkit-scrollbar-thumb {
    background-color: #bb6573;
}


/*0417新增-手寫電子簽名*/

#signature {
    width: 100%;
    touch-action: none;
    /* 防止觸控事件的默認行為 */
}

.htmleaf-container {
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
}

#termsTextarea {
    background: #fff;
    padding: 10px;
    height: 300px;
    /* 設定 textarea 的高度 */
}


/* 預設樣式（未選中） */

#agreeButton[disabled] {
    background-color: #ccc;
    color: #fff;
    border: none;
    cursor: not-allowed;
}


/* (被選中) */

#agreeButton {
    margin-top: 10px;
    padding: 10px 50px;
    background-color: white;
    color: #4caf50;
    border: 1px solid #4caf50;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}


/* 選中 checkbox 時的樣式（綠底白字） */

#agreeToggle:checked+#agreeButton {
    background-color: #4caf50;
    color: white;
}


/* 禁用狀態（滑到底前） */

#agreeToggle:disabled+#agreeButton {
    color: #fff;
    background-color: #ccc;
    border: none;
    cursor: not-allowed;
}

#agreeToggle2:checked+#agreeButton {
    background-color: #4caf50;
    color: white;
}


/* 禁用狀態（滑到底前） */

#agreeToggle2:disabled+#agreeButton {
    color: #fff;
    background-color: #ccc;
    border: none;
    cursor: not-allowed;
}

#agreeToggle3:checked+#agreeButton {
    background-color: #4caf50;
    color: white;
}


#agreeToggle3:disabled+#agreeButton {
    color: #fff;
    background-color: #ccc;
    border: none;
    cursor: not-allowed;
}

#textlistn {
    width: 100%;
    display: none;
    /* 初始隱藏 */
}

.textlistn {
    width: 100%;
    display: none;
}

.agree-button {
    margin-top: 10px;
    padding: 10px 50px;
    background-color: white;
    color: #4caf50;
    border: 1px solid #4caf50;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}


/* 被選中 → 綠底白字 */

.agree-toggle:checked+.agree-button {
    background-color: #4caf50;
    color: white;
}


/* 禁用（尚未滑到底）→ 灰底白字 */

.agree-toggle:disabled+.agree-button {
    color: #fff;
    background-color: #ccc;
    border: none;
    cursor: not-allowed;
}


/*0425-首頁總覽滑動用*/

.swiper-index1 {
    width: 100%;
}

.swiper-index1 .selected {
    color: #af1b2b;
    border-bottom: 3px solid #af1b2b;
}

.swiper-index1 .swiper-slide {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 800;
    height: 35px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: pointer;
}

.swiper-index2 {
    width: 100%;
    min-height: 250px;
}

.swiper-index2 .swiper-slide {
    text-align: center;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.in-con-lh {
    line-height: 20px;
}


/*0430新增-member-info互惠金引薦用*/

.mem-box {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.mem-box .left-box,
.mem-box .right-box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 1);
    font-weight: 600;
    position: relative;
    top: 0;
    left: 0;
    width: 400px;
    height: 200px;
}

@media screen and (min-width: 320px) and (max-width: 410px) {

    .mem-box .left-box,
    .mem-box .right-box {
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(255, 255, 255, 1);
        font-weight: 600;
        position: relative;
        top: 0;
        left: 0;
        width: 140px;
        height: 180px;
    }
}

@media screen and (min-width: 411px) and (max-width: 480px) {

    .mem-box .left-box,
    .mem-box .right-box {
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(255, 255, 255, 1);
        font-weight: 600;
        position: relative;
        top: 0;
        left: 0;
        width: 160px;
        height: 180px;
    }
}

.mem-box .left-box {
    position: relative;
    border-radius: 5px 0 0 5px;
    background: linear-gradient(90deg, #1070dc, #ebcf13);
    margin-right: 10px;
}

.mem-box .right-box {
    position: relative;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(90deg, #fb9822, #eb165c);
    margin-left: 75px;
}

.f-box {
    position: absolute;
    top: 55px;
    right: -50px;
}

.f-box-bg {
    position: absolute;
    top: 75px;
    height: 55px;
    width: 100%;
    background: linear-gradient(-45deg, transparent 10px, #2173f170);
}

.f-box-text {
    position: absolute;
    bottom: 5px;
    left: 10px;
    opacity: 0.5;
    font-size: 25px;
}

.a-box {
    position: absolute;
    top: 55px;
    left: -48px;
}

.a-box-bg {
    position: absolute;
    top: 50px;
    height: 55px;
    width: 100%;
    background: linear-gradient(45deg, transparent 10px, #d7560eb8);
}

.a-box-text {
    position: absolute;
    top: 5px;
    right: 10px;
    opacity: 0.5;
    font-size: 25px;
}

.mem-box .left-box::after,
.mem-box .right-box::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
}

.mem-box .left-box::after {
    right: -90px;
    left: 100%;
    background: #ebcf13;
    transform: translateX(-50px) skewX(-25deg);
    border-radius: 0 5px 5px 0;
}

.mem-box .right-box::before {
    right: 100%;
    left: -90px;
    background: #fb9822;
    transform: translateX(50px) skewX(-25deg);
    border-radius: 5px 0 0 5px;
}

.mem-letter {
    line-height: 26px;
    letter-spacing: 1px;
}


/*0509新增-我的帳戶送出填寫更新彈跳*/

.mod_mem_bg {
    background: url('../img/member/mod-mem-bg.png') no-repeat center center;
    background-size: cover;
    width: 100%;
    /*此行設定div的寬度*/
    padding-bottom: 20px;
}

.mod_mem_bg_div {
    width: auto;
    height: 27rem;
}

.mod_mem_bg_div .relative {
    position: relative;
    width: 400px;
    justify-content: center;
}

.mod_mem_bg_div .relative .absolute h4 {
    color: #6a310b;
    font-weight: bold;
    font-size: 1.5rem;
}

.mod_mem_bg_div .relative .absolute {
    position: absolute;
    top: 245px;
    left: 23%;
    justify-items: center;
    width: 195px;
}

@media (min-width: 960px) {
    .mod_mem_bg_div {
        width: auto;
    }

    .mod_mem_bg_div .relative {
        position: relative;
        width: 450px;
        height: 450px;
        justify-content: center;
    }

    .mod_mem_bg_div .relative .absolute h4 {
        color: #6a310b;
        font-weight: bold;
        font-size: 1.8rem;
    }

    .mod_mem_bg_div .relative .absolute {
        position: absolute;
        top: 240px;
        left: 30%;
        justify-items: center;
        width: 200px;
    }
}


/*0301-上傳文件用*/

.container-up {
    display: flex;
    flex-direction: column;
    background: linear-gradient(to top, #a1d1c6, #e3f5f500);
    padding: 3rem 0;
}

.container .l-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #fff;
    background: #1eb512;
    padding: 10px;
    border-radius: 2px;
    border: none;
    -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
    margin: 10px auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.container .l-btn:focus {
    outline: none;
}

.container .l-btn:active {
    -webkit-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s;
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}


/* 上传图片栏目 START */

.upload-img-column {
    width: 100%;
    padding: 10px;
    background: #d0f3db;
    border-radius: 5px;
}

.upload-img-column .words {
    font-size: 14px;
}

.upload-img-column .upload-wrap {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.upload-img-column .upload-wrap .box {
    width: 33.33%;
    padding: 10px 10px 0 0;
}

.upload-img-column .upload-wrap .box .p {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.upload-img-column .upload-wrap .box .p img {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.upload-img-column .upload-wrap .box .p .delete {
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 50%;
    background: #e0e0e0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0.8;
}

.upload-img-column .upload-wrap .box .p .delete:active {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}

.upload-img-column .upload-wrap .box .p .delete img {
    width: 14px;
    height: 14px;
}

.upload-img-column .upload-wrap .box .p.dotted {
    display: block;
    border: dotted 2px #b1b1b1;
}

.upload-img-column .upload-wrap .box .p.dotted input {
    display: none;
}

.upload-img-column .upload-wrap .box .p.dotted img {
    width: 60%;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0.8;
}


/* 上传图片栏目 END */

.uploading-data {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    left: 0;
    top: 0;
    z-index: 1000;
}

.success-path {
    width: 100%;
    padding: 0 10px;
}

.success-path a {
    display: block;
    margin-top: 6px;
}

a.order-link {
    padding: 10px 30px;
    display: block;
    color: #fff;
}

.nav-pills .coupon-link {
    background: none;
    border: 0;
    color: #ff5f0c;
    padding: 5px 20px;
}

.nav-pills .coupon-link.active,
.nav-pills .show>.coupon-link {
    color: #fff;
    background: linear-gradient(to top, #ff0023, #ff7409);
}


/*0624新增-酷碰專區用*/

.product-card {
    padding: 0;
    border-radius: 10px;
}

.activity-banner:hover,
.product-card:hover {
    box-shadow: 0 1px 3px 0 hsla(0, 0%, 66.7%, 0.5);
}

.product-card .product-img {
    position: relative;
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.product-img .product-card-image {
    width: 100%;
    overflow: hidden;
}

.product-card .badge {
    z-index: 10;
}

.p-2.coupon-area {
    height: 40px;
    width: 232px;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: nowrap;
}

.p-2.coupon-area ul {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.p-2.coupon-area li {
    border-radius: 5px;
    padding: 2px 6px;
    color: white;
    font-size: 14px;
    white-space: nowrap;
}

.sold-out-label img {
    transition: none !important;
    transform: none !important;
}

.owl-carousel .owl-item img,
.product-card .product-img .product-card-image {
    opacity: 1;
    transition: 1s ease;
}

.owl-carousel .owl-item img:hover,
.product-card .product-img .product-card-image:hover {
    transform: scale(1.02);
    transition: 1s ease;
}

.today-sectionBox .product-card .product-img {
    height: 275px;
}

.today-sectionBox .product-card .product-detail {
    height: 196px;
}

.sold-out-label {
    position: absolute;
    top: 25%;
    left: 10%;
    width: 80%;
    transform: rotate(-10deg);
    z-index: 1;
}

.sold-out-label img {
    height: auto;
    border-bottom: none !important;
    width: 90%;
    margin: 0 auto;
}

.product-card .product-detail {
    padding: 0.6rem;
}

.product-detail h3 {
    font-size: 1.1rem;
}

.product-detail h4 {
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
    min-height: 35px;
}

@media only screen and (max-width: 480px) {
    .product-detail h4 {
        min-height: 35px;
    }
}

.product-price {
    padding: 0.1rem 0.5rem;
    /* display: flex; */
    justify-content: flex-end;
    flex-wrap: wrap;
    /* 讓內容在溢出時換行 */
}

.price-card .current {
    font-size: 1.4rem;
    margin-left: 0.1rem;
}

.product-card .product-price .sell {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
    line-height: 20px;
}

.price-card .current span.rise {
    font-size: 0.85rem;
    margin-left: -0.2rem;
}

.mm-block,
.mm-product-price {
    display: none;
}

.channel-sectionBox .product-detail,
.page-sectionBox .product-detail {
    height: 195px;
}

.welfare-sectionBox .product-detail {
    height: 100px !important;
}

.line-through {
    text-decoration: line-through;
}

.section-head h2 {
    font-size: 1.5rem;
    color: #4a4a4a;
    font-weight: 700;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1.1rem;
}

.sectionNav .section-head h3 .hightlight-c {
    display: inline-block;
    width: 4px;
    height: 24px;
    border-radius: 12px;
    background-color: #de0022;
    vertical-align: middle;
    margin-right: 16px;
    margin-top: -5px;
}


/*0625-評論星星*/

.set_image_all {
    cursor: pointer;
    position: relative;
}

.set_image_all .set_image_item {
    position: relative;
    display: inline-block;
    z-index: 11;
    visibility: visible;
}

.set_image_all .set_image_top {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

.set_image_all .set_image_top>div {
    display: inline-block;
    overflow: hidden;
}

.set_image_all .set_image_top>div>img {
    height: 100%;
}

.grade {
    vertical-align: top;
}


/*index*/

.header-bg {
    z-index: 999;
    margin: auto;
    position: relative;
    left: calc(50% - 50px);
    top: -50px;
}

.sectionBox {
    padding: 2rem 0;
}

.sectionBox .section-head h3 {
    border-bottom: 1px solid #e6e6e6;
    font-size: 1.4rem;
    padding: 0 0 0.5rem;
    margin-bottom: 2rem;
    font-weight: 500;
}

.section-stage .product-img {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.section-stage .item {
    padding: 10px;
}

/* .border {
    border: 1px solid #dee2e6 !important;
} */

.border-radius-5 {
    border-radius: 5px;
}

.border-radius-12 {
    border-radius: 12px;
}

.btn-list {
    width: 100%;
    max-width: 1099px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-list li {
    width: 120px;
    margin: auto;
    box-sizing: border-box;
    padding: 10px;
    margin: 5px 0;
}

.btn-list li .img {
    width: 70px;
    height: 70px;
    margin: auto;
}

.btn-list li .img img {
    max-height: 100%;
}

.btn-list li div {
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
}

@media screen and (max-width: 900px) {
    .btn-list {
        max-width: initial;
    }

    .btn-list a {
        width: 25%;
        float: left;
    }

    .coupon-head-box .btn-list a {
        width: 33.3%;
    }

    .btn-list li {
        width: 100%;
    }

    .btn-list li div:nth-child(2) {
        margin-top: -10px;
    }

    .btn-list li .img {
        width: 100%;
        text-align: center;
    }

    .btn-list li .img img {
        /* max-width: 80%;*/
        padding-bottom: 15px;
    }
}

@media screen and (max-width: 475px) {
    .btn-list li div {
        font-size: 0.8rem;
    }

    .btn-list li div:nth-child(2) {
        margin-top: -10px;
    }
}

.intro-1 {
    background-color: #eeeeee;
    padding-top: 40px;
}

.intro-1 .membership-intro {
    padding: 0;
    display: flex;
    position: relative;
    left: calc(50% - 170px);
}

.intro-1 .membership-intro .detail-image {
    margin: 0 10px;
}

.intro-1 .membership-intro .detail-image {
    display: inline-block;
    margin: 0;
    vertical-align: top;
}

.intro-1 .membership-intro .detail-image img {
    height: 100px;
    width: 100px;
    position: relative;
    object-fit: cover;
    border-radius: 12px;
    background: url(../img/2022_vip/no_photo.svg) center center no-repeat;
    background-size: cover;
}

.intro-1 .membership-intro .detail-content {
    display: inline-block;
    margin: 0 0 0 14px;
    vertical-align: top;
    width: 200px;
}

.intro-1 .membership-intro .detail-desc-wrapper {
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: space-between;
}

.intro-1 .membership-intro .detail-content .card-desc {
    font-size: 14px;
    margin-left: 14px;
}

.intro-1 .membership-intro .detail-content .card-desc p {
    font-size: 14px;
    padding-left: 17px;
    position: relative;
}

.intro-1 .membership-intro .detail-content .card-desc p:before {
    content: '';
    height: 11px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-54%);
    width: 11px;
}

.intro-1 .membership-intro .detail-content .card-price:before {
    background: #155bb8;
}

.intro-2 {
    background-color: #155bb8;
    padding: 30px 30px;
    color: white;
}

.intro-2 .intro-option-desc p {
    font-size: 14px;
    padding-left: 17px;
    position: relative;
}

.intro-2 .intro-option-desc p:before {
    content: '';
    height: 11px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-54%);
    width: 11px;
}

.intro-2 .intro-option-text:before {
    background: #96bbec;
}

.sectionNav {
    padding: 2rem 0;
}

.intro-3 {
    margin-top: 40px;
    margin-bottom: 40px;
}

.sectionNav .nav-item a,
.intro-3 .nav-item a {
    background-color: #504949;
}

.sectionNav .nav-item a span,
.intro-3 .nav-item a span {
    width: 100px;
}

#myTab .nav-item a.active {
    background-color: #ff5b36;
    color: white;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid #ff5b36;
}

@media screen and (max-width: 768px) {
    .sectionNav {
        padding: 1rem 0;
    }

    #myTab {
        margin: auto;
    }

    .intro-3 h3 {
        text-align: center;
    }
}

.mobile-wrapper {
    display: none;
}

@media screen and (max-width: 768px) {
    .mobile-wrapper {
        display: block;
    }

    .desk-wrapper {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    .desk-wrapper {
        display: block;
    }

    .mobile-wrapper {
        display: none;
    }
}


/*篩選*/

.search-area,
.msearch-area {
    background: #fff;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
    border-radius: 12px;
}

.search-area,
.msearch-area.list h6 {
    font-size: 0.5 rem;
    color: #383636;
}

.search-area .input-field {
    height: 68px;
}

.msearch-area .input-field {
    height: 40px;
}

.search-area .input-field input,
.msearch-area .input-field input {
    height: 100%;
    border: 0;
    display: block;
    width: 100%;
    padding: 10px 32px;
    font-size: 16px;
    color: #555;
}

.search-area .input-field input::placeholder,
.msearch-area .input-field input::placeholder {
    color: #888;
    font-size: 16px;
    font-weight: 500;
}

.search-area .input-field input:-moz-placeholder,
.msearch-area .input-field input:-moz-placeholder {
    color: #888;
    font-size: 16px;
}

.search-area .input-field input::-webkit-input-placeholder,
.msearch-area .input-field input::-webkit-input-placeholder {
    color: #888;
    font-size: 16px;
}

.search-area .input-field input:hover,
.search-area .input-field input:focus {
    box-shadow: none;
    outline: 0;
    border-color: #fff;
}

.search-area .input-field.search-wrap {
    width: 28%;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    padding: 5px 15px 0px 15px;
}

.search-area .input-field.search-wrap.list1 {
    width: 25%;
}

.search-area .input-field.search-wrap.list2 {
    width: 75%;
    padding-top: 5px;
}

.search-area .select2-selection--multiple {
    margin: 10px 0;
    /* border: 0; */
    padding-top: 2px;
}

.select2-search__field::placeholder {
    padding-left: 5px;
}

.select2-results__option {
    padding-left: 20px;
}

.search-area .input-field.secondtxt-wrap {
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 40%;
}

.msearch-area .input-field.secondtxt-wrap {
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 100%;
}

.search-area .input-field.icon-wrap,
.msearch-area .input-field.icon-wrap {
    width: 74px;
}

.search-area .input-field.icon-wrap .btn-search,
.msearch-area .input-field.icon-wrap .btn-search {
    height: 100%;
    width: 100%;
    white-space: nowrap;
    color: #fff;
    border: 0;
    cursor: pointer;
    background: #727172;
    transition: all 0.2s ease-out, color 0.2s ease-out;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.search-area .input-field.icon-wrap .btn-search-p {
    height: 100%;
    width: 100%;
    white-space: nowrap;
    color: #fff;
    border: 0;
    cursor: pointer;
    background: #f75d19;
    transition: all 0.2s ease-out, color 0.2s ease-out;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.msearch-area .input-field.icon-wrap .btn-search-p {
    height: 100%;
    width: 100%;
    white-space: nowrap;
    color: #fff;
    border: 0;
    cursor: pointer;
    background: #f75d19;
    transition: all 0.2s ease-out, color 0.2s ease-out;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.search-area .input-field.icon-wrap .btn-search svg,
.msearch-area .input-field.icon-wrap .btn-search svg {
    width: 16px;
}

.search-area .input-field.icon-wrap .btn-search:hover,
.msearch-area .input-field.icon-wrap .btn-search:hover {
    background: #ff2828;
}

.search-area .input-field.icon-wrap .btn-search:focus,
.msearch-area .input-field.icon-wrap .btn-search:focus {
    outline: 0;
    box-shadow: none;
}

@media screen and (max-width: 992px) {
    .search-area .input-field {
        height: 50px;
    }

    .search-area .input-field.icon-wrap .btn-search {
        border-radius: 0px;
        margin-top: 10px;
    }

    .search-area .select2-selection--multiple {
        border: 1px solid #ced4da;
    }
}

@media screen and (max-width: 767px) {
    .search-area {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 20px;
    }

    .search-area .input-field {
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .search-area .input-field input {
        padding: 10px 15px;
    }

    .search-area .input-field.search-wrap.list1,
    .search-area .input-field.search-wrap.list2,
    .search-area .input-field.search-wrap {
        width: 100%;
        border-right: 0;
        padding: 0;
    }

    .search-area .input-field.secondtxt-wrap {
        width: 100%;
        margin-bottom: 30px;
    }

    .search-area .input-field.secondtxt-wrap input {
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 5px 15px 0px 15px;
    }

    .search-area .input-field.icon-wrap {
        margin-bottom: 0;
        width: 100%;
    }
}

.sectionNav {
    padding: 1rem 0;
}

.sectionNav .section-stage {
    max-height: 170px;
    overflow-y: auto;
}

.section-stage .area {
    padding: 10px;
}

.section-stage .area li.area-item {
    float: left;
    margin: 0.1rem 0.5rem 0.5rem;
    width: 11%;
    white-space: nowrap;
}

.area li.area-item a.active,
.area li.area-item a:hover {
    border: 1px solid #de0022;
    color: #fff;
    background-color: #de0022;
}

.area li.area-item a {
    color: #de0022;
    background-color: #fff;
    border: 1px solid #de0022;
    line-height: 2;
    border-radius: 10px;
    white-space: nowrap;
    text-align: center;
    display: block;
    font-size: 0.9rem;
}

@media screen and (max-width: 768px) {
    .section-stage .area li.area-item {
        width: 20%;
    }
}


/*酷碰列表*/

.couponSale .couponSaleTitle {
    height: 60px;
    border-radius: 12px 12px 0 0;
    padding: 20px 1.2rem 0;
}

.couponSale .couponSaleTitle.first {
    background-color: #de0022;
}

.couponSale .couponSaleTitle.second {
    background-color: #de0022;
}

.couponSale .couponSale-body {
    padding: 2rem;
}

.couponSale .couponSaleTitle h2 {
    font-size: 1.5rem;
}

.couponSale .couponSaleTitle .more {
    top: 1.5rem;
    position: absolute;
    right: 1rem;
}

.couponSale .couponSaleTitle .more a {
    color: #fff;
    font-size: 0.8rem;
    padding: 0.1rem 0.5rem;
}

.couponSale .couponSale-body {
    border: 1px solid #f5f5f5;
    background-color: #f5f5f5;
    border-radius: 0 0 12px 12px;
    position: relative;
    padding: 2rem;
}

.couponSale .product-card .coupon-detail {
    min-height: 148px;
    border-radius: 0 0 12px 12px;
}

.couponSale .product-card .coupon-detail .location-tag {
    margin-left: 10px;
    margin-top: 10px;
}

.couponSale .product-card .coupon-detail .ountdownLabel {
    color: #858585;
    text-align: left;
    padding-left: 10px;
}

.couponSale .product-card .coupon-detail .coupon-btn-r {
    color: #564e47;
    padding: 10px;
    border-right: 1px solid #d7d7d7;
    border-top: 1px solid #d7d7d7;
}

.couponSale .product-card .coupon-detail .coupon-btn-l {
    color: #564e47;
    padding: 10px;
    border-top: 1px solid #d7d7d7;
}

.product-price .original {
    padding-top: 0.5rem;
    padding-left: 0.5rem;
}

.product-price .current {
    font-size: 1.4rem;
    margin-left: 0.1rem;
}

.product-price .current span.rise {
    font-size: 0.85rem;
}

.product-card {
    padding: 0;
    border-radius: 12px;
}

.coupon-sq-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.coupon-sq-img img {
    width: 100%;
    height: 100%;
}

.couponSale .product-card .coupon-img {
    width: 230px;
}

.owl-carousel .owl-item img,
.product-card .coupon-img .product-card-image {
    opacity: 1;
    transition: 1s ease;
}

.coupon-store-list .coupon-detail h3,
.coupon-index-carousel .coupon-detail h3 {
    line-height: 1.4;
    height: 30px;
    overflow: hidden;
    text-align: left;
    font-size: 1.2rem;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bold;
    /* width: 230px; */
    color: #000000;
}

.coupon-index-carousel .coupon-detail h3,
.coupon-index-carousel .coupon-detail h4 {
    width: 230px;
}

.coupon-store-list .coupon-detail h4,
.coupon-index-carousel .coupon-detail h4 {
    height: 50px;
    overflow: hidden;
    text-align: left;
    font-size: 0.9rem;
    padding-left: 5px;
    padding-right: 5px;
    /* width: 230px; */
}

.flex-list {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    flex-wrap: wrap;
}

.outer-tagDiv {
    height: 33px;
    display: flex;
    flex-direction: column;
}

.outer-mealDiv {
    display: flex;
    flex-direction: column;
}

.inner-mealDiv,
.inner-tagDiv {
    flex: 1;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
}

.inner-tagDiv div {
    margin: 3px 3px;
}

.coupon-store {
    margin-bottom: 50px;
}

.coupon-store .ellipsis {
    height: 45px;
}

.coupon-less span {
    margin-right: 10px;
}

.m-center {
    text-align: left;
    justify-content: left;
}

.coupon-store-list .m-center,
.coupon-store .m-center {
    justify-content: flex-end !important;
    text-align: end;
}

.coupon-category {
    background: #f5f5f5;
    border-radius: 50%;
    height: 4rem;
    width: 4rem;
    display: flex;
    /* 使用 Flexbox */
    justify-content: center;
    /* 水平置中 */
    align-items: center;
    /* 垂直置中 */
    color: #de0022;
    margin: 0 auto;
    /* 添加水平自動 margin */
}

.coupon-category:hover {
    background: #de0022;
    color: #fff;
    cursor: pointer;
}

.coupon-category .text-center {
    display: flex;
    flex-direction: column;
    /* 使內容垂直排列 */
    align-items: center;
    /* 垂直置中 */
}

.coupon-category-text {
    font-size: 0.85rem;
    padding-top: 5px;
}

@media screen and (max-width: 768px) {
    .couponSale .couponSaleTitle {
        display: block;
        border-radius: 0;
        padding: 8px 1.2rem 0;
        height: 40px;
        margin-bottom: 0.3rem;
    }

    .couponSale .couponSaleTitle .more {
        top: 0.7rem;
        position: absolute;
        right: 1rem;
    }

    .couponSale .couponSaleTitle h2 {
        font-size: 1.5rem;
    }

    .couponSale .couponSale-body {
        padding: 0.3rem 0 0;
        border: none;
        border-radius: 0;
        background-color: #fff;
    }

    .coupon-store .item {
        padding: 0;
    }

    .coupon-store .item .m-pd0 {
        padding: 10px 5px 10px 0px;
    }

    .flex-list {
        display: block !important;
    }

    .coupon-less span {
        display: block !important;
    }

    .flex-list li {
        margin-top: 10px;
        text-align: center;
        margin-right: 10px;
        margin-left: 10px;
    }

    .coupon-store-list .flex-list {
        max-height: 65px;
        overflow-y: auto;
    }

    .coupon-store-list .flex-list li {
        margin-bottom: 10px;
    }

    .m-center,
    .coupon-store-list .m-center,
    .coupon-store .m-center,
    .coupon-less span {
        text-align: center;
        justify-content: center;
    }

    .coupon-store .ellipsis {
        height: 60px;
    }

    .coupon-store .expired-day {
        text-align: center;
    }

    .coupon-store .product-card .product-price ul {
        margin-top: -20px;
    }
}


/* lecture */

.lecture .lectureTitle {
    height: 60px;
    border-radius: 12px 12px 0 0;
    padding: 20px 1.2rem 0;
}

.lecture .lectureSaleTitle.first {
    background-color: #ff641e;
}

.lecture .lectureTitle.second {
    background-color: #336699;
}

.lecture .lecture-body {
    padding: 2rem;
}

.lecture .lectureTitle h2 {
    font-size: 1.5rem;
}

.lecture .lectureTitle .more {
    top: 1.5rem;
    position: absolute;
    right: 1rem;
}

.lecture .lectureTitle .more a {
    color: #fff;
    font-size: 0.8rem;
    padding: 0.1rem 0.5rem;
}

.lecture .lecture-body {
    border: 1px solid #f5f5f5;
    /* background-color: #f5f5f5; */
    border-radius: 0 0 12px 12px;
    position: relative;
    padding: 2rem;
}

.lecture .product-card .lecture-detail {
    min-height: 148px;
    border-radius: 0 0 12px 12px;
}

.lecture .product-card .lecture-detail .location-tag {
    margin-left: 10px;
    margin-top: 10px;
}

.lecture .product-card .lecture-detail .ountdownLabel {
    color: #858585;
    text-align: left;
    padding-left: 10px;
}

.lecture .product-card .lecture-detail .coupon-btn-r {
    color: #564e47;
    padding: 10px;
    border-right: 1px solid #d7d7d7;
    border-top: 1px solid #d7d7d7;
}

.lecture .product-card .lecture-detail .coupon-btn-l {
    color: #564e47;
    padding: 10px;
    border-top: 1px solid #d7d7d7;
}

.product-price .original {
    padding-top: 0.5rem;
    padding-left: 0.5rem;
}

.product-price .current {
    font-size: 1.4rem;
    margin-left: 0.1rem;
}

.product-price .current span.rise {
    font-size: 0.85rem;
}

.product-card {
    padding: 0;
    border-radius: 12px;
}

.lecture .product-card .coupon-img {
    width: 230px;
}

.owl-carousel .owl-item img,
.product-card .coupon-img .product-card-image {
    opacity: 1;
    transition: 1s ease;
}


.lecture-index-carousel .lecture-detail h3 {
    line-height: 1.4;
    /* height: 50px; */
    overflow: hidden;
    text-align: left;
    font-size: 1.2rem;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bold;
    /* width: 230px; */
    color: #000000;
}

.lecture-index-carousel .lecture-detail h3,
.lecture-index-carousel .lecture-detail h4 {
    width: 230px;
}


.lecture-index-carousel .lecture-detail h4 {
    height: 50px;
    overflow: hidden;
    text-align: left;
    font-size: 0.9rem;
    padding-left: 5px;
    padding-right: 5px;
    /* width: 230px; */
}

.flex-list {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    flex-wrap: wrap;
}

.outer-tagDiv {
    height: 33px;
    display: flex;
    flex-direction: column;
}

.outer-mealDiv {
    display: flex;
    flex-direction: column;
}

.inner-mealDiv,
.inner-tagDiv {
    flex: 1;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
}

.inner-tagDiv div {
    margin: 3px 3px;
}

.coupon-store {
    margin-bottom: 50px;
}

.coupon-store .ellipsis {
    height: 45px;
}

.coupon-less span {
    margin-right: 10px;
}

.m-center {
    text-align: left;
    justify-content: left;
}

.coupon-store-list .m-center,
.coupon-store .m-center {
    justify-content: flex-end !important;
    text-align: end;
}

.bl {
    border-left: 4px solid #ff5733;
    /* 這裡可以設定你想要的邊框顏色和寬度 */
    padding-left: 10px;
    /* 可以加一點內邊距，使文字不會緊貼邊框 */
}

.countdown-label-link {
    text-decoration: none;
    color: inherit;
}

.countdown-label-link:hover,
.countdown-label-link:active {
    color: #ff5733;
}

.countdown-label-link:hover .countdownLabel,
.countdown-label-link:active .countdownLabel {
    color: #ff5733;
}

.countdownLabel {
    cursor: pointer;
    transition: color 0.3s ease;
    margin-left: 10px;
}

.class-link {
    text-decoration: none;
    color: black;
    transition: color 0.3s ease, box-shadow 0.3s ease;
    /* 添加過渡效果 */
}

.class-link:hover,
.class-link:active {
    color: black;
    /* 點擊後文字顏色變成黑色 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
    /* 更強烈的半透明陰影效果 */
}

.class-link:hover .countdownLabel,
.class-link:active .countdownLabel {
    color: black;
    /* 點擊或懸停後，.countdownLabel 文字顏色變為黑色 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
    /* 更強烈的半透明陰影 */
}

.expected {
    filter: saturate(80%) grayscale(5%) brightness(80%);
}

.teacher-image {
    width: 200px;
    /* 圓形框的寬度 */
    height: 200px;
    /* 圓形框的高度 */
    object-fit: cover;
    /* 保持圖片比例，裁剪填滿圓形框 */
}

.lecture-category {
    background: #f5f5f5;
    border-radius: 50%;
    height: 4rem;
    width: 4rem;
    display: flex;
    /* 使用 Flexbox */
    justify-content: center;
    /* 水平置中 */
    align-items: center;
    /* 垂直置中 */
    color: #58aa3d;
    margin: 0 auto;
    /* 添加水平自動 margin */
}

.lecture-category:hover {
    background: #58aa3d;
    color: #fff;
    cursor: pointer;
}

.lecture-category .text-center {
    display: flex;
    flex-direction: column;
    /* 使內容垂直排列 */
    align-items: center;
    /* 垂直置中 */
}

.lecture-category-text {
    font-size: 0.85rem;
    padding-top: 5px;
}

.btn-search-lecture {
    height: 100%;
    width: 100%;
    white-space: nowrap;
    color: #fff;
    border: 0;
    cursor: pointer;
    background: #1a760f;
    transition: all 0.2s ease-out, color 0.2s ease-out;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.bl-l {
    border-left: 4px solid #58aa3d;
    /* 這裡可以設定你想要的邊框顏色和寬度 */
    padding-left: 10px;
    /* 可以加一點內邊距，使文字不會緊貼邊框 */
}

.btn-search-activity {
    height: 100%;
    width: 100%;
    white-space: nowrap;
    color: #fff;
    border: 0;
    cursor: pointer;
    background: #dc3545;
    transition: all 0.2s ease-out, color 0.2s ease-out;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}


/* .bl-a {
    border-left: 4px solid #ab1839;
    padding-left: 10px;
} */

.lecture-label-link {
    text-decoration: none;
    color: black;
}

.lecture-label-link:hover,
.lecture-label-link:active {
    color: #2d4656;
}

.lecture-info-label {
    color: #2d4656;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}


/* lecture已收藏 */

.haert-icon {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background-color: #ff5e00;
    /* 圓形的藍色背景 */
    color: white;
    /* 圖示顏色為白色 */
    border-radius: 50%;
    /* 圓形邊框 */
    padding: 10px;
    /* 圓形的大小，可以根據需要調整 */
    font-size: 20px;
    /* 圖示的大小 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    /* 陰影效果 */
}


/* lecture收藏前跟後 */


/* 初始愛心樣式 */

.heart-icon {
    font-size: 30px;
    /* 增大愛心圖示 */
    color: #dbd4cf;
    /* 初始為白色 */
    transition: color 0.3s ease;
    /* 顏色過渡效果 */
}


/* 點擊後愛心變橘色 */

.heart-icon.liked {
    color: #ff1c1c;
    /* 橘色 */
}


/* lecture已收藏 */

.haert-icon2 {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background-color: #fd0248;
    color: white;
    border-radius: 50%;
    padding: 10px;
    font-size: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}


/* lecture的交換圖示 */

.change-icon {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background-color: #167f37;
    /* 圓形的藍色背景 */
    color: white;
    /* 圖示顏色為白色 */
    border-radius: 50%;
    /* 圓形邊框 */
    padding: 10px;
    /* 圓形的大小，可以根據需要調整 */
    font-size: 20px;
    /* 圖示的大小 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    /* 陰影效果 */
}


/* 自定義邊框顏色和樣式 */

.border-custom {
    display: flex;
    /* 彈性布局 */
    flex-direction: row;
    /* 預設橫向排列 */
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    /* 避免內容溢出 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    max-width: 800px;
    /* 最大寬度限制 */
    width: 90%;
    /* 填滿父容器 */
}

@media screen and (max-width: 768px) {
    .lecture .lectureTitle {
        display: block;
        border-radius: 0;
        padding: 8px 1.2rem 0;
        height: 40px;
        margin-bottom: 0.3rem;
    }

    .lecture .lectureTitle .more {
        top: 0.7rem;
        position: absolute;
        right: 1rem;
    }

    .lecture .lectureTitle h2 {
        font-size: 1.5rem;
    }

    .lecture .lecture-body {
        padding: 0.3rem 0 0;
        border: none;
        border-radius: 0;
        background-color: #fff;
    }

    .coupon-store .item {
        padding: 0;
    }

    .coupon-store .item .m-pd0 {
        padding: 10px 5px 10px 0px;
    }

    .flex-list {
        display: block !important;
    }

    .coupon-less span {
        display: block !important;
    }

    .flex-list li {
        margin-top: 10px;
        text-align: center;
        margin-right: 10px;
        margin-left: 10px;
    }

    .coupon-store-list .flex-list {
        max-height: 65px;
        overflow-y: auto;
    }

    .coupon-store-list .flex-list li {
        margin-bottom: 10px;
    }

    .m-center,
    .coupon-store-list .m-center,
    .coupon-store .m-center,
    .coupon-less span {
        text-align: center;
        justify-content: center;
    }

    /* .coupon-store .ellipsis {
        height: 60px;
    } */
    .coupon-store .expired-day {
        text-align: center;
    }

    .coupon-store .product-card .product-price ul {
        margin-top: -20px;
    }
}


/*coupon 右側*/

.float-stickyBar .fs-item {
    background: linear-gradient(to top, #7a175e, #de0022);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 180px;
    position: fixed;
    z-index: 1021;
    right: -135px;
    font: normal normal 10px Arial;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border-radius: 13px;
}

.fixed-stickyBar .fs-item {
    text-align: center;
    width: 50px;
    padding: 4px;
    position: fixed;
    z-index: 1021;
    right: 0;
    font: normal normal 10px Arial;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}

.fixed-stickyBar .float-btn1 {
    background: linear-gradient(to top, #1eb512, #1eb512);
    top: 200px;
    /* 第一個按鈕 */
}

.fixed-stickyBar .float-btn2 {
    background: linear-gradient(to top, #ff734c, #ff734c);
    top: 270px;
    /* 第二個按鈕 */
}

.fixed-stickyBar .float-btn3 {
    background: #dc3545;
    top: 340px;
    /* 第三個按鈕 */
}

.fixed-stickyBar .float-qrcode {
    background: linear-gradient(45deg, #7a175e, #de0022, #ffa94c);
    top: 350px;
}

.fixed-stickyBar .float-number {
    background: linear-gradient(45deg, #7a175e, #de0022, #ffa94c);
    top: 430px;
}

.fixed-stickyBar .float-wheel {
    background: linear-gradient(to top, #cd1939, #ff1e52);
    top: 270px;
}

.fixed-stickyBar .fs-item div {
    font-size: 0.9rem;
    line-height: 25px !important;
    color: #fff !important;
}

.fixed-stickyBar svg,
.float-stickyBar .fa {
    font-size: 1rem;
    color: #fff;
    padding: 8px 0;
    width: 20px;
    margin-left: 5px;
    float: left;
}

.float-stickyBar .fs-item div {
    font-size: 0.9rem;
    float: left;
    line-height: 35px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar .fs-item p {
    font-size: 1rem;
    float: left;
    line-height: 34px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar .fs-item:hover {
    right: 10px;
}

.float-stickyBar .fs-item a {
    font-size: 0.9rem;
    color: #fab187 !important;
    text-decoration: none;
    text-align: center;
    line-height: 35px !important;
    vertical-align: top !important;
}

.fs-item i {
    font-size: 1rem;
    /* 小螢幕下縮小圖示 */
}

.float-stickyBar .float-cash {
    top: 465px;
}

.float-stickyBar .float-wallet {
    top: 500px;
}

.float-stickyBar .float-coupon {
    top: 535px;
}

.float-stickyBar .float-other1 {
    top: 570px;
}


/*lecture 右側*/


/* 新的浮動固定欄樣式 */

.float-stickyBar-l .fs-item {
    background: linear-gradient(to top, #2d4656, #58aa3d);
    /* 新顏色 */
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 180px;
    position: fixed;
    z-index: 1021;
    right: -135px;
    font: normal normal 10px Arial;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border-radius: 13px;
}

.float-stickyBar-l .fs-item div {
    font-size: 0.9rem;
    line-height: 25px !important;
    color: #fff !important;
}

.float-stickyBar-l svg,
.float-stickyBar-l .fa {
    font-size: 1rem;
    color: #fff;
    padding: 8px 0;
    width: 20px;
    margin-left: 5px;
    float: left;
}

.float-stickyBar-l .fs-item div {
    font-size: 0.9rem;
    float: left;
    line-height: 35px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-l .fs-item p {
    font-size: 1rem;
    float: left;
    line-height: 34px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-l .fs-item:hover {
    right: 10px;
}

.float-stickyBar-l .fs-item a {
    font-size: 0.9rem;
    color: white !important;
    text-decoration: none;
    text-align: center;
    line-height: 35px !important;
    vertical-align: top !important;
}

.fs-item i {
    font-size: 1rem;
    /* 小螢幕下縮小圖示 */
}


/* 按鈕樣式 */

.float-stickyBar-l .float-btn1 {
    background: linear-gradient(to top, #32cd32, #32cd32);
    /* 新顏色 */
    top: 200px;
    /* 第一個按鈕 */
}

.float-stickyBar-l .float-btn2 {
    background: linear-gradient(to top, #ff6347, #ff6347);
    /* 新顏色 */
    top: 270px;
    /* 第二個按鈕 */
}

.float-stickyBar-l .float-btn3 {
    background: linear-gradient(to top, #1e90ff, #1e90ff);
    /* 新顏色 */
    top: 340px;
    /* 第三個按鈕 */
}

.float-stickyBar-l .float-qrcode {
    background: linear-gradient(45deg, #ff6347, #ff4500, #ffa94c);
    /* 新顏色 */
    top: 200px;
}

.float-stickyBar-l .float-wheel {
    background: linear-gradient(to top, #ff1493, #ff69b4);
    /* 新顏色 */
    top: 270px;
}


/* 針對新版本的元素位置 */

.float-stickyBar-l .float-cash {
    top: 465px;
}

.float-stickyBar-l .float-wallet {
    top: 500px;
}

.float-stickyBar-l .float-coupon {
    top: 535px;
}

.float-stickyBar-l .float-other1 {
    top: 570px;
}

.fixed-stickyBar-l .fs-item {
    text-align: center;
    width: 50px;
    padding: 4px;
    position: fixed;
    z-index: 1021;
    right: 0;
    font: normal normal 10px Arial;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}

.fixed-stickyBar-l .float-btn1 {
    background: linear-gradient(to top, #1eb512, #1eb512);
    top: 200px;
    /* 第一個按鈕 */
}

.fixed-stickyBar-l .float-btn2 {
    background: linear-gradient(to top, #ff734c, #ff734c);
    top: 270px;
    /* 第二個按鈕 */
}

.fixed-stickyBar-l .float-btn3 {
    background: linear-gradient(to top, #1c9be8, #1c9be8);
    top: 340px;
    /* 第三個按鈕 */
}

.fixed-stickyBar-l .float-qrcode {
    background: linear-gradient(45deg, #188393, #61b26a, #2d4656);
    top: 200px;
}

.fixed-stickyBar-l .float-wheel {
    background: linear-gradient(to top, #cd1939, #ff1e52);
    top: 270px;
}

.fixed-stickyBar-l .fs-item div {
    font-size: 0.9rem;
    line-height: 25px !important;
    color: #fff !important;
}

.fixed-stickyBar-l svg,
.float-stickyBar-l .fa {
    font-size: 1rem;
    color: #fff;
    padding: 8px 0;
    width: 20px;
    margin-left: 5px;
    float: left;
}

@media (max-width: 768px) {
    .fixed-stickyBar .fs-item {
        /* width: 60px;  */
        position: fixed;
        /* 確保按鈕固定 */
        /* bottom: 20px;  */
        right: 0;
        /* 固定在右邊 */
    }

    .fixed-stickyBar .float-btn1,
    .fixed-stickyBar .float-btn2,
    .fixed-stickyBar .float-btn3 {
        margin-bottom: 10px;
        /* 按鈕間隔 */
        position: fixed;
        /* 確保這些按鈕也固定 */
        right: 0;
    }

    /* 調整每個按鈕的位置，避免重疊 */
    .fixed-stickyBar .float-btn1 {
        top: auto;
        bottom: 420px;
        /* 第一个按鈕的底部距離 */
    }

    .fixed-stickyBar .float-btn2 {
        top: auto;
        bottom: 372px;
        /* 第二個按鈕的底部距離 */
    }

    .fixed-stickyBar .float-btn3 {
        top: auto;
        bottom: 324px;
        /* 第三個按鈕的底部距離 */
    }
}


/*獎金試算 右側*/
.float-stickyBar-bonus .fs-item {
    background: linear-gradient(to top, #2E0041, #cb77ed);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 160px;
    position: fixed;
    z-index: 1021;
    right: -115px;
    font: normal normal 10px Arial;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border-radius: 13px;
}

.float-stickyBar-bonus .fa {
    font-size: 1rem;
    color: #fff;
    padding: 8px 0;
    width: 20px;
    margin-left: 5px;
    float: left;
}

.float-stickyBar-bonus .fs-item div {
    font-size: 0.9rem;
    float: left;
    line-height: 35px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-bonus .fs-item p {
    font-size: 1rem;
    float: left;
    line-height: 34px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-bonus .fs-item:hover {
    right: 10px;
}

.float-stickyBar-bonus .fs-item a {
    font-size: 0.9rem;
    color: #f0efee !important;
    text-decoration: none;
    text-align: center;
    line-height: 35px !important;
    vertical-align: top !important;
}

.fs-item i {
    font-size: 1rem;
    /* 小螢幕下縮小圖示 */
}

.float-stickyBar-bonus .float-item1 {
    top: 315px;
}

.float-stickyBar-bonus .float-item2 {
    top: 350px;
}

.float-stickyBar-bonus .float-item3 {
    top: 385px;
}

.float-stickyBar-bonus .float-item4 {
    top: 420px;
}

.float-stickyBar-bonus .float-item5 {
    top: 455px;
}

.float-stickyBar-bonus .float-item6 {
    top: 490px;
}

/*團隊組織總攬 右側*/
.float-stickyBar-member .fs-item {
    background: linear-gradient(to top, #2E0041, #cb77ed);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 160px;
    position: fixed;
    z-index: 1021;
    right: -115px;
    font: normal normal 10px Arial;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border-radius: 13px;
}

.float-stickyBar-member .fa {
    font-size: 1rem;
    color: #fff;
    padding: 8px 0;
    width: 20px;
    margin-left: 5px;
    float: left;
}

.float-stickyBar-member .fs-item div {
    font-size: 0.9rem;
    float: left;
    line-height: 35px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-member .fs-item p {
    font-size: 1rem;
    float: left;
    line-height: 34px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-member .fs-item:hover {
    right: 10px;
}

.float-stickyBar-member .fs-item a {
    font-size: 0.9rem;
    color: #f0efee !important;
    text-decoration: none;
    text-align: center;
    line-height: 35px !important;
    vertical-align: top !important;
}

.fs-item i {
    font-size: 1rem;
    /* 小螢幕下縮小圖示 */
}

.float-stickyBar-member .float-item1 {
    top: 315px;
}

.float-stickyBar-member .float-item2 {
    top: 350px;
}

.float-stickyBar-member .float-item3 {
    top: 385px;
}

.float-stickyBar-member .float-item4 {
    top: 420px;
}

.float-stickyBar-member .float-item5 {
    top: 455px;
}

.float-stickyBar-member .float-item6 {
    top: 490px;
}


/*我的商務 右側(專業介紹、好友、名片、卡友)*/

.float-stickyBar-b .fs-item {
    background: linear-gradient(to top, #1e2f67, #0590d5);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 180px;
    position: fixed;
    z-index: 1021;
    right: -135px;
    font: normal normal 10px Arial;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border-radius: 13px;
}

.fixed-stickyBar-b .fs-item {
    text-align: center;
    width: 50px;
    padding: 4px;
    position: fixed;
    z-index: 1021;
    right: 0;
    font: normal normal 10px Arial;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}

.fixed-stickyBar-b .float-btn1 {
    background: linear-gradient(to top, #1eb512, #1eb512);
    top: 200px;
    /* 第一個按鈕 */
}

.fixed-stickyBar-b .float-btn2 {
    background: linear-gradient(to top, #ff734c, #ff734c);
    top: 270px;
    /* 第二個按鈕 */
}

.fixed-stickyBar-b .float-btn3 {
    background: linear-gradient(to top, #1c9be8, #1c9be8);
    top: 340px;
    /* 第三個按鈕 */
}

.fixed-stickyBar-b .float-qrcode {
    background: linear-gradient(45deg, #7a175e, #de0022, #ffa94c);
    top: 200px;
}

.fixed-stickyBar-b .float-wheel {
    background: linear-gradient(to top, #cd1939, #ff1e52);
    top: 270px;
}

.fixed-stickyBar-b .fs-item div {
    font-size: 0.9rem;
    line-height: 25px !important;
    color: #fff !important;
}

.fixed-stickyBar-b svg,
.float-stickyBar-b .fa {
    font-size: 1rem;
    color: #fff;
    padding: 8px 0;
    width: 20px;
    margin-left: 5px;
    float: left;
}

.float-stickyBar-b .fs-item div {
    font-size: 0.9rem;
    float: left;
    line-height: 35px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-b .fs-item p {
    font-size: 1rem;
    float: left;
    line-height: 34px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-b .fs-item:hover {
    right: 10px;
}

.float-stickyBar-b .fs-item a {
    font-size: 0.9rem;
    color: #fab187 !important;
    text-decoration: none;
    text-align: center;
    line-height: 35px !important;
    vertical-align: top !important;
}

.fs-item i {
    font-size: 1rem;
    /* 小螢幕下縮小圖示 */
}

.float-stickyBar-b .float-cash {
    top: 465px;
}

.float-stickyBar-b .float-wallet {
    top: 500px;
}

.float-stickyBar-b .float-coupon {
    top: 535px;
}

.float-stickyBar-b .float-other1 {
    top: 570px;
}


/*金鑰右側(my-voucher.html、voucher-sale-list.html)*/

.float-stickyBar-k .fs-item {
    background: linear-gradient(to top, #aa742c, #f1d488);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 180px;
    position: fixed;
    z-index: 1021;
    right: -135px;
    font: normal normal 10px Arial;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border-radius: 13px;
}

.fixed-stickyBar-k .fs-item {
    text-align: center;
    width: 50px;
    padding: 4px;
    position: fixed;
    z-index: 1021;
    right: 0;
    font: normal normal 10px Arial;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}

.fixed-stickyBar-k .float-btn1 {
    background: linear-gradient(to top, #1eb512, #1eb512);
    top: 200px;
    /* 第一個按鈕 */
}

.fixed-stickyBar-k .float-btn2 {
    background: linear-gradient(to top, #ff734c, #ff734c);
    top: 270px;
    /* 第二個按鈕 */
}

.fixed-stickyBar-k .float-btn3 {
    background: linear-gradient(to top, #1c9be8, #1c9be8);
    top: 340px;
    /* 第三個按鈕 */
}

.fixed-stickyBar-k .float-qrcode {
    background: linear-gradient(45deg, #7a175e, #de0022, #ffa94c);
    top: 200px;
}

.fixed-stickyBar-k .float-wheel {
    background: linear-gradient(to top, #cd1939, #ff1e52);
    top: 270px;
}

.fixed-stickyBar-k .fs-item div {
    font-size: 0.9rem;
    line-height: 25px !important;
    color: #fff !important;
}

.fixed-stickyBar-k svg,
.float-stickyBar-k .fa {
    font-size: 1rem;
    color: #fff;
    padding: 8px 0;
    width: 20px;
    margin-left: 5px;
    float: left;
}

.float-stickyBar-k .fs-item div {
    font-size: 0.9rem;
    float: left;
    line-height: 35px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-k .fs-item p {
    font-size: 1rem;
    float: left;
    line-height: 34px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-k .fs-item:hover {
    right: 10px;
}

.float-stickyBar-k .fs-item a {
    font-size: 0.9rem;
    color: #fff !important;
    text-decoration: none;
    text-align: center;
    line-height: 35px !important;
    vertical-align: top !important;
}

.fs-item i {
    font-size: 1rem;
    /* 小螢幕下縮小圖示 */
}

.float-stickyBar-k .float-cash {
    top: 465px;
}

.float-stickyBar-k .float-wallet {
    top: 500px;
}

.float-stickyBar-k .float-coupon {
    top: 535px;
}

.float-stickyBar-k .float-other1 {
    top: 570px;
}


/* 專業介紹 右側(template-edit1、template1、template-search) */

.float-stickyBar-t .fs-item {
    background: linear-gradient(to top, #cfcfcf, #ffffff);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 180px;
    position: fixed;
    z-index: 1021;
    right: -135px;
    font: normal normal 10px Arial;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border-radius: 13px;
}

.fixed-stickyBar-t .fs-item {
    text-align: center;
    width: 50px;
    padding: 4px;
    position: fixed;
    z-index: 1021;
    right: 0;
    font: normal normal 10px Arial;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}

.fixed-stickyBar-t .float-btn1 {
    background: linear-gradient(to top, #1eb512, #1eb512);
    top: 200px;
    /* 第一個按鈕 */
}

.fixed-stickyBar-t .float-btn2 {
    background: linear-gradient(to top, #ff734c, #ff734c);
    top: 270px;
    /* 第二個按鈕 */
}

.fixed-stickyBar-t .float-btn3 {
    background: linear-gradient(to top, #1c9be8, #1c9be8);
    top: 340px;
    /* 第三個按鈕 */
}

.fixed-stickyBar-t .float-qrcode {
    background: linear-gradient(45deg, #7a175e, #de0022, #ffa94c);
    top: 200px;
}

.fixed-stickyBar-t .float-wheel {
    background: linear-gradient(to top, #cd1939, #ff1e52);
    top: 270px;
}

.fixed-stickyBar-t .fs-item div {
    font-size: 0.9rem;
    line-height: 25px !important;
    color: #fff !important;
}

.fixed-stickyBar-t svg,
.float-stickyBar-t .fa {
    font-size: 1rem;
    color: #fff;
    padding: 8px 0;
    width: 20px;
    margin-left: 5px;
    float: left;
}

.float-stickyBar-t .fs-item div {
    font-size: 0.9rem;
    float: left;
    line-height: 35px !important;
    color: #ab1839 !important;
    margin-left: 5px;
}

.float-stickyBar-t .fs-item p {
    font-size: 1rem;
    float: left;
    line-height: 34px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-t .fs-item:hover {
    right: 10px;
}

.float-stickyBar-t .fs-item a {
    font-size: 0.9rem;
    color: #555 !important;
    text-decoration: none;
    text-align: center;
    line-height: 35px !important;
    vertical-align: top !important;
}

.fs-item i {
    font-size: 1rem;
    /* 小螢幕下縮小圖示 */
}

.float-stickyBar-t .float-cash {
    top: 465px;
}

.float-stickyBar-t .float-wallet {
    top: 500px;
}

.float-stickyBar-t .float-coupon {
    top: 535px;
}

.float-stickyBar-t .float-other1 {
    top: 570px;
}


/*我的福利 右側(member-card.html)*/

.float-stickyBar-w .fs-item {
    background: linear-gradient(to top, #cfcfcf, #ffffff);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 180px;
    position: fixed;
    z-index: 1021;
    right: -135px;
    font: normal normal 10px Arial;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border-radius: 13px;
}

.fixed-stickyBar-w .fs-item {
    text-align: center;
    width: 50px;
    padding: 4px;
    position: fixed;
    z-index: 1021;
    right: 0;
    font: normal normal 10px Arial;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}

.fixed-stickyBar-w .float-btn1 {
    background: linear-gradient(to top, #1eb512, #1eb512);
    top: 200px;
    /* 第一個按鈕 */
}

.fixed-stickyBar-w .float-btn2 {
    background: linear-gradient(to top, #ff734c, #ff734c);
    top: 270px;
    /* 第二個按鈕 */
}

.fixed-stickyBar-w .float-btn3 {
    background: linear-gradient(to top, #1c9be8, #1c9be8);
    top: 340px;
    /* 第三個按鈕 */
}

.fixed-stickyBar-w .float-qrcode {
    background: linear-gradient(45deg, #7a175e, #de0022, #ffa94c);
    top: 200px;
}

.fixed-stickyBar-w .float-wheel {
    background: linear-gradient(to top, #cd1939, #ff1e52);
    top: 270px;
}

.fixed-stickyBar-w .fs-item div {
    font-size: 0.9rem;
    line-height: 25px !important;
    color: #fff !important;
}

.fixed-stickyBar-w svg,
.float-stickyBar-w .fa {
    font-size: 1rem;
    color: #fff;
    padding: 8px 0;
    width: 20px;
    margin-left: 5px;
    float: left;
}

.float-stickyBar-w .fs-item div {
    font-size: 0.9rem;
    float: left;
    line-height: 35px !important;
    color: #555 !important;
    margin-left: 5px;
}

.float-stickyBar-w .fs-item p {
    font-size: 1rem;
    float: left;
    line-height: 34px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-w .fs-item:hover {
    right: 10px;
}

.float-stickyBar-w .fs-item a {
    font-size: 0.9rem;
    color: #fab187 !important;
    text-decoration: none;
    text-align: center;
    line-height: 35px !important;
    vertical-align: top !important;
}

.fs-item i {
    font-size: 1rem;
    /* 小螢幕下縮小圖示 */
}

.float-stickyBar-w .float-cash {
    top: 465px;
}

.float-stickyBar-w .float-wallet {
    top: 500px;
}

.float-stickyBar-w .float-coupon {
    top: 535px;
}

.float-stickyBar-w .float-other1 {
    top: 570px;
}


/* action-plan.html、action-card.html 右側 */
.float-stickyBar-a .fs-item {
    background: linear-gradient(to top, #2E0041, #cb77ed);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 160px;
    position: fixed;
    z-index: 1021;
    right: -115px;
    font: normal normal 10px Arial;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border-radius: 13px;
}

.float-stickyBar-a .fa {
    font-size: 1rem;
    color: #fff;
    padding: 8px 0;
    width: 20px;
    margin-left: 5px;
    float: left;
}

.float-stickyBar-a .fs-item div {
    font-size: 0.9rem;
    float: left;
    line-height: 35px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-a .fs-item p {
    font-size: 1rem;
    float: left;
    line-height: 34px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-a .fs-item:hover {
    right: 10px;
}

.float-stickyBar-a .fs-item a {
    font-size: 0.9rem;
    color: #f0efee !important;
    text-decoration: none;
    text-align: center;
    line-height: 35px !important;
    vertical-align: top !important;
}

.fs-item i {
    font-size: 1rem;
    /* 小螢幕下縮小圖示 */
}

.float-stickyBar-a .float-item1 {
    top: 315px;
}

.float-stickyBar-a .float-item2 {
    top: 350px;
}

.float-stickyBar-a .float-item3 {
    top: 385px;
}

.float-stickyBar-a .float-item4 {
    top: 420px;
}

.float-stickyBar-a .float-item5 {
    top: 455px;
}

.float-stickyBar-a .float-item6 {
    top: 490px;
}

/*編輯名片 右側(add-card-info.html)*/

.float-stickyBar-card .fs-item {
    background: linear-gradient(to top, #1e2f67, #0590d5);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 90px;
    position: fixed;
    z-index: 1021;
    right: -45px;
    font: normal normal 10px Arial;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border-radius: 13px;
}


.float-stickyBar-card .fa {
    font-size: 1rem;
    color: #fff;
    padding: 8px 0;
    width: 20px;
    margin-left: 5px;
    float: left;
}

.float-stickyBar-card .fs-item div {
    font-size: 0.9rem;
    float: left;
    line-height: 35px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-card .fs-item p {
    font-size: 1rem;
    float: left;
    line-height: 34px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-card .fs-item:hover {
    right: 10px;
}

.float-stickyBar-card .fs-item a {
    font-size: 0.9rem;
    color: #fab187 !important;
    text-decoration: none;
    text-align: center;
    line-height: 35px !important;
    vertical-align: top !important;
}

.fs-item i {
    font-size: 1rem;
    /* 小螢幕下縮小圖示 */
}

.float-stickyBar-card .float-cash {
    top: 465px;
}

.float-stickyBar-card .float-wallet {
    top: 500px;
}

.float-stickyBar-card .float-coupon {
    top: 535px;
}

.float-stickyBar-card .float-other1 {
    top: 570px;
}


/*group 右側*/

.float-stickyBar-g .fs-item {
    background: linear-gradient(to top, #dddddd, #ffffff);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 180px;
    position: fixed;
    z-index: 1021;
    right: -135px;
    font: normal normal 10px Arial;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border-radius: 13px;
}


.fixed-stickyBar-g .fs-item {
    text-align: center;
    width: 50px;
    padding: 4px;
    position: fixed;
    z-index: 1021;
    right: 0;
    font: normal normal 10px Arial;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}


.fixed-stickyBar-g .float-qrcode {
    background: linear-gradient(45deg, #e6a300, #ffd24d);
    top: 550px;
}

.fixed-stickyBar-g .float-number {
    background: linear-gradient(45deg, #e6a300, #ffd24d);
    top: 630px;
}

.fixed-stickyBar-g .fs-item div {
    font-size: 0.9rem;
    line-height: 25px !important;
    color: #fff !important;
}


.float-stickyBar-g .fs-item div {
    font-size: 0.9rem;
    float: left;
    line-height: 35px !important;
    color: #ffa100 !important;
    margin-left: 5px;
}

.float-stickyBar-g .fs-item p {
    font-size: 1rem;
    float: left;
    line-height: 34px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-g .fs-item:hover {
    right: 10px;
}

.float-stickyBar-g .fs-item a {
    font-size: 0.9rem;
    color: #000 !important;
    text-decoration: none;
    text-align: center;
    line-height: 35px !important;
    vertical-align: top !important;
}

.fs-item i {
    font-size: 1rem;
    /* 小螢幕下縮小圖示 */
}

.float-stickyBar-g .float-cash {
    top: 465px;
}

.float-stickyBar-g .float-wallet {
    top: 500px;
}

.float-stickyBar-g .float-coupon {
    top: 535px;
}

.float-stickyBar-g .float-other1 {
    top: 570px;
}

/* talent-search.html 右側 */
.float-stickyBar-ts .fs-item {
    background: linear-gradient(to top, #cfcfcf, #ffffff);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 180px;
    position: fixed;
    z-index: 1021;
    right: -135px;
    font: normal normal 10px Arial;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border-radius: 13px;
}

.fixed-stickyBar-ts .fs-item {
    text-align: center;
    width: 50px;
    padding: 4px;
    position: fixed;
    z-index: 1021;
    right: 0;
    font: normal normal 10px Arial;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}

.fixed-stickyBar-ts .float-btn1 {
    background: linear-gradient(to top, #1eb512, #1eb512);
    top: 200px;
    /* 第一個按鈕 */
}

.fixed-stickyBar-ts .float-btn2 {
    background: linear-gradient(to top, #ff734c, #ff734c);
    top: 270px;
    /* 第二個按鈕 */
}

.fixed-stickyBar-ts .float-btn3 {
    background: linear-gradient(to top, #1c9be8, #1c9be8);
    top: 340px;
    /* 第三個按鈕 */
}

.fixed-stickyBar-ts .float-qrcode {
    background: linear-gradient(45deg, #7a175e, #de0022, #ffa94c);
    top: 200px;
}

.fixed-stickyBar-ts .float-wheel {
    background: linear-gradient(to top, #cd1939, #ff1e52);
    top: 270px;
}

.fixed-stickyBar-ts .fs-item div {
    font-size: 0.9rem;
    line-height: 25px !important;
    color: #fff !important;
}

.fixed-stickyBar-ts svg,
.float-stickyBar-ts .fa {
    font-size: 1rem;
    color: #fff;
    padding: 8px 0;
    width: 20px;
    margin-left: 5px;
    float: left;
}

.float-stickyBar-ts .fs-item div {
    font-size: 0.9rem;
    float: left;
    line-height: 35px !important;
    color: #ab1839 !important;
    margin-left: 5px;
}

.float-stickyBar-ts .fs-item p {
    font-size: 1rem;
    float: left;
    line-height: 34px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-ts .fs-item:hover {
    right: 10px;
}

.float-stickyBar-ts .fs-item a {
    font-size: 0.9rem;
    color: #555 !important;
    text-decoration: none;
    text-align: center;
    line-height: 35px !important;
    vertical-align: top !important;
}

.fs-item i {
    font-size: 1rem;
    /* 小螢幕下縮小圖示 */
}

.float-stickyBar-ts .float-cash {
    top: 465px;
}

.float-stickyBar-ts .float-wallet {
    top: 500px;
}

.float-stickyBar-ts .float-coupon {
    top: 535px;
}

.float-stickyBar-ts .float-other1 {
    top: 570px;
}

/*index 右側*/
.float-stickyBar-i .fs-item {
    background: linear-gradient(to top, #2E0041, #cb77ed);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 4px;
    width: 180px;
    position: fixed;
    z-index: 1021;
    right: -135px;
    font: normal normal 10px Arial;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border-radius: 13px;
    z-index: 99999 !important;
}

.float-stickyBar-i .fa {
    font-size: 1rem;
    color: #fff;
    padding: 8px 0;
    width: 20px;
    margin-left: 5px;
    float: left;
}

.float-stickyBar-i .fs-item div {
    font-size: 0.9rem;
    float: left;
    line-height: 35px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-i .fs-item p {
    font-size: 1rem;
    float: left;
    line-height: 34px !important;
    color: #fff !important;
    margin-left: 5px;
}

.float-stickyBar-i .fs-item:hover {
    right: 10px;
}

.float-stickyBar-i .fs-item a {
    font-size: 0.9rem;
    color: #f0efee !important;
    text-decoration: none;
    text-align: center;
    line-height: 35px !important;
    vertical-align: top !important;
}

.fs-item i {
    font-size: 1rem;
    /* 小螢幕下縮小圖示 */
}

.float-stickyBar-i .float-item1 {
    top: 315px;
}

.float-stickyBar-i .float-item2 {
    top: 350px;
}

.float-stickyBar-i .float-item3 {
    top: 385px;
}

.float-stickyBar-i .float-item4 {
    top: 420px;
}

.float-stickyBar-i .float-item5 {
    top: 455px;
}

.float-stickyBar-i .float-item6 {
    top: 490px;
}

/*酷碰券資訊*/

.coupon-Box .coupon-menu {
    margin-top: 1rem;
}

.coupon-Box .contentBox {
    min-height: 300px;
}

.coupon-Box .content-detail h4 svg {
    background-color: #b51d29;
    color: #3b3a3a;
    padding: 5px;
    border-radius: 12px;
    width: 15px;
    height: 15px;
}

.coupon-Box .coupon-menu .nav-tabs {
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    margin: 0 0 1rem;
    padding: 0;
    background-color: #fff;
}

.coupon-menu .nav-tabs a.nav-link {
    font-size: 1.1rem;
    color: #444;
    border: none;
    line-height: 2;
}

.coupon-menu .nav-tabs .nav-item a.nav-link.active {
    border-bottom: 4px solid #de0022;
    color: #de0022;
}

.coupon-Box .content-detail h4 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.coupon-Box .content-detail h4 i {
    margin: -0.1rem 0 0;
}

.coupon-Box .content-detail {
    padding: 1rem 0.5rem;
    border-top: 1px solid #dee2e6;
}

.coupon-Box .content-detail,
.coupon-Box .content-detail p,
.coupon-Box .content-detail p a {
    word-break: break-all;
}

.coupon-Box .content-detail p a {
    color: #5069fa;
}

.coupon-Box .content-detail img {
    width: 100% !important;
    height: 100% !important;
}

@media screen and (max-width: 768px) {
    .coupon-menu .nav-tabs a.nav-link {
        padding: 0.5rem 0;
        font-size: 1rem;
    }
}


/*課程資訊*/

.lecture-Box .lecture-menu {
    margin-top: 1rem;
}

.lecture-Box .contentBox {
    min-height: 300px;
}

.lecture-Box .content-detail h4 svg {
    background-color: #e9e1e1;
    color: #3b3a3a;
    padding: 5px;
    border-radius: 12px;
    width: 15px;
    height: 15px;
}

.lecture-Box .lecture-menu .nav-tabs {
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    margin: 0 0 1rem;
    padding: 0;
    background-color: #fff;
}

.lecture-menu .nav-tabs a.nav-link {
    font-size: 1.1rem;
    color: #444;
    border: none;
    line-height: 2;
}

.lecture-menu .nav-tabs .nav-item a.nav-link.active {
    border-bottom: 4px solid #61b26a;
    color: #61b26a;
}

.lecture-Box .content-detail h4 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.lecture-Box .content-detail h4 i {
    margin: -0.1rem 0 0;
}

.lecture-Box .content-detail {
    padding: 1rem 0.5rem;
    border-top: 1px solid #dee2e6;
}

.lecture-Box .content-detail,
.lecture-Box .content-detail p,
.lecture-Box .content-detail p a {
    word-break: break-all;
}

.lecture-Box .content-detail p a {
    color: #5069fa;
}

.lecture-Box .content-detail img {
    width: 100% !important;
    height: 100% !important;
}

@media screen and (max-width: 768px) {
    .lecture-menu .nav-tabs a.nav-link {
        padding: 0.5rem 0;
        font-size: 1rem;
    }
}


/* 購買資訊 */

.payment-Box .payment-menu {
    margin-top: 1rem;
}

.payment-Box .contentBox {
    min-height: 300px;
}

.payment-Box .content-detail h4 svg {
    background-color: #e9e1e1;
    color: #3b3a3a;
    padding: 5px;
    border-radius: 12px;
    width: 15px;
    height: 15px;
}

.payment-Box .payment-menu .nav-tabs {
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    margin: 0 0 1rem;
    padding: 0;
    background-color: #fff;
}

.payment-menu .nav-tabs a.nav-link {
    font-size: 1.1rem;
    color: #444;
    border: none;
    line-height: 2;
}

.payment-menu .nav-tabs .nav-item a.nav-link.active {
    border-bottom: 4px solid #ef6f36;
    color: #ef6f36;
}

.payment-Box .content-detail h4 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.payment-Box .content-detail h4 i {
    margin: -0.1rem 0 0;
}

.payment-Box .content-detail {
    padding: 1rem 0.5rem;
    border-top: 1px solid #dee2e6;
}

.payment-Box .content-detail,
.payment-Box .content-detail p,
.payment-Box .content-detail p a {
    word-break: break-all;
}

.payment-Box .content-detail p a {
    color: #5069fa;
}

.payment-Box .content-detail img {
    width: 100% !important;
    height: 100% !important;
}

@media screen and (max-width: 768px) {
    .payment-menu .nav-tabs a.nav-link {
        padding: 0.5rem 0;
        font-size: 1rem;
    }
}


/*購買*/

.info-header h1 {
    font-size: 2rem;
    line-height: 1.5;
}

.info-header h3 {
    font-size: 1.2rem;
    line-height: 1.5;
}

@media screen and (max-width: 768px) {
    .info-header h1 {
        font-size: 1.5rem;
        line-height: 1.5;
        text-align: center;
    }

    .info-header h3 {
        font-size: 1rem;
        line-height: 1.5;
    }
}

info-header-left
/*課程*/

.info-header-left h1 {
    font-size: 2rem;
    line-height: 1.5;
}

.info-header-leftr h3 {
    font-size: 1.2rem;
    line-height: 1.5;
}

@media screen and (max-width: 768px) {
    .info-header-left h1 {
        font-size: 1.5rem;
        line-height: 1.5;
        text-align: left;
    }

    .info-header-left h3 {
        font-size: 1rem;
        line-height: 1.5;
    }
}

.coupon-page-wrap .coupon-page-info,
.info-purchase-wrap .info-purchase {
    padding: 1rem;
    font-family: Noto Sans TC, Poppins, Microsoft JhengHei, sans-serif, Arial;
    font-weight: 400;
    line-height: 1.6;
    box-shadow: 0 3px 15px -6px #99999980;
}

.info-purchase-wrap .info-purchase .price-card .original,
.info-purchase-wrap .info-purchase .product-price .original {
    padding-top: 0.5rem;
}

.info-purchase-wrap .info-purchase .purchase-btn a.btn-orange {
    background: #ff734c;
    color: white;
    padding: 4px 4px;
    font-size: 1rem;
}

.info-purchase-wrap .info-purchase .purchase-btn a.btn-orange:hover {
    background: white;
    border: #ff734c 1px solid;
    color: #ff734c;
}

.info-purchase-wrap .info-purchase .purchase-btn a.btn-green {
    background: #1eb512;
    color: white;
    padding: 5px 5px;
    font-size: 1rem;
}

.info-purchase-wrap .info-purchase .purchase-btn a.btn-green:hover {
    background: white;
    border: #1eb512 1px solid;
    color: #1eb512;
}

.social-icon li {
    float: left;
    margin: 10px 10px;
}

.titlebar {
    display: grid;
    grid-template-columns: auto max-content;
    height: 54px;
    padding: 0 16px;
}

.titlebar-area {
    display: inline-grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    line-height: 54px;
}

.titlebar-backButton {
    width: 40px;
    justify-content: flex-start;
}

.titlebar-text {
    font-size: 1.5rem;
    font-weight: bold;
    cursor: default;
    color: black;
    float: left;
    height: 54px;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty_content .thumb {
    margin-bottom: 16px;
    text-align: center;
}

.empty_content .des {
    margin-top: 8px;
    padding: 0 16px;
    color: #777;
    font-size: 1.2rem;
    line-height: 2.2rem;
    font-weight: 400;
    text-align: center;
}

.coupon_menu {
    padding: 20px 0;
}

.coupon_menu_box {
    display: -webkit-flex;
    display: flex;
    height: 66px;
    background-color: #fff;
    border: 1px solid #efefef;
    border-radius: 8px;
    box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.06), 0 1px 1px 0 rgba(0, 0, 0, 0.04);
}

.coupon_menu_box .box_item {
    position: relative;
    width: 100%;
}

.coupon_menu_box .box_item+.box_item:before {
    content: '';
    position: absolute;
    left: 0;
    display: block;
    width: 1px;
    height: 16px;
    background-color: #ceefdc;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.coupon_menu_box .link {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    padding: 13px 16px;
    font-size: 0;
    box-sizing: border-box;
}

.coupon_menu_box .link::before {
    content: '';
    display: inline-block;
    vertical-align: top;
}

.coupon_menu_box .tit {
    display: inline-block;
    color: #111;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
}

.coupon_menu_box .count {
    margin-left: auto;
    color: #06c755;
    font-size: 15px;
    line-height: 22px;
    font-weight: 800;
    letter-spacing: -0.25px;
}

.coupon_menu_box .ico_shop_order:before {
    width: 40px;
    height: 40px;
    background-image: url(../img/coupon/order_icon_1.svg);
    background-size: 35px 35px;
    background-repeat: no-repeat;
}

.coupon_menu_box .ico_shop_order_active:before {
    width: 40px;
    height: 40px;
    background-image: url(../img/coupon/order_icon.svg);
    background-size: 35px 35px;
    background-repeat: no-repeat;
}


.coupon_menu_box .ico_coupon:before {
    width: 40px;
    height: 40px;
    background-image: url(../img/coupon/coupon_icon_1.svg);
    background-size: 35px 35px;
    background-repeat: no-repeat;
}

.coupon_menu_box .ico_coupon_active:before {
    width: 40px;
    height: 40px;
    background-image: url(../img/coupon/coupon_icon_1.svg);
    background-size: 35px 35px;
    background-repeat: no-repeat;
}

.coupon_menu_box .ico_shop_order_active {
    background-color: #ecebeb;
    border: 1px solid #dedede;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.coupon_menu_box .ico_coupon_active {
    background-color: #ecebeb;
    border: 1px solid #dedede;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* @media (max-width: 768px) {
    .coupon_menu_box .link {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 10px;
    }

    .coupon_menu_box {
        height: 80px;
    }

} */



.coupon_menu_box .link.lec_like:before {
    content: '\2764';
    /* 愛心的Unicode字符 */
    font-size: 30px;
    color: red;
    /* 設定為紅色 */
    display: inline-block;
}

.ticket-serial-number {
    color: #638dff;
    display: inline-block;
    font-size: 0.9rem;
    line-height: 18px;
}

.coupon-page-txt {
    font-size: 0.9rem;
    line-height: 18px;
    padding: 0px 15px;
}

.coupon_detail {
    overflow: hidden;
    position: relative;
    padding: 25px 0 32px;
    text-align: center;
}

.coupon_detail .coupon_thumb img {
    width: 240px;
    height: 240px;
}

.coupon_item_title {
    margin-top: 20px;
    padding: 0 15px;
}

.coupon_item_title .tit {
    color: #111;
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-weight: 400;
}

.coupon_item_mes {
    margin-top: 20px;
}

.coupon_item_mes .opt_group {
    display: block;
    margin-top: 4px;
}

.coupon_item_mes .opt_group .opt {
    font-size: 14px;
    line-height: 22px;
    color: #b7b7b7;
    word-break: break-all;
}

.coupon_item_mes .opt_group .opt+.opt:before {
    display: inline-block;
    margin: 0 4px;
    color: #dfdfdf;
    content: '|';
}

.voucher-notice {
    font: 0.9rem monospace;
    text-align: center;
    color: #313131;
    margin-bottom: 10px;
}

.voucher-area {
    padding: 24px 16px;
    background-color: #f5f5f5;
}

.voucher-area .voucher-box {
    overflow: hidden;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.06), 0 1px 1px 0 rgba(0, 0, 0, 0.04);
}

.voucher-area .voucher-box .voucher-code {
    margin: 0 16px;
    padding: 40px 0 36px;
    text-align: center;
}

.voucher-area .voucher-box .voucher-code p {
    font: 13px monospace;
}

.voucher-detail .voucher-title {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    margin: 0 16px;
    padding: 20px 0;
    color: #111;
    border-bottom: 1px solid #f5f5f5;
}

.voucher-detail .voucher-title h3,
.voucher-pay h3 {
    -webkit-flex: 1;
    flex: 1;
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
}

.voucher-detail .voucher-table {
    position: relative;
    padding: 16px 16px 20px;
    border-radius: 10px;
}

.voucher-detail .voucher-table table {
    width: 100%;
    max-width: 100%;
    margin-bottom: -20px;
    margin-top: -16px;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.24px;
}

.voucher-detail .voucher-table table tr+tr {
    border-top: 1px solid #f5f5f5;
}

.voucher-detail .voucher-table table th {
    min-width: 90px;
    padding: 20px 0;
    font-weight: 400;
    color: #b7b7b7;
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
    box-sizing: border-box;
}

.voucher-detail .voucher-table table td {
    padding: 20px 0 20px 10px;
    word-break: break-all;
    text-align: left;
}

.voucher-pay {
    position: relative;
    padding: 16px 6px 0px;
}


/*掃酷碰支付方式*/

.toPay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #575757;
    padding: 20px 10px;
    border-radius: 10px;
    position: relative;
}

.toPay [type='radio'] {
    z-index: -1;
    position: absolute;
    opacity: 0;
}

.toPay [type='radio']:checked~label {
    border-color: #4062f6;
    background-color: rgba(20, 154, 234, 0.16);
    color: #1855a5;
}

.toPay [type='radio']:checked~label:after {
    animation: sparkles 700ms ease-in-out;
}

.toPay [type='radio']:checked~label>span {
    border: 0;
    animation: radio 400ms cubic-bezier(0.17, 0.89, 0.32, 1.49);
}

.toPay [type='radio']:checked~label>span:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 10px;
    background-color: #1855a5;
}

.toPay [type='radio']:checked~label .card {
    animation: card 500ms ease-in-out forwards;
}

.toPay [type='radio']:checked~label .card:after {
    animation: shine 500ms ease-in forwards;
    animation-delay: 100ms;
}

.toPay label {
    position: relative;
    display: grid;
    align-items: center;
    grid-template-columns: 20px auto 100px;
    /* grid-gap: 20px; */
    width: 300px;
    height: 62px;
    padding: 0 20px;
    border-radius: 6px;
    border: 2px solid transparent;
    background-color: transparent;
    transition: all 300ms ease-in;
}

.toPay label:hover {
    border-color: #4062f6;
    background-color: rgba(97, 154, 234, 0.16);
}

.toPay label:before,
.toPay label:after {
    position: absolute;
    left: 29px;
    border-radius: 50%;
    content: '';
}

.toPay label:before {
    margin: -2rem;
    border: solid 2rem #545461;
    width: 4rem;
    height: 4rem;
    transform: scale(0);
}

.toPay label:after {
    margin: -0.1875rem;
    width: 0.375rem;
    height: 0.375rem;
}

.toPay label>span {
    position: relative;
    display: inline-flex;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 2px solid #e5e5e5;
    background-image: linear-gradient(to bottom, #eae9e9, #fdfdff);
}

.toPay .card {
    position: relative;
    width: 243px;
    height: 152px;
    padding: 22px 24px;
    border-radius: 16px;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.25);
    background-image: linear-gradient(90deg, #ffffff, #e4e4e4);
    overflow: hidden;
}

.toPay .card:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.toPay .card:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    transform: translateX(-70px);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}

.toPay .card-blue {
    background-image: linear-gradient(45deg, #2972d1, #284c8d);
}

.toPay .card-red {
    background-image: linear-gradient(45deg, #f30800, #cc0e0e);
}

.toPay .card-pink {
    background-image: linear-gradient(45deg, #e038ae, #e0508c);
}

.toPay .card-yellow {
    background-image: linear-gradient(45deg, #f3ba00, #fca016);
}

.toPay .card-green {
    background-image: linear-gradient(45deg, #2ea001, #06d617);
}

.toPay .card-dark {
    background-image: linear-gradient(45deg, #616161, #484848);
}

.toPay .card--sm {
    position: absolute;
    right: -76px;
    transform: scale(0.24);
}

.toPay .card__chip {
    width: 39px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid rgba(102, 84, 50, 0.5);
    box-shadow: inset 1px 1px 0px rgba(179, 146, 86, 0.5);
    background-image: linear-gradient(90deg, #d0a963, #ffe6ba);
}

.toPay .card__content {
    display: flex;
    justify-content: space-between;
    margin-top: 46px;
}

.toPay .card__symbol {
    display: flex;
}

.toPay .card__symbol span {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: #fb4646;
}

.toPay .card__symbol span:last-child {
    background-color: rgba(255, 163, 55, 0.75);
    margin-left: -13px;
}

.toPay .text__row {
    display: grid;
    grid-template-columns: 54px 64px;
    grid-gap: 6px;
}

.toPay .text__row:last-of-type {
    grid-template-columns: 45px 54px;
    margin-top: 7px;
}

.toPay .text__loader {
    height: 13px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.4);
}

.toPay .option:not(:last-child) {
    margin-bottom: 4px;
}

@keyframes radio {

    0%,
    17.5% {
        transform: scale(0);
    }
}

@keyframes card {
    0% {
        box-shadow: 0 1px 0 0 rgba(250, 250, 250, 0.25);
        transform: scale(0.24);
    }

    45% {
        box-shadow: 0 12px 32px 0 rgba(255, 255, 255, 0.5);
        transform: scale(0.25);
    }

    100% {
        box-shadow: 0 4px 12px 0 rgba(255, 255, 255, 0.4);
        transform: scale(0.24);
    }
}

@keyframes shine {
    from {
        transform: translateX(-70px) rotate(10deg);
    }

    to {
        transform: translateX(300px) rotate(10deg);
    }
}

@keyframes sparkles {

    0%,
    10% {
        opacity: 0;
        transform: scale(0);
    }

    15% {
        opacity: 1;
        transform: scale(1.2) rotate(-20deg);
        box-shadow: 2rem * cos(-90deg) 0.375rem * cos(-30deg) 2rem * sin(-90deg) 0.375rem * sin(-30deg) 0 0rem #ff8080, 2rem * cos(-90deg) 0.375rem * cos(150deg) 2rem * sin(-90deg) 0.375rem * sin(150deg) 0 0rem #ffed80, 2rem * cos(-38.5714285714deg) 0.375rem * cos(21.4285714286deg) 2rem * sin(-38.5714285714deg) 0.375rem * sin(21.4285714286deg) 0 0rem #ffed80, 2rem * cos(-38.5714285714deg) 0.375rem * cos(201.4285714286deg) 2rem * sin(-38.5714285714deg) 0.375rem * sin(201.4285714286deg) 0 0rem #a4ff80, 2rem * cos(12.8571428571deg) 0.375rem * cos(72.8571428571deg) 2rem * sin(12.8571428571deg) 0.375rem * sin(72.8571428571deg) 0 0rem #a4ff80, 2rem * cos(12.8571428571deg) 0.375rem * cos(252.8571428571deg) 2rem * sin(12.8571428571deg) 0.375rem * sin(252.8571428571deg) 0 0rem #80ffc8, 2rem * cos(64.2857142857deg) 0.375rem * cos(124.2857142857deg) 2rem * sin(64.2857142857deg) 0.375rem * sin(124.2857142857deg) 0 0rem #80ffc8, 2rem * cos(64.2857142857deg) 0.375rem * cos(304.2857142857deg) 2rem * sin(64.2857142857deg) 0.375rem * sin(304.2857142857deg) 0 0rem #80c8ff, 2rem * cos(115.7142857143deg) 0.375rem * cos(175.7142857143deg) 2rem * sin(115.7142857143deg) 0.375rem * sin(175.7142857143deg) 0 0rem #80c8ff, 2rem * cos(115.7142857143deg) 0.375rem * cos(355.7142857143deg) 2rem * sin(115.7142857143deg) 0.375rem * sin(355.7142857143deg) 0 0rem #a480ff, 2rem * cos(167.1428571429deg) 0.375rem * cos(227.1428571429deg) 2rem * sin(167.1428571429deg) 0.375rem * sin(227.1428571429deg) 0 0rem #a480ff, 2rem * cos(167.1428571429deg) 0.375rem * cos(407.1428571429deg) 2rem * sin(167.1428571429deg) 0.375rem * sin(407.1428571429deg) 0 0rem #ff80ed, 2rem * cos(218.5714285714deg) 0.375rem * cos(278.5714285714deg) 2rem * sin(218.5714285714deg) 0.375rem * sin(278.5714285714deg) 0 0rem #ff80ed, 2rem * cos(218.5714285714deg) 0.375rem * cos(458.5714285714deg) 2rem * sin(218.5714285714deg) 0.375rem * sin(458.5714285714deg) 0 0rem #ff8080;
    }
}


/*酷碰任務*/

.section {
    padding: 60px 40px;
    background: #74b9ffaa;
}

.bottom-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 10px;
    font-size: 18px;
    font-weight: 600;
    text-transform: inherit;
    color: #672627;
}

.task_videws span {
    font-size: 20px;
    color: #271c1d;
    font-weight: 800;
}

.border01 {
    width: 1px;
    height: 20px;
    background: #bdbdbd;
    margin: 0 10px;
}

.border02 {
    border-top: 1px solid #5b5b5b;
    font-size: 18px;
    color: #271c1d;
}

.bottom-section span {
    font-size: 15px;
    display: block;
}

@media screen and (max-width: 768px) {
    .bottom-section span {
        font-size: 12px;
        display: block;
    }
}

.boardcast-area {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 0.625rem;
    padding: 0.3125rem 0.625rem;
    background: #ffffff;
    border-radius: 2.375rem;
    width: 50%;
}

.boardcast-area .boardcast-icon {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.boardcast-area .marquee-place {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 1.5625rem;
    padding-left: 0.625rem;
    background: #ffffff;
}

.boardcast-area .marquee-place marquee {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    color: #0047ba;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.header-wrap .header-title {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    padding: 10px 0;
    color: #111;
}

.header-wrap .header-title h3 {
    flex: 1;
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
}

.video-list .video-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 5px;
    grid-column-gap: 8px;
    grid-row-gap: 24px;
}

.video-list .video-content .video-single {
    position: relative;
    cursor: pointer;
}

.video-list .video-content .video-single .yt {
    z-index: 1;
    top: 0;
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

.video-list .video-content .video-single .yt iframe {
    border-radius: 15px;
}

.video-list .video-content .video-single .detail {
    display: grid;
    padding: 8px 5px 0px 5px;
    grid-row-gap: 6px;
}

.video-list .video-content .video-single .detail .title {
    font-size: 13px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: calc(2em * 1.3);
    white-space: normal;
    line-height: 1.3;
}

.video-single .single-content {
    position: relative;
    display: block;
    height: 0;
    padding-bottom: 50%;
    border-radius: 8px;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .boardcast-area {
        width: 100%;
    }

    .video-single .single-content {
        padding-bottom: 175%;
    }

    .video-list .video-content {
        padding: 0px;
    }
}

.video-single .single-content .single-content-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    z-index: 2;
    padding: 8px 8px 0;
}

.single-content .single-content-head .span-badge {
    display: flex;
    align-items: center;
    background-color: #e71f1f;
    color: white;
    padding: 0 4px;
    height: 20px;
    border-radius: 20px;
}

.single-content .single-content-head .span-badge .span-font {
    display: block;
    transform: scale(0.833);
}

.section-box {
    display: grid;
    background-color: #fff;
    border-radius: 8px;
    margin: 10px 0px;
    overflow: hidden;
}

.section-box .chanel-title {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    padding: 16px 0px 0px 16px;
}

.section-box .chanel-title h3 {
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 700;
    flex-wrap: wrap;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: calc(2em * 1.5);
    white-space: normal;
    line-height: 1.5;
}

.section-box .chanel-item {
    display: grid;
    grid-column-gap: 6px;
    grid-template-columns: repeat(5, 1fr);
    padding: 0 10px 16px;
}

.section-box .chanel-item .select-anchor {
    display: grid;
    grid-template-rows: 48px 18px max-content;
    grid-row-gap: 2px;
    justify-items: center;
    align-items: center;
    text-align: center;
}

.chanel-item .select-anchor .select-image {
    width: 48px;
    height: 48px;
    border-radius: 48px;
    overflow: hidden;
    margin-bottom: 2px;
    filter: brightness(97%);
}

.chanel-item .select-anchor .select-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    width: 100%;
}

.chanel-item .select-anchor .select-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 13px;
    width: 100%;
    color: #949494;
}

.mission-wrap {
    position: relative;
    background-color: rgb(255, 206, 0);
}

.mission-wrap before {
    content: ' ';
    display: table;
}

.mission-wrap .mission-content {
    min-height: 64px;
    display: flex;
    flex-flow: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}

.mission-wrap .mission-content .box {
    display: flex;
    flex-flow: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    align-items: flex-start;
    margin: 80px;
}

.mission-wrap .mission-content .box-content {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-wrap: break-word;
    letter-spacing: 0.5px;
    line-height: 1.7;
    min-width: 750px;
}

.mission-wrap .mission-content .box-content .base {
    border-radius: 25px;
    background: rgba(239, 239, 239, 0.42);
    border-style: none;
    padding: 15px;
    text-align: center;
}

.mission-wrap .mission-content .box-content .base span {
    font-size: 3.5rem;
    color: #000;
}

.mission-wrap .mission-content .box-content .base .pv {
    margin-top: -30px;
    text-align: center;
}

.mission-wrap .mission-content .box-content .base h3 {
    margin: 18px 0;
    font-size: 1.8rem;
    line-height: 1.3;
    color: #000;
}

.mission-wrap .mission-content {
    width: inherit;
    height: inherit;
    opacity: 1;
    background: url(../img/icon/pv.svg) center center / cover no-repeat;
    transition: -webkit-filter 0.5s ease-out, filter 0.5s ease-out, opacity 0.5s ease-out;
    filter: blur(0px);
}

.mission-wrap .mission-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .mission-wrap .mission-content .box {
        margin: 50px 10px;
    }

    .mission-wrap .mission-content .box-content {
        padding-left: 0;
        padding-right: 0;
        min-width: 100%;
    }

    .mission-wrap .mission-content .box-content .base span {
        font-size: 2.5rem;
    }

    .mission-wrap .mission-content .box-content .base h3 {
        font-size: 1.4rem;
    }
}

.coupon-countdown-1 {
    z-index: 120;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.coupon-countdown-1 button {
    width: 250px;
    margin: -1.2rem auto 0.5rem;
    display: block;
    z-index: 120;
    position: relative;
    border: none;
    padding-top: 10px;
    border-radius: 50px;
    background: #ff1e1e;
}

.coupon-countdown-1 .coupon-countdown-text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #333;
}

.coupon-countdown-1 .coupon-countdown-text h3 {
    font-size: 1.2rem;
}

.floating-area .floating {
    animation-name: floating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.36, 0.45, 0.65, 0.55);
}

.floating-area .pv {
    position: absolute;
    top: -10px;
    right: calc(50% + 45px);
    z-index: 121;
    /* left: calc(50% - 1440px / 2 + 59px); */
}

.floating-area .coin {
    position: absolute;
    bottom: -15px;
    right: 5%;
    z-index: 121;
    transform: rotate(5deg);
    /* left: calc(50% - 1440px / 2 + 59px); */
}

@keyframes floating {
    from {
        transform: translate(0, 0);
    }

    60% {
        transform: translate(0, -10px);
    }

    to {
        transform: translate(0, 0);
    }
}


/*專欄文章*/

.blog-section {
    padding: 36px 0;
}

.blog-section .section-title {
    padding: 14px 0;
    width: 100%;
}

.blog-section .section-title .title {
    font-size: 22px;
    font-weight: 500;
    height: 30px;
    line-height: 30px;
    margin: 0;
    width: 100%;
}

.blog-section .section-title .more-link,
.blog-section .section-title .title,
.blog-section .section-title .title-text {
    zoom: 1;
    display: inline-block;
    display: inline;
    vertical-align: middle;
}

.blog-section .section-title .more-link {
    color: #2e90b7;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
    padding: 2px;
}

.recommend-section {
    padding: 64px 0;
}

.recommend-section .recommend-content {
    font-size: 0;
}

.personal-products .arrow {
    top: calc(50% - 47px);
}

.personal-shops .arrow {
    top: calc(50% - 29px);
}

.recommend-card {
    zoom: 1;
    box-sizing: border-box;
    display: inline-block;
    display: inline;
    margin-right: 24px;
    padding-bottom: 10px;
    vertical-align: top;
    width: calc(100% - 16px);
}

.recommend-card:hover {
    text-decoration: none;
}

.recommend-card:hover .image:after {
    display: block;
}

.recommend-card:last-child {
    margin-right: 0;
}

.recommend-card .image {
    background: #f7f7f8;
    border-radius: 2px;
    display: block;
    overflow: hidden;
    padding-bottom: 62.5%;
    position: relative;
    width: 100%;
}

.recommend-card .image img {
    display: block;
    font-family: 'object-fit: cover;';
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}

.recommend-card .image:after {
    background: hsla(0, 0%, 100%, 0.1);
    content: '';
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.recommend-card .content {
    white-space: normal;
}

.recommend-card .content .title {
    color: #39393e;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin: 10px 0 0;
}

.recommend-card .content .text {
    color: #39393e;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    margin-top: 6px;
}

@media screen and (max-width: 768px) {
    .blog-section .section-title {
        text-align: center;
    }

    .recommend-section {
        padding: 20px 0 45px 0;
    }
}


/*商城*/

.channel_box {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    margin-top: 20px;
}

.channel_box .topBar {
    border-bottom: 1px solid #f5f8fa;
    display: flex;
    justify-content: space-between;
}

.channel_box .topBar .channel_title {
    align-items: center;
    color: #26282a;
    display: flex;
    font-size: 20px;
    font-weight: 600;
    height: 60px;
    line-height: 60px;
    margin: 0;
    padding-left: 16px;
}

.channel_box .topBar .channel_linkList {
    align-items: center;
    display: flex;
    justify-content: end;
}

.channel_linkList .channel_link {
    color: #26282a;
    padding: 0 16px;
}

.channel_link+.channel_link {
    border-left: 1px solid #dbd8d8;
}

.channel_box .channel_content {
    padding: 0 8px 16px;
    width: 100%;
}

.channel_box .carouselWrapper {
    height: 300px;
    vertical-align: top;
    background: #fff;
    overflow: hidden;
    position: relative;
}

.channel_box .carouselWrapper .carouselBanner {
    background: #fff;
    padding: 16px 8px 6px;
    transition-duration: 0.3s;
}

.channel_box .carouselWrapper .carouselBanner a {
    border: 1px solid #f5f8fa;
    border-radius: 8px;
    display: block;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.channel_box .carouselWrapper .carouselBanner span {
    display: inline-block;
    height: 300px;
    text-align: center;
    color: rgb(38, 40, 42);
    width: 100%;
}

.channel_box .carouselWrapper .carouselBanner .banner-title {
    font-size: 24px;
    font-weight: 600;
    margin-top: 94px;
}

.channel_box .carouselWrapper .carouselBanner .banner-txt {
    margin: 5px 28px 16px;
}

.channel_box .carouselWrapper .carouselBanner .banner-more {
    border: 2px solid;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    height: 28px;
    line-height: 24px;
    margin: 0 auto;
    width: 75px;
}

.channel_box .channel-small-pro {
    border-radius: 8px;
    color: #26282a;
    display: inline-block;
    overflow: hidden;
    padding: 6px 8px;
    position: relative;
    justify-items: center;
}

.channel_box .channel-small-pro>img {
    border-radius: 8px;
    height: 80px;
    object-fit: contain;
    vertical-align: top;
    width: 80px;
    border: 1px solid #f5f8fa;
}

.channel_box .channel-small-pro>span {
    display: inline-block;
    height: 80px;
    padding: 4px 0 0 8px;
    vertical-align: top;
    width: 104px;
}

.channel_box .channel-small-pro .small-pro-title {
    display: block;
    font-family: HelveticaNeue;
    font-size: 14px;
    font-weight: 600;
    height: 22px;
    line-height: 22px;
}

.channel_box .channel-small-pro>span>p:last-child {
    color: #c0821f;
    height: 20px;
    margin-top: 4px;
}

.channel_box .channel-big-proList {
    display: flex;
    height: 318px;
    justify-content: space-around;
    padding-top: 16px;
    vertical-align: top;
}

.channel_box .channel-big-pro {
    border-radius: 12px;
    overflow: hidden;
}

.channel_box .channel-big-pro>img {
    border-radius: 12px;
    height: 184px;
    margin: 0 0 12px;
    object-fit: contain;
    width: 100%;
}

.channel_box .channel-big-pro>h3 {
    color: #26282a;
    display: block;
    font-size: 18px;
    font-weight: 600;
    height: 22px;
    line-height: 22px;
    text-align: center;
}

.channel_box .channel-big-pro>p {
    color: #26282a;
    display: block;
    font-size: 14px;
    font-weight: 400;
    height: 20px;
    line-height: 20px;
    margin: 4px 0 8px;
    text-align: center;
}

.channel_box .channel-big-pro>div {
    border: 2px solid #26282a;
    border-radius: 12px;
    color: #26282a;
    font-size: 12px;
    font-weight: 600;
    height: 24px;
    line-height: 20px;
    margin: 0 auto;
    text-align: center;
    width: 84px;
}

@media screen and (max-width: 900px) {
    .channel_box .topBar {
        border: none;
    }

    .channel_box .topBar .channel_linkList {
        justify-content: center;
    }

    .channel_box .carouselWrapper {
        height: auto;
    }

    .channel_box .carouselWrapper .carouselBanner span {
        width: 100%;
        border-radius: 10px;
    }

    .channel_box .carouselWrapper .carouselBanner .mobile-img {
        margin: 0 auto;
        margin-top: 40px;
    }

    .channel_box .carouselWrapper .carouselBanner .banner-title {
        margin-top: 10px;
    }

    .channel_box .channel-small-pro {
        display: inline-grid;
        padding: 6px 5px;
    }
}

.payment-header-box .header img {
    width: 100%;
}

.payment-header-box .box-wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 0.9rem;
    min-height: 18rem;
    background-color: #2d396c;
}

.payment-header-box .box-wrap.gift {
    background-color: #e8332f;
    /* background: linear-gradient(to top, #9f082a, #dd344e); */
}

.payment-header-box .box-wrap .box .box-header {
    display: flex;
    justify-content: space-between;
    padding: 0 0.8rem 0 0.9rem;
    height: 1rem;
    box-sizing: border-box;
    align-items: center;
}

.payment-header-box .box-wrap .box {
    width: 100%;
    padding-bottom: 20px;
}

.payment-header-box .box-wrap .box .subtitle {
    margin: 18px 0;
    font-size: 1.75rem;
    line-height: 1.3;
    text-align: center;
}

.payment-header-box .box-header span {
    font-size: 1rem;
    text-transform: uppercase;
    white-space: pre;
}

.payment-header-box .box-header a {
    text-decoration: none;
    text-transform: capitalize;
    display: flex;
    font-size: 0.9rem;
    align-items: center;
}

.payment-header-box .box-product {
    display: flex;
    justify-content: center;
    /* height: 18rem; */
    overflow: hidden;
}

.payment-header-box .box-product a {
    position: relative;
    box-sizing: border-box;
    background: #fff;
    margin-right: 0.0625rem;
    text-decoration: none;
    text-align: center;
    min-height: 14rem;
    display: flex;
    flex-direction: column;
}

.payment-header-box .box-product .box-pic {
    width: 100%;
    margin: 0 auto;
}

.payment-header-box .box-product .box-title {
    width: 10rem;
    height: 4rem !important;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.14);
    border-radius: 15px;
    margin: 0 auto;
    margin-top: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 3px;
}

.payment-header-box .box-product .box-content {
    width: 100%;
    height: 2rem !important;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: 0.9375rem;
    margin-bottom: 0.3125rem;
}

.payment-header-box .box-product .box-content .price {
    color: #ee4d2d;
    width: 100%;
    text-align: center;
    font-size: 1.125rem;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

@media screen and (max-width: 900px) {
    .payment-header-box .header {
        height: 55px;
    }

    .payment-header-box .header.gift {
        height: 40px;
    }

    .payment-header-box .box-wrap .box .box-header {
        padding: 1.3rem 0.8rem 0.5rem 0.9rem;
    }

    .payment-header-box.container {
        padding: 0;
        margin-right: 0;
    }
}

.scratch-area {
    padding: 50px;
    justify-content: center;
    align-items: center;
}

.scratch-area .present {
    width: 250px;
    margin: 0 auto;
    cursor: pointer;
    position: relative;
    top: 25%;
    margin-bottom: 20px;
}

.scratch-area .gift {
    height: 150px;
}

.scratch-area .gift,
.scratch-area .lid {
    background: radial-gradient(white 15%, transparent 15.1%), radial-gradient(white 15%, transparent 15.1%), rgb(240, 58, 58);
    background-position: 0 0, 25px 25px;
    background-size: 50px 50px;
    position: relative;
    margin: 0 auto;
}

.scratch-area .lid {
    width: 250px;
    height: 70px;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
    z-index: 1;
    padding: 0 2px;
    background-color: rgb(216, 52, 52);
    top: 0;
    left: 0;
    transition: top ease-out 0.5s, left ease-out 0.5s, transform ease-out 0.5s;
}

.scratch-area .gift span,
.scratch-area .lid span {
    position: absolute;
    display: block;
    background: rgba(235, 199, 0, 0.8);
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
}

.scratch-area .gift span:first-child {
    width: 100%;
    height: 40px;
    top: 50px;
}

.scratch-area .gift span:last-child,
.scratch-area .lid span {
    width: 40px;
    height: 100%;
    left: 100px;
}

.scratch-area .promo {
    font-size: 30px;
    color: #26282a;
    text-align: center;
    position: relative;
    height: 0;
    top: 10px;
    transition: all ease-out 0.7s;
}

.scratch-area .promo p {
    font-size: 1.2rem;
    margin: 0;
}

.scratch-area .promo h3 {
    font-size: 1.5rem;
    margin: 0;
}

.scratch-area .present.active .lid,
.scratch-area .present:hover .lid {
    top: -80px;
    transform: rotateZ(10deg);
    left: 10px;
}

.scratch-area .present.active .promo,
.scratch-area .present:hover .promo {
    top: -70px;
}

.scratch-btn.click {
    margin-top: 1.5rem;
    padding: 15px 50px;
    border: none;
    background-color: #d35f71;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.25s;
    border-radius: 2px;
}

.scratch-btn.click::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25px;
    height: 8px;
    background-color: #f19ba8;
    transition: all 0.25s linear;
}

.scratch-btn.click:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 8px;
    background-color: #f19ba8;
    transition: all 0.25s linear;
}

.scratch-btn.click:hover {
    background-color: #ff9f9f43;
    color: #c5384d;
    box-shadow: inset 0 0 0 1px #f19ba87a;
}

.scratch-btn.click:hover::after {
    height: 100%;
}

.scratch-btn.click:hover::before {
    height: 100%;
}

@media screen and (max-width: 900px) {
    .scratch-area {
        padding: 50px 0 0 0;
    }

    .scratch-area .present {
        margin-top: 40px;
        width: 250px;
    }

    .scratch-area .gift {
        width: 200px;
        height: 120px;
    }

    .scratch-area .promo p {
        font-size: 1rem;
        margin: 0;
    }

    .scratch-area .promo h3 {
        font-size: 1.2rem;
        margin: 0;
    }

    .scratch-area .gift span:first-child {
        width: 100%;
        height: 35px;
        top: 45px;
    }

    .scratch-area .gift span:last-child,
    .scratch-area .lid span {
        width: 30px;
        height: 100%;
        left: 80px;
    }

    .scratch-area .lid {
        width: 200px;
        height: 45px;
    }

    .scratch-btn.click {
        margin-top: 0;
        width: 80%;
    }
}

.scratch_step_bg {
    background-color: #fff;
    border-radius: 0.75em;
}

.gift-item {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 500;
    padding: 25px 3%;
    vertical-align: middle;
}

@media screen and (max-width: 900px) {
    .gift-item {
        margin: 0 15px;
    }
}

.gift-item .cell_01 {
    width: 25%;
    text-align: center;
    border-bottom: 2px dashed #dd0f0f;
}

.gift-item .cell_01 img {
    width: 75px;
    animation: jittery 4s infinite;
    padding-bottom: 10px;
}

.gift-item .cell_02 {
    border-bottom: 2px solid #9f9f9f;
    top: 10%;
}

.gift-item .cell_02 .success-gift {
    position: absolute;
    top: 15%;
    right: 3%;
    width: 50px;
    height: 50px;
    background-color: #f5815e;
    border-radius: 50%;
    box-shadow: 6px 6px 6px rgb(255 204 174 / 50%), inset 1px 1px 4px 2px rgba(237, 237, 240, 0.5);
    animation: floating 6s infinite;
    cursor: pointer;
}

.gift-item .cell_02 .success-gift svg {
    width: 32px;
    height: 32px;
    position: relative;
    top: 16%;
    left: 17%;
    color: #ffda82;
    transform: rotate(0.05turn);
}

.scroll-indicator {
    width: calc(100% - 80px);
    height: 10px;
    background-color: rgba(99, 98, 98, 0.39);
    border-radius: 10px;
    position: relative;
    margin: 0 10px;
}

.indicator {
    position: absolute;
    height: 10px;
    background: #ffc420;
    border-radius: 10px;
}

.gift-item-flex {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    z-index: 1;
    padding-top: 10px;
}


/*meal*/

.meal-box {
    border-radius: 10px;
    width: 48%;
    margin-right: 7px;
    margin-top: 5px;
}

.meal-card {
    height: 180px;
    width: 120px;
    position: relative;
    margin: 7px auto;
}

.meal-card input[type='radio'] {
    -webkit-appearance: none;
    appearance: none;
    background-color: white;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    position: absolute;
    box-shadow: 7px 7px 15px rgba(207, 208, 209, 8%);
    cursor: pointer;
    outline: none;
    transition: transform 0.4s ease-in-out;
}

.meal-card input[type='radio']::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: #f9fafd;
    border: 1px solid #e2e6f3;
    border-radius: 50%;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.meal-card input[type='radio']::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    background-color: transparent;
    border-radius: 50%;
    bottom: 19.5px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.meal-card label {
    position: absolute;
    margin: 15px;
    cursor: pointer;
}

.meal-card h2 {
    font-size: 0.9rem;
    font-weight: 500;
    color: #7b7b93;
    margin-top: 10px;
    text-align: center;
    height: 35px;
}

.meal-card img {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    margin: auto;
}

.meal-card input[type='radio']:hover {
    transform: scale(1.05);
}

.meal-card input[type='radio']:checked {
    border: 1px solid #478bfb;
}

.meal-card input[type='radio']:checked:after {
    background-color: #478bfb;
}

@media screen and (max-width: 900px) {
    .meal-box {
        width: 100%;
        margin: 10px 0;
    }

    .meal-card label {
        margin: 10px;
    }

    .meal-card {
        width: 100px;
        margin: 5px 3px;
    }
}

.use-discount-box {
    border: 1px solid #4f4d4d;
    padding: 5px;
    width: 90px;
    text-align: center;
}


/*我的等級 header*/

.camera-icon {
    width: 1.3rem;
    height: 1.3rem;
    background-color: #ffffff;
    color: #000;
    position: absolute;
    border-radius: 1rem;
    font-size: 0.9rem;
    opacity: 0.9;
    left: 65%;
    top: 65%;
}

.image-title {
    position: absolute;
    top: 28%;
    left: 7%;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 3rem;
    font-weight: 800;
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: 1px;
    /* 純黑字體 */
    color: #000;
    /* 白光陰影，乾淨又有質感 */
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9),
        /* 外圍白光暈 */
        1px 1px 0 rgba(255, 255, 255, 0.8),
        /* 亮邊 */
        2px 2px 2px rgba(0, 0, 0, 0.6);
    /* 底部黑影增加立體感 */
}

@media screen and (min-width: 1367px) {
    .image-title {
        position: absolute;
        top: 28%;
        left: 6%;
    }
}

@media screen and (max-width: 768px) {
    .image-title {
        position: absolute;
        top: 28%;
        left: 8%;
        font-size: 1.5rem;
    }
}

[swiper_scale_active] .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* background: #fff; */
    border-radius: 20px;
    border-color: transparent;
    /* shadow */
    box-shadow: 0 0 100px 40px var(--main-bg-color);
    overflow: hidden;
}

@media only screen and (max-width: 600px) {
    [swiper_scale_active] .swiper-slide {
        border-radius: 10px;
    }
}


/* CUSTOM CSS "TRICK" => the link should work only on the active slide  */

[swiper_scale_active] .swiper-slide:not(.swiper-slide-active) a {
    pointer-events: none;
}

section.card-grids .card {
    border: 0;
}

section.card-grids .icon {
    display: flex;
    align-items: flex-start;
}

section.card-grids .icon svg {
    width: 2.188rem;
    margin-left: -0.188em;
}

section.card-grids h1 {
    text-align: center;
    font-size: 2rem;
    background: url('../img/level_bg.svg');
    background-size: 17.5rem;
    background-repeat: no-repeat;
    background-position: 50% 3.375rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

@media screen and (max-width: 768px) {
    section.card-grids h1 {
        font-size: 1.5rem;
        text-transform: capitalize;
        padding: 1rem 0;
        text-align: center;
    }
}

section.card-grids {
    display: grid;
    margin: 1rem 0;
}

section.card-grids>span {
    display: inline-block;
    margin-bottom: 0.938em;
    text-transform: uppercase;
    letter-spacing: 0.12rem;
    font-size: 0.8rem;
    background: #ffbb7b;
    color: #5c0404;
    font-weight: bold;
    padding: 10px 30px;
    border-radius: 50px;
}

section.card-grids .cards {
    margin-top: 2em;
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    justify-content: center;
}

section.card-grids .card {
    width: 28rem;
    cursor: pointer;
}

section.card-grids .card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

section.card-grids .card__outer {
    background: #ebecee;
    position: relative;
    min-height: 20rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
    transition: 0.3s ease-in-out;
}

section.card-grids .card--red .card__outer {
    min-height: 30rem;
}

section.card-grids .card__outer a {
    display: flex;
    align-items: center;
    text-decoration: none;
    text-transform: capitalize;
    font-weight: bold;
}

section.card-grids .card__outer a svg {
    margin-left: 0.375em;
    width: 1.125rem;
}

section.card-grids .card__inner {
    /* background: #fff; */
    background: #fff1f1;
    position: absolute;
    bottom: 3.75rem;
    right: 1.25rem;
    width: 100%;
    border-radius: 0.625rem;
    padding: 1.875rem 2.188rem;
    display: flex;
    flex-direction: column;
    height: 95%;
    justify-content: center;
    align-items: center;
}

section.card-grids .card__inner {
    /* background: #fff; */
    background: #f9ede5;
    position: absolute;
    bottom: 3.75rem;
    right: 1.25rem;
    width: 100%;
    border-radius: 0.625rem;
    padding: 1.875rem 2.188rem;
    display: flex;
    flex-direction: column;
    height: 95%;
    justify-content: center;
    align-items: center;
}

section.card-grids .card__inner .price {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
}

section.card-grids .card__inner .price--number {
    font-size: 3rem;
    font-weight: 600;
}

section.card-grids .card__inner .price--dolar {
    font-size: 1.1rem;
    margin-top: 0.625em;
    font-weight: bold;
}

section.card-grids .card.active .card__outer a {
    color: #000;
}

section.card-grids .card:nth-child(1).active .card__inner svg {
    color: #fe3258;
}

section.card-grids .card:nth-child(1).active .card__inner svg.fa-circle-check {
    color: #46c71e;
}

section.card-grids .card:nth-child(1).active .card__outer {
    background: #ff8c47;
    box-shadow: 5px 18px 13px #d1cccc;
}

section.card-grids .card--red .card__inner h1,
section.card-grids .card--red .card__inner svg,
section.card-grids .card--red .card__outer a {
    color: #d75a1c;
}

@media screen and (max-width: 768px) {
    section.card-grids {
        margin-top: 10px;
    }

    section.card-grids .card {
        width: 18rem;
        cursor: pointer;
    }

    section.card-grids h1 {
        background-size: 10.5rem;
    }

    section.card-grids .card__outer {
        background: #ebecee;
        position: relative;
        min-height: 28rem;
        border-radius: 0.625rem;
        display: flex;
        align-items: flex-end;
        padding: 1.25rem;
        transition: 0.3s ease-in-out;
    }

    section.card-grids .card--red .card__outer {
        min-height: 30rem;
    }
}


/*我的等級 我的錢包*/

.wallet {
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;
    display: flex;
    flex-direction: row;
}

.wallet .main-pic {
    width: 40%;
    height: 100%;
    z-index: 1;
    align-self: end;
}

.wallets.Rimg .wallet .main-pic {
    order: 2;
}

.wallet .f-content {
    display: block;
    position: relative;
    padding: 40px 40px 40px 160px;
    background-color: #fff0f4;
    border-radius: 16px;
    box-sizing: content-box;
}

.wallets.Rimg .wallet .f-content {
    margin: 200px -300px 0 0;
    padding: 40px 300px 40px 200px;
}

.wallet .f-title {
    color: #ff88b0;
    font-size: 3em;
    font-weight: bold;
}

.wallet .f-content p {
    font-size: 1.2rem;
}

.wallet .f-text {
    color: #707070;
    line-height: 32px;
    font-size: 2em;
    text-align: left;
}

@media screen and (max-width: 768px) {
    .wallet {
        display: flex;
        flex-direction: column;
        width: 90vw;
        margin: 0 auto;
        padding: 40px 0 0;
    }

    .wallet .main-pic {
        width: 80%;
        margin: 0 auto;
        z-index: 1;
    }

    .wallets.Rimg .wallet .main-pic {
        order: 0;
    }

    .wallet .f-content,
    .wallets.Rimg .wallet .f-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 60px 15px 40px 15px;
        box-sizing: border-box;
        margin: -100px 0 0 0;
    }

    .wallet .f-title {
        color: #ff369a;
        font-size: 2.8em;
        font-weight: bold;
    }

    .wallet .f-text {
        color: #707070;
        line-height: 1.6em;
        font-size: 1.6em;
        text-align: center;
    }
}


/*錢包列表*/

.wallet-list {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
}

.wallet-list .list-content {
    border-radius: 5px;
    background: #fff;
    padding: 15px 15px 15px 8px;
    margin: 10px 10px 0 0;
    flex: 1 1 30%;
}

.wallets.Rimg .wallet-list .list-content {
    flex: 1 1 100%;
}

.wallet-list.list-content {
    border-radius: 5px;
    background: #fff;
    padding: 15px 15px 15px 8px;
}

.wallet-list .list-top {
    display: flex;
}

.wallet-list .list-content .store-logo {
    width: 120px;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fa6c3e;
    font-size: 24px;
    font-weight: 800;
}

.wallet-list .list-content .store-logo span,
.wallet-list .list-content .store-logo svg,
.wallet-list .list-content .store-logo img {
    width: 80%;
}

.wallet-list .list-content .logo-text-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
    cursor: pointer;
    padding: 10px;
}

.wallet-list .list-content .store-tags {
    display: flex;
}

.wallet-list .list-content p {
    font-size: 15px;
    color: #fa6c3e;
    padding: 0;
    margin: 0;
}

.wallet-list .list-content .use {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

section.wheel-box .wallet-list .list-content .use {
    flex: 1 1 80px;
}

.wallet-list .list-content h5 {
    font-size: 17px;
    font-weight: 500;
    color: #2f2f2f;
    padding: 0;
    margin: 0;
}

@media screen and (max-width: 768px) {
    .wallet-list {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        flex: auto;
    }

    .wallet-list .list-content:not(:last-child) {
        margin-bottom: 15px;
    }

    .wallet-list .list-content {
        margin: 0;
    }
}


/*wheel*/

section.wheel-area {
    margin: 20px 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-weight: 600;
}

section.wheel-area .deal-wheel {
    --size: clamp(250px, 50vmin, 500px);
    --lg-hs: 0 3%;
    --lg-stop: 50%;
    --lg: linear-gradient(hsl(0deg 90.91% 65.33%) 0 var(--lg-stop), hsl(0deg 74.16% 51.24%) var(--lg-stop) 100%);
    position: relative;
    display: grid;
    grid-gap: calc(var(--size) / 20);
    align-items: center;
    grid-template-areas: 'spinner' 'trigger';
    font-family: 'Girassol', sans-serif;
    font-size: calc(var(--size) / 21);
    line-height: 1;
    text-transform: lowercase;
}

@media screen and (max-width: 768px) {
    section.wheel-area .deal-wheel {
        --size: clamp(250px, 80vmin, 700px);
    }
}

section.wheel-area .deal-wheel>* {
    grid-area: spinner;
}

section.wheel-area .deal-wheel .btn-spin {
    grid-area: trigger;
    justify-self: center;
}

section.wheel-area .spinner {
    position: relative;
    display: grid;
    align-items: center;
    grid-template-areas: 'spinner';
    width: var(--size);
    height: var(--size);
    transform: rotate(calc(var(--rotate, 25) * 1deg));
    border-radius: 50%;
    box-shadow: inset 0 0 0 calc(var(--size) / 40) hsl(0deg 0% 0% / 0.06);
}

section.wheel-area .spinner * {
    grid-area: spinner;
}

section.wheel-area .prize {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 calc(var(--size) / 6) 0 calc(var(--size) / 20);
    width: 50%;
    height: 50%;
    transform-origin: center right;
    transform: rotate(var(--rotate));
    user-select: none;
}

section.wheel-area .cap {
    --cap-size: calc(var(--size) / 4);
    position: relative;
    justify-self: center;
    width: var(--cap-size);
    height: var(--cap-size);
}

section.wheel-area .ticker {
    position: relative;
    left: calc(var(--size) / -15);
    width: calc(var(--size) / 10);
    height: calc(var(--size) / 20);
    background: var(--lg);
    z-index: 1;
    clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%);
    transform-origin: center left;
}

section.wheel-area .btn-spin {
    color: hsl(0deg 0% 100%);
    background: var(--lg);
    border: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-transform: inherit;
    padding: 0.9rem 2rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: opacity 200ms ease-out;
}

section.wheel-area .btn-spin:focus {
    outline-offset: 2px;
}

section.wheel-area .btn-spin:active {
    transform: translateY(1px);
}

section.wheel-area .btn-spin:disabled {
    cursor: progress;
    opacity: 0.25;
}


/* Spinning animation */

.is-spinning .spinner {
    transition: transform 8s cubic-bezier(0.1, -0.01, 0, 1);
}

.is-spinning .ticker {
    animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tick {
    40% {
        transform: rotate(-12deg);
    }
}


/* Selected prize animation */

section.wheel-area .prize.selected .text {
    color: white;
    animation: wheel-selected 800ms ease;
}

@keyframes wheel-selected {
    25% {
        transform: scale(1.25);
        text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1);
    }

    40% {
        transform: scale(0.92);
        text-shadow: 0 0 0 hsla(0 0% 0% / 0.2);
    }

    60% {
        transform: scale(1.02);
        text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1);
    }

    75% {
        transform: scale(0.98);
    }

    85% {
        transform: scale(1);
    }
}

section.wheel-box {
    background-color: #fffcf0;
    padding: 50px;
}

section.wheel-box .title {
    color: #ff9a88;
    font-size: 3em;
    font-weight: bold;
    text-align: center;
}

section.wheel-box .txt {
    text-align: center;
    color: #707070;
    line-height: 32px;
    font-size: 1em;
}

section.wheel-box .txt.chance {
    line-height: 15px;
}

.awards-area {
    position: relative;
}

.awards-area .img-res {
    display: block;
    height: auto;
    max-width: 100%;
}

.awards-area .goal-awards .show img.bg {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.awards-area .goal-awards {
    display: none;
    position: fixed;
    top: 8rem;
    width: 100%;
    height: 100vh;
    left: 0;
}

.awards-area .goal-awards .mask {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
}

.goal-awards .show {
    z-index: 100;
}

.goal-img {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    text-align: center;
}

.goal-img img {
    width: 12rem;
    height: 12rem;
    border-radius: 0.1rem;
    margin: 0 auto 0.3rem;
}

.awards-area .goal-awards h2 {
    color: #ff734c;
}

.goal-img p {
    color: #646464;
    border: 1px solid #ff734c;
    padding: 0.5rem;
}

.goal-img a {
    display: block;
    width: 10rem;
    height: 2rem;
    line-height: 2rem;
    background-color: var(--panel-font-color);
    border-radius: 0.86rem;
    text-align: center;
    margin: 0.42rem auto 0;
    color: #fff;
}

.awards-area button.btn-orange {
    background: #ff734c;
    color: white;
    padding: 10px;
    width: 120px;
    font-size: 1rem;
}

.awards-area button.btn-orange:hover {
    background: white;
    border: #ff734c 1px solid;
    color: #ff734c;
}

@media screen and (max-width: 768px) {
    section.wheel-box {
        padding: 20px 10px 30px 10px;
    }

    .awards-area .goal-awards h2 {
        margin-top: 1rem;
    }

    .goal-img img {
        width: 10rem;
        height: 10rem;
    }
}


/* my-order品項圖片大小*/

.awards-img .img-res {
    width: 96px;
    height: 96px;
    object-fit: cover;
    /* 讓圖片保持比例填充而不變形 */
}


/* order-bank上傳圖片大小不被壓縮*/

.upload-wrap .box img {
    max-width: 100%;
    /* 使圖片不超過其容器的寬度 */
    max-height: 100%;
    /* 使圖片不超過其容器的高度 */
    object-fit: contain;
    /* 保持圖片比例，並在需要時加上空白區域 */
}


/* coupon-page */

.discount-name {
    background-color: #de0022;
    /* 橘色背景 */
    color: white;
    /* 白色字 */
    padding: 5px 10px;
    /* 字樣內邊距 */
    border-radius: 5px;
    /* 圓角效果 */
    font-weight: bold;
    /* 粗體字 */
    font-size: 0.8rem;
    /* 字體大小 */
    display: inline-block;
    /* 顯示在同一行 */
    vertical-align: middle;
    /* 垂直對齊 */
}


/* 修改readonly狀態的背景顏色 (無法搜尋的搜尋框)*/

input[readonly] {
    background-color: white !important;
    /* 設定背景色為白色 */
    cursor: not-allowed;
    /* 設定禁止編輯的指標 */
}

.shadow-box {
    border: 1px solid #ccc;
    /* 設定灰色邊框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    /* 可選，圓角效果 */
}

.shadow-box:hover {
    /*padding: 15px 15px 15px 15px;*/
    box-shadow: 10px 15px 30px rgba(0, 0, 0, 0.18);
    color: #a11e1e;
}

.payment-menu .nav-tabs {
    display: flex;
    justify-content: space-evenly;
    /* 平均分配所有的導航項目 */
}

.payment-menu .nav-item {
    flex: 1;
    /* 確保每個項目都佔據相等的寬度 */
    text-align: center;
    /* 使項目內的文字居中對齊 */
}

.payment-menu .nav-link {
    width: 100%;
    /* 讓每個鏈接填滿整個列表項 */
    text-align: center;
    /* 保證文本居中 */
}

.payment-key-icon {
    width: 25px;
}

@media (min-width: 992px) {
    .payment-key-icon {
        width: 40px;
    }
}


/* 倒數計時樣式 */


/********** Theme: red **********/


/* Font styles */

.flipdown.flipdown__theme-red {
    font-family: normal 'Lato';
    font-weight: 700;
}


/* Rotor group headings */

.flipdown.flipdown__theme-red .rotor-group-heading:before {
    font-family: normal 'Lato';
    font-size: 1.5em;
    color: #ffffff;
}


/* Delimeters */

.flipdown.flipdown__theme-red .rotor-group:nth-child(n+2):nth-child(-n+3):before,
.flipdown.flipdown__theme-red .rotor-group:nth-child(n+2):nth-child(-n+3):after {
    background-color: #ffffff;
}


/* Rotor tops */

.flipdown.flipdown__theme-red .rotor,
.flipdown.flipdown__theme-red .rotor-top,
.flipdown.flipdown__theme-red .rotor-leaf-front {
    color: #de4848;
    background-color: #ffffff;
}


/* Rotor bottoms */

.flipdown.flipdown__theme-red .rotor-bottom,
.flipdown.flipdown__theme-red .rotor-leaf-rear {
    color: #de4848;
    background-color: #ffffff;
}


/* Hinge */

.flipdown.flipdown__theme-red .rotor:after {
    border-top: solid 1px #ffffff;
    border-radius: 8px;
    -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
    -moz-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
}


/* 倒數計時樣式 */

.flipdown.flipdown__theme-red .rotor-group-heading:before {
    font-family: normal 'Lato';
    font-size: 1.5em;
    color: #ffffff;
    margin: 10px auto 5px;
}


/* VIP swipper */

#vcard-swiper,
#vip-swiper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}


/* btn-danger */


/* btn-outline-danger */

input[type='checkbox'].btn-check+label.btn-outline-danger {
    background-color: transparent;
    color: #dc3545;
    border-color: #dc3545;
}

input[type='checkbox'].btn-check:checked+label.btn-outline-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}


/* btn-outline-success */

input[type='checkbox'].btn-check+label.btn-outline-success {
    background-color: transparent;
    color: #198754;
    border-color: #198754;
}

input[type='checkbox'].btn-check:checked+label.btn-outline-success {
    background-color: #198754 !important;
    color: #fff !important;
    border-color: #198754 !important;
}

/* btn-outline-dark */

input[type='checkbox'].btn-check+label.btn-outline-dark {
    background-color: transparent;
    color: #000;
    border-color: #000;
}

input[type='checkbox'].btn-check:checked+label.btn-outline-dark {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}



.shadow-director {
    display: inline-block;
    border-radius: 8px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25);
}


/* 行動計劃列表 */

.plan-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.plan-img-wrapper {
    position: relative;
}

.plan-img-wrapper img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.3s ease;
    pointer-events: none;
}

.plan-card:hover img {
    transform: scale(1.05);
}

.level-popover {
    z-index: 10;
}

.plan-card .badge {
    z-index: 10;
}

.one-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* 顯示幾行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.two-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2 !important;
    /* 顯示幾行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 數位卡友的"領取完畢" */

.redeemed-stamp {
    position: absolute;
    bottom: 25px;
    right: 10px;
    width: 80px;
    height: 80px;
    background-color: rgba(220, 53, 69, 0.08);
    /* 淡紅透明底 */
    color: #dc3545;
    border: 3px dashed #dc3545;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(-20deg);
    opacity: 0.9;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.redeemed-btn {
    position: absolute;
    bottom: 0px !important;
    right: 10px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.highlight-underline {
    background: linear-gradient(transparent 60%, rgba(255, 239, 184, 0.8) 60%);
}

.textarea-style {
    overflow-y: scroll;
    /* 強制顯示垂直滾輪 */
}

.textarea-style::-webkit-scrollbar {
    width: 8px;
}

.textarea-style::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.textarea-style::-webkit-scrollbar-track {
    background-color: transparent;
}

.swipe-hint {
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    font-size: 14px;
    color: #888;
    animation: blink 1.5s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.card-size {
    max-width: 600px !important;
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 576px) {
    .card-size {
        max-width: 80%;
    }
}

.height-150 {
    height: 100px !important;
    /* 固定高度 */
    object-fit: contain;
    /* 保持比例，整張圖都看得到 */
}

.shadow-top {
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
}

.bg-opacity1 {
    background-color: rgba(0, 0, 0, 0.4);
}

.level-img {
    max-height: 400px;
    height: auto;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width:765px) {
    .level-img {
        max-height: 300px;
    }
}

.progress-bar.white-striped {
    background-color: #f4f4f4 !important;
    color: #555;
}

.progress-bar.yellow1-striped {
    background-color: #d79f41 !important;
    color: #fff;
}

.btn-glossy {
    position: relative;
    overflow: hidden;
    background: transparent;
    color: white;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-glossy::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 250%;
    height: 300%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.0) 60%);
    transform: rotate(25deg);
    animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) rotate(25deg);
    }

    100% {
        transform: translateX(100%) rotate(25deg);
    }
}

.stamp-pass {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    font-size: 8rem;
    font-weight: bold;
    color: rgba(200, 0, 0, 0.6);
    border: 7px solid rgba(200, 0, 0, 0.7);
    padding: 0.5rem 3rem;
    text-transform: uppercase;
    border-radius: 8px;
    z-index: 10;
    pointer-events: none;
}

@media (max-width:1000px) {
    .stamp-pass {
        font-size: 5rem;
    }
}


/* wallet-transfer */

.exchange-ticker {
    background: #e1ded3;
    color: #fff;
}

.current-rate {
    font-size: 2.2rem;
}

.rate-change {
    font-size: 1rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.voucher-key {
    height: 40px;
    object-fit: contain;
}

.voucher-card {
    height: 20px;
    object-fit: contain;
}

.pulse-animation {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.3;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.pagination-dark .page-link {
    background-color: #fff;
    color: #7c7c7c;
    border-color: #ccc;
}

.pagination-dark .page-link:hover {
    background-color: #343a40;
    color: #fff;
}

.pagination-dark .page-item.active .page-link {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

.v-divider {
    width: 1px;
    height: 20px;
    background: #ccc;
    margin: 0 10px;
}

.no-wrap {
    white-space: nowrap;
}

#scratchToggle {
    font-family: 'Orbitron', monospace;
    font-size: 32px;
    background: #ebdfd1;
    padding: 10px 20px;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}


.txt_important {
    line-height: 1.2;
}


/* 團長商城 */
.group-category {
    background: #f5f5f5;
    border-radius: 50%;
    height: 4rem;
    width: 4rem;
    display: flex;
    /* 使用 Flexbox */
    justify-content: center;
    /* 水平置中 */
    align-items: center;
    /* 垂直置中 */
    color: #ffa100;
    margin: 0 auto;
    /* 添加水平自動 margin */
}

.group-category:hover {
    background: #ffa100;
    color: #fff;
    cursor: pointer;
}

.group-category .text-center {
    display: flex;
    flex-direction: column;
    /* 使內容垂直排列 */
    align-items: center;
    /* 垂直置中 */
}

.group-category-text {
    font-size: 0.85rem;
    padding-top: 5px;
}

.btn-search-group {
    height: 100%;
    width: 100%;
    white-space: nowrap;
    color: #fff;
    border: 0;
    cursor: pointer;
    background: #ffa100;
    transition: all 0.2s ease-out, color 0.2s ease-out;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

@media (max-width: 400px) {
    .group-category-text {
        font-size: 0.75rem;
    }
}

.reciprocalText {
    background-color: #fff;
    color: #000;
    padding: 1px 5px;
    letter-spacing: normal;
    height: auto !important;
    border-radius: 0 1px 1px 0;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.8rem;
    font-family: 'TaipeiSansTCBeta-Regular', 'TaipeiSansTCBeta-Light', '微軟正黑體';
    white-space: nowrap;
}

/* 編輯教學影片的ICON */
.edit-icon {
    background-color: #f8d7da;
    color: #c82333;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;

    animation: pop-bounce 5s cubic-bezier(.34, 1.56, .64, 1) infinite;
}

@keyframes pop-bounce {
    0% {
        transform: scale(1) translateY(0);
    }

    40% {
        transform: scale(1.35) translateY(-4px);
    }

    60% {
        transform: scale(0.95) translateY(1px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

/* 影片swiper */
.video-responsive {
    height: 200px;
    object-fit: contain;
}

@media (min-width: 992px) {
    .video-responsive {
        height: 350px;
    }
}

.video-swiper {
    position: relative;
    overflow: hidden;
}

.video-swiper .swiper-pagination {
    position: absolute;
    width: 100%;
    bottom: 10px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    z-index: 10;
}

.video-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
}

.pic-border {
    width: auto;
    height: 50px;
    object-fit: contain;
    border: 3px solid #e5e5e5;
    padding-right: 10px;
    /* 右邊多一點空間，可調整數值 */
}

.rounded-20 {
    border-radius: 20px;
}

/* 頁籤 */
.pagination .page-link {
    color: #6f42c1;
    border-color: #6f42c1;
}

.pagination .page-link:hover {
    background-color: #6f42c1;
    color: #fff;
    border-color: #6f42c1;
}

.pagination .page-item.active .page-link {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: #fff;
}