h1{position: absolute;top: 0;left: 0;z-index: -1;}
.flex{display: flex;}#container img{width: 100%;}
#header+.c-box+#menu_2022{display: none;}
.fa-plus{color: green;}
.fa-minus{color: red;}

#container{max-width: 1400px;margin: auto;margin-top: 10px;font-size: 12pt;font-family: "Droid Sans", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif,"微軟正黑體","Microsoft JhengHei", "宋体","SimSun";}
#container-main{width: calc(100% - 188px);position: relative;}
#container-main .tool{display: flex;margin-bottom: 8px;justify-content: space-between;}
#left-slider{width: 160px;margin-right: 8px;position: relative;}
#left-slider .filterBY{border: 1px solid #999;box-shadow:3px 2px 3px 0 #999;padding: 0 5px 1em;}
#left-slider .filterBY .title{border-bottom: 1px solid rgb(196, 196, 196);padding: .5em 8px;cursor: pointer;margin:8px 0 5px;font-weight: bold;color: rgb(16, 30, 75);}
#left-slider .filterBY .title:hover{color: rgb(255, 115, 0);}
#left-slider .filterBY .title .fa-solid{float: right;}
#left-slider .filterBY .row{margin-top: 8px;}
#left-slider .filterBY input{width: 100%;box-sizing: border-box;margin-bottom: 5px;padding:5px;border: 1px solid #bdbdbd;border-radius: 4px;}
#left-slider .filterBY input:nth-child(2){margin-bottom: 5px;}
#left-slider .filterBY .filter-list span.row{padding:5px 0;background: none;}
#left-slider .filterBY .filter-list span.row.active{background:none;}
#left-slider .filterBY .filter-list span.row:hover{background:none;}
#left-slider .filterBY .filter-list div{width:5em;font-size: 1em;text-align: center;padding: 4px 0;background: rgb(255, 123, 0);box-shadow: 0 0 2px rgb(165, 99, 0);color: #fff;font-weight: bold;}
#left-slider .filterBY .filter-list div:hover{background: rgb(228, 110, 0)}
/* #left-slider .filterBY .filter-list{display: none;} */
#left-slider .filterBY .filter-list.active{display:block;}
#left-slider .filterBY .filter-list span{width: 100%;display: block;padding: 5px 0 5px 8px;margin: 3px 0;box-sizing: border-box;background: #efefef;cursor: pointer;user-select: none;}
#left-slider .filterBY .filter-list span:hover{background: #1549a8;color: #fff;}
#left-slider .filterBY .filter-list span.active{background: #072968;color: #fff;}
#left-slider .hotcat{margin-top: 1em;padding: 0 0 8px;border: 1px solid #9b9b9b;box-shadow:3px 2px 3px 0 #999;}
#left-slider .hotcat h2{padding: 8px 0 8px 24px;box-sizing: border-box;margin-bottom: 6px;font-weight: bold;display: block;
background: #007ac1;
background: -moz-linear-gradient(left,rgba(0,122,193,1) 0,rgba(0,77,160,1) 50%,rgba(0,62,146,1) 100%);
background: -webkit-linear-gradient(left,rgba(0,122,193,1) 0,rgba(0,77,160,1) 50%,rgba(0,62,146,1) 100%);
background: linear-gradient(to right,rgba(0,122,193,1) 0,rgba(0,77,160,1) 50%,rgba(0,62,146,1) 100%);
color: #fff;
text-align: center;
padding: 6px;
cursor: pointer;
}
#left-slider .hotcat .cat-list{box-sizing: border-box;width: 100%;display: block;cursor:default;padding: 0 4px;}
#left-slider .hotcat .cat-list>span{display: flex;align-items: center;justify-content: flex-start;padding: 2px;box-sizing: border-box;border-bottom: 2px solid #e4e4e4;cursor: pointer;}
#left-slider .hotcat .cat-list>span p{width: 100%;}
#left-slider .hotcat .cat-list>span.active{/*background: #ff5e00;color: #fff;border-right: 3px solid rgb(29, 241, 29);*/}

