.icode-icon {
    width: 256px;
    height: 256px;
    font-size: 256px;
    position: absolute;
    cursor: pointer;
    overflow: hidden;
    box-sizing: content-box !important;
}

#weather_ico {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(#1e66f4, #1dd4ff);
    border-radius: 10%;
}
#weather_ico .part1 {
    width: 40%;
    height: 40%;
    border-radius: 50%;
    position: absolute;
    top: 20%;
    left: 15%;
    background-image: radial-gradient(#fddd1a, #fdcc0b);
    box-shadow: 0 0 0.04em #fddd1a;
    transition-duration: .5s;
}
#weather_ico .part2 {
    width: 36%;
    height: 40%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    position: absolute;
    top: 35%;
    left: 35%;
    background-color: #fff;
    opacity: .8;
    transition-duration: .5s;
}
#weather_ico .part2::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -30%;
    width: 48%;
    height: 48%;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: #fff;
    transition-duration: .5s;
}
#weather_ico .part2::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -48%;
    width: 60%;
    height: 60%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    background-color: #fff;
    transition-duration: .5s;
}
#weather_ico .part3 {
    width: 30%;
    height: 0;
    position: absolute;
    top: 60%;
    left: 28%;
    transform: skew(-25deg);
    border-left: .004em solid rgba(255, 255, 255, .8);
    border-right: .004em solid rgba(255, 255, 255, .8);
}
#weather_ico .part4 {
    width: 30%;
    height: 0;
    position: absolute;
    top: 60%;
    left: 43%;
    transform: skew(-25deg);
    border-left: .004em solid rgba(255, 255, 255, .8);
    border-right: .004em solid rgba(255, 255, 255, .8);
}
#weather_ico:hover .part1 {
    left: 30%;
    opacity: 0;
}
#weather_ico:hover .part2 {
    top: 20%;
    left: 30%;
    opacity: 1;
    background-color: #ccc;
}
#weather_ico:hover .part2::before {
    background-color: #ccc;
}
#weather_ico:hover .part2::after {
    background-color: #ccc;
}
#weather_ico:hover .part3 {
    animation: weather-rain1 .4s linear .5s infinite;
}
#weather_ico:hover .part4 {
    animation: weather-rain2 .4s linear .7s infinite;
}
@keyframes weather-rain1
{
    0% {
        height: 0;
        top: 60%;
        left: 28%;
    }
    50% {
        height: 10%;
        top: 60%;
        left: 25%;
    }
    100% {
        height: 10%;
        top: 70%;
        left: 22%;
    }
}
@keyframes weather-rain2
{
    0% {
        height: 0;
        top: 60%;
        left: 43%;
    }
    50% {
        height: 10%;
        top: 60%;
        left: 40%;
    }
    100% {
        height: 10%;
        top: 70%;
        left: 37%;
    }
}

