header {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--MAIN-COLOR, #1860cc);
  width: calc(100% - 300px);
  padding: 10px 200px 10px 100px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;

  .team_name {
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;

    .logo {
      width: 80px;
      height: 80px;
    }

    span {
      color: #fff;
      font-family: Khand;
      font-size: 42px;
      font-style: normal;
      font-weight: 600;
      line-height: 100%;
      letter-spacing: -0.05em;
    }
  }

  nav {
    display: flex;
    align-items: center;
    gap: 60px;

    .icon {
      display: flex;
      align-items: center;
      gap: 30px;

      .instagram {
        width: 41px;
        height: 44px;
        background-image: url("../../images/instagram.svg");
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
      }

      .facebook {
        width: 22px;
        height: 40px;
        background-image: url("../../images/facebook.svg");
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
      }
    }

    .hamburger {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      cursor: pointer;

      .line {
        width: 60px;
        height: 0px;
        margin: 0;
        border-width: 0px;

        &:first-child {
          border-bottom: 3px solid #fff;
        }
        &:last-child {
          border-bottom: 6px solid #fff;
        }
      }

      &.on {
        gap: 0px;

        .line {
          &:first-child {
            transform: rotate(20deg);
          }
          &:last-child {
            transform: rotate(-20deg);
          }
        }
      }
    }
  }
}

@media (width <= 1300px) {
  header {
    width: calc(100% - 200px);
    padding: 10px 170px 10px 30px;

    .team_name {
      gap: 15px;

      .logo {
        width: 70px;
        height: 70px;
      }

      span {
        font-size: 36px;
      }
    }
    nav {
      gap: 20px;

      .icon {
        gap: 15px;
      }

      .hamburger {
        .line {
          width: 50px;
        }
      }
    }
  }
}

@media (width <= 768px) {
  header {
    width: calc(100% - 90px);
    padding: 5px 80px 5px 10px;

    .team_name {
      gap: 10px;

      .logo {
        width: 40px;
        height: 40px;
      }

      span {
        font-size: 18px;
      }
    }
    nav {
      gap: 10px;

      .icon {
        gap: 10px;

        .instagram {
          width: 21px;
          height: 22px;
          background-image: url("../../images/instagram_sp.svg");
          background-position: 50% 50%;
          background-repeat: no-repeat;
          background-size: contain;
          cursor: pointer;
        }

        .facebook {
          width: 10.5px;
          height: 20px;
          background-image: url("../../images/facebook_sp.svg");
          background-position: 50% 50%;
          background-repeat: no-repeat;
          background-size: contain;
          cursor: pointer;
        }
      }

      .hamburger {
        gap: 12px;

        .line {
          width: 35px;

          &:first-child {
            border-bottom: 2px solid #fff;
          }
          &:last-child {
            border-bottom: 4px solid #fff;
          }
        }
      }
    }
  }
}