@charset "utf-8";

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

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

*/


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


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


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


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

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

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

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

/*Main/＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*Header/＝＝＝＝＝*/
.header_area {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: transparent;
    padding: 0;
}

.header_area.sticky {
    width: 100%;
    background: transparent;
    padding: 0;
}

.main_header_area {
    background: #ffffff;
    width: 100%;
    margin: 0 auto;
    transform: translateY(0px);
    transition:
    width 0.7s cubic-bezier(.22,.61,.36,1),
    transform 0.7s cubic-bezier(.22,.61,.36,1),
    border-radius 0.7s cubic-bezier(.22,.61,.36,1),
    box-shadow 0.7s cubic-bezier(.22,.61,.36,1);
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
    border-radius: 0px;
}

.main_header_area .container {
    max-width: 1210px;
    width: 100%;
    margin: 0 auto;
}

.sticky .main_header_area {
    width: 100%;
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
    border-radius: 0;
}

.navigation {padding: 10px 10px;}

.me_tp_features{display:none;}

/*主選單/＝＝＝＝＝*/
.stellarnav > ul > li > a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0 8px;
    min-height: 85px;
    color: #616161;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    line-height: 1.3;
    margin: 0 17px;
    letter-spacing: 1px;
    font-size: 15px;
    text-align: center;
    transition: color 0.35s ease, transform 0.35s ease;
    font-weight: 400;
}

