@charset "utf-8";
/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

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


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

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




/*------------------------------------------------*/
/* 小東西 */
/*------------------------------------------------*/
.pageIndex #content_main{z-index: 0;}
.path { display: none;}
.edit_part { padding:0px;}
.contact_editbox {padding: 0;}
.other_select_page ul.page{display: none;}
.sb_marquee {display: none;}
.tp_links {display: none;}
.me_tp_features {display: none;}
/*------------------------------------------------*/
/* 01｜網站全域設定 */
/*------------------------------------------------*/

:root {
    --MainColor: #ABD055;
    --SubColor: #ABD055;
    --SubColor02: #000;
    --SubColor02: #fff;
}

/*卷軸設定↓*/
/* 捲軸寬度及高度 */
::-webkit-scrollbar {
    width: 7px;
    /*右側捲軸寬度*/
    height: 0px;
    /*下方捲軸高度*/
}

/* 軌道背景底色 */
::-webkit-scrollbar-track {
    background: #EBEDE8;
}

/* 滑桿顏色 */
::-webkit-scrollbar-thumb {
    background: #ABD055;
}

/* 滑桿滑鼠滑入時的顏色 */
::-webkit-scrollbar-thumb:hover {
    background: #89a645;
}


/*------------------------------------------------*/
/* OP 開場：Logo 主角＋品牌綠光暈＋朦朧序幕 */
/*------------------------------------------------*/

.pageIndex::before,
.pageIndex::after{
    content:"";
    position:fixed;
    pointer-events:none;
}

/* 白幕柔霧：帶一點企業綠 */
.pageIndex::before{
    inset:-10%;
    z-index:100000001;

    background:
        radial-gradient(
            circle at center,
            rgba(171,208,85,.16) 0%,
            rgba(255,255,255,.9) 36%,
            rgba(255,255,255,1) 100%
        );

    opacity:1;
    transform:scale(1);
    animation:opSoftMistOpen 6s cubic-bezier(.22,1,.36,1) forwards;
}

/* 企業綠柔光 */
.pageIndex::after{
    inset:-20%;
    z-index:100000002;

    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(171,208,85,.34) 0%,
            rgba(171,208,85,.18) 24%,
            rgba(171,208,85,.06) 48%,
            transparent 72%
        );

    opacity:0;
    transform:scale(.9);
    animation:opBrandLight 6s ease forwards;
}

/* 純白底：一開始完全不看到網站 */
.pageIndex #page::before{
    content:"";
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    height:100dvh;
    z-index:100000000;

    background:#fffdf8;

    opacity:1;
    visibility:visible;
    pointer-events:auto;
    touch-action:none;

    animation:opWhiteOut 6s ease forwards;
}

/* Logo：最上層主角 */
.pageIndex #page::after{
    content:"";
    position:fixed;
    left:50%;
    top:50%;

    width:min(94vw, 1120px);
    height:min(38vw, 410px);

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

    z-index:100000005;
    pointer-events:none;

    opacity:0;
    transform:translate(-50%, -50%) scale(.94);

    animation:opLogoHeroShow 4.8s ease forwards;
}

/* 網站內容：最後由朦朧到清晰 */
.pageIndex .bannerindex .swiper-banner,
.pageIndex .header_area{
    opacity:0;
    filter:blur(10px);
    transform:scale(1.015);
    animation:opSiteClear 1.6s ease 4.55s forwards;
}

/* 白底退場 */
@keyframes opWhiteOut{
    0%, 84%{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    100%{
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        z-index:-1;
    }
}

/* 白幕柔柔散開 */
@keyframes opSoftMistOpen{
    0%, 38%{
        opacity:1;
        transform:scale(1);
    }

    58%{
        opacity:.9;
        transform:scale(1.08);
    }

    78%{
        opacity:.45;
        transform:scale(1.24);
    }

    100%{
        opacity:0;
        transform:scale(1.48);
        visibility:hidden;
    }
}

/* Logo 主角：清楚停留 */
@keyframes opLogoHeroShow{
    0%, 10%{
        opacity:0;
        transform:translate(-50%, -50%) scale(.94);
    }

    24%, 68%{
        opacity:1;
        transform:translate(-50%, -50%) scale(1);
    }

    100%{
        opacity:0;
        transform:translate(-50%, -50%) scale(1.04);
    }
}

/* 企業綠光暈慢慢擴散 */
@keyframes opBrandLight{
    0%, 38%{
        opacity:0;
        transform:scale(.9);
    }

    58%, 78%{
        opacity:1;
        transform:scale(1.04);
    }

    100%{
        opacity:0;
        transform:scale(1.18);
    }
}

/* 網站從朦朧變清晰 */
@keyframes opSiteClear{
    0%{
        opacity:0;
        filter:blur(10px);
        transform:scale(1.015);
    }

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



/*------------------------------------------------*/
/* 首頁大圖*/
/*------------------------------------------------*/

#content_main {
    margin: 0;
}

.bannerindex {
    position: relative;
}

.swiper-banner {
    position: static;
    height: auto;
    margin: 0;
}

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

.swiper-banner .swiper-slide img {
    width: 100%;
    display: block;
}

.pageIndex .bannerindex,
.pageIndex .swiper-banner,
.pageIndex .swiper-banner .swiper-wrapper,
.pageIndex .swiper-banner .swiper-slide {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: transparent !important;
}

/* 主圖自然撐高度 */
.pageIndex .swiper-banner .swiper-slide img {
    display: block;
    width: 100%;
    height: auto !important;
    position: relative;
    z-index: 1;
    object-fit: unset !important;
    object-position: center;
    animation: none !important;
    transform: none !important;
}

/* 疊圖共用 */
.pageIndex .swiper-banner .swiper-slide::before,
.pageIndex .swiper-banner .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
}

/* 下層動態圖 */
.pageIndex .swiper-banner .swiper-slide::after {
    top: 50%;
    left: 50%;
    inset: auto;
    width: 100%;
    height: 100%;
    z-index: 2;
    transform: translate(-50%, -50%);
    transform-origin: center;
}

/* 上層圖 */
.pageIndex .swiper-banner .swiper-slide::before {
    z-index: 3;
}

/*------------------------------------------------*/
/* 桌機圖 */
/*------------------------------------------------*/

