.banner-ttl-blk {
position: absolute;
top: 65%;
left: 50%;
transform: translateX(-50%);
text-align: center;
z-index: 99;
}
.activities {
margin: 50px 0;
}
.activities-list {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.activities-list li {
width: 49%;
position: relative;
margin-bottom: 50px;
transition: all 0.3s ease-out;
}
.activities-list li:hover {
transition: all 0.3s ease-out;
}
.activities-list li .category {
font-size: 12px;
font-weight: 700;
position: absolute;
top: 20px;
left: 10px;
padding: 5px 10px;
background-color: var(--txt-light-color);
color: var(--secondary-color);
border-radius: 15px;
}
.activities-list li .content-blk {
margin: 20px 30px 20px 0px;
}
.activities-list li .content-blk h6 {
color: var(--txt-soft-color);
}
.activities-list li .content-blk p {
margin: 20px 0;
color: var(--txt-soft-color);
}
.activities-list li:hover .content-blk h6,
.activities-list li:hover .content-blk p {
color: var(--txt-primary-color);
transition: all 0.3s ease-out;
}
.activities-list li .content-blk .show-me-more {
display: block;
color: var(--primary-color);
font-size: 16px;
font-weight: 400;
overflow: hidden;
opacity: 0;
transform: translateY(5px);
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
margin-bottom: 10px;
}
.activities-list li:hover .content-blk .show-me-more {
opacity: 1;
transform: translateY(0);
}
.activities-list li .content-blk .show-me-more img {
width: 20px;
height: 20px;
transform: rotate(-45deg);
filter: brightness(0) saturate(100%) invert(74%) sepia(93%) saturate(526%)
hue-rotate(-17deg);
} @media only screen and (min-width: 768px) and (max-width: 1280px) {
.activities {
margin: 3.906vw 0;
}
.activities-list li {
margin-bottom: 3.906vw;
}
.activities-list li .category {
font-size: 0.938vw;
top: 1.563vw;
left: 0.781vw;
padding: 0.391vw 0.781vw;
border-radius: 1.172vw;
}
.activities-list li .content-blk {
margin: 1.563vw 2.344vw 1.563vw 0vw;
}
.activities-list li .content-blk p {
margin: 1.563vw 0;
}
.activities-list li .content-blk .show-me-more {
margin-bottom: 0.781vw;
font-size: 1.25vw;
}
.activities-list li .content-blk .show-me-more img {
width: 1.563vw;
height: 1.563vw;
}
} @media all and (max-width: 767.9px) {
.banner-ttl-blk {
width: 100%;
top: 50%;
}
.activities {
margin: 13.333vw 0;
}
.activities-list {
flex-direction: column;
}
.activities-page .tab-list {
justify-content: center;
}
.activities-list li {
width: 100%;
margin-bottom: 8vw;
}
.activities-list li .category {
font-size: 3.2vw;
top: 5.333vw;
left: 2.667vw;
padding: 1.333vw 2.667vw;
border-radius: 4vw;
}
.activities-list li .content-blk {
margin: 5.333vw 8vw 5.333vw 0vw;
}
.activities-list li .content-blk p {
margin: 5.333vw 0;
}
.activities-list li .content-blk .show-me-more {
margin-bottom: 2.667vw;
font-size: 3.733vw;
opacity: 1;
}
.activities-list li .content-blk .show-me-more img {
width: 4.8vw;
height: 4.8vw;
}
}