@charset "UTF-8";



html {
	font-size: 10px;
}

html[lang=ko-KR],
html[lang=ko] {
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", sans-serif;
}

html[lang=ko-KR] body,
html[lang=ko] body {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #262626;
}

html[lang=en],
html *[lang=en] {
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", sans-serif;
}

html[lang=en] body,
html *[lang=en] body {
	font-size: 16px;
	font-weight: 400;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
	-webkit-text-size-adjust: 100%;
}

main {
	display: block;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
}

b,
strong {
	font-weight: bolder;
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

img {
	border-style: none;
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button,
input {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

legend {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

[type=checkbox],
[type=radio] {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
	height: auto;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

details {
	display: block;
}

summary {
	display: list-item;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

/* reset */
html * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	word-wrap: break-word;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
figure,
legend,
input,
textarea,
button,
p,
blockquote,
th,
td,
form,
fieldset,
blockquote,
iframe {
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

article,
aside,
canvas,
details,
embed,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
	display: block;
}

command,
datalist,
keygen,
mark,
meter,
progress,
rp,
rt,
ruby,
time,
wbr {
	display: inline;
}

img {
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	border: 0;
	image-rendering: -moz-crisp-edges;
	/* firefox */
	image-rendering: -o-crisp-edges;
	/* opera */
	image-rendering: -webkit-optimize-contrast;
	/* chrome(비표준) */
	image-rendering: crisp-edges;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

fieldset {
	border: 0;
}

ul,
ol,
li {
	list-style: none;
}

pre {
	white-space: pre-wrap;
}

legend,
caption {
	position: relative;
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	border: 0;
	padding: 0;
	white-space: nowrap;
	clear: both;
}

a {
	color: inherit;
	cursor: pointer;
	background-color: transparent;
}

a:link {
	text-decoration: none;
}

a:hover,
a:focus,
a:active,
a:visited {
	text-decoration: none;
}

em,
i,
address,
cite {
	font-style: normal;
	font-weight: normal;
}

input,
textarea,
select,
button,
table {
	font-size: inherit;
	font-family: inherit;
	border: 0;
	background-color: transparent;
}

button,
select {
	cursor: pointer;
}

textarea,
input,
select {
	border-radius: 0;
	border: 0;
	outline-color: -moz-use-text-color;
	outline-width: medium;
}

textarea {
	resize: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

label {
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

table {
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
}

th,
td {
	border-collapse: collapse;
}

select::-ms-expand {
	display: none;
}



html {
	font-size: 10px;
}

html[lang=ko-KR],
html[lang=ko] {
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", sans-serif;
}

html[lang=ko-KR] body,
html[lang=ko] body {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #262626;
}

html[lang=en],
html *[lang=en] {
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", sans-serif;
}

html[lang=en] body,
html *[lang=en] body {
	font-size: 16px;
	font-weight: 400;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
	-webkit-text-size-adjust: 100%;
}

main {
	display: block;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
}

b,
strong {
	font-weight: bolder;
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

img {
	border-style: none;
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button,
input {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

legend {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

[type=checkbox],
[type=radio] {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
	height: auto;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

details {
	display: block;
}

summary {
	display: list-item;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

/* reset */
html * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	word-wrap: break-word;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
figure,
legend,
input,
textarea,
button,
p,
blockquote,
th,
td,
form,
fieldset,
blockquote,
iframe {
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

article,
aside,
canvas,
details,
embed,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
	display: block;
}

command,
datalist,
keygen,
mark,
meter,
progress,
rp,
rt,
ruby,
time,
wbr {
	display: inline;
}

img {
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	border: 0;
	image-rendering: -moz-crisp-edges;
	/* firefox */
	image-rendering: -o-crisp-edges;
	/* opera */
	image-rendering: -webkit-optimize-contrast;
	/* chrome(비표준) */
	image-rendering: crisp-edges;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

fieldset {
	border: 0;
}

ul,
ol,
li {
	list-style: none;
}

pre {
	white-space: pre-wrap;
}

legend,
caption {
	position: relative;
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	border: 0;
	padding: 0;
	white-space: nowrap;
	clear: both;
}

a {
	color: inherit;
	cursor: pointer;
	background-color: transparent;
}

a:link {
	text-decoration: none;
}

a:hover,
a:focus,
a:active,
a:visited {
	text-decoration: none;
}

em,
i,
address,
cite {
	font-style: normal;
	font-weight: normal;
}

input,
textarea,
select,
button,
table {
	font-size: inherit;
	font-family: inherit;
	border: 0;
	background-color: transparent;
}

button,
select {
	cursor: pointer;
}

textarea,
input,
select {
	border-radius: 0;
	border: 0;
	outline-color: -moz-use-text-color;
	outline-width: medium;
}

textarea {
	resize: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

label {
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

table {
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
}

th,
td {
	border-collapse: collapse;
}

select::-ms-expand {
	display: none;
}

/* 테넌트관리 */
.listBox>ul {
	padding-left: 10px;
}

.listBox>ul>li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 12px;
}

.listBox>ul>li .tit {
	color: #767676;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
	position: relative;
}

.listBox>ul>li .tit.accent {
	color: #222;
	font-weight: 600;
}

.listBox>ul>li .tit::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 8px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #767676;
}

.listBox>ul>li .con {
	color: #222;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.listBox>ul>li .dat {
	color: #767676;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: -0.2px;
}

.listBox>ul li:last-child {
	margin-bottom: 0;
}

.solution {
	height: calc(100% - 254px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	overflow: hidden !important;
}

.solution .row .titArea {
	border: 0;
	padding: 12px 0 12px;
}

.solution .row:first-child .titArea {
	padding-top: 0;
	border-bottom: 1px solid #ddd;
}

.solution .row:nth-of-type(1) {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
}

.solution .row:nth-of-type(2) {
	-webkit-box-flex: 2;
	-ms-flex: 2 1 0px;
	flex: 2 1 0;
}

.solution .row:nth-of-type(3) {
	-webkit-box-flex: 2;
	-ms-flex: 2 1 0px;
	flex: 2 1 0;
}

.cardBox {
	height: calc(100% - 12px);
}

.cardBox>ul {
	height: calc(100% - 70px);
	min-height: 100px;
	gap: 12px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.cardBox>ul>li {
	position: relative;
	border-radius: 8px;
	border: 1px solid #ddd;
	background: #fff;
	width: 100%;
	min-height: 100px;
}

.cardBox>ul>li>.tit {
	position: absolute;
	top: 16px;
	left: 16px;
	color: #222;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
	opacity: 0.5;
}

.cardBox>ul>li .cou {
	position: absolute;
	bottom: 16px;
	right: 16px;
	color: #222;
	text-align: right;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.5px;
	opacity: 0.5;
}

.cardBox .progressbarWrap {
	opacity: 0.5;
	/* 전체 영역 */
	/* 진행된 */
}

.cardBox .progressbarWrap progress {
	border: none;
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
	height: 6px;
}

.cardBox .progressbarWrap progress::-webkit-progress-bar {
	background-color: #eee;
	border-radius: 10px;
}

.cardBox .progressbarWrap progress::-webkit-progress-value {
	background-color: var(--btn-bgcolor-primary);
	border-radius: 10px;
	-webkit-transition: width 0.3s ease;
	transition: width 0.3s ease;
}

.cardBox.active ul li .tit {
	opacity: 1;
}

.cardBox.active ul li .cou {
	opacity: 1;
}

.cardBox.active .progressbarWrap {
	opacity: 1;
}

.cardBox.type2>ul {
	height: 125px;
}

.cardBox.type2>ul>li {
	padding: 16px 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.cardBox.type2>ul>li>.tit {
	position: static;
	opacity: 1;
	color: #222;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.cardBox.type2>ul>li .cou {
	opacity: 1;
	position: static;
	text-align: left;
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.cardBox.type2>ul>li .cou b {
	font-size: 36px;
	font-weight: 700;
	padding-right: 5px;
}

.cardBox.type2>ul>li .inf {
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.cardBox.type2>ul>li .inf b {
	padding: 0px 3px 0px 5px;
}

.cardBox.type2>ul>li:hover {
	background: #688bdf;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.cardBox.type2>ul>li:hover .tit {
	color: #fff;
}

.cardBox.type2>ul>li:hover .cou {
	color: #fff;
}

.cardBox.type2>ul>li:hover .inf {
	color: #fff;
}

.cardBox.type2>ul>li:hover .inf .ico {
	-webkit-filter: brightness(10);
	filter: brightness(10);
}

.cardBox.type3 {
	height: auto;
	margin-bottom: 8px;
}

.cardBox.type3>ul {
	overflow-x: auto;
	height: auto;
	padding-bottom: 4px;
}

.cardBox.type3>ul>li {
	min-width: 250px;
	height: 120px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.cardBox.type3>ul>li>.tit {
	position: static;
	padding: 8px 16px;
	color: #222;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
	opacity: 1;
	border-bottom: 1px solid #ddd;
}

.cardBox.type3>ul>li .con {
	padding: 8px 16px;
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
	height: 100%;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	word-break: break-word;
}

.cardBox.type3>ul>li .con textarea {
	border: 0;
	padding: 0;
}

.cardBox.type3>ul>li .dat {
	padding: 8px 16px 8px;
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.cardBox.type3>ul.fdC {
	gap: 16px;
}

.cardBox.type4 {
	height: auto;
}

.cardBox.type4>ul {
	overflow-x: auto;
	height: auto;
	padding-bottom: 4px;
}

.cardBox.type4>ul>li {
	min-width: 19.6%;
	height: 158px;
	padding: 16px 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.cardBox.type4>ul>li>.tit {
	position: static;
	margin-bottom: 8px;
	color: #222;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.5px;
	opacity: 1;
}

.cardBox.type4>ul>li>.con .listBox ul li {
	margin-bottom: 4px;
}

.cardBox.type4>ul>li:hover {
	background: #4c9e61;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.cardBox.type4>ul>li:hover .tit {
	color: #fff;
}

.cardBox.type4>ul>li:hover .tit::before {
	background: #fff;
}

.cardBox.type4>ul>li:hover .con {
	color: #fff;
}

.cardBox.type5 ul li {
	height: 120px;
	padding: 16px 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.cardBox.type5 ul li>div {
	opacity: 1;
}

.cardBox.type5 ul li .tit {
	padding: 0;
	position: static;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.cardBox.type5 ul li .tit .title {
	color: #222;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.cardBox.type5 ul li .tit .badge {
	border-radius: 100px;
	border: 1px solid #bbb;
	background: #fff;
	height: 22px;
	line-height: 20px;
	padding: 0px 16px;
	color: #222;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.cardBox.type5 ul li .con {
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.cardBox.type5 ul li .con .ico {
	margin-right: 5px;
	width: 16px;
	height: 16px;
}

.cardBox.type5 ul li .con .cou {
	position: static;
	opacity: 1;
}

.cardBox.type5 ul li:hover {
	background: #4c9e61;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.cardBox.type5 ul li:hover .tit .title {
	color: #fff;
}

.cardBox.type5 ul li:hover .con .txt {
	color: #fff;
}

.cardBox.type5 ul li:hover .con .ico {
	-webkit-filter: invert(1) brightness(10);
	filter: invert(1) brightness(10);
}

.cardBox.type5 ul li:hover .con .cou {
	color: #fff;
}

.borderBot {
	border-bottom: 8px solid #e3e5e8;
}

/* 챗 대시보드 */
.countBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.countBox .lA {
	color: #222;
	font-size: 14px;
	line-height: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.countBox .lA strong {
	font-size: 36px;
	line-height: 36px;
	font-weight: 700;
}

.countBox .rA .dote {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2bc840;
}

.countBox .rA .dote.wait {
	background: #2bc840;
}

.countBox .rA .dote.logoff {
	background: #969696;
}

.countBox .rA .dote.error {
	background: #de3412;
}

.countBox .rA .dote.leave {
	background: #ffb114;
}

.countBox .rA span {
	font-size: 14px;
	line-height: 14px;
	font-weight: 400;
}

.countBox .rA span strong {
	font-weight: 700;
}

.countBox.type2 .rA strong {
	font-size: 36px;
	line-height: 36px;
	font-weight: 700;
}

.cardList {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 8px;
	min-height: 60px;
}

.cardList .card {
	width: 100%;
	height: 100%;
	padding: 8px;
	border-radius: 8px;
	border: 1px solid #969696;
	background: rgba(150, 150, 150, 0.1);
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.cardList .card.wait {
	border: 1px solid #228738;
	background: rgba(34, 135, 56, 0.1);
}

.cardList .card.wait .tit {
	color: #228738;
}

.cardList .card.wait .con {
	color: #228738;
}

.cardList .card.logon {
	border: 1px solid #4876ef;
	background: rgba(72, 118, 239, 0.1);
}

.cardList .card.logon .tit {
	color: #4876ef;
}

.cardList .card.logon .con {
	color: #4876ef;
}

.cardList .card.leave {
	border: 1px solid #ffb114;
	background: rgba(255, 177, 20, 0.1);
}

.cardList .card.leave .tit {
	color: #ffb114;
}

.cardList .card.leave .con {
	color: #ffb114;
}

.cardList .card.logoff {
	border: 1px solid #969696;
	background: rgba(150, 150, 150, 0.1);
}

.cardList .card.logoff .tit {
	color: #222;
}

.cardList .card.logoff .con {
	color: #222;
}

.cardList .card .tit {
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.cardList .card .con {
	text-align: right;
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.cardList .card .con strong {
	font-size: 20px;
	font-weight: 700;
}

.innerHover .inner:hover {
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	border: 1px solid var(--bgcolor-primary-hover) !important;
	background: var(--bgcolor-primary-hover) !important;
	-webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
	box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}

.innerHover .inner:hover .titArea .titBox h4 {
	color: #fff;
}

.innerHover .inner:hover .conArea .countBox .lA {
	color: #fff;
}

.innerHover .inner:hover .conArea .countBox .rA span {
	color: #fff;
}

.innerHover .inner:hover .conArea .countBox .rA strong {
	color: #fff;
}

.innerHover .inner:hover .conArea .cardList .card {
	border: 1px solid #fff;
	background: rgba(255, 255, 255, 0.1);
}

.innerHover .inner:hover .conArea .cardList .card .tit {
	color: #fff;
}

.innerHover .inner:hover .conArea .cardList .card .con {
	color: #fff;
}

.chatBotType .innerHover .inner:hover {
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	border: 1px solid #4c9e61 !important;
	background: #4c9e61 !important;
	-webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
	box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}

.callBotType .innerHover .inner:hover {
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	border: 1px solid var(--border-purple) !important;
	background: var(--btn-bgcolor-purple) !important;
	-webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
	box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}

.chartArea {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100%;
}

.chartArea .row {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.chartArea .row .chartBox {
	border: 1px solid #ddd;
	height: calc(100% - 46px);
}

.counselList ul li {
	padding: 16px;
	border-bottom: 1px solid #ddd;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.counselList ul li .lA {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 12px;
}

.counselList ul li .lA .thum {
	width: 48px;
	height: 48px;
}

.counselList ul li .lA .info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.counselList ul li .lA .info .name {
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.counselList ul li .lA .info .time {
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.counselList ul li .rA .state {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.counselList ul li .rA .state .dote {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.1);
	background: #228738;
}

.counselList ul li .rA .state .txt {
	color: #222;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
	margin-left: 4px;
}

.counselList ul li .rA .state.progress .dote {
	background: #228738;
}

.counselList ul li .rA .state.wait .dote {
	background: #2bc840;
}

.counselList ul li .rA .state.logoff .dote {
	background: #969696;
}

.counselList ul li .rA .state.error .dote {
	background: #de3412;
}

.counselList ul li .rA .state.leave .dote {
	background: #ffb114;
}

.counselList ul li:last-child {
	border-bottom: 0;
}

.state {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.state .dote {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.1);
	background: #228738;
}

.state.process .dote {
	background-color: #228738 !important;
}

.state.complete .dote {
	background-color: #9e9e9e !important;
}

.state.wait .dote {
	background-color: #ff9800 !important;
}


.state .txt {
	color: #222;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
	margin-left: 4px;
}

.state.progress .dote {
	background: #228738;
}

.state.wait .dote {
	background: #2bc840;
}

.state.logon .dote {
	background: #4876ef;
}

.state.logoff .dote {
	background: #969696;
}

.state.error .dote {
	background: #de3412;
}

.state.leave .dote {
	background: #ffb114;
}

.titArea .state {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.titArea .state .dote {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 0px solid rgba(0, 0, 0, 0.1);
	background: #d9d9d9;
}

.counselListCount ul li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
}

.counselListCount ul li .lA .thum {
	width: 48px;
	height: 48px;
}

.counselListCount ul li .lA .thum img {
	border-radius: 50%;
	border: 1px black solid;
}

.counselListCount ul li .rA {
	width: 100%;
	overflow: hidden;
}

.counselListCount ul li .rA .idBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-bottom: 3px;
}

.counselListCount ul li .rA .idBox .id {
	color: #222;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.counselListCount ul li .rA .idBox .id .state {
	display: inline-block;
	border-radius: 100px;
	border: 1px solid rgba(109, 120, 130, 0.5);
	background: rgba(109, 120, 130, 0.1);
	width: 48px;
	height: 24px;
	text-align: center;
	line-height: 22px;
	padding: 0 8px;
	margin-left: 8px;
	color: #6d7882;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.counselListCount ul li .rA .idBox .id .state.wait {
	border: 1px solid rgba(109, 120, 130, 0.5);
	background: rgba(109, 120, 130, 0.1);
	color: #6d7882;
}

.counselListCount ul li .rA .idBox .id .state.consul {
	background: rgba(72, 118, 239, 0.1);
	border: 1px solid rgba(72, 118, 239, 0.5);
	color: #4876ef;
}

.counselListCount ul li .rA .idBox .id .state.complete {
	background: rgba(34, 135, 56, 0.1);
	border: 1px solid rgba(34, 135, 56, 0.5);
	color: #228738;
}

.counselListCount ul li .rA .idBox .id .state.process {
	background: rgba(255, 177, 20, 0.1);
	border: 1px solid rgba(255, 177, 20, 0.5);
	color: #ffb114;
}

.counselListCount ul li .rA .idBox .date {
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.counselListCount ul li .rA .txtBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 3px;
}

.counselListCount ul li .rA .txtBox .txt {
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.counselListCount ul li .rA .txtBox .count.zero {
	display: none;
}

.counselListCount ul li .rA .txtBox .count span {
	display: inline-block;
	width: 18px;
	height: 18px;
	line-height: 18px;
	border-radius: 100px;
	background: #e6603d;
	text-align: center;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

.historyList ul li {
	padding: 12px 0px;
	border-bottom: 1px solid #ddd;
}

.historyList ul li:first-child {
	padding-top: 0;
}

.historyList ul li:last-child {
	border-bottom: 0;
}

.historyList ul li .pathBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-bottom: 5px;
}

.historyList ul li .pathBox .pat {
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.historyList ul li .pathBox .pat span {
	color: var(--text-primary);
}

.historyList ul li .pathBox .dat {
	color: #767676;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.historyList ul li .subject {
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.chatWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	background: #e3eaf9;
	overflow: hidden;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.chatWrap .chatBody {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding: 16px;
	overflow-y: auto;
}

.chatWrap .chatDate {
	width: 90px;
	height: 30px;
	line-height: 29px;
	padding: 0 16px;
	text-align: center;
	font-size: 14px;
	color: #666;
	margin: 0px auto 12px;
	position: relative;
	border-radius: 100px;
	border: 1px solid rgba(71, 114, 216, 0.5);
	background: rgba(255, 255, 255, 0.7);
	color: var(--text-primary);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.chatWrap .chatMsg {
	margin-bottom: 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.chatWrap .chatMsg .time {
	color: #222;
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 4px;
}

.chatWrap .chatMsg .time strong {
	font-weight: 600;
}

.chatWrap .chatMsg .bubble {
	max-width: 80%;
	padding: 10px 14px;
	border-radius: 8px;
	line-height: 1.4;
	font-size: 14px;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.chatWrap .chatMsg.user {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.chatWrap .chatMsg.user .bubble {
	background: #fff;
	-webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1);
	color: #333;
}

.chatWrap .chatMsg.agent {
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.chatWrap .chatMsg.agent .bubble {
	background: #395bad;
	color: #fff;
}

.chatWrap .chatFoot {
	background: #fff;
	border-top: 1px solid #d9dbe0;
	padding: 8px 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 10px;
}

.chatWrap .chatFoot .inputBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid #ddd;
}

.chatWrap .chatFoot .inputBox textarea {
	border: 0;
	min-height: 60px;
}

.chatWrap .chatFoot .inputBox .sendBtn {
	background: #4b6ef6;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 14px;
	cursor: pointer;
	-webkit-transition: background 0.2s;
	-o-transition: background 0.2s;
	transition: background 0.2s;
}

.chatWrap .chatFoot .inputBox .sendBtn:hover {
	background: #3a5be0;
}

.chatWrap .chatFoot .chatBtns {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.chatWrap .chatFoot .chatBtns .lA {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 8px;
}

.chatWrap .chatFoot .chatBtns .rA {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.fileBox {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
}

.fileBox .fileInput {
	display: none;
}

.fileBox .fileLabel {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 20px;
	background: #fff;
	margin-right: 8px;
	cursor: pointer;
}

.fileBox .fileName {
	display: inline-block;
	font-size: 13px;
	color: #444;
	max-width: 80px;
	overflow: hidden;
	white-space: nowrap;
	margin-right: 16px;
}

.chatWrap .chatFoot .chatBtns .rA .sendBtn {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	cursor: pointer;
	-webkit-transition: background 0.2s;
	-o-transition: background 0.2s;
	transition: background 0.2s;
}

.chatWrap.type2 .chatFoot {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-orient: unset;
	-webkit-box-direction: unset;
	-ms-flex-direction: unset;
	flex-direction: unset;
	padding: 18px 20px;
}

.chatWrap.type2 .chatFoot .inputBox {
	border-bottom: 0;
	width: 100%;
}

.chatWrap.type2 .chatFoot .inputBox textarea {
	border: 0;
	width: 100%;
	height: 32px;
	min-height: unset;
}

.chatWrap.type2 .chatFoot .chatBtns {
	width: auto;
	white-space: nowrap;
}

/* 탭메뉴 */
.tabWrap .tabMenu {
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 0;
	margin: 0;
	gap: 24px;
}

.tabWrap .tabMenu li {
	text-align: center;
	padding: 13px 2px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

.tabWrap .tabMenu li.active {
	border-bottom: 2px solid #007bff;
	font-weight: bold;
}

.tabWrap .tabContent {
	height: 100%;
}

.tabWrap .tabContent .tabPanel {
	display: none;
	height: 100%;
}

.tabWrap .tabContent .tabPanel.active {
	display: flex;
}

#postprocess-info {
	flex: 1
}

.tabWrap.type2 .tabMenu {
	gap: 0;
}

.tabWrap.type2 .tabMenu li {
	min-width: 48px;
	height: 32px;
	line-height: 30px;
	padding: 0px 12px;
	border-radius: 6px;
	border: 1px solid #bbb;
	background: #fff;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.tabWrap.type2 .tabMenu li:first-child {
	border-radius: 6px 0px 0px 6px;
}

.tabWrap.type2 .tabMenu li:nth-child(2) {
	border-radius: 0px 6px 6px 0px;
}

.tabWrap.type2 .tabMenu li.active {
	color: var(--text-primary);
	border: 1px solid var(--border-primary);
	background: #edf1fc;
}

.tabWrap.type2.green li.active {
	color: var(--text-primary);
	border: 1px solid var(--border-primary);
	background: #eaf4ec;
}

.templateList ul li {
	padding: 8px 0px;
	border-radius: 8px;
	border: 1px solid #c3c3c3;
	background: #fff;
	margin-bottom: 8px;
}

.templateList ul li .tit {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 0px 16px 8px;
	border-bottom: 1px solid #e4e4e4;
}

.templateList ul li .tit span {
	color: #222;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.templateList ul li .tit button {
	white-space: nowrap;
	color: #222;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.templateList ul li .con {
	padding: 8px 16px 0px;
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.inputArea {
	border-radius: 4px;
	border: 1px solid #c3c3c3;
	background: #fff;
	padding: 8px 3px 8px 12px;
	height: 100%;
	overflow-y: auto;
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.inputArea .thinking {
	margin-top: 10px;
}

.laterProcess {
	display: flex;
	flex-direction: column;
}


.laterProcess .proInfo {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 4px 24px;
	padding: 8px 16px;
	margin-bottom: 8px;
	border-radius: 8px;
	border: 1px solid #ccc;
	background: #fff;
}

.laterProcess .proInfo dl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.laterProcess .proInfo dl dt {
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.laterProcess .proInfo dl dd {
	color: #222;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.laterProcess .proList {
	flex: 1;
	overflow-y: auto;
}

.laterProcess .proList ul li {
	padding: 8px 0px;
	border-radius: 8px;
	border: 1px solid #c3c3c3;
	background: #fff;
	margin-bottom: 8px;
}

.laterProcess .proList ul li .tit {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 0px 16px 8px;
	border-bottom: 1px solid #e4e4e4;
	color: #222;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.laterProcess .proList ul li .con {
	padding: 8px 16px 0px;
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
	min-height: 100px;
}

.laterProcess .proList ul li .con textarea {
	min-height: 90px;
	border: 0;
	padding: 0;
}

.laterProcess .proList ul li .con .pathBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 10px;
}

.laterProcess .proList ul li .con .pathBox .path {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 24px;
}

.laterProcess .proList ul li .con .pathBox .path span {
	position: relative;
}

.laterProcess .proList ul li .con .pathBox .path span:last-child::before {
	display: none;
}

.laterProcess .proList ul li .con .pathBox .delBtn {
	width: 20px;
	height: 20px;
	background-color: #eee;
	border-radius: 50%;
	margin-left: 8px;
}

.laterProcess .proList ul li .con .radioWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 8px;
}

.laterProcess .proList ul li .con .radioWrap .col input {
	margin-right: 4px;
}

/* 후처리 버튼 영역 고정 */
.laterProcess .btnArea {
	flex-shrink: 0;
	margin-top: 12px;
}

.botTxt {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 8px;
	padding: 10px 20px;
	position: relative;
}

.botTxt::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-image: -o-repeating-linear-gradient(left, #ddd 0, #ddd 4px, transparent 4px, transparent 8px);
	background-image: repeating-linear-gradient(to right, #ddd 0, #ddd 4px, transparent 4px, transparent 8px);
}

.botTxt .inputBox {
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.botTxt .inputBox input[type=text] {
	width: 60px;
	min-width: unset;
}

.botTxt .inputBox input[type=number] {
	width: 60px;
	min-width: unset;
}

.infoBox {
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.messageBox {
	height: 100%;
}

.messageBox ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 8px;
	height: 100%;
}

.messageBox ul li {
	border-radius: 8px;
	border: 1px solid #ddd;
	background: #fff;
	padding: 10px 20px;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.messageBox ul li .tit {
	color: #222;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.messageBox ul li .con {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.messageBox ul li .con .cou {
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.messageBox ul li .con .cou strong {
	font-size: 36px;
	font-weight: 700;
	padding: 0px 4px;
}

.messageBox ul li:hover {
	border: 1px solid #688bdf;
	background: #688bdf;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.messageBox ul li:hover .tit {
	color: #fff;
}

.messageBox ul li:hover .con .ico {
	-webkit-filter: invert(1) contrast(100);
	filter: invert(1) contrast(100);
}

.messageBox ul li:hover .con .cou {
	color: #fff;
}

.chatCounType .tblList table thead th {
	background: #4067c2;
}

.chatCounType input[type=checkbox]:checked {
	background-image: url(/img/check-on-blue-75fe4531dca955525eea21c904f129a5.svg);
}

.chatBotType .tblList table thead th {
	background: #207a38;
}

.chatBotType input[type=checkbox]:checked {
	background-image: url(../img/check-on-green.svg);
}

.callBotType .tblList table thead th {
	background: var(--btn-bgcolor-purple);
}

.callBotType input[type=checkbox]:checked {
	background-image: url(../img/check-on-purple.svg);
}

.treeBox {
	min-height: 300px;
	max-height: 600px;
	overflow-y: auto;
}

.treeBox .tree-branch .contents {
	margin-top: 0;
}

.treeBox .tree-branch .contents .branch-wrapper .left-sidebar {
	gap: 0;
}

.treeBox .tree-branch .contents .branch-wrapper .left-sidebar .branch-drag-handler {
	min-width: 15px;
	height: 30px;
	position: relative;
	z-index: 1;
	margin-right: 4px;
}

.treeBox .tree-branch .contents .branch-wrapper .left-sidebar .branch-drag-handler .ico {
	text-indent: -99999999px;
}

.treeBox .tree-branch .contents .branch-wrapper .left-sidebar .folder {
	margin-right: 8px;
}

.treeBox .tree-branch .contents .branch-wrapper .left-sidebar .inpBox {
	position: relative;
}

.treeBox .tree-branch .contents .branch-wrapper .left-sidebar .inpBox .branch-title {
	padding: 0px 8px;
}

.treeBox .tree-branch .contents .branch-wrapper .left-sidebar .inpBox .delBtn {
	position: absolute;
	top: 9px;
	right: 8px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #eaeaea;
}

.treeBox .tree-branch .contents .branch-wrapper .left-sidebar .inpBox .delBtn .ico {
	width: 15px;
	height: 15px;
	background-size: 8px;
	vertical-align: top;
}

.treeBox .tree-branch .contents .branch-wrapper .right-sidebar {
	opacity: 1;
	white-space: nowrap;
}

.treeBox .tree-branch .contents .branch-wrapper .right-sidebar button {
	color: #222;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.treeBox .tree-branch:nth-of-type(1) .branch-drag-handler {
	display: none;
}

.treeBox .tree-branch:nth-of-type(1) .right-sidebar .add-sibling {
	display: none;
}

.treeBox .ico {
	vertical-align: middle;
}

.progBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 0% 5%;
	gap: 8px;
}

.progBox progress {
	width: 100%;
	height: 6px;
	-moz-appearance: none;
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: transparent;
}

.progBox progress::-webkit-progress-bar {
	background-color: #eee;
	border-radius: 999px;
	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.progBox progress::-webkit-progress-value {
	background: #4876ef;
	border-radius: 999px;
	-webkit-transition: width 0.3s ease;
	transition: width 0.3s ease;
}

.progBox progress::-moz-progress-bar {
	background: #4876ef;
	border-radius: 999px;
}

.progBox span {
	color: #222;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.5px;
	width: 17%;
	display: inline-block;
	text-align: right;
}

.progress-container {
	width: 65%;
	height: 6px;
	background: #eee;
	border-radius: 50px;
	overflow: visible;
	position: relative;
	margin: 0% 10%;
}

.progress-container .progress-bar {
	height: 100%;
	width: 100%;
	background: -webkit-gradient(linear, left top, right top, from(#eb1c24), color-stop(25%, #f35724), color-stop(50%, #f8931f), color-stop(75%, #80b134), to(#3ab349));
	background: -o-linear-gradient(left, #eb1c24 0%, #f35724 25%, #f8931f 50%, #80b134 75%, #3ab349 100%);
	background: linear-gradient(to right, #eb1c24 0%, #f35724 25%, #f8931f 50%, #80b134 75%, #3ab349 100%);
	border-radius: 50px;
	position: relative;
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}

.progress-container .progress-value {
	position: absolute;
	top: 50%;
	left: 100%;
	-webkit-transform: translate(10px, -50%);
	transform: translate(10px, -50%);
	color: #222;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.5px;
	width: 15%;
	white-space: nowrap;
	text-align: right;
}

.sopWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.sopWrap .seaArea {
	width: 35%;
	border: 1px solid #ddd;
	background: #f4f4f4;
	border-radius: 8px 0 0 8px;
}

.sopWrap .seaArea .searBox {
	padding: 8px 20px;
	border-bottom: 1px solid #ddd;
}

.sopWrap .seaArea .cardBox {
	padding: 10px 20px;
	border-bottom: 1px solid #ddd;
	height: 514px;
	overflow-y: auto;
	margin-bottom: 0;
}

.sopWrap .seaArea .cardBox ul {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.sopWrap .seaArea .cardBox ul li {
	height: 93px;
	min-height: unset;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.sopWrap .seaArea .cardBox ul li.on {
	border: 2px solid var(--border-green);
}

.sopWrap .seaArea .cardBox ul li .tit {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 8px 16px;
}

.sopWrap .seaArea .cardBox ul li .tit .sub {
	color: #222;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.sopWrap .seaArea .cardBox ul li .tit .dat {
	padding: 0;
}

.sopWrap .seaArea .cardBox ul li .con {
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
	overflow: hidden;
	height: 50px;
	padding-bottom: 0;
}

.sopWrap .seaArea .pagiBox {
	padding: 0px 20px;
}

.sopWrap .seaArea .pagiBox #paginationWrap ul {
	width: 100%;
}

.sopWrap .seaArea .pagiBox #paginationWrap ul .pageInput {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	text-align: center;
	margin: 0 16.5%;
}

.sopWrap .seaArea .pagiBox #paginationWrap ul:last-child {
	display: none;
}

.sopWrap .inpArea {
	width: 65%;
	border: 1px solid #ddd;
	border-radius: 0px 8px 8px 0px;
}

.sopWrap .inpArea .titArea {
	padding: 8px 20px !important;
	border-bottom: 1px solid #ddd !important;
}

.sopWrap .inpArea .titArea .infoBox {
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.sopWrap .inpArea .conArea {
	padding: 8px 20px 16px;
}

.sopWrap .inpArea .conArea .inpBox textarea {
	height: 367px;
	margin-bottom: 8px;
}

.sopWrap .inpArea .conArea .exBox {
	border-radius: 8px;
	border: 1px solid #ffb114;
	background: rgba(255, 177, 20, 0.1);
	padding: 16px 20px;
}

.sopWrap .inpArea .conArea .exBox h3 {
	margin-bottom: 8px;
	color: #222;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.sopWrap .inpArea .conArea .exBox ul {
	padding-left: 20px;
}

.sopWrap .inpArea .conArea .exBox ul li {
	list-style: disc;
}

.resultBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 100%;
}

.resultBox .ico {
	margin-bottom: 8px;
}

.resultBox h3 {
	margin-bottom: 4px;
	color: var(--text-green);
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.resultBox p {
	color: #222;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.linkPaste {
	position: relative;
	border-radius: 8px;
	border: 1px solid #ddd;
	background: #fff;
	padding: 8px;
}

.linkPaste>button {
	position: absolute;
	top: 8px;
	right: 8px;
}

.linkPaste>input {
	border: 0;
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
	padding: 0 100px 0 0 !important;
}

.updownBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.updownBox .lA {
	color: #222;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.updownBox .lA strong {
	font-weight: 700;
	padding-left: 5px;
}

.updownBox .rA {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.updownBox .rA strong {
	margin-right: 8px;
	color: #222;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 36px;
}

.updownBox .rA .updown {
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.5px;
	margin-left: 8px;
	line-height: 20px;
}

.updownBox .rA .updown.up {
	color: #de3412;
}

.updownBox .rA .updown.down {
	color: #3b82f6;
}

.actionBtn button {
	width: 22px;
	height: 22px;
	border-radius: 4px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.actionBtn button .ico {
	width: 16px;
	height: 16px;
	background-size: 16px 16px;
	background-position: center center;
}

.actionBtn button.on .ico,
.actionBtn button:hover .ico {
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-filter: invert(0%) brightness(0%);
	filter: invert(0%) brightness(0%);
}

/* clearfix */
.clearfix {
	*zoom: 1;
}

.clearfix:before,
.clearfix:after {
	content: "";
	display: block;
}

.clearfix:after {
	clear: both;
}

/* common */
html,
body {
	width: 100%;
	height: 100%;
}


#wrap {
	position: relative;
	width: 100%;
	height: calc(100% - 56px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	background: #f0f4f7;
}

/* hidden */
.blind {
	position: absolute;
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	border: 0;
	padding: 0;
	white-space: nowrap;
}

/* dim */
#dim {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
}

html.is-locked body {
	height: calc(var(--window-inner-height) - 1px);
	overflow: hidden;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html.is-locked #wrap {
	position: fixed;
}

/* req */
.req {
	color: #f55;
	font-size: 14px;
	font-weight: 700;
	margin-left: 3px;
}

/* accent */
.accentTxt {
	color: #222 !important;
	font-weight: 600 !important;
}

.fcBlue {
	color: #4876ef !important;
}

.fcRed {
	color: #de3412 !important;
}

/* 말줄임 */
.ellipsis {
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.formArea,
.btnArea {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 8px;
}

.inputBox,
.formBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 8px;
}

.formArea ul {
	width: 100%;
}

.formArea ul li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-top: 8px;
	gap: 80px;
	min-height: 55px;
}

.formArea ul li dl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
}

.formArea ul li dl dt {
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
	min-width: 90px;
	white-space: nowrap;
	margin-top: 5px;
	height: 100%;
}

.formArea ul li dl dd {
	gap: 10px;
	width: 100%;
}

.formArea ul li dl dd .inputBox {
	width: 100%;
}

.formArea ul li dl dd .inputBox input {
	/* width: 100%; */
}

.formArea ul li dl dd .inputBox .row {
	position: relative;
}

.formArea ul li dl dd .inputBox .row>input {
	padding: 0 50px 0 12px;
}

.formArea ul li dl dd .inputBox .row .subTxt {
	position: absolute;
	right: 12px;
	top: 6px;
	color: #999;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.formArea ul li dl dd .inputBox .row.left>input {
	padding: 0 12px 0 80px;
}

.formArea ul li dl dd .inputBox .row.left .subTxt {
	right: auto;
	left: 12px;
}

.formArea ul li dl dd .inputBox.time {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.formArea ul li dl dd .inputBox.time input {
	padding: 0px 8px;
	width: 40px;
	min-width: unset;
}

.formArea ul li dl dd .inputBox.day button {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	padding: 0;
	text-align: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	color: #222;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
	background: #eee;
}

.formArea ul li dl dd .inputBox.day button.on {
	background: #fff;
	border: 1px solid var(--border-purple);
	color: var(--text-purple);
}

.formArea ul li dl dd .inputBox.day button.all {
	border-radius: 50px;
	min-width: 50px;
	width: auto;
	white-space: nowrap;
}

.formArea.type2 ul li dl dt {
	margin: 0;
	height: auto;
}

.formArea.type2 ul li dl dd {
	width: unset;
}

.formArea.doteLine {
	border-bottom: 1px dashed #ddd;
}

.stateLabel {
	background: #fff;
	border: 1px solid var(--border-default);
	color: var(--text-color);
	display: inline-block;
	border-radius: 100px;
	padding: 3px 10px 4px;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: normal;
	min-width: 46px;
}

.stateLabel.active {
	border: 1px solid rgba(34, 135, 56, 0.5);
	background: rgba(34, 135, 56, 0.1);
	color: #228738;
}

.stateLabel.red {
	border: 1px solid rgba(222, 52, 18, 0.5);
	background: #fcebe8;
	color: #de3412;
}

.stateLabel.yellow {
	border: 1px solid rgba(255, 177, 20, 0.5);
	background: #fff8e8;
	color: #ffb114;
}

.stateLabel.green {
	border: 1px solid rgba(34, 135, 56, 0.5);
	background: #e9f3ec;
	color: #228738;
}

.stateLabel.gray {
	border: 1px solid rgba(150, 150, 150, 0.5);
	background: #f5f5f5;
	color: #969696;
}

.stateLabel.blue {
	border: 1px solid rgba(72, 118, 239, 0.5);
	background: rgba(72, 118, 239, 0.1);
	color: #4876ef;
}

.stateLabel.type2 {
	border: 0;
	border-radius: 4px;
	background: rgba(36, 136, 62, 0.1);
	height: 24px;
	line-height: 16px;
	color: var(--text-green);
	font-size: 14px;
	font-weight: 600;
}

.stateLabel.type3.blue {
	background: #4876ef;
	color: #fff;
}

.btnArea {
	padding-top: 8px;
	margin-top: 16px;
}

.btnArea.borderTop {
	border-top: 1px solid #ddd;
}

/* btn */
[class^=btn] {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-size: 14px;
	font-weight: 400;
}

[class^=btn][class*=outline] {
	background: #fff;
	border: 1px solid var(--border-default);
	color: var(--text-color);
}

[class^=btn][class*=primary] {
	background-color: var(--btn-bgcolor-primary);
	color: var(--btn-text-color);
}

[class^=btn][class*=primary]:hover,
[class^=btn][class*=primary]:focus {
	background-color: var(--btn-bgcolor-primary-hover);
}

[class^=btn][class*=blue] {
	background: var(--btn-bgcolor-blue);
	border: 1px solid var(--border-blue);
	color: #fff;
}

[class^=btn][class*=blue]:hover,
[class^=btn][class*=blue]:focus {
	background-color: var(--btn-bgcolor-blue-hover);
}

[class^=btn][class*=outlineBlue] {
	background: #fff;
	border: 1px solid var(--border-blue);
	color: var(--text-blue);
}

[class^=btn][class*=green] {
	background: var(--btn-bgcolor-green);
	border: 1px solid var(--border-green);
	color: #fff;
}

[class^=btn][class*=green]:hover,
[class^=btn][class*=green]:focus {
	background-color: var(--btn-bgcolor-green-hover);
}

[class^=btn][class*=outlineGreen] {
	background: #fff;
	border: 1px solid var(--btn-bgcolor-green);
	color: var(--text-green);
}

[class^=btn][class*=purple] {
	background: var(--btn-bgcolor-purple);
	border: 1px solid var(--border-purple);
	color: #fff;
}

[class^=btn][class*=purple]:hover,
[class^=btn][class*=purple]:focus {
	background-color: var(--btn-bgcolor-purple-hover);
}

[class^=btn][class*=outlinePurple] {
	background: #fff;
	border: 1px solid var(--border-purple);
	color: var(--text-purple);
}

[class^=btn][class*=xs] {
	padding: 0 12px;
	border-radius: 4px;
	min-height: 22px;
}

[class^=btn][class*=sm] {
	padding: 0 12px;
	border-radius: 4px;
	min-height: 24px;
}

[class^=btn][class*=md] {
	padding: 0 16px;
	border-radius: 4px;
	min-height: 32px;
}

[class^=btn][class*=lg] {
	padding: 0 24px;
	border-radius: 4px;
	min-height: 48px;
}

[class^=btn][class*=xlg] {
	padding: 0 32px;
	border-radius: 4px;
	min-height: 56px;
}

[class^=btn][class*=full] {
	width: 100%;
}

[class^=btn]:disabled {
	pointer-events: none;
	background-color: var(--btn-bgcolor-disabled);
	color: var(--text-disabled);
}

[class^=btn]:disabled:hover,
[class^=btn]:disabled:focus {
	background-color: var(--btn-bgcolor-disabled);
	color: var(--text-disabled);
}

[class^=btn].dis {
	pointer-events: none;
	border: 1px solid #bbb;
	color: #bbb;
}

[class^=btn].dis .ico {
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
	opacity: 0.7;
}

/* form */
input,
textarea,
select {
	background: #fff;
	border: 1px solid var(--border-default);
	color: #222;
	width: 100%;
}

input[class*=xs],
textarea[class*=xs],
select[class*=xs] {
	padding: 0 12px;
	border-radius: 4px;
	min-height: 22px;
}

input[class*=sm],
textarea[class*=sm],
select[class*=sm] {
	padding: 0 12px;
	border-radius: 4px;
	min-height: 24px;
}

input[class*=md],
textarea[class*=md],
select[class*=md] {
	padding: 0 16px;
	border-radius: 4px;
	min-height: 32px;
}

input[class*=lg],
textarea[class*=lg],
select[class*=lg] {
	padding: 0 24px;
	border-radius: 4px;
	min-height: 48px;
}

input[class*=xlg],
textarea[class*=xlg],
select[class*=xlg] {
	padding: 0 32px;
	border-radius: 4px;
	min-height: 56px;
}

textarea {
	line-height: 2;
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	min-width: 120px;
	border-radius: 4px;
	padding: 8px;
}

textarea:hover {
	border-color: var(--border-hover);
}

textarea:focus {
	border-color: var(--border-focus);
	outline: 1px solid var(--border-focus);
}

textarea.error {
	border-color: #de3412;
}

textarea.error:focus {
	border-color: #de3412;
	outline: 1px solid #de3412;
}

textarea:disabled {
	border: 1px solid #e4e4e4;
	background: #f1f1f1;
	color: #bbb;
}

textarea:-moz-read-only {
	background: #f1f1f1;
}

textarea:read-only {
	background: #f1f1f1;
}

textarea::-webkit-input-placeholder {
	color: #bbb;
}

textarea::-moz-placeholder {
	color: #bbb;
}

textarea:-ms-input-placeholder {
	color: #bbb;
}

textarea::-ms-input-placeholder {
	color: #bbb;
}

textarea::placeholder {
	color: #bbb;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	min-width: 120px;
	padding: 0 28px 0 8px !important;
}

select:hover {
	border-color: var(--border-hover);
}

select:focus {
	border-color: var(--border-focus);
	outline: 1px solid var(--border-focus);
}

select.error {
	border-color: #de3412;
}

select.error:focus {
	border-color: #de3412;
	outline: 1px solid #de3412;
}

select:disabled {
	border: 1px solid #e4e4e4;
	background: #f1f1f1;
	color: #bbb;
}

input[type=text],
input[type=tel],
input[type=number] {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	min-width: 120px;
	height: 32px;
	border-radius: 4px;
}

input[type=text]:hover,
input[type=tel]:hover,
input[type=number]:hover {
	border-color: var(--border-hover);
}

input[type=text]:focus,
input[type=tel]:focus,
input[type=number]:focus {
	border-color: var(--border-focus);
	outline: 1px solid var(--border-focus);
}

input[type=text].error,
input[type=tel].error,
input[type=number].error {
	border-color: #de3412;
}

input[type=text].error:focus,
input[type=tel].error:focus,
input[type=number].error:focus {
	border-color: #de3412;
	outline: 1px solid #de3412;
}

input[type=text]:disabled,
input[type=tel]:disabled,
input[type=number]:disabled {
	border: 1px solid #e4e4e4;
	background: #f1f1f1;
	color: #bbb;
}

input[type=text]:-moz-read-only,
input[type=tel]:-moz-read-only,
input[type=number]:-moz-read-only {
	background: #f1f1f1;
}

input[type=text]:read-only,
input[type=tel]:read-only,
input[type=number]:read-only {
	background: #f1f1f1;
}

input[type=text]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder {
	color: #bbb;
}

input[type=text]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=number]::-moz-placeholder {
	color: #bbb;
}

input[type=text]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder {
	color: #bbb;
}

input[type=text]::-ms-input-placeholder,
input[type=tel]::-ms-input-placeholder,
input[type=number]::-ms-input-placeholder {
	color: #bbb;
}

input[type=text]::placeholder,
input[type=tel]::placeholder,
input[type=number]::placeholder {
	color: #bbb;
}

input[type=radio] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	border: 1px solid #d9d9d9;
	vertical-align: middle;
	position: relative;
	cursor: pointer;
	margin-bottom: 2px;
}

input[type=radio]::before {
	display: block;
	content: "";
	width: 14.5px;
	height: 14.5px;
	-webkit-transition: 120ms -webkit-transform ease-in-out;
	transition: 120ms -webkit-transform ease-in-out;
	-o-transition: 120ms transform ease-in-out;
	transition: 120ms transform ease-in-out;
	transition: 120ms transform ease-in-out, 120ms -webkit-transform ease-in-out;
	-webkit-box-shadow: inset 14px 14px #333;
	box-shadow: inset 14px 14px #333;
	border-radius: 50%;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-box-shadow: inset 14px 14px #fff !important;
	box-shadow: inset 14px 14px #fff !important;
}

input[type=radio]:checked::before {
	-webkit-transform: scale(0.55);
	transform: scale(0.55);
}

input[type=radio]:checked {
	background-color: var(--btn-bgcolor-primary);
	border: 1px solid var(--btn-bgcolor-primary);
}

input[type=radio].doteBlue {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	border: 1px solid #bbb;
	background: #f1f1f1;
	vertical-align: middle;
	position: relative;
	cursor: pointer;
	margin-bottom: 2px;
}

input[type=radio].doteBlue::before {
	display: block;
	content: "";
	width: 18.5px;
	height: 18.5px;
	-webkit-transition: 120ms -webkit-transform ease-in-out;
	transition: 120ms -webkit-transform ease-in-out;
	-o-transition: 120ms transform ease-in-out;
	transition: 120ms transform ease-in-out;
	transition: 120ms transform ease-in-out, 120ms -webkit-transform ease-in-out;
	-webkit-box-shadow: inset 14px 14px #333;
	box-shadow: inset 14px 14px #333;
	border-radius: 50%;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-box-shadow: inset 14px 14px var(--bgcolor-primary) !important;
	box-shadow: inset 14px 14px var(--bgcolor-primary) !important;
}

input[type=radio].doteBlue:checked::before {
	-webkit-transform: scale(0.55);
	transform: scale(0.55);
}

input[type=radio].doteBlue:checked {
	background-color: #fff;
	border: 1px solid var(--border-primary);
}

input[type=radio].checkBlue {
	border: 1.5px solid #222;
}

input[type=radio].checkBlue::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 50%;
	margin-left: -2px;
	width: 3px;
	height: 7px;
	border-right: 1.4px solid #222;
	border-bottom: 1.4px solid #222;
	-webkit-transform: rotate(45deg) scale(1);
	transform: rotate(45deg) scale(1);
	-webkit-transition: -webkit-transform 0.15s ease-in-out;
	transition: -webkit-transform 0.15s ease-in-out;
	-o-transition: transform 0.15s ease-in-out;
	transition: transform 0.15s ease-in-out;
	transition: transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
	-webkit-box-shadow: unset !important;
	box-shadow: unset !important;
	box-shadow: unset !important;
	border-radius: 0%;
}

input[type=radio].checkBlue:checked {
	background-color: var(--btn-bgcolor-blue);
	border-color: var(--border-blue);
}

input[type=radio].checkBlue:checked::before {
	border-color: #fff;
	-webkit-transform: rotate(45deg) scale(1);
	transform: rotate(45deg) scale(1);
}

input[type=checkbox] {
	vertical-align: middle;
	cursor: pointer;
	border: unset;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	background: url("/img/check-off-a131d44fb86af053f27c5571c6ca4d91.svg") no-repeat 50%/100%;
}

input[type=checkbox]:checked {
	background-image: url("/img/check-on-d3ff69199870e0c919c0ff32acbdc96b.svg");
}

input[type=checkbox]:focus {
	outline: none;
}

input:focus {
	outline: none;
}

.colArea {
	gap: 8px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.colArea label {
	font-size: 16px;
	margin-left: 4px;
}

.titArea {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 8px 20px;
	border-bottom: 1px solid #ddd;
	height: 48px;
}

.titArea .titBox h3 {
	font-size: 15px;
	font-weight: 600;
	color: #000;
}

.titArea .titBox h4 {
	color: #222;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.titArea .titBox .timerWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.titArea .titBox .timerWrap .thum {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 8px;
}

.titArea .titBox .timerWrap .thum.type2 {
	width: 32px;
	height: 32px;
}

.titArea .titBox .timerWrap .id {
	color: #222;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.titArea .titBox .timerWrap .timeBox {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding-left: 16px;
	margin-left: 16px;
}

.titArea .titBox .timerWrap .timeBox::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 50%;
	margin-top: -5px;
	width: 1px;
	height: 10px;
	background: #ccc;
}

.titArea .titBox .timerWrap .timeBox .txt {
	padding-left: 4px;
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.titArea .titBox .timerWrap .timeBox .txt>.time {
	padding-left: 4px;
	color: #222;
}

.titArea .btnBox {
	gap: 4px;
}

.titArea .btnBox .icoArrDown.active {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.titArea .infoBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.titArea .infoBox .txt {
	font-size: 14px;
	font-weight: 400;
}

.titArea .infoBox .total span {
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.titArea .infoBox .total span strong {
	display: inline-block;
	border-radius: 100px;
	background: #eeeff3;
	width: 28px;
	height: 24px;
	line-height: 24px;
	color: #222;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.5px;
	margin-left: 4px;
}

.titArea .syncBox span {
	color: #222;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.titArea .syncBox .ico {
	margin-right: 4px;
}

.titArea .timeBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 16px;
}

.titArea .timeBox>div {
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.titArea .timeBox>div b {
	color: #222;
}

.titArea .timeBox>div .ico {
	width: 20px;
	height: 20px;
	margin-right: 3px;
}

.titArea .timeBox>div.time {
	color: #222;
}

.stateBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 16px;
}

.stateBox>div {
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.stateBox>div span {
	display: inline-block;
	text-align: center;
	min-width: 28px;
	padding: 0px 8px;
	height: 24px;
	line-height: 22px;
	border-radius: 9999px;
	border: 1px solid rgba(109, 120, 130, 0.5);
	background: rgba(109, 120, 130, 0.1);
	margin-left: 4px;
	color: #6d7882;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.stateBox>div.consul span {
	border: 1px solid rgba(72, 118, 239, 0.5);
	background: rgba(72, 118, 239, 0.1);
	color: #4876ef;
}

.stateBox>div.wait span {
	border: 1px solid rgba(109, 120, 130, 0.5);
	background: rgba(109, 120, 130, 0.1);
	color: #6d7882;
}

.stateBox>div.process span {
	border: 1px solid rgba(255, 177, 20, 0.5);
	background: rgba(255, 177, 20, 0.1);
	color: #ffb114;
}

.stateBox>div.complete span {
	border: 1px solid rgba(34, 135, 56, 0.5);
	background: rgba(34, 135, 56, 0.1);
	color: #228738;
}

.stateBox>div.error span {
	border: 1px solid rgba(222, 52, 18, 0.5);
	background: rgba(222, 52, 18, 0.1);
	color: #de3412;
}

.infoBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.infoBox .txt {
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.reqTxt {
	color: #de3412;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -0.5px;
	margin-top: 4px;
	padding-left: 20px;
	position: relative;
}

.searchBtn {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.searchBtn>input {
	border-radius: 4px 0px 0px 4px !important;
}

.searchBtn>button {
	padding: 0 !important;
	min-width: 32px;
	min-height: 32px;
	font-size: 0;
	border-radius: 0px 4px 4px 0px !important;
}

.searchBtn.type2>input {
	border-radius: 4px !important;
	padding-right: 40px !important;
}

.searchBtn.type2>button {
	padding: 0 !important;
	min-width: 30px;
	min-height: 30px;
	font-size: 0;
	border-radius: 0px !important;
	border: 0 !important;
	position: absolute;
	right: 2px;
}

/* 헤더영역 */
#header {
	width: 100%;
	height: 56px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--border-default);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

#header .logoWrap h1 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	line-height: normal;
}

#header .logoWrap h1 a {
	display: inline-block;
	height: 16px;
}

#header .logoWrap h1 a img {
	width: 148px;
}

#header .logoWrap .tit {
	margin-left: 24px;
	color: var(--text-primary);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.5px;
}

#header .btnWrap {
	gap: 8px;
}

#header .setWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 24px;
}

#header .setWrap .setBtn a {
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

#header .setWrap .setBtn a i {
	width: 20px;
	height: 20px;
	margin-right: 3px;
	vertical-align: middle;
}

#header .setWrap .setBtn a i.icoSet {
	background: url("/img/icon/ico-set-04584e66accf1a04bfd0ffe2df243a04.svg") no-repeat 50%/20px;
}

#header .setWrap .counselBtn a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

#header .setWrap .counselBtn a .userImg {
	position: relative;
	width: 32px;
	height: 32px;
}

#header .setWrap .counselBtn a .userImg .dote {
	position: absolute;
	top: 0px;
	right: -2px;
	display: inline-block;
	border-radius: 100px;
	background: #2bc840;
	width: 10px;
	height: 10px;
}

#header .setWrap .counselBtn a i {
	width: 16px;
	height: 16px;
	margin-right: 3px;
	vertical-align: middle;
}

#header.chatCounsel {
	background: var(--bgcolor-primary);
}

#header.chatCounsel .headerNav ul li.active a {
	background: var(--bgcolor-primary);
}

#header.chatBot {
	background: var(--bgcolor-primary);
}

#header.chatBot .headerNav ul li.active a {
	background: var(--bgcolor-primary);
}

#header.callBot {
	background: var(--bgcolor-primary);
}

#header.callBot .headerNav ul li.active a {
	background: var(--bgcolor-primary);
}

.headerNav ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	background: #fff;
	padding: 0px 6px;
	border-radius: 50px;
	height: 34px;
}

.headerNav ul li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.headerNav ul li a {
	min-width: 70px;
	height: 26px;
	line-height: 26px;
	padding: 0 10px;
	text-align: center;
	color: #222;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.headerNav ul li.active a {
	background: var(--bgcolor-primary);
	-webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
	color: #fff;
	border-radius: 50px;
}

.titWrap {
	background: #fff;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 40px;
	border-bottom: 1px solid #ddd;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding-left: 20px;
}

.titWrap h3 {
	color: #000;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.5px;
}

/* 메뉴 영역 */
#nav {
	position: relative;
	width: 72px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: #fff;
	padding: 20px 16px;
	border-right: 1px solid #ddd;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

#nav:not(.active) {
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#nav .navList {
	width: 100%;
}

#nav .navList li {
	margin-bottom: 10px;
	height: 40px;
}

#nav .navList li a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 8px 8px;
}

#nav .navList li a>div {
	display: none;
	font-size: 16px;
	font-weight: 600;
	color: #222;
	overflow: hidden;
	height: 24px;
}

#nav .navList li a.active {
	border-radius: 6px;
	background: var(--bgcolor-primary);
}

#nav .navList li a.active>div {
	color: #fff;
}

#nav .panelBtn {
	position: absolute;
	right: 16px;
	bottom: 20px;
	background: var(--bgcolor-primary);
	border-radius: 50%;
	width: 24px;
	height: 24px;
}

#nav.active .navList li a {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

#nav.active .navList li a>div {
	display: block;
	margin-left: 8px;
}

#nav.active .panelBtn .ico.icoArrRight {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#nav.chatCounsel li a.active {
	background: var(--bgcolor-primary);
}

#nav.chatCounsel .panelBtn {
	background: var(--bgcolor-primary);
}

#nav.chatBot li a.active {
	background: var(--bgcolor-primary);
}

#nav.chatBot .panelBtn {
	background: var(--bgcolor-primary);
}

#nav.callBot li a.active {
	background: var(--bgcolor-primary);
}

#nav.callBot .panelBtn {
	background: var(--bgcolor-primary);
}

/* 컨텐츠 영역 */
#contents {
	position: relative;
	min-width: calc(100% - 72px);
	height: 100%;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	padding: 15px 12px;
}

#contents>.innerWrap {
	height: 100%;
}

#contents .inner {
	display: inline-block;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	border: 1px solid #ddd;
	background: #fff;
	overflow-y: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	overflow: hidden;
}

#contents .inner .row {
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#contents .conArea {
	padding: 16px 20px;
	overflow-y: auto;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	overflow: auto;
}

#contents .conArea .tblBox {
	height: calc(100% - 40px);
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	overflow: hidden;
}

#contents.chat {
	padding-top: 52px;
}

/* 검색 영역 */
.searchBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-bottom: 8px;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
}

.searchBox ul li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 8px;
}

.searchBox ul li dl dt {
	display: none;
}

/* table */
.tblList {
	width: 100%;
	height: calc(100% - 40px);
	border-top: 1px solid var(--border-default);
	border-bottom: 1px solid var(--border-default);
	background: #f9f9fa;
	overflow: auto;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.tblList table {
	width: 100%;
}

.tblList table tr th,
.tblList table tr td {
	padding: 2px 8px;
	text-align: center;
	background: #fff;
	height: 30px;
}

.tblList table tr:not(:last-child) th,
.tblList table tr:not(:last-child) td {
	border-bottom: 1px solid var(--border-default);
}

.tblList table th {
	background-color: var(--bgcolor-lightGray);
	color: var(--text-color);
}

.tblList table th:not(:first-child) {
	border-left: 1px solid var(--border-default);
}

.tblList table td {
	font-size: 13px;
	line-height: 1.3;
	color: var(--text-default);
}

.tblList table td:not(:first-child) {
	border-left: 1px solid var(--border-default);
}

.tblList table td input[type=text],
.tblList table td input[type=tel],
.tblList table td input[type=email],
.tblList table td input[type=password],
.tblList table td input[type=number] {
	min-width: auto;
	height: 24px;
}

.tblList table thead {
	border-bottom: 1px solid var(--border-default);
}

.tblList table thead tr th {
	border-top: 1px solid var(--border-default);
	background: var(--bgcolor-primary);
	color: var(--text-bgcolor);
	font-weight: 500;
	position: sticky;
	top: -1px;
	z-index: 9;
}

.tblList table tbody tr.on td {
	background: #f0eff8;
}

.tblList table tbody tr th {
	border-top: 1px solid var(--border-default);
	border-bottom: 1px solid var(--border-default);
	border-right: 1px solid var(--border-default);
	color: var(--text-color);
	font-weight: 500;
	background-color: var(--bgcolor-lightGray);
	line-height: 39px;
}

.tblList table tbody tr td {
	position: relative;
	border-top: 1px solid var(--border-default);
	border-bottom: 1px solid var(--border-default);
}

.tblList table tbody tr td+th {
	border-left: 1px solid var(--border-default);
}

.tblList.type1 table tr th,
.tblList.type1 table tr td {
	height: 26px;
}

.tblList.type1 table thead th {
	background: rgba(37, 0, 136, 0.1);
	color: #222;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.26px;
}

.chatCounType .tblList tbody tr.on td {
	background: rgba(71, 114, 216, 0.1);
}

.tblForm table {
	width: 100%;
}

.tblForm table tr th,
.tblForm table tr td {
	text-align: left;
	min-height: 32px;
	padding-bottom: 8px;
}

.tblForm table tr:last-child th,
.tblForm table tr:last-child td {
	padding-bottom: 0px;
}

.tblForm table tr th {
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.tblForm table tr td textarea {
	color: #222;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

#footer {
	margin-top: auto;
}

h1 {
	font-size: 28px;
	line-height: 36px;
	color: var(--text-heading);
	font-weight: 600;
}

h3 {
	font-size: 18px;
	line-height: 25px;
	font-weight: 600;
	color: var(--text-heading);
}

h4 {
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--text-title);
}

#paginationWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 10px 0px 0px;
}

#paginationWrap ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 4px;
}

#paginationWrap ul li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

#paginationWrap ul li a {
	font-size: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	border-color: #bbb;
}

#paginationWrap ul li.pageInput {
	margin: 0px 24px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

#paginationWrap ul li.pageInput>input {
	min-width: unset;
	width: 40px;
	height: 28px;
	text-align: right;
	border-color: #bbb;
}

#paginationWrap ul li.pageInput .dash {
	padding: 0px 5px;
}

#paginationWrap ul .total {
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

#paginationWrap ul .total span {
	margin-left: 5px;
}

#paginationWrap ul .perPageSelect select {
	border-color: #bbb;
	margin-left: 8px;
	height: 28px;
}

[class^=i-][class*=sm] {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	vertical-align: bottom;
}

[class^=i-][class*=md] {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 4px;
	vertical-align: bottom;
}

[class^=i-][class*=lg] {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 4px;
	vertical-align: middle;
}

/* scroll bar */
.mCSB_scrollTools {
	opacity: 1 !important;
}

.mCSB_dragger_bar {
	background-color: rgba(0, 0, 0, 0.3) !important;
}

.scroll-bar {
	position: relative;
	overflow-y: auto;
}

.scroll-bar::-webkit-scrollbar {
	width: 10px;
}

.scroll-bar::-webkit-scrollbar-track {
	background-color: rgba(255, 255, 255, 0);
}

.scroll-bar::-webkit-scrollbar-thumb {
	background: #bbb;
	border-radius: 50px;
	border: 3px solid #ffffff;
}

/* custom-sel */
.custom-sel {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 100%;
}

.custom-sel>button {
	display: inline-block;
	vertical-align: top;
	position: relative;
	width: 100%;
	height: 32px;
	line-height: 29px;
	border-radius: 4px;
	border: 1px solid var(--border-default);
	font-size: 14px !important;
	color: var(--text-title);
	padding: 0 36px 0 8px;
	background-size: 20px 20px;
	text-align: left;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.custom-sel>button:after {
	content: "";
	display: block;
	position: absolute;
	position: absolute;
	right: 6px;
	top: 50%;
	width: 20px;
	height: 20px;
	background: url("../img/arrow-down.svg") no-repeat center;
	-webkit-transform: rotate(0) translateY(-50%);
	transform: rotate(0) translateY(-50%);
}

.custom-sel>ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	width: 100%;
	max-height: 185px;
	background-color: #fff;
	border-top: 0;
	border-radius: 6px 6px;
	border: 1px solid var(--border-default);
	z-index: 1;
	overflow-y: auto;
}

.custom-sel>ul>li {
	padding: 12px;
	font-size: 14px !important;
	color: var(--text-color);
	cursor: pointer;
}

.custom-sel>ul>li.selected {
	font-weight: 500;
	color: var(--text-title);
	background-color: #f5f5f5;
}

.custom-sel.open {
	-webkit-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition: all 0.6s;
}

.custom-sel.open>button {
	border: 1px solid #262626;
}

.custom-sel.open>button::after {
	-webkit-transform: rotate(180deg) translateY(50%);
	transform: rotate(180deg) translateY(50%);
}

/* datepicker */
.datepicker {
	width: 131px !important;
	height: 40px;
	padding: 0 8px;
}

.ui-widget-header {
	padding: 0 !important;
	margin: 0 0 16px !important;
	border-color: #fff;
	background: #fff;
	border: 0;
}

.ui-datepicker {
	width: 300px;
	padding: 24px;
	-webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
	box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 1px solid #d9d9d9 !important;
	background: #fff;
	border-radius: 0;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	width: 16px;
	height: 16px;
}

.ui-datepicker table {
	padding: 0em 0 0em;
	margin: 0;
}

.ui-datepicker table thead {
	border: 0;
	margin-top: 16px;
}

.ui-datepicker table thead tr th {
	color: #aeb3ba;
	text-align: center;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: -0.18px;
	line-height: normal;
	width: 24px;
	height: 34px;
	padding: 0;
}

.ui-datepicker table thead tr th:first-child {
	color: #aeb3ba !important;
}

.ui-datepicker table thead tr th:last-child {
	color: #aeb3ba !important;
}

.ui-datepicker table tbody {
	border: 0;
}

.ui-datepicker table tbody tr {
	border: 0;
}

.ui-datepicker table tbody tr td {
	text-align: center;
	padding: 5px;
}

.ui-datepicker .ui-datepicker-title {
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 4px;
	color: #000;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.28px;
}

.ui-datepicker .ui-datepicker-title>select.ui-datepicker-month,
.ui-datepicker .ui-datepicker-title>select.ui-datepicker-year {
	width: auto;
	min-width: auto;
	height: 28px;
	padding: 0px 24px 0 8px !important;
	border-radius: 6px;
	border: 1px solid #dedfe3;
	text-align: center;
	overflow: hidden;
	color: #101010;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.32px;
	background-size: 14px !important;
}

.ui-datepicker .ui-datepicker-header {
	position: relative;
}

.ui-datepicker .ui-datepicker-header>a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 4px;
	background: #f1f4f8;
	width: 20px;
	height: 20px;
	border: 0 !important;
}

.ui-datepicker .ui-datepicker-header>a span {
	display: inline-block;
	text-indent: -9999px;
	background-size: 12px 12px !important;
}

.ui-datepicker .ui-datepicker-header>a.ui-datepicker-prev {
	position: absolute;
	top: 50% !important;
	left: 4px !important;
	margin-top: -10px;
}

.ui-datepicker .ui-datepicker-header>a.ui-datepicker-prev span {
	background-image: url("/img/arrow-left-gray-af86e31f2586ed67a4edc5a9a8787eef.png");
	-webkit-filter: invert(1);
	filter: invert(1);
}

.ui-datepicker .ui-datepicker-header>a.ui-datepicker-next {
	position: absolute;
	top: 50% !important;
	right: 4px !important;
	margin-top: -10px;
}

.ui-datepicker .ui-datepicker-header>a.ui-datepicker-next span {
	background-image: url("/img/arrow-right-gray-6862c752c49d2f1e3951c0b3ab2c4439.png");
	-webkit-filter: invert(1);
	filter: invert(1);
}

.ui-datepicker table.ui-datepicker-calendar {
	border: 0 !important;
}

.ui-datepicker .ui-state-default {
	display: inline-block;
	height: 26px;
	line-height: 24px;
	width: 26px;
	padding: 0;
	border: none;
	text-align: center;
	color: #101010;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.28px;
	background: none;
}

.ui-datepicker .ui-state-default.ui-state-active {
	position: relative;
	border-radius: 100px;
	border: 1px solid var(--border-primary);
	background: rgba(71, 114, 216, 0.1);
}

.ui-datepicker .ui-state-default.ui-state-active::after {
	content: "";
	display: block;
	position: absolute;
	top: -2px;
	right: -2px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--bgcolor-primary);
	margin-left: -0.08em;
}

.datepickerWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
}

.datepickerWrap .ui-datepicker-trigger {
	position: absolute;
	right: 8px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.datepickerWrap>div {
	width: calc(50% - 7px);
	position: relative;
}

.datepickerWrap>span {
	text-align: center;
	width: 14px;
	color: var(--text-color);
	font-weight: 600;
}

.ui-datepicker .ui-state-default.ui-state-active {
	border: 1px solid var(--border-primary);
	background: rgba(37, 0, 136, 0.1);
}

.ui-datepicker .ui-state-default.ui-state-active::after {
	content: "";
	background: var(--border-primary);
}

.ui-datepicker.chatBotType .ui-state-default.ui-state-active {
	border: 1px solid var(--border-green);
	background: rgba(36, 136, 62, 0.1);
}

.ui-datepicker.chatBotType .ui-state-default.ui-state-active::after {
	content: "";
	background: var(--btn-bgcolor-green);
}

.ui-datepicker.chatCounType .ui-state-default.ui-state-active {
	border: 1px solid var(--border-blue);
	background: rgba(71, 114, 216, 0.1);
}

.ui-datepicker.chatCounType .ui-state-default.ui-state-active::after {
	content: "";
	background: var(--btn-bgcolor-blue);
}

.ui-datepicker.callBotType .ui-state-default.ui-state-active {
	border: 1px solid #6151a9;
	background: rgba(37, 0, 136, 0.1);
}

.ui-datepicker.callBotType .ui-state-default.ui-state-active::after {
	content: "";
	background: #6151a9;
}

#wrap.login {
	min-width: unset;
	min-height: unset;
	height: 100%;
}

#wrap.login .loginWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

#wrap.login .loginWrap>div {
	width: 50%;
}

#wrap.login .loginWrap .logoArea {
	background: url("/img/bg/bg-login-ff558028524b40d813892b9ed8dfbfff.svg") no-repeat 100% 50%/500px #e9e6f3;
	height: 100%;
}

