/* KoPub 돋움(로컬 설치 폰트) 적용: navbar-styles.css 맨 위에 추가하세요 */
@font-face {
  font-family: 'KoPub돋움';
  src: local('KoPub돋움체_Pro Medium'); /* 로컬에 설치된 정확한 이름 사용 */
  font-weight: medium; /* Medium에 해당하는 가중치(필요시 600 또는 700으로 조정) */
  font-style: normal;
  font-display: swap;
}

/* (선택) 볼드 스타일이 별도 이름으로 설치되어 있다면 아래처럼 추가하면 좋습니다. */
@font-face {
  font-family: 'KoPub돋움';
  src: local('KoPub돋움체_Pro Bold'); 
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}


/* 전체 사이트 기본 폰트로 설정 */
body {
  margin: 0;
  padding: 0;
  font-family: 'KoPub돋움', /*'Noto Sans KR', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", */ sans-serif;
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
  min-height: 100vh;
}

/* 네비게이션 바 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;   /* 또는 100% */
  z-index: 9999;  /* 다른 요소보다 위에 오게 */
  height: 3.75rem; /* 60px -> 3.75rem */
  background: #f4f6fb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6.25rem; /* 0 100px -> 0 6.25rem */
  box-sizing: border-box;
}



.logo {
  font-weight: bold;
  color: #2339b4;
  font-size: 1.375rem; /* 22px -> 1.375rem */
}

.logo a {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  font-size: inherit;
  cursor: pointer;
}
.logo a:hover {
  color: inherit; 
  text-decoration: none;
}



.menu {
  list-style: none;
  display: flex;
  gap: 2rem; /* 32px -> 2rem */
  margin: 0;
  padding: 0;
}

.menu li {
  font-size: 1rem; /* 16px -> 1rem */
  color: #222;
  cursor: pointer;
  position: relative;
}

.menu a {
  color: inherit;         /* 부모의 글씨 색상 상속 */
  text-decoration: none;  /* 밑줄 제거 */
  font-weight: inherit;   /* (필요시) 굵기도 상속 */
}

/* 마우스를 올렸을 때 색상 변화 등 커스텀 */
.menu a:hover,
.menu a:focus {
  color: #38a1db;         /* 원하는 포커스/호버 색상 */
  text-decoration: underline; /* (원하면 호버시만 밑줄) */
}

/* 드롭다운 메뉴와 상위 메뉴 항목 사이의 간격을 채워 마우스 이동 시 메뉴가 닫히는 현상을 방지합니다. */
.menu li::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.25rem; /* 20px */
  height: 1.25rem;
}

/* 드롭다운 메뉴 기본적으로 숨기기 */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 2.25rem; /* 36px -> 2.25rem */
  left: 0;
  background: #fff;
  border-radius: 0.625rem; /* 10px -> 0.625rem */
  box-shadow: 0 0.125rem 0.625rem rgba(34,57,180,0.08); /* 0 2px 10px -> 0 0.125rem 0.625rem */
  min-width: 8.125rem; /* 130px -> 8.125rem */
  z-index: 10030;
  padding: 0.5rem 0; /* 8px 0 -> 0.5rem 0 */
  list-style: none;         /* ← 동그란 원 없앰 */
  margin: 0;                /* ← 여백 제거 */
}

.dropdown-menu li {
  color: #222;
  padding: 0.625rem 1.25rem; /* 10px 20px -> 0.625rem 1.25rem */
  white-space: nowrap;
    list-style: none;         /* ← 동그란 원 없앰 */
}

.dropdown-menu li:hover {
  background: #f0f4ff;
}

/* 마우스 올렸을 때만 드롭다운 보이기 */
.dropdown:hover .dropdown-menu {
  display: block;
}

