@charset "utf-8";

/*스크롤 영역*/
body::-webkit-scrollbar {display:none}
body {-ms-overflow-style:none}

/*스크롤 위아래 버튼*/
.scroll-btn {position:fixed; right:20px; bottom:94px; z-index:15}
.scroll-btn a.up-btn:after {content:"\e932"; display:inline-block; font-family:"xeicon"; font-size:50px; line-height:50px; color:rgba(0,0,0,.2)}
.scroll-btn a.down-btn:after {content:"\e938"; display:block; font-family:"xeicon"; font-size:50px; line-height:50px; color:rgba(0,0,0,.4)}

/*하단 바*/
#bottom-bar {position:fixed; bottom:0; width:100%; height:57px; background:#fff; border-top:1px solid #e3e3e3; box-shadow:-1px -3px 6px rgba(0,0,0,.06); z-index:13}
#bottom-bar .bt-sch {position:absolute; left:50%; top:8px; transform:translateX(-50%); width:40px; height:40px; border-radius:40px; background:#f43142 url(../img/ico-sch-bar2.png)no-repeat center / 18px auto; cursor:pointer}
#bottom-bar .left {float:left; font-size:0}
#bottom-bar .right {float:right; font-size:0}
#bottom-bar a {display:inline-block; margin:17px 26px; width:22px; height:22px; font-size:1px; color:transparent; background:rgba(0,0,0,.3); overflow:hidden}
#bottom-bar .left a:nth-child(1) {background:url(../img/ico-bottom-bar1.png)no-repeat 0 0 / auto 22px}
#bottom-bar .left a:nth-child(2) {background:url(../img/ico-bottom-bar2.png)no-repeat 0 0 / 22px auto}
#bottom-bar .right a:nth-child(1) {background:url(../img/ico-bottom-bar3.png)no-repeat 0 0 / 22px auto}
#bottom-bar .right a:nth-child(2) {background:url(../img/ico-bottom-bar4.png)no-repeat 0 0 / 22px auto}


/*헤더 영역*/
#header {position:sticky; top:0; background:#fff; z-index:12}

#header h1.logo {display:inline-block; float:left; font-size:0; width:56px; height:24px; margin:16px 10px 16px 14px}
#header h1.logo a {display:inline-block; width:56px; height:24px; background:url(../img/h1-logo.png)no-repeat 0 0 / 56px auto}

#header .sch-bar {position:relative; float:left; width:calc(100% - 140px); height:36px; margin-top:10px}
#header .sch-bar input.sch-edit {width:100%; height:inherit; background:#fafafa; border:1px solid #eee; border-radius:16px; padding-left:12px}

#header .sch-bar input.sch-edit:-ms-input-placeholder {color:#666; font-size:12px; font-weight:300; letter-spacing:-1px}
#header .sch-bar input.sch-edit::-webkit-input-placeholder {color:#666; font-size:12px; font-weight:300; letter-spacing:-1px}
#header .sch-bar input.sch-edit::-moz-placeholder {color:#666; font-size:12px; font-weight:300; letter-spacing:-1px}

#header .sch-bar button.sch-btn {position:absolute; color:transparent; top:10px; right:12px; background:url(../img/ico-sch-bar.png)no-repeat 0 0 / 18px auto; cursor:pointer}

#header .cart {float:left; width:24px; height:24px; margin:16px 0 0 14px}

/*메뉴 영역*/
#nav .tab-box {border-bottom:1px solid #e5e5e5; margin:0 auto}

#nav .tab-box .all-btn {position:absolute; bottom:12px; right:8px; width:32px; height:32px; background:rgba(255,255,255,.8); border:1px solid #ddd; border-radius:1px; cursor:pointer; text-align:center; z-index:1}
#nav .tab-box .all-btn:before {content:"\e942"; font-family:"xeicon"; font-size:18px; color:#333; line-height:32px}
#nav .tab-box .all-btn-active:before {content:"\e945"; font-family:"xeicon"; font-size:18px; color:#333; line-height:32px}

