* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-y: scroll; }
@supports (scrollbar-gutter: stable) {
  html { overflow-y: auto; scrollbar-gutter: stable; }
}
body {
  background: #fff;
  font-family: 'Smiley Sans Chinese', 'Dosis', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #282828;
  min-height: 100vh;
}
a { text-decoration: none; color: #282828; }
ul, li { list-style: none; }
header {
  position: fixed; top: 0; left: 0; width: 100%;
  background: rgba(255,255,255,.95); z-index: 100;
  padding: clamp(50px,6vh,70px) 0 clamp(20px,2.5vh,30px);
}
.header-inner {
  max-width: 100%;
  padding: 0 clamp(30px,8vw,100px) 0 clamp(50px,10vw,130px);
  display: flex; justify-content: space-between; align-items: center;
}
h1 {
  font-size: clamp(20px,2vw,25px); font-weight: 400;
  letter-spacing: 1.5px; text-transform: uppercase; color: #282828;
}
#hamburger { display: none; }
.hamburger { display: none; position: relative; width: 22px; height: 22px; cursor: pointer; z-index: 200; }
.hamburger .rotate-wrapper {
  position: absolute; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.hamburger .line, .hamburger .rotate-wrapper::before, .hamburger .rotate-wrapper::after {
  position: absolute; width: 18px; height: 1.5px; background: #282828;
  transition: transform .3s ease;
}
.hamburger .line { transition: transform .3s ease, opacity .3s ease; }
.hamburger .rotate-wrapper::before { content: ''; transform: translateY(-6px); }
.hamburger .rotate-wrapper::after { content: ''; transform: translateY(6px); }
#hamburger:checked ~ .header-inner .hamburger .line { opacity: 0; }
#hamburger:checked ~ .header-inner .hamburger .rotate-wrapper::before { transform: rotate(45deg); }
#hamburger:checked ~ .header-inner .hamburger .rotate-wrapper::after { transform: rotate(-45deg); }
.hamburger label { position: absolute; inset: 0; cursor: pointer; }
nav { position: static; width: auto; background: none; padding: 0; box-shadow: none; }
.menu {
  display: flex; flex-direction: row; align-items: center;
  gap: clamp(18px,2vw,30px); font-size: 15px; font-weight: 300;
  letter-spacing: .5px; margin: 0 20px 0 0; padding: 0;
}
.menu > li { position: relative; width: auto; }
.menu > li:not(:first-child) { margin-left: 60px; }
.menu > li > a {
  color: #282828; text-decoration: none; transition: opacity .3s ease;
  display: inline-block; padding: 0;
}
@media (max-width: 991.98px) {
  .hamburger { display: flex; }
  .header-inner nav {
    position: fixed; top: 0; right: -300px; bottom: 0; width: 300px;
    background: rgba(248,248,248,.98); padding-top: clamp(100px,14vh,130px);
    transition: right .4s ease-in-out; z-index: 150;
    box-shadow: -2px 0 10px rgba(0,0,0,.1);
  }
  #hamburger:checked ~ .header-inner nav { right: 0; }
  .menu {
    flex-direction: column; align-items: flex-start;
    gap: clamp(20px,3vh,30px); padding: 0 clamp(30px,5vw,40px);
  }
  .menu > li:nth-child(n) { width: 100%; margin: 0 20px; }
  .menu > li:first-child { margin-top: 65px; }
  .menu > li > a { display: block; padding: 10px 0; }
}
@media (min-width: 992px) {
  .menu a { position: relative; margin-right: 20px; }
  .menu a::before {
    content: ''; position: absolute; left: 50%; right: 50%; bottom: -3px;
    height: 2px; transition: .25s linear;
  }
  .menu a:hover::before { background: pink; left: 0; right: 0; }
}
@keyframes slide-up {
  from { transform: scale(.75); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}