/*------------------------------------------------------------------
Reset
------------------------------------------------------------------*/
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset, img {border:0;}
address, caption, cite, code, dfn, th, var {font-style:normal;font-weight:normal;}
caption, th {text-align:left;}
q:before, q:after {content:'';}
abbr, acronym {border:0;}

/*------------------------------------------------------------------
Main Layout
------------------------------------------------------------------*/
body{ font-family:Calibri,Times New Roman, Times, serif; font-size:13px; background-color:#000000;font-weight:bold; overflow-x:hidden; }
#WRAPPER{ width:1020px; margin:0 auto; overflow:hidden;}
#LEFT{ width:225px; float:left; overflow:hidden; background-image:url(../images/bg_left.jpg); background-position:0 0; background-repeat:no-repeat; min-height:500px;}
#RIGHT{ width:775px; float:right; overflow:hidden;}
#CONTENT{ width:1020px; float:left; overflow:hidden;}
#FOOTER{ clear:both; float:left; overflow:hidden;width:990px; padding:90px 0 30px 30px; background-image:url(../images/footer.jpg); background-position:0 30px;  background-repeat:no-repeat;}
/*------------------------------------------------------------------
LEFT Layout
------------------------------------------------------------------*/
#LEFT h1{ width:225px; height:145px; float:left; text-indent:-9999px;}
#LEFT h1 a{ display:block; width:225px; height:145px;}
ul.MENU{ width:225px; margin:0; padding:0; list-style: none; float:left;}
ul.MENU li{width:177px; clear:both; padding-left:28px; padding-bottom:10px;}
ul.MENU li a{width:147px; display:block; line-height:15px; padding-bottom:5px;font-size:14px; font-weight:normal; color:#90928f; text-decoration:none; background-image:url(../images/arrow01.gif); background-position:0 30%; background-repeat:no-repeat; padding-left:30px;}
ul.MENU li a:hover{ color:#ffffff;}
ul.MENU li a.FIRST{width:134px; background-image:none; padding-left:43px;line-height:15px;display:block;}
ul.MENU li a.SUB{width:117px; background-image:none; padding-left:60px; line-height:15px;display:block;}
ul.MENU li a.THIRD{width:100px; background-image:none; padding-left:77px; line-height:15px;display:block; }
ul.MENU li a.THIS{ color:#ffffff; display:block;}

#RIGHT {  float: left;  width: 795px;  margin-left: 0px; overflow: hidden;/* 確保右邊欄不會被左邊撞到 */}

/*------------------------------------------------------------------
LEFT Layout
------------------------------------------------------------------*/
.BOX01{ width:745px; float:left; overflow:hidden; margin-top:50px; padding-left:30px; height:auto; }
.BOX02{ width:775px; float:left; overflow:hidden; padding-top:50px; padding-left:0;}
.BOX03{ width:745px; float:left; overflow:hidden; padding-top:50px; padding-left:30px;}
h2.TI01{ width:719px; height:60px; background-image:url(../images/ti_about.gif); background-position:0 0; background-repeat:no-repeat;}
h2.TI02{ width:719px; height:60px; background-image:url(../images/ti_contact.gif); background-position:0 0; background-repeat:no-repeat;}
div.TB_BOX{ width:384px; padding:32px 0 0 175px;}
div.TB_BOX table{ overflow:hidden;  color:#FFF; }
div.TB_BOX table td{ padding:5px 0; position:relative;font-weight:normal; }
div.TB_BOX table td.TI{ font-size:18px; padding-bottom:25px; font-weight:normal; }
div.TB_BOX table td.TI2{ padding-left:15px;}
div.TB_BOX table td.INFO{ line-height:24px; font-size:15px; padding-top:35px;letter-spacing:1px;}
div.TB_BOX table td input{ width:225px; height:18px; background-color:#000; border:1px #7f7f7f solid; color:#CCC;}
div.TB_BOX table td textarea{width:225px; background-color:#000; border:1px #7f7f7f solid; height:160px;color:#CCC;overflow: auto ; resize: none ; }
div.TB_BOX table td a{ color:#CCC; text-decoration:none; }
div.TB_BOX table td a:hover{ color:#fff;}
div.TB_BOX table td.BN_BOX div{ width:68px; height:160px; position:relative; overflow:hidden;line-height:20px;}
div.TB_BOX table td.BN_BOX div a.BTN{ position:absolute; bottom:5px; right:10px; cursor: pointer; display:block;}
/*------------------------------------------------------------------
FOOTER Layout
------------------------------------------------------------------*/
#FOOTER p{  width:970px; color:#444444; clear:both;  line-height:20px;overflow:hidden; float:left;}



.wrapper{width:100%;max-width:1024px;margin:0 auto;position:relative;}
.wrapper img.bg {width:100%;}
.wrapper .language {position:absolute;bottom:40px;right:10%;display:flex;flex-direction:flex-end;}
.wrapper .language a {color:#fff;font-size:0.5rem;text-align:center;border:1px solid #ffffff;margin-right: -1px;width:60px;font-weight:300;padding:3px 0 4px 0;opacity:0.8;font-family: Microsoft JhengHei;text-decoration:none;letter-spacing:0.5px;cursor:pointer;transition:0.4s;}
.wrapper .language a:hover{opacity:1;transition:0.4s;}
#myAudio {position: absolute;right:10%;bottom:0%;opacity:0.2;height:20px;width:305px;}
#myAudio embed {width:100%;}
#myAudio source {width:100%;}
@media screen and (max-width:376px){
  .wrapper .language{right:10px;}
  #myAudio{right:10px;width:auto;}
} 
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
  .wrapper .language a {height:10px;}
}


/* Override: make left menu bigger */
ul.MENU li a {
  font-size: 18px !important;
  line-height: 22px;
}

ul.MENU li strong {
  font-size: 19px !important;
  font-weight: bold;
  display: block;
  margin-bottom: 8px;   /* ← 新增這裡 */
}

/* Override: make submenu line-height bigger */
ul.MENU li a.SUB,
ul.MENU li a.THIRD {
  line-height: 24px !important;
  padding-bottom: 6px;
}


.showcase .ON { display: none !important; }

/* 讓整頁不滾動，改由左右區域各自滾動 */
html, body {
  height: 100%;
  overflow: hidden;
}

/* 左側選單：需要時可獨立滾動，底部 copyright 不會被吃掉 */
#LEFT {
  height: calc(100vh - 150px);
  /*height: 100vh;*/
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  padding-bottom: 56px; /* 最後幾行更安全 */
}

/* 右側內容：與左側留 20px，自己上下滾動，並預留與滾動條/底部的空間 */
#RIGHT {
  margin-left: 30px;
  width: calc(1020px - 225px - 30px);              /* 若想換別的間距：795px - 間距 */
   height: calc(100vh - 150px);  /* ← 原本是 100vh */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  box-sizing: border-box;
  padding-right: 0px;       /* 與滾動條留距離 (可改) */
   padding-bottom: 0 !important;      /* 防止最底部內容被裁掉 (可改) */
}



/* 讓產品頁內容和右側捲軸留 20px 間距（不再壓住圖片） */
#RIGHT .BOX02 {               /* .BOX02 目前是 width: 775px; :contentReference[oaicite:1]{index=1}*/
  box-sizing: border-box;
  padding-right: 30px;
}

/* 保險：避免內容本身額外留底距 */
#RIGHT .BOX02:last-child { margin-bottom: 0; }

/* --- 自訂滾動條樣式：擇一 --- */
/* A. 軌道黑色 */
#RIGHT::-webkit-scrollbar { width: 12px; }
#RIGHT::-webkit-scrollbar-track { background: #000; }
#RIGHT::-webkit-scrollbar-thumb { background-color: #999; border-radius: 6px; }
#RIGHT { scrollbar-width: thin; scrollbar-color: #999 #000; }

/* B. 如要透明軌道，註解掉上面 A，改用這段 */
/*
#RIGHT::-webkit-scrollbar { width: 12px; }
#RIGHT::-webkit-scrollbar-track { background: transparent; }
#RIGHT::-webkit-scrollbar-thumb { background-color: #999; border-radius: 6px; }
#RIGHT { scrollbar-width: thin; scrollbar-color: #999 transparent; }
*/

/* 產品頁：底圖在上、版權文字在下（與原 #FOOTER 行為一致） */
#RIGHT .BOX02::after {
  content: "Copyright @ 2025 All Rights Reserved by CHANTING.";
  display: block;
  clear: both;
  margin-top: 24px;
  padding: 90px 0 30px 30px;          /* ↑ 這裡把文字往下推，脫離同一行 */
  color: #444;
  background: url(../images/footer.jpg) no-repeat 0 30px; /* 圖在上方 30px 處 */
  background-size: 775px auto;        /* 依 .BOX02 寬度等比縮放 */
}


/* 非產品頁：#RIGHT 裡沒有 .BOX02（滑動區）時，補上原樣的底圖＋版權 */
#RIGHT:not(:has(.BOX02))::after {
  content: "Copyright @ 2025 All Rights Reserved by CHANTING.";
  display: block;
  clear: both;
  margin-top: 24px;

  /* 跟原始 #FOOTER 一樣：上面顯示 footer.jpg，小圖距頂 30px，文字在下方 */
  padding: 90px 0 30px 30px;
  color: #444;
  background: url(../images/footer.jpg) no-repeat 0 30px;
  background-size: 745px auto; /* .BOX01/.BOX03 內容寬 745px，剛好貼齊 */
}


/* 其它頁（Home/分類/News…：用 .BOX01 或 .BOX03） */
#RIGHT .BOX01,
#RIGHT .BOX03 {
  padding-right: 30px;   /* 保持與產品頁一致 */
  box-sizing: border-box;
}

/* 讓瀏覽器為捲軸預留空間，避免忽大忽小 */
#RIGHT { scrollbar-gutter: stable; }

#RIGHT img { max-width: 100%; height: auto; }

/* 非產品頁（#RIGHT 內含 .BOX01 或 .BOX03）隱藏捲軸；仍可滑動 */
#RIGHT:has(.BOX01),
#RIGHT:has(.BOX03) {
  scrollbar-width: none;           /* Firefox */
}
#RIGHT:has(.BOX01)::-webkit-scrollbar,
#RIGHT:has(.BOX03)::-webkit-scrollbar {
  width: 0;
  height: 0;                       /* Chrome / Edge / Safari */
}

/* Certifications page: use colored scrollbar like product pages */
body.page-certifications #RIGHT { scrollbar-width: thin; scrollbar-color: #999 #000; }
body.page-certifications #RIGHT::-webkit-scrollbar { width: 12px; height: 12px; }
body.page-certifications #RIGHT::-webkit-scrollbar-track { background: #000; }
body.page-certifications #RIGHT::-webkit-scrollbar-thumb { background-color: #999; border-radius: 6px; }

/* 全站一致的縮放比例（避免產品頁與其他頁不同） */
body { zoom: 110% !important; }

/* 避免產品頁重複：若 #RIGHT 內含 .BOX02（產品頁），就隱藏 HTML #FOOTER，統一使用 ::after */
body:has(#RIGHT .BOX02) #FOOTER {
  display: none !important;
}


/* 只影響首頁：右側 .BOX01 裡的卡片網格 */
#RIGHT .BOX01.home-box { height:auto; overflow:visible; }
#RIGHT .BOX01.home-box .home-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;
}
#RIGHT .BOX01.home-box .tile{ display:block; text-decoration:none; color:#ddd; border:1px solid #223; background:#000; }
#RIGHT .BOX01.home-box .img-wrap{ width:100%; aspect-ratio:1/1; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#000; }
#RIGHT .BOX01.home-box .img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
#RIGHT .BOX01.home-box .label{ text-align:center; font-size:18px; padding:10px 8px 12px; letter-spacing:.5px; }
@media (max-width:900px){ #RIGHT .BOX01.home-box .home-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ #RIGHT .BOX01.home-box .home-grid{ grid-template-columns:1fr; } }


/* 讓左側 Logo 稍微往左（微調量：-2 ~ -12px 看喜好） */
#LEFT > div:first-child {               /* 這個就是包住 Logo 的那層 div:contentReference[oaicite:0]{index=0} */
  text-align: center;                   /* 保持原本置中 */
  margin-left: -17px;                    /* 輕推一點點到左邊 */
}

