﻿
/* ── 리셋 & 루트 ── */
.opg{font-family:'Noto Sans KR','Malgun Gothic',sans-serif;color:#3b3e4a;line-height:1.78;-webkit-font-smoothing:antialiased;}
.opg *{box-sizing:border-box;}
.opg img{max-width:100%;height:auto;}
.opg a{color:inherit;}
.opg h1,.opg h2,.opg h3,.opg h4{font-family:'Noto Sans KR','Malgun Gothic',sans-serif;color:#1e2b4a;margin:0;font-weight:900;letter-spacing:-0.6px;line-height:1.28;}
.opg p{margin:0;}

/* ── 공통 유틸 ── */
.opg-eyebrow{display:inline-block;font-weight:800;letter-spacing:-.3px;color:#1e2b4a;margin:0 0 18px;line-height:1.2;}
.opg-eyebrow-light{color:#fff; padding-bottom: 3rem;}
.opg-hl{color:#e6b877;}
.opg-sub{margin-top:18px;color:#6c6f7c;font-size:0.9375rem;}
.opg-section{padding:96px 0;}
.opg-section-cream{background:#faf6ef;}
.opg-head{margin-bottom:58px;}
.opg-head-center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto;}
.opg-head h2{font-size:1.8rem;font-weight:600;color:#6c6f7c;letter-spacing:-.2px;}
.opg-head .opg-eyebrow{font-size:2.625rem;line-height:1.15;margin-bottom:14px;}
.opg-head .opg-eyebrow:before{display:none;}

/* ── 버튼 ── */
.opg-btn{display:inline-block;position:relative;background:#f1d4a8;color:#1e2b4a;font-weight:700;font-size:0.9375rem;letter-spacing:.3px;padding:15px 30px;border-radius:4px;text-decoration:none;border:none;transition:background .25s,transform .25s;}
.opg-btn:hover{background:#ecc78d;text-decoration:none;color:#1e2b4a;transform:translateY(-2px);}
.opg-btn i{margin-left:9px;font-size:0.8125rem;transition:transform .25s;}
.opg-btn:hover i{transform:translateX(4px);}
.opg-btn-lg{padding:18px 40px;font-size:1.0625rem;}

/* ══════════════════════════════════════════════
   S1. 히어로
══════════════════════════════════════════════ */
.opg-hero{background:#1e2b4a;color:#eef0f6;position:relative;}
.opg-hero:before{content:"";position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;background:rgba(241,212,168,.06);pointer-events:none;}
.opg-hero .opg-hero-row{padding:84px 0 0;display:flex;align-items:flex-end;flex-wrap:wrap;}
.opg-hero .opg-hero-text{padding-top:24px;padding-bottom:84px;flex:0 0 50%;max-width:50%;}
.opg-hero h1{color:#fff;font-size:3rem;line-height:1.22;margin-bottom:24px;}
.opg-hero .opg-lead{color:#b6bacb;font-size:1.0625rem;line-height:1.85;margin-bottom:34px;max-width:520px;}
.opg-hero .opg-hero-media{flex:0 0 50%;max-width:50%;align-self:flex-end;}
.opg-hero .opg-hero-photo{position:relative;width:100%;padding-bottom:96%;overflow:hidden;}
.opg-hero .opg-hero-photo img{position:absolute;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block;transform:scale(1.04);transform-origin:center bottom;}
.opg-hero .opg-hero-photo .opg-ph-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;color:rgba(255,255,255,.18);padding-bottom:40px;}
.opg-hero .opg-hero-photo .opg-ph-placeholder i{font-size:3rem;margin-bottom:10px;}
.opg-hero .opg-hero-photo .opg-ph-placeholder span{font-size:0.8125rem;letter-spacing:.08em;}

/* ══════════════════════════════════════════════
   S2. 신앙여정 타임라인
══════════════════════════════════════════════ */
.opg-timeline{position:relative;max-width:780px;margin:0 auto;}
.opg-timeline:before{content:"";position:absolute;left:30px;top:18px;bottom:64px;width:2px;background:#e6d8c1;}
.opg-step{position:relative;padding:0 0 32px 96px;cursor:default;}
.opg-step:last-child{padding-bottom:0;}
.opg-step-num{position:absolute;left:0;top:0;width:62px;height:62px;border-radius:50%;background:#f1d4a8;color:#1e2b4a;font-weight:700;font-size:1.5rem;text-align:center;line-height:62px;z-index:1;transition:transform .3s,background .3s;}
.opg-step-body{background:#fff;border:1px solid #efe7d9;border-radius:10px;padding:26px 30px;transition:transform .3s,border-color .3s;}
.opg-step.opg-active .opg-step-body{border-color:#f1d4a8;transform:translateX(8px);}
.opg-step.opg-active .opg-step-num{transform:scale(1.14);}
.opg-step-kicker{font-weight:700;font-size:0.8125rem;letter-spacing:1.5px;text-transform:uppercase;color:#b98a4e;margin-bottom:6px;}
.opg-step h3{font-size:1.4375rem;margin-bottom:10px;}
.opg-step p{color:#666a78;font-size:0.96875rem;}
.opg-step-final .opg-step-num{background:#1e2b4a;color:#f1d4a8;}
.opg-step-final .opg-step-body{background:#1e2b4a;border-color:#1e2b4a;}
.opg-step-final .opg-step-body h3{color:#fff;}
.opg-step-final .opg-step-body p{color:#b6bacb;}
.opg-step-final .opg-step-kicker{color:#e6c089;}
.opg-step-final.opg-active .opg-step-body{border-color:#f1d4a8;}

/* ══════════════════════════════════════════════
   S3. 공동체훈련 카드
══════════════════════════════════════════════ */
.opg-card{background:#fff;border:1px solid #ece6db;border-top:4px solid #f1d4a8;border-radius:10px;padding:38px 30px;height:100%;cursor:default;transition:transform .3s,border-top-color .3s;}
.opg-card.opg-active{border-top-color:#1e2b4a;transform:translateY(-6px);}
.opg-card-ic{width:66px;height:66px;border-radius:50%;background:#faf0dd;color:#c79a5e;font-size:1.6875rem;line-height:66px;text-align:center;margin-bottom:22px;transition:background .3s,color .3s,transform .3s;}
.opg-card.opg-active .opg-card-ic{background:#1e2b4a;color:#f1d4a8;transform:rotate(-6deg) scale(1.06);}
.opg-card h4{font-size:1.25rem;margin-bottom:12px;line-height:1.4;}
.opg-card p{color:#666a78;font-size:0.96875rem;}
.opg-card-no{color:#dcc9a6;font-size:0.875rem;font-weight:700;letter-spacing:1px;margin-bottom:4px;}

/* 공동체 행사 2카드 */
.opg-events{margin-top:70px;}
.opg-events-head{text-align:center;margin-bottom:38px;}
.opg-events-head .opg-eyebrow{font-size:2.625rem;line-height:1.15;}
.opg-events-head .opg-eyebrow:before{display:none;}
.opg-events-head h3{font-size:1.25rem;color:#6c6f7c;font-weight:600;margin-top:8px;}
.opg-event{border:1px solid #ece6db;border-radius:12px;overflow:hidden;background:#fff;height:100%;}
.opg-event-media{position:relative;height:240px;overflow:hidden;background:#eee6d8;}
.opg-event-media img{width:100%;height:100%;object-fit:cover;display:block;}
.opg-event-media.opg-ph{display:table;width:100%;}
.opg-event-media.opg-ph .opg-ph-in{display:table-cell;vertical-align:middle;text-align:center;color:#b8a988;}
.opg-event-media.opg-ph .opg-ph-in i{font-size:2.5rem;display:block;margin-bottom:8px;}
.opg-event-media.opg-ph .opg-ph-in span{font-size:0.8125rem;letter-spacing:1px;}
.opg-event-body{padding:28px 30px 32px;}
.opg-event-title{font-size:1.8rem;margin-bottom:10px;}
.opg-event-desc{color:#5b5f6d;font-size:0.96875rem;line-height:1.7;}

/* ══════════════════════════════════════════════
   S4. 기쁜파송 CTA 다크 배너
══════════════════════════════════════════════ */
.opg-cta{position:relative;background:#1e2b4a;color:#fff;text-align:center;padding:108px 0;overflow:hidden;}
.opg-cta-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-size:cover;opacity:.16;pointer-events:none;}
.opg-cta-inner{position:relative;margin:0 auto;padding:0 20px;}
.opg-cta .opg-eyebrow{font-size:2.625rem;line-height:1.15;margin-bottom:28px;}
.opg-cta .opg-eyebrow:before{display:none;}
.opg-quote-mark{font-family:Georgia,serif;font-size:4.5rem;line-height:0;color:#f1d4a8;display:block;height:36px;}
.opg-quote{font-size:1.875rem;line-height:1.55;font-weight:700;color:#fff;letter-spacing:-.4px;margin:20px 0 28px;}
.opg-quote .opg-hl{color:#f1d4a8;}
.opg-cta-msg{color:#b6bacb;font-size:1.0625rem;line-height:1.85;margin:0 auto 38px;}
.opg-cta .opg-btn{border-radius:999px;}

/* ── 스크롤 등장 ── */
.opg-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.opg-reveal.opg-in{opacity:1;transform:none;}

/* ══════════════════════════════════════════════
   반응형
══════════════════════════════════════════════ */
@media(max-width:1199px){
  .opg-hero h1{font-size:2.625rem;}
}
@media(max-width:992px){
  .opg-section{padding:70px 0;}
  .opg-hero .opg-hero-row{padding:56px 0 0;}
  .opg-hero h1{font-size:2.375rem;}
  .opg-hero .opg-hero-text,.opg-hero .opg-hero-media{flex:0 0 100%;max-width:100%;}
  .opg-hero .opg-hero-text{padding-bottom:0;}
  .opg-hero .opg-hero-media{margin-top:40px;}
  .opg-hero .opg-hero-photo{}
  .opg-cta .opg-quote{font-size:1.4375rem;}
}
@media(max-width:767px){
  .opg-hero h1{font-size:2rem;}
  .opg-head-center .opg-eyebrow,.opg-cta .opg-eyebrow,.opg-events-head .opg-eyebrow{font-size:1.875rem;}
  .opg-step{padding-left:80px;}
  .opg-step-num{width:54px;height:54px;line-height:54px;font-size:1.25rem;}
  .opg-timeline:before{left:26px;}
  .opg-cta{padding:72px 0;}
  .opg-quote{font-size:1.125rem;}
  .opg-event{margin-bottom:24px;}
  .opg-card{margin-bottom:20px;}
}





/* ── 루트 & 리셋 ── */
.opg2{font-family:'Noto Sans KR','Malgun Gothic',sans-serif;color:#3b3e4a;line-height:1.78;-webkit-font-smoothing:antialiased;}
.opg2 *{box-sizing:border-box;}
.opg2 img{max-width:100%;height:auto;}
.opg2 a{color:inherit;}
.opg2 h1,.opg2 h2,.opg2 h3,.opg2 h4{font-family:'Noto Sans KR','Malgun Gothic',sans-serif;color:#1e2b4a;margin:0;font-weight:900;letter-spacing:-0.6px;line-height:1.28;}
.opg2 p{margin:0;}

/* ── 공통 유틸 ── */
.opg2-eyebrow{display:inline-block;font-weight:800;letter-spacing:-.3px;color:#1e2b4a;margin:0 0 18px;line-height:1.2;}
.opg2-eyebrow-light{color:#fff;}
.opg2-hl{color:#e6b877;}
.opg2-sub{margin-top:18px;color:#6c6f7c;font-size:0.9375rem;}
.opg2-section{padding:96px 0;}
.opg2-section-cream{background:#faf6ef;}
.opg2-head{margin-bottom:58px;}
.opg2-head-center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto;}
.opg2-head h2{font-size:1.125rem;font-weight:600;color:#6c6f7c;letter-spacing:-.2px;}
.opg2-head .opg2-eyebrow{font-size:2.625rem;line-height:1.15;margin-bottom:14px;}
.opg2-head .opg2-eyebrow:before{display:none;}

/* ── 버튼 ── */
.opg2-btn{display:inline-block;position:relative;background:#f1d4a8;color:#1e2b4a;font-weight:700;font-size:0.9375rem;letter-spacing:.3px;padding:15px 30px;border-radius:4px;text-decoration:none;border:none;transition:background .25s,transform .25s;}
.opg2-btn:hover{background:#ecc78d;text-decoration:none;color:#1e2b4a;transform:translateY(-2px);}
.opg2-btn i{margin-left:9px;font-size:0.8125rem;transition:transform .25s;}
.opg2-btn:hover i{transform:translateX(4px);}
.opg2-btn-lg{padding:18px 40px;font-size:1.0625rem;}

/* ══════════════════════════════════════════════
   S1. 히어로
══════════════════════════════════════════════ */
.opg2-hero{background:#1e2b4a;color:#eef0f6;position:relative;}
.opg2-hero:before{content:"";position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;background:rgba(241,212,168,.06);pointer-events:none;}
.opg2-hero:after{content:"";position:absolute;bottom:-160px;left:-80px;width:340px;height:340px;border-radius:50%;background:rgba(241,212,168,.04);pointer-events:none;}
.opg2-hero-inner{padding:96px 0;text-align:center;position:relative;max-width:860px;margin:0 auto;}
.opg2-hero h1{color:#fff;font-size:3rem;line-height:1.24;margin-bottom:24px;}
.opg2-hero .opg2-lead{color:#b6bacb;font-size:1.125rem;line-height:1.85;margin:0 auto;max-width:620px;}
.opg2-hero .opg2-eyebrow{font-size:0.875rem;text-transform:uppercase;font-weight:700;margin-bottom:18px;}
.opg2-hero .opg2-eyebrow:before{display:none;}

/* ══════════════════════════════════════════════
   S2. 정착 순서 플로우
══════════════════════════════════════════════ */
.opg2-flow-grid{display:flex;flex-wrap:wrap;position:relative;}
.opg2-flow-item{flex:0 0 25%;max-width:25%;position:relative;text-align:center;padding:0 10px;}
.opg2-flow-line{position:absolute;top:44px;left:60%;width:80%;height:2px;background:#e6d8c1;z-index:1;}
.opg2-flow-ic{width:88px;height:88px;border-radius:50%;background:#fff;border:2px solid #efe3cf;color:#c79a5e;font-size:2.125rem;line-height:84px;text-align:center;margin:0 auto 20px;position:relative;z-index:2;transition:background .3s,color .3s,border-color .3s,transform .3s;}
.opg2-flow-item:hover .opg2-flow-ic{background:#1e2b4a;border-color:#1e2b4a;color:#f1d4a8;transform:translateY(-4px);}
.opg2-flow-no{font-family:'Roboto Condensed','Noto Sans KR',sans-serif;font-weight:700;font-size:0.8125rem;letter-spacing:1.5px;color:#c0a577;margin-bottom:6px;}
.opg2-flow-item h4{font-size:1.1875rem;margin-bottom:8px;}
.opg2-flow-item p{color:#74788a;font-size:0.90625rem;line-height:1.6;}

/* ══════════════════════════════════════════════
   S3. STEP 상세 (좌우 레이아웃)
══════════════════════════════════════════════ */
.opg2-steps .opg2-stepblk{padding:54px 0;border-bottom:1px solid #efe7da;}
.opg2-steps .opg2-stepblk:last-child{border-bottom:none;}
.opg2-step-aside{text-align:center;margin-bottom:0;}
.opg2-step-badge{display:inline-block;width:128px;height:128px;border-radius:50%;background:#faf0dd;border:2px dashed #e2c79b;position:relative;}
.opg2-step-tag{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}
.opg2-step-tag b{display:block;font-family:'Roboto Condensed','Noto Sans KR',sans-serif;font-size:0.8125rem;letter-spacing:2px;color:#b98a4e;font-weight:700;}
.opg2-step-tag em{display:block;font-family:'Roboto Condensed','Noto Sans KR',sans-serif;font-size:3.25rem;line-height:1;font-style:normal;font-weight:700;color:#1e2b4a;}
.opg2-step-main h3{font-size:1.75rem;margin-bottom:22px;}
.opg2-substep{position:relative;padding:0 0 22px 30px;}
.opg2-substep:last-child{padding-bottom:0;}
.opg2-substep:before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;border-radius:50%;background:#f1d4a8;border:2px solid #d9b27a;}
.opg2-substep h4{font-size:1.125rem;margin-bottom:6px;color:#2a3553;}
.opg2-substep p{color:#666a78;font-size:0.96875rem;}
.opg2-mail{color:#b98a4e;font-weight:700;text-decoration:none;border-bottom:1px solid #e6cfa3;}
.opg2-mail:hover{color:#1e2b4a;}

/* ══════════════════════════════════════════════
   S4. CTA
══════════════════════════════════════════════ */
.opg2-cta{position:relative;background:#1e2b4a;color:#fff;text-align:center;padding:100px 0;overflow:hidden;}
.opg2-cta-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-size:cover;opacity:.14;pointer-events:none;}
.opg2-cta-inner{position:relative;max-width:760px;margin:0 auto;padding:0 20px;}
.opg2-cta .opg2-eyebrow{font-size:2.625rem;line-height:1.15;margin-bottom:28px;}
.opg2-cta .opg2-eyebrow:before{display:none;}
.opg2-cta-msg{color:#b6bacb;font-size:1.0625rem;line-height:1.85;max-width:600px;margin:0 auto 38px;}
.opg2-cta .opg2-btn{border-radius:999px;}

/* ── 스크롤 등장 ── */
.opg2-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.opg2-reveal.opg2-in{opacity:1;transform:none;}

/* ══════════════════════════════════════════════
   반응형
══════════════════════════════════════════════ */
@media(max-width:1199px){
  .opg2-hero h1{font-size:2.625rem;}
}
@media(max-width:992px){
  .opg2-section{padding:70px 0;}
  .opg2-hero-inner{padding:64px 0;}
  .opg2-hero h1{font-size:2.375rem;}
  .opg2-flow-item{flex:0 0 50%;max-width:50%;margin-bottom:40px;}
  .opg2-flow-line{display:none;}
  .opg2-step-aside{margin-bottom:28px;}
}
@media(max-width:767px){
  .opg2-hero h1{font-size:1.875rem;}
  .opg2-head .opg2-eyebrow,.opg2-cta .opg2-eyebrow{font-size:1.875rem;}
  .opg2-flow-item{flex:0 0 50%;max-width:50%;margin-bottom:36px;}
  .opg2-flow-line{display:none;}
  .opg2-step-aside{margin-bottom:24px;}
  .opg2-step-badge{width:100px;height:100px;}
  .opg2-step-tag em{font-size:2.625rem;}
  .opg2-cta{padding:72px 0;}
}