@charset "utf-8";
/* 전시회 솔루션 사이트 — 공통
   =========================================================================
   시안: 피그마 「웹비 리뉴얼 2026」 dXMLpyQq0H9LZCuMpKx4KB

   ■ 1px도 틀리지 않게 하려고 쓰는 방법
     시안은 가로 1920 고정 판이다. 그래서 화면을 1920 판 그대로 짜고,
     판 전체를 zoom 으로 줄였다 늘렸다 한다(--k). 이러면 시안에 적힌 숫자를
     그대로 px 로 옮겨 적을 수 있어 어긋날 일이 없다.
       --k = 창 가로폭 / 1920      (head.php 안 인라인 스크립트가 정한다)
     ※ 1024 이하에서는 --k 를 걷어내고 따로 짠 모바일 배치로 넘어간다.

     zoom 이 걸린 안쪽에서는 「화면 기준으로 고정이어야 하는 px」 은
     var(--k) 로 나눠 준다. (지금은 쓰는 곳이 없다)

   찾아보기
     1. 기준값        2. 되돌리기      3. 1920 판
     4. 헤더          5. 좁은 화면 메뉴  6. 푸터                              */

/* ── 1. 기준값 ─────────────────────────────────────────── */
:root {
	--k: 1;                       /* 1920 판 배율 — 스크립트가 덮어쓴다 */

	--c-ink:     #040000;         /* 로고 검정 (logo.svg) */
	--c-key:     #0B0FF7;         /* 로고 파랑 (logo.svg) */
	/* 견적문의 「확인」 단추의 두 색 — 사이트 공통 강조색이다
	   (contact.css · solution.css 도 같은 값을 제 이름으로 갖고 있다) */
	--c-grad-purple: #6136d9;
	--c-grad-pink:   #ed35a4;
	--c-grad: linear-gradient(to left, var(--c-grad-pink), var(--c-grad-purple));
	--c-dark:    #111111;         /* 푸터 바탕 (시안 612:2319) */
	--c-white:   #ffffff;

	--font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
	             "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* ── 2. 되돌리기 ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	/* 판을 줄이면 소수점이 남아 가로 스크롤이 생길 수 있다 */
	overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--c-white);
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	word-break: keep-all;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { vertical-align: middle; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-key); outline-offset: 2px; }

.sr-only {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
	position: absolute; left: 50%; top: -60px;
	transform: translateX(-50%);
	z-index: 200;
	padding: 10px 18px;
	border-radius: 0 0 8px 8px;
	background: var(--c-ink); color: #fff;
	font-size: 14px;
	transition: top .15s;
}
.skip:focus { top: 0; }

/* ── 3. 1920 판 ────────────────────────────────────────── */
.ex-stage {
	position: relative;
	width: 1920px;
	/* --off 는 include/head.php 가 넣는다. 창이 1920 보다 좁을 때 판을 좌우로 같은 만큼
	   잘라내 「본문 띠 1484」가 가운데 오게 하는 값(음수)이다. 없으면 그냥 가운데. */
	margin: 0 var(--off, auto);
	zoom: var(--k, 1);
	overflow: hidden;          /* 판 밖으로 나간 장식이 가로 스크롤을 만들지 않게 */
}

/* ── 4. 헤더 (시안 612:2168 · 612:2179) ────────────────── */
.ex-header {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 50;
	width: 1920px;
	height: 90px;              /* 메뉴 띠 아래끝(23+60=83) 을 덮는 높이 */
	pointer-events: none;      /* 빈 곳은 클릭을 가로채지 않는다 */
}
.ex-header > * { pointer-events: auto; }

.ex-header__logo {
	position: absolute;
	left: 220px;
	top: 27px;
	width: 198px;
	height: 37px;
	display: block;
}
.ex-header__logo img { display: block; width: 198px; height: 37px; }

.ex-gnb {
	position: absolute;
	left: 688px;
	top: 23px;
	width: 526px;
	height: 60px;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 50px;                        /* 시안 gap */
	/* 시안 안쪽 여백은 15 80 이었는데, 글자를 16 → 17 로 키우면서 좌우가 모자라
	   64 로 줄였다. 띠 자체(x688 · 526×60)는 시안 그대로 안 움직인다. */
	padding: 15px 64px;

	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 300px;
	background: rgba(255, 255, 255, .8);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);

	color: #000;
	font-size: 17px;
	font-weight: 600;                 /* Pretendard SemiBold */
	line-height: 1.6;
	text-align: center;
	white-space: nowrap;
}
/* 밑줄 연출은 fx.css 가 갖고 있다(.ex-gnb a::after) — 한 군데에만 둔다 */
.ex-gnb a { display: block; }
.ex-gnb a.is-current { font-weight: 700; }

/* 좁은 화면에서만 나오는 메뉴 단추 */
.ex-header__menu { display: none; }

/* ── 5. 좁은 화면 메뉴 ─────────────────────────────────── */
.ex-mnav { display: none; }

