@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nova+Mono&display=swap');

@font-face {
  font-family: 'NotoSansKR';
  font-style: normal;
  font-weight: 100;
  src: url('./fonts/NotoSansKR-ExtraLight.woff') format('woff');
}

@font-face {
  font-family: 'NotoSansKR';
  font-style: normal;
  font-weight: 200;
  src: url('./fonts/NotoSansKR-Light.woff') format('woff');
}

@font-face {
  font-family: 'NotoSansKR';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/NotoSansKR-DemiLight.woff') format('woff');
}

@font-face {
  font-family: 'NotoSansKR';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/NotoSansKR-Regular.woff') format('woff');
}

@font-face {
  font-family: 'NotoSansKR';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/NotoSansKR-Medium.woff') format('woff');
}

@font-face {
  font-family: 'NotoSansKR';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/NotoSansKR-Bold.woff') format('woff');
}

@font-face {
  font-family: 'NotoSansKR';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/NotoSansKR-Bold-Hestia.woff') format('woff');
}

@font-face {
  font-family: 'NotoSansKR';
  font-style: normal;
  font-weight: 800;
  src: url('./fonts/NotoSansKR-Black-Hestia.woff') format('woff');
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100;
  src: url('./fonts/Montserrat-ExtraLight.woff') format("woff");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 200;
  src: url('./fonts/Montserrat-Light.woff') format("woff");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/Montserrat-Book.woff') format("woff");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/Montserrat-Regular.woff') format("woff");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/Montserrat-Medium.woff') format("woff");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/Montserrat-Bold.woff') format("woff");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/Montserrat-SemiBold.woff') format("woff");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  src: url('./fonts/Montserrat-Black.woff') format("woff");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 900;
  src: url('./fonts/Montserrat-ExtraBlack.woff') format("woff");
}

@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 200;
  src: url('./fonts/Play-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/Play-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Lovelace';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/Lovelace-Medium.woff') format('woff');
}

* {
  font-family: "Montserrat", "NotoSansKR";
  word-break: keep-all;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

html, body, div, span, object, iframe, 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, var, 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, hgroup,
menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  list-style: none;
}

html,
body {
  height: 100%
}

body {
  overflow: hidden;
  background: #fff;
  line-height: 1;
}

body.overflow {
  overflow: hidden;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

nav>ul {
  list-style: none;
}

nav>ul>li {
  display: inline-block;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  text-decoration: none;
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  background: rgba(0, 0, 0, 0.1);
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

textarea {
  resize: none;
}

button,
input[type="text"],
input[type="submit"],
textarea {
  background: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: none;
  outline: none;
}

section {
  padding-top: 10vw;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

section .item {
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  width: 30%;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  margin: 0px 1.51% 7% 1.51%;
}

section .item .thumb {
  transition: all .3s ease;
}

section .item .thumb img {
  width: 100%;
}

section .item:hover .thumb {
  transform: scale(1.1);
  filter: grayscale(1) brightness(0.5);
}

h1 {
  display: none;
  font-size: 2.25rem;
  text-transform: uppercase;
  width: 1096px;
  height: 365px;
  color: goldenrod;
  position: absolute;
  perspective: 900px;
}

.char {
  font-family: 'Nova Mono', monospace;
  offset-path: path('M.5 122.7s24.7-275 276.9 0c327.1 356.7 266.1-330.3 548-33.3 256.9 270.7 271.1 0 271.1 0');
  offset-distance: calc(var(--char-index) * 1.75rem);
  position: absolute;
  animation: wave 2200ms cubic-bezier(.62, .01, .42, 1.01) infinite alternate calc(var(--char-index) * 20ms),
    wave2 2200ms cubic-bezier(.62, .01, .42, 1.01) infinite alternate calc(var(--char-index) * 20ms);
  transform: perspective(800px) scale(1) rotate3d(0, 0, 0, 0);
}

@keyframes wave {
  100% {
    offset-distance: calc((var(--char-index) * 3rem) + 300px);
    transform: perspective(800px) scale(1.25) rotate3d(1, 0, 0, 180deg);
    color: red;
  }
}

@keyframes wave2 {
  100% {
    offset-distance: calc((var(--char-index) * 3.45rem) + 600px);
    transform: perspective(800px) scale(1.75) rotate3d(1, 0, 0, 360deg);
    color: rgb(0, 175, 117);
  }
}

@media screen and (max-width:800px) {
  section .item {
    width: 45%;
    margin: 0px 2.5% 7% 2.5%;
  }
}

@media screen and (max-width:540px) {
  section .item {
    width: 90%;
    margin: 0px 5% 7vw 5%;
  }
}