/* fonts */
@font-face {
  font-family: 'Pretendard';
  font-weight: 100;
  font-style: normal;
  src: url('../fonts/Pretendard-Thin.otf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 200;
  font-style: normal;
  src: url('../fonts/Pretendard-ExtraLight.otf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 300;
  font-style: normal;
  src: url('../fonts/Pretendard-Light.otf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Pretendard-Regular.otf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-style: normal;
  src: url('../fonts/Pretendard-Medium.otf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-style: normal;
  src: url('../fonts/Pretendard-SemiBold.otf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-style: normal;
  src: url('../fonts/Pretendard-Bold.otf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 800;
  font-style: normal;
  src: url('../fonts/Pretendard-ExtraBold.otf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 900;
  font-style: normal;
  src: url('../fonts/Pretendard-Black.otf') format("truetype");
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  src: url('../fonts/Montserrat-VariableFont_wght.ttf') format("truetype");
  font-display: swap;
}

/*===========================================================================
	CSS 초기화
============================================================================*/
* { font-family: "Pretendard", sans-serif; box-sizing:border-box; margin:0; padding:0; word-break: keep-all; line-height: 1.5;}
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, em, img, b, dl, dt, dd, ol, ul, li, form, label, legend, caption, article, aside, footer, header, menu, nav, section, video {border:0; outline:0; font-size: 16px; color:#202020; }
html { scroll-behavior: auto; }
body { line-height:1; -ms-overflow-style: none; width: 100%; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
ul, ol, li {list-style:none;}
a {margin:0; padding:0; font-size:100%; display: block; text-decoration: none; color:#202020; }
pre { font-family: "Pretendard", sans-serif; white-space: pre-line; line-height: 1.2; }
img {width: 100%;}
input, select {vertical-align:middle; outline:0; border: 0; background: none; font-family: "Pretendard", sans-serif;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="file"], input[type="checkbox"], input[type="radio"] { display: none; }
input[type="date"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; text-align: left; } 
input::-webkit-date-and-time-value { text-align: left; }
select { appearance: none; background-image: url(../images/icon_arrow_down.png); background-repeat: no-repeat; background-position: right 8px center; background-size: 18px; width: 100%; min-width: 100%; }
select option { width: 100%; }
select option[value="disabled"][disabled] {display: none;}
label { cursor: pointer; }
button {cursor:pointer; border: 0; outline: 0; background: none; color:#202020; }
textarea { border: 0; outline: 0; resize: none; font-family: "Pretendard", sans-serif;}
i { font-family: 'xeicon'; font-style: normal; color: inherit; line-height: inherit; }

/* 콘텐츠 공통 */
#wrap { position: relative; }
main { width: 100%; min-height: calc( 100dvh - 217px ); }
.col-group {display:flex;}
.col-group.wrap { flex-flow: wrap; }
.row-group {display:flex; flex-flow: column;}

.red { color: #c31a30; }

.pc { display: block; }
.mb { display: none; }

/* 주문하기 */
.order-wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: 100px 0 136px; }
.order-title-wrap { text-align: center; margin-bottom: 32px; display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 24px; }
.order-title { font-size: 40px; font-weight: bold; line-height: 1.25; }
.order-sub-title { font-size: 16px; line-height: 1.5; }
.order-section { padding: 40px 0; }
.order-section:not(:last-child) { border-bottom: 12px solid #f5f5f5; }
.section-title-wrap { display: flex; flex-flow: column; gap: 8px; margin-bottom: 16px; }
.section-title { font-size: 18px; font-weight: bold; line-height: 1.25; }
.section-sub-title { font-size: 14px; color: #8c8c8c; line-height: 1.5; }

@media screen and ( max-width: 640px ) {
  .order-wrap { padding: 40px 16px 80px; }
  .order-title-wrap { margin-bottom: 16px; gap: 8px; }
  .order-title { font-size: 20px; }
  .order-sub-title { font-size: 14px; }
  .order-section { padding: 24px 0; }
  .order-section:not(:last-child) { border-width: 6px; }
  .section-title { font-size: 16px; }
  .section-sub-title { font-size: 12px; }
}

/* 주문하기 - 배송지 선택 */
.addr-btn { height: 56px; display: flex; align-items: center; gap: 16px; font-size: 28px; font-weight: bold; }
.addr-btn .icon { width: 24px; }
.addr-item { display: flex; flex-flow: wrap; gap: 8px; align-items: flex-start; justify-content: space-between; }
.addr-item .txt-wrap { width: calc( 100% - 88px ); display: flex; flex-flow: column; gap: 4px; }
.addr-item .txt { font-size: 16px; line-height: 1.5; }
.addr-item .edit-btn { width: 80px; height: 48px; text-align: center; line-height: 48px; font-size: 16px; color: #fff; background: #c31a30; }
.form-select { width: 100%; height: 56px; border: 1px solid #dfdfdf; padding: 0 16px; padding-right: 32px; background-color: #fff; font-size: 16px; background-image: url(../images/icon_angle_down_thin.png); background-size: 18px; background-repeat: no-repeat; background-position: right 16px center; }

.modal-wrap .addr-item .txt-wrap { width: 100%; } 
.modal-wrap .addr-item .order-item-btn-wrap { flex-flow: row; width: 100%; margin-top: 8px; }
.modal-wrap .addr-item .order-item-btn { width: 100%; }

@media screen and ( max-width: 640px ) {
  .addr-btn { height: 40px; gap: 8px; font-size: 20px; }
  .addr-btn .icon { width: 18px; }
  .addr-item .txt { font-size: 14px; }
  .addr-item .edit-btn { width: 80px; height: 40px; line-height: 40px; font-size: 14px; }
  .form-select { height: 48px; font-size: 14px; background-size: 16px; }
}

/* 주문하기 - 배송수단 */
.deli-select-wrap { display: flex; flex-flow: column; gap: 8px; }
.deli-select-item { width: 100%; display: flex; align-items: center; padding: 24px; min-height: 92px; border: 1px solid #dfdfdf; }
.deli-select-item .icon { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid #dfdfdf; position: relative; }
.deli-select-item .icon::after { content: ''; display: block; position: absolute; width: 50%; height: 50%; border-radius: 50%; background: #c31a30; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; }
.deli-select-item .txt-wrap { display: flex; flex-flow: column; gap: 8px; padding: 0 16px; width: calc( 100% - 84px ); }
.deli-select-item .title { font-size: 16px; font-weight: bold; line-height: 1.25; }
.deli-select-item .txt { font-size: 14px; line-height: 1.5; }
.deli-select-item .sub-txt { font-size: 14px; color: #8c8c8c; width: 64px; text-align: right; }

.deli-select-label input:checked + .deli-select-item { border-color: #c31a30; }
.deli-select-label input:checked + .deli-select-item .icon { border-color: #c31a30; }
.deli-select-label input:checked + .deli-select-item .icon::after { display: block; }

.deli-notice-wrap { padding: 24px; background: #f2f2f2; }
.deli-notice-wrap .txt { font-size: 16px; line-height: 1.5; color: #8c8c8c; display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.deli-notice-wrap .txt .icon { width: 20px; }
.deli-notice-wrap .txt.dot { position: relative; padding-left: 12px; margin-bottom: 0; }
.deli-notice-wrap .txt.dot::after { content: ''; display: block; position: absolute; width: 3px; height: 3px; background: #8c8c8c; border-radius: 50%; left: 0; top: 10px; }

@media screen and ( max-width: 640px ) {
  .deli-select-item { padding: 16px; min-height: unset; }
  .deli-select-item .icon { width: 16px; height: 16px; }
  .deli-select-item .title { font-size: 14px; }
  .deli-select-item .txt { font-size: 12px; }
  .deli-select-item .sub-txt { font-size: 12px; }
  
  .deli-notice-wrap { padding: 16px; }
  .deli-notice-wrap .txt { font-size: 14px; }
  .deli-notice-wrap .txt .icon { width: 16px; }
}

/* 주문하기 - 주문상품 */
.order-item:not(:last-child) { padding-bottom: 24px; border-bottom: 1px solid #dfdfdf; margin-bottom: 24px; }
.order-item { display: flex; flex-flow: wrap; justify-content: space-between; gap: 16px; }
.order-item .item-img { width: 120px; height: 90px; background-color: #f2f2f2; }
.order-item .item-img img { height: 100%; object-fit: contain; object-position: center; }
.order-item .item-txt-wrap { width: calc( 100% - 120px - 16px ); display: flex; flex-flow: column; gap: 8px; }
.order-item .name { font-size: 16px; font-weight: bold; }
.order-item .txt-group { display: flex; flex-flow: wrap; gap: 8px; }
.order-item .txt { font-size: 16px; }
.order-item .txt-group .txt:not(:first-child) { padding-left: 8px; border-left: 1px solid #222; }
.order-item .price { font-size: 16px; font-weight: bold; margin-top: auto; }

.form-checkbox .checked-item { display: flex; align-items: center; gap: 8px; }
.form-checkbox .checked-item .icon { background-repeat: no-repeat; background-size: contain; background-position: center; }
.form-checkbox .checked-item .icon.radio { width: 24px; height: 24px; background-image: url(../images/icon_radio.png); }
.form-checkbox input:checked + .checked-item .icon.radio { background-image: url(../images/icon_radio_active.png); }
.form-checkbox .checked-item .icon.checkbox { width: 20px; height: 20px; background-image: url(../images/icon_checkbox.png); }
.form-checkbox input:checked + .checked-item .icon.checkbox { background-image: url(../images/icon_checkbox_active.png); }
.form-checkbox .checked-item .txt { font-size: 16px; width: calc( 100% - 32px ); }

@media screen and ( max-width: 640px ) {
  .order-item:not(:last-child) { padding-bottom: 16px; margin-bottom: 16px; }
  .order-item { gap: 8px; }
  .order-item .item-img { width: 80px; height: 60px; }
  .order-item .item-txt-wrap { width: calc( 100% - 80px - 8px ); gap: 8px; }
  .order-item .name { font-size: 14px; }
  .order-item .txt-group { gap: 4px; }
  .order-item .txt { font-size: 14px; }
  .order-item .txt-group .txt:not(:first-child) { padding-left: 4px; }
  .order-item .price { font-size: 14px; }
  
  .form-checkbox .checked-item .icon.radio { width: 20px; height: 20px; }
  .form-checkbox .checked-item .icon.checkbox { width: 16px; height: 16px; }
  .form-checkbox .checked-item .txt { font-size: 14px; width: calc( 100% - 28px ); }
}

/* 주문하기 - 결제수단 */
.payment-select-wrap { display: flex; gap: 16px; }
.payment-select-label { width: 100%; }
.payment-select-item { width: 100%; line-height: 56px; text-align: center; background: #f2f2f2; font-size: 16px; }
.payment-select-label input:checked + .payment-select-item { background: #c31a30; color: #fff; }

@media screen and ( max-width: 640px ) {
  .payment-select-wrap { gap: 8px; }
  .payment-select-item { line-height: 48px; font-size: 14px; }
}

/* 주문하기 - 결제 예정 금액 */
.order-price-wrap { display: flex; flex-flow: column; gap: 8px; }
.order-price-item { display: flex; align-items: center; justify-content: space-between; }
.order-price-item .item-default { font-size: 16px; line-height: 1.5; }
.order-price-item .item-user { font-size: 16px; line-height: 1.5; }
.order-price-item.total { padding-top: 16px; border-top: 1px solid #dfdfdf; margin-top: 8px; }
.order-price-item.total .item-user { font-size: 20px; font-weight: bold; color: #c31a30; }

@media screen and ( max-width: 640px ) {
  .order-price-item .item-default { font-size: 14px; }
  .order-price-item .item-user { font-size: 14px; }
  .order-price-item.total { padding-top: 14px; }
  .order-price-item.total .item-user { font-size: 18px; }
}

/* 주문하기 - 개인정보 수집 및 이용동의 */
.agree-item { padding: 16px 0; display: flex; justify-content: space-between; }
.agree-item-all { padding: 24px 0; border-bottom: 1px solid #dfdfdf; }
.agree-item .link { font-size: 14px; color: #8c8c8c; text-decoration: underline; width: 48px; text-align: right; }
.agree-item .form-checkbox { width: calc( 100% - 48px ); }
.agree-item-all .form-checkbox { width: 100%; }

.order-btn { width: 100%; line-height: 56px; text-align: center; background: #c31a30; font-size: 16px; font-weight: bold; color: #fff; }

@media screen and ( max-width: 640px ) {
  .agree-item { padding: 8px 0; }
  .agree-item-all { padding: 16px 0; }
  .agree-item .link { font-size: 12px; }
}

/* 주문완료 */
.order-done-wrap { min-height: calc( 100vh - 68px ); display: flex; flex-flow: column; align-items: center; justify-content: center; }
.order-done-wrap .order-title-wrap { margin-bottom: 60px; }
.order-done-wrap .order-title-wrap .icon { width: 48px; }
.order-done-wrap .order-btn { max-width: 300px; }

@media screen and ( max-width: 640px ) {
  .order-done-wrap { min-height: calc( 100vh - 60px ); }
  .order-done-wrap .order-title-wrap { margin-bottom: 48px; }
  .order-done-wrap .order-title-wrap .icon { width: 24px; }
}

/* 마이페이지 */
.mypage { padding: 100px 40px 120px; display: flex; gap: 80px; width: 1360px; margin: 0 auto; }
.mypage_index .mypage-nav { width: 100%; max-width: 640px; margin: 0 auto; }
.mypage-nav { width: 200px; }
.mypage-nav-top { font-size: 24px; line-height: 1.4; margin-bottom: 16px; }
.mypage-nav-list { padding: 24px 0; display: flex; flex-flow: column; gap: 16px; }
.mypage-nav-list:not(:last-child) { border-bottom: 1px solid #dfdfdf; }
.mypage-nav-title { font-size: 18px; font-weight: bold; }
.mypage-nav-item { font-size: 16px; color: #8c8c8c; width: fit-content; text-align: left; line-height: 1.2; }
.mypage-nav-item.active { font-weight: bold; color: #c31a30; }
.mypage-wrap { width: calc( 100% - 280px ); }
.mypage-section-wrap { display: flex; flex-flow: column; gap: 24px; }
.mypage-title-wrap { margin-bottom: 24px; display: flex; align-items: flex-end; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid #222; position: relative; }
.mypage-title { font-size: 24px; font-weight: bold; }
.mypage-sub-title { font-size: 16px; color: #8c8c8c; }

@media screen and ( max-width: 640px ) {
  .mypage { padding: 40px 16px 80px; gap: 40px; width: 100%; }
  .mypage_index .mypage-nav { display: block; }
  .mypage-nav { width: 100%; display: none; }
  .mypage-nav-top { font-size: 20px; }
  .mypage-nav-list { padding: 16px 0; }
  .mypage-nav-title { font-size: 16px; }
  .mypage-nav-item { font-size: 14px; }
  .mypage-wrap { width: 100%; }
  .mypage-section-wrap { gap: 16px; }
  .mypage-title-wrap { margin-bottom: 16px; gap: 8px; border-bottom: 1px solid #222; }
  .mypage-title { font-size: 18px; }
  .mypage-sub-title { font-size: 14px; }
}

/* 마이페이지 주문/배송 내역 */
.order-status-wrap { display: flex; align-items: center; border-bottom: 12px solid #f5f5f5; }
.order-status-item { width: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 16px; position: relative; padding: 16px 0 24px; }
.order-status-item .icon { width: 36px; }
.order-status-item .title { font-size: 16px; }
.order-status-item .num { font-size: 24px; font-weight: bold; color: #bcbcbc; padding: 0 5px; cursor: pointer; }
.order-status-item .num.active { color: #c31a30; border-bottom: 2px solid #c31a30; }

.order-search-wrap { display: flex; justify-content: space-between; align-items: center; }
.date-tab-wrap { display: flex; border: 1px solid #dfdfdf; border-right: 0; }
.date-tab { width: 80px; height: 56px; border-right: 1px solid #dfdfdf; text-align: center; line-height: 56px; }
.date-tab-wrap input:checked + .date-tab { background-color: #c31a30; border-color: #c31a30; color: #fff; font-weight: bold; }
.date-search-wrap { display: flex; gap: 8px; align-items: center; }
.date-search-wrap .form-date { width: 180px; height: 56px; border: 1px solid #dfdfdf; padding: 0 16px; padding-left: 40px; background-image: url(../images/icon_calendar.png); background-size: 18px; background-repeat: no-repeat; background-position: left 16px center; font-size: 16px; }
.date-search-btn { width: 180px; height: 56px; text-align: center; line-height: 56px; font-weight: bold; color: #fff; background: #c31a30; font-size: 16px; }

.status-select { min-width: unset; font-size: 16px; width: 140px; font-weight: bold; padding: 0 16px; padding-right: 24px; background-image: url(../images/icon_angle_down_thin.png); background-size: 18px; background-repeat: no-repeat; background-position: right center; }

.mypage-wrap .order-item-wrap { border-top: 2px solid #222222; padding-top: 24px; }
.order-item .item-status-wrap { width: 100%; display: flex; gap: 16px; }
.order-item .item-status { width: fit-content; line-height: 28px; padding: 0 16px; border-radius: 14px; font-size: 14px; color: #fff; }
.order-item .item-status.status-1 { background: #ffbb5c; }
.order-item .item-status.status-2 { background: #ff9a1d; }
.order-item .item-status.status-3 { background: #d84040; }
.order-item .item-status.status-4 { background: #a31d1d; }
.order-item .item-status.status-5 { background: #222222; }
.order-item .item-status-txt { font-size: 14px; color: #8c8c8c; position: relative; }
.order-item .item-status-txt:not(:last-child)::after { content: ''; display: block; position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #8c8c8c; right: -8px; top: 50%; transform: translate(50%, -50%); }
.mypage-wrap .order-item .item-txt-wrap { width: calc( 100% - 136px - 196px ); }
.order-item-btn-wrap { display: flex; flex-flow: column; gap: 8px; justify-content: flex-end; }
.order-item-btn { width: 180px; height: 48px; border: 1px solid #dfdfdf; text-align: center; line-height: 48px; background: #fff; font-size: 16px; }
.order-item-btn.red { border-color: #c31a30; color: #fff; background: #c31a30; }

@media screen and ( max-width: 640px ) {
  .order-status-wrap { border-bottom: 6px solid #f5f5f5; }
  .order-status-item { width: 100%; gap: 8px; position: relative; padding: 0 0 16px; }
  .order-status-item .icon { width: 24px; }
  .order-status-item .title { font-size: 12px; white-space: nowrap; }
  .order-status-item .num { font-size: 18px; font-weight: bold; color: #bcbcbc; padding: 0 5px; cursor: pointer; }
  .order-status-item .num.active { color: #c31a30; border-bottom: 2px solid #c31a30; }
  
  .order-search-wrap { flex-flow: wrap; gap: 8px; }
  .date-tab-wrap { width: 100%; }
  .date-tab-wrap label { width: 100%; }
  .date-tab { width: 100%; height: 40px; line-height: 40px; font-size: 14px; }
  .date-search-wrap { gap: 4px; }
  .date-search-wrap .form-date { width: calc( ( 100% - 102px ) / 2 ); height: 40px; padding: 0 8px; padding-left: 28px; background-size: 16px; background-position: left 6px center; font-size: 14px; }
  .date-search-btn { width: 80px; height: 40px; line-height: 40px; font-size: 14px; }
  
  .status-select { font-size: 14px; width: 140px; padding: 0 8px; padding-right: 16px; background-size: 16px; }
  
  .mypage-wrap .order-item-wrap { border-top: 1px solid #222222; padding-top: 16px; }
  .order-item .item-status-wrap { width: 100%; display: flex; gap: 16px; margin-bottom: 8px; }
  .order-item .item-status { line-height: 24px; padding: 0 12px; font-size: 12px; }
  .order-item .item-status-txt { font-size: 12px; }
  .mypage-wrap .order-item .item-txt-wrap { width: calc( 100% - 88px ); }
  .order-item-btn-wrap { flex-flow: row; width: 100%; justify-content: flex-start; margin-top: 8px; }
  .order-item-btn { width: 100%; height: 40px; line-height: 40px; font-size: 14px; }
}

/* 마이페이지 취소/교환/반품 내역 */
.order-item.active { padding-bottom: 0; }
.order-item-toggle-btn { width: 32px; height: 32px; margin: auto 24px; }
.order-item.active .order-item-toggle-btn { transform: rotate(180deg); }
.order-item .item-detail-wrap { width: 100%; padding: 24px; background: #f2f2f2; border-top: 1px solid #222; display: none; margin-top: 8px; }
.order-item.active .item-detail-wrap { display: block; }
.order-item .item-detail-group:not(:last-child) { padding-bottom: 24px; border-bottom: 1px solid #dfdfdf; margin-bottom: 24px; }
.order-item .item-detail-title { font-size: 16px; font-weight: bold; margin-bottom: 16px; display: flex; gap: 16px; align-items: center; }
.order-item .item-detail-title .sub-txt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #8c8c8c; font-weight: normal; }
.order-item .item-detail-title .sub-txt .icon { width: 16px; }
.order-item .item-detail-list { display: flex; flex-flow: column; gap: 8px; }
.order-item .item-detail { display: flex; }
.order-item .item-detail-default { width: 104px; }
.order-item .item-detail-user { width: calc( 100% - 104px ); }

.mypage-tab-wrap { display: flex; }
.mypage-tab { width: 100%; line-height: 56px; text-align: center; background: #f2f2f2; font-size: 16px; cursor: pointer; }
.mypage-tab.active { background: #222; font-weight: bold; color: #fff; }
.mypage-tab-content { display: none; }
.mypage-tab-content.active { display: block; }

@media screen and ( max-width: 640px ) {
  .order-item-toggle-btn { width: 100%; height: 24px; margin: 0; }
  .order-item-toggle-btn img { width: 24px; }
  .order-item .item-detail-wrap { padding: 16px;}
  .order-item .item-detail-group:not(:last-child) { padding-bottom: 16px; margin-bottom: 16px; }
  .order-item .item-detail-title { font-size: 14px; margin-bottom: 8px; flex-flow: wrap; gap: 8px; }
  .order-item .item-detail-title .sub-txt { gap: 4px; font-size: 12px; align-items: flex-start; }
  .order-item .item-detail-title .sub-txt .icon { width: 14px; }
  .order-item .item-detail-list { gap: 4px; }
  .order-item .item-detail-default { width: 88px; font-size: 13px; }
  .order-item .item-detail-user { width: calc( 100% - 88px ); font-size: 13px; }
  
  .mypage-tab { line-height: 48px; font-size: 14px; }
}

/* 배송지 관리 */
.mypage-title-wrap .order-item-btn { position: absolute; right: 0; }

.mypage-wrap .addr-item .txt-wrap { width: calc( 100% - 188px ); }
.addr-item:not(:last-child) { padding-bottom: 24px; border-bottom: 1px solid #dfdfdf; margin-bottom: 24px; }
.addr-item .label { width: 84px; line-height: 28px; background: #f2f2f2; text-align: center; font-size: 14px; }
.addr-item .title { font-size: 18px; font-weight: bold; padding: 8px 0; line-height: 1.5; }

@media screen and ( max-width: 640px ) {
  .mypage-title-wrap .order-item-btn { width: 88px; height: 32px; line-height: 32px; }

  .mypage-wrap .addr-item .txt-wrap { width: 100%; }
  .addr-item:not(:last-child) { padding-bottom: 16px; margin-bottom: 16px; }
  .addr-item .title { font-size: 16px; padding: 4px 0; }
}

/* 배송지 관리 - 배송지 관리 팝업 */
.modal-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); background-color: rgba(0,0,0,0.5); display: none; z-index: 999; }
.modal-wrap { width: 100%; max-width: 520px; padding: 32px 40px; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.modal-wrap .close-btn { width: 24px; height: 24px; position: absolute; right: 24px; top: 24px; }
.modal-scroll-wrap { max-height: 60vh; overflow: auto; }
.modal-title-wrap { margin-bottom: 24px; }
.modal-title { font-size: 24px; font-weight: bold; }
.form-list { display: flex; flex-flow: column; gap: 24px; }
.form-item { display: flex; flex-flow: column; gap: 8px; }
.form-item .item-default { font-size: 16px; font-weight: bold; }
.form-input { width: 100%; height: 56px; border: 1px solid #dfdfdf; padding: 0 16px; font-size: 16px; }
.form-input-wrap { display: flex; flex-flow: column; gap: 8px; }
.form-btn-wrap { display: flex; gap: 8px; }
.form-btn-wrap .form-input { width: calc( 100% - 158px ); }
.form-btn-wrap .form-btn { width: 150px; height: 56px; text-align: center; line-height: 56px; font-size: 16px; background: #f2f2f2; }

@media screen and ( max-width: 640px ) {
  .modal-container { background-color: transparent; }
  .modal-wrap { max-width: 640px; height: 100vh; padding: 40px 16px; }
  .modal-wrap .close-btn { right: 16px; top: 16px; }
  .modal-scroll-wrap { max-height: calc( 100vh - 126px ); }
  .modal-title { font-size: 18px; }
  .form-list { gap: 16px; }
  .form-item { gap: 8px; }
  .form-item .item-default { font-size: 14px; }
  .form-input { height: 48px; font-size: 14px; }
  .form-btn-wrap .form-input { width: calc( 100% - 96px ); }
  .form-btn-wrap .form-btn { width: 88px; height: 48px; line-height: 48px; font-size: 14px; }
}

/* 배송지 관리 - 찜한 상품 */
.bookmark-item-wrap { display: flex; flex-flow: wrap; gap: 40px 24px; } 
.bookmark-item-wrap .order-item { width: calc( ( 100% - 24px * 2 ) / 3 ); }
.bookmark-item-wrap .order-item:not(:last-child) { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
.bookmark-item-wrap .order-item .item-img { width: 100%; padding-top: 75%; position: relative; }
.bookmark-item-wrap .order-item .item-img img { height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.bookmark-item-wrap .order-item .item-txt-wrap { width: calc( 100% - 32px ); position: relative; }
.bookmark-item-wrap .order-item .bookmark-btn { width: 28px; position: absolute; top: 0; right: -32px; }
.bookmark-item-wrap .order-item .name { font-size: 20px; }
.bookmark-item-wrap .order-item .txt-group { gap: 8px 12px; }
.bookmark-item-wrap .order-item .txt { font-size: 18px; }
.bookmark-item-wrap .order-item .txt-group .txt:not(:first-child) { padding-left: 12px; }
.bookmark-item-wrap .order-item .price { font-size: 20px; margin-top: 16px; font-weight: bold; }

@media screen and ( max-width: 640px ) {
  .bookmark-item-wrap { gap: 24px 16px; } 
  .bookmark-item-wrap .order-item { width: calc( ( 100% - 16px ) / 2 ); }
  .bookmark-item-wrap .order-item .item-txt-wrap { width: calc( 100% - 24px ); }
  .bookmark-item-wrap .order-item .bookmark-btn { width: 16px; right: -24px; }
  .bookmark-item-wrap .order-item .name { font-size: 16px; }
  .bookmark-item-wrap .order-item .txt-group { gap: 4px 8px; }
  .bookmark-item-wrap .order-item .txt { font-size: 14px; }
  .bookmark-item-wrap .order-item .txt-group .txt:not(:first-child) { padding-left: 8px; }
  .bookmark-item-wrap .order-item .price { font-size: 16px; margin-top: 8px; }
}

/* 배송지 관리 - 장바구니 */
.cart-item-wrap .order-item-wrap { border-top: 0; }
.cart-item-wrap .order-item { align-items: center; }
.cart-item-wrap .order-item .item-txt-wrap { width: calc( 100% - 136px - 196px - 40px ); }
.cart-item-wrap .order-item .price { margin-top: 16px; }
.cart-item-all { justify-content: flex-start; gap: 16px; padding-top: 0; padding-bottom: 24px; }
.cart-item-all .form-checkbox { width: fit-content; }
.cart-item-all .btn { font-size: 16px; }
.cart-item-all .btn:hover { text-decoration: underline; }

@media screen and ( max-width: 640px ) {
  .cart-item-wrap .order-item { align-items: flex-start; }
  .cart-item-wrap .order-item .item-txt-wrap { width: calc( 100% - 112px ); }
  .cart-item-wrap .order-item .price { margin-top: 0; }
  .cart-item-all { gap: 8px; padding-bottom: 16px; }
  .cart-item-all .btn { font-size: 14px; }
}

/* 1:1 문의하기 */
.inquiry-list { margin-top: -24px; }
.inquiry-item { padding: 24px 0; display: flex; align-items: center; }
.inquiry-item:not(:last-child) { border-bottom: 1px solid #e4e4e4; }
.inquiry-item .item-label { width: 104px; line-height: 36px; text-align: center; border-radius: 18px; background: #222222; font-size: 16px; font-weight: bold; color: #fff; }
.inquiry-item .item-label.active { background: #c31a30; }
.inquiry-item .item-txt-wrap { width: calc( 100% - 104px - 150px ); display: flex; align-items: center; gap: 16px; padding-left: 16px; }
.inquiry-item .item-txt { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inquiry-item .item-sub-txt { width: 150px; text-align: right; font-size: 16px; color: #aeaeae; }

@media screen and (max-width: 640px) {
  .inquiry-list { margin-top: -16px; }
  .inquiry-item { padding: 16px 0; flex-flow: column; gap: 12px; align-items: flex-start; }
  .inquiry-item .item-label { width: 72px; line-height: 24px; font-size: 13px; }
  .inquiry-item .item-txt-wrap { width: 100%; flex-flow: column; align-items: flex-start; gap: 8px; padding-left: 0; }
  .inquiry-item .item-title { font-size: 14px; }
  .inquiry-item .item-txt { font-size: 14px; line-height: 1.4; display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: calc( ( 1em * 1.4 ) * 2 ); white-space: unset; }
  .inquiry-item .item-sub-txt { width: fit-content; text-align: left; font-size: 12px; }
}

/* 1:1 문의하기 - 작성 */
.form-textarea { width: 100%; padding: 16px; border: 1px solid #d8d8d8; background: #fff; height: 240px; font-size: 16px; }
.form-sticker-wrap { position: relative; }
.form-sticker-wrap .form-sticker{ font-size: 16px; color: #aeaeae; position: absolute; right: 16px; bottom: 16px; }
.form-sticker-wrap .form-textarea { padding-bottom: 40px; }

.file-upload-wrap { gap: 16px; }
.file-upload-btn { width: 100%; height: 52px; line-height: 52px; text-align: center; background: #707070; font-size: 16px; font-weight: 500; color: #fff; }

@media screen and (max-width: 640px) {
  .form-textarea { height: 180px; font-size: 14px; }
  .form-sticker-wrap .form-sticker{ font-size: 14px; }
  
  .file-upload-wrap { gap: 8px; }
  .file-upload-btn { height: 48px; line-height: 48px; font-size: 14px; }
}

/* 1:1 문의 내역 - 상세 */
.inquiry_detail .title-wrap { align-items: flex-start; text-align: left; gap: 8px; padding: 8px 0 24px; position: relative; padding-right: 104px; }
.inquiry_detail .title-wrap .title { font-size: 20px; font-weight: bold; line-height: 1.2; }
.inquiry_detail .title-wrap .txt { font-size: 16px; color: #aeaeae; }
.inquiry_detail .title-wrap .label { width: 104px; line-height: 36px; text-align: center; border-radius: 18px; background: #222; font-size: 16px; font-weight: bold; color: #fff; position: absolute; right: 0;top: 8px; }
.inquiry_detail .title-wrap .label.active { background: #c31a30; }
.inquiry_detail .con-wrap { max-width: unset; padding: 24px 0; font-size: 16px; line-height: 1.5; }

.inquiry-detail-item .a-content { padding: 40px; background: #f5f5f5; margin: 24px 0; }
.inquiry-detail-item .a-content .txt-group { align-items: baseline; gap: 16px; margin-bottom: 16px; }
.inquiry-detail-item .a-content .txt { font-size: 20px; font-weight: bold; line-height: 1.5; }
.inquiry-detail-item .a-content .sub-txt { color: #aeaeae; font-size: 16px; }
.inquiry-detail-item .a-content .item-txt { font-size: 16px; line-height: 1.5; align-items: flex-start; }

.file-download-group { gap: 8px; margin-bottom: 24px; }
.file-download-wrap { height: 52px; align-items: center; padding: 0 16px; background: #f2f2f2; gap: 8px; }
.file-download-wrap .icon { width: 20px;}
.file-download-wrap .file-title { font-size: 16px; width: calc( 100% - 56px ); min-width: 136px; font-size: 16px; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.inquiry_detail .order-btn { background: #222; width: 300px; margin-top: 16px; }
.inquiry_detail .order-btn.red { background: #c31a30; }

@media screen and (max-width: 640px) {
  .inquiry_detail .title-wrap { padding: 0 0 16px; }
  .inquiry_detail .title-wrap .title { font-size: 18px; }
  .inquiry_detail .title-wrap .txt { font-size: 12px; }
  .inquiry_detail .title-wrap .label { width: 72px; line-height: 24px; font-size: 13px; position: static; margin-bottom: 4px; }
  .inquiry_detail .con-wrap { padding: 16px 0; font-size: 14px; }
  
  .inquiry-detail-item .a-content { padding: 16px; margin: 16px 0; }
  .inquiry-detail-item .a-content .txt-group { gap: 8px; }
  .inquiry-detail-item .a-content .txt { font-size: 14px; }
  .inquiry-detail-item .a-content .sub-txt { font-size: 12px; }
  .inquiry-detail-item .a-content .item-txt { font-size: 14px; }

  .file-download-group { margin-bottom: 16px; }
  .file-download-wrap { height: 40px; padding: 0 8px; gap: 8px; }
  .file-download-wrap .icon { width: 16px;}
  .file-download-wrap .file-title { font-size: 14px; width: calc( 100% - 48px ); min-width: unset; font-size: 14px; }
  
  .inquiry_detail .order-btn { width: 100%; }
}

/* 1:1 문의 내역 - 회원정보 변경 */
.account-btn-wrap { display: flex; gap: 24px; }
.account-btn { width: 100%; height: 110px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; background: #fff; border: 1px solid #dfdfdf; }
.account-btn .img { width: auto; height: 24px; }
.mypage-wrap .order-section-wrap { margin-top: -24px; }

@media screen and (max-width: 640px) {
  .account-btn-wrap { gap: 8px; }
  .account-btn { height: 88px; flex-flow: column; font-size: 14px; }
  .account-btn .img { height: 20px; }
  .mypage-wrap .order-section-wrap { margin-top: -16px; }
}

/* 로그아웃 */
.modal-alert-txt { padding: 16px 0 40px; line-height: 1.5; font-size: 18px; }
.modal-footer-wrap { display: flex; gap: 16px; }
.modal-footer-btn { width: 100%; line-height: 56px; text-align: center; background: #f2f2f2; font-size: 16px; }
.modal-footer-btn.red { background: #c31a30; color: #fff; }

@media screen and (max-width: 640px) {
  .modal-alert { display: flex; flex-flow: column; justify-content: space-between; }
  .modal-alert-txt { text-align: center; font-size: 16px; }
  .modal-footer-wrap { gap: 8px; }
  .modal-footer-btn { line-height: 48px; font-size: 14px; }
}

/* pagination */
.pagination { display: flex; align-items: center; justify-content: center; margin-top: 64px; }
.pagination .page-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.pagination .page-btn.active { color: #c31a30; }
.pagination .page-btn img { width: 24px; width: 24px; object-fit: contain; object-position: center; }
.pagination .page-btn.last img { width: 14px; height: 14px; }
.pagination .page-btn.next img { transform: rotate(180deg); }
.pagination .page-btn.disable img { opacity: .4; }

@media screen and (max-width: 640px) {
  .pagination { margin-top: 24px; }
  .pagination .page-btn { width: 32px; height: 32px; font-size: 14px; }
  .pagination .page-btn img { width: 20px; width: 20px; }
  .pagination .page-btn.last img { width: 12px; height: 12px; }
}

/* 회원가입 - 약관 동의 */
.order-btn.disable { background: #d8d8d8; }
.join-agree-wrap { display: flex; flex-flow: column; gap: 24px; }
.join-agree-item { border: 2px solid #d8d8d8; border-radius: 16px; }
.join-agree-item .checked-item { padding: 16px; border-bottom: 2px solid #d8d8d8; }
.join-agree-item .checked-item .txt { font-size: 18px; font-weight: 600; }
.join-agree-sub-wrap { padding: 16px; display: flex; flex-flow: column; gap: 16px; }
.join-agree-sub-item { padding: 0; display: flex; justify-content: space-between; align-items: center; }
.join-agree-sub-item label { width: calc( 100% - 32px ); }
.join-agree-sub-item .checked-item { padding: 0; border-bottom: 0; }
.join-agree-sub-item .checked-item .txt, .join-agree-sub-item .txt { font-size: 16px; font-weight: 500; color: #8c8c8c; }
.join-agree-sub-item input:checked + .checked-item .txt { color: #222; }
.join-agree-sub-item .more-btn { width: 24px; }

@media screen and (max-width: 640px) {
  .join-agree-wrap { gap: 16px; }
  .join-agree-item { border-width: 1px; border-radius: 8px; }
  .join-agree-item .checked-item { border-width: 1px; }
  .join-agree-item .checked-item .txt { font-size: 16px; }
  .join-agree-sub-wrap { gap: 16px; }
  .join-agree-sub-item label { width: calc( 100% - 24px ); }
  .join-agree-sub-item .checked-item .txt, .join-agree-sub-item .txt { font-size: 14px; }
  .join-agree-sub-item .more-btn { width: 16px; }
}