@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&family=Baskervville:ital,wght@0,400..700;1,400..700&family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&family=Pinyon+Script&display=swap");
/* >SASS 繼承 Start =====================================================================*/
/*MUST 將所有主要buttons樣式套用 (在buttons_scss 有預設樣式套用 可再覆蓋) ---*/
.btn-info,
.btn-primary,
.btn-success,
.btn-danger,
.MEM_BTN,
.btn-buy,
.cart_list .btn,
.news_more,
.NP-Buttons .next,
.NP-Buttons .previous,
.btn-muted,
.btn-warning,
.closePopup {
  font-size: 15px;
  letter-spacing: 0.2rem;
  padding: 0.8rem 1.6rem;
  line-height: 1.42857143;
  height: 40px !important;
  border-radius: 5px;
  color: #fff;
  border: 1px solid var(--primary-dark);
  background-color: var(--primary-dark);
  transition: all 0.3s ease-in-out;
}
.btn-info:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.MEM_BTN:hover,
.btn-buy:hover,
.cart_list .btn:hover,
.news_more:hover,
.NP-Buttons .next:hover,
.NP-Buttons .previous:hover,
.btn-muted:hover,
.btn-warning:hover,
.closePopup:hover, .btn-info:focus,
.btn-primary:focus,
.btn-success:focus,
.btn-danger:focus,
.MEM_BTN:focus,
.btn-buy:focus,
.cart_list .btn:focus,
.news_more:focus,
.NP-Buttons .next:focus,
.NP-Buttons .previous:focus,
.btn-muted:focus,
.btn-warning:focus,
.closePopup:focus {
  color: #fff;
  background-color: var(--primary-default) !important;
  border: 1px solid var(--primary-default) !important;
  text-decoration: none;
}

/*文字 內容共用預設(統一)*/
#category_descr,
.product-wrapper, .article-content,
.pd_descr,
.news_content {
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0.6px;
}

/* >SASS 繼承 End =========================================================================*/
:root {
  --primary-default: #3093e7;
  --primary-dark: #195181;
  --sub-default: #c4c9ff;
  --sub-dark: #2d1f73;
  --color-gray: #232429; /* Same */
  --color-gray-900: #393a3f; /* New */
  --color-gray-800: #55565b; /* Davi's Grey */
  --color-gray-700: #75767b; /* Moiety */
  --color-gray-600: #828388; /* Old Silver */
  --color-gray-500: #919297; /* Gray Blue */
  --color-gray-400: #adaeb3; /* Gravity */
  --color-gray-300: #c1c2c7; /* Seashell */
  --color-gray-200: #d3d4d9; /* Light Gray */
  --color-gray-100: #dedfe4; /* Light Diamond */
  --color-gray-050: #f3f4f9; /* White Smoke */
  --color-gray-025: #f9faff; /* White Smoke Light */
  --inquiry-default: rgb(255, 153, 0);
  --inquiry-dark: rgb(255, 202, 26);
}

body {
  font-family: "Inter", "Noto Sans TC", serif !important;
}