#wrap.login .loginWrap .logoArea h1 {
	position: absolute;
	top: 64px;
	left: 100px;
}

#wrap.login .loginWrap .loginArea {
	padding: 0px 60px;
}

#wrap.login .loginWrap .loginArea .inner {
	max-width: 360px;
}

#wrap.login .loginWrap .loginArea .inner .tit {
	margin-bottom: 20px;
}

#wrap.login .loginWrap .loginArea .inner .tit h2 {
	font-size: 40px;
	color: #222;
	font-weight: 300;
	line-height: 120%;
}

#wrap.login .loginWrap .loginArea .inner .inp input[type=text],
#wrap.login .loginWrap .loginArea .inner .inp input[type=password] {
	height: 56px;
	padding: 8px 16px;
	border-radius: 4px;
	border: 1px solid #e4e4e4;
	background: #fff;
	width: 100%;
	margin-bottom: 16px;
}

#wrap.login .loginWrap .loginArea .inner .inp input[type=text]::-webkit-input-placeholder,
#wrap.login .loginWrap .loginArea .inner .inp input[type=password]::-webkit-input-placeholder {
	font-size: 17px;
	color: #bbb;
}

#wrap.login .loginWrap .loginArea .inner .inp input[type=text]::-moz-placeholder,
#wrap.login .loginWrap .loginArea .inner .inp input[type=password]::-moz-placeholder {
	font-size: 17px;
	color: #bbb;
}