#avatar_ico {
    width: 100%;
    height: 100%;
    background-color: #fdcc0b;
    border-radius: 10%;
}
#avatar_ico .part1 {
    width: 60%;
    height: 72%;
    position: absolute;
    top: 20%;
    left: 20%;
    background-color: #f8ddcc;
    border-radius: 90% 90% 100% 100% / 70% 70% 120% 120%;
    filter: drop-shadow(.02em .02em .012em rgba(0,0,0,.5));
}
#avatar_ico .part1::before {
    content: '';
    width: 110%;
    height: 20%;
    position: absolute;
    top: 50%;
    left: -5%;
    background-color: #f8ddcc;
    border-radius: 20% 20% 10% 10% / 20% 20% 80% 80%;
}
#avatar_ico .part1::after {
    content: '';
    width: 128%;
    height: 80%;
    position: absolute;
    top: -14%;
    left: -14%;
    background-color: #1e1916;
    clip-path: polygon(
        22% 52%,20% 54%,18% 57%,17% 59.6%,16.6% 62%,16.2% 68%,16.4% 76%,
        14% 72%,14.4% 80%,14.4% 84%,14% 92%,13% 96%,12% 99%,11% 100%,11.2% 96%,11% 90%,
        10% 80%,7% 60%,6.4% 50%,6.4% 46%,7% 40%,7.8% 37%,9.4% 33%,12% 30%,
        11% 26.6%,9% 25%,8.2% 25.4%,10% 23%,12% 22%,14% 23.2%,15% 23%,
        16% 16%,17% 12%,18.6% 9%,20% 8%,19.6% 13%,
        19.8% 15.8%,24% 11%,30% 6%,40% 2%,50% 1%,56% 0,54% 7%,
        56% 7%,64% 8%,70% 9.4%,76% 12%,80% 14.6%,84% 17%,82% 18%,
        86% 21%,88% 23.6%,90% 30%,91.6% 40%,92% 50%,91.6% 60%,
        89% 90%,88.8% 96%,89% 100%,88% 99%,87% 96%,86% 92%,85.6% 84%,85.6% 80%,86% 72%,86% 72%,85.8% 68%,
        85.4% 72%,84% 80%,83.2% 76%,
        82% 70%,80% 62%,79% 59.6%,77% 57%,74.4% 54%,72% 52%,70% 51%,68% 50.4%,64% 50%,
        66% 52%,68% 54.6%,69.2% 57%,72% 63.4%,74% 70%,67% 64%,61% 60%,51.6% 55%,40% 50%,
        44% 53%,47% 56%,50% 60%,54% 68%,55% 72%,52% 68%,48% 64.6%,44% 62%,33% 56%,28% 54%
    );
}

#avatar_ico .part2 {
    width: 14%;
    height: 10%;
    position: absolute;
    top: 54%;
    left: 30%;
    border-top: 0;
    border-bottom: .023em solid #000;
    background-color: #f8ddcc;
    border-radius: 40% 60% 40% 50% / 40% 60% 40% 40%;
    transition: 0.2s;
}
#avatar_ico .part2::before {
    display: none;
    content: '';
    width: 60%;
    height: 80%;
    position: absolute;
    left: 20%;
    top: 10%;
    background-image: radial-gradient(#000 0%, #000 30%, #85613f 100%);
    border-radius: 50%;
}
#avatar_ico .part2::after {
    display: none;
    content: '';
    width: 11%;
    height: 16%;
    position: absolute;
    left: 30%;
    top: 20%;
    background-color: #fff;
    border-radius: 50%;
}

#avatar_ico .part3 {
    width: 14%;
    height: 10%;
    position: absolute;
    top: 54%;
    left: 56%;
    border-top: 0;
    border-bottom: .023em solid #000;
    background-color: #f8ddcc;
    border-radius: 60% 40% 50% 40% / 60% 40% 40% 40%;
    transition: 0.2s;
}
#avatar_ico .part3::before {
    display: none;
    content: '';
    width: 60%;
    height: 80%;
    position: absolute;
    left: 20%;
    top: 10%;
    background-image: radial-gradient(#000 0%, #000 30%, #85613f 100%);
    border-radius: 50%;
}
#avatar_ico .part3::after {
    display: none;
    content: '';
    width: 11%;
    height: 16%;
    position: absolute;
    left: 30%;
    top: 20%;
    background-color: #fff;
    border-radius: 50%;
}

#avatar_ico .part4 {
    width: 10%;
    height: 24%;
    position: absolute;
    top: 51%;
    left: 45%;
    border-bottom: .016em solid #875441;
    border-radius: 0 0 50% 50%/0 0 10% 10%;
    background-color: #f8ddcc;
}
#avatar_ico .part4::before {
    content: '';
    width: 500%;
    height: 20%;
    background: #27231f;
    position: absolute;
    top: -10%;
    left: -200%;
    clip-path: polygon(42% 80%,10% 0,4% 60%,42% 100%,42% 80%,58% 80%,58% 100%,96% 60%,90% 0,58% 80%);
}
#avatar_ico .part4::after {
    content: '';
    width: 120%;
    height: 12%;
    position: absolute;
    bottom: -40%;
    left: -10%;
    border-top: .016em solid #27231f;
    border-bottom: .016em solid #c19f86;
    border-radius: 20% 20% 30% 30%;
}

