/* ======================================================= */
/********** root **********/
:root {
  font-size: 62.5%;
  --font: 'SUIT', 'Noto Sans KR', sans-serif;
  --text-color: #282828;
  --text-gray: #686868;
  --text-light-gray: #888888;
  --primary-color:#9B2CAA;
  --icon-black: #585858;
  --icon-gray: #989898;
  --icon-light-gray: #a8a8a8;
  --border-light-gray: #eee;
  --border-gray: #dbdbdb;
  --shadow-primary: rgba(155, 44, 170, .05);
  --shadow-gray: rgba(0, 0, 0, .05);
  --shadow-light-gray: rgba(0, 0, 0, .01);
  --shadow-blue: rgba(0, 0, 255, .05);
  --material-icons: 'Material Icons';
}

/********** root end **********/
/* ======================================================= */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: var(--font);
  font-size: var(--font-size);
  font-weight: 400;
}

a {
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
}

a:focus {
  outline: none;
}

li {
  list-style: none;
}

ol:after,
ul:after {
  content: '';
  display: block;
  clear: both;
}

iframe,
img {
  display: block;
}

input,
textarea,
button {
  font-family: var(--font);
}

/* input */
input[type="text"],
input[type="password"] {
  width: 100%;
  font-family: var(--font);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
}

/* button */
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
}

/* mobile */
@media (max-width: 767px) {
  :root {
    font-size: 50%;
  }
}