.banner {
  width: 100%;
  position: relative;
  height: 15.54rem;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

.dg-container {
  position: relative;
  width: 100%;
  height: 15.54rem;
}

.wrapper-shadow {
  width: 100%;
  height: 10rem;
  /* background-image: url("/static/app/images/teaching/shadow.png"); */
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
  position: absolute;
  bottom: -10px;
  z-index: 0;
}

.dg-wrapper {
  width: 37.5rem;
  height: 15.54rem;
  margin: 0 auto;
  position: relative;
  transform-style: preserve-3d;
  perspective: 600px;
  z-index: 1;
}

@media only screen and (min-device-width:300px) and (max-device-width:525px) {
  .banner{
    width: 80%;
  }

  .dg-wrapper{
      width: 18.75rem;
      perspective: 1000px;
  }
  
}

.dg-wrapper a {
  width: 100%;
  height: 15.54rem;
  display: table;
  position: absolute;
  left: 0;
  top: 0;
}

#dg-container a:before {
  content: "";
  /* background-image: url("/static/app/images/teaching/done.png"); */
  position: absolute;
  bottom: 0;
  right: 0;
  width: 5.67rem;
  height: 3.46rem;
  z-index: 3;
  display: none;
}

#dg-container a:visited:before {
  display: block;
}

.dg-wrapper a:first-child {
  z-index: 2;
}

.dg-wrapper a img {
  display: block;
  border-radius: 4px;
  width: 100%;
  height: 15.54rem;
}

.dg-wrapper a.dg-transition {
  transition: all 0.5s ease-in-out;
}

.dg-wrapper a.dg-transition-fast {
  transition: all 0.2s ease-in-out;
}

.dg-container nav {
  display: none;
}

.dg-container nav span:hover {
  opacity: 1;
}

.dg-container nav span.dg-next {
  background-position: top right;
  margin-left: 10px;
}

.dg-container #lightButton2 {
  bottom: 20px;
}

.dg-container .button {
  position: relative;
  z-index: 5;
}

.dg-container .button li {
  cursor: pointer;
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 5px;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(0, 0, 0, 0.20);
}

.dg-container .button .light {
  background: #01BDFF;
}

.dg-transitionShow {
  transition: opacity 0.2s;
  -moz-transition: opacity 0.2s; /* Firefox 4 */
  -webkit-transition: opacity 0.2s; /* Safari and Chrome */
  -o-transition: opacity 0.2s; /* Opera */
}

.item-bg {
  position: absolute;
  z-index: 1;
}

#dg-container .item-img {
  position: absolute;
  z-index: 0;
}

#dg-container .item-img.tiger {
  width: 92%;
  height: 90%;
  top: 4%;
  left: 4.5%;
}

#dg-container .item-img.ufo {
  width: 66.22%;
  height: 62.21%;
  top: 30.29%;
  left: 17.37%;
}

#dg-container .item-img.wood {
  width: 71.34%;
  height: 68.64%;
  top: 10.72%;
  left: 14.66%;
}

#dg-container .item-img.panda {
  width: 97.3%;
  height: 72%;
  top: 26.88%;
  left: 1.33%;
}

#dg-container .item-done {
  position: absolute;
  bottom: 0;
  right: 0;    
  width: 5.1rem;
  height: 2.7rem;
  z-index: 1;
}