@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;700&display=swap");
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
textarea,
section,
article,
nav,
main,
p,
header,
footer,
table,
th,
td,
input,
select,
button,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

body {
  min-width: 320px;
  background-color: #fff;
  color: #222;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: none;
  word-break: keep-all; }

body,
th,
td,
input,
select,
textarea,
button {
  font-family: 'Noto Sans KR', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5; }

ul,
ol {
  list-style: none; }

a {
  cursor: pointer;
  text-decoration: none; }
  a:hover, a:focus {
    text-decoration: none; }

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0; }

address {
  font-style: normal; }

input {
  border: 0; }
  input:focus {
    outline: none; }
  input::placeholder {
    /* Chrome, Safari, Firefox */
    color: #999;
    opacity: 1; }
  input:-ms-input-placeholder {
    /* IE, Edge */
    color: #999;
    opacity: 1; }
  input::-ms-clear {
    /* IE, Edge */
    display: none; }
  input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none; }

input[type='text'],
input[type='password'],
input[type='submit'],
input[type='search'],
input[type='tel'],
input[type='email'],
input[type='button'],
input[type='reset'] {
  -webkit-appearance: none;
  border-radius: 0; }

input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none; }

input[type="number"] {
  -moz-appearance: textfield; }

input:checked[type='checkbox'] {
  -webkit-appearance: checkbox; }

select {
  border: 0;
  background: none;
  cursor: pointer; }
  select:focus {
    outline: none; }
  select::-ms-expand {
    display: none; }

button {
  border: 0;
  background-color: transparent;
  cursor: pointer; }
  button:focus {
    outline: none; }
  button:disabled {
    cursor: not-allowed; }

fieldset,
legend {
  border: 0; }

body {
  background-color: #dbe4e5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23c8a2ff' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  user-select: none; }

.screen-out {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0; }

@keyframes stripes {
  from {
    background-position: 0; }
  to {
    background-position: 60px; } }

@keyframes pop {
  from {
    opacity: 0; }
  to {
    transform: scale(2);
    opacity: 1; } }

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg); }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg); }
  20% {
    transform: translate(-3px, 0px) rotate(1deg); }
  30% {
    transform: translate(3px, 2px) rotate(0deg); }
  40% {
    transform: translate(1px, -1px) rotate(1deg); }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg); }
  60% {
    transform: translate(-3px, 1px) rotate(0deg); }
  70% {
    transform: translate(3px, 1px) rotate(-1deg); }
  80% {
    transform: translate(-1px, -1px) rotate(1deg); }
  90% {
    transform: translate(1px, 2px) rotate(0deg); }
  100% {
    transform: translate(1px, -2px) rotate(-1deg); } }

@keyframes toheaven {
  0% {
    transform: rotateY(60deg);
    opacity: 1; }
  20% {
    transform: translateY(-3px) rotateY(90deg) scale(0.9);
    opacity: .8; }
  40% {
    transform: translateY(-6px) rotateY(180deg) scale(0.8);
    opacity: .6; }
  60% {
    transform: translateY(-9px) rotateY(360deg) scale(0.7);
    opacity: .4; }
  80% {
    transform: translateY(-11px) rotateY(180deg) scale(0.6);
    opacity: .2; }
  100% {
    transform: translateY(-13px) rotateY(90deg) scale(0.5);
    opacity: 0; } }

/* FLEXBOX */
.hbox {
  display: flex;
  flex-direction: row;
  align-items: center; }

.hbox--top {
  align-items: flex-start; }

.hbox--bottom {
  align-items: flex-end; }

.hbox--stretch {
  align-items: stretch; }

.vbox {
  display: flex;
  flex-direction: column;
  align-items: stretch; }

.vbox--left {
  display: flex;
  flex-direction: column;
  align-items: flex-start; }

.vbox--right {
  display: flex;
  flex-direction: column;
  align-items: flex-end; }

.pack {
  display: flex;
  flex-direction: inherit;
  justify-content: center;
  align-items: center; }

.space-between {
  justify-content: space-between; }

.space-around {
  justify-content: space-around; }

.space-evenly {
  justify-content: space-evenly; }

.flex {
  flex: 1; }

.wrap {
  flex-wrap: wrap; }

/* POSITIONING */
.layer {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; }

.layer--top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0; }

.layer--right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0; }

.layer--bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; }

.layer--left {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; }

.layer--top-left {
  position: absolute;
  top: 0;
  left: 0; }

.layer--top-right {
  position: absolute;
  top: 0;
  right: 0; }

.layer--bottom-left {
  position: absolute;
  bottom: 0;
  left: 0; }

.layer--bottom-right {
  position: absolute;
  bottom: 0;
  right: 0; }

.absolute {
  position: absolute; }

.relative {
  position: relative; }

