@charset "utf-8"; /*** 조직도 ***/ .orzCont { overflow: hidden; position: relative; z-index: 0; isolation: isolate; } /* 조직도 list-info 중앙 정렬 */ .orzCont .list-info { display: table; margin-right: auto; margin-left: auto; } /* line/dot primitives */ .orzCont [class*=line-] { position: relative; } .orzCont [class*=line-]:after { display: block; position: absolute; background: var(--orz-line); content: ''; } .orzCont [class*=dot] { position: relative; } .orzCont .line-y:after { top: 40px; left: 50%; z-index: -1; width: 1px; height: 300px; } .orzCont .cont2 .line-y:after { top: 38px; height: 21px; } .orzCont .cont2 .line-r:after { top: 50%; right: -40%; width: 40%; height: 1px; } .orzCont .cont2 .line-l:after { top: 50%; left: -65px; width: 65px; height: 1px; } .orzCont .cont2 .line-l.after_none:after { display: none; } .orzCont .cont2 .line-r.dot:before { margin: -3px -3px 0 0; top: 50%; right: 0; } .orzCont .cont2 .line-l.dot:before { margin: -3px 0 0 -3px; top: 50%; left: 0; } .orzCont .cont3.dot:before { margin: 0 -3px 0 0; top: -2px; right: 50%; } /* layout */ .orzCont .cont2 { display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 0 !important; } .orzCont .cont2 [class*=obox-] { width: auto; } .orzCont .cont2 .obox-white2 { width: 36%; height: 24px; } .orzCont .cont2 .obox-white2:after { top: 50%; right: -30px; width: 30px; height: 1px; } .orzCont .cont2 dl dt { width: 100%; } .orzCont .cont2 dl dd { padding: 10px 3px; border-top: 0; border-radius: 0 0 10px 10px; } .orzCont .cont2 .cont3 { width: 36%; min-width: 0; } .orzCont .cont2 .audit-branch { width: 40%; min-width: 0; } .orzCont .audit-branch .one_box { margin-bottom: 0; } /* Keep side padding for standalone header boxes like 비서실/상임감사위원 */ .orzCont .line-y>.obox-red.first { width: 40%; margin-left: auto; margin-right: auto; } .orzCont .cont3 { border-radius: 10px; } .orzCont .cont3.another { padding: 0; margin-top: 28px; } .orzCont .cont3 .con3_inner { display: block; width: 100%; } .orzCont .con3_inner.no-mb .one_box { margin-bottom: 0; } /* Keep org-chart text inside boxes on narrow widths */ .orzCont [class*=obox-], .orzCont .one_box dt, .orzCont .one_box dd, .orzCont .one_box a, .orzCont .list-info li { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } /* Keep list bullet anchored to the first line when item text wraps */ .orzCont .list-info li { position: relative; margin-left: 0; padding-left: 12px; } .orzCont .list-info li::before { position: absolute; top: 0.65em; left: 0; margin: 0; transform: translateY(-50%); } .orzCont .first { margin-bottom: 20px; } .orzCont .first.dot:before { margin: 0 -3px 0 0; right: 50%; bottom: -5px; } /*** //조직도 ***/ /*** 사이트맵 ***/ .sitemap-menu {} .sitemap-group {} .sitemap-group__title { margin: 1px -24px; padding: 16px 24px; background: var(--surface-soft); font-size: 2rem; font-weight: 700; } .sitemap-menu .sitemap-list { margin: 0; padding: 12px 0px 16px; list-style: none; } /* 1depth direct links should match 1depth menu summary style */ .sitemap-menu>.mobile-menu__depth1-link { margin: 1px -24px; padding: 16px 24px; border-bottom: unset; background: var(--surface-soft); font-size: 2rem; font-weight: 700; } .sitemap-menu>.mobile-menu__depth1-link.is-external { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin: 1px -24px; } .sitemap-menu .sitemap-list--d3 { padding: 2px 0 2px 14px; } .sitemap-menu .sitemap-list--d4 { padding: 0px 0 0 14px; } .sitemap-menu .sitemap-list--d5 { padding: 0px 0 0 14px; } .sitemap-item+.sitemap-item { margin-top: 4px; padding-top: 4px; } .sitemap-title, .sitemap-menu a.sitemap-title { display: block; padding: 6px 14px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: 1.8rem; font-weight: 600; color: #243140; } .sitemap-menu a.sitemap-title.is-external { display: flex; gap: 8px; align-items: center; justify-content: space-between; } /* Keep 3~5depth external links aligned with depth markers */ .sitemap-menu .sitemap-list--d3 a.is-external, .sitemap-menu .sitemap-list--d4 a.is-external, .sitemap-menu .sitemap-list--d5 a.is-external { gap: 6px; justify-content: flex-start; } .sitemap-menu .sitemap-list--d3 a.is-external::after, .sitemap-menu .sitemap-list--d4 a.is-external::after, .sitemap-menu .sitemap-list--d5 a.is-external::after { margin-left: auto; } .sitemap-label { display: block; padding: 6px 0; font-weight: 500; color: #3b4a5a; } .sitemap-menu .sitemap-list--d3 .sitemap-label, .sitemap-menu .sitemap-list--d4 .sitemap-label, .sitemap-menu .sitemap-list--d5 .sitemap-label, .sitemap-menu .sitemap-list--d3 .sitemap-item>a, .sitemap-menu .sitemap-list--d4 .sitemap-item>a, .sitemap-menu .sitemap-list--d5 .sitemap-item>a { padding: 3px 0; } .sitemap-item a { display: block; font-weight: 500; color: #3b4a5a; } .sitemap-item ul li a::before, .sitemap-item ul li span::before { display: inline-block; margin-right: 4px; color: #3b4a5a; content: '\2022'; } /* 건설사업 개요 */ .biz-flow { position: relative; max-width: 32rem; margin: 2.4rem auto 0; padding: 0 0.8rem; } .biz-flow__main { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2rem; } .biz-flow__step { position: relative; display: flex; align-items: center; justify-content: center; width: 18rem; min-height: 6rem; padding: 1rem 1.4rem; border-radius: 0.8rem; box-sizing: border-box; background: #fff; color: var(--brand); border: 1px solid var(--brand); font-size: 1.6rem; font-weight: 600; line-height: 1.4; text-align: center; word-break: keep-all; } .biz-flow__step::before { content: ""; position: absolute; top: -2.1rem; left: 50%; width: 1px; height: 2rem; background: #8f96a3; transform: translateX(-50%); } .biz-flow__step:first-child::before, .biz-flow__step:first-child::after { display: none; } .biz-flow__branch { position: absolute; top: 22rem; left: 0.8rem; width: 9.8rem; margin: 0; padding: 0; list-style: none; } .biz-flow__branch::before { content: ""; position: absolute; top: 50%; left: 50%; width: 1px; height: 2rem; background: #8f96a3; transform: translate(-50%, -50%); } .biz-flow__branch::after { content: ""; position: absolute; top: -2.6rem; left: 50%; width: 7.5rem; height: 1px; background: #8f96a3; box-shadow: 0 16.3rem 0 #8f96a3; } .biz-flow__branch-step { position: relative; display: flex; align-items: center; justify-content: center; width: 9.8rem; min-height: 5rem; padding: 0.8rem 1rem; border-radius: 0.8rem; box-sizing: border-box; background: var(--brand); color: #fff; font-size: 1.6rem; font-weight: 400; line-height: 1.4; text-align: center; word-break: keep-all; z-index: 1; } .biz-flow__branch-step+.biz-flow__branch-step { margin-top: 1.2rem; } .biz-flow__branch-step:first-child::before { content: ""; position: absolute; top: -2.6rem; left: 50%; width: 1px; height: 2.6rem; background: #8f96a3; transform: translateX(-50%); } .biz-flow__branch-step:first-child::after { display: none; } .biz-flow__branch-step:last-child::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 2.6rem; background: #8f96a3; transform: translateX(-50%); } @media (max-width: 360px) { .biz-flow { padding: 0; } .biz-flow__step { width: 16.2rem; font-size: 1.15rem; } .biz-flow__branch { top: 23.9rem; left: 0; width: 9rem; } .biz-flow__branch::after { width: 8.3rem; } .biz-flow__branch-step { width: 9rem; } } .sitemap-item ul li li a::before, .sitemap-item ul li li span::before { display: inline-block; margin-right: 6px; color: #3b4a5a; content: '-'; } .sitemap-item ul li li li a::before, .sitemap-item ul li li li span::before { display: inline-block; margin-right: 6px; color: #3b4a5a; content: '\00B7'; } .sitemap-item a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring-contrast), inset 0 0 0 6px var(--focus-ring); border-radius: 8px; } .sitemap-list--d3 .sitemap-item+.sitemap-item, .sitemap-list--d4 .sitemap-item+.sitemap-item, .sitemap-list--d5 .sitemap-item+.sitemap-item { margin-top: 2px; padding-top: 0; border-top: 0; } /*** //사이트맵 ***/ /*** 제안 처리절차 ***/ /*customer*/ .handleCont { text-align: center; } .handleCont .cont>strong { display: block; padding: 10px; background: var(--orz-green_dark); color: #fff; box-sizing: border-box; border-radius: 5px; } .handleCont .cont.sky>strong { background: var(--orz-green); } .handleCont .cont em { display: block; margin: 5px 0 30px; } .handleCont .cont em.mgb { margin-bottom: 0px; } .handleCont .cont em.mgt { margin: 10px 0 25px; } .handleCont .cont-w { width: 47%; } .handleCont .cont.arr { padding-bottom: 22px; background: url(/images/content/arr_down.png) center 99% no-repeat; background-size: 17px; } .handleCont .arr2 { background: url(/images/content/arr_down2.png) center 25px no-repeat; background-size: 179px; } .handleCont .arr3 { padding-right: 20px; background: url(/images/content/arr_right.png) right 20px no-repeat; background-size: 17px; } /*** //제안 처리절차 ***/ /*** 기술개발 전략 ***/ .tech-strategy { display: flex; flex-direction: column; } .tech-strategy__hero { align-self: center; min-width: 160px; } .tech-strategy__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; position: relative; margin-top: 34px; } .tech-strategy__groups::before { position: absolute; left: 50%; bottom: calc(100% + 18px); width: 1px; height: 16px; background: #8f96a3; content: ""; transform: translateX(-50%); } .tech-strategy__groups::after { position: absolute; top: -18px; left: calc(25% - 6px); width: calc(50% + 10px); height: 1px; background: #8f96a3; content: ""; } .tech-strategy__group { position: relative; } .tech-strategy__group::before { position: absolute; top: -18px; left: 50%; width: 1px; height: 18px; background: #8f96a3; content: ""; transform: translateX(-50%); } .tech-strategy__heading { display: flex; align-items: center; justify-content: center; min-height: 88px; margin: 0; line-height: 1.45; text-align: center; } .tech-strategy__cards { margin: 18px 0 0; padding: 0; list-style: none; } .tech-strategy__cards>li+li { margin-top: 12px; } .tech-strategy__card { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; margin: 0; } .tech-strategy__card .list-info { margin-bottom: 0; font-size: 14px; } .tech-strategy__card .dashed_line { margin-top: 0; font-size: 14px; } .energy-link-section {} .energy-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .energy-link__hub { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 98px; width: 98px; height: 98px; border: 11px solid #d8d8d8; border-radius: 50%; background: #fff; font-size: 1.7rem; font-weight: 700; color: #222; white-space: nowrap; box-shadow: 0 0 12px rgba(0, 0, 0, 0.06) inset; } .energy-link__label { position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 108px; width: 108px; min-height: 38px; padding: 8px 14px; border: 2px solid var(--orz-green); border-radius: 999px; background: #fff; font-size: 1.6rem; font-weight: 600; color: #222; text-align: center; word-break: keep-all; } .energy-link__label::after { position: absolute; top: 50%; z-index: 1; width: 12px; border-top: 2px dotted #9aa3b2; content: ""; transform: translateY(-50%); } .energy-link__label::before { position: absolute; top: 50%; z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: currentColor; content: ""; transform: translateY(-50%); } .energy-link__label--left { border-color: var(--orz-green); } .energy-link__label--left::after { right: -18px; } .energy-link__label--left::before { right: -40px; background: var(--orz-green); } .energy-link__label--right { border-color: var(--orz-red); } .energy-link__label--right::after { left: -18px; } .energy-link__label--right::before { left: -40px; background: var(--orz-red); } .tech-strategy__cards>li:nth-child(1) .tech-strategy__card { min-height: 160px; } .tech-strategy__cards>li:nth-child(2) .tech-strategy__card { min-height: 140px; } .tech-strategy__cards>li:nth-child(3) .tech-strategy__card { min-height: 180px; } @media (max-width: 360px) { .tech-strategy__hero { min-width: 144px; margin-bottom: 24px !important; } .tech-strategy__groups { gap: 10px; margin-top: 28px; } .tech-strategy__groups::before { bottom: calc(100% + 14px); height: 14px; } .tech-strategy__groups::after { top: -14px; left: calc(25% - 2px); width: calc(50% + 4px); } .tech-strategy__group::before { top: -14px; height: 14px; } .tech-strategy__heading { min-height: 78px; padding-right: 10px; padding-left: 10px; font-size: 1.7rem; } .energy-link { gap: 8px; } .energy-link__hub { flex-basis: 82px; width: 82px; height: 82px; border-width: 9px; font-size: 1.45rem; } .energy-link__label { flex-basis: 88px; width: 88px; min-height: 34px; padding: 6px 10px; font-size: 1.35rem; } .energy-link__label::after { width: 8px; } .energy-link__label--left::after { right: -12px; } .energy-link__label--left::before { right: -22px; width: 8px; height: 8px; } .energy-link__label--right::after { left: -12px; } .energy-link__label--right::before { left: -22px; width: 8px; height: 8px; } .energy-link-section { margin-top: 22px; padding: 16px 0 0; } .tech-strategy__cards { margin-top: 10px; } .tech-strategy__cards>li+li { margin-top: 10px; } .tech-strategy__cards>li:nth-child(1) .tech-strategy__card { min-height: 156px; } .tech-strategy__cards>li:nth-child(2) .tech-strategy__card, .tech-strategy__cards>li:nth-child(3) .tech-strategy__card { min-height: 136px; } } /*** //기술개발 전략 ***/ @media (max-width: 767px) { .harassment-flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.375rem !important; } .harassment-flow-grid > ul { min-width: 0; } .harassment-flow-grid .obox-navy, .harassment-flow-grid .obox-gray, .harassment-flow-grid .one_box dt, .harassment-flow-grid .one_box dd { font-size: 1.4rem; padding: 0.6rem 0.5rem; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; } .harassment-flow-grid .list-info li { font-size: 1.4rem; } .harassment-flow-grid .ico-bottom { transform: scale(0.9); } }