/*第一層*/
.stellarnav > ul > li > a{transition:all 0.3s;}
.stellarnav > ul > li:hover > a{color: #2A62AE;transform: translateY(-3px);}

/* 第一層 hover */
.stellarnav > ul > li > a:hover {
    color: #2A62AE;
    transform: translateY(-2px);
}

.stellarnav > ul > li > a:hover::after {
    width: 58%;
}

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

/* 移除原本三角形 */
.stellarnav li.has-sub > a:after{
    border:none;
}
/* 改成 svg */
.stellarnav li.has-sub > a:after{
    /* content:"";
    width:12px;
    height:12px; */
    background:url("https://pic03.eapple.com.tw/jingguli/arrow.svg") no-repeat center;
    background-size:contain;
    position:absolute;
    top:50%;
    transform:translateY(-50%) rotate(0deg);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
}
/* hover 翻轉 */
/* .stellarnav li.has-sub:hover > a:after{
    transform:translateY(-50%) rotate(180deg);
} */

/*第二層*/
.stellarnav ul ul {background: #ffffff;    width: 180px;}
/* .stellarnav li li {border: 1px #efefef solid;} */
.stellarnav li a {
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    letter-spacing: 1px;
    font-size: 15px;
    color: #616161;
}
.stellarnav li li > a , .stellarnav li li.has-sub > a{padding: 7px 5px;transition: all 0.3s;border-left: 1px solid #2a62ae00;}
.stellarnav li li:hover > a , .stellarnav li li.has-sub:hover > a{color: #2A62AE;	padding-left:10px;border-left:1px solid #2A62AE;}

/* 底線 */
.stellarnav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 0.5px;
    background: #A8DAE3;
    border-radius: 99px;
    transform: translateX(-50%);
    transition: all 0.3s ease;
}


/* 主選單 icon */
.stellarnav > ul > li > a::before {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    margin-bottom: 6px;
    background: url("https://pic03.eapple.com.tw/jingguli/btn_icon.svg") no-repeat center center;
    background-size: contain;
    opacity: 0.72;
    transform: translateY(0) scale(1);
    transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
}

.stellarnav > ul > li:nth-of-type(1) > a:not(.dd-toggle)::before{
    background: url("https://pic03.eapple.com.tw/jingguli/btn_icon01.svg") no-repeat center center;
    background-size: contain;
}

.stellarnav > ul > li:nth-of-type(2) > a:not(.dd-toggle)::before{
    background: url("https://pic03.eapple.com.tw/jingguli/btn_icon02.svg") no-repeat center center;
    background-size: contain;
}

.stellarnav > ul > li:nth-of-type(3) > a:not(.dd-toggle)::before{
    background: url("https://pic03.eapple.com.tw/jingguli/btn_icon03.svg") no-repeat center center;
    background-size: contain;
}

.stellarnav > ul > li:nth-of-type(4) > a:not(.dd-toggle)::before{
    background: url("https://pic03.eapple.com.tw/jingguli/btn_icon04.svg") no-repeat center center;
    background-size: contain;
}

.stellarnav > ul > li:nth-of-type(5) > a:not(.dd-toggle)::before{
    background: url("https://pic03.eapple.com.tw/jingguli/btn_icon05.svg") no-repeat center center;
    background-size: contain;
}

.stellarnav > ul > li:nth-of-type(6) > a:not(.dd-toggle)::before{
    background: url("https://pic03.eapple.com.tw/jingguli/btn_icon06.svg") no-repeat center center;
    background-size: contain;
}

.stellarnav > ul > li:nth-of-type(7) > a:not(.dd-toggle)::before{
    background: url("https://pic03.eapple.com.tw/jingguli/btn_icon07.svg") no-repeat center center;
    background-size: contain;
}

.stellarnav > ul > li:nth-of-type(8) > a:not(.dd-toggle)::before{
    background: url("https://pic03.eapple.com.tw/jingguli/btn_icon08.svg") no-repeat center center;
    background-size: contain;
}

.stellarnav > ul > li:nth-of-type(9) > a:not(.dd-toggle)::before{
    background: url("https://pic03.eapple.com.tw/jingguli/btn_icon09.svg") no-repeat center center;
    background-size: contain;
}
/*Footer/＝＝＝＝＝*/

/*Footer示意圖/＝＝＝＝＝*/
/* 內容區隱藏/切板時刪掉 */
/* .footer_info {visibility: hidden;}
.copy {display: none;}

.footer {
    position: relative;
    aspect-ratio: 2000 / 400;
    max-height: 400px;
}
.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(https://pic03.eapple.com.tw/jingguli/footer.jpg) no-repeat center center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
} */
/* Footer 示意圖期間，隱藏原本 footer 內容 */
/* .footer > .center > .info_fix {
  z-index: 5;
}

/* 隱藏頁尾網站地圖(SITEMAP)中的「回首頁」連結 */
.footer_menu a:first-child {
    display: none !important;
}

.box_link{display:none;} */

/*滾動條/＝＝＝＝＝*/
/* 捲軸寬度及高度 */
::-webkit-scrollbar {
    width: 9px;
    /*右側捲軸寬度*/
    height: 0px;
    /*下方捲軸高度*/
}
/* 軌道背景底色 */
::-webkit-scrollbar-track {
    background-color:#A8DAE3;
}
/* 滑桿顏色 */
::-webkit-scrollbar-thumb {
    background-color: #F2ADAF;
}
/* 滑桿滑鼠滑入時的顏色 */
::-webkit-scrollbar-thumb:hover {
    background: #2A62AE;
}

/*反白/＝＝＝＝＝*/
/* 反白顏色 -------------------- */
::-moz-selection {
    background-color:#A8DAE3;
    color: #ffffff;
}

::selection {
    background-color:#A8DAE3;
    color: #ffffff;
}

.path {display:none;}

/*大圖輪播按鈕*/
.bannerindex .swiper-pagination-bullets.swiper-pagination-horizontal {left: 6.5%;right: 0%;bottom: 50%;
    transform: translateX(-50%) rotate(90deg);width: fit-content;}
.bannerindex .swiper-pagination-bullet {width: 5px;height: 5px;display: inline-block;border-radius: 15px;
    background: #fff;opacity: 0.5;}
.bannerindex .swiper-pagination-bullet-active { width: 30px;height: 5px;opacity: 1;background: #fff;}


/*大圖/＝＝＝＝＝*/
/* =========================
   Banner 修正版
   第1層 員工
   第2層 後景雲
   第3層 波浪+文字
   ========================= */

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

/* 底圖 */
.bannerindex .swiper-slide > img {
    position: relative;
    z-index: 1;
    width: 100%;
    display: block;
}

/* 複合層：後景雲 + 波浪文字 (使用 ::before) */
.bannerindex .swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background-image: 
        url("https://pic03.eapple.com.tw/jingguli/01cover-ban2.png"), /* 後景雲 */
        url("https://pic03.eapple.com.tw/jingguli/wave+slogan1.png"); /* 波浪+文字 */

    background-repeat: 
        repeat-x, 
        no-repeat;

    background-size: 
        auto 100%, 
        cover;

    background-position: 
        0 bottom, 
        center center;

    /* 後景雲動畫 */
    animation: cloudBackLoop 100s linear infinite;
}

/* 第二張圖片的背景組合 */
.bannerindex .swiper-slide:nth-child(2)::before {
    background-image: 
        url("https://pic03.eapple.com.tw/jingguli/01cover-ban2.png"), 
        url("https://pic03.eapple.com.tw/jingguli/wave+slogan2.png");
}

/* 員工圖層 (使用 ::after) - 移除前景雲，僅保留員工 */
.bannerindex .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;

    background-image: url("https://pic03.eapple.com.tw/jingguli/staff1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* 移除 cloudFrontLoop 動態，讓員工保持固定 */
}

/* 第二張的員工圖 */
.bannerindex .swiper-slide:nth-child(2)::after {
    background-image: url("https://pic03.eapple.com.tw/jingguli/staff2.png");
}

/* 後景雲動畫保持不變 */
@keyframes cloudBackLoop {
    0% {
        background-position: 0 bottom, center center;
    }
    100% {
        background-position: -800px bottom, center center;
    }
}

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


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

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

.ProdFilter_Item_Show { width: 100%;}
.Prods_Menulists { width: 100%; padding: 0;}
.Prods_Wrap { width: calc(100% - 270px);}

/* 篩選器-左手邊 / 產品分類-上面
.ProdFilter_ { order: 2;}
.Prods_Menulists { order: 1;}
.Prods_Wrap { order: 3;}
.ProdFilter_ { width: 250px; letter-spacing: 1px;}
.ProdFilter_ li { width: 100%;}
.ProdFilter_ li > a { background: #f3f3f3; border: none; border-bottom: 3px #ddd solid;}
.ProdFilter_ dl { position: static; width: 100%; display: block;}
*/

/* 產品分類-左手邊 / 篩選器-上面 */

.ProdFilter_ { order: 1; margin-bottom: 25px;}
.Prods_Menulists { order: 2;}
.Prods_Wrap { order: 3;}
.Prods_Menulists { width: 250px; letter-spacing: 1px;}
.Prods_Menulists ul {}
.Prods_Menulists > ul > li { width: 100%; flex-wrap: wrap;}
.Prods_Menulists ul ul { position: static; border: none;}
.Prods_Menulists ul li ul li {}
.Prods_Menulists li.has-sub.open > a {}

.product_info_page .half_box { width: 100%; float: none; padding-right: 0;}
.product_info_page .half_box li.btn_blankTop { margin-top: 50px; justify-content: space-between; display: flex;}
.product_info_page .half_box li.btn_blankTop input { width: calc(50% - 10px); background-image: none; padding: 0; text-align: center;}

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
.product_main { display: block; width: 100%;}    
.sidebarBtn { display: block; width: 100%;}
}
@media screen and (max-width: 980px) {
}
@media screen and (max-width: 768px) {
/* 篩選器-左手邊 / 產品分類-上面
.Prods_Wrap { width: 100%;}
.ProdFilter_ { width: 100%;}
.ProdFilter_Item_Show { width: calc(100% - 110px);}
.ProdFilter_ { order: 1;}
.Prods_Menulists { order: 2;}
.ProdFilter_ li > a span { color: #333;}
*/

.Prods_Wrap { width: 100%; margin-top: 20px;}
.ProdFilter_ { width: 100%;}
.Prods_Menulists { opacity: 0; display: none;}

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


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

/* 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);}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*相簿/＝＝＝＝＝*/

/* 1. 外層瀑布流容器：關閉原本的網格，啟用雙排瀑布流 */
body.album_info_page #content ul.pic-list {
    display: block !important;
    column-count: 2 !important;        /* 嚴格限制為兩排 */
    column-gap: 20px !important;       /* 左右兩欄之間的間距 */
    padding: 0 !important;
    margin: 20px auto !important;
    width: 100% !important;
}

/* 2. 核心破解：強制取消所有層級的「正方形」與高度限制 */
body.album_info_page .pic-list li.item,
body.album_info_page .pic-list .item a,
body.album_info_page .pic-list .item figure.show_pic,
body.album_info_page .pic-list .item .show_pic img {
    height: auto !important;           /* 殺掉所有固定高度 */
    min-height: 0 !important;          /* 防止被設定最小高度 */
    max-height: none !important;
    padding-top: 0 !important;         /* 殺掉可能用來撐開正方形的內距 */
    padding-bottom: 0 !important;      /* 殺掉可能用來撐開正方形的內距 */
    aspect-ratio: auto !important;     /* ⚠️ 關鍵：徹底解除現代 CSS 的正方形比例限制 */
}

/* 3. 徹底消滅模板可能用來暗中撐開正方形的「偽元素」留白 */
body.album_info_page .pic-list li.item::before,
body.album_info_page .pic-list li.item::after,
body.album_info_page .pic-list .item a::before,
body.album_info_page .pic-list .item a::after,
body.album_info_page .pic-list .item figure.show_pic::before,
body.album_info_page .pic-list .item figure.show_pic::after {
    content: none !important;
    display: none !important;
    padding: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

/* 4. 項目容器：讓它變成純粹的流動區塊，圖片有多長，格子就只到那裡 */
body.album_info_page .pic-list li.item {
    display: inline-block !important;  /* 瀑布流必備，緊密貼合不切斷 */
    width: 100% !important;            /* 寬度填滿單欄 */
    float: none !important;
    
    /* 暴力解除後台 JavaScript 自動計算並寫死在標籤上的定位與高度干擾 */
    position: relative !important;     
    top: auto !important;
    left: auto !important;
    transform: none !important;        
    
    margin: 0 0 20px 0 !important;     /* 這裡控制「上下張圖片」之間的間距（可自由調整） */
    break-inside: avoid !important;    /* 防止截圖在中間被裁切跨欄 */
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
}

/* 5. 圖片本體：寬度撐滿欄位，高度完全依據您的長條圖原圖比例自然延伸 */
body.album_info_page .pic-list .item .show_pic img {
    display: block !important;
    width: 100% !important;            
    height: auto !important;           
    max-width: 100% !important;
    object-fit: unset !important;      /* 解除任何裁切或置中縮放設定 */
    vertical-align: top !important;    
}

/* 6. 強制隱藏沒用到的空白標題 */
body.album_info_page .pic-list li.item h6 {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media screen and (max-width: 768px) {
    body.album_info_page #content ul.pic-list {
        column-count: 1 !important;    /* 手機版強制改成一排，讓長條圖能看得更清楚 */
    }
}

/*相簿頁碼/＝＝＝＝＝*/
/* 1. 確保每個列表項目（li）橫向排開 */
ul.page li {
    display: inline-block !important;
    margin: 0 5px;
    vertical-align: middle;
}

/* 2. 防止「上一頁」與「下一頁」因固定寬度限制而變成直式文字 */
ul.page li.pre_page, 
ul.page li.next_page {
    width: auto !important; /* 解除原本可能限制的固定寬度（例如 width: 30px） */
}

.page {color: #616161;font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;}

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


/*內頁BANNER 設定*/
.banner {}
.banner h5 {}
.banner.banA {}
.banner.banB {}
.banner.banC {}
.banner.banD {}
.banner.banE {}
.banner.banblog {}
.banner.banDesign { background-color:#616161;}

.banF {background-image: url(https://pic03.eapple.com.tw/jingguli/banner1.png);}
.banner.banblog {background-image: url(https://pic03.eapple.com.tw/jingguli/banner2.png);}
body.article_b .banner.banblog {background-image: url(https://pic03.eapple.com.tw/jingguli/banner3.png);}
.banE {background-image: url(https://pic03.eapple.com.tw/jingguli/banner4.png);}

/*內頁BANNER設定--------*/
.banner {
    min-height: 380px;
}
.banner h5 {
    display: flex;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    font-weight: 500;
    letter-spacing: 3px;
    font-size: 28px;
    color: #616161;
    margin: 90px auto 1vw 10vw;
    align-items: flex-start;
    flex-direction: column;
    line-height: 200%;
    z-index: 1;
    display:none;
}
.banner h5:after {
    display: block;
    color: #343434;
    font-size: 100px;
    font-weight: 100;
    line-height: 100%;
    order: -1;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    display:none;
}

.banF.banner h5:after {content: "Video";}
.banner.banblog h5::after {content: "Blog";}
.banner.banE h5::after {content: "Feedback";}
body.article_b .banner.banblog h5::after {
    content: "News";
}

@keyframes banner-scroll {
    0% {
        transform: translateX(0) scale(1.1);
    }
    100% {
        transform: translateX(-8%) scale(1);
    }
}

@keyframes banner-scroll2 {
    0% {
        transform: translateX(-15%) scale(1.3);
    }
    100% {
        transform: translateX(-22%) scale(1);
    }
}

/* RWD */
@media screen and (max-width: 1024px) {
/* .banner:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(90deg, #ffffffcc 530px, transparent);
    z-index: 0;
} */
.banner h5 {
    font-size: 25px;
}
.banner h5:after {
    font-size: 75px;
    line-height: 100%;
}
}
@media screen and (max-width: 600px) {
.banner:before {
    background: #ffffffab;
}
.banner h5 {
    font-size: 25px;
    margin: 100px auto auto 4vw;
}
.banner h5:after {
    font-size: 53px;
}
.banner.banblog:after , .banner.banB:after {
    background-position-x: center;
    animation: none;
}
.banner.banC:after , .banner.banE:after {
    background-position-x: right;
    animation: none;
}
}

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


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

.articel_mainPic img {display:none;}

/* --- 1. 外層列表容器 --- */
.blog_subbox {
    display: grid;
    grid-template-columns: 1fr; /* 強制一排一個 */
    gap: 20px; /* 文章之間的上下間距 */
}

/* --- 2. 單篇文章區塊 --- */
.blog_subbox .subbox_item {
    width: 100%;
    border-bottom: 1px solid #ddd; /* 底部加條淺色分隔線比較好看，若不需要可刪除 */
    padding-bottom: 20px;
}

/* --- 3. 內部排版 (左圖右文) --- */
.blog_subbox .subbox_item a {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start; /* 讓內容靠上對齊 */
    flex-wrap: nowrap; /* 確保圖片與文字在同一排 */
    text-decoration: none; /* 去除超連結底線 */
}

/* --- 4. 左側圖片區塊 (參考網站設定佔 30%) --- */
.blog_list_le {
    width: 30%;
    flex-shrink: 0; /* 確保圖片區塊不會被擠壓 */
    overflow: hidden; 
}

.blog_list_le img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* --- 5. 右側文字區塊 (參考網站設定佔餘下空間) --- */
.blog_list_ri {
    width: 70%;
    padding: 0 0 0 30px; /* 左側留白，與圖片拉開距離 */
    display: flex;
    flex-direction: column;
}

/* --- 6. 文字樣式還原 (與參考站點相同) --- */
.blog_list_ri h5 {
    font-size: 24px;
    color: #555;
    margin: 0 0 10px 0;
    line-height: 1.4;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
}

.blog_list_ri em {
    color: #777;
    font-size: 14px;
    margin-bottom: 15px;
    display: block;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    letter-spacing: 1px;
}

.blog_list_ri p {
    margin: 0;
    line-height: 180%;
    color: #616161;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    letter-spacing: 0.25px;
}

/* --- 7. 手機版適應 (RWD) --- */
/* 當螢幕小於 768px 時，左圖右文自動變成上下排列 */
@media screen and (max-width: 768px) {
    .blog_subbox .subbox_item a {
        flex-direction: column;
    }
    .blog_list_le {
        width: 100%;
        margin-bottom: 15px;
    }
    .blog_list_ri {
        width: 100%;
        padding: 0;
    }
    .blog_list_ri h5 {
        font-size: 20px; /* 手機版標題稍微縮小 */
    }
}

.subbox_item a:before {
    top: 50%;
    left: 50%;
	bottom:unset;
	right:unset;
    transform: translate(-50%, -50%);
    letter-spacing: 2px;
	font-size: 18px;
	font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    font-weight:450;
}

/*側邊*/
.blog_le .accordion {
    border: unset;
    border-radius: 0px;
}
.blog_le .accordion > li{transition:all 0.1s;/* border-bottom: 1px solid #c5bcb4; */}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category {    background: #658ec5 !important;}
.submenu a:hover {background: unset;color: #658ec5;}

.page li.activeN, .page a:hover {
    background: #658ec5;;
    color: #ffffff;
}

h5.blog_le_t {
    font-size: 24px;
    font-weight: 500;
    color: #616161;
    font-family: serif;
    letter-spacing: 2px;
    margin-bottom: 7px;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
}
.accordion li .link a {
    cursor: pointer;
    display: block;
    padding: 15px 10px;
    color: #616161;
    font-size: 14px;
    font-weight: 500;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    letter-spacing: 1px;
}

/* .articel_mainPic img {display:none;} */

.lastPage {
    font-size: 16px;
    color: #ffffff;
    background: #658ec5;
    transition: all 0.3s;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;

}
.lastPage:hover {
    font-size: 16px;
    color: #ffffff;
    background: #f2aeaf;
}

.news_related_list li > a p {
    font-size: 15px;
    color: #343434;
    line-height: 1.5;
    padding:10px;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    transition: all 0.3s;
}
.news_related_list li a:hover p{color: #EC8688}

.edit { /*font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;*/ }

.blog_back a {
    font-size: 15px;
    color: #ffffff;
    display: block;
    padding: 7px 15px;
    width: 100%;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    transition: all 0.3s;
}
.blog_back a.article_btn_prev { background:#59B9CA;}
.blog_back a.article_btn_back { background:#658ec5;}
.blog_back a.article_btn_next { background:#59B9CA;}

.news_related_list li > a figure {display:none;}

/* ============================================================
   針對 body 帶有 article_b 的頁面進行專屬 Grid 排版 (無圖片版本)
   ============================================================ */

/* 1. 設定外層格線排版 */
body.article_b .blog_subbox {
    margin: 0 auto;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr; /* 電腦版 4 欄 */
}

/* 2. 徹底隱藏圖片區塊 */
body.article_b .blog_list_le {
    display: none !important;
}

/* 3. 卡片與文字區塊調整 */
body.article_b .subbox_item {
    background-color: transparent;
    width: 100%;
    /* 純文字排版有時會比較單調，可以加一點底線區隔，不需要可刪除 */
    border-bottom: 1px solid #e0e0e0; 
    padding-bottom: 20px;
}

body.article_b .subbox_item a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

body.article_b .blog_list_ri {
    width: 100%;
}

/* 4. 標題與日期並排設定 */
body.article_b .blog_list_ri h5 {
    display: inline-block;
    margin: 0 10px 10px 0; /* 右側留白給日期 */
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    vertical-align: baseline;
}
body.article_b .blog_list_ri em {
    display: inline-block;
    margin: 0 0 10px 0;
    color: #888;
    font-size: 13px;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    vertical-align: baseline;
}

body.article_b .blog_list_ri p {
    margin: 0;
    padding-top: 0;
}

/* 加入 READ MORE 樣式 */
body.article_b .blog_list_ri:after {
    content: 'READ MORE >';
    display: block;
    background: transparent;
    color: #658ec5;
    letter-spacing: 1px;
    opacity: 1;
    left: 0;
    position: relative;
    padding: 0 22px 0 0;
    margin-top: 20px; /* 增加與上方內文的間距 */
    font-size: 12px;
    line-height: 12px;
}




/* 4. RWD 響應式設定 */
@media screen and (max-width: 1200px) {
    body.article_b .blog_subbox {
        grid-template-columns: 1fr 1fr; /* 平板版 2 欄 */
    }
}

@media screen and (max-width: 600px) {
    body.article_b .blog_subbox {
        grid-template-columns: 1fr; /* 手機版 1 欄 */
    }
}


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


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


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


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


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

/*案例影片*/
.video_menu_list+.video-list {
    max-width: calc(100% - 270px);
}

.video-list {
    display: grid;
    /* 將自動填滿改為固定 2 個等比例欄位 (1fr) */
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px 20px;
    width: 100%;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif
}

/* 1. 給圖片外框一個黑色底。
      這是關鍵！這樣等一下圖片變半透明時，才會透出黑色，產生「變暗」的視覺效果 */
.video-list .vidCover {
    background: #616161;
    border-radius: 5px; /* 看你需要不要圓角，參考網站是 5px */
    overflow: hidden;
    margin: 0;
}

/* 2. 讓 a 連結裡面的「所有元素」都帶有 0.6 秒的平滑轉場 */
.video-list .vid_item a * {
    transition: all 0.6s ease;
}

/* 3. 滑鼠懸停時，讓「圖片」、「標題」、「描述」同時變半透明 */
.video-list .vid_item a:hover img, 
.video-list .vid_item a:hover .vidTitle, 
.video-list .vid_item a:hover .vidDesc {
    opacity: 0.6;
}

/* 4. 強制圖片尺寸不動 (這是參考網站裡面的寫法，用來抵銷掉其他地方可能設定的圖片放大效果) */
.video-list .vid_item a:hover .vidCover img {
    transform: scale(1);
}

/* ==========================================
   外層排版 (選單與列表左右並排)
   ========================================== */
.show_content.video_content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* ==========================================
   左側分類選單 (.video_menu_list & .video-layer-two)
   ========================================== */
.video_menu_list {
    width: 300px;
}

.video_menu_list > h5 {
    line-height: 1.5;
    text-transform: uppercase;
    color: #2A62AE; /* 參考站為白字，這裡改深色 */
    position: relative;
    width: 100%;
    display: block;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 10px 5px 10px 15px; /* 左側留 32px 給箭頭圖示空間 */
    border-bottom: 1px solid #d6d6d6;
    font-size: 16px;
}

.video_menu_list > ul {
    gap: 0;
}

/* 分類列表：分隔線 */
.video-layer-two > li {
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
}

/* 分類列表：間距與字體設定 */
.video-layer-two li a {
    display: block;
    transition: all 0.3s;
    line-height: 1.2;
    letter-spacing: 0.8px;
    padding: 17px 15px; /* 參考站上下 17px 的舒適間距 */
    position: relative;
    font-size: 14px;
    color: #666;
    font-weight: 500; /* 加粗 */
    background: transparent;
    border: 0;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    }
    
/* 分類 Hover 顏色 */
.video-layer-two li a:hover,
.video-layer-two > li.active > a {
    color: #EC8688; 
}

/* ========================================== */
/* 扣除左邊 300px，加上中間留 60px 的空隙 = 360px */
.video_menu_list + .video-list {
    max-width: calc(100% - 360px);
}

.video_page .main_part {
    max-width: 1300px;
}

/* 標題與描述間距比照參考站 */
.video-list .vidTitle {
    font-weight: 500;
    margin: 15px 0 5px; /* 參考站的 margin 設定 */
    font-size: 18px;
    color: #454545;
}

.video-list .vidDesc {
    line-height: 1.8;
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #616161;
    padding: 5px 0;
    max-height: fit-content;
    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
}

/* ==========================================
   RWD 手機版設定 (< 768px)
   ========================================== */
@media screen and (max-width: 768px) {
    .show_content.video_content {
        flex-direction: column;
    }
    .video-list, 
    .video_menu_list, 
    .video_menu_list + .video-list {
        max-width: 100%;
        width: 100%;
    }
    .video_menu_list {
        margin-bottom: 30px;
    }
    .video-list {
        grid-template-columns: 1fr;
    }
}

/* 手機版 (寬度小於 768px 時) 改為一個一排 */
@media (max-width: 768px) {
    .video-list {
        grid-template-columns: 1fr; 
    }
}


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

/*聯絡我們*/
.contact_editbox { padding: 0px;}
.contact_content {display:none;}

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

@media screen and (max-width: 1024px) {
/*大圖/＝＝＝＝＝*/
/*預設解除背景輪播*/
.bannerindex {position:static;height:auto;padding-bottom: 0%;}
.swiper-banner { position:static; margin:0; height:auto;}    

/* 修正第一與第二張：後景雲 + 波浪文字 */
    .bannerindex .swiper-slide::before {
        /* 將尺寸改為等比例 (100% auto) */
        background-size: auto 100%, 100% auto !important; 
        
        /* 關鍵：強制對齊上方 (top)，確保與 img 同步起點 */
        background-position: 0 top, center top !important; 
    }

    /* 修正第一張：員工圖層 */
    .bannerindex .swiper-slide::after {
        background-size: 100% auto !important;
        background-position: center top !important; 
    }

    /* 修正第二張：員工圖層 (避免動畫交錯時與第一張設定衝突) */
    .bannerindex .swiper-slide:nth-child(2)::after {
        background-size: 100% auto !important;
        background-position: center top !important; 
    }
    
}



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

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

/*Header/＝＝＝＝＝*/
.main_header_area{transform: none !important;}
.navigation {padding: 0px;}
    
/*Footer/＝＝＝＝＝*/
.footer {aspect-ratio: 4 / 3;}
.footer::before {background-position: center bottom; }

/*側邊選單/＝＝＝＝＝*/
.stellarnav > ul > li > a::after {display:none;}
.stellarnav > ul > li > a::before {content: none;}
.stellarnav .menu-toggle {padding: 10px;}

.stellarnav>ul>li>a {
    margin: 0 10px;
    letter-spacing: 1px;
    font-size: 15px;
    color: #616161;
    padding: 50px 0px 30px;
    transition: all 0.5s ease;
}
.header_area .stellarnav > ul > li:hover > a{color:#2A62AE;}

.stellarnav>ul>li:after {
    content: '';
    position: absolute;
    right: 0px;
    bottom: 8px;
    width: 1px;
    height: 15px;
    border-left: 2px #2A62AE dotted;
}

.stellarnav>ul>li:nth-last-child(1):after {
    display: none
}

.stellarnav>ul>li>a:not(.dd-toggle):before {
    content: '';
    position: absolute;
    left: 50%;
    top: 36%;
    width: 42px;
    height: 42px;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.5s ease;
    transform: translate(-50%, -50%) scaleX(1);
}

.stellarnav>ul>li>a:hover:before {
    animation: sticker-bounce 0.8s ease-out;
}

    
.stellarnav > ul > li:after {
    display: none;
}

/*側邊選單icon調整/＝＝＝＝＝*/
    /*主選單***********/
    .stellarnav ul {
        opacity: 1;
        pointer-events: all;
    }
    .stellarnav>ul>li>a:not(.dd-toggle):before {
        left: 30px;
        top: 50%;
        width: 41px;
        height: 41px;
    }
    .stellarnav.mobile.left>ul {
        max-width: 75%;
        padding: 0px;
        background: #ffffff;
        top: -1px;
    }
    .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(60px);
        /* transition: all .5s; */
        opacity: 0;
        min-height: 20px;
        padding: 20px 5px 20px 70px;
    }
    .stellarnav.left.mobile.active>ul>li>a {
        transform: translate(0px);
        /* transition: all .7s; */
        opacity: 1;
    }
    /* .stellarnav.mobile>ul>li>a.dd-toggle {
        top: 20px;
    } */
    
    /* .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.left.mobile.active>ul>li:nth-of-type(8)>a {
        transition-delay: 1.8s;
    }
    .stellarnav.left.mobile.active>ul>li:nth-of-type(9)>a {
        transition-delay: 2.1s;
    } */
    /*選單-主分類***********/
    .stellarnav.mobile li.open {
        background: #f7f7f7;
        padding: 10px;
        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;
        /* transition: .6s; */
        font-size: 14px;
        color: #616161;
        letter-spacing: 1px;
    }
    .stellarnav.mobile li.open li a:not(.dd-toggle):before {
        content: '►';
        position: absolute;
        color: #2A62AE;
        font-size: 11px;
        transform: translateY(-50%);
        /* transition: all .5s; */
        opacity: 1;
        top: 50%;
        left: 20px;
    }
    .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 #2A62AE;
    }
    .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 #e1e1e1;
        border-radius: 10px;
        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;
    }

.stellarnav.mobile > ul > li > a.dd-toggle {
    padding: 0;
    margin: 0;
    width: 50px;
    height: 60px; 
    position: absolute;
    top: 0;     
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: none !important;
}

.stellarnav li li {border: none;border-bottom: 1px #eeeeee solid;}

#bottom_menu li a em {font-family: "Chiron GoRound TC", sans-serif;}

/*滾動條/＝＝＝＝＝*/
/* 捲軸寬度及高度 */
::-webkit-scrollbar {
    width: 7px;
    /*右側捲軸寬度*/
    height: 0px;
    /*下方捲軸高度*/
}


    
/*隱藏大圖輪播按鈕/＝＝＝＝＝*/
.bannerindex .swiper-pagination-bullet {opacity: 0!important;}

/*大圖顯示比例設定/＝＝＝＝＝*/
.bannerindex .swiper-banner{height: 100%;}
.bannerindex .swiper-banner .swiper-slide img{transform-origin: left center;/* height: 100%; */object-fit: cover;}
.bannerindex {padding-bottom: 51%;}
.bannerindex .swiper-banner .swiper-slide:before{margin-top: 5px;}
.bannerindex .swiper-banner .swiper-slide:after{margin-top: 5px;}

.banner {
        min-height: unset;    
        width: 100%;              /* 確保寬度隨手機螢幕滿版 */
        aspect-ratio: 1527 / 800;
        /* 確保背景圖片完美貼合、不變形 */
        background-size: cover;
        background-position: center;
    }
    
/* .bannerindex .swiper-slide::before {
    background-image: 
        url("https://pic03.eapple.com.tw/jingguli/01cover-ban2.png"),
        url("https://pic03.eapple.com.tw/jingguli/wave+slogan1-mobile.png");
}
.bannerindex .swiper-slide:nth-child(2)::before {
    background-image: 
        url("https://pic03.eapple.com.tw/jingguli/01cover-ban2.png"), 
        url("https://pic03.eapple.com.tw/jingguli/wave+slogan2-mobile.png");
}
.bannerindex .swiper-slide::after {
    background-image: url("https://pic03.eapple.com.tw/jingguli/staff1-mobile.png");
}
.bannerindex .swiper-slide:nth-child(2)::after {
    background-image: url("https://pic03.eapple.com.tw/jingguli/staff2-mobile.png");
} */
    

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