/* line 2, ../scss/_sprite.scss */
.music-map {
  background: url("../img/mapbg.png") no-repeat;
}

/* line 5, ../scss/_sprite.scss */
.map-item:before, .map-item:after {
  background: url(../img/sprite.png) 0 0 no-repeat;
}

@media screen and (max-width: 400px) {
  /* line 10, ../scss/_sprite.scss */
  .map-item:before, .map-item:after {
    background: url(../img/sprite_mobile.png) 0 0 no-repeat;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
  /* line 18, ../scss/_sprite.scss */
  .music-map {
    background: url("../img/mapbg@2x.png") no-repeat;
    background-size: 360px 284px;
  }

  /* line 22, ../scss/_sprite.scss */
  .map-item:before, .map-item:after {
    background: url(../img/sprite@2x.png) 0 0 no-repeat;
    background-size: 150px 931px;
  }
}
@media screen and (max-width: 400px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 400px) and (min--moz-device-pixel-ratio: 1.5), only screen and (max-width: 400px) and (min-resolution: 240dpi) {
  /* line 36, ../scss/_sprite.scss */
  .map-item:before, .map-item:after {
    background: url(../img/sprite_mobile@2x.png) 0 0 no-repeat;
    background-size: 120px 745px;
  }
}
/* line 1, ../scss/_sidebar.scss */
.music-map {
  max-width: 360px;
  width: 360px;
  height: 284px;
  margin: auto;
  position: relative;
}

/* line 9, ../scss/_sidebar.scss */
.map-item {
  display: inline-block;
  position: absolute;
}
/* line 12, ../scss/_sidebar.scss */
.map-item:before, .map-item:after {
  content: '';
  display: block;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
/* line 18, ../scss/_sidebar.scss */
.map-item:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
/* line 25, ../scss/_sidebar.scss */
.map-item.map-item1 {
  left: 13px;
  top: 20px;
}
/* line 28, ../scss/_sidebar.scss */
.map-item.map-item1:before {
  background-position: 0 -475px;
  width: 119px;
  height: 60px;
}
/* line 34, ../scss/_sidebar.scss */
.map-item.map-item1:after {
  background-position: 0 0;
  width: 119px;
  height: 60px;
}
/* line 40, ../scss/_sidebar.scss */
.map-item.map-item2 {
  right: 23px;
  top: 15px;
}
/* line 43, ../scss/_sidebar.scss */
.map-item.map-item2:before {
  background-position: 0 -546px;
  width: 101px;
  height: 62px;
}
/* line 49, ../scss/_sidebar.scss */
.map-item.map-item2:after {
  background-position: 0 -71px;
  width: 101px;
  height: 62px;
}
/* line 56, ../scss/_sidebar.scss */
.map-item.map-item3 {
  left: 23px;
  top: 115px;
}
/* line 59, ../scss/_sidebar.scss */
.map-item.map-item3:before {
  background-position: 0 -617px;
  width: 91px;
  height: 56px;
}
/* line 65, ../scss/_sidebar.scss */
.map-item.map-item3:after {
  background-position: 0 -149px;
  width: 91px;
  height: 56px;
}
/* line 72, ../scss/_sidebar.scss */
.map-item.map-item4 {
  left: 152px;
  top: 102px;
}
/* line 75, ../scss/_sidebar.scss */
.map-item.map-item4:before {
  background-position: 0 -686px;
  width: 54px;
  height: 76px;
}
/* line 81, ../scss/_sidebar.scss */
.map-item.map-item4:after {
  background-position: 0 -222px;
  width: 54px;
  height: 76px;
}
/* line 88, ../scss/_sidebar.scss */
.map-item.map-item5 {
  right: 44px;
  top: 106px;
}
/* line 91, ../scss/_sidebar.scss */
.map-item.map-item5:before {
  background-position: -72px -690px;
  width: 57px;
  height: 67px;
}
/* line 97, ../scss/_sidebar.scss */
.map-item.map-item5:after {
  background-position: -72px -227px;
  width: 57px;
  height: 67px;
}
/* line 104, ../scss/_sidebar.scss */
.map-item.map-item6 {
  left: 21px;
  bottom: 14px;
}
/* line 107, ../scss/_sidebar.scss */
.map-item.map-item6:before {
  background-position: -4px -773px;
  width: 139px;
  height: 56px;
}
/* line 113, ../scss/_sidebar.scss */
.map-item.map-item6:after {
  background-position: -3px -308px;
  width: 139px;
  height: 56px;
}
/* line 120, ../scss/_sidebar.scss */
.map-item.map-item7 {
  right: 51px;
  bottom: 12px;
}
/* line 123, ../scss/_sidebar.scss */
.map-item.map-item7:before {
  background-position: -1px -835px;
  width: 53px;
  height: 87px;
}
/* line 129, ../scss/_sidebar.scss */
.map-item.map-item7:after {
  background-position: -3px -377px;
  width: 53px;
  height: 87px;
}
/* line 137, ../scss/_sidebar.scss */
.map-item:hover:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  visibility: visible;
}
/* line 141, ../scss/_sidebar.scss */
.map-item:hover:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
}

