@charset "UTF-8";
/* reset */
html,
body,
div,
p,
ul,
li,
dl,
dt,
dd,
em,
i,
span,
a,
img,
input,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
  outline: none;
}

a,
img,
input {
  border: none;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font: 14px/1.75 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
}

* {
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
}

i,
em {
  font-style: normal;
}

.db {
  text-indent: -999em;
  overflow: hidden;
}

html {
  font-size: 14px;
  font-family: "Microsoft YaHei";
  width: 100%;
}

html {
  font-size: calc(100vw / 1920);
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  width: 100%;
  background-color: #242220;
}

@font-face {
  font-family: 'font';
  src: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/font.ttf);
}

#afooter {
  padding: 20rem 0;
  background: #1c1c1c;
  text-align: center;
}

#afooter .wrap_ieg {
  width: 1240px;
  margin: 0 auto;
  padding: 30px 0;
}

#afooter p {
  color: #6e6e6e;
  font-size: 18rem;
}

#afooter a {
  color: #6e6e6e;
  font-size: 18rem;
}

.db {
  text-indent: -999em;
  overflow: hidden;
}

.logo {
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/logo.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 44rem;
  top: 42rem;
  display: block;
  width: 397rem;
  height: 65rem;
  z-index: 99;
}

.wrap {
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/bg.jpg) 50% 50%/cover no-repeat;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.wrap .peo {
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  user-select: none;
}

.wrap .peo img {
  transition: .2s linear all;
  height: 100%;
  opacity: 0;
  transform: translateX(200px);
}

.wrap .peo.active img {
  opacity: 1;
  transform: translateX(0);
}

.wrap .tabMain {
  width: 1104rem;
  height: 578rem;
  overflow: hidden;
}

.wrap .tips {
  color: #fff;
  font-size: 14rem;
  height: 42rem;
  display: flex;
  align-items: center;
}

.zhuanpan {
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/zhuanpan.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 375rem;
  height: 313rem;
}

.zhuanpan .items {
  width: 119rem;
  height: 119rem;
  position: absolute;
  cursor: pointer;
  border-radius: 100%;
}

.zhuanpan .items img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  height: 100%;
  user-select: none;
  transition: .2s linear all;
}

.zhuanpan .items.active .img1 {
  width: 0;
  height: 0;
  opacity: 0;
}

.zhuanpan .items.active .img2 {
  width: 100%;
  height: 100%;
  opacity: 1;
}

.zhuanpan .items .img1 {
  opacity: 1;
}

.zhuanpan .items .img2 {
  width: 0;
  height: 0;
  opacity: 0;
}

.zhuanpan .items:nth-of-type(1) {
  left: -34rem;
  bottom: 23rem;
}

.zhuanpan .items:nth-of-type(1).five {
  bottom: 6rem;
  left: -37rem;
}

.zhuanpan .items:nth-of-type(2) {
  left: 24rem;
  bottom: 122rem;
}

.zhuanpan .items:nth-of-type(2).five {
  bottom: 95rem;
  left: 2rem;
}

.zhuanpan .items:nth-of-type(3) {
  left: 112rem;
  top: -5rem;
}

.zhuanpan .items:nth-of-type(3).five {
  bottom: 168rem;
  left: 70rem;
  top: inherit;
}

.zhuanpan .items:nth-of-type(4) {
  right: 40rem;
  top: -47rem;
}

.zhuanpan .items:nth-of-type(4).five {
  right: 110rem;
  top: -34rem;
}

.zhuanpan .items:nth-of-type(5) {
  right: 10rem;
  top: -55rem;
}

[v-cloak] {
  display: none;
}

.tabSkill {
  padding: 0 35rem;
  padding-top: 25rem;
  width: 100%;
  height: 100%;
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/bg1.png) no-repeat;
  background-size: 100% 100%;
}

.tabSkill .listTab {
  height: 97rem;
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/line.png) no-repeat center bottom;
  background-size: auto 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 15rem;
  align-content: flex-start;
}

.tabSkill .listTab .items {
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/icon1.png) no-repeat;
  background-size: 100% 100%;
  width: 188rem;
  height: 35rem;
  text-align: center;
  color: #f0fefd;
  font-size: 15rem;
  cursor: pointer;
  margin-bottom: 9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tabSkill .listTab .items p {
  max-width: 130rem;
  margin-left: 5rem;
}

.tabSkill .listTab .items.active {
  color: #101b38;
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/icon2.png) no-repeat;
  background-size: 100% 100%;
}

.tabSkill .list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10rem;
  height: 425rem;
  overflow-y: auto;
  /* 设置滚动条滑块的样式 */
  /* 设置滚动条滑块的hover状态样式 */
}

.tabSkill .list::-webkit-scrollbar {
  width: 6rem;
  background-color: #9d9d9d;
  border-radius: 5px;
}

