@charset "utf-8";
/* = = = 網站全域設定 = = = = = = = = = = = = = = = = = = = = = = = = = = =*/
:root {
  --MainColor: #7D7C7E; /*網站主要色系*/
  --SubColor_1: #AAA6A7; /*網站輔助色系 1*/
  --SubColor_2: #AAA6A7; /*網站輔助色系 2*/
  --FontColor_1: #C8C8C8; /*內文顏色 1*/
  --FontColor_2: #7D7C7E; /*內文顏色 2*/
  --FontColor_3: #888888; /*內文顏色 3*/
  --BackgroundColor: #262626; /*背景顏色*/
  --BorderColor: #666666; /*框線顏色*/

  --SFontE: "Lexend", "微軟正黑體", sans-serif; /*特殊字體 英文*/
  --SFontC: "微軟正黑體", sans-serif; /*特殊字體 中文*/
  --LineHeight: 180%;
  --LetterSpacing_B: 2px;
  --LetterSpacing_S: 1px;
  --Transition: .5s ease-in-out;
  --f48: 48px;
  --f40: 40px;
  --f36: 36px;
  --f32: 32px;
  --f28: 28px;
  --f24: 24px;
  --f22: 22px;
  --f20: 20px;
  --f18: 18px;
  --f17: 17px;
  --f16: 16px;
  --f15: 15px;
  --f14: 14px;
}
@media (max-width:1024px) {
  :root{
    --f48: 40px;
    --f40: 36px;
    --f36: 32px;
    --f32: 28px;
    --f28: 24px;
    --f24: 22px;
    --f22: 20px;
  }
}
@media (max-width:768px) {
  :root{
    --f48: 32px;
    --f40: 28px;
    --f36: 26px;
    --f32: 24px;
    --f28: 20px;
    --f24: 20px;
    --f20: 18px;
    --f18: 17px;
    --f17: 16px;
  }
}
@media (max-width:600px) {
  :root{
    --f48: 28px;
    --f40: 24px;
    --f36: 22px;
    --f32: 20px;
    --f28: 18px;
    --f24: 18px;
    --f22: 18px;
    --f20: 17px;
    --f18: 16px;
    --f17: 15px;
  }
}
@media (max-width:375px) {
  :root{
    --f48: 24px;
    --f40: 20px;
    --f36: 18px;
    --f32: 18px;
    --f28: 17px;
    --f24: 17px;
    --f22: 17px;
    --f20: 16px;
    --f18: 15px;
  }
}


/*頁面內容*/
div#page { }
#content_main, #content {}
.module_i_news { }
.path { 
    width: 100%;
    margin: auto;
    font-size: 13px;
    color: #444;
    text-align: right;
    border-bottom: 1px solid #ccc;
    margin: 30px 0;
}
.other_page #content, .other_select_page #content { min-height: auto;}
.sb_marquee {display: none;}


/*滾輪*/
::-webkit-scrollbar {
    background: #fff;
    width: 7px;
}

::-webkit-scrollbar-button {
    background: #fff;
    border-radius: 0;
}

::-webkit-scrollbar-track-piece {
    background: #eee;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #444;
}

::-webkit-scrollbar-track {
    box-shadow: transparent;
}

