/* banner */
#banner {width: 100%;z-index: 3;position: relative;overflow: hidden;}
#banner .item {height: 100vh;}
#banner::after{position:absolute;width:100%;height: 500px;background: url(/images/44/banner_shape.png);bottom: 0;left:0;z-index: 1;content:"";opacity: 1;background-size: cover;}

.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 iframe {position: absolute;width: 120%;height: 120%;top: -5%;left: -10%;}
#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: 0px;transform: translateX(-50%);z-index: 10;display: inline-flex;flex-direction: column;align-items: center;gap: 10px;color: #000000;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 rect{stroke:#1a131f;}
#scrolldown svg circle {animation: wheelMove 1.6s ease-in-out infinite;transform-origin: 66px 56px;fill: #000002;}
#scrolldown .scrollTxt {font-size: 12px;letter-spacing: .18em;text-transform: uppercase;opacity: .9;animation: textFade 2.4s ease-in-out infinite;color: #2f1b37;}
#scrolldown span {display: block;width: 1px;height: 21px;background: #2f1b37;position: relative;overflow: hidden;}
#scrolldown span::before {content: "";position: absolute;left: 0;top: -100%;width: 100%;height: 100%;background: #bababa;animation: lineDown 1.8s ease-in-out infinite;}
.flyman{position:absolute;width: 36vw;aspect-ratio: 1/1;right: -2vw;margin-top: -25vw;z-index: 6;}
.flyman img{
	    animation: UpDown 2.4s 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%; }
}
@keyframes UpDown {
  0% { transform: translateY(0); }
  50% {transform: translateY(20px); }
  100% {transform: translateY(0); }
}

@media screen and (max-width: 1470px){
	#banner::after{height: 380px;}
    #scrolldown span{height: 19px;}
    #scrolldown{gap: 8px;bottom: 5px;}
	#scrolldown .scrollTxt{font-size: 0.6rem;}
	#scrolldown svg{
    width: 35px;
}
}
@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: 220px;}
	#banner::after{height: 181px;display: none;}
	#scrolldown{display:none;}
	.flyman{width: 46vw;margin-top: -53vw;display: none;}
	#banner .item .clip iframe{
    top: 0;
    height: 100%;
    left: 0;
    width: 100%;
}
}