._list{}
._list .contents{
	padding-top: 130px; padding-bottom: 160px;
}
._list .contents .wrap{
	position: relative;
}
._list .list{
	display: flex; flex-wrap: wrap; column-gap: 45px; row-gap: 60px; overflow: hidden;
}
._list .list li{
	width: calc(100% / 3 - (45px * 2 / 3));
}
._list .list li .imgBx{
	border: 1px solid #dfdfdf; box-sizing: border-box; position: relative;
}
._list .list li .imgBx::before {
	content:''; display: block; padding-bottom: calc(1/1.4*100%);
}
._list .list li .imgBx img{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	/* object-fit: cover; */
    object-fit: contain;
}
._list .list li p{
	font-size: 20px; letter-spacing: -0.025em; color: #373737; line-height: 1.3;
	text-align: center; font-weight: 500;
	padding: 0 10px; box-sizing: border-box; margin-top: calc(28/20*1em);
}

._list.overLength .list li:nth-child(15) ~ li{display: none;}



._list.overLength .more{
	position: absolute; left: 0; bottom: 0;
	width: 100%; height: 3px; background-color: var(--point-color-2);
	display: flex; align-items: center; justify-content: center; z-index: 1;
	transition: opacity 0.2s;
}
._list .more{
	display: none;
}
.more .gradiant{
	background: linear-gradient(0deg,rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 100%);
	position: absolute; left: 0; bottom: 3px; width: 100%; height: 240px; z-index: -1;
	pointer-events: none;
}
.more .btn{
	width: 220px; height: 62px;
	display: flex; align-items: center; justify-content: center; color: #fff;
	font-size: 20px; font-weight: 700; letter-spacing: -0.025em;
	border-radius: 20px 0 20px 20px; background-color: var(--point-color-2);
	cursor: pointer; transition: background-color 0.2s;
}
.more .btn:hover{background-color: #444;}
.more .btn p{}
.more .btn i{}




@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	._list .list{column-gap: 20px;}
	._list .list li{width: calc(100% / 3 - (20px * 2 / 3));}
	._list .list li p{font-size: 18px;}
}
@media screen and (max-width:1024px) {
	._list .list li{width: calc(100% / 2 - (20px * 2 / 3));}
}
@media screen and (max-width:820px) {
	._list .list{column-gap: 10px; row-gap: 40px;}
	._list .list li{width: calc(100% / 2 - (10px * 2 / 3));}
	._list .list li p{font-size: 16px;}

	.more .btn{width: 170px; height: 50px; font-size: 18px; border-radius: 4px;}
}
@media screen and (max-width:500px) {
	._list .contents{padding: 100px 0;}
	._list .list li{width: 100%;}

	.more .btn{width: 130px; height: 40px; font-size: 16px;}
}
@media screen and (max-width:320px) {}