/* >Rebecca Animation設定 Start =============================================================*/
/*------------------------------------*/
/* Rebecca Animation目錄 
/*------------------------------------*/
/**
* Animation系列
* Transform系列
* Mask系列
* 寬高系列
* Opacity系列
**/
@keyframes s-fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes s-fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes s-bounce {
  0% {
    transform: translateZ(0);
  }
  15% {
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  25% {
    transform: translateZ(0) scaleY(0.95);
  }
  30%, 100% {
    transform: translateZ(0) scaleY(1);
  }
}
@keyframes s-bounceIn {
  0% {
    transform: rotate(-200deg) scale(0) translateZ(0);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg) scale(1) translateZ(0);
    opacity: 1;
  }
}
@keyframes float {
  0% {
    top: 0px;
  }
  25% {
    top: 4px;
  }
  50% {
    top: 0px;
  }
  75% {
    top: -4px;
  }
  100% {
    top: 0;
  }
}
@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes translateY-100-0 {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes translateX--100-0 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes scale-0-1 {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  80%, 100% {
    transform: scale(0);
  }
}
@keyframes scaleY {
  0% {
    transform: scaleY(1);
  }
  80%, 100% {
    transform: scaleY(0);
  }
}
@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-5deg);
  }
  40% {
    transform: rotate(5deg);
  }
  60% {
    transform: rotate(-5deg);
  }
  80% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes maskX-0-100 {
  0% {
    mask-position: 0% 0;
  }
  100% {
    mask-position: 100% 0%;
  }
}
@keyframes maskX-100-0 {
  0% {
    mask-position: 100% 0;
  }
  100% {
    mask-position: 0% 0%;
  }
}
@keyframes maskY-0-100 {
  0% {
    mask-position: 0% 0;
  }
  100% {
    mask-position: 0% 100%;
  }
}
@keyframes maskY-100-0 {
  0% {
    mask-position: 0% 100%;
  }
  100% {
    mask-position: 0% 0%;
  }
}
@keyframes width-0-100 {
  0% {
    width: 0%;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
@keyframes wh-0-100 {
  0% {
    width: 0%;
    height: 0%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
@keyframes wh-100-0 {
  0% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 0%;
    height: 0%;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  40%, 100% {
    opacity: 1;
  }
}
@keyframes opacity-0-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}
@keyframes opacity-100-0 {
  0% {
    opacity: 100%;
  }
  80% {
    opacity: 50%;
  }
  100% {
    opacity: 0;
  }
}
/* >Rebecca Animation設定 End =============================================================*/
.navbar {
  position: fixed;
  top: 0;
  left: 0%;
  z-index: 999;
  width: 100%;
  max-width: 100%;
  transform-origin: top left;
  background: transparent;
  color: #fff;
  transition: transform 0.5s ease-in-out, background 0.5s ease-in-out, border-radius 0.5s ease-in-out, max-width 0.5s ease-in-out;
}
.navbar.scroll {
  background: rgba(255, 255, 255, 0.8274509804);
  border-radius: 0 0 2rem 0;
  backdrop-filter: blur(12px);
  transform: scale(0.9);
  max-width: 1450px;
}
.navbar.scroll .menu-item a {
  color: var(--color-gray-900);
}
.navbar.scroll .menu-lang svg {
  fill: var(--color-gray-900);
}
.navbar.scroll .menu-logo {
  background-color: transparent;
}
.navbar.scroll .menu-logo img {
  max-width: 70px;
}

.menu-logo {
  background: rgba(240, 245, 249, 0.8);
  color: var(--sub-dark);
  padding: 1.2rem 1.6rem;
  border-radius: 0 0 20px 0;
  transition: all 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  max-width: 350px;
}
.menu-logo a {
  color: var(--sub-dark);
}
.menu-logo a:hover, .menu-logo a:focus {
  text-decoration: none;
}
.menu-logo img {
  max-width: 100px;
  transition: all 0.5s ease-in-out;
}
.menu-logo h5 {
  letter-spacing: 0.3rem;
  font-size: 20px;
  margin: 0;
  font-family: "Noto Serif TC";
}
.menu-logo span {
  display: inline-block;
  line-height: 1.2;
  font-size: 14px;
  margin: 0;
  font-family: "Baskervville";
}
@media (max-width: 1599px) {
  .menu-logo {
    max-width: 330px;
  }
  .menu-logo img {
    max-width: 80px;
  }
}

.menu ul {
  flex: 1;
  gap: 0 0.8rem;
  margin-left: 3.2rem;
}
.menu-item {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.menu-item a {
  color: #fff;
  overflow: hidden;
  font-size: 18px;
  padding: 0.4rem 1.2rem;
  letter-spacing: 0.2rem;
  transition: all 0.3s ease-in-out;
}
.menu-item a:hover, .menu-item a:focus {
  outline: none;
  text-decoration: none;
  color: var(--sub-default);
  letter-spacing: 0.4rem;
}
.menu-item a:hover svg, .menu-item a:focus svg {
  fill: var(--sub-default);
}
.menu-lang a {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
}
.menu-lang a svg {
  fill: #fff;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 1399px) {
  .menu ul {
    margin-left: 1.6rem;
    flex-wrap: wrap;
  }
  .menu-item a {
    padding: 0.4rem 0.8rem;
  }
}

/*手機版*/
@media (max-width: 1199px) {
  .navbar {
    background: rgba(255, 255, 255, 0.8274509804);
    width: 100%;
    border-radius: 0;
    transition: all 0.5s ease-in-out;
  }
  .navbar.scroll {
    border-radius: 0;
    box-shadow: 5px 5px 5px rgba(156, 171, 181, 0.2588235294);
    transform: scale(1);
  }
  .navbar-header {
    width: 100%;
    display: flex;
    align-items: center;
  }
  .navbar-brand {
    flex: 1;
    border-radius: 0 0 20px 0;
    margin-top: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.2rem 0;
  }
  .navbar-brand a {
    display: inline-block;
    height: 100%;
    color: var(--sub-dark);
  }
  .navbar-brand a h5 {
    letter-spacing: 0.3rem;
    font-size: 20px;
    margin: 0;
    font-family: "Noto Serif TC";
  }
  .navbar-brand a span {
    display: inline-block;
    line-height: 1.2;
    font-size: 14px;
    margin: 0;
    font-family: "Baskervville";
  }
  .navbar-brand a:last-child {
    max-width: 220px;
  }
  .navbar-brand a:hover, .navbar-brand a:focus {
    text-decoration: none;
    color: var(--sub-dark);
  }
  .navbar-brand img {
    width: 60px;
    height: 60px;
    max-width: max-content;
  }
}
@media (max-width: 1199px) and (max-width: 470px) {
  .navbar-brand a h5 {
    font-size: 14px;
    letter-spacing: 0rem;
  }
  .navbar-brand a span {
    font-size: 11px;
    letter-spacing: -0.05rem;
  }
  .navbar-brand a:last-child {
    max-width: 160px;
  }
  .navbar-brand img {
    width: 45px;
    height: 45px;
  }
}
@media (max-width: 1199px) and (max-width: 374px) {
  .navbar-brand {
    gap: 0.4rem;
  }
  .navbar-brand img {
    width: 40px;
    height: 40px;
  }
  .navbar-brand a h5 {
    font-size: 13px;
  }
  .navbar-brand a span {
    font-size: 10px;
    letter-spacing: 0;
  }
}
@media (max-width: 1199px) {
  .menu {
    display: none;
    width: 100%;
    padding: 1.2rem 0 1.6rem;
  }
  .menu ul {
    flex-direction: column;
    width: 100%;
    margin: 0;
    gap: 0.8rem;
  }
  .menu .menu-item {
    width: 100%;
  }
  .menu .menu-item a {
    color: var(--color-gray-900);
  }
  .menu .menu-lang svg {
    fill: var(--color-gray-900) !important;
  }
}
.navbar-lang {
  padding: 1.2rem;
}
.navbar-lang a {
  font-family: Baskervville;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sub-dark);
  font-size: 18px;
  gap: 0.4rem;
}
.navbar-lang a:hover, .navbar-lang a:focus {
  text-decoration: none;
  color: var(--sub-dark);
}
.navbar-lang svg {
  fill: var(--sub-dark);
}
@media (max-width: 575px) {
  .navbar-lang a {
    font-size: 16px;
  }
}
@media (max-width: 470px) {
  .navbar-lang a {
    font-size: 14px;
  }
}

/* >--漢堡選單2--------------------------------------------*/
.hamburger {
  margin: 1.6rem 1.2rem;
  position: relative;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 4rem;
  border-radius: 5px;
  transition: all ease-in-out 0.5s;
  cursor: pointer;
}
.hamburger span:first-child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all linear 0.3s;
  width: 3rem;
  height: 0.1rem;
  background-color: var(--sub-dark);
}
.hamburger span:last-child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: inherit;
  width: 3rem;
  height: 0.1rem;
  background-color: transparent;
}
.hamburger span:last-child::before, .hamburger span:last-child::after {
  content: "";
  position: absolute;
  background-color: var(--sub-dark);
  width: 3rem;
  height: 0.1rem;
  transition: all 0.3s;
  left: 50%;
}
.hamburger span:last-child::before {
  transform: translate(-50%, -8px);
}
.hamburger span:last-child::after {
  transform: translate(-50%, 8px);
}
.hamburger.active span:first-child {
  transform: translate(-50%, 5px);
  opacity: 0;
}
.hamburger.active span:last-child::before {
  transform: rotate(45deg);
  left: 0;
}
.hamburger.active span:last-child::after {
  left: 0;
  transform: rotate(-45deg);
}

/* 
>======================================================================
  ~  components 共用元件
  index - about 關於我們
  index - news 最新消息
  index - information 重要資訊
  index - test 檢定內容 & honoers 榮譽分享
  footer  - 頁尾
  category.asp / product.asp 產品頁　/ news.asp
======================================================================*/
a:focus {
  outline: none;
}

.pdf {
  display: inline-block;
  padding: 1.2rem 2.4rem;
  border: 1px solid;
  margin: 1.6rem 0;
  transition: all 0.3s ease-in-out;
}
.pdf:hover, .pdf:focus {
  text-decoration: none;
  color: #fff;
  background-color: var(--primary-dark);
}

body {
  background: url("../../images/bg.webp") repeat-y top;
  width: 100%;
}
@media (min-width: 1921px) {
  body {
    background: url("../../images/bg.webp") repeat-y top/cover;
  }
}

.index {
  overflow: hidden;
  background: url("../../images/bg.webp") repeat-y top;
  width: 100%;
  position: relative;
  z-index: 1;
}
@media (min-width: 1921px) {
  .index {
    background: url("../../images/bg.webp") repeat-y top/cover;
  }
}
.index::after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 4rem;
  left: -20vw;
  background: url("../../images/figure__02.webp") no-repeat left/contain;
  width: 1000px;
  height: 1400px;
}
@media (max-width: 1199px) {
  .index::after {
    width: 50%;
    top: -30%;
  }
}