.all-btn-hide {display:none; position:absolute; top:105px; width:100%; font-size:0; background:#fff; text-align:left; z-index:12}
.all-btn-hide a {display:inline-block; width:33.3333%; padding:12px 0; font-size:16px; color:#333; font-weight:normal; text-align:center; border:1px solid #f3f3f3; border-top:0; line-height:16px; letter-spacing:-1px}
.all-btn-hide a.on {color:#f43142}
.all-btn-hide a:nth-child(1), .all-btn-hide a:nth-child(4), .all-btn-hide a:nth-child(7), .all-btn-hide a:nth-child(10) {border-left:0}
.all-btn-hide a:nth-child(2), .all-btn-hide a:nth-child(5), .all-btn-hide a:nth-child(8) {border-left:0; border-right:0}
.all-btn-hide a:nth-child(3), .all-btn-hide a:nth-child(6), .all-btn-hide a:nth-child(9) {border-right:0}

.all-btn-hide a:nth-child(3) {position:relative}
.all-btn-hide a:nth-child(3):after {content:""; position:absolute; top:10px; right:16px; width:4px; height:4px; background:#f43142; border-radius:50%}


.all-btn-hide p.edit {padding:0 16px 14px 0; color:#666; font-size:14px; line-height:14px; letter-spacing:-1px; text-align:right}
.all-btn-hide p.edit i.xi-catched {color:#f43142; font-weight:bold; padding-right:8px}

.dim {display:none; position:absolute; left:0; top:105px; z-index:11; width:100%; height:100vh; background:rgba(0,0,0,.8)}

.not-scroll {position:fixed; overflow:hidden; width:100%; height:100%}

#nav #tab-menu ul::-webkit-scrollbar {background:transparent; height:5px}
#nav #tab-menu ul::-webkit-scrollbar-thumb {background:rgba(0,0,0,.3)}
#nav #tab-menu ul::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display:block; height:0; background:transparent}

#nav #tab-menu ul {
    white-space:nowrap; text-align:center; font-size:0;
    overflow-x:auto;
}

#nav #tab-menu li {display:inline-block; position:relative}
#nav #tab-menu a {display:block; color:#333; font-size:16px; font-weight:500; line-height:100%; letter-spacing:-1px; padding:13px 20px 12px}
#nav #tab-menu a.on {color:#f43142; border-bottom:2px solid #f43142}
#nav #tab-menu li:nth-child(3) a:after {content:""; position:absolute; top:10px; right:11px; width:4px; height:4px; background:#f43142; border-radius:50%}

/*슬라이드 영역*/
#main {width:100%; background:#eee}
#visual {padding:10px 0; position:relative}
.swiper-slide {text-align:center; display:flex; align-items:center; justify-content:center}
.swiper-slide img {width:100%}
.swiper-pagination {position:absolute; bottom:20px; right:12px; color:rgba(255,255,255,.6); font-size:11px; font-weight:400; line-height:100%; padding:8px 12px 8px; background:rgba(0,0,0,.6); border-radius:16px; z-index:10}
span.swiper-pagination-current {font-weight:500; color:#fff}
span.swiper-pagination-total:after {content:"\e914"; margin-left:3px; font-family:"xeicon"; font-size:12px; line-height:100%}

/*실시간 쇼검*/
#keyword-search {height:48px; background:#fff; position:relative}
#keyword-search .label {display:inline-block; float:left; width:83px; height:inherit}
#keyword-search .label span {display:inline-block; margin:14px 0 0 16px; padding:5px 6px; color:#fff; font-size:11px; line-height:11px; letter-spacing:-1px; background:#f33; border-radius:2px}
#keyword-search .keyword-txt {float:left; width:calc(100% - 123px); height:48px; overflow:hidden}
#keyword-search .keyword-txt a {display:block; position:relative; color:#333; font-size:12px; font-weight:normal; line-height:48px; letter-spacing:-1px}
#keyword-search .keyword-txt a.up:after, a.down:after {content:""; position:absolute; bottom:19px; right:16px; transform:translate(0 -50%); width:9px; height:11px}
#keyword-search .keyword-txt a.up:after {background:url(../img/sch-arrow1.png)no-repeat 0 0 / 9px auto}
#keyword-search .keyword-txt a.down:after {background:url(../img/sch-arrow2.png)no-repeat 0 0 / 9px auto}
#keyword-search .keyword-txt span.num {color:#f33; font-weight:bold; font-style:italic; padding-right:10px}
#keyword-search .sch-more {float:right; width:40px; height:inherit; background:#fff; text-align:center; cursor:pointer}
#keyword-search .sch-more:before {content:"\e941"; color:#666; font-size:14px; font-family:"xeicon"; line-height:48px}

.keyword-search-hide {display:none; position:absolute; top:0; left:0; width:100%; height:280px; background:#fff; overflow:hidden; z-index:11}
.keyword-search-hide ul {width:calc(100% * 4); display:flex; transition:.3s}
.keyword-search-hide li {width:calc(100% / 4); height:280px}
.keyword-search-hide li:nth-child(1) {background:#fff}

.keyword-search-hide li h3 {padding:0 0 0 16px; color:#333; font-size:14px; font-weight:bold; line-height:48px; letter-spacing:-1px}
.keyword-search-hide li h3:after {content:"\e944"; font-family:"xeicon"; float:right; padding:0 14px; font-weight:normal}
.keyword-search-hide a {display:block; position:relative; padding:10px 0 10px 16px}
.keyword-search-hide a.up:after, a.down:after {content:""; position:absolute; bottom:15px; right:16px; width:9px; height:11px}
.keyword-search-hide a.up:after {background:url(../img/sch-arrow1.png)no-repeat 0 0 / 9px auto}
.keyword-search-hide a.down:after {background:url(../img/sch-arrow2.png)no-repeat 0 0 / 9px auto}
.keyword-search-hide span.num {color:#f33; font-weight:bold; font-style:italic; padding-right:10px}

.keyword-search-hide input {display:none}
.keyword-search-hide .bullet {position:absolute; bottom:12px; left:50%; transform:translateX(-50%); text-align:center; z-index:11}
.keyword-search-hide .bullet label {width:8px; height:8px; border-radius:8px; display:inline-block; background:#f4f4f4; font-size:0; transition:.5s; cursor:pointer}

#pos1:checked ~ ul {margin-left:0}
#pos2:checked ~ ul {margin-left:-100%}
#pos3:checked ~ ul {margin-left:-200%}
#pos4:checked ~ ul {margin-left:-300%}

#pos1:checked ~ .bullet label:nth-child(1),
#pos2:checked ~ .bullet label:nth-child(2),
#pos3:checked ~ .bullet label:nth-child(3),
#pos4:checked ~ .bullet label:nth-child(4) {background:#f33}

/*주요 콘텐츠*/
#main-content {margin-top:10px; height:149px; background:#fff; text-align:center}
#main-content .inner-box {display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr}
#main-content .inner-box a {display:inline-block; font-size:11px}
#main-content .inner-box img {display:block; width:36px; height:36px; margin:0 auto}
[class*=cell] {border:1px solid rgba(0,0,0,.03); padding:6px 0}

/*이벤트 배너*/
#event-bn {margin:10px 0; height:60px; background:#09abfe; text-align:center}
#event-bn img {width:300px}

/*상품 리스트*/
#card-bn .card-bn1 {background:#fff}
#card-bn .card-thumb img {display:block; width:100%; margin:0 auto}
#card-bn .card-bn1 .card-tt {text-align:center}
#card-bn .card-bn1 .card-tt p.txt1 {display:inline-block; padding:16px 0 6px; width:calc(100% - 32px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#333; font-size:14px; font-weight:normal; line-height:14px; letter-spacing:-1px}
#card-bn .card-bn1 .card-tt p.txt2 {padding:0 0 13px 16px; color:#333; font-size:18px; font-weight:bold; line-height:18px; text-align:left}
#card-bn .card-bn1 .card-tt span {letter-spacing:0}
#card-bn .card-bn1 .card-tt span.disc {color:#f33}
#card-bn .card-bn1 .card-tt del {color:#ccc; font-size:12px; font-weight:normal; vertical-align:top}
#card-bn .card-bn1 .card-coupon {height:49px; border-top:1px solid #f5f5f5; color:#333; font-size:12px; font-weight:normal; line-height:49px; letter-spacing:-1px}
#card-bn .card-bn1 .card-coupon span {letter-spacing:0}
#card-bn .card-bn1 .card-coupon:before {content:""; display:inline-block; margin:0 2px 0 17px; width:46px; height:20px; background:url(../img/ico-coupon1.png)no-repeat 0 0 / 46px auto; vertical-align:-5px}
#card-bn .card-bn1 .card-coupon:after {content:"\e93e"; font-family:"xeicon"; font-size:12px; font-weight:normal; color:#acacac}
#card-bn .card-bn1 .card-delivery {padding:0 16px; height:38px; border-top:1px solid #f5f5f5}
#card-bn .card-bn1 .card-delivery p {color:#666; font-size:12px; font-weight:normal; line-height:38px; letter-spacing:-1px}
#card-bn .card-bn1 .card-delivery span.post {color:#0b83e6; padding:0 6px}
#card-bn .card-bn1 .card-delivery span.buy-num {float:right; letter-spacing:0}

#card-bn .card-bn2 {margin-top:10px; background:#fff}
#card-bn .card-bn2 .card-tt p.txt1 {padding:16px 0 9px 16px; color:#333; font-size:14px; font-weight:normal; line-height:14px; letter-spacing:-1px}
#card-bn .card-bn2 .card-tt p.txt2 {padding:0 0 13px 16px; color:#333; font-size:18px; font-weight:bold; line-height:18px; text-align:left}
#card-bn .card-bn2 .card-tt span {letter-spacing:0}
#card-bn .card-bn2 .card-tt span.disc {color:#f33}
#card-bn .card-bn2 .card-coupon {padding-left:17px; height:49px; border-top:1px solid #f5f5f5; color:#666; font-size:12px; font-weight:normal; line-height:49px; letter-spacing:-1px}
#card-bn .card-bn2 .card-coupon span {letter-spacing:0}
#card-bn .card-bn2 .card-coupon span.point {color:#0b83e6}
#card-bn .card-bn2 .card-delivery {padding:0 16px; height:38px; border-top:1px solid #f5f5f5}
#card-bn .card-bn2 .card-delivery p {color:#666; font-size:12px; font-weight:normal; line-height:38px; letter-spacing:-1px}
#card-bn .card-bn2 .card-delivery span.buy-num {float:right; letter-spacing:0}

#card-bn .card-bn3 {margin-top:10px; background:#fff}
#card-bn .card-bn3 .card-tt {text-align:center}
#card-bn .card-bn3 .card-tt p.txt1 {display:inline-block; padding:16px 0 6px; width:calc(100% - 32px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#333; font-size:14px; font-weight:normal; line-height:14px; letter-spacing:-1px}
#card-bn .card-bn3 .card-tt p.txt2 {padding:0 0 13px 16px; color:#333; font-size:18px; font-weight:bold; line-height:18px; text-align:left}
#card-bn .card-bn3 .card-tt span {letter-spacing:0}
#card-bn .card-bn3 .card-tt span.disc {color:#f33}
#card-bn .card-bn3 .card-delivery {padding:0 16px; height:38px; border-top:1px solid #f5f5f5}
#card-bn .card-bn3 .card-delivery p {color:#666; font-size:12px; font-weight:normal; line-height:38px; letter-spacing:-1px}
#card-bn .card-bn3 .card-delivery span.buy-num {float:right; letter-spacing:0}

#card-bn .card-bn4 {margin-top:10px; background:#fff}
#card-bn .card-bn4 .card-tt p.txt1 {padding:16px 0 9px 16px; color:#333; font-size:14px; font-weight:normal; line-height:14px; letter-spacing:-1px}
#card-bn .card-bn4 .card-tt p.txt2 {padding:0 0 13px 16px; color:#333; font-size:18px; font-weight:bold; line-height:18px; text-align:left}
#card-bn .card-bn4 .card-tt span {letter-spacing:0}
#card-bn .card-bn4 .card-tt span.disc {color:#f33}
#card-bn .card-bn4 .card-tt del {color:#ccc; font-size:12px; font-weight:normal; vertical-align:top}
#card-bn .card-bn4 .card-delivery {padding:0 16px; height:38px; border-top:1px solid #f5f5f5}
#card-bn .card-bn4 .card-delivery p {color:#666; font-size:12px; font-weight:normal; line-height:38px; letter-spacing:-1px}
#card-bn .card-bn4 .card-delivery span.buy-num {float:right; letter-spacing:0}

#card-bn .card-bn5 {margin-top:10px; background:#fff}
#card-bn .card-bn5 .card-tt p.txt1 {padding:16px 0 9px 16px; color:#333; font-size:14px; font-weight:normal; line-height:14px; letter-spacing:-1px}
#card-bn .card-bn5 .card-tt p.txt2 {padding:0 0 13px 16px; color:#333; font-size:18px; font-weight:bold; line-height:18px; text-align:left}
#card-bn .card-bn5 .card-tt span {letter-spacing:0}
#card-bn .card-bn5 .card-tt span.disc {color:#f33}
#card-bn .card-bn5 .card-tt del {color:#ccc; font-size:12px; font-weight:normal; vertical-align:top}
#card-bn .card-bn5 .card-delivery {padding:0 16px; height:38px; border-top:1px solid #f5f5f5}
#card-bn .card-bn5 .card-delivery p {color:#666; font-size:12px; font-weight:normal; line-height:38px; letter-spacing:-1px}
#card-bn .card-bn5 .card-delivery span.post {color:#0b83e6; padding:0 6px}
#card-bn .card-bn5 .card-delivery span.buy-num {float:right; letter-spacing:0}

#card-bn .hot-pick {margin-top:10px; position:relative; height:424px; background:#fff}
#card-bn .hot-pick img {display:block; width:100%; margin:0 auto}
#card-bn .hot-pick h3.tit {padding:22px 0 22px 16px; color:#333; font-size:18px; font-weight:bold; line-height:18px; letter-spacing:-1px}
#card-bn .hot-pick h3.tit span {position:relative; padding-left:8px; color:#666; font-size:14px; font-weight:normal; line-height:18px; vertical-align:top}
#card-bn .hot-pick h3.tit span:before {content:""; position:absolute; bottom:4px; left:2px; width:1px; height:12px; background:#eee}
#card-bn .hot-pick .list-box {position:absolute; bottom:44px; left:50%; transform:translateX(-50%); width:calc(100% - 32px); height:183px; background:#fff; border-radius:20px; box-shadow:4px 6px 16px rgba(0,0,0,.06)}

#card-bn .hot-pick .list-box .list-box-item1 {position:relative; width:calc(100% - 40px); height:54px; margin:20px auto}
#card-bn .hot-pick .list-box .list-box-item1:before {content:""; position:absolute; width:54px; height:54px; background:url(../img/img-list-box-item1.png)no-repeat 0 0 / 54px auto; border:1px solid #eee}
#card-bn .hot-pick .list-box .list-box-item1:after {content:"\e93e"; font-family:"xeicon"; font-size:14px; line-height:14px; position:absolute; right:0; top:50%; transform:translateY(-50%)}
#card-bn .hot-pick .list-box .list-box-item1 p {letter-spacing:-1px}
#card-bn .hot-pick .list-box .list-box-item1 p.txt1 {padding:8px 0 8px 68px; color:#333; font-size:13px; line-height:13px}
#card-bn .hot-pick .list-box .list-box-item1 p.txt2 {padding-left:68px; color:#999; font-size:12px; font-weight:normal; line-height:12px}

#card-bn .hot-pick .list-box .list-box-item2 {position:relative; width:calc(100% - 40px); height:54px; margin:20px auto}
#card-bn .hot-pick .list-box .list-box-item2:before {content:""; position:absolute; width:54px; height:54px; background:url(../img/img-list-box-item2.png)no-repeat 0 0 / 54px auto; border:1px solid #eee}
#card-bn .hot-pick .list-box .list-box-item2:after {content:"\e93e"; font-family:"xeicon"; font-size:14px; line-height:14px; position:absolute; right:0; top:50%; transform:translateY(-50%)}
#card-bn .hot-pick .list-box .list-box-item2 p {letter-spacing:-1px}
#card-bn .hot-pick .list-box .list-box-item2 p.txt1 {padding:8px 0 8px 68px; color:#333; font-size:13px; line-height:13px}
#card-bn .hot-pick .list-box .list-box-item2 p.txt2 {padding-left:68px; color:#999; font-size:12px; font-weight:normal; line-height:12px}

#card-bn .brand-week {margin-top:10px; background:#fff}
#card-bn .brand-week .main-tb {padding-top:16px}
#card-bn .brand-week .main-tb img {display:block; width:100%; margin:0 auto}

#card-bn .brand-week .sub-tb {padding-top:2px; width:calc(100% - 32px); margin:0 auto; font-size:0; white-space:nowrap; overflow:auto}
#card-bn .brand-week .sub-tb img {display:block; width:100%; margin:6px auto}

#card-bn .brand-week .sub-tb a:first-child {padding-left:0}
#card-bn .brand-week .sub-tb a {display:inline-block; width:103px; padding:0 4px}
#card-bn .brand-week .sub-tb p.txt1 {
    width:103px; font-size:14px; font-weight:normal; line-height:1.2; max-height:2.4em; white-space:normal; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
#card-bn .brand-week .sub-tb p.price {padding:8px 0 17px 0; font-size:16px; font-weight:bold}

#card-bn .brand-week .sub-tb::-webkit-scrollbar {background:transparent; height:5px}
#card-bn .brand-week .sub-tb::-webkit-scrollbar-thumb {background:rgba(0,0,0,.3)}
#card-bn .brand-week .sub-tb::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display:block; height:0; background:transparent}

#card-bn .relate-link {margin-top:10px; height:60px; background:#fafafa; text-align:center}
#card-bn .relate-link a {display:block; position:relative; font-size:14px; color:#333; font-weight:normal; line-height:60px; letter-spacing:-1px}
#card-bn .relate-link a:after {content:"\e93f"; display:inline-block; bottom:0px; right:0; font-family:"xeicon"}

#card-bn .partner-ad-bn {margin-top:10px; height:60px; background:#fff; overflow:hidden}
#card-bn .partner-ad-bn img {display:block; width:100%; margin:0 auto}

#card-bn .sk-pay-bn {margin-top:10px; height:180px; background:#fff; overflow:hidden}
#card-bn .sk-pay-bn img {display:block; width:100%; margin:0 auto}

/*공지글*/
#notice-tt {margin:10px auto; padding-left:16px; height:40px; background:#fff; font-size:13px; font-weight:bold; line-height:40px; letter-spacing:-1px}
#notice-tt a {display:block; width:calc(100% - 16px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#notice-tt span {color:#666; font-weight:normal}

/*푸터 영역*/
#footer {margin-bottom:57px; background:#f1f1f1; text-align:center; font-size:0; border-top:1px solid #f2f2f2}
#footer a.ft-nav {display:inline-block; position:relative; margin-top:4px; font-size:12px; line-height:12px; font-weight:bold; color:#333; padding:16px 9px}
#footer a.ft-nav:first-child {padding-left:0}
#footer a.ft-nav:last-child {padding-right:0}
#footer a.ft-nav:before {content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:10px; background:#dfdfdf}
#footer a.ft-nav:first-child:before {display:none}

#footer .copy-tt {color:#9e9e9e; font-size:11px; font-weight:normal; letter-spacing:-1px}
#footer .copy-tt span {display:block; letter-spacing:0}

#footer a.ft-info {display:inline-block; position:relative; font-size:12px; line-height:12px; font-weight:bold; color:#333; padding:16px 9px}
#footer a.ft-info:before {content:""; position:absolute; left:0; bottom:0; width:1px; height:10px; background:#dfdfdf}
#footer a.ft-txt1:before {display:none}