.mainp-container {
  height: 85vh;
  display: grid;
  grid-template-columns: 1fr 2fr;
  margin-top: 1%;
}
.mainp-left-main {
  margin-left: 1%;
  margin-right: 1%;
  height: 85vh;
}

.mainp-left-main-top,
.mainp-right-main-top {
  border-radius: 20px;
  margin-top: 10px;
  margin-left: 1%;
  margin-right: 1%;
  height: 25vh; /* 변경된 부분 */
}
.mainp-right-main-bottom {
  border-radius: 20px;
  margin-top: 10px;
  margin-left: 1%;
  margin-right: 1%;
  height: 55vh;
}
.mainp-title {
  border: 1px solid black;
  margin-left: 3%;
  margin-right: 1%;
  margin-top: 10px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mainp-content {
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 20px;
  background-color: #d9d9d9;
  margin-left: 1%;
  margin-right: 1%;
  height: 20vh;
}
.mainp-ul {
  list-style-type: none;
  display: flex;
}
.mainp-li {
  list-style-type: none;
  margin-left: 10%;
  border-radius: 10px;
  border: 1px solid black;
  padding: 10px;
  background-color: white;
}
.mainp-firstli {
  list-style-type: none;
  margin-left: 3%;
  border-radius: 10px;
  border: 1px solid black;
  padding: 10px;
  background-color: white;
}
.mainp-li:hover {
  cursor: pointer;
  opacity: 0.7;
}
.mainp-firstli:hover {
  cursor: pointer;
  opacity: 0.7;
}
.mainp-lesson-li {
  list-style-type: none;
  border-radius: 10px;
  border: 1px solid black;
  padding: 10px;
  background-color: white;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8%;
}
.mainp-lesson-li:hover {
  cursor: pointer;
  opacity: 0.7;
}
.mainp-lesson-ul {
  float: left;
}
.mainp-lesson1 {
  float: left;
  padding: 0px;
  margin: 0px;
}
.mainp-lesson2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
}
.mainp-left-main-bottom {
  border-radius: 20px;
  margin-top: 10px;
  background-color: #d9d9d9;
  margin-left: 1%;
  margin-right: 1%;
  height: 55vh;
}
.mainp-right-main {
  margin-left: 1%;
  margin-right: 1%;
  height: 85vh;
}

.mainp-title-right {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  margin-left: 3%;
  margin-right: 1%;
  margin-top: 10px;
  width: 100px;
}
.mainp-content-right {
  border-radius: 20px;
  background-color: #d9d9d9;
  margin-left: 1%;
  margin-right: 1%;
  height: 20vh;
  display: grid;
  grid-template-columns: 1fr 4fr;
}
.mainp-lesson1 {
  float: left;
  padding: 0px;
  margin: 0px;
}
.mainp-lesson2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mainp-lesson2-span {
  font-size: 40px;
}
.mainp-content-right2 {
  border-radius: 20px;
  background-color: #d9d9d9;
  height: 50vh;
  border: 1px solid transparent;
}
.mainp-ul2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6%;
}
.mainp-firstli2 {
  list-style-type: none;
  margin-left: 3%;
  border-radius: 30px;
  border: 1px solid black;
  padding: 10px;
  width: 80px;
  height: 80px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}
.mainp-li2 {
  list-style-type: none;
  margin-left: 3%;
  border-radius: 30px;
  border: 1px solid black;
  padding: 10px;
  width: 80px;
  height: 80px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}
.mainp-li2:hover {
  cursor: pointer;
  opacity: 0.7;
}
.mainp-firstli2:hover {
  cursor: pointer;
  opacity: 0.7;
}