@media (max-width: 720px) {
  /* 헤더 전체 스타일 */
  .navbar {
    height: 3.75rem;
    padding: 0 1rem; /* 좌우 모두 1rem으로 축소 */
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    min-width: 320px;
    max-width: 100%;
  }

  /* 햄버거 버튼 (또는 라벨) */
  .hamburger, 
  .menu-toggle {
    margin-right: 4rem;  /* 기존 1rem에서 2rem 으로 간격을 늘림 */
    /* 기존 스타일 유지 */
    display: block !important;
    cursor: pointer;
    position: relative;
    order: 0;
    margin-left: 0;
    padding-left: 0;
    left: 0;
    z-index: 11000;
    font-size: 2rem;
  }

  /* 체크박스 숨기기 */
  input.menu-toggle[type="checkbox"] {
    display: none !important;
  }

  /* 메뉴 스타일 */
  .menu {
    order: 2; /* 헤더 내 상위 순서 */
    display: none; /* 기본 안 보임 */
    flex-direction: column;
    position: absolute;
    top: 3.75rem; /* 헤더 높이 하단 위치 */
    left: 0;
    right: 0;
    background: #f4f6fb;
    padding: 1rem 0;
    z-index: 1000;
    gap: 2rem;
    font-size: 1rem;
    white-space: nowrap;
  }

  /* 체크박스가 체크되면 메뉴 보이기 */
  .menu-toggle:checked + .hamburger + .menu {
    display: flex;
  }

  /* 메뉴 아이템 */
  .menu li {
    padding: 0 0.7rem;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* 로고 스타일 */
  .logo {
    order: 1; /* 햄버거 다음 */
    flex-grow: 1;
    font-size: 1.2rem;
    height: 1.2rem;
    margin: 0 auto; /* 좌우 마진 auto로 중앙 배치 */
  }

  .logo img {
    height: 1.3rem;
    width: auto;
  }
}


@media (min-width: 721px) {

    .hamburger {
    display: none;
  }

  .menu-toggle {
    display: none !important;
  }
  .menu {
    display: flex !important;
    position: static;
    flex-direction: row;
    gap: 2rem;
  }
}













































/* 회사소개 페이지 */
.about-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 37.5rem; /* 600px -> 37.5rem */
  max-height: 62.5rem; /* 1000px -> 62.5rem */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
}

.about-hero-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: url('0.회사소개 - 복사본.png') no-repeat center center;
  background-size: cover;
  z-index: 1;
}
.about-hero-content {
  position: relative;
  z-index: 2;
  color: #eeeeee;
  padding: 0 0 18.75rem 5.625rem;   /* 기존 유지 */
  max-width: 47.5rem;               /* 기존 유지 */

  display: flex;
  flex-direction: column;   /* 세로 스택 */
  align-items: flex-end;    /* 오른쪽 정렬 유지 (텍스트가 오른쪽 끝으로 붙음) */
  justify-content: flex-end;/* 하단 기준 정렬 유지(원하면 제거 가능) */
  gap: 1.5rem;              /* <-- 제목과 설명 사이 간격: 1.5rem */
  box-sizing: border-box;
}

/* 제목과 설명의 기본 margin을 제거(중복 간격 방지) */
.about-hero-content h1 {
  font-size: 3rem;
  font-weight: bold;
  margin: 0;        /* gap으로 간격 제어 */
  line-height: 1.22;/* 행간은 내부용으로 적당히 유지 */
  text-align: right;
}

.about-hero-desc {
  font-size: 1.3rem;
  margin: 0;        /* gap으로 간격 제어 */
  font-weight: medium;
  line-height: 2rem;
  text-align: right;
  max-width: 40.625rem;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.9s cubic-bezier(.33, 1.25, .68, 1) forwards;
  animation-delay: 0.2s;
}







/*연혁*/
.history-section {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  padding-bottom: 1.75rem; /* 28px -> 1.75rem */
  padding: 5.625rem 0 6.25rem 0; /* 90px 0 100px 0 -> 5.625rem 0 6.25rem 0 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.history-title {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 3rem; /* 48px -> 3rem */
  letter-spacing: -0.0625rem; /* -1px -> -0.0625rem */
  color: #3d3d3d;

  
}

.history-item {
  width: 100%;
  display: flex;
  align-items: flex-start; /* 항상 박스 상단 기준으로 정렬 */
  margin-bottom: 2.25rem; /* 36px -> 2.25rem */
  position: relative;
  z-index: 1;
  min-height: 4.375rem; /* 70px -> 4.375rem */
}

/* 좌/우 지그재그 배치 유지 */
.history-item.left {
  justify-content: flex-start;
}
.history-item.right {
  justify-content: flex-end;
}

/* 년도(연도 박스)는 기존대로 유지 — 그대로 두어도 됨 */
.history-year {
  background: #dfe8fc;
  color: #000000;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.5rem 0.875rem; /* 8px 14px -> 0.5rem 0.875rem */
  border-radius: 0.5rem; /* 8px -> 0.5rem */
  margin: 0 0.75rem; /* 0 12px -> 0 0.75rem */
  min-width: 4rem; /* 64px -> 4rem */
  text-align: center;

  /* 부모 flex에서 늘어나지 않음 */
  flex: 0 0 auto;

  /* 시각 효과 */
  border: 0.125rem solid rgba(18, 40, 88, 0.623);/* 2px -> 0.125rem */
  z-index: 2;
}

/* === 변경된 .history-content: 내용길이에 따라 박스가 유동적으로 늘어나고,
      박스 안의 텍스트는 좌측 정렬이 되도록 조정 === */