.pageIndex .swiper-banner .swiper-slide:nth-child(1)::before {
    background-image: url(https://pic03.eapple.com.tw/jp0202/banner-03.png);
}

.pageIndex .swiper-banner .swiper-slide:nth-child(2)::before {
    background-image: url(https://pic03.eapple.com.tw/jp0202/banner-04.png);
}

/* Active 動畫 */
.pageIndex .swiper-banner .swiper-slide.swiper-slide-active::before {
    opacity: 1 !important;
    animation: bannerFadeIn 1.4s ease forwards !important;
}

.pageIndex .swiper-banner .swiper-slide.swiper-slide-active::after {
    opacity: 1 !important;
    animation: bannerSoftFloat 6s ease-in-out infinite !important;
}

/*------------------------------------------------*/
/* RWD600 手機版：換主圖＋換特效圖 */
/*------------------------------------------------*/
@media screen and (max-width: 600px) {

    /* 主圖改手機版，600x700 會自然等比例縮放 */
    .pageIndex .swiper-banner .swiper-slide:nth-child(1) img {
        content: url(https://pic03.eapple.com.tw/jp0202/banner-05.png);
    }

    .pageIndex .swiper-banner .swiper-slide:nth-child(2) img {
        content: url(https://pic03.eapple.com.tw/jp0202/banner-06.png);
    }

    /* 第一張手機特效 */
    .pageIndex .swiper-banner .swiper-slide:nth-child(1)::before {
        background-image: url(https://pic03.eapple.com.tw/jp0202/banner-07.png) !important;
        background-size: contain !important;
    }

    /* 第二張手機特效 */
    .pageIndex .swiper-banner .swiper-slide:nth-child(2)::before {
        background-image: url(https://pic03.eapple.com.tw/jp0202/banner-08.png) !important;
        background-size: contain !important;
    }

    .pageIndex .swiper-banner .swiper-slide::after {
        display: none !important;
        content: none !important;
        animation: none !important;
        background-image: none !important;
    }
}

/*------------------------------------------------*/
/* 動畫 */
/*------------------------------------------------*/

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

    100% {
        opacity: 1;
    }
}

@keyframes bannerSoftFloat {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -51%) scale(1.01);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}


/*------------------------------------------------*/
/* Header*/
/*------------------------------------------------*/
.navigation {
    grid-template-columns: 250px 1fr;
}
.header_area{
    position:relative;
    top:0;
    left:0;
    z-index:99999;
    width:100%;
    padding:0;
    background:#FFF;
    box-shadow:0 10px 30px rgba(120,80,35,.08);
    transition:all .45s ease;
    overflow:visible;
}
.pageIndex .header_area{
    position:fixed;}


.header_area.sticky{
    position:fixed;
    background:#FFF;
    box-shadow:0 12px 32px rgba(120,80,35,.12);
}

.main_header_area{
    background:transparent;
    transition:all .4s ease;
}

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



@media screen and (max-width:1024px){
.pageIndex .header_area{
    position:relative;}
}
/*------------------------------------------------*/
/* 手機板取消 Header 淡入動畫 */
/*------------------------------------------------*/
@media screen and (max-width:768px){

    .pageIndex .header_area{

        opacity:1 !important;
        pointer-events:auto !important;

        transform:none !important;

        -webkit-animation:none !important;
        animation:none !important;

        transition:none !important;
    }
}
/*------------------------------------------------*/
/* Logo：自然融入 Header，不做卡片 */
/*------------------------------------------------*/

.nav-header{
    position:relative;
    left:auto;
    z-index:9999;
    max-width:250px;
    background:transparent;
    border-radius:0;
    box-shadow:none;
    transition:all .35s ease;
}



.nav-brand{
    display:block;
    padding:8px 0;
}

.nav-brand img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
}

.nav-brand h1{
    display:none;
}

/*------------------------------------------------*/
/* 選單：柔和甜美 hover */
/*------------------------------------------------*/

.stellarnav{
    transition:all .35s ease;
}

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

.stellarnav > ul{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:nowrap;
}

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

.stellarnav > ul > li > a{
    padding:9px 16px 11px;
    color:#000;
    transition:all .32s ease;
    height: 60px;
}

/*------------------------------------------------*/
/* 選單 Hover：主角光效果 */
/*------------------------------------------------*/

.stellarnav > ul:hover > li > a{
    opacity:.38;
    transform:scale(.96);
}

.stellarnav > ul > li:hover > a{
    opacity:1;
    transform:translateY(-2px) scale(1.04);
    color:#000;
}

.stellarnav > ul:hover > li > a b:last-child{
    opacity:.35;
}

.stellarnav > ul > li:hover > a b:last-child{
    color:#ABD055;
    opacity:1;
}

/* 不要膠囊背景 */
.stellarnav > ul > li > a::before{
    display:none !important;
}

.stellarnav > ul > li > a b{
    display:block !important;
    position:static !important;
    font-weight:700;
}

.stellarnav > ul > li > a b:first-child{
    font-size:15px;
}

.stellarnav > ul > li > a b:last-child{
    color:#ABD055;
    font-size:11px;
    font-weight:400;
    letter-spacing:.12em;
    opacity:.88;
}

.stellarnav > ul > li:hover > a b,
.stellarnav > ul > li:hover > a b:last-child{
    color:#000;
    opacity:1;
}

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

/* 下拉選單 */
.stellarnav ul ul{
    width:185px;
    top:100%;
    background:transparent;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 16px 34px rgba(120,80,35,.13);
}

.stellarnav ul ul li{
    display:block;
    border:0;
    background:transparent;
    padding:0;
}

.stellarnav ul ul li a{
    display:block;
    color:#000;
    background:#fffdf8;
    padding:13px 18px;
    font-size:14px;
    font-weight:700;
    transition:all .28s ease;
}

/*------------------------------------------------*/
/* 下拉選單：主角光效果 */
/*------------------------------------------------*/

/* 整個群組被 hover 時 */
.stellarnav ul ul:hover li a{
    opacity:.35;
    transform:translateX(0);
}

/* 被指到的項目 */
.stellarnav ul ul li:hover > a{
    opacity:1 !important;
    color:#000;

    background:#fffdf8;

    transform:translateX(10px);

    letter-spacing:.08em;
}

/* 左側光柱 */

.stellarnav ul ul li a{
    position:relative;
    transition:.35s ease;
}

.stellarnav ul ul li a::before{
    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:0;
    height:24px;

    background:#ABD055;

    transform:translateY(-50%);

    transition:.35s ease;
}

.stellarnav ul ul:hover li a{
    opacity:.4;
}

.stellarnav ul ul li:hover > a{
    opacity:1;
    transform:translateX(10px);
}

.stellarnav ul ul li:hover > a::before{
    width:3px;
}
/*------------------------------------------------*/
/* RWD */
/*------------------------------------------------*/

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

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

    .stellarnav > ul {
    justify-content: center;
}
.header_area {
    position: relative;
}
.header_area.sticky {
     position: fixed;
}
.nav-header {
    max-width: 250px;
    flex: 0 0 80px;
}
}

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

    .header_area,
    .header_area.sticky{
        background:#FFF;

    }

    .header_area {
    position: sticky;
    max-width:unset; 
    flex: unset;
    
}

    .main_header_area .container{
        max-width:100% !important;
        padding:0 !important;
    }


    .nav-brand{
       padding: 10px 0;
    }
    .nav-header {
        max-width: 250px;
        flex: none;
    }
    .stellarnav.mobile{
        top:15px;
    }

    .stellarnav .menu-toggle{
        display:inline-block;
        padding:10px 0 30px 24px;
        opacity:1;
        pointer-events:auto;
    }

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

    .stellarnav .menu-toggle span.bars span{
        width:28px;
        height:2px;
        background:#ABD055;
        border-radius:20px;
    }

    .stellarnav.mobile.left > ul{
        width:76%;
        max-width:320px;
        padding:0;
        background:#fffdf8;
        border-radius:0 24px 24px 0;
        box-shadow:16px 0 35px rgba(120,80,35,.13);
        overflow:auto;
    }

    .stellarnav.mobile > ul > li{
        border-bottom:1px solid #abd05585;
        padding:0;
    }

    .stellarnav.mobile > ul > li > a{
        display:block;
        padding:17px 55px 17px 20px;
        margin:0;
        height:auto;
        line-height:1.55;
        color:#000 !important;
        background:#fffdf8 !important;
        text-align:left;
        border-radius:0;
        transform:none !important;
    }

    .stellarnav.mobile > ul > li > a::before{
        display:none !important;
    }

    .stellarnav.mobile > ul > li > a:hover{
        color:#000!important;
        background:#abd05533 !important;
    }

    .stellarnav.mobile > ul > li > a.dd-toggle{
        top:10px;
        right:8px;
        background:transparent !important;
    }

    .stellarnav a.dd-toggle .icon-plus:before,
    .stellarnav a.dd-toggle .icon-plus:after{
        border-bottom:solid 2px #ABD055;
    }

    .stellarnav.mobile li.open{
        padding:0;
        background:#fff;
    }

    .stellarnav.mobile li.open li a:not(.dd-toggle){
        padding:11px 15px 11px 38px;
        color:#000 !important;
        background:#fff !important;
        font-size:14px;
    }

    .stellarnav.mobile li.open li a:not(.dd-toggle)::before{
        content:"";
        position:absolute;
        left:21px;
        top:50%;
        width:5px;
        height:5px;
        border-radius:50%;
        background:#ABD055;
        transform:translateY(-50%);
    }

    .stellarnav.mobile.right .close-menu,
    .stellarnav.mobile.left .close-menu,
    .stellarnav .close-menu{
        background:#ABD055;
    }

    .stellarnav.mobile .close-menu{
        color:#fff !important;
    }

    .stellarnav .icon-close:before,
    .stellarnav .icon-close:after{
        border-bottom:solid 3px #fff;
    }
}

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

    .stellarnav.mobile.left > ul{
        width:85%;
    }

    .stellarnav .menu-toggle{
        padding:10px 0 30px 18px;
    }
}



