* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

body {
    background-color: #b5b5b5; /* 기본 배경색을 b5b5b5로 설정 */
    display: flex;
    flex-direction: column;
}

header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background: transparent; /* 초기 배경은 투명하게 설정 */
    transition: background-color 0.3s; /* 배경 색 변화에 애니메이션 추가 */
}

    header.scrolled {
        background: rgba(0, 0, 0, 1.0); /* 스크롤 시 배경색을 검정으로 변경 */
    }

    header .container {
        width: 1280px; /* 내부 요소의 최대 너비를 1280px로 설정 */
        display: flex; /* 내부 요소들을 flexbox로 배치 */
        justify-content: space-between; /* 로고와 메뉴 사이에 공간 추가 */
        align-items: center; /* 로고와 메뉴를 수직 중앙 정렬 */
    }

.logo {
    height: 60px;
    transition: filter 0.3s; /* 색상 반전 효과 부드럽게 */
}

    .logo.inverted {
        filter: invert(1); /* 색상 반전 */
    }

nav {
    display: flex; /* 메뉴를 flexbox로 설정 */
    align-items: center; /* 메뉴 항목 세로 중앙 정렬 */
}

.additional-images {
    display: flex; /* 가로 방향으로 정렬 */
    justify-content: space-between; /* 여백을 자동으로 추가 */
    margin-top: 20px; /* 상단 여백 추가 */
}

.additional-image {
    display: flex; /* 각 추가 이미지 내부 요소들을 flex로 설정 */
    flex-direction: column; /* 세로 방향으로 배치 */
    align-items: center; /* 가운데 정렬 */
    margin: 0 20px; /* 좌우 여백 추가 */
}

.additional-side-image {
    max-width: 150px; /* 이미지의 최대 너비 설정 (필요에 따라 조정 가능) */
    height: auto; /* 비율 유지 */
    margin-bottom: 10px; /* 이미지와 텍스트 사이의 여백 추가 */
}

.image-title {
    display: block; /* 제목을 블록으로 표시 */
    margin-top: 5px; /* 제목 위쪽 여백 */
    font-weight: bold; /* 제목 두껍게 */
    color: #333; /* 제목 색상 */
}

nav a {
    color: #fff;
    margin-left: 20px;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s, color 0.3s; /* 색상 전환 추가 */
}

    nav a.inverted {
        color: white; /* 반전된 색상 */
    }

    nav a:hover {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 5px;
    }

.pagination {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #b5b5b5;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

    .dot.active {
        background-color: #b4b4b4;
        transform: scale(1.5);
    }

section {
    margin: 0; /* 섹션 간 여백 제거 */
    padding: 0; /* 섹션 내 여백 제거 */
}

    /* 이미지에 대한 스타일 */
    section img {
        max-width: 100%; /* 이미지의 최대 너비를 100%로 설정 */
        height: auto; /* 높이는 자동으로 조정 */
        object-fit: cover; /* 이미지 비율을 유지하면서 영역을 채움 */
    }

/* 모바일 화면에서 이미지 스타일 */
@media (max-width: 768px) {
    section {
        display: flex;
        justify-content: center; /* 가로 중앙 정렬 */
        align-items: center; /* 세로 중앙 정렬 */
        overflow: hidden; /* 영역 밖으로 나간 내용 숨김 */
        height: 100vh; /* 전체 화면 높이 사용 */
    }

        section img {
            width: 100%; /* 너비를 100%로 설정하여 화면을 가득 채움 */
            height: auto; /* 비율 유지 */
            max-height: none; /* 최대 높이 제한 제거 */
            object-fit: cover; /* 이미지가 영역을 가득 채움 */
        }
}

/* 마지막 섹션의 여백과 높이 조정 */
section:last-of-type {
    height: 90vh; /* 마지막 section 높이를 90%로 설정 */
    width: 100%; /* 너비는 100% 유지 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin-bottom: 0; /* 아래 여백 제거 */
}

footer {
    text-align: center;
    margin: 0; /* 푸터의 여백 제거 */
    padding: 50px;
    background: #fff; /* 푸터 배경색: 흰색 */
    color: #fff;
    width: 100%;
    position: relative; /* footer를 상대 위치로 설정 */
}

.footer-container {
    max-width: 1440px; /* 최대 너비 설정 */
    margin: 0 auto; /* 가운데 정렬 */
}

.footer-logo {
    display: flex; /* 수평 정렬을 위해 flex 사용 */
    flex-direction: column; /* 세로 방향으로 배치 */
    align-items: center; /* 가운데 정렬 */
}

.footer-links {
    margin-bottom: 20px; /* footer-links 아래에 여백 추가 */
    display: flex; /* 수평 정렬을 위한 flexbox 사용 */
    justify-content: center; /* 가운데 정렬 */
    align-items: center; /* 수직 가운데 정렬 */
    gap: 15px; /* 링크 간격 */
}

.footer-info {
    text-align: center; /* 정보 텍스트를 가운데 정렬 */
}

.footer-links {
    margin-bottom: 20px; /* footer-links 아래에 여백 추가 */
    display: flex; /* 수평 정렬을 위한 flexbox 사용 */
    justify-content: center; /* 가운데 정렬 */
    align-items: center; /* 수직 가운데 정렬 */
    gap: 15px; /* 링크 간격 */
    font-size: 18px; /* 글자 크기 설정 */
    font-weight: bold;
}

    .footer-links a:hover {
        background: rgba(0, 0, 0, 0.2); /* 마우스 오버 시 배경색 변화 */
    }

    .footer-links span {
        color: black !important; /* 색상을 강제로 검정색으로 설정 */
    }

/* 팝업 스타일 */
.popup {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
    z-index: 1001; /* 헤더보다 위에 위치 */
}

.popup-content {
    background-color: white;
    margin: 15% auto; /* 중앙 정렬 */
    padding: 30px;
    border-radius: 10px; /* 모서리를 둥글게 설정 (10px) */
    width: 80%; /* 너비 조정 */
    max-width: 800px; /* 최대 너비 설정 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* 그림자 효과 */
}

    .popup-content h3 {
        margin-bottom: 20px; /* 원하는 만큼의 하단 여백 추가 */
    }

.popup-inner {
    display: flex; /* 수평 방향으로 배치 */
    flex-direction: column; /* 세로 방향으로 배치 */
    align-items: center; /* 가운데 정렬 */
    gap: 20px; /* 이미지 컨테이너와 추가 이미지 사이의 간격 */
}

.popup-bottom-space {
    height: 30px; /* 원하는 만큼의 높이 추가 */
    /* 원하는 추가 스타일이 있다면 여기에 추가 */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}