﻿/* 主視覺 */

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;
}

.innerbox01{
  display: none;
}

img{
	width:100%;
	vertical-align: bottom;
}

.showPC{
	display: block;
}

.showMB{
	display: none;
}

.kv{
  width: 100%;
  height: 800px;
}

.kvmb{
  display: none;
}


#kvbt {
  display: flex;
  flex-wrap: wrap;         /* 若空間不夠可以自動換行 */
  justify-content: space-between;
  align-items: center;
  width:1050px;
  margin: auto;
  margin-top: -350px;
  margin-bottom: 3%;
}
#kvleft,
#kvright {
  width: 50%;
  flex: 0 0 50%;           /* 關鍵！固定為50%，不伸縮 */
  box-sizing: border-box;
}

#kvleft {
  min-height: 100px;       /* 可選，若需撐出高度 */
}

#kvright {
  display: flex;
  justify-content: end;
  gap: 20px;                /* 按鈕之間間距 */
}

#kvbt01,
#kvbt02 {
  width: 100%;
  max-width: 300px;         /* 按鈕最大寬度 */
  height: auto;
  transition: transform 0.3s ease;
}
#kvbt01:hover,
#kvbt02:hover {
  transform: scale(1.1);
}

#ct01bt {
  display: flex;
  flex-wrap: wrap;         /* 若空間不夠可以自動換行 */
  justify-content: space-around;
  align-items: center;
  width:1050px;
  margin: auto;
  margin-top: 430px;
  margin-bottom: -850px; /* 你可以視情況調整這個值 */
  position: relative; 
  z-index: 99; /* 如果壓到內容看不到時可調高 */
}

#ct01up{
  display: flex;
  gap:120px;
  margin-bottom: 150px;
}
#ct01down{
  display: flex;
  gap:120px;
}
.ct01bt01{
  width: 100%;
  max-width: 400px;
  height: auto;
  transition: 0.3s ease;
}

.bt001:hover{
  content: url('../images/button/PC_botton-1h.png');
}
.bt002:hover{
  content: url('../images/button/PC_botton-2h.png');
}
.bt003:hover{
  content: url('../images/button/PC_botton-3h.png');
}
.bt004:hover{
  content: url('../images/button/PC_botton-4h.png');
}

#bg1{
	background-image: url(../images/BG-1.jpg);
	background-repeat: no-repeat;
	background-position: top center;
}

#bg2{
	background-image: url(../images/BG-2.jpg);
	background-repeat: no-repeat;
	background-position: top center;
}

#bg3{
	background-image: url(../images/BG-3.jpg);
	background-repeat: no-repeat;
	background-position: top center;
}

#bg4{
	background-image: url(../images/BG-4.jpg);
	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.jpg);
	background-repeat: no-repeat;
	background-position: top center;
}

#bg7{
	background-image: url(../images/BG-10.jpg);
	background-repeat: no-repeat;
	background-position: top center;
}

#bg8{
	background-image: url(../images/BG-7.jpg);
	background-repeat: no-repeat;
	background-position: top center;
}

#bg9{
	background-image: url(../images/BG-8.jpg);
	background-repeat: no-repeat;
	background-position: top center;
}

#bg10{
	background-image: url(../images/BG-9.jpg);
	background-repeat: no-repeat;
	background-position: top center;
}
.bg7ct{ 
  width: 950px;
  margin: auto;
  text-align: center;
  padding-top: 30px;
}

.bg7ct>img{
  max-width: 60%;
  text-align: center;
}
/* .bg7ct>.showMB>img{
  max-width: 60%;
  text-align: center;
} */

.bg7bt{
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 100px;
  margin-left: 60px;
  
}

.topflex{
	display: flex;
	justify-content: space-between;
}


.conflex{
	display: flex;
}


.footerbg{
	background-image: url(../images/copybg.jpg);
	background-repeat: repeat-x;
}

@media (max-width: 1200px){
 .innerbox01{
  display: block;
} 

.showPC{
	display: block;
}

#bg1{
	background-image: url(../images/PC1200-01.jpg);
  background-size: cover;
}

#kvbt {
  display: flex;
  flex-wrap: wrap;         /* 若空間不夠可以自動換行 */
  justify-content: space-between;
  align-items: center;
  width:85%;
  margin: auto;
  margin-top: -29%;
  margin-bottom: 5%;
  position: relative; 
}
#ct01bt {
  display: flex;
  flex-wrap: wrap;         /* 若空間不夠可以自動換行 */
  justify-content: space-around;
  align-items: center;
  width:80%;
  margin: auto;
  margin-top: 36.5%;
  margin-bottom: -70%; /* 你可以視情況調整這個值 */
  position: relative; 
  z-index: 99; /* 如果壓到內容看不到時可調高 */
}

#ct01up{
  display: flex;
  gap:15%;
  margin-bottom: 15%;
}
#ct01down{
  display: flex;
  gap:15%;
}
.ct01bt01{
  width: 100%;
  max-width: 400px;
  height: auto;
}

.bg7ct{
  width: 90%;
}

.bg7bt{
  width: 90%;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin: auto;
  padding-left: 2%;
}

.bg7bt1{
  width: 33.33%;
}
.bg7bt2{
  width: 33.33%;
}
.bg7bt3{
  width: 33.33%;
}
}


/*============以下手機===========*/
@media (max-width: 780px) {
	
	.showPC{
		display: none;
	}
	
	.showMB{
		display: block;
	}

  #bg1{
	background-image: url(../images/mb-01.jpg);
  background-size: cover;
}

.kv{
  display: none;
}
.kvmb{
  display: block;
  width: 90%;
  margin: auto;
  text-align: center;
}
.kvtt{
  margin-top: -50px;
}



#kvbt {
  display: flex;
  flex-wrap: wrap;         /* 若空間不夠可以自動換行 */
  justify-content: space-between;
  align-items: center;
  width:85%;
  margin: auto;
  margin-top: -68%;
  margin-bottom: 5%;
  position: relative; 
}

#kvbt01,
#kvbt02 {
  width: 80%;
  max-width: 300px;         /* 按鈕最大寬度 */
  height: auto;
}

#kvright{
  display: flex;
  flex-wrap: wrap;
padding-left: 10%;
}
#ct01bt {
  display: flex;
  flex-wrap: wrap;         /* 若空間不夠可以自動換行 */
  justify-content: space-around;
  align-items: center;
  width:90%;
  margin: auto;
  margin-top: 46.5%;
  margin-bottom: -95%; /* 你可以視情況調整這個值 */
  position: relative; 
  z-index: 99; /* 如果壓到內容看不到時可調高 */
}

#ct01up{
  display: flex;
  gap:15%;
  margin-bottom: 20%;
}
#ct01down{
  display: flex;
  gap:15%;
}

.bg7bt1{
  width: 80%;
}
.bg7bt2{
  width: 80%;
}
.bg7bt3{
  width: 80%;
}

.bg7bt{
  width: 90%;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  margin: auto;
}

#bg7{
  background-image: url(../images/mb-10.jpg);
  background-size: cover;
  background-position: top left;
}
}