html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#wrapper {
    min-height: 100%;
    overflow: hidden;
}

#footer {
    clear: both;
    margin-top: 120px;
}

#footer p {
    margin: 8px 0 8px 0 !important;
}

body {

    font-family: "Microsoft JhengHei", "PMingLiU", "Helvetica Neue", Helvetica, Arial, "Century Gothic", sans-serif !important;
    /* font-family: Open Sans, "Microsoft JhengHei"; */
    overflow-x: hidden;
}

a {
    outline: none;
    text-decoration: none;
}

/* 添加红色 * 的样式 */
label.required::before {
    content: '* ';
    color: red;
}

label.free::before {
    content: '* ';
    color: blue;
}

.memberForm input,
.memberForm select,
.memberForm textarea,
#memberLoginForm input {
    background: #f9f9f9;
    box-shadow: none;
    border-radius: 0;
    border: 1px solid #e3e3e3;
}

#fixedFirstHeader {
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
    width: 100%;
    height: 35px;
    background-color: rgba(239, 132, 104, 1.0);
    padding: 0;
    color: white;
}

#fixedFirstHeader .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#fixedSecondHeader {
    background-color: #fff;
    position: fixed;
    /* box-shadow: 0 5px 30px 5px #E0E0E0; */
    background: url(/assets/uploads/bg_nav.png) 0 0 repeat-x;
    height: 89px;
    width: 100%;
    top: 35px;
    left: 0;
    z-index: 1030;
}

#fixedSecondHeader:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    -webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, .3);
    -moz-box-shadow: 3px 3px 8px rgba(0, 0, 0, .3);
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .3);
}

@media (max-width: 1199px) {
    #fixedSecondHeader {
        height: 70px;
    }
}

@media (max-width: 991px) {
    #fixedSecondHeader {
        height: 65px;
    }
}

#fixedSecondHeader .container {
    height: -webkit-fill-available;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-main-name-text {
    font-size: 16px;
}

.cart-sub-name-text {
    font-size: 12px;
}

.cart-limit-name-text {
    font-size: 10px;
}

.header-icons {
    list-style: none;
    margin: 4px;
    padding: 0;
    display: flex;
}

.header-icons li {
    position: relative;
    float: left;
    padding: 0 13px;
}

.header-icons li:after {
    content: '';
    position: absolute;
    top: 11px;
    right: 0;
    width: 1px;
    height: 10px;
    background: rgba(255, 255, 255, .5);
}

.header-icons a {
    font-size: 20px;
    color: #fff;
    text-decoration: none;
}

.header-icons a:hover {
    color: #ffe747;
}

.main-menu {
    position: relative;
}

.menu-item {
    position: relative;
    display: inline-block;
}

.menu-item a {
    padding: 10px;
    display: inline-block;
    position: relative;
}

.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 2px solid #ee8369;
}

.sub-menu li {
    cursor: pointer;
    display: inline-block;
    /* 讓 <li> 橫向排列 */
    white-space: nowrap;
    /* 防止文字換行 */
    padding: 0px 10px 0px 25px;
    border-bottom: 1px solid rgba(196, 196, 196, .5);
    width: 100%;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.sub-menu li:hover {
    background: rgba(243, 243, 243, 1);
}

.sub-menu li a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    font-size: .95rem;
    color: #383838;
}

.sub-menu>li>a:after {
    content: '';
    position: absolute;
    top: 17px;
    left: -10px;
    display: block;
    width: 6px;
    height: 6px;
    border-right: 2px solid #383838;
    border-bottom: 2px solid #383838;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

#mobileMenu {
    top: 108px;
    z-index: 1001;
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    background-color: #fff;
}


@media (max-width: 1199px) {
    #mobileMenu {
        top: 89px;
    }
}

@media (max-width: 991px) {
    #mobileMenu {
        top: 84px;
    }
}

.mobileSubMenu {
    list-style: none;
    padding: 13px 0 13px 55px;
    border-bottom: 1px solid #a5a5a5;
}

.mobileSubMenu:hover {
    background-color: #b0b0b0;
}

.mobileSubMenu a {
    width: 100%;
    height: 100%;
    color: #000;
    display: block;
    font-size: .95rem;
    line-height: normal;
    text-decoration: none;
}

.mobileSubMenu a::after {
    content: '';
    position: relative;
    /* 使用相對定位 */
    left: -15px;
    top: -13px;
    /* 調整 top 的值以適應你的設計 */
    display: block;
    width: 6px;
    height: 6px;
    border-right: 2px solid #383838;
    border-bottom: 2px solid #383838;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.header_relative_top {
    background-color: #fff;
    position: relative;
    z-index: 999;
}

.header_logo {
    width: 200px;
}

@media (max-width:767px) {
    .header_logo {
        width: 70%;
    }
}

a.logBtn {
    font-weight: bold;
    align-self: center;
    margin-right: 20px;
    font-size: 18px;
    color: #000;
    padding: 10px;
    border: none;
    background-color: transparent;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.logoutBnt {
    cursor: pointer;
    display: inline-block;
    padding-left: 10px;
    color: #ffe747;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.logoutBnt:hover {
    color: #990000;
    text-decoration: none;
}


.logoutPhone {
    font-weight: bold;
    align-self: center;
    margin-right: 20px;
    font-size: 18px;
    color: #000;
    padding: 10px;
    cursor: pointer;
    background-color: transparent;
    display: inline-block;
    padding-left: 10px;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.logoutPhone:hover {
    color: rgba(239, 132, 104, 1.0);
}

.mobile-header-container {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 80%;
}

.mobile-menu-list {
    margin-top: 0;
    padding-left: 0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

#navbarToggler {
    position: fixed;
    top: 7%;
    z-index: 9999;
    background-color: rgb(245, 242, 236);
    height: 100%;
    min-height: 2000px;
    padding: 5% 20px 15px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

@media (max-width:1300px) {
    #navbarToggler {
        padding: 8% 20px 15px 20px;
    }
}

@media (max-width:700px) {
    #navbarToggler {
        padding: 12% 20px 15px 20px;
    }
}

@media (max-width:550px) {
    #navbarToggler {
        padding: 16% 20px 15px 20px;
    }
}

.bannerAbsolute {
    position: relative;
    top: 124px;
}

@media (max-width: 1199px) {
    .bannerAbsolute {
        top: 105px;
    }
}

@media (max-width: 991px) {
    .bannerAbsolute {
        top: 100px;
    }
}

.nav_item_style {
    /* font-weight: bold; */
    align-self: center;
    margin-left: 10px;
    font-size: 19.2px;
    color: #000;
    /* padding: 0 10px 0; */
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.nav_item_style:hover {
    color: #787878 !important;
    text-decoration: none;
}

.nav_item_mb_style {
    padding: 13px 0 13px 30px;
    width: 100%;
}

.nav_item_mb_style.active {
    background-color: #787878;
}

.nav_item_mb_style .nav_item_style {
    display: block;
    width: 100%;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.nav_item_mb_style .nav_item_style:hover {
    color: #fff !important;
}

.nav_item_mb_style.active .nav_item_style {
    color: #fff !important;
}

.navBorderBottom {
    width: 100%;
    border-bottom: 1px solid #afafaf;
}

.fixed_icon_style {
    font-size: -webkit-xxx-large;
    max-width: 50px;
    height: 50px;
}

@media (max-width:767px) {
    .fixed_icon_style {
        max-width: 30px;
        height: 30px;
    }

    .nav_item_style {
        font-size: 16px;
    }
}

.header_fixed_icon {
    left: auto;
    right: 25px;
    bottom: 60px;
}

#fa-instagram-square a {
    color: #DD2A7B;
}

#fa-instagram-square a:hover {
    color: #8134AF;
}

#fa-bag-shopping a {
    color: #ff5a00;
}

#fa-bag-shopping a:hover {
    color: #ef8468;
}

.icon_pointer {
    cursor: pointer;
}

#v-pills-tab-other a {
    color: #fff;
}

#v-pills-tab-other a:hover {
    color: #888787;
}

.footer-company-info h2 {
    font-weight: bold;
}

.footer-company-info a {
    color: #000;
}

.footer-company-info a:hover {
    color: #d35448;
    text-decoration: none;
}

.footer-company-info {
    background-color: #faf5f3;
    padding-bottom: 25px;
    padding-top: 25px;
    box-shadow: 0 5px 30px 5px #E0E0E0;
    font-size: 16px;
}

.footer-copyright {
    background-color: #d35448;
    padding-bottom: 25px;
    padding-top: 25px;
    box-shadow: 0 5px 30px 5px #E0E0E0;
    color: #fff;
    font-size: 14px;
}


.footer-copyright .ig,
.footer-copyright .fb {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

.footer-copyright .ig:hover,
.footer-copyright .fb:hover {
    color: #ffe747;
}

.footerCategoryLinker {
    cursor: pointer;
}

.footerCategoryLinker:hover {
    color: #d35448 !important;
    text-decoration: none;
}

.transitionAnimation {
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

/* #cart-qty {
    color: #BE2633;
    position: absolute;
    top: -30px;
    right: 5px;
    background: #D1D1D1;
    border-radius: 50px;
    width: 23px;
    height: 23px;
    text-align: center;
} */

#security-qty,
#cart-qty {
    font-size: 12px;
    color: #BE2633;
    position: absolute;
    top: -2px;
    right: 2px;
    width: 15px;
    background: #D1D1D1;
    border-radius: 50px;
    text-align: center;
    opacity: 0.8;
}

.full-toast-container {
    z-index: 999999;
    position: fixed;
    top: 20px;
    right: 20px;
}

.full-toast {
    max-width: 100% !important;
    color: white;
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 18px;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.4s, transform 0.4s;
}

.full-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.full-toast.hide {
    opacity: 0;
    transform: translateY(100px);
}

/* 成功的背景色 (綠色) */
.toast-success {
    background-color: #28a745;
}

/* 警告背景色 (紅色) */
.toast-warning {
    background-color: #ff3707;
}

#emailConfirmModel .modal-content,
#phoneConfirmModel .modal-content {
    top: 15rem;
}

.confirm_info {
    font-size: 18px;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .top_logo_style {
        position: relative;
        transform: none;
        left: -10px;
        top: 0;
    }
}

