@charset "UTF-8";

:root {
    --maxWidth: 1186px;
    /* --bannerBg: #8e919a; */
    --bannerBg: rgba(0,0,0,.25);
    --oldProductColor: #b41614;
    --newProductColor: #0a9396;
    --inStockColor: #0088d6;
    --shadowLineColor: #c9c9c9;
    --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);
}

/* 預設 */
body {
    line-height: 1.5em;
    font-size: 16px;
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #111;
}

img {
    display: block;
}

a {
    color: var(--aGrey);
}

a:hover {
    color: var(--aHover);
}

button{
    border: 0;
}

::placeholder{
    color: var(--color02);
}

.form-check-inline{
    margin-right: 2rem;
}

.form-check-input{
    width: 1.1em;
    height: 1.1em;
}

/*按鈕*/
.btnGroup{
    margin: 5px 0;
}

.btnDefault{
    border-radius: 50px;
    padding: 5px 25px;
    border: 0;
    font-size: 18px;
    color: #fff;
    margin-right: 5px;
    cursor: pointer;
}
.btnDefault:hover{
    color: #fff;
}

.btnSquare{
    border-radius: 5px;
    padding: 7px 10px;
    border: 0;
    font-size: 18px;
    color: #fff;
    margin-right: 5px;
    cursor: pointer;
    line-height: 1;
}
.btnSquare .icon{
    width: 25px;
    height: 25px;
}
.btnSquare .icon[class~="icon-"]::before{
    height: 16px;
}

.btnRed{
    background: var(--btnRedBg);
}

.btnRed:hover{
    background: var(--btnRedBgHover);
}

.btnGreen{
    background: var(--btnGreenBg);
}

.btnGreen:hover{
    background: var(--btnGreenBgHover);
}

.btnBlue{
    background: var(--btnBlueBg);
}

.btnBlue:hover{
    background: var(--btnBlueBgHover);
}

.btnOrange{
    background: var(--btnOrangeBg);
}

.btnOrange:hover{
    background: var(--btnOrangeBgHover);
}

.btnGrey{
    background: var(--btnGreyBg);
}

.btnGrey:hover{
    background: var(--btnGreyBgHover);
}

