@charset "utf-8"; @font-face { font-family: "Noto Sans KR"; font-style: normal; font-weight: 400; src: url("https://cdn.jsdelivr.net/npm/@openfonts/noto-sans-kr_korean@1.44.1/files/noto-sans-kr-korean-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@openfonts/noto-sans-kr_korean@1.44.1/files/noto-sans-kr-korean-400.woff") format("woff"); } @font-face { font-family: "Noto Sans KR"; font-style: normal; font-weight: 700; src: url("https://cdn.jsdelivr.net/npm/@openfonts/noto-sans-kr_korean@1.44.1/files/noto-sans-kr-korean-700.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@openfonts/noto-sans-kr_korean@1.44.1/files/noto-sans-kr-korean-700.woff") format("woff"); } *, ::before, ::after { box-sizing: border-box; } ::before, ::after { text-decoration: inherit; vertical-align: inherit; } .cf:after { display: block; content: ""; clear: both; } html { width: 100%; height: 100%; cursor: default; -moz-tab-size: 4; tab-size: 4; -webkit-tap-highlight-color: transparent; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; word-break: break-word; } body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul { margin: 0; padding: 0; } body, button, input, select, table, textarea { font-size: 13px; line-height: 1.5; color: #101010; font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", arial, dotum, 돋움, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size: inherit; line-height: inherit; } hr { height: 0; overflow: visible; } main, details { display: block; } dl, ol, ul, menu { list-style: none; } pre, code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } address, em, i { font-style: normal; } a { background-color: transparent; text-decoration: none; color: inherit; } a:hover { text-decoration: none; } abbr[title] { text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } audio, video { display: inline-block; } img { vertical-align: top; } iframe, img, fieldset { border-style: none; } img, video { max-width: 100%; } svg:not([fill]) { fill: currentColor; } svg:not(:root) { overflow: hidden; } img[src$=".gif"], img[src$=".png"] { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; } table { border-collapse: collapse; border-spacing: 0; } button { background-color: transparent; } button, select { text-transform: none; } button, input { border: 0; border-radius: 0; overflow: visible; } input:focus { outline: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } figure { margin: 0; } fieldset { border: 1px solid #a0a0a0; padding: 0.35em 0.75em 0.625em; } input { overflow: visible; } legend { color: inherit; display: table; max-width: 100%; white-space: normal; } progress { display: inline-block; vertical-align: baseline; } select { text-transform: none; } textarea { overflow: auto; resize: vertical; } [type="checkbox"], [type="radio"] { padding: 0; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } ::-moz-focus-inner { border-style: none; padding: 0; } :-moz-focusring { outline: 1px dotted ButtonText; } :-moz-ui-invalid { box-shadow: none; } dialog { background-color: #fff; border: solid; color: #000; display: block; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; padding: 1em; position: absolute; right: 0; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; } dialog:not([open]) { display: none; } summary { display: list-item; } a, area, button, input, label, select, summary, textarea, [tabindex] { -ms-touch-action: manipulation; touch-action: manipulation; } [hidden] { display: none; } [aria-busy="true"] { cursor: progress; } [aria-controls] { cursor: pointer; } [aria-disabled="true"], [disabled] { cursor: not-allowed; } [aria-hidden="false"][hidden] { display: initial; } [aria-hidden="false"][hidden]:not(:focus) { clip: rect(0, 0, 0, 0); position: absolute; }

@import url('//fonts.googleapis.com/earlyaccess/nanumgothic.css');

html, body {
  font-family: 'GowunDodum-Regular';
  background: #000;
  color: #fff;
}
body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;

  &.active {
    overflow: hidden;
  }
}

button, a {
  cursor: pointer;
  font-family: 'GowunDodum-Regular';
}
button:hover, a:hover, textarea:hover,
button:focus, a:focus, textarea:focus {
  outline: none;
}

* {
  font-family: 'GowunDodum-Regular';
  box-sizing: border-box;
}
*::-webkit-scrollbar {
  display: none;
}

i.xi {
  color: #fff;
  font-family: 'xeicon';
}