/*------------------------------------------------*/
/* 修正 RWD768 手機選單被 Header 卡住 */
/*------------------------------------------------*/
@media screen and (max-width:768px){

    .header_area,
    .header_area.sticky,
    .main_header_area,
    .navigation{
        overflow:visible !important;
    }

    .stellarnav.mobile{
        overflow:visible !important;
        z-index:999999;
    }

    .stellarnav.mobile.left > ul{
        position:fixed !important;
        top:62px !important;
        left:0 !important;
        right:auto !important;

        width:76vw !important;
        max-width:320px !important;
        height:calc(100dvh - 62px) !important;

        background:#fffdf8;
        border-radius:0 24px 24px 0;
        box-shadow:16px 0 35px rgba(120,80,35,.13);

        overflow-y:auto !important;
        overflow-x:hidden !important;
        z-index:999999 !important;
    }

    .stellarnav.mobile.right > ul{
        position:fixed !important;
        top:62px !important;
        right:0 !important;
        left:auto !important;

        width:76vw !important;
        max-width:320px !important;
        height:calc(100dvh - 62px) !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;
        z-index:999999 !important;
    }
}


@media screen and (max-width: 400px) {
    .nav-header {
        max-width: 200px;}
    
    }
/*------------------------------------------------*/
/* FOOTER */
/*------------------------------------------------*/

.footer_info li p.add2:before {
    content: '營業時間：';
}
/*------------------------------------------------*/
/* Footer 資訊隱藏 */
/*------------------------------------------------*/

.footer_info .line,
.footer_info .taxid{
    display:none !important;
}
/*------------------------------------------------*/
/* Footer 背景 */
/*------------------------------------------------*/

.footer {

    background: #fff;

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

/* 可選：增加淡淡遮色讓字更清楚 */
.footer:before {
    content: "";
    position: absolute;
    inset: 0;

    background: rgb(255 255 255 / 20%);
    pointer-events: none;
    z-index: 1;
}

/* 內容層 */
.footer .center,
.copy {
    position: relative;
    z-index: 2;
}


/*------------------------------------------------*/
/* FOOTER 內容 */
/*------------------------------------------------*/

.footer .center {
    max-width: 1550px;
    padding: 40px 20px 15px;
}

.footer_info {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    padding: 0px;
    grid-gap: 0px;
}

.footer_info ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    grid-gap: 35px;

    border-top: 1px solid #abd055;

    margin: 0px auto 0;
    padding: 30px 0 10px;
}

