@charset "utf-8";

/* ============
 * 가상css(root)
 * ============ */
:root {
  /* Space */
  --space_base: 8px;
  /* Color */
  --color_main: #0ba29a;
  --color_main-deep: #098f88;
  --color_main-op: rgba(11, 162, 154, 0.1);
  --color_main-op3: rgba(11, 162, 154, 0.3);
  --color_main-hover: #07837c;
  --color_sub: #a0aab4;
  --color_sub-op: rgba(160, 170, 180, 0.3);
  --color_sub-hover: #87919b;
  --color_warn: #e64646;
  --color_bg-wrap: #f5f5f9;
  --color_bg-wrap-op: #f9f9fb;
  --color_bg-con: #fff;
  --color_bg-con-op: rgba(255, 255, 255, 0.2);
  --color_bg-sub: #d5dae2;
  --color_po1: #4664f0;
  --color_po1-op: rgba(70, 100, 240, 0.1);
  --color_po2: #1dc9b7;
  --color_po2-op: rgba(29, 201, 183, 0.1);
  --color_po3: #fd397a;
  --color_po3-op: rgba(253, 57, 122, 0.1);
  --color_po4: #ffb822;
  --color_po4-op: rgba(255, 184, 34, 0.1);
  --color_line: #e2e5e9;
  --color_line-op: rgba(226, 229, 233, 0.6);
  --color_txt-body: rgba(70, 80, 95, 0.9);
  --color_txt-body-100: rgba(70, 80, 95, 1);
  --color_txt-body-op: rgba(70, 80, 95, 0.4);
  --color_txt-title: #353637;
  --color_txt-warn: #ee9500;
  --color_btn1: rgba(70, 80, 90, 0.9);
  --color_btn1-100: rgba(70, 80, 90, 1);
  --color_blue-rgb: 60,120,230;
  --color_green-rgb: 70,190,65;
  --color_purple-rgb: 100,80,235;
}

:root[data-theme="dark"] {
  --color_sub: #7d878c;
  --color_sub-op: rgba(125, 135, 140, 0.3);
  --color_bg-wrap: #1e1e23;
  --color_bg-wrap-op: #222428;
  --color_bg-con: #2d3237;
  --color_bg-con-op: rgba(45, 50, 55, 0.2);
  --color_bg-sub: #3c4146;
  --color_line: #465055;
  --color_line-op: rgba(70, 80, 85, 0.6);
  --color_txt-body: rgba(226, 229, 233, 0.9);
  --color_txt-body-100: rgba(226, 229, 233, 1);
  --color_txt-body-op: rgba(226, 229, 233, 0.6);
  --color_txt-title: #fff;
  --color_btn1: rgba(226, 229, 233, 0.7);
  --color_btn1-100: rgba(226, 229, 233, 0.9);
}

@media (max-width: 640px) {
  .login__box, .modal__pw {
    width: 100vw !important;
    height: 100vh;
    border-radius: 0 !important;
    overflow-y: auto;
  }

  .login__area {
    padding-left: calc(var(--space_base) * 5) !important;
    padding-right: calc(var(--space_base) * 5) !important;
  }

  .login__area h1 {
    flex-wrap: wrap;
  }

  .float__chat_wrap.out {
    right: 0 !important;
    bottom: 48px !important;
    width: 100% !important;
    height: calc(100% - 104px) !important;
  }

  .float__chat_wrap.out.show {
    bottom: 152px;
  }
}

/* h1,h2,h3... */
h1 {
  font-size: 4.8rem;
}

h2 {
  font-size: 2.4rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.6rem;
}

.con__wrap label {
  font-size: 1.3rem;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--color_bg-wrap);
  color: var(--color_txt-body);
  font-size: 1.4rem;
}

.container.login {
  background: linear-gradient(135deg, var(--color_bg-wrap), var(--color_line));
  overflow: hidden;
}

html[data-theme="dark"] .container.login {
  background: linear-gradient(135deg, var(--color_line), var(--color_bg-wrap));
}

/* ======
 *  etc
 * ====== */
.txt__sub {
  font-weight: normal;
  color: var(--color_sub);
}

.w-tip {
  position: relative;
}

.tooltip {
  z-index: 9;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  display: none;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgb(0 0 0 / 70%);
  color: #fff;
  white-space: nowrap;
  font-size: 1.3rem !important;
  font-weight: normal;
  line-height: 1.2em;
}

.tooltip.par {
  padding: 6px 8px;
  line-height: 1.35em;
}

.tooltip::after {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgb(0 0 0 / 70%);
}

.tooltip.under {
  top: calc(100% + 4px);
  bottom: auto;
}

.tooltip.under::after {
  top: auto;
  bottom: 100%;
  border: 6px solid transparent;
  border-bottom-color: rgb(0 0 0 / 70%);
}

.tooltip.left {
  left: -4px;
  transform: translateX(0);
}

.tooltip.left::after {
  left: 12px;
  transform: translateX(0);
}

.tooltip.right {
  left: calc(100% + 4px);
  transform: translateX(-100%);
}

.tooltip.right::after {
  left: calc(100% - 24px);
  transform: translateX(0);
}

.w-tip:hover .tooltip,
button:hover .tooltip {
  display: block;
}

/* 경고 알림 */
.txt__alert {
  /* display 수정(dev) =231116= display: block; */
  display: none;
  color: var(--color_txt-warn);
  font-size: 1.3rem;
  padding-top: 4px;
}

.txt__alert i {
  margin-right: 4px;
}

/* filled 1px line (in Con-box) */

.line__1px {
  margin: 0 -24px;
  width: auto;
  height: 1px;
  background: var(--color_line);
}

.con-box[class*="detail__"] .line__1px {
  background: var(--color_bg-sub);
}

/* border-line - top, bottom, left, right */
.bordered {
  border: 1px solid var(--color_line);
  box-sizing: border-box;
}
.t-line {
  border-top: 1px solid var(--color_line);
}

.b-line {
  border-bottom: 1px solid var(--color_line);
}

.l-line {
  border-left: 1px solid var(--color_line);
}

.r-line {
  border-right: 1px solid var(--color_line);
}

/* ============================
 * textfield, select, textarea
 * ============================ */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="time"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="month"],
input[type="tel"],
input[type="url"],
input[type="range"],
select,
textarea {
  padding: 0 calc(var(--space_base) / 2 * 3);
  border: 1px solid var(--color_line);
  border-radius: calc(var(--space_base) / 4 * 3);
  caret-color: var(--color_main);
  font-size: inherit;
  background-color: var(--color_bg-con);
  color: inherit;
}

textarea {
  background-color: var(--color_bg-con);
  padding-top: var(--space_base);
  padding-bottom: var(--space_base);
  line-height: 1.35em;
}

textarea.op0 {
  background: transparent;
  border-radius: 0;
  border: 1px solid transparent;
}

*::placeholder {
  color: inherit;
  opacity: 0.4;
}

.style1 input[type="text"],
.style1 input[type="search"],
.style1 input[type="password"],
.style1 input[type="email"],
.style1 input[type="number"],
.style1 input[type="time"],
.style1 input[type="date"],
.style1 input[type="datetime"],
.style1 input[type="datetime-local"],
.style1 input[type="week"],
.style1 input[type="month"],
.style1 input[type="tel"],
.style1 input[type="url"],
.style1 input[type="range"],
.style1 select,
.style1 textarea {
  background-color: var(--color_bg-wrap);
  border: 1px solid var(--color_bg-wrap);
}

html[data-theme="dark"] .con-box + *[class*="detail__"] input[type="text"],
html[data-theme="dark"] .con-box + *[class*="detail__"] input[type="search"],
html[data-theme="dark"] .con-box + *[class*="detail__"] input[type="password"],
html[data-theme="dark"] .con-box + *[class*="detail__"] input[type="email"],
html[data-theme="dark"] .con-box + *[class*="detail__"] input[type="number"],
html[data-theme="dark"] .con-box + *[class*="detail__"] input[type="time"],
html[data-theme="dark"] .con-box + *[class*="detail__"] input[type="date"],
html[data-theme="dark"] .con-box + *[class*="detail__"] input[type="datetime"],
html[data-theme="dark"] .con-box + *[class*="detail__"] input[type="datetime-local"],
html[data-theme="dark"] .con-box + *[class*="detail__"] input[type="week"],
html[data-theme="dark"] .con-box + *[class*="detail__"] input[type="month"],
html[data-theme="dark"] .con-box + *[class*="detail__"] input[type="tel"],
html[data-theme="dark"] .con-box + *[class*="detail__"] input[type="url"],
html[data-theme="dark"] .con-box + *[class*="detail__"] input[type="range"],
html[data-theme="dark"] .con-box + *[class*="detail__"] select,
html[data-theme="dark"] .con-box + *[class*="detail__"] textarea {
  background-color: var(--color_bg-con);
  border: 1px solid var(--color_bg-con);
}

/* :focus - number, select 제외 */
input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="month"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="range"]:focus,
textarea:focus {
  background-color: var(--color_bg-con);
  border: 1px solid var(--color_main) !important;
  box-shadow: 0 0 8px var(--color_main-op3);
  transition: 0.25s;
}

html[data-theme="dark"] input[type="text"]:focus,
html[data-theme="dark"] input[type="search"]:focus,
html[data-theme="dark"] input[type="password"]:focus,
html[data-theme="dark"] input[type="email"]:focus,
html[data-theme="dark"] input[type="time"]:focus,
html[data-theme="dark"] input[type="date"]:focus,
html[data-theme="dark"] input[type="datetime"]:focus,
html[data-theme="dark"] input[type="datetime-local"]:focus,
html[data-theme="dark"] input[type="week"]:focus,
html[data-theme="dark"] input[type="month"]:focus,
html[data-theme="dark"] input[type="tel"]:focus,
html[data-theme="dark"] input[type="url"]:focus,
html[data-theme="dark"] input[type="range"]:focus,
html[data-theme="dark"] textarea:focus {
  background-color: var(--color_bg-wrap);
}

input[type="number"] {
  padding-right: 22px;
  background: url(../images/ico_arrow-updown.png) no-repeat right 12px center / 9px;
  background-color: var(--color_bg-con);
}

.style1 input[type="number"] {
  background: url(../images/ico_arrow-updown.png) no-repeat right 12px center / 9px;
  background-color: var(--color_bg-wrap);
  border: 1px solid var(--color_bg-wrap);
}

input[type="number"]:focus {
  background: url(../images/ico_arrow-updown.png) no-repeat right 12px center / 9px;
  box-shadow: 0 0 8px var(--color_main-op3);
  border: 1px solid var(--color_main);
}

html[data-theme="dark"] input[type="number"]:focus {
  background-color: var(--color_bg-wrap);
}

select {
  padding-right: 22px;
  background: url(../images/ico_arrow-down.png) no-repeat right 12px center / 9px;
  background-color: var(--color_bg-con);
}

.style1 select {
  background: url(../images/ico_arrow-down.png) no-repeat right 12px center / 9px;
  background-color: var(--color_bg-wrap);
  border: 1px solid var(--color_bg-wrap);
}

select:focus {
  background: url(../images/ico_arrow-up.png) no-repeat right 12px center / 9px;
  background-color: var(--color_bg-con);
  box-shadow: 0 0 8px var(--color_main-op3);
  border: 1px solid var(--color_main);
}

html[data-theme="dark"] select:focus {
  background-color: var(--color_bg-wrap);
}

/* :hover */
input[type="text"]:hover,
input[type="search"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="time"]:hover,
input[type="date"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="week"]:hover,
input[type="month"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="range"]:hover,
select:hover,
textarea:hover {
  border: 1px solid var(--color_main) !important;
  transition: 0.25s;
}

/* input, select - height 설정*/
.con__wrap input[type="text"],
.con__wrap input[type="search"],
.con__wrap input[type="password"],
.con__wrap input[type="email"],
.con__wrap input[type="number"],
.con__wrap input[type="time"],
.con__wrap input[type="date"],
.con__wrap input[type="datetime"],
.con__wrap input[type="datetime-local"],
.con__wrap input[type="week"],
.con__wrap input[type="month"],
.con__wrap input[type="tel"],
.con__wrap input[type="url"],
.con__wrap input[type="range"],
.con__wrap select,
.con__wrap button,
.pop-up input[type="text"],
.pop-up input[type="search"],
.pop-up input[type="password"],
.pop-up input[type="email"],
.pop-up input[type="number"],
.pop-up input[type="time"],
.pop-up input[type="date"],
.pop-up input[type="datetime"],
.pop-up input[type="datetime-local"],
.pop-up input[type="week"],
.pop-up input[type="month"],
.pop-up input[type="tel"],
.pop-up input[type="url"],
.pop-up input[type="range"],
.pop-up select,
.pop-up button {
  height: 36px;
}

.con-box__top input[type="text"],
.con-box__top input[type="search"],
.con-box__top input[type="password"],
.con-box__top input[type="email"],
.con-box__top input[type="number"],
.con-box__top input[type="time"],
.con-box__top input[type="date"],
.con-box__top input[type="datetime"],
.con-box__top input[type="datetime-local"],
.con-box__top input[type="week"],
.con-box__top input[type="month"],
.con-box__top input[type="tel"],
.con-box__top input[type="url"],
.con-box__top input[type="range"],
.con-box__top select,
.con-box__top button {
  height: calc(var(--space_base) * 4);
}

/* input, select, button - round : 양쪽 라운드 형태 */
.con__wrap input.round,
.con__wrap select.round,
.con__wrap button.round {
  border-radius: 18px;
}

.con-box__top input.round,
.con-box__top select.round,
.con-box__top button.round,
.he32x input.round,
.he32x select.round,
.he32x button.round,
input.he32x.round,
select.he32x.round,
button.he32x.round {
  height: calc(var(--space_base) * 4);
  border-radius: calc(var(--space_base) * 2);
}

/* 2개의 textfield 항목 붙여서 정렬 */
.link-l {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.style1 .link-l {
  border-right: 1px solid var(--color_line);
}

.style1 .link-l:hover,
.style1 .link-l:focus {
  border: 1px solid var(--color_main);
  transition: 0.25s;
}

input.link-r,
.style1 input.link-r {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid transparent;
}

input.link-r:hover,
.style1 input.link-r:hover,
.style1 input.link-r:focus {
  border: 1px solid var(--color_main);
  transition: 0.25s;
}

/* ul_selectbox Design =240226= */
.ul_select {
  background-color: var(--color_bg-con);
  border-radius: 8px;
  border: solid 1px var(--color_line);
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  height: 36px;
  line-height: 34px;
  outline: none;
  padding-left: 16px;
  padding-right: 30px;
  position: relative;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  width: auto;
}
.ul_select:hover {
  border-color: var(--color_main); }
.ul_select:active, .ul_select.open, .ul_select:focus {
  border-color: var(--color_main); }
.ul_select:after {
  border-bottom: 1px solid var(--color_sub);
  border-right: 1px solid var(--color_sub);
  content: '';
  display: block;
  height: 5px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform-origin: 66% 66%;
  transform: rotate(45deg);
  transition: all 0.15s ease-in-out;
  width: 5px; }
.ul_select.open:after {
    transform: rotate(-135deg); }
.ul_select.open .list {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0); }
.ul_select .list {
    background-color: var(--color_bg-con);
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--color_line-op);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    transform-origin: 50% 0;
    transform: scale(0.75) translateY(-21px);
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9;
}
.ul_select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 36px;
    list-style: none;
    min-height: 36px;
    outline: none;
    padding-left: 16px;
    padding-right: 29px;
    text-align: left;
    transition: all 0.2s; }
.ul_select .option:hover, .ul_select .option.focus, .ul_select .option.selected.focus {
    background-color: var(--color_bg-wrap); 
}
.ul_select .option.selected {
    font-weight: bold; 
}
.ul_select .option.disabled {
    background-color: transparent;
    color: var(--color_txt-body-op);
    cursor: default; 
}

/* 입력영역 균등한 크기로 배치 ("div.dp_flex"로 묶기) */
.flex1 {
  flex: 1;
  min-width: 0;
}

div .flex1 ~ .flex1 {
  margin-left: var(--space_base);
}

/* ================
 * checkbox, radio
 * ================ */
input[type="checkbox"],
input[type="radio"] {
  display: none;
}

/*Checkbox, Radio 감싸는 div */
.ck__wrap,
.ra__wrap {
  display: flex;
  align-items: center;
}

/* Checkbox, Radio */
.ckbox,
.radio,
.radio__line {
  display: inline-flex;
  font-size: inherit !important;
  align-items: center;
}

/* Checkbox */
.ckbox input + span {
  display: flex;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid var(--color_line);
  background: url(../images/ico_check_g.png) no-repeat center / 10px;
  cursor: pointer;
  transition: 0.15s;
}

html[data-theme="dark"] .ckbox input + span {
  background: url(../images/ico_check_g-dark.png) no-repeat center / 10px;
}

.con-box[class*="detail__"] .ckbox input + span {
  border: 1px solid var(--color_txt-body-op);
}

.ckbox input:checked + span,
html[data-theme="dark"] .ckbox input:checked + span,
.con-box[class*="detail__"] .ckbox input:checked + span {
  border: 0;
  background: url(../images/ico_check_w.png) no-repeat center / 10px;
  background-color: var(--color_main);
  transition: background-color 0.15s;
}

.ckbox input + span + span,
.radio input + span + span,
.radio__line input + div span + span {
  margin-left: 6px;
}

.ck__bookmark input + i {
  color: var(--color_sub);
  font-size: 1.25em;
  transition: color .25s;
  cursor: pointer;
}
.ck__bookmark input:checked + i {
  color: var(--color_po4);
}

/* Radio button */
.radio input + span,
.radio__line input + div span:first-child {
  display: flex;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--color_line);
  background: url(../images/ico_radio_g.png) no-repeat center / 8px;
  cursor: pointer;
  transition: 0.15s;
}

.radio input:checked + span,
.con-box[class*="detail__"] .radio input:checked + span,
.radio__line input:checked + div span:first-child {
  border: 0;
  background: url(../images/ico_radio_w.png) no-repeat center / 10px;
  background-color: var(--color_main);
  transition: background-color 0.15s;
}

.radio__line {
  display: flex;
  white-space: nowrap;
}

.radio__line div {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--color_line);
  border-radius: var(--space_base);
  cursor: pointer;
}

.radio__line:hover div {
  border: 1px solid var(--color_main);
  transition: border 0.2s;
}

.radio__line input:checked + div {
  border: 1px solid var(--color_main);
}

.radio__line ~ .radio__line {
  margin-left: var(--space_base);
}

.con-box[class*="detail__"] .radio input + span {
  border: 1px solid var(--color_txt-body-op);
}

/* ----------------
 *  radio - color  
 * ----------------*/
.radio__set {
  display: flex;
}
.radio__set.w100 {
  width: 100%;
}

.radio__set label {
  font-size: 1.4rem !important;
  cursor: pointer;
}
.radio__set.w100 label {
  flex: 1;
}

.radio__set label input + span {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--color_bg-con);
  border: 1px solid var(--color_line);
  height: 36px;
  box-sizing: border-box;
  transition: background 0.2s;
}
.radio__set.w100 label input + span {
  justify-content: center;
}

.style1 .radio__set label input + span {
  background: var(--color_bg-wrap);
  border: 0;
}

.radio__set label ~ label input + span {
  border-left: 0;
}

.style1 .radio__set label ~ label input + span {
  border-left: 1px solid var(--color_line-op);
}

.radio__set label:first-of-type input + span {
  border-radius: 6px 0 0 6px;
}

.radio__set.round label:first-of-type input + span {
  border-radius: 18px 0 0 18px;
}

.radio__set label:last-of-type input + span {
  border-radius: 0 6px 6px 0;
}

.radio__set.round label:last-of-type input + span {
  border-radius: 0 18px 18px 0;
}

.radio__set label input:checked + span {
  background: var(--color_main);
  border: 0 !important;
  color: var(--color_bg-con);
  transition: background 0.2s;
}

/* ========
 *  button
 * ======== */
button {
  position: relative;
  border-radius: var(--space_base);
  box-sizing: border-box;
  font-size: inherit;
  font-weight: 500;
}

.con__wrap button,
.pop-up button {
  padding: 0 calc(var(--space_base) / 2 * 3);
}

button.w32x,
button.w36x {
  padding: 0;
}

button.p-lr8 {
  padding: 0 var(--space_base);
}

/* button-style */
.con__wrap button i {
  opacity: 0.6;
}

.con__wrap button:hover i,
.pop-up button:hover i {
  opacity: 0.9;
  transition: opacity 0.25s;
}

/* button - 1,2,3... */
.btn0 {
  background: var(--color_main);
  color: #fff;
}

.btn0:hover {
  background: var(--color_main-hover);
  transition: 0.15s;
}

.btn1 {
  background: var(--color_btn1);
  color: var(--color_bg-con);
}

.btn1:hover {
  background: var(--color_btn1-100);
  transition: 0.15s;
}

.btn2 {
  background: var(--color_line);
  color: var(--color_txt-body);
}

.btn2:hover {
  background: var(--color_line-op);
  transition: 0.2s;
}

.btn3 {
  background: var(--color_bg-wrap);
  color: var(--color_txt-body);
}

.btn3:hover {
  background: var(--color_line-op);
  transition: 0.2s;
}

.btn-po1 {
  background-color: #6482f5;
  color: var(--color_bg-con);
}
.btn-po1:hover {
  background-color: var(--color_po1);
  transition: 0.2s;
}
.btn-po3 {
  background-color: #fa5a8c;
  color: var(--color_bg-con);
}
.btn-po3:hover {
  background-color: var(--color_po3);
  transition: 0.2s;
}
.btn-po4 {
  background-color: #f4b738;
  color: var(--color_bg-con);
}
.btn-po4:hover {
  background-color: var(--color_po4);
  transition: 0.2s;
}

.btn-op0 {
  background: transparent;
}

.btn-op0:hover {
  background: var(--color_bg-wrap);
  transition: 0.2s;
}

.btn-cnai {
  background: var(--color_main);
  color: var(--color_bg-con);
}

.btn-cnai:hover {
  background: var(--color_main-hover);
  transition: 0.2s;
}

.btn-main {
  background: var(--color_main);
  color: var(--color_bg-con);
}

.btn-main:hover {
  background: var(--color_main-hover);
  transition: 0.2s;
}

.btn-main-l {
  border: 1px solid var(--color_main-hover);
  color: var(--color_main);
  background: transparent;
}

