/* to embed a font : https://fonts.google.com/ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* root --------------------------- */
:root {
    --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 */
    --brown-light: #F5EDE4;
    --yellow: #F6B22A;
    --gray09: #121212;
    --gray08: #1C1C1C;
    --gray07: #2B2B2B;
    --gray06: #424243;
    --gray05: #747479;
    --gray04: #BDBEC0;
    --gray03: #D7D8DA;
    --gray02: #E3E5E9;
    --gray01: #F2F3F6;
    --black: #000000;
    --white: #ffffff;
}
/* body */
body {background-color: #f8f8f8;}

/* login --------------------------- */
#login {width: 100%; height: 100%; background-repeat: no-repeat; background-size: auto 43.8rem; background-position: right bottom;}
.login-wrap {width: 36rem; display: flex; flex-flow: column; align-items: center; row-gap: 6rem; 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%);}
.login-wrap > img {width: 21.6rem; height: 7.2rem;}
.login-wrap .login-cont {width: 100%; display: flex; flex-flow: column; align-items: center; row-gap: .8rem; font-size: 1.4rem; line-height: 1.6;}
.login-wrap .login-cont li {width: 100%;}
.login-wrap .login-cont li input {height: 4.4rem;}
.login-wrap .login-cont li button {width: 100%; height: 4.8rem; font-size: 1.6rem; margin-top: 1.2rem;}

/* header --------------------------- */
#header {width: 100%; height: 7.2rem; padding: 0 4.8rem; display: flex; align-items: center; justify-content: space-between; background-color: var(--white); position: fixed; top: 0; left: 0; z-index: 999;}
#header .logo {display: flex; align-items: center; cursor: pointer;}
#header .logo > li {font-size: 2rem; font-weight: 700;}
#header .logo > li img {width: 8.4rem; height: 2.8rem; margin-right: 1.6rem;}
#header .info {display: flex; align-items: center; column-gap: .9rem;}
#header .info > li {font-size: 1.2rem; font-weight: 500; display: flex; align-items: center; position: relative;}
#header .info > li + li::before {content: ''; width: 1px; height: 1rem; display: block; background-color: var(--gray02); position: absolute; left: -.5rem;}
#header .info > li a {font-size: 1.2rem; font-weight: 500;}
#header .info > li:not(.name) {cursor: pointer;}

@media screen and (max-width: 480px) {
    #header {padding: 0 1.2rem; height: 5.6rem;}
    #header .logo > li:first-child {width: 3rem;}
    #header .logo > li:nth-child(3) {display: none;}
}

#left_menu_btn {display: none;}

@media screen and (max-width: 480px) {
    #left-menu-btn {
        position: relative;
        display: flex;
        align-items: center;
        width: 26px;
        height: 26px;
        cursor: pointer;
    }
    #left-menu-btn > span,
    #left-menu-btn > span::before,
    #left-menu-btn > span::after {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: var(--red800);
        transition-duration: .25s;
    }
    #left-menu-btn > span::before {content: '';top: -8px;}
    #left-menu-btn > span::after {content: '';top: 8px;}
    #left-menu-btn.open > span {transform: rotate(45deg);}
    #left-menu-btn.open > span::before {top: 0; transform: rotate(0deg);}
    #left-menu-btn.open > span::after {top: 0; transform: rotate(90deg);}
}

/* container --------------------------- */
#container {position: relative; height: calc(100vh - 7.2rem); margin-top: 7.2rem; display: grid; grid-template-columns: 20rem calc(100% - 20rem);}

/* left menu */
#left-menu {width: 20rem; height: calc(100vh - 7.2rem); position: fixed; left: 0; z-index: 999; transition-duration: .25s;}
#left-menu > ul {width: 100%; height: 100%; background-color: var(--red800); overflow-y: auto; display: flex; flex-flow: column; align-items: center;}
#left-menu > ul > li {width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .12); display: flex; flex-flow: column; align-items: center; cursor: pointer;}
#left-menu > ul > li > a {width: 100%; height: 4.8rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.6rem; font-size: 1.2rem; font-weight: 500; color: var(--white);}
#left-menu > ul > li.on > a > i {background-image: url(../img/icon/ic-arrow-up-16.svg);}

#left-menu .sub-menu {width: 100%; padding: 1.8rem 2rem; display: flex; flex-flow: column; row-gap: 1.8rem; background-color: var(--red900);}
#left-menu .sub-menu > li > a {font-size: 1.2rem; font-weight: 600; color: var(--white); cursor: pointer;}

@media screen and (max-width: 480px) {
    #left-menu {left: -20rem;}
    #left-menu.open {left: 0;}
}

/* contents */
#contents,
#home_contents {min-width: 120rem; width: calc(100vw - 20rem); margin-left: 20rem; padding: 4.8rem;}

