.ibd-care-plan {
  position: relative;
  width: 100%;
  margin: 20px auto 50px;
}
.ibd-care-plan ul {
  list-style: none;
}
.ibd-care-plan ul li {
  position: absolute;
  z-index: 2;
  top: 0;
}
.ibd-care-plan ul li .marker {
  position: absolute;
  z-index: 3;
}
.ibd-care-plan ul li .marker div {
  position: absolute;
  left: -15px;
  top: -15px;
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 28px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  background-color: #ccc;
  color: #000;
  border: 1px solid #000;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 15px;
  font-size: 15px;
  font-weight: bold;
}
.ibd-care-plan ul li .body {
  position: absolute;
  top: 5px;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: #fff;
  color: #000;
  font-size: 15px;
  border: 0;
  padding: 0;
  z-index: 2;
  width: auto;
  height: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s ease, height .3s ease;
  -o-transition: opacity .3s ease, height .3s ease;
  transition: opacity .3s ease, height .3s ease;
}
.ibd-care-plan ul li:hover,
.ibd-care-plan ul li:active,
.ibd-care-plan ul li.active {
  z-index: 3;
}
.ibd-care-plan ul li:hover .body,
.ibd-care-plan ul li:active .body,
.ibd-care-plan ul li.active .body {
  display: block;
  border: 1px solid #000;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 15px;
  opacity: 1;
  width: auto;
  height: auto;
}
.ibd-care-plan ul li.point-1 {
  left: 21.9%;
  top: 22.2%;
  right: 20%;
}
.ibd-care-plan ul li.point-2 {
  left: 40.0%;
  top: 49%;
  right: 20%;
}
.ibd-care-plan ul li.point-3 {
  left: 15%;
  top: 77%;
  right: 29.7%;
}
.ibd-care-plan ul li.point-3 .marker {
  left: auto;
  right: 0;
}
.ibd-care-plan ul li.point-4 {
  left: 40.2%;
  top: 63.8%;
  right: 5%;
}
.ibd-care-plan ul li.point-4 .marker.a {
  left: 15.6%;
}
.ibd-care-plan ul li.point-4 .marker.b {
  left: 38.7%;
}
.ibd-care-plan ul li.point-4 .marker.c {
  left: 62.2%;
}
.ibd-care-plan ul li.point-4 .marker.d {
  left: 85.4%;
}
.ibd-care-plan ul li.point-4-b,
.ibd-care-plan ul li.point-4-c,
.ibd-care-plan ul li.point-4-d {
  display: none;
}
.ibd-care-plan ul li.point-5a {
  left: 30%;
  top: 46.2%;
  right: 7%;
}
.ibd-care-plan ul li.point-5a .marker {
  left: auto;
  right: 0px;
}
.ibd-care-plan ul li.point-5b {
  left: 15%;
  top: 88.4%;
  right: 16%;
}
.ibd-care-plan ul li.point-5b .marker {
  left: auto;
  right: 0;
}
.ibd-care-plan ul li.point-6 {
  left: 39.2%;
  top: 15.9%;
  right: 5%;
}
.ibd-care-plan img {
  position: relative;
  z-index: 1;
}
.ibd-care-plan img.portrait {
  display: none;
}
@media (max-width: 64.063em) {
  .ibd-care-plan {
    max-width: 400px;
  }
  .ibd-care-plan img.landscape {
    display: none;
  }
  .ibd-care-plan img.portrait {
    display: block;
  }
  .ibd-care-plan ul li .marker div {
    width: 26px;
    height: 26px;
    line-height: 24px;
    top: -13px;
    left: -13px;
  }
  .ibd-care-plan ul li.point-1 {
    left: 10.0%;
    top: 19.4%;
    right: 10%;
  }
  .ibd-care-plan ul li.point-1 .marker {
    left: 62.4%;
  }
  .ibd-care-plan ul li.point-2 {
    left: 10.0%;
    top: 36.8%;
    right: 10%;
  }
  .ibd-care-plan ul li.point-2 .marker {
    left: 54.5%;
  }
  .ibd-care-plan ul li.point-3 {
    left: 15%;
    top: 54.5%;
    right: 5%;
  }
  .ibd-care-plan ul li.point-3 .marker {
    left: auto;
    right: 2%;
  }
  .ibd-care-plan ul li.point-4 {
    left: 10.0%;
    top: 45.7%;
    right: 10%;
  }
  .ibd-care-plan ul li.point-4 .marker.a {
    left: 59.6%;
  }
  .ibd-care-plan ul li.point-4 .marker.b {
    display: none;
  }
  .ibd-care-plan ul li.point-4 .marker.c {
    display: none;
  }
  .ibd-care-plan ul li.point-4 .marker.d {
    display: none;
  }
  .ibd-care-plan ul li.point-4-b,
  .ibd-care-plan ul li.point-4-c,
  .ibd-care-plan ul li.point-4-d {
    display: block;
    left: 10.0%;
    right: 10%;
  }
  .ibd-care-plan ul li.point-4-b .marker,
  .ibd-care-plan ul li.point-4-c .marker,
  .ibd-care-plan ul li.point-4-d .marker {
    left: 59.6%;
  }
  .ibd-care-plan ul li.point-4-b {
    top: 59.1%;
  }
  .ibd-care-plan ul li.point-4-c {
    top: 71.5%;
  }
  .ibd-care-plan ul li.point-4-d {
    top: 85.2%;
  }
  .ibd-care-plan ul li.point-5a {
    left: 15%;
    top: 81.2%;
    right: 5%;
  }
  .ibd-care-plan ul li.point-5a .marker {
    left: auto;
    right: 2%;
  }
  .ibd-care-plan ul li.point-5b {
    left: 10%;
    top: 89.4%;
    right: 10%;
  }
  .ibd-care-plan ul li.point-5b .marker {
    left: 54.5%;
  }
  .ibd-care-plan ul li.point-6 {
    left: 10.0%;
    top: 38%;
    right: 10.0%;
  }
  .ibd-care-plan ul li.point-6 .marker {
    left: 5%;
  }
}