@import url('sub.css'); 




#contents {max-width:100%; width:100%; }


.about_intro {position:relative; height:var(--vh); background:url("/about/img/about_bg.jpg")no-repeat center / cover; padding:100px 0 150px; box-sizing:border-box; overflow:hidden;}
.about_intro .basic_in {height:100%;}
.about_intro .about_intro_in {height:100%; display:flex; flex-wrap:wrap; align-content:center;}
.about_intro .about_intro_in .fs70 {width:100%; color:var(--white); margin:0 0 125px;}
.about_intro .about_intro_in .how_box {width:100%;}
.about_intro .about_intro_in .how_box * {color:var(--white);}
.about_intro .about_intro_in .how_box .fs30 {color: var(--white); font-family: var(--eng); font-size: 1.666rem; font-weight: 700; line-height: 133.333%;}
.about_intro .about_intro_in .how_box .fs22 {margin:60px 0 20px;}



.marquee {display: flex; flex-flow: row nowrap; position:absolute; bottom:0; left:0;  white-space:nowrap; opacity:0.2;}
.marquee__group {display: flex; flex-flow: row nowrap; white-space:nowrap;  animation: roll_left  linear infinite; animation-duration: 30s;}
.marquee__group li { padding:0 15px; overflow:hidden;}
.marquee__group li img {display:block; height:132px;}



@keyframes roll_left {
	0% { 
		-webkit-transform:translate3d(0,0,0);
		  transform:translate3d(0,0,0)
		}
	100% { 
		-webkit-transform:translate3d(-100%,0,0);
		transform:translate3d(-100%,0,0)
	}
}





/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 


}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


.about_intro .about_intro_in br {display:none;}
.about_intro .about_intro_in .fs70 {margin:0 0 60px;}
.about_intro .about_intro_in .how_box .fs22 {margin:40px 0 20px;}



}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 


.marquee__group li img {height:90px;}




}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 


.about_intro {padding:90px 0 140px; height:auto;}
.about_intro .about_intro_in {display:block;  align-content:flex-start;}
.about_intro .about_intro_in .fs70 {margin:0 0 30px;}
.about_intro .about_intro_in .how_box .fs30 {font-size:1.33rem;}
.about_intro .about_intro_in .how_box .fs22 {margin:20px 0 10px;}
.marquee__group li img {height:75px;}

}