.pop11 .pop4-fw-list, .pop9 .skill-list, .pop7 .skill-scroll, .pop5 .pop5-lj-list, .pop4 .skill-list, .pop3 .ky_list, .pop2 .tab_box .tab_left, .pop-content-box {
  overflow-x: hidden;
  overflow-y: auto;
}
.pop11 .pop4-fw-list::-webkit-scrollbar, .pop9 .skill-list::-webkit-scrollbar, .pop7 .skill-scroll::-webkit-scrollbar, .pop5 .pop5-lj-list::-webkit-scrollbar, .pop4 .skill-list::-webkit-scrollbar, .pop3 .ky_list::-webkit-scrollbar, .pop2 .tab_box .tab_left::-webkit-scrollbar, .pop-content-box::-webkit-scrollbar {
  width: 0.08rem;
  height: 0.08rem;
}
.pop11 .pop4-fw-list::-webkit-scrollbar-thumb, .pop9 .skill-list::-webkit-scrollbar-thumb, .pop7 .skill-scroll::-webkit-scrollbar-thumb, .pop5 .pop5-lj-list::-webkit-scrollbar-thumb, .pop4 .skill-list::-webkit-scrollbar-thumb, .pop3 .ky_list::-webkit-scrollbar-thumb, .pop2 .tab_box .tab_left::-webkit-scrollbar-thumb, .pop-content-box::-webkit-scrollbar-thumb {
  border-radius: 0.04rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d6a738), to(#f6d380));
  background-image: linear-gradient(to bottom, #d6a738, #f6d380);
}
.pop11 .pop4-fw-list::-webkit-scrollbar-track, .pop9 .skill-list::-webkit-scrollbar-track, .pop7 .skill-scroll::-webkit-scrollbar-track, .pop5 .pop5-lj-list::-webkit-scrollbar-track, .pop4 .skill-list::-webkit-scrollbar-track, .pop3 .ky_list::-webkit-scrollbar-track, .pop2 .tab_box .tab_left::-webkit-scrollbar-track, .pop-content-box::-webkit-scrollbar-track {
  -webkit-box-shadow: 0 0 0 1px rgba(134, 120, 95, 0.46) inset;
          box-shadow: 0 0 0 1px rgba(134, 120, 95, 0.46) inset;
  background-color: rgba(79, 70, 51, 0.8);
}

.pop-mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.pop {
  position: fixed;
  z-index: 99;
  background-color: #212121;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.pop.center {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pop *,
.pop ::before,
.pop ::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.pop .pop-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pop .pop-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0 0 0 0.02rem #5a503e inset;
          box-shadow: 0 0 0 0.02rem #5a503e inset;
  clip-path: polygon(0% 0.15rem, 0.15rem 0.15rem, 0.15rem 0%, calc(100% - 0.15rem) 0%, calc(100% - 0.15rem) 0.15rem, 100% 0.15rem, 100% calc(100% - 0.15rem), calc(100% - 0.15rem) calc(100% - 0.15rem), calc(100% - 0.15rem) 100%, 0.15rem 100%, 0.15rem calc(100% - 0.15rem), 0% calc(100% - 0.15rem));
}
.pop .pop-border::after {
  content: "";
  position: absolute;
  top: -0.04rem;
  left: 50%;
  z-index: 2;
  width: 0.77rem;
  height: 0.1rem;
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/pop/pop-adorn.png);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.pop .pop-border i {
  position: absolute;
  width: 0.15rem;
  height: 0.15rem;
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/m/pop/pop-angle.png);
}
.pop .pop-border i:nth-of-type(1) {
  top: 0;
  left: 0;
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/m/pop/pop-angle-top.png);
}
.pop .pop-border i:nth-of-type(2) {
  top: 0;
  right: 0;
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/m/pop/pop-angle-top.png);
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.pop .pop-border i:nth-of-type(3) {
  bottom: 0;
  left: 0;
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/m/pop/pop-angle-bottom.png);
}
.pop .pop-border i:nth-of-type(4) {
  bottom: 0;
  right: 0;
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/m/pop/pop-angle-bottom.png);
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.pop .pop-close {
  position: absolute;
  top: 0.265rem;
  right: 0.3rem;
  z-index: 2;
  width: 0.24rem;
  height: 0.22rem;
  background-image: url("https://game.gtimg.cn/images/fz/cp/a20250320LA/m/pop/pop-close.png");
}
.pop .pop-close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%) scale(2);
          transform: translate(-50%, -50%) scale(2);
}
.pop .pop-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
.pop .pop-title {
  width: 100%;
  height: 0.75rem;
  line-height: 0.75rem;
  border-bottom: 1px solid rgba(177, 210, 230, 0.1);
  font-size: 0.28rem;
  text-align: center;
  color: #ffdca7;
}
.pop .pop-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-height: calc(100% - 0.75rem);
}

.pop-content-bg {
  line-height: 1;
  padding: 0.15rem;
  background-color: #121212;
}

.pop-content-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 0.2rem;
  background-color: #121212;
}

.icon-tier-sp, .pop6 .pop4-addSkill-list .skill-tier span {
  background: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/skill-icon/icon-tier-sp.png);
  background-size: 1.51rem 0.45rem;
}

