.mypage {padding-bottom: 120px; }
.mypage .mypage-title {padding-top: calc(70/70*1em); font-size: 70px; font-family: 'disol_headline'; letter-spacing: -0.025em; color: #fff; margin-bottom: calc(140/70*1em);}
.mypage .mypage-wrap {display: flex; align-items: flex-start; gap: calc(160/1920*100vw);}
.mypage .mypage-nav {position: relative; flex-shrink: 0; width: 360px; border: 2px solid #fff; border-width: 2px 0;}
.mypage .mypage-nav .mypage-nav-title {position: absolute; bottom: 100%; display: block; font-size: 30px; font-family: 'Pretendard'; font-weight: 600; letter-spacing: -0.02em; color: #fff; padding: calc(20/24*1em) 0;}
.mypage .mypage-nav .mypage-nav-title b {color: #f6ad3c;}
.mypage .mypage-nav ul {display: flex; flex-direction: column; gap: 1em; font-size: 20px; padding: 30px 0;}
.mypage .mypage-nav ul + ul {border-top: 1px solid #fff;}
.mypage .mypage-nav ul li a {position: relative;}
.mypage .mypage-nav ul li a span { font-size: inherit; font-family: 'Pretendard'; font-weight: 400; letter-spacing: -0.02em; color: #fff; opacity: .3; transition: .4s;}
.mypage .mypage-nav ul li a:hover span {opacity: 1;}
.mypage .mypage-nav ul li.act a span {opacity: 1; font-weight: 600;}
.mypage .mypage-nav ul li.dot a:after {content: ''; display: block; width: calc(5/20*1em); height: calc(5/20*1em); background-color: #f6ad3c; border-radius: 50%; position: absolute; left: 100%; top: 0; margin-left: calc(5/20*1em); transform: translateY(60%);}

@media screen and (max-width: 1600px) {
    .mypage .mypage-title {font-size: 60px;}
    .mypage .mypage-wrap {gap: calc(100/1600*100vw);}
    .mypage .mypage-nav {width: 280px;}
    .mypage .mypage-nav .mypage-nav-title {font-size: 25px;}
    .mypage .mypage-nav ul {font-size: 18px;}
}

@media screen and (max-width: 1440px) {
    .mypage .mypage-title {font-size: 55px; margin-bottom: calc(120/55*1em);}
    .mypage .mypage-wrap {gap: calc(80/1440*100vw);}
    .mypage .mypage-nav {width: 260px;}
    .mypage .mypage-nav .mypage-nav-title {font-size: 24px;}
    .mypage .mypage-nav ul {font-size: 17px; padding: 25px 0;}
}

@media screen and (max-width: 1280px) {
    .mypage .mypage-title {font-size: 50px; margin-bottom: calc(100/50*1em);}
    .mypage .mypage-wrap {gap: calc(60/1280*100vw);}
    .mypage .mypage-nav {width: 200px;}
    .mypage .mypage-nav .mypage-nav-title {font-size: 22px;}
    .mypage .mypage-nav ul {font-size: 16px; padding: 20px 0;}
}

@media screen and (max-width: 1024px) {
    .mypage {padding-bottom: 100px;}
    .mypage .mypage-title {font-size: 45px; margin-bottom: calc(80/45*1em);}
    .mypage .mypage-wrap {gap: calc(40/1024*100vw);}
    .mypage .mypage-nav {width: 220px;}
    .mypage .mypage-nav .mypage-nav-title {font-size: 20px;}
    .mypage .mypage-nav ul {font-size: 15px; padding: 18px 0;}
}

@media screen and (max-width: 820px) {
    .mypage {padding-bottom: 80px;}
    .mypage .mypage-title {font-size: 60px; margin-bottom: calc(60/60*1em); text-align: center;}
    .mypage .mypage-wrap {flex-direction: column; gap: 40px;}
    .mypage .mypage-nav {width: 100%; border-width: 1px 0;}
    .mypage .mypage-nav .mypage-nav-title {position: static; padding: 15px 0;}
    .mypage .mypage-nav ul {padding: 15px 0;}
}

@media screen and (max-width: 500px) {
    .mypage {padding-bottom: 60px;}
    .mypage .mypage-title {font-size: 40px; margin-bottom: calc(40/32*1em);}
    .mypage .mypage-nav .mypage-nav-title {font-size: 18px;}
    .mypage .mypage-nav ul {font-size: 14px; padding: 12px 0;}
}

@media screen and (max-width: 360px) {
    .mypage .mypage-title {font-size: 35px; margin-bottom: calc(30/28*1em);}
    .mypage .mypage-nav .mypage-nav-title {font-size: 16px;}
    .mypage .mypage-nav ul {font-size: 13px; padding: 10px 0;}
}

.mypage .mypage-content {flex-grow: 1; min-width: 0;}
.mypage .mypage-content .mypage-content-item {position: relative;}
.mypage .mypage-content-item-title {position: absolute; bottom: 100%; left: 0; font-size: 50px; font-family: 'Pretendard'; font-weight: 600; letter-spacing: -0.02em; color: #fff; margin-bottom: calc(30/50*1em);}

@media screen and (max-width: 1440px) {
    .mypage .mypage-content-item-title {font-size: 45px; margin-bottom: calc(28/45*1em);}
}

@media screen and (max-width: 1024px) {
    .mypage .mypage-content-item-title {font-size: 40px; margin-bottom: calc(20/30*1em);}
}

@media screen and (max-width: 820px) {
    .mypage .mypage-content {width: 100%;}
    .mypage .mypage-content-item-title {font-size: 30px; margin-bottom: calc(20/30*1em); position: static;}
}

@media screen and (max-width: 500px) {
    .mypage .mypage-content-item-title {font-size: 25px; margin-bottom: calc(18/25*1em);}
}

@media screen and (max-width: 360px) {
    .mypage .mypage-content-item-title {font-size: 22px; margin-bottom: calc(15/22*1em);}
}


/* 테이블 */
.mypage .mypage-content-item-table .table {width: 100%; display: flex; flex-direction: column;}
.mypage .mypage-content-item-table .table .tr {display: flex; align-items: center; font-size: 18px; height: calc(70/18*1em);}
.mypage .mypage-content-item-table .table .tbody .tr + .tr {border-top: 1px solid #ffffff2f;}
.mypage .mypage-content-item-table .table .tr .th,
.mypage .mypage-content-item-table .table .tr .td {vertical-align: middle; font-family: 'Pretendard'; letter-spacing: -0.02em; font-size: inherit; text-align: center;}
.mypage .mypage-content-item-table .table .tr .th span,
.mypage .mypage-content-item-table .table .tr .td span {padding: 0 calc(20/18*1em); display: block;}
.mypage .mypage-content-item-table .table .tr .th {font-weight: 600;}
.mypage .mypage-content-item-table .table .tr .td {font-weight: 300; color: #fff;}

.mypage .mypage-content-item-table .table .thead {position: relative;}
.mypage .mypage-content-item-table .table .thead .tr {position: relative; z-index: 1; background: #fff; border-radius: 10px;}

.mypage .mypage-content-item-table .table .tr .item-title-cell  {flex-grow: 1; min-width: 0;}
.mypage .mypage-content-item-table .table .tbody .tr .item-title-cell p {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: left;}

@media screen and (max-width: 1440px) {
    .mypage .mypage-content-item-table .table .tr {font-size: 17px; height: calc(65/17*1em);}
}

@media screen and (max-width: 1280px) {
    .mypage .mypage-content-item-table .table .thead {display: none;}
    .mypage .mypage-content-item-table .table .tr {font-size: 16px; height: auto; flex-direction: column; gap: 3px; align-items: flex-start; padding: calc(20/16*1em);}
    .mypage .mypage-content-item-table .table .tr:first-child {border-top: 2px solid #fff;}
    .mypage .mypage-content-item-table .table .tr > * { width: 100% !important; height: calc(30/16*1em); text-align: left !important; display: flex; align-items: center;}
    .mypage .mypage-content-item-table .table .tr > * span {width: 100%; display: block; box-sizing: border-box; padding-left: 0 !important; min-width: 0;}
    .mypage .mypage-content-item-table .table .tr > *::before {content: ''; display: block; flex-shrink: 0; margin-right: 20px;}
    .mypage .mypage-content-item-table .table .tbody .tr .item-title-cell {width: 100%;}
    .mypage .mypage-content-item-table .table .tbody .tr .item-title-cell p {width: 100%;}
}

@media screen and (max-width: 1024px) {
    .mypage .mypage-content-item-table .table .tr {font-size: 16px; padding: calc(18/16*1em);}
    .mypage .mypage-content-item-table .table .tr > * {height: calc(28/16*1em);}
    .mypage .mypage-content-item-table .table .tr > *::before {margin-right: 18px;}
}

@media screen and (max-width: 820px) {
    .mypage .mypage-content-item-table .table .tr {font-size: 15px; padding: calc(16/15*1em);}
    .mypage .mypage-content-item-table .table .tr > * {height: calc(26/15*1em);}
    .mypage .mypage-content-item-table .table .tr > *::before {margin-right: 16px;}
}

@media screen and (max-width: 500px) {
    .mypage .mypage-content-item-table .table .tr {font-size: 14px; padding: calc(14/14*1em);}
    .mypage .mypage-content-item-table .table .tr > * {height: calc(24/14*1em);}
    .mypage .mypage-content-item-table .table .tr > *::before {margin-right: 14px;}
}

@media screen and (max-width: 360px) {
    .mypage .mypage-content-item-table .table .tr {font-size: 13px; padding: calc(12/13*1em);}
    .mypage .mypage-content-item-table .table .tr > * {height: calc(22/13*1em);}
    .mypage .mypage-content-item-table .table .tr > *::before {margin-right: 12px;}
}


/* 버튼 */

.mypage .btn-sm {cursor: pointer; padding: 0; border: 1px solid transparent; outline: none; font-size: 14px; letter-spacing: -0.02em; border-radius: calc(5/14*1em); background: #777; color: #fff; width: calc(70/14*1em); height: calc(25/14*1em); display: inline-flex; align-items: center; justify-content: center; transition: .4s;}
.mypage .btn-sm span {padding: 0 !important;}

.mypage .btn-lg-sm {transition: .4s; background: transparent; font-size: inherit; font-family: 'Pretendard'; font-weight: 600; letter-spacing: -0.02em; color: #fff; border: 1px solid #ffffff; padding: calc(14/20*1em) calc(30/20*1em); border-radius: calc(7/20*1em); cursor: pointer; outline: none; }

@media screen and (min-width: 821px) {
    /* .mypage .btn-lg-sm:hover {background: #f6ad3c; color: #000; border-color: #f6ad3c;} */
    .mypage .btn-sm:hover {border-color: #fff;}
}

@media screen and (max-width: 360px) {
    .mypage .btn-sm {font-size: inherit;}
}


/* 예매내역 */
.mypage.reservation .mypage-content-item-table .table .tr .item-num-cell  {width: calc(80/1600*100vw); flex-shrink: 0;}
.mypage.reservation .mypage-content-item-table .table .tr .item-date-cell  {width: calc(130/1600*100vw); flex-shrink: 0;}
.mypage.reservation .mypage-content-item-table .table .tbody .tr .item-title-cell {transition: .4s;}
.mypage.reservation .mypage-content-item-table .table .tr .item-people-cell  {width: calc(120/1600*100vw); flex-shrink: 0;}
.mypage.reservation .mypage-content-item-table .table .tr .item-rsv-date-cell  {width: calc(130/1600*100vw); flex-shrink: 0;}
.mypage.reservation .mypage-content-item-table .table .tr .item-price-cell  {width: calc(160/1600*100vw); flex-shrink: 0;}
.mypage.reservation .mypage-content-item-table .table .tr .item-review-cell  {width: calc(110/1600*100vw); flex-shrink: 0;}
.mypage.reservation .mypage-content-item-table .table .tr .item-cancel-cell  {width: calc(110/1600*100vw); flex-shrink: 0;}

.mypage.reservation .mypage-content-item-table .table .tr .td .btn-review {background: #777;}
.mypage.reservation .mypage-content-item-table .table .tr .td .btn-cancel {background: #444;}
.mypage.reservation .mypage-content-item-table .table .tr .td .btn-sm.btn-disabled {cursor: default; pointer-events: none; background: transparent; color: #777777;}

@media screen and (max-width: 1440px) {
    .mypage.reservation .mypage-content-item-table .table .tr .item-num-cell  {width: calc(70/1440*100vw);}
    .mypage.reservation .mypage-content-item-table .table .tr .item-date-cell  {width: calc(120/1440*100vw);}
    .mypage.reservation .mypage-content-item-table .table .tr .item-people-cell  {width: calc(110/1440*100vw);}
    .mypage.reservation .mypage-content-item-table .table .tr .item-rsv-date-cell  {width: calc(120/1440*100vw);}
    .mypage.reservation .mypage-content-item-table .table .tr .item-price-cell  {width: calc(150/1440*100vw);}
    .mypage.reservation .mypage-content-item-table .table .tr .item-review-cell  {width: calc(100/1440*100vw);}
    .mypage.reservation .mypage-content-item-table .table .tr .item-cancel-cell  {width: calc(100/1440*100vw);}
}

@media screen and (max-width: 1280px) {
    .mypage .mypage-content-item-table .table .tr > *::before {width: calc(60/16*1em);}
    .mypage.reservation .mypage-content-item-table .table .tr .item-num-cell::before {content: '번호';}
    .mypage.reservation .mypage-content-item-table .table .tr .item-date-cell::before {content: '관람일시';}
    .mypage.reservation .mypage-content-item-table .table .tr .item-title-cell::before {content: '제목';}
    .mypage.reservation .mypage-content-item-table .table .tr .item-people-cell::before {content: '관람 인원';}
    .mypage.reservation .mypage-content-item-table .table .tr .item-rsv-date-cell::before {content: '예매일';}
    .mypage.reservation .mypage-content-item-table .table .tr .item-price-cell::before {content: '결제금액';}
    .mypage.reservation .mypage-content-item-table .table .tr .item-review-cell::before {content: '리뷰';}
    .mypage.reservation .mypage-content-item-table .table .tr .item-cancel-cell::before {content: '예매취소';}

    .mypage.reservation .mypage-content-item-table .table .tr .td .btn-sm.btn-disabled {width: auto; height: auto;}
}



.mypage.reservation .mypage-content-item-table .table .tbody .tr {cursor: pointer; transition: .4s;}

@media screen and (min-width: 821px) {
    .mypage.reservation .mypage-content-item-table .table .tbody .tr:hover {background: #ffffff1f;}
    .mypage.reservation .mypage-content-item-table .table .tbody .tr:hover .item-title-cell {color: #f6ad3c;}
}


/* 예매상세 */
.mypage.reserve-detail .reserve-detail-wrap {border-top: 2px solid #fff;}
.mypage.reserve-detail .reserve-detail-info {color: #fff;}
.mypage.reserve-detail .reserve-detail-info .reserve-detail-item-title {font-size: 30px; font-family: 'Pretendard'; font-weight: 600; letter-spacing: -0.02em; color: #f6ad3c; padding: calc(25/30*1em) 0;}
.mypage.reserve-detail .reserve-detail-info > div:not(:nth-child(1)) {display: flex; justify-content: flex-end; border-top: 1px solid #ffffff2f; padding: calc(30/24*1em) 0; font-size: 24px; line-height: calc(24/24*1em);}
.mypage.reserve-detail .reserve-detail-info > div .datWrap {width: 50%;}
.mypage.reserve-detail .reserve-detail-info > div .datWrap.full { width: 100%; display: flex;}
.mypage.reserve-detail .reserve-detail-info > div .datWrap.full > div {width: 50%;}
.mypage.reserve-detail .reserve-detail-info > div dl {display: flex; align-items: flex-start; gap: calc(25/24*1em);}
.mypage.reserve-detail .reserve-detail-info > div dl + dl {margin-top: calc(10/24*1em);}
.mypage.reserve-detail .reserve-detail-info > div dl dt {font-size: 18px; line-height: calc(24/18*1em); flex-shrink: 0; opacity: .7;}
.mypage.reserve-detail .reserve-detail-info > div dl dt.wFix {width: calc(70/18*1em);}
.mypage.reserve-detail .reserve-detail-info > div dl dd {flex-grow: 1; min-width: 0;}
.mypage.reserve-detail .reserve-detail-info > div dl dd p + p {margin-top: calc(10/24*1em);}
.mypage.reserve-detail .reserve-detail-info > div dl dd p:has(span) {display: flex; align-items: center; justify-content: space-between; gap: calc(10/24*1em);}

.mypage.reserve-detail .reserve-detail-info .reserve-detail-item-price .datWrap dl + dl {margin-top: calc(24/24*1em);}
.mypage.reserve-detail .reserve-detail-info .reserve-detail-item-total {padding-bottom: 0 !important;}
.mypage.reserve-detail .reserve-detail-info .reserve-detail-item-total .datWrap dl dd p {text-align: right; color: #f6ad3c;}

.mypage.reserve-detail .reserve-detail-timeline {display: flex; flex-direction: column; padding-top: 120px;}
.mypage.reserve-detail .reserve-detail-timeline .timeline-item {display: flex; flex-direction: column;}
.mypage.reserve-detail .reserve-detail-timeline .timeline-item + .timeline-item {margin-top: calc(70/20*1em);}
.mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-title {font-size: 20px; font-family: 'Pretendard'; font-weight: 600; letter-spacing: -0.02em; color: #fff; width: calc(200/20*1em); height: calc(45/20*1em); background-color: #444444; border-radius: calc(7/20*1em); display: flex; align-items: center; justify-content: center; margin-bottom: calc(30/20*1em);}
.mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content {display: flex; flex-direction: column;}
.mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item {display: flex; align-items: center; font-size: 20px;}
.mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item + .timeline-item-content-item {margin-top: calc(15/20*1em);}
.mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item .num {flex-shrink: 0; font-size: calc(14/20*1em); font-family: 'Pretendard'; letter-spacing: -0.02em; color: #000; background: #fff; border-radius: 50%; width: calc(22/14*1em); height: calc(22/14*1em); display: flex; align-items: center; justify-content: center; margin-right: calc(10/14*1em);}
.mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item p {font-size: inherit; font-family: 'Pretendard'; letter-spacing: -0.02em; line-height: 1.5; color: #fff; margin-right: calc(25/20*1em);}
.mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item .barcode-btn {outline: none; border: none; transition: .4s; cursor: pointer; font-size: 16px; font-family: 'Pretendard'; letter-spacing: -0.02em; font-weight: 600; color: #000; background: #fff; border-radius: calc(5/16*1em); padding: calc(7/16*1em) calc(15/16*1em); }
@media screen and (min-width: 821px) {
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item .barcode-btn:hover {background: #f6ad3c; color: #000;}
}

@media screen and (max-width: 1440px) {
    .mypage.reserve-detail .reserve-detail-info .reserve-detail-item-title {font-size: 28px;}
    .mypage.reserve-detail .reserve-detail-info > div:not(:nth-child(1)) {font-size: 22px;}
    .mypage.reserve-detail .reserve-detail-info > div dl dt {font-size: 17px;}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item {font-size: 18px;}
}

@media screen and (max-width: 1280px) {
    .mypage.reserve-detail .reserve-detail-info .reserve-detail-item-title {font-size: 26px;}
    .mypage.reserve-detail .reserve-detail-info > div:not(:nth-child(1)) {font-size: 20px;}
    .mypage.reserve-detail .reserve-detail-info > div dl dt {font-size: 16px;}
    .mypage.reserve-detail .reserve-detail-timeline {padding-top: 100px;}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-title {font-size: 18px;}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item {font-size: 16px;}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item .barcode-btn {font-size: 14px;}
}

@media screen and (max-width: 1024px) {
    .mypage.reserve-detail .reserve-detail-info .reserve-detail-item-title {font-size: 24px;}
    .mypage.reserve-detail .reserve-detail-info > div:not(:nth-child(1)) {font-size: 18px; padding: calc(25/18*1em) 0;}
    .mypage.reserve-detail .reserve-detail-info > div dl {gap: calc(15/18*1em);}
    .mypage.reserve-detail .reserve-detail-info > div dl dt {font-size: 15px;}
    .mypage.reserve-detail .reserve-detail-timeline {padding-top: 80px;}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item + .timeline-item {margin-top: calc(50/18*1em);}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-title {font-size: 16px; width: calc(180/16*1em);}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item {font-size: 15px;}
}

@media screen and (max-width: 820px) {
    .mypage.reserve-detail .reserve-detail-info .reserve-detail-item-title {font-size: 22px; padding: calc(20/22*1em) 0;}
    .mypage.reserve-detail .reserve-detail-info > div:not(:nth-child(1)) {flex-direction: column; font-size: 16px; padding: calc(20/16*1em) 0;}
    .mypage.reserve-detail .reserve-detail-info > div .datWrap {width: 100%;}
    .mypage.reserve-detail .reserve-detail-info > div .datWrap.full {flex-direction: column;}
    .mypage.reserve-detail .reserve-detail-info > div .datWrap.full > div {width: 100%;}
    .mypage.reserve-detail .reserve-detail-info > div .datWrap.full > div dl + dl {margin-top: calc(10/16*1em);}
    .mypage.reserve-detail .reserve-detail-info > div .datWrap.full > div + div {margin-top: calc(10/16*1em);}
    .mypage.reserve-detail .reserve-detail-info > div dl + dl {margin-top: 0; }
    .mypage.reserve-detail .reserve-detail-info > div .datWrap + .datWrap {margin-top: calc(15/16*1em);}
    .mypage.reserve-detail .reserve-detail-info > div dl {gap: calc(10/16*1em); justify-content: space-between;}
    .mypage.reserve-detail .reserve-detail-info > div dl dt {font-size: 16px;}
    .mypage.reserve-detail .reserve-detail-info > div dl dt.wFix {width: calc(80/16*1em);}
    .mypage.reserve-detail .reserve-detail-info > div dl dd {flex-grow: 0; text-align: right;}
    .mypage.reserve-detail .reserve-detail-timeline {padding-top: 60px;}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item + .timeline-item {margin-top: calc(40/16*1em);}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-title {font-size: 16px; width: calc(160/16*1em); height: calc(40/16*1em); margin-bottom: calc(20/16*1em);}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item {font-size: 16px;}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item .barcode-btn {font-size: clamp(14px, 15/500*100vw, 16px);}
}

@media screen and (max-width: 500px) {
    .mypage.reserve-detail .reserve-detail-info .reserve-detail-item-title {font-size: 20px;}
    .mypage.reserve-detail .reserve-detail-info > div:not(:nth-child(1)) {font-size: 15px;}
    .mypage.reserve-detail .reserve-detail-info > div dl dt {font-size: 13px;}
    .mypage.reserve-detail .reserve-detail-timeline {padding-top: 50px;}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-title {font-size: clamp(14px, 15/500*100vw, 16px); width: calc(140/14*1em); height: calc(35/14*1em);}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item {font-size: clamp(14px, 15/500*100vw, 16px);}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item .barcode-btn {font-size: clamp(12px, 13/500*100vw, 13px);}
}

@media screen and (max-width: 360px) {
    .mypage.reserve-detail .reserve-detail-info .reserve-detail-item-title {font-size: 18px;}
    .mypage.reserve-detail .reserve-detail-info > div:not(:nth-child(1)) {font-size: 14px;}
    .mypage.reserve-detail .reserve-detail-info > div dl dt {font-size: 12px;}
    .mypage.reserve-detail .reserve-detail-info > div dl dt.wFix {width: calc(50/12*1em);}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-title {font-size: clamp(13px, 14/460*100vw, 14px); width: calc(120/13*1em); height: calc(32/13*1em);}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item {font-size: clamp(13px, 14/460*100vw, 14px);}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item p {margin-right: calc(10/14*1em);}
    .mypage.reserve-detail .reserve-detail-timeline .timeline-item .timeline-item-content-item .barcode-btn {flex-shrink: 0; font-size: clamp(13px, 14/460*100vw, 14px); padding: calc(7/16*1em) calc(10/16*1em);}
}

._modal {display: none; background: rgba(0, 0, 0, .8); position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 999;}
._modal .inner .close-btn {transition: .4s; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 20px; font-family: 'disol_roman'; letter-spacing: -0.02em; color: #fff; display: flex; align-items: center; border: none; outline: none; background: transparent; cursor: pointer; gap: calc(15/20*1em); margin-top: calc(20/20*1em);}
.barcode-modal .inner {width: 100%; max-width: 640px; box-sizing: border-box; background: #fff; border-radius: calc(20/36*1em); font-size: 36px; padding: calc(70/36*1em); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;}
.barcode-modal .inner .txt {display: flex; flex-direction: column; align-items: center;}
.barcode-modal .inner .txt span {font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: #777777;}
.barcode-modal .inner .txt b {font-size: inherit; font-weight: bold; letter-spacing: -0.02em; color: #000; padding-top: calc(10/36*1em); padding-bottom: calc(20/36*1em);}
.barcode-modal .inner .txt small {font-size: 18px; font-weight: bold; letter-spacing: -0.02em; color: #000; padding-bottom: calc(24/18*1em);}
.barcode-modal .inner .barcodeImg {width: calc(300/36*1em);}

@media screen and (max-width: 1440px) {
    .barcode-modal .inner {font-size: 32px; padding: calc(60/32*1em);}
    .barcode-modal .inner .txt span {font-size: 17px;}
    .barcode-modal .inner .txt small {font-size: 17px;}
}

@media screen and (max-width: 1280px) {
    .barcode-modal .inner {font-size: 30px; padding: calc(50/30*1em);}
    .barcode-modal .inner .txt span {font-size: 16px;}
    .barcode-modal .inner .txt small {font-size: 16px;}
}

@media screen and (max-width: 1024px) {
    ._modal .inner .close-btn {font-size: 18px;}
    .barcode-modal .inner {font-size: 28px; padding: calc(45/28*1em);}
    .barcode-modal .inner .txt span {font-size: 15px;}
    .barcode-modal .inner .txt small {font-size: 15px;}
}

@media screen and (max-width: 820px) {
    ._modal .inner .close-btn {font-size: 16px;}
    .barcode-modal .inner {font-size: 24px; padding: calc(40/24*1em); width: 90%;}
    .barcode-modal .inner .txt span {font-size: 14px;}
    .barcode-modal .inner .txt small {font-size: 14px;}
    .barcode-modal .inner .barcodeImg {width: calc(250/24*1em);}
}

@media screen and (max-width: 500px) {
    ._modal .inner .close-btn {font-size: 15px;}
    .barcode-modal .inner {font-size: 20px; padding: calc(30/20*1em); }
    .barcode-modal .inner .txt span {font-size: 13px;}
    .barcode-modal .inner .txt small {font-size: 13px;}
    .barcode-modal .inner .barcodeImg {width: calc(200/20*1em);}
}

@media screen and (max-width: 360px) {
    ._modal .inner .close-btn {font-size: 14px;}
    .barcode-modal .inner {font-size: 18px; padding: calc(25/18*1em);}
    .barcode-modal .inner .txt span {font-size: 12px;}
    .barcode-modal .inner .txt small {font-size: 12px;}
    .barcode-modal .inner .barcodeImg {width: calc(180/18*1em);}
}

.delivery-list-modal .inner {width: 100%; max-width: 640px; box-sizing: border-box; background: #fff; border-radius: calc(20/36*1em); font-size: 30px; padding: calc(40/30*1em); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;}
.delivery-list-modal .inner .title {width: 100%; text-align: left; font-size: inherit; font-weight: bold; letter-spacing: -0.02em; color: #000; padding-bottom: calc(20/30*1em);}
.delivery-list-modal .inner .listWrap {margin-bottom: 40px; width: 100%; display: flex; flex-direction: column; align-items: flex-start;}
.delivery-list-modal .inner .listWrap .dl {cursor: pointer; border-top: 1px solid #aaa; width: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: 15px 0;}
.delivery-list-modal .inner .listWrap .dl .dt {display: flex; align-items: center; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: calc(6/18*1em)}
.delivery-list-modal .inner .listWrap .dl .dt i {font-size: calc(20/18*1em); margin-right: calc(7/20*1em);}
.delivery-list-modal .inner .listWrap .dl .dt i.xi-check-circle {display: none;}
.delivery-list-modal .inner .listWrap .dl > input:checked + .dt i.xi-check-circle {display: block;}
.delivery-list-modal .inner .listWrap .dl > input:checked + .dt i.xi-check-circle-o {display: none;}
.delivery-list-modal .inner .listWrap .dl .dd {padding-left: calc(25/18*1em); font-size: 18px; letter-spacing: -0.02em; opacity: .7; line-height: 1.6;}
.delivery-list-modal .inner .list-btn {transition: .4s; cursor: pointer; width: 100%; font-size: 18px; padding: calc(15/18*1em) 0; font-weight: 600; letter-spacing: -0.02em; color: #fff; border-radius: calc(10/18*1em); border: 1px solid #000; background: #000; outline: none;}

@media screen and (min-width: 821px) {
    ._modal .inner .close-btn:hover {color: #f6ac3c;}
    .delivery-list-modal .inner .list-btn:hover {color: #000; background: #f6ac3c; border-color: #f6ac3c;}
}

@media screen and (max-width: 1440px) {
    .delivery-list-modal .inner {font-size: 28px; padding: calc(35/28*1em);}
    .delivery-list-modal .inner .listWrap .dl .dt {font-size: 17px;}
    .delivery-list-modal .inner .listWrap .dl .dd {font-size: 17px;}
    .delivery-list-modal .inner .list-btn {font-size: 17px;}
}

@media screen and (max-width: 1280px) {
    .delivery-list-modal .inner {font-size: 26px; padding: calc(30/26*1em);}
    .delivery-list-modal .inner .listWrap .dl .dt {font-size: 16px;}
    .delivery-list-modal .inner .listWrap .dl .dd {font-size: 16px;}
    .delivery-list-modal .inner .list-btn {font-size: 16px;}
}

@media screen and (max-width: 1024px) {
    .delivery-list-modal .inner {font-size: 24px; padding: calc(28/24*1em);}
    .delivery-list-modal .inner .listWrap .dl .dt {font-size: 15px;}
    .delivery-list-modal .inner .listWrap .dl .dd {font-size: 15px;}
    .delivery-list-modal .inner .list-btn {font-size: 15px;}
}

@media screen and (max-width: 820px) {
    .delivery-list-modal .inner {font-size: 22px; padding: calc(25/22*1em); width: 90%;}
    .delivery-list-modal .inner .listWrap {margin-bottom: 30px;}
    .delivery-list-modal .inner .listWrap .dl {padding: 12px 0;}
    .delivery-list-modal .inner .listWrap .dl .dt {font-size: 14px;}
    .delivery-list-modal .inner .listWrap .dl .dd {font-size: 14px;}
    .delivery-list-modal .inner .list-btn {font-size: 14px;}
}

@media screen and (max-width: 500px) {
    .delivery-list-modal .inner {font-size: 20px; padding: calc(20/20*1em);}
    .delivery-list-modal .inner .listWrap {margin-bottom: 25px;}
    .delivery-list-modal .inner .listWrap .dl {padding: 10px 0;}
    .delivery-list-modal .inner .listWrap .dl .dt {font-size: 13px;}
    .delivery-list-modal .inner .listWrap .dl .dd {font-size: 13px;}
    .delivery-list-modal .inner .list-btn {font-size: 13px;}
}

@media screen and (max-width: 360px) {
    .delivery-list-modal .inner {font-size: 18px; padding: calc(18/18*1em);}
    .delivery-list-modal .inner .listWrap {margin-bottom: 20px;}
    .delivery-list-modal .inner .listWrap .dl {padding: 8px 0;}
    .delivery-list-modal .inner .listWrap .dl .dt {font-size: 12px;}
    .delivery-list-modal .inner .listWrap .dl .dd {font-size: 12px;}
    .delivery-list-modal .inner .list-btn {font-size: 12px;}
}



/* 리뷰 */
.mypage.review .review-wrap {border-top: 2px solid #fff; color: #fff;}
.mypage.review .review-wrap .review-item {display: flex; flex-direction: column;}
.mypage.review .review-wrap .review-item dl {display: flex; align-items: center; font-size: var(--formFontSize); margin-top: calc(34/20*1em);}
.mypage.review .review-wrap .review-item dl.fx-fend {align-items: flex-end;}
.mypage.review .review-wrap .review-item dl.fx-fstart {align-items: flex-start;}
.mypage.review .review-wrap .review-item dl dt {font-weight: 600; flex-shrink: 0; width: var(--formWidth);}
.mypage.review .review-wrap .review-item dl dt.pt {padding-top: calc(15/20*1em);}
.mypage.review .review-wrap .review-item dl dd {flex-grow: 1; min-width: 0; font-size: 18px; font-weight: 400;}
.mypage.review .review-wrap .review-item dl dd b {font-size: 30px; font-weight: 600;}
.mypage.review .review-wrap .review-item dl dd .input {border: 1px solid #ffffff38; border-radius: calc(10/18*1em); padding: calc(10/18*1em); font-size: inherit; font-family: 'Pretendard'; letter-spacing: -0.02em; color: #fff; background: transparent;}
.mypage.review .review-wrap .review-item dl dd .input input {padding: 0; width: 100%; border: none; outline: none; background: transparent; font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit;}
.mypage.review .review-wrap .review-item dl dd .input textarea {resize: none; padding: 0; width: 100%; height: 250px; border: none; outline: none; background: transparent; font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit;}
.mypage.review .review-wrap .review-item dl dd .input textarea::-webkit-scrollbar {display: none;}

.mypage.review .review-wrap .review-item dl dd .file-wrap {display: flex; align-items: center; }
.mypage.review .review-wrap .review-item dl dd .file-wrap .custom-file-input {display: flex; align-items: stretch;}
.mypage.review .review-wrap .review-item dl dd .file-wrap .custom-file-input .input {width: 360px; position: relative;}
.mypage.review .review-wrap .review-item dl dd .file-wrap .custom-file-input .input:after {content: ' '; display: inline-block; width: 0px; opacity: 0; line-height: normal;}
.mypage.review .review-wrap .review-item dl dd .file-wrap .custom-file-input .input span { box-sizing: border-box; color: #fff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; padding: calc(10/18*1em);}
.mypage.review .review-wrap .review-item dl dd .file-wrap .custom-file-input .input span p {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.mypage.review .review-wrap .review-item dl dd .file-wrap .custom-file-input button {flex-shrink: 0; transition: .4s; margin-left: calc(10/18*1em); display: block; height: auto; background-color: #222222; padding: 0px 20px; cursor: pointer; border: none; outline: none; font-size: inherit; font-family: 'Pretendard'; letter-spacing: -0.02em; color: #ffffff7a; border-radius: calc(10/18*1em);}
.mypage.review .review-wrap .review-item dl dd .file-wrap p {font-size: 14px; color: #fff; opacity: .3; padding-left: calc(20/14*1em);}

.mypage.review .review-wrap .review-item-btn {display: flex; justify-content: flex-end; margin-top: calc(30/20*1em); font-size: 20px;}

@media screen and (min-width: 821px) {
    .mypage.review .review-wrap .review-item dl dd .file-wrap .custom-file-input button:hover {color: #fff;}
}

@media screen and (max-width: 1440px) {
    .mypage.review .review-wrap .review-item dl dd b {font-size: 28px;}
    .mypage.review .review-wrap .review-item dl dd .file-wrap .custom-file-input .input {width: 320px;}
    .mypage.review .review-wrap .review-item-btn {font-size: 18px;}
}

@media screen and (max-width: 1280px) {
    .mypage.review .review-wrap .review-item dl dd {font-size: 16px;}
    .mypage.review .review-wrap .review-item dl dd b {font-size: 26px;}
    .mypage.review .review-wrap .review-item dl dd .file-wrap .custom-file-input .input {width: 230px;}
}

@media screen and (max-width: 1024px) {
    .mypage.review .review-wrap .review-item dl dd {font-size: 15px;}
    .mypage.review .review-wrap .review-item dl dd b {font-size: 24px;}
    /* .mypage.review .review-wrap .review-item dl:has(dd .file-wrap) {align-items: flex-start;}
    .mypage.review .review-wrap .review-item dl:has(dd .file-wrap) dt {padding-top: calc(10/20*1em);} */
    .mypage.review .review-wrap .review-item dl dd .file-wrap {flex-direction: column; align-items: flex-start; justify-content: flex-start; position: relative;}
    .mypage.review .review-wrap .review-item dl dd .file-wrap p {position: absolute; top: 100%; left: 0; padding: 0; padding-top: calc(5/14*1em);}
    .mypage.review .review-wrap .review-item dl dd .file-wrap .custom-file-input .input {width: 200px;}
    .mypage.review .review-wrap .review-item dl dd .input textarea {height: 200px;}
    .mypage.review .review-wrap .review-item-btn {font-size: 16px;}
}

@media screen and (max-width: 820px) {
    .mypage.review .review-wrap .review-item dl {flex-direction: column; align-items: flex-start; margin-top: calc(25/20*1em);}
    .mypage.review .review-wrap .review-item dl dt {width: 100%; margin-bottom: calc(10/20*1em);}
    .mypage.review .review-wrap .review-item dl dd {width: 100%;}
    .mypage.review .review-wrap .review-item dl dd b {font-size: 22px;}
    .mypage.review .review-wrap .review-item dl dd .file-wrap {flex-direction: column; align-items: flex-start;}
    .mypage.review .review-wrap .review-item dl dd .file-wrap .custom-file-input {width: 100%;}
    .mypage.review .review-wrap .review-item dl dd .file-wrap .custom-file-input .input {width: 100%;}
    .mypage.review .review-wrap .review-item dl dd .file-wrap p {padding: 0; margin-top: calc(5/14*1em);}
    .mypage.review .review-wrap .review-item-btn {justify-content: center;}
}

@media screen and (max-width: 500px) {
    .mypage.review .review-wrap .review-item dl dd {font-size: 14px;}
    .mypage.review .review-wrap .review-item dl dd b {font-size: 20px;}
    .mypage.review .review-wrap .review-item dl dd .input textarea {height: 180px;}
    .mypage.review .review-wrap .review-item-btn {font-size: 15px;}
}

@media screen and (max-width: 360px) {
    .mypage.review .review-wrap .review-item dl dd {font-size: 13px;}
    .mypage.review .review-wrap .review-item dl dd b {font-size: 18px;}
    .mypage.review .review-wrap .review-item dl dd .file-wrap p {font-size: 12px;}
    .mypage.review .review-wrap .review-item-btn {font-size: 14px;}
}


/* 장바구니 */
.mypage.cart .mypage-content-item-table .checkWrap {display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: calc(20/18*1em);}
.mypage.cart .mypage-content-item-table .checkWrap input[type="checkbox"] {display: none;}
.mypage.cart .mypage-content-item-table .checkWrap label {display: flex; align-items: center; cursor: pointer;}
.mypage.cart .mypage-content-item-table .checkWrap label .checkBox {font-size:inherit; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 4px;}
.mypage.cart .mypage-content-item-table .checkWrap label .checkBox i {font-size:inherit; color: #fff; transition: .4s;}
.mypage.cart .mypage-content-item-table .checkWrap label .checkBox i.xi-check-square {display: none;}
.mypage.cart .mypage-content-item-table .checkWrap input[type="checkbox"]:checked + label .checkBox i.xi-checkbox-blank {display: none;}
.mypage.cart .mypage-content-item-table .checkWrap input[type="checkbox"]:checked + label .checkBox i.xi-check-square {display: block;}

.mypage.cart .mypage-content-item-table .table .tbody .tr {height: calc(115/18*1em);}
.mypage.cart .mypage-content-item-table {border-top: 2px solid #ffffff; padding-top: 37px;}
.mypage.cart .mypage-content-item-table .topFlex {display: flex; align-items: center; justify-content: space-between; font-size: 18px; margin-bottom: calc(20/16*1em); padding: 0 calc(42/16*1em);}
.mypage.cart .mypage-content-item-table .topFlex .select-all {cursor: pointer; display: flex; align-items: center;}
.mypage.cart .mypage-content-item-table .topFlex .select-all .selectAll {cursor: pointer; color: #fff; font-size: calc(16/18*1em); padding-left: calc(10/16*1em); opacity: .7;}
.mypage.cart .mypage-content-item-table .topFlex .unselect-all { cursor: pointer; color: #fff; opacity: .7;}

.mypage.cart .mypage-content-item-table .table .tr {position: relative;}
.mypage.cart .mypage-content-item-table .table .tr::after {content: 'Sold Out'; display: none; z-index: 1; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #161616f1; z-index: 1; color: #fff; font-size: 20px; font-family: 'disol_roman'; font-weight: 700; letter-spacing: -0.025em;}
.mypage.cart .mypage-content-item-table .table .tr.sold-out::after {display: flex;}
.mypage.cart .mypage-content-item-table .table .tr .item-select-cell {width: calc(100/1600*100vw); flex-shrink: 0;}
.mypage.cart .mypage-content-item-table .table .tr .item-num-cell {width: calc(80/1600*100vw); flex-shrink: 0;}
.mypage.cart .mypage-content-item-table .table .tr .item-img-cell {width: calc(130/1600*100vw); flex-shrink: 0;}
.mypage.cart .mypage-content-item-table .table .tbody .tr .item-img-cell  {height: 100%;}
.mypage.cart .mypage-content-item-table .table .tbody .tr .item-img-cell span {height: 100%; padding: calc(20/18*1em) 0; box-sizing: border-box;}
.mypage.cart .mypage-content-item-table .table .tr .item-img-cell span img {object-fit: contain; width: 100%; height: 100%;}
.mypage.cart .mypage-content-item-table .table .tr .item-title-cell {flex-grow: 1; min-width: 0;}
.mypage.cart .mypage-content-item-table .table .tr .item-qty-cell {width: calc(120/1600*100vw); flex-shrink: 0;}
.mypage.cart .mypage-content-item-table .table .tr .item-qty-cell .qtyWrap {display: flex; align-items: center; gap: calc(10/18*1em);}
.mypage.cart .mypage-content-item-table .table .tr .item-qty-cell .qtyWrap .qtyBtn {transition: .4s; background: transparent; cursor: pointer; border: none; outline: none; font-size: 18px; font-family: 'Pretendard'; letter-spacing: -0.02em; border-radius: 4px; color: #fff; width: calc(25/18*1em); height: calc(25/18*1em); display: inline-flex; align-items: center; justify-content: center; transition: .4s;}
.mypage.cart .mypage-content-item-table .table .tr .item-qty-cell .qtyWrap .qtyInput {width: calc(40/18*1em); text-align: center; font-size: inherit; font-family: 'Pretendard'; letter-spacing: -0.02em; color: #fff; background: transparent; border: none; outline: none; padding: 0; font-weight: inherit;}
.mypage.cart .mypage-content-item-table .table .tr .item-price-cell {width: calc(160/1600*100vw); flex-shrink: 0;}

.mypage.cart .total-price {max-width: 500px; margin-left: auto; display: flex; flex-direction: column;}
.mypage.cart .total-price .total-price-item {font-size: 24px; padding-top: calc(30/24*1em); padding-bottom: calc(15/24*1em); display: flex; align-items: center; justify-content: space-between;}
.mypage.cart .total-price .total-price-item span {font-size: inherit; font-family: 'Pretendard'; font-weight: 600; letter-spacing: -0.02em; color: #fff;}
.mypage.cart .total-price .total-price-item span:last-child {color: #f6ad3c;}

.mypage.cart .total-price .price-detail {display: flex; flex-direction: column; gap: calc(10/18*1em); background: #444; color: #fff; border-radius: calc(10/18*1em); padding: calc(20/18*1em);}
.mypage.cart .total-price .price-detail dl {width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 16px; line-height: calc(24/16*1em);}
/* .mypage.cart .total-price .price-detail dl + dl {margin-top: calc(10/16*1em);} */
.mypage.cart .total-price .price-detail dl dt {font-size: inherit; flex-shrink: 0; opacity: .7;}
.mypage.cart .total-price .price-detail dl dd {font-size: inherit; min-width: 0; opacity: .7;}

.mypage.cart .total-price .total-price-text {font-size: 14px; line-height: 1.4; opacity: .3; color: #fff; text-align: right; margin-top: calc(10/14*1em);}

.mypage.cart .total-price .total-price-btn {padding-top: 40px; display: flex; align-items: center; justify-content: flex-end; font-size: 20px; gap: calc(10/20*1em);}

@media screen and (max-width: 1440px) {
    .mypage.cart .mypage-content-item-table .table .tr .item-select-cell {width: calc(100/1600*100vw);}
    .mypage.cart .mypage-content-item-table .table .tr .item-num-cell {width: calc(100/1600*100vw);}
    .mypage.cart .mypage-content-item-table .table .tr .item-img-cell {width: calc(150/1600*100vw);}
    .mypage.cart .mypage-content-item-table .table .tr .item-qty-cell {width: calc(150/1600*100vw);}
    .mypage.cart .mypage-content-item-table .table .tr .item-price-cell {width: calc(150/1600*100vw);}
}

@media screen and (max-width: 1280px){
    .mypage.cart .mypage-content-item-table .table .tbody .tr {height: auto;}
    .mypage.cart .mypage-content-item-table .table .tr {flex-wrap: wrap; flex-direction: row; justify-content: space-between; box-sizing: border-box;}
    .mypage.cart .mypage-content-item-table .table .tr > * {width: calc(50% - 1.5px) !important;}

    .mypage.cart .mypage-content-item-table .table .tr .item-select-cell {justify-content: flex-end; text-align: right !important;}
    .mypage.cart .mypage-content-item-table .table .tr .item-select-cell span {padding: 0;}
    .mypage.cart .mypage-content-item-table .table .tr .item-select-cell::before {content: '선택'; display: none;}

    .mypage.cart .mypage-content-item-table .table .tr .item-num-cell {order: -1;}
    .mypage.cart .mypage-content-item-table .table .tr .item-num-cell::before {content: '번호';}

    .mypage.cart .mypage-content-item-table .table .tbody .tr .item-img-cell {order: 6;}
    .mypage.cart .mypage-content-item-table .table .tbody .tr .item-img-cell span {padding: 0 !important; width: 100px; position: relative;}
    .mypage.cart .mypage-content-item-table .table .tbody .tr .item-img-cell span::after {content: ''; display: block; padding-top: 100%;}
    .mypage.cart .mypage-content-item-table .table .tbody .tr .item-img-cell span  img {position: absolute; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: contain;}
    .mypage.cart .mypage-content-item-table .table .tr .item-img-cell::before {content: '이미지';}

    .mypage.cart .mypage-content-item-table .table .tr .item-title-cell {width: 100% !important;}
    .mypage.cart .mypage-content-item-table .table .tr .item-title-cell::before {content: '상품명';}

    .mypage.cart .mypage-content-item-table .table .tr .item-qty-cell::before {content: '수량';}
    .mypage.cart .mypage-content-item-table .table .tr .item-qty-cell .qtyWrap .qtyBtn {border: 1px solid #fff;}

    .mypage.cart .mypage-content-item-table .table .tr .item-price-cell {width: 100% !important;}
    .mypage.cart .mypage-content-item-table .table .tr .item-price-cell::before {content: '금액';}
}

@media screen and (max-width: 1024px) {
    .mypage.cart .mypage-content-item-table .table .tr .item-title-cell {width: 100% !important;}
}

@media screen and (max-width: 500px) {
    .mypage.cart .total-price .total-price-item {font-size: clamp(20px, 24/500*100vw, 24px);}
    .mypage.cart .total-price .total-price-btn {font-size: clamp(14px, 20/500*100vw, 20px); justify-content: center; flex-direction: column;}
}

/* 주문 및 결제 */
.mypage.order .mypage-content-item-title.center {margin-bottom: calc(40/50*1em); width: 100%; text-align: center; position: relative; padding-top: calc(160/50*1em);}
.mypage.order .order-content {border-top: 2px solid #fff; border-bottom: 1px solid #fff;}
.mypage.order .order-content-item {padding: 40px 0;}
.mypage.order .order-content-item + .order-content-item {border-top: 1px solid #fff; padding-bottom: 0;}
.mypage.order .order-content-item._orderBox {display: flex; cursor: pointer;}

.mypage.order .order-content-item:not(._orderBox) .order-content-item-content {padding: 40px 0;}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl {font-size: 20px; display: flex; align-items: flex-start;}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl + dl {margin-top: 20px;}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dt {flex-shrink: 0; font-size: inherit; color: #fff; font-weight: 600; height: calc(var(--inputHeight)/20*1em); display: flex; align-items: center;}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dt span {font-size: 14px; color: #f6ad3c; margin-left: calc(5/14*1em);}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd {font-size: calc(18/20*1em); flex-grow: 1;}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .input {border: 1px solid #fff; height: var(--inputHeight); border-radius: calc(10/18*1em); }
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .input input {border: none; outline: none; background: transparent; width: 100%; font-size: inherit; color: #fff; letter-spacing: -0.02em; padding: calc(13/18*1em) calc(30/18*1em); box-sizing: border-box;}

.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .selectFlex {display: flex; gap: 10px;}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .selectFlex .input {flex-grow: 1;}

.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .selectBox {font-size: inherit; cursor: pointer; position: relative; display: flex; align-items: center; padding: calc(13/18*1em) calc(30/18*1em); width: calc(250/16*1em); border: 1px solid #fff; border-radius: calc(10/18*1em); box-sizing: border-box;}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .selectBox input {font-size: inherit; color: #fff; background: none; cursor: pointer; width: 100%; border: none; }
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .selectBox i {color: #fff; opacity: .4; display: flex; align-items: center; justify-content: center; font-size: calc(18/18*1em); transition: .4s;}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .selectBox.active i {transform: scaleY(-1);}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .selectBox .optWrap {position: absolute; left: 0; top: 100%; padding-bottom: 10px; width: 100%; text-align: center; cursor: pointer; display: none; margin-top: 2px;}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .selectBox .optWrap ul {max-height: 150px; overflow-y: auto; width: 100%; background: #353535; padding: 5px 0; border-radius: calc(7 / 18* 1em);}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .selectBox .optWrap ul::-webkit-scrollbar {width: 2px;}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .selectBox .optWrap ul::-webkit-scrollbar-thumb {background: #f6ad3c; border-radius: 10px;}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .selectBox .optWrap ul li span {font-size: 14px; color: #fff; padding: calc(10/16*1em) 0; width: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .4s;}
.mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .selectBox .optWrap ul li:hover span {background: #f6ad3c;}

.mypage.order .order-content-item.darkness {border-color: #ffffff49;}
.mypage.order .order-content-item.darkness .order-content-item-title {display: flex; align-items: center; justify-content: space-between;}
.mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check {display: flex; align-items: center;}
.mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check .checkWrap {display: flex; align-items: center; cursor: pointer; font-size: 14px;}
.mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check .checkWrap input[type="checkbox"] {display: none;}
.mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check .checkWrap label {display: flex; align-items: center; cursor: pointer;}
.mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check .checkWrap label .checkBox {font-size:inherit; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 4px; margin-right: calc(3/14*1em);}
.mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check .checkWrap label .checkBox i {font-size:inherit; color: #fff; transition: .4s;}
.mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check .checkWrap label .checkBox i.xi-check-square-o {display: none;}
.mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check .checkWrap input[type='checkBox']:checked + label .checkBox i.xi-check-square-o {display: block;}
.mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check .checkWrap input[type='checkBox']:checked + label .checkBox i.xi-checkbox-blank {display: none;}
.mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check .checkWrap .lbl {display: flex; align-items: center;}
.mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check .checkWrap .lbl p {font-size:inherit; font-weight: 500; font-size: inherit; line-height: 1em; color: #fff;}
.mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check .btn-lg-sm { font-size: 14px; font-weight: 400; padding: calc(6/14*1em) calc(10/14*1em); border-radius: calc(5/14*1em); margin-left: calc(20/14*1em);}
.mypage.order .order-content-item.darkness .order-content-item-content dl dd .address {display: flex; gap: 10px; margin-bottom: 10px;}
.mypage.order .order-content-item.darkness .order-content-item-content dl dd .address .input {flex-grow: 1;}
.mypage.order .order-content-item.darkness .order-content-item-content dl dd .address .btn-address {flex-shrink: 0; cursor: pointer; height: var(--inputHeight); display: flex; align-items: center; justify-content: center; padding: 0 calc(20/18*1em); border-radius: calc(10/18*1em); background: #222; font-size: inherit; letter-spacing: -0.02em; color: #ffffff7a; transition: .4s;}
.mypage.order .order-content-item.darkness .order-content-item-content dl.deliveryMessage dd .selectBox {width: 100%;}
@media screen and (min-width: 821px) {
    .mypage.order .order-content-item.darkness .order-content-item-content dl dd .address .btn-address:hover {color: #fff;}
}

.mypage.order .total-price-btn-item {width: calc(160/20*1em);}

.mypage.order .order-content-item:not(._orderBox).darkness .order-content-item-content dl dd .input {border-color: #ffffff3f;}
.mypage.order .order-content-item:not(._orderBox).darkness .order-content-item-content dl dd .input input::placeholder {color: #ffffff3f;}
.mypage.order .order-content-item:not(._orderBox).darkness .order-content-item-content dl dd .selectBox {border-color: #ffffff3f;}
.mypage.order .order-content-item:not(._orderBox).darkness .order-content-item-content dl dd .selectBox input {color: #ffffff3f;}

.mypage.order .order-content-item .dataTitle {width: 200px;}
.mypage.order .order-content-item .order-content-item-title {font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-family: 'Pretendard'; color: #fff;}

.mypage.order .order-content-item._orderBox .order-content-item-content {flex-grow: 1; min-width: 0;}
.mypage.order .order-content-item._orderBox .order-content-item-content .accordion .accordion-item-title {font-size: 20px; line-height: calc(24/20*1em); display: flex; justify-content: space-between; color: #fff;}
.mypage.order .order-content-item._orderBox .order-content-item-content .accordion .accordion-item-title h4 {font-weight: 600; flex-grow: 1; padding-right: calc(10/20*1em); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.mypage.order .order-content-item._orderBox .order-content-item-content .accordion-dataItem {padding: calc(40/16*1em) 0 0; font-size: 16px;}
.mypage.order .order-content-item._orderBox .order-content-item-content .accordion-dataItem .accordion-dataItem-item {font-size: inherit; display: flex; align-items: center;}
.mypage.order .order-content-item._orderBox .order-content-item-content .accordion-dataItem .accordion-dataItem-item + .accordion-dataItem-item {margin-top: calc(40/16*1em);}
.mypage.order .order-content-item._orderBox .order-content-item-content .accordion-dataItem .accordion-dataItem-item .img {width: 80px; position: relative;}
.mypage.order .order-content-item._orderBox .order-content-item-content .accordion-dataItem .accordion-dataItem-item .img::after {content: ''; padding-top: 100%; display: block;}
.mypage.order .order-content-item._orderBox .order-content-item-content .accordion-dataItem .accordion-dataItem-item .img img {position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: contain; transform: translate(-50%, -50%);}
.mypage.order .order-content-item._orderBox .order-content-item-content .accordion-dataItem .accordion-dataItem-item .title {font-size: inherit; padding-left: calc(10/16*1em); letter-spacing: -0.02em; line-height: 1.4; color: #fff; opacity: .7;}

@media screen and (max-width: 1440px) {
    .mypage.order .order-content-item .dataTitle {width: calc(200/1440*100vw);}
}

@media screen and (max-width: 1280px) {
    .mypage.order .order-content-item._orderBox {flex-direction: column;}
    .mypage.order .order-content-item .dataTitle {padding-bottom: calc(25/24*1em); white-space: nowrap;}
    .mypage.order .order-content-item:not(._orderBox) .order-content-item-content {padding: 20px 0;}
    .mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd {width: 100%;}
    .mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl {flex-direction: column;}
    .mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dt {margin-bottom: 0px; padding-bottom: calc(10/20*1em);}
}

@media screen and (max-width: 820px) {
    .mypage.order .order-content-item.darkness .order-content-item-title {flex-direction: column; align-items: flex-start;}
    .mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check {margin-top: 15px;}
    .mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .selectFlex {flex-direction: column;}
    .mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl dd .selectBox {width: 100%;}
}

@media screen and (max-width: 500px) {
    .mypage.order .order-content-item {padding: 20px 0;}
    .mypage.order .order-content-item:not(._orderBox) .order-content-item-content {padding: 20px 0;}
    .mypage.order .order-content-item .order-content-item-title {font-size: 20px;}
    .mypage.order .order-content-item:not(._orderBox) .order-content-item-content dl {font-size: 16px;}
    .mypage.order .order-content-item._orderBox .order-content-item-content .accordion .accordion-item-title {font-size: 16px;}
    .mypage.order .order-content-item._orderBox .order-content-item-content .accordion-dataItem {font-size: 14px;}
}

@media screen and (max-width: 360px) {
    .mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check {flex-direction: column; align-items: flex-start;}
    .mypage.order .order-content-item.darkness .order-content-item-title .orderInfo-check .btn-lg-sm {margin-left: 0; margin-top: 10px;}
}


/* 주문완료 */
/* .mypage.order-complete .mypage-content {height: 70vh;} */
.mypage.order-complete .mypage-content .mypage-content-item {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.mypage.order-complete .mypage-content .mypage-content-item p {text-align: center; word-break: keep-all; line-height: 1.3; font-size: 50px; font-weight: 600; letter-spacing: -0.02em; color: #fff; padding-bottom: calc(180/50*1em); padding-top: calc(280/50*1em);}
.mypage.order-complete .mypage-content .mypage-content-item .btnWrap {display: flex; align-items: center; gap: 10px;}
.mypage.order-complete .mypage-content .mypage-content-item .btnWrap a {width: calc(160/20*1em); box-sizing: border-box; text-align: center;}

@media screen and (max-width: 1280px) {
    .mypage.order-complete .mypage-content .mypage-content-item p {font-size: 50px; padding-bottom: calc(150/50*1em); padding-top: calc(220/50*1em);}
}

@media screen and (max-width: 1024px) {
    .mypage.order-complete .mypage-content .mypage-content-item p {font-size: 40px; padding-bottom: calc(150/40*1em); padding-top: calc(160/40*1em);}
}

@media screen and (max-width: 820px) {
    .mypage.order-complete {height: 100vh; padding-top: 0;}
    .mypage.order-complete .wrap {height: 100%;}
    .mypage .mypage-wrap {height: 100%;}
    .mypage.order-complete .mypage-content .mypage-content-item {gap: 30px;}
    .mypage.order-complete .mypage-content .mypage-content-item p {font-size: 36px; padding-bottom:0; padding-top: 0;}
}

@media screen and (max-width: 500px) {
    .mypage.order-complete .mypage-content .mypage-content-item p {font-size: 30px; padding-bottom: calc(100/30*1em); padding-top: calc(150/30*1em);}
    .mypage.order-complete .mypage-content .mypage-content-item .btnWrap {flex-direction: column; gap: 15px;}
    .mypage.order-complete .mypage-content .mypage-content-item .btnWrap a {width: calc(200/20*1em);}
}

@media screen and (max-width: 360px) {
    .mypage.order-complete .mypage-content .mypage-content-item p {font-size: 24px; padding-bottom: calc(80/24*1em); padding-top: calc(120/24*1em);}
}



/* 구매내역 */
.mypage.purchase .mypage-content-item-table .table .tbody .tr {height: calc(120/18*1em); cursor: pointer; transition: .4s;}
.mypage.purchase .mypage-content-item-table .table .tr .item-num-cell {width: calc(80/1600*100vw); flex-shrink: 0;}
.mypage.purchase .mypage-content-item-table .table .tr .item-img-cell {width: calc(80/1600*100vw); flex-shrink: 0;}
.mypage.purchase .mypage-content-item-table .table .tbody .tr .item-img-cell  {height: 100%;}
.mypage.purchase .mypage-content-item-table .table .tbody .tr .item-img-cell span {height: 100%; padding: calc(20/18*1em) 0; box-sizing: border-box;}
.mypage.purchase .mypage-content-item-table .table .tr .item-img-cell span img {object-fit: contain; width: 100%; height: 100%;}
.mypage.purchase .mypage-content-item-table .table .tbody .tr .item-title-cell {transition: .4s;}
.mypage.purchase .mypage-content-item-table .table .tr .item-order-date-cell {width: calc(120/1600*100vw); flex-shrink: 0;}
.mypage.purchase .mypage-content-item-table .table .tr .item-order-num-cell {width: calc(175/1600*100vw); flex-shrink: 0;}
.mypage.purchase .mypage-content-item-table .table .tr .item-delivery-cell {width: calc(90/1600*100vw); flex-shrink: 0;}
.mypage.purchase .mypage-content-item-table .table .tr .item-status-cell {width: calc(90/1600*100vw); flex-shrink: 0;}
.mypage.purchase .mypage-content-item-table .table .tr .item-price-cell {width: calc(100/1600*100vw); flex-shrink: 0;}
.mypage.purchase .mypage-content-item-table .table .tr .item-price-cell .btn-cancel {background: #444; margin-top: calc(15/18*1em);}

@media screen and (min-width: 821px) {
    .mypage.purchase .mypage-content-item-table .table .tbody .tr:hover {background: #ffffff1f;}
    .mypage.purchase .mypage-content-item-table .table .tbody .tr:hover .item-title-cell {color: #f6ad3c;}
}

.mypage.purchase .order-status-info {margin-top: 100px;}
.mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-title {font-size: 30px; font-weight: 600; font-family: 'Pretendard'; letter-spacing: -0.02em; color: #fff; margin-bottom: calc(25/30*1em);}
.mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content {display: flex;}
.mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl {flex: 1; display: flex; flex-direction: column;}
.mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl + dl dt {border-left: 1px solid #ffffff42;}
.mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl + dl dd {border-left: 1px solid #ffffff36;}
.mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl dt {font-size: 18px; font-weight: 500; font-family: 'Pretendard'; letter-spacing: -0.02em; color: #fff; background: #444; height: calc(50/18*1em); display: flex; align-items: center; justify-content: center;}
.mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl:first-child dt {border-radius: calc(10/18*1em) 0 0 calc(10/18*1em);}
.mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl:last-child dt {border-radius: 0 calc(10/18*1em) calc(10/18*1em) 0;}
.mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl dd {flex-grow: 1; font-size: 16px; font-family: 'Pretendard'; letter-spacing: -0.02em; color: #ffffffb2; line-height: calc(24/16*1em); display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(40/16*1em) calc(10/16*1em);}

@media screen and (max-width: 1600px) {
    .mypage.purchase .mypage-content-item-table .table .tr {font-size: 16px;}
    .mypage.purchase .mypage-content-item-table .table .tr .item-num-cell {}
    .mypage.purchase .mypage-content-item-table .table .tr .item-img-cell {width: calc(100/1600*100vw);}
    .mypage.purchase .mypage-content-item-table .table .tr .item-title-cell {}
    .mypage.purchase .mypage-content-item-table .table .tr .item-order-date-cell {width: calc(150/1600*100vw);}
    .mypage.purchase .mypage-content-item-table .table .tr .item-order-num-cell {}
    .mypage.purchase .mypage-content-item-table .table .tr .item-delivery-cell {width: calc(110/1600*100vw);}
    .mypage.purchase .mypage-content-item-table .table .tr .item-status-cell {width: calc(120/1600*100vw);}
    .mypage.purchase .mypage-content-item-table .table .tr .item-price-cell {width: calc(150/1600*100vw);}
}
@media screen and (max-width: 1440px) {
    .mypage.purchase .mypage-content-item-table .table .tr .item-delivery-cell {width: calc(120/1600*100vw);}
}
@media screen and (max-width: 1280px) {
    .mypage.purchase .mypage-content-item-table .table .tbody .tr {height: auto;}
    .mypage.purchase .mypage-content-item-table .table .tr {flex-wrap: wrap; box-sizing: border-box;}
    /* .mypage.purchase .mypage-content-item-table .table .tr > * {width: 100% !important;} */

    .mypage.purchase .mypage-content-item-table .table .tr .item-num-cell::before {content: '번호';}
    .mypage.purchase .mypage-content-item-table .table .tr .item-img-cell::before {content: '이미지';}
    .mypage.purchase .mypage-content-item-table .table .tr .item-img-cell span { width: 100px; position: relative; padding: 0 !important;}
    .mypage.purchase .mypage-content-item-table .table .tr .item-img-cell span::after {content: ''; display: block; padding-top: 100%;}
    .mypage.purchase .mypage-content-item-table .table .tr .item-img-cell span img {position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; object-fit: contain; transform: translate(-50%, -50%);}
    .mypage.purchase .mypage-content-item-table .table .tr .item-title-cell::before {content: '상품명';}
    .mypage.purchase .mypage-content-item-table .table .tr .item-order-date-cell::before {content: '주문일';}
    .mypage.purchase .mypage-content-item-table .table .tr .item-order-num-cell::before {content: '주문번호';}
    .mypage.purchase .mypage-content-item-table .table .tr .item-delivery-cell::before {content: '배송조회';}
    .mypage.purchase .mypage-content-item-table .table .tr .item-status-cell::before {content: '상태';}
    .mypage.purchase .mypage-content-item-table .table .tr .item-price-cell::before {content: '금액';}
    .mypage.purchase .mypage-content-item-table .table .tr .item-price-cell .btn-cancel {margin-top: 0; white-space: nowrap; padding: 0 calc(10/14*1em);}
}
@media screen and (max-width: 1024px) {
    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl dt {font-size: 16px; word-break: keep-all;}
    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl dd {font-size: 14px;}
}
@media screen and (max-width: 820px) {
    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-title {font-size: 20px;}

    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content {flex-wrap: wrap;}
    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl {flex: auto; width: calc(100% / 2);}
    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl:nth-child(2n - 1) dt {border-radius: calc(10 / 18* 1em) 0 0 calc(10 / 18* 1em);}
    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl:nth-child(2n) dt {border-radius: 0  calc(10 / 18* 1em) calc(10 / 18* 1em) 0;}
    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl:nth-child(2n - 1) dt {border-left: none;}
    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl:nth-child(2n - 1) dd {border-left: none;}
}
@media screen and (max-width: 360px) {
    .mypage.purchase .mypage-content-item-table .table .tr {font-size: 14px;}
    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl {width: 100%;}
    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl + dl dt {border: none !important;}
    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl + dl dd {border: none !important;}
    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl dt {border-radius: calc(10/18*1em) !important;}

    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl dt {font-size: 14px;}
    .mypage.purchase .order-status-info .order-status-info-item .order-status-info-item-content dl dd {font-size: 13px;}
}


/* 구매내역 상세 */
.mypage.purchase-detail .mypage-content {max-width: 960px;}
.mypage.purchase-detail .mypage-content .mypage-content-item-title {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.mypage.purchase-detail .mypage-content .mypage-content-item-title button {font-size: 18px;}
.mypage.cart .mypage-content-item-table .topFlex {padding: 0; margin-bottom: calc(37/20*1em); font-size: 20px;}
.mypage.purchase-detail .mypage-content .topFlex p {color: #fff;}
.mypage.purchase-detail .mypage-content .topFlex .order-date {font-size: 16px; opacity: .7;}
.mypage.purchase-detail .order-person-info {padding: 35px 0; border-bottom: 1px solid #fff; margin-bottom: 10px;}
.mypage.purchase-detail .order-person-info dl {display: flex; align-items: flex-start; width: 100%;}
.mypage.purchase-detail .order-person-info dl + dl {margin-top: 35px;}
.mypage.purchase-detail .order-person-info dl dt {width: calc(200/960*100%); min-width: calc(150/24*1em); font-size: 24px; font-weight: 600; font-family: 'Pretendard'; color: #fff;}
.mypage.purchase-detail .order-person-info dl dd {opacity: .7; font-size: 18px; font-family: 'Pretendard'; color: #fff;}
.mypage.purchase-detail .order-person-info dl dd p {line-height: 1.4;}
.mypage.purchase-detail .order-person-info dl dd p + p {margin-top: calc(7/18*1em);}

@media screen and (max-width: 1280px) {
    .mypage.purchase-detail .mypage-content-item-table .table .tbody .tr {height: auto;}
    .mypage.purchase-detail .mypage-content-item-table .table .tr {flex-wrap: wrap; flex-direction: row; justify-content: space-between; box-sizing: border-box;}
    .mypage.purchase-detail .mypage-content-item-table .table .tr > * {width: auto !important;}

    .mypage.purchase-detail .mypage-content-item-table .table .tr .item-select-cell::before {content: '선택'; display: none;}

    .mypage.purchase-detail .mypage-content-item-table .table .tr .item-num-cell {order: -1;}
    .mypage.purchase-detail .mypage-content-item-table .table .tr .item-num-cell::before {content: '번호';}

    .mypage.purchase-detail .mypage-content-item-table .table .tbody .tr .item-img-cell {order: 6;}
    .mypage.purchase-detail .mypage-content-item-table .table .tbody .tr .item-img-cell span {width: 100px; position: relative;}
    .mypage.purchase-detail .mypage-content-item-table .table .tbody .tr .item-img-cell span::after {content: ''; display: block; padding-top: 100%;}
    .mypage.purchase-detail .mypage-content-item-table .table .tbody .tr .item-img-cell span img {position: absolute; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: contain;}
    .mypage.purchase-detail .mypage-content-item-table .table .tr .item-img-cell::before {content: '이미지';}

    .mypage.purchase-detail .mypage-content-item-table .table .tr .item-title-cell::before {content: '상품명';}

    .mypage.purchase-detail .mypage-content-item-table .table .tr .item-qty-cell::before {content: '수량';}
    .mypage.purchase-detail .mypage-content-item-table .table .tr .item-qty-cell .qtyWrap .qtyBtn {border: 1px solid #fff;}

    .mypage.purchase-detail .mypage-content-item-table .table .tr .item-price-cell {width: 100% !important;}
    .mypage.purchase-detail .mypage-content-item-table .table .tr .item-price-cell::before {content: '금액';}
}

@media screen and (max-width: 1024px) {
    .mypage.cart .mypage-content-item-table .topFlex {font-size: 18px;}
}

@media screen and (max-width: 820px) {
    .mypage.purchase-detail .mypage-content .mypage-content-item-title button {font-size: 16px;}
    .mypage.cart .mypage-content-item-table .topFlex {font-size: 16px;}

    .mypage.purchase-detail .order-person-info dl dt {font-size: 20px;}
    .mypage.purchase-detail .order-person-info dl dd {font-size: 16px;}
}

@media screen and (max-width: 500px) {
    .mypage.purchase-detail .order-person-info dl dt {font-size: 18px;}
    .mypage.purchase-detail .order-person-info dl dd {font-size: 14px;}
}

@media screen and (max-width: 360px) {
    .mypage.cart.purchase-detail .mypage-content-item-table .topFlex {flex-direction: column; gap: 10px; font-size: 14px;}
    .mypage.purchase-detail .order-person-info dl dt {font-size: 16px;}
}

/* 구매내역 상세 팝업 */
.purchase-detail-popup {display: none; background: rgba(0, 0, 0, .8); position: fixed; left: 0; top: 0; z-index: 9999 !important; width: 100%; height: 100vh;}
.purchase-detail-popup .inner {width: 437px; box-sizing: border-box; padding: calc(60/30*1em) calc(40/30*1em) calc(30/30*1em); border-radius: calc(17/30*1em); font-size: 30px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.purchase-detail-popup .inner .btn-close {transition: .4s; position: absolute; right: calc(10/36*1em); top: calc(10/36*1em); font-size: 36px; padding: calc(5/36*1em); cursor: pointer; border: none; outline: none; background: transparent; color: #000;}

.purchase-detail-popup .inner b {font-size: inherit; font-weight: 700; letter-spacing: -0.02em; color: #000; text-align: center; display: block; padding-bottom: calc(40/30*1em);}

.purchase-detail-popup .inner .selectBox {z-index: 1; font-size: 16px; cursor: pointer; position: relative; display: flex; align-items: center; width: 100%; border: 1px solid #000; box-sizing: border-box; border-radius: calc(7/16*1em); padding: calc(13/16*1em) calc(15/16*1em);}
.purchase-detail-popup .inner .selectBox input {color: inherit; background: none; cursor: pointer; width: 100%; border: none; padding: 0;}
.purchase-detail-popup .inner .selectBox i {display: flex; align-items: center; justify-content: center; font-size: calc(16/18*1em); transition: .4s;}
.purchase-detail-popup .inner .selectBox.active i {transform: scaleY(-1);}
.purchase-detail-popup .inner .selectBox .optWrap {position: absolute; left: 0; top: 100%; padding-bottom: 10px; width: 100%; text-align: center; cursor: pointer; padding-top: 2px; display: none;}
.purchase-detail-popup .inner .selectBox .optWrap ul {max-height: 150px; overflow-y: auto;  width: 100%; background: #dfdede; padding: 5px 0; border-radius: calc(7/16*1em);}
.purchase-detail-popup .inner .selectBox .optWrap ul::-webkit-scrollbar {width: 2px;}
.purchase-detail-popup .inner .selectBox .optWrap ul::-webkit-scrollbar-thumb {background: #f6ad3c; border-radius: 10px;}
.purchase-detail-popup .inner .selectBox .optWrap ul li span {font-size: calc(14/16*1em); padding: calc(11/14*1em) 0; width: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .4s;}
.purchase-detail-popup .inner .selectBox .optWrap ul li:hover span {background: #aaa;}

.purchase-detail-popup .inner .textarea {box-sizing: border-box;}
.purchase-detail-popup .inner .textarea textarea {resize: none; min-height: 100px; box-sizing: border-box; font-size: 14px; margin-top: 5px; position: relative; width: 100%; border: 1px solid #000; box-sizing: border-box; border-radius: calc(7/16*1em); padding: calc(13/16*1em) calc(15/16*1em);}

/* 20250508 */
.purchase-detail-popup .inner .flx {display: flex; flex-direction: column; align-items: center;}
.purchase-detail-popup .inner .flx .file-wrap .custom-file-input {width: 100%;}
.purchase-detail-popup .inner .flx .file-wrap {align-self: flex-start;}
.purchase-detail-popup .inner .flx .file-wrap #fileList {display: block; font-size: 14px;}
.purchase-detail-popup .inner .flx .file-wrap #customFileBtn {margin-left: 0; font-size: 14px;  border-color: #000;background: #fff;color: #000;}
.purchase-detail-popup .inner .flx .file-wrap #customFileBtn:hover {background: #f6ac3c;border-color:#f6ac3c}

.purchase-detail-popup .inner .btn-set {transition: .4s; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; padding: calc(12/16*1em) calc(25/16*1em); background: #000; color: #fff; border: 1px solid #000; outline: none; cursor: pointer; border-radius: calc(7/16*1em); margin: 0 auto; margin-top: calc(20/16*1em); display: block;}

@media screen and (min-width: 821px) {
    .purchase-detail-popup .inner .btn-close:hover {color: #f6ac3c;}
    .purchase-detail-popup .inner .btn-set:hover {background: #f6ac3c; color: #000; border-color: #f6ac3c;}
}

@media screen and (max-width: 1440px) {
    .purchase-detail-popup .inner {font-size: 28px;}
    .purchase-detail-popup .inner .btn-close {font-size: 34px;}
}

@media screen and (max-width: 1024px) {
    .purchase-detail-popup .inner {font-size: 26px; width: 400px;}
    .purchase-detail-popup .inner .btn-close {font-size: 32px;}
}

@media screen and (max-width: 820px) {
    .purchase-detail-popup .inner {font-size: 24px; width: 360px; padding: calc(50/24*1em) calc(30/24*1em) calc(25/24*1em);}
    .purchase-detail-popup .inner .btn-close {font-size: 30px;}
    .purchase-detail-popup .inner .selectBox {font-size: 15px;}
    .purchase-detail-popup .inner .textarea textarea {font-size: 13px;}
    .purchase-detail-popup .inner .btn-set {font-size: 15px;}
}

@media screen and (max-width: 500px) {
    .purchase-detail-popup .inner {font-size: 22px; width: 320px; padding: calc(40/22*1em) calc(25/22*1em) calc(20/22*1em);}
    .purchase-detail-popup .inner .btn-close {font-size: 28px;}
    .purchase-detail-popup .inner .selectBox {font-size: 14px;}
    .purchase-detail-popup .inner .textarea textarea {font-size: 12px;}
    .purchase-detail-popup .inner .btn-set {font-size: 14px;}
}

@media screen and (max-width: 360px) {
    .purchase-detail-popup .inner {font-size: 20px; width: 90%; max-width: 280px; padding: calc(35/20*1em) calc(20/20*1em) calc(15/20*1em);}
    .purchase-detail-popup .inner .btn-close {font-size: 26px;}
    .purchase-detail-popup .inner .selectBox {font-size: 13px;}
    .purchase-detail-popup .inner .btn-set {font-size: 13px;}
}


/* 구독 */
.mypage.subscribe .subscribe-content {border-top: 2px solid #fff; padding: 150px 0 20px; display: flex; flex-direction: column; justify-content: center; align-items: center;;}
.mypage.subscribe .subscribe-content p {font-size: 30px; line-height: calc(50/30*1em); color: #fff; text-align: center; font-weight: 600; padding-bottom: calc(60/30*1em);}
.mypage.subscribe .subscribe-content p b {color: #f6ad3c;}
.mypage.subscribe .subscribe-content .btn-lg-sm {width: calc(160/30*1em); text-align: center;}

@media screen and (max-width: 500px) {
    .mypage.subscribe .subscribe-content p {font-size: 25px; word-break: keep-all;}
}
@media screen and (max-width: 360px) {
    .mypage.subscribe .subscribe-content p {font-size: 20px;}
}

/* 쿠폰 */
.mypage.coupon .mypage-content-item-table {border-top: 2px solid #fff;}
.mypage.coupon .mypage-content-item-table .topFlex {display: flex; align-items: center; gap: calc(10/20*1em); padding: calc(40/20*1em) 0; font-size: 20px; border-bottom: 1px solid #fff; margin-bottom: calc(40/20*1em);}
.mypage.coupon .mypage-content-item-table .topFlex span {font-size: inherit; font-weight: 600; font-family: 'Pretendard'; letter-spacing: -0.02em; color: #fff;}
.mypage.coupon .mypage-content-item-table .topFlex .inputWrap {display: flex; gap: calc(10/20*1em); flex-grow: 1;}
.mypage.coupon .mypage-content-item-table .topFlex .inputWrap .input {flex-grow: 1; border-radius: calc(10/20*1em); border: 1px solid #ffffff34; height: calc(var(--inputHeight)/20*1em);}
.mypage.coupon .mypage-content-item-table .topFlex .inputWrap .input input {width: 100%; height: 100%; padding: 0 calc(10/20*1em); background: transparent; border: none; outline: none; color: #fff; font-size: inherit; letter-spacing: inherit;}
.mypage.coupon .mypage-content-item-table .topFlex .inputWrap .btn-coupon {font-size: calc(18/20*1em); font-weight: 400; letter-spacing: -0.02em; color: #ffffff7c; display: flex; align-items: center; justify-content: center; height: auto; padding: 0 calc(20/18*1em); background: #222; border-radius: calc(10/18*1em); cursor: pointer; transition: .4s;}
@media screen and (min-width: 821px) {
    .mypage.coupon .mypage-content-item-table .topFlex .inputWrap .btn-coupon:hover {color: #fff;}
}

.mypage.coupon .mypage-content-item-table .table .tr .item-num-cell {width: calc(130/1200*100%); flex-shrink: 0;}
.mypage.coupon .mypage-content-item-table .table .tbody .tr .item-title-cell p {text-align: center;}
.mypage.coupon .mypage-content-item-table .table .tr .item-date-cell {width: calc(150/1200*100%); flex-shrink: 0;}
.mypage.coupon .mypage-content-item-table .table .tr .item-status-cell {width: calc(160/1200*100%); flex-shrink: 0;}
.mypage.coupon .mypage-content-item-table .table .tr .item-status-cell.status-use span {opacity: .3;}

@media screen and (max-width: 1280px) {
    .mypage.coupon .mypage-content-item-table .topFlex {font-size: 18px;}

    .mypage.coupon .mypage-content-item-table .table .tr .item-num-cell::before {content: '번호';}
    .mypage.coupon .mypage-content-item-table .table .tbody .tr .item-title-cell::before {content: '쿠폰명';}
    .mypage.coupon .mypage-content-item-table .table .tbody .tr .item-title-cell p {text-align: left;}
    .mypage.coupon .mypage-content-item-table .table .tr .item-date-cell::before {content: '사용기간';}
    .mypage.coupon .mypage-content-item-table .table .tr .item-status-cell::before {content: '상태';}
}

@media screen and (max-width: 1024px) {
    .mypage.coupon .mypage-content-item-table .topFlex {font-size: 16px;}
}

@media screen and (max-width: 820px) {
    .mypage.coupon .mypage-content-item-table .topFlex {font-size: 14px;}
}

@media screen and (max-width: 360px) {
    .mypage.coupon .mypage-content-item-table .topFlex span {flex-shrink: 0;}
    .mypage.coupon .mypage-content-item-table .topFlex .inputWrap .btn-coupon {flex-shrink: 0;}
}


/* 회원정보수정 */
.mypage.modify .modify-content {border-top: 2px solid #fff; padding-top: 30px;}

.mypage.modify.index .modify-content .modify-content-item {padding: 150px 0 50px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;;}
.mypage.modify.index .modify-content .modify-content-item p {text-align: center; word-break: keep-all; line-height: 1.3; padding-bottom: calc(25/20*1em);}
.mypage.modify.index .modify-content .modify-content-item .inputWrap {display: flex; flex-direction: column; align-items: center;}
.mypage.modify.index .modify-content .modify-content-item .input {border: 1px solid #ffffff34; border-radius: calc(10/20*1em); width: 500px; height: calc(var(--inputHeight)/20*1em); margin-bottom: calc(30/20*1em);}
.mypage.modify.index .modify-content .modify-content-item .input input {width: 100%; height: 100%; padding: 0 calc(10/20*1em); background: transparent; border: none; outline: none; color: #fff; font-size: inherit; letter-spacing: inherit;}

@media screen and (max-width: 1024px) {
    .mypage.modify.index .modify-content .modify-content-item {font-size: 18px; padding: 120px 0 40px;}
    .mypage.modify.index .modify-content .modify-content-item .input {width: 450px;}
}

@media screen and (max-width: 820px) {
    .mypage.modify.index .modify-content .modify-content-item {font-size: 16px; padding: 100px 0 30px;}
    .mypage.modify.index .modify-content .modify-content-item .input {width: 400px;}
}

@media screen and (max-width: 500px) {
    .mypage.modify.index .modify-content .modify-content-item {padding: 80px 0 30px;}
    .mypage.modify.index .modify-content .modify-content-item .input {width: 100%;}
}

@media screen and (max-width: 360px) {
    .mypage.modify.index .modify-content .modify-content-item {font-size: clamp(12px, 14/360*100vw, 14px); padding: 60px 0 20px;}
}

.mypage.modify-edit .modify-content dl {position: relative; z-index: 1; display: flex; align-items: flex-start; font-size: var(--formFontSize); color: #fff;}
.mypage.modify-edit .modify-content dl + dl {margin-top: calc(30/20*1em);}
.mypage.modify-edit .modify-content dl dt {width: var(--formWidth); flex-shrink: 0; font-size: inherit; color: #fff; font-weight: 600; height: calc(var(--inputHeight)/20*1em); display: flex; align-items: center;}
.mypage.modify-edit .modify-content dl dt span {font-size: 14px; color: #f6ad3c; margin-left: calc(5/14*1em);}

.mypage.modify-edit .modify-content dl dd {font-size: calc(18/20*1em); flex-grow: 1;}
.mypage.modify-edit .modify-content dl dd > b {display: flex; align-items: center; height: calc(var(--inputHeight)/18*1em);}
.mypage.modify-edit .modify-content dl dd .input {border: 1px solid #ffffff34; height: calc(var(--inputHeight)/18*1em); border-radius: calc(10/18*1em); }
.mypage.modify-edit .modify-content dl dd .input + .input {margin-top: 10px;}
.mypage.modify-edit .modify-content dl dd .input input {border: none; outline: none; background: transparent; width: 100%; font-size: inherit; color: #fff; letter-spacing: -0.02em; padding: calc(13/18*1em) calc(30/18*1em); box-sizing: border-box;}
.mypage.modify-edit .modify-content dl dd .input input::placeholder {color: #ffffff34; font-weight: inherit;}

.mypage.modify-edit .modify-content dl dd .selectFlex {display: flex; gap: 10px;}
.mypage.modify-edit .modify-content dl dd .selectFlex .input {flex-grow: 1;}

.mypage.modify-edit .modify-content dl dd .selectBox {font-size: inherit; cursor: pointer; position: relative; display: flex; align-items: center; padding: calc(13/18*1em) calc(26/18*1em); width: calc(250/18*1em); border: 1px solid #ffffff34; border-radius: calc(10/18*1em); box-sizing: border-box;}
.mypage.modify-edit .modify-content dl dd .selectBox input {font-size: inherit; color: #ffffff34; background: none; cursor: pointer; width: 100%; border: none; }
.mypage.modify-edit .modify-content dl dd .selectBox i {color: #fff; opacity: .4; display: flex; align-items: center; justify-content: center; font-size: calc(18/18*1em); transition: .4s;}
.mypage.modify-edit .modify-content dl dd .selectBox.active i {transform: scaleY(-1);}
.mypage.modify-edit .modify-content dl dd .selectBox .optWrap {position: absolute; left: 0; top: 100%; padding-bottom: 10px; width: 100%; text-align: center; cursor: pointer; display: none; margin-top: 2px;}
.mypage.modify-edit .modify-content dl dd .selectBox .optWrap ul {max-height: 150px; overflow-y: auto; width: 100%; background: #353535; padding: 5px 0; border-radius: calc(7 / 18* 1em);}
.mypage.modify-edit .modify-content dl dd .selectBox .optWrap ul::-webkit-scrollbar {width: 2px;}
.mypage.modify-edit .modify-content dl dd .selectBox .optWrap ul::-webkit-scrollbar-thumb {background: #f6ad3c; border-radius: 10px;}
.mypage.modify-edit .modify-content dl dd .selectBox .optWrap ul li span {font-size: 14px; color: #fff; padding: calc(10/16*1em) 0; width: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .4s;}
.mypage.modify-edit .modify-content dl dd .selectBox .optWrap ul li:hover span {background: #f6ad3c;}

.mypage.modify-edit .modify-content dl.modify-bottom dd {display: flex; flex-direction: column;}
.mypage.modify-edit .modify-content dl.modify-bottom dd .btn-delete-account { text-underline-offset: 4px; align-self: flex-end; font-size: 16px; color: #fff; opacity: .4; transition: .4s; letter-spacing: -0.02em; text-decoration: underline; cursor: pointer;}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup {margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start;}

.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap {display: flex; align-items: center; cursor: pointer; font-size: 16px;}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap.check-all {margin-bottom: calc(5/16*1em);}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap + .checkWrap {margin-top: calc(6/16*1em);}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap input[type="checkbox"] {display: none;}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap label {display: flex; align-items: center; cursor: pointer;}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap label .checkBox {font-size:inherit; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 4px; margin-right: calc(5/16*1em);}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap label .checkBox i {font-size:inherit; color: #fff; transition: .4s;}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap:not(.check-all) label .checkBox i {opacity: .3;}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap label .checkBox i.xi-check-square {display: none;}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap input[type="checkbox"]:checked + label .checkBox i.xi-check-square-o {display: none;}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap input[type="checkbox"]:checked + label .checkBox i.xi-check-square {display: block;}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap:not(.check-all) input[type="checkbox"]:checked +  label .checkBox i {opacity: 1;}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap .lbl {display: flex; align-items: center;}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap .lbl p {font-size:inherit; font-weight: 400; font-size: inherit; line-height: 1em; color: #fff; margin-right: 8px;}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap:not(.check-all) .lbl p {opacity: .3;}
.mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap .lbl small {font-weight: 400; font-size: calc(12/16*1em); line-height: 1em; color: #cccccc; cursor: pointer; padding: calc(5/12*1em) calc(8/12*1em); background: #6d6d6d; transition: .4s;}

.mypage.modify-edit .modify-content .btn-modify-submit {position: relative; left: 50%; transform: translateX(-50%); margin-top: calc(70/20*1em); font-size: 20px; width: calc(300/20*1em); height: calc(70/20*1em);}

@media screen and (min-width: 821px) {
    .mypage.modify-edit .modify-content dl.modify-bottom .btn-delete-account:hover {opacity: 1; color: #f6ad3c;}
    .mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap .lbl small:hover {color: #fff;}
}

@media screen and (max-width: 1280px) {
    /* .mypage.modify-edit .modify-content dl dt {width: 100%; margin-bottom: 10px;}  */
}

@media screen and (max-width: 1024px) {
    .mypage.modify-edit .modify-content dl dd {font-size: 16px;}
    .mypage.modify-edit .modify-content .btn-modify-submit {font-size: 18px; width: calc(280/18*1em);}
}

@media screen and (max-width: 820px) {
    .mypage.modify-edit .modify-content dl dd .selectFlex {flex-direction: column;}
    .mypage.modify-edit .modify-content dl dd .selectBox {width: 100%;}
    .mypage.modify-edit .modify-content .btn-modify-submit {font-size: 16px; width: calc(250/16*1em);}
}

@media screen and (max-width: 500px) {
    .mypage.modify-edit .modify-content dl {flex-direction: column;}
    .mypage.modify-edit .modify-content dl dd {font-size: 14px;}
    .mypage.modify-edit .modify-content dl.modify-bottom dd .checkGroup .checkWrap {font-size: 14px;}
    .mypage.modify-edit .modify-content dl.modify-bottom dd .btn-delete-account {font-size: 14px;}
    .mypage.modify-edit .modify-content dl dd {width: 100%;}
}

@media screen and (max-width: 360px) {
    .mypage.modify-edit .modify-content dl + dl {margin-top: 20px;}
    .mypage.modify-edit .modify-content .btn-modify-submit {margin-top: 40px; width: 100%;}
}