@charset "utf-8";
.network-diagram-wrap { width: 100%; margin-top: 40px; padding: 60px 0 100px; position: relative; z-index: 1; }
.network-diagram-wrap::before, .network-diagram-wrap::after { content: ""; position: absolute; width: 626px; height: 585px; pointer-events: none; z-index: -1; opacity: 0.2; }
.network-diagram-wrap::before { top: 0; left: 15%; background: radial-gradient(50% 50% at 50% 50%, #0a60ff 0%, rgba(10, 96, 255, 0) 100%); }
.network-diagram-wrap::after { bottom: 0; right: 15%; opacity: 0.3; background: radial-gradient(50% 50% at 50% 50%, #07b0c3 0%, rgba(7, 176, 195, 0) 100%); }
.network-scroll { width: 100%; display: flex; justify-content: center; position: relative; }
.network-diagram { position: relative; width: 574px; height: 574px; min-width: 574px; margin: 0 auto; }
.network-diagram::before { content: ""; position: absolute; top: -150px; left: -150px; right: -150px; bottom: -150px; background: radial-gradient(50% 50% at 50% 50%, #d9e6ff 0%, rgba(246, 249, 255, 0.2) 100%); pointer-events: none; z-index: -2; }
.network-diagram::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 318px; height: 318px; background: #0a60ff; border-radius: 50%; z-index: 7; pointer-events: none; opacity: 0.05; }
.network-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; height: 900px; border-radius: 50%; background: radial-gradient( circle, rgba(0, 85, 255, 0.12) 0%, rgba(0, 85, 255, 0.04) 45%, rgba(255, 255, 255, 0) 70% ); z-index: -3; }
.network-ring { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 10px solid #ffffff; border-radius: 50%; z-index: 10; }
.center-node { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 210px; height: 210px; background: #005ce6; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; z-index: 20; box-shadow: 0 10px 30px rgba(0, 92, 230, 0.3); font-weight: 700; font-size: 30px; line-height: 36px; letter-spacing: -2%; text-align: center; vertical-align: middle; }
.center-node p { position: relative; z-index: 21; }
.node01 { left: 50%; top: 0; }
.node02 { left: 89%; top: 18.8%; }
.node03 { left: 98.8%; top: 61.1%; }
.node04 { left: 71.8%; top: 95.1%; }
.node05 { left: 28.2%; top: 95.1%; }
.node06 { left: 1.2%; top: 61.1%; }
.node07 { left: 11%; top: 18.8%; }
.node-item { position: absolute; transform: translate(-50%, -50%); z-index: 10; display: flex; align-items: center; }
.node-circle { width: 148px; height: 148px; background: #ffffff; border-radius: 50%; box-shadow: 0px 4px 60px 8px #c5d9ff4d; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 4; }
.node-circle .img-box { margin-bottom: 10px; height: 38px; display: flex; align-items: center; justify-content: center; }
.node-circle .img-box img { max-height: 100%; }
.node-circle p { font-weight: 700; text-align: center; font-size: 18px; line-height: 100%; letter-spacing: -2%; text-align: center; vertical-align: middle; color: #222; }
.branches { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; z-index: 2; }
.node-item.right .branches { left: 100%; }
.node-item.left .branches { right: 100%; flex-direction: row-reverse; }
.branch-connector { width: 25px; height: 0; border-top: 2px dotted #aaaaaa; position: relative; }
.branch-connector::before { content: ""; position: absolute; top: -5px; width: 8px; height: 8px; border: 2px solid #005ce6; border-radius: 50%; background: #fff; box-sizing: border-box; }
.node-item.right .branch-connector { margin-right: 0; }
.node-item.right .branch-connector::before { left: 0px; }
.node-item.left .branch-connector { margin-left: 0; }
.node-item.left .branch-connector::before { right: 0px; }
.branch-list { position: relative; display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; }
.node-item.right .branch-list { padding-left: 30px; }
.node-item.left .branch-list { padding-right: 30px; }
.branch-list::before { display: none; }
.branch-list li { position: relative; background: #e7eefe; color: #011a7a; padding: 8px 15px; border-radius: 99px; white-space: normal; word-break: keep-all; min-height: 31px; letter-spacing: -0.5px; box-sizing: border-box; font-weight: 600; font-size: 13px; line-height: 1.2; text-align: center; display: flex; align-items: center; justify-content: center; }
.branch-list li::before { content: ""; position: absolute; top: 50%; width: 30px; height: 0; border-top: 2px dotted #aaaaaa; }
.node-item.right .branch-list li::before { left: -30px; transform: translateY(-50%); }
.node-item.left .branch-list li::before { right: -30px; transform: translateY(-50%); }
.branch-list li::after { content: ""; position: absolute; top: -6px; bottom: -4px; width: 0; border-left: 2px dotted #aaaaaa; }
.node-item.right .branch-list li::after { left: -30px; }
.node-item.left .branch-list li::after { right: -30px; border-left: none; border-right: 2px dotted #aaaaaa; }
.branch-list li:first-child::after { top: 50%; }
.branch-list li:last-child::after { bottom: 50%; }
.branch-list li:only-child::after { display: none; }
.node02 .branch-list li, .node04 .branch-list li, .node05 .branch-list li, .node07 .branch-list li { width: 236px; }
.node03 .branch-list li { width: 193px; }
.node06 .branch-list li { width: 181px; }
@media screen and (max-width: 1024px) {
  .network-diagram-wrap { padding: 0 15px; overflow: hidden; margin-top: 0; }
  .network-diagram-wrap::before, .network-diagram-wrap::after, .network-bg, .network-ring, .network-diagram::before, .network-diagram::after, .node-item::before { display: none; }
  .network-scroll { display: block; overflow: visible; }
  .network-diagram { width: 100%; height: auto; min-width: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 20px; align-items: start; justify-items: center; }
  .center-node { position: relative; top: auto; left: auto; transform: none; grid-column: 1 / -1; margin-bottom: 0; }
  .node-item { position: relative; top: auto; left: auto; transform: none; flex-direction: column; width: 100%; }
  .node-item.right .branches, .node-item.left .branches { position: relative; top: auto; left: auto; right: auto; transform: none; width: 100%; display: flex; flex-direction: column; align-items: center; }
  .node-item.right .branch-connector, .node-item.left .branch-connector { width: 0; height: 25px; border-top: none; border-left: 2px dotted #aaaaaa; margin: 4px 0 2px 0; }
  .node-item.right .branch-connector::before, .node-item.left .branch-connector::before { top: 50%; left: -5px; right: auto; transform: translateY(-50%); }
  .branch-list { width: 100%; align-items: center; gap: 8px; }
  .node-item.right .branch-list, .node-item.left .branch-list { padding: 0; }
  .network-diagram-wrap .branch-list li { width: 100%; max-width: 400px; }
  .network-diagram-wrap .branch-list li::before, .network-diagram-wrap .branch-list li::after, .network-diagram-wrap .node-item.left .branch-list li::before, .network-diagram-wrap .node-item.left .branch-list li::after { display: none; }
}
@media screen and (max-width: 768px) {
  .network-diagram { grid-template-columns: 1fr; gap: 50px; }
}