@charset "UTF-8"; 

p { 
color: var(--color-gray-dark); 
 } 

*::-webkit-scrollbar { 
 /* width: 20px !important; 
 height: 20px !important; */
 /* border-right: 2px solid transparent; */
 } 
 
/* *::-webkit-scrollbar-track { 
 background-color: transparent; 
 border-right: 2px solid transparent
 } */
 
*::-webkit-scrollbar-thumb { 
 /* box-shadow: inset 0px 0px 10px rgba(100, 100, 100, 0.5); 
 border-right: 2px solid transparent */
 background-color: #a3a3a3; 
 border: 4px solid transparent; 
 border-radius: 2px; 
 } 

/* *::-webkit-scrollbar-thumb:hover { 
background-color: rgba(0,0,0, 0.3); 
 } */
/* *::-webkit-scrollbar-button:single-button { 
display: block; 
 } */

.content-header { 
width: 100%; 
border-bottom: 1px solid var(--color-gray); 
background-color: white; 
flex-direction: column; 
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
flex-wrap: wrap; 
display: block
 } 

/*.content-header.--has-tabs { */
/*padding-bottom: 0 !important; */
/* } */

/*.content-header.--has-tabs .tabs { */
/*border-bottom: 0; */
/*margin-left: -1rem; */
/*margin-top: 0; */
/*margin-right: 0; */
/* } */

.content-header > .tabs { 
margin-left: 0; 
margin-bottom: 0; 
 } 

.content-header:last-child { 
margin-bottom: 1rem !important; 
 } 

.content-header > .head { 
margin-bottom: 5px; 
max-height: 30px; 
height: 30px; 
position: relative; 
z-index: 2; 
 } 

.content-header :only-child { 
margin-bottom: 0 !important; 
 } 

.content-options-wrap { 
overflow-x: auto; 
overflow-y: hidden; 
background: #fff; 
 } 

.content-options { 
display: flex; 
align-items: center; 
width: 100%; 
min-height: 2.5rem; 
justify-content: space-between; 
/* white-space: nowrap; */
border-radius: .25rem .25rem 0 0; 
overflow-x: auto; 
overflow-y: hidden; 
padding: 0 0 0 2px; 
background: #f5f5f5; 
 } 
.content-options-column { 
display: flex; 
flex-direction: column; 
justify-content: space-between; 
border-radius: .25rem .25rem 0 0; 
 } 

.content-options.table { 
background-color: white; 
border: 1px solid var(--color-border); 
padding:.5rem; 
min-height: 35px; 
/* margin-bottom: .5rem; */
 } 

.content-options.table:last-child { 
border-bottom: 1px solid var(--color-border); 
border-radius: .25rem; 
 } 

.content-options.table p,
.modal-footer p { 
color: var(--color-gray-dark); 
font-size: 13px; 
line-height: 1.25
 } 

.content-options.table.align-height { 
min-height: 53px; 
 } 
/* .content-options.table + .box-container,
.content-options.table + .box { 
border-top: 1px solid var(--color-border); 
padding-top: 1rem !important; 
 } */

.content-options.table + .content-options.table { 
margin-top: 0 !important; 
padding-top: 0.25rem !important; 
border-radius: 0; 
 } 

.expandable-table { 
background-color: white; 
border: 1px solid var(--color-border); 
overflow: hidden; 
border-radius: .25rem; 
 } 

.expandable-table .title { 
font-weight: 700; 
font-size: 1rem; 
padding: .5rem; 
display: flex; 
flex-direction: column; 
height: 53px; 
justify-content: center; 
background: url('/common/images/glyphs/glyph-chevron-down.svg')
no-repeat right 1rem center; 
background-size: 16px 16px; 
 } 

.expandable-table .checkbox { 
display: none; 
 } 

.expandable-table .checkbox + .title + .table-wrapper { 
border-bottom: 0; 
 } 
.expandable-table .table-wrapper { 
max-height: 0; 
 overflow: hidden; 
 border-radius: 0; 
 } 
.expandable-table .checkbox:checked + .title + .table-wrapper { 
max-height: 1000px; 
 } 

.expandable-table .checkbox:checked ~ .title { 
background: url('/common/images/glyphs/glyph-chevron-up.svg')
no-repeat right 1rem center; 
background-size: 16px 16px; 
 } 

.content-options.table:only-child { 
border-bottom: 1px solid var(--color-border) !important; 
 } 

.content-options.table + * { 
border-top: 0; 
padding-top: 0 !important; 
border-radius: 0 0 .25rem .25rem
 } 

.content-options.table h3 { 
color: #57575D; 
font-size: 15px; 
margin-right: 2rem; 
white-space: nowrap; 
 } 

/* .content-options + .content-options { 
margin-top: .25rem !important; 
 } */

.option-group { 
display: flex; 
align-items: center; 
/* margin: 0 -.75rem; */
min-height: 30px; 
 } 
.option-group:last-of-type { 
margin-right: 0; 
 } 

/* 媛꾧꺽 吏��젙 */
.option-group > * { 
padding: 0 .5rem; 
 } 
/* .option-group:first-of-type > *:first-child { 
padding-left: 0; 
 }  */
.option-group:first-of-type > *:first-child[style='display: none; '] + * { 
padding-left: 0; 
 } 
.option-group:last-of-type > *:last-child { 
/* padding-right: 0;  */
 } 

.option-group > .option { 
display: flex; 
align-items: center; 
 } 
/* .option-group:last-of-type > .option:last-child { 
padding-right: 0; 
 }  */

/* .option-group > .option > .label { 
margin-right: 0; 
 }  */
/* 라벨에 메모 있는 경우 추가 - 240626 */
.label.has-memo > i { 
content: ""; 
display: inline-block; 
width: 18px; 
margin: 0 0 0 2px; 
height: 18px; 
background: url('/common/images/glyphs/glyph-label-memo.svg') no-repeat center / contain; 
vertical-align: sub; 
 } 

.option-group > .option > * + * { 
margin-left: .5rem; 
 } 

.content-options-wrap .option .width-full { 
min-width: 100px; 
 } 
.content-options-wrap .option-group:first-child > .option:first-of-type > .label { 
min-width: 52px; 
 } 

.content-options-wrap.content-options .option > .label { 
min-width: 0; 
flex-shrink: 0; 
 } 
.content-options-wrap.content-options .option-group:first-child > .option:first-of-type > .label { 
min-width: 0; 
 } 

.head + .content-options-wrap .option-group:first-child > .option { 
margin: 0 4px 0 0; 
 } 
.head + .content-options-wrap .option-group:first-child > .option:last-child { 
margin-right: 0; 
 } 
.head + form .content-options-wrap .option-group:first-child > .option { 
margin: 0 4px 0 0; 
 } 
.head + form .content-options-wrap .option-group:first-child > .option:last-child { 
margin-right: 0; 
 } 

input[type="text"]:disabled,
input[type="text"]:read-only,
button:disabled,
input[type="checkbox"]:disabled ~ .slider { 
background-color: #e8e8e8; 
color: rgba(88, 88, 92, 0.6); 
border: 0; 
 } 

input[type="checkbox"]:checked:disabled ~ .slider { 
background-color: #209b5c85; 
color: #fff; 
border: 0; 
 } 

input[type="checkbox"]:disabled ~ .slider::before { 
border: 0; 
bottom: 2px; 
 } 

input.center { 
text-align: center; 
 } 

input { 
/*border: 1px solid #B2B2B2 !important; */
color: black; 
 } 

input::placeholder,
input::-webkit-input-placeholder { 
color: var(--color-gray-300); 
font-size: 13px; 
margin: 0; 
padding: 0; 
 } 

:-ms-input-placeholder { 
color: #B2B2B2; 
 } 

.search-bar button { 
width: 30px; 
height: 30px; 
margin-left: -1px; 
padding: 0; 
 } 

.table-options { 
background-color: white; 
border: 1px solid #B2B2B2; 
padding: .5rem; 
display: flex; 
align-items: center; 
 } 

.content-container { 
flex-grow: 1; 
display: flex; 
flex-direction: column; 
width: 100%; 
height: 100%; 
padding: .5rem;
overflow: hidden; 
position: relative; 
 } 

.table-wrapper { 
flex-grow: 1; 
/* border: 1px solid var(--color-gray); */
border-bottom: 1px solid var(--color-border); 
background-color: white; 
border-radius: .25rem; 
 } 

.table-footer { 
display: flex; 
align-items: center; 
background-color: white; 
width: 100%; 
justify-content: space-between; 
white-space: nowrap; 
border-radius: 0 0 .25rem .25rem; 
border: 1px solid var(--color-border); 
border-top: 0; 
padding: .5rem; 
 } 

.tables-x { 
/*margin-left: -.25rem; */
/*margin-right: -.25rem; */
display: flex; 
height: 100%; 
overflow: hidden
 } 

/* .tables-x > * { 
padding-left: .25rem; 
padding-right: .25rem; 
 } */

.tables-y { 
/* margin-top: -.5rem; */
display: flex; 
flex-direction: column; 
height: 100%; 
overflow-y: auto; 
overflow-x: hidden; 
justify-content: space-between;
 } 

/* .tables-y > *:not(:last-child) { 
margin-bottom: .5rem; 
 } */

.export-sidebar-container { 
display: flex; 
flex-direction: column; 
width: 19rem; 
/* min-width: 19rem; */
overflow: hidden; 
 } 

.export-sidebar { 
display: flex; 
flex-direction: column; 
border: 1px solid var(--color-border); 
background-color: white; 
padding: .5rem; 
flex: 1; 
min-height: 1px; 
 } 

.export-sidebar > *:not(:last-child) { 
margin-bottom: .5rem !important; 
 } 

.export-sidebar .options-container { 
display: flex; 
flex-direction: column; 
margin-top: -.25rem; 
margin-bottom: .25rem; 
 } 

.export-sidebar .options-container > .option > .option-row { 
display: flex; 
 } 

.export-sidebar .options-container > .option > .option-row > * + * { 
margin-left: .425rem; 
 } 

.export-sidebar .options-container > .option > * + * { 
margin-top: .25rem; 
 } 

.export-sidebar .options-container > * { 
padding-top: .25rem; 
padding-bottom: .25rem; 
 } 

.export-sidebar .options-container input { 
width: 100%; 
 } 

button.apply { 
min-height: 2.5rem; 
border: 0; 
background-color: var(--color-primary); 
color: white; 
font-weight: 700; 
 } 

.content-options.table { 
margin: 0; 
border-bottom: 0; 
 } 

.table-take-rest { 
flex: 1; 
 } 

.asterisk { 
min-width: .5em; 
min-height: .5em; 
position: relative; 
margin: 0 .75em 0 0; 
 } 

.asterisk.right { 
margin-right: 0; 
margin-left: .25em; 
 } 

.asterisk.v-center:after { 
transform: translateY(-50%); 
top: 50%; 
 } 

.asterisk:after { 
position: absolute; 
border-radius: 50%; 
width: 4px; 
height: 4px; 
content:''; 
background-color: red; 
top: 15%; 
transform: translateY(-15%); 
 } 

label.saturday { 
color: #0E4AED; 
 } 

label.sunday { 
color: #ED0E53; 
 } 

.tables-y.basic { 
height: inherit; 
overflow: inherit; 
 } 

.tables-y.basic { 
/*IE11 �젣�쇅 �냽�꽦*/
height: unset; 
overflow: unset; 
 } 

.table { background-color: #ffffff; } 
.table:not(.content-options) { 
display: flex; 
flex-direction: column; 
/* fix height width resize problem */
min-height: 1px; 
min-width: 1px; 
z-index: 99; 
 } 

.modal-sidebar-content.--fix-scroll { 
height: 100%; 
overflow: hidden; 
overflow-y: auto; 
display: block; 
 } 
.accordion { 
/* overflow: hidden; 
overflow-y: auto; 
height: 100%; */
 } 
.accordion-item { 
display: block; 
border-bottom: 1px solid var(--color-border); 
overflow: hidden; 
 } 
.app-present__block.app-present__block--selected .accordion-item { 
display: block; 
border-bottom: 1px solid var(--color-border); 
overflow: hidden; 
 } 

.accordion-item .accordion-label { 
display: inline-block; 
padding: 1rem 1.5rem 1rem .5rem; 
cursor: pointer; 
font-weight: 700; 
width: 100%; 
white-space: nowrap; 
position: relative; 
 } 

.accordion-item .accordion-label::before { 
position: absolute; 
content:''; 
width: 100%; 
height: 100%; 
top: 0; 
left: 0; 
z-index: 2; 
background-image: url('/common/images/glyphs/glyph-chevron-down.svg'); 
background-size: 1rem 1rem; 
background-position: right 1rem center; 
background-repeat: no-repeat; 
 } 


.accordion-item > .app-present__title { 
display: inline-block; 
padding: 1rem 1.5rem 1rem .5rem; 
cursor: pointer; 
font-weight: 400; 
width: 100%; 
white-space: nowrap; 
position: relative; 
 } 
.app-present__block.app-present__block--selected .accordion-item > .app-present__title { 
font-weight: 700; 
 } 

.accordion-item > .app-present__title::before { 
position: absolute; 
content:''; 
width: 100%; 
height: 100%; 
top: 0; 
left: 0; 
z-index: 2; 
background-image: url('/common/images/glyphs/glyph-chevron-down.svg'); 
background-size: 1rem 1rem; 
background-position: right 1rem center; 
background-repeat: no-repeat; 
 } 
.app-present__block.app-present__block--selected .accordion-item > .app-present__title::before { 
transform:rotate(180deg); 
background-position:left 1rem center; 
 } 
.accordion-item .accordion-content { 
max-height: 0; 
overflow: hidden; 
/* transition: all .2s linear; */
 } 
.accordion-item .accordion-content .app-present__block.active { 
color:#fff; 
font-weight:bold; 
background:var(--color-primary); 
 } 

.accordion-item input:checked ~ .accordion-label { 
font-size: .75rem; 
border-bottom: 1px solid var(--color-primary); 
 } 

.accordion-item input:checked ~ .accordion-label::before { 
transform: rotate(180deg); 
background-position: left 1rem bottom 1rem; 
 } 

.accordion-item input:checked ~ .accordion-content { 
display: flex; 
flex-direction: column; 
position: relative; 
 max-height: 300px; 
 padding: .5rem; 
border-bottom: 1px solid var(--color-border); 
background-color: rgb(244, 247, 249); 
 } 
.app-present__block.app-present__block--selected .accordion-content { 
display: flex; 
flex-direction: column; 
position: relative; 
 max-height: 300px; 
 padding: .5rem; 
border-bottom: 1px solid var(--color-border); 
background-color: rgb(244, 247, 249); 
 } 
.accordion-content .app-present__title { 
font-weight:400; 
 } 

.accordion-item .accordion-content .table-wrapper { 
display: none; 
 } 

.accordion-item input:checked ~ .accordion-content.size__small { 
max-height: 150px; 
 } 
.app-present__block.app-present__block--selected .accordion-content.size__small { 
max-height: 150px; 
 } 

.accordion-item input:checked ~ .accordion-content.size__mid { 
max-height: 300px; 
 } 
.app-present__block.app-present__block--selected .accordion-content.size__mid { 
max-height: 300px; 
 } 

.accordion-item input:checked ~ .accordion-content.size__large { 
max-height: 450px; 
height: 450px; 
 } 

.accordion-item input:checked ~ .accordion-content.size__xlarge { 
max-height: 600px; 
 } 

.accordion-item input:checked ~ .accordion-content.size__xxlarge { 
max-height: 980px; 
 } 

.accordion-item input:checked ~ .accordion-content .table-wrapper { 
border-bottom: 0 !important; 
display: block !important; 
height: 300px !important; 
 } 

.accordion-item input:checked ~ .accordion-content .content-options { 
padding-left: 0; 
padding-right: 0; 
 } 

.accordion-box[type=checkbox] { 
padding: 0; 
 } 

.accordion-item > input { 
position: absolute; 
opacity: 0; 
z-index: -10; 
 } 

.tab_wrap { 
width: 100% !important; 
min-height: 64px; 
overflow: hidden; 
padding: 0 15px; 
padding-bottom: 1rem; 
position: relative; 
margin-bottom: 10px; 
 } 
.tab_wrap .ui-resizable-s { 
bottom: 5px !important; 
 } 
.tab_wrap .ui-icon-gripsmall-diagonal-se { 
display: none !important; 
 } 
.tab_wrap .ui-resizable-s:before { 
content:''; 
display: block; 
width: 100%; 
height: 4px; 
position: absolute; 
top: 50%; 
left: 0%; 
transform: translateY(-50%); 
background: rgb(16, 185, 129)
 } 
.tab_wrap .ui-resizable-s:after { 
content:''; 
display: block; 
width: 10px; 
height: 16px; 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
background: url(/common/images/glyphs/glyph-resize.svg); 
 } 
.tab_wrap .ui-resizable-e { 
display: none !important; 
 } 
.tab_menu { 
display: flex; 
align-items: center; 
justify-content: space-between; 
background: #ffffff; 
 } 
.tab_menu > li { 
height: 35px; 
line-height: 35px; 
font-size: 14px; 
text-align: center; 
color: #6D7986; 
border-bottom: 1px solid #ddd; 
cursor: pointer; 
 } 
.tab_menu > li.list__active { 
font-weight: bold; 
color: #000; 
border-bottom: 3px solid #e64d2c; 
 } 
.tab_menu.part2 { 
border: 1px solid #ddd; 
border-radius: 4px; 
margin-top: .425rem; 
overflow: hidden; 
 } 
.tab_menu.part2 > li { 
height: 20px; 
line-height: 20px; 
border-bottom: none; 
font-size: .875rem
 } 
.tab_menu.part2 > li + li { 
border-left: 1px solid #ddd; 
 } 
.tab_menu.part2 > li.list__active { 
color: #fff; 
background: var(--color-primary); 
 } 
.tab_list > li { 
display: flex; 
flex-direction: column; 
margin-top: .3rem
 } 

.md .image-thumbnail { 
height:11.5rem; 
 } 

.sidebar-container { 
position: relative; 
width: 20rem; 
height: 100%; 
padding: 1rem; 
border-right: 1px solid #CCCCCC; 
background-color: white
 } 

.filters { 
position: relative; 
width: 100%; 
margin-left: -.5rem
 } 

.filters .filter { 
display: flex; 
width: 100%; 
justify-content: space-between; 
align-items: center; 
margin-left: .5rem; 
padding: .25rem 0; 
border-radius: .25rem; 
padding-left: .5rem; 
 } 

.filters .filter .checkbox-container { 
width: 100%; 
justify-content: flex-end; 
 } 

.filters .filter:hover { 
background-color: var(--color-gray-50); 
 } 

.filters .checkbox-container #chkFilter1:checked ~ .checkmark { 
background-color: var(--color-primary-dark); 
 } 

.filters .checkbox-container #chkFilter2:checked ~ .checkmark { 
background-color: #ff5d06; 
 } 

.filters .checkbox-container #chkFilter3:checked ~ .checkmark { 
background-color: #265cdf; 
 } 

.filters .checkbox-container #chkFilter4:checked ~ .checkmark { 
background-color: #13b639; 
 } 

.filters .checkbox-container #chkFilter5:checked ~ .checkmark { 
background-color: #A106FF; 
 } 

.filters .checkbox-container #chkFilter6:checked ~ .checkmark { 
background-color: #E61C40; 
 } 

.calendar { 
width: 100%; 
height: 100%; 
background-color: white; 
display: flex; 
flex-direction: column; 
overflow: hidden; 
font-size: 14px; 
 } 

.calendar .calendar-header { 
width: 100%; 
 } 

.calendar .calendar-header .head { 
text-align: center; 
display: flex; 
padding: .3rem; 
justify-content: space-between; 
width: 100%; 
position: relative; 
height: 50px; 
 } 

.calendar .calendar-header .head .year-month { 
display: inline-flex; 
 justify-content: center; 
 align-items: center; 
 font-size: 1.5rem; 
 font-weight: 500; 
 width: calc(100% - 2rem); 
 position: absolute; 
 margin: 0 auto; 
 } 

