.two-column-layout-container {
  width: 100%;
  height: 100%;
  position: relative;
  color: var(--content-two-column-box-color);
  .two-column-aside {
    transition: width 0.1s ease-in;
    width: var(--sider-size);
    height: 100%;
    z-index: 9;
    position: absolute;
    left: 0;
    top: 0;
    .two-colum-left-wrapper {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .two-colum-left-content {
      width: var(--sider-size);
      height: 100%;
      background-color: var(--content-two-column-box-left-bg);
    }
    .left-aside-slider-btn {
      position: absolute;
      width: 16px;
      height: 20px;
      right: -16px;
      top: 50%;
      margin-top: -8px;
      font-size: var(--fs-large);
      cursor: pointer;
      background-color: red;
      .anticon {
        background: var(--content-two-column-box-left-bg);
        vertical-align: unset;
        position: relative;
        z-index: 3;
      }
      &:before,
      &:after {
        content: '';
        width: 100%;
        height: 100%;
        z-index: 2;
        background-color: var(--content-two-column-box-left-bg);
        position: absolute;
      }
      &:before {
        left: 0;
        bottom: -10px;
        transform: skewY(-20deg);
      }
      &:after {
        right: 0;
        top: -10px;
        transform: skewY(20deg);
      }
    }
    &.hide-left-aside {
      width: 0;
      & + .two-column-content {
        padding-left: 0;
      }
    }
  }
  .two-column-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-left: var(--sider-size);
    background-color: var(--content-two-column-box-right-bg);
    transition: padding-left 0.3s ease-in-out;
    box-sizing: border-box;
  }
}