.hgroup-title {
  font-family: "Abhaya Libre", "Noto Sans TC", serif;
}
.hgroup-title h2 {
  margin-bottom: 0;
  font-size: clamp(30px, 2.5vw + 18px, 48px);
  font-weight: bold;
  letter-spacing: 0.2rem;
  color: transparent; /* 文字顏色設定透明 */
  background-image: linear-gradient(180deg, #c4c9ff, #195181); /* 設定漸層角度及顏色 */
  -webkit-background-clip: text; /* 背景裁剪成文字的前景色 */
  background-clip: text;
}
.hgroup-title span {
  display: inline-block;
  font-weight: 500;
  color: var(--color-gray-700);
  letter-spacing: 0.4rem;
  font-size: clamp(18px, 1vw + 12px, 24px);
}
@media (max-width: 767px) {
  .hgroup-title img {
    max-width: 35px;
  }
}

.hgroup-title-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem 1.6rem;
  width: 100%;
}
.hgroup-title-more .hgroup-title {
  margin-right: auto;
}
@media (max-width: 767px) {
  .hgroup-title-more {
    flex-direction: column;
    align-items: flex-end;
    margin: 0 auto;
  }
}

/*獨立頁面共通設定*/
#category_descr img,
.product-wrapper img {
  width: 100%;
  max-width: max-content;
  border-radius: 8px;
}
#category_descr ul,
#category_descr ol,
.product-wrapper ul,
.product-wrapper ol {
  padding-left: 1.6em;
}
#category_descr ul li,
#category_descr ol li,
.product-wrapper ul li,
.product-wrapper ol li {
  margin: 0.8rem 0;
}
#category_descr ul.list-disc li::marker,
#category_descr ol.list-disc li::marker,
.product-wrapper ul.list-disc li::marker,
.product-wrapper ol.list-disc li::marker {
  font-size: 12px;
}

.article-content h1,
.article-content h2,
.article-content span,
.article-content strong,
.pd_descr h1,
.pd_descr h2,
.pd_descr span,
.pd_descr strong,
.news_content h1,
.news_content h2,
.news_content span,
.news_content strong {
  box-decoration-break: clone;
}
.article-content img,
.pd_descr img,
.news_content img {
  max-width: max-content;
  width: 100% !important;
}

/* btn-more --------------------------------------*/
.btn-more {
  font-family: "Abhaya Libre", "Noto Sans TC", serif;
  font-size: clamp(20px, 0.8vw + 14px, 24px);
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: 0.8rem 2.4rem;
  letter-spacing: 0.15rem;
  transition: all 0.3s ease-in-out;
  border: 1px solid var(--color-gray-800);
  color: var(--color-gray-800);
  position: relative;
  z-index: 2;
  height: clamp(48px, 5vw, 52px);
  width: clamp(130px, 14vw, 160px);
  line-height: 3.4rem;
  overflow: hidden;
}

.btn-more::before,
.btn-more::after,
.btn-more span::before,
.btn-more span::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 25%;
  height: 100%;
  background-color: var(--primary-dark);
  transition: all 0.3s ease-in-out;
}

.btn-more::before {
  top: 0;
  left: -25%;
}

.btn-more::after {
  top: -100%;
  left: 25%;
}

.btn-more span::before {
  top: 100%;
  left: 50%;
}

.btn-more span::after {
  top: 0;
  left: 100%;
}

.btn-more:hover,
.btn-more:focus {
  color: #fff;
  text-decoration: none;
}

.btn-more:hover::before,
.btn-more:focus::before {
  top: 0;
  left: 0;
}

.btn-more:hover::after,
.btn-more:hover span::before,
.btn-more:focus::after,
.btn-more:focus span::before {
  top: 0;
}

.btn-more:hover span::after,
.btn-more:focus span::after {
  left: 75%;
}

/* MUST主要通用按鈕  ------------------------------*/
/*清除BS預設點擊 邊框樣式*/
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: none;
  box-shadow: none;
  text-decoration: none;
}

/*重新輸入 返回購物車按鈕*/
.btn-muted,
.btn-warning,
.closePopup {
  background-color: var(--color-gray-400) !important;
  border: 1px solid var(--color-gray-400) !important;
  color: #fff;
}
.btn-muted:hover, .btn-muted:focus,
.btn-warning:hover,
.btn-warning:focus,
.closePopup:hover,
.closePopup:focus {
  color: #fff;
  background-color: var(--color-gray-500) !important;
  border: 1px solid var(--color-gray-500) !important;
}

/*詢價車 按鈕*/
.btn-inquiry {
  background-color: var(--inquiry-default) !important;
  border: 1px solid var(--inquiry-default) !important;
}
.btn-inquiry:hover, .btn-inquiry:focus {
  background-color: var(--inquiry-dark) !important;
  border: 1px solid var(--inquiry-dark) !important;
}

/*讓按鈕+光澤感圖*/
.btn-bg {
  background-image: url(/ec99/images/logo-btn.png);
  background-repeat: no-repeat;
}

