#banner { z-index: 3; margin-top: 89px; background: #041225; position: relative; overflow: hidden; }
#banner:before {content: "";position: absolute;inset: 0;background: radial-gradient(circle at 18% 30%,rgba(var(--primary-rgb),0.35) 0%,transparent 28%),radial-gradient(circle at 75% 18%,rgba(0,220,255,0.22) 0%,transparent 30%),linear-gradient(135deg,rgba(2,12,30,0.95) 0%,rgba(4,24,48,0.9) 48%,rgba(1,9,22,0.95) 100%);pointer-events: none;z-index: 0;}
#banner:after {content: "";position: absolute;inset: 0;background-image: linear-gradient(rgba(47,164,215,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(47,164,215,0.06) 1px,transparent 1px);background-size: 42px 42px;opacity: 0.45;pointer-events: none;z-index: 1;}
#banner .item,#banner .item .clip { aspect-ratio: 21/9; }
#banner .item .clip > * { min-width: 100%; width: 100%; }
#banner .item .clip { position: relative; overflow: hidden; }
#banner .item .clip:before { content: ""; position: absolute; width: 100%; height: 100%; background: linear-gradient(90deg,rgba(2,12,30,0.92) 0%,rgba(4,22,45,0.82) 32%,rgba(4,22,45,0.34) 58%,rgba(4,22,45,0.08) 100%),linear-gradient(180deg,rgba(0,218,255,0.08) 0%,rgba(3,18,38,0.32) 60%,rgba(2,10,24,0.75) 100%); top: 0; left: 0; z-index: 0; }
#banner .item .clip:after { content: ""; position: absolute; inset: 4%; border: 1px solid rgba(var(--primary-rgb),0.45); box-shadow: inset 0 0 25px rgba(var(--primary-rgb),0.22),0 0 28px rgba(var(--primary-rgb),0.18); clip-path: polygon(0 8%,4% 0,96% 0,100% 8%,100% 92%,96% 100%,4% 100%,0 92%); pointer-events: none; z-index: 2; }
#banner .item .clip .bgBox { transform: scale(1.2); -webkit-transform: scale(1.2); z-index: -2; position: relative; filter: saturate(0.95) contrast(1.05) brightness(0.95); }
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip video { overflow: hidden; position: absolute; width: 100%; height: 100%; top: 0; object-fit: cover; z-index: -1; }
#banner .item .info { z-index: 5; }
#banner .item .info > div {margin: auto auto 7%;width: 36%;margin-left: 17%;position: relative;padding: 38px 0;}
#banner .item .info > div .txt { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; transform: scaleX(0); -webkit-transform: scaleX(0); transform-origin: 0 0; -webkit-transform-origin: 0 0; margin: 34px 0; }
#banner .item .info > div .txt:nth-child(2) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
#banner .item .info > div .txt > * { font-size: 22px; line-height: 2; font-weight: 300; color: rgba(255,255,255,0.88); text-shadow: 0 0 12px rgba(var(--primary-rgb),0.35); }
#banner .item .info > div .txt .h3 { margin-bottom: 15px; line-height: 120%; font-size: 35px; color: #ffffff; }
#banner .item .h3tt .h3 { font-size: max(4.5 * (1vw + 1vh)/2,35px); font-weight: 700; line-height: 1.3; text-transform: uppercase; font-family: "Inter",sans-serif; letter-spacing: 5px; color: #ffffff; text-shadow: 0 0 12px rgba(0,217,255,0.55),0 0 26px rgba(var(--primary-rgb),0.35); }
#banner .item.slick-current .clip .bgBox { -webkit-animation: scale_banner 6s linear infinite; animation: scale_banner 6s linear infinite; }
#banner .item.slick-current .info > div .txt { transform: scaleX(1); -webkit-transform: scaleX(1); }
#banner .seemore { position: relative; z-index: 10; }
#banner .gooeyBtn {--a: 0%;--x: 50;--y: 50;--button: var(--primary);display: inline-flex;align-items: center;justify-content: center;min-width: 151px;min-height: 80px;outline: 0;border-radius: 999px;text-decoration: none;cursor: pointer;color: #ffffff;font-size: 16px;font-weight: 500;letter-spacing: 0.08em;position: relative;padding: 0 34px;transition: --a 0.5s ease-in-out,scale var(--spring-duration) var(--spring-easing),background 0.35s ease,box-shadow 0.35s ease;isolation: isolate;}
#banner .gooeyBtn:hover {--a: 100%;}
#banner .gooeyBtn:before {content: "";position: absolute;inset: 0;border-radius: 999px;filter: blur(10px) url(#goo);background-image: linear-gradient(0deg,rgba(var(--primary-rgb),0.85),rgba(0,217,255,0.85)),radial-gradient(40% 70% at calc(var(--x) * 1%) calc(var(--y) * 1%),rgba(0,217,255,var(--a)) 0%,transparent 90%);background-clip: content-box,border-box;padding: 10px;z-index: -1;}
#banner .btn { position: absolute; display: flex; align-items: center; justify-content: center; bottom: 28%; left: 7%; flex-direction: column; padding: 0; z-index: 6; }
#banner .btn a { display: flex !important; align-items: center; justify-content: center; border: 1px solid rgba(0,217,255,0.42); width: 70px; aspect-ratio: 1/1; margin: 10px 0; border-radius: 50px; background: rgba(3,24,52,0.48); box-shadow: inset 0 0 14px rgba(var(--primary-rgb),0.16),0 0 18px rgba(var(--primary-rgb),0.18); backdrop-filter: blur(6px); }
#banner .btn a:hover { background: rgba(var(--primary-rgb),0.22); border-color: rgba(0,217,255,0.88); box-shadow: 0 0 22px rgba(0,217,255,0.55),inset 0 0 18px rgba(0,217,255,0.18); }
#banner .btn a svg { width: 13px; height: 13px; fill: #dffaff; filter: drop-shadow(0 0 6px rgba(0,217,255,0.75)); }
#banner .btn a#banner_next svg { transform: scaleX(-1); }
#banner .slick-dots { bottom: 52%; width: auto; display: flex !important; flex-direction: column; align-items: center; left: 5.5%; justify-content: flex-end; z-index: 6; }
#banner .slick-dots li { margin: 5px 0; }
#banner .slick-dots li button { border: 1px solid rgba(0,217,255,0); border-radius: 50px; background: rgba(3,24,52,0.35); box-shadow: inset 0 0 10px rgba(var(--primary-rgb),0.12); }
#banner .slick-dots li.slick-active button { border: 1px solid rgba(0,217,255,0.65); box-shadow: 0 0 12px rgba(0,217,255,0.55),inset 0 0 10px rgba(0,217,255,0.2); }
#banner .slick-dots li button:before { opacity: 1; color: #7eeeff; text-shadow: 0 0 8px rgba(0,217,255,0.85); }
#banner .slick-dots li.slick-active button:before { color: #ffffff; }
#banner .text-js {opacity: 0;font-size: max(2.6 * (1vw + 1vh)/2,20px);color: #ffffff;font-weight: 500;text-transform: uppercase;line-height: 1.5;letter-spacing: 2px;min-height: 111px;text-shadow: 0 0 12px rgba(0,217,255,0.45),0 0 24px rgba(var(--primary-rgb),0.28);word-spacing: 100vw;}
#banner .cursor {display: block;position: absolute;height: 110%;top: 0;right: -5px;width: 1px;z-index: 1;animation: flash 0.5s none infinite alternate;}
@keyframes flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@-webkit-keyframes scale_banner {
  to { -webkit-transform: scale(1); }
}
@keyframes scale_banner {
  to { transform: scale(1); }
}
@media screen and (max-width:1470px) {
    #banner .item, #banner .item .clip{aspect-ratio: 19/9;}
  #banner .btn {bottom: 21%;}
  #banner .item .info > div .txt > * { font-size: 18px; }
  #banner .item .info > div { width: 38%; margin-bottom: 5%; padding: 30px 34px; }
  #banner .item .info > div .txt { margin: 20px 0; }
  #banner .text-js { min-height: 100px; }
}
@media screen and (max-width:1280px) {
    #banner{margin-top:80px;}
}
@media screen and (max-width:1024px) {
    section .title_box{font-size: 26px;line-height: 1.5;text-align: center;}
    #banner .btn{display:none;}
  #banner { margin-top: 70px; }
  #banner .item { height: 85vh; }
  #banner .item,#banner .item .clip { aspect-ratio: auto; }
  #banner .item .clip { height: 100%; }
  #banner .item .info > div { width: 55%; margin-left: 12%; }
}
@media screen and (max-width:768px) {
#banner .item .info > div{margin-left: 5%;}
}
@media screen and (max-width:640px) {
  #banner {margin-top: 80px;}
  #banner .item .info > div .txt > * { font-size: 14px; }
  #banner .item .info > div { width: 82%; margin: auto auto 55px; padding: 24px 24px; }
  #banner .item .h3tt .h3 { letter-spacing: 2px; }
  #banner .slick-dots,#banner .btn { display: none !important; }
  #banner .more_btn { display: none; }
  #banner .item { height: 65vh; }
  #banner .text-js { min-height: 80px; }
}