.elementor-22 .elementor-element.elementor-element-d82fb08{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-333dbe8 *//* ==============================================
 * 1. 헤더 기본 및 이너 레이아웃
 * ==============================================
 */
 #custom-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 30px;
    transition: all 0.3s ease;
    background-color: transparent !important;
    border-bottom: 1px solid #c8c8c8;
    overflow: visible !important;
}

.header-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0 70px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: visible !important; /* 서브메뉴가 아래로 나올 수 있게 */
}

/* GNB 호버 시 헤더 하단 라운드 제거 */
#custom-header.is-gnb-hover .header-inner,
.main-menu-area.is-active ~ .header-inner { 
    border-radius: 20px 20px 0 0;
}

/* ==============================================
 * 2. PC 메인 메뉴 (GNB) 
 * ==============================================
 */
.main-menu-area {
    position: relative; /* 배경의 기준점 */
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.main-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    transition: color 0.3s;
}

.main-nav > li {
    position: relative; /* 서브메뉴 글자가 이 li를 기준으로 위치함 */
    flex: 1;
    text-align: center;
    transition: color 0.3s;
}

.main-nav > li > a {
    display: block;
    line-height: 80px; /* 헤더 높이 */
    font-size: 19px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
    font-family:"Inter Tight";
}

/* 메뉴 호버 시 텍스트 색상 (이미지 느낌) */
.main-nav > li:hover > a {
    color: #1d4d9e; 
}


/* ==============================================
 * 3. PC 서브메뉴 (배경 전체 & 글자 세로 정렬)
 * ==============================================
 */

/* [PC 서브메뉴 전체 배경 고정] */
.submenu-bg {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff !important;
    border-top: 1px solid #eee;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    z-index: 90;
    
    /* 애니메이션 속도를 글자와 통일 (0.2s) */
    height: 0;
    visibility: hidden;
    opacity: 0;
    /* 가속도 함수를 linear나 ease-out으로 변경하여 초기 반응 속도 개선 */
    transition: all 0.2s ease-out; 
    pointer-events: none;
}

/* [수정] 각 서브메뉴 글자 컨테이너 */
.submenu-content {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    /* 배경과 동일한 시간과 가속도 부여 */
    transition: all 0.2s ease-out; 
}

/* 활성화 시 (동시에 나타나도록 설정) */
.main-menu-area.is-active .submenu-bg,
.main-menu-area.is-active .submenu-content {
    height: 300px !important; /* 글자 영역도 높이를 맞춰서 함께 흐르게 함 */
    visibility: visible !important;
    opacity: 1 !important;
}

/* 내부 리스트 스타일 (세로 나열) */
.submenu-content ul {
    list-style: none;
    margin: 0;
    padding: 20px 0;
    display: block !important; /* 세로 정렬 강제 */
}

.submenu-content li {
    width: 100%;
    margin-bottom: 8px;
}

.submenu-content li a {
    display: block;
    padding: 8px 0 !important;
    font-size: 15px !important;
    color: #666 !important;
    line-height: 1.4 !important; /* 메뉴 높이 상속 차단 */
    font-weight: 400 !important;
    text-decoration: none;
    transition: all 0.2s;
}

/* 서브메뉴 호버 시 디자인 (이미지 컬러 반영) */
.submenu-content li a:hover {
    color: #1d4d9e !important;
    font-weight: 400 !important;
    transform: none !important;
}

/* [수정] 메인 메뉴 아이템에 호버했을 때, 해당 서브메뉴 박스의 배경색 변경 */
.main-nav > li:hover .submenu-content {
    visibility: visible;
    border-top:1px solid #1d4d9e;
    background-color: #f4f7fb; /* ← 왼쪽 이미지와 유사한 연한 블루/그레이 톤 (원하는 색상으로 변경 가능) */
    visibility: visible;
    opacity: 1;
}

/* 추가로, 서브메뉴 내부의 간격을 맞추기 위해 padding을 조정할 수 있습니다 */
.submenu-content {
    /* 기존 속성 유지 */
    box-sizing: border-box; 
}
/* ==============================================
* 5. 헤더 버튼 영역 (Contact, Lang, Ham)
* ==============================================
*/
.button-area {
display: flex;
align-items: center;
gap: 10px;
}

.contact-btn.contact-icon-btn {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
padding: 0;
color: inherit;
text-decoration: none;
transition: background-color 0.3s;
}

.contact-btn.contact-icon-btn svg {
width: 22px;
height: 22px;
}

.header-transparent .contact-icon-btn:hover {
background-color: rgba(0, 0, 0, 0.05);
}

.header-white .contact-icon-btn:hover {
background-color: rgba(255, 255, 255, 0.15);
}

/* ==============================================
* 6. 다국어 선택기 (Language Selector)
* ==============================================
*/

.lang-menu {
position: relative;
}

