:root{
  --font-color : #392210;
}

/* nav */
.container {
    margin-left: 0.875rem;
    margin-right: 0.875rem;
  }
  header {
    /* background-color: var(--first-color); */
    background-color: #00264B;
    position: fixed; /* 스크롤해도 항상 위치 고정 */
    left: 0;
    right: 0;
    top: 0;
  }
  nav {
    height: 66px;
    display: flex; /* 기본값: 수평 방향 */
    justify-content: space-between; /* 양쪽정렬 */
    align-items: center; /* 교차축 가운데 */
  }
  nav i {
    color: #fff;
    font-size: var(--h3-font-size); /* 아이콘 좀 크게 */
  }
  .nav-toggle {
    display: none; /* 안 보이게 하자 */
  }
  .nav-list {
    display: flex; /* 기본값: 수평 방향 */
    column-gap: 1.25rem; /*20px*/
    list-style: none;
  }
  .nav-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 30px;
    margin-right: 20px;
  }
  .title {
    float: right;
    margin-top: 23px;
    font-size: 30px;
    color: #ffffff;
  }
  /* breakpoints */
/* 2K & 4K */

/* tablet */
@media screen and (max-width: 600px) {
  /* width가 600px 이하면 아래 css 적용 */
  .nav-toggle {
    display: block;
    cursor: pointer;
    position: absolute; /* 위치 무시. 로고 가운데 정렬 위하여 */
  }
  .nav-logo {
    margin: 0 auto; /* 로고 가운데 정렬 */
  }
  .log-img{
    margin-bottom: 10px;
  }
  .title{
    display: none;
  }
  .nav-list {
    position: absolute;
    top: 65px;
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: lightgray;
    height: 0;
    overflow: hidden;
    transition: .2s;
  }
  .nav-item {
    padding: 0.5rem 1rem; /* 위 오 아 왼 */
    text-align: center; /* 가운데 정렬 */
    border-bottom: 1px solid #855A3A; /* 아래 선 */
  }
  .nav-link {
    color: var(--title-color);
    display: block; /* 링크의 너비: 컨텐츠 -> nav-item 만큼 늘리자 */
  }
  .show-menu {
    height: auto;
  }
}