@charset "utf-8";
/* ==========================================================================
   FARMERS BRANDING — 최소 골격 (GLOBAL-HEADER + HOME-01 + GLOBAL-FOOTER)
   수치·브레이크포인트는 designlab.small-b.kr 의 렌더 결과와 원본 CSS
   (layout.css / main.css / component.css / style-heima.css / common.css) 를
   기준으로 필요한 규칙만 다시 작성했다.
   ========================================================================== */

/* ---------- tokens (style-heima.css :root) ---------- */
:root {
    --main-gap: 80px;
    --main-width: 1280px;
    --basic-color: #111;
    --bg-color: #fff;
    --point-color01: #fe3501;
    --point-color0101: #eb4217;
    --header-color: #fff;
    --header-height: 90px;
    --radius01: 4px;
    --logo-width: 238px; /* 원본 200px(704.6 단위) 과 같은 글자 크기를 유지한 폭 = 838.6 × 200 / 704.6 */
}
@media (width <= 1360px) { :root { --main-gap: 40px; } }
@media (width <= 1200px) { :root { --header-height: 82px; } }
@media (width <= 1023px) { :root { --header-height: 76px; } }
@media (width <= 767px)  { :root { --main-gap: 20px; --header-height: 64px; --logo-width: 207px; } } /* 원본 174px 비례 */

/* ---------- reset (common.css + bootstrap reboot 중 사용 부분) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, p, a, img, strong, ul, li, nav, header, footer, main, section, address {
    margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
}
ul, li { list-style: none; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    font-family: Pretendard, "Malgun Gothic", 맑은고딕, 돋움, dotum, Helvetica, AppleSDGothicNeo, sans-serif;
    font-weight: 400;
    color: var(--basic-color);
    letter-spacing: -1px;
    line-height: 1.25;
    word-break: keep-all;
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; background-color: transparent; cursor: pointer; }
strong { font-weight: bold; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.poppins { font-family: Poppins, sans-serif; }

/* 준비 중인 페이지: 링크처럼 보이지 않게 (커서·hover 효과 없음) */
.is-pending { cursor: default; }

.grid01 { position: relative; padding-left: var(--main-gap); padding-right: var(--main-gap); }
.main-grid { position: relative; width: var(--main-width); margin: 0 auto; }
@media (width <= 1360px) { .main-grid { width: auto; padding-left: var(--main-gap); padding-right: var(--main-gap); } }

.scr-none { overflow-y: hidden; scrollbar-width: none; }
.scr-none::-webkit-scrollbar { display: none; }

/* ---------- logo (원본 logo.svg 의 글자 비율을 Montserrat 로 재구성) ---------- */
.logo-mark { display: block; width: var(--logo-width); height: auto; overflow: visible; }
.logo-mark text { font-family: Montserrat, sans-serif; fill: var(--basic-color); }
.logo-mark .lg-main { font-weight: 900; font-size: 134px; letter-spacing: -4px; }
.logo-mark .lg-sub  { font-weight: 500; font-size: 49px;  letter-spacing: -1px; }

/* ==========================================================================
   GLOBAL-HEADER
   ========================================================================== */
header {
    position: fixed; top: 0; z-index: 200; width: 100%;
    transition: .5s cubic-bezier(0.08, 0.03, 0.22, 0.87);
}
header .bg-header {
    position: absolute; top: 0; width: 100%; height: 100%;
    max-height: var(--header-height); background-color: var(--header-color);
    transition: .3s ease-in-out;
}
header .inner-header {
    display: flex; justify-content: space-between; align-items: center;
    height: var(--header-height); border-bottom: 1px solid #ddd;
    transition: .3s ease-in-out;
}
header .logo { position: relative; z-index: 20; transition: .3s ease-in-out; }
header .logo a { display: block; }
header .logo .logo-mark { transition: .3s ease-in-out; }
header.fixed { box-shadow: 0 5px 10px rgba(0, 0, 0, .03); }

