/* ==========================================================================
   menu icon
   ========================================================================== */


@keyframes resetBottom {
    0% {
        width: 100%;
    }
    100% {  
        width: 70%;
    }
}
@keyframes moveBottom {
    0% {
        width: 70%;
    }
    100% {  
        width: 100%;
    }
}
header #main_menu #top-menu li .menu_btn.out .line2{
    animation: resetBottom .2s linear forwards;
}
header #main_menu #top-menu li .menu_btn.hover .line2{
    animation: moveBottom .2s linear forwards;
}


@keyframes openTop {
    0% { 
        transform: rotateZ(0deg);
        top: 0px;
        background: #fff;
    }
    100% {  
        transform: rotateZ(45deg);
        top: 5px;
        background: #fff;
    }
}
@keyframes openBottom {
    0% {
        transform: rotateZ(0deg);
        bottom: 0px;
        background: #fff;
    }
    100% {  
        transform: rotateZ(-45deg);
        bottom: 5px;
        background: #fff;
    }
}


.md-content #main_menu #top-menu li .menu_btn.open .line1,
header #main_menu #top-menu li .menu_btn.open .line1{
    animation: openTop .5s cubic-bezier(.07,1.05,.47,1) forwards;
}
.md-content #main_menu #top-menu li .menu_btn.open .line2,
header #main_menu #top-menu li .menu_btn.open .line2{
    animation: openBottom .5s cubic-bezier(.07,1.05,.47,1) forwards;
    width: 100%;
} 


@keyframes openTop_sp {
    0% { 
        transform: rotateZ(0deg);
        top: 0px;
        background: #fff;
    }
    100% {  
        transform: rotateZ(45deg);
        top: 1.3vw;
        background: #fff;
    }
}
@keyframes openBottom_sp {
    0% {
        transform: rotateZ(0deg);
        bottom: 0px;
        width: 70%;
        background: #fff;
    }
    100% {  
        transform: rotateZ(-45deg);
        bottom: 1.3vw;
        width: 100%;
        background: #fff;
    }
}

@media screen and (max-width: 750px) {
    .md-content #main_menu #top-menu li .menu_btn.open .line1,
    header #main_menu #top-menu li .menu_btn.open .line1{
        animation: openTop_sp .5s cubic-bezier(.07,1.05,.47,1) forwards;
    }
    .md-content #main_menu #top-menu li .menu_btn.open .line2,
    header #main_menu #top-menu li .menu_btn.open .line2{
        animation: openBottom_sp .5s cubic-bezier(.07,1.05,.47,1) forwards;
        width: 100%;
    } 
}



@keyframes closeTop {
    0% {
        transform: rotateZ(45deg);
        top: 5px;
        background: #fff;
    }
    100% {  
        transform: rotateZ(0deg);
        top: 0px;
        background: #fff;
    }
}
@keyframes closeBottom {
    0% {
        transform: rotateZ(-45deg);
        bottom: 5px;
        width: 100%;
        background: #fff;
    }
    100% {  
        transform: rotateZ(0deg);
        bottom: 0px;
        width: 70%;
        background: #fff;
    }
}
.md-content #main_menu #top-menu li .menu_btn.close .line1,
header #main_menu #top-menu li .menu_btn.close .line1{
    animation: closeTop .5s cubic-bezier(.07,1.05,.47,1) forwards;
}
.md-content #main_menu #top-menu li .menu_btn.close .line2,
header #main_menu #top-menu li .menu_btn.close .line2{
    animation: closeBottom .5s cubic-bezier(.07,1.05,.47,1) forwards;
}


@keyframes closeTop_sp {
    0% {
        transform: rotateZ(45deg);
        top: 1.3vw;
        background: #fff;
    }
    100% {  
        transform: rotateZ(0deg);
        top: 0px;
        background: #fff;
    }
}
@keyframes closeBottom_sp {
    0% {
        transform: rotateZ(-45deg);
        bottom: 1.3vw;
        width: 100%;
        background: #fff;
    }
    100% {  
        transform: rotateZ(0deg);
        bottom: 0px;
        width: 70%;
        background: #fff;
    }
}


@media screen and (max-width: 750px) {
    .md-content #main_menu #top-menu li .menu_btn.close .line1,
    header #main_menu #top-menu li .menu_btn.close .line1{
        animation: closeTop_sp .5s cubic-bezier(.07,1.05,.47,1) forwards;
    }
    .md-content #main_menu #top-menu li .menu_btn.close .line2,
    header #main_menu #top-menu li .menu_btn.close .line2{
        animation: closeBottom_sp .5s cubic-bezier(.07,1.05,.47,1) forwards;
    }
}


/* ==========================================================================
   appear animation
   ========================================================================== */
.move_up {
    opacity: 0;
    transform: translateY(5vh);
    transition: opacity, transform;
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.animation.is_active.move_up {
    opacity: 1 !important;
    transform: translateY(0);
}

.move_down {
    opacity: 0;
    transform: translateY(-5vh);
    transition: opacity, transform;
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.animation.is_active.move_down {
    opacity: 1 !important;
    transform: translateY(0);
}

.move_left {
    opacity: 0;
    transform: translateX(5vh);
    transition: opacity, transform;
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.animation.move_left.is_active {
    opacity: 1 !important;
    transform: translateY(0);
}

.move_right {
    opacity: 0;
    transform: translateX(-5vh);
    transition: opacity, transform;
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.animation.move_right.is_active {
    opacity: 1 !important;
    transform: translateY(0);
}

.zoom{
    transform: scale(1.1);
    transition: transform;
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.animation.zoom.is_active{
    transform: scale(1);
}

.appear{
    opacity: 0;
}
.animation.appear.is_active{
    opacity: 1 !important;
    transition: opacity;
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.appearx2{
    opacity: 0;
}
.animation.appearx2.is_active{
    opacity: 1 !important;
    transition: opacity;
    transition-delay: 0.2s;
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.appearx3{
    opacity: 0;
}
.animation.appearx3.is_active{
    opacity: 1 !important;
    transition: opacity;
    transition-delay: 0.4s;
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.appearx4{
    opacity: 0;
}
.animation.appearx4.is_active{
    opacity: 1 !important;
    transition: opacity;
    transition-delay: 0.5s;
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.appearx5{
    opacity: 0;
}
.animation.appearx5.is_active{
    opacity: 1 !important;
    transition: opacity;
    transition-delay: 0.6s;
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}