#banner { width: 100vw; position: relative; z-index: 3; overflow: hidden; background: #090806; }
#banner::before {
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(
		90deg,rgba(216,173,114,0),rgba(216,173,114,0.45),rgba(216,173,114,0)
	);z-index:5;
}
#banner,#banner * { transition: all 0s ease-in-out; -webkit-transition: all 0s ease-in-out; }
#banner .item::before {
  content:"";position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(
			to bottom,rgba(154,107,70,0),rgba(19,26,11,0.67)
		);z-index:3;pointer-events:none;
}
#banner .item { width: 100vw; height: 95vh; min-height: 760px; position: relative; overflow: hidden; }

#banner .media_box { width: 100%; height: 100%; position: relative; overflow: hidden; z-index: 1; }
#banner .media_box::before {
  content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(
			90deg,rgba(5,6,3,0.94) 0%,rgba(5,6,3,0.78) 32%,rgba(5,6,3,0.35) 58%,rgba(5,6,3,0.08) 100%
		),linear-gradient(
			180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.08) 42%,rgba(0,0,0,0.62) 100%
		);pointer-events:none;
}
#banner .media_box::after {
  content:"";position:absolute;left:-10%;bottom:-18%;width:70%;height:60%;z-index:4;background:radial-gradient(
			circle,rgba(180,128,62,0.32),rgba(180,128,62,0) 64%
		);filter:blur(8px);opacity:0.75;pointer-events:none;animation:bannerGlow 6s ease-in-out infinite alternate;
}
#banner .media_box img { width: 100%; height: 100%; min-height: 95vh; object-fit: cover; display: block; transform: scale(1.04); }
#banner video,#banner iframe,#banner .slide-video,#banner .slide-media { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; z-index: 2; transform: scale(1.04); }

#banner .info { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 8; display: flex; align-items: center; pointer-events: none; }
#banner .info .txt {position: relative;width: min(820px,52vw);margin: 0;margin-left: max(7vw,calc((100vw - 1500px)/2));padding: 4vh 0 60px;pointer-events: auto;}
#banner .info .txt::before {
  content:"";position:absolute;left:-38px;top:50%;width:1px;height:72%;background:linear-gradient(
			180deg,rgba(255,180,0,0),rgba(255,180,0,0.9),rgba(255,180,0,0)
		);transform:translateY(-50%);opacity:0.75;
}

#banner .banner_label { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; color: #f4f4f4; opacity: 0; transform: translateY(22px); }

#banner .banner_label span { display: none; }
#banner .banner_label::before,#banner .banner_label::after {
  content:"";display:block;flex:0 0 28px;width:28px;height:15px;transform:skewX(-30deg);background:linear-gradient(
			90deg,#ffb400 0 25%,transparent 25% 35%,#ffb400 35% 61%,transparent 61% 71%,#ffb400 71% 100%
		);filter:drop-shadow(0 3px 8px rgba(255,180,0,0.24));
}
#banner .banner_label::after { transform: skewX(-30deg) scaleX(-1); }
#banner .banner_label font { display: block; color: #f4f4f4; font-size: clamp(14px,1.05vw,18px); font-weight: 700; line-height: 1.5; letter-spacing: 0.18em; text-shadow: 0 3px 12px rgba(0,0,0,0.8); }

#banner .info .txt .h3 { max-width: 820px; margin: 0; color: #fff; font-family: "Arial Black","Arial Narrow","Noto Sans TC","Microsoft JhengHei",sans-serif; font-size: clamp(48px,4.25vw,80px); font-weight: 900; font-style: italic; line-height: 1.14; letter-spacing: -0.045em; text-align: left; text-shadow: 0 5px 0 rgba(0,0,0,0.2),0 10px 25px rgba(0,0,0,0.72); opacity: 0; transform: translateY(26px) skewX(-4deg); transform-origin: left center; }
#banner .info .txt .h3 span,#banner .info .txt .h3 b,#banner .info .txt .h3 strong,#banner .info .txt .h3 em {color: #ffb400;font-weight: inherit;font-style: inherit;text-shadow: 0 5px 0 rgba(75,43,0,0.35),0 10px 25px rgba(255,180,0,0.16);font-size: clamp(48px, 4.25vw, 80px);}
#banner .info .txt .h3::after {
  content:"";display:block;width:min(100%,680px);height:1px;margin:26px 0 22px;background:linear-gradient(
			90deg,rgba(255,180,0,0.7),rgba(255,255,255,0.2),transparent
		);transform-origin:left center;
}
#banner .info .txt p { max-width: 720px; margin: 0; color: rgba(255,255,255,0.86); font-size: clamp(15px,1.05vw,18px); font-weight: 400; line-height: 1.95; letter-spacing: 0.075em; text-align: left; text-shadow: 0 4px 18px rgba(0,0,0,0.72); opacity: 0; transform: translateY(26px); }

