/* layout */
#container{width:100%;overflow:Hidden;}

/* main */
#main section{position:relative;overflow:Hidden;height:100vh}
#main .visual{background:url(../img/main/main1.jpg) no-repeat center;background-size:cover}
#main .visual:after{
	content:'';
	position:absolute;top:0;left:0;
	display:block;width:100%;height:100%;
	background:#000;
	transition:2s;
}
#main .visual dl{
	position:absolute;top:50%;left:50%;
	width:100%;max-width:1400px;box-sizing:border-box;
	padding:0 100px;
	transform:translate(-50%, -50%);
	text-align:center
}
#main .visual dl dt{
	font-size:66px;color:#fff;font-weight:800
}
#main .visual dl dd{
	margin-top:30px;
	font-size:32px;font-weight:400;color:#fff;
}
#main .visual dl dt,
#main .visual dl dd{transition:1s;opacity:0;transform: translateY(50px);transition-delay:.3s}
#main .visual dl dd{transition-delay:.5s}
#main .visual.on:after{visibility:hidden;opacity:0;}
#main .visual.on dl dt,
#main .visual.on dl dd{opacity:1;transform: translateY(0);}

#main .system{background:url(../img/main/main2.jpg) no-repeat center;background-size:cover}
#main .system h2{
	max-width:634px;
	margin:0 auto 40px;
	text-align:center;font-size:55px;color:#fff;font-weight:800;line-height:1.3em
}
#main .system .ct{
	display:flex;gap:40px;flex-wrap:wrap;
	max-width:1000px;
	margin:0 auto
}
#main .system .ct div{
	flex:1;
	transition:.6s;transform: translateY(50px);opacity:0;transition-delay:.4s
}
#main .system .ct dl{
	padding:70px 50px;
	background:rgba(44,58,126,.9);border-radius:30px;
	transition:.3s
}
#main .system .ct dl dt{
	margin-bottom:20px;
	font-size:29px;font-weight:700;color:#fff;line-height:1.3em;
}
#main .system .ct dl dd{
	font-size:17px;font-weight:500;color:#fff
}
#main .system .ct dl:hover{background:#fff;transition:.3s;transition-delay:0 !important}
#main .system .ct dl:hover *{color:#000}
#main .system.active .ct div{transform: translateY(0);opacity:1}
#main .system.active .ct div:nth-child(2){transition-delay:.6s}
#main .system.active .ct div:nth-child(3){transition-delay:.8s}


#main .bsn{width:100%;overflow:Hidden;background:#000}
#main .bsn_wrap{display:flex;height:100%}
#main .bsn a{
	position:relative;
	display:block;flex:1;
	height:100%;
	transition: all .6s ease;
	background:url(../img/main/main3_a.jpg) no-repeat center;background-size:cover;
	text-align:center
}
#main .bsn a:before{
	content:'';
	position:absolute;top:0;left:0;
	display:block;width:100%;height:100%;
	background:#000;
	opacity:.6;transition: all .6s ease;
}
#main .bsn dl{
	position:absolute;top:50%;left:0;
	width:100%;
	box-sizing:border-box;
	transition: all .4s ease;
	transform:translateY(-100px);
	overflow:Hidden;
	z-index:1
}
#main .bsn dl:before{
	content:'';
	display:block;width:100%;height:130px;
	background:url(../img/main/main3_a.png) no-repeat center;
}
#main .bsn dl dt{margin-bottom:56px;font-size:26px;font-weight:600;color:#fff}
#main .bsn dl dd{
	max-width:400px;margin:0 auto;font-size:19px;color:#fff;
	visibility:hidden;transform:translateY(50px);opacity:0
}
#main .bsn a:nth-child(2){background-image:url(../img/main/main3_b.jpg)}
#main .bsn a:nth-child(3){background-image:url(../img/main/main3_c.jpg)}
#main .bsn a:nth-child(2) dl:before{background-image:url(../img/main/main3_b.png)}
#main .bsn a:nth-child(3) dl:before{background-image:url(../img/main/main3_c.png)}
.web #main .bsn a:hover{flex:1.3}
.web #main .bsn a:hover:before{opacity:.4}
.web #main .bsn a:hover dl{transform:translateY(-200px)}
.web #main .bsn a:hover dl:after{transform:scale(1);opacity:1}
.web #main .bsn a:hover dl dd{visibility:visible;transform:translateY(0);opacity:1}

