@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: 1.2rem 1rem 1rem;
	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: -1rem;
	margin-bottom: -1rem;
}

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

.content-header > .head {
	margin-bottom: 1rem;
	max-height: 40px;
	height: 40px;
	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: 3rem;
	justify-content: space-between;
	padding: .25rem;
	white-space: nowrap;
	border-radius: .25rem .25rem 0 0;
}
.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;
	/* 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: 1rem;
	margin-right: 2rem;
	white-space: nowrap;
}

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

.option-group {
	display: flex;
	align-items: center;
	/* margin: 0 -.75rem; */
}
.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 !important;
}
/* 라벨에 메모 있는 경우 추가 - 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,
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: 36px;
	height: 36px;
	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;
}
	
.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:not(.content-options) {
	display: flex;
	flex-direction: column;
	/* fix height width resize problem */
	min-height: 1px;
	min-width: 1px;
}

.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;
}
.tab_menu > li{
	height: 35px; 
	line-height: 35px;
	font-size: .75rem;
	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 #10B981;
}
.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: rgba(255, 0, 0, 0.2);
	color: red;
}

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

.calendar-dates .calendar-row > .date.week-selected{
	background-color: rgba(255,255,65, .1);
	cursor: not-allowed;
}

.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: 40px;
	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 2px rgb(124 216 170),
				0 0 0 4px rgb(208 234 220);
	border-color: transparent;
	transition: 0.2s all linear;
	z-index: 2;
}

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: 1px 1px 0 1px rgb(124 216 170),
				1px -1px 0 1px rgb(124 216 170),
				2px 2px 0 2px rgb(208 234 220),
				2px -2px 0 2px rgb(208 234 220);
	border-color: transparent;
	transition: 0.2s all linear;
	z-index: 2;
}

select:hover {
	box-shadow: var(--box-shadow-button-darker);
}

.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-f8.svg");
}
button.header:hover i.glyph.inquiry {
	background-image: url("/common/images/glyphs/glyph-f8.svg");
}
button.header i.glyph.save {
	background-image: url("/common/images/glyphs/glyph-f9.svg");
}
button.header:hover i.glyph.save {
	background-image: url("/common/images/glyphs/glyph-f9.svg");
}
button.header i.glyph.new,
button.header i.glyph.reset {
	background-image: url("/common/images/glyphs/glyph-f4.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-f4.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-tomato);
}

.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;
}
.no-delete .sms-sidebar__image-thumbnail{
	cursor: initial;
}
.no-delete .sms-sidebar__image-thumbnail::after{
	display: 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);
}


/* TOMATO ADMIN CSS */

.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);
}

.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__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{
	color: var(--color-primary);
    font-weight: bold;
}
.title_depth_top i.chevron-right2{
	width: 16px; height: 16px;
}

/* 아이비 시트 잠금 아이콘 */
.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(5, 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: 1rem;
	margin-right: 49px;
	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: #3EB260;
	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 #3EB260;
}
.ta-dashboad-version2 .radio-group{
	margin: 0 auto;
    padding: 3px;
    border-radius: 30px;
    border-color: #209B5C;
    overflow: visible;
}
.ta-dashboad-version2 .radio-group > .option label{
	width: 72px;
    justify-content: center;
	border-radius: 60px;
	color: #209B5C;
	font-size: 13px;
	cursor: pointer;
}
.ta-dashboad-version2 .radio-group > .option input[type="radio"]:checked ~ label{
	font-weight: 700;
}
.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 */
.btn-mc-next{
	text-align: center;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: .25rem;
}
.btn-mc-next > button{
	width: 80px;
}
.preview-wrap{
	width: 400px;
}
.preview-wrap > .box{
	height: calc(100% - 57px);
}
.preview-box{
	height: 100%;
	padding: 10px 0 0;
}
.preview-box .preview-frame{
	width: 360px;
	height: 100%;
	margin: 0 auto;
	border: 1px solid #ddd;
	overflow-y: scroll;
	overflow-x: hidden;
}
.preview-box .preview-frame:has(section.home){
	background: var(--home-bg);
}
.preview-box .preview-frame .status-bar img{
	display: block;
	width: calc(100% + 1px);
	position: relative;
	z-index: 1;
}

