:root {
  --bs-primary: #c728ca;
  --bs-info: #2588ce;
  --bs-success: #74cb4b;
  --bs-danger: #d23b3b;
  --bs-secondary: #ffffffb2;
  --bs-primary-rgb: 199, 40, 202;
  --bs-info-rgb: 37, 136, 206;
  --bs-success-rgb: 116, 203, 75;
  --bs-danger-rgb: 210, 59, 59;
  --bs-secondary-rgb: 255, 255, 255;
  --background2: #070b20;
  --background3: #1c2239;
  --bs-border-color: #353b4f;
  --bs-link-color-rgb: 199, 40, 202;
  --bs-link-hover-color-rgb: 199, 40, 202;
  --bs-body-font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Mulish", sans-serif;
}
body {
  background-image: url("/Assets/Assets12/images/background_main.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Mulish", sans-serif;
}
.border {
  border-image-slice: unset !important;
  border-image-source: unset !important;
}
.text-secondary {
  --bs-text-opacity: 0.7;
}
app-header {
  background: radial-gradient(
    23.93% 49.72% at 50% 100%,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.04) 39.7%,
    rgba(255, 255, 255, 0) 100%
  );
  display: block;
  position: relative;
}
app-header:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    #030216 10%,
    rgba(3, 2, 22, 0.571429) 100%
  );
}
.logo22 {
  position: relative;
  outline: none;
}
.logo22 > img {
  width: 4rem;
}

