@charset "utf-8";
/* biz_04 (GREENON) 테마 · 메인화면 전용 스타일 */

/* ── 히어로 ──────────────────────────────────────── */
.hero{position:relative;margin-top:-78px;padding:170px 0 110px;overflow:hidden;background:
  radial-gradient(720px 480px at 85% 8%,rgba(132,204,22,.14),transparent 60%),
  radial-gradient(560px 420px at 6% 90%,rgba(31,122,67,.10),transparent 62%),#fff}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.hero .lb{display:inline-block;font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--grn-500);background:var(--lime-soft);border-radius:999px;padding:8px 18px}
.hero h2{font-size:52px;font-weight:900;line-height:1.22;margin:22px 0 18px}
.hero h2 em{position:relative;color:var(--grn-700)}
.hero h2 em:after{content:"";position:absolute;left:-2px;right:-2px;bottom:4px;height:.38em;background:rgba(132,204,22,.4);z-index:-1;border-radius:6px}
.hero p{font-size:17px;color:var(--mut);line-height:1.8;max-width:520px}
.hero .btns{display:flex;gap:12px;margin-top:30px}
.hero .vis{position:relative;min-height:420px}
.hero .blob{position:absolute;inset:0;border-radius:58% 42% 55% 45%/50% 55% 45% 50%;box-shadow:var(--shadow);animation:b04blob 12s ease-in-out infinite}
.hero .ring{position:absolute;border:2px dashed rgba(31,122,67,.35);border-radius:50%}
.hero .r1{width:130px;height:130px;left:-34px;top:-16px;animation:b04spin 26s linear infinite}
.hero .r2{width:78px;height:78px;right:-16px;bottom:-8px;background:rgba(132,204,22,.22);border:0}
.hero .wave{position:absolute;left:0;right:0;bottom:-1px;color:var(--mint);line-height:0}
.hero .wave svg{width:100%;height:52px}
@keyframes b04blob{0%,100%{border-radius:58% 42% 55% 45%/50% 55% 45% 50%}50%{border-radius:45% 55% 44% 56%/57% 45% 55% 43%}}
@keyframes b04spin{to{transform:rotate(360deg)}}

/* ── 공통 섹션 ───────────────────────────────────── */
.sec{padding:88px 0}
.sec.tint{background:var(--mint);position:relative}
.sec.tint .wave.top{position:absolute;left:0;right:0;top:-1px;transform:scaleY(-1);color:#fff;line-height:0}
.sec.tint .wave.top svg{width:100%;height:46px}
.sec.tint.products .wave.top{color:#fff}
.s-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px;flex-wrap:wrap}

/* ── 핵심 가치 ───────────────────────────────────── */
.values .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:34px}
.values .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 26px;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
.values .card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.values .ico{display:inline-flex;width:62px;height:62px;border-radius:22px;background:var(--mint);align-items:center;justify-content:center;margin-bottom:18px}
.values .ico svg{width:32px;height:32px;fill:none;stroke:var(--grn-700);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.values b{display:block;font-family:'Nunito',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grn-300)}
.values h4{font-size:19.5px;margin:6px 0 10px}
.values p{font-size:14.5px;color:var(--mut);line-height:1.75}

/* ── 순환 프로세스 ───────────────────────────────── */
.process .circle-wrap{position:relative;max-width:860px;margin:46px auto 0;min-height:520px}
.process .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:190px;height:190px;border-radius:50%;background:var(--grn-700);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Nunito',sans-serif;font-weight:900;font-size:21px;letter-spacing:.06em;box-shadow:var(--shadow)}
.process .core:before{content:"";position:absolute;inset:-26px;border:2px dashed rgba(31,122,67,.35);border-radius:50%;animation:b04spin 30s linear infinite}
.process .steps .st{position:absolute;width:260px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;box-shadow:var(--shadow-sm)}
.process .st b{font-family:'Nunito',sans-serif;font-weight:900;font-size:15px;color:var(--lime);background:var(--grn-700);border-radius:999px;padding:4px 12px}
.process .st h4{font-size:18px;margin:10px 0 6px}
.process .st p{font-size:13.5px;color:var(--mut);line-height:1.7}
.process .st1{left:0;top:0}
.process .st2{right:0;top:0}
.process .st3{right:0;bottom:0}
.process .st4{left:0;bottom:0}

/* ── 지표 ────────────────────────────────────────── */
.stats .bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:36px}
.stats .bar{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:26px;box-shadow:var(--shadow-sm)}
.stats .num{display:flex;align-items:baseline;gap:4px}
.stats .num strong{font-family:'Nunito',sans-serif;font-weight:900;font-size:40px;color:var(--grn-700)}
.stats .num em{font-size:16px;font-weight:700;color:var(--grn-300)}
.stats .bar p{margin:6px 0 16px;font-size:14px;color:var(--mut)}
.stats .track{height:10px;border-radius:999px;background:var(--mint-2);overflow:hidden}
.stats .track span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--grn-500),var(--lime));transition:width 1.2s cubic-bezier(.25,.8,.3,1)}
.stats .bar.in .track span{width:var(--pct)}

