/* banner */
#banner{padding: 0px 0 0 10vw;width: 90vw;z-index:3}
#banner:before{content:'';position:absolute;background-color:var(--primary);width: 33vw;height: calc(100% + 100px);top:0;left:0;z-index:0}
#banner .item{height:97vh;display:flex}
#banner .item .info{left:0;z-index:999}
#banner .item .info *{transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
#banner:after{content:'';position:absolute;width:320px;height:1px;background:#fff;top: 25%;left:8%}
#banner .item .clip{left: 9vw;}
#banner .main-slider{-webkit-clip-path:url(#clip_banner);clip-path:url(#clip_banner)}
#banner .item .clip >*{min-width:96vw;width: 96vw;}
#banner .item .clip .bgBox{transform: scale(1.1);-webkit-transform: scale(1.1);}
#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: 18vw auto 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}
#banner .item .info >div .txt:nth-child(2){-webkit-transition-delay:.4s;transition-delay:.4s}
#banner .item .info >div .txt p{max-width:calc(100% - 30px);font-size: 29px;letter-spacing:3px;font-weight:500}
#banner .item .info >div .txt .h3{margin-bottom:30px;line-height:120%;font-size:79px;width:40%;font-weight:600;letter-spacing:2px}
#banner .item.slick-current .clip .bgBox{-webkit-animation:scale_banner 6s linear infinite;animation:scale_banner 6s linear infinite;background-position: 50% 50%;background-size: cover;}
#banner .item.slick-current .info >div .txt{transform:scaleX(1);-webkit-transform:scaleX(1)}
#banner .baScro{position:absolute;left:8%;bottom:-25%}
#banner .baScro a{display:flex;flex-direction:column;align-items:center;cursor:pointer;gap:25px}
#banner .baScro a b{font-size:15px;writing-mode:vertical-rl;font-weight:400;color:#fff;line-height:100%;font-family:lato}
#banner .baScro a span{height:200px;width:1px;background:#fff;margin:20px 0;position:relative}
#banner .baScro a span:before{content:'';position:absolute;top:0;left:0;height:100px;width:1px;background:var(--secondary);animation-name:fish;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:2s}
#banner .baScro a svg{width:32px;height:32px;object-fit:contain;fill:#fff}
@keyframes fish{0%{top:0} 100%{top:100px}}
@-webkit-keyframes scale_banner{to{-webkit-transform:scale(1)}}
@keyframes scale_banner{to{transform:scale(1)}}
@media screen and (max-width:1470px){
    #banner .item .info >div .txt .h3{width: 50%;margin-bottom: 20px;font-size: 70px;}
    #banner .item .info >div{margin: 19vw auto auto;width: calc(100% - 10vw);}
    #banner .item .clip{left: 11vw;}
}
@media screen and (max-width:1280px){
    #banner{padding-top:104px;width:100vw;padding-left:0}
    #banner:before{width:100%;height:100%}
    #banner:after{display:none}
    #banner .item{height:75vh;display:flex;flex-direction:column}
    #banner .item .info{position:relative;display:contents}
    #banner .item .info >div{margin:40px auto;height:unset;width:90%}
    #banner .item .info >div .txt .h3{width:70%}
    #banner .item .clip{left:0;position:relative;width:100vw}
    #banner .baScro{display:none}
}
@media screen and (max-width:1024px){
    #banner .item .info >div .txt .h3{font-size:40px;width:70%}
    #banner .item .info >div .txt p{font-size:17px}
    #banner .item{height:60vh}
}
@media screen and (max-width:768px){
    #banner .item .info >div .txt .h3{width:100%;font-size:35px}
    #banner{padding-top:85px}
}