page{
  background-color:var(--main-color);
}
.scroll-view{
  height:100vh;
}

.logo-area{
  background-color: rgba(237, 181, 0, 1);
  border-radius: 50%;
  width:132rpx;height:132rpx;
  margin:70rpx auto 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-area .logo{
  width:84rpx;height:84rpx;
}
.share-title{
  width:512rpx;
  margin:36rpx auto 0 auto;
  display: block;
}

.main{
  background-color: #fff;
  border-radius: 18rpx;
  margin:40rpx 24rpx;
  padding:40rpx 24rpx;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.1);
}
.main .head{
  font-size: 36rpx;
  display: flex;
  gap: 24rpx;
  align-items: center;
  color: var(--main-color);
}
.main .head::before{
  content: '';
  background-color: var(--main-color);
  border-radius: 18rpx;
  width:8rpx;height:32rpx;
}

.main .m-item{
  display: flex;
  align-items: center;
  margin:50rpx 0 60rpx 0;
}
.main .m-item.small{
  margin:30rpx 0;
}
.main .m-item .left{
  width:70rpx;height:70rpx;
  background-color: rgba(255, 246, 217, 1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main .m-item.small .left{
  width:52rpx;height:52rpx;
}
.main .m-item .right{
  margin-left:24rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.main .m-item .icon{
  width:40rpx;height:40rpx;
}
.main .m-item .title{
  font-weight: 500;
}
.main .m-item .sub-title{
  font-size:26rpx;
  color: rgba(85, 85, 85, 1);
}
.main .m-item .point{
  color: var(--main-color);
  font-weight: 600;
  margin:0 12rpx;
}

.spliter{
  position: relative;
  margin:64rpx 0 60rpx 0;
}
.spliter::before{
  content:'积分说明';
  position: absolute;
  top:-14rpx;left:50%;
  margin-left: -78rpx;
  padding:0 22rpx;
  font-size: 28rpx;
  background-color: #fff;
}

.btn-share{
  border-radius: 60rpx;
  margin:60rpx 70rpx 0 70rpx!important;
  line-height: 1;
}

.step-area{
  background-color: rgba(255, 246, 217, 1);
  border-radius: 18rpx;
  padding:30rpx 24rpx 34rpx 24rpx;
  margin-top:60rpx;
}
.step-area .title{
  color: var(--main-color);
  text-align: center;
}
.step-area .steps{
  display: flex;
  font-size: 22rpx;
  margin-top:34rpx;
}
.step-area .steps .item{
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  flex: 1;
  align-items: center;
  position: relative;
}
.step-area .steps .icon{
  width:60rpx;height:60rpx;
  background-color: rgba(237, 181, 0, 1);
  font-size: 36rpx;
  font-weight: bold;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-area .steps .item::after{
  background:transparent url(data:image/svg+xml,%3Csvg%20t%3D%221743574928938%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%2245741%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cpath%20d%3D%22M456.99072%20608.60416l-272.9984-28.73344a68.23936%2068.23936%200%200%201%200-135.74144l272.9984-28.73344A61.44%2061.44%200%200%200%20512%20354.28352v-132.15744C512%20201.23648%20529.73568%20184.32%20551.60832%20184.32c10.15808%200%2019.94752%203.72736%2027.32032%2010.4448L882.688%20470.91712a54.90688%2054.90688%200%200%201%200%2082.1248L578.92864%20829.25568a40.96%2040.96%200%200%201-56.0128-1.31072A36.90496%2036.90496%200%200%201%20512%20801.87392V669.696a61.44%2061.44%200%200%200-55.00928-61.11232z%22%20p-id%3D%2245742%22%20fill%3D%22%23EDB500%22%3E%3C/path%3E%3C/svg%3E);
  content: '';
  position: absolute;
  width:40rpx;height:40rpx;
  right: -20rpx;top:10rpx;
  background-size: 100%;
}
.step-area .steps .item:last-child::after{
  display: none;
}