/* 데모 체험 화면에서 본 사이트로 돌아가는 길.
   5개 화면이 같은 파일을 씁니다. 여기만 고치면 다 바뀝니다.
   클래스 이름에 wj- 를 붙인 이유: 화면마다 자기 CSS 가 있어서
   이름이 겹치면 남의 화면을 망가뜨립니다. */
.wj-nav {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; background: #141a35; color: #fff;
  font-size: 13px; font-family: inherit; line-height: 1;
}
.wj-nav a { color: #c9d0ea; text-decoration: none; white-space: nowrap; }
.wj-nav a:hover { color: #fff; }
.wj-nav .wj-back { font-weight: 700; }
.wj-nav .wj-brand { color: #fff; font-weight: 800; letter-spacing: -.2px; }
.wj-nav .wj-sep { color: #4a5480; }
.wj-nav .wj-spacer { flex: 1; }
/* 문의는 눌러야 하는 것이라 노란색을 씁니다. 챗봇 버튼과 같은 색입니다. */
.wj-nav .wj-cta {
  background: #ffe95c; color: #3a3300; font-weight: 800;
  padding: 6px 13px; border-radius: 999px;
}
.wj-nav .wj-cta:hover { color: #3a3300; background: #ffef85; }
@media (max-width: 560px) {
  .wj-nav { padding: 6px 10px; gap: 7px; font-size: 12px; }
  .wj-nav .wj-hideS { display: none; }
  .wj-nav .wj-cta { padding: 6px 11px; }
}