@charset "utf-8";
@import url('common.css?ver=20240718001');

#wrap {min-width:320px; margin:0 auto; background-color:#fff;}
#wrap.fixed {padding-top:57px;}
a.go-top {position:fixed; right:16px; bottom:77px; display:none; width:30px; height:30px; font-size:0; line-height:0; background:url(../images/icon-top.png) no-repeat center center; background-size:contain; z-index:900;}
a.go-top.on {display:block;}
a[banrNo="0"] {cursor:default;}

/* 상단 띠배너 */
.header-banner {width:100%; height:42px; text-align:center; background-color:#000; overflow:hidden;}
.header-banner > ul > li > a {display:block; padding:0 16px; padding-right:50px; line-height:42px; color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.header-banner > ul > li > a[href="#hidden"] {position:absolute; right:0; top:50%; transform:translateY(-50%); width:42px; height:42px; padding:0; font-size:0; line-height:0; background:url(../images/icon-x.png) no-repeat center center; filter:brightness(0) invert(1);}

/* 레이아웃 */
.header > .navigation {position:relative; width:100%; padding:16px; border-bottom:1px solid #eee; background-color:#fff; box-sizing:border-box; z-index:902;}
.header > .navigation > h1 {height:24px; text-align:center; font-size:18px; font-weight:600; line-height:24px;}
.header > .navigation > h1.off {position:absolute; left:-100000px; top:-100000px;}
.header > .navigation > h1 > a {display:inline-block; height:100%; color:#000; cursor:default;}
.header > .navigation > h1 > a.shop {display:inline-block; padding-right:16px; background:url(../images/icon-dropdown.png) no-repeat right center; cursor:pointer;}
.header > .navigation > h1 > a.shop.on {background-image:url(../images/icon-dropdown-on.png);}
.header > .navigation > h1 > a > img {height:100%;}
.header > .navigation > a.icon {position:absolute; top:16px; display:block; width:22px; height:24px; font-size:0; line-height:0; background-repeat:no-repeat; background-position:center center; background-size:contain;}
.header > .navigation > a.icon.icon-back {left:16px; width:24px; background-image:url(../images/icon-back.svg);}
.header > .navigation > a.icon.icon-home {right:16px; width:24px; background-image:url(../images/icon-home.svg);}
.header > .navigation > a.icon.icon-search {display:none; right:52px; background-image:url(../images/icon-search.svg);}
.header > .navigation > a.icon.icon-cart {display:none; right:16px; background-image:url(../images/icon-cart.svg); background-position:center 1px;}
.header > .navigation > a.icon.icon-cart > em {position:absolute; right:-9px; top:9px; display:inline-block; min-width:18px; height:18px; padding:0 4px; font-size:10px; font-weight:600; line-height:18px; text-align:center; color:#fff; background-color:#fa6c6c; border-radius:9px; box-sizing:border-box;}

.header > .navigation > .search-form {padding-left:40px;}
.header > .navigation > .search-form > form {width:100%;}
.header > .navigation > .search-form > form > * {display:flex;}
.header > .navigation > .search-form > form > * > input[type="text"] {width:calc(100% - 24px); height:24px; padding:0; font-size:16px; line-height:24px; border-style:none;}
.header > .navigation > .search-form > form > * > input[type="submit"] {width:24px; height:24px; font-size:0; line-height:0; background:url(../images/icon-search.svg) no-repeat center center;}

.header > .category {display:none; position:absolute; left:0; top:57px; width:100%; padding:26px 16px 6px 16px; background-color:#fff; z-index:999; box-sizing:border-box;}
.header > .category.on {display:block;}
.header > .category > ul:after {clear:both; display:block; content:'';}
.header > .category > ul > li {float:left; width:50%; margin-bottom:26px; font-size:15px; line-height:17px;}
.header > .category > ul > li > a {font-size:16px; line-height:18px; color:#a0a0a0;}
.header > .category > ul > li > a.on {font-weight:600; color:#000;}
.header > .category-screen {display:none; position:fixed; left:0; top:57px; width:100%; height:calc(100% - 57px); background-color:#000; background-color:rgba(0, 0, 0, 0.7); z-index:998;}
.header > .category.on + .category-screen {display:block;}

.header.banner > .category {top:99px;}
.header.banner > .category-screen {top:99px; height:calc(100% - 99px);}

.header > .hambuger {position:fixed; left:-100vw; top:0; width:calc(100% - 50px); height:100vh; padding:16px; background-color:#fff; z-index:999; box-sizing:border-box; transition:left 0.3s;}
.header > .hambuger.on {left:0;}
.header > .hambuger > .welcome {position:relative; padding-bottom:28px;}
.header > .hambuger > .welcome > dt {font-size:22px; font-weight:600; line-height:30px;}
.header > .hambuger > .welcome > dt > a > em {display:inline-block; width:30px; height:30px; font-size:0; line-height:0; background:url(../images/icon-welcome.png) no-repeat center center; vertical-align:middle;}
.header > .hambuger > .welcome > dd {margin-top:6px; font-size:17px;}
.header > .hambuger > .welcome > dd > a {position:absolute; right:0; top:12px; display:block; width:36px; height:31px; font-size:0; line-height:0; background:url(../images/icon-welcome-wish.png) no-repeat center center;}
.header > .hambuger > .welcome > dd > a > em {display:inline-block; position:absolute; left:20px; top:-2px; min-width:10px; padding:5px 5px 3px 5px; font-size:10px; font-weight:600; line-height:10px; text-align:center; color:#fff; background-color:#fa6c6c; border-radius:9px;}
.header > .hambuger > .welcome.off > dd > a {opacity:0.5;}
.header > .hambuger > .scroll {max-height:calc(100vh - 226px); overflow-y:auto; overflow-x:hidden;}
.header > .hambuger::-webkit-scrollbar, 
.header > .hambuger > .scroll::-webkit-scrollbar {display:none;}
.header > .hambuger > .scroll > ul > li {padding-top:16px; margin-top:16px; border-top:1px solid #ededed;}
.header > .hambuger > .scroll > ul > li:first-child {margin-top:0;}
.header > .hambuger > .scroll > ul > li > a {display:block; font-size:16px; font-weight:600; line-height:18px; color:#222;}
.header > .hambuger > .scroll > ul > li > ul {margin-top:16px; padding-left:16px;}
.header > .hambuger > .scroll > ul > li > ul:after {clear:both; display:block; content:'';}
.header > .hambuger > .scroll > ul > li > ul > li {float:left; width:50%; padding:0; margin:0; margin-top:8px; border-style:none;}
.header > .hambuger > .scroll > ul > li > ul > li:nth-child(1),
.header > .hambuger > .scroll > ul > li > ul > li:nth-child(2) {margin-top:0;}
.header > .hambuger > .scroll > ul > li > ul > li > a {font-size:15px; font-weight:400; line-height:17px; color:#616161;}
.header > .hambuger > .login,
.header > .hambuger > .logout {display:block; width:100%; margin-top:56px; font-weight:600; line-height:50px; text-align:center; color:#a0a0a0; border:1px solid #ededed; border-radius:3px; box-sizing:border-box;}
.header > .hambuger-screen {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000; background-color:rgba(0, 0, 0, 0.7); z-index:998;}
.header > .hambuger.on + .hambuger-screen {display:block;}
.header > .hambuger.app > .welcome > dd > a {right:39px;}
.header > .hambuger.app > .welcome > dd > a + a {right:0px; width:29px; background-image:url(../images/icon-welcome-push.png); background-size:auto 23px;}
.header > .hambuger.app > .welcome.off > dd > a + a {opacity:1;}
.header > .hambuger.app > .welcome > dd > a + a > em {display:none; left:10px;}
.header > .hambuger.app > .welcome > dd > a + a > em.on {display:inline-block;}

.container {min-height:calc(100vh - 57px - 67px); padding-bottom:32px;  box-sizing:border-box;}
.container > .left-navigation {display:none;}
.container.flex > .contents > div > h2 {display:none;}

.footer {padding:16px; margin-bottom:67px; background-color:#f1f1f1;}
.footer > ul {display:flex;}
.footer > ul > li {margin-left:6px; line-height:24px;}
.footer > ul > li:before {margin-right:6px; content:'|';}
.footer > ul > li:first-child {margin-left:0;}
.footer > ul > li:first-child:before {content:''; margin-right:0;}
.footer > ul > li > a {font-size:13px; letter-spacing:-0.5px;}
.footer > div {margin-top:16px; padding-top:16px; font-size:12px; line-height:16px; border-top:1px solid #ccc;}
.footer > div > ul + ul {margin-top:4px;}
.footer > div > ul > li {margin-top:4px;}
.footer > div > ul > li:first-child {margin-top:0;}
.footer > div > ul > li > a {display:inline-block; margin-left:8px; color:#333; text-decoration:underline;}
.footer > div > strong,
.footer > div > div {display:block; margin-top:16px; font-weight:400; letter-spacing:-0.5px;}
.footer > div > strong {letter-spacing:-0.6px;}
.footer > div > strong > em {display:block; margin-bottom:16px;}

.navi-bottom {position:fixed; left:0; bottom:0; width:100%; min-width:320px; height:67px; border-top:1px solid #eee; background-color:#fff; z-index:900; box-sizing:border-box; transition:all 0.3s;}
.navi-bottom > ul {display:flex; height:100%; flex-wrap:wrap;}
.navi-bottom > ul > li {width:20%; text-align:center;}
.navi-bottom > ul > li > a {display:block; height:100%; font-size:10px; font-weight:600; line-height:12px; color:rgba(0, 0, 0, 0.3);}
.navi-bottom > ul > li > a:before {display:block; content:''; width:22px; height:36px; margin:0 auto 4px; background-position:center bottom; background-repeat:no-repeat; background-size:100% auto;}
.navi-bottom > ul > li.on > a {color:#fa3246;}
.navi-bottom > ul > li.menu > a:before {background-image:url(../images/gnb-menu.png);}
.navi-bottom > ul > li.menu.on > a:before {background-image:url(../images/gnb-menu-on.png);}
.navi-bottom > ul > li.shop > a:before {width:20.56px; background-image:url(../images/addon/gnb-shop.png);}
.navi-bottom > ul > li.shop.on > a:before {background-image:url(../images/addon/gnb-shop-on.png);}
.navi-bottom > ul > li.main > a:before {width:19.75px; background-image:url(../images/addon/gnb-main.png);}
.navi-bottom > ul > li.main.on > a:before {background-image:url(../images/addon/gnb-main-on.png);}
.navi-bottom > ul > li.wish > a:before {width:22.76px; background-image:url(../images/addon/gnb-wish.png);}
.navi-bottom > ul > li.wish.on > a:before {background-image:url(../images/addon/gnb-wish-on.png);}
.navi-bottom > ul > li.mine > a:before {width:20.97px; background-image:url(../images/addon/gnb-mine.png);}
.navi-bottom > ul > li.mine.on > a:before {background-image:url(../images/addon/gnb-mine-on.png);}
.navi-bottom > ul > li.ordr > a:before {width:25.31px; background-image:url(../images/addon/gnb-ordr.png);}
.navi-bottom > ul > li.ordr.on > a:before {background-image:url(../images/addon/gnb-ordr-on.png);}

.empty {padding:200px 0 100px 0; font-size:18px; color:#999; text-align:center; background:url(../images/icon-empty.png) no-repeat center 50px; background-size:100px 100px;}

.fixed .header > .navigation {position:fixed; left:0; top:0; min-width:320px; background-color:#fff !important;}
.fixed .header > .category {position:fixed; left:0; top:57px !important; min-width:320px;}
.fixed .header > .category-screen {top:57px !important; height:calc(100% - 57px) !important;}

.fixed.down .navi-bottom {height:0; overflow:hidden; opacity:0;}
.fixed.down .footer {margin-bottom:0;}
.fixed.down a.go-top {bottom:16px;}

.none-bottom .header > .hambuger {display:none;}
.none-bottom .navi-bottom {display:none;}
.none-bottom a.go-top {bottom:16px;}

.sticky a.go-top,
.sticky .fixed.down a.go-top {bottom:108px;}
.sticky .empty {min-height:calc(100vh - 57px - 108px);}

.layer .header > .header-banner {display:none;}
.layer .header > .navigation > a.icon.icon-back,
.layer .header > .navigation > a.icon.icon-home {display:none;}
.layer .footer {display:none;}
.layer.back .header > .navigation > a.icon.icon-back {display:block;}

/** PC */
@media all and (min-width:760px) {
	a.go-top {right:calc((100% - 1180px) / 2 - 46px); bottom:16px !important;}
	
	.header-banner > ul > li > a {width:1180px; padding:0; margin:0 auto;}
	
	.header > .navigation {padding:0; background-color:#fff !important; filter:unset !important;}
	.header > .navigation > div {display:flex; align-items:center; justify-content:space-between; width:1180px; height:100px; margin:0 auto; transition:all 0.3s;}
	.header > .navigation > div > .logo {position:relative; display:flex; align-items:center;}
	.header > .navigation > div > .logo > h1 {height:30px;}
	.header > .navigation > div > .logo > h1 > a > img {height:100%;}
	.header > .navigation > div > .logo > div {margin-left:32px;}
	.header > .navigation > div > .logo > div > ul {display:flex; align-items:center; justify-content:center;}
	.header > .navigation > div > .logo > div > ul > li {display:flex; align-items:center; justify-content:center;}
	.header > .navigation > div > .logo > div > ul > li > a {display:block; padding:0 32px; font-size:16px; font-weight:600; line-height:38px;}
	.header > .navigation > div > .logo > div > ul > li > a.on {color:#fa6c6c;}
	.header > .navigation > div > .util {position:relative; display:flex; align-items:flex-end; flex-direction:column;}
	.header > .navigation > div > .util > ul {position:absolute; right:0; top:-25px; display:flex; align-items:center;}
	.header > .navigation > div > .util > ul > li {font-size:13px; line-height:15px;}
	.header > .navigation > div > .util > ul > li:before {display:inline-block; width:1px; height:10px; margin:0 10px; background-color:#dcdee0; content:'';}
	.header > .navigation > div > .util > ul > li:first-child:before {display:none;}
	.header > .navigation > div > .util > div {display:flex; align-items:center;}
	.header > .navigation > div > .util > div > a.icon {display:block; width:22px; height:24px; margin-left:24px; font-size:0; line-height:0; background-repeat:no-repeat; background-position:center center; background-size:contain;}
	.header > .navigation > div > .util > div > a.icon:first-child {margin-left:0;}
	.header > .navigation > div > .util > div > a.icon.icon-search {background-image:url(../images/icon-search.svg);}
	.header > .navigation > div > .util > div > a.icon.icon-cart {position:relative; background-image:url(../images/icon-cart.svg);}
	.header > .navigation > div > .util > div > a.icon.icon-cart em {position:absolute; left:9px; top:9px; display:inline-block; min-width:18px; height:18px; padding:0 4px; font-size:10px; font-weight:600; line-height:18px; text-align:center; color:#fff; background-color:#fa6c6c; border-radius:9px; box-sizing:border-box;}
	.header > .navigation > div > .util > div > a.icon.icon-mypage {background-image:url(../images/icon-mypage.png);}
	
	.fixed .header > .navigation > div {height:60px;}
	.fixed .header > .navigation > div > .logo > h1 {height:20px;}
	.fixed .header > .navigation > div > .logo > div {margin-left:16px;}
	.fixed .header > .navigation > div > .logo > div > ul > li > a {padding:0 16px; font-size:14px; line-height:24px;}
	.fixed .header > .navigation > div > .util > ul {display:none;}
	
	.container {min-height:calc(100vh - 74px); padding-bottom:64px;}
	.container.flex {display:flex; align-items:flex-start; justify-content:space-between; width:1180px; margin:0 auto; margin-top:32px;}
	.container.flex > .left-navigation {display:block; width:250px;}
	.container.flex > .left-navigation > ul {padding:32px; border:1px solid #ebedee; border-radius:2px;}
	.container.flex > .left-navigation > ul > li {padding-top:11px; margin-top:11px; border-top:1px solid #ebedee;}
	.container.flex > .left-navigation > ul > li:first-child {padding-top:0; margin-top:0; border-top-style:none;}
	.container.flex > .left-navigation > ul > li > strong {display:block; margin-top:11px; font-size:17px; font-weight:600; line-height:19px;}
	.container.flex > .left-navigation > ul > li:first-child > strong { margin-top:0;}
	.container.flex > .left-navigation > ul > li > ul {margin-top:11px;}
	.container.flex > .left-navigation > ul > li > ul > li > a {display:block; padding:11px 0; font-size:15px; line-height:17px;}
	.container.flex > .left-navigation > ul > li > ul > li.on > a,
	.container.flex > .left-navigation > ul > li > ul > li > a:hover {font-weight:600;}
	.container.flex > .contents {width:calc(100% - 250px - 60px);}
	.container.flex > .contents > div > h2 {display:block; font-size:20px; font-weight:600; line-height:22px; padding-bottom:16px; margin-bottom:16px; border-bottom:2px solid #ebedee;}
	
	.footer {margin-bottom:0;}
	.footer > ul {width:1180px; margin:0 auto;}
	.footer > ul > li {margin-left:10px;}
	.footer > ul > li:before {margin-right:10px;}
	.footer > div {width:1180px; margin:0 auto; margin-top:16px;}
	.footer > div > ul {display:flex; align-items:center;}
	.footer > div > ul > li {margin-top:0;}
	.footer > div > ul > li:before {display:inline-block; width:1px; height:10px; margin:0 10px; background-color:#666; content:'';}
	.footer > div > ul > li:first-child:before {display:none;}
	
	.navi-bottom {display:none !important;}
	
	.empty {padding-top:300px; background-position:center 150px;}
	.sticky .empty {min-height:unset;}
}