@charset "utf-8";

/*스크롤 제어*/
html.on {overflow:hidden}

/*gnb 스크롤 커스텀*/
#gnb .gnb-cont::-webkit-scrollbar {width:.625rem; background:#f7b230}
#gnb .gnb-cont::-webkit-scrollbar-thumb {background:#000}
#gnb .gnb-cont::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display:block; height:0; background:transparent}

/*헤더 영역*/
#header {position:relative; text-align:center; border-bottom:1px solid #ebe6df}

#header .point {position:absolute; left:2.125rem; top:.6875rem; width:.625rem; height:.625rem; background:#df4336; border-radius:.8125rem; animation:point 1s ease infinite}
@keyframes point {
    from {opacity:0}
    50% {opacity:.5}
    to {opacity:1}
}

/*로고*/
#header h1 {font-size:0}
#header h1 a.logo {display:inline-block; margin:.625rem 0 .875rem; width:5rem; height:1.8125rem; background:url(../img/h1-logo.png)no-repeat 0 0 / 5rem auto}

/*햄버거 메뉴*/
#header .all-mn {position:absolute; left:.6875rem; top:.9375rem; width:1.875rem; height:1.25rem; cursor:pointer; transition:all .3s}
#header .all-mn.on {left:18.125rem; z-index:31}
#header .all-mn span {display:block; color:transparent; font-size:1px; position:absolute; top:50%; transform:translateY(-50%); width:100%; height:.125rem; background:#000; transition:all .1s}
#header .all-mn span:before {content:""; position:absolute; left:0; top:-0.5625rem; width:100%; height:.125rem; background:#000; transition:all .3s}
#header .all-mn span:after {content:""; position:absolute; left:0; top:.5625rem; width:67.3684%; height:.125rem; background:#f5b32c; transition:all .3s}

#header .all-mn.on span:before {background:#fff; top:0; transform:rotate(45deg)}
#header .all-mn.on span {background:none}
#header .all-mn.on span:after {top:0; width:100%; transform:rotate(-45deg)}

/*GNB*/
#gnb {position:fixed; top:0; left:-100%; width:17.5rem; height:100%; background:#fff; z-index:30; transition:all .3s; text-align:left}
#gnb.on {left:0}
.gnb-dim {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); z-index:28}
.gnb-dim.on {display:block}

#gnb .gnbtop-group {font-size:0; padding:1rem 0 0 .625rem}
#gnb .gnbtop-group a {display:inline-block; font-size:.875rem; font-weight:400; border-radius:1.875rem; vertical-align:middle}
#gnb .gnbtop-group a.login-btn {padding:.75rem 1.75rem; color:#fff; background:#000}
#gnb .gnbtop-group a.join-btn {margin-left:.625rem; padding:.75rem 1.75rem; color:#000; background:#d9dada}
#gnb .gnbtop-group a.setting-btn {margin-left:1.25rem; width:1.125rem; height:1.125rem; background:url(../img/ico-setting.png)no-repeat 0 0 / 1.125rem auto}

#gnb .gnborder-group {margin-top:1.375rem; background:#f7b230; text-align:center}
#gnb .gnborder-group a {display:block}
#gnb .gnborder-group img {display:inline-block; padding:.6875rem 0 .5rem; width:1.6875rem; height:auto; vertical-align:middle}
#gnb .gnborder-group span {display:inline-block; padding-left:2.0625rem; color:#000; font-size:1.4375rem; font-weight:400; line-height:100%; letter-spacing:-0.6px; vertical-align:middle}

