@charset "utf-8";
/* ============================================================
   crePOD (Business Opportunity) — page stylesheet
   ilark.co.kr / 2026-08
   Prefix: .cp-   Container: 1280px   Point: #F19123 (ilark) / #18AEC0 (crePOD)
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --cp-mint:#18AEC0;
  --cp-mint-dk:#0E8C9C;
  --cp-orange:#F19123;
  --cp-ink:#1F2328;
  --cp-ink-2:#2B2F36;
  --cp-gray-1:#5C636E;
  --cp-gray-2:#6E747E;
  --cp-gray-3:#8A9099;
  --cp-gray-4:#9AA0A8;
  --cp-gray-5:#A7ACB3;
  --cp-line:#E3E5E8;
  --cp-line-2:#E9EBEE;
  --cp-line-3:#D8DBDF;
  --cp-bg-alt:#F5F6F7;
  --cp-dark:#312F2C;
  --cp-container:1280px;
}

/* ---------- reset (page scope) ---------- */
.crepod-page *,
.crepod-page *::before,
.crepod-page *::after{box-sizing:border-box}
.crepod-page{
  margin:0;
  background:#fff;
  font-family:'Archivo','Noto Sans KR','Malgun Gothic',sans-serif;
  color:var(--cp-ink);
  -webkit-text-size-adjust:100%;
}
.crepod-page img{border:0;max-width:100%}
.crepod-page h1,.crepod-page h2,.crepod-page h3,.crepod-page p{margin:0}
.crepod-page ul,.crepod-page ol{margin:0;padding:0;list-style:none}
.crepod-page a{text-decoration:none}
.crepod-page a{color:var(--cp-mint)}
.crepod-page .cp-gnb>li>a{color:#fff}
.crepod-page .cp-cta__btn{color:#fff}
.crepod-page .cp-cta__btn:hover{color:#fff}
.crepod-page .cp-video__link{color:var(--cp-gray-3)}
.crepod-page .cp-video__link:hover{color:var(--cp-mint)}
.crepod-page .cp-footer__nav a{color:#fff}
.crepod-page .cp-footer__nav a:hover{color:var(--cp-orange)}
.crepod-page .cp-bc__home{color:var(--cp-gray-1)}
.crepod-page .cp-bc__home:hover{color:var(--cp-orange)}
.crepod-page .cp-mega__col a{color:var(--cp-gray-2)}
.crepod-page .cp-mega__col a:hover{color:var(--cp-orange)}
.crepod-page .cp-mega__new{color:var(--cp-orange)}
.crepod-page .cp-bc__list a{color:var(--cp-gray-1)}
.crepod-page .cp-bc__list a:hover{color:var(--cp-orange)}
.crepod-page .cp-bc__list .is-current{color:var(--cp-orange)}
.crepod-page .cp-header.is-open .cp-gnb>li>a{color:#3C3C3C}
.crepod-page .cp-header.is-open .cp-gnb>li>a:hover,
.crepod-page .cp-header.is-open .cp-gnb>li.is-active>a{color:var(--cp-orange)}
.cp-inner{max-width:var(--cp-container);margin:0 auto;padding:0 20px}
.cp-blind{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ============================================================
   1. HEADER / GNB
   ============================================================ */
.cp-header{position:absolute;left:0;right:0;top:0;z-index:60}
.cp-header__bar{
  display:flex;align-items:center;height:104px;padding:0 42px;
  background:transparent;transition:background .35s ease;
}
.cp-header__logo{width:142px;display:block}
.cp-gnb{flex:1;display:flex;justify-content:center;gap:74px;font:700 22px/1 'Archivo',sans-serif}
.cp-gnb > li > a{display:block;padding:8px 0;color:#fff;transition:color .3s ease}
.cp-gnb > li > a:hover{color:#fff}
.cp-header__all{display:flex;flex-direction:column;gap:6px;background:none;border:0;padding:0;cursor:pointer}
.cp-header__all span{display:block;width:30px;height:3px;background:#fff;transition:background .35s ease}

/* GNB opened (hover on Business / scrolled) */
.cp-header.is-open .cp-header__bar{background:#fff}
.cp-header.is-open .cp-gnb > li > a{color:#3C3C3C}
.cp-header.is-open .cp-gnb > li > a:hover,
.cp-header.is-open .cp-gnb > li.is-active > a{color:var(--cp-orange)}
.cp-header.is-open .cp-header__all span{background:#3C3C3C}

/* mega dropdown */
.cp-mega{
  display:none;background:#fff;box-shadow:0 12px 28px rgba(20,26,34,.14);
}
.cp-header.is-open .cp-mega{display:block;animation:cpMega .55s cubic-bezier(.25,.8,.25,1) both}
.cp-mega__inner{
  max-width:var(--cp-container);margin:0 auto;display:flex;gap:74px;
  padding:48px 0 62px 222px;font:400 19px/1.45 'Noto Sans KR',sans-serif;color:var(--cp-gray-2);
}
.cp-mega__col{flex:none;display:flex;flex-direction:column;gap:20px}
.cp-mega__col--about{width:206px}
.cp-mega__col--tech{width:236px}
.cp-mega__col--kiosk{width:186px}
.cp-mega__col--biz{width:222px}
.cp-mega__col--support{width:180px}
.cp-mega__col a{color:var(--cp-gray-2)}
.cp-mega__col a:hover{color:var(--cp-orange)}
.cp-mega__new{
  display:flex;align-items:center;gap:9px;
  font-weight:700;color:var(--cp-orange)!important;
}
.cp-badge-new{
  font:700 10px/1 'Archivo',sans-serif;letter-spacing:.08em;font-style:normal;
  color:#fff;background:var(--cp-orange);padding:4px 6px;border-radius:3px;
}
@keyframes cpMega{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   2. HERO
   ============================================================ */
.cp-hero{position:relative;height:640px;background:var(--cp-dark);overflow:hidden}
.cp-hero__bg{
  position:absolute;inset:0;
  background:var(--cp-dark) center/cover no-repeat url("../assets/hero-bg.jpg");
}
.cp-hero__dim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,20,28,.62),rgba(14,20,28,.40));
}
.cp-hero__tit{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;pointer-events:none;
}
.cp-hero__tit h1{font:800 62px/1.15 'Archivo',sans-serif;color:#fff;letter-spacing:-.01em}
.cp-hero__tit p{font:700 27px/1.3 'Noto Sans KR',sans-serif;color:#fff}

/* ============================================================
   3. BREADCRUMB (toggle)
   ============================================================ */
.cp-bc{background:#fff;border-bottom:1px solid var(--cp-line-2);position:relative;z-index:40}
.cp-bc__inner{
  max-width:var(--cp-container);margin:0 auto;height:76px;
  display:flex;align-items:center;justify-content:flex-end;
  font:400 18px/1 'Noto Sans KR',sans-serif;color:var(--cp-gray-1);
}
.cp-bc__home{padding:0 22px;color:var(--cp-gray-1)}
.cp-bc__home:hover{color:var(--cp-orange)}
.cp-bc__div{width:1px;height:16px;background:var(--cp-line-3);display:block}
.cp-bc__item{position:relative}
.cp-bc__btn{
  display:flex;align-items:center;gap:12px;padding:0 22px;height:76px;
  background:none;border:0;cursor:pointer;
  font:400 18px/1 'Noto Sans KR',sans-serif;color:var(--cp-gray-1);
}
.cp-bc__item--current .cp-bc__btn{font-weight:700;color:var(--cp-ink-2)}
.cp-bc__arrow{
  display:block;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--cp-gray-4);
  transition:transform .4s ease,border-top-color .3s ease;
}
.cp-bc__btn:hover .cp-bc__arrow{border-top-color:var(--cp-orange)}
.cp-bc__item.is-open .cp-bc__arrow{border-top-color:var(--cp-orange);transform:rotate(180deg)}
.cp-bc__list{
  display:none;position:absolute;top:66px;width:280px;z-index:9;
  background:#fff;border:1px solid var(--cp-line);
  box-shadow:0 14px 30px rgba(20,26,34,.14);padding:16px 0;
}
.cp-bc__item--section .cp-bc__list{left:0}
.cp-bc__item--current .cp-bc__list{right:0;width:300px}
.cp-bc__item.is-open .cp-bc__list{display:block;animation:cpDrop .42s cubic-bezier(.25,.8,.25,1) both}
.cp-bc__list a{
  display:block;padding:11px 24px;
  font:400 18px/1.4 'Noto Sans KR',sans-serif;color:var(--cp-gray-1);
}
.cp-bc__list a:hover{color:var(--cp-orange)}
.cp-bc__list .is-current{font-weight:700;color:var(--cp-orange)}
@keyframes cpDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   4. SECTION COMMON
   ============================================================ */
.cp-sec{background:#fff}
.cp-sec--alt{background:var(--cp-bg-alt)}
.cp-sec__inner{
  max-width:var(--cp-container);margin:0 auto;padding:110px 20px 120px;
  display:flex;flex-direction:column;align-items:center;
}
.cp-sec__tag{
  display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 40px;
  border-radius:27px;background:var(--cp-mint);color:#fff;
  font:700 24px/1 'Noto Sans KR',sans-serif;
}
.cp-sec__eng{
  font:600 13px/1 'Archivo',sans-serif;letter-spacing:.2em;
  color:var(--cp-gray-4);margin-top:16px;
}

/* scroll reveal */
.cp-reveal{opacity:0;transform:translateY(26px)}
.cp-reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion:reduce){
  .cp-reveal{opacity:1;transform:none}
}

/* ============================================================
   5. INTRO
   ============================================================ */
.cp-intro__inner{
  max-width:var(--cp-container);margin:0 auto;padding:112px 20px 96px;
  display:flex;align-items:center;gap:40px;
}
.cp-intro__body{flex:none;width:760px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.cp-intro__logo{width:212px;display:block}
.cp-intro__tit{font:900 50px/1.34 'Noto Sans KR',sans-serif;color:var(--cp-ink);letter-spacing:-.02em}
.cp-intro__desc{font:400 20px/1.75 'Noto Sans KR',sans-serif;color:var(--cp-gray-1)}
.cp-intro__visual{flex:1;min-width:0;max-width:480px;display:block;opacity:.95}
.cp-stats{
  display:flex;gap:44px;width:100%;margin-top:20px;
  padding-top:30px;border-top:1px solid var(--cp-line);
}
.cp-stats__item{display:flex;flex-direction:column;gap:4px}
.cp-stats__num{font:800 38px/1 'Archivo',sans-serif;color:var(--cp-mint)}
.cp-stats__item:last-child .cp-stats__num{color:var(--cp-mint-dk)}
.cp-stats__label{font:400 16px/1.4 'Noto Sans KR',sans-serif;color:var(--cp-gray-3)}
.cp-stats__div{width:1px;background:var(--cp-line);display:block}

/* ============================================================
   6. VIDEO (thumbnail → modal)
   ============================================================ */
.cp-video{
  max-width:var(--cp-container);margin:0 auto;padding:104px 20px 110px;
  display:flex;flex-direction:column;align-items:center;gap:24px;
}
.cp-video__thumb{
  position:relative;display:block;width:1000px;max-width:100%;height:562px;
  border:0;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;
  background:#1F2328 center/cover no-repeat;
  box-shadow:0 14px 40px rgba(31,35,40,.16);
  transition:transform .25s,box-shadow .25s;
}
.cp-video__thumb:hover{transform:translateY(-4px);box-shadow:0 22px 56px rgba(31,35,40,.26)}
.cp-video__thumb::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,24,28,.10),rgba(20,24,28,.45));
}
.cp-video__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:92px;height:92px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.cp-video__play i{
  display:block;width:0;height:0;margin-left:7px;
  border-left:24px solid var(--cp-mint);
  border-top:15px solid transparent;border-bottom:15px solid transparent;
}
.cp-video__cap{font:700 24px/1 'Noto Sans KR',sans-serif;color:var(--cp-ink-2)}
.cp-video__link{font:400 15px/1 'Noto Sans KR',sans-serif;color:var(--cp-gray-3)}
.cp-video__link:hover{color:var(--cp-mint)}

/* modal */
.cp-modal{
  display:none;position:fixed;inset:0;z-index:990;
  background:rgba(12,16,26,.5);
  align-items:center;justify-content:center;
}
.cp-modal.is-open{display:flex}
.cp-modal__box{
  width:min(1280px,86vw);aspect-ratio:16/9;background:#000;
  border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.cp-modal__box iframe{width:100%;height:100%;border:0;display:block}
.cp-modal__close{
  position:fixed;top:28px;right:36px;width:48px;height:48px;border:0;
  border-radius:50%;background:rgba(255,255,255,.12);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font:400 34px/1 'Archivo',sans-serif;color:#fff;transition:background .2s;
}
.cp-modal__close:hover{background:rgba(255,255,255,.26)}

/* ============================================================
   7. SERVICE DIAGRAM
   ============================================================ */
.cp-diagram{position:relative;width:1280px;max-width:100%;height:700px;margin-top:56px}
.cp-diagram__line--v{
  position:absolute;left:50%;top:30px;bottom:30px;width:2px;
  background:repeating-linear-gradient(180deg,var(--cp-line-3) 0 7px,transparent 7px 14px);
}
.cp-diagram__line--h{
  position:absolute;top:50%;left:170px;right:170px;height:2px;
  background:repeating-linear-gradient(90deg,var(--cp-line-3) 0 7px,transparent 7px 14px);
}
.cp-diagram__hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:214px;height:214px;border-radius:50%;background:#fff;
  border:2px solid var(--cp-line-2);box-shadow:0 6px 22px rgba(31,35,40,.09);
  display:flex;align-items:center;justify-content:center;
}
.cp-diagram__hub img{width:138px;display:block}
.cp-node{
  position:absolute;padding:28px 32px;border-radius:18px;background:#fff;
  border:1px solid var(--cp-line);box-shadow:0 4px 16px rgba(31,35,40,.07);
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.cp-node:hover{box-shadow:0 16px 36px rgba(24,174,192,.22);border-color:var(--cp-mint)}
.cp-node__ico{flex:none;width:34px;height:34px;display:block;object-fit:contain}
.cp-node__body{display:flex;flex-direction:column;align-items:center;gap:7px}
.cp-node__tit{font:700 27px/1.2 'Noto Sans KR',sans-serif;color:var(--cp-ink)}
.cp-node__desc{font:400 18px/1.5 'Noto Sans KR',sans-serif;color:var(--cp-gray-2)}
.cp-node__eng{
  font:600 11px/1 'Archivo',sans-serif;letter-spacing:.14em;
  color:var(--cp-gray-5);margin-top:3px;
}
.cp-node__by{display:flex;align-items:center;gap:8px;margin-top:3px}
.cp-node__by span{font:600 11px/1 'Archivo',sans-serif;letter-spacing:.14em;color:var(--cp-gray-5)}
.cp-node__by img{height:14px;display:block;opacity:.55}
.cp-node--top{left:50%;top:0;transform:translateX(-50%);width:412px}
.cp-node--top:hover{transform:translateX(-50%) translateY(-6px)}
.cp-node--left{left:0;top:50%;transform:translateY(-50%);width:372px}
.cp-node--left:hover{transform:translateY(-50%) translateX(-6px)}
.cp-node--right{right:0;top:50%;transform:translateY(-50%);width:372px}
.cp-node--right:hover{transform:translateY(-50%) translateX(6px)}
.cp-node--bottom{left:50%;bottom:0;transform:translateX(-50%);width:412px}
.cp-node--bottom:hover{transform:translateX(-50%) translateY(6px)}

/* ============================================================
   8. KEY FEATURES
   ============================================================ */
.cp-feat{
  margin-top:56px;width:1280px;max-width:100%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.cp-feat__card{
  background:#fff;border:1px solid var(--cp-line-2);border-radius:16px;
  padding:42px 36px;display:flex;flex-direction:column;gap:8px;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.cp-feat__card:hover{
  transform:translateY(-6px);box-shadow:0 16px 34px rgba(31,35,40,.1);
  border-color:var(--cp-mint);
}
.cp-feat__card--mobile{background:#E4E7EA;border-color:#DCE0E4}
.cp-feat__lead{font:400 19px/1.4 'Noto Sans KR',sans-serif;color:var(--cp-gray-3)}
.cp-feat__tit{font:800 31px/1.3 'Noto Sans KR',sans-serif;color:var(--cp-ink)}
.cp-feat__eng{
  font:600 11px/1 'Archivo',sans-serif;letter-spacing:.16em;
  color:var(--cp-mint);margin-top:8px;
}
.cp-feat__card--mobile .cp-feat__eng{color:var(--cp-mint-dk)}

/* ============================================================
   9. CTA
   ============================================================ */
.cp-cta__inner{
  max-width:var(--cp-container);margin:0 auto;padding:120px 20px 130px;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.cp-cta__lead{font:400 24px/1.5 'Noto Sans KR',sans-serif;color:var(--cp-gray-1)}
.cp-cta__tit{margin-top:56px;font:900 48px/1.3 'Noto Sans KR',sans-serif;color:var(--cp-ink)}
.cp-cta__brand{position:relative;color:var(--cp-mint)}
.cp-cta__brand i{
  position:absolute;top:-3px;width:9px;height:9px;border-radius:50%;
  background:var(--cp-mint);display:block;
}
.cp-cta__brand i:nth-child(1){left:17px}
.cp-cta__brand i:nth-child(2){left:61px}
.cp-cta__brand i:nth-child(3){left:105px}
.cp-cta__btn{
  margin-top:14px;display:inline-flex;align-items:center;gap:14px;
  height:86px;padding:0 50px;border-radius:16px;
  background:var(--cp-mint);color:#fff;
  font:700 28px/1 'Noto Sans KR',sans-serif;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.cp-cta__btn:hover{
  color:#fff;background:var(--cp-mint-dk);
  transform:translateY(-3px);box-shadow:0 16px 32px rgba(24,174,192,.38);
}
.cp-cta__btn span{font:700 26px/1 'Archivo',sans-serif}

/* ============================================================
   10. PARTNER STRIP / FOOTER
   ============================================================ */
.cp-partner{background:var(--cp-bg-alt);border-top:1px solid var(--cp-line)}
.cp-partner__inner{
  max-width:var(--cp-container);margin:0 auto;height:96px;
  display:flex;align-items:center;justify-content:center;gap:34px;
}
.cp-partner__inner img{display:block}
.cp-partner__crepod{height:28px}
.cp-partner__godo{height:25px;opacity:.5}
.cp-partner__ilark{height:32px}
.cp-partner__div{width:1px;height:26px;background:var(--cp-line-3);display:block}

.cp-footer{background:var(--cp-dark)}
.cp-footer__inner{
  max-width:var(--cp-container);margin:0 auto;padding:52px 20px 60px;
  display:flex;flex-direction:column;gap:20px;
}
.cp-footer__nav{
  display:flex;align-items:center;gap:16px;
  font:700 21px/1 'Archivo',sans-serif;
}
.cp-footer__nav a{color:#fff}
.cp-footer__nav a:hover{color:var(--cp-orange)}
.cp-footer__nav i{width:4px;height:4px;border-radius:50%;background:#7C7871;display:block}
.cp-footer__info{
  display:flex;flex-direction:column;gap:8px;
  font:400 17px/1.5 'Noto Sans KR',sans-serif;color:#B6B2AB;
}
.cp-footer__row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cp-footer__row i{width:1px;height:15px;background:#5A574F;display:block}
.cp-footer__copy{margin-top:4px;font:400 14px/1.4 'Archivo',sans-serif;color:#8D8981}

/* ============================================================
   11. RESPONSIVE  (design width 1280 — tablet/mobile 대응)
   ============================================================ */
@media (max-width:1320px){
  .cp-mega__inner{padding:48px 20px 62px 40px;gap:40px}
}
@media (max-width:1279px){
  .cp-intro__inner{flex-direction:column;align-items:flex-start;gap:32px}
  .cp-intro__body{width:100%}
  .cp-intro__visual{max-width:100%;align-self:center}
  .cp-diagram{height:auto;display:grid;gap:20px;grid-template-columns:1fr 1fr}
  .cp-diagram__line--v,.cp-diagram__line--h{display:none}
  .cp-diagram__hub{position:static;transform:none;margin:0 auto;grid-column:1/-1}
  .cp-node{position:static;transform:none!important;width:auto!important}
  .cp-feat{grid-template-columns:repeat(2,1fr)}
  .cp-video__thumb{height:auto;aspect-ratio:16/9}
}
@media (max-width:1023px){
  .cp-gnb{gap:36px;font-size:18px}
  .cp-header__bar{padding:0 20px;height:84px}
  .cp-hero{height:420px}
  .cp-hero__tit h1{font-size:42px}
  .cp-hero__tit p{font-size:20px}
  .cp-intro__tit{font-size:36px}
  .cp-cta__tit{font-size:34px}
  .cp-cta__brand i{display:none}
}
@media (max-width:767px){
  .cp-gnb,.cp-mega{display:none!important}
  .cp-bc__inner{height:60px;font-size:15px}
  .cp-bc__btn{height:60px;font-size:15px;padding:0 14px}
  .cp-bc__home{padding:0 14px}
  .cp-sec__inner{padding:64px 20px 72px}
  .cp-intro__inner{padding:64px 20px 56px}
  .cp-video{padding:56px 20px 64px}
  .cp-sec__tag{height:44px;padding:0 26px;font-size:19px}
  .cp-intro__tit{font-size:28px}
  .cp-intro__desc{font-size:17px}
  .cp-stats{flex-wrap:wrap;gap:20px 28px}
  .cp-stats__div{display:none}
  .cp-diagram,.cp-feat{grid-template-columns:1fr}
  .cp-feat__card{padding:30px 24px}
  .cp-feat__tit{font-size:25px}
  .cp-cta__tit{font-size:26px}
  .cp-cta__lead{font-size:18px}
  .cp-cta__btn{height:68px;padding:0 28px;font-size:20px}
  .cp-video__play{width:64px;height:64px}
  .cp-video__play i{border-left-width:18px;border-top-width:11px;border-bottom-width:11px}
  .cp-partner__inner{height:auto;padding:24px 0;gap:18px;flex-wrap:wrap}
  .cp-footer__nav{font-size:16px;gap:10px;flex-wrap:wrap}
  .cp-footer__info{font-size:14px}
  .cp-footer__row{gap:10px}
  .cp-footer__row i{display:none}
}