.index-wrap {
  width: 100%;
  position: relative;
  div {
    width: 100%;
    img {
      width: 100%;
      display: block;
    }
  }

  .wrap-join {
    height: 72.5px;
    background: url(../img/img4.png) no-repeat center center;
    background-size: 100% 100%;
    margin-bottom: -.5px;
    .wrap-count {
      width: 325px;
      height: 72.5px;
      display: flex;
      margin: 0 auto;

      h1 {
        margin-top: 9px;
        font-size: 23px;
        font-weight: 700;
        color: rgba(255, 255, 255, 1);
        line-height: 32.5px;
        text-align: center;
      }

      h5 {
        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.59);
        line-height: 20px;
        text-align: center;
      }
    }
  }

  .btn-app-share {
    img {
      width: 312px;
      height: 51.5px;
      margin: 0 auto;
    }
  }

  .btn-appoint {
    height: 94.5px;
    background: url(../img/img5.png) no-repeat center center;
    background-size: 100% 100%;
    margin-bottom: -.5px;
    img {
      padding-top: 15px;
    }

    .appoint-time {
      margin-top: 5px;
      text-align: center;
      font-size: 12px;
      color: rgba(237, 90, 44, 1);
      line-height: 16.5px;
    }
  }

  .btn-share {
    height: 166px;
    background: url(../img/img11.png) no-repeat center center;
    background-size: 100% 100%;
    margin-bottom: -.5px;
    img {
      padding-top: 81px;
    }
  }

  .rule-show {
    background: rgba(254, 124, 86, 1);

    .bird {
      width: 22.5px;
      height: 28.5px;
      margin: 0 auto;
      padding: 24px 0;
    }

    .rule-bg {
      width: 345px;
      margin: 0 auto;
      box-sizing: border-box;
      background: rgba(236, 107, 69, 1);
      border-radius: 12px;
      padding: 15px;

      section {
        h1 {
          font-size: 16px;
          font-weight: 700;
          color: rgba(255, 234, 136, 1);
          line-height: 18px;
          margin-bottom: 12px;
        }

        p {
          font-size: 14px;
          font-weight: 500;
          color: rgba(255, 246, 202, 1);
          line-height: 19px;
          margin-bottom: 9px;

          span {
            font-weight: 700;
          }
        }
      }

      .margin-top-20 {
        margin-top: 20px;
      }

      .line {
        margin-top: 20px;
        width: 309.5px;
        height: .5px;
        background: #FFF6CA;
      }

      .btn-rule {
        width: 110px;
        // height: 15px;
        font-size: 15px;
        color: rgba(255, 255, 255, 1);
        line-height: 15px;
        margin: 0 auto;
        padding: 16.5px 0 1.5px 0;

        img {
          width: 7px;
          height: 12px;
          display: inline;
          vertical-align: middle;
          padding-left: 5px;
        }
      }
    }
  }

  .fix-btn {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
    background: #fff;

    div {
      width: 345px;
      height: 40px;
      background: linear-gradient(270deg, rgba(255, 88, 36, 1) 0%, rgba(254, 163, 86, 1) 100%);
      border-radius: 20px;
      margin: 5px auto 0 auto;
      font-size: 15px;
      color: rgba(255, 255, 255, 1);
      line-height: 40px;
      text-align: center;
    }
  }

  .abs-btn {
    width: 69px;
    height: 25px;
    position: absolute;
    right: 0;
    top: 260px;

    img {
      width: 69px;
      height: 25px;
    }
  }
}

.padbtm50 {
  padding-bottom: 50px;
}