@media (max-width: 767px) {
    .navbar-toggler {
        padding: 0.45rem 0.75rem;
        left: 0px;
        top: 5px;
        position: relative;
    }

    .m_padding {
        padding: 0px !important;
    }

    .top_logo_style {
        position: relative;
        transform: none;
        left: -35%;
        top: 0;
    }

    .m_hr_border {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .header_fixed_icon {
        right: 9px;
    }

    .confirm_info {
        font-size: 16px !important;
    }
}

.active .page_link {
    color: #ffffff;
    background-color: #d35448;
}

.breadcrumb {
    display: flex;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    border-radius: 0.25rem;
    background-color: #fff;
    position: relative;
}

.breadcrumb li {
    margin: 0 10px;
}

.breadcrumb .search {
    color: rgba(211, 84, 72, 0.5);
    width: 100%;
    height: 40px;
    padding-left: 20px;
    border-color: rgba(211, 84, 72, 0.5);
    border-radius: 5px;
    box-sizing: border-box;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.breadcrumb .search:focus {
    outline: none;
    box-shadow: rgba(211, 84, 72, 0.5) 0px 3px 8px;
    border-color: rgba(211, 84, 72, 1);
}

.breadcrumb .search::placeholder {
    color: rgba(211, 84, 72, 0.5);
}

/* 初始時 nav 是關閉的狀態 */
.section-sidesearch {
    position: absolute;
    top: -100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    /* 將 nav 隱藏在畫面左側 */
}

/* 當 isNavOpen 為 true（即 nav 是打開的狀態）時，將其顯示在畫面中間 */
.section-sidesearch.search-open {
    position: relative;
    left: 0;
    opacity: 1;
    visibility: visible;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    /* 添加過渡效果 */
    transform: translateY(0);
}

.sectionRejust {
    padding-top: 25px;
    padding-bottom: 25px;
    margin-top: 120px;
}

.sectionRejust .container {
    padding-left: 0;
    padding-right: 0;
}

.searchIcon {
    right: 16px;
    width: 60px;
    height: 40px;
    padding: 7px;
    border: 2px solid;
    text-align: center;
    position: absolute;
    border-radius: 5px;
    color: rgba(211, 84, 72, 0.5);
}

.clear-search {
    position: absolute;
    right: 90px;
    top: 20px;
    cursor: pointer;
    color: rgba(211, 84, 72, 0.5);
}

.clear-search:hover {
    cursor: pointer;
    /* 懸停時顯示手型游標 */
    color: rgba(211, 84, 72, 1);
}

@media (max-width:991px) {
    .productRightPadding {
        padding-right: 5px;
    }

    .productLeftPadding {
        padding-left: 5px;
    }
}

.product_view_style_out a {
    color: #4e555d;
    font-size: 0.9375rem;
    line-height: 20px;
    margin-top: 10px;
}

.product_view_style_out a:hover span {
    cursor: pointer;
    /* 懸停時顯示手型游標 */
    text-decoration: none;
    color: #e30020;
}

.product_view_style_out .product_name {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 10px 30px 10px;
    font-size: 14px;
}

.productTrigger {
    position: relative;
    text-decoration: none !important;
}

.productTrigger .productImg {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}

.productTrigger img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
    /* 添加過渡效果 */
}

.productTrigger:hover img {
    filter: brightness(0.5);
    /* 滑鼠懸停時降低亮度（變暗） */
}

.productTrigger:after {
    content: '';
    position: absolute;
    top: 37%;
    left: 50%;
    display: block;
    cursor: pointer;
    width: 70px;
    height: 70px;
    background: url(/assets/uploads/ic_listmask.png) no-repeat;
    background-size: 70px 70px;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: all .3s ease-in-out;
    z-index: 10;
}

.productTrigger:hover:after {
    transform: translate(-50%, -50%) rotate(360deg);
    opacity: 1;
}

.select_product {
    width: 50%;
    line-height: 1.8;
    padding: 0;
}

.product_img_style {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ddd;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
    #product_index {
        padding: 0px 30px 0px 30px;
    }
}

.pagination {
    margin-top: 30px;
    text-align: center;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem rem;
    display: block;
}

@media (max-width: 767px) {
    .pagination {
        font-size: 12px;
    }
}

.pagination li {
    display: inline-block;
    margin-right: 5px;
    /* 設定按鈕之間的間距，可根據需求調整 */
}

.page_link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #d35448;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.page_link:hover {
    cursor: pointer;
    /* 懸停時顯示手型游標 */
    z-index: 2;
    color: #fff;
    text-decoration: none;
    background-color: #d35448;
    border-color: #dee2e6;
}

.page_link:focus {
    z-index: 2;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(211, 84, 30, .25);
}

.page-item.disabled .page_link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dee2e6;
}

.page-item:first-child .page_link {
    margin-left: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page_link {
    margin-left: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.section-contents {
    overflow-x: hidden;
}

.section-contents h1,
.section-contents-one h1 {
    height: 40px;
    font-size: 22px;
    line-height: 40px;
    border-bottom: 2px solid #ddd;
    padding: 0;
    margin: 0 0 20px 0;
}

.section-contents h1 span,
.section-contents-one h1 span {
    display: inline-block;
    height: 40px;
    color: #d35448;
    border-bottom: 2px solid #d35448;
    padding: 0 15px;
}

.section-sidemenu {
    margin-right: 20px;
    margin-bottom: 50px;
    float: left;
    width: 20%;
    /* 使兩者佔據 wrapper 的一點寬度，可以根據實際情況調整 */
}

.section-contents {
    float: left;
    width: 78%;
    /* 使兩者佔據 wrapper 的一點寬度，可以根據實際情況調整 */
}

#menu-btn {
    display: none;
}

#menu-btn h1 {
    width: 100%;
    height: 42px;
    font-size: 18px;
    color: #fff;
    letter-spacing: 3px;
    line-height: 42px;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    /* padding: 0 10px 0 20px;
    margin: 40px 0 0 0; */
    background: linear-gradient(to bottom, rgba(239, 132, 104, 1) 0%, rgba(211, 84, 72, 1) 100%);
}

@media (min-width: 2300px) {
    .right-content {
        margin-top: 100px;
    }
}

@media (max-width: 1412px) {

    /* 初始時 nav 是關閉的狀態 */
    .section-sidemenu {
        position: absolute;
        left: -100%;
        opacity: 0;
        visibility: hidden;
        width: 100%;
        margin: 0;
        /* 樣式 */
        transform: translateX(-100%);
        /* 將 nav 隱藏在畫面左側 */
    }

    /* 當 isNavOpen 為 true（即 nav 是打開的狀態）時，將其顯示在畫面中間 */
    .section-sidemenu.nav-open {
        padding-bottom: 20px;
        position: relative;
        left: 0;
        opacity: 1;
        visibility: visible;
        transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        /* 添加過渡效果 */
        transform: translateX(0);
    }

    .section-contents {
        width: 100%;
    }

    #menu-btn {
        /* border-radius: 5px; */
        text-align: center;
        width: 100%;
        /* border: 1px solid;
        padding: 5px; */
        display: block;
        transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
    }

    #menu-btn:hover {
        cursor: pointer;
    }

    /* .searchContainer {
        display: flex;
        justify-content: space-between;
        align-items: center;
    } */

    .left-content {
        margin: 0px 0px 20px 0px;
    }

    .right-content {
        width: 100%;
        display: flex;
        align-items: center;
        /* 如果需要給右邊內容添加樣式 */
    }

    /* 主NAV */
    .header-main-nav.d-none,
    .header-main-nav.d-md-none,
    .header-main-nav.d-lg-block,
    .header-main-nav.d-xl-block {
        display: none !important;
    }

    .header-main-nav.d-block,
    .header-main-nav.d-md-block,
    .header-main-nav.d-lg-none,
    .header-main-nav.d-xl-none {
        display: block !important;
    }

    .navbar-expand-lg .navbar-toggler {
        display: block !important;
    }
}

.productsFlexPreview {
    display: flex;
}

.product_view_style_in {
    height: 94%;
    position: relative;
    overflow: hidden;
    padding-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #eaeaea;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.product_view_style_in:hover {
    cursor: pointer;
}

