/* H5 banshi stage nav: bar + fullscreen panel
 * 顶栏尺寸用 px（与 traffic 一致），避开页面 vw/rem 基线把 7.5rem 撑成整屏宽 */
.bsy-m-stage-nav{
  position: fixed;
  top: 0.92rem;
  left: 0;
  right: 0;
  z-index: 1000000;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  height: 44px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  box-sizing: border-box;
}
.bsy-m-stage-nav__inner{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 44px;
  padding-left: 8px;
  box-sizing: border-box;
}
.bsy-m-stage-nav__scroll{
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
  height: 44px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bsy-m-stage-nav__scroll::-webkit-scrollbar{
  display: none;
  width: 0;
  height: 0;
}
.bsy-m-stage-nav__scroll a{
  display: inline-block;
  height: 44px;
  padding: 0 9px;
  color: #333;
  font-size: 14px;
  line-height: 44px;
  font-family: "PingFang SC","Microsoft YaHei",sans-serif;
  text-decoration: none;
  vertical-align: top;
  box-sizing: border-box;
}
.bsy-m-stage-nav__scroll a.active,
.bsy-m-stage-nav__scroll a:active{
  color: #f60;
  font-weight: 600;
}
.bsy-m-stage-nav__more{
  position: relative;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  margin: 0;
  background: #fff;
  cursor: pointer;
}
.bsy-m-stage-nav__more::before{
  content: "";
  position: absolute;
  left: -18px;
  top: 0;
  bottom: 0;
  width: 18px;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0), #fff);
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff);
  pointer-events: none;
}
.bsy-m-stage-nav__more i,
.bsy-m-stage-nav__more i::before,
.bsy-m-stage-nav__more i::after{
  position: absolute;
  left: 50%;
  width: 16px;
  height: 2px;
  margin-left: -8px;
  border-radius: 1px;
  background: #333;
}
.bsy-m-stage-nav__more i{
  top: 50%;
  margin-top: -1px;
}
.bsy-m-stage-nav__more i::before,
.bsy-m-stage-nav__more i::after{
  content: "";
  left: 0;
  margin-left: 0;
}
.bsy-m-stage-nav__more i::before{ top: -6px; }
.bsy-m-stage-nav__more i::after{ top: 6px; }

/* fullscreen panel */
.bsy-m-nav-panel{
  display: none;
  position: fixed;
  z-index: 10000020;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #fff;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bsy-m-nav-panel.is-open{
  display: block;
}
.bsy-m-nav-panel__hd{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 14px 15px 10px;
}
.bsy-m-nav-panel__hd .title{
  color: #222;
  font-size: 17px;
  font-weight: 700;
  font-family: "PingFang SC","Microsoft YaHei",sans-serif;
}
.bsy-m-nav-panel__close{
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  background: transparent;
  position: relative;
  cursor: pointer;
}
.bsy-m-nav-panel__close::before,
.bsy-m-nav-panel__close::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  background: #333;
  border-radius: 1px;
}
.bsy-m-nav-panel__close::before{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.bsy-m-nav-panel__close::after{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.bsy-m-nav-panel__grid{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 6px 12px 20px;
  box-sizing: border-box;
}
.bsy-m-nav-panel__grid a{
  width: 32%;
  margin: 0 2% 10px 0;
  box-sizing: border-box;
  text-align: center;
  padding: 11px 4px;
  border-radius: 6px;
  background: #f5f5f5;
  color: #333;
  font-size: 14px;
  line-height: 20px;
  font-family: "PingFang SC","Microsoft YaHei",sans-serif;
  text-decoration: none;
}
.bsy-m-nav-panel__grid a:nth-child(3n){
  margin-right: 0;
}
.bsy-m-nav-panel__grid a:active{
  color: #f60;
  background: #fff7f0;
}
body.bsy-m-nav-lock{
  overflow: hidden;
  height: 100%;
}

/* moban_v2 offset under fixed header */
.bszn_page.bsy-has-m-nav .flex-wrap{
  top: 1.8rem !important;
}
.bszn_page.bsy-has-m-nav .content-wrap{
  margin-top: 1.88rem !important;
}

/* cyfw_search offset */
.page.bsy-has-m-nav .h1_wrap{
  margin-top: 1.8rem !important;
}


/* body flag always set by stage_nav_m.htm */
body.bsy-has-m-nav .banner_wrap{
  margin-top: 1.8rem !important;
}
body.bsy-has-m-nav .body{
  margin-top: 0 !important;
}
body.bsy-has-m-nav .body > .h1_wrap{
  margin-top: 1.84rem !important;
}
body.bsy-has-m-nav .page{
  padding-top: 44px;
}
body.bsy-has-m-nav .ych_page{
  padding-top: 44px;
  box-sizing: border-box;
}
/* no top logo bar: nav sticks to top */
body.bsy-m-nav--noheader .bsy-m-stage-nav{
  top: 0 !important;
}
body.bsy-m-nav--noheader{
  padding-top: 44px;
  box-sizing: border-box;
}
body.bsy-m-nav--noheader .page,
body.bsy-m-nav--noheader .ych_page{
  padding-top: 0;
}

body.bsy-has-m-nav .body > .body_top{
  margin-top: 1.84rem !important;
}

/* classic topnav pages: nav stays in document flow under orange header */
body.bsy-m-nav--flow .bsy-m-stage-nav{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  z-index: 20;
}
body.bsy-m-nav--flow .page,
body.bsy-m-nav--flow .ych_page{
  padding-top: 0 !important;
}