.tabSkill .list::-webkit-scrollbar-thumb {
  background-color: #101b38;
  border-radius: 5px;
}

.tabSkill .list::-webkit-scrollbar-thumb:hover {
  background-color: #101b38;
}

.tabSkill .list .items {
  width: 330rem;
  margin-right: 11rem;
}

.tabSkill .list .items:nth-of-type(3n) {
  margin-right: 0;
}

.tabSkill .list .info {
  padding: 0 20rem;
  color: #202029;
  font-size: 14rem;
  line-height: 1.4;
  margin-top: 10rem;
}

.tabSkill .list .info h3 {
  font-size: 24rem;
  font-weight: bold;
}

.tabSkill .list .t {
  display: flex;
  justify-content: center;
  height: 92rem;
  align-items: center;
}

.tabSkill .list .t .l img {
  display: block;
  margin: 0 auto;
  height: 34rem;
}

.tabSkill .list .t .name {
  color: #101b38;
  font-size: 18rem;
  font-family: 'font';
  font-weight: bold;
  width: 130rem;
  text-align: center;
  line-height: 1.1;
}

.tabSkill .list .t .txt {
  display: flex;
  align-items: center;
  height: 65rem;
  border-left: 1rem solid #9d9d9d;
  margin-left: 11rem;
  padding-left: 10rem;
  line-height: 1.2;
  color: #101b38;
  font-size: 14rem;
}

.tabSkill .list .icon {
  border: 1rem solid #101b38;
  width: 328rem;
  height: 195rem;
}

.tabSkill .list .icon img {
  display: block;
  width: 100%;
  height: 195rem;
}

.peoTab {
  position: absolute;
  top: 150rem;
  left: 280rem;
}

.tabBtn {
  display: flex;
  align-items: center;
}

.tabBtn a {
  display: block;
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/tab1.png) no-repeat;
  background-size: 100% 100%;
  width: 228rem;
  height: 61rem;
  margin-right: 15rem;
}

.tabBtn a.active {
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/tab1-1.png) no-repeat;
  background-size: 100% 100%;
}

.tabBtn a:nth-of-type(2) {
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/tab2.png) no-repeat;
  background-size: 100% 100%;
}

.tabBtn a:nth-of-type(2).active {
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/tab2-1.png) no-repeat;
  background-size: 100% 100%;
}

.tabBreak {
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/bg2.png) no-repeat;
  background-size: 100% 100%;
  width: 1104rem;
  height: 498rem;
  padding: 25rem;
}

.tabBreak .list {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  overflow-y: auto;
  /* 设置滚动条滑块的样式 */
  /* 设置滚动条滑块的hover状态样式 */
}

.tabBreak .list::-webkit-scrollbar {
  width: 6rem;
  background-color: #9d9d9d;
  border-radius: 5px;
}

.tabBreak .list::-webkit-scrollbar-thumb {
  background-color: #101b38;
  border-radius: 5px;
}

.tabBreak .list::-webkit-scrollbar-thumb:hover {
  background-color: #101b38;
}

.tabBreak .list .items {
  width: 338rem;
  height: 80rem;
  border: 1rem solid #989694;
  display: flex;
  color: #101b38;
  font-size: 14rem;
  margin-bottom: 9rem;
  margin-right: 14rem;
  background-color: #fff;
}

.tabBreak .list .items:nth-of-type(3n) {
  margin-right: 0;
}

.tabBreak .list .items .lev {
  width: 44rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1rem solid #989694;
}

.tabBreak .list .items .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 110rem;
  border-right: 1rem solid #989694;
  line-height: 1;
  font-size: 14rem;
  padding: 0 2rem;
  text-align: center;
}

.tabBreak .list .items .icon img {
  display: block;
  height: 28rem;
}

.tabBreak .list .items .icon span {
  display: block;
  margin-top: 5rem;
  font-family: 'font';
}

.tabBreak .list .items .info {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  line-height: 1.2;
}

.tabBreak .list .items .info .line {
  padding-bottom: 5rem;
  padding-left: 8rem;
}

.tabBreak .list .items .info .txt {
  padding-top: 5rem;
  padding-left: 8rem;
  border-top: 1rem solid #989694;
}

.sp {
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/sp.png) no-repeat;
  background-size: 28rem 587rem;
}

.sp2 {
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/sp2.png) no-repeat;
  background-size: 40rem 707rem;
}

.peoSelect {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 45rem;
}

.peoSelect .icon {
  width: 40rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 6rem;
}

.peoSelect .icon span {
  display: block;
}

.peoSelect .icon .sp {
  height: 28rem;
  width: 28rem;
  background-position: 0 0;
}

.peoSelect .icon .sp2 {
  width: 100%;
  height: 40rem;
  display: none;
}