.calendar .calendar-header .week { 
border-bottom: 1px solid var(--color-border); 
width: 100%; 
display: inline-flex; 
 } 

.calendar .calendar-header .week .day { 
flex: 1; 
text-align: center; 
font-weight: 500; 
padding: .25rem; 
 } 

.calendar-dates { 
display: flex; 
flex-direction: column; 
flex: 1; 
overflow: hidden; 
 } 

.calendar-dates .calendar-row { 
display: flex; 
border-bottom: 1px solid var(--color-border); 
flex: 1; 
 } 

.calendar-dates .calendar-row > .date { 
flex: 1; 
border-right: 1px solid var(--color-border); 
padding: .3rem; 
display: flex; 
flex-direction: column; 
overflow: hidden; 
position: relative; 
font-size: 14px; 
 } 

.calendar-dates .calendar-row > .date.rest-day { 
background-color: rgba(255, 0, 0, .05); 
color: red; 
 } 

.calendar-dates .calendar-row > .date.selected { 
background-color: rgba(45, 191, 118, 0.10); 
 } 

.calendar-dates .calendar-row > .date.disabled { 
background-color: #EDEDED; 
border-color: #DEDEDE; 
color: #555555; 
cursor: not-allowed; 
 } 

.calendar-dates .calendar-row > .date.disabled:hover::after { 
border-color: transparent; 
 } 

/* .calendar-dates .calendar-row > .date:hover::after,
.calendar-dates .calendar-row > .date.selected::after { 
position: absolute; 
z-index: 2; 
top: 0; 
left: 0; 
content: ''; 
width: 100%; 
height: 100%; 
flex: 1; 
border: 1px solid var(--color-primary); 
 } 
 */
.calendar-dates .calendar-row > .date.selected::after { 
border-color: white; 
 } 

.calendar-dates .calendar-row > .date > .date-title { 
width: 100%; 
overflow: hidden; 
display: flex; 
margin-bottom: .5rem; 
justify-content: space-between; 
 } 

.calendar-dates .calendar-row > .date > .date-title .day { 
color: var(--color-gray-700); 
margin-right: .25rem; 
font-size: calc(1em - 1px); 
 } 

.calendar-dates .calendar-row > .date > .date-title .date-info { 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 
display: flex; 
 } 

.calendar-dates .calendar-row > .date > .date-title .date-info .day { 
color: var(--color-gray-500); 
font-size: calc(1em - 1px); 
 } 

.calendar-dates .calendar-row > .date > .date-title .holiday { 
color: red; 
white-space: nowrap; 
 } 

.calendar-dates .calendar-row > .date > .date-status { 
display: grid; 
grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); 
grid-gap: .25rem; 
margin-bottom: .2rem; 
justify-items: start; 
margin-left: -.75rem; 
 } 

.calendar-dates .calendar-row > .date > .date-status .status { 
padding: .25rem .5rem .25rem.75rem; 
border-radius: 1rem; 
white-space: nowrap; 
font-size: calc(1em - 1px); 
font-weight: 500; 
position: relative; 
overflow: hidden; 
text-overflow: ellipsis; 
cursor: pointer; 
color: var(--color-gray-700); 
display: inline-flex; 
align-items: center; 
 } 

.calendar-dates .calendar-row > .date > .date-status .status:hover { 
background-color: var(--color-cool-gray-100); 
 } 

.calendar-dates .calendar-row > .date > .date-status .status::before { 
position: relative; 
content: ''; 
height: .5rem; 
width: .5rem; 
border-radius: .5rem; 
margin-right: .25rem; 
flex: 0 0 auto; 
 } 

.calendar-dates .calendar-row > .date > .date-status .status.festival::before { 
background-color: #265cdf; 
 } 

.calendar-dates .calendar-row > .date > .date-status .status.event::before { 
background-color: #13b639; 
 } 

.calendar-dates .calendar-row > .date > .date-status .status.vacation::before { 
background-color: #ff5d06; 
 } 

.calendar-dates .calendar-row > .date > .date-status .status.purchase::before { 
background-color: #A106FF; 
 } 

.calendar-dates .calendar-row > .date > .date-status .status.ended::before { 
background-color: #E61C40; 
 } 

.calendar-dates .calendar-row > .date > .date-events .event { 
position: relative; 
line-height: 1.75rem; 
padding-left: .5rem; 
font-size: 13px; 
background-color: #13b639; 
border-radius: .25rem; 
color: white; 
margin-bottom: 2px; 
font-weight: 500; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
cursor:pointer; 
 } 

.calendar-dates .calendar-row > .date > .date-events .event.festival { 
background-color: #265cdf; 
 } 

.calendar-dates .calendar-row > .date > .date-events { 
margin-top: auto; 
 } 

.calendar-dates .calendar-row > .date > .date-sales { 
margin-top: auto; 
text-align: left; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
display: flex; 
flex-direction: column; 
border-radius: .25rem; 
 } 

.calendar-dates .calendar-row > .date .date-unit { 
color: var(--color-cool-gray-700); 
font-weight: 500; 
margin-right: .25rem; 
 } 

.calendar-dates .calendar-row > .date .date-data { 
display: inline-flex; 
line-height: 1.25; 
align-items: center; 
justify-content: flex-end; 
 } 

.calendar-dates .calendar-row > .date .date-data + .date-data { 
margin-top: .25rem; 
 } 

.calendar-dates .calendar-row > .date .date-price { 
display: inline-block; 
width: 12ch; 
flex: 0 0 auto; 
text-align: right; 
 } 

.calendar-dates .calendar-row > .date .date-unit + .calendar-dates .calendar-row > .date .date-unit { 
margin-top: .25rem; 
 } 

.calendar-dates .calendar-row > .date > .date-sales img { 
bottom: -3px; 
position: relative; 
width: 16px; 
margin-right: .25rem; 
 } 

.button-popup-container { 
border: 1px solid var(--color-border); 
position: absolute; 
background-color: white; 
box-shadow: 3px 3px 3px rgba(0,0,0, .05); 
display: block; 
z-index: 3; 
transition: all 0.2s linear; 
padding: .5rem; 
border-radius: .25rem
 } 

.button-popup-container.hidden { 
display: none; 
 } 

.button-popup-container .popup-list { 

 } 

.button-popup-container .popup-list .item { 
line-height: 2.5rem; 
margin: 0 1rem 0 .5rem; 
 } 

.button-popup-container .popup-list .item + .item { 
/* border-top: 1px solid #DDD; */
 } 

.coupon-preview.hidden { 
transform: scale(0); 
opacity: 0; 
transition: all 0.2s linear; 
z-index: 3; 
 } 

.coupon-preview { 
position: absolute; 
background-color: white; 
display: flex; 
flex-direction: column; 
z-index: 3; 
transform: scale(1); 
border-radius: .25rem; 
box-shadow: var(--box-shadow-button); 
opacity: 1; 
transition: all 0.2s linear; 
 } 

.coupon-preview .barcode { 
display: flex; 
flex-direction: column; 
align-items: center; 
margin-bottom: .5rem; 
 } 

.coupon-preview .coupon-header { 
font-size: 1.25rem; 
margin: 1rem 0; 
text-align: center; 
 } 

.coupon-preview ul { 
margin-bottom: 1rem; 
font-size: 1rem; 
 } 

.coupon-preview .message { 
padding: 1rem; 
max-width: 30ch; 
 } 

.coupon-preview .barcode img { 
max-width: 150px; 
 } 

.coupon-table { 
height: 100%; 
background-color: white; 
border: 1px solid #CCC; 
padding: 1rem; 
 } 

.coupon-table tr td { 
padding-left: .5rem; 
 } 

.coupon-table tr:nth-child(even) { 

 } 

.coupon-table tr td:first-child { 
padding-right: .5rem; 
max-width: 80px; 
width: 80px; 
font-weight: 500; 
background-color: rgba(0, 0, 5, 0.03); 
text-align: center; 
 } 

.coupon-table, .coupon-table tr, .coupon-table td { 
border-collapse: collapse; 
border: 1px solid #CCC; 
 } 

input[data-validate-ymd],
input[data-validate-hm],
input[data-validate-from],
input[data-validate-to],
input[data-validate-fromto] { 
width: 12ch; 
text-align: center; 
 } 

input[data-validate-ymd] + button,
input[data-validate-hm] + button,
input[data-validate-from] + button,
input[data-validate-to] + button,
input[data-validate-fromto] + button,
input[data-validate-fromto] + button + span + input + button { 
margin-left: calc(-.25rem - 1px) !important; 
border-left: 0; 
border-color: #DEDEDE; 
border-top-left-radius: 0 !important; 
border-bottom-left-radius: 0 !important; 
 } 

input[data-validate-fromto] + button + span + input { 
width: 12ch; 
 } 

.unit.no-border { 
margin-right: 0 !important; 
 } 

.unit.no-border + * { 
margin-left: 0 !important; 
 } 


.coupon-preview-container { 
position: absolute; 
display: flex; 
flex-direction: column; 
align-items: center; 
justify-content: center; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background-color: rgba(0, 0, 0, 0.5); 

 } 

.coupon-preview .coupon-header { 
font-size: 1.25rem; 
margin: 1rem 0; 
 } 

.coupon-preview ul { 
margin-bottom: 1rem; 
font-size: 1rem; 
line-height: 1.5
 } 

.coupon-preview .message { 
padding: 1rem; 
max-width: 30ch; 
 } 

.coupon-preview .barcode img { 
max-width: 150px; 
 } 


input[type="checkbox"]:disabled ~ .checkmark { 
background-color: #EDEDED !important; 
 border-color: #DEDEDE !important; 
 color: #555555 !important; 
 cursor: not-allowed !important; 
 } 

.overflow-gradient { 
position: absolute; 
z-index: 2; 
right: 0; 
display: flex; 
align-items: center; 
justify-content: center; 
height: 2rem; 
width: 4rem; 
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white); 
 } 

.overflow-slider-cta { 
width: 1.5rem; 
height: 1.5rem; 
background-color: white; 
border-radius: .75rem; 
border: 1px solid #CCC; 
background-image: url('/common/images/glyphs/glyph-arrow-right.svg'); 
background-position: center center; 
background-repeat: no-repeat; 
background-size: 12px 12px; 
cursor: pointer; 
 } 

span.label.char1,
label.char1 { 
min-width: 2ch !important; 
 } 

span.label.char2,
label.char2 { 
min-width: 4ch !important; 
 } 

span.label.char3,
label.char3 { 
min-width: 6ch !important; 
 } 

span.label.char4,
label.char4 { 
display: inline-block; 
min-width: 8ch !important; 
 } 

span.label.char5-1,
label.char5-1 { 
display: inline-block; 
min-width: 9ch !important; 
 } 

span.label.char5,
label.char5 { 
display: inline-block; 
min-width: 10ch !important; 
 } 

span.label.char6,
label.char6 { 
display: inline-block; 
min-width: 12ch !important; 
 } 

span.label.char7,
label.char7 { 
min-width: 14ch !important; 
 } 

span.label.char8,
label.char8 { 
min-width: 16ch !important; 
 } 
span.label.char10,
label.char10 { 
width: 19ch !important; 

 } 

span.label.unset,
label.unset { 
min-width: unset; 
 } 

input[type="text"].date { 
width: 12ch; 
text-align: center; 
border-top-right-radius: 0 !important; 
border-bottom-right-radius: 0 !important; 
 } 

input[type="text"].date-time { 
width: 18ch; 
text-align: center; 
 } 

input[type="text"].name { 
width: 10ch; 
 } 

input[type="text"].phone-number { 
width: 14ch; 
 } 

input[type="text"].price,
input[type="password"].price { 
width: 12ch; 
border-top-right-radius: 0 !important; 
border-bottom-right-radius: 0 !important; 
 } 

input[type="text"].zipcode { 
width: 8ch; 
text-align: center; 
border-top-right-radius: 0 !important; 
border-bottom-right-radius: 0 !important; 
 } 

input[type="text"].points { 
width: 10ch; 
border-top-right-radius: 0 !important; 
border-bottom-right-radius: 0 !important; 
 } 

input[type="text"].percent,
input[type="password"].percent { 
width: 6ch; 
border-top-right-radius: 0 !important; 
border-bottom-right-radius: 0 !important; 
 } 

input[type="text"]:disabled ~ .unit,
input[type="password"]:disabled ~ .unit { 
background-color: #e8e8e8; 
color: rgba(88, 88, 92, 0.6); 
border: 0; 
 cursor: not-allowed; 
 } 

button.header { 
font-size: .9375rem; 
font-weight: 700; 
height: 30px; 
padding: 0 1rem; 
border: 0; 
color: #646673; 
background: white; 
transition: 0.1s background-color linear; 
box-shadow: var(--box-shadow-button); 
border-radius: 4px; 
 } 

/*@media only screen and (max-width: 600px) { */
/*button.header { */
/*font-size: 0; */
/*height: 40px; */
/*width: 40px; */
/*min-width: 40px !important; */
/*min-height: 40px !important; */
/*padding: 0 !important; */
/* } */

/*button.header i { */
/*margin: 0 !important; */
/* } */

/*.content-options { */
/*overflow-y: auto; */
/*overflow-x: visible; */
/*-ms-overflow-style: none; */
/*scrollbar-width: none; */
/* } */

/*.content-options::-webkit-scrollbar { */
/*display: none; */
/* } */

/*h2 { */
/*white-space: nowrap; */
/* } */
/* } */

button.header:hover { 
background-color: var(--color-primary); 
color: white; 
transition: 0.1s all linear; 
box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 2px 0px,
rgba(220, 225, 230, 0.6) 0px 0px 0px 1px,
rgba(220, 225, 230, 0.2) 0px 2px 4px 0px; 
box-shadow: var(--box-shadow-button-darker); 
 } 

button.header:hover i { 
filter: brightness(0) invert(1); 
 } 

button.header i,
button.action i { 
margin-right: .25rem; 
width: 20px; 
height: 20px; 
 } 

button.action { 
border: 0; 
background-color: #F4F8FE; 
border-radius: .25rem; 
font-weight: 500; 
 } 

button.action-menu { 
border: 0; 
background-color: #E2FEF5; 
border-radius: .25rem; 
font-weight: 500; 
color: #111315; 
font-size: .75rem
 } 

button.action:disabled { 
background-color: #e8e8e8; 
 } 

button.action:disabled:hover,
.action-group__dropdown-cta:disabled:hover { 
background-color: #e8e8e8; 
box-shadow: none; 
font-weight: 400; 
color: rgba(88, 88, 92, 0.6); 
cursor: not-allowed; 
 } 

button.action:hover { 
background-color: #F2F6FB; 
font-weight: 500; 
box-shadow: var(--box-shadow-button); 
transition: all 0.2s linear; 
 } 

button.action * + * { 
margin-left: .25rem
 } 

button.action_none { 
border: none; 
background: none; 
cursor: auto; 
padding-left: 0; 
 } 
.radio-group { 
display: inline-flex; 
align-items: center; 
white-space: nowrap; 
border-radius: .25rem; 
overflow: hidden; 
border: 1px solid var(--color-border); 
/* box-shadow: var(--box-shadow-button); */
 } 
.radio-division { 
border: 0; 
 } 
.radio-group.radio-division > .option input[type="radio"]:checked ~ label { 
background: #fff; 
 color: var(--color-primary); 
 font-weight: 500; 
 box-shadow: none; 
 } 
.radio-group > .option { 
position: relative; 
 } 

.radio-group > .option label { 
position: relative; 
padding: .5rem .75rem; 
/* border: 1px solid #B2B2B2; */
color: #9D9DA4; 
border: 0; 
/* background-color: #F1F5F6; */
 } 

/* .radio-group > .option + .option > label { 
border-left: 0; 
 } */

.radio-group > .option input { 
position: absolute; 
opacity: 0; 
width: 100%; 
height: 100%; 
 } 

.radio-group > .option input:disabled ~ label { 
background-color: var(--color-gray-50); 
cursor: not-allowed; 
 } 


.radio-group > .option + .option { 
border-left: 1px solid var(--color-border); 
/* border-left: 1px solid white; */
 } 

.radio-group > .option input[type="radio"]:checked ~ label { 
background: var(--color-primary); 
 color: white; 
 font-weight: 500; 
 z-index: 1; 
 box-shadow: var(--box-shadow-button-darker); 
 } 

.box-divider { 
width: 100%; 
margin-bottom: 1rem; 
padding-bottom: 1rem; 
border-bottom: 1px solid var(--color-gray-lighter); 
 } 

.box-divider.--vertical { 
width: 1px; 
margin: 1rem; 
border-bottom: 0; 
border-left: 1px solid var(--color-gray-lighter); 
 } 

input[type="text"] + button.square,
input[type="text"] ~ span.day { 
margin-left: -.25rem; 
border-left: 0; 
border-radius: 0 .25rem .25rem 0; 
border-color: #DEDEDE; 
 } 

input[type="text"] + .unit,
input[type="password"] + .unit { 
margin-left: -.25rem !important; 
border-left: 0; 
border-radius: 0 .25rem .25rem 0; 
border-color: #DEDEDE; 
background-color: white; 
z-index: 2; 
position: relative; 
 } 

.bounding-box { 
display: inline-flex; 
border: 1px solid var(--color-border); 
padding: 0 .5rem; 
border-radius: .25rem; 
min-height: 36px; 
white-space: nowrap; 
align-items: center; 
 } 

.bounding-box > :last-child { 
margin-right: 0 !important; 
 } 

.bounding-box * + * { 
margin-left: .25rem; 
 } 

/* *:disabled::after { 
position: absolute; 
content: ''; 
background-color: rgba(255,255,255); 
width: 100%; 
height: 100%; 
top: 0; 
left: 0; 
opacity: .5; 
z-index: 2; 
 } */

*:disabled > img { 
filter: brightness(2.5); 
 } 

.pill.sticker img { 
margin-left: .25rem; 
width: 10px; 
height: 10px; 
 } 

.barcode-group { 
display: block; 
max-width: 8rem; 
 } 

.barcode-group > .barcode-label { 
background-color: var(--color-gray-lighter); 
line-height: 2rem; 
text-align: center; 
width: 100%; 
border-radius: .25rem .25rem 0 0; 
 } 

.barcode-group > .barcodes { 
display: flex; 
max-width: 8rem; 
 } 


.barcode-group input:last-child { 
border-radius: 0 0 .25rem 0; 
 } 

.barcode-group input:first-of-type { 
border-radius: 0 0 .25rem .25rem; 
 } 

.barcode-group input:nth-child(1) { 
border-radius: 0 0 0 .25rem; 
 } 


input.single { 
width: 5rem; 
text-align: center !important; 
 } 

.barcode-group input+input { 
border-left: 0; 
 } 

.--block-scroll { 
display: block; 
overflow-y: auto; 
overflow-x : hidden; 
 } 

.region-table { 
border: 1px solid var(--color-border); 
text-align: center; 
width: 100%; 
 } 

.region-table td { 
border: 1px solid var(--color-border); 
color: 1px solid var(--color-gray); 
cursor: pointer; 
white-space: nowrap; 
 } 
.region-table input[type="checkbox"] { 
position: absolute; 
opacity: 0; 
z-index: -1; 
width: 0; 
height: 0; 
 } 

.region-table input[type="checkbox"]:checked ~ .region-check { 
background-color: var(--color-primary); 
color: white; 
font-weight: 500; 
 } 


.region-table .region-check { 
width: 100%; 
padding: .75rem 0; 
display: inline-block; 
 } 

.region-table td.--selected { 
color: white; 
background-color: var(--color-primary); 
 } 

.region-table td:hover { 
background-color: var(--color-gray-50); 
 } 

.contract-list { 
display: block; 
height: 100%; 
overflow-y: auto; 
overflow-x: hidden; 
 } 

.contract-list .card + .card { 
margin-top: .5rem; 

 } 

.contract-list .card { 
padding: .75rem; 
border-color: var(--color-gray-100); 
border-radius: .25rem; 
cursor: pointer; 
position: relative; 
transition: all 0.2s linear; 
 } 

