#banner .main-slider { opacity: 0; visibility: hidden; transition: opacity .5s ease; }
#banner .main-slider.slick-initialized { opacity: 1; visibility: visible; }
#banner { position: relative; width: 100%; overflow: hidden; background: #0b0b0c; }
#banner #banner_box { position: relative; width: 100%; }
#banner_box .img_box iframe,#banner_box .img_box video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#banner .main-slider { position: relative; width: 100%; }
#banner .item { position: relative; width: 100%; overflow: hidden; background: #0b0b0c; }
#banner_box,#banner_box .item,#banner_box .img_box { position: relative; }
#banner .img_box:after { content: ""; position: absolute; inset: 0; background: linear-gradient(330deg,rgba(5,5,6,.1) 0%,rgba(5,5,6,.1) 32%,rgba(5,5,6,.4) 68%,rgba(5,5,6,.4) 100%); }
#banner_box .img_box img { display: block; min-width: 100vw; width: 100vw; transform: scale(1.05); filter: brightness(.9); transition: transform 5.5s cubic-bezier(.16,1,.3,1),filter .8s ease; }
#banner .item.is-active .img_cover { transform: scale(1); filter: brightness(1); }
#banner .banner_overlay { position: absolute; inset: 0; background: linear-gradient(270deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 80%,rgba(0,0,0,.6) 100%); pointer-events: none; }
#banner .banner_product_line { position: absolute; top: 0; left: 7%; width: 1px; height: 100%; background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.32) 18%,rgba(255,255,255,.08) 72%,rgba(255,255,255,0) 100%); z-index: 2; transform: scaleY(0); transform-origin: top center; transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
#banner .item.is-active .banner_product_line { transform: scaleY(1); transition-delay: .28s; }
#banner .info_box { position: absolute; z-index: 4; top: 0; left: 6%; width: 36%; height: 100%; display: flex; align-items: center; padding: 0 5.2vw 0 5.4vw; }
#banner .workframe { width: 100%; max-width: 650px; color: #fff; }
#banner .banner_tag { position: relative; padding-left: 54px; margin-bottom: 28px; font-size: 11px; font-weight: 500; letter-spacing: .18em; color: rgba(255,255,255,.62); }
#banner .banner_tag:before { content: ""; position: absolute; left: 0; top: 50%; width: 34px; height: 1px; background: #cf232b; transform: scaleX(0); transform-origin: left center; transition: transform .7s cubic-bezier(.16,1,.3,1); }
#banner .item.is-active .banner_tag:before { transform: scaleX(1); transition-delay: .1s; }
#banner .title_big { margin: 0 0 24px; font-size: clamp(32px,3vw,58px); line-height: 1.14; font-weight: 400; letter-spacing: .02em; color: #fff; }
#banner .info_box p { max-width: 370px; margin: 0; font-size: 16px; line-height: 1.95; font-weight: 300; letter-spacing: .04em; color: rgba(255,255,255,.72); }
#banner .banner_more { display: flex; align-items: center; gap: 20px; width: max-content; margin-top: 42px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.35); }
#banner .banner_more span { font-size: 13px; letter-spacing: .08em; color: #fff; }
#banner .banner_more i { position: relative; width: 40px; height: 1px; background: rgba(255,255,255,.7); transform: scaleX(.55); transform-origin: left center; transition: transform .7s cubic-bezier(.16,1,.3,1),width .3s ease; }
#banner .banner_more i:after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
#banner .item.is-active .banner_more i { transform: scaleX(1); transition-delay: .45s; }
#banner .item:hover .banner_more { border-bottom-color: #cf232b; }
#banner .item:hover .banner_more i { width: 54px; }
#banner .banner_tag,#banner .title_big,#banner .info_box p,#banner .banner_more { opacity: 0; transform: translate3d(0,32px,0); transition-property: opacity,transform; transition-duration: .65s,.9s; transition-timing-function: ease,cubic-bezier(.16,1,.3,1); transition-delay: 0s; }
#banner .item.is-active .banner_tag,#banner .item.is-active .title_big,#banner .item.is-active .info_box p,#banner .item.is-active .banner_more { opacity: 1; transform: translate3d(0,0,0); }
#banner .item.is-active .banner_tag { transition-delay: .12s; }
#banner .item.is-active .title_big { transition-delay: .22s; }
#banner .item.is-active .info_box p { transition-delay: .32s; }
#banner .item.is-active .banner_more { transition-delay: .42s; }
#banner .banner_side_text { position: absolute; z-index: 4; left: 32px; bottom: 110px; font-size: 9px; letter-spacing: .24em; color: rgba(255,255,255,.48); writing-mode: vertical-rl; opacity: 0; transform: translate3d(0,20px,0) rotate(180deg); transition: opacity .65s ease,transform .85s cubic-bezier(.16,1,.3,1); }
#banner .item.is-active .banner_side_text { opacity: 1; transform: translate3d(0,0,0) rotate(180deg); transition-delay: .55s; }
#banner .banner_pager { position: absolute; z-index: 5; right: 5.2vw; bottom: 52px; display: flex; align-items: center; gap: 13px; font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.6); opacity: 0; transform: translate3d(0,14px,0); transition: opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1); }
#banner .item.is-active .banner_pager { opacity: 1; transform: translate3d(0,0,0); transition-delay: .62s; }
#banner .banner_pager span { color: #fff; }
#banner .banner_pager i { display: block; width: 56px; height: 1px; background: rgba(255,255,255,.28); }
#banner .banner_pager em { font-style: normal; }
#banner .atag_item { position: absolute; z-index: 5; inset: 0; }
#banner .slick-slide { outline: none; }
#banner .slick-list,#banner .slick-track { height: 100%; }


