.related ul { display: flex; flex-wrap: wrap; gap: 10px; }
.related ul li { width: calc((100% - 20px)/3); text-align: center; }
.related ul li a { box-sizing: border-box; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 21px; min-height: 152px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; }
.related ul li a > .img { max-width: calc(100% - 30px); height: 50px; display: flex; justify-content: center; align-items: center; }
.related ul li a > .img img { width: 100%; max-height: 100%; }
.related ul li a > p { font-weight: 600; font-size: 16px; line-height: 100%; letter-spacing: -.02em; color: #333; }
.related ul li a > .hover { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; width: 100%; height: 100%; background: linear-gradient(110.81deg, #0a60ff 22.46%, #07b0c3 77.54%); transform: translatey(50%); opacity: 0; pointer-events: none; transition: all .25s ease 0s; }
.related ul li a > .hover p:nth-child(1) { font-weight: 700; font-size: 20px; line-height: 100%; letter-spacing: -.02em; color: #fff; }
.related ul li a > .hover p:nth-child(2) { box-sizing: border-box; width: 113px; height: 35px; border: 1px solid #fff; border-radius: 99px; display: flex; justify-content: center; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; line-height: 100%; letter-spacing: -.02em; color: #fff; }
.related ul li a > .hover p:nth-child(2):after { content: ''; width: 9px; height: 9px; background: url(../img/content/related-sites-link.png) no-repeat center / 100% auto; }
.related ul li a:hover > .hover { transform: translatey(0); opacity: 1; pointer-events: auto; }
@media ( max-width: 1024px ) {
	.related ul li { width: calc((100% - 10px)/2); }
}
@media ( max-width: 500px ) {
	.related ul li { width: 100%; }
}