/* ========================================================================== 바이오 키트 — Elementor 무료판에 없는 것만 담는다. 색·글꼴·여백은 위젯 Style 탭에서. ========================================================================== */ :root { --bk-ink: #0B1A2B; --bk-ink-2: #3A4A5C; --bk-mute: #5B6B7C; --bk-line: #DCE5EA; --bk-paper: #F4F8F8; --bk-night: #071526; --bk-teal: #12B5A4; /* 그래픽·큰 글자 전용 */ --bk-teal-dk: #0A6B62; /* 흰 바탕 작은 글자 (6.4:1) */ --bk-violet: #7B61FF; /* 그래픽 전용 */ --bk-violet-dk: #5243C9; /* 흰 바탕 작은 글자 (7.0:1) */ --bk-blue: #3E8EF0; --bk-grad: linear-gradient(120deg, #12B5A4 0%, #3E8EF0 55%, #7B61FF 100%); --bk-grad-text: linear-gradient(110deg, #0A6B62 0%, #1F5FBF 50%, #5243C9 100%); --bk-grad-text-dark: linear-gradient(110deg, #5EEAD4 0%, #8EC5FF 50%, #B5A8FF 100%); --bk-ease: cubic-bezier(.22, 1, .36, 1); --bk-hh: 104px; /* 떠 있는 헤더가 차지하는 높이 */ } @media (max-width: 1024px) { :root { --bk-hh: 84px; } } /* ---- 한글 줄바꿈: 단어 중간에서 끊지 않는다 (Elementor 에 컨트롤이 없는 CJK 속성) ---- */ .elementor-widget-heading .elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-image-box .elementor-image-box-title, .elementor-widget-image-box .elementor-image-box-description, .elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-description, .elementor-widget-icon-list .elementor-icon-list-text, .elementor-widget-button .elementor-button-text, .elementor-tab-title, .elementor-tab-content, .e-n-accordion-item-title-text, .e-n-tab-title-text, .bk-st, .bk-pl, .bk-hs__tip, .bk-hs__list, .bk-pub, .bk-lt { word-break: keep-all; overflow-wrap: break-word; } .elementor-widget-button .elementor-button { white-space: nowrap; } /* 링크 걸린 이미지: Elementor 기본 가 inline-block 이라 고정 높이 사진이 원본 비율 폭으로 줄어든다 (73661 실측) */ .elementor-widget-image a { display: block; } .elementor-counter-number-wrapper, .bk-num { font-variant-numeric: tabular-nums; } /* 숫자와 단위('억 원')가 두 줄로 갈라지지 않게 */ .elementor-counter-number-wrapper { white-space: nowrap; } /* 숫자 옆 작은 단위 (제목 위젯 안 ) */ .bk-unit { font-size: .5em; font-weight: 500; margin-left: 2px; letter-spacing: 0; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== 헤더 — 화면 위에 떠 있는 유리 알약. 고정은 컨테이너 컨트롤(position:fixed), 흐림·전환만 여기서. ========================================================================== */ .bk-header { pointer-events: none; } .bk-header > .e-con-inner, .bk-header > .e-con { pointer-events: auto; } .bk-glass { -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); transition: background-color .35s var(--bk-ease), box-shadow .35s var(--bk-ease), padding .35s var(--bk-ease), transform .45s var(--bk-ease); } html.bk-scrolled .bk-glass { background-color: rgba(255, 255, 255, .9) !important; box-shadow: 0 1px 0 rgba(11, 26, 43, .04), 0 18px 44px rgba(11, 26, 43, .12) !important; } body.admin-bar .bk-header { top: 32px !important; } @media (max-width: 782px) { body.admin-bar .bk-header { top: 46px !important; } } /* 헤더 메뉴: 배경 포인터를 알약 모양으로 (HFE 는 모서리 컨트롤이 없다) */ .bk-header .hfe-pointer__background .menu-item.parent a.hfe-menu-item:before { border-radius: 999px; } /* HFE 드롭다운: 메뉴와 하위 메뉴 사이를 지나는 동안 닫히지 않게 (호버 브리지) */ .hfe-nav-menu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; } /* 키보드 초점 */ .hfe-nav-menu a.hfe-menu-item:focus-visible, .hfe-nav-menu a.hfe-sub-menu-item:focus-visible, .elementor-button:focus-visible, .bk-pl__chip:focus-visible, .bk-pub__chip:focus-visible, .bk-hs__pt:focus-visible, .bk-lt__row:focus-visible { outline: 2px solid var(--bk-teal-dk); outline-offset: 3px; } /* ========================================================================== 공통 장식 ========================================================================== */ /* 섹션 머리 칩 — 그라데이션 점 + 글자 (제목 위젯에 bk-chip) */ .bk-chip .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border-radius: 999px; background: rgba(18, 181, 164, .09); border: 1px solid rgba(18, 181, 164, .28); } .bk-chip .elementor-heading-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bk-grad); box-shadow: 0 0 0 3px rgba(18, 181, 164, .16); } .bk-chip.is-dark .elementor-heading-title { background: rgba(94, 234, 212, .08); border-color: rgba(94, 234, 212, .28); } /* 제목 안 = 굵은 그라데이션 강조 (제목 위젯에 bk-hl) — 글자 대비는 양 끝 색 기준 6.4:1 이상 */ .bk-hl .elementor-heading-title strong, .bk-hl .elementor-heading-title b { font-weight: 700; background: var(--bk-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .bk-hl.is-dark .elementor-heading-title strong, .bk-hl.is-dark .elementor-heading-title b { background-image: var(--bk-grad-text-dark); } /* 빛 번짐 배경 (컨테이너에 bk-aura / bk-aura-2 / bk-night) */ .bk-aura, .bk-aura-2, .bk-night { position: relative; isolation: isolate; } .bk-aura::after, .bk-aura-2::after, .bk-night::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; /* 둥근 카드 모서리 밖으로 번짐이 삐져나오지 않게(독립 검증 발견) */ } .bk-aura::after { background: radial-gradient(42% 52% at 12% 18%, rgba(18, 181, 164, .16), transparent 70%), radial-gradient(38% 46% at 88% 22%, rgba(123, 97, 255, .14), transparent 70%), radial-gradient(46% 50% at 62% 96%, rgba(62, 142, 240, .10), transparent 70%); } .bk-aura-2::after { background: radial-gradient(40% 50% at 90% 10%, rgba(18, 181, 164, .12), transparent 70%), radial-gradient(36% 46% at 6% 88%, rgba(123, 97, 255, .10), transparent 70%); } .bk-night::after { background: radial-gradient(40% 55% at 8% 8%, rgba(18, 181, 164, .22), transparent 70%), radial-gradient(42% 60% at 96% 92%, rgba(123, 97, 255, .22), transparent 70%); } /* 세포 점무늬 (컨테이너에 bk-dots) — 배경 위 별도 층. 컨테이너 배경(background-image 그라데이션)을 덮어쓰면 안 된다(1.0.1 에서 남색 바탕이 지워졌다) */ .bk-dots { position: relative; isolation: isolate; } .bk-dots::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background-image: radial-gradient(rgba(11, 26, 43, .09) 1px, transparent 1.4px); background-size: 24px 24px; } .bk-dots.is-dark::after { background-image: radial-gradient(rgba(234, 243, 246, .07) 1px, transparent 1.4px); } .bk-night.bk-dots::after { background-image: radial-gradient(40% 55% at 8% 8%, rgba(18, 181, 164, .22), transparent 70%), radial-gradient(42% 60% at 96% 92%, rgba(123, 97, 255, .22), transparent 70%), radial-gradient(rgba(234, 243, 246, .07) 1px, transparent 1.4px); background-size: auto, auto, 24px 24px; } /* 유리 흐림 (컨테이너에 bk-blur — 바탕색·테두리·그림자는 컨테이너 컨트롤) */ .bk-blur { -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); } /* 카드: 호버하면 살짝 뜨고 그라데이션 테두리가 켜진다 (컨테이너에 bk-card) */ .bk-card { position: relative; transition: transform .5s var(--bk-ease), box-shadow .5s var(--bk-ease); } .bk-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2; background: var(--bk-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .45s var(--bk-ease); } .bk-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(11, 26, 43, .12); } .bk-card:hover::before, .bk-card:focus-within::before { opacity: 1; } a.bk-card { text-decoration: none; } @media (prefers-reduced-motion: reduce) { .bk-card, .bk-card:hover { transform: none; } } /* 사진 둥근 모서리 안에서 호버 확대 (카드 컨테이너에 bk-zoom) */ .bk-zoom .elementor-widget-image .elementor-widget-container { overflow: hidden; border-radius: inherit; } .bk-zoom img { transition: transform 1s var(--bk-ease); } .bk-zoom:hover img { transform: scale(1.05); } /* 초점 리빌 — 현미경 초점이 맞듯 흐릿함이 걷히며 나타난다 (이미지 위젯에 bk-focus) */ .bk-focus .elementor-widget-container { overflow: hidden; } html.bk-js .bk-focus img { filter: blur(16px) saturate(.6); transform: scale(1.08); opacity: .35; transition: filter 1.4s var(--bk-ease), transform 1.8s var(--bk-ease), opacity 1s var(--bk-ease); } html.bk-js .bk-focus.is-in img { filter: none; transform: none; opacity: 1; } .elementor-editor-active .bk-focus img { filter: none !important; transform: none !important; opacity: 1 !important; } @media (prefers-reduced-motion: reduce) { html.bk-js .bk-focus img { filter: none; transform: none; opacity: 1; transition: none; } } /* 데스크톱에서 왼쪽 제목 고정 (오른쪽 목록이 길 때) */ @media (min-width: 1025px) { .bk-sticky { position: sticky; top: calc(var(--bk-hh) + 16px); align-self: flex-start; } } /* 모바일 가로 스냅 줄 */ @media (max-width: 767px) { .bk-snap > .e-con-inner, .bk-snap.e-con-full { flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; } .bk-snap > .e-con-inner::-webkit-scrollbar, .bk-snap.e-con-full::-webkit-scrollbar { display: none; } .bk-snap > .e-con-inner > .e-con, .bk-snap.e-con-full > .e-con { flex: 0 0 84% !important; max-width: 84% !important; scroll-snap-align: start; } } /* 모바일 하단 고정 문의 바 (푸터 템플릿의 bk-mbar 컨테이너 — 위치·색·버튼은 Elementor 컨트롤, 여기서는 본문 아래 여백·맨위로 버튼 위치만) */ @media (max-width: 767px) { body:has(.bk-mbar) { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } body:has(.bk-mbar) .hfe-scroll-to-top-button { bottom: 82px !important; } /* mobileN 백링크(mu-plugin, 인라인 bottom:8px)가 문의 바를 덮지 않게 바 위로 (10-16) */ body:has(.bk-mbar) #mn-backlink { bottom: calc(71px + env(safe-area-inset-bottom, 0px)) !important; } .bk-mbar { padding-bottom: env(safe-area-inset-bottom, 0px) !important; } .bk-mbar a.e-con:focus-visible { outline: 2px solid #fff; outline-offset: -4px; } } /* 서브 페이지 형제 탭 — 알약 줄 (모바일은 가로로 넘긴다) */ .bk-tabs .elementor-button { transition: background-color .3s, color .3s, box-shadow .3s; } @media (max-width: 767px) { .bk-tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .bk-tabs::-webkit-scrollbar { display: none; } .bk-tabs > .elementor-element { flex: 0 0 auto; } } .bk-crumb-now { color: var(--bk-ink); font-weight: 600; } /* 숫자 카드의 그라데이션 숫자 (카운터 위젯에 bk-gnum) */ .bk-gnum .elementor-counter-number-wrapper { background: var(--bk-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent !important; } .bk-gnum.is-dark .elementor-counter-number-wrapper { background-image: var(--bk-grad-text-dark); } /* 이미지 박스 제목 안 직함 () */ .bk-role { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--bk-teal-dk); } /* 지도 둥근 모서리 (구글 지도 위젯에 bk-map — 위젯 반경만으로는 iframe 모서리가 안 잘린다) */ .bk-map .elementor-widget-container { overflow: hidden; border-radius: 28px; } .bk-map iframe { display: block; } /* 표 — 텍스트 편집기 위젯 안 HTML 표 (위젯에 bk-table). Elementor 무료판에는 표 위젯이 없다 */ .bk-table { overflow-x: auto; } .bk-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; margin: 0; border: 0; } /* Hello 테마 기본 table 규칙(셀 사방 1px 테두리 · 홀수 행 줄무늬 · 셀 여백 15px)이 남아 글자가 세로선에 붙었다(독립 검증 발견) → 지운다 */ .bk-table table th, .bk-table table td { border: 0; } .bk-table table tbody > tr > td, .bk-table table tbody > tr > th { background-color: transparent; } .bk-table table thead th { text-align: left; padding: 0 16px 12px 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--bk-mute); border-bottom: 2px solid var(--bk-ink); vertical-align: bottom; } .bk-table table tbody th, .bk-table table tbody td { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--bk-line); vertical-align: top; text-align: left; } .bk-table tbody th { font-weight: 600; color: var(--bk-ink); } .bk-table td { color: var(--bk-ink-2); font-variant-numeric: tabular-nums; } .bk-table table .is-num { text-align: right; padding-right: 0; padding-left: 16px; } .bk-table table tbody > tr.is-hl > th, .bk-table table tbody > tr.is-hl > td { background-color: #F1FAF8; } .bk-table table tbody > tr.is-hl > th { box-shadow: inset 3px 0 0 var(--bk-teal); padding-left: 12px; } @media (max-width: 767px) { .bk-table table { font-size: 14px; } .bk-table table tbody th, .bk-table table tbody td { padding: 12px 12px 12px 0; } .bk-table table .is-num { padding-left: 10px; } } /* ========================================================================== 위젯 ========================================================================== */ /* DNA 나선 */ .bk-helix { position: relative; width: 100%; height: 620px; /* 나선이 캔버스 위·아래 경계에서 잘려 보이지 않게 끝을 흐린다 */ -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); } .bk-helix__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* 스크롤 하이라이트 문장 */ .bk-st { --bk-st-dim: rgba(11, 26, 43, .16); --bk-st-lit: var(--bk-ink); margin: 0; color: var(--bk-st-lit); } .bk-st__w { transition: color .35s var(--bk-ease); } .bk-st__w.is-acc { background: var(--bk-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } html.bk-js .bk-st__w { color: var(--bk-st-dim); } html.bk-js .bk-st__w.is-acc { opacity: .32; transition: opacity .35s var(--bk-ease); color: transparent; } html.bk-js .bk-st__w.is-lit { color: var(--bk-st-lit); } html.bk-js .bk-st__w.is-acc.is-lit { opacity: 1; color: transparent; } .elementor-editor-active .bk-st__w { color: var(--bk-st-lit) !important; opacity: 1 !important; } .elementor-editor-active .bk-st__w.is-acc { color: transparent !important; } @media (prefers-reduced-motion: reduce) { html.bk-js .bk-st__w { color: var(--bk-st-lit); } html.bk-js .bk-st__w.is-acc { opacity: 1; color: transparent; } } /* 파이프라인 차트 */ .bk-pl { --bk-pl-a: #12B5A4; --bk-pl-b: #7B61FF; --bk-pl-line: var(--bk-line); --bk-pl-text: var(--bk-ink); --bk-pl-sub: var(--bk-mute); --bk-pl-track: rgba(11, 26, 43, .04); --bk-pl-chip: rgba(11, 26, 43, .05); color: var(--bk-pl-text); } .bk-pl.is-dark { --bk-pl-line: rgba(234, 243, 246, .14); --bk-pl-text: #EAF3F6; --bk-pl-sub: rgba(234, 243, 246, .72); --bk-pl-track: rgba(234, 243, 246, .05); --bk-pl-chip: rgba(234, 243, 246, .08); } .bk-pl__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; } /* Elementor 킷 버튼 규칙(.elementor-kit-N button, 0,1,1)이 모든