.share-panel-mask ul {
  *zoom: 1
}

.share-panel-mask ul:before,
.share-panel-mask ul:after {
  content: "";
  display: table
}

.share-panel-mask ul:after {
  clear: both
}

.icons-share-qzone {
  width: 4.5rem;
  height: 4.3rem
}

.icons-share-qzone:before {
  width: 89px;
  height: 85px;
  margin-left: -3.7rem;
  margin-top: -3.8rem;
  background: url('./img/share-s08a9eca5a9.png') 0 -176px no-repeat;
  transform: scale(.50562, .50588);
  -ms-transform: scale(.50562, .50588);
  -webkit-transform: scale(.50562, .50588);
  -o-transform: scale(.50562, .50588);
  -moz-transform: scale(.50562, .50588)
}

@media only screen and (min-width: 480px) {
  .icons-share-qzone:before {
    margin-left: -2.95878rem;
    margin-top: -2.8258rem;
    transform: scale(.63371, .63404);
    -ms-transform: scale(.63371, .63404);
    -webkit-transform: scale(.63371, .63404);
    -o-transform: scale(.63371, .63404);
    -moz-transform: scale(.63371, .63404)
  }
}

@media only screen and (min-width: 560px) {
  .icons-share-qzone:before {
    margin-left: -3.70833rem;
    margin-top: -3.54167rem;
    transform: scale(.60674, .60706);
    -ms-transform: scale(.60674, .60706);
    -webkit-transform: scale(.60674, .60706);
    -o-transform: scale(.60674, .60706);
    -moz-transform: scale(.60674, .60706)
  }
}

.icons-share-wechat {
  width: 4.4rem;
  height: 3.6rem
}

.icons-share-wechat:before {
  width: 88px;
  height: 72px;
  margin-left: -3.5rem;
  margin-top: -3.2rem;
  background: url('./img/share-s08a9eca5a9.png') 0 -265px no-repeat;
  transform: scale(.5, .5);
  -ms-transform: scale(.5, .5);
  -webkit-transform: scale(.5, .5);
  -o-transform: scale(.5, .5);
  -moz-transform: scale(.5, .5)
}

@media only screen and (min-width: 480px) {
  .icons-share-wechat:before {
    margin-left: -2.92553rem;
    margin-top: -2.39362rem;
    transform: scale(.62667, .62667);
    -ms-transform: scale(.62667, .62667);
    -webkit-transform: scale(.62667, .62667);
    -o-transform: scale(.62667, .62667);
    -moz-transform: scale(.62667, .62667)
  }
}

@media only screen and (min-width: 560px) {
  .icons-share-wechat:before {
    margin-left: -3.66667rem;
    margin-top: -3rem;
    transform: scale(.6, .6);
    -ms-transform: scale(.6, .6);
    -webkit-transform: scale(.6, .6);
    -o-transform: scale(.6, .6);
    -moz-transform: scale(.6, .6)
  }
}

.icons-share-moment {
  width: 4rem;
  height: 4rem
}

.icons-share-moment:before {
  width: 80px;
  height: 80px;
  margin-left: -3.35rem;
  margin-top: -3.5rem;
  background: url('./img/share-s08a9eca5a9.png') 0 0 no-repeat;
  transform: scale(.5, .5);
  -ms-transform: scale(.5, .5);
  -webkit-transform: scale(.5, .5);
  -o-transform: scale(.5, .5);
  -moz-transform: scale(.5, .5)
}

@media only screen and (min-width: 480px) {
  .icons-share-moment:before {
    margin-left: -2.65957rem;
    margin-top: -2.65957rem;
    transform: scale(.62667, .62667);
    -ms-transform: scale(.62667, .62667);
    -webkit-transform: scale(.62667, .62667);
    -o-transform: scale(.62667, .62667);
    -moz-transform: scale(.62667, .62667)
  }
}

@media only screen and (min-width: 560px) {
  .icons-share-moment:before {
    margin-left: -3.33333rem;
    margin-top: -3.33333rem;
    transform: scale(.6, .6);
    -ms-transform: scale(.6, .6);
    -webkit-transform: scale(.6, .6);
    -o-transform: scale(.6, .6);
    -moz-transform: scale(.6, .6)
  }
}