@media screen and (max-width: 400px) {
  /* line 153, ../scss/_sidebar.scss */
  .music-map {
    width: 300px;
    height: 235px;
    background-size: 100%;
  }

  /* line 202, ../scss/_sidebar.scss */
  .map-item.map-item1 {
    left: 13px;
    top: 17px;
  }
  /* line 205, ../scss/_sidebar.scss */
  .map-item.map-item1:before, .map-item.map-item1:after {
    width: 96px;
    height: 49px;
  }
  /* line 209, ../scss/_sidebar.scss */
  .map-item.map-item1:before {
    background-position: 0 -380px;
  }
  /* line 213, ../scss/_sidebar.scss */
  .map-item.map-item1:after {
    background-position: 0 0;
  }
  /* line 217, ../scss/_sidebar.scss */
  .map-item.map-item2 {
    right: 23px;
    top: 17px;
  }
  /* line 220, ../scss/_sidebar.scss */
  .map-item.map-item2:before, .map-item.map-item2:after {
    width: 81px;
    height: 51px;
  }
  /* line 224, ../scss/_sidebar.scss */
  .map-item.map-item2:before {
    background-position: 0 -436px;
  }
  /* line 228, ../scss/_sidebar.scss */
  .map-item.map-item2:after {
    background-position: 0 -56px;
  }
  /* line 232, ../scss/_sidebar.scss */
  .map-item.map-item3 {
    left: 19px;
    top: 97px;
  }
  /* line 235, ../scss/_sidebar.scss */
  .map-item.map-item3:before, .map-item.map-item3:after {
    width: 73px;
    height: 45px;
  }
  /* line 239, ../scss/_sidebar.scss */
  .map-item.map-item3:before {
    background-position: 0 -494px;
  }
  /* line 243, ../scss/_sidebar.scss */
  .map-item.map-item3:after {
    background-position: 0 -119px;
  }
  /* line 247, ../scss/_sidebar.scss */
  .map-item.map-item4 {
    left: 129px;
    top: 88px;
  }
  /* line 250, ../scss/_sidebar.scss */
  .map-item.map-item4:before, .map-item.map-item4:after {
    width: 44px;
    height: 60px;
  }
  /* line 254, ../scss/_sidebar.scss */
  .map-item.map-item4:before {
    background-position: 0 -549px;
  }
  /* line 258, ../scss/_sidebar.scss */
  .map-item.map-item4:after {
    background-position: 0 -177px;
  }
  /* line 262, ../scss/_sidebar.scss */
  .map-item.map-item5 {
    right: 34px;
    top: 89px;
  }
  /* line 265, ../scss/_sidebar.scss */
  .map-item.map-item5:before, .map-item.map-item5:after {
    width: 45px;
    height: 54px;
  }
  /* line 269, ../scss/_sidebar.scss */
  .map-item.map-item5:before {
    background-position: -58px -552px;
  }
  /* line 273, ../scss/_sidebar.scss */
  .map-item.map-item5:after {
    background-position: -58px -182px;
  }
  /* line 277, ../scss/_sidebar.scss */
  .map-item.map-item6 {
    left: 17px;
    bottom: 13px;
  }
  /* line 280, ../scss/_sidebar.scss */
  .map-item.map-item6:before, .map-item.map-item6:after {
    width: 112px;
    height: 44px;
  }
  /* line 284, ../scss/_sidebar.scss */
  .map-item.map-item6:before {
    background-position: -3px -619px;
  }
  /* line 288, ../scss/_sidebar.scss */
  .map-item.map-item6:after {
    background-position: -2px -246px;
  }
  /* line 292, ../scss/_sidebar.scss */
  .map-item.map-item7 {
    right: 38px;
    bottom: 8px;
  }
  /* line 295, ../scss/_sidebar.scss */
  .map-item.map-item7:before, .map-item.map-item7:after {
    width: 43px;
    height: 70px;
  }
  /* line 299, ../scss/_sidebar.scss */
  .map-item.map-item7:before {
    background-position: -1px -668px;
  }
  /* line 303, ../scss/_sidebar.scss */
  .map-item.map-item7:after {
    background-position: -2px -302px;
  }
}

@media screen and (max-width: 960px) and (min-width: 400px) {
.music-map {
background: url("../img/mapbg@2x.png") no-repeat;
background-size: 420px 331px;
max-width: 420px;
width: 420px;
height: 331px;
}
.map-item.map-item1 {
left: 17px;
top: 27px;
}
.map-item.map-item2 {
right: 34px;
top: 27px;
}
.map-item.map-item3 {
left: 28px;
top: 136px;
}
.map-item.map-item4 {
left: 182px;
top: 124px;
}
.map-item.map-item5 {
right: 50px;
top: 127px;
}
.map-item.map-item6 {
left: 25px;
bottom: 26px;
}
.map-item.map-item7 {
right: 58px;
bottom: 18px;
}
}