.footer_info li:nth-child(1) {
    display: flex;
    align-items: flex-start;
    width: 50%;
    flex-direction: column;
    padding: 0 10px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer_info li p,
.footer_info li p a {
    color: #51301E;
    line-height: 200%;
    width: 45%;
    margin-bottom: 7px;
}

.footer_info li p.tel:after,
.footer_info li p.tel2:after {
    left: 30px;
    position: absolute;
    background: var(--mainColor);
    padding: 0 10px;
    font-weight: 800;
    font-size: 16px;
}

/*------------------------------------------------*/
/* Footer 選單 */
/*------------------------------------------------*/

.footer_info li:nth-child(2) {
    max-width: 53%;
    padding-left: 0px;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

.footer_menu {
    display: flex;
    justify-content: flex-end;
    width: auto;
    flex-wrap: wrap;
}

.footer_menu a {
    margin: 0;
    text-align: center;
    transition: all 0.3s;

    padding: 0px 10px;
    border: none;

    font-size: 15px;
    color: #000;

    background: transparent;
    position: relative;
}

.footer_menu a:nth-child(1) {
    display: none;
}

.footer_menu a:before {
    content: "";

    background: #000;

    width: 7px;
    height: 7px;

    border-radius: 99em;

    position: absolute;
    left: 50%;
    top: 0%;

    transform: translateX(-50%);

    opacity: 0;
    transition: 0.5s;
}

.footer_menu a:hover {
    padding-top: 20px;
    background: transparent;
    color: #000;
}

.footer_menu a:hover:before {
    opacity: 1;
}

/*------------------------------------------------*/
/* Copyright */
/*------------------------------------------------*/

.copy {
    background: transparent;
    color: #000;

    border-top: 1px #abd055 solid;

    text-align: left;

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

    margin: 0px auto 0;

    padding: 10px 8px;

    justify-content: flex-start;
}

.copy a {
    color: #000;
    padding: 0 5px;
    transition: all 0.3s;
}

.copy > a {
    padding: 0 15px;
    margin: 0;
}

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

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

.footer_info li:nth-child(1) {
    width: 100%;
    max-width: 650px;

    padding: 0 0px 0px 10px;

    justify-content: flex-start;
}

.footer_info li p,
.footer_info li p a {
    width: fit-content;
    padding-right: 20px;
}

.footer_menu a {
    padding: 5px 20px 0 0;
}

.footer_menu a:hover {
    padding-top: 15px;
}

.footer_info ul {
    grid-gap: 10px;
}

.copy {
    padding: 0 20px;
    padding-bottom: 80px;
}

}

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

.footer_info ul {
    flex-direction: column;
}

.footer_menu {
    justify-content: flex-start;
}

.footer_info li:nth-child(2) {
    max-width: 100%;
    justify-content: flex-start;
}

.footer_menu a:before {
    left: 40%;
}

}

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

/* Footer 背景 */
.footer {
    background-position: center top;
    background-size: cover;
}

.footer_logo img {
    max-width: 70%;
}

.footer_menu {
    justify-content: flex-start;
}

.copy {
    padding: 0 20px;
}

.footer .center {
    padding: 0px 20px 15px;
}

.footer_info li:nth-child(1) {
    flex-direction: column;
}

.footer_info li:nth-child(2) {
    max-width: 100%;
}

.footer_menu a:before {
    display: none;
}

.footer_info li p,
.footer_info li p a {
    position: relative;
}

.footer_info li p.tel,
.footer_info li p.tel2 {
    padding-left: 0px;
}

.footer_info li p,
.footer_info li p a {
    line-height: 140%;
}

.footer_info li p.tel:after,
.footer_info li p.tel2:after {
    top: 15px;
    line-height: 200%;
    left: 0;
}

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

/* 開啟手機板下方按鈕所需設定 */
.footer.with_shopping_mode {
    padding: 50px 0 50px;
}

}

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

/*------------------------------------------------*/
/* 修正 RWD768 Header 變糊 */
/*------------------------------------------------*/
@media screen and (max-width:768px){

    .pageIndex .header_area,
    .pageIndex .header_area.sticky,
    .pageIndex .main_header_area,
    .pageIndex .nav-header,
    .pageIndex .nav-brand,
    .pageIndex .nav-brand img,
    .pageIndex .stellarnav{
        filter:none !important;
        -webkit-filter:none !important;
        opacity:1 !important;
        transform:none !important;
        animation:none !important;
        -webkit-animation:none !important;
    }

    
}


/*------------------------------------------------*/
/* 文章頁｜正品窗簾・高級型錄風＋窗簾拉開效果 */
/*------------------------------------------------*/

/* 整體留白 */
.blog_content,
.blog_main{
    max-width:1180px;
    margin:0 auto;
    padding:90px 20px;
    box-sizing:border-box;
}

/* 文章列表 */
.blog_subbox,
.news_related_list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:52px 38px;
}

.module_i_news ul {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 28px;
}
.module_i_news section {
    max-width: 82%;}


.i_blog_b {    padding-top: 50px;
}

/* 拿掉卡片感 */
.subbox_item,
.module_i_news li,
.news_related_list li{
    position:relative;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    overflow:visible;
}

/* 底線 */
.subbox_item::after,
.module_i_news li::after,
.news_related_list li::after{
    content:"";
    display:block !important;
    position:absolute;
    left:0;
    bottom:-20px;
    width:100%;
    height:1px;
    background:rgba(171,208,85,.35);
    transition:.35s ease;
}

.subbox_item:hover::after,
.module_i_news li:hover::after,
.news_related_list li:hover::after{
    background:#ABD055;
}

/* 關掉舊箭頭 */
.subbox_item::before,
.module_i_news li::before,
.news_related_list li::before{
    display:none !important;
}

/* 連結 */
.subbox_item a,
.module_i_news li a,
.news_related_list li a{
    display:block;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    animation:none !important;
}

/* 關掉原本 CSS 生出來的 READ MORE，不影響模組原生文字 */
.subbox_item a::before,
.subbox_item a::after,
.module_i_news li a::before,
.module_i_news li a::after{
    content:none !important;
    display:none !important;
}