#avatar_ico:hover .part2 {
    background-color: #fff;
    border-top: .023em solid #000;
    border-bottom: .004em solid #000;
}
#avatar_ico:hover .part2::before {
    display: block;
}
#avatar_ico:hover .part2::after {
    display: block;
}

#avatar_ico:hover .part3 {
    background-color: #fff;
    border-top: .023em solid #000;
    border-bottom: .004em solid #000;
}
#avatar_ico:hover .part3::before {
    display: block;
}
#avatar_ico:hover .part3::after {
    display: block;
}

#chart_ico {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(#252b30, #0b0f12);
    border-radius: 10%;
}
#chart_ico .part1 {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border-radius: 50%;
    overflow: hidden;
    transition: .2s;
}
#chart_ico .part1::after {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    border-radius: 50%;
    background-color: #fb3260;
    clip-path: polygon(50% 50%, 100% 46%, 100% 0, 15% 0);
}

#chart_ico .part2 {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border-radius: 50%;
    overflow: hidden;
    transition: .2s;
}
#chart_ico .part2::after {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    border-radius: 50%;
    background-color: #10cfad;
    clip-path: polygon(50% 50%, 100% 46%, 100% 100%, 70% 100%);
}

#chart_ico .part3 {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border-radius: 50%;
    overflow: hidden;
    transition: .2s;
}
#chart_ico .part3::after {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    border-radius: 50%;
    background-color: #d8fc00;
    clip-path: polygon(50% 50%, 70% 100%, 45% 100%);
}

#chart_ico .part4 {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border-radius: 50%;
    overflow: hidden;
    transition: .2s;
}
#chart_ico .part4::after {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    border-radius: 50%;
    background-color: #24d800;
    clip-path: polygon(50% 50%, 45% 100%, 0 100%, 0 0, 15% 0);
}

#chart_ico:hover .part1 {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
}
#chart_ico:hover .part2 {
    width: 76%;
    height: 76%;
    top: 12%;
    left: 12%;
}
#chart_ico:hover .part3 {
    width: 72%;
    height: 72%;
    top: 14%;
    left: 14%;
}
#chart_ico:hover .part4 {
    width: 68%;
    height: 68%;
    top: 16%;
    left: 16%;
}

#bar_ico {
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, .6));
    border-radius: 10%;
}
#bar_ico .part1 {
    position: absolute;
    width: .12em;
    height: 60%;
    top: 20%;
    left: 15%;
    background-color: #d6d6d6;
    border-radius: .06em;
}
#bar_ico .part1::after {
    content: '';
    position: absolute;
    width: .12em;
    height: 50%;
    bottom: 0;
    left: 0;
    background: linear-gradient(#cd28a8, #fb6739);
    border-radius: .06em;
    transition: .5s;
}
#bar_ico:hover .part1::after {
    height: 40%;
}
#bar_ico .part2 {
    position: absolute;
    width: .12em;
    height: 60%;
    top: 20%;
    left: 35%;
    background-color: #d6d6d6;
    border-radius: .06em;
}
#bar_ico .part2::after {
    content: '';
    position: absolute;
    width: .12em;
    height: 50%;
    bottom: 0;
    left: 0;
    background: linear-gradient(#cd28a8, #fb6739);
    border-radius: .06em;
    transition: .5s;
}
#bar_ico:hover .part2::after {
    height: 90%;
}
#bar_ico .part3 {
    position: absolute;
    width: .12em;
    height: 60%;
    top: 20%;
    left: 55%;
    background-color: #d6d6d6;
    border-radius: .06em;
}
#bar_ico .part3::after {
    content: '';
    position: absolute;
    width: .12em;
    height: 50%;
    bottom: 0;
    left: 0;
    background: linear-gradient(#cd28a8, #fb6739);
    border-radius: .06em;
    transition: .5s;
}
#bar_ico:hover .part3::after {
    height: 80%;
}
#bar_ico .part4 {
    position: absolute;
    width: .12em;
    height: 60%;
    top: 20%;
    left: 75%;
    background-color: #d6d6d6;
    border-radius: .06em;
}
#bar_ico .part4::after {
    content: '';
    position: absolute;
    width: .12em;
    height: 50%;
    bottom: 0;
    left: 0;
    background: linear-gradient(#cd28a8, #fb6739);
    border-radius: .06em;
    transition: .5s;
}
#bar_ico:hover .part4::after {
    height: 30%;
}

