@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap");

@font-face {
    font-family: "NotoSansKR";
    src: url("../fonts/NotoSansKR-Regular.woff2") format("woff2"),
    url("../fonts/NotoSansKR-Regular.woff") format("woff"),
    url("../fonts/NotoSansKR-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: lighter;
}
@font-face {
    font-family: "NotoSansKR";
    src: url("../fonts/NotoSansKR-Medium.woff2") format("woff2"),
    url("../fonts/NotoSansKR-Medium.woff") format("woff"),
    url("../fonts/NotoSansKR-Medium.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "NotoSansKR";
    src: url("../fonts/NotoSansKR-Bold.woff2") format("woff2"),
    url("../fonts/NotoSansKR-Bold.woff") format("woff"),
    url("../fonts/NotoSansKR-Bold.otf") format("opentype");
    font-style: normal;
    font-weight: bold;
}

/* 함수 */
/* [D]23.02.12 추가 */
:root {
    --color-black: #000;
    --color-white: #fff;
    --color-gray100: #f4f4f4;
    --color-gray200: #d1d1d1;
    --color-gray300: #bababa;
    --color-gray400: #999;
    --color-gray500: #888;
    --color-gray600: #7f7f7f;
    --color-gray700: #f9f9f9;
    --color-gray800: #e5e5e5;
    --color-success: #3eb486;
    --color-warning: #f23232;
    --color-primary: #d60a36;
    --color-secondary: #c42c3c;
    --color-tertiary: #4a82ff;
    --color-pink: #ffc9d4;
    --color-pink200: #ffecf0;
    --color-green: #85a07b;
    --color-beige: #f1c98e;
    --color-ivory: #e4d4bc;
    --color-blue: #4982ff;
    --color-purple:#9752f3;
}

/* reset */
*,
*:before,
*:after {
    line-height: 1.5;
    box-sizing: border-box;
    word-break: break-all;
}
html, body, div, span, iframe, object, embed, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li,
a, abbr, address, b, bdo, blockquote, cite, code, del, dfn, p, pre, em, i, ins, kbd, q, s, samp, strong, sub, sup, u, var,
img, map, area, form, fieldset, legend, input, textarea, select, button, label, keygen, table, caption, thead, tbody, tfoot, tr, th, td,
article, aside, audio, bdi, canvas, datalist, details, dialog, figcaption, figure, footer, header, main, mark, menu, menuitem, meter,
nav, output, progress, section, rp, rt, ruby, summary, time, video, wbr, hr {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
    font-size: 10px;
    font-size: 0.625rem;
}
body {
    font: 1rem/1 system, "NotoSansKR", "Open Sans", -apple-system, "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI", "Tahoma", "Roboto", sans-serif;
    font-weight: normal;
    color: #000;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
h1, h2, h3, h4, h5, pre, input, button, select, textarea {
    font: inherit;
}
input, button, select, textarea {
    color: inherit;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
}
input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus,
button:active,
button:focus {
    outline: 0;
}
button:disabled {
    pointer-events: none;
}
a {
    color: inherit;
    text-decoration: none;
}
input, select, label, img, button {
    vertical-align: middle;
}
input[type="text"]::-ms-clear {
    display: none;
}
table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}
img, fieldset {
    border: 0;
    max-width: 100%;
}
ol, ol li, ul, ul li {
    list-style: none;
}
a, button, label {
    cursor: pointer;
}
button {
    border: 0;
    background: transparent;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}
button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
button:focus {
    outline: 0;
}
i, em, address {
    font-style: normal;
}
:disabled {
    -webkit-text-fill-color: inherit;
    opacity: 1;
}
:disabled + label {
    -webkit-tap-highlight-color: transparent;
}
main {
    font-size: 1.5rem;
}

/* common */
.sr-only, legend {
    overflow: hidden;
    position: absolute;
    margin: -1px 0 0 -1px;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0) !important;
}
caption {
    visibility: hidden;
    overflow: hidden;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -100000000000000000000000px;
}
.link-cover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10; /* [D]24.08.19 수정 */
}
.bul-divide:before {
    display: inline-block;
    width: 0.2rem;
    height: 1rem;
    background-color: var(--color-gray200);
    content: "";
}
.bul-divide2:before {
    display: inline-block;
    width: 0.1rem;
    height: 1.4rem;
    background-color: var(--color-gray200);
    content: "";
}

/* border */
.border-no {
    border: 0 !important;
}
.border-t-no {
    border-top: 0 !important;
}
.border-t-dot {
    border-top: 1px dotted var(--color-gray300) !important;
}
.border-b-dot {
    border-bottom: 1px dotted var(--color-gray300) !important;
}
.border-b-line {
    border-bottom: 1px solid var(--color-gray200) !important;
}
.border-b-line2 {
    border-bottom: 1px solid var(--color-gray500) !important;
}
.border-b-black {
    border-bottom: 1px solid var(--color-black) !important;
}
.border-t-line {
    border-top: 10px solid var(--color-gray100) !important;
}
.border-t-line2 {
    border-top: 1px solid var(--color-gray200) !important;
}
.border-t-line3 {
    border-top: 1px solid var(--color-gray500) !important;
}
.border-t-black {
    border-top: 1px solid var(--color-black) !important;
}
.border-r8 {
    border-radius: 8px !important;
}
.border-r12 {
    border-radius: 12px !important;
}

/* display */
.d-block {
    display: block !important;
}
.d-iblock {
    display: inline-block !important;
}
.d-none {
    display: none !important;
}
.d-iflex {
    display: inline-flex !important;
}
.d-flex {
    display: flex !important;
    flex-direction: row !important;
    justify-content: left !important;
    align-items: center !important;
}
.flex-column {
    flex-direction: column !important;
}
.flex-right {
    justify-content: flex-end !important;
}
.flex-left {
    justify-content: left !important;
}
.flex-center {
    justify-content: center !important;
}
.flex-between {
    justify-content: space-between !important;
}
.flex-evenly {
    justify-content: space-evenly !important;
}
.flex-stretch {
    align-items: stretch !important;
}
.flex-start {
    align-items: flex-start !important;
}
.flex-end {
    align-items: flex-end !important;
}
.flex-w {
    flex-wrap: wrap !important;
}
.flex-item-d2 {
    flex: 1 1 40% !important;
}
.flex-item-d3 {
    flex: 1 1 30% !important;
}
.flex-item-d4 {
    flex: 1 1 25% !important;
}
.gap5 .flex-item-d4 {
    flex: 0 0 calc(25% - 3.8px) !important;
}
.flex-item-d5 {
    flex: 1 1 20% !important;
}
.flex-sh0 {
    flex-shrink: 0 !important;
}
.flex-gr0 {
    flex-grow: 0 !important;
}
.array-l {
    text-align: left !important;
}
.array-c {
    text-align: center !important;
}
.array-r {
    text-align: right !important;
}
.overflow-a {
    overflow: auto !important;
}
.overflow-y-a {
    overflow-y: auto !important;
}
.overflow-x-a {
    overflow-x: auto !important;
}
.overflow-h {
    overflow: hidden !important;
}
.overflow-y-h {
    overflow-y: hidden !important;
}
.overflow-x-h {
    overflow-y: hidden !important;
}
.visible-show {
    visibility: visible !important;
}
.visible-hide {
    visibility: hidden !important;
}
.position-ab {
    position: absolute !important;
}
.position-fix {
    position: fixed !important;
}
.position-re {
    position: relative !important;
}
.position-st {
    position: static !important;
}
.index-high {
    z-index: 1100 !important;
}