/* 圖片區 */
.i_blog_le,
.blog_list_le,
.news_related_list li a{
    position:relative;
    overflow:hidden;
    aspect-ratio:4/3;
    background:#f8f6f1;
}

/* 圖片 */
.i_blog_le img,
.blog_list_le img,
.news_related_list img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:none !important;
    animation:none !important;
    transform:none;
    transition:transform .7s ease;
}

/* 圖片微放大 */
.subbox_item:hover img,
.module_i_news li:hover img,
.news_related_list li:hover img{
    transform:scale(1.035);
}

/*------------------------------------------------*/
/* 窗簾拉開效果 */
/*------------------------------------------------*/

.i_blog_le::before,
.i_blog_le::after,
.blog_list_le::before,
.blog_list_le::after{
    content:"";
    position:absolute;
    top:0;
    width:50.5%;
    height:100%;
    z-index:3;
    pointer-events:none;
    background:linear-gradient(
        90deg,
        rgba(255,253,248,.92),
        rgba(255,253,248,.62),
        rgba(255,253,248,.18)
    );
    transition:transform .75s cubic-bezier(.22,1,.36,1), opacity .55s ease;
    opacity:.78;
}

.i_blog_le::before,
.blog_list_le::before{
    left:0;
    transform:translateX(0);
}

.i_blog_le::after,
.blog_list_le::after{
    right:0;
    transform:translateX(0) scaleX(-1);
}

.subbox_item:hover .i_blog_le::before,
.module_i_news li:hover .i_blog_le::before,
.subbox_item:hover .blog_list_le::before{
    transform:translateX(-86%);
    opacity:.18;
}

.subbox_item:hover .i_blog_le::after,
.module_i_news li:hover .i_blog_le::after,
.subbox_item:hover .blog_list_le::after{
    transform:translateX(86%) scaleX(-1);
    opacity:.18;
}

.i_blog_le span,
.blog_list_le span{
    display:none;
}

.i_blog_le,
.blog_list_le{
    isolation:isolate;
}

/* 文字 */
.i_blog_ri,
.blog_list_ri{
    height:auto !important;
    padding:24px 0 0 !important;
}

.i_blog_ri h5,
.blog_list_ri h5,
.news_related_list li a p{
    color:#2d2d2d !important;
    font-size:18px;
    font-weight:400;
    line-height:1.85;
    letter-spacing:.06em;
    margin:0;
    text-align:left;
}

.i_blog_ri em,
.blog_list_ri em{
    display:block;
    margin-top:10px;
    color:#8aa63f;
    font-size:13px;
    font-style:normal;
    letter-spacing:.12em;
}

.i_blog_ri p,
.blog_list_ri p{
    color:#777;
    font-size:14px;
    line-height:1.9;
    margin-top:12px;
}

/* 相關文章 */
.news_related{
    padding:80px 20px;
    background:#f8f6f100 ;
    background-image:none !important;
    background-attachment:initial !important;
}

.news_related_list li::after{
    background:rgba(171,208,85,.35) !important;
    backdrop-filter:none !important;
}

.news_related_list li a{
    aspect-ratio:auto;
}

.fa-caret-down::before {
    color: #abd055;
}

.toShareNews{display: none;}
/*------------------------------------------------*/
/* 文章左側分類｜窗簾布樣目錄感 */
/*------------------------------------------------*/

.blog_le{
    position:relative;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
}

/* 左側標題 */
h5.blog_le_t{
    display:block;
    margin-bottom:26px;
    padding-bottom:18px;
    border-bottom:1px solid rgba(171,208,85,.45);
}

h5.blog_le_t span{
    display:block;
    color:#2d2d2d !important;
    font-size:26px;
    font-weight:400;
    letter-spacing:.12em;
    line-height:1.4;
}

h5.blog_le_t em{
    display:block;
    margin-top:6px;
    color:#8aa63f !important;
    font-size:13px;
    font-style:normal;
    letter-spacing:.18em;
    text-transform:uppercase;
}

/* 搜尋欄 */
.blog_search{
    margin-bottom:28px;
}

.blog_search input[type=search]{
    width:100%;
    height:44px;
    border:0 !important;
    border-bottom:1px solid rgba(171,208,85,.55) !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#333;
    font-size:14px;
    letter-spacing:.05em;
    padding:0 6px;
    outline:none;
}

.blog_search input[type=search]:focus{
    border-bottom-color:#ABD055 !important;
}

/* 分類列表 */
.blog_le .accordion{
    border:0 !important;
}

.blog_le .accordion > li{
    position:relative;
    border-bottom:1px solid #eee !important;
    background:transparent !important;
}

.blog_le .accordion li .link{
    position:relative;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
}

.blog_le .accordion li .link a{
    position:relative;
    display:block;
    padding:15px 0 15px 18px !important;
    color:#4a4a4a !important;
    font-size:15px;
    font-weight:400;
    letter-spacing:.08em;
    transition:.25s ease;
}

/* 左側布條線 */
.blog_le .accordion li .link a::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:5px;
    height:1px;
    background:#ABD055;
    transform:translateY(-50%);
    transition:.25s ease;
}

.blog_le .accordion > li:hover .link a,
.blog_le .accordion > li.on_this_category .link a{
    color:#8aa63f !important;
    padding-left:28px !important;
}

.blog_le .accordion > li:hover .link a::before,
.blog_le .accordion > li.on_this_category .link a::before{
    width:16px;
}

/* 子分類 */
.blog_le .submenu,
.blog_le .accordion ul{
    background:#faf9f4 !important;
    padding:8px 0 10px !important;
}

.blog_le .submenu li a,
.blog_le .accordion ul li a{
    display:block;
    padding:9px 0 9px 32px !important;
    color:#666 !important;
    font-size:14px;
    letter-spacing:.05em;
    border:0 !important;
    transition:.25s ease;
}

.blog_le .submenu li a:hover,
.blog_le .accordion ul li a:hover{
    color:#8aa63f !important;
    padding-left:40px !important;
}