#lecture_ico {
    width: 100%;
    height: 100%;
    background-color: #cecece;
    border-radius: 10%;
}
#lecture_ico .part1 {
    width: 100%;
    height: 100%;
    background-color: #eee;
    border-radius: 10%;
    transition: .5s;
}
#lecture_ico .part1::before {
    content: '';
    width: calc(90% - .04em);
    height: 5%;
    position: absolute;
    top: 20%;
    left: 5%;
    border-left: .02em solid #666;
    border-right: .02em solid #666;
    background-image: linear-gradient(#dfe2e8, #7f807b);
}
#lecture_ico .part1::after {
    content: '';
    width: 90%;
    height: 2%;
    position: absolute;
    top: calc(55% + .04em);
    left: 5%;
    background-image: linear-gradient(#dfe2e8, #7f807b);
    transition: .5s;
}
#lecture_ico .part2 {
    width: 80%;
    height: 30%;
    position: absolute;
    top: 25%;
    left: calc(10% - .02em);
    background-color: #fdfdfd;
    border: .02em solid #000;
    transition: .5s;
}
#lecture_ico .part2::before {
    content: '';
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    transition: .5s;
}
#lecture_ico .part2::after {
    content: '';
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #cecece;
    transition: .5s;
}

#lecture_ico:hover .part1 {
    background-color: #000;
}
#lecture_ico:hover .part1::before {
    background-image: linear-gradient(#cecece, #000);
    border-left: .02em solid #202020;
    border-right: .02em solid #202020;
}
#lecture_ico:hover .part1::after {
    background-image: linear-gradient(#cecece, #000);
    top: calc(75% + .04em);
}
#lecture_ico:hover .part2 {
    height: 50%;
    background-color: #fff;
    box-shadow: 0 0 .2em rgba(255, 255, 255, .6);
}
#lecture_ico:hover .part2::before {
    display: block;
    clip-path: polygon(10% 40%,10% 60%,90% 60%,90% 40%);
    animation: lecture-sub1 8s linear infinite;
}
#lecture_ico:hover .part2::after {
    display: block;
    clip-path: polygon(30% 70%,30% 80%,70% 80%,70% 70%);
    animation: lecture-sub2 8s linear infinite;
}
@keyframes lecture-sub1
{
    0% {
        clip-path: polygon(10% 40%,10% 45%,10% 50%,10% 60%,90% 60%,90% 40%);
        background-color: #000;
    }
    20% {
        clip-path: polygon(10% 40%,10% 45%,10% 50%,10% 60%,90% 60%,90% 40%);
        background-color: #000;
    }
    25% {
        clip-path: polygon(40% 10%,40% 30%,40% 50%,40% 90%,90% 90%,90% 10%);
        background-color: #666;
    }
    45% {
        clip-path: polygon(40% 10%,40% 30%,40% 50%,40% 90%,90% 90%,90% 10%);
        background-color: #666;
    }
    50% {
        clip-path: polygon(50% 10%,50% 50%,10% 50%,10% 90%,90% 90%,90% 10%);
        background-color: #666;
    }
    70% {
        clip-path: polygon(50% 10%,50% 50%,10% 50%,10% 90%,90% 90%,90% 10%);
        background-color: #666;
    }
    75% {
        clip-path: polygon(35% 40%,35% 45%,35% 50%,35% 60%,45% 60%,45% 40%);
        background-color: #000;
    }
    95% {
        clip-path: polygon(35% 40%,35% 45%,35% 50%,35% 60%,45% 60%,45% 40%);
        background-color: #000;
    }
    100% {
        clip-path: polygon(10% 40%,10% 45%,10% 50%,10% 60%,90% 60%,90% 40%);
        background-color: #000;
    }
}
@keyframes lecture-sub2
{
    0% {
        clip-path: polygon(30% 70%,30% 80%,70% 80%,70% 70%);
        background-color: #cecece;
    }
    20% {
        clip-path: polygon(30% 70%,30% 80%,70% 80%,70% 70%);
        background-color: #cecece;
    }
    25% {
        clip-path: polygon(10% 10%,10% 90%,35% 90%,35% 10%);
        background-color: #4472C4;
    }
    45% {
        clip-path: polygon(10% 10%,10% 90%,35% 90%,35% 10%);
        background-color: #4472C4;
    }
    50% {
        clip-path: polygon(10% 10%,10% 45%,45% 45%,45% 10%);
        background-color: #ED7D31;
    }
    70% {
        clip-path: polygon(10% 10%,10% 45%,45% 45%,45% 10%);
        background-color: #ED7D31;
    }
    75% {
        clip-path: polygon(55% 40%,55% 60%,65% 60%,65% 40%);
        background-color: #000;
    }
    95% {
        clip-path: polygon(55% 40%,55% 60%,65% 60%,65% 40%);
        background-color: #000;
    }
    100% {
        clip-path: polygon(30% 70%,30% 80%,70% 80%,70% 70%);
        background-color: #cecece;
    }
}

