.flow-canvas-wrap {
    border: 1px solid #e3eefa;
    border-radius: 8px;
    background: #fff;
    padding: 10px 14px;
    overflow: hidden;
}

.flow-canvas {
    position: relative;
    min-width: 960px;
}

.canvas-in    { height: 28rem; }
.canvas-out   { height: 34rem; }
.canvas-other { height: 12rem; }

.flow-canvas .same {
    position: absolute;
    transform: translateX(-50%);
}

.flow-canvas a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flow-canvas a img {
    width: 8rem;
    border: 1px solid rgb(233, 233, 233);
    background: #fff;
}

.flow-canvas a p {
    font-size: 1rem;
    font-weight: 800;
    color: #333;
    text-align: center;
    line-height: 1.5;
    margin-top: 6px;
}

.flow-canvas .samearrow img {
    position: absolute;
}

.canvas-in .c1  { top: 2rem;    left: 15%; }
.canvas-in .c2  { top: 2rem;    left: 32.5%; }
.canvas-in .c3  { top: 2rem;    left: 50%; }
.canvas-in .c4  { top: 2rem;    left: 67.5%; }
.canvas-in .c5  { top: 2rem;    left: 85%; }
.canvas-in .c15 { top: 17rem;   left: 32.5%; }

.canvas-in .arrow1 img  { width: 7%;    height: 1.5rem; top: 5.5rem;  left: 20.5%; }
.canvas-in .arrow2 img  { width: 7%;    height: 1.5rem; top: 5.5rem;  left: 73%; }
.canvas-in .arrow3 img  { width: 7%;    height: 1.5rem; top: 5.5rem;  left: 37.5%; }
.canvas-in .arrow4 img  { width: 7%;    height: 1.5rem; top: 5.5rem;  left: 55%; }
.canvas-in .arrow11 img { width: 7.5rem; height: 1.5rem; top: 14.5rem; left: 18%; transform: rotate(32deg); }
.canvas-in .arrow12 img { width: 7.5rem; height: 1.5rem; top: 14.5rem; left: 36%; transform: rotate(-32deg); }

.canvas-out .c6  { top: 2rem;      left: 30%; }
.canvas-out .c7  { top: 2rem;      left: 70%; }
.canvas-out .c8  { top: 20rem;     left: 25%; }
.canvas-out .c9  { top: 20rem;     left: 50%; }
.canvas-out .c10 { top: 20rem;     left: 75%; }

.canvas-out .arrow5 img { width: 25%; height: 1.8rem; top: 5rem;  left: 37.5%; }
.canvas-out .arrow6 img { width: 10%; height: 2rem;   top: 23rem; left: 32.5%; }
.canvas-out .arrow7 img { width: 10%; height: 2rem;   top: 23rem; left: 57.5%; }

.canvas-other .c11 { top: 2rem; left: 40%; }
.canvas-other .c12 { top: 2rem; left: 60%; }
.canvas-other .c13 { top: 2rem; left: 80%; }
.canvas-other .c14 { top: 2rem; left: 20%; }

.canvas-other .arrow8 img  { width: 8%; height: 1.8rem; top: 5.5rem; left: 26%; }
.canvas-other .arrow9 img  { width: 8%; height: 1.8rem; top: 5.5rem; left: 46%; }
.canvas-other .arrow10 img { width: 8%; height: 1.8rem; top: 5.5rem; left: 66%; }