@charset "UTF-8";
:root {
    --maxWidth: 1186px;
    --bannerBg: #8e919a;
    --oldProductColor: #b41614;
    --newProductColor: #0a9396;
    --inStockColor: #0088d6;
    --shadowLineColor: #333;
    --fontColor: #252525;
    --aHover: #b51715;
    --aGrey: #c0c0c0;
    --color01:#b91c1a;
    --color02:#9c9291;
    --color03:#252525;
    --color04:#d3d3d3;
    --color05:#c3c3c3;
    --color06:#7d7d7d;

    --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, #2773b1 20%, #128acf 76%);
    --cartCloseBg: linear-gradient(to bottom, #bf0603, #8f0200);
}

@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: #fff;
        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;
    }

    .navBg.navRedBg {
        background-image: url(../image/nav-bg-red.png);
    }

    .navBg.navGreenBg {
        background-image: url(../image/nav-bg-green.png);
    }

    .navBg.navBlueBg {
        background-image: url(../image/nav-bg-blue.png);
    }

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

    .navBox .navList a {
        font-size: 1.14rem;
        color: black;
        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(0, 0, 0, .36)) drop-shadow(0 0 5px rgba(0, 0, 0, .36));
}
.talkLink a span{
    display: none;
    align-items: center;
    justify-content: center;
    padding: 7px;
    position: absolute;
    line-height: 1;
    top: 10px;
    right: 68px;
    /* height: 100%; */
    /* font-size: 15px; */
    border-radius: 8px;
    min-width: 90px;
    background-color: #fff;
}

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

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

.talkLink a .icon-line2{
    background-color: #00b900;
}

.talkLink a .icon-line2::before{
    --iconSize: 30px;
    background-color: #fff;
}

/**/
.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(0, 0, 0, .2);
    border: 1px solid #cbcbcb;
    margin-left: 15px;
    position: absolute;
    right: 0;
    height: 55px;
    background: #fff;
}

.shopCart a {
    color: #b00400;
}

.shopCart a:hover {
    color: #909090;
}

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

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

.shopCart .cartList::after {
    content: '';
    border-right: 1px solid #c8c8c8;
    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: #fff;
    transition: box-shadow .6s;
}

.logoList a:hover {
    box-shadow: 0 0 7px rgba(0, 0, 0, .6);
    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:#fff;
}
.page a:hover{
    background-color:var(--oldProductColor);
    color: #fff;
}
.page .current1{
    background-color: var(--oldProductColor);
    border-color: var(--oldProductColor);
    color: #fff;
}
.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: #fff;
    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: #fff;
    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: #fff;
}
.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(--color01);
    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(--color01);
    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: #fff;
    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: #fff;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid #e3e3e3;
}
.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(0, 0, 0, .7);
    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(0, 0, 0, .4);
    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: #ffefef;
}


.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: #e8f0f0;
}


.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: #ecf2f7;
}
.card.blue .finishOrder .cartList .hideBtn{
    border-radius: 7px;
    margin-bottom: 12px;
    height: 45px;
}

.card.blue .finishOrder .cartList .tableCart{
    background-color: #fff;
    border-radius: 7px;
    padding: 15px;
    border: 1px solid var(--color05);
}
.card.blue .finishOrder .cartList .hideBtn{
    background-color: var(--inStockColor);
    color: #fff ;
    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: radial-gradient(ellipse 75% 70% at top center,#ff0300,transparent),
                linear-gradient(to bottom, #bf0603, #8d0801);
    box-shadow: 0 0 0 0 rgb(255 0 0 / .4);
    transition: all .5s;
    text-shadow: 0 0 0 #000;
    width: 192px;
    height: 42px;
}
.oldMaterials .btnGroup .btnRed2:hover{
    box-shadow: 0 0 5px 2px rgb(255 0 0 / .4);
    transition: all .5s;
    text-shadow: 0 2px 0 #000;
}
.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(--oldProductColor);
    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(--oldProductColor);
}
.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(--oldProductColor);
}

.newsContent{
    min-height: 150px;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 5px;
    border: 1px dashed var(--color05);
    background-color: rgba(255, 255, 255, .9);
}
.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: #4a0b0b;
    padding: 7px 10px;
    border-radius: 5px;
    display: inline-flex;
    background: #ffd1d1;
    box-shadow: 2px 2px 3px #cfa8a8;
}
.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(255,255,255,.7);
        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: #e3e3e3;
    }
    .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: #b00400;
        color: #fff;
    }
    .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: #000;
        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%;
    }

    /*.getCheap .itemList .listItem .textBox .contentText li{
        line-height: 1em;
    }
    .getCheap .itemList .listItem .textBox .contentText .line{
        flex-direction: column;
    }
    .getCheap .itemList .listItem .textBox .contentText .line p:first-child{
        margin-bottom: 8px;
    }
    .getCheap .itemList .listItem .textBox .contentText .line p:first-child::before{
        display: none;
    }
    .getCheap .itemList .listItem .textBox .contentText span{
        margin-bottom: 3px;
    } */
}

@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(--oldProductColor);
}

#sync2.owl-carousel .owl-nav [class*=owl-]:hover{
    background-color: #c7c7c7;
}

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