.flyer-list-wrap{}
.flyer-list{
	display: flex;
	flex-wrap: wrap;
}
.flyer-list .item{
	width: 20%;
	min-width: 330px;
	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 .item-header button.green{
	background: var(--color-primary);
	color: #fff;
}
.flyer-list .item:not(.now, .end) .item-header{
	/* justify-content: flex-end; */
}
.flyer-list .item .item-header p{
	font-weight: 700;
	color: goldenrod;
}
.flyer-list .item.now .item-header p{
	color: var(--color-primary);
}
.flyer-list .item.exp .item-header p{
	color:  var(--color-blue);
}
.flyer-list .item.end .item-header p{
	color: var(--color-gray-500);
}
.flyer-list .item .item-header p:after{
	content: "임시 전단";
}
.flyer-list .item.now .item-header p:after{
	content: "노출중";
}
.flyer-list .item.exp .item-header p:after{
	content: "노출 예정";
}
.flyer-list .item.end .item-header p:after{
	content: "노출 기간 만료";
}
.flyer-list .item:not(.now, .end) .item-header p{
	/* display: none; */
}
.flyer-list .item .item-header .btn-wrap{}

.flyer-list .item .item-thumbnail{
	padding: .5rem 0 0;
	position: relative;
}
.flyer-list .item .item-thumbnail .img-wrap{
	height: 250px;
	border: 1px solid #dedede;
	border-bottom: none;
	border-top: none;
	/* border-radius: .25rem .25rem 0 0; */
	overflow: hidden;
	position: relative;
}
.flyer-list .item .item-thumbnail .img-wrap:not(:has(img)){
	background: rgb(255,230,153);
}
.flyer-list .item .item-thumbnail .img-wrap img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.flyer-list .item .item-thumbnail .img-wrap img.no-img{
	object-fit: cover;
}
.flyer-list .item .item-thumbnail .img-wrap p{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-height: 100%;
    padding: 20px 15px;
    text-align: center;
    word-break: keep-all;
    text-wrap: balance;
    font-size: 24px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	overflow: hidden;
    box-sizing: border-box;
}

.flyer-list .item .item-thumbnail .txt-wrap{
	/* position: absolute;
	top: .5rem;
	left: 1px; */
	/* width: calc(100% - 2px); */
}
.flyer-list .item .item-thumbnail .txt-wrap .txt-box{
	min-height: 38px;
	padding: 5px 10px;
	text-align: center;
	background-color: goldenrod;
	border-radius: .25rem .25rem 0 0;
}
.flyer-list .item.now .item-thumbnail .txt-wrap .txt-box{
	background-color: var(--color-primary);
}
.flyer-list .item.exp .item-thumbnail .txt-wrap .txt-box{
	background-color: var(--color-blue);
}
.flyer-list .item.end .item-thumbnail .txt-wrap .txt-box{
	background-color: var(--color-gray-500);
}
.flyer-list .item .item-thumbnail .txt-wrap .txt-box > p{
	margin: 5px 0;
	font-size: 13px;
	color: #fff;
}
.flyer-list .item .item-thumbnail .txt-wrap .txt-box > p > span{
	display: block;
	font-size: 15px;
	font-weight: 700;
	word-break: keep-all;
}

i.glyph.handle{
	background-image: url('/common/images/glyphs/glyph-hamburger.svg');
	background-repeat: no-repeat;
	background-size: cover;
	filter: brightness(0.1);
	vertical-align: top;
}

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

/* 통합메시지 발송화면 리뉴얼 */
.tms-wrapper button:focus{
	outline: none;
}
.tms-wrapper .section01 .top-box{
	padding: 20px;
	background: #41484D;
	border-radius: 20px;
	position: relative;
}
.tms-wrapper .section01 .top-box > dl{}
.tms-wrapper .section01 .top-box > dl > div{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 10px;
}
.tms-wrapper .section01 .top-box > dl > div:last-of-type{
	margin: 0;
}
.tms-wrapper .section01 .top-box > dl > div.highlight{
	margin: 20px 0 10px;
}
.tms-wrapper .section01 .top-box > dl > div >  dt{
	font-size: 15px;
	color: #BABABA;
}
.tms-wrapper .section01 .top-box > dl > div >  dt select{
	height: auto;
	padding: 4px 20px 4px 8px;
	margin: 0 0 0 4px;
	font-size: 13px;
	color: #fff;
	background: #000 url('/common/images/glyphs/glyph-select-arrows-w.svg') no-repeat center right 5px;
	background-size: 10px 10px;
	/* border-radius: 10px; */
	box-shadow: none;
}
.tms-wrapper .section01 .top-box > dl > div >  dd{
	font-size: 16px;
	color: #fff;
}
.tms-wrapper .section01 .top-box > dl > div >  dd select{
	height: auto;
	padding: 2px 30px 4px 8px;
	color: #fff;
	/* text-align: right; */
	background: #000 url('/common/images/glyphs/glyph-select-arrows-w.svg') no-repeat center right 5px;
	box-shadow: none;
}
.tms-wrapper .section01 .top-box > dl > div:not(.highlight):not(:has(#SND_TEL_NO option)){
	display: none;
}
.tms-wrapper .section01 .top-box > dl > div >  dd:has(span#AD_TITLE1){
	display: block;
	/* width: calc(100% - 165px); */
	/* text-align: right; */
}
.tms-wrapper .section01 .top-box > dl > div.highlight >  dt{
	margin: 0 0 3px;
	color: #AEAEAE;
}
.tms-wrapper .section01 .top-box > dl > div.highlight >  dd{
	font-size: 15px;
	color: #C0C0C0;
}
.tms-wrapper .section01 .top-box > dl > div.highlight >  dd > span{
	margin: 0 2px 0 0;
	font-size: 24px;
	font-weight: 700;
	color: #3EDF8D;
	letter-spacing: -1px;
}
/* .tms-wrapper .section01 .top-box > dl > div:nth-of-type(2) >  dt::before{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url('/common/images/ico-str.svg') no-repeat center / contain;
	vertical-align: sub;
}
.tms-wrapper .section01 .top-box > dl > div:nth-of-type(3) >  dt::before{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url('/common/images/ico-phone.svg') no-repeat center / contain;
	vertical-align: sub;
} */
.tms-wrapper .section01 .top-box .btn-top-refresh{
	position: absolute;
	top: 20px;
	right: 20px;
	height: auto;
	padding: 0 0 0 14px;
	font-size: 12px;
	color: #BABABA;
	background: #41484D url('/common/images/glyphs/glyph-refresh-w.svg') no-repeat center left;
	background-size: 10px 10px;
	border: none;
}

.tms-wrapper .section01 .center-box{
	padding: 15px 0 5px;
}
.tms-wrapper .section01 .center-box .center-header{
	display: flex;
	align-items: center;
	padding: 0 0 10px;
	border-bottom: 1px solid #707070;
}
.tms-wrapper .section01 .center-box .center-header > p{
	line-height: 1;
	font-size: 18px;
	color: #363636;
}
.tms-wrapper .section01 .center-box .center-header > p:before{
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	margin: 0 2px 0 0;
	background: url('/common/images/glyphs/glyph-msg.svg') no-repeat center / contain;
	vertical-align: sub;
}
.tms-wrapper .section01 .center-box .center-header > span{
	display: inline-block;
    padding: 4px 15px 3px;
    font-size: 12px;
    color: #58585C;
    border: 1px solid #DEDEDE;
    border-radius: 20px;
    cursor: pointer;
}
.tms-wrapper .section01 .center-box #divPrcList2{
	padding: 14px 12px 14px 10px;
	border-bottom: 1px solid #D8D8D8;
}

.center-box #divPrcList2 > div{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 14px;
}
.center-box #divPrcList2 > div:last-of-type{
	margin: 0;
}
.center-box #divPrcList2 > div > dt{
	color: #63676A;
}
.center-box #divPrcList2 > div > dd{
	font-weight: 500;
	color: #000;
}

