@charset "utf-8";

#shGnb{
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;

    width:100%;
    max-width:1300px;
    height:90px;

    margin:0 auto;
    padding:0;
}
.sh_lnb_bg {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:320px;
    background:rgba(255,255,255,.9);
    box-shadow:0 8px 5px rgba(0,0,0,.1);
}

/* 로고 */
#shGnb .sh_logo{position:relative;z-index:20}
#shGnb .sh_logo img {max-height:40px}

/* 대분류  */
#shGnb .sh_nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content}
#shGnb .sh_nav > li{float:left;position:relative;padding:0 33px;line-height:70px}
#shGnb .sh_nav > li > a{display:block;font-size:18px;font-weight:600;color:#fff;text-transform:uppercase;transition:all .2s}
#shGnb.on .sh_nav > li > a{color:#222}
#shGnb.on #pfBtn span, #shGnb.on #pfBtn span:after, #shGnb.on #pfBtn span:before{background:var(--primary)}

/* 소분류 */
#shGnb .sh_lnb_s{display:none;position:absolute;left:50%;transform:translateX(-50%);min-width:100%;width:max-content;min-height:145px}
#shGnb .sh_lnb_s li a{display:block;font-size:15px;font-weight:400;line-height:1.7;text-align:center;color:#777;transition:all .2s}
#shGnb .sh_lnb_s li a:hover{color:var(--primary)}

/* 우측 로그인·회원가입·다국어 */
.sh_util{
    display:flex;
    align-items:center;
    gap:18px;
    position:relative;
    z-index:20;
}

.sh_tip{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:600;
    font-family:var(--k-font);
}

.sh_tip li{display:block}
.sh_tip li+li{margin-left:0}

.sh_tip li a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:68px;
    height:36px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:18px;
    color:#fff;
    transition:all .2s;
}

.sh_tip li a:hover{
    border-color:var(--primary);
    background:var(--primary);
    color:#fff;
}

.sh_tip .util-join{
    border-color:var(--primary);
    background:var(--primary);
    color:#fff;
}

.sh_tip .util-join:hover{filter:brightness(.92)}

#shGnb.on .sh_tip li a{
    border-color:#ddd;
    color:#666;
}

#shGnb.on .sh_tip .util-join{
    border-color:var(--primary);
    color:#fff;
}

.sh_language{
    display:flex;
    align-items:center;
    justify-content:center;
    height:36px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:18px;
    background:rgba(255,255,255,.08);
    white-space:nowrap;
}

.sh_language .lang-btn{
    font-size:12px;
    font-weight:700;
    color:rgba(255,255,255,.55);
    transition:color .2s;
}

.sh_language .lang-btn:hover,
.sh_language .lang-btn.is-active{color:#fff}

.sh_language .lang-divider{
    display:block;
    width:1px;
    height:11px;
    margin:0 9px;
    background:rgba(255,255,255,.35);
}

#shGnb.on .sh_language{
    border-color:#ddd;
    background:#fff;
}

#shGnb.on .sh_language .lang-btn{color:#aaa}

#shGnb.on .sh_language .lang-btn:hover,
#shGnb.on .sh_language .lang-btn.is-active{color:var(--primary)}

#shGnb.on .sh_language .lang-divider{background:#ddd}

/* 상단 버튼 및 모바일 메뉴 */
#topmenuM {
    display:none;
    width:100%;
    min-height:70px;
    padding:15px;
    line-height:1.8;
}

#topmenuM #m_logo {
    display:flex;
    align-items:center;
    min-height:40px;
}

#topmenuM #m_logo img {
    display:block;
    max-height:40px;
}

#m_navBtn {
    position:absolute;
    top:50%;
    right:15px;
    z-index:10001;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    transform:translateY(-50%);
}

#m_navBtn span,
#m_navBtn span::before,
#m_navBtn span::after {
    position:absolute;
    left:50%;
    display:block;
    width:26px;
    height:2px;
    margin:0;
    padding:0;
    border:0;
    background:#fff;
    content:"";
    transform-origin:center;
    transition:top .2s ease, transform .2s ease, opacity .2s ease, background-color .2s ease;
}

#m_navBtn span {
    top:50%;
    transform:translate(-50%,-50%);
}

#m_navBtn span::before {
    top:-8px;
    transform:translateX(-50%);
}

