/* 主視覺 */

html, body {
background-color:#02020f !important;/* 整體背景 */
}
nav{
background-color:#20330c !important;/* 選單背景 */
}
nav.fixed{
background-color:transparent !important;
}
section#notice .sec-inner .sec-body{
background-color:#20330c !important;
}
a#backTop{
background-color: #73de00 !important;
}

section .sec-inner .sec-head .headtitle.headtitlePic {
    height: 300px !important;
}

section#notice ul.list-num {/* 注意事項 */
font-family: microsoft jhenghei;
color:#fff !important;
background-color: #20330c;
}
nav.fixed.open .inner{
background-color: #000 !important;
}
nav.fixed.open .inner a.current{
color: #73de00 !important;
}

.container {
  padding-top: 60px;
  padding-bottom: 0px;
}

/*導引選單顏色*/
nav .inner a {
  font-family:'Micron Basic','Arial',"Noto Sans CJK TC",sans-serif,'微軟正黑體';
  font-size: 18px;
  border-radius: 5px;
  color: #20330c !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #73de00 !important;
}
nav.fixed:before {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 30px;
  font-family: "icomoon";
  border-radius: 50%;
  background-color: #73de00;
}
nav .inner a:hover {
  background-color: #282625;
  transition: .2s;
  filter: brightness(110%);
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px)
}
nav.fixed.open .inner a {
  /* font-size: 1em; */
  width: auto;
  min-height: 20px;
  text-align: center;
  padding: 5px;
  margin: 5px auto;
  font-color: #282625 !important;
  font-family:'Micron Basic','Arial',"Noto Sans CJK TC",sans-serif,'微軟正黑體';
  background-color: #fbe094;
  transition: 0.2s;
}
nav.fixed.open .inner {
  background-color: #73de00!important;
  position: absolute;
  bottom: 0;
  right: calc(100% + 10px);
  display: block;
  width: max-content;
  padding: 15px;
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

/*大標文字*/
section .sec-inner .sec-head .headtitle {
  font-family:'Micron Basic','Arial',"Noto Sans CJK TC",sans-serif,'微軟正黑體';
  color: #fff !important;
  font-size: 3em;
}

/*中標背景*/
section .sec-inner .sec-head .text {
  font-family:'Micron Basic','Arial',"Noto Sans CJK TC",sans-serif,'微軟正黑體';
  color: #20330c;
  background-color:#73de00;
  font-size: 1.7em !important;
  letter-spacing: 0px !important;
}

/*商品描述區塊*/
.wrap-item .item .item-bottom .name {
  background-image: repeating-linear-gradient(
    90deg,
    #73de00 -1%,
    #20330c 101%
  ) !important;
  font-family:'Micron Basic','Arial',"Noto Sans CJK TC",sans-serif,'微軟正黑體';
}
/* 商品卡特點文字 */
.wrap-item.item-card .item .item-bottom .text .discount-text {
  font-family:'Micron Basic','Arial',"Noto Sans CJK TC",sans-serif,'微軟正黑體';
  height: auto !important;
}
/* 商品卡原價 */
.wrap-item.item-card .item .item-bottom .text .real-price{
  font-family:'Micron Basic','Arial',"Noto Sans CJK TC",sans-serif,'微軟正黑體';
}
/* 商品卡特價 */
.wrap-item.item-card .item .item-bottom .text .special-price {
  font-family:'Micron Basic','Arial',"Noto Sans CJK TC",sans-serif,'微軟正黑體';
}

footer {
  position: relative;
  bottom: 0;
  width: 100%;
  background-color: #fff;
}
nav .inner a{
  width: 220px;
  padding:10px !important;
  margin:10px auto !important;
}
a{
  color:white !important;
}
img {
  vertical-align: bottom;
}
@media (min-width:1180px){
  nav .inner a{
    width: 220px !important;
  }
}
@media (max-width:1200px){
  nav .inner a{
    width: 220px !important;
  }
}


.innerboxPC{
  max-width: 1920px;
  margin: 0 auto;
}

.innerboxMB{
  max-width: 1200px;
  margin: 0 auto;
}

img{
  width: 100%;
}

.flex{
  display: flex;
}

.showPC{
  display: block;
}
.showMB{
  display: none;
}

/* --- 商品區塊排版 (4個一排) --- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 電腦版 4 個一排 */
  gap: 20px; /* 圖片之間的間隔大小，可自行微調 */
  justify-items: center; /* 讓圖片在格子內置中 */
  max-width: 1400px; /* 控制容器最大寬度，確保排版好看 */
  margin: 0 auto;
  padding: 3% 20px 6% 20px; /* 避免陰影被切到 */
}

/* --- 單一圖片容器與預設陰影 (#000000) --- */
.product-item {
  display: block;
  width: 100%;
  max-width: 300px; /* 限制圖片最大寬度為 300px */
  box-shadow: 0px 4px 12px #0000000a; /* 預設黑色陰影 */
  transition: box-shadow 0.3s ease; /* 讓陰影顏色變化有平滑漸變效果 */
  text-decoration: none;
}

.product-item img {
  display: block;
  width: 100%;
  height: auto;
}

.product-item:hover {
  box-shadow: 0px 4px 15px #6b000050;
}

.wrapper {
  position: relative; 
  /* 如果你的 .wrapper 沒有明確寬高，可能需要設定 width: 100%; */
}
.link01 {
  display: block; /* 將連結轉為區塊元素 */
  position: absolute;
  z-index: 10;
  width: 11%;
  height: 12%;
  top: 20.5%;
  right: 21.5%;
}
.link02 {
  display: block; /* 將連結轉為區塊元素 */
  position: absolute;
  z-index: 10;
  width: 14%;
  height: 11.6%;
  top: 21.2%;
  right: 14%;
}

/*以下手機板*/
@media (max-width:900px){
  .showPC{
    display: none;
  }
  .showMB{
    display: block;
  }
}

  /* @media screen and (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 10px;
  }
} */