@media(max-width:1280px) {
  #banner .item {/* height: 780px; */min-height: 0;}
  #banner .info_box {width: 60%;padding-right: 4vw;padding-left: 5vw;}
  #banner .banner_product_line { left: 7%; }
  #banner .title_big {font-size: 32px;}
}
@media(max-width:1160px) {
  #banner_box .img_box iframe,#banner_box .img_box video {width: auto;}
  #banner .item {/* height: 720px; */}
  #banner .img_box:after { background: linear-gradient(90deg,rgba(5,5,6,.12) 0%,rgba(5,5,6,.32) 45%,rgba(5,5,6,.82) 100%); }
  #banner .info_box { width: 52%; padding-left: 6vw; }
  #banner .banner_product_line { display: none; }
  #banner .title_big {}
  #banner .info_box p { font-size: 15px; }
}
@media(max-width:768px) {
  #banner .item {height: 570px;}
  #banner .img_box:after { background: linear-gradient(180deg,rgba(5,5,6,.08) 0%,rgba(5,5,6,.18) 38%,rgba(5,5,6,.9) 100%); }
  #banner .img_cover { object-position: center top; }
  #banner .info_box {top: 0;bottom: 0;left: 0;right: 0;width: 84%;height: auto;align-items: flex-end;padding: 0 0px 50px;margin: auto;}
  #banner .workframe { max-width: 100%; }
  #banner .banner_tag { margin-bottom: 18px; padding-left: 42px; font-size: 10px; }
  #banner .banner_tag:before { width: 28px; }
  #banner .title_big {margin-bottom: 10px;}
  #banner .info_box p { max-width: 480px; font-size: 14px; line-height: 1.8; }
  #banner .banner_more {margin-top: 15px;}
  #banner .banner_side_text { display: none; }
  #banner .banner_pager { right: 28px; bottom: 24px; }
}
@media(max-width:640px) {
  #banner .item {height: 520px;}
  #banner .info_box {}
  #banner .title_big { font-size: 32px; line-height: 1.22; }
  #banner .info_box p {}
  #banner .banner_more span { font-size: 12px; }
  #banner .banner_pager { right: 22px; }
  #banner_box .img_box iframe,#banner_box .img_box video {/* left: -40px; */}
  #banner_box .img_box img { aspect-ratio: 5/3; }
}
@media(max-width:480px) {
  #banner .item {height: 440px;}
  #banner .title_big {font-size: 26px;}
  #banner .banner_tag { letter-spacing: .12em; }
  #banner .banner_pager i { width: 38px; }
}