@charset "UTF-8";

.glitch {
    background-size: 0;
    background-repeat: no-repeat;
    height: 100%;
    position: absolute;
    overflow: hidden;
    z-index: 500;
    width: 100%
}

.glitch .channel,
.glitch::after,
.glitch::before {
    background: inherit;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.glitch .channel {
    mix-blend-mode: screen
}

.glitch .channel::before {
    bottom: 0;
    content: "";
    display: block;
    mix-blend-mode: multiply;
    position: absolute;
    left: 0;
    right: 0;
    top: 0
}

.glitch:after,
.glitch:before {
    content: ""
}

.glitch:not(.include_none)::before {
    animation: glitch-before 3s linear infinite alternate both
}

@keyframes glitch-before {
    0% {
        clip-path: polygon(0 78.82686%, 100% 78.82686%, 100% 80.93326%, 0 80.93326%);
        transform: translate(6.57138%, .41029%)
    }

    1.5% {
        clip-path: polygon(0 4.00567%, 100% 4.00567%, 100% 5.04328%, 0 5.04328%);
        transform: translate(.51464%, .06137%)
    }

    3% {
        clip-path: polygon(0 31.39315%, 100% 31.39315%, 100% 38.14954%, 0 38.14954%);
        transform: translate(-4.65777%, -.03331%)
    }

    4.5% {
        clip-path: polygon(0 42.29622%, 100% 42.29622%, 100% 47.21315%, 0 47.21315%);
        transform: translate(4.30992%, .01684%)
    }

    6% {
        clip-path: polygon(0 16.65451%, 100% 16.65451%, 100% 23.98652%, 0 23.98652%);
        transform: translate(-2.19686%, -.05631%)
    }

    7.5% {
        clip-path: polygon(0 60.32284%, 100% 60.32284%, 100% 62.14719%, 0 62.14719%);
        transform: translate(-3.43872%, -.10639%)
    }

    9% {
        clip-path: polygon(0 86.70449%, 100% 86.70449%, 100% 93.7918%, 0 93.7918%);
        transform: translate(-4.38032%, .28262%)
    }

    10.5% {
        clip-path: polygon(0 37.5414%, 100% 37.5414%, 100% 39.48218%, 0 39.48218%);
        transform: translate(-7.42146%, .43286%)
    }

    12% {
        clip-path: polygon(0 74.59604%, 100% 74.59604%, 100% 78.81881%, 0 78.81881%);
        transform: translate(5.95559%, -.2147%)
    }

    13.5% {
        clip-path: polygon(0 20.19625%, 100% 20.19625%, 100% 21.77745%, 0 21.77745%);
        transform: translate(-5.56806%, -.19632%)
    }

    15% {
        clip-path: polygon(0 58.53341%, 100% 58.53341%, 100% 64.96926%, 0 64.96926%);
        transform: translate(-5.94268%, .13623%)
    }

    16.5% {
        clip-path: polygon(0 37.74378%, 100% 37.74378%, 100% 47.46733%, 0 47.46733%);
        transform: translate(-5.0479%, .30791%)
    }

    18% {
        clip-path: polygon(0 50.33881%, 100% 50.33881%, 100% 51.44981%, 0 51.44981%);
        transform: translate(5.00987%, .01028%)
    }

    19.5% {
        clip-path: polygon(0 66.65396%, 100% 66.65396%, 100% 70.86862%, 0 70.86862%);
        transform: translate(5.69161%, -.4171%)
    }

    21% {
        clip-path: polygon(0 45.75578%, 100% 45.75578%, 100% 47.89224%, 0 47.89224%);
        transform: translate(1.42864%, -.13279%)
    }

    22.5% {
        clip-path: polygon(0 21.42322%, 100% 21.42322%, 100% 24.49686%, 0 24.49686%);
        transform: translate(-5.25249%, -.06781%)
    }

    24% {
        clip-path: polygon(0 60.01528%, 100% 60.01528%, 100% 61.12478%, 0 61.12478%);
        transform: translate(2.46022%, .05569%)
    }

    25.5% {
        clip-path: polygon(0 46.51302%, 100% 46.51302%, 100% 50.28287%, 0 50.28287%);
        transform: translate(-3.04176%, .06304%)
    }

    27% {
        clip-path: polygon(0 73.77987%, 100% 73.77987%, 100% 82.38056%, 0 82.38056%);
        transform: translate(-6.17093%, .06068%)
    }

    28.5% {
        clip-path: polygon(0 80.93113%, 100% 80.93113%, 100% 88.66925%, 0 88.66925%);
        transform: translate(7.37222%, .28551%)
    }

    100%,
    30% {
        clip-path: none;
        transform: none
    }
}

.glitch:not(.include_none)::after {
    animation: glitch-after 3s linear infinite alternate both;
    content: ""
}

@keyframes glitch-after {
    0% {
        clip-path: polygon(0 36.06749%, 100% 36.06749%, 100% 38.72888%, 0 38.72888%);
        transform: translate(-1.81729%, .29198%)
    }

    1.5% {
        clip-path: polygon(0 36.79092%, 100% 36.79092%, 100% 38.73118%, 0 38.73118%);
        transform: translate(-6.99349%, -.38219%)
    }

    3% {
        clip-path: polygon(0 60.54607%, 100% 60.54607%, 100% 70.2189%, 0 70.2189%);
        transform: translate(2.75626%, .30626%)
    }

    4.5% {
        clip-path: polygon(0 58.18775%, 100% 58.18775%, 100% 66.80683%, 0 66.80683%);
        transform: translate(-4.12474%, .27098%)
    }

    6% {
        clip-path: polygon(0 21.17142%, 100% 21.17142%, 100% 29.61353%, 0 29.61353%);
        transform: translate(1.22364%, .02234%)
    }

    7.5% {
        clip-path: polygon(0 23.15106%, 100% 23.15106%, 100% 25.16802%, 0 25.16802%);
        transform: translate(3.40431%, .05061%)
    }

    9% {
        clip-path: polygon(0 .26492%, 100% .26492%, 100% 2.01445%, 0 2.01445%);
        transform: translate(-1.51598%, -.27401%)
    }

    10.5% {
        clip-path: polygon(0 26.17392%, 100% 26.17392%, 100% 28.03082%, 0 28.03082%);
        transform: translate(-1.84083%, -.34205%)
    }

    12% {
        clip-path: polygon(0 12.90619%, 100% 12.90619%, 100% 16.38262%, 0 16.38262%);
        transform: translate(-5.76108%, .49987%)
    }

    13.5% {
        clip-path: polygon(0 62.64003%, 100% 62.64003%, 100% 65.95676%, 0 65.95676%);
        transform: translate(7.39857%, .22789%)
    }

    15% {
        clip-path: polygon(0 86.85401%, 100% 86.85401%, 100% 94.77799%, 0 94.77799%);
        transform: translate(3.11882%, -.35215%)
    }

    16.5% {
        clip-path: polygon(0 58.7914%, 100% 58.7914%, 100% 66.18295%, 0 66.18295%);
        transform: translate(-7.46414%, .20577%)
    }

    18% {
        clip-path: polygon(0 42.22197%, 100% 42.22197%, 100% 49.26563%, 0 49.26563%);
        transform: translate(3.9935%, .21332%)
    }

    19.5% {
        clip-path: polygon(0 85.94432%, 100% 85.94432%, 100% 89.63508%, 0 89.63508%);
        transform: translate(3.97154%, .16028%)
    }

    21% {
        clip-path: polygon(0 13.52252%, 100% 13.52252%, 100% 21.80353%, 0 21.80353%);
        transform: translate(5.26761%, -.10248%)
    }

    22.5% {
        clip-path: polygon(0 81.77351%, 100% 81.77351%, 100% 83.21454%, 0 83.21454%);
        transform: translate(-4.11019%, .14851%)
    }

    24% {
        clip-path: polygon(0 16.99985%, 100% 16.99985%, 100% 20.79944%, 0 20.79944%);
        transform: translate(-7.25467%, .17511%)
    }

    25.5% {
        clip-path: polygon(0 15.37266%, 100% 15.37266%, 100% 19.99144%, 0 19.99144%);
        transform: translate(-5.21903%, .33936%)
    }

    27% {
        clip-path: polygon(0 .8562%, 100% .8562%, 100% 9.14162%, 0 9.14162%);
        transform: translate(-5.19973%, -.34469%)
    }

    28.5% {
        clip-path: polygon(0 2.10478%, 100% 2.10478%, 100% 4.29794%, 0 4.29794%);
        transform: translate(7.5439%, -.29644%)
    }

    100%,
    30% {
        clip-path: none;
        transform: none
    }
}

.glitch:not(.include_none) .r {
    animation: rgb-shift-r 3s steps(1, jump-end) infinite alternate both
}

@keyframes rgb-shift-r {
    0% {
        transform: translate(1.77807%, -.74984%)
    }

    1.5% {
        transform: translate(-2.29331%, .4658%)
    }

    3% {
        transform: translate(-2.89679%, .29362%)
    }

    4.5% {
        transform: translate(1.04046%, -.02147%)
    }

    6% {
        transform: translate(-2.09139%, -.55843%)
    }

    7.5% {
        transform: translate(-2.81033%, -.00673%)
    }

    9% {
        transform: translate(-2.78235%, -.07587%)
    }

    10.5% {
        transform: translate(.08228%, .3974%)
    }

    12% {
        transform: translate(2.88061%, .51833%)
    }

    13.5% {
        transform: translate(.16477%, -.03962%)
    }

    15% {
        transform: translate(.00122%, .13532%)
    }

    16.5% {
        transform: translate(-1.80053%, -.70929%)
    }

    18% {
        transform: translate(-1.10718%, .52634%)
    }

    19.5% {
        transform: translate(.66162%, .7318%)
    }

    21% {
        transform: translate(2.10321%, .48734%)
    }

    22.5% {
        transform: translate(-1.08422%, -.72143%)
    }

    24% {
        transform: translate(-1.68453%, -.7325%)
    }

    25.5% {
        transform: translate(-.00515%, .50133%)
    }

    27% {
        transform: translate(.31303%, .45937%)
    }

    28.5% {
        transform: translate(.31486%, .4352%)
    }

    100%,
    30% {
        transform: none
    }
}

.glitch:not(.include_none) .g {
    animation: rgb-shift-g 3s steps(1, jump-end) infinite alternate both
}

@keyframes rgb-shift-g {
    0% {
        transform: translate(1.98752%, -.18792%)
    }

    1.5% {
        transform: translate(.76971%, -.19965%)
    }

    3% {
        transform: translate(-1.4634%, -.02958%)
    }

    4.5% {
        transform: translate(-2.10582%, -.44194%)
    }

    6% {
        transform: translate(1.1169%, .32322%)
    }

    7.5% {
        transform: translate(-.30218%, -.43634%)
    }

    9% {
        transform: translate(2.95348%, -.67533%)
    }

    10.5% {
        transform: translate(2.19281%, .61801%)
    }

    12% {
        transform: translate(1.73664%, .09501%)
    }

    13.5% {
        transform: translate(-2.90639%, -.52826%)
    }

    15% {
        transform: translate(-2.00468%, -.63899%)
    }

    16.5% {
        transform: translate(-.70761%, .39274%)
    }

    18% {
        transform: translate(.70466%, -.59882%)
    }

    19.5% {
        transform: translate(.77916%, -.35056%)
    }

    21% {
        transform: translate(-2.48724%, .26775%)
    }

    22.5% {
        transform: translate(-2.84812%, .16376%)
    }

    24% {
        transform: translate(2.88634%, -.03738%)
    }

    25.5% {
        transform: translate(.40788%, -.44979%)
    }

    27% {
        transform: translate(-1.46317%, .37567%)
    }

    28.5% {
        transform: translate(-2.77125%, -.10599%)
    }

    100%,
    30% {
        transform: none
    }
}

.glitch:not(.include_none) .b {
    animation: rgb-shift-b 3s steps(1, jump-end) infinite alternate both
}

@keyframes rgb-shift-b {
    0% {
        transform: translate(.24963%, .41258%)
    }

    1.5% {
        transform: translate(-.2654%, -.33037%)
    }

    3% {
        transform: translate(.15893%, .53982%)
    }

    4.5% {
        transform: translate(2.80713%, -.14607%)
    }

    6% {
        transform: translate(1.9938%, .60815%)
    }

    7.5% {
        transform: translate(-.0836%, .01969%)
    }

    9% {
        transform: translate(-1.61897%, -.59684%)
    }

    10.5% {
        transform: translate(-1.62157%, -.22827%)
    }

    12% {
        transform: translate(1.47899%, -.72329%)
    }

    13.5% {
        transform: translate(2.84556%, -.55088%)
    }

    15% {
        transform: translate(.12386%, -.22922%)
    }

    16.5% {
        transform: translate(1.50284%, .29399%)
    }

    18% {
        transform: translate(-1.52379%, .41026%)
    }

    19.5% {
        transform: translate(-2.34587%, .21516%)
    }

    21% {
        transform: translate(.5529%, .57002%)
    }

    22.5% {
        transform: translate(-1.66172%, -.13205%)
    }

    24% {
        transform: translate(2.20715%, -.19565%)
    }

    25.5% {
        transform: translate(1.86076%, .1172%)
    }

    27% {
        transform: translate(-2.79189%, .59823%)
    }

    28.5% {
        transform: translate(.49398%, -.5026%)
    }

    100%,
    30% {
        transform: none
    }
}

.bbb::before {
    content: "";
    display: block;
    mix-blend-mode: multiply;
    position: absolute;
    width: 551px;
    height: 983px;
    z-index: 1
}

.glitch1_style {
    position: absolute;
    left: 50%;
    bottom: 0;
    /* margin-left: -1000px; */
    margin-left: -880px;
    width: 614px;
    height: 945px;
    z-index: 500
}

.glitch1_style .glitch {
    left: 0;
    bottom: 0
}

.glitch1_style .glitch .channel,
.glitch1_style .glitch::after,
.glitch1_style .glitch::before {
    background-size: cover
}

.glitch1_style .glitch .channel::before {
    width: 100%;
    height: 100%
}

.glitch1_style .r::before {
    background: url(../images/top3_r.png) 50% 0/cover no-repeat
}

.glitch1_style .g::before {
    background: url(../images/top3_g.png) 50% 0/cover no-repeat
}

.glitch1_style .b::before {
    background: url(../images/top3_b.png) 50% 0/cover no-repeat
}

.glitch2_style {
    position: absolute;
    left: 50%;
    bottom: -140px;
    margin-left: -650px;
    width: 638px;
    height: 1061px;
    z-index: 610
}

.glitch2_style .glitch {
    left: 0;
    bottom: 0
}

.glitch2_style .glitch .channel,
.glitch2_style .glitch::after,
.glitch2_style .glitch::before {
    background-size: cover
}

.glitch2_style .glitch .channel::before {
    width: 100%;
    height: 100%
}

.glitch2_style .r::before {
    background: url(../images/man_r.png) 50% 0/cover no-repeat
}

.glitch2_style .g::before {
    background: url(../images/man_g.png) 50% 0/cover no-repeat
}

.glitch2_style .b::before {
    background: url(../images/man_b.png) 50% 0/cover no-repeat
}

.top_num {
    position: absolute;
    left: 0;
    top: 0;
    width: 261px;
    height: 161px;
    z-index: 500
}

.top_num .glitch {
    overflow: visible;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

.top_num .glitch .channel,
.top_num .glitch::after,
.top_num .glitch::before {
    background-size: cover
}

.top_num .glitch .channel::before {
    width: 100%;
    height: 100%
}

.top_num .r::before {
    background: url(../images/top_num_r.png) 50% 0/cover no-repeat
}

.top_num .g::before {
    background: url(../images/top_num_g.png) 50% 0/cover no-repeat
}

.top_num .b::before {
    background: url(../images/top_num_b.png) 50% 0/cover no-repeat
}

.target .member_posi {
    opacity: 0;
    transition: .5s ease
}

.target.event-start .member_posi {
    opacity: 1
}

.target.event-start .member_posi .glitch {
    overflow: visible;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

.target.event-start .member_posi .glitch .channel,
.target.event-start .member_posi .glitch::after,
.target.event-start .member_posi .glitch::before {
    background-size: cover
}

.target.event-start .member_posi .glitch .channel::before {
    width: 100%;
    height: 100%
}

.target.event-start .member_posi .r::before {
    background: url(../images/member_r.png) 50% 0/cover no-repeat
}

.target.event-start .member_posi .g::before {
    background: url(../images/member_g.png) 50% 0/cover no-repeat
}

.target.event-start .member_posi .b::before {
    background: url(../images/member_b.png) 50% 0/cover no-repeat
}

.target.event-start .member_posi.animated {
    opacity: 1
}

.target.event-start .member_posi.animated:not(.animeNone) .glitch::before {
    animation: glitch-before 3s linear forwards
}

.target.event-start .member_posi.animated:not(.animeNone) .glitch::after {
    animation: glitch-after 3s linear forwards
}

.target.event-start .member_posi.animated:not(.animeNone) .glitch .r {
    animation: rgb-shift-r 3s steps(1, jump-end) forwards
}

.target.event-start .member_posi.animated:not(.animeNone) .glitch .g {
    animation: rgb-shift-g 3s steps(1, jump-end) forwards
}

.target.event-start .member_posi.animated:not(.animeNone) .glitch .b {
    animation: rgb-shift-b 3s steps(1, jump-end) forwards
}

.member_grid .target.ok:hover .member_posi .glitch::before {
    animation: glitch-after2 3s linear forwards
}

.member_grid .target.ok:hover .member_posi .glitch::after {
    animation: glitch-after2 3s linear forwards
}

.member_grid .target.ok:hover .member_posi .glitch .r {
    animation: rgb-shift-r2 3s steps(1, jump-end) forwards
}

.member_grid .target.ok:hover .member_posi .glitch .g {
    animation: rgb-shift-g2 3s steps(1, jump-end) forwards
}

.member_grid .target.ok:hover .member_posi .glitch .b {
    animation: rgb-shift-b2 3s steps(1, jump-end) forwards
}

@keyframes glitch-before2 {
    0% {
        clip-path: polygon(0 46.26697%, 100% 46.26697%, 100% 53.04154%, 0 53.04154%);
        transform: translate(4.19911%, -.14066%)
    }

    1.5% {
        clip-path: polygon(0 43.36829%, 100% 43.36829%, 100% 46.63289%, 0 46.63289%);
        transform: translate(-2.14876%, .22144%)
    }

    3% {
        clip-path: polygon(0 13.25346%, 100% 13.25346%, 100% 19.7342%, 0 19.7342%);
        transform: translate(-4.38806%, -.37782%)
    }

    4.5% {
        clip-path: polygon(0 65.501%, 100% 65.501%, 100% 72.77061%, 0 72.77061%);
        transform: translate(-3.32231%, .27781%)
    }

    6% {
        clip-path: polygon(0 73.78248%, 100% 73.78248%, 100% 80.77921%, 0 80.77921%);
        transform: translate(6.01778%, .08123%)
    }

    7.5% {
        clip-path: polygon(0 73.16691%, 100% 73.16691%, 100% 78.22538%, 0 78.22538%);
        transform: translate(4.17537%, .27372%)
    }

    9% {
        clip-path: polygon(0 79.43074%, 100% 79.43074%, 100% 80.74696%, 0 80.74696%);
        transform: translate(1.13988%, .20895%)
    }

    10.5% {
        clip-path: polygon(0 73.03217%, 100% 73.03217%, 100% 75.29462%, 0 75.29462%);
        transform: translate(-1.84928%, -.09365%)
    }

    12% {
        clip-path: polygon(0 28.03365%, 100% 28.03365%, 100% 37.00023%, 0 37.00023%);
        transform: translate(5.92631%, -.44084%)
    }

    13.5% {
        clip-path: polygon(0 21.50277%, 100% 21.50277%, 100% 27.7532%, 0 27.7532%);
        transform: translate(.34142%, .14317%)
    }

    15% {
        clip-path: polygon(0 43.5392%, 100% 43.5392%, 100% 45.73622%, 0 45.73622%);
        transform: translate(-.95964%, -.15131%)
    }

    16.5% {
        clip-path: polygon(0 8.23984%, 100% 8.23984%, 100% 10.08683%, 0 10.08683%);
        transform: translate(-.08268%, .03255%)
    }

    18% {
        clip-path: polygon(0 45.13501%, 100% 45.13501%, 100% 47.43509%, 0 47.43509%);
        transform: translate(2.40997%, -.10589%)
    }

    19.5% {
        clip-path: polygon(0 55.38971%, 100% 55.38971%, 100% 60.72629%, 0 60.72629%);
        transform: translate(2.25826%, .06533%)
    }

    21% {
        clip-path: polygon(0 23.26562%, 100% 23.26562%, 100% 31.88566%, 0 31.88566%);
        transform: translate(2.42719%, -.32177%)
    }

    22.5% {
        clip-path: polygon(0 81.02336%, 100% 81.02336%, 100% 87.09494%, 0 87.09494%);
        transform: translate(7.25269%, .14968%)
    }

    24% {
        clip-path: polygon(0 24.50542%, 100% 24.50542%, 100% 29.29776%, 0 29.29776%);
        transform: translate(5.44048%, -.03357%)
    }

    25.5% {
        clip-path: polygon(0 84.47725%, 100% 84.47725%, 100% 88.92991%, 0 88.92991%);
        transform: translate(-3.35476%, -.3546%)
    }

    27% {
        clip-path: polygon(0 19.38014%, 100% 19.38014%, 100% 28.3638%, 0 28.3638%);
        transform: translate(3.66441%, .43115%)
    }

    28.5% {
        clip-path: polygon(0 18.18882%, 100% 18.18882%, 100% 27.14736%, 0 27.14736%);
        transform: translate(-.43848%, -.38762%)
    }

    100%,
    30% {
        clip-path: none;
        transform: none
    }
}

@keyframes glitch-after2 {
    0% {
        clip-path: polygon(0 51.01391%, 100% 51.01391%, 100% 55.9378%, 0 55.9378%);
        transform: translate(-1.12852%, -.11814%)
    }

    1.5% {
        clip-path: polygon(0 85.78187%, 100% 85.78187%, 100% 92.14852%, 0 92.14852%);
        transform: translate(-2.57407%, .41777%)
    }

    3% {
        clip-path: polygon(0 9.51612%, 100% 9.51612%, 100% 14.08939%, 0 14.08939%);
        transform: translate(.01882%, -.33379%)
    }

    4.5% {
        clip-path: polygon(0 7.77533%, 100% 7.77533%, 100% 15.19518%, 0 15.19518%);
        transform: translate(4.3961%, -.15881%)
    }

    6% {
        clip-path: polygon(0 53.21326%, 100% 53.21326%, 100% 62.05243%, 0 62.05243%);
        transform: translate(2.79982%, .1803%)
    }

    7.5% {
        clip-path: polygon(0 44.95841%, 100% 44.95841%, 100% 47.5605%, 0 47.5605%);
        transform: translate(2.38417%, .18929%)
    }

    9% {
        clip-path: polygon(0 86.04493%, 100% 86.04493%, 100% 91.81696%, 0 91.81696%);
        transform: translate(-.31311%, -.20062%)
    }

    10.5% {
        clip-path: polygon(0 13.69439%, 100% 13.69439%, 100% 18.58458%, 0 18.58458%);
        transform: translate(-1.76683%, .22569%)
    }

    12% {
        clip-path: polygon(0 50.754%, 100% 50.754%, 100% 55.94062%, 0 55.94062%);
        transform: translate(6.0872%, .48715%)
    }

    13.5% {
        clip-path: polygon(0 2.64009%, 100% 2.64009%, 100% 8.82355%, 0 8.82355%);
        transform: translate(6.52343%, .22655%)
    }

    15% {
        clip-path: polygon(0 80.92739%, 100% 80.92739%, 100% 88.95449%, 0 88.95449%);
        transform: translate(-2.26138%, -.31979%)
    }

    16.5% {
        clip-path: polygon(0 44.02076%, 100% 44.02076%, 100% 45.38163%, 0 45.38163%);
        transform: translate(6.4713%, .00955%)
    }

    18% {
        clip-path: polygon(0 13.72763%, 100% 13.72763%, 100% 17.90401%, 0 17.90401%);
        transform: translate(-1.17207%, -.25274%)
    }

    19.5% {
        clip-path: polygon(0 29.59803%, 100% 29.59803%, 100% 37.54388%, 0 37.54388%);
        transform: translate(-7.74909%, .28247%)
    }

    21% {
        clip-path: polygon(0 28.45843%, 100% 28.45843%, 100% 37.21301%, 0 37.21301%);
        transform: translate(-3.13168%, .31552%)
    }

    22.5% {
        clip-path: polygon(0 67.37549%, 100% 67.37549%, 100% 72.22091%, 0 72.22091%);
        transform: translate(-5.82522%, -.06847%)
    }

    24% {
        clip-path: polygon(0 68.51287%, 100% 68.51287%, 100% 74.72721%, 0 74.72721%);
        transform: translate(1.26723%, .37347%)
    }

    25.5% {
        clip-path: polygon(0 8.72144%, 100% 8.72144%, 100% 12.18605%, 0 12.18605%);
        transform: translate(-1.75924%, .38053%)
    }

    27% {
        clip-path: polygon(0 54.91744%, 100% 54.91744%, 100% 60.23814%, 0 60.23814%);
        transform: translate(3.79671%, .12699%)
    }

    28.5% {
        clip-path: polygon(0 21.47661%, 100% 21.47661%, 100% 26.36132%, 0 26.36132%);
        transform: translate(3.49847%, .21982%)
    }

    100%,
    30% {
        clip-path: none;
        transform: none
    }
}

@keyframes rgb-shift-r2 {
    0% {
        transform: translate(-1.41992%, .48337%)
    }

    1.5% {
        transform: translate(-.4686%, -.18138%)
    }

    3% {
        transform: translate(.55774%, -.06454%)
    }

    4.5% {
        transform: translate(.83857%, -.05194%)
    }

    6% {
        transform: translate(1.70614%, -.01566%)
    }

    7.5% {
        transform: translate(.8986%, -.04383%)
    }

    9% {
        transform: translate(-.60942%, -.41863%)
    }

    10.5% {
        transform: translate(-.41417%, -.10593%)
    }

    12% {
        transform: translate(1.4945%, -.48223%)
    }

    13.5% {
        transform: translate(1.29529%, -.21783%)
    }

    15% {
        transform: translate(.97996%, -.48203%)
    }

    16.5% {
        transform: translate(-.09162%, -.30819%)
    }

    18% {
        transform: translate(-.66197%, .03202%)
    }

    19.5% {
        transform: translate(1.57781%, -.49211%)
    }

    21% {
        transform: translate(.36981%, -.32556%)
    }

    22.5% {
        transform: translate(1.06458%, -.45025%)
    }

    24% {
        transform: translate(.80384%, .47763%)
    }

    25.5% {
        transform: translate(.73885%, .0368%)
    }

    27% {
        transform: translate(-.46721%, -.17086%)
    }

    28.5% {
        transform: translate(-.66521%, -.04031%)
    }

    100%,
    30% {
        transform: none
    }
}

@keyframes rgb-shift-g2 {
    0% {
        transform: translate(-.87667%, -.04929%)
    }

    1.5% {
        transform: translate(.12151%, .08345%)
    }

    3% {
        transform: translate(-1.95733%, .00285%)
    }

    4.5% {
        transform: translate(-1.79003%, -.32642%)
    }

    6% {
        transform: translate(-.04446%, -.25893%)
    }

    7.5% {
        transform: translate(.47717%, .22187%)
    }

    9% {
        transform: translate(1.59904%, -.16784%)
    }

    10.5% {
        transform: translate(1.04492%, -.27137%)
    }

    12% {
        transform: translate(1.60837%, .22741%)
    }

    13.5% {
        transform: translate(.03464%, -.12794%)
    }

    15% {
        transform: translate(1.80971%, -.37602%)
    }

    16.5% {
        transform: translate(-1.55998%, .29159%)
    }

    18% {
        transform: translate(-.57851%, -.13763%)
    }

    19.5% {
        transform: translate(-1.19493%, -.04244%)
    }

    21% {
        transform: translate(1.78878%, -.47556%)
    }

    22.5% {
        transform: translate(1.33867%, -.17607%)
    }

    24% {
        transform: translate(-.53443%, -.41362%)
    }

    25.5% {
        transform: translate(-.10667%, .08719%)
    }

    27% {
        transform: translate(-1.6506%, -.34888%)
    }

    28.5% {
        transform: translate(-.60458%, -.0533%)
    }

    100%,
    30% {
        transform: none
    }
}

@keyframes rgb-shift-b2 {
    0% {
        transform: translate(-1.02647%, -.13471%)
    }

    1.5% {
        transform: translate(-.03476%, -.25714%)
    }

    3% {
        transform: translate(-.36792%, .23815%)
    }

    4.5% {
        transform: translate(.33751%, -.19032%)
    }

    6% {
        transform: translate(1.56759%, .35468%)
    }

    7.5% {
        transform: translate(-1.15057%, -.12714%)
    }

    9% {
        transform: translate(1.54249%, -.30217%)
    }

    10.5% {
        transform: translate(-.75066%, .42158%)
    }

    12% {
        transform: translate(-.85559%, .34688%)
    }

    13.5% {
        transform: translate(-.19015%, -.45542%)
    }

    15% {
        transform: translate(-1.63093%, .29364%)
    }

    16.5% {
        transform: translate(.70451%, -.396%)
    }

    18% {
        transform: translate(-.78958%, .34037%)
    }

    19.5% {
        transform: translate(-1.02726%, .42474%)
    }

    21% {
        transform: translate(-1.77838%, -.40332%)
    }

    22.5% {
        transform: translate(1.27979%, .41011%)
    }

    24% {
        transform: translate(.78993%, -.02209%)
    }

    25.5% {
        transform: translate(1.14713%, .04168%)
    }

    27% {
        transform: translate(-.04939%, -.25657%)
    }

    28.5% {
        transform: translate(1.36145%, .27876%)
    }

    100%,
    30% {
        transform: none
    }
}

.wel_glitch {
    position: relative;
    height: 650px;
    background-color: #000
}

.wel_glitch .glitch {
    left: 0;
    bottom: 0;
    background-position: 50% 0
}

.wel_glitch .glitch .channel,
.wel_glitch .glitch::after,
.wel_glitch .glitch::before {
    background-size: cover
}

.wel_glitch .glitch .channel::before {
    width: 100%;
    height: 100%
}

.wel_glitch .r::before {
    background: url(../images/welfare4_r.png) 50% 0/cover no-repeat
}

.wel_glitch .g::before {
    background: url(../images/welfare4_g.png) 50% 0/cover no-repeat
}

.wel_glitch .b::before {
    background: url(../images/welfare4_b.png) 50% 0/cover no-repeat
}

.num_in {
    position: absolute;
    left: 0;
    top: 0;
    width: 162px;
    height: 99px;
    z-index: 500
}

.num_in .glitch {
    overflow: visible;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

.num_in .glitch .channel,
.num_in .glitch::after,
.num_in .glitch::before {
    background-size: cover
}

.num_in .glitch .channel::before {
    width: 100%;
    height: 100%
}

.num_in .r::before {
    background: url(../images/top_num_r.png) 50% 0/cover no-repeat
}

.num_in .g::before {
    background: url(../images/top_num_g.png) 50% 0/cover no-repeat
}

.num_in .b::before {
    background: url(../images/top_num_b.png) 50% 0/cover no-repeat
}

@media only screen and (max-width:1680px) {
    .glitch1_style {
        /* margin-left: -920px */
        margin-left: -800px
    }

    .glitch2_style {
        margin-left: -560px
    }
}

@media only screen and (max-width:1280px) {
    .glitch1_style {
        /* margin-left: -750px */
        margin-left: -640px
    }

    .glitch2_style {
        margin-left: -400px
    }

    .num_in {
        width: 130px;
        height: 79px
    }
}

@media only screen and (max-width:1024px) {
    .glitch1_style {
        position: absolute;
        left: 50%;
        bottom: auto;
        top: 150px;
        /* margin-left: -400px; */
        /* width: 400px;
        height: 689px */
        margin-left: -310px;
        width: 420px;
        height: 651px
    }

    .glitch2_style {
        position: absolute;
        left: 50%;
        bottom: auto;
        top: 180px;
        margin-left: -125px;
        width: 440px;
        height: 731px
    }

    .wel_glitch {
        height: 400px
    }
}

@media only screen and (max-width:740px) {
    .glitch1_style {
        position: absolute;
        left: 50%;
        bottom: auto;
        top: 240px;
        /* margin-left: -250px;
        width: 250px;
        height: 431px */
        margin-left: -200px;
        width: 260px;
        height: 404px
    }

    .glitch2_style {
        position: absolute;
        left: 50%;
        bottom: auto;
        top: 280px;
        margin-left: -80px;
        width: 280px;
        height: 465px
    }

    .top_num {
        position: absolute;
        left: 0;
        top: 0;
        width: 160px;
        height: 99px;
        z-index: 500
    }

    .top_num .glitch {
        overflow: visible;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%
    }

    .top_num .glitch .channel,
    .top_num .glitch::after,
    .top_num .glitch::before {
        background-size: cover
    }

    .top_num .glitch .channel::before {
        width: 100%;
        height: 100%
    }

    .top_num .r::before {
        background: url(../images/top_num_r.png) 50% 0/cover no-repeat
    }

    .top_num .g::before {
        background: url(../images/top_num_g.png) 50% 0/cover no-repeat
    }

    .top_num .b::before {
        background: url(../images/top_num_b.png) 50% 0/cover no-repeat
    }

    .num_in {
        width: 100px;
        height: 61px
    }
}