@font-face {font-family: 'font2020-1';src : url('/style/font/NotoSansHans-Thin.otf');}
@font-face {font-family: 'font2020-2';src : url('/style/font/NotoSansHans-Regular.otf');}
@font-face {font-family: 'font2020-3';src : url('/style/font/NotoSansHans-Medium.otf');}
@font-face {font-family: 'font2020-4';src : url('/style/font/NotoSansHans-Light.otf');}
@font-face {font-family: 'font2020-5';src : url('/style/font/NotoSansHans-DemiLight.otf');}
@font-face {font-family: 'font2020-6';src : url('/style/font/NotoSansHans-Bold.otf');}
@font-face {font-family: 'font2020-7';src : url('/style/font/NotoSansHans-Black.otf');}




 














.banner{ display: block;overflow: hidden;position: relative;width: 100%; max-height: calc(100% + 60px);background: #fff;}
.banner video{display: block;width: 100%;height: 100%;object-fit: fill;z-index: 1;}
.banner .m-banner{display: none;}
.banner .bg{ display: block;overflow: hidden;position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2; opacity: 0.5;
background-image: url(/phpcms/templates/images/video_texture.png);
    background-blend-mode: screen;
    background-repeat: repeat;
    background-color: rgba(0, 0, 0, 0.3);
}

.banner .txt{ position: absolute;top: 50%;width: 100%;left: 0;z-index: 3;   margin: -170px 0 0 0;  text-align: center; }
.banner .txt h3{ display: block;text-align: center;height: 20px;}
.banner .txt h3 span{display: inline-block;width: 100px;height: 1px;background: #fdd000;vertical-align: top;margin: 10px 0 0 0;}
.banner .txt h3 font{ display: inline-block;color: #fdd000;font-size: 20px;font-weight: bold;line-height: 20px; margin: 0 10px;}
.banner .txt h4{ display: block;color: #fff;font-weight: bold;text-align: center;font-size:56px;letter-spacing: 8px;line-height: 50px;margin: 70px 0 30px;}
.banner .txt h5{ display: block;text-align: center;color: #fff;font-size: 35px;font-weight: normal;letter-spacing: 6px;line-height: 30px;}
.banner .txt #b-a{ display: inline-block;text-align: center;color: #fff;margin: 100px 0 0 0;}
.banner .txt #b-a .fa{ font-size: 36px;color: #fdd000;vertical-align: top;margin: 0 10px 0 0;}
.banner .txt #b-a span{ display: inline-block;vertical-align: top;line-height: 36px;font-size: 22px;color: #fdd000;letter-spacing: 2px;}


.banner #img-bottom{ display: block;width: 100%;height:60px; position: absolute;bottom: 0;z-index: 9;left:0; }
 


.banner .banner-to{transition: all 0.2s linear 0s;-webkit-transition: all 0.2s linear 0s;display: block;font-size: 1em; position: absolute;overflow: hidden;z-index: 9;bottom: 90px;left: 50%;margin-left: -10px;}
.banner .banner-to h4{ width: 24px;height: 34px;border: 2px solid #fff;border-radius: 1em;display: block;overflow: hidden; opacity: 0.7; }
.banner .banner-to strong{ animation: downico 1.5s ease-out infinite;position: relative;display: block;line-height: 30px;width: 3px;height: 5px;background: #fff;margin:10px auto;}
.banner .banner-to:hover h4{border: 2px solid #fdd000; opacity:1;}
.banner .banner-to:hover strong{background: #fdd000;}

@keyframes downico{
	0%{top: 0;opacity: 1;}
	35%{top: 40%;opacity: 0;}
	65%{top: -40%;opacity: 0;}
	100%{top: 0;opacity: 1;}
}