@charset "utf-8";

/* =========================================================
   공통
   ========================================================= */

/* 제목 폰트 : 여기어때 잘난체 고딕 (코리아핀테크위크 메인 카피와 동일, 단일 굵기라 font-weight normal) */
@font-face {
    font-family: 'JalnanGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.works-stream .works-whale .section-heading,
.services-sec .services-area .section-heading,
.inquiry-sec .inq-intro .section-heading {
    font-family: 'JalnanGothic', 'NanumGothic', 'Helvetica Neue', Arial, sans-serif;
    font-weight: normal;
}

/* ---------- 부드러운 관성 스크롤 (Lenis 권장 설정) ---------- */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* 스크롤 등장 효과 : 줄 단위 마스크 (motion.js) / fx-word : 줄을 단어로 나눈 단위 */
.fx-line,
.fx-word {
    display: inline-block;
}

/* ---------- 스크롤 스태킹 : 현재 섹션은 고정, 다음 섹션이 덮으며 올라옴 ---------- */
body.stack-scroll {
    height: auto;
    min-height: 100%;
}

.stack-panel {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.stack-panel + .stack-panel {
    box-shadow: 0 -12px 30px rgba(0,0,0,.08);
}

/* 모든 섹션 브라우저 높이 100% (내용이 더 길면 늘어남) */
header.stack-panel,
section.stack-panel {
    min-height: 100vh;
}

/* 두번째 섹션부터는 상단 메뉴 아래 영역 높이 (--nav-h 는 motion.js 에서 지정) */
.stack-panel + .stack-panel {
    min-height: calc(100vh - 50px);
    min-height: calc(100vh - var(--nav-h, 50px));
}

/* ---------- 푸터 (높이 80px) ----------
   마지막 섹션(문의)이 고정(sticky)된 상태라 그 위로 올라오도록 position + z-index 지정 */
.site-footer {
    position: relative;
    z-index: 2;
    height: 80px;
    background-color: #000;
    font-size: 13px;
    color: rgba(255,255,255,.5);
}

.footer-in {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}

.site-footer p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.site-footer a {
    color: rgba(255,255,255,.7);
}

.site-footer a:hover,
.site-footer a:focus {
    color: #6eb92b;
    text-decoration: none;
}

/* ---------- 페이지 가로 넘침 차단 : 화면 밖으로 나간 요소 때문에 가로로 밀리거나 흔들리지 않게
   clip 은 스크롤 영역을 만들지 않으므로 position:sticky(섹션 겹침)에 영향 없음 ---------- */
html,
body {
    overflow-x: clip;
}

/* 섹션 단위로도 넘침 차단 (iOS 에서 html/body 설정이 적용되지 않는 경우 대비, 섹션1·2 는 이미 hidden)
   스크롤 영역이 아닌 섹션 자신은 sticky 동작에 영향 없음 */
.services-sec,
.inquiry-sec,
.site-footer {
    overflow: hidden;
}

/* ---------- 상단 메뉴 : 처음엔 숨김 → 두번째 섹션이 80% 이상 보이면 서서히 나타남 (motion.js initNav)
   nav-reveal 은 스크립트가 붙이므로 스크립트가 없으면 항상 보임 ---------- */
#mainNav.nav-reveal {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: opacity .6s ease, -webkit-transform .6s ease, visibility 0s .6s;
    transition: opacity .6s ease, transform .6s ease, visibility 0s .6s;
}

#mainNav.nav-reveal.nav-show {
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
    transform: none;
    -webkit-transition: opacity .6s ease, -webkit-transform .6s ease, visibility 0s;
    transition: opacity .6s ease, transform .6s ease, visibility 0s;
}

/* ---------- 상단 메뉴 : 왼쪽 로고 ---------- */
#mainNav .nav-logo {
    display: block;
    padding-top: 12px;
    padding-bottom: 12px;
}

