@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
:root {
    --top-height:100px; /* 메뉴높이 */
}

#top { position: fixed; left:0; right:0; top:calc(-1 * var(--top-height)); transition:top 1s, background-color 0.4s ease; z-index: 100; height:var(--top-height); }
.load-on #top { top:0; }

.scrolled:not(.fullpage) #top,
#top.bg { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); }
.is-subpage #top { position:fixed; }

#top .top-wrap { position:relative; height:100%; padding:0 var(--top-padding); display:flex; align-items:center; justify-content: space-between; z-index:3; transition-duration:700ms; }

#top .top-wrap .left { width:200px; height:50px; }
#top .top-wrap .left .logo { display:block; height:100%; background: url("../img/logo-white.svg") left center/contain no-repeat; transition-duration: 200ms; }
.scrolled:not(.fullpage) #top .top-wrap .left .logo,
.no-bg #top .top-wrap .left .logo { background-image: url("../img/logo.svg"); }

#top .top-wrap .right { position:relative; display: flex; align-items: center; transition-duration:200ms; }
#top .top-wrap .right section { position: relative; margin-right: 20px; padding:20px 0; }
#top .top-wrap .right section:hover { z-index:3; }
#top .top-wrap .right section span[class*="-btn"] { display:block; width:20px; height:20px; background:none no-repeat center/contain; filter:invert(92%) sepia(79%) saturate(2%) hue-rotate(128deg) brightness(106%) contrast(101%); cursor:pointer; }
.scrolled:not(.fullpage) #top .top-wrap .right section span[class*="-btn"],
.no-bg #top .top-wrap .right section span[class*="-btn"] { filter:none; }


#top .top-wrap .right .top-search .search-btn { background-image:none !important; filter:none !important; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem; }
#top .top-wrap .right .top-search .search-btn i { line-height:1; }
#top .top-wrap .right .langs { margin-right:10px !important; }
#top .top-wrap .right .sns { margin-right:20px !important; }
#top .top-wrap .right .links-non-shop { margin-right:10px !important; }
#top .top-wrap .right .langs .lang-btn { background-image:none !important; filter:none !important; display:flex; align-items:center; justify-content:center; gap:5px; width:auto !important; height:auto !important; color:#fff; font-size:0.85rem; font-weight:600; letter-spacing:0.03em; border-radius:20px; padding:5px 10px; cursor:pointer; }
#top .top-wrap .right .langs .lang-btn i { line-height:1; font-size:0.9rem; }
#top .top-wrap .right .langs .lang-btn .lang-label { font-size:0.8rem; font-weight:600; letter-spacing:0.05em; }
#top .top-wrap .right .langs .lang-btn .lang-arrow { font-size:0.65rem; opacity:0.85; }
#top .top-wrap .right .langs .sub { width:110px; text-align:left !important; }
#top .top-wrap .right .langs .sub img { width:20px; border:none; border-radius:3px; border:#ddd 1px solid;}
#top .top-wrap .right .langs .sub a.on { color:var(--main-color1); border-radius:3px; padding-left:6px; padding-right:6px; margin-left:-6px; margin-right:-6px; }
#top .top-wrap .right .links .member-btn { background-image:none !important; filter:none !important; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem; }
#top .top-wrap .right .links .member-btn i { line-height:1; }
#top .top-wrap .right .sns .sns-btn { background-image:none !important; filter:none !important; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem; }
#top .top-wrap .right .sns .sns-btn i { line-height:1; }
.scrolled:not(.fullpage) #top .top-wrap .right .top-search .search-btn,
.scrolled:not(.fullpage) #top .top-wrap .right .links .member-btn,
.scrolled:not(.fullpage) #top .top-wrap .right .sns .sns-btn,
.no-bg #top .top-wrap .right .top-search .search-btn,
.no-bg #top .top-wrap .right .links .member-btn,
.no-bg #top .top-wrap .right .sns .sns-btn { color:#333; }
.scrolled:not(.fullpage) #top .top-wrap .right .langs .lang-btn,
.no-bg #top .top-wrap .right .langs .lang-btn { color:#333; }


#top .top-wrap .right .sns .sub a { position:relative; text-align:left; transition:all 400ms, opacity 400ms var(--sns-delay); width:110px; display:block; padding:5px 0 5px 35px; z-index:1; }
#top .top-wrap .right .sns .sub a:before,
#top .top-wrap .right .sns .sub a:after { content:""; position:absolute; left:0; top:calc(50% - 15px); width:30px; height:30px; border-radius:99px; }
#top .top-wrap .right .sns .sub a:before { z-index:-1; }
#top .top-wrap .right .sns .sub a:after { background:none no-repeat center/22px; opacity:.8; filter:brightness(0); }


