@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
#top { background: #fff; position: fixed; left: 0; right: 0; top: 0; height:var(--top-height); border-bottom:1px solid #ddd; z-index:999; --top-height:90px; }
.m-menu-on #top .top-wrap { z-index:-1; }
body.scrolled #top { box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); --top-height:70px; transition-duration:400ms; }


#top .top-wrap { position:relative; height:100%; padding:0 20px; display:flex; justify-content:space-between; }
#top .top-wrap .left { height:100%; width:200px; transition-duration: 300ms; display:flex; align-items: center; }
#top .top-wrap .left a { background: url("../img/logo.png") left center/contain no-repeat; width:100%; height:50px; }
body.scrolled #top .top-wrap .left a { height:40px; }

@media (min-width: 1024px) {
    .is-index #top { top:calc(-1 * var(--top-height)); }
    body.on .is-index #top { top:0 ; transition:top 500ms, height 500ms; transition-delay:top 300ms; }
}
@media (max-width: 1024px) {
	#top { --top-height:70px; }
    body.scrolled #top { box-shadow:none; }
    #top .top-wrap .left a { height:40px; }
}

#top .top-wrap .right { display: flex; transition-duration:300ms; }
#top .top-wrap .right section { position: relative; height:100%; margin-right: 10px; }
#top .top-wrap .right section .icon-btn { position: relative; display:block; width:22px; height:100%; background:none no-repeat center/contain; }
#top .top-wrap .right section .icon-btn small { right:-5px; top:50%; font-size:10px; position:absolute; border-radius:99px; width:15px; height:15px; text-align:center; line-height:15px; background:#111; color:#fff; }


#top .top-wrap .right section:not(.links):hover .icon-btn { animation: shake-it 700ms ease-out forwards; }

@keyframes shake-it {
    0%	{ transform:translateY(-6px); }
    25%	{ transform:translateY(6px); }
    50%	{ transform:translateY(-4px); }
    75%	{ transform:translateY(4px); }
    100%	{ transform:translateY(0px); }
}


#top .top-wrap .right .links .icon-btn { background-image:url('../img/top-icon-member.png');  }
#top .top-wrap .right .links .sub { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding:15px 20px; background:#fff; border:1px solid #ddd; border-top-color:#fff; display: none; border-radius:0 0 15px 15px; }
#top .top-wrap .right .links:hover .sub, #top .top-wrap .right .links .sub:hover { display:block; }
#top .top-wrap .right .links .sub a { display:block; color:#aaa; padding:5px 0; text-align:center; font-size:.875rem; }

body.scrolled #top .top-wrap .right .links .sub { border:none; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05); }


#top .top-wrap .right .top-search .icon-btn { background-image:url('../img/top-icon-search.png'); }


