.content_catch>.animated_catch.service{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.content_catch>.animated_catch.service svg{
    fill:var(--theme-bg-main-invert,black)
}
.content_catch>.animated_catch.service [pc],
.content_catch>.animated_catch.service [mobile],
.content_catch>.animated_catch.service [server]{
    height: 75px;
    aspect-ratio: 1/1;
    display: flex;
    fill: var(--theme-bg-main-invert,black);
    /*fill: var(--theme-color-main,#D60000);*/
}
.content_catch>.animated_catch.service [pc],
.content_catch>.animated_catch.service [mobile]{
    /*fill: var(--theme-color-main,#D60000);*/
    animation: shake_catch_icon 25s infinite ease-in-out both;
}
.content_catch>.animated_catch.service [server]{
    animation-direction: reverse !important;
    animation: shake_catch_icon 25s infinite ease-in-out both;
}

.content_catch>.animated_catch.service>.animated_line{
    position: absolute;
    width: calc(100% - 170px);
    height: 4px;
    border-radius: 5px;
    background: var(--theme-border-widget,#969696);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.content_catch>.animated_catch.service>.animated_line::after{
    content: '';
    display: flex;
    width: 0%;
    height: 100%;
    border-radius: 5px;
    background: red;
    animation: animation_catch_connection_line 8s infinite ease-in-out both;
}
.content_catch>.animated_catch.service>.animated_line::before{
    content: '';
    background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='100%' height='100%'><path fill='rgb(200 30 30)' d='m292.2 256 109.9-109.9c10-10 10-26.2 0-36.2s-26.2-10-36.2 0l-109.9 109.9-109.9-109.9c-10-10-26.2-10-36.2 0s-10 26.2 0 36.2l109.9 109.9-109.9 109.9c-10 10-10 26.2 0 36.2 5 5 11.55 7.5 18.1 7.5s13.1-2.5 18.1-7.5l109.9-109.9 109.9 109.9c5 5 11.55 7.5 18.1 7.5s13.1-2.5 18.1-7.5c10-10 10-26.2 0-36.2z'/></svg>") no-repeat;
    position: absolute;
    width: 0px;
    height: 0px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    animation: close_catch_show_hide 8s infinite ease-in-out both;
}
@keyframes shake_catch_icon {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    9% { transform: translate(-1px, -2px) rotate(-1deg); }
    18% { transform: translate(-3px, 0px) rotate(1deg); }
    27% { transform: translate(3px, 2px) rotate(0deg); }
    36% { transform: translate(1px, -1px) rotate(1deg); }
    45% { transform: translate(-1px, 2px) rotate(-1deg); }
    54% { transform: translate(-3px, 1px) rotate(0deg); }
    63% { transform: translate(3px, 1px) rotate(-1deg); }
    72% { transform: translate(-1px, -1px) rotate(1deg); }
    81% { transform: translate(1px, 2px) rotate(0deg); }
    90% { transform: translate(1px, -2px) rotate(-1deg); }
    100% { transform: translate(1px, 1px) rotate(0deg); }
  }
@keyframes close_catch_show_hide {
    0%{
        width: 0px;
        height: 0px;
    }
    84%{
        width: 0px;
        height: 0px;
    }
    85%{
        width: 27px;
        height: 27px;
    }
    86%{
        width: 25px;
        height: 25px;
    }
    90%{
        width: 0;
        height: 0;
    }
    100%{
        width: 0;
        height: 0;
    }
}
@keyframes animation_catch_connection_line {
    0%{
        width: 0%;
        background: red;
    }
    25%{
        width: 27%;
        background: rgb(255, 123, 0);
    }
    35%{
        width: 40%;
        background: rgb(255, 208, 0);
    }
    85%{
        width: 50%;
        background: rgb(187, 255, 0);
    }
    100%{
        width: 0%;
        background: red;
    }
}