.opacity-nav-bar,
.fixed-nav-bar {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
}

.fixed-nav-bar {
    opacity: 0;
}
.title-area-bar {
    position: relative;
    display: flex;
    width: 100%;
    font-size: 32.58rpx;
    font-weight: 700;

    align-items: center;
    justify-content: center;
}
.title-left {
    box-sizing: border-box;
    padding: 0 213.58rpx 0 30.77rpx;

    justify-content: flex-start;
}

.front-white {
    color: #fff;
}
.front-black {
    color: #000;
}

.custom-top-icon {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 3.62rpx;
    display: flex;
    height: 100%;

    align-items: center;
}
.icon-back,
.icon-home {
    display: flex;
    width: 94rpx;
    height: 100%;
    text-align: center;

    align-items: center;
    justify-content: center;
}
.icon-back image,
.icon-home image {
    width: 39.82rpx;
    height: 39.82rpx;
}
.page-title {
    overflow: hidden;
    width: 260.64rpx;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.title-left .page-title,
.ios-nav-bar .title-left .page-title {
    width: 100%;
    text-align: left;
}
.ios-nav-bar .title-area-bar {
    font-size: 18px;
    font-weight: 600;
}
.ios-nav-bar .page-title {
    width: 289.6rpx;
}
.ios-border-bottom:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: .5;
    left: 0;
    width: 100%;
    height: 1px;
    /*border-bottom: 1px solid #e6e6e6;*/
    background-color: #e6e6e6;
    -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
}

.android-border-bottom {
    border-bottom: 1px solid #f5f5f5;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ios-nav-bar .title-area-bar {
        font-size: 36px;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .ios-nav-bar .title-area-bar {
        font-size: 54px;
    }
}