#header {
    width: 100%;
    color: var(--fc-white);
    font-size: var(--fs-14);

}

/* 최상단 띠배너 */
#header .notice {
    width: 100%;
    height: 42px;
    background: var(--color-navy-01);
    display: flex;
    align-items: center;
    font-weight: 600;
}

#header .notice .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-main {
    background: var(--color-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding-top: var(--space-24);
    padding-bottom: var(--space-16);
}


.header-top .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.header-top .header-top-inner {
    display: flex;
    align-items: center;
    flex:1;
}


/* 헤더 검색바 */
#header .search-wrap {
    width: 900px;
    height: 44px;
    background: var(--bg-100);
    margin-left: 3.125rem;
    margin-right: var(--space-20);
    display: flex;
    align-items: center;
    border-radius: 4px;

}


#header .search-wrap input {
    flex: 1;
    height: 100%;
    padding: 0 var(--space-20);
    color: var(--fc-black);


}

#header .search-wrap input::placeholder {
    color: var(--fc-gray-99);
    font-weight: 700;

}

#header .search-wrap .btn-search {
    width: 58px;
    height: 38px;
    background: var(--color-primary);
    position: relative;
    right: 4px;
}

#header .search-wrap .btn-search img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}



.header-bottom .container {
    display: flex;
    align-items: center;

}

/* 언어 */
.util-menu .btn-lang {
    width: 110px;
    height: 30px;
    background: var(--bg-100);
    display: flex;
    align-items: center;
    gap: var(--space-8);
    
    padding: 0 var(--space-12);
    position: relative;

}


.util-menu i:not(.drop-btn),
.util-menu .flag {
    width: 18px;
    display: flex;
    align-items: center;
}

.util-menu .drop-btn {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
    vertical-align: middle;
    position: absolute;
    right: 12px;

}




.lang-box {
    position: relative;
    color: var(--fc-black);
    font-size: var(--fs-13);
}

.lang-list {
    position: absolute;
    top: 36px;
    left:0;
    width:110px;
    background: var(--bg-100);
    /* display:none; */
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
    opacity .3s,
    transform .3s,
    visibility .3s;
    pointer-events: none;

}

.lang-box.active .lang-list {
    /* display:block; */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;

}

.lang-list a {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    padding: 0.625rem var(--space-12);
}

/* 로그인 마이페이지 고객지원 */
.header-items {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    font-size: var(--fs-13);
}

.header-items li {
    position: relative;

}

.header-items li:not(:last-child):after {
    position: absolute;
    content: '';
    width: 1px;
    height: 80%;
    background: var(--bg-100);
    top: 50%;
    transform: translateY(-50%);
    right: -0.9rem;
}


.header-items a {
    display: flex;
    align-items: center;
    gap: var(--space-4);

}


/*  전체 카테고리 */
#header .category {
    position: relative;
    flex-shrink: 0;
}

#header .btn-category {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 700;
}

#header .btn-category i {
    width: 1.25rem;
    height: 1.25rem;
    background: transparent;
    position: relative;
}

#header .btn-category i::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -70%) rotate(45deg);
}

#header .category-menu {
    position: absolute;
     top:100%;
    margin-top:8px;
    left: 0;
    width: 160px;
    background: var(--bg-100);
    border-radius: 4px;
    box-shadow: 2px 8px 32px rgba(0, 0, 0, .08);
    /* display:none; */
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s ease;
}

#header .category.active .category-menu {
    /* display:block; */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

#header .category-menu li a {
    display: block;
    padding: var(--space-12) var(--space-16);
    color: var(--fc-gray-3c);
}


#header .top-menu-wrap {
    flex: 1;
    overflow: hidden;
    margin-left: var(--space-32);
    position: relative;

}


#header .top-menu-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 50px;
    height: 80%;
    pointer-events: none;
    background: linear-gradient(to right,
            rgba(255, 0, 0, 0),
            var(--color-primary) 100%);
    transform: translateY(-50%);

}

#header .top-menu-track {
    display: flex;
    gap: 1.625rem;
    transition: transform .4s ease;
    will-change: transform;
    font-weight: 600;
}

#header .top-menu-track a {
    white-space: nowrap;
    flex-shrink: 0;
}



#header .top-menu-next {
    width: 1.25rem;
    height: 1.25rem;
    background: transparent;
    position: relative;
}

#header .top-menu-next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translate(-60%, -50%) rotate(45deg);
}



/* =========================
   gnb
========================= */

.gnb-wrap .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-14);
}


#gnb,
.join {
    display: flex;
    align-items: center;
    font-weight: 700;
}


#gnb {
    height: 70px;
    gap: 3rem;
    color: var(--fc-gray-3c);
    font-size: var(--fs-15);

}



#gnb a {
    display: flex;
    align-items: center;
    gap: 0.375rem;



}


.join p {
    color: var(--color-primary);
    margin-right: var(--space-16);

}

.join button {
    width: 82px;
    height: 2rem;
    background: var(--color-primary);
    border-radius: 4px;
    color: var(--fc-white);
}