@media screen and (max-width: 480px) {
    #contents,
    #home_contents {margin-left: 0; padding: 2.4rem 1.2rem;}
}

/* popup */
#pop,
#verticalPop,
#horizontalPop {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 1000;}

.pop-wrap {background-color: var(--white); padding: 2.4rem; width: fit-content!important; max-width: calc(100vw - 8rem); max-height: 70vh; overflow-y: auto;}
.pop-wrap.pop-scroll .pop-cont {height: 70vh; overflow-y: auto;}
.pop-wrap .pop-title {padding-bottom: 2.4rem; display: flex; align-items: center; justify-content: center; column-gap: 1rem;}
.pop-wrap .pop-title h6 {font-weight: 700; font-size: 2rem;}
.pop-wrap .pop-title button {width: 1rem; height: 2.8rem; font-size: 1.2rem;}
.pop-wrap .pop-cont {position: relative;}

.pop-wrap .pop-cont .pop-btn {padding-top: 3.2rem; display: flex; align-items: center; justify-content: center; column-gap: .8rem;}
.pop-wrap .pop-cont .pop-btn > button {width: 100%; height: 4.8rem; font-size: 1.6rem;}
.pop-wrap .pop-cont .pop-btn > button:nth-child(1):nth-last-child(2), .pop-wrap .pop-cont .pop-btn > button:nth-child(1):nth-last-child(2) ~ button {width: calc((100% - .8rem) / 2);}