.btn-main-l:hover {
  border: 1px solid var(--color_main);
  background: var(--color_main);
  color: #fff;
  transition: 0.2s;
}
/* button - disabled  =20240229= */
button:disabled {
  position: relative;
  opacity: .3;
  cursor: default;
  pointer-events: none;
}
button:disabled::after {
  content: '';
  border-radius: var(--space_base);
  background: #000000;
  opacity: 0.3;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/* button - next contents "blind" on-off */
.btn-fold {
  z-index: 1;
  position: absolute;
  /* 수정
  left: 50%; 
  transform: translateX(-50%); */
  height: 20px !important;
  border-radius: 12px;
  color: var(--color_main);
  background-color: var(--color_main-op);
  transition: .25s;
  /* 추가 */
  left: -10px;
  width: 20px;
  padding: 0 !important;

}
.blind {
  display: none !important;
}

/* button - Search */
input[type="search"].in-btn {
  padding-right: 36px;
}

.btn-search {
  padding: 0 var(--space_base);
  background: var(--color_main);
  color: var(--color_bg-con);
}

.btn-search.w36x {
  padding: 0 var(--space_base);
}

.btn-search:hover {
  background: var(--color_main-hover);
  transition: 0.15s;
}

.btn-search i {
  font-size: 1.2em;
}

.btn-search.in {
  padding: 0;
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
}

.btn-search.in i {
  font-size: 1.1em;
}

/* button - Call, =20240805= btn-talk 추가 */
.btn-call,
.btn-sms,
.btn-bot,
.btn-mail,
.btn-talk {
  width: 36px;
  padding: 0;
}

.btn-call {
  background: url(../images/ico_call-w.png) no-repeat center / 18px;
  background-color: #3fbd61;
}

.btn-call:hover {
  background-color: #3cd764;
  transition: 0.25s;
}
.btn-talk {
  background-color: #fae100;
  color: #3b1c1c;
  font-size: 1.25em;
}
.btn-talk .fa {
  opacity: 1;
}
/* btn-ing 추가 =231120= */
@keyframes redlight {
  0% {
    background-color: #dd0f00;
  }
  50% {
    background-color: #ff0f00;
  }
  100% {
    background-color: #dd0f00;
  }
}
.btn-ing {
  background: url(../images/ico_call-w.png) no-repeat center / 18px;
  animation: redlight 1.2s infinite;
}

.btn-sms {
  background: url(../images/ico_sms-w.png) no-repeat center / 22px;
  background-color: #006ce5;
}

.btn-sms:hover {
  background-color: #008cff;
  transition: 0.25s;
}

.btn-mail {
  background-color: #6E1EC8;
  color: #FFF;
}

.btn-mail:hover {
  background-color: #7d2ddc;
  transition: 0.25s;
}

.btn-excel {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 12px 0 30px !important;
  background: rgba(20, 160, 90, 0.15);
  border: 1px solid #14a05a;
  color: #14a05a;
}

.btn-excel:hover {
  background: #14a05a;
  color: #fff;
  transition: 0.25s;
}

.btn-excel span:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url(../images/ico_excel-g.png) no-repeat center / 100%;
}

.btn-excel:hover span:before {
  background: url(../images/ico_excel-w.png) no-repeat center / 100%;
  transition: 0.25s;
}

/* button - Bot (checkbox) */
.btn-bot input + span {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: url(../images/chatbot-off.png) no-repeat center / 100%;
  background-color: var(--color_bg-sub);
  cursor: pointer;
}

.btn-bot:hover input + span {
  background-color: var(--color_sub);
  transition: 0.2s;
}

.btn-bot input:checked + span {
  background: url(../images/chatbot-on.png) no-repeat center / 100%;
  transition: 0.2s;
}

/* button - X(Close) */
.btn-x {
  position: relative;
  background: transparent;
}

.btn-x.float {
  z-index: 1;
  position: absolute;
  top: -16px;
  right: 0;
}

.btn-x.float.popup {
  top: 12px;
  right: 12px;
}

.btn-x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background: url(../images/ico_x.png) no-repeat center / 100%;
  opacity: 0.4;
}

.btn-x:hover::after {
  opacity: 0.8;
}

html[data-theme="dark"] .btn-x::after {
  background: url(../images/ico_x-w.png) no-repeat center / 100%;
}

/* button - up(detail-Close) */
.btn-up {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  padding: 0;
  width: 36px;
  height: 36px;
  background: url(../images/ico_arrowup.png) no-repeat center / 14px;
  background-color: var(--color_bg-wrap);
  opacity: 0.5;
}

html[data-theme="dark"] .btn-up {
  background: url(../images/ico_arrowup-w.png) no-repeat center / 14px;
  background-color: var(--color_bg-wrap);
}

.btn-up:hover {
  opacity: 1;
  transition: 0.2s;
}

/* ========
 *  Toggle
 * ======== */
.toggle__lnd {
  z-index: 1;
  position: absolute;
  display: flex;
  width: 120px;
  height: 32px;
  border-radius: 16px;
  background: var(--color_bg-sub);
  cursor: pointer;
}

html[data-theme="dark"] .toggle__lnd {
  background: var(--color_bg-wrap);
}

.toggle__lnd input + span {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -1px;
  left: -1px;
  width: 80px;
  height: 34px;
  border-radius: 17px;
  background: url(../images/ico_sun.png) no-repeat 12px / 16px;
  background-color: var(--color_bg-con);
  box-shadow: 0 0 6px rgb(0 0 0 / 8%);
  transition: 0.25s;
}

.toggle__lnd input:checked + span {
  left: 41px;
  background: url(../images/ico_moon-w.png) no-repeat 12px / 16px;
  background-color: var(--color_sub);
  color: var(--color_txt-body);
  transition: 0.25s;
}

.toggle__lnd input + span:before {
  content: "Light";
  position: absolute;
  right: 16px;
  color: var(--color_txt-body);
  transition: 0.25s;
}

.toggle__lnd input:checked + span:before {
  content: "Dark";
  transition: 0.25s;
}

.toggle__lnd input + span:after {
  content: "";
  position: absolute;
  left: 100%;
  width: 36px;
  height: 100%;
  background: url(../images/ico_moon.png) no-repeat center / 16px;
  opacity: 0.35;
  transition: 0.25s;
}

.toggle__lnd input:checked + span:after {
  left: -36px;
  background: url(../images/ico_sun-w.png) no-repeat center / 16px;
  transition: 0.25s;
}

/* -------
 * Toggle
 * ------- */
.toggle-fa input + span {
  position: relative;
  display: inline-block;
  height: 24px;
  width: 48px;
  background: var(--color_line);
  border-radius: 12px;
  box-sizing: border-box;
  cursor: pointer;
  transition: 0.25s;
}
.toggle-fa input + span::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 3px rgb(0 0 0 / 10%);
  transition: 0.25s;
}
.toggle-fa input:checked + span {
  background: var(--color_main);
}
.toggle-fa input:checked + span::before {
  left: calc(100% - 20px);
}
.toggle-fa input + span i {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: calc(100% - 16px);
  font-size: 12px;
  opacity: .7;
  transition: left 0.25s;
}
.toggle-fa input:checked + span i {
  color: #FFF;
  left: 16px;
  opacity: 1;
}

/* -----------------------
 * Toggle with icon(✓/X)
 * ----------------------- */
.toggle-ico {
  display: flex;
  align-items: center;
}

.toggle-ico input + span {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
  width: 48px;
  background: var(--color_line);
  border-radius: 12px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.25s;
}

.con-box[class*="detail__"] .toggle-ico input + span {
  background: var(--color_bg-sub);
  transition: background 0.25s;
}

.toggle-ico input:checked + span,
.con-box[class*="detail__"] .toggle-ico input:checked + span {
  background: var(--color_main);
}

.toggle-ico input + span:before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 3px rgb(0 0 0 / 10%);
  transition: left 0.25s;
}

.toggle-ico input:checked + span:before {
  left: calc(100% - 20px);
}

.toggle-ico input + span:after {
  content: "";
  position: absolute;
  right: 0;
  display: block;
  width: 32px;
  height: 24px;
  background: url(../images/ico_x.png) no-repeat center / 14px;
  opacity: 0.35;
}

html[data-theme="dark"] .toggle-ico input + span:after {
  background: url(../images/ico_x-w.png) no-repeat center / 14px;
  opacity: 0.45;
}

.toggle-ico input:checked + span:after {
  content: "";
  left: 0;
  width: 32px;
  height: 24px;
  background: url(../images/ico_checked-w.png) no-repeat center / 14px;
  opacity: 1;
  transition: left 0.25s;
}

html[data-theme="dark"] .toggle-ico input:checked + span:after {
  background: url(../images/ico_checked-w.png) no-repeat center / 14px;
  opacity: 1;
}

/* ===========================
 *  Box design : 박스 디자인
 * =========================== */
.box__gr {
  overflow-y: auto;
  border-radius: calc(var(--space_base) / 4 * 3);
  background: var(--color_bg-wrap);
  padding: var(--space_base);
}

.txt-boxes {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -3px -6px -3px;
}

.txt-box {
  display: flex;
  align-items: center;
  margin: 0 3px 6px 3px;
  padding: 4px 8px;
  height: 24px;
  box-sizing: border-box;
  border-radius: 12px;
  white-space: nowrap;
  border: 1px solid var(--color_txt-body-op);
}

/* ===========================
 *  Drop down : 드랍다운, 드랍박스
 * =========================== */
*[class*="w-drop"] {
  position: relative;
}

.drop-box {
  z-index: 9;
  position: absolute;
  top: 100%;
  border-radius: calc(var(--space_base) / 2 * 3);
  padding: calc(var(--space_base) * 2);
  background: var(--color_bg-con);
  box-shadow: 0px 0px 50px 0px rgb(0 0 0 / 30%);
  white-space: nowrap;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0.5;
}

.drop-box.show {
  top: calc(100% + 4px);
  height: auto;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s, top 0.15s;
}

.drop-box.left0 {
  left: 0;
}

.drop-box.right0 {
  right: 0;
}

.drop-box.up {
  top: unset;
  bottom: 100%;
}
.drop-box.up.show {
  bottom: calc(100% + 4px);
  transition: bottom 0.15s;
}

.drop-box.center {
  left: 50%;
  transform: translateX(-50%);
}

.w-drop__hover:hover .drop-box,
.w-drop__hover .drop-box:hover {
  height: auto;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s;
}

.drop-box::after {
  content: "";
  position: absolute;
  bottom: 100%;
  border: 5px solid transparent;
  border-bottom: 6px solid var(--color_bg-con);
}
.drop-box.up::after {
  top: 100%;
  border-bottom: 5px solid transparent;
  border-top: 6px solid var(--color_bg-con);
}

.drop-box.left0::after {
  left: 16px;
}

.drop-box.right0::after {
  right: 16px;
}

.drop-box.center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* =============
 *  Modal : 모달
 * ============= */
.dim,
[class*="dim__"] {
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  transition: all 0.1s;
}

[class*="dim__"] {
  background: rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .dim {
  background: rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] [class*="dim_"] {
  background: rgba(0, 0, 0, 0.5);
}

.dim.show,
[class*="dim_"].show {
  visibility: visible;
  opacity: 1;
  transition: all 0.2s;
}
/* ==modal== top-bar 영역만큼 내려와서 가운데 정렬 */
[class*="modal__"] {
  z-index: 11;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: calc(50% - 36px);
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: var(--color_bg-con);
  border-radius: calc(var(--space_base) / 2 * 3);
  background: var(--color_bg-con);
  box-shadow: 0px 0px 50px 0px rgb(0 0 0 / 30%);
  transition: all 0.15s;
}
/* con_wrap 바깥에 위치하는 modal 위치 =231218= */
[class*="modal__"].pop-up {
  top: calc(50% + 4px);
}
/* ==비밀번호 변경 modal== (top-bar 영역 제외 가운데 정렬) =230925= */
.modal__pw { 
  top: calc(50% + 4px);
}
/* ==modal== top-bar 영역만큼 내려와서 가운데 정렬 */
[class*="modal__"].show {
  visibility: visible;
  opacity: 1;
  top: calc(50% - 40px);
  transition: all 0.25s;
}
/* con_wrap 바깥에 위치하는 modal 위치 =231218= */
[class*="modal__"].pop-up.show {
  top: 50%;
}
/* ==비밀번호 변경 modal== (top-bar 영역 제외 가운데 정렬) =230925= */
.modal__pw.show {
  top: 50%;
}

[class*="modal__in"] {
  padding: 16px 24px 16px;
  top: calc(50% + 4px);
}

[class*="modal__in"].show {
  top: 50%;
}

/* ========================
 *  File attachment(파일첨부)
 * ======================= */
.dropZoneDiv {
  border: 2px dashed var(--color_line);
  border-radius: calc(var(--space_base) / 4 * 3);
  padding: 8px 16px;
  line-height: 1.5em;
}

.style1 .dropZoneDiv {
  background: var(--color_bg-wrap);
}

/* 클릭하여 pc에서 파일 찾아보기 */
.file__upload {
  position: relative;
}

.file__upload input[type="file"] {
  display: none;
}

.btn__find-file {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 0 calc(var(--space_base) / 4 * 3) calc(var(--space_base) / 4 * 3) 0;
  cursor: pointer;
}

/* ===========================
 *  Search-result (list items)
 * =========================== */
.list__result {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  margin: 0 0 -6px -6px;
}

.name__w-x + span {
  display: flex;
  align-items: center;
  margin: 0 0 calc(var(--space_base) / 4 * 3) calc(var(--space_base) / 4 * 3);
  padding-left: var(--space_base);
  height: 28px;
  border-radius: 14px;
  border: 1px solid var(--color_line);
  box-sizing: border-box;
  font-size: 1.4rem;
  cursor: pointer;
}

.name__w-x + span i {
  padding: 0 var(--space_base) 0 calc(var(--space_base) / 4 * 3);
  font-size: 1.2rem;
  opacity: 0.5;
}

.name__w-x + span i:hover {
  opacity: 1;
}

.name__w-x:checked + span {
  border: 1px solid var(--color_main);
  color: var(--color_main);
  transition: 0.2s;
  font-weight: 600;
}

/* ========
 *  Table
 * ======= */
.con__wrap table {
  font-size: inherit;
  color: inherit;
}

.tbl__wrap {
  overflow: auto;
}

.tbl__wrap.line {
  border: 1px solid var(--color_line);
  border-radius: var(--space_base);
}
.tbl__wrap.w-title {
  padding: 0 16px 16px;
}
.tbl__wrap.w-title h4 {
  padding: 6px 8px;
  margin: 0 -16px;
  background-color: var(--color_bg-wrap-op);
}
.tbl__wrap.w-bg {
  padding: 12px 16px;
  background-color: var(--color_bg-wrap-op);
  border-radius: var(--space_base);
}

.con-box[class*="detail__"] .tbl__wrap.line {
  border: 1px solid var(--color_bg-sub);
}

table .top {
  vertical-align: top;
}

table .top-c {
  vertical-align: top;
  text-align: center;
}

table .top-h24,
table .top-h32,
table .top-h36 {
  vertical-align: top;
}
table .top-h24 {
  line-height: 24px;
}
table .top-h32 {
  line-height: 32px;
}
table .top-h36 {
  line-height: 36px;
}

.pad8-0 {
  padding: 8px 0;
}

.td__newline {
  white-space: normal;
  line-height: 1.5em;
  text-align: left;
}

/* === table style === */
/* th-td 가로 정렬 */
.tbl1 {
  text-align: left;
  table-layout: fixed;
}

.tbl1 tr ~ tr th,
.tbl1 tr ~ tr td {
  padding-top: calc(var(--space_base) / 4 * 5);
}

.tbl1 th {
  padding-left: calc(var(--space_base) * 2);
  font-weight: 600;
  font-size: 1.3rem;
}

.tbl1 td {
  padding-left: var(--space_base);
}

.tbl1 tr th:first-child,
.tbl1 tr td:first-child {
  padding-left: 0;
}

/* th-td 세로 정렬 */
.tbl2 {
  text-align: left;
  table-layout: fixed;
}

.tbl2 tr th ~ th,
.tbl2 tr td ~ td {
  padding-left: calc(var(--space_base) / 4 * 5);
}

.tbl2 th {
  vertical-align: bottom;
  padding-bottom: 3.4px;
  height: 30px;
  font-weight: 600;
  font-size: 1.3rem;
}

.tbl2 td {
  vertical-align: top;
}

/* th-td 가로 정렬 with line */
.tbl__trline {
  text-align: left;
  table-layout: fixed;
}

.tbl__trline tr {
  height: calc(var(--space_base) / 2 * 11);
  border-top: 1px solid var(--color_line);
}

.tbl__trline tr:last-of-type {
  border-bottom: 1px solid var(--color_line);
}

.tbl__trline th {
  font-size: 1.3rem;
}

.con-box[class*="detail__"] .tbl__trline tr {
  border-top: 1px solid var(--color_sub);
}

.con-box[class*="detail__"] .tbl__trline tr:last-of-type {
  border-bottom: 1px solid var(--color_sub);
}

/* Table - list */
.tbl__list {
  text-align: left;
  white-space: nowrap;
}

.tbl__list thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.tbl__list thead::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(100% - 1px);
  height: 1px;
  width: 100%;
  background-color: var(--color_line);
}

.tbl__list tr {
  height: 40px;
}

.tbl__list.thtd tr ~ tr {
  border-top: 1px solid var(--color_line);
}

.tbl__list tbody tr:hover {
  background: var(--color_bg-wrap-op);
  transition: 0.15s;
}
/* .tbl__list, tbl__chatli tr.selected 추가(dev) =231116= =231208= */
.tbl__list tbody tr.selected,
.tbl__chatli tr.selected {
  background: #eff18959;
}

.tbl__list th,
.tbl__list td {
  padding: 6px 16px;
}

.tbl__list thead th {
  font-size: 1.3rem;
  border-bottom: 1px solid var(--color_line);
}

.tbl__list tbody tr ~ tr > td {
  border-top: 1px solid var(--color_line);
}

.con-box[class*="detail__"] .tbl__list tbody tr ~ tr td {
  border-top: 1px solid var(--color_bg-sub);
}

.tbl__list.thtd tbody tr ~ tr td {
  border-top: 0;
}

/* table - list (th - bg colored) */
.tbl__list.th-bg th {
  background: var(--color_bg-wrap-op);
  font-weight: 600;
}

/* table - list (with last-line) */
.tbl__list.w-lastline tr:last-child td {
  border-bottom: 1px solid var(--color_line);
}

/* Table-list (with devided line) */
.tbl__list.d-line th,
.tbl__list.d-line td {
  padding: 6px 12px;
  border-left: 1px solid var(--color_bg-wrap);
  border-right: 1px solid var(--color_bg-wrap);
}

.tbl__list.d-line tr th:first-child,
.tbl__list.d-line tr td:first-child {
  border-left: 0;
}

.tbl__list.d-line tr th:last-child,
.tbl__list.d-line tr td:last-child {
  border-right: 0;
}

.tbl__list.d-line .img__wrap {
  border-radius: 0;
  margin: -6px -12px;
}

/* Table - line */
.tbl__line {
  text-align: left;
  white-space: nowrap;
}

.tbl__line thead {
  position: sticky;
  top: 0;
}

.tbl__line tr {
  height: 40px;
}

.tbl__list tbody tr:hover {
  background: var(--color_bg-wrap-op);
  transition: 0.15s;
}

.tbl__line th,
.tbl__line td {
  padding: 6px 12px;
}

.tbl__line th {
  background: var(--color_bg-wrap);
  font-weight: 600;
}

.tbl__line thead th {
  font-size: 1.3rem;
  border-bottom: 1px solid var(--color_line);
  border-right: 1px solid var(--color_line);
}

.tbl__line thead th:last-child {
  border-right: 0;
}

.tbl__line tbody th {
  border-right: 1px solid var(--color_line);
}

.tbl__line tbody tr td {
  border-left: 1px solid var(--color_line-op);
  border-right: 1px solid var(--color_line-op);
}

.tbl__line tbody tr td:first-child {
  border-left: 0;
}

.tbl__line tbody tr td:last-child {
  border-right: 0;
}

.tbl__line tbody tr ~ tr th,
.tbl__line tbody tr ~ tr td {
  border-top: 1px solid var(--color_line);
}

.con-box[class*="detail__"] .tbl__line tbody tr ~ tr td {
  border-top: 1px solid var(--color_bg-sub);
}

/* Table - th : 정렬(sort) button  */
.tbl__list .th-sort {
  position: relative;
  padding: 6px 28px 6px 12px;
  cursor: pointer;
}

.tbl__list.d-line .th-sort {
  padding: 6px 20px 6px 12px;
}

.filled .tbl__list .th-sort:last-child {
  padding-right: 40px;
}

.th-sort .btns {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
}

.tbl__list.d-line .th-sort .btns {
  right: 6px;
}

.filled tr th:last-child.th-sort .btns {
  right: 22px;
}

.th-sort .btns i {
  padding: 0 2px;
  cursor: pointer;
  opacity: 0.5;
}

.th-sort .btns i.on {
  opacity: 1;
  transition: 0.2s;
}

.tbl__list .fa-search {
  cursor: pointer;
}

.tbl__list .fa-search:hover {
  opacity: 1;
  transition: 0.2s;
}

