/* banner */
#banner {padding: 96px 0 0;z-index: 3;}
#banner:before{content:'';position: absolute;width: 92%;height: 90px;background: white;bottom: 0;right: 0;z-index: 3;}
#banner .item {height: 700px;}
#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 11.5% auto;width: min(90%, 1370px);}
#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 >* {font-size: 16px;}
#banner .item .info >div .txt p b{font-size:20px;color: var(--primary);letter-spacing: 1.5px;line-height: 2.5;}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 130%;font-size: 50px;font-family: 'Noto Serif TC';word-spacing: 100vw;font-weight: 900;letter-spacing: 1px;}
#banner .consult_btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding: 10px 25px;border-radius: 50px;background:var(--gradient-cta);color:var(--white);font-size:15px;font-weight:500;letter-spacing:1px;text-decoration:none;transition:all .3s ease;margin-top: 35px;}
#banner .consult_btn *{color:white;font-size: 15px;font-weight: 400;}
#banner .consult_btn .arrow{font-size: 23px;font-weight:300;line-height: 0;transition:transform .3s ease;transform: translateY(-2px);}
#banner .consult_btn:hover{color:var(--white);background: linear-gradient(90deg, #05235a, #05235a);}
#banner .consult_btn:hover .arrow{transform: translateY(-2px) translateX(4px);}

#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 Typewriter */
#banner .item .info >div .txt .h3{position:relative;}
#banner .item .info >div .txt .h3.typing:after{content:"";display:inline-block;width:0;height:.9em;margin-left:7px;background:var(--primary);vertical-align:-.05em;animation:typeCursor .75s step-end infinite;}
#banner .item .info >div .txt .h3.typing.done:after{animation:typeCursor .75s step-end 3;}
@keyframes typeCursor{0%,45%{opacity:1;}46%,100%{opacity:0;}}

/* Scroll Down */
#banner .scrollDown{position:absolute;left: clamp(30px,2.7vw,80px);bottom:28px;z-index:10;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--primary);cursor:pointer;transition:.3s;}
#banner .scrollDown .text{display:block;font-size:12px;font-weight:600;line-height:1;letter-spacing:.04em;color:var(--primary);}
#banner .scrollDown .scrollArrow{display:block;width:14px;height:14px;border-right:1.5px solid var(--primary);border-bottom:1.5px solid var(--primary);transform:rotate(45deg);animation:scrollArrowMove 1.8s ease-in-out infinite;}
#banner .scrollDown:hover{opacity:.65;}
#banner .scrollDown:hover .scrollArrow{animation-duration:1s;}
@keyframes scrollArrowMove{0%{transform:translateY(-4px) rotate(45deg);opacity:.3;}45%{opacity:1;}100%{transform:translateY(7px) rotate(45deg);opacity:.15;}}

@media screen and (max-width: 1680px){
	#banner .item .clip video{width:120%;left: 45%;}
}
@media screen and (max-width: 1440px){
	#banner .item .clip video{width: auto;left: 40%;height: 100%;}
}
@media screen and (max-width: 1280px){
    #banner .item .info >div{margin-bottom: 16%;}
    #banner{padding-top:86px}
}
@media screen and (max-width: 1024px){
    #banner .item .info >div{margin-bottom: 8.5%;}
	#banner .item { height: 65vh; }
    #banner:before, #banner .scrollDown{display:none;}
}
@media screen and (max-width:768px) {
    #banner .item .info >div{background: linear-gradient(-90deg, rgb(0 0 0 / 0%), var(--darkt));padding: 40px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;margin: 0;display: flex;flex-direction: column;align-items: flex-start;justify-content: center;}
    #banner .item .info >div .txt .h3{font-size: 35px;}
    #banner .consult_btn{display:none;}
	#banner .item { height: 55vh; }
	#banner .item .clip video{left: 20%;}
  #banner .scrollDown { left: 20px; bottom: 18px; gap: 8px; }
  #banner .scrollDown .text { font-size: 10px; }
  #banner .scrollDown .scrollArrow { width: 11px; height: 11px; }
}
@media screen and (max-width: 640px){
	#banner .item .clip video{left: 5%;}
    #banner .item .info >div{padding-right:0;justify-content: flex-end;}
    #banner{padding-top:70px}
    #banner .item .info >div .txt p b{font-size:18px;}
    #banner .item .info >div .txt >*{font-size: 13px;}
	#banner .item { height: 45vh; }
    #banner .item .info >div .txt .h3{display:none;}
}