.mh-wrap{max-width:1408px; margin:0 auto; padding:0 32px}
#benefit{scroll-margin-top:82px}

/* 메인 배너 — 통이미지 롤링. PC 이미지 1920×497(2배 3840×994), 모바일 750×1112
   1536px 이상: 높이 497 고정 + 가운데 기준 좌우 크롭 / 1536px 미만: 1536 기준 영역을 비율대로 축소 */
.mh-hero{position:relative; height:497px; overflow:hidden; background:#f2f7fd}
.mh-slides{position:absolute; inset:0}
.mh-slide{position:absolute; inset:0; display:block; opacity:0; visibility:hidden; transition:opacity .8s ease, visibility .8s}
.mh-slide.on{opacity:1; visibility:visible}
.mh-slide picture{display:block; width:100%; height:100%}
.mh-slide img{width:100%; height:100%; object-fit:cover; object-position:center; display:block}
.mh-ph{display:none}
.mh-cat-img.noimg > img{display:none}
.noimg > .mh-ph{display:flex; align-items:center; justify-content:center; text-align:center; border:1.5px dashed #9fb3cc; border-radius:6px; background:rgba(255,255,255,.55); color:#5b6f8c; font-size:13px; line-height:1.7; padding:16px}
.mh-eyebrow{font-size:12px; font-weight:500; letter-spacing:.32em; color:var(--mh-eyebrow); margin:0 0 24px 2px}
/* 인디케이터: 배너 이미지 속 버튼 아래(이미지 기준 x 358, y 414) */
.mh-dots{position:absolute; z-index:2; left:max(10.8%, calc(50% - 602px)); top:calc(83.3% - 10px); display:flex; align-items:center; gap:12px}
.mh-dots button{width:18px; height:20px; padding:8px 0; border:0; border-radius:3px; background:#e1e6ec; background-clip:content-box; cursor:pointer; transition:width .25s, background-color .25s}
.mh-dots button.on{width:20px; padding:7.5px 0; background-color:#1458d0}
.mh-arw{position:absolute; z-index:2; top:calc(44.9% - 22px); width:44px; height:44px; border-radius:50%; border:0; background:rgba(232,236,241,.92); color:#2a2f3a; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0}
.mh-arw:hover{background:#fff; color:var(--mh-blue)}
.mh-arw svg{width:20px; height:20px}
.mh-arw.prev{left:max(16px, calc(50% - 722px))}
.mh-arw.prev svg{transform:rotate(180deg)}
.mh-arw.next{right:max(16px, calc(50% - 723px))}
@media (max-width:1535px){ .mh-hero{height:auto; aspect-ratio:1536/497} .mh-slide img{object-position:center} }

/* 핵심 정보 (시안: 배너 하단과 39px 겹침, 높이 152px, 3열 + 세로 구분선) */
.mh-info{position:relative; z-index:3; margin-top:max(-39px, -2.54vw)}
.mh-info .mh-wrap{max-width:1411px}
.mh-info-box{display:grid; grid-template-columns:1fr 1fr 1fr; background:#fff; border-radius:8px; box-shadow:0 8px 28px -6px rgba(30,50,90,.10), 0 0 0 1px rgba(30,50,90,.035); padding:30px 0}
.mh-info-item{position:relative; display:flex; align-items:center; justify-content:center; gap:22px; padding:0 24px; min-height:92px; text-decoration:none; color:inherit; min-width:0}
.mh-info-item + .mh-info-item::before{content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:#ececec}
.mh-info-ic{width:74px; height:74px; border-radius:16px; background:#f1f6fd; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.mh-info-ic svg{width:44px; height:44px}
.mh-info-tx{min-width:0}
.mh-info-tx strong{display:block; font-size:19px; font-weight:500; line-height:1.47; color:#1f2633; letter-spacing:-.03em; transition:color .15s}
.mh-info-tx span{display:block; font-size:15px; color:var(--mh-sub); margin-top:8px; letter-spacing:-.02em}
.mh-info-item:hover strong{color:var(--mh-blue)}

/* 대표 공학계열 자격증 */
.mh-cat{padding:76px 0 80px}
.mh-cat .mh-wrap{max-width:1406px}
.mh-cat-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:7px; padding-left:4px}
.mh-cat-head .mh-eyebrow{font-size:11px; margin:0 0 12px 1px}
.mh-cat-head h2{font-size:32px; font-weight:800; color:var(--mh-ink); letter-spacing:-.04em; margin:0; line-height:1.1}
.mh-more{display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:500; color:var(--mh-blue-d); text-decoration:none; padding:4px 0; white-space:nowrap; letter-spacing:-.02em}
.mh-more svg{width:15px; height:15px}
.mh-more:hover{text-decoration:underline; text-underline-offset:3px}
.mh-cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.mh-cat-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--mh-line); border-radius:4px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 2px 10px -4px rgba(20,35,70,.08); transition:box-shadow .2s, border-color .2s}
.mh-cat-card:hover{border-color:#c9d4e4; box-shadow:0 14px 30px -18px rgba(20,35,70,.35)}
.mh-cat-img{position:relative; aspect-ratio:2.8/1; background:#e9eff7; overflow:hidden}
.mh-cat-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease}
.mh-cat-card:hover .mh-cat-img img{transform:scale(1.03)}
.mh-cat-img.noimg .mh-ph{position:absolute; inset:10px; font-size:12px; padding:8px}
.mh-cat-bd{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px 13px 21px}
.mh-cat-bd h3{margin:0; line-height:1.3; font-size:20px; font-weight:800; color:var(--mh-ink); letter-spacing:-.03em}
.mh-cat-bd p{margin:8px 0 0; line-height:1.45; font-size:14px; color:var(--mh-sub); letter-spacing:-.02em}
.mh-cat-go{width:36px; height:36px; border-radius:50%; border:1px solid #dfe3ea; color:#1f2633; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s, border-color .2s, color .2s}
.mh-cat-go svg{width:16px; height:16px}
.mh-cat-card:hover .mh-cat-go{background:var(--mh-blue); border-color:var(--mh-blue); color:#fff}

/* 메인에 이어 붙인 원본 섹션(신청부터 발급까지 ~ CTA): 콘텐츠 폭을 상단 섹션(.mh-wrap)과 동일하게 */
#page-home section.blk > .wrap, #page-home section.cta > .wrap{max-width:1408px; padding-left:32px; padding-right:32px}
#page-home .steps, #page-home .forms, #page-home .cats{gap:20px}
#page-home .steps{grid-template-columns:repeat(3,1fr)}  /* 10/12: 3단계 */
#page-home .use-txt h3, #page-home .use-txt p, #page-home .use-txt li{word-break:keep-all}
#page-home .cta .cta-desc{line-height:1.7; word-break:keep-all}
/* 신청부터 발급까지: 단계 번호 + 상단 진행 바 + 연결 화살표, 화면에 들어오면 1→3 순서로 등장 */
#page-home .steps{counter-reset:kstep}
#page-home .step{position:relative; counter-increment:kstep; padding:26px 22px 24px; border-color:var(--mh-line); border-radius:10px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
#page-home .step:nth-child(1){--i:0} #page-home .step:nth-child(2){--i:1} #page-home .step:nth-child(3){--i:2} #page-home .step:nth-child(4){--i:3}
/* 상단 진행 띠: 카드와 같은 크기·둥글기의 상자 위쪽 3px에만 그려서 모서리 곡선을 그대로 따라가게 함 (10/13) */
#page-home .step::before{content:""; position:absolute; inset:-1px; border-radius:10px; pointer-events:none; transform-origin:left center;
  background:linear-gradient(90deg,#0d50c4 0%,#0d50c4 38%,#8fc2ff 50%,#0d50c4 62%,#0d50c4 100%) 100% 0/300% 3px no-repeat}
#page-home .step h4::before{content:"STEP " counter(kstep, decimal-leading-zero); display:block; font-size:11px; font-weight:600; letter-spacing:.24em; color:var(--mh-blue); margin-bottom:6px}
#page-home .step h4{font-size:18px; letter-spacing:-.03em; color:var(--mh-ink); margin-bottom:6px}
#page-home .step p{font-size:14.5px; line-height:1.55; word-break:keep-all}
#page-home .step:not(:last-child)::after{content:""; position:absolute; z-index:2; right:-23px; top:50%; width:26px; height:26px; margin-top:-13px; border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d50c4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow:0 0 0 1px var(--mh-line), 0 4px 10px -4px rgba(20,35,70,.25)}
#page-home .step:hover{transform:translateY(-4px); border-color:#c9d4e4; box-shadow:0 14px 30px -18px rgba(20,35,70,.35)}
/* 등장 애니메이션 (JS가 .steps-anim → .is-in 순으로 클래스를 붙임) */
#page-home .steps-anim:not(.is-in) .step{opacity:0}
#page-home .steps-anim:not(.is-in) .step::before{transform:scaleX(0)}
#page-home .steps-anim:not(.is-in) .step::after{opacity:0}
#page-home .steps-anim.is-in .step{animation:kstepIn .55s cubic-bezier(.2,.7,.3,1) backwards; animation-delay:calc(var(--i) * .28s)}
/* 진행 바 위로 빛줄기가 1→3 순서로 계속 흐름 (주기 1.8초, 카드당 0.6초) */
@media (prefers-reduced-motion:no-preference){
  #page-home .step::before{animation:kstepFlow 1.8s linear infinite; animation-delay:calc(var(--i) * .6s)}
}
#page-home .steps-anim.is-in .step::before{animation:kstepBar .45s ease-out backwards, kstepFlow 1.8s linear infinite;
  animation-delay:calc(var(--i) * .28s + .3s), calc(1.8s + var(--i) * .6s)}
#page-home .steps-anim.is-in .step::after{animation:kstepArrow .35s ease-out backwards; animation-delay:calc(var(--i) * .28s + .55s)}
@keyframes kstepIn{from{opacity:0; transform:translateY(22px)}}
@keyframes kstepBar{from{transform:scaleX(0)}}
@keyframes kstepFlow{0%{background-position:100% 0} 33.333%,100%{background-position:0% 0}}
@keyframes kstepArrow{from{opacity:0; transform:translateX(-8px) scale(.6)}}

/* 자격증 형태: 순서 등장(1회) + 호버 */
#page-home .form-c{position:relative; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
#page-home .form-c:nth-child(1){--i:0} #page-home .form-c:nth-child(2){--i:1} #page-home .form-c:nth-child(3){--i:2}
#page-home .form-c:hover{transform:translateY(-4px); box-shadow:0 16px 32px -18px rgba(20,35,70,.38)}
#page-home .form-c:not(.hl):hover{border-color:#c9d4e4}
#page-home .form-c.hl:hover{box-shadow:0 0 0 1px var(--blue) inset, 0 16px 32px -18px rgba(13,80,196,.4)}
#page-home .forms-anim:not(.is-in) .form-c{opacity:0}
#page-home .forms-anim.is-in .form-c{animation:kstepIn .6s cubic-bezier(.2,.7,.3,1) backwards; animation-delay:calc(var(--i) * .18s)}
/* 자격증 발급 형태: 배경 영역 없이 이미지(16:9)가 상단 영역을 통으로 채운다 */
#page-home .form-c .vis-img{position:relative; overflow:hidden; aspect-ratio:16/9; border-bottom:1px solid var(--line)}
#page-home .form-c .vis-img img{display:block; width:100%; height:100%; object-fit:cover; transition:scale .35s ease}
#page-home .form-c:hover .vis-img img{scale:1.03}

/* 원본 섹션 제목: '대표 공학계열 자격증'과 같은 타이포그래피 */
#page-home .sec-head{margin-bottom:40px}
#page-home .sec-head .tag{font-size:12px; font-weight:500; letter-spacing:.32em; color:var(--mh-eyebrow)}
#page-home .sec-head h2{font-size:32px; font-weight:800; line-height:1.2; letter-spacing:-.04em; color:var(--mh-ink); margin:12px 0 12px}
#page-home .sec-head p{font-size:17px; color:var(--mh-sub); letter-spacing:-.02em; word-break:keep-all}
#page-home .use-grid{grid-template-columns:.85fr 1.15fr; gap:40px}
#page-home .use-txt{padding-left:clamp(24px, 8vw, 112px)}
#page-home .use-txt h3{font-size:34px; line-height:1.32; letter-spacing:-.035em; color:var(--mh-ink); margin-bottom:18px}
#page-home .use-txt p{font-size:18px; line-height:1.7; color:#4b5563; margin-bottom:28px; letter-spacing:-.02em}
#page-home .use-txt ul{gap:14px}
#page-home .use-txt li{font-size:17px; padding-left:28px; color:#1f2633}
#page-home .use-txt .use-eyebrow{font-size:12px; margin:0 0 14px 1px}
#page-home .use-txt h3 em{font-style:normal; color:var(--mh-blue)}
#page-home .use-txt p{margin-bottom:30px}
#page-home .use-txt ul.use-list{display:block; max-width:440px; border-top:1px solid #dbe3ee}
#page-home .use-txt .use-list li{display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid #dbe3ee; font-size:17px; font-weight:600; color:#1f2633; letter-spacing:-.02em}
#page-home .use-txt .use-list li::before{content:none}
#page-home .use-ic{width:40px; height:40px; border-radius:10px; background:#fff; color:var(--mh-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 0 0 1px #e1e8f2, 0 4px 10px -6px rgba(20,50,110,.25)}
#page-home .use-ic svg{width:20px; height:20px}
.resume-img{display:block; width:100%; max-width:700px; height:auto; margin:-22px auto -30px}
/* 활용 안내 섹션 세로 여백 압축 (이미지 자체의 투명 여백은 음수 마진으로 상쇄) */
#page-home #benefit{padding:44px 0 40px}
#page-home #benefit .sec-head{margin-bottom:24px}
#page-home #benefit .use-note{margin-top:6px}
#page-home .use-note{text-align:center}

/* 반응형 — 태블릿 */
@media (max-width:1120px){
  .mh-wrap, #page-home section.blk > .wrap, #page-home section.cta > .wrap{padding-left:24px; padding-right:24px}
  .mh-arw{display:none}
  .mh-info-item{padding:0 16px; gap:14px}
  .mh-info-ic{width:60px; height:60px; border-radius:14px}
  .mh-info-ic svg{width:36px; height:36px}
  .mh-info-tx strong{font-size:16.5px}
  .mh-info-tx span{font-size:13.5px}
  .mh-cat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  #page-home .step:not(:last-child)::after{display:none}
  #page-home .use-grid{grid-template-columns:1fr; gap:28px}
  #page-home .use-txt{padding-left:0}
  #page-home .use-txt h3{font-size:26px}
  #page-home .use-txt p{font-size:16px; margin-bottom:22px}
  #page-home .use-txt li{font-size:15.5px}
  #page-home .use-txt .use-list li{font-size:15.5px; padding:11px 0}
  #page-home .use-txt ul.use-list{max-width:none}
  .mh-info-box{grid-template-columns:1fr; padding:4px 0}
  .mh-info-item{justify-content:flex-start; padding:18px 24px; min-height:0}
  .mh-info-item + .mh-info-item::before{left:24px; right:24px; top:0; bottom:auto; width:auto; height:1px}
  .mh-info-tx strong br{display:none}
}
/* 반응형 — 모바일: 사진(위) + 문구(아래)로 분리해 인물이 잘리지 않고 글자가 사진과 겹치지 않도록 */
@media (max-width:768px){
  #page-home .steps{grid-template-columns:1fr}
  #page-home .sec-head{margin-bottom:26px}
  #page-home #benefit{padding:36px 0 32px}
  .resume-img{margin:-12px auto -16px}
  #page-home .sec-head .tag{font-size:10.5px}
  #page-home .sec-head h2{font-size:24px; margin:10px 0 8px}
  #page-home .sec-head p{font-size:15px}
  .mh-hero{aspect-ratio:375/556; background:#fff}
  .mh-dots{left:50%; top:auto; bottom:10px; transform:translateX(-50%)}
  .mh-info{margin-top:16px}
  .mh-cat{padding:52px 0 56px}
  .mh-cat-head h2{font-size:24px}
  .mh-cat-grid{gap:12px}
  .mh-cat-bd{padding:16px 14px 18px 16px}
  .mh-cat-bd h3{font-size:17px}
  .mh-cat-bd p{font-size:13px; margin-top:6px}
  .mh-cat-go{width:34px; height:34px}
}
@media (max-width:520px){
  .mh-wrap, #page-home section.blk > .wrap, #page-home section.cta > .wrap{padding-left:16px; padding-right:16px}
  .mh-cat-head{flex-wrap:wrap; align-items:flex-end}
  .mh-cat-grid{grid-template-columns:1fr}
  .mh-info-item{padding:16px 18px}
  .mh-info-item + .mh-info-item::before{left:18px; right:18px}
}
@media (prefers-reduced-motion:reduce){ .mh-slide,.mh-cat-img img,.mh-dots button{transition:none} }