/*獨立頁版圖*/
.page-header-style {
  background: url(../../images/banner__inner.png) no-repeat center/cover;
  text-align: center;
  width: 100%;
  height: 500px;
  padding: 200px 0 0px;
  position: relative;
  font-family: "Abhaya Libre", "Noto Sans TC", serif;
}
.page-header-style h2 {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 28px);
  color: #fff;
  letter-spacing: 0.4rem;
  position: relative;
  margin: 0;
  text-transform: uppercase;
}
.page-header-style span {
  font-weight: 500;
  display: block;
  font-size: clamp(16px, 1.8vw, 20px);
  color: #fff;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}
@media (max-width: 1199px) {
  .page-header-style::before {
    right: 5%;
    width: 250px;
  }
}
@media (max-width: 767px) {
  .page-header-style {
    padding: 130px 0 0px;
    height: 350px;
  }
  .page-header-style::before {
    right: 2rem;
    width: 250px;
    height: 200px;
    bottom: -4%;
  }
}
@media (max-width: 575px) {
  .page-header-style::before {
    width: 200px;
  }
}

/* 
>======================================================================
  components 共用元件
  ~ index - about 關於我們
  index - news 最新消息
  index - information 重要資訊
  index - test 檢定內容 & honoers 榮譽分享
  footer  - 頁尾
  category.asp / product.asp 產品頁　/ news.asp
======================================================================*/
.about-content {
  text-align: center;
  font-size: clamp(16px, 0.8vw + 14px, 18px);
  line-height: 2.4;
}
@media (max-width: 767px) {
  .about-content {
    line-height: 2;
  }
}

/* 
>======================================================================
  components 共用元件
  index - about 關於我們
  ~ index - news 最新消息
  index - information 重要資訊
  index - test 檢定內容 & honoers 榮譽分享
  footer  - 頁尾
  category.asp / product.asp 產品頁　/ news.asp
======================================================================*/
.news {
  flex: 1;
  display: flow-root;
}
.news-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.news-content .newsDate,
.news-content .pic,
.news-content .desc_cls {
  display: none;
}
.news-content .rwdnewsli:hover, .news-content .rwdnewsli:focus {
  cursor: pointer;
}
.news-content .rwdnewsli:hover h4::after, .news-content .rwdnewsli:focus h4::after {
  width: 100%;
}
.news-content .newscontent {
  position: relative;
  display: grid;
  grid-template-columns: max-content 1fr 1fr max-content;
  grid-template-rows: repeat(2, max-content);
  align-items: center;
  gap: 0 1.6rem;
  margin: 1.6rem 0;
}
.news-content .ctydate {
  grid-row: 1/-1;
  order: -1;
  letter-spacing: 0.2rem;
  font-size: clamp(14px, 0.29vw + 11px, 16px);
  color: var(--color-gray-800);
  padding: 0.8rem 2.4rem;
  border: 1px solid currentColor;
}
.news-content h4 {
  grid-column: 2/4;
  position: relative;
  letter-spacing: 0.2rem;
  white-space: nowrap; /* 防止文字換行 */
  overflow: hidden; /* 隱藏超出範圍的文字 */
  text-overflow: ellipsis; /* 超過範圍的文字顯示省略符號 */
  padding-bottom: 12px;
}
.news-content h4 a {
  color: var(--color-gray-800);
}
.news-content h4 a:hover, .news-content h4 a:focus {
  text-decoration: none;
}
.news-content h4::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-gray-200);
}
.news-content h4::after {
  z-index: -1;
  position: absolute;
  content: "";
  left: 0;
  bottom: 0rem;
  width: 0%;
  height: 80%;
  background-color: rgba(48, 146, 231, 0.2);
  transition: width 0.8s ease-in-out;
}
.news-content .newsDateAll {
  display: flex;
  font-size: clamp(16px, 0.29vw + 15px, 18px);
  color: var(--primary-dark);
  padding: 0rem;
  border-radius: 5px;
  letter-spacing: 0.2rem;
  transition: all 0.5s ease-in-out;
}
@media (max-width: 767px) {
  .news-content .newscontent {
    grid-template-rows: max-content max-content max-content;
    gap: 0 0.8rem;
  }
  .news-content .newscontent::after {
    width: 100%;
  }
  .news-content .newsDateAll {
    padding: 0.4rem;
    grid-row: 1/2;
  }
  .news-content .ctydate {
    grid-row: 1/2;
    grid-column: 1/2;
    padding: 0.8rem 1.2rem;
  }
  .news-content h4 {
    padding: 0rem 0 1.2rem;
    grid-row: 3/4;
    grid-column: 1/-2;
  }
  .news-content h4 a {
    font-size: 17px;
  }
  .news-content h4::after {
    height: 50%;
  }
}

