/* 전체 메뉴 영역 */
hr {
  border: none;                  
  border-top: 2px solid #c6cbd0; 
  margin: 20px auto;             
}

.hr2 {
  border: none;                  
  border-top: 2px solid #c6cbd0; 
  width: 30%;                    
  margin: 20px auto;             
}

.hr3 {
  border: none;                  
  border-top: 2px solid #c6cbd0; 
  width: 60%;                    
  margin: 20px auto;             
}

.floating-widget {
  position: fixed;
  right: 20px;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 999;
}

.widget-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #1cddff85;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.widget-btn span {
  display: none;
  margin-left: 8px;
}

.widget-action-btn {   
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
  transition: all 0.3s ease;
}

.widget-action-btn:hover {
  width: 160px;
  border-radius: 9999px;
  justify-content: center; 
  padding-left: 15px;
}

.widget-action-btn:hover span {
  display: inline;
}

.expanded {
  display: none; 
  flex-direction: column;
  gap: 15px;
  align-items: flex-end; 
}

.expanded.hide {
  display: flex;
  animation: fadeOut 1s ease forwards;
  /*animation: flipDownOut 0.6s ease forwards;*/
  /*ransform-origin: top center; */  
}

.expanded.show {
  display: flex; 
  animation: fadeIn 1s ease; 
}