/* 간격 */
.gap5 {
    gap: 0.5rem !important;
}
.grp8 {
    gap: 0.8rem !important;
}
.gap10 {
    gap: 1rem !important;
}
.gap15 {
    gap: 1.5rem !important;
}
.gap20 {
    gap: 2rem !important;
}
.gap40 {
    gap: 4rem !important;
}
.m0 {
    margin: 0 !important;
}
.m10 {
    margin: 1rem !important;
}
.m20 {
    margin: 2rem !important;
}
.m30 {
    margin: 3rem !important;
}
.mt0 {
    margin-top: 0 !important;
}
.mt5 {
    margin-top: 0.5rem !important;
}
.mt10 {
    margin-top: 1rem !important;
}
.mt15 {
    margin-top: 1.5rem !important;
}
.mt20 {
    margin-top: 2rem !important;
}
.mt25 {
    margin-top: 2.5rem !important;
}
.mt30 {
    margin-top: 3rem !important;
}
.mt35 {
    margin-top: 3.5rem !important;
}
.mt40 {
    margin-top: 4rem !important;
}
.mt45 {
    margin-top: 4.5rem !important;
}
.mt50 {
    margin-top: 5rem !important;
}
.mr0 {
    margin-right: 0 !important;
}
.mr5 {
    margin-right: 0.5rem !important;
}
.mr10 {
    margin-right: 1rem !important;
}
.mr15 {
    margin-right: 1.5rem !important;
}
.mr20 {
    margin-right: 2rem !important;
}
.mr25 {
    margin-right: 2.5rem !important;
}
.mr30 {
    margin-right: 3rem !important;
}
.mr35 {
    margin-right: 3.5rem !important;
}
.mr40 {
    margin-right: 4rem !important;
}
.mr45 {
    margin-right: 4.5rem !important;
}
.mr50 {
    margin-right: 5rem !important;
}
.mb0 {
    margin-bottom: 0 !important;
}
.mb5 {
    margin-bottom: 0.5rem !important;
}
.mb10 {
    margin-bottom: 1rem !important;
}
.mb15 {
    margin-bottom: 1.5rem !important;
}
.mb20 {
    margin-bottom: 2rem !important;
}
.mb25 {
    margin-bottom: 2.5rem !important;
}
.mb30 {
    margin-bottom: 3rem !important;
}
.mb35 {
    margin-bottom: 3.5rem !important;
}
.mb40 {
    margin-bottom: 4rem !important;
}
.mb45 {
    margin-bottom: 4.5rem !important;
}
.mb50 {
    margin-bottom: 5rem !important;
}
.ml0 {
    margin-left: 0 !important;
}
.ml5 {
    margin-left: 0.5rem !important;
}
.ml10 {
    margin-left: 1rem !important;
}
.ml15 {
    margin-left: 1.5rem !important;
}
.ml20 {
    margin-left: 2rem !important;
}
.ml25 {
    margin-left: 2.5rem !important;
}
.ml30 {
    margin-left: 3rem !important;
}
.ml35 {
    margin-left: 3.5rem !important;
}
.ml40 {
    margin-left: 4rem !important;
}
.ml45 {
    margin-left: 4.5rem !important;
}
.ml50 {
    margin-left: 5rem !important;
}
.p0 {
    padding: 0 !important;
}
.p10 {
    padding: 1rem !important;
}
.p15 {
    padding: 1.5rem !important;
}
.p20 {
    padding: 2rem !important;
}
.p30 {
    padding: 3rem !important;
}
.pt0 {
    padding-top: 0 !important;
}
.pt5 {
    padding-top: 0.5rem !important;
}
.pt10 {
    padding-top: 1rem !important;
}
.pt15 {
    padding-top: 1.5rem !important;
}
.pt20 {
    padding-top: 2rem !important;
}
.pt25 {
    padding-top: 2.5rem !important;
}
.pt30 {
    padding-top: 3rem !important;
}
.pt35 {
    padding-top: 3.5rem !important;
}
.pt40 {
    padding-top: 4rem !important;
}
.pt45 {
    padding-top: 4.5rem !important;
}
.pt50 {
    padding-top: 5rem !important;
}
.pr0 {
    padding-right: 0 !important;
}
.pr5 {
    padding-right: 0.5rem !important;
}
.pr10 {
    padding-right: 1rem !important;
}
.pr15 {
    padding-right: 1.5rem !important;
}
.pr20 {
    padding-right: 2rem !important;
}
.pr25 {
    padding-right: 2.5rem !important;
}
.pr30 {
    padding-right: 3rem !important;
}
.pr35 {
    padding-right: 3.5rem !important;
}
.pr40 {
    padding-right: 4rem !important;
}
.pr45 {
    padding-right: 4.5rem !important;
}
.pr50 {
    padding-right: 5rem !important;
}
.pb0 {
    padding-bottom: 0 !important;
}
.pb5 {
    padding-bottom: 0.5rem !important;
}
.pb10 {
    padding-bottom: 1rem !important;
}
.pb15 {
    padding-bottom: 1.5rem !important;
}
.pb20 {
    padding-bottom: 2rem !important;
}
.pb25 {
    padding-bottom: 2.5rem !important;
}
.pb30 {
    padding-bottom: 3rem !important;
}
.pb35 {
    padding-bottom: 3.5rem !important;
}
.pb40 {
    padding-bottom: 4rem !important;
}
.pb45 {
    padding-bottom: 4.5rem !important;
}
.pb50 {
    padding-bottom: 5rem !important;
}
.pl0 {
    padding-left: 0 !important;
}
.pl5 {
    padding-left: 0.5rem !important;
}
.pl10 {
    padding-left: 1rem !important;
}
.pl15 {
    padding-left: 1.5rem !important;
}
.pl20 {
    padding-left: 2rem !important;
}
.pl25 {
    padding-left: 2.5rem !important;
}
.pl30 {
    padding-left: 3rem !important;
}
.pl35 {
    padding-left: 3.5rem !important;
}
.pl40 {
    padding-left: 4rem !important;
}
.pl45 {
    padding-left: 4.5rem !important;
}
.pl50 {
    padding-left: 5rem !important;
}

/* 가로, 세로 */
.w-full {
    width: 100% !important;
}
.w10 {
    width: 10% !important;
}
.w20 {
    width: 20% !important;
}
.w25 {
    width: 25% !important;
}
.w30 {
    width: 30% !important;
}
.w33 {
    width: 33% !important;
}
.w40 {
    width: 40% !important;
}
.w45 {
    width: 45% !important;
}
.w50 {
    width: 50% !important;
}
.w55 {
    width: 55% !important;
}
.w60 {
    width: 60% !important;
}
.w65 {
    width: 65% !important;
}
.w70 {
    width: 70% !important;
}
.w75 {
    width: 75% !important;
} /* [D]24.01.16 추가 */
.w80 {
    width: 80% !important;
}
.w90 {
    width: 90% !important;
}
.w95 {
    width: 95% !important;
}
.h-full {
    height: 100% !important;
}
.h-v-full {
    height: 100vh !important;
}
.h-v-half {
    height: 50vh !important;
}
.h-main-full {
    height: calc(100vh - 34rem) !important;
}
.h-auto {
    height: auto !important;
}
.m-h-full {
    min-height: 100% !important;
}

/* background color */
.bg-black {
    background-color: var(--color-black) !important;
}
.bg-white {
    background-color: var(--color-white) !important;
}
.bg-gray100 {
    background-color: var(--color-gray100) !important;
}
.bg-gray200 {
    background-color: var(--color-gray200) !important;
}
.bg-gray300 {
    background-color: var(--color-gray300) !important;
}
.bg-gray400 {
    background-color: var(--color-gray400) !important;
}
.bg-gray500 {
    background-color: var(--color-gray500) !important;
}
.bg-primary {
    background-color: var(--color-primary) !important;
}
.bg-secondary {
    background-color: var(--color-secondary) !important;
}
.bg-tertiary {
    background-color: var(--color-tertiary) !important;
}
.bg-green {
    background-color: var(--color-green) !important;
}

/* color */
.c-black {
    color: var(--color-black) !important;
}
.c-white {
    color: var(--color-white) !important;
}
.c-gray100 {
    color: var(--color-gray100) !important;
}
.c-gray200 {
    color: var(--color-gray200) !important;
}
.c-gray300 {
    color: var(--color-gray300) !important;
}
.c-gray400 {
    color: var(--color-gray400) !important;
}
.c-gray500 {
    color: var(--color-gray500) !important;
}
.c-gray600 {
    color: var(--color-gray600) !important;
}
.c-gray700 {
    color: var(--color-gray700) !important;
}
.c-gray800 {
    color: var(--color-gray800) !important;
}
.c-warning {
    color: var(--color-warning) !important;
}
.c-success {
    color: var(--color-success) !important;
}
.c-primary {
    color: var(--color-primary) !important;
}
.c-secondary {
    color: var(--color-secondary) !important;
}
.c-tertiary {
    color: var(--color-tertiary) !important;
}
.c-green {
    color: var(--color-green) !important;
}
.c-beige {
    color: var(--color-beige) !important;
}
.c-ivory {
    color: var(--color-ivory) !important;
}

/* font - size, weight, line-height, ellipsis */
.fs-xs {
    font-size: 1rem !important;
}
.fs-s {
    font-size: 1.1rem !important;
}
.fs-ss {
    font-size: 1.2rem !important; /* 22.10.11 한유진 추가 */
}
.fs-m {
    font-size: 1.3rem !important;
}
.fs-l {
    font-size: 1.5rem !important;
}
.fs-xl {
    font-size: 1.8rem !important;
}
.fs-xxl {
    font-size: 2rem !important;
}
.fs-xxxl {
    font-size: 2.2rem !important;
}
.fs-xxxxl {
    font-size: 2.3rem !important;
}
.fs-xxxxxl {
    font-size: 2.5rem !important;
}
.fs-xxxxxxl {
    font-size: 3rem !important;
}
.fw-l {
    font-weight: lighter !important;
}
.fw-n {
    font-weight: normal !important;
}
.fw-b {
    font-weight: bold !important;
}
.lh-1 {
    line-height: 1 !important;
}
.lh-1half {
    line-height: 1.5 !important;
}
.lh-2 {
    line-height: 2 !important;
}
.lh-27r {
    line-height: 2.7rem !important;
}
.lh-42r {
    line-height: 4.2rem !important;
}
.ellipsis {/* 넓이값은 공통 클래스 사용, 인라인 블록일 경우에도 공통 클래스 사용 */
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.underline {
    text-decoration: underline;
}

/* 타이틀 */
.title-d1 {
    border-bottom: 1px solid var(--color-black);
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 4.2rem;
}
.title-d2 {
    font-size: 2rem;
    font-weight: bold;
}
.title-d3 {
    font-size: 1.5rem;
    font-weight: bold;
}
.title-d4 {
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--color-black);
    font-size: 1.3rem;
    font-weight: bold;
}
.title-d5 {
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--color-black);
    font-size: 2rem;
    font-weight: bold;
}