.contract-list .card * { 
pointer-events: none; 
 } 


.contract-list .card.selected { 
border-color: var(--color-primary); 
transition: all 0.2s linear; 
 } 

.contract-list .card.selected:hover { 
box-shadow: var(--box-shadow-button); 
 } 

.contract-list .card.selected .head .date { 
color: var(--color-gray-500); 
 } 
.contract-list .card:not(.selected):hover::after { 
opacity: 0; 
transition: all 0.2s linear; 
 } 

.contract-list .card:not(.selected)::after { 
position: absolute; 
content: ''; 
width: 100%; 
height: 100%; 
top: 0; 
left: 0; 
background-color: rgba(255, 255, 255, 0.2); 
 } 

.contract-list .card .head { 
display: flex; 
justify-content: space-between; 
align-items: flex-start; 
margin-bottom: .75rem; 
 } 

.contract-list .card .head .date { 
color: var(--color-gray-300); 
 } 

.contract-list .card .head .contract-status { 
display: flex; 
align-items: center; 
flex-direction: column-reverse; 

 } 

.contract-list .card .head .contract-status .status { 
font-size: 12px; 
text-align: center; 
 } 

.contract-list .card .mart-name { 
font-weight: 500; 
color: var(--color-gray-700); 
font-size: 1.25rem; 
margin-bottom: .5rem; 
 } 

.contract-list .card .frenchise-name { 
font-weight: 400; 
color: var(--color-gray-500); 
font-size: 0.875rem; 
 } 

.calendar-popup { 
border: 1px solid #CCC; 
position: absolute; 
border-radius: .5rem; 
top: 100px; 
left: 100px; 
width: 350px; 
background-color: white; 
box-shadow: var(--box-shadow-button-darker); 
padding-bottom: .5rem; 
opacity: 1; 
z-index: 2; 
transition: all 0.2s linear; 
overflow: hidden; 
 } 

.calendar-popup.event { 
width: 768px; 
 } 

.calendar-popup.hidden { 
z-index: -1; 
opacity: 0; 
transition: all 0.2s linear; 
 } 

.calendar-popup .calendar-popup-header { 
width: 100%; 
display: flex; 
justify-content: space-between; 
align-items: center; 
padding: 1rem 1rem 0 1rem; 
 } 

.icon-action { 
width: 2rem; 
height: 2rem; 
display: inline-flex; 
align-items: center; 
justify-content: center; 
cursor: pointer; 
 } 

.icon-action > img { 
width: 1.25rem !important; 
height: 1.25rem !important; 
 } 

.calendar-popup .popup-list { 
display: flex; 
width: 100%; 
margin-bottom: .5rem; 
 } 

.calendar-popup .popup-list .list-glyph { 
width: 2rem; 
height: 2rem; 
margin-left: 1.5rem; 
display: inline-flex; 
align-items: center; 
justify-content: center; 
 } 

.calendar-popup .popup-list .list-content { 
display: flex; 
flex-direction: column; 
justify-content: center; 
margin-left: 1rem; 
 } 

.calendar-popup .popup-list .list-content .list-title { 
font-size: 1.25rem; 
font-weight: 500; 
margin-bottom: .25rem; 
 } 

.calendar-popup .popup-list .list-content .list-subtitle { 
color: #888; 
 } 


.calendar-popup .popup-list .list-glyph .item-indicator { 
width: 1rem; 
height: 1rem; 
border-radius: .5rem; 
 } 

.calendar-popup .popup-list .list-glyph .item-indicator > img { 
height: 20px; 
 } 

.calendar-popup .popup-list .list-glyph .item-indicator.vacation { 
background-color: #0679FF; 
 } 

.calendar-popup .popup-list .list-glyph .item-indicator.event { 
background-color: #1B35B6; 
 } 


ul.vacations-list { 

 } 

ul.vacations-list .vacation-person { 
line-height: 2rem; 
width: 100%; 
 } 

.option-table,
.option-table tr,
.option-table td { 
border: 1px solid #ddd; 
background-color: white; 
 } 

.option-table tr.--bg-gray-50 td { 
background-color: var(--color-gray-50); 
 } 

.option-table tr.--bg-gray-50 td input { 
background-color: transparent; 
 } 

.option-table.--th-left th { 
text-align: left !important; 
 } 

.option-table.--layout-fixed { 
table-layout: fixed; 
 } 

.option-table { 
padding: 1rem; 
border-collapse: collapse; 
overflow-y: auto; 
border-radius: .25rem; 
 } 

.option-table tr td,
.option-table tr th { 
padding: .5rem; 
 } 

.option-table tr { 
border-bottom: 0; 
 } 

.option-table th { 
background-color: rgba(0, 50, 10, .03); 
white-space: nowrap; 
border: 1px solid #ddd; 
 } 

.option-table:not(.--th-specified) tr td:first-child { 
background-color: rgba(0, 50, 10, .03); 
border-right: 0; 
white-space: nowrap; 
 } 

.option-table tr td:nth-child(2) { 
border-left: 0; 
 } 

.option-table tr td.not-first { 
background-color: white !important; 
border-right: 1px solid #ddd !important; 
border-left: 0 !important; 
 } 

.option-table tr.center * { 
text-align: center; 
margin: 0 auto; 
 } 

.option-table tr td input.full-silent-disabled,
.option-table tr td input.full-silent-disabled:hover,
.option-table tr td input.full-silent-disabled:focus { 
border: 0; 
outline: 0; 
cursor: default; 
background: transparent; 
width: 100%; 
height: 100%; 
 } 
.option_wrap { 
display: flex; 
align-items: center; 
border: 1px solid #CCD0D5; 
border-radius: 6px; 
 } 

.red_com,
.red_com span { 
color: #f01246; 
font-size: .75rem !important; 
font-weight: 400; 

 } 

.red_com span { 
margin-left: 10px; 
font-family:'GmarketSansMedium'; 
 } 

.main-disp-width { 
width: 340px; 
 } 

.app-present { 
max-width: 375px; 
max-height: 812px; 
padding: 14% .5rem 40px .5rem; 
border-radius: .25rem; 
background: url('/common/images/iphone-x-frame-black.svg') no-repeat; 
overflow: hidden; 
width: calc(100% - 10%); 
background-size: contain; 
background-position-y: 2.5%; 
display: flex; 
flex-direction: column; 
position: absolute; 
top: 0; 
height: 100%; 
 } 

.app-present__block { 
display: flex; 
flex-direction: column; 
justify-content: center; 
border-radius: .5rem; 
background-color: white; 
border: 1px solid var(--color-gray-300); 
color: var(--color-gray-500); 
cursor: pointer; 
 } 

.app-present__block:not(.app-present__block--disabled):hover { 
border: 1px solid var(--color-primary); 
font-weight: bold; 
 } 

.app-present__block + .app-present__block { 
margin-top: .5rem; 
 } 

.app-present__title { 
text-align: center; 
/* 마우스 우클릭 툴팁 기능도 막히기 때문에 주석 처리 */
/*pointer-events: none; */
 } 

.app-present__block--selected { 
background-color: var(--color-primary); 
font-weight: bold; 
color: white; 
 } 

.app-present__block--disabled { 
border-color: transparent; 
color: var(--color-gray-300); 
height: 3rem; 
cursor: not-allowed; 
 } 

.app-present__block--size-small { 
flex: 1; 
 } 

.app-present__block--size-mid { 
flex: 2; 
 } 

.app-present__block--size-large { 
flex: 3; 
 } 
.app-present__block-has--icon { 
align-items: center; 
 display: flex; 
 flex-direction: row; 
 flex: 1.5; 
 gap: 5px; 
 } 
.app-present__block-has--icon .glyph { 
width: 20px; 
height: 20px; 
 } 
.phone-mockup { 
display: flex; 
flex-direction: column; 
align-items: center; 
justify-content: center; 
overflow: hidden; 
position: relative; 
 } 

.phone-mockup__iphone-x { 
width: 100%; 
min-width: 200px; 
max-width: 431px; 
max-height: 863px; 
position: relative; 
padding-top: 200.0030888211391553%; 
background: url('/common/images/iphone-x-mockup.png') no-repeat; 
background-size: 100% auto; 
 } 

.phone-mockup__img { 
position: absolute; 
z-index: 2; 
width: 100%; 
height: auto; 
top: 0; 
 } 

.phone-mockup > * { 
border-radius: 2rem; 
 } 
.kiosk-mokup { 
 width: 289px; 
 height: 610px; 
 background: url(/common/images/kiosk-mokup2.png) no-repeat; 
 background-size: cover; 
 position: absolute; 
 left:50%; 
 transform: translateX(-50%); 
 top: 0px; 
 box-shadow: 3px 3px 5px #ddd; 
 border: 1px solid #ddd; 
 border-radius: 25px; 
 z-index: 10; 
 } 
.pdlist { 
 background: url(/common/images/kiosk-pdlist_mokup.png) no-repeat; 
 } 
.part-logo { 
 width: 239px; 
 height: 139px; 
 position: absolute; 
 left:50%; 
 transform: translateX(-50%); 
 top: 27px; 
 z-index: 1; 
 background-size: contain !important; 
 background-repeat: no-repeat !important; 
 background-position: center center; 
 } 
.part-main_logo { 
 width: 239px; 
 height: 139px; 
 } 
.part-list_logo { 
 width: 241px; 
 height: 67px; 
 } 
.kiosk-item { 
 width: 300px; 
 height: 630px; 
 position: relative; 
 background: #fff; 
 user-select: auto; 
 width: 100%; 
 border: 1px solid; 
 background-color: white; 
 border: 1px solid var(--color-border); 
 padding: .5rem; 
 } 
.template-thumbnail { 
border: 1px solid var(--color-border); 
width: 100%; 
padding-top: 56.25%; 
border-radius: .25rem; 
background-repeat: no-repeat !important; 
background-position: center center !important; 
background-size: auto auto !important; 
 } 

.template-thumbnail--selected { 
border-color: var(--color-primary); 
box-shadow: var(--box-shadow-button); 
 } 

.template-thumbnail:hover { 
border-color: var(--color-primary); 
box-shadow: var(--box-shadow-button); 
 } 

input.attention { 
border: 1px solid #E81F1F; 
background-color: #FEF4F4; 
 } 

input[type="text"]:hover,
input[type="text"]:hover + button.square,
input[type="text"]:hover + .unit { 
border-color: var(--color-gray-300); 
 } 

input[type="text"]:focus,
input[type="search"]:focus,
.dialog__button--primary:focus { 
position: relative; 
outline: none !important; 
/*border: 1px solid var(--color-primary); */
box-shadow: 0 0 0 0px #e64d2c, 0 0 0 1px #e64d2c; 
border-color: transparent; 
transition: 0.2s all linear; 
z-index: 2; 
 } 

input[type="number"]:hover { 
outline: 1px solid #B2B2B2; 
border: 0; 
 } 
input[type="number"]:focus { 
 outline: 1px solid #e64d2c; 
 transition: 0.2s all linear; 
 border: 0; 
 } 

 input[type="text"]:focus + button.square,
input[type="text"]:focus ~ span.day,
input[type="text"]:focus + .unit,
.search-bar input:focus + button { 
position: relative; 
box-shadow: 0px 0px 0 0px #e64d2c, 0px 0px 0 0px #e64d2c, 1px 1px 0 0px #e64d2c, 0px -1px 0 0px #e64d2c; 
border-color: transparent; 
transition: 0.2s all linear; 
z-index: 2; 
 } 


select:hover { 
outline: 1px solid #B2B2B2; 
 } 
select:focus { 
outline: 1px solid #e64d2c; 
transition: 0.2s all linear; 
 } 

.IBEditInput:focus { 
border: 0 !important; 
box-shadow: none !important; 
 } 

input:read-only:focus { 
outline: none !important; 
box-shadow: none !important; 
border-color: #DEDEDE !important; 
 } 

input[type="text"]:read-only:focus + button.square,
input[type="text"]:read-only:focus ~ span.day,
input[type="text"]:read-only:focus + .unit,
.search-bar input:read-only:focus + button { 
outline: none; 
box-shadow: none; 
border-color: #DEDEDE; 
 } 

/*input[type="text"]:focus + button { */
/*border-color: var(--color-primary); */
/* } */


/* DIALOG */
.dialog__title { 
font-size: 1.5rem; 
color: #0E1A1F; 
margin-bottom: .5rem; 
 } 

.dialog__button { 
border: 0; 
background-color: white; 
height: 2.5rem; 
 } 

.dialog__button--primary { 
background-color: var(--color-primary); 
font-weight: 500; 
color: white; 
 } 

.dialog__button--primary:focus { 
background-color: var(--color-primary); 
border: 0; 
color: white; 
 } 

.dialog__button--primary:hover { 
background-color: var(--color-primary-highlight); 
border: 0; 
font-weight: 700; 
color: white; 
 } 

.dialog__button--secondary { 
background-color: white; 
color: var(--color-red); 
 } 

.dialog__button--secondary:hover { 
background-color: var(--color-gray-50); 
color: var(--color-red); 
font-weight: 700; 
border: 0; 
 } 


.dialog__button--ignore { 
 background-color: var(--color-cool-gray-200); 
 font-weight: 500; 
 color: green; 
 } 

.dialog__button--ignore:focus { 
 background-color: var(--color-cool-gray-200); 
 border: 0; 
 color: green; 
 } 

.dialog__button--ignore:hover { 
 background-color: var(--color-cool-gray-200-highlight); 
 border: 0; 
 font-weight: 700; 
 color: green; 
 } 


.ui-dialog .ui-dialog-buttonpane { 
display: flex; 
align-items: center; 
justify-content: flex-end; 
padding: 1rem; 
border: 0; 
 } 

.ui-dialog-buttonpane .ui-dialog-buttonset button { 
margin: 0; 
 } 

.ui-dialog-buttonpane .ui-dialog-buttonset button + button { 
margin-left: .5rem; 
 } 

#msg-confirm.ui-dialog-content { 
padding: 1.5rem 1rem 0 3.5rem; 
text-align: left; 
display: flex; 
overflow: hidden; 
flex-direction: column; 
background-position: left 1rem top 1.5rem; 
background-repeat: no-repeat; 
background-size: 26px auto; 
 } 

.dialog__warning { 
background-image: url("/common/images/glyphs/glyph-dialog-warning.svg") !important
 } 

.dialog__info { 
background-image: url("/common/images/glyphs/glyph-dialog-info.svg") !important
 } 

.dialog__confirm { 
background-image: url("/common/images/glyphs/glyph-dialog-confirm.svg") !important
 } 

.dialog__error { 
background-image: url("/common/images/glyphs/glyph-dialog-error.svg") !important
 } 

.dialog__message { 
color: #646673; 
line-height: 1.5; 
font-size: 1rem; 
overflow: auto; 
 max-height: 180px; 
 } 


#msg-confirm.ui-dialog-content.dialog__img { 
padding: 1.5rem 1rem 0; 
 } 

.dialog__img .grid-x { 
justify-content: center; 
align-items: center; 
 } 
.dialog__img .grid-x img { 
margin-bottom: 0; 
 } 

.dialog__img .dialog__message { 
margin: 0 0 0 1rem; 
text-align: center; 
 } 

.ui-dialog .dialog__img + .ui-dialog-buttonpane { 
justify-content: center; 
 } 

/*.ui-dialog { */
/*transition: all .02s linear; */
/* } */

.files-list { 
border-radius: .25rem; 
padding: .25rem; 
 } 

.files-list:hover { 
background-color: #f6f6f8; 
transition: 0.1s all linear; 
font-weight: 500; 
 } 

.files-list:hover * { 
font-weight: 500; 
 } 

.files-list:not(:last-child) { 
margin-bottom: .5rem; 
 } 

.upload-info { 
text-align: right; 
margin-top: 1rem; 
font-size: 13px; 
 } 

.card__table { 
display: flex; 
position: relative; 
width: 100%; 
height: 100%; 

 } 

.card__table > * { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
 } 

.card__header { 
display: flex; 
justify-content: space-between; 
margin-bottom: .5rem; 
 } 

.card__title { 
font-size: 1rem; 
margin-bottom: .5rem; 
color: black; 
 } 

.card__silent-action { 
color: var(--color-primary); 
 } 

.card__price { 
margin-top: .5rem; 
margin-left: .5rem; 
font-size: 1.5rem; 
color: var(--color-gray-700); 
font-weight: 500; 
text-align: right; 
white-space: nowrap; 

 } 

.card__price__unit { 
font-size: .875rem; 
 } 

.grid-x { 
margin-left: -.25rem; 
margin-right: -.25rem; 
display: flex; 
flex-wrap: wrap; 
 } 

.grid-x > * { 
padding-left: .25rem; 
padding-right: .25rem; 
margin-bottom: .5rem; 
 } 

.grid-y { 
display: flex; 
flex-direction: column; 
 } 

.grid-y > *:not(:last-child) { 
margin-bottom: .5rem; 
 } 

.table--dashboard-card { 
flex-grow: 1; 
flex-shrink: 1; 
flex-basis: 25%; 
 } 

.table--dashboard-board { 
flex-grow: 1; 
flex-shrink: 0; 
 } 

.table--dashboard-chart { 
flex-grow: 1; 
flex-shrink: 0; 
flex-basis: calc(100% - 28.75rem); 
 } 

.table--dashboard-calendar { 
flex-grow: 1; 
flex-shrink: 0; 
flex-basis: calc(100% - 28.75rem); 
 } 

.table--dashboard-aside { 
flex-grow: 1; 
flex-shrink: 0; 
flex-basis: 28.75rem; 
 } 

.dashboard-aside { 
display: flex; 
 } 

.dashboard-aside__item { 
padding: 1rem .5rem; 
border-radius: .25rem; 
cursor: pointer; 
display: flex; 
flex-direction: column; 
flex: 1
 } 

.dashboard-aside__item__section { 
display: flex; 
 } 

.dashboard-aside__item + .dashboard-aside__item { 
border-top: 1px solid var(--color-border); 
 } 

.dashboard-aside__item__price { 
margin-left: auto; 
 } 

.dashboard-aside__row { 
display: flex; 
justify-content: space-between; 
 } 

.dashboard-aside__v-separator { 
height: 100%; 
width: 1px; 
background: var(--color-border); 
 } 

.dashboard-aside__h-separator { 
width: 100%; 
height: 1px; 
background: var(--color-border); 
 } 

.dashboard-aside__col { 
display: flex; 
flex-direction: column; 
flex: 1; 
 } 

.dashboard-aside__col:first-child .dashboard-aside__item { 
padding-right: 1.5rem; 
 } 

.dashboard-aside__col:last-child .dashboard-aside__item { 
padding-left: 1.5rem; 
 } 

.dashboard-aside__item--selected { 
background-color: var(--color-primary); 
 } 

.dashboard-aside__item__title { 
color: var(--color-gray-700); 
font-size: 1rem; 
font-weight: 500; 
margin-bottom: .5rem; 
 } 

.dashboard-aside__item__value { 
color: var(--color-gray-700); 
font-size: 1.5rem; 
font-weight: 700; 
 } 

.dashboard-aside__item__unit { 
color: var(--color-gray-500); 
font-size: calc(1rem - 3px); 
 } 

.dashboard-aside__item--selected .dashboard-aside__item__title,
.dashboard-aside__item--selected .dashboard-aside__item__value { 
color: white; 
font-weight: 500; 
 } 

.dashboard-aside__item:hover { 
transition: all 0.2s linear; 
background-color: var(--color-gray-50); 
 } 

.dashboard-aside__item:hover .dashboard-aside__item__title,
.dashboard-aside__item:hover .dashboard-aside__item__value { 
font-weight: 500; 
 } 

.dashboard-aside__item--selected:hover { 
background-color: var(--color-primary-dark); 
 } 

.dashboard-board__item { 
line-height: 2rem; 
margin: .25rem 0; 
 } 

.dashboard-board__item__flair { 
padding: .25rem; 
border-radius: .25rem; 
text-align: center; 
font-size: 0.75rem; 
display: inline-flex; 
align-items: center; 
line-height: 1; 
background-color: var(--color-gray-50); 
 } 