#m_navBtn span::after {
    top:8px;
    width:15px;
    transform:translateX(-13px);
}

#m_navBtn.on {
    position:fixed;
    top:14px;
    right:14px;
    z-index:10003;
    border-radius:50%;
    background:#fff;
    transform:none;
}

#m_navBtn.on span {
    background:transparent;
}

#m_navBtn.on span::before,
#m_navBtn.on span::after {
    top:0;
    width:26px;
    background:#111;
}

#m_navBtn.on span::before {
    transform:translateX(-50%) rotate(45deg);
}

#m_navBtn.on span::after {
    transform:translateX(-50%) rotate(-45deg);
}

#navWrap {
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
    width:100%;
    height:100vh;
    height:100dvh;
    overflow:hidden;
    background:rgba(0,0,0,.7);
}

#navWrap .inner {
    position:absolute;
    top:0;
    right:0;
    display:flex;
    flex-direction:column;
    width:min(76vw,440px);
    min-width:300px;
    height:100%;
    min-height:100%;
    padding:72px 20px 24px;
    overflow-x:hidden;
    overflow-y:auto;
    background:#fff;
    opacity:1;
    box-sizing:border-box;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

#navWrap .inner::before,
#navWrap .inner::after {
    display:none;
}

#navWrap .inner .mo_hd_copy {
    position:static;
    width:100%;
    min-width:0;
    margin:auto 0 0;
    padding-top:30px;
    color:#888;
    font-size:12px;
    text-align:center;
}

#navWrap .user_tip {
    padding:10px 20px;
    background:#f5f5f5;
}

#navWrap .user_tip li {
    display:inline-block;
}

#navWrap .user_tip li + li {
    margin-left:10px;
}

/* 모바일 대분류 */
#topmenuM .m_lnb {
    width:100%;
    margin:0;
    padding:0;
}

#topmenuM .m_lnb .m_bmenu {
    position:relative;
    display:block;
    width:100%;
    height:52px;
    padding:0 20px;
    border:0;
    border-bottom:1px solid #ddd;
    background:none;
    color:#222;
    font-family:'notokr-medium';
    font-size:16px;
    line-height:52px;
    text-align:left;
}

#topmenuM .m_lnb .m_bmenu::after {
    float:right;
    content:"\f107";
    font-family:'fontawesome';
}

#topmenuM .m_lnb .m_bmenu.on::after {
    content:"\f106";
}

/* 모바일 소분류 */
#topmenuM .m_smenu {
    display:none;
    padding:15px 20px;
    border-bottom:1px solid #ddd;
    background:#f2f3f5;
}

#topmenuM .m_smenu li a {
    color:#777;
    font-size:14px;
}

/* 모바일 언어 선택 */
#topmenuM .m_language {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    margin:18px 0 0;
    padding:18px 0 0;
    border-top:1px solid #e5e8ec;
}

#topmenuM .m_language .lang-divider {
    display:none;
}

#topmenuM .m_language .lang-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:82px;
    height:42px;
    padding:0 18px;
    border:1px solid #d8dee7;
    border-radius:999px;
    background:#f5f7fa;
    color:#5e6877;
    font-size:14px;
    line-height:1;
    font-weight:600;
    text-decoration:none;
    transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}

#topmenuM .m_language .lang-btn:hover,
#topmenuM .m_language .lang-btn:focus {
    border-color:#0c3994;
    background:#eef3ff;
    color:#0c3994;
}

#topmenuM .m_language .lang-btn.is-active {
    border-color:#0c3994;
    background:#0c3994;
    color:#fff;
}

html.mobile-menu-open,
html.mobile-menu-open body {
    height:100%;
    overflow:hidden;
    touch-action:none;
}

/* 반응형 [s] */
@media (max-width:1440px){
#shGnb .sh_nav > li > a{font-size:16px}
}
@media (max-width:1024px) {
    #shGnb {
        display:none;
    }

    #topmenuM {
        display:block;
    }
}

@media (max-width:640px) {
    #navWrap .inner {
        width:calc(100vw - 56px);
        min-width:0;
        padding-right:16px;
        padding-left:16px;
    }

    #topmenuM .m_language .lang-btn {
        flex:1 1 0;
        min-width:0;
        max-width:130px;
        height:44px;
        font-size:15px;
    }
}
/* 반응형 [e] */