/* pages/my/my.wxss */
page{
  background-color: #F9F9F9;
  padding-bottom: 30rpx;
}
.top-content{
  background-color: #ffffff;
}
.user-header-wrap{
  padding: 60rpx 30rpx 0;
}
.avatar{
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  overflow: hidden;
}
.user-info{
  display: inline-block;
  margin-left: 30rpx;
}
.member,.name{
  display: block;
}
.member{
  font-size: 25rpx;
  color: #c09a74;
  margin-top: 4rpx;
}
.name{
  font-size: 32rpx;
  color: #666666;
  margin-top: 10rpx;
}
.method-btn{
  float: right;
  font-size: 18rpx;
  width: 160rpx;
  height: 36rpx;
  line-height: 36rpx;
  text-align: center;
  color: #c09a74;
  border: 1px solid #c09a74;
  border-radius: 34rpx;
}
.opration-list{
  text-align: center;
  min-width: 60rpx;
}
.opration-wrap{
  display: flex;
  justify-content: space-around;
  margin-top: 50rpx;
}
.opration-list text{
  display: block;
}
.opration-list text:first-child{
  font-size: 32rpx;
  color: #666666;
}
.opration-list text:last-child{
  margin-top: 20rpx;
  font-size: 20rpx;
}
.code{
  display: block;
  width: 36rpx;
  height: 36rpx;
  margin: 0 auto;
}
.small-arrow{
  width: 18rpx;
  height: 12rpx;
}
.avatar-wrap{
  width: 93rpx;
  height: 93rpx;
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.crown{
  width: 26rpx;
  height: 23rpx;
  position: absolute;
  top: -10rpx;
  right: 0;
}
.member-interest{
  margin-top: 30rpx;
}
.interest-fold{
  width: 690rpx;
  height: 76rpx;
  position: relative;
  margin: 0 auto -5rpx;
}
.interest-fold image{
  width: 690rpx;
  height: 76rpx;
}
.interest-top{
  position: absolute;
  top:  20rpx;
  left: 24rpx;
}
.regular-top{
  position: absolute;
  top:  24rpx;
  left: 24rpx;
  font-size: 20rpx;
  color: #C09A74;
}
.interest-top .title{
  color: #89643f;
  font-size: 20rpx;
}
.regular-title{
  color: #F7B500;
  font-weight: bold;
}
.recharge{
  position: absolute;
  top: 20rpx;
  right: 24rpx;
}
.recharge text{
  color: rgba(0,0,0,0.5);
  font-size: 20rpx;
}
.recharge image{
  width: 23rpx;
  height: 16rpx;
  margin-left: 9rpx;
}
.interest-unfold{
  height: 225rpx;
  position: relative;
}
.interest-unfold-bg{
  width: 750rpx;
  height:225rpx;
}
.interest-name{
  position: absolute;
  top: 60rpx;
  left: 30rpx;
}
.interest-title-line{
  position: absolute;
  top: 15rpx;
  left: 230rpx;
}
.interest-title-line image{
  width: 286rpx;
  height: 5rpx;
}
.personal-interest{
  color: #89643f;
  font-size: 20rpx;
  position: absolute;
  top: 27rpx;
  left: 320rpx;
}
.interest-title{
  color: #FACEA2;
  font-size: 20rpx;
}
.interest-icon{
  width: 72rpx;
  height: 72rpx;
}
.interest-ul{
  width: 630rpx;
  padding: 0 30rpx;
  display: flex;
  justify-content: space-around;
}
.interest-list{
  text-align: center;
}
.main-content{
  position: relative;
  /* margin-top: -4rpx; */
  padding: 0 20rpx;
  background-color: #F9F9F9;
  margin-top: -228rpx;
  z-index: 99;
}
.order-list{
  width: 664rpx;
  border-radius: 10rpx;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  padding: 18rpx 20rpx 43rpx 23rpx;
}
.my-order{
  padding-bottom: 7rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}
.order-title{
  font-size: 26rpx;
}
.look-all{
  position: absolute;
  right: 0;
  bottom: 7rpx;
  font-size: 21rpx;
  color: #C09A74;
}
.order-icon{
  width: 71rpx;
  height: 69rpx;
  background-color: #D8D8D8;
}
.order-desc{
  font-size: 23rpx;
  color: #666660;
}
.order-item{
  margin-top: 50rpx;
  display: flex;
  flex-wrap: wrap;
}
.item{
  text-align: center;
  width: 25%;
  margin-bottom: 20rpx;
}
.banner{
  width: 710rpx;
  height: 151rpx;
  margin: 17rpx 0;
  position: relative;
}
.banner image{
  width: 710rpx;
  height: 151rpx;
}
.banner-title{
  position: absolute;
  top: 40rpx;
  left: 70rpx;
}

.top-title{
  font-size: 20rpx;
  color: #C09A74;
}
.bottom-title{
  font-size: 30rpx;
  margin-top: 7rpx;
}
.tool-item{
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 23rpx 0;
}
.tool-icon{
  width: 58rpx;
  height: 58rpx;
  background-color: #D8D8D8;
  vertical-align: middle;
}
.tool-desc{
  font-size: 26rpx;
  color: #666660;
  display: inline-block;
  margin-left: 23rpx;
  vertical-align: middle;
}












.animation-element-wrapper {
  display: flex;
  width: 100%;
  padding-top: 150rpx;
  padding-bottom: 150rpx;
  justify-content: center;
  overflow: hidden;
  background-color: #ffffff;
  z-index: 8888;
}
.animation-element {
  width: 200rpx;
  height: 200rpx;
  z-index: 8888;
  background-color: #1AAD19;
}
.animation-buttons {
  padding: 30rpx 50rpx 10rpx;
  width: 100%;
  height: 700rpx;
  box-sizing: border-box;
}
.animation-button {
  float: left;
  line-height: 2;
  width: 300rpx;
  margin: 15rpx 12rpx;
}

.animation-button-reset {
  width: 620rpx;
}
