/* BASIC css start */
/* NAV */
.header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--white);
    border-bottom: 1px solid var(--lightgrey);
    width: 100vw;
    min-width: var(--min);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.headerTop {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: var(--space-lg);
    width: 100%;
    max-width: var(--max);
}
.headerTopInner {
    flex: 1;
}
.headerTopInner:nth-child(1) {
    justify-items: flex-start;
}
.headerTopInner:nth-child(2) {
    justify-items: center;
}
.headerTopInner:nth-child(3) {
    justify-items: flex-end;
}
.headerTopLogo_svg {
    width: 8rem;
}
/* Çì´õ »ó´Ü Áß¾Ó °Ë»ö¹Ù ¿µ¿ª */
.headerTopSearch {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}
.headerTopSearch fieldset {
    padding: var(--space-2xs);
    border-radius: var(--space-md);
    background-color: var(--bggrey);
}
.headerTopSearch fieldset input {
    background: none;
    border: none !important;
}
.MS_search_word {
    width: 16rem;
    text-align: center;
}
.searchBtn {
    width: 1.5rem;
    float: right;
}
.MS_search_word {
    font-size: 0.875rem;
}

/* Çì´õ »ó´Ü ¿ìÃø¿µ¿ª*/
.headerTopNav {
    font-size: 0.875rem;
}
.headerTopNav a {
    margin-left: var(--space-sm);
}

.nav {
    min-width: max-content;
    width: 100%;
    /* max-width: var(--max); */
    display: flex;
    flex-flow: row nowrap;
    gap: 4rem;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    /* border-top: 1px solid var(--line); */
}
.nav a:hover {
    color: var(--brandcolor);
}

.nav .depth1 {
    display: flex;
    flex-flow: column nowrap;
}
.nav .depth1:hover > a {
    color: var(--brandcolor);
    border-bottom: 0.125rem solid var(--brandcolor);
}

.nav .depth1 > a {
    font-size: 1rem;
    font-weight: 400;
    z-index: 4;
    padding: var(--space-md) 0;
}

.nav .depth1:hover .depth2Wrapper {
    height: auto;
    padding: 5rem 0 3rem 0;
}
.nav .depth2Wrapper {
    position: fixed;
    top: 6.5rem;
    left: 0;
    transform: translateX(0);
    width: 100vw;
    background: var(--white);

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    gap: 5rem;

    overflow: hidden;
    height: 0;

    background-color: #f5f5f5f5;
}
.nav .depth2Wrapper .depth2 {
}
.nav .depth2Wrapper .depth2 > a {
    font-size: 1rem;
    display: block;
    margin-bottom: 1em;
    font-weight: 400;
}
.nav .depth3 {
    display: flex;
    flex-flow: column nowrap;
    margin-bottom: var(--space-sm);
}
.nav .depth3 > a {
    font-size: 0.875rem;
    margin: 0 0 var(--space-sm) var(--space-2xs);
    color: var(--darkgrey);
}
.nav .depth3 > a:hover {
    color: var(--black);
}
.nav__inner {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    justify-content: center;
}
.nav__link {
    padding: var(--space-xs) var(--space-sm);
    border-radius: 62.4375rem;
}
.nav__link--active,
.nav__link:hover {
    background: #f5f5f5;
}

/* BASIC css end */