/* 리스트 스타일 */
[class^="list-"] > li {
    margin-bottom: 0.5rem;
}
[class^="list-"] > li,
[class^="bullet-"] {
    position: relative;
    font-size: 1.5rem;
    font-weight: lighter;
}
.bullet-square,
.list-square > li {
    padding-left: 0.8rem;
}
.bullet-square:before,
.list-square > li:before {
    position: absolute;
    top: 1rem;
    left: 0;
    width: 0.3rem;
    height: 0.3rem;
    background-color: var(--color-black);
    content: "";
}
.bullet-dash,
.list-dash > li {
    padding-left: 0.7rem;
}
.bullet-dash:before,
.list-dash > li:before {
    position: absolute;
    top: 0.5rem;
    left: 0;
    width: 0.2rem;
    height: 1.3rem;
    background-color: var(--color-black);
    content: "";
}
.bullet-dot,
.list-dot > li {
    padding-left: 0.8rem;
    color: var(--color-gray500);
    font-size: 1.3rem;
}
.bullet-dot:before,
.list-dot > li:before {
    position: absolute;
    top: 0.8rem;
    left: 0;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: var(--color-gray500);
    content: "";
}
.bullet-dot.lh-2:before {
    top: 1.2rem;
}
.list-decimal > li {
    margin: 0 0 1rem 1.8rem;
    color: var(--color-black);
    font-size: 1.5rem;
    font-weight: lighter;
    list-style-type: decimal;
}

/* 아이콘 사이즈 */
[class^="ico-"] {
    display: inline-block;
}
[class^="ico-"] img {
    display: block;
}
.ico-12 {
    width: 1.2rem;
    height: 1.2rem;;
}
.ico-12 img {
    width: 1.2rem;
    height: 1.2rem;
}
.ico-16 {
    width: 1.6rem;
    height: 1.6rem;;
}
.ico-16 img {
    width: 1.6rem;
    height: 1.6rem;
}
.ico-30 {
    width: 3rem;
    height: 3rem;
}
.ico-30 img {
    width: 3rem;
    height: 3rem;
}
.ico-48 {
    width: 4.8rem;
    height: 4.8rem;
}
.ico-48 img {
    width: 4.8rem;
    height: 4.8rem;
}
.ico-50 {
    width: 5rem;
    height: 5rem;
}
.ico-50 img {
    width: 5rem;
    height: 5rem;
}
.ico-70 {
    width: 7rem;
    height: 7rem;
}
.ico-70 img {
    width: 7rem;
    height: 7rem;
}
.ico-120 {
    width: 12rem;
    height: 12rem;
}
.ico-120 img {
    width: 12rem;
    height: 12rem;
}

/* 별점 */
.star-grade {
    position: relative;
    width: 28rem;
    height: 4.8rem;
}
.star-grade progress {
    position: absolute;
    top: 0;
    left: 0;
    appearance: none; /* 22.10.11 한유진 추가 */
    -webkit-appearance: none;
}
.star-grade ::-webkit-progress-bar {
    width: 28rem;
    height: 4.8rem;
    background-color: transparent;
    background-image:
            url("../images/ico/ico_star_gray.svg"), url("../images/ico/ico_star_gray.svg"), url("../images/ico/ico_star_gray.svg"), url("../images/ico/ico_star_gray.svg"), url("../images/ico/ico_star_gray.svg");
    background-size: 4.8rem;
    background-position: 0 0, 5.8rem 0, 11.6rem 0, 17.4rem 0, 23.2rem 0;
    background-repeat: no-repeat;
}
.star-grade ::-webkit-progress-value {
    width: auto;
    height: 4.8rem;
    background-color: transparent;
    background-image:
            url("../images/ico/ico_star_black.svg"), url("../images/ico/ico_star_black.svg"), url("../images/ico/ico_star_black.svg"), url("../images/ico/ico_star_black.svg"), url("../images/ico/ico_star_black.svg");
    background-size: 4.8rem;
    background-position: 0 0, 5.8rem 0, 11.6rem 0, 17.4rem 0, 23.2rem 0;
    background-repeat: no-repeat;
}
.star-grade .bg-input {
    display: flex;
    justify-content: left;
    align-items: flex-start;
    position: relative;
    z-index: 10;
    width: 28rem;
    height: 4.8rem;
    background-color: transparent;
    background-image:
            url("../images/ico/ico_star_gray.svg"), url("../images/ico/ico_star_gray.svg"), url("../images/ico/ico_star_gray.svg"), url("../images/ico/ico_star_gray.svg"), url("../images/ico/ico_star_gray.svg");
    background-size: 4.8rem;
    background-position: 0 0, 5.8rem 0, 11.6rem 0, 17.4rem 0, 23.2rem 0;
    background-repeat: no-repeat;
    font-size: 0;
    line-height: 0;
}
.star-grade .bg-input > input[type="radio"] {
    display: block;
    position: absolute;
    top: 0;
    z-index: 15;
    width: 4.8rem;
    height: 4.8rem;
    cursor: pointer;
}
.star-grade .bg-input > input[type="radio"]:nth-of-type(1) {
    left: 5.8em;
}
.star-grade .bg-input > input[type="radio"]:nth-of-type(2) {
    left: 6rem;
}
.star-grade .bg-input > input[type="radio"]:nth-of-type(3) {
    left: 11.6rem;
}
.star-grade .bg-input > input[type="radio"]:nth-of-type(4) {
    left: 17.4rem;
}
.star-grade .bg-input > input[type="radio"]:nth-of-type(5) {
    left: 23.2rem;
}
.star-grade .bg-input > input[type="radio"] + label {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    height: 4.8rem;
}
.star-grade .bg-input > input[type="radio"]:active + label
.star-grade .bg-input > input[type="radio"]:hover + label,
.star-grade .bg-input > input[type="radio"]:checked + label {
    background-image: url("../images/ico/ico_star_black.svg"), url("../images/ico/ico_star_black.svg"), url("../images/ico/ico_star_black.svg"), url("../images/ico/ico_star_black.svg"), url("../images/ico/ico_star_black.svg");
    background-size: 4.8rem;
    background-position: 0 0, 5.8rem 0, 11.6rem 0, 17.4rem 0, 23.2rem 0;
    background-repeat: no-repeat;
}
.star-grade .bg-input > input[type="radio"]:nth-of-type(1):active + label,
.star-grade .bg-input > input[type="radio"]:nth-of-type(1):checked + label {
    width: 5.8rem;
}
.star-grade .bg-input > input[type="radio"]:nth-of-type(2):active + label,
.star-grade .bg-input > input[type="radio"]:nth-of-type(2):checked + label {
    width: 11.8rem;
}
.star-grade .bg-input > input[type="radio"]:nth-of-type(3):active + label,
.star-grade .bg-input > input[type="radio"]:nth-of-type(3):checked + label {
    width: 17.6rem;
}
.star-grade .bg-input > input[type="radio"]:nth-of-type(4):active + label,
.star-grade .bg-input > input[type="radio"]:nth-of-type(4):checked + label {
    width: 23.4rem;
}
.star-grade .bg-input > input[type="radio"]:nth-of-type(5):active + label,
.star-grade .bg-input > input[type="radio"]:nth-of-type(5):checked + label {
    width: 28rem;
}
.star-grade.medium {
    width: 11.6rem;
    height: 2rem;
}
.star-grade.medium ::-webkit-progress-bar {
    width: 11.6rem;
    height: 2rem;
    background-size: 2rem;
    background-position: 0 0, 2.4rem 0, 4.8rem 0, 7.2rem 0, 9.6rem 0;
}
.star-grade.medium ::-webkit-progress-value {
    width: auto;
    height: 2rem;
    background-size: 2rem;
    background-position: 0 0, 2.4rem 0, 4.8rem 0, 7.2rem 0, 9.6rem 0;
}
.star-grade.small {
    width: 6.6rem;
    height: 1rem;
}
.star-grade.small ::-webkit-progress-bar {
    width: 6.6rem;
    height: 1rem;
    background-size: 1rem;
    background-position: 0 0, 1.4rem 0, 2.8rem 0, 4.2rem 0, 5.6rem 0;
}
.star-grade.small ::-webkit-progress-value {
    width: auto;
    height: 1rem;
    background-size: 1rem;
    background-position: 0 0, 1.4rem 0, 2.8rem 0, 4.2rem 0, 5.6rem 0;
}