/*圖標*/
.icon,
.iconLayout {
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

.icon.redBg,
.iconLayout.redBg {
    background-image: var(--iconRedBg);
    box-shadow: 2px 2px 2px #b1a7a6;
}

.icon.greenBg,
.iconLayout.greenBg {
    background-image: var(--iconGreenBg);
    box-shadow: 2px 2px 2px #b1a7a6;
}

.icon.blueBg,
.iconLayout.blueBg {
    background-image: var(--iconBlueBg);
    box-shadow: 2px 2px 2px #b1a7a6;
}

.icon::before {
    --iconSize: 24px;
    content: '';
    display: block;
    width: var(--iconSize);
    height: var(--iconSize);
}

.icon-arrow::before{
    background: url(../image/svg/icon-arrow.svg) no-repeat center center;
    background-size: contain;
}
.icon-car::before {
    background: url(../image/svg/icon-car.svg) no-repeat center center;
    background-size: contain;
}

.icon-cart::before {
    background: url(../image/svg/icon-cart.svg) no-repeat center center;
    background-size: contain;
    filter: invert(100%);
    margin-left:-3px;
}

.icon-close::before {
    background: url(../image/svg/icon-close.svg) no-repeat center center;
    background-size: contain;
    filter: invert(100%);
}

.icon-line::before {
    background: url(../image/svg/icon-line.svg) no-repeat center center;
    background-size: contain;
}

.icon-line2::before{
    background-color: #000;
    mask-size: contain;
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIGZpbGw9IiMwMDAwMDAiIGhlaWdodD0iODAwcHgiIHdpZHRoPSI4MDBweCIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiANCgkgdmlld0JveD0iMCAwIDI5Ni41MjggMjk2LjUyOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBkPSJNMjk1LjgzOCwxMTUuMzQ3bDAuMDAzLTAuMDAxbC0wLjA5Mi0wLjc2Yy0wLjAwMS0wLjAxMy0wLjAwMi0wLjAyMy0wLjAwNC0wLjAzNmMtMC4wMDEtMC4wMTEtMC4wMDItMC4wMjEtMC4wMDQtMC4wMzINCgkJbC0wLjM0NC0yLjg1OGMtMC4wNjktMC41NzQtMC4xNDgtMS4yMjgtMC4yMzgtMS45NzRsLTAuMDcyLTAuNTk0bC0wLjE0NywwLjAxOGMtMy42MTctMjAuNTcxLTEzLjU1My00MC4wOTMtMjguOTQyLTU2Ljc2Mg0KCQljLTE1LjMxNy0xNi41ODktMzUuMjE3LTI5LjY4Ny01Ny41NDgtMzcuODc4Yy0xOS4xMzMtNy4wMTgtMzkuNDM0LTEwLjU3Ny02MC4zMzctMTAuNTc3Yy0yOC4yMiwwLTU1LjYyNyw2LjYzNy03OS4yNTcsMTkuMTkzDQoJCUMyMy4yODksNDcuMjk3LTMuNTg1LDkxLjc5OSwwLjM4NywxMzYuNDYxYzIuMDU2LDIzLjExMSwxMS4xMSw0NS4xMSwyNi4xODQsNjMuNjIxYzE0LjE4OCwxNy40MjMsMzMuMzgxLDMxLjQ4Myw1NS41MDMsNDAuNjYNCgkJYzEzLjYwMiw1LjY0MiwyNy4wNTEsOC4zMDEsNDEuMjkxLDExLjExNmwxLjY2NywwLjMzYzMuOTIxLDAuNzc2LDQuOTc1LDEuODQyLDUuMjQ3LDIuMjY0YzAuNTAzLDAuNzg0LDAuMjQsMi4zMjksMC4wMzgsMy4xOA0KCQljLTAuMTg2LDAuNzg1LTAuMzc4LDEuNTY4LTAuNTcsMi4zNTJjLTEuNTI5LDYuMjM1LTMuMTEsMTIuNjgzLTEuODY4LDE5Ljc5MmMxLjQyOCw4LjE3Miw2LjUzMSwxMi44NTksMTQuMDAxLDEyLjg2DQoJCWMwLjAwMSwwLDAuMDAxLDAsMC4wMDIsMGM4LjAzNSwwLDE3LjE4LTUuMzksMjMuMjMxLTguOTU2bDAuODA4LTAuNDc1YzE0LjQzNi04LjQ3OCwyOC4wMzYtMTguMDQxLDM4LjI3MS0yNS40MjUNCgkJYzIyLjM5Ny0xNi4xNTksNDcuNzgzLTM0LjQ3NSw2Ni44MTUtNTguMTdDMjkwLjE3MiwxNzUuNzQ1LDI5OS4yLDE0NS4wNzgsMjk1LjgzOCwxMTUuMzQ3eiBNOTIuMzQzLDE2MC41NjFINjYuNzYxDQoJCWMtMy44NjYsMC03LTMuMTM0LTctN1Y5OS44NjVjMC0zLjg2NiwzLjEzNC03LDctN2MzLjg2NiwwLDcsMy4xMzQsNyw3djQ2LjY5NmgxOC41ODFjMy44NjYsMCw3LDMuMTM0LDcsNw0KCQlDOTkuMzQzLDE1Ny40MjcsOTYuMjA5LDE2MC41NjEsOTIuMzQzLDE2MC41NjF6IE0xMTkuMDMsMTUzLjM3MWMwLDMuODY2LTMuMTM0LDctNyw3Yy0zLjg2NiwwLTctMy4xMzQtNy03Vjk5LjY3NQ0KCQljMC0zLjg2NiwzLjEzNC03LDctN2MzLjg2NiwwLDcsMy4xMzQsNyw3VjE1My4zNzF6IE0xODIuMzA0LDE1My4zNzFjMCwzLjAzMy0xLjk1Myw1LjcyMS00LjgzOCw2LjY1OA0KCQljLTAuNzEyLDAuMjMxLTEuNDQxLDAuMzQzLTIuMTYxLDAuMzQzYy0yLjE5OSwwLTQuMzIzLTEuMDM5LTUuNjY2LTIuODg4bC0yNS4yMDctMzQuNzE3djMwLjYwNWMwLDMuODY2LTMuMTM0LDctNyw3DQoJCWMtMy44NjYsMC03LTMuMTM0LTctN3YtNTIuMTZjMC0zLjAzMywxLjk1My01LjcyMSw0LjgzOC02LjY1OGMyLjg4Ni0wLjkzNiw2LjA0NSwwLjA5LDcuODI3LDIuNTQ1bDI1LjIwNywzNC43MTdWOTkuNjc1DQoJCWMwLTMuODY2LDMuMTM0LTcsNy03YzMuODY2LDAsNywzLjEzNCw3LDdWMTUzLjM3MXogTTIzMy4zMTEsMTU5LjI2OWgtMzQuNjQ1Yy0zLjg2NiwwLTctMy4xMzQtNy03di0yNi44NDdWOTguNTczDQoJCWMwLTMuODY2LDMuMTM0LTcsNy03aDMzLjU3YzMuODY2LDAsNywzLjEzNCw3LDdzLTMuMTM0LDctNyw3aC0yNi41N3YxMi44NDloMjEuNTYyYzMuODY2LDAsNywzLjEzNCw3LDdjMCwzLjg2Ni0zLjEzNCw3LTcsNw0KCQloLTIxLjU2MnYxMi44NDdoMjcuNjQ1YzMuODY2LDAsNywzLjEzNCw3LDdTMjM3LjE3NywxNTkuMjY5LDIzMy4zMTEsMTU5LjI2OXoiLz4NCjwvZz4NCjwvc3ZnPg==);
}

