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