/* 기본 스타일 */



  
   /*상단에 고정시******************************************/

   .navbar {
    position: fixed; /* 상단에 고정 */
    top: 0; /* 상단 여백 없이 고정 */
    left: 0; /* 왼쪽 여백 없이 고정 */
    width: 100%; /* 전체 화면 너비로 확장 */
    background-color: transparent;
    padding: 20px 0 20px 0; /* 위, 아래 여백 조정 */
    display: flex;
    justify-content: space-between; /* 좌우 정렬 */
    align-items: center; /* 수직 가운데 정렬 */
    z-index: 5000; /* 다른 요소 위에 위치 */
    background-color: rgba(0, 0, 0, 0.3); /* 반투명 흰색 배경 */
    backdrop-filter: blur(10px); /* 배경 블러 효과 */
}

   
  /*******************************************************
  .menu-icon {
    background: none;
    color: white;
    font-size: 30px;
    border: none;
    cursor: pointer;
  }
  ************************************/
  .menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 35px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    margin-right: 4vw;
}

.menu-icon span {
    display: block;
    width: 100%;
    height: 4px;
    background: white;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
}

.menu-icon.open span:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
}

.menu-icon.open span:nth-child(2) {
    opacity: 0;
}

.menu-icon.open span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
}

/* 마우스 hover 효과 */
.menu-icon:hover span {
    background: #ffd700; /* 노란색 */
}

  /************************************************************************/

  /* 좌측 로고 영역 */
  .navbar-left {    
  display: flex;
  margin-left: 4vw;
  align-items: center; /* 수직 가운데 정렬 */
  } 

   /* 로고 이미지 스타일 */
  .logo {
  width: 200px; /* 로고 너비 */
  height: auto; /* 비율 유지 */
  }

  @media screen and (max-width: 767px){
    .logo {
      width: 150px;
    }
  }
  
  .dropdown-menu {
    display: none; /* 기본적으로 메뉴 숨기기 */
    position: fixed;
    top: 0;
    right: 0;
    width: 350px; /* 메뉴 너비 */
    height: 100%; /* 화면의 세로 절반 차지 */
    background-color: #000000;
    border-left: 1px solid #787878;
    box-shadow: 4px 0 6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    padding-top: 60px; /* 아이콘이 있기 때문에 약간의 여백 */
   
    max-height: 1600px; /* 최대 높이 설정 */
    overflow-y: scroll; /* 세로 스크롤 활성화 */
    overflow-x: hidden; /* 가로 스크롤 비활성화 */
  }

  /* Webkit 기반 브라우저 (Chrome, Edge, Safari)에서 스크롤바 숨기기 */
.dropdown-menu::-webkit-scrollbar {
  display: none; /* 스크롤바 숨기기 */
}

/* Firefox에서 스크롤바 숨기기 */
.dropdown-menu {
  scrollbar-width: none; /* 스크롤바 숨기기 */
}
  
  .dropdown-menu ul {
    list-style: none;
    margin-left: 12px;
    padding: 0;
  }
  
  .dropdown-menu ul li {
    padding: 0.4rem;
    
  }
  
  .dropdown-menu ul li a {
    display: block;
    padding: 10px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    line-height: 0.8rem;
    position: relative;
    overflow: hidden; /* 자식 요소가 부모 영역을 벗어나지 않도록 설정 */
  }
  
  /* 마우스를 올렸을 때의 스타일 */
  .dropdown-menu ul li a:hover {
   color: black; /* 텍스트 색상 유지 */
   font-weight: 600;    
  }

  hr {
    border: none; /* 기본 테두리 제거 */
    height: 1px; /* 선 두께 */
    background-color: #5d5d5d; /* 회색 */
    margin: 10px 0; /* 위아래 여백 */
  }

  /* 서브 메뉴 숨기기 */
  .submenu {
  display: none;
  list-style: none;
  padding-left: 40px; /* 서브 메뉴 항목 들여쓰기 */
  
  }

  .submenu li {
    margin: 0; /* 리스트 항목의 상하 여백 제거 */
  }

  .submenu li a {
    display: block; /* 블록으로 만들어 클릭 영역 확장 */
    padding: 0.1rem 0.1rem; /* 좌우 및 상하 패딩 설정 */
    font-size: 0.85rem;
    font-weight: 200;
    line-height: 0.2rem; /* 줄 간격 조정 */
    text-decoration: none; /* 밑줄 제거 */
    color: #fff; /* 텍스트 색상 */
  }

  .submenu li a:hover {
    background-color:rgb(159, 159, 158); /* 주황색 */
    border-radius: 30px;
  }

  li a i {
    vertical-align: middle; /* 아이콘과 텍스트가 수평으로 잘 정렬되도록 */
    margin-right: 10px; /* 아이콘과 텍스트 사이의 간격 */
    font-size: 16px; /* 아이콘 크기 */
  }

  .drop-image {
    margin-top: 10px;
    display: block;
    margin: 40px auto;  /* 위아래 여백을 자동으로 설정하여 가운데 정렬 */
    width: 300px;  /* 원하는 너비 */
    height: 120px; /* 원하는 높이 */
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid #606060; /* 두께 2px, 실선, 색상 #929292 */
  }

  .drop-image2 {
    display: block;
    margin: 40px auto;  /* 위아래 여백을 자동으로 설정하여 가운데 정렬 */
    width: 300px;  /* 원하는 너비 */
    height: 120px; /* 원하는 높이 */
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid #606060; /* 두께 2px, 실선, 색상 #929292 */
  }

  .drop-image3 {
    margin-top: 10px;
    display: block;
    margin: 40px auto;  /* 위아래 여백을 자동으로 설정하여 가운데 정렬 */
    width: 300px;  /* 원하는 너비 */
    height: 200px; /* 원하는 높이 */
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid #606060; /* 두께 2px, 실선, 색상 #929292 */
  }

  .drop-image4 {
    display: block;
    margin: 40px auto;  /* 위아래 여백을 자동으로 설정하여 가운데 정렬 */
    width: 300px;  /* 원하는 너비 */
    height: 200px; /* 원하는 높이 */
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid #606060; /* 두께 2px, 실선, 색상 #929292 */
  }

  @media (max-width: 768px) {
    .drop-image2 {
      display: none;
    }
  }

  /*Tablet Devices*//*Laptop Devices*/
