@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}

/*레이아웃*/
.row {padding:0 1.5rem}

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

/*로고*/
#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%; 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; padding-left:1.25rem; 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}

/*회원 로그인*/
#membership {text-align:center}
#membership h2 {margin-top:16px; color:#000; font-size:1.125rem; font-weight:700}

/*아이디, 비밀번호*/
#membership .login-box {margin-top:1.25rem; text-align:left}
#membership .login-box input[type=password] {margin-top:1.25rem}
#membership .login-box div {margin-top:1.4375rem}
#membership .login-box div input[type=checkbox] {position:absolute; left:-3000%}
#membership .login-box div input[type=checkbox] + label {color:#666; font-size:1rem; cursor:pointer}
#membership .login-box div input[type=checkbox] + label:before {content:""; display:inline-block; width:1.25rem; height:1.25rem; border:.125rem solid #333; margin-right:.3125rem; vertical-align:-0.25rem; transition:all .2s}
#membership .login-box div input[type=checkbox]:checked + label:before {border:.4375rem solid #333}

/*로그인, 네이버아이디로 로그인*/
#membership .btn-login-group a {position:relative}
#membership .btn-login-group a:after {content:""; position:absolute; left:0; top:-1.5625rem; width:100%; height:1px; background:#dbdbdb}
#membership .btn-login-group a.btn-login:after {display:none}
#membership .btn-login-group a.btn-login {display:block; margin-top:1.8125rem; padding:1.0625rem 0; background:#000; border-radius:.125rem; color:#fff; font-size:1rem; font-weight:400; line-height:100%}
#membership .btn-login-group a.btn-login-naver {display:block; margin-top:51px; padding:1.0625rem 0; background:#2db400; border-radius:.125rem; color:#fff; font-size:1rem; font-weight:400; line-height:100%}
#membership .btn-login-group a.btn-login-naver:before {content:""; position:absolute; left:1.0625rem; top:50%; transform:translateY(-50%); width:1.4375rem; height:1.3125rem; background:url(../img/ico-naver-logo.png)no-repeat 0 0 / 1.4375rem auto}

/*아이디 찾기, 비밀번호 찾기*/
#membership .login-info {margin-top:1.125rem; text-align:left}
#membership .login-info p.txt {color:#666; font-size:.8125rem; font-weight:400}

#membership .login-find {margin-top:2.25rem; text-align:center; font-size:0}
#membership .login-find img {display:inline-block; width:1.25rem; height:auto; margin-right:.3125rem}
#membership .login-find a {display:inline-block; position:relative; width:50%; color:#666; font-size:.9375rem; font-weight:300}

/*비회원 주문, 회원가입*/
#membership .btn-join-group {margin-top:2.125rem; font-size:0; text-align:center}
#membership .btn-join-group a.btn-order, a.btn-join {display:inline-block; width:calc(50% - .625rem); padding:0 .625rem; font-size:.9375rem; font-weight:300; padding:1rem 0; border-radius:.125rem}
#membership .btn-join-group a.btn-order {color:#000; background:#d9dada}
#membership .btn-join-group a.btn-join {color:#fff; background:#000; margin-left:1.25rem}

/*하단 고정 메뉴바*/
#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:1.875rem 0 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}