* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "PingFang SC", "Microsoft YaHei UI", sans-serif;
}

 .background {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
   width: 100%;
   height: 100vh;
   background-image: url("../img/6nGqyviS.webp");
   background-size: cover;
 }

 nav {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;

   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 5vw;
   height: 80px;
   background-color: black;
 }

 .logo {
   font-size: 24px;
   font-weight: 600;
   color: white;
   flex: 1;
 }

 .nav-menu {
   flex: 1;
   display: flex;
   justify-content: space-between;
   opacity: 0;

   max-width: 550px;
 }

 .burger div {
   width: 25px;
   height: 3px;
   background-color: white;
   margin: 4px;
 }

 .burger {
   display: none;
 }

@media screen and (max-width: 768px) {
    .wrap {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 163px;
        height: 1690px;
        opacity: 1;

        flex-direction: column;
        align-items: center;
        justify-content: flex-start;


        transform: translate(-310px,-20px) scaleX(0.7);
        transition: 0.5s ease-in-out;
    }

@media screen and (max-width: 768px) {
    .nav-menu {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 163px;
        height: 1690px;
        opacity: 1;

        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        transform: translateX(100%);
        transition: 0.5s ease-in-out;

    }
}

    @media screen and (max-width: 768px) {
        .left {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 163px;
            height: 1690px;
            opacity: 0;

            flex-direction: column;
            align-items: center;
            justify-content: flex-start;

            transition: 0.2s ease-in-out;

        }
    }


  .nav-menu.open {
    transform: translateX(0px);
  }

   .burger {
     display: block;
   }

   .burger.active div {
     transition: 0.3s ease-in-out 0.3s;
   }

   .burger.active .top-line {
     transform: rotate(45deg) translate(4px, 6px);
   }

   .burger.active .bottom-line {
     transform: rotate(-45deg) translate(4px,-6px);
   }

   .burger.active .middle-line {
     opacity: 0;
     transform: translateX(0px);
     transition: 0.3s ease-in-out;
   }

}