.pop-jia-btn {
  position: relative;
  width: 0.38rem;
  height: 0.38rem;
  padding: 1px;
  border: 1px solid #302c24;
  border-radius: 50%;
  background-color: #302c24;
  background-clip: content-box;
  cursor: pointer;
}
.pop-jia-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.03rem;
  height: 0.2rem;
  background-color: #c8b58d;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pop-jia-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.2rem;
  height: 0.03rem;
  background-color: #c8b58d;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pop-jia-btn:hover, .pop-jia-btn.active {
  border: 1px solid #f1df89;
}
.pop-jia-btn img {
  position: relative;
  z-index: 2;
}

.pop-bottom-btn-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.08rem;
  margin-top: 0.25rem;
}
.pop-bottom-btn-box a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 0.84rem;
  height: 0.24rem;
  line-height: 0.24rem;
  font-size: 0.12rem;
  color: #c8b58d;
  border: 1px solid #63615e;
  background-color: #231f16;
  cursor: pointer;
}
.pop-bottom-btn-box a:hover {
  border-color: #f2e9c3;
  color: #fff;
  background-color: #2a2418;
}

.card-item {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0.03rem;
  /* &.highlight { filter: brightness(1.5); } */
}
.card-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.card-item.level-0::before {
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/pop/card_level_0.png);
}
.card-item.level-1::before {
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/pop/card_level_1.png);
}
.card-item.level-2::before {
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/pop/card_level_2.png);
}
.card-item.level-3::before {
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/pop/card_level_3.png);
}
.card-item.level-4::before {
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/pop/card_level_4.png);
}

