.main-section {background: url('../img/main/main_bg.png') no-repeat center center /cover; display: flex; align-items: center; justify-content: center; height: 100%; padding-top: 10rem; padding-bottom: 6rem;}
.main-section .inner {display: flex; flex-direction: column; row-gap: 2rem;}
.main-section--content .heading {text-align: center; margin-bottom: 6rem;}
.main-section--content .heading * {color: #fff; line-height: 1.2; word-break: keep-all}
.main-section--content .heading-title {padding-bottom: 2rem;}
.main-section--content .card {background: linear-gradient(to right bottom, #fff 0%, #fff 49%, #8fc31f 50%, #006FBC 100%); border-radius: 2rem; overflow: hidden; width: calc((100% - 4.5%) / 4); position: relative; background-size: 200% 200%; transition: all 0.5s;}
.main-section--content .card::after {content: ""; display: block; padding-bottom: 100%;}
.main-section--content .card a {display: flex; flex-direction: column; justify-content: space-between; padding: 3.5rem 2rem 3.5rem 3.5rem; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.main-section--content .card .card-text--title {padding-bottom: 2rem;}
.main-section--content .card .card-text--desc {color: #666; word-break: keep-all;}
.main-section--content .card a::after {content: ""; display: inline-block; width: 12.4rem; height: 12.4rem; background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; position: absolute; bottom: 1.6rem; right: 3.2rem; }
.main-section--content .card:nth-child(1) a::after {background-image: url('../img/main/card_icon01.svg');}
.main-section--content .card:nth-child(2) a::after {background-image: url('../img/main/card_icon02.svg');}
.main-section--content .card:nth-child(3) a::after {background-image: url('../img/main/card_icon03.svg');}
.main-section--content .card:nth-child(4) a::after {background-image: url('../img/main/card_icon04.svg');}

.latest .content-item {display: flex; align-items: center; column-gap: 4rem; background: #fff; border-radius: 2rem; overflow: hidden; padding: 2.2rem 5rem 2.2rem 6rem;}
.latest .content-item .content-heading {position: relative;}
.latest .content-item .content-heading::after {content: ""; display: inline-block; width: 1px; height: 1.4rem; background: rgba(0,0,0,0.3); position: absolute; left: calc(100% + 2rem); top: 50%; transform: translateY(-50%);}
.latest .cta-arrow {margin-left: auto;}

.main-section--content .cta-arrow {display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 999px;  margin-top: auto;}
.main-section--content .cta-arrow::after {content: ""; display: inline-block; width: 2.8rem; height: 2.8rem; background: url('../img/main/arrow_right.svg') no-repeat center center / contain;}
.main-section--content .cta-arrow.grey {background: #e8e8e8;}
.main-section--content .cta-arrow.grey::after {filter: invert(1);}
.main-section--content .cta-arrow.gradient {background: var(--gradientBottom);}

.latest .latest-content--title {display: -webkit-box; overflow: hidden; white-space: normal; word-wrap: break-word; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; word-break: break-all;}

.bid-slide {height: 2.8rem; position: relative; overflow: hidden;}

@media (hover: hover) and (min-width: 1025px) {
    .main-section--content .card:hover {background-position: 100% 100%;}
    .main-section--content .card:hover * {color: #fff;}
    .main-section--content .card:hover .card-arrow {background: rgba(0,0,0,0.5);}
    .main-section--content .card:hover .card-arrow::after {filter: invert(0);}
    .main-section--content .card:nth-child(1):hover a::after {background: #fff; mask: url('../img/main/card_icon01.svg') no-repeat 50% 50% / contain;}
    .main-section--content .card:nth-child(2):hover a::after {background: #fff; mask: url('../img/main/card_icon02.svg') no-repeat 50% 50% / contain;}
    .main-section--content .card:nth-child(3):hover a::after {background: #fff; mask: url('../img/main/card_icon03.svg') no-repeat 50% 50% / contain;}
    .main-section--content .card:nth-child(4):hover a::after {background: #fff; mask: url('../img/main/card_icon04.svg') no-repeat 50% 50% / contain;}

    .latest .latest-content--title:hover {color: var(--blue);}
}

@media screen and (max-width: 1280px) {
    .main-section--content .card a {padding: 2.5rem;}
    .main-section--content .card a::after {width: 9.5rem; height: 9.5rem;} 
    .latest .content-item {padding: 2.2rem 2.5rem 2.2rem 2.5rem;}
}

@media screen and (max-width: 1024px) {
    .main-section {padding-top: 15rem; padding-bottom: 5rem;}
    .main-section--content .card::after {padding-bottom: 55%;}
    .main-section--content .cta-arrow::after {width: 2.2rem; height: 2.2rem;}
    .main-section--content .cta-arrow {width: 4rem; height: 4rem;}
}

@media (max-width: 480px) {
    .main-section--content .card-group.col-4 {column-gap: 1rem; row-gap: 1rem;}
    .main-section--content .card-group.col-4 .card {width: calc((100% - 6rem) / 2)}
    .main-section--content .card::after {padding-bottom: 125%;}
    .main-section--content .card a::after {width: 6.5rem; height: 6.5rem; right: 2rem;}
    .main-section--content .card a * {word-break: keep-all;}
    .main-section--content .card .card-text--desc {font-size: 1.5rem; line-height: 1.5}
    .main-section--content .card .card-text--desc br {display: none;}
    .latest .content-heading--title {font-size: 2rem;}
    .latest .content-item {flex-wrap: wrap; align-items: center; row-gap: 1.2rem; column-gap: 1.5rem;}
    .latest .content-item .content-heading::after {content: none;}
    .latest .content-item .content-detail {width: 80%;}
    .latest .latest-content--title {font-size: 1.7rem;}
    .main-section--content .cta-arrow {width: 3.6rem; height: 3.6rem;}
}

@media (max-width: 375px) {
    .main-section--content .card::after {padding-bottom: 143%;}
    .main-section--content .card a {padding: 2rem;}
    .main-section--content .card a::after {width: 5.5rem; height: 5.5rem;}

}