.elementor-12 .elementor-element.elementor-element-49faecc6{--display:flex;--min-height:88px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#E8E8E8;--border-color:#E8E8E8;box-shadow:0px 2px 6px 0px rgba(0,0,0,0.5);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:24px;--padding-right:24px;--z-index:999;}.elementor-12 .elementor-element.elementor-element-49faecc6:not(.elementor-motion-effects-element-type-background), .elementor-12 .elementor-element.elementor-element-49faecc6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-12 .elementor-element.elementor-element-7e54b375{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-1fc624cc{--display:flex;--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-12 .elementor-element.elementor-element-104667d1{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:start;}.elementor-12 .elementor-element.elementor-element-104667d1 img{width:99%;}.elementor-12 .elementor-element.elementor-element-3b4cdaba{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:44px 44px;--row-gap:44px;--column-gap:44px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-12 .elementor-element.elementor-element-3f42245 .elementor-menu-toggle{margin:0 auto;}.elementor-12 .elementor-element.elementor-element-3f42245 .elementor-nav-menu .elementor-item{font-family:"Roboto", Sans-serif;font-size:17px;font-weight:600;}.elementor-12 .elementor-element.elementor-element-3f42245 .elementor-nav-menu--main .elementor-item{color:#222222;fill:#222222;}.elementor-12 .elementor-element.elementor-element-3f42245 .elementor-nav-menu--main .elementor-item:hover, .elementor-12 .elementor-element.elementor-element-3f42245 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-12 .elementor-element.elementor-element-3f42245 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-12 .elementor-element.elementor-element-3f42245 .elementor-nav-menu--main .elementor-item:focus{color:#007BD3;fill:#007BD3;}.elementor-12 .elementor-element.elementor-element-3f42245 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-12 .elementor-element.elementor-element-3f42245 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#F6101B;}.elementor-12 .elementor-element.elementor-element-3f42245 .e--pointer-framed .elementor-item:before, .elementor-12 .elementor-element.elementor-element-3f42245 .e--pointer-framed .elementor-item:after{border-color:#F6101B;}.elementor-12 .elementor-element.elementor-element-3f42245 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#E84B25;}.elementor-12 .elementor-element.elementor-element-2f69bb76{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;--z-index:100;}.elementor-12 .elementor-element.elementor-element-5c2eee34{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-12b4c75{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-12 .elementor-element.elementor-element-12b4c75 img{width:80%;}.elementor-12 .elementor-element.elementor-element-1b0603a1{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-19b90098{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 100px;}.elementor-12 .elementor-element.elementor-element-19b90098.elementor-element{--align-self:flex-end;}.elementor-12 .elementor-element.elementor-element-19b90098 .elementor-menu-toggle{margin-left:auto;}.elementor-12 .elementor-element.elementor-element-19b90098 .elementor-nav-menu .elementor-item{font-family:"Roboto", Sans-serif;font-size:18px;font-weight:600;line-height:1.2em;letter-spacing:-0.3px;}.elementor-12 .elementor-element.elementor-element-19b90098 .elementor-nav-menu--main .elementor-item{color:#FFFFFF;fill:#FFFFFF;}.elementor-12 .elementor-element.elementor-element-19b90098 .elementor-nav-menu--main .elementor-item:hover, .elementor-12 .elementor-element.elementor-element-19b90098 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-12 .elementor-element.elementor-element-19b90098 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-12 .elementor-element.elementor-element-19b90098 .elementor-nav-menu--main .elementor-item:focus{color:#C9A86A;fill:#C9A86A;}.elementor-12 .elementor-element.elementor-element-19b90098 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#C9A86A;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-12 .elementor-element.elementor-element-2f69bb76{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:15px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-5c2eee34{--width:70%;--margin-top:-20px;--margin-bottom:0px;--margin-left:-60px;--margin-right:0px;}.elementor-12 .elementor-element.elementor-element-12b4c75 img{width:150px;}.elementor-12 .elementor-element.elementor-element-1b0603a1{--width:20%;--margin-top:0px;--margin-bottom:0px;--margin-left:90px;--margin-right:0px;}.elementor-12 .elementor-element.elementor-element-19b90098{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}@media(min-width:768px){.elementor-12 .elementor-element.elementor-element-7e54b375{--content-width:1280px;}.elementor-12 .elementor-element.elementor-element-2f69bb76{--content-width:1250px;}.elementor-12 .elementor-element.elementor-element-5c2eee34{--width:30%;}.elementor-12 .elementor-element.elementor-element-1b0603a1{--width:70%;}}/* Start custom CSS for image, class: .elementor-element-104667d1 */.elementor-12 .elementor-element.elementor-element-104667d1 { transform: translateX(-30px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7e54b375 */.elementor-12 .elementor-element.elementor-element-7e54b375 { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 1320px !important; margin: 0 auto !important; padding: 0 20px !important; } .elementor-12 .elementor-element.elementor-element-7e54b375 .header-logo { width: 220px !important; flex: 0 0 220px !important; margin: 0 !important; padding: 0 !important; } .elementor-12 .elementor-element.elementor-element-7e54b375 .header-menu { width: auto !important; flex: 0 0 auto !important; margin-left: auto !important; padding: 0 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-49faecc6 *//* ================================================== 재경김해고 헤더 (1뎁스 호버: 연한 블루 통일) ================================================== */ /* 1. 헤더 전체 */ .highc-header { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 999 !important; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 65%, rgba(0, 0, 0, 0) 100% ) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; border-bottom: none !important; box-shadow: none !important; transition: background-color 0.3s ease, box-shadow 0.3s ease; } /* 스크롤 시 고정 헤더 */ .highc-header.elementor-sticky--effects { background: rgba(0, 34, 79, 0.95) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; } /* ================================================== LOGO ================================================== */ .highc-logo img { display: block; transform: translateZ(0); transition: transform 0.35s cubic-bezier(.2, .7, .2, 1), filter 0.35s ease; } .highc-logo:hover img { transform: translateY(-2px) scale(1.02); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); } /* ================================================== 1DEPTH MENU (호버: 연한 블루 적용) ================================================== */ .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li { position: relative !important; } /* 대메뉴 기본 상태 (순백색) */ .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li > a { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 14px 18px !important; color: #ffffff !important; font-size: 19px !important; font-weight: 700 !important; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important; transition: color 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease !important; } /* 💡 [수정] 대메뉴 호버 시: 눈에 잘 띄는 연한 블루 + 은은한 광채 */ .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li:hover > a { color: #60B5FF !important; transform: translateY(-2px); text-shadow: 0 0 10px rgba(96, 181, 255, 0.45) !important; } /* 💡 [수정] 하단 바: 동일한 연한 블루 적용 */ .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li > a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; width: 0 !important; height: 2.5px !important; background: #60B5FF !important; border-radius: 2px !important; transform: translateX(-50%) !important; transition: width 0.28s ease !important; pointer-events: none !important; } /* 호버 및 활성 시 하단 바 확장 */ .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li:hover > a::after, .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-item > a::after, .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-parent > a::after, .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-ancestor > a::after, .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item-active::after { width: calc(100% - 24px) !important; } /* 활성 메뉴 */ .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-item > a, .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item-active { color: #60B5FF !important; text-shadow: 0 0 10px rgba(96, 181, 255, 0.4) !important; } /* ================================================== 드롭다운 화살표 (기본: 흰색 / 호버: 연한 블루) ================================================== */ .highc-menu .sub-arrow, .highc-menu .sub-arrow i, .highc-menu .sub-arrow svg { margin-left: 6px !important; display: inline-flex !important; align-items: center !important; color: #ffffff !important; fill: #ffffff !important; transition: color 0.25s ease, fill 0.25s ease, transform 0.25s ease; } /* 💡 [수정] 호버 시 화살표도 연한 블루로 변경 */ .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li:hover > a .sub-arrow, .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li:hover > a .sub-arrow i, .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li:hover > a .sub-arrow svg { color: #60B5FF !important; fill: #60B5FF !important; } .highc-menu .menu-item-has-children:hover > a .sub-arrow { transform: translateY(1px); } /* ================================================== DROPDOWN (2DEPTH 흰색 상자 내부) ================================================== */ .highc-menu .sub-menu { min-width: 200px; padding: 8px 0; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(0, 34, 79, 0.12); border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 34, 79, 0.15); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; } .highc-menu .menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .highc-menu .sub-menu .menu-item > a { position: relative !important; display: flex !important; align-items: center !important; min-height: 40px !important; padding: 8px 20px !important; color: #333333 !important; font-size: 14px !important; font-weight: 500 !important; white-space: nowrap !important; text-shadow: none !important; transition: color 0.22s ease, background-color 0.22s ease, padding-left 0.22s ease !important; } .highc-menu .sub-menu .menu-item > a::after { display: none !important; } /* 2뎁스 내부 호버 (흰 배경이므로 짙은 네이비 유지) */ .highc-menu .sub-menu .menu-item > a:hover { padding-left: 24px !important; color: #00224f !important; background: rgba(0, 34, 79, 0.05) !important; } .highc-menu .sub-menu .menu-item > a::before { content: "" !important; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: #00224f; transform: translateY(-50%); transition: height 0.22s ease; } .highc-menu .sub-menu .menu-item > a:hover::before { height: 20px; } .highc-menu .sub-menu .current-menu-item > a, .highc-menu .sub-menu a.elementor-item-active { color: #00224f !important; background: rgba(0, 34, 79, 0.08) !important; } /* ================================================== MOBILE (1024px 이하) ================================================== */ @media (max-width: 1024px) { .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li > a::after { display: none !important; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-12b4c75 *//* 기본 상태: 마우스 호버 시 부드러운 전환을 위한 트랜지션 설정 */ .elementor-12 .elementor-element.elementor-element-12b4c75 img { transition: filter 0.3s ease-in-out !important; } /* 마우스 호버(Hover) 시: 흰색 로고를 메뉴와 동일한 매트 골드 감성으로 변환 */ .elementor-12 .elementor-element.elementor-element-12b4c75 img:hover { /* Sepia와 Hue-rotate 조합으로 흰색/밝은 영역을 바쓰영 고유의 은은한 골드 브라운 톤(#D4AF37)으로 필터링합니다. */ filter: sepia(0.5) saturate(2.5) hue-rotate(5deg) brightness(0.9) contrast(1.1) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-2f69bb76 *//* =================================================== 재경김해고 MOBILE HEADER FINAL - 제미니 버전 기반 - 햄버거 위치 미세조절 기능 추가 - 사진 위 다크 그라데이션 유지 - 모바일 사이드 드로어 유지 =================================================== */ @media (max-width: 767px) { /* ================================================== ★★★ 위치 조절 전용 ★★★ 햄버거 상하 음수(-) = 위로 양수(+) = 아래로 예) -12px = 더 위 -5px = 조금 위 0px = 정중앙 5px = 아래 햄버거 좌우 숫자 작게 = 더 오른쪽 숫자 크게 = 더 왼쪽 예) 4px = 아주 오른쪽 10px = 현재 추천 18px = 기존 위치 25px = 더 왼쪽 ================================================== */ .elementor-12 .elementor-element.elementor-element-2f69bb76 { --hamburger-y: -8px; --hamburger-right: 10px; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 74px !important; min-height: 74px !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; margin: 0 !important; padding: 0 18px !important; box-sizing: border-box !important; /* ============================================== HERO 사진 위 다크 그라데이션 ============================================== */ background: linear-gradient( 180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 15, 35, 0.50) 60%, transparent 100% ) !important; border: none !important; border-bottom: none !important; box-shadow: none !important; overflow: visible !important; z-index: 9999 !important; } /* ================================================== 2. Elementor 내부 컨테이너 투명 ================================================== */ .elementor-12 .elementor-element.elementor-element-2f69bb76 > .e-con, .elementor-12 .elementor-element.elementor-element-2f69bb76 > .elementor-element, .elementor-12 .elementor-element.elementor-element-2f69bb76 .e-con-inner { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } /* ================================================== 3. LOGO ================================================== */ .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-widget-image, .elementor-12 .elementor-element.elementor-element-2f69bb76 .site-logo, .elementor-12 .elementor-element.elementor-element-2f69bb76 .logo-wrap { position: relative !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 10002 !important; } .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-widget-image img, .elementor-12 .elementor-element.elementor-element-2f69bb76 .site-logo img, .elementor-12 .elementor-element.elementor-element-2f69bb76 .logo-wrap img { display: block !important; width: 146px !important; max-width: 146px !important; height: auto !important; margin: 0 !important; filter: drop-shadow( 0 2px 6px rgba(0,0,0,.60) ) !important; } /* ================================================== 4. NAV MENU WIDGET ================================================== */ .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-widget-nav-menu { position: static !important; width: auto !important; margin-left: auto !important; padding: 0 !important; z-index: 10003 !important; } /* ================================================== 5. ★★★ 햄버거 위치 ★★★ ================================================== */ .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-menu-toggle { position: absolute !important; /* ============================================== 상하 위치 --hamburger-y 값으로 조절 ============================================== */ top: 50% !important; /* ============================================== 좌우 위치 --hamburger-right 값으로 조절 ============================================== */ right: var(--hamburger-right) !important; left: auto !important; /* ============================================== 기본 중앙정렬 + 사용자 상하보정 -8px = 위로 8px 0px = 중앙 5px = 아래로 5px ============================================== */ transform: translateY( calc( -50% + var(--hamburger-y) ) ) !important; width: 42px !important; height: 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border-radius: 8px !important; /* ============================================== 반투명 DARK GLASS ============================================== */ background: rgba(0,0,0,.40) !important; border: 1px solid rgba(255,255,255,.45) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 3px 10px rgba(0,0,0,.35) !important; z-index: 10004 !important; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease !important; } /* ================================================== 6. 햄버거 ICON ================================================== */ .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-menu-toggle svg, .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-menu-toggle i { width: 20px !important; height: 20px !important; fill: #FFFFFF !important; color: #FFFFFF !important; font-size: 20px !important; } /* ================================================== 7. 햄버거 HOVER ================================================== */ .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-menu-toggle:hover { background: rgba(11,46,89,.75) !important; border-color: #38BDF8 !important; } /* ================================================== 8. 메뉴 열림 SIDE DRAWER ================================================== */ .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-nav-menu--dropdown { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(84vw, 340px) !important; max-width: 340px !important; height: 100vh !important; margin: 0 !important; padding: 85px 24px 36px !important; background: #FFFFFF !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; border-left: 2px solid #15488C !important; box-shadow: -12px 0 36px rgba(11,46,89,.18) !important; z-index: 10001 !important; } /* ================================================== 9. MENU LIST ================================================== */ .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-nav-menu--dropdown ul, .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-nav-menu--dropdown .elementor-nav-menu, .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-nav-menu--dropdown li { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; box-sizing: border-box !important; } /* ================================================== 10. 1DEPTH MENU ================================================== */ .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-nav-menu--dropdown li > a { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 52px !important; margin: 0 !important; padding: 12px 14px !important; box-sizing: border-box !important; color: #1E293B !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.3px !important; text-align: left !important; white-space: normal !important; word-break: keep-all !important; background: #FFFFFF !important; border-radius: 8px !important; border-bottom: 1px solid #F1F5F9 !important; transition: all .2s ease !important; } /* ================================================== 11. SUB MENU ================================================== */ .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-nav-menu--dropdown .sub-menu { position: static !important; width: 100% !important; margin: 4px 0 10px 0 !important; padding: 6px 0 6px 14px !important; background: #F8FAFC !important; border-radius: 8px !important; border-left: 2px solid #CBD5E1 !important; box-sizing: border-box !important; } .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-nav-menu--dropdown .sub-menu li > a { min-height: 42px !important; padding: 8px 12px !important; font-size: 14.5px !important; font-weight: 600 !important; color: #475569 !important; background: transparent !important; border-bottom: none !important; } /* ================================================== 12. HOVER / ACTIVE ================================================== */ .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-nav-menu--dropdown li > a:hover, .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-nav-menu--dropdown li.current-menu-item > a, .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-nav-menu--dropdown li.current-menu-parent > a, .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-nav-menu--dropdown a.elementor-item-active { color: #15488C !important; background-color: #EFF6FF !important; padding-left: 18px !important; } /* ================================================== 13. 메뉴 OPEN 상태 X 버튼 ================================================== */ .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-menu-toggle.elementor-active { position: fixed !important; top: 18px !important; right: 18px !important; left: auto !important; transform: none !important; width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #0B2E59 !important; border: none !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(11,46,89,.30) !important; z-index: 10005 !important; } .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-menu-toggle.elementor-active svg, .elementor-12 .elementor-element.elementor-element-2f69bb76 .elementor-menu-toggle.elementor-active i { fill: #FFFFFF !important; color: #FFFFFF !important; } /* ================================================== 14. OPEN 상태 로고 흔들림 방지 ================================================== */ .elementor-12 .elementor-element.elementor-element-2f69bb76:has( .elementor-menu-toggle.elementor-active ) .elementor-widget-image, .elementor-12 .elementor-element.elementor-element-2f69bb76:has( .elementor-menu-toggle.elementor-active ) .site-logo, .elementor-12 .elementor-element.elementor-element-2f69bb76:has( .elementor-menu-toggle.elementor-active ) .logo-wrap { transform: none !important; margin: 0 !important; position: relative !important; } }/* End custom CSS */ /* Start custom CSS *//* ================================================== 재경김해고 헤더 (1뎁스 호버: 세련된 라이트 그레이) ================================================== */ /* 1. 헤더 전체 */ .highc-header { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 999 !important; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 65%, rgba(0, 0, 0, 0) 100% ) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; border-bottom: none !important; box-shadow: none !important; transition: background-color 0.3s ease, box-shadow 0.3s ease; } /* 스크롤 시 고정 헤더 */ .highc-header.elementor-sticky--effects { background: rgba(0, 34, 79, 0.95) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; } /* ================================================== LOGO ================================================== */ .highc-logo img { display: block; transform: translateZ(0); transition: transform 0.35s cubic-bezier(.2, .7, .2, 1), filter 0.35s ease; } .highc-logo:hover img { transform: translateY(-2px) scale(1.02); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); } /* ================================================== 1DEPTH MENU (호버: 라이트 실버 그레이 적용) ================================================== */ .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li { position: relative !important; } /* 대메뉴 기본 상태 (순백색) */ .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li > a { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 14px 18px !important; color: #ffffff !important; font-size: 19px !important; font-weight: 700 !important; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important; transition: color 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease !important; } /* 💡 대메뉴 호버 시: 무난하고 차분한 라이트 그레이 */ .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li:hover > a { color: #CBD5E1 !important; /* 세련된 연회색 (Tailwind Slate-300 계열) */ transform: translateY(-2px); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important; } /* 💡 하단 바: 은은한 실버 라인 적용 */ .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li > a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; width: 0 !important; height: 2.5px !important; background: #CBD5E1 !important; border-radius: 2px !important; transform: translateX(-50%) !important; transition: width 0.28s ease !important; pointer-events: none !important; } /* 호버 및 활성 시 하단 바 확장 */ .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li:hover > a::after, .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-item > a::after, .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-parent > a::after, .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-ancestor > a::after, .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item-active::after { width: calc(100% - 24px) !important; } /* 활성 메뉴 */ .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-item > a, .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item-active { color: #CBD5E1 !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important; } /* ================================================== 드롭다운 화살표 (기본: 흰색 / 호버: 라이트 그레이) ================================================== */ .highc-menu .sub-arrow, .highc-menu .sub-arrow i, .highc-menu .sub-arrow svg { margin-left: 6px !important; display: inline-flex !important; align-items: center !important; color: #ffffff !important; fill: #ffffff !important; transition: color 0.25s ease, fill 0.25s ease, transform 0.25s ease; } /* 호버 시 화살표도 연회색으로 매칭 */ .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li:hover > a .sub-arrow, .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li:hover > a .sub-arrow i, .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li:hover > a .sub-arrow svg { color: #CBD5E1 !important; fill: #CBD5E1 !important; } .highc-menu .menu-item-has-children:hover > a .sub-arrow { transform: translateY(1px); } /* ================================================== DROPDOWN (2DEPTH 흰색 상자 내부) ================================================== */ .highc-menu .sub-menu { min-width: 200px; padding: 8px 0; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(0, 34, 79, 0.12); border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 34, 79, 0.15); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; } .highc-menu .menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .highc-menu .sub-menu .menu-item > a { position: relative !important; display: flex !important; align-items: center !important; min-height: 40px !important; padding: 8px 20px !important; color: #333333 !important; font-size: 14px !important; font-weight: 500 !important; white-space: nowrap !important; text-shadow: none !important; transition: color 0.22s ease, background-color 0.22s ease, padding-left 0.22s ease !important; } .highc-menu .sub-menu .menu-item > a::after { display: none !important; } /* 2뎁스 내부 호버 (흰 배경이므로 가독성 좋은 딥네이비 유지) */ .highc-menu .sub-menu .menu-item > a:hover { padding-left: 24px !important; color: #00224f !important; background: rgba(0, 34, 79, 0.05) !important; } .highc-menu .sub-menu .menu-item > a::before { content: "" !important; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: #00224f; transform: translateY(-50%); transition: height 0.22s ease; } .highc-menu .sub-menu .menu-item > a:hover::before { height: 20px; } .highc-menu .sub-menu .current-menu-item > a, .highc-menu .sub-menu a.elementor-item-active { color: #00224f !important; background: rgba(0, 34, 79, 0.08) !important; } /* ================================================== MOBILE (1024px 이하) ================================================== */ @media (max-width: 1024px) { .highc-menu .elementor-nav-menu--main > .elementor-nav-menu > li > a::after { display: none !important; } }/* End custom CSS */