.lp-silder-nav-container {
  position: relative;
  float: left;
}
.lp-silder-nav-container .lp-silder-nav {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  -webkit-box-pack: start;
  place-content: flex-start;
  align-items: flex-start;
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  width: 100%;
  transition: width 0.3s ease-in-out 0s, min-width 0.3s ease-in-out 0s;
}
.lp-silder-nav-container .lp-silder-nav.hide {
  width: 0px !important;
}
.lp-silder-nav-container .lp-silder-nav.top {
  position: absolute;
  z-index: 1101;
  transition: inherit;
  width: 100vw;
}
.lp-silder-nav-container .lp-silder-nav .main_nav {
  order: 0;
  flex: 0 1 auto;
  height: 100%;
  background-color: whitesmoke;
  overflow: hidden auto;
  width: 210px;
  min-width: 210px;
  transition: width 0.3s ease-in-out 0s, min-width 0.3s ease-in-out 0s;
  position: relative;
  z-index: 100;
  flex-grow: 0;
}
.lp-silder-nav-container .lp-silder-nav .main_nav .nav-childen-wrapper {
  width: inherit;
  min-width: 208px;
  position: relative;
  left: 0px;
  transition: left 0.3s ease-in-out;
}
.lp-silder-nav-container .lp-silder-nav .main_nav.hide {
  overflow-x: hidden;
  width: 0px !important;
  min-width: 0px;
}
.lp-silder-nav-container .lp-silder-nav .main_nav.hide .nav-childen-wrapper {
  width: inherit;
  min-width: 208px;
  position: relative;
  left: -208px;
  transition: left 0.3s ease-in-out;
}
.lp-silder-nav-container .lp-silder-nav .nav-collapse-trigger-wrapper {
  order: 0;
  flex: 0 1 auto;
  height: 100%;
  width: 0px;
  position: relative;
}
.lp-silder-nav-container .lp-silder-nav .nav-collapse-trigger-wrapper .nav-collapse-trigger-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 24px;
  height: 100px;
  cursor: pointer;
}
.lp-silder-nav-container .lp-silder-nav .nav-collapse-trigger-wrapper .nav-collapse-trigger-container:hover .nav-collapse-trigger {
  border-left: 18px solid #ebebeb;
  border-left-color: #dedede;
}
.lp-silder-nav-container .lp-silder-nav .nav-collapse-trigger-wrapper .nav-collapse-trigger-container:hover .nav-collapse-trigger .nav-collapse-trigger-icon {
  color: #888888;
}
.lp-silder-nav-container .lp-silder-nav .nav-collapse-trigger-wrapper .nav-collapse-trigger-container .nav-collapse-trigger {
  width: 0;
  height: 66px;
  position: absolute;
  top: calc(50% - 33px);
  left: 0;
  z-index: 99;
  line-height: 48px;
  border: 8px solid transparent;
  border-left: 16px solid #ebebeb;
  cursor: pointer;
  color: #bfbfbf;
  transition: left 0.1s ease-in-out, border 0.1s ease;
}
.lp-silder-nav-container .lp-silder-nav .nav-collapse-trigger-wrapper .nav-collapse-trigger-container .nav-collapse-trigger .nav-collapse-trigger-icon {
  width: 12px;
  position: relative;
  left: -14px;
  color: #c1c1c1;
  transform: rotate(0deg);
  transition: transform 0.5s ease-in-out, left 0.1s ease-in-out;
}
.lp-silder-nav-container .lp-silder-nav .nav-collapse-trigger-wrapper .nav-collapse-trigger-container .nav-collapse-trigger.hide .nav-collapse-trigger-icon {
  transform: rotate(180deg);
  transition: transform 0.5s ease-in-out, left 0.1s ease-in-out;
}
.lp-silder-nav-container .lp-silder-nav .lp-silder-nav-mask {
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  flex-grow: 1;
}