@-moz-keyframes feed-animate-loading {
  0% {
    opacity: 0.3;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  40% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  50% {
    opacity: 0.6;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  60% {
    -webkit-transform: rotateY(270deg);
    transform: rotateY(270deg);
  }
  to {
    opacity: 0.3;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes feed-animate-loading {
  0% {
    opacity: 0.3;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  40% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  50% {
    opacity: 0.6;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  60% {
    -webkit-transform: rotateY(270deg);
    transform: rotateY(270deg);
  }
  to {
    opacity: 0.3;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
@-o-keyframes feed-animate-loading {
  0% {
    opacity: 0.3;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  40% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  50% {
    opacity: 0.6;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  60% {
    -webkit-transform: rotateY(270deg);
    transform: rotateY(270deg);
  }
  to {
    opacity: 0.3;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
@keyframes feed-animate-loading {
  0% {
    opacity: 0.3;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  40% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  50% {
    opacity: 0.6;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  60% {
    -webkit-transform: rotateY(270deg);
    transform: rotateY(270deg);
  }
  to {
    opacity: 0.3;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
.fixed-nav-bar {
  opacity: 0;
}
.opacity-nav-bar,
.fixed-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
.opacity-nav-bar .title-area-bar,
.fixed-nav-bar .title-area-bar {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md, 32.609rpx);
  font-weight: 700;
}
.opacity-nav-bar .title-area-bar .custom-top-icon,
.fixed-nav-bar .title-area-bar .custom-top-icon {
  display: flex;
  height: 100%;
  align-items: center;
  position: absolute;
  top: 0;
  left: 3.623rpx;
  z-index: 2;
}
.opacity-nav-bar .title-area-bar .custom-top-icon .icon-back,
.fixed-nav-bar .title-area-bar .custom-top-icon .icon-back,
.opacity-nav-bar .title-area-bar .custom-top-icon .icon-home,
.fixed-nav-bar .title-area-bar .custom-top-icon .icon-home {
  width: 94.203rpx;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.opacity-nav-bar .title-area-bar .custom-top-icon .icon-back image,
.fixed-nav-bar .title-area-bar .custom-top-icon .icon-back image,
.opacity-nav-bar .title-area-bar .custom-top-icon .icon-home image,
.fixed-nav-bar .title-area-bar .custom-top-icon .icon-home image {
  width: var(--font-size-lg, 39.855rpx);
  height: var(--font-size-lg, 39.855rpx);
}
.opacity-nav-bar .title-area-bar .page-title,
.fixed-nav-bar .title-area-bar .page-title {
  width: 260.870rpx;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opacity-nav-bar .title-left,
.fixed-nav-bar .title-left {
  justify-content: flex-start;
  padding: 0 213.768rpx 0 30.797rpx;
  box-sizing: border-box;
}
.opacity-nav-bar .title-left .page-title,
.fixed-nav-bar .title-left .page-title {
  width: 100%;
  text-align: left;
}
.opacity-nav-bar .front-white,
.fixed-nav-bar .front-white {
  color: var(--color-white, #fff);
}
.opacity-nav-bar .front-black,
.fixed-nav-bar .front-black {
  color: var(--color-black, #000);
}
.ios-nav-bar .title-left .page-title {
  width: 100%;
  text-align: left;
}
.ios-nav-bar .title-area-bar {
  font-size: 32.609rpx;
  font-weight: 600;
}
.ios-nav-bar .page-title {
  width: 289.855rpx;
}
.ios-border-bottom {
  position: relative;
}
.ios-border-bottom::after {
  content: "";
  pointer-events: none;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  transform-origin: 0 0;
  background-color: --color-gray-5;
  height: 100%;
  transform: scaleY(0.5);
}
.ios-border-bottom.android-patch::after {
  transform: unset;
  background-color: --color-gray-7;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .ios-nav-bar .title-area-bar {
    font-size: var(--font-size-xms, 21.739rpx);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .ios-nav-bar .title-area-bar {
    font-size: var(--font-size-md, 32.609rpx);
  }
}