@charset "UTF-8";
:root {
    --maxWidth: 1186px;
    --bannerBg: #8e919a;
    --oldProductColorLight:#dfcda6;
    --oldProductColor: #B4A572;
    --oldProductColorDark: #8e7233;
    --newProductColorLight: #94b0be;
    --newProductColor: #708d9e;
    --newProductColorDark: #4F646F;
    --instockColorLight: #ab746a;
    --inStockColor: #804e44;
    --inStockColorDark: #422017;

    /* --oldProductColor: #b41614;
    --newProductColor: #0a9396;
    --inStockColor: #0088d6; */

    --shadowLineColor: #c9c9c9;
    --fontColor: #252525;
    --aHover: var(--oldProductColor);
    --aGrey: #c0c0c0;
    --color01: var(--oldProductColorDark);
    --color02:#535353; /* 產品內頁文字 */
    --color03:#252525;
    --color04:#d3d3d3;
    --color05:#c3c3c3;
    --color06:#7d7d7d;
    --color07:#b00400;
    --color08:#ffefef;
    --color09:#e8f0f0;
    --color10:#ecf2f7;
    --color11:#6e376f; /* news date 文字顏色 */
    --color12:#f6d3f7; /* news date 底色 */
    --color13:#c19dc2; /* news date shadow */
    --lineColor:#00b900;
    --colorBlackNum: 0 0 0;
    --colorWhiteNum: 255 255 255;
    --colorRedNum: 229 192 110;
    --colorBlack:#000;
    --colorWhite:#fff;
    --grey01:#cbcbcb;
    --grey02:#909090;
    --grey03:#e3e3e3;
    --grey04:#c7c7c7;
    
    --btnColorOneLight: #B38CB4;
    --btnColorOne: #9b5f9c;
    --btnColorTwoLight: #b8c5db;
    --btnColorTwo: #889ab8;

    --iconRedBg: linear-gradient(to bottom, var(--oldProductColorLight), var(--oldProductColorDark));
    --iconGreenBg: linear-gradient(to bottom, var(--newProductColorLight), var(--newProductColorDark));
    --iconBlueBg: linear-gradient(to bottom, var(--instockColorLight), var(--inStockColorDark));

    --btnRedBg: linear-gradient(to top, var(--oldProductColor), var(--oldProductColorDark) 76%, var(--oldProductColor));
    --btnGreenBg: linear-gradient(to top, var(--newProductColor), var(--newProductColorDark) 76%,  var(--newProductColor));
    --btnBlueBg: linear-gradient(to top, var(--inStockColor), var(--inStockColorDark) 76%, var(--inStockColor));
    --btnOrangeBg: linear-gradient(to top, var(--btnColorOneLight), var(--btnColorOne) 76%, var(--btnColorOneLight));
    --btnGreyBg: linear-gradient(to top, var(--btnColorTwoLight), var(--btnColorTwo) 76%, var(--btnColorTwoLight));

    --btnRedBgHover: linear-gradient(to bottom, var(--oldProductColor), var(--oldProductColorDark) 76%, var(--oldProductColor));
    --btnGreenBgHover: linear-gradient(to bottom, var(--newProductColor), var(--newProductColorDark) 76%,  var(--newProductColor));
    --btnBlueBgHover: linear-gradient(to bottom, var(--inStockColor), var(--inStockColorDark) 76%, var(--inStockColor));
    --btnOrangeBgHover: linear-gradient(to bottom, var(--btnColorOneLight), var(--btnColorOne) 76%, var(--btnColorOneLight));
    --btnGreyBgHover: linear-gradient(to bottom, var(--btnColorTwoLight), var(--btnColorTwo) 76%, var(--btnColorTwoLight));

    --cardRedTopBg: linear-gradient(to right, var(--oldProductColor) 55%, var(--oldProductColorDark) 100%);
    --cardGreenTopBg: linear-gradient(to right, var(--newProductColorLight) 55%, var(--newProductColorDark) 100%);
    --cardBlueTopBg: linear-gradient(to right, var(--instockColorLight) 55%, var(--inStockColorDark) 100%);

    /* --iconRedBg: linear-gradient(to bottom, #bf0603, #8f0200);
    --iconGreenBg: linear-gradient(to bottom, #00d2d7, #0a9396);
    --iconBlueBg: linear-gradient(to bottom, #0088d6, #265985); 

    --btnRedBg: linear-gradient(to top, #ba181b, #660708 76%, #ba181b);
    --btnGreenBg: linear-gradient(to top, #26c5c8, #05686a 76%, #26c5c8);
    --btnBlueBg: linear-gradient(to top, #148bd0, #245b89 76%, #148bd0);
    --btnOrangeBg: linear-gradient(to top, #ffab57, #da750f 76%, #ffab57);
    --btnGreyBg: linear-gradient(to top, #b8c5db, #889ab8 76%, #b8c5db);

    --btnRedBgHover: linear-gradient(to bottom, #ba181b, #660708 76%, #ba181b);
    --btnGreenBgHover: linear-gradient(to bottom, #26c5c8, #05686a 76%, #26c5c8);
    --btnBlueBgHover: linear-gradient(to bottom, #148bd0, #245b89 76%, #148bd0);
    --btnOrangeBgHover: linear-gradient(to bottom, #ffab57, #da750f 76%, #ffab57);
    --btnGreyBgHover: linear-gradient(to bottom, #b8c5db, #889ab8 76%, #b8c5db);

    --cardRedTopBg: linear-gradient(to right, #bf0603 55%, #790600 100%);
    --cardGreenTopBg: linear-gradient(to right, #0a9396 55%, #006567 100%);
    --cardBlueTopBg: linear-gradient(to right, #008cdd 55%, #245b89 100%);*/
    
    --cartTitleBg: linear-gradient(to bottom, var(--inStockColorDark) 20%, var(--inStockColor) 76%);
    --cartCloseBg: linear-gradient(to bottom, #bf0603, #8f0200);    
    
    --btnRedRadial: radial-gradient(ellipse 75% 70% at top center, var(--oldproductColorLight), transparent);
    --btnRedRadial2: linear-gradient(to bottom, var(--oldProductColor), var(--oldProductColorDark));
}

@media (min-width:992px){
    /* header 區 */
    .headBox {
        background: url(../image/top-bg.png) no-repeat center center;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        max-width: var(--maxWidth);
        margin: 0 auto;
        padding: 0;
        position: relative;
        z-index: 9;
    }

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

    .headBox .logo {
        min-height: 77px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .headBox .OnlineUsers{
        border-radius: 5px;
        padding: 7px;
        line-height: 1em;
        background-color: var(--colorWhite);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        position: absolute;
        top: 77px;
        left: 0;
    }

    /****** === 主選單 === ******/
    /* 未點選 */
    .headBox .navList .navBg {
        position: absolute;
        top: -97px;
        left: 0;
        width: 100%;
        height: 114%;
        z-index: -1;
        transition: top .5s;
        background-repeat:no-repeat;
        background-size: 100% 100%;
        background-position: top center;
        filter: drop-shadow(0px 0px 3px #666);
    }

    .headBox .navList .navBg::before{
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        mask-repeat: no-repeat;
        mask-position: center center;
        mask-size: cover;
        mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIMAAABhCAYAAAD1ERLvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDA2IDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NWJiNDZhMGMtZTM2OC1mZDQ4LTkxMjgtNjU5MDRhZTIwMzYzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdFMUNBRjFCMjM0MzExRjA5QUE2QTU4QjExN0U1OTlBIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdFMUNBRjFBMjM0MzExRjA5QUE2QTU4QjExN0U1OTlBIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi40IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmVkZjMxYWFhLWNiNjktOTc0Yi1hOTVmLWIyYTExOTQ0N2ZjNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1YmI0NmEwYy1lMzY4LWZkNDgtOTEyOC02NTkwNGFlMjAzNjMiLz4g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);
    }

    .navBg.navRedBg::before {
        /* background-image: url(../image/nav-bg-red.png); */
        background-image: radial-gradient(circle closest-corner at top, var(--oldProductColorLight) 0% 25%, var(--oldProductColor) 62% 0, var(--oldProductColorDark) 128%);
    }

    .navBg.navGreenBg::before {
        /* background-image: url(../image/nav-bg-green.png); */
        background-image: radial-gradient(circle closest-corner at top, var(--newProductColorLight) 0% 25%, var(--newProductColor) 62% 0, var(--newProductColorDark) 128%);
    }

    .navBg.navBlueBg::before {
        /* background-image: url(../image/nav-bg-blue.png); */
        background-image: radial-gradient(circle closest-corner at top, var(--instockColorLight) 0% 25%, var(--inStockColor) 62% 0, var(--inStockColorDark) 128%);
    }

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

    .navBox .navList a {
        font-size: 1.14rem;
        color: var(--colorBlack);
        margin: 0 5px;
        position: relative;
        z-index: 0;
        width: 115px;
        height: 77px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 0;
        gap: 5px;
    }

    .navBox .navList a .icon,
    .navBox .navList a .icon::before {
        height: 0;
    }

    .navBox .navList a span {
        font-size: 1.2em;
    }

    .navBox .navList a span.red {
        color: var(--oldProductColor);
    }

    .navBox .navList a span.green {
        color: var(--newProductColor);
    }

    .navBox .navList a p {
        filter: none;
        transition: filter .5s;
    }

    /* hover show */
    .navBox .navList a:hover{
        transition: all .5s;
    }

    .navBox .navList a:hover .navBg,
    .navBox .navList a.active .navBg {
        top: 0px;
        transition: all .5s;
    }

    .navBox .navList a:hover .icon,
    .navBox .navList a.active .icon {
        width: 35px;
        height: 35px;
        margin-bottom: 5px;
        transition: all .5s;
    }

    .navBox .navList a:hover .icon::before,
    .navBox .navList a.active .icon::before {
        width: 26px;
        height: 26px;
        transition: all .5s;
    }

    .navBox .navList a:hover p,
    .navBox .navList a.active p {
        filter: invert(100%) grayscale(1) brightness(5);
        transition: all .5s;
    }

    /* active */
    /* .navBox .navList a.active{
        justify-content: flex-start;
    } */

    /* .navBox .navList a.active .navBg {
        top: 0px;
    } */

    /* .navBox .navList a.active .icon {
        width: 35px;
        height: 35px;
        margin-bottom: 5px;
    } */

    /* .navBox .navList a.active .icon::before {
        width: 26px;
        height: 26px;
    } */

    /* .navBox .navList a.active .icon {
        margin-bottom: 5px;
    } */

    /* .navBox .navList a.active p {
        filter: invert(100%) grayscale(1) brightness(5);
    } */

}

/****** === LINE 右側廣告 === ******/

.talkLink{
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 55px;
    z-index: 99;
}

.talkLink a{
    border-radius: 50%;
    filter: drop-shadow(0 0 1px rgba(var(--colorBlackNum) / 36%)) drop-shadow(0 0 5px rgba(var(--colorBlackNum) / 36%));
}
.talkLink a:hover{
    color: var(--oldProductColorDark);
}
.talkLink a span{
    display: none;
    align-items: center;
    justify-content: center;
    padding: 7px;
    position: absolute;
    line-height: 1;
    top: 10px;
    right: 68px;
    border-radius: 8px;
    min-width: 90px;
    background-color: var(--colorWhite);
}

.talkLink a span::before{
    content: '';
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-left: 7px solid var(--colorWhite);
    border-bottom: 7px solid transparent;
    position: absolute;
    right: -7px;
}

.talkLink a:hover span{
    display: flex;
}

.talkLink a .icon-line2{
    background-color: var(--lineColor);
}

.talkLink a .icon-line2::before{
    --iconSize: 30px;
    background-color: var(--colorWhite);
}

/**/
.navList .nav-link{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid var(--color05);
    gap: 10px;
}

.navList .nav-item:last-child .nav-link{
    border-bottom: 0;
}

.card:has(.shopCart){
    position: relative;
}
.shopCart {
    display: inline-flex;
    padding: 0 20px;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    box-shadow: 0 0 7px rgba(var(--colorBlackNum) / 20%);
    border: 1px solid  var(--grey01);
    margin-left: 15px;
    position: absolute;
    right: 0;
    height: 55px;
    background: var(--colorWhite);
}

.shopCart a {
    color: var(--color07);
}

.shopCart a:hover {
    color: var(--inStockColorDark);
}

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

.shopCart .cartList .icon {
    margin-right: px;
}

.shopCart .cartList .icon-cart::before{
    filter: invert(0%);
}

.shopCart .cartList::after {
    content: '';
    border-right: 1px solid var(--grey01);
    width: 1px;
    height: 20px;
    margin: 0 10px;
}

/****** === 廣告輪播區 === ******/
/* banner */
/* .banner {
    background-color: var(--bannerBg); 
}*/

.banner a {
    margin: 0 auto;
    text-align: center;
    max-width: var(--maxWidth);
    display: flex;
}

/****** === 主內容區域 === ******/
/* main */
.selectArea {
    letter-spacing: 2px;
}

.tip{
    color: var(--color01);
}

/* logo 列表 */

.logoList {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-auto-rows: max-content;
    max-width: var(--maxWidth);
    gap: 10px;
    min-height: 350px;
}

.logoList a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 0 7px rgba(0, 0, 0, .17);
    border: 1px solid var(--shadowLineColor);
    border-radius: 10px;
    color: var(--fontColor);
    padding-bottom: 8px;
    background-color: var(--colorWhite);
    transition: box-shadow .6s;
}

.logoList a:hover {
    box-shadow: 0 0 7px rgba(var(--colorBlackNum) / 60%);
    transition: box-shadow .6s;
}

.logoList a span {
    text-align: center;
    line-height: 1.2em;
    font-size: .85rem;
    padding: 0 5px;
}

/*頁碼2*/
.page{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}
.page a,
.page .current1{
    border: 1px solid var(--color05);
    border-radius: 25px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    margin: 4px;
    padding:0 8px;
    background-color: var(--colorWhite);
}
.page a:hover{
    background-color:var(--oldProductColor);
    color: var(--colorWhite);
}
.page .current1{
    background-color: var(--oldProductColor);
    border-color: var(--oldProductColor);
    color: var(--colorWhite);
}
.page a[title~="previous"],
.page a[title~="first"],
.page a[title~="next"],
.page a[title~="last"]{
    width: auto;
}
/* 
.getCheap .page a:hover{
    background-color:var(--inStockColor);
}
.getCheap .page .current1{
    background-color: var(--inStockColor);
    border-color: var(--inStockColor);
    color: #fff;
} */

.getCheap .selectArea .searchBar .row{
    align-items: center;
    display: flex;
}
.getCheap .selectArea .searchBar .inputStyle{
    padding: 0;
}

/*撿便宜詳細頁*/
.productDetail .imgBox{
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--color05);
    margin-right: 2rem;
    width: 100%;
    flex: 0 0 510px;
    aspect-ratio: 510/443;
}
.productDetail .contentText{
    padding-top: 10px;
}
.productDetail .contentText li{
    margin-bottom: 1rem;
    color: var(--color02);
    font-size: 1.37rem;
}
.productDetail .contentText li .styleTitle{
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.productDetail .contentText .remark{
    display: flex;
    width: 100%;
    margin: 1rem 0;
    font-size: 1.12rem;
}
.productDetail .btnGroup button{
    font-size: 1.55rem;
    padding: 10px 3rem;
}

/*其他產品*/
.otherProduct{
    background-color: var(--colorWhite);
    border-radius: 5px;
    border: 1px solid var(--color05);
    padding: 10px;
}
.otherProduct .imgBox{
    border-radius: 5px;
    border: 1px solid var(--color05);
    aspect-ratio: 650 / 566;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.otherProduct .imgBox img{
    width: 100%;
}
.otherProduct .productLogo{
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--color01);
    line-height: 1.2em;
    margin-top: 5px;
}
.otherProduct .productLogo img{
    max-height: 30px;
    margin-right: 10px;
    width: auto;
}
.otherProduct .contentText{
    padding: 5px;
    color: var(--color02);
}
.otherProduct .contentText span{
    color: var(--color03);
}
.otherProduct .btnGroup button{
    width: 100%;
    margin-bottom: 10px;
}
.otherProduct .btnGroup button:last-child{
    margin-bottom: 0;
}

/*撿便宜購物車*/
.tableCart{
    width: 100%;
    /* min-width: 600px; */
}
.tableCart .cartHead>ul.cartTr,
.tableCart .cartBody>ul.cartTr{
    display: grid;
    grid-template-columns: 1fr 12vw 10vw;
    grid-template-rows: auto;
}
.tableCart.lock .cartHead>ul.cartTr,
.tableCart.lock .cartBody>ul.cartTr{
    grid-template-columns: 1fr 12vw;
}
.tableCart .name,
.tableCart .price,
.tableCart .detele{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
.tableCart .name{
    justify-content: flex-start;
}
.tableCart .name .imgBox{
    border-radius: 5px;
    border:1px solid var(--color05);
    overflow: hidden;
    margin-right: 10px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tableCart .name .imgBox img{
    max-height: 150px;
}
.tableCart .cartHead .cartTr{
    background: var(--cartTitleBg);
    color: var(--colorWhite);
    border-radius: 5px;
}
.tableCart .cartHead .cartTr li{
    position: relative;
}
.tableCart .cartHead .cartTr li::before{
    content: '';
    display: block;
    position: absolute;
    right: 0;
    width: 1px;
    height: 60%;
    background-color: var(--colorWhite);
}
.tableCart .cartHead .cartTr li:last-child::before{
    display: none;
}
.tableCart .cartBody .cartTr{
    padding: 20px 0;
    border-bottom: 1px dashed var(--color02);
}
.tableCart .cartBody .name .nameContent{
    color: var(--color02);
}
.tableCart .cartBody .name .nameContent span{
    color: var(--color03);
}
.tableCart .cartBody .name .nameContent .productLogo{
    display: flex;
    align-items: center;
}
.tableCart .cartBody .name .nameContent .productLogo img{
    max-height: 35px;
    margin-right: 10px;
}
.tableCart .cartBody .name .nameContent .productLogo span{
    color: var(--inStockColor);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.12rem;
}
.cartFooter{
    border-bottom: 1px dashed var(--color02);
}
.cartFooter .cartTr{
    text-align: right;
}
.cartFooter p{
    margin: 10px 0;
}
.cartFooter .numItem{
    color: var(--color06);
}
.cartFooter .stress{
    color: var(--inStockColor);
    font-size: 1.88rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}
.btnDelete .btnSquare{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.getCheap .cartList .btnSend{
    margin-top:20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}
.getCheap .cartList .btnSend .btnDefault{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 30px;
}

.cartList .hideBtn{
    width: 100%;
    background-color: var(--colorWhite);
    color: var(--inStockColor);
    border: 1px solid var(--color05);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 2px;
    margin-top: 10px;
}
.hideBtn i.icon-arrow{
    transform: rotate(-90deg);
    width: 10px;
    height: 10px;
    margin-left: 5px;
}
.hideBtn i.icon-arrow::before{
    width: 100%;
    height: 100%;
}
/**/
.hideBtn.collapsed i.icon-arrow{
    transition: all .5s;
    transform: rotate(90deg);
}

.card:has(.tableCart){
    min-height: auto;
}

/*表單前聲明*/
.statement .title{
    font-size: 25px;
    font-weight: normal;
}
.statement .statementMain{
    overflow-y: auto;
    height: 450px;
    background-color: var(--colorWhite);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid var(--grey03);
}
.statement .statementMain p{
    margin-bottom: 15px;
}

/*表單*/
.formBox{
    position: relative;
}
.formBox .row{
    --bs-gutter-x: 1rem;
}
.formBox .codeLine{
    display: flex;
}
.formBox .greenChekbox .magic-checkbox.form-check-input:checked{
    background-color: var(--newProductColor);
    border-color: var(--newProductColor);
}
.formBox .greenChekbox .magic-checkbox:checked + label:before{
    border:  var(--newProductColor);
    background:  var(--newProductColor);
}
.formBox .form-check{
    padding-left: 0;
}
.formBox .col-form-label{
    text-align: right;
}
.formBox .btnDefault{
    height: 40px;
}
.formBox .submit.btnDefault{
    height: 50px;
    min-width: 150px;
}
.formBox .locklocation{
    position: relative;
    padding: 0 25px;
    margin: 0 -25px;
}
.formBox .lockMask{
    background-color: rgba(var(--colorBlackNum) / 70%);
    position: absolute;
    left: 0;
    top: -25px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120%;
    color: #fff;
    text-shadow: 0 0 9px rgba(var(--colorBlackNum) / 40%);
    font-size: 1.79rem;
    letter-spacing: 2px;
}

/*表單完成頁*/
.card.red .finishOrder .icon.icon-check::before{
    background-color: var(--oldProductColor);
}
.card.red .finishOrder .orderInfo h3{
    color: var(--oldProductColor);
}
.card.red .finishOrder .orderInfoList li{
    background: var(--color08);
}


.card.green .finishOrder .icon.icon-check::before{
    background-color: var(--newProductColor);
}
.card.green .finishOrder .orderInfo h3{
    color: var(--newProductColor);
}
.card.green .finishOrder .orderInfoList li{
    background: var(--color09);
}


.card.blue .finishOrder .icon.icon-check::before{
    background-color: var(--inStockColor);
}
.card.blue .finishOrder .orderInfo h3{
    color: var(--inStockColor);
}
.card.blue .finishOrder .orderInfoList li{
    background: var(--color10);
}
.card.blue .finishOrder .cartList .hideBtn{
    border-radius: 7px;
    margin-bottom: 12px;
    height: 45px;
}

.card.blue .finishOrder .cartList .tableCart{
    background-color: var(--colorWhite);
    border-radius: 7px;
    padding: 15px;
    border: 1px solid var(--color05);
}
.card.blue .finishOrder .cartList .hideBtn{
    background-color: var(--inStockColor);
    color: var(--colorWhite);;
    border: 1px solid var(--color05);
}
.card.blue .finishOrder .cartList .icon.icon-arrow{
    filter: invert(1);
}

/*搜尋*/
.oldMaterials .searchBar{
    border-top: 1px solid var(--color04);
    border-bottom: 1px solid var(--color04);
    padding: 20px 0;
}
.oldMaterials .btnGroup .btnRed2{
    border-radius: 5px;
    background: var(--btnRedRadial),
                var(--btnRedRadial2);
    box-shadow: 0 0 0 0 rgba( var(--colorRedNum) / 40%);
    transition: all .5s;
    text-shadow: 0 0 0 var(--colorBlack);
    width: 192px;
    height: 42px;
}
.oldMaterials .btnGroup .btnRed2:hover{
    box-shadow: 0 0 5px 2px rgba( var(--colorRedNum) / 40%);
    transition: all .5s;
    text-shadow: 0 2px 0 var(--colorBlack);
}
.oldMaterials .noResults{
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 1.38rem;
    color: var(--color03);
}
.oldMaterials .noResults .icon{
    margin-bottom: 15px;
}
.oldMaterials .noResults .icon,
.oldMaterials .noResults .icon::before{
    width: 60px;
    height: 60px;
}

/*搜尋清單*/
.searchTrem span.red{
    color:var(--oldProductColorDark);
    margin: 0 10px;
}

/* 最新消息 */
.newsList li{
    border-bottom:1px dashed var(--color06);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding-left: 18px;
}
.newsList li::before{
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--color06);
    mask-size: contain;
    mask-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MDAuMDkgNzAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2lzb2xhdGlvbjppc29sYXRlO308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik02MzMuMDcsMTgyLjYxYTMzLjg1LDMzLjg1LDAsMCwwLTM2Ljg5LDcuMzNMNDE3LDM2OS4xMiwxMDMuNzYsNTUuODhhMzMuODYsMzMuODYsMCwwLDAtNDcuODgsNDcuODhMMzY5LjEyLDQxNywxODkuOTQsNTk2LjE4QTMzLjg2LDMzLjg2LDAsMCwwLDIxMy44OCw2NTRINjIwLjEyQTMzLjg2LDMzLjg2LDAsMCwwLDY1NCw2MjAuMTJWMjEzLjg4QTMzLjgzLDMzLjgzLDAsMCwwLDYzMy4wNywxODIuNjFaIi8+PC9zdmc+);
    mask-repeat: no-repeat;
    position: absolute;
    bottom: 12px;
    left: 0;
}
.newsList li:hover::before{
    background-color: var(--oldProductColorDark);
}
.newsList li a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: var(--color06);
    background: url(../image/icon-arrow.svg) no-repeat;    
    padding: 10px 8px;
    line-height: 1.3em;
}
.newsList li a:hover{
    color: var(--oldProductColorDark);
}

.newsContent{
    min-height: 150px;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 5px;
    border: 1px dashed var(--color05);
    background-color: rgba( var(--colorWhiteNum) / 90%);
}
.newsContent .titleBox{
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--color05);
    padding-bottom: 15px;
}
.newsContent .titleBox h2{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.55rem;
    color: var(--color01);
    padding-left: 22px;
    position: relative;
}
.newsContent .titleBox h2:before{
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    background-color: var(--color01);
    mask-size: contain;
    mask-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MDAuMDkgNzAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2lzb2xhdGlvbjppc29sYXRlO308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik02MzMuMDcsMTgyLjYxYTMzLjg1LDMzLjg1LDAsMCwwLTM2Ljg5LDcuMzNMNDE3LDM2OS4xMiwxMDMuNzYsNTUuODhhMzMuODYsMzMuODYsMCwwLDAtNDcuODgsNDcuODhMMzY5LjEyLDQxNywxODkuOTQsNTk2LjE4QTMzLjg2LDMzLjg2LDAsMCwwLDIxMy44OCw2NTRINjIwLjEyQTMzLjg2LDMzLjg2LDAsMCwwLDY1NCw2MjAuMTJWMjEzLjg4QTMzLjgzLDMzLjgzLDAsMCwwLDYzMy4wNywxODIuNjFaIi8+PC9zdmc+);
    mask-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 2px;
}
.newsContent .titleBox p{
    margin-top: 8px;
    line-height: 1em;
    font-size: .95rem;
    color: var(--color11);
    padding: 7px 10px;
    border-radius: 5px;
    display: inline-flex;
    background: var(--color12);
    box-shadow: 2px 2px 3px var(--color13);
}
.newsMain{
    padding: 0 10px 10px;
    line-height: 1.7em;
}

