#banner , #banner .item {position: relative;background: #fff;z-index: 4;overflow: hidden;}
#banner .linne{width: 41vw;height: 250px;position: absolute;background: linear-gradient(90deg, rgb(0 0 0 / 0%) -30%, var(--primary) 70%);right: 0;top: 45%;z-index: -3;}
#banner .item:after{content:url(/images/37/banner-left.png);position: absolute;bottom: -10px;left: 0;z-index: 0;}
#banner .item:before{content:url(/images/37/banner-right.png);position: absolute;bottom: -10px;right: 0;z-index: 2;}
#banner .item{background-image:url(/images/37/bannerBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;height: 98vh;}
#banner .item a {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#banner .info {position: absolute;width: 75%;bottom: 25vh;left: 12%;z-index: 3;}
#banner .info .h3 {display: block;line-height: 130%;font-size: 60px;color: white;text-transform: uppercase;font-style: italic;font-weight: 600;font-family: "Anybody", sans-serif;letter-spacing: 1px;}
#banner .info .h3 span{text-transform:uppercase;color:var(--primary);display: block;font-size: 60px;font-weight: 600;font-family: "Anybody", sans-serif;letter-spacing: 1px;line-height: 130%;white-space: nowrap;overflow: hidden;animation: typing 5s steps(70, end), blink 0.7s step-end infinite;}
#banner .info p {margin-top: 10px;color: #fff;font-size: 24px;width: 40%;}
#banner .info p:before{content:'';width: 15px;height: 13px;background: var(--primary);transform: skewX(-30deg);display: block;box-shadow: 22px 0 var(--primary), 44px 0 var(--primary);margin: 45px 0 30px;}
#banner .img {position: absolute;width: 877px;background: no-repeat 50% / cover;aspect-ratio: 877/696;right: 9%;bottom: 0;z-index: 2;}
#banner .img img , #banner .img video , #banner .img iframe { position: absolute; width: 100vw; height: 100vh; left: 0; top: 0; }

/* scrolldown */
#scrolldown {position: absolute;font-weight: 300;font-size: 14px;color: #fff;white-space: nowrap;-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;bottom: 35%;left: 30px;display: flex;flex-direction: row;align-items: center;gap: 20px;}
#scrolldown span{width:1px;height: 120px;background: white;position: relative;overflow: hidden;}
#scrolldown span:after{content:'';width: 1px;height: 50px;background: var(--primary);position: absolute;top: 0; animation: scrollLine 2s linear infinite;}
#scrolldown svg{width:20px;height: 20px;fill: white;}

@keyframes scrollLine{0%{top:-50px;}100%{top:100px;}}
@keyframes typing{from{width:0}to{width:40%}}
@keyframes blink{0%,100%{border-color:transparent}50%{border-color:#fff}}

@media screen and (max-width: 1700px){
    #banner .img{right: 0;}
}
@media screen and (max-width: 1400px){
    #banner .item:before{zoom:80%;}
    #banner .linne{width: 28vw;}
    #banner .info p{font-size: 18px;}
    #banner .info .h3, #banner .info .h3 span{font-size: 40px;}
    #banner .img{right: 0;width: 650px;}
}
@media screen and (max-width: 1024px){
    #banner .item:before{zoom:60%;}
    #banner .item:after{zoom:70%}
    #banner .linne{width: 28vw;}
    #banner .img{width: 550px;}
    #banner .info{bottom: 18vh;}
    #scrolldown{display:none;}
}
@media screen and (max-width: 980px){
    #banner .item:after{zoom:50%}
    #banner .item:before{zoom:40%;}
    #banner .info{left: 8%;}
    #banner .img{width: 410px;}
    #banner .info .h3, #banner .info .h3 span{font-size: 25px;}
    #banner .info p{font-size: 12px;width: 50%;}
    #banner .item{height: 58vh;}
    #banner .info p:before{display:none;}
}
@media screen and (max-width: 640px){
    #banner .linne{width: 24vw;height: 110px;top: 52%;}
    #banner .item:after{zoom: 30%;bottom: -20px;}
    #banner .item:before{zoom: 22%;bottom: -20px;}
    #banner .info{bottom: 20%;left: 5%;}
    #banner .img{width: 280px;right: -23%;bottom: 24px;}
    #banner .info .h3, #banner .info .h3 span{font-size: 20px;}
    #banner .info p{font-size: 12px;width: 65%;margin-top: 31px;}
    #banner .item{height: 45vh;}
    #banner .info p:before{display:none;}
}