/* 전체 페이지 스타일 */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif; /* 이쁘고 깔끔한 폰트 설정 */
}

/* 헤더 스타일 */
header {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1000;
    background-color: #0057B7;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 헤더 컨테이너 */
.header-container {
    padding-left: 1vw;
    padding-right: 1.5vw;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

/* 로고 */
.logo a {
    display: block;
}

.logo img {
    height: 32px;
}

/* 햄버거 메뉴 버튼 스타일 */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 1001;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 3px 0;
    transition: 0.3s ease;
}

/* 햄버거 버튼의 바 애니메이션 */
.menu-toggle.open .bar:nth-child(1) {
    transform: rotate(45deg) translateY(6px);
}

.menu-toggle.open .bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open .bar:nth-child(3) {
    transform: rotate(-45deg) translateY(-6px);
}

/* 모바일 메뉴 스타일 */
.header-menu {
    display: flex;
    padding-left: 15px;
}

.header-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

/* 기본 메뉴 스타일 */
.header-menu ul li {
    padding: 0 15px;
}

/* 모바일 화면에서 햄버거 메뉴 표시 */
@media (max-width: 768px) {
    .header-menu {
        display: flex;
        position: absolute;
        top: calc(100% - 10px);
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.9); /* 반투명한 흰색 배경 */
        flex-direction: column;
        align-items: center;
        padding: 0;
        max-height: 500px; /* 충분한 높이 설정 */
        overflow: hidden;
        transform: scaleY(0); /* 축소된 상태로 숨김 */
        transform-origin: top; /* 위쪽을 기준으로 스케일 */
        opacity: 0;
        transition: transform 0.5s ease, opacity 0.5s ease; /* 부드러운 애니메이션 */
    }

    .header-menu.show {
        transform: scaleY(1); /* 원래 크기로 펼침 */
        opacity: 1;
    }

    .menu-toggle {
        display: flex;
    }

    .header-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        flex-direction: column;
        width: 100%;
    }

    .header-menu ul li a {
        padding: 10px 0 !important; /* 넉넉한 세로 간격 추가 */
        text-align: center;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 구분선 추가 */
    }

    .header-menu ul li:last-child {
        border-bottom: none; /* 마지막 항목에는 구분선 제거 */
    }

    .header-menu ul li a {
        font-size: 1.5rem;
        color: black !important; /* 메뉴 글자색을 검정색으로 설정 */
        width: 100%;
        display: block;
        transition: color 0.3s ease, background-color 0.3s ease; /* 부드러운 색상 전환 */
    }

    .header-menu ul li a:hover {
        color: #fff; /* 마우스 오버 시 흰색 */
        background-color: #0057B7; /* 마우스 오버 시 배경색 어두운 회색 */
    }
}


/* 링크 스타일 */
.header-menu ul li a {
    text-decoration: none;
    color: white; /* 기본 검정색 */
    transition: color 0.3s;
}

.header-menu ul li:hover {
    color: white; /* 마우스 오버 시 흰색 */
}

/* 작은 모바일 기기 (576px 이하) */
@media (max-width: 576px) {
    .header-menu ul li {
        padding: 0 6px;
    }
}

/* 일반 모바일 기기 (577px ~ 768px) */
@media (min-width: 577px) and (max-width: 768px) {
    .header-menu ul li {
        padding: 0 8px;
    }
}

/* 태블릿 (769px ~ 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    .header-menu ul li {
        padding: 0 12px;
    }
}

/* 작은 데스크탑 (993px ~ 1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
    .header-menu ul li {
        padding: 0 15px;
    }
}

/* 큰 데스크탑 (1201px 이상) */
@media (min-width: 1201px) {
    .header-menu ul li {
        padding: 0 18px;
    }
}

/* 버튼 스타일 */
.contact-button a {
    text-decoration: none;
    color: white;
    background-color: black;
    padding: 10px 20px;
    transition: background-color 0.3s;
}

.contact-button a:hover {
    background-color: #0057B7;
}

/* 추가 스타일 */
header {
    height: 9.2vh !important;
}

header .logo img {
    max-height: 69% !important;
    height: auto !important;
}

header .header-menu ul {
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

header .header-menu ul li {
    margin: 0;
}

header .header-menu ul li a {
    font-size: 2.07vh !important;
    white-space: nowrap;
}

/* 작은 모바일 기기 (576px 이하) */
@media (max-width: 576px) {
    header {
        height: 11.5vh !important;
    }

    header .logo img {
        max-height: 57.5% !important;
    }

    header .header-menu ul li a {
        font-size: 1.75vh !important;
    }
}

/* 일반 모바일 기기 (577px ~ 768px) */
@media (min-width: 577px) and (max-width: 768px) {
    header {
        height: 10.35vh !important;
    }

    header .logo img {
        max-height: 63.25% !important;
    }

    header .header-menu ul li a {
        font-size: 2.0vh !important;
    }
}

/* 태블릿 (769px ~ 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    header {
        height: 9.2vh !important;
    }

    header .logo img {
        max-height: 69% !important;
    }

    header .header-menu ul li a {
        font-size: 2.07vh !important;
    }
}

/* 작은 데스크탑 (993px ~ 1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
    header {
        height: 8.05vh !important;
    }

    header .logo img {
        max-height: 74.75% !important;
    }

    header .header-menu ul li a {
        font-size: 1.84vh !important;
    }
}

/* 큰 데스크탑 (1201px 이상) */
@media (min-width: 1201px) {
    header {
        height: 6.9vh !important;
    }

    header .logo img {
        max-height: 80.5% !important;
    }

    header .header-menu ul li a {
        font-size: 1.61vh !important;
    }
}

.header-container {
    height: 100%;
    font-size: 1.2vh;
}

.header-container .logo {
    height: 100%;
}

.header-container .logo a {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-container .logo a img {
    height: 50%;
    width: auto;
    object-fit: contain;
}