body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* 슬라이더 컨테이너 */
.slider {
    position: relative;
    width: 100%;
    max-height: 600px; /* 슬라이더의 최대 높이 */
    overflow: hidden;
    
}

.slides {
    display: flex;
    transition: transform 0.5s ease; /* 슬라이드 전환 애니메이션 */
}

.slide {
    flex: 0 0 100%; /* 한 번에 하나의 슬라이드만 표시 */
    height: 600px;
    position: relative;
    background-size: cover; /* 배경 이미지 전체 채우기 */
    background-position: center;
    background-repeat: no-repeat;
}

/* 텍스트 오버레이 */
.text-overlay {
    position: absolute;
    bottom: 30px; /* 화면 아래에서의 간격 */
    left: 50px; /* 왼쪽에서의 간격 */
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); /* 텍스트 그림자 */
}

.text-overlay h1 {
    font-size: 2.5rem; /* 큰 제목 글씨 크기 */
    margin: 0;
}

.text-overlay h2 {
    font-size: 1.8rem; /* 중간 제목 글씨 크기 */
    margin: 10px 0;
}

.text-overlay p {
    font-size: 1rem; /* 본문 글씨 크기 */
    margin: 0;
}

/* 슬라이더 네비게이션 (하단 점) */
.navigation {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px; /* 점 간격 */
}

.dot {
    width: 12px; /* 점 크기 */
    height: 12px; /* 점 크기 */
    background-color: rgba(255, 255, 255, 0.6); /* 기본 점 색상 */
    border-radius: 50%; /* 동그란 모양 */
    cursor: pointer;
    transition: background-color 0.3s ease; /* 점 색상 변경 애니메이션 */
}

.dot.active {
    background-color: rgba(255, 255, 255, 1); /* 활성화된 점 색상 */
}

/* 반응형 슬라이더 */
@media (max-width: 768px) {
    .slider {
        max-height: 400px; /* 화면이 작을 때 슬라이더 높이 축소 */
    }

    .slide {
        height: 400px; /* 슬라이드 높이 축소 */
    }

    .text-overlay h1 {
        font-size: 1.8rem; /* 큰 제목 글씨 크기 축소 */
    }

    .text-overlay h2 {
        font-size: 1.2rem; /* 중간 제목 글씨 크기 축소 */
    }

    .text-overlay p {
        font-size: 0.9rem; /* 본문 글씨 크기 축소 */
    }

    .dot {
        width: 10px; /* 점 크기 축소 */
        height: 10px; /* 점 크기 축소 */
    }
}

@media (max-width: 480px) {
    .text-overlay {
        bottom: 20px; /* 텍스트와 화면 아래 간격 축소 */
        left: 20px; /* 텍스트와 화면 왼쪽 간격 축소 */
    }

    .text-overlay h1 {
        font-size: 1.5rem; /* 큰 제목 글씨 크기 축소 */
    }

    .text-overlay h2 {
        font-size: 1rem; /* 중간 제목 글씨 크기 축소 */
    }

    .text-overlay p {
        font-size: 0.8rem; /* 본문 글씨 크기 축소 */
    }
}

.product-showcase {
    padding: 20px;
    background-color: #eeeeee;
    text-align: center; /* 텍스트를 가운데 정렬 */
}

.product-showcase h1 {
    font-size: 2rem;
    color: #333;
}

.product-showcase p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 20px;
}

/* 제품 그리드 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 0 20px;
    justify-content: center; /* 모든 카드가 중앙 정렬되도록 설정 */
}
/* 제품 카드 */
.product-card {
    position: relative;
    background-size: cover;
    background-position: center;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #ffffff;
}

/* 기본 텍스트 스타일 */
.product-card h2 {
    position: absolute;
    top: 50%; /* 카드 중앙에 배치 */
    left: 50%; /* 카드 중앙에 배치 */
    transform: translate(-50%, -250%); /* 정확한 가운데 정렬 */
    font-size: 1.5rem;
    color: white; /* 기본 글자 색상을 흰색으로 설정 */
    text-shadow: none; /* 기존 그림자 제거 */
    transition: color 0.3s ease, -webkit-text-stroke 0.3s ease;
    z-index: 2; /* 오버레이 위에 위치 */
}

/* 오버레이 스타일 */
.product-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(135, 206, 250, 0.5); /* 투명한 하늘색 */
    opacity: 0; /* 기본 상태에서 투명 */
    transition: opacity 0.3s ease;
    z-index: 1; /* 텍스트 아래에 위치 */
}

/* 마우스 오버 시 효과 */
.product-card:hover .overlay {
    opacity: 1; /* 하늘색 오버레이 활성화 */
}

.product-card:hover h2 {
    color: white; /* 마우스 오버 시 글자 색상을 흰색으로 변경 */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); /* 흰색 글자에 그림자 추가 */
}
.diagram-section {
    padding: 40px;
    background-color: #f5f5f5;
    border-radius: 10px;
    margin: 20px auto;
    max-width: 1200px;
}

.content-container {
    display: flex;
    gap: 40px; /* 왼쪽과 오른쪽 사이 간격 */
    justify-content: center; /* 콘텐츠를 가운데 정렬 */
    align-items: flex-start; /* 상단 정렬 */
    flex-wrap: wrap; /* 작은 화면에서 줄 바꿈 */
}

.content-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    padding: 20px;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    box-sizing: border-box;
}

.pie-chart {
    width: 100%;
    max-width: 300px; /* 다이어그램 크기 제한 */
    height: auto;
    margin: 0 auto; /* 다이어그램 가운데 정렬 */
}

.description {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.description h2 {
    text-align: center; /* 설명 제목 가운데 정렬 */
}

.description-block {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-box {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.line-chart-container canvas {
    width: 100%; /* 선 그래프가 컨테이너에 맞게 */
    height: auto;
}

.line-chart-container h2 {
    text-align: center; /* 제목 가운데 정렬 */
}

/* Customers Section */
.customers-section {
    background-color: #ffffff; /* 흰색 배경 */
    padding: 20px 0;
    text-align: center;
}

.customers-section h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #333;
}

.customer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* 이미지 간격 */
    flex-wrap: wrap; /* 반응형: 작은 화면에서 줄바꿈 */
}

.customer-logos img {
    max-width: 150px; /* 이미지 최대 너비 */
    height: auto;
    object-fit: contain; /* 이미지가 컨테이너에 맞게 조정 */
}







/* 반응형 */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center; /* 밑에 2개도 중앙 정렬 */
    }
}

@media (max-width: 768px) {
    .content-container {
        flex-direction: column; /* 작은 화면에서는 세로 배치 */
        align-items: center; /* 콘텐츠 가운데 정렬 */
    }

    .diagram-container,
    .line-chart-container {
        max-width: 100%; /* 작은 화면에서 너비 제한 해제 */
    }
}

@media (max-width: 768px) {
    .customer-logos img {
        max-width: 100px; /* 이미지 크기 축소 */
    }
}

@media (max-width: 480px) {
    .customers-section h2 {
        font-size: 1.5rem; /* 제목 크기 축소 */
    }
}