/* 버튼 */
.btn-set {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.btn-set [class^="btn"],
.bottom-btn [class^="btn"] {
    display: block;
    overflow: hidden;
    padding: 0 0.5rem;
    width: 100%;
    height: 6.5rem;
    font-size: 1.8rem;
    line-height: 6.5rem;
    text-align: center;
}
.popup-wrap.layer .btn-set [class^="btn"],
.popup-wrap.alert .btn-set [class^="btn"],
.popup-wrap.full > main .btn-set [class^="btn"] {
    height: 4.5rem;
    border-radius: 22.5px;
    font-size: 1.5rem;
    line-height: 4.5rem;
}
.popup-wrap.layer .btn-set [class^="btn"][class*="-line"],
.popup-wrap.alert .btn-set [class^="btn"][class*="-line"],
.popup-wrap.full > main .btn-set [class^="btn"][class*="-line"] {
    border-width: 1px !important;
}
.btn-fieldset .btn-set [class^="btn"] {
    width: 8.6rem;
    height: 4.6rem;
    border-radius: 8px;
    font-size: 1.5rem;
    line-height: 4.6rem;
}
.btn-set [class^="btn"][class*="-medium"] {
    height: 4.5rem;
    border-radius: 22.5px;
    font-size: 1.5rem;
    line-height: 4.5rem;
}
.btn-set [class^="btn"][class*="-line"][class*="-medium"] {
    border-width: 1px !important;
}
.btn-fieldset .btn-set [class^="btn"][class*="-line"] {
    border-width: 1px !important;
}
.btn-set [class^="btn"][class*="-primary"],
.bottom-btn [class^="btn"][class*="-primary"] {
    background-color: var(--color-black);
    color: var(--color-white);
}
.btn-set [class^="btn"][class*="-secondary"],
.bottom-btn [class^="btn"][class*="-secondary"] {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.btn-set [class^="btn"][class*="-tertiary"],
.bottom-btn [class^="btn"][class*="-tertiary"] {
    background-color: var(--color-gray100);
    color: var(--color-black);
}
.btn-set [class^="btn"][class*="-line"],
.bottom-btn [class^="btn"][class*="-line"] {
    background-color: var(--color-white);
    color: var(--color-black);
}
.btn-set [class^="btn"][class*="-primary"][class*="-line"],
.bottom-btn [class^="btn"][class*="-primary"][class*="-line"] {
    border: 2px solid var(--color-black);
    color: var(--color-black);
}
.btn-set [class^="btn"][class*="-primary"][class*="-line"]:disabled,
.bottom-btn [class^="btn"][class*="-primary"][class*="-line"]:disabled {
    border: 2px solid var(--color-gray300);
    color: var(--color-gray300);
}
.btn-set [class^="btn"][class*="-secondary"][class*="-line"],
.bottom-btn [class^="btn"][class*="-secondary"][class*="-line"] {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}
.btn-set [class^="btn"][class*="-tertiary"][class*="-line"],
.bottom-btn [class^="btn"][class*="-tertiary"][class*="-line"] {
    border: 2px solid var(--color-gray300);
    color: var(--color-gray500);
}
.btn-setting {
    padding-left: 1.8rem;
    background: url("../images/ico/ico_setting.svg") 0 50% no-repeat;
    background-size: 1.6rem;
    color: var(--color-black);
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.6rem;
}
.btn-view-all {
    padding-left: 1.8rem;
    background: url("../images/ico/ico_window.svg") 0 50% no-repeat;
    background-size: 1.6rem;
    color: var(--color-black);
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.6rem;
}
.btn-share {
    padding-left: 2.1rem;
    background: url("../images/ico/ico_share.svg") 0 50% no-repeat;
    background-size: 1.6rem;
    color: var(--color-black);
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.6rem;
}
.btn-refresh {
    padding-left: 1.8rem;
    background: url("../images/btn/btn_reset2.svg") 0 50% no-repeat;
    background-size: 1.6rem;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.6rem;
}
.btn-view-mobile-receipt {
    padding-left: 1.8rem;
    background: url("../images/contents/ico_mobile_receipt2.svg") 0 50% no-repeat;
    background-size: 1.6rem;
    color: var(--color-black);
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.6rem;
}
.btn-view-order-receipt {
    padding-left: 1.8rem;
    background: url("../images/contents/ico_order_receipt.svg") 0 50% no-repeat;
    background-size: 1.6rem;
    color: var(--color-black);
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.6rem;
}
.btn-edit {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    background: url("../images/btn/btn_edit.svg") 50% 50% no-repeat;
    background-size: 100%;
}
.btn-edit.text {
    padding-left: 1.8rem;
    width: auto;
    height: auto;
    background: url("../images/btn/btn_edit.svg") 0 50% no-repeat;
    background-size: 1.6rem;
    font-size: 1.3rem;
    font-weight: bold;
}
.btn-link-field {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    background: url("../images/ico/ico_arrow_right.svg") 50% 50% no-repeat;
    background-size: 100%;
}
.btn-link-new {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    background: url("../images/ico/ico_arrow_right2.svg") 50% 50% no-repeat;
    background-size: 100%;
}
.btn-link-new.text {
    display: block;
    width: auto;
    height: 1.6rem;
    background: none;
    background-size: 0;
    text-align: center;
}
.btn-link-new.text span {
    display: block;
    padding-right: 1.6rem;
    width: auto;
    height: 1.6rem;
    font-size: 1.3rem;
    line-height: 1.6rem;
    background: url("../images/ico/ico_arrow_right2.svg") 100% 50% no-repeat;
    background-size: 1.2rem;
}
.btn-fold {
    padding-left: 1.8rem;
    font-size: 1.3rem;
    font-weight: bold;
    background: url("../images/ico/ico_arrow_down.svg") 0 50% no-repeat;
    background-size: 1.4rem;
}
.btn-fold.active {
    background-image: url("../images/ico/ico_arrow_up.svg");
}
.btn-fold-contents {
    display: block;
    width: 100%;
    height: 4.2rem;
    border-radius: 21px;
    border: 1px solid var(--color-gray300);
    background-color: var(--color-white);
    font-size: 1.5rem;
    line-height: 4.2rem;
    text-align: center;
}
.btn-fold-contents > span {
    padding-right: 2.1rem;
    background: url("../images/ico/ico_arrow_down2.svg") 100% 50% no-repeat;
    background-size: 1.6rem;
    font-size: 1.5rem;
    line-height: 4.2rem;
    text-align: center;
}
.btn-fold-contents.active > span {
    background-image: url("../images/ico/ico_arrow_up2.svg");
}
.btn-add-wish {
    width: 3rem;
    height: 3rem;
    background: url("../images/ico/ico_wish2.svg") 50% 50% no-repeat;
    background-size: 100%;
}
.btn-add-wish.active {
    background-image: url("../images/ico/ico_wish2_active.svg");
}
.btn-add-wish-detail {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 0.5rem;
    padding-left: 2.1rem;
    font-size: 1.5rem;
    background: url("../images/ico/ico_heart2.svg") 0 50% no-repeat;
}
.btn-add-wish-detail.active {
    background-image: url("../images/ico/ico_heart2_active.svg");
}
.btn-add-wish-detail span,
.btn-add-wish-detail strong {
    font-size: 1.5rem;
}
.btn-add-wish-detail strong {
    color: var(--color-primary);
    font-weight: bold;
}
.btn-like {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    width: 14rem;
    height: 4.2rem;
    border-radius: 21px;
    border: 1px solid var(--color-black);
    background-color: var(--color-white);
    font-size: 1.3rem;
    font-weight: lighter;
    line-height: 4.2rem;
}
.btn-like span:first-child {
    padding-left: 1.8rem;
    background: url("../images/ico/ico_like.svg") 0 50% no-repeat;
    background-size: 1.6rem;
}
.btn-like.active {
    border: 2px solid var(--color-black);
    font-weight: bold;
}
.btn-like.active span:first-child {
    background-image: url("../images/ico/ico_like_active.svg");
}
.btn-open-desc {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    background: url("../images/ico/ico_question_mark.svg") 50% 50% no-repeat;
    background-size: 100%;
}
.btn-open-desc.exclamation {
    background: url("../images/ico/ico_exclamation2.svg") 50% 50% no-repeat;
}
.btn-share-sns {
    width: 100%;
    font-size: 1.3rem;
    text-align: center;
}
.btn-share-sns:before {
    display: block;
    margin: 0 auto 1rem;
    width: 6rem;
    height: 6rem;
    border-radius: 12px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 4.8rem;
    content: "";
}
.btn-share-sns.facebook:before {
    background-color: #4f76bb;
    background-image: url("../images/ico/ico_facebook.svg");
}
.btn-share-sns.kakao:before {
    background-color: #fae100;
    background-image: url("../images/ico/ico_kakao.svg");
}
.btn-share-sns.sms:before {
    background-color: var(--color-green);
    background-image: url("../images/ico/ico_sms.svg");
}
.btn-share-sns.url:before {
    background-color: var(--color-gray500);
    background-image: url("../images/ico/ico_url.svg");
}
.array-btn {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 1rem;
}
.array-btn .btn-array-list {
    color: var(--color-gray500);
    font-size: 1.5rem;
    font-weight: lighter;
}
.array-btn .btn-array-list.active {
    color: var(--color-black);
    font-weight: normal;
}

/* 세렉트 */
select.f-select {/* 넓이값은 공통 클래스 사용, 블록일 경우에도 공통 클래스 사용 */
    position: relative;
    padding: 0 1.5rem;
    width: 100%;
    height: 4.6rem;
    border-radius: 8px;
    border: 1px solid var(--color-gray200);
    background: var(--color-white) url("../images/ico/ico_arrow_down.svg") calc(100% - 1.5rem) 50% no-repeat;
    background-size: 1.2rem;
    font-size: 1.5rem;
    font-weight: lighter;
    line-height: 4.6rem;
}
select.f-select.small {
    padding: 0 1rem;
    height: 2.9rem;
    font-size: 1.3rem;
    line-height: 2.7rem;
    background-size: 0.7rem;
}
select.f-select.noline {
    position: relative;
    padding: 0 2rem 0 1rem;
    width: 9rem;
    border: 0;
    background: var(--color-white) url("../images/ico/ico_sorting.svg") 100% 50% no-repeat;
    background-size: 1.6rem;
    text-align: right;
}
select.f-select::-ms-expand {
    display: none;
}
select.f-select:focus {
    border-color: var(--color-black);
}
select.f-select:disabled,
select.f-select[readonly] {
    background-color: var(--color-gray100);
    color: var(--color-gray500);
}

/* 소팅 */
.f-sorting {
    position: relative;
    z-index: 60;
    width: 100%;
}
.f-sorting .value {
    padding: 0 1rem;
    width: 100%;
    height: 2.9rem;
    border-radius: 8px;
    border: 1px solid var(--color-gray200);
    background: var(--color-white) url("../images/ico/ico_arrow_down.svg") calc(100% - 1rem) 50% no-repeat;
    background-size: 0.7rem;
    font-size: 1.3rem;
    font-weight: lighter;
    line-height: 2.7rem;
    text-align: left;
}
.f-sorting.active .value {
    background-image: url("../images/ico/ico_arrow_up.svg");
}
.f-sorting.active > .value-contents {
    display: block;
}
.f-sorting > .value-contents {
    display: none;
    overflow-y: auto;
    position: absolute;
    z-index: 70;
    top: 2.9rem;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 18rem;
    border-radius: 8px;
    border: 1px solid var(--color-gray200);
    background-color: var(--color-white);
}
.value-contents .list-value-date > li .date {
    padding: 0 1rem;
    width: 100%;
    height: 2.9rem;
    background: var(--color-white) url("../images/ico/ico_arrow_down3.svg") calc(100% - 1rem) 50% no-repeat;
    background-size: 0.7rem;
    color: var(--color-gray500);
    font-size: 1.3rem;
    font-weight: lighter;
    line-height: 2.7rem;
    text-align: left;
}
.value-contents .list-value-date > li.active .date {
    background: var(--color-white) url("../images/ico/ico_arrow_up3.svg") calc(100% - 1rem) 50% no-repeat;
    color: var(--color-black);
    font-weight: normal;
}
.value-contents .list-value-date > li.active .list-remaining {
    display: block;
}
.value-contents .list-value-date > li .list-remaining {
    display: none;
    background-color: var(--color-gray100);
}
.value-contents .list-value-date > li .list-remaining > li .remaining {
    padding: 0 1rem;
    width: 100%;
    height: 2.9rem;
    font-size: 1.3rem;
    font-weight: lighter;
    line-height: 2.7rem;
    text-align: left;
}

/* 파일 인풋 */
.f-input-file input {
    display: none;
}
.f-input-file label {
    display: block;
    width: 6rem;
    height: 6rem;
    border-radius: 8px;
    border: 1px solid var(--color-black);
}
.f-input-file label:before {
    display: block;
    width: 6rem;
    height: 6rem;
    background: url("../images/ico/ico_plus.svg") 50% 50% no-repeat;
    content: "";
}

/* 수량 인풋 */
.f-input-num {
    display: flex;
    justify-content: center;
    align-items: center;
}
.f-input-num input {
    flex-shrink: 0;
    margin-right: 0.5rem;
    width: 4rem;
    height: 3rem;
    border: 0;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 3rem;
    text-align: right;
}
.f-input-num .text {
    flex-shrink: 0;
    width: 4.7rem;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 3rem;
}
.f-input-num > button[class^="btn-val-"] {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.f-input-num > button[class^="btn-val-"]:disabled {
    pointer-events: none;
    opacity: 0.2;
}
.f-input-num > .btn-val-plus {
    background-image: url("../images/ico/ico_plus2.svg");
}
.f-input-num > .btn-val-minus {
    background-image: url("../images/ico/ico_minus.svg");
}

/* 첨부 파일 */
.attach-image {
    position: relative;
    width: 6rem;
    height: 6rem;
}
.attach-image .btn-del-attach {
    display: block;
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 1.6rem;
    height: 1.6rem;
    background: url("../images/btn/btn_delete_attach.svg") 50% 50% no-repeat;
}
.attach-image > img {
    width: 6rem;
    height: 6rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    object-fit: cover;
}

/* 입력폼 */
.requirement:after {
    display: inline-block;
    margin-left: 0.3rem;
    color: var(--color-primary);
    content: "*";
}
label.f-label,
span.f-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}
.f-input {
    position: relative;
    width: 100%;
}
.btn-fieldset .f-input {
    width: calc(100% - 8.6rem);
}
.btn-fieldset .f-input + .btn-set {
    width: 8.6rem;
}
/* [D]24.11.13 추가 */
.btn-fieldset .f-input + .btn-set.typ2 {
    width: 12.6rem;
}
.btn-fieldset .f-input + .btn-set.typ2 button {
    width: 100%;
}
/* // [D]24.11.13 추가 */
.btn-fieldset .f-select:nth-of-type(1) {
    width: 11rem;
}
.btn-fieldset .f-select:nth-of-type(2) {
    width: calc(100% - 19.6rem) ;
}
.btn-fieldset .f-select + .btn-set {
    width: 8.6rem;
}
.f-input > input {
    padding: 0 3rem 0 1.5rem ;
    width: 100%;
    height: 4.6rem;
    border-radius: 8px;
    border: 1px solid var(--color-gray200);
    background-color: var(--color-white);
    font-size: 1.5rem;
    font-weight: lighter;
    line-height: 2.9rem;
}
.f-input .btn-del-input {
    display: none;
    position: absolute;
    top: calc(50% - 0.8rem);
    right: 1.5rem;
    width: 1.6rem;
    height: 1.6rem;
    background: url("../images/btn/btn_delete_input.svg") 50% 50% no-repeat;
    background-size: 100%;
}
.f-input.search-class > input {
    padding-right: 9.2rem;
    border-radius: 0;
    border: 0;
    border-bottom: 5px solid var(--color-black);
}
.f-input.search-class .btn-del-input {
    right: 5rem; /* [D]22.11.15 수정2 */
}
/* [D]22.11.15 수정1 start */
.f-input.search-class .btn-search-input {
    position: absolute;
    top: 0;
    right: 1.5rem; /* [D]22.11.15 수정2 */
    width: 3.6rem; /* [D]22.11.15 수정2 */
    height: 4.6rem;
    background: url("../images/ico/ico_search.svg") 50% 50% no-repeat;
    background-size: 1.6rem;
}
section > .f-input.search-class .btn-search-input {
    right: 0.6rem;
}
/* [D]22.11.15 수정1 end */
.f-input.date > input {
    padding-right: 3.6rem;
    background: url("../images/ico/ico_calendar.svg") calc(100% - 1.5rem) 50% no-repeat;
    background-size: 1.2rem;
}
.f-input.price > input {
    padding-right: 3.1rem;
    font-weight: bold;
}
.f-input.price span.won {
    position: absolute;
    top: 1.15rem;
    right: 1.5rem;
    font-size: 1.5rem;
    font-weight: lighter;
}
.f-input.search > input {
    padding-right: 9.2rem;
}
.f-input.search .btn-del-input {
    right: 5rem; /* [D]22.11.15 수정2 */
}
/* [D]22.11.15 수정1 start */
.f-input.search .btn-search-input {
    position: absolute;
    top: 0;
    right: 1rem; /* [D]22.11.15 수정2 */
    width: 3.6rem; /* [D]22.11.15 수정2 */
    height: 4.6rem;
    background: url("../images/ico/ico_search.svg") 50% 50% no-repeat;
    background-size: 1.6rem;
}
/* [D]22.11.15 수정1 end */
.f-input.view-pw > input {
    padding-right: 8.7rem;
}
.f-input.view-pw .btn-del-input {
    right: 4.9rem;
}
.f-input.view-pw .btn-view-pw {
    right: 4.6rem;
}
.f-input.view-pw .btn-view-pw {
    position: absolute;
    top: calc(50% - 1.25rem);
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: url("../images/ico/ico_eye.svg") 50% 50% no-repeat;
    background-size: 100%;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.f-input.active.view-pw .btn-view-pw {
    background-image: url("../images/ico/ico_eye_active.svg");
}
.f-text > textarea {
    padding: 1.5rem;
    width: 100%;
    min-height: 4rem;
    border-radius: 8px;
    border: 1px solid var(--color-gray200);
    background-color: var(--color-white);
    font-size: 1.5rem;
    resize: none;
}
.f-input > input:focus,
.f-text > textarea:focus {
    border-color: var(--color-black);
}
.f-input > input:disabled,
.f-input > input[readonly],
.f-text > textarea:disabled,
.f-text > textarea[readonly],
.f-input > input:disabled:focus,
.f-input > input[readonly]:focus,
.f-text > textarea:disabled:focus,
.f-text > textarea[readonly]:focus {
    border: 1px solid var(--color-gray200);
    background-color: var(--color-gray100);
    color: var(--color-gray500);
}
.f-input > input::-webkit-input-placeholder,
.f-text > textarea::-webkit-input-placeholder {
    color: var(--color-gray500);
}
.f-text .f-text-count {
    margin-top: 0.5rem;
    padding-right: 0.2rem;
    color: var(--color-gray500);
    font-size: 1.3rem;
    font-weight: lighter;
    text-align: right;
}

/* 라디오, 체크박스 */
.f-check,
.f-check-btn,
.f-check-noline {
    position: relative;
}
span.f-check,
span.f-check-noline {
    display: inline-block;
}
/* 22.10.07 한유진 추가 */
.f-check > input[type="checkbox"],
.f-check > input[type="radio"] {
    width: 1px;
    height: 1px;
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: -1;
}
/* 22.10.07 한유진 추가 end */

.f-check > label {
    position: relative;
    display: inline-block;
    padding-left: 2.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
}
.f-check > label:before,
.f-check > label:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 2rem;
    height: 2rem;
    background-size: 100%;
    content: "";
    z-index: 1; /* 22.10.07 한유진 추가 */
}
.f-check > label.sr-only {
    overflow: hidden;
    position: none;
    width: 2rem;
    height: 2rem;
    padding: 0;
}
.f-check > input:disabled + label {
    color: var(--color-gray200);
}
.f-check > input[type="radio"] + label:before {
    background: url("../images/btn/btn_radio.svg") 50% 50% no-repeat;
    background-size: 100%;
}
.f-check > input[type="radio"] + label:after {
    -webkit-transition: all 1.0s;
    transition: all 1.0s;
}
.f-check > input[type="radio"]:checked + label:after {
    background: url("../images/btn/btn_radio_active.svg") 50% 50% no-repeat;
}
.f-check > input[type="radio"]:disabled + label:after {
    background: url("../images/btn/btn_radio.svg") 50% 50% no-repeat;
}
.f-check > input[type="radio"]:checked:disabled + label:after {
    background: url("../images/btn/btn_radio_active.svg") 50% 50% no-repeat;
}
.f-check > input[type="checkbox"] + label:before {
    background: url("../images/btn/btn_check.svg") 50% 50% no-repeat;
}
.f-check > input[type="checkbox"] + label:after {
    -webkit-transition: all 1.0s;
    transition: all 1.0s;
}
.f-check > input[type="checkbox"]:checked + label:before {
    background: url("../images/btn/btn_check_active.svg") 50% 50% no-repeat;
}

.f-check > input[type="checkbox"]:disabled + label:before {
    background: url("../images/btn/btn_check.svg") 50% 50% no-repeat;
}
.f-check > input[type="checkbox"]:checked:disabled + label:before {
    background: url("../images/btn/btn_check_active.svg") 50% 50% no-repeat;
}
.f-check-noline {
    width: 2rem;
    height: 2rem;
}

/* [D]24.10.24 추가 */
.f-check > input[type="checkbox"]:checked + label.typ2:before {
    background: url("../images/btn/btn_black_check_active.svg") 50% 50% no-repeat;
}
.login-maintain-msg {
    display: inline-block;
    width: 100%;
    height: auto;
    font-size: 1rem;
    letter-spacing: -0.2px;
    background: #f4f4f4;
    padding: 0.7rem 1.4rem;
    margin-top: 1rem;
}
@media only screen and (min-width: 1024px) {
    .login-maintain-msg {
        letter-spacing: -0.3px;
    }
}

/* 22.10.07 한유진 추가 */
.f-check-noline > input[type="checkbox"] {
    width: 1px;
    height: 1px;
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: -1;
}
/* 22.10.07 한유진 추가 end */

.f-check-noline > label {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
}
.f-check-noline > label:before,
.f-check-noline > label:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 2rem;
    height: 2rem;
    background-size: 100%;
    background-color: transparent;
    content: "";
    z-index: 1; /* 22.10.07 한유진 추가 */
}
.f-check-noline > input[type="checkbox"] + label:before {
    background: url("../images/btn/btn_check_gray.svg") 50% 50% no-repeat;
}
.f-check-noline > input[type="checkbox"] + label:after {
    -webkit-transition: all 1.0s;
    transition: all 1.0s;
}

/* 22.10.07 한유진 주석처리 */
/*.f-check-noline > input[type="checkbox"]:disabled:checked + label:before,
.f-check-noline > input[type="checkbox"]:checked:disabled + label:before {
    background-color: rgba(255, 255, 255, 0);
}*/

.f-check-noline > input[type="checkbox"]:checked + label:before,
.f-check-noline > input[type="checkbox"]:checked:disabled + label:before {
    background: rgb(255, 255, 255) url("../images/btn/btn_check_active2.svg") 50% 50% no-repeat; /* 22.10.07 한유진 수정 */
}
.f-check-btn > label,
.f-check-btn input[type="checkbox"] + label,
.f-check-btn input[type="radio"] + label {
    display: block;
    padding: 0 0.5rem;
    width: 100%;
    height: 4.6rem;
    border-radius: 25px;
    border: 1px solid var(--color-gray200);
    background-color: var(--color-white);
    color: var(--color-gray500);
    font-size: 1.5rem;
    font-weight: lighter;
    line-height: 4.6rem;
    text-align: center;
}
.f-check-btn > label > img,
.f-check-btn input[type="checkbox"] + label > img,
.f-check-btn input[type="radio"] + label > img {
    height: 2rem;
    margin-bottom: 0.5rem;
}
.f-check-btn input[type="checkbox"],
.f-check-btn input[type="radio"] {
    position: absolute;
    width: 0;
    height: 0;
}
.f-check-btn input[type="checkbox"]:checked + label,
.f-check-btn input[type="radio"]:checked + label {
    border: 2px solid var(--color-secondary);
    color: var(--color-primary);
    font-weight: bold;
    line-height: 4.3rem;
}
.f-check-btn input[type="checkbox"]:checked + label > img,
.f-check-btn input[type="radio"]:checked + label > img,
.f-check-btn input[type="checkbox"]:disabled + label > img,
.f-check-btn input[type="radio"]:disabled + label > img {
    margin-bottom: 0.3rem;
}
.f-check-btn input[type="checkbox"]:disabled + label,
.f-check-btn input[type="radio"]:disabled + label {
    border: 0;
    background-color: var(--color-gray100);
    color: var(--color-gray500);
    font-weight: lighter;
    line-height: 4.8rem;
}

/* 뱃지 */
[class^="badge"] {
    display: inline-block;
    padding: 0 0.6rem;
    height: 2rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: lighter;
    line-height: 2rem;
    vertical-align: middle;
}
[class^="badge"][class*="-round"] {
    padding: 0 1rem;
    height: 2.5rem;
    border-radius: 13px;
    border-width: 1px !important;
    border-style: solid;
    background: transparent !important;
    font-size: 1.5rem;
    line-height: 2.3rem !important;
}
[class^="badge"][class*="-small"] {
    padding: 0 0.9rem;
    height: 2.2rem;
    font-size: 1.3rem;
    line-height: 2rem !important;
}
[class^="badge"][class*="-default"] {
    border: 1px solid var(--color-gray600);
    background: var(--color-white);
    color: var(--color-gray500);
    font-weight: normal;
    line-height: 1.8rem;
}
[class^="badge"][class*="-progress1"] {
    background-color: var(--color-tertiary);
    color: var(--color-white);
}
[class^="badge"][class*="-progress2"] {
    background-color: var(--color-success);
    color: var(--color-white);
}
[class^="badge"][class*="-progress3"] {
    background-color: var(--color-purple);
    color: var(--color-white);
}
[class^="badge"][class*="-disabled"] {
    background-color: var(--color-gray500);
    color: var(--color-white);
}
[class^="badge"][class*="-black"] {
    background-color: var(--color-black);
    color: var(--color-white);
}
[class^="badge"][class*="-attention2"] {
    background-color: var(--color-primary);
    color: var(--color-white);
}
[class^="badge"][class*="-attention2"][class*="-small"],
[class^="badge"][class*="-black"][class*="-small"],
[class^="badge"][class*="-disabled"][class*="-small"] {
    line-height: 2.2rem !important;
}
[class^="badge"][class*="-attention"] {
    background-color: var(--color-primary);
    color: var(--color-white);
}
[class^="badge"][class*="-black-line"] {
    border: 1px solid var(--color-black);
    background: var(--color-white);
    color: var(--color-black);
    font-weight: normal;
    line-height: 1.8rem;
}
[class^="badge"][class*="-default"][class*="-round"] {
    padding-top: 0;
    border-color: var(--color-gray500);
    color: var(--color-gray500);
}
[class^="badge"][class*="-progress1"][class*="-round"] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
[class^="badge"][class*="-black"][class*="-round"] {
    border-color: var(--color-black);
    color: var(--color-black);
}
[class^="badge"][class*="-recommand"][class*="-round"] {
    padding: 0 1.8rem;
    height: 4rem;
    border-radius: 30px;
    border-width: 1px !important;
    border-style: solid;
    background: transparent !important;
    font-size: 1.5rem;
    line-height: 3.8rem !important;
}
.badge-attention {
    animation: badge-animate 0.9s ease-in-out infinite;
}
@keyframes badge-animate{
    from {
        transform: scale(1);
    } to {
          transform: scale(0.8);
      }
}

/* 테이블 */
.grid-table {
    border: 1px solid var(--color-black);
}
.grid-table.col thead th {
    padding: 0.45rem;
    border: 1px solid var(--color-black);
    background-color: var(--color-gray100);
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.2rem;
    text-align: center;
}
.grid-table.col tbody th,
.grid-table.col tbody td {
    padding: 0.45rem;
    border: 1px solid var(--color-black);
    background-color: var(--color-white);
    font-size: 1.1rem;
    font-weight: lighter;
    text-align: center;
}

/* 탭 : 동작 */
.tab-wrap .tab-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    position: -webkit-sticky;
    top: 4.7rem;
    z-index: 100;
    padding-top: 0.3rem;
    background-color: var(--color-white);
    /*box-shadow: 0 -1px 11rem 0 var(--color-gray200) inset;*/
}
.tab-wrap .tab-menu li {
    position: relative;
    z-index: 10;
}
.tab-wrap .tab-menu li:nth-of-type(2) {
    z-index: 9;
}
.tab-wrap .tab-menu li:nth-of-type(3) {
    z-index: 8;
}
.tab-wrap .tab-menu li:nth-of-type(4) {
    z-index: 7;
}
.tab-wrap .tab-menu li:nth-of-type(5) {
    z-index: 6;
}
.tab-wrap .tab-menu li:nth-of-type(6) {
    z-index: 5;
}
.tab-wrap .tab-menu li:nth-of-type(7) {
    z-index: 4;
}
.tab-wrap .tab-menu li:nth-of-type(8) {
    z-index: 3;
}
.tab-wrap .tab-menu li:nth-of-type(9) {
    z-index: 2;
}
.tab-wrap .tab-menu li a,
.tab-wrap .tab-menu li button,
.tab-wrap .tab-menu li .btn-tab {
    display: block;
    padding: 0 0 1.1rem;
    width: 100%;
    height: 3.7rem;
    border: 0;
    border-bottom: 1px solid var(--color-gray200);
    background-color: var(--color-white);
    font-size: 1.5rem;
    line-height: 3.7rem;
    text-align: center;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.tab-wrap .tab-menu li.active a,
.tab-wrap .tab-menu li.active button,
.tab-wrap .tab-menu li.active .btn-tab {
    border-bottom: 3px solid var(--color-black);
    font-weight: bold;
}
.tab-wrap .tab-menu li a > span,
.tab-wrap .tab-menu li button > span,
.tab-wrap .tab-menu li .btn-tab > span {
    display: inline-block;
    position: relative;
    width: auto;
    height: 3.7rem;
    font-size: 1.5rem;
    line-height: 3.7rem;
}
.tab-wrap .tab-menu li a > span > small,
.tab-wrap .tab-menu li button > span > small,
.tab-wrap .tab-menu li .btn-tab > span > small {
    display: block;
    position: absolute;
    top: -0.1rem;
    right: -1rem;
    z-index: 15;
    padding: 0 0.4rem;
    height: 1.3rem;
    border-radius: 7px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: lighter;
    line-height: 1.3rem;
}
.tab-wrap .tab-contents {
    display: none;
    padding-top: 3rem;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.tab-wrap .tab-contents.active {
    display: block;
}

.tab-wrap.type-review {
    margin: 2rem 0 -1rem;
}

/* 탭 100% */
.tab-wrap.over ul::-webkit-scrollbar,
.tab-wrap.over ul::-webkit-scrollbar-thumb,
.tab-wrap.over ul::-webkit-scrollbar-track {
    background: transparent;
}
.tab-wrap.over ul::-webkit-scrollbar {
    height: 0;
}
.tab-wrap.over ul {
    overflow-y: hidden;
    overflow-x: scroll;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 3.7rem;
}
.tab-wrap.over ul li {
    flex-shrink: 0;
}
@media only screen and (min-width: 1024px) {
    .tab-wrap.over ul {
        height: 4.3rem;
    }
    .tab-wrap.over ul::-webkit-scrollbar {
        height: 0.6rem;
    }
    .tab-wrap.over ul::-webkit-scrollbar-thumb {
        background-color: #aaa;
        border-radius: 10px;
    }
    .tab-wrap.over ul::-webkit-scrollbar-track {
        background-color: #fff;
    }
}

/* 아코디언 */
.accordion-wrap .accordion-item {
    margin: 0 -2rem;
    padding: 0 2rem;
    border-top: 1px solid var(--color-gray200);
}
.accordion-wrap .accordion-item:nth-of-type(1) {
    border-top: 0;
}
.accordion-wrap .accordion-head {
    padding: 2rem 0;
    background: url("../images/ico/ico_arrow_down2.svg") 100% 50% no-repeat;
    background-size: 1.6rem;
    cursor: pointer;
}
.accordion-item.active .accordion-head {
    background-image: url("../images/ico/ico_arrow_up2.svg");
}
.accordion-wrap .accordion-head > p {
    padding: 0 3rem;
    font-size: 1.5rem;
    font-weight: lighter;
    background: url("../images/ico/ico_question.svg") 0 0.2rem no-repeat;
    background-size: 2rem;
}
.accordion-wrap .accordion-body {
    display: none;
    margin: 0 -2rem;
    padding: 2rem;
    background-color: var(--color-gray100);
}
.accordion-wrap .accordion-body > p {
    padding-left: 3rem;
    font-size: 1.5rem;
    font-weight: lighter;
    background: url("../images/ico/ico_answer.svg") 0 0.2rem no-repeat;
    background-size: 2rem;
    white-space: break-spaces;
}
.accordion-wrap .accordion-body > p.text {
    padding-left: 0;
    font-size: 1.5rem;
    font-weight: lighter;
    background: none;
    white-space: normal;
}
.accordion-wrap.agreement .btn-toggle-arrow {
    width: 1.2rem;
    height: 1.2rem;
    background: var(--color-white) url("../images/ico/ico_arrow_down.svg") 55% 50% no-repeat;
    background-size: 1.2rem;
}
.accordion-wrap.agreement.active .btn-toggle-arrow {
    background-image: url("../images/ico/ico_arrow_up.svg");
}
.accordion-wrap.agreement > div:nth-of-type(2) {
    display: none;
}
/*
.accordion-wrap.payment {
    position: relative;
    padding-top: 2rem;
}
.accordion-wrap.payment .btn-toggle-arrow {
    position: absolute;
    top: -2rem;
    right: 0;
    padding-right: 1.6rem;
    background: var(--color-white) url("../images/ico/ico_arrow_down.svg") 100% 50% no-repeat;
    background-size: 1.2rem;
    font-size: 1.3rem;
    font-weight: bold;
}
.accordion-wrap.payment.active .btn-toggle-arrow {
    background-image: url("../images/ico/ico_arrow_up.svg");
}
.accordion-wrap.payment .contents-toggle {
    display: none;
    margin-left: -50%;
    padding: 1.5rem;
    background-color: var(--color-gray100);
}
.accordion-wrap.payment .contents-toggle .f-check > label {
    font-size: 1.3rem;
    font-weight: lighter;
}
*/

/* 슬라이더 */
.ui-slider {
    position: relative;
    margin: 0;
    height: 0.5rem;
    border-radius: 0;
    border: 0 !important;
    background-color: var(--color-gray100);
    text-align: left;
}
.ui-slider .ui-slider-range {
    display: block;
    position: absolute;
    top: 0;
    z-index: 10;
    height: 100%;
    border-radius: 0;
    background-color: var(--color-primary);
}
.ui-slider .ui-slider-handle {
    position: absolute;
    top: -0.5rem;
    z-index: 15;
    margin-left: -0.6rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 0;
    background-color: var(--color-primary);
    cursor: pointer;
    touch-action: pan-x !important;
}
.ui-slider .ui-slider-handle:focus {
    outline: 0;
}

/* 카드 박스 */
.card-box {
    width: 100%;
    min-height: 3rem;
    border-radius: 15px;
    border: 1px solid var(--color-gray200);
    background-color: var(--color-white);
}

/* 검색 결과 없음 */
.no-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 40vh;
}
.no-result p {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}
.no-result p:before {
    display: block;
    margin: 0 auto 1rem;
    width: 12rem;
    height: 12rem;
    background: url("../images/ico/ico_exclamation3.svg") 50% 50% no-repeat;
    background-size: 12rem;
    content: "";
}
/* 22.10.11 한유진 추가 */
.no-result.child p:before {
    display: block;
    margin: 0 auto 1rem;
    width: 23rem;
    height: 16rem;
    background: url("../images/ico/ico_child.svg") 50% 50% no-repeat;
    background-size: 23rem 16rem;
    content: "";
}

/* 게시글 - 뷰 - 네비게이션 */
.nav-list {
    margin-bottom: 3rem;
    border-top: 1px solid var(--color-black);
    border-bottom: 1px solid var(--color-black);
}
.nav-list a {
    display: block;
    overflow: hidden;
    padding: 0 1rem 0 3.6rem;
    width: 100%;
    height: 6.1rem;
    font-size: 1.5rem;
    font-weight: lighter;
    line-height: 6.1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: url("../images/ico/ico_arrow_up2.svg") 1rem 50% no-repeat;
    background-size: 1.6rem;
}
.nav-list a:nth-of-type(1) {
    border-bottom: 1px solid var(--color-gray300);
}
.nav-list a:nth-of-type(2) {
    background-image: url("../images/ico/ico_arrow_down2.svg");
}
.nav-list a.no-post {
    color: var(--color-gray500);
    cursor: default;
}
.nav-list a.no-post:nth-of-type(1) {
    background-image: url("../images/ico/ico_arrow_up4.svg");
}
.nav-list a.no-post:nth-of-type(2) {
    background-image: url("../images/ico/ico_arrow_down4.svg");
}

/* 게시글 - 뷰 */
.view-post .label-group {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 0.5rem;
}
.view-post .post-tit {
    overflow: hidden;
    margin: 1rem 0;
    font-size: 1.9rem;
    font-weight: bold;
}
.view-post .post-date {
    color: var(--color-gray500);
    font-size: 1.5rem;
    font-weight: lighter;
}
.view-post .post-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0 2rem;
}
.view-post .evt-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 15px;
    overflow: hidden;
}
.view-post .notice-infor {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 0.5rem;
}
.view-post .notice-infor dt,
.view-post .notice-infor dd {
    color: var(--color-gray500);
    font-size: 1.3rem;
    font-weight: lighter;
}
.view-post .notice-infor dd:nth-of-type(1):after {
    display: inline-block;
    margin: 0.1rem  0 0 0.5rem;
    color: var(--color-gray500);
    font-size: 1rem;
    vertical-align: top;
    content: "|";
}
.view-post .post-contents {
    margin: 2rem 0 5rem;
    color: var(--color-black) !important;
    font-size: 1.5rem !important;
    font-weight: lighter !important;
}
.view-post .post-contents * {
    color: var(--color-black) !important;
    font-size: 1.5rem !important;
    font-weight: lighter !important;
}
.view-post .post-contents .btn-link-new.text span {
    font-size: 1.3rem !important;
    font-weight: bold !important;
}
.view-post .post-contents .title-d3,
.view-post .post-contents h4 {
    font-size: 1.5rem !important;
    font-weight: bold !important;
}
.view-post .post-contents .turn-information dt {
    font-weight: bold !important;
}
.view-post .post-contents .turn-information dd:before {
    font-size: 1.4rem !important;
    font-weight: bold !important;
}
.view-post .post-contents b,
.view-post .post-contents strong {
    font-weight: bold !important;
}
.view-post .post-contents > div {
    margin-top: 1rem;
}
.view-post .post-contents > div:nth-of-type(1) {
    margin-top: 0;
}
.view-post .post-contents p > img {
    border-radius: 15px;
    overflow: hidden;
}

