@charset "utf-8";
.con-box { padding: 0 0 50px; }
.tp-container { display: flex; justify-content: center; align-items: center; gap: 16px; }
.tp-item { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.tp-circle { width: 260px; height: 260px; background-color: #fff; border-radius: 50%; border: 25px solid #f2f6fb; outline: 1px solid #bccfee99; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 4px 8px 22px 0px #00000012; }
.tp-circle .img-box { width: 50px; display: flex; justify-content: center; margin-bottom: 17px; }
.tp-circle .img-box img { display: block; margin: 0 auto; }
.tp-item:nth-of-type(1) .img-box img { width: 50px; height: 40px; }
.tp-item:nth-of-type(2) .img-box img { width: 50px; height: 48px; }
.tp-item:nth-of-type(3) .img-box img { width: 50px; height: 45px; }
.tp-name { color: #333; font-weight: 700; font-size: 22px; line-height: 130%; letter-spacing: -2%; text-align: center; text-transform: uppercase; }
.tp-arrows { display: flex; flex-direction: column; gap: 15px; }
.tp-arrows .img-box { width: 108px; height: 52px; }
.proc-wrapper { border: 1px solid #d6dce8; border-radius: 8px; padding: 50px; overflow-x: auto; }
.proc-canvas { position: relative; height: 376px; margin: 0 auto; }
.p-node { position: absolute; width: 200px; height: 58px; border-radius: 29px; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; word-break: keep-all; z-index: 10; font-weight: 700; font-size: 16px; line-height: 26px; letter-spacing: -2%; text-align: center; vertical-align: middle; }
.bg-navy { background-color: #0d376d; }
.bg-blue { background-color: #3272db; }
.bg-orange { background-color: #ed903f; }
.ul-type-dot > li:before {top: 8px}
.p-node.box-sm { font-size: 14px; line-height: 1.3; }
.p-text { position: absolute; color: #333; word-break: keep-all; white-space: nowrap; font-weight: 500; font-size: 14px; line-height: 22px; letter-spacing: -2%; vertical-align: middle; }
.p-text .ul-type-dot > li { color: #333; padding-bottom: 0; font-weight: 500; font-size: 14px; line-height: 22px; letter-spacing: -2%; vertical-align: middle; }
.p-text-left { text-align: left; z-index: 10; }
.p-text-left::before { content: ""; position: absolute; inset: 0; background: #fff; z-index: -1; }
.p-lh { position: absolute; height: 0; border-top: 2px dotted #aaa; z-index: 5; }
.p-lv { position: absolute; width: 0; border-left: 2px dotted #aaa; z-index: 5; }
.p-circ { position: absolute; width: 9px; height: 9px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; z-index: 15; }
.p-arr-rt, .p-arr-lt, .p-arr-dn, .p-arr-up { position: absolute; width: 5px; height: 8px; background: url(../img/content/ico-arr-rt.png) no-repeat center / contain; z-index: 15; }
.p-arr-lt { transform: translateY(1px) rotate(180deg); }
.p-arr-dn { transform: rotate(90deg); }
.p-arr-up { transform: translateX(-0.5px) rotate(-90deg); }
.p-red { position: absolute; color: #e00; z-index: 20; font-weight: 500; font-size: 14px; text-align: center; line-height: 20px; letter-spacing: -2%; vertical-align: middle; white-space: nowrap; word-break: keep-all; }
@media (max-width: 1024px) {
  .tp-container { gap: 10px; min-width: 700px; }
  .tp-circle { width: 180px; height: 180px; border-width: 16px; }
  .tp-name { font-size: 18px; }
  .tp-circle .img-box { margin-bottom: 10px; }
  .tp-item:nth-of-type(1) .img-box img, .tp-item:nth-of-type(2) .img-box img, .tp-item:nth-of-type(3) .img-box img { height: auto; max-width: 36px; }
  .arr-row { gap: 6px; }
  .arr-dot { width: 6px; height: 6px; }
  .arr-tri-rt { border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #cdcccc; }
  .arr-tri-lt { border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid #cdcccc; }
  .proc-wrapper { padding: 40px 20px; }
}
@media (max-width: 768px) {
  .tp-container { flex-direction: column; gap: 15px; min-width: 0; }
  .tp-arrows { flex-direction: column; transform: none; margin: 10px 0; justify-content: center; gap: 15px; align-items: center; }
  .tp-arrows .img-box { width: 108px; height: 52px; transform: rotate(90deg); margin: 30px 0; display: flex; justify-content: center; align-items: center; }
  .proc-wrapper { padding: 30px 15px; }
}