.menu-btn {
position: relative;
width: 24px;
padding: 10px 0;
cursor: pointer;
margin: auto; }
.menu-btn .cp_bar,
.menu-btn .cp_bar:before,
.menu-btn .cp_bar:after {
display: block;
width: 24px;
height: 2px;
content: '';
transition: all 0.2s;
background: #222;
}
.menu-btn .cp_bar {
position: relative;
margin: 4px 0;
}
.menu-btn .cp_bar:before,
.menu-btn .cp_bar:after {
position: absolute;
}
.menu-btn .cp_bar:before {
top: 9px;
}
.menu-btn .cp_bar:after {
bottom: 9px;
}
.menu-btn.on .cp_bar:after {
transform: rotate(-45deg) translateX(-12.5px);
transform-origin: center center;
}
.menu-btn.on .cp_bar {
transform: translateX(10px);
background: transparent;
}
.menu-btn.on .cp_bar:before {
transform: rotate(45deg) translateX(-12.5px);
transform-origin: center center;
} a.more-circle {
display: flex;
justify-content: center;
align-items: center;
width: 4em;
height: 4em;
border: 3px solid;
border-radius: 100%;
position: relative;
margin: 1em auto;
transition: 0.2s;
}
a.more-circle span {
display: block;
font-size: 0.7em;
transform: translateY(-0.25em);
}
a.more-circle::after {
content: '';
width: .5em;
height: .5em;
border-top: 1px solid;
border-right: 1px solid;
position: absolute;
bottom: 0.8em;
left: calc(50% - .25em);
transform: rotate(135deg);
}
a.more-circle:hover {
color: #333;
}  .arrow-top::after{
content: '';
width: .5em;
height: .5em;
border-top: 1px solid;
border-left: 1px solid;
transform: rotate(45deg);
}
.arrow-right::before {
content: '';
width: .4em;
height: .4em;
border-top: 1px solid;
border-right: 1px solid;
position: absolute;
top: calc(50% - 0.2em);
right: 1em;
transform: rotate(45deg);
}
.arrow-right2::before {
content: '';
width:0;
height: 0;
border: solid transparent;
border-width: 0.4em 0 0.4em 0.7em;
border-color: transparent transparent transparent #4297bc;
position: absolute;
top: calc(50% - 0.4em);
right: 0.5em;
}
.arrow-left::before {
content: '';
width: .4em;
height: .4em;
border-top: 1px solid;
border-left: 1px solid;
position: absolute;
top: calc(50% - 0.2em);
left: 1em;
transform: rotate(-45deg);
}
.arrow-left2::before {
content: '';
width:0;
height: 0;
border: solid transparent;
border-width: 0.4em 0.7em 0.4em 0;
border-color: transparent #4297bc transparent transparent;
position: absolute;
top: calc(50% - 0.4em);
left: 0.5em;
}
.arrow-btm::after {
content: '';
border-top: 1px solid;
border-right: 1px solid;
transform: rotate(135deg);
}