.oc_button{
    display: block;
    position: relative;
    width: 27px;
    height: 27px;
    overflow: hidden;
    margin: 20px 5vw 0vw 0vw;
    float: right;
}

.line1,.line2,.line3{
    display: block;
    width: 37px;
    height: 1px;
    background-color:rgb(57, 57, 57);
    position: absolute;
}
.line1{top:2px;left: -5px;}
.line2{top:12px;left: -5px;}
.line3{top:22px;left: -5px;}
.move1{animation: op_anime1 0.5s ease-in 1 forwards;}

@keyframes op_anime1 {
    0% {top:2px;}
    25% {top:12px;}
    75% {top:12px;}
    100%{top:12px; transform: rotate(-45deg);}
    }
.move2{animation: op_anime2 0.5s ease-in 1 forwards;}
@keyframes op_anime2 {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100%{opacity: 0;}
    }
.move3{animation: op_anime3 0.5s ease-in 1 forwards;}
@keyframes op_anime3 {
    0% {top:34px;}
    25% {top:12px;}
    75% {top:12px;}
    100%{top:12px; transform: rotate(45deg);}
    }

.move4{animation: op_anime4 0.5s ease-out 1 forwards;}
 @keyframes op_anime4 {
    0% {top:12px; transform: rotate(45deg);}
    25% {top:12px;}
    75% {top:12px;}
    100%{top:2px;}
    }
.move5{animation: op_anime5 0.5s ease-out 1 forwards;}
 @keyframes op_anime5 {
    0% {opacity: 0;}
    50% {opacity: 0;}
    100%{opacity: 1;}
   }
.move6{animation: op_anime6 0.5s ease-out 1 forwards;}
@keyframes op_anime6 {
    0% {top:12px;transform: rotate(-45deg);}
    25% {top:12px;}
    75% {top:12px;}
    100%{top:22px;}
    }

    .close_button{
        display: block;
        position: relative;
        width: 27px;
        height: 27px;
        overflow: hidden;
        float: right;
    }    

    .line4,.line5{
        display: block;
        width: 37px;
        height: 1px;
        background-color:rgb(255, 255, 255);
        position: absolute;
    }
    .line4{
        transform: rotate(45deg);
        top:18px
    }
    .line5{
        transform: rotate(-45deg);
        top:14px
    }