/* banner */
#banner {width: 100%;z-index: 3;position: relative;overflow: hidden;}
#banner .item {height: 100vh;}
#banner::after{position:absolute;width:100%;height: 30%;background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%, #fff 100%);bottom: 0;left:0;z-index: 1;content:"";opacity: 1;}

.light-bg { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at center,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,rgb(102 63 37/30%) 60%,rgb(64 34 15/90%) 100%); }
#banner .item .clip >* { min-width: 100%; width: 100%; }
#banner .item .clip .bgBox {  }
#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: auto;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);filter: contrast(80%) saturate(90%);}
#banner .item .info >div {margin: auto;width: calc(100% - 60px);}
#banner .item .info >div .txt {-webkit-transition-delay: .2s;transition-delay: .2s;transform: scaleX(0);-webkit-transform: scaleX(0);transform-origin: 0 0;-webkit-transform-origin: 0 0;text-align: center;}
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* {padding: 10px 15px;font-size: 18px;text-align: center;}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 120%;font-size: 35px;margin-top: 20px;}
#banner .item .info >div .txt .entit{display: flex;align-items: center;gap: 40px;justify-content: center;letter-spacing: 2px;font-size: 14px;}
#banner .item .info >div .txt .entit:before, #banner .item .info >div .txt .entit:after{content:'';display: block;width: 300px;height: 1px;background: white;opacity: .5;}
#banner .item .info >div .txt img{height: 80px;padding: 0;margin: 5% auto 0;}
#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 .info { display: none; }

/* scrolldown */
#scrolldown { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 10; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
#scrolldown b { display: block; font-weight: normal; }
#scrolldown svg { width: 52px; height: auto; animation: mouseFloat 2.4s ease-in-out infinite; }
#scrolldown svg circle { animation: wheelMove 1.6s ease-in-out infinite; transform-origin: 66px 56px; }
#scrolldown .scrollTxt { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .9; animation: textFade 2.4s ease-in-out infinite; color: var(--white); }
#scrolldown span { display: block; width: 1px; height: 42px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
#scrolldown span::before { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: #fff; animation: lineDown 1.8s ease-in-out infinite; }
@keyframes mouseFloat {
  0%,100% { transform: translateY(0); opacity: .9; }
  50% { transform: translateY(6px); opacity: 1; }
}
@keyframes wheelMove {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(28px); opacity: .35; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes textFade {
  0%,100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes lineDown {
  0% { top: -100%; }
  100% { top: 100%; }
}

@media screen and (max-width: 1400px){
    #scrolldown span{height: 40px;}
    #scrolldown{gap: 15px;bottom: 20px;}
}
@media screen and (max-width: 1280px){
	#banner { padding-top: 70px; }
}
@media screen and (max-width: 1024px){
	#banner .item {height: 70vh;}
    #banner .item .clip video{height: 150%;width: auto;top: 50%;}
}
@media screen and (max-width: 640px){
    #banner .item .info >div .txt >*{font-size: 13px;}
    #banner .item .info >div .txt img{height: 35px;margin-top: 30%;}
    #banner .item .info >div .txt .h3{font-size:30px;}
    #banner .item .info >div .txt .entit{gap:20px;}
    #banner .item .info >div .txt .entit:before, #banner .item .info >div .txt .entit:after{width:100px;}
	#banner .item .clip video { height: 120%; }
	#banner .item { height: 55vh; }
}