.app-top-bar[data-v-8e0cddea] {
    width: 100%;
    height: 72px;
    padding: 16px;
    background-color: var(--layout-bg);
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

@media only screen and (max-width:499px) {
    .app-top-bar[data-v-8e0cddea] {
        height: 58px;
        border-bottom: 1px solid var(--gray-80);
        padding: 0 16px
    }
}

.app-top-bar__tab[data-v-8e0cddea] {
    position: relative;
    overflow-x: auto
}

.app-top-bar__tab-slide-bar[data-v-8e0cddea] {
    position: absolute;
    bottom: 15px;
    width: 62px;
    height: 4px;
    border-radius: 10px;
    -webkit-transition: all .3s;
    transition: all .3s;
    background-color: var(--green-primary)
}

@media only screen and (max-width:499px) {
    .app-top-bar__tab-slide-bar[data-v-8e0cddea] {
        width: 56px;
        bottom: 0
    }
}

[data-v-8e0cddea] .app-top-bar__router {
    font-size: 16px;
    height: 72px;
    line-height: 72px;
    color: var(--gray-20);
    margin-right: 16px;
    white-space: nowrap
}

@media only screen and (max-width:499px) {
    [data-v-8e0cddea] .app-top-bar__router {
        font-size: 14px;
        height: 58px;
        line-height: 58px;
        margin-right: 12px
    }
}

[data-v-8e0cddea] .app-top-bar__router--active {
    font-size: 20px;
    color: var(--white-title);
    font-weight: 500
}

@media only screen and (max-width:499px) {
    [data-v-8e0cddea] .app-top-bar__router--active {
        font-size: 14px
    }
}

.app-top-bar__search[data-v-8e0cddea] {
    width: auto
}

.app-top-bar__right[data-v-8e0cddea] {
    position: relative;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

@media only screen and (max-width:1002px) {
    .app-top-bar__right[data-v-8e0cddea] {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }
}

.app-top-bar__right[data-v-8e0cddea]:before {
    content: "";
    position: absolute;
    left: -19px;
    width: 20px;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(80%, var(--layout-bg)));
    background: linear-gradient(90deg, transparent, var(--layout-bg) 80%);
    pointer-events: none
}

.app-top-bar__right-gift[data-v-8e0cddea] {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--white-input-bg)
}

.app-top-bar__right-gift-popover[data-v-8e0cddea] {
    position: absolute;
    bottom: -35px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translate(-50%);
    white-space: nowrap;
    background-color: var(--green-primary);
    border-radius: 24px;
    color: var(--black-primary)
}

.app-top-bar__right-gift-popover[data-v-8e0cddea]:before {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--green-primary);
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translate(-50%) rotate(45deg);
    z-index: -1
}

.app-top-bar__search-icon-wrap[data-v-8e0cddea] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--white-input-bg)
}

@media only screen and (max-width:1002px) {
    .app-top-bar__search-icon-wrap[data-v-8e0cddea] {
        width: 32px;
        height: 32px
    }
    .app-top-bar__search-icon-wrap .app-top-bar__right-icon[data-v-8e0cddea] {
        width: 18px;
        height: 18px
    }
    .app-top-bar__avatar[data-v-8e0cddea] {
        width: 32px;
        height: 32px
    }
}

@media only screen and (max-width:499px) {
    .app-top-bar__avatar[data-v-8e0cddea],
    .app-top-bar__right-gift[data-v-8e0cddea],
    .app-top-bar__search[data-v-8e0cddea] {
        margin-left: 12px
    }
}

[data-v-8e0cddea] .app-top-bar__more-btn {
    margin-left: 16px
}

@media only screen and (max-width:499px) {
    [data-v-8e0cddea] .app-top-bar__more-btn {
        display: none
    }
}

@-webkit-keyframes wobble-8e0cddea {
    0%,
    to {
        -webkit-transform: translateX(0);
        transform: translate(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%
    }
    15% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg)
    }
    30% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg)
    }
    45% {
        -webkit-transform: rotate(-10.8deg);
        transform: rotate(-10.8deg)
    }
    60% {
        -webkit-transform: rotate(7.2deg);
        transform: rotate(7.2deg)
    }
    75% {
        -webkit-transform: rotate(-3.6deg);
        transform: rotate(-3.6deg)
    }
}

@keyframes wobble-8e0cddea {
    0%,
    to {
        -webkit-transform: translateX(0);
        transform: translate(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%
    }
    15% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg)
    }
    30% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg)
    }
    45% {
        -webkit-transform: rotate(-10.8deg);
        transform: rotate(-10.8deg)
    }
    60% {
        -webkit-transform: rotate(7.2deg);
        transform: rotate(7.2deg)
    }
    75% {
        -webkit-transform: rotate(-3.6deg);
        transform: rotate(-3.6deg)
    }
}

.wobble[data-v-8e0cddea] {
    -webkit-animation: wobble-8e0cddea .8s 1.5s both;
    animation: wobble-8e0cddea .8s 1.5s both
}

@-webkit-keyframes scale-out-top-8e0cddea {
    0% {
        -webkit-transform: translateX(-50%) scale(1);
        transform: translate(-50%) scale(1);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        opacity: 1
    }
    to {
        -webkit-transform: translateX(-50%) scale(0);
        transform: translate(-50%) scale(0);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        opacity: .3
    }
}

@keyframes scale-out-top-8e0cddea {
    0% {
        -webkit-transform: translateX(-50%) scale(1);
        transform: translate(-50%) scale(1);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        opacity: 1
    }
    to {
        -webkit-transform: translateX(-50%) scale(0);
        transform: translate(-50%) scale(0);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        opacity: .3
    }
}

.scale-out-top[data-v-8e0cddea] {
    -webkit-animation: scale-out-top-8e0cddea .3s both;
    animation: scale-out-top-8e0cddea .3s both
}