/* table - list (with img + txt) 채팅상담 > 상담스크립트 */
.tbl__list.thtd.img-txt tr td:last-child {
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.tbl__list .img__wrap,
.tbl__list.thtd.img-txt tr td:last-child .img__wrap {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
}

.tbl__list .img__wrap img,
.tbl__list.thtd.img-txt tr td:last-child .img__wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tbl__list.thtd.img-txt tr td:last-child .img__wrap + .txt-over__line {
  width: calc(100% - 76px);
  margin-left: 16px;
}

.tbl__list.thtd.img-txt tr:hover td:last-child .txt-over__line {
  width: calc(100% - 80px);
}

.tbl__list.thtd.img-txt tr:hover td:last-child .img__wrap + .txt-over__line {
  width: calc(100% - 76px - 80px);
}

.tbl__list.thtd.img-txt tr td:last-child .btn__wrap {
  display: flex;
  align-items: center;
  visibility: hidden;
  width: 0;
  overflow: hidden;
  opacity: 0.5;
}

.tbl__list.thtd.img-txt tr td:last-child .btn__wrap button,
.tbl__list.thtd.img-txt tr td:last-child .btn__wrap label {
  width: 36px;
  height: 36px;
  font-size: 1.2em;
  background: transparent;
}

.tbl__list.thtd.img-txt tr td:last-child .btn__wrap label {
  display: block;
  position: relative;
  cursor: pointer;
}

.tbl__list.thtd.img-txt tr td:last-child .btn__wrap label * {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tbl__list.thtd.img-txt tr td:last-child .btn__wrap label * {
  opacity: 0.6;
}

.tbl__list.thtd.img-txt tr td:last-child .btn__wrap label:hover * {
  opacity: 1;
  transition: 0.2s;
}

.tbl__list.thtd.img-txt tr td:last-child .btn__wrap label input:checked + span {
  opacity: 1;
  color: var(--color_main);
}

.tbl__list.thtd.img-txt tr:hover td:last-child .btn__wrap {
  margin-left: 8px;
  visibility: visible;
  width: auto;
  overflow: visible;
  opacity: 1;
  transition: opacity 0.2s;
}



/* Table - Chat list : 테이블 - 채팅 리스트 */
.tbl__chatli tr:nth-child(odd) {
  height: 32px;
}

.tbl__chatli tr:nth-child(even) {
  border-bottom: 1px solid var(--color_bg-wrap);
}

.tbl__chatli tr:last-child {
  border: 0;
}

.tbl__chatli th,
.tbl__chatli td,
.tbl__chatli tr:nth-child(even) td:first-of-type {
  padding: 0 12px;
}

.tbl__chatli tr:nth-child(odd) th:first-of-type {
  width: 64px;
  padding: 10px 0 10px 24px !important;
}

.tbl__chatli tr:nth-child(odd) td:last-of-type,
.tbl__chatli tr:nth-child(even) td:last-of-type {
  width: 90px;
  text-align: center;
}

.tbl__chatli tr:nth-child(odd) td:last-of-type {
  padding: 0 24px 6px 0;
}

.tbl__chatli tr:nth-child(even) td:last-of-type {
  padding: 0 24px 0 0;
}

.tbl__chatli tr:nth-child(odd) th,
.tbl__chatli tr:nth-child(odd) td {
  padding-bottom: 6px;
  vertical-align: bottom;
}

.tbl__chatli tr:nth-child(even) th,
.tbl__chatli tr:nth-child(even) td {
  padding-top: 6px;
  vertical-align: top;
}

.ico__wrap {
  position: relative;
}

.ico__ch {
  display: block;
  overflow: hidden;
}

.con-box__top .ico__ch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  margin-right: 8px;
}

.tbl__chatli .ico__ch {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.ico__ch.kakao {
  background: url(../images/ch_kakao.png) no-repeat center / 100%;
}

.ico__ch.naver {
  background: url(../images/ch_naver.png) no-repeat center / 100%;
}

.ico__ch.cnai {
  background: url(../images/ch_chive-cx.png) no-repeat center / 100%;
}

.tbl__chatli [class*="ico__ch"] + .dot {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  border: 2px solid var(--color_bg-con);
  background: var(--color_main);
  box-sizing: border-box;
}

.tbl__chatli .ico__ch.kakao + .dot {
  background: #ffe812;
}

.tbl__chatli .ico__ch.naver + .dot {
  background: #00bf34;
}

.tbl__chatli .ico__ch.cnai + .dot {
  background: var(--color_main);
}

.tbl__chatli .chat__state {
  transform: translateY(-2px);
}

.tbl__chatli .time {
  text-align: center;
  color: var(--color_main);
}

.tbl__chatli .time.end {
  color: var(--color_txt-body);
}

/* .past-time ADD =231208= */
.tbl__chatli .past-time {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  background: var(--color_main-op);
  color: var(--color_main);
}
.tbl__chatli .past-time.end {
  background-color: var(--color_bg-wrap);
  color: var(--color_txt-body);
}
.tbl__chatli.more .past-time {
  margin-top: -2px;
}

/* TABLE == tbl__chatli.more ADD =231208= */
.tbl__chatli.more tr:nth-child(odd) {
  height: 30px;
}
.tbl__chatli.more tr:nth-child(even) {
  height: 28px;
}
.tbl__chatli.more tr:nth-child(odd) th:first-of-type {
  width: 64px;
  padding: 9px 0 9px 24px !important;
}
.tbl__chatli.more tr:nth-child(odd) th, 
.tbl__chatli.more tr:nth-child(odd) td {
  padding: 6px 12px 0;
  vertical-align: middle;
}
.tbl__chatli.more tr:nth-child(even) th, 
.tbl__chatli.more tr:nth-child(even) td {
  padding: 2px 12px 0;
}
.tbl__chatli.more tr:nth-child(odd) td:last-of-type {
  padding: 6px 24px 0 0;
}
.tbl__chatli.more tr:nth-child(even) td:last-of-type {
  padding: 2px 24px 0 0;
}
.tbl__chatli.more .chat__state {
  transform: none;
}

/* 채팅상담 담당자 배정 design 추가 =240206= */
.chat-action {
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px;
  border-radius: 12px;
  white-space: nowrap;
  background: var(--color_bg-con);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: opacity .25s;
}
.chat-action.on {
  visibility: visible;
  opacity: 1;
}
.chat-action.down {
  top: 100%;
}
.chat-action.up {
  bottom: 100%;
}
.chat-action li {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
  border-radius: 8px;
  padding: 0 8px;
  font-weight: normal;
  transition: .25s;
}
.chat-action li:hover {
  background-color: var(--color_bg-wrap);
  cursor: pointer;
}
.chat-action li ~ li::after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 8px;
  width: calc(100% - 16px);
  height: 1px;
  background-color: var(--color_bg-wrap);
}
.chat-action ul li .fa {
  opacity: .5;
  transition: .25s;
}
.chat-action ul li:hover .fa {
  opacity: .7;
}
.chat-action ul li .fa + span {
  margin: 0 6px;
}
.chat-action li .user-name {
  font-weight: 700;
  margin-right: 8px;
}
.tbl__chatli .user-name.po_re {
  cursor: pointer;
}
.chat-action li span.user-number {
  margin-left: auto;
  padding: 3px 6px;
  border-radius: 6px;
  background-color: var(--color_main-op);
  color: var(--color_main);
  font-size: 12px;
  font-weight: 700;
  transition: .25s;
}
.chat-action li:hover span.user-number {
  background-color: var(--color_main-op3);
}
.chat-action .table-title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
}
.chat-action .table-title .title_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  border-radius: 14px;
  background-color: var(--color_bg-wrap);
}
.chat-action .table-title .title_icon .fa {
  font-size: 11px;
  opacity: .5;
}
.chat-action .table-title button {
  position: absolute;
  left: 0;
  height: 32px;
  width: 32px;
  border-radius: 8px;
  background-color: transparent;
  transition: .25s;
}
.chat-action .table-title button:hover {
  background-color: var(--color_bg-wrap);
}
.chat-action .table-title button .fa {
  opacity: .5;
}
.chat-action .table-title button:hover .fa {
  opacity: 1;
}

/* filled table (in CON-BOX) */
.filled {
  margin-left: -24px;
  margin-right: -24px;
  overflow-y: auto;
}

.filled.w-line {
  border-top: 1px solid var(--color_line);
  border-bottom: 1px solid var(--color_line);
}

.filled.w-tline {
  border-top: 1px solid var(--color_line);
}
.filled.w-bline {
  border-bottom: 1px solid var(--color_line);
}
.filled thead {
  background: var(--color_bg-con);
}

.filled .tbl__list tr th:first-child,
.filled .tbl__list tr td:first-child {
  padding-left: 28px;
}

.filled .tbl__list tr th:last-child,
.filled .tbl__list tr td:last-child {
  padding-right: 28px;
}

/* table 내 말줄임(ellipsis) - 해당 td에 div.txt-over__dot */
.txt-over__dot {
  display: table;
  width: 100%;
  table-layout: fixed;
  white-space: nowrap;
}

.txt-over__dot > * {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.txt-over__line {
  display: -webkit-box;
  white-space: normal;
  line-height: 1.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-box-orient: vertical;
}

.txt-over__line.over2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.txt-over__line.over3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* table 내 줄바꿈 - 해당 td에 div.txt-over__nextline */
.txt-over__nextline {
  white-space: normal;
  line-height: 1.5em;
}

/* table 내 디자인 요소 */
td br + [class*="__in-bg"] {
  margin-top: 6px;
}

.ico__in-bg {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px !important;
  box-sizing: border-box;
  background: var(--color_bg-wrap);
  border-radius: var(--space_base);
}

.ico__in-bg.round {
  border-radius: 14px;
}

.ico__in-bg::before,
.ico__in-bg .fa::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.75;
}

button.ico__in-bg:hover::before,
button.ico__in-bg:hover .fa::before {
  opacity: 1;
  transition: 0.2s;
}

.ico__in-bg[class*="c-"] {
  color: var(--color_bg-con);
}
.ico__in-bg.c-1 {
  background: var(--color_po1);
}
.ico__in-bg.c-2 {
  background: var(--color_po2);
}
.ico__in-bg.c-3 {
  background: var(--color_po3);
}
.ico__in-bg.c-4 {
  background: var(--color_po4);
}
.ico__in-bg.c-0 {
  background: var(--color_txt-body);
}

.tbl__list .fa-genderless {
  font-size: 2rem;
  color: #006ce5;
}

.tbl__list .fa-times {
  color: #e6465a;
}

.tbl__list tr.total {
  background: var(--color_bg-wrap-op);
  font-weight: 600;
}
.tbl__list tr.t-2line {
  border-top: 2px solid var(--color_line);
}

/* 페이징(Paging) */
.paging {
  display: flex;
}

.paging li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  background: var(--color_bg-wrap);
  border-radius: var(--space_base);
  cursor: pointer;
}

.paging li:hover {
  background: var(--color_line);
  transition: 0.25s;
}

.paging li ~ li {
  margin-left: calc(var(--space_base) / 2);
}

.paging .prev,
.paging .next {
  min-width: 48px;
}

.paging .num {
  min-width: 36px;
}

.paging .num.this {
  background: var(--color_main);
  color: var(--color_bg-con);
  font-weight: 600;
}

/* =======================
 *  Text with Color frame
 * ======================= */
[class*="txt__in-bg"] {
  padding: 3px calc(var(--space_base) / 4 * 3);
  border-radius: calc(var(--space_base) / 2);
  font-weight: 600;
}

.txt__in-bg0 {
  background: var(--color_bg-wrap);
  color: var(--color_txt-body);
}

.txt__in-bg1 {
  background: var(--color_po2-op);
  color: var(--color_po2);
}

.txt__in-bg2 {
  background: var(--color_po1-op);
  color: var(--color_po1);
}

.txt__in-bg3 {
  background: var(--color_po4-op);
  color: var(--color_po4);
}

.txt__in-bg4 {
  color: #6e69ff;
  background: rgb(110 105 255 / 15%);
}

.txt__in-bg5 {
  color: #03c3ec;
  background: rgb(3 195 236 / 15%);
}

.txt__in-bg-g {
  background: var(--color_bg-wrap);
}

.txt__in-bg-line {
  background: var(--color_bg-wrap);
  border: 1px solid var(--color_line);
}

/* ============
 *  Text Style
 * ============ */
.po__main {
  font-weight: 600;
  color: var(--color_main) !important;
}

.po__red {
  color: #e6465a;
}

/* 파일명 길이 제한 */
.file__name {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.file__name .name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 1.025em;
  font-weight: 600;
}

.file__name .ext {
  flex-shrink: 0;
  margin-left: 2px;
}

.file__name .size {
  margin-left: 4px;
  opacity: 0.65;
}

/* 첨부파일 개별 design */
.file__attach {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--color_sub);
  cursor: pointer;
}

.file__attach ~ .file__attach {
  margin-left: 8px;
}

/* ============
 *  animation 
 * ============ */
/* 깜빡깜빡 */
@keyframes onoff {
  0% {
    opacity: 0.5;
  }

  49% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.play_onoff {
  animation: onoff 1.2s infinite;
}

/* ====== Login ====== */
.login__wrap {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login__wrap:before,
.login__wrap:after {
  content: "";
  position: absolute;
  display: block;
}

.login__wrap:before {
  left: -250px;
  top: -70px;
  width: 360px;
  height: 142px;
  background: url(../images/symbol_orm.png) no-repeat center / 100%;
  opacity: 0.1;
}
html[data-theme="dark"] .login__wrap:before {
    background: url(../images/symbol_orm-w.png) no-repeat center / 100%;
}

.login__wrap:after {
  right: -480px;
  bottom: -100px;
  width: 640px;
  height: 485px;
  background: url(../images/login-back_orm.png) no-repeat center / 100%;
  opacity: 0.3;
}

.login__box {
  display: flex;
  align-items: center;
  border-radius: var(--space_base);
  background: var(--color_bg-con);
  box-shadow: 0 2px 6px rgb(0 0 0 / 5%);
  width: 520px;
  z-index: 1;
}

.login__area {
  padding: calc(var(--space_base) * 10);
  width: 100%;
}

.login__area h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--color_txt-title);
}

.login__area p:first-of-type {
  margin-top: calc(var(--space_base) * 3);
}

.login__area p ~ p {
  margin-top: calc(var(--space_base) / 2);
}

.login__area button {
  height: calc(var(--space_base) * 6);
  font-size: 1.6rem;
}

.btn__login {
  background: var(--color_main);
  color: #fff;
  transition: 0.25s;
}

.btn__login:hover {
  transform: translateY(-1px);
  background: var(--color_main-hover);
  box-shadow: 0 2px 14px rgba(11, 162, 154, 0.3);
}

.login__area ul,
.login__area li {
  display: flex;
  flex-direction: column;
}

.login__area li {
  position: relative;
  margin-top: calc(var(--space_base) * 5);
}

.login__area li label {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  font-size: 1.2rem;
  color: var(--color_txt-title);
}

.login__area input[type="text"],
.login__area input[type="password"] {
  height: 48px;
}

.login__area li .fa + input {
  padding-left: calc(var(--space_base) * 5);
}

input.input__pw {
  padding-right: calc(var(--space_base) * 5);
}

.login__area li span.fa {
  position: absolute;
  top: 50%;
  left: calc(var(--space_base) * 2);
  transform: translateY(-50%);
  opacity: 0.15;
  font-size: 1.2em;
}

.login__area .txt__pw-reissue {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  font-size: 12px;
  color: var(--color_main);
}

.login__area .txt__pw-reissue:hover {
  text-decoration-line: underline;
  cursor: pointer;
}

.login__area li .eye {
  position: absolute;
  right: 8px;
  height: 100%;
  width: 32px;
  cursor: pointer;
}

.login__area li .eye i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login__area li .fa-eye,
.login__area li .fa-eye-slash {
  opacity: 1;
  color: var(--color_txt-body);
}

.login__area li.warn__incorrect {
  margin: 0;
  padding: 16px 0 8px;
  display: none;
  color: var(--color_txt-warn);
}

.login__area li.warn__incorrect [class*="fa"] {
  position: relative;
  left: 0;
  transform: none;
  opacity: 1;
}

.login__area li.warn__incorrect.show {
  display: block;
}

.login__area li .ckbox.r0 {
  left: auto;
}
/* 인증번호 받기 form 추가 =20241204= */
.login__area .certify-form input,
.login__area .certify-form button {
    height: 36px;
}
.login__area .certify-form button {
    font-size: inherit;
    right: 0;
}

/* ====== Login - Bottom ====== */
.bottom__wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  height: 48px;
  width: 100%;
  background: var(--color_bg-wrap);
}

.bottom__con {
  display: flex;
  align-items: center;
}

.txt__copyright {
  font-size: 1.2rem;
  color: var(--color_sub);
}

.txt__cnai {
  font-weight: 700;
  color: var(--color_txt-body);
}

/* =================
 *  SNB | Side-Menu
 * ================= */
.snb {
  z-index: 11;
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 100%;
  background: var(--color_bg-con);
  box-shadow: 25s;
}

/* 사이드영역 folded 일때 설정값 */
.snb.folded {
  width: 80px;
  transition: 0.25s;
}

.snb.folded .btn__snb-fold i {
  transform: rotate(180deg);
  transition: 0.25s;
}

.snb.folded .chive__txt {
  visibility: hidden;
  opacity: 0;
  transition: 0.25s;
}

.snb.folded .logo-area.orm,
.snb.folded .logo-area.chivee {
  background-color: var(--color_main);
  transition: background-color 0.35s;
}

.snb.folded .menu > li > a:after,
.snb.folded .menu li .sub {
  display: none !important;
}

.snb.folded .kms-search {
  visibility: hidden;
  padding: 0;
  max-height: 0;
  opacity: 0;
  transition: opacity 0.35s;
}

.logo-area {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 24px;
  height: 80px;
}

.logo-area .simbol {
  width: 32px;
  height: auto;
}
.snb.folded .logo-area.orm .simbol {
    display: none;
}
.logo-area.orm:after {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: url(../images/symbol_orm-w.png) no-repeat center / 24px auto;
  background-color: var(--color_main);
  transition: background .2s;
}

.logo-area.chivee:after {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 16px;
  background: url(../images/hivee.svg) no-repeat center / 24px auto;
  background-color: var(--color_main);
  transition: background .2s;
}

.snb.folded .logo-area.orm:after {
  content: "";
  background: url(../images/symbol_orm-w.png) no-repeat center / 100% auto;
}
.snb.folded .logo-area.chivee:after {
  background: url(../images/hivee.svg) no-repeat center / 36px auto;
}

.snb.folded .menu__wrap {
  overflow: visible;
}

.snb.folded .menu__txt {
  height: auto;
}

.menu__txt {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(10px, -50%);
  height: 0;
  visibility: hidden;
  opacity: 0.5;
}

.menu__txt span {
  position: relative;
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--color_txt-body);
  color: var(--color_bg-con);
  font-size: 1.3rem;
}

.menu__txt span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right: 6px solid var(--color_txt-body);
}

.snb.folded .menu > li > a:hover + .menu__txt {
  left: calc(100% + 4px);
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s, left 0.25s;
}

.logo-area .simbol img {
  height: 32px;
}

.logo-area .chive__txt {
  margin-left: 12px;
  font-size: 22px;
  font-weight: 800;
  color: var(--color_sub);
  opacity: 1;
  white-space: nowrap;
  font-family: "Paybooc";
}
.logo-area.aia .chive__txt {
    font-family: inherit;
}

.logo-area .chive__txt span {
  font-weight: 500;
}

.btn__snb-fold {
  z-index: 1;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--color_line);
  box-shadow: 3px 0 2px rgb(0 0 0 / 5%) inset;
}

.btn__snb-fold i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: var(--color_main);
  color: var(--color_bg-con);
}

.btn__snb-fold:hover i {
  background: var(--color_main-hover);
  transition: 0.25s;
}

.kms-search {
  position: relative;
}

.snb .kms-search {
  padding: 0 16px;
  transition: opacity 0.25s;
}

.kms-search input {
  padding: 0 36px 0 24px;
  width: 100%;
  height: 40px !important;
  border-radius: 20px;
  border: 1px solid var(--color_bg-wrap);
  background: var(--color_bg-wrap);
}

.kms-search button {
  position: absolute;
  right: 8px;
  top: 2px;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: transparent;
}

.snb .kms-search button {
  right: 22px;
}

.kms-search button span {
  font-size: 1.2em;
  opacity: 0.7;
}

.kms-search input:hover + button span,
.kms-search input:focus + button span,
.kms-search input + button:hover span .kms-search input + button:focus span {
  color: var(--color_main);
  opacity: 1;
  transition: 0.25s;
}

.kms-search input:focus {
  background: transparent;
  transition: 0.25s;
}

/* ====== side-menu ====== */
.snb .kms-search .menu__wrap {
  margin-top: 16px;
}

.menu__wrap {
  padding: 16px;
  height: calc(100% - 120px);
  overflow-y: auto;
  overflow-x: hidden;
}

.menu {
  font-size: 1.6rem;
}

.menu li {
  position: relative;
  white-space: nowrap;
}

.menu > li ~ li {
  margin-top: calc(var(--space_base) / 2);
}

.menu > li .sub {
  margin-top: calc(var(--space_base) / 2);
}

.menu > li > a:after {
  content: "";
  position: absolute;
  right: 16px;
  top: 17px;
  width: 10px;
  height: 10px;
  background: url(../images/ico_arrow-right.png) no-repeat center / 100%;
  opacity: 0.5;
}

.menu > li.no-sub > a:after {
  display: none;
}

.menu > li > a:hover:after {
  opacity: 1;
}

.menu > li > a.checked:after {
  background: url(../images/ico_arrow-right_on.png) no-repeat center / 100%;
  transform: rotate(90deg);
  opacity: 1;
  transition: 0.25s;
}

.sub > li:has(ul) > a:after {
  content: "";
  position: absolute;
  right: 16px;
  top: 17px;
  width: 10px;
  height: 10px;
  background: url(../images/ico_arrow-right.png) no-repeat center / 100%;
  opacity: 0.5;
}
.sub > li:has(ul) > a.checked:after {
  transform: rotate(90deg);
}

.menu li a {
  padding-left: 48px;
  display: flex;
  align-items: center;
  height: 44px;
  border-radius: var(--space_base);
  overflow: hidden;
}

.menu > li a:hover {
  background: var(--color_bg-wrap);
  transition: 0.25s;
}

.menu li a span {
  position: absolute;
  left: 24px;
  transform: translateX(-50%);
  opacity: 0.5;
}

.menu li a:hover span {
  opacity: 1;
  transition: 0.25s;
}

.menu > li > a.checked {
  background: var(--color_main);
  color: #fff;
  font-weight: 600;
  transition: 0.25s;
}

.menu li a.checked span {
  opacity: 1;
}

.menu .sub {
  display: none;
}

.sub li a {
  height: 40px;
  font-size: 1.5rem;
}
/* 3depth - a 추가  =230906= */
.sub .sub li a {
  padding-left: 48px;
  margin-left: 24px;
  width: calc(100% - 72px);
  height: 36px;
}
/* 3depth - position 수정 - top,transform =230906= */
.sub li a:before {
  content: "";
  position: absolute;
  left: 24px;
  top: 16px;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--color_sub);
  opacity: 0.5;
}
/* 3depth - a:before 추가  =230906= */
.sub .sub li a:before {
  left: 52px;
  width: 4px;
  height: 4px;
}

.sub li > a.checked {
  font-weight: 500;
}

.sub li > a.checked:before {
  background: var(--color_main);
  box-shadow: 0 0 0 2px var(--color_main-op3);
  opacity: 1;
}

/* =========
 * CONTENTS
 * ========= */
.contents {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100% - 260px);
  transition: 0.25s;
}

.contents.wide {
  width: calc(100% - 80px);
  transition: 0.25s;
}

/* ====== TOP-bar ====== */
.top-bar {
  display: flex;
  justify-content: space-between;
  padding: 0 calc(var(--space_base) * 3) 0 calc(var(--space_base) * 4);
  height: 80px;
  background: var(--color_line);
}

.top-bar .left,
.top-bar .right {
  display: flex;
  align-items: center;
}

.top-bar h2 span:first-child {
  font-weight: 400;
  margin-right: 8px;
  opacity: 0.4;
}

.top-bar .toggle__lnd {
  position: relative;
}

.user__wrap {
  position: relative;
  margin-right: calc(var(--space_base) * 3);
  cursor: pointer;
}

.user {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color_sub);
}

.user img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user + .dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: var(--color_sub);
  border: 2px solid var(--color_line);
}

.user + .dot.on {
  background: var(--color_main);
}

/* 숫자 알림 dot 추가 =20240709= */
.user + .dot.alert {
  display: flex;
  align-items: center;
  justify-content: center;
  right: -6px;
  bottom: 100%;
  transform: translateY(50%);
  width: 16px;
  height: 16px;
  background-color: var(--color_po3);
  color: #FFF;
  font-size: 0.95rem;
}

.user__wrap .drop-box {
  padding: 16px 24px;
}

.user__wrap .drop-box .user {
  margin-right: calc(var(--space_base) * 2);
  height: 40px;
  width: 40px;
  border-radius: 20px;
}

.user__info li {
  display: flex;
  align-items: center;
}

.user__info .name {
  margin-right: var(--space_base);
  font-size: 1.8rem;
  font-weight: 700;
}

.user__info .number {
  display: flex;
  align-items: center;
  padding: 0 6px;
  height: 20px;
  border-radius: 4px;
  color: var(--color_main);
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--color_main-op);
}

.user__info .group {
  font-size: 1.2rem;
  line-height: 1.8em;
  color: var(--color_sub);
}
.user__info .skill {
  display: flex;
  align-items: center;
  position: absolute;
  top: calc(100% + 4px); right: 0;
  padding: 4px; border-radius: 6px;  
  background-color: var(--color_main-op3); 
  color: var(--color_main-deep); 
  white-space: nowrap;
  transition: transform .25s;
}
@keyframes scale {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.1);
  }

  60% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

.user__info:hover .skill {
  animation: scale 1.2s 1;
}
.user__info .skill span {
  padding: 4px 6px; 
  border-radius: 4px; 
  background-color: var(--color_bg-wrap);
}
.user__info .skill span ~ span {
  margin-left: 4px;
}

.drop__menu {
  margin-right: -16px;
  margin-left: -16px;
  border-top: 1px solid var(--color_line);
}

.user__wrap .drop__menu {
  margin-right: -24px;
  margin-left: -24px;
}

.drop__menu li {
  display: flex;
  align-items: center;
  padding: 0 calc(var(--space_base) * 2);
  height: calc(var(--space_base) * 5);
}

.user__wrap .drop__menu li {
  padding: 0 calc(var(--space_base) * 3);
}

.drop__menu li:hover {
  background: var(--color_bg-wrap-op);
  transition: 0.15s;
  cursor: pointer;
}

.drop__menu li i {
  margin-right: calc(var(--space_base) / 2 * 3);
  opacity: 0.5;
}

.drop__menu li:hover i {
  opacity: 0.8;
}

/* drop menu setup 추가 (채팅상담화면) 20240730  */
.drop__menu.setup {
  margin: -8px -16px;
  border: 0;
}
.drop__menu.setup li {
  justify-content: space-between;
}
.drop__menu.setup li:hover {
  background: unset;
  cursor: default;
}
.drop__menu.setup li ~ li {
  border-top: 1px solid var(--color_line-op);
}