.category_btn {
    text-decoration: none;
    height: 44px;
    white-space: nowrap;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    width: 100%;
    border: none;
    background: none;
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    color: #000000;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.category_btn.active,
.category_btn:hover,
.category_btn:checked {
    cursor: pointer;
    /* 懸停時顯示手型游標 */
    background-color: #d35448;
    box-shadow: rgba(211, 84, 72, 0.5) 0px 3px 8px;
    color: #fff;
    text-decoration: none;
}

.paddingFixTop {
    padding: 30px;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.section-sidemenu h1 {
    width: 100%;
    letter-spacing: 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 3px;
    overflow: hidden;
}

.section-sidemenu h1,
.section-sidemenu-one h1 {
    height: 40px;
    font-size: 22px;
    line-height: 40px;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, #d35448, #ebabab 50%, #ebabab 50%, #d35448);
    border-image-slice: 1;
    padding: 0;
    margin: 0 0 20px 0;
}

.section-sidemenu h1 span,
.section-sidemenu-one h1 span {
    /* color: #d35448; */
    padding: 0 15px;
}

.pagination_bottom {
    font-size: 14px;
    margin-bottom: 50px;
}

.menu-main {
    list-style: none;
    min-height: 42px;
    line-height: 20px;
    color: #000;
    background-position: left 10px top 10px;
    padding: 0;
}

.menu-main li {
    border-bottom: 1px solid rgba(84, 110, 122, .35);
}

.menu-sub {
    list-style: none;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.menu-sub li {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1)
}

.menu-sub-enter-active,
.menu-sub-leave-active {
    transition: opacity 0.3s;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.menu-sub-enter,
.menu-sub-leave-to {
    opacity: 0;
}

.price {
    color: #e30020;
    text-align: left;
    margin: 10px 0 0 0;
    font-size: 16px;
}

.post_img {
    width: 100%;
    height: auto;
}

.font_color {
    font-size: .9375rem;
    line-height: 20px;
    color: black;
}

.font_color:hover {
    cursor: pointer;
    /* 懸停時顯示手型游標 */
    color: #e07f55;
    text-decoration: none;
}

.touch_effect {
    height: 94%;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: #fff;
    /* margin-top: 30px; */
    margin-bottom: 30px;
    position: relative;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.touch_effect:hover {
    cursor: pointer;
    filter: brightness(0.8);
    /* 懸停時顯示手型游標 */
    /* transform: scale(1.05); */
    /* -webkit-box-shadow: 0 10px 50px 0 rgba(84, 110, 122, .35);
    box-shadow: 0 10px 50px 0 rgba(84, 110, 122, .35) */
}

.postImg {
    /* object-fit: cover; */
    border: 1px solid #ddd;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.postText {
    padding: 0 15px 15px 15px;
}

.postTitle {
    margin: 0;
    font-size: .9375rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* -webkit-box-orient: vertical; */
    overflow: hidden;
    text-overflow: ellipsis;
}

.product_description img {
    width: 100%;
    max-width: 900px;
    height: 100%;
}

.qty {
    width: 40px;
    height: 35px;
    text-align: center;
    border: 0;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
}

input.qtyplus {
    width: 25px;
    height: 35px;
    border: 1px solid #aaa;
    background: #f8f8f8;
}

input.qtyminus {
    width: 25px;
    height: 35px;
    border: 1px solid #aaa;
    background: #f8f8f8;
}

.button_border_style_l {
    border: 1px solid #B5ACA5;
    padding: 0px 5px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    color: #524535;
    background: #fff;
}

.button_border_style_r {
    border: 1px solid #B5ACA5;
    padding: 0px 5px 0px 5px;
    border-radius: 0px 5px 5px 0px;
    color: #C52B29;
    background: #fff;
}

.input_border_style {
    background-color: #fff !important;
    border-top: 1px solid #B5ACA5;
    border-bottom: 1px solid #B5ACA5;
    border-left: none;
    border-right: none;
    padding: 0px;
    height: 26px;
    text-align: center;
}

.qtyInputBox {
    border-radius: 0;
    width: 50px;
}

.cartProductTitle {
    font-size: 16px;
    font-weight: bold;
}

@media (max-width: 767.98px) {
    .input_border_style {
        height: 22px;
    }

    .productViewCombine .input_border_style {
        height: 26px;
    }

    .input-group-btn {
        font-size: 10px;
    }

    .button_border_style_l,
    .button_border_style_r {
        width: 25px;
        height: 22px;
        font-size: 10px;
    }

    .productViewCombine .button_border_style_l,
    .productViewCombine .button_border_style_r {
        height: 26px;
        font-size: 14px;
    }

    .qtyInputBox {
        width: 30px;
        height: 22px;
        font-size: 12px;
    }

    .cartProductTitle {
        font-size: 14px;
    }
}

.inlineBlock {
    display: inline-block !important;
}

.product_view_img_style {
    border-radius: 15px;
    max-width: 300px;
    max-height: 300px;
    width: 100%;
}

.productDetail {
    padding: 20px;
}

@media (max-width: 767px) {
    .productDetail {
        padding: 0;
    }
}

.resetBox {
    border: 1px solid #c8c8c8;
    margin: 50px 0;
    padding: 150px 50px;
    background-color: #efefef;
}

#postApp {
    overflow-x: hidden;
}

#productApp {
    position: relative;
    overflow-x: hidden;
}

.postDetailStyle {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 1031;
    /* background-color: #fff; */
    background-color: #fff7eb;
    border: 1px solid rgba(84, 110, 122, .35);
    margin: 5% 15%;
}

@media (max-width:767px) {
    .postDetailStyle {
        margin: 0;
    }
}

.returnBtn {
    z-index: 1032;
    position: fixed;
    top: 50px;
    left: 50px;
    border-radius: 5px;
    text-align: center;
    width: 35px;
    padding: 5px 10px 5px 10px;
    color: #007bff8a;
    background-color: #ffffff8a;
    border: 1px solid #007bff8a;
    cursor: pointer;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.returnBtn:hover {
    cursor: pointer;
    color: #fff;
    background-color: #007bff;
}

.scrollToDetailTop {
    position: sticky;
    bottom: 20px;
    left: 96%;
    margin: 20px;
    padding: 10px 14px;
    color: #007bff8a;
    background-color: #ffffff8a;
    border: 1px solid #007bff8a;
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    /* Initial opacity */
}

.scrollToDetailTop:hover {
    cursor: pointer;
    /* 懸停時顯示手型游標 */
    color: #fff;
    background-color: #007bff;
}

#combineSelect.cargoBtn {
    display: block;
    width: 100%;
    height: 36px;
    color: #484f53;
    font-size: 0.875rem;
    border: 1px solid #aaa;
    border-left: none;
    border-right: none;
    background-color: transparent;
    background-image: url(/assets/images/partnertoys/ic_sizeselect.png);
    background-size: 20px 5px;
    background-repeat: no-repeat;
    background-position: right center;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    outline: none;
    padding: 0;
}

.cargoTitle {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 10px;
}

@media (max-width:767px) {
    .scrollToDetailTop {
        bottom: 15px;
        right: 20px;
    }

    .cargoTitle {
        margin-top: 30px;
    }
}

.cargoBtn {
    font-size: 14px;
    margin: 10px 0;
    text-align: center;
}

.cargoText {
    color: #e30020;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 10px;
}

.cargoText .paddingFixTop {
    font-size: 18px;
}

.cargoDetail {
    color: rgb(72, 79, 83);
    font-size: 14px;
    margin-bottom: 10px;
}

.cargoCountBtn {
    cursor: pointer;
    padding: 5px;
    color: #007bff7f;
    background-color: #fff;
    border: 1px solid #007bff7f;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.cargoCountBtn:hover {
    color: #fff;
    cursor: pointer;
    /* 懸停時顯示手型游標 */
    text-decoration: none;
    background-color: #007bff7f;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

.cargoCountText {
    width: 100%;
    display: inline-block;
    /* 設定為行內塊狀元素，使其寬度生效 */
    padding: 5px;
    border-radius: 0;
    color: #007bff7f;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #007bff7f;
    border-right: 0px;
    border-left: 0px;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.cargoCountText:focus {
    outline: none;
    border: 1px solid #007bff7f;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

.cartBtn {
    background-color: #ffae00;
    border: 1px solid #ffae00;
}

.cartBtn:hover {
    cursor: pointer;
    /* 懸停時顯示手型游標 */
    background-color: #ffcc00;
    box-shadow: 0 0 20px #eba10071;
}

.buyBtn {
    background-color: #337ab7;
    border: 1px solid #337ab7;
}

.buyBtn:hover {
    cursor: pointer;
    /* 懸停時顯示手型游標 */
    background-color: #0088ff;
    box-shadow: 0 0 20px rgba(9, 128, 213, 0.503)
}

.likeBtn {
    background-color: #f53651;
    border: 1px solid #f53651;
}

.likeBtn:hover {
    cursor: pointer;
    /* 懸停時顯示手型游標 */
    background-color: #ff0022;
    box-shadow: 0 0 20px rgba(213, 9, 9, 0.503)
}

.explainBtn {
    background-color: #3d3d3d;
    border: 1px solid #3d3d3d;
}

.explainBtn:hover {
    cursor: pointer;
    /* 懸停時顯示手型游標 */
    background-color: #1a1a1a;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.503)
}

.cargoClick {
    width: 100%;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    border: 1px solid;
    display: inline-block;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.cargoDescription {
    margin: 80px 0px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.cargoIntroDate {
    /* margin: 40px 5px 10px 5px; */
    background-color: #d35549;
    color: #ffffff;
    padding: 5px 5px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 2px;
}

.cargoDescription img {
    height: auto !important;
    max-width: 100% !important;
}

.cargosYearStyle img {
    max-width: 100% !important;
    height: auto !important;
}

.cargoContent img {
    max-width: 100% !important;
    height: auto !important;
}

.artistContent img {
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 1300px) {
    .cargoDescription {
        margin: 80px 0;
    }
}

@media (max-width: 767px) {
    .cargoDescription {
        margin: 0;
    }
}

.postContentStyle img {
    height: auto !important;
    max-width: 100% !important;
}

.newsText {
    font-size: 18px;
}

.link_href {
    text-align: center;
    font-family: "思源黑體", "Noto Sans T Chinese", "微軟正黑體";
}

.link_href a {
    text-decoration: none;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

/* @media (max-width:767px) {
    .link_href {
        font-size: 12px;
    }
} */

#phone_href {
    color: #46c12e;
}

#phone_href:hover {
    color: #32971d;
}

#email_href {
    color: #a16bcc;
}

#email_href:hover {
    color: #773ba8;
}

.contentMarginBottom {
    margin-bottom: 100px;
}

#aboutImg {
    height: auto;
    width: 500px;
}

@media (max-width:767px) {
    #aboutImg {
        width: 100%;
    }
}

.self-security-cancel-btn {
    background-color: #000;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
}

.self-security-cancel-btn:hover {
    text-decoration: none;
    color: white;
    background-color: #ccc;
}

.security-btn-box {
    display: flex;
    justify-content: space-around;
}

.self-security-resend-btn {
    background-color: #6c757d;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
}

.self-security-resend-btn.disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.self-security-form-container {
    padding: 30px;
    margin: 100px 0;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.self-security-header {
    text-align: center;
    margin-bottom: 20px;
}

#memberLoginForm {
    /* border: 8px solid #efefef; */
    box-shadow: 6px 6px 20px grey;
    padding: 30px;
    margin: 50px 40px 60px 40px;
    /* margin: 50px 10px 60px 10px; */
}

.memberForm {
    /* border: 8px solid #efefef; */
    box-shadow: 6px 6px 20px grey;
    padding: 30px 100px;
    margin: 50px 40px 60px 40px;
    /* margin: 50px 10px 60px 10px; */
}

.memberContactUs {
    /* border: 8px solid #efefef; */
    min-height: 540px;
    box-shadow: 6px 6px 20px grey;
    padding: 30px 100px;
    margin: 50px 40px 60px 40px;
    /* margin: 50px 10px 60px 10px; */
}

.memberForm #birthday {
    padding: .375rem .75rem;
}

@media (max-width:767px) {
    .memberContactUs {
        box-shadow: none;
        padding: 10px 0;
    }

    .memberForm {
        box-shadow: none;
        padding: 10px 0;
        margin: 0;
    }

    #memberLoginForm {
        box-shadow: none;
        padding: 10px 0;
        margin: 0;
    }

    .security-btn-box {
        flex-direction: column;
    }
}

.memberTitleLogin {
    font-weight: bold;
    color: #e62626;
}

.memberTitleChinese {
    font-weight: bold;
    padding: 10px;
    margin: 0 0 30px 0;
}

.memberTitleMember {
    font-family: "思源黑體", "Noto Sans T Chinese", "微軟正黑體";
    font-size: 28px;
    color: #ff6b6b;
}

