.main-sideNav {
  position: fixed;
  left: 0.55rem;
  top: 82%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  z-index: 4;
  transition: all 0.5s;
  transform: translate(0, -50%);
}
.main-sideNav:hover .slide-li{
  opacity: 1;
}
.main-sideNav::after {
  content: "";
  display: block;
  position: absolute;
  left: -0.3rem;
  top: 0;
  background-color: #111;
  border-radius: 1px;
  height: 99%;
  width: 1px;
}

.main-sideNav .active::after {
  position: absolute;
  content: "";
  display: block;
  width: 0.06rem;
  height: 0.6rem;
  background-color: #111;
  border-radius: 0 4px 4px 0;
  left: -0.3rem;
  top: -0.22rem;
}

.main-sideNav .slide-li {
  color: rgba(17, 17, 17, 0.3);
  font-size: 14px;
  font-weight: bold;
  margin: 0.1rem 0;
  text-decoration: none;
  opacity: 0;
  transition: all .5s;
  cursor: pointer;
}

.main-sideNav .active {
  position: relative;
  color: #111;

  opacity: 1;
}

.main-sideNav-light::after {
  content: "";
  display: block;
  position: absolute;
  left: -0.3rem;
  height: 99%;
  top: 0;
  background-color: #fff;
  border-radius: 1px;
  width: 1px;
}

.main-sideNav-light .slide-li {
  /* color: #fff; */
  color: rgba(255,255,255, 0.7);
  font-size: 14px;
  margin: 0.2rem 0;
  font-weight: bold;
  text-decoration: none;
  opacity: 0;
}

.main-sideNav-light .active {
  color: #fff;

  opacity: 1;
}

.main-sideNav-light .active::after {
  position: absolute;
  content: "";
  display: block;
  width: 0.06rem;
  height: 0.6rem;
  background-color: #fff;

  border-radius: 0 4px 4px 0;
  left: -0.3rem;
  top: -0.22rem;
  transition: all .5s;

}
/* 深色#333333 */
.main-sideNav-dark-new::after {
content: "";
display: block;
position: absolute;
left: -0.3rem;
top: 0;
height: 99%;
background-color: #333333;
border-radius: 1px;
width: 1px;
}

.main-sideNav-dark-new .slide-li {
/* color: #333; */
color: rgba(51,51,51, 0.5);
font-size: 14px;
margin: 0.2rem 0;
font-weight: bold;
text-decoration: none;
opacity: 0;
}

.main-sideNav-dark-new .active {
color: #333333;
opacity: 1;
}

.main-sideNav-dark-new .active::after {
position: absolute;
content: "";
display: block;
width: 0.06rem;
height: 0.6rem;
background-color: #333333;
border-radius: 0 4px 4px 0;
left: -0.3rem;
top: -0.22rem;
transition: all .5s;

}
/* 深色#333333结束 */

.main-sideNav-dark::after {
  content: "";
  display: block;
  position: absolute;
  left: -0.3rem;
  top: 0;
 height: 99%;
  background-color: #111;
  border-radius: 1px;
  width: 1px;
}

.main-sideNav-dark .slide-li {
  color: rgba(153,153,153);
  font-size: 14px;
  margin: 0.2rem 0;
  font-weight: bold;
  text-decoration: none;
  opacity: 0;
}

.main-sideNav-dark .active {
  color: #111;
  opacity: 1;
}

.main-sideNav-dark .active::after {
  position: absolute;
  content: "";
  display: block;
  width: 0.06rem;
  height: 0.6rem;
  background-color: #111;
  border-radius: 0 4px 4px 0;
  left: -0.3rem;
  top: -0.22rem;
  transition: all .5s;

}


.mobile-sideNav-logo{
    height: 100%;
   background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: left center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 .3rem 0 0.1rem;
}
.mobile-sideNav-logo img{
    width: auto;
    height: 0.54rem;
}

.main-sideNav-grey::after {
  content: "";
  display: block;
  position: absolute;
  left: -0.3rem;
  top: 0;
  height: 99%;
  background-color: #999;
  border-radius: 1px;
  width: 0px;
  opacity: .4;
}

.main-sideNav-grey .slide-li {
  /* color: #999; */
  color: rgba(153,153,153, 0);
  font-size: .14rem;
  font-weight: bold;
  text-decoration: none;
  transition: all .5s;
  opacity: 1;
  position: relative;
}
.main-sideNav-grey:hover .slide-li {
  color: rgba(153,153,153, 0.5);
}
.main-sideNav-grey:hover .active {
  color: #999;
}
.main-sideNav-grey .active {
  color: #999;
  opacity: 1;
}

.main-sideNav-grey .slide-li::after {
    position: absolute;
    content: "";
    display: block;
    width: 0.1rem;
    height: 0.1rem;
    background-color: transparent;
    border-radius: 100%;
    border: 1px solid #999;
    left: -0.3rem;
    top: 0.06rem;
    transition: all .5s;
}

.main-sideNav-grey .active::after {
    position: absolute;
    content: "";
    display: block;
    width: 0.1rem;
    height: 0.1rem;
    background-color: #999;
    border-radius: 100%;
    left: -0.3rem;
    top: 0.06rem;
    transition: all .5s;
}
.main-mobile-sideNav{
  display: flex;
  position: fixed;
  height: 44pt;
  background-color: #353a3d;
  color: #fff;
  font-size: .04rem;
  top: 0;
  opacity: 0;
  z-index: 10;
  line-height: 1rem;
  padding-left: .2rem;
  left: 0;
  width: 100%;
  transform: none;
  align-items: center;
  transition: all 2s;
}
.main-mobile-sideNav i {
    line-height: 42pt !important;
}
.main-mobile-sideNav ul{
    overflow-x: auto;
    overflow-y: hidden;
    word-break: break-all;
    white-space: nowrap;
    height: 100%;
    margin-bottom: 0;
    margin-left: 5px;
}
.main-mobile-sideNav ul::-webkit-scrollbar{
    width: 0;
    height: 0
}
.main-mobile-sideNav ul li{
  margin:0 .26rem;
  opacity: .55;
  display: inline-block;
  height: 100%;
  line-height: 42pt;
  font-size: .26rem
}
.main-mobile-sideNav ul .mobileActive{
  font-weight: bold;
  opacity: 1;
  position: relative;
}
.main-mobile-sideNav ul .mobileActive::after{
  position: absolute;
  content: '';
  display: block;
  width: 1rem;
 height: .03rem;
 bottom: 0;
 background-color: #c5c5c5;
  left: 50%;
  transform: translate(-50%,0);
}

@media screen and (max-width:1024px){
  .main-mobile-sideNav{
    display: flex;
  }
}

@media (max-width:1920px) and (min-width:1024px){
  .main-mobile-sideNav{
    display: none;
  }
}

@media screen and (min-width: 1800px){
 .main-mobile-sideNav{
    display: none;
  }
}
@media (max-width: 1024px) {
  .main-sideNav {
    display: none;
  }
}