/* 콜 현황(실시간) */
.call-board {
  margin-right: calc(var(--space_base) * 4);
  width: 40px;
  height: 40px;
  border-radius: var(--space_base);
  cursor: pointer;
  background: url(../images/ico_callchart-w.png) no-repeat center / 24px;
  background-color: var(--color_sub);
}

.call-board.board {
  background: url(../images/ico_board-w.png) no-repeat center / 24px;
  background-color: var(--color_sub);
}

.call-board.mail {
  background: url(../images/ico_mailbox-w.png) no-repeat center / 24px;
  background-color: var(--color_sub);
}

.call-board:hover {
  background-color: var(--color_sub-hover);
  transition: 0.25s;
}

.call-board .drop-box {
  padding: calc(var(--space_base) * 2) calc(var(--space_base) * 3);
}

.call-board h3 {
  text-align: center;
}

.call-board label,
.call-board__view label {
  padding: var(--space_base);
  margin-right: var(--space_base);
  border-radius: var(--space_base);
  font-weight: 500;
}

.call-board label ~ label,
.call-board__view label ~ label {
  margin-left: calc(var(--space_base) * 2);
}

.call-board label + span,
.call-board__view label + span {
  font-size: 3.2rem;
  font-weight: 700;
}
/* 추가 =240531= */
.call-board__view {
  display: flex;
  height: 42px;
  background-color: var(--color_bg-con);
  border-radius: 8px;
  padding: 0 16px;
  transform: translateY(-4px);
}
.call-board .call-ib,
.call-board .call-ib + span,
.call-board__view .call-ib,
.call-board__view .call-ib + span {
  color: #006ce5;
}

.call-board .call-ib,
.call-board__view .call-ib {
  background: rgb(0 108 229 / 10%);
}

.call-board .call-ob,
.call-board .call-ob + span,
.call-board__view .call-ob,
.call-board__view .call-ob + span {
  color: #e6465a;
}

.call-board .call-ob,
.call-board__view .call-ob {
  background: rgb(230 70 90 / 10%);
}

.call-board .call-end,
.call-board .call-end + span,
.call-board__view .call-end,
.call-board__view .call-end + span {
  color: var(--color_main);
}

.call-board .call-end,
.call-board__view .call-end {
  background: var(--color_main-op);
}

.call-board .call-wait,
.call-board .call-wait + span,
.call-board__view .call-wait,
.call-board__view .call-wait + span {
  color: #ee9500;
}

.call-board .call-wait,
.call-board__view .call-wait {
  background: rgb(238 149 0 / 10%);
}
.call-board .call-reserv,
.call-board .call-reserv + span,
.call-board__view .call-reserv,
.call-board__view .call-reserv + span {
    color: #00b022;
}

.call-board .call-reserv,
.call-board__view .call-reserv {
    background: rgba(0, 176, 34, 0.1);
}

.call-board .call-callback,
.call-board__view .call-callback {
    background: rgba(70, 80, 95, 0.1);
}

/* 현재상태 체크 */
.user-state {
  margin-right: calc(var(--space_base) * 4);
  padding: 3px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  background-color: var(--color_sub);
}

.user-state label ~ label {
  margin-left: 3px;
}

.user-state label input + span {
  display: flex;
  align-items: center;
  /* justify-content 추가 =20231115= */
  justify-content: center;
  padding: 0 16px;
  height: 34px;
  border-radius: 17px;
  color: var(--color_bg-con);
  cursor: pointer;
}

.user-state label input + span .fa {
  visibility: hidden;
  font-size: 0;
}

.user-state label input:checked + span .fa {
  visibility: visible;
  margin-right: 6px;
  font-size: inherit;
}

.user-state label input + span:hover {
  background: var(--color_txt-body-op);
  transition: 0.25s;
}

.user-state label input:checked + span {
  background: var(--color_bg-con);
  color: inherit;
  transition: 0.25s;
  font-weight: 700;
  opacity: 1;
}
/* 현재상태 체크 - selectbox 드랍다운 =231012= */
.user-state label {
  position: relative;
}
.user-state label .select {
  z-index: 1;
  /* transition을 위해 삭제 display: none; =20231117= */
  visibility: hidden;
  position: absolute;
  left: 0;
  top: calc(100% + 3px);
  width: 100%;
  max-height: 34px;
  overflow: hidden;
  border-radius: 17px;
  text-align: center;
  font-weight: 700;
  background-color: var(--color_bg-con);
  opacity: 0;
  /* 추가 transition =20231117= */
  transition: .25s;
}
.user-state label .select.unfold {
  opacity: 1;
  visibility: visible;
  /* 수정 max-height: none -> 1000px =20231117= */
  max-height: 1000px;
  /* 추가 box-shadow =20231116= */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 99;
}
.user-state label .select li {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 34px;
  cursor: pointer;
  transition: .2s;
}
/* hover design 추가 =20231115= */
.user-state label .select li:hover {
  background-color: var(--color_bg-wrap-op);
}
.user-state label .select li .fa {
  margin-right: 6px;
}
/* ib/ob icon 추가 =20240124= */
/* ib/ob icon li 안으로 속하도록 수정 =20240807= */
.user-state .ib::before,.user-time .ib::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  margin-right: 6px;
  background: url(../images/ico_ib.png) no-repeat center / 100%;
  transition: .25s;
}
.user-state .ob::before,.user-time .ob::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  margin-right: 6px;
  background: url(../images/ico_ob.png) no-repeat center / 100%;
  transition: .25s;
}
html[data-theme="dark"] .user-state .ib::before,html[data-theme="dark"] .user-time .ib::before {
  background: url(../images/ico_ib-w.png) no-repeat center / 100%;
}
html[data-theme="dark"] .user-state .ob::before,html[data-theme="dark"] .user-time .ob::before {
  background: url(../images/ico_ob-w.png) no-repeat center / 100%;
}
/* consult icon 추가 =20241031= */
.user-time .consult::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  margin-right: 6px;
  background: url(../images/ico_consult.png) no-repeat center / 100%;
  transition: .25s;
}
html[data-theme="dark"] .user-time .consult::before {
  background: url(../images/ico_consult-w.png) no-repeat center / 100%;
}
/* 채널별 활성화,비활성화 design 추가 =20231115= */
.user_ch-ck input + span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background-color: transparent;
  font-size: 1.2em;
  cursor: pointer;
  transition: .2s;
}
.user_ch-ck input + span:hover {
  background-color: var(--color_bg-sub);
}
.user_ch-ck input:checked + span {
  background-color: var(--color_main);
  box-shadow: 0 0 0 2.5px var(--color_main-op3);
}
.user_ch-ck input + span i {
  opacity: .4;
  transition: opacity .2s;
}
.user_ch-ck input:checked + span i {
  opacity: 1;
  color: #FFF;
}
/* 채널 활성화 icon - img 삽입시 design 추가 =231208= */
.user_ch-ck input:checked + span img {
  -webkit-filter: brightness(0) invert(1); 
  filter: brightness(0) invert(1);
}
.user-state.channel label ~ label {
  margin-left: 2px;
}
.user-state.channel label input + span {
  height: 22px;
  padding: 0 10px;
}

/* 현재상태 - 경과시간 */
.user-time {
  display: flex;
  align-items: center;
  padding: 0 8px;
  height: 40px;
  border-radius: var(--space_base);
  background-color: var(--color_sub);
  color: var(--color_bg-con);
  font-weight: 700;
}

.top-bar .user-time {
  margin-right: 8px;
  padding: 0 16px;
  border-radius: 20px;
}
/* 추가 =20241230= */
.top-bar .user-time.w-btn {
  padding: 4px;
  padding-left: 16px;
  background-color: var(--color_bg-con); 
  color: var(--color_main); 
  box-shadow: none;
}
.top-bar .user-time.w-btn button {
  padding: 0 10px;
  height: 100%;
  border-radius: 18px;
}

/* 콜상담 동작메뉴 */
.action__crm {
  display: flex;
  margin-right: calc(var(--space_base) * 4);
}

.action__crm button {
  padding: 0 calc(var(--space_base) * 2);
  height: calc(var(--space_base) * 5);
  border-radius: calc(var(--space_base) / 2 * 5);
  background: var(--color_bg-con);
}

.action__crm button ~ button {
  margin-left: var(--space_base);
}

.action__crm button:hover {
  background: var(--color_sub);
  color: var(--color_bg-con);
  transition: 0.2s;
}

.action__crm button:active {
  background-color: var(--color_sub-hover);
}

/* ========= 
 *  CON-BOX
 * ========= */
.con__wrap {
  position: relative;
  padding: calc(var(--space_base) * 3);
  width: 100%;
  height: calc(100vh - 80px);
  overflow-y: auto;
  overflow-x: hidden;
}

.con-box__area {
  display: flex;
  position: relative;
  margin: 0 -8px;
}

.con-box__area ~ .con-box__area {
  padding-top: calc(var(--space_base) * 2);
}

.pop-up .con-box__area {
  display: block;
}

.con-box__wrap {
  display: flex;
  flex-direction: column;
  padding: 0 8px;
}

.con-box {
  position: relative;
}

.con-box__wrap .con-box ~ .con-box {
  /* 수정 =231106= padding-top: calc(var(--space_base) * 2); */
  padding-top: calc(var(--space_base)/2 * 3);
}

.con-box [class*="detail__"].show {
  margin-top: calc(var(--space_base) * 2);
}

.con-box__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  /* 수정 =231106= height: 56px; */
  height: 48px;
  background: var(--color_bg-con);
  border-radius: 12px 12px 0 0;
}

.con-box__top.only {
  border-radius: 12px;
}

.pop-up .con-box__top {
  border-radius: 0;
}

.con-box__top + .con-box__con {
  /* 수정 =231106= max-height: calc(100% - 56px); */
  max-height: calc(100% - 48px);
}

.con-box__top h3 {
  display: flex;
  align-items: center;
}

.con-box__top h3 i {
  margin: 0 6px 0 -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 14px;
  box-shadow: 0 0 0 2.5px var(--color_sub-op);
  box-sizing: border-box;
  background: var(--color_sub);
  color: var(--color_bg-con);
  font-size: 1.3rem;
}

html[data-theme="dark"] .con-box__top h3 i {
  color: var(--color_txt-body);
}

.con-box__con {
  /* 수정 =231106= padding: 0 24px 16px; */
  padding: 0 24px 12px;
  background: var(--color_bg-con);
  border-radius: 0 0 12px 12px;
  overflow-y: auto;
  box-shadow: 0 3px 2px rgb(0 0 0 / 5%);
}

.pop-up .con-box__con {
  border-radius: 0;
  box-shadow: none;
}

.con-box__con.full {
  /* 수정 =231208= height: calc(100% - 56px); */
  height: calc(100% - 48px);
}

.con-box__con.full-s {
  /* 수정 =2023-11= height: calc(100vh - 56px); */
  height: calc(100vh - 48px);
}

.con-box__con.only {
  padding: 16px 24px;
  border-radius: 12px;
}

.con-box__con h4,
[class*="modal__"] h4 {
  display: flex;
  align-items: center;
  font-weight: 600;
}

.con-box__con h4 i,
[class*="modal__"] h4 i {
  margin-right: 6px;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: var(--color_line);
  font-size: 0.85em;
  opacity: 0.5;
}

.con-box[class*="detail__"] h4 i {
  background: var(--color_bg-wrap);
}

.con-box__con h4 i::before,
[class*="modal__"] h4 i::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.con-box__top h4 i {
  margin: 0 6px 0 -8px;
}

.con-box__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 수정 =231106= padding-top: calc(var(--space_base) * 2); */
  padding-top: calc(var(--space_base)/2*3);
}

/* ====== Tab menu(CON-BOX) ====== */
.tab__wrap > .con-box__top {
  padding: 0;
  background: transparent;
}

.tab__wrap > .con-box__con {
  padding-top: 16px;
  border-top-right-radius: 12px;
}

.tab__wrap .con-box__top .btn-tab__wrap {
  /* 수정 =231106= height: 52px; */
  height: 44px;
  margin-top: auto;
  background: var(--color_line);
  border-radius: 12px 12px 0 0;
}

.btn-tab__wrap {
  display: flex;
}

.btn-tab__wrap.in {
  margin: -4px -24px 0;
  border-bottom: 1px solid var(--color_bg-sub);
}

.btn-tab__wrap.filter {
  align-items: center;
  height: 48px;
  padding: calc(var(--space_base) / 2);
  background: var(--color_line);
  border-radius: var(--space_base);
}

.btn-tab {
  cursor: pointer;
}

.tab__wrap .con-box__top .btn-tab {
  padding: 0 16px;
  display: flex;
  border-left: 1px solid var(--color_bg-wrap);
  box-shadow: 0 -3px 3px inset rgb(0 0 0 / 4%);
}

.btn-tab__wrap.in .btn-tab {
  padding: 0 calc(var(--space_base) / 2 * 3);
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  font-size: 1.8rem;
  font-weight: 600;
}

.btn-tab__wrap.in .btn-tab i {
  opacity: 0.5;
  margin-right: 4px;
  font-size: 0.85em;
}

.btn-tab__wrap.in .btn-tab::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 10px;
  width: calc(100% - 20px);
  height: 3px;
  border-radius: 1.5px;
  background: var(--color_txt-body-op);
  opacity: 0;
}

.btn-tab__wrap.in .btn-tab:hover i {
  opacity: 0.8;
  transition: 0.2s;
}

.btn-tab__wrap.in .btn-tab:hover::after {
  opacity: 0.3;
  transition: 0.25s;
}

.btn-tab__wrap.in .btn-tab.on i {
  opacity: 0.9;
  color: var(--color_main);
}

.btn-tab__wrap.in .btn-tab.on::after {
  background: var(--color_main);
  opacity: 1;
  transition: 0.25s;
}

.btn-tab__wrap.filter .btn-tab {
  flex-grow: 1;
  align-items: center;
  border-radius: 6px;
}

.btn-tab__wrap.filter .btn-tab h4 {
  display: flex;
  justify-content: center;
  height: 100%;
  font-weight: 400;
}

.btn-tab__wrap.filter .btn-tab .number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  margin-left: calc(var(--space_base) / 2);
  background: var(--color_sub);
  color: var(--color_bg-con);
  font-size: 1.3rem;
}

.btn-tab__wrap.filter .btn-tab:hover .number {
  background: var(--color_sub-hover);
  transition: 0.15s;
}

.btn-tab__wrap.filter .btn-tab.on {
  flex-grow: 1.3;
  background: var(--color_main);
  color: var(--color_bg-con);
  transition: background 0.25s, color 0.25s;
}

.btn-tab__wrap.filter .btn-tab.on .number {
  background: var(--color_bg-con);
  color: var(--color_main);
  transition: 0.25s;
}

.tab__wrap .con-box__top .btn-tab:first-child {
  padding-left: 24px;
  border: 0;
}

.btn-tab__wrap.in .btn-tab:first-child {
  margin-left: calc(var(--space_base) / 2 * 3);
}

.tab__wrap .con-box__top .btn-tab.on {
  /* 수정 =231106= height: 56px; */
  height: 48px;
  transform: translateY(-4px);
  padding: 0 24px;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: var(--color_bg-con);
  box-shadow: none;
  transition: background 0.25s;
}

.tab__wrap .con-box__top .btn-tab.on + .btn-tab {
  border: 0;
}

.tab__wrap .con-box__top .btn-tab h3 {
  font-size: 1.6rem;
  font-weight: 400;
}

.tab__wrap .con-box__top .btn-tab h3 i {
  display: none;
}

.tab__wrap .con-box__top .btn-tab.on h3 {
  font-size: 2rem;
  font-weight: 700;
}

.tab__wrap .con-box__top .btn-tab.on h3 i {
  display: flex;
}

.btn-tab__wrap.in + .tab-con__wrap {
  padding-top: calc(var(--space_base) * 2);
}

.tab__con {
  display: none;
}

.tab__con.on {
  display: block;
}

/* Toggle Select - Chat */
.toggle__chat {
  display: flex;
  background: var(--color_line);
  height: 38px;
  border-radius: 19px;
  padding: 3px;
}

.toggle__chat label span {
  display: flex;
  align-items: center;
  position: relative;
  height: 32px;
  border-radius: 16px;
  padding: 0 calc(var(--space_base) / 2 * 3);
  font-size: 1.4rem;
  cursor: pointer;
  transition: 0.25s;
}

.toggle__chat label input:checked + span {
  background: var(--color_bg-con);
  font-weight: 600;
  transition: 0.25s;
}

.toggle__chat label span .fa {
  opacity: 0.5;
}

.toggle__chat label span .dot {
  position: absolute;
  top: -7px;
  right: 4px;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: transparent;
  border: 2px solid var(--color_bg-wrap);
  opacity: 0;
}

.toggle__chat label span .dot.on {
  background: var(--color_main);
  opacity: 1;
}

/* ====================== 
 *  CON-BOX + Detailview
 * ====================== */
.con-box[class*="detail__"] .con-box__top,
.con-box[class*="detail__"] .con-box__con {
  background: var(--color_line);
  box-shadow: none;
}

.con-box .con-box[class*="detail__"] .con-box__top,
.con-box .con-box[class*="detail__"] .con-box__con {
  background: transparent;
}

.con-box[class*="detail__"] {
  padding-top: 0 !important;
}

.con-box[class*="detail__"].show {
  /* 수정 =231106= padding-top: calc(var(--space_base) * 2) !important; */
  padding-top: calc(var(--space_base)/2*3) !important;
}

*[class*="detail__"] {
  position: relative;
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.15s;
}

*[class*="detail__"].show {
  visibility: visible;
  opacity: 1;
  max-height: 100%;
  overflow: visible;
  transition: opacity 0.45s;
}

/* ==================== 
 *  DASHBOARD | 대시보드
 * ==================== */
/* ====== Notice - calendar(근태) ====== */
.move__month {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}
.move__month.left {
  position: relative;
  transform: none;
  left: 0;
}

.move__month h3 {
  margin: 0 12px;
}

.move__month button {
  position: relative;
  width: 24px;
  height: 24px;
  background: transparent;
  font-size: 1.2em;
  opacity: 0.5;
}

.move__month button * {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.move__month button:hover {
  background: var(--color_bg-wrap);
  transition: 0.25s;
  opacity: 0.9;
}
.radio__line-fill {
  display: flex;
  align-items: center;
}
.radio__line label {
  font-size: 1.4rem;
}
.radio__line-fill label ~ label {
  margin-left: 6px;
}
.radio__line-fill label input + span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  border: 1px solid var(--color_line-op);
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color .2s;
}
.radio__line-fill label input + span:hover {
  background-color: var(--color_bg-wrap);
}
.radio__line-fill.month label input:checked + span {
  height: 36px;
  padding: 0 10px;
  font-size: 2rem;
  font-weight: 600;
  background-color: var(--color_main);
  border: 1px solid var(--color_main);
  border-radius: 10px;
  color: var(--color_bg-con);
}
.radio__line-fill.month label input + span > span {
  display: none;
  font-size: 1.2rem;
  font-weight: normal;
}
.radio__line-fill.month label input:checked + span > span {
  display: block;
}


/* Table - Calendar(Month) */
.tbl__month {
  text-align: left;
  table-layout: fixed;
}

.tbl__month .week {
  text-align: center;
}

.tbl__month th[class*="day"] {
  padding: calc(var(--space_base) / 4 * 3) calc(var(--space_base) * 2) !important;
  height: calc(var(--space_base) * 4);
}

.tbl__month .day__before,
.tbl__month .day__after {
  opacity: 0.5;
}

.tbl__month th,
.tbl__month td {
  padding: calc(var(--space_base) / 4 * 5) calc(var(--space_base) * 2) !important;
  border-right: 1px solid var(--color_line-op);
}

.tbl__month tr *:last-child {
  border-right: 0;
}

.tbl__month tr ~ tr th,
.tbl__month tr ~ tr td {
  border-top: 1px solid var(--color_line);
}

.tbl__month th:hover,
.tbl__month td:hover {
  background: var(--color_bg-wrap-op);
  transition: 0.15s;
}

.tbl__month th {
  font-weight: 500;
  background: transparent !important;
}

.tbl__month p {
  line-height: 1.3em;
}

.tbl__month p.sum {
  line-height: 1.6em;
  color: var(--color_main);
}

.tbl__month .time {
  margin-left: 3px;
  font-weight: 700;
}

/* Table - Calendar(Week) */

/* Table - Schedule(Month) -- 20230914 추가 __ CNAI HRMS */
.tbl__sch {
  text-align: left;
  table-layout: fixed;
  min-height: 100%;
}
.tbl__sch thead tr {
  height: 32px;
}
.tbl__sch thead tr th {
  position: sticky;
  top: 0;
  text-align: center;
  border-bottom: 1px solid var(--color_line);
  font-size: 1.3rem;
  font-weight: normal;
  background-color: var(--color_bg-con);
}
.tbl__sch thead tr th ~ th {
  border-left: 1px solid var(--color_line-op);
}

.tbl__sch tbody tr {
  height: 120px;
}
.tbl__sch tbody tr ~ tr {
  border-top: 1px solid var(--color_line);
}
.tbl__sch tbody tr td {
  vertical-align: top;
  padding: 4px;
}
.tbl__sch tbody tr td ~ td {
  border-left: 1px solid var(--color_line-op);
}
.tbl__sch tbody tr td:first-of-type {
  padding-left: 16px;
}
.tbl__sch tbody tr td:last-of-type {
  padding-right: 24px;
}
.tbl__sch tbody tr td p:first-of-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 6px;
  height: 30px;
}
.tbl__sch tbody tr td p {
  margin-bottom: 4px;
}
.tbl__sch tbody tr td p:last-of-type {
  margin-bottom: 0;
}

.tbl__sch .day__sun p:first-of-type,
.tbl__sch .day__holi p:first-of-type {
  color: var(--color_warn);
}
.tbl__sch .day__sat p:first-of-type {
  color: var(--color_po1);
}
.tbl__sch .date {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  font-size: 1.5rem;
  font-weight: bold;
}
.tbl__sch .date.today {
  background-color: var(--color_main);
  color: var(--color_bg-con);
}

.tbl__sch p[class*="-off"] {
  display: flex;
  align-items: center;
  height: 20px;
  border-radius: 10px;
  font-size: 1.25rem;
}
.tbl__sch p[class*="-off"].start {
  margin-right: -4px;
  border-radius: 12px 0 0 12px;
}
.tbl__sch p[class*="-off"].mid {
  margin-left: -4px;
  margin-right: -4px;
  border-radius: 0;
}
.tbl__sch p[class*="-off"].end {
  margin-left: -4px;
  border-radius: 0 12px 12px 0;
}
.tbl__sch p[class*="-off"] .off__type + span {
  width: calc(100% - 60px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbl__sch p[class*="-off"].start .off__type + span {
  overflow: visible;
}
.tbl__sch .day-off {
  background-color: var(--color_po1-op);
  color: var(--color_po1);
}
.tbl__sch .half-off {
  background-color: var(--color_po2-op);
  color: var(--color_po2);
}

.tbl__sch p[class*="-off"] .off__type {
  display: flex;
  align-items: center;
  height: 20px;
  margin-right: 6px;
  padding: 0 4px;
  border-radius: 11px;
  font-size: 1.1rem;
}
.tbl__sch .day-off .off__type {
  color: #FFF;
  background-color: var(--color_po1);
}
.tbl__sch .half-off .off__type {
  color: #FFF;
  background-color: var(--color_po2);
}

/* ========== 
 *  Chatting
 * ========== */
.float__chat_wrap {
  z-index: 8;
  position: absolute;
  overflow: hidden;
  border-radius: calc(var(--space_base) / 2 * 3);
  background: var(--color_bg-con);
  box-shadow: 0px 0px 50px 0px rgb(0 0 0 / 30%);
  visibility: hidden;
  opacity: 0.5;
  transition: 0.15s;
}

.float__chat_wrap.in {
  top: 56px;
  right: -474px;
  width: 400px;
  height: 640px;
}

.float__chat_wrap.show {
  visibility: visible;
  opacity: 1;
}

.float__chat_wrap.in.show {
  right: 8px;
  transition: right 0.15s;
}

/* 내부채팅 */
.float__chat_wrap.in .chat__top {
  padding: calc(var(--space_base) * 2) calc(var(--space_base) * 3);
  background: var(--color_txt-body);
  color: var(--color_bg-con);
}

.float__chat_wrap.in .chat__top .chat__state {
  display: flex;
  align-items: center;
  margin-right: 40px;
}

.float__chat_wrap.in .chat__top .chat__state .name,
.float__chat_wrap.in .chat__top .search__wrap .name__w-x {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--color_bg-con);
  border-radius: 12px;
  box-sizing: border-box;
}

.float__chat_wrap.in .chat__top button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: transparent;
  opacity: 0.7;
}

