/* BASIC css start */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Pretendard Variable', Pretendard, sans-serif;
    color: #333;
    background-color: #f9f9f9;
    line-height: 1.6;
    scroll-behavior: smooth; /* 부드러운 스크롤 효과 */
}

header {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 중앙에 배치 */
    align-items: center;
    text-align: center;
    color: white;
    overflow: hidden; /* 패럴랙스 효과를 위해 오버플로우 숨기기 */
    padding-bottom: 20vh; /* 텍스트가 너무 아래로 내려가지 않도록 패딩 추가 */
}

header img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: transform 0.3s ease-out; /* 스크롤 시 부드러운 변환을 위해 트랜지션 추가 */
}

header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 다크 오버레이 */
    z-index: 1;
}

header .nav-wrapper {
    position: fixed;
    height: 60px;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    background: transparent; /* 초기 배경색 투명 */
    z-index: 1000; /* z-index 값 증가 */
    transition: background 0.3s ease; /* 배경색 변경 애니메이션 */
}

header .nav-wrapper.scrolled {
    background: rgba(0, 0, 0, 0.5); /* 스크롤 시 배경색 변경 */
}

header .dgrlogo {
    flex: 0 0 auto;
}

header .logo {
    height: 40px; /* 로고 크기 조정 */
    width: auto; /* 비율에 맞게 가로 길이를 자동 조정 */
    margin-left: 23%;
    margin-top: 8px;
}

header nav {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* 네비게이션 항목을 우측 정렬 */
    margin-right: 14%;
}

header nav ul {
    list-style: none;
    display: flex;
    gap: 40px;
    align-items: center; /* 중간에 배치되도록 설정 */
}

header nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.2em;
}

header .container {
    z-index: 2;
    padding: 0 20px;
}

header h1 {
    font-family: 'Pretendard Variable', Pretendard, sans-serif;
    font-size: 72px; /* 48포인트로 줄임 */
    font-weight: 700; /* 폰트 무게 700 */
    color: #ffffff; /* 하얀색 글자 */
    margin-bottom: 20px;
}

.scroll-down {
    position: absolute;
    bottom: 100px; /* 하단에서 40px 위로 올리기 */
    left: 50%;
    transform: translateX(-50%);
    animation: blink 3s infinite, moveDownUp 2s infinite;
    cursor: pointer; /* 마우스를 가져다 댔을 때 커서가 포인터로 변환 */
    z-index: 3; /* 다른 요소들 위에 표시되도록 z-index 설정 */
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes moveDownUp {
    0% { transform: translateX(-50%) translateY(-10px); }
    50% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-10px); }
}

.scroll-down a img {
    width: 30px; /* 화살표 이미지 크기 조절 */
    height: auto;
}

main {
    padding: 40px 0;
    background-color: white;
}

main .container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
}

main .container h1 {
    font-family: 'Pretendard Variable', Pretendard, sans-serif; /* 글꼴 설정 추가 */
    font-size: 70px; 
    font-weight: 700; /* 폰트 무게 700 */
    color: #000000; /* 검은색 글자 */
    margin-top: 30px; /* margin-top 30px */
    margin-bottom: 30px; 
}

main .container h4 {
    font-family: 'Pretendard Variable', Pretendard, sans-serif; /* 글꼴 설정 추가 */
    font-size: 35px; /* 글자 크기 35px */
    font-weight: 400; /* 폰트 무게 400 */
    color: #666666; /* 회끼가 도는 검은색 */
    margin-bottom: 20px;
}

.card-container {
    display: grid; /* Grid 레이아웃 사용 */
    gap: 20px; /* 카드 사이의 간격 */
    grid-template-columns: repeat(5, 1fr); /* 네 개의 열로 구성 */
    margin-top: 20px;
    justify-content: center; /* 카드들을 중앙에 배치 */
    margin-bottom: 50px;
}

