@font-face {
    font-family: 'Unageo';
    src: url('../font/Generica.woff') format('woff'); /* normal 두께 폰트 파일 경로 */
    font-weight: normal; /* normal 두께 지정 */
    font-style: normal;
}

* {
    scroll-behavior: smooth; 
    margin: 0;padding: 0; 
    box-sizing: border-box; /* 패딩과 보더가 너비/높이에 포함되도록 설정 */
}

::selection {
          background: #61B3E6;
          color: white;
        }

body {
    font-family: 'Pretendard', sans-serif;
    line-height: 1.6; /* 줄 간격 조절 */
    color: #333; /* 기본 텍스트 색상 */
    height: 100%;
    width: 100%;
    cursor: none;
}

#custom-cursor {
    position: fixed; /* 화면에 고정 */
    width: 60px; /* 커서 크기 */
    height: 60px; /* 커서 크기 */
    border: 2px solid #61B3E6; /* 원형 테두리 기본 색상 */
    border-radius: 50%; /* 원형 */
    pointer-events: none; /* 커서가 아래 요소 클릭을 방해하지 않도록 설정 */
    transform: translate(-50%, -50%); /* 커서 중앙을 마우스 포인터에 맞춤 */
    z-index: 99999; /* z-index를 최대로 높임 */
    /* 움직임과 색상 변화를 위한 transition 추가 */
    transition: transform 0.05s linear, border-color 0.1s ease, background-color 0.1s ease;
    /* 기본 배경색 설정 */
    background-color: #61b3e63b; 
}

a, button, .download-button, .slider-button, .close-btn, #back-to-top, .scroll-down-indicator {
    cursor: none !important; /* 이 요소들 위에서도 기본 커서 숨기기 */
}

a:hover #custom-cursor,
button:hover #custom-cursor,
.download-button:hover #custom-cursor,
.slider-button:hover #custom-cursor,
.close-btn:hover #custom-cursor,
#back-to-top:hover #custom-cursor,
.scroll-down-indicator:hover #custom-cursor {
    /* 커서 위에 포인터가 올라갔을 때 커서 모양을 변경하거나,
        원형 커서의 스타일을 바꿔서 클릭 가능함을 나타낼 수 있습니다. */
    /* 예시: 커서 크기를 키우거나 색상을 변경 */
    transform: translate(-50%, -50%) scale(1.4); /* 호버 시 커서 크기 확대 */
    background-color: rgba(97, 179, 230, 0.3); /* 반투명 채우기 */
}

h1, h2, h3, h4, h5, h6{
    font-weight: bold; /* bold 두께로 설정 */
    font-family: 'Unageo', 'Pretendard', sans-serif;
    letter-spacing: 1px; color: #222; 
}

.logo a{
    font-weight: bold; /* bold 두께로 설정 */
    font-family: 'Unageo', 'Pretendard', sans-serif;
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

li{
    font-size: 1.2rem;
}

a {
    text-decoration: none;
    letter-spacing: 1px;
    color: inherit; /* 부모 요소의 색상 상속 */
}

p {
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

#back-to-top {
    position: fixed; /* 화면에 고정 */
    right: 20px; /* 오른쪽에서 20px 떨어짐 */
    bottom: 20px; /* 아래쪽에서 20px 떨어짐 */
    display: none; /* 초기에는 버튼을 숨김 */
    width: 50px;
    height: 50px;
    background-color: #61B3E6; /* 배경색 */
    color: #fff; /* 화살표 색상 */
    font-size: 24px;
    text-align: center;
    line-height: 50px; /* 텍스트를 세로 중앙에 정렬 */
    border-radius: 50%; /* 원형 버튼 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    text-decoration: none;
    z-index: 1000; /* 다른 요소들 위에 표시되도록 z-index 설정 */
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
}

#back-to-top:hover {
    background-color: #55a3d9;
}

/* 스크롤바의 폭 너비 */
body::-webkit-scrollbar {
    width: 7px;  
}