#main .news{padding:0 40px}
#main .news h2{margin-bottom:90px;text-align:center;font-size:44px;font-weight:700}
#main .news .swiper-slide{width:359px;overflow:Hidden;margin-right:45px}
#main .news .swiper-slide:last-child{margin:0 !important}
#main .news .swiper-slide a{display:block;box-sizing:border-box;}
#main .news .swiper-slide img{display:block;width:100%;height:226px;object-fit:cover;}
#main .news .swiper-slide p{
	margin:28px 0 13px;font-size:20px;letter-spacing:-1px;
	overflow: hidden;
	white-space:normal;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-wrap:break-word;
}
#main .news .swiper-slide time{display:block;padding-bottom:65px;font-size:15px;font-weight:600;color:#7B7B7B}
#main .news .swiper-slide:hover p{color:#004A99}
#main .news-swiper{position:relative;max-width:1200px;margin:0 auto;padding-bottom:60px}
#main .news-swiper button{              
	display:block;
	top:auto;bottom:0;
	width:38px;height:38px;
	background:url(../img/main/btn_prev.svg) no-repeat center;border-radius:50px;
	font-size:0
}
#main .news-swiper button.swiper-button-prev{left:0}
#main .news-swiper button.swiper-button-next{left:50px;right:auto;background-image:url(../img/main/btn_next.svg)}
#main .news-swiper button:after{display:none}


@media (max-width: 1400px) {
}

@media (max-width: 1024px) {
	#main .visual dl{}
	#main .visual dl dt{max-width:500px;margin:0 auto 30px;font-size:50px}
	#main .visual dl dd{font-size:20px}

	#main .system h2{font-size:32px}
	#main .system .ct{gap:20px;padding:0 40px}
	#main .system .ct div{flex:none;width:100%}
	#main .system .ct dl{padding:40px}
	#main .system .ct dl dt{margin-bottom:10px;font-size:25px;text-align:center}
	#main .system .ct dl dt br{display:None}
	
	#main .bsn dl:before{height:80px;background-size:auto 100%}
	#main .bsn dl dt{font-size:20px;}
	#main .bsn dl dd{max-width:200px;height:200px;font-size:16px;visibility:visible;transform:translateY(0);opacity:1}
	#main .bsn dl:after{position:absolute;bottom:0;left:0;width:100%;transform:scale(.8);opacity:1}

	#main .news h2{margin-bottom:50px;font-size:32px}
	#main .news .swiper-slide{width:300px;margin-right:20px}
	#main .news .swiper-slide img{height:190px}
	#main .news .swiper-slide p{margin:20px 0 8px;font-size:18px}
	#main .news .swiper-slide time{padding-bottom:30px;font-weight:500}

}

@media (max-width: 760px) {
	#main .visual{background-image:url(../img/main/main1_m.jpg)}
	#main .visual dl{padding:0 30px}
	#main .visual dl dt{width:100%;font-size:36px}
	#main .visual dl dd{font-size:18px}

	#main .system h2{padding:0 20px;margin-bottom:25px;font-size:26px;}
	#main .system .ct{padding:0 20px;gap:10px}
	#main .system .ct dl{padding:20px;border-radius:15px}
	#main .system .ct dl dt{margin-bottom:5px;font-size:20px;text-align:center}
	#main .system .ct dl dd{font-size:13px;font-weight:500;text-align:center}

	#main .bsn_wrap{display:block;}
	#main .bsn a{height:calc(33.33% - 25px);box-sizing:border-box;}
	#main .bsn a:first-child{height:calc(33.33% + 50px);}
	#main .bsn dl{transform: translateY(-65%);transition: all .6s ease;transition-delay:.5s;opacity:0}
	#main .bsn a:nth-child(2) dl{transition-delay:.7s;}
	#main .bsn a:nth-child(3) dl{transition-delay:.9s;}
	#main .bsn dl:before{height:50px;margin-bottom:5px}
	#main .bsn dl dt{margin-bottom:10px;font-size:18px;}
	#main .bsn dl dd{display:none}
	#main .bsn dl:after{position:relative;margin-top:10px;padding:0 14px 2px 0;transform: scale(1);font-size:13px;background-size:66px auto;background-position:center bottom 1px}
	#main .bsn.active dl{transform: translateY(-50%);opacity:1}
	#main .bsn.active a:first-child dl{top:calc(50% + 25px)}
	
	#main .news{padding:0 20px}
	#main .news h2{font-size:28px}
	#main .news .swiper-slide{width:280px}
	#main .news .swiper-slide img{height:160px}
	#main .news .swiper-slide p{margin:15px 0 5px;font-size:16px}
	#main .news .swiper-slide time{padding-bottom:20px;;font-size:13px}
}

@media (max-width: 480px) {
}