/* banner */
#banner {width: 100%; z-index: 3; }
#banner:before{content:'';position: absolute;width: 100%;height: 30%;left: 0;bottom: 0;background: linear-gradient(180deg, rgb(0 0 0 / 0%), var(--lightbg));z-index: 2;pointer-events: none;}
#banner .item {height: 98vh;display: flex;justify-content: center;}
#banner .item:before{content:url(/images/44/img-banner-icon.png);position: absolute;top: 30px;z-index: 2;pointer-events: none;}
#banner .main-slider { }
#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%); }
#banner .item .info >div {margin: auto auto 14%;width: calc(100% - 60px);}
#banner .item .info >div *{text-align:center;}
#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; }
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* {padding: 10px 15px;max-width: calc(100% - 30px);font-size: 60px;color: #051838;line-height: 1.3;font-weight: 600;letter-spacing: 4px;}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 120%;font-size: 25px;font-family: "Poppins", sans-serif;font-weight: 500;letter-spacing: 3px;}

#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 .scroll_btn {position:absolute;z-index:8;bottom:68px;left: calc(50% - 5px);display:flex;align-items:center;justify-content:center;width: 85px;aspect-ratio: 1/1;padding:0;border:0;border-radius:50%;background: var(--primary);box-shadow:0 15px 30px rgba(18,58,130,.25);cursor:pointer;transform:translateX(-50%);transition:background .3s ease,transform .3s ease;}
#banner .scroll_btn span {display:flex;align-items:center;justify-content:center;}
#banner .scroll_btn svg {width: 24px;height: 24px;fill: white;animation:scrollArrow 1.6s ease-in-out infinite;}
@keyframes scrollArrow {
	0%,100% {transform:translateY(-2px);}
	50% {transform:translateY(4px);}
}
@media screen and (max-width: 1680px){
    #banner .item .info >div{margin-bottom: 17%;}
    #banner .item {height: 90vh}
}
@media screen and (max-width: 1366px){
    #banner .item {height: 95vh}
	#banner .item .clip video{width:100%;height:auto}
    #banner .item .info >div .txt .h3{font-size:20px;margin-bottom: 0;}
    #banner .item .info >div .txt >*{font-size: 40px;}
}
@media screen and (max-width: 1024px){
    #banner .item .info >div{margin-bottom: 20%;}
    #banner .scroll_btn{bottom: 45px;}
    #banner .item {height: 80vh}
	#banner .item .clip video{width:auto;height:100%}
}
@media screen and (max-width: 980px){
    #banner .item .info >div{margin-bottom: 30%;}
    #banner .scroll_btn{bottom: 45px;}
    #banner .item {height: 60vh}
	#banner .item .clip video{width:auto;height:100%}
}
@media screen and (max-width: 680px){
    #banner .item:before{zoom: 30%;top: 20%;}
    #banner .scroll_btn{display:none;}
    #banner .item .info >div .txt .h3{font-size:14px;}
    #banner .item .info >div .txt >*{font-size: 26px;}
}