@charset "utf-8";

/*
關於CSS設定說明
CSS屬性是會繼承的，而且還是由上往下繼承。
同樣元素設定16px 後 12px 再 15px 最後會以最後設定的15px為準
但是有兩種情況除外:
1.絕對路徑命名. 如: .xx .yy .zz p {設定值;}
2.important.  如: .xx p {設定值 !important;}

CSS3選取器語法 :nth-child(n) 

*/


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*上方選單解除滑動固定
.header_area.sticky { position:relative;}
*/


/*上方選單右邊設定 臉書/LINE/電話/信箱
.tp_links a:before {寬高大小設定}
.tp_links a.me_tp_fb {}
.tp_links a.me_tp_fb:before {背景換圖/建議.SVG}
.tp_links a.me_tp_line {}
.tp_links a.me_tp_line:before {背景換圖/建議.SVG}
.tp_links a.me_tp_call {}
.tp_links a.me_tp_call:before {背景換圖/建議.SVG}
.tp_links a.me_tp_mail {}
.tp_links a.me_tp_mail:before {背景換圖/建議.SVG}
*/


/*電腦LOGO
.nav-brand {}
*/

/*手機LOGO
.nav-brand-m {}
*/

/* 商品下拉超過30個變大 */
.stellarnav.desktop li.bigMenu>ul{display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); left: 0; width: 100%; position: fixed; padding: 20px;}
.stellarnav.desktop li.bigMenu ul ul{top: 100%; left: 0; width: 100%; background: #efefef; height: auto; max-height: 300px; overflow: auto;}
.stellarnav.desktop li.bigMenu ul ul li{margin: 0;} 
.stellarnav.hasBigMenu li.bigMenu li.has-sub > a:after{border-left: 6px solid transparent; border-bottom:unset; border-right: 6px solid transparent; border-top: 6px solid #898989; right: 5px;}
/* 主分類超過30個但次分類直接顯示 
.stellarnav.desktop li.bigMenu>ul{grid-gap: 10px;}
.stellarnav.desktop li.bigMenu li{border: 0;}
.stellarnav.desktop li.bigMenu>ul>li>a{border: 1px solid #ddd;}
.stellarnav.desktop li.bigMenu ul ul{display: block !important; position: relative; top: 0; background: unset; border: 0;}
.stellarnav.desktop li.bigMenu ul ul li{border: 0;}
 主分類超過30個但次分類直接顯示-結束 */

/* 商品下拉超過30個--結束 */

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*預設購物車版面 產品分類選單在左側 商品內頁詳細介紹下表單更改樣式 by shint at 2023.1.5  */
.product_page .main_part { max-width:1500px;}
/* .product_info_page .main_part { max-width:1200px;} */

.product_page .show_content,
.product_info_page .show_content { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;}
.product_page .product_menu_list { 
    position: relative; 

    width: 220px; 
    height: fit-content;
    min-height: 0;

    align-self: flex-start;

    letter-spacing: 1px;
}
.product_page .products-list,
.product-wrapper { width: calc(100% - 270px);}
ul.page { width: 100%;}

.product-layer-two li ul { position:static; margin-top:5px; /*display:block !important;*/ width:100%; margin-left:0;}
.product-layer-two li:hover ul { border: none !important; /*display:block !important;*/}
.product-layer-two li li { display: block; padding:0; transition:all ease .3s;}
.product-layer-two li li a{ padding:5px 10px;}
.product-layer-two li li:hover > a { background:#fff; color:#ad925e;}
.product-layer-two > li { width:100%; max-width:100%; padding:0; text-align:left; border-bottom:1px dotted #ccc; padding-bottom: 5px;}
.product-layer-two > li ul > li + li { margin-top:5px;}

.product_info_page .product_menu_list { display: none;} 
.product_info_page .products-list,
.product-wrapper { width: 100%;}

.product-layer-two li li:hover{ margin-left: 15px;}
.product-layer-two li li > a:before { content: ""; position: absolute; width: 12px; height: 8px; background: transparent; left: 0; margin-left: -20px; top: 50%; margin-top: -4px; clip-path: polygon(0 0, 100% 50% , 0 100%);}
.product-layer-two li li:hover > a:before { background:#ad925e;}

.product_info_page .half_box { width: 100%; float: none; padding-right: 0;}
.product_info_page .half_box li.btn_blankTop { margin-top: 50px; justify-content: space-between; display: flex;}
.product_info_page .half_box li.btn_blankTop input { width: calc(50% - 10px); background-image: none; padding: 0; text-align: center;}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 980px) {
}
@media screen and (max-width: 768px) {
.product_menu_list,
.products-list,
.product-wrapper { width: 100%;}
.product-layer-two { margin-right: 0; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-gap: 5px;}
.product_page .product-layer-two,
.product_page .products-list { width: 100%; border-right: none;}
.product_page .product_menu_list>h5{display: block;}

.product_page .show_content > a { order: 1;}
.product_page ul.products-list { order: 2;}
.product_page ul.page { order: 3;}
.product_page .product_menu_list {width: 100%; order: 0; min-height: unset;}
}
@media screen and (max-width: 600px) {
}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*預設解除背景輪播*/
#content_main { margin:0;}
.bannerindex { position:relative; height:auto;}
.swiper-banner { position:static; margin:0; height:auto;} 
/* .swiper-slide img { height:auto;} */
@media screen and (max-width: 768px) {
.bannerindex { padding:0; margin:0;}
}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*內頁BANNER 設定*/
.banner {}
.banner h5 {}
.banner.banA {}
.banner.banB {}
.banner.banC {}
.banner.banD {}
.banner.banE {}
.banner.banblog {}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*文章設定*/
/*一排呈現
.subbox_item { width:100%;}
*/
  

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*相本分類全版面 ( 限制最寬2000px
.work_page .main_part { max-width:2000px;}
.work_page .show_content { padding:0; width:100%;}
.work_page .show-list .item { width:33%; display:inline-block; float:none; margin:0; padding:0;}
@media screen and (max-width: 768px) {
.work_page .show-list .item { width:49%;}
}
@media screen and (max-width: 570px) {
.work_page .show-list .item { width:100%;}
}
.work_page .show-list .item a { max-width:100%;}
.work_page .show-list .show_pic { height:auto; line-height:0;}
.work_page .show-list .show_pic img { max-width:100%; max-height:100%;}
.work_page .show-list .show_name { position:absolute; top:50%; right:10%; width:80%; height:auto; line-height:160%; font-size: 20px; color: #FFFFFF !important; border: solid 1px #fff; text-align: center; margin: -20px 0 0 -120px; padding:5px 20px; transition:all ease-in .3s; opacity:0;}
.work_page .show-list .item:hover .show_name {opacity:1;}
*/


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*相本列表
.work_info_page .main_part { max-width:2000px;}
.work_info_page .show_content { padding:0; width:100%;}
.work_info_page .subalbum-menu { text-align:center;}
.work_info_page .subalbum-menu h2 { float:none;}
.work_info_page .pic-list .item { margin:0; padding:10px; width:49%; float:none; display:inline-block;}
@media screen and (max-width: 768px) {
.work_info_page .pic-list .item { width:100%;}
}
.work_info_page .pic-list .show_pic { height:auto; line-height:0;}
.work_info_page .pic-list .show_pic img { max-width:100%; max-height:100%;}
.work_info_page .pic-list .item a { max-width:100%; pointer-events: none; cursor: default; } 取消連結被點擊效果
*/

@media screen and (max-width: 768px) {
/* 開啟手機板下方按鈕所需設定 */
#bottom_menu {}
.footer.with_shopping_mode { padding:30px 0 70px; }
#to_top { bottom:60px;}
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
    
/* ========================================
   Header
======================================== */

/* === Header 基本設定 === */

.header_area {
    position: relative;
    z-index: 9999;

    width: 100%;

    background: #FBF6F3;
    border-bottom: 1px solid rgba(218, 184, 102, .15);

    overflow: visible;

    transition:
        background .35s ease,
        box-shadow .35s ease,
        backdrop-filter .35s ease;
}


/* === 首頁 Header === */

.pageIndex .header_area {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    background: rgba(251, 246, 243, .78);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


/* === Sticky Header === */

.header_area.sticky {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    background: rgba(251, 246, 243, .94);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 6px 24px rgba(61, 48, 34, .06);
}


/* === Header 內容寬度 === */

.main_header_area .container {
    width: 100%;
    max-width: 1720px;

    margin: 0 auto;
}


/* === Header 排版 === */

.navigation {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 96px;

    padding: 0 clamp(35px, 5vw, 90px);

    overflow: visible;

    transition: height .35s ease;
}

.header_area.sticky .navigation {
    height: 84px;
}


/* === Logo === */

.nav-header {
    position: static;

    flex: 0 0 auto;

    width: 175px;
    max-width: 175px;

    margin: 0;

    transition:
        width .35s ease,
        max-width .35s ease;
}

.header_area.sticky .nav-header {
    width: 155px;
    max-width: 155px;
}

.nav-brand {
    display: block;

    width: 100%;
    padding: 0;
}

.nav-brand img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0;
}


/* === 隱藏 Header 其他功能 === */

.me_tp_features,
.tp_links {
    display: none;
}


/* === 主選單 === */

.stellarnav {
    position: relative;

    width: auto;
    height: 100%;

    margin-left: auto;

    overflow: visible;

    z-index: 100;
}

.stellarnav > ul {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;

    height: 100%;

    gap: clamp(24px, 2.4vw, 48px);

    margin: 0;
    padding: 0;
}

.stellarnav > ul > li {
    position: relative;

    display: flex;
    align-items: center;

    width: auto;
    height: 100%;

    margin: 0;
}


/* === 主選單文字 === */

.stellarnav > ul > li > a {
    position: relative;

    display: grid;
    place-items: center;

    padding: 0px;

    color: #3D3022;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 1.8px;

    white-space: nowrap;
}


/* 中文、英文共用位置 */

.stellarnav > ul > li > a > b {
    grid-area: 1 / 1;

    display: block;

    font-weight: inherit;
    white-space: nowrap;
}


/* 中文 */

.stellarnav > ul > li > a > b:first-child {
    color: #3D3022;

    opacity: 1;

    transform: rotateX(0deg);
    transform-origin: center center;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transition:
        opacity .3s ease,
        transform .5s cubic-bezier(.22, 1, .36, 1);
}


/* 英文 */

.stellarnav > ul > li > a > b:last-child:not(:first-child) {
    position: relative;
    top: 2px;

    color: #B88F38;

    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.8px;

    opacity: 0;

    transform: rotateX(-90deg);
    transform-origin: center center;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transition:
        opacity .3s ease,
        transform .5s cubic-bezier(.22, 1, .36, 1);
}


/* === 主選單 Hover === */

/* 中文原位翻出 */

.stellarnav > ul > li:hover > a > b:first-child {
    opacity: 0;

    transform: rotateX(90deg);
}


/* 英文原位翻入 */

.stellarnav > ul > li:hover > a > b:last-child:not(:first-child) {
    opacity: 1;

    transform: rotateX(0deg);
}

/* === 子選單箭頭 === */

/* 流當商品左右保留相同空間，避免選單中心偏移 */
.stellarnav.desktop > ul > li.has-sub > a {
    padding-left: 0px;
    padding-right: 0px;
}

/* 清除系統原本掛在 a 上的箭頭 */
.stellarnav.desktop > ul > li.has-sub > a::after {
    display: none;
}

/* 中文、英文的菱形 */
.stellarnav.desktop > ul > li.has-sub > a > b::after {
    content: "";

    display: inline-block;

    width: 6px;
    height: 6px;

    margin-left: 9px;

    background: transparent;
    border: 1px solid #8A7966;

    transform: rotate(45deg);

    vertical-align: middle;

    transition:
        border-color .3s ease,
        background .3s ease;
}

/* 英文菱形 */
.stellarnav.desktop > ul > li.has-sub > a > b:last-child:not(:first-child)::after {
    border-color: #DAB866;
    background: #DAB866;
}


/* === 桌機隱藏額外展開按鈕 === */

.stellarnav.desktop .dd-toggle {
    display: none;
}


/* === 子選單 === */

.stellarnav.desktop > ul > li > ul {
    position: absolute;

    top: 100%;
    left: 50%;

    min-width: 170px;

    margin: 0;
    padding: 8px 0;

    background: rgba(251, 246, 243, .98);

    border: 0;
    border-top: 2px solid #DAB866;

    box-shadow: 0 12px 28px rgba(61, 48, 34, .08);

    transform: translateX(-50%);

    z-index: 9999;
}

.stellarnav.desktop > ul > li > ul::before {
    display: none;
}


/* === 子選單項目 === */

.stellarnav.desktop li li {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;
}

.stellarnav.desktop li li a {
    display: block;

    width: 100%;

    padding: 11px 20px;

    color: #574838;
    background: transparent;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 1.2px;

    text-align: center;
    white-space: nowrap;

    transition:
        color .25s ease,
        background .25s ease;
}

.stellarnav.desktop li li a:hover {
    padding: 11px 20px;

    color: #A77C28;
    background: rgba(218, 184, 102, .08);
}


/* === 第二層子選單 === */

.stellarnav.desktop li li > ul {
    top: 0;
    left: 100%;

    transform: none;
}


/* ========================================
   Header RWD
======================================== */


/* === Header RWD｜1200 === */

@media screen and (max-width: 1200px) {

    .navigation,
    .header_area.sticky .navigation {
        height: 88px;
        padding: 0 28px;
    }

    .nav-header {
        width: 145px;
        max-width: 145px;
    }

    .header_area.sticky .nav-header {
        width: 135px;
        max-width: 135px;
    }

    .stellarnav > ul {
        gap: 18px;
    }

    .stellarnav > ul > li > a {
        min-width: 58px;

        font-size: 14px;
        letter-spacing: 1.2px;
    }

    .stellarnav > ul > li > a::after {
        font-size: 10px;
        letter-spacing: 1.2px;
    }
}


/* === Header RWD｜1024 === */

@media screen and (max-width: 1024px) {
    /* 1024 以下 Header 獨立佔位，不疊 Banner */
.pageIndex .header_area,
.header_area {
    position: relative;
    top: auto;
    left: auto;

    width: 100%;
}

    /* Header 排版 */
    .navigation,
    .header_area.sticky .navigation {
        height: 80px;

        padding: 0 24px;
    }


    /* Logo */
    .nav-header,
    .header_area.sticky .nav-header {
        flex: 0 0 auto;

        width: 120px;
        max-width: 120px;
    }


    /* 主選單 */
    .stellarnav {
        height: 100%;

        margin-left: 42px;
    }

    .stellarnav > ul {
        align-items: stretch;
        justify-content: flex-end;

        height: 100%;

        gap: 12px;
    }

    .stellarnav > ul > li {
        align-items: center;

        height: 100%;

        padding: 0;
    }


    /* 主選單文字 */
   .stellarnav > ul > li > a {
    min-width: 52px;

    font-size: 13px;
    letter-spacing: .8px;

    text-align: center;
}

.stellarnav > ul > li > a > b {
    width: 100%;
    text-align: center;
}


    /* 流當商品 */
    .stellarnav.desktop > ul > li.has-sub > a {
        padding-left: 0;
        padding-right: 0;
    }

    .stellarnav.desktop > ul > li.has-sub > a > b::after {
        width: 5px;
        height: 5px;

        margin-left: 6px;
    }
}

/* === Header RWD｜768 === */

@media screen and (max-width: 768px) {

    /* Header */

    .header_area {
        position: relative;

        background: #FBF6F3;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .pageIndex .header_area {
        position: relative;
        top: auto;
        left: auto;

        width: 100%;

        background: #FBF6F3;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .header_area.sticky,
    .pageIndex .header_area.sticky {
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;

        background: rgba(251, 246, 243, .96);

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .stellarnav.mobile .menu-toggle::after {
    display: none;
}


    /* Header 排版 */

    .navigation,
    .header_area.sticky .navigation {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 74px;

        padding: 0 18px;
    }


    /* Logo */

    .nav-header,
    .header_area.sticky .nav-header {
        position: absolute;
        top: 50%;
        left: 50%;

        width: 120px;
        max-width: 120px;

        margin: 0;

        transform: translate(-50%, -50%);

        z-index: 20;
    }


    /* 手機選單 */

    .stellarnav.mobile {
    position: static;

    width: 100%;
    height: auto;

    margin: 0;

    transform: none;
}


    /* 漢堡 */

    .stellarnav.mobile .menu-toggle {
    position: absolute;
    top: 50%;
    left: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    margin: 0;
    padding: 0;

    color: #3D3022;

    transform: translateY(-50%);

    z-index: 31;
}

    .stellarnav.mobile .menu-toggle span.bars {
        display: block;
    }

    .stellarnav.mobile .menu-toggle span.bars span {
        display: block;

        width: 21px;
        height: 2px;

        margin: 4px 0;

        background: #3D3022;
    }


    /* 手機主選單 */

    .stellarnav.mobile > ul {
    margin: 0;
    padding: 8px 0;

    background: rgba(251, 246, 243, .98);

    border-top: 1px solid rgba(218, 184, 102, .15);

    box-shadow: 0 14px 30px rgba(61, 48, 34, .08);

    z-index: 30;
}

    .stellarnav.mobile > ul > li {
        position: relative;

        display: block;

        width: 100%;
        height: auto;

        margin: 0;

        border-bottom: 1px solid rgba(61, 48, 34, .06);
    }

    .stellarnav.mobile > ul > li:last-child {
        border-bottom: 0;
    }


    /* 手機文字 */

    .stellarnav.mobile > ul > li > a {
        display: block;

        width: 100%;
        height: auto;
        min-width: 0;

        padding: 14px 50px 14px 20px;

        overflow: visible;

        color: #3D3022;

        font-size: 15px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 1.3px;

        text-align: left;
    }

    .stellarnav.mobile > ul > li > a > b {
        display: inline;

        line-height: inherit;

        opacity: 1;

        transform: none;
    }


    /* 手機取消桌機 Hover 動畫 */

    .stellarnav.mobile > ul > li > a::before,
    .stellarnav.mobile > ul > li > a::after,
    .stellarnav.mobile > ul > li > a > b::after {
        display: none;
    }

    .stellarnav.mobile > ul > li:hover > a > b {
        opacity: 1;

        transform: none;
    }

    .stellarnav.mobile > ul > li:hover > a {
        color: #B88F38;
    }


    /* 手機子選單按鈕 */

    .stellarnav.mobile .dd-toggle {
        position: absolute;
        top: 0;
        right: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 48px;
        height: 50px;

        padding: 0;

        color: #8A7966;
    }


    /* 手機子選單 */

    .stellarnav.mobile ul ul {
        position: static;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 4px 0;

        background: rgba(218, 184, 102, .07);

        border: 0;

        box-shadow: none;

        transform: none;
    }

    .stellarnav.mobile li li {
        width: 100%;

        margin: 0;

        border: 0;
    }

    .stellarnav.mobile li li a {
        display: block;

        width: 100%;

        padding: 11px 20px 11px 36px;

        color: #6A5845;
        background: transparent;

        font-size: 13px;
        line-height: 1.6;
        letter-spacing: 1px;

        text-align: left;
    }

    .stellarnav.mobile li li a:hover {
        padding: 11px 20px 11px 36px;

        color: #B88F38;
        background: rgba(218, 184, 102, .08);
    }
}


/* === Header RWD｜450 === */

@media screen and (max-width: 450px) {

    .navigation,
    .header_area.sticky .navigation {
        height: 68px;

        padding: 0 15px;
    }

    .nav-header,
    .header_area.sticky .nav-header {
        width: 108px;
        max-width: 108px;
    }

    .stellarnav.mobile .menu-toggle {
    left: 15px;
}

    .stellarnav.mobile > ul > li > a {
        padding: 13px 46px 13px 18px;

        font-size: 14px;
    }

    .stellarnav.mobile .dd-toggle {
        width: 44px;
        height: 47px;
    }

    .stellarnav.mobile li li a {
        padding: 10px 18px 10px 32px;

        font-size: 13px;
    }

    .stellarnav.mobile li li a:hover {
        padding: 10px 18px 10px 32px;
    }
}
/* ========================================
   Header - Desktop Reset
   防止手機選單展開狀態污染桌機
======================================== */

@media screen and (min-width: 769px) {

    .stellarnav .menu-toggle {
        display: none !important;
    }

    .stellarnav > ul {
        position: static !important;

        display: flex !important;
        align-items: stretch;
        justify-content: flex-end;

        width: auto !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    .stellarnav > ul > li {
        display: flex !important;
        align-items: center;

        height: 100%;
    }
}

/* ========================================
   手機選單 - 關閉按鈕
======================================== */

@media screen and (max-width: 768px) {

    /* 關閉列 */
    .stellarnav.mobile.left .close-menu,
    .stellarnav.mobile.right .close-menu {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;

        width: 100%;
        height: 48px;

        padding: 0 18px !important;

        background: #FBF6F3 !important;
        border-bottom: 1px solid rgba(53, 43, 32, .10);

        /* 隱藏原本 Close 文字 */
        color: transparent !important;
        font-size: 0 !important;

        box-sizing: border-box;
    }


    /* 叉叉本體 */
    .stellarnav .icon-close {
        position: relative !important;

        display: block !important;

        width: 18px !important;
        height: 18px !important;

        margin: 0 !important;

        background: none !important;
    }


    /* 重新畫叉叉 */
    .stellarnav .icon-close::before,
    .stellarnav .icon-close::after {
        content: "" !important;

        position: absolute !important;
        top: 50% !important;
        left: 50% !important;

        width: 18px !important;
        height: 1px !important;

        background: #352B20 !important;
        border: none !important;

        transform-origin: center !important;
    }

    .stellarnav .icon-close::before {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    .stellarnav .icon-close::after {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

}

/* ========================================
   首頁大圖
======================================== */

.pageIndex .bannerindex .swiper-slide {
    position: relative;
    overflow: hidden;
}


/* === Banner 01 === */

/* 背景 */
.pageIndex .bannerindex .swiper-slide-active:nth-child(1) img {
    animation: banner01Bg 5.5s ease both;
}

/* 主標題 */
.pageIndex .bannerindex .swiper-slide-active:nth-child(1)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;

    background-image: url("https://pic03.eapple.com.tw/lishengpawn/banner01_title.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    animation: banner01Title 1s cubic-bezier(.22, 1, .36, 1) .25s both;
}

/* 金線＋專業・透明・安心 */
.pageIndex .bannerindex .swiper-slide-active:nth-child(1)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;

    background-image: url("https://pic03.eapple.com.tw/lishengpawn/banner01_info.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    animation: banner01Info .8s ease 1s both;
}


/* === Banner 02 === */

/* 背景 */
.pageIndex .bannerindex .swiper-slide-active:nth-child(2) img {
    animation: banner02Bg 5.5s ease both;
}

/* 主標題 */
.pageIndex .bannerindex .swiper-slide-active:nth-child(2)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;

    background-image: url("https://pic03.eapple.com.tw/lishengpawn/banner02_title.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    animation: banner02Title .75s cubic-bezier(.22, 1, .36, 1) .2s both;
}

/* 金線＋專業・透明・安心 */
.pageIndex .bannerindex .swiper-slide-active:nth-child(2)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;

    background-image: url("https://pic03.eapple.com.tw/lishengpawn/banner02_info.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    animation: banner02Info .7s ease .8s both;
}


/* === Banner Animation === */

/* Banner 01 背景：慢慢縮回 */
@keyframes banner01Bg {
    0% {
        transform: scale(1.035);
    }

    100% {
        transform: scale(1);
    }
}

/* Banner 01 主標：由左向右揭露 */
@keyframes banner01Title {
    0% {
        opacity: 0;
        transform: translateX(-25px);
        clip-path: inset(0 100% 0 0);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
    }
}

/* Banner 01 資訊：由下淡入 */
@keyframes banner01Info {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Banner 02 背景：慢慢推近 */
@keyframes banner02Bg {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.035);
    }
}

/* Banner 02 主標：快速滑入＋清晰 */
@keyframes banner02Title {
    0% {
        opacity: 0;
        transform: translateX(-38px);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* Banner 02 資訊：跟隨滑入 */
@keyframes banner02Info {
    0% {
        opacity: 0;
        transform: translateX(-18px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* === Banner RWD === */

@media screen and (max-width: 768px) {

    /* Banner 01 主標 */
    .pageIndex .bannerindex .swiper-slide-active:nth-child(1)::before {
        animation-name: banner01TitleMobile;
    }

    /* Banner 02 主標 */
    .pageIndex .bannerindex .swiper-slide-active:nth-child(2)::before {
        animation-name: banner02TitleMobile;
    }

    @keyframes banner01TitleMobile {
        0% {
            opacity: 0;
            transform: translateX(-15px);
            clip-path: inset(0 100% 0 0);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
            clip-path: inset(0 0 0 0);
        }
    }

    @keyframes banner02TitleMobile {
        0% {
            opacity: 0;
            transform: translateX(-20px);
            filter: blur(3px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
            filter: blur(0);
        }
    }
}

/* ========================================
   功能頁共用 - 內頁 Banner
======================================== */

.banner {
    position: relative;
    height: 300px;

    /* 換成這個案件的 Banner 圖片 */
    background-image: url("https://pic03.eapple.com.tw/lishengpawn/banblog.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    overflow: hidden;
}

/* === 功能頁標題 === */

.banner h5 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(1520px, calc(100% - 80px));
    margin: 0;

    color: #FBF6F3;
    font-family: "Noto Serif TC";
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;

    text-align: left;
    z-index: 1;
}

/* === 功能頁英文裝飾字 === */

.banner h5::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 62px;
    transform: translateY(-50%);

    overflow: hidden;
    max-width: 400px;

    color: rgba(251, 246, 243, 0.10);
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: "Noto Serif TC";
    font-size: 96px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;

    text-transform: uppercase;

    pointer-events: none;
    z-index: -1;
}

/* === 不同文章類型 Banner 英文字 === */

/* 常見問題 */
.article_a .banner h5::after {
    content: "FAQ" !important;
}

/* 最新消息 */
.article_b .banner h5::after {
    content: "NEWS" !important;
}

/* 流當商品 */
.product_page .banner h5::after {
    content: "PAWNED GOODS" !important;

    max-width: none;
    overflow: visible;

    text-overflow: clip;
}
/* ========================================
   功能頁共用 - 內頁 Banner RWD
======================================== */

@media screen and (max-width: 1024px) {

    /* === 功能頁大圖 === */

    .banner {
        height: 260px;
    }

    /* === 功能頁標題 === */

    .banner h5 {
        width: calc(100% - 64px);
        font-size: 26px;
    }

    /* === 功能頁英文裝飾字 === */

    .banner h5::after {
        left: 54px;
        font-size: 78px;
    }
}


@media screen and (max-width: 768px) {

    /* === 功能頁大圖 === */

    .banner {
        height: 220px;
    }

    /* === 功能頁標題 === */

    .banner h5 {
        width: calc(100% - 48px);
        font-size: 24px;
    }

    /* === 功能頁英文裝飾字 === */

    .banner h5::after {
        left: 46px;
        font-size: 64px;
    }
}


@media screen and (max-width: 425px) {

    /* === 功能頁大圖 === */

    .banner {
        height: 180px;
    }

    /* === 功能頁標題 === */

    .banner h5 {
        width: calc(100% - 40px);
        font-size: 22px;
    }

    /* === 功能頁英文裝飾字 === */

    .banner h5::after {
        left: 38px;
        font-size: 50px;
    }
}


@media screen and (max-width: 375px) {

    /* === 功能頁大圖 === */

    .banner {
        height: 170px;
    }

    /* === 功能頁英文裝飾字 === */

    .banner h5::after {
        left: 34px;
        font-size: 46px;
    }
}

/* ========================================
   功能頁【文章類】- 常見問題
======================================== */

/* 背景底色 */
#content {
    background: #FBF6F3;
}
 
/* 左側選單 */
.article_a .blog_le .accordion {
    border: none;
    border-radius: 0;
}
 
.blog_search {
    margin-bottom: 15px;
}
 
/* 選項分隔線 */
.article_a .accordion li .link {
    border-top: none;
    border-bottom: 1px solid #ccc;
}
 
.article_a .accordion li .link a {
    color: #444;
    font-size: 15px;
}
 
/* 選項 Hover、當前分類 */
.article_a .blog_le .accordion > li:hover,
.article_a .blog_le .accordion > li.on_this_category {
    background: #DAB866 !important;
}
 
/* 右側案例列表 */
.article_a .blog_subbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}
 
/* 單張案例 */
.article_a .blog_subbox .subbox_item > a {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 10px;
}
 
/* 關閉原本 Hover 遮罩 */
.article_a .blog_subbox .subbox_item > a::before,
.article_a .blog_subbox .subbox_item > a::after {
    display: none;
}
 
/* 圖片 */
.article_a .blog_list_le {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: visible;
    margin-bottom: 20px;
}
 
.article_a .blog_list_le img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
/* 底線 */
.article_a .blog_list_le::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 100%;
    height: 2px;
    background: #f1d89c;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
 
/* 原本的淡色線 */
.article_a .blog_list_le::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 100%;
    height: 2px;
    background: #DAB866;
}
 
/* Hover */
.article_a .subbox_item > a:hover .blog_list_le::after {
    transform: scaleX(1);
}
 
/* 文字區 */
.article_a .blog_list_ri {
    display: flex;
    flex-direction: column;
    padding-top: 0;
}
 
/* 標題 */
.article_a .blog_list_ri h5 {
    order: 1;
    font-family: "Noto Sans TC", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 135%;
    color: #DAB866;
}
 
/* 內文 */
.article_a .blog_list_ri p {
    order: 2;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
    color: #1F1F1F;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
 
/* 日期 */
.article_a .blog_list_ri em {
    order: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1F1F1F;
    font-family: "Noto Sans TC", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.3px;
}
 
/* MORE 按鈕 */
.article_a .blog_list_ri em::after {
    content: "MORE +";
    background: #DAB866;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    letter-spacing: 1px;
    padding: 5px 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .3s ease, transform .3s ease;
}
 
/* 常見問題 Hover */
.article_a .subbox_item > a:hover .blog_list_ri em::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
 
 
/* === 常見問題內頁 === */
.blog_back a.article_btn_back {
    background: #1B3A5C;
}
 
/* ========================================
   功能頁【文章類】- 常見問題 RWD
======================================== */
@media screen and (max-width: 1024px) {
 
    /* 常見問題列表 */
    .article_a .blog_subbox {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
 
    /* 標題 */
    .article_a .blog_list_ri h5 {
        font-size: 20px;
    }
 
    /* 內文 */
    .article_a .blog_list_ri p {
        font-size: 14px;
    }
}
 
@media screen and (max-width: 768px) {
 
    /* 左右區塊改上下排列 */
    .article_a .blog_box {
        grid-template-columns: 1fr;
    }
 
    /* 左側選單 */
    .article_a .blog_le {
        width: 100%;
    }
 
    /* 右側案例 */
    .article_a .blog_ri {
        width: 100%;
    }
 
    /* 案例列表 */
    .article_a .blog_subbox {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }
 
    /* MORE 按鈕 */
    .article_a .blog_list_ri em::after {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}
 
@media screen and (max-width: 425px) {
     /* 右側案例 */
    .article_a .blog_ri {
        padding: 0 20px;
    }
 
    /* 案例列表 */
    .article_a .blog_subbox {
        grid-template-columns: 1fr;
        gap: 40px;
    }
 
    /* 標題 */
    .article_a .blog_list_ri h5 {
        font-size: 18px;
    }
 
    /* 內文 */
    .article_a .blog_list_ri p {
        font-size: 14px;
    }
 
    /* 日期 */
    .article_a .blog_list_ri em {
        font-size: 12px;
    }
}
/* ======================================== 
   文章【Article】- 最新消息
======================================== */ 
  
/* 清除原本 accordion 樣式 */ 
.article_b .blog_le .accordion { 
    margin-top: 20px; 
    padding: 0; 
  
    border: none; 
    background: transparent; 
  
    counter-reset: faq-menu; 
} 
  
/* 每個分類 */ 
.article_b .blog_le .accordion > li { 
    position: relative; 
  
    margin: 0; 
    padding: 0; 
  
    border: none; 
    background: transparent; 
  
    counter-increment: faq-menu; 
} 
  
/* 清除原本 link */ 
.article_b .blog_le .accordion .link { 
    padding: 0; 
  
    border: none; 
    background: transparent; 
} 
  
/* ========================================
   最新消息 分類連結
======================================== */ 

.article_b .blog_le .accordion .link > a { 
    position: relative; 
  
    display: flex; 
    align-items: center; 
  
    width: 100%; 
  
    padding: 18px 10px 18px 48px; 
  
    box-sizing: border-box; 
  
    border: none; 
    border-bottom: 1px solid rgba(53, 43, 32, .2); 
    border-radius: 0 !important;
  
    background: transparent; 
  
    color: #352B20;

    font-family: "Noto Sans TC", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
    letter-spacing: .1px;
  
    overflow: hidden; 
  
    transition: 
        color .3s ease, 
        padding .3s ease; 
} 
  
/* === 左側編號 === */ 
  
.article_b .blog_le .accordion .link > a::before { 
    content: "0" counter(faq-menu); 
  
    position: absolute; 
    left: 5px; 
    top: 50%; 
  
    transform: translateY(-50%); 
  
    color: #DAB866;

    font-family: "Noto Serif TC", serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .1px;
  
    transition: 
        color .3s ease, 
        transform .3s ease; 
} 
  
/* === 底部金色動畫線 === */ 
  
.article_b .blog_le .accordion .link > a::after { 
    content: ""; 
  
    position: absolute; 
    left: 0; 
    bottom: 0; 
  
    width: 0; 
    height: 2px; 
  
    background: #DAB866; 
  
    transition: width .4s ease; 
} 
  
/* === Hover === */ 
  
.article_b .blog_le .accordion .link > a:hover {
    padding-left: 55px;

    color: #352B20;

    background: rgba(218, 184, 102, .10);

    border-radius: 0 !important;
}

/* 點擊瞬間不要變藍 */
.article_b .blog_le .accordion .link > a:active,
.article_b .blog_le .accordion .link > a:focus {
    color: #352B20;
    background: rgba(218, 184, 102, .10);
    outline: none;
}

/* 目前所在分類 */
.article_b .blog_le .accordion > li.on_this_category .link > a {
    color: #FBF6F3 !important;
    background: #352B20 !important;
}

/* 編號稍微往右 */ 
.article_b .blog_le .accordion .link > a:hover::before { 
    color: #DAB866; 
  
    transform: translate(5px, -50%); 
} 
  
/* 金線展開 */ 
.article_b .blog_le .accordion .link > a:hover::after { 
    width: 100%; 
} 
  
  
/* ========================================
   最新消息 列表
======================================== */ 
  
/* 最新消息 列表：一列一個 */ 
.article_b .blog_subbox { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 12px; 
} 
  
/* 單一 最新消息 */ 
.article_b .blog_subbox .subbox_item > a { 
    position: relative; 
    display: block; 
  
    padding: 22px 65px 22px 28px; 
  
    background: #fff; 
    border: 1px solid rgba(53, 43, 32, .2); 
    border-radius: 8px; 
  
    overflow: hidden; 
    border-left: 3px solid transparent;
    box-shadow: none;
  
    transition: 
        border-color .3s ease,
        background .3s ease; 
} 
  
/* Hover */ 
.article_b .blog_subbox .subbox_item > a:hover { 
    border-color: #DAB866;
    border-left-color: #DAB866;

    background: #fff;

    box-shadow: none;
}

/* 清除原版型原本的斜線亮光 */
.article_b .blog_subbox .subbox_item > a::before,
.article_b .blog_subbox .subbox_item > a::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}
  
/* 隱藏文章圖片 */ 
.article_b .blog_subbox .blog_list_le { 
    display: none; 
} 
  
/* 文字區 */ 
.article_b .blog_subbox .blog_list_ri { 
    width: 100%; 
} 
  
/* 最新消息 問題標題 */ 
.article_b .blog_subbox .blog_list_ri h3 { 
    margin: 0; 
  
    color: #352B20;

    font-family: "Noto Serif TC", serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 160%;
    letter-spacing: 2px;
    position: relative;
    padding-right: 35px;
  
    transition: 
        color .3s ease, 
        transform .3s ease; 
} 

/* 右側 + 號 */
.article_b .blog_subbox .blog_list_ri h3::after {
    content: "＋";

    position: absolute;
    top: 50%;
    right: -38px;

    color: #DAB866;

    font-family: "Noto Sans TC", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;

    transform: translateY(-50%) rotate(0);

    transition: transform .35s ease;
}

.article_b .blog_subbox .subbox_item > a:hover h3::after {
    transform: translateY(-50%) rotate(45deg);
}
  
/* Hover 文字微微往右 */ 
.article_b .blog_subbox .subbox_item > a:hover h3 { 
    color: #352B20; 
  
    transform: translateX(4px); 
} 
  
/* 隱藏日期 */ 
.article_b .blog_subbox .blog_list_ri .date { 
    display: none; 
} 
  
/* 隱藏文章摘要 */ 
.article_b .blog_subbox .blog_list_ri p { 
    display: none; 
} 
  
/* ========================================
   最新消息內頁
======================================== */ 

.blog_back a.article_btn_back {
    background: #DAB866;
    color: #FFFFFF;
} 
  
.lastPage { 
    background: #352B20; 
} 

.blog_list_ri h5 {
    color: #352B20;
    font-weight: 600;
}

/* 上下一篇 */
.blog_back a.article_btn_prev {
    background: #352B20;
}

.blog_back a.article_btn_next {
    background: #352B20;
}

/* ========================================
   功能頁【文章類】- 內頁相關文章
======================================== */


/* === 相關文章區塊 === */

.article_a .news_related,
.article_b .news_related {
    padding: 40px 15px;
    background: #FBF6F3;
}


/* 相關文章標題 */

.article_a .news_related h6,
.article_b .news_related h6 {
    margin-bottom: 24px;

    color: #352B20;

    font-family: "Noto Serif TC", serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 160%;
    letter-spacing: 2px;

    text-align: center;
}


/* 標題文字 */

.article_a .news_related h6 span,
.article_b .news_related h6 span {
    color: #352B20;

    font: inherit;
}


/* 標題裝飾 */

.article_a .news_related h6 span::before,
.article_b .news_related h6 span::before {
    color: #DAB866;
}


/* === 相關文章列表 === */


/* 文章名稱 */

.article_a .news_related .related_list p,
.article_b .news_related .related_list p {
    color: #352B20;

    font-family: "Noto Sans TC", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
    letter-spacing: .1px;

    text-align: center;

    transition: color .3s ease;
}


/* 文章 Hover */

.article_a .news_related .related_list li:hover p,
.article_b .news_related .related_list li:hover p {
    color: #DAB866;
}


/* === 上一頁按鈕 === */

.article_a .news_related_b_box .lastPage,
.article_b .news_related_b_box .lastPage {
    background: #352B20;
    border: 1px solid #352B20;

    color: #FBF6F3;

    font-family: "Noto Sans TC", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
    letter-spacing: .1px;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease;
}


/* 上一頁 Hover */

.article_a .news_related_b_box .lastPage:hover,
.article_b .news_related_b_box .lastPage:hover {
    background: #DAB866;
    border-color: #DAB866;

    color: #352B20;
}
  
  
/* ======================================== 
   文章【Article】- 最新消息 RWD 
======================================== */ 
  
@media screen and (max-width: 1024px) { 
  
    .article_b .blog_subbox .subbox_item > a { 
        padding: 20px 60px 20px 25px; 
    } 
  
} 
  
@media screen and (max-width: 768px) { 
  
    .article_b .blog_subbox { 
        gap: 10px; 
    } 
  
    .article_b .blog_subbox .subbox_item > a { 
        padding: 18px 50px 18px 20px; 
    } 
  
    .article_b .blog_subbox .blog_list_ri h3 { 
        font-size: 18px;
        letter-spacing: 1.5px;
    } 
  
    .article_b .blog_le .accordion .link > a { 
        padding: 15px 10px 15px 42px; 
  
        font-size: 14px; 
    } 

    .article_b .blog_subbox .blog_list_ri h3::after {
    right: -30px;
    font-size: 20px;
    }
} 
  
@media screen and (max-width: 450px) { 
  
    .article_b .blog_subbox .subbox_item > a { 
        padding: 16px 45px 16px 18px; 
    } 
  
    .article_b .blog_subbox .blog_list_ri h3 { 
        font-size: 16px;
        letter-spacing: 1px;
    }   

    .article_b .blog_subbox .blog_list_ri h3::after {
    right: -27px;
    font-size: 18px;
    }
}

/* ========================================
   功能頁【產品類】- 商品列表
======================================== */


/* === 左側分類選單 === */


/* 分類選單外框 */

.product_page .product_menu_list {
    background: #FBF6F3;

    border: 1px solid rgba(53, 43, 32, .12);
}


/* 分類標題 */

.product_page .product_menu_list > h5 {
    position: relative;

    margin: 0;
    padding: 16px 20px;

    color: #352B20;

    font-family: "Noto Serif TC", serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 2px;

    border-bottom: 1px solid rgba(53, 43, 32, .12);
}


/* 分類展開按鈕 */

.product_page .product_menu_list .pd_menu_toggle {
    position: absolute;
    top: 50%;
    right: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    color: #DAB866;

    transform: translateY(-50%);

    transition:
        color .3s ease,
        transform .3s ease;
}

.product_page .product_menu_list .pd_menu_toggle:hover {
    color: #352B20;
}


/* 第一層分類 */

.product_page .product-layer-two {
    margin: 0;
    padding: 0;
}


/* 分類項目 */

.product_page .product-layer-two > li {
    position: relative;

    width: 100%;
    margin: 0;
    padding: 0;

    border-bottom: 1px solid rgba(53, 43, 32, .12);
}

.product_page .product-layer-two > li:last-child {
    border-bottom: 0;
}


/* 分類連結 */

.product_page .product-layer-two > li > a {
    position: relative;

    display: block;

    width: 100%;

    padding: 15px 20px 15px 24px;

    box-sizing: border-box;

    color: #352B20;
    background: transparent;

    font-family: "Noto Sans TC", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 175%;
    letter-spacing: .1px;

    transition:
        color .3s ease,
        background .3s ease,
        padding-left .3s ease;
}


/* 分類左側金線 */

.product_page .product-layer-two > li > a::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background: #DAB866;

    transform: scaleY(0);
    transform-origin: bottom;

    transition: transform .35s ease;
}


/* 分類 Hover */

.product_page .product-layer-two > li:hover > a {
    padding-left: 30px;

    color: #352B20;
    background: rgba(218, 184, 102, .10);
}

.product_page .product-layer-two > li:hover > a::before {
    transform: scaleY(1);
}


/* 點擊狀態 */

.product_page .product-layer-two > li > a:active,
.product_page .product-layer-two > li > a:focus,
.product_page .product-layer-two > li > a:visited {
    color: #352B20;
}


/* 目前分類 */

.product_page .product-layer-two > li.active > a,
.product_page .product-layer-two > li.on_this_category > a {
    padding-left: 30px;

    color: #FBF6F3 !important;
    background: #352B20 !important;

    font-weight: 500;
}

.product_page .product-layer-two > li.active > a::before,
.product_page .product-layer-two > li.on_this_category > a::before {
    transform: scaleY(1);

    background: #DAB866;
}


/* 第二層分類 */

.product_page .product-layer-two ul {
    width: 100%;

    margin: 0;
    padding: 0;

    background: rgba(218, 184, 102, .07);

    border: 0;
}


/* 隱藏空分類 */

.product_page .product-layer-two ul.noContent:empty {
    display: none;
}


.product_page .product-layer-two ul li {
    width: 100%;

    margin: 0;
    padding: 0;
}


/* 第二層分類連結 */

.product_page .product-layer-two ul li > a {
    display: block;

    padding: 11px 20px 11px 36px;

    color: #352B20;

    font-family: "Noto Sans TC", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 160%;

    transition:
        color .3s ease,
        background .3s ease,
        padding-left .3s ease;
}


/* 第二層分類 Hover */

.product_page .product-layer-two ul li > a:hover {
    padding-left: 40px;

    color: #352B20;
    background: rgba(218, 184, 102, .12);
}



/* === 右側商品列表 === */


/* 商品卡 */

.product_page ul.products-list > li {
    position: relative;

    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.product_page ul.products-list > li:hover {
    transform: translateY(-3px);
}


/* 商品圖片 */

.product_page ul.products-list > li img {
    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        filter .4s ease;
}

.product_page ul.products-list > li:hover img {
    transform: scale(1.015);

    filter: brightness(.97);
}


/* 商品名稱 */

.product_page .products-list .item .name {
    color: #352B20;

    font-family: "Noto Serif TC", serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 160%;
    letter-spacing: 2px;

    transition: color .3s ease;
}

.product_page .products-list .item:hover .name {
    color: #DAB866;
}

.product_page .products-list .item:hover .name .numbering {
    color: #352B20;
}

/* 商品型號 */

.product_page .products-list .item .name .numbering {
    display: block;

    margin-top: 4px;

    color: #352B20;

    font-family: "Noto Sans TC", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
    letter-spacing: .1px;
}

/* 詳細資料按鈕 */

.product_page .products-list .item .more {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;

    padding: 9px 16px;

    background: transparent;
    border: 1px solid rgba(53, 43, 32, .22);

    color: #352B20;

    font-family: "Noto Sans TC", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 1px;

    text-align: center;

    transform: none;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease;
}


/* 詳細資料 Hover */

.product_page .products-list .item a:hover .more {
    background: #DAB866;
    color: #FBF6F3;
    border-color: #DAB866;
    letter-spacing: 1px;
}


/* ========================================
   功能頁【產品類】- 商品列表 RWD
======================================== */

@media screen and (max-width: 768px) {

    /* === 左側分類選單 === */

    .product_page .product_menu_list {
        width: 100%;
        min-height: unset;

        margin: 0 0 24px;

        background: transparent;
        border: 0;
    }


    /* 分類標題 */

    .product_page .product_menu_list > h5 {
        padding: 14px 18px;

        font-size: 18px;
        letter-spacing: 1.5px;

        border: 1px solid rgba(53, 43, 32, .12);
    }


    /* 第一層分類 */

    .product_page .product-layer-two {
        width: 100%;

        margin: 0;
        padding: 0;
    }


    /* 分類連結 */

    .product_page .product-layer-two > li > a {
        padding: 13px 18px;

        font-size: 14px;
    }


    /* 手機取消 Hover 位移 */

    .product_page .product-layer-two > li:hover > a {
        padding-left: 18px;
    }


    /* 手機隱藏左側金線 */

    .product_page .product-layer-two > li > a::before {
        display: none;
    }


    /* 第二層分類 */

    .product_page .product-layer-two ul {
        position: static;

        width: 100%;

        margin: 0;
    }
}

/* ========================================
   功能頁【產品類】- 相關推薦
======================================== */

/* 相關推薦區塊 */

.product_info_page .prod_related {
    padding: 40px 15px;

    background: #FBF6F3;
}


/* 相關推薦標題 */

.product_info_page .prod_related > h6 {
    margin-bottom: 24px;

    color: #352B20;

    font-family: "Noto Serif TC", serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 160%;
    letter-spacing: 2px;

    text-align: center;
}


/* 標題裝飾 */

.product_info_page .prod_related > h6 span {
    color: #352B20;
}

.product_info_page .prod_related > h6 span::before {
    color: #DAB866;
}


/* === 推薦商品 === */

/* 商品名稱 */

.product_info_page .prod_related .related_list p {
    color: #352B20;

    font-family: "Noto Sans TC", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
    letter-spacing: .1px;

    text-align: center;

    transition: color .3s ease;
}


/* 商品 Hover */

.product_info_page .prod_related .related_list li:hover p {
    color: #DAB866;
}


/* === 上一頁按鈕 === */

.product_info_page .prod_related_b_box .lastPage {
    background: #352B20;
    border: 1px solid #352B20;

    color: #FBF6F3;

    font-family: "Noto Sans TC", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 175%;
    letter-spacing: .1px;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.product_info_page .prod_related_b_box .lastPage:hover {
    background: #DAB866;
    border-color: #DAB866;
    color: #ffffff;
}

/* ========================================
   Footer
======================================== */

.footer_info li p.fax:before {
    content: '營業時間：';
}

.footer_info li p.line {
    display: none;
}

.footer {
    padding: 70px 30px 0;

    background: #FBF6F3;

    color: #352B20;
}

.footer .center {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
}


/* === Footer 主要排版 === */

.footer_info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;

    gap: 40px;

    padding: 0;
}

.footer_info ul {
    display: contents;
}


/* === Footer 區塊排序 === */

/* 聯絡資訊 */
.footer_info li:nth-child(1) {
    grid-column: 1;
    grid-row: 1;

    justify-self: center;
}

/* Logo */
.footer_logo {
    grid-column: 2;
    grid-row: 1;

    justify-self: center;
}

/* 導覽 */
.footer_info li:nth-child(2) {
    grid-column: 3;
    grid-row: 1;

    justify-self: center;
}


/* === Footer Logo === */

.footer_logo {
    width: 190px;
    max-width: 190px;

    margin: 0;

    text-align: center;
}

.footer_logo img {
    display: block;

    width: 100%;
    height: auto;
}


/* === Footer 資訊 === */

.footer_info li {
    padding: 0;
}

.footer_info li p,
.footer_info li p a {
    margin: 0 0 8px;

    color: #352B20;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 1px;
}

.footer_info li p a {
    transition: color .3s ease;
}

.footer_info li p a:hover {
    color: #B88F38;
}


/* ========================================
   Footer Menu
======================================== */

.footer_menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));

    gap: 0 24px;

    width: 100%;
    max-width: 300px;
}

.footer_menu a {
    position: relative;

    display: block;

    margin: 0;
    padding: 11px 0;

    color: #352B20;
    background: transparent;

    border: 0;
    border-bottom: 1px solid rgba(53, 43, 32, .16);

    font-size: 13px;
    letter-spacing: 1.2px;

    transition:
        color .3s ease,
        padding-left .3s ease,
        border-color .3s ease;
}

.footer_menu a:hover {
    padding-left: 7px;

    color: #B88F38;

    border-bottom-color: #DAB866;
}


/* === Footer 社群按鈕 === */

.box_link {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 18px;
}

.box_link a {
    display: none;
}


/* === Copyright === */

.copy {
    margin-top: 55px;
    padding: 18px 0;

    color: rgba(53, 43, 32, .55);
    background: transparent;

    border-top: 1px solid rgba(53, 43, 32, .12);

    font-size: 11px;
    letter-spacing: .8px;

    text-align: center;
}


/* ========================================
   Footer RWD
======================================== */

/* === Footer RWD｜1024 === */

@media screen and (max-width: 1024px) {

    .footer {
        padding: 60px 24px 0;
    }

    .footer_info {
        gap: 28px;
    }

    .footer_logo {
        width: 160px;
        max-width: 160px;
    }

    .footer_info li p,
    .footer_info li p a {
        font-size: 13px;
        letter-spacing: .6px;
    }

    .footer_menu {
        grid-template-columns: repeat(2, minmax(90px, 1fr));

        gap: 0 16px;

        max-width: 250px;
    }

    .footer_menu a {
        font-size: 12px;
        letter-spacing: .8px;
    }
}


/* === Footer RWD｜768 === */

@media screen and (max-width: 768px) {

    .footer {
        padding: 50px 20px 0;
    }

    .footer_info {
        grid-template-columns: 1fr;

        gap: 28px;

        text-align: center;
    }

    /* Logo */
    .footer_logo {
        grid-column: 1;
        grid-row: 1;

        justify-self: center;

        width: 145px;
        max-width: 145px;
    }

    /* 聯絡資訊 */
    .footer_info li:nth-child(1) {
        grid-column: 1;
        grid-row: 2;

        justify-self: center;
    }

    /* 導覽 */
    .footer_info li:nth-child(2) {
        grid-column: 1;
        grid-row: 3;

        justify-self: center;

        width: 100%;
    }

    .footer_menu {
        grid-template-columns: repeat(2, 1fr);

        width: 100%;
        max-width: 360px;

        margin: 0 auto;
    }

    .footer_menu a:hover {
        padding-left: 0;
    }

    .copy {
        margin-top: 40px;
    }
}


/* === Footer RWD｜450 === */

@media screen and (max-width: 450px) {

    .footer {
        padding: 42px 18px 0;
    }

    .footer_info {
        gap: 24px;
    }

    .footer_logo {
        width: 130px;
        max-width: 130px;
    }

    .footer_info li p,
    .footer_info li p a {
        font-size: 13px;
        line-height: 1.7;
    }

    .footer_menu {
        gap: 0 14px;
    }

    .footer_menu a {
        padding: 10px 0;

        font-size: 12px;
    }

    .copy {
        margin-top: 32px;
        padding: 15px 0;

        font-size: 10px;
    }
}

/* ========================================
   Top
======================================== */

#to_top {
    color: #DAB866 !important;
}

#to_top i:before, #to_top i:after {
    background-color: #DAB866 !important;
}

@media screen and (max-width: 768px) {
    #bottom_menu {
        display: none;
    }

    .footer.with_shopping_mode {
        padding-bottom: 0;
    }

    #to_top {
        bottom: 20px;
    }
}