.tms-wrapper{
	overflow-x: auto;
}
.tms-wrapper .content-container:has(.section02){
	min-width: 660px;
	overflow: visible;
}

.tms-wrapper .section01 .center-box .center-btn-wrap{
	padding: 20px 0;
}
.tms-wrapper .section01 .center-box .center-btn-wrap > a{
	display: block;
	padding: 12px 0;
	margin: 0 0 6px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 20px;
	background: #059669;
	border: 1px solid #059669;
	border-radius: 8px;
}
.tms-wrapper .section01 .center-box .center-btn-wrap > a.white{
	color: #209B5C;
	background: #fff;
}
.tms-wrapper .section01 .center-box .center-btn-wrap > button{
	display: block;
	width: 100%;
	height: auto;
	padding: 15px 0;
	text-align: center;
	font-size: 16px;
	color: #209B5C;
	border: 1px solid #209B5C;
	border-radius: 8px;
}

.tms-wrapper .section01 .bottom-box{}
.tms-wrapper .section01 .bottom-box > dl{}
.tms-wrapper .section01 .bottom-box > dl > div{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 20px;
}
.tms-wrapper .section01 .bottom-box > dl > div:last-of-type{
	margin: 0;
}
.tms-wrapper .section01 .bottom-box > dl > div > dt{
	font-size: 15px;
	font-weight: 700;
	color: #000;
}
.tms-wrapper .section01 .bottom-box > dl > div > dt::before{
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	margin: 0 4px 0 0;
	vertical-align: text-bottom;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px auto;
}
.tms-wrapper .section01 .bottom-box > dl > div:nth-of-type(1) > dt::before{
	background-image: url('/common/images/ico-msg-rsv.svg');
	background-size: 20px 17px;
}
.tms-wrapper .section01 .bottom-box > dl > div:nth-of-type(2) > dt::before{
	background-image: url('/common/images/ico-msg-repeat.svg');
}
.tms-wrapper .section01 .bottom-box > dl > div:nth-of-type(3) > dt::before{
	background-image: url('/common/images/ico-coin.svg');
}
.tms-wrapper .section01 .bottom-box > dl > div > dd{
	display: flex;
	align-items: center;
}
.tms-wrapper .section01 .bottom-box > dl > div > dd .timer{
	margin: 1px 10px 0 0;
	font-size: 13px;
	line-height: 1;
	color: #209B5C;
}
.tms-wrapper .section01 .bottom-box > dl > div > dd .tms-details{
	height: auto;
	padding: 0;
	border: none;
}
.tms-wrapper .section01 .bottom-box > dl > div > dd .tms-details > span{
	display: inline-block;
}
/* .tms-wrapper .section01 .bottom-box > dl > div > dd .btn-go-page::after{
	content: "";
	display: inline-block;
	width: 14px;
	height: 22px;
	background: url('/common/images/glyphs/glyph-chevron-right.svg') no-repeat center / contain;
} */