.pop1 {
  bottom: 0;
  left: 0;
  width: 7.5rem;
  height: 11rem;
}
.pop1 .card-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
.pop1 .component-icon-close {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
}
.pop1 .p_txt2 {
  position: relative;
  height: 0.35rem;
  line-height: 0.35rem;
  font-size: 0.24rem;
  text-shadow: 0 0.03rem 0.05rem rgba(0, 0, 0, 0.5);
  color: #ffdca7;
}
.pop1 .btn-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 50%;
  right: 0;
  height: 0.35rem;
  padding: 0 0.2rem;
  font-size: 0.22rem;
  color: #c8b58d;
  border: 1px solid #f2e9c3;
  background-color: #342b1b;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
}
.pop1 .card_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.pop1 .card_list.has-backdrop {
  padding: 0.2rem 0.3rem;
  border-bottom: 1px solid rgba(177, 210, 230, 0.1);
}
.pop1 .card_list.has-backdrop li {
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/pop/card_bg.png);
}
.pop1 .card_list li {
  position: relative;
  width: 1.1rem;
  height: 1.65rem;
  -webkit-box-shadow: 0 0.03rem 0.05rem rgba(0, 0, 0, 0.5);
          box-shadow: 0 0.03rem 0.05rem rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.pop1 .card_list li img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pop1 .card_list .card-baoshi-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.05rem;
  position: absolute;
  bottom: 0.15rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.pop1 .card_list .card-baoshi-box .icon-baoshi-y1 {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
.pop1 .card_list .card-baoshi-box .icon-baoshi-y1.active {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}
.pop1 .card_list .tag-yzb {
  position: absolute;
  bottom: 0.1rem;
  left: 0;
  width: 0.85rem;
  height: 0.3rem;
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/pop/tag-yzb.png);
}
.pop1 .card-scroll {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-top: 0.3rem;
  overflow-y: auto;
}
.pop1 .card-scroll .card-group-row {
  position: relative;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(177, 210, 230, 0.1);
}
.pop1 .card-scroll .card-group-row + .card-group-row {
  margin-top: 0.3rem;
}
.pop1 .card-scroll .card-group {
  width: 6.9rem;
  margin: 0 auto;
}
.pop1 .card-scroll .card_list {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-top: 0.15rem;
}
.pop1 .card-scroll .card_list li {
  position: relative;
  width: 0.9rem;
  height: 1.35rem;
}
.pop1 .card-scroll .card_list li:not(:last-of-type) {
  margin-right: 0.1rem;
}
.pop1 .card-scroll .card_list li img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pop1 .card-scroll .card_list .image {
  position: relative;
  width: 100%;
  height: 100%;
}
.pop1 .card-scroll .card_list .name {
  display: none;
  position: absolute;
  top: calc(100% + 0.1rem);
  left: 50%;
  line-height: 1;
  font-size: 0.2rem;
  color: #8f826f;
  white-space: nowrap;
  -webkit-transform: translateX(-50%) scale(0.5);
          transform: translateX(-50%) scale(0.5);
  -webkit-transform-origin: center top;
          transform-origin: center top;
}

.pop2 {
  bottom: 0;
  left: 0;
  width: 7.5rem;
  height: 11rem;
}
.pop2 .pop-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.pop2 .pop_cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  z-index: 2;
}
.pop2 .pop_tab_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0.3rem 0;
}
.pop2 .pop_tab_nav li {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 0.58rem;
  line-height: 0.58rem;
  border: 1px solid #4a4a49;
  font-size: 0.24rem;
  text-align: center;
  color: #8a7a5a;
  background-color: #221c11;
}
.pop2 .pop_tab_nav li.on {
  border: 1px solid #f2e9c3;
  color: #fff;
  background-color: rgba(52, 43, 27, 0.7);
}
.pop2 .pop_tab_con {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: calc(100% - 0.58rem - 0.6rem);
}
.pop2 .pop_tab_con img {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
.pop2 .pop_tab_con .jh_list li:hover img {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}
.pop2 .pop_tab_con .jh_list li.on img {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}
.pop2 .tab_box {
  height: 100%;
}
.pop2 .tab_box .box_con {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  height: 100%;
}
.pop2 .tab_box .tab_left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-top: 1px solid #3f3d38;
  margin-bottom: 0.3rem;
  padding: 0.3rem;
}
.pop2 .tab_box .tab_left li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  text-align: center;
}
.pop2 .tab_box .tab_left li .item + .item {
  margin-top: 0.15rem;
}
.pop2 .tab_box .tab_left img {
  display: none;
}
.pop2 .tab_box .tab_left p {
  line-height: 1;
  font-size: 0.22rem;
  white-space: nowrap;
  color: #c1ae88;
}
.pop2 .tab_box .tab_left p span {
  color: #c1ae88;
}
.pop2 .stage {
  line-height: 1;
  margin-bottom: 0.2rem;
  font-size: 0.22rem;
  color: #ffdca7;
}
.pop2 .tab_right {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0.3rem 0.25rem;
}
.pop2 .tab_right .right_top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.pop2 .tab_right .right_top .pop_tips {
  font-size: 0.22rem;
  color: #878273;
}
.pop2 .tab_right .right_top .right_top_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.pop2 .tab_right .right_top .right_top_btn p {
  margin-right: 0.25rem;
  font-size: 0.12rem;
  color: #c8b58d;
}
.pop2 .tab_right .right_top .right_top_btn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 0.35rem;
  padding: 0 0.2rem;
  font-size: 0.22rem;
  color: #c8b58d;
  border: 1px solid #f2e9c3;
  background-color: #342b1b;
  cursor: pointer;
}
.pop2 .tab_right .right_list {
  position: relative;
}
.pop2 .tab_right .right_list .list_li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  width: 100%;
  cursor: pointer;
}
.pop2 .tab_right .right_list .list_li:not(:first-of-type) {
  margin-top: 0.15rem;
}
.pop2 .tab_right .right_list .list_li.on .grade {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}
.pop2 .tab_right .right_list .grade {
  position: relative;
  width: 1.3rem;
  height: 1.29rem;
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/pop/grade.png);
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
.pop2 .tab_right .right_list .grade .grade_txt1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.4rem 0.3rem 0.3rem;
  width: 1.3rem;
  height: 1.29rem;
  font-weight: bold;
  font-size: 0.34rem;
  line-height: 0.34rem;
  text-align: center;
  color: #bebebe;
  color: transparent;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fdf7e5), to(#e9cd73));
  background-image: linear-gradient(to bottom, #fdf7e5, #e9cd73);
  -webkit-background-clip: text;
          background-clip: text;
}
.pop2 .tab_right .right_list .grade .grade_txt2 {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0.6rem;
  height: 0.24rem;
  line-height: 0.24rem;
  font-size: 0.2rem;
  text-align: center;
  color: #f1df89;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(10%, transparent), color-stop(#4e3d1c), color-stop(90%, transparent));
  background-image: linear-gradient(to right, transparent 10%, #4e3d1c, transparent 90%);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.pop2 .tab_right .right_bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.2rem;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 0.85rem;
  padding: 0 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pop2 .tab_right .right_bottom a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 1.14rem;
  height: 0.37rem;
  line-height: 0.37rem;
  font-size: 0.14rem;
  color: #c8b58d;
  border: 1px solid #63615e;
  background-color: #231f16;
  cursor: pointer;
}
.pop2 .tab_right .right_bottom a:hover {
  border-color: #f2e9c3;
  color: #fff;
  background-color: #2a2418;
}
.pop2 .sp1 {
  background: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/pop/pop_sp1.png) no-repeat;
  background-size: 3rem 5rem;
}
.pop2 .right_list .jh_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.12rem;
  width: 5.4rem;
  height: 1.18rem;
}
.pop2 .tab_box2 .right_list .jh_list {
  display: grid;
  grid-template-areas: "passive1 passive2 passive3 passive4 passive5 passive6";
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.pop2 .tab_box2 .right_list .jh_list .passive1 {
  grid-area: passive1;
}
.pop2 .tab_box2 .right_list .jh_list .passive2 {
  grid-area: passive2;
}
.pop2 .tab_box2 .right_list .jh_list .passive3 {
  grid-area: passive3;
}
.pop2 .tab_box2 .right_list .jh_list .passive4 {
  grid-area: passive4;
}
.pop2 .tab_box2 .right_list .jh_list .passive5 {
  grid-area: passive5;
}
.pop2 .tab_box2 .right_list .jh_list .passive6 {
  grid-area: passive6;
}
.pop2 .expend_num {
  position: absolute;
  bottom: 0.05rem;
  left: 50%;
  font-size: 0.2rem;
  color: #fff;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.pop2 .right_list .jh_list li.passive3::before,
.pop2 .right_list .jh_list li.passive4::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: -0.13rem;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 0.02rem;
  height: 0.26rem;
  background-color: #494335;
}
.pop2 .right_list .list_li:nth-of-type(1) .jh_list li.passive3::before,
.pop2 .right_list .list_li:nth-of-type(1) .jh_list li.passive4::before,
.pop2 .right_list .list_li:nth-of-type(1) .jh_list li.passive3::after,
.pop2 .right_list .list_li:nth-of-type(1) .jh_list li.passive4::after {
  display: none;
}
.pop2 .jh_list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: 0.8rem;
  height: 1.18rem;
}
.pop2 .jh_list li.on .jh_box {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}
.pop2 .jh_list li.on .jh_txt {
  border: 1px solid #f2e9c3;
  color: #fff;
}
.pop2 .jh_list .jh_box {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  margin-bottom: 0.1rem;
  padding: 0.05rem;
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/pop/jh_box.png);
  -webkit-filter: grayscale(1) brightness(0.8);
          filter: grayscale(1) brightness(0.8);
}
.pop2 .jh_list .jh_box img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.pop2 .jh_list .jh_txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 0.8rem;
  height: 0.28rem;
  border: 1px solid rgba(99, 97, 94, 0.25);
  border-radius: 0.14rem;
  font-size: 0.2rem;
  color: #c8b58d;
  background-color: #2e281d;
}

