@charset "UTF-8";

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

#top { left:0; position: fixed; right:0; top:0; z-index:100; height:var(--top-height); border-bottom:1px solid rgba(255,255,255,.1); transform: skew(-0.05deg); /*글씨깨짐방지*/ }
body.scrolled #top { border-color:#eee; background:#fff; }
body.scrolled .is-subpage #top { top:calc(-1 * var(--top-height)); }

#top .top-wrap { height:100%; display:flex; align-items:center; justify-content: space-between; padding:0 var(--top-padding); margin-right:var(--top-right-w); }

#top .top-wrap .left { width:200px; height:50px; }
#top .top-wrap .logo { display:block; height:100%; background: url("../img/logo-white.png") left center/contain no-repeat; }

body.scrolled #top .top-wrap .logo,
.is-subpage #top .top-wrap .logo { background-image:url("../img/logo.png"); }


#top .top-wrap > section { position: relative; margin-right: 20px; padding:20px 0; }
#top .top-wrap > section:hover { z-index:10; }
#top .top-wrap > section span[class*="-btn"] { display:block; width:20px; height:20px; background:none no-repeat center/contain; cursor:pointer; filter:invert(1) brightness(100); }
.scrolled:not(.fullpage) #top .top-wrap > section span[class*="-btn"],
.is-subpage #top .top-wrap > section span[class*="-btn"] { filter:none; }


#top .top-wrap > .top-search { margin-left:3%; }
#top .top-wrap > .top-search .search-btn { background-image:url('../img/top-icon-search.png'); }

#top .top-wrap .top-search-box { align-items: center; display: flex; height: 100%; justify-content: center; }
#top .top-wrap .top-search-box form { border: 1px solid #fff; display: flex; align-items:center; padding: 7px 8px 8px; width: 300px; }
#top .top-wrap .top-search-box form .searchbox { background: transparent; border: 0; flex: 1; }
#top .top-wrap .top-search-box form .searchbox::placeholder { color: #ddd; }
#top .top-wrap .top-search-box form .searchbox:focus { outline: none; }
#top .top-wrap .top-search-box form button { background: transparent; border: 0; color:var(--main-color2); flex: 0 0 25px; margin-left: 5px; }
#top .top-wrap .top-search-box form button:focus { outline: none; }
#top .top-wrap .top-search-box form .x-close { color:#444; font-size:1.8rem; margin-left:5px; cursor:pointer; display: flex; }


#top .top-wrap > .links .member-btn { background-image:url('../img/top-icon-login.png'); }


#top .top-wrap > 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 > section:hover .sub,
#top .top-wrap > section .sub:hover { max-height:300px; padding:15px 25px; border-color:#ddd; opacity:1; visibility:visible; transition-duration:600ms; }

#top .top-wrap > 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 > section .sub a { display:block; color:#aaa; padding:2.5px 0; text-align:center; opacity:0; font-size:.875rem; transition-duration:400ms; }
#top .top-wrap > section:hover .sub a { opacity:1; }


#top .top-wrap .right { position:fixed; top:0; right:0; width:var(--top-right-w); height:100vh; padding:120px 10px 70px; display:flex; flex-direction:column; align-items:center; justify-content: space-between; z-index:9; }
#top .top-wrap .right:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(255,255,255,.1); border-left:1px solid rgba(255,255,255,.2); z-index:1; }

body.scrolled .is-subpage #top .top-wrap .right { top:var(--top-height); }
body.scrolled #top .top-wrap .right:before,
.is-subpage #top .top-wrap .right:before { background:rgba(255,255,255,.9); border-left:1px solid #ddd; }

#top .top-wrap .right section { position:relative; z-index:2; }

#top .top-wrap .right .langs {  }
#top .top-wrap .right .langs .item li { margin-top:15px; }
#top .top-wrap .right .langs .item a { display:block; color:#999; transform:rotate(90deg); }
#top .top-wrap .right .langs .item a.on { color:#fff; }


body.scrolled #top .top-wrap .right .langs .item a.on,
.is-subpage #top .top-wrap .right .langs .item a.on { color:#333; }


#top .top-wrap .right section:last-of-type { text-align:center; --links-color:#fff; }
#top .top-wrap .right section:last-of-type span { position:relative; writing-mode: vertical-rl; color:var(--links-color); padding-bottom:60px; margin-bottom:20px; transition-duration:300ms; }
#top .top-wrap .right section:last-of-type span:before { content:""; position:absolute; left:50%; bottom:0; width:1px; height:40px; background:var(--links-color); }

