.nav1bar {
  position: relative;
  z-index: 999;
  left: 60px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav1bar .nav1-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.nav1bar .nav1-menu li {
  position: relative;
  top: 200px;
  min-width: 0px;
  height: 80px;
  text-align: left;
}

.nav1bar .nav1-menu li .dot {
  display: block;
  color: #fff;
  padding: 5px 0;
}

.nav1bar .nav1-menu li .dot::before,
.nav1bar .nav1-menu li .dot::after {
  display: block;
  position: absolute;
  content: '';
  /* top: 50%; */
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.nav1bar .nav1-menu li .dot::before {
  width: 3px;
  height: 90px;
  right: 0;
  border-left: 1px solid rgba(255, 255, 255);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav1bar .nav1-menu li .dot::after {
  width: 1px;
  height: 15px;
  border: 2px solid #ffffff;
  -webkit-transform: translateY(-50%) scale(0);
  -ms-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0);
  padding-right: 1px;
}

.nav1bar .nav1-menu li .dot.active::before {
  background: #ffffff;
}

@media (max-width: 767.98px) {
  .nav1bar {
      left: -320px;
  }

  .nav1bar .nav1-menu li {
      position: relative;
      top: 90px;
      min-width: 0px;
      height: 80px;
      text-align: right;
  }

  .nav1bar .nav1-menu li .dot::before {
      width: 3px;
      height: 90px;
      right: 0;
      border-left: 1px solid rgba(255, 255, 255);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
}

@media only screen 
and (min-device-width: 768px)
and (max-device-width: 1023.98px)
  {
    .nav1bar {
       left: 0px;
  }

  .nav1bar .nav1-menu li {
      position: relative;
      top: 150px;
      min-width: 0px;
      height: 80px;
      text-align: right;
  }

  .nav1bar .nav1-menu li .dot::before {
      width: 3px;
      height: 90px;
      right: 0;
      border-left: 1px solid rgba(255, 255, 255);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
  }

@media only screen 
  and (min-device-width: 1024px)
  and (max-device-width: 1439.98px)
    {
      .nav1bar {
        left: 10px;
    }

    .nav1bar .nav1-menu li {
      position: relative;
      top: 160px;
      min-width: 0px;
      height: 70px;
      text-align: right; }

      .nav1bar .nav1-menu li .dot::before {
        width: 3px;
        height: 80px;
        right: 0;
        border-left: 1px solid rgb(255, 255, 255);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
    }

.nav2bar {
  position: relative;
  z-index: 999;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav2bar .nav2-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.nav2bar .nav2-menu li {
  position: relative;
  top: 240px;
  left: 80px;
  height: 80px;
  text-align: left;
}

.nav2bar .nav2-menu li .dot {
  display: block;
  color: #fff;
  padding: 5px 0;
}

.nav2bar .nav2-menu li .dot::before,
.nav2bar .nav2-menu li .dot::after {
  display: block;
  position: absolute;
  content: '';
  /* top: 50%; */
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.nav2bar .nav2-menu li .dot::before {
  width: 3px;
  height: 90px;
  right: 0;
  border-left: 1px solid rgba(255, 255, 255);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav2bar .nav2-menu li .dot::after {
  width: 1px;
  height: 15px;
  border: 2px solid #ffffff;
  -webkit-transform: translateY(-50%) scale(0);
  -ms-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0);
  padding-right: 1px;
}

.nav2bar .nav2-menu li .dot.active::before {
  background: #ffffff;
}

@media (max-width: 767.98px) {
  .nav2bar {
    left: -410px;
}

.nav2bar .nav2-menu li {
    position: relative;
    top: 140px;
    min-width: 0px;
    height: 80px;
    text-align: right;
}

.nav2bar .nav2-menu li .dot::before {
    width: 3px;
    height: 90px;
    right: 0;
    border-left: 1px solid rgba(255, 255, 255);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
}

@media only screen 
and (min-device-width: 768px)
and (max-device-width: 1023.98px)
  {
    .nav2bar {
       right: 90px;
  }

  .nav2bar .nav2-menu li {
      position: relative;
      top: 160px;
      min-width: 0px;
      height: 80px;
      text-align: right;
  }

  .nav2bar .nav2-menu li .dot::before {
      width: 3px;
      height: 90px;
      right: 0;
      border-left: 1px solid rgba(255, 255, 255);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
  }
@media only screen 
  and (min-device-width: 1024px)
  and (max-device-width: 1439px)
    {
      .nav2bar {
        left: -70px;
      }

      .nav2bar .nav2-menu li {
        position: relative;
        top: 160px;
        min-width: 0px;
        height: 70px;
        text-align: right; }

        .nav2bar .nav2-menu li .dot::before {
          width: 3px;
          height: 80px;
          right: 0;
          border-left: 1px solid rgb(255, 255, 255);
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); 
        }
    }

.nav3bar {
  position: relative;
  z-index: 999;
  left: 60px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav3bar .nav3-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.nav3bar .nav3-menu li {
  position: relative;
  top: 210px;
  min-width: 0px;
  height: 80px;
  text-align: left;
}

.nav3bar .nav3-menu li .dot {
  display: block;
  color: #fff;
  padding: 5px 0;
}

.nav3bar .nav3-menu li .dot::before,
.nav3bar .nav3-menu li .dot::after {
  display: block;
  position: absolute;
  content: '';
  /* top: 50%; */
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.nav3bar .nav3-menu li .dot::before {
  width: 3px;
  height: 90px;
  right: 0;
  border-left: 1px solid rgba(255, 255, 255);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav3bar .nav3-menu li .dot::after {
  width: 1px;
  height: 15px;
  border: 2px solid #ffffff;
  -webkit-transform: translateY(-50%) scale(0);
  -ms-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0);
  padding-right: 1px;
}

.nav3bar .nav3-menu li .dot.active::before {
  background: #ffffff;
}

@media (max-width: 767.98px) {
  .nav3bar {
      left: -320px;
  }

  .nav3bar .nav3-menu li {
      position: relative;
      top: 360px;
      min-width: 0px;
      height: 80px;
      text-align: right;
  }

  .nav3bar .nav3-menu li .dot::before {
      width: 3px;
      height: 90px;
      right: 0;
      border-left: 1px solid rgba(255, 255, 255);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
}

@media only screen 
and (min-device-width: 768px)
and (max-device-width: 1023.98px)
  {
    .nav3bar {
       left: 0px;
  }

  .nav3bar .nav3-menu li {
      position: relative;
      top: 140px;
      min-width: 0px;
      height: 80px;
      text-align: right;
  }

  .nav3bar .nav3-menu li .dot::before {
      width: 3px;
      height: 90px;
      right: 0;
      border-left: 1px solid rgba(255, 255, 255);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
  }

@media only screen 
  and (min-device-width: 1024px)
  and (max-device-width: 1439px)
    {
    .nav3bar {
        left: 10px;
    }

    .nav3bar .nav3-menu li {
      position: relative;
      top: 130px;
      min-width: 0px;
      height: 70px;
      text-align: right; }

      .nav3bar .nav3-menu li .dot::before {
        width: 3px;
        height: 80px;
        right: 0;
        border-left: 1px solid rgb(255, 255, 255);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
    }

/* @media (min-width: 1920px){
  .nav3bar .nav3-menu li {
      position: relative;
      top: 300px;
      min-width: 200px;
      height: 90px;
      text-align: right;
  }
} */


.nav4bar {
  position: relative;
  z-index: 999;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav4bar .nav4-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.nav4bar .nav4-menu li {
  position: relative;
  top: 220px;
  left: 80px;
  height: 80px;
  text-align: left;
}

.nav4bar .nav4-menu li .dot {
  display: block;
  color: #fff;
  padding: 5px 0;
}

.nav4bar .nav4-menu li .dot::before,
.nav4bar .nav4-menu li .dot::after {
  display: block;
  position: absolute;
  content: '';
  /* top: 50%; */
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.nav4bar .nav4-menu li .dot::before {
  width: 3px;
  height: 90px;
  right: 0;
  border-left: 1px solid rgba(255, 255, 255);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav4bar .nav4-menu li .dot::after {
  width: 1px;
  height: 15px;
  border: 2px solid #ffffff;
  -webkit-transform: translateY(-50%) scale(0);
  -ms-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0);
  padding-right: 1px;
}

.nav4bar .nav4-menu li .dot.active::before {
  background: #ffffff;
}

@media (max-width: 767.98px) {
  .nav4bar {
    left: -410px;
  }

.nav4bar .nav4-menu li {
    position: relative;
    top: 40px;
    min-width: 0px;
    height: 80px;
    text-align: right;
}

.nav4bar .nav4-menu li .dot::before {
    width: 3px;
    height: 90px;
    right: 0;
    border-left: 1px solid rgba(255, 255, 255);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
}

@media only screen 
and (min-device-width: 768px)
and (max-device-width: 1023.98px)
  {
    .nav4bar {
        right: 90px;
    }

    .nav4bar .nav4-menu li {
        position: relative;
        top: 180px;
        min-width: 0px;
        height: 80px;
        text-align: right;
    }

    .nav4bar .nav4-menu li .dot::before {
        width: 3px;
        height: 90px;
        right: 0;
        border-left: 1px solid rgba(255, 255, 255);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
  }

@media only screen 
  and (min-device-width: 1024px)
  and (max-device-width: 1439px)
    {
      .nav4bar {
        left: -70px;
      }

      .nav4bar .nav4-menu li {
        position: relative;
        top: 160px;
        min-width: 0px;
        height: 70px;
        text-align: right; }

        .nav4bar .nav4-menu li .dot::before {
          width: 3px;
          height: 80px;
          right: 0;
          border-left: 1px solid rgb(255, 255, 255);
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); 
        }
    }

/* @media (min-width: 1920px){
  .nav4bar .nav4-menu li {
      position: relative;
      top: 300px;
      min-width: 200px;
      height: 90px;
      text-align: right;
  }
} */

.nav5bar {
  position: relative;
  z-index: 999;
  left: 60px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav5bar .nav5-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.nav5bar .nav5-menu li {
  position: relative;
  top: 260px;
  min-width: 0px;
  height: 80px;
  text-align: left;
}

.nav5bar .nav5-menu li .dot {
  display: block;
  color: #fff;
  padding: 5px 0;
}

.nav5bar .nav5-menu li .dot::before,
.nav5bar .nav5-menu li .dot::after {
  display: block;
  position: absolute;
  content: '';
  /* top: 50%; */
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.nav5bar .nav5-menu li .dot::before {
  width: 3px;
  height: 90px;
  right: 0;
  border-left: 1px solid rgba(255, 255, 255);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav5bar .nav5-menu li .dot::after {
  width: 1px;
  height: 15px;
  border: 2px solid #ffffff;
  -webkit-transform: translateY(-50%) scale(0);
  -ms-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0);
  padding-right: 1px;
}

.nav5bar .nav5-menu li .dot.active::before {
  background: #ffffff;
}

@media (max-width: 767.98px) {
  .nav5bar {
      left: -320px;
  }

  .nav5bar .nav5-menu li {
      position: relative;
      top: 60px;
      min-width: 0px;
      height: 80px;
      text-align: right;
  }

  .nav5bar .nav5-menu li .dot::before {
      width: 3px;
      height: 90px;
      right: 0;
      border-left: 1px solid rgba(255, 255, 255);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
}

@media only screen 
and (min-device-width: 768px)
and (max-device-width: 1023.98px)
  {
    .nav5bar {
       left: 0px;
  }

  .nav5bar .nav5-menu li {
      position: relative;
      top: 200px;
      min-width: 0px;
      height: 80px;
      text-align: right;
  }

  .nav5bar .nav5-menu li .dot::before {
      width: 3px;
      height: 90px;
      right: 0;
      border-left: 1px solid rgba(255, 255, 255);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
  }

@media only screen 
  and (min-device-width: 1024px)
  and (max-device-width: 1439px)
    {
      .nav5bar {
        left: 10px;
    }

    .nav5bar .nav5-menu li {
      position: relative;
      top: 180px;
      min-width: 0px;
      height: 70px;
      text-align: right; }

      .nav5bar .nav5-menu li .dot::before {
        width: 3px;
        height: 80px;
        right: 0;
        border-left: 1px solid rgb(255, 255, 255);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
    }

/* @media (min-width: 1920px){
  .nav5bar .nav5-menu li {
      position: relative;
      top: 300px;
      min-width: 200px;
      height: 90px;
      text-align: right;
  }
} */

.nav20bar {
  position: relative;
  z-index: 999;
  left: 50px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.nav20bar .nav20-menu {
  margin: 0;
  padding: 0;
  list-style-type: none; }

.nav20bar .nav20-menu li {
  position: relative;
  top: 180px;
  min-width: 0px;
  height: 60px;
  text-align: left; }

.nav20bar .nav20-menu li .dot {
  display: block;
  color: #000000;
  padding: 3px 0; }

.nav20bar .nav20-menu li .dot::before,
.nav20bar .nav20-menu li .dot::after {
  display: block;
  position: absolute;
  content: '';
  /* top: 50%; */
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease; }

.nav20bar .nav20-menu li .dot::before {
  width: 3px;
  height: 70px;
  right: 0;
  border-left: 1px solid rgb(0, 0, 0);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.nav20bar .nav20-menu li .dot::after {
  width: 25px;
  height: 15px;
  border-left: 1px solid #000000;
  -webkit-transform: translateY(-50%) scale(0);
  -ms-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0); }

.nav20bar .nav20-menu li .dot.active::before,
.nav20bar .nav20-menu li:hover .dot::before {
  background: #000000;
  border-color: #000000; }

  
  @media (max-width: 767.98px) {
    .nav20bar {
      position: relative;
      z-index: 999;
      left: 0px;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
    
    .nav20bar .nav20-menu {
      margin: 0;
      padding: 0;
      list-style-type: none; }
    
    .nav20bar .nav20-menu li {
      position: relative;
      top: 300px;
      min-width: 20px;
      height: 95px;
      text-align: left; }

      .nav20bar .nav20-menu li .dot::before {
        width: 3px;
        height: 100px;
        left: 0;
        border-left: 1px solid rgb(0, 0, 0);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
  }

  @media only screen 
  and (min-device-width: 768px)
  and (max-device-width: 1023px)
    {
      .nav20bar {
        position: relative;
        z-index: 999;
        left: 0px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      
      .nav20bar .nav20-menu {
        margin: 0;
        padding: 0;
        list-style-type: none; }
      
      .nav20bar .nav20-menu li {
        position: relative;
        top: 180px;
        min-width: 20px;
        height: 70px;
        text-align: right; }

        .nav20bar .nav20-menu li .dot::before {
          width: 3px;
          height: 70px;
          right: 0;
          border-left: 1px solid rgb(0, 0, 0);
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); }
    }

    @media only screen 
  and (min-device-width: 1024px)
  and (max-device-width: 1200px)
    {
      .nav20bar {
        left: 10px;
    }

    .nav20bar .nav20-menu li {
      position: relative;
      top: 160px;
      min-width: 0px;
      height: 55px;
      text-align: right; }

      .nav20bar .nav20-menu li .dot::before {
        width: 3px;
        height: 65px;
        right: 0;
        border-left: 1px solid rgb(0, 0, 0);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
    }

    @media only screen 
    and (min-device-width: 1201px)
    and (max-device-width: 1439px)
      {
        .nav20bar {
          left: 0px;
      }
  
      .nav20bar .nav20-menu li {
        position: relative;
        top: 170px;
        min-width: 0px;
        height: 70px;
        text-align: right; }
  
        .nav20bar .nav20-menu li .dot::before {
          width: 3px;
          height: 80px;
          right: 0;
          border-left: 1px solid rgb(0, 0, 0);
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); }
      }

  
.nav201bar {
  position: relative;
  z-index: 999;
  left: 50px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.nav201bar .nav201-menu {
  margin: 0;
  padding: 0;
  list-style-type: none; }

.nav201bar .nav201-menu li {
  position: relative;
  top: 200px;
  min-width: 0px;
  height: 60px;
  text-align: left; }

.nav201bar .nav201-menu li .dot {
  display: block;
  color: #000000;
  padding: 3px 0; }

.nav201bar .nav201-menu li .dot::before,
.nav201bar .nav201-menu li .dot::after {
  display: block;
  position: absolute;
  content: '';
  /* top: 50%; */
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease; }

.nav201bar .nav201-menu li .dot::before {
  width: 3px;
  height: 70px;
  right: 0;
  border-left: 1px solid rgb(0, 0, 0);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.nav201bar .nav201-menu li .dot::after {
  width: 25px;
  height: 15px;
  border-left: 1px solid #000000;
  -webkit-transform: translateY(-50%) scale(0);
  -ms-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0); }

.nav201bar .nav201-menu li .dot.active::before,
.nav201bar .nav201-menu li:hover .dot::before {
  background: #000000;
  border-color: #000000; }

  
  @media (max-width: 767.98px) {
    .nav201bar {
      position: relative;
      z-index: 999;
      left: 0px;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
    
    .nav201bar .nav201-menu {
      margin: 0;
      padding: 0;
      list-style-type: none; }
    
    .nav201bar .nav201-menu li {
      position: relative;
      top: 180px;
      min-width: 20px;
      height: 70px;
      text-align: left; }

      .nav201bar .nav201-menu li .dot::before {
        width: 3px;
        height: 80px;
        left: 0;
        border-left: 1px solid rgb(0, 0, 0);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
  }

  @media only screen 
  and (min-device-width: 768px)
  and (max-device-width: 1023px)
    {
      .nav201bar {
        position: relative;
        z-index: 999;
        left: 0px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      
      .nav201bar .nav201-menu {
        margin: 0;
        padding: 0;
        list-style-type: none; }
      
      .nav201bar .nav201-menu li {
        position: relative;
        top: 180px;
        min-width: 20px;
        height: 70px;
        text-align: right; }

        .nav201bar .nav201-menu li .dot::before {
          width: 3px;
          height: 70px;
          right: 0;
          border-left: 1px solid rgb(0, 0, 0);
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); }
    }

    @media only screen 
  and (min-device-width: 1024px)
  and (max-device-width: 1200px)
    {
      .nav201bar {
        left: 10px;
    }

    .nav201bar .nav201-menu li {
      position: relative;
      top: 180px;
      min-width: 0px;
      height: 60px;
      text-align: right; }

      .nav201bar .nav201-menu li .dot::before {
        width: 3px;
        height: 70px;
        right: 0;
        border-left: 1px solid rgb(0, 0, 0);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
    }

    @media only screen 
    and (min-device-width: 1201px)
    and (max-device-width: 1439px)
      {
        .nav201bar {
          left: 10px;
      }
  
      .nav201bar .nav201-menu li {
        position: relative;
        top: 170px;
        min-width: 0px;
        height: 60px;
        text-align: right; }
  
        .nav201bar .nav201-menu li .dot::before {
          width: 3px;
          height: 70px;
          right: 0;
          border-left: 1px solid rgb(0, 0, 0);
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); }
      }

      
.nav202bar {
  position: relative;
  z-index: 999;
  left: 50px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.nav202bar .nav202-menu {
  margin: 0;
  padding: 0;
  list-style-type: none; }

.nav202bar .nav202-menu li {
  position: relative;
  top: 180px;
  min-width: 0px;
  height: 60px;
  text-align: left; }

.nav202bar .nav202-menu li .dot {
  display: block;
  color: #000000;
  padding: 3px 0; }

.nav202bar .nav202-menu li .dot::before,
.nav202bar .nav202-menu li .dot::after {
  display: block;
  position: absolute;
  content: '';
  /* top: 50%; */
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease; }

.nav202bar .nav202-menu li .dot::before {
  width: 3px;
  height: 70px;
  right: 0;
  border-left: 1px solid rgb(0, 0, 0);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.nav202bar .nav202-menu li .dot::after {
  width: 25px;
  height: 15px;
  border-left: 1px solid #000000;
  -webkit-transform: translateY(-50%) scale(0);
  -ms-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0); }

.nav202bar .nav202-menu li .dot.active::before,
.nav202bar .nav202-menu li:hover .dot::before {
  background: #000000;
  border-color: #000000; }

  
  @media (max-width: 767.98px) {
    .nav202bar {
      position: relative;
      z-index: 999;
      left: 0px;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
    
    .nav202bar .nav202-menu {
      margin: 0;
      padding: 0;
      list-style-type: none; }
    
    .nav202bar .nav202-menu li {
      position: relative;
      top: 180px;
      min-width: 20px;
      height: 70px;
      text-align: left; }

      .nav202bar .nav202-menu li .dot::before {
        width: 3px;
        height: 80px;
        left: 0;
        border-left: 1px solid rgb(0, 0, 0);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
  }

  @media only screen 
  and (min-device-width: 768px)
  and (max-device-width: 1023px)
    {
      .nav202bar {
        position: relative;
        z-index: 999;
        left: 0px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      
      .nav202bar .nav202-menu {
        margin: 0;
        padding: 0;
        list-style-type: none; }
      
      .nav202bar .nav202-menu li {
        position: relative;
        top: 180px;
        min-width: 20px;
        height: 70px;
        text-align: right; }

        .nav202bar .nav202-menu li .dot::before {
          width: 3px;
          height: 70px;
          right: 0;
          border-left: 1px solid rgb(0, 0, 0);
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); }
    }

    @media only screen 
  and (min-device-width: 1024px)
  and (max-device-width: 1200px)
    {
      .nav202bar {
        left: 10px;
    }

    .nav202bar .nav202-menu li {
      position: relative;
      top: 160px;
      min-width: 0px;
      height: 55px;
      text-align: right; }

      .nav202bar .nav202-menu li .dot::before {
        width: 3px;
        height: 65px;
        right: 0;
        border-left: 1px solid rgb(0, 0, 0);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
    }

    @media only screen 
    and (min-device-width: 1201px)
    and (max-device-width: 1439px)
      {
        .nav202bar {
          left: 0px;
      }
  
      .nav202bar .nav202-menu li {
        position: relative;
        top: 170px;
        min-width: 0px;
        height: 70px;
        text-align: right; }
  
        .nav202bar .nav202-menu li .dot::before {
          width: 3px;
          height: 80px;
          right: 0;
          border-left: 1px solid rgb(0, 0, 0);
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); }
      }




      .nav203bar {
        position: relative;
        z-index: 999;
        left: 50px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      
      .nav203bar .nav203-menu {
        margin: 0;
        padding: 0;
        list-style-type: none; }
      
      .nav203bar .nav203-menu li {
        position: relative;
        top: 180px;
        min-width: 0px;
        height: 60px;
        text-align: left; }
      
      .nav203bar .nav203-menu li .dot {
        display: block;
        color: #000000;
        padding: 3px 0; }
      
      .nav203bar .nav203-menu li .dot::before,
      .nav203bar .nav203-menu li .dot::after {
        display: block;
        position: absolute;
        content: '';
        /* top: 50%; */
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease; }
      
      .nav203bar .nav203-menu li .dot::before {
        width: 3px;
        height: 70px;
        right: 0;
        border-left: 1px solid rgb(0, 0, 0);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      
      .nav203bar .nav203-menu li .dot::after {
        width: 25px;
        height: 15px;
        border-left: 1px solid #000000;
        -webkit-transform: translateY(-50%) scale(0);
        -ms-transform: translateY(-50%) scale(0);
        transform: translateY(-50%) scale(0); }
      
      .nav203bar .nav203-menu li .dot.active::before,
      .nav203bar .nav203-menu li:hover .dot::before {
        background: #000000;
        border-color: #000000; }
      
        
        @media (max-width: 767.98px) {
          .nav203bar {
            position: relative;
            z-index: 999;
            left: 0px;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%); }
          
          .nav203bar .nav203-menu {
            margin: 0;
            padding: 0;
            list-style-type: none; }
          
          .nav203bar .nav203-menu li {
            position: relative;
            top: 210px;
            min-width: 20px;
            height: 80px;
            text-align: left; }
      
            .nav203bar .nav203-menu li .dot::before {
              width: 3px;
              height: 90px;
              left: 0;
              border-left: 1px solid rgb(0, 0, 0);
              -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              transform: translateY(-50%); }
        }
      
        @media only screen 
        and (min-device-width: 768px)
        and (max-device-width: 1023px)
          {
            .nav203bar {
              position: relative;
              z-index: 999;
              left: 0px;
              -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              transform: translateY(-50%); }
            
            .nav203bar .nav203-menu {
              margin: 0;
              padding: 0;
              list-style-type: none; }
            
            .nav203bar .nav203-menu li {
              position: relative;
              top: 180px;
              min-width: 20px;
              height: 70px;
              text-align: right; }
      
              .nav203bar .nav203-menu li .dot::before {
                width: 3px;
                height: 70px;
                right: 0;
                border-left: 1px solid rgb(0, 0, 0);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%); }
          }
      
          @media only screen 
        and (min-device-width: 1024px)
        and (max-device-width: 1200px)
          {
            .nav203bar {
              left: 10px;
          }
      
          .nav203bar .nav203-menu li {
            position: relative;
            top: 160px;
            min-width: 0px;
            height: 55px;
            text-align: right; }
      
            .nav203bar .nav203-menu li .dot::before {
              width: 3px;
              height: 65px;
              right: 0;
              border-left: 1px solid rgb(0, 0, 0);
              -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              transform: translateY(-50%); }
          }
      
          @media only screen 
          and (min-device-width: 1201px)
          and (max-device-width: 1439px)
            {
              .nav203bar {
                left: 0px;
            }
        
            .nav203bar .nav203-menu li {
              position: relative;
              top: 170px;
              min-width: 0px;
              height: 70px;
              text-align: right; }
        
              .nav203bar .nav203-menu li .dot::before {
                width: 3px;
                height: 80px;
                right: 0;
                border-left: 1px solid rgb(0, 0, 0);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%); }
            }