.list-academy {display: flex;flex-wrap: wrap;gap: 4rem;}
.list-academy > li {width: calc(100% / 4 - 3rem);transition: all .3s;box-sizing: border-box;border: 1px solid #CCCCCC;display: table;min-height: 19.2rem;}
.list-academy > li:hover {border: 1px solid #217EFF;background: #217EFF;}
.list-academy > li > a {padding: 2.8rem 2.4rem;display: block;position: relative;transition: all .3s;box-sizing: border-box;display: table-cell;vertical-align: top;}
.list-academy > li > a > span{font-weight: 500;font-size: 2.4rem;line-height: 3.2rem;text-overflow: ellipsis;white-space: normal;overflow: hidden;word-wrap: break-word;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;margin: 0 0 2rem;}
.list-academy > li > a > p{color: #666666;word-wrap: break-word;word-break: keep-all;}
.list-academy > li:hover > a span{color: #fff;}
.list-academy > li:hover > a > p{color: #fff;}
.list-academy > li > .ico-link {display: table-cell;vertical-align: top;padding: 3.2rem 2.4rem 2.8rem 0;box-sizing: border-box;width: 2.8rem;}
.list-academy > li > .ico-link > a {width: 2.8rem;display: flex;}
.list-academy > li > .ico-link > a > img.ico-w{display: none;}
.list-academy > li:hover > .ico-link > a > img.ico-bl{display: none;}
.list-academy > li:hover > .ico-link >a > img.ico-w{display: block;}

@media screen and (max-width: 1400px) {
	.list-academy {gap: 3rem;}
	.list-academy > li{width: calc(100% / 3 - 2rem);min-height: auto;}
	.list-academy > li > a {padding: 2rem 2.2rem 2.2rem;}
	.list-academy > li > a span {font-size: 1.8rem;line-height: 2.6rem;}
	.list-academy > li > a > ul {gap: 10px;}
	.list-academy > li > .ico-link {padding: 2.5rem 2.4rem 2.8rem 0}
	.list-academy > li > .ico-link > a > img{width: 2.2rem;height: 2.2rem;object-fit: cover;}
}

@media screen and (max-width: 1024px) {
	.list-academy {gap: 2rem;}
	.list-academy > li{width: calc(100% / 2 - 1rem);}

}

@media screen and (max-width: 768px){
	.list-academy {gap: 2rem;}
	.list-academy > li{width: 100%;min-height: auto;}
}