/* 主視覺 */
body {     margin: 0;     padding: 0;  }
html, body {
  background-color:#ffffff !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: #00DBFF !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: 0px;
  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:1400px){
  nav .inner a{
    width: 220px !important;
  }
}

.bg1{
  background-image: url("../images/bg1.jpg");
}
.bg2{
  background-image: url("../images/bg2.jpg");
}
.bg3{
  background-image: url("../images/bg3.jpg");
}
.bg4{
  background-image: url("../images/bg4.jpg");
    padding-left: 7.5%;
  padding-right: 7.5%;
}
.bg5{
  background-image: url("../images/bg5.jpg");
}

.bg1, .bg2, .bg3, .bg4, .bg5{
  background-position: top center;
  background-repeat: no-repeat;
}

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

.innerbox1400{
  max-width: 1400px;
  margin: 0 auto;
}.

/* 影片區塊設定 */
.innerbox-video {
  max-width: 1200px;  /* 限制最大寬度與原影片一致 */
  width: 100%;       /* 關鍵：讓容器寬度在手機版能縮小 */
  margin: 0 auto;    /* 讓影片區塊置中 */
}

.innerbox-video iframe {
  width: 70%;           /* 寬度填滿外層容器 */
  height: auto;          /* 高度自動 */
  aspect-ratio: 16 / 9;  /* 修正：YouTube 標準比例為 16:9 */
  display: block;        /* 移除底部留白 */
  margin: 0 auto;    /* 讓影片區塊置中 */
}

.innerbox-video1400 {
  max-width: 1200px;  /* 限制最大寬度與原影片一致 */
  width: 100%;       /* 關鍵：讓容器寬度在手機版能縮小 */
  margin: 0 auto;    /* 讓影片區塊置中 */
}

.innerbox-video1400 iframe {
  width: 100%;           /* 寬度填滿外層容器 */
  height: auto;          /* 高度自動 */
  aspect-ratio: 16 / 9;  /* 修正：YouTube 標準比例為 16:9 */
  display: block;        /* 移除底部留白 */
  margin: 0 auto;    /* 讓影片區塊置中 */
}

img{
  width: 100%;
}

.flex{
  display: flex;
}

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

.ct{
  position: relative;
}

.wrapper {
  position: relative; 
}

.wrapper2 {
  position: relative; 
  width: 100%; /* 確保容器寬度正確 */
}

.ct1 {
  width: 100%;
  height: auto;
  display: block;
}


.ct5 {
  width: 100%;
  height: auto;
  display: block;
}

/* 右下角固定按鈕設定 */
.fixed-join-btn {
  position: fixed;
  bottom: 80px; /* 如果會擋到 backTop 按鈕，可以把這個數值調大 (例如 120px) */
  right: 20px;
  z-index: 9999; /* 確保按鈕永遠顯示在最上層 */
  width: 120px; /* 請依據您實際 join.png 的大小自由調整寬度 */
  transition: transform 0.3s ease; /* 增加滑鼠移過去的漸變動畫 */
}

/* 滑鼠移過去時微幅放大 */
.fixed-join-btn:hover {
  transform: scale(1.05);
}

/* 定義上下飄浮動畫 Keyframes */
@keyframes floatUpDown {
  0% {
    transform: translateY(0); /* 初始位置 */
  }
  50% {
    transform: translateY(-15px); /* 向上移動 15px (上移幅度) */
  }
  100% {
    transform: translateY(0); /* 回到初始位置 */
  }
}

.fixed-join-btn {
  position: fixed;
  right: 20px;
  
  z-index: 9999; /* 確保按鈕在最上層 */
  width: 120px; /* 按鈕寬度，可依 join.png 實際大小調整 */
  
  /* 防止圖片底部有空白 gap */
  display: block; 
  line-height: 0;

  /* --- 2. 加入漂浮動畫 --- */
  /* 動化名稱 | 持續時間 (3秒) | 速度曲線 (平滑) | 次數 (無限) */
  animation: floatUpDown 3s ease-in-out infinite;
  
  /* 增加滑鼠移過去的漸變動畫 */
  transition: filter 0.3s ease; 
}

/* 為了不影響浮動動畫，滑鼠懸停效果改為亮度變化 (選用) */
.fixed-join-btn:hover {
  filter: brightness(110%); /* 滑鼠移過去稍微變亮 */
}

/* 確保圖片填滿 A 連結 */
.fixed-join-btn img {
  width: 100%;
  height: auto;
}

/* 手機版 RWD 調整 */
@media (max-width: 768px) {
  .fixed-join-btn {
    width: 90px; /* 手機版縮小按鈕 */
    /* 手機版位置也對應上移 */
    bottom: 120px; 
    right: 15px;
  }
}


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