#header {background: #ffffff;    padding: 20px 0;}

.ai__heading {color: #333333;font-size: 38px;line-height: 56px;letter-spacing: -2px;font-family: 'pre_B';}
.ai__heading span {color: #929292;font-family: 'pre_B';}
.ai__heading_key {color: #735AF3;margin: 0 0 50px 0;font-size: 26px;display: block;text-align: center;font-family: 'pre_SB';}
@media screen and (max-width: 1024px) {
    .ai__heading_key {font-size: 22px; margin: 0 0 30px 0;}
    .ai__heading,
    .ai__heading span {font-size: 30px;line-height: 36px;}
    
}
@media screen and (max-width: 800px) {
    .ai__heading,
    .ai__heading span {font-size: 30px;line-height: 36px;}
    
}
@media screen and (max-width: 600px) {
    .ai__heading,
    .ai__heading span  {font-size: 21px;line-height: 28px;}
}







.ai-intro {background-color: #ffffff;background-repeat: no-repeat;background-position: center top;padding: 274px 24px 90px;font-family: "Pretendard", "Noto Sans KR", sans-serif;color: #111111;background-image: url("/image/sub/ai/back.jpg");background-size: cover;}
.ai-intro__hero { text-align: center;}
.ai-intro__eyebrow {color: #888888;font-size: 36px;font-weight: 600;line-height: 34px;letter-spacing: -1px;}
.ai-intro .ai-intro__title {margin-top: 82px;color: #dedde3; font-size: 94px;line-height: 80px;letter-spacing: -3.5px;font-family: 'pre_SB';}
.ai-intro__title span {color: transparent;background-image: linear-gradient(180deg, #E5E5E5 50%, #C492FF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-shadow: none;filter: drop-shadow(0px 0px 2px #b880ed);font-family: 'pre_SB';}
.ai-intro .ai-intro__description {margin-top: 34px;color: #e7dcfa;font-size: 22px;letter-spacing: -0.7px;font-family: 'pre_L';line-height: 1.5;}
.ai-intro__inner {  margin: 288px auto 0px; }
.ai-intro__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.ai-intro__button {display: flex;flex-shrink: 0;align-items: center;justify-content: center;gap: 12px;width: 374px;min-height: 66px;padding: 18px 24px;background-repeat: no-repeat;background-position: center;background-size: 374px 66px;border-radius: 40px;color: #ffffff;font-size: 17px;font-weight: 600;line-height: 22px;letter-spacing: -0.7px;text-decoration: none;background-image: url("/image/sub/ai/btn_back.png");}
.ai-intro__button:focus-visible { outline: 2px solid #7650e9; outline-offset: 5px; }
.ai-intro__button-icon {display: block;flex-shrink: 0;height: 14px;}
.ai-intro__button-icon img {display: block;height: 100%;}
.ai-intro__list { display: flex; gap: 60px; margin-top: 88px; }
.ai-problem { flex: 1; min-width: 0px; }
.ai-problem__number { padding-bottom: 13px; border-bottom: 3px solid #e3e3e3; color: #a0a0a0; font-size: 18px; font-weight: 600; line-height: 26px; }
.ai-problem__icon { width: 26px; height: 26px; margin-top: 30px; }
.ai-problem__icon img { display: block; width: 26px; height: 26px; object-fit: contain; }
.ai-problem h4 { margin-top: 14px; font-size: 17px; font-weight: 700; line-height: 26px; letter-spacing: -0.9px; white-space: nowrap; }
.ai-problem p { margin-top: 10px; color: #666666; font-size: 14px; font-weight: 400; line-height: 22px; letter-spacing: -0.6px; }
/* 태블릿 */
@media (max-width: 1024px) {
    .ai-intro {padding: 200px 24px 80px;background-size: auto 970px;}
    .ai-intro__eyebrow { font-size: 28px; line-height: 1.3; }
    .ai-intro .ai-intro__title { margin-top: 60px; font-size: 72px; line-height: 1.1; letter-spacing: -2.5px; }
    .ai-intro .ai-intro__description { margin-top: 28px; font-size: 19px; }
    .ai-intro__inner { margin-top: 220px; }
    .ai-intro__heading { gap: 24px; }
    .ai-intro__button { width: 340px; min-height: 62px; padding: 16px 20px; background-size: 100% 100%; font-size: 16px; }
    .ai-intro__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; margin-top: 70px; }
}
/* 모바일 */
@media (max-width: 767px) {
    .ai-intro {padding: 150px 20px 70px;background-size: auto 780px;}
    .ai-intro__eyebrow { font-size: 22px; letter-spacing: -0.5px; }
    .ai-intro .ai-intro__title { margin-top: 44px; font-size: 48px; line-height: 1.15; letter-spacing: -2px; }
    .ai-intro .ai-intro__description { margin-top: 24px; font-size: 16px; line-height: 1.6; letter-spacing: -0.5px; word-break: keep-all; }
    .ai-intro .ai-intro__description br { display: none; }
    .ai-intro__inner { margin-top: 160px; }
    .ai-intro__heading { flex-direction: column; align-items: flex-start; gap: 28px; }
    .ai-intro__button { width: 100%; max-width: 374px; min-height: 60px; padding: 15px 18px; font-size: 15px; }
    .ai-intro__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin-top: 50px; }
    .ai-problem__number { padding-bottom: 10px; font-size: 16px; line-height: 24px; }
    .ai-problem__icon { margin-top: 24px; }
    .ai-problem h4 { font-size: 16px; line-height: 24px; white-space: normal; word-break: keep-all; }
    .ai-problem p { font-size: 14px; line-height: 22px; word-break: keep-all; }
}
/* 작은 모바일 */
@media (max-width: 480px) {
    .ai-intro {padding: 130px 20px 60px;background-size: auto 740px;}
    .ai-intro__eyebrow { font-size: 18px; }
    .ai-intro .ai-intro__title { margin-top: 36px; font-size: 38px; line-height: 1.2; letter-spacing: -1.5px; }
    .ai-intro .ai-intro__description { font-size: 15px; }
    .ai-intro__inner { margin-top: 130px; }
    .ai-intro__list {gap: 32px;margin-top: 44px;}
    .ai-problem__icon { margin-top: 20px; }
    .ai-problem h4 {margin-top: 10px;font-size: 14px;}
    .ai-problem p {margin-top: 8px;font-size: 13px;line-height: 18px;}
}




.ai.chat-flow {position: relative;padding: 104px 0 0 0;}
.ai.chat-flow h4 { margin: 60px 0;  text-align: right;  font-size: 20px;  color: #333;}
.ai.chat-flow .chat-flow__nav {position: sticky;top: 126px;z-index: 2;max-width: 900px;margin: 0px auto;background: #ffffffed;backdrop-filter: blur(16px);border: 1px solid #f2f0f6;border-radius: 20px;box-shadow: 0px 4px 22px #25203c0d;padding: 22px 32px 18px;}
.ai.chat-flow .chat-flow__nav ol { display: flex; list-style: none; padding: 0px; margin: 0px; }
.ai.chat-flow .chat-flow__nav li { flex: 1; min-width: 0px; position: relative; }
.ai.chat-flow .chat-flow__nav li:not(:last-child)::after { content: ""; position: absolute; left: 50%; right: -50%; height: 2px; top: 10px; background: #e8e4ee; z-index: 0; }
.ai.chat-flow .chat-flow__nav li.done::after { background: #a350ff; }
.ai.chat-flow .chat-flow__nav button {position: relative;z-index: 1;border: 0px;background: transparent;width: 100%;cursor: pointer;color: #939399;font: inherit;font-size: 17px;line-height: 26px;padding: 0px;white-space: nowrap;text-align: center;}
.ai.chat-flow .chat-flow__dot { display: block; width: 12px; height: 12px; border: 3px solid #e4dfeb; background: white; border-radius: 20px; margin: 5px auto 10px; }
.ai.chat-flow .done .chat-flow__dot, .active .chat-flow__dot { border-color: #a350ff; }
.ai.chat-flow .done .chat-flow__dot { background: #a350ff; }
.ai.chat-flow .chat-flow__nav .active button { color: #a350ff; font-weight: 700; }

.ai.chat-flow .chat-flow__step {margin: 0px auto;display: grid;grid-template-columns: 1fr 1.32fr;align-items: center;min-height: calc(100svh - 350px);padding: 64px 0px;scroll-margin-top: 120px;}
.ai.chat-flow .chat-flow__eyebrow { color: var(--step-color); font-size: 16px; font-weight: 500; line-height: 26px; margin: 0px 0px 42px; }
.ai.chat-flow .chat-flow__title {font-size: 34px;line-height: 46px;letter-spacing: -1.4px;margin: 0px 0px 26px;font-family: 'pre_SB';}
.ai.chat-flow .chat-flow__description { font-size: 17px; line-height: 26px; color: #707077; letter-spacing: -0.5px; margin: 0px; }
.ai.chat-flow .chat-flow__image { width: 100%; aspect-ratio: 272 / 190; }
.ai.chat-flow .chat-flow__visual { display: block; width: 100%; height: auto; }
.ai.chat-flow .chat-flow__visual[hidden] { display: none; }
.ai.chat-flow .chat-flow button:focus-visible { outline: 2px solid #a350ff; outline-offset: 5px; }
/* 연결선: 회색 바탕 위에 보라색 선이 펼쳐집니다. */
.ai.chat-flow .chat-flow__nav li:not(:last-child)::after {
    background: linear-gradient(#a350ff, #a350ff) no-repeat left center;
    background-color: #e8e4ee;
    background-size: 0px 2px;
    transition: background-size 450ms ease;
}
.ai.chat-flow .chat-flow__nav li.done:not(:last-child)::after {  background-size: 100% 2px;}
/* 동그라미 */
.ai.chat-flow .chat-flow__nav .chat-flow__dot {
    box-sizing: border-box;
    transition:
        background-color 300ms ease,
        border-color 300ms ease,
        box-shadow 300ms ease;
}
.ai.chat-flow .chat-flow__nav .done .chat-flow__dot,
.ai.chat-flow .chat-flow__nav .active .chat-flow__dot {  border-color: #a350ff;  background-color: #a350ff;}
/* 현재 단계에 은은한 테두리 효과 */
.ai.chat-flow .chat-flow__nav .active .chat-flow__dot {  box-shadow: 0px 0px 0px 5px #a350ff1a;}
/* 단계 텍스트 */
.ai.chat-flow .chat-flow__nav button {  transition: color 300ms ease;}
.ai.chat-flow .chat-flow__nav .done button,
.ai.chat-flow .chat-flow__nav .active button {  color: #a350ff;}
.ai.chat-flow .chat-flow__nav button:focus-visible {  outline: 2px solid #a350ff;  outline-offset: 5px;}
@media (prefers-reduced-motion: reduce) {
    .ai.chat-flow .chat-flow__nav li:not(:last-child)::after,
    .ai.chat-flow .chat-flow__nav .chat-flow__dot,
    .ai.chat-flow .chat-flow__nav button {
        transition: none;
    }
}
/* 공통 */
.ai.chat-flow, .ai.chat-flow * { box-sizing: border-box; }
.ai.chat-flow .inner {width: 100%;margin: 0px auto;padding: 0px 24px;max-width: 1040px;}
.ai.chat-flow .chat-flow__step > div { min-width: 0px; }
.ai.chat-flow .chat-flow__visual { max-width: 100%; }


/* 태블릿 */
@media (max-width: 1200px) {
    .ai.chat-flow { padding: 80px 0px 0px; }
    .ai.chat-flow h4 { margin: 40px 0px; font-size: 18px; line-height: 30px; word-break: keep-all; }
    .ai.chat-flow .chat-flow__nav { position: static; display: none;}
    .ai.chat-flow .chat-flow__step { grid-template-columns: 1fr 1fr; gap: 32px; padding: 56px 0px;  min-height: auto;}
    .ai.chat-flow .chat-flow__eyebrow { margin-bottom: 28px; font-size: 15px; line-height: 24px; }
    .ai.chat-flow .chat-flow__title { margin-bottom: 22px; font-size: 30px; line-height: 42px; letter-spacing: -1px; }
    .ai.chat-flow .chat-flow__description { font-size: 16px; line-height: 26px; word-break: keep-all; overflow-wrap: break-word; }
    .ai.chat-flow .chat-flow__description br { display: none; }
}
/* 모바일 */
@media (max-width: 767px) {
    .ai.chat-flow { padding: 64px 0px 0px; text-align: center;}
    .ai.chat-flow .inner { padding: 0px 20px; }
    .ai.chat-flow h4 {margin: 24px 0px 32px;text-align: left;font-size: 16px;line-height: 26px;text-align: center;}
    .ai.chat-flow .chat-flow__nav { top: 80px; width: 100%; padding: 18px 8px 14px; border-radius: 16px; backdrop-filter: blur(16px); }
    .ai.chat-flow .chat-flow__nav button { font-size: 13px; line-height: 22px; letter-spacing: -0.5px; }
    .ai.chat-flow .chat-flow__dot { width: 12px; height: 12px; margin: 5px auto 12px; }
    .ai.chat-flow .chat-flow__step {grid-template-columns: 1fr;gap: 32px;min-height: 0px;padding: 48px 0px;scroll-margin-top: 190px;text-align: center;}
    .ai.chat-flow .chat-flow__eyebrow { margin-bottom: 18px; font-size: 14px; line-height: 22px; }
    .ai.chat-flow .chat-flow__title {margin-bottom: 18px;font-size: 25px;line-height: 33px;letter-spacing: -1px;word-break: keep-all;}
    .ai.chat-flow .chat-flow__description { font-size: 15px; line-height: 25px; }
    .ai.chat-flow .chat-flow__image { width: 100%; max-width: 560px; margin: 0px auto; aspect-ratio: auto; }
    .ai.chat-flow .chat-flow__visual { width: 100%; height: auto; }
}
@media (max-width: 600px) {
    .ai.chat-flow .chat-flow__title { font-size: 20px;  line-height: 25px;}
    .ai.chat-flow .chat-flow__description {  font-size: 14px;  line-height: 20px;}
    .ai.chat-flow .chat-flow__step {gap: 29px;padding: 30px 0;}
}
/* 작은 모바일 */
@media (max-width: 374px) {
    .ai.chat-flow .inner { padding: 0px 16px; }
    .ai.chat-flow .chat-flow__nav { padding: 16px 4px 12px; }
    .ai.chat-flow .chat-flow__nav button { font-size: 11px; line-height: 20px; }
    .ai.chat-flow .chat-flow__title { font-size: 25px; line-height: 35px; }
    .ai.chat-flow .chat-flow__description { font-size: 14px; line-height: 24px; }
}













.ai.ai-feature .ai__heading {text-align:center;margin: 0 0 110px 0;}
.ai.ai-feature {padding: 130px 0px;background-color: #fafafa;font-family: "Pretendard", "Noto Sans KR", sans-serif;color: #111111;}
.ai.ai-feature .inner {max-width:1000px}
.ai.ai-feature .ai-feature__item {display: flex;align-items: center;gap: 90px;}
.ai.ai-feature .ai-feature__item + .ai-feature__item { margin-top: 100px; }
.ai.ai-feature .ai-feature__item--reverse { flex-direction: row-reverse; }
.ai.ai-feature .ai-feature__image {flex: 0 0 480px;border-radius: 24px;}
.ai.ai-feature .ai-feature__image img {display: block;width: 100%;}
.ai.ai-feature .ai-feature__content { flex: 1; min-width: 0px; }
.ai.ai-feature .ai-feature__number {display: block;font-size: 30px;line-height: 27px;letter-spacing: -1px;font-family: 'pre_SB';}
.ai.ai-feature .ai-feature__title {margin: 4px 0px 0px;font-size: 30px;line-height: 50px;letter-spacing: -1.8px;word-break: keep-all;font-family: 'pre_SB';}
.ai.ai-feature .ai-feature__description {margin: 34px 0px 0px;color: #666666;font-size: 18px;line-height: 1.4;letter-spacing: -0.7px;word-break: keep-all;font-family: 'pre_R';}
@media (max-width: 1100px) {
    .ai.ai-feature { padding: 100px 24px; }
    .ai.ai-feature .inner { width: auto; max-width: 1000px; margin: 0px auto; }
    .ai.ai-feature .ai__heading { margin-bottom: 80px; }
    .ai.ai-feature .ai-feature__item { gap: 50px; }
    .ai.ai-feature .ai-feature__image { flex: 1; min-width: 0px; }
    .ai.ai-feature .ai-feature__image img { width: 100%; height: auto; }
    .ai.ai-feature .ai-feature__title { font-size: 27px; line-height: 38px; letter-spacing: -1.2px; }
    .ai.ai-feature .ai-feature__description { margin-top: 24px; font-size: 17px; line-height: 26px; }
    .ai.ai-feature .ai-feature__description br { display: none; }
}

@media (max-width: 767px) {
    .ai.ai-feature { padding: 80px 24px; }
    .ai.ai-feature .ai__heading_key { display: block; text-align: center; font-size: 18px; line-height: 28px; }
    .ai.ai-feature .ai__heading { margin-bottom: 56px; font-size: 28px; line-height: 40px; letter-spacing: -1px; word-break: keep-all; }
    .ai.ai-feature .ai-feature__item { flex-direction: column; align-items: stretch; gap: 28px; }
    .ai.ai-feature .ai-feature__item + .ai-feature__item { margin-top: 64px; }
    .ai.ai-feature .ai-feature__image { flex: none; width: auto; max-width: 480px; margin: 0px auto; border-radius: 20px; overflow: hidden; }
    .ai.ai-feature .ai-feature__content {flex: none;text-align: center;}
    .ai.ai-feature .ai-feature__number {font-size: 23px;line-height: 32px;}
    .ai.ai-feature .ai-feature__title {margin-top: 6px;font-size: 23px;line-height: 36px;letter-spacing: -1px;}
    .ai.ai-feature .ai-feature__description {margin-top: 18px;font-size: 15px;line-height: 25px;letter-spacing: -0.5px;}
}

@media (max-width: 479px) {
    .ai.ai-feature { padding: 60px 20px; }
    .ai.ai-feature .ai__heading_key { font-size: 16px; line-height: 24px; }
    .ai.ai-feature .ai__heading {margin-bottom: 40px;font-size: 21px;line-height: 34px;}
    .ai.ai-feature .ai-feature__item { gap: 24px; }
    .ai.ai-feature .ai-feature__item + .ai-feature__item { margin-top: 52px; }
    .ai.ai-feature .ai-feature__image { border-radius: 16px; }
    .ai.ai-feature .ai-feature__number { font-size: 24px; line-height: 30px; }
    .ai.ai-feature .ai-feature__title { font-size: 23px; line-height: 33px; }
    .ai.ai-feature .ai-feature__description { margin-top: 16px; font-size: 15px; line-height: 24px; }
}








.ai.ai_animation {padding: 120px 0 70px 0;}
.ai.ai_animation .ai__heading,
.ai.ai_animation h4 {text-align: center;}
.ai.ai_animation h4 {  margin: 50px 0 0 0;  color: #5b4b4b; font-size: 20px; line-height: 1.5;  font-family: 'pre_R';}


:root{
  --ink:#191f28;--sub:#4e5968;--mute:#6b7684;--line:#e5e8eb;--bg:#f5f7fa;
  --k:#3268f0;--kt:rgba(50,104,240,.09);
  --f:#087a62;--ft:rgba(8,122,98,.09);
  --p:#7b52e0;--pt:rgba(123,82,224,.09);
  --h:#c2570c;--ht:rgba(194,87,12,.09);
}
.ai.ai_animation .sec{max-width:1200px;margin:0 auto;padding:100px 24px 110px}

/* head */
.ai.ai_animation .eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--k)}
.ai.ai_animation h2{margin:0;font-size:44px;line-height:1.32;font-weight:800;letter-spacing:-.035em}
.ai.ai_animation h2 em{font-style:normal;color:var(--k)}
.ai.ai_animation .lead{margin:0;font-size:18px;line-height:1.7;color:var(--sub)}

/* stage: 가로형 */
.ai.ai_animation .stage{background:var(--bg);border:1px solid #eceff3;border-radius:32px;padding:28px;display:grid;grid-template-columns:420px minmax(0,1fr);gap:24px;align-items:stretch}
.ai.ai_animation .side{display:flex;flex-direction:column;gap:14px}
.ai.ai_animation .side-t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--sub);margin:2px 4px 2px}

.ai.ai_animation .card{background:#fff;border-radius:20px;padding:18px 20px;border:1.5px solid transparent;box-shadow:0 1px 2px rgba(25,31,40,.04);display:flex;flex-direction:column;gap:12px;transition:border-color .3s,box-shadow .3s}
.ai.ai_animation .card.used[data-c=k]{border-color:var(--k);box-shadow:0 8px 22px rgba(50,104,240,.12)}
.ai.ai_animation .card.used[data-c=f]{border-color:var(--f);box-shadow:0 8px 22px rgba(8,122,98,.12)}
.ai.ai_animation .card.used[data-c=p]{border-color:var(--p);box-shadow:0 8px 22px rgba(123,82,224,.12)}
.ai.ai_animation .card.miss{border-color:var(--h);border-style:dashed}
.ai.ai_animation .ch{display:flex;align-items:center;gap:12px}
.ai.ai_animation .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
[data-c=k] .ic{background:var(--kt);color:var(--k)}
[data-c=f] .ic{background:var(--ft);color:var(--f)}
[data-c=p] .ic{background:var(--pt);color:var(--p)}
.ai.ai_animation .ch .tx{flex-grow:1;min-width:0}
.ai.ai_animation .ch b{display:block;font-size:17px;font-weight:700}
.ai.ai_animation .ch small{display:block;font-size:13px;color:var(--mute);margin-top:2px}

.ai.ai_animation .sw{position:relative;width: 38px;height: 22px;border-radius:12px;border:0;background:#d1d6db;cursor:pointer;flex-shrink:0;transition:background .2s;padding:0}
.ai.ai_animation .sw::after{content:"";position:absolute;top: 2px;left:3px;width:18px;height:18px;border-radius:9px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.ai.ai_animation .sw[aria-checked=true]::after{transform: translateX(15px);}
[data-c=k] .sw[aria-checked=true]{background:var(--k)}
.ai.ai_animation .doc .sw{width:38px;height:22px}.doc .sw::after{width:16px;height:16px}.doc .sw[aria-checked=true]::after{transform:translateX(16px)}
[data-c=f] .sw[aria-checked=true]{background:var(--f)}
.ai.ai_animation .sw:focus-visible,
.ai.ai_animation .seg button:focus-visible,
.ai.ai_animation .qb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.ai.ai_animation .doc{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;font-size:14px;transition:all .25s}
.ai.ai_animation .docs{display:flex;flex-direction:column;gap:8px}
.ai.ai_animation .ft{flex-shrink:0;width:40px;height:26px;border-radius:7px;font-size:10px;font-weight:800;letter-spacing:.02em;display:flex;align-items:center;justify-content:center}
.ai.ai_animation .ft.txt{background:#eef0f4;color:#4e5968}.ft.xlsx{background:#e7f5ee;color:#16784a}
.ai.ai_animation .doc .dn{flex-grow:1;min-width:0}
.ai.ai_animation .doc .dn b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family: 'pre_B';}
.ai.ai_animation .doc .dn small{display:block;margin-top:1px}
.ai.ai_animation .doc.off{opacity:.5}
.ai.ai_animation .doc .st{font-size:12px;color:var(--mute)}
.ai.ai_animation .card.off .faq{opacity:.5}
.ai.ai_animation .doc.hit{background:var(--kt);border-color:var(--k)}.doc.hit .st{color:var(--k)}

.ai.ai_animation .faq{border:1px solid var(--line);border-radius:12px;font-size:13px;line-height:1.6;overflow:hidden;transition:all .25s}
.ai.ai_animation .faq .q{padding:10px 14px;font-weight:600;font-size:14px}
.ai.ai_animation .faq .q span,.faq .a span.m{color:var(--f);font-weight:800;margin-right:6px}
.ai.ai_animation .faq .a{padding:10px 14px;border-top:1px dashed var(--line);color:var(--sub);background:#fafbfc}
.ai.ai_animation .faq.hit{border-color:var(--f)}.faq.hit .a{background:var(--ft)}
.ai.ai_animation .lock{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--f);margin-top:2px}

.ai.ai_animation .seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;background:#eef0f4;border-radius:12px}
.ai.ai_animation .seg button{border:0;background:transparent;border-radius:9px;padding:10px 6px;font-size:14px;font-weight:600;color:var(--sub);cursor:pointer;transition:all .2s;text-align: center;}
.ai.ai_animation .seg button[aria-checked=true]{background:#fff;color:var(--p);box-shadow:0 1px 3px rgba(25,31,40,.1)}
.ai.ai_animation .spec{margin:0;padding:2px 2px 0;list-style:none;display:flex;flex-direction:column;gap:6px}
.ai.ai_animation .spec li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.5;font-weight:500;color:#333d4b}
.ai.ai_animation .spec li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:3px;background:var(--p)}

/* chat */
.ai.ai_animation .chat{background:#fff;border-radius:24px;box-shadow:0 10px 30px rgba(25,31,40,.07);border:1px solid #eceff3;display:flex;flex-direction:column;overflow:hidden;min-height:560px}
.ai.ai_animation .chh{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid #f0f2f4}
.ai.ai_animation .av{width:38px;height:38px;border-radius:19px;background:linear-gradient(135deg,#3268f0,#7b52e0);display:flex;align-items:center;justify-content:center;color:#fff;position:relative;flex-shrink:0}
.ai.ai_animation .av i{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:6px;background:#1fb57a;border:2px solid #fff}
.ai.ai_animation .av::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(50,104,240,.35);opacity:0}
.ai.ai_animation .run .av::after{animation:ring 1s ease-out infinite}
@keyframes ring{from{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.25)}}
.ai.ai_animation .chh b{display:block;font-size:15px;font-weight:700}
.ai.ai_animation .chh small{display:block;font-size:12px;color:var(--mute);margin-top:1px}
.ai.ai_animation .chh .pv{margin-left:auto;font-size:12px;font-weight:600;color:var(--mute);background:var(--bg);padding:5px 10px;border-radius:999px;white-space:nowrap}
.ai.ai_animation .msgs{flex-grow:1;padding:24px 22px;display:flex;flex-direction:column;gap:14px}
.ai.ai_animation .me{align-self:flex-end;max-width:75%;background:var(--ink);color:#fff;padding:12px 16px;border-radius:18px 18px 4px 18px;font-size:15px;line-height:1.55;animation:pop .3s ease both}
.ai.ai_animation .aiw{align-self:flex-start;max-width:88%;display:flex;flex-direction:column;gap:10px;animation:pop .3s ease both}
.ai.ai_animation .ai{background:var(--bg);padding:14px 18px;border-radius:18px 18px 18px 4px;font-size:15px;line-height:1.75;white-space:pre-line}
.ai.ai_animation .ai .seg-t{transition:background .4s,color .4s,box-shadow .4s;border-radius:4px}
.ai.ai_animation .ai.lit .k{background:var(--kt);color:var(--k);font-weight:600;box-shadow:0 0 0 2px var(--kt)}
.ai.ai_animation .ai.lit .f{background:var(--ft);color:var(--f);box-shadow:0 0 0 2px var(--ft)}
.ai.ai_animation .ai.lit .h{background:var(--ht);color:var(--h);box-shadow:0 0 0 2px var(--ht)}
.ai.ai_animation .caret{display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-2px;margin-left:1px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ai.ai_animation .sugg{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--p);border:1px solid rgba(123,82,224,.35);background:#fff;padding:8px 12px;border-radius:999px;animation:pop .3s ease both}
.ai.ai_animation .tags{display:flex;flex-wrap:wrap;gap:6px;animation:pop .3s ease both}
.ai.ai_animation .tag{display:inline-flex;align-items:center;gap:5px;font-size: 13px;padding: 10px 13px;border-radius:999px}
.ai.ai_animation .tag.k{background:var(--kt);color:var(--k)}.tag.f{background:var(--ft);color:var(--f)}.tag.p{background:var(--pt);color:var(--p)}.tag.h{background:var(--ht);color:var(--h)}
.ai.ai_animation .typing{align-self:flex-start;background:var(--bg);padding:16px 18px;border-radius:18px 18px 18px 4px;display:flex;gap:5px;animation:pop .3s ease both}
.ai.ai_animation .typing span{width:7px;height:7px;border-radius:4px;background:#9aa4af;animation:dot 1s infinite}
.ai.ai_animation .typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ai.ai_animation .quick{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:14px 22px 18px;border-top:1px solid #f0f2f4}
.ai.ai_animation .quick .ql{font-size:13px;font-weight:700;color:var(--mute);margin-right:4px;white-space:nowrap}
.ai.ai_animation .qb{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;font-size:14px;cursor:pointer;transition:all .2s;white-space:nowrap}
.ai.ai_animation .qb:hover{border-color:#b0b8c1}
.ai.ai_animation .qb[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}

.ai.ai_animation .foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:0 6px;font-size:13px;color:var(--mute)}
.ai.ai_animation .foot span{display:inline-flex;align-items:center;gap:6px}
.ai.ai_animation .tagline{text-align:center;margin:40px 0 0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.ai.ai_animation .tagline .k{color:var(--k)}.tagline .f{color:var(--f)}.tagline .p{color:var(--p)}

.ai.ai_animation, .ai.ai_animation * { box-sizing: border-box; }
.ai.ai_animation .inner { min-width: 0px; }
.ai.ai_animation .sec, .ai.ai_animation .stage, .ai.ai_animation .side, .ai.ai_animation .card, .ai.ai_animation .chat { min-width: 0px; }
.ai.ai_animation .stage { grid-template-columns: minmax(0px, 420px) minmax(0px, 1fr); }
.ai.ai_animation .chh > div:not(.av) { flex: 1; min-width: 0px; }
.ai.ai_animation .chh small { overflow-wrap: anywhere; }
.ai.ai_animation .me, .ai.ai_animation .aiw { min-width: 0px; overflow-wrap: anywhere; }
.ai.ai_animation .qb { min-width: 0px; white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.5; }
.ai.ai_animation .tag { min-width: 0px; overflow-wrap: anywhere; }
.ai.ai_animation .tag svg, .ai.ai_animation .foot svg { flex-shrink: 0; }
.ai.ai_animation .chat { scroll-margin-top: 100px; }

@media screen and (max-width: 1200px) {
    .ai.ai_animation { padding: 100px 0px; }
    .ai.ai_animation .sec { padding: 70px 20px 60px; }
    .ai.ai_animation .stage { grid-template-columns: minmax(0px, 360px) minmax(0px, 1fr); gap: 18px; padding: 22px; border-radius: 28px; }
    .ai.ai_animation .card { padding: 16px; }
    .ai.ai_animation .doc { gap: 8px; padding: 10px; }
    .ai.ai_animation .chh { gap: 10px; padding: 16px; }
    .ai.ai_animation .chh .pv { padding: 5px 8px; font-size: 11px; }
    .ai.ai_animation .msgs { padding: 22px 16px; }
    .ai.ai_animation .quick { padding: 14px 16px 18px; }
    .ai.ai_animation .tag { padding: 8px 10px; font-size: 12px; }
}

@media screen and (max-width: 960px) {
    .ai.ai_animation { padding: 80px 0px; }
    .ai.ai_animation .ai__heading_key { display: block; text-align: center; }
    .ai.ai_animation .ai__heading { padding: 0px 20px; font-size: 32px; line-height: 1.45; letter-spacing: -1px; }
    .ai.ai_animation h4 { margin: 28px 0px 0px; padding: 0px 20px; font-size: 18px; line-height: 1.6; }
    .ai.ai_animation .sec { padding: 48px 20px 30px; }
    .ai.ai_animation .stage { grid-template-columns: minmax(0px, 1fr); gap: 24px; padding: 24px; }
    .ai.ai_animation .side { gap: 14px; }
    .ai.ai_animation .card { padding: 18px 20px; }
    .ai.ai_animation .doc { gap: 10px; padding: 11px 14px; }
    .ai.ai_animation .chat { min-height: 520px; }
    .ai.ai_animation .chh { padding: 18px 20px; }
    .ai.ai_animation .chh .pv { padding: 5px 10px; font-size: 12px; }
    .ai.ai_animation .msgs { padding: 24px 20px; }
    .ai.ai_animation .quick { padding: 16px 20px 20px; }
    .ai.ai_animation .foot { align-items: flex-start; flex-direction: column; gap: 8px; line-height: 1.5; }
}

@media screen and (max-width: 600px) {
    .ai.ai_animation { padding: 60px 0px; }
    .ai.ai_animation .ai__heading_key { font-size: 16px; }
    .ai.ai_animation .ai__heading {padding: 0px 16px;font-size: 21px;line-height: 1.5;letter-spacing: -0.8px;word-break: keep-all;overflow-wrap: anywhere;}
    .ai.ai_animation .ai__heading br { display: none; }
    .ai.ai_animation .ai__heading span {display: block;font-size: 21px;}
    .ai.ai_animation h4 {margin: 22px 0px 0px;padding: 0px 20px;font-size: 16px;line-height: 1.35;word-break: keep-all;}
    .ai.ai_animation .sec { padding: 32px 16px 0px; }
    .ai.ai_animation .stage { gap: 20px; padding: 14px; border-radius: 22px; }
    .ai.ai_animation .side { gap: 12px; }
    .ai.ai_animation .side-t { gap: 6px; margin: 2px 4px 4px; font-size: 13px; }
    .ai.ai_animation .card { gap: 12px; padding: 16px 14px; border-radius: 16px; }
    .ai.ai_animation .ch { gap: 10px; }
    .ai.ai_animation .ic { width: 34px; height: 34px; border-radius: 10px; }
    .ai.ai_animation .ch b { font-size: 16px; }
    .ai.ai_animation .doc { gap: 8px; padding: 10px 8px; border-radius: 10px; }
    .ai.ai_animation .ft { width: 34px; height: 24px; font-size: 9px; }
    .ai.ai_animation .doc .dn b { font-size: 12px; }
    .ai.ai_animation .doc .st { font-size: 11px; }
    .ai.ai_animation .faq { font-size: 12px; line-height: 1.7; }
    .ai.ai_animation .faq .q { padding: 10px 12px; font-size: 13px; overflow-wrap: anywhere; }
    .ai.ai_animation .faq .a { padding: 10px 12px; overflow-wrap: anywhere; }
    .ai.ai_animation .seg button { min-height: 42px; padding: 10px 4px; font-size: 13px; }
    .ai.ai_animation .spec { gap: 6px; }
    .ai.ai_animation .spec li { padding-left: 12px; font-size: 12px; line-height: 1.65; }
    .ai.ai_animation .spec li::before { top: 8px; width: 4px; height: 4px; }
    .ai.ai_animation .chat { min-height: 500px; border-radius: 18px; }
    .ai.ai_animation .chh { flex-wrap: wrap; gap: 10px; padding: 14px; }
    .ai.ai_animation .av { width: 34px; height: 34px; border-radius: 17px; }
    .ai.ai_animation .chh b { font-size: 14px; }
    .ai.ai_animation .chh small { margin-top: 3px; font-size: 11px; line-height: 1.5; }
    .ai.ai_animation .chh .pv { margin: 0px 0px 0px auto; padding: 4px 8px; font-size: 10px; }
    .ai.ai_animation .msgs { gap: 14px; padding: 20px 14px; }
    .ai.ai_animation .me { max-width: none; margin-left: 20px; padding: 11px 13px; border-radius: 16px 16px 4px 16px; font-size: 13px; line-height: 1.65; }
    .ai.ai_animation .aiw { align-self: stretch; max-width: none; gap: 10px; }
    .ai.ai_animation .aiw > .ai { padding: 12px 14px; border-radius: 16px 16px 16px 4px; font-size: 13px; line-height: 1.8; }
    .ai.ai_animation .tags { gap: 6px; }
    .ai.ai_animation .tag { gap: 5px; padding: 7px 9px; border-radius: 12px; font-size: 11px; line-height: 1.5; }
    .ai.ai_animation .typing { padding: 14px 16px; }
    .ai.ai_animation .quick { align-items: stretch; flex-direction: column; gap: 8px; padding: 14px; }
    .ai.ai_animation .quick .ql { margin: 0px 0px 2px; font-size: 12px; }
    .ai.ai_animation .qb { padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.65; }
    .ai.ai_animation .foot { gap: 6px; margin-top: 12px; padding: 0px 4px; font-size: 11px; }
    .ai.ai_animation .foot span { align-items: flex-start; line-height: 1.6; }
    .ai.ai_animation .foot svg { margin-top: 2px; }
}

@media screen and (max-width: 360px) {
    .ai.ai_animation .ai__heading { font-size: 23px; }
    .ai.ai_animation h4 { font-size: 14px; }
    .ai.ai_animation .sec { padding: 28px 12px 0px; }
    .ai.ai_animation .stage { padding: 10px; border-radius: 18px; }
    .ai.ai_animation .card { padding: 14px 10px; }
    .ai.ai_animation .doc { gap: 6px; padding: 9px 6px; }
    .ai.ai_animation .ft { width: 30px; font-size: 8px; }
    .ai.ai_animation .doc .dn b { font-size: 11px; }
    .ai.ai_animation .seg button { font-size: 12px; }
    .ai.ai_animation .chh .pv { display: none; }
    .ai.ai_animation .msgs { padding: 18px 10px; }
    .ai.ai_animation .quick { padding: 12px 10px; }
}




.ai.ai_animation_callbot {padding: 0 0 120px 0;}
.ai.ai_animation_callbot .ai__heading,
.ai.ai_animation_callbot h4 {text-align: center;}
.ai.ai_animation_callbot h4 {  margin: 50px 0 0 0;  color: #5b4b4b; font-size: 20px; line-height: 1.5;  font-family: 'pre_R';}


/* head */
.ai_animation_callbot .eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:#3268f0}
.ai_animation_callbot h2{margin:0;font-size:44px;line-height:1.32;font-weight:800;letter-spacing:-.035em}
.ai_animation_callbot h2 em{font-style:normal;color:#3268f0}
.ai_animation_callbot .lead{margin:0;font-size:18px;line-height:1.7;color:#4e5968}

/* 업종 선택 */
.ai_animation_callbot .inds{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top: 50px;margin-bottom:28px}
.ai_animation_callbot .ind{border:1px solid #e5e8eb;background:#fff;border-radius:999px;padding:10px 18px;font-size:15px; color:#4e5968;cursor:pointer;transition:all .2s;white-space:nowrap}
.ai_animation_callbot .ind:hover{border-color:#b0b8c1}
.ai_animation_callbot .ind[aria-checked=true]{background:#191f28;border-color:#191f28;color:#fff}

/* stage */
.ai_animation_callbot .stage{background:#f5f7fa;border-radius:32px;padding:40px 48px;display:grid;grid-template-columns:340px minmax(0,1fr);gap:48px;align-items:center}
.ai_animation_callbot .panel{display:flex;flex-direction:column;gap:24px;min-width:0}
.ai_animation_callbot .lbl{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#4e5968;margin:0 4px 10px}
.ai_animation_callbot .share{font-size:11.5px;font-weight:600;color:#3268f0;background:rgba(50,104,240,.09);padding:3px 9px;border-radius:999px;white-space:nowrap}

/* phone */
.ai_animation_callbot .phone{width:100%;max-width:340px;margin:0 auto;border-radius:48px;background:#0b0f19;padding:10px;box-shadow:0 30px 60px rgba(15,20,35,.22),inset 0 0 0 2px #2a3040}
.ai_animation_callbot .screen{border-radius:39px;background:radial-gradient(120% 65% at 50% 0%,#2b3374 0%,#161c3a 55%,#0e1226 100%);height:640px;display:flex;flex-direction:column;align-items:center;padding:12px 20px 22px;color:#fff;overflow:hidden}
.ai_animation_callbot .island{width:96px;height:28px;border-radius:14px;background:#000;margin-bottom:14px;flex-shrink:0}
.ai_animation_callbot .ptag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;background:rgba(255,255,255,.1);padding:5px 11px;border-radius:999px;color:rgba(255,255,255,.85);flex-shrink:0}
.ai_animation_callbot .ptag i{width:7px;height:7px;border-radius:4px;background:#3ddc97;animation:blink2 1.4s infinite}
.ai_animation_callbot .phone[data-st=tr] .ptag{background:rgba(255,140,60,.18);color:#ffc59c}
.ai_animation_callbot .phone[data-st=tr] .ptag i{background:#ff9d57}
.ai_animation_callbot .phone[data-st=idle] .ptag i{background:rgba(255,255,255,.4);animation:none}
@keyframes blink2{50%{opacity:.35}}
.ai_animation_callbot .caller{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:18px;flex-shrink:0}
.ai_animation_callbot .pav{position:relative;width:72px;height:72px;border-radius:36px;background:linear-gradient(135deg,#4a7bff,#8f63f0);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.ai_animation_callbot .pav::before,.pav::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(143,176,255,.55);opacity:0}
.ai_animation_callbot .phone[data-st=ring] .pav::before,.phone[data-st=ai] .pav::before{animation:ring 1.4s ease-out infinite}
.ai_animation_callbot .phone[data-st=ring] .pav::after,.phone[data-st=ai] .pav::after{animation:ring 1.4s ease-out .7s infinite}
.ai_animation_callbot .phone[data-st=ring] .pav{animation:shake .5s ease-in-out infinite}
@keyframes ring{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
.ai_animation_callbot .caller b{font-size:19px;font-weight:700;letter-spacing:-.02em}
.ai_animation_callbot .ptime{font-size:14px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.ai_animation_callbot .bars{display:flex;align-items:center;gap:4px;height:36px;margin-top:10px;flex-shrink:0}
.ai_animation_callbot .bars span{width:4px;height:5px;border-radius:2px;background:rgba(255,255,255,.25)}
.ai_animation_callbot .phone[data-st=me] .bars span{background:rgba(255,255,255,.85);animation:eq .9s ease-in-out infinite}
.ai_animation_callbot .phone[data-st=ai] .bars span{background:linear-gradient(#8fb0ff,#c4a8ff);animation:eq .9s ease-in-out infinite}
@keyframes eq{0%,100%{height:5px}50%{height:26px}}
.ai_animation_callbot .cap{flex-grow:1;width:100%;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:12px 2px 16px;overflow:hidden}
.ai_animation_callbot .cl{animation:pop .3s ease both}
.ai_animation_callbot .cl small{display:flex;align-items:center;gap:5px;font-size:11.5px;color:rgba(255,255,255,.5);margin-bottom:4px}
.ai_animation_callbot .cl.me .t{font-size:14px;line-height:1.55;color:rgba(255,255,255,.72)}
.ai_animation_callbot .cl.ai small{color:#a9c2ff}
.ai_animation_callbot .cl.ai .t{font-size:15px;line-height:1.68;font-weight:500}
.ai_animation_callbot .cl .seg-t{border-radius:4px;transition:background .4s,color .4s,box-shadow .4s}
.ai_animation_callbot .cl.lit .k{background:rgba(91,140,255,.24);color:#b9cdff;box-shadow:0 0 0 2px rgba(91,140,255,.24)}
.ai_animation_callbot .cl.lit .f{background:rgba(43,200,160,.22);color:#86e6cc;box-shadow:0 0 0 2px rgba(43,200,160,.22)}
.ai_animation_callbot .cl.lit .h{background:rgba(255,140,60,.22);color:#ffc59c;box-shadow:0 0 0 2px rgba(255,140,60,.22)}
.ai_animation_callbot .chip{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.1);animation:pop .3s ease both}
.ai_animation_callbot .chip.k{color:#b9cdff}
.ai_animation_callbot .chip.f{color:#86e6cc}
.ai_animation_callbot .chip.h{color:#ffc59c}
.ai_animation_callbot .caret{display:inline-block;width:2px;height:1em;background:currentColor;vertical-align:-2px;margin-left:1px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ai_animation_callbot .ctrl{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;flex-shrink:0}
.ai_animation_callbot .cbt{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:rgba(255,255,255,.65)}
.ai_animation_callbot .cbt i{width:48px;height:48px;border-radius:24px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff}
.ai_animation_callbot .cbt.end i{background:#f04452}

/* 문의 목록 */
.ai_animation_callbot .box{background:#fff;border-radius:20px;box-shadow:0 1px 2px rgba(25,31,40,.04)}
.ai_animation_callbot .calls{padding:6px;display:flex;flex-direction:column;gap:2px}
.ai_animation_callbot .callbot-qb{display:flex;align-items:center;gap:12px;text-align:left;background:transparent;border:0;border-radius:14px;padding:10px 14px;cursor:pointer;transition:background .2s}
.ai_animation_callbot .callbot-qb:hover{background:#f7f8fa}
.ai_animation_callbot .qi{width:32px;height:32px;border-radius:16px;background:rgba(22,160,107,.1);color:#16a06b;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.ai_animation_callbot .qt{flex-grow:1;min-width:0;font-size:15px;line-height:1.45;font-family: 'pre_SB';}
.ai_animation_callbot .qgo{font-size:12.5px;font-weight:700;color:#b0b8c1;white-space:nowrap}
.ai_animation_callbot .callbot-qb[aria-pressed=true]{background:#f5f7fa}
.ai_animation_callbot .callbot-qb[aria-pressed=true] .qi{background:#16a06b;color:#fff}
.ai_animation_callbot .callbot-qb[aria-pressed=true] .qgo{color:#16a06b}

/* 참고 자료 */
.ai_animation_callbot .src{padding:4px 20px}
.ai_animation_callbot .grp{padding:12px 0;display:flex;flex-direction:column;gap:6px}
.ai_animation_callbot .grp+.grp{border-top:1px solid #eef0f3}
.ai_animation_callbot .gh{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin-bottom:2px}
.ai_animation_callbot .gh .ic{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai_animation_callbot .gh .ic.k{background:rgba(50,104,240,.09);color:#3268f0}
.ai_animation_callbot .gh .ic.f{background:rgba(8,122,98,.09);color:#087a62}
.ai_animation_callbot .gh .ic.p{background:rgba(123,82,224,.09);color:#7b52e0}
.ai_animation_callbot .gh .sp{flex-grow:1}
.ai_animation_callbot .gh .sw{}
.ai_animation_callbot .row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;border:1px solid transparent;font-size:14px;transition:all .25s}
.ai_animation_callbot .row > * {width:auto;}
.ai_animation_callbot .row .nm{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai_animation_callbot .ft{flex-shrink:0;width:36px;height:22px;border-radius:6px;font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.ai_animation_callbot .ft.txt{background:#eef0f4;color:#4e5968}
.ai_animation_callbot .ft.xlsx{background:#e7f5ee;color:#16784a}
.ai_animation_callbot .fq{flex-shrink:0;font-weight:800;color:#087a62;width:14px}
.ai_animation_callbot .row.off,.grp.off .row{opacity:.45}
.ai_animation_callbot .row.hit.k{background:rgba(50,104,240,.09);border-color:rgba(50,104,240,.3);color:#3268f0;font-weight:600}
.ai_animation_callbot .row.hit.f{background:rgba(8,122,98,.09);border-color:rgba(8,122,98,.3);color:#087a62;font-weight:600}
.ai_animation_callbot .row.miss{border:1px dashed #c2570c;opacity:1}
.ai_animation_callbot .sw{position:relative;width:38px;height:22px;border-radius:11px;border:0;background:#d1d6db;cursor:pointer;flex-shrink:0;transition:background .2s;padding:0}
.ai_animation_callbot .sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:8px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.ai_animation_callbot .sw[aria-checked=true]::after{transform:translateX(16px)}
.ai_animation_callbot .sw.k[aria-checked=true]{background:#3268f0}
.ai_animation_callbot .sw.f[aria-checked=true]{background:#087a62}
.ai_animation_callbot .callbot-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:3px;background:#eef0f4;border-radius:10px;width:230px}
.ai_animation_callbot .callbot-seg button{border:0;background:transparent;border-radius:8px;padding:7px 4px;font-size:13px;font-weight:600;color:#4e5968;cursor:pointer;transition:all .2s; text-align: center;}
.ai_animation_callbot .callbot-seg button[aria-checked=true]{background:#fff;color:#7b52e0;box-shadow:0 1px 3px rgba(25,31,40,.1)}
.ai_animation_callbot .pdesc{font-size:13px;color:#6b7684;padding-left:32px}
.ai_animation_callbot .foot{display:flex;justify-content:center;align-items:center;gap:6px;text-align:center;margin:16px 0 0;font-size:13px;color:#6b7684}
.ai_animation_callbot .foot svg{flex-shrink:0}
.ai_animation_callbot .tagline{text-align:center;margin:36px 0 0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.ai_animation_callbot .tagline .k{color:#3268f0}
.ai_animation_callbot .tagline .f{color:#087a62}
.ai_animation_callbot .tagline .p{color:#7b52e0}

@media (max-width:960px){
  .ai_animation_callbot .sec{padding:64px 16px 72px}
  .ai_animation_callbot .head{margin-bottom:28px;gap:14px}
  .ai_animation_callbot h2{font-size:28px}
  .ai_animation_callbot .lead{font-size:15px}
  .ai_animation_callbot .lead br{display:none}
  .ai_animation_callbot .inds{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin:0 -16px 20px;padding:2px 16px;scrollbar-width:none}
  .ai_animation_callbot .inds::-webkit-scrollbar{display:none}
  .ai_animation_callbot .ind{font-size:14px;padding:9px 14px}
  .ai_animation_callbot .stage{grid-template-columns:minmax(0,1fr);padding:20px 14px;gap:28px;border-radius:24px}
  .ai_animation_callbot .phone{max-width:320px}
  .ai_animation_callbot .screen{height:600px}
  .ai_animation_callbot .qt{font-size:14px}
  .ai_animation_callbot .qgo{display:none}
  .ai_animation_callbot .src{padding:4px 16px}
  .ai_animation_callbot .gh{flex-wrap:wrap}
  .ai_animation_callbot .seg{width:100%;margin-top:6px}
  .ai_animation_callbot .pdesc{padding-left:0}
  .ai_animation_callbot .tagline{font-size:17px;margin-top:28px}
}

@media (prefers-reduced-motion:reduce){
  .ai_animation_callbot *{animation:none!important;transition:none!important}
}






.ai.last {background: linear-gradient(180deg,rgba(16, 17, 22, 1) 77%, rgba(91, 48, 172, 1) 91%, rgba(156, 138, 255, 1) 100%);text-align: center;padding: 160px 0 50px 0;}
.ai.last button { font: inherit; }
.ai.last button:focus-visible { outline: 2px solid #c5afff; outline-offset: 7px; }
.ai.last h3 {color: #fff;}
.ai.last h4 {color: #D4D4D4;font-size: 21px;margin: 20px 0 0 0;font-family: 'pre_L';}
.ai.last .flow {width: min(1160px, 100%);padding: 96px 36px 148px;overflow: hidden;}
.ai.last .steps { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; isolation: isolate; }
.ai.last .rail { position: absolute; top: 25px; left: 16.6667%; right: 16.6667%; height: 1px; background: var(--line); z-index: -1; }
.ai.last .rail-fill { width: 0; height: 100%; background: linear-gradient(90deg, #7043db, #b491ff); box-shadow: 0 0 12px #9863ff88; transition: width 1s cubic-bezier(.22, 1, .36, 1); }
.ai.last .step { text-align: center; padding: 0 12px; position: relative; }
.ai.last .node { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #444653; border-radius: 50%; background: #101116; margin: 0 auto 29px; cursor: pointer; transition: border-color .5s, box-shadow .5s; }
.ai.last .node::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: #42444e; transition: all .6s; }
.ai.last .step.active .node { border-color: #b28aff; box-shadow: 0 0 28px #8d51ff25; }
.ai.last .step.active .node::before { width: 28px; height: 28px; background: #9d66ff; box-shadow: 0 0 20px #9d66ff66; }
.ai.last .step.active .node::after { content: ''; position: absolute; inset: -8px; border: 1px solid #a078ff44; border-radius: 50%; animation: last-ripple 2.5s ease-out infinite; }
.ai.last .step.done .node { border-color: #6b509d; }
.ai.last .step.done .node::before { background: #9672cf; }
.ai.last .step h2 { font-size: clamp(18px, 2.1vw, 25px); letter-spacing: -1px; margin: 0 0 18px; font-weight: 700; color: #92939f; transition: color .5s; }
.ai.last .step.active h2, .ai.last .step.done h2 { color: #f3f3f7; }
.ai.last .step p { font-size: 16px; line-height: 1.55; letter-spacing: -.5px; margin: 0 0 15px; color: #a7a9b7; }
.ai.last .badge { display: inline-block; font-size: 13px; line-height: 28px; padding: 0 16px; border-radius: 30px; background: #22202e; color: #b9a9db; transition: background .5s, color .5s, box-shadow .5s; --bs-badge-font-weight: unset;}
.ai.last .active .badge { background: #8d4df4; color: #fff; box-shadow: 0 4px 22px #8840f333; }
.ai.last .note-wrap { min-height: 122px; display: grid; place-items: center; padding-top: 32px; }
.ai.last .note { margin: 0; padding: 18px 26px; border-radius: 14px; border: 1px solid #a078ff30; background: linear-gradient(100deg, #a078ff0b, #a078ff12); color: #d4c7ee; font-size: 16px; line-height: 1.8; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity .7s, transform .7s; visibility: hidden; }
.ai.last .flow.final .note { opacity: 1; transform: none; visibility: visible; }
.ai.last .controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; color: #8e909e; font-size: 12px; }
.ai.last .control { border: 1px solid #343541; border-radius: 20px; padding: 7px 13px; background: #191a22; color: #b8bac7; cursor: pointer; }
.ai.last .control:hover { background: #252332; color: #fff; }
.ai.last .timer { width: 80px; height: 3px; background: #30303b; overflow: hidden; border-radius: 5px; }
.ai.last .timer span { display: block; height: 100%; width: 0; background: #ad87ff; }
.ai.last .timer span.running { animation: last-timer 3000ms linear forwards; }
.ai.last .paused .timer span { animation-play-state: paused; }
.ai.last .paused .node::after { animation-play-state: paused; }
.ai.last .button {margin: 60px auto 0;display: block;width: 340px;}
.ai.last .button img {width:100%}
@keyframes last-timer {
    to { width: 100%; }
}
@keyframes last-ripple {
    0% { transform: scale(.92); opacity: .7; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* 태블릿 */
@media (max-width: 1024px) {
    .ai.last { padding: 120px 24px 50px; }
    .ai.last h4 { font-size: 19px; line-height: 1.5; word-break: keep-all; }
    .ai.last .flow { width: 100%; padding: 80px 10px 120px; }
    .ai.last .step { padding: 0 10px; }
    .ai.last .step h2 { font-size: 20px; }
    .ai.last .step p { font-size: 15px; word-break: keep-all; }
    .ai.last .note { font-size: 15px; word-break: keep-all; }
}

/* 모바일 */
@media (max-width: 767px) {
    .ai.last { padding: 90px 20px 40px; }
    .ai.last h4 { margin-top: 16px; font-size: 16px; }
    .ai.last .flow { padding: 65px 0 90px; }
    .ai.last .steps { grid-template-columns: 1fr; gap: 40px; }
    .ai.last .rail { top: 26px; bottom: 26px; left: 25px; right: auto; width: 1px; height: auto; }
    .ai.last .rail-fill { width: 100%; height: 0; transition: height 1s cubic-bezier(.22, 1, .36, 1); }
    .ai.last .step { min-height: 52px; padding: 0 0 0 76px; text-align: left; }
    .ai.last .node { position: absolute; top: 0; left: 0; margin: 0; }
    .ai.last .step h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.4; }
    .ai.last .step p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
    .ai.last .badge { padding: 0 14px; font-size: 12px; }
    .ai.last .note-wrap { min-height: 0; padding-top: 36px; }
    .ai.last .note { width: 100%; box-sizing: border-box; padding: 16px 18px; font-size: 14px; line-height: 1.7; }
    .ai.last .desktop-break { display: none; }
    .ai.last .controls { flex-wrap: wrap; gap: 10px; margin-top: 24px; }
    .ai.last .button { width: min(340px, 100%); margin-top: 40px; }
}

/* 작은 모바일 */
@media (max-width: 480px) {
    .ai.last { padding: 75px 20px 35px; }
    .ai.last .flow { padding: 55px 0 75px; }
    .ai.last .steps { gap: 36px; }
    .ai.last .step h2 { font-size: 18px; }
    .ai.last .step p { font-size: 14px; }
    .ai.last .step p br { display: none; }
    .ai.last .note { font-size: 13px; }
    .ai.last .timer { width: 60px; }
    .ai.last .button { width: min(280px, 100%); }
}