@charset "utf-8";

.row {padding:0 20px}
.fixed {position:fixed; top:0; left:0; width:100%; background:rgba(255,255,255,.9); box-shadow:2px 2px 3px rgba(0,0,0,.06); z-index:10}

.mn-nav::-webkit-scrollbar {display:none}
.mn-nav {-ms-overflow-style:none}

/*헤더 영역*/
#header {position:relative; background:#fff}
#header h1.logo {text-align:center; font-size:0}
#header h1.logo a {display:inline-block; margin:23px 0; width:139px; height:14px; background:url(../../../img/h1-logo.png)no-repeat 0 0 / auto 14px}

/*좌측 메뉴*/
#header .mn-open {position:absolute; left:10px; top:23px; width:19px; height:14px; background:url(../../../img/ico-menu-btn.png)no-repeat 0 0 / 19px auto; cursor:pointer}

.mn-nav {position:absolute; overflow-y:hidden; left:-100%; top:0; width:100%; height:100vh; background:#fff; z-index:12; transition:all .3s}
.mn-nav.on {left:0}

.mn-nav .user-box {padding:26px 20px 18px; background:#ffdc00}
.mn-nav .user-box h2.login {display:inline-block; color:#1e1e1e; font-size:16px; font-weight:300; line-height:100%; letter-spacing:-0.2px}
.mn-nav .user-box h2.login ins {font-weight:500}
.mn-nav .user-box span.order-check {padding-left:10px; font-size:14px; font-weight:300; line-height:100%; letter-spacing:-0.2px}
.mn-nav .user-box span.order-check > i.xi-angle-right-min {font-weight:500}
.mn-nav .user-box .mn-close {position:absolute; right:20px; top:24px; width:14px; height:14px; background:url(../../../img/ico-close-btn.png)no-repeat 0 0 / 14px auto; cursor:pointer}

.mn-nav .user-box .service-link {display:flex; display:-webkit-flex; display:-ms-flex; text-align:center}
.mn-nav .user-box .service-link > a {display:inline-block; flex:1; margin-top:53px}
.mn-nav .user-box .service-link img {display:block; padding-bottom:6px; height:28px; margin:0 auto}

.mn-nav .campaign-bn {border-bottom:1px solid #f2f2f2}
.mn-nav .campaign-bn img {display:block; width:100%; margin:0 auto}

.mn-nav ul.category {display:grid; grid-template-columns:1fr 1fr 1fr; text-align:center}
.mn-nav ul.category > li {border-bottom:1px solid #f2f2f2}
.mn-nav ul.category > li:nth-child(2), ul.category > li:nth-child(5), ul.category > li:nth-child(8), ul.category > li:nth-child(11) {border-left:1px solid #f2f2f2; border-right:1px solid #f2f2f2}
.mn-nav ul.category > li > a {display:block; padding:18px 0; font-size:13px; color:#1e1e1e; font-weight:400; letter-spacing:-0.2px}

#friends {border-top:10px solid #f7f7f7; border-bottom:10px solid #f7f7f7}
#friends .friends-slide {background:#fff}
#friends .friends-slide .swiper-wrapper {text-align:center}
#friends .friends-slide .swiper-wrapper .swiper-slide {margin:20px 0; font-size:14px; color:#1e1e1e; font-weight:300; letter-spacing:-0.2px}
#friends .friends-slide .swiper-wrapper .swiper-slide img {display:block; width:60px; margin:0 auto}

.mn-nav .ad-bn {padding:20px 0; border-top:1px solid #e5e5e5; border-bottom:10px solid #f7f7f7; text-align:center}
.mn-nav .ad-bn a.cheezzzball-bn {display:inline-block; color:transparent; width:calc(50% - 20px); height:19vw; background:url(../../../img/img-ad-bn-01.png)no-repeat 0 0 / 100% auto}
.mn-nav .ad-bn a.niniz-bn {display:inline-block; margin-left:6px; color:transparent; width:calc(50% - 20px); height:19vw; background:url(../../../img/img-ad-bn-02.png)no-repeat 0 0 / 100% auto}

.mn-nav .user-info {border-top:1px solid #f2f2f2}
.mn-nav .user-info a {display:block; padding:18px 0; font-size:14px; color:#222; font-weight:300; letter-spacing:-0.2px; border-bottom:1px solid #f7f7f7}
.mn-nav .user-info a:last-child {border-bottom:none}

.mn-nav .kakao-login {border-top:1px solid #e5e5e5; background:#f7f7f7; text-align:center}
.mn-nav .kakao-login > a {display:inline-block; margin:30px 0 60px; font-size:14px; color:#9a9a9e; font-weight:400; letter-spacing:-0.2px}
.mn-nav .kakao-login i.xi-kakaotalk {font-size:18px; vertical-align:-2px}

/*검색바*/
#header .sch-open {position:absolute; left:47px; top:22px; width:16px; height:16px; background:url(../../../img/ico-sch-btn.png)no-repeat 0 0 / 16px auto; cursor:pointer}

.sch-box {position:absolute; overflow-x:hidden; overflow-y:hidden; left:-100%; top:0; width:100%; background:#fff; z-index:12; transition:all .3s}
.sch-box.on {left:0}
.sch-box .sch-bar {position:relative; margin:15px 0 0 20px}
.sch-box .sch-bar input.sch-edit {width:calc(100% - 66px); background:#eff0f4; border-radius:6px; padding:8px 42px}
.sch-box .sch-bar:before {content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; background:url(../../../img/ico-sch-bar-01.png)no-repeat 0 0 / 16px auto}
.sch-box .sch-bar input.sch-edit[type="text"] {font-size:16px; color:#1e1e1e; font-weight:300; line-height:100%; letter-spacing:-0.2px}
.sch-box .sch-bar input.sch-btn {float:right; background:none; padding:10px 20px 10px 10px; cursor:pointer}
.sch-box .sch-bar input.sch-btn[type="button"] {font-size:16px; color:#1e1e1e; font-weight:400; line-height:100%; letter-spacing:-0.2px}

.sch-box .sch-keyword {margin:10px 0 0 15px; width:100%; overflow:hidden}
.sch-box .sch-keyword:before {content:""; display:block; clear:both}
.sch-box .sch-keyword .keyword-tag {text-align:center}
.sch-box .sch-keyword .keyword-tag .swiper-wrapper .swiper-slide {margin:0 5px; padding:10px 0; font-size:12px; color:#1e1e1e; font-weight:400; line-height:100%; letter-spacing:-0.2px; border:1px solid #e4e4e4; border-radius:30px}

.sch-box .friends-list {margin-top:12px; border-top:1px solid #e0e0e0; background:#f9f9f9; height:100vh; text-align:left; font-size:0}
.sch-box .friends-list a {display:inline-block; margin-top:20px; font-size:1px; width:33.3333%; height:30vw; padding:0 10px; box-shadow:0 0 12px rgba(0,0,0,.06)}
.sch-box .friends-list a:nth-child(1) {background:url(../../../img/img-friends-list-01.png)no-repeat 0 0 / 100% auto}
.sch-box .friends-list a:nth-child(2) {background:url(../../../img/img-friends-list-02.png)no-repeat 0 0 / 100% auto}
.sch-box .friends-list a:nth-child(3) {background:url(../../../img/img-friends-list-03.png)no-repeat 0 0 / 100% auto}
.sch-box .friends-list a:nth-child(4) {background:url(../../../img/img-friends-list-04.png)no-repeat 0 0 / 100% auto}
.sch-box .friends-list a:nth-child(5) {background:url(../../../img/img-friends-list-05.png)no-repeat 0 0 / 100% auto}
.sch-box .friends-list a:nth-child(6) {background:url(../../../img/img-friends-list-06.png)no-repeat 0 0 / 100% auto}
.sch-box .friends-list a:nth-child(7) {background:url(../../../img/img-friends-list-07.png)no-repeat 0 0 / 100% auto}
.sch-box .friends-list a:nth-child(8) {background:url(../../../img/img-friends-list-08.png)no-repeat 0 0 / 100% auto}

/*장바구니*/
#header .pik-open {position:absolute; right:45px; top:21px; width:19px; height:18px; background:url(../../../img/ico-pik-btn.png)no-repeat 0 0 / 19px auto; cursor:pointer}

.my-pikup {display:none; position:absolute; left:0; top:60px; width:100%; height:100vh; background:#fff; z-index:11}
.my-pikup h3 {padding:22px 0; font-size:22px; color:#1e1e1e; font-weight:500; line-height:100%; letter-spacing:-0.2px}
.my-pikup .pik-box {border-top:1px solid #e3e5e8; height:inherit; background:#f7f7f7; text-align:center}
.my-pikup .pik-box img {display:inline-block; margin-top:100px}
.my-pikup .pik-box p.txt {margin-top:15px; font-size:14px; color:#333; font-weight:300; line-height:1.4}
.my-pikup .pik-box a.btn {display:inline-block; margin-top:18px; background:#3c404b; color:#fff; font-size:12px; font-weight:500; line-height:100%; padding:12px 40px; border-radius:3px}

/*언어별*/
#header .lang-open {position:absolute; right:10px; top:21px; width:19px; height:19px; background:url(../../../img/ico-lang-btn.png)no-repeat 0 0 / 19px auto; cursor:pointer}
#header .lang-open.on {background:url(../../../img/ico-lang-btn02.png)no-repeat 0 0 / 19px auto}

/*탭메뉴 영역*/
#header .tab-menu > ul.tab-list {padding:0 20px; text-align:center; font-size:0; border-bottom:1px solid #ededed}
#header .tab-menu > ul.tab-list > li {display:inline-block; width:20%}
#header .tab-menu > ul.tab-list > li > a {display:block; position:relative; padding:11px 0; color:#000; font-size:15px; font-weight:300; line-height:100%; letter-spacing:-1px}
#header .tab-menu > ul.tab-list > li > a.on {font-weight:bold; border-bottom:3px solid #000}
#header .tab-menu > ul.tab-list > li > a:after {content:""; position:absolute; top:8px; right:10px; width:4px; height:4px; border-radius:4px; background:#ff6128}
#header .tab-menu > ul.tab-list > li:nth-child(1) > a:after, li:nth-child(2) > a:after {display:none}

/*콘텐츠 영역*/
#main .main-bn {position:relative; background:#ffd401; height:19.5598vh}
#main .main-bn h2 {position:absolute; left:20px; top:50%; transform:translateY(-50%); font-size:23px; font-weight:500; color:#fff; line-height:100%}
#main .main-bn img {position:absolute; right:34px; top:50%; transform:translateY(-50%); width:120px}

#main .category ul.tab-list {position:relative; font-size:0; text-align:center}
#main .category ul.tab-list li {display:inline-block; border-bottom:1px solid #f2f2f2; padding:16px 0; width:50%; color:#111; font-size:15px; font-weight:400; line-height:100%; letter-spacing:-0.2px; cursor:pointer}
#main .category ul.tab-list:before {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:1px; height:24px; background:#e3e5e8}

#main .shop-item ul.item-list {font-size:0}
#main .shop-item ul.item-list li {display:inline-block; position:relative; width:50%; padding:4px 6px}
#main .shop-item ul.item-list li:after {content:""; position:absolute; right:.75rem; top:7.5rem; width:14px; height:18px; background:url(../img/ico-basket-default.png)no-repeat 0 0 / 14px auto}
#main .shop-item ul.item-list img {width:100%; margin:0 auto}
#main .shop-item ul.item-list h3.tit {font-size:14px; color:#111; font-weight:300; line-height:100%; letter-spacing:-0.2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
#main .shop-item ul.item-list p.price {padding-top:10px; font-size:14px; color:#111; font-weight:600; line-height:100%}
#main .shop-item .list-num {text-align:center; padding:46px 0 50px}
#main .shop-item .list-num span {color:#ccc; font-size:12px; font-weight:500; padding:0 12px; cursor:pointer}
#main .shop-item .list-num span.num1 {color:#333; text-decoration:underline}
#main .shop-item .list-num .num-more {display:inline-block; position:relative; width:30px; height:30px; cursor:pointer; border-radius:15px; border:1px solid #ededed; background:#fff; vertical-align:middle}
#main .shop-item .list-num .num-more:before {content:""; position:absolute; top:10px; right:8px; width:10px; height:2px; background:#9f9f9f; transform:rotate(40deg)}
#main .shop-item .num-more:after {content:""; position:absolute; bottom:10px; right:8px; width:10px; height:2px; background:#9f9f9f; transform:rotate(-40deg)}

.category1-hide {position:absolute; width:100%; background:#fff; top:-100%; left:0; z-index:31; transition:all .3s}
.category1-hide.on {top:0}
.frie-group {font-size:0; text-align:left; padding:20px 16px}
.frie-group div {display:inline-block; width:20%; padding:6px 4px; text-align:center}
.frie-group div img {width:100%; margin:0 auto}
.frie-group div h3 {color:#1e1e1e; font-size:13px; font-weight:300; line-height:1.8; letter-spacing:-0.2px}
.frie-group div.on h3 {font-weight:bold}
.frie-group div.all {position:relative}
.frie-group div.all:before {content:""; position:absolute; top:6px; right:4px; width:18px; height:18px; background:url(../img/ico-category1-01-done.png)no-repeat 0 0 / 18px auto}

.category1-dim {display:none; position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.5); z-index:30}

.category2-hide {position:absolute; width:100%; background:#fff; top:-100%; left:0; z-index:31; transition:all .3s}
.category2-hide.on {top:0}
.option {font-size:14px; color:#7f7f7f; font-weight:400; line-height:100%; letter-spacing:-0.2px; padding:17px 20px; cursor:pointer}
.option.on {position:relative; color:#333; font-weight:bold; background:#f7f7f7}
.option.on:after {content:""; position:absolute; right:20px; top:50%; transform:translateY(-50%); width:20px; height:16px; background:url(../img/ico-check-01.png)no-repeat 0 0 / 20px auto}
.category2-dim {display:none; position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.5); z-index:30} 

/*푸터 영역*/
#footer {margin-top:10px; border-top:1px solid #e5e5e5; background:#2e2e2e; padding-bottom:40px}
#footer .ft-nav {padding-top:20px; font-size:0}
#footer .ft-nav a {display:inline-block; padding:20px 12px; font-size:12px; color:#bdbdbd; font-weight:300; line-height:100%}
#footer .ft-nav a:first-child {padding-left:0}
#footer .ft-info p {font-size:12px; font-weight:300; line-height:1.6}
#footer .ft-info p.ft-info-txt1 {color:#bdbdbd}
#footer .ft-info p.ft-info-txt2 {padding-top:10px; color:#fff}
#footer .ft-info p.ft-copy {padding-top:20px; color:#bdbdbd}