.slb {
  position: fixed;
  display: none;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: .4s ease;
  z-index: -1;
}

.slb.active {
  left: 0;
}

.slb > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

.slb > ul li a {
  position: relative;
  display: block;
  margin: 1rem 0;
  /* padding: 1rem 0; */
  font-size: var(--slb_menu_size);
  transform: translateY(30%);
  opacity: 0;
  color: var(--slb_menu_color);
  font-family: var(--slb_menu_font);
  /* z-index: 1 */
}

.slb > ul li a.active::before {
  content: '';
  position: absolute;
  bottom: 0;
  height: 50%;
  width: 100%;
  background: var(--color_pmy);
  opacity: .35;
  z-index: -1
}

.slb.active  > ul li:nth-child(1) a {
  animation: ss .7s .2s both;
}
.slb.active  > ul li:nth-child(2) a {
  animation: ss .7s .3s both;
}
.slb.active  > ul li:nth-child(3) a {
  animation: ss .7s .4s both;
}
.slb.active  > ul li:nth-child(4) a {
  animation: ss .7s .5s both;
}
.slb.active  > ul li:nth-child(5) a {
  animation: ss .7s .6s both;
}
.slb.active  > ul li:nth-child(6) a {
  animation: ss .7s .7s both;
}
.slb.active  > ul li:nth-child(7) a {
  animation: ss .7s .8s both;
}
.slb.active  > ul li:nth-child(8) a {
  animation: ss .7s .9s both;
}

@keyframes ss {
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}



.menu_slice {
  margin-top: 2rem;
}

.cs_menu a {
  font-size: 1.8rem !important;
  color: #808080 !important
}


@media all and (max-width: 810px) {
  .slb {
    display: block;
  }
}