/*메인공통*/
#main { position: relative; padding-top:calc(var(--header-hei) + 2em); overflow-x: hidden; } 
#main .inner { padding-left:var(--inner-pd); padding-right:var(--inner-pd); } 
#main .swiper-wrapper { height:auto } 
/* #main::before { position: absolute; top: 0; left: 0; width: 100%; height: 22vh; border-radius: 0 0 1rem 1rem; background:linear-gradient(110deg,#005EFF,#00C2FF); content: ''; z-index: -1; } */


#main header.header .i-cart { background: url(/img/icon_cart_b.svg)no-repeat center / contain; } 
#main header.header.srcoll .i-cart { background: url(/img/icon_cart_c.svg)no-repeat center / contain; } 
#main header.header.scroll { position: fixed; max-width: calc(1024px - 2px); width: 100%; background: #fff; border-bottom: 1px solid #ebebeb; top:-1px } 
#main header.header.scroll .tit { color: var(--color-tit); font-weight: 700; } 
#main header.header .ham_menu_btn .ham-line { background: var(--color-point); } 
#main header.header .btn-back { position: absolute; left: calc(var(--inner-pd) + 4.8rem); width: 4.8rem; height: 4.8rem; -webkit-tap-highlight-color: rgba(0,0,0,0);     -webkit-tap-highlight-color: transparent; } 
#main header.header .btn-back img { width: auto; } 

@media all and (max-width: 768px) { 
 #main { padding-top:var(--header-hei); } 
 } 

/*메인이벤트슬라이드*/
#main .main-slid .swiper-wrapper { height: 100%; } 
.main-slid .swiper { height: 17rem; } 
.main-slid .swiper-slide { border-radius: 1.5rem; overflow: hidden; } 
.main-slid .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; } 
.main-slid .swiper-pagination-bullet { background: none; border: 2px solid var(--color-tit); opacity: 1; } 
.main-slid .swiper-pagination-bullet-active { background :var(--color-tit); } 

@media (max-width: 1200px) { 
 #main header.header.scroll { max-width: calc(100% - 2px); } 
 } 
@media (min-width: 768px) and (max-width: 1024px) { 
 .main-slid .swiper-slide { width: 40%; } 
 } 
@media (max-width: 600px) { 
 .main-slid .swiper { height: 13rem; } 
 } 
@media (max-width: 480px) { 
 .main-slid .swiper { height: 10rem; } 
 } 
@media (max-width: 380px) { 
 .main-slid .swiper { height: 8rem; } 
 } 

