/* =========================================================
qraps.css — 현행 qraps.co.kr 디자인에 맞춘 테마 오버라이드
main.css 뒤에 로드됩니다. 원본 파일은 건드리지 않습니다.
기준값(실측): Noto Sans KR / 컨테이너 1009px / 본문 #545454
제목 #333 / 포인트 #6BC3F0·#3ABCFF / 로고 #00A0E9
========================================================= */
:root {
--q-blue: #00A0E9;
--q-blue-lt: #6BC3F0;
--q-blue-br: #3ABCFF;
--q-blue-dp: #0A6FA8; /* 고급스러운 딥 블루 — 로고 블루 계열 */
--q-yellow: #FDD000;
--q-orange: #E6421C;
--q-dark: #221815;
--q-text: #545454;
--q-heading: #333333;
--q-muted: #9D9D9D;
--q-line: #e5e5e5;
--q-container: 1009px;
}
body,
body.lang-kr {
font-family: "Noto Sans KR", "Pretendard", Roboto, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
color: var(--q-text);
background: #fff;
letter-spacing: -0.01em;
}
.container { max-width: var(--q-container); }
/* ---------- 헤더 ---------- */
.site-header {
background: #fff;
border-bottom: 1px solid var(--q-line);
box-shadow: none;
}
.site-header .container {
min-height: 92px;
display: flex;
align-items: center;
gap: 26px;
}
.logo img { height: 44px; }
.primary-nav { gap: 44px; }
.primary-nav > a,
.primary-nav .nav-item > a {
font-size: 18px;
font-weight: 500;
color: var(--q-heading);
padding: 8px 0;
letter-spacing: -0.02em;
}
.primary-nav > a:hover,
.primary-nav .nav-item > a:hover,
.primary-nav .nav-item:hover > a { color: var(--q-blue-lt); }
.primary-nav .nav-item.has-children > a::after { opacity: .4; }
.primary-nav .submenu {
border: 1px solid var(--q-line);
border-radius: 4px;
box-shadow: 0 8px 24px rgba(0,0,0,.09);
padding: 6px 0;
}
.primary-nav .submenu a {
font-size: 16px; font-weight: 400; color: var(--q-text); padding: 11px 22px;
}
.primary-nav .submenu a:hover { background: #f4fbff; color: var(--q-blue); }
/* ---------- 서브페이지 히어로 ---------- */
.page-hero {
background: linear-gradient(100deg, #1b2733 0%, #2c3a47 55%, #3a4a58 100%);
position: relative;
overflow: hidden;
}
.page-hero::after {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 78% 30%, rgba(0,160,233,.22), transparent 58%);
pointer-events: none;
}
.page-hero .container {
position: relative; z-index: 1;
min-height: 210px; display: flex; flex-direction: column; justify-content: center;
padding-top: 34px; padding-bottom: 34px;
}
.page-hero h1, .page-hero .page-hero-t {
margin: 0; color: #fff; font-size: 42px; font-weight: 700;
letter-spacing: -0.03em; line-height: 1.25;
}
.page-hero .crumb {
margin: 0 0 12px; font-size: 13.5px; font-weight: 400;
color: rgba(255,255,255,.62); letter-spacing: .01em;
}
.page-hero .crumb span { color: rgba(255,255,255,.4); margin: 0 7px; }
/* ---------- 본문 공통 ---------- */
.site-main { padding-bottom: 0; }
.svc { max-width: var(--q-container); padding: 0 0 20px; }
.svc-lead {
background: #f7fbfe;
border-left: 3px solid var(--q-blue);
color: var(--q-text);
font-size: 16px;
line-height: 1.9;
font-weight: 400;
padding: 26px 28px;
margin-bottom: 52px;
}
.svc h2 {
display: block;
text-align: center;
font-size: 25px;
font-weight: 700;
color: var(--q-heading);
letter-spacing: -0.03em;
margin: 64px 0 28px;
padding-bottom: 16px;
position: relative;
}
.svc h2::after {
content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 38px; height: 2px; background: var(--q-blue);
}
.svc h2 .num {
display: block; font-size: 12px; font-weight: 500; color: var(--q-blue-lt);
letter-spacing: .18em; margin-bottom: 7px;
}
.svc-support > div { border: 1px solid var(--q-line); border-radius: 4px; padding: 26px 26px; }
.svc-support h3 { color: var(--q-heading); font-size: 17px; letter-spacing: -0.02em; margin-bottom: 11px; }
.svc-support p { color: var(--q-text); font-size: 15px; line-height: 1.8; }
.svc-chips { justify-content: center; gap: 9px; }
.svc-chips li {
background: #f5f7f9; border: 1px solid #edf1f4; border-radius: 3px;
color: var(--q-text); font-size: 14.5px; padding: 9px 17px; font-weight: 400;
}
.svc-table { font-size: 15px; }
.svc-table thead th {
background: #4a5a68; color: #fff; font-weight: 500; font-size: 14.5px;
border-color: #4a5a68; padding: 14px 16px; letter-spacing: -0.01em;
}
.svc-table tbody th { background: #f7f9fa; color: var(--q-heading); font-weight: 500; }
.svc-table th, .svc-table td { border-color: var(--q-line); padding: 15px 16px; color: var(--q-text); line-height: 1.75; }
.svc-note { color: var(--q-muted); font-size: 13px; }
.svc-cta { text-align: center; border-top: 1px solid var(--q-line); margin-top: 60px; padding-top: 36px; }
.svc-cta a { background: var(--q-blue); border-radius: 3px; padding: 15px 34px; font-weight: 500; font-size: 15px; }
.svc-cta a:hover { background: #0b8fcc; }
/* ---------- 인사말 ---------- */
.greeting p { color: var(--q-text); font-size: 16px; line-height: 2.0; }
.greeting .greet-open { color: var(--q-heading); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.greeting .greet-sign { border-top: 1px solid var(--q-line); }
.greeting .greet-sign strong { color: var(--q-heading); }
/* ---------- 고객사 ---------- */
.client-grid a { border: 1px solid var(--q-line); border-radius: 3px; }
.client-grid a:hover { border-color: var(--q-blue-lt); box-shadow: 0 3px 14px rgba(107,195,240,.18); }
.client-grid img { filter: grayscale(1); opacity: .82; }
.map-link { border-radius: 3px; border-color: var(--q-line); }
/* ---------- 푸터 ---------- */
.site-footer { background: #3a4550; }
.site-footer a:hover { color: var(--q-blue-lt); }
.foot-kolas strong { color: var(--q-blue-lt); }
/* ---------- 반응형 ---------- */
@media (max-width: 1040px) {
.container { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 768px) {
body { font-size: 15px; }
.site-header .container { min-height: 64px; }
.logo img { height: 34px; }
.page-hero .container { min-height: 132px; }
.page-hero h1, .page-hero .page-hero-t { font-size: 27px; }
.svc h2 { font-size: 20px; margin: 46px 0 22px; }
.svc-lead { font-size: 15px; padding: 20px; margin-bottom: 38px; }
.svc-chips { justify-content: flex-start; }
.svc-chips li { font-size: 13.5px; padding: 8px 13px; }
.svc-table { font-size: 14px; }
.greeting .greet-open { font-size: 19px; }
.greeting p { font-size: 15px; line-height: 1.9; }
}
/* =========================================================
메인 페이지
========================================================= */
.q-hero { position: relative; overflow: hidden; background: #1b2733; }
.q-hero-bg {
position: absolute; inset: 0;
background: url('/assets/img/hero.jpg') center 42% / cover no-repeat;
}
.q-hero::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(95deg, rgba(14,22,30,.90) 0%, rgba(14,22,30,.74) 46%, rgba(14,22,30,.42) 100%);
}
.q-hero .container {
position: relative; z-index: 2;
min-height: 460px; display: flex; flex-direction: column; justify-content: center;
padding-top: 60px; padding-bottom: 60px;
}
.q-hero-eyebrow {
margin: 0 0 20px; font-size: 13px; font-weight: 500; letter-spacing: .06em;
color: var(--q-blue-br); text-transform: uppercase;
}
.q-hero-title {
margin: 0; color: #fff; font-size: 50px; font-weight: 700; line-height: 1.16;
letter-spacing: -0.02em; font-family: Poppins, "Noto Sans KR", sans-serif;
}
.q-hero-title em { font-style: normal; font-weight: 300; color: rgba(255,255,255,.82); }
.q-hero-sub {
margin: 26px 0 0; font-size: 18px; font-weight: 400; color: rgba(255,255,255,.88);
letter-spacing: -0.02em;
}
/* 빠른 문의 밴드 */
.q-quick { background: var(--q-blue); color: #fff; }
.q-quick .container { display: flex; flex-wrap: wrap; gap: 24px 60px; padding-top: 34px; padding-bottom: 34px; }
.q-quick-item { flex: 1 1 320px; }
.q-quick-label { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.q-quick-item p { margin: 0 0 4px; font-size: 14.5px; color: rgba(255,255,255,.88); }
.q-quick-btn {
display: inline-block; margin-top: 12px; padding: 10px 24px; border: 1px solid rgba(255,255,255,.65);
border-radius: 3px; color: #fff; font-size: 14px; font-weight: 500;
}
.q-quick-btn:hover { background: #fff; color: var(--q-blue); text-decoration: none; }
.q-quick-contact { text-align: right; }
.q-tel a { font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.q-mail a { font-size: 15px; color: rgba(255,255,255,.9); }
.q-tel a:hover, .q-mail a:hover { text-decoration: none; opacity: .85; }
/* 섹션 제목 */
.q-sec-title {
text-align: center; font-size: 30px; font-weight: 700; color: var(--q-heading);
letter-spacing: -0.035em; margin: 0 0 40px; line-height: 1.35;
}
.q-sec-title span {
display: block; font-family: Poppins, sans-serif; font-size: 13px; font-weight: 600;
color: var(--q-blue-lt); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px;
}
/* 회사 소개 */
.q-about { padding: 86px 20px 20px; }
.q-about-body { max-width: 820px; margin: 0 auto; text-align: center; }
.q-about-lead { font-size: 21px; font-weight: 500; color: var(--q-heading); margin: 0 0 22px; letter-spacing: -0.03em; }
.q-about-body p { font-size: 16px; line-height: 1.95; color: var(--q-text); margin: 0 0 16px; }
.q-more {
display: inline-block; margin-top: 18px; padding: 12px 30px; border: 1px solid #d5dde3;
border-radius: 3px; font-size: 14.5px; font-weight: 500; color: var(--q-heading);
}
.q-more:hover { border-color: var(--q-blue); color: var(--q-blue); text-decoration: none; }
/* 서비스 */
.q-services { background: #f7f9fb; padding: 82px 0; margin-top: 76px; }
.q-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.q-svc-card {
position: relative; display: block; background: #fff; border: 1px solid #e8edf1; border-radius: 4px;
padding: 26px 24px 52px; transition: border-color .16s, box-shadow .16s, transform .16s;
}
.q-svc-card:hover { border-color: var(--q-blue-lt); box-shadow: 0 10px 28px rgba(0,80,130,.09); transform: translateY(-2px); text-decoration: none; }
.q-svc-group { display: block; font-size: 11.5px; font-weight: 500; color: var(--q-blue-lt); letter-spacing: .04em; margin-bottom: 9px; }
.q-svc-card h3 { margin: 0 0 15px; font-size: 18px; font-weight: 700; color: var(--q-heading); letter-spacing: -0.03em; line-height: 1.4; }
.q-svc-card ul { margin: 0; padding: 0; list-style: none; }
.q-svc-card li { position: relative; padding-left: 11px; font-size: 13.5px; line-height: 1.85; color: var(--q-text); }
.q-svc-card li::before { content: ''; position: absolute; left: 0; top: 11px; width: 3px; height: 3px; background: var(--q-blue-lt); }
.q-svc-arrow { position: absolute; left: 24px; bottom: 22px; font-size: 16px; color: #c8d2da; transition: color .16s, transform .16s; }
.q-svc-card:hover .q-svc-arrow { color: var(--q-blue); transform: translateX(3px); }
/* 숫자 */
.q-stats { background: #3a4550; }
.q-stats .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 46px; padding-bottom: 46px; }
.q-stat { text-align: center; color: #fff; }
.q-stat strong { display: block; font-family: Poppins, sans-serif; font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--q-blue-br); letter-spacing: -0.02em; }
.q-stat span { display: block; margin-top: 9px; font-size: 13.5px; color: rgba(255,255,255,.72); letter-spacing: -0.01em; }
/* 고객사 · 공지 */
.q-clients { padding: 86px 20px 0; }
.q-notice { padding: 82px 20px 90px; }
.q-notice-list { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; border-top: 1px solid var(--q-line); }
.q-notice-list li { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 4px; border-bottom: 1px solid var(--q-line); }
.q-notice-list a { color: var(--q-text); font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-notice-list a:hover { color: var(--q-blue); text-decoration: none; }
.q-notice-list time { flex: none; font-size: 13px; color: var(--q-muted); }
@media (max-width: 1040px) {
.q-svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.q-hero-title { font-size: 30px; }
.q-hero-sub { font-size: 15.5px; margin-top: 18px; }
.q-hero-eyebrow { font-size: 11.5px; margin-bottom: 14px; }
.q-quick .container { flex-direction: column; gap: 22px; }
.q-quick-contact { text-align: left; }
.q-tel a { font-size: 25px; }
.q-sec-title { font-size: 22px; margin-bottom: 30px; }
.q-about { padding-top: 56px; }
.q-about-lead { font-size: 17.5px; }
.q-about-body p { font-size: 15px; }
.q-services { padding: 54px 0; margin-top: 50px; }
.q-svc-grid { grid-template-columns: 1fr; gap: 12px; }
.q-stats .container { grid-template-columns: repeat(2, 1fr); gap: 26px; }
.q-stat strong { font-size: 30px; }
.q-clients { padding-top: 56px; }
.q-notice { padding: 54px 20px 60px; }
}
/* =========================================================
히어로 슬라이더 — 기존 사이트 슬라이드 3장, 세로로 더 길게
========================================================= */
.q-hero-bg { display: none; } /* 구버전 단일 배경 비활성화 */
.q-hero-slides { position: absolute; inset: 0; z-index: 0; }
.q-slide {
position: absolute; inset: 0;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0;
transform: scale(1.06);
transition: opacity 1.1s ease, transform 7.4s ease-out;
will-change: opacity, transform;
}
.q-slide.is-active { opacity: 1; transform: scale(1); }
.q-hero .container { min-height: 780px; } /* PC — 기존 사이트 약 490px 대비 대폭 확대 */
.q-hero-dots {
position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3;
display: flex; justify-content: center; gap: 9px;
}
.q-hero-dots button {
width: 30px; height: 3px; padding: 0; border: 0; cursor: pointer;
background: rgba(255,255,255,.34); transition: background .2s, width .2s;
}
.q-hero-dots button:hover { background: rgba(255,255,255,.6); }
.q-hero-dots button.is-active { background: var(--q-blue-br); width: 46px; }
@media (max-width: 1040px) {
.q-hero .container { min-height: 560px; }
}
@media (max-width: 768px) {
.q-hero .container { min-height: 460px; }
.q-hero-dots { bottom: 18px; }
.q-hero-dots button { width: 22px; }
.q-hero-dots button.is-active { width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
.q-slide { transition: opacity .3s ease; transform: none; }
.q-slide.is-active { transform: none; }
}
/* =========================================================
업무문의 / 고객문의 — 히어로 위에 얹히는 카드형
========================================================= */
.q-quick {
background: transparent; /* 밴드 배경 해제 */
position: relative;
z-index: 5;
margin-top: -104px; /* 히어로 하단에 겹침 */
pointer-events: none; /* 빈 여백은 히어로 조작(호버 정지) 통과 */
}
.q-quick .container { padding-top: 0; padding-bottom: 0; display: block; }
.q-quick-inner {
pointer-events: auto;
background: var(--q-blue);
box-shadow: 0 20px 44px rgba(0, 62, 96, .30);
border-radius: 4px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px 56px;
padding: 34px 42px;
}
.q-quick-item { flex: 1 1 320px; }
/* 겹치는 만큼 히어로 텍스트가 가려지지 않도록 여백 보정 */
.q-hero .container { padding-bottom: 150px; }
/* 카드가 튀어나온 만큼 다음 섹션 간격 축소 */
.q-about { padding-top: 76px; }
@media (max-width: 1040px) {
.q-quick { margin-top: -88px; }
.q-quick-inner { padding: 30px 32px; }
.q-hero .container { padding-bottom: 132px; }
}
@media (max-width: 768px) {
.q-quick { margin-top: -56px; }
.q-quick-inner { padding: 24px 22px; gap: 20px; border-radius: 3px; box-shadow: 0 12px 28px rgba(0,62,96,.26); }
.q-hero .container { padding-bottom: 96px; }
.q-about { padding-top: 52px; }
}
/* 문의 카드가 겹치므로 슬라이드 인디케이터를 카드 위로 올림 */
.q-hero-dots { bottom: 132px; }
@media (max-width: 1040px) { .q-hero-dots { bottom: 116px; } }
@media (max-width: 768px) { .q-hero-dots { bottom: 74px; } }
/* =========================================================
업무문의 / 고객문의 — 독립 2카드, 반투명 글래스, 히어로 안쪽에 얹힘
(앞선 .q-quick-inner 규칙을 대체)
========================================================= */
.q-quick-inner { display: contents; } /* 구버전 래퍼 무력화 */
.q-quick {
background: transparent;
position: relative;
z-index: 5;
margin-top: -240px; /* 히어로 안쪽으로 완전히 들어오게 */
margin-bottom: 56px;
pointer-events: none;
}
.q-quick .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding-top: 0;
padding-bottom: 0;
align-items: stretch;
}
.q-quick-card {
pointer-events: auto;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 184px;
padding: 30px 34px;
color: #fff;
background: rgba(255, 255, 255, .09);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
backdrop-filter: blur(14px) saturate(1.15);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 5px;
transition: transform .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.q-quick-card .q-quick-label { color: #fff; }
.q-quick-card p { color: rgba(255,255,255,.86); }
/* 업무문의 — 카드 전체가 링크, 호버 시 살짝 떠오름 */
a.q-quick-card { text-decoration: none; }
a.q-quick-card.is-ask:hover,
a.q-quick-card.is-ask:focus-visible {
transform: translateY(-9px);
background: rgba(255, 255, 255, .17);
border-color: rgba(255, 255, 255, .46);
box-shadow: 0 22px 44px rgba(0, 0, 0, .34);
text-decoration: none;
}
a.q-quick-card.is-ask:focus-visible { outline: 2px solid var(--q-blue-br); outline-offset: 3px; }
.q-quick-card .q-quick-btn {
align-self: flex-start;
background: transparent;
border: 1px solid rgba(255,255,255,.55);
}
a.q-quick-card.is-ask:hover .q-quick-btn { background: #fff; color: var(--q-blue); border-color: #fff; }
/* 고객문의 */
.q-quick-card.is-contact { text-align: right; }
.q-quick-card.is-contact .q-tel a { font-size: 32px; }
/* 히어로가 카드를 품도록 하단 여백 확보 */
.q-hero .container { padding-bottom: 288px; }
.q-about { padding-top: 70px; }
@media (max-width: 1040px) {
.q-quick { margin-top: -224px; margin-bottom: 48px; }
.q-quick-card { padding: 26px 26px; min-height: 172px; }
.q-quick-card.is-contact .q-tel a { font-size: 27px; }
.q-hero .container { padding-bottom: 264px; }
}
@media (max-width: 768px) {
/* 모바일 — 히어로에 다 담기 어려우므로 다크 배경 위에 카드 배치 */
.q-quick { margin-top: 0; margin-bottom: 0; background: #1b2733; padding: 22px 0 26px; }
.q-quick .container { grid-template-columns: 1fr; gap: 12px; }
.q-quick-card { min-height: 0; padding: 22px 20px; }
.q-quick-card.is-contact { text-align: left; }
.q-quick-card.is-contact .q-tel a { font-size: 25px; }
a.q-quick-card.is-ask:hover { transform: none; }
.q-hero .container { padding-bottom: 96px; }
.q-about { padding-top: 52px; }
}
/* =========================================================
히어로 밝기 — 기존 사이트처럼 사진을 밝게
(기존 사이트는 오버레이 없음. 텍스트 가독성만 최소한으로 확보)
========================================================= */
.q-hero::after {
background:
/* 좌측: 제목 영역만 옅게 */
linear-gradient(95deg, rgba(8,14,20,.46) 0%, rgba(8,14,20,.22) 46%, rgba(8,14,20,0) 78%),
/* 하단: 글래스 카드 가독성용 */
linear-gradient(to top, rgba(8,14,20,.52) 0%, rgba(8,14,20,.12) 30%, rgba(8,14,20,0) 48%);
}
.q-hero-eyebrow { text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.q-hero-title { text-shadow: 0 2px 18px rgba(0,0,0,.42); }
.q-hero-sub { text-shadow: 0 1px 12px rgba(0,0,0,.48); }
.q-quick-card { text-shadow: 0 1px 8px rgba(0,0,0,.28); }
.q-quick-card .q-tel a { text-shadow: 0 2px 12px rgba(0,0,0,.34); }
@media (max-width: 768px) {
/* 모바일은 카드가 다크 배경 위 → 그림자 불필요 */
.q-quick-card, .q-quick-card .q-tel a { text-shadow: none; }
}
/* 카드가 히어로 안에 완전히 들어오도록 최종 보정 + 인디케이터 재배치 */
.q-quick { margin-top: -283px; margin-bottom: 40px; }
.q-hero .container { padding-bottom: 330px; }
.q-hero-dots { bottom: 18px; }
@media (max-width: 1040px) {
.q-quick { margin-top: -266px; margin-bottom: 36px; }
.q-hero .container { padding-bottom: 306px; }
.q-hero-dots { bottom: 16px; }
}
@media (max-width: 768px) {
.q-quick { margin-top: 0; margin-bottom: 0; }
.q-hero .container { padding-bottom: 96px; }
.q-hero-dots { bottom: 24px; }
}
/* 문의 카드 — 본문 컨테이너(1009px)보다 넓게 */
.q-quick .container { max-width: 1180px; gap: 24px; }
.q-quick-card { padding: 32px 40px; }
@media (max-width: 1240px) {
.q-quick .container { max-width: none; padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 1040px) {
.q-quick .container { padding-left: 20px; padding-right: 20px; gap: 18px; }
.q-quick-card { padding: 26px 28px; }
}
@media (max-width: 768px) {
.q-quick-card { padding: 22px 20px; }
}
/* =========================================================
컨테이너 폭 1400px (기존 1009px → 확대)
========================================================= */
:root { --q-container: 1400px; }
.svc { max-width: var(--q-container); }
/* 문의 카드도 본문 컨테이너와 같은 폭으로 */
.q-quick .container { max-width: var(--q-container); }
/* 화면이 컨테이너보다 좁아질 때 좌우 여백 확보 */
@media (max-width: 1440px) {
.container { padding-left: 24px; padding-right: 24px; }
.q-quick .container { max-width: none; padding-left: 24px; padding-right: 24px; }
}
/* 본문 가독성: 긴 문단은 과하게 넓어지지 않도록 제한 */
.svc-lead { max-width: 1120px; }
.greeting p { max-width: 980px; }
.q-notice-list { max-width: 920px; }
/* =========================================================
문의 카드 — 히어로 하단 경계에 "걸치게" (절반 겹침)
흰 배경 위로도 나오므로 다크 반투명 글래스로 변경
========================================================= */
.q-quick {
margin-top: -122px; /* 카드 높이의 약 절반만 히어로에 걸침 */
margin-bottom: 64px;
}
.q-hero .container { padding-bottom: 170px; }
.q-hero-dots { bottom: 150px; }
.q-quick-card {
background: rgba(22, 32, 42, .62);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
backdrop-filter: blur(16px) saturate(1.2);
border: 1px solid rgba(255, 255, 255, .18);
box-shadow: 0 16px 38px rgba(0, 30, 48, .22);
}
a.q-quick-card.is-ask:hover,
a.q-quick-card.is-ask:focus-visible {
background: rgba(0, 124, 180, .72);
border-color: rgba(255, 255, 255, .42);
box-shadow: 0 26px 52px rgba(0, 30, 48, .34);
}
@media (max-width: 1040px) {
.q-quick { margin-top: -110px; margin-bottom: 54px; }
.q-hero .container { padding-bottom: 156px; }
.q-hero-dots { bottom: 136px; }
}
@media (max-width: 768px) {
/* 모바일은 겹치지 않고 다크 띠 위에 배치 (기존 유지) */
.q-quick { margin-top: 0; margin-bottom: 0; }
.q-hero .container { padding-bottom: 96px; }
.q-hero-dots { bottom: 24px; }
.q-quick-card { box-shadow: none; }
}
/* 업무문의 — 라벨과 바로가기 버튼을 한 줄에 */
.q-quick-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 12px;
}
.q-quick-head .q-quick-label { margin-bottom: 0; }
.q-quick-card .q-quick-btn {
align-self: auto;
margin-top: 0;
flex: none;
white-space: nowrap;
padding: 10px 22px;
}
.q-quick-card.is-ask p { margin: 0; }
@media (max-width: 768px) {
.q-quick-head { gap: 12px; margin-bottom: 10px; }
.q-quick-card .q-quick-btn { padding: 9px 16px; font-size: 13px; }
}
/* =========================================================
문의 카드 내부 — 기존 홈페이지 구조 (support-1 | support-2)
========================================================= */
.q-quick-head { display: contents; } /* 직전 래퍼 무력화 */
.q-quick-card {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.q-support-1 { display: block; flex: 1 1 auto; min-width: 0; }
.q-support-2 { display: block; flex: none; }
.q-support-1 .q-quick-label { display: block; margin-bottom: 8px; }
.q-quick-card.is-ask .q-support-1 p { margin: 0; font-size: 14.5px; }
/* 고객문의 — TEL / E-Mail 접두 라벨 */
.q-quick-card.is-contact { text-align: left; }
.q-quick-card.is-contact .q-support-2 { text-align: right; }
.q-quick-card.is-contact .q-tel,
.q-quick-card.is-contact .q-mail { margin: 0; }
.q-quick-card.is-contact .q-mail { margin-top: 10px; }
.q-pre {
font-size: 12.5px; font-weight: 500; letter-spacing: .08em;
color: rgba(255,255,255,.62); margin-right: 6px; vertical-align: middle;
}
.q-quick-card.is-contact .q-tel a { font-size: 32px; vertical-align: middle; }
.q-quick-card.is-contact .q-mail a { font-size: 15px; }
@media (max-width: 1040px) {
.q-quick-card { gap: 18px; }
.q-quick-card.is-contact .q-tel a { font-size: 26px; }
}
@media (max-width: 768px) {
.q-quick-card { flex-direction: column; align-items: flex-start; gap: 14px; }
.q-support-2 { width: 100%; }
.q-quick-card.is-contact .q-support-2 { text-align: left; }
.q-quick-card.is-contact .q-tel a { font-size: 25px; }
}
/* 바로가기 버튼 — 크게 */
.q-quick-card .q-quick-btn {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
padding: 18px 46px;
border-width: 2px;
border-radius: 4px;
line-height: 1.2;
}
a.q-quick-card.is-ask:hover .q-quick-btn { box-shadow: 0 6px 18px rgba(0,0,0,.20); }
@media (max-width: 1040px) {
.q-quick-card .q-quick-btn { font-size: 15.5px; padding: 15px 34px; }
}
@media (max-width: 768px) {
.q-quick-card .q-quick-btn {
font-size: 15.5px; padding: 15px 20px;
display: block; width: 100%; text-align: center;
}
}
/* 업무문의 / 고객문의 라벨 — 크게 */
.q-quick-card .q-quick-label {
font-size: 27px;
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.3;
}
.q-quick-card.is-ask .q-support-1 p { font-size: 15.5px; }
@media (max-width: 1040px) {
.q-quick-card .q-quick-label { font-size: 23px; }
.q-quick-card.is-ask .q-support-1 p { font-size: 14.5px; }
}
@media (max-width: 768px) {
.q-quick-card .q-quick-label { font-size: 21px; }
}
/* 카드 높이 변경(184px)에 맞춰 걸침 비율 50:50 재조정 */
.q-quick { margin-top: -92px; margin-bottom: 72px; }
.q-hero-dots { bottom: 128px; }
@media (max-width: 1040px) {
.q-quick { margin-top: -86px; margin-bottom: 60px; }
.q-hero-dots { bottom: 118px; }
}
@media (max-width: 768px) {
.q-quick { margin-top: 0; margin-bottom: 0; }
.q-hero-dots { bottom: 24px; }
}
/* =========================================================
히어로 카피 — 슬라이드별 서브카피 + 좌/우 교차 정렬 (원본 구조)
원본: Reliability Solution(굵게) / Provider for · World Best Product(얇게)
========================================================= */
.q-hero .container { position: relative; display: block; }
.q-hero-cap {
position: absolute;
left: 24px; right: 24px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
transition: opacity .7s ease, visibility .7s;
}
.q-hero-cap.is-active { opacity: 1; visibility: visible; }
.q-hero-cap.is-right { text-align: left; } /* 원본 text-lg-right = 콘텐츠 우측 배치 */
.q-hero-cap.is-left { text-align: left; }
@media (min-width: 1041px) {
.q-hero-cap.is-right { text-align: right; }
.q-hero-cap.is-left { text-align: left; }
}
.q-hero-title {
margin: 0;
font-weight: 700;
text-transform: uppercase;
}
.q-hero-title em {
font-style: normal;
font-weight: 300; /* Provider for + World Best Product 얇게 */
color: rgba(255,255,255,.90);
}
.q-hero-sub { margin-top: 34px; font-weight: 400; }
.q-hero-sub strong { display: inline-block; font-weight: 700; margin-top: 2px; }
/* 히어로가 절대배치 캡션을 담도록 최소 높이 보장 */
.q-hero .container { min-height: 780px; }
@media (max-width: 1040px) { .q-hero .container { min-height: 560px; } }
@media (max-width: 768px) { .q-hero .container { min-height: 460px; } .q-hero-cap { left: 20px; right: 20px; } }
/* =========================================================
히어로 서브카피 — 폰트 확대 + 아래에서 위로 올라오는 등장
========================================================= */
.q-hero-sub {
font-size: 25px;
font-weight: 400;
line-height: 1.45;
margin-top: 38px;
color: rgba(255,255,255,.92);
}
.q-hero-sub strong {
display: inline-block;
margin-top: 6px;
font-size: 32px;
font-weight: 700;
letter-spacing: -0.02em;
color: #fff;
}
/* 등장 모션 — 비활성 상태에서 아래로 내려가 있다가 활성화되면 올라옴 */
.q-hero-cap .q-hero-eyebrow,
.q-hero-cap .q-hero-title,
.q-hero-cap .q-hero-sub {
opacity: 0;
transform: translateY(26px);
}
.q-hero-cap.is-active .q-hero-eyebrow,
.q-hero-cap.is-active .q-hero-title,
.q-hero-cap.is-active .q-hero-sub {
opacity: 1;
transform: translateY(0);
}
.q-hero-cap .q-hero-eyebrow { transition: opacity .6s ease .10s, transform .7s cubic-bezier(.22,.8,.3,1) .10s; }
.q-hero-cap .q-hero-title { transition: opacity .6s ease .22s, transform .8s cubic-bezier(.22,.8,.3,1) .22s; }
.q-hero-cap .q-hero-sub { opacity: 0; transform: translateY(40px);
transition: opacity .7s ease .42s, transform .9s cubic-bezier(.22,.8,.3,1) .42s; }
.q-hero-cap.is-active .q-hero-sub { opacity: 1; transform: translateY(0); }
@media (max-width: 1040px) {
.q-hero-sub { font-size: 21px; margin-top: 30px; }
.q-hero-sub strong { font-size: 26px; }
}
@media (max-width: 768px) {
.q-hero-sub { font-size: 17px; margin-top: 22px; }
.q-hero-sub strong { font-size: 21px; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.q-hero-cap .q-hero-eyebrow,
.q-hero-cap .q-hero-title,
.q-hero-cap .q-hero-sub { transform: none !important; transition: opacity .3s ease !important; }
}
/* 히어로 세로 길이 추가 확대 */
.q-hero .container { min-height: 880px; }
@media (max-width: 1040px) { .q-hero .container { min-height: 620px; } }
@media (max-width: 768px) { .q-hero .container { min-height: 500px; } }
/* =========================================================
Welcome to QRAPS — 원본 구조 (배경 이미지 좌측 + 텍스트 우측)
원본: about-1.jpg, background-size: auto 100%, 좌측 컬럼 비움
========================================================= */
.q-about {
position: relative;
padding: 96px 0 104px;
background-image: url('/assets/img/about.jpg');
background-repeat: no-repeat;
background-position: left center;
background-size: auto 100%;
overflow: hidden;
}
.q-about::after { /* 우측으로 흰색 페이드 — 텍스트 가독성 */
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.72) 42%, #fff 58%);
pointer-events: none;
}
.q-about .container {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
text-align: left;
}
.q-about-spacer { display: block; }
.q-about-title {
margin: 0 0 30px;
font-size: 42px; font-weight: 700; color: var(--q-heading);
letter-spacing: -0.035em; line-height: 1.2;
}
.q-about-title span {
display: block; font-family: Poppins, sans-serif;
font-size: 30px; font-weight: 300; color: var(--q-text);
letter-spacing: -0.02em; margin-bottom: 2px;
}
.q-about-body { max-width: none; margin: 0; text-align: left; }
.q-about-body .q-about-lead {
font-size: 21px; font-weight: 500; color: var(--q-heading);
margin: 0 0 20px; letter-spacing: -0.03em; line-height: 1.55;
}
.q-about-body p { font-size: 15.5px; line-height: 1.9; color: var(--q-text); margin: 0 0 15px; }
.q-about-sign {
margin-top: 26px !important;
font-weight: 700 !important; color: var(--q-heading) !important; font-size: 16px !important;
}
.q-about .q-more { margin-top: 22px; }
@media (max-width: 1040px) {
.q-about { padding: 68px 0 76px; background-size: cover; background-position: left top; }
.q-about::after { background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.93) 26%, #fff 46%); }
.q-about .container { grid-template-columns: 1fr; gap: 0; }
.q-about-spacer { display: none; }
.q-about-title { font-size: 34px; }
.q-about-title span { font-size: 24px; }
}
@media (max-width: 768px) {
.q-about { padding: 54px 0 60px; }
.q-about-title { font-size: 27px; margin-bottom: 22px; }
.q-about-title span { font-size: 19px; }
.q-about-body .q-about-lead { font-size: 17.5px; }
.q-about-body p { font-size: 15px; }
}
/* Welcome 섹션 — 이미지 더 크게 */
.q-about {
padding: 130px 0 140px; /* 섹션이 커지면 auto 100% 배경도 함께 확대 */
min-height: 860px;
display: flex;
align-items: center;
}
.q-about > .container { width: 100%; }
.q-about::after { /* 흰색 페이드 시작점을 오른쪽으로 → 이미지 노출 확대 */
background: linear-gradient(90deg,
rgba(255,255,255,0) 40%,
rgba(255,255,255,.55) 56%,
rgba(255,255,255,.92) 68%,
#fff 78%);
}
.q-about .container { grid-template-columns: 0.92fr 1.08fr; }
@media (max-width: 1040px) {
.q-about {
padding: 72px 0 80px; min-height: 0; display: block;
background-size: cover; background-position: left top;
}
.q-about::after { background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.92) 28%, #fff 48%); }
.q-about .container { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.q-about { padding: 56px 0 62px; }
}
/* Welcome 섹션 — 이미지는 크게 유지하되 텍스트 영역은 흰 배경 확보 */
.q-about::after {
background: linear-gradient(90deg,
rgba(255,255,255,0) 28%,
rgba(255,255,255,.55) 38%,
rgba(255,255,255,.95) 46%,
#fff 52%);
}
@media (max-width: 1040px) {
.q-about::after { background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.92) 28%, #fff 48%); }
}
/* 문의 카드 아래 흰 공간 제거 — Welcome 섹션을 히어로 하단에 바로 붙임
(카드 하단 절반이 Welcome 배경 이미지 위에 얹힘) */
.q-quick { margin-bottom: -92px; }
.q-about { padding-top: 222px; } /* 기존 130 + 카드 돌출분 92 */
@media (max-width: 1040px) {
.q-quick { margin-bottom: -86px; }
.q-about { padding-top: 158px; } /* 72 + 86 */
}
@media (max-width: 768px) {
.q-quick { margin-bottom: 0; }
.q-about { padding-top: 56px; }
}
/* 고객문의 카드 — 호버 시 배경색 변경 (업무문의와 동일 색) */
.q-quick-card.is-contact:hover,
.q-quick-card.is-contact:focus-within {
background: rgba(0, 124, 180, .72);
border-color: rgba(255, 255, 255, .42);
box-shadow: 0 26px 52px rgba(0, 30, 48, .34);
}
.q-quick-card.is-contact:hover .q-pre { color: rgba(255,255,255,.85); }
/* Welcome to QRAPS — 한 줄로 */
.q-about-title span {
display: inline;
font-size: inherit;
margin: 0 .28em 0 0;
}
/* =========================================================
Welcome · 인사말 — 자연스러운 줄바꿈 (언어별)
========================================================= */
.q-about-body p,
.greeting p {
text-wrap: pretty; /* 마지막 줄에 한두 글자만 남는 현상 방지 */
overflow-wrap: break-word;
}
.q-about-body .q-about-lead,
.q-about-title,
.greeting .greet-open {
text-wrap: balance; /* 짧은 제목·첫 문장은 줄 길이를 고르게 */
}
/* 한국어: 단어(띄어쓰기) 단위로만 줄바꿈 */
body.lang-kr .q-about-body,
body.lang-kr .greeting { word-break: keep-all; }
/* 일본어·중국어: 띄어쓰기가 없으므로 글자 단위 허용 + 문장부호가 줄 첫머리에 오지 않게 */
body.lang-jp .q-about-body, body.lang-jp .greeting,
body.lang-cn .q-about-body, body.lang-cn .greeting {
word-break: normal;
line-break: strict;
}
/* 영어: 단어 단위 (하이픈 자동 분리 없음) */
body.lang-en .q-about-body,
body.lang-en .greeting { word-break: normal; hyphens: manual; }
/* Welcome 본문 · 서명 폰트 확대 */
.q-about-body p { font-size: 17px; line-height: 1.9; }
.q-about-body .q-about-lead { font-size: 23px; line-height: 1.5; }
.q-about-body .q-about-sign { font-size: 19px !important; margin-top: 30px !important; }
@media (max-width: 1040px) {
.q-about-body p { font-size: 16px; }
.q-about-body .q-about-lead { font-size: 20px; }
.q-about-body .q-about-sign { font-size: 17.5px !important; }
}
@media (max-width: 768px) {
.q-about-body p { font-size: 15.5px; }
.q-about-body .q-about-lead { font-size: 18px; }
.q-about-body .q-about-sign { font-size: 16.5px !important; }
}
/* =========================================================
서비스 섹션 — 다크 배경 + 회로 격자 + 그룹 제목 + 아이콘 카드
========================================================= */
.q-services {
position: relative;
margin-top: 0; /* Welcome 과의 흰 공백 제거 */
padding: 110px 0 120px;
background-color: #131c25;
background-image:
radial-gradient(ellipse 60% 55% at 85% 0%, rgba(0,160,233,.20), transparent 70%),
radial-gradient(ellipse 50% 50% at 0% 100%, rgba(0,160,233,.12), transparent 70%),
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: auto, auto, 44px 44px, 44px 44px;
overflow: hidden;
}
.q-sec-title.is-light { color: #fff; margin-bottom: 64px; }
.q-sec-title.is-light span { color: var(--q-blue-br); }
.q-svc-block + .q-svc-block { margin-top: 64px; }
.q-svc-head {
display: flex; align-items: center; gap: 16px;
margin-bottom: 26px;
}
.q-svc-head-no {
font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600;
color: var(--q-blue-br); letter-spacing: .06em;
}
.q-svc-head h3 {
margin: 0; font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -0.03em;
white-space: nowrap;
}
.q-svc-head-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0)); }
.q-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.q-svc-card {
position: relative;
display: flex; flex-direction: column;
min-height: 320px;
padding: 32px 28px 28px;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.09);
border-radius: 6px;
color: #fff;
overflow: hidden;
transition: transform .28s cubic-bezier(.22,.8,.3,1), background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.q-svc-card::before { /* 상단 파란 선 — 호버 시 채워짐 */
content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
background: linear-gradient(90deg, var(--q-blue), var(--q-blue-br));
transform: scaleX(0); transform-origin: left; transition: transform .38s cubic-bezier(.22,.8,.3,1);
}
.q-svc-no {
position: absolute; right: 22px; top: 16px;
font-family: Poppins, sans-serif; font-size: 44px; font-weight: 700; line-height: 1;
color: rgba(255,255,255,.055); letter-spacing: -0.02em;
transition: color .28s ease;
}
.q-svc-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 54px; height: 54px; margin-bottom: 24px;
border-radius: 8px;
color: var(--q-blue-br);
background: rgba(0,160,233,.10);
border: 1px solid rgba(58,188,255,.28);
transition: background .28s ease, color .28s ease, border-color .28s ease;
}
.q-svc-card h4 {
margin: 0 0 16px; font-size: 20px; font-weight: 700; color: #fff;
letter-spacing: -0.03em; line-height: 1.35;
}
.q-svc-card ul { margin: 0 0 24px; padding: 0; list-style: none; }
.q-svc-card li {
position: relative; padding-left: 13px;
font-size: 14.5px; line-height: 1.85; color: rgba(255,255,255,.64);
}
.q-svc-card li::before {
content: ''; position: absolute; left: 0; top: .78em;
width: 4px; height: 4px; border-radius: 50%; background: var(--q-blue-br);
}
.q-svc-more {
margin-top: auto;
display: inline-flex; align-items: center; gap: 7px;
font-size: 14px; font-weight: 500; color: rgba(255,255,255,.55);
transition: color .28s ease, gap .28s ease;
}
.q-svc-arrow { display: none; } /* 구버전 화살표 숨김 */
.q-svc-card:hover,
.q-svc-card:focus-visible {
transform: translateY(-8px);
background: rgba(0,160,233,.10);
border-color: rgba(58,188,255,.50);
box-shadow: 0 24px 48px rgba(0,0,0,.35);
text-decoration: none;
}
.q-svc-card:hover::before, .q-svc-card:focus-visible::before { transform: scaleX(1); }
.q-svc-card:hover .q-svc-icon { background: var(--q-blue); border-color: var(--q-blue); color: #fff; }
.q-svc-card:hover .q-svc-no { color: rgba(58,188,255,.16); }
.q-svc-card:hover .q-svc-more { color: var(--q-blue-br); gap: 11px; }
.q-svc-card:focus-visible { outline: 2px solid var(--q-blue-br); outline-offset: 3px; }
/* 한국어 줄바꿈 */
body.lang-kr .q-svc-card { word-break: keep-all; }
@media (max-width: 1240px) {
.q-svc-grid { grid-template-columns: repeat(2, 1fr); }
.q-svc-card { min-height: 0; }
}
@media (max-width: 768px) {
.q-services { padding: 64px 0 70px; background-size: auto, auto, 32px 32px, 32px 32px; }
.q-sec-title.is-light { margin-bottom: 40px; }
.q-svc-block + .q-svc-block { margin-top: 44px; }
.q-svc-head h3 { font-size: 19px; }
.q-svc-grid { grid-template-columns: 1fr; gap: 12px; }
.q-svc-card { padding: 24px 22px 22px; }
.q-svc-icon { width: 46px; height: 46px; margin-bottom: 18px; }
.q-svc-no { font-size: 34px; }
.q-svc-card h4 { font-size: 18px; margin-bottom: 12px; }
.q-svc-card ul { margin-bottom: 16px; }
.q-svc-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.q-svc-card, .q-svc-card::before { transition: none; }
}
/* =========================================================
서비스 섹션 — 밝은 버전 (다크 → 라이트)
========================================================= */
.q-services {
background-color: #f2f6f9;
background-image:
radial-gradient(ellipse 60% 55% at 88% 0%, rgba(0,160,233,.10), transparent 70%),
radial-gradient(ellipse 50% 50% at 0% 100%, rgba(0,160,233,.07), transparent 70%),
linear-gradient(rgba(0,60,100,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,60,100,.045) 1px, transparent 1px);
}
.q-sec-title.is-light { color: var(--q-heading); }
.q-sec-title.is-light span { color: var(--q-blue); }
.q-svc-head-no { color: var(--q-blue); }
.q-svc-head h3 { color: #222; }
.q-svc-head-line { background: linear-gradient(90deg, rgba(0,40,70,.16), rgba(0,40,70,0)); }
.q-svc-card {
background: #fff;
border: 1px solid #e2e9ef;
box-shadow: 0 2px 10px rgba(20,50,80,.04);
color: var(--q-heading);
}
.q-svc-no { color: rgba(0,70,120,.06); }
.q-svc-icon {
color: var(--q-blue);
background: rgba(0,160,233,.08);
border-color: rgba(0,160,233,.22);
}
.q-svc-card h4 { color: #222; }
.q-svc-card li { color: #5d6873; }
.q-svc-card li::before { background: var(--q-blue); }
.q-svc-more { color: #8b97a2; }
.q-svc-card:hover,
.q-svc-card:focus-visible {
background: #fff;
border-color: rgba(0,160,233,.45);
box-shadow: 0 22px 44px rgba(0,60,100,.12);
}
.q-svc-card:hover .q-svc-icon { background: var(--q-blue); border-color: var(--q-blue); color: #fff; }
.q-svc-card:hover .q-svc-no { color: rgba(0,160,233,.14); }
.q-svc-card:hover .q-svc-more { color: var(--q-blue); }
/* 그룹 제목(01 신뢰성설계검증 / 02 신뢰성시험) 제거 → 8장이 한 그리드처럼 이어지도록 간격 통일 */
.q-svc-block + .q-svc-block { margin-top: 20px; }
@media (max-width: 768px) { .q-svc-block + .q-svc-block { margin-top: 12px; } }
/* 서비스 카드 그룹 배지 — 설계검증(파랑) / 신뢰성시험(주황) */
.q-svc-badge {
align-self: flex-start;
display: inline-block;
margin: 0 0 10px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.4;
white-space: nowrap;
}
.q-svc-badge.is-g1 { color: #0072a8; background: rgba(0,160,233,.10); border: 1px solid rgba(0,160,233,.25); }
.q-svc-badge.is-g2 { color: #b8360f; background: rgba(230,66,28,.08); border: 1px solid rgba(230,66,28,.22); }
.q-svc-icon { margin-bottom: 20px; }
@media (max-width: 768px) {
.q-svc-badge { font-size: 12px; padding: 3px 9px; margin-bottom: 8px; }
}
/* =========================================================
서비스 카드 — 호버 시 반전 컬러 (흰 카드 → 브랜드 블루 카드)
========================================================= */
.q-svc-card h4,
.q-svc-card li,
.q-svc-badge,
.q-svc-more { transition: color .28s ease, background .28s ease, border-color .28s ease; }
.q-svc-card li::before { transition: background .28s ease; }
.q-svc-card:hover,
.q-svc-card:focus-visible {
background: var(--q-blue);
border-color: var(--q-blue);
box-shadow: 0 24px 48px rgba(0,110,170,.28);
color: #fff;
}
.q-svc-card:hover::before,
.q-svc-card:focus-visible::before { background: rgba(255,255,255,.55); }
.q-svc-card:hover h4,
.q-svc-card:focus-visible h4 { color: #fff; }
.q-svc-card:hover li,
.q-svc-card:focus-visible li { color: rgba(255,255,255,.88); }
.q-svc-card:hover li::before,
.q-svc-card:focus-visible li::before { background: #fff; }
.q-svc-card:hover .q-svc-icon,
.q-svc-card:focus-visible .q-svc-icon { background: #fff; border-color: #fff; color: var(--q-blue); }
.q-svc-card:hover .q-svc-no,
.q-svc-card:focus-visible .q-svc-no { color: rgba(255,255,255,.22); }
.q-svc-card:hover .q-svc-more,
.q-svc-card:focus-visible .q-svc-more { color: #fff; }
.q-svc-card:hover .q-svc-badge,
.q-svc-card:focus-visible .q-svc-badge {
color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5);
}
.q-svc-card:focus-visible { outline-color: var(--q-heading); }
/* =========================================================
신뢰성 기술 영역 — 5단계 화살표 (기존 이미지 코드화)
노랑/파랑 교차, 맞물리는 부분 청록 마름모, 점선 + 점
========================================================= */
.q-range { padding: 100px 0 110px; background: #fff; }
.q-range .q-sec-title { margin-bottom: 56px; }
.q-range-wrap {
--ar-h: 104px; /* 화살표 높이 */
--ar-tip: 34px; /* 뾰족한 부분 깊이 */
--ar-ov: 18px; /* 이웃 칸으로 겹쳐 들어가는 폭 */
--c-y: #F2D400;
--c-b: #5AB9F5;
--c-mix: #4FB2AA;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
padding: 0 var(--ar-ov);
}
.q-range-item { position: relative; display: flex; flex-direction: column; align-items: center; }
.q-range-arrow {
position: relative;
align-self: stretch;
height: var(--ar-h);
margin: 0 calc(var(--ar-ov) * -1);
display: flex; align-items: center; justify-content: center;
padding: 0 calc(var(--ar-tip) + 12px);
clip-path: polygon(0 50%, var(--ar-tip) 0, calc(100% - var(--ar-tip)) 0, 100% 50%, calc(100% - var(--ar-tip)) 100%, var(--ar-tip) 100%);
text-align: center;
}
.q-range-item.is-y .q-range-arrow { background: var(--c-y); }
.q-range-item.is-b .q-range-arrow { background: var(--c-b); }
.q-range-arrow span {
font-family: Poppins, "Noto Sans KR", sans-serif;
font-size: 21px; font-weight: 700; line-height: 1.15;
color: #fff; letter-spacing: .01em;
text-shadow: 0 1px 3px rgba(0,0,0,.12);
}
/* 이웃 화살표가 맞물리는 청록 마름모 */
.q-range-item:not(:last-child)::after {
content: '';
position: absolute;
top: calc(var(--ar-h) / 2);
right: 0;
width: calc(var(--ar-ov) * 2);
height: calc(var(--ar-h) * var(--ar-ov) * 2 / var(--ar-tip) / 2);
height: 55px;
transform: translate(50%, -50%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
background: var(--c-mix);
z-index: 2;
}
.q-range-body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px; }
.q-range-line {
position: relative; display: block;
width: 0; height: 46px; margin: 2px 0 20px;
border-left: 2px dotted currentColor;
}
.q-range-line::after {
content: ''; position: absolute; left: -5px; bottom: -8px;
width: 8px; height: 8px; border-radius: 50%; background: currentColor;
}
.q-range-item.is-y .q-range-body { color: #D8A800; }
.q-range-item.is-b .q-range-body { color: #2E9CE6; }
.q-range-body h3 {
margin: 0 0 22px; font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: inherit;
}
.q-range-body ul { margin: 0; padding: 0; list-style: none; }
.q-range-body li { font-size: 15.5px; line-height: 1.75; color: #444; letter-spacing: -0.02em; }
body.lang-kr .q-range-body { word-break: keep-all; }
@media (max-width: 1240px) {
.q-range-wrap { --ar-h: 92px; --ar-tip: 28px; --ar-ov: 15px; }
.q-range-item:not(:last-child)::after { height: 50px; }
.q-range-arrow span { font-size: 17px; }
.q-range-body h3 { font-size: 16px; }
.q-range-body li { font-size: 14px; }
}
/* 태블릿·모바일: 세로로 쌓고 화살표는 아래를 향하게 */
@media (max-width: 900px) {
.q-range { padding: 64px 0 70px; }
.q-range .q-sec-title { margin-bottom: 36px; }
.q-range-wrap { grid-template-columns: 1fr; gap: 28px; padding: 0; }
.q-range-item:not(:last-child)::after { display: none; }
.q-range-arrow {
margin: 0; height: 70px; padding: 0 20px 12px;
clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
.q-range-arrow span { font-size: 18px; }
.q-range-line { height: 22px; margin: 4px 0 14px; }
.q-range-body h3 { margin-bottom: 12px; font-size: 17px; }
.q-range-body li { font-size: 14.5px; }
}
/* 기술 영역 제목 — 기존 사이트 그대로: "QRAPS" 굵게 + 뒤 문구 얇은 소문자 */
.q-range-title {
margin: 0 0 56px;
text-align: center;
font-family: "Noto Sans KR", Roboto, sans-serif;
font-size: 40px;
font-weight: 700;
color: var(--q-heading);
letter-spacing: -0.02em;
line-height: 1.3;
}
.q-range-title span { font-weight: 300; text-transform: lowercase; }
@media (max-width: 900px) {
.q-range-title { font-size: 26px; margin-bottom: 36px; }
}
/* =========================================================
숫자 섹션 — 기판 사진 배경 + 아이콘 + 카운팅
========================================================= */
.q-stats {
position: relative;
padding: 96px 0 100px;
background: #0f1821 url('/assets/img/slide3.jpg') center center / cover no-repeat;
background-attachment: fixed;
overflow: hidden;
}
.q-stats::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse 55% 80% at 50% 0%, rgba(0,160,233,.22), transparent 70%),
linear-gradient(110deg, rgba(9,16,24,.93) 0%, rgba(10,26,40,.86) 55%, rgba(9,16,24,.93) 100%);
}
.q-stats .container {
position: relative; z-index: 1;
display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
gap: 0; padding-top: 0; padding-bottom: 0;
}
.q-stat {
position: relative;
display: flex; flex-direction: column; align-items: center;
padding: 8px 20px; text-align: center; color: #fff;
opacity: 0; transform: translateY(24px);
transition: opacity .7s ease, transform .8s cubic-bezier(.22,.8,.3,1);
}
.q-stats.is-in .q-stat { opacity: 1; transform: none; }
.q-stats.is-in .q-stat:nth-child(2) { transition-delay: .1s; }
.q-stats.is-in .q-stat:nth-child(3) { transition-delay: .2s; }
.q-stats.is-in .q-stat:nth-child(4) { transition-delay: .3s; }
.q-stat + .q-stat::before {
content: ''; position: absolute; left: 0; top: 12%; bottom: 12%;
width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent);
}
.q-stat-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 66px; height: 66px; margin-bottom: 24px;
border-radius: 50%;
color: var(--q-blue-br);
background: rgba(0,160,233,.10);
border: 1px solid rgba(58,188,255,.38);
transition: background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
}
.q-stat:hover .q-stat-icon { background: var(--q-blue); border-color: var(--q-blue); color: #fff; transform: translateY(-4px); }
.q-stat-num {
display: flex; align-items: baseline; justify-content: center;
font-family: Poppins, "Noto Sans KR", sans-serif;
font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: -0.02em;
color: #fff; font-variant-numeric: tabular-nums;
}
.q-stat-pre { color: var(--q-blue-br); margin-right: 2px; }
.q-stat-unit {
margin-left: 6px; font-family: "Noto Sans KR", Poppins, sans-serif;
font-size: 20px; font-weight: 500; color: var(--q-blue-br); letter-spacing: 0;
}
.q-stat-bar {
display: block; width: 0; height: 2px; margin: 20px auto 16px;
background: var(--q-blue-br);
transition: width .9s cubic-bezier(.22,.8,.3,1) .5s;
}
.q-stats.is-in .q-stat-bar { width: 30px; }
.q-stats:not(.is-in) .q-stat-bar { width: 30px; } /* JS 미동작 시에도 표시 */
.q-stats.is-in:not(.is-done) .q-stat-bar { width: 0; }
.q-stats.is-done .q-stat-bar { width: 30px; }
.q-stat-label { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.74); letter-spacing: -0.02em; }
body.lang-kr .q-stat-label { word-break: keep-all; }
/* JS가 없거나 모션 최소화 설정이면 바로 보이게 */
@media (prefers-reduced-motion: reduce) {
.q-stat { opacity: 1; transform: none; transition: none; }
.q-stat-bar { width: 30px; transition: none; }
}
@media (max-width: 1040px) {
.q-stats { background-attachment: scroll; padding: 72px 0 76px; }
.q-stat-num { font-size: 46px; }
.q-stat-unit { font-size: 17px; }
}
@media (max-width: 768px) {
.q-stats .container { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 40px; }
.q-stat + .q-stat::before { display: none; }
.q-stat { padding: 0 8px; }
.q-stat-icon { width: 52px; height: 52px; margin-bottom: 16px; }
.q-stat-icon svg { width: 22px; height: 22px; }
.q-stat-num { font-size: 36px; }
.q-stat-unit { font-size: 14px; margin-left: 4px; }
.q-stat-bar { margin: 14px auto 10px; }
.q-stat-label { font-size: 13px; }
}
/* 안전장치: 스크립트가 준비된 경우(is-ready)에만 숨겼다가 등장 — JS 없으면 그대로 보임 */
.q-stat { opacity: 1; transform: none; }
.q-stats.is-ready:not(.is-in) .q-stat { opacity: 0; transform: translateY(24px); }
.q-stat-bar,
.q-stats:not(.is-in) .q-stat-bar,
.q-stats.is-done .q-stat-bar { width: 30px; }
.q-stats.is-ready:not(.is-done) .q-stat-bar { width: 0; }
/* 옛 숫자 섹션 규칙(.q-stat span 13.5px·block) 무력화 */
.q-stat span { display: inline; margin-top: 0; font-size: inherit; color: inherit; letter-spacing: inherit; }
.q-stat .q-stat-icon { display: inline-flex; }
.q-stat .q-stat-bar { display: block; }
.q-stat .q-stat-pre { color: var(--q-blue-br); }
.q-stat .q-stat-unit { font-size: 20px; color: var(--q-blue-br); letter-spacing: 0; }
@media (max-width: 1040px) { .q-stat .q-stat-unit { font-size: 17px; } }
@media (max-width: 768px) { .q-stat .q-stat-unit { font-size: 14px; } }
/* =========================================================
고객사 — 두 줄 양방향 로고 흐름 (마퀴)
========================================================= */
.q-clients {
padding: 104px 0 96px;
background: linear-gradient(180deg, #fff 0%, #f5f8fb 100%);
overflow: hidden;
}
.q-clients .container { padding-top: 0; }
.q-clients .q-sec-title { margin-bottom: 16px; }
.q-clients-intro {
margin: 0 auto 52px; max-width: 760px; text-align: center;
font-size: 17px; line-height: 1.7; color: var(--q-text); letter-spacing: -0.02em;
}
body.lang-kr .q-clients-intro { word-break: keep-all; }
.q-marquee {
display: flex; flex-direction: column; gap: 18px;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.q-marquee-row { overflow: hidden; padding: 10px 0; }
.q-marquee-track {
display: flex; gap: 18px; width: max-content;
margin: 0; padding: 0; list-style: none;
animation: q-marquee 46s linear infinite;
}
.q-marquee-row.is-reverse .q-marquee-track { animation-direction: reverse; animation-duration: 52s; }
.q-marquee-row:hover .q-marquee-track,
.q-marquee-row:focus-within .q-marquee-track { animation-play-state: paused; }
@keyframes q-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
.q-marquee-track li { margin: 0; flex: none; }
.q-logo {
display: flex; align-items: center; justify-content: center;
width: 220px; height: 108px; padding: 22px 30px;
background: #fff; border: 1px solid #e6ecf1; border-radius: 10px;
box-shadow: 0 2px 8px rgba(20,50,80,.03);
transition: transform .28s cubic-bezier(.22,.8,.3,1), border-color .28s ease, box-shadow .28s ease;
}
.q-logo img {
display: block; max-width: 100%; max-height: 50px; width: auto; height: auto; object-fit: contain;
filter: grayscale(1); opacity: .62;
transition: filter .3s ease, opacity .3s ease;
}
.q-logo:hover, .q-logo:focus-visible {
transform: translateY(-5px);
border-color: rgba(0,160,233,.45);
box-shadow: 0 16px 34px rgba(0,60,100,.12);
text-decoration: none;
}
.q-logo:hover img, .q-logo:focus-visible img { filter: none; opacity: 1; }
/* 로고 보정 */
.q-logo.is-multiply img { mix-blend-mode: multiply; }
.q-logo.is-invert img { filter: invert(1) grayscale(1); opacity: .62; }
.q-logo.is-invert:hover img,
.q-logo.is-invert:focus-visible img { filter: invert(1) hue-rotate(180deg); opacity: 1; }
.q-clients-more { text-align: center; margin-top: 44px; }
/* 모션 최소화: 흐름 대신 정적 격자 */
@media (prefers-reduced-motion: reduce) {
.q-marquee { -webkit-mask-image: none; mask-image: none; }
.q-marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding: 0 20px; }
.q-marquee-track li[aria-hidden="true"] { display: none; }
}
@media (max-width: 768px) {
.q-clients { padding: 64px 0 60px; }
.q-clients-intro { font-size: 15px; margin-bottom: 32px; padding: 0 4px; }
.q-marquee { gap: 10px; }
.q-marquee-track { gap: 10px; animation-duration: 34s; }
.q-marquee-row.is-reverse .q-marquee-track { animation-duration: 38s; }
@keyframes q-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 5px)); } }
.q-logo { width: 150px; height: 78px; padding: 14px 18px; border-radius: 8px; }
.q-logo img { max-height: 36px; }
.q-clients-more { margin-top: 30px; }
}
/* 메인 페이지: 마지막 섹션과 푸터 사이 흰 여백 제거 */
.site-main:has(.q-hero) + .site-footer { margin-top: 0; }
/* 푸터 로고 조금 작게 */
.foot-logo { height: 40px; }
@media (max-width: 768px) { .foot-logo { height: 34px; } }
/* 정사각형 아이콘형 로고(TKE)는 조금 크게 */
.q-logo.is-square img { max-height: 70px; }
@media (max-width: 768px) { .q-logo.is-square img { max-height: 50px; } }
/* =========================================================
파트너 로고 — 로고별 비율 보정 크기 (눈에 보이는 면적 균일화)
--lw / --lh 는 템플릿에서 로고마다 계산해 넣음
========================================================= */
.q-logo img,
.q-logo.is-square img {
width: var(--lw, auto);
height: var(--lh, auto);
max-width: none;
max-height: none;
object-fit: contain;
}
@media (max-width: 768px) {
.q-logo img,
.q-logo.is-square img {
width: calc(var(--lw, 100px) * .68);
height: calc(var(--lh, 30px) * .68);
}
}
/* 푸터 로고 원래 크기로 복원 */
.foot-logo { height: 52px; }
@media (max-width: 768px) { .foot-logo { height: 42px; } }
/* 파트너 로고 카드 높이 축소 (108px → 80px) */
.q-logo { height: 80px; padding: 14px 30px; }
@media (max-width: 768px) { .q-logo { height: 60px; padding: 10px 16px; } }
/* 고객사 자세히 보기 버튼 제거에 맞춰 하단 여백 조정 */
.q-clients { padding-bottom: 104px; }
@media (max-width: 768px) { .q-clients { padding-bottom: 64px; } }
/* 메인 섹션 제목 키움 — 30px → 40px (Welcome 42px · Technology Range 40px 와 맞춤) */
.q-sec-title { font-size: 40px; letter-spacing: -0.04em; line-height: 1.3; }
.q-sec-title span { font-size: 15px; letter-spacing: .16em; margin-bottom: 12px; }
@media (max-width: 1040px) {
.q-sec-title { font-size: 34px; }
}
@media (max-width: 768px) {
.q-sec-title { font-size: 27px; }
.q-sec-title span { font-size: 12.5px; margin-bottom: 8px; }
}
/* =========================================================
푸터 — 기존 qraps.co.kr 구조·색상 그대로
배경 #212121 / 글자 rgba(255,255,255,.5)
========================================================= */
.site-footer.q-foot {
background: #212121;
color: rgba(255,255,255,.5);
padding: 0;
font-size: 15px;
}
.q-foot a { color: rgba(255,255,255,.5); transition: color .2s ease; }
.q-foot a:hover { color: #fff; text-decoration: none; }
.q-foot-main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
padding-top: 60px;
padding-bottom: 54px;
}
.q-foot-brand .foot-logo { width: 200px; height: auto; display: block; }
.q-foot-kolas { margin: 16px 0 0; font-size: 13px; color: rgba(255,255,255,.4); }
.q-foot-kolas strong { color: rgba(255,255,255,.75); font-weight: 600; }
.q-foot-title {
margin: 4px 0 22px;
font-size: 15px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: #fff;
}
.q-foot-contact { font-style: normal; display: flex; flex-direction: column; gap: 10px; line-height: 1.6; }
.q-foot-contact .q-foot-tel { font-size: 18px; font-weight: 700; color: rgba(255,255,255,.8); }
body.lang-kr .q-foot-addr { word-break: keep-all; }
.q-foot-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.q-foot-links ul { margin: 0; padding: 0; list-style: none; }
.q-foot-links li { position: relative; padding-left: 16px; margin: 0 0 10px; line-height: 1.5; }
.q-foot-links li::before {
content: ''; position: absolute; left: 0; top: .62em;
width: 5px; height: 5px;
border-top: 1.5px solid rgba(255,255,255,.35); border-right: 1.5px solid rgba(255,255,255,.35);
transform: rotate(45deg);
}
.q-foot-hr { margin: 0; border: 0; border-top: 1px solid rgba(255,255,255,.1); }
.q-foot-copy { padding-top: 22px; padding-bottom: 26px; text-align: center; }
.q-foot-copy p { margin: 0; }
.q-foot-biz { font-size: 13px; color: rgba(255,255,255,.38); margin-bottom: 6px !important; }
.q-foot-biz span::before { content: '·'; margin: 0 8px; }
.q-foot-rights { font-size: 14px; color: #fff; }
.q-foot-rights a { color: rgba(255,255,255,.5); margin-left: 4px; }
/* 이전 푸터 규칙 무력화 */
.q-foot .foot-top, .q-foot .foot-bottom { display: none; }
@media (max-width: 1040px) {
.q-foot-main { grid-template-columns: 1fr 1fr; }
.q-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
.q-foot-main { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; padding-bottom: 34px; }
.q-foot-links { display: none; } /* 기존 사이트: 모바일에서 Quick links 숨김 */
.q-foot-brand .foot-logo { width: 160px; }
.q-foot-title { margin-bottom: 14px; }
.q-foot-copy { padding-top: 18px; padding-bottom: 22px; }
.q-foot-biz span { display: block; }
.q-foot-biz span::before { content: none; }
}
/* 푸터 본문 왼쪽 정렬 (기본 푸터의 가운데 정렬 무력화) — 저작권 줄만 가운데 */
.q-foot-main, .q-foot-main * { text-align: left; }
.q-foot-copy, .q-foot-copy p { text-align: center; }
/* 푸터 회사정보 (CONTACT US 자리) */
.q-foot-info dl { margin: 4px 0 0; display: flex; flex-direction: column; gap: 9px; }
.q-foot-info dl > div { display: flex; gap: 14px; line-height: 1.55; }
.q-foot-info dt { flex: none; width: 104px; color: rgba(255,255,255,.35); font-size: 14px; }
.q-foot-info dd { margin: 0; color: rgba(255,255,255,.62); font-size: 14.5px; }
.q-foot-info .q-foot-tel { font-size: 14.5px; font-weight: 700; color: rgba(255,255,255,.85); }
body.lang-en .q-foot-info dt, body.lang-cn .q-foot-info dt, body.lang-jp .q-foot-info dt { width: 120px; }
/* 개인정보처리방침 링크 */
.q-foot-legal { margin-bottom: 8px !important; }
.q-foot-legal a { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.85); }
.q-foot-legal a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 768px) {
.q-foot-info dl > div { gap: 10px; }
.q-foot-info dt { width: 92px; font-size: 13px; }
.q-foot-info dd { font-size: 13.5px; }
}
/* =========================================================
개인정보처리방침 페이지
========================================================= */
.policy { max-width: 980px; margin: 0 auto; color: var(--q-text); font-size: 16px; line-height: 1.85; }
.policy .policy-lead {
margin: 0 0 40px; padding: 24px 28px; background: #f7f9fb;
border-left: 3px solid var(--q-blue); color: var(--q-heading);
}
.policy h2 {
margin: 44px 0 14px; padding: 0; font-size: 20px; font-weight: 700;
color: var(--q-heading); letter-spacing: -0.02em; text-align: left;
}
.policy h2::after { content: none; }
.policy p { margin: 0 0 12px; }
.policy ol, .policy ul { margin: 0 0 12px; padding-left: 22px; }
.policy li { margin: 0 0 6px; }
.policy strong { color: var(--q-heading); }
.policy-table-wrap { overflow-x: auto; margin: 6px 0 14px; }
.policy-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.policy-table th, .policy-table td { border: 1px solid var(--q-line); padding: 12px 14px; text-align: left; vertical-align: top; line-height: 1.7; }
.policy-table thead th { background: #4a5a68; color: #fff; font-weight: 500; border-color: #4a5a68; }
.policy-table tbody th { background: #f7f9fa; color: var(--q-heading); font-weight: 500; width: 180px; white-space: nowrap; }
body.lang-kr .policy { word-break: keep-all; }
@media (max-width: 768px) {
.policy { font-size: 15px; }
.policy .policy-lead { padding: 18px; margin-bottom: 28px; }
.policy h2 { font-size: 17.5px; margin-top: 34px; }
.policy-table { font-size: 14px; }
.policy-table tbody th { width: auto; white-space: normal; }
}
/* =========================================================
푸터 재구성 — 로고(좁게) | 회사정보(넓게, 구분선 3줄) | Quick links
하단 바: 개인정보처리방침(좌) · 저작권(우)
========================================================= */
.q-foot-main {
grid-template-columns: 220px minmax(0, 1fr) 340px;
gap: 64px;
align-items: start;
padding-top: 56px;
padding-bottom: 50px;
}
.q-foot-main, .q-foot-main * { text-align: left; }
.q-foot-brand .foot-logo { width: 180px; }
.q-foot-info { padding-top: 4px; }
.q-foot-line {
display: flex; flex-wrap: wrap; align-items: center;
margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.62);
}
.q-foot-line:last-child { margin-bottom: 0; }
.q-foot-line span { display: inline-flex; align-items: baseline; }
.q-foot-line span + span::before {
content: ''; display: inline-block; width: 1px; height: 12px;
margin: 0 16px; background: rgba(255,255,255,.18); align-self: center;
}
.q-foot-line em {
font-style: normal; margin-right: 8px; color: rgba(255,255,255,.36); font-size: 14px;
}
.q-foot-line .q-foot-tel { font-weight: 700; color: rgba(255,255,255,.88); }
body.lang-kr .q-foot-addr { word-break: keep-all; }
.q-foot-links .q-foot-title { margin-top: 2px; }
/* 하단 바 */
.q-foot-bottom { border-top: 1px solid rgba(255,255,255,.08); background: #1b1b1b; }
.q-foot-bottom-in {
display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
padding-top: 20px; padding-bottom: 22px;
}
.q-foot-bottom-in p, .q-foot-bottom-in nav { margin: 0; }
.q-foot-legal a { font-size: 14px; font-weight: 700; color: #fff; }
.q-foot-legal a:hover { text-decoration: underline; }
.q-foot-rights { font-size: 13.5px; color: rgba(255,255,255,.45); text-align: right; }
.q-foot-rights a { margin-left: 6px; color: rgba(255,255,255,.35); }
/* 이전 스타일 흔적 정리 */
.q-foot-copy, .q-foot-hr { display: none; }
@media (max-width: 1240px) {
.q-foot-main { grid-template-columns: 200px minmax(0, 1fr); gap: 40px 48px; }
.q-foot-links { grid-column: 2; }
}
@media (max-width: 768px) {
.q-foot-main { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; padding-bottom: 32px; }
.q-foot-links { display: none; }
.q-foot-brand .foot-logo { width: 150px; }
.q-foot-line { font-size: 13.5px; margin-bottom: 6px; }
.q-foot-line span { width: 100%; }
.q-foot-line span + span::before { content: none; }
.q-foot-bottom-in { flex-direction: column; align-items: flex-start; }
.q-foot-rights { text-align: left; }
}
/* 푸터 링크 호버 밑줄 제거 */
.q-foot a:hover, .q-foot a:focus, .q-foot-legal a:hover { text-decoration: none; }
/* 개인정보처리방침 — 알약(pill) 버튼 */
.q-foot-legal a {
display: inline-flex; align-items: center;
padding: 7px 18px;
border: 1px solid rgba(255,255,255,.28);
border-radius: 999px;
background: rgba(255,255,255,.04);
font-size: 13.5px; font-weight: 700; line-height: 1.2; color: #fff;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.q-foot-legal a:hover,
.q-foot-legal a:focus-visible {
background: #fff; border-color: #fff; color: #212121; text-decoration: none;
}
/* =========================================================
서비스 + 기술영역 통합 — 제목 → 5단계 화살표 → 서비스 카드 8장
========================================================= */
.q-services .q-range-wrap { margin: 8px auto 72px; }
.q-services .q-range-body h3 { margin-bottom: 14px; font-size: 17px; }
.q-services .q-range-body li { font-size: 14.5px; line-height: 1.7; color: #55606a; }
.q-services .q-range-line { height: 36px; margin-bottom: 16px; }
@media (max-width: 1240px) {
.q-services .q-range-body h3 { font-size: 15.5px; }
.q-services .q-range-body li { font-size: 13.5px; }
}
@media (max-width: 900px) {
.q-services .q-range-wrap { margin-bottom: 44px; }
}
/* ───────── 문의하기 폼 — 기존 폼 항목 유지, 디자인 정리 ───────── */
.qi-write { max-width: var(--q-container); margin: 0 auto; padding: 64px 20px 110px; }
.qi-intro { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 44px; color: var(--q-text); font-size: 16.5px; line-height: 1.7; word-break: keep-all; }
.qi-intro p { margin: 0; }
.qi-tel { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; border-radius: 40px; background: #f2f9fd; color: #4a5a66; font-size: 15px; }
.qi-tel a { color: var(--q-blue); font-weight: 700; font-size: 18px; text-decoration: none; }
.qi-errors { border: 1px solid #f3c2b6; background: #fff5f2; color: #b3321a; border-radius: 8px; padding: 16px 20px; margin-bottom: 24px; font-size: 14.5px; }
.qi-errors ul { margin: 8px 0 0; padding-left: 18px; }
.qi-table { border-top: 2px solid #222; }
.qi-tr { display: flex; border-bottom: 1px solid #e6e9ec; }
.qi-th { flex: 0 0 200px; display: flex; align-items: center; padding: 0 28px; background: #f7f9fb; font-size: 15.5px; font-weight: 600; color: #333; word-break: keep-all; }
.qi-th label { cursor: default; }
.qi-tr.is-top .qi-th { align-items: flex-start; padding-top: 26px; }
.qi-td { flex: 1; min-width: 0; padding: 14px 24px; }
.qi-req { font-style: normal; color: var(--q-orange); margin-left: 3px; font-weight: 700; }
.qi-input { width: 100%; max-width: none; height: 48px; padding: 0 16px; border: 1px solid #dcdfe3; border-radius: 6px; font-size: 15.5px; color: #222; background: #fff; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.qi-input::placeholder { color: #b5bbc1; }
.qi-input:hover { border-color: #c3c8cd; }
.qi-input:focus { outline: none; border-color: var(--q-blue); box-shadow: 0 0 0 3px rgba(0,160,233,.14); }
.qi-input-sm { width: 96px; text-align: center; font-size: 17px; font-weight: 600; }
.qi-types { display: flex; flex-wrap: wrap; gap: 8px; }
.qi-chip { position: relative; }
.qi-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qi-chip label { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border: 1px solid #dcdfe3; border-radius: 42px; background: #fff; font-size: 15px; color: #555; cursor: pointer; transition: all .15s; white-space: nowrap; }
.qi-chip label:hover { border-color: var(--q-blue); color: var(--q-blue); }
.qi-chip input:checked + label { background: var(--q-blue); border-color: var(--q-blue); color: #fff; font-weight: 600; }
.qi-chip input:focus-visible + label { box-shadow: 0 0 0 3px rgba(0,160,233,.25); }
.qi-file { position: relative; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.qi-file-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qi-file-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px; border: 1px solid #cfd4d9; border-radius: 6px; background: #fff; font-size: 14.5px; font-weight: 500; color: #444; transition: all .15s; flex: 0 0 auto; }
.qi-file:hover .qi-file-btn { border-color: var(--q-blue); color: var(--q-blue); }
.qi-file-input:focus-visible + .qi-file-btn { box-shadow: 0 0 0 3px rgba(0,160,233,.25); }
.qi-file-name { font-size: 14.5px; color: #9aa1a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qi-file.has-file .qi-file-name { color: #333; }
.qi-privacy { margin-top: 48px; border: 1px solid #e3e7eb; border-radius: 10px; padding: 26px 28px 24px; background: #fff; }
.qi-privacy-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.qi-privacy-head strong { font-size: 17px; color: #222; }
.qi-roll { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid #dcdfe3; border-radius: 30px; padding: 7px 14px; font-size: 13.5px; color: #555; cursor: pointer; }
.qi-roll:hover { border-color: var(--q-blue); color: var(--q-blue); }
.qi-roll-ico { transition: transform .2s; }
.qi-roll[aria-expanded="true"] .qi-roll-ico { transform: rotate(180deg); }
.qi-terms { max-height: 300px; overflow-y: auto; border: 1px solid #eceff2; border-radius: 6px; background: #fafbfc; padding: 18px 22px; margin-bottom: 16px; font-size: 13.5px; line-height: 1.7; }
.qi-terms h2 { font-size: 15px; margin: 18px 0 6px; }
.qi-consent-table { overflow-x: auto; }
.qi-consent-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; border-top: 1px solid #d5dade; }
.qi-consent-table th, .qi-consent-table td { text-align: center; padding: 13px 10px; border-bottom: 1px solid #eceff2; word-break: keep-all; color: #555; }
.qi-consent-table th { background: #f7f9fb; color: #333; font-weight: 600; }
.qi-agree { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 16px 18px; border-radius: 8px; background: #f5f7f9; font-size: 15px; color: #333; cursor: pointer; word-break: keep-all; }
.qi-agree input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qi-agree-box { flex: 0 0 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #c3c8cd; border-radius: 5px; background: #fff; color: transparent; transition: all .15s; }
.qi-agree input:checked + .qi-agree-box { background: var(--q-blue); border-color: var(--q-blue); color: #fff; }
.qi-agree input:focus-visible + .qi-agree-box { box-shadow: 0 0 0 3px rgba(0,160,233,.25); }
.qi-table-half { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; }
.qi-table-half .qi-th { flex-basis: 160px; }
.qi-table-half .qi-tr + .qi-tr { border-left: 1px solid #e6e9ec; }
.qi-captcha-row { display: flex; align-items: center; gap: 10px; }
.qi-captcha-q { display: inline-flex; align-items: center; justify-content: center; min-width: 108px; height: 48px; padding: 0 14px; border-radius: 6px; background: #eaf5fb; font-size: 20px; font-weight: 700; letter-spacing: 2px; color: #0a6c9a; user-select: none; }
.qi-captcha-info { margin: 6px 0 0; font-size: 12.5px; color: #9aa1a8; }
.qi-actions { display: flex; justify-content: center; gap: 12px; margin-top: 48px; }
.qi-btn-cancel, .qi-btn-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 58px; padding: 0 30px; border-radius: 6px; font-size: 16.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all .2s; }
.qi-btn-cancel { min-width: 150px; border: 1px solid #cfd4d9; background: #fff; color: #555; }
.qi-btn-cancel:hover { border-color: #999; color: #222; }
.qi-btn-submit { min-width: 240px; border: 0; background: var(--q-blue); color: #fff; }
.qi-btn-submit:hover { background: #0088c7; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,160,233,.28); }
.qi-btn-submit svg { transition: transform .2s; }
.qi-btn-submit:hover svg { transform: translateX(3px); }
.qi-done { padding: 80px 20px 110px; }
.qi-done-box { max-width: 640px; margin: 0 auto; text-align: center; word-break: keep-all; }
.qi-done-icon { display: inline-flex; width: 76px; height: 76px; border-radius: 50%; background: rgba(0,160,233,.1); color: var(--q-blue); align-items: center; justify-content: center; margin-bottom: 22px; }
.qi-done-box h2 { font-size: 28px; color: var(--q-heading); margin: 0 0 12px; }
.qi-done-box p { font-size: 16px; color: var(--q-text); line-height: 1.7; margin: 0 0 32px; }
.qi-done-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.qi-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 160px; height: 50px; padding: 0 24px; border-radius: 30px; border: 1px solid var(--q-blue); color: var(--q-blue); text-decoration: none; font-weight: 600; transition: .2s; }
.qi-btn.is-primary, .qi-btn:hover { background: var(--q-blue); color: #fff; }
table.qi-info { border-collapse: collapse; margin-bottom: 12px; font-size: 14px; }
table.qi-info th, table.qi-info td { border: 1px solid #e5e5e5; padding: 8px 14px; text-align: left; }
table.qi-info th { background: #f5f7f9; width: 140px; }
@media (max-width: 768px) {
.qi-write { padding: 40px 16px 70px; }
.qi-intro { font-size: 14.5px; }
.qi-tel { flex-wrap: wrap; justify-content: center; border-radius: 12px; font-size: 13.5px; }
.qi-tr { flex-direction: column; }
.qi-th, .qi-table-half .qi-th { flex-basis: auto; padding: 14px 0 0; background: none; font-size: 14.5px; }
.qi-tr.is-top .qi-th { padding-top: 14px; }
.qi-td { padding: 8px 0 14px; }
.qi-input { max-width: none; }
.qi-input-sm { width: 96px; }
.qi-chip label { height: 38px; padding: 0 14px; font-size: 14px; }
.qi-privacy { padding: 18px 16px; }
.qi-privacy-head { flex-wrap: wrap; }
.qi-table-half { grid-template-columns: 1fr; margin-top: 24px; }
.qi-table-half .qi-tr + .qi-tr { border-left: 0; }
.qi-actions .qi-btn-cancel, .qi-actions .qi-btn-submit { flex: 1; min-width: 0; }
}
[lang="ja"] .qi-write, [lang="zh"] .qi-write { line-break: strict; }
/* ───────── 인사말 (시안 A 확정) — 사옥 사진 배너 + 2단 본문 ───────── */
.greet5 { word-break: keep-all; color: #5a5a5a; padding: 10px 0; }
.greet5 p { max-width: none; }
.greet5-band { position: relative; height: 460px; border-radius: 6px; overflow: hidden; }
.greet5-band img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: center 28%; }
.greet5-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,20,34,.94) 0%, rgba(6,20,34,.82) 35%, rgba(6,20,34,.5) 65%, rgba(6,20,34,.22) 100%); }
.greet5-band-in { position: absolute; left: 70px; top: 50%; transform: translateY(-50%); z-index: 1; max-width: 600px; color: #fff; }
.greet5-eyebrow { display: block; margin-bottom: 18px; font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .2em; color: #5cc8ff; }
.greet5-band h2 { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.38; letter-spacing: -.035em; color: #fff; }
.greet5-band h2::after { display: none; }
.greet5-lead { margin: 70px auto 44px; text-align: center; }
.greet5-lead p { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.6; letter-spacing: -.03em; color: var(--q-heading); }
.greet5-lead .greet5-open { margin-bottom: 8px; font-size: 32px; font-weight: 400; letter-spacing: -.04em; }
.greet5-lead .greet5-open strong { font-weight: 800; }
.greet5-cols { column-count: 2; column-gap: 64px; }
.greet5-cols p { margin: 0 0 22px; font-size: 17px; line-height: 1.95; break-inside: avoid; }
.greet5-foot { display: flex; justify-content: flex-end; align-items: center; margin-top: 30px; padding-top: 30px; border-top: 1px solid #e3e7eb; }
.greet5-foot p { margin: 0; }
.greet5-cols .greet5-thanks { margin: 30px 0 0; font-size: 18px; font-weight: 600; color: var(--q-heading); }
.greet5-sign { display: flex; align-items: baseline; gap: 14px; }
.greet5-sign span { font-size: 16px; color: #777; }
.greet5-sign strong { font-size: 28px; font-weight: 700; color: var(--q-heading); letter-spacing: .16em; }
@media (max-width: 860px) {
.greet5-band { height: 340px; }
.greet5-band-in { left: 28px; right: 28px; }
.greet5-band h2 { font-size: 26px; }
.greet5-lead { margin: 44px auto 30px; }
.greet5-lead p { font-size: 18px; }
.greet5-lead .greet5-open { font-size: 23px; }
.greet5-cols { column-count: 1; }
.greet5-cols p { font-size: 15.5px; line-height: 1.9; }
.greet5-foot { justify-content: flex-start; }
.greet5-sign strong { font-size: 22px; }
}
/* ───────── 회사연혁 (시안 A 확정) — 구간 사진 배너 + 중앙 타임라인 좌우 교차 ───────── */
.hista { word-break: keep-all; padding: 0 0 10px; }
.hista p { max-width: none; }
.hista-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.hista-tabs a { padding: 10px 38px; border: 1px solid #d5dade; border-radius: 40px; font-family: Poppins, sans-serif; font-size: 24px; font-weight: 200; letter-spacing: .01em; color: #555; text-decoration: none; transition: all .2s; }
.hista-tabs a:hover { border-color: var(--q-blue-dp); background: var(--q-blue-dp); color: #fff; text-decoration: none; }
.hista-era { margin-top: 56px; scroll-margin-top: 90px; }
.hista-banner { position: relative; display: flex; align-items: center; height: 240px; padding: 0 60px; border-radius: 8px; overflow: hidden; color: #fff; }
.hista-banner img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.hista-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,20,34,.92), rgba(6,20,34,.6) 60%, rgba(6,20,34,.35)); }
.hista-banner-in { position: relative; z-index: 1; }
.hista-en { font-family: Poppins, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #5cc8ff; }
.hista-banner h2 { margin: 6px 0 8px; font-family: Poppins, sans-serif; font-size: 44px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.hista-banner h2::after { display: none; }
.hista-banner p { margin: 0; font-size: 16px; color: rgba(255,255,255,.85); }
.hista-line { position: relative; margin: 50px 0 10px; }
.hista-line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(var(--q-blue-dp), #d3e3ee); }
.hista-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 34px; }
.hista-row + .hista-row { margin-top: -70px; }
.hista-row::before { content: ""; position: absolute; left: 50%; top: 22px; z-index: 1; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 4px solid var(--q-blue-dp); box-shadow: 0 0 0 6px rgba(10,111,168,.12); box-sizing: border-box; }
.hista-row:nth-child(odd) .hista-card { grid-column: 1; }
.hista-row:nth-child(even) .hista-card { grid-column: 2; }
.hista-card { padding: 24px 28px; background: #fff; border: 1px solid #e6e9ec; border-radius: 10px; box-shadow: 0 10px 26px rgba(20,40,60,.06); transition: transform .25s, box-shadow .25s; }
.hista-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(20,40,60,.1); }
.hista-y { display: inline-block; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #b9c7d2; font-family: Poppins, sans-serif; font-size: 48px; font-weight: 600; letter-spacing: -.01em; line-height: 1; color: #55636f; }
.hista-card ul { list-style: none; margin: 0; padding: 0; }
.hista-card li { display: grid; grid-template-columns: 50px 1fr; gap: 10px; padding: 7px 0; font-size: 17px; line-height: 1.7; color: #5a5a5a; }
.hista-card li strong { font-weight: 700; color: var(--q-heading); }
.hista-card li.is-key strong { color: var(--q-blue-dp); }
.hista-m { font-family: Poppins, sans-serif; font-size: 16.5px; font-weight: 700; color: #333; }
@media (max-width: 900px) {
.hista-banner { height: 200px; padding: 0 26px; }
.hista-banner h2 { font-size: 30px; }
.hista-line::before { left: 9px; }
.hista-row { grid-template-columns: 1fr; gap: 0; padding-left: 34px; }
.hista-row + .hista-row { margin-top: 0; }
.hista-row::before { left: 9px; }
.hista-row:nth-child(odd) .hista-card, .hista-row:nth-child(even) .hista-card { grid-column: 1; }
}
@media (max-width: 640px) {
.hista-tabs a { padding: 11px 20px; font-size: 18px; }
.hista-banner { height: 170px; }
.hista-banner h2 { font-size: 26px; }
.hista-banner p { font-size: 14px; }
.hista-card { padding: 20px 18px; }
.hista-y { font-size: 36px; }
.hista-card li { grid-template-columns: 42px 1fr; font-size: 15.5px; }
.hista-m { font-size: 15px; }
}
/* ───────── 인증현황 ───────── */
.cert { word-break: keep-all; color: #5a5a5a; padding: 0 0 10px; }
.cert p { max-width: none; }
.cert-sum { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
.cert-sum li { padding: 30px 26px; border: 1px solid #e3e7eb; border-radius: 12px; background: #fff; text-align: center; }
.cert-sum-n { display: block; font-family: Poppins, sans-serif; font-size: 40px; font-weight: 600; line-height: 1.1; color: var(--q-blue-dp); letter-spacing: -.02em; }
.cert-sum-n em { font-style: normal; font-size: 20px; font-weight: 500; margin-left: 4px; color: #7c8b97; }
.cert-sum-l { display: block; margin-top: 10px; font-size: 15.5px; color: #77848e; }
.cert-sec { margin-top: 84px; }
.cert-head { margin-bottom: 30px; }
.cert-no { display: block; margin-bottom: 8px; font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .12em; color: var(--q-blue-dp); }
.cert-head h2 { margin: 0 0 10px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--q-heading); }
.cert-head h2::after { display: none; }
.cert-head p { margin: 0; font-size: 16.5px; line-height: 1.75; color: #77848e; }
.cert-kolas { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 30px; align-items: stretch; }
.cert-kolas-card { display: flex; flex-direction: column; justify-content: center; padding: 40px 36px; border-radius: 12px; color: #fff; background: linear-gradient(140deg, #0e2a40 0%, #0a6fa8 100%); }
.cert-kolas-label { font-family: Poppins, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #8fd2f5; }
.cert-kolas-no { display: block; margin: 10px 0 14px; font-family: Poppins, sans-serif; font-size: 58px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.cert-kolas-org { font-size: 16px; color: rgba(255,255,255,.9); }
.cert-kolas-valid { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); font-size: 15px; color: rgba(255,255,255,.85); }
.cert-table-wrap { overflow-x: auto; }
.cert-table { width: 100%; border-collapse: collapse; border-top: 2px solid #10263a; font-size: 16.5px; }
.cert-table th, .cert-table td { padding: 18px 22px; border-bottom: 1px solid #e6e9ec; text-align: left; line-height: 1.7; }
.cert-table th { width: 190px; background: #f7f9fb; font-weight: 700; color: var(--q-heading); }
.cert-table td { color: #5a5a5a; }
.cert-en { font-size: 14.5px; color: #8b97a1; }
.cert-note { display: inline-block; margin-top: 4px; font-size: 14.5px; color: #8b97a1; }
.cert-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
.cert-grid li { position: relative; padding: 32px 30px; border: 1px solid #e3e7eb; border-radius: 12px; background: #fff; transition: transform .25s, box-shadow .25s, border-color .25s; }
.cert-grid li:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 18px 40px rgba(20,40,60,.1); }
.cert-grid li.is-main { border-color: var(--q-blue-dp); }
.cert-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: #eaf3f9; color: var(--q-blue-dp); }
.cert-grid strong { display: block; font-size: 18.5px; font-weight: 700; color: var(--q-heading); letter-spacing: -.02em; }
.cert-org { display: block; margin-top: 8px; font-size: 15.5px; color: #77848e; }
.cert-badge { display: inline-block; margin-top: 14px; padding: 5px 14px; border-radius: 20px; background: var(--q-blue-dp); color: #fff; font-size: 13.5px; font-weight: 600; }
.cert-pats { list-style: none; margin: 0; padding: 0; border-top: 2px solid #10263a; }
.cert-pats li { display: grid; grid-template-columns: 190px minmax(0, 1fr) 140px; gap: 20px; align-items: center; padding: 22px 8px; border-bottom: 1px solid #e6e9ec; transition: background .2s; }
.cert-pats li:hover { background: #f7fbfd; }
.cert-pat-no { font-family: Poppins, sans-serif; font-size: 16px; font-weight: 600; color: var(--q-blue-dp); }
.cert-pats strong { font-size: 17.5px; font-weight: 500; line-height: 1.6; color: var(--q-heading); }
.cert-pat-date { font-family: Poppins, sans-serif; font-size: 15.5px; color: #8b97a1; text-align: right; }
.cert-foot { margin: 34px 0 0 !important; font-size: 15px; color: #98a4ad; }
@media (max-width: 960px) {
.cert-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cert-kolas { grid-template-columns: 1fr; gap: 22px; }
.cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.cert-sec { margin-top: 56px; }
.cert-sum li { padding: 22px 16px; }
.cert-sum-n { font-size: 30px; }
.cert-sum-l { font-size: 14px; }
.cert-head h2 { font-size: 24px; }
.cert-head p { font-size: 15px; }
.cert-kolas-card { padding: 30px 24px; }
.cert-kolas-no { font-size: 44px; }
.cert-table { font-size: 15px; }
.cert-table th, .cert-table td { padding: 14px; }
.cert-table th { width: 118px; }
.cert-grid { grid-template-columns: 1fr; gap: 14px; }
.cert-grid li { padding: 24px 20px; }
.cert-pats li { grid-template-columns: 1fr; gap: 6px; padding: 18px 4px; }
.cert-pat-date { text-align: left; }
.cert-pats strong { font-size: 16px; }
}
/* ───────── 고객 및 협력업체 ───────── */
.cli { word-break: keep-all; color: #5a5a5a; padding: 0 0 10px; }
.cli p { max-width: none; }
.cli-lead { margin: 0 auto !important; max-width: 900px !important; text-align: center; font-size: 20px; line-height: 1.8; color: #4a5560; }
.cli-lead strong { color: var(--q-blue-dp); font-weight: 700; }
.cli-sec { margin-top: 80px; }
.cli-logos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
.cli-logos a { display: flex; flex-direction: column; height: 100%; border: 1px solid #e3e7eb; border-radius: 12px; background: #fff; overflow: hidden; text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.cli-logos a:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 18px 40px rgba(20,40,60,.1); text-decoration: none; }
.cli-logo { display: flex; align-items: center; justify-content: center; height: 130px; padding: 20px; }
.cli-logo img { max-width: 100%; object-fit: contain; margin: 0; }
.cli-logos a.is-multiply .cli-logo img { mix-blend-mode: multiply; }
.cli-name { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 10px; border-top: 1px solid #eef1f4; background: #f8fafb; font-size: 15px; font-weight: 500; color: #55636f; transition: background .25s, color .25s; }
.cli-name i { font-style: normal; font-size: 13px; opacity: 0; transform: translate(-4px, 2px); transition: all .25s; }
.cli-logos a:hover .cli-name { background: var(--q-blue-dp); color: #fff; }
.cli-logos a:hover .cli-name i { opacity: 1; transform: none; }
.cli-refs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
.cli-refs li { position: relative; padding: 28px 28px 24px; border: 1px solid #e3e7eb; border-radius: 12px; background: #fff; }
.cli-refs li.is-on { border-top: 3px solid var(--q-blue-dp); }
.cli-ref-st { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 20px; background: #eef1f4; font-size: 13px; font-weight: 600; color: #7c8b97; }
.cli-refs li.is-on .cli-ref-st { background: #e6f1f8; color: var(--q-blue-dp); }
.cli-refs strong { display: block; font-size: 19px; font-weight: 700; color: var(--q-heading); letter-spacing: -.02em; }
.cli-refs p { margin: 8px 0 18px; font-size: 16px; line-height: 1.65; color: #5a5a5a; }
.cli-ref-date { display: block; padding-top: 14px; border-top: 1px dashed #e3e7eb; font-family: Poppins, sans-serif; font-size: 14.5px; color: #8b97a1; }
.cli-models { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: stretch; }
.cli-total { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 30px; border-radius: 12px; background: linear-gradient(140deg, #0e2a40 0%, #0a6fa8 100%); color: #fff; text-align: center; }
.cli-total-n { font-family: Poppins, sans-serif; font-size: 88px; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.cli-total-u { margin-top: 6px; font-family: Poppins, sans-serif; font-size: 22px; font-weight: 300; letter-spacing: .08em; color: #bfe3f7; }
.cli-total-l { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.22); font-size: 15px; color: rgba(255,255,255,.85); }
.cli-bar { display: flex; gap: 3px; height: 14px; margin-bottom: 26px; border-radius: 8px; overflow: hidden; }
.cli-bar span { display: block; }
.cli .c0 { background: #0a4f7a; } .cli .c1 { background: #0a6fa8; } .cli .c2 { background: #3d93c4; } .cli .c3 { background: #7db6d8; } .cli .c4 { background: #b5d5e8; }
.cli-cats { list-style: none; margin: 0; padding: 0; border-top: 2px solid #10263a; }
.cli-cats li { display: grid; grid-template-columns: 14px 90px 100px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 16px 6px; border-bottom: 1px solid #e6e9ec; }
.cli-dot { width: 12px; height: 12px; border-radius: 3px; transform: translateY(1px); }
.cli-cats strong { font-size: 17px; font-weight: 700; color: var(--q-heading); }
.cli-cats em { font-style: normal; font-family: Poppins, sans-serif; font-size: 16px; font-weight: 600; color: var(--q-blue-dp); }
.cli-cats p { margin: 0; font-size: 15.5px; line-height: 1.65; color: #666; }
@media (max-width: 960px) {
.cli-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cli-refs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cli-models { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
.cli-lead { font-size: 16.5px; text-align: left; }
.cli-sec { margin-top: 56px; }
.cli-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cli-logo { height: 96px; padding: 14px; }
.cli-logo img { transform: scale(.8); }
.cli-name { font-size: 13px; padding: 9px 6px; }
.cli-refs { grid-template-columns: 1fr; gap: 12px; }
.cli-refs li { padding: 22px 20px 20px; }
.cli-total { padding: 36px 20px; }
.cli-total-n { font-size: 64px; }
.cli-cats li { grid-template-columns: 14px 1fr auto; }
.cli-cats p { grid-column: 2 / -1; }
}
/* ───────── 오시는길 ───────── */
.loc { word-break: keep-all; color: #5a5a5a; padding: 0 0 10px; }
.loc p { max-width: none; }
.loc-map { border: 1px solid #e3e7eb; border-radius: 12px; overflow: hidden; background: #f3f5f7; }
.loc-map .root_daum_roughmap { width: 100% !important; }
.loc-map .root_daum_roughmap .wrap_map { height: 520px !important; }
.loc-map .root_daum_roughmap .cont { display: none; }
.loc-info { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 60px; align-items: stretch; margin-top: 60px; }
.loc-photo { position: relative; margin: 0; min-height: 360px; border-radius: 12px; overflow: hidden; }
.loc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: center 45%; }
.loc-body { display: flex; flex-direction: column; justify-content: center; }
.loc-eyebrow { margin: 0 0 10px !important; font-family: Poppins, sans-serif; font-size: 14px !important; font-weight: 600; letter-spacing: .2em; color: var(--q-blue-dp) !important; }
.loc-title { margin: 0 0 10px; font-size: 34px; font-weight: 700; letter-spacing: -.03em; color: var(--q-heading); }
.loc-title::after { display: none; }
.loc-sub { margin: 0 0 26px !important; font-size: 16.5px; line-height: 1.7; color: #77848e; }
.loc-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid #10263a; }
.loc-list li { display: flex; align-items: center; gap: 18px; padding: 20px 4px; border-bottom: 1px solid #e6e9ec; }
.loc-ico { flex: 0 0 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #eaf3f9; color: var(--q-blue-dp); }
.loc-list em { display: block; margin-bottom: 2px; font-style: normal; font-size: 14px; color: #8b97a1; }
.loc-list strong { font-size: 18.5px; font-weight: 600; color: var(--q-heading); }
.loc-list strong a { color: inherit; text-decoration: none; }
.loc-list strong a:hover { color: var(--q-blue-dp); }
.loc-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.loc-btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; border-radius: 30px; font-size: 15.5px; font-weight: 600; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.loc-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.12); text-decoration: none; }
.loc-btn.is-kakao { background: #fee500; color: #191919; }
.loc-btn.is-naver { background: #03c75a; color: #fff; }
@media (max-width: 900px) {
.loc-info { grid-template-columns: 1fr; gap: 30px; margin-top: 36px; }
.loc-photo { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
.loc-map .root_daum_roughmap .wrap_map { height: 320px !important; }
.loc-title { font-size: 26px; }
.loc-list strong { font-size: 16px; }
.loc-btn { flex: 1; padding: 0 14px; font-size: 14.5px; }
}
/* ───────── 게시판 상단 영역(브레드크럼) — 기존 게시판 제목/경로 중복 숨김 ───────── */
.page-hero + .board-page .board-title { display: none; }
.page-hero + .board-page .board-head { padding-top: 10px; }
.page-hero + .post-view .crumbs { display: none; }
.page-hero + .board-page, .page-hero + .post-view { padding-top: 50px; }
/* ───────── 문의하기 폼 — 시안 A 확정: 네이비 안내 패널 + 폼 카드 (기존 표 구조를 라벨 위/입력 아래 2열로 재배치) ───────── */
.qv .qi-table{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;border:0;margin:0}
.qv .qi-tr{display:block;border:0;padding:0}
.qv .qi-tr:nth-child(1),.qv .qi-tr.is-top,.qv .qi-tr:nth-child(2){grid-column:1/-1}
.qv .qi-th{display:block;flex:none;background:none;padding:0 0 9px!important;font-size:14.5px;font-weight:600;color:#33404a}
.qv .qi-td{padding:0}
.qv .qi-input{max-width:none;height:52px;font-size:16px}
.qv .qi-table-half{grid-template-columns:1fr 1fr;margin-top:26px}
.qv .qi-table-half .qi-tr{grid-column:auto!important;border:0!important}
.qv .qi-table-half .qi-th{padding-top:0!important}
.qv .qi-privacy{margin-top:30px}
.qv .qi-actions{justify-content:flex-end;margin-top:30px}
.qv .qi-btn-cancel{display:none}
.qv .qi-chip label{height:44px}
.qv .qi-chip input:checked+label{background:var(--q-blue-dp);border-color:var(--q-blue-dp)}
.qv .qi-chip label:hover{border-color:var(--q-blue-dp);color:var(--q-blue-dp)}
.qv .qi-input:focus{border-color:var(--q-blue-dp);box-shadow:0 0 0 3px rgba(10,111,168,.14)}
.qva{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(14,42,64,.12);margin-top:34px}
.qva-side{position:relative;padding:54px 44px;color:#fff;background:linear-gradient(160deg,#0e2a40 0%,#0a4f7a 60%,#0a6fa8 100%)}
.qva-side::after{content:"";position:absolute;right:-80px;bottom:-80px;width:260px;height:260px;border-radius:50%;border:40px solid rgba(255,255,255,.05)}
.qva-side .ey{font-family:Poppins,sans-serif;font-size:13px;font-weight:600;letter-spacing:.2em;color:#8fd2f5}
.qva-side h2{margin:12px 0 14px;font-size:32px;font-weight:700;line-height:1.35;letter-spacing:-.03em;color:#fff}
.qva-side h2::after{display:none}
.qva-side>p{margin:0 0 34px;font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.8)}
.qva-steps{list-style:none;margin:0 0 36px;padding:0}
.qva-steps li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(255,255,255,.12);font-size:15px;color:rgba(255,255,255,.9)}
.qva-steps b{flex:0 0 28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.14);font-family:Poppins,sans-serif;font-size:13px}
.qva-contact{padding:22px 24px;border-radius:12px;background:rgba(255,255,255,.08)}
.qva-contact span{display:block;font-size:13px;color:#8fd2f5;margin-bottom:4px}
.qva-contact a{display:block;font-family:Poppins,sans-serif;font-size:24px;font-weight:600;color:#fff;text-decoration:none}
.qva-contact em{font-style:normal;font-size:13.5px;color:rgba(255,255,255,.7)}
.qva-form{min-width:0;padding:54px 50px;background:#fff}
.qva>*{min-width:0}
.qv .qi-td{min-width:0}
.qva .qi-btn-submit{background:var(--q-blue-dp);border-radius:40px;min-width:220px}
.qi-write .qva-form .qi-errors{margin-bottom:22px}
@media(max-width:900px){.qva{grid-template-columns:minmax(0,1fr)}.qva-side,.qva-form{padding:34px 22px}.qv .qi-table,.qv .qi-table-half{grid-template-columns:minmax(0,1fr)}.qva-side h2{font-size:26px}}
/* ───────── 서비스 페이지 공통 템플릿 (.sv) — 1호: 회로 설계 검증 ───────── */
.sv { word-break: keep-all; color: #5a5a5a; padding: 0 0 10px; }
.sv p { max-width: none; }
.sv h2::after, .sv h3::after { display: none; }
.sv-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 60px; align-items: center; }
.sv-eyebrow { margin: 0 0 14px !important; font-family: Poppins, sans-serif; font-size: 14px !important; font-weight: 600; letter-spacing: .12em; color: var(--q-blue-dp) !important; }
.sv-title { margin: 0 0 22px; font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; color: var(--q-heading); }
.sv-lead { margin: 0 0 24px !important; font-size: 24px; font-weight: 600; line-height: 1.6; letter-spacing: -.03em; color: var(--q-heading); }
.sv-quote { margin: 0 !important; padding: 18px 22px; border-left: 3px solid var(--q-blue-dp); background: #f3f8fb; font-size: 17px; line-height: 1.7; color: #33404a; }
.sv-quote strong { color: var(--q-blue-dp); }
.sv-intro-art { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: linear-gradient(145deg, #0b2236 0%, #0e3a5a 55%, #0a6fa8 100%); color: rgba(143,210,245,.55); }
.sv-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-intro-tags { position: absolute; left: 22px; bottom: 20px; display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sv-intro-tags li { padding: 6px 14px; border-radius: 20px; background: rgba(255,255,255,.12); backdrop-filter: blur(4px); font-family: Poppins, sans-serif; font-size: 13px; font-weight: 500; color: #fff; }
.sv-sec { margin-top: 90px; }
.sv-head { margin-bottom: 30px; }
.sv-head h2 { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--q-heading); }
.sv-head h2::before { content: ""; width: 6px; height: 28px; border-radius: 3px; background: var(--q-blue-dp); }
.sv-ico { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: #eaf3f9; color: var(--q-blue-dp); }
.sv-ico.is-sm { width: 48px; height: 48px; border-radius: 12px; }
.sv-support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sv-support article { padding: 38px 36px; border: 1px solid #e3e7eb; border-radius: 16px; background: #fff; transition: transform .25s, box-shadow .25s, border-color .25s; }
.sv-support article:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 20px 44px rgba(20,40,60,.1); }
.sv-support em { display: block; margin: 22px 0 6px; font-style: normal; font-family: Poppins, sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--q-blue-dp); }
.sv-support h3 { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--q-heading); }
.sv-support p { margin: 0; font-size: 16.5px; line-height: 1.8; color: #5a5a5a; }
.sv-targets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sv-targets li { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border: 1px solid #e3e7eb; border-radius: 14px; background: #fff; font-size: 16.5px; font-weight: 600; color: var(--q-heading); transition: border-color .2s, background .2s; }
.sv-targets li:hover { border-color: var(--q-blue-dp); background: #f7fbfd; }
.sv-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.sv-flow > li { position: relative; padding: 34px 32px 30px; border-radius: 16px; background: #f5f8fb; }
.sv-flow > li:not(:last-child)::after { content: "→"; position: absolute; right: -20px; top: 50%; z-index: 1; width: 32px; height: 32px; margin-top: -16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--q-blue-dp); color: #fff; font-size: 16px; }
.sv-flow-no { display: block; font-family: Poppins, sans-serif; font-size: 40px; font-weight: 700; line-height: 1; color: rgba(10,111,168,.18); }
.sv-flow em { display: block; margin: 14px 0 4px; font-style: normal; font-family: Poppins, sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: .1em; color: var(--q-blue-dp); }
.sv-flow h3 { margin: 0 0 16px; font-size: 21px; font-weight: 700; color: var(--q-heading); }
.sv-flow ul { margin: 0; padding: 0; list-style: none; }
.sv-flow ul li { position: relative; padding: 8px 0 8px 22px; border-top: 1px solid #e3e9ee; font-size: 16px; line-height: 1.6; color: #4d5a64; }
.sv-flow ul li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; border-radius: 2px; background: var(--q-blue-dp); }
.sv-cases { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sv-cases li { padding: 14px 26px; border-radius: 40px; background: #10263a; color: #fff; font-size: 16.5px; font-weight: 500; }
.sv-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 90px; padding: 44px 50px; border-radius: 18px; background: linear-gradient(120deg, #0e2a40 0%, #0a4f7a 55%, #0a6fa8 100%); color: #fff; }
.sv-cta-ey { margin: 0 0 8px !important; font-family: Poppins, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #8fd2f5; }
.sv-cta h3 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.sv-cta a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 30px; border-radius: 40px; background: #fff; color: var(--q-blue-dp); font-size: 16px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.sv-cta a:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.2); text-decoration: none; }
@media (max-width: 1024px) {
.sv-intro { grid-template-columns: 1fr; gap: 36px; }
.sv-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-flow { grid-template-columns: 1fr; gap: 30px; }
.sv-flow > li:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -24px; margin: 0 0 0 -16px; }
}
@media (max-width: 640px) {
.sv-title { font-size: 32px; }
.sv-lead { font-size: 19px; }
.sv-sec { margin-top: 60px; }
.sv-head h2 { font-size: 23px; }
.sv-support { grid-template-columns: 1fr; }
.sv-support article { padding: 28px 24px; }
.sv-targets { grid-template-columns: 1fr; }
.sv-cta { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
.sv-cta h3 { font-size: 21px; }
.sv-cta a { width: 100%; justify-content: center; }
}
/* ───────── 서비스 템플릿 확장 (7종 공통 추가 요소) ───────── */
.sv-support.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-targets.is-plain li { position: relative; padding-left: 44px; font-weight: 600; }
.sv-targets.is-plain li::before { content: ""; position: absolute; left: 22px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 3px; background: var(--q-blue-dp); }
.sv-flow.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sv-flow.is-4 > li { padding: 30px 24px 26px; }
.sv-flow.is-4 > li:not(:last-child)::after { right: -18px; }
.sv-flow.is-plain > li::after { display: none !important; }
.sv-tests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sv-tests li { padding: 26px 26px 24px; border: 1px solid #e3e7eb; border-top: 3px solid var(--q-blue-dp); border-radius: 14px; background: #fff; }
.sv-tests strong { display: block; margin-bottom: 8px; font-family: Poppins, 'Noto Sans KR', sans-serif; font-size: 19px; font-weight: 700; color: var(--q-heading); }
.sv-tests span { display: block; font-size: 16px; line-height: 1.7; color: #5a5a5a; }
.sv-tests.is-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-std { display: inline-block; margin-top: 12px; padding: 5px 12px; border-radius: 20px; background: #e6f1f8; font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--q-blue-dp); }
.sv-note { margin: 14px 0 0 !important; font-size: 14.5px; color: #98a4ad; }
.sv-note::before { content: "※ "; }
.sv-info .sv-note::before, .sv-info .sv-note { margin: 0 !important; }
.sv-research { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.sv-research li { padding: 30px 28px; border-radius: 14px; background: linear-gradient(145deg, #0e2a40 0%, #0a5582 100%); color: #fff; }
.sv-year { display: block; font-family: Poppins, sans-serif; font-size: 34px; font-weight: 600; line-height: 1; color: #8fd2f5; }
.sv-research strong { display: block; margin: 14px 0 8px; font-size: 18.5px; font-weight: 700; color: #fff; }
.sv-research p { margin: 0; font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.82); }
.sv-info { margin: 0; padding: 0; list-style: none; border-top: 2px solid #10263a; }
.sv-info li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 20px; padding: 20px 6px; border-bottom: 1px solid #e6e9ec; }
.sv-info em { grid-row: span 2; font-style: normal; font-weight: 700; font-size: 16px; color: var(--q-heading); }
.sv-info strong { font-size: 17px; font-weight: 500; color: #33404a; }
.sv-info .sv-note { font-size: 14px; }
.sv-equip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sv-equip li { display: flex; align-items: center; gap: 14px; padding: 20px 20px; border-radius: 14px; background: #f5f8fb; }
.sv-equip strong { display: block; font-size: 16.5px; font-weight: 700; color: var(--q-heading); }
.sv-equip li > div > span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: #7c8b97; }
.sv-equip .sv-ico { flex: 0 0 48px; background: #fff; color: var(--q-blue-dp); }
@media (max-width: 1024px) {
.sv-support.is-3, .sv-tests, .sv-research { grid-template-columns: 1fr; }
.sv-flow.is-4 { grid-template-columns: 1fr; gap: 30px; }
.sv-flow.is-4 > li:not(:last-child)::after { right: auto; }
.sv-equip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-tests.is-fields { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.sv-equip { grid-template-columns: 1fr; }
.sv-info li { grid-template-columns: 1fr; }
.sv-info em { grid-row: auto; }
}
/* ───────── 시험 진행 조회 (.ts) — 문의하기와 같은 네이비 패널 구성 ───────── */
.ts { word-break: keep-all; padding: 10px 0; }
.ts p { max-width: none; }
.ts-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(14,42,64,.12); }
.ts-side { position: relative; padding: 54px 44px; color: #fff; background: linear-gradient(160deg, #0e2a40 0%, #0a4f7a 60%, #0a6fa8 100%); }
.ts-ey { font-family: Poppins, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .2em; color: #8fd2f5; }
.ts-side h2 { margin: 12px 0 14px; font-size: 30px; font-weight: 700; line-height: 1.38; letter-spacing: -.03em; color: #fff; }
.ts-side h2::after { display: none; }
.ts-side > p { margin: 0 0 30px; font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.8); }
.ts-steps { list-style: none; margin: 0 0 34px; padding: 0; }
.ts-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.9); }
.ts-steps b { flex: 0 0 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.14); font-family: Poppins, sans-serif; font-size: 13px; }
.ts-contact { padding: 22px 24px; border-radius: 12px; background: rgba(255,255,255,.08); }
.ts-contact span { display: block; margin-bottom: 4px; font-size: 13px; color: #8fd2f5; }
.ts-contact a { display: block; font-family: Poppins, sans-serif; font-size: 24px; font-weight: 600; color: #fff; text-decoration: none; }
.ts-contact em { font-style: normal; font-size: 13.5px; color: rgba(255,255,255,.7); }
.ts-main { min-width: 0; padding: 54px 50px; background: #fff; }
.ts-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.ts-form label { display: block; }
.ts-form label span { display: block; margin-bottom: 9px; font-size: 14.5px; font-weight: 600; color: #33404a; }
.ts-form input { width: 100%; height: 54px; padding: 0 16px; border: 1px solid #dcdfe3; border-radius: 8px; font-size: 16px; color: #222; box-sizing: border-box; }
.ts-form input:focus { outline: none; border-color: var(--q-blue-dp); box-shadow: 0 0 0 3px rgba(10,111,168,.14); }
.ts-form button { height: 54px; padding: 0 34px; border: 0; border-radius: 40px; background: var(--q-blue-dp); color: #fff; font-size: 16.5px; font-weight: 700; cursor: pointer; transition: background .2s, transform .2s; }
.ts-form button:hover { background: #085a89; transform: translateY(-2px); }
.ts-form button:disabled { opacity: .6; cursor: wait; transform: none; }
.ts-msg { margin: 18px 0 0 !important; padding: 14px 18px; border-radius: 8px; background: #f5f8fb; font-size: 15px; color: #77848e; }
.ts-msg.is-err { background: #fff4f1; color: #b3321a; }
.ts-msg.is-ok { background: #eef7f2; color: #1d7a4a; }
.ts-result { margin-top: 30px; }
.ts-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid #10263a; }
.ts-summary > div { padding: 16px 14px; border-bottom: 1px solid #e6e9ec; }
.ts-summary em { display: block; margin-bottom: 4px; font-style: normal; font-size: 13.5px; color: #8b97a1; }
.ts-summary strong { font-size: 16.5px; font-weight: 600; color: var(--q-heading); }
.ts-table-wrap { margin-top: 26px; overflow-x: auto; }
.ts-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 15.5px; }
.ts-table th { padding: 13px 12px; background: #f5f8fb; border-top: 1px solid #10263a; border-bottom: 1px solid #e3e7eb; font-weight: 700; color: var(--q-heading); text-align: left; }
.ts-table td { padding: 14px 12px; border-bottom: 1px solid #eef1f4; color: #4d5a64; }
.ts-table td:first-child, .ts-table th:first-child { width: 56px; text-align: center; }
.ts-empty { text-align: center !important; color: #98a4ad !important; }
.ts-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; background: #eef1f4; font-size: 13.5px; font-weight: 700; color: #6b7883; }
.ts-badge.is-on { background: #e6f1f8; color: var(--q-blue-dp); }
.ts-badge.is-done { background: #e7f5ed; color: #1d7a4a; }
.ts-badge.is-wait { background: #fff4e0; color: #a86400; }
@media (max-width: 900px) {
.ts-grid { grid-template-columns: minmax(0, 1fr); }
.ts-side, .ts-main { padding: 34px 22px; }
.ts-side h2 { font-size: 25px; }
.ts-form { grid-template-columns: minmax(0, 1fr); }
.ts-form button { width: 100%; }
.ts-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ts-table { min-width: 560px; }
}
/* ───────── 게시판(공지사항 등) 목록·글보기 ───────── */
.board-page { max-width: var(--q-container); padding: 50px 20px 100px; word-break: keep-all; }
.board-page .board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 22px; padding: 0 0 18px; border-bottom: 2px solid #10263a; }
.board-page .board-desc { margin: 0; font-size: 16.5px; color: #77848e; }
.board-page .board-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.board-page .board-tools .search { display: flex; gap: 8px; }
.board-page .board-tools input[type=search] { width: 240px; max-width: 46vw; height: 46px; padding: 0 16px; border: 1px solid #dcdfe3; border-radius: 40px; font-size: 15px; background: #fff; }
.board-page .board-tools input[type=search]:focus { outline: none; border-color: var(--q-blue-dp); box-shadow: 0 0 0 3px rgba(10,111,168,.12); }
.board-page .board-tools .search button { height: 46px; padding: 0 22px; border: 1px solid #dcdfe3; border-radius: 40px; background: #fff; font-size: 15px; font-weight: 600; color: #55636f; cursor: pointer; }
.board-page .board-tools .search button:hover { border-color: var(--q-blue-dp); color: var(--q-blue-dp); }
.board-page .board-tools .btn-primary { display: inline-flex; align-items: center; height: 46px; padding: 0 26px; border: 0; border-radius: 40px; background: var(--q-blue-dp); color: #fff; font-size: 15.5px; font-weight: 700; }
.board-page .board-tools .btn-primary:hover { background: #085a89; text-decoration: none; }
.board-page .board-table { font-size: 16.5px; }
.board-page .board-table thead { background: transparent; }
.board-page .board-table th { padding: 14px 12px; border-bottom: 1px solid #d5dade; font-size: 14.5px; font-weight: 700; color: #55636f; text-transform: none; letter-spacing: 0; }
.board-page .board-table td { padding: 20px 12px; border-bottom: 1px solid #eef1f4; color: #6b7883; }
.board-page .board-table .num-col, .board-page .board-table .meta-col { width: 110px; text-align: center; }
.board-page .board-table td:not(.subj) { text-align: center; font-size: 15.5px; }
.board-page .board-table .subj a { font-size: 17px; font-weight: 600; color: var(--q-heading); letter-spacing: -.02em; }
.board-page .board-table .subj a:hover { color: var(--q-blue-dp); text-decoration: none; }
.board-page .board-table tbody tr:hover { background: #f7fbfd; }
.board-page .board-table tr.notice-row { background: #f3f8fb; }
.board-page .board-table tr.notice-row td { border-bottom-color: #dfe9ef; }
.board-page .board-table .badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 20px; background: #eef1f4; font-size: 12.5px; color: #6b7883; vertical-align: 2px; }
.board-page .board-table .empty { padding: 90px 0 !important; font-size: 16px; color: #98a4ad; }
.board-page .pager { display: flex; justify-content: center; gap: 6px; margin-top: 34px; }
.board-page .pager a { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid #dcdfe3; border-radius: 40px; font-family: Poppins, sans-serif; font-size: 15px; color: #55636f; }
.board-page .pager a:hover { border-color: var(--q-blue-dp); color: var(--q-blue-dp); text-decoration: none; }
.board-page .pager a.on { background: var(--q-blue-dp); border-color: var(--q-blue-dp); color: #fff; }
.post-view { max-width: 980px; padding: 50px 20px 100px; word-break: keep-all; }
.post-view .post-head { padding: 0 0 22px; border-bottom: 2px solid #10263a; }
.post-view .post-head h1 { margin: 0 0 12px; font-size: 30px; font-weight: 700; line-height: 1.45; letter-spacing: -.03em; color: var(--q-heading); }
.post-view .post-head h1::after { display: none; }
.post-view .post-meta { font-size: 15px; color: #8b97a1; }
.post-view .post-body { padding: 36px 0 44px; font-size: 17px; line-height: 1.95; color: #4d5a64; border-bottom: 1px solid #e6e9ec; }
.post-view .post-body p { max-width: none; }
.post-view .event-bar { margin-top: 18px; padding: 12px 18px; border-radius: 8px; background: #f3f8fb; font-size: 15.5px; color: var(--q-blue-dp); }
.post-view .post-actions { display: flex; gap: 8px; margin: 28px 0 0; }
.post-view .post-actions .btn { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border: 1px solid #dcdfe3; border-radius: 40px; background: #fff; font-size: 15.5px; font-weight: 600; color: #55636f; }
.post-view .post-actions .btn:hover { border-color: var(--q-blue-dp); color: var(--q-blue-dp); text-decoration: none; }
.post-view .prev-next { margin-top: 30px; border-top: 1px solid #e6e9ec; }
.post-view .prev-next a { display: block; padding: 18px 4px; border-bottom: 1px solid #eef1f4; font-size: 16px; color: #55636f; }
.post-view .prev-next a:hover { color: var(--q-blue-dp); text-decoration: none; }
@media (max-width: 768px) {
.board-page .board-head { align-items: flex-start; }
.board-page .board-tools { width: 100%; margin-left: 0; flex-wrap: wrap; }
.board-page .board-tools .search { flex: 1; }
.board-page .board-tools input[type=search] { flex: 1; width: auto; max-width: none; }
.board-page .board-table th:nth-child(2), .board-page .board-table td:nth-child(2),
.board-page .board-table th:nth-last-child(1), .board-page .board-table td:nth-last-child(1),
.board-page .board-table th:nth-last-child(2), .board-page .board-table td:nth-last-child(2) { display: none; }
.board-page .board-table .subj a { font-size: 15.5px; }
.board-page .board-table td { padding: 16px 8px; }
.post-view .post-head h1 { font-size: 22px; }
.post-view .post-body { font-size: 15.5px; line-height: 1.9; }
}
/* 페이지 로딩 순간 드롭다운이 잠깐 보이는 현상 방지 — 로드 완료 후에만 전환 효과 */
.primary-nav .submenu { transition: none !important; }
html.nav-ready .primary-nav .submenu { transition: opacity .16s ease, transform .16s ease, visibility .16s !important; }
.page-hero + .post-write .board-head { display: none; }
.page-hero + .post-write { padding-top: 50px; }
/* ===== 고객 수정요청 반영 (2026-10) ===== */
/* 인사말 — 대표이사 서명 */
.greet5-sign { flex-wrap: wrap; }
.greet5-signimg { width: 148px; height: auto; margin-left: 6px; align-self: center; mix-blend-mode: multiply; }
/* 오시는길 — 업무시간 보조문구 */
.loc-list .loc-sm { font-size: 15px; font-weight: 500; color: #8b97a1; }
@media (max-width: 768px) {
.greet5-signimg { width: 116px; }
.loc-list .loc-sm { display: block; font-size: 13.5px; }
}
/* 서비스 — 시험 분야 중분류/소분류 (환경신뢰성시험) */
.sv-sec-lead { margin: -8px 0 24px; font-size: 16.5px; line-height: 1.75; color: #5a5a5a; }
.sv-sec-lead strong { font-weight: 700; color: var(--q-blue-dp); }
.sv-fields2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.sv-fields2 > li { padding: 26px 28px 24px; border: 1px solid #e3e7eb; border-top: 3px solid var(--q-blue-dp); border-radius: 14px; background: #fff; }
.sv-f2-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid #eef1f4; }
.sv-f2-head strong { font-family: Poppins, 'Noto Sans KR', sans-serif; font-size: 19px; font-weight: 700; color: var(--q-heading); }
.sv-f2-head em { padding: 5px 12px; border-radius: 20px; background: #e6f1f8; font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--q-blue-dp); white-space: nowrap; }
.sv-fields2 > li > ul { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.sv-fields2 > li > ul > li { position: relative; padding-left: 13px; font-size: 15.5px; line-height: 1.7; color: #5a5a5a; word-break: keep-all; }
.sv-fields2 > li > ul > li::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--q-blue-dp); opacity: .5; }
.sv-note.is-scope { line-height: 1.8; color: #8b97a1; }
@media (max-width: 900px) { .sv-fields2 { grid-template-columns: 1fr; } }
/* 메인 숫자 영역 — 숫자가 아닌 값(KOLAS 등) */
.q-stat-word { color: var(--q-blue-br); letter-spacing: -.01em; }
/* ===== 자주 묻는 질문 (/{lang}/faq) ===== */
.faq-wrap { padding: 58px 20px 80px; }
.faq-lead { margin: 0 0 30px; font-size: 17px; line-height: 1.8; color: #5a5a5a; word-break: keep-all; }
.faq-empty { margin: 0; padding: 54px 20px; border: 1px dashed #d8dee4; border-radius: 14px; text-align: center; font-size: 16px; color: #8b97a1; }
.faq-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.faq-tabs button { padding: 9px 20px; border: 1px solid #dbe2e8; border-radius: 40px; background: #fff; font-family: inherit; font-size: 15px; color: #5a6b77; cursor: pointer; transition: .18s; }
.faq-tabs button:hover { border-color: var(--q-blue-dp); color: var(--q-blue-dp); }
.faq-tabs button.is-on { border-color: var(--q-blue-dp); background: var(--q-blue-dp); color: #fff; font-weight: 600; }
.faq-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--q-heading); }
.faq-item { border-bottom: 1px solid #e6e9ec; }
.faq-item summary { display: flex; align-items: center; gap: 14px; padding: 22px 8px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .faq-qt { color: var(--q-blue-dp); }
.faq-mark { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #e6f1f8; font-family: Poppins, sans-serif; font-size: 15px; font-weight: 700; color: var(--q-blue-dp); }
.faq-mark.is-a { background: var(--q-blue-dp); color: #fff; }
.faq-qt { flex: 1 1 auto; font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--q-heading); word-break: keep-all; }
.faq-cat { flex: 0 0 auto; padding: 4px 11px; border-radius: 20px; background: #f1f5f8; font-size: 13px; color: #7c8b97; white-space: nowrap; }
.faq-chev { flex: 0 0 auto; color: #9aa7b1; transition: transform .22s; }
.faq-item details[open] .faq-chev { transform: rotate(180deg); color: var(--q-blue-dp); }
.faq-a { display: flex; gap: 14px; padding: 4px 8px 26px; }
.faq-at { flex: 1 1 auto; padding-top: 5px; font-size: 16.5px; line-height: 1.85; color: #5a5a5a; word-break: keep-all; }
.faq-at a { color: var(--q-blue-dp); text-decoration: underline; }
.faq-at ul, .faq-at ol { margin: 8px 0; padding-left: 20px; }
.faq-cta { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-top: 46px; padding: 32px 36px; border-radius: 16px; background: linear-gradient(120deg, #0d2d4f 0%, #10548a 60%, var(--q-blue-dp) 100%); color: #fff; }
.faq-cta-t { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.faq-cta-d { margin: 0; font-size: 15.5px; color: #c6dcec; }
.faq-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.faq-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border: 1px solid rgba(255,255,255,.45); border-radius: 40px; font-size: 15.5px; font-weight: 600; color: #fff; text-decoration: none; transition: .18s; }
.faq-btn:hover { background: rgba(255,255,255,.12); }
.faq-btn.is-main { background: #fff; border-color: #fff; color: var(--q-blue-dp); }
.faq-btn.is-main:hover { background: #e9f3fa; }
@media (max-width: 768px) {
.faq-wrap { padding: 36px 20px 60px; }
.faq-qt { font-size: 16px; }
.faq-cat { display: none; }
.faq-at { font-size: 15.5px; }
.faq-cta { padding: 26px 22px; }
.faq-cta-btns { width: 100%; }
.faq-btn { flex: 1 1 auto; justify-content: center; }
}
/* 글 보기 — 첨부/댓글 제목을 h2로 올리면서(헤딩 계층 교정) 기존 크기 유지 */
.post-view .attachments-block h2, .post-view .comments h2 { font-size: 14px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .04em; color: #8b97a1; font-weight: 700; }
.post-view .comments h2 { font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--q-heading); margin-bottom: 14px; }
.faq-item .faq-qt { margin: 0; } /* summary 안의 h2 — 기본 여백 제거 */
/* ===== 모바일 내비게이션 — 아코디언(+ 버튼으로 하위메뉴) ===== */
.nav-acc { display: none; }
@media (max-width: 768px) {
/* 패널: 화면을 넘지 않게 + 스크롤 */
.primary-nav {
gap: 0;
max-height: calc(100vh - var(--header-h, 64px));
overflow-y: auto; -webkit-overflow-scrolling: touch;
padding: 4px 0 10px; overscroll-behavior: contain;
}
html.nav-open body { overflow: hidden; }
.primary-nav .nav-item { position: relative; display: block; width: 100%; border-bottom: 1px solid #edf1f4; }
.primary-nav .nav-item:last-child { border-bottom: 0; }
.primary-nav .nav-item > a {
display: block; padding: 16px 58px 16px 22px; border-bottom: 0 !important;
font-size: 16.5px; font-weight: 600; color: var(--q-heading); letter-spacing: -.02em;
}
/* + 버튼 */
.nav-acc {
display: block; position: absolute; top: 4px; right: 8px;
width: 46px; height: 46px; padding: 0; border: 0; background: transparent; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.nav-acc span, .nav-acc span::before {
content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px;
margin: -1px 0 0 -7.5px; border-radius: 2px; background: #93a2ad; transition: transform .22s ease, background .22s ease;
}
.nav-acc span::before { margin: 0; left: 0; top: 0; transform: rotate(90deg); }
.nav-item.is-open > .nav-acc span { background: var(--q-blue-dp); }
.nav-item.is-open > .nav-acc span::before { transform: rotate(0deg); } /* + → − */
.nav-item.is-open > a { color: var(--q-blue-dp); }
/* 하위메뉴: 기본 닫힘 — 애니메이션 없이 즉시 표시(모바일 렌더링 안정) */
.primary-nav .submenu {
display: none;
position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
min-width: 0; border: 0; box-shadow: none; background: #f7fafc;
margin: 0; padding: 6px 0 10px; overflow: visible; max-height: none; transition: none;
}
.nav-item.is-open > .submenu { display: block; }
.primary-nav .submenu a {
display: block; padding: 12px 22px 12px 34px; font-size: 15px; font-weight: 500;
color: #5a6b77; opacity: 1; position: relative;
}
.primary-nav .submenu a::before {
content: ''; position: absolute; left: 22px; top: 50%; width: 4px; height: 4px;
margin-top: -2px; border-radius: 50%; background: var(--q-blue-dp); opacity: .45;
}
.primary-nav .submenu a:hover, .primary-nav .submenu a:active { color: var(--q-blue-dp); background: #eef5fa; }
}
@media (max-width: 768px) {
/* 패널 슬라이드 애니메이션 제거 — 중간 프레임에서 빈 화면으로 보이는 문제 방지 */
.primary-nav { transition: none !important; }
.primary-nav .submenu li { margin: 0; }
}
/* 모바일: 데스크톱 호버 규칙(.has-children:hover .submenu의 translateX(-50%))이
우선순위가 높아 하위메뉴가 화면 밖(왼쪽 절반)으로 밀리던 문제 수정 */
@media (max-width: 768px) {
.primary-nav .submenu,
.primary-nav .nav-item.has-children:hover .submenu,
.primary-nav .nav-item.has-children:focus-within .submenu {
position: static !important; left: auto !important; top: auto !important;
transform: none !important; display: none;
}
.primary-nav .nav-item.is-open > .submenu { display: block !important; }
}
@media (max-width: 768px) {
/* 터치 후 남는 호버 색상 제거 (열린 항목만 강조) */
.primary-nav > a:hover,
.primary-nav .nav-item > a:hover,
.primary-nav .nav-item:hover > a { color: var(--q-heading); }
.primary-nav .nav-item.is-open > a,
.primary-nav .nav-item.is-open:hover > a { color: var(--q-blue-dp); }
.nav-acc span, .nav-acc span::before { transition: transform .15s ease, background .15s ease; }
}
/* ===== 일본어·중국어 줄바꿈 =====
word-break: keep-all 은 공백으로 단어를 구분하는 한국어용 설정이라,
공백이 없는 일본어·중국어에서는 한 줄이 끊기지 않아 가로 스크롤이 생긴다. */
body.lang-jp, body.lang-cn,
body.lang-jp *, body.lang-cn * {
word-break: normal !important;
overflow-wrap: break-word;
line-break: strict;
}
/* 모바일 터치 영역 — 햄버거·로고·히어로 점 */
@media (max-width: 768px) {
.nav-toggle { width: 44px; height: 44px; padding: 10px; }
.logo img { min-height: 36px; }
/* 점은 그대로 두고 투명 영역만 넓혀 터치하기 쉽게 */
.q-hero-dots button { position: relative; }
.q-hero-dots button::after { content: ''; position: absolute; left: -6px; right: -6px; top: -14px; bottom: -14px; }
}
/* ===== 언어 선택 버튼 ===== */
.lang-switcher { position: relative; }
.lang-btn {
display: inline-flex; align-items: center; gap: 7px;
height: 38px; padding: 0 12px 0 13px;
border: 1px solid #dde4ea; border-radius: 999px; background: #fff;
font-family: Poppins, 'Noto Sans KR', sans-serif;
font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--q-heading);
cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s, color .18s;
}
.lang-btn .lang-ico { width: 15px; height: 15px; color: var(--q-blue-dp); transition: transform .35s ease; }
.lang-btn .lang-code { line-height: 1; padding-top: 1px; }
.lang-btn .lang-caret { width: 11px; height: 11px; color: #9fb0bd; transition: transform .22s ease, color .18s; }
.lang-switcher:hover .lang-btn,
.lang-switcher:focus-within .lang-btn {
border-color: var(--q-blue-dp); background: #f2f9fd; color: var(--q-blue-dp);
box-shadow: 0 4px 14px rgba(10,111,168,.16);
}
.lang-switcher:hover .lang-ico { transform: rotate(18deg); }
.lang-switcher:hover .lang-caret,
.lang-switcher:focus-within .lang-caret { transform: rotate(180deg); color: var(--q-blue-dp); }
.lang-switcher ul {
display: block; position: absolute; right: 0; top: calc(100% + 10px);
min-width: 182px; margin: 0; padding: 7px; list-style: none;
background: #fff; border: 1px solid #e6ecf1; border-radius: 14px;
box-shadow: 0 18px 40px rgba(10,40,70,.16);
opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
transition: opacity .18s ease, transform .18s ease, visibility .18s;
z-index: 300;
}
.lang-switcher:hover ul, .lang-switcher:focus-within ul {
opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.lang-switcher ul::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.lang-switcher ul::after { /* 말풍선 꼭지 */
content: ''; position: absolute; right: 18px; top: -5px; width: 10px; height: 10px;
background: #fff; border-left: 1px solid #e6ecf1; border-top: 1px solid #e6ecf1;
transform: rotate(45deg); border-radius: 2px 0 0 0;
}
.lang-switcher li a {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
min-height: 42px; padding: 0 12px; border-radius: 9px;
font-size: 15px; font-weight: 500; color: #46525c; text-decoration: none;
transition: background .14s, color .14s;
}
.lang-switcher li a .lang-abbr {
font-family: Poppins, sans-serif; font-size: 11.5px; font-weight: 600;
letter-spacing: .08em; color: #a9b6c1; transition: color .14s;
}
.lang-switcher li a:hover { background: #f2f7fb; color: var(--q-heading); }
.lang-switcher li a:hover .lang-abbr { color: #7f8e9a; }
.lang-switcher li a.is-active { background: #e9f4fb; color: var(--q-blue-dp); font-weight: 700; }
.lang-switcher li a.is-active .lang-abbr { color: var(--q-blue-dp); opacity: .75; }
.lang-switcher li a.is-active::after {
content: ''; width: 15px; height: 15px; flex: 0 0 15px; margin-left: -4px;
background: var(--q-blue-dp);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.lang-switcher li a.is-active .lang-abbr { order: 2; }
@media (max-width: 768px) {
.lang-btn { height: 36px; padding: 0 10px 0 11px; gap: 6px; font-size: 12.5px; }
.lang-btn .lang-ico { width: 14px; height: 14px; }
.lang-switcher ul { min-width: 168px; }
.lang-switcher li a { min-height: 46px; font-size: 15.5px; }
}
/* 오시는길 — 지도 iframe (CSP 분리용) */
.loc-map-frame { display: block; width: 100%; height: 520px; border: 0; border-radius: 12px; background: #eef2f5; }
@media (max-width: 1040px) { .loc-map-frame { height: 440px; } }
@media (max-width: 768px) { .loc-map-frame { height: 380px; } }