#banner { position: relative; width: 100%; height: 98vh; background: var(--bg); overflow: hidden; font-family: var(--font-family); color: var(--info); }
#banner * { box-sizing: border-box; }
#banner a { text-decoration: none; }
#banner img { display: block; max-width: 100%; }
#banner #banner_box { position: relative; width: 100%; height: 100%; overflow: hidden; }
#banner .main-slider,#banner .slick-list,#banner .slick-track,#banner .item { width: 100%; height: 100%; }
#banner .item { position: relative; overflow: hidden; }
#banner .img_box { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
#banner .img_box::before { content: ""; position: absolute; inset: 0; z-index: 6; background: radial-gradient(circle at 42% 48%,rgba(248,244,236,.24) 0%,rgba(248,244,236,.12) 36%,rgba(248,244,236,0) 72%),linear-gradient(90deg,rgba(248,244,236,.16) 0%,rgba(248,244,236,.06) 48%,rgba(248,244,236,0) 100%); opacity: 1; pointer-events: none; transition: opacity 1.8s cubic-bezier(.22,1,.36,1); }
#banner .img_cover { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transform: none; filter: brightness(1.02) saturate(.98); transition: opacity 1s cubic-bezier(.22,1,.36,1),filter 1.8s cubic-bezier(.22,1,.36,1); }
#banner .img_box video,#banner .img_box iframe,#banner .slide-video,#banner .slide-media { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transform: none; filter: brightness(1.02) saturate(.98); border: 0; transition: opacity 1.2s cubic-bezier(.22,1,.36,1),filter 1.8s cubic-bezier(.22,1,.36,1); }
#banner .img_box.is_media_show::before { opacity: 0; }
#banner .img_box.has_video.is_video_ready video,#banner .img_box.has_video.is_video_ready .slide-video,#banner .img_box.has_video.is_video_ready .slide-media { opacity: 1; filter: brightness(1) saturate(1); transform: none; }
#banner .img_box.has_video.is_video_ready .img_cover { opacity: 0; filter: brightness(1) saturate(1); transition-delay: .28s; }
#banner .img_box:not(.has_video).is_media_show .img_cover { opacity: 1; filter: brightness(1) saturate(1); }
#banner .slick-slide { outline: none; }
#banner .slick-slide > div { height: 100%; }
#banner .img_box video,#banner .img_box iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
#banner .banner_mask {
  position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(248,244,236,.58) 0%,rgba(248,244,236,.42) 15%,rgba(248,244,236,.18) 37%,rgba(248,244,236,.03) 72%
  ),linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.05) 55%,rgba(31,41,36,.10) 100%
  );pointer-events:none;opacity:.4;
}
#banner .banner_mist {
  position:absolute;left:6%;top:-10%;z-index:3;width:38%;height:70%;background:radial-gradient(circle,rgba(248,244,236,.82) 0%,rgba(248,244,236,.48) 36%,rgba(248,244,236,0) 74%
	);filter:blur(12px);pointer-events:none;animation:bannerMist 8s ease-in-out infinite alternate;
}
#banner .info_box { position: relative; z-index: 5; width: min(82%,1440px); height: 100%; margin: 0 auto; display: flex; align-items: center; pointer-events: none; padding-bottom: 90px; }
#banner .workframe { pointer-events: auto; width: 100%; }
#banner .banner_en { letter-spacing: 2px; }
#banner .title_big { margin: 20px 0 0; color: var(--primary); font-family: var(--font-family); font-size: clamp(54px,5vw,60px); font-weight: 700; line-height: 1.25; letter-spacing: .13em; text-shadow: 0 3px 0 rgba(255,255,255,.35),0 10px 30px rgba(248,244,236,.82); word-spacing: 100vw; }
#banner .info_box p { margin: 18px 0 0; color: rgba(37,48,42,.60); font-family: var(--font-family); font-size: clamp(21px,1.7vw,23px); font-weight: 600; line-height: 1.85; letter-spacing: .14em; text-shadow: 0 3px 14px rgba(248,244,236,.86); }
#banner .banner_btn_box { display: flex; align-items: center; gap: 28px; margin-top: 42px; }
#banner .banner_btn { position: relative; z-index: 30; height: 58px; min-width: 170px; padding: 0 32px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; border-radius: 999px; font-family: var(--font-sans); font-size: 17px; font-weight: 700; letter-spacing: .08em; transition: all .42s cubic-bezier(.22,1,.36,1); pointer-events: auto; }
#banner .banner_btn_primary { color: var(--white); background: var(--primary); box-shadow: 0 14px 30px rgba(63,86,63,.26),inset 0 1px 0 rgba(255,255,255,.12); }
#banner .banner_btn_primary span { color: var(--white); }
#banner .banner_btn i { display: flex; flex-direction: column; align-content: center; justify-content: center; padding: 5px; }
#banner .banner_btn i svg { fill: #fff; }
#banner .banner_btn_primary:hover { color: var(--white); background: var(--dark); transform: translateY(-4px); box-shadow: 0 20px 42px rgba(31,41,36,.24); }
#banner .banner_btn_primary:hover i { transform: translateX(5px); }
#banner .banner_btn_light { color: rgba(37,48,42,.68); background: rgba(255,255,255,.82); border: 1px solid rgba(122,106,85,.22); box-shadow: 0 12px 28px rgba(31,41,36,.08),inset 0 1px 0 rgba(255,255,255,.62); backdrop-filter: blur(8px); }
#banner .banner_btn_primary i {   }
#banner .banner_btn_light i { position: relative; border-radius: 50%; background: var(--primary); transition: all .35s ease; }
#banner .banner_btn:hover { background: var(--white); transform: translateY(-4px); box-shadow: 0 20px 42px rgba(31,41,36,.14); }
#banner .banner_btn:hover span { color: var(--primary); }
#banner .banner_btn_light:hover i svg { fill: var(--light); }
#banner .banner_btn_light:hover i { background: var(--green); }
#banner .banner_btn_primary:hover i svg { fill: var(--primary); }
#banner .atag_item { position: absolute; inset: 0; z-index: 0; display: block; }
#banner .banner_btn,#banner .banner_btn * { position: relative; z-index: 30; }
#banner .banner_curve {position: absolute;left: 50%;bottom: -50px;z-index: 15;width: 110%;height: 160px;background: radial-gradient(circle at 50% 0%,#f8f4ef 0%,#f8f4ef 42%,#f8f4ef 100%);border-radius: 60% 60% 0 0/100% 100% 0 0;transform: translateX(-50%);box-shadow: 0 -16px 36px rgba(31,41,36,.06);pointer-events: none;}
#banner .banner_curve_text { position: absolute; left: 50%; top: 40px; width: 100%; padding: 0 20px; transform: translateX(-50%); text-align: center; color: rgba(37,48,42,.78); font-family: var(--font-family); font-size: clamp(22px,2vw,31px); font-weight: 700; line-height: 1.7; letter-spacing: .14em; text-shadow: 0 4px 16px rgba(248,244,236,.7); }
#banner .banner_scroll { display: none; }
#banner .slick-slide { outline: none; }
#banner .slick-slide > div { height: 100%; }
@keyframes bannerMist {
  0% { transform: translate3d(0,0,0) scale(1); opacity: .88; }
  100% { transform: translate3d(20px,-10px,0) scale(1.04); opacity: .72; }
}
@keyframes bannerLight {
  0% { transform: scale(.94); opacity: .58; }
  100% { transform: scale(1.1); opacity: .88; }
}
#banner .banner_scroll_hint { position: absolute; bottom: 130px; z-index: 25; width: min(82%,1440px); margin: 0 auto; left: 50%; transform: translate(-50%,-10%); }
#banner .banner_scroll_link { display: inline-flex; align-items: center; gap: 14px; color: rgba(255,255,255,.86); font-family: var(--font-sans); font-size: 18px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-shadow: 0 4px 16px rgba(31,41,36,.18); transition: all .35s ease; }
#banner .banner_scroll_link:hover { color: var(--white); transform: translateY(-2px); opacity: 1; }
#banner .scroll_icon { position: relative; width: 34px; height: 50px; display: inline-block; border: 2px solid rgba(255,255,255,.8); border-radius: 999px; background: rgba(255,255,255,.06); backdrop-filter: blur(6px); box-shadow: 0 8px 18px rgba(31,41,36,.08); flex: 0 0 auto; }
#banner .scroll_icon i { position: absolute; left: 50%; top: 5px; width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.94); transform: translateX(-50%); animation: bannerScrollDot 1.6s ease-in-out infinite; }
#banner .scroll_icon::after { content: ""; position: absolute; left: 50%; bottom: 15px; width: 8px; height: 8px; border-right: 2px solid rgba(255,255,255,.9); border-bottom: 2px solid rgba(255,255,255,.9); transform: translateX(-50%) rotate(45deg); opacity: .92; }
#banner .scroll_text { display: inline-block; line-height: 1.4; white-space: nowrap; color: var(--light); letter-spacing: 3px; }
@keyframes bannerScrollDot {
  0% { transform: translate(-50%,0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%,18px); opacity: 0; }
}
#banner .banner_ani { opacity: 0; transform: translateY(34px); filter: blur(8px); transition: opacity .95s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1),filter .95s cubic-bezier(.22,1,.36,1); will-change: opacity,transform,filter; }
#banner .slick-current .banner_ani.is_show,#banner .slick-current .is_show.banner_ani { opacity: 1; transform: translateY(0); filter: blur(0); }
#banner .ani_delay_01 { transition-delay: .12s; }
#banner .ani_delay_02 { transition-delay: .28s; }
#banner .ani_delay_03 { transition-delay: .46s; }
#banner .ani_delay_04 { transition-delay: .64s; }
#banner .slick-current .title_big.is_show { animation: bannerTitleBreath 1.2s cubic-bezier(.22,1,.36,1) both; }
#banner .slick-current .banner_btn_box.is_show .banner_btn { animation: bannerBtnPop .8s cubic-bezier(.22,1,.36,1) both; }
#banner .slick-current .banner_btn_box.is_show .banner_btn:nth-child(2) { animation-delay: .12s; }
@keyframes bannerTitleBreath {
  0% { letter-spacing: .2em; text-shadow: 0 6px 22px rgba(248,244,236,.95),0 0 0 rgba(63,86,63,0); }
  100% { letter-spacing: .13em; text-shadow: 0 3px 0 rgba(255,255,255,.35),0 10px 30px rgba(248,244,236,.82); }
}
@keyframes bannerBtnPop {
  0% { opacity: 0; transform: translateY(14px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}




@media (max-width:1440px) {
  #banner { height: 720px; min-height: 720px; }
  #banner .title_big { font-size: clamp(50px,4vw,76px); }
  #banner .info_box p { font-size: clamp(20px,1.65vw,26px); }
}
@media (max-width:1280px) {
  #banner { height: 680px; min-height: 680px; }
  #banner .title_big { font-size: clamp(46px,5vw,68px); }
  #banner .info_box p { font-size: 21px; }
  #banner .banner_curve { bottom: -120px; height: 236px; }
  #banner .banner_curve_text { top: 66px; }
}
@media (max-width:1024px) {
  #banner { height: 700px; min-height: 700px; }
  #banner .img_cover { object-position: 63% center; }
  #banner .banner_mask {background:linear-gradient(90deg,rgba(248,244,236,.72) 0%,rgba(248,244,236,.52) 42%,rgba(248,244,236,.12) 100%),linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.08) 55%,rgba(31,41,36,.08) 100%);}
  #banner .workframe { padding-left: 0; padding-top: 24px; }
  #banner .title_big { font-size: clamp(42px,7vw,49px); line-height: 1.25; }
  #banner .info_box p { width: 90%; font-size: 20px; line-height: 1.75; }
  #banner .banner_btn_box { margin-top: 34px; }
  #banner .banner_curve { width: 135%; height: 220px; bottom: -116px; }
  #banner .banner_curve_text { top: 60px; font-size: 24px; }
  #banner .banner_scroll_hint { bottom: 120px; }
  #banner .banner_scroll_link { font-size: 16px; gap: 12px; }
  #banner .scroll_icon { width: 30px; height: 48px; }
}

@media (max-width:768px) {
  #banner { height: 660px; min-height: 660px; }
  #banner .img_cover { object-position: 70% center; }
  #banner .info_box { width: min(90%,var(--width-xl)); }
  #banner .workframe { width: 88%; padding-top: 34px; }
  #banner .title_big { font-size: clamp(38px,10vw,42px); line-height: 1.45; letter-spacing: .1em; }
  #banner .info_box p { width: 88%; margin-top: 22px; font-size: 18px; line-height: 1.7; letter-spacing: .08em; }
  #banner .banner_btn_box { gap: 14px; margin-top: 30px; flex-wrap: wrap; }
  #banner .banner_btn { height: 46px; min-width: 100px; padding: 0 10px; font-size: 13px; }
  #banner .banner_btn span { font-size: 13px; }
  #banner .banner_curve { width: 150%; height: 205px; bottom: -112px; }
  #banner .banner_curve_text { top: 54px; padding: 0 28px; font-size: 21px; letter-spacing: .08em; }
  #banner .banner_scroll_hint { display: none; }
  #banner .banner_scroll_link { font-size: 14px; gap: 10px; }
  #banner .scroll_icon { width: 28px; height: 44px; }
  #banner .scroll_icon i { top: 9px; width: 5px; height: 10px; }
}
@media (max-width:480px) {
  #banner .banner_scroll_link { font-size: 13px; letter-spacing: .04em; }
  #banner .scroll_text { white-space: normal; }
  #banner { height: 600px; min-height: 600px; }
  #banner .img_cover { object-position: 74% center; }
  #banner .workframe { width: 100%; padding-top: 20px; }
  #banner .title_big { font-size: 32px; line-height: 1.28; margin: 8px 0 0; }
  #banner .info_box p { width: 94%; font-size: 16px; margin-top: 10px; }
  #banner .banner_btn_box { display: grid; grid-template-columns: 1fr; width: 160px; }
  #banner .banner_btn { width: 100%; }
  #banner .banner_curve_text { font-size: 18px; line-height: 1.7; }
}