/* 도트라인 */
main hr {
    border: 1px dotted var(--color-gray300);
}

/* 딤드 */
.bg-dim {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 950;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: rgba(0,0,0,0.7);
}

/* 로딩 */
.bg-dim-popup-loading {
    position: fixed;
    bottom: 0;
    z-index: 1200;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}
@media only screen and (min-width: 1024px) {
    .bg-dim-popup-loading {
        width: 375px;
        min-width: 375px;
        max-width: 375px;
    }
}
.loading-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}
.loading-wrap > img {
    width: 9rem;
    height: 9rem;
    animation: rotate_image 6s linear infinite;
    transform-origin: 50% 50%;
}
.loading-wrap > span {
    margin-top: -5.3rem;
    color: var(--color-white);
    font-size: 1.3rem;
    font-weight: bold;
}
@keyframes rotate_image{
    100% {
        transform: rotate(-360deg);
    }
}

/* 팝업 */
.popup-wrap {
    position: fixed;
    bottom: -1000%;
    z-index: 1000;
    background-color: var(--color-white);
    -webkit-transition: bottom cubic-bezier(0.785, 0.135, 0.15, 0.86) .4s;
    transition: bottom cubic-bezier(0.785, 0.135, 0.15, 0.86) .4s;
}
.popup-wrap header .btn-close-popup {
    width: 1.6rem;
    height: 1.6rem;
    background: url("../images/btn/btn_close_popup_white.svg") 50% 50% no-repeat;
    background-size: 100%;
}