.pop3 {
  bottom: 0;
  left: 0;
  width: 7.5rem;
  height: 11rem;
}
.pop3 .pop-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.pop3 .ky-group {
  position: relative;
  width: 6.9rem;
  margin: 0 auto;
  padding: 0.4rem 0;
  border-bottom: 1px solid #3f3d38;
}
.pop3 .ky-title {
  position: relative;
  line-height: 1;
  margin-bottom: 0.25rem;
  font-size: 0.26rem;
  color: #ffdca7;
}
.pop3 .ky-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.35rem;
  position: relative;
  width: 100%;
}
.pop3 .ky-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 1.56rem;
}
.pop3 .ky-list p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
  margin-top: 0.2rem;
  font-size: 0.22rem;
  color: #ffdca7;
}
.pop3 .image {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  background: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/icon/icon-talent-bg.png) no-repeat center;
  background-size: cover;
}
.pop3 .image img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pop3 .image .icon-close-circle {
  position: absolute;
  top: 0;
  right: 0;
}
.pop3 .empty {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0.05rem;
  border: 1px solid rgba(232, 224, 179, 0.25);
  border-radius: 50%;
  background-color: rgba(232, 224, 179, 0.25);
  background-clip: content-box;
}
.pop3 .empty.active {
  border: 1px solid rgba(255, 227, 183, 0.5);
  background-color: rgba(255, 227, 183, 0.5);
}
.pop3 .empty.active::before, .pop3 .empty.active::after {
  background-color: #ffe3b7;
}
.pop3 .empty::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.06rem;
  border-radius: 0.03rem;
  background-color: #c8b58d;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pop3 .empty::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.06rem;
  height: 0.5rem;
  border-radius: 0.03rem;
  background-color: #c8b58d;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pop3 .ky-panel {
  position: relative;
  width: 6.9rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-height: calc(100% - 2.88rem - 2.88rem - 0.4rem - 0.4rem);
  margin-top: 0.4rem;
}
.pop3 .ky_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.35rem;
  height: 100%;
  margin-right: -0.2rem;
}
.pop3 .ky_list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.pop3 .ky_list li.on p {
  color: #ffdca7;
}
.pop3 .ky_list p {
  line-height: 1;
  margin-top: 0.05rem;
  font-size: 0.22rem;
  color: #878273;
}

