#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,.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;.: 100%;width: 100%;height: 100%;background: linear-gradient(to bottom, rgb(154 107 70 / 0%), rgb(19 26 11 / 67%));z-index: 3;}
#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,.94) 0%,rgba(5,6,3,.78) 32%,rgba(5,6,3,.35) 58%,rgba(5,6,3,.08) 100%),linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.08) 42%,rgba(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,.32),rgba(180,128,62,0) 64%); filter: blur(8px); opacity: .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 { width: 100%; height: 100%; top: 0; left: 0; z-index: 8; align-items: center; pointer-events: none; }
#banner .info .txt { width: min(760px,48vw); margin: 0 auto; margin-left: max(5vw,calc((100vw - 1400px)/2)); padding-top: 7vh; position: relative; }
#banner .info .txt::before { content: ""; position: absolute; left: -42px; top: 50%; width: 1px; height: 68%; background: linear-gradient(180deg,rgba(197,146,80,0),rgba(197,146,80,.9),rgba(197,146,80,0)); transform: translateY(-50%); opacity: .8; }
#banner .banner_label { display: flex; align-items: center; gap: 15px; margin-bottom: 24px; opacity: 0; transform: translateY(22px); }
#banner .banner_label span { width: 34px; height: 34px; border-radius: 50%; position: relative; border: 1px solid rgba(207,159,93,.55); background: rgba(207,159,93,.12); box-shadow: 0 0 35px rgba(207,159,93,.22); }
#banner .banner_label span::before { content: ""; position: absolute; left: 9px; top: 8px; width: 15px; height: 18px; border-radius: 100% 0 100% 0; border: 1px solid #d6aa70; transform: rotate(-18deg); }
#banner .banner_label::after { content: ""; width: 88px; height: 1px; background: linear-gradient(90deg,rgba(214,170,112,.95),rgba(214,170,112,0)); transform-origin: left center; }
#banner .banner_label font { font-size: 17px; letter-spacing: .12em; color: #d6aa70; font-weight: 400; }
#banner .info .txt .h3 {margin: 0;font-size: clamp(30px,4.1vw,50px);line-height: 1.28;letter-spacing: .04em;font-weight: 500;color: #fff;text-align: left;text-shadow: 0 8px 28px rgba(0,0,0,.5);opacity: 0;transform: translateY(26px);}
#banner .info .txt .h3::after { content: ""; display: block; width: 82px; height: 3px; margin: 28px 0 26px; background: linear-gradient(90deg,#d6aa70,rgba(214,170,112,0)); border-radius: 999px; transform-origin: left center; }
#banner .info .txt p {max-width: 720px;margin: 0;font-size: 16px;line-height: 2.05;letter-spacing: .04em;font-weight: 300;color: rgba(255,255,255,.9);text-align: left;text-shadow: 0 5px 20px rgba(0,0,0,.58);opacity: 0;transform: translateY(26px);}
#banner .banner_more { width: fit-content; min-width: 172px; height: 56px; margin-top: 34px; padding: 0 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 18px; color: #fff; background: linear-gradient(135deg,rgba(185,136,69,.95),rgba(118,80,37,.95)); box-shadow: 0 18px 45px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.22); position: relative; overflow: hidden; pointer-events: none; opacity: 0; transform: translateY(26px); }
#banner .banner_more::before { content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0)); transform: skewX(-22deg); animation: btnLight 3.6s ease-in-out infinite 2.4s; }
#banner .banner_more font {font-size: 17px;letter-spacing: .08em;position: relative;z-index: 2;color: white;}
#banner .banner_more i { width: 34px; height: 1px; background: rgba(255,255,255,.86); position: relative; z-index: 2; }
#banner .banner_more i::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1px solid rgba(255,255,255,.88); border-right: 1px solid rgba(255,255,255,.88); transform: rotate(45deg); }
#banner .farmer_box {right: clamp(24px,6.8vw,140px);bottom: 0;width: min(43vw,690px);height: 84vh;z-index: 7;display: flex;align-items: flex-end;justify-content: flex-end;pointer-events: none;opacity: 0;transform: translateX(60px) scale(.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,.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,.5)); }
#banner .banner_link,#banner a.pos_abs { width: 100%; height: 100%; top: 0; left: 0; z-index: 6; }
#banner .slick-current .banner_label { animation: bannerFadeUp .9s ease forwards .25s; }
#banner .slick-current .info .txt .h3 { animation: bannerFadeUp 1s ease forwards .45s; }
#banner .slick-current .info .txt p { animation: bannerFadeUp 1s ease forwards .72s; }
#banner .slick-current .banner_more { animation: bannerFadeUp 1s ease forwards .95s; }
#banner .slick-current .farmer_box { animation: farmerIn 1.35s cubic-bezier(.19,1,.22,1) forwards .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 farmerIn {
  0% { opacity: 0; transform: translateX(60px) scale(.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: .45; transform: scale(.96); }
  100% { opacity: .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: .45; transform: translateX(0); }
  100% { opacity: .9; transform: translateX(5%); }
}
@keyframes btnLight {
  0% { left: -80%; }
  45%,100% { left: 130%; }
}
@media screen and (max-width:1470px){
  #banner .item{min-height:680px;}
}
@media screen and (max-width:1280px) {
  #banner .info .txt { width: 54vw; margin-left: 5vw; }
  #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,.52) 0%,rgba(5,6,3,.34) 38%,rgba(5,6,3,.9) 100%),linear-gradient(90deg,rgba(5,6,3,.76),rgba(5,6,3,.12)); }
  #banner .info { align-items: flex-end; padding-bottom: 8vh; }
  #banner .info .txt { width: calc(100% - 40px); margin: 0 auto; padding-top: 0; }
  #banner .info .txt::before { display: none; }
  #banner .info .txt .h3 { font-size: clamp(36px,8.6vw,58px); }
  #banner .info .txt p { 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: .7; }
}
@media screen and (max-width:550px) {
  #banner .item { height: 82vh; min-height: 620px; }
  #banner .media_box img { min-height: 82vh; }
  #banner .banner_label { margin-bottom: 18px; }
  #banner .banner_label font { font-size: 14px; }
  #banner .banner_label::after { width: 56px; }
  #banner .info .txt .h3 {font-size: 1.9rem;line-height: 1.35;}
  #banner .info .txt .h3::after { margin: 20px 0 18px; }
  #banner .info .txt p { font-size: 15px; line-height: 1.85; -webkit-line-clamp: 4; }
  #banner .banner_more { height: 50px; margin-top: 24px; padding: 0 22px; }
  #banner .farmer_box {right: -29vw;bottom: 25vh;width: 92vw;height: 46vh;opacity: .55;}
}