/* 팝업 - 활성화 */
.popup-wrap.active {
    position: fixed;
    bottom: 0;
}
.popup-wrap.full.active footer,
.popup-wrap.bottom.active footer {
    position: fixed;
    bottom: 0;
}
.popup-wrap.toast.active {
    bottom: 2rem;
}
.popup-wrap.change-store.active {
    top: 0;
}

/* 팝업 - 풀 */
.popup-wrap.full {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    width: 100%;
    height: 100%;
}
@media only screen and (min-width: 1024px) {
    .popup-wrap.full {
        width: 375px;
        min-width: 375px;
        max-width: 375px;
    }
}
.popup-wrap.full header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    width: 100%;
    height: 4.9rem;
    border-bottom: 3px solid var(--color-black);
    background-color: var(--color-white);
}
.popup-wrap.full header h1 {
    color: var(--color-black);
    font-size: 1.5rem;
    font-weight: bold;
}
.popup-wrap.full header .btn-close-popup {
    width: 1.6rem;
    height: 1.6rem;
    background: url("../images/btn/btn_close_popup.svg") 50% 50% no-repeat;
    background-size: 100%;
}
.popup-wrap.full main {
    overflow-y: auto;
    padding: 2rem 2rem 5rem;
    height: calc(100% - 4.9rem);
}
.popup-wrap main .full-width {
    margin: 0 -2rem;
    padding: 0 2rem;
}
.popup-wrap.full footer {
    position: relative;
    bottom: -1000%;
    z-index: 1050;
    width: 100%;
    background-color: var(--color-white);
    -webkit-transition: bottom cubic-bezier(0.785, 0.135, 0.15, 0.86) .4s;
    transition: bottom cubic-bezier(0.785, 0.135, 0.15, 0.86) .4s;
}
@media only screen and (min-width: 1024px) {
    .popup-wrap.full footer {
        width: 375px;
        min-width: 375px;
        max-width: 375px;
    }
}
.popup-wrap.full .h-v-full {
    height: calc(100vh - 13rem) !important;
}