.tms-wrapper .section02 .inner-box{
	margin: 0 0 10px;
	padding: 20px 15px;
}
.tms-wrapper .section02 .inner-box:has(.inner-box){
	padding: 0;
	overflow: hidden;
}
.tms-wrapper .section02 .inner-box > .inner-box{
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}
.tms-wrapper .section02 .inner-box.header{
	position: relative;
}
.tms-wrapper .section02 .inner-box.header::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 5px;
	height: 40px;
	background: #209B5C;
	border-radius: 0 3px 3px 0;
}

.tms-wrapper .section02 .inner-box:last-of-type{
	margin: 0;
}
.tms-wrapper .section02 .inner-box .inner{
	margin: 0 0 20px;
}
.tms-wrapper .section02 .inner-box .inner:last-of-type{
	margin: 0;
}
.tms-wrapper .section02 .inner-box .inner.flex{
	align-items: center;
}
.tms-wrapper .section02 .inner-box .inner h3{
	min-width: 130px;
	font-size: 15px;
}
.tms-wrapper .section02 .inner-box .inner h3 > p{
	margin: 5px 0 0;
	font-size: 12px;
	font-weight: 400;
	color: #8D8D8D;
}
.tms-wrapper .section02 .inner-box .inner:not(.flex) h3{
	margin: 0 0 10px;
}
.tms-wrapper .section02 .inner-box .inner .radio-group{
	overflow: visible;
}
.tms-wrapper .section02 .inner-box .inner .radio-option:has(.radio-tooltip){
	position: relative;
}
.tms-wrapper .section02 .inner-box .inner .radio-tooltip{
	position: absolute;
	display: flex;
	justify-content: space-between;
	width: 270px;
	top: calc(100% + 3px);
	left: -10px;
	padding: 6px 10px;
	background: #EB9F0D;
	border-radius: 5px;
	z-index: 1;
}
.tms-wrapper .section02 .inner-box .inner .radio-tooltip:after{
	content: "";
	position: absolute;
	top: -10px;
	left: 65px;
	width: 15px;
    height: 15px;
    transform: rotate(60deg) skewX(30deg) translateY(4px);
	background: #EB9F0D;
	z-index: -1;
}
.tms-wrapper .section02 .inner-box .inner .radio-tooltip > p{
	max-width: 210px;
	line-height: 16px;
	font-size: 13px;
	color: #fff;
	white-space: normal;
	word-break: keep-all;
}
.tms-wrapper .section02 .inner-box .inner .radio-tooltip .btn-close-tooltip{
	filter: brightness(10);
	cursor: pointer;
}

