/* 전체 페이지 스타일 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    max-width: 1024px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 텍스트 중앙 정렬 */
    margin-left: auto;
    margin-right: auto;
    /* 중앙 정렬 */
}


/* 헤더 */
.header {
    top: 0;
    left: 50%;
    /* 화면의 중앙으로 위치 */
    transform: translateX(-50%);
    /* 정확히 중앙으로 정렬 */
    z-index: 1000;
    /* 다른 요소들보다 위에 표시 */
    position: fixed;
    /* 헤더를 고정 */
    background-color: #063a67;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 1024px;
}

/* 회사 이름 */
.company-name {
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    /* 마우스 오버 시 손 모양 커서로 변경 */
}

/* 컨테이너 */
.container {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    max-width: 1024px;
}


/* 메뉴 섹션 */
.menu-container {
    position: fixed;
    /* 메뉴를 고정 */
    top: 60px;
    /* 헤더 높이에 맞게 위치 조정 */
    left: 50%;
    /* 화면의 중앙으로 위치 */
    transform: translateX(-50%);
    /* 정확히 중앙으로 정렬 */
    z-index: 999;
    /* 헤더보다 아래에 표시 */
    background-color: #ffffff;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* 메뉴가 컨테이너 밖으로 나가지 않도록 숨김 */
    width: 1024px;
    /* 메뉴 컨테이너의 너비 */
    max-width: 1024px;
    /* 메뉴 최대 너비 */

}

.menu-list {
    width: 934px;
    /* 기존 1124px에서 190px 줄임 (양 옆 화살표 90~100px 공간 확보) */
    background-color: #ffffff;
    display: flex;
    transition: transform 0.3s ease;
    max-width: 3000px;
    /* 메뉴 최대 너비 */

}

.menu-item {
    margin: 10px;
    padding: 5px 8px;
    background-color: #FFFFFF;
    color: #686868;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: bold;
    /* 글씨 굵게 설정 */
    max-width: 100%;
    width: 90px;
    /* 6개 메뉴가 보이도록 설정 */
    text-decoration: none;
    /* 기본적으로 밑줄 없애기 */
}

.menu-item:hover {
    color: #5872A5;
}

.menu-item.active {
    color: #FF0000;
    /* 어두운 파란색 */
    text-decoration: underline;
    /* 밑줄 추가 */
}




/* 서브 메뉴 섹션 */
.sub-menu-container {
    position: fixed;
    /* 메뉴를 고정 */
    top: 105px;
    /* 헤더 높이에 맞게 위치 조정 */
    left: 51%;
    /* 화면의 중앙으로 위치 */
    transform: translateX(-50%);
    /* 정확히 중앙으로 정렬 */
    z-index: 999;
    /* 헤더보다 아래에 표시 */
    align-items: center;
    justify-content: center;
    display: flex;
    overflow-x: auto;
    /* 메뉴가 넘칠 경우 가로 스크롤 허용 */
    overflow-y: hidden;
    width: 100%;
    /* 메뉴 컨테이너의 너비 */
    max-width: 1024px;
    /* 메뉴 최대 너비 */
    height: auto;
    scrollbar-width: none;
    /* Firefox - 스크롤바 숨김 */
    -ms-overflow-style: none;
    /* IE and Edge - 스크롤바 숨김 */

}

.sub-menu-container::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari - 스크롤바 숨김 */
}

.sub-menu-list {
    background-color: #FFFFFF;
    display: flex;
    transition: transform 0.3s ease;
}

.sub-menu-item {
    margin: 2px;
    padding: 1px 6px;
    background-color: #FFFFFF;
    color: #7A7A7A;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: normal;
    /* 글씨 굵게 설정  bold, normal*/
    max-width: 100%;
    width: 150px;
    /* 6개 메뉴 전체 표시: 6×(150+4+6)=960px */
    text-decoration: none;
    /* 기본적으로 밑줄 없애기 */
}

.sub-menu-item.active {
    color: #FF0000;
    /* 어두운 파란색 */
    text-decoration: underline;
    /* 밑줄 추가 */
}


.menu-name-container {
    position: absolute;
    /* 메뉴를 고정 */
    top: 150px;
    height: 80px;
    text-align: center;
    /* 메뉴명을 가운데 정렬 */
    margin: 20px 20px;
    /* 상하 여백 */
    font-size: 24px;
    /* 글자 크기 조정 */
    color: #000093;
    /* 글씨 색상 */
}

#current-menu-name {
    font-size: 16px;
    /* 글자 크기 조정 */
    font-weight: bold;
    /* 글씨 굵게 */
    color: #030066;
    /* 글씨 색상 */
    display: inline-block;
    /* span을 블록 요소처럼 취급하여 중앙 정렬되게 */
}


.menu-divider {
    position: absolute;
    /* 메뉴를 고정 */
    top: 180px;
    width: 1000px;
    height: 1px;
    background-color: #ccc;
    /* 메뉴와 이미지 사이에 선 */
    margin-top: 20px;

}