/*검색바*/
#main .search-wr { padding-top: 0.722em; background: #fff; } 
#main .search-wr .inner { position: relative; } 
.rolling-wrap { display: none; position: absolute; top: 50%; left: calc(var(--inner-pd) * 2); transform: translateY(-50%); height: 24px; overflow: hidden; z-index: 1; pointer-events: none; } 
.rolling-list { padding: 0; margin: 0; list-style: none; transition: transform 0.5s ease-in-out; } 
.rolling-list li { height: 24px; line-height: 24px; font-size: 16px; color: #aaa; white-space: nowrap; } 

@media all and (min-width: 630px) { 
 .rolling-wrap { left: 8rem; } 
 } 
@media all and (max-width: 567px) { 
 .rolling-wrap { left: 5rem; } 
 } 

/*메인 구분선*/
.category ,.sale-wr,.card-slid-wr { position: relative; } 
.category::after ,.new-list-wr::after, .sale-wr::after,
.card-slid-wr::after { display: block; width: 110vw; height: 0.7em; background-color: #f6f6f6; margin-left: -5vw; box-shadow: inset 0px 2px 1px rgba(0,0,0,.1); content: ''; } 


/*메인 - 카테고리*/
.category .inner { padding:calc(var(--inner-cont-pd) / 1.5) var(--inner-cont-pd); } 
.category .category-wr { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 1em; background: #f2f4f5; border-radius: 1.2rem; padding: 1rem; font-size: 1.8rem; } 
.category .cate-box { width: 4.8rem; text-align: center; } 
.category .cate-box .icon-box { position: relative; width: 100%; padding-top:100%; background: #fff; border: 1px solid var(--color-border01); border-radius: 25%; } 
.category .cate-box .icon-box img { position: absolute; top: 50%; left: 50%; width: 80%; transform: translate(-50%, -50%); } 
.category .cate-box .txt-box { line-height: 1; margin-top: 0.5em; color: #000; font-size: 0.778em; font-weight: 500; word-break: keep-all; } 


@media all and (min-width: 720px) { 
 .category .inner { padding-top: calc(var(--inner-cont-pd) / 5); } 
 .category .category-wr { grid-template-columns: repeat(9, 1fr); padding: 3rem; } 
 } 
 @media all and (max-width: 720px) { 
 .category .category-wr { padding: 1rem 1rem 3rem; } 
 } 

@media all and (min-width: 539px) { 
 .category .category-wr { font-size: 2rem; } 
 } 
 @media all and (max-width: 490px) { 
 .category .category-wr { grid-gap: .5em 0.3em; padding: 0rem 0rem 2.5rem; background: none; } 
 .category .cate-box .txt-box { font-size: 0.67em; } 
 } 
 @media all and (max-width: 340px) { 
 .category .cate-box { width: auto; } 
 .category .cate-box .txt-box { font-size: 0.57em; max-width: 33px; margin-left: auto; margin-right: auto; text-align: center; } 
 } 


 /**/
.group-wr { margin-bottom: 1rem; background-color: #fff; } 
.group-wr a { position: relative; display: block; height: 9rem; background-color: #ddd; border-radius: 1.2rem; overflow: hidden; } 
.group-wr a img { width: 100%; height: 100%; object-fit: cover; object-position: center; } 
.group-wr a strong { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 9rem; padding-left: 1rem; color: #fff; font-size: 1.8rem; font-weight: 700; } 
.group-wr a.gr04 strong { color: #000; } 

@media all and (max-width: 600px) { 
 .group-wr a { height: 6rem; } 
 } 

/*전체보기 버튼*/
.tit-wr { justify-content: space-between; align-items: flex-end; padding: 0 var(--inner-cont-pd); margin-bottom: 0.7em; color: var(--color-tit); font-size: 1.8rem; } 
.tit-wr a.btn-more { color: var(--color-more); font-size: 0.722em; } 
.tit-wr a.btn-more .icon { margin-left: 0.385em; } 
.tit-wr a { display: inline-block; position: relative; height: 4.8rem; line-height: 4.8rem; } 
.tit-wr a::before { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 4.8rem; content: ''; } 


/*랭크뱃지*/
.rank { position: absolute; top: 0; left: 0; display: inline-block; padding: .5em; border-radius: 1.2rem 0 1.2rem 0; background-color: var(--color-tit); color: #fff; font-size: 1.8rem; font-weight: 600; z-index: 1; } 

/*오늘의 파격특가*/
.sale-wr { position: relative; padding-top: .5rem; } 
.sale-wr .tit-wr { margin-bottom:0; } 
.sale-wr .swiper-pagination-fraction { position: absolute; right: var(--inner-cont-pd); left: auto; bottom: 1.1rem; width: auto; padding: 0.3rem 1.2rem; border-radius: 16rem; background: rgba(29,34,39, .59); color: #fff; font-size: 1.3rem; } 
.sale-wr .icon { position: absolute; right: var(--inner-cont-pd); top: 2rem; width: 7rem; animation: click-ani 2s infinite; z-index: 2; } 

@keyframes click-ani { 
 0%, 15%, 30%, 100% { 
 -webkit-transform: translateY(0); 
 -ms-transform: translateY(0); 
 transform: translateY(0); 
 } 
 10% { 
 -webkit-transform: translateY(-15px); 
 -ms-transform: translateY(-15px); 
 transform: translateY(-15px); 
 } 
 20% { 
 -webkit-transform: translateY(-5px); 
 -ms-transform: translateY(-5px); 
 transform: translateY(-5px); 
 } 
 } 

@media all and (min-width: 720px) { 
 .sale-wr { padding-top: calc(var(--inner-cont-pd) / 1.5); } 
 .sale-wr .swiper { margin-bottom: 0; } 
 } 
 
 
/*카드형 슬라이드 공통*/
.card-slid-wr { padding-top: .5rem; } 
.card-slid-wr .swiper { margin-bottom: 2rem; } 
.card-slid-wr .swiper-slide { align-content: flex-start; position: relative; width: 50%; height: auto; padding: 1.4rem 1rem; border-radius: 1.2rem; overflow: hidden; } 
.card-slid-wr .thumb-wr { justify-content: space-between; align-items: flex-start; } 
.card-slid-wr .thumb-img { position: relative; width: 8.7rem; height: 8.7rem; border-radius: 1.2rem; /*padding: 1.4rem; */ } 
.card-slid-wr .thumb-img img { height: 100%; } 
.card-slid-wr .thumb-img .place { position: absolute; top: .8em; right: .8em; } 
.card-slid-wr .text-wr { padding: 1em .2em; font-size: 1.6rem; } 
.card-slid-wr .text-wr .place { margin-right: .3em; } 
.card-slid-wr .text-wr .tit { font-size: 1.6rem; } 
.card-slid-wr .text-wr .tit p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } 
.card-slid-wr .text-wr .txt { margin: .5em 0; line-height: 1.3; color: #727272; font-size: 0.889em; } 
.card-slid-wr .text-wr .txt .name { font-weight: 600; } 
.card-slid-wr .text-wr .price { font-size: 1.6rem; } 
.card-slid-wr .thumb-btn { justify-content: end; } 
.card-slid-wr .thumb-btn .btn { width: 2.5rem; height: 2.5rem; border-radius: 100%; } 

@media all and (min-width: 720px) { 
 .card-slid-wr { padding-top: calc(var(--inner-cont-pd) / 1.5); } 
 .card-slid-wr .swiper-slide { width: 40%; } 
 } 

/*주간베스트*/
.best-wr .tit-wr { padding-bottom: 0; } 
.best-slid { text-align: right; } 
.best-slid .swiper { margin-right: var(--inner-pd); margin-left: var(--inner-pd); text-align: left; overflow: hidden; } 
.best-slid .swiper .swiper-wrapper .swiper-slide { display: flex; align-items: center; } 
.best-slid .text-wr { width: calc(100% - 8.7rem); padding:0 1rem; } 
.best-slid .text-wr .txt { display: flex; } 
.best-slid .thumb-btn { margin-bottom: auto; margin-left: auto; } 
.best-slid .thumb-img { background-color: #fff; } 
.best-slid .swiper-pagination-fraction { display: inline-block; position: relative; width: auto; margin-right: var(--inner-pd); margin-bottom: 1rem; padding: 0.3rem 1.2rem; border-radius: 16rem; background: rgba(29,34,39, .59); color: #fff; font-size: 1.3rem; } 



/*자주 산 상품*/
.buy-slid .swiper { padding: 0 var(--inner-pd); } 
.buy-wr { background-color: #fff; } 
.buy-wr .swiper-slide { background-color: #F6F6F6; } 
.buy-wr.card-slid-wr .swiper-slide { display: flex; justify-content: space-between; align-items: center; width: 80%; } 
.buy-wr.card-slid-wr .thumb-img { width: 8.7rem; background-color: #fff; } 
.buy-wr.card-slid-wr .thumb-img .place { position: relative; } 
.buy-wr.card-slid-wr .text-wr { width: calc(100% - 9.7rem); padding: 0; margin-bottom:0; border-bottom:0; } 

@media all and (min-width: 720px) { 
 .best-wr { padding-bottom: 0; } 
 .buy-slid { padding-bottom: calc(var(--inner-cont-pd) / 1.5); } 
 .buy-wr.card-slid-wr { padding-top: calc(var(--inner-cont-pd) / 1.5); } 
 .buy-wr.card-slid-wr .swiper-slide { width: 48%; } 
 } 


/*새로 입점한 상품*/
.new-wr { background-color: #596b8c; padding-bottom: 2rem; } 
.new-wr::after { display: none; } 
.new-wr .tit-wr { color: #fff; margin-bottom: 0; } 
.new-wr .tit-wr .b-tit { line-height: 4.8rem; } 
.new-wr .tit-wr a.btn-more { color: #fff; } 
.new-wr .tit-wr a.btn-more .icon { filter: brightness(10); } 
.new-wr .swiper { padding: 0 var(--inner-pd); margin-bottom: 0; } 
.new-wr .swiper-slide { width: calc(50% - .5rem); background-color: #fff; } 
.new-slid .inner { padding-right: 0; } 

 /*새로입점한상품 목록*/
 .new-list-wr { position: relative; padding-top: 0.5rem; background: #FFFEEC; overflow-x: initial; } 
 .new-list-wr .tit-wr { margin-bottom:0; } 
 .new-list-wr::before { position: absolute; top: -10.7rem; right: 0; width: 22rem; height: 12rem; background: url(../img/main_deco.svg)no-repeat center / contain; z-index: 1; content: ''; } 
 .new-list-wr .list-wr { padding: 0 var(--inner-cont-pd); margin-bottom: .6rem; } 
 .new-list-wr .list-wr .list:not(:last-of-type) { margin-bottom: 1.4rem; } 
 .new-list-wr .list-wr .list-img { width: 4.6rem; height: 4.6rem; /*padding: .3em; */ background: #ffffff; border: 1px solid var(--color-border01); border-radius: 25%; } 
 .new-list-wr .list-wr .list-img img { width: 100%; height: 100%; object-fit: cover; } 
 .new-list-wr .list-wr .list-txt { display: flex; align-items: center; width: calc(100% - 7.6rem); padding-left:1rem; padding-right: 1.5rem; font-size: 0.88em; } 
 .new-list-wr .list-wr .list-txt .txt { margin-right: 1rem; color: var(--color-g-tit); overflow: hidden; text-overflow: ellipsis; } 
 .new-list-wr .list-wr .list-txt .price { display: block; margin-top: .1em; } 
 .new-list-wr .list-wr .thumb-btn { width: 3rem; } 
 .new-list-wr .list-wr .thumb-btn li { display: flex; justify-content: center; align-items: center; margin: 0.3em 0; } 
 .new-list-wr .list-wr .thumb-btn li button img { width: 86%; margin: 0 auto; } 
 .new-list-wr .notice { width:100%; height:12.8rem; overflow:hidden; } 
 .new-list-wr .rolling { position:relative; width:100%; height:auto; } 
 .new-list-wr .rolling .list { width:100%; height:5rem; } 


 @media all and (min-width: 720px) { 
 .new-wr { padding-bottom: calc(var(--inner-cont-pd) / 1.5); } 
 .new-list-wr { padding-top: calc(var(--inner-cont-pd) / 1.5); } 
 .new-list-wr .list-wr { margin-bottom: calc(var(--inner-cont-pd) / 1.5); } 

 .new-list-wr .notice { height: 27.8rem; } 
 .new-list-wr .rolling .list { height: 8rem; } 
 .new-list-wr .list-wr .list-img { width: 7.6rem; height: 7.6rem; } 
 } 
 @media all and (max-width: 768px) { 
 .new-list-wr::before { top: -7.4rem; right: 0; width: 17rem; height: 8rem; } 
 } 
 @media all and (max-width: 540px) { 
 .new-list-wr::before { top: -5.4rem; width: 11rem; height: 6rem; } 
 } 
 @media all and (max-width: 400px) { 
 .new-list-wr::before { top: -4.4rem; width: 9rem; height: 5rem; } 
 } 

/*등락 베스트 공통*/
.graph-wr { margin-bottom: 2rem; } 
.graph-wr .tit-wr { padding: 0 !important; margin-bottom: 0; } 
.graph-wr .thumb-wr { padding: 1rem; border-radius: 1.2rem; } 
.graph-wr .thumb-wr .thumb-img { padding: .5rem; border-radius: .5rem; background: #fff; } 
.graph-wr .thumb-wr .thumb-img .thumb { width: 3.5rem; height: 3.5rem; border-radius: .5rem; overflow: hidden; } 
.graph-wr .thumb-wr .thumb-img .thumb img { object-fit: cover; object-position: center; width: 100%; height: 100%; } 
.graph-wr .thumb-wr .thumb-img .thumb:not(:last-of-type) { margin-bottom: .5rem; margin-right: 0; } 
.graph-wr .thumb-wr .figure { align-items: center; gap: .5rem; margin-top: auto; } 
.graph-wr .thumb-wr .figure span { font-size: 1.3rem; } 
.graph-wr .text-wr { display: flex; flex-direction: column; width: 100%; height: 100%; padding-left: 1rem; font-size: 1.6rem; } 
.graph-wr .text-wr .price { color: #848484; } 


.graph-wr .thumb-wr.drop { background-color: #EAF4FE; } 
.graph-wr .thumb-wr.drop .figure { color: #0076FE; } 

.graph-wr .thumb-wr.rise { background-color: #FBEFF0; } 
.graph-wr .thumb-wr.rise .figure { color: #E36565; } 

 @media all and (min-width: 768px) { 
 .graph-wr .thumb-wr .thumb-img { display: flex; padding: 1rem; } 
 .graph-wr .thumb-wr .thumb-img .thumb { width: 7.2rem; height: 7.2rem; } 
 .graph-wr .thumb-wr .thumb-img .thumb:not(:last-of-type) { margin-bottom: 0; margin-right: 1rem; } 

 .graph-wr .thumb-wr .text-wr { padding-left: 1rem; } 
 .graph-wr .thumb-wr .text-wr .tit { font-size: 2rem; } 

 .graph-wr .text-wr { font-size: 2rem; } 

 } 


 /*메뉴별 추천요리*/
 .theme-wr { padding-top: calc(var(--inner-cont-pd) / 1.5); padding-bottom: calc(var(--inner-cont-pd) / 1.5); } 
 .theme-wr .theme-slid { position: relative; } 
 .theme-wr .swiper-slide { border-radius: 2rem; overflow: hidden; transition: 0.3s; } 
 .theme-wr .swiper-slide:nth-child(even) { margin-top: 2rem; } 
 .theme-wr .swiper-button-wr div { width: 5rem; height: 5rem; padding: 1rem; border-radius: 100%; background: #fff; transform: translateY(-1rem); color: var(--color-tit); filter: drop-shadow(0px 0px 3px rgba(0, 17, 48, 0.4)); } 
 .theme-wr .swiper-button-wr .swiper-button-next:after, .theme-wr .swiper-button-wr .swiper-button-prev:after { font-size: 1.9rem; font-weight: 900; } 
 
 @media (min-width: 720px) { 
 .theme-wr .theme-slid { padding-left:var(--inner-pd); padding-right:var(--inner-pd); } 
 } 
 @media (max-width: 719px) { 
 .theme-wr { padding-top: calc(var(--inner-cont-pd) * 1.5); padding-bottom: calc(var(--inner-cont-pd) * 1.5); } 
 .theme-wr .swiper-wrapper { padding-left: var(--inner-pd); } 
 .theme-wr .swiper-slide { width: 48%; } 
 .theme-wr .swiper-slide:nth-child(even) { margin-top: 0; } 
 .theme-wr .swiper-button-wr { display: none; } 
 
 } 


/* 실시간 공지 */
.text-line-wr { height: var(--text-line-hei); background: #ff4b3d; border-radius: 1rem; color: #fff; } 
.text-line-wr .swiper::before { display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; z-index: 10; width: var(--text-line-hei); height: var(--text-line-hei); font-family: 'Material Symbols Rounded'; font-size: 3rem; content: "\e04e"; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 } 
.text-line-wr .swiper-slide { display: flex; align-items: center; padding-left: var(--text-line-hei); font-size: 0.88em; font-weight: 300; } 
.text-line-wr .swiper-slide p { display: block; width: 100%; padding-right: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }