/* to embed a font */
@import url('/css/font-5c9f6b01db70e5f7188321dc4e0047dd.css');

/* document --------------------------- */
*, *::after, *::before {
    box-sizing: border-box;
}

html, body {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    /* web font + system font */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 62.5%; /* 1rem = 10px */
    font-weight: 400;
    /* letter-spacing: -.02rem; */
    color: #000000;
    /* smoothing font */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    /* mouse drag none */
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /* highlight none */
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: var(--white);
}


/* typography --------------------------- */
h1, h2, h3, h4, h5, h6 {
    clear: both;
    margin: 0;
    padding: 0;
}

b, strong {
    /* add the correct font weight in Chrome, Edge, and Safari */
    font-weight: 700;
}


/* list style --------------------------- */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* embedded content --------------------------- */
img {
    /* remove the border on images inside links in IE 10 */
    border-style: none;
}


/* form --------------------------- */
button, input, textarea, select, option {
    /* web font + system font */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    /* Remove the inheritance of text transform in Edge, Firefox and IE. */
    text-transform: none;
    background-color: transparent;
    /* Show the overflow in Edge and IE. */
    overflow: visible;
    cursor: pointer;
}

button:disabled, input:disabled {
    cursor: not-allowed;
}

button, [type='button'], [type='reset'], [type='submit'] {
    /* correct the inability to style clickable types in iOS and Safari */
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
}

[type='checkbox'], [type='radio'] {
    /* remove the padding in IE 10 */
    padding: 0;
}

textarea {
    width: 100%;
    /* remove the default vertical scrollbar in IE 10+ */
    overflow: auto;
    resize: none;
}


/* link --------------------------- */
a {
    color: #000000;
    text-decoration: none;
    /* remove the gray background on active links in IE 10 */
    background-color: transparent;
    cursor: pointer;
}

a:visited, a:hover, a:focus, a:active {
    color: #000000;
    outline: 0;
    text-decoration: none;
}

:focus {
    outline: none;
}

@media (prefers-color-scheme: dark) {
    html, body {
        color: #ffffff;
    }

    a {
        color: #ffffff;
    }
    
    a:visited, a:hover, a:focus, a:active {
        color: #ffffff;
    }
}

/* root ----------------------- */
:root {
    /* color */
    --black: #000000;
    --white: #ffffff;

    --red900: #980020;
    --red800: #C8102E; /* main color */
    --red700: #DA163A;
    --red600: #E72343;
    --red500: #E93E55; /* sub color */
    --red400: #FF808B;
    --red300: #FF9EA7;
    --red200: #FECBD4;
    --red50: #FBECEE;

    --brown: #AB6C22; /* point color */
    --light-brown: #F5EDE4;

    --gray900: #121212;
    --gray800: #1C1C1C;
    --gray700: #2B2B2B;
    --gray600: #424243;
    --gray500: #747479;
    --gray400: #BDBEC0;
    --gray300: #D7D8DA;
    --gray200: #E3E5E9;
    --gray100: #F2F3F6;

    --pink: #D54C79;
    --yellow: #F6B22A;
    --green: #00704A;

    --system-red: #FF3529;
    --system-blue: #236CD9;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* color */
        --black: #ffffff;
        --white: #121212;
        --white-light: #1C1C1C;

        --gray400: #424243;
        --gray300: #424243;
        --gray200: #2B2B2B;
        --gray100: #1C1C1C;
    }
}

/* scroll */
::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {opacity: 0; width: 0; height: 0; z-index: 99999;}

