@charset "utf-8";
/* =========================================================
   AI+ 인증이란 (about.html) — about.css
   로드 순서: style.css → sub.css → about.css
   서브비주얼(.a2v)·2차메뉴(.a2tab)·라벨/제목 공통은 sub.css 하단 "서브 공통" 참고
   ========================================================= */

/* ---------- 1. 인트로 : 중앙 스테이트먼트 + 이미지 슬롯 ---------- */
.a2-intro { padding: 120px 0 0; }
.a2-intro__head { max-width: 860px; margin: 0 auto; text-align: center; }
.a2-intro__title { isolation: isolate; margin-top: 18px; font-size: 52px; font-weight: 800; line-height: 1.25; letter-spacing: -.045em; color: var(--ink); }
.a2-intro__title span { position: relative; color: var(--navy); }
.a2-intro__title span::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 4px; height: 14px; background: rgba(46, 125, 254, .2); z-index: -1; }
.a2-intro__lead { margin-top: 32px; font-size: 20px; font-weight: 600; line-height: 1.75; color: var(--ink-2); }
.a2-intro__p { margin-top: 14px; font-size: 17px; line-height: 1.85; color: var(--sub); }
.a2-photo { margin: 72px 0 0; }
.a2-photo__img { display: block; width: 100%; height: auto; background: #ECEAF5; }
/* 가운데 원 네온 효과 : 이미지 원 중심(50%, 49.9%) 기준 */
.a2-photo__media { position: relative; overflow: hidden; border-radius: 22px; }
.a2-neon { position: absolute; left: 50%; top: 49.9%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.a2-neon--out { width: 31.6%;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(60,130,255,0) 62%, rgba(60,130,255,.7) 80%, #3d7dff 86%, #9cc3ff 89%, rgba(60,130,255,.6) 93%, transparent 97%);
  -webkit-mask: radial-gradient(closest-side, transparent 91.5%, #000 95.5%, #000 98%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 91.5%, #000 95.5%, #000 98%, transparent 100%);
  filter: drop-shadow(0 0 8px rgba(50,120,255,.85)) drop-shadow(0 0 3px rgba(50,120,255,.9));
  animation: a2NeonSpin 7s linear infinite; }
.a2-neon--in { width: 20.4%;
  box-shadow: 0 0 0 1.5px rgba(80,145,255,.6), 0 0 20px 3px rgba(60,130,255,.45), inset 0 0 16px rgba(80,145,255,.35);
  animation: a2NeonPulse 3.2s ease-in-out infinite; }
@keyframes a2NeonSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes a2NeonPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* 우측 화살표 빛 흐름 → 아이콘 원 네온 (위에서 아래로 순차, 6초 주기) */
.a2-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.a2-flow { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 22 200; stroke-dashoffset: 22; opacity: 0;
  animation: a2Flow 6s cubic-bezier(.45,0,.4,1) infinite; animation-delay: calc(var(--i) * .45s); }
.a2-ring { fill: none; stroke: #5b95ff; stroke-width: 3.5; opacity: 0;
  animation: a2Ring 6s ease-out infinite; animation-delay: calc(var(--i) * .45s + .95s); }
@keyframes a2Flow { 0% { stroke-dashoffset: 22; opacity: 0; } 2% { opacity: 1; } 16% { opacity: 1; } 18%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes a2Ring { 0% { opacity: 0; } 4% { opacity: 1; } 22%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .a2-flow, .a2-ring { animation: none; } .a2-neon { animation: none; } .a2-neon--out { opacity: 0; } .a2-neon--in { opacity: .6; } }

/* ---------- 2. 필요성 : 좌측 고정 + 세로 타임라인 ---------- */
.a2-why { padding: 140px 0; }
.a2-why__grid { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: start; }
.a2-why__head { position: sticky; top: calc(var(--header-h) + 110px); }
.a2-why__sum { margin-top: 28px; font-size: 19px; font-weight: 600; line-height: 1.7; color: #2454C6; }
.a2-line { position: relative; }
.a2-line::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, #2454C6, rgba(36, 84, 198, .1)); }
.a2-line li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 28px; align-items: start; padding: 0 0 56px 56px; }
.a2-line li:last-child { padding-bottom: 0; }
.a2-line__dot { position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid #2454C6; }
.a2-line__ico { width: 96px; height: 96px; margin-top: -24px; }
.a2-line strong { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--navy); }
.a2-line p { margin-top: 10px; font-size: 17px; line-height: 1.85; color: var(--body); }

/* ---------- 3. 평가 : 다크 3단 ---------- */
.a2-eval { position: relative; overflow: hidden; padding: 130px 0 140px; color: #fff; background: #071B3E; }
/* 배경 : 옅은 격자 + 우측 상단 동심원 라인 */
.a2-eval::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center top;
  -webkit-mask: radial-gradient(ellipse 70% 80% at 70% 20%, #000 10%, transparent 75%);
          mask: radial-gradient(ellipse 70% 80% at 70% 20%, #000 10%, transparent 75%); }
.a2-eval::after { content: ""; position: absolute; right: -260px; top: -320px; width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 89px, rgba(111,168,255,.12) 89px 90px);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
          mask: radial-gradient(circle, #000 30%, transparent 70%); }
.a2-eval > .inner { position: relative; z-index: 1; }
.a2-eval__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.a2-eval__head .a2-h2 { margin-top: 0; color: #fff; }
.a2-eval__head p { font-size: 14px; color: #8FA0BA; }
.a2-eval__cols { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-radius: 22px; background: rgba(255, 255, 255, .02); }
.a2-eval__cols li { position: relative; padding: 52px 44px 56px; transition: background .35s; }
.a2-eval__cols li + li { border-left: 1px solid rgba(255, 255, 255, .2); }
.a2-eval__cols li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #3D8BFF, #8FB8FF); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.a2-eval__cols li:hover { background: rgba(255, 255, 255, .04); }
.a2-eval__cols li:hover::before { transform: scaleX(1); }
.a2-eval__ico { display: inline-flex; width: 112px; height: 112px; border-radius: 50%; background: #fff; align-items: center; justify-content: center; }
.a2-eval__ico img { width: 84px; height: 84px; }
.a2-eval__no { display: block; margin-top: 36px; font-size: 14px; font-weight: 800; letter-spacing: .1em; color: #6FA8FF; }
.a2-eval__cols h3 { margin-top: 8px; font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.a2-eval__cols p { margin-top: 14px; font-size: 16px; line-height: 1.8; color: #B9C6DA; }

/* ---------- 4. 가치 : 중앙 + 두 박스를 + 로 연결 ---------- */
.a2-trust { padding: 140px 0; background: #F4F6FA; }
.a2-trust__head { text-align: center; }
.a2-trust__head > p:last-child { margin-top: 20px; font-size: 17px; line-height: 1.85; color: var(--sub); }
.a2-pair { margin-top: 60px; display: flex; align-items: center; justify-content: center; }
.a2-pair__box { flex: 0 1 420px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 32px 44px; background: #fff; border: 1px solid #DCE3EE; border-radius: 22px; box-shadow: 0 14px 32px rgba(16, 38, 76, .05); }
.a2-pair__box img { width: 96px; height: 96px; }
.a2-pair__box strong { margin-top: 18px; font-size: 26px; font-weight: 800; color: var(--navy); }
.a2-pair__box p { margin-top: 10px; font-size: 17px; line-height: 1.7; color: var(--sub); }
.a2-pair__plus { flex: none; position: relative; z-index: 1; display: inline-flex; width: 72px; height: 72px; margin: 0 -14px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 40px; font-weight: 300; line-height: 1; align-items: center; justify-content: center; box-shadow: 0 0 0 8px #F4F6FA; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1280px) {
  .a2-why__grid { grid-template-columns: 290px 1fr; gap: 32px; }
}

@media (max-width: 1024px) {
  .a2-intro { padding-top: 88px; }
  .a2-intro__title { font-size: 40px; }
  .a2-why { padding: 96px 0; }
  .a2-why__grid { grid-template-columns: 1fr; gap: 48px; }
  .a2-why__head { position: static; }
  .a2-eval { padding: 96px 0; }
  .a2-eval__cols { grid-template-columns: 1fr; }
  .a2-eval__cols li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .2); }
  .a2-eval__cols li { display: grid; grid-template-columns: 112px 1fr; column-gap: 32px; padding: 40px 8px; }
  .a2-eval__ico { grid-row: 1 / 4; }
  .a2-eval__no { margin-top: 6px; }
  .a2-trust { padding: 96px 0; }
}

@media (max-width: 768px) {

  .a2-intro { padding-top: 64px; }
  .a2-intro__head { text-align: left; }
  .a2-intro__title { margin-top: 12px; font-size: 28px; }
  .a2-intro__title span::after { height: 9px; bottom: 2px; }
  .a2-intro__lead { margin-top: 20px; font-size: 17px; }
  .a2-intro__p { font-size: 15px; }
  .a2-photo { margin-top: 40px; }
  .a2-photo__media { border-radius: 14px; }

  .a2-why { padding: 72px 0; }
  .a2-why__sum { margin-top: 18px; font-size: 16px; }
  .a2-line li { grid-template-columns: 1fr; gap: 10px; padding: 0 0 40px 36px; }
  .a2-line__ico { width: 64px; height: 64px; margin-top: -12px; }
  .a2-line strong { font-size: 18px; }
  .a2-line p { font-size: 15px; }

  .a2-eval { padding: 72px 0; }
  .a2-eval__cols { margin-top: 32px; border-radius: 18px; }
  .a2-eval__cols li { grid-template-columns: 72px 1fr; column-gap: 18px; padding: 28px 20px; }
  .a2-eval__ico { width: 72px; height: 72px; }
  .a2-eval__ico img { width: 54px; height: 54px; }
  .a2-eval__cols h3 { font-size: 20px; }
  .a2-eval__cols p { font-size: 15px; }

  .a2-trust { padding: 72px 0; }
  .a2-trust__head { text-align: left; }
  .a2-trust__head > p:last-child { font-size: 15px; }
  .a2-pair { flex-direction: column; margin-top: 36px; }
  .a2-pair__box { flex: none; width: 100%; padding: 32px 20px; border-radius: 18px; }
  .a2-pair__box img { width: 72px; height: 72px; }
  .a2-pair__box strong { font-size: 21px; }
  .a2-pair__box p { font-size: 15px; }
  .a2-pair__plus { width: 56px; height: 56px; margin: -12px 0; font-size: 32px; }
}