/*SubMenu*/
.me_tp_features {display: none;}/*隱藏整列*/
.shop_search_btn { background: #D1BB9E;}
.tp_links a { display: none;}/*隱藏選單按鈕連結*/
.tp_links a:hover { color: #D1BB9E;}

/*上方選單右邊設定 臉書/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}
*/

/*.box_search { display:none;}隱藏購物車搜尋欄*/
/*.me_tp_features a.tp_btn_cart { display: none;}隱藏購物車*/
/*.me_tp_features a.tp_btn_notice { display: none;}隱藏匯款通知*/

/*按鈕*/
.animated-arrow { background: #D1BB9E; border-radius: 10px; transition: .3s ease-in-out;}
.animated-arrow:hover { background: #A79277; transition: .3s ease-in-out;}
#bottom_menu li {background: #212121;}
.fa-house::before,#bottom_menu li a em {color: #fff;}

/*頁碼*/
.page { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; margin: 40px auto;}
.page li { display: flex; margin: 3px; width: 30px; height: 30px; line-height:30px; align-items: center; justify-content: center;}
.page li.activeN { background: #666; border-radius: 100%; color: #fff; font-weight: 600;}
.page li a { display: block; width: inherit; height: inherit; line-height: inherit; padding: 0; color: #ccc; transition:all 0.3s;}
.page strong, .page a:hover { background: #D1BB9E; border: 1px solid #D1BB9E;}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
.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;}
}

/*預設解除背景輪播*/

#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;}
}
/* = = = Index banner = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

@media screen and (max-width: 768px) {
/* 行動裝置相容性調整 大圖調整 */
.swiper-slide img { animation-fill-mode: none; -webkit-animation-fill-mode: none;}
}


/*大圖設定*/
/*首頁大圖*/
.bannerindex { height:auto;}
.bannerindex .swiper-banner { position:static; margin:0; height:auto;} 
.bannerindex .swiper-slide img { height:auto;}



/*------------------------------------------------*/
/* 大圖區 */
/*------------------------------------------------*/

.pageIndex .swiper-wrapper .swiper-slide:nth-child(1)::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 1;
    background-image: url(https://pic03.eapple.com.tw/hongyehyuantu/bg-08.svg);
    width: 100%;
    max-width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10000;
}

.pageIndex .swiper-wrapper .swiper-slide:nth-child(2)::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 1;
    background-image: url(https://pic03.eapple.com.tw/hongyehyuantu/bg-06.svg);
    width: 100%;
    max-width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10000;
}


.pageIndex .swiper-wrapper .swiper-slide:nth-child(1)::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 1;
    background-image: url(https://pic03.eapple.com.tw/hongyehyuantu/bg-07.svg);
    width: 100%;
    max-width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10000;
}

.pageIndex .swiper-wrapper .swiper-slide:nth-child(2)::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 1;
    background-image: url(https://pic03.eapple.com.tw/hongyehyuantu/bg-05.svg);
    width: 100%;
    max-width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10000;
}




.pageIndex .swiper-wrapper .swiper-slide.swiper-slide-active::after {
    content: "";
    animation: banner-bg 2s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
}

.pageIndex .swiper-wrapper .swiper-slide.swiper-slide-active::before {
    content: "";
    animation: banner-bg 2s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    animation-delay: 0.5s;
}



@keyframes banner-img {
    0% {
        filter: brightness(0.1);
        opacity: 0.5;
        transform: scale(1.2);
    }

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


@keyframes banner-bg {
    0% {
        height: 95%;
        opacity: 0;
    }

    100% {
        height: 100%;
        opacity: 1;
    }
}

@keyframes banner-bg-2 {
    0% {
        filter: brightness(0.1);
        opacity: 0;
    }

    100% {
        filter: brightness(1);
        opacity: 1;
    }
}



@keyframes bannerScrollAnimation {

    0%,
    100% {
        bottom: 81px;
        border-color: rgba(255, 255, 255, 0.5);
    }

    50% {
        bottom: 90px;
        border-color: #fff;
    }
}

@media screen and (max-width: 768px) {
    .swiper-banner .swiper-slide {
        display: flex;
    }

    .swiper-banner .swiper-slide:nth-child(1) {
        justify-content: center;
    }

    .swiper-banner .swiper-slide:nth-child(2) {
        justify-content: center;
    }

    .swiper-banner .swiper-slide img {
        max-width: 150%;
        width: 150%;
        height: auto;
    }



    .pageIndex .swiper-wrapper .swiper-slide:nth-child(1)::after {
        background-position: left;
}

.pageIndex .swiper-wrapper .swiper-slide:nth-child(2)::after {
        background-position: left;
   
}


.pageIndex .swiper-wrapper .swiper-slide:nth-child(1)::before {

        background-position: left;
}

.pageIndex .swiper-wrapper .swiper-slide:nth-child(2)::before {

        background-position: left;
}


}


/* = = = header = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*選單設定*/
.nav-menu {
    margin: 0;
}

.main_header_area .container {
    max-width: 90%;
}

.nav-menu>li:not(.tp_links) {
    padding-right: 15px;
}

.nav-menu>li:hover>a,
.nav-menu>li.active>a,
.nav-menu>li.focus>a {
    color: #212121;
}

.nav-dropdown>li:hover>a,
.nav-dropdown>li.focus>a {
    color: #212121;
}

.nav-dropdown>li {
    text-align: center;
}



.header_area {
    position: fixed;
    z-index: 9999;
    width: 100%;
    padding: 0;
    background: transparent;
    transition: all 0.5s;
}

.header_area.sticky {
    background: #fff;
    box-shadow: 1px 1px 5px #00000061;
    transition: all 0.5s;
}

.header_area .main_header_area {
    background: transparent;
    transition: all 0.3s;
}

.header_area.sticky .main_header_area {
    background: #fff;
    transition: all 0.3s;
}




.header_area .navigation {
    width: 100%;
    position: relative;
    padding: 0;
    display: flex;
    transition: all 0.3s;
    align-items: center;
}

.header_area.sticky .navigation {
    padding: 0;
    transition: all 0.3s;
}


.header_area .stellarnav {
    position: relative;
    width: 100%;
    z-index: 9900;
    line-height: normal;
    text-align: center;
    opacity: 0;
    transition: all 0.3s;
}

.header_area.sticky .stellarnav {
    opacity: 1;
    transition: all 0.3s;
}


.stellarnav ul {
    margin: 0;
    padding: 0;
    text-align: center;
}

.stellarnav ul {
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}



/*rwd*/
@media screen and (max-width: 1440px) {
    .main_header_area .container {
        max-width: 90%;
    }

}


@media screen and (max-width: 1024px) {
    .header_area .navigation {
        padding: 0;
        transition: all 0.3s;
    }

    .header_area.sticky .navigation {
        transition: all 0.3s;
    }

    .header_area .stellarnav ul {
        text-align: center;
        padding: 0;
        transition: all 0.3s;
    }

    .header_area.sticky .stellarnav ul {
        text-align: center;
        transition: all 0.3s;
    }
}

@media screen and (max-width: 768px) {
    .main_header_area .container {
        max-width: 90%;
    }

    .header_area.sticky .main_header_area {
        width: 100%;
        height: 60px;
    }

}

/*  */


/*LOGO設定*/
.nav-header {
    position: absolute;
    z-index: 99999999;
    max-width: 160px;
    left: 0;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    transform-origin: 0 0;
    transition: all .5s cubic-bezier(0.73, 0.08, 0.11, 0.99);
}

.sticky .nav-header {
    transition: all .5s cubic-bezier(0.73, 0.08, 0.11, 0.99);
}

.nav-header:hover {
    transform: scale(1.1);
    transition: all 0.5s;
}


.header_area .nav-header::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(118deg, transparent 0%, transparent 45%, #ffffff3b 50%, #ffffff6b 55%, #ffffff3a 60%, transparent 65%, transparent 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000000;
    opacity: 0;
    animation: bg-shin 2s infinite cubic-bezier(0.73, 0.08, 0.11, 0.99);
}


@keyframes bg-shin {
    0% {
        transform: translate(-100%, 0%);
    }

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

}

.header_area.sticky .nav-header:hover:after {
    opacity: 1;
}

.header_area .nav-header::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background:#212121;
    transform: scale(1,0);
    transform-origin: 0 0;
    opacity: 1;
    transition: all 0.5s;
}

.header_area.sticky .nav-header::before {
    opacity: 1;
    transform: scale(1,1);
    transition: all 0.5s;
}

.nav-brand img {
    width: 100%;
}

.header_area .nav-brand,
.header_area .nav-brand:focus {
    display: block;
    position: relative;
    opacity: 0;
    transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
    padding: 10px 20px;
}

.header_area.sticky .nav-brand,
.header_area .nav-brand:focus {
    opacity: 1;
    transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
}



/* 其他分頁 LOGO */
.header_area .nav-brand img {
    transition: all 0.5s cubic-bezier(1, -0.02, 1, -0);
}



/*  */







.me_tp_features {
    display: none;
}



.stellarnav>ul>li.has-sub>a {
    padding-right: 0;
}

.stellarnav>ul>li{
    padding: 10px 0;
}

.stellarnav>ul>li>a {
    padding: 0;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 40px;
    height: 40px;
    margin: 0 25px;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

/*  */


.header_area .stellarnav>ul>li>a {
    color: #292929;
    transition: all 0.3s;
}

.header_area.sticky .stellarnav>ul>li>a {
    color: #292929;
    transition: all 0.3s;
}

.header_area .stellarnav>ul>li>a:hover,
.header_area.sticky .stellarnav>ul>li>a:hover {
    color: #212121;
    transition: all 0.3s;
}

.stellarnav>ul>li>a b{
font-weight: bold;
}



/*  */


.stellarnav li.has-sub>a:after {
    display: none;
}

/*下拉*/

.stellarnav li li a {
    padding: 10px 10px;
    border-left: 0px #212121 solid;
    background: #fff;
    color: #686868;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s;
}

.stellarnav li li a:hover {
    border-left: 10px #212121 solid;
    transition: all 0.3s;
}

.stellarnav li li {
    display: block;
    border: 0;
    margin-bottom: -1px;
    background: transparent;
}

.stellarnav ul ul {
    width: 160px;
    background: transparent;
    top: 100%;
}

.stellarnav ul ul ul {
    top: 0;
    left: 180px;
}




@media screen and (max-width: 1440px) {
    .stellarnav>ul>li>a {
        margin: 0 15px;
    }


}

@media screen and (max-width: 1024px) {
    .stellarnav>ul>li:nth-child(4) {}

    .stellarnav>ul>li>a {
        font-size: 16px;
        margin: 0 7px;
    }

}

@media screen and (max-width: 900px) {
    .stellarnav>ul>li>a {
        font-size: 15px;
        margin: 0 7px;
    }
}

@media screen and (max-width: 800px) {
    .stellarnav>ul>li>a {
        font-size: 14px;
        margin: 0 5px;
    }
}

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

    .stellarnav.mobile {
        position: absolute;
        left: 0;
        top: 10px;
        width: auto;
        display: inline-block;
        opacity: 1;
    }

    .nav-header {
        position: absolute;
        z-index: 0;
        top: 0px;
        left: 50%;
        max-width: 120px;
        transform: translate(-50%, 0);
    }

    .sticky .nav-header {
        transform: translate(-50%, 0) scale(1);
    }

 
   .header_area.sticky .stellarnav ul {
        opacity: 1;
        pointer-events: all;
    }
    .stellarnav.mobile.right .close-menu,
    .stellarnav.mobile.left .close-menu {
        font-size: 0px;
        background: #212121;
        padding-bottom: 30px;
}
    

    .stellarnav .menu-toggle {
        opacity: 0;
        pointer-events: none;
        transition: all .5s;
    }
    .header_area.sticky .stellarnav .menu-toggle {
        opacity: 1;
        pointer-events: all;
        padding: 10px 0px 30px 60px;
        transition: all 1.5s;
    }

    .stellarnav.mobile>ul>li {
        border-bottom: 1px #ddd solid;
    }
    /*按鈕*/
    .stellarnav .menu-toggle span.bars span {
        background: #212121;
    }
    .stellarnav .menu-toggle:after {
        display: none;
    }
    .stellarnav.mobile>ul>li>a.dd-toggle {
        top: 25px;
    }
    .stellarnav.mobile>ul>li>ul>li a.dd-toggle {
        top: 10px;
    }
    .stellarnav a.dd-toggle .icon-plus {
        width: 20px;
        height: 20px;
        border: 1px solid #212121;
        border-radius: 50%;
        position: relative;
        background: #fff;
    }
    .stellarnav a.dd-toggle .icon-plus:before,
    .stellarnav a.dd-toggle .icon-plus:after {
        content: '';
        position: absolute;
        background: #212121;
        left: 50%;
        top: 50%;
        border: none;
    }
    .stellarnav a.dd-toggle .icon-plus:before {
        display: none;
    }
    .stellarnav a.dd-toggle .icon-plus:after {
        content: '✦';
        border: none;
        font-size: 18px;
        z-index: 999;
        transform: none;
        left: unset;
        right: 5px;
        top: -1px;
        color: #212121;
    }
    .stellarnav.mobile li.open a.dd-toggle .icon-plus:after {
        top: -1px;
    }
    /*次選單按鈕*/
    .stellarnav.mobile li.open li a.dd-toggle .icon-plus:after {
        top: -6.5px;
    }
    /*close***********/
    .stellarnav .icon-close:after {
        border: 1px solid #ffffff;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        right: 10px;
        background: #fff;
    }
    .stellarnav .icon-close:before {
        content: 'Ｘ';
        border: none;
        font-size: 12px;
        z-index: 999;
        transform: none;
        right: 14px;
        top: 7px;
        color: #7D7C7E;
        font-weight: bolder;
    }
    .stellarnav .close-menu {
        background: #7D7C7E;
    }

    .header_area.sticky .stellarnav .close-menu {
        background: #7D7C7E;
        position: relative;
        margin-bottom: 10px;
    }


    /*主選單*/
    .stellarnav ul {
        opacity: 1;
        pointer-events: all;
    }
    .stellarnav.mobile>ul>li>a {
        padding: 30px 5px 30px 70px;
    }
    .stellarnav>ul>li>a:not(.dd-toggle):before {
        left: 30px;
        top: 50%;
        width: 41px;
        height: 41px;
    }
    .stellarnav.mobile.left>ul {
        max-width: 100%;
        padding: 0px;
        background: #f3f3f3;
    }
    .stellarnav>ul>li:after {
        display: none;
    }
    .stellarnav.mobile>ul>li:nth-of-type(5)>a.dd-toggle {
        display: none;
    }
    .stellarnav.mobile>ul>li>a {
        transform: translateY(70px);
        transition: all .5s;
        opacity: 0;
    }
    .stellarnav.left.mobile.active>ul>li>a {
        transform: translate(0px);
        transition: all .7s;
        opacity: 1;
    }
    .stellarnav.left.mobile.active>ul>li:nth-of-type(2)>a {
        transition-delay: .1s;
    }
    .stellarnav.left.mobile.active>ul>li:nth-of-type(3)>a {
        transition-delay: .4s;
    }
    .stellarnav.left.mobile.active>ul>li:nth-of-type(4)>a {
        transition-delay: .7s;
    }
    .stellarnav.left.mobile.active>ul>li:nth-of-type(5)>a {
        transition-delay: 1s;
    }
    .stellarnav.left.mobile.active>ul>li:nth-of-type(6)>a {
        transition-delay: 1.2s;
    }
    .stellarnav.left.mobile.active>ul>li:nth-of-type(7)>a {
        transition-delay: 1.5s;
    }
    /*選單*/
    .stellarnav.mobile li.open {
        background: #212121;
        padding: 20px;
        padding-top: 0px;
    }
    .stellarnav>ul>li.drop-left>ul {
        background: #fff;
        padding: 10px 0;
    }
    .stellarnav.mobile li.open li a:not(.dd-toggle) {
        padding: 10px 0px 10px 40px;
        border-bottom: none;
        transition: .6s;
        font-size: 14px;
        color: #7D7C7E;
        letter-spacing: 1px;
    }
    .stellarnav.mobile li.open li a:not(.dd-toggle):before {
        content: '►';
        position: absolute;
        color: #212121;
        font-size: 11px;
        transform: translateY(-50%);
        transition: all .5s;
        opacity: 1;
        top: 50%;
        left: 20px;
    }
    .stellarnav li li {
        border: none;
    }
    .stellarnav.mobile li.open li.open li {
        margin-left: 30px;
        transition: .6s;
    }
    .stellarnav.mobile li.open li li a:not(.dd-toggle) {
        border-left: 1pt solid #212121;
    }
    .stellarnav.mobile li.open li a:before {
        opacity: 0;
    }
    .stellarnav.mobile li.open li.open li a:before {
        display: none;
    }
    .stellarnav.mobile ul ul {
        box-shadow: 5px 5px 0px #ffe9af;
        border-radius: 15px;
        padding: 0px;
    }
    /*選單-次分類*/
    .stellarnav.mobile ul ul ul {
        box-shadow: none;
    }
    .stellarnav.mobile li.open li.open {
        background: #ffffff;
        padding: 0px;
    }
    .stellarnav.mobile li.open li li a:not(.dd-toggle) {
        padding: 10px 0px 10px 20px;
    }
  }


@media screen and (max-width: 400px) {
    .header_area.sticky .stellarnav .menu-toggle {
        padding: 10px 0px 30px 30px;}
    }

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

/*順序*/
.footer_info li {
    display: flex
;
    padding: 10px;
    flex-direction: column;
    align-items: center;
}

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


.footer { background: transparent; border-top: 1px solid #666;}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #212121;
}
.footer .center, .copy { width: 96%; max-width: 1980px;}
.footer_info { position: relative; grid-template-columns: 1fr; z-index: 3; padding: 0;}
.footer_info ul { display: grid; grid-template-columns: 4fr 1fr; width: 98%;}
.footer_info li { padding: 0;}
.footer_info li:nth-child(1) { width: 100%; position: relative;}
.footer_info li:nth-child(2) { width: 100%;}

/*logo*/
.footer_logo { display: none; position: relative; max-width: 100%; width: 150px; height: 60px;}
.footer_logo::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 30%;
  border-bottom: 1px solid var(--BorderColor);
  width: calc(100% - 200px);
}
.footer_logo a { position: relative; display: inline-block; width: 100%; height: 100%;}
.footer_logo a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://pic03.eapple.com.tw/hongyehyuantu/logo.svg) no-repeat center;
  background-size: contain;
  pointer-events: none;
}
.footer_logo img { display: none; max-width: 100%;}

/*footer info*/
.footer_info li p { color: #FFF; line-height: 2; display: inline-block; width: 100%; font-weight: 300;}
.footer_info li p a { color: inherit;}

/*footer menu*/
.footer_menu { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; max-width: 90%;}
.footer_menu a { margin: 0; text-align: left; padding: 5px; line-height: initial; background: transparent; color: var(--FontColor_2); font-weight: 300; letter-spacing: var(--LetterSpacing_S); writing-mode: vertical-rl; border: none; transition: all 0.3s;}
.footer_menu a:first-child { display: none;}
.footer_menu a:hover { background: transparent; color: #EEEEEE;}

/*box_link*/
.box_link {
  position: relative;
  flex-direction: row;
  justify-content: flex-start;
  max-width: 100%;
  order: 2;
}
.box_link a { border: none; filter: brightness(0.5); transition: var(--Transition);}
.box_link a:hover { filter: brightness(1); transition: var(--Transition);}

/*box_link順序調整*/
.box_link a.me_tp_call { order: 1;}
.box_link a.me_tp_line { order: 2;}
.box_link a.me_tp_fb { order: 3;}
.box_link a.me_tp_ig { order: 4;}
.box_link a.me_tp_mail { order: 5;}

/*版權*/
.copy { position: relative; z-index: 2; color: var(--FontColor_3); border: none; padding: 20px 0 60px; text-align: right; margin: 0 auto;}
.copy a{ color: var(--FontColor_3); transition:all 0.3s;}
.copy a:hover { color: var(--FontColor_3); opacity: .6; transition: all 0.3s;}

/*側邊浮動按鈕*/
.info_fix { z-index: 99;}

/*--RWD---------------------------------------*/

@media screen and (max-width: 768px) {
  /*footer*/
  .footer_info ul { width: 100%; grid-template-columns: 1fr;}

  /*menu*/
  .footer_menu a { writing-mode: initial;}

  /*box_link*/
  .box_link { position: relative;}
}

@media screen and (max-width: 600px) {
  /*logo*/
  .footer_logo { text-align: center;}
  .footer_logo::before { bottom: -15px; right: auto; left: 50%; transform: translateX(-50%); width: 50%;}

  /*footer info*/
  .footer_info { justify-content: center;}
  .footer_info li p { width: 100%;}

  /*footer menu*/
  .footer_menu { display: grid; grid-template-columns: repeat(3, 1fr);}

  /*版權*/
  .copy { padding: 30px 0; width: 90%; text-align: center;}

  /*底部按鈕*/
  .footer.with_shopping_mode { padding:30px 0 70px;}
}




/*------------------------------------------------*/
/* 文章區 */
/*------------------------------------------------*/