/* 文章內頁 */
.blog_box_edit{
    max-width:900px;
    margin:0 auto;
    padding:0;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.blog_box_edit *{
    line-height:2.05;
}

h4.blog_category_title{
    text-align:center;
    color:#2d2d2d;
    font-size:28px;
    font-weight:400;
    letter-spacing:.1em;
    margin-bottom:38px;
    padding-bottom:24px;
    border-bottom:1px solid rgba(171,208,85,.4);
}

/* 按鈕分頁 */
.blog_back,
.page{
    text-align:center;
}

.blog_back a,
.lastPage,
.page li,
.page a{
    border-radius:0 !important;
    background:transparent !important;
    border:1px solid rgba(171,208,85,.55) !important;
    color:#2d2d2d !important;
    transition:.25s ease;
}

.blog_back a:hover,
.lastPage:hover,
.page li.activeN,
.page a:hover{
    background:#ABD055 !important;
    color:#1f1f1f !important;
}

.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category {
    background: #66666600 !important;
}

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

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

    .blog_subbox,
    .module_i_news ul,
    .news_related_list{
        grid-template-columns:repeat(2,1fr);
        gap:46px 28px;
    }
}

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

    .blog_content,
    .blog_main{
        padding:58px 18px;
    }

    .blog_subbox,
    .module_i_news ul,
    .news_related_list{
        gap:30px;
    }

    h4.blog_category_title{
        font-size:23px;
        display: none;

    }

    .blog_le{
        margin-bottom:45px;
    }

    h5.blog_le_t span{
        font-size:22px;
    }

    .i_blog_le::before,
    .i_blog_le::after,
    .blog_list_le::before,
    .blog_list_le::after{
        opacity:.38;
    }
}


@media screen and (max-width: 450px) {
    .blog_subbox, .module_i_news ul, .news_related_list {
        grid-template-columns: repeat(1, 1fr);}
}


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

    .blog_content,
    .blog_main{
        padding:45px 14px;
    }

    .i_blog_ri h5,
    .blog_list_ri h5,
    .news_related_list li a p{
        font-size:17px;
    }
}

/*------------------------------------------------*/
/* 文章首頁標題 */
/*------------------------------------------------*/

.module_i_news h4{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin:0 0 55px;
    padding:0;
    border:0 !important;
    background:transparent !important;
    color:#666 !important;
    font-size:0 !important;
    font-weight:400;
    line-height:1.2;
    letter-spacing:0;
    text-align:center;
}

/* 中文 */
.module_i_news h4::before{
    content:"常見問題";
    color:#ABD055;
    font-size:24px;
    font-weight:600;
    letter-spacing:.12em;
    line-height:1.2;
}

/* 斜線 */
.module_i_news h4::after{
    content:"/ Faq";
    color:#666;
    font-size:40px;
    font-weight:300;
    letter-spacing:.10em;
    line-height:1.2;
    font-weight: 500;
}



/* 隱藏原本標題文字 */
.blog_content > h4 *,
.blog_main > h4 *,
.module_i_news h4 *,
h4.blog_category_title *{
    display:none !important;
}

.module_i_news .title_i_box h6 {display: none;
}

.animated-arrow {
    background: #abd055;
    color: #505050;
    border: none;
}

.module_i_news {
    padding: 150px 20px;
}

/* 手機 */
@media screen and (max-width:600px){

    .blog_content > h4,
    .blog_main > h4,
    .module_i_news h4,
    h4.blog_category_title{
        gap:12px;
        margin-bottom:38px;
    }

    .blog_content > h4::before,
    .blog_main > h4::before,
    .module_i_news h4::before,
    h4.blog_category_title::before{
        font-size:19px;
        letter-spacing:.08em;
    }

    .blog_content > h4::after,
    .blog_main > h4::after,
    .module_i_news h4::after,
    h4.blog_category_title::after{
        font-size:29px;
        letter-spacing:.12em;
        word-spacing:6px;
    }
}



/*------------------------------------------------*/
/* 相簿 */
/*------------------------------------------------*/

.show-list,
.pic-list{
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

/* 卡片 */
.show-list .item,
.pic-list .item{
    position:relative;
    overflow:hidden;
    animation:blogin 2s cubic-bezier(.65,.05,.36,1) forwards;
}

/* 底線 */
.show-list .item::after,
.pic-list .item::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background:#cfb26f80;
}

.show-list .item:hover::after,
.pic-list .item:hover::after{
    animation:line_move .5s;
    background:#ABD055;
}

/* 箭頭 */
.show-list .item::before,
.pic-list .item::before{
    content:"→";
    position:absolute;
    right:10px;
    bottom:10px;
    color:var(--logocolor);
    font-size:13px;
    z-index:5;
}

.show-list .item:hover::before,
.pic-list .item:hover::before{
    animation:mo_arrow .8s cubic-bezier(.215,.61,.355,1) forwards;
}

/* 連結 */
.show-list .item a,
.pic-list .item a{
    display:block;
    padding:10px;
    padding-bottom:35px;
}

/* 圖片 */
.show_pic{
    aspect-ratio:4/3;
    overflow:hidden;
}

.show_pic img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:
        opacity 450ms,
        transform 900ms cubic-bezier(.215,.61,.355,1);

    animation:
        img-in 2s cubic-bezier(.65,.05,.36,1) forwards;
}

.show-list .item:hover img,
.pic-list .item:hover img{
    transform:scale(1.2);
}

/* 移除原本中央白字遮罩 */
.overlay{
    display:none;
}

/* 標題 */
.show_name,
.pic-list .show_name{
    position:static;
    opacity:1;
    transform:none;

    margin-top:18px;

    color:var(--FontColor);

    text-align:left;

    font-size:var(--f18);
    font-weight:400;
    line-height:1.6;

    transition:.3s;
}