.mfpPageTitle {
    font-family: 'Brush Script MT', cursive;
    font-size: 28px;
    color: #ff6b6b;
}

@media (max-width:500px) {
    .input-group-prepend .input-group-text {
        font-size: 12px;
    }

    .input-group-prepend input {
        font-size: 12px;
    }

    .memberTitleMember {
        font-size: 20px;
    }

    .mfpPageTitle {
        font-size: 20px;
    }
}

.separator {
    border-left: 1px solid rgb(221, 221, 221);
}

@media (max-width:767px) {
    .separator {
        padding-top: 20px;
        border-left: none;
        border-top: 1px solid rgb(221, 221, 221);
    }
}

#separatorBottom {
    border-bottom: 3px double rgb(221, 221, 221);
}

#formBtnStyle {
    padding: 10px;
}

#loginBtn {
    border: none;
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    background: #e30020;
    padding: 8px 20px;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

#loginBtn:hover {
    text-decoration: none;
    background: #ff3333;
}

#eraseBtn {
    border: none;
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    background: #333;
    padding: 8px 20px;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

#eraseBtn:hover {
    text-decoration: none;
    background: rgba(0, 0, 0);
}

#memberTxt {
    font-size: 12px;
}

#memberTitle {
    font-size: 16px;
    font-weight: bold;
}

#addMember {
    margin: 20px;
}

#addMemberBtn {
    color: #ddd;
    font-size: 1em;
    font-weight: bold;
    background: #666;
    padding: 8px 20px;
    margin: 20px auto 0;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

#addMemberBtn:hover {
    cursor: pointer;
    text-decoration: none;
    background: #000;
}

#forgotBtn {
    color: #007bff;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

#forgotBtn:hover {
    cursor: pointer;
    color: #00c3ff;
    text-decoration: none;
}

#joinBtn,
#editBtn,
#changeBtn,
#forgotSendBtn,
#contactSendBtn {
    border: none;
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    background: #e30020;
    padding: 8px 80px;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

#joinBtn:hover,
#editBtn:hover,
#changeBtn:hover,
#forgotSendBtn:hover,
#contactSendBtn:hover {
    text-decoration: none;
    cursor: pointer;
    background: #ff3333;
}

#contactEraseBtn {
    border: none;
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    background: #333;
    padding: 8px 80px;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

#contactEraseBtn:hover {
    text-decoration: none;
    cursor: pointer;
    background: #000000;
}

@media (max-width:1522px) {

    #contactSendBtn,
    #contactEraseBtn {
        padding: 8px 20px;
    }
}

@media (max-width:576px) {

    #joinBtn,
    #editBtn,
    #changeBtn,
    #forgotSendBtn {
        padding: 8px 30px;
    }

    #contactSendBtn,
    #contactEraseBtn {
        padding: 8px 15px;
    }
}

.alert {
    margin-bottom: 50px;
}

#orderListHeader {
    font-size: 14px;
    font-weight: bold;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #f9f9f9;
}

#memberOrderList {
    min-height: 540px;
    box-shadow: 6px 6px 20px grey;
    padding: 80px 60px;
    margin: 50px 30px 60px 30px;
}

#memberOrderList .nav-link {
    color: #000;
    background: #fff;
    border-color: #dee2e6 #dee2e6 #dee2e6;
}

#memberOrderList .nav-link:hover,
#memberOrderList .nav-link.active {
    color: #fff;
    background: #c8c8c8;
    border-color: #dee2e6 #dee2e6 #c8c8c8;
}

@media (max-width:767px) {
    #memberOrderList {
        box-shadow: none;
        padding: 10px 0 60px 0;
        margin: 0;
    }
}

.orderInformation {
    color: #000;
}

.orderInformation:hover {
    color: #000;
    text-decoration: none;
}

.orderInformation .moblieCouponView {
    padding: 5px;
    margin: 20px 10px;
    border-radius: 5px;
    border: 1px solid #000;
}

.orderInformation li {
    font-size: 14px;
    margin-top: 30px;
    border: 1px solid #e3e3e3;
    background-color: #f9f9f9;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.orderInformation li:hover {
    cursor: pointer;
    text-decoration: none;
    background-color: #bfbfbf7f !important;
}

.checkoutLastNumber {
    font-size: 22px;
}

.orderNumber {
    color: #e30020;
}

.selectedOrderHeader {
    margin-right: 20px;
}

.selectedOrderHeaderBox {
    text-align: left;
    border: 1px solid #e1e1e1;
    padding: 10px 20px;
    margin: 10px 0;
}

.memberOrderContent {
    /* box-shadow: 6px 6px 20px grey; */
    /* padding: 30px 30px; */
    margin: 50px 0 60px 0;
}

.orderContentHeader {
    background-color: #868686;
    width: 100%;
    height: 40px;
    color: #fff;
    font-size: 17px;
    letter-spacing: 2px;
    line-height: 40px;
    border-radius: 3px;
    padding-left: 20px
}

.noneOrder {
    width: 100%;
    font-size: 15px;
    color: #DC0003;
    text-align: center;
    border: 1px solid #ccc;
    padding: 40px;
    margin: 0 auto 50px;
}

@media (max-width:767px) {
    .noneOrder {
        padding: 20px;
    }
}

.selectedOrderList {
    border-bottom: 1px solid #ddd;
    font-size: 14px;
}

.computeTable {
    text-align: right;
    padding: 20px 0px;
    margin: 60px auto;
    border: 8px solid #efefef;
}

.policy_outer_box {
    margin-top: 150px;
}

.tableOut {
    height: auto;
    width: 100%;
}

.tableOut tbody tr th {
    padding: 10px;
}

.partitionLine {
    border-top: 1px dotted #ccc;
}

.alignItemEnd {
    align-items: end;
}

.alignItemBaseLine {
    align-items: baseline;
}

.alignItemBaseLine label {
    text-align: start;
    /* margin-right: 20px; */
    flex: 0 0 100%;
    max-width: 100%;
}

/* @media (max-width:767px) {
    .alignItemBaseLine label {
        flex: 0 0 100%;
        max-width: 100%;
    }
} */

#FBgraph {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin: 20px;
    padding: 20px;
    color: #fff;
    background-color: #0866ff;
    border: 1px solid #0866ff;
    border-radius: 10px;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

@media (max-width:1000px) {
    #FBgraph {
        font-size: 18px;
    }
}

@media (max-width:450px) {
    #FBgraph {
        font-size: 14px;
    }
}

#FBgraph:hover {
    cursor: pointer;
    box-shadow: 1px 1px 10px #0088ff;
}

#FBLoginPosition {
    margin-top: 50px;
}

.orderMarginBottom {
    margin-bottom: 50px;
    font-size: 10pt;
}

.orderDetailButton {
    margin-bottom: 40px;
}

#allReadingButton {
    margin-top: 40px;
}

.orderDetailButton .orderBtn {
    margin-right: 10px;
    padding: 10px;
    cursor: pointer;
    color: #d35448;
    background-color: #fff;
    border: 1px solid #d35448;
    border-radius: 3px;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.orderDetailButton .orderBtn:hover {
    color: #fff;
    background-color: #d35448;
}

.operateBtn {
    margin: 40px 0;
    text-align: center;
}

#completePay {
    border: none;
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    background: #e30020;
    padding: 8px 80px;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

#completePay:hover {
    text-decoration: none;
    cursor: pointer;
    background: #ff3333;
}

#cancelOrder {
    border: none;
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    background: #333;
    padding: 8px 80px;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

#cancelOrder:hover {
    text-decoration: none;
    cursor: pointer;
    background: #000;
}

@media (max-width:600px) {

    #completePay,
    #cancelOrder {
        padding: 8px 20px;
    }
}

.p-relative {
    position: relative !important;
}

.p-absolute {
    position: absolute !important;
}

.p-top-0 {
    top: 0 !important;
}

.p-left-0 {
    left: 0 !important;
}

.p-right-0 {
    right: 0 !important;
}

.p-bottom-0 {
    bottom: 0 !important;
}

.order-info-toggle {
    position: absolute;
    cursor: pointer;
    right: 15px;
}

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

.change-payment-select {
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.change-payment-btn {
    margin-left: 15px;
}

.adjustPositionOfConfirmBtn {
    align-content: center;
    cursor: pointer;
    height: 56%;
    max-width: 100%;
    overflow: hidden;
    position: absolute;
    top: 30.5px;
    /* right: 15px; */
    right: 0px;
    border: 1px solid;
    padding: 0 5px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}


.security-red-content {
    color: #de6e6e !important;
}

.security-green-content {
    color: #8de498 !important;
}

.security-confirm-lable {
    margin-bottom: auto;
}

.security-option-title {
    font-size: 24px;
    font-weight: bolder;
}


.security-group-box,
.security-confirm-group-box {
    display: flex;
    align-items: center;
}

.securityConfirmBtn,
.securityEnableOpenBtn {
    background-color: #8de498;
}

.securityEnableCloseBtn {
    background-color: #de6e6e;
}

.securityConfirmBtn:hover,
.securityEnableOpenBtn:hover,
.securityEnableCloseBtn:hover {
    filter: brightness(0.8);
}

.securityConfirmBtn,
.securityEnableOpenBtn,
.securityEnableCloseBtn {
    color: #fff;
    align-content: center;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    position: absolute;
    right: 15px;
    padding: 0 30px;
    border: 1px solid #999999;
    border-radius: 4px;
}

#randomCheckcode {
    align-content: center;
    cursor: pointer;
    height: 56%;
    max-width: 100%;
    overflow: hidden;
    position: absolute;
    top: 30.5px;
    right: 0px;
    border: 1px solid;
    padding: 0 5px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#randomCheckcode:hover {
    text-decoration: none;
}

#randomCheckcode.disabled-overlay {
    cursor: none;
    pointer-events: none;
    /* 禁用鼠标事件 */
}

#randomCheckcode.disabled-overlay::after {
    cursor: none;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明背景 */
    z-index: 1;
    /* 确保覆盖在链接之上 */
}

#randomCheckcodeContact {
    cursor: pointer;
    height: 55%;
    max-width: 100%;
    overflow: hidden;
    position: absolute;
    top: 30.5px;
    right: 15px;
}

.tab.reset {
    list-style: none;
    font-size: 16px;
    text-align: left;
    border-bottom: 1px solid #ccc;
    padding-left: 10px;
}