.show-obj {
  .background {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}

header {
  background: #000;
  width: 100vw;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem;

      &:hover {
        background: none;
      }

      img {
        height: 1.5rem;
      }

      .title {
        font-size: 1rem;
        font-weight: bold;
      }
    }

    .button-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 100%;

      a, button {
        border-radius: 50%;
        font-size: 1.5rem;
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .search-wrap {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    display: none;
    border-bottom: 1px solid #333;

    .search {
      height: 3.5rem;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      input {
        width: 100%;
        height: 2rem;
        background: none;
        /* border-bottom: 1px solid #333; */
        color: #fff;
        padding: 0 0.25rem;
        letter-spacing: 0.1rem;

        &::placeholder {
          color: #999;
        }
      }

      button {
        font-size: 1.5rem;
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .menu-wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    z-index: 5;
    transition: 0.2s;

    &.on {
      left: 0;
      .menu-list-wrap {
        right: 0;
      }
    }

    .menu-list-wrap {
      width: 100%;
      height: 100%;
      max-width: 240px;
      background: #000;
      position: absolute;
      right: -100%;
      top: 0;
      transition: 0.2s;
      display: flex;
      flex-direction: column;
      border-left: 1px solid #333;

      ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        li {
          width: 100%;
          a, button {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.625rem 1rem;
            font-size: 1.5rem;
            color: #fff;
            text-align: left;

            .xi {
              font-size: 0.75rem;
              color: #999;
            }
          }

          .logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem;

            img {
              height: 1.5rem;
            }

            .title {
              font-size: 1rem;
              font-weight: bold;
            }
          }
        }

        &.end {
          justify-content: flex-end;
        }
      }
    }

    .close-button {
      position: absolute;
      top: 0;
      left: -3.5rem;
      font-size: 1.5rem;
      padding: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .login-wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    z-index: 5;


    .login-wrap-in {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      // z-index: 6;
      position: relative;

      .login {
        min-width: 300px;
        padding: 1rem;
        background: #000;
        position: relative;
        border: 1px solid #333;

        .close-button {
          position: absolute;
          top: 0;
          right: -3.5rem;
          font-size: 1.5rem;
          padding: 1rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}

#app {
  flex: 1;
  display: flex;
  main {
    width: 100%;
    padding: 1rem 1rem 1rem 1rem;
    flex: 1;
  }
}

.loading-wrap {
  display: none;
  position: fixed;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;

  .loading {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .background {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.75);
    }

    .icon {
      position: relative;
      z-index: 3;
      .xi {
        font-size: 3rem;
        color: #fff;
        display: inline-block;
      }
    }
  }
}

.no-img {
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
}

.paginate {
  display: flex;
  gap: 0.5rem;
  margin: 0 auto;
  a {
    padding: 0.5rem;
    font-size: 1rem;
    border-bottom: 1px solid #000;

    &:hover {
      background: none;
      border-bottom: 1px solid #666;
    }

    &.active {
      border-bottom: 1px solid #666;
    }
  }
}


.btn {
  padding: 0.5rem;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 0.5rem;

  &:hover {
    background: #292929;
  }

  &.blue {
    background: #33A;

    &:hover {
      background: #191991;
    }
  }

  &.red {
    background: #A33333;

    &:hover {
      background: #911919;
    }
  }

  &.green {
    background: #3A3;

    &:hover {
      background: #199119;
    }
  }

  &.yellow {
    background: #AA3;

    &:hover {
      background: #919119;
    }
  }

  &.cyan {
    background: #3AA;

    &:hover {
      background: #199191;
    }
  }

  &.purple {
    background: #A3A;

    &:hover {
      background: #911991;
    }
  }

  &.square-2_5 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}


.text-auto-hidden {
  text-overflow: ellipsis;
  text-wrap-mode: nowrap;
  overflow: hidden;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg-center {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #111;
}
.html-format {
  display: none;
}

.inp {
  padding: 0.5rem;
  background: none;
  color: #fff;
  border: 1px solid #333;
  border-radius: 0.5rem;
}

.w100 {
  width: 100%;
}



fieldset {
  border: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  &.toggle {
    label {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
    }

    [type="checkbox"] {
      appearance: none;
      position: relative;
      border: max(2px, 0.1em) solid gray;
      border-radius: 1.25em;
      width: 2.5em;
      height: 1.3em;
    }

    [type="checkbox"]::before {
      content: "";
      position: absolute;
      left: 0;
      width: 1em;
      height: 1em;
      border-radius: 50%;
      transform: scale(0.8);
      background-color: gray;
      transition: left 250ms linear;
    }

    [type="checkbox"]:checked {
      background-color: #fff;
      border-color: #fff;
    }

    [type="checkbox"]:checked::before {
      background-color: gray;
      left: 1.2em;
    }

    [type="checkbox"]:disabled {
      border-color: lightgray;
      opacity: 0.7;
      cursor: not-allowed;
    }

    [type="checkbox"]:disabled:before {
      background-color: lightgray;
    }

    [type="checkbox"]:disabled + span {
      opacity: 0.7;
      cursor: not-allowed;
    }

    [type="checkbox"]:focus-visible {
      outline-offset: max(2px, 0.1em);
      outline: max(2px, 0.1em) solid #fff;
    }
  }
}