#top .top-wrap .right .sns .sub a.kakao:after { background-image:url('../img/sns_icon_kakao_gray.png'); }
#top .top-wrap .right .sns .sub a.instagram:after { background-image:url('../img/sns_icon_instagram_gray.png'); }
#top .top-wrap .right .sns .sub a.naver:after { background-image:url('../img/sns_icon_naver_gray.png'); }
#top .top-wrap .right .sns .sub a.facebook:after { background-image:url('../img/sns_icon_facebook_gray.png'); }
#top .top-wrap .right .sns .sub a.youtube:after { background-image:url('../img/sns_icon_youtube_gray.png'); }
#top .top-wrap .right .sns .sub a.twiter:after { background-image:url('../img/sns_icon_twiter_gray.png'); }

#top .top-wrap .right .sns .sub a:hover { color:#333; }
#top .top-wrap .right .sns .sub a.kakao:hover:before { background:var(--kakao-color); }
#top .top-wrap .right .sns .sub a.instagram:hover:before { background:var(--instagram-color); }
#top .top-wrap .right .sns .sub a.naver:hover:before { background:var(--naver-color); }
#top .top-wrap .right .sns .sub a.facebook:hover:before { background:var(--facebook-color); }
#top .top-wrap .right .sns .sub a.youtube:hover:before { background:var(--youtube-color); }
#top .top-wrap .right .sns .sub a.twiter:hover:before { background:var(--twiter-color); }
#top .top-wrap .right .sns .sub a:hover:after { opacity:1; }
#top .top-wrap .right .sns .sub a:not(.kakao):hover:after { filter:brightness(0) invert(1); }


#top .top-wrap .right .sns:hover .sub a { opacity:1; }
#top .top-wrap .right .sns:hover .sub a:nth-child(1) { --sns-delay:100ms; }
#top .top-wrap .right .sns:hover .sub a:nth-child(2) { --sns-delay:200ms; }
#top .top-wrap .right .sns:hover .sub a:nth-child(3) { --sns-delay:300ms; }
#top .top-wrap .right .sns:hover .sub a:nth-child(4) { --sns-delay:400ms; }
#top .top-wrap .right .sns:hover .sub a:nth-child(5) { --sns-delay:500ms; }
#top .top-wrap .right .sns:hover .sub a:nth-child(6) { --sns-delay:600ms; }


/* ── 검색 모달 ── */
#search-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}
#search-modal.on { display: flex; }

#search-modal .search-modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
}

#search-modal .search-modal-wrap {
    position: relative;
    width: 90%;
    max-width: 580px;
    background: #fff;
    border-radius: 8px;
    padding: 32px 36px 28px;
    box-shadow: 0 16px 48px rgba(0,0,0,.25);
}

#search-modal .search-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #999;
    cursor: pointer;
    line-height: 1;
    transition: color 150ms;
}
#search-modal .search-modal-close:hover { color: #333; }

#search-modal .search-modal-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #555;
    margin: 0 0 16px;
	text-align: center;
}

#search-modal .search-modal-form {
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--main-color1);
    padding-bottom: 10px;
    gap: 8px;
}

#search-modal .search-modal-form .searchbox {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 1.2rem;
    background: transparent;
    color: #111;
}
#search-modal .search-modal-form .searchbox::placeholder { color: #bbb; }

#search-modal .search-modal-submit {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--main-color1);
    cursor: pointer;
    padding: 0 4px;
    transition: color 150ms;
}
#search-modal .search-modal-submit:hover { color: var(--main-color2); }



#top .top-wrap .right section .sub { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding:0 25px; background:#fff; border-radius:10px; border:1px solid transparent; opacity:0; visibility:hidden; max-height:0; transition-duration:300ms; }
#top .top-wrap .right section:hover .sub,
#top .top-wrap .right section .sub:hover { max-height:300px; padding:15px 25px; border-color:#ddd; opacity:1; visibility:visible; transition-duration:600ms; }

#top .top-wrap .right section .sub:before { content:""; position:absolute; bottom:calc(100% - 10px); left:50%; transform:translateX(-50%) rotate(45deg); width:20px; height:20px; border-radius:5px 0 0 0; background:#fff; border-left:1px solid #ddd; border-top:1px solid #ddd; }
#top .top-wrap .right section .sub a { display:block; padding:2.5px 0; text-align:center; opacity:0; font-size:.875rem; font-weight:500; transition-duration:400ms; }
#top .top-wrap .right section:hover .sub a { opacity:1; }



/* 상단 우측 메뉴버튼 */
#top .top-menu-btn { width:28px; height:22px; display:flex; flex-direction:column; justify-content:space-between; transition-duration:300ms; z-index:2; cursor:pointer; }
#top .top-menu-btn div { width:100%; height:2px; background:#fff; border-radius:2px; transform-origin:center; transition:transform 300ms, opacity 250ms, background-color 200ms; }

body.m-menu-on #top .top-menu-btn div:nth-child(1) { transform:translateY(10px) rotate(45deg); }
body.m-menu-on #top .top-menu-btn div:nth-child(2) { opacity:0; }
body.m-menu-on #top .top-menu-btn div:nth-child(3) { transform:translateY(-10px) rotate(-45deg); }

.scrolled:not(.fullpage) #top .top-menu-btn div,
.no-bg #top .top-menu-btn div { background:#333; }


@media (max-width: 1024px) {
    :root {
        --top-height:70px;
    }
}

@media (max-width: 767px) {
	:root {
        --top-height:60px;
    }

	#top .top-wrap .left { height:36px; }

	#top .top-wrap .right section { margin-right:10px; }

    #top .top-wrap .right .sns { display:none; }


    #top .top-wrap .right section .sub { padding:0 15px; }
    #top .top-wrap .right section:hover .sub,
    #top .top-wrap .right section .sub:hover { padding:10px 15px; }

    #top .top-menu-btn { margin-left:0; }
}

@media (max-width: 767px) {
    #top .top-wrap .right .langs {
        margin-right: 5px !important;
    }

    #top .top-wrap .right section .sub {
        margin-top: -10px;
    }
}

/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { transition-duration: 200ms; }
#menu .ul { position:relative; width:100%; display: flex; justify-content: center; height:100%; z-index:10; }
#menu .ul .li { position:relative; padding:0 2vw; }
#menu .ul .li:hover { z-index:9;}
#menu .ul .li .a { display:flex; align-items:center; justify-content:center; padding:20px 0; font-weight:500; font-size:1.125rem; color:#fff; }
#menu .ul .li .a:hover,
#menu .ul .li.on .a { color: var(--main-color2); }

.scrolled:not(.fullpage) #menu .ul .li .a,
.no-bg #menu .ul .li .a { color:#111; }
.scrolled:not(.fullpage) #menu .ul .li.on .a,
.no-bg #menu .ul .li.on .a { color: var(--main-color1); }

#menu .sub-wrap { position: absolute; border-radius:5px; padding:20px; opacity:0; visibility:hidden; transition-duration:300ms; z-index:2; }
#menu .sub-wrap .sub-a { display: block; padding: 10px; white-space: nowrap; }
#menu li:hover > .sub-wrap { opacity:1; visibility:visible; }


#menu .depth2 { top:100%; left:-10%; min-width:250px; background: var(--main-color1); }
#menu .depth2:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; z-index:-1; background:rgba(0,0,0,.3); border-radius:5px; }
#menu .depth2 > li { position:relative; transition-duration: 400ms; }
#menu .depth2 > li > .sub-a { color: rgba(255, 255, 255, 0.7); display:flex; align-items:center; justify-content:space-between; width:100%; }
#menu .depth2 > li > .sub-a i { font-size:6px; }
#menu .depth2 > li:hover > .sub-a { color: rgba(255, 255, 255, 1); }
#menu .depth2 > li.on  .sub-a { color: rgba(255, 255, 255, 1); }

#menu .depth3 { top:0; left:100%; min-width:150px; background:#fff; border:1px solid var(--main-color3); }
#menu .depth3 .sub-a { padding:5px 10px; }
#menu .depth3 .sub-a:hover { color:var(--main-color1); }


@media (max-width: 1400px) {
	#menu { display:none; }
}

/* ─── 언어별 메뉴 font-weight ─── */
html[lang="ko"] #menu .ul .li .a,
html[lang="ko"] #menu .ul .li .sub-a { font-weight: 500; }

html[lang="en"] #menu .ul .li .a,
html[lang="en"] #menu .ul .li .sub-a { font-weight: 300; }

html[lang="zh"] #menu .ul .li .a,
html[lang="zh"] #menu .ul .li .sub-a { font-weight: 400; }

html[lang="ko"] #m-menu .is_sub { font-weight: 500; }
html[lang="en"] #m-menu .is_sub { font-weight: 300; }
html[lang="zh"] #m-menu .is_sub { font-weight: 400; }