header {
  .headerInner {
    .logoWrap {
      @media ( min-width : 959px ) {
        background-color: white;
        position: relative;
        z-index: 14;
      }
    }
    nav {
      dl {
        display: flex;
        padding:0;
        @media ( max-width : 959px ) {
          display: none;
        }
        >div {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          flex-direcrion: column;
          width: calc(100% / 4);
          position: relative;
          &:last-of-type {
            dt {
              &:after {
                content:"";
                position: absolute;
                bottom:0;
                right: 1px;
                background-color: black;
                width: 1px;
                height: calc(100% - 10px);
              }
            }
          }
          dt {
            &:before {
              content:"";
              position: absolute;
              bottom:0;
              left:0;
              background-color: black;
              width: 1px;
              height: calc(100% - 10px);
            }
            position: relative;
            z-index:5;
            width: 100%;
            z-index:13;
            background-color: white;
            padding-top: 10px;
            cursor: pointer;
            a {
              padding: 10px 20px;
              text-decoration: none;
              color: black;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 1rem;
              font-weight: bold;
              pointer-events: none;
            }
          }
          dd {
            position: absolute;
            bottom:0;
            left:0;
            z-index:12;
            background-color: rgba(255,255,255,1);
            transition: all 0.5s ease;
            opacity: 0;
            transform: translateY(50%);
            height: 0;
            overflow: hidden;
            border-radius: 0 0 10px 10px;
            border:solid 1px rgba(0,0,0,.2);
            border-top:none;
            margin:0;
            padding:0;
            ul {
              display: flex;
              flex-wrap: wrap;
              justify-content: flex-start;
              align-items: center;
              flex-direcrion: column;
              li {
                width: 100%;
                border: none!important;
                a {
                  font-weight: normal;
                }
              }
            }
          }
          &.perforate {
            dt a {
              pointer-events: auto;
            }
          }
          &.active {
            dt {
              a {
                pointer-events: auto;
              }
            }
            dd {
              transform: translateY(100%);
              height: initial;
              opacity: 1;
            }
          }
        }
      }

    }
  }
}