@media only screen and (min-width:768px) and (max-width:1439px){
  .drop-image, .drop-image2 {
    margin-top: 10px;
    display: block;
    margin: 40px auto;  /* 위아래 여백을 자동으로 설정하여 가운데 정렬 */
    width: 250px;  /* 원하는 너비 */
    height: 100px; /* 원하는 높이 */
    border-radius: 10px;
    cursor: pointer;
  }
  .drop-image3, .drop-image4 {
    margin-top: 10px;
    display: block;
    margin: 40px auto;  /* 위아래 여백을 자동으로 설정하여 가운데 정렬 */
    width: 250px;  /* 원하는 너비 */
    height: 166px; /* 원하는 높이 */
    border-radius: 10px;
    cursor: pointer;
  }

}


/********************************************************************************/
  /* li 요소의 기본 마진 제거 */
.dropdown-menu ul li {
  margin: 0; /* 기본 간격 제거 */
  padding: 5px 0; /* 원하는 간격 추가 */
}

/* 이미지에 특정 간격 적용 */
.drop-image,.drop-image2, .drop-image3,.drop-image4 {
  display: block;
  margin: 5px auto; /* 이미지 위아래 간격을 줄이고 가운데 정렬 */
  max-width: 100%; /* 필요 시 이미지 크기 제한 */
}
/*********************************************************************************/

  /* 팝업 오버레이 스타일 */
.popup7-overlay, .popup8-overlay, .popup9-overlay, .popup10-overlay {
  display: none; /* 기본적으로 숨김 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 반투명 검정 배경 */
  z-index: 9999; /* 팝업이 가장 위에 나오게 */
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media (max-width: 768px) {
  .popup8-overlay{
    display: none;
  }
}

/* iframe 크기 */
.popup7-content iframe, .popup8-content iframe, .popup9-content iframe, .popup10-content iframe  {
  width: 100%;
  height: 100%;
  border: none;
}

/* 팝업 내용 스타일 */
.popup7-content, .popup9-content, .popup10-content {
  position: relative;
  width: 90%; /* 팝업 가로 크기 확장 */
  height: 90%; /* 팝업 세로 크기 확장 */
  max-width: 1200px; /* 최대 가로 크기 설정 */
  max-height: 800px; /* 최대 세로 크기 설정 */
  margin: 0 auto;
  background: white; /* 팝업 배경 */
  border-radius: 20px 0 0 20px;
  overflow: hidden; /* 내용이 넘칠 때 처리 */
}

/* 팝업 내용 스타일 */
.popup8-content{
  position: relative;
  width: 90%; /* 팝업 가로 크기 확장 */
  height: 90%; /* 팝업 세로 크기 확장 */
  max-width: 1000px; /* 최대 가로 크기 설정 */
  max-height: 800px; /* 최대 세로 크기 설정 */
  margin: 0 auto;
  background: rgb(255, 255, 255); /* 팝업 배경 */
  border-radius: 20px 0 0 20px;
  overflow: hidden; /* 내용이 넘칠 때 처리 */
}
@media (max-width: 768px) {
  .popup8-content{
    display: none;
  }
}


/* 팝업 이미지 */
.popup7-img, .popup8-img, .popup9-img, .popup10-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .popup8-img{
    display: none;
  }
}


/* 팝업 닫기 버튼 */
.close-popup7, .close-popup8, .close-popup9,.close-popup10 {
  position: absolute;
  top: -50px; /* 음수 값을 사용해 위로 이동 */
  right: -50px; /* 음수 값을 사용해 오른쪽으로 이동 */  
  background: none;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
  z-index: 10000; /* 팝업 외부의 요소 위로 올리기 위한 z-index 설정 */
}




  /* 왼쪽에서 오른쪽으로 애니메이션되는 바탕색 */
  .dropdown-menu ul li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 165, 0); /* 주황색 */
  transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); /* 속도가 점점 느려지도록 설정 */
  z-index: -1; /* 텍스트보다 뒤에 보이도록 설정 */
  width: 0; /* 기본적으로 width 0으로 설정 */
  }

  /* hover 시 애니메이션 실행 */
  .dropdown-menu ul li a:hover::before {
  width: 100%; /* hover 시 width 100%로 확장 */
  animation: colorChange 0.5s forwards; /* 색상 변경 애니메이션 */
  }

  

/* 색상이 바뀌는 애니메이션 */
@keyframes colorChange {
  0% {
    background-color: rgb(255, 247, 0); /* 시작은 주황색 */
  }
  25% {
    background-color: rgb(255, 165, 0); /* 주황색 유지 */
  }
  50% {
    background-color: rgb(0, 255, 238); /* 주황색 유지 */
  }
  100% {
    background-color: rgb(0, 149, 255); /* 끝에는 파란색 */
  }
}

  
  
  .close-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 30px;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
  }
  
  /* 애니메이션을 주기 위한 클래스 */
  .show-menu {
    display: block; /* 메뉴 표시 */
  }
  
  /* 모바일/태블릿 화면에서 메뉴가 전체 화면에 표시되도록 */
  @media (max-width: 768px) {
    .dropdown-menu {
      width: 100%;
    }
  }