.icon-newspaper::before {
    background: url(../image/svg/icon-newspaper.svg) no-repeat center center;
    background-size: contain;
    filter: invert(100%);
}

.icon-tool::before {
    background: url(../image/svg/icon-tool.svg) no-repeat center center;
    background-size: contain;
    filter: invert(100%);
}

.icon-tool2::before {
    background: url(../image/svg/icon-tool2.svg) no-repeat center center;
    background-size: contain;
    filter: invert(100%);
}

.icon-gearwheel::before {
    background: url(../image/svg/icon-gearwheel.svg) no-repeat center center;
    background-size: contain;
    filter: invert(1);
}

.icon-word::before {
    background: url(../image/svg/icon-word.svg) no-repeat center center;
    background-size: contain;
    filter: invert(1);
    margin-left: 3px;
}

.icon-noResults::before {
    background-color: var(--oldProductColor);
    mask-size: contain;
    mask-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNzAwLjA5IDcwMCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7fS5jbHMtMntjbGlwLXBhdGg6dXJsKCNjbGlwLXBhdGgpO30uY2xzLTN7ZmlsbC1ydWxlOmV2ZW5vZGQ7fTwvc3R5bGU+PGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgiPjxyZWN0IGNsYXNzPSJjbHMtMSIgd2lkdGg9IjcwMC4wOSIgaGVpZ2h0PSI3MDAuMDkiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGFzcz0iY2xzLTIiPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTMxMS4xNSw3Ny43OWMtMTI4Ljg4LDAtMjMzLjM2LDEwNC40OC0yMzMuMzYsMjMzLjM2UzE4Mi4yNyw1NDQuNTEsMzExLjE1LDU0NC41MSw1NDQuNTIsNDQwLDU0NC41MiwzMTEuMTUsNDQwLDc3Ljc5LDMxMS4xNSw3Ny43OU0wLDMxMS4xNUMwLDEzOS4zMSwxMzkuMzEsMCwzMTEuMTUsMFM2MjIuMywxMzkuMzEsNjIyLjMsMzExLjE1QTMwOS44NCwzMDkuODQsMCwwLDEsNTU3LDUwMkw2ODguNyw2MzMuNjlhMzguOSwzOC45LDAsMCwxLTU1LDU1TDUwMiw1NTdhMzA5Ljg0LDMwOS44NCwwLDAsMS0xOTAuOCw2NS4zNEMxMzkuMzEsNjIyLjMsMCw0ODMsMCwzMTEuMTVtNDIxLjE2LTExMGEzOC45LDM4LjksMCwwLDEsMCw1NWwtNTUsNTUsNTUsNTVhMzguODksMzguODksMCwwLDEtNTUsNTVsLTU1LTU1LTU1LDU1YTM4Ljg5LDM4Ljg5LDAsMCwxLTU1LTU1bDU1LTU1LTU1LTU1YTM4LjksMzguOSwwLDAsMSw1NS01NWw1NSw1NSw1NS01NWEzOC45LDM4LjksMCwwLDEsNTUsMCIvPjwvZz48L3N2Zz4=);
}

.icon-change::before {
    background: url(../image/svg/icon-change.svg) no-repeat center center;
    background-size: contain;
    filter: invert(1);
    transform: rotate(0deg);
    transition: all .5s;
}

