ul,li,p,dl,dt,dd,body{margin:0; padding:0; list-style: none; box-sizing: border-box;}
html{font-size: 16px;}
img {
 max-width:100%;
 border:0;
 border:0;

}
*{
  text-decoration: none;
}
body{
  /* background: #2f17dc; */
   box-sizing: border-box;background: #ffede1;}
.invite_wrap .top {font-size: 0; 
     
    z-index: 2;}
.invite_wrap .top .banner{height: auto; width: auto\9; width:100%;}
.course-wrap{padding: 1.063rem 1.25rem;
  background-color: #f2fafe;
  border-radius: 8px;
}
.course-wrap1{margin-top: 1.25rem;}
.course_detail{margin: 0 auto; font-size: .75rem;box-sizing: border-box; overflow: hidden;}
.course_detail_l{box-sizing: border-box; }
.course_detail_l img{width: 100%;}
.course_detail_r{ padding-left: 0.9375rem; box-sizing: border-box; overflow: hidden;}
.course_detail_r .course-title{font-size: 0.9375rem;font-weight: bold; color: #222222;  padding-top:.45rem; padding-bottom: .45rem; line-height: 1.45;}
.course_detail_r .title1 {color: #ff552d; font-weight: bold;padding-bottom: .45rem; font-size: 1.0rem;}
.course_detail_r .title1 span{font-size: 0.75rem; font-weight: bold;color: #ff552d; font-weight: normal;}
.course_detail_r .title2{font-size: 0.75rem; color: #999; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.help_friends .txt{font-size:0.8125rem; color: #666; padding-left: 1.35rem; padding-top: 0.3125rem;}
.help_friends .poor{color: #ff627b;}
.process{margin:0 auto; width: 76%; margin-top:0.9375rem; }
.process1{position: relative;width:100%;}
.process2{height:2px; background: #ac35e1;position: absolute; left: 0; top:0; font-size: 0;}
.dot{display: flex;}
.rule{position: absolute; right: 0; top: .5rem;}
.rule a{display: block;}
.rule img{width: 3.85rem; height: 1.3rem;}
.dot{display: flex; position: relative; top: -22px;}
.dot .text{flex:1;font-size: 0.75rem;color: #666; padding-top: .75rem; position: relative; text-align: center; width: 20%; text-align: center; line-height: 20px;}
.dot .text .hascolor{color: #ff536f;}
.dot-img {position: absolute; left: -7px; top: -7px;}
/* .dot-img img{width: 1.0625rem; height: 17px;} */
.dot .dot-text{padding-top: 5px; margin-top: 17px;}
/* .dot .text1{flex:1 1 .45rem; text-align: left;}
.dot .text2{flex:1 1 .45rem; text-align: right;} */
.small{width: .15rem;  height: .5rem; position: absolute; left: 1rem; top: .15rem;}
/* .dot .text1 .small{left: 2px;}
.dot .text2 .small{left: 2rem;} */
.small img{width: .15rem;  height: .5rem;}
.invite{ margin: 0 auto;padding-bottom: 1rem;width: 19.688rem;border-bottom: 1px dashed#d3d3d3;}

.time{font-size: .7rem; text-align: center; color: #242424; padding-top:.45rem; padding-bottom: .45rem; }
.time span{color: #3436ba; }
.appinvite-wrap{padding: 0 0.9375rem; margin-bottom: 1.25rem;}
.friends_wrap{background: #FFF; border-radius: 0.5rem; padding-bottom: 1.375rem; padding-top: 0.625rem;}
.friends_wrap .head{color: #525252; font-size: .65rem; text-align: center; height: 1.5rem; position: relative;}
.friends_wrap .head .line{width: 2rem; height: 1px; position: absolute; font-size: 1px; background: #686868; top:0.375rem;}
.friends_wrap .head .line1{left: 4.25rem;}
.friends_wrap .head .line2{right: 4.25rem;}
.list{ margin: 0 auto; padding: 0 1.75rem;}
.list_wrap li{height: 2.8125rem; border-bottom: 1px dashed #e4e4e4; display: flex; line-height: 2.8125rem;}
.avater{flex:0 1 1.55rem; margin-top: 0.3125rem;}
.avater img{height: 1.525rem; width:1.475rem; border-radius: 50%;}
.name{font-size:0.8125rem; color: #525252; flex:1 1 4rem; padding-left: .45rem; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.name1{font-size: 0.8125rem; color: #666; flex:1 1 1rem;  text-align: right;}
.have_btn{display: flex;position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 500;
max-width: 640px;}
/* .have_btn .have_btn1{flex:1 1 9.425rem; height: 2.8125rem;  line-height:2.8125rem; color: #FFF; font-size: 0.875rem; text-align: center; background:-webkit-linear-gradient(left,#ff562d,#ff2139);background:-o-linear-gradient(right,#ff562d,#ff2139);background:-moz-linear-gradient(right,#ff562d,#ff2139);	background:linear-gradient(to right,#ff562d,#ff2139);} */
/* .have_btn .have_btn2{background:-webkit-linear-gradient(left,#ff562d,#ff2139);background:-o-linear-gradient(right,#ff562d,#ff2139);background:-moz-linear-gradient(right,#ff562d,#ff2139);	background:linear-gradient(to right,#ff562d,#ff2139);color: #cba9fc;} */
.have_btn .have_btn1{flex:1 1 9.425rem; height: 2.8125rem;  line-height:2.8125rem; color: #FFF; font-size: 0.875rem; text-align: center;
    /* background:-webkit-linear-gradient(left,#ff562d,#ff2139);
    background:-o-linear-gradient(right,#ff562d,#ff2139);
    background:-moz-linear-gradient(right,#ff562d,#ff2139);	
    background:linear-gradient(to right,#ff562d,#ff2139); */
 
    background-image: linear-gradient(90deg, 
         #ff592c 0%, 
         #ff1f39 100%), 
     linear-gradient(
         #f77445, 
         #f77445);
     background-blend-mode: normal, 
         normal;
   }
 .have_btn .have_btn2{
 
   background-image: linear-gradient(90deg, 
         #f9945e 0%, 
         #f77244 100%), 
     linear-gradient(
         #f77445, 
         #f77445);
     background-blend-mode: normal, 
         normal;
   /* background:-webkit-linear-gradient(left,#ff562d,#ff2139);
   background:-o-linear-gradient(right,#ff562d,#ff2139);
   background:-moz-linear-gradient(right,#ff562d,#ff2139);	
   background:linear-gradient(to right,#ff562d,#ff2139); */
   color: #cba9fc;}
.have_btn .have_btn1 a{text-decoration: none; color: #FFF;}
.invite-rule{padding: 0 1rem; font-size: .7rem; margin-bottom: 1rem; color: #525252; line-height: 26px;}
.invite-rule .invite-intro{border-left: 2px solid #ff7e33; padding-left: .4rem; font-size: .75rem; color: #747474;}
.appinvite-time{
  width: 15.1rem;
  height: 7.4rem;
  background-color: #ffffff;
 background: rgba(255,255,255,0.1);
  position: absolute; right: 0.75rem; top: 10.938rem;
  z-index: 1000;
  
}
.appinvite-time p.appinvite-img{color: #ffff00; font-size: 20px; padding-left: 1.25rem; padding-top: 0.9375rem; padding-right: 1.25rem;}
.appinvite-detail{display: flex; padding-left: 1.0rem; padding-right: 0.625rem;}

.appinvite-detail-l p{font-family: SourceHanSansCN-Bold, AdobeInvisFont, AdobeHeitiStd-Regular;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: #57ff9e; padding-top: 0.625rem;}
.appinvite-detail-r{padding-left: 0.625rem;}
.appinvite-detail-r p.one{font-family: SourceHanSansCN-Bold, AdobeInvisFont, AdobeHeitiStd-Regular;
  font-size: 0.875rem; color: #FFF; line-height: 1.375rem; padding-top: 0.3125rem;}
  .appinvite-detail-r p.two{font-family: SourceHanSansCN-Bold, AdobeInvisFont, AdobeHeitiStd-Regular;
  font-size: 1.0rem;color: #ffff00; font-weight: 700;}
.brick-mask{  
    z-index: 4; 
 }
.brick-content{ 
  border-radius: 0.5rem;
  box-shadow: 0rem 0.2rem 1.7rem 0.1rem rgba(0, 0, 0, 0.19);background:#FFF; 
  -webkit-box-shadow:0rem 0.2rem 1.7rem 0.1rem rgba(0, 0, 0, 0.19);
  margin: 0 .9375rem; padding-top: 0.625rem; padding-bottom: 1.375rem;}
.title{text-align: center; font-size: 1.125rem; color: #f85959; padding: .9375rem;}
.title img{width: 75%;}
.js-load-more{font-size:0.875rem; text-align: center; color:#525252; line-height: 1.875rem; margin-top: 10px;}
.appinvite-wrap1 .title img{width: 65%;}
.rule-text{padding: 0 1.25rem; color: #666; font-size: 0.875rem; line-height: 1.625rem;}
.num-txt{width: 20px; height: 20px; background: #a256d7; border-radius: 10px; display: inline-block; text-align: center; line-height: 20px; color: #FFF; margin-right: 5px;}
.rule-text p{padding-bottom: 0.9375rem;}

.helpwrap{display: flex; padding: 0 1rem;}
/* .invitebtn{ height: 2.8125rem;  background:-webkit-linear-gradient(left,#ff562d,#ff2139);background:-o-linear-gradient(right,#ff562d,#ff2139);background:-moz-linear-gradient(right,#ff562d,#ff2139);	background:linear-gradient(to right,#ff562d,#ff2139);border-radius: 50px;  margin: 0 auto; font-size: 1rem; text-align: center; color: #FFF; line-height: 2.8125rem; flex:1;} */
.wantactiviy{background:-webkit-linear-gradient(left,#f9945d,#f77344);background:-o-linear-gradient(right,#f9945d,#f77344);background:-moz-linear-gradient(right,#f9945d,#f77344);background:linear-gradient(to right,#f9945d,#f77344);margin-left: .7rem;}
.wantactiviy a{display: inline-block; color: #FFF; text-decoration: none;}
.invitebtn{
  width: 7rem;
    height: 2rem;
    font-size: 1rem;
    line-height: 2rem;
    color: #fff;
    text-align: center;
    float: left;
}
.inviteyin .invitebtn1{   
    margin: 0 2rem;
	background-image: linear-gradient(90deg, 
		#ff592c 0%, 
		#ff1f39 100%), 
	linear-gradient(
		#49e587, 
		#49e587);
	background-blend-mode: normal, 
		normal;
    border-radius: 1rem;} 
.inviteyin .invitebtn2{
	background-image: linear-gradient(90deg, 
		#f9945e 0%, 
		#f77244 100%), 
	linear-gradient(
		#49e587, 
		#49e587);
	background-blend-mode: normal, 
		normal;
	border-radius: 1rem;
}
.tips-public{display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 98;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);}
.tips-public .shoppinggo{display: none;
  position: fixed;
  left: 50%;
  top: 40%;
  width: 260px;
  z-index: 9999;
  margin-left: -130px;
  background: white;
  border: 1px solid #d8d8d8; 
  border-radius: 6px;}
.tips-public .shoppinggo .del-header1{display: block;
  width: 100%;
  height: 39px;
  font-size: 18px;
  line-height: 39px;
  color: #222;
  font-family: "微软雅黑";
  text-align: center;
  padding-top: 10px;}

.tips-public .shoppinggo .qxIntro1{
  text-align: center;
  font-size: 14px;
  color: #727272;
  line-height: 30px;
  font-family: "微软雅黑";
  margin-bottom: 20px;
}
.tips-public .shoppinggo .qxBtn1{
  height: 50px;
  width: 100%;
  border-top: 1px solid #ebebeb;
}
.tips-public .shoppinggo .qxBtn1 a{
  width: 129px;
  height: 40px;
  float: left;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
  cursor: pointer;
  margin: 6px 0;
  font-family: "微软雅黑";
}
.tips-public .shoppinggo .qxBtn1 .ok1{
  border-right: 1px solid #e2e2e2;
  color: #ff7385;
}
.tips-public .shoppinggo .qxBtn1 .ok1:hover{
  color: #ff475f;
}
.tips-public .shoppinggo .qxBtn1 .qx1{
  color: #999;
}
.tips-public .shoppinggo .qxBtn1 .qx1:hover{
  color: #ff7385;
}
.close_dl{width: 12px; position: absolute; right: 10px; top: 10px; font-size: 0;}
.helpbg{width: 100%; height: 100%; background: url(../images/helpbg3_all.png) no-repeat; 
  /* background-size: cover; */
  background-size: 100% 100%;
   position: fixed;top: 0; z-index: 100; display: none;}
.other-wrapper{display: flex;}
.other-wrapper > a{flex:1; font-size: 0.75rem; color: #7d7d7d; height: 1.875rem; line-height: 1.875rem; margin-top: 0.625rem; text-align: right;}
.other-wrapper > a:hover{color: #20bc22;}
.course_tit{
  margin-top: 1rem;
}
.course_tit .h3{
  font-family: OPPOSans-B;
	font-size: .938rem;
	font-weight: normal;
	font-style: italic;
	font-stretch: normal;
	line-height: 1.5625rem;
	letter-spacing: 0px;
  color: #7a36b9;
  text-align: center;
  font-weight: bold;
}
.course_tit ul {
  margin-top: 1rem;
}
.course_tit ul li{
  margin: 0 1.25rem;
  padding: .625rem;
  line-height: 1.03125rem;
  box-sizing: border-box;
  background-color: #fff9ec;
  border-radius: 8px;
  font-size: .6875rem;
  margin-bottom: 5px;
  display: flex;
}
.course_tit ul li span{
  position: relative;
  display: inline-block;
}
.course_tit ul li b{
  position: absolute;
  top: .5rem;
  left: .3rem;
  display: inline-block;
  width: .4375rem;
  height: .4375rem;
  border-radius: 50%;
  background: #fec844;
  opacity: .5;
}
.course_tit ul li p{
  flex: 1;
}
.wrapper1 .invite{
  width: 100%;
  border: none;
  overflow: hidden;
  padding-top: 1rem;
  box-sizing: border-box;
}
.wrapper1 .invitebtn{
  width: 88%;
  margin: 0 auto;
  float: none;
}

.lines{
  height: 2px;background: #ac35e1;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.wrapper2{
  padding-bottom: 3rem;
  margin: 0 auto;
}
.wrapper3 .invite{
  width: 100%;
  border: none;
  overflow: hidden;
  padding-top: 1rem;
}
.wrapper3 .invitebtn{
  width: 88%;
  margin: 0 auto;
  float: none;
}

.purplecricle{
  width: 1.09375rem;height: 1.09375rem;border-radius: 50%;position: absolute;top: -7px;z-index: 1;
}



.code_marking{
  width: 100%;
  height: 100%;
  background:rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left:0;
  z-index: 999;
  display: none;

}
.qrcode_mark {
  width: 18rem;
  /* height: 5.6rem; */
  background: #fff;
  box-shadow: 0px 5px 33px 2px rgba(182, 208, 249, 0.52);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.qrcode_mark .top {
  width: 100%;
  height: 3.5rem;
  background: url(/static/help/appinviteimg/qrcode_bg.png);
  background-size: 100% 100%;
  position: relative;
  top: -3.5rem;
}
.qrcode_mark .top .close {
  width: 1rem;
  position: absolute;
  right: 0.8rem;
  cursor: pointer;
  bottom: 0.5rem;
}
.qrcode_mark .bottom {
  height: 18rem;
  background: #fff;
  border-radius: 0 0 0.5rem 0.5rem;
}
.qrcode_imgs {
  width: 10rem;
  margin: 0 auto;
}
.qrcode_imgs img {
  width: 100%;
  height: 100%;
}
.qrcode_mark p {
  font-size: 1.2rem;
  line-height: 2rem;
  color: #333333;
  text-align: center;
}
.okbtn {
  width: 160px;
  height: 48px;
  background-color: #60c15b;
  border-radius: 4px;
  font-size: 20px;
  line-height: 48px;
  text-align: center;
  color: #fff;
  margin: 0 auto;
  margin-top: 40px;
  cursor: pointer;
}
.weixin_tip{
  background-color: #f2fafe;
    padding: 1rem 2rem;
    border-radius: 1.5rem;
}




.marking_copy{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
}
.mark_share{
  width: 85%;
  height: 15rem;
  background: #fff;
  border-radius: .8rem;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}
.mark_share h1{
  font-size: 2rem;
  padding: 1rem 0;
}
.share_url{
  background: #dfdfdf;
  color: #000;
  word-break:break-all;
  width: 85%;
  height: 6rem;
  border-radius: .8rem;
  padding: 1rem;
  margin: 0 auto;
  line-height: 1.2rem;
  box-sizing: border-box;
}
.mark_share .btn{
  font-size: 1.2rem;
  width:10rem;
  height: 2.4rem;
  text-align: center;
  line-height: 2.4rem;
  background: #3436ba;
  border-radius: 1.2rem;
  color: #fff;
  margin: 0 auto;
  letter-spacing: .1rem;
  margin-top:1rem;
  cursor: pointer;
}
.mark_share .close img{
  width: 1rem;
}
.mark_share .close{
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 50%;
  background:#dfdfdf;
  position: absolute;
  bottom: -8rem;
  left: 50%;
  transform: translateX(-50%);
}





.wrap_kf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border-radius: 0.14rem;
}

.wrap_kf .left {
    text-align: left;
}

.wrap_kf .left p:nth-of-type(1) {
    font-size: 0.34rem;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #222222;
    line-height: 0.4rem;
    text-align: left;
}


.wrap_kf .left p:nth-of-type(2) {
    font-size: 0.24rem;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #222222;
    line-height: 0.4rem;
    margin-top: 0.3rem;
}

.wrap_kf .right {
    font-size: 0.24rem;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #222222;
    line-height: 0.4rem;
    width: 5rem;
    height: 5rem;
    background: #F3F3F3;
}

.wrap_kf .right img {
    width: 100%;
    height: 100%;
}