.dashboard-board__item__flair--important { 
color: #9b0a31; 
background-color: #f3cfcf; 
 } 

.dashboard-board__item__title { 
margin-left: .25rem; 
color: var(--color-gray-700); 
 } 

.dashboard-board__item__date { 
color: var(--color-gray-500); 
 } 

/*button.header i.glyph.inquiry { */
/*background-image: url("/common/images/glyphs/glyph-inquiry.svg"); */
/* } */
/*button.header:hover i.glyph.inquiry { */
/*background-image: url("/common/images/glyphs/glyph-inquiry.svg"); */
/* } */
/*button.header i.glyph.save { */
/*background-image: url("/common/images/glyphs/glyph-save.svg"); */
/* } */
/*button.header:hover i.glyph.save { */
/*background-image: url("/common/images/glyphs/glyph-save.svg"); */
/* } */
/*button.header i.glyph.new,*/
/*button.header i.glyph.reset { */
/*background-image: url("/common/images/glyphs/glyph-new.svg"); */
/*background-size: 17px 17px; */
/* background-position: top 1.1px center; */
/* } */
/*button.header:hover i.glyph.new,*/
/*button.header:hover i.glyph.reset { */
/*background-image: url("/common/images/glyphs/glyph-new.svg"); */
/* } */

/* 예외 */
button.header.origin i.glyph.inquiry { 
background-image: url("/common/images/glyphs/glyph-inquiry.svg"); 
 } 
button.header.origin:hover i.glyph.inquiry { 
background-image: url("/common/images/glyphs/glyph-inquiry.svg"); 
 } 
button.header.origin i.glyph.save { 
background-image: url("/common/images/glyphs/glyph-save.svg"); 
 } 
button.header.origin:hover i.glyph.save { 
background-image: url("/common/images/glyphs/glyph-save.svg"); 
 } 
button.header.origin i.glyph.new { 
background-image: url("/common/images/glyphs/glyph-new.svg"); 
background-size: cover; 
 background-position: center; 
 } 
button.header.origin i.glyph.reset { 
background-image: url("/common/images/glyphs/glyph-reset.svg"); 
background-size: cover; 
 background-position: center; 
 } 
button.header.origin:hover i.glyph.new { 
background-image: url("/common/images/glyphs/glyph-new.svg"); 
 } 
button.header.origin:hover i.glyph.reset { 
background-image: url("/common/images/glyphs/glyph-reset.svg"); 
 } 

.global-banner { 
display: flex; 
align-items: center; 
justify-content: center; 
background-color: white; 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
overflow: hidden; 
max-height: 0; 
 } 

.global-banner--active { 
max-height: 300px; 
transition: all 3s linear; 
 } 

.global-banner--warning { 
background-color: rgb(255, 236, 236); 
 } 

.global-banner__icon { 
margin: 0 .5rem; 
 } 

.global-banner__content { 
display: flex; 
justify-content: space-between; 
padding: .5rem; 
max-width: 960px; 
align-items: center; 
 } 

.global-banner__message { 
flex-grow: 3; 
margin: 0 .5rem; 
 } 

.global-banner__button { 
height: 2rem; 
margin: 0 .5rem; 
display: inline-flex; 
 } 

.global-banner__close { 
margin-right: .5rem; 
 } 

.global-toast-wrapper { 
bottom: 3rem; 
right: 3rem; 
display: flex; 
flex-direction: column; 
 } 

.global-notification { 
display: flex; 
padding: 1rem; 
border-radius: .25rem; 
background-color: white; 
position: fixed; 
right: 3rem; 
bottom: 0; 
z-index: 999999; 
box-shadow: var(--box-shadow-button); 
opacity: 0; 
transform: translateY(3rem); 
transition: 0.1s all linear; 
 } 

.global-notification.active { 
opacity: 1; 
transform: translateY(-3rem); 
transition: 0.2s all linear; 
 } 

.global-notification__icon { 
display: inline-flex; 
align-items: center; 
justify-content: center; 
background-image: url('/common/images/glyphs/glyph-bell-toast.svg'); 
width: 24px; 
height: 24px; 
background-repeat: no-repeat; 
 } 

.global-notification__content { 
display: inline-flex; 
flex-direction: column; 
width: min(33vh, 20rem); 
margin: 0 .75rem; 
text-align: left; 
overflow: hidden; 
 } 
.global-notification__title { 
color: #0E1A1F; 
font-size: 1rem; 
line-height: calc(1rem * 1.5); 
margin-bottom: .25rem; 
 } 

.global-notification__message { 
font-size: .875rem; 
line-height: calc(.875rem * 1.5); 
color: #646673; 
overflow: hidden; 
 } 

.global-notification__close { 
width: 24px; 
height: 24px; 
background-image: url('/common/images/glyphs/glyph-close.svg'); 
background-repeat: no-repeat; 
background-position: center; 
background-size: 1rem; 
border-radius: .75rem; 
 } 

.global-notification__close:hover { 
background-color: var(--color-gray-50); 
transition: background-color 0.1s linear; 
 } 

/*.grid-status { */
/*position: relative; */
/*display: inline-flex; */
/*height: calc(1rem * 1.5); */
/*width: calc(1rem * 1.5); */
/*justify-content: center; */
/*align-items: center; */
/*border-radius: .125rem; */
/* } */

/*.grid-status__available:after { */
/*position: relative; */
/*content: ''; */
/*width: .25rem; */
/*height: .25rem; */
/*border-radius: .25rem; */
/*background-color: #25C686; */
/* } */

.grid-status { 
position: relative; 
height: .25rem; 
width: .25rem; 
top: 50%; 
bottom: 1px; 
transform: translateY(-50%); 
border-radius: .25rem; 
background: var( --color-primary); 
display: inline-flex; 
margin-right: .5rem; 
 } 

.grid-status__available { 
background-color: var(--color-primary); 
 } 

.grid-status__hold { 
background-color: #F2C94C; 
 } 

.grid-status__stop { 
background-color: var(--color-red); 
 } 

.product-tip { 
position: absolute; 
display: inline-flex; 
flex-direction: column; 
border-radius: .25rem; 
box-shadow: var(--box-shadow-button); 
padding: .75rem; 
background-color: white; 
 } 

.product-tip__status { 
position: relative; 
bottom: 1px; 
display: inline-flex; 
align-items: center; 
 } 

.ta-container--flex-scrollable,
.product-tip__status .grid-status { 
transform: translateY(0) !important; 
 } 

.product-tip__status__type { 
line-height: calc(1rem * 1.5); 
 } 

.product_tip__row { 
display: inline-flex; 
justify-content: space-between; 
align-items: center; 
 } 

.product_tip__row + .product_tip__row { 
margin-top: .25rem; 
 } 

.product-tip__icons { 
display: inline-flex; 
 } 

.product-tip__icons * + * { 
margin-left: .375rem
 } 

.product-tip__item { 
display: inline-flex; 
align-items: flex-end; 
 } 

.product-tip__item__title,
.product-tip__item__unit { 
font-size: calc(1em - 1px) !important; 
color: var(--color-gray-700); 
margin-right: .125rem; 
 } 

.product-tip__item__value { 
font-size: 1rem !important; 
color: var(--color-gray-900); 
font-weight: 500 !important; 
 } 

.product-tip__separator { 
padding-right: .5rem; 
margin-left: .5rem; 
border-left: 1px solid var(--color-border); 
height: 1em; 
 } 

.config-grid { 
display: grid; 
grid-template-columns: repeat(3, minmax(0, 1fr)); 
 } 

.config-grid__label { 
display: flex; 
flex-direction: column; 
border-right: 1px solid var(--color-border); 
margin-right: 1rem; 
padding-top: 1rem; 
 } 

.config-grid__label:first-child { 
margin-top: 1rem; 
padding-top: 0; 
 } 

.config-grid__desc { 
margin-top: .5rem; 
color: var(--color-gray-500); 
font-size: calc(1em - 1px); 
margin-bottom: 2rem; 
 } 

.config-grid__controls { 
grid-column: span 2; 
margin-left: 1rem; 
margin-top: 1rem; 
 } 

.select-card { 
border-radius: .25rem; 
padding: .75rem; 
box-shadow: var(--box-shadow-button); 
position: relative; 
display: inline-flex; 
flex-direction: column; 
width: 7rem; 
height: 7rem; 
 } 

.select-card + .select-card__radio + .select-card { 
margin-left: .5rem; 
 } 

.select-card__radio { 
opacity: 0; 
width: 0; 
height: 0; 
transform: scale(0); 
position: absolute; 
top: 0; 
left: 0; 
 } 

.select-card__checkmark { 
border: 1px solid var(--color-border); 
width: 1rem; 
height: 1rem; 
border-radius: .5rem; 
display: inline-flex; 
align-items: center; 
justify-content: center; 
margin-left: auto; 
 } 

.select-card__title { 
margin-top: 1rem; 
margin-bottom: .5rem; 
font-size: 1rem; 
font-weight: 700; 
color: var(--color-gray-500); 
 } 

.select-card__subtitle { 
font-size: calc(1rem - 4px); 
color: var(--color-gray-500); 
 } 

.select-card__radio:checked + .select-card .select-card__title { 
color: var(--color-primary); 
 } 

.select-card__radio:checked + .select-card .select-card__checkmark { 
border-color: var(--color-primary); 
 } 

.select-card__radio:checked + .select-card .select-card__checkmark:after { 
position: absolute; 
content: ''; 
width: .5rem; 
height: .5rem; 
background-color: var(--color-primary); 
border-radius: .25rem; 
 } 

.select-card__radio:checked + .select-card { 
box-shadow: var(--box-shadow-button-darker); 
border: 1px solid var(--color-primary); 
 } 

.help-cta { 
display: inline-flex; 
align-items: center; 
border-radius: .25rem; 
color: white; 
padding: .25rem; 
margin-top: .25rem; 
margin-left: .5rem; 
font-size: calc(1rem - 4px); 
background: linear-gradient(45deg, #1c9fdc, #0557ff); 
bottom: 1px; 
position: relative; 
 } 

.help-cta:hover { 
color: white; 
font-weight: 700; 
 } 

.help-cta i { 
margin-right: .25rem; 
 } 

.grid-size-preview { 
border: 1px solid var(--color-border); 
width: 100%; 
border-radius: .25rem; 
 } 

.grid-size-preview td { 
border: 1px solid var(--color-border); 
text-align: center; 
 } 

.grid-size-preview th { 
background-color: #42484C; 
font-weight: 500; 
color: white; 
 } 

.grid-size-preview th,
.grid-size-preview td { 
height: 30px; 
padding: 3px; 
font-size: 14px; 
transition: 0.2s all linear; 
 } 

#GRID_SIZE_OPT_1:checked ~ .grid-size-preview th,
#GRID_SIZE_OPT_1:checked ~ .grid-size-preview td { 
height: 22px; 
padding: 1px; 
font-size: 13px; 
transition: 0.2s all linear; 
 } 

#GRID_SIZE_OPT_3:checked ~ .grid-size-preview th,
#GRID_SIZE_OPT_3:checked ~ .grid-size-preview td { 
height: 36px; 
padding: 4px; 
font-size: 15px; 
transition: 0.2s all linear; 
 } 

.table-icon { 
max-width: 24px; 
max-height: 24px; 
width: 1rem; 
height: 1rem; 
display: inline-flex; 
align-items: center; 
justify-content: center; 
font-size: 1em; 
font-weight:700; 
background-repeat: no-repeat; 
background-size: cover; 
 } 

.table-icon.worker--normal { 
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIiIGN5PSI2IiByPSIzLjI1IiBzdHJva2U9IiM0RDRENTEiIHN0cm9rZS13aWR0aD0iMS41Ii8+CjxwYXRoIGQ9Ik00IDIxQzQgMjEgNSAxMSAxMiAxMUMxOSAxMSAyMCAyMSAyMCAyMSIgc3Ryb2tlPSIjNEQ0RDUxIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo="); 
background-repeat: no-repeat; 
 } 

.table-icon.worker--company { 
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjQ4NiA0LjY5NTY0QzExLjI5NDkgNC4xMDM4NSAxMS44MjA3IDQuMDQxOCAxMi4xNzU3IDQuMTI0NUMxMi41NjMgNC4yMTQ3IDEyLjk2ODkgNC41MjUxNSAxMy40MjcgNS4xMzU0M0MxMy44ODA3IDUuNzM5ODIgMTQuMzAyMiA2LjUyMjQ0IDE0Ljc2OTQgNy4zOTgxMUwxNC43OTkzIDcuNDU0MDlDMTUuMjQ1OCA4LjI5MTAxIDE1LjczMTMgOS4yMDEwMiAxNi4yOTI3IDkuOTg5NjhDMTYuNjY4NyAxMC41MTggMTYuODMxOSAxMC45Nzc5IDE2Ljg2MDIgMTEuMzc0QzE2Ljg4NzkgMTEuNzYyOCAxNi43OSAxMi4xNDgzIDE2LjU0MjggMTIuNTQ1NEMxNi4wMjYyIDEzLjM3NTMgMTQuODc0NCAxNC4yMjM3IDEzLjAzNjcgMTUuMDA3OUMxMi4xMTExIDE1LjQwMjkgMTAuNTI1OCAxNS44MTUgOS4xNTI2MSAxNS43MTM0QzguNDcyMjMgMTUuNjYzMSA3LjkwNTk2IDE1LjQ5MTIgNy40OTUxNCAxNS4xOTA1QzcuMTA1NTggMTQuOTA1MyA2Ljc5NzA3IDE0LjQ2MjggNi42ODU4NyAxMy43MzFDNi41NTY3NyAxMi44ODEzIDYuMzQwMzUgMTEuOTkwNyA2LjEzNiAxMS4xNDk5QzYuMTAwNTcgMTEuMDA0IDYuMDY1NSAxMC44NTk3IDYuMDMxMzEgMTAuNzE3NEM1Ljc5MzgxIDkuNzI4NTUgNS41OTg2NCA4LjgzNDI4IDUuNTU1NjMgOC4wNjM4MkM1LjUxMjI3IDcuMjg3MTggNS42MzI3MiA2Ljc2NzkgNS44OTIzMiA2LjQzMDg0QzYuMTM2MTggNi4xMTQyMSA2LjYyMDk0IDUuODA4ODMgNy42NjkxOCA1LjczMzYyQzguNjg1ODEgNS42NjA2OCA5LjY2NzUzIDUuMjk0NDUgMTAuNDg2IDQuNjk1NjRaIiBzdHJva2U9IiM0RDRENTEiIHN0cm9rZS13aWR0aD0iMS41Ii8+CjxwYXRoIGQ9Ik0xNiA5LjAwMDAzQzE4LjUgOC41MDAwMyAyMC4yMTk0IDkuNSAyMC43MDQ5IDEwLjg5ODNDMjEuOTU1NCAxNC41IDE3IDE4IDEzLjUgMTlDMTAuNDQ2NSAxOS44NzI0IDUuOTIwOTQgMjAuNTYxMyAzLjk5OTk3IDE4QzIuNDk5OTcgMTYgMy45OTk5NyAxNCA2IDEyLjUiIHN0cm9rZT0iIzRENEQ1MSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8cGF0aCBkPSJNNyAxMy41QzcgMTMuNSA5LjI4NTcxIDE0IDEyIDEzQzE0LjcxNDMgMTIgMTYuNSAxMCAxNi41IDEwIiBzdHJva2U9IiM0RDRENTEiIHN0cm9rZS13aWR0aD0iMS41Ii8+Cjwvc3ZnPgo="); 
background-repeat: no-repeat; 
 } 

.IBMTSmall .table-icon,
.IBSmall .table-icon,
.IBMTSmall .table-icon,
.IBSmall .table-icon { 
width: 14px; 
height: 14px; 
font-size: .75em; 
 } 

.IBMTHigh .table-icon,
.IBHigh .table-icon,
.IBMTHigh .table-icon,
.IBHigh .table-icon { 
width: 24px; 
height: 24px; 
 } 

.table-icon + .table-icon { 
margin-left: .25rem; 
 } 

.table-icon.blue { 
background-color: #DBEDF3; 
color: #14358A; 
 } 

.table-icon.red { 
background-color: #F3DBDB; 
color: #8A1414; 
 } 

.table-icon.gray { 
background-color: #EEEEEE; 
color: #06131F; 
 } 

.table-icon.green { 
background-color: #C3EDB0; 
color: #148A35; 
 } 

.table-icon.purple { 
background-color: #D6C8FC; 
color: #8900B9; 
 } 

.table-icon.brown { 
background-color: #F3E7DB; 
color: #8A6914; 
 } 

.calendar-small { 
display: flex; 
flex-direction: column; 
max-width: calc(48px * 7); 
 } 

.calendar-small__month { 
display: flex; 
justify-content: center; 
align-items: center; 
margin-bottom: .5rem; 
text-align: center; 
 } 

.calendar-small__row { 
display: flex; 
 } 

.calendar-small__dotw { 
color: var(--color-gray-300); 
font-size: calc(1rem - 4px); 
text-align: center; 
width: 48px; 
 } 

.calendar-small__date { 
display: flex; 
align-items: center; 
justify-content: center; 
color: var(--color-gray-700); 
width: 48px; 
height: 48px; 
font-size: 1.15rem; 
position: relative; 
cursor: pointer; 
 } 
.calendar-small__date--selected { 
color: white; 
border-radius: 24px; 
background-color: var(--color-primary-highlight); 
font-weight: 500; 
 } 

.calendar-small__date--inactive { 
color: var(--color-gray-300); 
 } 

.calendar-small__date--holiday { 
color: var(--color-red); 
 } 

.calendar-small__date--holiday-inactive { 
color: #E8ACAC
 } 

.calendar-small__date__status { 
position: absolute; 
width: 100%; 
top: 6px; 
display: flex; 
justify-content: center; 
 } 
.date-indicator { 
border-radius: .25rem; 
width: .5rem; 
height: .5rem
 } 
.date-indicator--small { 
border-radius: .125rem; 
width: .25rem; 
height: .25rem; 
 } 

.calendar-small__date__status .date-indicator--small + .date-indicator--small { 
margin-left: .1225rem; 
 } 

.date-indicator--vacation { 
background-color: var(--color-orange)
 } 

.date-indicator--event { 
background-color: var(--color-green); 
 } 

.date-indicator--fest { 
background-color: var(--color-blue); 
 } 

.date-indicator--purchase-ended { 
background-color: var(--color-purple); 
 } 

.date-indicator--sale-ended { 
background-color: var(--color-seahsp); 
 } 

.calendar--medium .calendar-row { 
border-bottom: 0; 
 } 

.calendar--medium .calendar-dates .calendar-row > .date:last-child { 
border-right: 0; 
 } 
.calendar--medium .calendar-dates .calendar-row > .date > .date-title .date-info { 
font-size: 1.5rem !important; 
 } 

.highcharts-tooltip { 
box-shadow: var(--box-shadow-button); 
display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
 } 

.calendar-medium { 
width: 100%; 
height: 100%; 
display: flex; 
align-items: center; 
 } 

.calendar-medium__selected { 
height: 239px; 
min-width: 239px; 
position: relative; 
margin-right: .25rem; 
 } 

.calendar-medium__item { 
width: 100%; 
padding: 1rem; 
border-radius: .25rem; 
border: 1px solid var(--color-border); 
display: flex; 
flex-direction: column; 
 } 

.calendar-medium__item--row { 
height: 77px; 
 } 

.calendar-medium__item--row .calendar-medium__header { 
justify-content: space-between; 
text-align: center; 
 } 

.calendar-medium__item--row .calendar-medium__date-summary { 
margin-left: 0; 
 } 

.calendar-medium__item--row .calendar-medium__header .calendar-medium__date-info { 
align-self: center; 
 } 

.calendar-medium__item--row .calendar-medium__date-info { 
margin-bottom: 0; 
 } 

