/* Minification failed. Returning unminified contents.
(13,48): run-time error CSS1039: Token not allowed after unary operator: '-iconlist-url'
(298,29): run-time error CSS1039: Token not allowed after unary operator: '-carttext-color'
(370,55): run-time error CSS1039: Token not allowed after unary operator: '-cart-color'
(371,71): run-time error CSS1039: Token not allowed after unary operator: '-cart-color'
(372,84): run-time error CSS1039: Token not allowed after unary operator: '-cart-color'
 */
@charset "UTF-8";
/* CSS Document */
/*天地共用*/
body { background: #ffffff; font-size: 16px; }
#container, #content { z-index: 3; position: relative; }
.row:after { display: none; }
#header { padding: 20px 0; border-top: 5px solid #b282ed; background: #e7e4f9; }
.icon_search2:before { content: " "; width: 24px; height: 24px; display: block; background: url("https://web-cpe.cdn.hinet.net/res/Resources/images/ico-qry.svg") no-repeat; background-size: 24px 24px; }
/*小網*/
.icon_search:before { background: url("https://web-cpe.cdn.hinet.net/res/Resources/images/ico-qry-gray.svg") center no-repeat; }
.icon_user:before { background: url("https://web-cpe.cdn.hinet.net/res/Resources/images/ico-avatar.svg") no-repeat; }
.icon_cart:before { background: url("https://web-cpe.cdn.hinet.net/res/Resources/images/ico-cart.svg") no-repeat; }
.icon_list-unordered:before { background: var(--iconlist-url) no-repeat; margin: 0 10px 0 0; }
.icon_search:before, .icon_user:before, .icon_cart:before, .icon_list-unordered:before { content: " "; width: 36px; height: 36px; display: block; background-size: 30px 30px; background-position: center }

.navbar-collapse { padding: 0; }
.categorylv1_div, .categorylv2_div { width: 100%; overflow: hidden; }

.m_hd_bx { display: flex; justify-content: space-between; align-items: center; background: #f6f3ff; padding: 7px 10px 7px 5px; }
.tag_bx { background: #fff; padding: 0; border-bottom: 5px solid #b28aed; display: flex; justify-content: flex-start; /* flex-wrap: wrap;*/ overflow: scroll; width: 100%; font-size: .875em; }
    .tag_bx li { margin: 0 2px; word-break: keep-all; }
        .tag_bx li a { background: #f1f6f0; padding: 5px 10px; display: block; color: #222; border-top-right-radius: 5px; border-top-left-radius: 5px; display: flex; align-items: center; }
            .tag_bx li a::after { font-size: 12px; }
        .tag_bx li.ar a::after { content: "▼"; }
        .tag_bx li.open a::after { content: "▲"; }
        .tag_bx li.selected > a, .tag_bx li.selected > div > a { background: #24a535; color: #fff; }

.m_container { position: fixed; width: 100%; height: 100%; z-index: 999; }
    .m_container h3, .filter_bx h3 { margin: 0 0 10px; color: #fff; text-shadow: 0px 0px 5px rgba(0,0,0,.3); letter-spacing: 1px; }
.keyword { margin: 0 0 10px; }
    .keyword a { display: inline-block; color: #fff; padding: 5px 7px; margin: 0 0 5px; border: 1px solid#fff; border-radius: 5px; word-break: keep-all; }
.m_container .btn_org a { color: #fff; width: 100%; height: 40px; display: flex; justify-content: center; align-items: center; font-size: 1.125em; border-radius: 5px; background: #faa627; }

.blue-link { color: blue; text-decoration: underline; }

/*整體框架*/
.m_hide { display: block; }
.m_block { display: none; }
.main_bx { padding: 10px 0 40px; }
.route { font-size: 1em; display: flex; align-items: center; padding: 0 0 10px 0; }
    .route li { display: flex; align-items: center; }
        .route li:after { content: ">"; display: block; padding: 0 5px; }
        .route li:last-child:after { content: ""; }
        .route li a, .route li:after { color: #666666; }
            .route li a:hover { color: #24a535; }
/*bootstrap*/
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: none; }
/*swiper*/
.swiper-container.no_padTop { padding: 0 0 0; }
.swiper-container.special_bx { padding: 0 0 0; position: relative; }
    .swiper-container.special_bx .swiper-wrapper a { position: static; width: auto; height: auto; }
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { width: calc(100% - 40px); top: calc(100% - 60px); left: 20px; box-sizing: border-box; z-index: 10; }
.swiper-container-horizontal.topright > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { width: calc(100% - 30px); text-align: right; top: 0.25em; }
.swiper-container-horizontal.topright .swiper-pagination-bullet-active { background: white; }
.special_bx .swiper-pagination-custom { top: 0; width: 100%; left: 0; right: 0; height: 100%; display: flex; justify-content: flex-end; }
.swiper-pagination { text-align: left; }
    .special_bx .swiper-pagination, .swiper-pagination.topType { text-align: right; }
.swiper-container-horizontal > .swiper-pagination-bullets.topType { top: 10px; width: 100%; left: 0; }
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 0; width: 40px; height: 40px; background: rgba(34,34,34,40%); color: #fff; }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 0; width: 40px; height: 40px; background: rgba(34,34,34,40%); color: #fff; }
    .swiper-button-next:after, .swiper-button-prev:after { font-size: 2em; }
.swiper-pagination-bullet { background: #222222; }
.swiper-pagination-bullet-active { background: #24a535; }
.swiper-slide { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .swiper-slide .cbo-col-sm-6 { position: relative; background: #fff; padding: 5px 5px; margin: 0 10px 0 0; }
        .swiper-slide .cbo-col-sm-6:last-child { margin: 0; }
    .swiper-slide .cbo-col-sm-5 { position: relative; background: #fff; padding: 20px; margin: 0 20px 0 0; }
        .swiper-slide .cbo-col-sm-5:last-child { margin: 0; }
    .swiper-slide .pic { margin: 0; }
        .swiper-slide .pic img { width: 100%; height: auto; }
    .swiper-slide a { top: 0; left: 0; width: 100%; height: 100%; display: block; }
.fl_bx_index { display: flex; justify-content: space-around; margin: 0 0 7px; flex-wrap: wrap; flex-direction: row; align-content: flex-end; align-items: flex-end; }
.fl_bx { display: flex; justify-content: space-between; flex-wrap: nowrap; flex-direction: row; }
.point_bx { background: url("https://web-cpe.cdn.hinet.net/res/Resources/images/point.svg") no-repeat; }
.nrl_Price_bx { background: url("https://web-cpe.cdn.hinet.net/res/Resources/images/nrl_price.svg") no-repeat; margin: 0 0 0 auto; }
.point_bx, .nrl_Price_bx { background-size: 16px 16px; background-position: left center; padding: 0 0 0 18px; display: inline-flex; font-size: 0.875em; align-items: center; }
.fl_bx > .point_bx { color: #91dc82; font-weight: bold; }
#CPEEC_Recommend .col-inner .price, #cboui_u_like .col-inner .price, .col-inner .price { text-align: right; font-size: 1.3em; line-height: 14px; }


/*wrap_bx*/
.wrap_bx { margin: 0 0 20px; }
    .wrap_bx:last-child { margin: 0 0; }
    .wrap_bx h3 { font-size: 1.5em; text-align: left; }
    .wrap_bx h4 { font-size: 1.25em; text-align: left; }
/*sp_Set*/
.sp_Set { height: 500px; display: flex; justify-content: space-between; flex-wrap: wrap; }
    .sp_Set li:first-child { width: 37.5%; }
    .sp_Set li:last-child { width: 62.5%; display: flex; justify-content: flex-start; flex-wrap: wrap; }
    .sp_Set li .pic { margin: 0; }
    .sp_Set li:first-child .pic { width: 100%; }
    .sp_Set li:last-child .pic { width: 33.3%; }
    .sp_Set .pic img { width: 100%; height: auto; }
/*multi_ads*/
.multi_ads { display: flex; background: #24a535; }
    .multi_ads .bn_4Set { width: calc(100% - 700px); display: flex; flex-wrap: wrap; padding: 0.5%; box-sizing: border-box; }
        .multi_ads .bn_4Set li { width: 50%; padding: 1.1%; box-sizing: border-box; }
            .multi_ads .bn_4Set li img { width: 100%; height: auto; }
.swiper-container.ads { width: 700px; height: 500px; display: block; overflow: hidden; padding: 0; }
    .swiper-container.ads img { width: 100%; height: auto; }

.item_Set { }
.pro_wrap { display: flex; flex-wrap: wrap }
    .pro_wrap li { position: relative; width: calc((100% - 30px)/4); padding: 5px 5px 2.3em; margin: 0 10px 10px 0; background: #fff; box-sizing: border-box; }
        .pro_wrap li:nth-child(4n+4) { margin: 0 0 10px; }
        .pro_wrap li .pic img { width: 100%; height: auto; }
        .pro_wrap li a.fallow, a.fallowed, a.out_of_stock { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 1; font-size: 1.125em; text-align: center; color: #fff; }
        .pro_wrap li .status_bx { position: absolute; bottom: 0px; left: 0; width: 100%; height: 2em; display: flex; justify-content: space-between; align-items: center; background: #ddd; transition: all .3s; z-index: 2; }
            .pro_wrap li .status_bx a { position: static; width: calc((100% - 1px)/2); height: 80%; display: flex; justify-content: center; align-items: center; }
                .pro_wrap li .status_bx a.floor_model { width: calc(100% - 1px); }
                .pro_wrap li .status_bx a:first-child { }
        .pro_wrap li a.cart:before { content: ' '; width: 18px; height: 18px; display: block; background: url("https://web-cpe.cdn.hinet.net/res/Resources/images/ico-cart.svg") no-repeat; margin: 0 5px 0 0; filter: brightness(100); }
        .pro_wrap li a.cart_in:before { content: ' '; width: 18px; height: 18px; display: block; background: url("https://web-cpe.cdn.hinet.net/res/Resources/images/ico-cart_in.svg") no-repeat; margin: 0 5px 0 0; filter: brightness(100); }
        .pro_wrap li a.fallow:before { content: ' '; width: 18px; height: 18px; display: block; background: url("https://web-cpe.cdn.hinet.net/res/Resources/images/ico-fallow.svg") no-repeat; margin: 0 5px 0 0; }
        .pro_wrap li a.fallowed:before { content: ' '; width: 18px; height: 18px; display: block; background: url("https://web-cpe.cdn.hinet.net/res/Resources/images/ico-fallowed.svg") no-repeat; margin: 0 5px 0 0; }

        .pro_wrap li a.out_of_stock { position: absolute; top: auto; bottom: 0px; left: 0; width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; background: rgba(34,34,34,.6); transition: all .3s; z-index: 2; }
            .pro_wrap li a.out_of_stock:after { content: '缺貨'; }

.tag_set { position: absolute; top: 0; right: 0; display: flex; justify-content: flex-end; }
/*.tag_set span{width:40px; height: 40px; display: flex; justify-content: center; align-items: center; padding:  0 0 5px; margin: 0 0 0 3px;box-sizing: border-box; font-size:.875em;line-height: 1; color:#fff; text-shadow: 0 0 1px rgba(34,34,34,.3); }*/
/*.tag_set span.bg_grn{background: url("https://web-cpe.cdn.hinet.net/res/Resources/images/bg_grn.svg") no-repeat;}*/
/*.tag_set span.bg_org{background: url("https://web-cpe.cdn.hinet.net/res/Resources/images/bg_org.svg") no-repeat;}*/
/*.tag_set span.bg_pink{background: url("https://web-cpe.cdn.hinet.net/res/Resources/images/bg_pink.svg") no-repeat;}*/
/*.tag_set span.bg_grn, .tag_set span.bg_org, .tag_set span.bg_pink{background-size: cover;}*/
.txt_org { font-size: 0.875em; color: #faa627; text-align: left; }
.swal2-modal { font-size: .9em !important; width: 40em !important; }
.swal2-container { z-index: 10000 !important; }

.alert_vip { position: absolute; z-index: 102; width: 180px; top: 100px; }
    .alert_vip > button { top: 1%; right: 1%; position: absolute; }

.image-decoration { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.text-decoration { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(45deg, #e4803d, #f8f35c); border-radius: 0 0 15px 15px; }
    .text-decoration > div { display: flex; justify-content: space-between; align-items: flex-end; flex-direction: column; }
.item-coin { position: absolute; right: -5px; top: -5px; height: auto !important; width: 35px !important; z-index: 1; }
.item-coin-random { position: absolute; height: auto !important; width: 75px !important; z-index: 1; animation: floatUpDown 2s ease-in-out infinite; cursor: pointer; }

.santa { position: absolute; right: -5px; top: -5px; height: auto !important; width: 60px; z-index: 1; cursor: pointer; }
.santa-random { position: absolute; height: auto !important; z-index: 1; animation: floatUpDown 2s ease-in-out infinite; cursor: pointer; }

.swal-title { position: relative; display: inline-block; width: 100%; }
.swal-close { position: absolute; display: block; right: 15px; top: 15px; width: 25px; height: 25px; background: url(https://web-cpe.cdn.hinet.net/res/Resources/images/close_btn_gry.svg) center no-repeat; opacity: 1; }

.table-rounded { border-collapse: collapse; border-radius: 20px; overflow: hidden; outline: 1px solid #8d8b8b; width: 50%; text-align: center; font-size: .875em; }
    .table-rounded td, .table-rounded th { border: none; border: 1px #8d8b8b solid; text-align: center; white-space: nowrap; }
    .table-rounded th { padding: 4px; }
    .table-rounded td { padding: 8px; color: #8d8b8b; }
table.employee-table { margin: auto; border: 1px #8d8b8b solid; }
    table.employee-table th { background-color: #c0e5f5; font-weight: initial; }
        table.employee-table th:nth-child(1) { width: 42.5%; }
        table.employee-table th:nth-child(2) { width: 29%; }
        table.employee-table th:nth-child(3) { width: 29.5%; }

@keyframes floatUpDown {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); /* 往上移動 */ }
    100% { transform: translateY(0); /* 回到原點 */ }
}

.product-line-through { text-decoration-line: line-through; text-decoration-color: red; }

.squre-list-style { list-style: none; counter-reset: item; }
    .squre-list-style > li { counter-increment: item; position: relative; padding-left: 1.5em; }
        .squre-list-style > li::before { content: "(" counter(item) ")"; position: absolute; left: 0; }


.circle-list-style { list-style: none; counter-reset: item; }
    .circle-list-style > div { counter-increment: item; position: relative; padding-left: 1.5em; }
        .circle-list-style > div:nth-child(1)::before { content: "①"; position: absolute; left: 0; }
        .circle-list-style > div:nth-child(2)::before { content: "②"; position: absolute; left: 0; }
        .circle-list-style > div:nth-child(3)::before { content: "③"; position: absolute; left: 0; }


.small-icon { font-size: 16px; vertical-align: text-bottom; line-height: 1; }
.announcement { display: flex; align-items: center; background-color: #d3d3d3; padding: 5px; margin: 5px 0; }
.text-top { vertical-align: top; }

.wave-list { list-style: none; text-align: left; }
    .wave-list > li { position: relative; padding-left: 5em; padding-bottom: 5px; }
        .wave-list > li::before { content: "【" attr(data-wave) "波】"; position: absolute; left: 0; }

.img-mobile { width: 75%; max-width: 100%; }

@media screen and (max-width: 1199px) {
    /*sp_Set*/
    .sp_Set { height: 404px; }
    .caret-up { border-top: none; border-bottom: 4px solid; }
    .material-symbols-outlined { font-variation-settings: 'wght' 400, 'GRAD' 0, 'opsz' 24 }
    .font-unfilled { font-variation-settings: 'FILL' 0, 'wght' 400; }
}


@media screen and (max-width: 1199px) { /*sp_Set*/
    .sp_Set { height: 404px; }
    /*multi_ads*/
    .multi_ads .bn_4Set { width: calc(100% - 565px); }
    .swiper-container.ads { width: 565px; height: 404px; }
    /*pro_wrap*/
    .pro_wrap li { position: relative; width: calc((100% - 40px)/3); }
        .pro_wrap li:nth-child(4n+4) { margin: 0 20px 20px 0; }
        .pro_wrap li:nth-child(3n+3) { margin: 0 0 20px; }
}

@media screen and (max-width: 991px) {
    .santa { width: 60px; }
    .table-rounded { width: 100%; }
    .swiper-slide .cbo-col-sm-6 { background: #000; padding: 10px; margin: 0 5px 0 0; }
        .swiper-slide .cbo-col-sm-6:last-child { margin: 0; }
    /*sp_Set*/
    .sp_Set { height: 312px; }
    /*multi_ads*/
    .multi_ads .bn_4Set { width: calc(100% - 437px); }
    .swiper-container.ads { width: 437px; height: 312px; }
    .alert_vip { position: absolute; z-index: 102; width: 180px; top: 50px; right: 5px; font-size: .75em; padding: 10px; }
    #topbar-ul { margin: 0; padding-bottom: 30px; }
    #scrollspy-container li.active a { font-weight: bold; color: blue; }
    .topbar { width: 100%; position: fixed; bottom: 0; right: 0; z-index: 99; padding: 0; }
        .topbar > ul { opacity: 0.9; list-style: none; background: #b0b0c4; padding: 0; display: flex; justify-content: flex-start; overflow: scroll; width: 100%; }
            .topbar > ul > li { font-size: 1.2em; margin: 5px 15px 0 15px; word-break: keep-all; }

    .route { padding: 0 0 5px 0; }
    .img-mobile { width: 100%; }
}

.category_menu { display: none; }

@media screen and (max-width: 767px) {
    .m_hide { display: none; }
    .m_block { display: block; }
    .main_bx { padding: 70px 10px 20px; }
    /**/
    .wrap_bx { margin: 0 0 20px; }
        .wrap_bx h3 { font-size: 1em; }
    /*swiper*/
    .swiper-slide .col-xs-3 { position: relative; }
        .swiper-slide .col-xs-3:last-child { margin: 0; }
    /*sp_Set*/
    .sp_Set { height: auto; display: block; }
        .sp_Set li:first-child { width: 100%; }
        .sp_Set li:last-child { width: 100%; }
        .sp_Set li:first-child .pic { width: 100%; }
        .sp_Set li:last-child .pic { width: 50%; }
    .special_bx .swiper-pagination-custom { justify-content: center; }
    /*multi_ads*/
    .multi_ads { display: block; }
        .multi_ads .bn_4Set { width: 100%; }
            .multi_ads .bn_4Set li { width: 50%; }
    .swiper-container.ads { width: 100%; height: 0; padding-bottom: 71.5%; }
    /*pro_wrap*/
    .pro_wrap li { position: relative; width: calc((100% - 10px)/2); margin: 0 10px 10px 0; background: #fff; box-sizing: border-box; }
        .pro_wrap li:nth-child(4n+4), .pro_wrap li:nth-child(3n+3) { margin: 0 10px 10px 0; }
        .pro_wrap li:nth-child(2n+2) { margin: 0 0 10px; }
    /*category_menu*/
    .category_menu { display: block; position: fixed; top: 90px; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; z-index: 99; overflow-y: scroll; }
        .category_menu li { background: #333; }
            .category_menu li a { color: #999; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; }
        .category_menu .icon_right2 { height: auto; }
        .category_menu .open .icon_right2::before { transform: rotate(90deg); }
    .layer_third { display: none; }
    .open .layer_third { display: block; }
    .layer_third li { background: #666666; }
        .layer_third li a { color: #cccccc; padding: 10px 15px 10px 30px; }
    .pro_name { font-size: 13px; }
}

.icon.traced { font-size: 18px; color: orange; }
    .icon.traced:after { content: '已追蹤'; font-size: 13px; color: orange; display: flex; justify-content: space-around; }
.icon.untraced { font-size: 18px; color: white; }
    .icon.untraced:after { content: '我要\A追蹤'; font-size: 13px; color: white; display: flex; justify-content: space-around; white-space: pre; }
.num { font-size: 24px; }

.point_period { position: absolute; bottom: 0px; background: #ccc; font-size: 12px; width: 100%; color: white; }
.relative { position: relative; }

.dropdown-menu-center { left: 50% !important; right: auto !important; text-align: center !important; transform: translate(-50%, 0) !important; width: 85%; }

.li_pavilion { padding-top: 10px; text-align: left; }

.pavilion { background: red; color: white; border-radius: 5px; font-size: 14px; padding: 3px; margin: 3px 0 5px 5px; word-break: keep-all; }
.pavilion_desc { color: #aaa; font-size: 14px; }

.gift_full { font-size: 22px; background-color: rgba(200, 200, 200, 0.9); width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
div.pic { position: relative; }
    div.pic > span.status-bx { position: absolute; bottom: 0; left: 0; font-size: 1.5em; width: 100%; background-color: #585858; color: white; font-weight: bold; opacity: 0.9; }
span.cart.status-bx { position: absolute; bottom: 0; left: 0; font-size: 1.5em; width: 100%; background-color: #585858; color: white; font-weight: bold; opacity: 0.9; }

.countdown { font-size: 0.75em; padding: 2px; color: white; font-weight: bold; background: black; border-radius: 5px; }
.swiper_title { font-size: 1.5em; font-weight: bold; color: #000000; margin-left: 5px; }

.swiper-button-prev { background: transparent !important; color: rgba(34,34,34,40%) !important; }
    .swiper-button-prev:hover { background: rgba(34,34,34,40%) !important; color: #fff !important; }
.swiper-button-next { background: transparent !important; color: rgba(34,34,34,40%) !important; }
    .swiper-button-next:hover { background: rgba(34,34,34,40%) !important; color: #fff !important; }

.text-red { color: red; }
.text-point { color: #5fbb54; }
.text-hamibuy { color: var(--carttext-color); font-weight: bold; }
.text-link { color: blue; text-decoration: underline; }
    .text-link:hover { color: blue; text-decoration: underline; }
.text-blue { color: blue; }

.circle-list { list-style: none; counter-reset: circle-counter; margin-left: 0; padding-left: 0; }
    .circle-list li { counter-increment: circle-counter; position: relative; padding-left: 2em; padding-left: 1.5em; }
        .circle-list li::before { content: "①"; }

@media (max-width: 991px) {
    .seven-cols .col-xs-1-of-4 { width: 25%; *width: 25%; }
    span.cart.status-bx { font-size: 1em; }
}

@media (min-width: 992px) {
    .seven-cols .col-md-1-of-7 { width: 14.285714285714285714285714285714%; *width: 14.285714285714285714285714285714%; }

    .md-margin { margin-left: 40px; margin-right: 40px; }
}

/*首頁圖片label*/
.label-new { font-size: 14px; position: absolute; top: 1px; right: 1px; background: #ff2f60; color: white; padding: 1px 10px; border-radius: 5px; z-index: 1; }
.label-hot { font-size: 14px; position: absolute; top: 1px; right: 1px; background: #ff5722; color: white; padding: 1px 10px; border-radius: 5px; z-index: 1; }
.label-point { font-size: 14px; position: absolute; top: 1px; right: 1px; background: #9fdc7e; color: white; padding: 1px 10px; border-radius: 5px; z-index: 1; }
.label-recommand { font-size: 14px; position: absolute; top: 1px; right: 1px; background: red; color: white; padding: 1px 10px; border-radius: 5px; z-index: 1; }

.coupon-price { font-size: 16px; border: 1px solid; padding: 1px; }
div.special-container { text-align: right; font-size: 1.25em; margin-bottom: 3px; font-weight: bold; display: flex; align-items: baseline; justify-content: flex-end; line-height: 14px; height: 1.25em; }
span.special-container { display: flex; justify-content: flex-end; margin-bottom: 3px; align-items: baseline; line-height: 14px; }
.special-price { font-size: 16px; border: 1px solid; padding: 1px; }
.origial-price { font-size: 0.75em; color: #9b9b9b !important; font-weight: bold; }

.collapse-main-bar { background: #fff; width: 75%; }
ul.collapse-ul { }
    ul.collapse-ul > li.collapse-li { padding: 0.45em 0; font-size: 1em; display: flex; justify-content: space-between }
        ul.collapse-ul > li.collapse-li > a.cate_name { text-align: left; width: 60%; }
        ul.collapse-ul > li.collapse-li > a.cate_arrow { text-align: right; width: 40%; }
        ul.collapse-ul > li.collapse-li.second-li { padding-left: 2em; }
        ul.collapse-ul > li.collapse-li.third-li { padding-left: 4em; }

.left { text-align: left; }


.btn-outline-primary { background: none; border: #428bca 1px solid; color: #428bca; }
    .btn-outline-primary:hover { color: white; background: #428bca; }
.btn-outline-danger { background: none; border: #dc3545 1px solid; color: #dc3545; }
    .btn-outline-danger:hover { color: white; background: #dc3545; }
.coupon-background { background: #f5f5f5; position: relative; }
.coupon-radius { border-radius: 15px; padding: 10px 15px; }
.coupon-border { border-bottom: #adadad solid 1px; padding: 10px 0; display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; flex-direction: column; align-content: flex-start; }
.space { height: 0.5em; }

.order-status { display: flex; margin-top: 5px; margin: 0; }
    .order-status > div { padding: 0; width: 85px; margin: initial; }
        .order-status > div:before { content: ""; width: 7px; height: 7px; background: #a7a7a7; right: 0; top: -2.5px; border-radius: 50%; position: absolute; }
        .order-status > div > span { width: calc(100% - 5px); display: block; border-top: 2px solid #a7a7a7; text-align: right; padding-right: 2px; color: #a7a7a7; font-size: 1.2rem; }
        .order-status > div.order-status-selected:before { background: green; }
        .order-status > div.order-status-selected > span { border-top: 2px solid green; color: green; }
        .order-status > div.order-status-selected-logistics:before { background: #2424be; }
        .order-status > div.order-status-selected-logistics > span { border-top: 2px solid #2424be; color: #2424be; }
            .order-status > div.order-status-selected-logistics > span > a { color: #2424be; text-decoration: underline; text-underline-offset: 1px; }
.transaction_no { color: #fa565a; font-weight: bold; font-size: 1.5rem; letter-spacing: 1px; padding: 0 10px; }

.mobile-inverse { display: flex; flex-direction: row; justify-content: flex-end; }

.btn-secondary { border: 1px solid black; }


ul.cart-step { font-size: 2rem; display: flex; justify-content: space-evenly; color: #bebdba; font-weight: bold; }
    ul.cart-step > li { display: flex; flex-direction: column-reverse; align-items: center; width: 25%; position: relative; }
        ul.cart-step > li:before { content: ""; position: absolute; height: 5px; width: 100%; background: #bebdba; transform: translateY(-50%); bottom: 22.5px; }
        ul.cart-step > li > .cart-step-number { display: flex; align-items: center; justify-content: center; border-radius: 50%; height: 50px; width: 50px; color: #fff; background: #bebdba; z-index: 1; }
        ul.cart-step > li.cart-selected { color: var(--cart-color); }
            ul.cart-step > li.cart-selected:before { background: var(--cart-color); }
            ul.cart-step > li.cart-selected > .cart-step-number { background: var(--cart-color); color: white; }

.cart-itemname-container { padding-left: 15px; }
.cart-itemname { font-size: 1.5rem; }
.cart-spec-container .form-control { height: 2rem; width: 150px; }

.cart-price { font-size: 2rem; color: #e6003d; text-align: right; }

.cart-link { text-decoration: underline; color: #8b8b8b; }

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

.mobile-horz { margin-top: 5px; }
.title_name { text-align: right; margin-right: 15px; }

label { font-weight: initial; }

.title_name { display: flex; flex-direction: column; }

.index_point_bx { font-size: 1em; }

@media only screen and (max-width: 899px) {
    .index_point_bx { font-size: 0.8em; }

    .transaction_no { padding: 0; }

    ul.cart-step { font-size: 1.25rem; }
        ul.cart-step > li > .cart-step-number { height: 25px; width: 25px; color: #fff; }
        ul.cart-step > li:before { height: 2.5px; bottom: 10.25px; }
    .cart-spec-container { padding: 0; }
        .cart-spec-container .form-control { font-size: 1.25rem; max-width: 90px; }
    .cart-itemname-container { line-height: 1.25rem; padding: 0; }
    .cart-itemname { font-size: 1.25rem; word-break: break-all; display: flex; flex-direction: column; }

    .mobile-horz { flex-direction: column; margin-top: 5px; }
    .title_name { text-align: left; margin-right: initial; display: flex; justify-content: space-between; align-items: flex-end; flex-direction: row; }
        .title_name .mpr-5 { padding-right: 7.5px; }

    label { font-size: 1.2rem; }


    input[type="radio"], input[type="checkbox"] { margin: 0 !important; }
}

/*建議關鍵字auto complete*/
.suggest-container { position: relative; }
    .suggest-container > .suggest { overflow-x: hidden; overflow-y: auto; position: absolute; z-index: 102; width: max-content; background: white; padding: 15px; border-radius: 5px; margin-top: 5px; height: auto; max-height: 500px; border: 1px solid gray; }
        .suggest-container > .suggest > div { text-align: left; }
            .suggest-container > .suggest > div > span { font-size: 16px; font-weight: bold; }
        .suggest-container > .suggest > ul.suggest-list { text-align: left; }
            .suggest-container > .suggest > ul.suggest-list > li:first-child { margin-top: 0; }
            .suggest-container > .suggest > ul.suggest-list > li { font-size: 16px; margin-top: 15px; color: black; font-weight: bold; padding-left: 5px; display: flex; align-items: center; width: 100%; }
                .suggest-container > .suggest > ul.suggest-list > li > span { font-size: 16px; }
                .suggest-container > .suggest > ul.suggest-list > li > i.icon_search { position: relative !important; }
                    .suggest-container > .suggest > ul.suggest-list > li > i.icon_search::before { color: black; }
        .suggest-container > .suggest > div.recommend { text-align: left; margin-top: 20px; }
            .suggest-container > .suggest > div.recommend > span { font-size: 1.5em; }
.disabled-menu { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; z-index: 100; }

.suggest-container > .suggest > ul.recommend-list { display: flex; flex-wrap: wrap; margin-top: 10px; justify-content: space-around; }
    .suggest-container > .suggest > ul.recommend-list > li { padding: 5px; background-color: #e5e5e5; border-radius: 15px; margin: 0 5px; }

@media only screen and (max-width: 899px) {
    .suggest-container > .suggest > ul.recommend-list > li { margin: 5px; }
        .suggest-container > .suggest > ul.recommend-list > li:nth-child(1),
        .suggest-container > .suggest > ul.recommend-list > li:nth-child(2),
        .suggest-container > .suggest > ul.recommend-list > li:nth-child(3),
        .suggest-container > .suggest > ul.recommend-list > li:nth-child(4) { background: gold; }
    .suggest-container > .suggest { width: 92.1%; background: #f7f7f7; }
        .suggest-container > .suggest > ul.recommend-list { justify-content: normal; }
}

@media screen and (max-width: 767px) {
    .sidebar-offcanvas .container { overflow: scroll; }
}