/* lnb */
.lnb {
    position: relative; display: flex; justify-content: center;
    height: 100%; max-height: var(--header-height); overflow: hidden;
    transition: .3s ease-in-out;
}
.lnb > ul { display: flex; justify-content: center; align-items: center; gap: 34px; }
.lnb > ul::after { content: ""; display: block; } /* 원본 .clearfix::after 가 flex 항목으로 남아 만드는 끝 간격 재현 */
.lnb > ul > li { position: relative; }
.lnb > ul > li > a,
.lnb > ul > li > span {
    position: relative; display: flex; justify-content: center; align-items: center;
    height: var(--header-height); padding: 0 10px;
    font-size: 16px; letter-spacing: -.75px; text-transform: uppercase;
    transition: .3s ease-in-out;
}
.lnb > ul > li > a::after {
    content: ""; position: absolute; bottom: 29px; display: block;
    width: calc(100% - 20px); height: 2px; background-color: transparent;
}
.lnb > ul > li > a:hover,
.lnb > ul > li > a.on { font-weight: bold; }
.lnb > ul > li > a.on::after { background-color: var(--basic-color); }
.lnb > ul > li:last-child { margin-left: 10px; }
/* 문의하기 버튼: 디자인 시스템 Point(Field Green) 바탕 + 검정 글자 (녹색 면 위 글자는 항상 검정) */
.lnb > ul > li:last-child > a {
    width: 158px; height: 40px; padding: 0;
    font-size: 14px; font-weight: 500; color: var(--fb-ink, #111311);
    background-color: var(--fb-point, #59C07F); border-radius: var(--radius01);
}
.lnb > ul > li:last-child > a::after { content: none; }
@media (width <= 1280px) {
    .lnb > ul > li:first-child { display: none; }
    .lnb > ul > li:last-child > a { width: 146px; }
}
@media (width <= 1200px) {
    .lnb > ul { gap: 20px; }
    .lnb > ul > li:last-child { margin-left: 0; }
}
@media (width <= 1023px) { .lnb > ul > li:not(:last-child) { display: none; } }
@media (width <= 767px)  { .lnb > ul > li:last-child { display: none; } }
/* 1023px 이하: 메뉴를 햄버거 안에만 숨기지 않고 로고 옆 한 줄에 늘 보인다(홈은 로고로). 모바일은 로고를 줄여 자리를 만든다.
   페이지 위 여백·고정 탭은 --header-offset 을 쓴다(지금은 헤더 높이와 같다) */
:root { --header-offset: var(--header-height); }
@media (width <= 1023px) {
    .lnb > ul { gap: 4px; }
    .lnb > ul::after { content: none; }
    .lnb > ul > li:not(:last-child), .lnb > ul > li:last-child { display: block; }
    .lnb > ul > li:first-child { display: none; }
    .lnb > ul > li > a { padding: 0 8px; font-size: 15px; }
    .lnb > ul > li > a::after { bottom: 24px; width: calc(100% - 16px); }
    .lnb > ul > li:last-child { margin-left: 8px; }
    .lnb > ul > li:last-child > a { width: auto; height: 36px; padding: 0 16px; font-size: 14px; }
    .lnb .allmenu { margin-left: 14px; }
}
/* 모바일: 메뉴가 모두 한 줄에 보이므로 햄버거는 뺀다(회사 정보는 푸터에 있다) */
@media (width <= 767px) {
    :root { --logo-width: 100px; }
    .lnb > ul { gap: 0; }
    .lnb > ul > li > a { padding: 0 6px; font-size: 13px; letter-spacing: -0.5px; }
    .lnb > ul > li > a::after { bottom: 20px; width: calc(100% - 12px); }
    .lnb > ul > li:last-child { margin-left: 6px; }
    .lnb > ul > li:last-child > a { height: 30px; padding: 0 11px; font-size: 12px; }
    .lnb .allmenu { display: none; }
}
@media (width <= 380px) {
    :root { --logo-width: 90px; }
    .lnb > ul > li > a { padding: 0 4px; font-size: 12.5px; }
    .lnb > ul > li > a::after { width: calc(100% - 8px); }
    .lnb > ul > li:last-child > a { padding: 0 9px; }
}

/* 햄버거 버튼 */
.allmenu { display: flex; justify-content: center; align-items: center; }
.menu_all_btn { position: relative; display: block; width: 30px; height: 40px; z-index: 99; cursor: pointer; }
.menu_all_btn span {
    display: block; position: absolute; width: 30px; height: 2px;
    background: #222; border-radius: 9px; opacity: 1; left: 50%;
    transform: translateX(calc(-50% + .5px)) rotate(0deg);
    transition: .25s ease-in-out;
}
.menu_all_btn span:nth-child(1) { top: 9px; }
.menu_all_btn span:nth-child(2),
.menu_all_btn span:nth-child(3) { top: 18px; }
.menu_all_btn span:nth-child(4) { top: 27px; }
.menu_all_btn.open span { background-color: #fff; }
.menu_all_btn.open span:nth-child(1),
.menu_all_btn.open span:nth-child(4) { width: 0%; top: 11px; left: 50%; }
.menu_all_btn.open span:nth-child(2) { margin-left: -13px; top: 19px; transform: rotate(45deg); }
.menu_all_btn.open span:nth-child(3) { margin-left: -13px; top: 19px; transform: rotate(-45deg); }

/* 메인(HOME-01 위) 투명 헤더 — main.css header:not(.fixed) */
header:not(.fixed) .bg-header { background-color: transparent; }
header:not(.fixed) .inner-header { border-bottom: 0; }
header:not(.fixed) .logo .logo-mark text { fill: #fff; }
header:not(.fixed) .lnb > ul > li:not(:last-child) > a,
header:not(.fixed) .lnb > ul > li:not(:last-child) > span { color: #fff; }
header:not(.fixed) .lnb > ul > li:last-child > a { color: var(--fb-ink, #111311); background-color: var(--fb-point, #59C07F); }
header:not(.fixed) .lnb > ul > li > a.on::after { background-color: #fff; }
header:not(.fixed) .menu_all_btn:not(.open) span { background-color: #fff; }

/* ---------- 전체 메뉴 (#sitemapBG / #sitemapNAV / .pc-gnb) ---------- */
#sitemapBG {
    position: fixed; width: 95%; height: 95%; top: 50%; left: 50%;
    transform: translate(-50%, -50%); border-radius: 20px;
    background: var(--basic-color); backdrop-filter: blur(7px);
    z-index: 98; opacity: 0; transition: 1s; pointer-events: none; will-change: transform;
}
#sitemapNAV {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; min-width: 320px;
    border-radius: 20px; pointer-events: none; z-index: 98; opacity: 0;
    background: transparent; transition: 1s; overflow: hidden; scrollbar-width: none;
}
#sitemapBG.open { display: block; opacity: 1; pointer-events: auto; width: 100%; height: 100%; border-radius: 0; }
#sitemapNAV.open { pointer-events: auto; opacity: 1; width: 100%; border-radius: 0; }
#sitemapNAV:not(.open) { visibility: hidden; transition: 1s, visibility 0s 1s; }

.pc-gnb { color: #fff; }
.pc-gnb .logo { position: absolute; top: 0; display: flex; align-items: center; height: var(--header-height); padding-left: var(--main-gap); }
.pc-gnb .logo .logo-mark text { fill: #fff; }
.pc-gnb .inner-sec { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; height: 100dvh; }
.pc-gnb .nav-allmenu > li > a,
.pc-gnb .nav-allmenu > li > span {
    display: inline-flex; align-items: flex-start;
    font-size: 52px; font-weight: bold; line-height: 102px;
    transition: .3s ease-in-out;
}
.pc-gnb .nav-allmenu > li > .fw { font-weight: 400; }
.pc-gnb .nav-allmenu > li > a:hover,
.pc-gnb .nav-allmenu > li > a.on { color: var(--fb-point); }
.pc-gnb .row-info { display: flex; flex-direction: column; gap: 40px; }
.pc-gnb .col-info:last-child { padding-top: 60px; }
.pc-gnb .tit-info { font-size: 17px; font-weight: bold; color: var(--fb-point); margin-bottom: 20px; }
.pc-gnb .col-info > ul > li { display: flex; align-items: center; font-size: 20px; line-height: 28px; }
.pc-gnb .col-info > ul > li:not(:last-child) { margin-bottom: 12px; }
.pc-gnb .col-info .i-item { width: 35px; font-family: Poppins, sans-serif; letter-spacing: 0; }
@media (width <= 1200px) {
    .pc-gnb .nav-allmenu > li > a, .pc-gnb .nav-allmenu > li > span { font-size: 48px; line-height: 94px; }
}
@media (width <= 1023px) {
    #sitemapBG { background: rgba(0, 0, 0, .7); width: 100%; height: 100%; border-radius: 0; }
    #sitemapNAV { border-radius: 0; background: var(--basic-color); left: auto; right: 0; max-width: 620px; overflow-y: auto; }
    .pc-gnb .inner-sec { grid-template-columns: 1fr; padding-top: 80px; padding-bottom: 60px; height: auto; }
    .pc-gnb .nav-allmenu > li > a, .pc-gnb .nav-allmenu > li > span { font-size: 32px; line-height: 64px; }
    .pc-gnb .contact-info { margin-top: 40px; }
    .pc-gnb .col-info > ul > li { font-size: 18px; line-height: 26px; }
    .pc-gnb .col-info .i-item { width: 30px; }
}
@media (width <= 767px) {
    .pc-gnb .inner-sec { padding-top: 70px; padding-bottom: 120px; }
    .pc-gnb .nav-allmenu > li > a, .pc-gnb .nav-allmenu > li > span { font-size: 24px; line-height: 48px; }
    .pc-gnb .contact-info { margin-top: 70px; }
    .pc-gnb .row-info { gap: 30px; }
    .pc-gnb .col-info:last-child { padding-top: 30px; }
    .pc-gnb .tit-info { font-size: 15px; margin-bottom: 14px; }
    .pc-gnb .col-info > ul > li { font-size: 14px; line-height: 18px; }
    .pc-gnb .col-info > ul > li:not(:last-child) { margin-bottom: 7px; }
    .pc-gnb .col-info .i-item { width: 30px; }
}
@media (width <= 500px) { #sitemapNAV { right: auto; left: 0; } }

/* 확정 전 회사 정보 표시 */
.is-tbd { opacity: .4; font-family: Pretendard, "Malgun Gothic", sans-serif; letter-spacing: -1px; }

/* ==========================================================================
   HOME-01 (main.css .main-visual + component.css .videobg)
   ========================================================================== */
.main-visual { position: relative; overflow: hidden; transition: .3s ease-in-out; }
.main-visual .main-vis { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }
.main-visual .main-video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.videobg { position: relative; width: 100%; height: 100%; overflow: hidden; background: #111; }
.videobg-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 헤더·카피가 밝은 장면에서도 읽히도록 영상 위에 옅은 검은 막 (그라데이션 아님) */
.videobg::after { content: ""; position: absolute; inset: 0; background: var(--fb-ink); opacity: .28; pointer-events: none; }
/* 메인 카피: 왼쪽 정렬, 화면 아래쪽. 왼쪽 시작선은 헤더 로고와 같은 --main-gap */
.main-visual .main-copy { position: absolute; left: 0; right: 0; padding: 0 var(--main-gap); bottom: clamp(64px, 11vh, 120px); z-index: 2; color: var(--fb-paper); letter-spacing: -0.02em; }
.main-copy .fb-ph-chip { margin-bottom: 20px; }
.main-copy-title { display: block; font-size: clamp(34px, 4.4vw, 64px); font-weight: 500; line-height: 1.25; text-wrap: balance; }
/* 큰 글자는 글꼴 자체의 왼쪽 여백(약 0.04em)만큼 안쪽에서 시작해 보여서, 그만큼 당겨 로고·설명 글과 세로선을 맞춘다 */
.main-copy-title { margin-left: -0.04em; }
.main-copy-desc { margin-top: 20px; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.7; letter-spacing: 0; opacity: .88; }
@media (width <= 767px) {
    .main-visual .main-copy { bottom: 44px; }
    .main-copy-desc br { display: none; }
}
.videobg-placeholder {
    position: absolute; inset: 0; display: flex; justify-content: center; align-items: center;
    font-family: Poppins, sans-serif; font-size: 13px; letter-spacing: 0; text-transform: uppercase;
    color: rgba(255, 255, 255, .22);
}
@media (width <= 1280px) { .main-visual .main-vis { height: 780px; } }
@media (width <= 1200px) { .main-visual .main-vis { height: 680px; } }
@media (width <= 1023px) { .main-visual .main-vis { height: 600px; } }
@media (width <= 767px)  { .main-visual .main-vis { height: 580px; } }
@media (width <= 640px)  { .main-visual .main-vis { height: 480px; } }

/* ==========================================================================
   GLOBAL-FOOTER
   ========================================================================== */
/* 검정 한 면: (메인) 문의 한마디 → 선 → 로고·메뉴·회사 정보. 녹색은 문의 버튼에만 */
footer { --f-text: #fff; --f-sub: rgba(255, 255, 255, .5); --f-line: rgba(255, 255, 255, .16);
    color: var(--f-text); padding: 80px 0 64px; background: #111311; letter-spacing: -0.02em; }
footer.has-cta { padding-top: 120px; }

footer .foot-cta { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: 80px; margin-bottom: 56px; }
footer .foot-cta::after { content: ""; position: absolute; left: var(--main-gap); right: var(--main-gap); bottom: 0; height: 1px; background: var(--f-line); }
footer .foot-cta-title { font-size: clamp(36px, 4.4vw, 64px); font-weight: 500; line-height: 1.36; letter-spacing: -0.03em; }
footer .foot-cta-btn { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 12px; height: 64px; padding: 0 30px; border-radius: 8px; background: #59C07F; color: #111311; font-size: 18px; font-weight: 500; text-decoration: none; transition: gap .3s; }
footer .foot-cta-btn:hover { gap: 18px; }
footer .foot-cta-btn svg { width: 22px; height: 22px; }
footer .foot-cta-btn:focus-visible { outline: 2px solid #59C07F; outline-offset: 4px; }

footer .inner-footer { display: grid; grid-template-columns: 1fr auto; gap: 40px 64px; align-items: start; }
footer .logo { margin-right: 0; }
footer .logo .logo-mark { width: 180px; }
footer .logo .logo-mark text { fill: #fff; }
footer .info-footer { display: grid; grid-template-columns: auto auto; gap: 0 72px; align-items: start; }
/* 저작권 줄은 메뉴·주소 아래 한 줄로, 서비스 안내 메뉴와 같은 왼쪽 선에서 시작(오른쪽 아래 문의톡 버튼에 가리지 않게) */
footer .info-footer .copyright { grid-column: 1 / -1; }
footer .footer-nav01 > ul { display: flex; gap: 56px; }
footer .footer-nav01 .dp01 { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--f-sub); margin-bottom: 14px; }
footer .footer-nav01 .dp02 > li > a,
footer .footer-nav01 .dp02 > li > span { font-size: 15px; font-weight: 500; color: var(--f-text); line-height: 30px; transition: opacity .2s; }
footer .footer-nav01 .dp02 > li > a:hover { opacity: .6; }
footer .footer-nav01 .dp02 .is-pending { opacity: .45; }
footer .info-footer address > ul > li { display: flex; font-size: 14px; font-weight: 500; line-height: 30px; }
footer .info-footer address .item-col { width: 84px; color: var(--f-sub); }
footer .info-footer address .vl-col { flex: 1; }
footer .info-footer address .poppins { letter-spacing: 0; }
footer .info-footer .copyright { font-size: 12px; color: var(--f-sub); letter-spacing: 0; margin-top: 40px; }
footer .info-footer .copyright strong { font-weight: 600; color: var(--f-text); }
#contact { scroll-margin-top: calc(var(--header-offset) + 40px); outline: none; }

@media (width <= 1100px) {
    footer .inner-footer { grid-template-columns: 1fr; }
    footer .info-footer { gap: 56px; }
}
@media (width <= 767px) {
    footer { padding: 64px 0 108px; } /* 오른쪽 아래 문의톡 버튼에 저작권 줄이 가리지 않게 */
    footer.has-cta { padding-top: 72px; }
    footer .foot-cta { flex-direction: column; align-items: flex-start; gap: 28px; padding-bottom: 48px; margin-bottom: 40px; }
    footer .foot-cta-title { font-size: 30px; line-height: 1.3; }
    footer .foot-cta-btn { height: 54px; padding: 0 24px; font-size: 16px; }
    footer .info-footer { grid-template-columns: 1fr; gap: 32px; }
    footer .info-footer .copyright { margin-top: 0; }
    footer .footer-nav01 > ul { gap: 40px; }
}

/* ---------- 로고: 가로형 새싹 로고(초록 #056738 / 흰색). 높이로 크기를 정한다 ---------- */
:root { --logo-h: 40px; }
@media (width <= 1023px) { :root { --logo-h: 34px; } }
@media (width <= 767px)  { :root { --logo-h: 27px; } }
@media (width <= 380px)  { :root { --logo-h: 24px; } }
.logo-img { display: block; width: auto; height: var(--logo-h); }
header .logo .logo-img.on-dark { display: none; }
header:not(.fixed) .logo .logo-img.on-light { display: none; }
header:not(.fixed) .logo .logo-img.on-dark { display: block; }
footer .logo .logo-img { height: 44px; }
@media (width <= 767px) { footer .logo .logo-img { height: 36px; } }

/* ---------- 줄바꿈: 본문은 마지막 줄에 한 단어만 남지 않게, 제목은 줄 길이를 고르게 (모든 화면) ---------- */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }