.l_body
  display: flex
  margin: auto
  padding: 0 var(--gap-l)
  justify-content: center
  font-size: var(--fsp)

.l_body .l_left
  z-index: 8
  width: var(--width-left)
  flex-shrink: 0
  position: sticky
  position: -webkit-sticky
  top: 8px

.l_body .l_main
  flex-shrink: 1
  flex-grow: 1
  width: 320px
  max-width: var(--width-main)


// 手机布局
.main-mask
  position: fixed
  pointer-events: none
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: rgba(black, 0.2)
  z-index: 9
  opacity 0
  trans1 opacity
@media screen and (max-width: $device-mobile-max)
  .mobile-only
    display: block !important
  .l_body
    padding: 0
    .l_left
      position: fixed
      transform: translateX(-320px)
      margin: 0
      left: 8px
      box-shadow: $boxshadow-card-float
      z-index: 10
    .l_main
      max-width: 100%
  .l_body.mobile
    .l_left
      transition: transform .38s ease-out
  .l_body.mobile.sidebar
    .l_left
      transform: translateX(0px)
    .main-mask
      opacity 1
      pointer-events: inherit