/* banner */
#banner {position: relative;margin-top: 60px;}
#banner .main-slider.slick-initialized.slick-slider{margin-bottom: 0px;}
#banner .item { position: relative; }
#banner .item a {position: relative;width: 100%;height: 94vh;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;background-size: auto;}
#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:1280px) {
	#banner .item a {height: 90vh;}
	#banner .item{background-size: cover;}
}
@media screen and (max-width:1024px) {
	#banner .item a {height: 85vh;}
	#banner .item .banner-txt { font-size: 10vw; }
	#scrollBtn{display: none;}
	#banner {position: relative;margin-top: 64px;}
}
@media screen and (max-width:768px) {
	#banner .item a {height: 82vh;}
}
@media screen and (max-width:640px) {
	#banner .item a {height: 40vh;}
}
@media screen and (max-width:480px) {
	#banner .item a {height: 30vh;}
	#banner .item .banner-txt { font-size: 10vw; }
	#banner {position: relative;margin-top: 50px;}
}
@media screen and (max-width:430px) {
	#banner .item a {height: 27vh;}

}
@media screen and (max-width:450px) {
	#banner .item a {height: 22vh;}

}