@charset "UTF-8";
.businessArea {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 70%;
    margin: 0 auto;
    /*padding-top: 50px;*/
}

.card {
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: calc(50% - 20px);
    max-width: 48%;
    display: flex;
    flex-direction: column;
}

.image img {
    width: 100%;
    height: auto;
    display: block;
}

.content {
    padding: 20px;
}
.main-service h1 {
    margin: 50px 0;
    text-align-last: center;
}
h2 {
    font-size: 1.5rem;
    text-align: center;
    border-radius: 50px;
    display: inline-block;
    margin: 0 50px;
    padding: 15px 20px; /* height 대신 패딩 사용 */
    width: 80%; /* 고정된 크기 대신 유동적인 크기 */
    max-width: 500px; /* 최대 너비 설정 */
    box-sizing: border-box; /* 패딩과 테두리 포함 */
}
.leisure h2 {
    background-color: #fff7dd; /* 연한 노란색 배경 */
    color: #FFC700; /* 텍스트 노란색 */
}

/* 카페·프랜차이즈 창업 h2 */
.cafe h2 {
    background-color: #E8F5E9; /* 연한 녹색 배경 */
    color: #0DD48D; /* 텍스트 녹색 */
}

/* 산업장비·공장기계 h2 */
.industry h2 {
    background-color: #E3F2FD; /* 연한 파란색 배경 */
    color:#3C78EC; /* 텍스트 파란색 */
}

/* 자동차 정비 h2 */
.automotive h2 {
    background-color: #FFEBEE; /* 연한 빨간색 배경 */
    color: #F54949; /* 텍스트 빨간색 */
}

.businessArea ul {
    list-style: none;
    padding-left: 0;
}

.businessArea li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 30px;
    font-size: 18px;
    margin-top: 20px;
}

.businessArea li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: currentColor;
}

/* 각 카테고리별 색상 및 li 스타일 */
.leisure h2 {
    color: #FFC700;
}

.cafe h2 {
    color: #0DD48D;
}

.industry h2 {
    color: #3C78EC;
}

.automotive h2 {
    color: #F54949;
}

.leisure-list .leisure-item::before {
    background-color: #FFC700;
}

.cafe-list .cafe-item::before {
    background-color: #0DD48D;
}

.industry-list .industry-item::before {
    background-color: #3C78EC;
}

.automotive-list .automotive-item::before {
    background-color: #F54949;
}

/* 반응형 디자인 */
@media (max-width: 960px) {
    .businessArea {
        width: 90%; /* 너비를 더 유동적으로 */
    }

    .card {
        width: 100%; /* 카드가 한 줄로 나란히 쌓이도록 */
        max-width: 100%; /* 최대 너비 제한을 해제 */
    }

    h2 {
        font-size: 1.3rem; /* 제목 크기를 조금 줄임 */
        width: 100%; /* 제목이 100% 너비를 차지하도록 */
        margin: 0 auto 20px; /* 가운데 정렬 및 아래쪽 여백 */
    }

    .businessArea li {
        font-size: 16px; /* 리스트 항목 크기를 줄임 */
        margin-top: 10px; /* 리스트 항목 간의 간격을 줄임 */
    }

    .businessArea li::before {
        width: 15px; /* 리스트 앞 원의 크기를 줄임 */
        height: 15px; /* 리스트 앞 원의 크기를 줄임 */
    }
}