#banner .banner_more {
  position:relative;display:flex;align-items:center;justify-content:space-between;width:min(100%,300px);height:58px;margin-top:38px;padding:0 25px 0 37px;overflow:hidden;color:#080808;background:linear-gradient(
			135deg,#ffc21a 0%,#ffac00 68%,#ffc82b 100%
		);border:1px solid rgba(255,215,90,0.82);border-radius:2px;box-shadow:0 12px 34px rgba(255,174,0,0.18),inset 0 1px 0 rgba(255,255,255,0.45);pointer-events:none;opacity:0;transform:translateY(26px);
}
/* æŒ‰éˆ•ä¸­é–“åˆ†éš”ç·š */
#banner .banner_more::before { content: ""; position: absolute; top: 50%; right: 82px; width: 1px; height: 32px; background: rgba(255,255,255,0.42); transform: translateY(-50%); }
/* æŒ‰éˆ•æŽƒå…‰ */
#banner .banner_more::after { content: ""; position: absolute; top: -60%; left: -55%; width: 32%; height: 220%; background: rgba(255,255,255,0.32); transform: rotate(22deg); animation: btnLight 3.6s ease-in-out infinite 2.4s; }
#banner .banner_more font { position: relative; z-index: 2; color: #0a0a0a; font-size: 17px; font-weight: 800; line-height: 1; letter-spacing: 0.12em; }
/* æŒ‰éˆ•ç®­é ­ */
#banner .banner_more i { position: relative; z-index: 2; display: block; width: 31px; height: 14px; background: none; }
#banner .banner_more i::before { content: ""; position: absolute; top: 6px; left: 0; width: 27px; height: 2px; background: #111; }
#banner .banner_more i::after { content: ""; position: absolute; top: 2px; right: 0; width: 9px; height: 9px; border-top: 2px solid #111; border-right: 2px solid #111; transform: rotate(45deg); }

#banner .farmer_box {right: clamp(26px,12vw,110px);bottom: 0;width: min(45vw,760px);height: 92vh;z-index: 7;display: flex;align-items: flex-end;justify-content: flex-end;pointer-events: none;opacity: 0;transform: translateX(60px) scale(0.96);}
#banner .farmer_box::before {
  content:"";position:absolute;right:2%;bottom:8%;width:78%;height:38%;border-radius:50%;background:radial-gradient(
			circle,rgba(225,160,70,0.34),rgba(225,160,70,0) 68%
		);filter:blur(24px);animation:farmerLight 4.2s ease-in-out infinite alternate;
}
#banner .farmer_box img { width: 100%; max-height: 94%; object-fit: contain; object-position: right bottom; position: relative; z-index: 2; filter: drop-shadow(-26px 36px 45px rgba(0,0,0,0.5)); }

#banner .banner_link,#banner a.pos_abs {width: 100%;height: 100%;top: 0;left: 0;z-index: 66;}

