:root{
  --point-color:#5F7DFF;
  --point-color02:#E4E6EE;
  --point-color03:#F5F7FA;
  --point-color05:#FF6F61;
  --point-color06:#10B254;
  --gray-3:#F5F5F5;
  --gray-10:#D6D6D6;
  --gray-20:#BDBDBD;
  --gray-30:#9E9E9E;
  --gray-40:#757575;
  --gray-50:#525252;
  --gray-70:#2C2C2C;
  --gray-main:#292929;
}
@font-face {
  font-family: 'Paperlogy-7Bold';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Paperlogy-8ExtraBold';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}
*{
  letter-spacing: -0.03em;
  box-sizing: border-box;
}
html, body {
  font-family: pretendard, cursive, Arial, sans-serif;
  margin: 0;
  padding: 0;
  }
html,body{
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f0f0f0;
  }
  &::-webkit-scrollbar-thumb {
    background-color: var(--point-color);
  }
}
p{
  margin: 0;
}
button{
  letter-spacing: -0.03em;
  font-family: pretendard, cursive;
}
span{
  line-height: 150%;
}
.header{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 37px;
  user-select: none;
  background-color: transparent;
  position: fixed;
  width: 100%;
  height: 90px;
  font-weight:600;
  z-index: 10;
  transition: all 300ms cubic-bezier(0.26, 0.65, 0.15, 1);
  >img{
    position: absolute;
    left: 47.6px;
  }
  & a{
    cursor: pointer; text-decoration: none;
    color: white;
  }
}
.footer{
  position: relative;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #0f0f0f;
  width: 100%;
  height: 472px;
  z-index: 9;
  .upbtn{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: 2px solid white;
  }
  .upbtn:hover{
    svg{
      animation: upbtnanim 800ms ease-in-out infinite forwards;
    }
  }
}
.fadein{
  opacity: 0;
  transform: translateY(40px);
  animation: fade-in 0.6s ease forwards;
}
@keyframes fade-in {
  from{transform: translateY(40px); opacity: 0;}
  to{transform: translateY(0px); opacity: 1;}
}
@keyframes upbtnanim {
  0%{transform: translateY(1px);}
  90%{transform: translateY(-1px);}
  100%{transform: translateY(1px);}
}