/* ── 제품 카러셀 ─────────────────────────────────── */
.p-nav{display:flex;gap:8px;align-items:center}
.p-nav .pn{width:46px;height:46px;border-radius:50%;background:#fff;border:1.5px solid var(--line);font-size:21px;color:var(--grn-700);transition:.2s}
.p-nav .pn:hover{background:var(--grn-700);color:#fff;border-color:var(--grn-700)}
.ptrack{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 20px;scrollbar-color:var(--grn-300) var(--mint-2)}
.ptrack::-webkit-scrollbar{height:8px}
.ptrack::-webkit-scrollbar-track{background:var(--mint-2);border-radius:999px}
.ptrack::-webkit-scrollbar-thumb{background:var(--grn-300);border-radius:999px}
.pcard{flex:0 0 300px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pcard .th{height:190px}
.pcard .in{padding:18px 20px 22px}
.pcard .cat{display:inline-block;font-size:12px;font-weight:700;color:var(--grn-500);background:var(--lime-soft);border-radius:999px;padding:4px 12px;margin-bottom:8px}
.pcard h4{font-size:16.5px;line-height:1.5}

/* ── 소식 ────────────────────────────────────────── */
.news .ncards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.news .ncard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:26px 26px 56px;box-shadow:var(--shadow-sm);transition:.25s}
.news .ncard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--grn-300)}
.news .date{font-family:'Nunito',sans-serif;font-weight:700;font-size:13px;color:var(--grn-300)}
.news h4{margin-top:10px;font-size:16.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news .new{display:inline-flex;width:18px;height:18px;border-radius:50%;background:var(--lime);color:var(--grn-900);font-size:11px;font-weight:800;align-items:center;justify-content:center;vertical-align:2px}
.news .go{position:absolute;left:26px;bottom:20px;font-size:18px;color:var(--grn-300);transition:.2s}
.news .ncard:hover .go{transform:translateX(6px);color:var(--grn-700)}

/* ── CTA ─────────────────────────────────────────── */
.cta{padding-bottom:20px}
.cta .box{display:flex;justify-content:space-between;align-items:center;gap:30px;background:linear-gradient(120deg,var(--grn-700),var(--grn-500) 70%,#3E9463);border-radius:var(--r-lg);padding:52px 56px;color:#fff;box-shadow:var(--shadow);flex-wrap:wrap;position:relative;overflow:hidden}
.cta .box:before{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;background:rgba(132,204,22,.25)}
.cta h3{font-size:27px;font-weight:900}
.cta p{margin-top:10px;opacity:.88;max-width:520px;line-height:1.75}
.cta .act{display:flex;flex-direction:column;gap:12px;align-items:flex-end;position:relative}
.cta .tel{font-size:14px;opacity:.9}
.cta .tel a{font-family:'Nunito',sans-serif;font-weight:800;font-size:17px}

/* ── 반응형 ──────────────────────────────────────── */
@media (max-width:1024px){
  .hero{padding:150px 0 90px}
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:36px}
  .hero h2{font-size:40px}
  .hero .vis{min-height:320px;max-width:460px}
  .values .cards,.stats .bars{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .news .ncards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .process .circle-wrap{min-height:0}
  .process .core{display:none}
  .process .steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
  .process .steps .st{position:static;width:auto}
}
@media (max-width:768px){
  .hero h2{font-size:33px}
  .sec{padding:64px 0}
  .news .ncards{grid-template-columns:minmax(0,1fr)}
  .cta .box{padding:38px 30px}
  .cta .act{align-items:flex-start}
}
@media (max-width:480px){
  .hero{padding:135px 0 76px}
  .hero h2{font-size:28px}
  .hero .btns{flex-direction:column;align-items:stretch}
  .values .cards,.stats .bars,.process .steps{grid-template-columns:minmax(0,1fr)}
  .pcard{flex-basis:250px}
}