/* banner */
#banner{padding:0;width:100vw;z-index:3}
#banner .item{height:100vh}
#banner .item .clip:before{content:'';position:absolute;background-image:linear-gradient(to bottom,rgb(0 0 0 / 30%),transparent 70%),linear-gradient(to right,rgb(0 0 0 / 20%),transparent 100%);width:100%;height:100%;z-index:3}
#banner .item{min-width:100vw;height:100vh}
#banner .item .clip >*{min-width:100vw;width:100vw}
#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%;object-fit:cover;top:50%;left:50%}
#banner .item .info >div{margin:auto}
#banner .item .info >div .txt >*{padding:10px 15px;max-width:calc(100% - 30px);font-size:18px}
#banner .item .info >div .txt h3{margin-bottom:15px;line-height:120%;font-size:35px}
.webBox #banner .item .clip .bgBox{transform:scale(1);-webkit-transform:scale(1)}
#banner .info{padding-bottom:10vh;height:100vh}
#banner .info .txt *{font-weight:200;color:var(--white)}
#banner .info .txt em{font-family:'Poppins',sans-serif;font-style:initial;margin-bottom:15px;letter-spacing:0.5px;font-weight:300}
#banner .info .txt h3{letter-spacing:2px;font-size:45px;text-align:inherit;line-height:120%;font-weight:700;font-family:'Montserrat',sans-serif;text-transform:uppercase;position:relative;padding-bottom:20px;margin-bottom:24px;word-spacing:100vw}
#banner .slick-current .info .txt *{opacity:1}
#banner .info .txt h3::after{content:"";width:81px;height:1px;background-color:#ccccd1;opacity:1;position:absolute;left:0;bottom:0}
#banner .info .txt{display:flex;flex-direction:column;justify-content:center;padding:0px 0px 0px;z-index:3;width:80%;height:30%;margin:auto;position:absolute;top:0;left:0;right:0;bottom:70px}
#banner .info .txt h3,#banner .info .txt p{color:var(--white);opacity:0;-webkit-transform:translateY(15px);transform:translateY(25px)}
#banner .info .txt article{text-align:center;font-family:'Roboto',sans-serif;font-size:22px;font-weight:600;text-transform:uppercase}
#banner .info .txt p{letter-spacing:15px;text-align:left;font-weight:300;font-size:20px;letter-spacing:1px;margin-bottom:10px;width:30%}
#banner .info .txt .bannerBtn{margin-top:40px;display:block;width:220px;height:50px;pointer-events:auto}
#banner .info .txt .bannerBtn a{position:relative;color:#fff;display:flex;align-items: center;width:100%;height:100%;letter-spacing:0.5px;overflow:hidden}
#banner .info .txt .bannerBtn .btnText::before{content:"";position:absolute;top:0;right:0;width:100%;height:100%;border:1px solid #fff;-webkit-transform-origin:right bottom;transform-origin:right bottom}
#banner .info .txt .bannerBtn .btnText{position:relative;width:70%;height:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0px 25px;z-index:1;font-family:'Poppins',sans-serif;text-transform:uppercase;text-align:center;justify-content:center;font-size:13px;font-weight:400}
#banner .info .txt .bannerBtn span{position:absolute;top:15%;right:-5px;width:45px;-webkit-animation:btnArrow 1s cubic-bezier(0.4,0,0.6,1) infinite;animation:btnArrow 1s cubic-bezier(0.4,0,0.6,1) infinite}
#banner .info .txt .bannerBtn span::after{content:"";position:absolute;top:18px;left:0;margin-top:-1px;width:calc(100% - 5px);height:1px;background-color:#fff}
@media screen and (max-width:1280px){
    #banner .info .txt h3{font-size:30px}
    #banner .info .txt p{font-size:16px;width:90%}
    #banner .info .txt{height:0%;top:-30%}
    #banner .slick-current .info .txt p{font-size:17px}
    #banner .info .txt .bannerBtn{width:180px;margin-top:20px}
    #banner .info .txt .bannerBtn span::after{width:calc(100% - 25px)}
    #banner .info .txt .bannerBtn span{right:-25px}
}
@media screen and (max-width:1024px){
    #banner .item{height:65vh}
}
@media screen and (max-width:768px){
    #banner .info{height:86vh}
}