/* 
>======================================================================
  components 共用元件
  index - about 關於我們
  index - news 最新消息
  ~ index - information 重要資訊
  index - test 檢定內容 & honoers 榮譽分享
  footer  - 頁尾
  category.asp / product.asp 產品頁　/ news.asp
======================================================================*/
.information-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2.4rem;
}
.information-item {
  --spacing: 1.2rem;
  position: relative;
  overflow: hidden;
}
.information-item::before, .information-item::after {
  content: "";
  position: absolute;
  z-index: 2;
  transition: all 0.3s ease-in-out;
}
.information-item::before {
  top: var(--spacing);
  left: var(--spacing);
  width: 1px;
  height: calc(100% - var(--spacing) * 2);
  background: rgb(255, 255, 255);
}
.information-item::after {
  top: var(--spacing);
  left: var(--spacing);
  width: calc(100% - var(--spacing) * 2);
  height: 1px;
  background: rgb(255, 255, 255);
}
.information-item img {
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.information-item-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  width: 100%;
}
.information-item-title h5 {
  font-size: clamp(20px, 0.82vw + 17.7px, 28px);
  letter-spacing: 0.4rem;
  margin-bottom: 0;
}
.information-item-title span {
  display: inline-block;
  letter-spacing: 0.1rem;
  font-size: clamp(18px, 0.8vw + 12.5px, 24px);
  font-family: "Abhaya Libre", "Noto Sans TC", serif;
  line-height: 1;
}
.information-item:hover img {
  transform: scale(1.1);
}
.information-item:hover::before {
  transform: scaleY(0);
}
.information-item:hover::after {
  transform: scaleX(0);
}
.information-item:hover .information-line::before {
  transform: scaleY(0);
}
.information-item:hover .information-line::after {
  transform: scaleX(0);
}
.information-line::before, .information-line::after {
  content: "";
  position: absolute;
  z-index: 2;
  transition: all 0.3s ease-in-out;
}
.information-line::before {
  top: var(--spacing);
  right: var(--spacing);
  width: 1px;
  height: calc(100% - var(--spacing) * 2);
  background: rgb(255, 255, 255);
}
.information-line::after {
  bottom: var(--spacing);
  left: var(--spacing);
  width: calc(100% - var(--spacing) * 2);
  height: 1px;
  background: rgb(255, 255, 255);
}
@media (max-width: 767px) {
  .information-container {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .information-item {
    max-height: 200px;
  }
}

/* 
>======================================================================
  components 共用元件
  index - about 關於我們
  index - news 最新消息
  index - information 重要資訊
  ~ index - test 檢定內容 & honoers 榮譽分享
  footer  - 頁尾
  category.asp / product.asp 產品頁　/ news.asp
======================================================================*/
.test {
  position: relative;
}
.test .hgroup-title-more {
  position: absolute;
  left: 10%;
  top: 55%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem 1.6rem;
  width: 45%;
  max-width: 600px;
}
.test img {
  width: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .test .hgroup-title-more {
    top: 50%;
    width: max-content;
  }
  .test img {
    min-height: 500px;
  }
}

.honors {
  padding-bottom: 40rem;
}
@media (max-width: 767px) {
  .honors {
    padding-bottom: 25rem;
  }
}

/* 
>======================================================================
  components 共用元件
  index - about 關於我們
  index - news 最新消息
  index - information 重要資訊
  index - test 檢定內容 & honoers 榮譽分享
  ~ footer  - 頁尾
  category.asp / product.asp 產品頁　/ news.asp
======================================================================*/
.footerwrap {
  position: relative;
  z-index: 99;
  background: linear-gradient(to bottom, rgba(247, 247, 250, 0) 0%, #a7cded 25%, #4082b9 100%);
  margin-top: -14rem;
  padding: 13rem 0rem 0rem;
}

.footer-title {
  font-size: 32px;
  font-weight: bold;
  font-family: "Noto Serif TC";
  color: #fff;
  max-width: 310px;
}
.footer-title h2 {
  margin: 0;
  margin-bottom: 0.4rem;
  letter-spacing: 0.4rem;
}
.footer-title span {
  display: inline-block;
  margin: 0;
  font-weight: normal;
  font-size: 20px;
  letter-spacing: 0.02rem;
  font-family: "Baskervville";
  line-height: 1.2;
}
.footer-title span a {
  color: #fff;
  text-decoration: none;
}
.footer-container {
  padding: 0 1.6rem;
}
.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-content .d-flex {
  flex: 1 0 410px;
  width: 100%;
}
.footer-community {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem 2.4rem;
}
.footer-community a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-contacts {
  display: flex;
  align-items: flex-start;
  gap: 0rem 2.4rem;
  flex-wrap: wrap;
}
.footer-contacts a {
  color: #fff;
  text-decoration: none;
}
.footer-contacts a:hover, .footer-contacts a:focus {
  text-decoration: underline;
}
.footer-contact {
  display: flex;
  align-items: center;
  gap: 0.8rem 0.4rem;
  margin: 0.4rem 0;
}
.footer-contact span,
.footer-contact h4 {
  color: #fff;
  font-size: clamp(16px, 2vw, 17px);
  letter-spacing: 0.2rem;
  word-break: break-all;
}
.footer-contact a {
  color: #fff;
  text-decoration: underline;
}
.footer-contact-multiple {
  align-items: start;
}
.footer-contact-column {
  display: flex;
  flex-direction: column;
}
.footer-copyright {
  padding: 0.8rem 0.8rem 1.6rem;
  padding-right: 0;
  text-align: right;
}
.footer-copyright small,
.footer-copyright p {
  font-size: 14px;
  letter-spacing: 0.1rem;
  color: #fff;
  margin: 0;
}
@media (max-width: 1399px) {
  .footer-content {
    flex-wrap: wrap;
  }
}
@media (max-width: 767px) {
  .footer-content {
    flex-direction: column;
    gap: 2.4rem;
  }
  .footer-content .d-flex {
    flex: 1 0 auto;
    width: 100%;
  }
  .footer-copyright {
    text-align: center;
  }
}

/* ~ sidemenu 側選單 start =========================================== */
.sidemenu {
  position: fixed;
  z-index: 99;
  right: 0;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  gap: 0;
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  background: var(--primary-dark);
  border-radius: 20px 0 0 20px;
  overflow: hidden;
}

.sidemenu-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  position: relative;
}
.sidemenu-item .btn-top svg {
  stroke: #fff;
  fill: transparent;
}
.sidemenu-item svg {
  fill: #fff;
  width: 38px;
  transition: all 0.3s ease-in-out;
}
.sidemenu-item + .sidemenu-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 40px;
  height: 1px;
  background-color: #fff;
}