body::-webkit-scrollbar-thumb {
    background: #61B3E6; /* 스크롤바 색상 */
    border-radius: 10px; /* 스크롤바 둥근 테두리 */
}

body::-webkit-scrollbar-track {
    background: #ddeffb;  /*스크롤바 뒷 배경 색상*/
}


.scrollbox{
    width: 100%; /* 화면 너비 100% */
    height: 100vh;
    overflow: auto; /* 화면 높이 100% (뷰포트 높이) */
}

.page-section-wrapper {
    max-width: 80%; 
    margin: 0 auto;
    padding-top:11%;
}

.pm-page2 .page-section-wrapper {
    padding-top:7.3%;
}

.pm-page4 .page-section-wrapper {
    padding-top:7.3%;
}

.section-title {
    margin-bottom: 4.5%;
}

.section-title h1 { /* 영어 제목 */
    color: #61B3E6;
    font-size: 1.5em;
    font-weight: 900;
    margin-bottom: 10px;
    position: relative;
}

.section-title h1::after{
    content: "┐";
    color: #61B3E6;
    position: absolute;
    top: -11px;
}

.section-title p { /* 한글 제목 */
    font-size: 2.2em;
    font-weight: 600;
    color: #222;
    margin: 0; 
}

.section-title p b{
    transition: color 0.3s ease;
    font-weight: 600;
}


    /* 주요 푸터 스타일 */
.main-footer {
    background-color: #000; /* 이미지에 따라 검은색 배경 */
    padding: 60px 0; /* 상단/하단 패딩 */
    width: 100%;
    /* 페이지가 전체 높이 섹션으로 구성된 경우, 위치 조정을 해야 할 수도 있습니다.
       예: sticky footer 사용, 또는 모든 전체 높이 div 뒤에 배치. */
}

.footer-content-wrapper {
    display: flex;
    justify-content: space-between; /* 왼쪽과 오른쪽 섹션을 양쪽 끝으로 배치 */
    align-items: flex-start; /* 콘텐츠를 상단에 정렬 */
    max-width: 80%; /* 푸터 내부 콘텐츠의 최대 너비 */
    margin: 0 auto; /* 콘텐츠 래퍼를 중앙에 배치 */
}

/* 푸터 왼쪽 섹션 */
.footer-left {
    display: flex;
    flex-direction: column;
    gap: 20px; /* 로고, 정보, 저작권 사이 간격 */
    max-width: 50%; /* 필요에 따라 조정 */
}

.footer-logo {
    font-size: 2.5em; /* "Balancelle"의 큰 글꼴 크기 */
    font-weight: 700;
    color: #fff; /* 흰색 */
    margin-bottom: 20px; /* 로고 아래 간격 */
    width: 48%;
}

.company-info p {
    font-size: 0.9em;
    color: #ccc; /* 회사 정보는 더 밝은 회색 */
    line-height: 1.6;
    margin: 0; /* 단락의 기본 마진 제거 */
}

.copyright {
    margin-top: 30px; /* 저작권 위 간격 */
}

.copyright p {
    font-size: 0.8em;
    color: #666; /* 저작권은 더 밝은 회색 */
    margin: 0;
}

/* 푸터 오른쪽 섹션 - 내비게이션 */
.footer-right {
    display: flex;
    flex-direction: column;
}

.footer-nav {
    list-style: none; /* 목록의 글머리 기호 제거 */
    padding: 0;
    margin: 0;
    text-align: right; /* 목록 항목을 오른쪽에 정렬 */
}

.footer-nav li {
    margin-bottom: 10px; /* 목록 항목 사이 간격 */
}

.footer-nav li:last-child {
    margin-bottom: 0; /* 마지막 항목은 마진 없음 */
}

.footer-nav a {
    text-decoration: none; /* 밑줄 제거 */
    color: #fff; /* 링크는 흰색 */
    font-size: 1em;
    font-weight: 400;
    transition: color 0.3s ease; /* 부드러운 호버 효과 */
}

.footer-nav a:hover {
    color: #61B3E6; /* 호버 시 강조 색상, 이미지의 파란색과 유사하게 */
}


