@charset "utf-8";
body{ background: #F4F3F8; }
/* wraps */
.wraps{ width: 92%; max-width: 768px; margin: 0 auto; padding: 0 4% 1rem 4%; background: url(../../images/user-v2/web-bg-img.png) no-repeat top right; background-size: 100% auto; }
.mod-title{ padding: .6rem 0 .4rem 0; font-size: .32rem; font-weight: bold; color: #333; }
/* my info area */
.user-area{ padding: .4rem 0 0 .2rem; position: relative; height: 1.2rem; font-size: 0; display: flex; justify-content: left; align-items: flex-start; }
.my-head{ display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 1.2rem; overflow: hidden; }
.my-head img{ width: 1.2rem; height: 1.2rem; }
.my-name{ display: inline-block; width: 40%; height: 1.2rem; padding: .05rem 0 0 .3rem; }
.my-name h2{ display: block; font-size: .4rem; font-weight: bold; padding-bottom: .1rem; }
.no-login-keyword{ font-size: .24rem; color: #333; line-height: .4rem; }
.my-edit{ display: none; align-items: flex-start; justify-content: flex-start; width: 1.8rem; height: .44rem; padding: 0 0 0 .1rem; background: linear-gradient( 180deg, #FFF6F7 0%, #FFDBDB 100%); border-radius: .44rem; border: 2px solid #FFF; }
.my-edit em{ line-height: .44rem; font-size: .24rem; color: #333; padding-left: .1rem; }
.my-edit b{ display: block; width: .34rem; height: .34rem; padding: .04rem; }
.my-edit b img{ max-height: .34rem; max-width: .4rem; }
.my-msg, .my-settings{ display: block; width: .44rem; height: .44rem; position: absolute; z-index: 11; top: .7rem; }
.my-msg img, .my-settings img{ width: .44rem; height: .44rem; }
.my-msg{ right: 1rem; }
.my-settings{ right: 0; }
.my-info-area{ padding: .4rem 0; display: flex; justify-content: space-between; align-items: center; }
.my-info-area a{ display: block; width: 50%; text-align: center; user-select: none; }
.my-info-area a.after-icon{ background: url(../../images/user-v2/after-i1.png) no-repeat 76% center; background-size: auto .24rem; }
.my-info-area a em,.my-info-area a strong{ display: inline-block; height: .6rem; line-height: .6rem; padding: 0 .1rem; overflow-y: hidden; }
.my-info-area a strong{ font-size: .42rem; color: #333; font-weight: normal; vertical-align: -.01rem; }
.my-info-area a:last-child strong{ font-size: .28rem; line-height: .4rem; }
.my-info-area a em{ font-size: .28rem; color: #64687E; }
/* my quota state */
.my-quota-s1{ display: flex; justify-content: space-between; align-items: center; padding: .3rem; background: #fff; box-shadow: 0px 2px 12px 0px rgba(217,214,228,0.27); border-radius: .2rem; position: relative; }
/* repay and bill */
.repay-bill-area{ border: .03rem solid #fff; background: linear-gradient( 180deg, #FFF2F6 0%, #FFFFFF 100%); box-shadow: 0px 2px 12px 0px rgba(217,214,228,0.27); border-radius: .2rem; overflow: hidden; }
.go-repay-area{ display: block; padding: .3rem 4%; position: relative; }
.go-repay-area::after{ content: ''; width: 0; height: 0; border-top: .08rem solid transparent; border-bottom: .08rem solid transparent; border-left: .08rem solid #999EB5; position: absolute; z-index: 2; top: 40%; right: .2rem; }
.go-repay-area.remove-after::after{ display: none; }
.next-repay{ display: flex; align-items: center; }
.next-repay em,.next-repay strong{ height: .6rem; line-height: .6rem; color: #333; overflow-y: hidden; }
.next-repay em{ font-size: .28rem; }
.next-repay strong{ font-size: .42rem; padding-left: .2rem; vertical-align: -.04rem; }
.next-repay.red em,.next-repay.red strong{ color: #FF2121; }
.sub-quota-s1{ display: inline-block; }
.sub-quota-s1 em,.sub-quota-s1 strong{ display: block; }
.sub-quota-s1 em{ font-size: .28rem; padding-bottom: .1rem; color: #333; }
.sub-quota-s1 strong{ font-size: .44rem; font-weight: normal; }
.go-borrow{ display: inline-block; position: relative; width: 1.8rem; height: .8rem; line-height: .8rem; font-size: .28rem; color: #fff; background: linear-gradient( 270deg, #FF0000 0%, #FF4444 100%); box-shadow: 0px 8px 24px 0px rgba(255,145,145,0.56); border-radius: .8rem; text-align: center; }
.go-borrow.pa{ position: absolute; z-index: 1; top: .4rem; right: .3rem; }
.go-borrow em{ height: .4rem; line-height: .4rem; padding: 0 .2rem; border-radius: .4rem; background: #2C2D38; color: #FFF1CE; font-size: .24rem; position: absolute; z-index: 23; top: -.3rem; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.increase-hr{ display: block; width: 80%; height: .6rem; line-height: .6rem; margin-top: .2rem; background: url(../../images/user-v2/group-hr.png) no-repeat left top; background-size: 100%; height: 100%; font-size: .28rem; color: #181A24; padding-left: 20%; }
.increase-hr strong{ color: #FF0000; font-size: .3rem; }
.go-borrow em::after{  content: ''; width: 0; height: 0; border-top: .08rem solid transparent; border-bottom: .08rem solid transparent; border-left: .08rem solid #2C2D38; position: absolute; z-index: 2; bottom: -.1rem; left: 49%; transform: rotate(90deg); }
.repay-time{ display: block; padding-top: .1rem; font-size: .24rem; color: #999EB5; }
.bill-state-list{ background: #fbfafc; font-size: 0; position: relative; padding: .1rem 0; }
.bill-state-list a{ display: inline-block; height: .6rem; padding: .2rem 4%; position: relative; overflow: hidden; }
.bill-state-list a:nth-child(odd){ width: 46%; }
.bill-state-list a:nth-child(even){ width: 38%; }
.bill-state-list::after{ content: ""; width: 1px; height: 70%; position: absolute; z-index: 1; top: 15%; left: 54%; background: #F3F3F3; }
.bill-state-list a::after{ content: ''; width: 0; height: 0; border-top: .08rem solid transparent; border-bottom: .08rem solid transparent; border-left: .08rem solid #999EB5; position: absolute; z-index: 2; top: 32%; right: .2rem; }
/* .bill-state-list a:last-child::after{ display: none; } */
.repay-img-txt{ display: flex; align-self: center; }
.bill-state-list a em{ display: inline-block; position: absolute; z-index: 1; top: .24rem; right: .4rem; font-size: .24rem; color: #999EB5; }
#orderNumber{ display: none; }
.bill-state-list a strong{ display: inline-block; font-size: .28rem; padding-left: .1rem; color: #333; line-height: .4rem; font-weight: normal; }
/* .bill-state-list a:last-child strong{ color: #999EB5; } */
.bill-state-list a b{ display: inline-block; height: .4rem; text-align: center; }
.bill-state-list a b img{ width: .4rem; }
#otherCostNumber{ display: none; }
/* function list */
.function-area,.carousel-item{ padding: .3rem 0 0 0; width: 100%; background: #fff; border-radius: .2rem; font-size: 0; }
.function-area a,.carousel-item a{ display: inline-block; height: 1rem; width: 19%; margin: 0 3% .4rem 3%; overflow: hidden; user-select: none; }
.function-area a em,.carousel-item a em,.function-area a b,.carousel-item a b{ display: block; text-align: center; width: 100%; }
.function-area a b,.carousel-item a b{ height: .5rem; text-align: center; }
.function-area a b img,.carousel-item a b img{ width: .5rem; }
.function-area a em,.carousel-item a em{ white-space: nowrap; font-size: .26rem; height: .3rem; padding-top: .2rem; overflow: hidden; text-overflow: ellipsis; color: #333; }
/* welfare-area */
.welfare-area{ font-size: 0; background: #fff; border-radius: .2rem; padding: .3rem; }
.welfare-list li{ display: flex; justify-content: space-between; align-items: center; padding: .2rem 0; }
.welfare-icon{ display: inline-block; width: 12%; }
.welfare-icon img{ max-width: 100%; max-height: 100%; }
.welfare-keyword{ display: block; width: 57%; padding: 0 5%; }
.welfare-keyword strong,.welfare-keyword em{ display: block; width: 100%; height: .4rem; line-height: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welfare-keyword strong{ color: #333; font-size: .28rem; font-weight: normal; }
.welfare-keyword em{ color: #999EB5; font-size: .24rem; }
.welfare-link-btn{ display: block; width: 20%; height: .6rem; line-height: .6rem; font-size: .24rem; border-radius: .6rem; background: #FFECEC; text-align: center; color: #FF2121; }
/* exit login */
.exit-login{ display: none; width: 80%; height: .8rem; line-height: .8rem; margin: .6rem auto 0 auto; font-size: .28rem; color: #333; text-align: center; background: #fff; border-radius: .8rem; user-select: none; }
/* footer logo */
.f-logo{ width: 100%; padding: .6rem 0; }
.f-logo-a{ display: block; text-align: center; font-size: 0; }
.f-logo-a img{ width: 50%; }
/* no data */
.no-data{ display: block; width: 100%; line-height: 1rem; font-size: .24rem; color: #999; text-align: center; }
/* 轮播style */
.carousel-container { position: relative; width: 100%; overflow: hidden; height: 3.1rem; border-radius: .2rem; }  
.carousel-track { display: flex; height: 100%; transition: transform 0.2s ease-out; /* 平滑过渡场动画 */}
.carousel-item { flex-shrink: 0; height: 3.1rem; padding: .1rem 0 0 0; overflow: hidden; border-radius: .2rem; }

/* 指示器样式 */
.carousel-indicators { position: absolute; bottom: .2rem; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.carousel-indicator { width: .12rem; height: .12rem; border-radius: 50%;  background: #999; cursor: pointer; transition: background 0.3s; }
.carousel-indicator.active { background: #FF4444; width: .3rem; border-radius: .12rem; }