/* line 16, ../sass/_skincare.scss */
.bg-pic {
  margin-bottom:-30px;
  position:relative;
  width: 100%;
  height:940px;
  background:url(../images/salon/beauty_bg.jpg.jpg) no-repeat;
}

/* line 26, ../sass/_skincare.scss */
.shade {
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  z-index: 3;
  top: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
/* line 35, ../sass/_skincare.scss */
.shade .guide {
  width: 360px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -180px;
  margin-top: -150px;
}
/* line 42, ../sass/_skincare.scss */
.shade .guide .guide-title {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
/* line 48, ../sass/_skincare.scss */
.shade .guide .guide-content {
  overflow: hidden;
  *zoom: 1;
  position: relative;
  padding: 70px 0;
  padding-left: 20px;
}
/* line 53, ../sass/_skincare.scss */
.shade .guide .guide-content .mouse, .shade .guide .guide-content p {
  float: left;
}
/* line 56, ../sass/_skincare.scss */
.shade .guide .guide-content .mouse-btn {
  float: right;
  position: relative;
  top: 15px;
}
/* line 60, ../sass/_skincare.scss */
.shade .guide .guide-content .mouse-btn .top {
  text-align: center;
  padding-bottom: 3px;
}
/* line 65, ../sass/_skincare.scss */
.shade .guide .guide-content .mouse-btn .bottom .guideLeft {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  animation: flash 5s ease 2s infinite;
  -moz-animation: flash 5s ease 2s infinite;
  -webkit-animation: flash 5s ease 2s infinite;
  -o-animation: flash 5s ease 2s infinite;
}
/* line 72, ../sass/_skincare.scss */
.shade .guide .guide-content .mouse-btn .bottom .guideRight {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  animation: flash 5s ease 2s infinite;
  -moz-animation: flash 5s ease 2s infinite;
  -webkit-animation: flash 5s ease 2s infinite;
  -o-animation: flash 5s ease 2s infinite;
}
/* line 81, ../sass/_skincare.scss */
.shade .guide .guide-content p {
  width: 20px;
  height: 20px;
  position: relative;
  top: 40px;
  left: 80px;
  font-size: 14px;
  color: #fff;
}
/* line 87, ../sass/_skincare.scss */
.shade .guide .guide-content .mouse {
  position: relative;
  left: 10px;
}
/* line 90, ../sass/_skincare.scss */
.shade .guide .guide-content .mouse .mouseRollPic {
  position: relative;
  top: -61px;
  left: -35px;
}
/* line 95, ../sass/_skincare.scss */
.shade .guide .guide-content .mouse .mouseLeftPic {
  position: absolute;
  left: -16px;
  top: 35px;
  display: block;
  animation: mouseLeft 0.8s linear .0s infinite;
  -moz-animation: mouseLeft 0.8s linear .0s infinite;
  -webkit-animation: mouseLeft 0.8s linear .0s infinite;
  -o-animation: mouseLeft 0.8s linear .0s infinite;
}
/* line 106, ../sass/_skincare.scss */
.shade .guide .guide-content .mouse .mouseRightPic {
  position: absolute;
  right: 0;
  top: 35px;
  display: block;
  animation: mouseRight 0.8s linear .0s infinite;
  -moz-animation: mouseRight 0.8s linear .0s infinite;
  -webkit-animation: mouseRight 0.8s linear .0s infinite;
  -o-animation: mouseRight 0.8s linear .0s infinite;
}
/* line 117, ../sass/_skincare.scss */
.shade .guide .guide-content .mouse-font {
  position: absolute;
  top: 180px;
  left: 32px;
  z-index: 9999;
  width: 60px;
  font-size: 12px;
}
/* line 125, ../sass/_skincare.scss */
.shade .guide .guide-content .mouse-btn-font {
  position: absolute;
  top: 96px;
  left: 21px;
  z-index: 9999;
  width: 80px;
  font-size: 12px;
}
/* line 134, ../sass/_skincare.scss */
.shade .guide .guide-footer {
  width: 70px;
  height: 25px;
  line-height: 24px;
  text-align: center;
  margin: 0 auto;
  display: block;
  border-radius: 50px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

@keyframes mouseLeft {
  0% {
    left: -15px;
    opacity: 1;
  }
  100% {
    left: -25px;
    opacity: 0;
  }
}
@-webkit-keyframes mouseLeft {
  0% {
    left: -15px;
    opacity: 1;
  }
  100% {
    left: -25px;
    opacity: 0;
  }
}
@-moz-keyframes mouseLeft {
  0% {
    left: -15px;
    opacity: 1;
  }
  100% {
    left: -25px;
    opacity: 0;
  }
}
@-ms-keyframes mouseLeft {
  0% {
    left: -15px;
    opacity: 1;
  }
  100% {
    left: -25px;
    opacity: 0;
  }
}
@keyframes mouseRight {
  0% {
    right: 0px;
    opacity: 1;
  }
  100% {
    right: -10px;
    opacity: 0;
  }
}
@-webkit-keyframes mouseRight {
  0% {
    right: 0px;
    opacity: 1;
  }
  100% {
    right: -10px;
    opacity: 0;
  }
}
@-moz-keyframes mouseRight {
  0% {
    right: 0px;
    opacity: 1;
  }
  100% {
    right: -10px;
    opacity: 0;
  }
}
@-ms-keyframes mouseRight {
  0% {
    right: 0px;
    opacity: 1;
  }
  100% {
    right: -10px;
    opacity: 0;
  }
}
@keyframes flash {
  0%,50%,100% {
    opacity: 0.5;
  }
  25%,75% {
    opacity: 1;
  }
}
@-webkit-keyframes flash {
  0%,50%,100% {
    opacity: 0.5;
  }
  25%,75% {
    opacity: 1;
  }
}
@-moz-keyframes flash {
  0%,50%,100% {
    opacity: 0.5;
  }
  25%,75% {
    opacity: 1;
  }
}
@-ms-keyframes flash {
  0%,50%,100% {
    opacity: 0.5;
  }
  25%,75% {
    opacity: 1;
  }
}