kyeongmin
9fbe3ac90c
전체 401 files (397 추가 + 4 수정), 14304 insertions.
추가:
- figma_to_html_agent/blocks/ — Figma 변환 결과 (32 frame, ~79MB).
각 frame folder = {analysis.md, flat.md, texts.md, index.html, assets/,
_renders/, _render.py, RELATIONSHIPS.md / STATUS.md / classification.md
(일부 frame)}.
Phase Z 의 *figma source layer* — runtime 에서 직접 사용 X, contract /
partial / builder adapter (미래 axis A) 의 source.
- figma_to_html_agent/DISCUSSION-SUMMARY-20260411.md — 변환 설계 회의 기록.
- figma_to_html_agent/HARNESS.md — 변환 검증 harness.
- figma_to_html_agent/scripts/fetch_figma_screenshots.py — Figma 스크린샷 자동 수집.
수정:
- figma_to_html_agent/PROCESS-CONTROL.md / PROCESS.md / RULES.md —
변환 프로세스 / 룰 갱신 (R8/R9 lock 강화 등).
- figma_to_html_agent/blocks_index.md — 32 frame 인덱스 갱신.
Phase Z 영향 0 (figma_to_html_agent/blocks/ 가 V4 catalog +
templates/phase_z2/families adapter 의 source — runtime 에서 직접 import X).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
510 lines
20 KiB
HTML
510 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>건설산업의 목표 (Frame 1171281189)</title>
|
||
<!--
|
||
Frame: 100:65, 2195.205×1194.998 px
|
||
Scale: 1280 / 2195.205 = 0.58312
|
||
패턴: cycle-3way-intersect (3원 교차 다이어그램)
|
||
MCP: Figma Desktop Dev Mode (2026-04-16)
|
||
텍스트 노드: 31개 전수 반영
|
||
시각 속성: blend mode, opacity, inset, rotate 래퍼 전수 반영
|
||
원(circle): SVG→CSS div 변환 완료 (R9 순수 CSS, R10 multiply, R11 stroke, R12 viewBox remap)
|
||
-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { margin:0; padding:0; box-sizing:border-box; }
|
||
body {
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
background: #e8ecf0;
|
||
display: flex; justify-content: center; align-items: center;
|
||
min-height: 100vh; word-break: keep-all;
|
||
}
|
||
.slide {
|
||
width: 1280px;
|
||
background: #fff; position: relative;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||
}
|
||
.block { width: 1280px; position: relative; overflow: hidden; }
|
||
.inner {
|
||
width: 2195.205px; height: 1194.998px;
|
||
zoom: 0.58312; /* R19 */
|
||
position: relative;
|
||
}
|
||
|
||
/* ── 타이틀 ── */
|
||
/* 100:131: (75, 0) 984×98, 70px Bold, gradient(#000→#883700), text-shadow 0 0 4px #322c1e */
|
||
.title-text {
|
||
position: absolute; left: 75px; top: 0; width: 984px; height: 98px;
|
||
font-weight: 700; font-size: 70px; line-height: normal;
|
||
background-image: linear-gradient(rgb(0,0,0) 0%, rgb(136,55,0) 100%);
|
||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||
text-shadow: 0 0 4px #322c1e;
|
||
}
|
||
|
||
/* ── 배경 텍스처 ── */
|
||
/* 100:70: (272, 921) 1768×274, mix-blend-mode: multiply */
|
||
.bg-texture {
|
||
position: absolute; left: 272px; top: 921px;
|
||
width: 1768px; height: 274px;
|
||
mix-blend-mode: multiply; pointer-events: none;
|
||
}
|
||
.bg-texture img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
/* ── 장식 rect 1: 100:68 ──
|
||
MCP: flex container (984, 77) 351×727, 안에 rotate(-90deg)
|
||
내부: bg-gradient-to-r from rgba(217,162,104,0.33) 37.229% to rgba(220,103,14,0) 89.34%
|
||
border-radius: 175.5px 0 0 175.5px (좌측만 둥글게)
|
||
원본 rect: 727×351 → rotate(-90deg)로 세로 배치 */
|
||
.deco-1-wrap {
|
||
position: absolute;
|
||
left: 984px; top: 77px;
|
||
width: 351px; height: 727px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.deco-1-rot { flex: none; transform: rotate(-90deg); }
|
||
.deco-1 {
|
||
width: 727px; height: 351px;
|
||
background: linear-gradient(to right, rgba(217,162,104,0.33) 37.229%, rgba(220,103,14,0) 89.34%);
|
||
border-radius: 175.5px 0 0 175.5px;
|
||
}
|
||
|
||
/* ── 장식 rect 2: 100:69 ──
|
||
MCP: flex container (1150, 721) 652.795×352.936, 안에 rotate(90deg)
|
||
내부: bg-gradient-to-t from rgba(96,164,81,0.33) to rgba(37,62,31,0) 79.345%
|
||
border-radius: 0 0 238px 238px */
|
||
.deco-2-wrap {
|
||
position: absolute;
|
||
left: 1150px; top: 721px;
|
||
width: 652.795px; height: 352.936px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.deco-2-rot { flex: none; transform: rotate(90deg); }
|
||
.deco-2 {
|
||
width: 352.936px; height: 652.795px;
|
||
background: linear-gradient(to top, rgba(96,164,81,0.33), rgba(37,62,31,0) 79.345%);
|
||
border-radius: 0 0 238px 238px;
|
||
}
|
||
|
||
/* ── 장식 rect 3: 100:71 ──
|
||
MCP: flex container (415, 718) 763×351, rotate(180deg) + scaleY(-1)
|
||
내부: gradient(235.162deg, rgba(115,115,115,0) 14.18%, rgba(213,170,137,0.33) 66.964%)
|
||
border-radius: 175.5px 0 0 175.5px */
|
||
.deco-3-wrap {
|
||
position: absolute;
|
||
left: 415px; top: 718px;
|
||
width: 763px; height: 351px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.deco-3-rot { flex: none; transform: scaleY(-1) rotate(180deg); }
|
||
.deco-3 {
|
||
width: 763px; height: 351px;
|
||
background: linear-gradient(235.162deg, rgba(115,115,115,0) 14.18%, rgba(213,170,137,0.33) 66.964%);
|
||
border-radius: 175.5px 0 0 175.5px;
|
||
}
|
||
|
||
/* ── 아크 3개 (이미지, 곡선 CSS 불가) ── */
|
||
/* 100:102: flex(1059,372) 209×99, rotate(180deg) */
|
||
.arc-top-wrap {
|
||
position: absolute; left: 1059px; top: 372px;
|
||
width: 209px; height: 99px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.arc-top-rot { flex: none; transform: rotate(180deg); }
|
||
.arc-top-rot img { width: 209px; height: 99px; display: block; }
|
||
|
||
/* 100:103: flex(760,787) 99×209, rotate(90deg) */
|
||
.arc-left-wrap {
|
||
position: absolute; left: 760px; top: 787px;
|
||
width: 99px; height: 209px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.arc-left-rot { flex: none; transform: rotate(90deg); }
|
||
.arc-left-rot img { width: 209px; height: 99px; display: block; }
|
||
|
||
/* 100:112: flex(1462,787) 99×209, rotate(-90deg) */
|
||
.arc-right-wrap {
|
||
position: absolute; left: 1462px; top: 787px;
|
||
width: 99px; height: 209px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.arc-right-rot { flex: none; transform: rotate(-90deg); }
|
||
.arc-right-rot img { width: 209px; height: 99px; display: block; }
|
||
|
||
/* ── 메인 3원 (CSS div, R9: 순수 CSS 우선, R10: plus-darker→multiply) ── */
|
||
/* outer: 350×350, gradient + mix-blend-mode:multiply */
|
||
/* inner: gradient + border(white) + box-shadow(drop shadow) */
|
||
|
||
/* 100:77 안전과품질 outer: (986, 444) 350×350, gradient_math.py 변환 */
|
||
.co-safety {
|
||
position: absolute; left: 986px; top: 444px;
|
||
width: 350px; height: 350px; border-radius: 50%;
|
||
background: linear-gradient(145.28deg, #FDC69E 16.04%, #E0782C 55.20%);
|
||
mix-blend-mode: multiply; z-index: 3;
|
||
}
|
||
/* 100:78 안전 inner: fill 280 at (1020.06,478.06), stroke 5px outside (R11 케이스A) */
|
||
.ci-safety {
|
||
position: absolute; left: 1015.06px; top: 473.06px;
|
||
width: 290px; height: 290px; border-radius: 50%;
|
||
background: linear-gradient(145.28deg, #BC652B 16.04%, #A24200 55.20%);
|
||
border: 5px solid white; box-sizing: border-box;
|
||
box-shadow: 0 0 10px rgba(0,0,0,1); z-index: 4;
|
||
}
|
||
|
||
/* 100:73 생산성향상 outer: (827, 718) 350×350 */
|
||
.co-prod {
|
||
position: absolute; left: 827px; top: 718px;
|
||
width: 350px; height: 350px; border-radius: 50%;
|
||
background: linear-gradient(218.84deg, #D5AA89 14.08%, #737373 92.67%);
|
||
mix-blend-mode: multiply; z-index: 3;
|
||
}
|
||
/* 100:74 생산성 inner: fill 280 at (861.06,752.06), stroke 5px inside (R11 케이스B) */
|
||
.ci-prod {
|
||
position: absolute; left: 861.06px; top: 752.06px;
|
||
width: 280px; height: 280px; border-radius: 50%;
|
||
background: linear-gradient(153.95deg, #897445 15.27%, #3E3523 61.74%);
|
||
background-origin: border-box; background-clip: border-box;
|
||
border: 5px solid white; box-sizing: border-box;
|
||
box-shadow: 0 0 10px rgba(0,0,0,1); z-index: 4;
|
||
}
|
||
|
||
/* 100:81 소통과신뢰 outer: (1142, 718) 350×350 */
|
||
.co-trust {
|
||
position: absolute; left: 1142px; top: 718px;
|
||
width: 350px; height: 350px; border-radius: 50%;
|
||
background: linear-gradient(145.90deg, #FFFFFF 8.47%, #253E1F 87.56%);
|
||
mix-blend-mode: multiply; z-index: 3;
|
||
}
|
||
/* 100:82 소통 inner: fill 280 at (1176.06,752.06), stroke 5px inside (R11 케이스B) */
|
||
.ci-trust {
|
||
position: absolute; left: 1176.06px; top: 752.06px;
|
||
width: 280px; height: 280px; border-radius: 50%;
|
||
background: linear-gradient(153.95deg, #296B55 15.27%, #123328 61.74%);
|
||
background-origin: border-box; background-clip: border-box;
|
||
border: 5px solid white; box-sizing: border-box;
|
||
box-shadow: 0 0 10px rgba(0,0,0,1); z-index: 4;
|
||
}
|
||
|
||
/* 메인 원 라벨: translate(-50%, -50%) 기반 중앙 배치 */
|
||
.main-label {
|
||
position: absolute;
|
||
font-weight: 700; font-size: 50px; line-height: 50px;
|
||
color: #fff; text-align: center; letter-spacing: -2.5px;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 5;
|
||
}
|
||
/* 100:79: center(1160.92, 625.53) 263×114, text-shadow 0 0 5px #cc5200 */
|
||
.label-safety { left: 1160.92px; top: 625.53px; width: 262.923px; height: 114.078px; text-shadow: 0 0 5px #cc5200; }
|
||
/* 100:75: center(1001.92, 899.53) */
|
||
.label-prod { left: 1001.92px; top: 899.53px; width: 262.923px; height: 114.078px; }
|
||
/* 100:83: center(1318.09, 892.49) */
|
||
.label-trust { left: 1318.09px; top: 892.49px; width: 262.923px; height: 114.078px; }
|
||
|
||
/* ── 액센트 6원 (CSS div, R9/R10) ── */
|
||
/* outer: 130.901, gradient + opacity:0.3 + mix-blend-mode:multiply */
|
||
/* inner: ~83px, gradient + border 2px white + box-shadow */
|
||
|
||
/* 安 outer: (992, 260) 130.901 */
|
||
.aco-an {
|
||
position: absolute; left: 992px; top: 260px;
|
||
width: 130.901px; height: 130.901px; border-radius: 50%;
|
||
background: linear-gradient(145.90deg, #D9C868 8.47%, #DC670E 87.56%);
|
||
opacity: 0.3; mix-blend-mode: multiply; z-index: 6;
|
||
}
|
||
/* 安 inner: fill 79 at (1017.47,285.47), stroke 2px outside (R11 케이스A) */
|
||
.aci-an {
|
||
position: absolute; left: 1015.47px; top: 283.47px;
|
||
width: 82.965px; height: 82.965px; border-radius: 50%;
|
||
background: linear-gradient(145.28deg, #BC652B 16.04%, #A24200 55.20%);
|
||
border: 2px solid white; box-sizing: border-box;
|
||
box-shadow: 0 0 10px rgba(0,0,0,1); z-index: 7;
|
||
}
|
||
|
||
/* 質 outer: (1204, 260) 130.901 */
|
||
.aco-jil {
|
||
position: absolute; left: 1204px; top: 260px;
|
||
width: 130.901px; height: 130.901px; border-radius: 50%;
|
||
background: linear-gradient(145.90deg, #D9C868 8.47%, #DC670E 87.56%);
|
||
opacity: 0.3; mix-blend-mode: multiply; z-index: 6;
|
||
}
|
||
/* 質 inner: (1229.47,285.47) */
|
||
.aci-jil {
|
||
position: absolute; left: 1227.47px; top: 283.47px;
|
||
width: 82.965px; height: 82.965px; border-radius: 50%;
|
||
background: linear-gradient(145.28deg, #BC652B 16.04%, #A24200 55.20%);
|
||
border: 2px solid white; box-sizing: border-box;
|
||
box-shadow: 0 0 10px rgba(0,0,0,1); z-index: 7;
|
||
}
|
||
|
||
/* 速 outer: (688, 721) 130.901 */
|
||
.aco-sok {
|
||
position: absolute; left: 688px; top: 721px;
|
||
width: 130.901px; height: 130.901px; border-radius: 50%;
|
||
background: linear-gradient(218.84deg, #D5AA89 14.08%, #737373 92.67%);
|
||
opacity: 0.3; mix-blend-mode: multiply; z-index: 6;
|
||
}
|
||
/* 速 inner: (713.47,746.47) */
|
||
.aci-sok {
|
||
position: absolute; left: 711.47px; top: 744.47px;
|
||
width: 82.965px; height: 82.965px; border-radius: 50%;
|
||
background: linear-gradient(153.95deg, #897445 15.27%, #3E3523 61.73%);
|
||
border: 2px solid white; box-sizing: border-box;
|
||
box-shadow: 0 0 10px rgba(0,0,0,1); z-index: 7;
|
||
}
|
||
|
||
/* 利 outer: (688, 927) 130.901 */
|
||
.aco-ri {
|
||
position: absolute; left: 688px; top: 927px;
|
||
width: 130.901px; height: 130.901px; border-radius: 50%;
|
||
background: linear-gradient(218.84deg, #D5AA89 14.08%, #737373 92.67%);
|
||
opacity: 0.3; mix-blend-mode: multiply; z-index: 6;
|
||
}
|
||
/* 利 inner: (713.47,952.47) */
|
||
.aci-ri {
|
||
position: absolute; left: 711.47px; top: 950.47px;
|
||
width: 82.965px; height: 82.965px; border-radius: 50%;
|
||
background: linear-gradient(153.95deg, #897445 15.27%, #3E3523 61.73%);
|
||
border: 2px solid white; box-sizing: border-box;
|
||
box-shadow: 0 0 10px rgba(0,0,0,1); z-index: 7;
|
||
}
|
||
|
||
/* 通 outer: (1505, 721) 130.901 */
|
||
.aco-tong {
|
||
position: absolute; left: 1505px; top: 721px;
|
||
width: 130.901px; height: 130.901px; border-radius: 50%;
|
||
background: linear-gradient(145.90deg, #60A451 8.47%, #253E1F 87.56%);
|
||
opacity: 0.3; mix-blend-mode: multiply; z-index: 6;
|
||
}
|
||
/* 通 inner: (1530.47,746.47) */
|
||
.aci-tong {
|
||
position: absolute; left: 1528.47px; top: 744.47px;
|
||
width: 82.965px; height: 82.965px; border-radius: 50%;
|
||
background: linear-gradient(153.95deg, #296B55 15.27%, #123328 61.73%);
|
||
border: 2px solid white; box-sizing: border-box;
|
||
box-shadow: 0 0 10px rgba(0,0,0,1); z-index: 7;
|
||
}
|
||
|
||
/* 信 outer: (1505, 927) 130.901 */
|
||
.aco-sin {
|
||
position: absolute; left: 1505px; top: 927px;
|
||
width: 130.901px; height: 130.901px; border-radius: 50%;
|
||
background: linear-gradient(145.90deg, #60A451 8.47%, #253E1F 87.56%);
|
||
opacity: 0.3; mix-blend-mode: multiply; z-index: 6;
|
||
}
|
||
/* 信 inner: (1530.47,952.47) */
|
||
.aci-sin {
|
||
position: absolute; left: 1528.47px; top: 950.47px;
|
||
width: 82.965px; height: 82.965px; border-radius: 50%;
|
||
background: linear-gradient(153.95deg, #296B55 15.27%, #123328 61.73%);
|
||
border: 2px solid white; box-sizing: border-box;
|
||
box-shadow: 0 0 10px rgba(0,0,0,1); z-index: 7;
|
||
}
|
||
|
||
/* 한자 텍스트: translate(-50%, -50%) 기반 */
|
||
.acc-text {
|
||
position: absolute;
|
||
font-weight: 700; font-size: 45px; line-height: 50px;
|
||
color: #fff; text-align: center; letter-spacing: -2.25px;
|
||
text-shadow: 0 0 5px #cc5200;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 8;
|
||
}
|
||
/* MCP 좌표: center(x, y) */
|
||
.text-an { left: 1057.42px; top: 322.94px; width: 98.334px; height: 42.666px; }
|
||
.text-jil { left: 1269.42px; top: 322.94px; width: 98.334px; height: 42.666px; }
|
||
.text-sok { left: 753.42px; top: 783.94px; width: 98.334px; height: 42.666px; }
|
||
.text-ri { left: 753.42px; top: 989.94px; width: 98.334px; height: 42.666px; }
|
||
.text-tong { left: 1570.42px; top: 783.94px; width: 98.334px; height: 42.666px; }
|
||
.text-sin { left: 1570.42px; top: 989.94px; width: 98.334px; height: 42.666px; }
|
||
|
||
/* ── 사이드 라벨 ── */
|
||
.side-title {
|
||
position: absolute;
|
||
font-weight: 700; font-size: 40px; line-height: 95px;
|
||
white-space: nowrap; z-index: 5;
|
||
}
|
||
.side-desc {
|
||
position: absolute;
|
||
font-weight: 500; font-size: 30px; color: #525151; z-index: 5;
|
||
}
|
||
.side-desc p { line-height: 35px; }
|
||
|
||
/* 상단좌: 안전성 제고 — 100:101 translate-x-full right-align, (972, 238) */
|
||
.st-safety-title { right: calc(2195.205px - 972px); top: 238px; text-align: right; color: #cc5200; }
|
||
/* 100:100: translate-x-full (972.48, 316) 508×91, right-align */
|
||
.st-safety-desc { right: calc(2195.205px - 972.48px); top: 316px; width: 508.478px; text-align: right; }
|
||
|
||
/* 상단우: 품질 향상 — 100:98 translate-x-full right-align, (1523, 238) */
|
||
.st-quality-title { right: calc(2195.205px - 1523px); top: 238px; text-align: right; color: #cc5200; }
|
||
/* 100:97: (1366, 316) 508×91 */
|
||
.st-quality-desc { left: 1366px; top: 316px; width: 508.478px; }
|
||
|
||
/* 좌상: 신속정확성 증진 — 100:92 translate-x-full (664.39, 694) 531×95, right-align, #604f32 */
|
||
.sl-speed-title { right: calc(2195.205px - 664.39px); top: 694px; width: 531.393px; text-align: right; color: #604f32; }
|
||
/* 100:91: translate-x-full (663.74, 784) 479×71 */
|
||
.sl-speed-desc { right: calc(2195.205px - 663.74px); top: 784px; width: 478.731px; text-align: right; }
|
||
|
||
/* 좌하: 비용저감부가가치 — 100:95 translate(-100%,-50%) (663.72, 948.21) 446×96, #604f32 */
|
||
.sl-cost-title { right: calc(2195.205px - 663.72px); top: 900px; width: 446.033px; text-align: right; color: #604f32; }
|
||
/* 100:94: translate(-100%,-50%) (663.3, 1017.67) 428×91 */
|
||
.sl-cost-desc { right: calc(2195.205px - 663.3px); top: 972px; width: 428.298px; text-align: right; }
|
||
|
||
/* 우상: 소통이해 원할 — 100:89 (1651, 694), #124133 */
|
||
.sr-comm-title { left: 1651px; top: 694px; color: #124133; }
|
||
/* 100:88: (1651, 779) */
|
||
.sr-comm-desc { left: 1651px; top: 779px; }
|
||
|
||
/* 우하: 신뢰투명성 강화 — 100:86 (1651, 902), #124133 */
|
||
.sr-trust-title { left: 1651px; top: 902px; color: #124133; }
|
||
/* 100:85: translate-y-50% (1651.01, 1027.49) 544×71 */
|
||
.sr-trust-desc { left: 1651.01px; top: 982px; width: 544.19px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- 타이틀: 100:131 -->
|
||
<div class="title-text">건설산업의 목표 (BIM의 목적)</div>
|
||
|
||
<!-- 배경 텍스처: 100:70, mix-blend-mode: multiply -->
|
||
<div class="bg-texture"><img src="assets/849658071be46a26936e8666e3722b2dd548aee7.png" alt=""></div>
|
||
|
||
<!-- 장식 rect 1: 100:68, 래퍼 rotate(-90deg) -->
|
||
<div class="deco-1-wrap">
|
||
<div class="deco-1-rot">
|
||
<div class="deco-1"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 장식 rect 2: 100:69, 래퍼 rotate(90deg) -->
|
||
<div class="deco-2-wrap">
|
||
<div class="deco-2-rot">
|
||
<div class="deco-2"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 장식 rect 3: 100:71, 래퍼 scaleY(-1) rotate(180deg) -->
|
||
<div class="deco-3-wrap">
|
||
<div class="deco-3-rot">
|
||
<div class="deco-3"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 아크 상단: 100:102, 래퍼 rotate(180deg) -->
|
||
<div class="arc-top-wrap">
|
||
<div class="arc-top-rot">
|
||
<img src="assets/f05ebf15a1125b6c5809f9ffa35b4e4e750687d3.png" alt="">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 아크 좌측: 100:103, 래퍼 rotate(90deg) -->
|
||
<div class="arc-left-wrap">
|
||
<div class="arc-left-rot">
|
||
<img src="assets/2f0f17507c681b7bc2fb109f3d4fafb9ff2f7ce0.png" alt="">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 아크 우측: 100:112, 래퍼 rotate(-90deg) -->
|
||
<div class="arc-right-wrap">
|
||
<div class="arc-right-rot">
|
||
<img src="assets/2f0f17507c681b7bc2fb109f3d4fafb9ff2f7ce0.png" alt="">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 메인 3원 (CSS div, R9: 순수 CSS 우선, R10: plus-darker→multiply) -->
|
||
<!-- 안전과품질: 100:77 outer, 100:78 inner, 100:79 label -->
|
||
<div class="co-safety"></div>
|
||
<div class="ci-safety"></div>
|
||
<div class="main-label label-safety"><p>안전과</p><p>품질</p></div>
|
||
|
||
<!-- 생산성향상: 100:73 outer, 100:74 inner, 100:75 label -->
|
||
<div class="co-prod"></div>
|
||
<div class="ci-prod"></div>
|
||
<div class="main-label label-prod"><p>생산성</p><p>향상</p></div>
|
||
|
||
<!-- 소통과신뢰: 100:81 outer, 100:82 inner, 100:83 label -->
|
||
<div class="co-trust"></div>
|
||
<div class="ci-trust"></div>
|
||
<div class="main-label label-trust"><p>소통과</p><p>신뢰</p></div>
|
||
|
||
<!-- 액센트 6원 (CSS div, R9/R10) -->
|
||
<!-- 安: 100:113 outer, 100:115 inner, 100:116 text -->
|
||
<div class="aco-an"></div>
|
||
<div class="aci-an"></div>
|
||
<div class="acc-text text-an">安</div>
|
||
|
||
<!-- 質: 100:117 outer, 100:119 inner, 100:120 text -->
|
||
<div class="aco-jil"></div>
|
||
<div class="aci-jil"></div>
|
||
<div class="acc-text text-jil">質</div>
|
||
|
||
<!-- 速: 100:104 outer, 100:106 inner, 100:107 text -->
|
||
<div class="aco-sok"></div>
|
||
<div class="aci-sok"></div>
|
||
<div class="acc-text text-sok">速</div>
|
||
|
||
<!-- 利: 100:108 outer, 100:110 inner, 100:111 text -->
|
||
<div class="aco-ri"></div>
|
||
<div class="aci-ri"></div>
|
||
<div class="acc-text text-ri">利</div>
|
||
|
||
<!-- 通: 100:121 outer, 100:123 inner, 100:124 text -->
|
||
<div class="aco-tong"></div>
|
||
<div class="aci-tong"></div>
|
||
<div class="acc-text text-tong">通</div>
|
||
|
||
<!-- 信: 100:125 outer, 100:127 inner, 100:128 text -->
|
||
<div class="aco-sin"></div>
|
||
<div class="aci-sin"></div>
|
||
<div class="acc-text text-sin">信</div>
|
||
|
||
<!-- 사이드 라벨 — 상단 -->
|
||
<div class="side-title st-safety-title">안전성 제고</div>
|
||
<div class="side-desc st-safety-desc">
|
||
<p>시설물의 요구성능의 만족,</p>
|
||
<p>건설중 및 운영중 안전확보</p>
|
||
</div>
|
||
|
||
<div class="side-title st-quality-title">품질 향상</div>
|
||
<div class="side-desc st-quality-desc">
|
||
<p>Copy & Paste로 하향 평준화된</p>
|
||
<p>기존 성과물의 품질 향상</p>
|
||
</div>
|
||
|
||
<!-- 사이드 라벨 — 좌측 -->
|
||
<div class="side-title sl-speed-title">신속ㆍ정확성 증진</div>
|
||
<div class="side-desc sl-speed-desc">
|
||
<p>Analogue 기반 업무를</p>
|
||
<p>Digital화 하는 Process 혁신</p>
|
||
</div>
|
||
|
||
<div class="side-title sl-cost-title">비용저감ㆍ부가가치 창출</div>
|
||
<div class="side-desc sl-cost-desc">
|
||
<p>건설비용 및 유지관리비 감소,</p>
|
||
<p>인력투입 최소화 등 생산성 향상</p>
|
||
</div>
|
||
|
||
<!-- 사이드 라벨 — 우측 -->
|
||
<div class="side-title sr-comm-title">소통ㆍ이해 원할</div>
|
||
<div class="side-desc sr-comm-desc">
|
||
<p>성과품, Solution을 통한</p>
|
||
<p>사용 편리성, 협업 및 의사소통 강화</p>
|
||
</div>
|
||
|
||
<div class="side-title sr-trust-title">신뢰ㆍ투명성 강화</div>
|
||
<div class="side-desc sr-trust-desc">
|
||
<p>3D 모델을 통한 오류</p>
|
||
<p>최소화 및 Claim 예방</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|