/* 팝업 - 얼럿 */
.popup-wrap.alert,
.popup-wrap.layer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1150;
    width: 100%;
    height: 100%;
    background: transparent;
}
.popup-wrap.alert {
    z-index: 1160;
}
@media only screen and (min-width: 1024px) {
    .popup-wrap.alert,
    .popup-wrap.layer {
        width: 375px;
        min-width: 375px;
        max-width: 375px;
    }
}
.popup-wrap.alert .popup-inner {
    position: relative;
    z-index: 1160;
    padding: 2.5rem 2rem;
    width: calc(100% - 4rem);
    border-radius: 15px;
    background-color: var(--color-white);
    box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.16);
}
.popup-wrap.alert .popup-inner header h1 {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}
.popup-wrap.alert .popup-inner main {
    overflow-y: auto;
    min-height: 4.4rem;
    max-height: 15.6rem;
    margin: 1.5rem 0 2.5rem;
    background-color: var(--color-white);
}

/* 팝업 - 레이어 */
.popup-wrap.layer .popup-inner {
    width: calc(100% - 4rem);
    box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.16);
}
.popup-wrap.layer .popup-inner header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: 4.8rem;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: var(--color-black);
}
.popup-wrap.layer .popup-inner header h1 {
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight: normal;
}
.popup-wrap.layer .popup-inner main {
    overflow-y: auto;
    padding: 2rem 2rem 2.5rem;
    max-height: 80vh;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: var(--color-white);
}