#mainNav .nav-logo img {
    display: block;
    width: auto;
    height: 100%;
}

/* ---------- 섹션1 : 메인 비주얼 ---------- */
header.hero-motion {
    overflow: hidden;
    background-image: none;
    background-color: #fff;
}

header.hero-motion .header-content-inner p {
    margin-top: 30px;
}

/* 로고 : 글자마다 여러 폰트로 바뀌다가 차례로 실제 로고 이미지 조각으로 고정 (motion.js)
   스크립트가 없거나 동작 줄이기 설정이면 이미지 그대로 표시 */
header.hero-motion .hero-logo-box {
    position: relative;
    display: inline-block;
    width: 64%;
}

header.hero-motion .hero-logo-box img {
    display: block;
    width: 100%;
    height: auto;
}

header.hero-motion .hero-logo-fx {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

header.hero-motion .hero-logo-box.is-fx img {
    opacity: 0;
}

header.hero-motion .hero-logo-box.is-fx .hero-logo-fx {
    display: block;
}

header.hero-motion .fx-slot {
    position: absolute;
    top: 0;
    height: 100%;
}

header.hero-motion .fx-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    opacity: 0;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

header.hero-motion .fx-ch {
    position: absolute;
    top: 22%;
    left: 50%;
    height: 75%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    line-height: 1;
    white-space: nowrap;
    color: #6eb92b;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

header.hero-motion .fx-slot.is-done .fx-img {
    opacity: 1;
}

header.hero-motion .fx-slot.is-done .fx-ch {
    opacity: 0;
}

/* 왼쪽 위 점 : 두번 깜빡인 뒤 나타남 (1초) */
header.hero-motion .fx-slot.is-blink .fx-img {
    -webkit-animation: fxBlink 1s linear forwards;
    animation: fxBlink 1s linear forwards;
}

@-webkit-keyframes fxBlink {
    0%, 40%, 80% { opacity: 0; }
    20%, 60%, 100% { opacity: 1; }
}

@keyframes fxBlink {
    0%, 40%, 80% { opacity: 0; }
    20%, 60%, 100% { opacity: 1; }
}

/* Scroll Down (마우스 아이콘 + 점 이동) */
header.hero-motion .scroll-down {
    position: relative;
    top: 150px;   /* 아래로 150px (로고·문구 위치는 그대로) */
    display: inline-block;
    -webkit-transition: color .35s;   /* creative.css a { transition: all } → 등장 효과(투명도)와 겹치지 않게 색만 */
    transition: color .35s;
    color: #1b1f79;
    text-decoration: none;
}

header.hero-motion .scroll-down:hover,
header.hero-motion .scroll-down:focus {
    color: #6eb92b;
    text-decoration: none;
}

header.hero-motion .scroll-down-txt {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    letter-spacing: .5px;
}

header.hero-motion .scroll-down-mouse {
    position: relative;
    display: block;
    width: 24px;
    height: 40px;
    margin: 0 auto;
    border: 2px solid currentColor;
    border-radius: 12px;
}

header.hero-motion .scroll-down-dot {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background-color: currentColor;
    -webkit-animation: scrollDot 1.6s ease-in-out infinite;
    animation: scrollDot 1.6s ease-in-out infinite;
}

@-webkit-keyframes scrollDot {
    0%   { opacity: 0; -webkit-transform: translateY(0); }
    30%  { opacity: 1; }
    100% { opacity: 0; -webkit-transform: translateY(16px); }
}

@keyframes scrollDot {
    0%   { opacity: 0; transform: translateY(0); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(16px); }
}

/* ---------- 섹션2 : Works (고래 + 물고기 떼) ---------- */
.works-stream {
    position: relative;
    padding: 0;
    overflow: hidden;
    background-color: #a9c602;
    background-image: radial-gradient(ellipse at 50% 50%, #b4d00e 0%, #a9c602 45%, #93ad00 100%);
}

.works-stream .works-stream-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.works-stream .works-whale {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.works-stream .works-whale:before {
    content: "";
    position: absolute;
    top: -40%;
    left: -15%;
    right: -15%;
    bottom: -40%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(147,173,0,.55) 0%, rgba(147,173,0,0) 70%);
}

.works-stream .works-whale .section-heading {
    margin-bottom: 0;
    color: rgba(255,255,255,.95);
    text-shadow: 0 2px 18px rgba(80,95,0,.35);
}

.works-stream .works-fish {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    color: #fff;
    line-height: 1;
    pointer-events: none;
    will-change: transform;
}

.works-stream .works-fish.d0 { opacity: .35; }
.works-stream .works-fish.d1 { opacity: .6; }
.works-stream .works-fish.d2 { opacity: .9; }

.works-stream .works-source-wrap {
    padding-bottom: 60px;
}

.works-stream .works-source {
    color: rgba(255,255,255,.7);
}

/* 모션 동작 중에는 원문 목록을 화면에서 숨김 (검색엔진/스크린리더용으로 유지) */
.works-stream.is-live .works-source-wrap {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ---------- 섹션2 : Works (초록 영역, 프로젝트명 흐름) ---------- */
.works-sec {
    padding: 0;
}

/* 화면 높이(100%) 대신 초록 영역 높이만큼만 (섹션 공통 min-height 해제) */
.stack-panel.works-sec {
    min-height: 0;
}

/* ---------- 섹션3 : Services ---------- */
.services-sec {
    padding: 0;
    background-color: #fff;
}

.services-sec .services-area .section-heading {
    margin-bottom: 0;
}

/* Services : 왼쪽 제목 + 문의하기 / 오른쪽 번호 목록 (etrium.art 대관 안내 구성 참고) */
.svc-intro-link {
    display: inline-block;
    margin-top: 24px;
    padding-bottom: 2px;
    border-bottom: 2px solid #222;
    font-weight: bold;
    color: #222;
}

.svc-intro-link:hover,
.svc-intro-link:focus {
    border-color: #6eb92b;
    color: #6eb92b;
    text-decoration: none;
}

/* 클릭 후 남는 포커스 테두리 제거 (bootstrap a:focus outline) */
.svc-intro-link:focus {
    outline: 0;
}

.svc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.svc-item + .svc-item {
    border-top: 1px solid #e5e5e5;
}

.svc-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.svc-no {
    margin-right: 12px;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    font-weight: bold;
    color: #6eb92b;
}

.svc-tit {
    margin: 0;
    font-weight: bold;
    color: #222;
}

.svc-desc {
    margin: 0;
    color: #666;
}

@-webkit-keyframes svcDescIn {
    from { opacity: 0; -webkit-transform: translateY(-6px); }
    to { opacity: 1; -webkit-transform: none; }
}

@keyframes svcDescIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ---------- 문의 접수 (etrium.art 문의 폼 구성 참고) ---------- */
.inquiry-sec {
    background-color: #111;
    color: #fff;
}

/* 배경 영상 : 바다 영상 강한 흐림 + 어둡게 처리한 images/contact_bg.mp4
   위·아래는 섹션 배경(#111)으로 서서히 사라짐 */
.inquiry-sec .inq-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
}

.inquiry-sec .inq-bg video {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.inquiry-sec > .container {
    position: relative;
    z-index: 1;
}

/* Contact 제목 : Services 제목과 같은 폰트·크기, 색상은 문의하기 버튼 배경색 */
.inquiry-sec .inq-intro .section-heading {
    margin-bottom: 0;
    color: #6eb92b;
}

/* 문의 접수 완료 모달 (js/inquiry.js) : 상단 로고 + 안내 문구 + 하단 닫기 */
.inq-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px;
    background-color: rgba(0,0,0,.6);
    -webkit-animation: inqModalIn .3s ease;
    animation: inqModalIn .3s ease;
}

.inq-modal[hidden] {
    display: none;
}

.inq-modal-box {
    width: 100%;
    max-width: 440px;
    background-color: #fff;
    text-align: center;
    color: #222;
}

.inq-modal-logo {
    display: block;
    width: 90px;
    height: auto;
    margin: 0 auto 24px;
}

.inq-modal-txt {
    margin: 0 0 28px;
    line-height: 1.7;
    word-break: keep-all;
}

.inq-modal-close {
    padding: 6px 24px;
    border: 1px solid #222;
    background-color: #fff;
    font-size: 13px;
    color: #222;
    -webkit-transition: background-color .2s, color .2s;
    transition: background-color .2s, color .2s;
}

.inq-modal-close:hover,
.inq-modal-close:focus {
    outline: none;
    background-color: #222;
    color: #fff;
}

@-webkit-keyframes inqModalIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes inqModalIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Contact 아래 이메일 : Services '문의하기' 와 같은 크기(기본 글자 크기), 흰색 · 링크 없음
   모바일 자동 링크는 index.php format-detection 으로 막고, 그래도 생기면(iOS) 링크 모양·동작 제거 */
.inq-intro-mail {
    margin: 24px 0 0;
    color: #fff;
}

.inq-intro-mail a {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none;
}

.inq-form {
    background-color: #fff;
    color: #222;
}

/* 봇 함정 칸 : 화면 밖으로 숨김 (display:none 은 일부 봇이 건너뛰므로 사용하지 않음) */
.inq-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.inq-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.inq-lb {
    margin: 0;
    font-weight: bold;
    color: #222;
}

.inq-lb i,
.inq-agree-chk i {
    margin-left: 3px;
    font-style: normal;
    color: #6eb92b;
}

.inq-field {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

.inq-form input[type=text],
.inq-form input[type=email],
.inq-form select,
.inq-form textarea {
    width: 100%;
    padding: 8px 2px;
    border: 0;
    border-bottom: 1px solid #222;
    border-radius: 0;
    background: transparent;
    font-size: 15px;
    color: #222;
    -webkit-appearance: none;
    appearance: none;
}

.inq-form textarea {
    height: 160px;
    resize: vertical;
    line-height: 1.6;
}

.inq-form input:focus,
.inq-form select:focus,
.inq-form textarea:focus {
    outline: none;
    border-bottom-color: #6eb92b;
}

.inq-form ::placeholder {
    color: #aaa;
}

.inq-form select {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23222' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center;
    font-weight: bold;
    cursor: pointer;
}

/* 예산 : 선택칸 50% + '기타' 선택 시 오른쪽 금액 입력칸 (js/inquiry.js) */
.inq-budget {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.inq-form .inq-budget select {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 50%;
}

.inq-form input.inq-budget-etc {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin-left: 20px;
}

.inq-form input.inq-budget-etc[hidden] {
    display: none;
}

/* 예산 선택 : 선택 전 안내 문구는 흐리게 (is-empty : js/inquiry.js) */
.inq-form .inq-budget select.is-empty {
    color: #aaa;
    font-weight: normal;
}

.inq-form .inq-budget option {
    font-weight: normal;
    color: #222;
}

.inq-hp-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.inq-dash {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 0 10px;
    color: #999;
}

.inq-count {
    margin: 6px 0 0;
    font-size: 13px;
    text-align: right;
    color: #999;
}

.inq-count b {
    color: #222;
}

.inq-file-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.inq-file-info {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin: 0 14px 0 0;
    padding: 8px 2px;
    border-bottom: 1px solid #222;
    font-size: 15px;
    color: #aaa;
}

.inq-file-btn {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin: 0;
    padding: 0 22px;
    line-height: 42px;
    background: #111;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}

.inq-file-btn span {
    margin-left: 6px;
    font-weight: normal;
}

.inq-file-btn input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.inq-file-btn:focus-within {
    outline: 2px solid #6eb92b;
}

.inq-file-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.inq-file-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    color: #444;
    word-break: break-all;
}

.inq-file-del {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-left: 10px;
    padding: 0 6px;
    border: 0;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: #999;
}

.inq-file-del:hover {
    color: #e05a3a;
}

.inq-file-ext {
    margin: 8px 0 0;
    font-size: 13px;
    color: #999;
}

.inq-ext-mo {
    display: none;
}

.inq-agree {
    padding: 18px 20px;
    background: #f5f5f5;
}

.inq-agree-txt {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.6;
    color: #777;
}

.inq-agree-chk {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    color: #222;
    cursor: pointer;
}

.inq-agree-chk input {
    margin: 0 6px 0 0;
    vertical-align: -2px;
}

.inq-submit {
    text-align: center;
}

.inq-submit button {
    padding: 0 60px;
    line-height: 52px;
    border: 0;
    background: #6eb92b;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
}

.inq-submit button:hover {
    background: #5ea521;
}

.inq-submit button:disabled {
    background: #aaa;
    cursor: default;
}

/* =========================================================
   PC (768px 이상)
   ========================================================= */
@media (min-width: 768px) {
    /* body 높이가 auto 이므로 % 대신 vh 사용 (creative.css 의 min-height:100% 대체) */
    header.hero-motion {
        min-height: 100vh;
    }

    /* 상단 메뉴 배경 항상 흰색 : creative.css 는 스크롤 전 투명(affix 시 흰색)이라
       화면보다 긴 섹션이 메뉴 아래로 지나갈 때 비쳐 보임 → 고정 */
    #mainNav.navbar-default {
        border-color: rgba(34,34,34,.05);
        background-color: #fff;
    }

    /* 초록 영역 높이 : 42vh × 1.3 ≒ 55vh (최소 300 × 1.3 = 390px) */
    .works-stream .works-stream-stage {
        height: 55vh;
        min-height: 390px;
    }

    .services-sec .services-area {
        padding: 96px 0 40px;
    }

    /* 제목 크기 : 44px × 1.3 ≒ 57px */
    .services-sec .services-area .section-heading,
    .inquiry-sec .inq-intro .section-heading {
        font-size: 57px;
    }

    .svc-intro {
        padding-right: 40px;
    }

    .svc-item {
        padding: 20px 0;
    }

    .svc-item:first-child {
        padding-top: 4px;
    }

    .svc-head {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 38%;
        flex: 0 0 38%;
        padding-right: 20px;
    }

    .svc-no {
        font-size: 15px;
    }

    .svc-tit {
        font-size: 22px;
    }

    /* 설명 더보기 버튼은 모바일 전용 */
    .svc-more {
        display: none;
    }

    .svc-desc {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        font-size: 15px;
        line-height: 1.7;
    }

    /* 아래 여백 = 80px + 푸터 높이 80px (푸터가 고정된 이 섹션 위로 올라와 덮으므로)
       margin-top : 앞 섹션(Works+Services)이 끝까지 보인 뒤 잠시 머무는 스크롤 구간 */
    .inquiry-sec {
        margin-top: 40vh;
        padding: 80px 0 160px;
    }

    .footer-in {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .footer-info span {
        margin-left: 24px;
    }

    .inq-intro {
        padding-right: 40px;
    }

    .inq-form {
        padding: 50px 56px 44px;
    }

    .inq-modal-box {
        padding: 44px 40px 32px;
    }

    .inq-modal-txt {
        font-size: 17px;
    }

    .inq-row {
        margin-bottom: 30px;
    }

    .inq-lb {
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 120px;
        padding-top: 9px;
        font-size: 15px;
    }

    .inq-hp-wrap select {
        width: 30%;
    }

    .inq-agree {
        margin: 10px 0 30px 120px;
    }

    .works-stream .works-whale {
        width: 90%;
        max-width: 1000px;
    }

    /* Services 제목과 같은 57px. 좁은 화면에서는 2줄 유지되도록 화면폭 비례 */
    .works-stream .works-whale .section-heading {
        font-size: 48px;
        font-size: min(57px, 5.4vw);
        line-height: 1.25;
    }

    .works-stream .works-fish.d0 { font-size: 12px; }
    .works-stream .works-fish.d1 { font-size: 14px; }
    .works-stream .works-fish.d2 { font-size: 17px; }
}

/* =========================================================
   모바일 (767px 이하)
   ========================================================= */
@media (max-width: 767px) {
    /* 상단 메뉴 : 펼침 버튼 없이 로고 오른쪽에 Contact 바로 표시 */
    #mainNav .navbar-collapse {
        position: absolute;
        top: 0;
        right: 15px;
        margin: 0;
        padding: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    #mainNav .navbar-nav {
        margin: 0;
    }

    #mainNav .navbar-nav > li > a {
        padding: 15px 0;
        line-height: 20px;
    }

    header.hero-motion {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    /* 섹션2 : 메뉴 아래 화면 높이 전체 (섹션 공통 min-height:0 해제) */
    .stack-panel.works-sec {
        min-height: calc(100vh - 50px);
        min-height: calc(100vh - var(--nav-h, 50px));
    }

    .works-stream .works-stream-stage {
        height: calc(100vh - 50px);
        height: calc(100vh - var(--nav-h, 50px));
    }

    .services-sec .services-area {
        padding: 40px 0 20px;
    }

    /* 섹션 제목 크기 (섹션2 가운데 제목도 동일) */
    .services-sec .services-area .section-heading,
    .inquiry-sec .inq-intro .section-heading {
        font-size: 38px;
    }

    /* 제목 영역 : 화면 폭 80% 가운데 정렬 (본문과 왼쪽 선 맞춤) */
    .svc-intro {
        width: 80vw;
        max-width: 100%;
        margin: 0 auto 16px;
        padding-left: 0;
        padding-right: 0;
    }

    .svc-intro-link {
        margin-top: 14px;
    }

    /* 본문 : 화면 폭 80% 가운데 정렬 (Contact 작성폼과 동일) */
    .svc-list {
        width: 80vw;
        max-width: 100%;
        margin: 0 auto;
    }

    .svc-item {
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 12px 0;
    }

    /* 설명 : '+ 더보기' 를 눌러야 보임 (motion.js 가 has-more / is-open 지정, 스크립트 없으면 그대로 표시) */
    .svc-list.has-more .svc-desc {
        display: none;
    }

    .svc-list.has-more .svc-item.is-open .svc-desc {
        display: block;
        -webkit-animation: svcDescIn .35s ease;
        animation: svcDescIn .35s ease;
    }

    .svc-more {
        display: block;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin: 0 0 0 20px;
        padding: 0;
        white-space: nowrap;
        border: 0;
        background: none;
        font-size: 13px;
        line-height: 1.6;
        text-align: left;
        color: #999;
    }

    .svc-more:focus {
        outline: 0;
    }

    /* 번호 칸 폭 고정(30px) → 설명 들여쓰기(padding-left 30px)와 제목 왼쪽이 글꼴과 관계없이 일치 */
    .svc-no {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 30px;
        flex: 0 0 30px;
        margin-right: 0;
        font-size: 16px;
    }

    .svc-tit {
        font-size: 21px;
    }

    .svc-desc {
        margin-top: 6px;
        padding-left: 30px;
        font-size: 16px;
        line-height: 1.65;
    }

    /* 아래 여백 = 30px + 푸터 높이 80px / margin-top : 앞 섹션이 잠시 머무는 스크롤 구간 */
    .inquiry-sec {
        margin-top: 30vh;
        padding: 30px 0 110px;
    }

    .footer-in {
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }

    .site-footer p,
    .footer-info span {
        font-size: 12px;
    }

    .footer-info span {
        display: block;
    }

    /* 제목 영역 : 화면 폭 80% 가운데 정렬 (작성폼과 왼쪽 선 맞춤) */
    .inq-intro {
        width: 80vw;
        max-width: 100%;
        margin: 0 auto 18px;
        padding-left: 0;
        padding-right: 0;
    }

    .inq-intro-mail {
        margin-top: 8px;
    }

    /* 작성폼 : 화면 폭 80% 가운데 정렬 */
    .inq-form {
        width: 80vw;
        max-width: 100%;
        margin: 0 auto;
        padding: 14px 18px 20px;
    }

    /* 입력칸은 16px 유지 (16px 미만이면 iPhone 에서 입력 시 화면이 확대됨) */
    .inq-form input[type=text],
    .inq-form input[type=email],
    .inq-form select,
    .inq-form textarea,
    .inq-file-list li,
    .inq-submit button {
        font-size: 16px;
    }

    .inq-agree-chk {
        font-size: 14px;
    }

    .inq-form textarea {
        height: 74px;
    }

    /* 안내 문구·플레이스홀더 : 작게 */
    .inq-form ::placeholder,
    .inq-count,
    .inq-file-info,
    .inq-file-ext,
    .inq-agree-txt {
        font-size: 13px;
    }

    .inq-count {
        margin-top: 4px;
    }

    /* 첨부 안내 : 모바일은 확장자 목록 대신 짧은 문구 (버튼 아래 줄), 확장자 안내 줄은 숨김 */
    .inq-ext-pc,
    .inq-file-ext {
        display: none;
    }

    .inq-ext-mo {
        display: inline;
    }

    .inq-modal-box {
        padding: 34px 20px 26px;
    }

    .inq-modal-txt {
        font-size: 16px;
    }

    /* 항목명 + 입력칸 한 줄 (문의내용만 항목명 위 / 입력칸 아래) */
    .inq-row {
        margin-bottom: 16px;
    }

    .inq-lb {
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 70px;
        padding-top: 9px;
        font-size: 16px;
    }

    .inq-row-col {
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .inq-row-col .inq-lb {
        width: auto;
        padding-top: 0;
        margin-bottom: 2px;
    }

    .inq-form .inq-budget select {
        width: 100%;
    }

    .inq-hp-wrap select {
        width: 32%;
    }

    /* 예산 '기타' 금액칸 : 폭이 좁아 선택칸 아래 줄에 전체 폭으로 */
    .inq-budget {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .inq-form input.inq-budget-etc {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        margin: 10px 0 0;
    }

    .inq-dash {
        padding: 0 6px;
    }

    /* 첨부 : 항목명 옆에 파일찾기 버튼, 안내 문구는 아래 줄 전체 폭 */
    .inq-file-bar {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .inq-file-btn {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        padding: 0 12px;
        font-size: 14px;
        line-height: 32px;
    }

    .inq-file-info {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        margin: 6px 0 0;
    }

    .inq-agree {
        margin: 4px 0 18px;
        padding: 12px 14px;
    }

    .inq-agree-txt {
        margin-bottom: 6px;
    }

    .inq-submit button {
        width: 100%;
        line-height: 46px;
    }

    .works-stream .works-whale {
        width: 92%;
    }

    /* Services·Contact 제목과 같은 크기 */
    .works-stream .works-whale .section-heading {
        font-size: 38px;
        line-height: 1.25;
    }

    /* 줄 단위로 줄바꿈 : Online & Mobile Solution / for Exhibitions / & Conferences */
    .works-stream .works-whale .fx-line {
        display: block;
    }

    .works-stream .works-whale .section-heading br {
        display: none;
    }

    .works-stream .works-fish.d0 { font-size: 11px; }
    .works-stream .works-fish.d1 { font-size: 12px; }
    .works-stream .works-fish.d2 { font-size: 14px; }
}