@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap");
#hd .header {
  font-family: "Noto Sans KR", sans-serif;
  width: 100%;
  height: 90px;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.95);
  z-index: 99999;
  box-shadow: 0px 5px 10px 0px rgb(250 141 13 / 20%);
}
#hd .menu-wrapper {
  margin: 0 auto;
  width: 75%;
  display: flex;
  justify-content: space-between;
  gap: 13.3%;
}
#hd .menu-wrap {
  width: 100%;
  height: 90px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#hd .menu-wrap li {
  line-height: 90px;
}
#hd .menu-wrap li a {
  font-size: 20px;
  font-weight: 500;
  transition: 0.5s;
  color: #6b5454;
  font-family: "GmarketSans";
}
#hd .menu-wrap li a:hover {
  color: #ff744d;
  border-bottom: 1px solid #ff744d;
}
#hd .logo {
  width: 170px;
  height: 149px;
  position: relative;
  top: 21px;
}
#hd .logo-img {
  width: 112px;
  height: 149px;
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 99;
  transform: translate(-50%, -50%);
}
#hd .logo-img img {
  width: 100%;
}
#hd .logo-img svg {
  width: 100%;
}
#hd .logo-btm {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 170px;
  height: 80px;
  background: url(../img/header-logo-sub.png) no-repeat center center/cover;
}
#hd .medal {
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 999999;
  width: 130px;
}
#hd .medal img {
  width: 100%;
}
#hd .award {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 999999;
  width: 137px;
}
#hd .award img {
  width: 100%;
}
#hd #hamburger {
  position: relative;
  width: 40px;
  height: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  display: none;
  margin-top: 33px;
  transition: 0.5s;
}
#hd #hamburger span {
  width: 100%;
  height: 3px;
  background-color: #ff744d;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  transition: 0.5s;
}
#hd #hamburger span:first-child {
  top: 0;
}
#hd #hamburger span:last-child {
  top: 100%;
}
#hd #hamburger.active span:first-child {
  top: 50%;
  transform: rotate(-45deg);
}
#hd #hamburger.active span:last-child {
  top: 50%;
  transform: rotate(45deg);
}
#hd #hamburger.active span:nth-child(2) {
  top: 50%;
  transform: translateX(-100%);
  opacity: 0;
}
#hd .m-menu {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}
#hd .m-menu .menu-wrap {
  padding-top: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
}

#hd .m-menu .menu-wrap li a {
  font-size: 40px;
  margin-bottom: 20px;
  color: #f6f6f6;
  font-weight: 500;
}
@media screen and (max-width: 1024px) {
  #hd .menu-wrapper {
    width: 90%;
  }
  #hd .menu-wrap {
    display: none;
  }
  #hd .m-menu.active {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #hd .logo {
    left: 50%;
    top: 21px;
    transform: translateX(-50%);
  }
  #hd .menu-wrap {
    flex-direction: column;
    align-items: center;
  }
  #hd #hamburger {
    display: flex;
  }
}
@media screen and (max-width: 980px) {
  #hd .m-menu .menu-wrap li a {
    font-size: 2rem;
    color: #f6f6f6;
    font-weight: 500;
  }
}
@media screen and (max-width: 500px) {
  #hd .menu-wrap li {
    margin-bottom: 10px;
  }

  #hd .logo-img {
    width: 82px;
  }
  #hd .logo-btm {
    width: 130px;
  }
  #hd .medal {
    width: 90px;
  }
  #hd .menu-wrap li{
    line-height: 60px;
  }
}

/* 팝업반응형 */
@media screen and (max-width: 620px) {
    #hd_pop #hd_pops_1{
        left: 90px !important;
    }
    #hd_pop #hd_pops_1 .hd_pops_con{
        width: 284px !important;
        height: 400px !important;
    }

    #hd_pop #hd_pops_2{
        left: 100px !important;
    }
    #hd_pop #hd_pops_2 .hd_pops_con{
        width: 370px !important;
        height: 185px !important;
    }

}
@media screen and (max-width: 425px) {
    #hd_pop #hd_pops_2{
        left: 10px !important;
    }
}
@media screen and (max-width: 375px) {
    #hd_pop #hd_pops_1{
        left: 10px !important;
    }
}