app-header button.welcome {
  --bs-body-color: var(--bs-white);
  --bs-btn-primary-font-weight: 700;
  --bs-btn-box-shadow: unset;
  --bs-btn-active-bg: unset;
  padding: 0.5rem;
  font-size: 0.875rem;
  background: transparent !important;
  transition: 0.3s;
}
app-header button.welcome:hover {
  --bs-body-color: var(--bs-primary);
}
app-header button.welcome:before {
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  margin-right: 0.375rem;
  font-weight: 700;
  color: var(--bs-primary);
}
app-header button.welcome + a {
  color: var(--bs-white) !important;
  background-color: unset !important;
  border: unset;
  padding: 0.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  transition: 0.3s;
}
app-header button.welcome + a:hover {
  color: var(--bs-primary) !important;
}
app-header button.welcome + a:before {
  content: "\f234";
  font-family: "Font Awesome 5 Free";
  margin-right: 0.375rem;
  color: var(--bs-primary);
}
app-header .header_icon {
  width: 2.25rem;
  height: 2.25rem;
  background: linear-gradient(360deg, #090c2c 0%, #090d2c 50.5%, #0a3575 100%);
  border: 2px solid #0095ee;
  box-shadow: 0px 0px 10px 0px #0095ee80;
  border-radius: 0.75rem;
  margin-right: 0.75rem;
}
app-header .dropdown-menu {
  --bs-dropdown-padding-x: 1rem;
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-border-radius: 0.75rem;
  --bs-dropdown-box-shadow: 0px 20px 40px 0px #000010b2;
  background: linear-gradient(310.11deg, #070b20 -3.75%, #0c1336 102.27%);
}
app-header app-change-lang .dropdown-menu {
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
}
app-header .dropdown-item {
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 0.75rem;
  --bs-dropdown-item-border-radius: 0.5rem;
  --bs-dropdown-link-hover-bg: #ffffff12;
  font-weight: 700;
}
app-header .dropdown_divider {
  border: 1px solid #000023;
  box-shadow: 0px 1px 1px 0px #ffffff24;
}
._notice ._mh {
  --bs-gutter-x: 0.75rem;
  min-height: calc(100dvh - 7rem);
}
._bg.shadow {
  background: linear-gradient(
    332.34deg,
    #090c2c 1.07%,
    #090d2c 48.53%,
    #0a3575 95.06%
  );
  border: 2px solid #0095ee;
  border-radius: 0.75rem;
  padding: 1.25rem !important;
  position: relative;
}
._bg.shadow:before,
._bg.shadow:after {
  content: "";
  position: absolute;
  pointer-events: none;
}
._bg.shadow:before {
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(0, 149, 238, 0.4) 0%,
    rgba(0, 149, 238, 0) 100%
  );
  width: 17.5rem;
  height: 17.5rem;
  top: -20%;
  left: -20%;
}
._bg.shadow:after {
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(148, 49, 194, 0.36) 0%,
    rgba(148, 49, 194, 0) 100%
  );
  width: 22.5rem;
  height: 22.5rem;
  right: -20%;
  bottom: -20%;
}
.notice_header {
  background-image: unset !important;
  border-bottom: 2px solid;
  border-image-slice: 2;
  border-image-source: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 49.5%,
    rgba(255, 255, 255, 0) 100%
  );
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  position: relative;
}
.notice_header img {
  position: absolute;
  bottom: -1.125rem;
  left: 50%;
  transform: translate(-50%);
}
.notice_body {
  border: unset !important;
  background-color: unset !important;
  overflow: auto;
}
.notice_footer {
  border-top: 2px solid;
  border-image-slice: 2;
  border-image-source: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 49.5%,
    rgba(255, 255, 255, 0) 100%
  );
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  position: relative;
  z-index: 1;
}
.notice_footer button,
.close_all {
  background: #010c39;
  border: 1px solid #0095ee;
  border-radius: 0.5rem;
  padding: 0.675rem 1.25rem;
  color: var(--bs-white);
  margin-left: 0.75rem;
}
.close_all {
  position: absolute;
  top: -3.5rem;
  right: 0;
}
.notice_board .border.rounded.background3,
.border.rounded.background3,
.border.rounded.background3,
.border.rounded.background3 {
    background: linear-gradient(310.11deg, #070b20 -3.75%, #0c1336 102.27%);
    box-shadow: 0px 20px 40px 0px #000010b2;
    border: unset !important;
    border-radius: 0.675rem !important;
}
.border.rounded.background3 h2 {
  border-bottom: 2px solid;
  border-image-slice: 2;
  border-image-source: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 49.5%,
    rgba(255, 255, 255, 0) 100%
  );
  padding-bottom: 1rem;
  margin-bottom: 1.5rem !important;
}
.border.rounded.background3 h2,
.border.rounded.background3 h2 {
  font-family: "Aoboshi One";
  font-weight: 400;
}
.badge {
  --bs-badge-font-size: 0.75rem;
}
.border.rounded.background3 > .border-bottom,
.border.rounded.background3 > .border-bottom,
.border.rounded.background3 > .border-bottom {
  border-bottom: 2px solid;
  border-image-slice: 2;
  border-image-source: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 49.5%,
    rgba(255, 255, 255, 0) 100%
  );
}
.popup_notice.__notice {
  padding: 1rem;
}
.popup_notice._notice {
  padding-top: 5rem !important;
}
._notice {
  border: unset !important;
}
._notice .item {
  background-color: unset;
  border-bottom: unset !important;
  position: relative;
}
._notice .item:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 4.5rem;
  border-bottom: 1px solid #000023 !important;
  box-shadow: 0px 1px 1px 0px #ffffff24;
}
._notice .item:last-child::after {
  content: unset;
}
._notice .item .icon {
  background: linear-gradient(180deg, #232c57 0%, #101944 100%);
  box-shadow: 0px 4px 6px 0px #ffffff0d inset;
  box-shadow: 0px 4px 12px 0px #0000174d;
}
table tbody tr td {
  font-weight: 700;
}
table thead tr th .sortable .small {
  font-size: 0.875rem;
}
.pagination {
  --bs-pagination-color: var(--bs-white);
  --bs-pagination-bg: var(--background3);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-color: var(--bs-white);
  --bs-pagination-active-border-color: var(--bs-border-color);
  --bs-pagination-hover-bg: var(--background3);
  --bs-pagination-hover-color: var(--bs-white);
  --bs-pagination-focus-bg: var(--background3);
  --bs-pagination-focus-color: var(--bs-white);
  --bs-pagination-disabled-bg: var(--bs-secondary);
  --bs-pagination-disabled-color: var(--bs-white);
}
.btn.btn-info {
  background: linear-gradient(180deg, #30a2ff 0%, #0058b5 100%);
  border: 1px solid #353b4f;
}
.btn.btn-danger {
  background: linear-gradient(180deg, #d23b3b 0%, #6f0000 100%);
  border: 1px solid #353b4f;
}
.btn.btn-primary {
  background: linear-gradient(180deg, #ee4ff1 0%, #c122c4 100%);
  border: 2px solid #ffffff1a;
}
.btn.btn-secondary {
  background: #1c2239;
}
.modal-content {
  --bs-modal-border-radius: 0.675rem;
  background: linear-gradient(310.11deg, #070b20 -3.75%, #0c1336 102.27%);
  box-shadow: 0px 20px 40px 0px #000010b2;
}
.odometer22 {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
}
.odometer.odometer-theme-car {
  background: unset;
}
.odometer.odometer-theme-car .odometer-digit {
  background: linear-gradient(180deg, #222537 0%, #090c1e 100%);
  box-shadow: 0px 2px 2px 0px #45485a inset;
  box-shadow: 0px -4px 4px 0px #000315 inset;
  text-shadow: 0px 2px 2px #0b0e20b2;
  font-size: 2rem;
  font-weight: 900 !important;
  color: var(--bs-white);
}
.odometer.odometer-theme-car .odometer-digit:last-child {
  background: linear-gradient(180deg, #f7f7f7 0%, #69696b 100%);
  color: #06091f;
}
.form-control:focus {
  border-color: var(--bs-primary);
}
.app-main-notify {
  margin-top: 1.875rem;
  padding-bottom: 1rem;
  display: flex !important;
  justify-content: center;
}
.app-main-notify > div {
  position: relative;
}
.app-main-notify > div:before {
  content: "";
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
  bottom: -0.125rem;
  left: -0.125rem;
  background: linear-gradient(
    180deg,
    var(--bs-primary) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 1rem;
}
.app-main-notify > div:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #020403e5;
  border-radius: 1rem;
}
.app-main-notify .main_notify_bg {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #020403 0%, rgba(2, 4, 3, 0) 100%);
  padding: 1.5rem 2rem;
  border-radius: 1rem;
}
@media (min-width: 992px) {
  .logo22 > img {
    width: 34rem;
  }
  .odometer.odometer-theme-car .odometer-digit {
    font-size: 2.875rem;
  }
  .popup_notice._notice {
    padding-top: 4rem !important;
  }
  ._notice ._mh {
    --bs-gutter-x: 0.75rem;
    min-height: calc(100dvh - 6rem);
  }
  ._notice .notice_body {
    height: 18rem;
  }
  ::-webkit-scrollbar-thumb {
    background-color: rgba(var(--bs-white-rgb), 0.3);
    border-radius: 50rem;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 77.5%;
  }
  app-header .logo22 {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  app-header .__header.not_six .logo22 {
    top: 5%;
    transform: translateX(-50%);
  }
  app-header .logo22:after {
    content: "";
    position: absolute;
    top: -3.5rem;
    right: -16rem;
    bottom: -3.5rem;
    left: -16rem;
    background: radial-gradient(
      50% 50% at 50% 50%,
      rgba(148, 49, 194, 0.6) 0%,
      rgba(148, 49, 194, 0) 100%
    );
    z-index: -1;
    pointer-events: none;
    opacity: 0.7;
  }
}
@media (min-width: 1600px) {
  app-header .__header {
    height: 10.75rem;
    align-items: baseline !important;
    padding: 1rem !important;
  }
  app-header .__header.not_six {
    height: 15rem;
  }
  app-header .__header .header_menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  app-header .__header.not_six .header_menu {
    top: unset;
    bottom: 5%;
    transform: translateX(-50%);
  }
  app-header .__header .header_menu .item {
    border: 2px solid #ffffff33;
    background: linear-gradient(
      167.33deg,
      rgba(28, 15, 63, 0.2) 7.31%,
      rgba(255, 255, 255, 0.08) 89.43%
    );
    transform: skew(10deg);
    padding: 0.75rem 1.875rem;
    border-radius: 0.25rem;
    color: #ffffff80;
    white-space: nowrap;
    margin: 0 0.75rem;
    transition: 0.3s;
    margin-top: 2.5rem;
    width: 12rem;
    text-align: center;
    position: relative;
  }
    app-header .__header .header_menu .item:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: url("/Assets/Assets12/images/btn_bg.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 0.02;
        z-index: -1;
    }
  app-header .__header .header_menu .item small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  app-header .__header .header_menu .item:hover {
    border-color: #ffffff1a;
    color: var(--bs-white);
  }
  app-header .__header .header_menu .item.active {
    background: linear-gradient(180deg, #ee4ff1 0%, #c122c4 100%);
    border-color: #ffffff1a;
    color: var(--bs-white);
  }
  app-header .__header .header_menu .item small {
    font-size: 1.25rem;
    font-weight: 1000;
    font-style: italic;
    transform: skew(-10deg);
    position: relative;
    z-index: 1;
  }
  app-header .__header .header_menu .item:nth-child(n + 4) small {
    transform: skew(10deg);
  }
  app-header .__header .header_menu .item.active small {
    text-shadow: 0px 4px 4px #00000066;
  }
  app-header .__header .header_menu .item:nth-child(n + 4) {
    transform: skew(-10deg);
  }
  app-header .__header:not(.not_six) .header_menu .item:nth-child(3) {
    margin-right: 15rem;
  }
  app-header .__header:not(.not_six) .header_menu .item:nth-child(4) {
    margin-left: 15rem;
  }
}
.overlay-button {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00000080;
    cursor: auto;
    color: var(--bs-white);
    --bs-heading-color: var(--bs-white);
}