#workflow_ico {
    width: calc(100% - .04em);
    height: calc(100% - .04em);
    background: linear-gradient(90deg, rgba(200, 200, 200, 0.4) 5%, transparent 0),linear-gradient(rgba(200, 200, 200, 0.4) 5%, transparent 0);
    background-size: 25% 25%;
    border-radius: 10%;
    border: .02em solid rgba(200, 200, 200, 1);
    box-sizing: content-box;
}
#workflow_ico .part1 {
    position: absolute;
    width: 36%;
    height: 36%;
    border-radius: 50%;
    top: 7%;
    left: 7%;
    border: .01em solid #ff684e;
    transition-duration: .5s;
    z-index: 10;
}
#workflow_ico:hover .part1 {
    background-color: #ff684e;
}
#workflow_ico .part2 {
    position: absolute;
    width: 0;
    height: 0;
    top: calc(25% - .01em);
    left: calc(43% + .01em);
    border-top: .02em solid #6495ee;
    border-bottom: .02em solid #6495ee;
    z-index: 1;
}
#workflow_ico .part2::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: -.04em;
    right: -.04em;
    background-color: #6495ee;
    clip-path: polygon(0% 0%,100% 50%,0% 100%);
}
#workflow_ico:hover .part2 {
    animation: workflow-line1 .5s linear .5s forwards;
}
#workflow_ico:hover .part2::after {
    animation: workflow-line1-after .5s linear .5s;
}
#workflow_ico .part3 {
    position: absolute;
    width: 0;
    height: 0;
    top: calc(25% - .01em);
    left: calc(74% + .01em);
    border-left: .02em solid #6495ee;
    border-right: .02em solid #6495ee;
    z-index: 1;
}
#workflow_ico .part3::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: -.04em;
    left: -.04em;
    background-color: #6495ee;
    clip-path: polygon(0% 0%,100% 0%,50% 100%);
}
#workflow_ico:hover .part3 {
    animation: workflow-line2 .5s linear 1s forwards;
}
#workflow_ico:hover .part3::after {
    animation: workflow-line2-after .5s linear 1s forwards;
}
#workflow_ico .part4 {
    position: absolute;
    width: 40%;
    height: 20%;
    border-radius: .04em;
    top: 65%;
    right: 5%;
    background-color: transparent;
    border: .01em solid #3db371;
}
#workflow_ico:hover .part4 {
    animation: workflow-end .5s linear 1.5s forwards;
}