/* READ MORE */
.show-list .show_name {
    color: #ABD055;}



/* 側邊分類 */
.subalbum-menu h2{
    color:var(--FontColor);
    font-size:var(--f16);
    font-weight:500;

    border-bottom:1px solid #2b221a2b;

    padding:5px 10px;
}

/* 固定標題 */
.album_fixed_title i{
    display:none;
}

.album_fixed_title span{
    font-size:16px;
    color:var(--FontColor);

    border-bottom:1px solid #90735961;

    text-align:center;

    padding:5px 10px;
}
.other_subalbum li {
    background: #ffffff00;
    }


    .page {
    margin-top: 85px;
    color: #ABD055;}

.page li.activeN, .page a:hover {
    background: #ABD055;}
/*------------------------------------------------*/
/* RWD */
/*------------------------------------------------*/

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

    .show-list,
    .pic-list{
        grid-template-columns:repeat(2,1fr);
    }
}

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

    .show-list,
    .pic-list{
        grid-template-columns:1fr;
    }
}



/*------------------------------------------------*/
/* 影片頁｜清爽型錄版＋分類卡片＋可收合 */
/*------------------------------------------------*/

.video_page .video_content{
    margin:0 auto;
    padding:80px 20px;
    box-sizing:border-box;
}

/* 分類卡片 */
.video_menu_list{
    margin:0 50px 60px 0;
    padding:28px 32px;
    background:#fffdf8 !important;
    border:1px solid rgba(171,208,85,.35);
    border-radius:22px;
    box-shadow:0 10px 28px rgba(80,80,50,.05);
    box-sizing:border-box;
}

/* 分類標題 */
.video_menu_list h5{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 0 16px;
    margin:0 0 22px;
    color:#2d2d2d;
    font-size:18px;
    font-weight:400;
    letter-spacing:.08em;
    border-bottom:1px solid rgba(171,208,85,.45);
    background:transparent !important;
    cursor:pointer;
}

.video_menu_list h5 .vd_menu_toggle,
.video_menu_list h5 .fa-solid,
.video_menu_list h5 .fa-caret-down{
    color:#ABD055;
    transition:.3s ease;
}

/* 分類收合：不要用 display:flex !important，避免 JS 收不起來 */
.video-layer-two{
    display:flex;
    flex-wrap:wrap;
    gap:12px 14px;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
}

/* 如果 JS 加 hide / close，可正常收起 */
.video_menu_list.close .video-layer-two,
.video_menu_list.hide .video-layer-two,
.video_menu_list:not(.open).is-close .video-layer-two{
    display:none;
}

/* 箭頭旋轉 */
.video_menu_list.close h5 .vd_menu_toggle,
.video_menu_list.hide h5 .vd_menu_toggle,
.video_menu_list.close h5 .fa-caret-down,
.video_menu_list.hide h5 .fa-caret-down{
    transform:rotate(-90deg);
}

.video-layer-two li{
    width:auto !important;
    flex:none;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    list-style:none;
}

.video-layer-two li a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:110px;
    padding:12px 22px !important;
    background:#fff !important;
    border:1px solid rgba(171,208,85,.28);
    border-radius:999px;
    color:#555 !important;
    font-size:14px;
    letter-spacing:.06em;
    line-height:1.4;
    box-sizing:border-box;
    transition:.25s ease;
}

.video-layer-two li a:hover,
.video-layer-two li.active > a{
    background:#ABD055 !important;
    border-color:#ABD055;
    color:#1f1f1f !important;
    transform:translateY(-2px);
}

/* 影片列表 */
.video-list{
    display:grid !important;
    grid-template-columns:repeat(3,1fr);
    gap:58px 44px;
    padding:0 !important;
    margin:0 !important;
}

.video-list .vid_item{
    position:relative;
    list-style:none;
    overflow:visible;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.video-list .vid_item::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-18px;
    width:100%;
    height:1px;
    background:rgba(171,208,85,.35);
    transition:.3s ease;
}

.video-list .vid_item:hover::after{
    background:#ABD055;
}

.video-list .vid_item::before{
    content:"→";
    position:absolute;
    right:0;
    bottom:-2px;
    color:#000;
    font-size:13px;
    z-index:5;
    transition:.3s ease;
}

.video-list .vid_item:hover::before{
    right:-8px;
    color:#ABD055;
}

.video-list .viedoBox-link{
    display:block;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

.video-list .vidCover{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    margin:0 0 20px;
    background:#f8f6f1;
    border-radius:0 !important;
}

.video-list .vidCover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:0 !important;
    filter:none !important;
    animation:none !important;
    transition:transform .65s ease;
}

.video-list .vid_item:hover .vidCover img{
    transform:scale(1.06);
}

.video-list .vidCover::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:rgba(255,255,255,.04);
}

.video-list .vidTitle{
    margin:0 0 8px;
    color:#2d2d2d;
    text-align:left;
    font-size:18px;
    font-weight:400;
    line-height:1.6;
    letter-spacing:.06em;
    transition:.25s ease;
}

.video-list .vidDesc{
    margin:0;
    color:#777;
    font-size:14px;
    line-height:1.8;
    text-align:left;
    letter-spacing:.04em;
}

.video-list .vid_item:hover .vidTitle{
    color:#8aa63f;
}

/* 分頁 */
.video_page .page{
    margin-top:85px;
    color:#ABD055;
    text-align:center;
}

.video_page .page li.activeN,
.video_page .page a:hover{
    background:#ABD055;
}

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

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

    .video_menu_list{
        margin-right:0;
    }

    .video-list{
        grid-template-columns:repeat(2,1fr);
        gap:54px 32px;
    }
}

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

    .video_page .video_content{
        padding:55px 18px;
    }

    .video_menu_list{
        margin:0 0 45px;
        padding:24px 18px;
        border-radius:18px;
    }

    .video_menu_list h5{
        font-size:17px;
        margin-bottom:18px;
    }

    .video-layer-two{
        gap:10px;
    }

    .video-layer-two li a{
        min-width:auto;
        padding:10px 18px !important;
        font-size:13px;
    }

    .video-list{
        grid-template-columns:1fr;
        gap:52px;
    }
}


/* 影片分類收合鍵隱藏 */
.video_menu_list .vd_menu_toggle{
    display:none !important;
}

/* 標題置左即可 */
.video_menu_list h5{
    justify-content:flex-start;
}
/*------------------------------------------------*/
/* 內頁ban */
/*------------------------------------------------*/
.banB,.banC {display: none;}
.banner h5 {  
width: 100%;  
margin: 0 auto;  
font-size: 50px;  
color: #fff;  
text-shadow: 0 0 10px rgba(0, 0, 0, .2); 
position: absolute;  
    top: 45%;
    left: 25%;
transform: translate(-50%, -50%); 
letter-spacing: 3px; 
font-weight: 500;
font-family: "Noto Serif CJK TC", serif;}

