body.scrollDown header {
  ul {
    transition: var(--opacity);
    &.subMenu {
      opacity: 0;
      pointer-events: none;
    }
  }
}

header {
  position: fixed;
  top: 0;
  z-index: 888;
  padding: 1rem;
  width: 100%;
  /* background-color: #c1c6cc; */
  user-select: none;
  .logo {
    display: block;
    width: fit-content;
    img {
      height: 40px;
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(309deg) brightness(104%) contrast(101%);
    }
  }
  ul.headerMenu {
    position: absolute;
    right: 5rem;
    top: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    border: var(--bodycolor) solid 1px;
    li {
      width: 10rem;
      a {
        display: block;
        padding: 1rem 0;
        text-align: center;
        color: var(--maincolor);
        background-color: #f5f5f5;
        p {
          display: flex;
          gap: 1rem;
          align-items: center;
          justify-content: center;
          span {
            width: .6rem;
            height: .6rem;
            background-color: #618cae;
            border-radius: 2px;
          }
        }
      }
      &:nth-child(n+1) {
        border-left: var(--bodycolor) solid 1px;
      }
    }
  }

  ul.subMenu {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    li {
      width: 11rem;
      background-color: rgba(56, 95, 127, 1);
      border-radius: 5px;
      a {
        display: block;
        padding: 1.5rem 0;
        letter-spacing: .2rem;
        color: var(--bodycolor);
        text-align: center;
      }
    }
  }

  .navMenu {
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 100;
    width: 50px;
    height: 30px;
    font-size: 120%;
    color: var(--bodycolor);
    transition: var(--all);
    cursor: pointer;
    pointer-events: all;
    span {
      position: absolute;
      left: 0px;
      width: 100%;
      height: 1px;
      background-color: var(--bodycolor);
      transform-origin: 0 50%;
      transition: all 0.2s linear;
      &:first-of-type {
        top: 0px;
      }
      &:nth-of-type(2) {
        top: 10px;
      }
      &:nth-of-type(3) {
        top: 20px;
      }
    }
    &::after {
      content: "MENU";
      display: block;
      margin-top: 1.8rem;
      font-size: .8rem;
      letter-spacing: 0;
      text-align: center;
    }
    &:hover {
      span {
        &:nth-of-type(1) {
          transform: translateY(4px);
        }
        &:nth-of-type(3) {
          transform: translateY(-4px);
        }
      }
    }
    &.isOpen {
      span {
        opacity: 0;
        background-color: var(--bodycolor);
        &:nth-of-type(1) {
          opacity: 1;
          transform: translateY(1.5px) rotate(20deg);
        }
        &:nth-of-type(3) {
          opacity: 1;
          transform: translateY(-1.5px) rotate(-20deg);
        }
      }
      &::after {
        content: "CLOSE";
        color: var(--bodycolor);
      }
    }
    
  }

  &.active {
    background-color: rgba(255, 255, 255, 0.6);
    .logo {
      img {
        filter: invert(20%) sepia(18%) saturate(1098%) hue-rotate(169deg) brightness(95%) contrast(88%);
      }
    }
    .navMenu {
      span {
        background-color: var(--maincolor);
      }
      &:after {
        color: var(--maincolor);
      }
      &.isOpen {
        span {
          background-color: var(--bodycolor);
        }
        &::after {
          color: var(--bodycolor);
        }
      }
    }
  }







  .contentMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(253.17deg, rgba(56, 95, 127, 0.95) 2.24%, rgba(97, 135, 174, 0.95) 98.11%);
    opacity: 0;
    transition: var(--opacity);
    pointer-events: none;
    transition: all 1s 0s var(--easeInOutCubic);
    overflow-y: scroll;
    &.isOpen {
      opacity: 1;
      pointer-events: all;
    }
    nav {
      margin: 6rem auto;
      max-width: 1080px;
      dl {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        dt {
          ul {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            li {
              position: relative;
              width: calc(25% - .8rem);
              border-radius: 2%;
              overflow: hidden;
              a {
                &::after {
                  content: "";
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  opacity: 0;
                  transition: var(--all);
                }
                p {
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  z-index: 1;
                  transform: translateX(-50%) translateY(-50%);
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  font-size:clamp(.6rem, 1vw, .8rem);
                  text-align: center;
                  color: var(--bodycolor);
                  transition: var(--all);
                  span {
                    display: block;
                    font-family: "Alumni Sans SC", sans-serif;
                    font-size: 300%;
                    font-weight: 600;
                    line-height: 1em;
                    white-space: nowrap;
                  }
                  &::after {
                    content: "\e902";
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 2rem;
                    width: 2.5vw;
                    max-width: 2rem;
                    height: 2.5vw;
                    max-height: 2rem;
                    font-family: "ar", serif;
                    font-size: .6rem;
                    line-height: 0;
                    color: #385f7f;
                    background-color: var(--bodycolor);
                    border-radius: 10%;
                    overflow: hidden;
                    transition: var(--all);
                  }
                }
                &:hover {
                  opacity: unset;
                  &::after {
                    content: "";
                    background: linear-gradient(225deg, rgba(185, 200, 212, 0.8) 25.99%, rgba(255, 255, 255, 0.8) 74.49%);
                    opacity: 1;
                  }
                  p {
                    color: #385f7f;
                    &::after {
                      color: var(--bodycolor);
                      background-color: #385f7f;
                    }
                  }
                }
              }

            }
          }
        }
        dd {
          ul {
            display: flex;
            flex-wrap: wrap;
            column-gap: 1rem;
            li {
              position: relative;
              width: calc(50% - .5rem);
              a {
                display: block;
                padding: 1.5rem 1rem;
                border-bottom: rgba(255, 255, 255, 0.5) solid 1px;
                p {
                  position: relative;
                  padding-left: 2rem;
                  font-size:clamp(.6rem, 1vw, .8rem);
                  color: var(--bodycolor);
                  span {
                    display: block;
                    font-family: "Alumni Sans SC", sans-serif;
                    font-size: 250%;
                    font-weight: 600;
                    line-height: 1em;
                    white-space: nowrap;
                  }
                  &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: .6rem;
                    height: 100%;
                    background-color: #2c3e50;
                  }
                  &::after {
                    content: "\e902";
                    position: absolute;
                    right: 0;
                    top: 50%;
                    font-family: "ar", serif;
                    font-size: .6rem;
                    line-height: 0;
                    color: var(--bodycolor);
                  }                  
                }
              }
              &.new {
                p {
                  sup {
                    &::before {
                      content: "NEW";
                      margin-right: 1rem;
                      padding: .2rem .6rem;
                      font-size: 80%;
                      line-height: 0;
                      text-align: center;
                      background-color: #e03636;
                    }
                  }
                }                
              }
            }
          }
        }
      }
      ol {
        display: flex;
        margin-top: 4rem;
        border: var(--bodycolor) solid 2px;
        border-radius: 2px;
        li {
          display: block;
          width: 20%;
          border-radius: 2px;
          &:nth-child(n+1) {
            border-left: var(--bodycolor) solid 1px;
          }
          &:nth-child(-n+4) {
            border-right: var(--bodycolor) solid 1px;
          }
          &:nth-child(-n+3) {
            background-color: #f5f5f5;
          }
          &:nth-child(n+4) {
            background-color: #385f7f;
            a {
              color: var(--bodycolor);
              p {
                &::before {
                  background-color: #e6bc76;
                }
              }
            }
          }
          a {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem 0;
            text-align: center;
            p {
              position: relative;
              width: fit-content;
              &::before {
                content: "";
                position: absolute;
                left: -1rem;
                top: 50%;
                transform: translateY(-50%);
                width: .5vw;
                max-width: .8rem;
                height: .5vw;
                max-height: .8rem;
                background-color: #618cae;
                border-radius: 10%;
              }

            }
          }
        }
      }
    }
  }
}