@keyframes workflow-line1
{
    0% {
        width: 0;
        height: 0;
    }
    100% {
        width: 31%;
        height: 0;
    }
}
@keyframes workflow-line1-after
{
    0% {
        width: .08em;
        height: .08em;
    }
    100% {
        width: .08em;
        height: .08em;
    }
}
@keyframes workflow-line2
{
    0% {
        width: 0;
        height: 0;
    }
    100% {
        width: 0;
        height: calc(40% - .04em);
    }
}
@keyframes workflow-line2-after
{
    0% {
        width: .08em;
        height: .08em;
    }
    100% {
        width: .08em;
        height: .08em;
    }
}
@keyframes workflow-end
{
    0% {
        background-color: transparent;
    }
    100% {
        background-color: #3db371;
    }
}

#calendar_ico {
    width: 100%;
    height: 100%;
    background-color: #efefef;
    border-radius: 10%;
}
#calendar_ico .part1 {
    width: 100%;
    height: 100%;
    background: linear-gradient(#d45d5f, #d51b28);
    border-radius: 10%;
    clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%);
}
#calendar_ico .part2 {
    position: absolute;
    top: 30%;
    left: 20%;
    width: 60%;
    height: 60%;
    background: linear-gradient(90deg, #666 5%, transparent 0),linear-gradient(#666 5%, transparent 0);
    background-size: 25% 25%;
    border-right: .01em solid #666;
    border-bottom: .01em solid #666;
}
#calendar_ico .part3 {
    position: absolute;
    top: calc(52% - .05em);
    left: calc(57% - .05em);
    width: .08em;
    height: .08em;
    border-radius: 50%;
    border: .02em solid #4d993e;
    box-sizing: content-box;
}
#calendar_ico .part3::before {
    content: '';
    position: absolute;
    top: -.026em;
    left: -.026em;
    width: .13em;
    height: .13em;
    border-radius: 50%;
    background-color: #efefef;
}
#calendar_ico:hover .part3::before {
    animation: calendar-circle .5s linear forwards;
}
#calendar_ico .part4 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    background-color: #cfcfcf;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
#calendar_ico:hover .part4 {
    width: .2em;
    height: .2em;
    transition-duration: .5s;
    transition-delay: .5s;
}
@keyframes calendar-circle
{
    0% {
        clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 0 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0, 50% 0);
    }
    12.5% {
        clip-path: polygon(50% 50%, 0 0, 0 50%, 0 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0, 50% 0, 50% 0);
    }
    25% {
        clip-path: polygon(50% 50%, 0 50%, 0 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0, 50% 0, 50% 0, 50% 0);
    }
    37.5% {
        clip-path: polygon(50% 50%, 0 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0, 50% 0, 50% 0, 50% 0, 50% 0);
    }
    50% {
        clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 50%, 100% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0);
    }
    62.5% {
        clip-path: polygon(50% 50%, 100% 100%, 100% 50%, 100% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0);
    }
    75% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0);
    }
    87.5% {
        clip-path: polygon(50% 50%, 100% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0);
    }
    100% {
        clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0);
    }
}

