.top-purchase-brand-list-section {
    & .title-wrap {
        text-align: center;
    }

    & .title-wrap .title {
        font-size: 3cqw;
        font-weight: 700;
    }

    & .title-wrap .title-lead {
        font-size: 2cqw;
    }

    & .top-purchase-brand-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2cqw;
    }

    & .top-purchase-brand-list {
        padding: 2cqw 4cqw;
    }

    & .top-purchase-brand-card {
        width: calc((100% - (2cqw * 4)) / 5);
        position: relative;
    }

    & .top-purchase-brand-card .top-purchase-brand-block {
        border-radius: 2rem;
        overflow: hidden;
        display: block;
        border: 0.2rem solid var(--color-gray-medium);
    }

    & .top-purchase-brand-card:hover .top-purchase-brand-block {
        border: 0.2rem solid #e50213;
    }

    & .top-purchase-brand-card .top-purchase-brand-img {
        width: 100%;
        height: auto;
        padding: 1cqw 0;
        aspect-ratio: 2.8 / 2.5;
        object-fit: contain;
        transition: transform 0.5s ease;
        background-color: #efefef;
    }

    & .top-purchase-brand-card:hover img {
        transform: scale(1.15);
    }

    & .top-purchase-brand-card .top-purchase-brand-arrow {
        background: url(/assets/img/common/gray_right_arrow.png) no-repeat;
        position: absolute;
        right: 0;
        width: 14%;
        height: 14%;
        bottom: 22%;
        background-size: 66%;
    }

    & .top-purchase-brand-card:hover .top-purchase-brand-arrow {
        background: url(/assets/img/common/red_right_arrow.png) no-repeat;
        background-size: 66%;
    }

    & .top-purchase-brand-card p {
        font-size: 1.4cqw;
        font-weight: 700;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .top-purchase-brand-list-section {
        & .title-wrap .title {
            font-size: 6cqw;
        }

        & .title-wrap .title-lead {
            font-size: 3.4cqw;
        }

        & .top-purchase-brand-card {
            width: calc((100% - (2cqw * 1)) / 2);
            height: 18cqw;
            border-radius: 1.2rem;
            overflow: hidden;
            border: 0.16rem solid #e50213;
            display: flex;
        }

        & .top-purchase-brand-card .top-purchase-brand-block {
            border: none;
            width: 36%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        & .top-purchase-brand-card:hover .top-purchase-brand-block {
            border: none;
        }

        & .top-purchase-brand-card .top-purchase-brand-img {
            background-color: #fff;
            width: 100%;
            aspect-ratio: 1 / 1;
            padding: 1cqw;
        }

        & .top-purchase-brand-card .top-purchase-brand-arrow {
            background: url(/assets/img/common/red_right_arrow.png) no-repeat;
            width: 10%;
            height: 26%;
            bottom: 0%;
            background-size: 66%;
            right: 2%;
        }

        & .top-purchase-brand-card p {
            font-size: 2.8cqw;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56%;
            padding: 4% 4% 4% 0;
        }
    }
}