.pop4 {
  bottom: 0;
  left: 0;
  width: 7.5rem;
  height: 11.25rem;
}
.pop4 .pop-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
}
.pop4 .skill-tool {
  position: relative;
  padding: 0.2rem;
  padding-bottom: 0.4rem;
  height: 1.32rem;
}
.pop4 .tips {
  line-height: 1;
  margin-top: 0.2rem;
  font-size: 0.24rem;
  color: #716d61;
}
.pop4 .custom-checkbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
  font-size: 0.24rem;
  color: #716d61;
}
.pop4 .custom-checkbox input[type=checkbox] {
  display: none;
}
.pop4 .custom-checkbox input[type=checkbox]:checked + .checkmark {
  background-color: transparent;
}
.pop4 .custom-checkbox input[type=checkbox]:checked + .checkmark:after {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.04rem;
  width: 0.06rem;
  height: 0.16rem;
  border: solid #716d61;
  border-width: 0 0.02rem 0.02rem 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.pop4 .custom-checkbox .checkmark {
  position: relative;
  width: 0.28rem;
  height: 0.28rem;
  margin-right: 0.05rem;
  border: 1px solid #716d61;
  background-color: transparent;
  cursor: pointer;
}
.pop4 .empty {
  position: relative;
  width: 0.76rem;
  height: 0.76rem;
  padding: 0.05rem;
  border: 1px solid rgba(232, 224, 179, 0.25);
  border-radius: 50%;
  background-color: rgba(232, 224, 179, 0.25);
  background-clip: content-box;
}
.pop4 .empty.active {
  border: 1px solid rgba(232, 224, 179, 0.5);
  background-color: rgba(232, 224, 179, 0.5);
}
.pop4 .empty.active::before, .pop4 .empty.active::after {
  background-color: #e8e0b3;
}
.pop4 .empty::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.35rem;
  height: 0.04rem;
  border-radius: 0.03rem;
  background-color: #c8b58d;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pop4 .empty::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.04rem;
  height: 0.35rem;
  border-radius: 0.03rem;
  background-color: #c8b58d;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pop4 .skill-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-height: calc(100% - 1.32rem);
  font-size: 0.18rem;
  color: #c8b58d;
}
.pop4 .skill-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.pop4 .skill-col {
  position: relative;
}
.pop4 .skill-col:nth-of-type(1) {
  width: 3.7rem;
}
.pop4 .skill-col:nth-of-type(2) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.5rem;
}
.pop4 .skill-col:nth-of-type(3) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.2rem;
  width: 2.3rem;
}
.pop4 .skill-col .fw-box, .pop4 .skill-col .baoshi-box {
  position: relative;
  width: 0.76rem;
  height: 0.76rem;
  padding: 0.05rem;
  border-radius: 50%;
  background: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/icon/icon-talent-bg.png) no-repeat center;
  background-size: cover;
}
.pop4 .skill-col .fw-box img, .pop4 .skill-col .baoshi-box img {
  border-radius: 50%;
}
.pop4 .skill-col .baoshi-pop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 9;
  border: 1px solid #e8d784;
  background-color: #121212;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.pop4 .skill-col .baoshi-pop > div {
  width: 0.76rem;
  height: 0.76rem;
}
.pop4 .skill-title {
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 0.15rem;
  padding-right: 0.15rem;
  font-size: 0.26rem;
  text-align: center;
}
.pop4 .skill-title > .skill-col:nth-child(1) {
  margin-left: -0.3rem;
}
.pop4 .skill-list {
  max-height: calc(100% - 0.61rem);
}
.pop4 .skill-list li {
  position: relative;
  padding-top: 0.25rem;
}
.pop4 .skill-list li:not(:first-of-type) {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pop4 .skill-box {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  padding-left: 0.25rem;
}
.pop4 .skill-box .image {
  width: 0.76rem;
  height: 0.76rem;
  border: 0.02rem solid #e8d784;
}
.pop4 .skill-box .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  height: 0.76rem;
  margin-right: 0.1rem;
  margin-left: 0.1rem;
  font-size: 0.24rem;
  color: #c8b58d;
}
.pop4 .level-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  height: 0.8rem;
}
.pop4 .level-btn > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 0.35rem;
  height: 0.35rem;
  line-height: 1;
  font-size: 0.3rem;
  color: #e8e0b3;
  background-color: #494335;
  cursor: pointer;
}
.pop4 .btn-talent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 4.5rem;
  height: 0.5rem;
  margin: 0.4rem auto 0.3rem;
  border: 1px solid #ffdca7;
  font-size: 0.22rem;
  color: #fff;
  background-color: #342b1b;
}
.pop4 .btn-talent span {
  margin-right: 0.05rem;
  font-size: 0.22rem;
  color: #e8e0b3;
}
.pop4 .talent-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.3rem;
}
.pop4 .talent-box .talent-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.pop4 .talent-box .talent-item .talent-img {
  position: relative;
  width: 0.64rem;
  height: 0.64rem;
  background: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/icon/icon-talent-bg.png) no-repeat center;
  background-size: cover;
}
.pop4 .talent-box .talent-item .talent-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pop4 .talent-box .talent-item .talent-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: 0.1rem;
}
.pop4 .talent-box .talent-item .talent-info .name {
  line-height: 1;
  font-size: 0.18rem;
  color: #c8b58d;
}
.pop4 .talent-box .talent-item .talent-info .level {
  line-height: 1;
  margin-top: 0.15rem;
  font-size: 0.18rem;
  color: #c8b58d;
}
.pop4 .talent-box .talent-item .component7-skill-talent-level {
  position: absolute;
  bottom: 0.03rem;
  right: -0.05rem;
  width: 0.27rem;
  height: 0.27rem;
  line-height: 0.27rem;
  font-size: 0.14rem;
  text-align: center;
  color: #f2e8d3;
}
.pop4 .talent-box .talent-item:nth-of-type(1) {
  width: 2.55rem;
}
.pop4 .talent-box .talent-item:nth-of-type(1) .talent-level {
  color: #59a0c9;
}
.pop4 .talent-box .talent-item:nth-of-type(1) .component7-skill-talent-level {
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/icon/component7-skill-talent-level-1.png);
}
.pop4 .talent-box .talent-item:nth-of-type(2) {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.pop4 .talent-box .talent-item:nth-of-type(2) .talent-level {
  color: #8dba45;
}
.pop4 .talent-box .talent-item:nth-of-type(2) .component7-skill-talent-level {
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/icon/component7-skill-talent-level-2.png);
}
.pop4 .talent-box .talent-item:nth-of-type(3) {
  width: 1.66rem;
}
.pop4 .talent-box .talent-item:nth-of-type(3) .talent-level {
  color: #c3a217;
}
.pop4 .talent-box .talent-item:nth-of-type(3) .component7-skill-talent-level {
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/icon/component7-skill-talent-level-3.png);
}
.pop4 .close-icon {
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/skill-close.png);
  width: 0.24rem;
  font-size: 0;
  height: 0.22rem;
}