.pop-wrap .pop-cont table + table {margin-top: 1.6rem;}
.pop-wrap .pop-cont table {border-right: 0.063rem solid #eeeff2;}
.pop-wrap .pop-cont table th {border-left: 0.063rem solid #fff; padding: .5rem;}
.pop-wrap .pop-cont table th {border-top-color: #eeeff2;}
.pop-wrap .pop-cont table td {border-left: 0.063rem solid #eeeff2; padding: .5rem;}
.pop-wrap .pop-cont input {text-align: center; width: 100%;}
.pop-wrap .pop-cont .thumbnail {width: 32rem;}
.pop-wrap .pop-cont .desc {font-size: .75rem; padding: 1.6rem 0 .5rem; text-align: right;}

/* error */
#error {width: 100%; height: 100%;}
.error-wrap {width: 36rem; display: flex; flex-flow: column; align-items: center; justify-content: 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%);}
.error-wrap > div {font-size: 8rem; font-weight: 900; color: var(--red800);}
.error-wrap > h4 {margin-top: 2.4rem; font-size: 2rem; font-weight: 500;}
.error-wrap > p {margin-top: 1.2rem; font-size: 1.4rem; line-height: 1.6; text-align: center;}
.error-wrap > button {margin-top: 4rem; height: 4.8rem; font-size: 1.6rem;}

/* label pop */
.sticker-label {background-color: #fff; position: relative; width: 304px; height: 450px; border: .063rem solid #d0d0d0; margin: 0 auto; padding: 1.6rem; -webkit-print-color-adjust:exact; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5);}
.sticker-label > img {height: 1.5rem;}
.sticker-label > h4 {font-size: 2rem; font-weight: 800; margin-top: .25rem;}
.sticker-label .price {font-size: 2rem; font-weight: 700; margin-top: 1.6rem;}
.sticker-label > ul {margin-top: 1.6rem;}
.sticker-label > ul > li {display: flex; align-items: center; line-height: 1.4; font-weight: 500; font-size: .875rem;}
.sticker-label > ul > li > span:nth-child(1) {width: 6rem;}
.sticker-label > ul > li > span:nth-child(2) {width: calc(100% - 6rem);}
.sticker-label .barcode {position: absolute; bottom: 1.625rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 100%; height: 4.2rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.sticker-label .barcode > span {display: block; font-size: .75rem; font-weight: 700; width: fit-content; margin: 0 auto; position: absolute; bottom: -.75rem;  left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); text-align: center;}

.sticker-label-hori {background-color: #fff; position: relative; width: 450px; height: 304px; border: .063rem solid #d0d0d0; margin: 0 auto; padding: 1.6rem; -webkit-print-color-adjust:exact; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5);}
.sticker-label-hori > img {height: 1.5rem;}
.sticker-label-hori .title {display: flex; align-items: center; margin-top: .25rem;}
.sticker-label-hori .title > h4 {font-size: 2rem; font-weight: 800;}
.sticker-label-hori .title > div {font-size: 2rem; font-weight: 700; margin-left: .5rem;}
.sticker-label-hori > ul {margin-top: .5rem;}
.sticker-label-hori > ul > li {display: flex; align-items: center; line-height: 1.4; font-weight: 500; font-size: .875rem;}
.sticker-label-hori > ul > li > span:nth-child(1) {width: 6rem;}
.sticker-label-hori > ul > li > span:nth-child(2) {width: calc(100% - 6rem);}
.sticker-label-hori .barcode {position: absolute; bottom: 1.625rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 100%; height: 4.2rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.sticker-label-hori .barcode > span {display: block; font-size: .75rem; font-weight: 700; width: fit-content; margin: 0 auto; position: absolute; bottom: -.75rem;  left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); text-align: center;}

.care-label {display: grid; grid-template-rows: repeat(2, 450px); background-color: #fff; position: relative; top: -6.875rem; width: 304px; height: 450px; margin: 0 auto; -webkit-print-color-adjust:exact; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5);}
.care-label > div {border: .063rem solid #d0d0d0; padding: 1.6rem;}
.care-label > div > img {height: 3.2rem; margin-top: 1.6rem;}
.care-label > div > img + p {margin-top: .875rem;}
.care-label > div > p {font-size: .875rem; line-height: 1.2; font-weight: 500;}
.care-label > div > h6 {font-size: 1.8rem; font-weight: 700; line-height: 1.2; margin-top: 1.6rem;}
.care-label > div > ul {margin-top: 1.6rem;}
.care-label > div > ul > li {display: flex; align-items: center; line-height: 1.4; font-weight: 500; font-size: .875rem;}
.care-label > div > ul > li > span:nth-child(1) {width: 6rem;}
.care-label > div > ul > li > span:nth-child(2) {width: calc(100% - 6rem);}
.care-label > div:nth-child(2) {border-top: 0;}
.care-label > div:nth-child(2) > h6 {margin-top: 0;}
.care-label > div:nth-child(2) > p {margin-top: .5rem; word-break: keep-all;}
.care-label > div:nth-child(2) > img {width: 100%;}

.sticker-label input, .care-label input {text-align: left!important; padding: 0 .25rem; font-weight: 500; font-size: .875rem; vertical-align: middle; height: fit-content; border: .063rem solid #e4e4e4;}

.notify-cont {width: 100%; padding: 6rem 0; background-color: #fff; text-align: center;}
.notify-cont i {width: 3rem; height: 3rem; margin: 0 auto; display: block; background-repeat: no-repeat; background-size: contain; background-position: center;}
.notify-cont i.icon-search {background-image: url(../img/icon-search.svg);}
.notify-cont i.icon-result-no {background-image: url(../img/icon-result-no.svg);}
.notify-cont p {font-size: 1.6rem; font-weight: 500; line-height: 1.8; margin-top: 1.6rem;}
.notify-cont span {font-size: .875rem; margin-top: .625rem; display: block;}


/* loading */
.lds-ellipsis {display: inline-block; position: relative; width: 80px; height: 80px;}
.lds-ellipsis div {position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: #2d3f64; animation-timing-function: cubic-bezier(0, 1, 1, 0);}
.lds-ellipsis div:nth-child(1) {left: 8px; animation: lds-ellipsis1 0.6s infinite;}
.lds-ellipsis div:nth-child(2) {left: 8px; animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(3) {left: 32px; animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(4) {left: 56px; animation: lds-ellipsis3 0.6s infinite;}

@keyframes lds-ellipsis1 {0% {transform: scale(0);} 100% {transform: scale(1);}}
@keyframes lds-ellipsis3 {0% {transform: scale(1);} 100% {transform: scale(0);}}
@keyframes lds-ellipsis2 {0% {transform: translate(0, 0);} 100% {transform: translate(24px, 0);}}

/* event */
.contentsRadioDiv {display:flex; padding:1rem;}
.contentsRadioDiv label {width:150px;}
.contentsCheckDiv {display:flex; padding:1rem; width:50%; justify-content:flex-start; flex-wrap:wrap;}
.contentsCheckDiv label {margin: 0 20px 10px 0}

.borderNone {border:none;}
.lineUp-flex {
    width: 630px;
    height: 26rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
}
.lineUp-div {
    display: grid;
    grid-template-columns: 1fr 4fr;
    align-items: center;
    width: 300px;
    border-radius: 6px;
    border: 1px solid lightgrey;
    margin: 4px;
}
.lineUp-div div:nth-child(2) {border-left:1px solid lightgrey; }
.roulette-table button {
    width: auto;
    min-width: auto;
}
.roulette-table input {
    width: 60%;
    display: initial;
    margin: 0 5px 0 5px;
}
.td-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.td-container button {
    margin: 0;
}
.td-container select {
    margin: 0;
    width: 400px;
}
.note-editor {text-align:left;}

#answerOptionId:disabled { color: black!important;}


/* 24.06.24 */
.ic-drag {width: 20px; height: 20px; margin: 0 auto; background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer; background-image: url(../img/icon/ic-drag.svg);}