/* 主視覺 */

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: #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;
}
@media (min-width:1180px){
  nav .inner a{
    width: 220px !important;
  }
}
@media (max-width:1200px){
  nav .inner a{
    width: 220px !important;
  }
}


/*---以下客製----*/

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

img{
	width:100%;
	vertical-align: bottom;
}

.showPC{
	display: block;
}

.showMB{
	display: none;
}

.gif-area {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.gif-area img {
  max-width: 150px; /* 限制 gif 不會太大 */
  width: 100%;
  height: auto;
}

.bg1{
	background-image: url(../images/BG-1.jpg);
	background-repeat: no-repeat;
	background-position: bottom center;padding-top: 60px;
}

.bg2{
	background-image: url(../images/BG-2.jpg);
	background-repeat: no-repeat;
	background-position: top center;
}

.bg3{
	background-image: url(../images/BG-3.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

.bg4{
	background-image: url(../images/BG-4.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

.bg5{
	background-image: url(../images/BG-5.jpg);
	background-repeat: no-repeat;
	background-position: top center;
}

.bg6{
	background-image: url(../images/BG-6.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

.bg7{
	background-image: url(../images/BG-7.jpg);
	background-repeat: no-repeat;
	background-position: top center;
}

.topflex{
	display: flex;
	justify-content: space-between;
}


.conflex{
	display: flex;
}


.footerbg{
	background-image: url(../images/copybg.jpg);
	background-repeat: repeat-x;
}

/*============以下手機===========*/
@media (max-width: 780px) {
	
	
}


.join-btn a {
    display: block;
    width: 100%;
    height: 100%;
}

.join-btn img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain; /* 不變形、不裁切 */
}

html {
  scroll-behavior: smooth;
}

/* PC1200-01 包覆層 */
.pc-banner-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.pc-banner-wrapper img {
  width: 100%;
  display: block;
}


.join-btn img {
  width: 100%;
}

/* GIF 共用 */
.nav-gif {
  position: absolute;
  width: 11.5%; /* ← 放大 GIF */
  z-index: 10;
}

.nav-gif img {
  width: 100%;
}

/* 四顆 GIF 位置（對照你的示意圖） */
.gif-1 { right: 46%; bottom: 10%; }
.gif-2 { right: 32%; bottom: 5%; }
.gif-3 { right: 18%; bottom: 10%; }
.gif-4 { right: 4%;  bottom: 5%; }

/* 錨點滑動 */
html {
  scroll-behavior: smooth;
}

.pc-banner-wrapper,
.mb-banner-wrapper {
  position: relative;
}

.pc-banner-wrapper img,
.mb-banner-wrapper img {
  width: 100%;
  display: block;
}

/* 手機版預設隱藏 PC 區塊 */
.mb-banner-wrapper {
  display: none;
}

/* PC 版按鈕 + GIF 定位 */
.join-btn {
  position: absolute;
  bottom: 14%;
  left: 4%;
  width: 31.6%;
}

.nav-gif {
  position: absolute;
  width: 140px;
}

.gif-1 { right: 46%; bottom: 13%; }
.gif-2 { right: 32%; bottom: 8%; }
.gif-3 { right: 18%; bottom: 13%; }
.gif-4 { right: 4%;  bottom: 8%; }

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

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

  /* 隱藏 PC 版 */
  .pc-banner-wrapper {
    display: none !important;
  }

  /* 顯示手機版 */
  .mb-banner-wrapper {
    display: block !important;
  }

  /* 手機版按鈕大小 */
  .mb-join-btn {
    position: absolute;
    display: block;
    z-index: 10;

    width: 40%;
    left: 10%;
    bottom: 10%;
  }

  .mb-banner-wrapper .mb-gif {
    position: absolute;
    width: 20%;
    height: auto;
    z-index: 20;
  }

  .mb-banner-wrapper .mb-gif.gif-1 { left: 55%;  bottom: 38%; }
  .mb-banner-wrapper .mb-gif.gif-2 { right: 2%; bottom: 32%; }
  .mb-banner-wrapper .mb-gif.gif-3 { left: 55%;  bottom: 12%; }
  .mb-banner-wrapper .mb-gif.gif-4 { right: 2%; bottom: 2%; }

}



/* ========================================= */
/* 第二區塊 (PC1200-02) 按鈕設定 Start */
/* ========================================= */

/* --- 電腦版 (PC) 設定 --- */
.sec2-pc-wrapper {
  position: relative; /* 讓按鈕可以根據這張圖定位 */
  display: block;
}

.sec2-mb-wrapper {
  display: none; /* 電腦版時隱藏手機區塊 */
}

/* PC 按鈕共用設定 */
.sec2-btn {
  position: absolute;
  z-index: 10;
  display: block;
  transition: transform 0.2s; /* 滑鼠移過去有微動效果 */
}
.sec2-btn:hover {
  transform: scale(1.05); /* 滑鼠移過去稍微放大 */
}
.sec2-btn img {
  width: 100%;
  display: block;
}

/* ⚠️ PC 版按鈕座標 (請依實際畫面微調) */
/* width: 按鈕寬度, top: 距離頂部 %, left: 距離左邊 % */

/* 按鈕 1 (左) */
.sec2-btn-1 {
  width: 18.3%;  
  top: 41.2%;      
  left: 65%;     
}

/* 按鈕 2 (中) */
.sec2-btn-2 {
  width: 18.3%;
  top: 58%;
  left: 59%;     /* 放在中間 */
}

/* 按鈕 3 (右) */
.sec2-btn-3 {
  width: 18.3%;
  top: 91%;
  left: 62%;
}


/* --- 手機版 (Mobile) 設定 --- */
@media screen and (max-width: 768px) {

  /* 隱藏 PC 區塊，顯示 MB 區塊 */
  .sec2-pc-wrapper {
    display: none !important;
  }
  .sec2-mb-wrapper {
    display: block !important;
    position: relative;
  }

  /* 手機按鈕共用設定 */
  .sec2-mb-btn {
    position: absolute;
    z-index: 10;
    display: block;
  }
  .sec2-mb-btn img {
    width: 100%;
    display: block;
  }

  /* ⚠️ 手機版按鈕座標 (請依實際畫面微調) */
  /* 手機通常是直向排列，所以我預設由上往下排 */

  /* 手機按鈕 1 */
  .sec2-mb-wrapper .mb-btn-1 {
    width: 35%;    /* 手機按鈕寬度 */
    left: 53%;     /* 左右置中 (50% - 寬度的一半) */
    top: 33.6%;      /* 垂直位置 */
  }

  /* 手機按鈕 2 */
  .sec2-mb-wrapper .mb-btn-2 {
    width: 35%;
    left: 53%;
    top: 44.8%;      /* 比第一個按鈕再下面一點 */
  }

  /* 手機按鈕 3 */
  .sec2-mb-wrapper .mb-btn-3 {
    width: 40%;
    left: 30%;
    top: 95%;      /* 再下面一點 */
  }
}
/* ========================================= */
/* 第二區塊 (PC1200-02) 按鈕設定 End */
/* ========================================= */


/* ========================================= */
/* 第三區塊 (PC1200-03) 按鈕設定 Start */
/* ========================================= */

/* --- 電腦版 (PC) 設定 --- */
.sec3-pc-wrapper {
  position: relative; /* 定位基準 */
  display: block;
}

.sec3-mb-wrapper {
  display: none; /* 電腦版隱藏手機區塊 */
}

/* PC 按鈕樣式 */
.sec3-btn {
  position: absolute;
  z-index: 10;
  display: block;
  transition: transform 0.2s;
}
.sec3-btn:hover {
  transform: scale(1.05); /* 滑鼠懸停放大效果 */
}
.sec3-btn img {
  width: 100%;
  display: block;
}

/* ⚠️ PC 版按鈕座標 (請依實際畫面調整數值) */
.sec3-btn-1 {
  width: 25%;  /* 按鈕寬度 */
  top: 85%;      /* 距離頂部的位置 */
  left: 36%;     /* 距離左邊的位置 */
}


/* --- 手機版 (Mobile) 設定 --- */
@media screen and (max-width: 768px) {

  /* 切換顯示手機版區塊 */
  .sec3-pc-wrapper {
    display: none !important;
  }
  .sec3-mb-wrapper {
    display: block !important;
    position: relative;
  }

  /* 手機按鈕樣式 */
  .sec3-mb-btn {
    position: absolute;
    z-index: 10;
    display: block;
  }
  .sec3-mb-btn img {
    width: 100%;
    display: block;
  }

  /* ⚠️ 手機版按鈕座標 (請依實際畫面調整數值) */
  .mb-btn-5 {
    width: 40%;    /* 手機按鈕寬度 (百分比) */
    left: 30%;     /* 左右位置 */
    top: 93%;      /* 垂直位置 */
  }
}
/* ========================================= */
/* 第三區塊 (PC1200-03) 按鈕設定 End */
/* ========================================= */

/* ========================================= */
/* 第四區塊 (PC1200-04) 按鈕設定 Start */
/* ========================================= */

/* --- 電腦版 (PC) 設定 --- */
.sec4-pc-wrapper {
  position: relative; /* 關鍵！一定要有這行，按鈕才不會亂跑 */
  display: block;
}

.sec4-mb-wrapper {
  display: none; /* 電腦版時隱藏手機區塊 */
}

/* PC 按鈕共用樣式 (這段也不能少) */
.sec4-btn {
  position: absolute;
  z-index: 10;
  display: block;
  transition: transform 0.2s;
}
.sec4-btn:hover {
  transform: scale(1.05);
}
.sec4-btn img {
  width: 100%;
  display: block;
}

/* ⚠️ PC 版按鈕座標 */

/* 原本的按鈕 (機殼) */
.sec4-btn-1 {
  width: 90%;
  top: 29%;
  left: 5.5%;
}

/* 🟢 新增的按鈕 (b2b採購新功能) */
.sec4-btn-2 {
  width: 20%;   /* 依需求調整按鈕大小 */
  top: 86%;     /* 依需求調整垂直位置 */
  left: 68%;    /* 依需求調整水平位置 */
}


/* --- 手機版 (Mobile) 設定 --- */
@media screen and (max-width: 768px) {

  /* 切換顯示手機版區塊 */
  .sec4-pc-wrapper {
    display: none !important;
  }
  .sec4-mb-wrapper {
    display: block !important;
    position: relative;
  }

  /* 手機按鈕共用樣式 */
  .sec4-mb-btn {
    position: absolute;
    z-index: 10;
    display: block;
  }
  .sec4-mb-btn img {
    width: 100%;
    display: block;
  }

  /* ⚠️ 手機版按鈕座標 */
  
  /* 原本的按鈕 */
  .mb-btn-7 {
    width: 98%;
    left: 1.5%;
    top: 23%;
  }

  /* 🟢 新增的手機按鈕 */
  .mb-btn-8 {
    width: 45%;
    left: 25%;
    top: 89%;
  }
}
/* ========================================= */
/* 第四區塊 (PC1200-04) 按鈕設定 End */
/* ========================================= */



/* ========================================= */
/* 第六區塊 (PC1200-06) 按鈕設定 Start */
/* ========================================= */

/* --- 電腦版 (PC) 設定 --- */
.sec6-pc-wrapper {
  position: relative;
  display: block;
}

.sec6-mb-wrapper {
  display: none;
}

/* PC 按鈕樣式 */
.sec6-btn {
  position: absolute;
  z-index: 10;
  display: block;
  transition: transform 0.2s;
}
.sec6-btn:hover {
  transform: scale(1.05);
}
.sec6-btn img {
  width: 100%;
  display: block;
}

/* ⚠️ PC 版按鈕座標 (請依實際畫面調整) */

/* 商品 1 (左) */
.sec6-btn-1 {
  width: 20.8%;  /* 寬度 */
  top: 69%;      /* 高度位置 */
  left: 5%;      /* 左邊位置 */
}

/* 商品 2 (中) */
.sec6-btn-2 {
  width: 20.8%;
  top: 71%;
  left: 39%;
}

/* 商品 3 (右) */
.sec6-btn-3 {
  width: 20.8%;
  top: 69%;
  left: 74%;
}

/* 更多商品 (下方) */
.sec6-btn-4 {
  width: 25%;
  top: 82%;
  left: 37.5%;
}


/* --- 手機版 (Mobile) 設定 --- */
@media screen and (max-width: 768px) {

  .sec6-pc-wrapper {
    display: none !important;
  }
  .sec6-mb-wrapper {
    display: block !important;
    position: relative;
  }

  /* 手機按鈕樣式 */
  .sec6-mb-btn {
    position: absolute;
    z-index: 10;
    display: block;
  }
  .sec6-mb-btn img {
    width: 100%;
    display: block;
  }

  /* ⚠️ 手機版按鈕座標 (請依實際畫面調整) */
  
  /* 手機按鈕 1 */
  .mb-btn-1 {
    width: 46%;
    left: 27%;
    top: 29%;
  }

  /* 手機按鈕 2 */
  .mb-btn-2 {
    width: 46%;
    left: 27%;
    top: 53.5%;
  }

  /* 手機按鈕 3 */
  .mb-btn-3 {
    width: 46%;
    left: 27%;
    top: 85%;
  }

  /* 手機按鈕 4 (AI專區) */
  .mb-btn-4 {
    width: 46%;
    left: 27%;
    top: 92%;
  }
}
/* ========================================= */
/* 第六區塊 (PC1200-06) 按鈕設定 End */
/* ========================================= */

/* ========================================= */
/* 第一頁 (PC1200-01) 加入會員按鈕 hover 效果 */
/* ========================================= */
.join-btn {
  transition: transform 0.2s; /* 設定動畫時間 0.2 秒，讓放大過程平滑 */
}

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