.pop5 {
  bottom: 0;
  left: 0;
  width: 7.5rem;
  height: 11rem;
  color: #8fb5cc;
  font-size: 0.18rem;
}
.pop5 .pop-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  position: relative;
  height: 100%;
}
.pop5 .pop-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  padding-top: 0.2rem;
}
.pop5 .pop5-ky-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 0.84rem;
  padding: 0 0.3rem;
}
.pop5 .pop5-ky-list li {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  border: 0.02rem solid #63615e;
  cursor: pointer;
}
.pop5 .pop5-ky-list li.active {
  border: 0.02rem solid #e8d784;
}
.pop5 .pop5-ky-list li.active p {
  display: block;
}
.pop5 .pop5-ky-list li img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pop5 .pop5-ky-list p {
  display: none;
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  width: 100%;
  line-height: 1;
  font-size: 0.24rem;
  text-align: center;
  color: #c8b58d;
}
.pop5 .pop5-tab-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 0.3rem;
}
.pop5 .pop5-tab-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: 49%;
  height: 0.7rem;
  font-size: 0.24rem;
  border: 1px solid #63615e;
  color: #c8b58d;
  background-color: #342b1b;
  cursor: pointer;
}
.pop5 .pop5-tab-list li.active, .pop5 .pop5-tab-list li:hover {
  border: 1px solid #ecda9c;
  color: #fff;
}
.pop5 .pop5-tab-list li .icon-close-circle {
  position: absolute;
  top: -0.08rem;
  right: -0.08rem;
  cursor: pointer;
}
.pop5 .pop5-lj-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  max-height: calc(100% - 1.1rem - 0.84rem - 0.7rem - 0.3rem);
  margin-top: 0.3rem;
  border-top: 1px solid rgba(177, 210, 230, 0.1);
  padding: 0.3rem;
}
.pop5 .pop5-lj-box > p {
  line-height: 1;
  margin-bottom: 0.3rem;
  font-size: 0.24rem;
  color: #c8b58d;
}
.pop5 .pop5-lj-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 3.5rem;
  margin-right: -0.2rem;
}
.pop5 .pop5-lj-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 2.16rem;
  height: 0.9rem;
  border: 0.02rem solid rgba(182, 209, 226, 0.15);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
}
.pop5 .pop5-lj-list li:not(:nth-of-type(-n + 3)) {
  margin-top: 0.2rem;
}
.pop5 .pop5-lj-list li:not(:nth-of-type(3n)) {
  margin-right: 0.2rem;
}
.pop5 .pop5-lj-list li.active {
  border: 0.02rem solid #ecda9c;
  background-color: #2f271a;
}
.pop5 .pop5-lj-list li.active p {
  color: #fff;
}
.pop5 .pop5-lj-list p {
  line-height: 1;
  font-size: 0.24rem;
  color: #878273;
}
.pop5 .pop5-lj-list p + p {
  margin-top: 0.1rem;
  font-size: 0.22rem;
}

.pop6 {
  width: 5.35rem;
  height: 9.42rem;
}
.pop6 .pop-body {
  height: 100%;
}
.pop6 .pop4-addSkill-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  margin-top: 0.5rem;
}
.pop6 .pop4-addSkill-list .gap-40:last-child {
  margin-bottom: 0 !important;
}
.pop6 .pop4-addSkill-list .skill-tier {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: 3.55rem;
  height: 0.57rem;
  margin-bottom: 0.25rem;
  font-size: 0.24rem;
  color: #f9e98e;
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/skill-icon/skill-tier.png);
}
.pop6 .pop4-addSkill-list .skill-tier + .gap-60 {
  margin-bottom: 0.6rem;
}
.pop6 .pop4-addSkill-list .skill-tier.skill-tier1 span {
  background-position: 0 0;
}
.pop6 .pop4-addSkill-list .skill-tier.skill-tier2 span {
  background-position: -0.66rem 0;
}
.pop6 .pop4-addSkill-list .skill-tier.skill-tier3 span {
  background-position: -1.32rem 0;
}
.pop6 .pop4-addSkill-list .skill-tier span {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 0.57rem;
  height: 0.57rem;
  line-height: 0.57rem;
  text-align: center;
  background-size: 1.91rem 0.57rem;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pop6 .pop4-addSkill-list .pop4-addSkill-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 0.83rem;
}
.pop6 .pop4-addSkill-list .pop4-addSkill-item .pop4-addSkill-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 0.83rem;
  height: 0.83rem;
  background: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/skill-icon/icon-skill-bg.png) no-repeat;
  background-size: 100% 100%;
}
.pop6 .pop4-addSkill-list .pop4-addSkill-item .pop4-addSkill-img img {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  cursor: pointer;
}
.pop6 .pop4-addSkill-list .pop4-addSkill-item .pop4-addSkill-img img:hover {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}
.pop6 .pop4-addSkill-list .pop4-addSkill-item .pop4-addSkill-name {
  line-height: 1;
  margin: 0.1rem 0;
  font-size: 0.28rem;
  text-align: center;
  color: #c8b58d;
  white-space: nowrap;
}
.pop6 .pop4-addSkill-list .pop4-addSkill-item .pop4-addSkill-level {
  line-height: 1;
  font-size: 0.24rem;
  color: #e8e0b3;
}
.pop6 .pop4-addSkill-list .pop4-addSkill-item .skill-subtractLevel-btn,
.pop6 .pop4-addSkill-list .pop4-addSkill-item .skill-addLevel-btn {
  width: 0.26rem;
  height: 0.26rem;
  line-height: 0.26rem;
  font-size: 0.2rem;
  text-align: center;
  color: #e8e0b3;
  background: #494335;
  cursor: pointer;
}