#banner .slick-current .banner_label { animation: bannerFadeUp 0.9s ease forwards 0.25s; }
#banner .slick-current .info .txt .h3 { animation: bannerTitleIn 1s ease forwards 0.45s; }
#banner .slick-current .info .txt p { animation: bannerFadeUp 1s ease forwards 0.72s; }
#banner .slick-current .banner_more { animation: bannerFadeUp 1s ease forwards 0.95s; }
#banner .slick-current .farmer_box { animation: farmerIn 1.35s cubic-bezier(0.19,1,0.22,1) forwards 0.65s,farmerFloat 5.8s ease-in-out infinite 2.1s; }
@keyframes bannerFadeUp {
  0% { opacity: 0; transform: translateY(26px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes bannerTitleIn {
  0% { opacity: 0; transform: translateY(32px) skewX(-4deg); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0) skewX(-4deg); filter: blur(0); }
}
@keyframes farmerIn {
  0% { opacity: 0; transform: translateX(60px) scale(0.96); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes farmerFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(12px) scale(1.01); }
}
@keyframes farmerLight {
  0% { opacity: 0.45; transform: scale(0.96); }
  100% { opacity: 0.9; transform: scale(1.05); }
}
@keyframes bannerVideoMove {
  0% { transform: scale(1.04) translateX(0); }
  100% { transform: scale(1.08) translateX(0); }
}
@keyframes bannerGlow {
  0% { opacity: 0.45; transform: translateX(0); }
  100% { opacity: 0.9; transform: translateX(5%); }
}
@keyframes btnLight {
  0% { left: -55%; }
  45%,100% { left: 130%; }
}


@media screen and (max-width:1470px) {
	#banner .banner_label{
    margin-bottom: 15px;
}
  #banner .item { min-height: 680px; }
  #banner .info .txt {width: min(760px,53vw);padding: 80px 0 60px;}
}

@media screen and (max-width:1280px) {
  #banner .info .txt { width: 55vw; margin-left: 5vw; }
  #banner .info .txt .h3 { font-size: clamp(45px,5vw,65px); }
  #banner .farmer_box { right: -1vw; width: 48vw; }
}

@media screen and (max-width:900px) {
  #banner .item { height: 86vh; min-height: 680px; }
  #banner .media_box img { min-height: 86vh; }
  #banner .media_box::before {
    background:linear-gradient(
				180deg,rgba(5,6,3,0.52) 0%,rgba(5,6,3,0.34) 38%,rgba(5,6,3,0.9) 100%
			),linear-gradient(
				90deg,rgba(5,6,3,0.76),rgba(5,6,3,0.12)
			);
  }
  #banner .info { align-items: flex-end; padding-bottom: 8vh; }
  #banner .info .txt {width: calc(100% - 40px);margin: 0 auto;padding: 0 0 30px 10px;}
  #banner .info .txt::before { display: none; }
  #banner .banner_label { margin-bottom: 20px; }
  #banner .banner_label font { font-size: 14px; letter-spacing: 0.12em; }
  #banner .info .txt .h3 {max-width: 680px;font-size: clamp(40px,8.2vw,46px);}
  #banner .info .txt p { max-width: 620px; font-size: 16px; line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  #banner .farmer_box { right: -17vw; bottom: 22vh; width: 72vw; height: 54vh; opacity: 0.7; }
}
@media screen and (max-width:768px) {
  #banner .farmer_box { right: -11vw; bottom: 0; width: 72vw; height: 590px; }
  #banner .banner_more { width: min(100%,250px); }
  #banner .banner_more i { width: 20px; height: 10px; }
  #banner .banner_more i::before { left: -6px; }
}

@media screen and (max-width:550px) {
  #banner .item { height: 82vh; min-height: 620px; }
  #banner .media_box img { min-height: 82vh; }
  #banner .info { padding-bottom: 6vh; }
  #banner .info .txt { width: calc(100% - 30px); }
  #banner .banner_label { gap: 10px; margin-bottom: 17px; }
  #banner .banner_label::before,#banner .banner_label::after { width: 19px; height: 11px; flex-basis: 19px; }
  #banner .banner_label font { font-size: 12px; line-height: 1.6; letter-spacing: 0.07em; }
  #banner .info .txt .h3 { font-size: clamp(34px,9.6vw,44px); line-height: 1.22; }
  #banner .info .txt .h3::after { margin: 18px 0 17px; }
  #banner .info .txt p {font-size: 12px;line-height: 1.8;letter-spacing: 0.035em;-webkit-line-clamp: 4;}
  #banner .banner_more { width: 235px; height: 51px; margin-top: 23px; padding: 0 20px 0 27px; }
  #banner .banner_more::before { right: 66px; height: 27px; }
  #banner .banner_more font { font-size: 15px; }
  #banner .banner_more i { width: 27px; }
  #banner .banner_more i::before { width: 23px; }
  #banner .farmer_box {right: -7vw;bottom: 25vh;width: 92vw;height: 46vh;opacity: 0.55;}
}
