@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;
}

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

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

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

.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.online .dote {
	background-color: var(--status-online);
}

.state.ready .dote {
	background-color: var(--status-ready);
}

.state.away .dote {
	background-color: var(--status-away);
}

.state.offline .dote {
	background-color: var(--status-offline);
}

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

.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.active {
	background-color: #eef6ff;
	border-left: 4px solid #4876ef;
	box-shadow: 0 2px 4px rgba(72, 118, 239, 0.1);
}

.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 .date {
	color: #767676;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.counselListCount ul li .rA .idBox .id .state {
	width: 50px !important
}

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

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

/* 후처리 오버레이 스타일 */
.tabWrap .conArea {
	position: relative;
}

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

.tblList table thead th {
	background: var(--bgcolor-primary);
}

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

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

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

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

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

/* 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;
}

/* 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;
}

/* 말줄임 */
.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;
}

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

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

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

.state.on-hold,
.on-hold span {
	border: 1px solid rgba(34, 135, 56, 0.5) !important;
	background: rgba(34, 135, 56, 0.1) !important;
	color: #228738 !important;
}

.state.after-call-work,
.after-call-work span {
	border: 1px solid rgba(222, 52, 18, 0.5) !important;
	background: rgba(222, 52, 18, 0.1) !important;
	color: #de3412 !important;
}

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

.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;
	flex-direction: column;
	align-items: center;
	background: #fff;
	padding: 20px 16px;
	border-right: 1px solid #ddd;
	transition: all 0.5s ease;
}

#nav:not(.active) {
	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;
}

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

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

/* 토글버튼 */
.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);
}

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

/* 탭관련 */
.tab-buttons {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	border-bottom: 2px solid #e0e0e0;
}

.tab-btn {
	padding: 12px 24px;
	border: none;
	background: none;
	cursor: pointer;
	position: relative;
}

.tab-btn.active {
	font-weight: bold;
}

.tab-btn.active::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 2px;
	background: #1976d2;
}

.tab-content {
	display: none;
	width: 100%;
	height: 100%;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	overflow: hidden;
}

.tab-content.active {
	display: block;
}


/* 스크롤바 전체 */
*::-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;
	}
}