.card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 500px; /* 카드 높이를 증가시켜 세로로 길게 설정 */
    width: 300px; /* 카드 너비를 300px로 고정 */
    position: relative; /* 텍스트를 이미지 위에 겹치기 위해 추가 */
    overflow: hidden; /* 이미지가 카드 밖으로 나가지 않도록 설정 */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지를 카드에 맞게 채우기 */
    position: absolute; /* 이미지가 카드 안에 고정되도록 설정 */
    top: 0;
    left: 0;
    z-index: 0; /* 이미지가 텍스트 뒤에 위치하도록 설정 */
}

.card-text {
    position: relative;
    z-index: 1; /* 텍스트가 이미지 위에 표시되도록 설정 */
    color: white;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5); /* 텍스트 배경 투명도 설정 */
    border-radius: 16px;
}

.card h2 {
    font-family: 'Pretendard Variable', Pretendard, sans-serif; /* 글꼴 설정 */
    font-size: 22px; /* 글자 크기 */
    font-weight: 600; /* 폰트 무게 */
    color: #ffffff; /* 흰색 글자 */
    margin-bottom: 10px;
}

.card h3 {
    font-family: 'Pretendard Variable', Pretendard, sans-serif; /* 글꼴 설정 */
    font-size: 16px; /* h3 크기 설정 */
    font-weight: 600; /* 폰트 무게 */
    color: #ffffff; /* 흰색 글자 */
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .card-container {
        grid-template-columns: 1fr; /* 작은 화면에서는 카드가 한 줄로 배치되도록 설정 */
    }
}

.stats {
    position: relative; /* position을 relative로 설정하여 자식 요소를 절대 위치로 배치 가능 */
    background-color: #111;
    color: #fff;
    padding: 60px 20px;
    text-align: center;
    height: 100vh; /* overlay와 같은 높이 설정 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 중앙 배치 */
    align-items: center; /* 중앙 배치 */
    background-size: cover; /* 배경 이미지 크기 조정 */
    background-position: center; /* 배경 이미지 위치 중앙 */
    font-family: 'Pretendard Variable', Pretendard, sans-serif; /* 글꼴 설정 추가 */
}

.stats img {
    position: absolute; /* 이미지를 절대 위치로 배치 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.5; /* overlay 효과를 위해 투명도 설정 */
}

.stats-container {
    max-width: 1500px;
    margin: 0 auto;
    z-index: 1; /* 텍스트가 이미지 위에 오도록 설정 */
    padding: 20px; /* 컨테이너 내부 여백 조정 */
}

.stats h2 {
    font-family: 'Pretendard Variable', Pretendard, sans-serif;
    font-size: 40px; /* 글자 크기 64px */
    margin-bottom: 20px;
    color: #ffffff; /* h2 글자 색상 흰색 */
}

.stats-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 40px;
    max-width: 1500px; /* 전체 너비 제한 (필요에 따라 조정) */
    margin-left: auto;
    margin-right: auto;
}

.stats-grid > div {
    flex: 0 1 22%;
    margin: 30px;
    min-width: 200px;
    text-align: center;
    margin: 15px; /* 상하좌우 여백 추가 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 세로 중앙 정렬 */
    height: 120px; /* 고정 높이 설정 (필요에 따라 조정) */
}

.stats-label {
    font-weight: 500;
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 10px; /* label과 value 사이 간격 */
}

.stats-value {
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-size: 57px;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
}

.stats-value span {
    margin-left: 5px; /* 글자와 + 기호 사이의 여백 설정 */
    display: inline-block;
}

.date {
    margin-top: 40px;
    font-size: 1em;
    color: #bbb;
}

/* Transition Section */
.transition {
    height: 100vh;
    background: linear-gradient(to bottom, transparent, black);
    opacity: 1;
    transition: opacity 2s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.transition.fade-in {
    animation: fadeIn 2s forwards;
}

.transition.fade-out {
    animation: fadeOut 2s forwards;
}

@media (max-width: 768px) {
    .stats-grid > div {
        flex: 0 1 45%; /* 태블릿 크기에서는 2개씩 배치 */
    }
}

@media (max-width: 480px) {
    .stats-grid > div {
        flex: 0 1 100%; /* 모바일 크기에서는 1개씩 배치 */
    }
}

/* BASIC css end */