/* -------------------- 메인 헤더 스타일 -------------------- */

.main-header {
    background-color: #222; 
    color: white;
    padding: 20px 0; 
    width: 100%;
    margin: 0 auto;
    position: fixed; top: 0; left: 0;
    transform: none;
    z-index: 999;
}

.mohead{
    width: auto;
    display: flex;
    align-items: center;
}

.header-container {
    width: 100%;
    margin: 0 auto; 
    padding: 0 10%;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

/* 부모 메뉴를 서브 메뉴의 위치 기준점으로 만듭니다. */
.main-nav .has-submenu {
  position: relative;
  
}

/* 서브 메뉴의 위치와 디자인을 고정합니다. */
.main-nav .dropdown-content {
  display: none; /* 평소에는 숨겨둡니다. */
  position: absolute; /* 기준점인 부모 메뉴에 따라 위치를 고정합니다. */
  left: 50%; /* 부모 메뉴의 가운데로 옮깁니다. */
  transform: translateX(-50%); /* 서브 메뉴 자체의 넓이를 고려해 완벽한 중앙에 놓습니다. */
  top: 60px; /* 부모 메뉴 바로 아래에 붙입니다. */
  background-color: #61B3E6; 
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 20px 0;
  z-index: 1000;
  text-align: center; /* 텍스트 중앙 정렬 추가 */
}

.main-nav .has-submenu::after {
  content: '';
  position: absolute;
  top: 100%; /* 부모 메뉴 바로 아래에서 시작 */
  left: 0;
  right: 0;
  height: 25px; /* 다리의 높이. 서브 메뉴와의 간격보다 커야 합니다. */
}

/* 부모 메뉴에 마우스를 올리면 서브 메뉴를 보여줍니다. */
.main-nav .has-submenu:hover > .dropdown-content {
  display: block;
}

/* 서브 메뉴 안의 링크 스타일 (선택 사항) */
.main-nav .dropdown-content a {
    color: #fff;
    padding: 15px 15px;
    display: block;
}

.main-nav .dropdown-content a:hover {
    color: #20618a;
}

/* --- 로고 스타일 --- */
.logo {
    font-size: 2em;
    font-weight: bold;
    letter-spacing: -1px;
}

.logo a {
    color: white; 
}

/* --- 내비게이션 메뉴 스타일 --- */


.main-nav .dropdown {
    font-family: 'Unageo', 'Pretendard', sans-serif;
    display: flex; 
    gap: 2.5rem; 
    position: fixed;
    z-index: 999;
    top: 20px; right: 10%;
}

/* 데스크톱 포트레이트(세로 모니터)에서 헤더 높이와 메뉴 위치 보정 */
@media (orientation: portrait) and (min-width: 768px) {
  .main-header {
    padding: 10px 0;
  }
  .logo img {
    height: 32px;
  }
  .main-nav .dropdown {
    top: 10px;
    right: 8%;
  }
}

/* ===== 데스크톱(가로폭 1025px 이상)에서 헤더/내비를 고정 높이로 정렬 ===== */
@media (min-width: 1025px) {
  :root { --header-h: 64px; }
  .main-header {
    height: var(--header-h);
    padding: 0;
    display: flex;
    align-items: center;
  }
  .header-container { height: 100%; }
  .logo img { height: 36px; }

  .main-nav {
    position: fixed;
    top: 0; right: 0;
    height: var(--header-h);
    display: flex;
    align-items: center;
    padding-right: 10%;
    z-index: 999;
  }
  .main-nav .dropdown {
    position: static; /* 헤더 높이 안에서 수직 가운데 정렬 */
    top: auto; right: auto;
    gap: 2.5rem;
  }
}

.main-nav .dropdown li{
    font-size: 1.1rem;
    position: relative;
}

.main-nav a {
    color: white;
    font-size: 1.15em;
    display: block; 
    transition: color 0.3s ease; 
    font-weight: bold;
}

.main-nav a:hover {
    color: #61B3E6;
}



.dropdown-content .dropdown-content-li {
    display: inline-block;
    padding: 0 5%;
    width: 32%;
}

.dropdown-content .dropdown-content-li ul{
    display: flex;
    flex-direction:column;
    align-items: center;
}

.dropdown-content .dropdown-content-li ul li{
    padding : 1% 0;
}



/* 햄버거 메뉴 아이콘 스타일 추가 */
.hamburger-menu {
    display: none; /* 기본적으로 숨김 (데스크톱에서는 보이지 않음) */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 999900; /* 메뉴 위에 표시되도록 */
}

.hamburger-menu .bar {
    display: block;
    width: 30px;
    height: 3px;
    background-color: white;
    margin: 6px 0;
    transition: all 0.3s ease;
}

/* 햄버거 메뉴 활성화 시 (X 모양으로 변환) */
.hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}