.calendar-medium__banner { 
width: 100%; 
padding: .5rem; 
border-radius: .25rem; 
color: white; 
cursor: pointer; 
font-weight: 500; 
 } 

.calendar-medium__header { 
display: flex; 
justify-content: space-between; 
margin-bottom: .5rem; 
 } 

.calendar-medium__date { 
font-size: 1.5rem; 
font-weight: 500; 
 } 

.calendar-medium__selected .calendar-medium__date { 
color: var(--color-primary-highlight)
 } 

.calendar-medium__events { 
margin-top: auto; 
margin-bottom: .5rem; 
 } 

.calendar-status { 
display: inline-flex; 
align-items: center; 
 } 

.calendar-status__name { 
margin-left: .25rem; 
 } 

.calendar-medium__date-summary { 
display: inline-flex; 
align-items: center; 
margin-left: auto; 
 } 

.calendar-status + .calendar-status { 
margin-left: .5rem; 
 } 

.calendar-medium__banner--event { 
background-color: var(--color-green); 
 } 

.calendar-medium__banner--fest { 
background-color: var(--color-blue); 
 } 

.calendar-medium__banner + .calendar-medium__banner { 
margin-top: .25rem; 
 } 

.calendar-medium__date-info { 
align-self: flex-end; 
margin-bottom: 2px; 
color: var(--color-gray-500); 
 } 

.calendar-medium__date-info--holiday { 
color: var(--color-red); 
 } 

.calendar-medium__sales { 
display: inline-flex; 
align-items: center; 
margin-left: auto; 
 } 

.calendar-medium__date-lists { 
width: 100%; 
 } 

.calendar-medium__date-lists .calendar-medium__item + .calendar-medium__item { 
margin-top: .25rem; 
 } 

.calendar-small__date:hover { 
background-color: var(--color-gray-50); 
border-radius: 24px; 
 } 

.calendar-small__date--selected:hover { 
background-color: var(--color-primary-hover); 
 } 

.calendar-medium__date--holiday { 
color: var(--color-red); 
 } 

.ie-overlay { 
width: 100%; 
height: 100%; 
display: flex; 
flex-direction: column; 
align-items: center; 
justify-content: center; 
background-color: rgba(0, 0, 0, 0.7); 
backdrop-filter: blur(4px); 
z-index: 99999; 
position: absolute; 
left: 0; 
top: 0; 
 } 

.ie-overlay__card { 
background-color: white; 
display: flex; 
flex-direction: column; 
padding: 2rem; 
border-radius: .25rem; 
box-shadow: var(--box-shadow-button); 
align-items: center; 
justify-content: center; 
 } 

.sms-sidebar { 
width: 28.25rem; 
display: flex; 
flex-direction: column; 
border-right: 1px solid var(--color-border); 
padding: .5rem; 
background-color: white; 
 } 

.sms-mockup { 

 } 

.tooltip { 
position: absolute; 
display: inline-flex; 
flex-direction: column; 
border-radius: .25rem; 
background-color: rgba(0, 0, 0, 0.8); 
backdrop-filter: blur(.25rem); 
padding: .5rem; 
 } 

.tooltip__title { 
font-weight: 700; 
color: white; 
line-height: 1.5; 
margin-bottom: .25rem; 
 } 

.tooltip__content { 
display: block; 
color: rgba(255, 255, 255, .85); 
 } 

/* 마우스 우클릭 툴팁 */
.tooltip.mouse-right .tooltip-wrap { 
display: flex; 
align-items: center; 
 } 
.tooltip.mouse-right .tooltip-wrap textarea { 
width: 250px; 
height: 28.5px; 
padding: 6px; 
font-size: 13px; 
color: #58585C; 
border: 1px solid #DEDEDE; 
 } 
.tooltip.mouse-right .tooltip-wrap textarea:read-only { 
width: 300px; 
height: auto; 
padding: 0 2px; 
font-size: 14px; 
color: #58585C; 
background: transparent; 
 border: none; 
resize: none; 
 } 
.tooltip.mouse-right .tooltip-wrap textarea::placeholder { 
color: #989898; 
 } 
.tooltip.mouse-right .tooltip-wrap textarea:focus { 
outline: none; 
 } 
.tooltip.mouse-right .tooltip-wrap button { 
height: auto; 
 padding: 5px 10px; 
margin: 0 0 0 5px; 
 color: #fff; 
 background: #209B5C; 
 border-color: #209B5C; 
 } 
.tooltip.mouse-right::after { 
content: ""; 
 position: absolute; 
 left: -6px; 
 top: 13px; 
 width: 10px; 
 height: 10px; 
 background: #F5F8FE; 
 border-top: 1px solid #209B5C; 
 border-left: 1px solid #209B5C; 
 transform: skew(45deg); 
 } 

.sms-sidebar__list { 
display: grid; 
grid-template-columns: auto 1fr; 
grid-template-rows: auto; 
margin-top: .75rem; 
padding-top: .75rem; 
border-top: 1px solid var(--color-border); 
 } 

.sms-sidebar__list__item,
.sms-sidebar__list__label { 
display: flex; 
align-items: center; 
/* padding: .5rem 0 */
 padding-bottom: 0.5rem; 
 } 

.sms-sidebar__list__label { 
color: var(--color-gray-700); 
padding-right: .75rem; 
white-space: nowrap; 
 } 

.sms-sidebar__list__item > * + * { 
margin-left: .25rem; 
 } 

.sms-sidebar__card { 
border: 1px solid var(--color-border); 
padding: .5rem; 
border-radius: .25rem; 
 } 

.sms-sidebar__balance { 
color: var(--color-gray-900); 
margin-left: auto; 
font-weight: 700; 
font-size: 1rem; 
 } 

.sms-sidebar__header { 
display: flex; 
justify-content: space-between; 
align-items: center; 
 } 

.sms-sidebar__sms-content { 
border-radius: .25rem; 
flex-grow: 1; 
 } 

.sms-sidebar__pill { 
display: inline-flex; 
align-items: center; 
justify-content: center; 
height: 2.25rem; 
padding: 0 .75rem; 
color: var(--color-primary); 
border: 1px solid var(--color-primary); 
border-radius: 1.125rem; 

 } 

.sms-sidebar__unit { 

 } 

.sms-sidebar__summary { 

 } 

.sms-sidebar__image-thumbnail { 
display: block; 
width: 3rem; 
height: 3rem; 
border-radius: .25rem; 
border: 1px solid var(--color-gray-300); 
position: relative; 
cursor: pointer; 
 } 

.sms-sidebar__image-thumbnail:hover:after { 
content: '삭제'; 
position: absolute; 
display: flex; 
align-items: center; 
justify-content: center; 
color: white; 
width: 100%; 
height: 100%; 
font-weight: 700; 
top: 0; 
left: 0; 
background: rgba(0, 0, 0, .2); 
pointer-events: none; 
 } 

.sms-sidebar__image-thumbnail--add { 
display: block; 
width: 3rem; 
height: 3rem; 
border-radius: .25rem; 
border: 1px dashed var(--color-gray-300); 
background: linear-gradient(var(--color-gray-300), var(--color-gray-300)),
linear-gradient(var(--color-gray-300), var(--color-gray-300)); 
background-size: 33% 2px,2px 33%; /*thickness = 2px, length = 50% (25px)*/
background-repeat: no-repeat; 
background-position: center; 
cursor: pointer; 
transition: 0.2s linear background; 
 } 

.sms-sidebar__image-thumbnail--add:hover { 
background: linear-gradient(var(--color-gray-500), var(--color-gray-500)),
linear-gradient(var(--color-gray-500), var(--color-gray-500)); 
background-size: 33% 2px,2px 33%; /*thickness = 2px, length = 50% (25px)*/
background-repeat: no-repeat; 
background-position: center; 
 } 

.sms-sidebar__price-table { 
border: 0; 
vertical-align: center; 
width: 100%; 
 } 

.sms-sidebar__price-table tr { 
padding: .25rem 0; 
 } 

.sms-sidebar__price-table th { 
text-align: left; 
color: var(--color-gray-500); 
padding-right: .25rem; 
 } 

.sms-sidebar__price-table td { 
color: var(--color-primary-highlight); 
font-weight: 700; 
text-align: right; 
padding-right: 1rem; 
 } 

.sms-footer { 
display: flex; 
justify-content: space-between; 
align-items: center; 
border-top: 1px solid var(--color-border); 
padding: 1rem; 
background-color: white; 
 } 

.sms-footer__label { 
color: var(--color-gray-500); 
margin-bottom: .25rem; 
 } 

.sms-footer__price { 
font-size: 1.5rem; 
font-weight: 700; 
 } 

.sms-footer__unit { 
margin-top: auto; 
color: var(--color-gray-700); 
 } 

.sms-footer__v-separator { 
width: 1px; 
background: var(--color-border); 
border-left: 1px solid var(--color-border)
 } 

.flair { 
display: inline-flex; 
align-items: center; 
justify-content: center; 
padding: .25rem .375rem; 
border-radius: .25rem; 
position: relative; 
font-weight: 700; 
font-size: 1rem; 
text-overflow: initial; 
overflow: hidden; 
width:78px; 
height:28px; 
border-raius:14px; 
border:1px solid #fff; 
 } 

.flair--dev { 
/* background: linear-gradient(165deg, rgba(255,255,255, .3) 0%, rgba(255,255,255, .1) 50%, rgba(255,255,255, 0) 50%),
linear-gradient(45deg, #e90828, #f3290f); */
background:none; 
color: white; 
 } 

