:root { --header-h: 80px; }   /* 기본(데스크톱) */
@media (max-width: 768px) {
  :root { --header-h: 60px; } /* 모바일 */
}

#header {
  background-color: #fff;
  padding: 14px 20px 14px 35px;
  /* border-bottom: 2px solid #000; */
  box-shadow: 0px 1px 10px #777;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;

  /* width: 100vw; */
  z-index: 999;
  /* position: relative; */
  position: sticky;

  /* display: none; */

  a {
    color: inherit;
    text-decoration: none;
  }

  h1 {
    font-size: 26px;
    color: #fff;
  }

  .logo img {
    height: 31px;
  }

  ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0rem;

    button {
      border: none;
      background: none;
      color: inherit;
      font-size: 12px;
      font-weight: 700;
    }

    .lang img {
      scale: 1;
      display: inline-block;
      transform: translateY(0px);
    }

    .lang {
      /* position: relative; */
      /* opacity: 0.5; */
      /* filter: invert(50%); */
      color: #333;
      /* background:#dedede; */
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;

      select {
        font-family: "Pretendard", sans-serif;
        /* display: none; */
        position: relative;
        /* left:0; */
        /* top: 25px; */
        height: 24px;
        /* border: 2px solid #999; */
        border: none;

        font-size: 14px;
        font-weight: 900;
        /* border-radius: 8px; */
        color: #666;
        /* background:#dedede; */
        cursor: pointer;
      }

      select:focus {
        outline: 0;
      }
    }

    .lang:hover {
      /* color:#fff; */
      /* background:#007bff; */
      appearance: none;

      select:hover {
        color: #ff5a24;
        /* background-color: #007bff; */
        border: none;
        font-size: 14px;
        font-weight: 900;
      }
    }

    option {
      font-size: 14px;
      font-weight: 900;
      border: none;
      outline: none;
    }

    .login button {
      /* background:#666; */
      padding: 3px 15px;
      background: #666 !important;
      color: #fff;
      border-radius: 10px;
      border: 2px solid #666;
      margin-left: 15px;
      cursor: pointer;
    }

    .login button:hover {
      background: #ff5a24 !important;
      border: 2px solid #ff5a24;
      color: #fff;
    }

    .contact button {
      /* background:#666; */
      padding: 3px 15px;
      background: #666 !important;
      color: #fff;
      border-radius: 10px;
      border: 2px solid #666;
      margin-left: 15px;
      cursor: pointer;
    }

    .contact button:hover {
      background: #ff5a24 !important;
      border: 2px solid #ff5a24;
      color: #fff;
    }
  }
}

/* Mobile view */
@media (max-width: 768px) {
  /* 화면 너비가 768px 이하일 때 텍스트 변경 */
  #header {
    padding: 14px 20px 14px 20px;
    height: 60px;
    box-shadow: 0px 1px 10px #777;

    .logo img {
      height: 24px;
    }

    ul {
      button {
        font-size: 11px;
        font-weight: 700;
      }

      .lang img {
        scale: 1;
        display: inline-block;
        transform: translateY(0px);
      }

      .lang {
        select {
          position: relative;
          height: 24px;
          border: none;
          font-size: 12px;
          font-weight: 900;
          color: #666;
          cursor: pointer;
        }

        select:focus {
          outline: 0;
        }
      }

      .lang:hover {
        appearance: none;

        select:hover {
          color: #007bff;
          border: none;
          font-size: 12px;
          font-weight: 900;
        }
      }

      option {
        font-size: 10px;
        font-weight: 900;
      }

      .login button {
        /* background:#666; */

        padding: 3px 10px;
        background: #666;
        color: #fff;
        border-radius: 10px;
        border: 2px solid #666;
        margin-left: 5px;
        cursor: pointer;
      }

      .login button:hover {
        background: #007bff;
        border: 2px solid #007bff;
        color: #fff;
      }
    }
  }
}