@media (max-width: 1080px) {

}


@media (max-width: 768px) {

  header {
    padding: .5rem;
    .logo {
      img {
        width: auto;
        height: 30px;
      }
    }
    ul.headerMenu {
      display: none;
    }

    ul.subMenu {
      display: none;
    }

    .navMenu {
      right: .5rem;
      top: .5rem;
      width: 40px;
      height: 40px;
      -webkit-tap-highlight-color: transparent;
      span {
        &:first-of-type {
          top: 0px;
        }
        &:nth-of-type(2) {
          top: 8px;
        }
        &:nth-of-type(3) {
          top: 16px;
        }
      }
      &::after {
        margin-top: 1.2rem;
        font-size: .75rem;
      }
      &:hover {
        span {
          &:nth-of-type(1) {
            transform: unset;
          }
          &:nth-of-type(3) {
            transform: unset;
          }
        }
      }
      &.isOpen {
        span {
          &:nth-of-type(1) {
            opacity: 1;
            transform: translateY(1px) rotate(20deg);
          }
          &:nth-of-type(3) {
            opacity: 1;
            transform: translateY(-1px) rotate(-20deg);
          }
        }
      }
      
    }

    &.active {
    }


    .contentMenu {
      &.isOpen {
      }
      nav {
        margin: 4rem auto;
        padding: 2%;
        dl {
          gap: 1rem;
          dt {
            ul {
              gap: .6rem;
              li {
                width: calc(50% - .3rem);
                a {
                  &::after {
                  }
                  p {
                    span {
                    }
                    &::after {
                      margin-top: 1rem;
                      width: 6vw;
                      max-width: 5rem;
                      height: 6vw;
                      max-height: 5rem;
                    }
                  }
                }
              }
            }
          }
          dd {
            ul {
              flex-direction: column;
              column-gap: unset;
              li {
                width: 100%;
                a {
                  padding: 1rem;
                  p {
                    span {
                    }
                    &::before {
                    }
                    &::after {
                    }                    
                  }
                }
                &.new {
                  p {
                    sup {
                      &::before {
                      }
                    }
                  }
                }
              }
            }
          }
        }
        ol {
          margin: 2rem auto;
          li {
            font-size: .8rem;
            &:nth-child(n+1) {
            }
            &:nth-child(-n+4) {
            }
            &:nth-child(-n+3) {
              width: 100%;
            }
            &:nth-child(n+4) {
              display: none;
              width: 50%;
              a {
                p {
                  &::before {
                  }
                }
              }
            }
            a {
              p {
                &::before {
                  width: 2vw;
                  height: 2vw;
                }
              }
            }
          }
        }
      }
    }
  }

}