/* menu */
.menu-btn {
    position: relative;
    width: 24px;
    padding: 10px 0;
    cursor: pointer;
    margin: auto;
/*    overflow: hidden;*/
}

.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;
}
/* more */
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 */
/*
.arrow-top,.arrow-left,.arrow-right,.arrow-right2,.arrow-left2,.arrow-btm{
    display: inline-block;
    position: relative;
}
*/
.arrow-top::after{
    content: '';
    width: .5em;
    height: .5em;
    border-top: 1px solid;
    border-left: 1px solid;
    transform: rotate(45deg);
}
span.arrow-right::before ,
.arrow-right a::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;
}
span.arrow-left::before ,
.arrow-left a::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);
}