.tms-wrapper .section02 .inner-box .inner .textarea{
	padding: 15px;
    font-size: 14px;
	line-height: 20px;
	color: #000;
	background: #F4F5F7;
	border: 1px solid #DEDEDE;
    border-radius: .25rem;
}
.tms-wrapper .section02 .inner-box .inner .textarea input:first-of-type{
	margin: 4px 0 0;
}
.tms-wrapper .section02 .inner-box .inner.pos-relative > button,
.tms-wrapper .section02 .inner-box .inner.pos-relative .btn-wrap{
	position: absolute;
	top: 0;
	right: 0;
}
.tms-wrapper .section02 .inner-box .inner.pos-relative .btn-wrap .app_msg_use_y.alert{
	position: relative;
}
.tms-wrapper .section02 .inner-box .inner.pos-relative .btn-wrap .app_msg_use_y.alert::before {
    content: "※ 글자 수 초과";
    position: absolute;
    top: -22px;
    left: -10px;
    font-size: 12px;
    color: #ff0000;
    font-weight: 400;
}
.tms-wrapper .section02 .inner-box .inner.pos-relative .btn-wrap .app_msg_use_y.alert::after{
	content: "!";
	position: absolute;
	top: -6px;
	left: -8px;
	width: 18px;
	height: 18px;
	color: #fff;
	background: red;
	border-radius: 50%;
}

.tms-wrapper .section02 .inner-box .inner.pos-relative > .app_msg_use_y{
	padding: 30px 10px;
	background: #eee;
	border: 1px solid #dedede;
	border-radius: .25rem;
}
.tms-wrapper .section02 .inner-box .inner.pos-relative .app_msg_use_y > p{
	text-align: center;
	font-size: 16px;
	font-weight: 500;
}

.tms-wrapper .section02 .inner-box .inner .image-thumbnail{
	border-color: #b9b9b9;
	position: relative;
}
.tms-wrapper .section02 .inner-box .inner .image-thumbnail:not(:has(button)):hover:after{
	content: '삭제';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,.2);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}
