* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  color: #fff;
  --appbg: rgba(30, 30, 35, 1);
  --loginbg: rgba(29, 29, 33);
  --boxBg: rgb(41, 41, 45);
  --light7: rgba(255, 255, 255, 0.07);
  --light10: rgba(255, 255, 255, 0.1);
  --light15: rgba(255, 255, 255, 0.15);
  --light20: rgba(255, 255, 255, 0.2);
  --light25: rgba(255, 255, 255, 0.25);
  --light30: rgba(255, 255, 255, 0.3);
  --light40: rgba(255, 255, 255, 0.4);
  --light50: rgba(255, 255, 255, 0.5);
  --light70: rgba(255, 255, 255, 0.7);
  --light80: rgba(255, 255, 255, 0.8);
  --light100: #fff;
  --dark30: rgba(0, 0, 0, 0.3);
  --dark40: rgba(0, 0, 0, 0.4);
  --dark70: rgba(0, 0, 0, 0.7);
  --red: rgb(244, 37, 37);
  --darkred: rgba(244, 37, 37, 0.3);
  --yellow: rgb(246, 180, 54);
  --blue: rgb(67, 130, 255);
  --brown: rgb(107, 66, 25);
  --price: rgb(255, 238, 196);
  --baseLinear: linear-gradient(90deg, rgb(255, 213, 124), rgb(255, 231, 180));
  --mainLinear: linear-gradient(90deg, rgb(246, 180, 54), rgb(255, 155, 31));
  --success: rgb(31, 196, 111);
  --dropbg: rgb(61, 61, 67);
}
html [data-theme='dark'] {
  display: block;
}
html [data-theme='light'] {
  display: none;
}
body {
  padding: 0;
  margin: 0 auto;
  font-family: 'Segoe UI', '微软雅黑', 'Microsoft YaHei', sans-serif;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  font-size: 12px;
  line-height: 1.6;
  width: 100%;
  height: 100%;
  background: rgba(30, 30, 35, 1);
}
ul,
ol,
li {
  list-style: none;
  list-style-type: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td {
  border-collapse: collapse;
  font-size: 14px;
}
img {
  border: none;
  max-width: 100%;
  vertical-align: middle;
}
a,
a:link,
a:visited {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.clear {
  clear: both;
  height: 0px;
  overflow: hidden;
  zoom: 0;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix {
  zoom: 1;
}
.overscroll {
  height: 100%;
  overflow: auto;
  width: 100%;
}
.overscroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.overscroll::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--light10);
}
.overscroll::-webkit-scrollbar-track {
  border-radius: 3px;
  background: transparent;
}
.overscroll:hover::-webkit-scrollbar-thumb {
  background: var(--light20);
}
/*IE/7/6*/
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
}
.dot {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dot2,
.dot3,
.dot4 {
  display: -webkit-box;
  display: box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
}
.dot2 {
  -webkit-line-clamp: 2;
}
.dot3 {
  -webkit-line-clamp: 3;
}
.dot4 {
  -webkit-line-clamp: 4;
}
.flex {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  align-items: center;
}
html {
  width: 100%;
  height: 100%;
}
#app {
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--appbg);
  color: var(--light100);
  overflow: hidden;
  position: relative;
  z-index: 10;
  padding-right: 6px;
}
#app:before {
  content: '';
  position: absolute;
  right: 16px;
  top: 16px;
  background: url(../images/backgroundIcon.png) no-repeat center;
  background-size: contain;
  padding: 104px;
  z-index: -1;
}
#app.member {
  background: var(--appbg);
}
#app.member:before {
  display: none;
}
.appHead {
  flex: 0 0 auto;
  padding-top: 20px;
  padding-right: 26px;
  padding-left: 24px;
  width: 100%;
}
.appHead .appTitle {
  margin-bottom: 24px;
  justify-content: flex-start;
}
.appHead .appTitle .logo {
  flex: 0 0 auto;
  width: 91px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url(../images/logo.svg);
}
.appHead .appTitle .ptit {
  margin-left: 20px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 16px;
  color: var(--light70);
  border-left: 1px solid var(--light20);
}
.appHead .appTitle img {
  display: block;
  height: 28px;
}
.aicategory {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-bottom: 8px;
}
.aicategory .i {
  flex: 0 0 auto;
  cursor: pointer;
  padding: 0 14px;
  line-height: 26px;
  border: 1px solid var(--light15);
  border-radius: 28px;
  font-size: 12px;
  color: var(--light70);
  margin-right: 8px;
  margin-bottom: 8px;
}
.aicategory .i.cur {
  background: var(--light15);
  color: var(--light100);
}
.appBody {
  flex: 1 1 auto;
  height: auto;
  padding-left: 32px;
  padding-right: 32px;
}
.ailabs {
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-bottom: 20px;
}
.ailabs .item {
  flex-direction: column;
  flex: 0 0 auto;
  width: 31.99%;
  margin-right: 2%;
  position: relative;
  z-index: 10;
  background: var(--boxBg);
  border-radius: 6px;
  margin-bottom: 2%;
  padding: 26px 16px 16px;
}
.ailabs .item:nth-child(3n) {
  margin-right: 0;
}
.ailabs .item .ihd {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  padding: 8px 8px 0 16px;
}
.ailabs .item .ilike .ico {
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background: var(--light10);
  border-radius: 50%;
  font-size: 0;
  cursor: pointer;
}
.ailabs .item .ilike .ico.on {
  background: var(--red);
}
.iaudio .bd {
  height: 28px;
  background: var(--dark40);
  padding: 0 5px;
  min-width: 74px;
  border-radius: 6px;
}
.iaudio .bd .ico {
  font-size: 0;
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  cursor: pointer;
}
.ailabs .item .ibd {
  flex: 1 1 auto;
  width: 100%;
  text-align: center;
  padding-bottom: 20px;
}
.ailabs .item .img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0 auto 8px;
  font-size: 0;
  overflow: hidden;
}
.ailabs .item .it {
  margin-bottom: 6px;
}
.ailabs .item .t {
  position: relative;
  display: inline-block;
}
.ailabs .item .t .tag {
  position: absolute;
  left: 100%;
  top: 50%;
  height: 16px;
  margin-top: -8px;
  padding-left: 5px;
}
.ailabs .item .t .tag img {
  max-width: none;
  height: 100%;
}
.ailabs .item .desc {
  line-height: 1.5;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ailabs .item .ibt {
  flex: 0 0 auto;
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid var(--light10);
}
.ailabs .item .time {
  color: var(--light70);
  margin-right: 10px;
  line-height: 20px;
}
.ailabs .item .time.act {
  padding: 0 6px;
  background: rgba(246, 180, 54, 0.1);
  color: var(--yellow);
  border-radius: 4px;
}
.ailabs .item .xy {
  color: var(--blue);
  cursor: pointer;
}
.ailabs .item .xy:hover {
  text-decoration: underline;
}
.baseBtn {
  line-height: 28px;
  padding: 0 1em;
  background: var(--baseLinear);
  color: var(--brown) !important;
  border-radius: 28px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  overflow: hidden;
  outline: none;
  box-shadow: none;
  border: none;
}
.baseBtn:before {
  content: '';
  background: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
}
.baseBtn:hover:before {
  opacity: 1;
}
.baseBtn.disabled {
  background: var(--light10) !important;
  color: var(--light50) !important;
}
.ailabs .item .addcart {
  margin-right: 14px;
  font-size: 0;
  cursor: pointer;
}
.ailabs .item .addcart img {
  width: 16px;
}
.ailabs .item .price {
  color: var(--price);
}
.icart {
  position: absolute;
  z-index: 50;
  right: 32px;
  bottom: 18px;
  background: rgba(31, 31, 35, 0.97);
  border: 2px solid rgba(255, 255, 255, 0.2);
  padding: 5px;
  padding-left: 35px;
  border-radius: 34px;
}
.icart .ico {
  position: absolute;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  left: -25px;
  top: 50%;
  margin-top: -25px;
  background: linear-gradient(0deg, rgb(240, 240, 246), rgb(209, 209, 226));
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  font-size: 0;
}
.icart .ico .num {
  position: absolute;
  width: 24px;
  line-height: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  font-weight: bold;
  color: #000;
  font-size: 12px;
  right: -5px;
  top: -5px;
}
.icart .btn {
  cursor: pointer;
  padding: 0 17px;
  line-height: 34px;
  font-weight: bold;
  color: #000;
  background: var(--baseLinear);
  border-radius: 17px;
  margin-left: 20px;
  font-size: 14px;
}
.icart .span {
  flex: 0 0 auto;
  color: var(--light70);
}
.appBack {
  margin-bottom: 12px;
}
.appBack .back {
  height: 36px;
  width: 80px;
  border-radius: 36px;
  justify-content: center;
  background: var(--light7);
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
}
.appBack .back:hover {
  background: var(--light10);
}
.appBack .back .ico {
  font-size: 0;
  flex: 0 0 auto;
  margin-right: 8px;
  width: 7px;
}
.appBack .usr {
  flex: 0 0 auto;
  text-align: right;
}
.appBack .usr .ur {
  flex: 0 0 auto;
  text-align: center;
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 0;
  background: rgb(62, 62, 66);
  border-radius: 50%;
  margin-left: 13px;
  overflow: hidden;
}
.appBack .usr .p {
  color: rgb(67, 130, 255);
}
.appBack .usr .p:hover {
  text-decoration: underline;
}
.cartBody {
  flex: 1 1 auto;
  width: 100%;
  padding-left: 24px;
  padding-right: 10px;
  align-items: stretch;
  overflow: hidden;
}
.cartBody .cartl {
  flex: 0 0 auto;
  width: 233px;
  background: var(--boxBg);
  border-radius: 6px;
  position: relative;
  z-index: 5;
  flex-direction: column;
  padding: 20px 8px 20px 16px;
}
.cartBody .cartl:before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  width: 49px;
  height: 36px;
  background-image: url(../images/bg-rt1.png);
  background-size: contain;
  background-position: top right;
  background-repeat: no-repeat;
}
.cartl .tit {
  flex: 0 0 auto;
  width: 100%;
  padding-right: 8px;
}
.cartl .tit .time {
  color: var(--light70);
  margin-right: 10px;
  line-height: 20px;
}
.cartl .tit .time.act {
  padding: 0 6px;
  background: rgba(246, 180, 54, 0.1);
  color: var(--yellow);
  border-radius: 4px;
}
.cartl .tit .t {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--light10);
  margin-bottom: 13px;
  justify-content: flex-start;
  color: var(--light50);
}
.cartl .tit .t i {
  flex: 0 0 auto;
  width: 3px;
  height: 1em;
  border-radius: 3px;
  background: var(--yellow);
  margin-right: 4px;
}
.cartl .tit .t .t1 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  margin-right: 9px;
  color: var(--light100);
}
.cartl .tit .tr {
  margin-bottom: 8px;
}
.cartl .tit .tr span {
  color: var(--blue);
  cursor: pointer;
}
.cartl .tit .tr span.disabled {
  color: var(--light30);
}
.cartl .tit .tr span:hover {
  text-decoration: underline;
}
.icheck {
  display: inline-block;
  position: relative;
  z-index: 2;
}
.icheck input[type='checkbox'] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
}
.icheck i {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border: 1px solid var(--light50);
  border-radius: 50%;
  position: relative;
  transition: 0.3s;
  background: rgba(255, 255, 255, 0);
}
.icheck:hover i {
  border-color: var(--light80);
  background: rgba(255, 255, 255, 0.03);
}
.icheck i:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/icon-check.svg);
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
}
.icheck i + span {
  display: inline-block;
  vertical-align: middle;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 0 0 6px;
}
.icheck input[checked] + i {
  border-color: var(--yellow);
  background-color: var(--yellow);
}
.icheck input[checked] + i:after {
  opacity: 1;
}
.cartList .item {
  justify-content: flex-start;
  padding: 14px;
  margin-bottom: 6px;
  background: var(--dark30);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  z-index: 5;
}
.cartList .item .idel {
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 0;
  width: 14px;
  transition: 0.3s;
  opacity: 0;
}
.cartList .item:hover .idel {
  opacity: 0.5;
}
.cartList .item .vpro {
  flex: 1 1 auto;
  overflow: hidden;
  padding-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cartList .item .vhd {
  line-height: 1;
  margin-bottom: 10px;
}
.cartList .item .img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}
.cartList .item .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cartList .item .iname {
  flex: 1 1 auto;
  padding-left: 6px;
  overflow: hidden;
}
.cartList .item .it {
  display: inline-block;
  position: relative;
  line-height: 20px;
}
.cartList .item .tag {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -8px;
  padding-left: 6px;
  height: 16px;
}
.cartList .item .tag img {
  display: block;
  height: 100%;
  max-width: fit-content;
}
.cartList .item .vp {
  color: var(--light70);
  line-height: 1.2;
}
.cartBody .cartl .tbd {
  padding-right: 8px;
  flex: 1 1 auto;
  width: 100%;
}
.nomore {
  text-align: center;
  margin-top: 8px;
  color: var(--light30);
}
.tip {
  flex: 0 0 auto;
  width: 100%;
  padding-left: 24px;
  padding-right: 26px;
  padding-top: 13px;
  padding-bottom: 16px;
  color: var(--light40);
}
.tip a:hover {
  text-decoration: underline;
}
.cartBody .cartr {
  flex: 1 1 auto;
  margin-left: 12px;
  padding-right: 8px;
}
.h100 {
  min-height: 100%;
  flex-direction: column;
}
.cartBody .cartr .box {
  padding: 16px 20px;
  margin-bottom: 12px;
  border-radius: 4px;
  background: var(--boxBg);
  flex: 0 0 auto;
  width: 100%;
}
.cartBody .cartr .box:last-child {
  margin-bottom: 0;
  flex: 1 1 auto;
}
.packages {
  align-items: stretch;
}
.packages .i {
  flex: 0 0 auto;
  width: 23%;
  text-align: center;
  background: linear-gradient(0deg, rgba(107, 107, 124, 0.2), rgba(16, 16, 37, 0.2));
  border-radius: 6px;
  position: relative;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.19);
  cursor: pointer;
}
.packages .i .it {
  padding: 12px 10px 6px;
  line-height: 1;
  color: rgb(135, 135, 157);
}
.packages .i .currentPrice {
  font-weight: bold;
  color: rgb(255, 239, 201);
}
.packages .i .currentPrice .b {
  font-size: 20px;
  line-height: 1;
}
.packages .i .price {
  color: rgb(135, 135, 157);
  margin-bottom: 15px;
  line-height: 1;
}
.packages .i .bot {
  color: rgb(255, 213, 124);
  line-height: 20px;
  padding: 0 10px 4px;
}
.packages .i.on {
  background: linear-gradient(0deg, rgb(255, 246, 224), rgb(255, 237, 191));
}
.packages .i.on .it,
.packages .i.on .price,
.packages .i.on .currentPrice {
  color: rgb(104, 58, 11);
}
.packages .i.on .bot {
  background: rgb(255, 213, 124);
  color: rgb(104, 58, 11);
  padding: 2px 10px 2px;
}
.packages .i.on:before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 45px;
  height: 24px;
  z-index: -1;
  background-image: url(../images/bg-rt2.png);
  background-position: right top;
  background-size: contain;
  background-repeat: no-repeat;
}
.lineTp {
  justify-content: flex-start;
  margin-top: 12px;
}
.lineTp .p {
  opacity: 0.5;
}
.lineTp .ico {
  font-size: 0;
  flex: 0 0 auto;
  width: 14px;
  margin-left: 5px;
  opacity: 0.5;
  transition: 0.3s;
}
.lineTp .ico:hover {
  opacity: 1;
}
.packages .i .popular {
  position: absolute;
  left: 0;
  top: -10px;
  line-height: 20px;
  background: linear-gradient(90deg, rgb(254, 146, 127), rgb(255, 56, 103));
  padding: 0 6px;
  border-radius: 4px 4px 4px 0;
}
.paytab {
  background: var(--dark30);
  border-radius: 4px;
  padding: 2px;
  margin-bottom: 20px;
}
.paytab .i {
  flex: 0 0 auto;
  width: 50%;
  justify-content: center;
  align-items: center;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
}
.paytab .i.on {
  background: rgb(50, 50, 53);
}
.paytab .i .ico {
  font-size: 0;
  flex: 0 0 auto;
  width: 16px;
  margin-right: 6px;
}
.payContainer {
  align-items: stretch;
}
.payContainer .payCode {
  flex: 0 0 auto;
  width: 140px;
  background: #fff;
  position: relative;
  border-radius: 12px;
  padding: 12px;
  z-index: 5;
  height: 140px;
  overflow: hidden;
}
.payContainer .payInfo {
  flex: 1 1 auto;
  overflow: hidden;
  flex-direction: column;
  padding-left: 20px;
}
.payContainer .payInfo .tp {
  width: 100%;
  margin-bottom: 20px;
  flex: 0 0 auto;
}
.payamount {
  font-size: 14px;
  font-weight: 700;
  color: var(--yellow);
  line-height: 1;
  margin-bottom: 10px;
}
.payamount .b {
  font-size: 24px;
  line-height: 1;
}
.payamount del {
  font-weight: normal;
  margin-left: 5px;
  color: var(--light50);
}
.paydiscount {
  display: inline-block;
  background: var(--darkred);
  line-height: 20px;
  color: var(--red);
  padding: 0 5px;
  border-radius: 3px;
}
.payContainer .payInfo .tb {
  width: 100%;
  flex: 0 0 auto;
}
.paytip .i {
  justify-content: flex-start;
  color: var(--light70);
}
.paytip .i .ico {
  flex: 0 0 auto;
  width: 16px;
  font-size: 0;
  margin-right: 6px;
}
.payInfo .other {
  line-height: 1;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--light30);
  justify-content: flex-start;
}
.payInfo .other .img {
  font-size: 0;
  flex: 0 0 auto;
  margin-right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
}
.payInfo .other .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.payInfo .other .nick {
  color: var(--light50);
  flex: 0 0 auto;
  padding-right: 5px;
}
.payInfo .other .p {
  color: var(--light80);
  padding-right: 5px;
}
.payInfo .other .p2 {
  color: var(--blue);
}
.payContainer .payCode .notip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  padding: 10px;
  font-size: 16px;
  text-align: center;
  background: var(--dark70);
}
.empty {
  min-height: 80%;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}
