@charset "utf-8";
/* =====================================================
   바이오가스 정제 설비 — business/css/biogas.css
   Accent: var(--c_base1) — ATE 로고 블루
   ===================================================== */

/* ── 데스크탑 (1200px~) ───────────────────────────────── */
@media screen and (min-width: 1200px), print {

	.biogas-page {background:#fff;}

	/* ─── HERO ─── */
	.bz-hero {
		position:relative; padding:140px 70px 120px; overflow:hidden;
		min-height:520px; display:flex; align-items:center;
		width:1400px; border-radius:20px; margin:100px auto;
	}
	.bz-hero-bg {
		position:absolute; inset:0; background-size:cover; background-position:center;
		filter:brightness(.42) saturate(1.15);
		transform:scale(1.06); transition:transform 8s ease;
	}
	.bz-hero.is-in .bz-hero-bg {transform:scale(1);}
	.bz-hero-overlay {
		position:absolute; inset:0;
		background:
			radial-gradient(circle at 15% 30%, rgba(21,101,192,.55) 0%, transparent 55%),
			radial-gradient(circle at 85% 70%, rgba(0,172,193,.45) 0%, transparent 55%),
			linear-gradient(135deg, rgba(13,43,78,.88), rgba(13,43,78,.55));
	}
	.bz-hero-inner {position:relative; z-index:1; color:#fff;}
	.bz-hero-title {
		font-size:var(--fs64); font-weight:800; line-height:1.15;
		letter-spacing:-.02em; margin:14px 0 26px; color:#fff;
	}
	.bz-hero-title em {
		font-style:normal;
		background:linear-gradient(120deg, #a8d9ff, #7de3f0);
		background-clip:text; -webkit-background-clip:text; color:transparent;
	}
	.bz-hero-lead {
		font-size:var(--fs20); color:rgba(255,255,255,.85); line-height:1.7;
		max-width:760px; margin-bottom:40px;
	}
	.bz-hero-lead strong {color:#a8d9ff; font-weight:700;}
	.bz-hero-stats {display:flex; flex-wrap:wrap; gap:14px;}
	.bz-hero-stats .pill {
		display:inline-flex; align-items:baseline; gap:10px;
		padding:14px 24px; border-radius:100px;
		background:rgba(255,255,255,.08); backdrop-filter:blur(12px);
		border:1px solid rgba(255,255,255,.18);
	}
	.bz-hero-stats .pill i {
		font-style:normal; font-size:var(--fs28); font-weight:800; color:#fff;
		background:linear-gradient(120deg, #a8d9ff, #7de3f0);
		background-clip:text; -webkit-background-clip:text; color:transparent;
	}
	.bz-hero-stats .pill em {font-style:normal; font-size:var(--fs14); color:rgba(255,255,255,.7); letter-spacing:-.01em;}

	/* ─── 공통 섹션 ─── */
	.bz-sec {padding:110px 0;}
	.bz-sec + .bz-sec {border-top:1px solid var(--border1);}
	.bz-sec-head {text-align:center; max-width:900px; margin:0 auto 60px;}
	.bz-sec-head .d-eyebrow {padding-left:0;}
	.bz-sec-head .d-eyebrow::before {display:none;}
	.bz-sec-head .d-title-desc {margin:14px auto 0;}

	/* ─── 01. 개요 ─── */
	.bz-intro {}
	.bz-sec:nth-child(odd) {background:var(--bg2);}
	.bz-two-col {display:grid; grid-template-columns:repeat(2, 1fr); gap:32px;}
	.bz-card {padding:44px 40px; border-radius:20px;}
	.bz-card.highlight {
		background:linear-gradient(135deg, var(--c_base1) 0%, var(--c_base6) 100%);
		border-color:transparent; color:#fff;
	}
	.bz-card.highlight .d-card-num {color:rgba(255,255,255,.7);}
	.bz-card.highlight h4 {color:#fff;}
	.bz-card.highlight p {color:rgba(255,255,255,.85);}
	.bz-card.highlight p strong {color:#a8d9ff;}
	.bz-card.highlight:hover {box-shadow:0 30px 60px -20px rgba(21,101,192,.5);}
	.biogas-page .bz-feat {margin-top:24px; display:flex; flex-direction:column; gap:12px;}
	.biogas-page .bz-feat li {display:flex; align-items:center; gap:12px; font-size:var(--fs16); color:#5b6772;}
	.biogas-page .bz-card.highlight .bz-feat li {color:rgba(255,255,255,.9);}
	.biogas-page .bz-feat .dot {
		width:8px; height:8px; border-radius:50%;
		background:var(--c_base1); flex-shrink:0;
	}
	.biogas-page .bz-feat .dot.green {background:#7de3b6;}

	/* ─── 02. 처리 공정 ─── */
	.bz-flow {
		display:grid; grid-template-columns:repeat(15, 1fr); gap:12px;
		align-items:stretch;
	}
	.bz-flow-step {
		grid-column:span 2;
		background:#fff; border:1px solid var(--border1); border-radius:14px;
		padding:22px 16px; text-align:center;
		transition:all .5s cubic-bezier(.2,.8,.2,1);
		opacity:0; transform:translateY(30px);
	}
	.bz-flow-step.is-in {opacity:1; transform:translateY(0);}
	.bz-flow-step:hover {
		border-color:var(--c_base1); transform:translateY(-4px);
		box-shadow:0 18px 40px -18px rgba(21,101,192,.35);
	}
	.bz-flow-step.end {background:var(--c_base1); border-color:var(--c_base1);}
	.bz-flow-step.end .step-n {color:rgba(255,255,255,.7);}
	.bz-flow-step.end h5, .bz-flow-step.end p {color:#fff;}
	.bz-flow-step .step-n {
		display:block; font-size:var(--fs14); font-weight:800; letter-spacing:.14em;
		color:var(--c_base5); margin-bottom:10px;
	}
	.bz-flow-step h5 {font-size:var(--fs16); font-weight:800; color:var(--c_base6); margin-bottom:6px;}
	.bz-flow-step p {font-size:var(--fs13); color:#7b8794; line-height:1.5;}
	.bz-flow-arrow {
		display:flex; align-items:center; justify-content:center;
		grid-column:span 1;
		font-size:var(--fs20); font-weight:800; color:var(--c_base5);
	}

	/* ─── 03. TECH 카드 ─── */
	.bz-tech-grid {
		display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
	}
	.bz-tech-card {
		position:relative;
		background:#fff; border:1px solid var(--border1); border-radius:18px;
		padding:36px 32px 32px;
		transition:all .4s cubic-bezier(.2,.8,.2,1);
		overflow:hidden;
	}
	.bz-tech-card::before {
		content:''; position:absolute; left:0; top:0; width:100%; height:4px;
		background:linear-gradient(90deg, var(--c_base1), var(--c_base5));
		transform:scaleX(0); transform-origin:left; transition:transform .4s;
	}
	.bz-tech-card:hover {
		transform:translateY(-8px);
		box-shadow:0 30px 60px -20px rgba(21,101,192,.3);
		border-color:transparent;
	}
	.bz-tech-card:hover::before {transform:scaleX(1);}
	.bz-tech-card .tech-n {
		display:block; font-size:var(--fs13); font-weight:800; letter-spacing:.14em;
		color:var(--c_base1); margin-bottom:14px;
	}
	.bz-tech-card h4 {
		font-size:var(--fs22); font-weight:800; color:var(--c_base6);
		letter-spacing:-.01em; margin-bottom:12px;
	}
	.bz-tech-card p {font-size:var(--fs15); color:#5b6772; line-height:1.7;}
	.bz-tech-card .tech-arr {
		position:absolute; right:28px; top:28px;
		width:38px; height:38px; border-radius:50%;
		background:var(--bg2); color:var(--c_base1);
		display:flex; align-items:center; justify-content:center;
		font-weight:700; transition:all .35s;
	}
	.bz-tech-card:hover .tech-arr {background:var(--c_base1); color:#fff; transform:translate(4px, -4px);}

	.bz-fields {
		background:var(--bg1);
		background-image:
			radial-gradient(circle at 12% 12%, rgba(21,101,192,.06), transparent 45%),
			radial-gradient(circle at 88% 88%, rgba(0,172,193,.06), transparent 45%);
	}
	.bz-field-grid {
		display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;
		list-style:none; padding:0; margin:0;
	}
	.bz-field {
		position:relative; padding:34px 28px 30px;
		background:#fff; border:1px solid var(--border1); border-radius:18px;
		overflow:hidden; transition:transform .4s, box-shadow .4s, border-color .4s;
	}
	.bz-field::before {
		content:""; position:absolute; left:0; top:0; width:100%; height:4px;
		background:linear-gradient(90deg, var(--c_base1), #00acc1);
		transform:scaleX(0); transform-origin:left; transition:transform .5s ease;
	}
	.bz-field:hover {
		transform:translateY(-8px); border-color:transparent;
		box-shadow:0 24px 48px -22px rgba(21,101,192,.35);
	}
	.bz-field:hover::before {transform:scaleX(1);}
	.bz-field .field-num {
		position:absolute; top:24px; right:26px;
		font-family:'Poppins','Pretendard',sans-serif; font-size:var(--fs14);
		font-weight:800; letter-spacing:.08em; color:var(--c_base1); opacity:.55;
	}
	.bz-field .field-icon {
		width:56px; height:56px; border-radius:14px; margin-bottom:22px;
		background:linear-gradient(135deg, rgba(21,101,192,.12), rgba(0,172,193,.12));
		color:var(--c_base1);
		display:flex; align-items:center; justify-content:center;
		transition:background .4s, color .4s, transform .4s;
	}
	.bz-field .field-icon svg {width:28px; height:28px;}
	.bz-field:hover .field-icon {
		background:linear-gradient(135deg, var(--c_base1), #00acc1); color:#fff;
		transform:rotate(-4deg) scale(1.05);
	}
	.bz-field .field-tit {
		font-size:var(--fs18); font-weight:800; color:var(--c_base1);
		line-height:1.4; margin-bottom:12px; letter-spacing:-.01em;
	}
	.bz-field .field-desc {
		font-size:var(--fs14); color:#5b6772; line-height:1.7;
	}
	/* 7개 아이템: 마지막 3개 하단 정렬(4+3) 시 자연스러운 여백 */
	.bz-field:nth-child(5) {grid-column-start:1;}

	/* ─── 05. FAQ ─── */
	.bz-faq-list {display:flex; flex-direction:column; gap:14px; max-width:1000px; margin:0 auto;}
	.bz-faq-item {
		background:#fff; border:1px solid var(--border1); border-radius:14px;
		overflow:hidden; transition:all .3s;
	}
	.bz-faq-item.is-open {border-color:var(--c_base1); box-shadow:0 20px 40px -20px rgba(21,101,192,.25);}
	.bz-faq-q {
		width:100%; padding:26px 30px; background:none; border:none;
		display:flex; align-items:center; gap:20px; text-align:left; cursor:pointer;
	}
	.bz-faq-q .q-mark {
		font-size:var(--fs22); font-weight:800; color:var(--c_base1); flex-shrink:0; width:32px;
	}
	.bz-faq-q .q-text {
		flex:1; font-size:var(--fs18); font-weight:700; color:var(--c_base6);
		letter-spacing:-.01em;
	}
	.bz-faq-q .q-toggle {
		width:28px; height:28px; position:relative; flex-shrink:0;
	}
	.bz-faq-q .q-toggle::before,
	.bz-faq-q .q-toggle::after {
		content:''; position:absolute; background:var(--c_base6);
		top:50%; left:50%; transition:all .3s;
	}
	.bz-faq-q .q-toggle::before {width:14px; height:2px; transform:translate(-50%,-50%);}
	.bz-faq-q .q-toggle::after {width:2px; height:14px; transform:translate(-50%,-50%);}
	.bz-faq-item.is-open .bz-faq-q .q-toggle::after {transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
	.bz-faq-a {
		max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s ease;
	}
	.bz-faq-item.is-open .bz-faq-a {max-height:400px; padding:0 30px 26px 82px;}
	.bz-faq-a {padding:0 30px 0 82px;}
	.bz-faq-a .a-mark {
		display:inline-block; font-size:var(--fs18); font-weight:800; color:var(--c_base5);
		margin-right:12px; vertical-align:top;
	}
	.bz-faq-a p {
		display:inline; font-size:var(--fs16); color:#5b6772; line-height:1.75;
	}

	/* ─── CTA ─── */
	.bz-cta-wrap {padding:0 0 120px;}

}

/* ── 태블릿 (~1199px) ─────────────────────────────────── */
@media screen and (max-width: 1199px) {

	.biogas-page {background:#fff;}

	/* ─── HERO ─── */
	.bz-hero {
		position:relative; padding:80px 30px; overflow:hidden;
		 display:flex; align-items:center;
		border-radius:20px; margin:100px 30px;
	}
	.bz-hero-bg {
		position:absolute; inset:0; background-size:cover; background-position:center;
		filter:brightness(.42) saturate(1.15);
		transform:scale(1.06); transition:transform 8s ease;
	}
	.bz-hero.is-in .bz-hero-bg {transform:scale(1);}
	.bz-hero-overlay {
		position:absolute; inset:0;
		background:
			radial-gradient(circle at 15% 30%, rgba(21,101,192,.55) 0%, transparent 55%),
			radial-gradient(circle at 85% 70%, rgba(0,172,193,.45) 0%, transparent 55%),
			linear-gradient(135deg, rgba(13,43,78,.88), rgba(13,43,78,.55));
	}
	.bz-hero-inner {position:relative; z-index:1; color:#fff;}
	.bz-hero-title {
		font-size:var(--fs64); font-weight:800; line-height:1.15;
		letter-spacing:-.02em; margin:14px 0 26px; color:#fff;
	}
	.bz-hero-title em {
		font-style:normal;
		background:linear-gradient(120deg, #a8d9ff, #7de3f0);
		background-clip:text; -webkit-background-clip:text; color:transparent;
	}
	.bz-hero-lead {
		font-size:var(--fs20); color:rgba(255,255,255,.85); line-height:1.7;
		max-width:760px; margin-bottom:40px;
	}
	.bz-hero-lead strong {color:#a8d9ff; font-weight:700;}
	.bz-hero-stats {display:flex; flex-wrap:wrap; gap:14px;}
	.bz-hero-stats .pill {
		display:inline-flex; align-items:baseline; gap:10px;
		padding:14px 24px; border-radius:100px;
		background:rgba(255,255,255,.08); backdrop-filter:blur(12px);
		border:1px solid rgba(255,255,255,.18);
	}
	.bz-hero-stats .pill i {
		font-style:normal; font-size:var(--fs28); font-weight:800; color:#fff;
		background:linear-gradient(120deg, #a8d9ff, #7de3f0);
		background-clip:text; -webkit-background-clip:text; color:transparent;
	}
	.bz-hero-stats .pill em {font-style:normal; font-size:var(--fs14); color:rgba(255,255,255,.7); letter-spacing:-.01em;}

	.bz-sec {padding:80px 30px;}
	.bz-sec + .bz-sec {border-top:1px solid var(--border1);}
	.bz-sec-head {text-align:center; margin-bottom:44px;}

	.bz-intro {background:var(--bg2);}
	.bz-two-col {display:grid; grid-template-columns:1fr; gap:20px;}
	.bz-card {padding:32px 26px; border-radius:16px;}
	.bz-card.highlight {background:linear-gradient(135deg, var(--c_base1), var(--c_base6)); border-color:transparent; color:#fff;}
	.bz-card.highlight .d-card-num {color:rgba(255,255,255,.7);}
	.bz-card.highlight h4 {color:#fff;}
	.bz-card.highlight p {color:rgba(255,255,255,.85);}
	.biogas-page .bz-feat {margin-top:20px; display:flex; flex-direction:column; gap:10px;}
	.biogas-page .bz-feat li {display:flex; align-items:center; gap:10px; font-size:var(--fs15); color:#5b6772;}
	.bz-card.highlight .bz-feat li {color:rgba(255,255,255,.9);}
	.biogas-page .bz-feat .dot {width:7px; height:7px; border-radius:50%; background:var(--c_base1); flex-shrink:0;}
	.biogas-page .bz-feat .dot.green {background:#7de3b6;}

	.bz-flow {display:grid; grid-template-columns:1fr 1fr; gap:12px;}
	.bz-flow-step {background:#fff; border:1px solid var(--border1); border-radius:14px; padding:18px 14px; text-align:center; opacity:0; transform:translateY(20px); transition:all .5s;}
	.bz-flow-step.is-in {opacity:1; transform:translateY(0);}
	.bz-flow-step.end {background:var(--c_base1); border-color:var(--c_base1);}
	.bz-flow-step.end h5, .bz-flow-step.end p {color:#fff;}
	.bz-flow-step.end .step-n {color:rgba(255,255,255,.7);}
	.bz-flow-step .step-n {display:block; font-size:var(--fs12); font-weight:800; letter-spacing:.14em; color:var(--c_base5); margin-bottom:8px;}
	.bz-flow-step h5 {font-size:var(--fs15); font-weight:800; color:var(--c_base6); margin-bottom:4px;}
	.bz-flow-step p {font-size:var(--fs12); color:#7b8794; line-height:1.5;}
	.bz-flow-arrow {display:none;}

	.bz-tech-grid {display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;}
	.bz-tech-card {position:relative; background:#fff; border:1px solid var(--border1); border-radius:16px; padding:28px 24px; transition:all .3s;}
	.bz-tech-card .tech-n {display:block; font-size:var(--fs12); font-weight:800; letter-spacing:.14em; color:var(--c_base1); margin-bottom:10px;}
	.bz-tech-card h4 {font-size:var(--fs18); font-weight:800; color:var(--c_base6); margin-bottom:8px;}
	.bz-tech-card p {font-size:var(--fs14); color:#5b6772; line-height:1.6;}
	.bz-tech-card .tech-arr {position:absolute; right:22px; bottom:22px; width:32px; height:32px; border-radius:50%; background:var(--bg2); color:var(--c_base1); display:flex; align-items:center; justify-content:center; font-weight:700;}

	.bz-fields {background:var(--bg2);}
	.bz-field-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; list-style:none; padding:0; margin:0;}
	.bz-field {position:relative; padding:26px 22px; background:#fff; border:1px solid var(--border1); border-radius:14px;}
	.bz-field .field-num {position:absolute; top:18px; right:20px; font-size:var(--fs13); font-weight:800; color:var(--c_base1); opacity:.55;}
	.bz-field .field-icon {width:48px; height:48px; border-radius:12px; margin-bottom:16px; background:linear-gradient(135deg, rgba(21,101,192,.12), rgba(0,172,193,.12)); color:var(--c_base1); display:flex; align-items:center; justify-content:center;}
	.bz-field .field-icon svg {width:24px; height:24px;}
	.bz-field .field-tit {line-height:1.4; margin-bottom:8px;}
	.bz-field .field-desc {font-size:var(--fs13); color:#5b6772; line-height:1.6;}
	.bz-field:nth-child(5) {grid-column-start:auto;}

	.bz-faq-list {display:flex; flex-direction:column; gap:12px;}
	.bz-faq-item {background:#fff; border:1px solid var(--border1); border-radius:12px; overflow:hidden; transition:all .3s;}
	.bz-faq-item.is-open {border-color:var(--c_base1);}
	.bz-faq-q {width:100%; padding:20px 22px; background:none; border:none; display:flex; align-items:flex-start; gap:14px; text-align:left; cursor:pointer;}
	.bz-faq-q .q-mark {font-size:var(--fs20); font-weight:800; color:var(--c_base1); flex-shrink:0; width:26px;}
	.bz-faq-q .q-text {flex:1; font-size:var(--fs16); font-weight:700; color:var(--c_base6); line-height:1.5;}
	.bz-faq-q .q-toggle {width:24px; height:24px; position:relative; flex-shrink:0;}
	.bz-faq-q .q-toggle::before, .bz-faq-q .q-toggle::after {content:''; position:absolute; background:var(--c_base6); top:50%; left:50%; transition:all .3s;}
	.bz-faq-q .q-toggle::before {width:12px; height:2px; transform:translate(-50%,-50%);}
	.bz-faq-q .q-toggle::after {width:2px; height:12px; transform:translate(-50%,-50%);}
	.bz-faq-item.is-open .bz-faq-q .q-toggle::after {transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
	.bz-faq-a {max-height:0; overflow:hidden; padding:0 22px 0 62px; transition:max-height .4s ease, padding .3s ease;}
	.bz-faq-item.is-open .bz-faq-a {max-height:400px; padding:0 22px 22px 62px;}
	.bz-faq-a .a-mark {display:inline-block; font-size:var(--fs16); font-weight:800; color:var(--c_base5); margin-right:8px; vertical-align:top;}
	.bz-faq-a p {display:inline; font-size:var(--fs14); color:#5b6772; line-height:1.7;}

	.bz-cta-wrap {padding:0 30px 80px;}

}

/* ── 모바일 (~767px) ─────────────────────────────────── */
@media screen and (max-width: 767px) {

	.bz-hero {padding:50px 20px; margin: 50px 20px;}
	.bz-hero-stats {gap:8px;}
	.bz-hero-stats .pill {padding:8px 14px;}

	.bz-sec {padding:60px 20px;}
	.bz-sec-head {margin-bottom:32px;}

	.bz-card {padding:24px 20px;}
	.biogas-page .bz-feat li {font-size:var(--fs13);}

	.bz-flow {grid-template-columns:1fr;}
	.bz-flow-step {padding:16px 12px;}

	.bz-tech-grid {grid-template-columns:1fr; gap:12px;}
	.bz-tech-card {padding:22px 20px;}
	.bz-tech-card h4 {font-size:var(--fs17);}
	.bz-tech-card p {font-size:var(--fs13);}

	.bz-field-grid {grid-template-columns:1fr; gap:12px;}
	.bz-field {padding:22px 20px;}
	.bz-field .field-num {top:16px; right:18px; font-size:var(--fs12);}
	.bz-field .field-icon {width:44px; height:44px; margin-bottom:14px;}
	.bz-field .field-icon svg {width:22px; height:22px;}
	.bz-field .field-tit {font-size:var(--fs15); margin-bottom:6px;}
	.bz-field .field-desc {font-size:var(--fs13);}

	.bz-faq-q {padding:16px 18px;}
	.bz-faq-q .q-text {font-size:var(--fs14);}
	.bz-faq-item.is-open .bz-faq-a {padding:0 18px 18px 52px;}
	.bz-faq-a p {font-size:var(--fs13);}

	.bz-cta-wrap {padding:0 20px 60px;}

}