@charset "UTF-8";
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

/*the animation definition*/
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    -ms-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 100;
  src: local("Noto Sans Light"), local("NotoSans-Light"), url();
  src: local("Noto Sans Light"), local("NotoSans-Light"), url(../fonts/NotoSans-Light.eot);
  src: url(../fonts/NotoSans-Light.eot?#iefix) format("embedded-opentype"), url(../fonts/NotoSans-Light.woff2) format("woff2"), url(../fonts/NotoSans-Light.woff) format("woff");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 300;
  src: local("Noto Sans Regular"), local("NotoSans-Regular"), url(../fonts/NotoSans-Regular.eot);
  src: url(../fonts/NotoSans-Regular.eot?#iefix) format("embedded-opentype"), url(../fonts/NotoSans-Regular.woff2) format("woff2"), url(../fonts/NotoSans-Regular.woff) format("woff");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 500;
  src: local("Noto Sans Medium"), local("NotoSans-Medium"), url(../fonts/NotoSans-Medium.eot);
  src: url(../fonts/NotoSans-Medium.eot?#iefix) format("embedded-opentype"), url(../fonts/NotoSans-Medium.woff2) format("woff2"), url(../fonts/NotoSans-Medium.woff) format("woff");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 700;
  src: local("Noto Sans Bold"), local("NotoSans-Bold"), url(../fonts/NotoSans-Bold.eot);
  src: url(../fonts/NotoSans-Bold.eot?#iefix) format("embedded-opentype"), url(../fonts/NotoSans-Bold.woff2) format("woff2"), url(../fonts/NotoSans-Bold.woff) format("woff");
}
* {
  box-sizing: border-box;
  color: #000;
  font-family: "Pretendard", sans-serif;
  word-break: keep-all;
}

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,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  font: inherit;
  color: inherit;
  vertical-align: baseline;
}

button {
  cursor: pointer;
}

button,
input {
  font-family: inherit;
}

a {
  text-decoration: none;
  outline: none;
}

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

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  line-height: 1em;
  color: #333;
  position: relative;
  letter-spacing: -0.25px;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  font-family: "Pretendard", sans-serif;
}

body > div > iframe {
  display: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

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

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* box-sizing 규칙을 명시합니다. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 폰트 크기의 팽창을 방지합니다. */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* 기본 여백을 제거하여 작성된 CSS를 더 잘 제어할 수 있습니다. */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* list를 role값으로 갖는 ul, ol 요소의 기본 목록 스타일을 제거합니다. */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* 핵심 body의 기본값을 설정합니다. */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* 제목 요소와 상호작용하는 요소에 대해 line-height를 더 짧게 설정합니다. */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* 제목에 대한 text-wrap을 balance로 설정합니다. */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* 클래스가 없는 기본 a 태그 요소는 기본 스타일을 가져옵니다. */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* 이미지 관련 작업을 더 쉽게 합니다. */
img,
picture {
  max-width: 100%;
  display: block;
}

/* input 및 button 항목들이 글꼴을 상속하도록 합니다. */
input,
button,
textarea,
select {
  font: inherit;
}

/* 행 속성이 없는 textarea가 너무 작지 않도록 합니다. */
textarea:not([rows]) {
  min-height: 10em;
}

/* 고정된 모든 항목에는 여분의 스크롤 여백이 있어야 합니다. */
:target {
  scroll-margin-block: 5ex;
}

.Search_btn {
  color: #ffffff;
  border: 1px solid #dedede;
  width: 100px;
  font-weight: 500;
  height: 40px;
  background: transparent;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 16px;
  min-width: 100px;
  box-shadow: 0px 0px 10px #252537;
  max-width: 100%;
  transition: all 0.3s ease-out;
}

.Btn_hover:hover {
  background: #dedede;
  border-color: #dedede;
  color: #32305e;
}

.UserBtn {
  padding-top: 54px;
  display: flex;
  gap: 20px;
  justify-content: center;
}
.UserBtn .Btn {
  transition: all 0.3s ease-out;
  background: #5146b3;
  border: 0;
  width: 140px;
  height: 50px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
}
.UserBtn .Btn:hover {
  background: #9391ff;
  border-color: #9391ff;
}
.UserBtn .cancel {
  background: transparent;
  border: 2px solid #5146b3;
  color: #9391ff;
}
.UserBtn .cancel:hover {
  background: transparent;
  color: #ffffff;
}

.download_btn {
  background: #299e76;
  border-color: #299e76;
  width: 110px;
  gap: 5px;
}
.download_btn:hover {
  background: #61c7a4;
  border-color: #61c7a4;
}

.Btn-base {
  background: #5146b3;
  border-color: #5146b3;
}
.Btn-base:hover {
  background: #9391ff;
  border-color: #9391ff;
}

.check_btn {
  width: 100px;
  height: 40px;
  color: #07dcc8;
  border-color: #07dcc8;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
}

.CustomBox {
  position: relative;
  width: 240px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid #6a6b9b;
  background-size: 20px;
  cursor: pointer;
  position: relative;
}
.CustomBox.active {
  border-color: #5146b3;
}
.CustomBox.active .custom_option {
  display: block;
  max-height: 300px;
  overflow-y: auto;
}
.CustomBox img {
  position: absolute;
  right: 18px;
  width: 9px;
  top: 15px;
  z-index: 0;
  transform: rotate(90deg);
  height: 9.5px;
}
.CustomBox .label {
  display: flex;
  align-items: center;
  width: inherit;
  color: #ffffff;
  height: inherit;
  border: 0 none;
  font-size: 15px;
  font-weight: 400;
  outline: 0 none;
  padding: 11.8px 46px 12.2px 20.8px;
  background: transparent;
  cursor: pointer;
}
.CustomBox .label::placeholder {
  color: #dedede;
}
.CustomBox .custom_option {
  position: absolute;
  display: none;
  top: 38px;
  left: 0;
  width: 100%;
  background: #252448;
  color: #fff;
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid #5f608e;
  border-radius: 5px;
  padding: 14px 3px;
  z-index: 5;
}
.CustomBox .custom_option::-webkit-scrollbar {
  width: 6px;
}
.CustomBox .custom_option::-webkit-scrollbar-track {
  background: transparent;
}
.CustomBox .custom_option::-webkit-scrollbar-thumb {
  background: #303030;
  border-radius: 45px;
}
.CustomBox .custom_option::-webkit-scrollbar-thumb:hover {
  background: #303030;
}
.CustomBox .optionItem {
  padding: 6px 0 6px 20px;
  font-size: 15px;
  font-weight: 400;
  color: #dedede;
}
.CustomBox .optionItem:hover {
  background: #5146b3;
  font-weight: 700;
}

.box_select {
  background: #28294f;
  height: 40px;
  width: 390px;
}
.box_select .custom_option {
  top: 37px;
}

.btn_tip {
  border: 0;
  background-image: url(../images/tip.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  background-color: transparent;
  margin-left: 10px;
}

.table {
  width: 100%;
  margin: 0 0 0 auto;
}
.table .table_head {
  display: flex;
  height: 43px;
}
.table .table_head li {
  font-size: 15px;
  color: #ffffff;
  font-weight: 600;
  background: #9391ff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.table .table_head li:after {
  content: " ";
  display: inline-block;
  height: 18.18px;
  width: 1px;
  background-color: #ffffff;
  position: absolute;
  right: 0;
}
.table .table_head li:nth-child(1) {
  width: 13.99%;
  border-radius: 5px 0 0 0;
}
.table .table_head li:nth-child(2) {
  width: 21.51%;
}
.table .table_head li:nth-child(3) {
  width: 21.5%;
}
.table .table_head li:nth-child(4) {
  width: 21.5%;
}
.table .table_head li:nth-child(5) {
  width: 21.5%;
  border-right: 0;
}
.table .table_head li:last-child {
  border-radius: 0 5px 0 0;
}
.table .table_head li:last-child:after {
  display: none;
}
.table .table_body {
  display: block;
  max-height: 540px;
  overflow-y: auto;
}
.table .table_body::-webkit-scrollbar {
  width: 4px; /* Adjusted width to account for padding */
}
.table .table_body::-webkit-scrollbar-track {
  background: #3b3d63;
  width: 10px;
}
.table .table_body::-webkit-scrollbar-thumb {
  background: #d1cfff;
  border-radius: 5px;
}
.table .table_body::-webkit-scrollbar-thumb:hover {
  background: #d1cfff;
}
.table .table_body ul {
  display: flex;
  height: 54px;
  border: 1px solid #5a5a7b;
  border-top: 0;
}
@media (max-width: 1559px) {
  .table .table_body ul {
    height: 43px;
  }
}
.table .table_body ul a {
  display: flex;
  width: 100%;
}
.table .table_body ul:hover {
  background-color: rgba(95, 96, 142, 0.38);
}
.table .table_body ul li {
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1cfff;
}
@media (max-width: 1920px) {
  .table .table_body ul li {
    font-size: 15px;
  }
}
.table .table_body ul li:hover {
  color: #ffffff;
  font-weight: 600;
}
.table .table_body ul li.New {
  gap: 7px;
}
.table .table_body ul li.New span {
  padding-left: 20px;
  padding-top: 4px;
}
.table .table_body ul li:nth-child(1) {
  width: 13.99%;
}
.table .table_body ul li:nth-child(2) {
  width: 21.51%;
}
.table .table_body ul li:nth-child(3) {
  width: 21.5%;
}
.table .table_body ul li:nth-child(4) {
  width: 21.5%;
}
.table .table_body ul li:nth-child(5) {
  width: 21.5%;
  border-right: 0;
}
.table .table_body ul:last-child {
  border-radius: 0 0 5px 5px;
}

.table_2 {
  position: relative;
}
.table_2 .table_head li {
  width: 20% !important;
}
.table_2 .table_body ul li {
  width: 20% !important;
}

.table_3 .table_head li:nth-child(1) {
  width: 14.43%;
}
.table_3 .table_head li:nth-child(2) {
  width: 28.43%;
}
.table_3 .table_head li:nth-child(3) {
  width: 28.43%;
}
.table_3 .table_head li:nth-child(4) {
  width: 14.35%;
}
.table_3 .table_head li:nth-child(5) {
  width: 14.35%;
}
.table_3 .table_body ul li:nth-child(1) {
  width: 14.43%;
}
.table_3 .table_body ul li:nth-child(2) {
  width: 28.43%;
}
.table_3 .table_body ul li:nth-child(3) {
  width: 28.43%;
}
.table_3 .table_body ul li:nth-child(4) {
  width: 14.35%;
}
.table_3 .table_body ul li:nth-child(5) {
  width: 14.35%;
}

.table_4 .table_head li:nth-child(1) {
  width: 14.38%;
}
.table_4 .table_head li:nth-child(2) {
  width: 23.26%;
}
.table_4 .table_head li:nth-child(3) {
  width: 23.26%;
}
.table_4 .table_head li:nth-child(4) {
  width: 39.09%;
}
.table_4 .table_body ul li:nth-child(1) {
  width: 14.38%;
}
.table_4 .table_body ul li:nth-child(2) {
  width: 23.26%;
}
.table_4 .table_body ul li:nth-child(3) {
  width: 23.26%;
}
.table_4 .table_body ul li:nth-child(4) {
  width: 39.09%;
}

.table_5 .table_body ul a {
  display: flex;
  width: 100%;
}

.table_6 .table_head li:nth-child(1) {
  width: 14.29%;
}
.table_6 .table_head li:nth-child(2) {
  width: 20%;
}
.table_6 .table_head li:nth-child(3) {
  width: 14.29%;
}
.table_6 .table_head li:nth-child(4) {
  width: 37.14%;
}
.table_6 .table_head li:nth-child(5) {
  width: 14.29%;
}
.table_6 .table_body ul a {
  display: flex;
  width: 100%;
}
.table_6 .table_body ul li:nth-child(1) {
  width: 14.29%;
}
.table_6 .table_body ul li:nth-child(2) {
  width: 20%;
}
.table_6 .table_body ul li:nth-child(3) {
  width: 14.29%;
}
.table_6 .table_body ul li:nth-child(4) {
  width: 37.14%;
}
.table_6 .table_body ul li:nth-child(5) {
  width: 14.29%;
}

.table_tab {
  font-size: 18px;
  font-weight: 700;
  width: 100%;
  margin: 0 0 0 auto;
  position: relative;
  height: 42px;
}
.table_tab .chart_btn {
  width: 156px;
  height: 51px;
  letter-spacing: 0;
  background-image: url(../images/table_tab2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;
  border: 0;
  padding: 0;
  position: absolute;
  z-index: 0;
  left: -5px;
  bottom: -12px;
  display: flex;
  align-items: center;
  padding-left: 50px;
  padding-bottom: 11px;
}
.table_tab .chart_btn.active {
  z-index: 2;
  background-image: url(../images/c_table_tab2.png);
}
.table_tab .table_btn {
  width: 173px;
  height: 42px;
  background-image: url(../images/c_table_tab.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;
  letter-spacing: 0;
  border: 0;
  position: absolute;
  left: 130px;
  z-index: 1;
  bottom: -1px;
  font-weight: 700;
}
.table_tab .table_btn.active {
  background-image: url(../images/table_tab.png);
}
.table_tab button {
  color: #28294f;
}

.table .table_body .no-data li {
  width: 100% !important;
  text-align: center;
}

.Search_input {
  width: 280px;
  height: 40px;
  border: 1px solid #6a6b9b;
  padding: 2px 26px 0 25px;
  position: relative;
  cursor: pointer;
  outline: none;
  font-size: 15px;
  font-weight: 400;
  color: #dedede;
}
.Search_input::placeholder {
  font-size: 16px;
  color: #b7b7b7;
  font-weight: 400;
}

.Search_input2 {
  border-color: #dedede;
}

.selectbox {
  position: relative;
}
.selectbox img {
  position: absolute;
  top: 19px;
  right: 26px;
  z-index: -1;
  transform: rotate(90deg);
}

.dateBox {
  position: relative;
}
.dateBox::before {
  content: " ";
  position: absolute;
  right: 18px;
  top: 12px;
  z-index: -1;
  width: 14px;
  height: 14px;
  background-image: url("../images/date.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none; /* 테두리 제거 */
  outline: none; /* 아웃라인 제거 */
}
.dateBox.open::before {
  background-image: url("../images/date2.svg");
}

.textarea {
  background: #28294f;
  width: 390px;
  color: white;
  height: 180px;
  border: 1px solid #7374a2;
  border-radius: 5px;
  resize: none;
  outline: none;
  padding: 10px 24px;
}
.textarea::placeholder {
  color: #7374a2;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 100px;
  left: calc(50% + 40px);
  transform: translate(-50%, 0);
  transition: left 0.5s ease-out;
}
.pagination span:nth-child(1) {
  transform: rotate(180deg);
  padding-left: 40px;
}
.pagination span:nth-child(2) {
  transform: rotate(180deg);
}
.pagination span:last-child {
  padding-left: 40px;
}
.pagination ul {
  display: flex;
  align-items: center;
  padding: 0 40px;
}
.pagination ul li button {
  border: 0;
  background: transparent;
  font-size: 16px;
  width: 40px;
  padding: 0;
  height: 40px;
  color: #ffffff;
  font-weight: 400;
}
.pagination ul li button.active {
  border: 2px solid #3b3d63;
  border-radius: 10px;
}
.pagination ul li button:hover {
  border: 2px solid #3b3d63;
  border-radius: 10px;
}

.box {
  background: #3b3d63;
  border-radius: 10px;
  padding: 50px 70px;
  max-width: 622px;
  width: 100%;
  margin: 0 auto;
}
.box ul {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.box ul li {
  display: flex;
  align-items: center;
}
.box label {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.5px;
  color: #ffffff;
  width: 90px;
  display: inline-block;
}
.box input {
  background: #28294f;
  border: 1px solid #7374a2;
  border-radius: 5px;
  color: #dedede;
  font-weight: 600;
  font-size: 16px;
  width: 390px;
  height: 40px;
  outline: 0;
  padding: 10.5px 23.5px;
}
.box input::placeholder {
  font-weight: 400;
  font-size: 16px;
  color: #7374a2;
}
.box input.UserInputBox {
  background: #7374a2;
  font-weight: 400;
  font-size: 16px;
}
.box .error-message {
  align-items: flex-start;
}
.box .error-message > div {
  position: relative;
  z-index: 0;
}
.box .error-message label {
  height: 40px;
  display: flex;
  align-items: center;
}
.box .error-message .validation-message {
  position: absolute;
  left: 0;
  display: block;
  padding-top: 6px;
  letter-spacing: -0.5px;
  padding-left: 17px;
  font-size: 12px;
  color: #cc7986;
  font-weight: 400;
}

.box2 label {
  width: 120px;
}
.box2 input {
  padding: 10.5px 17px;
  width: 360px;
  letter-spacing: -0.5px;
}

.box3 input.UserInputBox {
  background: #28294f;
}
.box3 ul li:last-child {
  align-items: flex-start;
}
.box3 ul li:last-child label {
  padding-top: 15px;
}

.box4 .CustomBox .UserInputBox {
  border-color: #7374a2;
}
.box4 ul {
  gap: 30px;
}
.box4 ul img {
  top: 12px;
}
.box4 input.UserInputBox {
  background: #28294f;
  font-size: 18px;
  font-weight: 600;
}

.Popup .Popup_background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(59, 61, 99, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 51;
}
.Popup .Popup_box {
  background: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 390px;
  width: 100%;
  letter-spacing: -0.5px;
  z-index: 51;
  border-radius: 10px;
  padding: 30px 30px 40.6px;
}
.Popup .Popup_box .Popup_close {
  text-align: right;
}
.Popup .Popup_box .Popup_close button {
  background: transparent;
  border: 0;
  width: 16px;
  padding: 0;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  background-image: url(../images/close2.svg);
}
.Popup .Popup_box .Popup_text {
  text-align: center;
  color: #3b3d63;
  font-size: 21px;
  padding-top: 25px;
  padding-bottom: 41px;
  font-weight: 700;
}
.Popup .Popup_box .Popup_text b {
  color: #9391ff;
}
.Popup .Popup_box .Popup_btn {
  display: flex;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  height: 46px;
  gap: 17px;
}
.Popup .Popup_box .Popup_btn button {
  width: 140px;
  background: #5146b3;
  border: 0;
  height: 100%;
  color: #ffffff;
  padding: 0;
  border-radius: 10px;
}
.Popup .Popup_box .Popup_btn button.cancel {
  background: #ffffff;
  border: 1px solid #5146b3;
  color: #5146b3;
}

.company_popup .Popup_box {
  padding-bottom: 42.2px;
}
.company_popup .Popup_box .Popup_text {
  padding-top: 20px;
  padding-bottom: 33px;
}
.company_popup .Popup_box .Popup_text span {
  font-size: 21px;
  font-weight: 600;
  padding-bottom: 19px;
}
.company_popup .Popup_box .Popup_text p {
  font-size: 18px;
  font-weight: 700;
  color: #ff5b63;
  padding-top: 15px;
}
.company_popup .Popup_box .Popup_btn {
  display: flex;
  justify-content: center;
  gap: 17px;
}
.company_popup .Popup_box .Popup_btn button {
  width: 140px;
}
.company_popup .Popup_box .Popup_btn button.cancel {
  background: #ffffff;
  border: 1px solid #5146b3;
  color: #5146b3;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.splash-wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
  text-align: center;
  background: linear-gradient(180deg, rgb(53, 50, 98) 0%, rgba(44, 49, 91, 0.9780287115) 100%);
}
.splash-wrapper .splash-header {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 57px;
}
.splash-wrapper .splash-header img {
  width: 12rem;
}
.splash-wrapper .splash-footer {
  position: absolute;
  left: 50%;
  bottom: 100px;
  font-size: 1rem;
  color: #fff;
  transform: translateX(-50%);
}
.splash-wrapper .loading-spinner {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash-wrapper .loading-spinner .loading-progress {
  width: 100px;
  height: 100px;
  background-image: url(../images/loading.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
}
.splash-wrapper .loading-spinner .loading-progress-text {
  font-size: 24px;
  color: white;
}
.splash-wrapper .loading-progress-text {
  color: #fff;
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.splash-wrapper .loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "Loading");
  font-size: 1.2rem;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  background: #852125;
  padding: 20px 27px;
  padding-right: 35px;
  border: 2px solid #ff5b63;
  color: white;
  z-index: 2;
  border-radius: 5px;
  box-shadow: 3px 3px 5px black;
  width: 218px;
  right: -100px;
  z-index: 2;
  letter-spacing: -0.6px;
}
.tooltip::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: 50%;
  bottom: -11px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #852125;
  border-bottom: 2px solid #ff5b63;
  border-right: 2px solid #ff5b63;
}
.tooltip .close {
  border: 0;
  background-image: url(../images/close3.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  right: 13px;
  top: 12px;
}

.hidden {
  display: none !important;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

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

.fix {
  background-color: #7374a2 !important;
  border-color: #7374a2 !important;
}
.fix::placeholder {
  color: white !important;
}

.message {
  position: relative;
}

.New::after {
  content: "N";
  display: inline-block;
  font-size: 8px;
  font-weight: 500;
  background: #07dcc8;
  border-radius: 50%;
  width: 11px;
  height: 11px;
  color: #28294f;
  display: flex;
  align-items: center;
  justify-content: center;
}

.MainTitle {
  font-weight: 500;
  font-size: 46px;
  color: white;
  line-height: 56px;
}
@media (max-width: 1559px) {
  .MainTitle {
    font-size: 38px;
  }
}

.SubTitle {
  font-weight: 300;
  color: #ababab;
  padding-bottom: 13.2px;
  font-size: 24px;
  letter-spacing: -0.5px;
  line-height: 29px;
}
@media (max-width: 1559px) {
  .SubTitle {
    font-size: 16px;
    padding-bottom: 0;
  }
}

.center {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.account_box_label {
  display: flex !important;
  gap: 5px;
}

body.MenuOpen .container {
  padding-left: 340px;
  padding-right: 0;
}
@media (max-width: 1820px) {
  body.MenuOpen .container {
    padding-left: 290px;
    padding-right: 50px;
  }
}
body.MenuOpen .Side_Tap_Menu {
  transform: translateX(0);
}
body.MenuOpen .pagination {
  left: calc(50% + 120px);
}

.Main {
  height: 100vh;
  width: 100vw;
  background: linear-gradient(180deg, rgb(53, 50, 98) 0%, rgba(44, 49, 91, 0.9780287115) 100%);
}
.Main .container {
  min-height: calc(100vh - 80px);
  padding-left: 80px;
  transition: padding-left 0.5s ease-out, padding-right 0.5s ease-out;
  width: 100%;
  padding-top: 132px;
  padding-bottom: 167px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-right: 128px;
  padding-left: 210px;
}
@media (max-width: 1559px) {
  .Main .container {
    padding-right: 140px;
    padding-left: 200px;
    padding-top: 40px !important;
  }
}
.Main .container.position_relative {
  position: relative;
}
.Main .container > section {
  max-width: 1600px;
  width: 100%;
}

.Mainhead {
  padding-bottom: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.Mainhead .SearchBox {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
}

.padding-80 {
  padding-bottom: 100px;
}
@media (max-width: 1559px) {
  .padding-80 {
    padding-bottom: 80px;
  }
}

.padding-50 {
  padding-bottom: 50px;
}

header {
  display: flex;
  height: 80px;
  padding-left: 117px;
  padding-right: 45.5px;
  align-items: center;
  background: #252448;
  justify-content: space-between;
  transition: margin-left 0.5s ease-out;
}
@media (max-width: 1559px) {
  header {
    height: 60px;
    padding-left: 89px;
  }
}
header .Logo {
  width: 270px;
}
header .UserTabIcon {
  display: flex;
  align-items: center;
}
header .UserTabIcon > span {
  font-size: 18px;
  font-weight: 300;
  color: #9391ff;
  padding-right: 46px;
}
header .UserTabIcon > span b {
  font-size: 18px;
  color: white;
  padding-left: 10px;
}
@media (max-width: 1559px) {
  header .UserTabIcon > span b {
    font-size: 16px;
  }
}
header .UserTabIcon .User_alarm {
  position: relative;
  display: flex;
}
header .UserTabIcon .User_alarm button {
  border: 0;
  background-image: url(../images/bell.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 28px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background-color: transparent;
  position: relative;
}
@media (max-width: 1559px) {
  header .UserTabIcon .User_alarm button {
    width: 25px;
    height: 28px;
  }
}
header .UserTabIcon .User_alarm button.active {
  background-image: url(../images/bell2.png);
}
header .UserTabIcon .User_alarm button.active::after {
  content: " ";
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #9391ff;
}
header .UserTabIcon .User_alarm button.alarm_after::after {
  content: " ";
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff5b63;
}
header .UserTabIcon .User_Icon {
  margin-left: 44px;
  position: relative;
  display: flex;
}
header .UserTabIcon .User_Icon button {
  border: 0;
  background-image: url(../images/User.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  width: 23.44px;
  height: 23.44px;
  padding: 0;
  border-radius: 50%;
}
@media (max-width: 1559px) {
  header .UserTabIcon .User_Icon button {
    width: 22px;
    height: 22px;
  }
}
header .UserTabIcon .User_Icon button.active {
  background-image: url(../images/L_user.svg);
  box-shadow: 0 10px 30px rgba(147, 145, 255, 0.53);
}
header .UserTabIcon .User_Icon button.active2 {
  background-image: url(../images/L_user.svg);
  box-shadow: 0 10px 30px rgba(147, 145, 255, 0.53);
}
header .UserTabIcon .User_Icon .UserMenu {
  position: absolute;
  top: 32px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  width: 162px;
  z-index: 1;
  right: -10px;
  height: auto;
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
header .UserTabIcon .User_Icon .UserMenu li {
  height: 44px;
}
header .UserTabIcon .User_Icon .UserMenu li a {
  font-size: 15px;
  width: 100%;
  height: 100%;
  display: flex;
  letter-spacing: -0.75px;
  padding-left: 30px;
  align-items: center;
  font-weight: 500;
}
header .UserTabIcon .User_Icon .UserMenu li:hover a {
  background: #eff0ff;
  color: #5146b3;
  font-weight: 700;
}

.Side_Tab_MenuList {
  width: 80px;
  position: fixed;
  top: 0;
  z-index: 1;
  height: 100%;
  background: #3b3d63;
}
@media (max-width: 1559px) {
  .Side_Tab_MenuList {
    width: 60px;
  }
}
.Side_Tab_MenuList .TabMenuBar {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0px 0px 20px RGB(147, 145, 255, 0.3);
}
@media (max-width: 1559px) {
  .Side_Tab_MenuList .TabMenuBar {
    width: 60px;
    height: 60px;
  }
}
.Side_Tab_MenuList .TabMenuBar button {
  background: transparent;
  border: transparent;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.Side_Tab_MenuList .TabMenuBar button img {
  width: 23.69px;
  height: 19.07px;
}
@media (max-width: 1559px) {
  .Side_Tab_MenuList .TabMenuBar button img {
    width: 20px;
    height: auto;
  }
}
.Side_Tab_MenuList ul {
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 61.8px;
}
.Side_Tab_MenuList ul li a {
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  width: 28px;
  height: 28px;
  border: 0;
  display: inline-block;
}
@media (max-width: 1559px) {
  .Side_Tab_MenuList ul li a {
    width: 24px;
    height: 24px;
  }
}
.Side_Tab_MenuList ul .home {
  background-image: url(../images/home.svg);
}
.Side_Tab_MenuList ul .home:hover, .Side_Tab_MenuList ul .home.active {
  background-image: url(../images/home2.svg);
}
.Side_Tab_MenuList ul .chart {
  background-image: url(../images/chart.svg);
}
.Side_Tab_MenuList ul .chart:hover, .Side_Tab_MenuList ul .chart.active {
  background-image: url(../images/chart2.svg);
}
.Side_Tab_MenuList ul .group {
  background-image: url(../images/group.svg);
}
@media (max-width: 1559px) {
  .Side_Tab_MenuList ul .group {
    background-size: contain;
  }
}
.Side_Tab_MenuList ul .group:hover, .Side_Tab_MenuList ul .group.active {
  background-image: url(../images/group2.svg);
}
.Side_Tab_MenuList ul .sensor {
  background-image: url(../images/sensor.svg);
}
@media (max-width: 1559px) {
  .Side_Tab_MenuList ul .sensor {
    background-size: contain;
  }
}
.Side_Tab_MenuList ul .sensor:hover, .Side_Tab_MenuList ul .sensor.active {
  background-image: url(../images/sensor2.svg);
}
.Side_Tab_MenuList ul .company {
  background-image: url(../images/company.svg);
}
@media (max-width: 1559px) {
  .Side_Tab_MenuList ul .company {
    background-size: contain;
  }
}
.Side_Tab_MenuList ul .company:hover, .Side_Tab_MenuList ul .company.active {
  background-image: url(../images/w_company.svg);
}

.Side_Tap_Menu {
  position: fixed;
  top: 0;
  width: 340px;
  height: 100vh;
  z-index: 50;
  background: #3b3d63;
  transition: transform 0.5s ease-out;
  transform: translateX(-100%);
}
@media (max-width: 1820px) {
  .Side_Tap_Menu {
    width: 240px;
  }
}
.Side_Tap_Menu .Side_Menu_Logo {
  padding-top: 30px;
  padding-left: 48.2px;
  padding-right: 27px;
  height: 80px;
  border-bottom: 0.5px solid #9391ff;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1559px) {
  .Side_Tap_Menu .Side_Menu_Logo {
    height: 60px;
    padding-top: 0;
    align-items: center;
  }
}
.Side_Tap_Menu .Side_Menu_Logo > img {
  object-fit: cover;
  width: 87.25px;
  height: 28.67px;
}
.Side_Tap_Menu .Side_Menu_Logo button {
  background: transparent;
  border: 0;
  width: 15px;
  height: 15px;
  padding: 0;
  margin-top: 6px;
}
.Side_Tap_Menu .Side_Menu_Logo button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.Side_Tap_Menu .MenuList {
  height: calc(100% - 80px);
  padding-top: 59px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (max-width: 1559px) {
  .Side_Tap_Menu .MenuList {
    height: calc(100% - 60px);
    padding-top: 30px;
  }
}
.Side_Tap_Menu .MenuList > li {
  padding: 0 47px 0 53px;
  height: 63px;
  display: flex;
  width: 100%;
}
@media (max-width: 1820px) {
  .Side_Tap_Menu .MenuList > li {
    padding: 0 26px 0 43px;
  }
}
.Side_Tap_Menu .MenuList > li i {
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  width: 28px;
  height: 28px;
  border: 0;
  display: inline-block;
}
@media (max-width: 1559px) {
  .Side_Tap_Menu .MenuList > li i {
    width: 24px;
    height: 24px;
  }
}
.Side_Tap_Menu .MenuList > li .home {
  background-image: url(../images/home.svg);
}
.Side_Tap_Menu .MenuList > li .home.active {
  background-image: url(../images/home2.svg);
}
.Side_Tap_Menu .MenuList > li .chart {
  background-image: url(../images/chart.svg);
}
.Side_Tap_Menu .MenuList > li .chart.active {
  background-image: url(../images/chart2.svg);
}
.Side_Tap_Menu .MenuList > li .group {
  background-image: url(../images/group.svg);
}
@media (max-width: 1559px) {
  .Side_Tap_Menu .MenuList > li .group {
    background-size: contain;
  }
}
.Side_Tap_Menu .MenuList > li .group.active {
  background-image: url(../images/group2.svg);
}
.Side_Tap_Menu .MenuList > li .sensor {
  background-image: url(../images/sensor.svg);
}
@media (max-width: 1559px) {
  .Side_Tap_Menu .MenuList > li .sensor {
    background-size: contain;
  }
}
.Side_Tap_Menu .MenuList > li .sensor.active {
  background-image: url(../images/sensor2.svg);
}
.Side_Tap_Menu .MenuList > li .company {
  background-image: url(../images/company.svg);
}
@media (max-width: 1559px) {
  .Side_Tap_Menu .MenuList > li .company {
    background-size: contain;
  }
}
.Side_Tap_Menu .MenuList > li .company.active {
  background-image: url(../images/w_company.svg);
}
.Side_Tap_Menu .MenuList > li:hover {
  background: #5146b3;
}
.Side_Tap_Menu .MenuList > li:hover.CompanyTabMenu {
  background-color: rgba(81, 70, 179, 0.4);
}
.Side_Tap_Menu .MenuList > li:hover span {
  font-weight: 700;
  color: #ffffff;
}
.Side_Tap_Menu .MenuList > li:hover .home {
  background-image: url(../images/home2.svg);
}
.Side_Tap_Menu .MenuList > li:hover .chart {
  background-image: url(../images/chart2.svg);
}
.Side_Tap_Menu .MenuList > li:hover .group {
  background-image: url(../images/group2.svg);
}
@media (max-width: 1559px) {
  .Side_Tap_Menu .MenuList > li:hover .group {
    background-size: contain;
  }
}
.Side_Tap_Menu .MenuList > li:hover .sensor {
  background-image: url(../images/sensor2.svg);
}
@media (max-width: 1559px) {
  .Side_Tap_Menu .MenuList > li:hover .sensor {
    background-size: contain;
  }
}
.Side_Tap_Menu .MenuList > li:hover .company {
  background-image: url(../images/w_company.svg);
}
@media (max-width: 1559px) {
  .Side_Tap_Menu .MenuList > li:hover .company {
    background-size: contain;
  }
}
.Side_Tap_Menu .MenuList > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.Side_Tap_Menu .MenuList > li > a > div {
  display: flex;
  align-items: center;
  gap: 17px;
}
.Side_Tap_Menu .MenuList > li > a > div span {
  font-size: 18px;
  font-weight: 400;
  color: #dedede;
}
.Side_Tap_Menu .MenuList > li > a img:last-child {
  height: 13px;
  width: 7px;
  object-fit: cover;
}
.Side_Tap_Menu .MenuList > li > a.active {
  font-size: 16px;
  font-weight: 600;
}
.Side_Tap_Menu .MenuList > li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: 0;
  width: 100%;
  height: 63px;
  padding: 0;
}
.Side_Tap_Menu .MenuList > li button > div {
  display: flex;
  align-items: center;
  gap: 17px;
}
.Side_Tap_Menu .MenuList > li button > div span {
  font-size: 18px;
  font-weight: 400;
  color: #dedede;
}
.Side_Tap_Menu .MenuList > li button img:last-child {
  height: 13px;
  width: 7px;
  object-fit: cover;
}
.Side_Tap_Menu .MenuList .CompanyMenu {
  display: none;
}
.Side_Tap_Menu .MenuList .CompanyTabMenu {
  background: rgba(81, 70, 179, 0.4);
  height: 300px;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.Side_Tap_Menu .MenuList .CompanyTabMenu button {
  border-bottom: 1px solid #9391ff;
  padding: 0 47px 0 57px;
}
@media (max-width: 1820px) {
  .Side_Tap_Menu .MenuList .CompanyTabMenu button {
    padding: 0 26px 0 43px;
  }
}
.Side_Tap_Menu .MenuList .CompanyTabMenu button .company {
  background-image: url(../images/w_company.svg);
}
@media (max-width: 1559px) {
  .Side_Tap_Menu .MenuList .CompanyTabMenu button .company {
    background-size: contain;
  }
}
.Side_Tap_Menu .MenuList .CompanyTabMenu button .group {
  background-image: url(../images/group2.svg);
}
@media (max-width: 1559px) {
  .Side_Tap_Menu .MenuList .CompanyTabMenu button .group {
    background-size: contain;
  }
}
.Side_Tap_Menu .MenuList .CompanyTabMenu button span {
  color: #ffffff;
  font-weight: 500;
}
.Side_Tap_Menu .MenuList .CompanyTabMenu button img:last-child {
  transform: rotate(90deg);
}
.Side_Tap_Menu .MenuList .CompanyTabMenu .CompanyMenu {
  display: block;
  padding-top: 20px;
  padding-left: 111px;
  font-size: 18px;
  font-weight: 300;
  color: #ffffff;
  line-height: 2;
}
@media (max-width: 1820px) {
  .Side_Tap_Menu .MenuList .CompanyTabMenu .CompanyMenu {
    padding-left: 97.2px;
    padding-top: 23px;
  }
}
.Side_Tap_Menu .MenuList .CompanyTabMenu .CompanyMenu ul li > a {
  font-size: 16px;
  font-weight: 300;
}
.Side_Tap_Menu .MenuList .CompanyTabMenu .CompanyMenu ul li > a:hover {
  font-size: 18px;
  font-weight: 600;
}
.Side_Tap_Menu .MenuList .CompanyTabMenu .CompanyMenu ul li > a.active {
  font-size: 18px;
  font-weight: 600;
}

@keyframes notyf-fadeinup {
  0% {
    opacity: 0;
    transform: translateY(25%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes notyf-fadeinleft {
  0% {
    opacity: 0;
    transform: translateX(25%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes notyf-fadeoutright {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(25%);
  }
}
@keyframes notyf-fadeoutdown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(25%);
  }
}
@keyframes ripple {
  0% {
    transform: scale(0) translateY(-45%) translateX(13%);
  }
  100% {
    transform: scale(1) translateY(-45%) translateX(13%);
  }
}
.notyf {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  color: #ffffff;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  box-sizing: border-box;
  padding: 20px;
}
.notyf__icon--error, .notyf__icon--success {
  height: 21px;
  width: 21px;
  background: white;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  position: relative;
}
.notyf__icon--error:after, .notyf__icon--error:before {
  content: "";
  background: currentColor;
  display: block;
  position: absolute;
  width: 3px;
  border-radius: 3px;
  left: 9px;
  height: 12px;
  top: 5px;
}
.notyf__icon--error:after {
  transform: rotate(-45deg);
}
.notyf__icon--error:before {
  transform: rotate(45deg);
}
.notyf__icon--success:after, .notyf__icon--success:before {
  content: "";
  background: currentColor;
  display: block;
  position: absolute;
  width: 3px;
  border-radius: 3px;
}
.notyf__icon--success:after {
  height: 6px;
  transform: rotate(-45deg);
  top: 9px;
  left: 6px;
}
.notyf__icon--success:before {
  height: 11px;
  transform: rotate(45deg);
  top: 5px;
  left: 10px;
}
.notyf__toast {
  display: block;
  overflow: hidden;
  pointer-events: auto;
  animation: notyf-fadeinup 0.3s ease-in forwards;
  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.25);
  position: relative;
  padding: 0 15px;
  border-radius: 2px;
  max-width: 300px;
  transform: translateY(25%);
  box-sizing: border-box;
  flex-shrink: 0;
}
.notyf__toast--disappear {
  transform: translateY(0);
  animation: notyf-fadeoutdown 0.3s forwards;
  animation-delay: 0.25s;
}
.notyf__toast--disappear .notyf__message, .notyf__toast--disappear .notyf__icon {
  animation: notyf-fadeoutdown 0.3s forwards;
  opacity: 1;
  transform: translateY(0);
}
.notyf__toast--disappear .notyf__dismiss {
  animation: notyf-fadeoutright 0.3s forwards;
  opacity: 1;
  transform: translateX(0);
}
.notyf__toast--disappear .notyf__message {
  animation-delay: 0.05s;
}
.notyf__toast--upper {
  margin-bottom: 20px;
}
.notyf__toast--lower {
  margin-top: 20px;
}
.notyf__toast--dismissible .notyf__wrapper {
  padding-right: 30px;
}
.notyf__ripple {
  height: 400px;
  width: 400px;
  position: absolute;
  transform-origin: bottom right;
  right: 0;
  top: 0;
  border-radius: 50%;
  transform: scale(0) translateY(-51%) translateX(13%);
  z-index: 5;
  animation: ripple 0.4s ease-out forwards;
}
.notyf__wrapper {
  display: flex;
  align-items: center;
  padding-top: 17px;
  padding-bottom: 17px;
  padding-right: 15px;
  border-radius: 3px;
  position: relative;
  z-index: 10;
}
.notyf__icon {
  width: 22px;
  text-align: center;
  font-size: 1.3em;
  opacity: 0;
  animation: notyf-fadeinup 0.3s forwards;
  animation-delay: 0.3s;
  margin-right: 13px;
}
.notyf__dismiss {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 26px;
  margin-right: -15px;
  animation: notyf-fadeinleft 0.3s forwards;
  animation-delay: 0.35s;
  opacity: 0;
}
.notyf__dismiss-btn {
  background-color: rgba(0, 0, 0, 0.25);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  outline: none;
  opacity: 0.35;
  height: 100%;
  width: 100%;
}
.notyf__dismiss-btn:after, .notyf__dismiss-btn:before {
  content: "";
  background: white;
  height: 12px;
  width: 2px;
  border-radius: 3px;
  position: absolute;
  left: calc(50% - 1px);
  top: calc(50% - 5px);
}
.notyf__dismiss-btn:after {
  transform: rotate(-45deg);
}
.notyf__dismiss-btn:before {
  transform: rotate(45deg);
}
.notyf__dismiss-btn:hover {
  opacity: 0.7;
  background-color: rgba(0, 0, 0, 0.15);
}
.notyf__dismiss-btn:active {
  opacity: 0.8;
}
.notyf__message {
  vertical-align: middle;
  position: relative;
  opacity: 0;
  animation: notyf-fadeinup 0.3s forwards;
  animation-delay: 0.25s;
  line-height: 1.5em;
}

/* Small screens */
@media only screen and (max-width: 480px) {
  .notyf {
    padding: 0;
  }
  .notyf__ripple {
    height: 600px;
    width: 600px;
    animation-duration: 0.5s;
  }
  .notyf__toast {
    max-width: initial;
    border-radius: 0;
    box-shadow: 0px -2px 7px 0px rgba(0, 0, 0, 0.13);
    width: 100%;
  }
  .notyf__dismiss {
    width: 56px;
  }
}
.daum-postcode {
  position: absolute;
  top: 41px;
  left: 0;
  width: 100%;
  height: 400px; /* 원하는 높이로 설정 */
  display: none !important;
  z-index: 1;
}
.daum-postcode.open {
  display: block !important;
}

.find {
  height: 100vh;
  width: 100vw;
  background-image: url("../images/FindBackground.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.find .find_container {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
  max-width: 540px;
  margin: 0 auto;
}
.find .find_container .title {
  font-size: 34px;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: -0.35px;
  line-height: 40px;
  padding-bottom: 54px;
}
.find .find_container .find_Btn {
  font-size: 23px;
  line-height: 1.5;
  font-weight: 300;
  color: #9a9a9a;
  display: flex;
  width: 100%;
}
.find .find_container .find_Btn a {
  width: 100%;
  display: block;
  text-align: center;
  line-height: 27px;
  padding-bottom: 18px;
  position: relative;
}
.find .find_container .find_Btn .active {
  font-weight: 400;
  color: #ffffff;
}
.find .find_container .find_Btn .active::after {
  content: " ";
  display: inline;
  position: absolute;
  width: 270px;
  height: 5px;
  bottom: -2px;
  left: 0px;
  background: #9391ff;
}
.find .find_container form .find_wrap {
  padding: 60px 29.15px;
  width: 100%;
  border-top: 0.5px solid #9a9a9a;
  border-bottom: 0.5px solid #9a9a9a;
}
.find .find_container form .find_wrap .User_input ul {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.find .find_container form .find_wrap .User_input ul li {
  display: flex;
  align-items: flex-start;
  height: auto;
}
.find .find_container form .find_wrap .User_input ul li .message .validation-message {
  display: block;
  font-size: 12px;
  color: #ff9196;
  font-weight: 400;
  padding-left: 20px;
  padding-top: 8px;
  position: absolute;
  left: 0;
}
.find .find_container form .find_wrap .User_input ul li span {
  color: white;
  font-size: 18px;
  line-height: 40px;
  width: 90px;
  display: inline-block;
  font-weight: 500;
}
.find .find_container form .find_wrap .User_input ul li input {
  width: 390px;
  background: transparent;
  border: 1px solid #7374a2;
  padding: 10.5px 23.4px;
  border-radius: 5px;
  height: 100%;
  outline: none;
  color: #ffffff;
  height: 40px;
  font-size: 18px;
  font-weight: 600;
}
.find .find_container form .find_wrap .User_input ul li input::placeholder {
  color: #7374a2;
  font-size: 16px;
  font-weight: 400;
}
.find .find_container form .find_wrap .User_input ul li input:focus {
  border: 2px solid #9391ff;
}
.find .find_container form .find_wrap .User_input ul li input:focus::placeholder {
  color: transparent;
}
.find .find_container form .find_wrap .User_input ul li .NumberError {
  position: relative;
}
.find .find_container form .find_wrap .User_input ul li > .UserEmail > div {
  display: flex;
  gap: 6px;
}
.find .find_container form .find_wrap .User_input ul li > .UserEmail > div input {
  width: 264px;
}
.find .find_container form .find_wrap .User_input ul li > .UserEmail > div button {
  width: 120px;
  font-size: 16px;
  background-color: transparent;
  border: 1px solid #07dcc8;
  color: #07dcc8;
  font-weight: 500;
  border-radius: 5px;
}
.find .find_container .found_wrap {
  height: 300px;
  border-top: 0.5px solid #9a9a9a;
  border-bottom: 0.5px solid #9a9a9a;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 41.5px;
}
.find .find_container .found_wrap .found_User_id {
  font-size: 26px;
  color: white;
  font-weight: 400;
}
.find .find_container .found_wrap .found_User_id b {
  color: #9391ff;
}
.find .find_container .found_wrap .find_User_pw {
  font-size: 18px;
  color: #b7b7b7;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}
.find .find_container .found_wrap .find_User_pw a {
  text-decoration: underline;
  color: white;
}
.find .find_container .found_wrap .found_User_pw {
  text-align: center;
}
.find .find_container .found_wrap .found_User_pw .found_User_head {
  font-size: 26px;
  color: #ffffff;
  font-weight: 400;
  line-height: 1.5;
  padding-bottom: 29px;
}
.find .find_container .found_wrap .found_User_pw .Pw_copy {
  font-size: 28px;
  color: #9391ff;
  line-height: 1.5;
  display: flex;
  justify-content: center;
  line-height: 33px;
  align-items: center;
  gap: 18px;
  padding-bottom: 38px;
}
.find .find_container .found_wrap .found_User_pw .Pw_copy button {
  background: transparent;
  border: 0;
  padding: 0;
}
.find .find_container .found_wrap .found_User_pw .found_user_text {
  font-size: 18px;
  font-weight: 400;
  color: #b7b7b7;
  line-height: 1.5;
}
.find .find_container .found_wrap .found_User_pw .found_user_text b {
  text-decoration: underline;
  color: #ffffff;
}
.find .find_container .found_wrap .id_not_found {
  font-size: 26px;
  font-weight: 400;
  color: white;
  line-height: 1.5;
  text-align: center;
}
.find .find_container .found_wrap .id_not_found h4 {
  display: inline-block;
  color: #ff9196;
}
.find .find_container .found_wrap .id_not_found b {
  color: #9391ff;
}
.find .find_container .found_pw_success {
  height: 350px;
}

.Login {
  height: 100vh;
  width: 100vw;
  background-image: url("../images/LoginBackground.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.Login .Btn {
  width: 370px;
  height: 60px;
  border-radius: 10px;
  background: transparent;
}
.Login .Login_container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.Login .Login_container .Logo {
  padding-bottom: 50px;
}
.Login .Login_container .Login_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.Login .Login_container .Login_box input {
  border: 1px solid #7374a2;
  outline: none;
  padding: 19.5px 33.5px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}
.Login .Login_container .Login_box input::placeholder {
  color: #7374a2;
  font-size: 18px;
  font-weight: 400;
}
.Login .Login_container .Login_box input:focus {
  border: 2px solid #ff9196;
}
.Login .Login_container .Login_box input:focus::placeholder {
  color: transparent;
}
.Login .Login_container .Login_box .validation-message {
  display: block;
  padding-top: 11.3px;
  letter-spacing: -0.5px;
  padding-left: 17px;
  font-size: 12px;
  color: #cc7986;
  font-weight: 400;
}
.Login .Login_container .Login_Btn {
  padding-top: 59px;
}
.Login .Login_container .Login_Btn .LoginBtn {
  letter-spacing: 0;
  background: rgb(0, 224, 197);
  background: linear-gradient(90deg, rgb(0, 224, 197) 0%, rgb(147, 145, 255) 100%);
  border: 0;
  font-size: 24px;
  color: #ffffff;
  font-weight: 500;
}
.Login .Login_container .Login_Btn .User_find {
  padding-top: 27.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 35px;
}
.Login .Login_container .Login_Btn .User_find a {
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  padding: 0;
  position: relative;
  letter-spacing: -0.5px;
}
.Login .Login_container .Login_Btn .User_find a:first-child::before {
  content: " ";
  display: block;
  width: 0.5px;
  height: 10.2px;
  background: #dedede;
  position: absolute;
  right: -17px;
  top: 50%;
  transform: translate(0, -50%);
}
.Login .copyright {
  bottom: 124px;
  font-size: 18px;
  font-weight: 300;
  color: #7374a2;
  position: absolute;
}

.DashBoardHead {
  padding-bottom: 40px;
}
@media (max-width: 1559px) {
  .DashBoardHead {
    padding-bottom: 35px;
  }
}
.DashBoardHead .CustomBox {
  width: 280px;
}

svg:hover {
  cursor: pointer;
}

.DashBoardList {
  width: 100%;
  margin: 0 0 0 auto;
}
.DashBoardList .List {
  display: flex;
  flex-wrap: wrap;
  gap: 43px 20px;
}
@media (max-width: 1559px) {
  .DashBoardList .List {
    gap: 20px;
  }
}
@media (min-width: 1700px) and (max-width: 2560px) {
  .DashBoardList .List {
    gap: 43px 30px;
  }
}
.DashBoardList .List .DashBoardBox {
  border: 2px solid #7374a2;
  border-radius: 10px;
  background: #3b3d63;
  width: calc(20% - 16px);
  position: relative;
}
@media (min-width: 1700px) and (max-width: 2560px) {
  .DashBoardList .List .DashBoardBox {
    width: calc(20% - 24px);
  }
}
.DashBoardList .List .DashBoardBox > a {
  padding: 21px 31px;
  display: block;
}
@media (min-width: 1700px) and (max-width: 2560px) {
  .DashBoardList .List .DashBoardBox > a {
    padding: 25px 34px;
  }
}
@media (max-width: 1559px) {
  .DashBoardList .List .DashBoardBox > a {
    padding: 15px 25px;
  }
}
.DashBoardList .List .DashBoardBox:hover .Box_main_title a {
  font-weight: bold !important;
  text-decoration: underline;
  text-underline-position: under;
}
.DashBoardList .List .DashBoardBox .ribbon {
  background-color: #7c7bd8;
  color: white;
  transform-origin: top right;
  position: absolute;
  z-index: 1;
  top: -1px;
  cursor: pointer;
  right: -1px;
  width: 30px;
  height: 30px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-top-right-radius: 7px;
}
.DashBoardList .List .DashBoardBox .Box_head {
  padding-bottom: 12px;
  padding-top: 5px;
  gap: 7px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1559px) {
  .DashBoardList .List .DashBoardBox .Box_head {
    gap: 4px;
  }
}
@media (min-width: 1700px) and (max-width: 2560px) {
  .DashBoardList .List .DashBoardBox .Box_head {
    padding-bottom: 20px;
    padding-left: 10px;
  }
}
.DashBoardList .List .DashBoardBox .Box_head .Box_sub_title {
  font-size: 12px;
  font-weight: 400;
  color: #7374a2;
  line-height: 1;
}
@media (min-width: 1700px) and (max-width: 2560px) {
  .DashBoardList .List .DashBoardBox .Box_head .Box_sub_title {
    font-size: 14px;
  }
}
.DashBoardList .List .DashBoardBox .Box_head .Box_main_title {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}
@media (min-width: 1700px) and (max-width: 2560px) {
  .DashBoardList .List .DashBoardBox .Box_head .Box_main_title {
    font-size: 20px;
  }
}
.DashBoardList .List .DashBoardBox .Box_body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1700px) and (max-width: 2560px) {
  .DashBoardList .List .DashBoardBox .Box_body {
    padding-top: 10px;
  }
}
@media (max-width: 1559px) {
  .DashBoardList .List .DashBoardBox .Box_body {
    gap: 8px;
  }
}
.DashBoardList .List .DashBoardBox .Box_body .body_Item {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
@media (max-width: 1559px) {
  .DashBoardList .List .DashBoardBox .Box_body .body_Item {
    padding: 0;
  }
}
.DashBoardList .List .DashBoardBox .Box_body .body_Item .left {
  display: flex;
  gap: 10px;
  align-items: center;
}
.DashBoardList .List .DashBoardBox .Box_body .body_Item .left img {
  height: 15px;
  width: auto;
  object-fit: cover;
}
.DashBoardList .List .DashBoardBox .Box_body .body_Item .left span {
  font-size: 14px;
  font-weight: 400;
  color: #dedede;
}
@media (min-width: 1700px) and (max-width: 2560px) {
  .DashBoardList .List .DashBoardBox .Box_body .body_Item .left span {
    font-size: 16px;
  }
}
.DashBoardList .List .DashBoardBox .Box_body .body_Item .right {
  color: #7374a2;
  display: flex;
  line-height: 25px;
  gap: 5px;
  align-items: center;
}
.DashBoardList .List .DashBoardBox .Box_body .body_Item .right b {
  font-size: 21px;
  font-weight: 500;
  color: #ffffff;
}
@media (max-width: 1559px) {
  .DashBoardList .List .DashBoardBox .Box_body .body_Item .right b {
    font-size: 15px;
  }
}
.DashBoardList .List .DashBoardBox .Box_body .body_Item:first-child {
  position: relative;
}
.DashBoardList .List .DashBoardBox .Box_body .body_Item:first-child::after {
  content: " ";
  width: 100%;
  height: 1px;
  display: block;
  background: #2f2e59;
  position: absolute;
  bottom: -8px;
  left: 0;
}
@media (max-width: 1559px) {
  .DashBoardList .List .DashBoardBox .Box_body .body_Item:first-child::after {
    bottom: -4px;
  }
}
.DashBoardList .List .DashBoardError {
  border-color: #ff9196;
  background: rgba(45, 3, 5, 0.27);
}
.DashBoardList .List .DashBoardError .ribbon {
  cursor: pointer;
  background-color: #ff5b63;
}
.DashBoardList .List .DashBoardError .Box_head .Box_main_title {
  color: #ff9196;
}
.DashBoardList .List .DashBoardError .Box_head .Box_sub_title {
  color: #aca3a7;
}
.DashBoardList .List .DashBoardError .Box_body .error_text .right {
  color: #8b6376;
}
.DashBoardList .List .DashBoardError .Box_body .error_text .right::after {
  background: #632d46;
}
.DashBoardList .List .DashBoardError .Box_body .error_text .right b {
  color: #ff5b63;
}
.DashBoardList .no-dashboard {
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #3b3d63;
  font-size: 24px;
  font-weight: bold;
  color: honeydew;
  border: 2px solid #7374a2;
}

.sensor_wrap {
  padding-top: 68px !important;
}
.sensor_wrap .MainTitle {
  font-size: 34px;
  font-weight: 500;
  padding-bottom: 20px;
}
.sensor_wrap .Sensorhead {
  padding-bottom: 20px;
  margin: 0 0 0 auto;
}
.sensor_wrap .Sensorhead .sensorbox {
  display: flex;
  gap: 16px;
  align-items: center;
}
.sensor_wrap .Sensorhead .sensorbox .sensor_tip_box {
  position: relative;
}
.sensor_wrap .Sensorhead .sensorbox .sensor_tip_box .sensor_tip {
  border: 0;
  background-image: url(../images/tip.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  width: 19px;
  margin-left: 0;
  height: 21px;
  padding: 0;
  border-radius: 50%;
  background-color: transparent;
}
.sensor_wrap .Sensorhead .sensorbox .sensor_tip_box .tooltip {
  right: inherit;
  width: 340px;
  height: auto;
  padding: 14px 19px;
  font-size: 18px;
  border-radius: 0;
  color: black;
  left: -60px;
  bottom: 40px;
  border-color: #07dcc8;
  background: #07dcc8;
  font-weight: 500;
}
.sensor_wrap .Sensorhead .sensorbox .sensor_tip_box .tooltip::after {
  left: 20%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #07dcc8;
  border-top: 2px solid #07dcc8;
  border-left: 2px solid #07dcc8;
  border-bottom: none;
  border-right: none;
}
.sensor_wrap .Sensorhead .sensorbox .sensor_tip_box .tooltip .close {
  background-image: url(../images/close4.svg);
  right: 7px;
  top: 18px;
  width: 22px;
}
.sensor_wrap .Sensorhead .sensorbox .label {
  height: 100%;
  padding: 10px 26px 10px 22px;
  font-size: 16px;
  color: #ffffff;
}

.sensor_chart {
  background-color: #fff;
  margin-top: 28px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
.sensor_chart .tabs {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid;
}
.sensor_chart .tabs .tab {
  font-size: 16px;
  font-weight: 500;
  padding: 20px;
}
.sensor_chart .tabs .tab.on {
  border-bottom: 3px solid;
}
.sensor_chart .tab-contents > div {
  display: none;
}
.sensor_chart .tab-contents > div.on {
  display: block;
}
.sensor_chart .tab-contents .buttons {
  display: flex;
  justify-content: center;
}
.sensor_chart .tab-contents .buttons button {
  width: 58px;
  padding: 5px 0;
}

.sensor_chart {
  padding: 31px 57px 44px 57px;
  border: 2px solid #9391ff;
  border-radius: 10px;
  position: relative;
  z-index: 3;
  background: #28294f;
  width: 100%;
  margin: 0 0 0 auto;
}
.sensor_chart > div {
  display: flex;
  gap: 11px;
  padding-bottom: 40px;
  flex-direction: column;
}
.sensor_chart > div > div > .measure_type {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  padding-left: 10px;
  line-height: 27px;
}
.sensor_chart > div > div > .chart_box {
  height: 240px;
  border: 2px solid #3e3f68;
  border-radius: 10px;
  padding: 0 20px;
}
.sensor_chart > div:last-child {
  padding-bottom: 0px;
}

.management_wrap {
  width: 100%;
  margin: 0 0 0 auto;
}

.management_detail {
  max-width: 400px;
  width: 100%;
}

.management_box {
  display: flex;
  gap: 40px;
  justify-content: center;
}
@media (max-width: 1559px) {
  .management_box {
    gap: 20px;
  }
}
.management_box h2 {
  font-size: 22px;
  font-weight: 400;
  padding-left: 15px;
  padding-bottom: 12px;
  color: #ffffff;
}
@media (min-width: 1280px) and (max-width: 1559px) {
  .management_box h2 {
    font-size: 18px;
  }
}
@media (max-width: 1279px) {
  .management_box h2 {
    font-size: 16px;
  }
}
.management_box .management_List {
  padding: 50px;
  padding-top: 46px;
  background: #3b3d63;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (max-width: 1559px) {
  .management_box .management_List {
    padding: 45px 30px;
  }
}
.management_box .management_List > li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 80px;
  justify-content: flex-end;
}
.management_box .management_List > li:last-child {
  padding-bottom: 0;
}
.management_box .management_List > li > span {
  padding-left: 11px;
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
}
.management_box .management_List > li label {
  padding-left: 11px;
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
}
@media (max-width: 1279px) {
  .management_box .management_List > li label {
    font-size: 16px;
  }
}
.management_box .management_List > li .CustomBox {
  width: 100%;
  border: 0;
  height: 100%;
}
.management_box .management_List > li .CustomBox.active input {
  border-color: #ffffff;
}
.management_box .management_List > li .CustomBox img {
  right: 18px;
  top: 16px;
  height: 13.5px;
  object-fit: cover;
}
.management_box .management_List > li input {
  background: #28294f;
  border: 1px solid #7374a2;
  border-radius: 5px;
  padding: 13px 24px;
  height: 46px;
  color: white;
  width: 100%;
  max-width: 340px;
  font-weight: 600;
  font-size: 16px;
  outline: none;
}
.management_box .management_List > li input::placeholder {
  color: #7374a2;
  font-weight: Regular;
}
.management_box .management_List > li input.UserInputBox {
  background: #7374a2;
}
.management_box .management_List > li.After_active::after {
  color: #ffffff;
}
.management_box .management_List > li .management_tip_box {
  display: flex;
}
.management_box .management_List > li .management_tip_box > div {
  position: relative;
}
.management_box .management_List > li .management_tip_box .managment_tooltip {
  left: 31%;
  background: #9391ff;
  border: 1px solid #9391ff;
  top: -43px;
  width: auto;
  padding-right: 40px;
  width: 238.83px;
  right: inherit;
  left: 42px;
  bottom: inherit;
  border-radius: 0;
  letter-spacing: -0.6px;
  padding: 11px 39px 11px 20px;
}
@media (max-width: 1559px) {
  .management_box .management_List > li .management_tip_box .managment_tooltip {
    top: -75px;
    left: 0;
  }
  .management_box .management_List > li .management_tip_box .managment_tooltip::after {
    display: none;
  }
  .management_box .management_List > li .management_tip_box .managment_tooltip::before {
    background: #9391ff;
    border-bottom: 2px solid #9391ff;
    border-right: 2px solid #9391ff;
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%) rotate(45deg);
    bottom: -10px;
  }
}
.management_box .management_List > li .management_tip_box .managment_tooltip span {
  line-height: 1.2;
  letter-spacing: -0.6px;
  width: 100%;
  display: block;
}
.management_box .management_List > li .management_tip_box .managment_tooltip::after {
  background: #9391ff;
  border-bottom: 2px solid #9391ff;
  border-right: 2px solid #9391ff;
  left: 0;
  bottom: inherit;
  top: 50px;
}
.management_box .management_List > li .management_tip_box .managment_tooltip .close {
  background-image: url(../images/close4.svg);
  width: 13px;
  height: 13px;
  right: 15px;
  top: 15px;
  object-fit: cover;
}

#air .management_box {
  justify-content: center;
}

.management_detail .tooltip_Box:first-child .managment_tooltip {
  width: 300px !important;
}
@media (max-width: 1559px) {
  .management_detail .tooltip_Box:first-child .managment_tooltip {
    top: -90px !important;
  }
}

.account_input {
  position: relative;
}
.account_input .tooltip {
  right: inherit;
  top: 33px;
  width: 340px;
  height: 56px;
  padding: 14px 19px;
  font-size: 18px;
  border-radius: 0;
  border-color: #07dcc8;
  color: black;
  background: #07dcc8;
  font-weight: 500;
}
.account_input .tooltip::after {
  left: 21.5%;
  bottom: inherit;
  top: -2px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #07dcc8;
  border-top: 2px solid #07dcc8;
  border-left: 2px solid #07dcc8;
  border-bottom: none;
  border-right: none;
}
.account_input .tooltip .close {
  top: 20px;
  background-image: url(../images/close4.svg);
}

.account_id > div > div {
  display: flex;
  width: 390px;
  gap: 13.8px;
  position: relative;
}
.account_id > div > div.error::after {
  content: "사용중인 아이디 입니다.";
  position: absolute;
  left: 20px;
  bottom: -20px;
  font-size: 12px;
  font-weight: 400;
  color: #ff5b63;
}
.account_id > div > div.error button {
  border-color: #ff5b63;
  color: #ff5b63;
}
.account_id > div > div.success::after {
  content: "사용 가능합니다.";
  position: absolute;
  left: 20px;
  bottom: -20px;
  font-size: 12px;
  font-weight: 400;
  color: #07dcc8;
}

.address_box {
  align-items: flex-start !important;
}
.address_box .validation-message {
  display: block;
  padding-top: 6px;
  letter-spacing: -0.5px;
  padding-left: 17px;
  font-size: 12px;
  color: #cc7986;
  font-weight: 400;
}
.address_box > div span {
  padding-top: 5px;
  font-weight: 500;
  font-size: 18px;
  color: #ffffff;
  width: 90px;
  display: inline-block;
  padding-top: 6px;
}
.address_box > div button {
  width: 100px;
  height: 40px;
  color: #07dcc8;
  border-color: #07dcc8;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
  flex-shrink: inherit;
  max-width: inherit;
  min-width: inherit;
  padding: 0;
}
.address_box > div button:hover {
  background: white;
  border-color: white;
  color: #28294f;
}
.address_box > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.address_box > div:last-child > div > div {
  display: flex;
  width: 390px;
  gap: 6px;
}

.contatier-404 {
  max-height: 100vh;
  height: 100%;
}
.contatier-404 section {
  height: 100%;
}
.contatier-404 section .wrap-404 {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 60px;
  color: white;
}
.contatier-404 section .wrap-404 h1 {
  font-size: 190px;
  line-height: 1;
  letter-spacing: -0.5px;
  font-weight: bold;
}
.contatier-404 section .wrap-404 strong {
  font-size: 32px;
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: -0.5px;
}
.contatier-404 section .wrap-404 p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.5px;
  padding-top: 15px;
}
.contatier-404 section .wrap-404 .return-404 {
  padding-top: 70px;
}
.contatier-404 section .wrap-404 .return-404 a {
  color: #ffffff;
  border: 1px solid;
  width: 170px;
  height: 70px;
  border-radius: 5px;
  font-size: 24px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  min-width: 100px;
  box-shadow: 0px 0px 10px #252537;
  max-width: 100%;
  transition: all 0.3s ease-out;
  background: #5146b3;
  border-color: #5146b3;
}
.contatier-404 section .wrap-404 .return-404 a:hover {
  background: #9391ff;
  border-color: #9391ff;
}

/*# sourceMappingURL=app.css.map */