.peoSelect .items {
  height: 40rem;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 15rem;
  cursor: pointer;
  margin: -4rem 0;
  font-family: 'font';
  cursor: pointer;
}

.peoSelect .items.active {
  color: #20dff5;
}

.peoSelect .items.active .sp {
  display: none;
}

.peoSelect .items.active .sp2 {
  display: block;
}

.peoSelect .items:nth-of-type(2) .icon .sp {
  background-position: 0 -35rem;
}

.peoSelect .items:nth-of-type(2) .icon .sp2 {
  background-position: 0 -42rem;
}

.peoSelect .items:nth-of-type(3) .icon .sp {
  background-position: 0 -70rem;
}

.peoSelect .items:nth-of-type(3) .icon .sp2 {
  background-position: 0 -83rem;
}

.peoSelect .items:nth-of-type(4) .icon .sp {
  background-position: 0 -105rem;
}

.peoSelect .items:nth-of-type(4) .icon .sp2 {
  background-position: 0 -125rem;
}

.peoSelect .items:nth-of-type(5) .icon .sp {
  background-position: 0 -140rem;
}

.peoSelect .items:nth-of-type(5) .icon .sp2 {
  background-position: 0 -166rem;
}

.peoSelect .items:nth-of-type(6) .icon .sp {
  background-position: 0 -175rem;
}

.peoSelect .items:nth-of-type(6) .icon .sp2 {
  background-position: 0 -208rem;
}

.peoSelect .items:nth-of-type(7) .icon .sp {
  background-position: 0 -210rem;
}

.peoSelect .items:nth-of-type(7) .icon .sp2 {
  background-position: 0 -250rem;
}

.peoSelect .items:nth-of-type(8) .icon .sp {
  background-position: 0 -245rem;
}

.peoSelect .items:nth-of-type(8) .icon .sp2 {
  background-position: 0 -291rem;
}

.peoSelect .items:nth-of-type(9) .icon .sp {
  background-position: 0 -280rem;
}

.peoSelect .items:nth-of-type(9) .icon .sp2 {
  background-position: 0 -333rem;
}

.peoSelect .items:nth-of-type(10) .icon .sp {
  background-position: 0 -315rem;
}

.peoSelect .items:nth-of-type(10) .icon .sp2 {
  background-position: 0 -374rem;
}

.peoSelect .items:nth-of-type(11) .icon .sp {
  background-position: 0 -350rem;
}

.peoSelect .items:nth-of-type(11) .icon .sp2 {
  background-position: 0 -416rem;
}

.peoSelect .items:nth-of-type(12) .icon .sp {
  background-position: 0 -385rem;
}

.peoSelect .items:nth-of-type(12) .icon .sp2 {
  background-position: 0 -458rem;
}

.peoSelect .items:nth-of-type(13) .icon .sp {
  background-position: 0 -420rem;
}

.peoSelect .items:nth-of-type(13) .icon .sp2 {
  background-position: 0 -499rem;
}

.peoSelect .items:nth-of-type(14) .icon .sp {
  background-position: 0 -455rem;
}

.peoSelect .items:nth-of-type(14) .icon .sp2 {
  background-position: 0 -541rem;
}

.peoSelect .items:nth-of-type(15) .icon .sp {
  background-position: 0 -490rem;
}

.peoSelect .items:nth-of-type(15) .icon .sp2 {
  background-position: 0 -583rem;
}

.peoSelect .items:nth-of-type(16) .icon .sp {
  background-position: 0 -525rem;
}

.peoSelect .items:nth-of-type(16) .icon .sp2 {
  background-position: 0 -625rem;
}

.peoSelect .items:nth-of-type(17) .icon .sp {
  background-position: 0 -560rem;
}

.peoSelect .items:nth-of-type(17) .icon .sp2 {
  background-position: 0 -667rem;
}

video {
  object-fit: cover !important;
}

.mod-tips {
  color: #fff;
  font-size: 14rem;
  position: absolute;
  left: 285rem;
  top: 881rem;
}

.linkBg {
  display: block;
  width: 260rem;
  height: 40rem;
  display: block;
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/btn-link.png) center center no-repeat;
  background-size: cover;
  font-size: 0;
  color: transparent;
  transition: all .3s;
  margin-top: 5rem;
}

.linkBg:hover {
  background-image: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/btn-link-hover.png);
}

.btn-back {
  background: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/btn-return.png) no-repeat;
  background-size: 100% 100%;
  border-radius: 5rem;
  display: block;
  width: 205rem;
  height: 50rem;
  font-size: 0;
  line-height: 45rem;
  text-align: center;
  color: #111114;
  position: absolute;
  right: 30rem;
  top: 30rem;
  z-index: 10;
  transition: all .3s;
}

.btn-back:hover {
  background-image: url(//game.gtimg.cn/images/dnf/cp/a20250612vp/btn-return-hover.png);
}