#essayList { padding: 50px 15px; overflow: hidden; position: relative; z-index: 2; }
#essayList>div { display: inline-block; width: calc(100% / 3); margin-right: -4px; vertical-align: top; }
#essayList .free { transition: all linear .1s; border: 1px solid #f5f5f5; position: relative; }
#essayList .free .bg { background-color: #fff; background-size: cover; background-repeat: no-repeat; background-position: center; padding: 80px 50px; }
#essayList>div a { display: block; position: absolute; width: 100%; height: 100%; z-index: 2; top: 0; left: 0; }
#essayList .free h4 { text-align: center; font-size: 22px; line-height: 110%; overflow: hidden; margin-bottom: 20px; white-space: nowrap; text-overflow: ellipsis; background-color: #f93; background: -webkit-gradient(linear, left top, right top, color-stop(20%, #f93), color-stop(80%, #ff7166)); background: -webkit-linear-gradient(left, #f93 20%, #ff7166 80%); background: linear-gradient(90deg, #f93 20%, #ff7166 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#essayList .free p { text-align: center; font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@media screen and (min-width: 1025px) {
	#essayList .free:hover { transform: translate(-15px, -15px); }
}
@media screen and (max-width: 1024px) {
	#essayList>div { width: calc(100% / 2); }
	#essayList { padding: 20px 0; }
}
@media screen and (max-width: 640px) {
	#essayList>div { width: 100%; }
}