#gnb .gnb-cont {height:30.75rem; overflow-y:scroll}
#gnb .gnb-cont ul > li {position:relative}
#gnb .gnb-cont ul > li:before {content:""; position:absolute; left:0; top:0; width:100%; height:1px; background:#ededed}
#gnb .gnb-cont ul > li:first-child:before {display:none}
#gnb .gnb-cont ul > li > a {display:block; padding:1.5rem 0 1.5rem 6.25rem; color:#3e3e3e; font-size:.9375rem; font-weight:400; line-height:100%}
#gnb .gnb-cont ul > li:nth-child(1) a:before {content:""; position:absolute; left:3.0625rem; top:50%; transform:translateY(-50%); width:1.1875rem; height:2.25rem; background:url(../img/ico-gnb-mypage.png)no-repeat 0 0 / 1.1875rem auto}
#gnb .gnb-cont ul > li:nth-child(2) a:before {content:""; position:absolute; left:2.625rem; top:50%; transform:translateY(-50%); width:2.3125rem; height:1.5625rem; background:url(../img/ico-gnb-allmn.png)no-repeat 0 0 / 2.3125rem auto}
#gnb .gnb-cont ul > li:nth-child(3) a:before {content:""; position:absolute; left:2.6875rem; top:50%; transform:translateY(-50%); width:1.625rem; height:1.625rem; background:url(../img/ico-gnb-sch.png)no-repeat 0 0 / 1.625rem auto}
#gnb .gnb-cont ul > li:nth-child(4) a:before {content:""; position:absolute; left:2.3125rem; top:50%; transform:translateY(-50%); width:2.5rem; height:1.5625rem; background:url(../img/ico-gnb-coupon.png)no-repeat 0 0 / 2.5rem auto}
#gnb .gnb-cont ul > li:nth-child(5) a:before {content:""; position:absolute; left:2.375rem; top:50%; transform:translateY(-50%); width:2.25rem; height:1.5625rem; background:url(../img/ico-gnb-voucher.png)no-repeat 0 0 / 2.25rem auto}
#gnb .gnb-cont ul > li:nth-child(6) a:before {content:""; position:absolute; left:2.625rem; top:50%; transform:translateY(-50%); width:1.5rem; height:2rem; background:url(../img/ico-gnb-gift.png)no-repeat 0 0 / 1.5rem auto}
#gnb .gnb-cont ul > li:nth-child(7) a:before {content:""; position:absolute; left:2.375rem; top:50%; transform:translateY(-50%); width:1.9375rem; height:1.5rem; background:url(../img/ico-gnb-event.png)no-repeat 0 0 / 1.9375rem auto}
#gnb .gnb-cont ul > li:nth-child(8) a:before {content:""; position:absolute; left:2.625rem; top:50%; transform:translateY(-50%); width:2rem; height:1.5rem; background:url(../img/ico-gnb-notice.png)no-repeat 0 0 / 2rem auto}
#gnb .gnb-cont ul > li:nth-child(9) a:before {content:""; position:absolute; left:2.625rem; top:50%; transform:translateY(-50%); width:1.5625rem; height:1.875rem; background:url(../img/ico-gnb-cs.png)no-repeat 0 0 / 1.5625rem auto}

#gnb .call-center {border-top:.125rem solid #ddd; padding:1.5rem 0 1.625rem 1.25rem}
#gnb .call-center img {display:inline-block; width:5rem; height:auto; vertical-align:middle}
#gnb .call-center span {display:inline-block; color:#525252; font-size:.9375rem; font-weight:700; letter-spacing:-0.6px; padding-left:.875rem; vertical-align:middle}
#gnb .callbox2 {display:none}

@media screen and (min-width:361px) {
    #gnb .callbox1 {display:none}
    #gnb .callbox2 {display:block}
}

/*찜목록*/
#header .basket {position:absolute; right:1rem; top:.6875rem; width:2.1875rem; height:2rem; background:url(../img/ico-basket.png)no-repeat 0 0 / 2.1875rem auto; cursor:pointer}
#header .basket span.number {display:block; color:#000; font-weight:700; position:absolute; right:.625rem; top:-.25rem; background:#f5b327; width:1.25rem; height:1.25rem; border-radius:1.25rem; line-height:1.25rem}

/*비주얼 영역*/
#visual {position:relative}
#visual .main-slider {width:100%}
#visual .swiper-slide img {width:100%; margin:0 auto}

/*메인 슬라이드*/
.swiper-pagination-progressbar {background:rgba(0,0,0,.8); box-shadow:2px 3px 6px rgba(0,0,0,.6); position:absolute}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    border-top:1px solid rgba(0,0,0,.3); background:linear-gradient(30deg, rgba(102,0,0,.8), rgba(204,0,0,.8), rgba(153,0,0,.8)); position:absolute; left:0; top:-0.625rem; width:100%; height:.625rem; transform:scale(0); transform-origin:left top}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {transform-origin:left top}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {width:100%; height:.125rem; left:0; bottom:.625rem}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {width:100%; height:.125rem; left:0; bottom:.625rem}