.tab.reset .current {
    display: inline-block;
    vertical-align: top;
    margin-right: 2px;
}

.tab.reset span {
    color: #fff;
    text-decoration: none;
    border-top-color: #333;
    border-left-color: #333;
    border-right-color: #333;
    background-color: #333;
    cursor: default;
    position: relative;
    display: block;
    height: 40px;
    font-size: 1rem;
    line-height: 26px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid;
    border-bottom: none;
    padding: 7px 50px;
}

#termsOfMessage {
    top: 5%;
    bottom: 5%;
}

#termsOfMembership {
    top: 20px;
    bottom: 20px;
}

#termsOfMessage,
#termsOfMembership {
    font-size: 14px;
    position: fixed;
    width: 1000px;
    height: auto;
    background: #fff;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid #efefef;
    box-sizing: border-box;
    padding: 50px;
    overflow: hidden;
    /* 防止内容被滚动条遮挡 */
}

#termsOfMessage textarea {
    resize: none;
    height: 150px;
}

.membershipContent {
    max-height: calc(100% - 160px);
    max-width: 100%;
    color: #333;
    line-height: 2em;
    text-align: justify;
    margin: 20px 0 10px;
    overflow-y: auto;
    box-sizing: border-box;
    padding-right: 15px;
}

@media (max-width: 600px) {

    #termsOfMessage,
    #termsOfMembership {
        padding: 50px 15px 15px 15px;
    }
}

@media (max-width: 767px) {
    .adjustPositionOfConfirmBtn {
        top: auto;
        right: auto;
        height: auto;
        margin-top: 20px;
        padding: 5px 10px;
        border-radius: 5px;
        position: relative;
    }

    .security-confirm-group-box {
        display: block;
    }

    .securityConfirmBtn,
    .securityEnableOpenBtn,
    .securityEnableCloseBtn {
        padding: 0px 15px;
    }

    .securityConfirmBtn {
        display: block;
        position: relative;
        margin-top: 5px;
        margin-left: 15px;
    }

    .change-payment-box {
        align-items: center;
        flex-direction: column;
    }

    .change-payment-btn {
        margin-top: 15px;
        margin-left: 0;
    }
}

@media (max-width: 1100px) {

    #termsOfMessage,
    #termsOfMembership {
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
    }

    .membershipContent {
        margin: 20px auto 10px;
    }
}

.membershipLine {
    width: 100%;
    height: auto;
    line-height: 20px;
    background: url(/assets/uploads/line_repeat_x.png) repeat-x 0 top;
    overflow: hidden;
    padding-top: 20px;
}

.mfpMember {
    color: #e30020 !important;
}

.mfpMember:hover {
    cursor: pointer;
    color: #ff7083 !important;
}

.homeAppear {
    align-items: center;
    background: rgba(255, 255, 255, 0);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: auto;
    justify-content: center;
    padding: 55px 40px 45px 40px;
    position: relative;
    max-width: 100%;
}

.homeAppear .mainText {
    color: #333333;
    font-family: 'Cormorant Infant', 'Noto Serif JP';
    font-size: 38px;
    font-weight: 500;
    height: auto;
    letter-spacing: 0.3em;
    line-height: 1.4;
    margin: 0px 0px 5px 10px;
    text-align: center;
    width: auto;
    max-width: calc(100% - 10px);
}

.homeAppear .subText {
    color: #888888;
    display: flex;
    font-family: Inter;
    font-size: 8px;
    font-weight: 400;
    height: auto;
    letter-spacing: 0.2em;
    line-height: 1.4;
    margin: 15px 0px 0px 0px;
    position: relative;
    text-align: left;
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
}

.homeAppear .yukaline {
    background: #EEEEEE;
    flex: none;
    height: 2px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    max-width: 100%;
}

.header-second-container {
    background: #fff url() 50% 0;
}

.product-container {
    max-width: 1155px;
    /* 设置一个最大宽度，根据需要调整 */
    margin: 0 auto;
    /* 设置左右外边距为自动，实现水平居中 */
    overflow: hidden;
    /* 避免内部内容溢出 */
    position: relative;
}

.product-row-container {
    overflow: hidden;
    /* 避免內部內容溢出 */
    width: calc((270px + 25px) * 12);
    /* 每個商品寬度 + 間距，乘以商品數量 */
}

.product-row {
    display: flex;
    transition: transform 0.3s ease;
    justify-content: center;
    /* 在主轴上居中 */
    align-items: center;
    /* 在交叉轴上居中 */
}

.homeProductPreview {
    position: relative;
    overflow: hidden;
    width: 270px;
    margin-right: 25px;
    transition: filter 0.3s ease;
    /* 添加過渡效果 */
}

.authPointBox {
    text-align: center;
    font-size: 20px;
    margin: 20px auto;
}

.authPointBox img {
    width: 32px;
    height: 32px;
    margin-top: -5px;
}

.pointInput {
    color: #64a331 !important;
}

.pointOutput {
    color: #b72e2e !important;
}

.pointCancel {
    color: #5e5e5e !important;
}

.authPointBox .authPointText {
    font-size: 24px;
    color: #b90303;
    font-weight: 600;
    margin-left: 20px;
}

.authPointBox .authPointTextContent {
    font-size: 16px;
    color: #b90303;
    margin-left: 10px;
    word-wrap: break-word;
}

.authPointFrame {
    position: relative;
    border-radius: 5px;
    padding: 10px auto;
    margin-bottom: 20px;
    border: 1px solid #999999;
}

.authPointFrontContent {
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #999999;
}

.authPointDetailContent {
    padding: 15px;
}

.authCouponMainTitle {
    font-weight: bold;
    font-size: 16px;
}

.authCouponMainDescription {
    color: #808080;
    font-weight: bold;
    font-size: 12px;
}

.authCouponMainLimit {
    color: #808080;
    font-weight: bold;
    font-size: 10px;
}

.authPointFrontTitle {
    position: relative;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    background-color: #fff1ed;
    border-top-left-radius: 5px;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
}

.pointEndDate {
    right: 2px;
    bottom: 0;
    font-size: 10px;
    color: #c8c8c8;
    position: absolute;
}

.point_box {
    position: absolute;
    right: 5px;
    bottom: 0px;
}

.point_reward {
    font-size: 10px;
    color: #727272;
}

.cargoPointReward {
    font-size: 14px;
    color: #727272;
    margin-bottom: 10px;
}

@media (max-width: 767px) {
    .authPointFrame {
        font-size: 12px;
    }

    .product-row-container {
        width: calc((257.8px) * 12);
    }

    .product-row {
        width: 121.2%;
    }
}

@media (max-width: 541px) {
    .product-row-container {
        width: calc((255.8px) * 12);
    }

    .product-row {
        width: 124%;
    }
}

@media (max-width: 451px) {
    .product-row-container {
        width: calc((255.8px) * 12);
    }

    .product-row {
        width: 121.2%;
    }
}

@media (max-width: 441px) {
    .product-row-container {
        width: calc((254.2px) * 12);
    }

    .product-row {
        width: 121.6%;
    }
}

@media (max-width: 436px) {
    .product-row-container {
        width: calc((254.2px) * 12);
    }

    .product-row {
        width: 121.5%;
    }
}

@media (max-width: 431px) {
    .product-row-container {
        width: calc((254.2px) * 12);
    }

    .product-row {
        width: 121.2%;
    }
}

@media (max-width: 421px) {
    .product-row-container {
        width: calc((254.2px) * 12);
    }

    .product-row {
        width: 121%;
    }
}

@media (max-width: 416px) {
    .product-row-container {
        width: calc((254.2px) * 12);
    }

    .product-row {
        width: 120.8%;
    }
}

@media (max-width: 413px) {
    .product-row-container {
        width: calc((253.1px) * 12);
    }

    .product-row {
        width: 121.2%;
    }
}

@media (max-width: 396px) {
    .product-row-container {
        width: calc((251.9px) * 12);
    }

    .product-row {
        width: 121.3%;
    }
}

@media (max-width: 394px) {
    .product-row-container {
        width: calc((251.8px) * 12);
    }

    .product-row {
        width: 121.2%;
    }
}

@media (max-width: 391px) {
    .product-row-container {
        width: calc((254.1px) * 12);
    }

    .product-row {
        width: 120.06%;
    }
}

@media (max-width: 376px) {
    .product-row-container {
        width: calc((253px) * 12);
    }

    .product-row {
        width: 120%;
    }
}

@media (max-width: 361px) {
    .product-row-container {
        width: calc((252.1px) * 12);
    }

    .product-row {
        width: 120%;
    }
}

@media (max-width: 321px) {
    .product-row-container {
        width: calc((249.2px) * 12);
    }

    .product-row {
        width: 120%;
    }
}

.homeHrefType:hover {
    text-decoration: none;
}

.homeProductPreview:hover {
    cursor: pointer;
    filter: brightness(0.8);
    /* 滑鼠懸停時降低亮度（變暗） */
}

.homeProductPreview .homepic {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}

.homeProductPreview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
    /* 添加過渡效果 */
}

.homeProductPreview:hover img {
    filter: brightness(0.8);
    /* 滑鼠懸停時降低亮度（變暗） */
}

.homeProductPreview:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 70px;
    height: 70px;
    background: url(/assets/uploads/ic_listmask.png) no-repeat;
    background-size: 70px 70px;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
    /* 添加 rotate 属性 */
    transition: all .3s ease-in-out;
    z-index: 10;
}

.homeProductPreview:hover:after {
    transform: translate(-50%, -50%) rotate(360deg);
    /* 鼠标悬停时旋转360度 */
    opacity: 1;
}

.hometxt {
    color: #888888;
    height: 60px;
    padding: 10px;
    text-align: center;
    background-color: #fbfbfb;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.8);
    transition: opacity 0.3s ease;
}

.nav-btn:hover {
    opacity: 0.9;
}

.nav-btn span {
    font-size: 24px;
    line-height: 1;
    padding: 10px;
}

.prev-btn {
    z-index: 1;
    left: 0;
}

.next-btn {
    right: 0;
}

.homepic {
    width: 270px;
    height: 270px;
    overflow: hidden;
}

.homeMoreAppear {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
    padding: 55px 40px 45px 40px;
    position: relative;
    max-width: 100%;
}

.homeMoreAppear a {
    text-decoration: none;
    position: relative;
    overflow: hidden;
    align-items: center;
    border: 1px solid #000;
    color: #000 !important;
    display: flex;
    flex-direction: row;
    height: 40px;
    justify-content: center;
    padding: 0 20px;
    width: 100%;
    max-width: 450px;
}

.homeMoreAppear a p {
    font-size: 14px;
    align-self: center;
    margin: 0;
    position: relative;
    z-index: 2;
    /* 提高層級，使其處於 ::before 之上 */
}

.homeMoreAppear a p {
    font-family: 'Cormorant Infant', 'Noto Serif JP' !important;
    padding: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-align: center;
    width: auto;
    max-width: 100%;
}

.homeMoreAppear a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #000;
    opacity: 0.9;
    transition: width 0.3s ease;
    /* 設定過渡效果 */
}

.homeMoreAppear a:hover::before {
    width: 100%;
}

.homeMoreAppear a:hover {
    color: #fff !important;
}

.intro {
    margin-bottom: 20px;
    text-align: center;
    visibility: visible;
    animation-name: fadeIn;
}

.introText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 2px solid;
    border-radius: 10px;
    padding: 5px 5px;
    background-color: #D35549;
    color: #FFFFFF;
    text-align: center;
}

.cursorPoint {
    cursor: pointer;
}

.none-order {
    margin: 200px auto 200px auto !important;
}

.trackingButton {
    cursor: pointer;
}

.shippingInformation {
    height: 29px;
    color: #e30020;
    font-size: 1.3em;
    background: url(/assets/uploads/bg_title.png) no-repeat 0 0px;
    line-height: 10px;
    padding-left: 22px;
    margin: 4% auto 0;
}

.cargoSubHeader {
    margin: 40px 5px 10px 5px;
    background-color: #D35549;
    color: #ffffff;
    padding: 5px 5px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 2px;
}

.subCategoryGraph {
    padding: 30px 10px;
    /* border-bottom: 1px solid; */
}

.subCategoryGraph img {
    width: 100%;
    border: 1px solid #ddd;
    /* 可以添加邊框效果 */
    border-radius: 8px;
    /* 可以添加圓角效果 */
    transition: transform 0.3s;
    /* 添加 hover 效果 */
}

.subCategoryGraph img:hover {
    transform: scale(1.1);
    /* 放大 1.1 倍的效果，可根據需要調整 */
}

.cargoIntroImg {
    width: 100%;
    height: auto;
}

.cargoIntroImg img {
    width: 100%;
    height: auto;
}

.subSubCategoryContent div p {
    /* padding: 10px; */
    font-size: 16px;
}

.edit img {
    width: 80%;
    height: auto;
}

.artist img {
    width: 90%;
    height: auto;
}

.artist .sub img {
    width: 300px;
    height: auto;
}

.artist .artist_link img {
    width: 150px;
    height: 150px;
}

.itemPrice {
    color: #e30020;
}

.mailDescription {
    display: inline-block;
    width: 100px;
    /* 设置宽度 */
    white-space: nowrap;
    /* 防止换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 在超出部分显示省略号 */
}

.mailContentBox {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #bebebe;
}

.mailContent {
    font-size: 16px;
    padding: 10px;
}

.mailContentTitle {
    font-weight: bold;
    font-size: 20px;
    padding: 10px;
}

.boldContent {
    font-weight: bold;
}

.redContent {
    color: #e30020 !important;
}

.greenContent {
    color: #1fc419 !important;
}

.grayContent {
    color: #999999 !important;
}

.blackContent {
    color: #000000 !important;
}

/* QR Code 容器樣式 */
.qr-code-container {
    margin: 20px 0;
}

.qr-code-container img {
    max-width: 200px;
    width: 100%;
    height: auto;
    border: 2px solid #ddd;
    padding: 5px;
    border-radius: 5px;
}

#languageSelector {
    position: absolute;
    top: 10px;
    /* 距離窗口頂部的距離 */
    z-index: 9999;
    /* 確保它在其他內容之上 */
    border: 1px solid #ccc;
    /* 邊框 */
    border-radius: 5px;
    /* 圓角 */
}

#languageSelector select {
    padding: 8px 20px;
    /* 內邊距 */
    font-size: 16px;
    /* 字體大小 */
    border: 1px solid #ccc;
    /* 邊框 */
    border-radius: 5px;
    /* 圓角 */
    background-color: #fff;
    /* 背景色 */
    -webkit-appearance: none;
    /* 移除默認樣式 */
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    /* 指標 */
}

/* 選擇狀態下的樣式 */
#languageSelector select:hover,
#languageSelector select:focus {
    border-color: #999;
    /* 鼠標懸停或焦點時的邊框顏色 */
}

.sonsPreview {
    text-align: center;
    font-size: 22px;
    margin-top: 35px;
    border: 1px solid;
    border-radius: 5px;
    color: #fa8b68;
    cursor: pointer;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.sonsPreview:hover {
    color: #ffffff;
    background-color: #fa8b68;
}

.sonsPreview span {
    display: block;
    width: 100%;
    height: auto;
    padding: 10px 20px;
}

.resetRowMargin {
    margin: auto;
}

.pc_lottery .info {
    color: #fff;
    background-color: #868686;
}

.mb_lottery {
    display: none;
}

.mb_lottery .remarks {
    width: 100vh;
}

@media (max-width:995px) {
    .pc_lottery {
        font-size: 14px;
    }
}

@media (max-width:767px) {
    .pc_lottery {
        display: none;
    }

    .mb_lottery {
        display: block;
    }

    .mb_lottery .remarks {
        font-size: 12px;
    }
}

.lotteryResult {
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
}

select.lotteryResult {
    color: #495057;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #fff;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.addCartLottery {
    color: #007bff !important;
    cursor: pointer;
}

.addCartLottery:hover {
    color: #007bff91 !important;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.custom-select {
    /* position: relative;
    display: inline-block;
    width: 200px; */
    height: 40px;
    background-color: #f1f1f1;
    border-radius: 4px;
    overflow: hidden;
}

/* Hide the default arrow */
.custom-select select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    font-size: 16px;
    color: #333;
}

/* Custom arrow icon */
.custom-select::after {
    content: '\25BC';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Hover effect */
.custom-select:hover {
    background-color: #e0e0e0;
}

.img-responsive {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0 5px;
}

.small-slick {
    margin: 0;
    /* 确保没有不必要的 margin */
    padding: 0;
    /* 确保没有不必要的 padding */
}

.album {
    width: 100%;
    height: auto;
    visibility: hidden;
}

.album .big {
    position: relative;
}

.album .small {
    margin-top: 10px;
    overflow: hidden;
}

.album .small-slick {
    margin-left: -5px;
    margin-right: -5px;
}

.album .small-slick .slick-slide a:after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    display: block;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    background: rgba(0, 0, 0, .3);
}

.album .big .slick-slide {
    height: 400px;
    background-color: #F3F1F1;
}

.album .big a.album-next {
    right: 0;
}

.album .big a.album-prev {
    right: 27px;
}

.album .big a.album-prev,
.album .big a.album-next {
    position: absolute;
    top: 100%;
    display: block;
    width: 25px;
    height: 25px;
    background-color: rgba(0, 0, 0, 0.30);
    /* border: 2px solid rgba(0, 0, 0, 0.30); */
    border-radius: 100%;
    outline: none;
    transition: background .25s linear;
    -ms-transition: background .25s linear;
    -moz-transition: background .25s linear;
    -webkit-transition: background .25s linear;
    margin-top: -25px;
    z-index: 1000;
}

.album .big a.album-prev:after {
    content: '';
    position: absolute;
    top: 8px;
    left: 10px;
    display: block;
    width: 8px;
    height: 8px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.album .big a.album-next:after {
    content: '';
    position: absolute;
    top: 8px;
    right: 10px;
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.productPictureBox {
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 400px;
}

.productPictureBox img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

.share {
    margin: 20px 0 0 0;
    display: flex;
    justify-content: center;
    visibility: hidden;
}

@media (max-width:767px) {

    .share {
        margin: 20px 0 60px 0;
    }
}

.postShare {
    display: flex;
    position: absolute;
    right: 0;
    margin: 20px 0 0 0;
    justify-content: right;
}

.postShareMB {
    display: none;
    margin: 20px 0 0 0;
    justify-content: right;
}

@media (max-width:991px) {

    .postSharePC {
        display: none;
    }

    .postShareMB {
        display: flex;
    }
}

.share ul.reset,
.postShare ul.reset,
.postShareMB ul.reset {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0 0 0 10px;
}

.share ul.reset li,
.postShare ul.reset li,
.postShareMB ul.reset li {
    margin-right: 5px;
    /* 調整按鈕之間的間距 */
}

.share ul.reset li:last-child,
.postShare ul.reset li:last-child,
.postShareMB ul.reset li:last-child {
    margin-right: 0;
    /* 移除最後一個按鈕的右側間距 */
}

.share>ul li a,
.postShare>ul li a,
.postShareMB>ul li a {
    display: block;
    width: 30px;
    height: 30px;
    font-size: 1rem;
    color: #b2b2b2;
    text-align: center;
    padding-top: 3px;
    border: 1px solid #b2b2b2;
    border-radius: 100%;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .25s linear;
    -ms-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -webkit-transition: all .25s linear;
}

.share>ul li a.fb:hover,
.postShare>ul li a.fb:hover,
.postShareMB>ul li a.fb:hover {
    border-color: #3b5998;
    background-color: #3b5998;
}


.share>ul li a.line:hover,
.postShare>ul li a.line:hover,
.postShareMB>ul li a.line:hover {
    border-color: #3ace00;
    background-color: #3ace00;
}

.share>ul li a.twitter:hover,
.postShare>ul li a.twitter:hover,
.postShareMB>ul li a.twitter:hover {
    border-color: #63cdf1;
    background-color: #63cdf1;
}

.share>ul li a.google:hover,
.postShare>ul li a.google:hover,
.postShareMB>ul li a.google:hover {
    border-color: #de5549;
    background-color: #de5549;
}

.share>ul li a.email:hover,
.postShare>ul li a.email:hover,
.postShareMB>ul li a.email:hover {
    border-color: #9a846a;
    background-color: #9a846a;
}

.share>span,
.postShare>span,
.postShareMB>span {
    display: block;
    float: left;
    width: 25px;
    font-size: 1.1rem;
    /* line-height: 26px; */
    padding-top: 3px;
}

.newsText .date {
    float: left;
    width: 55px;
    height: 70px;
    font-family: 'Century Gothic', Sans-serif;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, .8);
    padding: 6px;
}

.newsText .date span {
    display: block;
}

.newsText .date .day {
    height: 26px;
    font-size: 1.0625rem;
    line-height: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    margin-bottom: 4px;
}

.newsText .date .month,
.newsText .date .year {
    font-size: .75rem;
    line-height: 14px;
}

.newsText .head {
    position: relative;
    height: 70px;
}

.newsText .head .date_480 {
    display: none;
}


.newsText .head .title {
    position: absolute;
    top: 50%;
    left: 85px;
    width: calc(100% - 320px);
    max-height: 52px;
    font-family: 'Century Gothic', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif;
    font-size: 1.2rem;
    color: #000;
    line-height: 26px;
    overflow: hidden;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    margin: 0;
}

.newsText .head:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: calc(100% - 90px);
    height: 1px;
    background: #aaa;
}

@media (max-width:991px) {

    .newsText .head .title {
        left: 85px;
        width: auto;
    }

    .newsText .head:after {
        width: 100%;
    }

    .newsText .date {
        display: none;
    }

    .newsText .head {
        height: auto;
        padding-top: 70px;
        padding-bottom: 10px;
    }

    .newsText .head .date_480 {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        float: left;
        width: 100%;
        /* height: 30px; */
        font-family: 'Century Gothic', Sans-serif;
        color: #fff;
        text-align: center;
        background: rgba(0, 0, 0, .8);
        padding: 6px;
    }

    .newsText .head .title {
        position: unset;
    }
}

#mem_login2 {
    display: none;
}

@media (max-width:767px) {
    #mem_login {
        display: none;
    }

    #mem_login2 {
        display: block;
        float: left;
        width: 100%;
        font-size: .95rem;
        color: #fff;
        text-align: center;
        background-color: rgba(239, 132, 104, 1.0);
        padding: 13px;
    }

    #mem_login2 a {
        display: inline-block;
        padding-left: 10px;
        color: #ffe747;
    }

    #fixedFirstHeader .container {
        justify-content: right;
    }
}

.section-contents-one h1 {
    margin-top: 150px;
}

.cartList {
    width: 100%;
    margin-top: 50px;
    padding-left: 25px;
    padding-right: 25px;
    position: relative;
}

.cartList section {
    width: 100%;
}

.cartListBorder {
    border-bottom: 1px solid dimgray;
}

.cartListBorder td p {
    display: flex;
    align-items: center;
}

.checkoutStepIcon {
    cursor: pointer;
}

.checkoutImg {
    width: 100%;
    height: auto;
}

.cartCashPosition {
    display: flex;
    font-size: 24px;
    align-items: center;
    justify-content: flex-end;
}

.cartCashPosition span {
    color: #dd0606;
}

.btnBox {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 80px;
}

.btnDef.black {
    background: #333;
}

.btnDef.red {
    background: #e30020;
}

.btnDef:hover {
    opacity: 0.8;
}

.btnDef.black,
.btnDef.red {
    cursor: pointer;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    text-align: center;
    width: 400px;
    margin: 0;
}

.amountPreviewStyle {
    font-size: 24px;
    color: #dd0606;
}

@media (max-width: 767px) {
    .btnBox {
        /* flex-direction: column !important; */
        margin: 80px auto 10px;
    }

    .btnDef.black,
    .btnDef.red {
        width: 45%;
        font-size: 14px;
    }
}

.formTi {
    height: 29px;
    color: #e30020;
    font-size: 1.3em;
    line-height: 10px;
    background: url(/assets/uploads/bg_title.png) no-repeat 0 0px;
    padding-left: 13px;
    margin: 4% auto 2%;
}

.checkoutRadioType {
    padding: 15px 0px;
}

.container-fluid .checkoutRadioType input {
    appearance: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid #999;
    transition: 0.2s all linear;
    margin-right: 5px;
    position: relative;
    top: 4px;
}

.container-fluid .checkoutRadioType input:checked {
    border: 6px solid black;
}

.container-fluid .remakBox {
    align-items: baseline;
}

.container-fluid .remakBox textarea {
    resize: none;
    align-items: baseline;
}

.checkoutRadioType input[type="radio"]:disabled+label {
    /* text-decoration: line-through; */
    opacity: 0.5;
}

.cargoHoverStyle:hover {
    cursor: pointer;
    color: #e30020;
    text-decoration: none !important;
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

.cookie-banner button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.orderInfoHeader {
    position: relative;
    padding-top: 20px;
}

.messageMobile {
    display: none;
}

.leave_msg {
    position: absolute;
    top: 30px;
    right: 0;
}

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

.sendMessageButtonGroup .btnDef {
    width: 300px;
}

.lotteryHint {
    font-size: 12px;
    color: #BE2633;
    position: absolute;
    top: -2px;
    left: 16px;
    width: 15px;
    background: #D1D1D1;
    border-radius: 50px;
    opacity: 0.8;
}

@media (max-width:767px) {
    .messageMobile {
        display: contents;
    }

    .messagePC {
        display: none;
    }

    .leave_msg {
        top: 0;
    }

    .sendMessageButtonGroup .btnDef {
        width: 30%;
    }

    /* .notice {
        font-size: 12px;
    } */
}

.memberLikeList {
    border-bottom: 1px solid #ddd;
}

.memberLikeListBackground {
    background-color: #f9f9f9;
}

.trackingProduct:hover {
    cursor: pointer;
    color: #e30020;
}

.inputAdjustMargin {
    margin-left: 15px;
    margin-right: 15px;
}

.fanLink a {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

.fanLink a .footerLinkIcon {
    width: 100%;
    height: 100%;
}

#section-news {
    width: 100%;
}

.bg_section-news {
    /* background: url(../images/index/bg_content.png) 0 0 repeat-x; */
    border-top: 1px dotted #ccc;
    padding: 50px 0 60px 0;
}

#section-pro {
    width: 100%;
}

.bg_section-pro {
    /* background: #fff; */
    border-top: 1px dotted #ccc;
    padding: 50px 0 40px 0;
}

#section-pro .mTitle {
    text-align: left;
    font-size: 1.4rem;
    letter-spacing: 1px;
}

#section-pro .mTitle small {
    display: inline-block;
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding-left: 15px;
}

#section-pro .item {
    margin: 32px 30px 0 0;
}

#section-pro .proGridBox {
    width: 100%;
    margin-bottom: 0;
}

#section-pro .proGridBox .imgBox img {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

#section-pro .proGridBox .imgBox {
    position: relative;
    overflow: hidden;
}

#section-pro .proGridBox .imgBox .pic {
    position: relative;
}

#section-pro .proGridBox .imgBox .txt {
    text-align: center;
    padding: 10px 13px 15px;
}

#section-pro .proGridBox .imgBox .pic:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 70px;
    height: 70px;
    background: url(/assets/images/partnertoys/ic_listmask.png) no-repeat;
    background-size: 70px 70px;
    opacity: 0;
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    margin-top: -35px;
    margin-left: -35px;
    z-index: 2;
}

#section-pro .proGridBox .imgBox:hover .pic:after {
    opacity: 1;
    transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
}

#section-pro .proGridBox .imgBox .pic:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    opacity: 0;
    transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    z-index: 2;
}

#section-pro .proGridBox .imgBox:hover .pic:before {
    opacity: 1;
}

#section-pro .proGridBox .imgBox .txt h3 {
    font-size: 0.95rem;
    line-height: 1.25rem;
    margin: 0;
}

#section-pro .container {
    position: relative;
}

#section-content .container {
    position: relative;
}

@media (min-width: 1200px) {
    #section-pro .container {
        max-width: 1139px !important;
    }
}

@media (max-width: 424px) {

    #section-pro .mTitle,
    #section-pro .mTitle small {
        letter-spacing: 0px;
    }
}

@media (max-width:400px) {
    #section-pro .mTitle small {
        display: block;
        padding-left: 0px;
    }
}

.Btn_prevnext {
    position: absolute;
    top: -10px;
    right: 0;
    /* top: -2px;
    right: 20px; */
    width: 80px;
    height: 50px;
    background: url(/assets/images/partnertoys/btn_gap.png) center no-repeat;
    overflow: hidden;
    z-index: 99;
}

.Btn_prevnext .next {
    top: 20px;
    right: 0px;
}

.Btn_prevnext .btn {
    position: absolute;
    display: block;
    width: 40px;
    height: 35px;
    color: #777;
    font-size: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    padding: 0;
}

.Btn_prevnext .btn:hover {
    color: #ef8468 !important;
}

#iNews .latestImg {
    display: block;
    border: 1px solid #efefef;
    box-shadow: 3px 3px 0px rgba(133, 133, 133, 0.1);
}

#iNews .latestImg .pic {
    position: relative;
    background-color: #efefef;
}

#iNews .latestImg .pic:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}

#iNews .latestImg:hover .pic:before {
    background: rgba(0, 0, 0, .8);
    opacity: 1;
    z-index: 98;
}

#iNews .latestImg .pic>img {
    margin: 0 auto;
}

#iNews .latestImg .txt {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: inline-block;
    width: 100%;
    text-align: center;
    background: none;
    padding: 0 0 20px;
    opacity: 0;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    z-index: 99;
}

#iNews .latestImg:hover .txt {
    bottom: 50%;
    padding: 0;
    opacity: 1;
    transform: translateY(50%) translateX(-50%);
    -ms-transform: translateY(50%) translateX(-50%);
    -moz-transform: translateY(50%) translateX(-50%);
    -webkit-transform: translateY(50%) translateX(-50%);
}

#iNews .latestImg .txt .date {
    margin-bottom: 20px;
    color: #ffe747;
}

#iNews .latestImg .txt h3.name {
    color: #fff;
    font-size: 1.05em;
    line-height: 22px;
    padding: 0 40px;
    margin: 0;
}

#iNews .latestImg .txt h3.name:before {
    content: '';
    position: absolute;
    top: 27px;
    left: 50%;
    display: block;
    width: 48px;
    height: 1px;
    background: #ef8468;
    margin-left: -25px;
}

.iTitle {
    color: #e30020;
    font-size: 1.7em;
    font-family: "思源黑體", "Noto Sans T Chinese", "微軟正黑體";
    font-weight: 100;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto 5px;
}

#iNews .leftBox {
    width: 27%;
    padding: 0 0 0 5%;
}

#iNews .iTitle {
    color: #2d2d2d;
    font-family: Arial;
    font-size: 1.8em;
    text-transform: uppercase;
}

