.menuActiveHeader {
    animation-name: menuActiveHeader;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: .2s;
}
@keyframes menuActiveHeader {
    0% {
        height: 120px;
    }

    100% {
        height: 100vh;
    }
}
.menuUnActiveHeader {
    animation-name: menuUnActiveHeader;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: .5s;
}
@keyframes menuUnActiveHeader {
    0% {
        height: 100vh;
    }

    100% {
        height: 120px;
    }
}
.menuActive {
    animation-name: menuActive;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 1s;
}
@keyframes menuActive {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
.menuUnActive {
    animation-name: menuUnActive;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 0.5s;
}
@keyframes menuUnActive {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
.selectItemActive{
    animation-name: selectItemActive;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
@keyframes selectItemActive{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.selectItemUnActive{
    animation-name: selectItemUnActive;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
@keyframes selectItemUnActive{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.headerUnActive{
    animation-name: headerUnActive;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: .5s;
}
@keyframes headerUnActive{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.headerActive{
    animation-name: headerActive;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: .5s;
}
@keyframes headerActive{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.indexChange{
    animation: indexChange;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes indexChange{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.pointActive{
    animation-name: pointActive;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: .5s;
}
@keyframes pointActive{
    0%{
        width: 10px;
        border-radius: 50%;
        background: white;
    }
    100%{
        width: 40px;
        border-radius: 10px;
        background: #073678;
    }
}
.pointUnActive{
    animation-name: pointUnActive;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: .5s;
}
@keyframes pointUnActive{
    0%{
        width: 40px;
        border-radius: 10px;
        background: #073678;
    }
    100%{
        width: 10px;
        border-radius: 50%;
        background: white;
    }
}
.circleActive{
    animation-name: circleActive;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: .5s;
}
@keyframes circleActive{
    0%{
        background:#D8E8FF;
        color: #083E89;
    }
    100%{
        background: #083E89;
        color: white;
    }
}
.circleUnActive{
    animation-name: circleUnActive;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: .5s;
}
@keyframes circleUnActive{
    0%{
        background: #083E89;
        color: white;
    }
    100%{
         background:#D8E8FF;
         color: #083E89;
    }
}
.searchInputActive{
    animation-name: searchInputActive;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
@keyframes searchInputActive{
    0%{
        width: 160px;
        height: 28px;
        font-size: 16px;
        opacity: 0;
    }
    100%{
        opacity: 1;
        width:800px;
        height:80px;
        font-size:60px;
    }   
}
.searchBlockImgActive{
    animation-name: searchBlockImgActive;
    animation-fill-mode: forwards;
    animation-duration: .5s;
    animation-iteration-count: 1;
}
@keyframes searchBlockImgActive{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.3);
    }
}