@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 {}
*/

/* header商品下拉超過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個--結束 */


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*預設解除背景輪播*/
#content_main { margin:0;}
.bannerindex { position:relative; height:auto;}
.swiper-banner { position:static; margin:0; height:auto;}
.swiper-slide img {
    height: auto;
    animation: none !important;
    transform: none;
}

@media screen and (max-width: 768px) {
    .bannerindex {
        position: relative;
        height: auto;
    }

    .swiper-banner {
        position: relative;
        margin: 0;
        height: 100%;
    }
    .navigation {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

}
.pageIndex .header_area {
    position: sticky;
}
}





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

.BannerHome02 {
    height: auto;
}

.BannerHome02 .swiperBan02 {
    position: static;
    margin: 0;
}

.BannerHome02 .swiperBan02 .swiper-slide img {
    height: auto;
}

/* 2025.12.26 中間放大 */
.BannerHome02 .swiperBan02 .swiper-slide img {
    transition: transform 5s ease-out;
    will-change: transform;
    transform: scale(1.06) !important;
}

.BannerHome02 .swiperBan02 .swiper-slide-active img {
    transform: scale(1) !important;
}

@media (max-width:1400px) { 
    .BannerHome02 {
        height: auto;
    }
}

@media (max-width:1024px) { 
    .BannerHome02 {
        height: auto;
    }
}

@media (max-width:768px) { 
    .BannerHome02 {
        height: auto;
    }
}


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


/* 網頁捲軸設定 */
::-webkit-scrollbar {
    width: 7px;
    background: #fff;
}

::-webkit-scrollbar-button {
    background: var(--color3);
    height: 0;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color2);
}

:-webkit-scrollbar-track-piece {
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(225, 225, 225, 0.6);
    background-color: #fff;
}


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


/* = = = 全域變數 = = = = = = = = = = = = = = = = = = = = = = = = = = = */
:root {
    font-family: var(--Mainfont);
    color: var(--color1);
    line-height: 1.8;
    letter-spacing: 0.1em;
    --Mainfont: "Sulphur Point","Noto Sans TC", sans-serif;
    --color1:#fff;
    --color2:#C09D68;
    --color3:#175A62;
    --trans: .35s cubic-bezier(0.4, 0, 0.2, 1);

    --f100:100px; --f47:47px; --f40:40px; --f36:36px; --f32:32px;
    --f30:30px; --f28:28px; --f26:26px; --f24:24px; --f22:22px;
    --f20:20px; --f18:18px; --f16:16px;
}

@media screen and (max-width: 768px) {
    :root { --f100:40px; --f30:26px; --f24:24px; --f22:20px; }
}


/* = = = 基礎重置與修正 = = = = = = = = = = = = = = = = = = = = = = = = */
div#page { background: #fff; }
#content_main { margin:0; }
.sb_marquee { display: none; }

/* 網頁捲軸 */
::-webkit-scrollbar { width: 7px; background: #fff; }
::-webkit-scrollbar-thumb { background-color: var(--color2); border-radius: 4px; }
::-webkit-scrollbar-track { background-color: #eee; }

/* = = = 首頁大圖 Banner (修正高度跳動與效能) = = = = = = = = = = = = = = */

/*--------頁碼設定----------*/
.page strong, .page a:hover {    background: var(--SubColor);}
.page li.activeN {    color: var(--SubColor);}

.main_part {    max-width: 1400px;    padding: var(--pd80) 20px;}


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


/* 麵包屑導覽--隱藏 */
.path {
    display: none;
}

/* 內頁設定 */
/* 隱藏--下拉編輯頁的促銷方案目錄 */
.other_select_page .promotion_title,
.other_select_page .other_promotion,
.other_select_page ul.page {
    display: none;
}


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


/*------------------------------------------------*/
/* OP 開場動畫｜慢版大 LOGO */
/*------------------------------------------------*/

.pageIndex::before,
.pageIndex::after {
    content: "";
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 50%;
    height: 100dvh;
    z-index: 10000;

    background: #fff;

    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    will-change: transform;

    animation-duration: 2.6s;
    animation-delay: 3.2s;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    animation-fill-mode: forwards;
}

.pageIndex::before {
    left: 0;
    animation-name: opOpenLeftSmooth;
}

.pageIndex::after {
    right: 0;
    animation-name: opOpenRightSmooth;
}

@keyframes opOpenLeftSmooth {
    0% {
        transform: translate3d(0,0,0);
    }

    100% {
        transform: translate3d(-100%,0,0);
    }
}

@keyframes opOpenRightSmooth {
    0% {
        transform: translate3d(0,0,0);
    }

    100% {
        transform: translate3d(100%,0,0);
    }
}


/*------------------------------------------------*/
/* 中間 LOGO */
/*------------------------------------------------*/

.pageIndex #page::before {
    content: "";
    pointer-events: none;

    position: fixed;
    top: 50%;
    left: 50%;

    width: min(70vw, 760px);
    height: min(70vw, 760px);

    background-image: url(https://pic03.eapple.com.tw/riyuedesign/banner-05.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    z-index: 10001;

    opacity: 0;

    transform: translate3d(-50%, -50%, 0) scale(0.94);

    will-change: opacity, transform;
    backface-visibility: hidden;

    animation: opLogoVisible 4.3s ease-out forwards;
}

@keyframes opLogoVisible {

    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(0.9);
    }

    15% {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) scale(1);
    }

    75% {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(1.03);
    }
}




