@charset "utf-8";
/* nav */
.navl {
  width: 200px;
  height: 100%;
  background: #263238;
  transition: all 0.3s;
}
.navl a {
  display: block;
  overflow: hidden;
  padding-left: 20px;
  line-height: 46px;
  max-height: 46px;
  color: #abb1b7 !important;
  transition: all 0.3s;
  text-decoration: none !important;
}
.navl a span {
  margin-left: 30px;
}
.nav-iteml {
  position: relative;
}
.nav-iteml.nav-show {
  border-bottom: none;
}
.nav-iteml ul {
  display: none;
  background: rgba(0, 0, 0, 0.1);
}
.nav-iteml.nav-show ul {
  display: block;
}
.nav-iteml .nav-iteml-li ul {
  display: none;
  padding-left: 20px;
}
.nav-iteml > a:before {
  content: '';
  position: absolute;
  left: 0px;
  width: 2px;
  height: 46px;
  background: #34a0ce;
  opacity: 0;
  transition: all 0.3s;
}
.nav .nav-icon {
  font-size: 20px;
  position: absolute;
  margin-left: -1px;
}
/* 此处修改导航图标 可自定义iconfont 替换*/
.icon_1::after {
  content: '\e62b';
}
.icon_2::after {
  content: '\e669';
}
.icon_3::after {
  content: '\e61d';
}
/*---------------------*/
.nav-more {
  float: right;
  margin-right: 20px;
  font-size: 12px;
  transition: transform 0.3s;
}
/* 此处为导航右侧箭头 如果自定义iconfont 也需要替换*/
.nav-more::after {
  content: '\e621';
}
/*---------------------*/
.nav-show > a > .nav-more {
  transform: rotate(90deg);
}
.nav-show,
.nav-iteml > a:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
}
.nav-show > a:before,
.nav-item > a:hover:before {
  opacity: 1;
}
.nav-iteml li:hover > a {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.1);
}
.navl .active > a {
  color: #fff !important;
}
.navl ul {
  margin: 0;
  padding: 0;
}
.navl > ul {
  background: #263238;
}
/* nav-mini */
.nav-mini.navl {
  width: 60px;
}
.nav-mini.navl .nav-icon {
  margin-left: -2px;
}
.nav-mini.navl .nav-iteml > a span {
  display: none;
}
.nav-mini.navl .nav-more {
  margin-right: -20px;
}
.nav-mini.navl .nav-iteml ul {
  position: absolute;
  top: 0px;
  left: 60px;
  width: 180px;
  z-index: 99;
  background: #3c474c;
  overflow: hidden;
}
.nav-mini.navl .nav-iteml:hover {
  background: rgba(255, 255, 255, 0.1);
}
.nav-mini.navl .nav-iteml:hover .nav-item a {
  color: #fff;
}
.nav-mini.navl .nav-iteml:hover a:before {
  opacity: 1;
}
.nav-mini.navl .nav-iteml:hover ul {
  display: block;
}
/*修改a标签focus时颜色*/
/*.nav-show a:hover,.nav-show a:focus{color: #fff !important;}*/
.navl a:hover,
.navl a:focus,
.navl a.active {
  color: #fff !important;
}