.tms-wrapper .section02 .inner-box .inner .small-txt{
	text-align: right;
}
.tms-wrapper .section02 .inner-box .inner .small-txt *{
	font-size: 14px;
	line-height: 18px;
	vertical-align: middle;
}
.tms-wrapper .section02 .inner-box .inner .small-txt .btn_tooltip{
	font-size: 9px;
    border: 1px solid #9F9F9F;
    border-radius: 50%;
    color: #9F9F9F;
	cursor: help;
}
.tms-wrapper .section02 .inner-box .inner .small-txt #MSG_LENGHT,
.tms-wrapper .section02 .inner-box .inner .small-txt #MSG_LENGHT_MAX{
	font-weight: 500;
}

.tms-wrapper .section02 .inner-box .table-box{
	flex: 1;
	min-width: 350px;
	margin: 0 20px 0 0;
}
.tms-wrapper .section02 .inner-box .table-box .btn_memSchlpop{
	position: absolute;
	top: 28px;
	right: 0;
	width: calc(50% - 10px);
	height: auto;
	padding: 8px 0;
	font-size: 18px;
	font-weight: 500;
	color: #fff;
	background: #059669;
	border-color: #059669;
}
.tms-wrapper .section02 .inner-box .table-box .btn_memSchlpop > i{
	filter: brightness(10);
	margin-right: 4px;
}
.tms-wrapper .section02 .inner-box .table-box table{
	width: 100%;
	border-spacing: 0;
	border-top: 2px solid #C0C0C0;
}
.tms-wrapper .section02 .inner-box .table-box th,
.tms-wrapper .section02 .inner-box .table-box td{
	padding: 10px;
}
.tms-wrapper .section02 .inner-box .table-box th{
	text-align-last: left;
	background: #F5F5F5;
	border: 1px solid #E8E8E8;
	border-top: none;
}
.tms-wrapper .section02 .inner-box .table-box td{
	text-align: right;
	border: 1px solid #E8E8E8;
	border-top: none;
	border-left: none;
}
.tms-wrapper .section02 .inner-box .table-box td > span{
	margin: 0 5px 0 0;
	font-size: 16px;
	font-weight: 700;
}

.tms-wrapper .section02 .inner-box .table-box + .price-box{
	display: flex;
	flex: 1;
	min-width: 440px;
	justify-content: center;
	align-items: center;
	padding: 15px 0;
	text-align: center;
	background: #41484D;
	border-radius: 5px;
}
.tms-wrapper .section02 .inner-box .table-box + .price-box div{
	padding: 10px 0;
}
.tms-wrapper .section02 .inner-box .table-box + .price-box p{
	font-size: 18px;
	color: #fff;
}
.tms-wrapper .section02 .inner-box .table-box + .price-box p:has(span){
	margin: 5px 0 0;
	color: #89958F;
}
.tms-wrapper .section02 .inner-box .table-box + .price-box p span{
	margin: 0 2px 0 0;
	font-size: 30px;
	font-weight: 500;
	color: #3EDF8D;
	letter-spacing: -0.5px;
}

@media screen and (max-width: 1685px) {
	.tms-wrapper .section02 .inner-box .table-box{
		width: 100%;
		min-width: 100%;
		margin: 0 0 15px 0;
	}
	.tms-wrapper .section02 .inner-box .table-box table{
		margin: 65px 0 0;
	}
	.tms-wrapper .section02 .inner-box .table-box .btn_memSchlpop{
		width: 100%;
	}
}

.tms-wrapper .section02 .btn-send-wrap{
	padding: 5px 0 15px;
	text-align: center;
}
.tms-wrapper .section02 .btn-send-wrap > button{
	width: 150px;
	height: 45px;
	margin: 0 10px;
	font-size: 16px;
	font-weight: 400;
	color: #059669;
	border-color: #059669;
}
.tms-wrapper .section02 .btn-send-wrap > button.primary{
	color: #fff;
	background: #059669;
}

