* {
  margin: 0;
  padding: 0;
}

html,
body {
  max-width: 750px;
  height: 100%;
  min-height: 100%;
  overflow-y: hidden;
  position: relative;
  margin: 0 auto;
}

.share{
  background-color: #f9c45b;
}

.bg {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-image: url(../img/bg@2x.png);
  background-size: 100%;
  background-position: top;
  background-repeat: no-repeat;
}

.share .items {
  width: 8.29rem;
  height: 7.2rem;
  margin: 4.13rem auto 1.36rem;
  padding: 0.53rem 0.32rem 0.64rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.share .items .item{
  display: flex;
}
.share .items .first{
  height: 1.07rem;
}
.share .items .second{
  height: 1.6rem;
}
.share .items .third{
  height: 2.506rem;
}
.share .items .item .ico{
  width: 1.07rem;
  height: 1.07rem;
  margin-right: 16px;
  font-size: 0;
}
.share .items .item .ico img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.share .items .item .warp{
  padding: 0.27rem;
  background-color: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 0px 8px 8px 8px;
  box-sizing: border-box;
}
.share .items .first .warp{
  width: 6.16rem;
  height: 1.07rem;
}
.share .items .second .warp{
  width: 6.16rem;
  height: 1.6rem;
}
.share .items .third .warp{
  width: 6.16rem;
  height: 2.51rem;
}

.share .items .item .word{
  height: 0.48rem;
  line-height: 0.48rem;
  font-size: 0.43rem;
  color: #333333;
  white-space: nowrap;
}
.share .items .second .word{
  height: 1.07rem;
}
.share .items .third .warp{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.share .items .third .warp .task .info .title{
  display: flex;
}
.share .items .third .warp .task .info .title .ava{
  width: 0.64rem;
  height: 0.64rem;
  font-size: 0;
  margin-right: 0.27rem;
  flex: 0 0 auto;
}
.share .items .third .warp .task .info .title .ava img{
  width: 100%;
  height: 100%;
  border-radius: 0.213rem;
}
.share .items .third .warp .task .info .title .detail .name{
  font-size: 0.43rem;
  font-weight: bold;
  color: #333333;
  white-space: nowrap;
  margin-bottom: 0.11rem;
}
.share .items .third .warp .task .info .detail .project{
  font-size: 0.27rem;
  color: #333333;
  margin: auto;
  white-space: nowrap;
}
.share .items .third .warp .task .money{
  display: flex;
  align-items: baseline;
  font-weight: bold;
  color: #FF6644;
}
.share .items .third .warp .task .border{
  width: 4rem;
  color: #CCCCCC;
  white-space: nowrap;
  overflow: hidden;
}
.share .items .third .warp .task .money .warpper{
  display: flex;
  align-items: baseline;
  margin-left: 2px;
}
.share .items .third .warp .task .money .warpper .plus{
  font-size: 0.32rem; 
}
.share .items .third .warp .task .money .warpper .num{
  font-size: 0.48rem; 
}
.share .items .third .warp .source{
  display: flex;
  align-items: center;
}
.share .items .third .warp .source .icon{
  width: 0.32rem;
  height: 0.32rem;
  font-size: 0;
  margin-right: 4px;
}
.share .items .third .warp .source .icon img{
  width: 100%;
  height: 100%;
}
.share .items .third .warp .source .name{
  font-size: 0.27rem;
  color: #999999;
}

.share .btnn {
  width: 6.59rem;
  height: 1.28rem;
  background: linear-gradient(90deg, #FFFF00 0%, #FFD500 100%);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 24px;
  margin: 0 auto;
  display: flex;
}

.share .btnn div{
  margin: auto;
  font-size: 24px;
  font-weight: bold;
  color: #F14336;
}
.mark {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 200;
  transition: all 1s;
}

.mark > img {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 228px;
  height: 154px;
  z-index: 3;
}
.ios_content{
  width:100%;
  background:#ffffff;
  border-radius: 8px;
}

.ios_content .resume{
  display:flex;  
  padding:16px;
  border-bottom:1px solid #EEEEEE;
}

.ios_content .resume .icon{
  width:80px;
  height: 80px;
}

.ios_content .resume .icon img{
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

.ios_content .resume .desc{
  margin-left:16px;
  width:calc(100% - 96px);
}

.ios_content .resume .desc .app_name{
  font-size: 18px;
  font-weight: bold;
  margin-bottom:12px;
}

.ios_content .resume .desc .abst{
  font-size:14px;
  color: #999999;
}

.ios_content .resume .desc .abst .green{
  color: #119C51;
}

.ios_content .btn{
  display: flex;
  justify-content: center;
  margin-top:16px;
}

.ios_content .btn span{
  text-align:center;
  background-color:#333333;
  border-radius:25px;
  height:48px;
  line-height:48px;
  border:none;
  width:80%;
  font-size: 16px;
  font-weight: bold;
  color:#ffffff;
  margin-bottom:16px;
}

.install{
  display:none;
  padding:16px;
  background-color:#fff;
  border-radius:8px;
  margin-top:16px;
}

.install .font{
  font-size:12px;
  color: #999999;
  text-align:center;
}

.install .btn{
  display:flex;
  justify-content: center;
  margin-bottom:16px;
}

.install .btn span{
  width:183px;
  height:40px;
  border: 2px solid #666666;
  border-radius: 25px;
  display:flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: bold;
  color: #666666;
}
/* 弹窗 */
.modal {
  display: none;
  /* 默认隐藏 */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1.4s;
  animation-name: fadeIn;
  animation-duration: 1.4s
}

/* 弹窗内容 */
.modal-content{
  position: fixed;
  bottom: 0;
  margin: 16px;
  width: calc(100% - 32px);  
}
.modal-content.cur{
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {
  padding: 2px 16px;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
.ani-opacity-show1 {
  animation: opacityShow1 1.5s forwards;
  -webkit-animation: opacityShow1 1.5s forwards;
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
  opacity: 0;
}
.ani-opacity-show2 {
  animation: opacityShow2 1.5s forwards;
  -webkit-animation: opacityShow2 1.5s forwards;
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
  opacity: 0;
}
.ani-opacity-show3 {
  animation: opacityShow3 1s 1 forwards;
  -webkit-animation: opacityShow3 1s 1 forwards;
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
  opacity: 0;
}
.ani-scale {
  animation: scale 1s linear infinite;
  -webkit-animation: scale 1s linear infinite;
}
@keyframes scale{
  0% { 
    transform: scale(1.1, 1.1); 
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  75% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.1, 1.1);
  }
}
@-webkit-keyframes opacityShow1 {
  0% {
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
@keyframes opacityShow1 {
  0% {
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
@-webkit-keyframes opacityShow2 {
  0% {
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}
@keyframes opacityShow2 {
  0% {
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}
@-webkit-keyframes opacityShow3 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes opacityShow3 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }

  to {
    bottom: 0;
    opacity: 1
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }

  to {
    bottom: 0;
    opacity: 1
  }
}
@media screen and (min-width: 750px) {
  body {
    width:20rem;
    margin:0 auto;
  }
  #myModal{
    width:20rem;
    margin-left:calc((100% - 20rem)/2);
  }
  .modal-content{
    width:19.15rem;
  }
}