.sidemenu-item > * {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidemenu-item:hover .btn-top svg {
  fill: transparent;
  stroke: var(--sub-default);
}
.sidemenu-item:hover svg {
  fill: var(--sub-default);
}

.sidemenu.active {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 767px) {
  .sidemenu {
    border-radius: 5px 0 0 5px;
    bottom: 25%;
  }
  .sidemenu-item {
    width: 50px;
    height: 50px;
  }
  .sidemenu-item svg {
    width: 30px;
  }
}
/* ~ sidemenu 側選單 end =========================================== */
/* 
>======================================================================
  components 共用元件
  index - about 關於我們
  index - news 最新消息
  index - information 重要資訊
  index - test 檢定內容 & honoers 榮譽分享
  footer  - 頁尾
  ~ category.asp / product.asp 產品頁　/ news.asp
======================================================================*/
/* ~普通側邊選單(包含news) + 麵包屑 ------------------------*/
/* 產品頁的 menu一開始隱藏 */
.category-wrapper .aside-title,
.product-wrapper .aside-title,
.search-wrapper .aside-title,
.news-wrapper .aside-title,
.type_icon,
.newsbar {
  display: none;
}
@media (max-width: 767px) {
  .category-wrapper .aside-title,
  .product-wrapper .aside-title,
  .search-wrapper .aside-title,
  .news-wrapper .aside-title,
  .type_icon,
  .newsbar {
    display: block;
  }
}

.newsbar {
  background: transparent;
}

/* 產品頁側邊選單*/
h2.aside-title {
  display: none;
}

h2.aside-title img {
  max-width: 20px;
}

@media screen and (max-width: 767px) {
  h2.aside-title {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--color-gray-900);
    background-color: transparent;
    margin: 1.6rem 0;
    padding-left: 3rem;
    font-family: "Noto Serif TC";
  }
  h2.aside-title::before {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--sub-default) 30%, var(--primary-dark));
    filter: blur(1px);
  }
  h2.aside-title:after {
    content: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.16797 10.8333H5.00131C4.76519 10.8333 4.56742 10.7533 4.40797 10.5933C4.24853 10.4333 4.16853 10.2355 4.16797 9.99999C4.16742 9.76444 4.24742 9.56666 4.40797 9.40666C4.56853 9.24666 4.7663 9.16666 5.00131 9.16666H9.16797V4.99999C9.16797 4.76388 9.24797 4.5661 9.40797 4.40666C9.56797 4.24722 9.76575 4.16721 10.0013 4.16666C10.2369 4.1661 10.4349 4.2461 10.5955 4.40666C10.756 4.56722 10.8358 4.76499 10.8346 4.99999V9.16666H15.0013C15.2374 9.16666 15.4355 9.24666 15.5955 9.40666C15.7555 9.56666 15.8352 9.76444 15.8346 9.99999C15.8341 10.2355 15.7541 10.4336 15.5946 10.5942C15.4352 10.7547 15.2374 10.8344 15.0013 10.8333H10.8346V15C10.8346 15.2361 10.7546 15.4342 10.5946 15.5942C10.4346 15.7542 10.2369 15.8339 10.0013 15.8333C9.76575 15.8328 9.56797 15.7528 9.40797 15.5933C9.24797 15.4339 9.16797 15.2361 9.16797 15V10.8333Z" fill="%23393a3f"/></svg>');
    position: absolute;
    top: 50%;
    right: 15px;
    font-size: 18px;
    color: #585858;
    transition: all 200ms ease-out;
  }
  h2.aside-title.is-active::after {
    content: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.16406 10H15.8307" stroke="%23393a3f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>');
    position: absolute;
    top: 50%;
    right: 15px;
    font-size: 18px;
    color: #585858;
    transition: all 200ms ease-out;
  }
}
.category-wrapper aside .nav,
.search-wrapper aside .nav,
.product-wrapper aside .nav,
.news-wrapper aside .NEWS_type {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  margin-bottom: 4.8rem;
}
.category-wrapper aside .nav .category_parent_link a,
.category-wrapper aside .nav .nav_cate_item a,
.search-wrapper aside .nav .category_parent_link a,
.search-wrapper aside .nav .nav_cate_item a,
.product-wrapper aside .nav .category_parent_link a,
.product-wrapper aside .nav .nav_cate_item a,
.news-wrapper aside .NEWS_type .category_parent_link a,
.news-wrapper aside .NEWS_type .nav_cate_item a {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  gap: 1.2rem;
}
.category-wrapper aside .nav .category_parent_link .fa,
.category-wrapper aside .nav .nav_cate_item .fa,
.search-wrapper aside .nav .category_parent_link .fa,
.search-wrapper aside .nav .nav_cate_item .fa,
.product-wrapper aside .nav .category_parent_link .fa,
.product-wrapper aside .nav .nav_cate_item .fa,
.news-wrapper aside .NEWS_type .category_parent_link .fa,
.news-wrapper aside .NEWS_type .nav_cate_item .fa {
  margin-bottom: 0.2rem;
}
.category-wrapper aside .nav .category_parent_link .fa::before,
.category-wrapper aside .nav .nav_cate_item .fa::before,
.search-wrapper aside .nav .category_parent_link .fa::before,
.search-wrapper aside .nav .nav_cate_item .fa::before,
.product-wrapper aside .nav .category_parent_link .fa::before,
.product-wrapper aside .nav .nav_cate_item .fa::before,
.news-wrapper aside .NEWS_type .category_parent_link .fa::before,
.news-wrapper aside .NEWS_type .nav_cate_item .fa::before {
  font-size: 12px;
}
.category-wrapper aside .nav .active.topic,
.category-wrapper aside .nav .topic,
.search-wrapper aside .nav .active.topic,
.search-wrapper aside .nav .topic,
.product-wrapper aside .nav .active.topic,
.product-wrapper aside .nav .topic,
.news-wrapper aside .NEWS_type .active.topic,
.news-wrapper aside .NEWS_type .topic {
  color: #fff;
  background-color: var(--primary-dark);
}
.category-wrapper aside .nav li,
.search-wrapper aside .nav li,
.product-wrapper aside .nav li,
.news-wrapper aside .NEWS_type li {
  padding: 0;
  margin: 0;
}
.category-wrapper aside .nav li a,
.search-wrapper aside .nav li a,
.product-wrapper aside .nav li a,
.news-wrapper aside .NEWS_type li a {
  border-radius: 0rem;
  display: inline-block;
  padding: 1.2rem 2.4rem;
  width: 100%;
  color: #202020;
  position: relative;
  border-radius: 5px;
}
.category-wrapper aside .nav li a:hover, .category-wrapper aside .nav li a:focus,
.search-wrapper aside .nav li a:hover,
.search-wrapper aside .nav li a:focus,
.product-wrapper aside .nav li a:hover,
.product-wrapper aside .nav li a:focus,
.news-wrapper aside .NEWS_type li a:hover,
.news-wrapper aside .NEWS_type li a:focus {
  background-color: var(--primary-dark) !important;
  color: #fff !important;
}
.category-wrapper aside .nav li .topic,
.search-wrapper aside .nav li .topic,
.product-wrapper aside .nav li .topic,
.news-wrapper aside .NEWS_type li .topic {
  color: #fff;
  background-color: var(--primary-dark);
  border-radius: 5px;
}
.category-wrapper aside .nav li .topic + .badge,
.search-wrapper aside .nav li .topic + .badge,
.product-wrapper aside .nav li .topic + .badge,
.news-wrapper aside .NEWS_type li .topic + .badge {
  color: #202020;
  background-color: #fff;
}
@media (max-width: 767px) {
  .category-wrapper aside .nav,
  .search-wrapper aside .nav,
  .product-wrapper aside .nav,
  .news-wrapper aside .NEWS_type {
    gap: 0.8rem 0rem;
    padding: 0rem;
  }
  .category-wrapper aside .nav .nav_cate_item .active.topic,
  .search-wrapper aside .nav .nav_cate_item .active.topic,
  .product-wrapper aside .nav .nav_cate_item .active.topic,
  .news-wrapper aside .NEWS_type .nav_cate_item .active.topic {
    font-weight: normal;
  }
  .category-wrapper aside .nav li,
  .search-wrapper aside .nav li,
  .product-wrapper aside .nav li,
  .news-wrapper aside .NEWS_type li {
    width: 50%;
  }
  .category-wrapper aside .nav li a,
  .search-wrapper aside .nav li a,
  .product-wrapper aside .nav li a,
  .news-wrapper aside .NEWS_type li a {
    margin: 0 0.8rem;
    width: calc(100% - 1.6rem);
    text-align: center;
    border: 3px double #a2b4c3;
  }
}
@media (max-width: 575px) {
  .category-wrapper aside .nav li,
  .search-wrapper aside .nav li,
  .product-wrapper aside .nav li,
  .news-wrapper aside .NEWS_type li {
    width: 100%;
  }
}