.float__chat_wrap.in .chat__top button:hover {
  opacity: 1;
  transition: 0.2s;
}

.float__chat_wrap.in .chat__top .search__wrap {
  position: relative;
}

.float__chat_wrap.in .chat__top .search__wrap input {
  width: 100%;
  padding: 0 calc(var(--space_base) * 10) 0 calc(var(--space_base) * 5);
  background: url(../images/ico_search-w.png) no-repeat left 16px center / 16px;
  background-color: var(--color_bg-con-op);
}

.float__chat_wrap.in .chat__top .search__wrap input:hover {
  border: 1px solid var(--color_bg-con) !important;
}

.float__chat_wrap.in .chat__top .search__wrap input:focus {
  border: 1px solid var(--color_bg-con) !important;
  caret-color: var(--color_bg-con);
  box-shadow: none;
}

.float__chat_wrap.in .chat__top .search__wrap .result {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
}

.float__chat_wrap.in .chat__top .search__wrap .result .name__w-x ~ .name__w-x {
  margin: 0 0 0 4px;
}

.float__chat_wrap.in .chat__top .search__wrap .name__w-x i {
  padding: calc(var(--space_base) / 2) 0 calc(var(--space_base) / 2) calc(var(--space_base) / 2);
  font-size: 1.2rem;
  opacity: 0.5;
}

.float__chat_wrap.in .chat__top .search__wrap .name__w-x i:hover {
  opacity: 1;
  transition: 0.2s;
}

/* Chat__area 채팅 영역 design */
.con-box .chat__state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  border-radius: 12px;
  padding: 0 8px;
}

.con-box__top .chat__num {
  display: flex;
  align-items: center;
  height: 32px;
  border-radius: 16px;
  margin-right: 8px;
  padding: 0 16px;
  background: var(--color_main-op);
  color: var(--color_main);
  font-size: 0.9em;
  font-weight: 600;
}

.con-box__top .chat__state {
  height: 32px;
  border-radius: 16px;
  padding: 0 12px;
}

.con-box .chat__state.ing {
  background: var(--color_main);
  color: var(--color_bg-con);
}

.con-box .chat__state.end {
  background: var(--color_sub);
  color: var(--color_bg-con);
}
/* 채팅상담 상태별 icon COLOR 추가 =20240716= */
.con-box .chat__state.wait,
.con-box .chat__state.consulting,
.con-box .chat__state.after,
.con-box .chat__state.close {
  font-weight: 600;
}
/* 대기중 */
.con-box .chat__state.wait {
  background-color: rgba(var(--color_blue-rgb),.15);
  color: rgba(var(--color_blue-rgb),1);
}
/* 진행중 */
.con-box .chat__state.consulting {
  background-color: rgba(var(--color_green-rgb),.15);
  color: rgba(var(--color_green-rgb),1);
}
/* 후처리 */
.con-box .chat__state.after{
  background-color: rgba(var(--color_purple-rgb),.15);
  color: rgba(var(--color_purple-rgb),1);
}
/* 완료 */
.con-box .chat__state.close{
  background-color: var(--color_bg-wrap);
  color: var(--color_txt-body);
}

.chat__area {
  position: relative;
}

.float__chat_wrap.in .chat__area {
  height: calc(100% - 108px);
}

.con-box__con .chat__area {
  height: calc(100% - 52px);
}

.view__chat {
  position: relative;
  overflow-y: auto;
}

.con-box__con .view__chat {
  margin: 0 -24px;
  padding: 16px 24px;
}

.view__chat.stt {
  padding: 0 24px 16px;
}

.con-box__con .view__chat {
  height: calc(100% - 148px);
  background: var(--color_line);
}

.input__chat {
  position: relative;
}

.float__chat_wrap.in .view__chat {
  height: calc(100% - 64px);
  padding: calc(var(--space_base) * 2) calc(var(--space_base) * 3);
}

.float__chat_wrap.in .input__chat {
  padding: 0 calc(var(--space_base) * 3) calc(var(--space_base) * 3);
}

.msg-alert {
  display: flex;
  flex-direction: column;
  margin: calc(var(--space_base) * 2) 0;
}

.msg-alert + .msg-alert {
  padding-top: var(--space_base);
}

.msg-alert .msg__box {
  margin: 0 -8px;
  padding: 6px 16px;
  background: var(--color_bg-wrap);
  text-align: center;
  font-size: 1.3rem;
}

.msg-alert .msg__box span {
  margin-left: auto;
}

.msg-alert .time {
  margin: 0 auto;
}

.con-box__con .msg-alert .msg__box {
  background: var(--color_bg-sub);
}

.view__chat .msg-l,
.view__chat .msg-r {
  position: relative;
  padding-top: var(--space_base);
  display: flex;
  flex-direction: column;
}

.view__chat.stt .msg-l {
  flex-direction: row;
  padding-top: calc(var(--space_base) * 2);
}

.view__chat .msg-l {
  padding-left: 38px;
}

.msg-l * {
  margin-right: auto;
}

.view__chat.stt * {
  margin: 0;
}

.view__chat.stt .msg-l .time {
  margin-top: auto;
}

.msg-r * {
  margin-left: auto;
}

.msg__box {
  position: relative;
  padding: calc(var(--space_base) / 4 * 5) calc(var(--space_base) * 2);
  border-radius: calc(var(--space_base) * 3);
  line-height: 1.4em;
}

.msg__box.in-img {
  padding: 0;
  max-width: 320px !important;
  overflow: hidden;
}

.msg__box.in-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msg-l .msg__box {
  max-width: calc(100% - 56px);
}

.float__chat_wrap.in .msg-l .msg__box {
  background: var(--color_line);
}

.msg-r .msg__box {
  max-width: calc(100% - 72px);
  background: var(--color_main);
  color: #fff;
}

.from-me .msg__box {
  background: var(--color_main) !important;
  color: #fff;
}

.con-box__con .msg-l .msg__box {
  background: var(--color_bg-wrap);
}

/* 20240730 내부대화 in-chat 디자인 수정 */
[class*="msg-"].in-chat {
  background-color: var(--color_bg-con);
  padding-right: 12px;
  margin-right: -12px; 
}
[class*="msg-"].in-chat::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 0;
  display: block;
  width: 12px;
  height: 100%;
  background-color: var(--color_bg-con);
  box-sizing: border-box;
  border-left: 4px solid var(--color_main);
}

.msg-l.in-chat .msg__box {
  background: var(--color_txt-body);
  color: var(--color_bg-con);
}

.msg-l.in-chat .msg__box::before,
.msg-r.in-chat .msg__box::before {
  content: "내부대화";
  display: flex;
  align-items: center;
  position: absolute;
  top: 3px;
  width: auto;
  height: 13px;
  padding: 1px 0 0 12px;
  background: url(../images/ico_lock.png) no-repeat left center / 12px;
  color: var(--color_txt-body);
  opacity: 0.6;
  font-size: 1.2rem;
  white-space: nowrap;
  background-color: transparent;
}

html[data-theme="dark"] .msg-l.in-chat .msg__box::before,
html[data-theme="dark"] .msg-r.in-chat .msg__box::before {
  background: url(../images/ico_lock-w.png) no-repeat left center / 12px;
}

.msg-l.in-chat .msg__box::before {
  left: calc(100% + 2px);
}

.msg-r.in-chat .msg__box::before {
  right: calc(100% + 2px);
}

.msg-r.bot {
  padding-right: 38px;
}

.bot::before {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: url(../images/chatbot_bg.png) no-repeat center / 100%;
  background-color: transparent;
}

.msg-r.bot::before {
  right: -8px;
}

.msg-l.bot::before {
  left: -8px;
}

.bot .msg__box {
  max-width: calc(100% - 72px);
  padding: 14px 16px;
  background: var(--color_bg-con);
  color: inherit;
}

.bot p {
  padding-bottom: 3px;
  font-weight: 700;
}

.bot .btn__wrap {
  margin-top: 8px;
}

.bot .btn__wrap li ~ li {
  padding-top: 4px;
}

.bot .btn__wrap button {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--color_line);
  text-align: left;
}

.bot .btn__wrap button:hover {
  border: 1px solid var(--color_main);
  background: var(--color_main-op);
  color: var(--color_main);
  transition: 0.2s;
}
/* fontawesome new ver. 적용 */
.bot .btn__wrap button {display: flex; align-items: center;}
.bot .btn__wrap button i {visibility: hidden; margin: 0 0 0 auto;}
.bot .btn__wrap button:hover i {visibility: visible;}
.bot .btn__wrap button i::before {
  margin-left: 8px;
}

.bot .btn__wrap button:active {
  background: var(--color_main);
  color: var(--color_bg-con);
}

.msg__box + .msg__box,
.time + .msg__box {
  margin-top: var(--space_base);
}

.view__chat .time {
  padding-top: 3px;
  font-size: 1rem;
  color: var(--color_sub);
}

.msg-l .time {
  padding-left: calc(var(--space_base) / 2);
}

.msg-r .time {
  padding-right: calc(var(--space_base) / 2);
}

.from-img {
  position: absolute;
  left: 0;
  top: 14px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
  background-color: var(--color_sub);
}

.view__chat.stt .from-img {
  top: 22px;
}

.from-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.txt__key {
  padding: 0 2px;
  background: var(--color_txt-body);
  color: var(--color_bg-con);
  font-weight: 500;
}
/* button(chat-bookmark) 추가 =20240801= */
.chat-tip,
.chat-bookmark {
  position: absolute;
  width: 32px;
  height: 32px !important;
  border-radius: 16px;
  padding: 0 !important;
  background: var(--color_bg-con-op);
  color: var(--color_main);
  font-size: 1.35em;
}

.con-box .chat-tip {
  right: -8px;
  bottom: 160px;
}
.con-box .chat-bookmark {
  right: 32px;
  bottom: 160px;
}

button.chat-tip i,
button.chat-bookmark i {
  opacity: 0.7;
}

.chat-tip:hover,
.chat-bookmark:hover {
  background: var(--color_bg-con);
  transition: background 0.25s;
}

.chat-tip .chat-tip__con,
.chat-bookmark .chat-bookmark__con {
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  border-radius: calc(var(--space_base) / 2 * 3);
  padding: calc(var(--space_base) / 2 * 3) calc(var(--space_base) * 2) calc(var(--space_base) * 2);
  background: var(--color_bg-con);
  color: var(--color_txt-body);
  box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 30%);
  white-space: nowrap;
  height: 0;
  visibility: hidden;
  opacity: 0.5;
}
.chat-bookmark .chat-bookmark__con {
  max-width: 320px;
}
.chat-bookmark .chat-bookmark__con h4 .num {
  margin-left: 4px;
  opacity: .5;
}
.chat-bookmark .chat-bookmark__con h4 span:last-child {
  display: inline-flex;
  margin-left: auto;
  font-weight: normal;
  font-size: 1.2rem;
}
.chat-tip .chat-tip__con ul,
.chat-bookmark .chat-bookmark__con ul {
  margin-top: 8px;
  font-size: 1.4rem;
  font-weight: normal;
  text-align: left;
  line-height: 1.5em;
}
.chat-bookmark .chat-bookmark__con ul li {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
  border-radius: 16px;
  width: 100%;
  padding: 0 12px;
  transition: background-color .25s;
}
.chat-bookmark .chat-bookmark__con ul li:hover {
  background-color: var(--color_line-op);
}
.chat-bookmark .chat-bookmark__con ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color_txt-body-op);
}
.chat-bookmark .chat-bookmark__con ul li:hover::before {
  display: none;
}
.chat-bookmark .chat-bookmark__con ul li span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-tip .chat-tip__con ul li .fontb {
  margin-right: 6px;
}

.chat-tip:hover .chat-tip__con,
.chat-bookmark__con.show {
  bottom: calc(100% + 8px);
  height: auto;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s, bottom 0.15s;
}

.chat-tip:hover .chat-tip__con i {
  opacity: 0.5;
}

/* 채팅 입력 영역 */
.chat-tab__wrap {
  position: relative;
}

.btn__chat-tab__wrap {
  position: absolute;
  top: -44px;
  left: 0;
  display: flex;
}

.btn__chat-tab ~ .btn__chat-tab {
  margin-left: 4px;
}

.btn__chat-tab {
  height: 28px !important;
  border-radius: 12px 12px 0 0;
  background: var(--color_txt-body-op);
  color: var(--color_bg-con);
  opacity: 0.6;
  transition: 0.25s;
}

.btn__chat-tab.on {
  background: var(--color_main);
  color: #fff;
  opacity: 1;
  transition: 0.25s;
}

.chat-tab__con {
  display: none;
}

.chat-tab__con.on {
  display: block;
}

.input__chat input[type="text"],
.input__chat textarea {
  width: 100%;
  height: calc(var(--space_base) * 5);
  padding: 0 calc(var(--space_base) * 9) 0 calc(var(--space_base) * 2);
  border-radius: calc(var(--space_base) / 2 * 5);
  resize: none;
}
.input__chat textarea {
  padding-top: 9px;
  padding-bottom: 8px;
}

.con-box .input__chat textarea {
  width: 100%;
  height: 80px;
  resize: none;
  border-radius: calc(var(--space_base) / 2 * 3);
  padding: 10px 40px 10px 12px;
}

.input__chat .btn__area {
  position: absolute;
  display: flex;
  top: 0;
  right: calc(var(--space_base) * 4);
}

.con-box .input__chat textarea + .btn__area {
  padding-top: 6px;
  flex-direction: column;
}

.con-box__con .input__chat .btn__area {
  right: calc(var(--space_base) / 2 * 3);
}

.input__chat button {
  width: calc(var(--space_base) * 4);
  height: calc(var(--space_base) * 5);
  padding: 0;
  background: transparent;
}

.con-box .input__chat textarea + .btn__area button {
  height: calc(var(--space_base) * 4);
}

.con-box .input__chat textarea + .btn__area button ~ button {
  margin-top: 4px;
}

.input__chat button i {
  font-size: 1.3em;
}

.input__chat button:hover {
  color: var(--color_main);
}

/* =====================
 *  KMS-search : 지식검색
 * ===================== */
.kms-key__wrap {
  display: flex;
}

.kms-key {
  display: flex;
  align-items: center;
  height: 36px;
  border-radius: 18px;
  padding: 0 16px;
  background: var(--color_main-op);
  color: var(--color_main);
  font-weight: 600;
  cursor: pointer;
}

.kms-key ~ .kms-key {
  margin-left: 12px;
}

.kms-result__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 16px;
}

.kms-result {
  border-radius: 12px;
  border: 1px solid var(--color_line);
}

.style1 .kms-result {
  background: var(--color_bg-wrap);
  border: 1px solid var(--color_bg-wrap);
}

.kms-result:hover {
  border: 1px solid var(--color_main);
  transition: 0.2s;
}

.kms-result label input + span,
.kms-result button,
label.ck-onoff input + span {
  position: relative;
  width: 32px;
  height: 32px;
}

.kms-result i {
  font-size: 1.2em;
}

.kms-title,
.kms-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 16px;
}

.kms-title h4 {
  display: table-cell;
  font-size: 1.5rem;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 58px);
}

.kms-title div {
  display: flex;
}

.kms-title div,
.kms-bottom button {
  padding: 0;
  margin-right: -8px;
}

.kms__con {
  position: relative;
  height: 120px;
  line-height: 1.5em;
  margin: 0 12px;
  padding: 16px;
  border-radius: 6px;
  background: var(--color_bg-wrap);
  overflow: hidden;
}

.style1 .kms__con {
  background: var(--color_bg-con);
}

.pop-up .kms__con {
  margin: 0;
  height: auto;
  background: transparent;
  border: 1px solid var(--color_line);
}

.pop-up .style1 .kms__con {
  background: var(--color_bg-wrap);
  border: 1px solid var(--color_bg-wrap);
}

.pop-up .kms__con:after {
  content: none;
}

.kms__con img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.kms__con::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to top, var(--color_bg-wrap) 12px, transparent);
}

.style1 .kms__con::after {
  background: linear-gradient(to top, var(--color_bg-con) 12px, transparent);
}

.kms-tag__wrap {
  display: flex;
  color: var(--color_main);
}

.kms-tag ~ .kms-tag {
  margin-left: 6px;
}

.kms-result label,
label.ck-onoff {
  position: relative;
}

.kms-result label input + span,
label.ck-onoff input + span {
  position: relative;
  display: inline-block;
}

.kms-result label input + span i,
label.ck-onoff input + span i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}

.kms-result label:hover input + span i,
label.ck-onoff:hover input + span i {
  opacity: 1;
  cursor: pointer;
  transition: 0.25s;
}

.kms-result input:checked + span i,
label.ck-onoff input:checked + span i {
  opacity: 1;
  color: var(--color_main);
}

/* ================
 *  Mail : 메일 상담 
 * ================ */
.btn__auto-a {
  height: 24px !important;
  border-radius: 12px;
  background: var(--color_sub);
  color: var(--color_bg-con);
  font-size: 1.3rem;
  font-weight: 400;
}

.btn__auto-a:hover {
  background: var(--color_sub-hover);
  transition: 0.25s;
}

.btn__auto-a ~ .btn__auto-a {
  margin-left: 6px;
}

/* =======================
 *  record play : 녹음 청취 height: 110px 
 * ======================= */
.con-box__con .audio__play {
  /* jw 수정 =231130= margin-bottom: -16px; */
  margin-bottom: -12px;
}

.audio__play .audio-view {
  position: relative;
  margin: 0 -24px;
  padding: 0 24px;
  background: var(--color_line);
  height: 48px;
}
/* audio-view 영역 - 추가 =20231130= */
#progressBar {
  margin: auto;
  width: 90%;
  background-color: #FFFFFF;
  cursor: pointer;
  border-radius: 10px;
}
#playBar {
  width: 0%;
  height: 5px;
  background-color: #ffcc00;
  border-radius: 10px;
}

.audio-view .table_rec {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
}

.table_rec tr {
  height: 8px;
}

.table_rec .td_from-me,
.voice__who.from-me {
  background: var(--color_main);
}

.table_rec .td_from-them,
.voice__who.from-them {
  background: var(--color_bg-con);
}

.table_rec .td_overlap,
.voice__who.overlap {
  background: var(--color_txt-body-op);
}

.voice__who {
  display: block;
  width: 12px !important;
  height: 12px !important;
  opacity: 1 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.voice__who.from-them {
  border: 1px solid var(--color_line);
}

.audio__play .player,
.audio__play .player .btns__main {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
  justify-content: space-between;
}

.audio__play .player button {
  background: transparent;
  font-size: 1.8rem;
}

.audio__play .player button:hover {
  background: var(--color_bg-wrap);
  transition: 0.2s;
}

.btns__main button {
  width: 36px;
  padding: 0;
  border-radius: 18px;
}

.audio__play .player .btn__play {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: var(--color_bg-wrap);
}

.audio__play .player .time {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 60px;
  font-size: 1.4rem;
}

/* =====================
 *  Webchat : 웹챗(플로팅)
 * ===================== */
.floating__btn-wrap {
  position: fixed;
  right: 0;
  bottom: 0;
  margin-right: 32px;
  margin-bottom: 64px;
}

.btn__floating {
  z-index: 7;
  display: block;
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 24px;
  background: url(../images/chatbot_bg.png) no-repeat center / 64px;
  background-color: var(--color_main);
  cursor: pointer;
  transition: 0.25s;
}

.btn__floating:hover {
  background: url(../images/chatbot_bg-hover.png) no-repeat center / 68px;
  transform: translateY(2px);
  box-shadow: 0 24px 24px var(--color_main-op);
}

.btn__floating .new-msg,
.btn__chat-ch .new-msg {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  border-radius: 14px;
  background: #e21818;
  color: #fff;
  font-size: 1.2rem;
}

.floating__btn-wrap input:checked + .btn__floating {
  background: url(../images/ico_x-w.png) no-repeat center / 32px;
  background-color: var(--color_main);
}

.floating__btn-wrap .btns {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  height: 64px;
  transition: opacity 0.45s, bottom 0.25s;
}

.floating__btn-wrap .btns button ~ button {
  margin-top: 8px;
}

.floating__btn-wrap input:checked + .btn__floating + .btns {
  bottom: 88px;
  height: auto;
  visibility: visible;
  overflow: visible;
  opacity: 1;
}

.floating__btn-wrap input:checked + .btn__floating .new-msg {
  visibility: hidden;
  overflow: hidden;
}

.floating__btn-wrap .btns .btn__chat-ch {
  width: 48px;
  height: 48px;
  border-radius: 16px;
}

.btn__chat-ch:hover {
  box-shadow: 0 24px 24px var(--color_main-op);
  transition: 0.2s;
}

.btn__chat-ch.web {
  background: url(../images/chatbot_bg.png) center / 100%;
}

.btn__chat-ch.web:hover {
  background: url(../images/chatbot_bg-hover.png) center / 100%;
}

.btn__chat-ch.kakao {
  background: url(../images/ch_kakao.png) center / 100%;
}

.btn__chat-ch.naver {
  background: url(../images/ch_naver.png) center / 100%;
}

.btn__chat-ch .tooltip {
  left: 0;
  bottom: 50%;
  transform: translate(calc(-100% - 8px), 50%);
}

.btn__chat-ch .tooltip::after {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
  border: 4px solid transparent;
  border-left-color: rgb(0 0 0 / 70%);
}

.float__chat_wrap.out {
  right: 32px;
  bottom: 128px;
  width: 400px;
  height: 640px;
  border-radius: calc(var(--space_base) * 3);
}

.float__chat_wrap.out.show {
  bottom: 152px;
}

.float__chat_wrap.out .chat__top {
  position: relative;
  height: 56px;
  padding: 0 24px;
  background: linear-gradient(to bottom, var(--color_main), var(--color_main-hover) 50%);
  border-top-left-radius: calc(var(--space_base) * 3);
  border-top-right-radius: calc(var(--space_base) * 3);
  color: var(--color_bg-con);
}

.float__chat_wrap.out .chat__top button {
  width: 24px;
  height: 24px;
  background: transparent;
  transition: 0.2s;
}

.float__chat_wrap.out .chat__top button:hover {
  background: rgb(0 0 0 / 8%);
}

.float__chat_wrap.out .view__chat {
  height: calc(100% - 56px - 72px);
  padding: 0 16px 16px;
}

.float__chat_wrap.out .msg-alert .msg__box {
  margin-left: 0;
}

.float__chat_wrap.out .msg-l.bot .msg__box {
  background: var(--color_bg-con);
  border: 1px solid var(--color_bg-wrap);
  box-shadow: 0 3px 2px rgb(0 0 0 / 15%);
}

.float__chat_wrap.out .msg-l .msg__box {
  background: var(--color_line-op);
}

.float__chat_wrap .msg__box.in-img {
  max-width: calc(100% - 72px) !important;
}

.msg__box.in-file {
  display: flex;
  align-items: center;
}

/* 첨부한 파일(말풍선) */
.msg__box.in-file img {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}

.file_info {
  width: calc(100% - 40px);
}

.file_name {
  display: flex;
  flex-direction: row;
  font-weight: 600;
}

.file_name .name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.file_name .ext {
  flex-shrink: 0;
}

.msg__box.in-file .file_size {
  font-size: 1.3rem;
  opacity: .6;
}

.float__chat_wrap.out .input__chat {
  padding: 0 16px;
}

.powered {
  margin-top: 4px;
  text-align: center;
  font-size: 1.1rem;
  color: var(--color_sub);
}

.powered img {
  height: 18px;
  margin-left: 4px;
}

/* =============
 *  SMS(문자발송)
 * ============= */
.guide__txt p {
  padding-top: 6px;
}

.phone {
  position: relative;
  margin: 0 auto;
  padding: 40px 24px 32px;
  width: 320px;
  border-radius: 32px;
  border: 6px solid var(--color_sub);
}

.phone::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 20px;
  width: 140px;
  border-radius: 0 0 12px 12px;
  background: var(--color_sub);
}

.phone-top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 10px;
  width: 150px;
  background: var(--color_sub);
}

.phone-top span {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color_bg-con);
  font-size: 1.1rem;
  letter-spacing: 2;
  opacity: 0.7;
}

.phone-top::before,
.phone-top::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 5px;
  height: 10px;
  background: var(--color_bg-con);
}

.phone-top::before {
  left: 0;
  border-top-right-radius: 5px;
}

.phone-top::after {
  right: 0;
  border-top-left-radius: 5px;
}

.phone .ico__in-bg {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.txt-merge {
  display: flex;
  border: 1px solid var(--color_line);
  border-radius: 6px;
  overflow: hidden;
}

.txt-merge span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 32px;
  cursor: pointer;
}

.txt-merge span:hover {
  background: var(--color_bg-wrap-op);
  font-weight: 600;
}

.txt-merge span ~ span {
  border-left: 1px solid var(--color_line);
}

.input__phone-num {
  display: flex;
  align-items: center;
}

.input__phone-num input {
  width: 28% !important;
}

.input__phone-num span {
  padding: 0 4px;
}

.input__phone-num button {
  margin-left: auto;
}

.mms_file {
  padding: 8px 12px;
  background: var(--color_bg-wrap);
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--color_bg-wrap);
  cursor: pointer;
  overflow-y: auto;
}

.mms_file:hover {
  border: 1px solid var(--color_main);
  transition: 0.25s;
}

.mms_file span {
  opacity: 0.4;
  line-height: 1.35em;
}

.mms_file + textarea {
  border-top: 1px solid var(--color_line);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.mms_file img {
  max-width: 100%;
  border-radius: 6px;
}

.mms_file img ~ img {
  margin-top: 8px;
}

/* 문자메시지 전송 화면 - 도움말 */
.msg_help {
  visibility: hidden;
  opacity: 0;
  width: 260px;
  height: 0;
  position: absolute;
  right: 0;
  bottom: 100%;
  padding: 16px;
  overflow: hidden;
  background: var(--color_bg-con);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
  line-height: 1.25em;
  font-size: 1.3rem;
  font-family: 'Pretendard';
}

.msg_help table th,
.msg_help table td {
  vertical-align: middle;
}

button:hover .msg_help {
  visibility: visible;
  opacity: 1;
  height: auto;
  transform: translateY(-3px);
  transition: 0.2s;
  overflow: visible;
}

/* 시스템 설정 page design */
.tbl__set {
  text-align: left;
}

.tbl__set th {
  height: 40px;
  font-size: 1.6rem;
}

.tbl__set .txt__inform {
  padding: 4px 0 16px;
}

.tbl__set tr:last-child .txt__inform {
  padding-bottom: 8px;
}

/* ================
 *  Survey (설문지)
 * ================ */
.survey h3.btn-tab {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 4px;
  height: 100%;
  opacity: 0.5;
}

.survey h3.btn-tab ~ .btn-tab {
  margin-left: 32px;
}

.survey h3.btn-tab:hover {
  opacity: 0.8;
  transition: opacity 0.2s;
}

.survey h3.btn-tab.on {
  color: var(--color_main);
  font-weight: 700;
  opacity: 1;
  transition: opacity 0.25s;
}

.survey h3.btn-tab:after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: 0;
  display: block;
  width: calc(100% + 8px);
  height: 3px;
  background: var(--color_main);
  opacity: 0;
}

.survey h3.btn-tab.on:after {
  opacity: 1;
  transition: opacity 0.25s;
}

/* Survey 설문지 만들기 */
.survey__box {
  position: relative;
  margin: 0 auto;
  padding: 24px;
  max-width: 800px;
  background: var(--color_bg-con);
  border-radius: 12px;
  box-shadow: 0 3px 2px rgb(0 0 0 / 5%);
}

.survey__box ~ .survey__box {
  margin-top: 24px;
}

.btn__q-del,
.btn__q-add {
  position: absolute;
  right: -8px;
  width: 32px;
  height: 32px !important;
  padding: 0 !important;
  background: var(--color_main-op3);
  color: var(--color_main);
}

.btn__q-del {
  top: -8px;
}

.btn__q-add {
  bottom: -8px;
}

.btn__q-del i,
.btn__q-add i {
  opacity: 1 !important;
}

.btn__q-del:hover,
.btn__q-add:hover {
  background: var(--color_main);
  color: #fff;
  transition: background 0.2s;
}

.survey__box ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.survey__box ul li ~ li,
.survey__box.small ul .q-title + li {
  margin-top: 12px;
}
/* small ver. =20240229= */
.survey__box.small ul li ~ li {
  margin-top: 8px;
}

.survey__box ul li input {
  width: calc(100% - 40px - 80px);
}

.survey__box p {
  word-break: break-all;
  line-height: 1.3em;
}

.survey__box p ~ p {
  padding-top: 8px;
}

.survey__box input,
.survey__box input:hover,
.survey__box textarea,
.survey__box textarea:hover {
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  border: 0 !important;
  font-size: 1.6rem;
}

.survey__box input,
.survey__box input:hover,
.survey__box textarea,
.survey__box textarea:hover {
  border-bottom: 1px solid var(--color_line) !important;
}

.survey__box input:focus,
.survey__box textarea:focus {
  border: 0 !important;
  border-bottom: 2px solid var(--color_main) !important;
  box-shadow: none;
  padding-left: 6px !important;
}

.survey__box .sur-title input,
.survey__box .sur-title p {
  padding: 0 0 8px;
  width: 100%;
  height: auto !important;
  font-size: 3rem;
  font-weight: 700;
}
/* small ver. =20240229= */
.survey__box.small .sur-title input,
.survey__box.small .sur-title p {
  font-size: 2.6rem;
}

.survey__box .sur-about textarea,
.survey__box .sur-about p {
  width: 100%;
  font-size: 1.8rem;
}
/* small ver. =20240229= */
.survey__box .sur-about textarea,
.survey__box .sur-about p {
  font-size: 1.6rem;
}

.survey__box .q-title input,
.survey__box .q-title p {
  font-size: 2.2rem;
  font-weight: 600;
}
/* small ver. =20240229= */
.survey__box.small .q-title input,
.survey__box.small .q-title p {
  font-size: 1.8rem;
}

.survey__box .a-title p {
  font-size: 1.6rem;
  font-weight: 600;
}

.survey__box .a-title i {
  opacity: 0.6;
}

.tbl__list.survey {
  text-align: center;
}

.tbl__list.survey tr td:last-child {
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--color_main);
}

.tbl__list.survey .sur-sum {
  background: var(--color_main-op);
  font-weight: 600;
}

.tbl__list.survey .q-title {
  font-size: 1.8rem;
  font-weight: 600;
}

.survey__box .q-title input {
  width: calc(100% - 168px - 56px);
  height: 40px;
}

.survey__box .q-num {
  display: flex;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border-radius: 18px;
  align-items: center;
  justify-content: center;
  background: var(--color_bg-wrap);
  color: var(--color_sub);
  font-weight: 600;
}

.survey__box .q-num.etc {
  width: 42px;
}

.survey__box .q-num.etc + input {
  width: calc(100% - 54px - 80px);
}

.survey__box .a-btns {
  display: flex;
  margin-left: auto;
  width: 72px;
}

.survey__box .a-btns button {
  padding: 0;
  width: 32px;
  height: 32px;
}

.survey__box .a-btns button ~ button {
  margin-left: 8px;
}

/* 설문 응답 design */
.survey__box .q-sub {
  margin-left: auto;
  color: var(--color_main);
}

.sur-txt-ck {
  width: 100%;
}

.sur-txt-ck .sur-q,
.sur-txt-ck .sur-a {
  font-size: 1.6rem;
}

.sur-txt-ck:hover input + div {
  background: var(--color_bg-wrap-op);
  border: 1px solid var(--color_sub);
  cursor: pointer;
  transition: 0.1s;
}

.sur-txt-ck input:checked + div {
  background: var(--color_main-op);
  border: 1px solid var(--color_main);
  cursor: pointer;
  transition: 0.2s;
}

.sur-txt-ck input + div {
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px;
  width: 100%;
  border: 1px solid var(--color_line);
  border-radius: 4px;
}
/* small ver. =20240229= */
.survey__box.small .sur-txt-ck input + div {
  padding: 6px 8px;
}

.sur-txt-ck:hover .q-num {
  background: var(--color_sub);
  color: var(--color_bg-con);
}

.sur-txt-ck input:checked + div .q-num {
  background: var(--color_main);
  color: #fff;
}

.sur-txt-ck input + div::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border: 20px solid transparent;
  border-top: 20px solid var(--color_main);
  border-right: 20px solid var(--color_main);
  border-top-right-radius: 2px;
  opacity: 0;
}

.sur-txt-ck input:checked + div::before {
  opacity: 1;
  transition: 0.3s;
}

.sur-txt-ck input:checked + div::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  right: 0;
  background: url(../images/ico_checked-w.png) no-repeat center / 16px;
}

.sur-txt-ck .q-num.etc + input {
  width: calc(100% - 54px);
  border-bottom: 1px solid transparent !important;
}

.sur-a-tbl {
  margin: 0 auto;
  width: auto;
  table-layout: fixed;
}

.sur-a-tbl tr ~ tr td {
  padding-top: 8px;
  word-break: break-all;
}

.sur-a-tbl td {
  font-size: 1.6rem;
}

.sur-a-tbl .sur-q {
  padding-right: 8px;
  text-align: left;
}

.sur-a-tbl tr td ~ td {
  padding-left: 4px;
}

.sur-a-num input + div,
.sur-a-ck input + div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  border: 1px solid var(--color_line);
  border-radius: 4px;
  font-size: 1.6rem;
}

.sur-a-ck input + div {
  background: url(../images/ico_checked-g.png) no-repeat center / 16px;
}

.sur-a-num:hover input + div,
.sur-a-ck:hover input + div {
  background-color: var(--color_bg-wrap-op);
  border: 1px solid var(--color_sub);
  cursor: pointer;
  transition: 0.1s;
}

.sur-a-num input + div::after,
.sur-a-ck input + div::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: url(../images/ico_checked-w.png) no-repeat center / 16px;
  opacity: 0;
}

.sur-a-num input:checked + div,
.sur-a-ck input:checked + div {
  background: var(--color_main);
  border: 1px solid var(--color_main);
  color: #fff;
  transition: 0.2s;
}

.sur-a-num input:checked + div span {
  opacity: 0;
}

.sur-a-num input:checked + div::after,
.sur-a-ck input:checked + div::after {
  opacity: 1;
  transition: 0.3s;
}

.sur-a-tbl .sur-a-label__wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

button.survey {
  font-size: 16px;
  font-weight: 600;
  height: 40px;
}
/* --------------------------
 * 템플릿 관리 - 상담양식 template 
 * -------------------------- */
.temp__onoff {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  opacity: 0;
  width: 100%;
  white-space: normal;
  line-height: 1.5em;
  text-align: left;
}
.temp__onoff.show {
  visibility: visible;
  overflow: visible;
  height: auto;
  opacity: 1;
  padding: 8px;
  transition: opacity 0.2s;
}
/* 상담양식 - 코드유형 tree */
.ck-tree {
  padding: 8px;
}
.ck-tree ul ul {
  padding-left: 62px;
}
.ck-tree ul ul li.closed,
.ck-tree ul ul li.opened {
  margin-left: -32px;
}
.ck-tree li a {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
}
.ck-tree li a:hover {
  background: var(--color_bg-wrap-op);
  transition: .25s;
}
.ck-tree li.closed a::before,
.ck-tree li.opened a::before {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  width: 24px;
  height: 24px;
  font-size: 1.8rem;
  background: var(--color_main-op);
  color: var(--color_main);
  border-radius: 8px;
}
.ck-tree li.closed > a::before {
  content: "▸";
}
.ck-tree li.opened > a::before {
  content: "▾";
}
.ck-tree li.closed > ul {
  display: none;
}
.ck-tree li.opened > ul {
  display: block;
}

/* --------------------------
 * 모니터링 monitering(onState)
 * -------------------------- */
/* flex, flex-item: 균등하게 나누고 1row에 3개까지만 적용, 줄바꿈 */
.flex__divide {
  display: flex;
  margin: -16px -12px 0;
  flex-wrap: wrap;
}
.flex__divide > div {
  margin: 16px 12px 0;
  flex: 1;
  min-width: calc(33.33% - 24px);
}

.po-num {
  color: var(--color_main);
  font-weight: 700;
  font-size: 1.5em;
}

table .po-num {
  background: var(--color_main-op);
}
.career-time {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 14px;
  background: var(--color_bg-wrap);
  font-weight: 600;
}
.state-box,
.state-time {
  padding: 4px 12px;
  border-radius: 14px;
  background: var(--color_bg-wrap);
}
.state-box {
  background: var(--color_sub);
  color: #fff;
}
.state-time {
  background: var(--color_main);
  color: #FFF;
}
.state-time.long {
  background: var(--color_warn);
  font-size: 1.5rem;
  font-weight: 600;
}
.total-time {
  font-size: 1.6rem;
  font-weight: 700;
}
/* 개별상담원 - 상세 상태별 시간 */
tr.state-total__onoff {
  cursor: pointer;
}
tr.state-total__onoff + tr {
  height: 0;
}
tr.state-total__onoff + tr > td {
  padding: 0;
  border-top: 0 !important;
}
tr.state-total__onoff + tr > td div {
  visibility: hidden;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity .25s;
}
tr.state-total__onoff + tr.show > td div {
  visibility: visible;
  width: auto;
  height: auto;
  opacity: 1;
}
tr.state-total__onoff + tr > td table {
  text-align: center;
}
tr.state-total__onoff + tr > td table tr {
  height: auto;
}
tr.state-total__onoff + tr > td table th {
  padding: 16px 12px 2px;
  font-weight: normal !important;
  background: var(--color_main-op) !important;
}
tr.state-total__onoff + tr > td table td {
  padding: 2px 12px 16px;
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--color_main-op);
  border: 0;
}
tr.state-total__onoff + tr.show + tr > td {
  border-top: 0;
}

.btn__monitor {
  position: relative;
  background: var(--color_bg-wrap);
  color: var(--color_sub);
  cursor: default;
}
table .btn__monitor {
  padding: 8px;
  font-size: 1.4em;
}
.btn__monitor.able,
.btn__monitor.active {
  color: var(--color_txt-body);
  cursor: pointer;
}
@keyframes onoff-animation {
  0% {
      opacity: 0;
  }
  35% {
      opacity: 1;
  }
  65% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}
@keyframes onoff-animation25 {
  0% {
      opacity: 0.25;
  }
  35% {
      opacity: 1;
  }
  65% {
      opacity: 1;
  }
  100% {
      opacity: 0.25;
  }
}

.btn__monitor.active::after {
  content: "";
  position: absolute;
  left: calc(50% + 4px);
  top: 50%;
  transform: translate(-50%, -50%);
  border: 6px solid transparent;
  border-left: 8px solid var(--color_warn);
  animation: onoff-animation 1.5s infinite;
}
.btn__monitor.active:hover {
  background: var(--color_txt-body);
  color: var(--color_bg-con);
  transition: .2s;
}

.monitor__stt .con-box__top {
  cursor: pointer;
}
.monitor__stt .con-box__top .info__this {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  padding: 8px 24px;
  background-color: var(--color_txt-body-op);
  color: #FFF;
  transition: .3s;
}

.monitor__stt .con-box__top:hover .info__this,
.monitor__stt .con-box__top .info__this:hover {
  visibility: visible;
  opacity: 1;
  transition: .2s;
}
.monitor__stt .con-box__top .info__this .name {
  font-size: 1.5rem;
  font-weight: 700;
}

.view__keys {
  margin-left: -8px;
  overflow-y: auto;
}
.view__keys .keyword {
  display: inline-block;
  margin: 8px 0 0 8px;
  padding: 8px;
  border: 1px solid var(--color_line);
  border-radius: 20px;
  cursor: pointer;
}


/* 모니터링 - 채팅상담 현황 */
.onstate__chat {
  display: flex;
  margin: -16px -8px 0;
  flex-wrap: wrap;
}
.onstate__chat > div {
  margin: 16px 8px 0;
  padding: 10px 12px 12px;
  border-radius: 10px;
  flex: 1;
  min-width: 120px;
}
.onstate__chat > div i {
  opacity: 1;
}
.onstate__chat.now > div {
  min-width: 80px;
  padding-bottom: 10px;
}
.onstate__chat > div.in i,
.onstate__chat > div.in .num {
  background: var(--color_po3-op);
  color: var(--color_po3);
}
.onstate__chat > div.wait1 i,
.onstate__chat > div.wait1 .num {
  background: var(--color_po4-op);
  color: var(--color_po4);
}
.onstate__chat > div.wait2 i,
.onstate__chat > div.wait2 .num {
  background: var(--color_po2-op);
  color: var(--color_po2);
}
.onstate__chat > div.ing i,
.onstate__chat > div.ing .num {
  background: var(--color_po1-op);
  color: var(--color_po1);
}
.onstate__chat > div.after i,
.onstate__chat > div.after .num {
  background: var(--color_bg-wrap);
  color: var(--color_txt-body);
}
.onstate__chat .num {
  display: block;
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
}
.onstate__chat.now h4 {
  flex-direction: column;
  justify-content: center;
  font-size: 1.4rem;
  text-align: center;
}
.onstate__chat.now h4 i {
  margin: 0 0 4px;
}
.onstate__chat.now .num {
  background: var(--color_txt-body-100);
  color: var(--color_bg-con);
  font-size: 2rem;
}

/* 코드 관리 - 상담유형 관리 - category */
.manage-code > div {
  position: relative;
  height: 100%;
}
.he100p .scroll,
.manage-code > div > .scroll {
  max-height: 100%;
}
.manage-code > div > .scroll.folded {
  max-height: calc(100% - 209px);
}
.manage-code .tbl__list tr {
  height: 48px;
}
.manage-code .tbl__list button {
  height: 32px;
  width: 80px;
}
.manage-code .tbl__list td.inact {
  opacity: .4;
}
.input-code {
  position: absolute;
  bottom: 0;
  display: none;
  border-top: 1px solid var(--color_line);
  padding: 8px 24px 16px;
}
.input-code.on {
  display: block;
}

/* ----------------
 * 통계 (Statistics)
 * ---------------- */
 .filter-box.folded {
  width: 80px !important;
 }
 .filter-box.folded + .con-box__wrap {
  width: calc(100% - 80px) !important;
 }
 .filter-box.folded h3,
 .filter-box.folded .con-box__con * {
  display: none;
 }
 .filter-box.folded .con-box__top {
  padding: 0 16px;
 }

.flex__1n {
  display: flex;
  margin-left: -8px;
}
.flex__1n > * {
  flex: 1;
  margin-left: 8px;
  min-width: none;
}
/* 슬라이드 Slide */
[class*="slide-btns"] {
  z-index: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: none;
}

[id="slide1"]:checked ~ .slide-btns1 {
  display: block;
}
[id="slide2"]:checked ~ .slide-btns2 {
  display: block;
}
[id="slide3"]:checked ~ .slide-btns3 {
  display: block;
}
[class*="slide-btns"] .btn-l,
[class*="slide-btns"] .btn-r {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 16px;
}
[class*="slide-btns"] .btn-l {
  left: -12px;
}
[class*="slide-btns"] .btn-r {
  right: -12px;
}
[class*="slide-btns"] .btn-l i,
[class*="slide-btns"] .btn-r i {
  opacity: .5;
  font-size: 1.3em;
  cursor: pointer;
  transition: .25s;
}
[class*="slide-btns"] .btn-l:hover,
[class*="slide-btns"] .btn-r:hover {
  background: var(--color_bg-wrap-op);
}
[class*="slide-btns"] .btn-l:hover i,
[class*="slide-btns"] .btn-r:hover i {
  opacity: 1;
}
.slide__wrap ul {
  white-space: nowrap;
  font-size: 0;
  overflow-x: hidden;
}
.slide__wrap ul li {
  width: 100%;
  height: 100%;
  padding: 8px 12px;
  font-size: 1.4rem;
  display: inline-block;
  overflow-y: auto;
  transition: .5s;
}

[id="slide1"]:checked ~ ul li {
  transform: translateX(0%);
}
[id="slide2"]:checked ~ ul li {
  transform: translateX(-100%);
}
[id="slide3"]:checked ~ ul li {
  transform: translateX(-200%);
}

.w-file {position: relative;}
.w-file:after {content: "";
  position: absolute; top:50%; right: 16px;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background: url(../images/ico_w-file.png) center / 100%;
  opacity: .5;
}
:root[data-theme="dark"] .w-file:after {
  background: url(../images/ico_w-file-w.png) center / 100%;
}

/* ------------------
 * aside - 사이드 영역 
 * ----------------- */
[class*='drawer-r'] {
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 100%;
  transform: translateX(0%);
  height: 100vh;
  box-shadow: -2px 0 22px rgba(0, 0, 0, 0.2);
  background: var(--color_bg-con);
  transition: all .25s;
}
[class*='drawer-r'].on {
  visibility: visible;
  opacity: 1;
  transform: translateX(-100%);
}
[class*='drawer-r'] .user {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  border: 1px solid var(--color_line);
}

/* 대시보드 - 통화이력 */
.dashboard__wrap {
  display: flex;
  margin: -16px -4px 0;
  flex-wrap: wrap;
}
.dashboard {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  white-space: nowrap;
  border-radius: 6px;
  border: 1px solid var(--color_line);
}
.style1 .dashboard {
  background-color: var(--color_bg-wrap);
  border: 1px solid var(--color_bg-wrap);
}
.dashboard__wrap .dashboard {
  flex: 1;
  margin: 16px 4px 0;
}
.board_icon {
  font-size: 2rem;
  margin-right: 6px;
  opacity: .6;
}
.board_icon.w-img {
  width: 20px;
  height: 20px;
}
.board_icon.w-img.ib::after {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  background: url(../images/ico_ib.png) no-repeat center / 100%;
}
:root[data-theme="dark"] .board_icon.w-img.ib::after {
  background: url(../images/ico_ib-w.png) no-repeat center / 100%;
}
.dashboard .number {
  margin-left: 12px;
  font-size: 2.4rem;
  font-weight: 800;
}

