#main {
	padding-top: 9rem;
	letter-spacing: -0.08rem;
}
.template-list {
	padding-top: 10rem;
}
.template-list .grid {
	display: flex;	
	align-items: flex-start;
	padding-bottom: 7.4rem;
}
.title-one {
	width: 18.75%;
	flex-shrink: 0;
	font-size: 3rem;
	font-weight: 600;
}
.title-one span {
	position: relative;
}
.title-one.on span::before {
	content: '';
	position: absolute;
	bottom: 0.3rem;
	left: 0;
	width: 100%;
	height: 1rem;
	background-color: #3bb3ff;
	z-index: -1;
}
.list-two {
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
	padding-top: 0.5rem;
	margin: 0 -1.5625%;
}
.template-list .grid:not(:last-child) .list-two {
	border-bottom: 1px solid #ddd;	
}
.list-two > li {
	width: calc((100% - 15.625%) / 5);
	margin: 0 1.5625%;
	padding-bottom: 8rem;
}
.title-two {
	font-size: 2.2rem;
	font-weight: 500;
	margin-bottom: 3.6rem;
	display: inline-block;
}
.title-three {
	color: #808080;
}
.title-three.on {
	color: #222;
}
.title-three span {
	position: relative;
}
.title-three.on span::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #222;
}
.list-three > li:not(:first-child) {
	margin-top: 3.2rem;
}

/* 미디어쿼리 */
@media screen and (max-width: 1024px) {	
	.template-list .grid {
		display: block;
	}
	.title-one {
		display: block;
		width: 100%;
		margin-bottom: 5rem;
	}
	.list-two {
		margin: 0;
	}
	.list-two > li {
		width: 100%;
		margin: 0;
		display: flex;
	}
	.title-two {
		margin-bottom: 0;
		width: 24%;
		flex-shrink: 0;
	}
	.list-three {
		display: flex;
		flex-wrap: wrap;
		flex-grow: 1;
	}
	.list-three > li {
		margin: 0 0 2rem !important;
		width: calc(100% / 3);
	}
}
@media screen and (max-width: 540px) {
	.list-two > li {
		display: block;
		padding-bottom: 4rem;
	}
	.title-two {
		width: 100%;
		margin-bottom: 3rem;
	}
	.list-three > li {
		width: calc(100% / 2);
	}
}