.tm-interactive-list {
border-top: 1px solid rgba(255, 255, 255, 0.09);
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.tm-interactive-list h2 {
margin: 0 auto;
padding: 0 12px;
font-size: 60px;
position: relative;
color: rgba(22, 22, 22, 0.75);
line-height: 1.35em;
}
.tm-interactive-list h2 .each-item {
color: rgba(22, 22, 22, 0.75);
display: inline-block;
position: relative;
transition: all 0.3s ease-in-out;
}
.tm-interactive-list h2 .each-item:hover {
color: #000;
cursor: pointer;
}
.tm-interactive-list h2 .each-item:hover .hover-img {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.tm-interactive-list h2 .hover-img {
max-width: 235px;
width: 235px;
position: absolute;
left: 50%;
bottom: 100%;
z-index: 1;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-5px);
transition: all 0.3s ease-in-out;
}
@media (min-width: 1201px) and (max-width: 1366px) {
.tm-interactive-list h2 {
font-size: 70px;
}
.tm-interactive-list h2 .hover-img {
max-width: 220px;
}
}
@media (min-width: 1025px) and (max-width: 1200px) {
.tm-interactive-list h2 {
font-size: 55px;
}
.tm-interactive-list h2 .hover-img {
max-width: 200px;
}
}
@media (max-width: 1024px) {
.tm-interactive-list h2 {
font-size: 32px;
text-align: center;
}
.tm-interactive-list h2 .hover-img {
position: static;
display: block;
transform: none;
opacity: 1;
visibility: visible;
margin: 10px auto 0;
width: auto;
}
.tm-interactive-list h2 .each-item {
margin-bottom: 40px;
padding: 0 5px;
}
.tm-interactive-list h2 .each-item:hover .hover-img {
transform: none;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.tm-interactive-list h2 .each-item {
width: 32%;
padding: 0 12px;
}
}
@media (max-width: 767px) {
.tm-interactive-list h2 {
font-size: 28px;
}
.tm-interactive-list h2 .each-item {
width: 49%;
}
}