.news-wrapper aside .NEWS_type a {
  padding-right: 4.8rem !important;
}
.news-wrapper aside .NEWS_type .badge {
  color: #fff;
  background-color: var(--primary-default);
}

/*NEWS內頁跑版問題*/
h1.news_title + p {
  padding-left: 1.6rem;
}

h1.news_title {
  font-size: clamp(24px, 2.5vw, 30px);
  line-height: 1.5;
}

/*麵包屑*/
.breadcrumb {
  background-color: transparent;
  padding: 1rem 0;
  margin: 1rem 0;
}
.breadcrumb li span,
.breadcrumb li a {
  color: #3b3b3b !important;
}

/* ~新聞內容 ---------------------------------------------------------------- */
/* !NEWS內頁跑版問題*/
h1.news_title + p {
  padding-left: 1.6rem;
}

/*pad以上 2欄*/
@media (min-width: 992px) {
  .news-content .row > .col-md-12 {
    width: 100%;
  }
}
.news-content .news_more {
  background-color: transparent;
  border: none;
  position: absolute;
  right: 3rem;
  bottom: 1.2rem;
}
.news-content .news_more:hover {
  background-color: transparent;
}
@media (max-width: 991px) {
  .news-content .news_more {
    right: 0rem;
  }
}
.news-content .pagination {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 3rem;
}