.history-content {
  background: #ffffff;
  border-radius: 0.5625rem; /* 9px -> 0.5625rem */
  padding: 1.125rem 1.5rem; /* 16px 22px -> 1rem 1.375rem */
  font-size: 1.1rem;
  color: #3d3d3d;
  margin: 0 0.75rem; /* 0 12px -> 0 0.75rem */

  /* 핵심 변경:
     - flex: 0 1 auto : 내용에 따라 너비가 커지고 필요 시 줄어듦(유동적)
     - width: auto / max-width: none : 고정된 최대 너비 제거하여 내용 기반 크기 허용
     - display: block : 내부 컨텐츠 블록 형태로 취급 (text-align으로 정렬)
  */
  flex: 0 1 auto;
  width: auto;
  min-width: 18rem;   /* 너무 작아지지 않게 최소 한계, 원래 없었음 */
  max-width: 100%; /*none;*/
  display: block;

  /* 기존 보더 및 레이아웃 유지 */
  border: 0.125rem solid rgba(18, 40, 88, 0.623); /* 2px -> 0.125rem */
  z-index: 2;

  /* 텍스트 정렬 및 위치 안정화: 박스 내부 기준 왼쪽 정렬 */
  text-align: left;
  align-self: flex-start;
  word-break: break-word;
  box-sizing: border-box;
}

/* 내부 리스트(ul)은 박스 기준 왼쪽 정렬, 기본 들여쓰기 보정 */
.history-content ul {
  margin: 0;
  padding-left: 1.125rem; /* 18px-ish left padding for bullets */
  text-align: left;
  list-style-position: outside;
}

/* 특허 섹션 */
.patent-section {
  width: 100%;
  min-height: 42.5rem; /* 680px -> 42.5rem */
  padding: 5.625rem 0 6.25rem 0; /* 90px 0 100px 0 */
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.patent-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #3d3d3d;
  text-align: center;
  margin-bottom: 3.75rem; /* 60px -> 3.75rem */
}

.patent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem; /* 32px -> 2rem */
  justify-content: center;
  width: 100%;
  max-width: 90rem; /* 1440px -> 90rem */
}

.patent-item {
  background: none;
  border-radius: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  width: 13.75rem; /* 220px -> 13.75rem */
  min-height: 23.125rem; /* 370px -> 23.125rem */
}


.patent-img img {
  width: 12.5rem; /* 200px -> 12.5rem */
  height: 18.75rem; /* 300px -> 18.75rem */
  object-fit: contain;
  border-radius: 0.4375rem; /* 7px -> 0.4375rem */
  border: 0.09375rem solid #e8e8e8; /* 1.5px -> 0.09375rem */
  margin-bottom: 1.375rem; /* 22px -> 1.375rem */
  background: #f9fafb;
}

.patent-info {
  text-align: center;
}
.patent-name {
  font-weight: medium;
  font-size: 1rem;
  margin-bottom: 0.375rem; /* 6px -> 0.375rem */
  color: #262d39;
}
.patent-desc {
  font-size: 0.98rem;
  color: #6d7382;
  line-height: 1.4;
}