/*------------------------------------------------*/
/* 首頁大圖疊圖動畫 */
/*------------------------------------------------*/

/* 共用疊圖 */
.pageIndex .bannerindex .swiper-slide::before,
.pageIndex .bannerindex .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* 大圖1 */
.pageIndex .bannerindex .swiper-slide:nth-child(1)::before {
    background-image: url(https://pic03.eapple.com.tw/riyuedesign/banner-03.png);
    opacity: 1;
    animation-delay: .5s;
}

.pageIndex .bannerindex .swiper-slide:nth-child(1).swiper-slide-active::before {  
    animation-name: ban_croll;
    animation-duration: 2s;
    animation-fill-mode: both;
}

/* 如果原本沒有 ban_croll，補一個柔和淡入，不會報錯 */
@keyframes ban_croll {
    0% {
        opacity: 0;
        transform: scale(1.03);
    }

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

/* 大圖2 */
.pageIndex .bannerindex .swiper-slide:nth-child(2)::before {
    background-image: url(https://pic03.eapple.com.tw/riyuedesign/banner-04.png);
    opacity: 0;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 第二張進場動畫：只淡入，最不容易 lag */
.pageIndex .bannerindex .swiper-slide:nth-child(2).swiper-slide-active::before {  
    will-change: opacity;
    animation: bannerSimpleFadeIn 1.2s 0.35s ease-out forwards;
}

@keyframes bannerSimpleFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}




/*------------------------------------------------*/
/* 首頁大圖 Banner 修正：避免高度塌陷、大圖不見 */
/*------------------------------------------------*/

.pageIndex .bannerindex {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    max-height: 950px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #000;
}

.pageIndex .swiper-banner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

.pageIndex .swiper-banner .swiper-wrapper,
.pageIndex .swiper-banner .swiper-slide {
    width: 100%;
    height: 100%;
}

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

.pageIndex .swiper-banner .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 疊圖不要蓋掉整個大圖造成誤判 */
.pageIndex .bannerindex .swiper-slide::before,
.pageIndex .bannerindex .swiper-slide::after {
    pointer-events: none;
}

/* 平板/手機高度：不用 vh，避免手機網址列收合造成重複重算 */
@media screen and (max-width: 1024px) {
    .pageIndex .bannerindex {
        height: clamp(520px, 62vw, 720px);
        min-height: 0;
        max-height: none;
    }
}

@media screen and (max-width: 768px) {
    .pageIndex .bannerindex {
        height: clamp(460px, 122vw, 620px);
        min-height: 0;
        max-height: none;
    }

        /* 大圖1 */
    .pageIndex .bannerindex .swiper-slide:nth-child(1)::before {
        background-image: url(https://pic03.eapple.com.tw/riyuedesign/banner-07.png) !important;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* 大圖2 */
    .pageIndex .bannerindex .swiper-slide:nth-child(2)::before {
        background-image: url(https://pic03.eapple.com.tw/riyuedesign/banner-06.png) !important;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 480px) {
    .pageIndex .bannerindex {
        height: clamp(420px, 128vw, 560px);
        min-height: 0;
        max-height: none;
    }
}





/* 平板/手機不跑 OP 開場，保留桌機設計但避免手機崩潰 */
@media screen and (max-width: 1024px) {
    .pageIndex::before,
    .pageIndex::after,
    .pageIndex #page::before {
        display: none !important;
        content: none !important;
        animation: none !important;
    }

    .pageIndex .bannerindex .swiper-slide::before,
    .pageIndex .bannerindex .swiper-slide::after {
        filter: none !important;
        will-change: auto !important;
    }
}


/* = = = header = = = = = = = = = == = = = = = = = = = = = = = = == = = */
.header_area,
.header_area .navigation,
.header_area .nav-header,
.header_area .nav-brand,
.header_area .nav-brand img,
.stellarnav > ul > li > a {
    transition: background-color .35s ease, opacity .35s ease, color .35s ease, transform .35s ease, padding .35s ease;
}
.header_area {
    position: fixed;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.1) 80%,rgba(0,0,0,0) 100%);
    border-bottom: solid 1px #fff;
    padding: 10px 10px 0 10px;
    animation: fade-in .8s ease both;
}
@keyframes fade-in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.main_header_area .container {
    max-width: 90%;
}
.nav-header {
    max-width: 80px;
}

/* 產品搜尋欄 */
.box_search {
    display: none;
}
.box_search input[type=text] {
    background: url(https://pic03.eapple.com.tw/coffee2/products_search.svg) no-repeat 9px center #fff;
}
input::placeholder {
    color: rgba(51, 51, 51, 0.5);
}
.box_search input[type=text]:focus {
    color: #333;
}
.tp_links {
    display: none;
} /* header聯絡按鈕--隱藏 */



/* .stellarnav */
.stellarnav > ul {
    margin-top: 15px;
}
.stellarnav > ul > li > a {
    font-family: var(--Mainfont);
    font-size: 14px;
    text-transform: none;
    color: #fff;
    height: 65px;
    line-height: 50px;
    padding: 0 1vw;
    overflow: unset;
}
.stellarnav > ul > li+li > a::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 5px;
    width: 1px;
    height: 35px;
    border-left: solid 1px rgb(255 255 255 / 50%);
}
.stellarnav li.has-sub > a:after {
    display: none;
}
.stellarnav > ul > li > a b {
    height: auto;
    line-height: normal;
}
.stellarnav ul ul {
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    background: rgb(16 36 71 / 50%);
    background: rgb(8 10 39 / 60%);
    animation: scroll_01 .4s .2s;
    animation: scroll_01 .5s cubic-bezier(0.22, 0.37, 0.51, 0.87);
}
@keyframes scroll_01 {
    0% {opacity: 0; height: 0;}
    100% {opacity: 1; height: 100%;}
}
@keyframes scroll_01 {
    0% {opacity: 0; }
    100% {opacity: 1; }
}
.stellarnav li li {
    border: 0;
}
.stellarnav li li > a, 
.stellarnav li li.has-sub > a {
    text-align: center;
    padding: 8px 17px;
}
.stellarnav li li a {
    font-size: 13px;
    color: #fff;
}
.stellarnav ul ul ul {
    left: 150%;
}

/* 下滑設定 */
.header_area.sticky {
    background: transparent;
    border-bottom: 0;
    animation: none;
}

@keyframes appearence {
    0% {
        transform: translateY(-100px);
        opacity: .3;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.header_area.sticky .main_header_area .container {
    max-width: 1500px;
}
.header_area.sticky .navigation {
    background: var(--color2);
    padding: 15px 5px 15px 25px;
    padding: 5px 5px 0px 25px;
}



/*------------------------------------------------*/
/* sticky 後 LOGO 修正 */
/*------------------------------------------------*/

/* sticky 後 LOGO 外層尺寸 */
.header_area.sticky .nav-header {
    width: 260px;
    max-width: 260px;
    flex: 0 0 260px;
}

/* sticky 後 LOGO */
.header_area.sticky .nav-brand {
    display: block;
    width: 260px;
    height: 50px;

    background-image: url(https://pic03.eapple.com.tw/riyuedesign/logo_sticky.svg);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: contain;

    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

/* 隱藏原本 LOGO 圖片與文字，避免重複顯示 */
.header_area.sticky .nav-brand img,
.header_area.sticky .nav-brand h1,
.header_area.sticky .nav-brand span,
.header_area.sticky .nav-brand b {
    display: none !important;
}

/* RWD 1024 以下：避免 LOGO 擠壓選單 */
@media screen and (max-width: 1024px) {
    .header_area.sticky .nav-header {
        width: 230px;
        max-width: 230px;
        flex: 0 0 230px;
    }

    .header_area.sticky .nav-brand {
        width: 230px;
        height: 46px;
        background-position: center left;
        background-size: contain;
    }
}

/* RWD 768 以下：手機版尺寸 */
@media screen and (max-width: 768px) {
    .header_area.sticky .nav-header {
        width: 200px;
        max-width: 200px;
        flex: 0 0 200px;
    }

    .header_area.sticky .nav-brand {
        width: 200px;
        height: 42px;
        background-position: center left;
        background-size: contain;
    }
}

/* RWD 480 以下：小手機避免超出 */
@media screen and (max-width: 480px) {
    .header_area.sticky .nav-header {
        width: 170px;
        max-width: 170px;
        flex: 0 0 170px;
    }

    .header_area.sticky .nav-brand {
        width: 170px;
        height: 38px;
    }
}




/* hover */
.stellarnav > ul > li > a,
.stellarnav li li > a,
.stellarnav a.dd-toggle .icon-plus:before,
.stellarnav a.dd-toggle .icon-plus:after {
    transition: background-color .25s ease, color .25s ease, opacity .25s ease, transform .25s ease;
}
.stellarnav > ul > li > a:hover,
.stellarnav > ul > li:hover > a {
    opacity: .7;
} /* 主選單一般變色 */
.stellarnav > ul > li > a:hover b {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
}
.stellarnav > ul > li.has-sub > a:hover:after,
.stellarnav > ul > li.has-sub:hover > a:after{
    border-top: 6px solid;
} /* 主選單三角形 */
.stellarnav li li:hover > a, 
.stellarnav li li > a:hover, 
.stellarnav.desktop li.has-sub li a:hover, 
.stellarnav.desktop li.has-sub li:hover > a   {

    background: #071735;
} /* 次分類一般變色 */
.stellarnav li li.has-sub > a:hover:after,
.stellarnav li li.has-sub:hover > a:after{
    border-left: 6px solid ;
} /* 次分類三角形 */

/*------------------------------------------------*/
/* RWD 1024 以下：取消下滑 sticky 特效，恢復預設狀態 */
/*------------------------------------------------*/
@media screen and (max-width: 1024px) {

    /* header 不做下滑動畫、不做透明變化 */
    .header_area,
    .header_area.sticky {
        position: sticky;
        top: 0;
        background: var(--color2);
        border-bottom: solid 1px rgba(255,255,255,.35);
        padding: 10px;
        animation: unset !important;
        transform: unset!important;
        opacity: 1 !important;
    }

    /* 取消 sticky 狀態所有過場，避免下滑時閃動 */
    .header_area *,
    .header_area.sticky *,
    .header_area .navigation,
    .header_area.sticky .navigation,
    .header_area .nav-brand,
    .header_area.sticky .nav-brand {
        transition: unset !important;
        animation: unset !important;
    }


    .header_area .navigation,
    .header_area.sticky .navigation {
        background: transparent;
        backdrop-filter: unset !important;
        -webkit-backdrop-filter: unset !important;
        padding: 0;
    }

    /* container 不要 sticky 後變寬 */
    .header_area .main_header_area .container,
    .header_area.sticky .main_header_area .container {
        max-width: 90%;
    }

    /* nav-header 回復原本，不要 sticky 後放大 */
    .header_area .nav-header,
    .header_area.sticky .nav-header {
        width: auto;
        max-width: 80px;
        flex: 0 0 auto;
    }

    /* LOGO 回復原本 img，不使用 sticky 背景圖 */
    .header_area .nav-brand,
    .header_area.sticky .nav-brand {
        display: block;
        width: auto;
        height: auto;
        background-image: none !important;
        background: none !important;
        overflow: visible;
        font-size: inherit;
        line-height: inherit;
    }

    /* 1024 以下不要隱藏原本 LOGO 圖片與文字 */
    .header_area .nav-brand img,
    .header_area.sticky .nav-brand img {
        display: block !important;
    }


    .stellarnav ul ul,
    .stellarnav.mobile ul ul,
    .stellarnav.mobile ul ul ul {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        animation: none !important;
    }

    .BannerHome02 .swiperBan02 .swiper-slide img {
        transition: none !important;
        transform: none !important;
        will-change: auto !important;
    }
}

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

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

    .header_area.sticky {
        background: var(--color2);
    }
    .header_area.sticky .navigation {
        backdrop-filter: unset;
    }
    /* 漢堡鈕設定--開始 */
    .stellarnav.mobile {
        top: 8px;
    }
    .stellarnav .menu-toggle span.bars span {
        width: 38px;
        height: 1px;
        background: #fff;
        margin: 0 auto 10px;
    }
  
    .stellarnav .menu-toggle span.bars span:nth-child(2) {
        /* margin: 0 auto 4px 0; */
    }
    .stellarnav .menu-toggle span.bars span:nth-child(3) {
        display: none;
    }
    .stellarnav .menu-toggle:after {
        display: none;
        color: #fff;
    }
    .stellarnav.mobile.right .close-menu, 
    .stellarnav.mobile.left .close-menu {
        color: transparent;
        background: transparent;
        padding-top: 20px;
        padding-left: 15px;
    }
    .stellarnav .icon-close {
        display: block;
    }
    .stellarnav .icon-close:before, 
    .stellarnav .icon-close::after {
        width: 25px;
        border-bottom: solid 3px #fff;
    }/* 漢堡鈕設定--結束 */


    /* --------選單設定--開始 */
    .stellarnav.mobile.right > ul, 
    .stellarnav.mobile.left > ul {
        border: 0;
        background: #c09d68;
        box-shadow: 5px 5px 15px rgb(0 0 0 / 10%);
        margin-top: 0;
    }
    /* 叉叉按鈕換邊放--開始 */
    .stellarnav.mobile.right .close-menu, 
    .stellarnav.mobile.left .close-menu {
        position: relative;
        color: transparent;
        background: transparent;
        padding-top: 20px;
        padding-left: 15px;
    }
    .stellarnav .icon-close {
        position: static;
    }
    /* 叉叉按鈕換邊放--結束 */
    .stellarnav a.dd-toggle .icon-plus:before, 
    .stellarnav a.dd-toggle .icon-plus:after {
        border-bottom: solid 1px ;
    }
    .stellarnav.mobile li a {
        border: 0;
    }
.stellarnav.mobile > ul > li {
    border-bottom: 1px rgb(255 255 255 / 50%) solid;
}    
    .stellarnav.mobile > ul > li > a {
        font-size: 16px;
    }
.stellarnav.mobile li li > a,
.stellarnav.mobile li li.has-sub > a {
    text-align: left;
}    
    .stellarnav.mobile li li.has-sub a {
        padding: 10px 43px 10px 40px;
    }
    .stellarnav.mobile li li > a {
        font-size: 15px;
        padding: 10px 10px 10px 40px;
    }
    .stellarnav.mobile li.open {
        background: transparent;
        padding: 0;
    }
.stellarnav.mobile ul ul {
    left: auto;
    transform: translateX(0);
    background: transparent;
}
    .stellarnav.mobile li.open li.open {
        background: transparent;
        padding: 0;
    }
    .stellarnav.mobile li.open li.open > a {
        background: rgb(255 255 255 / 10%);
    }
    .stellarnav.mobile li.open li.open > a.dd-toggle {
        background: transparent;
    }
    .stellarnav.mobile li.open li.open > a.dd-toggle .icon-plus::before,
    .stellarnav.mobile li.open li.open > a.dd-toggle .icon-plus:after {
        border-bottom: solid 2px #fff;
    } /* 次次分類展開後的+號顏色 */     
    .stellarnav.mobile ul ul ul {
        left: auto;
        background: transparent;
    }
.stellarnav.mobile li li li > a {
    opacity: .6;
}    
    /* --------選單設定--結束 */

    /* hover--開始 */
    .stellarnav.mobile a.dd-toggle:hover .icon-plus:before, 
    .stellarnav.mobile a.dd-toggle:hover .icon-plus:after {
        border-bottom: solid 1px #fff;
    }
    .stellarnav li li:hover > a, 
    .stellarnav li li > a:hover, 
    .stellarnav.desktop li.has-sub li a:hover, 
    .stellarnav.desktop li.has-sub li:hover > a {
        background: transparent;
    } /* 次分類一般變色 */ /* hover--結束 */
}

@media screen and (max-width: 570px) {
    .stellarnav .menu-toggle {
        padding: 10px;
    }
}





/* =============== ▼ FOOTER ▼ =============== */

/* ＝＝＝ 【【  預設區塊不動 ↓↓↓  】】 ＝＝＝ */

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */
@media screen and (max-width: 768px) {

    /* 開啟手機板下方按鈕所需設定 */
    #bottom_menu {

        display: none;
    }

    .footer.with_shopping_mode {
        padding: 30px 0 0px;
    }

    #to_top {
        bottom: 60px;
    }
}

/* ＝＝＝ 【【  版型設定(三欄) ↓↓↓  】】 ＝＝＝ */

/*YKQK版權塊 -------------------- */

.copy {
    border-top: none;
    margin-top: 30px;
    padding: 15px 0;
    gap: 5px;
}

.copy,
.copy a {
    font-size: 10px;
    color: var(--bg-color);
}

.copy a:hover {
    color: var(--bg-color);
    text-decoration: underline var(--bg-color) 1px solid;
    text-underline-offset: 4px;
}

@media screen and (max-width: 480px) {
    .copy p {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

    }
}

/*footer -------------------- */

.footer {
    background: #C09D68;
    padding-top: 50px;
}

.footer .center {
    max-width: 1500px;
}

.footer_info {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.footer_logo {
    width: 100px;
    text-align: center;
    z-index: 1;
    filter: brightness(5);
}

.footer_info ul {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
}

/* 資訊 ----------*/
.footer_info li:nth-child(1) {
    display: flex;
    flex-direction: column;
}

.footer_info li p,
.footer_info li p a {
    color: #fff;
    letter-spacing: .15rem;
    line-height: 200%;
}

.footer_info li p:hover {
    opacity: .6;
    transition: ease-out 0.5s;
}

/* 按鈕 ---------- */
.footer_info li:nth-child(2) {}

.footer_menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 32px;
}

.footer_menu a {
    color: #fff;
    position: relative;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    line-height: 200%;
    text-transform: uppercase;
    font-family: "Noto Sans TC", sans-serif;
}

.footer_menu a:hover {
    color: #175A62;
    background: none;
    opacity: .6;
    transition:ease-out 0.5s;
}

/* 隱藏回首頁 */
.footer_menu a:first-child {
    display: none;
}

/* icon ---------- */
.box_link {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 100%;
    bottom: 0;
    position: relative;
    right: 0;
    z-index: 1;
}

.box_link a {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: none;
    color: #fff;
    font-size: 16px;
    margin: 5px;
    padding: 0px;
    background: transparent;
}

.box_link a:hover i {
    opacity: .5;
    /* transition: var(--tr); */
}

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1024px) {
    .footer_info {
        gap: 0px;
    }

    .footer_logo {
        display: none;
    }

    .double_key {
        order: 4;
    }

    .footer_info ul {
        position: relative;
        align-items: flex-start;
        display: flex;
        justify-content: space-around;
        order: 2;
    }

    .box_link {
        justify-content: center;
        order: 3;
        display: none;
    }
}

@media (max-width:768px) {
    .footer_info ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 20px;
    }

    .footer_info li:nth-child(1) {
        margin: 0 auto;
    }

    .footer_menu {
        display: none;
    }

    .copy {
        border-top: none;
        margin-top: 0px;
    }

}

/* ＝＝＝ 【【  客製更動處 ↓↓↓  】】 ＝＝＝ */
/* 名稱更動 */

.footer_info li p.fax:before {
    content: '營業時間（預約制）：';
}


/*順序*/
.footer_info li {
    display: flex;
    flex-direction: column;
}

.footer_info li p.tel{ order:1 ;}
.footer_info li p.taxid{ order:2 ;}
.footer_info li p.line{ order:3 ;}
.footer_info li p.mail{ order:4 ;}
.footer_info li p.add{ order:5 ;}
.footer_info li p.fax{ order:6 ;}




/* 隱藏-mail地址 */
/*
.footer_info li p.add,
.footer_info li p.mail{
    display: none;
}

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */
/*
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {}

/* =============== ▲ FOOTER ▲ =============== */