.lang-toggle {
display: flex;
align-items: center;
gap: 8px;
background: none;
border: none;
cursor: pointer;
color: inherit;
font-size: 15px;
font-weight: 500;
padding: 8px;
border-radius: 5px;
transition: background-color 0.3s;
}

.lang-toggle .icon-globe {
width: 30px;
height: 30px;
stroke-width: 1.5;
}

.header-transparent .lang-toggle:hover {
background-color: rgba(0, 0, 0, 0.05);
}

.header-white .lang-toggle:hover {
background-color: rgba(255, 255, 255, 0.15);
}

#custom-header.header-white:hover .lang-toggle:hover {
background-color: rgba(0, 0, 0, 0.05);
}

.lang-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
list-style: none;
margin: 0;
padding: 5px;
min-width: 80px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all .3s ease;
}

.lang-menu.is-active .lang-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.lang-dropdown a {
color: #333;
text-decoration: none;
display: block;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
}

.lang-dropdown a:hover {
background-color: #f5f5f5;
color: #e50012;
}

.lang-dropdown a img {
margin-right: 5px;
}

/* ==============================================
* 7. 오프캔버스 메뉴 (모바일/태블릿)
* ==============================================
*/
.offcanvas-menu {
position: fixed;
top: 0;
right: -320px;
width: 320px;
height: 100%;
background-color: #fff;
z-index: 1001;
transition: right .4s ease;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
border-left: 1px solid #eee;
}

.offcanvas-menu.is-open {
right: 0;
}

.close-btn {
position: absolute;
top: 15px;
right: 20px;
background: none;
border: none;
color: #333;
font-size: 30px;
cursor: pointer;
line-height: 1;
}

.offcanvas-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity .4s, visibility .4s;
}

.offcanvas-overlay.is-open {
opacity: 1;
visibility: visible;
}



/* ----- 오프캔버스 GNB ----- */
.offcanvas-menu .offcanvas-nav {
list-style: none;
padding: 0;
margin-top: 60px;
}

.offcanvas-menu .offcanvas-nav li {
border-bottom: 1px solid #f0f0f0;
text-align: left;
}

.offcanvas-menu .offcanvas-nav a {
text-decoration: none;
color: #333;
font-size: 16px;
display: block;
padding: 15px 10px;
font-weight: 500;
}

.offcanvas-menu .offcanvas-nav a:hover {
color: #1d4d9e;
}

.offcanvas-menu .offcanvas-nav li.has-submenu > a {
position: relative;
}

.offcanvas-menu .offcanvas-nav li.has-submenu > a::after {
content: '+';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
font-weight: 300;
color: #999;
transition: transform 0.3s;
}

.offcanvas-menu .offcanvas-nav li.has-submenu.is-open > a::after {
content: '-';
}


/* ----- 오프캔버스 서브메뉴 스타일 수정 ----- */

/* 1. PC에서 설정한 절대 위치 및 크기 초기화 */
.offcanvas-menu .submenu-content {
    display: none;             /* 기본적으로 닫힘 */
    position: static !important; /* absolute 해제 */
    transform: none !important;  /* 중앙 정렬 해제 */
    width: 100% !important;      /* 너비 전체 사용 */
    height: auto !important;     /* 높이 제한 해제 */
    opacity: 1 !important;       /* 투명도 고정 */
    visibility: visible !important; /* 가시성 고정 */
    background-color: #f9f9f9 !important; /* 배경색 (이미지처럼 연회색) */
    border-top: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 2. 서브메뉴가 열렸을 때 (JS로 .is-open 제어 시) */
.offcanvas-menu .offcanvas-nav li.is-open > .submenu-content {
    display: block;
}

/* 3. 내부 리스트 스타일 조정 */
.offcanvas-menu .submenu-content ul {
    padding: 10px 0 !important;
    margin: 0 !important;
    display: block !important;
}

.offcanvas-menu .submenu-content li {
    border-bottom: none !important; /* 내부 구분선 제거 */
    margin-bottom: 0 !important;
}

.offcanvas-menu .submenu-content li a {
    padding: 12px 20px 12px 30px !important; /* 왼쪽 여백을 주어 계층 구조 표현 */
    font-size: 15px !important;
    color: #555 !important;
    background: transparent !important;
    transform: none !important; /* 호버 애니메이션 제거 */
    display: block;
}

/* 4. 오프캔버스 서브메뉴 호버 시 */
.offcanvas-menu .submenu-content li a:hover {
    color: #1d4d9e !important;
    background-color: #f0f0f0 !important;
}


/* [추가] 오프캔버스 언어 메뉴 스타일 */
.offcanvas-menu .lang-menu.offcanvas-lang {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
display: none !important;
}

.offcanvas-menu .lang-menu.offcanvas-lang .lang-toggle {
display: none;
}

.offcanvas-menu .lang-menu.offcanvas-lang .lang-dropdown {
position: static;        
display: flex;        
gap: 10px;              
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
background-color: transparent;
width: 100%;
margin: 0;
padding: 0;
}

.offcanvas-menu .lang-menu.offcanvas-lang .lang-dropdown li {
flex: 1;
}

.offcanvas-menu .lang-menu.offcanvas-lang .lang-dropdown a {
display: flex;
justify-content: center;
align-items: center;
height: 40px;            
border: 1px solid #e1e1e1;
border-radius: 5px;        
background: #fff;
color: #555;
font-size: 14px;
font-weight: 500;
padding: 0;              
}

/* 현재 선택된 언어(KR) 스타일 강조 */
.offcanvas-menu .lang-menu.offcanvas-lang .lang-dropdown a.current-lang {
background: #333;
color: #fff;
border-color: #333;
}

/* 호버 효과 */
.offcanvas-menu .lang-menu.offcanvas-lang .lang-dropdown a:hover {
border-color: #0090b3;
color: #0090b3;
background: #fff;
}

.offcanvas-menu .lang-menu.offcanvas-lang .lang-dropdown a img {
margin-right: 6px;
vertical-align: middle;
width: 20px;        
}

/* ==============================================
* 8. 기타 (Top 버튼, Fullpage)
* ==============================================
*/

#scroll-to-top-btn {
position: fixed;
bottom: 40px;
right: 40px;
z-index: 99;
width: 110px;
height: 110px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.4s ease;
}