#left-slider .check_all{margin-top:-1px;margin-right: 3px;box-sizing: border-box;font-size: .85em;color: #000;display: flex;justify-content: space-between;align-items: center;font-weight: bold;}
#left-slider .check_all span{display: block;content: "";border: 1px solid rgb(155, 155, 155);background: #fff;width: 14px;height: 14px;box-sizing: border-box;margin-top: 1px;border-radius: 2px;}
#left-slider .check_all span.has{display:flex !important;align-items: center;justify-content: center;}
#left-slider .check_all span.has::before{background: #4d8bfd;width: 8px;height: 8px;display: block;content:"";}
#left-slider .check_all span.all{background: #4d8bfd;display: flex;justify-content: center;}
#left-slider .check_all span.all::before{display:block;width:10px;height:10px;content:"";background:#fff;margin-top:1px;clip-path:polygon(15% 40%,45% 65%,95% 0,100% 22%,45% 100%,15% 65%,0 65%)}

#left-slider .hotcat .cat-listii label{display: flex;flex-direction:row-reverse; align-items: center;justify-content: flex-end;padding: 3px 2px;box-sizing: border-box;}

#left-slider .hotcat .cat-listii li{font-size: .88em;}
#left-slider .hotcat .cat-listii li[data-color="9"]{display: none !important;}
#left-slider .hotcat .cat-list input[type="checkbox"]{display: block;margin-right: 8px;}
#left-slider .cat_list{display: none;position: absolute;left: 160px;
    background: linear-gradient(138.82deg, #FFFFFF -5.85%, #EEEEEE 98.31%, rgba(220, 220, 221, 0.97) 119.83%);
    padding: 6px 8px;box-sizing: border-box;border: 3px solid rgb(50, 136, 195);overflow-y: auto;overflow-x: hidden;}
#left-slider .cat_list ul{flex-wrap: wrap;width: 1200px;padding: 6px 0 0 18px;box-sizing: border-box;max-width: 1200px;}
#left-slider .cat_list h3{width: 100%;font-weight: bold;font-size: 1.3em;margin:0 0 8px 12px;color: rgb(255, 0, 120);text-shadow: 1px 1px 3px rgb(180, 180, 180);}
#left-slider .cat_list h3>b{display: none;}
#left-slider .cat_list li{width:15.666667%;padding: 8px;box-sizing: border-box;cursor: pointer;margin:0 1% 8px 0;box-shadow: 1px 1px 2px 0 #8f8f8f;background: #fff;}
#left-slider .cat_list li:active{background: #f3f3f3;color: rgb(58, 58, 58);user-select: none;}
#container-main>.row{position: sticky;top: 0;}
#g_sort{display: flex;justify-content: space-between; align-items: center;width: 100%;margin-bottom:12px;border-bottom: 2px solid #005ec9;background: #f8f8f8;}
#g_sort .mobile{display: none;}
#g_sort .search{position: relative;display: flex;align-items: center;align-items: center;}
#g_sort .search label{margin: 0;}
#g_sort .search input{margin-left: 5px;padding:2px 8px;box-sizing: border-box;width: 150px;}
#g_sort .search .submiit{position: absolute;right: 3px;top: 3px;cursor: pointer;}
#g_sort ul{display: flex;box-sizing: border-box;}
#g_sort ul li{margin-right: 3px;display: flex;align-items: center;cursor: pointer;padding:8px 12px;font-size: .95em;}
#g_sort ul li.active{background: rgb(8, 113, 199); color: #fff;font-weight: bold;}
#g_sort ul li i{margin-left: 3px;font-size: .8em;margin-top: 5px;}
#g_list{flex-wrap: wrap;}
#left-slider .cat_list li.keep{background: rgb(19, 80, 172);color: #fff;}
#g_list .item{width:20%; padding: 0 4px;box-sizing: border-box;margin-bottom: 8px;}
#g_list .g_box{border: 1px solid #e4e4e4;display: block;box-shadow: 0 0 3px 0 rgb(155, 155, 155);}
#g_list .item .img_box{width: 232px;height: 232px;display: block;overflow: hidden;position: relative;z-index: 1;}
#g_list .item_id{font-size: .85em;position: absolute;z-index: 5;color: #000;background: rgba(228, 228, 228, 0.75);top: 3px;left: 3px;padding: 3px 5px;}
#g_list .item_hot{font-size: .85em;position: absolute;z-index: 5;background: #7c6700;color: #fff;bottom: 5px;right: 5px;border-radius: 8px;padding: 2px 6px;}
#g_list .item_hot b{font-size: 1.25em;margin-left: 3px;}
#g_list a{color: #202020;}
#g_list a:hover{color: rgb(51, 146, 255);}
#g_list a>p{white-space: nowrap;overflow: hidden;}
#g_list a>p,#g_list a>h3{text-align:left;padding:1px 3px;box-sizing:border-box;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height: 2.65em;overflow: hidden;}
#g_list .pr_box{flex-wrap: wrap;justify-content: space-between;padding: 5px;align-items: center;}
#g_list .pr_box span{display: flex;align-items: center;box-sizing: border-box;width: 50%;overflow: hidden;margin: 1px 0 1px;}
#g_list .pr_box .price b{max-width:3.2em;overflow: hidden;display: block;}
#g_list .pr_box span:nth-child(even){justify-content: flex-end;}
#g_list .pr_box span::before{display:inline-block;font-size: .6em;color:#5d5d5d;margin-right: 3px;width: 45px;text-align-last: justify;}
#g_list .price{color: red;font-size: 1.2em;letter-spacing: -1px;}
#g_list .price::before{content:"參考單價";}
#g_list .start_order{color: #202020;font-weight: bold;}
#g_list .start_order::before{content:"起訂量";}
#g_list .t_price{color: red;font-size: 1.2em;letter-spacing: -1px;}
#g_list .t_price::before{content:"總價";text-align-last: justify;}
#g_list .running{width: 100%;display: block;}

