.visual-area{background-image:url('../images/bg_act.jpg'); background-size:cover; background-position:center}
.section-data{padding-top:var(--padding-container-lg); padding-bottom:var(--padding-container-md)}
.section-head{max-width:520px; padding-bottom:var(--padding-container-md)}
.section-head:not(.section-data .section-head){ margin-left:auto; margin-right:auto}
.graph{width:100%; height:300px; background-color:#f1f1f1}
.posts{display:flex; flex-direction:column; gap:16px}
.posts > *{flex:1}
.section-activity-contents > *{padding-top:var(--padding-container-md); padding-bottom:var(--padding-container-md)}
.section-activity-contents{padding-bottom:var(--padding-container-md)}
.card{position:relative; min-height:399px; border-radius:var(--radius-lg); background-color:#EDF5F3}
.card .card-head{padding:28px}
.card .card-head > *:not(:first-child){margin-top:16px}
.card .card-head .title{font-size:24px; line-height:1.4; letter-spacing:-1.4px; color:var(--card-title-dark)}
.card .card-head .desc p{font-size:15px; line-height:1.5; color:var(--card-desc)}
.card .deco{width:160px; height:160px; position:absolute; right:28px; bottom:28px; transform-origin:bottom center;}
.btn.style-circle{font-size:14px; font-weight:600; padding:0; color:var(--button-label-black); background-color:transparent}
.btn.style-circle .background{width:32px; height:32px; display:flex; align-items:center; justify-content:center; background-color:#222; border-radius:var(--radius-circle)}
.activity1 .btn.style-circle:hover{color:#248F75}
.activity2 .btn.style-circle:hover{color:#F77784}
.activity3 .btn.style-circle:hover{color:#F1AF12}
.activity4 .btn.style-circle:hover{color:#BF8062}
.activity5 .btn.style-circle:hover{color:#7E56C2}
.btn.style-circle:hover::before{background-color:transparent}
@media(min-width:768px){
  .posts{gap:24px}
  .card .deco{width:200px; height:200px; position:absolute; right:28px; bottom:28px}
  .card .card-head .title{font-size:28px; line-height:1.4; letter-spacing:-1.4px; color:var(--card-title-dark)}
}
@media(min-width:1070px){
  .graph{height:600px}
  .posts{gap:40px; flex-direction:row}
  .card{min-height:800px; border-radius:var(--radius-lg)}
  .card .card-head{padding:68px}
  .card .card-head > *:not(:first-child){margin-top:24px}
  .card .card-head .title{font-size:44px; letter-spacing:-2.6px}
  .card .card-head .desc p{font-size:19px}
  .card .deco{width:300px; height:300px; right:68px; bottom:68px}
  .btn.style-circle{font-size:17px}
  .btn.style-circle .background{width:40px; height:40px}
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx) {
  .visual-area{background-image:url('../images/bg_act@2x.jpg')}
}

.activity1 .card{background-color:#EDF5F3}
.activity1 .card .btn .background{background-color:#248F75}
.activity2 .card{background-color:#FAF5F4}
.activity2 .card .btn .background{background-color:#F77784}
.activity3 .card{background-color:#FAF7EF}
.activity3 .card .btn .background{background-color:#F1AF12}
.activity4 .card{background-color:#F9F8F7}
.activity4 .card .btn .background{background-color:#BF8062}
.activity5 .card{background-color:#F7F4FB}
.activity5 .card .btn .background{background-color:#7E56C2}
.latest-posts{display:flex; flex-wrap:wrap; gap:16px}
.latest-posts .post-item{border-radius:var(--radius-lg); overflow:hidden; transition:all .2s ease}
.latest-posts .post-item:first-child{flex-basis:100%}
.latest-posts .post-item:not(:first-child){flex:1}
.latest-posts .post-item:last-child{display:none}
.latest-posts .post-item .post-tags{display:flex; gap:4px; flex-wrap:wrap}
.latest-posts .post-item .info .post-tags > *:nth-child(n+4){display:none}
.latest-posts .post-item a{padding-bottom:90%; display:block; position:relative; background-color:#eee; border-radius:var(--radius-md)}
.latest-posts .post-item .info{position:absolute; bottom:0; width:100%; padding:24px; padding-right:60px; background:linear-gradient(180deg, rgba(36, 40, 49, 0.00) 0%, rgba(36, 40, 49, 0.80) 100%)}
.latest-posts .post-item .info > *{max-width:360px}
.latest-posts .post-item .info > *:not(:first-child){margin-top:10px}
.latest-posts .post-item .tag{display:inline-block; color:#fff; font-size:12px; padding:5px 8px; background-color:#222; border-radius:var(--radius-circle); box-shadow:0px 1px 0px 0px rgba(0, 0, 0, 0.15)}
.latest-posts .post-item .tag:nth-child(1){background-color:#009D75}
.latest-posts .post-item .tag:nth-child(2){background-color:#EF5868}
.latest-posts .post-item .tag:nth-child(3){background-color:#2184FD}
.latest-posts .post-item .post-title{font-size:18px; line-height:1.4; font-weight:500; color:var(--card-title-light); -webkit-text-stroke-width:1px; -webkit-text-stroke-color:rgba(0, 0, 0, 0.10)}
.latest-posts .post-item .post-date{font-size:13px; color:var(--card-date-white); line-height:1}
@media(min-width:768px){
  .latest-posts{display:flex; gap:24px}
  .latest-posts .post-item{flex:1}
  .latest-posts .post-item a{height:290px; border-radius:var(--radius-lg)}
  .latest-posts .post-item:first-child{flex-basis:auto}
  .latest-posts .post-item .info{bottom:0}
  .latest-posts .post-item .info > *:not(:first-child){margin-top:10px}
}
@media(min-width:1070px){
  .latest-posts .post-item a{padding-bottom:65%}
  .latest-posts{display:flex; gap:40px}
  .latest-posts .post-item:first-child{flex-basis:100%}
  .latest-posts .post-item:first-child a{height:474px}
  .latest-posts .post-item:last-child{display:block}
  .latest-posts .post-item .info{bottom:0; padding:24px}
  .latest-posts .post-item .info > *:not(:first-child){margin-top:10px}
}