#wrap.login .loginWrap .loginArea .inner .inp input[type=text]:-ms-input-placeholder,
#wrap.login .loginWrap .loginArea .inner .inp input[type=password]:-ms-input-placeholder {
	font-size: 17px;
	color: #bbb;
}

#wrap.login .loginWrap .loginArea .inner .inp input[type=text]::-ms-input-placeholder,
#wrap.login .loginWrap .loginArea .inner .inp input[type=password]::-ms-input-placeholder {
	font-size: 17px;
	color: #bbb;
}

#wrap.login .loginWrap .loginArea .inner .inp input[type=text]::placeholder,
#wrap.login .loginWrap .loginArea .inner .inp input[type=password]::placeholder {
	font-size: 17px;
	color: #bbb;
}

#wrap.login .loginWrap .loginArea .inner .inp input[type=text]:focus,
#wrap.login .loginWrap .loginArea .inner .inp input[type=password]:focus {
	border: 1px solid #c3c3c3;
}

#wrap.login .loginWrap .loginArea .inner .inp .pwWrap {
	position: relative;
}

#wrap.login .loginWrap .loginArea .inner .inp .saveId {
	margin-bottom: 40px;
}

#wrap.login .loginWrap .loginArea .inner .inp .saveId input[type=checkbox] {
	margin: 0px 5px 3px;
}

