@charset "utf-8";

/* =========================
   기본 설정
========================= */
#sh_top_menu_wrapper,
#sh_top_menu_wrapper * {
    box-sizing: border-box;
}

#sh_top_menu_wrapper ul,
#sh_top_menu_wrapper li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sh_top_menu_wrapper a {
    text-decoration: none;
}

/* 전체 메뉴 */
#sh_top_menu_wrapper {
    position: relative;
    width: 100%;
    max-width: 1070px;
    margin: 0 auto;
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
}

/* 로고 */
#sh_top_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    margin:10px 0;
}

#sh_top_logo img {
    display: block;
    max-width: 100%;
}

/* =========================
   검은색 대메뉴
========================= */
#top_menu_wrapper {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 50px;
    background: #000;
    overflow: visible;
}

#top_menu {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 50px;
    padding: 0 200px;
}

/* 파란색 소메뉴 배경 바 */
#top_menu::after {
    content: "";
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 1;

    width: 100%;
    height: 30px;

    background: #00a4cf;

    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    visibility: hidden;

    transition:
        transform 0.3s ease,
        opacity 0.2s ease,
        visibility 0.3s;
}

/* 대메뉴에 마우스를 올리면 파란색 바 내려오기 */
#top_menu:has(> .depth1:hover)::after {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
}

/* 대메뉴 항목 */
#top_menu > .depth1 {
    position: relative;
    height: 50px;
    text-align: center;
}

/* 대메뉴 링크 */
#top_menu > .depth1 > a {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 50px;
    padding: 0 25px;

    color: #fff;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;

    transition: color 0.2s ease;
}

/* 대메뉴 활성 색상 */
#top_menu > .depth1:hover > a {
    color: #ffd34e;
}

/* =========================
   소메뉴
========================= */
#top_menu .sub_ul {
    position: absolute;
    top: 50px;
    left: 50%;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: max-content;
    min-width: max-content;
    height: 30px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, -8px);
    transition:
        transform 0.3s ease,
        opacity 0.2s ease,
        visibility 0.3s;
}

/* 해당 대메뉴의 소메뉴만 표시 */
#top_menu > .depth1:hover > .sub_ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

/* 소메뉴 항목 */
#top_menu .sub_ul > li {
    flex: 0 0 auto;
}

/* 소메뉴 링크 */
#top_menu .sub_ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 30px;
    padding: 0 13px;

    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;

    transition: color 0.2s ease;
}

/* 소메뉴 마우스 오버 */
#top_menu .sub_ul > li > a:hover {
    color: #fff36a;
}