/* 문의하기 섹션 */
.contact-section {
  width: 100%;
  padding: 5.625rem 0 6.25rem 0; /* 90px 0 100px 0 -> 5.625rem 0 6.25rem 0 */
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-title {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  color: #3d3d3d;
  margin-bottom: 0.75rem; /* 12px -> 0.75rem */
}
.contact-subtitle {
  font-size: 1.1rem;
  color: #494949;
  text-align: center;
  margin-bottom: 3rem; /* 48px -> 3rem */
  line-height: 2rem;
}
.contact-content {
  width: 100%;
  max-width: 68.75rem; /* 1100px -> 68.75rem */
  display: flex;
  gap: 2rem; /* 36px -> 2.25rem */
  justify-content: center;
  align-items: flex-start;
}

/* 심플 연락처 리스트 */
.contact-info-list.simple {
  display: flex;
  flex-direction: column;
  gap: 1.125rem; /* 18px -> 1.125rem */
  min-width: 17.5rem; /* 280px -> 17.5rem */
  max-width: 23.125rem; /* 370px -> 23.125rem */
}
.contact-info-list.simple div {
  display: flex;
  flex-direction: row;
  gap: 1rem; /* 14px -> 0.875rem */
  font-size: 1.1rem;
  align-items: flex-start;
}
.contact-label {
  font-weight: bold;
  color: #3d3d3d;
  min-width: 5rem; /* 90px -> 5.625rem */
}
.contact-desc {
  color: #494949;
  font-weight: medium;
}

/* 지도 영역 */
.contact-map {
  position: relative !important;
  z-index: 100 !important;
  background: transparent !important;
  display: block !important;
  width: 500px;        /* 원하는 만큼 (예: 580~700px) */
  max-width: 100%;    /* 화면 넘어가면 자동 제한 */
}
.contact-map iframe {
  width: 100% !important;
  min-width: 320px !important;
  max-width: 100% !important;
  height: 320px !important;
  min-height: 240px !important;
  max-height: 500px !important;
  display: block !important;
  border-radius: 10px !important;
  background: #f8f8f8 !important;
  z-index: 101 !important;
  opacity: 1 !important;
  visibility: visible !important;
}




@media (max-width: 720px) {
  .about-hero {
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: 22rem;
    padding: 2rem 0.5rem 2rem 0.5rem;
  }
  .about-hero-content {
    align-items: center;
    padding: 0 0 2rem 0;
    max-width: 100%;
    text-align: center;
  }
  .about-hero-content h1 {
    font-size: 2.05rem;
    line-height: 1.23;
    margin-bottom: 0.6rem;
  }
  .about-hero-desc {
    font-size: 1.05rem;
    margin-bottom: 1.3rem;
    line-height: 1.5;
    text-align: center;
  }
  .history-section, .patent-section, .contact-section {
    padding: 1.5rem 0.5rem 2rem 0.5rem !important;
  }  
  .history-title, .patent-title, .contact-title {
    font-size: 1.4rem;
  }
  .history-timeline, .patent-list, .contact-content {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.8rem !important;
    max-width: 100% !important;
  }
  .history-item, .patent-item, .contact-map, .contact-info-list.simple {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
    .contact-map iframe {
    width: 100% !important;
    height: 250px !important;
  }
}



































































/* 푸터 (px -> rem 변환, 좌측 텍스트 기준으로 우측 연락처 크기 조정) */
.site-footer {
    background: #122858;
    color: #fff;
    width: 100%;
    padding: 3.375rem 0 2rem 0; /* 54px 0 32px 0 */
    font-size: 1rem; /* 기본 텍스트 크기 */
}

.footer-inner {
    max-width: 82.5rem; /* 1320px */
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2.5rem; /* 40px */
}

.footer-left {
    flex: 1 1 12rem;
}

/* 회사명: 좌측 기준 텍스트 */
.footer-company {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem; /* 8px */
}

.footer-desc {
    line-height: 1.7;
    margin-bottom: 1.125rem; /* 18px */
}

/* 저작권 영역: 링크와 텍스트를 모두 포함하며 한 줄로 표시 */
.footer-copyright {
    font-size: 1rem;
    opacity: 0.8;
    /* Flexbox를 사용하여 내부 요소들을 한 줄에 정렬 */
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    flex-wrap: wrap; /* 작은 화면에서 필요하면 줄 바꿈 허용 */
    gap: 0.5rem; /* 요소들 간의 간격 */
}

     .footer-right {
            flex: 0 0 auto; /* 성장하지 않고, 내용물의 너비만큼만 차지합니다. */
            min-width: 15rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 내부 항목(contact-phone, email)은 왼쪽 정렬 */
            gap: 0; 
            font-size: 1rem;
            color: #fff;
            text-align: left; /* 텍스트 정렬도 왼쪽으로 복구 */
        }

        /* 연락처 스타일 */
        .footer-contact .contact-phone,
        .footer-contact .contact-email {
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
            font-weight: medium;
            line-height: 1.3;
            color: #ffffff;
        }

        /* 정책 링크 스타일 */
        .policy-link {
            font-size: 1rem;
            color: #fff;
            text-decoration: none;
            opacity: 0.8;
            transition: opacity 0.3s;
        }

        .policy-link:hover {
            opacity: 1;
            text-decoration: underline;
        }

        /* 구분자 스타일 */
        .policy-separator {
            color: #fff;
            opacity: 0.5;
            font-size: 1rem;
        }

        /* --- 사용하지 않는 CSS 제거 --- */
        .policy-links-group {
            /* 이전에 사용된 블록 스타일을 제거하거나 덮어씁니다. */
            display: inline; /* 인라인으로 강제 변경 */
            margin: 0;
            padding: 0;
        }
        /* --- 사용하지 않는 CSS 제거 --- */


        /* 반응형 */
        @media (max-width: 720px) {
            .footer-inner {
                flex-direction: column;
                gap: 0.5rem !important; /* gap을 1rem 이하로 줄이면 두 영역이 더 가깝게 */
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }

            .footer-left {
    width: 100% !important;
    margin-bottom: 0.5rem !important; /* 각 칸 아래 여백 최소화 */
    padding: 0 !important;
            }
           .footer-right {
    width: 100% !important;
    margin-bottom: 0.5rem !important; /* 각 칸 아래 여백 최소화 */
    padding: 0 !important;
            }

            .site-footer {
                padding: 2rem 0 1.5rem 0;
            }
            
            /* 모바일에서 저작권 및 링크가 너무 길 경우 줄바꿈 허용 */
            .footer-copyright {
                display: block; /* 모바일에서 전체 블록으로 변경 */
            }
        }