@media screen and (max-width: 1024px){
	.banner{height: 200px;}
}

.banner {
    background-position: center;
    overflow: hidden;
    background-image: none;
    position: relative;
    z-index: 1;
    padding: 12vw;
}


.banner::before {  content: "";
    background-image: 
    linear-gradient(180deg, #00000000 40%, rgb(0 0 0 / 31%) 65%), url(https://pic03.eapple.com.tw/jp0202/ban01.png);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    animation-duration: 5s;
    background-size: cover;
    background-position: center;
    animation: bgScroll 30s linear infinite;
    width: 110%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
}


@keyframes bgScroll {
    0% {        -webkit-transform: translateX(0);        transform: translateX(0);    }
    50% {        -webkit-transform: translateX(-5%);        transform: translateX(-5%);    }
    100% {        -webkit-transform: translateX(0);        transform: translateX(0);    }
}

.banner h5:before {
    content: "窗啟美學・簾藏品味" !important;
    display: block;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 2px;
    margin-top: 15px;
    margin-bottom: 0px;
    padding-bottom: 5px;
    position: relative;  
    animation: SlideUp 1s 0.1s ease-in-out forwards;
    opacity: 0; 
}
@keyframes SlideUp {
    0% {    opacity: 0;   -webkit-transform: translateY(30px);   transform: translateY(30px);    }
    100% {  opacity: 1;   -webkit-transform: translateY(0);    transform: translateY(0);    }
}

.banB {display: none;}


@media screen and (max-width: 1145px) {
.banner h5 {    font-size: 40px;left: 50%;}
}


@media screen and (max-width: 768px) {
.banner h5:before {    font-size: 17px;    padding-bottom: 0;}
}

@media screen and (max-width: 500px) {
.banner h5 {    font-size: 35px;}
.banner h5:before {    font-size: 15px;}
}

@media screen and (max-width: 400px) {
.banner h5 {    font-size: 28px;}
.banner h5:before {    font-size: 15px;}
}

/*------------------------------------------------*/
/* 聯絡頁｜線上表單置中乾淨版 */
/*------------------------------------------------*/

.contact_page .main_part{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
    overflow:hidden;
}

.contact_page .contact_content{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:80px 20px;
    box-sizing:border-box;
}

.contact_page .contact_content form{
    width:100%;
    max-width:760px;
    margin:0 auto;
    display:block;
    box-sizing:border-box;
}

.contact_page .information_left{
    display:none;
}

.contact_page .information_right{
    width:100% !important;
    max-width:760px;
    margin:0 auto !important;
    padding:45px 50px;
    box-sizing:border-box;
    background:#fff;
    border:1px solid rgba(171,208,85,.45);
    border-radius:26px;
    box-shadow:0 12px 35px rgba(0,0,0,.06);
}

.contact_page .information_right h4{
    text-align:center;
    margin:0 0 35px;
    color:#000;
    letter-spacing:.08em;
}

.contact_page .information_right h4 .note{
    display:block;
    margin-top:8px;
    font-size:13px;
    letter-spacing:0;
    font-weight:400;
}

.contact_page .contact_form{
    width:100%;
    margin:0;
    padding:0;
}

.contact_page .contact_form li{
    width:100%;
    display:flex;
    align-items:center;
    gap:18px;
    margin:0 0 20px;
    padding:0;
    box-sizing:border-box;
}

.contact_page .form__label{
    width:110px;
    flex:0 0 110px;
    color:#333;
    font-size:15px;
    font-weight:600;
    line-height:1.6;
    text-align:right;
}

.contact_page .form__insert{
    flex:1;
    min-width:0;
}

.contact_page .form__insert input,
.contact_page .form__insert textarea{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    border:1px solid #ddd !important;
    border-radius:12px;
    background:#fafafa;
    padding:13px 15px;
    font-size:15px;
    line-height:1.6;
    color:#222;
    outline:none;
    transition:border-color .25s ease, background .25s ease;
}

.contact_page .form__insert textarea{
    min-height:150px;
    resize:vertical;
}

.contact_page .form__insert input:focus,
.contact_page .form__insert textarea:focus{
    border-color:#ABD055 !important;
    background:#fff;
}

.contact_page .checknumBox .form__insert{
    display:flex;
    align-items:center;
    gap:10px;
}

.contact_page .checknumBox input{
    max-width:180px;
}

.contact_page .checknumBox img{
    height:auto;
    max-width:120px;
    flex:0 0 auto;
}

.contact_page .contact_form li.last{
    justify-content:center;
    gap:16px;
    margin-top:35px;
}

.contact_page .contact_form li.last button{
    min-width:135px;
    height:46px;
    border:0;
    border-radius:99px;
    background:#ABD055;
    color:#000;
    font-weight:700;
    cursor:pointer;
    transition:background .25s ease, transform .25s ease;
}

.contact_page .contact_form li.last button[type="reset"]{
    background:#eee;
}

.contact_page .contact_form li.last button:hover{
    background:#8fb83e;
    transform:translateY(-2px);
}

.contact_page .contact_form li.last button[type="reset"]:hover{
    background:#ddd;
}

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

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

    .contact_page .contact_content{
        padding:55px 18px;
    }

    .contact_page .information_right{
        padding:36px 24px;
        border-radius:22px;
    }

    .contact_page .contact_form li{
        display:block;
        margin-bottom:18px;
    }

    .contact_page .form__label{
        width:100%;
        flex:none;
        text-align:left;
        margin-bottom:7px;
    }

    .contact_page .checknumBox .form__insert{
        flex-wrap:wrap;
    }

    .contact_page .checknumBox input{
        max-width:100%;
    }

    .contact_page .contact_form li.last{
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .contact_page .contact_form li.last button{
        width:100%;
    }
}

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

    .contact_page .contact_content{
        padding:42px 14px;
    }

    .contact_page .information_right{
        padding:30px 18px;
    }
}


/* 線上表單｜信箱加上紅色必填星號 */
.contact_form li:nth-child(4) .form__label::before{
    content:"*";
    color:#d73b3e;
    margin-right:4px;
    font-weight:700;
}