.section03 > .btn-preview{
	display: block;
	width: 306px;
	height: auto;
	margin: 10px auto;
	padding: 8px 14px;
	color: #fff;
	border: none;
	background: #059669;
}
.section03 > .btn-preview:before{
	content: "";
	display: inline-block;
	width: 18px;
	height: 16px;
	margin: -2px 5px 1px 0;
	background: url('/common/images/glyphs/glyph-refresh-w.svg') no-repeat center / cover;
	vertical-align: middle;
}

.tms-preview-wrap{
	width: 320px;
	height: calc(100% - 180px);
	margin: 0 auto;
	background: #111;
	border: 8px solid #424242;
	border-radius: 48px;
	overflow: hidden;
}
.tms-preview-box{
	height: 100%;
	background: #fff;
	overflow: hidden;
}

.tms-preview-wrap .preview-type{
	height: 100%;
	position: relative;
	overflow: hidden;
}
.tms-preview-wrap .swiper-pagination{
	left: 50% !important;
	bottom: 15px !important;
	transform: translateX(-50%);
}
.tms-preview-wrap .swiper-pagination .swiper-pagination-bullet{
	width: 15px;
	height: 15px;
	margin: 0 5px;
	opacity: .8;
}
.tms-preview-wrap .swiper-pagination .swiper-pagination-bullet-active{
	opacity: 1;
	background: #059669;
}
.section03 > .btn-preview + .control-wrap{
	margin: 10px 0;
}
/* .section03 > .btn-preview + .control-wrap .btn-swiper-prev,
.section03 > .btn-preview + .control-wrap .btn-swiper-next{
	cursor: pointer;
}
.section03 > .btn-preview + .control-wrap .method-name{
	display: block;
	min-width: 80px;
	margin: 0 10px 1px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
} */
.control-wrap .swiper-pagination{
	position: relative;
}
.control-wrap .swiper-pagination .swiper-pagination-bullet{
	width: 45%;
	height: auto;
	margin: 2px;
	padding: 7px 10px;
	font-size: 13px;
	color: #059669;
	border: 1px solid #209B5C;
	border-radius: 4px;
	background: #fff;
	opacity: 1;
	box-sizing: border-box;
	cursor: pointer;
}
.control-wrap .swiper-pagination .swiper-pagination-bullet-active{
	background: rgba(5, 150, 105, .3);
	color: #000;
}
.control-wrap .swiper-pagination .swiper-pagination-bullet.disabled{
	opacity: .2;
	pointer-events: none;
}

.tms-preview{
	height: 100%;
}
.tms-preview .icon{
	margin: 0 10px 0 0;
}
.tms-preview .icon img{
	width: 35px;
	height: 35px;
	vertical-align: middle;
}

.tms-preview.type01{
	padding: 80px 0;
	position: relative;
}
.tms-preview.type01::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #808080;
	opacity: .73;
	z-index: -1;
}
.tms-preview.type01 > p{
	text-align: center;
	font-size: 18px;
	color: #212121;
}
.tms-preview.type01 > p > span{
	display: block;
	line-height: 1;
	font-size: 60px;
	font-family: var(--gmrkt-sans);
}
.tms-preview.type01 .push-box{
	display: flex;
	width: calc(100% - 30px);
	padding: 10px;
	margin: 30px auto;
	align-items: center;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 15px rgba(0,0,0,.1);
	position: relative;
}
.tms-preview.type01 .push-box .txt-box{
	width: calc(100% - 45px);
	font-size: 13px;
}
.tms-preview.type01 .push-box .txt-box .title{
	margin: 0 0 2px;
	padding: 0 33px 0 0;
	font-size: 13px;
	line-height: 16px;
	font-weight: 500;
	color: #000;
}
.tms-preview.type01 .push-box .txt-box .txt{
	line-height: 16px;
	font-weight: 300;
}
.tms-preview.type01 .push-box .txt-box .txt > p{
	color: #212121;
}
.tms-preview.type01 .push-box > span{
	position: absolute;
    top: 13px;
    right: 12px;
    font-size: 12px;
    font-weight: 300;
	font-family: var(--pretendard);
    line-height: 1;
    color: #B3B3B3;
}