/* align */
.position-center {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.position-center-top {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.position-center-left {position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}

/* text overflow */
.ellipsis {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /* 한 줄 말줄임, width 지정 필요 */
.ellipsis.double {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} /* 두 줄 말줄임 */

/* text align */
.text-center {text-align: center!important;}
.text-left {text-align: left!important;}
.text-right {text-align: right!important;}

/* font weight */
.font500 {font-weight: 500;}
.font600 {font-weight: 600;}
.font700 {font-weight: 700;}

/* font color */
.font-red {color: var(--red800)!important;}
.font-blue {color: var(--system-blue)!important;}
.font-gray {color: var(--gray500)!important;}
.font-brown {color: var(--brown)!important;}
.font-black {color: var(--black)!important;}

@media (prefers-color-scheme: dark) {
    .font-red {color: var(--red500)!important;}
}

/* input */
input {width: 100%; height: 4.4rem; border-radius: .4rem; border: 1px solid var(--gray200); background-color: var(--white-light); padding: 0 1.2rem; font-size: 1.4rem; color: var(--black); cursor: auto;}
input::placeholder {color: var(--gray400);}

/* input checkbox */
.flex-input {display: flex; column-gap: 1.6rem;}
.flex-chk-list {display: flex; flex-flow: column; row-gap: 1.6rem;}

input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {display: flex; column-gap: .6rem; cursor: pointer;}
input[type="checkbox"] + label::before {content: ''; width: 2rem; height: 2rem; display: block; background-color: var(--white); background-image: url(/img/icon/ic-chk-20-e682f66d8e2766cdd41627403992137f.svg); background-repeat: no-repeat; background-size: cover; background-position: center;}
input[type="checkbox"] + label > span {font-size: 1.4rem; max-width: calc(100% - 2rem - .6rem); color: var(--black); display: flex; align-items: center; column-gap: .3rem; line-height: 1.4;}
input[type="checkbox"]:checked + label::before {background-image: url(/img/icon/ic-chk-20-ov-66db02edea9e1d9d3f71b61d073f363e.svg);}

@media (prefers-color-scheme: dark) {
    input[type="checkbox"] + label::before {background-image: url(/img/icon/ic-chk-20-dark-4a97731fac85f2ba948d6c08ee979ceb.svg);}
}

/* input radio */
.flex-radio {display: flex; flex-wrap: wrap; grid-gap: 1.6rem 2rem; align-items: center;}

input[type="radio"] {display: none;}
input[type="radio"] + label {display: flex; column-gap: .6rem; cursor: pointer;}
input[type="radio"] + label::before {content: ''; width: 2rem; height: 2rem; display: block; background-color: var(--white); background-image: url(/img/icon/ic-radio-20-c51b0a64c57a0b365e5f5ed5456998cd.svg); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 100%;}
input[type="radio"] + label > span {font-size: 1.4rem; max-width: calc(100% - 2rem - .6rem); color: var(--black); display: flex; align-items: center; column-gap: .3rem; line-height: 1.4;}
input[type="radio"]:checked + label::before {background-image: url(/img/icon/ic-radio-20-ov-237e18e4504275eae4f6a25ecf78c12c.svg);}

input[type="radio"]:disabled + label {cursor: default;}
input[type="radio"]:disabled + label::before {background-image: url(/img/icon/ic-radio-20-disabled-5e66be08a54204b366060795f185490d.svg);}
input[type="radio"]:disabled + label > span {color: var(--gray300);}

@media (prefers-color-scheme: dark) {
    input[type="radio"] + label::before {background-image: url(/img/icon/ic-radio-20-dark-c7d75337ac532d145100da405baf6e45.svg);}
    input[type="radio"]:checked + label::before {background-image: url(/img/icon/ic-radio-20-ov-dark-8bd44ce70fefbc153065619380860458.svg);}
}

/* input date */
input[type="date"] {position: relative;}
input[type="date"]::-webkit-calendar-picker-indicator {width: 2rem; height: 2rem; background-image: url(/img/icon/ic-date-20-054f27af4d5ec4fbca29925a381d14ad.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}

@media (prefers-color-scheme: dark) {
    input[type="date"]::-webkit-calendar-picker-indicator {background-image: url(/img/icon/ic-date-20-wh-fd82590c189fe586d177d0036b2943fc.svg);}
}

/* input file */
input[type="file"] {display: none;}
.file-btn-only input[type="file"] + label {width: 12rem; height: 3.2rem; border: 1px solid var(--gray200); border-radius: .2rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 500; color: var(--red800);}

.file-img-preview-5 {width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); column-gap: .8rem;}
.file-img-preview-5 > li {height: 16vw; border: 1px solid var(--gray200); border-radius: .4rem; cursor: pointer; display: flex; align-items: center; justify-content: center;position: relative;}
.file-img-preview-5 > li::before {content: ''; width: 2.4rem; height: 2.4rem; display: block; background-image: url(/img/icon/ic-camera-24-40eee91f15608b6ec15adf2a92dbbadd.svg); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; z-index: 1;}
.file-img-preview-5 > li .img {width: calc(100% + 2px); height: calc(100% + 2px); border-radius: .4rem; margin: -1px; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; z-index: 1;}
.file-img-preview-5 > li .img .delete {width: 1.4rem; height: 1.4rem; border-radius: 100%; background-color: rgba(0, 0, 0, .6); background-image: url(/img/icon/ic-delete-8-4f45081650b74cd55608132690c26884.svg); background-repeat: no-repeat; background-size: .8rem; background-position: center; cursor: pointer; position: absolute; top: .4rem; right: .4rem;}

/* textarea */
textarea {width: 100%; height: 40rem; border-radius: .4rem; border: 1px solid var(--gray200); background-color: var(--white); padding: 1.2rem; font-size: 1.4rem; line-height: 1.6; color: var(--black); cursor: auto;}
textarea::placeholder {color: var(--gray400);}

/* select */
select {height: 4.4rem; padding: 0 4.4rem 0 1.2rem; font-size: 1.4rem; font-weight: 500; border: 1px solid var(--gray200); color: var(--black); background-color: var(--white-light); border-radius: .4rem; background-image: url(/img/icon/ic-select-20-a51a68a5c5d6a414a1134343a0d9f294.svg); background-repeat: no-repeat; background-size: 2rem; background-position: right 1.2rem center; cursor: pointer; -webkit-appearance: none; appearance: none;}
select::-ms-expand {display: none;/*for IE10,11*/}
select:disabled {color: var(--gray400);}

select.small {width: fit-content; height: fit-content; border: none; color: var(--gray500); background-image: url(/img/icon/ic-select-16-2c744bc52f3190aa1e857a2f6e92f0a5.svg); background-size: 1.6rem; background-position: right center; padding: 0 1.8rem 0 0;}

@media (prefers-color-scheme: dark) {
    select {background-image: url(/img/icon/ic-select-20-wh-db06621c90c369cd97b7364cebb0f7b3.svg);}
}

/* button */
.btn-wrap {padding: 2.4rem 2rem 0; display: flex; align-items: center; column-gap: .8rem;}

button {width: 100%; height: 4.8rem; padding: 0; margin: 0; font-size: 1.6rem; font-weight: 500; color: #fff; background-color: var(--red800); border: 1px solid var(--red800); border-radius: .4rem; display: flex; align-items: center; justify-content: center; column-gap: .2rem; cursor: pointer;}
button.sm {width: fit-content; height: 3.2rem; padding: 0 1rem; font-size: 1.2rem; font-weight: 500;}
button.xsm {width: fit-content; height: 2.8rem; padding: 0 1rem; font-size: 1.2rem; font-weight: 500;}
button:disabled {background-color: var(--gray300)!important; border-color: var(--gray300)!important; cursor: default;}

button.gray {background-color: var(--gray500); border-color: var(--gray500);}
button.line-red {background-color: var(--white); border-color: var(--red800); color: var(--red800);}
button.light-red {background-color: var(--red50); border-color: var(--red50); color: var(--red800);}
button.light-red:disabled {color: var(--red300); background-color: var(--red50)!important; border-color: var(--red50)!important;}
button.line-gray {background-color: var(--white); border-color: var(--gray200); color: var(--gray500);}
button.light-gray {background-color: var(--gray100); border-color: var(--gray200); color: var(--gray500);}

@media (prefers-color-scheme: dark) {
    button:disabled {background-color: #1c1c1c!important; border-color: #1c1c1c!important; color: #424243;}
}

/* toggle */
.toggle {display: block; width: 4.6rem; height: 2.4rem; position: relative;}
.toggle > input[type="checkbox"] + span {display: block; width: 100%; height: 100%; border-radius: 2rem; background-color: var(--gray400); -webkit-transition: .3s; transition: .3s; position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer;}
.toggle > input[type="checkbox"] + span::before {content: ''; width: 2rem; height: 2rem; border-radius: 100%; background-color: #fff; box-shadow: .2rem 0 .4rem rgba(0, 0, 0, .1); -webkit-transition: .3s; transition: .3s; position: absolute; left: .2rem; bottom: .2rem;}
.toggle > input[type="checkbox"]:checked + span {background-color: var(--system-red);}
.toggle > input[type="checkbox"]:checked + span::before {-webkit-transform: translateX(2.2rem); -ms-transform: translateX(2.2rem); transform: translateX(2.2rem);}

/* label */
.label {display: flex; align-items: center; justify-content: center; width: fit-content; height: fit-content; padding: .4rem; font-size: 1rem; font-weight: 500; color: var(--red800); background-color: var(--red50); border: 1px solid var(--red50); border-radius: .2rem; white-space: nowrap;}
.label.red {background-color: var(--red800); border-color: var(--red800); color: #fff;}
.label.yellow {background-color: var(--yellow); border-color: var(--yellow); color: #fff;}
.label.blue {background-color: var(--system-blue); border-color: var(--system-blue); color: #fff;}
.label.brown {background-color: var(--light-brown); border-color: var(--light-brown); color: var(--brown);}
.label.dark-gray {background-color: var(--gray600)!important; border-color: var(--gray600)!important; color: #fff!important;}
.label.gray {background-color: #BDBEC0!important; border-color: #BDBEC0!important; color: #fff!important;}
.label.light-gray {background-color: #F2F3F6; border-color: #F2F3F6; color: #747479;}

@media (prefers-color-scheme: dark) {
}

/* number count */
.num-count {display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--gray200); border-radius: .2rem; width: fit-content;}
.num-count > li {display: flex; align-items: center; justify-content: center; width: 3rem;  height: 3rem; cursor: pointer;}
.num-count > li + li {border-left: 1px solid var(--gray200);}
.num-count input {width: 100%; height: 100%; border: 0; padding: 0; text-align: center; font-size: 1.4rem;}

/* tab */
.tab-style01 {padding: 0 2rem; width: 100vw; height: 4.4rem; display: flex; align-items: center; column-gap: 2.8rem; background-color: var(--white); overflow-y: hidden; overflow-x: auto; position: fixed; top: 0; left: 0; z-index: 99;}
.tab-style01::before {content: ''; width: 100%; height: 1px; background-color: var(--gray200); position: absolute; bottom: 0; left: 0;}
.tab-style01 > li {height: 100%;}
.tab-style01 > li > p {width: fit-content; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; white-space: nowrap; font-size: 1.4rem; font-weight: 500; color: var(--gray400); cursor: pointer; position: relative;}
.tab-style01 > li.active > p {font-weight: 600; color: var(--black);}
.tab-style01 > li.active > p::before {content: ''; width: 100%; height: .2rem; background-color: var(--black); position: absolute; bottom: 0;}
.tab-style01 > li:nth-child(1):nth-last-child(2), .tab-style01 > li:nth-child(1):nth-last-child(2) ~ li {width: calc(100% / 2);}
.tab-style01 > li:nth-child(1):nth-last-child(3), .tab-style01 > li:nth-child(1):nth-last-child(3) ~ li {width: calc(100% / 3);}
.tab-style01 > li:nth-child(1):nth-last-child(4), .tab-style01 > li:nth-child(1):nth-last-child(4) ~ li {width: calc(100% / 4);}
.tab-style01 > li:nth-child(1):nth-last-child(5), .tab-style01 > li:nth-child(1):nth-last-child(5) ~ li {width: calc(100% / 5);}

.tab-cont-wrap {display: none;}
.tab-cont-wrap.active {display: block;}

.tab-style01 ~ .tab-cont-wrap {margin-top: 4.4rem;}
.tab-style01 + .search-wrap {top: 4.4rem;}
.tab-style01 + .search-wrap ~ .tab-cont-wrap {margin-top: calc(4.4rem + 6.8rem);}

.tab-cont-wrap .search-wrap {top: 4.4rem;}
.tab-cont-wrap .search-wrap + .cont-box {margin-top: calc(4.4rem + 6.8rem);}

.tab-wrap {padding: 2rem 2rem 0; background-color: var(--white); position: absolute; z-index: 10;}
.tab-wrap .tab-style02 {margin-bottom: 0;}
.box + .tab-style02 {margin-top: 3.2rem;}
.tab-style02 {height: 4.4rem; border-radius: .4rem; display: flex; align-items: center; margin-bottom: 2.4rem; position: relative; z-index: 10;} 
.tab-style02 > li {height: 100%; font-size: 1.4rem; font-weight: 500; color: var(--gray500); border: 1px solid var(--gray200); background-color: var(--white-light); border-right: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.tab-style02 > li.active {background-color: var(--red50); color: var(--red800); font-weight: 600; border-color: var(--red50)!important;}
.tab-style02 > li.active + li {border-left-color: var(--red50);}
.tab-style02 > li:nth-child(1):nth-last-child(2), .tab-style02 > li:nth-child(1):nth-last-child(2) ~ li {width: calc(100% / 2);}
.tab-style02 > li:nth-child(1):nth-last-child(3), .tab-style02 > li:nth-child(1):nth-last-child(3) ~ li {width: calc(100% / 3);}
.tab-style02 > li:nth-child(1):nth-last-child(4), .tab-style02 > li:nth-child(1):nth-last-child(4) ~ li {width: calc(100% / 4);}
.tab-style02 > li:nth-child(1) {border-radius: .4rem 0 0 .4rem;}
.tab-style02 > li:nth-last-child(1) {border-radius: 0 .4rem .4rem 0; border-right: 1px solid var(--gray200); }

.tab-cont {display: none;}
.tab-cont.active {display: block;}

@media (prefers-color-scheme: dark) {
    .tab-style02 > li.active {background-color: var(--gray200); color: var(--red500); border-color: var(--gray200)!important;}
    .tab-style02 > li.active + li {border-left-color: var(--gray200);}
}

/* category */
.category-wrap {width: 100vw; margin: 0 -2rem; padding: 0 2rem; overflow-x: auto; display: flex; align-items: center; column-gap: .8rem; margin-bottom: 2.4rem;}
.category-wrap > li {display: flex; align-items: center; justify-content: center; height: 3rem; padding: 0 1.2rem; border-radius: 5rem; border: 1px solid var(--gray200); background-color: var(--white); font-size: 1.4rem; font-weight: 500; color: var(--gray500); white-space: nowrap; cursor: pointer;}
.category-wrap > li.active {background-color: var(--red800); border-color: var(--red800); color: #fff; font-weight: 600;}

/* cont box */
.cont-box {padding: 2rem 2rem 0;}
.cont-box + .cont-box {margin-top: 2.4rem; padding-top: 3.2rem; position: relative;}
.cont-box + .cont-box::before {content: ''; width: 100%; height: .8rem; display: block; border-top: 1px solid var(--gray200); background-color: var(--gray100); position: absolute; top: 0; left: 0;}

.box + .box {margin-top: 3.2rem;}
.box + .box .sub-title {margin-top: -.8rem;}

/* title */
.title {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem;}
.title > h2 {font-size: 2rem; font-weight: 700; color: var(--black); line-height: 1.4; display: flex; align-items: center; column-gap: .4rem;}
.title > select {height: 2.8rem; padding: 0 3.8rem 0 1.2rem; font-size: 1.2rem; background-image: url(/img/icon/ic-select-14-461c203db66afb78a81595e833a9e9be.svg); background-size: 1.4rem;}
.title > button {width: fit-content; height: 3.2rem; padding: 0 1.4rem; border-radius: .2rem; font-size: 1.2rem; font-weight: 500; color: var(--black); background-color: var(--white); border-color: var(--gray200);}
.title > button:disabled {background-color: var(--gray300); border-color: var(--gray300); color: var(--white);}
.title > div {display: flex; align-items: center; column-gap: .8rem;}
.title > div > button {width: fit-content; height: 3.2rem; padding: 0 1.4rem; border-radius: .2rem; font-size: 1.2rem; font-weight: 500; color: var(--black); background-color: var(--white); border-color: var(--gray200);}
.title + p {font-size: 1.4rem; line-height: 1.6;}
.title-tab {display: flex; align-items: center; column-gap: 1.2rem;}
.title-tab > li {cursor: pointer;}

.title-tab-cont {display: none;}
.title-tab-cont.active {display: block;}

.sub-title {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem;}
.sub-title > h4 {font-size: 1.6rem; font-weight: 700; color: var(--black);}
.sub-title > h6 {font-size: 1.4rem; font-weight: 600; color: var(--black); margin-bottom: -.4rem;}
.sub-title > p {font-size: 1.2rem; color: var(--gray500);}
.sub-title + p {font-size: 1.4rem; line-height: 1.6;}

@media (prefers-color-scheme: dark) {
    .title > button:disabled {background-color: #1c1c1c; color: #424243;}
    .title-tab > li > i {filter: invert(1);}
}

/* bottom fixed */
.bottom-fixed::before {content: ''; width: 100%; height: 9.2rem; display: block; opacity: 0;}
.bottom-fixed .bottom-wrap {position: fixed; left: 0; bottom: 0; width: 100vw; padding: 1rem 2rem 3.4rem; display: flex; flex-flow: column; grid-gap: 2rem .8rem; background-color: var(--white); z-index: 99;}
.bottom-fixed .bottom-wrap .button {display: flex; align-items: center; column-gap: .8rem;}
.bottom-fixed .bottom-wrap .button > button {width: 100%;}
.bottom-fixed .bottom-wrap .button > button:nth-child(1):nth-last-child(2),
.bottom-fixed .bottom-wrap .button > button:nth-child(1):nth-last-child(2) ~ button {width: calc((100% - .8rem) / 2);}
.bottom-fixed .bottom-wrap.gray {background-color: var(--gray100);}
.bottom-fixed .bottom-wrap > ul {margin-top: 2rem;}
.bottom-fixed .bottom-wrap > ul > li {font-size: 1.2rem; line-height: 1.5; text-indent: -.7rem; padding-left: .7rem;}
.bottom-fixed .bottom-wrap > ul > li::before {content: '-'; margin-right: .2rem;}
.bottom-fixed .bottom-wrap > p {margin-top: 2rem; font-size: 1.2rem;}
.bottom-fixed .bottom-wrap.double {grid-gap: .8rem;}
.bottom-fixed .bottom-wrap.double > button:nth-child(1) {background-color: var(--white); color: var(--red800);}
.bottom-fixed .bottom-wrap.double-reverse > button:nth-child(1) {order: 1;}


@media (prefers-color-scheme: dark) {
    .bottom-fixed .bottom-wrap.gray {background-color: var(--gray200);}
}
.bottom-fixed.order::before {height: 12.6rem;}
.bottom-fixed.order {row-gap: 1.2rem;}
.bottom-fixed.order .bottom-wrap > p {margin-top: .6rem; display: flex; align-items: center; justify-content: center; column-gap: .4rem; font-size: 1.4rem; font-weight: 500; color: var(--red900);}
.bottom-fixed .bottom-wrap button > span {font-size: 1.2rem; font-weight: 600; color: var(--red800); width: 2rem; height: 2rem; background-color: var(--white); border-radius: 100%; display: flex; align-items: center; justify-content: center;}
.bottom-fixed .bottom-wrap button:disabled > span {color: var(--gray300);}

/* search wrap */
.search-wrap {width: 100%; padding: 1.2rem 2rem; background-color: var(--gray100); position: fixed; top: 0; left: 0; z-index: 99;}
.search-wrap input[type="text"] {padding: 0 4.4rem 0 1.2rem;}
.search-wrap .ic-search-20 {position: absolute; right: 3.2rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.search-wrap + .cont-box {margin-top: 6.8rem;}

@media (prefers-color-scheme: dark) {
    .search-wrap {background-color: var(--gray200);}
}

/* search date */
.search-date {display: flex; flex-flow: column; row-gap: 1.2rem; margin-bottom: 2.4rem;}
.search-date .period {width: 100%; height: 4.4rem; border-radius: .4rem; display: flex; align-items: center;} 
.search-date .period > li {height: 100%; font-size: 1.4rem; font-weight: 500; color: var(--gray500); border: 1px solid var(--gray200); border-right: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.search-date .period > li:nth-child(1):nth-last-child(4), 
.search-date .period > li:nth-child(1):nth-last-child(4) ~ li {width: calc(100% / 4);}
.search-date .period > li:nth-child(1) {border-radius: .4rem 0 0 .4rem;}
.search-date .period > li:nth-last-child(1) {border-radius: 0 .4rem .4rem 0; border-right: 1px solid var(--gray200);}
.search-date .period > li.active {background-color: var(--red50); color: var(--red800); font-weight: 600; border-color: var(--red50);}
.search-date .period > li.active + li {border-left-color: var(--red50);}
.search-date .search {display: flex; align-items: center; column-gap: .8rem;}
.search-date .search .date-wrap {width: calc(100% - 4.4rem - .8rem); display: flex; align-items: center; column-gap: .2rem;}
.search-date .search .date-wrap > li:not(:nth-child(2)) {width: calc((100% - 1.3rem) / 2);}
.search-date .search .date-wrap > li {font-size: 1.4rem; font-weight: 500; color: var(--gray500);}
.search-date .search .date-wrap > li input {width: 100%; min-width: calc(100% - .2rem - 1.4rem);}
.search-date .search > button {width: 4.4rem; height: 4.4rem; background-color: var(--gray500); border-color: var(--gray500);}

@media (prefers-color-scheme: dark) {
    .search-date .period > li.active {background-color: var(--gray200); color: var(--red500); border-color: var(--gray200);}
    .search-date .period > li.active + li {border-left-color: var(--gray200);}
}

/* search detail */
.search-detail {display: flex; flex-flow: column; row-gap: 1.2rem; padding: 2rem 2rem 2.4rem; position: fixed; top: 0; left: 0; width: 100%; background-color: var(--white); z-index: 10;}
.search-detail .filter {display: flex; align-items: center; column-gap: 1.2rem;}
.search-detail .filter > select {width: 100%;}
.search-detail .filter > select:nth-child(1):nth-last-child(2), 
.search-detail .filter > select:nth-child(1):nth-last-child(2) ~ select {width: calc((100% - 1.2rem) / 2);}
.search-detail .input {position: relative;}
.search-detail .input input[type="text"] {padding: 0 4.4rem 0 1.2rem;}
.search-detail .input button {width: fit-content; height: fit-content; background-color: transparent; border-color: transparent; border-radius: 100%; position: absolute; right: 1.2rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.search-result {margin-top: 12.4rem;}
.search-result .filter {display: flex; align-items: center; justify-content: space-between; position: fixed; top: 14.4rem; left: 0; width: 100%; height: 4.6rem; padding: 0 2rem; background-color: var(--gray100); border-top: 1px solid var(--gray200); z-index: 10;}
.search-result .filter > p {font-size: 1.4rem;}
.search-result .filter > p > span {font-weight: 600; color: var(--red800);}
.search-result .filter > select {background-color: transparent;}

@media (prefers-color-scheme: dark) {
    .search-result .filter > p > span {color: var(--red500);}
}

/* table */
.table-scroll {width: 100vw; margin: 0 -2rem; padding: 0 2rem; overflow-x: scroll;}
.table-scroll tr > * {white-space: nowrap;}

table {width: 100%; border-collapse: collapse; border-spacing: 0; position: relative;}
table::before {content: ''; width: 100%; height: 1px; background-color: var(--black); position: absolute; left: 0; top: 0; z-index: 1;}
table th {height: 3.2rem; padding: .8rem .2rem; font-size: 1.2rem; font-weight: 500; color: var(--gray500); line-height: 1.2; vertical-align: middle; background-color: var(--gray100); border-top: 1px solid var(--gray100); border-bottom: 1px solid var(--gray100);}
table th[rowspan]:not(:last-child) {border-right: 1px solid var(--gray200);}
table tr:not(:last-child) th[colspan] {border-bottom: 1px solid var(--gray200);}
table th + * {border-left: 1px solid var(--gray200);}
table tbody th {border-bottom-color: var(--gray200);}
table tbody th + td {text-align: left;}
table tbody td + th + td {text-align: center;}
table tbody td {height: 3.6rem; padding: 1rem .6rem; text-align: center; font-size: 1.2rem; color: var(--black); line-height: 1.2; vertical-align: middle; background-color: var(--white); border-bottom: 1px solid var(--gray200); word-break: keep-all;}
table tbody td[rowspan] {border-right: 1px solid var(--gray200);}
table tbody td + * {border-left: 1px solid var(--gray200);}
table tbody td.brown {background-color: var(--light-brown); color: var(--brown);}
table tbody tr.point td {background-color: var(--light-brown); border-left-color: #fff; border-right-color: #fff;}

.table-desc {margin-top: 1rem;}
.table-desc.left * {text-align: left;}
.table-desc * {font-size: 1.2rem; color: var(--gray500); text-align: right; line-height: 1.6;}

@media (prefers-color-scheme: dark) {
    table::before {background-color: var(--gray400);}
    table tbody td.brown {background-color: var(--gray200); color: var(--black);}
    table tbody tr.point td {background-color: var(--gray300); border-left-color: var(--gray200); border-right-color: var(--gray200);}
}

/* date ctrl */
.date-ctrl-wrap {width: 100%; height: 6rem; padding: 0 2rem; background-color: var(--gray100); display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; z-index: 20;}
.date-ctrl-wrap .today {position: absolute; left: 2rem; width: fit-content; height: 2.4rem; padding: 0 .6rem; font-size: 1.2rem; font-weight: 500; color: var(--gray500); background-color: var(--gray100); border-color: var(--gray200);}
.date-ctrl-wrap .date-ctrl {display: flex; align-items: center; justify-content: center; column-gap: .8rem;}
.date-ctrl-wrap .date-ctrl > li {font-size: 2rem; font-weight: 700;}
.date-ctrl-wrap .title-tab {position: absolute; right: 2rem;}

.date-ctrl-wrap .date-day {width: 100vw; height: 6rem; padding: 0 2rem; overflow-x: auto; display: flex; column-gap: 4rem; background-color: var(--white); position: absolute; top: 6rem;}
.date-ctrl-wrap .date-day::before {content: ''; width: 100%; height: 1px; background-color: var(--gray100); display: block; position: absolute; bottom: 0; left: 0;}
.date-ctrl-wrap .date-day > li {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .4rem; height: 6rem; cursor: pointer; position: relative;}
.date-ctrl-wrap .date-day > li > span {font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.date-ctrl-wrap .date-day > li > p {font-size: 2rem; font-weight: 500;}
.date-ctrl-wrap .date-day > li.none {cursor: default;}
.date-ctrl-wrap .date-day > li.none > span,
.date-ctrl-wrap .date-day > li.none > p {color: var(--gray400);}
.date-ctrl-wrap .date-day > li.active::before {content: ''; width: 100%; height: .2rem; display: block; background-color: var(--red500); position: absolute; bottom: 0; z-index: 2;}
.date-ctrl-wrap .date-day > li.active > span,
.date-ctrl-wrap .date-day > li.active > p {color: var(--red500);}

.tab-style01 ~ .tab-cont-wrap .date-ctrl-wrap {top: 4.4rem;}
.tab-style01 ~ .tab-cont-wrap .date-ctrl-wrap + * {margin-top: calc(4.4rem + 6rem);}

/* calendar */
.calendar-wrap {width: 100vw; margin: 0 -2rem;}
.calendar-wrap table {table-layout: fixed;}
.calendar-wrap table td {height: 8rem; padding: .4rem .6rem; vertical-align: initial; position: relative;} 

/* limit count */
.limit-count {display: flex; align-items: center; justify-content: flex-end; position: absolute; right: 1.2rem;}
.limit-count > li {display: flex; align-items: center; font-size: 1.2rem; color: var(--gray400);}
.limit-count > li:nth-last-child(1)::before {content: '/';}

/* notification */
.notification {width: 100%; height: calc(100vh - 6rem - 3.4rem - 8.2rem - 2rem); display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1.2rem;}
.notification > h6 {text-align: center; font-size: 1.4rem; font-weight: 600; color: var(--black); line-height: 1.5; word-break: keep-all;}
.notification > p {text-align: center; font-size: 1.2rem; font-weight: 400; color: var(--gray500); line-height: 1.6;}

/* toast */
#toast-container.toast-top-center {top: 7rem; left: 0; right: auto; padding: 0 2rem;}
#toast-container.toast-top-center > div {width: 100%; margin: 0; padding: 1.6rem 4rem; background-image: none!important; box-shadow: none; background-color: var(--gray500); opacity: 1;}
#toast-container.toast-top-center > div .toast-title {text-align: center; font-size: 1.4rem; font-weight: 400; line-height: 1.5; color: var(--white);}

/* popup */
.popup {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, .6); z-index: 10000;}
.popup .pop-wrap {width: calc(100vw - 4rem); border-radius: .4rem; overflow: hidden; background-color: var(--white-light); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.popup .pop-wrap .pop-title {padding: 2.4rem; display: flex; align-items: center; justify-content: center; position: relative;}
.popup .pop-wrap .pop-title > h2 {font-size: 1.8rem; font-weight: 600; text-align: center; line-height: 1.4;}
.popup .pop-wrap .pop-title .ic-delete-24 {position: absolute; right: 2rem; cursor: pointer;}
.popup .pop-wrap .pop-cont {max-height: 60vh; overflow-y: auto;}
.popup .pop-wrap .pop-cont > i {margin: 0 auto;}
.popup .pop-wrap .pop-cont > i + p {margin-top: 1.2rem;}
.popup .pop-wrap .pop-cont > p {text-align: center; font-size: 1.4rem; line-height: 1.5; color: var(--black);}
.popup .pop-wrap .pop-cont > p:nth-child(1):nth-last-child(1) {margin-top: 1.6rem; padding: 0 .8rem .8rem .8rem;}
.popup .pop-wrap .pop-cont .box > p {text-align: center; font-size: 1.4rem; line-height: 1.5; color: var(--black);}
.popup .pop-wrap .pop-cont .img-notice {width: 100%; margin: -4.8rem 0 -3.4rem;}
.popup .pop-wrap .pop-cont .img-notice img {width: 100%;}
.popup .pop-wrap .pop-btn {margin-top: 3.2rem; display: flex; align-content: center;}
.popup .pop-wrap .pop-btn button {border-radius: 0;}
.popup .pop-wrap .pop-btn button:nth-child(1):nth-last-child(2), 
.popup .pop-wrap .pop-btn button:nth-child(1):nth-last-child(2) ~ button {width: calc(100% / 2);}

@media (prefers-color-scheme: dark) {
    .popup {background-color: rgba(0, 0, 0, .8);}
}

/* popup img swiper */
.popup-img {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: var(--white); z-index: 10000;}
.popup-img .pop-wrap {width: 100%; height: 100%; overflow: hidden; background-color: var(--white);}
.popup-img .pop-wrap .pop-title {height: 6rem; position: relative;}
.popup-img .pop-wrap .pop-title .ic-delete-24 {position: absolute; right: 2rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer;}
.popup-img .pop-wrap .pop-cont {height: calc(100% - 6rem); padding-bottom: 3.4rem; display: flex; align-items: center;}
.popup-img .pop-wrap .pop-cont .pop-img-swiper {padding-bottom: 3.4rem;}
.popup-img .pop-wrap .pop-cont .pop-img-swiper .swiper-wrapper {display: flex; align-items: center;}
.popup-img .pop-wrap .pop-cont .pop-img-swiper .swiper-slide {display: flex; align-items: center; justify-content: center;}
.popup-img .pop-wrap .pop-cont .pop-img-swiper img {max-width: 100vw; max-height: calc(100vh - 6rem - 3.4rem - 3.4rem);}
.popup-img .pop-wrap .pop-cont .swiper-pagination {bottom: calc(3.4rem + 1.4rem);}
.popup-img .pop-wrap .pop-cont .swiper-pagination .swiper-pagination-bullet {width: .6rem; height: .6rem; background-color: var(--gray200); opacity: 1; margin: 0 .4rem;}
.popup-img .pop-wrap .pop-cont .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--red800);}

/* loading */
.loading-wrap {width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--white); position: fixed; z-index: 99999;}
.loading-wrap .loading-img {width: 6rem; height: 6rem; background-image: url(/img/loading-49416bdb65bb7bfb0ad2474ca88d3a0b.gif); background-repeat: no-repeat; background-size: contain; background-position: center;}