/* ── 6. 푸터 (시안 612:2318 Frame 86 — 1920 × 679) ─────── */
.ex-footer {
	position: relative;
	width: 1920px;
	height: 679px;
	border-radius: 60px 60px 0 0;
	background: var(--c-dark);
	color: var(--c-white);
	overflow: hidden;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

/* 장식 — 휘갈김 그림과 부메랑 마크 */
.ex-footer__squiggle {
	position: absolute;
	left: 1387px;
	top: 89px;
	width: 399px;
	height: 301px;
	opacity: .4;
}
.ex-footer__mark {
	position: absolute;
	left: 1672px;
	top: 22px;
	width: 148px;
	height: 142px;
}

.ex-footer__logo {
	position: absolute;
	left: 100px;
	top: 83px;
	width: 241px;
	height: 45px;
}

.ex-footer__lead {
	position: absolute;
	left: 100px;
	top: 179px;
	font-size: 42px;
	font-weight: 800;                 /* Pretendard ExtraBold */
	line-height: 1.4;
	white-space: nowrap;
}

/* 링크 줄 · 회사정보 줄 — 본사이트(webvista_new) 와 같은 방식.
   항목 사이에 1×5 선을 넣고 좌우로 20px 씩 띄운다. */
.ex-footer__links,
.ex-footer__info {
	position: absolute;
	left: 100px;
}
.ex-footer__links { top: 428px; }
.ex-footer__info  { top: 471px; }

.ex-footer__links ul,
.ex-footer__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	line-height: 1.4;
}
.ex-footer__links li,
.ex-footer__info li { display: flex; align-items: center; }

.ex-footer__links li + li::before,
.ex-footer__info li + li::before {
	content: "";
	display: block;
	width: 1px;
	height: 5px;
	margin: 0 20px;
	background: rgba(255, 255, 255, .6);
}
.ex-footer__links a { transition: opacity .2s ease; }
.ex-footer__links a:hover { opacity: .65; }
.ex-footer__info a:hover { text-decoration: underline; }

/* 주소 — 두 칸 격자. 왼쪽 칸 550 이라 오른쪽 칸이 시안과 같은 x650 에서 시작한다 */
.ex-footer__addr {
	position: absolute;
	left: 100px;
	top: 537px;
	width: 1500px;
	display: grid;
	grid-template-columns: minmax(0, 550px) 1fr;
	row-gap: 11px;               /* 글줄 22.4 + 11 ≈ 33 (시안 537 → 570) */
	opacity: .7;
	line-height: 1.4;
}
.ex-footer__addr > div { display: flex; align-items: center; }
.ex-footer__addr dt { flex: none; min-width: 47px; margin: 0; }
.ex-footer__addr dd { margin: 0; display: flex; align-items: center; }
.ex-footer__addr dd::before {
	content: "";
	display: block;
	flex: none;
	width: 1px;
	height: 5px;
	margin: 0 15px;
	background: rgba(255, 255, 255, .6);
}

/* 본문이 들어갈 자리 — 페이지별 css 에서 높이를 준다 */
.ex-body { position: relative; }

/* ============================================================
   푸터 — 판을 좌우로 잘라 쓰는 구간에서 속이 잘리지 않게
   ============================================================
   판(1920)이 창보다 넓으면 --off 만큼 왼쪽으로 밀어 좌우를 잘라 낸다.
   그런데 푸터 속은 시안대로 x100 에 붙어 있어, 잘려 나가는 218 안에 들어간다
   → 「개인정보취급방침」부터 로고까지 왼쪽이 통째로 안 보였다.

   --fin 은 **잘려 나간 폭**(--off 의 절댓값)이다.
     창 ≥ 1920 : 0     — 시안 그대로
     1484~1920 : 0~218 — 잘리는 만큼 속을 안으로 들인다
     1200~1484 : 218   — 더는 안 잘리므로 고정
   오른쪽 장식 둘도 같은 만큼 안으로 당긴다.                                  */
.ex-footer {
	--fin: calc(-1 * var(--off, 0px));
	/* 속만 안으로 들이면 **둥근 위 모서리(60)가 잘려 나간 바깥쪽에 남아** 안 보인다.
	   상자 자체를 보이는 폭에 맞춰 줄여야 모서리가 화면 양끝에 온다. */
	margin-left: var(--fin);
	margin-right: var(--fin);
	width: calc(1920px - 2 * var(--fin));
}

/* 상자가 이미 안으로 들어왔으므로 속은 **시안 그대로 100** 이면 된다.
   오른쪽 장식 둘은 왼쪽이 아니라 **오른쪽 기준**으로 잡아야 폭이 변해도 안 흔들린다.
     휘갈김 : 시안 x1387 + 폭 399 → 오른쪽에서 134
     부메랑 : 시안 x1672 + 폭 148 → 오른쪽에서 100                            */
.ex-footer__squiggle { left: auto; right: 134px; }
.ex-footer__mark     { left: auto; right: 100px; }

/* 회사정보·주소·링크 줄은 한 줄로 길다(1448). 좁아지면 줄바꿈하게 둔다.
   (1920 에서는 시안 그대로 한 줄) */
.ex-footer__links,
.ex-footer__info,
.ex-footer__addr { max-width: calc(100% - 200px); }