.arrow {

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 5px;
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow img {
    width: 30px;
    /* 원하는 크기로 조절 가능 */
    height: auto;
    display: block;
    transition: transform 0.2s ease;
}

.left {
    left: -5px;
}

.right {
    right: -5px;
}



/* 이미지 콘텐츠 */
.image-container {
    margin-top: 210px;
}

.image-container img {
    max-width: 100%;
    height: auto;
}




/* 작은 이미지 스타일 */
.small-images {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 100%;
}


.thumbnail {
    width: 66px;
    height: 50px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid #ddd;
    transition: transform 0.3s ease-in-out;
}

.thumbnail:hover {
    transform: scale(1.1);
    border-color: #007BFF;
}



/* 하단 텍스트 */
footer {
    background-color: #333;
    color: white;
    padding: 0;
    text-align: center;
    margin-top: 10px;
    max-width: 100%;
    width: 100%;

    height: 60px;
    display: flex;
    align-items: center;
    /* 수직 중앙 정렬 */
    justify-content: center;
    /* 수평 중앙 정렬 */
}

/*  오른쪽 하단 따라다니는 아이콘 */
.floating-icons {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.floating-icons a {
    display: block;
    width: 65px;
    height: 65px;
    overflow: visible;
    position: relative;
}

.floating-icons a img {
    width: 65px;
    height: 65px;
    transition: transform 0.3s ease;
    transform-origin: right center;
    cursor: pointer;
}

.floating-icons a img:hover {
    transform: scaleX(2.0);
    /* 기본은 2배 */
    z-index: 10;
}

/* ✅ 마지막 아이콘만 별도 처리 */
.floating-icons a:nth-child(5) img:hover {
    transform: scaleX(1.5);
    /* 1.3배만 확대 */
}






/* 팝업 스타일 */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    /* 어두운 배경 */
    z-index: 999;
}

.popup-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.popup-content h2 {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
}

.popup-content p {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}

.phone-number {
    font-size: 18px;
    color: green;
    /* 전화번호는 녹색 */
}

.popup-content button {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.popup-content button:hover {
    background-color: #45a049;
}


@media screen and (max-width: 768px) {

    /* 컨테이너 */
    .container {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        max-width: 100%;
    }

    /* 회사 이름 */
    .company-name {
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
        /* 마우스 오버 시 손 모양 커서로 변경 */
        padding: 10px;
    }


    body {
        padding: 0 2px 0 2px;
        /* top, right, bottom, left */
        width: 100%;
        max-width: 100%;
    }

    .header {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
        font-size: 14px;
        width: 100%;
        max-width: 100%;
    }



    .menu-container,
    .sub-menu-container {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 20px;
        display: block;
        white-space: nowrap;

        /* 스크롤바 숨김 처리 */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
    }

    .sub-menu-container::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }


    .menu-list,
    .sub-menu-list {
        background-color: #FFFFFF;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: max-content;
        display: flex;
    }

    .menu-item,
    .sub-menu-item {
        flex: 0 0 auto;
        width: auto;
        padding: 15px 10px 0 10px;
        /* top, right, bottom, left */
        font-size: 17px;
        white-space: nowrap;
        display: flex;
        /* 내부 내용 정렬 위해 flex 사용 */
        align-items: center;
        /* 수직 중앙 정렬 */
        justify-content: center;
        /* 수평 중앙 정렬 */
        line-height: 1.4;
        /* 줄 높이 통일 */
        font-weight: normal;
        background-color: #FFFFFF;
        color: #7A7A7A;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
    }


    .menu-name-container {
        top: 160px;
        font-size: 20px;
        margin: 0px 10px;
        /* 상하 여백 */
        height: auto;
    }

    .menu-divider {
        top: 200px;
        width: 90%;
    }

    .image-container {
        margin-top: 220px;
        padding: 0 5px;
    }

    .image-container img {
        max-width: 100%;
        height: auto;
    }

    .small-images {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        max-width: 80%;
        margin: 0 auto;
        /* ⭐ 가운데 정렬 핵심 */
    }


    .thumbnail {
        width: 60px;
        height: 45px;
    }

    .footer {
        font-size: 12px;
        padding: 8px;
        max-width: 100%;
    }

    .floating-icons {
        right: 10px;
        bottom: 10px;
    }

    .floating-icons a {
        width: 50px;
        height: 50px;
    }

    .floating-icons a img {
        width: 50px;
        height: 50px;
    }

    .floating-icons a img:hover {
        transform: scaleX(1.0);
        /* 확대 비율 줄임 */
    }

    /* ✅ 마지막 아이콘만 별도 처리 */
    .floating-icons a:nth-child(5) img:hover {
        transform: scaleX(1.0);
        /* 1.3배만 확대 */
    }


    .popup-content {
        width: 90%;
        padding: 15px;
    }

    .popup-content h2 {
        font-size: 16px;
    }

    .popup-content p,
    .phone-number,
    .popup-content button {
        font-size: 14px;
    }


    .arrow {
        display: none;
    }


}