.search-wrap { position:fixed; left:0; top:-80vh; right:0; height:80vh; background:#fff; padding:70px 0; transition-duration:500ms; z-index:1003; }
.search-wrap.on { top:0; }

.search-wrap .search-close { position:absolute; top:20px; right:20px; border-radius:99px; width:40px; height:40px; line-height:43px; text-align:center; background:#666; color:#fff; cursor:pointer; }

.search-wrap .box { max-width:600px; margin:0 auto; overflow:hidden; height:100%; display:flex; flex-direction:column; }
.search-wrap .top-search-box { width:100%; display:flex; align-items: center; padding:5px 0; border-bottom:3px solid #333; }
.search-wrap .top-search-box span { font-size:1.5rem; font-weight:800; margin-right:20px; font-family:'EsaManru'; }
.search-wrap .top-search-box .searchbox { border:0; padding:10px 0; flex:1; }
.search-wrap .top-search-box .searchbox::placeholder { color: #333; }
.search-wrap .top-search-box .searchbox:focus { outline: none; }
.search-wrap .top-search-box button { width:25px; height:25px; background:url('../img/top-icon-search.png') no-repeat center/contain; border:0; color:#333; margin:0 10px; }
.search-wrap .top-search-box button:focus { outline: none; }

.search-wrap .box > div { margin-top:40px; }
.search-wrap .box > div .tit { margin-bottom:15px; font-size:1.125rem; font-weight:500; }
.search-wrap .box > div .none { color:#aaa; }

.search-wrap div[class*="word"] ul { display:flex; flex-wrap:wrap; margin:0 -2px; }
.search-wrap div[class*="word"] li { margin:0 2px; }
.search-wrap div[class*="word"] a { display:block; padding:5px 15px; border:1px solid #ddd; border-radius:99px; }

.search-wrap .hotitem { border-top:1px solid #666; padding-top:40px; overflow:hidden; display:flex; flex-direction:column; }
.search-wrap .item-list { overflow-y:scroll; padding:5px 0; }
.search-wrap .item-list a { display:block; transform:translateY(15px); opacity:0; margin-bottom:20px; transition-duration:400ms; padding-left:40px; color:#666; }
.search-wrap .item-list a small { position:absolute; left:0; top:50%; transform:translateY(-50%); width:25px; height:25px; line-height:25px; text-align:center; border-radius:99px; font-weight:600; color:#111; }
.search-wrap.on .item-list a { transform:translateY(0); opacity:1; }

.search-wrap.on + #search-overlay { position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.6); z-index:3; }

#top .top-wrap .right .today-view .icon-btn { background-image:url('../img/top-icon-view.png');  }
#top .top-wrap .right .cart .icon-btn { background-image:url('../img/top-icon-cart.png');  }


/* 상단 우측 메뉴버튼 */
#top .top-menu-btn { position:fixed; top:0; right:0; height:var(--top-height); display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:1001; transition-duration:500ms; }
.is-index #top .top-menu-btn { right:calc(-1 * var(--quick-width)); }
body.on .is-index #top .top-menu-btn { right:0; }

#top .top-menu-btn div { position:relative; background:#fff; width:4px; height:4px; margin:1px 6px; }
#top .top-menu-btn div:before, #top .top-menu-btn div:after { content:""; position:absolute; width:4px; height:4px; background:inherit; }
#top .top-menu-btn div:before { left:-6px; }
#top .top-menu-btn div:after { right:-6px; }


@media (max-width: 1200px) {
    #top .top-menu-btn { position:static; margin-left:10px; }
    #top .top-menu-btn div { background:#444; }
}

@media (max-width: 767px) {
	#top .top-wrap .right .links, 
    #top .top-wrap .right .today-view { display:none; }

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

    .search-wrap { padding:70px 20px; }

}


/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { height: 100%; position: relative; transition-duration: 300ms; }
#menu .ul { align-items: stretch; display: flex; height: 100%; justify-content: center; width: 100%; }
#menu .ul .li { flex: 1; position: relative; align-items: center; display: flex; height: 100%; justify-content: center; }
#menu .ul .li::before { content: ""; position: absolute; left:50%; transform:translateX(-50%); width:0; height:3px; bottom:0; transition-duration: 300ms; }
#menu .ul .li .a { padding: 0 30px; position: relative; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size:1.125rem; font-weight:800; }
#menu .ul .li.on .a, #menu .ul .li:hover .a { color: inherit; }
#menu .ul .li:hover::before, #menu .ul .li.on::before { width:100%; }
#menu .sub-wrap { background: #fff; border: 1px solid #ddd; border-top-color:#fff; display: none; left: 50%; transform:translateX(-50%); min-width:100%; position: absolute; top: 100%; z-index: 1; border-radius:0 0 15px 15px; }

body.scrolled #menu .ul .li .a { font-size:1rem; }
body.scrolled #menu .sub-wrap { border:none; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05); }

#menu .sub-wrap > .wrap { padding: 20px; }
#menu .sub-wrap .sub-1div { position:relative; padding:0 10px; }
#menu .sub-wrap a { display: block; white-space: nowrap; padding:5px 0; }
#menu .sub-wrap a span { position:relative; display:inline-block; }
#menu .sub-wrap a span:before { content: ""; position: absolute; left:0; right:0; width:0; height:2px; top:100%; transition-duration: 300ms; }

#menu .sub-wrap .sub-1div:hover .sub-a span:before,
#menu .sub-wrap .sub-2a:hover span:before { width:100%; }

#menu .sub-wrap .sub-a { color: #333; font-size: 16px; }


#menu .sub-wrap .sub-2div { position:absolute; left:calc(100% + 20px); top:-10px; padding:10px 20px; background:#fff; border:1px solid #ddd; transition-duration:300ms; border-radius:10px; opacity:0; visibility:hidden; z-index:-9; }
#menu .sub-wrap .sub-2a { font-size:.875rem; color:#888; }
#menu .sub-wrap .sub-1div:hover .sub-2div { left:100%; opacity:1; visibility:visible; z-index:2; }

#menu .sub-wrap .sub-img { width:400px; margin-left:20px; display:none; }
#menu .sub-wrap .sub-img .img { padding-bottom:66%; background:none no-repeat center/cover; }

@media (max-width: 1680px) {
    #menu .ul { padding-right:50px; }
	#menu .ul .li .a { padding: 0 20px; font-size:1.1rem; }
}
@media (max-width: 1450px) {
    #menu .ul { padding-right:20px; }
	#menu .ul .li .a { padding: 0 15px; font-size:0.95rem; }
}
@media (max-width: 1200px) {
	#menu .ul { padding-right:20px; }
	#menu .ul .li .a { padding: 0 10px; font-size:0.92rem; }
}

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