.tms-preview.type02,
.tms-preview.type03,
.tms-preview.type04{
	padding: 50px 15px;
}
.tms-preview.type02 .scroll-y,
.tms-preview.type03 .scroll-y{
	height: 100%;
	overflow-x: hidden;
}
.tms-preview.type03 .scroll-y{
	padding: 0 5px 0 0;
}
.tms-preview.type02 .scroll-y::-webkit-scrollbar,
.tms-preview.type03 .scroll-y::-webkit-scrollbar{
	width: 5px;
	background-color: #fff;
}
.tms-preview.type02 .scroll-y::-webkit-scrollbar-thumb,
.tms-preview.type03 .scroll-y::-webkit-scrollbar-thumb{
	background: #999;
	border-radius: 5px;
}
.tms-preview.type02 .head{
	padding: 0 0 10px;
}
.tms-preview.type02 .head .title{
	margin: 0 0 5px;
	font-size: 16px;
	font-weight: 500;
	color: #000;
}
.tms-preview.type02 .head > span{
	font-size: 12px;
	color: #B3B3B3;
}
.tms-preview.type02 .txt-box{}
.tms-preview.type02 .txt-box .img{
	margin: 0 0 10px;
}
.tms-preview.type02 .txt-box .img .img-type{
	height: 200px;
}
.tms-preview.type02 .txt-box .img .swiper-slide img{
	display: block;
	max-width: 100%;
	height: 100%;
	margin: 0 auto;
	object-fit: contain;
}
/* .tms-preview.type02 .txt-box .img > img:last-of-type{
	margin: 0 auto;
} */
.tms-preview.type02 .txt-box .txt{
	padding: 0 10px;
	line-height: 20px;
}
.tms-preview.type02 .txt-box .txt p{
	word-break: break-all;
}

.tms-preview.type03 .sms-box{
	display: flex;
}
.tms-preview.type03 .txt-box{
	width: calc(100% - 45px);
	padding: 15px;
	font-size: 15px;
	line-height: 20px;
	background: #EDEDED;
	border-radius: 20px;
}
.tms-preview.type03 .txt-box > p{
	word-break: break-all;
}
.tms-preview.type03 .txt-box > p > a{
	color: #0789ff;
	text-decoration: underline;
	pointer-events: none;
}
.tms-preview.type03 .txt-box > .img{
	margin: 10px 0;
	border-radius: 6px;
	overflow: hidden;
}
.tms-preview.type03 .txt-box > .img img{
	display: block;
	max-width: 100%;
}

.tms-preview.type04{
	background: #BADBF9;
}
.tms-preview.type04 .talk-box{
	display: flex;
}
.tms-preview.type04 .talk-box .talk{}
.tms-preview.type04 .talk-box .talk > p{
	font-size: 13px;
	font-weight: 500;
}
.tms-preview.type04 .talk-box .talk .txt-box{}
.tms-preview.type04 .talk-box .head{
	height: 50px;
	background: url('/common/images/mcbase/bg-kakao.png') no-repeat left top / contain;
}
.tms-preview.type04 .talk-box .head .hide{
	display: none;
}
.tms-preview.type04 .talk-box .txt{
	width: 224px;
	padding: 13px 10px 15px;
	line-height: 16px;
	font-size: 13px;
	background: #fff;
	border-radius: 0 0 14px 14px;
	word-break: keep-all;
}
.tms-preview.type04 .talk-box .txt > p{}
.tms-preview.type04 .talk-box .txt > span{
	display: block;
	padding: 8px 0;
	margin: 10px 0 0;
	text-align: center;
	background: #f5f5f5;
	border-radius: 5px;
}

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