/* banner */
#banner { position: relative; }
#banner .item { position: relative; }
#banner .item a { position: relative; width: 100%; height: 95vh; display: inline-block; z-index: 3; }
#banner .item .banner-txt { position: absolute; width: 100%; background: url(/images/35/img-bamask.jpg) no-repeat bottom center / cover; text-align: center; font-size: 8rem; color: transparent; -webkit-background-clip: text; background-clip: text; bottom: 5rem; left: 0; z-index: 2; }
#banner .item { position: relative; overflow: hidden; text-align: right; }
#banner .item video , #banner .item iframe { position: absolute; width: 100%; left: 0; top: 0; }

/* scrollBtn */
#scrollBtn { position: absolute; z-index: 100; bottom: 100px; left: 20px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left top; transform-origin: left top; }
#scrollBtn font { margin-right: 10px; width: 50px; height: 1px; background-color: #fff; display: inline-block; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-animation: scrollline 2s cubic-bezier(.32,.01,0,.98) 1.2s infinite forwards; animation: scrollline 2s cubic-bezier(.32,.01,0,.98) 1.2s infinite forwards; }
#scrollBtn span { font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #fff; }

@-webkit-keyframes scrollline { 0% { -webkit-transform: scaleX(0); -webkit-transform-origin: right; } 49% { -webkit-transform-origin: right; } 50% { -webkit-transform: scaleX(1); } 51% { -webkit-transform-origin: left; } 100% { -webkit-transform: scaleX(0); } }
@keyframes scrollline { 0% { transform: scaleX(0); transform-origin: right; } 49% { transform-origin: right; } 50% { transform: scaleX(1); } 51% { transform-origin: left; } 100% { transform: scaleX(0); } }

@media screen and (max-width:1024px) {
	#banner .item a { height: 75vh; }
	#banner .item .banner-txt { font-size: 10vw; }
}