@keyframes flipDownOut {
  from {
    opacity: 1;
    transform: rotateX(0deg) translateY(0);
  }
  to {
    opacity: 0;
    transform: rotateX(-90deg) translateY(30px);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}


body {
  /*width: 90%;       /* 화면 너비의 90% */
  /*max-width: 1200px; /* 너무 넓어지지 않도록 최대값 제한 */
  margin: 0 auto;    /*가운데 정렬 */
  /*font-family: Tahoma, Verdana, Arial, sans-serif;*/
font-family: 'Nanum Myeongjo', sans-serif;
}

header {
  top: 0;
  left: 0;
  width: 100%;
  position: fixed; /*mene 고정 해제하려면 이부분 주석*/
  display: flex;              
  align-items: center;        
  justify-content: space-between; 
  gap: 30px;                  /* 로고와 메뉴 사이 간격 */
  padding: 0px 15px;
  background-color: #ffffff;     
  border-bottom: 2px solid #ab2626;
  z-index: 1900;
}

main {
  padding: 20px;
  margin-top: 100px;/*mene 고정 해제하려면 이부분 주석*/
}

header .logo img{
  flex: 0 0 auto;      
  height: 100px;              
}

header .menu {
  flex: 1;               /* 남은 공간을 모두 차지 */
  display: flex;
  justify-content: center; /* 남은 공간 안에서 메뉴를 가운데 정렬 */
  align-items: center;     /* 가로 중앙 */
}

header .hamburger {
  flex: 1;
  display: flex; /* 기본은 숨김 */
  justify-content: right;
  text-align: right;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  margin-right: 30px;
  color:#ab2626;
}

header .menu .main-menu ul {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  height: 80px;       /* 메뉴 항목의 높이를 고정 */
  line-height: 80px;   /* 텍스트를 세로 가운데 정렬 */
  gap: 40px; /*각 <li> 항목 사이에 20px 간격*/
  /*margin: 5px;*/
  margin-top: 15px;     /* 위쪽 여백 */
  margin-left: 0px;   /* 왼쪽 여백 */
  padding: 0;
}

@media (max-width: 750px) {
  header .menu {
    display: none;
  }
  header .hamburger {
    display: block; 
  }
}

@media (min-width: 751px) {
  header .menu {
    display: flex;   
  }
  header .hamburger {
    display: none;   
  }
}

header .slide-menu {
  display: block;
  position: fixed;
  top: 0;
  right: -100%;       /* 기본은 화면 밖 */
  width: 80%;         /* 화면의 80% 차지 */
  height: 100%;
  background: rgba(255, 255, 255, 0.8); /* 흰색 반투명 */
  box-shadow: -2px 0 5px rgba(0,0,0,0.3);
  transition: right 0.3s ease; /* 슬라이드 애니메이션 */
  z-index: 2000;
}

header .slide-menu.active {
  right: 0;           /* 화면 안으로 들어옴 */
}

header .slide-menu .closeBtn {
  font-size: 50px;       /* 글자 크기 크게 */
  color: #ab2626;            /* 붉은색 */
  position: absolute;    /* 위치 지정 */
  right: 40px;           
  top: 20px;             /* 위쪽 여백 */
  cursor: pointer;       /* 마우스 올리면 손 모양 */
  font-weight: bold;  
}

header .slide-menu .smenu {
  position: relative;   /* 위치 지정 가능하게 */
  display: flex;
  /*display: block;
  position: fixed;*/  
  /*flex-direction: column;*/
  align-items: center;   /* 가로 중앙 */
  justify-content: center;/*  세로 중앙 */
  height: 100%;          /* 전체 높이 차지 */
  width: 100%;
  top: 100px
}

header .slide-menu .smenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

header .smenu li {
  margin: 15px 0;
}

header .smenu a {
  font-size: 20px;
  color: #333;
  text-decoration: none;
}

header .menu .main-menu ul li a,
header .slide-menu .smenu ul li a {
  text-decoration: none;
  color: #333;
  font-weight: normal;
  font-size: 16px;
}

header .menu .main-menu ul li:not(.external) a:focus,
header .menu .main-menu ul li:not(.external) a:active,
header .menu .main-menu ul li a:hover,
header .slide-menu .smenu ul li:not(.external) a:focus,
header .slide-menu .smenu ul li:not(.external) a:active,
header .slide-menu .smenu ul li a:hover {
  background-color: transparent;
  outline: none;
  text-decoration: none;
  color: #ab2626;
  border-bottom: 3px solid #dca2a2;
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 5px; 
}

header .menu .main-menu ul li.active:not(.external) a,
header .slide-menu .smenu ul li.active:not(.external) a {
  color: #ab2626;
  border-bottom: 3px solid #dca2a2;
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 5px;
}

.main-menu a:focus-visible,
.smenu a:focus-visible {
  outline: none;
  background: none;
}

/*
섹션 클릭 처리
main section {
  display: none;  
}
main section.active {
  display: block;  
}
섹션 클릭 처리
*/

.page-1, .page-2, .page-3, .page-4, .page-5, .page-6 {
  /*font-family: 'Noto Sans KR', sans-serif; /* 원하는 한글 폰트 */
  /*font-family: 'Noto Sans KR';*/
  font-family: 'Nanum Myeongjo', serif;
  font-size: 18px;                         /* 본문 크기 */
  text-align: center;                      /* 가운데 정렬 */
  line-height: 1.8;                        /* 줄 간격 */
  margin: 40px 0;                          /* 위아래 여백 */
  color: #626364;
}

/*
.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;       
}

.slides {
  display: flex;
  width: 100%; 
  animation: slide 21s infinite; 
}

.slides img {
  width: 100%;
  height: auto;     
  object-fit: cover; 
}

@keyframes slide {
  0%   { transform: translateX(0%); }
  14%  { transform: translateX(0%); }
  28%  { transform: translateX(-100%); }
  42%  { transform: translateX(-200%); }
  56%  { transform: translateX(-300%); }
  70%  { transform: translateX(-400%); }
  84%  { transform: translateX(-500%); }
  100% { transform: translateX(-600%); }
}
*/
/*
.slider {
  width: 100%;
  height: 600px;
  overflow: hidden;
  position: relative;
  z-index: 1;    
}

.slides {
  position: relative; 
}

.slides img { 
  position:absolute; 
  top:0; 
  width: 100%;
  height: 100%;      
  object-fit: cover; 
  animation: fade 21s infinite; 
}

.slides img:nth-child(1) { animation-delay: 0s; }
.slides img:nth-child(2) { animation-delay: 3s; }
.slides img:nth-child(3) { animation-delay: 6s; }
.slides img:nth-child(4) { animation-delay: 9s; }
.slides img:nth-child(5) { animation-delay: 12s; }
.slides img:nth-child(6) { animation-delay: 15s; }
.slides img:nth-child(7) { animation-delay: 18s; }

@keyframes fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  20%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}
*/