/* 네비 — 표의 항목명 칸(td.header)에 걸리지 않도록 div 로 한정한다 */
div.header {
  width: 100%;
  height: 64px;
  position: fixed;
  z-index: 99;
  transition: .3s;

  .inner {
    width: 1280px;
    height: 100%;
    align-items: center;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  /* 반응형 LOGIN + 햄버거 묶음 (PC 숨김) */
  .m-head-right {
    display: none;
    align-items: center;
    gap: 16px;

    .m-head-login {
      color: #143766;
      padding: 6px 13px;
      border: 1px solid #143766;
      border-radius: 99px;
      font-size: .875rem;
      cursor: pointer;
    }
  }

  .mobile-menu-black {
    display: none;
    cursor: pointer;
  }

  .mobile-menu {
    display: none;
    cursor: pointer;
  }


  .mobile-menu-open {
    width: 100%;
    height: 100dvh;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
    background: #fff;
    z-index: 1000;
    visibility: hidden;
    transition: transform .35s ease, visibility .35s;
    overflow-y: auto;
  }

  &.scroll {
    background: rgb(255, 255, 255);
    box-shadow: 0 -8px 34px -11px #a1a1a1;

    .logo a .logo-white {
      display: none;
    }

    .logo a .logo-black {
      display: block;
    }

    /* .menu a {
      color: #121212;
    } */

    .login {
      color: #121212;
      border-color: #121212;
    }
  }

  /* header스크롤시 네비색상변경 */
}



/* login popup */
.login-pop {
  width: 100%;
  height: 100vh;
  background: #121212a3;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  visibility: hidden;

  .loginBox {
    padding: 32px;
    background: #fff;
    border-radius: 6px;
    position: relative;
    width: 344px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .pop-close {
      position: absolute;
      top: -30px;
      right: 0;
      color: #fff;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .loginBt {
      border-radius: 4px 4px 0 0;
      background: #2471E2;
      color: #fff;
      position: absolute;
      left: -76px;
      top: 27px;
      padding: 12px 30px;
      transform: rotate(-90deg);
    }

    .loginBoxTit {
      text-align: center;
      width: 186px;
      margin: 0 auto;
    }

    .flexcol {
      margin-top: 20px;
      width: 280px;

      span {
        color: #444;
        font-size: 0.7rem;
      }

      input {
        width: 100%;
        height: 40px;
        padding: 0 6px;
        border: 1px solid #DCDDDD;
        border-radius: 4px;
      }
    }

    .btn-auth img {
      width: 14px;
      height: 14px;
    }

    button {
      background: #09296D;
      margin-top: 20px;
      color: #fff;
      border-radius: 4px;
      width: 100%;
      height: 44px;
      cursor: pointer;
    }

    .mem_join {
      margin-top: 12px;
      display: flex;
      justify-content: space-around;
      align-items: center;


      div {
        color: #797979;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .save label,
      .join {
        color: #797979;
        font-size: 0.85rem;
      }
    }

    .auth-login {
      margin-top: 0;

      .auth-log-txt {
        margin-top: 32px;
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        color: #7A7A7A;

        p {
          width: fit-content;
          text-align: center;
          background-color: #fff;
          padding: 0 12px;
          position: relative;
          z-index: 1;
          font-size: 0.7rem;
        }

        div {
          width: 100%;
          border-top: 1px solid #cdcdcd;
          position: absolute;
          top: 43%;
          z-index: 0;
        }
      }

      .btn-auth {
        border-radius: 4px;
        background: #FFF;
        color: #fff;
      }
    }

    /* login box //*/
  }

  &.view {
    visibility: visible;
  }
}

/* login-popup //*/




@media(max-width:1279px) {
  .header .inner {
    width: 1080px;
  }
}

@media(max-width:1079px) {

  div.header {
    .inner {
      padding: 0 20px;
      width: 100%;

      .menu {
        display: none;

      }

      .m-head-right {
        display: flex;
      }

      .mobile-menu {
        display: block;
      }
    }

    &.scroll {
      .mobile-menu-black {
        display: block;
      }

      .mobile-menu {
        display: none;
      }
    }
  }

  .header .mobile-menu-open {
    width: 100%;
    height: 100dvh;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
    background: #fff;
    z-index: 1000;
    visibility: hidden;
    transition: transform .35s ease, visibility .35s;
    overflow-y: auto;

    .m-inner {
      padding: 10px 20px;

      .mobile-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo {
          width: 168px;
          height: 24px;

          img {
            width: 100%;
          }
        }

        .login-wrap {
          display: flex;
          gap: 18px;
          align-items: center;

          .m-login {
            background-color: #fff;
            color: #A1A1A1;
          }

          .close {
            width: 33px;
            height: 33px;

            img {
              width: 100%;
            }
          }
        }
      }

      /* mobile-top //*/

      .menu-list {
        margin-top: 40px;

        .menu-item {
          border-bottom: 1px solid #E6E6E6;
          
          a {
            width: 100%;
            display: inline-block;
            font-size: 1.25rem;
            font-weight: 700;
            color: #121212;
            padding: 16px 12px;
          }
        }
      }
    }

    &.extend {
      transform: translateX(0);
      visibility: visible;
    }
  }

  /* mobile-menu-open //*/

}

/* max-width:1079px //*/


.logo {
  width: 238px;
  height: 35px;

  a img {
    height: 100%;
  }
}


.menu {
  display: flex;
  gap: 54px;
  align-items: center;

  ul {
    display: flex;
    gap: 54px;

    li a {
      color: #143766;
      font-size: 1.05rem;

      &:hover {
        color: #081e3b;
      }
    }
  }

  .menu-right {
    display: flex;
    gap: 20px;
    align-items: center;
    position: relative;

    .family-site {
      position: relative;

      .family-menu {
        display: flex;
        gap: 2px;
        align-items: center;
        color: #143766;
        cursor: pointer;


        svg {
          transition: 0.3s ease-in-out;

          path {
            fill: #143766;
          }
        }
      }

      ul {
        display: none;
        background: #FFF;
        border-radius: 4px;
        box-shadow: 0 0 7px 0 rgba(63, 63, 63, 0.25);
        position: absolute;
        flex-direction: column;
        padding: 12px 50px 12px 12px;
        gap: 12px;
        right: 6px;
        top: 32px;


        li a {
          font-size: 0.8rem;
          color: #404040;

          &:hover {
            color: #2471E2;
          }
        }
      }

      &.on ul {
        display: block;
      }

      &.on .family-menu>svg {
        transform: rotate(-180deg)
      }
    }

    .login {
      color: #143766;
      padding: 6px 13px;
      border: 1px solid #143766;
      border-radius: 99px;
      cursor: pointer;
    }
  }


}

/* header //*/