.banner{
	width: 100%;
	height: 300px;
	background:url(../../img/banner/banner-about.jpg);
	background-size: cover;
	background-position: center 0;
	position: relative;
}
.banner::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	background-color: rgba(0, 0, 0, 0.5);
}
.banner h1{
	color: #fff;
	position: absolute;
	z-index: 2;
	transform: translate(-50%,-50%);
	width: 100%;
    max-width: 1280px;
    padding: 0 22px;
	left: 50%;
	top: 50%;
	text-align: center;
	font-size: 55px;
	font-weight: bold;
}
@media only screen and (max-width: 1439px){
}
@media only screen and (max-width: 1068px){
	.banner{
		height: 260px;
	}
	.banner h1{
		font-size: 40px;
	}
}
@media only screen and (max-width: 833px){
	.banner{
		height: 220px;
	}
	.banner h1{
		font-size: 32px;
		padding: 0 16px;
	}
}
@media only screen and (max-width: 734px){
	.banner h1{
		font-size: 5vw;
	}
}
@media only screen and (max-width: 508px){
	.banner{
		height: 180px;
	}
	.banner h1{
		font-size: 24px;
	}
}
@media only screen and (max-width: 430px){
}
.container{
	width:100%;
	max-width: 1280px;
	padding: 0 22px;
	margin: 0 auto;
}
.white{
	background-color: #fff;
	padding: 40px 0;
}
.gray{
	background-color: #f6f7f8;
	padding: 40px 0;
}
.t{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	padding: 10px 0 50px;
	text-align: center;
}
.t .t1{
	font-size: 32px;
	color: #000;
	line-height: 1.3;
	font-weight: bold;
}
.t .t2{
	margin-top: 32px;
	font-size: 17px;
	color: #222222;
	line-height: 1.8;
}
.b{
	gap: 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 40px;
}
.b .box{
	border: 1px solid #eee;
	padding: 20px 40px;
}
.b .box .pic{
	width: 50px;
	height: 50px;
	margin: auto;
}
.b .box .pic img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.b .box .b1{
	color: #000;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.8;
	text-align: center;
	margin-top: 10px
}
.b .box .b2{
	color: #222;
	font-size: 17px;
	line-height: 1.8;
	text-align: center;
	margin-top: 10px
}
.desc{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.desc .pic{
	width: 48%;
	aspect-ratio: 574 / 380;
}
.desc .pic img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.desc .con{
	width: 45%;
}
.desc .con .w1{
	color: #0f5fda;
	font-size: 18px;
	line-height: 1.8;
	font-weight: bold;
}
.desc .con .w2{
	color: #000;
	font-size: 35px;
	line-height: 1.2;
	font-weight: bold;
	margin-top: 10px;
}
.desc .con .w3{
	color: #222;
	font-size: 17px;
	line-height: 1.8;
	margin-top: 32px;
}
.member .tit{
	margin-bottom: 32px;
	text-align: center;
}
.member .tit .tit1{
	color: #000;
	font-weight: bold;
	font-size: 35px;
	line-height: 1.2;
}
.member .tit .tit2{
	color: #666;
	font-size: 18px;
	line-height: 1.8;
	margin-top: 5px;
}
.member .wrap{
	gap: 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.member .wrap .m{
}
.member .wrap .m .pic{
	aspect-ratio: 1 / 1;
}
.member .wrap .m .pic img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.member .wrap .m .txt{
	padding: 15px 20px 20px;
	background-color: #fff;
	text-align: center;
}
.member .wrap .m .txt .name{
	color: #000;
	font-size: 17px;
	line-height: 1.5;
	font-weight: bold;
}
.member .wrap .m .txt .position{
	color: #999;
	font-size: 14px;
	line-height: 1.5;
	margin-top: 5px;
}
.member .wrap .m .txt .introduce{
	font-style: italic;
	color: #555;
	font-size: 14px;
	line-height: 1.5;
	margin-top: 5px;
}
.count{
	width: 100%;
	height: 360px;
	background:url(../../img/banner/banner-about-2.jpg);
	background-size: cover;
	background-position: center 0;
	position: relative;
}
.count::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	background-color: rgba(0, 0, 0, 0.15);
}
.count .container{
	display: flex;
	align-items: center;
	height: 100%;
	position: relative;
	z-index: 2;
}
.count .wrap{
	display: grid;
	gap: 32px;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
}
.count .wrap .c{
}
.count .wrap .c .c1{
	font-size: 35px;
	color: #fff;
	line-height: 1.2;
	font-weight: bold;
}
.count .wrap .c .c2{
	font-size: 17px;
	line-height: 1.8;
	color: #fff;
}
.location .tit{
	margin-bottom: 32px;
	text-align: center;
}
.location .tit .tit1{
	color: #000;
	font-weight: bold;
	font-size: 35px;
	line-height: 1.2;
}
.location .tit .tit2{
	color: #222;
	font-size: 18px;
	line-height: 1.8;
	margin-top: 5px;
}
.location .wrap{
	display: grid;
	gap: 32px;
    grid-template-columns: repeat(3, 1fr);
}
.location .wrap .l{
}
.location .wrap .l .pic{
	aspect-ratio: 370 / 245;
}
.location .wrap .l .pic img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.location .wrap .l .txt .t1{
	color: #000;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.8;
	margin-top: 15px;
}
.location .wrap .l .txt .t2{
	color: #222;
	font-size: 17px;
	line-height: 1.8;
	margin-top: 15px;
}
.location .wrap .l .txt .t3{
	color: #0f5ada;
	font-size: 17px;
	line-height: 1.8;
	margin-top: 15px;
}
.contact{
	padding: 40px 48px;
	background-color: #f4f5f6;
	margin-top: 32px;
}
.contact .wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.contact .wrap .txt{
	width: 60%;
}
.contact .wrap .txt .t1{
	color: #000;
	font-size: 35px;
	line-height: 1.2;
	font-weight: bold;
}
.contact .wrap .txt .t2{
	color: #222;
	font-size: 18px;
	line-height: 1.8;
	margin-top: 8px;
}
.contact .wrap .button{
	width: 25%;
}
.contact .wrap .button a{
	width: 100%;
	height: 48px;
	line-height: 48px;
	color: #fff;
	font-weight: bold;
	display: block;
	font-size: 18px;
	text-align: center;
	background-color: #0f5ada;
}
.contact .wrap .button a:hover{
	background-color: #2468de;
}



@media only screen and (max-width: 1439px){
}
@media only screen and (max-width: 1068px){
	.white{
		padding: 30px 0;
	}
	.t{
		max-width: 430px;
		padding: 10px 0 30px;
	}
	.t .t1{
		font-size: 18px;
	}
	.t .t2{
		font-size: 15px;
		margin-top: 20px;
	}
	.b{
		max-width: 692px;
		width: 100%;
		margin: 0 auto;
		gap: 26px;
		grid-template-columns: repeat(2, 1fr);
		margin-bottom: 30px;
	}
	.b .box .b1{
		font-size: 16px;
		line-height: 1.6;
		margin-top: 6px;
	}
	.b .box .b2{
		font-size: 15px;
		line-height: 1.6;
		margin-top: 6px;
	}
	.desc{
		max-width: 692px;
		width: 100%;
		margin: 0 auto;
	}
	.desc .con,
	.desc .pic{
		width: 48%;
	}
	.desc .con .w1{
		font-size: 14px;
		font-size: 1.6;
	}
	.desc .con .w2{
		font-size: 18px;
	}
	.desc .con .w3{
		font-size: 15px;
		line-height: 1.6;
		margin-top: 10px;
	}
	.gray{
		padding: 30px 0;
	}
	.member{
		width: 100%;
		max-width: 692px;
		margin: 0 auto;
	}
	.member .tit{
		margin-bottom: 20px;
	}
	.member .tit .tit1{
		font-size: 18px;
	}
	.member .tit .tit2{
		font-size: 14px;
	}
	.member .wrap{
		gap: 26px;
		grid-template-columns: repeat(2, 1fr);
	}
	.count{
		height: 240px;
	}
	.count .wrap{
		max-width: 692px;
		margin: 0 auto;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.count .wrap .c .c1{
		font-size: 18px;
	}
	.count .wrap .c .c2{
		font-size: 14px;
		line-height: 1.6;
	}
	.location{
		max-width: 692px;
		width: 100%;
		margin: 0 auto;
	}
	.location .tit{
		margin-bottom: 20px;
	}
	.location .tit .tit1{
		font-size: 18px;
	}
	.location .tit .tit2{
		font-size: 14px;
		line-height: 1.6;
	}
	.location .wrap{
		gap: 20px;
	}
	.location .wrap .l .txt .t1{
		font-size: 16px;
		line-height: 1.6;
		margin-top: 8px;
	}
	.location .wrap .l .txt .t2,
	.location .wrap .l .txt .t3{
		font-size: 14px;
		line-height: 1.6;
		margin-top: 8px;
	}
	.contact{
		padding: 24px 32px;
	}
	.contact .wrap .txt .t1{
		font-size: 18px;
	}
	.contact .wrap .txt .t2{
		font-size: 15px;
		line-height: 1.6;
	}
	.contact .wrap .button a{
		height: 40px;
		line-height: 40px;
		font-size: 15px;
	}
}
@media only screen and (max-width: 833px){
	.container{
		padding: 0 16px;
	}
	.b{
		gap: 16px;
		margin-bottom: 20px;
	}
	.b .box{
		padding: 16px;
	}
	.member .wrap{
		gap: 16px;
	}
}
@media only screen and (max-width: 734px){
	.desc{
		max-width: 430px;
		flex-direction: column;
		gap: 16px;
	}
	.desc .con,
	.desc .pic{
		width: 100%;
	}
	.location{
		max-width: 430px;
	}
	.location .wrap{
		grid-template-columns: repeat(1, 1fr);
		gap: 16px;
	}
	.contact{
		max-width: 430px;
		padding: 16px 24px;
		margin: 0 auto;
		margin-top: 20px;
	}
	.contact .wrap{
		flex-direction: column;
		gap: 16px;
	}
	.contact .wrap .txt{
		width: 100%;
	}
	.contact .wrap .button{
		width: 100%;
	}
}
@media only screen and (max-width: 508px){
}
@media only screen and (max-width: 430px){
}