.sub_wrap, .sub_wrap *{ box-sizing:border-box; }
.sub_sec > .sub_con{ max-width:1200px; width:100%; margin:0 auto; }

.sub01_tt{ text-align:center; word-break:keep-all; margin-bottom:80px; }
.sub01_tt > h2{ font-family:'score'; font-size:45px; font-weight:800; color:#333; line-height:0.85em; margin-bottom:10px; }
.sub01_tt > p{ font-size:20px; font-weight:300; color:#777; }

.sub01_tb{ max-width:700px; width:100%; margin:0 auto 60px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -ms-flex-direction:row; flex-direction:row; -webkit-box-lines:multiple; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; }
.sub01_tb > li{ position:relative; z-index:1; max-width:340px; width:50%; text-align:center; white-space:nowrap; padding:13px 20px; font-family:'score'; border:1px solid #333; font-size:25px; font-weight:200; color:#333; transition:0.4s color; cursor:pointer; }
.sub01_tb > li:hover, .sub01_tb > li.act{ color:#fff; }
.sub01_tb > li:after{ content:''; position:absolute; z-index:1; bottom:0; left:0; width:100%; height:3px; background-color:#333; transition:0.4s height; }
.sub01_tb > li:hover:after, .sub01_tb > li.act:after{ height:100%; }
.sub01_tb > li > span{ position:relative; z-index:2; }

.sub01_tc{ display:none; }
.sub01_tc.act{ display:block; }
.sub01_tc > ul{ margin:0 -15px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -ms-flex-direction:row; flex-direction:row; -webkit-box-lines:multiple; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.sub01_tc > ul > li{ width:33.333333333%; padding:0 15px 30px; display:-webkit-box; display:-ms-flexbox; display:flex; transform:translate(0, 50px); opacity:0; transition:1s transform, 1s opacity; }
.sub01_tc > ul > li.act{ transform:translate(0, 0); opacity:1; }
.sub01_tc > ul > li > .sub01_box{ width:100%; border-radius:8px; overflow:hidden; background-color:#f7f7f7; box-shadow:3px 3px 8px 0 rgba(0,0,0,0.25); }

.sub01_txt{ padding:20px; word-break:keep-all; }
.sub01_txt > h3{ font-size:24px; font-weight:600; color:#333; }
.sub01_txt > h3 > small{ font-size:0.7em; font-weight:300; color:#666; }
.sub01_img > img{ width:100%; height:auto; display:block; }


@media(max-width:700px){
	.sub01_tc > ul{ margin:0 -10px; }
	.sub01_tc > ul > li{ width:50%; padding:0 10px 20px; }
}
@media(max-width:650px){
	.sub01_tt{ margin-bottom:60px; }
	.sub01_tt > p{ font-size:16px; }
}
@media(max-width:500px){
	.sub01_tb{ margin:0 auto 40px; }
	.sub01_tb > li{ padding:10px 15px; font-size:20px; }
	.sub01_tb > li:after{ height:2px; }

	.sub01_tc > ul{ margin:0 -5px; }
	.sub01_tc > ul > li{ padding:0 5px 10px; }

	.sub01_txt{ padding:10px 20px; }
	.sub01_txt > h3{ font-size:20px; }
}