/* banner */
#banner {position: relative;z-index: 2;}
#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: 0 12%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#banner .item *{color:white}
#banner .item .banner-txt {font-size:110px;font-family: "Tinos", serif;line-height: 1.3;margin-left: 60px;}
#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;}
#banner .item { position: relative; overflow: hidden; text-align: right; }
#banner .item video , #banner .item iframe {position: absolute;width: 100%;height: auto;left: 0;bottom: -25%;}
 .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; } }
  
/* scrollBtn */
#scrollBtn {position: absolute;z-index: 100;bottom: -110px;left: calc(10% + 45px);display: flex;justify-content: center;align-items: center;}
#scrollBtn font {width: 300px;display: inline-block;aspect-ratio: 1/1;border: 1px solid #bebebe;border-radius: 50%;opacity: .7;}
#scrollBtn span {position: absolute;}
#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: 70px;}
}
@media screen and (max-width:1024px) {
	#banner .item a {height: 95vh;}
    #scrollBtn{left:unset;right: calc(10% + 45px);}
}
@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: 60%;}
	#banner .item a {height: 70vh;}
    #banner .item p{font-size:16px;}
    #banner .item .banner-txt, #banner .item .banner-txt span{font-size: 40px;margin: 0;}