.top-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 0px 70px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}


.top-menu .logo a {
  font-size: 17px;
  color: #fff;
}


.top-menu .menu-items {
  display: flex;
  
}


.top-menu .menu-items > li {
  position: relative;
  margin-left: 20px;
  padding-bottom: 30px; /* ÇÏÀ§ ¸Þ´º¿ÍÀÇ °£°Ý Ãß°¡ */ 
  padding-top: 30px;
}


.top-menu .menu-items > li > a {
  color: #fff;
  padding: 10px;
  font-size: 18px;
  text-decoration: none;
  display: block;
}



/* ÇÏÀ§ ¸Þ´º */
.top-menu .menu-items > li > ul {
  position: absolute;
  top: 100%; /* »óÀ§ ¸Þ´º¿Í Á¤È®È÷ ¸ÂÃã */
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  min-width: 150px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* Ãʱ⿡´Â Ŭ¸¯ Â÷´Ü */
}


/* ÇÏÀ§ ¸Þ´º°¡ »ç¶óÁöÁö ¾Ê°í °è¼Ó À¯ÁöµÇµµ·Ï */
.top-menu .menu-items > li:hover > ul,
.top-menu .menu-items > li:focus-within > ul,
.top-menu .menu-items > li > ul:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* ¸¶¿ì½º ¿Ã¸®¸é È°¼ºÈ­ */
}




.top-menu .menu-items > li > ul > li a {
  padding: 10px;
  display: block;
  color: #fff;
  white-space: nowrap;
  font-size: 14px;
}


/* ¸ð¹ÙÀÏ Çܹö°Å ¸Þ´º */
.hamburger {
  display: none;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}


/* ¸ð¹ÙÀÏ »çÀÌµå ¸Þ´º */
.side-menu {
  position: fixed;
  top: 0;
  right: -250px;
  width: 250px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  transition: right 0.3s ease;
  z-index: 999;
  padding-top: 60px;
}


.side-menu ul li a {
  padding: 15px;
  border-bottom: 1px solid #444;
  display: block;
  color: #fff;
}


/* ¼­ºê ¸Þ´º(¸ð¹ÙÀÏ) */
.side-menu ul li ul {
  padding-left: 20px;
  display: none;
}


.side-menu ul li.open > ul {
  display: block;
}


.side-menu ul li ul li a {
  padding: 10px;
  border-bottom: none;
}


/* ¹ÝÀÀÇü: ¸ð¹ÙÀÏ (ÃÖ´ë 850px) */
@media (max-width: 850px) {
  .top-menu .menu-items {
    display: none;
  }
  
  .hamburger {
    display: block;
  }


  .top-menu {
    padding: 10px 20px;
  }
  
  .top-menu .logo a {
    font-size: 14px;
  }
}