.icons-share-qq {
  width: 3.7rem;
  height: 4.4rem
}

.icons-share-qq:before {
  width: 73px;
  height: 88px;
  margin-left: -3.4rem;
  margin-top: -4rem;
  background: url('./img/share-s08a9eca5a9.png') 0 -84px no-repeat;
  transform: scale(.50685, .5);
  -ms-transform: scale(.50685, .5);
  -webkit-transform: scale(.50685, .5);
  -o-transform: scale(.50685, .5);
  -moz-transform: scale(.50685, .5)
}

@media only screen and (min-width: 480px) {
  .icons-share-qq:before {
    margin-left: -2.42686rem;
    margin-top: -2.92553rem;
    transform: scale(.63525, .62667);
    -ms-transform: scale(.63525, .62667);
    -webkit-transform: scale(.63525, .62667);
    -o-transform: scale(.63525, .62667);
    -moz-transform: scale(.63525, .62667)
  }
}

@media only screen and (min-width: 560px) {
  .icons-share-qq:before {
    margin-left: -3.04167rem;
    margin-top: -3.66667rem;
    transform: scale(.60822, .6);
    -ms-transform: scale(.60822, .6);
    -webkit-transform: scale(.60822, .6);
    -o-transform: scale(.60822, .6);
    -moz-transform: scale(.60822, .6)
  }
}

.icons-share-weibo {
  width: 4.1rem;
  height: 3.7rem
}

.icons-share-weibo:before {
  width: 82px;
  height: 74px;
  margin-left: -3.35rem;
  margin-top: -3.4rem;
  background: url('./img/share-s08a9eca5a9.png') 0 -341px no-repeat;
  transform: scale(.5, .5);
  -ms-transform: scale(.5, .5);
  -webkit-transform: scale(.5, .5);
  -o-transform: scale(.5, .5);
  -moz-transform: scale(.5, .5)
}

@media only screen and (min-width: 480px) {
  .icons-share-weibo:before {
    margin-left: -2.72606rem;
    margin-top: -2.46011rem;
    transform: scale(.62667, .62667);
    -ms-transform: scale(.62667, .62667);
    -webkit-transform: scale(.62667, .62667);
    -o-transform: scale(.62667, .62667);
    -moz-transform: scale(.62667, .62667)
  }
}

@media only screen and (min-width: 560px) {
  .icons-share-weibo:before {
    margin-left: -3.41667rem;
    margin-top: -3.08333rem;
    transform: scale(.6, .6);
    -ms-transform: scale(.6, .6);
    -webkit-transform: scale(.6, .6);
    -o-transform: scale(.6, .6);
    -moz-transform: scale(.6, .6)
  }
}

.sprite-ico {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  top: -0.1rem;
  margin-right: 0.5rem
}

.sprite-ico:before {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  content: ''
}

.wx-share-mask,
.wap-share-mask,
.share-panel-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999
}

.share-mask {
  cursor: pointer
}

.wx-share-mask {
  text-align: right;
  padding: 1.5rem
}

.wx-share-mask img {
  width: 70%
}

.wap-share-mask img {
  position: absolute;
  width: 84.8%;
  left: 50%;
  bottom: 3rem;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.share-panel-mask .con {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 101;
  background: #fff;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  transition: 0.3s all ease
}

.share-panel-mask .con.slide-up {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.share-panel-mask ul {
  padding: 2.2rem 0 0 0;
  background: #f7f8fa;
  list-style: none;
  margin: 0
}

.share-panel-mask ul li {
  float: left;
  margin-bottom: 1.5rem;
  width: 25%;
  text-align: center
}

.share-panel-mask ul a {
  display: inline-block;
  width: 6rem;
  height: 6rem;
  line-height: 6rem;
  border-radius: 1rem;
  background: #fff
}

.share-panel-mask ul p {
  margin-top: 0.5rem;
  font-size: 1.4rem;
  color: #000
}

.share-panel-mask ul .sprite-ico {
  margin-right: 0
}

.share-panel-mask .btn-cancel {
  display: block;
  height: 5rem;
  line-height: 5rem;
  font-size: 1.7rem;
  color: #000;
  text-align: center;
  text-decoration: none
}