.pop7 {
  bottom: 0;
  left: 0;
  width: 7.5rem;
  height: 11rem;
}
.pop7 .component-icon-close {
  position: absolute;
  top: -0.12rem;
  right: -0.14rem;
  background-image: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/skill-close.png);
  width: 0.17rem;
  font-size: 0;
  height: 0.17rem;
  z-index: 1;
}
.pop7 .empty {
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid #544a34;
  background-color: #271f10;
}
.pop7 .empty::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.35rem;
  height: 0.04rem;
  background-color: #b7a480;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pop7 .empty::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.04rem;
  height: 0.35rem;
  background-color: #b7a480;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pop7 .add-item {
  height: 1.14rem;
}
.pop7 .add-item .empty {
  width: 0.74rem;
  height: 0.74rem;
}
.pop7 .skill-scroll {
  height: calc(100% - 0.4rem);
  margin: 0.2rem;
  padding-top: 0.2rem;
  padding-right: 0.2rem;
}
.pop7 .skill-box {
  position: relative;
  width: 100%;
}
.pop7 .component8-info-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}
.pop7 .component8-info-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
}
.pop7 .component8-info-list li .component8-draggable-wrapper .skill-item::before {
  display: block !important;
}
.pop7 .component8-info-list li .component8-draggable-wrapper .skill-item.dragging::before {
  display: none !important;
}
.pop7 .component8-info-list li .component8-draggable-wrapper .skill-item.hide-arrow::before {
  display: none;
}
.pop7 .component8-info-list li:not(:last-of-type) .skill-item::before {
  display: block;
}
.pop7 .component8-skill-box, .pop7 .component8-draggable-wrapper {
  min-width: 0.86rem;
  min-height: 1.24rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: auto;
  margin: auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  gap: 0.5rem;
}
.pop7 .component8-skill-box .component8-skill-img, .pop7 .component8-draggable-wrapper .component8-skill-img {
  width: 0.86rem;
  height: 0.86rem;
  margin: 0 auto;
  border: 0.02rem solid #e8d784;
}
.pop7 .component8-skill-box .component8-skill-img img, .pop7 .component8-draggable-wrapper .component8-skill-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pop7 .component8-skill-box .component8-skill-name, .pop7 .component8-draggable-wrapper .component8-skill-name {
  height: 0.45rem;
  line-height: 0.24rem;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
  font-size: 0.18rem;
  color: #c0ae88;
  text-align: center;
}
.pop7 .component8-skill-box .component8-skill-name.long, .pop7 .component8-draggable-wrapper .component8-skill-name.long {
  max-width: 0.86rem;
  height: auto;
  text-align: left;
}
.pop7 .component8-skill-tag {
  position: relative;
  width: 100%;
  min-width: 0.86rem;
  height: 0.4rem;
  line-height: 0.4rem;
  padding: 0 0.05rem;
  border: 1px solid rgba(203, 230, 249, 0.25);
  font-size: 0.18rem;
  text-align: center;
  color: #c0ae88;
  background-color: #342b1b;
}
.pop7 .component8-skill-tag.active {
  border: none;
}
.pop7 .component8-info-desc-box {
  width: 100%;
  min-height: 1.35rem;
  margin: 0rem auto;
}
.pop7 .component8-info-desc-box .component8-info-desc-title {
  height: 0.58rem;
  line-height: 0.58rem;
  border: 1px solid #63615e;
  font-size: 0.2rem;
  text-align: center;
  color: #f2e9c3;
  background-color: #221c11;
}
.pop7 .component8-info-desc {
  width: 100%;
  height: 1.1rem;
  line-height: 1.5;
  font-size: 0.12rem;
  color: #878273;
  white-space: pre-wrap;
  letter-spacing: 1px;
}
.pop7 .switch-skills {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 0.15rem;
  font-size: 0.12rem;
  color: #c8b58d;
}
.pop7 .switch-skills i {
  display: block;
  width: 0.12rem;
  height: 0.1rem;
  margin-left: 0.05rem;
  background: url("https://game.gtimg.cn/images/fz/cp/a20250320LA/switch-skills.png") no-repeat;
  background-size: cover;
}
.pop7 .pop7-inp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  border: 1px solid #544a34;
  border-radius: 0;
  font-size: 0.18rem;
  text-align: center;
  color: #c8b58d;
  background-color: #342b1b;
}
.pop7 .pop7-inp::-webkit-input-placeholder {
  color: #c8b58d;
}
.pop7 .pop7-inp::-moz-placeholder {
  color: #c8b58d;
}
.pop7 .pop7-inp:-ms-input-placeholder {
  color: #c8b58d;
}
.pop7 .pop7-inp::-ms-input-placeholder {
  color: #c8b58d;
}
.pop7 .pop7-inp::placeholder {
  color: #c8b58d;
}
.pop7 .pop7-inp:focus {
  border: 1px solid #e8d784;
}