.fixed {
  position: fixed; }

.sticky {
  position: sticky; }

/* DISPLAY */
.block {
  display: block;
  width: 100%; }

.inline {
  display: inline; }

.none {
  display: none; }

.visible {
  visibility: visible; }

.invisible {
  visibility: hidden; }

.gone {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important; }

.contain {
  background-size: contain;
  object-fit: contain; }

.cover {
  background-size: cover;
  object-fit: cover; }

/* FONT & TEXT */
.bold {
  font-weight: bold; }

.italic {
  font-style: italic; }

.underline {
  text-decoration: underline; }

.text-left {
  text-align: left; }

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

.text-right {
  text-align: right; }

.text-justify {
  text-align: justify; }

.nowrap {
  white-space: nowrap; }

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

.pre,
.pre-wrap {
  white-space: pre-wrap; }

.break-all {
  word-break: break-all; }

.break-word {
  word-break: break-word; }

/* OVERFLOW */
.overflow-hidden {
  overflow: hidden; }

.scroll-x {
  overflow-x: scroll; }

.scroll-y {
  overflow-y: scroll; }

/* ETC */
.circle {
  border-radius: 100%;
  overflow: hidden; }

.w100\% {
  width: 100%; }

.width-1\/2 {
  width: 50%; }

.width-1\/3 {
  width: 33.333333333%; }

.width-1\/4 {
  width: 25%; }

.cursor-pointer {
  cursor: pointer; }

.pointer-events-none {
  pointer-events: none; }

.pointer-events-auto {
  pointer-events: auto; }

.user-select-none {
  user-select: none;
  -webkit-user-select: none; }

.outline {
  outline: 1px solid #4f80ff; }

.guide,
.guide * {
  outline: 1px solid #4f80ff; }

/* 간격 */
space {
  display: block;
  pointer-events: none;
  visibility: hidden; }

space[size="0"] {
  padding: 0; }

space[size="0.2"] {
  padding: 0.1rem; }

space[size="0.4"] {
  padding: 0.2rem; }

space[size="0.6"] {
  padding: 0.3rem; }

space[size="0.8"] {
  padding: 0.4rem; }

space[size="1"] {
  padding: 0.5rem; }

space[size="1.2"] {
  padding: 0.6rem; }

space[size="1.4"] {
  padding: 0.7rem; }

space[size="1.6"] {
  padding: 0.8rem; }

space[size="1.8"] {
  padding: 0.9rem; }

space[size="2"] {
  padding: 1rem; }

space[size="2.2"] {
  padding: 1.1rem; }

space[size="2.4"] {
  padding: 1.2rem; }

space[size="2.6"] {
  padding: 1.3rem; }

space[size="2.8"] {
  padding: 1.4rem; }

space[size="3"] {
  padding: 1.5rem; }

space[size="3.2"] {
  padding: 1.6rem; }

space[size="3.4"] {
  padding: 1.7rem; }

space[size="3.6"] {
  padding: 1.8rem; }

space[size="3.8"] {
  padding: 1.9rem; }

space[size="4"] {
  padding: 2rem; }

space[size="4.2"] {
  padding: 2.1rem; }

space[size="4.4"] {
  padding: 2.2rem; }

space[size="4.6"] {
  padding: 2.3rem; }

space[size="4.8"] {
  padding: 2.4rem; }

space[size="5"] {
  padding: 2.5rem; }

space[size="5.2"] {
  padding: 2.6rem; }

space[size="5.4"] {
  padding: 2.7rem; }

space[size="5.6"] {
  padding: 2.8rem; }

space[size="5.8"] {
  padding: 2.9rem; }

space[size="6"] {
  padding: 3rem; }

space[size="6.2"] {
  padding: 3.1rem; }

space[size="6.4"] {
  padding: 3.2rem; }

space[size="6.6"] {
  padding: 3.3rem; }

space[size="6.8"] {
  padding: 3.4rem; }

space[size="7"] {
  padding: 3.5rem; }

space[size="7.2"] {
  padding: 3.6rem; }

space[size="7.4"] {
  padding: 3.7rem; }

space[size="7.6"] {
  padding: 3.8rem; }

space[size="7.8"] {
  padding: 3.9rem; }

space[size="8"] {
  padding: 4rem; }

space[size="8.2"] {
  padding: 4.1rem; }

space[size="8.4"] {
  padding: 4.2rem; }

space[size="8.6"] {
  padding: 4.3rem; }

space[size="8.8"] {
  padding: 4.4rem; }

space[size="9"] {
  padding: 4.5rem; }

space[size="9.2"] {
  padding: 4.6rem; }

space[size="9.4"] {
  padding: 4.7rem; }

space[size="9.6"] {
  padding: 4.8rem; }

space[size="9.8"] {
  padding: 4.9rem; }