// 微信分享助力活动
.wx-share-wrap {
  width: 100%;
  height: 100vh;
  button,input{
    appearance: none;
    border: none;
    outline: none;
  }
  section {
    width: 100%;
    padding-bottom: 27.5px;
    background: url(../img/bgtop.png) no-repeat;
    background-size: 100% 100%;
    margin-bottom: -.5px;
    .invite-info{
      img{
        width: 50px;
        height: 50px;
        display: block;
        padding-top: 20px;
        margin: 0 auto;
      }
      .title1{
        margin-top: 12px;
        margin-bottom: 8px;
        text-align: center;
        font-size:20px;
        font-weight:700;
        color:rgba(255,255,255,1);
        line-height:20px;
        text-shadow:0px 2px 10px rgba(222,77,16,1);
      }
      .title2{
        margin-bottom: 23px;
        text-align: center;
        font-size:13px;
        color:rgba(255,255,255,1);
        line-height:13px;
        text-shadow:0px 2px 10px rgba(231,93,48,1);
      }
    }
    .page-info{
      width:345px;
      height:162px;
      padding: 20px 25px;
      box-sizing: border-box;
      margin: 0 auto 16px auto;
      background:rgba(255,255,255,1);
      border-radius:6px;
      .title1{
        margin-bottom: 8px;
        text-align: center;
        font-size:16px;
        font-weight:700;
        color:rgba(55,56,57,1);
        line-height:16px;
      }
      .title2{
        margin-bottom: 16px;
        text-align: center;
        font-size:12px;
        color:rgba(248,94,71,1);
        line-height:12px;
      }
      .imgs-wrap{
        display: flex;
        justify-content: space-between;
        div{
          border-radius: 6px;
          img{
            width: 50px;
            height: 50px;
            display: block;
            margin: 0 auto;
          }
          .img-txt{
            margin-top: 8px;
            font-size:12px;
            color:rgba(103,104,105,1);
            line-height:12px;
          }
        }
      }
    }
    .form-info{
      width:345px;
      // height:162px;
      padding: 15px;
      box-sizing: border-box;
      margin: 0 auto 16px auto;
      background:rgba(255,255,255,1);
      border-radius:6px;
      .field-wrap{
        display: flex;
        justify-content: flex-start;
        width: 315px;
        height: 45px;
        line-height: 45px;
        padding: 0 20px;
        box-sizing: border-box;
        background:rgba(248,249,250,1);
        border-radius:22.5px;
        margin-bottom: 10px;
        position: relative;
        .cap-box{
          width: 90px;
          height: 35px;
          top: 5px;
          right: 5px;
          position: absolute;
          img{
            width: 100%;
            height: 100%;
            display: block;
            border-radius:22.5px;
          }
        }
        button{
          width:60px;
          height:40px;
          top: 2.5px;
          right: 20px;
          position: absolute;
          font-size:14px;
          color:rgba(151,152,153,1);
          line-height:40px;
          background: none;
        }
        label{
          margin-top: 2.5px;
          font-size:14px;
          font-weight:700;
          display: block;
          width: 112px;
          height: 40px;
          line-height: 40px;
          color:rgba(55,56,57,1);
        }
        input{
          margin-top: 2.5px;
          font-size:14px;
          width: 130px;
          height: 40px;
          line-height:40px;
          background: none; 
        }
        ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
          color:rgba(199,200,201,1);
          height: 40px;
          line-height:40px;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
          color:rgba(199,200,201,1);
          height: 40px;
          line-height:40px;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
          color:rgba(199,200,201,1);
          height: 40px;
          line-height:40px;
        }
        :-ms-input-placeholder { /* Internet Explorer 10-11 */
          color:rgba(199,200,201,1);
          height: 40px;
          line-height:40px;
        }
      }
      .btn-post{
        width: 315px;
        height: 45px;
        margin-top: 10px;
        background:linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
        border-radius:22.5px;
        font-size:15px;
        font-weight:700;
        color:rgba(255,255,255,1);
        line-height:15px;
      }
    }
  }
}
.wx-share-result{
  width: 100%;
  section{
    width: 100%;
    padding-top: 40px;
    .res-wrap{
      img{
        width: 70px;
        height: 60px;
        display: block;
        margin: 0 auto;
      }
      h1{
        font-size:20px;
        font-weight:700;
        color:rgba(55,56,57,1);
        line-height:20px;
        margin: 20px 0;
        text-align: center;
      }
      h3{
        font-size:13px;
        line-height:13px;
        text-align: center;
        margin-bottom: 30px;
        color:rgba(151,152,153,1);
      }
    }
    .btn-app{
      width: 335px;
      height: 40px;
      line-height:40px;
      border-radius:22.5px;
      font-size:16px;
      font-weight:700;
      text-align: center;
      margin: 0 auto;
    }
    .down-app{
      background:linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
      color:rgba(255,255,255,1);
    }
    .has-app{
      margin-top: 12px;
      margin-bottom: 40px;
      border:1px solid rgba(151,152,153,1);
      color:rgba(103,104,105,1);
    }
    .line{
      width: 100%;
      height: 5px;
      background:rgba(248,249,250,1);
    }
    .more-course{
      padding: 30px 15px;
      header{
        font-size:18px;
        font-weight:700;
        color:rgba(51,51,51,1);
        line-height:18px;
      }
      .course-list{
        width: 345px;
        .course-item{
          width: 345px;
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          div{
            h1{
              font-size:16px;
              font-weight:700;
              color:rgba(55,56,57,1);
              line-height:16px;
            }
            h3{
              font-size:13px;
              color:rgba(151,152,153,1);
              line-height:13px;
            }
          }
          .course-txt{
            width: 240px;
            border-bottom: .5px solid rgba(240,241,242,1);
            h3{
              margin-top: 12px;
            }
          }
          .course-img{
            width: 90px;
            height: 60px;
            img{
              width: 90px;
              height: 60px;
              display: block;
            }
          }
        }
      }
    }
  }
}
