/* banner */
#banner { position: relative; z-index: 1000; }
#banner .workframe { margin: 60px auto; }
#banner .img_box img { min-width: 100vw; width: 100vw; min-height: 90vh; height: 90vh; }
#banner .img_box video , #banner .img_box iframe { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#banner .info_box { min-width: 100vw; height: 100%; background: url(/images/00/img_banner.png) no-repeat 50% 0; display: flex; align-items: center; }
#banner .info_box h2 { overflow: hidden; width: 0; font-weight: 600; font-size: 5vmin; line-height: 1.5; text-decoration: underline 2px; text-underline-offset: 5px; color: #fff; white-space: nowrap; -webkit-transition-duration: .5s; transition-duration: .5s; }
#banner .info_box h3 { overflow: hidden; width: 0; word-spacing: 1vmin; font-weight: 400; font-size: 3vmin; color: #fff;  white-space: nowrap; -webkit-transition-duration: .5s; transition-duration: .5s; }
#banner .banner_dots { position: absolute; width: 100vw; bottom: 10px; left: 0; }
#banner .banner_dots a { margin-right: 15px; padding: 5px 10px 5px 0; display: inline-flex; align-items: center; color: #fff; }
#banner .banner_dots a:after { margin-left: 10px; width: 40px; height: 2px; background: #fff; display: block; content: ""; }

#banner .slick-current h2 { width: 100%; -webkit-transition-delay: .5s; transition-delay: .5s; }
#banner .slick-current h3 { width: 100%; -webkit-transition-delay: .7s; transition-delay: .7s; }

/* banner_btns */
.banner_btns { position: absolute; height: 100%; display: flex; justify-content: center; align-items: center; top: 0; left: 0; }
.banner_btns a { display: block; }
.banner_btns a.fb_icon { margin-bottom: 1rem; }
.banner_btns a svg { width: 26px; height: 26px; fill: #383838; }

/* scroll_btn */
#scroll_btn { position: absolute; display: flex; flex-direction: column; align-items: center; bottom: 50px; left: 50%; transform: translateX(-50%); }
#scroll_btn:before { position: absolute; width: 8px; height: 8px; background: #383838; bottom: 90px; left: 50%; transform: translateX(-50%); content: ""; -webkit-animation: scroll_dot 8.5s infinite forwards; animation: scroll_dot 8.5s infinite forwards; }
#scroll_btn:after { margin-top: 5px; width: 1px; height: 110px; background: #383838; display: block; content: ""; }
#scroll_btn span { line-height: 1; font-weight: 400; font-size: 14px; -webkit-animation: scroll_txt 1.5s linear infinite; animation: scroll_txt 1.5s linear infinite; }

@-webkit-keyframes scroll_dot { 0% , 100% { bottom: 90px; } 50% { bottom: 0; } }
@keyframes scroll_dot { 0% , 100% { bottom: 90px; } 50% { bottom: 0; } }
@-webkit-keyframes scroll_txt { 0% , 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); } }
@keyframes scroll_txt { 0% , 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media screen and (min-width: 1501px){
	.banner_btns { width: 6rem; background: #f5f5f5; }
}
@media screen and (max-width: 1500px){
	#banner .workframe { width: 80vw; }
	.banner_btns { left: 1vmax; }
	.banner_btns a svg { fill: #fff; }
	#scroll_btn:before , #scroll_btn:after { background: #fff; }
	#scroll_btn span { color: #fff; }
}
@media screen and (max-width: 640px){
	#banner .img_box img { min-height: 120vw; height: 120vw; }
	#scroll_btn:before { bottom: 5vh; }
	#scroll_btn:after { height: 7vh; }
	@-webkit-keyframes scroll_dot { 0% , 100% { bottom: 5vh; } 50% { bottom: 0; } }
	@keyframes scroll_dot { 0% , 100% { bottom: 5vh; } 50% { bottom: 0; } }
}
@media screen and (max-width: 550px){
	#banner .workframe { margin: auto; padding: calc(26px + 4vmax); width: 100vw; }
	#banner .info_box h2 { font-size: 6vmin; }
	#banner .info_box h3 { font-size: 4vmin; }
}