@charset "utf-8";
.inr{position:relative; margin:0 auto; max-width:1400px; width: 92%; }
.inr.wide{ max-width:1820px; }

/* header */
.header_top{ padding: 1.546875em 0; }
.header_top__inr{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; row-gap: 5px; }

/* search */
.header_search{ display: flex; position: relative; max-width: 300px; width: 100%; padding: 0 10px; border: 2px solid #ddd; border-radius: 40px; box-sizing: border-box; }
#header .header_search__input{ margin: 0; flex: 1; width: 1px; height: inherit; background: 0; border: 0; box-sizing: border-box; }
.header_search__button{ flex: 0 0 36px; height: 36px; background: url(/images/common/icon_search.png) no-repeat 50% / 55.555556% }

/* logo */
a.logo__a{ display: inline-block; color: inherit; }

/* util */
.logo + .area_util{ display: flex; justify-content: flex-end; align-items: center; width: 300px; }
.area_util > ul{ margin: .4625em 2em 0 0; }
.area_util > ul > li{display:inline-block;}
.area_util > ul > li + li{ margin-left: 1.45em; }
.area_util > ul > li > a{display:inline-block; position:relative;}
.area_util > ul > li > a span{opacity:0; position:absolute; bottom:-20px; left:50%; display:inline-block; padding:0 10px; background:#f1f1f1; border-radius:50rem; font-size:12px; color:#444; white-space:nowrap; transform:translateX(-50%) translateY(-20px); transition:0.3s ease;}
.area_util > ul > li > a span{ display: none!important; }
.area_util [data-util]:before{content:''; display:block; width:1.5625em; height:1.5625em; background: no-repeat 50% / contain; }
.area_util [data-util="login"]:before{background-image:url(../images/common/img_util_login.png);}
.area_util [data-util="logout"]:before{background-image:url(../images/common/img_util_logout.png);}
.area_util [data-util="join"]:before{background-image:url(../images/common/img_util_join.png);}
.area_util [data-util="mypage"]:before{background-image:url(../images/common/img_util_mypage.png);}
.area_util [data-util="basket"]:before{background-image:url(../images/common/img_util_basket.png);}
.area_util [data-util="basket"] i{display:flex; justify-content: center; align-items: center; position:absolute; right:-0.66666667em; top:-0.33333333em; width: 1.5em; height: 1.5em; box-sizing: border-box; background:#ea6d22; border-radius:100%; font-size: 12px; color:#fff;}
.area_util > ul > li > a:hover span{opacity:1; transform:translateX(-50%) translateY(0px);}
.link_community{ position: relative; padding:10px 0; font-size: 14px; font-weight:500; color: #1e1e1e; }
.link_community::before{ content: 'ㅣ'; display: inline-block; margin-right: 1.6em; font-family: '굴림', 'Gulim', Sans-serif; font-weight: 400; color: #c6c6c6; }
.top_community{position:relative;}
.top_community .community_sub{opacity:0; visibility:hidden; position:absolute; padding:15px; margin-top:5px; left:22px; width:120px; background:#fff; border:1px solid #222; box-sizing:border-box; z-index:100; transition:0.3s ease; }
.top_community:hover .community_sub{opacity:1; visibility:visible;}
.top_community .community_sub li+li{margin-top:3px;}
.top_community .community_sub a{display:block; font-size:14px; font-weight:500; color:#222; transition:0.2s ease;}
.top_community .community_sub a:hover{opacity:0.6;}

/* sub menu */
.header_bottom{ padding: .96875em 0px; border: 1px solid #333333; border-width: 1px 0; }
.header_bottom__inr{ display: flex; justify-content: space-between; }
.header_bottom__nav{ flex: 0 calc( 100% - 135px); box-sizing: border-box; }
.gnb{ display: flex; justify-content: space-between; gap: 2em; }
.gnb > li{ position: relative; }
.gnb a{ color: #1e1e1e; }
.gnb_link__depth1{ white-space: nowrap; font-size:15px; font-weight:400; }
.gnb__submenu{ opacity:0; visibility:hidden; position:absolute; top:35px; left:50%; transform:translateX(-50%); z-index:90; width:100%; min-width:165px; box-sizing:border-box; padding:20px 20px; background:#fff; border:1px solid #222; text-align:left; transition:0.3s ease; }
.gnb > li:hover .gnb__submenu{opacity:1; visibility:visible;}
.gnb__submenu li+li{margin-top:5px;}
.gnb__submenu li a{font-size:14px;}
.gnb .community_mo{display:none;}

/* button menu */
.btn_menu{ overflow: hidden; display: inline-flex; align-items: center; position:relative; width:22px; height:22px; background: 0; font-size:0px; text-align:center; transition:0.5s ease-in-out;}
.header_top .btn_menu{ display: none; }
.btn_menu span{ display:block; position:relative; width:100%; height:16px; margin:0 auto; }
.btn_menu span i,
.btn_menu span:before,
.btn_menu span:after{display:block; position:absolute; height:2px; background:#1e1e1e; transform:translateX(0px);}
.btn_menu span:before{content:''; width:100%;}
.btn_menu span:after{content:''; width:100%;}
.btn_menu span:before{right:0px; top:0px; transition:transform 0.5s ease 1.2s;}
.btn_menu span:after{left:0px; bottom:0px; transition:transform 0.5s ease 1s;}
.btn_menu span i{opacity:1; left:0px; top:7px; width:100%; transition:opacity 0.3s ease 0s, transform 0.5s ease 1.1s;}
.btn_menu em{display:block; overflow:hidden; position:absolute; top:50%; left:50%; width:100%; height:16px; margin:-8px 0 0 -9.5px; transform:translateX(100%); transition:transform 0.5s ease 0.5s;}
.btn_menu em i{display:block; position:absolute; width:0px; height:2px; background:#222; transform:rotate(0);}
.btn_menu em i:nth-of-type(1){top:1px; left:0px; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, top 0.5s ease 0s;}
.btn_menu em i:nth-of-type(2){bottom:1px; left:0px; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, bottom 0.5s ease 0s;}
.btn_menu:hover span i{opacity:0;}
.btn_menu.active span i,
.btn_menu.active span:before,
.btn_menu.active span:after{transform:translateX(-100%);}
.btn_menu.active span:before{transition-property:transform; transition-delay:0s;}
.btn_menu.active span i{transition-property:transform; transition-delay:0.1s;}
.btn_menu.active span:after{transition-property:transform; transition-delay:0.2s;}
.btn_menu.active em{transform:translateX(0); transition-duration:0s; transition-delay:0s;}
.btn_menu.active em i:nth-of-type(1){top:6px; width:100%; transform:rotate(45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}
.btn_menu.active em i:nth-of-type(2){bottom:8px; width:100%; transform:rotate(-45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}

/* menu all */
.area_menu_all{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; z-index:90; width:100%; height:100%; padding:0px; background:transparent; border-width:0px; transition:0.3s ease 0.7s;}	
.area_menu_all > ul > li:not(.gnb_cate){display:block;}
.area_menu_all .btn_close{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; left:0px; z-index:1; display:block; width:100%; height:100%; background:rgba(0,0,0,0.3); font-size:0px; transition:0.3s ease;}
.area_menu_all .area_menu_all__gnb{overflow-y:auto; position:absolute; padding-top:30px; top:0px; left:-80%; z-index:99; max-width: 340px; width:80%; height:100%; background:#fff; transition:0.7s ease;}
.area_menu_all > ul li{position:relative;}
.area_menu_all > ul > li{display:block; margin-bottom:10px; padding:0px;}
.area_menu_all > ul > li > a{float:none; display:block; width:auto; padding:10px 40px 10px 15px; margin-left:0px; font-size:16px; text-align:left; font-weight:400;}
.area_menu_all > ul > li > ul{display:none; float:none; opacity:1; visibility:visible; position:static; width:auto; margin:0 15px 15px; padding:10px 5px; background:#f8f8f8; border-width:0px; transition:none; transform:none;}
.area_menu_all > ul > li > ul > li{display:block; margin:0px;}
.area_menu_all > ul > li > ul > li:hover > a,
.area_menu_all > ul > li > ul > li:focus > a{color:#444;}
.area_menu_all > ul > li > ul > li.only{width:100%;}
.area_menu_all > ul > li > ul > li.active > a,
.area_menu_all > ul > li > ul > li.active:hover > a,
.area_menu_all > ul > li > ul > li.active:focus > a{color:#f2483b;}
.area_menu_all > ul > li > ul > li > a{display:block; width:auto; padding:10px 40px 10px 10px; font-size:14px;}
.area_menu_all > ul > li > ul > li > *{display:block; vertical-align:middle;}	
.area_menu_all > ul > li > ul > li:last-child > a{border-bottom-width:0px;}
.area_menu_all > ul > li > ul > li:last-child > ul{border-top:1px solid #d8d8d8; border-bottom-width:0px;}
.area_menu_all > ul > li > ul > li > ul{padding:10px 15px; background:#eaeaea; border-bottom:1px solid #d8d8d8;}
.area_menu_all > ul > li > ul > li > ul > li{display:block;}
.area_menu_all > ul > li > ul > li > ul > li > a{padding:2px 0px; color:#333;}
.area_menu_all .open{display:block; position:absolute; right:5px; top:5px; width:35px; height:35px; background:transparent; font-size:0px;}
.area_menu_all .open:before,
.area_menu_all .open:after{content:''; display:block; position:absolute; top:50%; left:50%; width:12px; height:2px; margin-top:-6px; background:#cfcece;}
.area_menu_all .open:before{margin-left:-8px; transform:rotate(45deg); transform-origin:0 0;}
.area_menu_all .open:after{margin-left:-5px;transform:rotate(-45deg); transform-origin:100% 0;}
.area_menu_all .open.active{transform:rotate(180deg);}
.area_menu_all .open:focus{outline:none;}
.area_menu_all.active,
.area_menu_all.active .btn_close{opacity:1; visibility:visible; transition-delay:0s;}
.area_menu_all.active .area_menu_all__gnb{left:0px;}
.area_menu_all__gnb .community_mo{display:block;}

.header_bottom.fixed{position:fixed; top:0; left:0; width:100%; background:#fff; z-index:90; border-top:0;}

@media(max-width:1279px){
	.header_search{ order: 3; max-width: none; }
	.logo + .area_util{ width: auto; }
	.header_top .btn_menu{ display: block; margin-left: 22.4px; }

	.header_bottom__inr{ width: 100%; }
	.header_bottom .btn_menu{ display: none; }
	.header_bottom__nav{ overflow: auto hidden; flex-basis: 100%; padding: 0 4vw; }
	.gnb > li:last-child{ padding-right: 4vw; }
	.gnb__submenu{ display: none; }
    
    
    
    
}
@media(max-width:767px){
	.header_top{ padding: .96875em 0px }
	.top_community{ display: none; }
	.logo__svg{ width: 130px; }
	.area_util > ul{ margin-right: 0; font-size: 12px; }
	.area_util > ul > li + li{ margin-left: .8em; }
	.gnb_link__depth1{ font-size: 14px; }

	.gnb{ gap: 1.5em; }
    
    .header_bottom{padding:0.6em 0px;}
    
    .header_search{height:36px;}
    #header .header_search__input{padding:4px 0; height:32px;}
    .header_search__button{height:32px; background-size:50%;}
    
}

/* footer */
#footer{ padding: 3.875em 0 4.625em; background: #000; color: #efefef; }
#footer .logo path{ fill: #fff; }
#footer a{ color: inherit; }
.footer_link{ margin-top: 1.8125em; }
.footer_link__li{ display: inline-block; margin-right: 2.125em; }
.footer_link__a{ font-size:14px; font-weight:300; }
.footer_info{ margin-top: 1.61538462em; font-size:13px; font-weight:100; color: #dfdfdf; }
.footer_info span{ display: inline-block; margin: 0 1.69230769em .38461538em 0; }
.footer_info span b{ margin-right: 0.3em; font-weight: 600; color: #aaa; }
.footer_copy{ margin-top: 3.08333333em; font-size: 12px; font-weight: 300; color: #aaa; }
.footer_copy b{ font-weight: 600; color: #ccc; }
.btn_top{position:relative; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; padding-top:5px; top: 35.5%; right: 0; width: 4.44444444em; height: 4.44444444em; background: #333; font-size: 13px; letter-spacing: 0; color: #fff; }
.btn_top svg{display:none;}
.btn_top:before{content:''; display:block; margin-bottom:1px; width:12px; height:12px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(315deg);}
@media(max-width:767px){
	.btn_top{ top: -20px; font-size: 14px; }
	.btn_top path{ transform: scale(.7777777) }
    .footer_info{font-size:12px;}
    .footer_link__li{margin-right:1.2em;}
    .footer_link__a{font-size:13px;}
}

/* shop */
 /* *[data-shop-list="default"] > li > a .percent{padding:10px 15px !important; margin-top:0px !important;}
 *[data-shop-list="default"] > li > a > em{font-size:18px;} */

.lnb{max-width:1200px; margin:0 auto 50px;}
.lnb > ul{text-align:center;}
.lnb > ul > li{display:inline-block; margin:0 5px;}
.lnb > ul > li > a{display:inline-block; display:flex; flex-direction:column; justify-content:center; min-width:140px; height:50px; box-sizing:border-box; border:1px solid #e7e7e7; font-size:14px; text-align:center;}
.lnb > ul > li > a.on{border-color:#222; color:#222;}