/* 讓整個選單輕輕往左（不動既有寬度/padding） */
ul.MENU {                               /* 左欄選單容器:contentReference[oaicite:1]{index=1} */
  position: relative;
  left: -15px;                           /* 推一點點即可；想再多就 -8px、-10px 試 */
}

/* Home 仍隱形：排除要顯色的頁面 */
body:not(.page-news):not(.page-collection):not(.page-certifications):not(.page-contact) #RIGHT:has(.BOX01),
body:not(.page-news):not(.page-collection):not(.page-certifications):not(.page-contact) #RIGHT:has(.BOX03) {
  scrollbar-width: none; /* Firefox */
}
body:not(.page-news):not(.page-collection):not(.page-certifications):not(.page-contact) #RIGHT:has(.BOX01)::-webkit-scrollbar,
body:not(.page-news):not(.page-collection):not(.page-certifications):not(.page-contact) #RIGHT:has(.BOX03)::-webkit-scrollbar {
  width: 0; height: 0;   /* Chrome/Edge/Safari */
}

/* 指定頁顯色卷軸 */
body.page-news #RIGHT,
body.page-collection #RIGHT,
body.page-certifications #RIGHT,
body.page-contact #RIGHT {
  scrollbar-width: thin;          /* Firefox */
  scrollbar-color: #999 #000;     /* thumb, track */
}
body.page-news #RIGHT::-webkit-scrollbar,
body.page-collection #RIGHT::-webkit-scrollbar,
body.page-certifications #RIGHT::-webkit-scrollbar,
body.page-contact #RIGHT::-webkit-scrollbar {
  width: 12px; height: 12px;
}
body.page-news #RIGHT::-webkit-scrollbar-track,
body.page-collection #RIGHT::-webkit-scrollbar-track,
body.page-certifications #RIGHT::-webkit-scrollbar-track,
body.page-contact #RIGHT::-webkit-scrollbar-track {
  background: #000;
}
body.page-news #RIGHT::-webkit-scrollbar-thumb,
body.page-collection #RIGHT::-webkit-scrollbar-thumb,
body.page-certifications #RIGHT::-webkit-scrollbar-thumb,
body.page-contact #RIGHT::-webkit-scrollbar-thumb {
  background-color: #999; border-radius: 6px;
}