.div_inner {
        border: 1px solid #ddd; /* 더 부드러운 경계선 */
        border-radius: 5px; /* 경계선 모서리를 약간 더 둥글게 */
        background-color: #f9f9f9; /* 약간의 배경색 추가로 부드러운 느낌 */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 약간의 그림자 효과로 입체감 추가 */
        padding: 15px; /* 여백 추가로 콘텐츠 여유롭게 배치 */
        margin-top: 20px; /* 상단 메뉴와 약간의 간격 추가 */
        z-index: 999;
    }

    .top_menu {
        display: flex;
        justify-content: flex-start; /* 메뉴를 왼쪽 정렬 */
        align-items: center;
        white-space: nowrap;
        padding: 0;
        margin: 0;
        list-style: none;
        font-size: 0;

        overflow: visible; /* 변경: overflow-x: auto에서 overflow: visible로 */
        position: relative; /* 상대적 위치 설정 */
        width: 1280px; /* 메뉴 시작점이 1280px에서 시작 */
        margin: 0 auto;
    }

    .top_menu > li {
        position: relative; /* 2차 메뉴가 이 항목을 기준으로 붙도록 설정 */
        display: inline-block;
        margin-left: 15px;
    }

    .top_menu a {
        display: inline-block;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: 500;
        color: #000; /* 검은색 글씨 */
        text-align: center;
        text-decoration: none;

        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .top_menu a:hover {
        background-color: #f0f0f0; /* hover 시 밝은 회색 */
        color: #000;
        text-decoration: none;
                border-radius: 5px;
    }

    .top_menu a.active {
        color: #4286f4; /* .active일 때 글자 색 변경 */
        border-bottom: 2px solid #4286f4; /* 밑줄 대신 border-bottom 사용 */
        padding-bottom: 8px; /* 텍스트와 밑줄 사이의 간격을 위해 패딩 추가 */
    }

    .top_menu li + li {
        margin-left: 15px; /* 항목 간 간격 */
    }

    /* 2차 메뉴 (드롭다운) */
    .top_menu ul {
        display: none;
        position: absolute; /* 부모 li 기준으로 절대 위치 */
        top: 100%; /* 부모 메뉴 바로 아래에 위치 */
        left: 0;
        list-style: none;
        margin: 0;
        padding: 10px;
        background-color: #fff; /* 2차 메뉴 하얀색 배경 */
        border-radius: 10px;
        z-index: 9999; /* 상위 레이어에 나타나도록 설정 */
        min-width: 180px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

    }

    .top_menu li:hover > ul {
        display: block;
    }

    .top_menu ul li {
        padding: 0;
        margin: 8px 0;
    }

.top_menu ul a {
    font-size: 14px;
    color: #000; /* 검은색 글씨 */
    border-radius: 5px;
    transition: background-color 0.3s ease;
    width: 100%;
    text-align: left; /* 왼쪽 정렬 */
    box-sizing: border-box; /* 패딩과 보더가 width에 포함되도록 설정 */
}

.top_menu ul a:hover {
    background-color: #f0f0f0;
    color: #000;
    width: 100%;
}


@media (max-width: 1279px) {
    .top_menu {
        justify-content: flex-start;
        width: 100%; /* 모바일에서는 메뉴가 100% 너비로 변경 */
        overflow-x: auto;
        overflow-y: visible;
    }

    .top_menu > li {
        flex-shrink: 0;
    }

    .top_menu a {
        padding: 8px 15px;
        font-size: 14px;
    }

    .top_menu ul {
        display: none;
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        background-color: #fff; /* 모바일에서도 하얀색 배경 */
        border-radius: 0;
        box-shadow: none;
        z-index: 9999;
    }

    .top_menu ul li {
        text-align: left;
    }

    .top_menu ul a {
        padding: 12px 20px;
    }
}


.footer_text {
    background-color: #f2f2f2; /* 부드러운 배경색 */
    padding: 20px 0; /* 위아래 여백 */
    text-align: center; /* 가운데 정렬 */
    font-size: 14px; /* 적당한 폰트 크기 */
    color: #666; /* 부드러운 글자 색상 */
    border-top: 1px solid #ddd; /* 위쪽에 경계선 추가 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); /* 위쪽에 가벼운 그림자 효과 */
}

.footer_text a {
    color: #4286f4; /* 링크 색상 */
    text-decoration: none; /* 밑줄 제거 */
    font-weight: bold; /* 강조 */
    margin: 0 5px;
}

.footer_text a:hover {
    text-decoration: underline; /* 호버 시 밑줄 추가 */
    color: #55aacc; /* 호버 시 약간 더 어두운 색상 */
}