.news-content .newslist {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 350px auto;
  border-radius: 0px;
  padding: 2.4rem 2.4rem 2.4rem 12.6rem;
  margin: 0;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-gray-100);
  transition: all 0.3s ease-in-out;
  position: relative;
}
.news-content .newslist .news_imgBox .news_imgBox-inner,
.news-content .newslist .news_imgBox .news_imgBox-fit,
.news-content .newslist .news_imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 12px;
}
.news-content .newslist .caption {
  display: flex;
  flex-direction: column;
}
.news-content .newslist .caption .news_author,
.news-content .newslist .caption .news_date img,
.news-content .newslist .caption .news_sort img {
  display: none;
}
.news-content .newslist .caption .news_info {
  color: var(--color-gray-800);
  font-size: 16px;
  letter-spacing: 0.2rem;
  line-height: 2.9rem;
  margin-bottom: 2.4rem;
  width: 100%;
  overflow: hidden; /*隱藏超出部分*/
  text-overflow: ellipsis; /*顯示省略號*/
  display: -webkit-box; /*使用 WebKit 彈性盒子布局*/
  -webkit-line-clamp: 3; /*顯示最多兩行*/
  -webkit-box-orient: vertical; /*盒子方向為垂直 */
}
.news-content .newslist .caption h3 {
  font-size: 18px;
  width: 100%;
  overflow: hidden; /*隱藏超出部分*/
  text-overflow: ellipsis; /*顯示省略號*/
  display: -webkit-box; /*使用 WebKit 彈性盒子布局*/
  -webkit-line-clamp: 2; /*顯示最多兩行*/
  -webkit-box-orient: vertical; /*盒子方向為垂直 */
  letter-spacing: 0.15rem;
  line-height: 3rem;
}
.news-content .newslist .caption p:first-of-type {
  order: -1;
}
.news-content .newslist {
  /* MUST 分割日期樣式 */
}
.news-content .newslist .news_date {
  flex-direction: column;
  display: flex;
  gap: 0 0.8rem;
  position: absolute;
  left: 1.6rem;
  top: 0;
  padding: 2.4rem;
  border-radius: 15px;
  font-family: "Inter";
  font-size: clamp(16px, 1.7vw, 18px);
  letter-spacing: 0.1rem;
}
.news-content .newslist .news_date .newsDateMonth {
  position: relative;
  margin-bottom: 1.2rem;
}
.news-content .newslist .news_date .newsDateMonth::before {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 4rem;
  height: 3px;
  background-color: var(--color-gray-900);
}
.news-content .newslist .news_date .newsDateDay {
  font-size: 50px;
}
.news-content .newslist:hover {
  background-color: color-mix(in srgb, #fff, #658f8b 5%);
}
@media (max-width: 1199px) {
  .news-content .newslist {
    grid-template-columns: 1fr;
    grid-template-rows: 200px auto;
  }
}
@media (max-width: 575px) {
  .news-content .newslist {
    grid-template-rows: 150px auto;
    padding: 2.4rem 1.6rem 2.4rem 7.2rem;
  }
  .news-content .newslist .news_date {
    transform: scale(0.8);
    transform-origin: top left;
    padding: 3.6rem 1.6rem 2.4rem 0;
  }
}

/* icon調整間距 (包含內 外頁連動)*/
.news_date,
.news_sort,
.news_author {
  margin-right: 10px;
  border-radius: 1rem;
  color: var(--color-gray-700);
}

/* 最新消息分頁 樣式 回饋效果 */
.pagination li a {
  color: #202020;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.pagination > li > a:focus,
.pagination > li > a:hover {
  background-color: var(--primary-dark);
  color: #f0f0f0;
  /* border: #202020 1px solid; */
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover {
  border-color: transparent;
  color: #f0f0f0;
  background-color: var(--primary-dark);
}

/* buttonLine__03 --------------------------------------*/
.newslist .news_more {
  height: max-content !important;
}
.newslist .buttonLine__03 {
  float: right;
  background: transparent;
  white-space: nowrap;
  display: inline-block;
  text-align: center;
  color: #2d2d2d;
  letter-spacing: 0.15rem;
  height: 55px;
  line-height: 3.8rem;
  padding-right: 2.4rem;
  margin-right: 2.4rem;
  transition: all 0.2s linear 0s;
  position: relative;
  z-index: 2;
  border: none;
  position: relative;
}
.newslist .buttonLine__03::after {
  content: "";
  position: absolute;
  width: 4rem;
  height: 1px;
  background-color: currentColor;
  top: 50%;
  right: 0rem;
  margin-left: 1rem;
}
.newslist .buttonLine__03 .buttonLine__arrow {
  display: inline-block;
  position: relative;
  top: -0.4rem;
  margin-left: 2rem;
  transition: all 0.2s linear;
}
.newslist .buttonLine__03 .buttonLine__arrow::before {
  content: "";
  position: absolute;
  width: 0.8rem;
  height: 1px;
  background-color: currentColor;
  transform: rotate(45deg) translateY(-50%);
  transform-origin: right;
  top: 50%;
  right: -3rem;
  margin-left: 1rem;
}
.newslist .buttonLine__03 .buttonLine__arrow::after {
  content: "";
  position: absolute;
  width: 0.8rem;
  height: 1px;
  background-color: currentColor;
  transform: rotate(-45deg) translateY(-50%);
  transform-origin: right;
  top: 50%;
  right: -3rem;
  margin-left: 1rem;
}

.newslist:hover .news_more,
.newslist:focus .news_more {
  border: none !important;
  background-color: transparent !important;
}
.newslist:hover .buttonLine__03::after,
.newslist:hover .buttonLine__03::after,
.newslist:hover .buttonLine__03::after,
.newslist:focus .buttonLine__03::after,
.newslist:focus .buttonLine__03::after,
.newslist:focus .buttonLine__03::after {
  animation: float-ml-2 1s infinite;
}
.newslist:hover .buttonLine__03.buttonLine__arrow,
.newslist:hover .buttonLine__03.buttonLine__arrow,
.newslist:hover .buttonLine__03 .buttonLine__arrow,
.newslist:focus .buttonLine__03.buttonLine__arrow,
.newslist:focus .buttonLine__03.buttonLine__arrow,
.newslist:focus .buttonLine__03 .buttonLine__arrow {
  animation: float-ml-2 1s infinite;
}
@keyframes float-ml-2 {
  0% {
    margin-left: 2rem;
  }
  50% {
    margin-left: 1.5rem;
    margin-right: 0.5rem;
  }
  100% {
    margin-left: 2rem;
  }
}

/*頁碼*/
.pagination li a {
  background-color: transparent !important;
  border-radius: 8px !important;
  border: none !important;
  margin: 0 0.4rem;
}
.pagination li.active a, .pagination li:hover a {
  background: var(--primary-dark) !important;
  color: #fff !important;
}

/*獨立頁面 項目*/
.category-link {
  display: inline-block;
  overflow: hidden;
  border-radius: 5px;
  width: 100%;
}
.category-link img {
  max-width: 100% !important;
  max-height: 220px;
  object-fit: contain;
  transition: all 0.5s ease-in-out;
}
.category-title h5 {
  text-align: center;
  margin: 0;
  line-height: 1.5;
}
.category-title a {
  color: var(--color-gray-800);
  letter-spacing: 0.2rem;
  font-size: 16px;
}
.category-title a:hover, .category-title a:focus {
  text-decoration: none;
}
.category-item {
  margin: 0.8rem 0;
}
.category-item:hover img, .category-item:focus img {
  transform: scale(1.1);
}

/*商品列表頁 ---------*/
#myTab {
  display: none;
}

.popular_products .prd_info {
  display: none;
}
.popular_products .li-item {
  background: transparent;
  border: none;
}
.popular_products .li-item .view {
  margin-bottom: 0.4rem;
}
.popular_products .li-item h4 {
  font-size: 20px;
  letter-spacing: 0.1rem;
  color: var(--color-gray-900);
  text-align: center;
  white-space: nowrap; /* 防止文字換行 */
  overflow: hidden; /* 隱藏超出範圍的文字 */
  text-overflow: ellipsis; /* 超過範圍的文字顯示省略符號 */
}
.popular_products .li-item h4 small {
  padding: 0.8rem 0;
  display: block;
  line-height: 1.2;
  white-space: nowrap; /* 防止文字換行 */
  overflow: hidden; /* 隱藏超出範圍的文字 */
  text-overflow: ellipsis; /* 超過範圍的文字顯示省略符號 */
}
.popular_products .li-item .imgBox {
  overflow: hidden;
  background-color: var(--color-gray-025);
  border: none;
  border-radius: 5px;
}
.popular_products .li-item .imgBox img {
  transition: all 0.5s ease-in-out;
}
.popular_products .li-item .btn {
  display: none;
  transition: all 0.5s ease-in-out;
  margin-top: 1.6rem;
  float: right;
  letter-spacing: 0.2rem;
}
.popular_products .li-item .btn:hover, .popular_products .li-item .btn:focus {
  background: var(--primary-default);
}
.popular_products .li-item:hover, .popular_products .li-item:focus {
  box-shadow: none;
  background-color: transparent;
}
.popular_products .li-item:hover .imgBox img, .popular_products .li-item:focus .imgBox img {
  transform: translate(-50%, -50%) scale(1.1);
}
.popular_products .li-item:hover .btn, .popular_products .li-item:focus .btn {
  background-color: var(--primary-default);
  color: #f0f0f0;
}

/*products.asp 產品內頁*/
.product-wrapper .info_card_box {
  line-height: 1.8;
  font-style: italic;
}
.product-wrapper #prod_img {
  margin: 0 auto;
  display: flex;
}
.product-wrapper #prod_img img {
  border-radius: 5px;
  max-height: 300px !important;
}
.product-wrapper #pd_name {
  font-size: 24px;
  letter-spacing: 0.2rem;
  padding-bottom: 0.8rem;
  color: var(--primary-dark);
  line-height: 1.8;
}
.product-wrapper #pd_name small {
  display: block;
  font-size: 20px;
  line-height: 1.5;
}
.product-wrapper #pd_descr hr {
  border-top: 1px solid #cccccc;
}

div#zoom_01-zoomContainer {
  left: -100px !important;
  width: 10px;
  height: 10px;
}