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

.nav-brand {
    display: block;
    max-width: 170px;
    margin: 0 auto;
}

/* .header_area.sticky .nav-brand img {
    content: url('https://pic03.eapple.com.tw/arielchenmagic/LOGO_1.png');
    transition:all 0.3s;
} */

/*Main/＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#content_main {width: 100%;min-height: 80vh;margin-top: 0vh;background: #0b0809;}
#content {
    /* background:#0d0b0a;  */
    background: url(https://pic03.eapple.com.tw/arielchenmagic/background.png);
    background-repeat: repeat;
    background-position: top left;
}

/*進場/＝＝＝＝＝*/
body {
    overflow-x: hidden;
    width: 100%;
}

/* 利用偽元素製作兩層色塊，模擬牌組抽離 */
body.pageIndex::before, body.pageIndex::after {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99999; /* 提高到極大值 */
    pointer-events: none;
}

/* 第一張「牌」：深紅色 */
body.pageIndex::before {
    background: #4a0404; /* 暗紅，魔術經典色 */
    animation: cardOutLeft 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

/* 第二張「牌」：黑色，帶有閃爍感 */
body.pageIndex::after {
    background: #000;
    animation: cardOutRight 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

/* 網頁主內容淡入 */
/* 將動畫改掛在內容元件上 */
.pageIndex .bannerindex, 
.pageIndex #content_main, 
.pageIndex .footer {
    animation: contentFadeIn 2s ease-out forwards;
}
/* 確保 header 一開始就是可見的，或者想要它另外有動畫也可以 */
.pageIndex.header_area {
    /* 如果 header 也要淡入，可以單獨寫，不要加 filter:blur 以策安全 */
    animation: headerFadeIn 2s ease-out forwards;
}

@keyframes headerFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes cardOutLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes cardOutRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

@keyframes contentFadeIn {
    0% { opacity: 0; filter: blur(10px); }
    50% { opacity: 0; }
    100% { opacity: 1; filter: blur(0); }
}

/*Banner/＝＝＝＝＝*/


/* 1. 初始狀態：固定在頂部，但向上位移隱藏，並設定過渡動畫 */
.header_area {
    position: fixed;
    top: -150px;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: top 0.4s ease-in-out, background 0.3s; /* 讓掉下來的動作變平滑 */
    background: transparent;
}

/* 2. 當捲動觸發時，JavaScript 會加上 .sticky 這個 class */
.header_area.sticky {
    top: 0; /* 回到頂部出現 */
    background: rgba(0, 0, 0, 0.8) !important; /* 加上半透明背景，避免擋住文字 */
    backdrop-filter: blur(10px);
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.5);
}


/*主選單/＝＝＝＝＝*/
.stellarnav > ul > li > a {
    font-family: "Noto Sans TC", sans-serif;
    letter-spacing: 2px;
    font-size: 14px;
    color: #aaaaaa;
    margin: 0 17px;
}
/*第一層*********************************************************************/
/*選單*/
.stellarnav > ul > li{border-right: 1px solid #343a40;padding: 0px 10px;height: 20px;}
.stellarnav > ul > li > a{line-height: 20px;height: 20px;transition: 0.3s;}
.stellarnav li.has-sub > a:after{content: '+';border-left: none;border-right: none;border-top: none;top: 45%;}
.stellarnav>ul>li>a:hover{transition: 0.3s;color:#cbcbcb;}

/*子選單/＝＝＝＝＝*/
/* ============================================================ */
/* 子選單修正 - 拉開距離、縮小尺寸、字體同步主選單 */
/* ============================================================ */

/* 1. 修正消失問題並加入進場動畫 */
.stellarnav li.has-sub {
    position: relative;
}

/* 將子選單整體往下推，拉開與主選單的距離 */
.stellarnav li.has-sub > ul {
    position: absolute;
    top: calc(100% + 15px); /* 距離主選單 15px，可在此增減距離 */
    left: 0;
    margin-top: 0;
    padding: 8px 0; /* 縮小上下留白，讓整體不那麼大格 */
    z-index: 9999;
    
    /* 初始隱藏狀態 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* 深色漸層底與頂部金線 */
    background: linear-gradient(180deg, #0b0809 0%, #1a1012 100%);
    border-top: 1px solid #c09433;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 15px rgba(192, 148, 51, 0.05);
    min-width: 140px; /* 縮小整體寬度 */
    border-radius: 0 0 4px 4px;
}

/* 專門針對大選單獨立設定，覆寫上面的 15px */
.stellarnav.desktop li.bigMenu > ul {
    top: calc(100% + 0px); /* 距離縮小，讓大選單貼近主選單 */
}

/* Hover 時顯示子選單 */
.stellarnav li.has-sub:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 隱形感應橋樑：填補那 15px 的空隙，確保滑鼠往下移不會斷掉 */
.stellarnav li.has-sub > ul::before {
    content: "";
    position: absolute;
    top: -15px;  /* 向上覆蓋剛剛推開的 15px 距離 */
    left: 0;
    width: 100%;
    height: 40px;
    background: #00000000;
}

/* 重置子選單 li，避免繼承第一層高度導致擠壓 */
.stellarnav li.has-sub > ul > li {
    border: none;
    padding: 0;
    height: auto;
    position: relative;
}

/* 2. 字體同步主選單與縮小格數 */
.stellarnav li.has-sub > ul > li > a {
    display: block;
    height: auto;
    line-height: 1.5;
    padding: 8px 20px; /* 縮小單格空間，變得更緊湊 */
    
    /* 完整同步主選單設定 */
    font-family: "Noto Sans TC", sans-serif;
    font-size: 14px; 
    letter-spacing: 2px;
    color: #aaaaaa; 
    
    margin: 0; /* 歸零主選單的左右 margin */
    transition: all 0.3s ease;
    text-align: left;
    position: relative;
}

/* 3. Hover 動效：左側光暈指示線 + 文字向右微動 */
.stellarnav li.has-sub > ul > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 0; 
    background: #c09433;
    transition: all 0.3s ease;
    box-shadow: 0 0 8px rgba(192, 148, 51, 0.6);
}

.stellarnav li.has-sub > ul > li > a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.02);
    padding-left: 26px; /* 配合變小的格子，文字位移幅度稍微縮小 */
}

.stellarnav li.has-sub > ul > li > a:hover::before {
    height: 100%;
}

/*Footer/＝＝＝＝＝*/
/*Footer/＝＝＝＝＝*/
.footer {
    background: #0c0a0b;
    background-image: url(https://pic03.eapple.com.tw/arielchenmagic/footer_bg.png);
    font-family: "Noto Sans TC", sans-serif;
    padding-top: 50px;
    box-shadow: 1px 1px 15px rgba(38, 15, 1, .2);
}
/* .footer_info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-right: 0px;
}
 */

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

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

.footer_logo {
    max-width: 250px;
    text-align: center;
    z-index: 1;
}

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

.footer_info li p {color: #9d9d9d;}
.footer_info li p a {    color: #9d9d9d;transition: all 0.5s ease;}
.footer_info li p:hover a {color: #c09433;}

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

.footer_menu a {
  color: #9d9d9d;
  letter-spacing: 1px;
  position: relative;
  padding: 1px 1px 1px 0px;
  text-align: center;
  transition: all 0.5s ease;
  background: #f0f0f000;
  border: 1px #cccccc00 solid;
}

.footer_menu a:hover {
  color: #c09433;
  background: #f0f0f000;
}

.footer_info ul>li:before {
    font-size: 115%;
    color: #a59886;
    display: block;
    margin: 0 0 20px;
    border-bottom: 1px solid #6b665e;
    padding-bottom: 10px;
    letter-spacing: 0.1em;
    font-weight: bold;
}
.footer_info ul>li:nth-child(1):before { 
    content: "CONTACT"; 
    font-family: "Playfair Display", serif;
    font-weight: 500;
}
.footer_info ul>li:nth-child(2):before { 
    content: "SITEMAP"; 
    font-family: "Playfair Display", serif;
    font-weight: 500;
}

.footer_menu a:before { content: "·"; }

/*Copy/＝＝＝＝＝*/
.copy {
    font-family: "Noto Sans TC", sans-serif;
    border-top: 1px solid #252525;
    padding: 20px;
    font-size: 10px;
    margin-top: 40px;
    /* background: #0c0a0b; */
    color: #575757;
    letter-spacing: 1px;
}
.copy a {color: #575757;transition: all 0.5s ease;} 
.copy a:hover {color: #c09433;}

.privacyLinks a+a {
    border-left: 1px solid #424242;
}

/* 資訊 ----------*/

/* 資訊 ----------*/

/* 按鈕 ---------- */
.tp_links {display:none;}
.box_link {display:none;}

/*大圖輪播按鈕*/
.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: 10px;height: 5px;opacity: 1;background: #fff;}


/* 隱藏回到首頁按鈕 ---------- */
/* 隱藏 Footer 內的「回首頁」與「首頁」按鈕 */
.footer_menu a:nth-child(1), 
.footer_menu a:nth-child(2) {
    display: none !important;
}
/* 隱藏 Header 內的「首頁」按鈕 */
.anchorList li a[href="http://work158.ykqk.idv.tw"] {
    display: none !important;
}
.anchorList li:has(a[href="http://work158.ykqk.idv.tw"]) {
    display: none !important;
}


/* icon ---------- */

/*滾動條/＝＝＝＝＝*/
/* 捲軸寬度及高度 */
::-webkit-scrollbar {
    width: 5px;
    height: 0px;
}
/* 軌道背景底色 */
::-webkit-scrollbar-track {
    background-color:#1f1f1f;
}
/* 滑桿顏色 */
::-webkit-scrollbar-thumb {
    background-color: #363636;
}
/* 滑桿滑鼠滑入時的顏色 */
::-webkit-scrollbar-thumb:hover {
    background: #5E0300;
}

/*反白/＝＝＝＝＝*/
/* 反白顏色 -------------------- */
::-moz-selection {
    background-color:#6e6e6e;
    color: #f8f8f8;
}

::selection {
    background-color:#6e6e6e;
    color: #f8f8f8;
}

/*其他/＝＝＝＝＝*/
.sb_marquee{display:none;}

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

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

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


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

.product_page .show_content,
.product_info_page .show_content { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;}
.product_page .product_menu_list { position: relative; width: 220px; letter-spacing: 1px; /*border-right: 1px solid #ccc;*/min-height: 30vw;}
.product_page .products-list,
.product-wrapper { width: calc(100% - 270px);}
ul.page { width: 100%;}

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

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

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

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

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


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


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

.banner {
    position: relative;
    height: 700px;
    background: var(--sub3-color);/*未設定頁背景*/
}

/*漸層*/
.banner:after {
    content: '';
    position: absolute;
    /* background: linear-gradient(to top, #ffffff 10%, transparent 100%) ; */
    display: block;
    width: 100%;
    height: 400px;
    bottom: 0;
    left: 0;
    z-index: 1;
}

/*預設*/
.banner.banB,
.banner.banC,
.banner.banD,
.banner.banE,
.banner.banF,
.banner.banblog{
    background: url(https://pic03.eapple.com.tw/arielchenmagic/banner1.png)center no-repeat;
    background-size: cover;
    z-index: 99;
}

.banner.banF{
    background: url(https://pic03.eapple.com.tw/arielchenmagic/banner2.png)center no-repeat;
    background-size: cover;
    z-index: 99;
}

.banner.banblog{
    background: url(https://pic03.eapple.com.tw/arielchenmagic/banner3.png)center no-repeat;
    background-size: cover;
    z-index: 99;
}

.banner.banC {
    background: url(https://pic03.eapple.com.tw/arielchenmagic/banner4.png)center no-repeat;
    background-size: cover;
    z-index: 99;
}

/*頁面標題 ----------*/
.banner h5 {
    position: absolute;
    z-index: 999;
    font: 500 23px/1 "Noto Sans TC";
    letter-spacing:.4rem;
    color: #040301;
    bottom: 10%;
    z-index: 99;
}

/*英文標題*/
.banner h5:after {
    content: "Gallery";
    display: block;
    position: relative;
    font-family: "Cinzel Decorative", serif;
    font-weight: 400;
    font-size: 105px;
    line-height: 1.25;
    /* background: var(--gradient); */
    color: #ffffff;
    /* background-clip: text;
    text-transform: uppercase; */
    letter-spacing: .1rem;
}

.banner.banF h5:after {
    content: 'Showcase';
}

.banner.banblog h5:after {
    content: 'News';
}

.banner.banC h5:after {
    content: 'Contact';
}

.audiowide-regular {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-style: normal;
}

@media screen and (max-width: 768px) {
    .banner {
        height: 300px;
    }
    .banner h5:before{
        font-size: 15vw;
    }
    .banner:after{
        height: 250px;
    }

}

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


/*內頁BANNER 設定*/
.banner {background:#0d0a0a;}
.banner h5 {color:#fff;}
.banner.banA {}
.banner.banB {}
.banner.banC {}
.banner.banD {}
.banner.banE {}
.banner.banblog {}



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


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

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
   最新消息 (Blog Page) - 國際精品直式網格 (3排 / 極簡靜態 Hover)
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/* 1. 全區字體與底色 */
body.blog_page, 
body.blog_page * {
    font-family: "Noto Sans TC", sans-serif;
}

body.blog_page #content {
    /* background: #0d0b0a; */
    color: #cccccc;
    background: url(https://pic03.eapple.com.tw/arielchenmagic/background.png);
    background-repeat: repeat;
    background-position: top left;
}

body.blog_page .main_part {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* 2. 麵包屑導覽 */
body.blog_page .path p {
    font-size: 12px;
    letter-spacing: 2px;
    color: #555;
    margin-bottom: 50px;
}
body.blog_page .path a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}
body.blog_page .path a:hover {
    color: #fff;
}

/* 3. 左右版面分欄設定 */
body.blog_page .show_content.blog_box {
    display: flex;
    align-items: flex-start;
    gap: 50px; /* 稍微縮小左右間距，給右邊三個排多點空間 */
}

/* --- 左側邊欄 (Sidebar) --- */
body.blog_page .show_content .blog_le {
    flex: 0 0 220px; /* 縮小側邊欄，確保右側能完美放下三欄 */
}

body.blog_page .show_content .blog_le_t {
    color: #ffffff;
    font-size: 16px;
    letter-spacing: 4px;
    font-weight: 300;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #222222;
}

body.blog_page .show_content .blog_le_t .news_menu_toggle {
    display: none; 
}

/* 搜尋框 (Search Box) */
body.blog_page .show_content .blog_search {
    margin-bottom: 40px;
}
body.blog_page .show_content .blog_search form {
    position: relative;
    display: flex;
}
body.blog_page .show_content .blog_search input[type="search"] {
    width: 100%;
    background: #111111;
    border: 1px solid #222222;
    color: #ffffff;
    padding: 12px 40px 12px 15px;
    font-size: 14px;
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease;
    -webkit-appearance: none;
}
body.blog_page .show_content .blog_search input[type="search"]:focus {
    border-color: #c09433;
    background: #161312;
    box-shadow: 0 0 12px rgba(192, 148, 51, 0.2);
}

body.blog_page .show_content .blog_search input[type="submit"] {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    cursor: pointer;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-size: 15px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
body.blog_page .show_content .blog_search input[type="submit"]:hover {
    opacity: 1;
}

/* 4. 分類選單 (Accordion) - 極度安靜的高級感 */
body.blog_page .show_content .accordion {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px #cccccc57 solid;
    border-radius: 5px;
}
body.blog_page .show_content .accordion li {
    /* margin-bottom: 5px; */
}
body.blog_page .show_content .accordion .link a {
    display: block;
    position: relative;
    color: #999999;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 10px 0 10px 15px; /* 左側留出 15px 給小金線空間 */
    border: none; /* 徹底拿掉所有底線和外框 */
    background: #3d3d3d !important;
    transition: color 0.3s ease;
    font-weight: 500;
}

/* 在文字左側畫一條隱形的線 */
body.blog_page .show_content .accordion .link a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 1px;
    background: #c09433;
    transition: width 0.3s ease;
}

/* Hover 或 Active 時，文字變色，左側伸出極短金線 */
body.blog_page .show_content .accordion .link a:hover,
body.blog_page .show_content .accordion li.on_this_category .link a {
    color: #c09433;
    transform: none; /* 絕對不位移 */
}
body.blog_page .show_content .accordion .link a:hover::before,
body.blog_page .show_content .accordion li.on_this_category .link a::before {
    width: 8px; /* 短短的精緻提示線 */
}


/* --- 右側文章列表 (Article List) --- */
body.blog_page .show_content .blog_ri {
    flex: 1;
    min-width: 0;
}

/* 5. 文章改為網格排列 - 強制 3 欄 */
body.blog_page .show_content .blog_subbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 這裡設定絕對的三個一排 */
    gap: 60px 30px; 
}

body.blog_page .show_content .subbox_item a {
    display: block; 
    text-decoration: none;
    background: transparent;
    padding: 0; 
    border: none;
    /* 拿掉整張卡片的 translateY，保持靜止 */
}

/* 上方文章縮圖 */
body.blog_page .show_content .blog_list_le {
    width: 100%;
    aspect-ratio: 4 / 3; 
    overflow: hidden;
    border-radius: 2px; /* 把圓角修得更銳利俐落 */
    background: #000;
    margin-bottom: 20px; 
}
body.blog_page .show_content .blog_list_le img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85) grayscale(10%);
    transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}

/* Hover 時卡片不動，只有圖片在框內「微距放大」 */
body.blog_page .show_content .subbox_item a:hover .blog_list_le img {
    transform: scale(1.04); /* 放大幅度縮小，更顯沉穩 */
    filter: brightness(1.1) grayscale(0%);
}

/* 下方文章文字內容 */
body.blog_page .show_content .blog_list_ri {
    display: block;
}

body.blog_page .show_content .blog_list_ri h5 {
    font-size: 16px; /* 三欄空間較小，字體稍微調細緻一點 */
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.5;
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
    
    /* 標題限制最多兩行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover 時文字悄悄變金 */
body.blog_page .show_content .subbox_item a:hover .blog_list_ri h5 {
    color: #c09433;
}

body.blog_page .show_content .blog_list_ri em {
    font-size: 12px;
    color: #666666;
    font-style: normal;
    letter-spacing: 2px;
    margin-bottom: 12px;
    display: block;
}

body.blog_page .show_content .blog_list_ri p {
    font-size: 13px;
    color: #888888;
    line-height: 1.7;
    letter-spacing: 1px;
    margin: 0;
    /* 摘要限制最多三行 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}

/* 6. 響應式設計 (RWD) */
@media screen and (max-width: 1100px) {
    /* 螢幕稍微變小時，退回兩排以免太擠 */
    body.blog_page .show_content .blog_subbox {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media screen and (max-width: 980px) {
    body.blog_page .show_content.blog_box {
        flex-direction: column; 
        gap: 50px;
    }
    body.blog_page .show_content .blog_le {
        flex: none;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    body.blog_page .main_part {
        padding: 20px 15px 60px;
    }
    body.blog_page .show_content .blog_subbox {
        grid-template-columns: 1fr; /* 手機版單欄呈現 */
        gap: 40px;
    }
}

.subbox_item a:before {display:none;}
.subbox_item a:after {display:none;}

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
   分頁頁碼 (Pagination) - 沿用國際精品雜誌感
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

body.blog_page .show_content ul.page {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 80px 0 40px 0;
    gap: 15px; 
}

body.blog_page .show_content ul.page li {
    margin: 0;
    display: block;
}

body.blog_page .show_content ul.page li a,
body.blog_page .show_content ul.page li strong {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;       
    height: 38px;
    padding: 0;
    font-size: 14px;
    font-weight: 300;
    color: #555555;    
    text-decoration: none;
    transition: color 0.3s ease, border 0.3s ease;
    border: 1px solid transparent; 
    border-radius: 50%; 
    background: transparent; 
}

body.blog_page .show_content ul.page li a:hover {
    color: #ffffff;
    border: 1px solid #333333; 
}

body.blog_page .show_content ul.page li.active strong {
    color: #c09433; 
    border: 1px solid #c09433; 
    font-weight: 400;
}

body.blog_page .show_content ul.page li.next_page a,
body.blog_page .show_content ul.page li.prev_page a {
    width: auto;       
    border-radius: 0;
    border: none;
    font-size: 13px;
    letter-spacing: 5px; 
    padding: 0 10px;
    margin-left: 15px;
}

body.blog_page .show_content ul.page li.next_page a:hover,
body.blog_page .show_content ul.page li.prev_page a:hover {
    color: #c09433;
    border: none;
}
  

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


/*相本分類全版面 ( 限制最寬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;}
*/

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
   相簿分類頁面 (Album Class Page) - 極簡國際藝廊質感
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/* 1. 強制全區字體套用 Noto Sans TC */
.album_class_page, 
.album_class_page * {
    font-family: "Noto Sans TC", sans-serif !important;
}

.album_class_page #content {
    /* background: #0d0b0a; */
    /* min-height: 80vh; */
    background: url(https://pic03.eapple.com.tw/arielchenmagic/background.png);
    background-repeat: repeat;
    background-position: top left;
}

.album_class_page .main_part {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* 2. 麵包屑導覽 (Path) - 乾淨俐落 */
.album_class_page .path p {
    font-size: 12px;
    letter-spacing: 2px;
    color: #555;
    margin-bottom: 40px;
}
.album_class_page .path a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}
.album_class_page .path a:hover {
    color: #fff;
}

/* 3. 頁面標題 */
.album_class_page .subalbum-menu h2 {
    text-align: center;
    color: #888888;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 6px; /* 加大字距提升高級感 */
    margin-bottom: 60px !important;
}

.album_class_page .subalbum-menu h2 .block {
    display: none; /* 隱藏原本的裝飾區塊，保持極簡 */
}

/* 4. 相簿列表 - 大留白網格佈局 */
.album_class_page .show-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 60px 30px; /* 增加上下間距，讓每個作品有呼吸空間 */
    padding: 0;
    list-style: none;
    margin: 0;
}

/* 單一相簿卡片 */
.album_class_page .show-list .item {
    position: relative;
    background: transparent;
}

.album_class_page .show-list .item a {
    display: block;
    text-decoration: none;
}

/* 5. 劇照影像設定 - 經典相機比例 */
.album_class_page .show_pic {
    position: relative;
    margin: 0 0 20px 0; /* 圖片與下方文字拉開距離 */
    width: 100%;
    aspect-ratio: 3 / 2; /* 採用經典攝影 3:2 比例，視覺最舒適 */
    overflow: hidden;
}

/* 隱藏原本可能很突兀的遮罩 */
.album_class_page .show_pic .overlay {
    display: none; 
}

.album_class_page .show_pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 預設稍微壓暗，與黑底網頁融合，不刺眼 */
    filter: brightness(0.8); 
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                filter 0.8s ease;
}

/* 6. 相簿標題文字 - 移至圖片下方置中 */
.album_class_page .show-list .item p {
    color: #888;
    font-size: 14px;
    letter-spacing: 3px;
    font-weight: 400;
    margin: 0;
    text-align: center;
    transition: color 0.4s ease;
}

/* 7. 滑鼠懸停互動 (Hover) - 輕柔無負擔 */
.album_class_page .show-list .item:hover .show_pic img {
    transform: scale(1.03); /* 微微放大，不過度張揚 */
    filter: brightness(1.1); /* 圖片自然提亮，吸引目光 */
}

.album_class_page .show-list .item:hover p {
    color: #fff; /* 文字提亮為純白 */
}

/* 8. 響應式設計 (RWD) */
@media screen and (max-width: 980px) {
    .album_class_page .show-list {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 40px 20px;
    }
}

@media screen and (max-width: 768px) {
    .album_class_page .main_part {
        padding: 20px 15px 60px;
    }
    .album_class_page .show-list {
        grid-template-columns: 1fr; /* 手機版單欄呈現 */
        gap: 50px;
    }
    .album_class_page .show_pic {
        margin-bottom: 15px;
    }
    .album_class_page .subalbum-menu h2 {
        font-size: 18px;
        letter-spacing: 4px;
        margin-bottom: 40px !important;
    }
}

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
   文章內頁 (Blog Inner Page) - 國際精品閱讀體驗
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/* 1. 全區字體與底色 */
body.blog_in_page, 
body.blog_in_page * {
    font-family: "Noto Sans TC", sans-serif;
}

body.blog_in_page #content {
    /* background: #0d0b0a; */
    color: #cccccc;
    background: url(https://pic03.eapple.com.tw/arielchenmagic/background.png);
    background-repeat: repeat;
    background-position: top left;
}

body.blog_in_page .main_part {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* 2. 麵包屑導覽 */
body.blog_in_page .path p {
    font-size: 12px;
    letter-spacing: 2px;
    color: #555;
    margin-bottom: 50px;
    text-align: left;
}
body.blog_in_page .path a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}
body.blog_in_page .path a:hover {
    color: #fff;
}



/* ==========================================
   左側邊欄 (Sidebar) - 同步上一頁的極簡風格
========================================== */
body.blog_in_page .show_content .blog_le {
    flex: 0 0 220px;
}

body.blog_in_page .show_content .blog_le_t {
    color: #ffffff;
    font-size: 16px;
    letter-spacing: 4px;
    font-weight: 300;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #222222;
}

body.blog_in_page .show_content .blog_le_t .news_menu_toggle {
    display: none; 
}

/* 搜尋框 */
body.blog_in_page .show_content .blog_search {
    margin-bottom: 40px;
}
body.blog_in_page .show_content .blog_search form {
    position: relative;
    display: flex;
}
body.blog_in_page .show_content .blog_search input[type="search"] {
    width: 100%;
    background: #111111;
    border: 1px solid #222222;
    color: #ffffff;
    padding: 12px 40px 12px 15px;
    font-size: 14px;
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease;
    -webkit-appearance: none;
}
body.blog_in_page .show_content .blog_search input[type="search"]:focus {
    border-color: #c09433;
    background: #161312;
    box-shadow: 0 0 12px rgba(192, 148, 51, 0.2);
}
body.blog_in_page .show_content .blog_search input[type="submit"] {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    cursor: pointer;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-size: 15px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
body.blog_in_page .show_content .blog_search input[type="submit"]:hover { opacity: 1; }

/* 分類選單 */
body.blog_in_page .show_content .accordion {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px #222 solid;
    border-radius: 4px;
}
body.blog_in_page .show_content .accordion .link a {
    display: block;
    position: relative;
    color: #999999;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 12px 15px;
    border: none;
    background: #151313;
    transition: color 0.3s ease;
    font-weight: 300;
}
body.blog_in_page .show_content .accordion .link a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 1px;
    background: #c09433;
    transition: width 0.3s ease;
}
body.blog_in_page .show_content .accordion .link a:hover,
body.blog_in_page .show_content .accordion li.on_this_category .link a {
    color: #c09433;
}
body.blog_in_page .show_content .accordion .link a:hover::before,
body.blog_in_page .show_content .accordion li.on_this_category .link a::before {
    width: 8px;
}

/* ==========================================
   右側文章內容區 (Article Content)
========================================== */
body.blog_in_page .show_content .blog_ri {
    flex: 1;
    min-width: 0;
}

/* 4. 文章大標題 */
body.blog_in_page .show_content .blog_ri .blog_category_title {
    font-size: 28px;
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 3px;
    line-height: 1.4;
    margin: 0 0 15px 0;
}

/* 5. 社群分享按鈕 */
body.blog_in_page .show_content .blog_ri .blog_shareData {
    display: flex;
    justify-content: flex-end; /* 靠右對齊 */
    margin-bottom: 30px;
    border-bottom: 1px solid #222222; /* 標題下方的優雅分隔線 */
    padding-bottom: 20px;
}
body.blog_in_page .show_content .toShareNews {
    display: flex;
    align-items: center;
    gap: 15px;
}
body.blog_in_page .show_content .toShareNews b {
    font-weight: 300;
    color: #777;
    font-size: 13px;
    letter-spacing: 2px;
}
body.blog_in_page .show_content .toShareNews a.svg {
    display: flex;
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
body.blog_in_page .show_content .toShareNews a.svg:hover {
    opacity: 1;
    transform: translateY(-2px); /* 懸停微浮 */
}
/* 防止 SVG 擋住點擊事件 */
body.blog_in_page .show_content .toShareNews object {
    pointer-events: none; 
}

/* 6. 文章主圖 */
body.blog_in_page .show_content .articel_mainPic {
    width: 100%;
    margin-bottom: 40px;
    border-radius: 4px;
    overflow: hidden;
}
body.blog_in_page .show_content .articel_mainPic img {
    display: block;
    width: 100%;
    height: auto;
}

/* 7. 文章內文閱讀體驗 (Typography) */
body.blog_in_page .show_content .edit {
    font-size: 16px;
    line-height: 2.2; /* 寬鬆的行高讓閱讀舒適 */
    color: #bbbbbb;   /* 降低對比，保護眼睛 */
    letter-spacing: 1.5px;
    font-weight: 400;
}
/* 文章內的連結樣式 */
body.blog_in_page .show_content .edit a {
    color: #c09433;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}
body.blog_in_page .show_content .edit a:hover {
    border-bottom: 1px solid #c09433;
}
body.blog_in_page .show_content .edit img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 4px;
}

/* ==========================================
   相關文章 (Related Articles)
========================================== */
body.blog_in_page .news_related {
    /* margin-top: 80px; */
    padding-top: 60px;
    border-top: 1px solid #222222;
    background: #0d0b0a;
}

/* "相關文章" 標題特調 */
body.blog_in_page .news_related h6 {
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 4px;
    text-align: center;
    margin: auto;
    margin-bottom:40px;
}
body.blog_in_page .news_related h6::before {
    content: "RELATED";
    display: block;
    font-size: 11px;
    color: #c09433;
    letter-spacing: 6px;
    margin-bottom: 8px;
    font-family: Arial, sans-serif;
}

.news_related h6 span:before {
    content: '相關文章';
    font-size: 24px;
    color: #aaaaaa;
}

.blog_back a.article_btn_prev {background: #393939; transition: .3s ease;}
.blog_back a.article_btn_back {background: #393939; transition: .3s ease;}
.blog_back a.article_btn_next {background: #393939; transition: .3s ease;}

.blog_back a.article_btn_back:hover,.blog_back a.article_btn_prev:hover ,.blog_back a.article_btn_next:hover {
    background: #8e702d;
    color: #ffffff;
}

.blog_back a {
    letter-spacing:2px;
    color: #999999;
}

.blog_back {
    grid-gap: 15px;
}

/* 相關文章列表 - 3欄網格 */
body.blog_in_page .news_related_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    list-style: none;
}
body.blog_in_page .news_related_list li {
    margin: 0;
}
body.blog_in_page .news_related_list li a {
    display: block;
    text-decoration: none;
}
body.blog_in_page .news_related_list figure {
    margin: 0 0 15px 0;
    width: 100%;
    aspect-ratio: 16 / 9; /* 縮圖強制 16:9 比例整齊 */
    overflow: hidden;
    border-radius: 2px;
    background: #000;
}
body.blog_in_page .news_related_list figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85) grayscale(10%);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}
/* 相關文章 Hover 效果 */
body.blog_in_page .news_related_list li a:hover figure img {
    transform: scale(1.05);
    filter: brightness(1.1) grayscale(0%);
}
body.blog_in_page .news_related_list p {
    font-size: 15px;
    color: #999999; /* 修正：改回亮灰色，避免跟黑底融為一體 */
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.5;
    margin: 0 0 10px 0; /* 修正：加上下方 margin，讓文字不會死貼著邊緣 (解決偏下) */
    text-align: center; /* 修正：讓文字水平置中 */
    transition: color 0.3s ease;
    /* 兩行截斷 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news_related_list li a {
    display: block;
    padding: 4px;
    background: #343434;
    height: 100%;
}
body.blog_in_page .news_related_list li a:hover p {
    color: #ffffff;
}

/* 隱藏底部多餘的上一頁按鈕 (因為上面的 blog_back 已經有了) */
body.blog_in_page .news_related_b_box {
    display: none; 
}


/* ==========================================
   響應式設計 (RWD)
========================================== */
@media screen and (max-width: 980px) {
    body.blog_in_page .show_content.blog_box {
        flex-direction: column; 
        gap: 50px;
    }
    body.blog_in_page .show_content .blog_le {
        flex: none;
        width: 100%;
    }
    body.blog_in_page .news_related_list {
        grid-template-columns: repeat(2, 1fr); /* 平板改為兩欄 */
    }
}

@media screen and (max-width: 768px) {
    body.blog_in_page .main_part {
        padding: 20px 15px 60px;
    }
    body.blog_in_page .show_content .blog_ri .blog_category_title {
        font-size: 22px;
    }
    body.blog_in_page .show_content .blog_back {
        flex-direction: column;
        gap: 15px;
    }
    body.blog_in_page .show_content .blog_back a {
        width: 100%;
        text-align: center;
    }
    body.blog_in_page .news_related_list {
        grid-template-columns: 1fr; /* 手機版單欄 */
    }
}

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
   分頁頁碼 (Pagination) - 國際精品雜誌感 (極簡、無底色)
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/* 1. 頁碼容器：加大留白，讓版面透氣 */
body.album_info_page ul.page {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    /* margin: 80px 0 60px 0 !important; */
    gap: 15px !important; /* 數字之間的間距拉開 */
}

body.album_info_page ul.page li {
    margin: 0 !important;
    display: block !important;
}

/* 2. 數字基礎設定：正圓形範圍、無背景、無動畫 */
body.album_info_page ul.page li a,
body.album_info_page ul.page li strong {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 38px !important;       /* 固定長寬，確保是完美的正圓 */
    height: 38px !important;
    padding: 0 !important;
    font-family: "Noto Sans TC", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #555555 !important;    /* 預設深灰色，極度低調不搶戲 */
    text-decoration: none !important;
    transition: color 0.3s ease, border 0.3s ease !important;
    border: 1px solid transparent !important; /* 預留邊框空間，防止切換時跳動 */
    border-radius: 50% !important; /* 圓形 */
    background: transparent !important; /* 絕對不要有底色 */
}

/* 3. 滑鼠懸停 (Hover)：只有數字提亮變白，加上隱約的極細灰框 */
body.album_info_page ul.page li a:hover {
    color: #ffffff !important;
    border: 1px solid #333333 !important; 
}

/* 4. 當前所在頁面 (Active)：精品級的極細金圈 */
body.album_info_page ul.page li.active strong {
    color: #c09433 !important; /* 品牌金 */
    border: 1px solid #c09433 !important; /* 1px 極細圓框 */
    font-weight: 400 !important;
}

/* 5. 「下一頁 / 上一頁」特調：去除圓框，改為大字距純文字 */
body.album_info_page ul.page li.next_page a,
body.album_info_page ul.page li.prev_page a {
    width: auto !important;       /* 取消固定寬度 */
    border-radius: 0 !important;
    border: none !important;
    font-size: 13px !important;
    letter-spacing: 5px !important; /* 拉大字距增加高級感 */
    padding: 0 10px !important;
    margin-left: 15px !important;
}

/* 「下一頁 / 上一頁」懸停時：文字變金，無邊框 */
body.album_info_page ul.page li.next_page a:hover,
body.album_info_page ul.page li.prev_page a:hover {
    color: #c09433 !important;
    border: none !important;
}


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


/*相本列表
.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; } 取消連結被點擊效果
*/

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
   相簿內頁 (Album Info Page) - 國際魔術師質感 3欄瀑布流 (不裁切)
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/* 1. 全區字體與底色設定 */
body.album_info_page, 
body.album_info_page * {
    font-family: "Noto Sans TC", sans-serif !important;
}

body.album_info_page #content {
    background: url(https://pic03.eapple.com.tw/arielchenmagic/background.png);
    background-repeat: repeat;
    background-position: top left;
}

body.album_info_page .main_part {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* 2. 麵包屑導覽 (Path) */
body.album_info_page .path p {
    font-size: 12px;
    letter-spacing: 2px;
    color: #555;
    margin-bottom: 40px;
}
body.album_info_page .path a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}
body.album_info_page .path a:hover {
    color: #fff;
}

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

/* 4. 單一張照片的區塊：防止被切斷 */
body.album_info_page .pic-list li.item {
    display: inline-block !important;  /* 確保它作為瀑布流的獨立區塊 */
    float: none !important; 
    width: 100% !important; 
    margin: 0 0 30px 0 !important;     /* 只保留下方間距 */
    break-inside: avoid !important;    /* 防止照片被從中切斷分到下一欄 */
    page-break-inside: avoid !important;
    position: relative;
    background: transparent !important;
}

body.album_info_page .pic-list .item a {
    display: block !important;
    width: 100% !important;
    outline: none !important;
}

/* 5. 核心破解：強制取消所有層級的「正方形」與高度限制 */
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 的正方形比例限制 */
}

/* 6. 圖片本體與外框特效 */
body.album_info_page .pic-list .item figure.show_pic {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #111 !important; 
    line-height: 0 !important;         /* 消除圖片底部的預設微小空隙 */
}

body.album_info_page .pic-list .item .show_pic img {
    display: block !important;
    width: 100% !important;
    object-fit: unset !important;      /* 絕對禁止 cover 裁切，完整顯示直式/橫式 */
    filter: brightness(0.85) grayscale(10%) !important; /* 預設微微壓暗 */
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s ease !important;
}

/* 7. 滑鼠懸停 (Hover) - 高級呼吸感互動 */
body.album_info_page .pic-list .item:hover .show_pic img {
    transform: scale(1.04) !important; 
    filter: brightness(1.1) grayscale(0%) !important; 
}

/* 隱藏預設可能卡位的空標題 */
body.album_info_page .pic-list .item h6 {
    display: none !important; 
}

/* 8. 響應式設計 (RWD) */
@media screen and (max-width: 1100px) {
    body.album_info_page #content ul.pic-list {
        column-count: 2 !important;    /* 平板或小筆電改為 2 欄 */
        column-gap: 20px !important;
    }
    body.album_info_page .pic-list li.item {
        margin-bottom: 20px !important;
    }
}

@media screen and (max-width: 600px) {
    body.album_info_page .main_part {
        padding: 20px 15px 60px !important;
    }
    body.album_info_page #content ul.pic-list {
        column-count: 1 !important;    /* 手機版改為單欄 */
        column-gap: 0 !important;
    }
    body.album_info_page .pic-list li.item {
        margin-bottom: 25px !important;
    }
}

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

/*首頁影片/＝＝＝＝＝*/
/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
   首頁 (Index Page) - 表演影片區塊 (劇院級四欄排版 / 修正版)
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/* 1. 區塊外部間距與背景 */
.pageIndex .prod_part.i_video_box {
    padding: 80px 20px;
    background: url(https://pic03.eapple.com.tw/arielchenmagic/background.png);
    background-repeat: repeat;
    background-position: bottom left;
    max-width: 1400px;
    margin: 0 auto;
}

/* 2. 區塊標題設計 */
.pageIndex .i_video_box .i_video_tit {
    text-align: center;
    margin-bottom: 60px;
}

.pageIndex .i_video_box .i_video_tit h2 {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 28px;
    color: #888888;
    font-weight: 400;
    letter-spacing: 5px;
    margin: 0;
    display: inline-block;
    position: relative;
    padding-bottom: 15px;
}

/* 標題下方的優雅短金線 */
.pageIndex .i_video_box .i_video_tit h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: #888888;
}

/* 隱藏預設可能自帶的裝飾 */
.pageIndex .i_video_box .i_video_tit span {
    display: none;
}

/* 3. 影片網格容器 (首頁專屬 4 欄排版) */
.pageIndex .i_video_box .video-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 電腦版橫排 4 個 */
    gap: 30px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 單一影片卡片 */
.pageIndex .i_video_box .vid_item {
    display: block;
    margin: 0;
}

.pageIndex .i_video_box .viedoBox-link {
    text-decoration: none;
    display: block;
    outline: none;
}

/* 4. 影片縮圖：強制 16:9 比例 */
.pageIndex .i_video_box .vidCover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0 0 20px 0;
    background: #000000;
    border-radius: 4px;
}

.pageIndex .i_video_box .vidCover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85) grayscale(10%); /* 預設微暗角 */
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}

/* 5. 影片標題 (解除高度與行數限制，防止吃字) */
.pageIndex .i_video_box .vidTitle {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 15px;
    color: #888888;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.6;
    text-align: center;
    margin: 0;
    padding: 5px 10px; /* 給予上下左右足夠的安全空間 */
    display: block;
    height: auto; /* 讓文字自然撐開高度 */
    overflow: visible; /* 解除隱藏，杜絕文字下緣被截斷 */
    transition: color 0.3s ease;
}

.pageIndex .i_video_box .vidDesc {
    display: none;
}

/* 6. 滑鼠懸停互動 (Hover) */
.pageIndex .i_video_box .viedoBox-link:hover .vidCover img {
    transform: scale(1.05);
    filter: brightness(1.15) grayscale(0%); /* 提亮且恢復全彩 */
}

.pageIndex .i_video_box .viedoBox-link:hover .vidTitle {
    color: #ffffff;
}

/* 7. 底部「查看更多」按鈕 (改為高級精品底線樣式) */
.pageIndex .i_video_box .i_prod_b {
    text-align: center;
    margin-top: 60px;
}

.pageIndex .i_video_box .i_prod_b a {
    font-family: "Noto Sans TC", sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 0 0 8px 0; /* 只留下方 padding 給底線空間 */
    border: none; /* 移除笨重外框 */
    border-bottom: 1px solid #4a4a4a; /* 俐落的深灰底線 */
    border-radius: 0; /* 移除膠囊圓角 */
    color: #aaaaaa;
    font-size: 13px;
    letter-spacing: 5px;
    text-decoration: none;
    background: transparent;
    transition: all 0.4s ease;
}

.pageIndex .i_video_box .i_prod_b a b {
    font-weight: 300;
}

.pageIndex .i_video_box .i_prod_b a i {
    font-size: 12px;
    transition: transform 0.4s ease, color 0.4s ease;
}

/* 按鈕懸停特效 */
.pageIndex .i_video_box .i_prod_b a:hover {
    color: #ffffff;
    border-color: #ffffff; /* 底線亮起 */
}

.pageIndex .i_video_box .i_prod_b a:hover i {
    color: #ffffff;
    transform: translateX(8px); /* 箭頭順滑向右滑動 */
}

/* ==========================================
   8. 響應式設計 (RWD)
========================================== */
@media screen and (max-width: 1200px) {
    /* 筆電螢幕縮小為兩排，避免 4 個太擠 */
    .pageIndex .i_video_box .video-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px 30px;
    }
}

/* ==========================================
   修正平板版 Footer Logo 與資訊疊加問題 (維持左右水平排版)
========================================== */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    /* 1. 大幅縮減左右兩側的內距 (原本是 100px 太厚，縮小為 20px) */
    .footer_info ul {
        padding: 0 100px !important;
    }

    /* 2. 稍微縮小中間的 Logo，讓出空間給兩側文字 */
    .footer_logo {
        max-width: 170px !important;
    }

    /* 3. 嚴格限制「左側聯絡資訊」的寬度，確保不會碰到 Logo */
    .footer_info ul > li:nth-child(1) {
        max-width: 32% !important;
        word-break: break-all; /* 防止長信箱撐破版面 */
    }

    /* 4. 嚴格限制「右側 Sitemap」的寬度 */
    .footer_info ul > li:nth-child(2) {
        max-width: 35% !important;
    }

    /* 5. 由於右側空間變小，將原本 4 欄的選單改為 2 欄，避免字擠在一起 */
    .footer_menu {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px 5px !important;
    }

    /* 6. 稍微縮小平板狀態下的文字與標題，視覺更精緻 */
    .footer_info ul>li:before {
        font-size: 100% !important;
        margin-bottom: 10px !important;
    }
    .footer_info li p, 
    .footer_menu a {
        font-size: 13px !important;
    }
}

@media screen and (max-width: 768px) {
    .pageIndex .prod_part.i_video_box {
        padding: 60px 15px;
    }
    .pageIndex .i_video_box .i_video_tit h2 {
        font-size: 22px;
    }
    /* 手機版縮為單欄顯示 */
    .pageIndex .i_video_box .video-list {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .pageIndex .i_video_box .i_prod_b {
        margin-top: 50px;
    }
    .pageIndex .i_video_box .i_prod_b a {
        width: auto; /* 解除手機版滿版，維持精緻感 */
        padding-left: 10px;
        padding-right: 10px;
    }
}


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

/*影片/＝＝＝＝＝*/
/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
   影片列表頁 (Video Page) - 國際劇院質感 16:9 網格
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/* 提高選擇器權重 (Specificity) 來取代 !important */
body.video_page, 
body.video_page * {
    font-family: "Noto Sans TC", sans-serif;
}

body.video_page #content {
    /* background: #0d0b0a; */
    background: url(https://pic03.eapple.com.tw/arielchenmagic/background.png);
    background-repeat: repeat;
    background-position: top left;
}

body.video_page .main_part {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* 麵包屑 */
body.video_page .path p {
    font-size: 12px;
    letter-spacing: 2px;
    color: #555;
    margin-bottom: 50px;
}
body.video_page .path a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}
body.video_page .path a:hover {
    color: #fff;
}

/* 影片網格容器 */
body.video_page .show_content .video-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 60px 30px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 單一影片卡片 */
body.video_page .show_content .video-list .vid_item {
    display: block;
    position: relative;
    margin: 0;
    background: transparent;
}

body.video_page .show_content .video-list .viedoBox-link {
    text-decoration: none;
    display: block;
    outline: none;
}

/* 影片縮圖外框：強制 16:9 */
body.video_page .show_content .video-list .vidCover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0 0 20px 0;
    background: #111;
    border-radius: 4px;
    padding: 0;
}

body.video_page .show_content .video-list .vidCover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7) grayscale(20%);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                filter 0.8s ease;
}

/* 影片標題設定 */
body.video_page .show_content .video-list .vidTitle {
    font-size: 15px;
    color: #888888;
    font-weight: 400;
    letter-spacing: 1.5px;
    line-height: 1.6;
    text-align: center;
    margin: 0;
    padding-bottom: 4px; /* 修正字體下緣被裁切的問題 */
    height: auto;
    transition: color 0.3s ease;
    
    /* 兩行截斷 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.video_page .show_content .video-list .vidDesc {
    display: none;
}

/* 滑鼠懸停 */
body.video_page .show_content .video-list .vid_item:hover .vidCover img {
    transform: scale(1.05);
    filter: brightness(1.1) grayscale(0%); /* 恢復全彩並提亮 */
}

body.video_page .show_content .video-list .vid_item:hover .vidTitle {
    color: #ffffff;
}

/* 響應式 */
@media screen and (max-width: 1100px) {
    body.video_page .show_content .video-list {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 50px 20px;
    }
}

@media screen and (max-width: 768px) {
    body.video_page .main_part {
        padding: 20px 15px 60px;
    }
    body.video_page .show_content .video-list {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    body.video_page .show_content .video-list .vidCover {
        margin-bottom: 15px;
    }
    body.video_page .show_content .video-list .vidTitle {
        font-size: 16px;
    }
}

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
   分頁頁碼 (Pagination) - 國際精品雜誌感 (套用至 Video 頁)
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

body.video_page .show_content ul.page {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 80px 0 60px 0;
    gap: 15px; 
}

body.video_page .show_content ul.page li {
    margin: 0;
    display: block;
}

body.video_page .show_content ul.page li a,
body.video_page .show_content ul.page li strong {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    color: #555555;
    text-decoration: none;
    transition: color 0.3s ease, border 0.3s ease;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
}

body.video_page .show_content ul.page li a:hover {
    color: #ffffff;
    border: 1px solid #333333; 
}

body.video_page .show_content ul.page li.active strong {
    color: #c09433; 
    border: 1px solid #c09433; 
    font-weight: 400;
}

body.video_page .show_content ul.page li.next_page a,
body.video_page .show_content ul.page li.prev_page a {
    width: auto;       
    border-radius: 0;
    border: none;
    font-size: 13px;
    letter-spacing: 5px; 
    padding: 0 10px;
    margin-left: 15px;
}

body.video_page .show_content ul.page li.next_page a:hover,
body.video_page .show_content ul.page li.prev_page a:hover {
    color: #c09433;
    border: none;
}

.video-list .vidCover::after {display:none;}


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

/*聯絡我們/＝＝＝＝＝*/
/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
   聯絡我們 (Contact Page) - 國際精品級表單設計 (修正排版與按鈕)
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/* 1. 全區字體與底色設定 */

body.contact_page #content {
    /* background: #0d0b0a; */
    color: #cccccc;
    background: url(https://pic03.eapple.com.tw/arielchenmagic/background.png);
    background-repeat: repeat;
    background-position: top left;
}

body.contact_page .main_part {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px 100px;
}

/* 2. 麵包屑導覽 */
body.contact_page .path p {
    font-size: 12px;
    letter-spacing: 2px;
    color: #555;
    margin-bottom: 30px;
    font-family: "Noto Sans TC", sans-serif;
}
body.contact_page .path a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}
body.contact_page .path a:hover {
    color: #fff;
}

/* ==========================================
   3. 左右雙欄版面佈局 (修正：對齊 form 標籤)
========================================== */
body.contact_page .contact_content form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 讓表單整體在畫面中置中 */
    align-items: flex-start;
    gap: 80px; /* 左右間距 */
    margin-top: 40px;
}

/* --- 左側：聯絡資訊 --- */
body.contact_page .information_left {
    flex: 0 0 300px; /* 固定左側寬度，保持精緻感 */
}

body.contact_page .information_left h4 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 6px;
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: 1px solid #616161; /* 質感底線 */
    font-family: "Noto Sans TC", sans-serif;
}

body.contact_page .list_before.info {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: "Noto Sans TC", sans-serif;
}

body.contact_page .list_before.info li {
    font-size: 15px;
    color: #aaaaaa;
    letter-spacing: 2px;
    margin-bottom: 25px;
    line-height: 1.6;
    font-weight: 400;
    font-family: "Noto Sans TC", sans-serif;
}

.contact_form li.last blockquote {
    color: #bababa;
}

.info_TEL:before, .info_TEL2:before, .info_PHONE:before, .info_LINE:before, .info_FAX:before, .info_TAXID:before, .info_MAIL:before, .info_ADD:before, .info_ADD2:before {
    letter-spacing: 1px;
}

.contact_le_map a {
    display: block;
    background: #d9ac47;
    text-align: center;
    padding: 10px;
    color: #fff;
}

.contact_form li.last cite {
    background: #d9ac47;
    color: #fff;
}

/* --- 右側：線上表單 --- */
body.contact_page .information_right {
    flex: 1;
    max-width: 650px; /* 絕對關鍵：限制輸入框不要無限拉長 */
    font-family: "Noto Sans TC", sans-serif;
}

body.contact_page .information_right h4 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 6px;
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: 1px solid #616161;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: "Noto Sans TC", sans-serif;
}

/* 必填提示文字微調 */
body.contact_page .information_right h4 span.note {
    font-size: 12px;
    color: #b18930;
    letter-spacing: 2px;
    font-weight: 400;
}

body.contact_page .contact_form {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.contact_page .contact_form li {
    margin-bottom: 35px;
}

.contact_form li {
    grid-template-columns: 130px 1fr;
    grid-gap: 10px;
}

/* 欄位標題 (Label) */
body.contact_page .form__label {
    font-size: 14px;
    color: #888888;
    letter-spacing: 2px;
    margin-bottom: 10px;
    display: block;
    font-weight: 400;
    max-width: 130px;
}
body.contact_page .form__label .star.red {
    color: #c09433;
    margin-right: 6px;
}

.contact_le_map {display:none;}

/* ==========================================
   4. 輸入框 (Inputs & Textarea) - 底線設計
========================================== */
body.contact_page .form__insert input[type="text"],
body.contact_page .form__insert input[type="email"],
body.contact_page .form__insert input[type="tel"],
body.contact_page .form__insert textarea,
body.contact_page .form__insert input.noborder,
body.contact_page .form__insert textarea.noborder {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #333333 !important; /* 安靜的深灰底線 */
    color: #ffffff !important;
    font-size: 15px;
    letter-spacing: 1.5px;
    padding: 10px 0 12px 0;
    outline: none !important;
    box-shadow: none !important;
    font-family: inherit;
    border-radius: 0 !important; /* 殺掉 iOS 的奇怪圓角 */
    -webkit-appearance: none;
    transition: border-color 0.4s ease;
}

body.contact_page .form__insert textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.8;
}

body.contact_page .form__insert input:focus,
body.contact_page .form__insert textarea:focus {
    border-bottom-color: #c09433 !important; /* 點擊時發亮 */
}

body.contact_page .chk_new_version {
    margin-top: 10px;
}
body.contact_page .tncode {
    border-radius: 4px;
    overflow: hidden;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}
body.contact_page .tncode:hover { opacity: 1; }


/* ==========================================
   響應式設計 (RWD)
========================================== */
@media screen and (max-width: 980px) {
    body.contact_page .contact_content form {
        flex-direction: column; /* 平板改為上下排列 */
        gap: 30px;
    }
    body.contact_page .information_left,
    body.contact_page .information_right {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    body.contact_page .main_part {
        padding: 20px 15px 60px;
    }
    body.contact_page .contact_form li.last {
        flex-direction: column-reverse; /* 手機版：送出在上，重填在下 */
        gap: 15px;
    }
    body.contact_page .contact_form blockquote,
    body.contact_page .contact_form cite {
        width: 100%;
    }
    body.contact_page .contact_form input[type="reset"],
    body.contact_page .contact_form input[type="submit"] {
        width: 100%;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }
}




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



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

/* 1. 修復 ul 的絕對定位與過大的內距 */
    .footer_info ul {
        position: relative; /* 取消絕對定位，讓內容把高度自然撐開 */
        flex-direction: column; /* 左右並排改為上下垂直堆疊 */
        padding: 0 20px; /* 縮小手機版的左右安全內距 */
        gap: 40px; /* 聯絡資訊與 Sitemap 之間的間距 */
        margin-top: 30px; /* 與上方 Logo 保持呼吸空間 */
        align-items: stretch; /* 讓內部 li 佔滿寬度 */
    }

    /* 2. 讓聯絡資訊與選單區塊文字置中，符合手機瀏覽習慣 */
    .footer_info ul > li {
        width: 100%;
        text-align: center;
    }

    /* 3. 調整手機版 Sitemap 選單比例 (原本 4 欄在手機上會太擠，改為 2 欄) */
    .footer_menu {
        grid-template-columns: 1fr 1fr;
        gap: 15px 10px;
    }

    /* 4. 微調 Logo 尺寸 */
    .footer_logo {
        max-width: 180px; 
        margin: 0 auto;
    }

    /* 5. 底部版權宣告文字微調 */
    .copy {
        margin-top: 20px;
        text-align: center;
        line-height: 1.8;
    }
    
    .privacyLinks a + a {
        margin-left: 10px;
        padding-left: 10px;
    }

    /* 1. 修正側邊選單外層容器，確保滿版且浮動在最上層 */
    .stellarnav.mobile.active {
        position: relative;
        z-index: 99999;
    }

    /* 2. 側邊選單主體面板特調 - 精品暗黑毛玻璃質感 */
    .stellarnav.mobile ul.anchorList {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important; /* 固定精緻寬度，不佔滿全螢幕 */
        height: 100vh !important;
        background: linear-gradient(180deg, #0c0a0b 0%, #151012 100%) !important;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.8) !important;
        padding: 60px 0 30px 0 !important; /* 上方留空給 Close 按鈕 */
        overflow-y: auto !important; /* 內容過長時可滾動 */
        border: none !important;
    }

    /* 3. 清除電腦版繼承的 li 樣式（高度、右邊框）並重新編排 */
    .stellarnav.mobile ul.anchorList li {
        display: block !important;
        width: 100% !important;
        height: auto !important; /* 殺掉電腦版的 20px 固定高度 */
        border-right: none !important;
        border-bottom: 1px solid rgb(31 31 31) !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 4. 一級主選單連結樣式調整 */
    .stellarnav.mobile ul.anchorList li a.mob_main_link {
        display: block !important;
        /* width: 100% !important; */
        height: auto !important;
        line-height: 1.5 !important;
        padding: 15px 25px !important; /* 加大手機點擊區域 */
        margin: 0 !important;
        font-size: 15px !important;
        letter-spacing: 2px !important;
        color: #bbbbbb !important;
        text-align: left !important;
        background: #0c0a0b !important;
    }

    /* 5. 修正子選單（如：精彩案例）在手機版點開時的堆疊版面 */
    .stellarnav.mobile li.has-sub ul {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.2) !important;
        box-shadow: none !important;
        border-top: none !important;
        padding: 5px 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* 子選單內連結縮排與尺寸微調 */
    .stellarnav.mobile li.has-sub ul li a.mob_main_link {
        padding: 10px 25px 10px 40px !important; /* 向右縮排 */
        font-size: 14px !important;
        color: #999999 !important;
    }

    /* 6. 右側展開正方形加號按鈕 (dd-toggle) 位置校正 */
    .stellarnav.mobile li.has-sub {
        position: relative !important;
    }

    .stellarnav.mobile .dd-toggle {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 50px !important;
        height: 52px !important; /* 剛好對齊主連結高度 */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .stellarnav.mobile .dd-toggle span.icon-plus {
        color: #c09433 !important; /* 改為品牌金色 */
        font-size: 16px !important;
    }

    /* 7. 關閉選單按鈕 (Close) 樣式美化 */
    .stellarnav.mobile ul.anchorList a.close-menu {
        position: absolute !important;
        top: 15px !important;
        right: 20px !important;
        width: auto !important;
        height: auto !important;
        padding: 5px 12px !important;
        border: 1px solid rgba(192, 148, 51, 0.4) !important;
        border-radius: 4px !important;
        color: #c09433 !important;
        font-size: 12px !important;
        letter-spacing: 1px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        text-align: center !important;
    }
/* 1. 調整主標題 (中文部分) */
    .banner h5 {
        font-size: 18px !important; /* 原本是 23px，稍微縮小 */
        letter-spacing: .2rem; /* 字距稍微縮小，避免在手機上斷行太奇怪 */
        bottom: 10%; /* 稍微往上移一點，避免被下方切到 */
    }

    /* 2. 調整英文裝飾大標題 */
    .banner h5:after {
        font-size: 45px !important; /* 從超大的 105px 縮小到適合手機的尺寸 */
        /* 如果希望文字會跟著不同手機大小自動縮放，也可以改成 font-size: 12vw !important; */
        letter-spacing: .05rem; 
        line-height: 1.5;
    }

    /* 聯絡我們表單 */
    /* ==========================================
       右側線上表單區 (手機版專屬最佳化)
    ========================================== */

    /* 1. 表單大標題與必填提示：改為上下排列，字體稍微縮小 */
    body.contact_page .information_right h4 {
        font-size: 18px !important; 
        letter-spacing: 4px !important;
        flex-direction: column !important; /* 空間小，標題和提示上下放 */
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 25px !important;
    }

    /* 2. 將原本左右排列的「標籤」與「輸入框」改為垂直上下排列 */
    body.contact_page .contact_form li {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        margin-bottom: 20px !important; /* 稍微縮小各欄位間距 */
    }

    /* 3. 解除標籤 (Label) 130px 的寬度限制，讓它滿版 */
    body.contact_page .form__label {
        max-width: 100% !important;
        font-size: 14px !important;
        margin-bottom: 0 !important;
        background: rgb(255 255 255 / 0%);
        text-align: left;
    }

    /* 4. 確保輸入框外層滿版 */
    body.contact_page .form__insert {
        width: 100% !important;
    }

    /* 5. 手機版按鈕水平並排 (左右各半) */
    body.contact_page .contact_form li.last {
        flex-direction: row !important; /* 強制水平排列 */
        justify-content: space-between !important; 
        margin-top: 20px !important;
        gap: 10px !important; 
    }
    
    /* 讓兩顆按鈕的外圍容器 (blockquote, cite) 各佔 48% 的寬度 */
    body.contact_page .contact_form li.last blockquote,
    body.contact_page .contact_form li.last cite {
        width: 48% !important; 
        flex: 1 !important;    
    }

    /* 💡 修正：將 cite 變成 Flex 容器，讓「文字」跟「箭頭」強制在同一行置中 */
    body.contact_page .contact_form li.last cite {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important; /* 送出文字與箭頭的間距 */
    }

    /* 統一設定按鈕內部的間距與字體 */
    body.contact_page .contact_form li.last input[type="submit"],
    body.contact_page .contact_form li.last input[type="reset"] {
        padding: 12px 0 !important;
        font-size: 15px !important;
        letter-spacing: 2px !important;
        border: none !important; /* 去除可能自帶的邊框或底線 */
    }

    /* 💡 修正：「送出」按鈕寬度改為 auto，把剩下的空間讓給箭頭 */
    body.contact_page .contact_form li.last input[type="submit"] {
        width: auto !important; 
        background: transparent !important; /* 背景透明，讓外層 cite 的金色透出來 */
        padding-right: 0 !important; /* 讓文字跟箭頭再靠近一點 */
    }

    /* 「重新填寫」按鈕沒有箭頭，維持 100% 置中即可 */
    body.contact_page .contact_form li.last input[type="reset"] {
        width: 100% !important; 
        text-align: center !important;
    }
    
    /* 加大手機版按鈕的點擊熱區 */
    body.contact_page .contact_form li.last input[type="submit"],
    body.contact_page .contact_form li.last input[type="reset"] {
        padding: 12px 0 !important;
        font-size: 15px !important;
        letter-spacing: 2px !important;
    }

    
}

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