.pop8 {
  width: 4.5rem;
  height: 5.68rem;
  font-size: 0.18rem;
}
.pop8 .card-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 0.15rem;
}
.pop8 .card-item {
  width: 2rem;
  height: 3rem;
}
.pop8 .card-name {
  line-height: 1;
  margin: 0.1rem auto;
  font-size: 0.2rem;
  color: #ffdca7;
}
.pop8 .addbaoshi-box ul {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.pop8 .addbaoshi-box > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 0.35rem;
  height: 0.35rem;
  line-height: 1;
  font-size: 0.3rem;
  color: #e8e0b3;
  background-color: #494335;
  cursor: pointer;
}
.pop8 .icon-baoshi-y1 {
  width: 0.15rem;
  height: 0.25rem;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
.pop8 .icon-baoshi-y1.active {
  -webkit-filter: none;
          filter: none;
}
.pop8 .btn-add {
  width: 2.06rem;
  height: 0.4rem;
  line-height: 0.4rem;
  margin-top: 0.3rem;
  border: 1px solid #63615e;
  font-size: 0.18rem;
  text-align: center;
  color: #c8b58d;
  background-color: #221c11;
}

.pop9 {
  width: 6.3rem;
  height: 7rem;
}
.pop9 .skill-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  max-height: calc(100% - 0.6rem);
  margin: 0.3rem;
  margin-right: 0.1rem;
  gap: 0.3rem;
}
.pop9 .skill-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.pop9 .skill-list .image {
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
  border: 0.02rem solid #e8d784;
}
.pop9 .skill-list .image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pop9 .skill-list .name {
  line-height: 0.3rem;
  font-size: 0.2rem;
  color: #c8b58d;
}

.pop10 {
  bottom: 0;
  left: 0;
  width: 7.5rem;
  height: 12.5rem;
  padding: 0.3rem;
  background-image: url("https://game.gtimg.cn/images/fz/cp/a20250320LA/m/pop/pop-1.jpg");
  background-size: cover;
}
.pop10 .variety-group {
  position: relative;
  padding: 0.3rem 0;
}
.pop10 .variety-group + .variety-group {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.pop10 .variety-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0.3rem;
}
.pop10 .variety-title .icon {
  width: 0.35rem;
  margin-right: 0.1rem;
}
.pop10 .variety-title .icon img {
  display: block;
  width: 100%;
}
.pop10 .variety-title .name {
  font-weight: bold;
  font-size: 0.3rem;
  color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#faf9f5), to(#ddc99a));
  background-image: linear-gradient(to bottom, #faf9f5, #ddc99a);
  -webkit-background-clip: text;
          background-clip: text;
}
.pop10 .variety-item, .pop10 .variety-list .variety-item {
  position: relative;
  width: 1.25rem;
  height: 0.45rem;
  line-height: 0.45rem;
  border: 1px solid #8a7a5a;
  font-size: 0.22rem;
  text-align: center;
  color: #8a7a5a;
  background-color: #1b1812;
}
.pop10 .variety-item.active, .pop10 .variety-list .variety-item.active {
  border-color: #fdeaa8;
  color: #fbf8db;
  background-color: #221c11;
}
.pop10 .variety-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.pop10 .variety-list li:not(:nth-of-type(5n)) {
  margin-right: 0.1625rem;
}
.pop10 .variety-list li:not(:nth-of-type(-n + 5)) {
  margin-top: 0.1625rem;
}

.pop11 {
  width: 5.3rem;
  height: 8rem;
}
.pop11 .pop4-fw-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: calc(100% - 0.6rem);
  margin: 0.3rem 0.3rem 0 0.5rem;
}
.pop11 .pop4-fw-list li:not(:first-of-type) {
  margin-top: 0.15rem;
}
.pop11 .pop4-fw-list .fw-name {
  width: 0.7rem;
  font-size: 0.24rem;
  color: #c8b58d;
}
.pop11 .pop4-fw-list .fw-image {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  background: url(https://game.gtimg.cn/images/fz/cp/a20250320LA/icon/icon-talent-bg.png) no-repeat center;
  background-size: cover;
}
.pop11 .pop4-fw-list .fw-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pop11 .pop4-fw-list .fw-item {
  width: 0.4rem;
  height: 0.4rem;
  cursor: pointer;
}
.pop11 .pop4-fw-list .fw-item img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.pop12 {
  width: 6.55rem;
  height: 3.05rem;
}
.pop12 .pop-content {
  padding: 0.43rem 0.2rem 0.25rem;
}
.pop12 .bd-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.pop12 .bd-info .bd-img {
  width: 0.8rem;
  height: 0.8rem;
  border: 0.02rem solid #decd94;
  margin-right: 0.1rem;
}
.pop12 .bd-info .bd-name {
  font-size: 0.24rem;
  color: #c8b58d;
  line-height: 0.8rem;
}
.pop12 .bd-info .bd-level {
  margin-left: 0.1rem;
  font-size: 0.22rem;
  color: #fbf2c6;
}
.pop12 .add-level-brn-group {
  margin-top: 0.3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 0.41rem;
}
.pop12 .add-level-brn-group li {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
  line-height: 0.41rem;
  background-color: #221c11;
  border: 1px solid #544a34;
  color: #b3a58d;
  font-size: 0.18rem;
}
.pop12 .add-level-brn-group li.active, .pop12 .add-level-brn-group li:active {
  background-color: #342b1b;
  border: 1px solid #ecda9c;
  color: #ecda9c;
}