#scroll-to-top-btn.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

#scroll-to-top-btn svg {
width: 100%;
height: 100%;
}

#scroll-to-top-btn text {
font-size: 28px;
font-family: "Exo 2", serif;
fill: #dddddd;
}

/* 텍스트만 회전하는 애니메이션 */
.rotating-text {
animation: rotateText 30s linear infinite;
transform-origin: center;
display: block;
}

@keyframes rotateText {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* 화살표 스타일 (고정) */
.fixed-arrow {
stroke: #ddd;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}

.fp-watermark {
display: none !important;
}

#fullpage-container .fp-table {
justify-content: flex-start;
}

#fullpage-container .fp-center {
justify-content: center;
}

#fp-nav.white-nav ul li a span {
background: #fff;
}

#fp-nav.white-nav ul li a.active span,
#fp-nav.white-nav ul li:hover a.active span {
background: #fff;
}

/* ==============================================
* 9. 반응형
* ==============================================
*/

@media(max-width: 1600px) {
.header-inner {
    padding: 0 50px !important;
}
}
/* [1] 1400px 이하: 메뉴가 사라지지 않고 간격을 좁혀서 유지함 */
@media(max-width: 1400px) {
    .header-inner {
        padding: 0 40px !important; /* 양 끝 여백 축소 */
    }
    .main-menu-area {
        max-width: 850px; /* 메뉴 영역 전체 폭 축소 */
    }
    .main-nav > li > a {
        font-size: 17px; /* 폰트 크기 살짝 축소 */
        padding: 0 10px; /* 메뉴 항목 간 간격 조절 */
    }
}
@media(max-width: 1300px) {
.header-inner {
    height: 70px !important;
    padding: 0 20px !important;
}

.logo-area img, .hamburger-menu img {
    height: 28px !important;
}
}

/* [2] 1200px 이하: 여기서부터 메인 메뉴를 숨기고 햄버거 버튼(모바일 체제)으로 전환 */
@media(max-width: 1200px) {
    .main-menu-area {
        display: none !important; /* 드디어 메뉴가 사라지는 시점 */
    }
    .header-inner {
        height: 70px !important; /* 헤더 높이 축소 */
        padding: 0 20px !important;
        border-radius: 15px; /* 작은 화면에 맞게 라운드 조절 */
    }
    .logo-area img {
        height: 30px !important; /* 로고 크기 조절 */
    }
    /* 햄버거 메뉴 아이콘 등이 있다면 여기서 보이게 처리 (기존 구조 유지) */
}

/* [3] 776px 이하: 모바일 최적화 */
@media(max-width: 776px) {
    #custom-header {
        padding: 5px 15px; /* 외부 여백 축소 */
    }
    #custom-header,
    #custom-header.header-transparent,
    #custom-header.header-white {
        background-color: #fff !important;
        color: #111 !important;
        border-bottom: 1px solid #eee !important;
    }
    /* 스크롤 탑 버튼 및 풀페이지 내비 숨김 */
    #scroll-to-top-btn, #fp-nav {
        display: none !important;
    }
}

/* [4] 500px 이하: 아주 작은 모바일 */
@media(max-width: 500px) {
    .button-area .contact-btn,
    #custom-header .lang-menu {
        display: none !important; /* 공간 확보를 위해 컨택/언어 버튼 숨김 */
    }
}

@media(min-width: 776px){
.jupiterx-scroll-top{
    display: none !important;
}
}/* End custom CSS */