.mobr{
    display: none;
}






























@media screen and (min-width: 120px) and (max-width: 720px) {

.footer-right{
    display: none;
}

#custom-cursor {
        display: none !important;
    }
    body {
        cursor: auto;
    }


}

                     









































/* -------------------- 태블릿 반응형 (max-width: 1024px) -------------------- */
@media screen and (max-width: 1024px) {


    #custom-cursor {
        display: none !important;
    }
    body {
        cursor: auto;
    }

    li {
        font-size: 1rem;
    }

    p {
        font-size: 1rem;
    }

    .page-section-wrapper {
        padding-top: 10%; /* 태블릿에서 상단 패딩 조정 */
    }

    .section-title {
        margin-bottom: 6%; /* 태블릿에서 제목 하단 마진 조정 */
    }

    .section-title h1 {
        font-size: 1em;
        margin-bottom: 4px;
    }

    .section-title p {
        font-size: 1.5em;
    }

    .heightauto{
        height: auto;
        padding-bottom: 24%;
    }


    /* 헤더 스타일 조정 */

    
    .main-header {
        width: 100%;
        padding: 0px 0;
        background: none;
        height: 7%;
        border-radius: 0px;
        top:0;
        background-color: transparent; 
    }

    .header-container {
        flex-direction: row; /* 로고와 햄버거 메뉴 가로 정렬 */
        justify-content: space-between; /* 양 끝 정렬 */
        align-items: center;
        padding: 0;
        max-width: 100%;
        background-color: #222;
        min-height: 100%;

    }

    .header-container .mohead{
        width: 82%;
        margin: 0 auto;
        position: relative;
    }

    /* 햄버거 메뉴 보이기 */
    .hamburger-menu {
        display: block;
        position: absolute;
        top:0%; padding: 0px 0 0;
        right: 0%;
        
    }

    /* 데스크톱 내비게이션 숨기기 및 모바일 메뉴로 변환 */
    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9); /* 어두운 오버레이 배경 */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: translateX(100%); /* 초기에는 화면 밖으로 숨김 */
        transition: transform 0.3s ease-in-out;
        z-index: 998; /* 햄버거 아이콘 아래에 */
        overflow-y: auto; /* 내용이 길어지면 스크롤 가능 */
    }

    .main-nav .dropdown > li.has-submenu:hover .dropdown-content{
        transform: translateX(0);
    }

    /* 모바일 내비게이션 활성화 시 */
    .main-nav.active {
        transform: translateX(0); /* 화면 안으로 이동 */
    }
    .main-nav .dropdown {
        flex-direction: column; /* 메뉴 세로로 쌓기 */
        width: 100%; /* 메뉴 너비 조정 */
        gap: 0; right: 0;
        height: 97%;
        justify-content: center;
        text-align: center; /* 텍스트 가운데 정렬 */
    }

    .main-nav .dropdown li {
        width: 100%;
    }

    .main-nav .dropdown li:last-child {
        border-bottom: none;
    }

    .main-nav a {
        padding: 15px 0; /* 메뉴 항목 패딩 조정 */
        font-size: 1.5em; /* 메뉴 텍스트 크기 키우기 */
    }

    .dropdown-content {
        display: none; /* JS로 slideDown/slideUp 제어 */
        position: static; /* 절대 위치 해제 */
        transform: none; /* 트랜d스폼 해제 */
        opacity: 1; /* 불투명하게 */
        visibility: visible; /* 보이도록 */
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .dropdown-content .dropdown-content-li {
        display: block; /* 드롭다운 항목 세로로 쌓기 */
        width: 100%;
        padding: 0;
    }

    .dropdown-content .dropdown-content-li ul {
        align-items: center; /* 서브 메뉴 가운데 정렬 */
    }

    .dropdown-content .dropdown-content-li ul li {
        padding: 0;
        width: 100%;
    }

    /* 모바일에서 중첩된 드롭다운 메뉴 스타일 */
  .main-nav .dropdown .has-submenu .dropdown-content {
       position: static; /* 절대 위치 해제 */
       background-color: rgba(0, 0, 0, 0.5); /* 서브 메뉴 배경색 */
       width: 100%; /* 너비 100% */
       text-align: center;
        padding: 10px 0;
       border-radius: 0;
       box-shadow: none;
       display: none; /* 기본적으로 숨김 (JS로 토글) */
    }

   .main-nav .dropdown .has-submenu .dropdown-content li {
        border-bottom: none; /* 서브 메뉴 항목 하단 선 제거 */    }

   .main-nav .dropdown .has-submenu .dropdown-content a {
        font-size: 1.1em; /* 서브 메뉴 폰트 크기 */
       padding: 8px 0;   }


    .dropdown-content a {
        padding: 10px 0; /* 서브 메뉴 패딩 조정 */
        font-size: 1.2em; /* 서브 메뉴 텍스트 크기 조정 */
    }

    /* 모바일 메뉴가 활성화되었을 때 서브 메뉴도 보이도록 */
    .main-nav.active .has-submenu .dropdown-content {
        display: block; /* 햄버거 메뉴 열리면 서브 메뉴도 보이도록 */
     }

    .logo {
        width: 20%;
    }

    .main-nav .dropdown li {
        font-size: 1em;
    }


    .dropdown-content {
        top: 150%; /* 태블릿에서 드롭다운 위치 조정 */
        width: 90%; /* 태블릿에서 드롭다운 너비 조정 */
        padding: 2% 0;
    }

    .dropdown-content .dropdown-content-li {
        padding: 0 3%;
    }

    .footer-content-wrapper {
        align-items: center;
    }

    .footer-left {
        max-width: 100%;
        margin-bottom: 30px;
    }

    .footer-logo {
        font-size: 2em;
        margin-bottom: 15px;
        width: 80%;
    }

    .company-info p {
        font-size: 0.8em;
    }

    .copyright {
        margin-top: 20px;
    }

    .footer-nav {
        text-align: center; /* 태블릿에서 푸터 네비게이션 정렬 */
    }
}



