/* 문자 수발신 이력 - 이미지 확대 보기 */
.imgview__wrap {
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  transition: opacity .25s;
}
.imgview__wrap.on {
  visibility: visible;
  opacity: 1;
  max-height: 100%;
  overflow: auto;
}
.img-controller {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px;
  background: rgba(0, 0, 0, 0.15);
  color: #FFF;
}
.img-controller button {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  padding: 0;
  background: transparent;
  transition: .25s;
}
.img-controller button:hover {
  background: rgba(0, 0, 0, 0.15);
}
.img-controller button img {
  height: 14px;
}
.img-controller button:last-of-type {
  position: absolute;
  top: calc(100% + 6px);
  right: 8px;
}

/* 볼륨 조절 바 : volume-controller */
.vol-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color_bg-wrap);
  height: 8px !important;
  border-radius: 4px;
  padding: 0;
}
.vol-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background-color: var(--color_main);
}
.vol-control input[type="range"]::-webkit-slider-thumb:hover {
  background-color: var(--color_main-hover);
  cursor: pointer;
}


/* 옴니채널 Omni-channel */
.omni-tab__wrap {
  display: flex;
  padding-bottom: 16px;
}
.omni-tab__wrap .tab {
  display: flex;
  align-items: center;
  height: 40px;
  max-width: 120px;
  padding-left: 8px;
  border: 1px solid var(--color_line);
  border-radius: 10px;
  background: var(--color_bg-con);
  border: 1px solid var(--color_bg-con);
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.omni-tab__wrap .tab ~ .tab {
  margin-left: 8px;
}
.omni-tab__wrap .tab:hover,
.omni-tab__wrap .tab.on {
  border: 1px solid var(--color_main-hover);
  box-shadow: 0 3px 2px rgb(0 0 0 / 5%);
}
.omni-tab__wrap .tab i {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  color: var(--color_bg-con);
  background: var(--color_btn1);
  border-radius: 8px;
}
.omni-tab__wrap .tab.on i {
  background: var(--color_main);
}
.omni-tab__wrap .tab i.kakao {
  background: url(../images/ch_kakao.png) no-repeat center / 100%;
}
.omni-tab__wrap .tab span {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.omni-tab__wrap .tab .btn-x::after {
  background-size: 60%;
}

/* section.con__wrap + .omni  ==230823== */
.omni .con-box__area {
  margin: 0;
}
.omni .con-box__wrap {
  padding: 0;
}
.omni .con-box__wrap .con-box__top,
.omni .con-box__wrap .con-box__con {
  border-radius: 0;
}
.omni .con-box__wrap:first-child .con-box:first-child .con-box__top {
  border-radius: 12px 0 0 0;
}
.omni .con-box__wrap:first-child .con-box:last-child .con-box__con {
  border-radius: 0 0 0 12px;
}
.omni .con-box__wrap:only-child .con-box:only-child .con-box__top,
.omni .con-box[class*="detail__"] .con-box__top {
  border-radius: 12px 12px 0 0;
}
.omni .con-box__wrap:only-child .con-box:only-child .con-box__con,
.omni .con-box[class*="detail__"] .con-box__con {
  border-radius: 0 0 12px 12px;
}
.omni .con-box__wrap:last-child .con-box:first-child .con-box__top {
  border-radius: 0 12px 0 0;
}
.omni .con-box__wrap:last-child .con-box:last-child .con-box__con {
  border-radius: 0 0 12px 0;
}
.omni .con-box__wrap .con-box ~ .con-box {
  padding-top: 0;
  border-top: 1px solid var(--color_line);
}
.omni .con-box__wrap ~ .con-box__wrap .con-box__top,
.omni .con-box__wrap ~ .con-box__wrap .con-box__con {
  border-left: 1px solid var(--color_line);
}
.omni .con-box__wrap ~ .con-box__wrap .tab__wrap .con-box__top .btn-tab__wrap,
.omni .con-box__wrap ~ .con-box__wrap .tab__wrap .con-box__top .btn-tab:first-child.on,
.omni .tab__wrap .con-box__wrap ~ .con-box__wrap .con-box__top .btn-tab__wrap .btn-tab:first-child {
  border-top-left-radius: 0;
}
.omni .con-box[class*="detail__"] {
  border-top: 0;
}
.omni .con-box[class*="detail__"].show {
  padding: calc(var(--space_base) * 2) calc(var(--space_base) * 2) 0 calc(var(--space_base) * 2);
}

/* omni-bar (옴니채널 bar) */
.omni-bar {
  display: flex;
  height: 40px;
  padding: 0 calc(var(--space_base)*3);
  background-color: var(--color_line);
  /* 추가 =240909= */
  position: relative;
}
/* 가로 스크롤 영역 추가 =240909= */
.slide-x {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
}
/* scrollbar hidden =240909= */
.omni-bar .slide-x::-webkit-scrollbar {display: none;}
/* slide button(.btn-slide) =240909= */
.btn-slide {
  z-index: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: var(--color_bg-con);
  box-shadow: 0 0 4px rgb(0 0 0 / 8%);
  transition: box-shadow .25s;
}
.btn-slide.left {
  left: 12px;
}
.btn-slide.right {
  right: 12px;
}
.btn-slide:hover {
  box-shadow: 0 0 8px rgb(0 0 0 / 16%);
}
.btn-slide .fa {
  justify-content: center;
  margin: 0;
  padding: 0;
  color: var(--color_txt-body);
  opacity: .5;
  transition: opacity .25s;
}
.btn-slide:hover .fa {
  opacity: 1;
}

.omni-bar .tab {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  max-width: 160px;
  white-space: nowrap;
  padding: 0 10px 0 10px;
  border-radius: 12px 12px 0 0;
  background-color: transparent;
  cursor: pointer;
  transition: background-color .2s;
}
.omni-bar .tab:hover {
    height: 38px;
    margin-top: 2px;
    background-color: var(--color_bg-sub);
}
.omni-bar .tab.on {
  max-width: none;
  background-color: var(--color_bg-wrap);
  padding: 0 16px 0 10px;
  /* 스크롤 기능 추가로, 그림자도 hidden되어 삭제 =240909=
   box-shadow: 0 -2px 2px rgb(0 0 0 / 6%);   */
}
.omni-bar .tab.w-x {
  padding-right: 24px;
}
.omni-bar .tab.on:hover {
    height: 40px;
    margin: 0;
}
.omni-bar i {
  display: flex;
  align-items: center;
  margin-right: 6px;
  height: 24px;
  padding: 0 7px;
  border-radius: 8px;
  color: #FFF;
  font-size: 12px;
}
.omni-bar i span {
  margin-left: 3px;
  font-weight: normal;
}
/* icon bgcolor - default값(상담화면 외) 추가 =240910= */
.omni-bar .etc {
  background-color: var(--color_sub);
}
.omni-bar .fa-phone {
  background-color: #1EB446;
}
.omni-bar .kakao {
  background-color: #FFE812;
  color: #000;
}
.omni-bar .kakao::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url(../images/in_ch-kakao.png) no-repeat center / 100%;
}
.omni-bar .fa-comment {
  background-color: #DC1EA0;
}
.omni-bar .fa-at {
  background-color: #6E1EC8;
}
.omni-bar .fa-clipboard {
  background-color: #96500F;
}
.omni-bar .tab > span {
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.omni-bar .tab.on > span {
    font-size: 1.05em;
    font-weight: 600;
}
.omni-bar .btn-x {
    position: absolute;
    right: 12px;
    top: 12px;
}

.omni-bar .btn-x::after,
:root[data-theme="dark"] .omni-bar .btn-x::after {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: var(--color_line);
  background-size: 60%;
}
.omni-bar + .con__wrap {
  height: calc(100vh - 80px - 40px);
}

/* card-box 카드박스 =20231208= */
.card-box__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 16px;
}
.card-box {
  position: relative;
  padding: calc(var(--space_base)*2);
  border-radius: 12px;
  background-color: var(--color_bg-con);
  box-shadow: 0 3px 2px rgb(0 0 0 / 5%);
}
.card__title {
  display: flex;
  align-items: center;
  font-size: 2.4rem;
  font-weight: 700;
}
.card__title i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 8px;
  margin-right: 8px;
  background-color: var(--color_main-op);
  color: var(--color_main);
}
.ck_to-top {
  position: absolute;
  top: 16px;
  right: 16px;
}
.ck_to-top i {
  font-size: 1.8rem;
  opacity: .3;
  cursor: pointer;
  transition: .25s;
}
.ck_to-top input:checked + i {
  color: var(--color_po4);
  opacity: 1;
} 
.card__info-txt {
  padding: 16px 0 14px;
}
button.next-guide i {
  transition: .2s;
}
button.next-guide:hover i:last-of-type {
  transform: translateX(4px);
}

/* 문서작성 document design =20231211= */
.doc__step {
  display: flex;
  align-items: center;
  color: var(--color_main);
}
.doc__step i {
  font-size: 2.4rem;
  margin-right: 8px;
}
.doc__step span {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  height: 24px;
  border-radius: 12px;
  background-color: var(--color_main-op);
  font-size: 13px;
  font-weight: 600;
}
.doc__title {
  text-align: center;
  font-size: calc(var(--space_base)*7);
  font-weight: 700;
  padding-bottom: 24px;
}
.doc__wrap {
  position: relative;
  margin: 0 auto;
}
.doc__wrap input,
.doc__wrap select,
.doc__wrap textarea {
  background-color: transparent;
  border: 1px solid transparent;
}
.doc__wrap input:hover,
.doc__wrap select:hover,
.doc__wrap textarea:hover  {
  border: 1px solid var(--color_main);
}
.doc__wrap input:focus,
.doc__wrap select:focus,
.doc__wrap textarea:focus {
  border: 1px solid var(--color_main);
  box-shadow: 0 0 8px var(--color_main-op3);
}

.doc__approval {
  display: flex;
  justify-content: space-between;
}
.doc__approval > *:first-child {
  margin-bottom: auto;
}
.doc__approval > *:last-child {
  display: flex;
  align-items: end;
  flex-direction: column;
}
.doc__approval > *:last-child > * {
  margin-top: auto;
  flex-grow: 0;
}
.tbl__doc {
  text-align: left;
}
.tbl__doc tr {
  height: 36px;
}
.tbl__doc th,
.tbl__doc-form th {
  font-size: 1.3rem;
  font-weight: normal;
}
.tbl__doc td {
  padding-left: 12px;
}
.tbl__doc-form td {
  padding: 0 12px;
}
.tbl__doc td,
.tbl__doc td input,
.tbl__doc td select {
  font-weight: 700;
}
.tbl__doc td input,
.tbl__doc td select,
.tbl__doc td textarea,
.tbl__doc-form td input,
.tbl__doc-form td select,
.tbl__doc-form td textarea {
  margin-left: -12px;
}
.tbl__doc-form td input,
.tbl__doc-form td select,
.tbl__doc-form td textarea {
  border-radius: 0;
  margin-right: -12px;
  width: calc(100% + 24px);
}
.tbl__doc-form tr:last-of-type td:last-of-type input {
  border-bottom-right-radius: 6px;
}

.tbl__doc-form .approval-step {
  position: relative;
  height: 56px;
}
.tbl__doc-form .approval-step img {
  max-width: 100px;
  max-height: 56px;
  object-fit: scale-down;
}
.tbl__doc-form .approval-step .ing,
.tbl__doc-form .approval-step .wait,
.tbl__doc-form .approval-step .pass,
.tbl__doc-form .approval-step .return {
  padding: 2px 6px;
  border-radius: 24px;
  font-weight: 700;
  font-size: 1.6rem;
}
.tbl__doc-form .approval-step .ing {
  color: var(--color_main);
  background-color: var(--color_main-op);
  border: 1px solid var(--color_main);
  animation: onoff-animation 1.2s infinite;
}
.tbl__doc-form .approval-step .wait {
  color: var(--color_po4);
  background-color: var(--color_po4-op);
  border: 1px solid var(--color_po4);
}
.tbl__doc-form .approval-step .pass {
  border: 1px solid var(--color_po2);
  background-color: var(--color_po2-op);
  color: var(--color_po2);
}
.tbl__doc-form .approval-step .return {
  border: 1px solid rgb(255 0 0);
  background-color: rgb(255 0 0 / 15%);;
  color: rgb(255 0 0);
}
.tbl__doc-form .approval-step .proxy {
  position: relative;
  width: 100%;
  height: 56px;
  background: linear-gradient(to bottom right, var(--color_bg-con) calc(50% - 1px), var(--color_line), var(--color_bg-con) calc(50% + 1px));
}
.tbl__doc-form .approval-step .proxy span {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 1.2rem;
  color: var(--color_bg-con);
  background-color: var(--color_main);
}

.tbl__doc-form .approval-doing {
  font-size: 1.2rem;
  font-weight: normal;
}
.tbl__doc-form .approval-doing button,
.tbl__doc-form .approval-doing span.pass,
.tbl__doc-form .approval-doing span.ing,
.tbl__doc-form .approval-doing span.ok,
.tbl__doc-form .approval-doing span.return {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background-color: transparent;
  box-sizing: border-box;
  transition: .2s;
}
.tbl__doc-form .approval-doing * ~ button,
.tbl__doc-form .approval-doing * ~ .pass,
.tbl__doc-form .approval-doing * ~ .ing,
.tbl__doc-form .approval-doing * ~ .return {
margin-left: 4px;
}
.tbl__doc-form .approval-doing button.pass {
  color: var(--color_po2);
  border: 1px solid var(--color_po2);
}
.tbl__doc-form .approval-doing span.pass,
.tbl__doc-form .approval-doing button.pass:hover {
  color: var(--color_bg-con);
  background-color: var(--color_po2);
}
.tbl__doc-form .approval-doing button.ok,
.tbl__doc-form .approval-doing .ing {
  color: var(--color_main);
  border: 1px solid var(--color_main);
}
.tbl__doc-form .approval-doing span.ok,
.tbl__doc-form .approval-doing button.ok:hover {
  background-color: var(--color_main);
  color: var(--color_bg-con);
}
.tbl__doc-form .approval-doing .ing {
  animation: onoff-animation 1.2s infinite;
}
.tbl__doc-form .approval-doing button.return {
  color: var(--color_sub);
  border: 1px solid var(--color_sub);
}
.tbl__doc-form .approval-doing span.return,
.tbl__doc-form .approval-doing button.return:hover {
  color: var(--color_bg-con);
  background-color: var(--color_sub);
}
.tbl__doc-form .approval-doing button.end {
  color: inherit;
  border: inherit;
  background-color: inherit;
  cursor: auto;
}
.tbl__doc-form .approval-doing button.end:hover {
  color: inherit;
  border: inherit;
  background-color: inherit;
}

.tbl__doc-form .approval-doing__wrap {
  padding: 6px 0;
}
.tbl__doc-form .approval-doing__wrap span {
  display: inline-block;
}

.tbl__doc-form .comment {
  position: relative;
}
.tbl__doc-form .comment input,
.tbl__doc-form .comment textarea {
  padding-right: 88px;
}
.tbl__doc-form .comment textarea {
  resize: vertical;
}
.tbl__doc-form .comment div {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  padding: 8px 12px 8px 0;
}
.tbl__doc-form .comment div button {
  width: 76px;
}

.tbl__doc-form.approval {
  width: auto;
  text-align: center;
  table-layout: fixed;
}
.tbl__doc-form.approval th,
.tbl__doc-form.approval td {
  min-width: 100px;
  padding: 0;
}
.tbl__doc-form tr {
  height: 36px;
}
.tbl__doc-form.approval tr {
  height: 32px;
}
.tbl__doc-form tr th {
  background-color: var(--color_bg-wrap-op);
  border-right: 1px solid var(--color_line);
}
.tbl__doc-form tr th:only-child,
.tbl__doc-form tr th:last-child {
  border-right: 0;
}
.tbl__doc-form tr th~th,
.tbl__doc-form tr td~td,
.tbl__doc-form tr th~td,
.tbl__doc-form tr td~th {
  border-left: 1px solid var(--color_line);
}
.tbl__doc-form tr~tr th,
.tbl__doc-form tr~tr td {
  border-top: 1px solid var(--color_line);
}
/* 문서작성 본문 design(에디터 작성 출력) */
.doc__content {
  padding: 18px 12px;
  line-height: 1.6em;
  word-break: break-all;
}
.doc__content .p_title {
  font-size: 1.1em;
  font-weight: 700;
}
.tbl__doc-form a,
.doc__content a {
  color: var(--color_main-deep);
}
.tbl__doc-form a:hover,
.doc__content a:hover {
  color: var(--color_main-hover);
}
.doc__content p + *,
.doc__content ul + * {
  padding-top: 20px;
}
.doc__content p + ul {
  padding-top: 12px;
}
.doc__content ul {
  padding-left: 8px;
}
.doc__content ul li {
  position: relative;
  padding-left: 8px;
}
.doc__content ul li~li {
  margin-top: 6px;
}
.doc__content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8.5px;
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color_txt-body);
}

