.in-activity-wrap{
  position: relative;
  width: 375px; height: auto; overflow: hidden;
  background: #F5663F;

  .ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  ul,li{ list-style: none; };
  img{ border:0; display: block; }
  .top-process-bar{
    width: 100%; height: 42px;
    overflow: hidden; 
    li{
      width: 25%; height: 42px; 
      float: left; overflow: hidden;
      background: #E35D5B;
      box-sizing: border-box;
      border-right: 1px solid #B50300;
      &:nth-child(4){ border-right: 0; }
      color:rgba(255,181,179,1); 
      border-bottom: 2px solid #D80D0A;
      background: linear-gradient(to bottom, #E53935, #E35D5B);
      &.over{
        color:rgba(224,100,97,1); border-bottom: 2px solid #7D1716;
        background: linear-gradient(to bottom, #B32B29, #9C2A29);
      }
      &.active{
        color:rgba(173,14,59,1); border-bottom: 2px solid #CA6507;
        background: linear-gradient(to bottom, #FFE578, #FFC643);
        border-right: 0;
      }
      p{ 
        
        text-align: center; 
        &.title{
          font-size: 12px; font-weight: 700; line-height: 12px;
          margin-top: 6px;
        }
        &.date{
          font-size: 12px; line-height: 12px;
          margin-top: 4px; 
        }
      }
    }
  }
  .big-bg-wrap{
    width: 100%; height: auto; overflow: hidden;
    background: url('../img/stageTwo/bg-01.png') no-repeat left top;
    background-size: 100% 100%;
   
    .award-wrap{
      width: 100%; height: 180px; overflow: hidden; 
      .stage-rule{
        width: 100%; height: 52px; overflow: hidden;
        .stage-text{
          float: left;
          width: 170px; height: 19px; margin: 11px 0 0 23px; 
        }
        .rule-btn{
          float: right;
          width: 69px; height: 25px; margin-top: 8px;
        }
      }
      .reward-pic{
        margin: 0 auto;
        width: 330px; height: 96px;
      }
    }
    .user-info-wrap{
      position: relative;
      width: 355px; height: 480px; 
      margin: 2px auto 0;
      background: url('../img/stageTwo/user-info-bg.png') no-repeat left top;
      background-size: 100% 100%;
      .gold-coin{
        position: absolute; right: -20px; top: -32px;
        width: 63px; height: 65px; border:0; display: block;
      }
      .basic-info{
        width: 355px; height: 80px; overflow: hidden;
        padding: 16px 15px 0; box-sizing: border-box;
        .head-icon{
          float: left;
          width: 50px; height: 50px; overflow: hidden; 
          border-radius: 50px;
          border: 1px solid red;
          img{
            width: 50px; height: 50px; 
          }
          
        }
        .name-info{
          float: left;
          width: 190px; height: 50px; overflow: hidden;
          margin-left: 14px;
          color:#373839;
          .name{
            width: 100%;
            font-size: 18px; line-height: 18px; margin-top: 5px; font-weight: 700;
            .ellipsis;
          }
          .company{
            width: 100%;
            font-size: 14px; line-height: 18px; margin-top: 5px; 
            .ellipsis;
          }
        }
        .detail{
          position: relative;
          float: left; box-sizing: border-box; font-weight: 700;
          width: 68px; height: 25px; overflow: hidden; border-radius: 25px; border: 1px solid #FD5A2F;
          font-size: 12px; color: #FD5A2F; line-height: 23px; text-indent: 5px;
          margin-top: 18px;
          img{ 
            position: absolute; right: 5px; top: 50%; margin-top:-5px;
            width: 6px; height: 11px; 
          }
        }
      }

      .billboard-wrap{
        width: 325px; height: 137px; overflow: hidden;
        padding: 0 15px;
        li{
          width: 160px; height: 137px; overflow: hidden; float: left;
          background: #FFE2D9; border-radius: 8px;
          box-sizing: border-box;
          padding: 15px 4px 0 15px; 
          &.organ{
            margin-left: 5px;
          }
          .title{
            width: 142px; height: 14px; font-size: 14px; line-height: 14px; color: #373839;
          }
          .score{
            width: 142px; height: 26px; font-size: 26px; line-height: 26px; color: #FD5A2F; margin-top: 6px;
          }
          .rank{
            position: relative;
            width: 142px; height: 13px; font-size: 13px; line-height: 13px; color: #996B3D; margin-top: 10px;
            font-weight: 700;
            text-indent: 14px;
            img{
              position: absolute; left: 0; top: 50%; margin-top: -5px; 
              width: 10px; height: 11px; 
            }
          }
          .billboard-btn{
            position: relative;
            width: 99px; height: 25px; border: 1px solid #FD5A2F; border-radius: 25px;
            margin-top: 15px;
            font-size: 12px; font-weight: 700; line-height: 25px; color: #FD5A2F; text-indent: 10px;
            img{ 
              position: absolute; right: 8px; top: 50%; margin-top:-5px;
              width: 6px; height: 11px; 
            }
          }
        }
      }

      .score-tips{
        width: 325px; height: 25px; overflow: hidden; margin: 0 auto;
        background:#FFF1D0; color: #FD5A2F; text-indent: 10px; font-size: 12px; line-height: 25px;
        border-radius: 25px; margin-top: 5px;
      }
      .bean-wrap{
        width: 325px; height: 27px; overflow: hidden;
        margin: 30px auto 0; padding-bottom: 16px;
        border-bottom: 1px solid #FFDBD0;
        .personal-total-get{
          float: left; margin: 5px 0 0 6px;
          font-size: 16px; color: #373839; font-weight: 700; line-height: 16px;
          span{ color: #FD5A2F; }
        }
        .bean-center{
          position: relative;
          float: right;
          width: 81px; height: 25px; 
          border: 1px solid #FD5A2F; border-radius: 25px;
          line-height: 25px; text-indent: 8px; font-size: 12px; line-height: 25px; color: #FD5A2F; font-weight: 700;
          img{ 
            position: absolute; right: 5px; top: 50%; margin-top:-6px;
            width: 6px; height: 11px; 
          }
        }
      }
      .bean-tips{
        width: 325px; height: 46px; margin: 0 auto;
        color: #996B3D;  font-size: 15px; line-height: 40px; text-indent: 6px; font-weight: 700;
      }
      .bean-stage{
        position: relative;
        width: 355px; height: 75px;
        img{
          width: 355px; height: 75px; overflow: hidden;
        }
        .score-list{
          position: absolute; left:0; bottom: -7px;
          width: 345px; height: 12px; overflow: hidden; 
          padding-left: 10px;
          li{
            float: left; 
            width: 60px; height:12px; font-size: 12px; color: #373839; line-height: 12px;
            text-align: center;
            margin-right: 32px;
            &:nth-child(4){
              margin: 0;
            }
          }
        }
      }
    }

    // 未登录
    .not-login-wrap{
      position: relative;
      width: 325px; height: 50px; margin: 0 auto;
      padding: 20px 15px;
      border-radius: 13px;
      background: #FFF;
      .gold-coin{
        position: absolute; right: -20px; top: -32px;
        width: 63px; height: 65px; border:0; display: block;
      }
      .head-icon{
        width: 50px; height: 50px; display: block; border: 0;
        float: left;
      }
      .content-info{
        float: left;
        width: 177px; height: 50px; overflow: hidden;
        margin-left: 15px;
        
        .not-login-text{
          width: 202px; height: 28px; 
          color: #373839; font-size: 18px; line-height: 28px; font-weight: 700;
        }
        .tips{
          width: 202px; height: 18px; 
          color: #676869; font-size: 14px; line-height: 18px;
        }
      }
      .go-login{
        position: relative;
        float: left;
        width: 56px; height: 25px; margin: 14px 0 0 24px;
        border: 1px solid #FD5A2F;
        border-radius: 25px; font-size: 12px; line-height: 25px; text-indent: 8px;
        color: #FD5A2F; font-weight: 700;
        &.login-but-nojoin{
          width: 70px; height: 25px; 
          margin: 14px 0 0 10px;
        }
        img{ 
          position: absolute; right: 5px; top: 50%; margin-top:-5px;
          width: 6px; height: 11px; 
        }
      }
    }

  }
  
  // 邀请医生好友学课程
  .invite-doctor-wrap{
    position: relative;
    width: 355px; height: 242px; 
    margin: 50px auto 0; 
    background: #FFF; border-radius: 13px;
    .top-head-icon{
      position: absolute; left:50%; top:-32px; margin-left: -158px; z-index:200;
      width: 316px; height: 48px; border:0; display: block;
    }
    .invite-tips{
      width: 100%; height: 55px; line-height: 55px;
      font-size: 12px; color: #FD6037; text-align: center;
    }
    .invite-list-wrap{
      width: 315px; height: 90px; 
      padding: 0 20px; 
      .invite-list{
        width: 350px; height: 90px; 
        li{
          position: relative;
          width: 45px; height: 90px; margin-right: 23px; float: left;
          .add-btn{
            position: relative;
            width: 45px; height: 45px; border-radius: 45px; background: #FFD9CD;
            img{
              position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px;
              width: 20px; height: 20px; 
              &.right-icon-big{
                width: 10px; height: 18px;
                margin-left: -5px; margin-top: -9px;
              }
            }
          }
          .doctor-icon{
            width: 45px; height: 45px; border-radius: 45px; border: 0; display: block;
          }
          .text{ 
            position: absolute; left: 50%; top: 58px;
            width: 60px; margin-left: -30px;
            height: 12px; font-size: 12px; color: #676869; text-align: center; line-height: 12px;
            .ellipsis;
            &.see-more{
              color: #FD5D33;
            }
          }
        }
      }
    }
    .invite-btn{
      position: relative;
      width: 331px; height: 69px; overflow: hidden; margin: 0 auto;
      img{
        width: 331px; height: 69px;
      }
      .text{
        position: absolute; left: 0; top: 0;
        width: 331px; height: 50px;
        color: #B42F00; font-size: 22px; line-height: 45px; 
        text-align: center; font-weight: 700; letter-spacing: 1px;
      }
    }
    .login-tips{
      width: 355px; height: 17px; overflow: hidden;
      font-size: 12px; line-height: 17px; text-align: center;
      color: #FF8929; 
    }
  }

  // 每日任务
  .daily-task{
    width: 325px; height: 278px; margin: 30px auto 0;
    background: #FFF; border-radius: 13px;
    padding: 0 15px;
    .top-center-bar{
      width: 325px; height: 58px; overflow: hidden;
      background: url('../img/stageTwo/daily-task-bar.png') no-repeat center center;
      background-size: 128px 12px;
      font-size: 18px; color: #F05D30; font-weight: 700; text-align: center; line-height: 58px;
    }
    .task-list{
      width: 325px; height: 200px; overflow: hidden;
      li{
        width: 325px; height: 50px; overflow: hidden; margin-bottom: 20px;
        .left-icon{
          width: 50px; height: 50px; display: block; border: 0; float: left;
        }
        .center-wrap{
          width: 184px; height: 50px; display: block; float: left;
          padding: 0 15px;
          .title{
            width: 184px; height: 30px;
            font-size: 16px; color: #373839; font-weight: 700; line-height: 30px;
          }
          .detail-text{
            width: 184px; height: 12px; line-height: 12px;
            font-size: 12px; color: #676869;
          }
        }
        .right-btn{
          margin-top: 11px;
          width: 60px; height: 30px; border-radius: 30px;
          overflow: hidden; float: left; 
          font-weight: 700; color: #FFF;
          font-size: 13px; line-height: 31px; text-align: center;
          background: linear-gradient(to right, #FEA356, #FF5824);
          &.done{
            color: #EE5C2E; background: #FFD9CD;
          }
        }
        
      }
    }
  }

  // 底部logo
  .bottom-logo{
    width: 100%; height: 92px;
    background: url('../img/stageTwo/bottom-logo.png') no-repeat center center;
    background-size: 36px 45px;
  }

  // 弹窗
  .toast-wrap{
    position: fixed; left: 0; top: 0; z-index: 500;
    width: 100%; height: 100%; overflow: hidden;
    .full-screen-mask{
      width: 100%; height: 100%; 
      background: #000000;  opacity: 0.5;
    }
    .content-wrap{
      position: absolute; left: 50%; top: 50%; z-index: 1000;
      margin-left: -140px; margin-top: -150px;
      width: 280px; height: 300px; 
      // 活动结束 弹窗
      &.activity-end{
        width: 300px; height: 144px; overflow: hidden;
        margin-left: -150px; margin-top: -87px;
        background: #FFF; border-radius: 3px;
        padding-top: 30px;
        .content-text{
          width: 240px; height: 63px; padding: 0 30px;
          color: #676869; 
          font-size: 14px; line-height: 21px;
        }
        .btn-list{
          width: 300px; height: 50px; overflow: hidden; margin-top: 30px;
          li{
            width: 50%; height: 50px; overflow: hidden; float: left;
            color: #979899; font-size: 17px; line-height: 50px; text-align: center;
            &.high-light{
              color: #449284;
            }
          }
        }
      }
      .back-image{
        position: absolute; left: 0; top: 0; z-index: -1;
        width: 280px; height: 300px; 
      }
      .title{
        width: 280px; height: 21px; 
        font-size: 21px; line-height: 21px; font-weight: 700; color: #333333;
        margin-top: 167px;
        text-align: center;
      }
      .message{
        width: 280px; height: 14px; 
        font-size: 14px; line-height: 14px; text-align: center;
        color: #676869; margin-top: 15px;
      }
      .bottom-btn{
        width: 209px; height: 44px; 
        font-size: 17px; line-height: 44px; text-align: center; color: #FFF; 
        margin: 0 auto; border-radius: 44px; margin-top: 20px;
        background: linear-gradient(to right, #FEA356, #FF5824);

      }
      .close-btn{
        position: absolute; left: 50%;  bottom: -50px; margin-left: -15px;
        width: 30px; height: 30px; 
        background: url('../img/stageTwo/close-toast-icon.png') no-repeat center center;
        background-size: 30px; height: 30px; 
      }
    }
  }

}