page{background-color: #f5f5f5;}
.title{font-size: 42rpx;color: #333;line-height: 59rpx;margin-bottom: 32rpx;font-weight: 600;}
.home-top{position: relative;height: 391rpx;padding-left: 40rpx;overflow: hidden;color: #fff;}
.home-top-bg{width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: -1;}
.home-top-til{margin-top: 120rpx;font-size: 42rpx;line-height: 49rpx;text-indent: -0.5em;}
.home-top-subtil{font-size: 26rpx;line-height: 37rpx;}
.swiper-wrap{margin: -151rpx auto 32rpx;width: 670rpx;height: 320rpx;overflow: hidden;-webkit-border-radius: 16rpx;border-radius: 16rpx;position: relative;}
.swiper{height: 100%;}
.adv-item{height: 100%;}
.swiper-wrap .pic{width: 100%;height: 100%;}
.dots-container{position: absolute;right: 24rpx;bottom: 24rpx;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;}
.dot {margin: 0 8rpx;width: 16rpx;height: 8rpx;background: #fff;-webkit-border-radius: 4rpx;border-radius: 4rpx;opacity: 0.7;}
.dot.active {width: 36rpx;opacity: 1;}
.buy-now{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;padding-right: 54rpx;margin-top: 38rpx;margin-bottom: 32rpx;height: 112rpx;background: -webkit-gradient(linear,left top, right top,color-stop(20%, rgba(255,255,255,0)),to(#fff) );background: -webkit-linear-gradient(left,rgba(255,255,255,0) 20%,#fff 100% );background: linear-gradient(to right,rgba(255,255,255,0) 20%,#fff 100% );-webkit-box-shadow: 0px 0rpx 12rpx 0px rgba(0, 0, 0, 0.04);box-shadow: 0px 0rpx 12rpx 0px rgba(0, 0, 0, 0.04);-webkit-border-radius: 62rpx 100rpx 100rpx 0px;border-radius: 62rpx 100rpx 100rpx 0px;-webkit-box-align: center;-webkit-align-items: center;align-items: center;}
.buy-now-imgwrap{width: 270rpx;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: end;-webkit-align-items: flex-end;align-items: flex-end;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;margin-right: 37rpx;height: 100%;background: -webkit-linear-gradient(left, #FFF900 20rpx, #FFD200 100%);background: linear-gradient(90deg, #FFF900 20rpx, #FFD200 100%);-webkit-border-radius: 62rpx 0px 61rpx 0px;border-radius: 62rpx 0px 61rpx 0px;-webkit-box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.04);box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.04);}
.buy-now-img{width: 166rpx;height: 134rpx;}
.buy-now-text{-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;}
.buy-now-text-big{font-size: 36rpx;color: #333;line-height: 43rpx;}
.buy-now-text-small{font-size: 24rpx;color: #999;line-height: 33rpx;letter-spacing: 1rpx;}
.buy-now-icon{margin-right: 0;}
.buy-now-icon .iconfont{font-size: 44rpx;}
.type-nav{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;margin-bottom: 32rpx;}
.type-nav-item{-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;text-align: center;position: relative;}
.type-nav-item-til{font-size: 32rpx;color: #333;line-height: 45rpx;margin-bottom: 6rpx;font-weight: 500;}
.type-nav-item-subtil{font-size: 24rpx;color: #999;line-height: 33rpx;font-weight: 400;}
.type-nav-item.active .active-bg{width: 78rpx;margin-left: -39rpx;height: 54rpx;margin-top: -27rpx;position: absolute;left: 50%;top: 50%;z-index: -1;}
.product-list{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.product-list-item{width: 200rpx;height: 200rpx;position: relative;margin-bottom: 18rpx;overflow: hidden;-webkit-border-radius: 16rpx;border-radius: 16rpx;}
.product-list-item .product-img{width: 100%;height: 100%;}
.product-list-item .product-text{position: absolute;left: 0;bottom: 0;right: 0;height: 56rpx;line-height: 56rpx;font-size: 24rpx;color: #fff;padding-left: 16rpx;overflow: hidden;text-overflow: ellipsis;background: rgba(0, 0, 0, 0.4);}
.rank-wrap{margin-bottom: 44rpx;-webkit-border-radius: 16rpx;border-radius: 16rpx;-webkit-box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.04);box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.04);}
.rank-tab{display: -webkit-box;display: -webkit-flex;display: flex;background-color: #fff;margin-bottom: 8rpx;-webkit-box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.04);box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.04);-webkit-border-radius: 16rpx;border-radius: 16rpx;}
.rank-tab-item{-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;position: relative;height: 86rpx;line-height: 86rpx;text-align: center;font-size: 28rpx;color: #333;}
.rank-tab-item.active{color: #26D18B;}
.rank-tab-item.active::after{content: '';width: 130rpx;margin-left: -65rpx;height: 4rpx;background-color: #26D18B;-webkit-border-radius: 2rpx;border-radius: 2rpx;position: absolute;left: 50%;bottom: 0;}
.rank-top{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-border-radius: 16rpx 16rpx 0 0 ;border-radius: 16rpx 16rpx 0 0 ;padding: 105rpx 0 16rpx;background-color: #fff;position: relative;}
.rank-top-item{width: 210rpx;text-align: center;}
.rank-top-imgwrap{position: relative;margin-bottom: 12rpx;}
.rank-top-bg{width: 100%;height: 61rpx;position: absolute;left: 0;bottom: 0;}
.rank-top-photo{width: 144rpx;height: 144rpx;-webkit-border-radius: 50%;border-radius: 50%;}
.rank-top-name{font-size: 28rpx;color: #333;line-height: 40rpx;font-weight: 500;}
.rank-top-carbon{font-size: 20rpx;color: #999;}
.rank-wrap .rank-top-item:nth-child(2){-webkit-transform: scale(0.9);transform: scale(0.9);}
.rank-wrap .rank-top-item:nth-child(3){-webkit-transform: scale(0.8);transform: scale(0.8);}
.my-rank-wrap{-webkit-box-flex: unset;-webkit-flex: unset;flex: unset;position: absolute;top: 24rpx;right: 0;-webkit-box-align: center;-webkit-align-items: center;align-items: center;display: -webkit-box;display: -webkit-flex;display: flex;}
.my-rank-photo{width: 80rpx;height: 80rpx;position: relative;right: -30rpx;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-border-radius: 50%;border-radius: 50%;overflow: hidden;border: 2rpx solid #fff;}
.my-rank-photo .photo{width: 100%;height: 100%;}
.my-rank-text{padding: 7rpx 16rpx 0 45rpx;height: 80rpx;-webkit-box-sizing: border-box;box-sizing: border-box;color: #fff;background: -webkit-linear-gradient(311deg, #43D394 0%, #18C197 100%);background: linear-gradient(139deg, #43D394 0%, #18C197 100%);-webkit-box-shadow: 0px 10rpx 15rpx 0px rgba(0, 0, 0, 0.1), 0px 7rpx 14rpx 0px rgba(0, 0, 0, 0.08), 0px 3rpx 12rpx 0px rgba(0, 0, 0, 0.06);box-shadow: 0px 10rpx 15rpx 0px rgba(0, 0, 0, 0.1), 0px 7rpx 14rpx 0px rgba(0, 0, 0, 0.08), 0px 3rpx 12rpx 0px rgba(0, 0, 0, 0.06);}
.my-rank-text .my-rank{font-size: 28rpx;line-height: 40rpx;}
.my-rank-text .my-rank-num{font-size: 20rpx;line-height: 28rpx;}
.rank-list-header{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;height: 68rpx;font-size: 24rpx;color: #666;text-align: center;}
.rank-list-header-rank{width: 128rpx;}
.rank-list-header-user{-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;}
.rank-list-header-carbon{width: 170rpx;margin-left: 0;}
.rank-list{overflow: hidden;background-color: #fff;padding: 0 40rpx 0 0;-webkit-border-radius: 0 0 16rpx 16rpx;border-radius: 0 0 16rpx 16rpx;}
.rank-list-item{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;margin: 24rpx 0;padding-bottom: 31rpx;position: relative;}
.rank-list-item::after{content: '';width: calc( 100% - 128rpx );height: 2px;background-color: #EDEEED;position: absolute;right: 0;bottom: 0;}
.rank-list .rank-list-item:last-of-type::after{height: 0;}
.rank-list-rank{width: 128rpx;text-align: center;font-size: 32rpx;color: #999;}
.rank-list-user{-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;overflow: hidden;}
.rank-list-user .photo{width: 88rpx;height: 88rpx;-webkit-border-radius: 50%;border-radius: 50%;margin-right: 24rpx;}
.rank-list-user .name{font-size: 28rpx;color: #333;-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;}
.rank-list-carbon{width: 170rpx;margin-left: 0;font-size: 26rpx;color: #26D18B;line-height: 37rpx;}