.flair--help { 
background: linear-gradient(45deg, #1c9fdc, #0557ff)
 } 


.flair--shine:after { 
position: absolute; 
content: ''; 
width: 100%; 
height: 100%; 
background-image: linear-gradient(
-45deg,
transparent 33%,
rgba(255,255,255,0.3) 50%,
transparent 66%
); 
background-size: 300% 100%; 
animation: shine 4s infinite; 
animation-delay: 2.5s; 
 } 

@keyframes shine { 
0% { 
background-position: right; 
 } 
50% { 
 background-position: left; 
 } 

100% { 
background-position: left; 
 } 
 } 

.breadcrumb { 
display: inline-flex; 
text-align: center; 
white-space: nowrap; 
height: 2rem; 
position: relative; 
border-radius: .25rem; 
overflow: hidden; 
background-color: white; 
border: 1px solid var(--color-border); 
z-index: 1; 
 } 

.breadcrumb__step { 
display: inline-flex; 
align-items: center; 
height: 100%; 
position: relative; 
padding: 0 1rem 0 2rem; 
color: var(--color-gray-500); 
transition: .2s all ease-in; 
cursor: pointer; 
 } 

.breadcrumb .breadcrumb__step:first-child { 
padding-left: 1rem; 
 } 

.breadcrumb .breadcrumb__step:last-child:after { 
box-shadow: none; 
 } 

.breadcrumb__step:after { 
content: ''; 
position: absolute; 
transform: scale(0.707) rotate(45deg); 
display: inline-block; 
width: 2rem; 
height: 2rem; 
right: -1rem; 
box-shadow: 1px -1px var(--color-border); 
transition: .2s all ease-in; 
z-index: 1; 
background-color: white; 
 } 

.breadcrumb__step:hover,
.breadcrumb__step:hover:after { 
background-color: var(--color-gray-50); 
color: var(--color-gray-700); 
box-shadow: 2px -2px var(--color-border); 
 } 

.breadcrumb__step--active,
.breadcrumb__step--active.breadcrumb__step:after { 
background-color: var(--color-primary); 
 } 

.breadcrumb__step--active { 
color: white; 
font-weight: 700; 
 } 

.breadcrumb__step--active:hover,
.breadcrumb__step--active:hover.breadcrumb__step:after { 
background-color: var(--color-primary-dark); 
color: white; 
 } 

.menu-popover { 
--pointer-y: 1.5; 
display: flex; 
flex-direction: column; 
background-color: white; 
padding: 2rem; 
bottom: 0rem; 
left: 4rem; 
position: absolute; 
border-radius: .5rem; 
box-shadow: 0 1rem 1rem 0 rgba(64, 64, 70, .2); 
margin: 0 2rem; 
max-width: calc(100vw - 4rem); 
max-height: calc(100vh - 6rem); 
opacity: 0; 
transform-style: preserve-3d; 
transform: rotateY(-45deg); 
transition: all .3s ease-in; 
transform-origin: center; 
z-index: 45; 
pointer-events: none; 
overflow: scroll; 
 } 

.menu-popover.menu-popover--active { 
transform: rotateY(0); 
opacity: 1; 
pointer-events: auto; 
 } 

.menu-popover:before { 
content: ''; 
display: inline-block; 
background-color: white; 
transform: rotate(45deg); 
width: 1rem; 
height: 1rem; 
left: -.5rem; 
top: calc(var(--pointer-y) * 1px - 10.5rem); 
position: absolute; 
transition: all .3s ease-in; 
 } 

.menu-popover__header { 
display: flex; 
align-items: center; 
margin-bottom: .75rem; 
padding: .5rem; 
background-color: #f5fbff; 
border-radius: .25rem; 
 } 

.menu-popover__content { 
display: grid; 
grid-template-columns: repeat(5, minmax(0, 1fr)); 
grid-gap: 1.5rem; 
 } 

.menu-popover__col { 
display: flex; 
flex-direction: column; 
 } 

.menu-popover__col + .menu-popover__col { 
margin-left: .25rem; 
 } 

.menu-popover__badge { 
display: flex; 
align-items: center; 
justify-content: center; 
background-color: white; 
/* border: 1px solid var(--color-primary-highlight);  */
width: 2rem; 
height: 2rem; 
border-radius: 1rem; 
margin-right: .5rem; 
 } 

.menu-popover__category { 
color: var(--color-gray-900); 
font-weight: 700; 
margin-bottom: .125rem; 
 } 

.menu-popover__category-description { 
color: var(--color-gray-700); 
font-size: .75rem; 
 } 

.menu-popover__grid { 
display: grid; 
grid-template-columns: repeat(2, minmax(0, 1fr)); 
grid-gap: .75rem; 
margin-left: 3rem; 
 } 

.menu-popover__grid__item { 
display: inline-flex; 
flex-direction: column; 
 } 

.menu-popover__subcategory { 
color: var(--color-gray-700); 
font-weight: 500; 
margin-bottom: .25rem; 
 } 

.menu-popover__menu-item { 
color: var(--color-gray-500); 
line-height: 1.25rem; 
font-size: .75rem; 
border-radius: .25rem; 
text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap; 
 } 

.menu-popover__search { 
display: flex; 
margin-left: auto; 
align-items: flex-end; 
 } 

.menu-popover__search-bar { 
border: 0; 
border-bottom: 1px solid var(--color-border); 
border-radius: 0; 
 } 

.menu-popover__search button { 
border-bottom: 1px solid var(--color-border) !important; 
border-radius: 0; 
 } 

.sms-storage { 
display: grid; 
grid-template-columns: repeat(4, minmax(0, 1fr)); 
grid-auto-rows: 46vh; 
grid-gap: .5rem; 
 } 

.sms-storage__card { 
display: flex; 
flex-direction: column; 
box-shadow: var(--box-shadow-button); 
padding: 1rem; 
background-color: white; 
 } 

.sms-storage__card__list { 
display: flex; 
align-items: center; 
padding: .25rem 0; 
 } 

.sms-storage__card__header { 
display: flex; 
justify-content: space-between; 
margin-bottom: .5rem; 
 } 
.sms_title { 
color: #fff; 
background: var(--color-primary); 
border-radius: .25rem; 
text-align: center; 
 color: #fff; 
 line-height: 36px; 
 } 
.sms-storage__card__content { 
margin-top: .25rem; 
width: 100%; 
height: 100%; 
 } 

.item__drag--active { 
background-color: transparent; 
/*border: 1px dashed var(--color-border); */
transition: all .1s ease-in; 
transform: scale(1.1); 
z-index: 2; 
position: relative; 
overflow: visible; 
box-shadow: 0 0 4px 4px rgba(0, 0, 0, .2); 
 } 

.ta-container { 
width: 100%; 
height: 100%; 
background-color: var(--color-cool-gray-100); 
 } 

.ta-dashboard { 
overflow-x: hidden; 
overflow-y: auto; 
 } 

.ta-grid { 
display: grid; 
grid-auto-rows: 1fr; 
grid-row-gap: var(--grid-row-gap); 
grid-column-gap: var(--grid-column-gap); 
grid-template-columns: var(--grid-columns); 
grid-template-rows: repeat(2, 23rem); 
 } 

.ta-grid--item-no-bg { 
--grid-item-background-color: transparent; 
 } 

.ta-grid--dashboard { 
/*--grid-columns: repeat(4, minmax(0, 1fr)); */
/*--grid-columns: repeat(auto-fill, minmax(24rem, 1fr)); */
--grid-item-box-shadow: var(--box-shadow-button); 
--grid-item-background-color: white; 
--grid-item-border-radius: var(--border-radius-default); 
margin: 0 1rem; 
 } 

@media only screen and (max-width: 96rem) { 
.ta-grid--dashboard { 
/*--grid-columns: repeat(auto-fill, minmax(24rem, 1fr)); */
 } 
 } 

.ta-grid--dashboard .highcharts-yaxis-grid .highcharts-grid-line:last-child { 
display: none; 
 } 

.ta-grid--dashboard-calendar-detail { 
--grid-columns: auto 1fr; 
--grid-row-gap: 1rem; 
--grid-column-gap: 3rem; 
--grid-item-box-shadow: none; 
--grid-item-background-color: transparent; 
--grid-item-border-radius: 0; 
 } 

.ta-grid--dashboard::before { 
content: ''; 
width: 0; 
padding-bottom: 100%; 
grid-row: 1 / 1; 
grid-column: 1 / 1; 
 } 

.ta-grid--dashboard > *:first-child { 
grid-row: 1 / 1; 
grid-column: 1 / span 2 !important; 
 } 

/* .ta-grid--dashboard > *:nth-child(3) { */
/*grid-column: 1 / span 3 !important; */
/* } */


.ta-grid__item { 
display: flex; 
flex-direction: column; 
width: 100%; 
overflow: hidden; 
background-color: var(--grid-item-background-color); 
box-shadow: var(--grid-item-box-shadow); 
border-radius: var(--grid-item-border-radius); 
 } 

.ta-grid__item__content--dashboard-sales { 
--grid-item-box-shadow: none; 
--grid-row-gap: 1.5rem; 
--grid-columns: repeat(2, minmax(0, 1fr)); 
--flair-margin-bottom: .75rem; 
--div-data-margin-left: .5rem; 

margin-top: .5rem; 
 } 

.ta-grid__item__content--dashboard-mart-sales { 
background-image: url('/common/images/illusts/dashboard/mart-sales.svg'); 
 } 

.ta-grid__item__content--dashboard-app-sales { 
background-image: url('/common/images/illusts/dashboard/app-sales.svg'); 
 } 

.ta-grid__item--dashboard-sales .ta-grid { 
margin-top: .5rem; 
 } 

.ta-grid__item__whisper { 
margin-top: auto; 
display: flex; 
flex-direction: column; 
 } 

.ta-grid__item__whisper__headline { 
font-size: 1rem; 
line-height: calc(1rem * 1.5); 
 } 

.ta-grid__item__whisper__cta { 
color: var(--color-secondary-600); 
line-height: calc(.875rem * 1.5); 
 } 

.ta-grid__item--size-large { 
grid-column: span 2; 
 } 

.ta-grid__item--row { 
flex-direction: row; 
 } 

.ta-grid__item--split-half { 
--grid-item-box-shadow: none; 
--grid-item-background-color: transparent; 
--grid-item-border-radius: 0; 

position: relative; 
flex: 0 0 50%; 
 } 

.ta-grid__item--split-half:last-child:before { 
position: absolute; 
content: ''; 
top: 3rem; 
left: 0; 
width: 1px; 
height: calc(100% - 4rem); 
background-color: #E5E9EC; 
 } 

.ta-grid__item__header { 
display: flex; 
justify-content: space-between; 
padding: 1rem; 
align-items: center; 
height: 3rem; 
 } 

.ta-grid__item__header__heading { 
font-weight: 500; 
font-size: .875rem; 
color: black; 
 } 

.ta-grid__item__header__cta { 
color: var(--color-secondary-600); 
font-size: .875rem; 
 } 

.ta-dashboard__header { 
display: flex; 
justify-content: space-between; 
padding: 1.375rem 1rem; 
 } 

.ta-dashboard__header__heading { 
font-weight: 400; 
font-size: 1.5rem; 
line-height: 2.25rem; 
color: black; 
 } 

.ta-grid__item--color-gradient-secondary { 
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(180deg, #1380E5 0%, #1A2CD4 100%); 
--dashboard-news-color: white; 
--separator-color: rgba(255, 255, 255, .6); 
 } 

.ta-grid__item--color-gradient-secondary * { 
color: white; 
 } 

.ta-grid__item__content { 
position: relative; 
display: flex; 
flex-direction: column; 
flex: 1; 
padding: 0 1rem 1rem; 
height: 1px; 
min-height: 1px; 
min-width: 1px; 
overflow: hidden; 
background-position: right 1rem bottom 1rem; 
background-repeat: no-repeat; 
background-size: calc(100% / 4); 
 } 

.ta-flair { 
--flair-font-size: .875rem; 
font-size: var(--flair-font-size); 
background-color: var(--color-blue-50); 
border-radius: var(--border-radius-default); 
color: var(--color-cool-gray-1000); 
line-height: calc(var(--flair-font-size) * 1.5); 
padding: .25rem .5rem; 
font-weight: 700; 
width: max-content; 
margin-bottom: var(--flair-margin-bottom); 
white-space: nowrap; 
 } 

.ta-flair--secondary { 
background-color: var(--color-secondary-100); 
color: var(--color-secondary-1000); 
font-weight: 700; 
 } 

.ta-flair--small { 
padding: .125rem .5rem; 
 } 

.ta-flair--tiny { 
--flair-font-size: .75rem; 
padding: .125rem .25rem; 
 } 

.ta-flair--important { 
background-color: var(--color-red); 
color: white; 
 } 

.ta-flair--primary { 
background-color: var(--color-primary-50); 
color: var(--color-primary-1000); 
 } 

.ta-data { 
display: flex; 
margin-left: var(--div-data-margin-left); 
 } 

.ta-data__main { 
color: var(--color-cool-gray-1000); 
font-size: 1.5rem; 
font-weight: 700; 
 } 

.ta-data__sub { 
font-size: .875rem; 
color: var(--color-gray-500); 
margin-left: 1ch; 
align-self: flex-end; 
margin-bottom: 1px
 } 

.ta-dashboard__board { 
--dashboard-news-color: var(--color-cool-gray-1000); 
color: var(--dashboard-news-color); 
 } 

.ta-dashboard__board__post { 
display: flex; 
flex-direction: column; 
 } 

.ta-dashboard__board__post + .ta-dashboard__board__post { 
margin-top: 1rem; 
 } 

.ta-dashboard__board__header { 
display: flex; 
align-items: center; 
justify-content: space-between; 
 } 

.ta-dashboard__board__eyebrow { 
opacity: 70%; 
font-size: .8125rem; 
margin-bottom: .25rem; 
 } 

.ta-dashboard__board__title { 
font-weight: 700; 
font-size: .875rem; 
line-height: 1.5; 
color: var(--color-cool-gray-700); 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 
 } 

.ta-dashboard__board__message { 
opacity: 70%; 
height: calc(.875rem * 1.5 * 3); 
line-height: calc(.875rem * 1.5); 
max-height: 6rem; 
margin-bottom: .5rem; 
font-weight: 500; 
display: -webkit-box; 
-webkit-box-orient: vertical; 
-webkit-line-clamp: 3; 
overflow: hidden; 
 } 

.ta--dashboard__board__cta { 
opacity: 70%; 
margin-left: auto; 
font-weight: 400; 
 } 

.ta-separator { 

 } 

.ta-separator--horizontal { 
height: 1px; 
width: var(--separator-size); 
background: var(--separator-color); 
margin: 1.5rem 0; 
 } 


.ta-calendar { 
display: grid; 
grid-template-columns: repeat(7, minmax(0, 1fr)); 
grid-auto-rows: 1fr; 
grid-gap: 1px; 
 } 

.ta-calendar--dashboard { 
font-size: 1.25rem; 
 } 

/*.ta-calendar::before { */
/*content: ''; */
/*width: 0; */
/*padding-bottom: 100%; */
/*grid-row: 1 / 1; */
/*grid-column: 1 / 1; */
/* } */

/*.ta-calendar > *:first-child { */
/*grid-row: 1 / 1; */
/*grid-column: 1 / 1*/
/* } */

.ta-calendar--month { 
grid-template-columns: repeat(3, minmax(0, 1fr)); 
 } 

.ta-calendar__day { 
display: grid; 
place-items: center; 
color: var(--color-cool-gray-500); 
font-weight: 500; 
padding: .75rem; 
border-radius: .25rem; 
position: relative; 
min-width: 2.75rem; 
min-height: 2.75rem; 
 } 

.ta-calendar__day:hover { 
font-weight: 700; 
 } 

.ta-calendar__day--not-this-month { 
opacity: .4; 
 } 

.ta-calendar__day--selected { 
color: var(--color-primary-500); 
background-color: var(--color-primary-100); 
font-weight: 700; 
 } 
.ta-calendar__day-from--selected, .ta-calendar__day-to--selected { 
color: var(--color-primary-500); 
background-color: var(--color-primary-100); 
font-weight: 700; 
 } 
.ta-calendar__day-from--selected ~ .ta-calendar__day { 
color: var(--color-primary-500); 
background-color: var(--color-primary-100); 
 } 
.ta-calendar__day-to--selected ~ .ta-calendar__day { 
color: var(--color-cool-gray-500); 
background-color: inherit; 
 } 

.ta-calendar__day--holiday { 
color: var(--color-red); 
 } 

.ta-calendar-dotw { 
display: flex; 
width: 100%; 
 } 

.ta-calendar-dotw__item { 
flex: 1 1 auto; 
font-weight: 500; 
font-size: .875rem; 
color: var(--color-cool-gray-700); 
text-align: center; 
padding: .25rem 0; 
 } 

.ta-calendar__from-to-select { 
display: flex; 
align-items: center; 
justify-content: space-between; 
line-height: 1.5; 
margin-bottom: .25rem; 
 } 

.ta-calendar__from-to { 
display: flex; 
flex-direction: column; 
padding: .25rem .625rem; 
--eyebrow-color: var(--color-cool-gray-300); 
--date-color: var(--color-cool-gray-500); 
cursor: pointer; 
min-height: 2.5625rem; 
 } 

.ta-calendar-from-to--selected { 
background-color: var(--color-primary-50); 
--eyebrow-color: var(--color-primary-700); 
--date-color: var(--color-primary-1000); 
 } 

.ta-calendar__from-to__eyebrow { 
font-size: .6125rem; 
color: var(--eyebrow-color); 
 } 

.ta-calendar__from-to__date { 
font-weight: 700; 
color: var(--date-color); 
 } 

.ta-calendar__year-month { 
padding: .25rem; 
display: flex; 
align-items: center; 
position: relative; 
height: 2rem; 
justify-content: space-between; 
margin-bottom: .25rem; 
 } 

.ta-calendar__year-month__cta { 
padding: .125rem .5rem; 
font-weight: 700; 
color: var(--color-cool-gray-700); 
border-radius: .25rem; 
position: absolute; 
left: 50%; 
transform: translateX(-50%); 
white-space: nowrap; 
line-height: 2; 
 } 

.ta-calendar__year-month__cta:hover { 
background-color: var(--color-cool-gray-100); 
color: inherit; 
 } 

.ta-calendar__shortcuts { 
border-left: 1px solid var(--color-cool-gray-200); 
padding-left: .5rem; 
margin-left: .5rem; 
 } 

.ta-calendar__shortcuts--left { 
border: 0; 
border-right: 1px solid var(--color-cool-gray-200); 
padding: 0; 
margin: 0; 
padding-right: .5rem; 
margin-right: .5rem; 
 } 

.ta-calendar__shortcuts__list { 
font-size: .75rem; 
 } 

.ta-calendar__shortcuts__item { 
line-height: 1.875rem; 
color: var(--color-cool-gray-500); 
padding: 0 .625rem; 
border-radius: .25rem; 
cursor: pointer; 
 } 

.ta-calendar__shortcuts__item:hover { 
background-color: var(--color-primary-50); 
color: var(--color-primary-1000); 
font-weight: 500; 

 } 

.ta-calendar__shortcuts__anchor:hover { 
color: inherit; 
 } 

.ta-calendar__shortcuts__list--year .ta-calendar__shortcuts__item { 
min-width: 3.5rem; 
text-align: center; 
 } 

.ta-calendar--small { 
font-size: .75rem; 
 min-width : 230px; 
 } 

.ta-calendar--small .ta-calendar-dotw__item { 
font-size: .75rem; 
 } 

.ta-calendar--small .ta-calendar__day { 
min-height: 2rem; 
min-width: 2rem; 
padding: .125rem; 
 } 

.ta-calendar__day--disabled { 
cursor: not-allowed; 
color: var(--color-gray-100); 
 } 

.ta-calendar__day--disabled:hover { 
color: var(--color-gray-100); 
font-weight: 400; 
 } 


.ta-button { 
display: flex; 
align-items: center; 
justify-content: center; 
 } 

.ta-button--square { 
position: relative; 
 } 

.ta-eyebrow { 
font-size: .8125rem; 
line-height: 1.5; 
color: var(--color-cool-gray-500); 
 } 

.ta-heading { 
/*****************************/
/* HEADING VARIABLE TEMPLATE */
/*****************************/
/*--heading-font-color:*/
/*--heading-line-height:*/
/*--heading-font-weight:*/
/*--heading-font-size:*/
/*--heading-margin:*/

color: var(--heading-font-color); 
line-height: var(--heading-line-height); 
font-weight: var(--heading-font-weight); 
font-size: var(--heading-font-size); 
margin: var(--heading-margin); 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 
 } 

.ta-grid__item__calendar-detail { 
display: flex; 
flex-direction: column; 
padding-bottom: 1rem; 
position: relative; 
 } 

.ta-grid__item__calendar-detail:last-child { 
margin-bottom: .1rem; 
 } 

.ta-grid__item__calendar-detail:last-child:before { 
position: absolute; 
bottom: 0; 
content: ''; 
background-color: var(--color-cool-gray-300); 
height: 1px; 
width: clamp(.5rem, 2.25rem, 10%); 
 } 

.ta-sidebar { 
position: absolute; 
top: 0; 
left: 0; 
width: var(--sidebar-width); 
height: 100%; 
overflow: hidden; 
background-color: var(--color-white); 
z-index: var(--z-index-2); 
transform: translateX(calc(var(--sidebar-width) * -1)); 
will-change: transform; 
transition: transform .2s ease-in-out; 
 } 

.ta-sidebar--active { 
transform: translateX(0); 
box-shadow: 1px 0 12px 1px #00000014; 
 } 

.ta-sidebar__wrapper { 
display: flex; 
width: calc(var(--sidebar-width) * 2); 
will-change: transform; 
transform: translateX(calc(var(--sidebar-width) * -1)); 
transition: transform .2s ease-in-out; 
height: 100%; 
 } 

.ta-sidebar__wrapper--swapped { 
transform: translateX(0); 
 } 

.ta-sidebar__container { 
display: flex; 
flex-direction: column; 
justify-content: space-between; 
height: 100%; 
width: var(--sidebar-width); 
 } 

.ta-sidebar__menu { 
display: block; 
 } 

.ta-sidebar__menu--sub { 
max-height: 0; 
transition: max-height .1s ease-out; 
will-change: max-height; 
overflow: hidden; 
 } 
.ta-sidebar__menu--sub:last-child { 
margin-bottom: 3.75rem; 

 } 

.ta-sidebar__menu--sub__container { 
padding-bottom: 1px solid var(--color-cool-gray-100); 
border-bottom: 1px solid var(--color-primary-400); 
 } 

.ta-sidebar__menu--sub + .ta-sidebar__menu--sub { 
margin-top: .5rem; 
border-top: 1px solid var(--color-cool-gray-200); 
 } 

.ta-sidebar__menu__item { 
display: flex; 
align-items: center; 
height: var(--sidebar-menu-item-height); 
white-space: nowrap; 
padding: 0 1rem; 
 } 

.ta-sidebar__menu__item--selected { 
--sidebar-menu-item-name-color: var(--color-cool-gray-1000); 
background-color: var(--color-cool-gray-100); 
 } 

.ta-sidebar__menu__item--category { 
--sidebar-menu-item-height: 2rem; 
 } 

.ta-sidebar__menu__item--sub-category { 
--sidebar-menu-item-height: 2.25rem; 
--sidebar-menu-item-name-color: var(--color-cool-gray-700); 
--sidebar-menu-item-font-weight: 500; 

font-size: .75rem; 
line-height: 1.5; 
justify-content: space-between; 
color: #045525; 
background: #E7F8EE; 
border-bottom: 1px solid var(--color-cool-gray-200); 
font-size: 15px; 
 } 

.ta-sidebar__menu__item--sub-category--active { 
--sidebar-menu-item-name-color: #045525; 
border-bottom: 1px solid var(--color-cool-gray-200); 
 } 

.ta-sidebar__menu__item--sub-category--active .ta-sidebar__chevron { 
transform: rotate(180deg); 
 } 

.ta-sidebar__chevron { 
transition: .1s transform ease-in; 
will-change: transform; 
width: .875rem; 
height: .875rem; 
 } 

.ta-sidebar__menu__item--sub-category--active + .ta-sidebar__menu--sub { 
max-height: 100vh; 
 } 

.ta-sidebar__menu__item--sub-category:hover { 
--sidebar-menu-item-name-color: #fff; 
background-color: #209B5C; 
 } 
.ta-sidebar__menu__item--sub-category:hover img { 
filter: brightness(10); 
 } 

.ta-sidebar__menu__item--header { 
background-color: var(--color-cool-gray-100); 
 } 

.ta-sidebar__menu__item--page { 
--sidebar-menu-item-height: 2rem; 
--sidebar-menu-item-name-color: var(--color-cool-gray-900); 
--sidebar-menu-item-font-weight: 500; 
align-items: center; 
padding: 0 1.75rem; 
 } 

.ta-sidebar__menu__item--page:hover { 
--sidebar-menu-item-name-color: var(--color-cool-gray-1000); 
background-color: var(--color-cool-gray-100); 
 } 

.ta-sidebar__menu__item--category:hover { 
background-color: var(--color-primary-50); 
border-color: transparent; 
 } 

.ta-sidebar__menu__item__glyph { 
display: grid; 
place-items: center; 
height: var(--sidebar-menu-item-height); 
width: var(--sidebar-menu-item-height); 
 } 

.ta-sidebar__menu__item__name { 
font-weight: var(--sidebar-menu-item-font-weight); 
color: var(--sidebar-menu-item-name-color); 
margin-right: .25rem; 
white-space: nowrap; 
 } 

.ta-sidebar__menu__item__cta { 
background: url(/common/images/glyphs/glyph-chevron-right.svg) no-repeat center center; 
background-size: .75rem .75rem; 
height: var(--sidebar-menu-item-height); 
width: var(--sidebar-menu-item-height); 
margin-left: auto; 
 } 

.ta-badge { 
display: grid; 
place-items: center; 
padding: .25rem .5rem; 
font-weight: 700; 
color: var(--color-white); 
background-color: var(--color-red); 
border-radius: 10rem; 
 } 

.ta-banner { 
display: flex; 
align-items: center; 
flex: 0 0 auto; 
background-color: var(--color-cool-gray-30); 
border-radius: var(--border-radius-default); 
padding: .5rem; 
 } 

.ta-banner:first-child { 
margin-top: .125rem; 
 } 

.ta-banner + .ta-banner { 
margin-top: .5rem; 
 } 

.ta-banner__content { 
display: flex; 
flex-direction: column; 
flex-grow: 1; 
row-gap: 2px; 
 } 

.ta-banner__content:not(:only-child) { 
margin-left: .75rem; 
 } 

.ta-thumbnail { 
display: inline-block; 
width: 3rem; 
height: 3rem; 
flex: 0 0 auto; 
background-color: white; 
background-repeat: no-repeat; 
background-size: contain; 
background-position: center; 
border: 1px solid var(--color-cool-gray-100); 
border-radius: var(--border-radius-default); 
 } 
.ta-thumbnail-lg { 
width: 3.75rem; 
height: 3.75rem; 
 } 
.ta-thumbnail--empty { 
background-image: url('/common/images/illusts/no-image.svg'); 
 } 

.ta-banner__heading { 
font-weight: 500; 
font-size: .875rem; 
color: #3C3C3C; 
word-break: break-all; 
 overflow: hidden; 
 text-overflow: ellipsis; 
 display: -webkit-box; 
 -webkit-line-clamp: 1; 
 -webkit-box-orient: vertical; 
 margin: 0; 
 } 

.ta-banner__eyebrow { 
font-size: .8125rem; 
color: var(--color-cool-gray-500); 
 } 
.ta-banner__sale { 
font-size: .75rem; 
color: #FD5151; 
font-weight: bold; 
line-height: 17.38px; 
 } 
.ta-banner__cost { 
font-size: .75rem; 
color: #ACACAC; 
font-weight: 400; 
text-decoration: line-through; 
line-height: 17.38px; 
 } 
.ta-banner__price { 
font-size: .875rem; 
font-weight: 400; 
color: #3C3C3C; 
 } 
.ta-container--flex-scrollable { 
flex-grow: 1; 
overflow: auto; 
min-height: 0; 
position: relative; 
 } 

.ta-container--fix { 
position: absolute; 
top: 0; 
left: 0; 
bottom: 0; 
width: 100%
 } 

#app { 
display: flex; 
flex-direction: column; 
width: 100%; 
height: 100%; 
 } 

.ta-mdi { 
display: flex; 
height: 2.25rem; 
width: 100%; 
background-color: var(--color-cool-gray-900); 
 } 

.ta-mdi__tab { 
display: inline-flex; 
justify-content: space-between; 
height: 100%; 
font-size: .75rem; 
font-weight: 500; 
padding: 0 .75rem; 
align-items: center; 
color: var(--color-cool-gray-300); 
 } 

.ta-mdi__tab:hover { 
color: var(--color-white); 
background-color: var(--color-cool-gray-700); 
 } 

.ta-mdi__cta { 
width: 1rem; 
height: 1rem; 
display: flex; 
justify-content: center; 
align-items: center; 
border-radius: .5rem; 
margin-left: .25rem; 
 } 

.ta-mdi__cta i { 
width: .75rem; 
height: .75rem; 
filter: invert(80%) sepia(2%) saturate(347%) hue-rotate(155deg) brightness(94%) contrast(89%); 
 } 

.ta-mdi__cta:hover { 
background-color: var(--color-cool-gray-500); 
 } 

.ta-mdi__cta:hover i { 
-webkit-filter: brightness(0) invert(1); 
filter: brightness(0) invert(1); 
 } 

.ta-mdi__tab--active { 
background-color: var(--color-cool-gray-800); 
color: var(--color-white); 
box-shadow: inset 0 -.25rem 0 var(--color-primary-400); 
 } 
.ta-mdi__tab > span { 
display: block; 
 text-overflow: ellipsis; 
 overflow: hidden; 
 display: -webkit-box; 
 -webkit-line-clamp: 1; 
 -webkit-box-orient: vertical; 
 } 

.ta-container--modal { 
display: grid; 
place-items: center; 
position: fixed; 
top: 0; 
left: 0; 
z-index: 101; 
background-color: rgba(0, 0, 0, .5) !important; 
overflow: hidden !important; 
border: 0 !important; 
 } 

.ta-container--modal iframe { 
border-radius: .25rem; 
 } 

.ta-background-overlay { 
background-color: rgba(0, 0, 0, .5); 
position: fixed; 
top: 0; 
left: 0; 
height: 100%; 
width: 100%; 
overflow: hidden; 
 } 

.ta-popover, .info-popover { 
--x: 0; 
--y: 0; 
--max-width: inherit; 
position: absolute; 
left: var(--x); 
top: var(--y); 
max-width: var(--max-width); 
background-color: var(--color-white); 
border-radius: .25rem; 
box-shadow: var(--box-shadow-button); 
transform: scale(0); 
transition: transform .2s linear; 
will-change: scale; 
z-index: 102; 
 } 

.ta-popover--active, .info-popover--active { 
transform: scale(1); 
 } 

.ta-button { 

 } 

.ta-button--warning { 
background-color: #fae9e9; 
color: #a90707; 
font-weight: 500; 
border: 0; 
 } 

.ta-goods-panel { 
display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
width: 100%; 
position: fixed; 
height: 66vh; 
left: 0; 
bottom: 53px; 
z-index: 10; 
transform: translateY(calc(66vh - .5rem)); 
transition: transform .2s linear; 
 } 

.ta-goods-panel--active { 
transform: translateY(0); 
 } 

.ta-goods-panel__handle { 
position: absolute; 
bottom: 100%; 
left: 50%; 
transform: translateX(-50%); 
display: flex; 
justify-content: center; 
align-items: center; 
height: 22px; 
width: 70px; 
/* background-size: 1rem 1rem; */
/* background: #0E1A1F url('/common/images/glyphs/glyph-chevron-right.svg ') no-repeat center center; */
background: #fff url('/common/images/glyphs/glyph-chevron-up.svg') no-repeat right 8px center; 
background-size: 12px 12px; 
border-radius: 6px 6px 0 0; 
border: 1px solid rgba(0, 0, 0, .15); 
 box-shadow: 0px -1px 6px 0px #0000001A; 
z-index: 49; 
cursor: pointer; 
flex: 0 0 auto; 
 } 
.ta-goods-panel__handle::after { 
content: "더보기"; 
 font-size: 12px; 
 line-height: 1; 
 text-align: center; 
 color: #4d4d4d; 
 transform: translateX(-8px); 
 } 
.ta-goods-panel--active .ta-goods-panel__handle { 
background-image: url('/common/images/glyphs/glyph-chevron-down.svg'); 
 } 
.ta-goods-panel--active .ta-goods-panel__handle::after { 
content: "숨기기"; 
 } 

.ta-goods-panel__content { 
display: flex; 
flex-direction: column; 
background-color: #F4F7F9; 
width: 100%; 
flex-grow: 1; 
border-top: 1px solid var(--color-border)
 } 

.ta-notification-panel { 
background-color: white; 
box-shadow: var(--box-shadow-button); 
position: absolute; 
border-radius: .25rem; 
top: calc(var(--navbar-height) + .5rem); 
right: 10rem; 
align-items: flex-start; 
z-index: 99999; 
transform: scale(0); 
transition: .1s transform linear; 
 } 

.ta-notification-panel--active { 
transform: scale(1); 
 } 

.ta-notification-panel__container { 
width: 30rem; 
display: flex; 
flex-direction: column; 
height: 21.5rem; 
overflow-y: auto; 
 } 

.ta-notification-panel__header { 
display: flex; 
justify-content: space-between; 
align-items: center; 
padding: 1rem; 
border-bottom: 1px solid var(--color-border); 
 } 

.font-color-gray-500 { 
color: var(--color-gray-500); 
 } 

.ta-notification__list { 
margin-bottom: .25rem; 
height: 20.8125rem; 
 } 

.ta-notification__list__item { 
color: var(--color-cool-gray-500); 
padding: 0.1rem; 
display: flex; 
position: relative; 
overflow: hidden; 
margin: .5rem; 
border-radius: .25rem; 
font-size: .75rem; 
 } 

/*.ta-notification__list__item + .ta-notification__list__item { */
/*border-top: 1px solid var(--color-cool-gray-200); */
/* } */

.ta-notification__list__content { 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
color: var(--color-cool-gray-500); 
margin-top: .25rem; 
font-size: .875rem; 
 } 

.ta-notification__list__title { 
font-weight: 700; 
color: var(--color-cool-gray-700); 
line-height: 1.5; 
font-size: .875rem; 
 } 

.ta-notification__list--not-read { 
background-color: var(--color-secondary-50); 
border-top: 0; 
 } 

.ta-notification__not-read { 
width: .375rem; 
height: .375rem; 
flex: 0 0 auto; 
border-radius: .5rem; 
background-color: var(--color-primary-500); 
 } 

.ta-notification__list__cta { 
display: none; 
position: absolute; 
right: 1rem; 
box-shadow: var(--box-shadow-button); 
padding: .375rem .5rem; 
background-color: var(--color-white); 
color: var(--color-cool-gray-500); 
border-radius: .25rem; 
align-items: center; 
transform: translateY(-50%); 
top: 50%; 
 } 

.ta-notification__list__item:hover .ta-notification__list__cta { 
display: flex; 
 } 

.ta-notification__list__cta:hover { 
box-shadow: var(--box-shadow-button-darker); 
 } 

.ta-notification__list__item:hover::before { 
content: ''; 
position: absolute; 
pointer-events: none; 
right: 0; 
top: 0; 
height: 100%; 
width: 100%; 
background: linear-gradient(to right, rgba(243, 244, 244, 0) 0, rgb(243 244 244) 100%)
 } 

.notification__list__item--no-hover:hover::before { 
display: none; 
 } 

.ta-notification__list__item:hover { 
background-color: var(--color-cool-gray-30); 
 } 

.ta-notification__empty { 
width: 100%; 
height: 100%; 
color: var(--color-cool-gray-500); 
display: flex; 
justify-content: center; 
align-items: center; 
 } 

.ta-toast { 
position: fixed; 
bottom: 1rem; 
background-color: rgba(0, 0, 10, 0.75); 
border-radius: .25rem; 
max-width: 960px; 
opacity: 0; 
display: flex; 
padding: 1rem; 
left: 50%; 
transform: translateX(-50%); 
transition: .2s opacity linear; 
z-index: 99999; 
align-items: center; 
 } 

.ta-toast--active { 
opacity: 1; 
 } 

.ta-toast__close { 
flex: 0 0 auto; 
width: .75rem; 
height: .75rem; 
background: url('/common/images/glyphs/glyph-close.svg') no-repeat center; 
 } 

.ta-toast__message { 
flex-grow: 1; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
margin-right: 1rem; 
color: white; 
font-weight: 500; 
 } 

.ta-toast__glyph { 
display: flex; 
justify-content: center; 
align-items: center; 
width: 1rem; 
height: 1rem; 
/*background-color: var(--color-primary-500); */
margin-right: .5rem; 
border-radius: .5rem; 
 } 

.ta-palette { 
display: flex; 
justify-content: space-around; 
 } 

.ta-palette2__item { 
flex: 0 0 auto; 
width: 1.5rem; 
height: 1.5rem; 
/* border-radius: .75rem; */
border: 1px solid var(--color-border); 
 } 

.ta-palette__item { 
 flex: 0 0 auto; 
 width: 1.0rem; 
 height: 1.0rem; 
 border-radius: .75rem; 
 border: 1px solid var(--color-border); 
 } 

.ta-palette__title { 
font-size: 0.9rem; 
font-weight: 500; 
color: var(--color-gray-700); 
margin-bottom: 0.5rem; 
 } 

.ta-palette__eyebrow { 
font-size: .75rem; 
color: var(--color-gray-500); 
margin-bottom: .25rem; 
 } 

.ta-palette__item--red { 
background-color: #f9b1ba
 } 

.ta-palette__item--pink { 
background-color: #fbceea
 } 

.ta-palette__item--orange { 
background-color: #f6c56c
 } 

.ta-palette__item--yellow { 
background-color: #f6e895
 } 

.ta-palette__item--green { 
background-color: #95e7b6
 } 

.ta-palette__item--cyan { 
background-color: #75e1eb
 } 

.ta-palette__item--blue { 
background-color: #98d2fb
 } 

.ta-palette__item--purple { 
background-color: #ce7af7
 } 

.ta-palette__item--white { 
background-color: white; 
 } 

.ta-palette__gradient { 
width: 1rem; 
height: 1rem; 
display: block; 

 } 

.ta-palette__custom { 
width: 50%; 
border-radius: .25rem; 
/* margin-bottom: .25rem; */
min-height: 20px !important; 
height: 28px; 
padding: 0; 
 } 

input[type=range] { 
height: 1rem !important; 
min-height: 1rem !important; 
border-radius: .5rem !important; 
padding: 0; 
 } 


.headerColor-popup { 
 --x: 0; 
 --y: 0; 
 --max-width: inherit; 
 position: absolute; 
 left: var(--x); 
 top: var(--y); 
 max-width: var(--max-width); 
 background-color: var(--color-white); 
 border-radius: .25rem; 
 box-shadow: var(--box-shadow-button); 
 transform: scale(0); 
 transition: transform .2s linear; 
 will-change: scale; 
 z-index: 102; 
 } 

.headerColor-popup.active { 
 transform: scale(1); 
 } 


/* Tooltip container */
.tooltipIcon { 
 position: relative; 
 display: inline-block; 
 /* border-bottom: 1px dotted black; */ /* If you want dots under the hoverable text */
 } 

/* Tooltip text */
.tooltipIcon .tooltiptext { 
 visibility: hidden; 
 min-width: 55px; 
 background-color: black; 
 color: #fff; 
 text-align: center; 
 padding: .25rem; 
 border-radius: .25rem; 
 font-size: calc(1rem - 4px); 
 /* Position the tooltip text - see examples below! */
 position: absolute; 
 z-index: 10; 
 } 

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipIcon:hover .tooltiptext { 
 visibility: visible; 
 top: 80%; 
 left: 100%; 
 margin-left: -20px; /* Use half of the width (120/2 = 60), to center the tooltip */
 } 

.title_depth_top + h2 { 
margin: 2px 0 0; 
line-height: 1; 
 } 
.btn-memo.tip { 
height: auto; 
 margin: 0 8px 0 0; 
 padding: 4px 8px 5px; 
 background: #ebebeb; 
 border-radius: 4px; 
 } 
.btn-memo.tip > i { 
width: 13px; 
 height: 19px; 
 margin: 1px 4px 0 0; 
 } 
.btn-memo.tip > span.tooltiptext { 
line-height: 1; 
font-size: 13.5px; 
font-weight: 500; 
color: #4d4d4d; 
 } 

.table-tooltip { 
background: #fff; 
 border-radius: .625rem; 
 border: 1px solid #ddd; 
 z-index: 10; 
 padding: 8px 10px; 
 position: relative
 } 
.table-tooltip:after { 
content: ''; 
display: block; 
width: 15px; 
height: 15px; 
position: absolute; 
top: -13.5px; 
left: 10px; 
background: url(/common/images/glyphs/tooltip_deco.svg) center center no-repeat; 
background-size: cover; 
 } 
.table-tooltip.green { 
background: #059669; 
 border-radius: .25rem; 
 border: none; 
 padding: 5px 10px; 
 } 
.table-tooltip.green:after { 
content: ''; 
display: block; 
width: 15px; 
height: 15px; 
position: absolute; 
top: -10px; 
left: 10px; 
background: url(/common/images/glyphs/tooltip_deco-green.svg) center center no-repeat; 
background-size: cover; 

 } 
.table-tooltip_title { 
display: flex; 
align-items: center; 
column-gap: 3px; 
font-size: .875rem; 
color: #111315; 
font-weight: 700; 
padding-bottom: .5rem; 
margin-bottom: 0.3125rem; 
border-bottom: 1px solid #E5E7EB; 
 } 

.table-tooltip_txt { 
font-size: 0.6875rem; 
line-height: 15.93px; 
color: #88939E; 
 } 
.table-tooltip_txt span { 
font-size: 0.6875rem !important; 
 line-height: 15.93px !important; 
 } 
.table-tooltip_price { 
font-size: 1rem; 
color: #88939E; 
 } 
.table-tooltip.green .table-tooltip_txt { 
font-size: .75rem; 
color: #fff; 
line-height: 17.38px
 } 

/*이메일 팝업 창*/
.viewTitle { 
background: #fff; 
border-radius: 4px; 
padding: 15px; 
border-bottom: 1px solid #ddd; 
 } 
.viewTitle .titleFrame .txt { 
font-size: 1rem; 
line-height: 1.5rem; 
font-weight: 700; 
position: relative; 
padding-left: 1.6rem

 } 
.viewTitle .titleFrame .txt:before { 
content: ''; 
display: block; 
width: 24px; 
height: 24px; 
background: url('/common/images/glyphs/glyph-sms_black.svg') center center no-repeat; 
position: absolute; 
left: 0; 
top: 0
 } 
.viewTitle .view_line { 
display: flex; 
align-items: center; 
column-gap: .5rem; 
height: 27px
 } 

.viewTitle .view_line dd span { 
padding: 2px 4px; 
border-radius: 4px; 
background: #daf6ff; 
font-weight: 500; 
 color: #333; 
 } 
.readFrame { 
background: #fff; 
border-radius: 4px; 
padding: 15px; 
 } 
.readFrame table.read_sum { 
margin: 10px 0; 
border-bottom: 1px dashed #222; 
 padding-bottom: 0.4rem; 
 } 
.readFrame table.read_sum tbody { 
text-align: left; 
font-size: .875rem; 
 } 
.fileFrame { 
margin-top: .5rem; 
background: #fff; 
padding: 15px; 
 } 
.fileFrame_list { 
margin-top: .5rem; 
color: #777; 
 } 
.fileFrame_list > li > span { 
word-break: break-all
 } 

.title_depth_top { display: flex; align-items: center; } 
.title_depth_top .title_depth01,.title_depth_top .title_depth02 { display: inline-block; font-size: 15px; line-height: 25px; } 
.title_depth_top .title_depth03 { color: var(--color-primary); font-weight: bold; } 
.title_depth_top .title_depth03
.title_depth_top .chevron-right2 { width: 16px; height: 16px; vertical-align: sub; } 

.s_title_depth_top .s_title_depth01,.s_title_depth_top .s_title_depth02 { color: var(--color-gray-dark); display: inline-block; font-size: 11px; } 
.s_title_depth_top .s_title_depth03 { color: var(--color-primary); display: block; font-size: 12px; } 
.s_title_depth_top i.chevron-right2 { width: 16px; height: 16px; vertical-align: sub; } 

/* 아이비 시트 잠금 아이콘 */
.IB-img-lock_deco { 
 position: relative
 } 
.IB-img-lock_deco:after { 
 content: ''; 
 display: block; 
 width: 32px; 
 height: 32px; 
 position: absolute; 
 right: 3px; 
 bottom: 3px; 
 background: url('/common/images/icon_lock2.svg') no-repeat center center; 
 } 
.IB-img-lock_deco:before { 
 content: ''; 
 display: block; 
 width: 100%; 
 height: 100%; 
 position: absolute; 
 right: 0; 
 top: 0; 
 background: #000; 
 opacity: .15; 
 } 


/* 발주 히스토리*/

.bd-lr { 
border-left: 1px solid var(--color-border); 
border-right: 1px solid var(--color-border); 
 } 
.h-scroll { 
width: 100%; 
 } 
.h-scroll:before { 
content:''; 
position: absolute; 
top: 1.5rem; 
left: 1.455rem; 
width: 2px; 
height: 100%; 
background-color: #d9d9d9; 
 } 
.history-list::-webkit-scrollbar { 
 display: none; /* Chrome, Safari, Opera*/
 } 

.history-list { 
padding: 0 2rem 0 2.75rem; 
height: 310px; 
overflow-y: auto; 
 } 

.history-list li { 
position: relative; 
padding: 0.875rem 1rem; 
margin-bottom: 0.75rem; 
border: 1px solid #DDE4E8; 
border-radius: 4px; 
 } 

.history-content { 
position:relative; 
display: flex; 
 } 
.history-content:before { 
content:''; 
position: absolute; 
top: 0; 
left: -2.8rem; 
width: 16px; 
height: 16px; 
border-radius: 50%; 
background-color: #d9d9d9; 
 } 
.history-content.active:after { 
content:''; 
position: absolute; 
top: 0.25rem; 
left: -2.58rem; 
width: 9px; 
height: 9px; 
border-radius: 50%; 
background-color: #209B5C; 
border: 1px solid #FFFFFF; 

 } 
.history-time { 
margin-right: 2rem; 
font-size:0.75rem; 
color: #A1A3AC; 
 } 
.history-name { 
color: #209B5C; 
font-weight: 700; 
font-size: 0.875rem
 } 
.history-memo { 
position: relative; 
width: calc(90% - 85px); 
padding: 0.75rem 1.5rem 0.75rem 3.3rem; 
background-color: #F4F8FE; 
 } 
.history-memo i { 
position: absolute; 
top: 0.625rem; 
left: 1rem; 
margin-right: 1rem; 
 } 
.history-text { 
line-height: 1.25rem; 
 } 

.mg-b { 
margin-bottom: 0.8rem; 
 } 
.button-wrap button { 
width: 100px; 
height:38px; 
border: none; 
 } 
.h-cancle { 
margin-right: 0.25rem; 
font-weight: 500; 
color: #646672; 
background: #F4F8FE; 
 } 
.h-approve { 
font-weight: 500; 
color: #fff; 
background: #2B9361; 
border: none; 
 } 


/* 거래처관리 팝업*/

.black-bg { 
 position: fixed; 
 width: 100%; 
 height: 100%; 
 background-color: #000; 
 opacity: 0.2; 
 } 
.popup-contents { 
 position: absolute; 
 top: 50%; 
 left: 50%; 
 transform: translate(-50%, -50%); 
 width: 448px; 
 height: auto; 
 background-color: #fff; 
 border-radius: 3px; 
 } 
.popup-width-590 { 
width: 590px; 
 } 
.popup-width-720 { 
width: 720px; 
 } 
.pop-con-padd { 
padding: 1rem; 
 padding-left: 3.5rem; 
 } 
.p-title { 
margin: 0; 
 margin-top: 0.2rem; 
 font-size: 1.5rem; 
 line-height: 2rem; 
 } 
.p-text { 
color: #646673; 
 margin: 0.6rem 0; 
 line-height: 1.6rem; 
 } 
.p-green { 
color: #209B5C; 
font-weight: 500; 
 } 
.popup-contents textarea { 
width: 376px; 
height: 120px; 
background: #FFFFFF; 
border: 1px solid #DEDEDE; 
border-radius: 4px; 
resize: none; 
 } 
.popup-contents textarea::placeholder { 
 padding: 0.2rem 0.75rem; 
 font-size: 0.875rem; 
 color: #999; 
 } 
.p-button-wrap { 
 float: right; 
 margin-top: 1rem; 
 } 
.p-button-wrap button { 
 border: none; 
 width: 56px; 
 height: 32px; 
 font-size: 0.875rem; 
 border-radius: 3px; 
 } 
.p-yes { 
 background-color: #209B5C; 
 margin-right: 0.5rem; 
 color: #fff
 } 
.p-no { 
 background-color: #fff; 
 color: #E81F1F; 
 } 
.popup-confirm { 
position: absolute; 
top: 1.5rem; 
left: 1rem; 
 } 
.p-none { 
display: none; 
 } 
.p-return-w { 
width: 1160px 
 } 
.z-9 { 
z-index: 9; 
 } 
.z-99 { 
z-index: 99; 
 } 
.z-999 { 
z-index: 999; 
 } 

/*알림 - SCM발주*/
.tab_menu--button { 
display: flex; 
justify-content: center; 
 } 
.tab_menu--button li { 
padding-bottom: 0.5rem; 
line-height: 2.125rem; 
text-align: center; 
font-size: 0.875rem; 
color: #9D9DA4; 
transition: 0.3s; 
cursor: pointer; 
position: relative; 
 } 
.tab-active { 
color: #fff !important; 
font-weight: 700; 
 } 
.tab-active:after { 
position: absolute; 
bottom: 0; 
left: 0; 
display: inline-block; 
content: ''; 
width: 100%; 
height: 4px; 
border-radius: 3px 3px 0px 0px; 
background-color: #5ADB55; 
 } 
.mr-xsl { 
margin-right: 1.75rem; 
 } 
.tab_button-wrap { 
padding: 0.75rem 1.875rem; 
border-bottom: 1px solid #DDE4E8; 
 } 
.tab_button-alarm { 
border: none; 
background-color: #F5F8FE; 
color: #1C8256; 
 } 
.tab_button-alarm:hover { 
 transition: 0.1s all linear; 
box-shadow: var(--box-shadow-button-darker); 
 } 
.tab-list-gray { 
color: #C0C0C0; 
 } 



/*발주등록*/
.input-w-88 { 
width: 5.5rem; 
 } 
.input-w-135 { 
width: 135px; 
 } 
.input-w-145 { 
width: 145px; 
 } 
.input-w-180 { 
width: 180px; 
 } 
.input-w-455 { 
width: 455px; 
 } 
.selc-w-124 { 
width: 120px; 
 } 
.w-30 { 
width: 25%; 
 } 
.option-border { 
height: 120px; 
border: 1px solid #DEDEDE; 
border-radius: 3px; 
 } 
.order-btn { 
border: 1px solid #2B9361; 
border-radius: 5px; 
color: #2B9361; 
 } 

/* 발주등록-거래처 */
.display-in { 
display: inline !important; 
 } 
.account { 
width: 170px; 
background-color: #F2F2F2; 
border-radius: 3px; 
padding: 0.5rem; 

display: grid; 
grid-template-columns: 1fr 2fr; 
font-size: 0.75rem; 
color: #646672; 
 } 
.account-text-green { 
color: #16A954; 
font-weight: 700; 
 } 
.account-badge { 
width: 60px; 
height: 20px; 
background: #B2B2B2; 
border-radius: 4px; 

font-weight: 700; 
line-height: 1.28rem; 
text-align: center; 
color: #fff; 
 } 
.badge-green { 
background-color: #16A954; 
 } 
.account-bold { 
font-size: 0.875rem; 
font-weight: 700; 
color: #000; 

width: 83px; 
 display: block; 
 white-space: nowrap; 
 overflow: hidden; 
 text-overflow: ellipsis; 
 } 
.account-empty { 
height: 75px; 
 display: block; 
 text-align: center; 
 align-items: center; 
 line-height: 59px; 
 color: #B2B2B2; 
 } 

.account02 { 
height: 75px; 
font-size: 0.75rem; 
text-align: center; 
 } 
.account02-title { 
height: 21px; 
background: #41484D; 
border-radius: 3px 3px 0px 0px; 
color: #fff; 
line-height: 1.25rem; 
font-weight: 400; 
 } 
.account02-content { 
height: 54px; 
background: #FFFFFF; 
border: 1px solid #DEDEDE; 
border-top: none; 
border-radius: 0px 0px 3px 3px; 

color:#B2B2B2; 
line-height: 1rem; 

position: relative; 
 } 

.account-grid { 
display: grid; 
grid-template-columns: 1fr 1fr; 
 } 

.badge-red { 
font-size: 0.625rem; 
color: #EF533E; 
background: #FFFFFF; 
border: 1px solid #EF533E; 
 } 
.account-red { 
color: #EF533E; 
 } 

.account-memo-new { 
position: absolute; 
top: 0.2rem; 
right: 0.65rem; 
width:16px; 
height: 16px; 
background-image: url('/common/images/glyphs/glyph-account-memo-new.svg'); 
background-repeat: no-repeat; 
background-size: contain; 
 } 

.entry-goods-tab { 
height:34px; 
background: #FFFFFF; 
color: #9D9DA4; 
font-size: 0.875rem; 
font-weight: 500; 
line-height: 2.125rem; 

cursor: pointer; 
 } 
.tab-left { 
width: 90px; 
border: 1px solid #DEDEDE; 
border-radius: 3px 0px 0px 3px; 
 } 
.tab-right { 
width: 90px; 
border: 1px solid #DEDEDE; 
border-left: none; 
border-radius: 0px 3px 3px 0px; 
 } 

.inline-block { 
display: inline-block; 
 } 
.entry-goods-tab div.active { 
background: #209B5C; 
color: #fff; 
 } 
.border-radius-3 { 
border-radius: 3px; 
 } 
.border-radius-4 { 
border-radius: 4px; 
 } 

.entry-grid { 
display: grid; 
 } 
.width-178 { 
width: 178px; 
 } 
.entry-border-bottom { 
border-bottom: 1px solid #E5E8EB; 
 } 


.content-bottom { 
width: 100%; 
border-top: 1px solid #C6C6C6; 
 } 

.bottom-memo-btn { 
width: 128px; 
height: 36px; 
font-weight: 700; 
font-size: 0.875rem; 
color: #fff; 
border: none; 
background: #2B9361; 
border-radius: 5px; 
 } 
.bottom-memo-title { 
width: 84px; 
height: 36px; 
background: rgba(43, 147, 97, 0.1); 
border: 1px solid #2B9361; 
border-radius: 4px 0px 0px 4px; 
color: #2B9361; 
font-weight: 500; 
line-height: 34px; 
 } 
.bottom-memo-input { 
width: 700px; 
border-radius: 0px 4px 4px 0px; 
 } 

.tab-title { 
width: 110px; 
color:#57575D; 
font-size: 1rem !important; 
font-weight: 700 !important; 
 } 

/*220916 배송픽업 추가*/
.extra-charge { 
padding: 1rem 1rem 1.375rem 2.25rem; 
border: 1px solid #ddd; 
 } 
.reverse-btn { 
border: none; 
background-color: #58585C; 
color: #fff; 
 } 
.basic-charge { 
display: inline-block; 
height: 28px; 
padding: 0.35rem 0.875rem; 
color: #fff; 
font-weight: 500; 
background: #209B5C; 
border-radius: 0.875rem; 
 } 
.extra-badge { 
background: #fff; 
color: #209B5C; 
border: 1px solid #209B5C; 
 } 
.extra-badge2 { 
background: #e34242; 
color: #fff; 
border: 1px solid #e34242; 
 } 
.select-region { 
font-size: 16px; 
 color: #787878; 
 font-weight: 500; 
 } 
.select-locations { 
color: #919191; 
padding-left: 2.375rem; 
 } 
.add-charge { 
color: #209B5C; 
font-weight: 700; 
font-size: 1.25rem; 
 } 
.add-charge2 { 
color: #E24C38; 
font-weight: 700; 
font-size: 1.25rem; 
 } 
.add-charge3 { 
color: #787878; 
font-weight: 700; 
font-size: 1.25rem; 
 } 


/*==== ERP 메인 변경에 따른 css 추가 ====*/
.ta-dashboad-version2 .ta-grid--dashboard { 
--grid-columns: repeat(4, minmax(0, 1fr)); 
/*--grid-columns: repeat(auto-fill, minmax(24rem, 1fr)); */
--grid-item-box-shadow: var(--box-shadow-button); 
--grid-item-background-color: white; 
--grid-item-border-radius: var(--border-radius-default); 
margin-left: 3rem; 
margin-right: 3rem; 
column-gap: 1.5rem; 
row-gap: 1.625rem; 
 } 

.ta-dashboad-version2 .ta-grid__item__content--dashboard-sales { 
--grid-item-box-shadow: none; 
--grid-row-gap: 1.5rem; 
--grid-columns: repeat(3, minmax(0, 1fr)); 
--flair-margin-bottom: .75rem; 
--div-data-margin-left: .5rem; 
 } 

.ta-dashboad-version2 .ta-grid__item__header { 
display: flex; 
justify-content: space-between; 
padding: 1.0625rem 1.5rem .8125rem; 
align-items: center; 
height: auto; 
 } 

.ta-dashboad-version2 .ta-grid__item__header__heading { 
font-weight: 500; 
font-size: 1.5rem; 
color: black; 
 } 

.ta-dashboad-version2 .ta-grid__item__content { 
position: relative; 
display: flex; 
flex-direction: column; 
flex: 1; 
padding: 0 1.5rem 1rem; 
height: 1px; 
min-height: 1px; 
min-width: 1px; 
overflow: hidden; 
background-position: right 1rem bottom 1rem; 
background-repeat: no-repeat; 
background-size: calc(100% / 4); 
 } 
.ta-dashboad-version2 .ta-flair { 
--flair-font-size: .75rem; 
font-size: var(--flair-font-size); 
background-color: #F4F7F9; 
border-radius: var(--border-radius-default); 
color: #3EB260; 
line-height: calc(var(--flair-font-size) * 1.5); 
padding: .25rem .5rem; 
font-weight: 500; 
width: max-content; 
margin-bottom: 1px; 
white-space: nowrap; 
 } 

.ta-dashboad-version2 .ta-data__sub { 
font-size: .75rem; 
color:#747774; 
margin-left: 2px; 
align-self: flex-end; 
 } 

.ta-dashboad-version2 .ta-banner { 
display: flex; 
align-items: center; 
flex: 0 0 auto; 
background-color: #F5F8FE; 
border-radius: var(--border-radius-default); 
padding: .5rem; 
 } 

.ta-dashboad-version2 .ta-banner__heading { 
font-weight: 500; 
font-size: .875rem; 
color: var(--color-cool-gray-700); 
word-break: break-all; 
overflow: hidden; 
text-overflow: ellipsis; 
display: -webkit-box; 
-webkit-line-clamp: 1; 
-webkit-box-orient: vertical; 
 } 

.ta-dashboad-version2 .ta-banner__eyebrow { 
font-size: .75rem; 
color: var(--color-cool-gray-500); 
 } 
.ta-dashboad-version2 .ta-banner__date { 
font-size: .75rem; 
color: var(--color-red-50); 
line-height: 1.5; 
 } 
.ta-dashboad-version2 .ta-data__main { 
font-size: 1rem; 
 } 
.ta-card { 
display: block; 
padding: .75rem 1.5rem; 
background: #F5F8FE; 
border-radius: 0.375rem; 
margin-bottom: .5rem; 
 } 
.ta-card:last-child { 
margin-bottom: 0; 
 } 
.ta-card__title { 
color: #000; 
font-size: .875rem; 
font-weight: 500; 
margin-bottom: 2px; 
word-break: break-all; 
overflow: hidden; 
text-overflow: ellipsis; 
display: -webkit-box; 
-webkit-line-clamp: 1; 
-webkit-box-orient: vertical; 
line-height: 1.5; 
 } 
.ta-card__date-name { 
color:#AAAEB2; 
font-size: .75rem; 
font-weight: 400; 
 } 
.ta-card__date { 
color:#747774; 
font-size: .75rem; 
font-weight: 400; 
line-height: 17.38px; 
 } 
.ta-badges { 
border-radius: .125rem; 
padding: 1px 5.5px; 
 } 
.ta-emergency { 
font-size: 0.6875rem; 
color: #fff; 
background: #F44A4A; 
 } 

.ta-dashboad__link { 
display: flex; 
color: #3b4a51; 
font-weight: 500; 
font-size: .875rem; 
text-decoration: none; 
align-items: center; 
 } 
.ta-link-file { 
display: flex; 
color: #4277FF; 
font-weight: 400; 
font-size: .75rem; 
text-decoration: none; 
align-items: center; 
 } 
.ta-dashboard__nav { 
display: flex; 
justify-content: space-between; 
align-items: center; 
border-bottom: 1px solid #E5E9EC; 
 } 
.ta-dashboard__tab { 
display: flex; 
align-items: center; 
align-items: center; 
column-gap: 22px; 
padding: 0 24px; 
 } 
.ta-dashboard__tablist { 
color: #747774; 
padding: 17px; 
cursor: pointer; 
 } 
.ta-dashboard__tablist.--active { 
font-weight: bold; 
color: #3EB260; 
border-bottom: 3px solid #b2b7bb; 
 } 
.ta-dashboad-version2 .radio-group { 
margin: 0 auto; 
 padding: 3px; 
 border-radius: 30px; 
 border-color: #b2b7bb; 
 overflow: visible; 
 } 
.ta-dashboad-version2 .radio-group > .option label { 
width: 100%; 
 justify-content: center; 
border-radius: 60px; 
color: #3b4a51; 
font-size: 13px; 
cursor: pointer; 
 } 
.ta-dashboad-version2 .radio-group > .option input[type="radio"]:checked ~ label { 
font-weight: 700; 
width: 100%; 
 } 
.ta-dashboad-version2 .radio-group > .option + .option { 
border: none; 
 } 
.ta-banner-wrap { 
width: 100%; 
height: 100%; 
display: flex; 
flex-direction: column; 
row-gap: 10px; 
 } 

.ta-banner-list { 
border-radius: .25rem; 
flex: 1; 
max-height: 88px; 

 } 
.ta-banner-img { 
width: 100%; 
height: 100%; 
background-size: contain; 
background-repeat: no-repeat; 
background-position: center; 
 } 
.ta-banner-swiper { 
width: 100%; 
height: 100%; 
position: relative
 } 

.ta-banner-swiper .swiper-pagination-bullet { 
width: 10px; 
height: 10px; 
border-radius: 100%; 
background: rgba(0, 0, 0, 0.4); 
margin: 0 4px; 
opacity: 1; 
 } 
.ta-banner-swiper .swiper-pagination { 
 bottom: 16px; 
 left: 50% !important; 
 transform: translateX(-50%); 
 } 
.ta-banner-swiper .swiper-pagination-bullet-active { 
background: #34CC68;; 
 } 
.ta-banner-swiper .swiper-slide { 
background-size: contain; 
 background-position: center; 
 background-repeat: no-repeat; 
 } 
.ta-banner-swiper .swiper-button-next,
.ta-banner-swiper .swiper-button-prev { 
width: 40px; 
height: 40px; 
background-size: cover; 
background-repeat: no-repeat; 
color: transparent; 
z-index: 100; 
 } 
.ta-banner-swiper .swiper-button-next { 
right: 16px !important; 
background-image: url('/common/images/icon-slide-next.svg'); 
 } 
.ta-banner-swiper .swiper-button-next:hover { 
background-image: url('/common/images/icon-slide-next2.svg'); 
 } 
.ta-banner-swiper .swiper-button-prev { 
left: 16px !important; 
background-image: url('/common/images/icon-slide-prev.svg')
 } 
.ta-banner-swiper .swiper-button-prev:hover { 
background-image: url('/common/images/icon-slide-prev2.svg')
 } 
.ta-banner-swiper .swiper-button-next:after, 
.ta-banner-swiper .swiper-button-prev:after { 
font-size: 0; 
 } 

/* 메시징커머스 CSS */
.preview-wrap { 
flex-grow: 1; 
 } 
.preview-wrap > .box { 
height: calc(100% - 57px); 
 } 
.preview-box { 
height: 100%; 
padding: 10px 0 0; 
 } 
.preview-box .preview-frame { 
height: 100%; 
margin: 0 auto; 
border: 1px solid #DEDEDE; 
border-radius: 0.25rem; 
 } 

.flyer-list-wrap { } 
.flyer-list { 
display: flex; 
flex-wrap: wrap; 
 } 
.flyer-list .item { 
width: 20%; 
min-width: 250px; 
padding: .75rem; 
 } 
.flyer-list .item.now { 
box-shadow: 0 0 3px var(--color-primary-400); 
border-radius: .25rem; 
 } 
.flyer-list .item .item-header { 
display: flex; 
justify-content: space-between; 
align-items: center; 
 } 
.flyer-list .item:not(.now) .item-header { 
justify-content: flex-end; 
 } 
.flyer-list .item .item-header span { 
font-weight: 700; 
 } 
.flyer-list .item:not(.now) .item-header span { 
display: none; 
 } 
.flyer-list .item .item-header .btn-wrap { } 

.flyer-list .item .item-thumbnail { 
padding: .5rem 0; 
 } 
.flyer-list .item .item-thumbnail .img-wrap { 
height: 300px; 
border: 1px solid #dedede; 
border-radius: .25rem; 
overflow: hidden; 
 } 
.flyer-list .item .item-thumbnail .img-wrap.no-img { 
background: var(--color-cool-gray-300); 
 } 
.flyer-list .item .item-thumbnail .img-wrap img { 
width: 100%; 
height: 100%; 
object-fit: cover; 
 } 

.flyer-list .item .item-footer { } 

/* ibsheet scroll css - 240223 */
body .IBMTMain *::-webkit-scrollbar { 
width: 20px; 
height: 20px; 
 } 
body .IBMTMain *::-webkit-scrollbar-button { 
width: 20px; 
height: 20px; 
 } 

/* button_type */
.btn { display:inline-block; padding:0 8px; min-width: 60px; height:30px; text-align:center; text-decoration:none; font-weight: 400; border-radius: 4px; position: relative; font-size: 15px; } 
.btn:hover { transition: 0.1s all linear; } 
.btn_basic_s { background: #ffffff; color: #646673; border:1px solid #aeaeae; display:inline-block; padding:0 8px; min-width: 60px; height:30px; text-align:center; text-decoration:none; font-size: 15px; font-weight: 400; border-radius: 4px; position: relative; box-shadow: 2px 2px 2px 0px rgb(0 0 0 / 10%), inset 0px 0px 0px rgb(255 255 255 / 0%); } 
.btn_basic_s:hover { background: #e64d2c; color:#ffffff; border:1px solid #e64d2c; transition: 0.1s all linear; } 
button.green { background: #1e6c42; color: #ffffff; border:0px solid #dedede; } 
button.green:hover { background: #3aa76d; color:#ffffff; border:0px; } 
button.red { background: #d11717; color: #ffffff; border:0px solid #dedede; } 
button.red:hover { background: #ff1b1b; color:#ffffff; border:0px; } 
button.gray { background: #686868; color: #ffffff; border:0px solid #dedede; } 
button.gray:hover { background: #a8a8a8; color:#ffffff; border:0px; } 
button.orange { background: #e64d2c; color: #ffffff; border:0px solid #dedede; } 
button.orange:hover { background: #ff7254; color:#ffffff; border:0px; } 
button.blue { background: #071668; color: #ffffff; border:0px solid #dedede; } 
button.blue:hover { background: #303d85; color:#ffffff; border:0px; } 

/* 필수값 */
.required { color: #e64d2c; } 
.required::before { content:'*'; font-weight: 600; color: #e64d2c; display: inline-block; position:absolute; width:20px; height: 20px; left: 0px; 
 top: -7px; } 
/* 유효성체크 */
.validity_error { border: 1px solid red !important; border-radius: 4px; } 
.validity_error::after { content: ""; display: block; width: 14px; height: 14px; position: absolute; left: 0px; top: 0; background: url(../images/ico_error.png) transparent center center no-repeat; } 

/* 컬러 */
.black { color:#000000 !important; } 
.wh { color:#ffffff !important; } 
.red { color:#ff0000 !important; } 
.orange { color:#ef7601 !important; } 
.yellow { color:#ffff00 !important; } 
.green { color:#008000 !important; } 
.blue { color:#3b6fb3 !important; } 
.navy { color:#000080 !important; } 
.purple { color:#800080 !important; } 
.grey { color:#757575 !important; } 
.mint { color:#38b59f !important; } 

/* 화면스플릿기능추가 */
.gutter { background:#cccccc; margin: 0 !important; padding: 0 !important; } 
.split-vertical { display: flex; flex-direction: column; height: 100vh; } 
.gutter.gutter-vertical { cursor: row-resize; height: 4px !important; z-index: 100; }
.split-horizontal { display: flex; height: 100vh; } 
.gutter.gutter-horizontal { cursor: col-resize; width: 4px !important; z-index: 100; }



.multiple_rows .label,.multiple_rows .content-options span {margin-right:7px;}
.multiple_rows .option-group > .option > * + *  {margin: 0 !important;}


.font_red {color: #ff0000 !important;} 
.font_red:hover { color:#ffffff !important; } 

.font_red2 {color: #e58772 !important;} 
.font_red2:hover { color:#ffffff !important; } 

.font_blue {color: #2600ff !important;} 
.font_blue:hover { color:#ffffff !important; }