@charset "utf-8";
/* ==========================================================
   (주)코씨드바이오팜 - ESG 경영 콘텐츠 (cts_esg)
   사이트 공통 컬러 : navy #0b397c / green #34bd4d / blue #1b75bc
   ========================================================== */
.cts_esg { --esg-navy:#0b397c; --esg-green:#34bd4d; --esg-green-d:#1f8f36; --esg-blue:#1b75bc; --esg-ink:#121212; --esg-txt:#555; --esg-line:#e3e8ef;
  position:relative; overflow:hidden; padding-bottom:0; color:var(--esg-txt); word-break:keep-all; }
.cts_esg * { box-sizing:border-box; }
.cts_esg img { max-width:100%; display:block; }
.cts_esg .esg_inner { max-width:1400px; width:100%; margin:0 auto; padding:0 20px; }
.cts_esg p, .cts_esg h4, .cts_esg h5, .cts_esg h6 { line-height:1.6; }
.cts_esg h4 span, .cts_esg h5 small, .cts_esg p span, .cts_esg p strong, .cts_esg p em { vertical-align:baseline; }
.cts_esg .en { font-family:'Montserrat', sans-serif; }

/* ---------- 01. Intro ---------- */
.esg_intro { padding:20px 0 40px; position:relative; }
.esg_intro::before { content:''; position:absolute; right:-160px; top:120px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, #34bd4d14 0%, #34bd4d00 70%); pointer-events:none; }
.esg_intro_tit { text-align:center; margin:60px 0 70px; }
.esg_intro_tit .eng { display:inline-flex; gap:14px; font-family:'Montserrat', sans-serif; font-size:15px; font-weight:700; letter-spacing:3px; color:var(--esg-navy); gap:22px; }
.esg_intro_tit .eng b { color:var(--esg-green); font-weight:800; }
.esg_intro_tit .big_tit { position:relative; isolation:isolate; margin-top:22px; font-size:48px; white-space:nowrap; line-height:1.32; font-weight:800; color:var(--esg-ink); letter-spacing:-2px; }
.esg_intro_tit .big_tit .em_blue { color:var(--esg-navy); }
.esg_intro_tit .big_tit .em_green { color:var(--esg-green); position:relative; display:inline-block; }
.esg_intro_tit .big_tit .em_green::after { content:''; position:absolute; left:0; bottom:6px; width:100%; height:14px; background:#34bd4d26; z-index:-1; transform:scaleX(0); transform-origin:left; transition:transform 1s .6s cubic-bezier(.2,.8,.2,1); }
.cts_esg:not(.is-ready) .esg_intro_tit .big_tit .em_green::after,
.esg_intro_tit.is-show .big_tit .em_green::after { transform:scaleX(1); }

.esg_intro_body { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:80px; align-items:center; }
.esg_visual { position:relative; border-radius:30px 30px 100px 30px; overflow:hidden; aspect-ratio:4 / 1.6; box-shadow:0 30px 60px #0b397c1f; }
.esg_visual img { width:100%; height:100%; object-fit:cover; object-position:45% 42%; transform:scale(1.12); transition:transform 2.4s cubic-bezier(.2,.8,.2,1); }
.esg_visual.is-show img, .cts_esg:not(.is-ready) .esg_visual img { transform:scale(1); }

.esg_intro_txt .quote { width:46px; height:46px; color:var(--esg-green); }
.esg_intro_txt h4 { margin-top:24px; font-size:30px; line-height:1.45; font-weight:700; color:var(--esg-ink); letter-spacing:-1px; }
.esg_intro_txt p { margin-top:26px; font-size:18px; line-height:1.9; color:var(--esg-txt); letter-spacing:-.5px; }
.esg_intro_txt p strong { color:var(--esg-navy); font-weight:700; }
.esg_intro_txt .keys { margin-top:36px; display:flex; flex-wrap:wrap; gap:10px; }
.esg_intro_txt .keys li { padding:10px 20px; border-radius:100px; font-size:15px; font-weight:500; background:#f3f6fa; color:var(--esg-navy); }
.esg_intro_txt .keys li:nth-child(1) { background:#34bd4d17; color:var(--esg-green-d); }
.esg_intro_txt .keys li:nth-child(2) { background:#1b75bc17; color:var(--esg-blue); }

/* ---------- 섹션 공통 타이틀 ---------- */
.esg_sec_head { text-align:center; margin-bottom:60px; }
.esg_sec_head .en_tit { font-family:'Montserrat', sans-serif; font-size:15px; font-weight:700; letter-spacing:3px; color:var(--esg-green); }
.esg_sec_head h4 { margin-top:12px; font-size:40px; font-weight:800; color:var(--esg-ink); letter-spacing:-1.5px; }
.esg_sec_head p { margin-top:16px; font-size:18px; color:#777; }

/* ---------- 02. Status ---------- */
.esg_status { padding:100px 0 40px; background:linear-gradient(180deg, #f6f9fc 0%, #fff 100%); }
.status_block { --c:var(--esg-green); --tint:#34bd4d; display:grid; grid-template-columns:380px minmax(0, 1fr); gap:70px; padding:80px 0; border-top:1px solid var(--esg-line); }
.esg_sec_head + .status_block { border-top:0; padding-top:20px; }
.status_block.s { --c:var(--esg-blue); --tint:#1b75bc; }
.status_block.g { --c:var(--esg-navy); --tint:#0b397c; }
.status_side { position:sticky; top:140px; align-self:start; }
.status_side .big { font-family:'Montserrat', sans-serif; font-size:130px; font-weight:900; line-height:.9; color:var(--c); letter-spacing:-4px; }
.status_side .eng { margin-top:14px; font-family:'Montserrat', sans-serif; font-size:16px; font-weight:700; letter-spacing:3px; color:var(--c); }
.status_side h5 { margin-top:24px; font-size:34px; font-weight:800; color:var(--esg-ink); letter-spacing:-1px; }
.status_side h5 small { font-size:22px; font-weight:700; color:#999; margin-left:6px; }
.status_side p { margin-top:14px; font-size:20px; font-weight:500; color:#444; line-height:1.55; }
.status_side .bar { margin-top:34px; width:100%; max-width:260px; height:4px; border-radius:4px; background:#e6ebf2; overflow:hidden; }
.status_side .bar span { display:block; height:100%; width:calc(var(--p, 0) * 100%); background:var(--c); border-radius:4px; transition:width .2s linear; }

.status_list { display:grid; gap:20px; align-content:start; counter-reset:item; }
.status_item { counter-increment:item; position:relative; display:grid; grid-template-columns:96px minmax(0, 1fr); gap:30px; padding:40px 44px; border-radius:26px; background:#fff; border:1px solid var(--esg-line); box-shadow:0 10px 30px -18px #0b397c40; transition:transform .4s, box-shadow .4s, border-color .4s; }
.status_item:hover { transform:translateX(8px); border-color:var(--c); box-shadow:0 20px 40px -20px var(--c); }
.status_item .ico { width:96px; height:96px; border-radius:50%; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb, var(--tint) 10%, #fff); position:relative; }
.status_item .ico::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px dashed color-mix(in srgb, var(--tint) 45%, #fff); animation:esgSpin 18s linear infinite; }
.status_item .ico svg { width:48px; height:48px; }
.status_item .num { font-family:'Montserrat', sans-serif; font-size:14px; font-weight:700; letter-spacing:2px; color:var(--c); }
.status_item .num::before { content:counter(item, decimal-leading-zero); }
.status_item h6 { margin-top:6px; font-size:24px; font-weight:700; color:var(--esg-ink); letter-spacing:-.8px; }
.status_item p { margin-top:10px; font-size:18px; line-height:1.75; color:var(--esg-txt); }
.status_item .chips { margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.status_item .chips li { display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:100px; font-size:15px; font-weight:500; color:var(--c); background:color-mix(in srgb, var(--tint) 8%, #fff); border:1px solid color-mix(in srgb, var(--tint) 25%, #fff); }
.status_item .chips li svg { width:16px; height:16px; }
@keyframes esgSpin { to { transform:rotate(360deg); } }

/* ---------- 03. Promise ---------- */
.esg_promise { position:relative; padding:110px 20px; text-align:center; background:#0d3d1b url(../images/contents/esg/esg_bg_green.jpg) no-repeat center / cover; overflow:hidden; }
.esg_promise::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, #0b397c66 0%, #0a2a1499 100%); }
.esg_promise .dots i { position:absolute; width:8px; height:8px; border-radius:50%; background:#b8ffbf; box-shadow:0 0 18px 6px #7dff8a66; opacity:.0; animation:esgFloat 7s ease-in-out infinite; }
.esg_promise .dots i:nth-child(1) { left:12%; top:70%; animation-delay:0s; }
.esg_promise .dots i:nth-child(2) { left:24%; top:30%; animation-delay:1.4s; width:5px; height:5px; }
.esg_promise .dots i:nth-child(3) { left:78%; top:65%; animation-delay:2.2s; }
.esg_promise .dots i:nth-child(4) { left:88%; top:28%; animation-delay:3.1s; width:6px; height:6px; }
.esg_promise .dots i:nth-child(5) { left:52%; top:84%; animation-delay:4s; width:5px; height:5px; }
.esg_promise .dots i:nth-child(6) { left:64%; top:18%; animation-delay:5.2s; }
@keyframes esgFloat { 0% { transform:translateY(20px); opacity:0; } 30% { opacity:.9; } 100% { transform:translateY(-70px); opacity:0; } }
.esg_promise .in { position:relative; max-width:900px; margin:0 auto; color:#fff; }
.esg_promise .leaf { width:56px; height:56px; margin:0 auto; color:#9cf5a6; }
.esg_promise p.msg { margin-top:30px; font-size:36px; line-height:1.55; font-weight:700; letter-spacing:-1.2px; }
.esg_promise p.msg em { color:#9cf5a6; }
.esg_promise .sign { margin-top:34px; font-size:18px; font-weight:500; letter-spacing:1px; color:#ffffffcc; }

/* ---------- Motion (JS 사용 시에만 숨김 처리) ---------- */
.cts_esg.is-ready [data-reveal] { opacity:0; transform:translateY(50px); transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d, 0s); }
.cts_esg.is-ready [data-reveal="left"] { transform:translateX(-60px); }
.cts_esg.is-ready [data-reveal="right"] { transform:translateX(60px); }
.cts_esg.is-ready [data-reveal="zoom"] { transform:scale(.94); }
.cts_esg.is-ready [data-reveal].is-show { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .cts_esg *, .cts_esg *::before, .cts_esg *::after { animation:none !important; transition:none !important; }
  .cts_esg.is-ready [data-reveal] { opacity:1; transform:none; }
  .esg_visual img { transform:none; }
}

/* ---------- Responsive (사이트 기준 1440 / 1024 / 768 / 425) ---------- */
@media (max-width:1440px) {
  .esg_intro_tit .big_tit { font-size:42px; }
  .esg_intro_body { gap:56px; }
  .status_block { grid-template-columns:300px minmax(0, 1fr); gap:50px; }
  .status_side .big { font-size:110px; }
}
@media (max-width:1024px) {
  .esg_intro { padding-bottom:100px; }
  .esg_intro_tit { margin:40px 0 50px; }
  .esg_intro_tit .big_tit { font-size:34px; white-space:normal; }
  .esg_intro_body { grid-template-columns:1fr; gap:46px; }
  .esg_intro_txt h4 { font-size:26px; }
  .esg_status { padding-top:100px; }
  .esg_sec_head h4 { font-size:34px; }
  .status_block { grid-template-columns:1fr; gap:34px; padding:60px 0; }
  .status_side { position:relative; top:0; display:grid; grid-template-columns:auto 1fr; column-gap:26px; align-items:end; }
  .status_side .big { grid-row:1 / span 2; font-size:96px; }
  .status_side .eng { margin:0; align-self:end; }
  .status_side h5 { margin-top:6px; font-size:28px; }
  .status_side p, .status_side .bar { grid-column:1 / -1; }
  .esg_promise { padding:110px 20px; }
  .esg_promise p.msg { font-size:30px; }
}
@media (max-width:768px) {
  .esg_intro_tit .eng { font-size:12px; letter-spacing:2px; gap:8px; }
  .esg_intro_tit .big_tit { font-size:30px; letter-spacing:-1px; }
  .esg_visual { border-radius:24px 24px 90px 24px; }
  .esg_visual .badge span { width:42px; height:42px; font-size:16px; }
  .esg_intro_txt h4 { font-size:22px; }
  .esg_intro_txt p { font-size:16px; }
  .esg_sec_head { margin-bottom:40px; }
  .esg_sec_head h4 { font-size:28px; }
  .esg_sec_head p { font-size:16px; }
  .status_item { grid-template-columns:1fr; gap:20px; padding:30px 26px; }
  .status_item:hover { transform:none; }
  .status_item .ico { width:76px; height:76px; }
  .status_item .ico svg { width:38px; height:38px; }
  .status_item h6 { font-size:20px; }
  .status_item p { font-size:16px; }
  .status_side .big { font-size:76px; }
  .status_side h5 { font-size:24px; }
  .status_side p { font-size:17px; }
  .esg_promise p.msg { font-size:23px; }
  .esg_promise .sign { font-size:15px; }
}
@media (max-width:425px) {
  .esg_intro_tit .big_tit { font-size:25px; }
  .esg_intro_txt h4 { font-size:20px; }
  .esg_promise { padding:80px 20px; }
  .esg_promise p.msg { font-size:20px; }
}