#bug_ico {
    width: 100%;
    height: 100%;
    background: #69bfc0;
    border-radius: 10%;
    transition: all .5s ease .5s;
}
#bug_ico:hover {
    background: #fd342c;
}
#bug_ico .part1 {
    position: absolute;
    top: 45%;
    left: 20%;
    width: 60%;
    height: .04em;
    border-radius: .02em;
    background-color: #000;
}
#bug_ico .part1::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: .04em;
    border-radius: .02em;
    background-color: #000;
    transform: rotate(45deg);
}
#bug_ico .part1::after {
    content: '';
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: .04em;
    border-radius: .02em;
    background-color: #000;
    transform: rotate(-45deg);
}
#bug_ico .part2 {
    position: absolute;
    top: 30%;
    left: 30%;
    width: 40%;
    height: 40%;
    border-radius: 60% 60% 70% 70% / 40% 40% 100% 100%;
    background-color: #e91e21;
}
#bug_ico .part2::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 25%;
    width: 50%;
    height: 25%;
    border-radius: 80% 80% 20% 20% / 100% 100% 50% 50%;
    background-color: #000;
}
#bug_ico .part2::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 49%;
    width: 2%;
    height: 80%;
    background-color: #000;
}
#bug_ico .part3 {
    position: absolute;
    top: 50%;
    left: calc(50% - .08em);
    width: .16em;
    height: .16em;
    border-radius: .08em;
    background-color: #000;
}
#bug_ico .part3::before {
    content: '';
    position: absolute;
    top: -70%;
    left: -60%;
    width: .1em;
    height: .1em;
    border-radius: .05em;
    background-color: #000;
}
#bug_ico .part3::after {
    content: '';
    position: absolute;
    top: -70%;
    right: -60%;
    width: .1em;
    height: .1em;
    border-radius: .05em;
    background-color: #000;
}
#bug_ico .part4 {
    position: absolute;
    top: 80%;
    left: 80%;
    width: .32em;
    height: .32em;
    border-radius: .2em;
    background-color: rgba(255, 255, 255, .3);
    border: .04em solid #bbb;
    box-sizing: content-box;
    transition-duration: .5s;
}
#bug_ico:hover .part4 {
    top: 30%;
    left: 30%;
}
#bug_ico .part4::before {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -20%;
    width: 40%;
    height: .04em;
    border-radius: .02em;
    background-color: #bbb;
    transform: rotate(45deg);
}
#bug_ico .part4::after {
    content: '';
    position: absolute;
    bottom: -45%;
    right: -70%;
    width: 80%;
    height: .08em;
    border-radius: .04em;
    background-color: #d66500;
    transform: rotate(45deg);
}

#event_ico {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 10%;
}
#event_ico .part1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f6e6ff;
    border-radius: 10%;
    clip-path: polygon(0 0, 60% 0, 60% 30%, 0 30%);
    z-index: 1;
}
#event_ico .part2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #adf0d1;
    border-radius: 10%;
    clip-path: polygon(0 40%, 60% 40%, 60% 100%, 0 100%);
    z-index: 1;
}
#event_ico .part2::after {
    content: '';
    position: absolute;
    top: calc(40% - .03em);
    left: 0;
    width: calc(60% - .03em);
    height: calc(60% - .03em);
    background-color: #a3cfff;
    border-top: .06em solid #fff;
    border-right: .06em solid #fff;
    border-radius: 0 80% 0 16%;
    box-sizing: content-box;
}
#event_ico .part3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 10%;
}
#event_ico .part3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e1d0a3;
    border-radius: 10%;
    clip-path: polygon(70% 0, 100% 0, 100% 30%, 70% 30%);
    z-index: 1;
}
#event_ico .part3::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #c7d3de;
    border-radius: 10%;
    clip-path: polygon(70% 40%, 100% 40%, 100% 100%, 70% 100%);
    z-index: 1;
}
#event_ico .part4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 10%;
}
#event_ico .part4::before {
    content: '';
    position: absolute;
    top: 42%;
    left: 72%;
    width: .08em;
    height: .08em;
    border-radius: .04em;
    background-color: #db4e33;
    z-index: 2;
}
#event_ico .part4::after {
    content: '';
    position: absolute;
    top: calc(42% + .07em);
    left: calc(72% + .01em);
    width: .06em;
    height: .03em;
    background-color: #db4e33;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    box-sizing: content-box;
    z-index: 2;
}
#event_ico:hover .part4::before {
    content: '';
    position: absolute;
    top: calc(42% - .02em);
    left: calc(72% - .02em);
    width: .12em;
    height: .12em;
    border-radius: .06em;
    background-color: #db4e33;
    z-index: 10;
}
#event_ico:hover .part4::after {
    content: '';
    position: absolute;
    top: calc(42% - .03em);
    left: calc(72% - .03em);
    width: .1em;
    height: .1em;
    border-radius: .7em;
    background-color: transparent;
    border: .02em solid #db4e33;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    z-index: 10;
    animation: event-point 1s linear infinite;
}
@keyframes event-point {
    0% {
        top: calc(42% - .03em);
        left: calc(72% - .03em);
        width: .1em;
        height: .1em;
        border-radius: .7em;
    }
    100% {
        top: calc(42% - .08em);
        left: calc(72% - .08em);
        width: .2em;
        height: .2em;
        border-radius: .12em;
    }
}