@charset "utf-8";@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);@import url(https://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
.toast-notification[data-v-48cd2052] {
  /* position: fixed; Removed to follow container flow */
  /* bottom: 20px; */
  /* right: 20px; */
  padding: 10px 20px;
  border-radius: 20px;
  color: #fff;
  font-size: 16px;
  /* z-index: 9999; Managed by container */
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.toast-icon[data-v-48cd2052] {
  width: 18px;
  height: 18px;
}
.toast-success[data-v-48cd2052] {
  background-color: #4caf50;
}
.toast-error[data-v-48cd2052] {
  background-color: #f44336;
}
.toast-info[data-v-48cd2052] {
  background-color: rgba(19, 19, 19, 0.8);
}
.toast-warning[data-v-48cd2052] {
  background-color: rgba(146, 64, 14, 0.92);
}

.toast-container {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column-reverse;
	gap: 10px;
	align-items: center;
}

.mqtt-test__scroll[data-v-2777f714] {
  max-width: none;
  padding-bottom: 24px;
}
.mqtt-test__cards[data-v-2777f714] {
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex-wrap: wrap;
}
@media (max-width: 1024px) {
.mqtt-test__cards[data-v-2777f714] {
    flex-direction: column;
}
}
.mqtt-test__card[data-v-2777f714] {
  flex: 1 1 420px;
  min-width: 380px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 24px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}
.mqtt-test__card-title[data-v-2777f714] {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #e0e0e0;
  color: #333;
}
.mqtt-test__card--publish .mqtt-test__card-title[data-v-2777f714] {
  border-bottom-color: #1a73e8;
  color: #1a73e8;
}
.mqtt-test__card--subscribe .mqtt-test__card-title[data-v-2777f714] {
  border-bottom-color: #0d8050;
  color: #0d8050;
}
.mqtt-test__card--publish[data-v-2777f714] {
  border-left: 4px solid #1a73e8;
  background: #f8fafd;
}
.mqtt-test__card--subscribe[data-v-2777f714] {
  border-left: 4px solid #0d8050;
  background: #f8fcf9;
}
.mqtt-test__form[data-v-2777f714] {
  padding: 0;
}
.mqtt-test__field[data-v-2777f714] {
  margin-bottom: 16px;
}
.mqtt-test__label[data-v-2777f714] {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}
.mqtt-test__input[data-v-2777f714],
.mqtt-test__textarea[data-v-2777f714] {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.5;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  color: #1a1a1a;
  font-weight: 450;
  box-sizing: border-box;
}

/* 공통 CSS input[type=text] { max-width: 160px } 덮어쓰기 — 토픽 입력란을 페이로드와 동일하게 전체 너비로 */
.mqtt-test__input[type="text"][data-v-2777f714] {
  max-width: none;
  min-width: 0;
}
.mqtt-test__textarea[data-v-2777f714] {
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  min-height: 200px;
}
.mqtt-test__actions[data-v-2777f714] {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.mqtt-test__btn[data-v-2777f714] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  min-width: 100px;
}
.mqtt-test__btn[data-v-2777f714]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.mqtt-test__btn--primary[data-v-2777f714] {
  background: #1a73e8;
  color: #fff;
}
.mqtt-test__btn--secondary[data-v-2777f714] {
  background: #5f6368;
  color: #fff;
}
.mqtt-test__btn--subscribe[data-v-2777f714] {
  background: #0d8050;
  color: #fff;
}
.mqtt-test__btn--subscribe[data-v-2777f714]:hover:not(:disabled) {
  background: #0a6b42;
}
.mqtt-test__btn--warning[data-v-2777f714] {
  background: #c5221f;
}
.mqtt-test__btn--warning[data-v-2777f714]:hover:not(:disabled) {
  background: #a31816;
}
.mqtt-test__result[data-v-2777f714] {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 14px;
}
.mqtt-test__result--ok[data-v-2777f714] {
  background: #e6f4ea;
  color: #137333;
  border: 1px solid #b7e1cd;
}
.mqtt-test__result--err[data-v-2777f714] {
  background: #fce8e6;
  color: #c5221f;
  border: 1px solid #f5c6c6;
}
.mqtt-test__history[data-v-2777f714] {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e8e8e8;
}
.mqtt-test__history-header[data-v-2777f714] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mqtt-test__history-title[data-v-2777f714] {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #1a1a1a;
}
.mqtt-test__history-list[data-v-2777f714] {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: #fafafa;
}
.mqtt-test__btn--sm[data-v-2777f714] {
  padding: 6px 12px;
  font-size: 13px;
}
.mqtt-test__history-item[data-v-2777f714] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  gap: 12px;
}
.mqtt-test__history-topic[data-v-2777f714] {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  font-weight: 500;
  color: #0d47a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
  min-width: 0;
}
.mqtt-test__history-time[data-v-2777f714] {
  font-size: 13px;
  font-weight: 500;
  color: #555;
  flex-shrink: 0;
}
.mqtt-test__hint[data-v-2777f714] {
  margin-top: 12px;
  font-size: 12px;
  color: #666;
}
.mqtt-test__hint code[data-v-2777f714] {
  padding: 2px 6px;
  background: #eee;
  border-radius: 4px;
  font-size: 11px;
}
.mqtt-test__inbox[data-v-2777f714] {
  margin-top: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fafafa;
  flex: 1;
  min-height: 200px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.mqtt-test__inbox-header[data-v-2777f714] {
  padding: 8px 12px;
  background: #eee;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mqtt-test__inbox-badge[data-v-2777f714] {
  font-size: 11px;
  color: #137333;
  font-weight: normal;
}
.mqtt-test__inbox-list[data-v-2777f714] {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
}
.mqtt-test__inbox-item[data-v-2777f714] {
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  background: #fff;
}
.mqtt-test__inbox-item[data-v-2777f714]:last-child {
  border-bottom: none;
}
.mqtt-test__inbox-meta[data-v-2777f714] {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.mqtt-test__inbox-topic[data-v-2777f714] {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  font-weight: 600;
  color: #0d47a1;
  word-break: break-all;
}
.mqtt-test__inbox-time[data-v-2777f714] {
  color: #555;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
}
.mqtt-test__inbox-payload-wrap[data-v-2777f714] {
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  background: #f5f5f5;
  padding: 8px 10px;
  border: 1px solid #e0e0e0;
  transition: background 0.15s, border-color 0.15s;
}
.mqtt-test__inbox-payload-wrap[data-v-2777f714]:hover {
  background: #eee;
  border-color: #ccc;
}
.mqtt-test__inbox-payload[data-v-2777f714] {
  margin: 0 0 4px 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  color: #1a1a1a;
  font-weight: 450;
  max-height: 200px;
  overflow-y: auto;
}
.mqtt-test__inbox-payload-hint[data-v-2777f714] {
  font-size: 12px;
  color: #0d8050;
  display: block;
  font-weight: 500;
}
/* 수신 메시지 상세 모달 */
.mqtt-test__payload-modal-overlay[data-v-2777f714] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.mqtt-test__payload-modal[data-v-2777f714] {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 90vw;
  width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.mqtt-test__payload-modal-header[data-v-2777f714] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.mqtt-test__payload-modal-title[data-v-2777f714] {
  font-weight: 600;
  font-size: 16px;
  color: #333;
}
.mqtt-test__payload-modal-close[data-v-2777f714] {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #666;
  cursor: pointer;
  padding: 0 4px;
}
.mqtt-test__payload-modal-close[data-v-2777f714]:hover {
  color: #333;
}
.mqtt-test__payload-modal-meta[data-v-2777f714] {
  padding: 14px 20px 18px;
  background: #f8f8f8;
  font-size: 13px;
  color: #555;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
/* 항목(라벨)과 내용(값) 사이 가로 간격 */
.mqtt-test__payload-modal-meta strong[data-v-2777f714] {
  margin-right: 12px;
  display: inline-block;
  min-width: 72px;
}
/* 토픽 / 수신 시각 두 줄 사이 간격 */
.mqtt-test__payload-modal-meta div + div[data-v-2777f714] {
  margin-top: 14px;
}
.mqtt-test__payload-modal-body[data-v-2777f714] {
  margin: 0;
  padding: 16px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  white-space: pre-wrap;
  word-break: break-all;
  overflow: auto;
  flex: 1;
  min-height: 120px;
  color: #1a1a1a;
  font-weight: 450;
  background: #fafafa;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
}
.mqtt-test__inbox-empty[data-v-2777f714] {
  padding: 24px;
  text-align: center;
  color: #888;
  font-size: 13px;
}
.mqtt-test__inbox-empty--connected[data-v-2777f714] {
  color: #0d8050;
  background: #f0f9f4;
}
/* http://meyerweb.com/eric/tools/css/reset/
   v5.0.1 | 20191019
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
body {
	line-height: 1;
}
menu, ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.wrap {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.wrap > .header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
}
.wrap > .header > .leftbtn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 60px;
    padding-left: 20px;
    box-sizing: border-box;
    background: url(/assets/arrow-left-gray.jxM3zjb7.png) no-repeat 50% / 10px;
}
.wrap > .inner {
    width: 100%;
    height: calc(100% - 60px);
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
}
.item-list {
    width: 100%;
}
.item-list > li.item {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    cursor: pointer;
}
.item-list > li.no-data {
    padding: 20px 10px;
    text-align: center;
    color: #9c9c9c;
}
.item-list > li.item > .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 66px;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;
}
.item-list > li.item > .inner > .left {
    width: calc(100% - 30px);
}
.item-list > li.item > .inner > .left > .tit {
    display: block;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-list > li.item > .inner > .left > .date {
    color: #9c9c9c;
}
.item-list > li.item > .inner > .right > .icon-arrow-right {
    display: block;
    width: 30px;
    height: 30px;
    background: url(/assets/arrow-right.B8fKxVR2.png) no-repeat 50%;
}
.item-list > li.select-box {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}
.item-list > li.select-box .inner {
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}
.item-list > li.select-box > .inner > select {
    width: 100%;
    height: 40px;
    background: #fff url(/assets/angle-down.CQMZNVYA.svg) no-repeat 95% 50% / 10px;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    padding: 0 42px 0 10px;
}

.item-list.gallery {
    width: 100%;
}
.item-list.gallery .item {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    border: 1px solid #f0f0f0;
}
.item-list.gallery .item.no-data {
    height: 88px;
    text-align: center;
    line-height: 63px;
}
.item-list.gallery .item > .inner {
    width: 100%;
    height: 100%;
    padding: 0;
    border-bottom: 0;
}
.item-list.gallery .item > .inner > .left {
    width: 60px;
    height: 60px;
} 
.item-list.gallery .item > .inner > .left .img {
    position: relative;
    width: 100%;
    height: 100%;
}
.item-list.gallery .item > .inner > .left .img::before {
    content: "";
    display: block;
}
.item-list.gallery .item > .inner > .left .img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    margin: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
}
.item-list.gallery .item > .inner > .right {
    width: calc(100% - 60px);
    height: 60px;
    padding: 0 10px;
    box-sizing: border-box;
}
.item-list.gallery .item > .inner > .right > .tit {
    display: block;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-list.gallery .item > .inner > .right > .sub-tit {
    font-size: 16px;
    font-weight: 500;
    color: #9c9c9c;
}
.wrap .inner > .cont-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.wrap .inner > .cont-box > .tit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 74px;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;
}
.wrap .inner > .cont-box > .tit > .txt {
    display: block;
    font-size: 18px;
    font-weight: 700;
    /*두줄 말줄임*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.wrap .inner > .cont-box > .tit > .date {
    color: #9c9c9c;
}
.wrap .inner > .cont-box > .cont {
    height: calc(100% - 74px);
    padding: 10px 0;
    overflow: auto;
    box-sizing: border-box;
}
.wrap .inner > .cont-box > .cont > textarea {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 0;
    font-size: 18px;
    font-weight: 400;
    outline: 0;
}

.wrap .inner > .info {
    border-radius: 5px;
    border: 1px solid #e1e1e1;
    padding: 8px 10px;
    box-sizing: border-box;
    margin-bottom: 5px;
    line-height: 17px;
    background-color: #fbfbfb;
}
.wrap .inner > .info  > strong {
    padding-right: 5px;
}
.wrap .inner > .group {
    margin-bottom: 14px;
}
.wrap .inner > .group > .tit {
    position: relative;
    font-size: 16px;
    font-weight: 700;
    padding: 5px 0 5px 20px;
}
.wrap .inner > .group > .message {
    position: relative;
    margin-top: 10px;
    background-color: #ffffcd;
    padding: 10px 10px 10px 26px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 17px;
    border-radius: 5px;
}
.wrap .inner > .group > .message::after {
    content: "※";
    position: absolute;
    top: 10px;
    left: 10px;
}
.wrap .inner > .group > .tit::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #e22615;
}
.wrap .inner > .group > table {
    width: 100%;
    border-top: 3px solid #3b3b3b;
    border-bottom: 1px solid #c5c5c5;
    overflow: hidden;

}
.wrap .inner > .group > table thead > tr {
    height: 40px;
    border-bottom: 1px solid #bdbdbd;
}
.wrap .inner > .group > table tbody > tr {
    height: 40px;
    border-bottom: 1px solid #bdbdbd;
}
.wrap .inner > .group > table tbody > tr:last-child {
    border-bottom: 0;
}
.wrap .inner > .group > table th {
    padding: 2px;
    box-sizing: border-box;
    background-color: #6b6b6b;
    color: #fff;
    font-weight: 500;
    text-align: center;
    font-size: 13px;
}
.wrap .inner > .group > table th.sub {
    font-size: 12px;
}
.wrap .inner > .group > table td {
    padding: 2px;
    box-sizing: border-box;
    text-align: center;
    font-size: 13px;
    background-color: #fbfbfb;
}
.wrap .inner > .group > .sub-tit {
    position: relative;
    padding: 5px 10px 5px 20px;
    margin: 5px 0;
    font-size: 14px;
    font-size: 14px;
    border-radius: 5px;
    font-weight: 700;
}
.wrap .inner > .group > .sub-tit::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    width: 10px;
    height: 3px;
    background-color: #e22615;
}
.wrap .inner > .group > .graph {
    width: 100%;
    height: 160px;
    border: 1px solid #c9c9c9;
    border-radius: 5px;
}
.wrap .inner > .group > .state {
    margin-top: 5px;
    font-weight: 600;
}
.wrap .inner > .group .state em {
    padding: 0 5px;
    font-weight: 700;
}
.wrap .inner > .group .state .red {
    color: #ef4023 ;
}
.wrap .inner > .group .state .org {
    color: #fda52c;
}
.wrap .inner > .group .state .green {
    color: #2cd185;
}
.wrap .inner > .group .state .blue {
    color: #2762D1;
}

.pin-box > th.pin {
    position: relative;
}
.pin-box > th.pin > span {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 1px;
    height: 100vh;
    border-left: 1px dashed #060606;
}
.pin-box > th::before {
    content: "▼" !important;
    position: absolute;
    top: 30px;
    right: 5px;
    width: 14px;
    height: 14px;
    color: #ff6161;
    font-size: 12px;
}
.pin-box > th.pin > .standard {
    position: absolute;
    right: -44px;
    width: 50px;
    text-align: left;
    color: #333;
    font-size: 11px;
}
.pin-box > th.pin > .standard > li {
    height: 40px;
    line-height: 42px;
    margin-top: 2px;
}
table, caption, tbody, tfoot, thead, tr, th, td {
    vertical-align: revert !important;
}
.gauge  {
    display: table-cell !important;
}
.gauge > p {
    max-width: 100%;
    height: 16px;
    color: #fff;
    text-align: right;
    letter-spacing: 0.5px;
}
.gauge > p.bg-red {
    background-color: #ef4023;
}
.gauge > p.bg-org {
    background-color: #fda52c;
}
.gauge > p.bg-green {
    background-color: #2cd185;
}
.state {
    border-radius: 5px;
    font-weight: 900;
    font-size: 11px !important;
    padding: 5px 6px !important;
}
.state.warning {
    color: #d12727;
    background: #ffe8e8;
}
.state.waiting {
    color: #FFB43C;
    background: #FFF6E8;
}
.state.complete {
    color: #2BAD26;
    background: #e1ffe1;
}

th.dot-box {
    position: relative;
    padding-left: 16px !important;
    display: table-cell !important;
}
.dot-box > .dot.green::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #2BAD26;
}
.dot-box > .dot.blue::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #2762D1;
}


body {font-family: 'Jamsil', sans-serif; font-size: 13px;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button{margin:0;padding:0;font-family: 'Jamsil', sans-serif ;}
fieldset,img{border:0 none;font-family: 'Jamsil', sans-serif !important;}
dl,ul,ol,menu,li{list-style:none;font-family: 'Jamsil', sans-serif;}
blockquote, q{quotes: none;font-family: 'Jamsil', sans-serif !important;}
blockquote:before, blockquote:after,q:before, q:after{content:'';content:none;font-family: 'Jamsil', sans-serif ;}
input,select,textarea,button{vertical-align:middle;font-family: 'Jamsil', sans-serif;}
input::-ms-clear{display:none;font-family: 'Jamsil', sans-serif ;}
button{border:0 none;background-color:transparent;cursor:pointer;font-family: 'Jamsil', sans-serif ;}
body{background:#fff;direction:ltr;-webkit-text-size-adjust:none;font-family: 'Jamsil', sans-serif ;}
body,th,td,input,select,textarea,button{font-size:14px;line-height:1.5;font-family: 'Jamsil', sans-serif ;color:#222;letter-spacing:-0.5px;font-weight:600;}
.os_mac body,.os_mac th,.os_mac td,.os_mac input,.os_mac select,.os_mac textarea,.os_mac button{letter-spacing:0}
a{color:#222;text-decoration:none;font-family: 'Jamsil', sans-serif !important;}
a:hover{color:none;text-decoration:none;font-family: 'Jamsil', sans-serif ;}
a:active{background-color:transparent;font-family: 'Jamsil', sans-serif ;}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal;font-family: 'Jamsil', sans-serif ;}
table {border-collapse: collapse; border-spacing: 0;font-family: 'Jamsil', sans-serif ;}
/* Skip area */
#Skip-navigation {position: absolute; left: 0; top: -100px; z-index: 1001; width: 100%; height: 60px; line-height: 60px; text-align: center; font-size: 20px; color: #fff; transition: all 0.5s; background: #666;}
#Skip-navigation:focus { top:0;}
/* ir */
.ir {width:0; height:0; overflow:hidden; font-size:0; line-height:0; position:absolute; left:0; top:0;}
/* clearfix */
.clearfix::after { content: ""; display: table; clear: both; }
.clearfix:before, .clearfix:after {display:block; content:'';line-height: 0;}
.clearfix:after {clear:both;}
/* input */
input { 
-webkit-appearance : none;
-moz-appearance:none;
appearance:none;
}
/* IE10 input box */
input::-ms-clear { display:none;}
/* input type number */
/* input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-out-spin-button {
-webkit-appearance: none;
-moz-appearance:none;
appearance:none;
} */
/* select box */
select {
-webkit-appearance: none;
-moz-appearance:none;
appearance:none;
}
/* IE Select box */
select::-ms-expand { display:none; }
/*Firefox input number*/
/* input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none; */
/* -mox-appearance: none; */
/* appearance: none;
} */

/*
 * ---------------------------------------------------------------
 * ## 👉 color variables ##
 *
 * Figma 디자인 가이드가 작성되면, 아래에 컬러를 작성합니다.
 * 해당 변수들은 vite 설정에 의해 어떤 CSS 파일에서도 import 없이 참조할 수 있습니다.
 *
 * key: 디자인 가이드에 작성된 컬러 이름을 사용합니다.
 * value: 전역 CSS 변수 이름으로 작성합니다.
 *
 * 🚫 주의사항: 전역 CSS 변수는 theme.css 파일에 작성되어야 합니다.
 * ---------------------------------------------------------------
 */
html, body {
  overflow: hidden;
}

div#app {
  overflow: hidden;
}

.wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media (max-width: 1199px) {
  .container {
    display: unset;
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 5px;
  cursor: pointer;
}

::-webkit-scrollbar-thumb {
  background-color: #838383;
  border-radius: 20px;
}

::-webkit-scrollbar-track {
  background-color: #d3d3d3;
  border-radius: 20px;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number] {
  width: 120px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #e4e4e4;
  cursor: pointer;
  outline: none;
}

.thin-scroll::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  cursor: pointer;
}

.hide-scroll::-webkit-scrollbar {
  display: none;
}
.hide-scroll::-webkit-scrollbar-thumb {
  display: none;
}
.hide-scroll::-webkit-scrollbar-track {
  display: none;
}

small {
  font-size: 12px;
}

@media (max-width: 1199px) {
  .tablet-none {
    display: none !important;
  }
}
@media (max-width: 1199px) {
  .tablet-mt10 {
    margin-top: 10px;
  }
}
@media (max-width: 766px) {
  .tablet-mt10-only {
    margin-top: 0;
  }
}
.tablet-mt0 {
  margin-top: 0 !important;
}
@media (max-width: 1199px) {
  .tablet-mb0 {
    margin-bottom: 0 !important;
  }
}
.tablet-m0 {
  margin: 0 !important;
}
.tablet-p0 {
  padding: 0;
}
.tablet-flo-r {
  float: right;
}

@media (max-width: 766px) {
  .mobile-none {
    display: none !important;
  }
  .mobile-mt5 {
    margin-top: 5px;
  }
  .mobile-mt10 {
    margin-top: 10px;
  }
  .mobile-mb0 {
    margin-bottom: 0;
  }
  .mobile-m0 {
    margin: 0 !important;
  }
  .mobile-flo-r {
    float: right;
  }
  .mobile-w100 {
    width: 100% !important;
  }
}
.pc-none {
  display: none !important;
}
@media (max-width: 1199px) {
  .pc-none {
    display: block !important;
  }
}
.pc-none-tano {
  display: none;
}
@media (max-width: 1199px) {
  .pc-none-tano {
    display: none !important;
  }
}
@media (max-width: 766px) {
  .pc-none-tano {
    display: block !important;
  }
}

.gray {
  color: #9c9c9c;
}

.red {
  color: #ef4023 !important;
  font-weight: 600;
}

.org {
  color: #fda52c;
}

.green {
  color: #2cd185;
}

.blue {
  color: #2762D1;
}

.bg-red {
  background-color: #ef4023;
}

.bg-red-light {
  background-color: #ffbeb2;
}

.bg-org {
  background-color: #fda52c;
}

.bg-org-light {
  background-color: #ffdeb0;
}

.bg-green {
  background-color: #2cd185;
}

.bg-green-light {
  background-color: #89ecbe;
}

.bg-gray {
  background-color: #F2F2F2;
}

.bg-blue {
  background-color: #2762D1;
}

.bg-blue-light {
  background-color: #E8F0FF;
}

.w100 {
  width: 100% !important;
}

.w60 {
  width: 60% !important;
}

.w50 {
  width: 50% !important;
}

.w40 {
  width: 40% !important;
}

.w100p {
  width: 100px !important;
  max-width: unset !important;
}

.w200p {
  width: 200px !important;
  max-width: unset !important;
}
@media (max-width: 766px) {
  .w200p {
    width: 100% !important;
  }
}

.w300p {
  width: 300px !important;
  max-width: unset !important;
}
@media (max-width: 766px) {
  .w300p {
    width: 100% !important;
  }
}

.w400p {
  width: 400px !important;
  max-width: unset !important;
}
@media (max-width: 766px) {
  .w400p {
    width: 100% !important;
  }
}

.w430p {
  width: 430px !important;
  max-width: unset !important;
}
@media (max-width: 766px) {
  .w430p {
    width: 100% !important;
  }
}

.w600p {
  width: 660px !important;
}

.w800p {
  width: 800px !important;
}

.m0 {
  margin: 0 !important;
}

.mr5 {
  margin-right: 5px;
}

.mt5 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mr10 {
  margin-right: 10px;
}

.ml10 {
  margin-left: 10px;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb5 {
  margin-bottom: 5px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.p0 {
  padding: 0 !important;
}

.pt20 {
  padding-top: 20px;
}

.h100 {
  height: 100% !important;
}

.h100p {
  height: 100px !important;
}

.h200p {
  height: 200px !important;
}

.h400p {
  height: 400px !important;
}

.flo-l {
  float: left !important;
}

.flo-r {
  float: right !important;
}

.txt-l {
  text-align: left !important;
}

.txt-r {
  text-align: right !important;
}

.txt-c {
  text-align: center !important;
}

.border-b {
  border-bottom: 1px solid #dddddd;
}

.border-0 {
  border: 0 !important;
}

.border-rd5 {
  border-radius: 5px !important;
}

.overflow-unset {
  overflow: unset !important;
}

.full {
  width: 100% !important;
}

.chk-list {
  position: relative;
  width: 100%;
  padding-top: 20px;
}
.chk-list > li {
  float: left;
  width: 33.33%;
  text-align: left;
  min-height: 30px;
  line-height: 30px;
  font-weight: bold;
}
@media (max-width: 1199px) {
  .chk-list > li {
    width: 50% !important;
  }
}
@media (max-width: 766px) {
  .chk-list > li {
    width: 100% !important;
  }
}
.chk-list > li.chk-value {
  position: absolute;
  top: 0px;
  right: 10px;
  width: auto;
  text-align: right;
}
.chk-list.terms > li span {
  display: inline-block;
  position: relative;
  width: calc(100% - 33px);
  cursor: pointer;
}
.chk-list.terms > li span em {
  position: absolute;
  right: 0;
  font-size: 12px;
  font-weight: 600;
  padding-right: 10px;
}

.div-tit {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  margin: 10px 0;
}
@media (max-width: 766px) {
  .div-tit {
    flex-direction: column;
  }
}

strong {
  font-weight: 800 !important;
}

select {
  position: relative;
  min-width: 160px;
  padding: 0 30px 0 10px !important;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #dddddd;
  cursor: pointer;
  outline: none;
  background: #fff url(/assets/angle-down.CQMZNVYA.svg) no-repeat right 11px center/10px;
}

input[type=text] {
  min-width: 120px;
  max-width: 160px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #dddddd;
  cursor: pointer;
  outline: none;
  height: 100%;
}
input[type=text]::placeholder {
  font-size: 13px;
  color: #5a5a5a;
  letter-spacing: 0.3px;
  font-weight: 600;
}

input[type=number] {
  min-width: 120px;
  max-width: 160px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #dddddd;
  cursor: pointer;
  outline: none;
}
input[type=number]::placeholder {
  font-size: 13px;
  color: #afafaf;
  letter-spacing: 0.3px;
  font-weight: 500;
}

input[type=password] {
  min-width: 120px;
  max-width: 160px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #dddddd;
  cursor: pointer;
  outline: none;
}
input[type=password]::placeholder {
  font-size: 13px;
  color: #5a5a5a;
  letter-spacing: 0.3px;
  font-weight: 600;
}

input[type=datetime-local] {
  min-width: 120px;
  max-width: 160px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #dddddd;
  cursor: pointer;
  outline: none;
}
input[type=datetime-local]::placeholder {
  font-size: 13px;
  color: #5a5a5a;
  letter-spacing: 0.3px;
  font-weight: 600;
}

input::placeholder {
  font-size: 13px;
}

.unit-ps {
  position: relative;
}
.unit-ps::after {
  content: "PS";
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
  right: 13px;
}
.unit-ps > input {
  height: 100%;
  padding-right: 34px;
}
@media (max-width: 766px) {
  .unit-ps > input {
    width: 100%;
  }
}
.unit-year {
  position: relative;
}
.unit-year::after {
  content: "년";
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
  right: 13px;
}
.unit-year > input {
  height: 100%;
  padding-right: 34px;
}
@media (max-width: 766px) {
  .unit-year > input {
    width: 100%;
  }
}
.unit-time-01 {
  position: relative;
}
.unit-time-01::after {
  content: "시간";
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
  right: 13px;
}
.unit-time-01 > input {
  height: 100%;
  padding-right: 42px;
  text-align: right;
}
@media (max-width: 766px) {
  .unit-time-01 > input {
    width: 100%;
  }
}
.unit-time-01 > input::-webkit-inner-spin-button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.unit-time-02 {
  position: relative;
}
.unit-time-02::after {
  content: "분";
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
  right: 13px;
}
.unit-time-02 > input {
  height: 100%;
  padding-right: 32px;
  text-align: right;
}
@media (max-width: 766px) {
  .unit-time-02 > input {
    width: 100%;
  }
}
.unit-time-02 > input::-webkit-inner-spin-button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

input[type=radio] {
  display: none;
}
input[type=radio] + label {
  cursor: pointer;
  padding-left: 10px;
}
input[type=radio]:checked + label::before {
  content: "";
  border-color: #CE2315;
  background: #FFE7E5 url(/assets/chk.QGTxBgqt.svg) no-repeat 50%/10px;
}
input[type=radio] + label:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #CE2315;
  border-radius: 14px;
  vertical-align: middle;
  background-color: #fff;
}
input[type=radio] + label > span {
  vertical-align: middle;
  padding-left: 5px;
}

input[type=checkbox] {
  display: none;
}
input[type=checkbox] + label {
  cursor: pointer;
  padding-left: 10px;
}
input[type=checkbox]:checked + label::before {
  content: "";
  border-color: #CE2315;
  background: #FFE7E5 url(/assets/chk.QGTxBgqt.svg) no-repeat 50%/10px;
}
input[type=checkbox] + label:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #CE2315;
  border-radius: 5px;
  vertical-align: middle;
  background-color: #fff;
}
input[type=checkbox] + label > span {
  vertical-align: middle;
  padding-left: 5px;
}

input[type=date] {
  position: relative;
  width: 130px;
  padding: 0 10px !important;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #dddddd;
  cursor: pointer;
  outline: none;
}
input[type=date].empty::before {
  content: attr(data-placeholder);
  width: 100%;
  font-size: 13px;
  color: #5a5a5a;
  letter-spacing: 0.3px;
  font-weight: 600;
}
input[type=date]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 8px;
  top: 5px;
  padding-left: 120px;
  height: 100%;
  cursor: pointer;
}

.engineSpeed .engine-color-0, .engineSpeed .engine-color-0.bg-gray {
  color: #636363;
}
.engineSpeed .engine-color-5, .engineSpeed .engine-color-5.bg-gray {
  background: rgba(245, 0, 0, 0.05) !important;
  color: #636363;
}
.engineSpeed .engine-color-10, .engineSpeed .engine-color-10.bg-gray {
  background: rgba(245, 0, 0, 0.1) !important;
  color: #636363;
}
.engineSpeed .engine-color-15, .engineSpeed .engine-color-15.bg-gray {
  background: rgba(245, 0, 0, 0.15) !important;
  color: #636363;
}
.engineSpeed .engine-color-20, .engineSpeed .engine-color-20.bg-gray {
  background: rgba(245, 0, 0, 0.2) !important;
  color: #636363;
}
.engineSpeed .engine-color-25, .engineSpeed .engine-color-25.bg-gray {
  background: rgba(245, 0, 0, 0.25) !important;
  color: #636363;
}
.engineSpeed .engine-color-30, .engineSpeed .engine-color-30.bg-gray {
  background: rgba(245, 0, 0, 0.3) !important;
  color: #fff;
}
.engineSpeed .engine-color-35, .engineSpeed .engine-color-35.bg-gray {
  background: rgba(245, 0, 0, 0.35) !important;
  color: #fff;
}
.engineSpeed .engine-color-40, .engineSpeed .engine-color-40.bg-gray {
  background: rgba(245, 0, 0, 0.4) !important;
  color: #fff;
}
.engineSpeed .engine-color-45, .engineSpeed .engine-color-45.bg-gray {
  background: rgba(245, 0, 0, 0.45) !important;
  color: #fff;
}
.engineSpeed .engine-color-50, .engineSpeed .engine-color-50.bg-gray {
  background: rgba(245, 0, 0, 0.5) !important;
  color: #fff;
}
.engineSpeed .engine-color-55, .engineSpeed .engine-color-55.bg-gray {
  background: rgba(245, 0, 0, 0.55) !important;
  color: #fff;
}
.engineSpeed .engine-color-60, .engineSpeed .engine-color-60.bg-gray {
  background: rgba(245, 0, 0, 0.6) !important;
  color: #fff;
}
.engineSpeed .engine-color-65, .engineSpeed .engine-color-65.bg-gray {
  background: rgba(245, 0, 0, 0.65) !important;
  color: #fff;
}
.engineSpeed .engine-color-70, .engineSpeed .engine-color-70.bg-gray {
  background: rgba(245, 0, 0, 0.7) !important;
  color: #fff;
}
.engineSpeed .engine-color-75, .engineSpeed .engine-color-75.bg-gray {
  background: rgba(245, 0, 0, 0.75) !important;
  color: #fff;
}
.engineSpeed .engine-color-80, .engineSpeed .engine-color-80.bg-gray {
  background: rgba(245, 0, 0, 0.8) !important;
  color: #fff;
}
.engineSpeed .engine-color-85, .engineSpeed .engine-color-85.bg-gray {
  background: rgba(245, 0, 0, 0.85) !important;
  color: #fff;
}
.engineSpeed .engine-color-90, .engineSpeed .engine-color-90.bg-gray {
  background: rgba(245, 0, 0, 0.9) !important;
  color: #fff;
}
.engineSpeed .engine-color-95, .engineSpeed .engine-color-95.bg-gray {
  background: rgba(245, 0, 0, 0.95) !important;
  color: #fff;
}
.engineSpeed .engine-color-100, .engineSpeed .engine-color-100.bg-gray {
  background: rgb(245, 0, 0) !important;
  color: #fff;
}
.engineSpeed .board .tbody:nth-child(even) li {
  background-color: #fff;
}
.engineSpeed .board .tbody:nth-child(even):hover li {
  background-color: #fff;
}
.engineSpeed .bg-gray {
  background: #f2f2f2 !important;
}

.select-test-tab {
  position: relative;
  width: 100%;
  height: 100%;
}
.select-test-tab > .option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  padding-left: 10px;
  padding-right: 28px !important;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #dddddd;
  cursor: pointer;
  background: #fff url(/assets/angle-down.CQMZNVYA.svg) no-repeat right 11px center/10px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
.select-test-tab > .option-list {
  z-index: 900;
  position: absolute;
  top: 44px;
  width: 100%;
  max-width: unset;
  min-width: unset;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}
.select-test-tab > .option-list > .inner {
  border: 1px solid #dddddd;
  border-radius: 6px;
  box-sizing: border-box;
}
.select-test-tab > .option-list > .inner > .test-box {
  width: 100%;
  height: auto;
  padding: 0 0 10px 0;
  box-sizing: border-box;
  background: #F2F2F2;
  border-radius: 6px;
}
.select-test-tab > .option-list > .inner > .test-box > .test-list {
  display: grid;
  grid-template-columns: 1fr;
}
.select-test-tab > .option-list > .inner > .test-box > .test-list > .item {
  float: left;
  padding: 5px 10px;
  margin: 10px 5px 0 5px;
  border: 1px solid #dddddd;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.select-test-tab > .option-list > .inner > .test-box > .test-list > .item.on {
  border: 1px solid #CE2315;
}

.select-ul-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.select-ul-box > .option {
  display: inline-block;
  width: 160px !important;
  height: 30px;
  padding-left: 10px;
  padding-right: 28px !important;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #dddddd;
  cursor: pointer;
  background: #fff url(/assets/angle-down.CQMZNVYA.svg) no-repeat right 11px center/10px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
.select-ul-box > .option-list {
  z-index: 300;
  position: absolute;
  top: 36px;
  width: 100%;
  min-width: 300px;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .select-ul-box > .option-list {
    width: 100%;
    max-width: unset;
    min-width: unset;
  }
}
.select-ul-box > .option-list > .search-box {
  position: relative;
  margin-bottom: 10px;
}
.select-ul-box > .option-list > .search-box > input {
  width: 100%;
  height: 28px;
  max-width: unset;
  padding-right: 50px;
  border: 1px solid #CE2315 !important;
}
.select-ul-box > .option-list > .search-box button {
  position: absolute;
  top: 3px;
  right: 1px;
  width: 42px !important;
  height: 26px;
  border-radius: 0 9px 9px 0;
  background: url(/assets/magnifying-red.COXApTsI.svg) no-repeat 50%/14px;
}
.select-ul-box > .option-list > .inner {
  padding: 5px;
  border: 1px solid #dddddd;
  border-radius: 6px;
  box-sizing: border-box;
}
@media (max-width: 766px) {
  .select-ul-box > .option-list > .inner {
    overflow: auto;
  }
}

.tree {
  max-height: 300px;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
}
@media (max-width: 766px) {
  .tree {
    width: 100%;
  }
}
.tree > li {
  line-height: 26px;
  text-align: left;
}
.tree > li a:hover {
  color: #CE2315;
}
.tree ul {
  position: relative;
  margin-left: 0.4em;
  cursor: pointer;
}
.tree ul::before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  border-left: 1px solid #9b9b9b;
}
.tree ul li {
  position: relative;
  padding-left: 18px;
  margin: 0;
  line-height: 2em;
  color: #555;
  font-weight: 600;
  cursor: pointer;
}
.tree ul li::before {
  content: "";
  display: block;
  width: 10px;
  height: 0;
  border-top: 1px solid #9b9b9b;
  margin-top: -1px;
  position: absolute;
  top: 1em;
  left: 5px;
}
.tree ul li:last-child:before {
  background: #fff;
  height: auto;
  top: 1em;
  bottom: 0;
}
.tree ul li a {
  display: inline-block;
  text-decoration: none;
  color: #9b9b9b;
}
.tree ul li a:hover {
  color: #CE2315;
}
.tree i {
  display: block;
  float: left;
  margin-top: 5px;
  width: 14px;
  height: 14px;
  border: 1px solid #9b9b9b;
  border-radius: 5px;
  margin-left: 0.2em;
  margin-right: 0.5em;
  cursor: pointer;
}
.tree i.minus {
  background: url(/assets/minus-off.nuhgW_uo.svg) no-repeat 50%/10px;
}
.tree i.minus:hover {
  background: url(/assets/minus-on.ckwDM1oR.svg) no-repeat 50%/10px;
  border: 1px solid #CE2315;
}
.tree i.plus {
  background: url(/assets/plus-off.Bt_MbCSZ.svg) no-repeat 50%/10px;
}
.tree i.plus:hover {
  background: url(/assets/plus-on.Q9exfUOS.svg) no-repeat 50%/10px;
  border: 1px solid #CE2315;
}

.fadein {
  animation: fadein 2000ms ease-out;
  -moz-animation: fadein 2000ms ease-out; /* Firefox */
  -webkit-animation: fadein 2000ms ease-out; /* Safari and  Chrome */
  -o-animation: fadein 2000ms ease-out; /* Opera */
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadein { /* Firefox */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadein { /* Opera */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.btn-opt {
  display: flex;
  justify-content: space-between;
}

button {
  margin-left: 5px;
}
button:disabled {
  color: #bdbdbd !important;
  background-color: #e5e5e5 !important;
  background-image: unset !important;
  padding: 2px 10px !important;
  border: #e5e5e5 !important;
}
button:disabled:hover {
  color: #bdbdbd !important;
  background-color: #e5e5e5 !important;
  background-image: unset !important;
  padding: 2px 10px !important;
  border: #e5e5e5 !important;
}
button.full {
  width: 100% !important;
  margin-left: 0 !important;
}
button.btn {
  min-width: 80px;
  height: 30px;
  line-height: 30px;
  background-color: #CE2315;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.8px;
  font-weight: 700;
  padding: 0 10px;
  box-sizing: border-box;
  margin-left: 5px;
}
button.btn.btn-secondary {
  background-color: #6c757d;
}
button.btn.btn-secondary:hover {
  background-color: #5a6268;
}
button.btn-sub {
  min-width: 80px;
  height: 30px;
  line-height: 30px;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #CE2315;
  color: #CE2315;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 0 5px;
  box-sizing: border-box;
  margin-left: 5px;
  font-weight: 800;
}
button.btn-gray {
  min-width: 80px;
  height: 30px;
  line-height: 30px;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #dddddd;
  color: #444444;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 0 5px;
  margin-left: 5px;
  box-sizing: border-box;
}
button.btn-gray.add {
  padding-left: 24px;
  background: #fff url(/assets/plus-off.Bt_MbCSZ.svg) no-repeat 8px/10px;
}
button.btn-gray-min {
  height: 24px;
  line-height: 24px;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #dddddd;
  color: #444444;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 0 5px;
  margin-left: 5px;
  box-sizing: border-box;
}
button.btn-paly {
  min-width: 80px;
  height: 30px;
  box-sizing: border-box;
  line-height: 30px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #cbcbcb;
  color: #444444;
  font-size: 12px;
  letter-spacing: 0.3px;
}
button.btn-paly.start {
  color: #0fc105;
  border: 1px solid #0fc105;
  padding: 0 16px 0 30px;
  background: url(/assets/play.BFtmbLrX.svg) no-repeat 11px 50%/10px;
}
button.btn-paly.start:hover {
  color: #fff;
  font-weight: 700;
  background: #0fc105 url(/assets/play_w.IjTiGUfo.svg) no-repeat 11px 50%/10px;
}
button.btn-paly.stop {
  color: #CE2315;
  border: 1px solid #CE2315;
  padding: 0 16px 0 30px;
  background: url(/assets/pause.CLB8ubwv.svg) no-repeat 11px 50%/10px;
}
button.btn-paly.stop:hover {
  color: #fff;
  font-weight: 600;
  background: #CE2315 url(/assets/pause_w.Cp77XUt_.svg) no-repeat 11px 50%/10px;
}
button.btn-paly.check {
  color: #000000;
  border: 1px solid #ef4024;
  padding: 0 16px 0 30px;
  background: url(/assets/state-repair.DUY_0pG8.svg) no-repeat 11px 50%/14px;
}
button.btn-paly.nm-start {
  color: #0fc105;
  border: 1px solid #0fc105;
  background-color: #fff;
  font-weight: 700;
}
button.btn-paly.nm-start:hover {
  background-color: #0fc105;
  color: #fff;
  font-weight: 600;
}
button.btn-paly.nm-next {
  color: #ef9c04;
  border: 1px solid #ef9c04;
  background-color: #fff;
  font-weight: 700;
}
button.btn-paly.nm-next:hover {
  background-color: #ef9c04;
  color: #fff;
  font-weight: 600;
}
button.btn-test {
  border: 1px solid #CE2315;
  padding: 2px 10px;
  border-radius: 5px;
  background-color: #fff;
  font-size: 13px;
}
button.btn-test:hover {
  background-color: #CE2315;
  color: #fff;
}
button.btn-test:disabled.on {
  background-color: #CE2315 !important;
  color: #fff !important;
}
button.btn-apply {
  width: 100px;
  height: 30px;
  padding: 5px 30px 5px 10px;
  box-sizing: border-box;
  background: #fff9ed url(/assets/rotate-org.kRdlo3oh.svg) no-repeat 86% 50%/18px;
  border-radius: 6px;
  border: 1px solid orange;
  color: rgb(255, 145, 0);
}
button.btn-apply:hover {
  background: rgb(255, 145, 0) url(/assets/rotate-w.CoqO5_KS.svg) no-repeat 86% 50%/18px;
  color: #fff;
}
button.btn-org {
  width: 100px;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  background: #fff9ed;
  border-radius: 6px;
  border: 1px solid orange;
  color: rgb(255, 145, 0);
}
button.btn-org:hover {
  background: rgb(255, 145, 0);
  color: #fff;
}
button.reset {
  width: 30px;
  height: 30px;
  background: #fff url(/assets/reset.BLCr1KMv.svg) no-repeat 50%/12px;
  border-radius: 6px;
  border: 1px solid #dddddd;
}
button.more {
  position: absolute;
  right: 5px;
  padding-right: 18px;
  font-size: 12px;
  color: #5F5F5F;
  line-height: 12px;
  background: url(/assets/arrow-right.B8fKxVR2.png) no-repeat 90% 50%/8px;
}
button.close-one {
  width: 10px;
  height: 10px;
  margin-left: 5px;
  background: url(/assets/xmark.CeLGuvCB.svg) no-repeat 50%/100%;
}
button.close-one:hover {
  background: url(/assets/xmark-red.B4Zz0ufy.svg) no-repeat 50%/100%;
}
button.home {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  background: url(/assets/home-w.DuHLW1Ej.svg) no-repeat 50%/60%;
}

nav {
  width: 280px;
  height: 100%;
  border-right: 1px solid #dddddd;
}
@media (max-width: 1199px) {
  nav {
    z-index: 800;
    left: -281px;
    position: absolute;
    background: #fff;
    transition: 0.5s ease;
  }
}
nav h1 {
  width: 100%;
  height: 100px;
}
@media (max-width: 1199px) {
  nav h1 {
    height: 50px;
  }
}
nav h1 > a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(/assets/main_logo.ifedTzWE.svg) no-repeat 50% 50%/180px;
}
@media (max-width: 1199px) {
  nav h1 > a {
    height: 44px;
    background: url(/assets/main_logo.ifedTzWE.svg) no-repeat 90% 60%/120px;
  }
}
nav > .main {
  width: 100%;
  height: auto;
  overflow: unset;
}
@media (max-width: 1199px) {
  nav > .main {
    height: auto;
    background-color: rgb(35, 31, 32);
  }
  nav > .main > .snb {
    display: flex !important;
    justify-content: flex-end;
    height: 40px;
    padding: 0 13px;
    background-color: #ebebeb;
  }
  nav > .main > .snb .box button {
    color: #333 !important;
  }
  nav > .main > .snb .box button > strong {
    color: #333 !important;
  }
}
nav ul.menu {
  width: 100%;
  height: calc(100% - 105px);
  overflow-y: auto;
}
nav ul.menu > li {
  width: 100%;
  min-height: 60px;
}
nav ul.menu > li > a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 0 0 60px;
  box-sizing: border-box;
  line-height: 60px;
  letter-spacing: 0.5px;
  font-size: 15px;
  font-weight: 800;
}
@media (max-width: 766px) {
  nav ul.menu > li > a {
    font-size: 14px;
  }
}
nav ul.menu > li > a.on {
  color: #CE2315;
}
nav ul.menu > li > a:hover {
  color: #CE2315;
}
nav ul.menu > li > a.home {
  background-image: url(/assets/nav-dashboard-off.Qdt5v1mu.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
}
nav ul.menu > li > a.home:hover {
  background-image: url(/assets/nav-dashboard-on.Btvg8ccR.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}
nav ul.menu > li > a.home.on {
  background-image: url(/assets/nav-dashboard-on.Btvg8ccR.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}
nav ul.menu > li > a.vehicle {
  background-image: url(/assets/nav-vehicle-manager-off2.DGTlt-Xx.png), url(/assets/angle-down.CQMZNVYA.svg);
  background-size: 24px, auto;
  background-repeat: no-repeat;
  background-position: 8% 50%, 90% 50%;
}
nav ul.menu > li > a.vehicle:hover {
  background-image: url(/assets/nav-vehicle-manager-on.CVSVwosy.png), url(/assets/angle-down-red.BsGI6t2F.svg);
}
nav ul.menu > li > a.vehicle.on {
  background-image: url(/assets/nav-vehicle-manager-on.CVSVwosy.png), url(/assets/angle-up-red.BlwMeuJ1.svg);
}
nav ul.menu > li > a.maintenance {
  background-image: url(/assets/nav-vehicle-mainte-off.QC7Ma1U6.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
}
nav ul.menu > li > a.maintenance:hover {
  background-image: url(/assets/nav-vehicle-mainte-on.BxNz0XNN.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}
nav ul.menu > li > a.maintenance.on {
  background-image: url(/assets/nav-vehicle-mainte-on.BxNz0XNN.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}
nav ul.menu > li > a.user {
  background-image: url(/assets/nav-user-manage-off.DmNeSstQ.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
}
nav ul.menu > li > a.user:hover {
  background-image: url(/assets/nav-user-manage-on.DdQfPuKL.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}
nav ul.menu > li > a.user.on {
  background-image: url(/assets/nav-user-manage-on.DdQfPuKL.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}
nav ul.menu > li > a.statistics {
  background-image: url(/assets/nav-stat-manage-off.DgVZZXsR.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
}
nav ul.menu > li > a.statistics:hover {
  background-image: url(/assets/nav-stat-manage-on.CLa63Z4y.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}
nav ul.menu > li > a.statistics.on {
  background-image: url(/assets/nav-stat-manage-on.CLa63Z4y.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}
nav ul.menu > li > a.remoteService {
  background-image: url(/assets/nav-remote-off.BMgfNuiS.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
}
nav ul.menu > li > a.remoteService:hover {
  background-image: url(/assets/nav-remote-on.DhRfYSv3.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}
nav ul.menu > li > a.remoteService.on {
  background-image: url(/assets/nav-remote-on.DhRfYSv3.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}
nav ul.menu > li > a.customerService {
  background-image: url(/assets/nav-csc-off.DXIjkTXr.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
}
nav ul.menu > li > a.customerService:hover {
  background-image: url(/assets/nav-csc-on.D68YWjXt.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}
nav ul.menu > li > a.customerService.on {
  background-image: url(/assets/nav-csc-on.D68YWjXt.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}
nav ul.menu > li > a.ecommerce {
  background-image: url(/assets/nav-sale-off.Bk3Qfo85.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
  background-size: 18px, auto;
}
nav ul.menu > li > a.ecommerce:hover {
  background-image: url(/assets/nav-sale-on.Bt31Ekke.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}
nav ul.menu > li > a.ecommerce.on {
  background-image: url(/assets/nav-sale-on.Bt31Ekke.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}
nav ul.menu > li > a.precision {
  background-image: url(/assets/nav-precision-off.BZrb2F0e.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
}
nav ul.menu > li > a.precision:hover {
  background-image: url(/assets/nav-precision-on.e4mdJPIm.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}
nav ul.menu > li > a.precision.on {
  background-image: url(/assets/nav-precision-on.e4mdJPIm.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}
nav ul.menu > li > a.remoteCommandHistory {
  background-image: url(/assets/nav-csc-off.DXIjkTXr.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
}
nav ul.menu > li > a.remoteCommandHistory:hover {
  background-image: url(/assets/nav-csc-off.DXIjkTXr.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}
nav ul.menu > li > a.remoteCommandHistory.on {
  background-image: url(/assets/nav-csc-off.DXIjkTXr.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}
nav ul.menu > li > a.aMotion {
  background-image: url(/assets/nav-amotion.eP1c6O4g.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
}
nav ul.menu > li > a.aMotion:hover {
  background-image: url(/assets/nav-amotion-on.BNXPV0vI.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}
nav ul.menu > li > a.aMotion.on {
  background-image: url(/assets/nav-amotion-on.BNXPV0vI.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}
nav ul.menu > li > a.customerAMotion {
  background-image: url(/assets/nav-amotion.eP1c6O4g.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
}
nav ul.menu > li > a.customerAMotion:hover {
  background-image: url(/assets/nav-amotion-on.BNXPV0vI.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}
nav ul.menu > li > a.customerAMotion.on {
  background-image: url(/assets/nav-amotion-on.BNXPV0vI.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}
nav ul.menu > li > a.aTest {
  background-image: url(/assets/nav-csc-off.DXIjkTXr.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
}
nav ul.menu > li > a.aTest:hover {
  background-image: url(/assets/nav-csc-off.DXIjkTXr.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}
nav ul.menu > li > a.aTest.on {
  background-image: url(/assets/nav-csc-off.DXIjkTXr.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}
nav ul.menu > li > a.salesStatusGroup {
  background-image: url(/assets/nav-sold-vehicle-off.DTMqISJL.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
}
nav ul.menu > li > a.salesStatusGroup:hover {
  background-image: url(/assets/nav-sold-vehicle-on.Cr3HUb5M.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}
nav ul.menu > li > a.salesStatusGroup.on {
  background-image: url(/assets/nav-sold-vehicle-on.Cr3HUb5M.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}
nav ul.menu > li > .sub-menu {
  width: 90%;
  height: auto;
  margin: auto;
  border-radius: 6px;
  background-color: #F2F2F2;
  overflow: hidden;
  animation: sub-menu 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) 1 normal both;
}
nav ul.menu > li > .sub-menu > li a {
  display: block;
  min-height: 40px;
  line-height: 40px;
  padding-left: 60px;
}
nav ul.menu > li > .sub-menu > li a:hover {
  font-weight: 800;
}
nav ul.menu > li > .sub-menu > li a.on {
  font-weight: 800;
}

@keyframes sub-menu {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  100% {
    height: auto;
    transform: scaleY(1);
    transform-origin: top;
  }
}
.img {
  position: relative;
}
.img.ex {
  background-color: rgba(240, 240, 240, 0.9411764706);
  border-radius: 5px;
}
.img > .loading-container {
  top: 43%;
  left: 47%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
}
.img > .loading-container > #loading-text {
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  margin-top: 0;
  line-height: 53px;
}
.img > .loading-container > .loading {
  width: 50px;
  height: 50px;
}
.img > .txt-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  line-height: 16px;
}
.img > .txt-box > .txt {
  text-align: center;
  font-size: 12px;
  color: #7a7a7a;
}

.image-txt {
  line-height: 150px;
  text-align: center;
  font-size: 12px;
  color: #7a7a7a;
}

.container.user {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(/assets/bg.CaDtlJ8w.png) 50%/cover;
}
.container.user > .box {
  min-width: 800px;
  min-height: 500px;
  background: #fff;
  border-radius: 5px;
}
@media (max-width: 1199px) {
  .container.user > .box {
    min-width: unset;
    width: 95%;
  }
}
.container.user > .box.login {
  display: flex;
}
@media (max-width: 1199px) {
  .container.user > .box.login {
    min-width: unset;
    width: 95%;
  }
}
.container.user > .box.login .info h2 {
  height: 120px;
}
.container.user > .box.fadein {
  height: 95%;
  overflow: hidden;
}
.container.user > .box.fadein > .info {
  height: calc(100% - 40px);
  overflow: auto;
}
.container.user > .box > h2 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 16px;
  background-color: rgb(35, 31, 32);
  color: #fff;
  border-radius: 5px 5px 0 0;
}
.container.user > .box > .left {
  position: relative;
  width: 300px;
  min-height: 100%;
  border-radius: 5px 0px 0px 5px;
  background: url(/assets/bg-item.YlYazPVc.png) no-repeat 100% 100%/cover;
}
@media (max-width: 766px) {
  .container.user > .box > .left {
    display: none;
  }
}
.container.user > .box > .left > h1 a {
  position: absolute;
  width: 150px;
  height: 50px;
  background: url(/assets/main_logo.ifedTzWE.svg) no-repeat 50%/80%;
}
.container.user > .box > .left > .txt {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  letter-spacing: 0.3px;
}
.container.user > .box > .right {
  width: calc(100% - 300px);
  min-height: 100%;
}
@media (max-width: 766px) {
  .container.user > .box > .right {
    width: 100%;
  }
}
.container.user > .box .info {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.container.user > .box .info h2 {
  width: 100%;
  height: 60px;
  line-height: 100px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 0.5px;
  padding-bottom: 20px;
}
.container.user > .box .info .info-message {
  max-width: 308px;
  padding: 10px;
  margin: auto;
  box-sizing: border-box;
  font-size: 13px;
  background-color: #FFE7E5;
  border-radius: 5px;
  line-height: 16px;
  margin-bottom: 10px;
}
.container.user > .box .info .info-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 300px;
  margin: auto;
}
.container.user > .box .info .info-list > .input-list {
  width: 100%;
}
.container.user > .box .info .info-list > .input-list .tit {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 5px;
}
.container.user > .box .info .info-list > .input-list .tit > .time {
  font-size: 12px;
  font-weight: 600;
  color: red;
}
.container.user > .box .info .info-list > .input-list .cont {
  position: relative;
  margin-bottom: 10px;
}
.container.user > .box .info .info-list > .input-list .cont > input {
  width: 100%;
  height: 32px;
  max-width: unset;
  padding-right: 30px;
  box-sizing: border-box;
}
.container.user > .box .info .info-list > .input-list .cont > input:focus {
  border: 1px solid #CE2315;
}
.container.user > .box .info .info-list > .input-list .cont .btn-delete {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  width: 16px;
  height: 16px;
  background: url(/assets/circle-xmark.D55k26Iq.svg) no-repeat 50%/100%;
}
.container.user > .box .info .info-list > .input-list label > span {
  font-size: 12px;
}
.container.user > .box .info .info-list .id-pw .id, .container.user > .box .info .info-list .id-pw .pw {
  position: relative;
  margin-bottom: 10px;
}
.container.user > .box .info .info-list .id-pw input {
  width: 100%;
  height: 32px;
  padding: 0 30px;
  box-sizing: border-box;
  max-width: unset;
  border-radius: 6px;
  border: 1px solid #dddddd;
}
.container.user > .box .info .info-list .id-pw input:focus {
  border: 1px solid #CE2315;
}
.container.user > .box .info .info-list .id-pw .id input {
  background: url(/assets/user-id.T7O6gBYl.svg) no-repeat 8px 50%/14px;
}
.container.user > .box .info .info-list .id-pw .pw input {
  background: url(/assets/user-pw.B4bUP5FX.svg) no-repeat 8px 50%/14px;
}
.container.user > .box .info .info-list .id-pw .btn-delete {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  width: 16px;
  height: 16px;
  background: url(/assets/circle-xmark.D55k26Iq.svg) no-repeat 50%/100%;
}
.container.user > .box .info .info-list .id-pw .opt input[type=checkbox] + label:before {
  border: 2px solid #999;
}
.container.user > .box .info .info-list .id-pw .opt input[type=checkbox]:checked + label::before {
  border: 2px solid #CE2315;
}
.container.user > .box .info .info-list .id-pw .opt label > span {
  color: #999;
  font-weight: 400;
  padding-left: 2px;
  font-size: 13px;
  vertical-align: unset;
}
.container.user > .box .info .info-list .message {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0;
  margin-bottom: 10px;
  background: #fff;
  color: red;
  font-size: 12px;
}
.container.user > .box .info .info-list .find-box {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 50px;
}
.container.user > .box .info .info-list .find-box > li {
  position: relative;
  float: left;
  width: 50%;
  text-align: center;
  font-size: 12px;
}
.container.user > .box .info .info-list .find-box > li a {
  color: #7a7a7a;
}
.container.user > .box .info .info-list .find-box > li a:hover {
  color: #CE2315;
  font-weight: 800;
}
.container.user > .box .info .info-list .find-box > li:first-child::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  content: "";
  width: 1px;
  height: 13px;
  background-color: rgba(212, 212, 212, 0.9411764706);
}

.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media (max-width: 1199px) {
  .main {
    width: 100%;
  }
}
.main .snb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: rgb(35, 31, 32);
}
.main .snb > .date {
  font-size: 13px;
  line-height: 50px;
  letter-spacing: 0.3px;
  color: #fff;
}
@media (max-width: 1199px) {
  .main .snb > .date {
    padding-left: 30px;
  }
}
@media (max-width: 766px) {
  .main .snb > .date {
    padding-left: 28px;
  }
}
.main .snb > .box {
  position: relative;
  display: flex;
  align-items: center;
}
.main .snb > .box .alarm {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  background: url(/assets/bell-regular.DRNBPStP.svg) no-repeat 50%/70%;
}
.main .snb > .box .alarm:hover {
  background: url(/assets/bell-regular-red.CJ5_T-o1.svg) no-repeat 50%/70%;
}
.main .snb > .box .alarm-box {
  z-index: 500;
  position: absolute;
  width: 360px;
  height: auto;
  top: 26px;
  right: 0px;
  background-color: #fff;
  padding: 10px;
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: 4px 12px 30px 6px rgba(0, 0, 0, 0.09);
}
@media (max-width: 766px) {
  .main .snb > .box .alarm-box {
    width: 340px;
  }
}
.main .snb > .box .alarm-box > .tit {
  display: flex;
  width: 100%;
  height: 60px;
  align-items: center;
  justify-content: space-between;
}
.main .snb > .box .alarm-box > .tit > .tit-txt {
  width: 80px;
  font-size: 16px;
  font-weight: 700;
  padding-left: 5px;
}
.main .snb > .box .alarm-box > .tit > .btn-close {
  width: 20px;
  height: 100%;
  background: url(/assets/xmark.CeLGuvCB.svg) no-repeat 50% 10%/14px;
}
.main .snb > .box .alarm-box > .tit > .btn-close:hover {
  background: url(/assets/xmark-red.B4Zz0ufy.svg) no-repeat 50% 10%/14px;
}
.main .snb > .box .alarm-box > .tit > .ex {
  font-size: 12px;
  color: #5F5F5F;
}
.main .snb > .box .alarm-box > .tab {
  margin-bottom: 10px;
}
.main .snb > .box .alarm-box > .tab-sub-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  margin-bottom: 5px;
}
.main .snb > .box .alarm-box > .tab-cont > .inner {
  max-height: 450px;
  overflow: auto;
}
.main .snb > .box .alarm-box > .tab-cont > .inner > .timeline-box {
  padding-right: 5px;
}
.main .snb > .box .alarm-box > .tab-cont > .inner > .timeline-box > .timeline-list > .timeline {
  cursor: pointer;
}
.main .snb > .box .alarm-box > .tab-cont > .inner > .timeline-box > .timeline-list > .timeline:hover {
  background-color: #FFE7E5;
}
.main .snb > .box .alarm-box > .tab-cont > .inner > .timeline-box > .timeline-list > .timeline:hover .txt {
  background-color: #FFE7E5 !important;
}
.main .snb > .box .alarm-box > .tab-cont > .inner > .timeline-box > .timeline-list > .timeline > .txt {
  background-color: #F2F2F2 !important;
}
.main .snb > .box .alarm-box > .tab-cont > .inner > .timeline-box > .timeline-list > .timeline > .txt > .tit > span {
  margin: 0 2px;
  font-weight: 700;
}
.main .snb > .box .screen {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background: url(/assets/expand.BLbMc9Po.svg) no-repeat 50%/70%;
}
@media (max-width: 1199px) {
  .main .snb > .box .screen {
    display: none;
  }
}
.main .snb > .box .screen:hover {
  background: url(/assets/expand-solid-red.BMXQv-c-.svg) no-repeat 50%/70%;
}
.main .snb > .box .user {
  width: auto;
  height: 20px;
  padding-right: 24px;
  font-size: 13px;
  letter-spacing: 0.8px;
  color: #fff;
  background: url(/assets/circle-user.BlsL2VmY.svg) no-repeat 100% 50%/19px;
}
.main .snb > .box .user > strong {
  padding-left: 5px;
  color: #fff;
  font-weight: 700 !important;
}
.main .snb > .box .user-menu {
  z-index: 5;
  position: absolute;
  top: 28px;
  right: 0;
  width: 100px;
  height: auto;
  padding: 0 6px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #dddddd;
  box-shadow: 4px 12px 30px 6px rgba(0, 0, 0, 0.09);
}
.main .snb > .box .user-menu > li a {
  display: block;
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-bottom: 1px solid #dddddd;
  font-size: 13px;
  cursor: pointer;
}
.main .snb > .box .user-menu > li a:hover {
  color: #CE2315;
  font-weight: 700;
}
.main .snb > .box .user-menu li:last-child a {
  border-bottom: 0;
}
.main .contents-box {
  width: 100%;
  height: calc(100% - 50px);
  overflow: hidden;
}
.main .contents-box > .page-nation {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 5px 10px 0 10px;
  box-sizing: border-box;
  background-color: #F2F2F2;
  box-shadow: inset 0px 12px 14px 0px rgba(0, 0, 0, 0.12);
}
.main .contents-box > .page-nation .page {
  position: relative;
  height: 100%;
  margin-right: 5px;
  line-height: 35px;
  text-align: center;
  background-color: #e7e7e7;
  border-radius: 5px 5px 0px 0px;
  overflow: hidden;
}
.main .contents-box > .page-nation .page:first-child a {
  padding: 0 30px;
}
.main .contents-box > .page-nation .page > a {
  display: block;
  padding: 0 30px 0 10px;
  box-sizing: border-box;
  font-size: 13px;
  letter-spacing: 0.5px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
.main .contents-box > .page-nation .page.on {
  min-width: 180px;
  background-color: #fff;
}
.main .contents-box > .page-nation .page:hover {
  background-color: #fff;
}
.main .contents-box > .page-nation .page > .close {
  position: absolute;
  top: 7px;
  right: 4px;
  width: 20px;
  height: 20px;
  padding: 10px;
  box-sizing: border-box;
  background: url(/assets/xmark.CeLGuvCB.svg) no-repeat 50%/10px;
}
.main .contents-box > .page-nation .page > .close:hover {
  background: url(/assets/xmark-red.B4Zz0ufy.svg) no-repeat 50%/10px;
}
.main .contents-box .contents {
  width: 100%;
  height: calc(100% - 40px);
  padding: 10px 4px 10px 0;
  box-sizing: border-box;
  overflow: hidden;
  background-color: rgba(251, 251, 251, 0.9);
}
@media (max-width: 1199px) {
  .main .contents-box .contents {
    padding: 14px 2px 14px 0;
  }
}
.main .contents-box .contents.main-dash {
  height: 100%;
}
.main .contents-box .contents.main-dash > .cont-scroll {
  height: 100%;
  padding-top: 0;
  padding-bottom: 10px;
}
.main .contents-box .contents.main-dash > .cont-scroll > .search-option {
  padding: 12px;
  padding-bottom: 12px !important;
}
.main .contents-box .contents.main-dash > .cont-scroll > .search-option.w100 .select-ul-box > .option {
  width: 300px !important;
}
@media (max-width: 766px) {
  .main .contents-box .contents.main-dash > .cont-scroll > .search-option.w100 > div > .option {
    width: 100% !important;
  }
  .main .contents-box .contents.main-dash > .cont-scroll > .search-option.w100 .select-ul-box > .option {
    width: 100% !important;
  }
}
.main .contents-box .contents.main-dash > .cont-scroll > .search-option .option {
  padding-right: 0;
}
@media (max-width: 1199px) {
  .main .contents-box .contents.main-dash > .cont-scroll > .search-option .option {
    width: unset;
    margin-bottom: 0;
  }
  .main .contents-box .contents.main-dash > .cont-scroll > .search-option .option > li.period {
    width: 100%;
    padding-left: 0;
  }
  .main .contents-box .contents.main-dash > .cont-scroll > .search-option .option > li.period > input {
    width: 140px !important;
    min-width: unset;
  }
}
@media (max-width: 1199px) {
  .main .contents-box .contents.main-dash > .cont-scroll > .search-option .option > .tit {
    min-width: 40px;
  }
  .main .contents-box .contents.main-dash > .cont-scroll > .search-option .option > li.period > input {
    width: 100% !important;
  }
  .main .contents-box .contents.main-dash > .cont-scroll > .search-option .option > li.period > .span {
    width: 8%;
  }
  .main .contents-box .contents.main-dash > .cont-scroll > .search-option .option > li.item {
    width: auto;
  }
}
@media (max-width: 766px) {
  .main .contents-box .contents.main-dash > .cont-scroll > .search-option .option {
    width: 256px;
  }
  .main .contents-box .contents.main-dash > .cont-scroll > .search-option .option > li.item {
    width: calc(100% - 74px);
  }
  .main .contents-box .contents.main-dash > .cont-scroll > .search-option .option > li.item.period {
    width: auto;
  }
}
.main .contents-box .contents.main-dash > .cont-scroll > .search-option button {
  margin-left: 5px;
}
@media (max-width: 1199px) {
  .main .contents-box .contents.main-dash > .cont-scroll > .search-option button {
    top: 0px;
    width: 60px;
    min-width: unset;
    margin-top: 0;
  }
}
.main .contents-box .contents > .cont-tit {
  position: relative;
  width: 100%;
  padding: 0 14px;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .main .contents-box .contents > .cont-tit {
    padding: 0 20px 0 10px;
  }
}
.main .contents-box .contents > .cont-tit > .location {
  position: absolute;
  right: 20px;
  bottom: 10px;
  font-size: 12px;
  color: #ababab;
}
@media (max-width: 766px) {
  .main .contents-box .contents > .cont-tit > .location {
    position: unset;
  }
}
.main .contents-box .contents > .cont-tit > .location > ul li {
  float: left;
}
.main .contents-box .contents > .cont-tit > .location > ul li:last-child::after {
  content: "";
}
.main .contents-box .contents > .cont-tit > .location > ul li::after {
  content: ">";
  font-size: 12px;
  margin: 0 5px;
}
.main .contents-box .contents > .cont-tit > .location > ul li.now {
  color: #333;
  font-weight: 700;
}
.main .contents-box .contents > .cont-tit > .location > ul li.remote {
  padding-left: 28px;
  background: url(/assets/nav-remote-off.BMgfNuiS.svg) 5px 50%/15px;
  background-repeat: no-repeat;
}
.main .contents-box .contents > .cont-tit > .location > ul li.ecommerce {
  padding-left: 28px;
  background: url(/assets/nav-sale-off.Bk3Qfo85.svg) 5px 50%/15px;
  background-repeat: no-repeat;
}
.main .contents-box .contents > .cont-tit > .location > ul li.customerService {
  padding-left: 28px;
  background: url(/assets/nav-csc-off.DXIjkTXr.svg) 5px 50%/15px;
  background-repeat: no-repeat;
}
.main .contents-box .contents > .cont-tit > .location > ul li.statistics {
  padding-left: 28px;
  background: url(/assets/nav-stat-manage-off.DgVZZXsR.svg) 5px 50%/15px;
  background-repeat: no-repeat;
}
.main .contents-box .contents > .cont-tit > .location > ul li.user {
  padding-left: 28px;
  background: url(/assets/nav-user-manage-off.DmNeSstQ.svg) 5px 50%/15px;
  background-repeat: no-repeat;
}
.main .contents-box .contents > .cont-tit > .location > ul li.maintenance {
  padding-left: 28px;
  background: url(/assets/nav-vehicle-mainte-off.QC7Ma1U6.svg) 5px 50%/15px;
  background-repeat: no-repeat;
}
.main .contents-box .contents > .cont-tit > .location > ul li.vehicle {
  padding-left: 28px;
  background: url(/assets/nav-vehicle-manager-off.C29xNuy3.svg) 5px 50%/15px;
  background-repeat: no-repeat;
}
.main .contents-box .contents > .cont-tit > .location > ul li.gptService {
  padding-left: 28px;
  background: url(/assets/icon_gpt_manage_n.UqfS5uMo.svg) 5px 50%/15px;
  background-repeat: no-repeat;
}
.main .contents-box .contents > .cont-tit > .location > ul li.administrator {
  padding-left: 28px;
  background: url(/assets/security_icon_administrator_n.D-GTKWh8.svg) 5px 50%/15px;
  background-repeat: no-repeat;
}
.main .contents-box .contents .cont-tit > .inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
}
.main .contents-box .contents > .cont-tit h2 {
  display: flex;
  align-items: center;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  letter-spacing: 0.3px;
  font-weight: 800;
}
@media (max-width: 766px) {
  .main .contents-box .contents > .cont-tit h2 {
    height: 28px;
    padding-left: 6px;
    font-size: 15px;
  }
}
.main .contents-box .contents > .cont-tit h2 > .dot {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  border-radius: 24px;
  font-size: 12px;
  margin-left: 5px;
}
.main .contents-box .contents > .cont-tit p {
  font-size: 13px;
  color: #5F5F5F;
}
@media (max-width: 766px) {
  .main .contents-box .contents > .cont-tit p {
    font-size: 12px;
  }
}
.main .contents-box .contents > .cont-scroll {
  width: 100%;
  height: calc(100% - 61px);
  padding: 0 6px 10px 14px;
  margin-top: 10px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}
@media (max-width: 1199px) {
  .main .contents-box .contents > .cont-scroll {
    padding: 0 10px;
  }
}
.main .contents-box .contents > .cont-scroll .cont-info {
  font-size: 12px;
}
.main .contents-box .contents .cont-sub-tit {
  position: relative;
  padding-left: 14px;
  font-size: 16px;
  font-weight: 800;
  padding-bottom: 20px;
}
.main .contents-box .contents .cont-sub-tit::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 2px;
  width: 5px;
  height: 14px;
  background-color: #333;
}

.search-option {
  position: relative;
  width: 100%;
  height: auto;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: #F2F2F2;
  border: 1px solid #dddddd;
}
.search-option.pa16 {
  padding: 16px;
}
@media (max-width: 766px) {
  .search-option {
    padding: 12px;
    padding-bottom: 50px !important;
  }
}
@media (max-width: 1199px) {
  .search-option {
    padding-bottom: 70px;
  }
}
.search-option:last-child .group {
  display: flex;
}
.search-option .clearfix:last-child {
  margin-bottom: 0;
}
.search-option .clearfix:last-child .option {
  margin-bottom: 0;
}
@media (max-width: 766px) {
  .search-option .clearfix:last-child .option {
    margin-bottom: 10px;
  }
}
@media (max-width: 1199px) {
  .search-option .option.item-p0 > li.period {
    padding: 0;
  }
}
.search-option .option.long > .tit {
  min-width: 130px;
}
.search-option .option.long > .item {
  width: calc(100% - 140px);
}
.search-option .option > li {
  text-align: center;
}
.search-option > .btn-box {
  position: absolute;
  right: 20px;
  bottom: 17px;
}
@media (max-width: 766px) {
  .search-option > .btn-box {
    position: unset;
  }
}
.search-option > .btn-box .btn, .search-option > .btn-box .reset {
  float: right;
  margin-left: 10px;
}
@media (max-width: 1199px) {
  .search-option > .btn-box .btn, .search-option > .btn-box .reset {
    margin-top: 10px;
  }
}
@media (max-width: 766px) {
  .search-option .reset {
    margin-left: 0;
  }
}
@media (max-width: 766px) {
  .search-option .btn {
    width: calc(100% - 113px);
  }
}

.option {
  position: relative;
  float: left;
  padding-right: 14px;
  min-height: 30px;
  margin-bottom: 10px;
}
@media (max-width: 1199px) {
  .option {
    width: 50%;
    box-sizing: border-box;
    padding-right: 0;
  }
  .option.unit li.period {
    padding-left: 0;
  }
}
@media (max-width: 766px) {
  .option {
    width: 100%;
  }
}
.option > li {
  float: left;
  height: 30px;
}
.option > li.tit {
  min-width: 42px;
  padding-right: 10px;
  font-size: 13px;
  font-weight: 800;
  line-height: 30px;
  text-align: center;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .option > li.tit {
    min-width: 74px;
  }
}
.option > li.item {
  height: 30px;
  line-height: 30px;
}
@media (max-width: 1199px) {
  .option > li.item {
    width: calc(100% - 74px);
    max-width: 360px;
    text-align: left;
  }
}
.option > li.item > input, .option > li.item select, .option > li.item .option {
  height: 100%;
}
@media (max-width: 1199px) {
  .option > li.item > input, .option > li.item select, .option > li.item .option {
    width: 100% !important;
    max-width: unset;
  }
}
.option > li.period {
  display: grid;
  grid-template-columns: 1fr 20px 1fr;
  padding-left: 10px;
}
@media (max-width: 1199px) {
  .option > li.period {
    padding-left: 74px;
  }
}
@media (max-width: 1199px) {
  .option > li.period.unit {
    display: grid;
    grid-template-columns: 1fr 20px 1fr;
    padding-left: 0;
  }
  .option > li.period.unit > span > input {
    width: 100%;
    min-width: unset;
    max-width: unset;
    height: 100%;
  }
}
.option > li.period > .place {
  min-width: unset;
  background: #fff url(/assets/calendar-days.sS07Yc9R.svg) no-repeat 95%/14px;
}
.option > li.period > span.dash {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 100%;
}
.option > li.period > span.dash::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 1px;
  background-color: #222;
}
@media (max-width: 1199px) {
  .option > li.period > span.dash::after {
    width: 4px;
  }
}
.option > li.period > input[type=text] {
  width: 120px;
}
.option > li.period > input {
  padding-right: 26px;
}
.option > li.period > em {
  padding: 0 5px 0 5px;
  font-size: 13px;
  font-weight: 700;
}

.message-tit {
  height: 20px;
  font-size: 13px;
  font-weight: 800;
}

.message {
  display: flex;
  width: 100%;
  height: auto;
  padding: 10px 20px;
  box-sizing: border-box;
  margin-top: 10px;
  background-color: #fffadb;
  border-radius: 6px;
  font-size: 13px;
}
.message.board {
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border-radius: 6px;
  font-size: 13px;
  background-color: unset;
  padding: unset;
  margin: unset;
}
.message.gray {
  background-color: #F2F2F2;
}
.message > .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.message > .txt {
  display: inline-block;
  width: calc(100% - 30px);
}
.message.progress > .icon {
  background: url(/assets/clock.NOzXQp-g.svg) no-repeat 50%/20px;
}
.message.error > .icon {
  background: url(/assets/circle-exclamation.D2ZqTSiF.svg) no-repeat 50%/20px;
}
.message.complete > .icon {
  background: url(/assets/mge-positive.DlK5xBhZ.svg) no-repeat 50%/18px;
}
.message.waiting > .icon {
  background: url(/assets/state-stand.Dh4xGsWN.svg) no-repeat 50%/18px;
}
.message.error > .txt {
  color: #7a7a7a;
}
.message.situation {
  padding: 20px;
  align-items: center;
  justify-content: center;
}
@media (max-width: 766px) {
  .message.situation {
    flex-direction: column;
  }
}
.message.situation .group:nth-child(1) {
  width: 330px;
  text-align: center;
}
.message.situation .group:nth-child(2) {
  width: 280px;
  text-align: right;
}
@media (max-width: 766px) {
  .message.situation .group:nth-child(2) {
    width: auto;
  }
}
.message.situation .group > button {
  margin-right: 6px;
}
.message.situation .group > .box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-direction: column;
}
.message.situation .group > .box.on .inner {
  display: flex;
  margin-top: 10px;
}
.message.situation .group > .box.on .inner > .figure {
  width: 130px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #2BAD26;
  border-radius: 6px;
  background-color: #fff;
}
.message.situation .group > .box.on .inner > .arrow {
  width: 80px;
  height: 30px;
  background: url(/assets/situation-on.2-KVtRR0.svg) no-repeat 50%/50%;
}
.message.situation .group > .box.on .inner > .txt {
  width: auto;
  height: 30px;
  line-height: 30px;
  padding-left: 24px;
  box-sizing: border-box;
  font-size: 13px;
  background: url(/assets/mge-positive.DlK5xBhZ.svg) no-repeat 0% 50%/18px;
}
.message.situation .group > .box.off .inner {
  display: flex;
  margin-top: 10px;
}
.message.situation .group > .box.off .inner > .figure {
  width: 100px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #FFB43C;
  border-radius: 6px;
  background-color: #fff;
}
.message.situation .group > .box.off .inner > .arrow {
  width: 80px;
  height: 30px;
  background: url(/assets/situation-off.DNa_sE4G.svg) no-repeat 50%/50%;
}
.message.situation .group > .box.off .inner > .txt {
  width: auto;
  height: 30px;
  line-height: 30px;
  padding-left: 24px;
  box-sizing: border-box;
  font-size: 13px;
  background: url(/assets/circle-exclamation-oo.BZY8r_Dy.svg) no-repeat 0% 50%/18px;
}

.board {
  margin: 10px 0;
  overflow-x: auto;
}
.board:has(div.option-list) {
  overflow: unset;
}
.board > .Dtc {
  border: 1px solid #cbcbcb;
  border-radius: 0 0 5px 5px;
}
.board > .Dtc > .tbody {
  border-right: 0;
  border-left: 0;
  border-bottom: 0;
}
.board > .Dtc > .tbody > li:last-child > .layout > li {
  border-bottom: 0;
}
@media (max-width: 1199px) {
  .board.dtc-resize-XS .thead {
    width: 100%;
    min-width: 500px;
  }
  .board.dtc-resize-XS .Dtc {
    width: 100%;
    min-width: 500px;
  }
  .board.dtc-resize-XS > .tbody {
    width: 100%;
    min-width: 500px;
  }
}
@media (max-width: 1199px) {
  .board.dtc-resize-S .thead {
    width: 100%;
    min-width: 760px;
  }
  .board.dtc-resize-S .Dtc {
    width: 100%;
    min-width: 760px;
  }
  .board.dtc-resize-S > .tbody {
    width: 100%;
    min-width: 760px;
  }
}
@media (max-width: 1199px) {
  .board.dtc-resize-M .thead {
    width: 100%;
    min-width: 1120px;
  }
  .board.dtc-resize-M .Dtc {
    width: 100%;
    min-width: 1120px;
  }
  .board.dtc-resize-M > .tbody {
    width: 100%;
    min-width: 1120px;
  }
}
@media (max-width: 1199px) {
  .board.dtc-resize-L .thead {
    width: 100%;
    min-width: 1200px;
  }
  .board.dtc-resize-L .Dtc {
    width: 100%;
    min-width: 1200px;
  }
  .board.dtc-resize-L .tbody {
    width: 100%;
    min-width: 1200px;
  }
}
@media (max-width: 1199px) {
  .board.dtc-resize-XL .thead {
    width: 100%;
    min-width: 1500px;
  }
  .board.dtc-resize-XL .Dtc {
    width: 100%;
    min-width: 1500px;
  }
  .board.dtc-resize-XL > .tbody {
    width: 100%;
    min-width: 1500px;
  }
}
@media (max-width: 1199px) {
  .board.resize-XS .thead {
    width: 100%;
    min-width: 500px;
  }
  .board.resize-XS .tbody {
    width: 100%;
    min-width: 500px;
  }
}
@media (max-width: 1199px) {
  .board.resize-S .thead {
    width: 100%;
    min-width: 760px;
  }
  .board.resize-S .tbody {
    width: 100%;
    min-width: 760px;
  }
}
@media (max-width: 1199px) {
  .board.resize-M .thead {
    width: 100%;
    min-width: 1120px;
  }
  .board.resize-M .tbody {
    width: 100%;
    min-width: 1120px;
  }
}
@media (max-width: 1199px) {
  .board.resize-L .thead {
    width: 100%;
    min-width: 1200px;
  }
  .board.resize-L .tbody {
    width: 100%;
    min-width: 1200px;
  }
}
@media (max-width: 1199px) {
  .board.resize-XL .thead {
    width: 100%;
    min-width: 1500px;
  }
  .board.resize-XL .tbody {
    width: 100%;
    min-width: 1500px;
  }
}
@media (max-width: 1199px) {
  .board {
    position: relative;
  }
}
.board.gary-ver .thead {
  background-color: #F2F2F2 !important;
  color: #333;
}
.board.gray-ver .thead {
  background-color: #F2F2F2 !important;
  color: #333;
}
.board.cursor .tbody > li {
  cursor: pointer;
}
.board.cursor .tbody > li:hover {
  background-color: #f7f7f7;
}
.board.board-line > ul.thead > li {
  border-right: 1px solid #dddddd;
}
.board.board-line > ul.thead > li:last-child {
  border-right: 0;
}
.board.board-line > ul.tbody > li > ul li {
  border-right: 1px solid #dddddd;
}
.board.board-line > ul.tbody > li > ul li:last-child {
  border-right: 0;
}
.board .board-tit {
  height: 30px;
  font-size: 13px;
  font-weight: 800;
}
.board > .vertical {
  display: flex;
}
@media (max-width: 766px) {
  .board > .vertical {
    display: unset;
  }
}
.board > .vertical.w30 > li {
  width: 33.33% !important;
}
.board > .vertical.w30.thead-group {
  border-bottom: 1px solid #dddddd;
}
.board > .vertical.w30.thead-group > .thead:nth-child(1) {
  border-radius: 5px 0 0 0;
}
.board > .vertical.w30.thead-group > .thead:nth-child(2) {
  border-radius: 0;
}
.board > .vertical.w30.thead-group > .thead:nth-child(3) {
  border-radius: 0 5px 0 0;
}
.board > .vertical:first-child .thead {
  border-radius: 5px 5px 0 0;
}
@media (max-width: 766px) {
  .board > .vertical:first-child .thead {
    padding-top: 5px;
    border-radius: 5px;
  }
}
.board > .vertical:last-child .thead {
  border-radius: 0 0 5px 5px;
}
@media (max-width: 766px) {
  .board > .vertical:last-child .thead {
    padding-bottom: 5px;
    border-radius: 5px;
  }
}
.board > .vertical > .thead {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  min-height: 40px;
  padding: 10px 5px;
  box-sizing: border-box;
  border-radius: 0;
  text-align: center;
  word-break: keep-all;
}
@media (max-width: 1199px) {
  .board > .vertical > .thead {
    min-width: unset;
    max-width: unset;
  }
}
@media (max-width: 766px) {
  .board > .vertical > .thead {
    display: block;
    width: 100%;
    padding: 5px 10px 5px 10px;
    min-height: unset;
    text-align: left;
    border-left: 6px solid #333;
    background-color: #f1f1f1;
    color: #333;
    font-weight: 700;
    border-radius: 5px;
  }
}
.board > .vertical > .thead.one {
  border-radius: 5px;
}
.board > .vertical > .thead > .line-tit {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
}
.board > .vertical > .tbody {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - 130px) !important;
  min-height: 40px;
  padding: 5px;
  margin-left: 5px;
  box-sizing: border-box;
  word-break: break-all;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 1px solid #dddddd;
  border-radius: 0;
}
.board > .vertical > .tbody.gauge {
  padding-top: 22px;
}
.board > .vertical > .tbody.hover-none:hover > li {
  background-color: #f7f7f7;
}
.board > .vertical > .tbody.hover-none:hover > li > .layout > li {
  background-color: #f7f7f7;
}
.board > .vertical > .tbody > .value:hover li {
  background-color: unset;
}
.board > .vertical > .tbody > .value .value-list > li {
  float: left;
  height: 30px;
  line-height: 30px;
}
.board > .vertical > .tbody > .value .value-list > li > span.tit {
  font-weight: 800;
  color: #ff7f00;
}
.board > .vertical > .tbody > .value .value-list > li > span.cont {
  padding: 0 6px;
}
@media (max-width: 1199px) {
  .board > .vertical > .tbody {
    min-width: unset;
    max-width: unset;
  }
  .board > .vertical > .tbody.column-unset {
    flex-direction: unset !important;
  }
}
.board > .vertical > .tbody > li:last-child > .layout {
  border-bottom: 0;
}
@media (max-width: 1199px) {
  .board > .vertical > .tbody.vertical-flex {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 766px) {
  .board > .vertical > .tbody {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    border: 0;
    margin: 5px 0 5px 0;
  }
}
@media (max-width: 1199px) {
  .board > .vertical > .tbody.chklist-half-te {
    display: unset;
  }
  .board > .vertical > .tbody.chklist-half-te > label {
    width: 40%;
    float: left;
  }
}
@media (max-width: 766px) {
  .board > .vertical > .tbody.chklist-half-te {
    display: flex;
  }
  .board > .vertical > .tbody.chklist-half-te > label {
    width: unset;
    float: unset;
  }
}
@media (max-width: 766px) {
  .board > .vertical > .tbody.flex-unset {
    flex-direction: unset;
    align-items: unset;
  }
}
.board > .vertical > .tbody.selectBox.popup > .select-ul-box {
  width: 100% !important;
  max-width: 430px;
}
.board > .vertical > .tbody.selectBox.popup > .select-ul-box > span {
  width: 100% !important;
  margin-bottom: 0;
}
.board > .vertical > .tbody.selectBox.popup > .select-ul-box > .option-list > .inner > .tree {
  width: 100%;
}
.board > .vertical > .tbody.selectBox > .select-ul-box {
  width: 100% !important;
  max-width: 430px;
}
.board > .vertical > .tbody.selectBox > .select-ul-box > span {
  width: 100% !important;
  margin-bottom: 0;
}
.board > .vertical > .tbody.selectBox > .select-ul-box > .option-list > .inner > .tree {
  width: 100%;
}
.board > .vertical > .tbody .option {
  width: 100%;
  margin-bottom: 0;
}
.board > .vertical > .tbody .option > .item {
  width: 100% !important;
  padding-left: 0;
}
.board > .vertical > .tbody .option > .item.period {
  max-width: 360px;
}
.board > .vertical > .tbody .option > .item.period > input {
  width: 100%;
}
.board > .vertical > .tbody .option:hover {
  background-color: unset;
}
.board > .vertical > .tbody .option:hover > li {
  background-color: unset;
}
.board > .vertical > .tbody select {
  height: 30px;
}
.board > .vertical > .tbody.end {
  align-items: flex-end;
  flex-direction: unset;
}
@media (max-width: 766px) {
  .board > .vertical > .tbody.end.img-flex {
    flex-direction: column;
  }
}
.board > .vertical > .tbody .layout p.no-datd {
  text-align: center;
  color: #7a7a7a;
  font-size: 12px;
  line-height: 40px;
}
.board > .vertical > .tbody .input-tit-box {
  display: flex;
  margin-top: 5px;
  margin-right: 5px;
}
.board > .vertical > .tbody .input-tit-box .input-tit {
  display: block;
  width: 30px;
  line-height: 30px;
  font-weight: 800;
  margin-left: 10px;
}
.board > .vertical > .tbody .input-tit-box .input-tit:nth-child(1) {
  margin-left: 0;
}
@media (max-width: 766px) {
  .board > .vertical > .tbody .input-tit-box .input-tit {
    margin-left: 0;
  }
}
.board > .vertical > .tbody .input-tit-box input {
  width: calc(100% - 30px);
  min-width: unset;
  max-width: unset;
  height: 30px;
  border: 2px solid #6f6f6f;
  background-color: #fff;
}
@media (max-width: 766px) {
  .board > .vertical > .tbody .input-tit-box input input[type=number]::-webkit-outer-spin-button,
  .board > .vertical > .tbody .input-tit-box input input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}
.board > .vertical > .tbody > .txtinput {
  width: 100%;
  min-width: unset;
  max-width: unset;
  min-height: 30px;
  border: 2px solid #6f6f6f;
  background-color: #fff;
  border-radius: 6px;
  outline: 0;
  padding: 5px 10px;
  box-sizing: border-box;
}
.board > .vertical > .tbody > .txtinput::placeholder {
  font-size: 13px;
  color: #cecece;
  letter-spacing: 0.3px;
  font-weight: 500;
}
.board > .vertical > .tbody input {
  width: 100%;
  min-width: unset;
  max-width: unset;
  height: 30px;
  border: 2px solid #6f6f6f;
  background-color: #fff;
}
.board > .vertical > .tbody .option .item input {
  height: 30px;
  border: 2px solid #6f6f6f;
  background-color: #fff;
}
.board > .vertical > .tbody > .chk-list {
  padding-top: 0;
}
.board > .vertical > .tbody > .chk-list:hover li {
  background-color: unset;
}
.board .layout {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #dbdbdb;
}
.board .layout.border:nth-last-child(2) > li {
  border-bottom: 0 !important;
}
.board .layout.border-b:last-child > li {
  border-bottom: 0 !important;
}
.board .layout.thead {
  border-bottom: 0;
}
.board .layout.footer {
  background: #ededed;
}
.board .layout.footer > .border-L {
  border-left: 1px solid #d9d9d9;
}
.board .layout.border li:nth-child(1) {
  border: 0;
}
.board .layout.border li:nth-child(2) {
  border-bottom: 1px solid #d9d9d9;
  border-left: 1px solid #d9d9d9;
}
.board .layout.border li {
  border-bottom: 1px solid #d9d9d9;
}
.board .layout.border.footer li:nth-child(1) {
  border-top: 1px solid #d9d9d9;
}
.board .layout.border-b li {
  border-bottom: 1px solid #d9d9d9;
}
@media (max-width: 1199px) {
  .board .layout.v_mobile > li > p {
    padding: 9px 0 !important;
  }
  .board .layout.v_mobile > li > p.dot-box > .dot {
    min-width: 20px;
    height: 20px;
    line-height: 20px;
  }
}
@media (max-width: 1199px) {
  .board .layout.v_mobile {
    display: block;
    min-height: 40px;
  }
}
.board .layout > li {
  display: table-cell;
  text-align: center;
  line-height: 40px;
  padding: 0 4px;
  box-sizing: border-box;
}
.board .layout > li.img {
  width: 240px;
}
.board .layout > li.value {
  display: flex;
  justify-content: space-around;
}
.board .layout > li.gauge {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
}
.board .layout > li.gauge > p {
  height: 16px;
  padding: 2px 5px 0 5px;
  color: #fff;
  text-align: right;
  letter-spacing: 0.5px;
}
.board .layout > li > p {
  word-break: break-all;
  line-height: 1.5;
  padding-bottom: 10px;
}
.board .layout > li > p.dot-box {
  position: unset !important;
  padding-left: 0 !important;
  display: inline-flex !important;
}
.board .layout > li > p > .red {
  font-weight: 800;
}
.board .layout > li > input {
  width: 100%;
  min-width: unset;
  max-width: unset;
  height: 30px;
  border: 2px solid #CE2315;
  background-color: #fcf6f6;
}
.board .layout > li > select {
  width: 100%;
  min-width: unset;
  max-width: unset;
  height: 30px;
  border: 2px solid #CE2315;
  background-color: #fcf6f6;
}
.board .layout.imgver > li {
  line-height: 100px;
}
.board .layout p.no-datd {
  text-align: center;
  color: #7a7a7a;
  font-size: 12px;
  line-height: 40px;
}
.board.sub {
  margin-top: 0;
  padding-bottom: 0;
}
.board.sub > .thead {
  border-radius: 6px !important;
  background-color: #ebebeb;
  border-bottom: 0 !important;
  color: #333;
  font-weight: 700;
  word-break: keep-all;
}
.board.sub > .tbody {
  border: 0;
}
.board.sub > .tbody p {
  padding-bottom: 0;
}
.board.sub .layout {
  height: 32px;
}
.board.sub .layout > li {
  line-height: 32px;
}
.board .thead {
  letter-spacing: 0.3px;
  border-radius: 5px 5px 0 0;
  background-color: #535353;
  color: #fff;
  word-break: keep-all;
}
@media (max-width: 1199px) {
  .board .thead {
    z-index: 10;
    position: sticky;
    top: 0;
    width: 100%;
  }
}
@media (max-width: 1199px) {
  .board .thead.v_mobile {
    float: left;
    width: 100px;
    height: auto;
    border-radius: 5px 0 0 5px;
    border-bottom: 2px solid #535353;
  }
  .board .thead.v_mobile > li {
    line-height: 40px;
  }
}
.board .thead.layout > .item.sub > p {
  line-height: 1 !important;
}
.board .thead > li > ul.order {
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all;
}
.board .thead > li > ul.order li {
  line-height: normal;
}
.board .thead > li > ul.order li > .order-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 10px;
  margin-left: 5px;
}
.board .thead > li > ul.order li > .order-btn > .asc {
  display: inline-block;
  border: 6px solid transparent;
  border-bottom-color: #fff;
  margin-left: 0;
  margin-bottom: 2px;
  cursor: pointer;
}
.board .thead > li > ul.order li > .order-btn > .asc.on {
  border: 6px solid transparent;
  border-bottom-color: #CE2315;
}
.board .thead > li > ul.order li > .order-btn > .desc {
  display: inline-block;
  border: 6px solid transparent;
  border-top-color: #fff;
  margin-left: 0;
  margin-top: 2px;
  cursor: pointer;
}
.board .thead > li > ul.order li > .order-btn > .desc.on {
  border: 6px solid transparent;
  border-top-color: #CE2315;
}
.board .thead > li.sub .none {
  opacity: 0;
  padding-bottom: 5px;
}
.board .thead > li > ul.sub {
  border-top: 1px solid #ffffff;
}
.board .thead > li > ul.sub.type3 > li {
  width: 33.33%;
}
.board .thead > li > ul.sub.type3 > li:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 1px;
  height: 14px;
  background-color: #ffffff;
}
.board .thead > li > ul.sub.expend > li {
  text-align: right;
}
.board .thead > li > ul.sub.expend > li::before {
  content: "▼" !important;
  z-index: 100;
  position: absolute;
  top: 20px;
  right: 5px;
  width: 14px;
  height: 14px;
  color: #ff6161;
  font-size: 12px;
}
.board .thead > li > ul.sub.expend > li:last-child::before {
  content: "▼" !important;
  display: none;
}
.board .thead > li > ul.sub.expend > li::after {
  content: "";
  display: none;
}
.board .thead > li > ul.sub.expend > li:nth-child(1) {
  width: 4%;
}
.board .thead > li > ul.sub.expend > li:nth-child(2) {
  width: 70%;
}
.board .thead > li > ul.sub.expend > li:nth-child(3) {
  width: 10%;
}
.board .thead > li > ul.sub.expend > li:nth-child(4) {
  width: 20%;
}
.board .thead > li > ul.sub.expend > li > .standard {
  position: absolute;
  right: -44px;
  width: 50px;
  text-align: left;
  color: #333;
  font-size: 11px;
  z-index: 100;
}
.board .thead > li > ul.sub.expend > li > .standard li {
  height: 60px;
  line-height: 29px;
}
.board .thead > li > ul.sub.expend li > span {
  position: absolute;
  top: 50px;
  right: 10px;
  width: 1px;
  height: 100vh;
  border-left: 1px dashed #060606;
  z-index: 100;
}
.board .thead > li > ul.sub > li {
  position: relative;
  float: left;
  width: 50%;
  box-sizing: border-box;
}
.board .thead > li > ul.sub > li:first-child::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 1px;
  height: 14px;
  background-color: #ffffff;
}
.board .tbody.layout {
  border-bottom: 1px solid #dddddd;
}
@media (max-width: 1199px) {
  .board .tbody.v_mobile {
    float: left;
    width: calc(100% - 100px);
    height: auto;
    background-color: #fff;
    text-align: center;
    border-radius: 0 5px 5px 0 !important;
  }
}
.board .tbody li:last-child .layout {
  border-bottom: 0;
}
.board .tbody {
  position: relative;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
  border: 1px solid #cbcbcb;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .board .tbody {
    width: 100%;
  }
}
.board .tbody:has(div.popup-wrap) {
  min-height: 100px;
}
.board .tbody:has(div.popup-wrap) > li > .confail {
  height: 160px;
  line-height: 160px;
  border-bottom: 0;
}
.board .tbody.selectBox {
  overflow: unset;
}
.board .tbody.selectBox:nth-child(even) li {
  background-color: unset;
}
.board .tbody.selectBox :hover li {
  background-color: unset;
}
.board .tbody.selectBox :nth-child(even):hover li {
  background-color: unset;
}
.board .tbody.selectBox :nth-child(even) li {
  background-color: unset;
}
.board .tbody.selectBox > .select-ul-box > .option {
  line-height: 29px !important;
}
.board .tbody.selectBox > .select-ul-box > .option-list .search-box button {
  top: 1px;
}
.board .tbody.selectBox > .select-ul-box > .option-list .inner .tree li:hover {
  background-color: unset;
}
.board .tbody :hover li {
  background-color: #ffedea;
}
.board .tbody :hover li.remoteHistory {
  background-color: #fff;
}
.board .tbody :nth-child(even):hover li {
  background-color: #ffedea;
}
.board .tbody :nth-child(even) li {
  background-color: #f7f7f7;
}
.board .tbody :hover .thead li {
  background-color: unset;
}
.board .tbody:has(p.confail) {
  width: 100%;
  min-width: unset;
}
.board .tbody.hover-none:hover > li {
  background-color: #f7f7f7;
}
.board .tbody.hover-none:hover > li > .layout > li {
  background-color: #f7f7f7;
}
.board .tbody > li {
  background-color: rgba(255, 255, 255, 0.768627451);
}
@media (max-width: 1199px) {
  .board .tbody > li > p.confail {
    text-align: center;
  }
}
.board .tbody > li:hover {
  background-color: #ffedea;
}
.board .tbody > li.cursor {
  cursor: pointer;
}
.board .tbody > li.cursor:hover {
  background-color: #ffedea;
}
.board .tbody > li.on {
  background-color: #d6ffdb;
}
.board .thead-bg {
  font-weight: 800;
  background-color: #535353 !important;
}
.board .backslash {
  background-image: linear-gradient(to left bottom, transparent calc(50% - 1px), #dddddd, transparent calc(50% + 1px));
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 5px 0 0 0;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
.board .backslash > sub {
  margin-right: 30px;
}
.board .backslash > sub, .board .backslash sup {
  font-size: 13px;
}
.board .slash, .board .backslash {
  text-align: left;
}
.board .slash div, .board .backslash div {
  text-align: right;
}
.board .num {
  width: 50px;
}
.board .num > label {
  padding-left: 0;
}
.board .num02 {
  width: 60px;
}
.board .num03 {
  width: 180px;
}
.board .num04 {
  width: 200px;
}
.board .min-itemA {
  width: 300px;
}
@media (max-width: 1199px) {
  .board .min-itemA {
    width: 150px;
  }
}
@media (max-width: 1199px) {
  .board .min-itemB {
    width: 200px;
  }
}
.board .item {
  position: unset !important;
  float: unset !important;
  min-height: unset !important;
  margin-bottom: unset !important;
  width: 100px !important;
}
.board .item.detailInfo > .state {
  background-color: rgba(255, 249, 226, 0.9882352941);
  border: 1px solid rgba(233, 205, 100, 0.9882352941);
  color: #efbe00;
  font-weight: 600;
}
.board .item > button.btn-test {
  margin-bottom: 7px;
}
.board .itemA {
  width: 150px;
}
.board .itemB {
  width: 260px;
}
@media (max-width: 1199px) {
  .board .itemB-tablet {
    width: 260px;
  }
}
@media (max-width: 766px) {
  .board .itemB-tablet {
    width: unset;
  }
}
.board .itemC {
  width: 300px;
}
.board .text {
  width: 660px;
}
.board .color {
  width: 50px;
}
.board .color.fill {
  font-size: 20px;
}
.board .left {
  text-align: left !important;
}
.board .service-btn {
  display: inline-block;
  width: 20px;
  height: 30px;
  background: url(/assets/clipboard-red.Bhs1scAt.svg) no-repeat 50%/16px;
}
.board .detail-btn {
  display: inline-block;
  width: 20px;
  height: 30px;
  background: url(/assets/magnifying-red.COXApTsI.svg) no-repeat 50%/16px;
}
.board .favorite-btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.board .favorite-btn.on {
  background-image: url(/assets/star-on.CdWKs1dn.png);
}
.board .favorite-btn.off {
  background-image: url(/assets/star-off.CdCZYP7h.png);
}
.board .thead .img {
  height: 40px;
}
.board .img-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
}
@media (max-width: 766px) {
  .board .img-box {
    width: 100% !important;
  }
}
.board .img-box.ex-img > .img {
  height: auto;
  min-height: 100px;
}
.board .img-box.ex-img > .img > img {
  position: unset;
  max-height: unset;
}
.board .img {
  position: relative;
  min-width: 160px;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
}
.board .img::before {
  content: "";
  display: block;
}
.board .img > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  box-sizing: border-box;
  margin: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}
.board .file-txt-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 8px;
  width: 100%;
  height: 30px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  margin-top: 5px;
}
.board .file-txt-box > span {
  width: calc(100% - 15px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  text-align: left;
}

.no-deta {
  text-align: center;
  padding: 5px;
  min-height: 30px;
  line-height: 30px;
}

.message-layout {
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #797878;
}

.timeline-box .no-data {
  text-align: center;
  color: #929292;
  padding: 10px 0;
}
.timeline-box .timeline-list {
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.9411764706);
}
.timeline-box .timeline-list:last-child {
  border-bottom: 0;
}
.timeline-box .timeline-list:nth-child(even) .txt {
  background-color: #fff5da;
}
.timeline-box .timeline-list:nth-child(odd) .txt {
  background-color: #f3f3f3;
}
.timeline-box .timeline-list .timeline {
  display: flex;
}
.timeline-box .timeline-list .timeline:last-child .state-list > .sub::before {
  display: none;
}
.timeline-box .timeline-list .timeline:first-child .fold-btn {
  background: url(/assets/angle-down.CQMZNVYA.svg) no-repeat 50%;
}
.timeline-box .timeline-list .timeline:first-child .fold-btn.on {
  background: url(/assets/angle-up-red.BlwMeuJ1.svg) no-repeat 50%;
}
.timeline-box .timeline-list .timeline.dowm {
  align-items: center;
  background-color: #F2F2F2;
  border-radius: 6px;
  margin-bottom: 6px;
}
.timeline-box .timeline-list .timeline.dowm > .txt {
  width: calc(100% - 110px);
  margin-bottom: 0;
}
.timeline-box .timeline-list .timeline .btn-gray {
  margin-right: 7px;
}
.timeline-box .timeline-list .timeline .state-list {
  display: flex;
  width: 160px;
  padding-right: 5px;
  flex-direction: column;
  align-items: flex-start;
  font-size: 13px;
  font-weight: 800;
}
.timeline-box .timeline-list .timeline .state-list > .span {
  font-weight: 800;
}
@media (max-width: 766px) {
  .timeline-box .timeline-list .timeline .state-list {
    width: 110px;
    padding-left: 0;
  }
}
.timeline-box .timeline-list .timeline .state-list .dot {
  position: relative;
  padding: 5px 10px 5px 15px !important;
  text-align: left;
  background-color: unset;
  color: #222;
  letter-spacing: 0.3px;
}
.timeline-box .timeline-list .timeline .state-list .dot.warning::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background-color: #ef4023;
}
.timeline-box .timeline-list .timeline .state-list .dot.proceeding::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background-color: #2762D1;
}
.timeline-box .timeline-list .timeline .state-list .dot.waiting::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background-color: #fda52c;
}
.timeline-box .timeline-list .timeline .state-list .dot.complete::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background-color: #2cd185;
}
.timeline-box .timeline-list .timeline .state-list .dot.failure::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background-color: #5F5F5F;
}
.timeline-box .timeline-list .timeline .state-list .sub {
  position: relative;
  height: calc(100% - 20px);
  padding-left: 17px;
  font-weight: 600;
  color: #797878;
  padding-bottom: 20px;
  text-align: left;
}
.timeline-box .timeline-list .timeline .state-list .sub > ul > li {
  word-break: keep-all;
}
@media (max-width: 766px) {
  .timeline-box .timeline-list .timeline .state-list .sub {
    padding-left: 11px;
    padding-right: 5px;
  }
}
.timeline-box .timeline-list .timeline .state-list .sub::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #c7c7c7;
  top: -6px;
  left: 5px;
}
.timeline-box .timeline-list .timeline .txt {
  position: relative;
  width: calc(100% - 210px);
  padding: 10px 16px;
  margin-bottom: 10px;
  border-radius: 6px;
}
@media (max-width: 766px) {
  .timeline-box .timeline-list .timeline .txt {
    width: calc(100% - 115px);
    padding: 10px 6px;
    box-sizing: border-box;
  }
}
.timeline-box .timeline-list .timeline .txt > .top {
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
}
.timeline-box .timeline-list .timeline .txt > .top .dete {
  text-align: right;
  font-size: 13px;
  color: #797878;
}
.timeline-box .timeline-list .timeline .txt > .dete {
  text-align: right;
  font-size: 13px;
  color: #797878;
}
@media (max-width: 766px) {
  .timeline-box .timeline-list .timeline .txt > .dete {
    padding-top: 25px;
    padding-left: 8px;
    text-align: left;
  }
}
.timeline-box .timeline-list .timeline .txt > .tit {
  position: relative;
  padding-left: 20px;
  font-weight: 800;
  text-align: left;
}
.timeline-box .timeline-list .timeline .txt > .tit::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 7px;
  width: 5px;
  height: 5px;
  background-color: #5F5F5F;
}
.timeline-box .timeline-list .timeline .txt > .tit > .cont {
  width: 100%;
  font-weight: 600;
}
.timeline-box .timeline-list .timeline .txt > .tit > .cont.w20 > li {
  width: 20%;
}
.timeline-box .timeline-list .timeline .txt > .tit > .cont > li {
  position: relative;
  float: left;
  padding-left: 20px;
  margin-left: 5px;
}
.timeline-box .timeline-list .timeline .txt > .tit > .cont > li::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 7px;
  width: 6px;
  height: 2px;
  background-color: #5F5F5F;
}
.timeline-box .timeline-list .timeline .txt > .cont {
  position: relative;
  padding-left: 20px;
  text-align: left;
}
.timeline-box .timeline-list .timeline .txt > .cont::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 7px;
  width: 5px;
  height: 5px;
  background-color: #5F5F5F;
}
.timeline-box .timeline-list .timeline .txt > .stick {
  position: absolute;
  top: 33px;
  right: 20px;
  min-width: 30px;
  padding: 2px 5px;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  border-radius: 6px;
}
.timeline-box .timeline-list .timeline .txt > .stick.complete {
  color: #2BAD26;
  background: #e1ffe1;
}
.timeline-box .timeline-list .timeline .txt > .stick.waiting {
  color: #FFB43C;
  background: #FFF6E8;
}
.timeline-box .timeline-list .timeline .txt > .stick.proceeding {
  color: #2762D1;
  background: #E8F0FF;
}
.timeline-box .timeline-list .timeline .txt > .stick.failure {
  color: #5F5F5F;
  background: #E0E0E0;
}
.timeline-box .timeline-list .timeline .txt > .stick .warning {
  color: #d12727;
  background: #ffe8e8;
}
@media (max-width: 766px) {
  .timeline-box .timeline-list .timeline .txt > .stick {
    top: 6px;
    left: 7px;
    right: unset;
  }
}
.timeline-box .timeline-list .timeline .fold-btn {
  width: 23px;
  height: 40px;
}
.timeline-box .timeline-list .fold-cont > .timeline > .fold-btn {
  background: none;
}

.model-list {
  width: 100%;
}
.model-list > li {
  float: left;
  padding: 2px 5px;
  border-radius: 5px;
  background-color: #F2F2F2;
  margin: 2px 5px 2px 0;
}

.dot-box {
  display: flex;
  justify-content: center;
  padding-bottom: 0 !important;
}
.dot-box > .dot {
  min-width: 24px;
  height: 24px;
  border-radius: 24px;
  text-align: center;
  font-size: 13px;
  line-height: 24px;
  color: #fff;
  margin-right: 5px;
}

.refer {
  font-size: 12px;
  color: #7a7a7a;
  padding: 5px;
}

.page-box {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 0;
}
.page-box .page-nation {
  display: inline-block;
}
.page-box .page-nation a {
  display: block;
  margin: 0 3px;
  float: left;
  width: 28px;
  height: 28px;
  line-height: 27px;
  text-align: center;
  background-color: #f8f8f8;
  font-size: 13px;
  color: #999999;
  text-decoration: none;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
}
.page-box .page-nation a.active {
  background-color: #CE2315;
  color: #fff;
}
.page-box .page-nation a:hover {
  background-color: #CE2315;
  color: #fff;
}
.page-box .page-nation a .none {
  display: none;
}
.page-box .page-nation .pprev {
  background: #f8f8f8 url(/assets/arrow-left_left.BDxUBDHP.png) no-repeat center center;
  margin-left: 0;
}
.page-box .page-nation .prev {
  background: #f8f8f8 url(/assets/arrow-left.64wSLYHO.png) no-repeat center center;
  margin-right: 7px;
}
.page-box .page-nation .next {
  background: #f8f8f8 url(/assets/arrow-right.B8fKxVR2.png) no-repeat center center;
  margin-left: 7px;
}
.page-box .page-nation .nnext {
  background: #f8f8f8 url(/assets/arrow-right_right.BIrh_uaS.png) no-repeat center center;
  margin-right: 0;
}

.accordion-wrap {
  margin-top: 20px;
}
.accordion-wrap .que {
  position: relative;
  padding: 20px 0 20px 30px;
  cursor: pointer;
  font-weight: 800;
  color: #CE2315;
  background-color: #f7f7f7;
  border-top: 2px solid #CE2315;
  border-right: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  margin-top: 20px;
}
.accordion-wrap .que::before {
  display: inline-block;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5px;
  width: 10px;
  height: 10px;
  background-color: #CE2315;
  margin: 0 5px;
}
.accordion-wrap .que.on {
  background-color: #f7f7f7;
}
.accordion-wrap .que.on::before {
  background-color: #CE2315;
}
.accordion-wrap .que.on > span {
  font-weight: 800;
  color: #CE2315;
}
.accordion-wrap .que > .arrow-wrap {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translate(0, -50%);
}
.accordion-wrap .que > .arrow-wrap > .arrow-top {
  display: block;
  width: 20px;
  height: 20px;
  background: url(/assets/angle-up-red.BlwMeuJ1.svg) no-repeat 50%/14px;
}
.accordion-wrap .que > .arrow-wrap > .arrow-bottom {
  display: block;
  width: 20px;
  height: 20px;
  background: url(/assets/angle-down-red.BsGI6t2F.svg) no-repeat 50%/14px;
}
.accordion-wrap .que.on .arrow-bottom {
  display: none;
}
.accordion-wrap .que.on .arrow-top {
  display: block;
}
.accordion-wrap .anw {
  display: none;
  overflow: hidden;
  padding: 20px;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .accordion-wrap .anw {
    padding: 20px 10px;
  }
}
@media (max-width: 1199px) {
  .accordion-wrap .anw > .btn-opt {
    display: unset;
  }
  .accordion-wrap .anw > .btn-opt li.tit {
    padding-left: 5px;
    box-sizing: border-box;
  }
}
.accordion-wrap .anw .board > .thead {
  width: 100%;
}
.accordion-wrap .anw .board > .tbody {
  width: 100%;
}
.accordion-wrap .anw .anw-tit {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px 10px 10px 20px;
  box-sizing: border-box;
  font-weight: 800;
}
@media (max-width: 1199px) {
  .accordion-wrap .anw .anw-tit {
    flex-direction: column;
  }
  .accordion-wrap .anw .anw-tit > .paly-box {
    justify-content: flex-end;
  }
}
.accordion-wrap .anw .anw-tit::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 10px;
  width: 5px;
  height: 14px;
  background-color: #333;
}
.accordion-wrap .anw .anw-tit .icon {
  display: inline-block;
  width: 20px;
  height: 14px;
  background: url(/assets/help.BfEMSoHR.svg) no-repeat 50%/14px;
}
.accordion-wrap .anw .anw-tit .tip-box {
  z-index: 10;
  display: none;
  position: absolute;
  top: 44px;
  min-width: 460px;
  height: auto;
  padding: 10px 20px;
  background: #F2F2F2;
  border-radius: 6px;
  font-weight: 600;
}
.accordion-wrap .anw .anw-tit .tit-hover:hover .tip-box {
  display: block;
}
.accordion-wrap .anw .anw-tit .tip-block {
  min-width: 320px;
  padding: 10px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 13px;
  margin-top: 10px;
  background-color: #fff8f7;
  border: 5px solid #ff9c93;
  border-style: double;
}
@media (max-width: 766px) {
  .accordion-wrap .anw .anw-tit .tip-block {
    min-width: unset;
  }
}
.accordion-wrap .anw .paly-box {
  display: flex;
}
.accordion-wrap .anw .paly-box button, .accordion-wrap .anw .paly-box ul {
  margin-left: 5px;
}
.accordion-wrap .anw .paly-box .paly-opt > button {
  height: 30px;
}
.accordion-wrap .anw .tab-cont {
  display: none;
}

.layout-box {
  margin-bottom: 10px;
}
.layout-box.ecu {
  display: flex;
  max-height: 500px;
}
.layout-box.ecu .layout:nth-child(2) > .board {
  height: 100%;
}
.layout-box.ecu .layout:nth-child(2) > .board > .graph-box {
  height: calc(100% - 70px);
  border-radius: 5px;
}
.layout-box.ecu-n02 {
  display: flex;
  max-height: 500px;
}
.layout-box.ecu-n02 .layout:nth-child(2) > .board {
  height: 100%;
}
.layout-box.ecu-n02 .layout:nth-child(2) > .board > .graph-box {
  height: calc(100% - 47px);
  border-radius: 5px;
}
@media (max-width: 1199px) {
  .layout-box.ecu-n02 {
    display: unset;
    max-height: unset;
  }
}
@media (max-width: 1199px) {
  .layout-box.ecu {
    display: unset;
    max-height: unset;
  }
}
.layout-box.flex {
  display: flex;
}
.layout-box.afterService li.num03 {
  width: 200px !important;
}
.layout-box.afterService > .layout {
  float: unset;
  max-width: 1200px;
  margin: auto;
}
.layout-box.afterService > .layout > .layout-group {
  width: 50%;
  float: left;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .layout-box.afterService > .layout > .layout-group {
    width: 100%;
  }
}
.layout-box.afterService > .layout > .layout-group:nth-child(1) {
  padding-right: 10px;
}
@media (max-width: 1199px) {
  .layout-box.afterService > .layout > .layout-group:nth-child(1) {
    padding-right: 0;
  }
}
.layout-box.afterService > .layout > .layout-group:nth-child(2) {
  padding-left: 10px;
}
@media (max-width: 1199px) {
  .layout-box.afterService > .layout > .layout-group:nth-child(2) {
    padding-left: 0;
  }
}
.layout-box.afterService > .layout > .layout-group .clearfix {
  padding-left: 32px;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .layout-box.afterService > .layout {
    padding: 0 25px;
  }
}
@media (max-width: 766px) {
  .layout-box.afterService > .layout {
    flex-direction: column;
    padding: 0 5px;
  }
}
.layout-box.afterService > .layout > .list-box > .clearfix {
  float: left;
  width: 50%;
  padding-left: 32px;
  box-sizing: border-box;
}
@media (max-width: 766px) {
  .layout-box.afterService > .layout > .list-box {
    width: 100%;
  }
}
.layout-box .board-tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
  font-weight: 800;
  min-height: 40px;
  box-sizing: border-box;
}
.layout-box .board-half {
  width: 100%;
  height: 100%;
}
.layout-box .board-half > .half {
  width: 50%;
  height: 100%;
  border: 0;
  float: left;
  box-sizing: border-box;
}
.layout-box .board-half > .half:first-child {
  padding-right: 5px;
}
.layout-box .board-half > .half:last-child {
  padding-left: 5px;
}
.layout-box .board-half > .half > .inner {
  height: calc(100% - 30px);
  min-height: 240px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  overflow: hidden;
  box-sizing: border-box;
}
.layout-box .board-half > .half > .inner.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
@media (max-width: 766px) {
  .layout-box .board-half > .half {
    width: 100%;
  }
  .layout-box .board-half > .half:first-child {
    padding-right: 0px;
  }
  .layout-box .board-half > .half:last-child {
    padding-top: 5px;
    padding-left: 0px;
  }
}
.layout-box > .layout {
  float: left;
  width: 50%;
  padding: 0 10px;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .layout-box > .layout {
    width: 100% !important;
  }
}
@media (max-width: 766px) {
  .layout-box > .layout {
    padding: 0;
  }
}
.layout-box > .layout.colorboard > .list-box > .board {
  float: left;
}
.layout-box > .layout.colorboard > .list-box > .board > .thead {
  border-radius: 5px 0 0 0;
}
.layout-box > .layout.colorboard > .list-box > .board > .tbody {
  border-radius: 0 0 0 5px;
}
.layout-box > .layout.colorboard > .list-box > .board.color > .tbody {
  border-radius: 0 0 5px 0;
}
.layout-box > .layout.colorboard > .list-box > .board.color > .tbody .layout > .color.fill > p {
  padding-top: 10px;
  font-size: 13.5px;
}
.layout-box > .layout.colorboard > .list-box > .board.color > .thead {
  border-radius: 0 5px 0 0;
  background-color: #fff;
  box-sizing: border-box;
  word-break: keep-all;
}
.layout-box > .layout.colorboard > .list-box > .board.color > .thead > li {
  padding: 0;
  overflow: hidden;
}
.layout-box > .layout.colorboard > .list-box > .board.color > .thead > li:first-child li {
  border-radius: 0 5px 0 0;
}
.layout-box > .layout.colorboard > .list-box > .board.color > .thead > li p {
  padding-top: 10px;
  font-size: 13.56px;
}
.layout-box > .layout.colorboard > .list-box > .board:nth-child(2) {
  width: calc(100% - 50px);
}
.layout-box > .layout.colorboard > .list-box > .board:last-child {
  width: 50px;
}
.layout-box > .layout.mini {
  padding-left: 10px;
}
.layout-box > .layout.mini > .list-box .item-tit {
  width: 100px;
}
.layout-box > .layout.mini > .list-box .item {
  width: calc(100% - 100px);
  word-break: break-all;
}
.layout-box > .layout.block {
  width: 100%;
}
.layout-box > .layout.w70 {
  float: left;
  width: 66.67%;
  padding: 0 10px;
  box-sizing: border-box;
}
.layout-box > .layout.w60 {
  float: left;
  width: 60%;
  padding: 0 10px;
  box-sizing: border-box;
}
.layout-box > .layout.w40 {
  display: flex;
  float: left;
  width: 40%;
  padding: 0 10px;
  box-sizing: border-box;
}
.layout-box > .layout.w30 {
  display: flex;
  float: left;
  width: 33.33%;
  max-width: 520px;
  padding: 0 10px;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .layout-box > .layout.w30 {
    max-width: unset;
  }
}
.layout-box > .layout.w25 {
  float: left;
  width: 25%;
  max-width: 390px;
  padding: 0 10px;
  box-sizing: border-box;
}
.layout-box > .layout > .message {
  margin-bottom: 20px;
}
.layout-box .layout-info {
  display: flex;
  width: 100%;
  height: 300px;
  background-color: #F2F2F2;
  border-radius: 6px;
}
@media (max-width: 766px) {
  .layout-box .layout-info {
    flex-direction: column;
    height: auto;
  }
  .layout-box .layout-info > .img {
    width: 100% !important;
    height: 220px;
  }
  .layout-box .layout-info > .cont {
    width: 100%;
  }
}
.layout-box .layout-info.operation > .img::before {
  padding-top: 0 !important;
}
.layout-box .layout-info.reversal {
  height: auto;
}
@media (max-width: 1199px) {
  .layout-box .layout-info.reversal {
    flex-direction: column;
  }
  .layout-box .layout-info.reversal > .img {
    width: 100% !important;
    height: 220px;
  }
  .layout-box .layout-info.reversal > .cont {
    width: 100% !important;
  }
}
.layout-box .layout-info.reversal .img {
  width: 30%;
}
.layout-box .layout-info.reversal .img::before {
  content: "";
  display: block;
  padding-top: 35.89%;
}
.layout-box .layout-info.reversal .img img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 100%;
}
.layout-box .layout-info.reversal > .cont {
  display: block;
  width: 70%;
  border: 6px solid rgba(240, 240, 240, 0.9411764706);
  border-radius: 10px;
  background-color: #fff;
}
.layout-box .layout-info.reversal > .cont .board {
  float: left;
  width: 50%;
  padding: 0;
}
@media (max-width: 766px) {
  .layout-box .layout-info.reversal > .cont .board {
    width: 100%;
  }
}
@media (max-width: 1199px) {
  .layout-box .layout-info.reversal > .cont .board > .v_mobile > li {
    display: block;
  }
}
.layout-box .layout-info > .img {
  position: relative;
  width: calc(100% - 600px);
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .layout-box .layout-info > .img {
    width: calc(100% - 400px);
  }
}
.layout-box .layout-info > .img.trick > img {
  max-height: 100%;
  padding: 10px;
}
.layout-box .layout-info > .img::before {
  content: "";
  display: block;
}
.layout-box .layout-info > .img .trick-img {
  position: absolute;
  top: 50%;
  left: 50%;
  right: 0;
  bottom: 0;
  margin: auto;
  transform: translate(-50%, -50%);
}
.layout-box .layout-info > .img .trick-img img {
  width: 100%;
  max-width: auto;
  max-height: 100%;
}
.layout-box .layout-info > .img > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px;
  box-sizing: border-box;
  margin: auto;
  max-width: 100%;
  height: auto;
}
.layout-box .layout-info > .cont {
  display: flex;
  align-items: flex-end;
  width: 600px;
  padding: 10px;
  box-sizing: border-box;
}
@media (max-width: 766px) {
  .layout-box .layout-info > .cont {
    width: 100% !important;
  }
  .layout-box .layout-info > .cont > .device-box li > ul > li.tit {
    width: 54px !important;
  }
  .layout-box .layout-info > .cont > .device-box li > ul > li.cont {
    width: calc(100% - 54px) !important;
  }
}
.layout-box .layout-info > .cont > .list-box {
  padding-left: 20px;
}
.layout-box .layout-info > .cont > .device-box {
  width: 100%;
  min-height: 100px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.9411764706);
}
.layout-box .layout-info > .cont > .device-box > li {
  float: left;
  width: 50%;
  height: 50%;
  box-sizing: border-box;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
}
.layout-box .layout-info > .cont > .device-box > li:nth-child(3), .layout-box .layout-info > .cont > .device-box > li:nth-child(4) {
  border-bottom: 0 !important;
}
@media (max-width: 766px) {
  .layout-box .layout-info > .cont > .device-box > li {
    width: 100%;
    border: 0;
  }
  .layout-box .layout-info > .cont > .device-box > li > .inner {
    padding: 5px !important;
  }
}
.layout-box .layout-info > .cont > .device-box > li > .inner {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.layout-box .layout-info > .cont > .device-box > li > .inner > .tit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 100%;
  padding: 10px 0;
  box-sizing: border-box;
  font-weight: 800;
  background-color: #ebebeb;
  border-radius: 5px;
  font-size: 13px;
}
.layout-box .layout-info > .cont > .device-box > li > .inner > .cont {
  display: flex;
  align-items: center;
  width: calc(100% - 60px);
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.download-box {
  padding: 10px;
}
.download-box > .tit {
  position: relative;
  padding-left: 16px;
  font-weight: 800;
}
.download-box > .tit::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2px;
  width: 5px;
  height: 5px;
  background-color: #CE2315;
}
.download-box > .list {
  padding: 5px 5px 10px 20px;
}
.download-box > .list > li {
  display: flex;
  align-items: center;
  width: 100%;
  height: 30px;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid #dddddd;
  border-radius: 6px;
  margin-top: 5px;
}
.download-box > .list > li > .file-icon {
  width: 30px;
  height: 30px;
  background: url(/assets/file-off.a2XNa4Rt.svg) no-repeat 50%/12px;
}
.download-box > .list > li > .name {
  width: calc(100% - 60px);
  line-height: 30px;
  cursor: pointer;
  font-size: 13px;
}
.download-box > .list > li > .x-icon {
  width: 30px;
  height: 30px;
  background: url(/assets/xmark.CeLGuvCB.svg) no-repeat 50%/12px;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #dddddd;
  margin: 40px 0;
}
.line.h20 {
  margin: 20px 0;
}

.box-tit {
  padding-left: 5px;
  font-weight: 800;
  margin-bottom: 5px;
}

.graph-box {
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px solid #dddddd;
  border-radius: 10px;
  box-sizing: border-box;
}
.graph-box::before {
  content: "";
  display: block;
}
.graph-box > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.list-box {
  width: 100%;
  margin-bottom: 20px;
}
.list-box.min .item-tit {
  width: 130px;
  padding: 0 20px;
}
.list-box.min .item {
  width: calc(100% - 130px);
}
.list-box .list-tit {
  display: inline-block;
  padding: 5px 10px;
  margin-bottom: 16px;
  background-color: #FFE7E5;
  border-radius: 10px;
  color: #CE2315;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 13px;
}
.list-box .list-tit.ver02 {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
  margin-top: 30px;
  margin-bottom: 0;
  background-color: unset;
  border-radius: 10px;
  color: #CE2315;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 13px;
}
.list-box .list-tit.ver02::after {
  content: "";
  position: absolute;
  top: 46%;
  left: -6px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #CE2315;
}
.list-box .list-tit.none {
  height: 30px;
  background-color: unset;
  padding: 0;
}
@media (max-width: 766px) {
  .list-box .list-tit.none {
    height: auto;
  }
}
.list-box .item-tit {
  position: relative;
  float: left;
  width: 200px;
  min-height: 30px;
  padding: 0 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  line-height: 30px;
  background: #F2F2F2;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
}
.list-box .item-tit.none {
  height: 30px;
  background-color: unset;
}
.list-box .item-tit > .test-chk {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -26px;
  width: 20px;
  height: 20px;
  background: url(/assets/state-driving.BFUDNFMp.svg) no-repeat 50%/20px;
}
.list-box .item {
  position: relative;
  float: left;
  width: calc(100% - 200px);
  min-height: 30px;
  padding: 0 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  line-height: 30px;
  font-size: 13px;
}
.list-box .item > .state {
  height: 18px;
  line-height: 18px;
}
.list-box .item > input.conttxt {
  width: 100%;
  height: 32px;
  max-width: unset;
  padding-right: 30px;
  box-sizing: border-box;
}
.list-box .item > .btn-delete {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 18px;
  width: 16px;
  height: 16px;
  background: url(/assets/circle-xmark.D55k26Iq.svg) no-repeat 50%/100%;
}
.list-box .item.input > input, .list-box .item.input .progress-bar, .list-box .item.input span.txt {
  float: left;
  width: calc(100% - 115px);
  max-width: unset;
  min-height: 30px;
  padding: 0 10px;
  margin-right: 10px;
  box-sizing: border-box;
  word-break: break-all;
}
.list-box .item > .message {
  align-items: center;
  padding: 0 10px;
}
.list-box.boardver {
  padding-bottom: 10px;
}
.list-box.boardver.w30 {
  float: left;
  width: 33.33%;
  min-width: 490px;
  padding-right: 10px;
  box-sizing: border-box;
}
.list-box.boardver.w30 .item {
  border-top: 1px solid #dddddd;
}
.list-box.boardver.w25 {
  float: left;
  width: 256px;
  padding-right: 10px;
  box-sizing: border-box;
}
.list-box.boardver.w25 .item {
  border-top: 1px solid #dddddd;
}
.list-box.boardver .list-tit {
  width: 100%;
  color: #222;
  background-color: #fff;
  height: 30px;
  padding: 0;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 800;
}
.list-box.boardver > .w50 {
  float: left;
  width: 50%;
}
.list-box.boardver > .w50 > .item {
  border-top: 1px solid #dddddd;
}
.list-box.boardver > .w30 {
  float: left;
  width: 33.33%;
}
.list-box.boardver > .w30 > .item {
  border-top: 1px solid #dddddd;
}
.list-box.boardver .item-tit {
  width: 90px;
  height: 38px;
  line-height: 38px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border-radius: 10px;
  background-color: #FFE7E5;
}
.list-box.boardver .item {
  width: calc(100% - 100px);
  height: 38px;
  margin-bottom: 5px;
  line-height: 38px;
  border-bottom: 1px solid #dddddd;
}
.list-box.boardver .item::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #fffefb;
  border-radius: 10px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
}

.gauge {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
.gauge > p {
  height: 16px;
  padding: 2px 5px 2px 5px;
  margin-top: 8px;
  color: #fff;
  text-align: right;
  letter-spacing: 0.5px;
  line-height: 16px;
}
.gauge > .standard01 {
  position: absolute;
  top: 2px;
  right: 10%;
  color: #333;
  font-size: 13px;
  font-weight: 700;
}
.gauge > .standard02 {
  position: absolute;
  top: 2px;
  right: 0%;
  color: #333;
  font-size: 13px;
  font-weight: 700;
}

.test-box {
  width: 100%;
  height: auto;
  padding: 0 15px 10px 15px;
  box-sizing: border-box;
  background: #F2F2F2;
  border-radius: 6px;
}
@media (max-width: 766px) {
  .test-box {
    height: 100px;
    overflow: auto;
  }
}
@media (max-width: 1199px) {
  .test-box > .test-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
  }
  .test-box > .test-list.clearfix:before, .test-box > .test-list.clearfix:after {
    content: unset;
  }
}
@media (max-width: 766px) {
  .test-box > .test-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.test-box > .test-list > .item {
  float: left;
  padding: 5px 10px;
  margin: 10px 5px 0 5px;
  border: 1px solid #dddddd;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.test-box > .test-list > .item.on {
  border: 1px solid #CE2315;
}
.test-box > .test-list > .item > .state {
  display: unset;
  text-align: center;
  padding: 5px 10px !important;
  margin: 0 2px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 5px;
  letter-spacing: 0.5px;
}
.test-box > .test-list > .item > .state.complete {
  color: #2BAD26;
  background: #e1ffe1;
}
.test-box > .test-list > .item > .state.waiting {
  color: #FFB43C;
  background: #FFF6E8;
}
.test-box > .test-list > .item > .state.proceeding {
  color: #2762D1;
  background: #E8F0FF;
}
.test-box > .test-list > .item > .state.failure {
  color: #5F5F5F;
  background: #E0E0E0;
}
.test-box > .test-list > .item > .state.info {
  color: #5F5F5F;
  background: #E0E0E0;
}

.warning {
  color: #d12727;
  background: #ffe8e8;
}

.overhidden-Y {
  overflow-Y: hidden;
}

.chk-tab {
  display: flex;
  align-items: center;
  height: 30px;
  padding-right: 10px;
  box-sizing: border-box;
  border: 1px solid #cbcbcb;
  border-radius: 10px;
  font-size: 13px;
}
.chk-tab > li {
  position: relative;
  padding-right: 10px;
}
.chk-tab > li::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 1px;
  height: 14px;
  background: #c9c9c9;
}
.chk-tab > li:last-child {
  padding-right: 0;
}
.chk-tab > li:last-child::after {
  width: 0;
}
.chk-tab span {
  font-weight: 600;
}
.chk-tab input[type=checkbox]:checked + label > span {
  color: #CE2315;
}

.state {
  display: inline-block;
  min-width: 50px;
  padding: 5px 10px !important;
  margin: 0 2px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 5px;
  text-align: center;
  letter-spacing: 0.3px;
}
.state.complete {
  color: #2BAD26;
  background: #e1ffe1;
}
.state.waiting {
  color: #FFB43C;
  background: #FFF6E8;
}
.state.proceeding {
  color: #2762D1;
  background: #E8F0FF;
}
.state.failure {
  color: #5F5F5F;
  background: #E0E0E0;
}
.state.danger {
  color: #CE2315;
  background: #FFE7E5;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 30px;
  padding: 0 !important;
}
.progress-bar progress {
  width: 100%;
  height: 30px;
  appearance: none;
}
.progress-bar progress::-webkit-progress-bar {
  background: #f0f0f0;
  border-radius: 6px;
  box-shadow: inset 3px 3px 10px #d4d4d4;
}
.progress-bar progress::-webkit-progress-value {
  border-radius: 6px;
  background: -webkit-linear-gradient(to right, #c5f8d8, #35bb62);
  background: linear-gradient(to right, #c5f8d8, #35bb62);
}
.progress-bar > .gauge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 800;
  width: unset;
}

.popup-wrap {
  z-index: 900;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(34, 34, 34, 0.5294117647);
}
.popup-wrap > .popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 400px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}
.popup-wrap > .popup:has(div.option-list) {
  overflow: unset;
  max-height: 95%;
}
.popup-wrap > .popup:has(div.vc-container) {
  overflow: unset;
  max-height: 95%;
}
@media (max-width: 1199px) {
  .popup-wrap > .popup {
    width: 60%;
  }
}
@media (max-width: 766px) {
  .popup-wrap > .popup {
    width: 90% !important;
    min-width: unset;
    max-height: 90%;
  }
}
.popup-wrap > .popup > .cont > .layout > .board > .vertical > .tbody > .select-ul-box {
  width: 160px;
}
.popup-wrap > .popup > .cont > .layout > .board > .vertical > .tbody > .select-ul-box > .option-list > .inner > .tree {
  max-height: 170px;
}
.popup-wrap > .popup.long {
  width: 700px;
  height: auto;
  max-height: 90%;
}
@media (max-width: 766px) {
  .popup-wrap > .popup.long {
    width: 90%;
    min-width: unset;
  }
  .popup-wrap > .popup.long > .cont {
    height: calc(100% - 100px) !important;
    max-height: 470px !important;
  }
}
.popup-wrap > .popup.long > .cont {
  height: 709px;
}
.popup-wrap > .popup > .tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  background: #222021;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.3px;
  border-radius: 5px 5px 0 0;
}
.popup-wrap > .popup > .tit > .close {
  width: 20px !important;
  height: 20px !important;
  border-radius: 5px;
  background: #fff url(/assets/xmark.CeLGuvCB.svg) no-repeat 50%/12px;
}
.popup-wrap > .popup > .cont {
  width: 100%;
  max-height: 470px;
  min-height: 90px;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
}
.popup-wrap > .popup > .cont:has(div.option-list) {
  overflow: unset;
  max-height: unset;
  height: auto;
}
.popup-wrap > .popup > .cont:has(div.vc-pane-container) {
  overflow: unset;
  max-height: unset;
  height: auto;
}
@media (max-width: 766px) {
  .popup-wrap > .popup > .cont {
    height: calc(100% - 100px);
  }
}
.popup-wrap > .popup > .cont.cow {
  max-height: unset;
}
.popup-wrap > .popup > .cont > .tit {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  font-weight: 700;
}
.popup-wrap > .popup > .cont.text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.popup-wrap > .popup > .cont.text > .loading-container {
  top: unset;
  left: unset;
  transform: unset;
  margin: 20px 0 30px 0;
}
.popup-wrap > .popup > .cont.img {
  text-align: center;
}
.popup-wrap > .popup > .cont .progress-bar {
  height: 20px;
  margin-top: 5px;
}
.popup-wrap > .popup > .cont .progress-bar > progress {
  height: 20px;
}
.popup-wrap > .popup > .cont > .popup-user > .tab > div {
  width: 100px;
}
.popup-wrap > .popup > .cont .board {
  margin-bottom: 10px;
  overflow: unset;
}
@media (max-width: 766px) {
  .popup-wrap > .popup > .cont .board > .vertical .thead {
    display: block;
    width: 100%;
    min-height: unset;
    padding: 5px 10px 5px 10px;
    text-align: left;
    word-break: keep-all;
  }
}
.popup-wrap > .popup > .cont .board > .vertical .tbody {
  overflow: unset;
}
@media (max-width: 766px) {
  .popup-wrap > .popup > .cont .board > .vertical .tbody {
    width: 100% !important;
    margin-left: 0;
    margin-bottom: 10px;
    border: 0;
  }
}
.popup-wrap > .popup > .btn-box {
  position: relative;
  padding: 10px 0;
  margin: 0 10px;
  border-top: 1px solid #dddddd;
  text-align: center;
}
.popup-wrap > .popup > .btn-box > button {
  margin-left: 10px;
}
.popup-wrap > .popup > .btn-box > button:first-child {
  margin-left: 0;
}
.popup-wrap > .popup > .btn-box > a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}
.popup-wrap > .popup > .btn-box > a:hover {
  color: #CE2315;
}
.popup-wrap > .popup > .btn-box > a.page-btn {
  height: 30px;
  line-height: 30px;
  padding: 0px 20px 0px 10px;
  box-sizing: border-box;
  border-radius: 5px;
  color: #CE2315;
  border: 1px solid #CE2315;
  font-size: 12px;
}
.popup-wrap > .popup > .btn-box > a.page-btn:after {
  content: "";
  position: absolute;
  top: 46%;
  right: 8px;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%) rotate(135deg);
  margin-top: 2px;
  border-top: 2px solid #CE2315;
  border-left: 2px solid #CE2315;
}
.popup-wrap .bulk-upload .cont .tit {
  align-items: center;
  margin-bottom: 14px;
}
.popup-wrap .bulk-upload .list-box {
  margin-bottom: 0;
}
.popup-wrap .bulk-upload .file-box {
  width: 360px;
  display: flex;
  align-items: center;
}
.popup-wrap .bulk-upload .file-box .upload-name {
  display: inline-block;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  vertical-align: middle;
  border: 1px solid #dddddd;
  width: 91%;
  color: #999999;
}
.popup-wrap .bulk-upload .file-box label {
  width: 100px;
  height: 30px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #5F5F5F;
  background-color: #5F5F5F;
  color: #fff;
  margin-left: 4px;
}
.popup-wrap .bulk-upload .file-box input[type=file] {
  display: none;
}
.popup-wrap .bulk-upload .file-box .close-one {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.tab {
  display: flex;
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  background-color: rgba(240, 240, 240, 0.9411764706);
  font-size: 13px;
  border-bottom: 1px solid #cdcdcd;
  box-sizing: border-box;
}
.tab > div {
  width: 200px;
}
.tab.w100 > div {
  width: 100px;
}
.tab > div {
  position: relative;
  width: 50%;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
@media (max-width: 766px) {
  .tab > div {
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: keep-all;
    line-height: unset;
  }
}
.tab > div:hover {
  color: #393939;
  font-weight: 800;
  background-color: #e1e1e1;
}
.tab > div.on {
  color: #393939;
  font-weight: 800;
  background-color: #e1e1e1;
}
.tab > div > .dot {
  position: absolute;
  top: 6px;
  right: 4px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  border-radius: 24px;
  font-size: 12px;
}

.tab-cont {
  display: none;
}

.step-box {
  margin-top: 10px;
}
.step-box > div {
  float: left;
}
.step-box > .step {
  padding: 2px 5px;
  box-sizing: border-box;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 800;
}
.step-box > .step.num01 {
  color: #d12727;
  background-color: #ffe8e8;
}
.step-box > .step.num02 {
  color: #FFB43C;
  background: #FFF6E8;
}
.step-box > .step.num03 {
  color: #2762D1;
  background: #E8F0FF;
}
.step-box > .step.num04 {
  color: #2BAD26;
  background-color: #e1ffe1;
}
.step-box > .next {
  width: 10px;
  height: 24px;
  background: url(/assets/arrow-right.B8fKxVR2.png) no-repeat 50%/7px;
  margin: 0 5px;
}

.dash-box {
  width: 100%;
  max-height: 400px;
  margin-top: 10px;
  border-radius: 6px;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  overflow: hidden;
}
.dash-box > .map {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}
.dash-box > .map > .panel {
  position: absolute;
  top: 10px;
  right: -242px;
  transition: 0.5s ease;
  z-index: 2;
  width: 240px;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.dash-box > .map > .panel.on {
  right: 10px;
}
.dash-box > .map > .panel.on > .btn-fold::before {
  background-image: url(/assets/arrow-left.64wSLYHO.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 10px;
}
.dash-box > .map > .panel > .tit {
  display: flex;
  align-items: center;
  height: 30px;
  letter-spacing: 0.03px;
}
.dash-box > .map > .panel > .state {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
  letter-spacing: 0.03px;
}
.dash-box > .map > .panel > .state strong {
  font-size: 24px;
  padding-right: 5px;
}
.dash-box > .map > .panel .state-list {
  padding-top: 5px;
}
.dash-box > .map > .panel .state-list > li {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px 5px 30px;
  border-radius: 5px;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  margin-bottom: 5px;
  cursor: pointer;
}
.dash-box > .map > .panel .state-list > li strong {
  padding-right: 5px;
}
.dash-box > .map > .panel .state-list > li.all {
  background: rgba(240, 240, 240, 0.9411764706) url(/assets/state-all.6gJcCDob.svg) no-repeat 8px 50%/16px;
}
.dash-box > .map > .panel .state-list > li.all:hover {
  background: rgba(206, 255, 194, 0.9411764706) url(/assets/state-all.6gJcCDob.svg) no-repeat 8px 50%/16px;
  border: 1px solid #49e27c;
}
.dash-box > .map > .panel .state-list > li.all.on {
  background: rgba(206, 255, 194, 0.9411764706) url(/assets/state-all.6gJcCDob.svg) no-repeat 8px 50%/16px;
  border: 1px solid #49e27c;
}
.dash-box > .map > .panel .state-list > li.driving {
  background: rgba(240, 240, 240, 0.9411764706) url(/assets/state-driving.BFUDNFMp.svg) no-repeat 8px 50%/16px;
}
.dash-box > .map > .panel .state-list > li.driving:hover {
  background: rgba(206, 255, 194, 0.9411764706) url(/assets/state-driving.BFUDNFMp.svg) no-repeat 8px 50%/16px;
  border: 1px solid #49e27c;
}
.dash-box > .map > .panel .state-list > li.driving.on {
  background: rgba(206, 255, 194, 0.9411764706) url(/assets/state-driving.BFUDNFMp.svg) no-repeat 8px 50%/16px;
  border: 1px solid #49e27c;
}
.dash-box > .map > .panel .state-list > li.repair {
  background: rgba(240, 240, 240, 0.9411764706) url(/assets/state-repair.DUY_0pG8.svg) no-repeat 8px 50%/16px;
}
.dash-box > .map > .panel .state-list > li.repair:hover {
  background: rgba(206, 255, 194, 0.9411764706) url(/assets/state-repair.DUY_0pG8.svg) no-repeat 8px 50%/16px;
  border: 1px solid #49e27c;
}
.dash-box > .map > .panel .state-list > li.repair.on {
  background: rgba(206, 255, 194, 0.9411764706) url(/assets/state-repair.DUY_0pG8.svg) no-repeat 8px 50%/16px;
  border: 1px solid #49e27c;
}
.dash-box > .map > .panel .state-list > li.stand {
  background: rgba(240, 240, 240, 0.9411764706) url(/assets/state-stand.Dh4xGsWN.svg) no-repeat 8px 50%/16px;
}
.dash-box > .map > .panel .state-list > li.stand:hover {
  background: rgba(206, 255, 194, 0.9411764706) url(/assets/state-stand.Dh4xGsWN.svg) no-repeat 8px 50%/16px;
  border: 1px solid #49e27c;
}
.dash-box > .map > .panel .state-list > li.stand.on {
  background: rgba(206, 255, 194, 0.9411764706) url(/assets/state-stand.Dh4xGsWN.svg) no-repeat 8px 50%/16px;
  border: 1px solid #49e27c;
}
.dash-box > .map > .panel .btn-fold {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -23px;
  width: 24px;
  height: 48px;
  padding-left: 0;
  border: 1px solid #dddddd;
  border-right: 0;
  border-radius: 5px 0px 0px 5px;
  background-color: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.dash-box > .map > .panel .btn-fold::before {
  content: "";
  width: 100%;
  height: 100%;
  display: inline-block;
  background-image: url(/assets/arrow-right.B8fKxVR2.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 10px;
  transform: rotate(180deg);
  border: 0;
  background-color: unset;
}
.dash-box > .map .marker {
  position: relative;
}
.dash-box > .map .marker .marker-info-mini {
  position: absolute;
  padding: 10px;
  transition: 0.5s ease;
  box-sizing: border-box;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.dash-box > .map .marker .marker-info-mini::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  border-top: 10px solid #fff;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
}
.dash-box > .map .marker .marker-info-mini p {
  text-align: center;
}
.dash-box > .map .marker-pin {
  display: flex;
}
.dash-box > .map .marker-pin .drivng-pin {
  width: 50px;
  height: 50px;
  transition: 0.5s ease;
  background: url(/assets/marker-drivng2.qMFdBv2i.png) no-repeat 50%/50%;
  cursor: pointer;
}
.dash-box > .map .marker-pin .repair-pin {
  width: 50px;
  height: 50px;
  transition: 0.5s ease;
  background: url(/assets/marker-repair2.Bz2QgWTe.png) no-repeat 50%/50%;
  cursor: pointer;
}
.dash-box > .map .marker-pin .stand-pin {
  width: 50px;
  height: 50px;
  transition: 0.5s ease;
  background: url(/assets/marker-stand.ObTRaeN-.png) no-repeat 50%/50%;
  cursor: pointer;
}
.dash-box > .map .marker-info {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 300px;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  transition: 0.5s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
@media (max-width: 766px) {
  .dash-box > .map .marker-info {
    height: 90%;
  }
  .dash-box > .map .marker-info > .inner {
    flex-direction: column;
    overflow: auto;
  }
}
.dash-box > .map .marker-info.failure .inner {
  flex-direction: column;
}
.dash-box > .map .marker-info.failure .inner > .step-box {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(240, 240, 240, 0.9411764706);
}
.dash-box > .map .marker-info.failure .inner > .failure-msg-wrap {
  height: 154px;
  overflow: auto;
  padding-right: 5px;
  margin-top: 3px;
}
@media (max-width: 766px) {
  .dash-box > .map .marker-info.failure .inner > .failure-msg-wrap {
    height: auto;
  }
}
.dash-box > .map .marker-info > .tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 24px;
  font-size: 13px;
}
.dash-box > .map .marker-info > .tit > .close {
  width: 20px;
  height: 100%;
  background: url(/assets/xmark.CeLGuvCB.svg) no-repeat 50%/10px;
}
.dash-box > .map .marker-info > .tit > div > .close {
  width: 20px;
  height: 20px;
  background: url(/assets/xmark.CeLGuvCB.svg) no-repeat 50%/10px;
}
.dash-box > .map .marker-info > .inner {
  display: flex;
  height: calc(100% - 24px);
}
.dash-box > .map .marker-info > .inner > .trick {
  width: 180px;
}
@media (max-width: 766px) {
  .dash-box > .map .marker-info > .inner > .trick {
    width: 100%;
  }
}
.dash-box > .map .marker-info > .inner > .trick > a {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  font-weight: 800;
  padding-right: 16px;
  box-sizing: border-box;
  font-size: 18px;
  background: url(/assets/arrow-right.B8fKxVR2.png) no-repeat 100% 50%/8px;
}
.dash-box > .map .marker-info > .inner > .trick > .name {
  height: 20px;
  color: #5F5F5F;
}
.dash-box > .map .marker-info > .inner > .trick > .img {
  position: relative;
  width: 100%;
  height: calc(100% - 44px);
}
@media (max-width: 766px) {
  .dash-box > .map .marker-info > .inner > .trick > .img {
    width: 100%;
    height: 100px;
  }
}
.dash-box > .map .marker-info > .inner > .trick > .img > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 10px;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  box-sizing: border-box;
}
.dash-box > .map .marker-info > .inner > .trick > .img > img::before {
  content: "";
  display: block;
  padding-top: 75.6097%;
}
.dash-box > .map .marker-info > .inner > .info {
  width: 200px;
  margin-bottom: 0;
}
@media (max-width: 766px) {
  .dash-box > .map .marker-info > .inner > .info {
    width: 230px;
    margin-bottom: 5px;
  }
}
@media (max-width: 766px) {
  .dash-box > .map .marker-info > .inner > .info > dl {
    margin-bottom: 10px;
  }
}
.dash-box > .map .marker-info > .inner > .info > dl > dt {
  position: relative;
  padding-left: 12px;
  font-size: 12px;
  color: #5F5F5F;
}
.dash-box > .map .marker-info > .inner > .info > dl > dt::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2px;
  width: 5px;
  height: 5px;
  background-color: #CE2315;
}
.dash-box > .map .marker-info > .inner > .info > dl > dd {
  padding-left: 12px;
  font-size: 12px;
  letter-spacing: 0.03px;
}
.dash-box > .map .marker-info > .inner > .info .btn-box {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: calc(100% - 200px);
  margin-top: 2px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  background-color: #fff;
}
@media (max-width: 766px) {
  .dash-box > .map .marker-info > .inner > .info .btn-box {
    height: 50px;
  }
}
.dash-box > .map .marker-info > .inner > .info .btn-box > div {
  position: relative;
  width: 30%;
  height: 100%;
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 13px;
}
.dash-box > .map .marker-info > .inner > .info .btn-box > div:last-child::after {
  width: 0;
}
.dash-box > .map .marker-info > .inner > .info .btn-box > div::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 1px;
  height: 12px;
  background-color: #d2d2d2;
}
.dash-box > .map .marker-info > .inner > .info .btn-box > div > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  letter-spacing: 0.5px;
  font-weight: 700;
  font-size: 11px;
}
.dash-box > .map .marker-info > .inner > .info .btn-box > div > a > strong {
  font-size: 16px;
  color: #222;
}
.dash-box > .map .marker-info > .inner > .chart {
  width: 230px;
  padding-left: 5px;
  box-sizing: border-box;
}
@media (max-width: 766px) {
  .dash-box > .map .marker-info > .inner > .chart {
    padding-left: 0;
  }
}
.dash-box > .map .marker-info > .inner > .chart > .inner {
  height: 100%;
  padding: 5px;
  border-radius: 5px;
  box-sizing: border-box;
  background: #fbfbfb;
  border: 1px solid #e1e1e1;
}
.dash-box > .map .adr {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  transition: 0.5s ease;
  background-color: rgba(255, 255, 255, 0.7411764706);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 13px;
}
.dash-box > .map .adr > .close {
  width: 10px;
  height: 10px;
  margin-left: 10px;
  background: url(/assets/xmark.CeLGuvCB.svg) no-repeat 50%/10px;
}

.failure-msg {
  width: 310px;
  padding: 5px;
  margin-top: 5px;
  box-sizing: border-box;
  border: 1px solid #dddddd;
  border-radius: 6px;
  background-color: rgba(247, 247, 247, 0.9411764706);
}
.failure-msg > .tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.failure-msg > .tit > .txt {
  padding: 2px 5px;
  border: 1px solid #d12727;
  border-radius: 5px;
  color: #d12727;
  font-size: 12px;
  background-color: #fff;
}
.failure-msg > .tit > .date {
  font-size: 12px;
  color: #5F5F5F;
}
.failure-msg > .sub-tit {
  margin-top: 8px;
  font-size: 13px;
}
.failure-msg > .cont {
  font-size: 13px;
  color: #5F5F5F;
}

.tip-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 0 3px 4px;
  background: url(/assets/help-G.B0xR1IDC.svg) no-repeat 50%/100%;
  overflow: unset;
  cursor: pointer;
}
.tip-icon:hover .tip-box {
  display: block;
}
.tip-icon.info {
  background: url(/assets/circle-info.BfWNQ0O2.svg) no-repeat 50%/100%;
}
.tip-icon.info-white {
  background: url(/assets/circle-info-white.BbTMg0jV.svg) no-repeat 50%/100%;
}
.tip-icon.board .tip-box {
  top: 24px;
  left: -166px;
}
.tip-icon.board .tip-box > .tip-list dt {
  width: 80px;
  padding: 0 5px;
  box-sizing: border-box;
}
.tip-icon.board .tip-box > .tip-list dd {
  width: calc(100% - 80px);
  text-align: left;
}

.tip-box {
  z-index: 100;
  position: absolute;
  top: 18px;
  left: -53px;
  display: none;
  width: 186px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.7803921569);
  color: #fff;
  border-radius: 10px;
  box-shadow: 4px 12px 30px 6px rgba(0, 0, 0, 0.09);
  box-sizing: border-box;
}
.tip-box > .tip-list dt, .tip-box > .tip-list dd {
  float: left;
  font-size: 13px;
}
.tip-box > .tip-list dt {
  position: relative;
  width: 30px;
}
.tip-box > .tip-list dt > .dot {
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 5px;
}
.tip-box > .tip-list dd {
  width: calc(100% - 30px);
}

.dash-layout {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 10px;
}
.dash-layout > .box {
  min-height: 230px;
  transition: 0.5s ease;
}
.dash-layout > .box.side {
  width: 20%;
}
@media (max-width: 1199px) {
  .dash-layout > .box.side {
    width: 100%;
    margin-bottom: 10px;
  }
}
.dash-layout > .box.center {
  width: 60%;
  padding: 0 10px;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .dash-layout > .box.center {
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
  }
}
.dash-layout > .box.full {
  width: 100%;
}
.dash-layout > .box.full > .inner {
  min-height: 320px;
}
.dash-layout > .box.full > .inner > .state-chart {
  width: 100%;
  height: 100%;
}
.dash-layout > .box.full.organ {
  width: 40%;
}
@media (max-width: 1199px) {
  .dash-layout > .box.full.organ {
    width: 100%;
  }
  .dash-layout > .box.full.organ > .inner > .tit {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }
  .dash-layout > .box.full.organ > .inner > .tit > span {
    width: 100%;
  }
  .dash-layout > .box.full.organ > .inner > .tit .search-option {
    width: 100%;
    padding-bottom: 0 !important;
    margin-top: 10px;
  }
  .dash-layout > .box.full.organ > .inner > .tit .search-option > .search-box {
    width: calc(100% - 221px);
    margin: 0;
    margin-left: 5px;
  }
  .dash-layout > .box.full.organ > .inner > .tit .search-option > .search-box > input {
    max-width: unset;
    width: 100%;
  }
  .dash-layout > .box.full.organ > .inner > .tit .search-option > button.btn {
    float: left;
    width: 80px;
    margin-top: 0;
  }
  .dash-layout > .box.full.organ > .inner > .cont {
    height: calc(100% - 75px);
  }
  .dash-layout > .box.full.organ > .inner > .cont > .select-ul-box > .option-list {
    padding: 0;
  }
}
.dash-layout > .box.right {
  padding-left: 5px;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .dash-layout > .box.right {
    padding-left: 0;
  }
}
.dash-layout > .box.right.organ {
  width: 60%;
}
@media (max-width: 1199px) {
  .dash-layout > .box.right.organ {
    width: 100%;
  }
}
.dash-layout > .box.left {
  padding-right: 5px;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .dash-layout > .box.left {
    padding-right: 0;
  }
}
.dash-layout > .box.left.organ {
  width: 40%;
}
.dash-layout > .box.left.organ .btn-box {
  position: unset;
}
.dash-layout > .box.left.organ > .inner > .tit {
  flex-direction: column;
  align-items: flex-start;
  height: auto;
}
.dash-layout > .box.left.organ > .inner > .tit > span {
  width: 100%;
}
.dash-layout > .box.left.organ > .inner > .tit .search-option {
  width: 100%;
  margin-top: 10px;
  padding-bottom: 0 !important;
}
.dash-layout > .box.left.organ > .inner > .tit .search-option > .search-box {
  width: calc(100% - 210px);
}
.dash-layout > .box.left.organ > .inner > .tit .search-option > .search-box > input {
  max-width: unset;
  width: 100%;
}
.dash-layout > .box.left.organ > .inner > .tit .search-option > .btn-box {
  position: unset;
}
.dash-layout > .box.left.organ > .inner > .tit .search-option > .btn-box > button {
  float: left;
  margin-top: 0;
}
.dash-layout > .box.left.organ > .inner > .cont {
  height: calc(100% - 75px);
  padding: 5px 10px;
}
.dash-layout > .box.left.organ > .inner > .cont > .select-ul-box > .option-list {
  padding: 0;
}
@media (max-width: 1199px) {
  .dash-layout > .box.left.organ {
    width: 100%;
  }
}
@media (max-width: 766px) {
  .dash-layout > .box.left.organ {
    width: 100%;
  }
  .dash-layout > .box.left.organ > .inner > .tit {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }
  .dash-layout > .box.left.organ > .inner > .tit > span {
    width: 100%;
  }
  .dash-layout > .box.left.organ > .inner > .tit .search-option > .search-box {
    width: calc(100% - 120px);
    margin: 0;
  }
  .dash-layout > .box.left.organ > .inner > .tit .search-option > .search-box > input {
    max-width: unset;
    width: 100%;
  }
  .dash-layout > .box.left.organ > .inner > .tit .search-option > .btn-box > button {
    float: left;
    margin-top: 0;
  }
  .dash-layout > .box.left.organ > .inner > .cont {
    height: calc(100% - 75px);
  }
  .dash-layout > .box.left.organ > .inner > .cont > .select-ul-box > .option-list {
    padding: 0;
  }
}
.dash-layout > .box > .inner {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #dddddd;
}
.dash-layout > .box > .inner > .tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 33px;
  padding: 0 10px;
  margin-bottom: 5px;
  box-sizing: border-box;
  font-weight: 800;
  letter-spacing: 0.03px;
}
.dash-layout > .box > .inner > .tit.sub {
  font-weight: 600;
  font-size: 13px;
}
.dash-layout > .box > .inner > .tit > .close {
  width: 20px;
  height: 100%;
  background: url(/assets/xmark.CeLGuvCB.svg) no-repeat 50%/10px;
}
.dash-layout > .box > .inner > .tit > small {
  padding-top: 2px;
  padding-left: 2px;
  font-weight: 600;
}
.dash-layout > .box > .inner > .tit > .search-option {
  display: flex;
  align-items: center;
  width: auto;
  padding: 0;
  background-color: unset;
  border: 0;
}
.dash-layout > .box > .inner > .tit > .search-option > .search-box > input {
  height: 30px;
}
.dash-layout > .box > .inner > .tit > .search-option .search-box, .dash-layout > .box > .inner > .tit > .search-option .btn, .dash-layout > .box > .inner > .tit > .search-option .reset {
  margin-left: 5px;
}
.dash-layout > .box > .inner .select-ul-box {
  width: 100%;
  height: 100%;
}
.dash-layout > .box > .inner .select-ul-box > .option-list {
  position: unset;
  width: 100%;
  height: 100%;
  padding: 10px 0;
  box-shadow: unset;
  box-sizing: border-box;
}
.dash-layout > .box > .inner .select-ul-box > .option-list > .inner {
  width: 100%;
  height: 100%;
}
.dash-layout > .box > .inner .select-ul-box > .option-list > .inner > .tree {
  width: 100%;
  height: 100%;
}
.dash-layout > .box > .inner .select-ul-box > .option {
  width: 160px;
}
.dash-layout > .box > .inner > .cont {
  height: calc(100% - 33px);
  padding: 10px;
  box-sizing: border-box;
}
.dash-layout > .box > .inner > .cont.flex-wrap {
  display: flex;
  align-items: center;
}
@media (max-width: 1199px) {
  .dash-layout > .box > .inner > .cont.flex-wrap.tablet {
    flex-direction: column;
  }
}
@media (max-width: 766px) {
  .dash-layout > .box > .inner > .cont.flex-wrap {
    flex-direction: column;
  }
}
.dash-layout > .box > .inner > .cont .state-list li > .color-box {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin-right: 5px;
}
.dash-layout > .box > .inner > .cont .state-list li > .num > strong {
  padding-left: 10px;
  padding-right: 5px;
}
.dash-layout > .box > .inner > .cont .dash-chart {
  width: 50%;
  text-align: center;
}
@media (max-width: 766px) {
  .dash-layout > .box > .inner > .cont .dash-chart {
    width: 100%;
  }
  .dash-layout > .box > .inner > .cont .dash-chart > .state-list > li {
    margin-top: 5px;
    float: left;
    width: 50%;
  }
}
.dash-layout > .box > .inner > .cont > .board > .tbody {
  height: calc(100% - 70px);
  overflow: auto;
}
.dash-layout > .box > .inner > .cont > .chart {
  width: 100%;
  height: 240px;
}
.dash-layout > .box > .inner > .cont > .state {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 100%;
  font-size: 14px;
  background-color: #F2F2F2;
  border-radius: 10px;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .dash-layout > .box > .inner > .cont > .state {
    width: 130px;
  }
}
@media (max-width: 766px) {
  .dash-layout > .box > .inner > .cont > .state {
    width: 100%;
  }
}
.dash-layout > .box > .inner > .cont > .state > strong {
  font-size: 30px;
  margin-right: 3px;
}
.dash-layout > .box > .inner > .cont > .state-chart {
  width: calc(100% - 200px);
  height: 240px;
  padding: 10px;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .dash-layout > .box > .inner > .cont > .state-chart {
    width: calc(100% - 130px);
  }
}
@media (max-width: 766px) {
  .dash-layout > .box > .inner > .cont > .state-chart {
    width: 100%;
  }
}
.dash-layout > .box > .inner > .cont > .state-chart.full {
  width: 100%;
}
.dash-layout > .box > .inner > .cont > .trick {
  display: flex;
  width: 600px;
  height: 100%;
}
@media (max-width: 1199px) {
  .dash-layout > .box > .inner > .cont > .trick {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 766px) {
  .dash-layout > .box > .inner > .cont > .trick {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
  }
}
.dash-layout > .box > .inner > .cont > .trick > .trick-img {
  position: relative;
  width: 40%;
  height: 100%;
}
@media (max-width: 766px) {
  .dash-layout > .box > .inner > .cont > .trick > .trick-img {
    width: 100%;
    height: 150px;
  }
}
.dash-layout > .box > .inner > .cont > .trick > .trick-img > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 10px;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  box-sizing: border-box;
}
.dash-layout > .box > .inner > .cont > .trick > .trick-img > img::before {
  content: "";
  display: block;
  padding-top: 75.6097%;
}
.dash-layout > .box > .inner > .cont > .trick > .trick-info {
  width: 60%;
}
@media (max-width: 1199px) {
  .dash-layout > .box > .inner > .cont > .trick > .trick-info {
    width: 60%;
  }
}
@media (max-width: 766px) {
  .dash-layout > .box > .inner > .cont > .trick > .trick-info {
    width: 100%;
  }
}
.dash-layout > .box > .inner > .cont > .trick > .trick-info > .tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 1199px) {
  .dash-layout > .box > .inner > .cont > .trick > .trick-info > .tit {
    align-items: flex-start;
    flex-direction: column;
  }
}
.dash-layout > .box > .inner > .cont > .trick > .trick-info > .tit strong {
  font-size: 20px;
}
.dash-layout > .box > .inner > .cont > .trick > .trick-info > .info {
  height: calc(100% - 30px);
  padding: 10px;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: #F2F2F2;
}
@media (max-width: 1199px) {
  .dash-layout > .box > .inner > .cont > .trick > .trick-info > .info {
    height: calc(100% - 51px);
  }
}
.dash-layout > .box > .inner > .cont > .trick > .trick-info > .info > .tit {
  margin-bottom: 10px;
}
.dash-layout > .box > .inner > .cont > .trick > .trick-info > .info > .tit > strong, .dash-layout > .box > .inner > .cont > .trick > .trick-info > .info > .tit small {
  padding: 0 5px;
}
.dash-layout > .box > .inner > .cont > .trick > .trick-info > .info > dl {
  float: left;
  width: 50%;
  margin-bottom: 20px;
}
@media (max-width: 1199px) {
  .dash-layout > .box > .inner > .cont > .trick > .trick-info > .info > dl {
    width: 100%;
  }
}
@media (max-width: 766px) {
  .dash-layout > .box > .inner > .cont > .trick > .trick-info > .info > dl {
    width: 50%;
  }
}
.dash-layout > .box > .inner > .cont > .trick > .trick-info > .info > dl > dt {
  position: relative;
  padding-left: 12px;
  font-size: 12px;
  color: #5F5F5F;
}
.dash-layout > .box > .inner > .cont > .trick > .trick-info > .info > dl > dt::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2px;
  width: 5px;
  height: 5px;
  background-color: #CE2315;
}
.dash-layout > .box > .inner > .cont > .trick > .trick-info > .info > dl > dd {
  padding-left: 12px;
  font-size: 12px;
  letter-spacing: 0.03px;
}
.dash-layout > .box > .inner > .cont > .trick-chart {
  width: calc(100% - 600px);
  height: 240px;
  padding: 10px;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .dash-layout > .box > .inner > .cont > .trick-chart {
    width: 100%;
  }
}

.board-result {
  padding-left: 5px;
  margin-top: 10px;
  color: #5F5F5F;
  font-size: 13px;
}
.board-result.flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.board-result .btn-gray {
  margin-bottom: 0 !important;
}

/**로딩**/
@keyframes rotate-loading {
  0% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
@-moz-keyframes rotate-loading {
  0% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-loading {
  0% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes rotate-loading {
  0% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
@keyframes rotate-loading {
  0% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
@-moz-keyframes rotate-loading {
  0% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-loading {
  0% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes rotate-loading {
  0% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
@keyframes loading-text-opacity {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes loading-text-opacity {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes loading-text-opacity {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes loading-text-opacity {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.loading-container,
.loading {
  height: 100px;
  position: relative;
  width: 100px;
  border-radius: 100%;
}

.loading-container {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading {
  border: 2px solid transparent;
  border-color: transparent #CE2315 transparent #CE2315;
  -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
  -moz-transform-origin: 50% 50%;
  -o-animation: rotate-loading 1.5s linear 0s infinite normal;
  -o-transform-origin: 50% 50%;
  -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
  -webkit-transform-origin: 50% 50%;
  animation: rotate-loading 1.5s linear 0s infinite normal;
  transform-origin: 50% 50%;
}

.loading-container:hover .loading {
  border-color: transparent #E45635 transparent #E45635;
}

.loading-container:hover .loading,
.loading-container .loading {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#loading-text {
  -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
  -o-animation: loading-text-opacity 2s linear 0s infinite normal;
  -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
  animation: loading-text-opacity 2s linear 0s infinite normal;
  color: #CE2315;
  font-family: "Helvetica Neue, " Helvetica ", " "arial";
  font-size: 10px;
  font-weight: 800;
  margin-top: 45px;
  opacity: 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  width: 100px;
}

.drawer-box {
  width: auto;
  height: auto;
}

#drawer-icon {
  display: none;
}
@media (max-width: 1199px) {
  #drawer-icon {
    position: absolute;
  }
}
#drawer-icon + label {
  z-index: 900;
  position: absolute;
  display: block;
  width: 50px;
  height: 40px;
  cursor: pointer;
  box-sizing: border-box;
  top: 5px;
  padding-left: 13px;
  display: none;
}
@media (max-width: 1199px) {
  #drawer-icon + label {
    display: block;
  }
}
#drawer-icon + label:before {
  display: none;
}
#drawer-icon + label > span {
  position: absolute;
  display: block;
  width: 21px;
  height: 2px;
  border-radius: 30px;
  background: #fff;
  transition: all 0.35s;
  z-index: 2;
  box-sizing: border-box;
}
#drawer-icon + label > span:nth-child(1) {
  top: 12px;
}
#drawer-icon + label > span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
#drawer-icon + label > span:nth-child(3) {
  bottom: 12px;
}
#drawer-icon.on + label > span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  background: #fff;
}
#drawer-icon.on + label > span:nth-child(2) {
  opacity: 0;
  background: #fff;
}
#drawer-icon.on + label > span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
  background: #fff;
}
#drawer-icon.on + label + .on {
  left: 0px;
}

label.drawer {
  display: none;
}
@media (max-width: 1199px) {
  label.drawer {
    display: block;
  }
}

.partscons > .img {
  position: relative;
  min-width: 300px;
  width: 100%;
  height: 200px;
  box-sizing: border-box;
}
.partscons > .img::before {
  content: "";
  display: block;
}
.partscons > .img > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  box-sizing: border-box;
  margin: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}
.partscons > .info {
  margin: 10px 0;
  background-color: rgba(240, 240, 240, 0.9411764706);
  border-radius: 5px;
  padding: 14px 0;
}
.partscons > .info > .name {
  font-size: 18px;
}
.partscons > .info > .price {
  color: #797878;
}

.mapboxgl-ctrl-group > button {
  margin: 0;
  padding: 0 !important;
}

.mobile-board {
  display: none;
}
@media (max-width: 1199px) {
  .mobile-board {
    display: block;
    padding: 5px;
  }
  .mobile-board > .box {
    background-color: #f9f9f9;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .mobile-board > .box > .te {
    width: 50%;
    float: left;
  }
}
@media (max-width: 1199px) and (max-width: 766px) {
  .mobile-board > .box > .te {
    width: 100%;
  }
  .mobile-board > .box > .te:first-child li:last-child .tit {
    border-radius: 0;
  }
  .mobile-board > .box > .te:last-child li:first-child .tit {
    border-radius: 0;
  }
}
@media (max-width: 1199px) {
  .mobile-board > .box > .te > li {
    display: flex;
  }
  .mobile-board > .box > .te > li:first-child span.tit {
    border-radius: 5px 5px 0 0;
  }
  .mobile-board > .box > .te > li:last-child span.tit {
    border-radius: 0 0 5px 5px;
  }
  .mobile-board > .box > .te > li > span {
    display: block;
    padding: 4px 4px 4px 10px;
    box-sizing: border-box;
  }
  .mobile-board > .box > .te > li > span.tit {
    width: 100px;
    background-color: #535353;
    color: #fff;
  }
  .mobile-board > .box > .te > li > span.cont {
    width: calc(100% - 100px);
  }
}
.mobile-board-card {
  display: none;
}
@media (max-width: 1199px) {
  .mobile-board-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 1199px) and (max-width: 766px) {
  .mobile-board-card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1199px) {
  .mobile-board-card > .box {
    padding: 10px 14px;
    margin: 3px;
    border-radius: 5px;
    background-color: #f6f7f9;
    cursor: pointer;
  }
  .mobile-board-card > .box > .group > .info {
    width: 50%;
  }
  .mobile-board-card > .box > .group > .info-01 {
    float: left;
    padding-top: 10px;
  }
  .mobile-board-card > .box > .group > .info-01 > .name {
    font-size: 18px;
    font-weight: 700;
  }
  .mobile-board-card > .box > .group > .info-01 > .phone {
    font-size: 13px;
    padding-left: 8px;
  }
  .mobile-board-card > .box > .group > .info-02 {
    float: right;
    display: flex;
    flex-direction: column;
  }
  .mobile-board-card > .box > .group > .info-02 > .state {
    display: unset;
    text-align: center;
    padding: 5px 10px !important;
    margin: 0 2px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 5px;
    letter-spacing: 0.5px;
  }
  .mobile-board-card > .box > .group > .info-02 > .state.complete {
    color: #2BAD26;
    background: #e1ffe1;
  }
  .mobile-board-card > .box > .group > .info-02 > .state.waiting {
    color: #FFB43C;
    background: #FFF6E8;
  }
  .mobile-board-card > .box > .group > .info-02 > .state.proceeding {
    color: #2762D1;
    background: #E8F0FF;
  }
  .mobile-board-card > .box > .group > .info-02 > .state.failure {
    color: #5F5F5F;
    background: #E0E0E0;
  }
  .mobile-board-card > .box > .group > .info-02 > .state.info {
    color: #5F5F5F;
    background: #E0E0E0;
  }
  .mobile-board-card > .box > .group > .info-02 > .date {
    font-size: 13px;
    padding-top: 5px;
    padding-right: 2px;
  }
  .mobile-board-card > .box > .group .tit.pin {
    display: block;
    position: relative;
    padding-left: 12px;
    font-size: 12px;
    color: #5F5F5F;
  }
  .mobile-board-card > .box > .group .tit.pin::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
    width: 5px;
    height: 5px;
    background-color: #CE2315;
  }
  .mobile-board-card > .box > .group .cont {
    padding-left: 14px;
  }
}

@media (max-width: 766px) {
  .apply-list {
    float: unset;
    width: 100% !important;
    margin-bottom: 10px;
  }
  .apply-list > .item-tit {
    width: 60%;
  }
  .apply-list > .item {
    width: 40%;
  }
  .apply-list > .item > button.btn-apply {
    width: 100%;
  }
}

.reportDetailDtc > .down-btn {
  padding-right: 14px;
  color: #2599FB;
  background: url(/assets/download-icon.RNHVQS6m.svg) no-repeat 100%/10px;
  cursor: pointer;
}

.vc-popover-content-wrapper {
  z-index: 200 !important;
}

.dataMonitoring .btn-opt .graph-btn.on {
  font-weight: bold;
  background-color: #2BAD26;
  border-color: #2BAD26;
  color: #ffffff;
}
.dataMonitoring .layout-box {
  /* 그래프 켜졌을 때 */
}
.dataMonitoring .layout-box .layout {
  padding: 0;
}
.dataMonitoring .layout-box.on .layout.list {
  padding-right: 10px;
}
.dataMonitoring .layout-box.on .layout.graph {
  padding-left: 10px;
}
.dataMonitoring .layout-box.on .layout.graph .board .tbody {
  height: 130px;
  overflow-y: auto;
}
.dataMonitoring .layout-box.on .layout.graph .board .tbody li:last-child .layout {
  border-bottom: 1px solid #dbdbdb;
}
.dataMonitoring .layout-box .graph-wrap {
  width: 100%;
  height: 600px;
}
.dataMonitoring .layout-box.off .layout {
  width: 100%;
}
.dataMonitoring .layout-box.off .layout.graph {
  display: none;
}
.dataMonitoring .past .board-tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 10px;
}
.dataMonitoring .past .tbody .download-btn {
  width: 20px;
  height: 20px;
  background: url(/assets/excel.aMn2HDpi.png) no-repeat center center;
  background-size: contain;
}

/* 데이터 모니터링 */
.popup-wrap.remote-popup {
  position: relative;
  background-color: transparent;
  width: initial;
  height: initial;
}

.popup-wrap.remote-popup > .popup {
  position: fixed;
  top: 162px;
}

.popup-wrap.remote-popup .box {
  width: 280px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
}

.select-wrap {
  position: relative;
  min-width: 160px;
  width: 330px;
  z-index: 30;
}

.select-wrap .select-btn {
  width: inherit;
  height: 30px;
  line-height: 28px;
  padding: 0 30px 0 10px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #ddd;
  background-color: #fff;
  text-align: left;
  position: relative;
  cursor: pointer;
  font-size: 14px;
}

.select-wrap .select-btn::after {
  display: block;
  content: "";
  width: 12px;
  height: 7px;
  background: #fff url(/assets/angle-down.CQMZNVYA.svg) no-repeat center center;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.select-wrap ul {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  background: #fff;
}

.select-wrap ul li {
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  padding: 4px;
  cursor: pointer;
  gap: 10px;
  font-size: 14px;
  border-radius: 6px;
}

.select-wrap ul li:hover {
  background-color: #1e90ff;
}

.select-wrap ul li:hover p {
  color: #fff;
}

.select-wrap ul li p {
  box-sizing: border-box;
  margin: 0;
  flex-grow: 1;
}

.select-wrap ul li .delete-btn {
  width: 10px;
  height: 10px;
  background: url(/assets/xmark.CeLGuvCB.svg) no-repeat center center;
  border: 0;
  outline: 0;
  font-size: 0;
  cursor: pointer;
}

.filter-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-tag li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: #fffadb !important;
  border-radius: 6px;
  padding: 4px 8px;
  border: 1px solid #c7c093;
}
.filter-tag li .delete-btn {
  width: 18px;
  height: 18px;
  background: url(/assets/circle-xmark-yellow.Cyn-NoOs.svg) no-repeat center center;
  background-size: contain;
}

.sw-registration .filter-tag {
  margin-left: 20px;
}
.sw-registration .popup-wrap > .popup > .cont .board {
  overflow: auto;
}

.layout .link-btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/assets/open_in_new.Wz_0idzY.svg);
}

nav ul.menu > li > a.swMng {
  background-image: url(/assets/nav-dashboard-off.Qdt5v1mu.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
}

nav ul.menu > li > a.swMng:hover {
  background-image: url(/assets/nav-dashboard-on.Btvg8ccR.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}

nav ul.menu > li > a.swMng.on {
  background-image: url(/assets/nav-dashboard-on.Btvg8ccR.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}

nav ul.menu > li > a.gptService {
  background-image: url(/assets/icon_gpt_manage_n.UqfS5uMo.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 9% 50%, 90% 50%;
}

nav ul.menu > li > a.gptService:hover {
  background-image: url(/assets/icon_gpt_manage_s.DqjDZpSW.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}

nav ul.menu > li > a.gptService.on {
  background-image: url(/assets/icon_gpt_manage_s.DqjDZpSW.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}

nav ul.menu > li > a.administrator {
  background-image: url(/assets/security_icon_administrator_n.D-GTKWh8.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 9% 50%, 90% 50%;
}

nav ul.menu > li > a.administrator:hover {
  background-image: url(/assets/security_icon_administrator_s.4fg38PnI.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}

nav ul.menu > li > a.administrator.on {
  background-image: url(/assets/security_icon_administrator_s.4fg38PnI.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}

.dataMonitoring .btn-opt .graph-btn.on {
  font-weight: bold;
  background-color: #2BAD26;
  border-color: #2BAD26;
  color: #ffffff;
}
.dataMonitoring .layout-box {
  /* 그래프 켜졌을 때 */
}
.dataMonitoring .layout-box .layout {
  padding: 0;
}
.dataMonitoring .layout-box.on .layout.list {
  padding-right: 10px;
}
.dataMonitoring .layout-box.on .layout.graph {
  padding-left: 10px;
}
.dataMonitoring .layout-box.on .layout.graph .board .tbody {
  height: 130px;
  overflow-y: auto;
}
.dataMonitoring .layout-box.on .layout.graph .board .tbody li:last-child .layout {
  border-bottom: 1px solid #dbdbdb;
}
.dataMonitoring .layout-box .graph-wrap {
  width: 100%;
  height: 600px;
}
.dataMonitoring .layout-box.off .layout {
  width: 100%;
}
.dataMonitoring .layout-box.off .layout.graph {
  display: none;
}
.dataMonitoring .past .board-tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 10px;
}
.dataMonitoring .past .tbody .download-btn {
  width: 20px;
  height: 20px;
  background: url(/assets/excel.aMn2HDpi.png) no-repeat center center;
  background-size: contain;
}

/* 데이터 모니터링 */
.popup-wrap.remote-popup {
  position: relative;
  background-color: transparent;
  width: initial;
  height: initial;
}

.popup-wrap.remote-popup > .popup {
  position: fixed;
  top: 162px;
}

.popup-wrap.remote-popup .box {
  width: 280px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
}

.select-wrap {
  position: relative;
  min-width: 160px;
  width: 330px;
  z-index: 30;
}

.select-wrap .select-btn {
  width: inherit;
  height: 30px;
  line-height: 28px;
  padding: 0 30px 0 10px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #ddd;
  background-color: #fff;
  text-align: left;
  position: relative;
  cursor: pointer;
  font-size: 14px;
}

.select-wrap .select-btn::after {
  display: block;
  content: "";
  width: 12px;
  height: 7px;
  background: #fff url(/assets/angle-down.CQMZNVYA.svg) no-repeat center center;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.select-wrap ul {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  background: #fff;
}

.select-wrap ul li {
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  padding: 4px;
  cursor: pointer;
  gap: 10px;
  font-size: 14px;
  border-radius: 6px;
}

.select-wrap ul li:hover {
  background-color: #1e90ff;
}

.select-wrap ul li:hover p {
  color: #fff;
}

.select-wrap ul li p {
  box-sizing: border-box;
  margin: 0;
  flex-grow: 1;
}

.select-wrap ul li .delete-btn {
  width: 10px;
  height: 10px;
  background: url(/assets/xmark.CeLGuvCB.svg) no-repeat center center;
  border: 0;
  outline: 0;
  font-size: 0;
  cursor: pointer;
}

.filter-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-tag li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: #fffadb !important;
  border-radius: 6px;
  padding: 4px 8px;
  border: 1px solid #c7c093;
}
.filter-tag li .delete-btn {
  width: 18px;
  height: 18px;
  background: url(/assets/circle-xmark-yellow.Cyn-NoOs.svg) no-repeat center center;
  background-size: contain;
}

.sw-registration .filter-tag {
  margin-left: 20px;
}
.sw-registration .popup-wrap > .popup > .cont .board {
  overflow: auto;
}

.layout .link-btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/assets/open_in_new.Wz_0idzY.svg);
}

nav ul.menu > li > a.swMng {
  background-image: url(/assets/nav-dashboard-off.Qdt5v1mu.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%, 90% 50%;
}

nav ul.menu > li > a.swMng:hover {
  background-image: url(/assets/nav-dashboard-on.Btvg8ccR.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}

nav ul.menu > li > a.swMng.on {
  background-image: url(/assets/nav-dashboard-on.Btvg8ccR.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}

nav ul.menu > li > a.gptService {
  background-image: url(/assets/icon_gpt_manage_n.UqfS5uMo.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 9% 50%, 90% 50%;
}

nav ul.menu > li > a.gptService:hover {
  background-image: url(/assets/icon_gpt_manage_s.DqjDZpSW.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}

nav ul.menu > li > a.gptService.on {
  background-image: url(/assets/icon_gpt_manage_s.DqjDZpSW.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}

nav ul.menu > li > a.administrator {
  background-image: url(/assets/security_icon_administrator_n.D-GTKWh8.svg), url(/assets/angle-down.CQMZNVYA.svg);
  background-repeat: no-repeat;
  background-position: 9% 50%, 90% 50%;
}

nav ul.menu > li > a.administrator:hover {
  background-image: url(/assets/security_icon_administrator_s.4fg38PnI.svg), url(/assets/angle-down-red.BsGI6t2F.svg);
}

nav ul.menu > li > a.administrator.on {
  background-image: url(/assets/security_icon_administrator_s.4fg38PnI.svg), url(/assets/angle-up-red.BlwMeuJ1.svg);
}

/* 추가작업분 START */
.width-70 {
  width: 70px !important;
}

.width-90 {
  width: 90px !important;
}

.width-100 {
  width: 100px !important;
}

/* 추가작업분 END */
/* 부품 소모품판매 주문 관리 */
.part-order .confail {
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #dddddd;
}
.part-order ul.on li {
  background-color: #FFE7E5;
}
.part-order .board-result-centering {
  margin-top: 10px;
  border: 0px transparent;
  background-color: rgb(225, 225, 225);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 14px;
}
@media (max-width: 766px) {
  .part-order .board-result-centering {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}
.part-order .board-result-centering p span {
  font-size: 20px;
}
@media (max-width: 766px) {
  .part-order .board-result-centering p span {
    font-size: 18px;
  }
}
.part-order .board-process-explain {
  margin-top: 10px;
  border: 1px solid #ccc;
  background-color: rgb(255, 255, 255);
  padding: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2%;
  overflow-x: auto;
}
@media (max-width: 766px) {
  .part-order .board-process-explain {
    justify-content: flex-start;
  }
}
.part-order .board-process-explain > div {
  flex-shrink: 0;
}
.part-order .board-process-explain > span > .state.failure::after {
  top: -1px;
}
.part-order .board-process-explain .complete + .tooltip {
  text-align: right;
}
.part-order .state-wrap {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.part-order .state-wrap .state {
  position: relative;
  min-width: 90px;
  box-sizing: border-box;
}
.part-order .state-wrap .state:hover + .tooltip {
  display: block;
}
.part-order .state-wrap .state img {
  z-index: 100;
  position: absolute;
  top: 2px;
  right: -4px;
  width: 25px;
  transform: rotate(30deg);
  display: none;
}
.part-order .state-wrap .state.failure img {
  display: block;
}
.part-order .state-wrap .state p {
  white-space: nowrap;
}
.part-order .state-wrap::after {
  box-sizing: border-box;
  display: inline-flex;
  /* content: "▶️"; */
  flex-shrink: 0;
  margin-left: clamp(10px, 16%, 16%);
  content: "";
  width: 12px;
  height: 12px;
  background: url(/assets/triangle-arrow.VHHoWB5k.svg) no-repeat;
  background-size: contain;
}
@media (max-width: 766px) {
  .part-order .state-wrap::after {
    margin-left: clamp(10px, 8%, 8%);
  }
}
.part-order .state-wrap:last-child::after {
  display: none;
}
.part-order .tooltip {
  min-width: 80px;
  max-width: 300px;
  position: absolute;
  background-color: #f9f9f9;
  color: black;
  border: 1px solid #ccc;
  padding: 5px 10px;
  font-weight: 500;
  z-index: 100;
  font-size: 11px;
  display: none;
}
.part-order .status-change {
  background-color: rgba(255, 249, 226, 0.988);
  border: 1px solid hsla(47, 75%, 65%, 0.988);
  color: #efbe00;
  font-weight: 600;
  word-break: break-all;
  line-height: 1.5;
  border-radius: 5px;
  text-align: center;
  letter-spacing: 0.3px;
  display: inline-block;
  min-width: 50px;
  padding: 5px 10px !important;
  margin: 0 2px;
  font-size: 11px !important;
}
.part-order .status-change:disabled {
  font-weight: 600;
  word-break: break-all;
  line-height: 1.5;
  border-radius: 5px;
  text-align: center;
  letter-spacing: 0.3px;
  display: inline-block;
  min-width: 50px;
  padding: 5px 10px !important;
  margin: 0 2px;
  font-size: 11px !important;
}
.part-order .position {
  position: relative;
}
.part-order .information::before {
  content: "";
  background: url(/assets/information.DqkEeNQs.png) no-repeat;
  position: absolute;
  background-size: cover;
  top: 0;
  margin-left: -20px;
  width: 20px;
  height: 20px;
}

/* 테이블 그래프 */
.table-wrap {
  margin: 10px 0;
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
  overflow: hidden;
}
.table-wrap table thead {
  background: #535353;
}
.table-wrap table thead tr:first-child th:first-child {
  border-top-left-radius: 5px;
}
.table-wrap table thead tr:first-child th:last-child {
  border-top-right-radius: 5px;
}
.table-wrap table thead th {
  color: #fff;
  padding: 10px 8px;
}
@media (max-width: 766px) {
  .table-wrap table thead th {
    padding: 10px 4px;
  }
}
.table-wrap table thead th.col {
  border-bottom: 1px solid #fff;
}
.table-wrap table thead th.max-point {
  text-align: right;
  padding: 10px 0;
  position: relative;
}
@media (max-width: 766px) {
  .table-wrap table thead th.max-point {
    text-align: center;
  }
}
.table-wrap table thead th.max-point .pin {
  width: 1px;
  height: 140vh;
  border-right: 1px dashed #060606;
  box-sizing: border-box;
  position: absolute;
  right: 0;
  top: 110%;
  z-index: 5;
}
.table-wrap table thead th.max-point .pin::before {
  display: block;
  content: "▼" !important;
  position: absolute;
  bottom: 100%;
  left: -8px;
  width: 14px;
  height: 14px;
  color: #ff6161;
  z-index: 100;
}
.table-wrap table thead th.number p {
  white-space: nowrap;
}
.table-wrap table thead th p {
  word-break: break-word;
}
.table-wrap table tbody tr {
  border-bottom: 1px solid #dbdbdb;
}
.table-wrap table tbody td {
  text-align: center;
  padding: 10px 6px;
}
.table-wrap table tbody td.name p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (max-width: 766px) {
  .table-wrap table tbody td.name p {
    max-width: 72px;
  }
}
.table-wrap table tbody td.guage {
  padding: 10px 0;
  position: relative;
}
.table-wrap table tbody td.guage .bar {
  max-width: 101%;
  height: 18px;
  box-sizing: border-box;
}
@media (max-width: 766px) {
  .table-wrap table tbody td.guage .bar {
    max-width: 103%;
  }
}
.table-wrap table tbody td.guage .bar.red {
  background-color: #ef4023;
}
.table-wrap table tbody td.guage .bar.org {
  background-color: #fda52c;
}
.table-wrap table tbody td.guage .bar.org p {
  color: #000000;
}
.table-wrap table tbody td.guage .bar.green {
  background-color: #2cd185;
}
.table-wrap table tbody td.guage .bar.green p {
  color: #000000;
}
.table-wrap table tbody td.guage .datum-point {
  position: absolute;
  top: 8%;
  font-size: 11px;
}
.table-wrap table tbody td.guage .datum-point.impend {
  right: 10.4%;
  min-width: 24px;
  text-align: left;
}
@media (max-width: 766px) {
  .table-wrap table tbody td.guage .datum-point.impend {
    right: 3.6%;
  }
}
.table-wrap table tbody td.guage .datum-point.exceeded {
  right: -28px;
  min-width: 24px;
  text-align: left;
}
.table-wrap table tbody td.guage p {
  text-align: right;
  margin-right: 10px;
  color: #fff;
}
@media (max-width: 766px) {
  .table-wrap table p {
    font-size: 13px;
  }
}

/* 커스텀 내비게이션 컨트롤: 버튼 공통 스타일 */
.custom-navigation-control {
  position: absolute; /* 부모 .map-controls가 absolute라 그대로 가능 */
  right: 0px;
  bottom: 0px;
  z-index: 5000; /* 지도/오버레이 위로 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
}

.custom-navigation-control button {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  margin: 0;
  cursor: pointer;
  background-color: #131313;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; /* 썸네일/아이콘을 꽉 차게 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* 현재 위치 버튼: 제공한 mylocation.svg로 교체 */
.custom-navigation-control .locate-btn {
  background-image: url("/assets/mylocation-dark.BdYGWhz1.svg");
  opacity: 0.8;
}

.custom-navigation-control .mapstyle-btn {
  background-image: url("/assets/map-style-dark.B1XQsVH_.svg");
  opacity: 0.8;
}

/* 줌 슬라이더(이미 사용 중인 스타일 유지, 필요한 최소만 표시) */
.custom-navigation-control .zoom-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32px;
  background-color: rgba(19, 19, 19, 0.8);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  padding: 4px 2px;
  gap: 6px;
}

.custom-navigation-control .zoom-slider button {
  width: 100%;
  margin: 0;
  height: 28px;
  background-color: rgba(19, 19, 19, 0);
  font-size: 16px;
  color: #fff;
}

.custom-navigation-control .zoom-slider .zoom-in {
  border-bottom: 1px solid #D6D6D6;
  border-radius: 0px;
}

.custom-navigation-control .zoom-slider .zoom-out {
  border-top: 1px solid #D6D6D6;
  border-radius: 0px;
}

.custom-navigation-control .zoom-slider input[type=range] {
  writing-mode: lr-bt;
  -webkit-appearance: slider-vertical;
  width: 6px;
  height: 150px;
  margin: 0;
  background: linear-gradient(to top, #fff 0%, #fff 100%);
  border-radius: 0px;
  outline: none;
}
/* @font-face {
    font-family: Jamsil;
    src: url(./The-Jamsil-6-ExtraBold.ttf);
    font-weight: 800;
} */
@font-face {
    font-family: Jamsil;
    src: url(/assets/The-Jamsil-5-Bold.AHgyYts3.ttf);
    font-weight: 800;
}
@font-face {
    font-family: Jamsil;
    src: url(/assets/The-Jamsil-4-Medium.B9_Hbjvv.ttf);
    font-weight: 700;
}
@font-face {
    font-family: Jamsil;
    src: url(/assets/The-Jamsil-3-Regular.D2tlJ3b6.ttf);
    font-weight: 600;
}
@font-face {
    font-family: Jamsil;
    src: url(/assets/The-Jamsil-2-Light.DfdfqIyy.ttf);
    font-weight: 500;
}
@font-face {
    font-family: Jamsil;
    src: url(/assets/The-Jamsil-1-Thin.DkA0QwK7.ttf);
    font-weight: 400;
}





.alert-popup {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;

  min-width: 400px;
  border-radius: 6px;
  padding-bottom: 10px;

  .swal2-title {
    box-sizing: border-box;

    display: flex;
    align-items: center;
    
    padding: 0 10px;
    
    background-color: #222021;
    border-radius: 5px 5px 0 0;
    
    line-height: 40px;
    text-align: left;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3px;
  }

  .swal2-html-container {
    padding: 20px 10px 10px !important;

    .alert-text {
      padding-top: 20px;
      padding-bottom: 40px;
      border-bottom: 1px solid #dddddd;

      font-size: 14px;
      line-height: 1.5;
      font-family: 'Jamsil', sans-serif;
      color: #222;
      letter-spacing: -0.5px;
      font-weight: 600;

      text-align: center;
      white-space: pre-wrap;
      word-break: keep-all;
    }
  }

  .swal2-close {
    position: absolute;
    top: -4px;
    right: 0;
    width: 40px;
    justify-content: flex-end;
    padding-right: 10px;
  }
}


.alert-popup .alert-actions {
  display: flex;
  column-gap: 6px;
  margin-top: 0;
  width: 100%;
}

.alert-popup .alert-actions .alert-btn {
  min-width: 80px;
  height: 30px;
  line-height: 30px;
  background-color: #CE2315;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.8px;
  font-weight: 700;
  padding: 0 10px;
  box-sizing: border-box;
  margin-left: 5px;
}

.close-btn {
  position: unset !important;

  width: 20px !important;
  height: 20px !important;
  border-radius: 5px;
  background: #fff url(/assets/xmark.CeLGuvCB.svg) no-repeat 50%/ 12px;
}/*
 * ---------------------------------------------------------------
 * ## 👉 color variables ##
 *
 * Figma 디자인 가이드가 작성되면, 아래에 컬러를 작성합니다.
 * ---------------------------------------------------------------
 */

:root {
  --primary-lighter: #f0f4ff;
  --primary-light: #d9e2ff;
  --primary-main: #a6c1ff;
  --primary-dark: #6a8cff;
  --primary-darker: #3f5bff;

  /* Add Color Variables */
}/* sass-plugin-1:/Users/maronato/Developer/vue-toastification/src/scss/index.scss */
.Vue-Toastification__container {
  z-index: 9999;
  position: fixed;
  padding: 4px;
  width: 600px;
  box-sizing: border-box;
  display: flex;
  min-height: 100%;
  color: #fff;
  flex-direction: column;
  pointer-events: none;
}
@media only screen and (min-width : 600px) {
  .Vue-Toastification__container.top-left,
  .Vue-Toastification__container.top-right,
  .Vue-Toastification__container.top-center {
    top: 1em;
  }
  .Vue-Toastification__container.bottom-left,
  .Vue-Toastification__container.bottom-right,
  .Vue-Toastification__container.bottom-center {
    bottom: 1em;
    flex-direction: column-reverse;
  }
  .Vue-Toastification__container.top-left,
  .Vue-Toastification__container.bottom-left {
    left: 1em;
  }
  .Vue-Toastification__container.top-left .Vue-Toastification__toast,
  .Vue-Toastification__container.bottom-left .Vue-Toastification__toast {
    margin-right: auto;
  }
  @supports not (-moz-appearance: none) {
    .Vue-Toastification__container.top-left .Vue-Toastification__toast--rtl,
    .Vue-Toastification__container.bottom-left .Vue-Toastification__toast--rtl {
      margin-right: unset;
      margin-left: auto;
    }
  }
  .Vue-Toastification__container.top-right,
  .Vue-Toastification__container.bottom-right {
    right: 1em;
  }
  .Vue-Toastification__container.top-right .Vue-Toastification__toast,
  .Vue-Toastification__container.bottom-right .Vue-Toastification__toast {
    margin-left: auto;
  }
  @supports not (-moz-appearance: none) {
    .Vue-Toastification__container.top-right .Vue-Toastification__toast--rtl,
    .Vue-Toastification__container.bottom-right .Vue-Toastification__toast--rtl {
      margin-left: unset;
      margin-right: auto;
    }
  }
  .Vue-Toastification__container.top-center,
  .Vue-Toastification__container.bottom-center {
    left: 50%;
    margin-left: -300px;
  }
  .Vue-Toastification__container.top-center .Vue-Toastification__toast,
  .Vue-Toastification__container.bottom-center .Vue-Toastification__toast {
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width : 600px) {
  .Vue-Toastification__container {
    width: 100vw;
    padding: 0;
    left: 0;
    margin: 0;
  }
  .Vue-Toastification__container .Vue-Toastification__toast {
    width: 100%;
  }
  .Vue-Toastification__container.top-left,
  .Vue-Toastification__container.top-right,
  .Vue-Toastification__container.top-center {
    top: 0;
  }
  .Vue-Toastification__container.bottom-left,
  .Vue-Toastification__container.bottom-right,
  .Vue-Toastification__container.bottom-center {
    bottom: 0;
    flex-direction: column-reverse;
  }
}
.Vue-Toastification__toast {
  display: inline-flex;
  position: relative;
  max-height: 800px;
  min-height: 64px;
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 22px 24px;
  border-radius: 8px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  justify-content: space-between;
  font-family:
    "Lato",
    Helvetica,
    "Roboto",
    Arial,
    sans-serif;
  max-width: 600px;
  min-width: 326px;
  pointer-events: auto;
  overflow: hidden;
  transform: translateZ(0);
  direction: ltr;
}
.Vue-Toastification__toast--rtl {
  direction: rtl;
}
.Vue-Toastification__toast--default {
  background-color: #1976d2;
  color: #fff;
}
.Vue-Toastification__toast--info {
  background-color: #2196f3;
  color: #fff;
}
.Vue-Toastification__toast--success {
  background-color: #4caf50;
  color: #fff;
}
.Vue-Toastification__toast--error {
  background-color: #ff5252;
  color: #fff;
}
.Vue-Toastification__toast--warning {
  background-color: #ffc107;
  color: #fff;
}
@media only screen and (max-width : 600px) {
  .Vue-Toastification__toast {
    border-radius: 0px;
    margin-bottom: 0.5rem;
  }
}
.Vue-Toastification__toast-body {
  flex: 1;
  line-height: 24px;
  font-size: 16px;
  word-break: break-word;
  white-space: pre-wrap;
}
.Vue-Toastification__toast-component-body {
  flex: 1;
}
.Vue-Toastification__toast.disable-transition {
  animation: none !important;
}
.Vue-Toastification__close-button {
  font-weight: bold;
  font-size: 24px;
  line-height: 24px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  padding-left: 10px;
  cursor: pointer;
  transition: 0.3s ease;
  align-items: center;
  color: #fff;
  opacity: 0.3;
  transition: visibility 0s, opacity 0.2s linear;
}
.Vue-Toastification__close-button:hover,
.Vue-Toastification__close-button:focus {
  opacity: 1;
}
.Vue-Toastification__toast:not(:hover) .Vue-Toastification__close-button.show-on-hover {
  opacity: 0;
}
.Vue-Toastification__toast--rtl .Vue-Toastification__close-button {
  padding-left: unset;
  padding-right: 10px;
}
@keyframes scale-x-frames {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Vue-Toastification__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 10000;
  background-color: rgba(255, 255, 255, 0.7);
  transform-origin: left;
  animation: scale-x-frames linear 1 forwards;
}
.Vue-Toastification__toast--rtl .Vue-Toastification__progress-bar {
  right: 0;
  left: unset;
  transform-origin: right;
}
.Vue-Toastification__icon {
  margin: auto 18px auto 0px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  transition: 0.3s ease;
  align-items: center;
  width: 20px;
  height: 100%;
}
.Vue-Toastification__toast--rtl .Vue-Toastification__icon {
  margin: auto 0px auto 18px;
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes bounceOutRight {
  40% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(1000px, 0, 0);
  }
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Vue-Toastification__bounce-enter-active.top-left,
.Vue-Toastification__bounce-enter-active.bottom-left {
  animation-name: bounceInLeft;
}
.Vue-Toastification__bounce-enter-active.top-right,
.Vue-Toastification__bounce-enter-active.bottom-right {
  animation-name: bounceInRight;
}
.Vue-Toastification__bounce-enter-active.top-center {
  animation-name: bounceInDown;
}
.Vue-Toastification__bounce-enter-active.bottom-center {
  animation-name: bounceInUp;
}
.Vue-Toastification__bounce-leave-active:not(.disable-transition).top-left,
.Vue-Toastification__bounce-leave-active:not(.disable-transition).bottom-left {
  animation-name: bounceOutLeft;
}
.Vue-Toastification__bounce-leave-active:not(.disable-transition).top-right,
.Vue-Toastification__bounce-leave-active:not(.disable-transition).bottom-right {
  animation-name: bounceOutRight;
}
.Vue-Toastification__bounce-leave-active:not(.disable-transition).top-center {
  animation-name: bounceOutUp;
}
.Vue-Toastification__bounce-leave-active:not(.disable-transition).bottom-center {
  animation-name: bounceOutDown;
}
.Vue-Toastification__bounce-leave-active,
.Vue-Toastification__bounce-enter-active {
  animation-duration: 750ms;
  animation-fill-mode: both;
}
.Vue-Toastification__bounce-move {
  transition-timing-function: ease-in-out;
  transition-property: all;
  transition-duration: 400ms;
}
@keyframes fadeOutTop {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px);
    opacity: 0;
  }
}
@keyframes fadeOutLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-50px);
    opacity: 0;
  }
}
@keyframes fadeOutBottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
  }
}
@keyframes fadeOutRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(50px);
    opacity: 0;
  }
}
@keyframes fadeInLeft {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fadeInRight {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fadeInTop {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeInBottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.Vue-Toastification__fade-enter-active.top-left,
.Vue-Toastification__fade-enter-active.bottom-left {
  animation-name: fadeInLeft;
}
.Vue-Toastification__fade-enter-active.top-right,
.Vue-Toastification__fade-enter-active.bottom-right {
  animation-name: fadeInRight;
}
.Vue-Toastification__fade-enter-active.top-center {
  animation-name: fadeInTop;
}
.Vue-Toastification__fade-enter-active.bottom-center {
  animation-name: fadeInBottom;
}
.Vue-Toastification__fade-leave-active:not(.disable-transition).top-left,
.Vue-Toastification__fade-leave-active:not(.disable-transition).bottom-left {
  animation-name: fadeOutLeft;
}
.Vue-Toastification__fade-leave-active:not(.disable-transition).top-right,
.Vue-Toastification__fade-leave-active:not(.disable-transition).bottom-right {
  animation-name: fadeOutRight;
}
.Vue-Toastification__fade-leave-active:not(.disable-transition).top-center {
  animation-name: fadeOutTop;
}
.Vue-Toastification__fade-leave-active:not(.disable-transition).bottom-center {
  animation-name: fadeOutBottom;
}
.Vue-Toastification__fade-leave-active,
.Vue-Toastification__fade-enter-active {
  animation-duration: 750ms;
  animation-fill-mode: both;
}
.Vue-Toastification__fade-move {
  transition-timing-function: ease-in-out;
  transition-property: all;
  transition-duration: 400ms;
}
@keyframes slideInBlurredLeft {
  0% {
    transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    transform-origin: 100% 50%;
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slideInBlurredTop {
  0% {
    transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 0%;
    filter: blur(240px);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slideInBlurredRight {
  0% {
    transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
    transform-origin: 0% 50%;
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slideInBlurredBottom {
  0% {
    transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 100%;
    filter: blur(240px);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slideOutBlurredTop {
  0% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 0%;
    filter: blur(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-1000px) scaleY(2) scaleX(0.2);
    transform-origin: 50% 0%;
    filter: blur(240px);
    opacity: 0;
  }
}
@keyframes slideOutBlurredBottom {
  0% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
  100% {
    transform: translateY(1000px) scaleY(2) scaleX(0.2);
    transform-origin: 50% 100%;
    filter: blur(240px);
    opacity: 0;
  }
}
@keyframes slideOutBlurredLeft {
  0% {
    transform: translateX(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-1000px) scaleX(2) scaleY(0.2);
    transform-origin: 100% 50%;
    filter: blur(40px);
    opacity: 0;
  }
}
@keyframes slideOutBlurredRight {
  0% {
    transform: translateX(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
  100% {
    transform: translateX(1000px) scaleX(2) scaleY(0.2);
    transform-origin: 0% 50%;
    filter: blur(40px);
    opacity: 0;
  }
}
.Vue-Toastification__slideBlurred-enter-active.top-left,
.Vue-Toastification__slideBlurred-enter-active.bottom-left {
  animation-name: slideInBlurredLeft;
}
.Vue-Toastification__slideBlurred-enter-active.top-right,
.Vue-Toastification__slideBlurred-enter-active.bottom-right {
  animation-name: slideInBlurredRight;
}
.Vue-Toastification__slideBlurred-enter-active.top-center {
  animation-name: slideInBlurredTop;
}
.Vue-Toastification__slideBlurred-enter-active.bottom-center {
  animation-name: slideInBlurredBottom;
}
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).top-left,
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).bottom-left {
  animation-name: slideOutBlurredLeft;
}
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).top-right,
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).bottom-right {
  animation-name: slideOutBlurredRight;
}
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).top-center {
  animation-name: slideOutBlurredTop;
}
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).bottom-center {
  animation-name: slideOutBlurredBottom;
}
.Vue-Toastification__slideBlurred-leave-active,
.Vue-Toastification__slideBlurred-enter-active {
  animation-duration: 750ms;
  animation-fill-mode: both;
}
.Vue-Toastification__slideBlurred-move {
  transition-timing-function: ease-in-out;
  transition-property: all;
  transition-duration: 400ms;
}

.vc-popover-content-wrapper {
  --popover-horizontal-content-offset: 8px;
  --popover-vertical-content-offset: 10px;
  --popover-caret-horizontal-offset: 18px;
  --popover-caret-vertical-offset: 8px;

  position: absolute;
  display: block;
  outline: none;
  z-index: 10;
}
.vc-popover-content-wrapper:not(.is-interactive) {
    pointer-events: none;
}
.vc-popover-content {
  position: relative;
  color: var(--vc-popover-content-color);
  font-weight: var(--vc-font-medium);
  background-color: var(--vc-popover-content-bg);
  border: 1px solid;
  border-color: var(--vc-popover-content-border);
  border-radius: var(--vc-rounded-lg);
  padding: 4px;
  outline: none;
  z-index: 10;
  box-shadow: var(--vc-shadow-lg);
}
.vc-popover-content.direction-bottom {
    margin-top: var(--popover-vertical-content-offset);
}
.vc-popover-content.direction-top {
    margin-bottom: var(--popover-vertical-content-offset);
}
.vc-popover-content.direction-left {
    margin-right: var(--popover-horizontal-content-offset);
}
.vc-popover-content.direction-right {
    margin-left: var(--popover-horizontal-content-offset);
}
.vc-popover-caret {
  content: '';
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  border-top: inherit;
  border-left: inherit;
  background-color: inherit;
  z-index: -1;
}
.vc-popover-caret.direction-bottom {
    top: 0;
}
.vc-popover-caret.direction-bottom.align-left {
      -webkit-transform: translateY(-50%) rotate(45deg);
              transform: translateY(-50%) rotate(45deg);
}
.vc-popover-caret.direction-bottom.align-center {
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
              transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.vc-popover-caret.direction-bottom.align-right {
      -webkit-transform: translateY(-50%) rotate(45deg);
              transform: translateY(-50%) rotate(45deg);
}
.vc-popover-caret.direction-top {
    top: 100%;
}
.vc-popover-caret.direction-top.align-left {
      -webkit-transform: translateY(-50%) rotate(-135deg);
              transform: translateY(-50%) rotate(-135deg);
}
.vc-popover-caret.direction-top.align-center {
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(-135deg);
              transform: translateX(-50%) translateY(-50%) rotate(-135deg);
}
.vc-popover-caret.direction-top.align-right {
      -webkit-transform: translateY(-50%) rotate(-135deg);
              transform: translateY(-50%) rotate(-135deg);
}
.vc-popover-caret.direction-left {
    left: 100%;
}
.vc-popover-caret.direction-left.align-top {
      -webkit-transform: translateX(-50%) rotate(135deg);
              transform: translateX(-50%) rotate(135deg);
}
.vc-popover-caret.direction-left.align-middle {
      -webkit-transform: translateY(-50%) translateX(-50%) rotate(135deg);
              transform: translateY(-50%) translateX(-50%) rotate(135deg);
}
.vc-popover-caret.direction-left.align-bottom {
      -webkit-transform: translateX(-50%) rotate(135deg);
              transform: translateX(-50%) rotate(135deg);
}
.vc-popover-caret.direction-right {
    left: 0;
}
.vc-popover-caret.direction-right.align-top {
      -webkit-transform: translateX(-50%) rotate(-45deg);
              transform: translateX(-50%) rotate(-45deg);
}
.vc-popover-caret.direction-right.align-middle {
      -webkit-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
              transform: translateY(-50%) translateX(-50%) rotate(-45deg);
}
.vc-popover-caret.direction-right.align-bottom {
      -webkit-transform: translateX(-50%) rotate(-45deg);
              transform: translateX(-50%) rotate(-45deg);
}
.vc-popover-caret.align-left {
    left: var(--popover-caret-horizontal-offset);
}
.vc-popover-caret.align-center {
    left: 50%;
}
.vc-popover-caret.align-right {
    right: var(--popover-caret-horizontal-offset);
}
.vc-popover-caret.align-top {
    top: var(--popover-caret-vertical-offset);
}
.vc-popover-caret.align-middle {
    top: 50%;
}
.vc-popover-caret.align-bottom {
    bottom: var(--popover-caret-vertical-offset);
}

.vc-day-popover-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  transition: var(--vc-day-content-transition);
}
.vc-day-popover-row-indicator {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  width: 15px;
}
.vc-day-popover-row-indicator span {
    transition: var(--vc-day-content-transition);
}
.vc-day-popover-row-label {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: none;
      -ms-flex-wrap: none;
          flex-wrap: none;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: -webkit-max-content;
  width: max-content;
  margin-left: 4px;
  margin-right: 4px;
  font-size: var(--vc-text-xs);
  line-height: var(--vc-leading-normal);
}
.vc-day-popover-row-highlight {
  width: 8px;
  height: 5px;
  border-radius: 3px;
}
.vc-day-popover-row-dot {
}
.vc-day-popover-row-bar {
  width: 10px;
  height: 3px;
}

.vc-base-icon {
  display: inline-block;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.vc-header {
  display: grid;
  grid-gap: 4px;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 30px;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.vc-header.is-lg {
    font-size: var(--vc-text-lg);
}
.vc-header.is-xl {
    font-size: var(--vc-text-xl);
}
.vc-header.is-2xl {
    font-size: var(--vc-text-2xl);
}
.vc-header .vc-title-wrapper {
    grid-row: 1;
    grid-column: title;
}
.vc-header .vc-prev {
    grid-row: 1;
    grid-column: prev;
}
.vc-header .vc-next {
    grid-row: 1;
    grid-column: next;
}
.vc-header .vc-title,
  .vc-header .vc-prev,
  .vc-header .vc-next {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    border: 0;
    border-radius: var(--vc-rounded);
    pointer-events: auto;
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: pointer;
}
.vc-header .vc-title {
    color: var(--vc-header-title-color);
    font-weight: var(--vc-font-semibold);
    white-space: nowrap;
    padding: 0 8px;
    margin: 0;
    line-height: 30px;
}
.vc-header .vc-title:hover {
      opacity: 0.75;
}
.vc-header .vc-arrow {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    color: var(--vc-header-arrow-color);
    width: 28px;
    height: 30px;
    margin: 0;
    padding: 0;
}
.vc-header .vc-arrow:hover {
      background: var(--vc-header-arrow-hover-bg);
}
.vc-header .vc-arrow:disabled {
      opacity: 0.25;
      pointer-events: none;
}

.vc-nav-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.vc-nav-title,
.vc-nav-arrow,
.vc-nav-item {
  font-size: var(--vc-text-sm);
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 0;
  border-radius: var(--vc-rounded);
  white-space: nowrap;
}
.vc-nav-title:hover, .vc-nav-arrow:hover, .vc-nav-item:hover {
    background-color: var(--vc-nav-hover-bg);
}
.vc-nav-title:disabled, .vc-nav-arrow:disabled, .vc-nav-item:disabled {
    opacity: 0.25;
    pointer-events: none;
}
.vc-nav-title {
  color: var(--vc-nav-title-color);
  font-weight: var(--vc-font-bold);
  line-height: var(--vc-leading-snug);
  height: 30px;
  padding: 0 6px;
}
.vc-nav-arrow {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--vc-header-arrow-color);
  width: 26px;
  height: 30px;
  padding: 0;
}
.vc-nav-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 2px;
  grid-column-gap: 5px;
  margin-top: 2px;
}
.vc-nav-item {
  width: 48px;
  text-align: center;
  font-weight: var(--vc-font-semibold);
  line-height: var(--vc-leading-snug);
  padding: 6px 0;
}
.vc-nav-item.is-active {
    color: var(--vc-nav-item-active-color);
    background-color: var(--vc-nav-item-active-bg);
    font-weight: var(--vc-font-bold);
}
.vc-nav-item.is-active:not(:focus) {
      box-shadow: var(--vc-nav-item-active-box-shadow);
}
.vc-nav-item.is-current {
    color: var(--vc-nav-item-current-color);
}

.vc-day {
  position: relative;
  min-height: 32px;
  z-index: 1;
  /* &.is-not-in-month * {
    opacity: 0;
    pointer-events: none;
  } */
}
.vc-monthly .is-not-in-month * {
  opacity: 0;
  pointer-events: none;
}
.vc-day-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
.vc-day-box-center-center {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
.vc-day-box-left-center {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
}
.vc-day-box-right-center {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
}
.vc-day-box-center-bottom {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.vc-day-content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--vc-text-sm);
  font-weight: var(--vc-font-medium);
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: var(--vc-rounded-full);
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
.vc-day-content:hover {
    background-color: var(--vc-day-content-hover-bg);
}
.vc-day-content.vc-disabled {
    color: var(--vc-day-content-disabled-color);
}

/* ----Content---- */
.vc-content:not(.vc-base) {
  font-weight: var(--vc-font-bold);
  color: var(--vc-content-color);
}

/* ----Highlights---- */
.vc-highlights {
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.vc-highlight {
  width: 28px;
  height: 28px;
}
.vc-highlight.vc-highlight-base-start {
    width: 50% !important;
    border-radius: 0 !important;
    border-right-width: 0 !important;
}
.vc-highlight.vc-highlight-base-end {
    width: 50% !important;
    border-radius: 0 !important;
    border-left-width: 0 !important;
}
.vc-highlight.vc-highlight-base-middle {
    width: 100%;
    border-radius: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    margin: 0 -1px;
}
.vc-highlight-bg-outline,
.vc-highlight-bg-none {
  background-color: var(--vc-highlight-outline-bg);
  border: 2px solid;
  border-color: var(--vc-highlight-outline-border);
  border-radius: var(--vc-rounded-full);
}
.vc-highlight-bg-light {
  background-color: var(--vc-highlight-light-bg);
  border-radius: var(--vc-rounded-full);
}
.vc-highlight-bg-solid {
  background-color: var(--vc-highlight-solid-bg);
  border-radius: var(--vc-rounded-full);
}
.vc-highlight-content-outline,
.vc-highlight-content-none {
  font-weight: var(--vc-font-bold);
  color: var(--vc-highlight-outline-content-color);
}
.vc-highlight-content-light {
  font-weight: var(--vc-font-bold);
  color: var(--vc-highlight-light-content-color);
}
.vc-highlight-content-solid {
  font-weight: var(--vc-font-bold);
  color: var(--vc-highlight-solid-content-color);
}

/* ----Dots---- */
.vc-dots {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.vc-dot {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  transition: var(--vc-day-content-transition);
}
.vc-dot:not(:last-child) {
    margin-right: 3px;
}

/* ----Bars---- */
.vc-bars {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 75%;
}
.vc-bar {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 3px;
  transition: var(--vc-day-content-transition);
}
.vc-dot {
  background-color: var(--vc-dot-bg);
}
.vc-bar {
  background-color: var(--vc-bar-bg);
}

.vc-pane {
  min-width: 250px;
}
.vc-weeknumber {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
}
.vc-weeknumber.is-left {
    left: calc(var(--vc-weeknumber-offset-inside) * -1);
}
.vc-weeknumber.is-right {
    right: calc(var(--vc-weeknumber-offset-inside) * -1);
}
.vc-weeknumber.is-left-outside {
    left: calc(var(--vc-weeknumber-offset-outside) * -1);
}
.vc-weeknumber.is-right-outside {
    right: calc(var(--vc-weeknumber-offset-outside) * -1);
}
.vc-weeknumber-content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--vc-text-xs);
  font-weight: var(--vc-font-medium);
  font-style: italic;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  color: var(--vc-weeknumber-color);
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.vc-weeks {
  position: relative;
  /* overflow: auto; */
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  min-width: 232px;
}
.vc-weeks.vc-show-weeknumbers-left {
    margin-left: var(--vc-weeknumber-offset-inside);
}
.vc-weeks.vc-show-weeknumbers-right {
    margin-right: var(--vc-weeknumber-offset-inside);
}
.vc-weekday {
  text-align: center;
  color: var(--vc-weekday-color);
  font-size: var(--vc-text-sm);
  font-weight: var(--vc-font-bold);
  line-height: 14px;
  padding-top: 4px;
  padding-bottom: 8px;
  cursor: default;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.vc-week,
.vc-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
}

.vc-pane-container {
  width: 100%;
  position: relative;
}
.vc-pane-container.in-transition {
    overflow: hidden;
}
.vc-pane-layout {
  display: grid;
}
.vc-pane-header-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  pointer-events: none;
}
.vc-day-popover-container {
  font-size: var(--vc-text-xs);
  font-weight: var(--vc-font-medium);
}
.vc-day-popover-header {
  font-size: var(--vc-text-xs);
  color: var(--vc-day-popover-header-color);
  font-weight: var(--vc-font-semibold);
  text-align: center;
}

.vc-base-select {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 30px;
  font-size: var(--vc-text-base);
  font-weight: var(--vc-font-medium);
}
.vc-base-select.vc-has-icon select {
      padding: 0 27px 0 9px;
}
.vc-base-select.vc-has-icon .vc-base-sizer {
      padding: 0 28px 0 10px;
}
.vc-base-select.vc-fit-content select {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
}
.vc-base-select .vc-base-icon {
    position: absolute;
    top: 6px;
    right: 4px;
    opacity: 0.6;
    pointer-events: none;
}
.vc-base-select .vc-base-sizer {
    font-size: var(--vc-text-base);
    font-weight: var(--vc-font-medium);
    color: transparent;
    padding: 0px 8px;
    margin: 0;
}
.vc-base-select select {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: var(--vc-select-color);
    display: block;
    -webkit-appearance: none;
            appearance: none;
    background-color: var(--vc-select-bg);
    border-radius: var(--vc-rounded);
    height: 30px;
    width: -webkit-max-content;
    width: max-content;
    padding: 0px 7px;
    margin: 0;
    line-height: var(--leading-none);
    text-indent: 0px;
    background-image: none;
    cursor: pointer;
    text-align: center;
}
.vc-base-select select:hover {
      background-color: var(--vc-select-hover-bg);
}
.vc-base-select select.vc-align-left {
      text-align: left;
}
.vc-base-select select.vc-align-right {
      text-align: right;
}

.vc-time-picker {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px 4px;
}
.vc-time-picker.vc-invalid {
    pointer-events: none;
    opacity: 0.5;
}
.vc-time-picker.vc-attached {
    border-top: 1px solid var(--vc-time-picker-border);
}
.vc-time-picker > * + * {
    margin-top: 4px;
}
.vc-time-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--vc-text-sm);
  font-weight: var(--vc-font-semibold);
  text-transform: uppercase;
  margin-top: -4px;
  padding-left: 4px;
  padding-right: 4px;
  line-height: 21px;
}
.vc-time-select-group {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 4px;
  background: var(--vc-time-select-group-bg);
  border-radius: var(--vc-rounded-md);
  border: 1px solid var(--vc-time-select-group-border);
}
.vc-time-select-group .vc-base-icon {
    margin-right: 4px;
    color: var(--vc-time-select-group-icon-color);
}
.vc-time-select-group select {
    background: transparent;
    padding: 0px 4px;
}
.vc-time-weekday {
  color: var(--vc-time-weekday-color);
  letter-spacing: var(--tracking-wide);
}
.vc-time-month {
  color: var(--vc-time-month-color);
  margin-left: 8px;
}
.vc-time-day {
  color: var(--vc-time-day-color);
  margin-left: 4px;
}
.vc-time-year {
  color: var(--vc-time-year-color);
  margin-left: 8px;
}
.vc-time-colon {
  margin: 0 1px 2px 2px;
}
.vc-time-decimal {
  margin: 0 0 0 1px;
}
.vc-none-enter-active,
.vc-none-leave-active {
  transition-duration: 0s;
}

.vc-fade-enter-active,
.vc-fade-leave-active,
.vc-slide-left-enter-active,
.vc-slide-left-leave-active,
.vc-slide-right-enter-active,
.vc-slide-right-leave-active,
.vc-slide-up-enter-active,
.vc-slide-up-leave-active,
.vc-slide-down-enter-active,
.vc-slide-down-leave-active,
.vc-slide-fade-enter-active,
.vc-slide-fade-leave-active {
  transition: opacity var(--vc-slide-duration) var(--vc-slide-timing),
    -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
  transition: transform var(--vc-slide-duration) var(--vc-slide-timing),
    opacity var(--vc-slide-duration) var(--vc-slide-timing);
  transition: transform var(--vc-slide-duration) var(--vc-slide-timing),
    opacity var(--vc-slide-duration) var(--vc-slide-timing),
    -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  pointer-events: none;
}

.vc-none-leave-active,
.vc-fade-leave-active,
.vc-slide-left-leave-active,
.vc-slide-right-leave-active,
.vc-slide-up-leave-active,
.vc-slide-down-leave-active {
  position: absolute !important;
  width: 100%;
}

.vc-none-enter-from,
.vc-none-leave-to,
.vc-fade-enter-from,
.vc-fade-leave-to,
.vc-slide-left-enter-from,
.vc-slide-left-leave-to,
.vc-slide-right-enter-from,
.vc-slide-right-leave-to,
.vc-slide-up-enter-from,
.vc-slide-up-leave-to,
.vc-slide-down-enter-from,
.vc-slide-down-leave-to,
.vc-slide-fade-enter-from,
.vc-slide-fade-leave-to {
  opacity: 0;
}

.vc-slide-left-enter-from,
.vc-slide-right-leave-to,
.vc-slide-fade-enter-from.direction-left,
.vc-slide-fade-leave-to.direction-left {
  -webkit-transform: translateX(var(--vc-slide-translate));
          transform: translateX(var(--vc-slide-translate));
}

.vc-slide-right-enter-from,
.vc-slide-left-leave-to,
.vc-slide-fade-enter-from.direction-right,
.vc-slide-fade-leave-to.direction-right {
  -webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
          transform: translateX(calc(-1 * var(--vc-slide-translate)));
}

.vc-slide-up-enter-from,
.vc-slide-down-leave-to,
.vc-slide-fade-enter-from.direction-top,
.vc-slide-fade-leave-to.direction-top {
  -webkit-transform: translateY(var(--vc-slide-translate));
          transform: translateY(var(--vc-slide-translate));
}

.vc-slide-down-enter-from,
.vc-slide-up-leave-to,
.vc-slide-fade-enter-from.direction-bottom,
.vc-slide-fade-leave-to.direction-bottom {
  -webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
          transform: translateY(calc(-1 * var(--vc-slide-translate)));
}

:root {
  --vc-white: #ffffff;
  --vc-black: #000000;

  --vc-gray-50: #f8fafc;
  --vc-gray-100: #f1f5f9;
  --vc-gray-200: #e2e8f0;
  --vc-gray-300: #cbd5e1;
  --vc-gray-400: #94a3b8;
  --vc-gray-500: #64748b;
  --vc-gray-600: #475569;
  --vc-gray-700: #334155;
  --vc-gray-800: #1e293b;
  --vc-gray-900: #0f172a;

  --vc-font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    'Helvetica', 'Arial', sans-serif;

  --vc-font-normal: 400;
  --vc-font-medium: 500;
  --vc-font-semibold: 600;
  --vc-font-bold: 700;

  --vc-text-2xs: 10px;
  --vc-text-xs: 12px;
  --vc-text-sm: 14px;
  --vc-text-base: 16px;
  --vc-text-lg: 18px;
  --vc-text-xl: 20px;
  --vc-text-2xl: 24px;

  --vc-leading-none: 1;
  --vc-leading-tight: 1.25;
  --vc-leading-snug: 1.375;
  --vc-leading-normal: 1.5;

  --vc-rounded: 0.25rem;
  --vc-rounded-md: 0.375rem;
  --vc-rounded-lg: 0.5rem;
  --vc-rounded-full: 9999px;

  --vc-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --vc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --vc-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --vc-slide-translate: 22px;
  --vc-slide-duration: 0.15s;
  --vc-slide-timing: ease;

  --vc-day-content-transition: all 0.13s ease-in;
  --vc-weeknumber-offset-inside: 26px;
  --vc-weeknumber-offset-outside: 34px;
}

.vc-gray {
  --vc-accent-50: var(--vc-gray-50);
  --vc-accent-100: var(--vc-gray-100);
  --vc-accent-200: var(--vc-gray-200);
  --vc-accent-300: var(--vc-gray-300);
  --vc-accent-400: var(--vc-gray-400);
  --vc-accent-500: var(--vc-gray-500);
  --vc-accent-600: var(--vc-gray-600);
  --vc-accent-700: var(--vc-gray-700);
  --vc-accent-800: var(--vc-gray-800);
  --vc-accent-900: var(--vc-gray-900);
}

.vc-red {
  --vc-accent-50: #fef2f2;
  --vc-accent-100: #fee2e2;
  --vc-accent-200: #fecaca;
  --vc-accent-300: #fca5a5;
  --vc-accent-400: #f87171;
  --vc-accent-500: #ef4444;
  --vc-accent-600: #dc2626;
  --vc-accent-700: #b91c1c;
  --vc-accent-800: #991b1b;
  --vc-accent-900: #7f1d1d;
}

.vc-orange {
  --vc-accent-50: #fff7ed;
  --vc-accent-100: #ffedd5;
  --vc-accent-200: #fed7aa;
  --vc-accent-300: #fdba74;
  --vc-accent-400: #fb923c;
  --vc-accent-500: #f97316;
  --vc-accent-600: #ea580c;
  --vc-accent-700: #c2410c;
  --vc-accent-800: #9a3412;
  --vc-accent-900: #7c2d12;
}

.vc-yellow {
  --vc-accent-50: #fefce8;
  --vc-accent-100: #fef9c3;
  --vc-accent-200: #fef08a;
  --vc-accent-300: #fde047;
  --vc-accent-400: #facc15;
  --vc-accent-500: #eab308;
  --vc-accent-600: #ca8a04;
  --vc-accent-700: #a16207;
  --vc-accent-800: #854d0e;
  --vc-accent-900: #713f12;
}

.vc-green {
  --vc-accent-50: #f0fdf4;
  --vc-accent-100: #dcfce7;
  --vc-accent-200: #bbf7d0;
  --vc-accent-300: #86efac;
  --vc-accent-400: #4ade80;
  --vc-accent-500: #22c55e;
  --vc-accent-600: #16a34a;
  --vc-accent-700: #15803d;
  --vc-accent-800: #166534;
  --vc-accent-900: #14532d;
}

.vc-teal {
  --vc-accent-50: #f0fdfa;
  --vc-accent-100: #ccfbf1;
  --vc-accent-200: #99f6e4;
  --vc-accent-300: #5eead4;
  --vc-accent-400: #2dd4bf;
  --vc-accent-500: #14b8a6;
  --vc-accent-600: #0d9488;
  --vc-accent-700: #0f766e;
  --vc-accent-800: #115e59;
  --vc-accent-900: #134e4a;
}

.vc-blue {
  --vc-accent-50: #eff6ff;
  --vc-accent-100: #dbeafe;
  --vc-accent-200: #bfdbfe;
  --vc-accent-300: #93c5fd;
  --vc-accent-400: #60a5fa;
  --vc-accent-500: #3b82f6;
  --vc-accent-600: #2563eb;
  --vc-accent-700: #1d4ed8;
  --vc-accent-800: #1e40af;
  --vc-accent-900: #1e3a8a;
}

.vc-indigo {
  --vc-accent-50: #eef2ff;
  --vc-accent-100: #e0e7ff;
  --vc-accent-200: #c7d2fe;
  --vc-accent-300: #a5b4fc;
  --vc-accent-400: #818cf8;
  --vc-accent-500: #6366f1;
  --vc-accent-600: #4f46e5;
  --vc-accent-700: #4338ca;
  --vc-accent-800: #3730a3;
  --vc-accent-900: #312e81;
}

.vc-purple {
  --vc-accent-50: #faf5ff;
  --vc-accent-100: #f3e8ff;
  --vc-accent-200: #e9d5ff;
  --vc-accent-300: #d8b4fe;
  --vc-accent-400: #c084fc;
  --vc-accent-500: #a855f7;
  --vc-accent-600: #9333ea;
  --vc-accent-700: #7e22ce;
  --vc-accent-800: #6b21a8;
  --vc-accent-900: #581c87;
}

.vc-pink {
  --vc-accent-50: #fdf2f8;
  --vc-accent-100: #fce7f3;
  --vc-accent-200: #fbcfe8;
  --vc-accent-300: #f9a8d4;
  --vc-accent-400: #f472b6;
  --vc-accent-500: #ec4899;
  --vc-accent-600: #db2777;
  --vc-accent-700: #be185d;
  --vc-accent-800: #9d174d;
  --vc-accent-900: #831843;
}

.vc-focus:focus-within {
    outline: 0;
    box-shadow: var(--vc-focus-ring);
  }

.vc-light {
  /* Base */
  --vc-color: var(--vc-gray-900);
  --vc-bg: var(--vc-white);
  --vc-border: var(--vc-gray-300);
  --vc-hover-bg: hsla(211, 25%, 84%, 0.3);
  --vc-focus-ring: 0 0 0 2px rgb(59, 131, 246, 0.4);
  /* Calendar header */
  --vc-header-arrow-color: var(--vc-gray-500);
  --vc-header-arrow-hover-bg: var(--vc-gray-200);
  --vc-header-title-color: var(--vc-gray-900);
  /* Calendar weekdays */
  --vc-weekday-color: var(--vc-gray-500);
  /* Calendar weeknumbers */
  --vc-weeknumber-color: var(--vc-gray-400);
  /* Calendar nav */
  --vc-nav-hover-bg: var(--vc-gray-200);
  --vc-nav-title-color: var(--vc-gray-900);
  --vc-nav-item-hover-box-shadow: none;
  --vc-nav-item-active-color: var(--vc-white);
  --vc-nav-item-active-bg: var(--vc-accent-500);
  --vc-nav-item-active-box-shadow: var(--vc-shadow);
  --vc-nav-item-current-color: var(--vc-accent-600);
  /* Calendar day popover */
  --vc-day-popover-container-color: var(--vc-white);
  --vc-day-popover-container-bg: var(--vc-gray-800);
  --vc-day-popover-container-border: var(--vc-gray-700);
  --vc-day-popover-header-color: var(--vc-gray-700);
  /* Popover content */
  --vc-popover-content-color: var(--vc-gray-900);
  --vc-popover-content-bg: var(--vc-gray-50);
  --vc-popover-content-border: var(--vc-gray-300);
  /* Time picker */
  --vc-time-picker-border: var(--vc-gray-300);
  --vc-time-weekday-color: var(--vc-gray-700);
  --vc-time-month-color: var(--vc-accent-600);
  --vc-time-day-color: var(--vc-accent-600);
  --vc-time-year-color: var(--vc-gray-500);
  /* Time select group */
  --vc-time-select-group-bg: var(--vc-gray-50);
  --vc-time-select-group-border: var(--vc-gray-300);
  --vc-time-select-group-icon-color: var(--vc-accent-500);
  /* Base select */
  --vc-select-color: var(--vc-gray-900);
  --vc-select-bg: var(--vc-gray-100);
  --vc-select-hover-bg: var(--vc-gray-200);
  /* Calendar day */
  --vc-day-content-hover-bg: var(--vc-hover-bg);
  --vc-day-content-disabled-color: var(--vc-gray-400);
}

/* Calendar attributes */

.vc-light.vc-attr,
  .vc-light .vc-attr {
    --vc-content-color: var(--vc-accent-600);
    --vc-highlight-outline-bg: var(--vc-white);
    --vc-highlight-outline-border: var(--vc-accent-600);
    --vc-highlight-outline-content-color: var(--vc-accent-700);
    --vc-highlight-light-bg: var(--vc-accent-200);
    --vc-highlight-light-content-color: var(--vc-accent-900);
    --vc-highlight-solid-bg: var(--vc-accent-600);
    --vc-highlight-solid-content-color: var(--vc-white);
    --vc-dot-bg: var(--vc-accent-600);
    --vc-bar-bg: var(--vc-accent-600);
  }

.vc-dark {
  /* Base */
  --vc-color: var(--vc-white);
  --vc-bg: var(--vc-gray-900);
  --vc-border: var(--vc-gray-700);
  --vc-hover-bg: hsla(216, 15%, 52%, 0.3);
  --vc-focus-ring: 0 0 0 2px rgb(59 130 246 / 0.7);
  /* Calendar header */
  --vc-header-arrow-color: var(--vc-gray-300);
  --vc-header-arrow-hover-bg: var(--vc-gray-800);
  --vc-header-title-color: var(--vc-gray-100);
  /* Calendar weekdays */
  --vc-weekday-color: var(--vc-accent-200);
  /* Calendar weeknumbers */
  --vc-weeknumber-color: var(--vc-gray-500);
  /* Calendar nav */
  --vc-nav-hover-bg: var(--vc-gray-700);
  --vc-nav-title-color: var(--vc-gray-100);
  --vc-nav-item-hover-box-shadow: none;
  --vc-nav-item-active-color: var(--vc-white);
  --vc-nav-item-active-bg: var(--vc-accent-500);
  --vc-nav-item-active-box-shadow: none;
  --vc-nav-item-current-color: var(--vc-accent-400);
  /* Calendar day popover */
  --vc-day-popover-container-color: var(--vc-gray-800);
  --vc-day-popover-container-bg: var(--vc-white);
  --vc-day-popover-container-border: var(--vc-gray-100);
  --vc-day-popover-header-color: var(--vc-gray-300);
  /* Popover content */
  --vc-popover-content-color: var(--vc-white);
  --vc-popover-content-bg: var(--vc-gray-800);
  --vc-popover-content-border: var(--vc-gray-700);
  /* Time picker */
  --vc-time-picker-border: var(--vc-gray-700);
  --vc-time-weekday-color: var(--vc-gray-400);
  --vc-time-month-color: var(--vc-accent-400);
  --vc-time-day-color: var(--vc-accent-400);
  --vc-time-year-color: var(--vc-gray-500);
  /* Time select group */
  --vc-time-select-group-bg: var(--vc-gray-700);
  --vc-time-select-group-border: var(--vc-gray-500);
  --vc-time-select-group-icon-color: var(--vc-accent-400);
  /* Base select */
  --vc-select-color: var(--vc-gray-200);
  --vc-select-bg: var(--vc-gray-700);
  --vc-select-hover-bg: var(--vc-gray-600);
  /* Calendar day */
  --vc-day-content-hover-bg: var(--vc-hover-bg);
  --vc-day-content-disabled-color: var(--vc-gray-600);
}

/* Calendar attributes */

.vc-dark.vc-attr,
  .vc-dark .vc-attr {
    --vc-content-color: var(--vc-accent-500);
    --vc-highlight-outline-bg: var(--vc-gray-900);
    --vc-highlight-outline-border: var(--vc-accent-300);
    --vc-highlight-outline-content-color: var(--vc-accent-200);
    --vc-highlight-light-bg: var(--vc-accent-800);
    --vc-highlight-light-content-color: var(--vc-accent-100);
    --vc-highlight-solid-bg: var(--vc-accent-500);
    --vc-highlight-solid-content-color: var(--vc-white);
    --vc-dot-bg: var(--vc-accent-500);
    --vc-bar-bg: var(--vc-accent-500);
  }

.vc-container {
  position: relative;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: -webkit-max-content;
  width: max-content;
  height: -webkit-max-content;
  height: max-content;
  font-family: var(--vc-font-family);
  color: var(--vc-color);
  background-color: var(--vc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

.vc-container,
  .vc-container * {
    box-sizing: border-box;
  }

.vc-container:focus, .vc-container *:focus {
      outline: none;
    }

/* Hides double border within popovers */

.vc-container .vc-container {
    border: none;
  }

.vc-bordered {
  border: 1px solid;
  border-color: var(--vc-border);
  border-radius: var(--vc-rounded-lg);
}

.vc-expanded {
  min-width: 100%;
}

.vc-transparent {
  background-color: transparent;
}

.vc-date-picker-content {
  padding: 0;
  background-color: var(--vc-bg);
}

.vc-date-picker-content .vc-container {
    border: 0;
  }
.btn-default {
    /*all: unset; !* 기본 스타일 제거 *!*/

    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: .5rem;

    text-align: center;
    white-space: nowrap;

    transition-duration: 200ms;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;

    box-sizing: border-box;

    &:hover {
        opacity: 0.9;
    }
    &:active {

    }

    &:focus {
        outline: none;
    }
    &.full-width {
        width: 100%;
    }

    &:disabled {
        background-color: #383838 !important;
        color: #838383;
        cursor: default;

        &:hover {
            background-color: #383838 !important;
            opacity: 1 !important;
        }
    }

    &.sm { padding: .5rem .625rem; /* 8px 10px */ }
    &.md { padding: .8125rem .625rem; /* 13px 10px */ }
    &.lg { padding: 1.3125rem 1rem; /* 21px 16px */ }
}
/*
 * ---------------------------------------------------------------
 * ## 👉 color variables ##
 *
 * Figma 디자인 가이드가 작성되면, 아래에 컬러를 작성합니다.
 * 해당 변수들은 vite 설정에 의해 어떤 CSS 파일에서도 import 없이 참조할 수 있습니다.
 *
 * key: 디자인 가이드에 작성된 컬러 이름을 사용합니다.
 * value: 전역 CSS 변수 이름으로 작성합니다.
 *
 * 🚫 주의사항: 전역 CSS 변수는 theme.css 파일에 작성되어야 합니다.
 * ---------------------------------------------------------------
 */
.ripple-container[data-v-919c72ef] {
  position: relative;
}
.ripple[data-v-919c72ef] {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  pointer-events: none;
}
.ripple-enter-active[data-v-919c72ef] {
  transition: transform 0.6s, opacity 0.6s;
}
.ripple-leave-active[data-v-919c72ef] {
  transition: opacity 0.6s;
}
.ripple-enter-from[data-v-919c72ef],
.ripple-leave-to[data-v-919c72ef] {
  transform: scale(0);
  opacity: 1;
}
.ripple-enter-to[data-v-919c72ef],
.ripple-leave-from[data-v-919c72ef] {
  transform: scale(4);
  opacity: 0;
}
.btn-default[data-v-6deea2a1] {
  background-color: #ef4122;
  color: white;
  font-size: 12px;
}