.blog{
  #start{
    .cat-list {
        width: 100%;
        z-index: 999;
        left: -100%;
        &::before{
          display: block;
          content: " ";
          width: 0%;
          height: 1px;
          background: black;
        }
        &::after {
          display: block;
          content: " ";
          width: 0%;
          height: 1px;
          background: black;
        }
        ul {
          opacity: 0;
          display: inline-flex;
          margin: 10px 0;
          .btn-group{
            display: flex;
            margin-right: 10px;
            &::after{
              width: 5px;
              content: " ";
            }
            &:hover{
              &::after{
                content: "\002022";
              }
            }
            input{
              display: none;
            }
          }
        }
      }
    #items{
      .full-works{
        .card{
          width: calc((100vw / 3) - 6.5px);
        }
      }
    }
  }
  .down{
    .cat-list{
      left: 0;
      &::after{
        animation: showborder 2.5s 1.6s ease forwards;
      }
      ul{
        animation: ultranslate 1s 2.5s ease forwards;
      }
    }
  }
}