/* -------------------- 대형 모니터 반응형 -------------------- */
@media screen and (min-width: 1921px) {


p {
    font-size: 1.45rem;
}

li{
    font-size: 1.45rem;
}

}






















/* -------------------- 모바일 반응형 -------------------- */
@media screen and (max-width: 768px) {

#custom-cursor {
        display: none !important;
    }
    body {
        cursor: auto;
    }
        

    .page-section-wrapper{
        max-width: 82%;
    }

    p{
        line-height: 1.4;
    }

    .section-title {
        margin-bottom: 12%;
        line-height : 1.8em; /* 태블릿에서 제목 하단 마진 조정 */
    }

    .mobr{
        display: inline;
    }

    .pcbr{
        display: none;
    }

    .main-nav ul {
        flex-direction: column; 
        width: 100%; 
        gap: 0; 
        text-align: left; 
    }

    .main-nav li {
        width: 100%; 
    }

    .main-nav li:last-child {
        border-bottom: none;
    }

    .main-nav a {
        padding: 12px 20px; 
    }

    .dropdown-content {
        position: static; 
        transform: none; 
        min-width: auto;
        box-shadow: none;
        background-color: #333; 
        border-radius: 0;
        padding: 0;
    }

    .dropdown-content a {
        padding-left: 40px;
    }
}