@charset "utf-8";

#ctt {
	margin-bottom:20rem;
}
#ctt .category_btn {
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
	margin-bottom:8rem;
}
#ctt .category_btn button {
	display:block;
	width:200px;
	font-size:1.8rem;
	text-align:center;
	padding:2.5rem;
	border:1px solid #333;
	border-radius:5rem;
}
#ctt .category_btn button:hover,
#ctt .category_btn button.active{
	color:#fff;
	font-weight:600;
	border:1px solid transparent;
	background-color:#023b8a;
}

#ctt .category {
	display:none;
}
#ctt #cate01 {
	display:block;
}
#ctt .topimg {
	height:600px;	
	border-radius:3rem;
	margin-bottom:12rem;
	background-position:center;
	background-repeat:no-repeat;
}
#ctt #cate01 .topimg { background-image:url("/theme/basic/img/cont0202_img01.jpg"); }
#ctt #cate02 .topimg { background-image:url("/theme/basic/img/cont0202_img02.jpg"); }
#ctt #cate03 .topimg { background-image:url("/theme/basic/img/cont0202_img03.jpg"); }
#ctt #cate04 .topimg { background-image:url("/theme/basic/img/cont0202_img04.jpg"); }

#ctt .detail_text {
	display:grid;
	grid-template-columns: 500px 1fr;
	align-items:center;
	margin-bottom:13rem;
}
#ctt .detail_text h4 {
	color:#023b8a;
	font-size:5rem;
}
#ctt .detail_text p {
	position:relative;
	font-size:1.8rem;
	line-height:2;
	padding-left:6rem;	
}
#ctt .detail_text p:after {
	content:'';
	position:absolute;
	left:0;
	top:50%;
	translate:0 -50%;
	width:2px;
	height:80%;
	background-color:#333;
}
#ctt .sub {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:2.5rem;
}
#ctt .sub li img {
	width:100%;
}
@media all and (max-width:1280px){
	#ctt .topimg {
		height:300px;	
	}
	#ctt .detail_text {
		    grid-template-columns: 200px 1fr;
	}
}
@media all and (max-width:920px){
	#ctt h4 {
		font-size:4rem;
	}
	#ctt .category_btn li {	
		width:calc(50% - 10px);
	}
	#ctt .category_btn button {
		width:100%;
		padding:1.5rem;
	}
	#ctt .detail_text {
		    grid-template-columns: 1fr;
	}
	#ctt .detail_text p {
		padding-left:3rem;
		margin-top:2rem;
	}
	#ctt .detail_text p:after {
		height:90%;
	}
	#ctt .sub {
		grid-template-columns: repeat(2, 1fr);
		gap:1.5rem;
	}
}