#banner { position: relative; width: 100%; overflow: hidden; background: var(--white); }
#banner:after { content: ""; position: absolute; inset: 0; z-index: 99; background: var(--white); opacity: 1; visibility: visible; pointer-events: none; transition: opacity .35s cubic-bezier(.22,1,.36,1),visibility .35s ease; }
#banner.banner-ready:after { opacity: 0; visibility: hidden; }
#banner .main-slider { opacity: 0; transition: opacity .2s ease; }
#banner .main-slider.slick-initialized { opacity: 1; }
#banner { position: relative; width: 100%; overflow: hidden; background: var(--white); }
#banner .main-slider { width: 100%; background: var(--white); }
#banner .item { position: relative; width: 100%; height: clamp(720px,48vw,1000px); overflow: hidden; background: var(--white); }
#banner .item:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 300px; z-index: 3; background: linear-gradient(0deg,rgba(var(--white-rgb),0) 20%,rgba(var(--white-rgb),1) 100%); pointer-events: none; }
#banner video,#banner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
#banner .item>.pos_abs:has(video),#banner .item>.pos_abs:has(iframe) { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; background: var(--white); opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .12s ease,clip-path .65s cubic-bezier(.77,0,.18,1); }
#banner .item>.pos_abs:has(video) video,#banner .item>.pos_abs:has(iframe) iframe { opacity: 0; transform: scale(1.04); transition: opacity .15s ease,transform 1s cubic-bezier(.22,1,.36,1); will-change: transform,opacity; }
#banner .item.is-media-ready>.pos_abs:has(video) video,#banner .item.is-media-ready>.pos_abs:has(iframe) iframe { opacity: 1; }
#banner .slick-active.is-banner-enter>.pos_abs:has(video),#banner .slick-active.is-banner-enter>.pos_abs:has(iframe) { opacity: 1; clip-path: inset(0 0 0 0); }
#banner .slick-active.is-banner-enter>.pos_abs:has(video) video,#banner .slick-active.is-banner-enter>.pos_abs:has(iframe) iframe { transform: scale(1); }
#banner .item.is-media-ready>.pos_abs:has(video) video,#banner .item.is-media-ready>.pos_abs:has(iframe) iframe { opacity: 1; }
#banner .slick-active.is-media-ready.is-banner-enter>.pos_abs:has(video),#banner .slick-active.is-media-ready.is-banner-enter>.pos_abs:has(iframe) { opacity: 1; clip-path: inset(0 0 0 0); }
#banner .slick-active.is-media-ready.is-banner-enter>.pos_abs:has(video):before,#banner .slick-active.is-media-ready.is-banner-enter>.pos_abs:has(iframe):before { transform: translateX(101%); }
#banner .slick-active.is-media-ready.is-banner-enter>.pos_abs:has(video) video,#banner .slick-active.is-media-ready.is-banner-enter>.pos_abs:has(iframe) iframe { transform: scale(1); }
#banner .banner-media { position: absolute; top: 0; right: 0; z-index: -1; width: 100%; height: 100%; overflow: hidden; opacity: 0; transform: translateX(45px) scale(1.025); transition: opacity .8s 1s ease,transform 1.35s 1s cubic-bezier(.22,1,.36,1); pointer-events: none; }
#banner .slick-active.is-banner-enter .banner-media { opacity: 1; transform: translateX(0) scale(1); }
#banner .banner-media:before { content: ""; position: absolute; inset: 0; z-index: 12; background: linear-gradient(90deg,rgba(var(--white-rgb),.98) 0%,rgba(var(--white-rgb),.58) 21%,rgba(var(--white-rgb),0) 44%),linear-gradient(180deg,rgba(var(--primary-rgb),.02),rgba(var(--primary-rgb),.12)); pointer-events: none; }
#banner .banner-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.025); transition: transform 1.8s 1s cubic-bezier(.22,1,.36,1); }
#banner .slick-active.is-banner-enter .banner-media img { transform: scale(1); }
#banner .banner-shape { position: absolute; z-index: 2; pointer-events: none; }
#banner .info { position: absolute; inset: 0; z-index: 4; align-items: center; pointer-events: none; }
#banner .workframe { width: min(92%,1600px); margin: 0 auto; }
#banner .banner-layout { position: relative; display: flex; align-items: center; height: 100%; }
#banner .txt { position: relative; width: 48%; padding-top: 3%; pointer-events: auto; }
#banner .banner-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; color: var(--primary); font-size: 18px; font-weight: 700; letter-spacing: .12em; }
#banner .banner-eyebrow span { display: block; width: 34px; height: 2px; background: var(--secondary); }
#banner .h3 { max-width: 680px; margin: 0; color: var(--primary); font-size: clamp(30px,3.6vw,60px); font-weight: 600; line-height: 1.16; letter-spacing: .045em; word-spacing: 100vw; text-transform: uppercase; }
#banner .banner-en {margin-top: 25px;font-size: clamp(17px,1.25vw,20px);font-weight: 500;line-height: 1.4;letter-spacing: .055em;color: #03A9F4;}
#banner .txt p { max-width: 580px; margin: 28px 0 0; color: rgba(var(--info-rgb),.74); font-size: clamp(16px,1.05vw,19px); font-weight: 500; line-height: 1.85; letter-spacing: .035em; }
#banner .banner-actions { display: flex; align-items: center; gap: 16px; margin-top: 38px; }
#banner .bttmore a { display: flex; align-items: center; justify-content: center; gap: 22px; min-width: 150px; height: 58px; padding: 0 28px; background: var(--secondary); color: var(--white); font-size: 16px; font-weight: 500; letter-spacing: .06em; box-shadow: 0 14px 30px rgba(var(--primary-rgb),.2); transition: .3s ease; }
#banner .bttmore a:hover { background: var(--primary); color: var(--white); transform: translateY(-3px); }
#banner .bttmore a i { font-size: 20px; font-style: normal; font-weight: 400; color: var(--white); transition: .3s ease; }
#banner .bttmore a:hover i { transform: translateX(5px); }
#banner .bttservice a { display: flex; align-items: center; justify-content: center; min-width: 170px; height: 58px; padding: 0; border: 1px solid rgba(var(--primary-rgb),.42); background: rgba(var(--white-rgb),.78); color: var(--secondary); font-size: 16px; font-weight: 700; letter-spacing: .05em; backdrop-filter: blur(8px); transition: .3s ease; }
#banner .bttservice a:hover { border-color: var(--secondary); background: var(--white); color: var(--secondary); }
#banner .callphone { display: flex; align-items: center; gap: 16px; margin-top: 27px; color: var(--primary); font-size: 16px; font-weight: 700; }
#banner .callphone a { display: flex; align-items: center; gap: 10px; color: var(--primary); }
#banner .callphone-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 15px; height: 15px; color: var(--secondary); font-size: 8px; }
#banner .callphone-area { position: relative; padding-left: 17px; color: rgba(var(--info-rgb),.75); }
#banner .callphone-area:before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 15px; background: rgba(var(--primary-rgb),.3); transform: translateY(-50%); }
#banner .banner-side-info { position: absolute; top: 18%; right: -70px; z-index: 7; width: 130px; color: rgba(var(--primary-rgb),.62); text-align: left; pointer-events: none; }
#banner .banner-side-en { font-size: 16px; font-weight: 700; line-height: 1.75; letter-spacing: .1em; }
#banner .banner-side-line { width: 1px; height: 120px; margin: 34px 0; background: rgba(var(--primary-rgb),.24); }
#banner .banner-side-cn { font-size: 20px; line-height: 1.9; letter-spacing: .12em; writing-mode: vertical-rl; }
#banner .flm_img { position: absolute; left: 3%; bottom: 4%; z-index: 5; display: none; pointer-events: none; }
#banner .banner-index { display: flex; align-items: flex-end; gap: 10px; color: rgba(var(--primary-rgb),.22); }
#banner .banner-index span { font-size: 46px; font-weight: 900; line-height: 1; }
#banner .banner-index small { padding-bottom: 4px; font-size: 16px; font-weight: 700; letter-spacing: .08em; }
#banner .banner-link { position: absolute; inset: 0; z-index: 1; }
#banner .slick-dots { position: absolute; right: 4%; bottom: 42px; z-index: 9; display: flex!important; align-items: center; gap: 10px; width: auto; margin: 0; padding: 0; list-style: none; }
#banner .slick-dots li { width: auto; height: auto; margin: 0; }
#banner .slick-dots button { display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--white); font-size: 0; opacity: .45; transition: .3s ease; }
#banner .slick-dots .slick-active button { width: 32px; border-radius: 10px; background: var(--secondary); opacity: 1; }
#banner .banner-eyebrow,#banner .h3,#banner .banner-en,#banner .txt p,#banner .banner-actions,#banner .callphone,#banner .banner-side-info { opacity: 0; }
#banner .slick-active.is-banner-enter .banner-eyebrow { animation: bannerFadeUp .45s .22s both; }
#banner .slick-active.is-banner-enter .h3 { animation: bannerFadeUp .5s .28s both; }
#banner .slick-active.is-banner-enter .banner-en { animation: bannerFadeUp .5s .34s both; }
#banner .slick-active.is-banner-enter .txt p { animation: bannerFadeUp .5s .4s both; }
#banner .slick-active.is-banner-enter .banner-actions { animation: bannerFadeUp .5s .46s both; }
#banner .slick-active.is-banner-enter .callphone { animation: bannerFadeUp .5s .52s both; }
#banner .slick-active.is-banner-enter .banner-side-info { animation: bannerFadeRight .5s .38s both; }
@keyframes bannerFadeUp {
  0% { opacity: 0; transform: translateY(28px) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes bannerFadeRight {
  0% { opacity: 0; transform: translateX(22px) }
  100% { opacity: 1; transform: translateX(0) }
}


@media(max-width:1440px) {
  #banner .workframe { width: 90%; }
  #banner .txt { width: 50%; }
  #banner .banner-side-info { right: -10px; }
}
@media(max-width:1280px) {
  #banner .item { height: 780px; }
  #banner .txt { width: 52%; }
  #banner .h3 { font-size: 48px; }
  #banner .banner-side-info { display: none; }
}
@media(max-width:960px) {
  #banner .item { height: auto; min-height: 920px; padding-bottom: 0; }
  #banner video,#banner iframe { top: auto; bottom: 0; width: 100%; height: 50%; }
  #banner .item>.pos_abs:has(video),#banner .item>.pos_abs:has(iframe) { top: auto; bottom: 0; height: 50%; clip-path: none; transition: opacity .6s ease; }
  #banner .item>.pos_abs:has(video):before,#banner .item>.pos_abs:has(iframe):before { display: none; }
  #banner .item>.pos_abs:has(video) video,#banner .item>.pos_abs:has(iframe) iframe { transform: scale(1.04); transition: opacity .3s ease,transform 1.5s cubic-bezier(.22,1,.36,1); }
  #banner .slick-active.is-media-ready.is-banner-enter>.pos_abs:has(video) video,#banner .slick-active.is-media-ready.is-banner-enter>.pos_abs:has(iframe) iframe { transform: scale(1); }
  #banner .banner-media,#banner video,#banner iframe { top: auto; bottom: 0; width: 100%; height: 36%; transform: translateY(0px) scale(1.03); transition: opacity .8s .65s ease,transform 1.2s .65s cubic-bezier(.22,1,.36,1); }
  #banner .slick-active.is-banner-enter .banner-media { transform: translateY(0) scale(1); }
  #banner .banner-media:before { background: linear-gradient(180deg,var(--white) 0%,rgba(var(--white-rgb),.72) 18%,rgba(var(--white-rgb),0) 45%); }
  #banner .banner-shape { display: none; }
  #banner .info { position: relative; min-height: 920px; align-items: flex-start; }
  #banner .banner-layout { display: block; padding-top: 90px; }
  #banner .txt { width: 100%; }
  #banner .flm_img { display: none; }
  #banner .slick-dots { bottom: 24px; }
}
@media(max-width:768px) {
  #banner .item { min-height: 840px; }
  #banner .info { min-height: 840px; }
  #banner .banner-layout { padding-top: 90px; }
  #banner .banner-eyebrow { margin-bottom: 10px; font-size: 15px; }
  #banner .h3 { font-size: 46px; line-height: 1.2; }
  #banner .banner-en { margin-top: 18px; font-size: 15px; }
  #banner .txt p { margin-top: 20px; font-size: 15px; line-height: 1.8; }
  #banner .banner-actions { gap: 10px; margin-top: 28px; }
  #banner .bttmore,#banner .bttservice { width: 50%; }
  #banner .bttmore a,#banner .bttservice a { width: auto; min-width: 0; height: 52px; padding: 0 15px; font-size: 15px; }
  #banner .callphone { margin-top: 20px; font-size: 15px; }
  #banner .item>.pos_abs:has(video),#banner .item>.pos_abs:has(iframe),#banner .banner-media,#banner video,#banner iframe { height: 34%; transform: translateY(0px) scale(1.03); }
  #banner .slick-dots { right: 5%; }
}
@media(max-width:480px) {
  #banner .item { min-height: 660px; }
  #banner .info { min-height: 660px; }
  #banner .banner-layout { padding-top: 100px; }
  #banner .h3 { font-size: 32px; }
  #banner .banner-en { font-size: 15px; }
  #banner .txt p { font-size: 14px; }
  #banner .banner-actions { flex-wrap: wrap; }
  #banner .bttmore,#banner .bttservice { width: auto; }
  #banner .bttmore a,#banner .bttservice a { font-size: 15px; }
  #banner .callphone { flex-wrap: wrap; gap: 9px 12px; }
  #banner .item>.pos_abs:has(video),#banner .item>.pos_abs:has(iframe),#banner .banner-media,#banner video,#banner iframe { height: 25%; }
}