#iNews .iStitle {
    font-size: 1.1em;
    color: #646464;
    text-align: center;
    margin-bottom: 42%;
}

#iNews .more,
#memberOrderList .more {
    display: block;
    float: right;
    width: 140px;
    height: 33px;
    text-decoration: none;
    background-image: url(/assets/images/partnertoys/bt_more.png);
    background-position: left center;
    background-repeat: no-repeat;
    color: #5e3b3e;
    font-size: 0.9em;
    line-height: 33px;
    overflow: hidden;
    padding-left: 52px;
}

#iNews .more:hover,
#memberOrderList .more:hover {
    color: #646464;
}

#iNews .rightBox {
    width: 70%;
    margin-top: -6px;
}

#iNews .newsTab th {
    min-width: 100px;
    font-family: 'Century Gothic', Sans-serif;
    font-size: 14.7px;
    font-weight: normal;
    color: #777777;
    border-bottom: 1px solid #999;
    vertical-align: top;
}

#iNews .newsTab th,
#iNews .newsTab td {
    padding: 10px 5px 10px 12px;
}

#iNews .newsTab td {
    font-size: 1.05em;
    border-bottom: 1px solid #ddd;
}

#iNews .newsTab td>a {
    color: #000;
}


@media (max-width: 991px) {
    #iNews .more {
        width: 100%;
    }

    #iNews .leftBox {
        width: 100%;
        padding: 0 2%;
    }

    #iNews .rightBox {
        width: 100%;
        margin-top: 33px;
    }

    #iNews .iStitle {
        padding-left: 10px;
    }

    #iNews .iTitle,
    #iNews .iStitle {
        display: inline-block;
        margin-bottom: 0;
    }
}

@media (max-width:767px) {
    #iNews .latestimgBox {
        display: none;
    }

    #iNews .rightBox {
        margin-top: 10px;
    }

    #iNews .newsList {
        width: 100%;
    }
}

@media (max-width:424px) {
    #iNews .rightBox {
        margin-top: 33px;
    }
}

.homeToDetailEffect {
    text-decoration: none;
    cursor: pointer;
    color: #000000;
}

.homeToDetailEffect:hover {
    text-decoration: none;
    cursor: pointer;
    color: #d35448;
}

.checkoutConfirm {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.checkoutConfirm input[type=checkbox],
.checkoutConfirm input[type=checkbox]::before {
    width: 26px;
    height: 26px;
    margin-right: 10px;
}

@media (max-width:767px) {
    .checkoutConfirm {
        font-size: 16px;
    }

    .checkoutConfirm input[type=checkbox],
    .checkoutConfirm input[type=checkbox]::before {
        width: 16px;
        height: 16px;
    }
}

.shoppingNote {
    color: #d35448;
}

.shoppingNote:hover {
    cursor: pointer;
    color: #e30020;
}

@media (max-width:767px) {
    .partnertoysHome {
        overflow-x: clip;
        /* padding-right: 15px;
        padding-left: 15px;
        margin-right: 0;
        margin-left: 0; */
    }
}

.orderInfoPaymentGreen {
    color: green;
}

.orderInfoPaymentRed {
    color: red;
}

.artistContentTitle {
    width: 100%;
    margin: 10px 5px 10px 5px;
    background-color: #d35549;
    color: #ffffff;
    padding: 5px 5px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 2px;
}

.artistContentIntro {
    color: #d35549;
    font-size: 18px;
    font-weight: bold;
    font-family: '微軟正黑體';
}

.artistLinkPicture img {
    width: 100%;
}

.artistContentForm img {
    width: 100%;
}

.artistContentCargos img {
    width: 300px;
    height: 160px;
}

@media (max-width:450px) {
    .artistContentCargos img {
        width: 100%;
        height: auto;
    }
}

/* 遮罩层样式 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    /* 设置背景颜色为白色，带有透明度 */
    z-index: 9999;
    /* 设置 z-index 为一个比页面上其他元素更高的值 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 加载动画样式（可根据需要替换为其他加载动画） */
.spinner {
    width: 50px;
    height: 50px;
    z-index: 9999;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

.relateTitle .relateTitleMain {
    font-size: 1.375rem;
    text-transform: uppercase;
    margin-right: 2px;
}

.relateTitle .relateTitleMain .relateTitleSub {
    font-weight: normal;
    color: #e30020;
}

.relativeProductPreview {
    padding-left: 20px;
}

.cargosPartitionLine {
    width: 100%;
    height: 1px;
    margin: 15px 0;
    background-color: #999999;
}

.cargosPartitionLineDash {
    width: 100%;
    height: 1px;
    margin: 15px 0;
    border-bottom: 1px dashed #999999;
}

.authTextBox {
    padding-right: 0;
}

.authImageBox {
    padding: 0;
}

.authOrderAmountText {
    font-size: 14px;
}

.authOrderAmountNumber {
    font-size: 18px;
    font-weight: bold;
}

.authCartList {
    margin: 0;
    color: #000;
    padding: 20px;
    cursor: pointer;
    position: relative;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #c8c8c8;
}

.authCartList:hover {
    color: #000;
    text-decoration: none;
    filter: brightness(0.9);
}

.cartList {
    margin: 0;
    padding: 20px;
    position: relative;
    border-radius: 5px;
    background-color: #fff;
}

.rewardCartList {
    border: 1px solid #c8c8c8;
}

.cartListBorder {
    border-bottom: 1px solid dimgray;
}

.cartListBorder td p {
    display: flex;
    align-items: center;
}

.productCategoryHint {
    text-align: center;
    color: #ad9f9f;
    font-size: 12px;
    width: 100%;
}

.cartCargos {
    align-content: center;
}

.imageBox {
    padding-right: 0;
}

.itemImageBox {
    padding-left: 0;
    padding-right: 0;
}

.itemTextBox {
    padding-right: 0;
}

.cartList {
    position: relative;
}

.orderConfirm {
    font-size: 16px;
}

.orderCompleteImgBox img {
    width: 300px;
    height: auto;
}

.checkoutSuccessGap {
    margin-top: 150px;
}

.orderSuccessInfo {
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #afafaf;
}

.checkoutHideBox {
    width: 100%;
    cursor: pointer;
}

.checkout-success-header-time {
    color: #999999;
    font-size: 14px;
    margin-left: 20px;
}

.checkRewardFilter .rewardQty,
.checkRewardFilter .cargoName,
.checkRewardFilter .checkoutImg {
    opacity: 0.5;
    color: #999999;
}

.cargoName {
    color: #000;
}

.cargoName .itemProductCombineName {
    color: #c8c8c8;
    font-size: 14px;
}

.ordersViewBox {
    margin: 0;
}

.ordersCargoName {
    font-size: 16px;
}

.short-info {
    font-size: 14px;
    color: #808080;
    padding-left: 10px;
}

span.fontGap {
    font-size: 16px;
    font-weight: bold;
}

span.authFontGapOrderNumber {
    color: #BE2633;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

span.authFontGapTime {
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

.orderSuccessTotalAmount {
    color: #dd0606;
    margin-left: 20px;
}

.combinePrice {
    color: #c91f2b;
    font-weight: bold;
    word-break: keep-all;
}

.shoppingNoteContent {
    font-size: 14px;
    line-height: 1.8;
}

.specificAddCart {
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 5px;
    margin-left: 1.5rem;
    border: 1px solid #ffca00;
    background-color: #ffca00;
}

.specificAddCart:hover {
    cursor: pointer;
    color: #ffca00;
    background-color: #fff;
}

.groupOfNumber {
    align-items: center;
}

@media (max-width:767px) {
    .ordersCargoName {
        font-size: 14px;
    }

    .stepButton {
        padding-left: 10px;
        padding-right: 10px;
    }

    .productViewCombine {
        padding-left: 0;
        padding-right: 0;
    }

    .stepNumber {
        width: 20px;
        height: 20px;
        font-size: 12px;
        line-height: 20px;
    }

    .checkoutBanner {
        margin-top: 63.5px;
    }


    .btnDef.gray,
    .btnDef.orange {
        font-size: 14px;
        width: 120px;
    }

    .selectSuperButton {
        width: auto;
    }

    .pointInfo,
    .rewardQty,
    .cargoPrice,
    .joinMember,
    .couponInfo,
    .short-info,
    .paymentInfo,
    .icon-expand,
    .paymentBox p,
    .deliveryBox p,
    label.pointName,
    label.couponName,
    .checkoutStepIcon,
    .orderSuccessInfo p,
    .shoppingNoteContent,
    .selectSuperButton span,
    .cargoName .itemProductCombineName {
        font-size: 12px;
    }

    input[placeholder],
    textarea[placeholder],
    #twzipcode select,
    .cargoName,
    .costHeader,
    span.fontGap,
    .costPreview,
    .orderConfirm,
    .combinePrice,
    .costPreviewName,
    .paymentBox label,
    .deliveryBox label,
    .shoppingNoteHeader,
    .orderSuccessInfo label {
        font-size: 14px;
    }

    .amountSize {
        font-size: 18px;
    }

    /* .cartList {
        padding: 15px 0;
    } */

    .orderCompleteImgBox img {
        width: 30%;
        height: auto;
    }

    .checkoutSuccessGap {
        margin-top: 120px;
    }

    .checkout-success-header-time {
        margin-left: 0;
        display: block;
        font-size: 12px;
    }
}

@media (max-width:500px) {
    .specificAddCart {
        margin-left: 0;
        margin-top: 1.5rem;
    }
}

.warning {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #ffcc00;
    color: #000;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    z-index: 1000;
}

.warning button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
}

.warning button:hover {
    background-color: #0056b3;
}

.warning input {
    margin-top: 10px;
    width: 80%;
    padding: 5px;
    font-size: 16px;
}

.password-wrapper {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.password-wrapper input[type="text"] {
    font-family: 'password', sans-serif;
}

@media (max-width:767px) {
    .sonsPreview span {
        font-size: inherit;
        padding: 5px;
    }

    .subSubCategoryContent td {
        width: auto !important;
    }
}

/* 修改滾動條 */
::-webkit-scrollbar {
    width: 8px;
    /* 設置滾動條寬度 */
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    /* 設置滾動條軌道的背景顏色 */
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    /* 設置滾動條手柄的顏色 */
    border-radius: 4px;
    /* 設置圓角 */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* 滑鼠懸停時的顏色 */
}

[v-cloak] {
    display: none;
}