.icon-change:hover::before{
    transform: rotate(180deg);
    transition: all .5s;
}

.icon-check::before{
    background-color: var(--inStockColor);
    mask-size: contain;
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIj4NCiAgPHBhdGggZmlsbD0iIzAwMDAwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMyAxMGE3IDcgMCAwMTkuMzA3LTYuNjExIDEgMSAwIDAwLjY1OC0xLjg4OSA5IDkgMCAxMDUuOTggNy41MDEgMSAxIDAgMDAtMS45ODguMjJBNyA3IDAgMTEzIDEwem0xNC43NS01LjMzOGExIDEgMCAwMC0xLjUtMS4zMjRsLTYuNDM1IDcuMjgtMy4xODMtMi41OTNhMSAxIDAgMDAtMS4yNjQgMS41NWwzLjkyOSAzLjJhMSAxIDAgMDAxLjM4LS4xMTNsNy4wNzItOHoiLz4NCjwvc3ZnPg==);
}

/*主色系*/
.oldProductColor {
    color: var(--oldProductColor);
}

.newProductColor {
    color: var(--newProductColor);
}

/* 卡片 */
.cardBg {
    /* background: url(../image/bg.png) no-repeat center center fixed;
    background-size: cover; */
    padding: 2em 15px;
    min-height: 500px;
}

.card {
    background-color: rgba(255, 255, 255, .85);
    box-shadow: 0 0 7px rgba(0, 0, 0, .17);
    max-width: var(--maxWidth);
    margin: 0 auto;
    border-radius: 10px;
    padding: 25px;
    position: relative;
    overflow: hidden;
    min-height: 250px;
    border: 0;
}

