#N2,
#NH2 {
  top: 43%;
  left: 10%;
  text-align: left;
}

#N3line,
#NH3line {
  width: 90px;
  left: 28%;
}

#N5 {
  left: 79%;
}

#NH5 {
  left: 77.5%;
}

#N6,
#NH6 {
  /* top: 43%; */
  left: 79%;
  text-align: left;
}

#N2line,
#NH2line {
  width: 100px;
  left: 27%;
}

#N4 {
  left: 34%;
}

#NH4 {
  top: -20%;
}

#NH4line {
  height: 100px;
  top: -13%;
  left: 48%;
  transform: rotate(320deg);
}

.m3 {
  border-style: none;
}

@media screen and (max-width: 800px) {
  #N1line,
  #NH1line {
    width: 130px;
    left: 18%;
  }

  .controller {
    margin: 80px auto 0px;
  }

  #N2,
  #NH2 {
    top: 40%;
    left: 3%;
  }

  #N2line,
  #NH2line {
    width: 70px;
    left: 26%;
  }

  #N3line,
  #NH3line {
    width: 60px;
    left: 27%;
  }

  #N4 {
    left: 29%;
  }

  #NH4 {
    left: 7%;
  }

  #N5,
  #NH5 {
    left: 73%;
  }

  #N6,
  #NH6 {
    top: 40%;
    left: 77%;
  }

  #NH4line {
    height: 50px;
    top: -10%;
  }
}

@media screen and (max-width: 1100px) and (orientation: landscape) {
  #N1line,
  #NH1line {
    width: 130px;
    left: 18%;
  }

  .controller {
    margin: 80px auto 0px;
  }

  #N2,
  #NH2 {
    top: 40%;
    left: 3%;
  }

  #N2line,
  #NH2line {
    width: 70px;
    left: 26%;
  }

  #N3line,
  #NH3line {
    width: 60px;
    left: 27%;
  }

  #N4 {
    left: 29%;
  }

  #NH4 {
    left: 7%;
  }

  #N5,
  #NH5 {
    left: 73%;
  }

  #N6,
  #NH6 {
    top: 40%;
    left: 77%;
  }

  #NH4line {
    height: 50px;
    top: -10%;
  }
}