/*footer*/
.footer {
    min-height: 116px;
    background: url(../image/top-bg.png) no-repeat center center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 1.12rem;
    line-height: 1.6em;
    gap: 10px;
}

.footer p {
    margin: 0;
    display: flex;
    align-items: center;
    line-height: 1;
    gap: 7px;
}

@media (max-width:1180px) {
    .logoList {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (max-width:991px) {
    main{
        padding-top: 60px;
    }
    .logoList {
        grid-template-columns: repeat(6, 1fr);
    }
    .footer {
        min-height: 100px;
    }
    .newMaterialsForm .formBox .lockMask{
        bottom: -40px;
    }
    .getCheap .formBox .lockMask{
        bottom: -40px;
    }
    .headBox{
        padding: 0;
        position: fixed;
        z-index: 99;
        width: 100%;
        top: 0;
    }   

    .headBox .OnlineUsers{
        border-radius: 5px;
        padding: 7px;
        line-height: 1em;
        background-color: rgba(var(--colorWhiteNum / 70%));
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        position: absolute;
        top: 60px;
        left: 0;
        z-index: -1;
    }
    .navbar.headBox>.container-fluid{
        padding: 0 10px;
    }
    .navbar-collapse{
        margin: 0 -10px;
        background: var(--grey03);
    }
    .navList{
        border-top: 1px solid var(--color05);
    }
    .navList .nav-link{
        padding: 10px 5px;
    }
    .navbar-nav .nav-link.active,
    .navbar-nav .show>.nav-link{
        background-color: var(--oldProductColor);
        color: var(--colorWhite);
    }
    .navbar-nav .nav-link.active .icon,
    .navbar-nav .show>.nav-link .icon{
        filter: invert(100%);
    }
    .logo{
        padding: 10px 0;
    }
    .logo img{
        max-height: 40px;
    }
        
    .navList .nav-link .icon::before{
        filter: invert(0);
    }     
    .tableCart .cartBody>ul.cartTr{
        grid-template-columns: 1fr;
    }
    .tableCart .cartHead{
        display: none;
    }
    .tableCart .cartBody .cartTr{
        position: relative;
    }
    .tableCart .detele{
        position: absolute;
        top: 8px;
        right: 0;
        padding: 0;
    }
    .tableCart .name{
        align-items: flex-start;
    }
    .btnDelete .btnSquare{
        background: transparent;
        color: var(--colorBlack);
        padding: 0px;
    }
    .btnDelete .btnSquare .icon::before{
        filter: invert(0%);
    }
    .btnDelete .btnSquare span{
        display: none;
    }
    .tableCart .cartBody .name .nameContent span{
        font-size: 15px;
    }
    .tableCart .price{
        justify-content: flex-end;
    }
    .searchBar .col-form-label{
        width: 100%;
        text-align: right;
    }
}

@media (max-width:768px) {
    .logoList {
        grid-template-columns: repeat(5, 1fr);
    }
    .productDetail .contentText{
        padding-top: 20px;
    }
    .productDetail .btnGroup{
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    .productDetail .btnGroup button{
        padding: 10px 2rem;
        font-size: 1.19rem;
    }
    .getCheap .formBox .lockMask{
        bottom: -95px;
    }
    .newMaterialsForm .formBox .lockMask{
        bottom: -102px;
    }
    .oldMaterials .formBox .lockMask{
        bottom: -86px;
    }
    .formBox .col-form-label{
        text-align: left;
    }
    .searchBar .col-form-label{
        width: 100%;
        text-align: left;
        padding: 0 0 0 5px;
    }
    /* .banner{
        margin-top: 60px;
    } */
}

@media (max-width:580px) {
    :root{        
        font-size: 13px;
    }
    .headBox .OnlineUsers{
        font-size: 12px;
    }
    .cardBg{
        padding: 1em 8px;
    }
    .logoList {
        grid-template-columns: repeat(4, 1fr);
    }
    .btnDefault{
        padding: 5px 15px;
    }
    .form-control,
    .form-select{
        font-size: 1.2rem;
    }
    .oldMaterials .formBox .lockMask{
        bottom: -82px;
    }
    .statement .title{
        font-size: 20px;
    }
    .newsList li a{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .newsList li a .date{
        order: 1;
        font-size: 12px;
        color: var(--oldProductColor);
    }
    .newsList li a .title{
        order: 2;
    }
    .getCheap .itemList .listItem .textBox .btnGroup{
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin: 5px 0 0;
    }
    .getCheap .itemList .listItem .textBox .btnGroup .btnDefault{
        width: 100%;
    }
}

@media (max-width:500px) {
    .logoList {
        grid-template-columns: repeat(3, 1fr);
    }
    .tableCart .name .imgBox{
        width: 100px;
        margin-right: 10px;
    }
    .tableCart .cartBody .name .nameContent p,
    .tableCart .cartBody .name .nameContent span{
        font-size: 14px;
    }
}

#sync1 .item{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    aspect-ratio: 650/566;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid var(--color05);
}
  
#sync2 .item{
    text-align: center;
    cursor: pointer;
    display: flex;;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 650/565;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid var(--color05);
}

#sync2 .current .item{
    border-color: var(--color01);
}

#sync1.owl-carousel .owl-item img,
#sync2.owl-carousel .owl-item img{
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
  
/*arrows on first carousel*/
#sync1.owl-theme {
    position: relative;
}
#sync1.owl-theme .owl-next, 
#sync1.owl-theme .owl-prev{
    width: 22px;
    height: 40px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
}
    
#sync1.owl-theme .owl-prev {
    left: 10px;
}
#sync1.owl-theme .owl-next {
    right: 10px;
}

#sync2.owl-theme .owl-nav{
    margin-top: 0;
}
#sync2.owl-carousel{
    position: relative;
}

#sync2.owl-carousel .owl-nav button.owl-next,
#sync2.owl-carousel .owl-nav button.owl-prev{
    font-size: 50px;
    position: absolute;
    top: 0;
    width: 20px;
    margin: 0;
    height: 100%;
    color: var(--oldProductColorLight);
}

#sync2.owl-theme .owl-nav [class*=owl-]{
    border-radius: 3px 0 0px 3px;
}

#sync2.owl-carousel .owl-nav [class*=owl-]:hover{
    background-color: rgba( var(--colorBlackNum) / 60%);
}

#sync2.owl-carousel .owl-nav button.owl-prev{
    left: 0;
}
#sync2.owl-carousel .owl-nav button.owl-next{
    right: 0;
}