#wrap.login .loginWrap .loginArea .inner .inp .saveId label {
	color: #767676;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

#wrap.login .loginWrap .loginArea .inner .inp .btnLogin {
	width: 100%;
	height: 56px;
	padding: 10px 16px;
	border-radius: 4px;
	background: var(--bgcolor-primary);
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.1px;
	margin-bottom: 24px;
	text-align: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

#wrap.login .loginWrap .loginArea .inner .infoTxt {
	color: #767676;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

#wrap.login .loginWrap .loginArea .inner .infoTxt a {
	color: #222;
	font-size: 15px;
	font-weight: 600;
	padding-right: 5px;
}

#navBtn {
	background: transparent;
	display: none;
	border: 1px solid #aaa;
	position: absolute;
	bottom: 5px;
	right: 0;
	padding: 0;
	text-decoration: none;
	color: #333;
	text-align: center;
	font-weight: bold;
	font-size: 0;
	display: none;
}

#navBtn:hover {
	background: rgba(0, 0, 0, 0.05);
}

#navBtn.selected {
	background: rgba(0, 0, 0, 0.1);
}

#navBtn:before {
	/* content: '☰'; */
	content: "≡";
	display: block;
	font-size: 36px;
	font-style: normal;
	font-weight: normal;
	line-height: 1.05;
	height: 1em;
	width: 1em;
	color: inherit;
	speak: none;
}