/*콘텐츠 영역*/
.main-menu {font-size:0; text-align:center}
.main-menu div {display:inline-block; width:50%; position:relative}
.main-menu div:before {content:""; position:absolute; left:0; top:.3125rem; width:1px; height:7.9375rem; background:#d7d8da}
.main-menu div:first-child:before {display:none}

/*배달 주문하기 배너*/
.main-menu .order-box {vertical-align:middle}
.main-menu .order-box a {display:block; padding:1.25rem}
.main-menu .order-box img {width:3.1875rem; height:auto}
.main-menu .order-box h3 {color:#333; font-size:1.125rem; font-weight:400; line-height:1.8; letter-spacing:-0.4px}
.main-menu .current-box {vertical-align:middle}

/*최근 및 쿠폰 주문 배너*/
.main-menu .current-box a {position:relative; display:block; padding:1.25rem 0; color:#333; font-size:1.125rem; font-weight:400; letter-spacing:-0.4px}
.main-menu .current-box a:before {content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:75.68674%; height:1px; background:#d7d8da}
.main-menu .current-box a:first-child:before {display:none}
.main-menu .current-box img {display:inline-block; width:1.5625rem; height:auto; margin-right:.3125rem}

/*하단 고정 메뉴바*/
#bottom-bar {position:fixed; bottom:0; left:0; right:0; height:5rem; background:#fff; border-top:.125rem solid #212121; z-index:10}
#bottom-bar ul {text-align:center; font-size:0}
#bottom-bar ul li {display:inline-block; width:25%}
#bottom-bar ul li a {display:block; position:relative; padding:3.25rem 0 1rem; color:#666; font-size:.75rem; font-weight:400; line-height:100%}
#bottom-bar ul li:nth-child(1) {background:#212121}
#bottom-bar ul li:nth-child(1) a {color:#fff; font-weight:700}
#bottom-bar ul li:nth-child(1) a:before {content:""; position:absolute; top:1.1875rem; left:50%; transform:translateX(-50%); width:1.5625rem; height:1.375rem; background:url(../img/ico-bottom-bar-01.png)no-repeat center / 1.5625rem auto}
#bottom-bar ul li:nth-child(2) a:before {content:""; position:absolute; top:1.1875rem; left:50%; transform:translateX(-50%); width:1.5rem; height:1.5rem; background:url(../img/ico-bottom-bar-02.png)no-repeat center / 1.5rem auto}
#bottom-bar ul li:nth-child(3) a:before {content:""; position:absolute; top:1.1875rem; left:50%; transform:translateX(-50%); width:2.125rem; height:1.4375rem; background:url(../img/ico-bottom-bar-03.png)no-repeat center / 2.125rem auto}
#bottom-bar ul li:nth-child(4) a:before {content:""; position:absolute; top:1.1875rem; left:50%; transform:translateX(-50%); width:1.5rem; height:1.5625rem; background:url(../img/ico-bottom-bar-04.png)no-repeat center / 1.5rem auto}

/*팝업*/
.pp-login {display:none; position:fixed; left:50%; top:50%; z-index:99; transform:translate(-50%, -50%); width:calc(100% - 20px); height:26.94736vh; background:#fff; text-align:center}
.pp-login strong {display:block; padding:58px 0 50px; color:#010101; font-size:16px; font-weight:300; line-height:100%; letter-spacing:-0.4px}
.pp-login a {display:block; color:#fff; background:#000; padding:16px 0; font-size:16px; font-weight:400; line-height:100%}
.pp-login-dim {display:none; position:fixed; left:0; top:0; z-index:98; width:100%; height:100%; background:rgba(0,0,0,.6)}

/*푸터 영역*/
#footer {margin-bottom:5rem; background:#212121; padding:.75rem}

/*푸터 메뉴*/
#footer .ft-nav {font-size:0; text-align:justify; text-align-last:justify}
#footer .ft-nav a {display:inline-block; padding:.75rem 0; color:#c9c9c9; font-size:.75rem; font-weight:400}
#footer .ft-nav a:nth-child(2) {font-weight:700}

/*사이트 정보*/
#footer p {color:#afafaf; font-size:.75rem; font-weight:100; line-height:1.8}
#footer address {padding-top:.625rem; color:#afafaf; font-size:.75rem; font-weight:100; letter-spacing:0}
#footer em {display:block; padding:1.875rem 0 1rem 0; color:#c9c9c9; font-size:.75rem; font-weight:400; line-height:1.8}