#top .top-wrap .right section:last-of-type li a { position:relative; display:block; font-size:0; white-space: nowrap; margin-bottom:10px; width:40px; height:40px; border-radius:99px; }
#top .top-wrap .right section:last-of-type li a:before { content:""; position:absolute; left:5px; top:5px; right:5px; bottom:5px; filter:brightness(100); transition-duration:100ms; }

#top .top-wrap .right .sns li a:before { background:none no-repeat center/26px; }
#top .top-wrap .right .sns li.kakao a:before { background-image:url('../img/sns_icon_kakao.png');  }
#top .top-wrap .right .sns li.naver a:before { background-image:url('../img/sns_icon_naver.png'); }
#top .top-wrap .right .sns li.youtube a:before { background-image:url('../img/sns_icon_youtube.png'); }
#top .top-wrap .right .sns li.instagram a:before { background-image:url('../img/sns_icon_instagram.png'); }
#top .top-wrap .right .sns li.facebook a:before { background-image:url('../img/sns_icon_facebook.png'); }
#top .top-wrap .right .sns li.twiter a:before { background-image:url('../img/sns_icon_twitter.png'); }

#top .top-wrap .right .sns li.kakao a:hover { background:var(--kakao-color); }
#top .top-wrap .right .sns li.kakao a:hover:before { filter:none !important; transition-duration:0ms; }
#top .top-wrap .right .sns li.naver a:hover { background:var(--naver-color); }
#top .top-wrap .right .sns li.youtube a:hover { background:var(--youtube-color); }
#top .top-wrap .right .sns li.instagram a:hover { background:var(--instagram-color); }
#top .top-wrap .right .sns li.facebook a:hover { background:var(--facebook-color); }
#top .top-wrap .right .sns li.twiter a:hover { background:var(--twiter-color); }

#top .top-wrap .right .shop li a:before { font-family:"Font Awesome 6 Free"; font-weight:900; display:flex; justify-content:center; align-items:center; }
#top .top-wrap .right .shop li.cart a:before { content:"\f290"; font-size:22px; }
#top .top-wrap .right .shop li.cart a:hover { background:var(--main-color1); }
#top .top-wrap .right .shop li.order a:before { content:"\f0d1"; font-size:18px; }
#top .top-wrap .right .shop li.order a:hover { background:var(--main-color3); }

body.scrolled #top .top-wrap .right section:last-of-type,
.is-subpage #top .top-wrap .right section:last-of-type { --links-color:#333; }
body.scrolled #top .top-wrap .right section:last-of-type li a:before,
.is-subpage #top .top-wrap .right section:last-of-type li a:before { filter:none; }
body.scrolled #top .top-wrap .right section:last-of-type li a:hover:before,
.is-subpage #top .top-wrap .right section:last-of-type li a:hover:before { filter:brightness(100); }


/* 상단 우측 메뉴버튼 */
#top .top-menu-btn { position:fixed; right:25px; top:50%; height:50px; width:30px; margin-top:-25px; z-index:19; cursor: pointer; }
#top .top-menu-btn div { background: #fff; border-radius: 99px; height:2px; right:0; position: absolute; top:50%; transform: translateY(-50%); transition-duration: 400ms;  width:100%; }
#top .top-menu-btn div:nth-child(1) { margin-top: -8px; }
#top .top-menu-btn div:nth-child(3) { margin-top: 8px; }
#top .top-menu-btn:hover div:nth-child(2) { width:60%; }

body.scrolled #top .top-menu-btn div,
.is-subpage #top .top-menu-btn div { background:#111; }
body.scrolled .is-subpage #top .top-menu-btn { margin-top:calc(var(--top-height) - 25px); }



@media (max-width: 1024px) {
    :root {
        --top-height:60px;
        --top-right-w:0;
    }

    body.scrolled #top { top:calc(-1 * var(--top-height)); }

    #top .top-wrap { margin-right:auto; }
	#top .top-wrap .left { width:150px; height:30px; }
    #top .top-wrap .logo { background-image:url("../img/logo.png"); }
	#top .top-wrap > section { display:none; }

	#top .top-wrap .right { position:static; right:var(--top-right-w); bottom:auto; width:auto; height:100%; padding:0; flex-direction:row; margin-left:auto; }
	#top .top-wrap .right:before,
    #top .top-wrap .right section:last-of-type { display:none; }

	#top .top-wrap .right .langs .item { display:flex; align-items:center; }
	#top .top-wrap .right .langs .item li { margin:0 5px; }
	#top .top-wrap .right .langs .item a { transform:rotate(0deg); line-height:1; }
	#top .top-wrap .right .langs .item a.on { color:#333; }


	#top .top-menu-btn { position:relative; width:22px; top:0; right:0; margin-left:20px; margin-top:0; }
	#top .top-menu-btn div { background:#111; height:2px; }
	#top .top-menu-btn div:nth-child(1) { margin-top: -6px; }
	#top .top-menu-btn div:nth-child(3) { margin-top: 6px; }
}


/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu {display: flex; align-items:center; justify-content: center; transition-duration: 200ms; height:100%; flex:1; }
#menu .nav { display:none; }

#menu .swiper { position:relative; width:100%; padding-left:15%; display:flex; height:100%; margin:0; overflow:visible; z-index:10; }
#menu .swiper .li { position: relative; height:100%; flex:1; display:flex; align-items:center; justify-content: center; }
#menu .swiper .li:hover { z-index:9; }
#menu .swiper .li .a { position:relative; font-size:1.125rem; font-weight:500; z-index:2; color:#fff; padding:10px; line-height:1; white-space: nowrap; }
body.scrolled #menu .swiper .li .a,
.is-subpage #menu .swiper .li .a { color:#333; }
#menu .swiper .li .a:before { content:""; position:absolute; top:100%; left:0; right:0; height:5px; border-radius:10px; display:none; background:var(--main-color3); }
#menu .swiper .li:hover .a:before { display:block; }


#menu .sub-wrap { position:absolute; transition-duration:300ms; padding:0 10px; opacity:0; visibility:hidden; max-height:0; overflow: hidden; box-shadow:5px 5px 10px rgba(0,0,0,.2); }
#menu .sub-wrap .sub-a { display: block; white-space: nowrap; font-weight:400; line-height:1.3; }
#menu li:hover > .sub-wrap { opacity:1; visibility:visible; overflow:visible; }

#menu .depth2 { left:50%; transform:translateX(-50%); top:100%; background:var(--main-color3); }
#menu .depth2 > li { position:relative; }
#menu .depth2 > li > .sub-a { padding:10px 20px; color:rgba(255,255,255,1); display:flex; align-items:center; justify-content:space-between; width:100%; }
#menu .depth2 > li > .sub-a span { display:inline-block; position:relative; }
#menu .depth2 > li > .sub-a span:before { content:""; position:absolute; left:0; top:100%; right:0; width:0; height:1px; background:var(--main-color2); transition-duration: 400ms; }
#menu li:hover > .depth2 { padding:20px 10px; max-height:500px; }
#menu .depth2 > li:hover > .sub-a,
#menu .depth2 > li.on > .sub-a { color:var(--main-color2); }
#menu .depth2 > li:hover > .sub-a span:before,
#menu .depth2 > li.on > .sub-a span:before { width:100%; }

#menu .depth3 { top:0; left:100%; min-width:120px; background:#fff; border:1px solid var(--main-color3); }
#menu .depth3 .sub-a { color:#aaa; padding:5px; }
#menu .depth3 li:hover .sub-a,
#menu .depth3 li.on .sub-a { color:var(--main-color3); margin-left:5px; }
#menu li:hover > .depth3 { padding:15px; max-height:300px; }



@media (max-width: 1400px) {
	#menu .swiper { padding-left:5%; }
}

@media (max-width: 1024px) {
	#menu { position:absolute; left:0; top:100%; right:0; height:auto; background:rgba(120,120,120,.8); }

    #menu .nav { display:flex; justify-content:center; align-items:center; color:#fff; margin:0 10px; cursor:pointer; }
    #menu .swiper { padding-left:0; overflow:hidden; }
    #menu .swiper .li .a { font-size:1rem; }
    body.scrolled #menu .swiper .li .a,
    .is-subpage #menu .swiper .li .a { color:#fff; }

    #menu .depth2 { display:none; }
}

@media (max-width: 767px) {
	#menu .swiper .li { margin:0 5px; }
}