.input__doc-form {
  background-color: transparent;
  border: 1px solid transparent;
}
.input__file {
  border: 2px dashed var(--color_line) !important;
}
table .input__file:hover {
  border: 2px dashed var(--color_main) !important;
}
.btn-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 18px;
  font-weight: 500;
  cursor: pointer;
}
.btn-upload + input[type="file"] {
  display: none;
}
.files__wrap {
  position: absolute;
  left: 8px;
  bottom: 8px;
  margin: -6px 0 0 -8px;
}
.files__wrap.po_re {
  flex-wrap: wrap;
  position: relative;
  left: 0;
  bottom: 0;
  width: calc(100% + 20px);
  margin: 6px 0 0 -20px;
}
.attach-file {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 24px 0 8px;
  margin: 6px 0 0 8px;
  height: 24px;
  border-radius: 12px;
  background: var(--color_bg-con);
  color: var(--color_main);
  border: 1px solid var(--color_main);
  white-space: nowrap;
}
.files__wrap.po_re .attach-file span:first-child {
  max-width: 100%;
}
.attach-file span:first-child {
  max-width: 120px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.attach-file + .attach-file {
  margin-left: 6px;
}
.attach-file i {
  position: absolute;
  right: 4px;
  top: 50%;
  padding: 4px;
  transform: translateY(-50%);
  color: var(--color_txt-body);
  opacity: .4;
  cursor: pointer;
  transition: .2s;
}
.attach-file i:hover {
  opacity: 1;
}
.attach-file-txt {
  display: block;
  padding: 8px 12px;
  color: var(--color_main);
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
}
.attach-file-txt:hover {
  color: var(--color_main-hover);
  text-decoration: underline;
  text-underline-position: under;
}
.attach-file-txt~.attach-file-txt {
  margin-top: -10px;
}
/* tab button design =20231219= */
.btn-tab.line {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  border-radius: 6px 6px 0 0;
  font-size: 1.5rem;
  font-weight: 500;
  border: 1px solid var(--color_bg-wrap);
  background-color: var(--color_bg-wrap);
}
.btn-tab.line.on {
  font-size: 1.6rem;
  font-weight: 700;
  background-color: var(--color_bg-con);
  border: 1px solid var(--color_line);
}
.btn-tab.line.on::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  display: block;
  background-color: var(--color_bg-con);
  width: 100%;
  height: 2px;
}
/* 결재선 approval line =20231219= */
.approval__con .tbl__wrap {
  padding: 12px 16px;
  border-radius: var(--space_base);
}
.in-bg {
  background-color: var(--color_bg-wrap);
}
.approval__con h4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}
.approval__con table tr.checked {
  background-color: var(--color_main-op);
}
.approval-line li {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  padding-top: 4px;
}
.approval-ck-list li {
  padding-top: 4px;
}
.approval-line > li:first-of-type,
.approval-ck-list > li:first-of-type {
  padding-top: 0;
}
.approval-line li ul {
  position: relative;
  visibility: hidden;
  overflow: hidden;
  padding-left: 6px;
  max-height: 0;
  transition: .2s;
}
.approval-line li ul::before {
  content: "";
  position: absolute;
  bottom: 48px;
  left: 13px;
  width: 1px;
  height: calc(100% - 42px);
  background-color: var(--color_line);
}
.approval-line li ul.on {
  visibility: visible;
  max-height: 1000px;
  overflow: visible;
}
.approval-line li.w-ul {
  position: relative;
}
.approval-line .ul-toggle {
  z-index: 1;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 12px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid var(--color_line);
  background: url(../images/ico_plus-op.png) no-repeat center / 8px;
  background-color: var(--color_bg-con);
  cursor: pointer;
  transition: .2s;
}
.approval-line .ul-toggle:hover {
  border: 1px solid var(--color_main);
  background: url(../images/ico_plus-gr.png) no-repeat center / 8px;
  background-color: var(--color_bg-con);
}
.approval-line .ul-toggle.on {
  border: 1px solid var(--color_main);
  background: url(../images/ico_minus-gr.png) no-repeat center / 8px;
  background-color: var(--color_bg-con);
}
.approval-line > li:first-of-type > .ul-toggle {
  top: 8px;
}
.approval-line label.ckbox,
.approval-ck-list label.ckbox {
  position: relative;
  width: 100%;
  padding: 6px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: .2s;
}
.approval-ck-list label.ckbox {
  padding: 4px;
}
.approval-line label.ckbox:hover {
  background-color: var(--color_bg-wrap-op);
}
.approval-ck-list label.ckbox:hover {
  background-color: var(--color_main-op);
}
.approval-line label.ckbox.checked,
.approval-ck-list label.ckbox.checked {
  background-color: var(--color_main-op);
}
.approval-line ul:last-of-type label.ckbox::before {
  content: "";
  position: absolute;
  bottom: 15px;
  right: calc(100% - 4px);
  display: block;
  width: 15px;
  height: 40px;
  border-radius: 0 0 0 8px;
  border: 1px solid transparent;
  border-left: 1px solid var(--color_line);
  border-bottom: 1px solid var(--color_line);
}
.approval-line li:first-of-type > label.ckbox::before {
  height: 22px;
}
.approval-line li~li li:first-of-type > label.ckbox::before {
  height: 25px;
}
.approval-line .ul-toggle + label.ckbox::before {
  content: none;
}
.btns__l-r {
  position: absolute;
  right: calc(100% + 24px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
}
.btns__l-r button {
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--color_line);
  color: var(--color_line);;
  background-color: transparent;
  font-size: 1.2em;
}
.btns__l-r button:hover {
  border: 1px solid var(--color_main);
  color: var(--color_main);
}
.btns__l-r button~button {
  margin-top: 4px;
}
.btns__u-d { 
  display: inline-flex;
}
.approval__con .btns__u-d button {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  background-color: var(--color_bg-wrap);
}
.approval__con .btns__u-d button i {
  width: auto;
  height: auto;
  margin: 0;
  background-color: transparent;
}
.approval__con .btns__u-d button~button {
  margin-left: 4px;
}
/* 문서작성 - 입력항목(tr) 복제,삭제 __ 지출결의서 */
.btn_remove-tr,
.btn_clone-tr {
  position: absolute;
  top: 50%;
  right: calc(100% + 6px);
  transform: translateY(-50%);
  background-color: transparent;
  width: 20px;
  height: 20px !important;
  padding: 0 !important;
  border-radius: 15px;
  border: 1px solid var(--color_line-op);
  font-size: 1rem;
  transition: .2s;
}
.btn_remove-tr:hover,
.btn_clone-tr:hover {
  border: 1px solid var(--color_main);
  color: var(--color_main);
}
/* table 상하좌우 round */
table.round tr:first-of-type th:first-child {
  border-top-left-radius: 6px;
}
table.round tr:first-of-type th:last-child {
  border-top-right-radius: 6px;
}
table.round tr:last-of-type td:first-child {
  border-bottom-left-radius: 6px;
}
table.round tr:last-of-type td:last-child {
  border-bottom-right-radius: 6px;
}
/* 서명 관리 : 이미지 드래그앤드롭 box */
.img-dragbox {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 240px;
  margin: 0 auto;
  border-radius: 24px;
  border: 2px dashed var(--color_line);
  transition: .2s;
}
.img-dragbox:hover {
  border: 2px dashed var(--color_main);
  cursor: pointer;
}
.img-dragbox img {
  width: 120px;
  height: 120px;
}
.img-dragbox img#sample-img {
  opacity: .5;
  filter: grayscale(100%);
  transition: .2s;
}
.img-dragbox:hover img#sample-img {
  opacity: 1;
  filter: none;
  transform: scale(1.05);
}
.img-dragbox p {
  margin-top: 6px;
  opacity: .4;
  font-size: 1.3rem;
}
.img-dragbox p:first-of-type {
  font-weight: 700;
  font-size: inherit;
}
.img-dragbox:hover p:first-of-type {
  opacity: 1;
  color: var(--color_main);
}
/* 증명서(재직증명서) */
.cert__title {
  display: flex;
  align-items: center;
  height: 40px;
  width: 100%;
  padding: 0 24px;
  font-size: 2rem;
  font-weight: 700;
  background-color: var(--color_bg-wrap);
  border-radius: 8px;
}
.cert__title + div {
  padding: 8px 24px;
}
.cert__con {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30mm;
  font-size: 2rem;
}
.official-seal__wrap {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 90px;
  display: flex;
  align-items: center;
}
.official-seal__wrap p {
  font-size: 1.6rem;
  font-weight: 600;
}
.official-seal__wrap p ~ p {
  padding-top: 12px;
}
.official-seal__wrap img {
  z-index: -1;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
}
.watermark {
  z-index: 11;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/watermark.png) repeat;
}
/* 상담원 현황 - 대시보드 --- Agent Status - Dashboard  =2024-04-16= */
.agent-status__wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 -12px;
}
.agent-status__wrap.n_8 .agent-status {
  flex-basis: calc(12.5% - 12px);
}
.agent-status__wrap.n_6 .agent-status {
  flex-basis: calc(16.66% - 12px);
}
.agent-status__wrap.n_5 .agent-status {
  flex-basis: calc(20% - 12px);
}
.agent-status__wrap.n_4 .agent-status {
  flex-basis: calc(25% - 12px);
}
.agent-status {
display: flex;
flex-direction: column;
margin: 8px 0 0 12px;
padding: 6px;
border-radius: 12px;
white-space: nowrap;
border: 1px solid var(--color_line-op);
box-shadow: 0 0 8px var(--color_line);
background-color: var(--color_bg-con);
cursor: pointer;
}
.agent-status:hover {
border: 1px solid var(--color_line);
box-shadow: 0 0 16px var(--color_line);
}
.agent-status.over {
border: 1px solid rgba(255,0,0,.7);
box-shadow: 0 0 8px rgba(255,0,0,.4);
}
.agent-status .row {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.agent-status .row:first-child {
padding: 4px 0 8px;
}
.agent-status .row > * ~ * {
margin-left: 6px;
}
.status__ch,
.status__agent {
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
--color_bg: transparent;
background-color: var(--color_bg);
}
.status__ch {
height: 26px;
width: 26px;
}
.status__ch.on {
background-color : #3fbd61; color: #FFF;
}
.status__ch.off {
background-color: var(--color_line);
color: var(--color_bg-con);
}
.agent-status .name {
font-weight: 600;
font-size: 1.6rem;
}
.status__agent {
width: 100%;
height: 36px;
}
.bg__green { --color_bg: #3fbd611A; color: #3fbd61;}
.bg__blue { --color_bg: #006AFF1A; color: #006AFF;}
.bg__red { --color_bg: #FF00001A; color: #FF0000;}
.bg__ye { --color_bg: #FC92281A; color: #FC9228;}
.bg__pur { --color_bg: #9100FF1A; color: #9100FF; }

.agent-status.over .status__agent {
--color_bg : #FF00001C; color: #FF0000;
}
.agent-status .time {
padding-left: 8px;
font-weight: 800;
font-size: 1.6rem;
border-radius: 6px;
}
.agent-status .name + .time {
margin-left: 8px
}
.status__agent i {
opacity: .6;
margin-right: 2px;
}

/* STT(in CTI) =20240528= */
.float__chat_wrap.w-faq {
display: flex;
width: 800px;
}
.float__chat_wrap.w-faq .monitor__stt {
width: 400px;
}
.float__chat_wrap.w-faq > div:first-child .chat__top {
border-top-right-radius: 0;
}
.float__chat_wrap.w-faq .faq__wrap {
width: 400px;
display: none;
}
.float__chat_wrap.w-faq .faq__wrap.on {
display: block;
}
.faq__top {
display: flex;
align-items: center;
height: 48px;
padding: 0 24px;
}
.faq__con {
border-top: 1px solid var(--color_line);
height: calc(100% - 48px);
}
.faq__search {
display: flex;
padding: 0 24px;
margin-top: 12px;
}
.faq__search input {
width: calc(100% - 80px);
margin-right: 8px;
}
.faq__search button {
width: 72px;
}
.ul__faq {
height: calc(100% - 48px);
overflow-y: auto;
}
.ul__faq li {
position: relative;
display: flex;
align-items: center;
line-height: 1.45em;
transition: .25s;
}
.ul__faq li:nth-child(odd),
.ul__faq li:nth-child(even).show {
height: auto;
min-height: 48px;
padding: 12px 24px;
border-bottom: 1px solid var(--color_line-op);
}
.ul__faq li:nth-child(odd) {
padding-right: 38px;
font-weight: 600;
cursor: pointer;
}
.ul__faq li:nth-child(odd) i {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
opacity: .45;
}
.ul__faq li:nth-child(even) {
padding: 0 24px;
height: 0;
min-height: 0;
overflow: hidden;
background-color: var(--color_bg-wrap);
}

/* 20240626 내선번호 현황 / 미사용은 클래스 추가 (class="unused") */
.extensionNum{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  line-height: 30px;
  border: 1px solid var(--color_po2);
  border-radius: 6px;
  background: var(--color_po2-op);
  color: var(--color_po2);
}
.extensionNum > span{
  display: inline-block;
  margin-right: 5px;
  opacity: 0.5;
}
.extensionNum.unused{
  border: none;
  background: var(--color_bg-wrap);
  color: var(--color_txt-body-op);
}
.extensionEx,.extensionEx > div{
  display: inline-flex;
  align-items: center;
}
.extensionEx > div~div{
  margin-left: 16px;
}
.extensionEx .extensionNum{
  padding: 0 8px;
  margin-left: 8px;
}
.tbl__list.d-line > tbody > tr:has(.extensionNum) ~ tr:has(.extensionNum){
  border-top: 1px solid var(--color_bg-sub);
}
.rangeNum{
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  margin-right: 16px;
  padding: 0 6px;
  height: 22px;
  border-radius: 4px;
  color: var(--color_main);
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--color_main-op);
}

/* 20240729 채팅상담 상담태그 디자인 - chatting tag design */
.consult-tag__wrap {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  width: calc(100% - 42px);
  margin: -6px 0 0 -4px;
}
.consult-tag__wrap .tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  white-space: nowrap;
  padding: 0 4px;
  margin: 6px 0 0 4px;
  color: var(--color_main);
  background-color: var(--color_main-op);
  border-radius: 6px;
  font-weight: 600;
}
.consult-tag__wrap .tag .btn-x {
  margin-left: 2px;
  padding: 0;
  width: 12px !important;
  height: 12px !important;
}
.consult-tag__wrap .tag .btn-x::after {
  width: 12px;
  height: 12px;
}

/* 20240730 채팅상담 개별대화 북마크 chatting bookmark */
.msg__menu {
  z-index: 1;
    position: absolute;
    top: 100%;
    border-radius: 10px;
    font-size: 1.4rem;
    color: var(--color_txt-body);
    background-color: var(--color_bg-con);
    box-shadow: 0px 2px 24px 0px rgb(0 0 0 / 15%);
    white-space: nowrap;
    min-width: 140px;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0.5;
    transition: opacity 0.25s, height 0.15s, top 0.15s;
}
.msg__menu.show {
  top: calc(100% + 4px);
    height: auto;
    visibility: visible;
    opacity: 1;
}
.msg-l .msg__menu {
  left: 0;
}
.msg-r .msg__menu {
  right: 0;
}
.msg__menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  transition: background-color .25s, color .25s;
  cursor: pointer;
}
.msg__menu li~li {
  border-top: 1px solid var(--color_line-op);
}
.msg__menu li:hover {
  background-color: var(--color_main-op);
  color: var(--color_main-deep);
}
.msg__menu li span {
  margin-left: 0;
}
.msg__menu li i {
  margin-right: 0;
  opacity: .4;
  transition: opacity .25s;
}
.msg__menu li:hover i {
  opacity: .8;
}
.msg__box.bookmark::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  position: absolute;
  bottom: 4px;
  background: url(../images/ico_bookmark.png) no-repeat center / 100%;
  opacity: .8;
}
:root[data-theme="dark"] .msg__box.bookmark::after {
  background: url(../images/ico_bookmark-w.png) no-repeat center / 100%;
}
.msg-l .msg__box.bookmark::after {
  left: calc(100% + 2px);
}
.msg-r .msg__box.bookmark::after {
  right: calc(100% + 2px);
}

/* 채팅상담 개별 - 새 Tab으로 보기, 부모요소에 position: relative */
.btn__newtab {
  position: absolute;
  right: calc(100% - 6px);
  top: 6px;
  width: 16px;
  height: 24px !important;
  background-color: transparent;
}

/* hash-tag */
.hash-tag{
  padding: 6px 8px;
  border-radius: 0.5rem;
  vertical-align: bottom;
  line-height: 6px;
  margin-left: 2px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--color_bg-con);
  background-color: rgba(var(--color_green-rgb),.9);
  display: inline-block;
  margin-top:2px;
}

.hash-tag2{
  padding: 6px 8px;
  border-radius: 0.5rem;
  vertical-align: bottom;
  line-height: 6px;
  margin-left: 2px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--color_bg-con);
  background-color: rgba(var(--color_blue-rgb),.9);
  display: inline-block;
  margin-top:2px;
}

.close_icon {
  width: 9px;
  height: 9px;
  margin-left: 5px;
  vertical-align: baseline;
}

/* 업무상태 userState - select =240902= */
.user-time {
  position: relative;
  justify-content: space-between;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.08);
}
.user-time .select {
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  border-radius: 16px;
  color: var(--color_txt-body);
  font-weight: 500;
  background-color: var(--color_bg-con);
  transition: opacity .2s;
}
.user-time .select.unfold {
  visibility: visible;
  opacity: 1;
  max-height: 1000px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 99;
}
.user-time .select li {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 20px 0 40px;
  white-space: nowrap;
  transition: background-color .2s;
}
.user-time .select li i {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: .5;
  transition: opacity .2s;
}
.user-time .select li:hover {
  background-color: var(--color_bg-wrap);
}
.user-time .select li.selected {
  background-color: var(--color_bg-wrap-op);
}
.user-time .select li:hover i,
.user-time .select li.selected i {
  opacity: 1;
}

/* 20241002 내선번호 현황 모달 탭 */
.modal-tab{
  position: relative;
  width: calc(100% + 48px);
  padding: 8px 24px 0;
  overflow-y: hidden;
  background-color: var(--color_line);
}
.modal-tab .slide-x{
  white-space: nowrap;
}
.modal-tab .slide-x::-webkit-scrollbar{
  display: none;
}
.modal-tab .tab{
  position: relative;
  cursor: pointer;
  border-radius: 12px 12px 0 0;
  padding: 8px 12px;
  transition: background-color .2s;
}
.modal-tab .tab:hover{
  height: 36px;
  margin-top: 2px;
  background-color: var(--color_bg-sub);
}
.modal-tab .tab ~ .tab{
  margin-left: 1px;
}
.modal-tab .tab.on{
  height: 38px;
  margin-top: 0;
  background-color: var(--color_bg-con);
}
.modal-tab .tab > .rangeNum{
  margin: 0;
}
.modal-tab > .btn-slide{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  border: 1px solid var(--color_line-op);
}
.modal-tab > .btn-slide.left{
  left: 12px;
}
.modal-tab > .btn-slide.right{
  right: 12px;
}

/* label - 상담채널 */
label.user-ch {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 2px;
  font-size: 11px;
  font-weight: 400;
}
label.user-ch .fa {
  color: var(--color_sub);
}

/* 대시보드 화면 - Dashboard Display  */
.display-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 0 calc(var(--space_base)*3);
  border-radius: calc(var(--space_base)/2*3);
  background-color: var(--color_line);
}
.current-time {
  position: relative;
  display: flex;
  align-items: center;
  width: 300px;
}
.current-time i {
  opacity: .35;
  margin-right: 6px;
}
.current-time span:first-of-type {
  font-size: 1.6rem;
}
.current-time span:last-of-type {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  font-size: 3.2rem;
  font-weight: 700;
}
ul.todo-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
ul.todo-list li ~ li {
  border-top: 1px solid var(--color_line);
}
ul.todo-list li button {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 1.2rem;
  background-color: var(--color_bg-wrap);
}
ul.todo-list .ckbox input:checked + span + span {
  text-decoration: line-through;
  opacity: .6;
}
.radio__filter {
  display: grid;
  gap: var(--space_base);
  grid-template-columns: repeat(2, 1fr);
}
.radio__filter input + span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 calc(var(--space_base)*2);
  border-radius: var(--space_base);
  background-color: var(--color_bg-wrap);
  border: 1px solid var(--color_bg-wrap);
}
.radio__filter input:checked + span {
  border: 1px solid var(--color_line);
  background-color: var(--color_bg-con);
}
.radio__filter .number {
  font-size: 2.4rem;
  font-weight: 700;
}
.radio__filter input:checked + span {
  color: var(--color_main);
  font-weight: 700;
}

/* user-list */
.user-list li {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 24px;
}
.user-list li ~ li {
  border-top: 1px solid var(--color_line);
}
.user-list li > div ~ div {
  margin-left: 16px;
}
.user-list li > div:last-child {
  margin-left: auto;
  text-align: right;
}
.user-list li > div p:first-of-type {
  font-weight: 600;
}
.user-list li > div p:nth-of-type(2) {
  padding-top: 3px;
  font-size: .85em;
  opacity: .65;
}
.user-list li > div p:first-of-type span {
  padding-left: 6px;
  font-weight: 300;
}

.list-32x li {
  display: flex;
  align-items: center;
  height: 32px;
}

/* 상담현황 디자인 추가 (내선번호별) =20241212= */
.onstate__grid {
  display: grid;
  gap: 12px 8px;
  grid-template-columns: repeat(10, 1fr)
}
.agent-state {
  min-width: fit-content;
  padding: 8px;
  border-radius: 8px;
  background-color: var(--color_bg-wrap);
  border: 1px solid var(--color_line-op);
  text-align: center;
}
.agent-state .extensionNum {
  padding: 0 8px;
  font-weight: 700;
}
.agent-state p {
  padding: 8px 0 2px;
  font-weight: 500;
}
@media (max-width: 1280px) {
  .onstate__grid {
    grid-template-columns: repeat(9, 1fr)
  }
}
@media (max-width: 1024px) {
  .onstate__grid {
    grid-template-columns: repeat(7, 1fr)
  }
}
@media (max-width: 800px) {
  .onstate__grid {
    grid-template-columns: repeat(5, 1fr)
  }
}

/* Category Tree List =20241212= */
.cate-tree li > div {
  position: relative;
  width: 100%;
  padding: 6px 0;
  border-radius: 6px;
  transition: background-color .25s;
}
.cate-tree li > div:hover {
  background-color: var(--color_bg-wrap);
}
.cate-tree.w-dot li > div {
  padding-left: 20px;
}
.cate-tree.w-dot li > div::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color_txt-body-op);
}
.cate-tree li > div button {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 32px;
  background-color: transparent;
} 
.cate-tree li.w-tree > div {
  cursor: pointer;
}
.cate-tree .tree-in {
  padding-left: 24px;
}
.v-hidden {
  visibility: hidden;
}
.cate-tree li > div:hover .v-hidden {
  visibility: visible;
}

/* statistics highlight =20241212= */
.stat-highlight{
  width: 100%;
  display: inline-flex;
  align-items: center;
  height: 60px;
  border-radius: var(--space_base);
  padding: 0 16px;
  background-color: var(--color_bg-wrap);
}
.stat-highlight .label{
  font-weight: 600;
}
.stat-highlight span{
  font-size: 2.8rem;
  font-weight: 700;
  margin-right: 4px;
}
.stat-highlight span.blue{
  color: #006AFF;
}
.stat-highlight span.red{
  color: #e6465a;
}

/* Search-bar =20250305= */
.search-bar__wrap {
  height: 48px;
  padding: 0 calc(var(--space_base)* 3);
  background-color: var(--color_line);
}
.search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  height: 40px;
  background-color: var(--color_bg-con);
  border-radius: 20px;
}
.search-bar label {
  font-size: 1.3rem;
  font-weight: 600;
}
.search-bar input,
.search-bar button,
.search-bar select {
  height: 28px;
}
.search-bar input,
.search-bar select {
  margin-right: 16px;
}
.w_search-bar .con__wrap {
  height: calc(100vh - 80px - 48px - 40px);
}

/* 채팅 - 메시지박스 버튼 추가 =250306= */
.btn-mini {
  width: calc(var(--space_base)/2*5) !important;
  height: calc(var(--space_base)/2*5) !important;
  border-radius: calc(var(--space_base)/4*5);
  padding: 0 !important;
  background-color: var(--color_bg-wrap);
  color: var(--color_txt-body);
  font-size: 1.2rem;
  transition: background-color .25s;
}
.btn-mini:hover {
  background-color: var(--color_bg-con);
}
.btn-mini.left,
.btn-mini.right {
  position: absolute;
  top: 0;
}
.btn-mini.left {
  right: calc(100% + 2px);
}
.btn-mini.right {
  left: calc(100% + 2px);
}

/* 채팅 번역 - slim =250321= */
/* 기본 말풍선 커스텀 - 사용시 주석풀기 */
/* .msg__box, .bot .msg__box{ 
  padding: 10px 12px;
  border-radius: calc(var(--space_base)* 2);
} */
.msg__box.lang-trans, .bot .msg__box.lang-trans{/* 번역 말풍선 */
  padding: 8px 10px;
  border-radius: calc(var(--space_base)* 2);
}
.lang-trans div, .bot .lang-trans div{ /*(HTML)번역 부분 div 추가*/
  margin: 8px -10px -8px;
  padding: 8px 10px;
  border-radius: 0 0 calc(var(--space_base)* 2) calc(var(--space_base)* 2);
}
.lang-trans div{
  background-color: var(--color_bg-con);
  color: var(--color_txt-body);
  border: 1px solid var(--color_bg-con);
}
.bot .lang-trans div{
  background-color: var(--color_bg-wrap);
}
/* 상담정보 > 고객선택 버튼 */
.user-change img{
  width:18px;
  opacity: 0.6;
}
.user-change:hover img{
  opacity: 0.9;
  transition: 0.2s;
}
[data-theme="dark"] .user-change img{
  content: url(../images/ico_user-change-w.png);
}
/* =250417= */
/* top-bar 보류 버튼 */
.call-parked {
  width: 69px;
  height: 34px;
  border-radius: var(--space_base);
  cursor: pointer;
  background-color: var(--color_sub);
  color: var(--color_bg-con);
  padding: 10px 12px;
}

/* 채팅 - 메세지 카운트, 새로운 메세지 =250417= */
.cmt_count,.new{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  font-size: 10px;
  transform: translateY(-1.5px);
}
.cmt_count{
  background-color: rgba(70, 80, 95, 1);
  color: #fff;
}
.new{
  background-color: #fd397a;
  color: #fff;
}

/* 채팅 - 고객 태그 =250417= */
.user-tag{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  background: var(--color_main-op);
  color: var(--color_main);
  font-weight: 400;
}
.user-tag.blue{
  background-color:var(--color_po1-op)!important;
  color: var(--color_po1)!important;
}
.user-tag.red{
  background-color:var(--color_po3-op)!important;
  color: var(--color_po3)!important;
}
.user-tag.yellow{
  background-color:var(--color_po4-op)!important;
  color: var(--color_po4)!important;
}
.user-tag.black{
  background-color:rgba(70, 80, 90, 0.1)!important;
  color:rgba(70, 80, 90, 1)!important;
}
.user-tag.green{
  background-color:rgba(26, 188, 156, 0.1)!important;
  color:rgb(26, 188, 156)!important;
}

/* 채팅 - 고객 기기 정보 표시 =250417= */
.user-device{
  color: var(--color_txt-body-op);
  border: 1px solid var(--color_line);
  padding: 4px 8px;
  border-radius: 13px;
  font-size: 12px;
}

/* 채팅 - 시간 측정 =250417= */
.chat__timer{
  padding: 4px 16px;
  border-radius: 10px;
  white-space: nowrap;
  background: var(--color_main-op);
  color: var(--color_main);
  font-weight: 600;
  font-size: 14px;
}

/* 채팅 - AI =250417= */
.msg__box.ai{
  position: relative;
  padding: 0 12px 0 44px;
  border: 1px solid var(--color_main);
  background-color: var(--color_bg-con);
  color: var(--color_main);
}
.msg__box.ai::after,
.ai-search::after{
  position: absolute;
  content: "AI";
  background: url(../images/stars_orm.png) no-repeat;
  background-size: 12px;
  width: 26px;
  text-align: right;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  opacity: 0.7;
}
.msg__box.ai:hover{
  /* background-color: var(--color_bg-con-op); */
  /* ezl - background-color 수정 */
  background-color: var(--color_bg-con);
  transition: all 0.25s;
}

/* 채팅 - AI agent =250417= */
.ai_answer{
  background: var(--color_line);
  max-height: 372px;
  overflow: hidden;
}
.ai_answer > div:last-child{
  height: 100%;
  overflow-y: auto;
  padding: 12px 20px;
}
.ai-search{
  position: relative;
  display: inline-flex;
  width: calc(100% - 40px);
  border-radius: 18px;
  margin: 12px 20px;
}
.ai-search::after{
  color: var(--color_main);
  opacity: 1;
}
.ai-search input[type="search"]{
  background: var(--color_bg-con);
  border-radius: 18px 0 0 18px;
  padding-left: 44px;
}

.ai-search button{
  border-radius: 0 18px 18px 0;
  background-color: var(--color_main);
  color: var(--color_bg-con);
}
.ai_answer .answer{
  max-width: calc(100% - 32px);
  padding: 14px 16px;
  background: var(--color_bg-con);
  color: inherit;
  margin-left: auto;
  border-radius: 16px;
}
.ai_answer .answer~.answer{
  margin-top: 20px;
}
/* 상담메모 =250417= */
.chat-memo{
  display: inline-flex;
  align-items: center;
  width: 100%;
  background-color: var(--color_bg-wrap);
  border: 1px solid var(--color_bg-wrap);
  border-radius: 8px;
}
.chat-memo button{
  background-color: var(--color_bg-wrap);
}
.chat-memo:hover{
  border: 1px solid var(--color_main);
  transition: 0.25s;
}
.chat-memo input[type="text"],
.chat-memo:hover input[type="text"],
.chat-memo:hover input[type="text"]:hover{
  border: none !important;
}
.chat-memo input[type="text"]:focus{
  border: none !important;
  box-shadow: none;
}
.chat-memo:has(input[type="text"]:focus){
  background-color: var(--color_bg-con);
  border: 1px solid var(--color_main) !important;
  box-shadow: 0 0 8px var(--color_main-op3);
  transition: 0.25s;
}