@charset "utf-8";

/**
 * Filename : base.css
 * Description : root, fonts, reset styles
 **/

/* ==========================================================================
   root
========================================================================== */

:root {
  --primary_blue: #0032a0;

  --secondary_blue_01: #0055e9;
  --secondary_blue_02: #569dff;
  --secondary_blue_03: #317cff;
  --secondary_orange: #ff3a00;
  --secondary_mint: #80debc;

  --system-danger: #eb003b;
  --system-warning: #ffb724;
  --system-success: #008a1e;
  --system-information: #2768ff;

  --text-900_title: #161616;
  --text-800_text: #333;
  --text-700: #4a4a4a;
  --text-600: #777;
  --text-500: #aaa;
  --text-400_disable: #bebebe;
  --text-white: #fff;

  --text-80: #2d2d2d;

  --bg-01: #fbfbfb;
  --bg-02: #f5f5f5;
  --bg-03: #949494;

  --border-01: #f4f4f4;
  --border-02: #e7e7e7;
  --border-03: #ccc;
  --border-04: #232527;

  --font-120: 120px;
  --font-80: 80px;
  --font-64: 64px;
  --font-54: 54px;
  --font-48: 48px;
  --font-44: 44px;
  --font-40: 40px;
  --font-36: 36px;
  --font-32: 32px;
  --font-28: 28px;
  --font-24: 24px;
  --font-20: 20px;
  --font-18: 18px;
  --font-16: 16px;
  --font-14: 14px;
  --font-12: 12px;
  --font-10: 10px;

  --aosPlus: 30px;
}

/* ==========================================================================
 fonts
========================================================================== */

@font-face {
  font-family: "SUIT";
  font-weight: 100;
  font-style: normal;
  src: url("../fonts/SUIT-Thin.otf") format("opentype"),
    url("../fonts/SUIT-Thin.woff2") format("woff2"),
    url("../fonts/SUIT-Thin.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 200;
  font-style: normal;
  src: url("../fonts/SUIT-ExtraLight.otf") format("opentype"),
    url("../fonts/SUIT-ExtraLight.woff2") format("woff2"),
    url("../fonts/SUIT-ExtraLight.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/SUIT-Light.otf") format("opentype"),
    url("../fonts/SUIT-Light.woff2") format("woff2"),
    url("../fonts/SUIT-Light.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/SUIT-Regular.otf") format("opentype"),
    url("../fonts/SUIT-Regular.woff2") format("woff2"),
    url("../fonts/SUIT-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/SUIT-Medium.otf") format("opentype"),
    url("../fonts/SUIT-Medium.woff2") format("woff2"),
    url("../fonts/SUIT-Medium.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/SUIT-SemiBold.otf") format("opentype"),
    url("../fonts/SUIT-SemiBold.woff2") format("woff2"),
    url("../fonts/SUIT-SemiBold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/SUIT-Bold.otf") format("opentype"),
    url("../fonts/SUIT-Bold.woff2") format("woff2"),
    url("../fonts/SUIT-Bold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 800;
  font-style: normal;
  src: url("../fonts/SUIT-ExtraBold.otf") format("opentype"),
    url("../fonts/SUIT-ExtraBold.woff2") format("woff2"),
    url("../fonts/SUIT-ExtraBold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  font-weight: 900;
  font-style: normal;
  src: url("../fonts/SUIT-Heavy.otf") format("opentype"),
    url("../fonts/SUIT-Heavy.woff2") format("woff2"),
    url("../fonts/SUIT-Heavy.ttf") format("truetype");
  font-display: swap;
}

/* ==========================================================================
 reset
========================================================================== */

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section,
main,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-size: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
}
body {
  color: var(--text-700);
  font-size: var(--font-18);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.72px;
  font-family: "SUIT", sans-serif;
}
ul,
ol {
  list-style-type: none;
}
img {
  vertical-align: top;
  border-style: none;
}
a {
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
  outline: none;
}
/* a:focus {
  outline: 3px solid var(--secondary_blue_02);
} */
strong,
b {
  font-weight: 700;
}
small {
  font-size: 80%;
}
figcaption {
  font-size: var(--font-18);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.72px;
}
sub,
sup {
  position: relative;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
hr {
  box-sizing: content-box;
  height: 0;
}
q {
  quotes: none;
}
q::before,
q::after {
  content: "";
}
em {
  font-style: inherit;
}
/* table */
table {
  border-spacing: 0;
}
th,
td {
  vertical-align: middle;
}
caption {
  position: absolute;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* form */
input,
select,
textarea {
  box-sizing: border-box;
  border-radius: 0;
  border: 0;
  background-color: transparent;
  vertical-align: middle;
  outline: none;
  color: var(--text-700);
  font-size: var(--font-16);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.64px;
  font-family: "SUIT", sans-serif;
}
textarea {
  resize: none;
}
button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 none;
  background-color: transparent;
  text-align: left;
  vertical-align: middle;
  cursor: pointer;
  outline: none;
  color: var(--text-700);
  font-size: var(--font-18);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.72px;
  font-family: "SUIT", sans-serif;
}
button::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
button:focus {
  outline: 3px solid var(--secondary_blue_02);
}

/* tablet ============================ */

@media screen and (max-width: 1024px) {
  img {
    width: 100%;
    height: auto;
  }
}

/* mobile ============================ */

@media screen and (max-width: 768px) {
  body {
    font-size: var(--font-16);
    line-height: 1.2;
    letter-spacing: -0.64px;
  }
}