
body#lesson .lesson_print {
  display: none;
  background-color: black;
}

body#lesson #wrapper {
  background: url("/img/lesson/main_bg_lesson.png") no-repeat center 142px;
}

body#lesson .main_frame {
  position: relative;
  max-width: 1366px;
  aspect-ratio: 1366/600;
  margin: 0 auto;
  padding: 0;
  top: 0;
  left: 0;
}
body#lesson .main_frame.top {
  background: url("/img/lesson/top_bg.jpg") no-repeat center top;
  background-size: 100% auto;
}

body#lesson .main_frame .makimono {
  position: absolute;
  top: 171px;
  top: calc(171/600 * 100%);
  left: 0;

  width: 100%;
}
body#lesson .main_frame .makimono a {
  position: absolute;
  top: 0;
}
body#lesson .main_frame .makimono a.ls1 {
  width: calc(303/1366 * 100%);
  left: calc(210/1366 * 100%);
}
body#lesson .main_frame .makimono a.ls2 {
  width: calc(303/1366 * 100%);
  left: calc(532/1366 * 100%);
}
body#lesson .main_frame .makimono a.ls3 {
  width: calc(303/1366 * 100%);
  left: calc(854/1366 * 100%);
}
body#lesson .main_frame .download {
  position: absolute;
  top: 463px;
  left: 0;
}
body#lesson .main_frame .download a {
  position: absolute;
  top: 0;
}
body#lesson .main_frame .download a.dl1 {
  left: 260px;
}
body#lesson .main_frame .download a.dl2 {
  left: 580px;
}
body#lesson .main_frame .download a.dl3 {
  left: 902px;
}
body#lesson .main_frame .lessonlist {
  position: absolute;
  top: 619px;
  left: 0;
}
body#lesson .main_frame .lessonlist a {
  position: absolute;
  top: 0;
}
body#lesson .main_frame .lessonlist a.ls1 {
  left: 233px;
}
body#lesson .main_frame .lessonlist a.ls2 {
  left: 555px;
}
body#lesson .main_frame .lessonlist a.ls3 {
  left: 877px;
}
body#lesson .main_frame .lb {
  position: absolute;
  line-height: 0;
  width: calc(338/1366 * 100%);
  top: calc(560/600 * 100%);
  right: calc(194/1366 * 100%);
}

body#lesson .main_frame .dl {
  position: relative;
  top: 35px;
  margin-left: 180px;
}

body#lesson.inactive {
  overflow: hidden;
}
body#lesson #popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  text-align: center;
  z-index: 100;
  overflow: auto;
}
body#lesson #popup .popup-dialog {
  position: relative;
  max-width: 984px;
  margin: 20px auto;
}
body#lesson #popup .popup-dialog div.lesson1,
body#lesson #popup .popup-dialog div.lesson2,
body#lesson #popup .popup-dialog div.lesson3,
body#lesson #popup .popup-dialog div.lesson4,
body#lesson #popup .popup-dialog div.dl_all {
  position: absolute;
}
body#lesson #popup .popup-dialog div.lesson1 a,
body#lesson #popup .popup-dialog div.lesson2 a,
body#lesson #popup .popup-dialog div.lesson3 a,
body#lesson #popup .popup-dialog div.lesson4 a{
  margin-bottom: calc(10/138 * 100%);
  position: relative;
  display: block;
}
body#lesson #popup .popup-dialog div.dl_all a{
  position: relative;
  display: block;
}
body#lesson #popup .popup-dialog div.lesson1 {
  top: calc(534/1674 * 100%);
  right: calc(70/984 * 100%);
  width: calc(138/984 * 100%);
}
body#lesson #popup .popup-dialog div.lesson2 {
  top: calc(796/1674 * 100%);
  right: calc(70/984 * 100%);
  width: calc(138/984 * 100%);
}
body#lesson #popup .popup-dialog div.lesson3 {
  top: calc(1038/1674 * 100%);
  right: calc(70/984 * 100%);
  width: calc(138/984 * 100%);
}
body#lesson #popup .popup-dialog div.lesson4 {
  top: calc(1375/1674 * 100%);
  right: calc(70/984 * 100%);
  width: calc(138/984 * 100%);
}
body#lesson #popup .popup-dialog div.dl_all {
  bottom: calc(17/1674 * 100%);
  left: calc(40/984 * 100%);
  width: calc(539/984 * 100%);
  display: flex;
}
body#lesson #popup .popup-dialog div.dl_all a {
}
body#lesson #popup .popup-dialog div.dl_all a[href="pdf/print_all.pdf"] {
  width: calc(248/539 * 100%);
}
body#lesson #popup .popup-dialog div.dl_all a[href="pdf/sidou_all.pdf"] {
  width: calc(248/539 * 100%);
  margin-left: calc(10 / 539 * 100%);
}


body#lesson #popup .popup-dialog div.lesson1 a:hover,
body#lesson #popup .popup-dialog div.lesson2 a:hover,
body#lesson #popup .popup-dialog div.lesson3 a:hover,
body#lesson #popup .popup-dialog div.lesson4 a:hover,
body#lesson #popup .popup-dialog div.dl_all a:hover {
  opacity: 0.8;
}
body#lesson #popup a.close {
  position: absolute;
  right: calc(7/984 * 100%);
  bottom: calc(18/1674 * 100%);
  width: calc(122/984 * 100%);
}