.page_list{display: flex;flex-wrap: wrap;}
.page_list span{width:30px;height:30px;display:flex;justify-content:center;align-items:center;border:#dbdbdb 1px solid;margin:5px;cursor:pointer;box-sizing:border-box;}
.page_list span.active{background: #666;color: #fff;}
#unit_range{display: flex;align-items: center;}
#unit_range .ui-widget-header{background: rgba(255, 153, 0, 0.75);}
.ui-widget.ui-widget-content{border: 1px solid rgba(0, 0, 0, 0.3) !important;}
#unit_range .slider{width: 250px;}
#unit_range .scale{position: relative;height: 18px;width: 100%;z-index: 1;}
#unit_range .scale b{font-size: .6em;position: absolute;bottom: 0;}
#unit_range .scale b::before{content: ""; display: block;background: #8b8b8b;width: 2px;height: 9px;position: absolute;top:-30px;left:50%;z-index: 0;}
#unit_range .scale b:nth-child(1){left:15%}
#unit_range .scale b:nth-child(2){left:32%}
#unit_range .scale b:nth-child(3){left:48%}
#unit_range .scale b:nth-child(4){left:65%}
#unit_range .scale b:nth-child(5){left:82%}
#slider-range{width: 250px;margin-top: 3px;position: relative;z-index: 9;background:none;}
#unit_range h2{font-weight: bolder;color: rgb(20, 40, 105);}
#slider-range .slider{display: flex;}
#slider-range .ui-slider-handle{width: 10px;height: 18px;top: -3px;border-radius:8;}
#slider-range .ui-state-default{border: 1px solid rgba(175, 175, 175, 0.7);}
#slider-range .ui-state-active{background: rgb(255, 80, 0);border: 1px solid rgba(228, 228, 228, 0.3);}
#slider-range span:focus-visible{outline:1px solid #4d4d4d;}

#container-main .tool{margin-bottom:0;padding-left: 8px;box-sizing: border-box;}
#container-main .tool .page{display: flex;align-items: center;color: #3d3d3d;}
#container-main .tool .prv,#container-main .tool .next{cursor: pointer;border:1px solid #c6c6c6;background: #4A9AE7;user-select: none;padding: 2px 3px;color: #fff;margin-right: 8px;}
#amount{display: flex;justify-content: space-between;align-items: center;padding-right: 8px;}

.otherUI{display: flex;align-items: center;justify-content: center;padding:0;}
.otherUI .reload{background: #3c64af;color: #fff;width: 100%;display: block;text-align: center;padding: 8px 6px;border:1px solid #666;box-sizing: border-box;cursor: pointer;user-select: none;}
.otherUI .share{color: #6e6e6e;font-weight: bold;display: flex;align-items: center;min-width:50px;justify-content: space-between;;padding:8px;margin-left: 8px;background: #fdfdfd;border: 1px solid rgb(226, 226, 226);cursor: pointer;}
.otherUI .share_box .c_box{width: 100%; height: 100vh; content: '';background: rgba(0, 0, 0, 0.7);left: 0;top: 0;z-index: 9999;position: fixed;}
.otherUI .share_box{display: none;}
#unit_range .share_box .row{display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #ececec;}
#unit_range .share_box .row::before{display: none;}
#unit_range .share_box .row::after{display: none;}
.share_box .row font{padding: 8px 12px;display: block;font-weight: bold;}
.share_box .row .fa-xmark{padding: 0 12px;font-size: 20px;cursor: pointer;}
.otherUI .share_box .container{display: block;content:'';width: 470px;height: 230px;background: #fefefe;position: fixed;z-index:10000;left:calc(50% - 235px);}
.otherUI .share_box .sto{display: flex;width: 100%;height: 100px;padding: 5px 12px;box-sizing: border-box;align-items: center;justify-content:flex-end;}
.otherUI .share_box .sto i{width: 48px;height: 48px;display: flex;font-size: 32px;justify-content: center;align-items: center;border-radius:100%;color: #fff;margin-right: 12px;cursor: pointer;}
.otherUI .share_box .url{background: #f5f5f5;border: 2px solid #979797;width: 85%;height: 46px;margin: auto;display: flex;align-items: center;justify-content: space-between;padding:0 8px;box-sizing: border-box;margin-top: 24px;}
.otherUI .share_box .url input{border: none;width: 80%;padding: 5px;background: none;}
.otherUI .share_box .url span{color: #007ac1;cursor: pointer;font-weight: bold;width: 20%;text-align: center;}
i.fa-facebook{background: #3b5998;}
.otherUI .share_box .sto i.fa-line{color: #00B900;font-size: 54px; border-radius: 100%;overflow: hidden;height: 46px;padding-top: 1px;}
i.fa-twitter{background: rgb(26,140,216);}
i.fa-pinterest-p{background:#df0022;}
.sto i.fa-envelope{background:#525252;}

input[type="checkbox"]{
    display: none;
}
#container-main .rCheck{margin:0 15px;}
#container-main label{display: flex;align-items: center;margin-bottom:8px;font-weight: bold;}
#container-main label:last-child{margin: 0em;}
input[type="checkbox"]+span{display: block;content: "";width: 16px;height: 16px;border: 1px solid #000;margin-right: 3px;}
input[type="checkbox"]:checked+span{box-shadow:0 0 3px #000;background:blue;display:flex;justify-content:center;align-items:center;}
input[type="checkbox"]:checked+span::before{display:block;width:13px;height:13px;content:"";background:#fff;margin-top:-1px;clip-path:polygon(15% 40%,45% 65%,95% 0,100% 22%,45% 100%,15% 65%,0 65%)}
#left-slider .rCheck{display: block;background: rgb(226, 241, 255);box-shadow: 0 0 1px 2px #ccc;margin-bottom: 5px;padding:8px 3px;box-sizing: border-box;}
#left-slider .otherUI{margin-top: 8px;}
#container-main .tool .mobileF{display: none;}

.not-found{color: red;width: 100%;text-align: center;font-size: 2em;font-weight: bolder;}
.not-found+.reload{margin:auto;background:#3c64af;color:#fff;display:block;text-align:center;padding:8px 12px;margin-top:1em;border:1px solid #666;box-sizing:border-box;cursor:pointer;user-select:none;}
.goTop{display: flex;align-items: center;justify-content: center;font-size: 16pt;color: #fff;width: 40px;height: 40px;content: "";background-color: #199fff;position: fixed;bottom: 8px;right: 8px;cursor: pointer;}

@media only screen and (max-width:1365px){
    #g_list .item .img_box{width: 100%;height: inherit;}
}
@media only screen and (max-width:1280px){
    #g_list .pr_box .t_price,#g_list .pr_box .price{width: 100%;justify-content: flex-start !important;}
    #g_list .pr_box span b{max-width: 100%;}
    #unit_range{flex-wrap:wrap;max-width: 60%;}
    #container-main .rCheck{width:calc(100% - 80px);display: flex;align-items: center;margin:0;}
    #container-main label{margin: 0 12px 0 0;}
    .otherUI{margin-top: 12px;}
}

@media only screen and (max-width:1024px){
    /*#left-slider{display: none;}*/
    /* #container-main{width: 100%;} */
    #g_list .item{width: 25%;}
    #left-slider .filterBY .title{font-size: .95em;}
}
@media only screen and (max-width:960px){
    #container-main .tool .page span:first-child{display: none;}
    #unit_range{flex-wrap:wrap;max-width: 75%;}
    #menu_2022.m_mod{display: flex;}
    #g_sort ul{display:none;}
    #g_sort .mobile{display:flex;}    
}

@media only screen and (max-width:768px){
    #container{position: relative;}
    #container-main .tool .page{display: none;}
    #unit_range{max-width:none;width: 100%;}
    #left-slider{display: none;position: absolute;z-index:9;background: #fff;top:148px;width: 100%;}
    #left-slider .filterBY{display: none;}
    #left-slider .filterBY .title{display: none;}
    #left-slider .filterBY .filter-list{display: none;}
    #left-slider h2{display: none;}
    #left-slider .hotcat{display: none;margin-top: 0;flex-wrap: wrap;}
    #left-slider .hotcat .cat-list{width: 50%;padding: 10px 12px;}
    #left-slider .cat_list{left: 0;width: 100%;border: none;height:inherit !important;padding-bottom: 3em;}
    #left-slider .cat_list ul{width:100%;padding: 0;}
    #left-slider .cat_list li{width: 32.3333%;}
    #left-slider .filterBY .filter-list span{display: block !important;}
    #left-slider .hotcat h2{display: none;}
    #left-slider .hotcat .cat-list:last-child{display: none !important;}
    #left-slider .check_all{width: 100%;}    
    .otherUI .reload{display: none !important;}
    #container-main .tool{flex-wrap: wrap;padding-left: 3px;margin-bottom: 3px;}
    #container-main .tool .mobileF{display: block;width: 100%;margin-top: 5px;padding-top: 3px;border-top: 2px solid rgb(235, 235, 235);}
    #container-main .mobileF ul{display: flex;width: 100%;}
    #container-main .mobileF li{padding:5px;margin-right: 2px;background: #ffc8b2;font-weight: bold;}
    #container-main .mobileF li:last-child{background: #b62222;color: rgb(235, 235, 235);}
    #container-main .mobileF li.active{background:#6b1709;color: #fff;border:1px solid #585858;box-sizing: border-box;}
    #container-main .mobileF li.active font{color: rgb(255, 180, 180);}
    #container-main .mobileF li i{margin-right: 2px;color: rgb(150, 150, 150);}
    #container-main .mobileF li.active i{color: #fff;}
    #container-main{width: 100%;}
    
    #left-slider .hotcat{position: relative;}
    #left-slider .hotcat .cat-listii{position: absolute;z-index: 9;display: block;width:100%;left: 0;border: 2px solid rgb(180, 180, 180);box-sizing: border-box;}
    #left-slider .cat-listii ul{background: #f8f8f8;padding: 0 3px;border: 2px solid #e9e9e9;box-sizing: border-box;width: 100%;display: flex;flex-wrap: wrap;}
    #left-slider .cat-listii ul>div{display: flex;width: 100%;flex-wrap: wrap;}
    #left-slider .cat-listii li{width: 50%;padding: 5px 0;}
    #left-slider .hotcat .cat-listii li{font-size: 1em;}
    #left-slider .hotcat .cat-listii label{justify-content: flex-start;}
    #left-slider label span{margin-right: 8px;}
}

@media only screen and (max-width:640px){
    .otherUI .share{padding: 3px 6px;}
    #g_list .item{width: 33.3333%;}
    #g_sort ul li{padding: 8px 5px;}
    #g_list a>p,#g_list a>h3{height: auto; -webkit-line-clamp: 1;}
    #g_list .pr_box .price,#g_list .pr_box .start_order{width: auto;}
    #g_list .pr_box span::before{width: auto;}
    #g_list .pr_box span.t_price{width: 100%;}
}

@media only screen and (max-width:528px){    
    #unit_range{flex-wrap:wrap;max-width: 100%;}
    #g_sort{flex-wrap: wrap;}    
    #g_sort .search{width: 100%;margin:0 8px 5px 0;}
    #g_sort .search label{width: 100%;display: flex;justify-content: end;}
}

@media only screen and (max-width:480px){
    #g_list .item{width: 50%;}
    #container-main .mobileF li{font-size: .9em;}
    .otherUI .share_box .container{width: 100%;left: 0;}
}

@media only screen and (max-width:415px){
    #container-main .mobileF li i{display: none;}
}