/* banner */
#banner {position: relative;z-index: 2;overflow: hidden;}
#banner .item { position: relative; }
#banner .item a {position: relative;width: 100%;height: 98vh;display: inline-block;z-index: 3;}
#banner .info{position:absolute;z-index: 2;width: 100%;height: 100%;display: flex;flex-direction: column;align-items: flex-start;justify-content: center;top: 0;padding: 0px 12%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;z-index: 5;}
#banner .info:before{content:"";position: absolute;width: 50%;height: 50%;background: linear-gradient(to left, rgb(233 233 233 / 0%), rgb(33 33 33 / 4%));z-index: -1;left: 8%;}
#banner .item *{color:white}
#banner .item .banner-txt {position: relative;font-size: 4.4rem;line-height: 1.3;margin-top: 8vw;margin-left: 0;margin-bottom: 40px;padding-bottom: 20px;font-weight: 800;word-break: break-word;width: min(1000px , 100%);text-shadow: 0 6px 10px rgb(51 68 81 / 40%);}
#banner .item .banner-txt:before{content:"";position:absolute;bottom: -1px;width: 150px;height: 4px;background: var(--primary);}
#banner .item .banner-txt:after{content:"";position:absolute;width: 90%;height: 1px;background: rgb(255 255 255 / 70%);bottom: 0;left: 0;z-index: -1;}

#banner .item .banner-txt span {font-size:110px;font-family: "Tinos", serif;line-height: 1.3;margin-left: -150px;}
#banner .item p{margin-top: 20px;font-size: 24px;letter-spacing: .5px;text-shadow: 0 5px 6px rgb(51 68 81 / 40%);}
#banner .item { position: relative; overflow: hidden; text-align: right; }
#banner .item video , #banner .item iframe {position: absolute;width: 100%;height: 100%;left: 0;bottom: 0;z-index: 3;object-fit: cover;}
 .type-cursor::after{content:"";display:inline-block;width:0.1ch;height:1em;vertical-align:-0.1em;margin-left:.15em;background:currentColor;animation:blink 0.9s steps(1) infinite;opacity:.5}
@keyframes blink { 50% { opacity: 0; } }
 #banner .item:before{content:"";position: absolute;background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 28%));width: 100%;height: 100%;z-index: 4;} 
/* scrollBtn */
#scrollBtn {position: absolute;z-index: 100;bottom: -100px;left: calc(-6% + 45px);display: flex;justify-content: center;align-items: center;}
#scrollBtn font {width: 13vw;display: inline-block;aspect-ratio: 1/1;border: 1px solid #bebebe;border-radius: 50%;opacity: .7;background: #b10e1a;}
#scrollBtn span {position: absolute;margin-bottom: 60px;}
#scrollBtn span svg{fill:white}
.arrow-float{display:inline-flex;animation:arrowFloat 1.6s ease-in-out infinite}

@keyframes arrowFloat{0%{transform:translateY(0);}50%{transform:translateY(10px);}100%{transform:translateY(0);}}

@media screen and (max-width:1400px) {
    #banner .item p{font-size:20px;}
    #banner .item .banner-txt, #banner .item .banner-txt span{font-size: 60px;}
}
@media screen and (max-width:1024px) {
	#banner .item a {height: 95vh;}
    #scrollBtn{left:unset;right: calc(20% + 45px);bottom: -66px;}
}
@media screen and (max-width:980px) {
    #banner .info{height: 70%;top: unset;bottom: 0;}
	#banner .item a {height: 75vh;}
    #scrollBtn{display:none;}
    #banner .item .banner-txt span{margin-left: -100px;}
}
@media screen and (max-width:640px) {
    #banner .info{height: 80%;padding: 0 8%;}
	#banner .item a {height: 70vh;}
    #banner .item p{font-size: 15px;}
    #banner .item .banner-txt, #banner .item .banner-txt span{font-size: 37px;margin: 0;}
    #banner .item video, #banner .item iframe{object-position: 18% 50%;}
}