@charset "utf-8";

/* 마이페이지 */
.mypage-dash {display:flex; align-items:center; padding:var(--size60); margin-bottom:var(--size100); border:1px solid #ddd; border-radius:var(--size20);}
.mypage-dash .title {width:50%; border-right:1px solid #ddd; padding:var(--size20); padding-left:0;}
.mypage-dash .title h3 {font-size:clamp(16px, calc(24/ var(--inner) * 100vw ), 24px); font-weight:400; line-height:1.2; letter-spacing:-0.03em; color:#242424;}
.mypage-dash .title h3 strong {font-weight:600;}
.mypage-dash .title p {margin-top:10px;}
.mypage-dash .info {display:flex; width:50%;}
.mypage-dash .info .box {flex:1; text-align:center;}

.mypage-dash .info dd {margin-top:0.5em; font-size:clamp(15px, calc(20/ var(--inner) * 100vw ),20px); font-weight:600; line-height:1.2; letter-spacing:-0.03em; color:#242424;}

.mypage-group-tit {display:flex; justify-content:space-between; align-items:center; margin-bottom:clamp(10px, calc(16/ var(--inner) * 100vw ),16px);}
.mypage-group-tit h3 {font-size:clamp(16px, calc(22/ var(--inner) * 100vw ),22px); font-weight:700; line-height:1.2em; letter-spacing:-0.03em; color:#242424;}


/* 장바구니 */
.wish-all-select {display:flex; align-items:center; font-size:18px; font-weight:700; line-height:1.2em; letter-spacing:-0.03em; }
.wish-all-select button {display:block; padding-left:20px; margin-left:20px; font-size:18px; font-weight:700; line-height:1.2em; color:#ababab; border:0; background:0; position:relative;}
.wish-all-select button:before {content:""; position:absolute; width:1px; height:16px; background:#ddd; left:0; top:50%; margin-top:-8px;}
.wish-all-select .checkbox {margin-top:0;}
.wish-all-select .checkbox label:before {background:url("../images/member/checkbox2.png") no-repeat 50% 50%; border:0;}
.wish-all-select .checkbox input:focus + label:before {border:0;}

/* 주문내역 검색 */
.older-period-search {display:flex; justify-content:space-between; align-items:center; padding:var(--size30); border:1px solid #ddd; border-radius:10px; margin-bottom:var(--size50);}
.older-period-search .input {border-radius:5px; height:clamp(40px, calc(50/ var(--inner) * 100vw ),50px); background-size:16px auto;}
.older-period-search .radiobox-wrap {display:flex; margin:-5px; flex-wrap:wrap;}
.older-period-search .radiobox-wrap .item {margin:5px;}
.older-period-search .radiobox-wrap label {min-width:130px; height:clamp(40px, calc(50/ var(--inner) * 100vw ),50px); line-height:calc(clamp(40px, calc(50/ var(--inner) * 100vw ),50px) - 2px); font-weight:500; color:#454545; background:#f8f8f8; border:1px solid #ddd;}
.older-period-search .radiobox-wrap label:before {display:none;}
.older-period-search .radiobox-wrap input:checked + label  {background:#0056b8; color:#fff; border-color:#0056b8;}

.datepicker-wrap {display:flex; align-items:center;}
.datepicker-wrap .bar {display:inline-block; margin:0 5px;}
.datepicker-wrap input {border:1px solid #242424;}
.datepicker-wrap button {border:0; background:#242424; display:block; margin-left:10px; width:clamp(40px, calc(50/ var(--inner) * 100vw ),50px); height:clamp(40px, calc(50/ var(--inner) * 100vw ),50px); border-radius:5px;}
.datepicker-wrap button img {vertical-align:middle;}

/* 주문내역 */
.order-list {border-top:2px solid #686868;}
.order-list ul li {display:flex; align-items:center; padding:var(--size30) var(--size40); border-bottom:1px solid #ddd;}
.order-list ul li .order-img {width:159px; margin-right:40px;}
.order-list ul li .order-img a {display:block; position:relative; padding-bottom:100%; border-radius:10px; overflow:hidden;}
.order-list ul li .order-img a img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.order-list ul li .order-img a:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:10px; border:1px solid #ddd;}

.order-list ul li .order-info {flex: 1 1 auto; min-width: 0; width: 1%; margin:0;}
.order-list ul li .order-range {min-width:clamp(20px, calc(200/ var(--inner) * 100vw ),200px); font-size:1.13em; font-weight:600; letter-spacing:-0.03em; line-height:1.2em; color:#16181f; text-align:center;}
.order-list ul li .order-range a {display:block; font-size:14px; margin-top:8px; text-decoration:underline; color:#909090;}
.order-list ul li .more {margin-left:80px;}
.order-list ul li .more a {padding:14px 24px; display:inline-block; border:1px solid #686868; border-radius:5px; font-size:18px; font-weight:500; line-height:1em; letter-spacing:-0.03em; color:#454545;}
.order-list ul li .more a:hover {border-color:#a2754a; color:#fff; background:#a2754a;}
.order-list ul li dl {display:flex; align-items:center; line-height:1.2em; letter-spacing:-0.03em; color:#454545; font-weight:400; margin-bottom:12px;}
.order-list ul li dl:last-child {margin-bottom:0;}
.order-list ul li dt {min-width:100px; font-weight:500;}
.order-list ul li.none {display:block; padding:clamp(20px, calc(100/ var(--inner) * 100vw ),100px) 0; text-align:center; border-bottom:none;}
.order-list ul li.none .img {margin-bottom:clamp(10px, calc(17/ var(--inner) * 100vw ),17px);}
.order-list ul li.none .tt {font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); font-weight:400; line-height:1.2em; letter-spacing:-0.03em; color:#686868;}

/* 적립금 */
.mypoint table {border-top:2px solid #686868; text-align:center;}
.mypoint th {font-size:1.13em; font-weight:700; line-height:1.2em; letter-spacing:-0.03em; color:#242424; padding:var(--size30) 10px; border-bottom:1px solid #ddd;}
.mypoint td {border-bottom:1px solid #ddd; font-weight:400; line-height:1.2em; letter-spacing:-0.03em; color:#454545; padding:var(--size30) 10px;}
.mypoint table td:last-child {font-weight:600;}

.m-mypoint {display:none;}
.m-mypoint ul li {padding:10px 0; border-bottom:1px solid #ddd; border-top:1px solid #686868;}
.m-mypoint ul li span {display:inline-block; margin-right:15px;}

/* 쿠폰 */
.mypage-coupon-tit {margin-bottom:1.4em; font-size:clamp(16px, calc(18/ var(--inner) * 100vw ),18px); font-weight:400; line-height:1.4; letter-spacing:-0.04em; color:#454545;}
.mypage-coupon-tit strong {font-weight:600; color:#242424;}
.mypage-coupon-list {padding-top:var(--size20); border-top:1px solid #2c2c2c;}
.mypage-coupon-list .items {display:flex; flex-wrap:wrap; margin:0 calc(0px - var(--size15));}
.mypage-coupon-list .item {width:50%; padding:0 var(--size15); margin-bottom:var(--size30);}
.mypage-coupon-list .box {display:flex; align-items:center; padding:var(--size30) 0; height:100%; border:1px solid #ddd; border-radius:var(--size10);}
.mypage-coupon-list .info {flex:1 1 auto; min-width:0; width:1%; padding:0 10px 0 var(--size40); border-right:1px dashed #ddd;}
.mypage-coupon-list .info .tit {margin-bottom:1em; font-weight:700; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.mypage-coupon-list .info .num {display:block; margin-bottom:0.4em; font-size:1.7em; font-weight:600; color:var(--color-primary);}
.mypage-coupon-list .info .txt {margin-bottom:0.5em; font-size:0.88em; font-weight:500; line-height:1.2; letter-spacing:-0.04em; color:#505050;}
.mypage-coupon-list .info .date {font-size:0.88em; font-weight:500; line-height:1.2; letter-spacing:-0.04em; color:#505050;}
.mypage-coupon-list .info .day {display:inline-block; margin-left:var(--size10); padding-left:var(--size10); border-left:1px solid #ddd; font-weight:700; color:#2c2c2c;}
.mypage-coupon-list .status {min-width:clamp(80px, calc(160/ var(--inner) * 100vw ),160px); padding:0 20px; font-size:1.13em; font-weight:700; line-height:1.2; letter-spacing:-0.04em; color:#0056b8; text-align:center;} 

.mypage-coupon-list .box.over {background:#fafafa;}
.mypage-coupon-list .box.over .tit,
.mypage-coupon-list .box.over .num,
.mypage-coupon-list .box.over .txt,
.mypage-coupon-list .box.over .date,
.mypage-coupon-list .box.over .day,
.mypage-coupon-list .box.over .status {color:#ccc;}

/* 로그인 */
.login-area {max-width:470px; margin:0 auto;}
.login-area .input {border-radius:5px;}
.login-tab {text-align:center; border-bottom:4px solid var(--color-primary); margin-bottom:50px;}
.login-tab ul {display:flex; padding:0 2px;}
.login-tab ul li {flex:1; border:4px solid #dfdfdf; border-bottom:0; margin:0 -2px;}
.login-tab ul li a {display:block; color:#333; font-size:18px; line-height:60px;}
.login-tab ul li.active {position:relative; z-index:2; border-color:var(--color-primary);}
.login-tab ul li.active:after {content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:#fff;}
.login-tab ul li.active a {color:var(--color-primary); font-weight:500;}
.login-content .group {margin-bottom:8px;}
.login-content .group .input {display:block; width:100%; height:54px; font-size:16px;}
.login-content .links {display:flex; justify-content:space-between; margin-top:14px; margin-bottom:2em; font-size:14px; color:#505050; font-weight:500; line-height:1.5em;}
.login-content .link a:hover {text-decoration:underline;}
.login-content .link {text-align:center;}
.login-content .link .bar {display:inline-block; vertical-align:middle; margin:-.2em 12px 0; width:1px; height:16px; background:#ddd;}

.login-content .btn-pack {display:block; width:100%; margin-top:10px;}
.login-content .btn-pack.focus {margin-top:20px;}
.login-content .btn-pack.xlarge {font-weight:500;}

.sns-login {text-align:center; margin-top:50px;}
.sns-login .tit {position:relative; color:#333; font-size:15px; font-weight:400; line-height:1.3em; margin-bottom:35px;}
.sns-login .tit:before {content:""; position:absolute; top:50%; left:0; margin-top:-1px; width:100%; height:1px; background:#ddd;}
.sns-login .tit span {display:inline-block; position:relative; padding:0 30px; background:#fff;}
.sns-login a {margin:0 12px;}

/* 약관동의 */
.agree-wrap {max-width:680px; margin:0 auto 50px;}
.agree-wrap .group {margin-top:40px;}
.agree-wrap .group:first-child {margin-top:0;}
.agree-wrap .agree-tit {color:#333; font-size:20px; font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.agree-wrap .agree-tit .checkbox label:before {width:24px; height:24px; background:#fff url("../images/member/checkbox.png") 50% 50% no-repeat; border:2px solid #ccc; border-radius:100%;}
.agree-wrap .agree-tit .checkbox input:checked + label:before {background-color:#0056b8; border-color:#0056b8; background-image:url("/images/member/checkbox_on.png");}
.agree-wrap .agree-box {position:relative; max-height:175px; margin-top:17px; padding:16px 20px; border:1px solid #ddd; overflow:auto;}
.agree-wrap .agree-box .terms-wrap {color:#767676; font-size:14px;}
.agree-wrap .agree-box .terms-wrap .sec {margin-bottom:20px;}
.agree-wrap .agree-box .terms-wrap .sec h3 {color:#767676; font-size:14px; font-weight:300; margin-bottom:0;}
.agree-wrap .agree-box .terms-wrap .sec strong {font-weight:300;}

.terms-wrap {font-weight:300; color:#666; line-height:1.75em; letter-spacing:-.03em;}
.terms-wrap .sec {margin-bottom:40px;}
.terms-wrap .sec h3 {color:#222; font-size:1.1em; font-weight:500; margin-bottom:7px;}
.terms-wrap .sec p {margin-bottom:1em;}
.terms-wrap .sec strong {font-weight:500;}
.terms-wrap .sec ol li {padding-left:1em; text-indent:-1em;}
.terms-wrap .sec ol li ol li {padding-left:1.35em; text-indent:-1.35em;}
.terms-wrap .policy-contact {display:flex; padding:20px 0; background:#fafafa; border:1px solid #e5e5e5; margin-bottom:1em;}
.terms-wrap .policy-contact dl {flex:1; padding:0 20px; border-left:1px solid #e5e5e5;}
.terms-wrap .policy-contact dl:first-child {border-left:0;}
.terms-wrap .policy-contact dt {font-weight:500; color:#333; margin-bottom:12px;}

/* 회원가입 */
.join-form {max-width:900px; margin:0 auto var(--size60);}
.join-form .required {color:#fd8239}
.join-form .join-form-txt {color:#767676; font-weight:400; line-height:1.4em; margin-bottom:12px;}
.join-form table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #242424; line-height:1.5em;}
.join-form table th {padding:12px 15px; border:1px solid #ddd; font-weight:700; color:#333;}
.join-form table td {padding:12px 20px; border:1px solid #ddd; color:#505050;}
.join-form tr th:first-child,
.join-form tr td:first-child {border-left:0;}
.join-form tr th:last-child,
.join-form tr td:last-child {border-right:0;}
.join-form input[readonly] {background-color:#fff; color:#505050;}
.join-form .help-text {display:inline-block; margin-left:10px; color:#767676;}
.join-form + .buttons {margin:0;}

/* 가입완료 */
.join-complete {text-align:center;}
.join-complete .in {margin-bottom:var(--size80);}
.join-complete .tit {color:var(--color-primary); font-size:24px; font-weight:700; line-height:1.4em; letter-spacing:-.04em; margin-bottom:var(--size60);}
.join-complete .txt {color:#333; font-size:18px; line-height:1.8em; letter-spacing:-.03em; margin-bottom:var(--size60);}

/* 게정찾기 */
.find-area {max-width:470px; margin:0 auto;}
.find-area .input {border-radius:5px;}
.find-tab {text-align:center; margin-bottom:30px;}
.find-tab ul {display:flex; padding:0 2px;}
.find-tab ul li {flex:1; border:1px solid #dfdfdf; margin:0 -1px;}
.find-tab ul li a {display:block; color:#a8a8a8; font-size:18px; font-weight:500; line-height:54px; }
.find-tab ul li.active {position:relative; z-index:2; border-color:var(--color-primary);}
.find-tab ul li.active a {color:var(--color-primary); font-weight:500;}
.find-content .group {margin-bottom:8px;}
.find-content .group .input {display:block; width:100%; height:54px; font-size:16px;}
.find-content .btn-pack {display:block; width:100%; margin-top:var(--size20-10);}
.find-content .btn-pack.focus {margin-top:30px;}
.find-content .btn-pack.xlarge {font-weight:500;}
.find-result {text-align:center; padding:40px 42px; color:#505050; font-size:18px; font-weight:400; line-height:1.75em; letter-spacing:-.03em; border-top:1px solid #505050; border-bottom:1px solid #dfdfdf;}
.find-result h4 {font-size:22px; font-weight:600; color:var(--color-primary); line-height:1.4em; letter-spacing:-.04em; margin-bottom:30px;}
.find-result p:first-child {margin-bottom:10px;}
.find-result .name {color:var(--color-primary); font-size:30px; font-weight:700; line-height:1.5em;}

/* 회원탈퇴 */
.member-leave .txt {text-align:center; color:#505050; line-height:1.7em; letter-spacing:-.03em; margin-bottom:40px;}
.member-leave .txt .tit {color:#333; font-size:20px; line-height:1.5em; margin-bottom:15px;}
.member-leave .form {max-width:470px; margin:0 auto 40px; padding:50px; color:#666; font-size:16px; line-height:1.5em; background:#f9f9f9; border:1px solid #e5e5e5; border-radius:10px;}
.member-leave .form .group {display:flex; align-items:center; margin-bottom:20px;}
.member-leave .form .group:last-child {margin-bottom:0;}
.member-leave .form .group .label-tt {width:90px; color:#222; font-weight:500;}
.member-leave .form .group .text-id,
.member-leave .form .group .input {flex:1 1 auto; min-width:0; width:1%;}