.empty .p {
  margin-top: 10px;
  color: var(--light50);
}
.winpop {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1050;
  background: rgba(29, 29, 33, 0.97);
  border-radius: 6px;
  padding: 15px 15px 20px;
  width: 300px;
  border: 1px solid var(--light15);
  margin-left: -150px;
  margin-top: -95px;
}
.winpop .poptit {
  height: 20px;
  line-height: 20px;
  margin-bottom: 20px;
}
.winpop .poptit .t {
  color: var(--light70);
}
.winpop .poptit .close {
  cursor: pointer;
  font-size: 0;
  width: 20px;
}
.winpop .winhd {
  padding: 0 20px;
  justify-content: center;
  margin-bottom: 13px;
  font-size: 14px;
  font-weight: bold;
}
.winpop .winhd .ico {
  flex: 0 0 auto;
  font-size: 0;
  width: 20px;
  line-height: 20px;
  background: var(--success);
  text-align: center;
  border-radius: 50%;
  margin-right: 8px;
}
.winpop .winbd {
  text-align: center;
  line-height: 20px;
  max-width: 17em;
  margin: 0 auto;
  padding-bottom: 20px;
  color: var(--light70);
}
.winpop .winft {
  justify-content: center;
  padding: 20px 20px 5px;
}
.winpop .winft .btn {
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  min-width: 96px;
  padding: 0 1.5em;
  color: #000;
  border-radius: 36px;
  background: var(--mainLinear);
  margin: 0 8px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.winpop .winft .btn:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: 0.3s;
}
.winpop .winft .btn:hover:before {
  opacity: 1;
}
.winpop .winft .btn.gray {
  background: var(--light10);
  color: var(--light100);
}
.roleInfo {
  padding: 10px 8px 15px 0;
  text-align: center;
}
.roleInfo .img {
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 0;
}
.roleInfo .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.roleInfo .name {
  margin-bottom: 8px;
  line-height: 1;
}
.roleInfo .name .t {
  display: inline-block;
  position: relative;
  line-height: 16px;
  vertical-align: middle;
}
.roleInfo .name .t .tag {
  height: 16px;
  position: absolute;
  left: 100%;
  padding-left: 5px;
  top: 50%;
  margin-top: -8px;
}
.roleInfo .name .t .tag img {
  max-width: none;
  height: 100%;
  display: block;
}
.roleInfo .au {
  justify-content: center;
  margin-bottom: 15px;
}
.roleInfo .iaudio .bd {
  min-width: 86px;
  justify-content: center;
  color: var(--light70);
}
.roleInfo .iaudio .ico {
  margin-left: 6px;
}
.roleInfo .idesc {
  display: inline-block;
  position: relative;
  padding: 16px 36px;
  color: var(--light70);
  z-index: 5;
  max-width: 100%;
}
.roleInfo .idesc:before,
.roleInfo .idesc:after {
  position: absolute;
  width: 14px;
  height: 12px;
  content: '';
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.roleInfo .idesc:before {
  left: 0;
  top: 0;
  background-image: url(../images/icon-tl.svg);
}
.roleInfo .idesc:after {
  background-image: url(../images/icon-tr.svg);
  right: 0;
  bottom: 0;
}
.roleList {
  border-top: 1px solid var(--light10);
  padding-top: 14px;
}
.roleList .lt {
  line-height: 1;
  font-weight: 700;
  color: var(--light50);
  margin-bottom: 8px;
}
.roleList .items {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.roleList .items .i {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: 0.3s;
}
.roleList .items .i:hover {
  border-color: var(--light20);
}
.roleList .items .i img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.roleList .items .i .img {
  height: 100%;
  overflow: hidden;
}
.member {
  height: 100%;
  flex-direction: column;
  padding: 0px 20px 24px !important;
}
.member .mtit {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: 20px;
  padding: 0 20px;
}
.member .mtit .appBack {
  margin-bottom: 0;
  font-weight: normal;
}
.mcontent {
  flex: 1 1 auto;
  overflow: hidden;
  width: 100%;
  visibility: hidden;
  padding: 0 20px;
}
.mcontent.active {
  visibility: visible;
}
.mcontent .box {
  width: 100%;
  height: 100%;
}
.unlogin {
  width: 100%;
  height: 100%;
  flex-direction: column;
}
.umain {
  justify-content: center;
  align-items: center;
  width: 100%;
  flex: 0 0 auto;
  text-align: center;
  height: 100%;
}
.unlogin .umain {
  justify-content: center;
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
  text-align: center;
  height: 100%;
}
.umain .avan {
  width: 60px;
  height: 60px;
  background: var(--light10);
  border-radius: 50%;
  font-size: 0;
  line-height: 60px;
  margin: 0 auto;
  position: relative;
}
.umain .avan .nopic {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
}
.umain .avan .fileBtn {
  position: absolute;
  width: 24px;
  height: 24px;
  background: rgb(85, 85, 90);
  border-radius: 50%;
  font-size: 0;
  line-height: 24px;
  right: -12px;
  bottom: 0;
  text-align: center;
  cursor: pointer;
}
.umain .avan .fileBtn img {
  opacity: 0.7;
  transition: 0.3s;
}
.umain .avan .fileBtn:hover img {
  opacity: 1;
}
.umain .avan .fileBtn .hov {
  position: absolute;
  left: 90%;
  top: 90%;
  background: var(--light100);
  font-size: 12px;
  white-space: nowrap;
  line-height: 1.8;
  padding: 0 5px;
  border-radius: 2px;
  color: #333;
  pointer-events: none;
  display: none;
}
.umain .avan .fileBtn:hover .hov {
  display: block;
}
.fileBtn input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  cursor: pointer;
  opacity: 0;
  font-size: 0;
}
.umain .avan .pic {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  overflow: hidden;
}
.umain .nick {
  font-size: 14px;
  line-height: 24px;
  margin-top: 14px;
  font-weight: 700;
}
.umain .tp {
  margin-top: 5px;
  color: var(--light70);
  line-height: 1;
}
.umain .btns {
  margin-top: 24px;
  justify-content: center;
}
.umain .btns .baseBtn {
  line-height: 32px;
  padding: 0 1.5em;
  background: var(--mainLinear);
  color: rgb(23, 23, 27) !important;
}
.umain .btns .baseBtn.gray {
  background: var(--light10);
  color: var(--light100) !important;
}
.unlogin .bot {
  padding-top: 24px;
  flex: 0 0 auto;
  width: 100%;
  border-top: 1px solid var(--light10);
  text-align: center;
  color: var(--light70);
  line-height: 24px;
}
.unlogin .bot a {
  padding-right: 26px;
  line-height: 24px;
  display: inline-block;
  color: rgb(39, 143, 255);
  padding-left: 5px;
  position: relative;
}
.unlogin .bot a:hover {
  text-decoration: underline;
}
.unlogin .bot a:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 100%;
  background: url(../images/icon-link.svg) no-repeat center;
  background-size: contain;
}
.editline {
  justify-content: center;
  width: 130px;
  margin: auto;
}
.editline .in {
  width: 128px;
  flex: 0 0 auto;
  display: none;
}
.editline .in input {
  width: 100%;
  height: 24px;
  padding: 0 5px;
  background: none;
  transition: background-color 66666666s;
  border: 2px solid rgb(67, 130, 255);
  border-radius: 2px;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  outline: none;
  display: block;
}
.umain .nick .label {
  flex: 0 0 auto;
  padding-right: 15px;
  position: relative;
}
.umain .nick .label .ico {
  width: 10px;
  text-align: center;
  line-height: 20px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -10px;
  font-size: 0;
  opacity: 0.5;
  cursor: pointer;
  transition: 0.3s;
}
.umain .nick .label .ico:hover {
  opacity: 1;
}
.editline.act .label {
  display: none;
}
.editline.act .in {
  display: block;
}
.haslogin {
  width: 100%;
  height: auto; /* 👈 把 100% 改成 auto，取消全屏高度 */
  flex-direction: column;
  align-items: center; /* 👈 让 bottom-panel 水平居中 */
  gap: 20px; /* 👈 控制 umain 和底部面板的间距，可自由调整 */
}
.umain .btns .relative {
  position: relative;
}
.umain .btns .btn {
  cursor: pointer;
  color: rgb(67, 130, 255);
  position: absolute;
  left: 100%;
  margin-left: 10px;
  top: 50%;
  margin-top: -10px;
  line-height: 20px;
  white-space: nowrap;
}
.umain .btns .btn:hover {
  text-decoration: underline;
}
.rela {
  flex: 0 0 auto;
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid var(--light10);
}
.rela .tit {
  margin-bottom: 10px;
}
.rela .tit .tl {
  flex: 0 0 auto;
  color: var(--light50);
  line-height: 1;
}
.rela .tit .t {
  color: var(--light100);
  font-size: 14px;
  margin-right: 10px;
}
.rela .empty {
  padding: 10px;
}
.rela .empty .p {
  margin-top: 5px;
}
.sliderBtns {
  flex: 0 0 auto;
}
.sliderBtns .btn {
  flex: 0 0 auto;
  margin-left: 12px;
  width: 24px;
  height: 24px;
  font-size: 0;
  line-height: 24px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  background: var(--light10);
  transition: 0.3s;
}
.sliderBtns .btn img {
  width: 4px;
  transition: 0.3s;
  opacity: 0.5;
}
.sliderBtns .btn:hover {
  background: var(--light20);
}
.sliderBtns .btn:hover img {
  opacity: 1;
}
.sliderBtns .btn.swiper-button-disabled {
  background: var(--light10);
  cursor: default;
}
.sliderBtns .btn.swiper-button-disabled img {
  opacity: 0.5;
}
.sliderBtns .btn.next {
  transform: rotate(180deg);
}
.rela .swiper-slide {
  width: auto;
  padding: 8px;
  border-radius: 6px;
  width: 120px;
  height: auto;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: 0.3s;
}
.rela .swiper-slide:hover {
  background: rgba(255, 255, 255, 0.1);
}
.rela .img {
  padding: 0 8px;
  font-size: 0;
  line-height: 85px;
  height: 85px;
}
.rela .img img {
  max-height: 100%;
  max-width: 100%;
}
.rela .it {
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--light70);
  transition: 0.3s;
}
.rela .swiper-slide:hover .it {
  color: var(--light100);
}
.rela .del {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  z-index: 5;
  opacity: 0;
}
.rela .swiper-slide:hover .del {
  opacity: 1;
}
.loginForm {
  width: 278px;
  padding-top: 20px;
  max-width: 100%;
}
.loginForm .tit {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.loginTab {
  justify-content: center;
  margin-bottom: 30px;
}
.loginTab .i {
  flex: 0 0 auto;
  cursor: pointer;
  font-size: 14px;
  margin: 0 18px;
  color: var(--light50);
  transition: 0.3s;
  font-weight: 400;
  position: relative;
  padding-bottom: 6px;
}
.loginTab .i:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 18px;
  margin-left: -9px;
  height: 3px;
  background: var(--yellow);
  border-radius: 3px;
  opacity: 0;
}
.loginTab .i.act {
  color: var(--light100);
}
.loginTab .i.act:after {
  opacity: 1;
}
.loginForm .line {
  height: 40px;
  border: 1px solid var(--light15);
  border-radius: 4px;
  margin-bottom: 20px;
  position: relative;
}
.loginForm .ltp {
  margin-top: -7px;
  line-height: 1.2;
  margin-bottom: 25px;
  color: var(--light50);
  word-break: break-word;
}
.loginForm .line .prefix {
  flex: 0 0 auto;
  width: 40px;
  text-align: center;
  font-size: 0;
}
.loginForm .line .in {
  flex: 1 1 auto;
  overflow: hidden;
  color: #fff;
}
.loginForm .line input {
  width: 100%;
  font-size: inherit;
  font-family: inherit;
  color: var(--light100) !important;
  background-color: transparent !important;
  outline: none;
  border: none;
  height: 38px;
}
.loginForm .line input:-internal-autofill-selected {
  background-color: light-dark(transparent, transparent) !important;
  box-shadow: 0 0 0 1000px var(--loginbg) inset !important;
  -webkit-text-fill-color: var(--light100) !important;
}
.loginForm .line:hover {
  border-color: var(--light40);
}
.loginForm .line.er {
  border-color: var(--red);
}
.loginForm .line:focus-within {
  border-color: var(--blue);
}
.loginForm .line .btn {
  flex: 0 0 auto;
  line-height: 36px;
  cursor: pointer;
  color: rgb(39, 143, 255);
  padding: 0 16px;
  overflow: hidden;
}
.loginForm .line .btn:hover {
  text-decoration: underline;
}
.loginForm .line .btn.gray {
  color: var(--light50);
  cursor: default;
  text-decoration: none !important;
}
.loginForm .line .eye {
  flex: 0 0 auto;
  width: 40px;
  line-height: 38px;
  font-size: 0;
  text-align: center;
  cursor: pointer;
  opacity: 0.5;
}
.loginForm .line .eye:hover {
  opacity: 1;
}
.loginForm .line .err {
  position: absolute;
  left: 100%;
  width: 12em;
  padding-left: 1em;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: flex-start;
  color: rgb(244, 37, 37);
  text-shadow: none !important;
}
.loginForm .btns {
  margin-top: 20px;
}
.loginForm .baseBtn {
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  background: var(--mainLinear);
  display: block;
}
.loginForm .baseBtn.nobg {
  background: none;
  color: var(--light100) !important;
  margin-top: 10px;
  font-size: 12px;
}
.loginForm .baseBtn.nobg:before {
  display: none;
}
.loginForm .baseBtn.nobg:hover {
  text-decoration: underline;
}
.phonePre {
  flex: 0 0 auto;
  position: relative;
  margin-right: 5px;
}
.phonePre .cur {
  line-height: 38px;
  position: relative;
  padding-right: 16px;
  width: 46px;
  cursor: pointer;
}
.phonePre .cur:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  top: 50%;
  margin-top: -5px;
  transform: rotate(45deg);
  right: 5px;
  border-color: var(--light100);
}
.phonePre .drp {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 110px;
  background: var(--dropbg);
  color: var(--light70);
  border-radius: 6px;
  line-height: 2;
  overflow: hidden;
  max-height: 0;
  z-index: 50;
  padding: 0 12px;
  margin-top: 4px;
}
.phonePre .drp.act {
  max-height: 20em;
  overflow: hidden;
  transition: 0.3s;
  padding: 12px;
}
.phonePre .drp .op {
  line-height: 1.3;
  cursor: pointer;
  margin-bottom: 12px;
}
.phonePre .drp .op:last-child {
  margin-bottom: 0;
}
.phonePre .drp .op .ic {
  opacity: 0;
  flex: 0 0 auto;
  margin-right: 5px;
}
.phonePre .drp .op .lb {
  flex: 1 0 auto;
  overflow: hidden;
  white-space: nowrap;
}
.phonePre .drp .op.on {
  color: var(--light100);
}
.phonePre .drp .op.on .ic {
  opacity: 1;
}
.aggree {
  justify-content: flex-start;
  margin-bottom: 8px;
  align-items: flex-start;
}
.aggree .icheck i {
  border-radius: 0;
  display: block;
}
.aggree .p {
  flex: 1 1 auto;
  overflow: hidden;
  padding-left: 10px;
  color: var(--light70);
}
.aggree .p a {
  color: var(--light100);
}
.aggree .p a:hover {
  text-decoration: underline;
}
.aggreeTp {
  text-align: center;
  font-weight: 700;
  border-bottom: 1px solid var(--light10);
  padding-bottom: 30px;
  color: var(--light50);
  padding-top: 10px;
}
.aggreeTp a {
  color: var(--light100);
}
.aggreeTp a:hover {
  text-decoration: underline;
}
.inputTip {
  position: absolute;
  background: var(--boxBg);
  z-index: 10;
  left: 0;
  bottom: 100%;
  margin-bottom: 2px;
  padding: 10px;
  width: 100%;
  border-radius: 4px;
  line-height: 1.8;
  color: var(--light70);
  display: none;
}
.inputTip li {
  list-style-type: none;
  position: relative;
  padding-left: 10px;
}
.inputTip li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  background: var(--light40);
  margin-top: -2px;
}
.inputTip li.er {
  color: var(--red);
}
.inputTip li.er:before {
  background: var(--red);
}
.inputTip .y {
  display: none;
}
.inputTip .n {
  display: block;
}
.loginForm .line:focus-within .inputTip {
  display: block;
}
input[type='password']::-ms-reveal {
  display: none;
}
.toast {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}
.toast .tostBd {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast .inbox {
  display: flex;
  align-items: center;
  border: 1px solid var(--light15);
  background: var(--loginbg);
  border-radius: 6px;
  min-height: 44px;
  padding: 14px 20px;
  min-width: 268px;
  justify-content: center;
  transition: 0.16s;
  opacity: 0;
}
.toast .inbox .ico {
  flex: 0 0 auto;
  width: 20px;
  margin-right: 8px;
}
.toast .inbox .ico image {
  display: block;
  width: 100%;
}
.toast.act {
  opacity: 1;
  visibility: visible;
}
.toast.act .inbox {
  opacity: 1;
}
.loginForm .line.disabled {
  color: var(--light50);
  pointer-events: none;
}
.loginForm .line.disabled input {
  color: var(--light50) !important;
}
.loginForm .line.disabled .phonePre .cur:after {
  border-color: var(--light50);
}
.loginForm .line.disabled .phonePre .drp {
  display: none !important;
}
.wramtp {
  font-weight: 700;
}
.popmsk {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.tip a:visited {
  color: var(--light100);
  text-decoration: underline;
}
.fixloading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
}
.loading-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.loading-inner .ico {
  width: 24px;
  animation: spin 1s linear infinite;
}
.loading-inner .ico img {
  display: block;
  width: 100%;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.hovItem {
  position: relative;
}
.hovItem .hov {
  position: absolute;
  left: 90%;
  top: 90%;
  background: var(--appbg);
  font-size: 12px;
  white-space: nowrap;
  line-height: 1.8;
  padding: 0 5px;
  border-radius: 2px;
  color: var(--light100);
  pointer-events: none;
  display: none;
  border: 1px solid var(--light30);
}
.hovItem:hover .hov {
  display: block;
}
/* 自定义悬浮样式 */
[title]:hover {
  cursor: pointer;
}
/* 自定义tooltip样式 */
.custom-tooltip {
  position: fixed;
  background: var(--appbg);
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--light100);
  border: 1px solid var(--light30);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  line-height: 1.5;
  max-width: 160px;
  width: fit-content;
}
.custom-tooltip.show {
  opacity: 1;
}
.appBack .usr .ur .img,
.appBack .usr .ur img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.icart .btn:hover {
  background: var(--mainLinear);
}
.icart .ico {
  cursor: pointer;
}
.ailabs .item .ilike .ico.on {
  background: var(--success);
}
.iaudio .bd .ico {
  height: 22px;
  border-radius: 50%;
  background: var(--light10);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
}
.iaudio .bd .ico.pause {
  background: var(--red);
}
.iaudio .bd {
  border-radius: 40px;
  padding: 0 5px 0 10px;
  flex-direction: row-reverse;
}
.roleInfo .iaudio .bd {
  min-width: 0;
}
.tip a:visited,
.tip a:hover {
  color: var(--light100);
  text-decoration: underline;
}
.ailabs .item {
  border: 2px solid var(--boxBg);
  transition: 0.3s;
}
.ailabs .item:hover {
  border-color: var(--light20);
}
.cartList .item .vp {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}
.cartList .item .price {
  font-size: 12px;
  color: #eea07a;
  margin-top: 6px;
}
.ailabs .item .desc {
  display: inline-block;
  max-width: 100%;
}
/* 20251113 */
.ailabs .item .ilike .ico > div,
.iaudio .bd .ico > div {
  opacity: 0.7;
  transition: 0.3s;
}
.ailabs .item .ilike .ico:hover > div,
.iaudio .bd .ico:hover > div {
  opacity: 1;
}
.ailabs .item .addcart img {
  opacity: 0.7;
  transition: 0.3s;
}
.ailabs .item .addcart:hover img {
  opacity: 1;
}
.iaudio .bd .ico.pause > div {
  opacity: 1;
}
.aicategory .i {
  transition: 0.3s;
}
.aicategory .i:hover {
  border-color: var(--light25);
  color: var(--light100);
}
.ailabs .item .addcart.disabled {
  pointer-events: none;
}
.ailabs .item .addcart.disabled img {
  opacity: 0.3;
  pointer-events: none;
}
.tip .visited,
.tip .visited a {
  color: var(--light100);
  text-decoration: underline;
}
.ailabs .item .baseBtn.gray:before,
.ailabs .item .baseBtn.disabled:before {
  opacity: 0;
}
.ailabs .item:hover {
  background: none;
}
.icart .btn {
  background: var(--mainLinear);
}
.buySwiper {
  flex: 1 1 auto;
  overflow: hidden;
}
.buySwiper .swiper-container {
  height: 20px;
}
.buySwiper .item {
  line-height: 1;
  justify-content: flex-start;
  flex: 1 1 auto;
  overflow: hidden;
  height: 20px;
}
.buySwiper .item .img {
  font-size: 0;
  flex: 0 0 auto;
  margin-right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
}
.buySwiper .item .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.buySwiper .item .nick {
  color: var(--light50);
  flex: 0 0 auto;
  padding-right: 5px;
}
.buySwiper .item .p {
  color: var(--light80);
  padding-right: 5px;
}
.buySwiper .item .p2 {
  color: var(--blue);
}
.payContainer .payInfo .tpp {
  margin-top: 12px;
  color: var(--light50);
}
.payContainer .payInfo .buySwiper {
  padding-top: 12px;
  border-top: 1px dashed var(--light30);
  margin-top: 12px;
}
.payContainer .payInfo .tp {
  margin-bottom: 12px;
}
.roleBox {
  height: 100%;
}
.roleBox .roleInfo {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.roleTop {
  flex: 0 0 auto;
  width: 100%;
}
.roleInfo .idesc {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.roleDesc {
  flex: 1 1 auto;
  margin-top: 20px;
  border: 1px solid var(--light15);
  border-radius: 12px;
  position: relative;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roleDesc .dt {
  font-size: 12px;
  position: absolute;
  left: 12px;
  top: -15px;
  background: var(--boxBg);
  z-index: 1;
  padding: 0 10px;
  color: var(--light50);
  padding-left: 25px;
  padding-top: 7px;
  line-height: 1;
}
.roleDesc .dt:before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  width: 100%;
  height: 19px;
  background: url(../images/icon-ttit.svg) no-repeat left center;
  background-size: contain;
  z-index: -1;
}
.roleDesc .dp {
  color: var(--light100);
  font-size: 12px;
  width: 100%;
  line-height: 1.5;
}
.roleDesc:after {
  content: '';
  position: absolute;
  right: 6px;
  bottom: 4px;
  left: 6px;
  height: 6px;
  background: url(../images/icon-lines.svg) no-repeat right center;
  background-repeat: contain;
}
.icart .ico {
  background: linear-gradient(180deg, rgba(209, 209, 226, 1), rgba(240, 240, 246, 1));
  border: 1px solid var(--light100);
  z-index: 10;
}
.icart .ico:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  transition: 0.3s;
  opacity: 0;
  z-index: -1;
}
.icart .ico:hover:after {
  opacity: 1;
}
.appBack .back:not(.def) {
  border: 1px solid var(--light50);
  font-weight: bold;
  height: 40px;
  width: 88px;
}
.appBack .back:not(.def) .ico {
  width: 20px;
  height: 20px;
  background: var(--light100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 购物车数量变化动画 */
.icart .num {
  transition: all 0.3s ease;
}
.icart .num.add-animation {
  animation: cartNumChange 0.5s ease;
}
@keyframes cartNumChange {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
    color: var(--red);
  }
  100% {
    transform: scale(1);
  }
}
.ailabs .item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.icart .btn {
  position: relative;
  z-index: 5;
  overflow: hidden;
}
.icart .btn:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);
  z-index: -1;
  opacity: 0;
  transition: 0.3s;
}
.icart .btn:hover:before {
  opacity: 1;
}
.addcart i {
  position: absolute;
  width: 20px;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  background: var(--red);
  color: var(--light100);
  font-style: normal;
  right: -10px;
  top: -10px;
  transform: scale(0.6);
}
.packages .i {
  display: flex;
  flex-direction: column;
}

.packages .i .price {
  flex: 1 1 auto;
  width: 100%;
}
/* theme light */
html[data-theme='light'] {
  color: rgb(23, 23, 27);
  --appbg: rgb(240, 240, 245);
  --loginbg: rgba(240, 240, 245);
  --boxBg: rgb(255, 255, 255);
  --light7: rgba(23, 23, 27, 0.07);
  --light10: rgba(23, 23, 27, 0.1);
  --light15: rgba(23, 23, 27, 0.15);
  --light20: rgba(23, 23, 27, 0.2);
  --light25: rgba(23, 23, 27, 0.25);
  --light30: rgba(23, 23, 27, 0.3);
  --light40: rgba(23, 23, 27, 0.4);
  --light50: rgba(23, 23, 27, 0.5);
  --light70: rgba(23, 23, 27, 0.7);
  --light80: rgba(23, 23, 27, 0.8);
  --light100: rgba(23, 23, 27, 1);
  --dark30: rgba(0, 0, 0, 0.3);
  --dark40: rgba(0, 0, 0, 0.4);
  --dark70: rgba(0, 0, 0, 0.7);
  --red: rgb(244, 37, 37);
  --darkred: rgba(244, 37, 37, 0.3);
  --yellow: rgb(246, 180, 54);
  --blue: rgb(67, 130, 255);
  --brown: rgb(107, 66, 25);
  --price: rgb(180, 117, 51);
  --baseLinear: linear-gradient(90deg, rgb(255, 213, 124), rgb(255, 231, 180));
  --mainLinear: linear-gradient(90deg, rgb(246, 180, 54), rgb(255, 155, 31));
  --success: rgb(31, 196, 111);
  --dropbg: #dadadf;
}
html[data-theme='light'] [data-theme='dark'] {
  display: none !important;
}
html[data-theme='light'] [data-theme='light'] {
  display: block !important;
}
html[data-theme='light'] #app {
  color: rgb(23, 23, 27);
}
html[data-theme='light'] .appHead .appTitle .logo {
  background-image: url(../images/logo2.svg);
}
html[data-theme='light'] #app:before {
  background-image: url(../images/backgroundIcon2.png);
}
html[data-theme='light'] .aicategory .i.cur {
  background: rgb(41, 41, 48);
  color: #fff;
}
html[data-theme='light'] .ailabs .item .desc {
  opacity: 1;
  color: var(--light70);
}
html[data-theme='light'] .iaudio .bd {
  background: rgb(237, 237, 242);
}
html[data-theme='light'] .icart .span {
  color: #fff;
}
html[data-theme='light'] .cartList .item {
  background: rgb(243, 243, 247);
}
html[data-theme='light'] .cartBody .cartl:before {
  opacity: 0.2;
}
html[data-theme='light'] .icheck i + span {
  color: rgba(23, 23, 27, 0.5) !important;
}
html[data-theme='light'] .tip {
  color: var(--light50);
}
html[data-theme='light'] .packages .i {
  background: rgb(254, 250, 238);
  border: 1px solid rgb(240, 201, 146);
}
html[data-theme='light'] .packages .i .it {
  color: var(--light100);
}
html[data-theme='light'] .packages .i .price {
  color: var(--light100);
}
html[data-theme='light'] .packages .i .currentPrice {
  color: rgb(180, 117, 51);
}
html[data-theme='light'] .packages .i .bot {
  color: rgb(180, 117, 51);
}
html[data-theme='light'] .packages .i .popular {
  color: #fff;
}
html[data-theme='light'] .paytab {
  background: rgb(233, 233, 238);
}
html[data-theme='light'] .paytab .i {
  color: var(--light70);
}
html[data-theme='light'] .paytab .i.on {
  background: #fff;
  color: var(--light100);
}
html[data-theme='light'] .payContainer .payCode {
  border: 1px solid rgba(0, 0, 0, 0.15);
}
html[data-theme='light'] .roleInfo .idesc:before {
  background-image: url(../images/icon-tl-black.svg);
}
html[data-theme='light'] .roleInfo .idesc:after {
  background-image: url(../images/icon-tr-black.svg);
}
html[data-theme='light'] .icart .ico {
  background: #fff;
  border: 2px solid rgba(23, 23, 27, 0.15);
  line-height: 46px;
}
html[data-theme='light'] .icart .ico .num {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
html[data-theme='light'] .winpop {
  background: rgba(255, 255, 255, 0.97);
}
.mcontent.flex {
  flex-direction: column;
}
.mcontent.flex > .box {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}