@charset "utf-8";

.agree-step {margin:clamp(3.75rem, 0.625rem + 7.8125vw, 10rem) 0 clamp(7.5rem, 4.375rem + 7.8125vw, 13.75rem);}
.agree-step ul {display:flex; justify-content:center;}
.agree-step ul li {display:flex; align-items:center; position:relative; padding-right:90px; margin-right:30px; font-family:var(--font-ns); font-size:clamp(0.875rem, 0.75rem + 0.3125vw, 1.125rem); font-weight:800; line-height:1; letter-spacing:0; color:#B0B0B0;}
.agree-step ul li .num {display:flex; align-items:center; justify-content:center; width:clamp(2.875rem, 1.8125rem + 2.6563vw, 5rem); height:clamp(2.875rem, 1.8125rem + 2.6563vw, 5rem); margin-right:14px; border-radius:100%; font-family:var(--font-os); font-size:clamp(1.25rem, 1.0625rem + 0.4688vw, 1.625rem); font-weight:700; line-height:1; letter-spacing:0; color:#B0B0B0;}
.agree-step ul li:before {content:''; position:absolute; top:50%; right:0; margin-top:-3px; width:60px; height:6px; background:url('/images/sub/dot.png') no-repeat 50% 50%/contain;}

.agree-step ul li:last-child {padding-right:0; margin-right:0;}
.agree-step ul li:last-child:before {display:none;}
.agree-step ul li.active {color:#121212;}
.agree-step ul li.active .num {background:#121212; color:#fff;}

.agree-wrap .group {display:flex; position:relative; align-items:center; margin-bottom:20px;}
.agree-wrap .group:first-child .tit {background:#121212; border-color:#121212;}
.agree-wrap .group:first-child .tit label {color:#fff;}
.agree-wrap .group:last-child {margin-bottom:0;}
.agree-wrap .group .tit {display:flex; padding:22px 18px; border:1px solid #DBDBDB; border-radius:4px; flex:1 1 auto; min-width:0; width:1%;}
.agree-wrap .group label {display:block; width:100%; cursor:pointer; font-size:clamp(1rem, 0.875rem + 0.3125vw, 1.25rem); font-weight:700; line-height:1.2; letter-spacing:0; color:#121212;}
.agree-wrap .group .pop-agree {display:block; position:absolute; right:18px; top:50%; margin-top:-10px; width:12px; height:20px; background:url('/images/sub/icon-pop.png') no-repeat 50% 50%/contain; text-indent:-999em; overflow:hidden;}

.agree-wrap .checkbox {display:block; width:100%; margin:0;}
.agree-wrap .checkbox label:before {width:26px; height:26px; margin:0 11px 0 0;}
.agree-wrap .checkbox input:checked + label:before {background:#fff url('/images/sub/icon-check.png') no-repeat 50% 50%; border:1px solid #3FD9D7; border-radius:4px;}
.agree-wrap .btn {margin-top:clamp(20px, calc( 80 / var(--inner) * 100vw ), 80px); text-align:center;}
.agree-wrap .btn .btn-pack {min-width:180px; margin:0 10px; font-size:16px; font-weight:500;}

/* 회원가입 */
.join-form .group {margin-bottom:100px;}
.join-form .group:last-child {margin-bottom:0;}
.join-form .required {color:#FF4647}
.join-form .join-form-tit {font-size:clamp(1.375rem, 1.25rem + 0.3125vw, 1.625rem); color:#000; font-weight:600; line-height:1.2em;}
.join-form .join-form-txt {margin-top:1.13em; font-size:clamp(0.875rem, 0.8125rem + 0.1563vw, 1rem); font-weight:500; color:#848484; line-height:1.2em; margin-bottom:28px;}
.join-form table {margin-top:28px; width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #000; font-size:16px; line-height:1.5em;}
.join-form table th {height:128px; padding:32px 15px 32px 40px; border-bottom:1px solid #ddd; background:#FBFBFB; font-weight:500; color:#121212; text-align:left;}
.join-form table td {height:128px; padding:32px 38px; border-bottom:1px solid #ddd; color:#000; font-weight:500;}
.join-form table td input {border-radius:4px; height:64px; line-height:62px;}
.join-form table td input::placeholder {font-size:16px; font-weight:400; color:#616161; letter-spacing:0;}
.join-form table td select.input {border-radius:4px; height:64px; color:#616161;}
.join-form table td .btn-pack {margin-left:20px; min-width:120px; height:64px; line-height:62px; font-size:16px; font-weight:500; letter-spacing:0;}
.join-form table td .item {display:inline-block; margin-right:50px;}
.join-form table th .small {display:block; font-size:12px; line-height:1.2em; letter-spacing:0; color:#FF4647}
.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-top:50px;}
.join-form + .buttons .btn-pack {min-width:180px; margin:0 10px; padding:0 20px; font-size:16px; font-weight:500;}
.join-form .radiobox input:checked + label:before {background:#000;}

/* 가입완료 */
.join-complete {width:100%; max-width:850px; margin:0 auto clamp(3.125rem, 2.1875rem + 2.3438vw, 5rem); padding:clamp(1.5rem, 1rem + 1.25vw, 2.5rem) clamp(0rem, -0.625rem + 1.5625vw, 1.25rem); background:#F9FAFC; border:1px solid #DBDBDB; border-radius:12px; text-align:center;}
.join-complete .icon img {height:clamp(4.625rem, 3.75rem + 2.1875vw, 6.375rem);}
.join-complete .tit {padding-bottom:0.63em; margin:0.94em 0; border-bottom:1px solid #D9D9D9; font-size:clamp(1.125rem, 0.6875rem + 1.0938vw, 2rem); font-weight:600; line-height:1.2; letter-spacing:0; color:#000;}
.join-complete .tit span {color:#3FD9D7;}
.join-complete .txt {font-size:clamp(0.75rem, 0.5625rem + 0.4688vw, 1.125rem); font-weight:500; line-height:1.3; letter-spacing:0; color:#9D9D9F;}
.join-complete + .buttons .btn-pack {min-width:180px; margin:0 10px; padding:0 20px; font-size:16px; font-weight:500;}

/* 회원정보 찾기 */
.find-id-tab {margin-bottom:clamp(60px, calc( 80 / var(--inner) * 100vw ), 80px);}
.find-id-tab ul {display:flex; justify-content:center;}
.find-id-tab ul li {width:50%; max-width:300px;}
.find-id-tab ul li a {display:flex; align-items:center; justify-content:center; height:clamp(40px, calc( 70 / var(--inner) * 100vw ), 70px); border-top:1px solid #DEDEDE; border-bottom:1px solid #DEDEDE; background:#F6F6F6; font-weight:500; line-height:1.2; letter-spacing:0; color:#000;}
.find-id-tab ul li.active a {background:#4CCAC7; color:#fff; font-weight:700;}

.find-id {width:100%; max-width:440px; margin:0 auto;}
.find-id .radiobox {margin-bottom:0.8em; font-weight:500; line-height:1.3; letter-spacing:0; color:#000;}
.find-id .radiobox label:before {content:""; display:inline-block; vertical-align:middle; margin:-.2em 8px 0 0; width:18px; height:18px; background-color:#f4f4f4; border:1px solid #ccc; border-radius:100%;}
.find-id .radiobox input:checked + label:before {background:#fff url("/images/bbs/radiobox.png") 50% 50% no-repeat;}
.find-id .radiobox input:focus + label:before {outline:2px solid highlight;}
.find-id .input {margin-bottom:12px; height:44px; border-radius:100vh;}
.find-id .input:last-child {margin-bottom:0;}
.find-id .input::placeholder {color:#616161;}
.find-id + .buttons {margin-top:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px);}
.find-id + .buttons .btn-pack {min-width:180px; margin:0 10px; padding:0 20px; font-size:16px; font-weight:500;}

.find-member-title {margin:clamp(40px, calc( 135 / var(--inner) * 100vw ), 135px) auto clamp(40px, calc( 53 / var(--inner) * 100vw ), 53px); text-align:center;}
.find-member-title h1 {font-family:var(--font-ns); font-size:clamp(24px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight:700; line-height:1.2; letter-spacing:0; color:#000;}

/* 마이페이지 */
.mypage-sub-title {padding:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px) 0 clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); margin-bottom:30px; text-align:center; border-bottom:3px solid #dbdbdb;}
.mypage-sub-title h1 {color:#000; font-size:clamp(24px, calc( 36 / var(--inner) * 100vw ), 36px); line-height:1.2em; font-weight:600; letter-spacing:0;}
.mypage-sub-title h1 span {color:#C0C0C0;}

.mypage-profile {width:100%; max-width:424px; margin:0 auto clamp(40px, calc( 180 / var(--inner) * 100vw ), 180px); padding:20px; background:#FBFBFB; border-radius:12px; border:1px solid #d9d9d9; text-align:center;}
.mypage-profile .nickname {display:inline-block; margin:1em 0 0.88em; padding:0.4em 0.5em; background:#9CCDCC; border-radius:100vh; line-height:1.2; font-weight:700; letter-spacing:0; color:#fff;}
.mypage-profile .name {font-size:clamp(14px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight:500; color:#4D4D4D; line-height:1.4; letter-spacing:0;}
.mypage-profile .name a {display:inline-block; vertical-align:middle; margin-top:-0.2em; width:24px; height:24px; border:0; background:url('/images/sub/icon-correction.png') no-repeat 50% 50%/contain; text-indent:-999em; overflow:hidden;}
.mypage-profile .email {margin-top:0.75em; font-weight:400; line-height:1.2; letter-spacing:0; color:#000;}

.photo-upload {position:relative; margin:0 auto; width:114px;}
.photo-upload label {cursor: pointer;}
.photo-upload .photo-image {position:relative; border-radius:100vh; border:1px solid #FBFBFB; overflow:hidden;}
.photo-upload .up-btn {position:absolute; left:0; top:0; z-index:50; width:100%; height:100%; display:flex; justify-content:flex-end; align-items:flex-end; padding:0;}

.photo-upload .img {position:absolute; left:0; top:0; background:#fff;}
.photo-upload .image-show {position:relative; padding-bottom:100%; overflow:hidden;}
.photo-upload .image-show 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;}
.photo-upload .image-show:before {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.08); z-index:1; border-radius:100%;}

.photo-upload .tit {margin-bottom:18px;}

.mypage-profile + .buttons {margin:clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px) auto 0;}
.mypage-profile + .buttons .btn-pack {margin:0 10px; min-width:180px;}


#chooseFile {display:none;}

/* 주문목록 */
.order-search {display:flex; margin-bottom:clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px);}
.order-search .period {display:flex; align-items:center; margin-right:16px;}
.order-search .day {position:relative;}
.order-search .bar {display:inline-block; margin:0 10px;}
.order-search .ui-datepicker-trigger {position:absolute; right:0; top:0; border:0; background-image:url('/images/sub/icon-date2.png');}
.order-search .cate {margin-right:12px;}
.order-search select,
.order-search input {border-radius:0.5em;}

.order-list .col {position:relative; margin-bottom:30px; padding:24px 20px; border:1px solid #ddd; border-radius:12px;}
.order-list .col:last-child {margin-bottom:0;}
.order-list .col h3 {margin-bottom:1.15em; font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight:800; line-height:1.2; letter-spacing:0; color:#9A9BA7;}
.order-detail-list .col {border-radius:0; margin-bottom:0; border-bottom:0;}
.order-detail-list + .buttons {margin:clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px) auto 0;}
.order-detail-list + .buttons .btn-pack {margin:0 10px; min-width:180px;}

.order-list .order-date {position:absolute; right:20px; top:24px; line-height:1.2; font-weight:500; color:#000; letter-spacing:0;}
.order-list .order-date span {display:inline-block; margin-right:0.69em; color:#9A9BA7;}
.order-list .order-btn-wrap {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.order-list .order-btn-wrap .btn {display:inline-flex; height:44px; align-items:center; justify-content:center; min-width:116px; border:1px solid #FF4647; font-weight:500; line-height:1.2; letter-spacing:0; color:#FF4647; border-radius:0.75em; text-align:center;}
.order-list .order-btn-wrap .btn.pop-btn {border-color:#9A9BA7; color:#9A9BA7;}

.order-product-info {display:flex; margin-bottom:24px;}
.order-product-info .info {flex:1 1 auto; min-width:0; width:1%;}
.order-product-info .image {width:150px; margin-right:20px;}
.order-product-info .image .thumb {position:relative; padding-bottom:73.33%; border-radius:0.5em; overflow:hidden;}
.order-product-info .image .thumb 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-product-info .tit {margin-bottom:0.6em; font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight:500; line-height:1.2; letter-spacing:0; color:#000;}
.order-product-info .tit span {display:inline-block; margin-right:0.5em; color:#9A9BA7;}
.order-product-info .price {margin-bottom:0.5em; font-size:clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight:700; line-height:1.2; letter-spacing:0; color:#000;}
.order-product-info .date {font-weight:500; line-height:1.2; letter-spacing:0; color:#A1A1A1;}
.order-product-info .date span {display:inline-block; padding:3px 4px; margin-right:6px; border:1px solid #A2A2A2; border-radius:2px; color:#999; font-size:0.75em; line-height:1;}

.order-info-txt {margin-right:10px; padding:18px 24px; background:#FAFAFC; border-radius:0.75em;}
.order-info-txt p {font-size:0.88em; font-weight:500; line-height:1.4; letter-spacing:0; color:#000;}

/* 환불하기 */
.refund {padding:; background:#F4F4F4; border:1px solid #DADADA;}
.refund .input-wrap {display:flex; padding:25px; border-bottom:1px solid #DADADA;}
.refund .input-wrap .box.left {width:40%; max-width:512px; margin-right:11px;}
.refund .input-wrap .box.right {display:flex; flex:1 1 auto; min-width:0; width:1%;}
.refund .input-wrap .box.right select {border-radius:4px 0 0 4px; border-right:0; color:#000; font-size:0.88em;}
.refund .input-wrap .box.right input {border-radius:0 4px 4px 0; color:#000; font-size:0.88em;}
.refund .input-wrap .box.right input::placeholder {color:#000;}
.refund .input-wrap .box textarea {display:block; border-radius:4px; color:#000; font-size:0.88em;}
.refund .refund-txt {padding:16px 25px;}
.refund .refund-txt p {font-size:0.88em; font-weight:400; line-height:1.4; letter-spacing:0; color:#000;}

/* 회원탈퇴 */
.leave {max-width:930px; margin:0 auto;}
.leave .top-content-box {margin-bottom:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px); background:#F9FAFC; border:1px solid #DBDBDB; border-radius:12px; text-align:center;}
.leave .top-content-box .ico {margin-bottom:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.leave .top-content-box .ico img {width:clamp(74px, calc( 102 / var(--inner) * 100vw ), 102px);}
.leave .top-content-box .tit {max-width:810px; padding-bottom:0.86em; margin:0 auto 1em auto; border-bottom:1px solid #D9D9D9; font-family:var(--font-ns); font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight:700; line-height:1.2; letter-spacing:0; color:#000;}
.leave .top-content-box .txt {font-size:clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight:500; line-height:1.32; letter-spacing:0; color:#9D9D9F;}
.reason .tit {margin-bottom:0.75em; padding-left:0.63em; font-size:16px; font-weight:700; line-height:1.4; letter-spacing:0; color:#121212;}
.reason textarea {display:block; border-radius:4px; border-color:#E0DFDF; color:#8D8D8D;}
.reason + .buttons {margin:60px 0 0 0;}
.reason + .buttons .btn-pack {margin:0 10px; min-width:180px;}