/* AI solutions: working interface examples within the shared editorial palette. */ body.page-ai-solutions #main { background:rgba(239.958,237.567,232.493,1); color:rgba(60.582,52.59,35.633,1); } body.page-ai-solutions #main :is(h1,h2,h3,p,span,b,strong,small,blockquote,dd,dt,li,a,button) { color:inherit; } body.page-ai-solutions #main p { margin:0; font-size:16px; line-height:1.85; } body.page-ai-solutions #main h2 { margin:0; font-size:clamp(30px,3.2vw,46px); line-height:1.45; letter-spacing:-.045em; } body.page-ai-solutions #main h3 { margin:0; font-size:23px; line-height:1.5; letter-spacing:-.035em; } body.page-ai-solutions #main button { border-radius:0; box-shadow:none; font:600 14px/1.6 var(--font); } body.page-ai-solutions #main a:focus-visible,body.page-ai-solutions #main button:focus-visible,body.page-ai-solutions #main summary:focus-visible { outline:3px solid rgba(169.903,140.889,79.323,1); outline-offset:4px; } body.page-ai-solutions #main [hidden] { display:none!important; } body.page-ai-solutions #main .as-eyebrow { margin:0 0 25px; color:rgba(113.677,98.097,65.037,1); font:600 14px/1.6 var(--mono); letter-spacing:.12em; } body.page-ai-solutions #main .as-hero { padding:151px 0 0; background:rgba(37.953,33.376,23.663,1); color:rgba(245.387,241.506,233.272,1); overflow:hidden; } body.page-ai-solutions #main .as-hero-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(28px,3vw,52px); padding-bottom:40px; } body.page-ai-solutions #main .as-hero .as-eyebrow { color:rgba(216.28,206.032,184.286,1); } body.page-ai-solutions #main .as-hero h1 { margin:0 0 27px; font-size:clamp(52px,5.6vw,86px); line-height:1.22; letter-spacing:-.06em; } body.page-ai-solutions #main .as-hero h1>span { display:block; } body.page-ai-solutions #main .as-hero h1 .as-accent { color:rgba(243.282,222.292,177.753,1); } body.page-ai-solutions #main .as-lead { max-width:490px; color:rgba(221.477,214.376,199.307,1); font-size:17px; line-height:1.95; } body.page-ai-solutions #main .as-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:32px; } body.page-ai-solutions #main .button.primary { color:rgba(55.689,46.468,26.902,1)!important; background:rgba(243.282,222.292,177.753,1)!important; gap:28px; font-size:16px; } body.page-ai-solutions #main .button.primary:hover { background:rgba(247.743,233.314,202.698,1)!important; } body.page-ai-solutions #main .as-text-link { display:inline-flex; align-items:center; gap:20px; padding:8px 0; border-bottom:1px solid currentColor; font-size:16px; line-height:1.7; } body.page-ai-solutions #main .as-hero-foot { max-width:490px; margin-top:29px; padding-top:20px; border-top:1px solid rgba(107.011,97.174,76.301,1); color:rgba(212.78,204.134,185.787,1); font-size:14px; } body.page-ai-solutions #main .as-hero-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 28px; padding-block:22px; border-top:1px solid rgba(103.097,93.898,74.379,1); color:rgba(212.78,204.134,185.787,1); font-size:14px; } body.page-ai-solutions #main .as-hero-bottom>a { display:flex; gap:30px; color:rgba(243.917,237.707,224.53,1); } body.page-ai-solutions #main .as-workbench { min-width:0; overflow:hidden; background:rgba(247.923,245.957,241.784,1); border:1px solid rgba(150.172,140.6,120.289,1); border-radius:12px; color:rgba(63.821,54.815,35.704,1); box-shadow:0 24px 65px rgba(15.248,13.304,9.178,0.25098039215686274); } body.page-ai-solutions #main .as-window-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 18px; padding:17px 20px; border-bottom:1px solid rgba(102.948,92.343,69.839,1); background:rgba(61.484,53.844,37.631,1); color:rgba(246.349,242.509,234.361,1); font:500 14px/1.6 var(--mono); } body.page-ai-solutions #main .as-window-brand { display:flex; align-items:center; flex-wrap:wrap; gap:10px; } body.page-ai-solutions #main .as-window-brand b { margin-left:4px; color:rgba(232.747,224.275,206.298,1); font:500 14px/1.6 var(--font); } body.page-ai-solutions #main .as-window-mark { width:10px; height:10px; background:rgba(243.282,222.292,177.753,1); border-radius:50%; } body.page-ai-solutions #main .as-demo-badge { padding:3px 9px; border:1px solid rgba(165.614,155.029,132.568,1); color:rgba(246.565,241.757,231.554,1); font:500 14px/1.6 var(--font); } body.page-ai-solutions #main .as-demo-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid rgba(212.366,206.04,192.617,1); background:rgba(238.718,234.409,225.265,1); } body.page-ai-solutions #main .as-demo-tabs button { min-height:55px; padding:13px 8px; border:0; border-bottom:3px solid transparent; background:transparent; color:rgba(100.728,88.353,62.094,1); } body.page-ai-solutions #main .as-demo-tabs button[aria-selected="true"] { border-bottom-color:rgba(115.915,94.989,50.585,1); background:rgba(247.923,245.957,241.784,1); color:rgba(66.937,54.196,27.159,1); } body.page-ai-solutions #main .as-demo-tabs button:hover { background:rgba(232.304,225.387,210.709,1); color:rgba(66.937,54.196,27.159,1); } body.page-ai-solutions #main .as-search-layout { display:grid; grid-template-columns:220px minmax(0,1fr); } body.page-ai-solutions #main .as-documents { padding:22px 12px; border-right:1px solid rgba(215.345,209.041,195.666,1); background:rgba(241.499,237.498,229.009,1); } body.page-ai-solutions #main .as-ui-label { display:block; margin:0 0 16px; color:rgba(111.243,97.862,69.469,1); font-size:14px; line-height:1.65; } body.page-ai-solutions #main .as-document { display:flex; align-items:start; gap:8px; width:100%; margin:0 0 9px; padding:12px 9px; border:1px solid transparent; background:transparent; text-align:left; color:rgba(83.561,72.906,50.297,1); } body.page-ai-solutions #main .as-document.is-selected { background:rgba(251.645,250.05,246.666,1); border-color:rgba(160.853,143.753,107.469,1); color:rgba(66.77,54.061,27.092,1); } body.page-ai-solutions #main .as-document:hover { background:rgba(251.645,250.05,246.666,1); border-color:rgba(160.853,143.753,107.469,1); } body.page-ai-solutions #main .as-document small { display:block; margin-top:5px; font-size:14px; font-weight:500; color:rgba(114.007,98.864,66.73,1); } body.page-ai-solutions #main .as-file-type { flex:none; padding:2px 3px; border:1px solid rgba(164.783,149.846,118.15,1); font:600 14px/1.4 var(--mono); } body.page-ai-solutions #main .as-conversation { min-width:0; padding:28px 34px 24px; } body.page-ai-solutions #main .as-speaker { display:block; margin-bottom:9px; font-size:14px; font-weight:600; line-height:1.6; color:rgba(108.933,95.111,65.78,1); } body.page-ai-solutions #main .as-user-question { padding:17px 19px; background:rgba(238.034,232.649,221.221,1); border-radius:8px 8px 2px 8px; } body.page-ai-solutions #main .as-user-question p { font-size:16px; line-height:1.7; color:rgba(62.907,52.026,28.937,1); } body.page-ai-solutions #main .as-answer { margin-top:22px; padding:0 2px; color:rgba(67.422,57.345,35.963,1); } body.page-ai-solutions #main .as-answer>p { line-height:1.9; } body.page-ai-solutions #main .as-citation { display:inline-flex; align-items:center; gap:15px; margin-top:16px; padding:7px 10px; border:1px solid rgba(158.112,143.917,113.797,1); background:rgba(245.634,241.046,231.312,1); color:rgba(79.059,65.772,37.577,1); text-align:left; } body.page-ai-solutions #main .as-source-preview { margin-top:12px; padding:14px; border-left:3px solid rgba(151.343,130.956,87.698,1); background:rgba(240.667,236.117,226.462,1); font-size:14px; } body.page-ai-solutions #main .as-source-preview>span { font-weight:600; } body.page-ai-solutions #main .as-source-preview blockquote { margin:8px 0 0; font-size:14px; line-height:1.8; } body.page-ai-solutions #main .as-demo-action { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px; margin-top:23px; padding-top:16px; border-top:1px solid rgba(213.912,206.492,190.746,1); } body.page-ai-solutions #main .as-demo-status { flex:1 1 130px; color:rgba(111.243,97.862,69.469,1); font-size:14px; line-height:1.7; } body.page-ai-solutions #main .as-run { display:flex; align-items:center; justify-content:center; gap:15px; min-height:40px; padding:8px 11px; border:1px solid rgba(89.536,75.261,44.97,1); background:rgba(78.776,65.876,38.504,1); color:rgba(249.016,246.575,241.397,1); } body.page-ai-solutions #main .as-run:hover { background:rgba(64.409,52.425,26.997,1); } body.page-ai-solutions #main .as-run:disabled { cursor:progress; background:rgba(105.073,93.799,69.878,1); color:rgba(249.016,246.575,241.397,1); } body.page-ai-solutions #main .as-demo-disclosure { margin:0; padding:15px 20px; border-top:1px solid rgba(212.366,206.04,192.617,1); background:rgba(239.698,235.41,226.313,1); color:rgba(98.032,85.263,58.167,1); font-size:14px; line-height:1.7; } body.page-ai-solutions #main .as-extract-layout { display:grid; grid-template-columns:1fr 1.15fr; gap:22px; padding:24px; } body.page-ai-solutions #main .as-sample-document { align-self:start; padding:21px 18px; background:rgba(255,255,255,1); border:1px solid rgba(197.878,189.705,172.362,1); } body.page-ai-solutions #main .as-sample-document h2 { font-size:23px; margin:0 0 10px; } body.page-ai-solutions #main .as-sample-company { color:rgba(114.007,98.864,66.73,1); font-size:14px; } body.page-ai-solutions #main .as-sample-document dl { margin:24px 0 0; } body.page-ai-solutions #main .as-sample-document dl>div { display:flex; justify-content:space-between; flex-wrap:wrap; gap:5px 12px; padding:11px 0; font-size:14px; line-height:1.8; } body.page-ai-solutions #main .as-sample-document dd { padding:2px 4px; margin:0; font-weight:600; border:1px solid transparent; } body.page-ai-solutions #main .as-sample-document .as-document-total { margin-top:5px; border-top:1px solid rgba(189.734,179.509,157.814,1); } body.page-ai-solutions #main .as-sample-document .as-sample-note { margin-top:20px; color:rgba(114.007,98.864,66.73,1); font-size:14px; } body.page-ai-solutions #main .as-extracted h3 { font-size:20px; } body.page-ai-solutions #main .as-extracted>p:not(.as-ui-label) { margin:10px 0 18px; font-size:14px; color:rgba(114.007,98.864,66.73,1); } body.page-ai-solutions #main .as-field-list { border-top:1px solid rgba(194.889,184.142,161.336,1); } body.page-ai-solutions #main .as-field-list button { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px 12px; width:100%; padding:12px 9px; border:0; border-bottom:1px solid rgba(205.823,197.706,180.482,1); background:transparent; text-align:left; } body.page-ai-solutions #main .as-field-list button:hover,body.page-ai-solutions #main .as-field-list button.is-selected { background:rgba(238.821,230.995,214.387,1); } body.page-ai-solutions #main .as-field-list b { font-family:var(--mono); font-size:14px; } body.page-ai-solutions #main [data-ai-field-source].is-highlighted { background:rgba(242.137,232.48,211.987,1); border-color:rgba(143.466,123.138,80.002,1); } body.page-ai-solutions #main .as-format-note { margin-top:20px; } body.page-ai-solutions #main .as-format-note>span { color:rgba(107.206,94.14,66.414,1); font-size:14px; font-weight:600; } body.page-ai-solutions #main .as-format-note p { margin-top:5px; font-size:14px; } body.page-ai-solutions #main .as-workflow-body { padding:24px; } body.page-ai-solutions #main .as-tool-trace { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:19px 0; color:rgba(100.541,86.37,56.299,1); font-size:14px; line-height:1.7; } body.page-ai-solutions #main .as-trace-dot { width:8px; height:8px; flex:none; border-radius:50%; background:rgba(114.992,95.8,55.076,1); } body.page-ai-solutions #main .as-tool-trace b { font-weight:500; } body.page-ai-solutions #main .as-records { border:1px solid rgba(201.436,191.877,171.595,1); background:rgba(255,255,255,1); } body.page-ai-solutions #main .as-record-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:15px 18px; border-bottom:1px solid rgba(213.557,206.372,191.124,1); } body.page-ai-solutions #main .as-record-head h3 { font-size:18px; } body.page-ai-solutions #main .as-record-head h3>span { margin-left:10px; color:rgba(114.007,98.864,66.73,1); font-size:16px; } body.page-ai-solutions #main .as-record-head .as-ui-label { margin:0; } body.page-ai-solutions #main .as-records li { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px 16px; padding:13px 18px; border-bottom:1px solid rgba(227.684,222.894,212.729,1); font-size:14px; } body.page-ai-solutions #main .as-records li:last-child { border-bottom:0; } body.page-ai-solutions #main .as-records li b { font-size:14px; color:rgba(108.797,93.98,62.54,1); } body.page-ai-solutions #main .as-workflow-draft { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; margin-top:18px; padding:12px 16px; border:1px solid rgba(78.776,65.876,38.504,1); color:rgba(249.016,246.575,241.397,1); background:rgba(78.776,65.876,38.504,1); text-align:left; } body.page-ai-solutions #main .as-workflow-draft:hover { background:rgba(64.409,52.425,26.997,1); } body.page-ai-solutions #main .as-draft { margin-top:15px; padding:18px; background:rgba(238.851,233.441,221.961,1); } body.page-ai-solutions #main .as-draft p { font-size:14px; } body.page-ai-solutions #main .as-section { padding:88px 0; } body.page-ai-solutions #main .as-section-head { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:25px 48px; margin-bottom:48px; } body.page-ai-solutions #main .as-section-head>div { max-width:800px; } body.page-ai-solutions #main .as-section-head>p { max-width:390px; color:rgba(109.727,95.938,66.678,1); } body.page-ai-solutions #main .as-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } body.page-ai-solutions #main .as-service { display:flex; flex-direction:column; align-items:start; padding:32px; border:1px solid rgba(207.789,200.284,184.36,1); border-radius:20px; background:rgba(251.902,250.184,246.54,1); } body.page-ai-solutions #main .as-service:nth-child(2) { background:rgba(238.342,232.777,220.968,1); border-color:rgba(199.996,189.625,167.619,1); } body.page-ai-solutions #main .as-service:nth-child(4) { background:#ece5d5; border-color:rgba(200.65,189.137,164.707,1); } body.page-ai-solutions #main .as-service-top { display:flex; align-items:center; gap:15px; width:100%; margin-bottom:21px; font:600 14px/1.6 var(--mono); color:rgba(109.615,95.503,65.56,1); } body.page-ai-solutions #main .as-service-top>span:first-child { display:grid; place-items:center; width:38px; height:38px; background:rgba(78.776,65.876,38.504,1); color:rgba(246.228,242.889,235.802,1); font-size:17px; } body.page-ai-solutions #main .as-service h3 { margin-bottom:15px; font-size:27px; } body.page-ai-solutions #main .as-service>p { max-width:590px; margin-bottom:22px; color:rgba(106.216,93.142,65.401,1); } body.page-ai-solutions #main .as-use-cases { display:flex; flex-wrap:wrap; gap:8px 12px; margin:0 0 26px; } body.page-ai-solutions #main .as-use-cases li { padding:5px 11px; border-radius:6px; background:rgba(233.143,227.936,216.886,1); color:rgba(95.522,81.648,52.208,1); font-size:14px; } body.page-ai-solutions #main .as-service>a { display:flex; align-items:center; gap:26px; margin-top:auto; padding-bottom:4px; border-bottom:1px solid rgba(150.068,136.913,108.998,1); font-size:15px; font-weight:600; } body.page-ai-solutions #main .as-service>a:hover { color:rgba(108.597,89.394,48.647,1); border-color:rgba(108.597,89.394,48.647,1); } body.page-ai-solutions #main .as-service.as-service-dark { background:rgba(71.183,61.171,39.926,1); border-color:rgba(115.856,103.215,76.391,1); color:rgba(246.228,242.889,235.802,1); } body.page-ai-solutions #main .as-service-dark h3 { color:rgba(246.228,242.889,235.802,1); } body.page-ai-solutions #main .as-service-dark .as-service-top { color:rgba(228.699,220.349,202.633,1); } body.page-ai-solutions #main .as-service-dark .as-service-top>span:first-child { background:rgba(234.887,220.385,189.614,1); color:rgba(71.309,59.77,35.285,1); } body.page-ai-solutions #main .as-service-dark>p { color:rgba(227.401,219.514,202.778,1); } body.page-ai-solutions #main .as-service-dark .as-use-cases li { background:rgba(95.321,82.632,55.706,1); color:rgba(246.334,242.214,233.471,1); } body.page-ai-solutions #main .as-service-dark>a { color:rgba(245.242,237.533,221.174,1); border-color:rgba(196.746,180.847,147.111,1); } body.page-ai-solutions #main .as-service-dark>a:hover { color:rgba(243.282,222.292,177.753,1); border-color:rgba(243.282,222.292,177.753,1); } /* A larger document-processing group contains distinct, smaller content cards. */ body.page-ai-solutions #main .as-service-top>span:first-child { border-radius:7px; } body.page-ai-solutions #main .as-ocr-overview { margin-top:32px; padding:36px; border:1px solid rgba(202.702,190.169,163.574,1); border-radius:22px; background:rgba(235.69,228.727,213.952,1); color:rgba(67.422,57.345,35.963,1); scroll-margin-top:120px; } body.page-ai-solutions #main .as-ocr-heading { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:28px 48px; align-items:start; margin-bottom:30px; } body.page-ai-solutions #main .as-ocr-heading .as-eyebrow { margin-bottom:15px; letter-spacing:.07em; } body.page-ai-solutions #main .as-ocr-heading h3 { font-size:32px; line-height:1.5; } body.page-ai-solutions #main .as-ocr-heading p:not(.as-eyebrow) { color:rgba(97.585,83.381,53.242,1); } body.page-ai-solutions #main .as-ocr-inputs { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; } body.page-ai-solutions #main .as-ocr-inputs>span { padding:5px 11px; border:1px solid rgba(192.046,178.807,150.717,1); border-radius:6px; background:rgba(245.634,241.046,231.312,1); color:rgba(91.5,77.252,47.017,1); font-size:14px; font-weight:600; } body.page-ai-solutions #main .as-ocr-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; list-style:none; margin:0; padding:0; } body.page-ai-solutions #main .as-ocr-flow>li { min-width:0; padding:22px; border:1px solid rgba(208.547,198.511,177.213,1); border-radius:12px; background:rgba(251.762,249.968,246.159,1); } body.page-ai-solutions #main .as-ocr-flow>li>span { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:32px; padding:0 6px; margin-bottom:17px; border-radius:6px; background:rgba(85.156,71.239,41.709,1); color:rgba(249.43,245.655,237.643,1); font:600 14px/1 var(--mono); } body.page-ai-solutions #main .as-ocr-flow h4 { margin:0 0 10px; color:rgba(67.422,57.345,35.963,1); font-size:18px; line-height:1.6; font-weight:700; } body.page-ai-solutions #main .as-ocr-flow p { color:rgba(101.165,87.727,59.213,1); font-size:16px; line-height:1.8; } body.page-ai-solutions #main .as-ocr-review-note { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:14px 48px; margin-top:20px; padding:24px; border:1px solid rgba(204.141,192.977,169.286,1); border-radius:12px; background:rgba(246.583,242.05,232.432,1); } body.page-ai-solutions #main .as-ocr-review-note strong { max-width:330px; font-size:18px; line-height:1.8; } body.page-ai-solutions #main .as-ocr-review-note p { color:rgba(97.585,83.381,53.242,1); } body.page-ai-solutions #main .as-connections { background:rgba(49.989,43.349,29.259,1); color:rgba(244.42,240.504,232.194,1); } body.page-ai-solutions #main .as-connections :is(h2,h3) { color:rgba(244.42,240.504,232.194,1); } body.page-ai-solutions #main .as-connections .as-eyebrow,body.page-ai-solutions #main .as-connections .as-section-head>p { color:rgba(218.234,208.6,188.158,1); } body.page-ai-solutions #main .as-system-map { display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:26px; align-items:stretch; padding:32px 0 42px; border-top:1px solid rgba(127.965,115.366,88.632,1); border-bottom:1px solid rgba(127.965,115.366,88.632,1); } body.page-ai-solutions #main .as-map-label { margin:0 0 20px; color:rgba(226.739,218.923,202.336,1); font-size:16px; font-weight:600; } body.page-ai-solutions #main .as-map-source { padding:24px 21px; border-radius:14px; background:rgba(67.942,58.945,39.854,1); border:1px solid rgba(133.194,120.261,92.818,1); } body.page-ai-solutions #main .as-map-source+.as-map-source { margin-top:14px; } body.page-ai-solutions #main .as-map-source>span,body.page-ai-solutions #main .as-map-results>div>span { color:rgba(224.627,212.242,185.96,1); font:500 14px/1.6 var(--mono); } body.page-ai-solutions #main .as-map-source h3,body.page-ai-solutions #main .as-map-results h3 { margin:12px 0 7px; font-size:21px; } body.page-ai-solutions #main .as-map-source p { color:rgba(219.046,209.969,190.707,1); font-size:14px; } body.page-ai-solutions #main .as-engine-core { padding:26px; border-radius:18px; background:rgba(236.356,223.79,197.125,1); color:rgba(65.843,55.006,32.011,1); min-height:calc(100% - 50px); } body.page-ai-solutions #main .as-engine-core>span { color:rgba(95.787,79.312,44.354,1); font:600 14px/1.6 var(--mono); } body.page-ai-solutions #main .as-engine-core h3 { margin:23px 0; font-size:25px; } body.page-ai-solutions #main .as-engine-core h3 { color:rgba(65.843,55.006,32.011,1); } body.page-ai-solutions #main .as-engine-core ol { list-style:none; margin:0; padding:0; } body.page-ai-solutions #main .as-engine-core li { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:14px 0; border-top:1px solid rgba(176.181,158.128,119.82,1); font-size:15px; } body.page-ai-solutions #main .as-engine-core li>span { font-weight:700; } body.page-ai-solutions #main .as-map-results>div { padding:19px 22px; border-radius:12px; border:1px solid rgba(133.194,120.261,92.818,1); } body.page-ai-solutions #main .as-map-results>div+div { margin-top:12px; } body.page-ai-solutions #main .as-method-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; padding-top:36px; } body.page-ai-solutions #main .as-method-grid h3 { font-size:19px; } body.page-ai-solutions #main .as-method-grid article>span { display:block; margin:10px 0 17px; color:rgba(228.252,213.69,182.79,1); font:500 14px/1.6 var(--mono); } body.page-ai-solutions #main .as-method-grid p { color:rgba(219.046,209.969,190.707,1); font-size:15px; } body.page-ai-solutions #main .as-delivery { background:rgba(235.769,231.405,222.145,1); } body.page-ai-solutions #main .as-delivery-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:9%; align-items:start; } body.page-ai-solutions #main .as-delivery-copy>p:not(.as-eyebrow) { margin-top:26px; max-width:480px; color:rgba(104.129,90.717,62.258,1); } body.page-ai-solutions #main .as-delivery-copy>a { margin-top:24px; } body.page-ai-solutions #main .as-delivery-steps { list-style:none; margin:0; padding:0; } body.page-ai-solutions #main .as-delivery-steps li { display:grid; grid-template-columns:42px minmax(0,1fr); gap:22px; padding:24px 0; border-top:1px solid rgba(184.186,172.78,148.577,1); } body.page-ai-solutions #main .as-delivery-steps li>span { padding-top:3px; color:rgba(102.089,86.491,53.395,1); font:600 19px/1.6 var(--mono); } body.page-ai-solutions #main .as-delivery-steps h3 { font-size:21px; } body.page-ai-solutions #main .as-delivery-steps p { margin-top:10px; color:rgba(104.129,90.717,62.258,1); } body.page-ai-solutions #main .as-check-strip { display:flex; align-items:start; gap:30px 50px; flex-wrap:wrap; padding:28px 32px; margin-top:46px; border-radius:16px; background:rgba(247.227,244.486,238.671,1); border:1px solid rgba(189.934,179.143,156.243,1); } body.page-ai-solutions #main .as-check-strip h3 { font-size:18px; } body.page-ai-solutions #main .as-check-strip ul { display:grid; grid-template-columns:1fr 1fr; flex:1; min-width:min(100%,430px); gap:12px 30px; } body.page-ai-solutions #main .as-check-strip li { padding-left:17px; position:relative; color:rgba(98.204,84.738,56.165,1); font-size:15px; } body.page-ai-solutions #main .as-check-strip li:before { content:''; width:5px; height:5px; position:absolute; left:0; top:11px; background:rgba(133.009,112.488,68.943,1); } body.page-ai-solutions #main .as-faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:8%; } body.page-ai-solutions #main .as-faq-list { padding:0 22px; border:1px solid rgba(184.581,174.596,153.408,1); border-radius:16px; background:rgba(250.939,248.881,244.512,1); } body.page-ai-solutions #main .as-faq-list details:last-child { border-bottom:0; } body.page-ai-solutions #main .as-faq-list details { border-bottom:1px solid rgba(184.581,174.596,153.408,1); } body.page-ai-solutions #main .as-faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:24px 0; list-style:none; cursor:pointer; font-size:19px; font-weight:600; line-height:1.7; } body.page-ai-solutions #main .as-faq-list summary::-webkit-details-marker { display:none; } body.page-ai-solutions #main .as-faq-list summary:after { content:'+'; flex:none; font-size:24px; line-height:1; } body.page-ai-solutions #main .as-faq-list details[open] summary:after { content:'−'; } body.page-ai-solutions #main .as-faq-list details p { padding:0 38px 25px 0; color:rgba(106.025,92.975,65.283,1); } body.page-ai-solutions #main .as-cta { padding:68px 0; background:rgba(235.125,223.847,199.917,1); color:rgba(69.458,57.531,32.222,1); } body.page-ai-solutions #main .as-cta-layout { display:flex; align-items:center; justify-content:space-between; gap:35px 60px; } body.page-ai-solutions #main .as-cta p:not(.as-eyebrow) { margin-top:22px; color:rgba(106.065,89.325,53.805,1); } body.page-ai-solutions #main .as-cta .button.primary { color:rgba(248.393,244.73,236.959,1)!important; background:rgba(75.839,62.894,35.428,1)!important; border-color:rgba(75.839,62.894,35.428,1); } body.page-ai-solutions #main .as-cta .button.primary:hover { background:rgba(58.551,48.026,25.692,1)!important; } /* An editorial hero image and linked source/result overlays. */ body.page-ai-solutions #main .as-hero-visual { position:relative; min-width:0; height:620px; margin:0; isolation:isolate; } body.page-ai-solutions #main .as-hero-visual>img { position:absolute; inset:0 auto 0 -8%; width:116%; height:100%; max-width:none; object-fit:cover; object-position:70% center; mask-image:radial-gradient(ellipse at 62% 44%,rgba(0,0,0,1) 40%,rgba(0,0,0,0.8) 64%,transparent 82%); z-index:-1; } body.page-ai-solutions #main .as-visual-paths { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; } body.page-ai-solutions #main .as-visual-paths path { fill:none; stroke:rgba(234.644,219.712,188.026,1); stroke-width:1.3; stroke-dasharray:4 7; } body.page-ai-solutions #main .as-visual-paths .as-flow-pulse { stroke:rgba(253.485,249.065,239.685,1); stroke-width:3; stroke-dasharray:22 880; animation:as-data-flow 2s ease-out 1 both; } body.page-ai-solutions #main .as-visual-source,body.page-ai-solutions #main .as-visual-result { position:absolute; padding:21px 23px; border:1px solid rgba(206.756,196.143,173.625,1); border-radius:16px; box-shadow:0 20px 50px rgba(20.011,15.979,7.424,0.2); } body.page-ai-solutions #main .as-visual-source { left:0; top:14%; width:280px; background:rgba(245.434,242.398,235.954,1); color:rgba(68.613,57.842,34.987,1); } body.page-ai-solutions #main .as-visual-source>span,body.page-ai-solutions #main .as-visual-result>span { display:block; color:rgba(100.123,84.5,51.349,1); font:600 14px/1.5 var(--mono); letter-spacing:.03em; } body.page-ai-solutions #main .as-visual-source>p { margin-top:12px; color:rgba(68.613,57.842,34.987,1); font-size:16px; font-weight:600; } body.page-ai-solutions #main .as-visual-file-row { display:flex; gap:8px; margin-top:17px; } body.page-ai-solutions #main .as-visual-file-row>span { padding:3px 7px; border:1px solid rgba(170.191,155.813,125.303,1); background:rgba(237.059,231.647,220.165,1); color:rgba(83.787,70.598,42.611,1); font:600 14px/1.5 var(--mono); } body.page-ai-solutions #main .as-visual-core { position:absolute; left:63%; top:44%; transform:translate(-50%,-50%); display:grid; place-items:center; width:112px; height:112px; border:1px solid rgba(239.854,226.513,198.206,1); border-radius:50%; background:rgba(50.065,42.083,25.145,1); box-shadow:0 0 0 14px rgba(243.282,222.292,177.753,0.0784313725490196),0 0 65px rgba(243.282,222.292,177.753,0.25098039215686274); } body.page-ai-solutions #main .as-visual-core>span { color:rgba(250.378,245.041,233.717,1); font:700 45px/1 var(--font); letter-spacing:-.05em; } body.page-ai-solutions #main .as-visual-result { right:0; bottom:10%; width:310px; background:rgba(236.149,224.216,198.896,1); color:rgba(68.613,57.842,34.987,1); } body.page-ai-solutions #main .as-visual-result>p { margin-top:13px; color:rgba(68.613,57.842,34.987,1); font-size:20px; font-weight:600; line-height:1.6; } body.page-ai-solutions #main .as-visual-result>div { display:flex; gap:8px; margin-top:18px; } body.page-ai-solutions #main .as-visual-result a { display:flex; align-items:center; justify-content:space-between; flex:1; gap:10px; padding:7px 9px; border:1px solid rgba(157.791,137.874,95.611,1); color:rgba(78.024,64.39,35.458,1); background:rgba(243.767,236.152,219.993,1); font-size:14px; font-weight:600; } body.page-ai-solutions #main .as-visual-result a:hover { background:rgba(251.205,247.375,239.247,1); border-color:rgba(101.187,83.679,46.528,1); } body.page-ai-solutions #main .as-hero-visual figcaption { position:absolute; inset:auto 0 0; color:rgba(219.058,209.4,188.905,1); font-size:14px; line-height:1.7; text-align:right; } body.page-ai-solutions #main .as-demo-container { padding-top:25px; padding-bottom:54px; } body.page-ai-solutions #main .as-demo-heading { display:flex; align-items:end; justify-content:space-between; gap:24px 40px; margin-bottom:26px; } body.page-ai-solutions #main .as-demo-heading .as-eyebrow { margin-bottom:12px; } body.page-ai-solutions #main .as-demo-heading h2 { color:rgba(246.19,242.002,233.114,1); font-size:32px; } body.page-ai-solutions #main .as-demo-heading>p { max-width:330px; color:rgba(217.09,207.398,186.833,1); } body.page-ai-solutions #main .as-demo-container .as-workbench { max-width:none; } /* Different interface illustrations make the four services readable at a glance. */ body.page-ai-solutions #main .as-search-symbol { position:relative; width:14px; height:14px; border:2px solid rgba(118.341,100.665,63.157,1); border-radius:50%; flex:none; margin-right:3px; } body.page-ai-solutions #main .as-search-symbol:after { content:''; position:absolute; width:6px; height:2px; right:-5px; bottom:-3px; background:rgba(118.341,100.665,63.157,1); transform:rotate(45deg); } body.page-ai-solutions #main .as-map-engine { position:relative; } body.page-ai-solutions #main .as-map-engine:before,body.page-ai-solutions #main .as-map-engine:after { content:''; position:absolute; top:53%; width:26px; height:2px; background:rgba(223.431,203.187,160.23,1); } body.page-ai-solutions #main .as-map-engine:before { left:-26px; } body.page-ai-solutions #main .as-map-engine:after { right:-26px; } @keyframes as-data-flow { to { stroke-dashoffset:-902; } } @media (max-width:1200px) { body.page-ai-solutions #main .as-hero-grid { grid-template-columns:1fr; gap:45px; } body.page-ai-solutions #main .as-hero-copy { max-width:850px; } body.page-ai-solutions #main .as-hero h1>span { display:inline-block; white-space:nowrap; } body.page-ai-solutions #main .as-hero h1>.as-accent { display:block; } body.page-ai-solutions #main .as-hero .as-lead { max-width:650px; } body.page-ai-solutions #main .as-workbench { width:100%; max-width:950px; } body.page-ai-solutions #main .as-hero-visual { width:100%; max-width:850px; height:560px; margin-inline:auto; } body.page-ai-solutions #main .as-search-layout { grid-template-columns:210px minmax(0,1fr); } body.page-ai-solutions #main .as-method-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 40px; } } @media (max-width:900px) { body.page-ai-solutions #main .as-section { padding-block:62px; } body.page-ai-solutions #main .as-section-head { display:block; margin-bottom:32px; } body.page-ai-solutions #main .as-section-head>p { margin-top:23px; max-width:650px; } body.page-ai-solutions #main .as-service-grid { gap:20px; } body.page-ai-solutions #main .as-service { padding:26px; } body.page-ai-solutions #main .as-service h3 { font-size:24px; } body.page-ai-solutions #main .as-ocr-overview { padding:28px; } body.page-ai-solutions #main .as-ocr-heading,body.page-ai-solutions #main .as-ocr-review-note { grid-template-columns:1fr; gap:20px; } body.page-ai-solutions #main .as-ocr-review-note strong { max-width:none; } body.page-ai-solutions #main .as-ocr-flow { grid-template-columns:repeat(2,minmax(0,1fr)); } body.page-ai-solutions #main .as-system-map { grid-template-columns:1fr; gap:27px; } body.page-ai-solutions #main .as-map-column:first-child { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; } body.page-ai-solutions #main .as-map-column:first-child .as-map-label { grid-column:1/-1; } body.page-ai-solutions #main .as-map-source+.as-map-source { margin-top:0; } body.page-ai-solutions #main .as-map-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 12px; } body.page-ai-solutions #main .as-map-results>.as-map-label { grid-column:1/-1; } body.page-ai-solutions #main .as-map-results>div+div { margin-top:0; } body.page-ai-solutions #main .as-map-results>div { padding:18px 14px; } body.page-ai-solutions #main .as-map-results h3 { font-size:18px; } body.page-ai-solutions #main .as-delivery-layout,body.page-ai-solutions #main .as-faq-layout { grid-template-columns:1fr; gap:35px; } body.page-ai-solutions #main .as-cta-layout { align-items:start; flex-direction:column; } body.page-ai-solutions #main .as-demo-heading { align-items:start; flex-direction:column; } body.page-ai-solutions #main .as-map-engine:before,body.page-ai-solutions #main .as-map-engine:after { display:none; } } @media (max-width:640px) { body.page-ai-solutions #main .as-hero { padding-top:127px; } body.page-ai-solutions #main .as-hero h1 { font-size:clamp(38px,9.8vw,52px); line-height:1.35; letter-spacing:-.06em; margin-bottom:20px; } body.page-ai-solutions #main .as-eyebrow { font-size:14px; letter-spacing:.08em; margin-bottom:20px; } body.page-ai-solutions #main .as-hero .as-lead { font-size:16px; } body.page-ai-solutions #main .as-hero-actions { align-items:start; flex-direction:column; gap:15px; margin-top:25px; } body.page-ai-solutions #main .as-hero-foot { margin-top:24px; } body.page-ai-solutions #main .as-hero-grid { gap:35px; padding-bottom:36px; } body.page-ai-solutions #main .as-hero-bottom { padding-block:19px; } body.page-ai-solutions #main .as-window-bar { padding:14px; gap:9px; } body.page-ai-solutions #main .as-window-brand { gap:7px; } body.page-ai-solutions #main .as-window-brand b { margin-left:0; } body.page-ai-solutions #main .as-search-layout { grid-template-columns:1fr; } body.page-ai-solutions #main .as-documents { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:15px 12px; border-right:0; border-bottom:1px solid rgba(215.345,209.041,195.666,1); } body.page-ai-solutions #main .as-documents>.as-ui-label { grid-column:1/-1; margin-bottom:3px; } body.page-ai-solutions #main .as-document { display:block; margin:0; padding:10px 7px; } body.page-ai-solutions #main .as-file-type { display:table; margin-bottom:8px; } body.page-ai-solutions #main .as-document small { margin-top:7px; } body.page-ai-solutions #main .as-conversation,body.page-ai-solutions #main .as-workflow-body { padding:20px 16px; } body.page-ai-solutions #main .as-user-question { padding:15px; } body.page-ai-solutions #main .as-demo-action { display:block; } body.page-ai-solutions #main .as-run { width:100%; margin-top:14px; min-height:44px; } body.page-ai-solutions #main .as-demo-disclosure { padding:14px 16px; } body.page-ai-solutions #main .as-extract-layout { grid-template-columns:1fr; gap:26px; padding:20px 16px; } body.page-ai-solutions #main .as-sample-document { padding:20px; } body.page-ai-solutions #main .as-sample-document dl>div { flex-wrap:nowrap; } body.page-ai-solutions #main .as-section { padding-block:46px; } body.page-ai-solutions #main h2 { font-size:29px; line-height:1.5; } body.page-ai-solutions #main .as-section-head>p { margin-top:20px; } body.page-ai-solutions #main .as-service-grid { grid-template-columns:1fr; } body.page-ai-solutions #main .as-service { padding:25px 21px; } body.page-ai-solutions #main .as-service h3 { font-size:23px; } body.page-ai-solutions #main .as-service-top { margin-bottom:18px; } body.page-ai-solutions #main .as-use-cases { gap:7px; } body.page-ai-solutions #main .as-ocr-overview { padding:24px 20px; margin-top:24px; border-radius:18px; } body.page-ai-solutions #main .as-ocr-heading h3 { font-size:26px; } body.page-ai-solutions #main .as-ocr-flow { grid-template-columns:1fr; gap:12px; } body.page-ai-solutions #main .as-ocr-flow>li { padding:20px; } body.page-ai-solutions #main .as-ocr-flow>li>span { margin-bottom:12px; } body.page-ai-solutions #main .as-ocr-flow p br { display:none; } body.page-ai-solutions #main .as-ocr-review-note { padding:20px; } body.page-ai-solutions #main .as-map-column:first-child { grid-template-columns:1fr; } body.page-ai-solutions #main .as-map-source+.as-map-source { margin-top:12px; } body.page-ai-solutions #main .as-engine-core { padding:24px 20px; } body.page-ai-solutions #main .as-engine-core h3 { font-size:23px; } body.page-ai-solutions #main .as-map-results { grid-template-columns:1fr; gap:12px; } body.page-ai-solutions #main .as-map-results>.as-map-label { margin-bottom:4px; } body.page-ai-solutions #main .as-map-results>div { padding:18px 22px; } body.page-ai-solutions #main .as-map-results h3 { font-size:21px; } body.page-ai-solutions #main .as-method-grid { grid-template-columns:1fr; gap:28px; } body.page-ai-solutions #main .as-method-grid article { padding-top:22px; border-top:1px solid rgba(125.385,111.731,82.758,1); } body.page-ai-solutions #main .as-method-grid article>span { margin-bottom:12px; } body.page-ai-solutions #main .as-check-strip { margin-top:28px; padding:24px 20px; gap:20px; } body.page-ai-solutions #main .as-check-strip ul { grid-template-columns:1fr; } body.page-ai-solutions #main .as-delivery-steps li { gap:10px; grid-template-columns:35px minmax(0,1fr); } body.page-ai-solutions #main .as-delivery-steps h3 { font-size:20px; } body.page-ai-solutions #main .as-faq-list summary { font-size:18px; gap:18px; padding-block:21px; } body.page-ai-solutions #main .as-faq-list details p { padding-right:0; } body.page-ai-solutions #main .as-cta { padding-block:46px; } body.page-ai-solutions #main .as-hero-visual { height:480px; } body.page-ai-solutions #main .as-visual-source { width:240px; top:5%; padding:17px; } body.page-ai-solutions #main .as-visual-core { left:75%; top:46%; width:88px; height:88px; box-shadow:0 0 0 10px rgba(243.282,222.292,177.753,0.0784313725490196),0 0 45px rgba(243.282,222.292,177.753,0.25098039215686274); } body.page-ai-solutions #main .as-visual-core>span { font-size:37px; } body.page-ai-solutions #main .as-visual-result { width:250px; bottom:12%; padding:18px; } body.page-ai-solutions #main .as-visual-result>p { font-size:18px; } body.page-ai-solutions #main .as-hero-visual figcaption { text-align:left; } body.page-ai-solutions #main .as-demo-container { padding-top:6px; padding-bottom:35px; } body.page-ai-solutions #main .as-demo-heading h2 { font-size:27px; } body.page-ai-solutions #main .as-demo-heading>p { font-size:16px; } } @media (prefers-reduced-motion:reduce) { body.page-ai-solutions #main .as-flow-pulse { animation:none; } } /* ── Claude 수정안: 가상 데모 대신 실제 개발 화면과 처리 흐름 ── */ body.page-ai-solutions #main .as-cases { background:rgba(246.708,244.659,240.312,1); } body.page-ai-solutions #main .as-case { border:1px solid rgba(213.544,206.954,192.971,1); border-radius:20px; background:#fbfbf7; padding:32px; } body.page-ai-solutions #main .as-case-wide { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:44px; align-items:center; margin-bottom:24px; } body.page-ai-solutions #main .as-case-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } body.page-ai-solutions #main .as-case-pair .as-case { display:flex; flex-direction:column; } body.page-ai-solutions #main .as-case-meta { display:flex; flex-wrap:wrap; gap:6px 8px; margin:0 0 14px; } body.page-ai-solutions #main .as-case-meta span { padding:2px 12px; border:1px solid rgba(207.789,200.284,184.36,1); border-radius:999px; color:rgba(103.603,89.785,60.465,1); font:600 14px/1.7 var(--font); letter-spacing:0; } body.page-ai-solutions #main .as-case-meta span:first-child { background:rgba(78.776,65.876,38.504,1); border-color:rgba(78.776,65.876,38.504,1); color:rgba(246.228,242.889,235.802,1); } body.page-ai-solutions #main .as-case h3 { margin:0 0 14px; font-size:17px; font-weight:600; line-height:1.55; color:rgba(106.216,93.142,65.401,1); letter-spacing:-.02em; } body.page-ai-solutions #main .as-case h3 b { display:block; margin-top:2px; font-size:30px; font-weight:700; line-height:1.3; color:rgba(53.681,45.627,28.536,1); letter-spacing:-.035em; } body.page-ai-solutions #main .as-case-copy>p:not(.as-case-meta):not(.as-case-tech) { margin-bottom:22px; color:rgba(95.155,82.009,54.115,1); } body.page-ai-solutions #main .as-case-steps { list-style:none; margin:0 0 20px; padding:0; } body.page-ai-solutions #main .as-case-steps li { position:relative; display:grid; grid-template-columns:30px 1fr; gap:14px; padding-bottom:16px; } body.page-ai-solutions #main .as-case-steps li:last-child { padding-bottom:0; } body.page-ai-solutions #main .as-case-steps li:not(:last-child)::before { content:""; position:absolute; left:14px; top:30px; bottom:2px; width:2px; background:rgba(214.449,205.371,186.11,1); } body.page-ai-solutions #main .as-case-steps li>span { position:relative; z-index:1; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(78.776,65.876,38.504,1); color:rgba(246.228,242.889,235.802,1); font:600 14px/1 var(--mono); } body.page-ai-solutions #main .as-case-steps li:nth-child(3)>span { background:rgba(234.887,220.385,189.614,1); color:rgba(71.309,59.77,35.285,1); box-shadow:inset 0 0 0 2px rgba(153.501,130.57,81.912,1); } body.page-ai-solutions #main .as-case-steps b { display:block; font-size:16px; line-height:1.6; color:rgba(53.681,45.627,28.536,1); } body.page-ai-solutions #main .as-case-steps p { font-size:15px; line-height:1.7; color:rgba(106.216,93.142,65.401,1); } body.page-ai-solutions #main .as-case-tech { padding-top:14px; border-top:1px solid rgba(225.248,219.634,207.72,1); color:rgba(117.114,104.116,76.535,1); font:500 14px/1.7 var(--mono); } body.page-ai-solutions #main .as-case-note { margin-top:auto; padding-top:16px; border-top:1px solid rgba(225.248,219.634,207.72,1); color:rgba(95.155,82.009,54.115,1); font-size:15px; } body.page-ai-solutions #main .as-case-pair .as-case-steps { margin-bottom:22px; } body.page-ai-solutions #main .as-shot { margin:0; } body.page-ai-solutions #main .as-shot img { display:block; width:100%; height:auto; border:1px solid rgba(206.585,200.245,186.793,1); border-radius:12px; background:#111a2b; } body.page-ai-solutions #main .as-shot figcaption { margin-top:9px; color:rgba(117.114,104.116,76.535,1); font-size:14px; line-height:1.6; } body.page-ai-solutions #main .as-case-pair .as-shot { margin-bottom:24px; } body.page-ai-solutions #main .as-case-pair .as-shot img { aspect-ratio:16/9.6; object-fit:cover; object-position:50% 0; } body.page-ai-solutions #main .as-case-shots { display:grid; grid-template-columns:minmax(0,.36fr) minmax(0,1fr); gap:16px; align-items:end; } body.page-ai-solutions #main .as-shot-phone img { aspect-ratio:780/1120; object-fit:cover; object-position:50% 52%; } body.page-ai-solutions #main .as-cases-note { margin-top:24px; padding:22px 28px; border-left:4px solid rgba(153.501,130.57,81.912,1); border-radius:0 14px 14px 0; background:rgba(238.473,232.401,219.516,1); color:rgba(75.303,65.3,44.076,1); } body.page-ai-solutions #main .as-cases-note b { color:rgba(53.681,45.627,28.536,1); } /* 서비스 카드: 넣는 것 → AI가 하는 일 → 사람이 확인 → 남는 것 */ body.page-ai-solutions #main .as-flow { list-style:none; width:100%; margin:4px 0 22px; padding:6px 0; border:1px solid rgba(222.28,216.338,203.727,1); border-radius:14px; background:rgba(255,255,255,0.7215686274509804); } body.page-ai-solutions #main .as-flow li { position:relative; display:grid; grid-template-columns:112px 1fr; gap:12px; padding:10px 18px 10px 40px; } body.page-ai-solutions #main .as-flow li::before { content:""; position:absolute; left:18px; top:19px; width:10px; height:10px; border-radius:50%; background:rgba(169.903,140.889,79.323,1); } body.page-ai-solutions #main .as-flow li:not(:last-child)::after { content:""; position:absolute; left:22px; top:31px; bottom:-9px; width:2px; background:rgba(217.402,208.662,190.116,1); } body.page-ai-solutions #main .as-flow li>span { color:rgba(117.114,104.116,76.535,1); font-size:14px; font-weight:600; line-height:1.75; } body.page-ai-solutions #main .as-flow li>b { color:rgba(53.681,45.627,28.536,1); font-size:16px; font-weight:600; line-height:1.65; } body.page-ai-solutions #main .as-flow li:nth-child(3) { margin:2px 8px; padding-left:32px; border-radius:10px; background:rgba(241.595,234.957,220.871,1); } body.page-ai-solutions #main .as-flow li:nth-child(3)::before { left:10px; background:rgba(102.969,83.955,43.61,1); box-shadow:0 0 0 3px rgba(234.887,220.385,189.614,1); } body.page-ai-solutions #main .as-flow li:nth-child(3)::after { left:14px; } body.page-ai-solutions #main .as-flow li:nth-child(3)>span { color:rgba(89.832,72.01,34.192,1); } body.page-ai-solutions #main .as-flow-tech { margin:-8px 0 22px!important; color:rgba(117.114,104.116,76.535,1)!important; font:500 14px/1.7 var(--mono)!important; } body.page-ai-solutions #main .as-service-dark .as-flow { background:rgba(60.595,51.935,33.559,1); border-color:rgba(106.371,93.74,66.937,1); } body.page-ai-solutions #main .as-service-dark .as-flow li>span { color:rgba(218.234,208.6,188.158,1); } body.page-ai-solutions #main .as-service-dark .as-flow li>b { color:rgba(246.334,242.214,233.471,1); } body.page-ai-solutions #main .as-service-dark .as-flow li::before { background:rgba(208.63,188.481,145.726,1); } body.page-ai-solutions #main .as-service-dark .as-flow li:not(:last-child)::after { background:rgba(106.371,93.74,66.937,1); } body.page-ai-solutions #main .as-service-dark .as-flow li:nth-child(3) { background:rgba(88.961,76.615,50.419,1); } body.page-ai-solutions #main .as-service-dark .as-flow li:nth-child(3)::before { background:rgba(234.887,220.385,189.614,1); box-shadow:0 0 0 3px rgba(71.183,61.171,39.926,1); } body.page-ai-solutions #main .as-service-dark .as-flow li:nth-child(3)>span { color:rgba(242.648,231.197,206.898,1); } body.page-ai-solutions #main .as-service-dark .as-flow-tech { color:rgba(218.234,208.6,188.158,1)!important; } @media (max-width:1100px) { body.page-ai-solutions #main .as-case-wide { grid-template-columns:1fr; gap:32px; } } @media (max-width:900px) { body.page-ai-solutions #main .as-case-pair { grid-template-columns:1fr; } } @media (max-width:760px) { body.page-ai-solutions #main br.br-pc { display:none; } } @media (max-width:640px) { body.page-ai-solutions #main .as-case { padding:22px 18px; border-radius:16px; } body.page-ai-solutions #main .as-case h3 b { font-size:25px; } body.page-ai-solutions #main .as-flow li { grid-template-columns:1fr; gap:2px; padding-right:14px; } body.page-ai-solutions #main .as-cases-note { padding:18px 18px; } } body.page-ai-solutions #main .as-lead .as-lead-sign { display:block; margin-top:10px; color:rgba(238.199,225.804,199.502,1); font-weight:600; } /* 2026-11-09 단순화: '지금 → AI 적용 후' 비교, 사례 흐름 칩 */ body.page-ai-solutions #main .as-change { display:grid; gap:10px; width:100%; margin:4px 0 26px; } body.page-ai-solutions #main .as-change>div { display:grid; grid-template-columns:92px minmax(0,1fr); gap:14px; padding:15px 18px; border:1px solid rgba(222.28,216.338,203.727,1); border-radius:12px; background:rgba(255,255,255,0.6901960784313725); } body.page-ai-solutions #main .as-change dt { color:rgba(128.002,117.477,95.142,1); font-size:14px; font-weight:700; line-height:1.8; } body.page-ai-solutions #main .as-change dd { margin:0; color:rgba(99.659,87.621,62.078,1); font-size:16px; line-height:1.8; } body.page-ai-solutions #main .as-change>div:last-child { border-color:rgba(208.63,188.481,145.726,1); background:rgba(242.736,231.126,206.49,1); } body.page-ai-solutions #main .as-change>div:last-child dt { color:rgba(89.832,72.01,34.192,1); } body.page-ai-solutions #main .as-change>div:last-child dd { color:rgba(52.102,43.286,24.578,1); font-weight:600; } body.page-ai-solutions #main .as-service-dark .as-change>div { border-color:rgba(106.371,93.74,66.937,1); background:rgba(60.595,51.935,33.559,1); } body.page-ai-solutions #main .as-service-dark .as-change dt { color:rgba(206.582,196.227,174.253,1); } body.page-ai-solutions #main .as-service-dark .as-change dd { color:rgba(233.283,226.389,211.76,1); } body.page-ai-solutions #main .as-service-dark .as-change>div:last-child { border-color:rgba(243.282,222.292,177.753,1); background:rgba(243.282,222.292,177.753,1); } body.page-ai-solutions #main .as-service-dark .as-change>div:last-child dt { color:rgba(89.832,72.01,34.192,1); } body.page-ai-solutions #main .as-service-dark .as-change>div:last-child dd { color:rgba(52.102,43.286,24.578,1); } body.page-ai-solutions #main .as-case-desc { margin-bottom:18px; color:rgba(86.262,74.86,50.665,1); font-size:17px; } body.page-ai-solutions #main .as-case-flow { display:flex; flex-wrap:wrap; align-items:center; gap:10px 30px; list-style:none; margin:0 0 20px; padding:0; } body.page-ai-solutions #main .as-case-flow li { position:relative; padding:6px 13px; border:1px solid rgba(214.449,205.371,186.11,1); border-radius:8px; background:rgba(245.417,242.1,235.06,1); color:rgba(75.445,63.247,37.363,1); font-size:15px; font-weight:600; line-height:1.6; } body.page-ai-solutions #main .as-case-flow li:not(:last-child)::after { content:"→"; position:absolute; right:-23px; top:50%; transform:translateY(-50%); color:rgba(169.903,140.889,79.323,1); font-weight:700; } body.page-ai-solutions #main .as-case-flow li.is-ai { border-color:rgba(188.843,164.813,113.823,1); background:rgba(243.282,222.292,177.753,1); color:rgba(52.102,43.286,24.578,1); } body.page-ai-solutions #main .as-case-wide .as-case-note { margin-top:0; } @media (max-width:640px) { body.page-ai-solutions #main .as-change>div { grid-template-columns:1fr; gap:2px; padding:13px 15px; } body.page-ai-solutions #main .as-case-desc { font-size:16px; } body.page-ai-solutions #main .as-case-flow { gap:8px 26px; } body.page-ai-solutions #main .as-case-flow li { font-size:14px; padding:5px 10px; } body.page-ai-solutions #main .as-case-flow li:not(:last-child)::after { right:-20px; } } /* ═══ 2026-11-09 적용 예시 10가지 — 제품·사례 소개 대신 업무별 도표 ═══ */ .page-ai-solutions #main .uc-section { background:rgba(246.708,244.659,240.312,1); } .page-ai-solutions #main .uc-section .as-section-head>p { max-width:430px; } .page-ai-solutions #main .uc-index { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:0 0 28px; padding:0; list-style:none; } .page-ai-solutions #main .uc-index li { margin:0; padding:0; } .page-ai-solutions #main .uc-index a { display:flex; align-items:center; gap:10px; height:100%; padding:10px 12px; border:1px solid rgba(213.544,206.954,192.971,1); border-radius:12px; background:#fbfbf7; color:rgba(67.422,57.345,35.963,1); font-size:15px; font-weight:600; line-height:1.45; letter-spacing:-.02em; } .page-ai-solutions #main .uc-index a:hover { border-color:rgba(153.501,130.57,81.912,1); background:rgba(245.777,241.26,231.674,1); } .page-ai-solutions #main .uc-index a b { flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:rgba(78.776,65.876,38.504,1); color:rgba(246.228,242.889,235.802,1); font-size:13px; font-weight:700; line-height:1; } .page-ai-solutions #main .uc-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .page-ai-solutions #main .uc { display:flex; flex-direction:column; min-width:0; padding:12px 12px 26px; border:1px solid rgba(213.544,206.954,192.971,1); border-radius:20px; background:#fbfbf7; } .page-ai-solutions #main .uc-fig { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:340px; margin:0 0 22px; padding:44px 24px 24px; border-radius:14px; background:rgba(241.651,237.414,228.422,1); overflow:hidden; } .page-ai-solutions #main .uc-fig>figcaption { position:absolute; left:14px; top:12px; padding:0 10px; border:1px solid rgba(203.586,194.079,173.904,1); border-radius:999px; background:rgba(249.97,247.578,242.504,1); color:rgba(117.114,104.116,76.535,1); font-size:12px; font-weight:700; line-height:1.8; letter-spacing:.04em; } .page-ai-solutions #main .uc-fig p { margin:0; } .page-ai-solutions #main .uc-body { display:flex; flex-direction:column; flex:1; padding:0 14px; } .page-ai-solutions #main .uc-meta { display:flex; align-items:center; gap:10px; margin:0 0 8px; color:rgba(117.114,104.116,76.535,1); font-size:14px; font-weight:700; line-height:1.6; } .page-ai-solutions #main .uc-meta b { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:rgba(78.776,65.876,38.504,1); color:rgba(246.228,242.889,235.802,1); font-size:14px; } .page-ai-solutions #main .uc h3 { margin:0 0 16px; font-size:24px; line-height:1.4; color:rgba(52.102,43.286,24.578,1); } .page-ai-solutions #main .uc-roles { display:grid; gap:6px; margin:0 0 18px; } .page-ai-solutions #main .uc-roles>div { display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; padding:9px 14px; border-radius:10px; } .page-ai-solutions #main .uc-roles>div.is-ai { background:rgba(242.736,231.126,206.49,1); } .page-ai-solutions #main .uc-roles dt { color:rgba(128.002,117.477,95.142,1); font-size:14px; font-weight:700; line-height:1.75; } .page-ai-solutions #main .uc-roles dd { margin:0; color:rgba(86.262,74.86,50.665,1); font-size:15.5px; line-height:1.75; } .page-ai-solutions #main .uc-roles .is-ai dt { color:rgba(89.832,72.01,34.192,1); } .page-ai-solutions #main .uc-roles .is-ai dd { color:rgba(52.102,43.286,24.578,1); font-weight:600; } .page-ai-solutions #main .uc-link { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:auto; padding-top:14px; border-top:1px solid rgba(228.04,223.017,212.358,1); color:rgba(86.262,74.86,50.665,1); font-size:14.5px; line-height:1.6; } .page-ai-solutions #main .uc-link span { color:rgba(128.002,117.477,95.142,1); font-weight:700; } .page-ai-solutions #main .uc-close { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 32px; margin-top:24px; padding:22px 28px; border-left:4px solid rgba(153.501,130.57,81.912,1); border-radius:0 14px 14px 0; background:rgba(238.473,232.401,219.516,1); } .page-ai-solutions #main .uc-close>div { flex:1 1 480px; } .page-ai-solutions #main .uc-close p { color:rgba(75.303,65.3,44.076,1); } .page-ai-solutions #main .uc-close b { color:rgba(53.681,45.627,28.536,1); } /* 도표 공통 */ .page-ai-solutions #main .d-legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:14px; color:rgba(106.216,93.142,65.401,1); font-size:13px; font-weight:600; line-height:1.6; } .page-ai-solutions #main .d-legend span { display:inline-flex; align-items:center; gap:7px; } .page-ai-solutions #main .d-legend span::before { content:""; flex:none; width:10px; height:10px; border-radius:3px; background:currentColor; } .page-ai-solutions #main .d-q { justify-self:end; max-width:85%; padding:10px 14px; border-radius:14px 14px 3px 14px; background:rgba(78.776,65.876,38.504,1); color:rgba(246.228,242.889,235.802,1); font-size:14px; font-weight:600; line-height:1.6; } /* 01 서류 → 입력칸 */ .page-ai-solutions #main .d-map { display:grid; grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr); align-items:center; } .page-ai-solutions #main .d-paper { padding:16px 16px 18px; border:1px solid rgba(213.158,207.714,196.164,1); border-radius:4px; background:rgba(255,255,255,1); box-shadow:0 10px 24px rgba(67.422,57.345,35.963,0.10196078431372549); transform:rotate(-1.5deg); } .page-ai-solutions #main .d-paper-title { margin-bottom:12px; color:rgba(53.681,45.627,28.536,1); font-size:15px; font-weight:800; letter-spacing:.3em; text-align:center; } .page-ai-solutions #main .d-paper-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid rgba(235.431,232.172,225.258,1); color:rgba(114.809,104.592,82.911,1); font-size:12.5px; } .page-ai-solutions #main .d-paper-total { margin-top:6px; border-top:1.5px solid rgba(173.626,163.883,143.209,1); border-bottom:0; } .page-ai-solutions #main .d-paper-lines { display:grid; gap:7px; padding:10px 0 6px; } .page-ai-solutions #main .d-paper-lines i { display:block; height:6px; border-radius:3px; background:rgba(233.448,229.873,222.288,1); } .page-ai-solutions #main .d-paper-lines i:nth-child(2) { width:80%; } .page-ai-solutions #main .d-paper-lines i:nth-child(3) { width:62%; } .page-ai-solutions #main .d-hl { padding:2px 6px; border:1.5px solid rgba(169.128,137.252,69.612,1); border-radius:3px; background:rgba(248.879,243.084,230.788,1); color:rgba(53.681,45.627,28.536,1); font-size:12.5px; font-weight:700; white-space:nowrap; } .page-ai-solutions #main .d-hl.is-warn { border-style:dashed; border-color:#d07a2c; background:#fbebd9; color:#8a7461; } .page-ai-solutions #main .d-hl::before,.page-ai-solutions #main .d-field span::before { content:attr(data-n); display:inline-grid; place-items:center; width:16px; height:16px; margin-right:5px; border-radius:50%; background:rgba(78.776,65.876,38.504,1); color:rgba(255,255,255,1); font-size:10.5px; font-weight:700; line-height:1; vertical-align:1px; } .page-ai-solutions #main .d-map-mid { position:relative; height:2px; margin:0 8px; background:repeating-linear-gradient(90deg,rgba(153.501,130.57,81.912,1) 0 6px,transparent 6px 11px); } .page-ai-solutions #main .d-map-mid::after { content:""; position:absolute; right:-2px; top:-5px; border:6px solid transparent; border-left:8px solid rgba(153.501,130.57,81.912,1); border-right:0; } .page-ai-solutions #main .d-map-mid span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:4px 7px; border-radius:6px; background:rgba(78.776,65.876,38.504,1); color:rgba(248.217,240.619,224.497,1); font-size:11.5px; font-weight:700; white-space:nowrap; } .page-ai-solutions #main .d-form { padding:14px; border:1px solid rgba(203.586,194.079,173.904,1); border-radius:10px; background:rgba(250.689,249.047,245.565,1); box-shadow:0 10px 24px rgba(67.422,57.345,35.963,0.10196078431372549); } .page-ai-solutions #main .d-form-title { margin-bottom:10px; color:rgba(53.681,45.627,28.536,1); font-size:13.5px; font-weight:800; } .page-ai-solutions #main .d-field { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; margin-top:6px; padding:7px 8px; border:1px solid rgba(222.28,216.338,203.727,1); border-radius:6px; background:rgba(255,255,255,1); font-size:12.5px; } .page-ai-solutions #main .d-field span { color:rgba(117.114,104.116,76.535,1); font-weight:600; white-space:nowrap; } .page-ai-solutions #main .d-field b { overflow:hidden; color:rgba(53.681,45.627,28.536,1); font-weight:700; text-overflow:ellipsis; white-space:nowrap; } .page-ai-solutions #main .d-field em { color:rgba(134.714,106.533,46.734,1); font-style:normal; font-weight:800; } .page-ai-solutions #main .d-field.is-warn { border-color:#e0a467; background:#fdf3e7; } .page-ai-solutions #main .d-field.is-warn em { padding:1px 6px; border-radius:4px; background:#a5541a; color:rgba(255,255,255,1); font-size:11px; } /* 02 현장 촬영 */ .page-ai-solutions #main .d-phone-wrap { display:flex; align-items:center; justify-content:center; gap:30px; } .page-ai-solutions #main .d-phone { flex:none; width:172px; padding:10px; border-radius:26px; background:rgba(42.698,38.486,29.549,1); box-shadow:0 16px 34px rgba(42.698,38.486,29.549,0.25098039215686274); } .page-ai-solutions #main .d-cam { position:relative; display:grid; place-items:center; height:170px; border-radius:18px 18px 6px 6px; background:radial-gradient(circle at 40% 35%,rgba(97.938,92.413,80.69,1),rgba(46.488,43.591,37.442,1) 70%); } .page-ai-solutions #main .d-meter { position:relative; display:grid; place-items:center; width:120px; height:120px; border-radius:50%; background:rgba(237.051,234.647,229.548,1); box-shadow:inset 0 0 0 6px rgba(163.667,158.979,149.032,1),inset 0 0 0 9px rgba(214.552,210.569,202.119,1); } .page-ai-solutions #main .d-digits { display:flex; gap:2px; } .page-ai-solutions #main .d-digits span { display:grid; place-items:center; width:15px; height:22px; background:rgba(38.413,36.158,31.375,1); color:rgba(243.536,241.294,236.536,1); font:700 14px/1 var(--mono); } .page-ai-solutions #main .d-digits .is-red { background:#a33a2a; } .page-ai-solutions #main .d-box { position:absolute; left:50%; top:50%; width:100px; height:38px; transform:translate(-50%,-50%); border:2px dashed rgba(243.282,222.292,177.753,1); border-radius:4px; } .page-ai-solutions #main .d-box em { position:absolute; left:-2px; bottom:100%; margin-bottom:3px; padding:0 5px; border-radius:3px; background:rgba(243.282,222.292,177.753,1); color:rgba(52.102,43.286,24.578,1); font-size:10px; font-style:normal; font-weight:700; line-height:1.6; white-space:nowrap; } .page-ai-solutions #main .d-phone-result { margin-top:8px; padding:10px; border-radius:6px 6px 18px 18px; background:rgba(248.053,245.573,240.31,1); } .page-ai-solutions #main .d-phone-result>span { display:block; color:rgba(117.114,104.116,76.535,1); font-size:11px; font-weight:700; } .page-ai-solutions #main .d-phone-result>b { display:block; color:rgba(52.102,43.286,24.578,1); font:800 22px/1.3 var(--mono); letter-spacing:.08em; } .page-ai-solutions #main .d-phone-result>div { display:flex; gap:6px; margin-top:8px; } .page-ai-solutions #main .d-phone-result i { flex:1; padding:4px 0; border:1px solid rgba(181.896,167.485,136.908,1); border-radius:6px; color:rgba(86.262,74.86,50.665,1); font-size:11px; font-style:normal; font-weight:700; line-height:1.4; text-align:center; } .page-ai-solutions #main .d-phone-result i.is-primary { border-color:rgba(78.776,65.876,38.504,1); background:rgba(78.776,65.876,38.504,1); color:rgba(246.228,242.889,235.802,1); } .page-ai-solutions #main .d-steps { display:grid; margin:0; padding:0; list-style:none; counter-reset:st; } .page-ai-solutions #main .d-steps li { position:relative; padding:0 0 18px 34px; color:rgba(86.262,74.86,50.665,1); font-size:14px; font-weight:600; line-height:22px; counter-increment:st; } .page-ai-solutions #main .d-steps li:last-child { padding-bottom:0; } .page-ai-solutions #main .d-steps li::before { content:counter(st); position:absolute; left:0; top:0; display:grid; place-items:center; width:22px; height:22px; box-sizing:border-box; border:1.5px solid rgba(181.896,167.485,136.908,1); border-radius:50%; background:rgba(255,255,255,1); color:rgba(86.262,74.86,50.665,1); font-size:12px; font-weight:700; line-height:1; } .page-ai-solutions #main .d-steps li:not(:last-child)::after { content:""; position:absolute; left:10px; top:24px; bottom:2px; width:2px; background:rgba(214.449,205.371,186.11,1); } .page-ai-solutions #main .d-steps li.is-ai { color:rgba(52.102,43.286,24.578,1); } .page-ai-solutions #main .d-steps li.is-ai::before { border-color:rgba(169.903,140.889,79.323,1); background:rgba(243.282,222.292,177.753,1); } /* 03 질의응답 + 출처 */ .page-ai-solutions #main .d-chat { display:grid; gap:12px; width:100%; max-width:450px; margin:0 auto; } .page-ai-solutions #main .d-a { display:flex; align-items:flex-start; gap:10px; } .page-ai-solutions #main .d-who { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(243.282,222.292,177.753,1); color:rgba(52.102,43.286,24.578,1); font-size:11px; font-weight:800; } .page-ai-solutions #main .d-a p { padding:10px 14px; border:1px solid rgba(218.682,211.58,196.508,1); border-radius:3px 14px 14px 14px; background:rgba(255,255,255,1); color:rgba(53.681,45.627,28.536,1); font-size:14px; line-height:1.75; } .page-ai-solutions #main .d-a sup,.page-ai-solutions #main .d-src b { display:inline-grid; place-items:center; width:17px; height:17px; margin-left:2px; border-radius:4px; background:rgba(138.348,112.783,58.536,1); color:rgba(255,255,255,1); font-size:10.5px; font-weight:800; line-height:1; vertical-align:2px; } .page-ai-solutions #main .d-src { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-left:40px; } .page-ai-solutions #main .d-src>div { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:2px 8px; padding:9px 10px; border:1px solid rgba(203.586,194.079,173.904,1); border-radius:8px; background:rgba(249.97,247.578,242.504,1); } .page-ai-solutions #main .d-src b { margin:0; } .page-ai-solutions #main .d-src span { color:rgba(53.681,45.627,28.536,1); font-size:13px; font-weight:700; line-height:1.4; } .page-ai-solutions #main .d-src small { grid-column:2; color:rgba(117.114,104.116,76.535,1); font-size:12px; line-height:1.4; } /* 04 문의 분류 */ .page-ai-solutions #main .d-route { display:grid; grid-template-columns:minmax(0,1.3fr) 56px minmax(0,1fr); grid-template-rows:repeat(6,1fr); align-items:center; } .page-ai-solutions #main .d-msg { grid-column:1; margin:3px 0; padding:6px 10px; border:1px solid rgba(222.28,216.338,203.727,1); border-left:4px solid; border-radius:6px; background:rgba(255,255,255,1); color:rgba(67.422,57.345,35.963,1); font-size:12.5px; line-height:1.45; } .page-ai-solutions #main .d-msg.c0 { border-left-color:rgba(78.776,65.876,38.504,1); } .page-ai-solutions #main .d-msg.c1 { border-left-color:rgba(169.903,140.889,79.323,1); } .page-ai-solutions #main .d-msg.c2 { border-left-color:#d07a2c; } .page-ai-solutions #main .d-wires { grid-column:2; grid-row:1/-1; width:100%; height:100%; overflow:visible; } .page-ai-solutions #main .d-wires path { fill:none; stroke-width:2; vector-effect:non-scaling-stroke; } .page-ai-solutions #main .d-wires .c0 { stroke:rgba(78.776,65.876,38.504,1); } .page-ai-solutions #main .d-wires .c1 { stroke:rgba(169.903,140.889,79.323,1); } .page-ai-solutions #main .d-wires .c2 { stroke:#d07a2c; } .page-ai-solutions #main .d-team { grid-column:3; align-self:stretch; display:flex; flex-direction:column; justify-content:center; margin:4px 0; padding:8px 12px; border-radius:10px; color:rgba(255,255,255,1); } .page-ai-solutions #main .d-team.c0 { background:rgba(78.776,65.876,38.504,1); } .page-ai-solutions #main .d-team.c1 { background:rgba(128.56,104.378,53.064,1); } .page-ai-solutions #main .d-team.c2 { background:#a5541a; } .page-ai-solutions #main .d-team b { font-size:14.5px; font-weight:800; line-height:1.4; } .page-ai-solutions #main .d-team span { font-size:12px; line-height:1.5; opacity:.92; } .page-ai-solutions #main .d-team em { align-self:flex-start; margin-top:4px; padding:0 6px; border-radius:4px; background:rgba(255,255,255,1); color:#a5541a; font-size:11px; font-style:normal; font-weight:800; line-height:1.7; } /* 05 외관 검사 */ .page-ai-solutions #main .d-inspect { display:grid; gap:12px; } .page-ai-solutions #main .d-cam-chip { display:flex; align-items:center; gap:10px; color:rgba(106.216,93.142,65.401,1); font-size:12.5px; font-weight:700; } .page-ai-solutions #main .d-cam-chip span { padding:3px 10px; border-radius:999px; background:rgba(78.776,65.876,38.504,1); color:rgba(246.228,242.889,235.802,1); } .page-ai-solutions #main .d-cam-chip i { flex:1; height:2px; background:repeating-linear-gradient(90deg,rgba(181.896,167.485,136.908,1) 0 8px,transparent 8px 14px); } .page-ai-solutions #main .d-items { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; padding:12px; border-radius:10px; background:repeating-linear-gradient(90deg,rgba(221.467,215.545,202.98,1) 0 2px,transparent 2px 22px),rgba(232.16,226.935,215.848,1); list-style:none; } .page-ai-solutions #main .d-items li { display:grid; justify-items:center; gap:4px; padding:8px 6px 6px; border:1.5px solid rgba(207.789,200.284,184.36,1); border-radius:10px; background:rgba(250.689,249.047,245.565,1); } .page-ai-solutions #main .d-items svg { width:100%; max-width:64px; height:auto; } .page-ai-solutions #main .d-items .p { fill:rgba(215.945,211.098,200.813,1); stroke:rgba(157.593,150.465,135.34,1); stroke-width:1.5; } .page-ai-solutions #main .d-items .h { fill:rgba(250.689,249.047,245.565,1); stroke:rgba(157.593,150.465,135.34,1); stroke-width:1.2; } .page-ai-solutions #main .d-items path.s { fill:none; stroke:#7a4a24; stroke-width:2.2; stroke-linecap:round; } .page-ai-solutions #main .d-items circle.s { fill:#7a4a24; } .page-ai-solutions #main .d-items .b { fill:none; stroke:#d07a2c; stroke-width:2; stroke-dasharray:4 3; } .page-ai-solutions #main .d-items span { color:rgba(134.714,106.533,46.734,1); font-size:12px; font-weight:700; } .page-ai-solutions #main .d-items li.is-ng { border-color:#d07a2c; background:#fdf3e7; } .page-ai-solutions #main .d-items li.is-ng span { color:#a5541a; } .page-ai-solutions #main .d-inspect .d-legend { margin-top:0; } .page-ai-solutions #main .d-legend .ok { color:rgba(86.262,74.86,50.665,1); } .page-ai-solutions #main .d-legend .ng { color:rgba(86.262,74.86,50.665,1); } /* 06 CCTV 장면 + 타임라인 */ .page-ai-solutions #main .d-video { display:grid; gap:4px; } .page-ai-solutions #main .d-frame { display:block; width:100%; max-width:520px; height:auto; margin:0 auto; border-radius:8px; } .page-ai-solutions #main .d-frame .bg { fill:rgba(42.758,38.865,30.604,1); } .page-ai-solutions #main .d-frame .ground { stroke:rgba(87.856,82.387,70.782,1); stroke-width:2; } .page-ai-solutions #main .d-frame .fence { fill:none; stroke:rgba(109.775,104,91.747,1); stroke-width:3; } .page-ai-solutions #main .d-frame .zone { fill:#d07a2c33; stroke:#e39a52; stroke-width:2; stroke-dasharray:6 4; } .page-ai-solutions #main .d-frame .zone-t { fill:#f1b77a; font-family:var(--font); font-size:16px; font-weight:700; } .page-ai-solutions #main .d-frame .person,.page-ai-solutions #main .d-frame .car { fill:rgba(179.612,169.598,148.348,1); } .page-ai-solutions #main .d-frame .box { fill:none; stroke:rgba(243.282,222.292,177.753,1); stroke-width:2.5; } .page-ai-solutions #main .d-frame .box.z { stroke:#ffb366; } .page-ai-solutions #main .d-frame .lbl { fill:rgba(243.282,222.292,177.753,1); font-family:var(--font); font-size:16px; font-weight:700; } .page-ai-solutions #main .d-frame .ts { fill:rgba(217.567,212.683,202.32,1); font-family:var(--mono); font-size:14px; font-weight:600; } .page-ai-solutions #main .d-tl { padding:34px 4px 0; } .page-ai-solutions #main .d-tl-bar { position:relative; height:12px; border-radius:6px; background:rgba(222.28,216.338,203.727,1); } .page-ai-solutions #main .d-tl-bar i { position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; box-sizing:border-box; border:2px solid rgba(249.97,247.578,242.504,1); border-radius:50%; } .page-ai-solutions #main .d-tl-bar .m-p { background:rgba(169.903,140.889,79.323,1); } .page-ai-solutions #main .d-tl-bar .m-c { background:rgba(78.776,65.876,38.504,1); } .page-ai-solutions #main .d-tl-bar .m-z { width:16px; height:16px; margin:-8px 0 0 -8px; background:#d07a2c; box-shadow:0 0 0 4px #d07a2c40; } .page-ai-solutions #main .d-tl-call { position:absolute; bottom:calc(100% + 9px); transform:translateX(-50%); padding:2px 8px; border-radius:6px; background:#a5541a; color:rgba(255,255,255,1); font-size:12px; font-weight:700; line-height:1.6; white-space:nowrap; } .page-ai-solutions #main .d-tl-ticks { display:flex; justify-content:space-between; margin-top:6px; color:rgba(117.114,104.116,76.535,1); font-size:11.5px; font-weight:600; } .page-ai-solutions #main .d-video .d-legend { margin-top:8px; } .page-ai-solutions #main .d-legend .m-p { color:rgba(86.262,74.86,50.665,1); } .page-ai-solutions #main .d-legend .m-c { color:rgba(86.262,74.86,50.665,1); } .page-ai-solutions #main .d-legend .m-z { color:rgba(86.262,74.86,50.665,1); } .page-ai-solutions #main .d-legend :is(.m-p,.m-c,.m-z)::before { border-radius:50%; } /* 07 녹음 → 회의록 */ .page-ai-solutions #main .d-voice { display:grid; gap:10px; } .page-ai-solutions #main .d-wave { padding:12px 14px 10px; border:1px solid rgba(218.682,211.58,196.508,1); border-radius:10px; background:rgba(255,255,255,1); } .page-ai-solutions #main .d-wave svg { display:block; width:100%; height:56px; } .page-ai-solutions #main .d-wave svg .s0 { fill:rgba(78.776,65.876,38.504,1); } .page-ai-solutions #main .d-wave svg .s1 { fill:rgba(197.527,176.253,131.11,1); } .page-ai-solutions #main .d-wave p { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; font-size:12px; font-weight:700; line-height:1.6; } .page-ai-solutions #main .d-wave p span { display:inline-flex; align-items:center; gap:6px; } .page-ai-solutions #main .d-wave p .s0 { color:rgba(78.776,65.876,38.504,1); } .page-ai-solutions #main .d-wave p .s1 { color:rgba(138.348,112.783,58.536,1); } .page-ai-solutions #main .d-wave p :is(.s0,.s1)::before { content:""; width:9px; height:9px; border-radius:50%; background:currentColor; } .page-ai-solutions #main .d-wave p .s1::before { background:rgba(197.527,176.253,131.11,1); } .page-ai-solutions #main .d-wave .d-dur { margin-left:auto; color:rgba(117.114,104.116,76.535,1); } .page-ai-solutions #main .d-arrow-down { display:flex; justify-content:center; } .page-ai-solutions #main .d-arrow-down span { padding:3px 12px; border-radius:999px; background:rgba(243.282,222.292,177.753,1); color:rgba(52.102,43.286,24.578,1); font-size:12px; font-weight:800; line-height:1.6; } .page-ai-solutions #main .d-arrow-down span::before { content:"↓ "; } .page-ai-solutions #main .d-minutes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .page-ai-solutions #main .d-minutes>div { padding:12px 14px; border:1px solid rgba(218.682,211.58,196.508,1); border-radius:10px; background:rgba(250.689,249.047,245.565,1); } .page-ai-solutions #main .d-minutes b { display:block; margin-bottom:6px; color:rgba(53.681,45.627,28.536,1); font-size:13px; font-weight:800; } .page-ai-solutions #main .d-minutes ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; } .page-ai-solutions #main .d-minutes li { position:relative; padding-left:14px; color:rgba(67.422,57.345,35.963,1); font-size:12.5px; line-height:1.5; } .page-ai-solutions #main .d-minutes li::before { content:""; position:absolute; left:2px; top:7px; width:5px; height:5px; border-radius:50%; background:rgba(169.903,140.889,79.323,1); } .page-ai-solutions #main .d-minutes .d-todo li { padding-left:20px; } .page-ai-solutions #main .d-minutes .d-todo li::before { left:0; top:3px; width:11px; height:11px; box-sizing:border-box; border:1.5px solid rgba(169.903,140.889,79.323,1); border-radius:3px; background:rgba(255,255,255,1); } .page-ai-solutions #main .d-todo em { display:block; color:rgba(117.114,104.116,76.535,1); font-size:11.5px; font-style:normal; } /* 08 수요 예측 */ .page-ai-solutions #main .d-chart svg { display:block; width:100%; max-width:500px; height:auto; margin:0 auto; overflow:visible; } .page-ai-solutions #main .d-chart .grid { stroke:rgba(222.28,216.338,203.727,1); stroke-width:1; } .page-ai-solutions #main .d-chart .band { fill:rgba(243.282,222.292,177.753,0.6); } .page-ai-solutions #main .d-chart .today { stroke:rgba(157.593,150.465,135.34,1); stroke-width:1.5; stroke-dasharray:4 4; } .page-ai-solutions #main .d-chart .today-t { fill:rgba(106.216,93.142,65.401,1); font-family:var(--font); font-size:14px; font-weight:700; } .page-ai-solutions #main .d-chart .act { fill:none; stroke:rgba(78.776,65.876,38.504,1); stroke-width:3; stroke-linejoin:round; } .page-ai-solutions #main .d-chart .fc { fill:none; stroke:rgba(138.348,112.783,58.536,1); stroke-width:3; stroke-dasharray:7 6; } .page-ai-solutions #main .d-chart .dot { fill:rgba(78.776,65.876,38.504,1); } .page-ai-solutions #main .d-chart .mo { fill:rgba(117.114,104.116,76.535,1); font-family:var(--font); font-size:13px; font-weight:600; } .page-ai-solutions #main .d-chart .d-legend { justify-content:center; } .page-ai-solutions #main .d-legend .l-act { color:rgba(86.262,74.86,50.665,1); } .page-ai-solutions #main .d-legend .l-fc { color:rgba(86.262,74.86,50.665,1); } .page-ai-solutions #main .d-legend .l-band { color:rgba(86.262,74.86,50.665,1); } .page-ai-solutions #main .d-legend .l-act::before { width:16px; height:3px; border-radius:2px; } .page-ai-solutions #main .d-legend .l-fc::before { width:16px; height:0; border-top:3px dashed currentColor; border-radius:0; background:none; } /* 09 설비 히트맵 */ .page-ai-solutions #main .d-heat { display:grid; gap:8px; } .page-ai-solutions #main .d-heat-grid { display:grid; grid-template-columns:52px repeat(12,minmax(0,1fr)); align-items:center; gap:4px; } .page-ai-solutions #main .d-heat-name { color:rgba(86.262,74.86,50.665,1); font-size:12.5px; font-weight:700; white-space:nowrap; } .page-ai-solutions #main .d-heat-name.is-alert { color:#a5541a; } .page-ai-solutions #main .d-heat-grid i { display:block; height:22px; border-radius:4px; } .page-ai-solutions #main .d-heat .l0 { background:rgba(234.126,228.937,217.926,1); } .page-ai-solutions #main .d-heat .l1 { background:rgba(221.477,207.846,178.921,1); } .page-ai-solutions #main .d-heat .l2 { background:rgba(197.527,176.253,131.11,1); } .page-ai-solutions #main .d-heat .l3 { background:#e8b062; } .page-ai-solutions #main .d-heat .l4 { background:#c8692e; } .page-ai-solutions #main .d-heat-axis { display:flex; justify-content:space-between; margin-left:56px; color:rgba(117.114,104.116,76.535,1); font-size:11.5px; font-weight:600; } .page-ai-solutions #main .d-alert { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:6px; padding:10px 12px; border:1.5px solid #d07a2c; border-radius:10px; background:#fdf3e7; } .page-ai-solutions #main .d-alert b { padding:1px 7px; border-radius:4px; background:#a5541a; color:rgba(255,255,255,1); font-size:11.5px; } .page-ai-solutions #main .d-alert p { flex:1 1 180px; color:#5c2f10; font-size:13px; font-weight:600; line-height:1.5; } .page-ai-solutions #main .d-alert span { padding:3px 10px; border-radius:6px; background:rgba(78.776,65.876,38.504,1); color:rgba(246.228,242.889,235.802,1); font-size:12px; font-weight:700; } .page-ai-solutions #main .d-heat-legend { align-items:center; gap:4px; margin-top:2px; } .page-ai-solutions #main .d-heat-legend span::before { display:none; } .page-ai-solutions #main .d-heat-legend span:first-child { margin-right:4px; } .page-ai-solutions #main .d-heat-legend span:last-child { margin-left:4px; } .page-ai-solutions #main .d-heat-legend i { display:block; width:18px; height:12px; border-radius:3px; } /* 10 대화 → 기능 실행 → 결과 */ .page-ai-solutions #main .d-agent { display:grid; gap:10px; width:100%; max-width:460px; margin:0 auto; } .page-ai-solutions #main .d-trace { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0; list-style:none; } .page-ai-solutions #main .d-trace::before { content:"AI 실행"; padding:2px 8px; border-radius:6px; background:rgba(243.282,222.292,177.753,1); color:rgba(52.102,43.286,24.578,1); font-size:11.5px; font-weight:800; line-height:1.6; } .page-ai-solutions #main .d-trace li { padding:2px 9px; border:1px solid rgba(181.896,167.485,136.908,1); border-radius:6px; background:rgba(249.97,247.578,242.504,1); color:rgba(86.262,74.86,50.665,1); font-size:12px; font-weight:600; line-height:1.6; } .page-ai-solutions #main .d-bars { padding:12px 14px; border:1px solid rgba(218.682,211.58,196.508,1); border-radius:10px; background:rgba(255,255,255,1); } .page-ai-solutions #main .d-bars-title { margin-bottom:8px; color:rgba(53.681,45.627,28.536,1); font-size:13px; font-weight:800; } .page-ai-solutions #main .d-bars-title small { margin-left:6px; color:rgba(117.114,104.116,76.535,1); font-size:11.5px; font-weight:600; } .page-ai-solutions #main .d-bars>div { display:grid; grid-template-columns:62px minmax(0,1fr); align-items:center; gap:8px; padding:3px 0; } .page-ai-solutions #main .d-bars span { color:rgba(86.262,74.86,50.665,1); font-size:12px; font-weight:600; } .page-ai-solutions #main .d-bars i { display:block; width:var(--w); height:12px; border-radius:0 4px 4px 0; background:rgba(197.527,176.253,131.11,1); } .page-ai-solutions #main .d-bars>div:nth-of-type(1) i { background:rgba(78.776,65.876,38.504,1); } .page-ai-solutions #main .d-next { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:8px 12px; border:1.5px dashed rgba(181.896,167.485,136.908,1); border-radius:10px; color:rgba(67.422,57.345,35.963,1); font-size:13px; font-weight:600; line-height:1.6; } .page-ai-solutions #main .d-next span { padding:1px 7px; border-radius:4px; background:rgba(238.473,232.401,219.516,1); color:rgba(89.832,72.01,34.192,1); font-size:11px; font-weight:800; } @media (max-width:1000px) { .page-ai-solutions #main .uc-grid { grid-template-columns:1fr; } .page-ai-solutions #main .uc-fig { min-height:0; } } @media (max-width:900px) { .page-ai-solutions #main .uc-index { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:640px) { .page-ai-solutions #main .uc { padding:8px 8px 22px; border-radius:16px; } .page-ai-solutions #main .uc-fig { margin-bottom:18px; padding:40px 14px 16px; } .page-ai-solutions #main .uc-body { padding:0 8px; } .page-ai-solutions #main .uc h3 { font-size:21px; } .page-ai-solutions #main .uc-roles>div { grid-template-columns:36px minmax(0,1fr); gap:8px; padding:8px 10px; } .page-ai-solutions #main .uc-roles dd { font-size:15px; } .page-ai-solutions #main .uc-index a { padding:9px 10px; font-size:14px; } .page-ai-solutions #main .uc-close { padding:18px; } .page-ai-solutions #main .d-map { grid-template-columns:1fr; } .page-ai-solutions #main .d-paper { transform:none; } .page-ai-solutions #main .d-map-mid { width:2px; height:48px; margin:8px auto; background:repeating-linear-gradient(180deg,rgba(153.501,130.57,81.912,1) 0 6px,transparent 6px 11px); } .page-ai-solutions #main .d-map-mid::after { right:auto; left:-5px; top:auto; bottom:-2px; border:6px solid transparent; border-top:8px solid rgba(153.501,130.57,81.912,1); border-bottom:0; } .page-ai-solutions #main .d-src { grid-template-columns:1fr; margin-left:0; } .page-ai-solutions #main .d-route { grid-template-columns:minmax(0,1.35fr) 28px minmax(0,1fr); } .page-ai-solutions #main .d-msg { padding:5px 7px; font-size:12px; } .page-ai-solutions #main .d-team { padding:6px 9px; } .page-ai-solutions #main .d-team b { font-size:13.5px; } .page-ai-solutions #main .d-items { gap:6px; padding:8px; } .page-ai-solutions #main .d-minutes { grid-template-columns:1fr; } .page-ai-solutions #main .d-heat-grid { grid-template-columns:46px repeat(12,minmax(0,1fr)); gap:3px; } .page-ai-solutions #main .d-heat-axis { margin-left:49px; } } @media (max-width:440px) { .page-ai-solutions #main .d-phone-wrap { flex-direction:column; gap:20px; } } /* main.css 의 전역 svg{stroke:currentColor} 가 도표 글자·막대에 테두리를 씌우지 않게 한다 */ .page-ai-solutions #main :is(.d-wires,.d-items svg,.d-frame,.d-wave svg,.d-chart svg) { stroke:none; } /* 휴대폰: SVG 도표가 줄어들어 글자가 너무 작아지지 않게 SVG 안 글자 단위를 키운다 */ @media (max-width:640px) { .page-ai-solutions #main .d-frame .lbl { font-size:24px; } .page-ai-solutions #main .d-frame .zone-t { font-size:21px; } .page-ai-solutions #main .d-frame .ts { font-size:20px; } .page-ai-solutions #main .d-chart :is(.mo,.today-t) { font-size:19px; } .page-ai-solutions #main .d-chart .mo.e { display:none; } } /* 범례: 글자는 진한 색으로 통일하고 색은 표식에만 쓴다(연한 글자색 대비 보완) */ .page-ai-solutions #main .d-legend span { color:rgba(86.262,74.86,50.665,1); } .page-ai-solutions #main .d-legend .ok::before { background:rgba(134.714,106.533,46.734,1); } .page-ai-solutions #main .d-legend .ng::before { background:#a5541a; } .page-ai-solutions #main .d-legend .m-p::before { background:rgba(169.903,140.889,79.323,1); } .page-ai-solutions #main .d-legend .m-c::before { background:rgba(78.776,65.876,38.504,1); } .page-ai-solutions #main .d-legend .m-z::before { background:#d07a2c; } .page-ai-solutions #main .d-legend .l-act::before { background:rgba(78.776,65.876,38.504,1); } .page-ai-solutions #main .d-legend .l-fc::before { border-top-color:rgba(138.348,112.783,58.536,1); } .page-ai-solutions #main .d-legend .l-band::before { background:rgba(226.832,205.315,159.656,1); }