._contents{
	letter-spacing: -0.05em;
	padding-top: 116px; padding-bottom: 160px;
}
.topArea{display: flex; justify-content: space-between; margin-bottom: 30px; text-align: center;}
.topArea h3{
	font-size: 48px; font-weight: 700;
}
.topArea ._searchBar{}
.list{
	display: flex; gap: 30px; flex-wrap: wrap;
	margin-bottom: 87px;
}
.list li{
	width: calc(100% / 3 - (30px * 2 / 3));
}
.list li a{
	display: flex; align-items: center; justify-content: center; flex-direction: column;
	border-radius: 9px; overflow: hidden; position: relative;
}
.list li a .imgBx{position: relative; width: 100%; transition: filter 0.5s;}
.list li a .imgBx::before {
	content:''; display: block; padding-bottom: calc(260/460*100%);
}
.list li a .imgBx img{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	object-fit: cover;
}
html.pc .list li:hover a .imgBx{filter: brightness(0.2);}


.list li a .txtBx{
	z-index: 2;
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	line-height: 1.4;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	opacity: 0; transform: translateY(60px);
	transition: opacity 0.5s, transform 0.5s;
	padding: 20px; box-sizing: border-box; text-align: center;
	color: #fff;
}
html.pc .list li:hover a .txtBx{opacity: 1; transform: translateY(0px); transition-delay: 0.2s;}
.list li a .txtBx h4{
	font-size: 28px; font-weight: 700; margin-bottom: 12px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.list li a .txtBx p{
	font-size: 18px; color: #ccc; font-weight: 300; margin-bottom: 16px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.list li a .txtBx div{
	font-weight: 300;
}
.list li a .txtBx div i{}

.list li a .circle{
	position: absolute;
	right: 0; top: 0;
	width: 100%;
}
.list li a .circle div{
	width: 0%;
	transform: translate(-50%,-50%);
	transform-origin: center;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--red);
	transition: width 0.4s;
}
html.pc .list li:hover a .circle div{width: 100%; transition-duration: 0.8s;}
.list li a .circle div::before {
	content:''; display: block; padding-bottom: 100%;
}



/* 모바일일때 스타일 별도 */
html.mo .list li a{border-radius: unset;}
html.mo .list li a .imgBx{border-radius: 9px; overflow: hidden;}
html.mo .list li a .txtBx{position: unset; color: #000; opacity: 1; transform: translateY(0); padding: 0 4px; padding-top: 10px;}
html.mo .list li a .txtBx p{color: #000;}
html.mo .list li a .txtBx div{display: none;}
html.mo .list li a .circle{display: none;}





@media screen and (max-width:1600px) {
	.list li a .txtBx{position: unset; color: #000; opacity: 1; transform: translateY(0); padding: 0 4px; padding-top: 10px;}
	.list li a .txtBx p{font-size: 16px; margin-bottom: 4px;}
	.list li a .txtBx h4{font-size: 20px; margin-bottom: 4px;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.topArea h3{font-size: max(calc(48 / 1280 * 100vw), 22px);}
	.list{gap: 20px;}
	.list li{width: calc(100% / 3 - (20px * 2 / 3));}

}
@media screen and (max-width:1024px) {
	.list{gap: 30px 10px;}
	.list li{width: calc(100% / 3 - (10px * 2 / 3));}
	.list li a .imgBx{border-radius: 6px !important;}

	.list li a .txtBx h4{font-size: 18px;}
	.list li a .txtBx p{font-size: 14px;}
}
@media screen and (max-width:820px) {
	.topArea{flex-direction: column; gap: 20px;}
	.topArea ._searchBar{width: 100%;}
	.topArea ._searchBar > div{width: 100%;}
	.topArea ._searchBar > div input{max-width: unset;}

	.list li{width: calc(100% / 2 - (10px * 1 / 2));}
}
@media screen and (max-width:500px) {
	.list{margin-bottom: 50px;}
	.list li a .imgBx{border-radius: 4px !important;}
	.list li a .txtBx h4{font-size: 14px;}
	.list li a .txtBx p{font-size: 12px;}
}
@media screen and (max-width:320px) {}