.card::before {
    content: '';
    height: 10px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.card.red::before{
    background: url(../image/main-top-line.png) no-repeat left top,
        linear-gradient(to right, #bf0603 55%, #790600 100%);
}
.card.green::before{
    background: url(../image/main-top-line.png) no-repeat left top,
        linear-gradient(to right, #0a9396 55%, #006567 100%);
}
.card.blue::before{
    background: url(../image/main-top-line.png) no-repeat left top,
        linear-gradient(to right, #008cdd 55%, #245b89 100%);
}

/* 兩種 title 樣式 */
/* icon + 文字*/
.iconTitle {
    font-size: 25px;
    display: flex;
    align-items: center;
    margin: 0 0 15px;
    color: #252525;
}

.iconTitle .icon {
    margin: 10px 15px 10px 0px;
    padding: 8px;
    width: 45px;
}

/* 廠商logo + 廠牌名 + 文字*/
.logoTitle{
    display: flex;
    align-items: center;
    margin: 0 0 15px;
    gap: 15px;
}

.logoTitle .title_content{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 15px;
}

.logoTitle .img_box{
    height: 60px;
    flex: 0 0 60px;
}

.logoTitle .logoName{
    color: var(--color01);
    font-weight: bold;
    font-size: 30px;
    text-transform: uppercase;
    word-break: break-all;
}

.logoTitle .pageName{
    font-size: 25px;
}

/* list列表Demo */
.itemList>ul{
    /* display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px; */
}
.itemList .listItem{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    color: var(--color02);
    border-radius: 13px;
    border: 1px solid var(--color04);
    padding: 10px;
    background: #fff url(../image/gear.png) no-repeat right bottom;
    transition: box-shadow .5s;

}
.itemList .listItem:hover{
    box-shadow: 0 0 9px rgba(0, 0, 0, .17);
    transition: box-shadow .5s;
}
.itemList .listItem .imgBox{
    max-width: 170px;
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color04);
    border-radius: 7px;
    overflow: hidden;
}
.itemList .listItem .textBox{
    font-size: 15px;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px;
}
.itemList .listItem .textBox .contentText{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    line-height: 1.4em;
    flex-wrap: wrap;
    word-break: break-all;
}
.itemList .listItem .textBox .contentText .line{
    display: flex;
}
.itemList .listItem .textBox .contentText .line p{
    margin-right: 20px;
}
.itemList .listItem .textBox .contentText .line p:first-child{
    position: relative;
}
.itemList .listItem .textBox .contentText .line p:first-child::before{
    content: '';
    display: block;
    width: 1px;
    height: 20px;
    background-color: var(--aGrey);
    position: absolute;
    right: -10px;
    top: 2px;
}
.itemList .listItem .textBox .contentText span{
    color: var(--color03);
}
.itemList .listItem .textBox .title{
    margin: 0 0 5px;
    font-size: 20px;
    color: var(--color01);
    text-transform: uppercase;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.itemList .listItem .textBox .title img{
    height: 25px;
    margin-right: 5px;
}

/* 詳細頁title */
.styleTitle{
    color: #fff;
    display: inline-flex;
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 6px 30px 6px 15px;
}
.styleTitle::before{
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    transform: skew(-20deg);
    transform-origin: top left;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.styleTitle::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    transform: skew(-20deg);
    transform-origin: top left;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: .5;
}
.styleTitle.colorBlue::before{
    background-color:var(--inStockColor);
}
.styleTitle.colorBlue::after{
    background-color:var(--inStockColor);
}
.styleTitle.colorRed::before{
    background-color:var(--oldProductColor);
}
.styleTitle.colorRed::after{
    background-color:var(--oldProductColor);
}

/*banner*/
.banner .owl-theme .owl-nav.disabled+.owl-dots{
    position: absolute;
    bottom: 0;
    width: 100%;
}
.banner .owl-theme .owl-dots .owl-dot span{
    width: 30px;
    height: 6px;
    margin: 5px;
}
.banner .owl-theme .owl-dots .owl-dot.active span,
.banner .owl-theme .owl-dots .owl-dot:hover span{
    background: var(--oldProductColor);
}

/*otherItems*/
.otherItems .no-js .owl-carousel,
.otherItems .owl-carousel.owl-loaded{
    position: relative;
}
.otherItems .owl-carousel .owl-nav button.owl-next,
.otherItems .owl-carousel .owl-nav button.owl-prev,
.otherItems .owl-carousel button.owl-dot{
    border: 1px solid #111130;
    background: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 25px;
    background: var(--inStockColor);
    color: #fff;
    border-color: #499cda;
}
.otherItems .owl-carousel .owl-nav button.owl-next span,
.otherItems .owl-carousel .owl-nav button.owl-prev span{
    vertical-align: 3px;
}
.otherItems .owl-theme .owl-nav {
    margin-top: 10px;
    position: absolute;
    z-index: 99;
    top: -67px;
    right: 0;
}

/*表單完成頁*/

.finishOrder .finishSend{    
    display: flex;
    justify-content: center;
    align-items: center;
    min-height:250px;
    flex-direction: column;
    font-size: 30px;
    line-height: 1.5em;
    gap:10px;
}
.finishOrder .finishSend .icon::before{
    --iconSize:80px;
}

.finishOrder .orderInfo{
    background: #fff;
    padding: 10px 0;
    border-radius: 8px;
    border: 1px solid var(--color05);
}
.finishOrder .orderInfo h3{
    font-size: 24px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--newProductColor);
}
.finishOrder .orderInfoList{
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.finishOrder .orderInfoList li{
    background: #e8f0f0;
    padding: 10px;
    border-radius: 5px;
}

.finishOrder .orderInfoList li>span{
    font-weight: bold;
}

.finishOrder .btnDefault{
    height: 50px;
    min-width: 150px;
    margin-top: 10px;
}

@media (max-width:580px) {
    .iconTitle{
        font-size: 21px;
    }
    .card{
        padding: 15px;
    }

    .logoTitle{
        margin-bottom: 8px;
        gap: 8px;
    }
    .logoTitle .title_content{
        gap: 0px;
        
    }    
    .logoTitle .logoName{
        font-size: 25px;
        margin-right: 5px;
    }
    .logoTitle .pageName{
        font-size: 21px;
    }
    
    .itemList .listItem{
        flex-direction: column;
        gap: 0;
    }
    .itemList .listItem .imgBox{
        max-width: none;
        margin-right: 0;
    }
    .itemList .listItem .textBox{
        padding: 5px;
        width: 100%;
    }
    .itemList .listItem .textBox .btnGroup{
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-top: 10px;
    }
    .itemList .listItem .textBox .btnGroup .btnDefault{
        flex: 1;
    }
    .itemList .listItem .textBox .contentText{
        gap: 3px;
        margin-bottom: 5px;
    }    
    .itemList .listItem .textBox .title{
        align-items: center;
        justify-content: center;
    }
    .itemList .listItem .textBox .title img{
        height: 30px;
    }
    .itemList .listItem .textBox .contentText span{
        display: block;
    }
}