#navBtn.mobile {
	display: inline-block;
}

/* 토글버튼 */
.toggleBtnset {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	width: auto;
}

.toggleBtnset .toggleLabel {
	font-size: 14px;
	color: #666;
	white-space: nowrap;
}

.toggleBtnset .toggle {
	display: none;
}

.toggleBtnset .toggleSlide {
	position: relative;
	width: 36px;
	height: 20px;
	display: block;
	border-radius: 12px;
	background: #bfbfbf;
	cursor: pointer;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.toggleBtnset .togBtn {
	width: 16px;
	height: 16px;
	position: absolute;
	top: 50%;
	left: 2px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius: 50%;
	background: #fff;
	-webkit-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.toggleBtnset .toggle:checked+.toggleSlide {
	background: var(--btn-bgcolor-primary);
}

.toggleBtnset .toggle:checked+.toggleSlide .togBtn {
	left: calc(100% - 18px);
}

.toggleBtnset.type2 {
	position: relative;
	left: -15px;
}

.toggleBtnset.type2 .toggleSlide {
	background: #de3412;
}

.toggleBtnset.type2 .toggleLabel {
	color: #de3412;
	position: absolute;
	top: 1px;
	right: -30px;
}

.toggleBtnset.type2 .toggle:checked+.toggleSlide {
	background: #228738;
}

.toggleBtnset.type2 .toggle:checked+.toggleSlide>.toggleLabel {
	color: #228738;
}

.toggleBtnset.blue .toggle:checked+.toggleSlide {
	background: var(--btn-bgcolor-primary);
}

/* 체크박스 커스텀 */
.custom-check {
	position: relative;
	display: inline-block;
}

.custom-check label {
	background-color: var(--text-bgcolor);
	border: 1px solid var(--border-default);
	border-radius: 2px;
	cursor: pointer;
	width: 16px;
	height: 16px;
	display: inline-block;
	position: absolute;
	top: 0px;
	left: 0px;
}

.custom-check label:after {
	content: "";
	border: 2px solid #fff;
	border-top: none;
	border-right: none;
	opacity: 0;
	position: absolute;
	left: 3px;
	top: 3px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	height: 3px;
	width: 6px;
}

.custom-check input[type=checkbox] {
	opacity: 0;
}

.custom-check input[type=checkbox]:checked+label {
	background-color: var(--btn-bgcolor-primary);
	border-color: var(--btn-bgcolor-primary);
}

.custom-check input[type=checkbox]:checked+label:after {
	opacity: 1;
}


.popup {
	top: 50%;
	left: 50%;
	position: fixed;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 1200;
	width: 100%;
}

.popup .popHead {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--bgcolor-primary);
	height: 56px;
}

.popup .popHead .popTitle {
	font-size: 20px;
	font-weight: 600;
	color: #fff;
}

.popup .popHead .popClose {
	width: 24px;
	height: 24px;
	text-indent: -9999px;
}

.popup .popBody {
	background: #fff;
}

.popup .popBody>.inner {
	padding: 16px 30px;
	min-height: 320px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.popup .popBody>.inner .popSec {
	display: inline-block;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	border: 1px solid #ddd;
	background: #fff;
	margin-bottom: 12px;
}

.popup .popBody>.inner .popSec .titArea {
	border-bottom: 1px solid #ddd;
	padding: 8px 20px;
}

.popup .popBody>.inner .popSec .conArea {
	padding: 10px 20px 16px 20px;
}

.popup .popBody .scroll-bar::-webkit-scrollbar-thumb {
	border: 3px solid #f1f2f4;
}

.popup .popBody .titArea {
	padding: 0 0 7px;
	margin: 16px 0 0px;
	border-bottom: 1px solid #222;
}

.popup .popBody .titArea .titBox h3 {
	font-size: 14px;
}

.popup .popBody .titArea:nth-of-type(1) {
	margin-top: 0;
}

.popup .popBody .tblBox {
	height: calc(100% - 40px);
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.popup .popBody .tblBox .tblList {
	margin-top: 0;
}

.popup .popBody .btnArea {
	border-top: 1px solid #ddd;
	width: 100%;
}

.popup .popBody .formArea ul li dl dt {
	min-width: 60px;
}

.popup .popBody .formArea ul.minNone li dl dt {
	min-width: unset;
}

.popup .popFoot {
	padding: 12px 16px;
	background: #f9f9fa;
	text-align: right;
	border-top: 1px solid #e4e4e4;
}

.popup.type2 {
	border-radius: 8px;
}

.popup.type2 .popHead {
	padding: 10px 20px;
	border-radius: 8px 8px 0px 0px;
	background: #fff;
	border-bottom: 1px solid #e4e4e4;
}

.popup.type2 .popHead .popTitle {
	color: #222;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.popup.type2 .popHead .popClose {
	-webkit-filter: invert(1);
	filter: invert(1);
}

.popup.type2 .popBody {
	border-radius: 0px 0px 8px 8px;
}

.popup.type2 .popBody .inner {
	padding: 16px 20px;
}

.noResult {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}

.noResult .innerResult .icoNodata {
	margin-bottom: 8px;
}

.noResult .innerResult .resultTxt {
	color: #767676;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.5px;
	text-align: center;
}

/* 스크롤바 전체 */
*::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

*::-webkit-scrollbar-track {
	background: #fff;
	/* 트랙 배경색 */
	border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
	background: #ddd;
	/* 기본 색상 */
	border-radius: 4px;
}

/* 스크롤바 tblList */
body::-webkit-scrollbar,
.tblList::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

/* 스크롤 트랙 (배경) */
body::-webkit-scrollbar-track,
.tblList::-webkit-scrollbar-track {
	background: #ddd;
	/* 트랙 배경색 */
	border-radius: 4px;
}

/* 스크롤 손잡이 (thumb) */
body::-webkit-scrollbar-thumb,
.tblList::-webkit-scrollbar-thumb {
	background: #999;
	/* 기본 색상 */
	border-radius: 4px;
}

/* media query */
@media all and (min-width: 1024px) {
	html {
		font-size: 16px;
	}
}

@media all and (max-width: 1023px) {
	html {
		font-size: 14px;
	}
}

@media all and (max-width: 767px) {
	html {
		font-size: 13px;
	}
}

@media all and (max-width: 639px) {
	html {
		font-size: 12px;
	}
}

@media all and (max-width: 479px) {
	html {
		font-size: 10px;
	}
}

@media all and (max-width: 359px) {
	html {
		font-size: 9px;
	}
}

@media all and (max-width: 319px) {
	html {
		font-size: 8px;
	}
}