@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');


:root {

  --z-0: 0;
  --z-1: 10;
  --z-2: 50;
  --z-3: 100;
  --z-4: 200;
  --z-5: 300;
  --z-6: 400;
  --z-7: 500;
  --z-8: 1000;

  --black: #000;
  --primary: #0d70e8;
  --secondary: #0088ff;
  --third: #fff200;
  --alert: #ff0000;

  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #666;
  --gray-900: #333;

  --shadow-1 : 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  --header-height: 96px;

  --logo-width: 160px;

  --inner-max-sm : 1280px;
  --inner-max-base : 1536px;  
  --inner-max-lg : 1792px;

  --inner-px-sm: 16px;
  --inner-px-base: 24px;
  --inner-px-lg: 32px;
  
  --inner-sm : calc(var(--inner-max-sm) + var(--inner-px-sm) * 2);
  --inner : calc(var(--inner-max-base) + var(--inner-px-base) * 2);
  --inner-lg : calc(var(--inner-max-lg) + var(--inner-px-lg) * 2);

  --font-serif : "Noto Serif KR", serif;
}

html {
  font-size: 50%;
}

@media (min-width: 436px) {
  html {
    font-size: 63.334%;
  }
}

@media (min-width: 576px) {
  html {
    font-size: 76.667%;
  }
}

@media (min-width: 672px) {
  html {
    font-size: 78.334%;
  }
}

@media (min-width: 769px) {
  html {
    font-size: 80%;
  }
}

@media(min-width: 896px){
  html {
    font-size: 86.667%;
  }
}

@media(min-width: 1025px){
  html {
    font-size: 93.3337%;
  }
}

@media(min-width: 1321px){
  html {
    font-size: 100%;
  }
}


*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

/* html::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html::-webkit-scrollbar-track {
  background-color: transparent;
}

html::-webkit-scrollbar-thumb {
  background-color: var(--gray-500);
  border-radius: 10px;
  background-clip: padding-box;
  border: 1px solid transparent;
}

html::-webkit-scrollbar-thumb:hover {
  background-color: var(--gray-700);
}

html::-webkit-scrollbar-corner {
  background-color: transparent;
} */

body {
  color: var(--black);
  font-weight: 400;
  line-height: 1.4;
  font-family: "Noto Sans KR", "맑은고딕", sans-serif;
  word-break: keep-all;
  -webkit-text-size-adjust: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
} */

/* html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
} */


h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: inherit;
}

:where(a, a:link, a:visited, a:hover, a:active, a:focus) {
  color: inherit;
  text-decoration: none;
}

abbr,
abbr[title] {
  text-decoration: none;
  border: none;
  border-bottom: none;
  cursor: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: inherit;
}

hr {
  display: none;
}

li,
ol,
dd {
  list-style: none;
}

img,
svg,
iframe {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

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

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
i,
var {
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
}

legend,
caption {
  visibility: hidden;
  display: none;
  width: 0;
  height: 0;
  font-size: 0;
}

button,
input,
textarea,
select {
  display: inline-block;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  vertical-align: middle;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  color: inherit;
  line-height: inherit;
  text-align: left;
  -webkit-border-radius: 0;
}

button,
input[type="submit"],
input[type="button"] {
  transition: 0.3s ease-in-out all;
}

button,
input[type="submit"],
input[type="button"],
select {
  cursor: pointer;
}

input[type="text"],
input[type="password"] {
  -webkit-appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
  margin: 0;
  vertical-align: middle;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("../images/select_arrow.png") no-repeat right center;
}

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

:focus {
    outline: none;
}

body[data-tabbing="true"] :focus {
    outline: 2px dashed var(--alert);
}