/* 팝업 - 헤더 - 점포 변경 - 컨텐츠는 layout.css에, 레이아웃은 common.css에 나뉘어져 있음 */
.popup-wrap.change-store {
    top: -1000%;
    z-index: 1010;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    width: 100%;
    height: 100%;
    background: transparent;
    -webkit-transition: top cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;
    transition: top cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;
}
@media only screen and (min-width: 1024px) {
    .popup-wrap.change-store {
        width: 375px;
        min-width: 375px;
        max-width: 375px;
    }
}
.popup-wrap.change-store .popup-inner {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 1rem;
}
.popup-wrap.change-store main {
    position: relative;
    flex: 14.6rem 0 0;
    padding: 2rem 1rem;
    width: 14.6rem;
    border-radius: 15px;
    background-color: var(--color-white);
}
.popup-wrap.change-store main .btn-close-popup {
    display: block;
    margin: 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    background: url("../images/ico/ico_arrow_up2.svg") 50% 50% no-repeat;
    background-size: 100%;
}
.popup-wrap.change-store main > h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}


/* 22.10.07 한유진 추가 */
.txt-center {
    text-align: center;
}
.txt-right {
    text-align: right;
}

/* 22.10.13. 한유진 추가 */
.round-img {
    border-radius: 15px;
    overflow: hidden;
}

.wb-ka {
    word-break: keep-all;
}

/* 22.10.31 한유진 추가 */
.round-box {
    border-radius: 15px;
    overflow: hidden;
    border-color: var(--color-gray200);
}