@charset "UTF-8";
body,
dl,
dd,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form {
  margin: 0;
}

body,
button,
input,
select,
textarea {
  font-size: 0.24px;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

em,
b {
  font-style: normal;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

img {
  vertical-align: middle;
  border: 0;
  padding: 0;
  margin: 0;
}

button,
input,
select,
textarea {
  font-size: 100%;
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th,
ul,
ol {
  padding: 0;
}

ul,
ol,
dl {
  list-style: none;
}

.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  pointer-events: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: ' ';
  clear: both;
  height: 0;
}

.clearfix {
  *zoom: 1;
}

body {
  background: #070416;
  width: 100%;
  height: 100%;
  max-height: 1080px;
  position: relative;
  font: 12px / 1.5 '\5FAE\8F6F\96C5\9ED1', tahoma, '\5b8b\4f53', '\9ED1\4F53',
 sans-serif;
}

* {
  box-sizing: border-box;
}

img {
  object-fit: contain;
}

.btn {
  display: flex;
}

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

.g-wrap {
  margin: 0 auto;
  -webkit-text-size-adjust: none;
  position: relative;
  overflow: hidden;
  max-width: 1920px;
  width: 1920px;
  height: 1079px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/bg.jpg) center top no-repeat;
  padding-top: 1px;
}

.g-wrap a {
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.5s;
}

.g-wrap a:hover {
  filter: brightness(1.2);
  -webkit-filter: brightness(1.2);
}

.g-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.gm .two_box {
  width: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/bg2.jpg) center top no-repeat;
  background-size: 100% 100%;
  margin-top: -2px;
  position: relative;
}

.gm .two_box::after {
  content: '';
  position: absolute;
  bottom: 380px;
  left: 0;
  width: 100%;
  height: 3525px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/bg2_icon.png) top center;
  z-index: 1;
}

.gm .two_box > div {
  z-index: 3;
  position: relative;
}

.anime {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  z-index: 1;
  overflow: hidden;
}

.anime .anime {
  width: 1920px;
  height: 1080px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.anime .anime.bg_ani {
  z-index: 1;
}

.anime .anime canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home {
  width: 100%;
  height: 1000px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.pk_bg {
  width: 936px;
  height: 115px;
  position: absolute;
  left: 49%;
  bottom: 180px;
  transform: translateX(-50%);
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/pk_bg.png) no-repeat;
  background-size: 100% 100%;
  z-index: 2;
  pointer-events: none;
}

.pk_bg .pk_ani {
  width: 872px;
  height: 114px;
  position: absolute;
  left: 24px;
  top: 0;
  z-index: 2;
  pointer-events: none;
}

.pk_bg .pk_ani canvas {
  width: 100%;
  height: 100%;
}

.pk_bg .pk_box {
  width: 735px;
  height: 24px;
  position: absolute;
  left: 49.7%;
  transform: translateX(-50%);
  top: 48px;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}

.pk_bg .pk_box .pk_speed_l {
  width: 50%;
  height: 24px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/pk_speed_l.png) no-repeat;
  background-size: auto 100%;
  position: relative;
}

.pk_bg .pk_box .pk_speed_l .num {
  width: 100px;
  height: 100%;
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  position: absolute;
  left: 10px;
}

.pk_bg .pk_box .pk_speed_l .pk_gx {
  width: 107px;
  height: 278px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/pk_gx.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: -54px;
  top: -24%;
  transform: translateY(-50%);
  pointer-events: none;
}

.pk_bg .pk_box .pk_speed_r {
  width: 50%;
  height: 24px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/pk_speed_r.png) right no-repeat;
  background-size: auto 100%;
}

.pk_bg .pk_box .pk_speed_r .num {
  width: 100px;
  height: 100%;
  font-size: 16px;
  color: #000;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: end;
  position: absolute;
  right: 10px;
}

.logo {
  display: block;
  width: 349px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/logo.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
}

.tit_left {
  width: 608px;
  height: 337px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/tit_left.png) no-repeat;
  background-size: 100% 100%;
  margin-bottom: -30px;
  transition: all 0.5s ease-in-out;
  position: relative;
}

.tit_left .l_text_ani {
  width: 638px;
  height: 350px;
  position: absolute;
  left: 2px;
  top: -14px;
  pointer-events: none;
}

.tit_left .l_text_ani canvas {
  width: 100%;
  height: 100%;
}

.tit_left.active {
  width: 472px;
  height: 273px;
  margin-bottom: -40px;
  transform: translateX(211px) translateY(-207px);
}

.tit_right {
  width: 638px;
  height: 350px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/tit_right.png) no-repeat;
  background-size: 100% 100%;
  margin-top: -50px;
  transition: all 0.5s ease-in-out;
  position: relative;
}

.tit_right .r_text_ani {
  width: 638px;
  height: 350px;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.tit_right .r_text_ani canvas {
  width: 100%;
  height: 100%;
}

.tit_box {
  width: 100%;
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  padding: 0 100px;
}

.tit_box .item .btn {
  margin: 0 auto;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  pointer-events: none;
  z-index: 2;
  position: relative;
  animation: btnAni 1s linear infinite;
}

.tit_box .item .btn > span {
  position: absolute;
  left: 1px;
  top: 1px;
  pointer-events: none;
}

.tit_box .item .btn > span canvas {
  width: 100%;
  height: 100%;
}

.tit_box .item .btn.active {
  opacity: 1;
  pointer-events: auto;
}

@keyframes btnAni {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.dnfact_navbg {
  display: none;
}

.login-box {
  font-size: 18px;
  color: #cd6de9;
  position: absolute;
  width: 100%;
  height: fit-content;
  text-align: center;
  bottom: 365px;
  left: 0;
  pointer-events: all;
  z-index: 99;
}

.login-box a {
  color: #f7df98;
}

.login-box.active {
  width: auto;
  text-align: right;
  position: absolute;
  right: 20px;
  top: 20px;
}

.login-box.active a {
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
}

.kv_tit {
  width: 984px;
  height: 462px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/kv_tit.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 130px;
  left: 52%;
  transform: translateX(-50%);
  pointer-events: none;
}

.btn0 {
  position: absolute;
  left: 47.5%;
  bottom: 90px;
  transform: translateX(-50%);
  pointer-events: all;
}

.gm_prop {
  display: none;
}

.kv_tit_s {
  width: 614px;
  height: 305px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/kv_tit_s.png) no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  margin-bottom: -50px;
  pointer-events: none;
  transition: all 0.5s ease-in-out;
  opacity: 0;
}

.kv_tit_s.active {
  top: 0;
  opacity: 1;
}

.task_page {
  width: 100%;
  height: 1080px;
  position: relative;
  display: none;
  z-index: 3;
  overflow-y: auto;
}

.task_page::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
  display: none;
}

.task_page::-webkit-scrollbar-thumb {
  background-color: transparent;
  display: none;
}

.task_page .task_con_box {
  width: 100%;
  padding: 0 150px;
  margin-top: calc(50vh);
  height: 1000px;
  position: relative;
}

.task_page .friend_box {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 570px;
}

.task_page .friend_box .btn3 {
  margin-left: 20px;
}

.task_page .friend_box.left {
  left: 150px;
}

.task_page .friend_box.left .tit_right {
  display: none;
}

.task_page .friend_box.right {
  right: 150px;
}

.task_page .friend_box.right .tit_left {
  display: none;
}

.task_page .qd_box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.task_page .qd_box.left {
  left: 150px;
}

.task_page .qd_box.right {
  right: 150px;
}

.task_page .friend_box .tit_left {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/tit_left_s.png?v=2);
  transform: translateX(-149px) translateY(260px);
}

.task_page .friend_box .tit_left.active {
  width: 535px;
  height: 269px;
  margin-bottom: -10px;
  transform: translateX(-10px) translateY(0);
}

.task_page .friend_box .tit_right {
  margin-top: 0;
  margin-bottom: -10px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/tit_right_s.png);
  transform: translateX(149px) translateY(260px);
}

.task_page .friend_box .tit_right.active {
  width: 438px;
  height: 269px;
  transform: translateX(0) translateY(0);
}

.task_page .friend_box .tip {
  font-size: 18px;
  color: #fff;
}

.task_page .friend_box .prop_box {
  display: flex;
}

.task_page .friend_box .prop_box .prop_item {
  margin: 0 15px;
}

.task_page .friend_box .prop_box .prop_item .prop {
  text-align: center;
}

.task_page .friend_box .prop_box .prop_item .prop img {
  width: 119px;
  margin: 0 auto;
}

.task_page .friend_box .prop_box .prop_item .prop .prop_name {
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  word-break: break-word;
}

.task_page .friend_box .prop_box .btn {
  margin: 10px auto;
}

.task_page .qd_box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 600px;
  height: 720px;
}

.task_page .qd_box .task_con {
  flex-wrap: wrap;
}

.task_page .qd_box .task_item {
  width: 182px;
  height: 248px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task_bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 20px;
  position: relative;
}

.task_page .qd_box .task_item .btn {
  margin-top: 173px;
}

.task_page .qd_box .task_item .task {
  font-size: 16px;
  color: #e5e5e5;
  text-align: center;
  line-height: 1.2;
  padding: 0 20px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  word-break: break-word;
}

.task_page .qd_box .task_item .prop {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.task_page .qd_box .task_item .prop img {
  height: 58px;
  object-fit: contain;
}

.task_page .qd_box .task_item:nth-child(1) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task1.png);
}

.task_page .qd_box .task_item.active:nth-child(1) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task1_on.png);
}

.task_page .qd_box .task_item:nth-child(2) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task2.png);
}

.task_page .qd_box .task_item.active:nth-child(2) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task2_on.png);
}

.task_page .qd_box .task_item:nth-child(3) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task3.png);
}

.task_page .qd_box .task_item.active:nth-child(3) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task3_on.png);
}

.task_page .qd_box .task_item:nth-child(4) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task4.png);
}

.task_page .qd_box .task_item.active:nth-child(4) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task4_on.png);
}

.task_page .qd_box .task_item:nth-child(5) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task5.png);
}

.task_page .qd_box .task_item.active:nth-child(5) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task5_on.png);
}

.task_page .qd_box .task_item:nth-child(6) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task6.png);
}

.task_page .qd_box .task_item.active:nth-child(6) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task6_on.png);
}

.tips_box {
  position: relative;
}

.page_tip {
  width: 1600px;
  font-size: 16px;
  color: #a246e7;
  text-align: center;
  line-height: 1.2;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  word-break: break-word;
  position: absolute;
  pointer-events: none;
  display: none !important;
  /* left: 500px; */
  left: 0;
  top: 0;
}

.rules_box {
  width: 100%;
  margin: 0 auto;
  min-height: 219px;
  padding: 50px 0;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/rules_bg1.png) no-repeat;
  background-size: 100% 100%;
  display: none;
}

.rules_box .rulse {
  width: 1360px;
  margin: 0 auto;
}

.rules_box p {
  font-size: 16px;
  color: #cac2f8;
  margin-bottom: 10px;
}

.rules_box .btn_rules {
  width: 240px;
  height: 68px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn_rules.png);
  background-size: 100% 100%;
}

.btn_bg {
  position: absolute;
  top: 90px;
  right: 0;
  width: 376px;
  height: 14px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn_bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px 50px;
  box-sizing: border-box;
  z-index: 5;
}

.btn_bg a {
  margin: 0 15px;
  margin-top: -50px;
}

.btn_bg .btn_xz {
  width: 84px;
  height: 26px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn_xz.png);
  background-size: 100% 100%;
}

.btn_bg .btn_go_gw {
  width: 82px;
  height: 24px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn_go_gw.png);
  background-size: 100% 100%;
}

.p_con_bg {
  width: 551px;
  height: 315px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/p_con_bg.png) no-repeat;
  background-size: 100% 100%;
  padding: 30px 50px;
  box-sizing: border-box;
}

.p_con_bg .items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.p_con_bg .items .btn,
.p_con_bg .items p {
  font-size: 16px;
  color: #cad1cf;
}

.p_con_bg .items .input_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 262px;
  height: 27px;
  border: 1px solid #fff;
}

.p_con_bg .items .input_box input {
  width: 197px;
  height: 27px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/input.png) no-repeat;
  background-size: 100% 100%;
  color: #fff;
  padding: 0 10px;
  border: 0;
  background: none;
}

.p_con_bg .items .input_box a {
  width: 60px;
  height: 100%;
  border-left: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  background-color: #3a0aac;
}

.friend_table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

.friend_table thead {
  border-bottom: 1px solid #222222;
}

.friend_table tbody {
  margin-top: 10px;
}

.friend_table th {
  text-align: center;
  justify-content: center;
}

.friend_table tr {
  height: 32px;
  box-sizing: content-box;
  padding: 10px 0;
}

.friend_table .qq {
  width: 90px;
  text-align: center;
}

.friend_table .label {
  width: 80px;
}

.friend_table .name {
  width: 130px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend_table .check {
  width: 50px;
  text-align: center;
}

.friend_table td.btn,
.friend_table th.btn {
  width: 110px;
  justify-content: center;
}

.friend_table td,
.friend_table th {
  padding: 5px 0;
  font-size: 16px;
  color: #cad1cf;
}

.friend_table .label1 {
  font-size: 14px;
  color: #fff;
  width: 69px;
  height: 18px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/label1.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
}

.friend_table .check i {
  width: 15px;
  height: 15px;
  display: flex;
  border: 1px solid #864af9;
  cursor: pointer;
  margin: 0 auto;
  position: relative;
}

.friend_table .check i.active::after {
  content: '';
  width: 18px;
  height: 15px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/icon1.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 1px;
  top: -2px;
  pointer-events: none;
}

.btn_box a {
  margin: 0 20px;
}

.tips_box {
  margin-top: 30px;
}

.tips_box .tip {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #e5e5e5;
  margin-right: 50px;
}

.tips_box .tip i {
  width: 15px;
  height: 15px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/check.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin-right: 5px;
  cursor: pointer;
}

.tips_box .tip i.active::after {
  content: '';
  width: 18px;
  height: 15px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/icon1.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 1px;
  top: -2px;
  pointer-events: none;
}

.tips_box a {
  font-size: 16px;
  color: #e5e5e5;
  text-decoration: underline;
}

.dia {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  z-index: 999999;
}

.dia .dia_close {
  position: absolute;
  top: -45px;
  right: -45px;
  width: 45px;
  height: 45px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/dia_close.png) no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.pop1 {
  width: 551px;
  min-height: 315px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/dia_bg1.png) no-repeat;
  background-size: 100% 100%;
  padding-top: 48px;
}

.pop1 .title {
  margin: 0 auto;
}

.pop1 .tip {
  font-size: 18px;
  height: 50px;
  color: #ba93fa;
  margin-top: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  word-break: break-all;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  padding: 0 20px;
}

.pop1 .link {
  width: 330px;
  height: 34px;
  margin: 40px auto;
  background-color: #000;
  border: 1px solid #8228ff;
  color: #8228ff;
  text-align: center;
  padding: 0 10px;
  display: block;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pop1 input {
  width: 330px;
  height: 34px;
  margin: 40px auto;
  background-color: #000;
  border: 1px solid #8228ff;
  color: #8228ff;
  text-align: center;
  padding: 0 10px;
  display: block;
  font-size: 18px;
}

.pop1 .btn {
  margin: 0 auto;
}

.pop1.gm {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/dia_bg1_2.png);
}

.pop1.gm .tip {
  color: #9f743e;
}

.pop1.gm .link {
  background-color: #e9d3af;
  border: 1px solid #9f743e;
  color: #9f743e;
  text-align: center;
}

.pop1.gm input {
  background-color: #e9d3af;
  border: 1px solid #9f743e;
  color: #9f743e;
}

.pop1.gm .pop-page-turning a {
  font-size: 16px;
  color: #37211a;
}

.pop1.gm .pop-page-turning span {
  font-size: 16px;
  color: #37211a;
  margin: 0 20px;
}

.pop1.gm .pop-tit {
  color: #37211a;
}

.pop1.gm th {
  border-bottom: 1px solid #ecdbbb;
  color: #37211a;
}

.pop1.gm td {
  color: #37211a;
}

.pop1.gm tr {
  border-bottom: 1px solid #ecdbbb;
}

.dia_btn1 {
  width: 218px;
  height: 73px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/dia_btn1.png) no-repeat;
  background-size: 100% 100%;
}

.dia_btn2 {
  width: 218px;
  height: 73px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/dia_btn2.png) no-repeat;
  background-size: 100% 100%;
}

.dia_tit1 {
  width: 342px;
  height: 35px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/dia_tit1.png) no-repeat;
  background-size: 100% 100%;
}

.dia_tit2 {
  width: 342px;
  height: 35px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/dia_tit2.png) no-repeat;
  background-size: 100% 100%;
}

.xh_icon {
  width: 109px;
  height: 100px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/xh_icon.png) no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  position: absolute;
  top: calc(100vh - 110px);
  left: 50%;
  transform: translateX(-50%);
}

.xh_icon3 {
  width: 315px;
  height: 99px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/xh_icon3.png) no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  margin-top: -30px;
}

.pop2 {
  padding-left: 50px;
  padding-right: 50px;
  width: 661.2px;
  height: 462px;
}

.pop2 .pop-page-turning {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.pop2 .pop-page-turning a {
  font-size: 16px;
  color: #cad1cf;
}

.pop2 .pop-page-turning span {
  font-size: 16px;
  color: #cad1cf;
  margin: 0 20px;
}

.pop2 .pop-tit {
  font-size: 24px;
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
}

.pop2 table {
  width: 100%;
  border-collapse: collapse;
}

.pop2 th {
  font-size: 16px;
  border-bottom: 1px solid #8228ff;
  color: #cad1cf;
  font-weight: bold;
  padding-right: 10px;
  padding: 10px;
}

.pop2 td {
  font-size: 16px;
  color: #cad1cf;
  padding: 10px;
  text-align: center;
  word-break: break-all;
}

.pop2 tr {
  border-bottom: 1px solid #8228ff;
}

.rules_box.gm p {
  color: #ddc292;
}

.wenhao {
  width: 20px;
  height: 20px;
  left: 140px;
  top: 170px;
  position: absolute;
  z-index: 2;
  cursor: pointer;
}

.wenhao .tip_con {
  width: 320px;
  text-align: center;
  display: none;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  font-size: 18px;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -30px;
}

.wenhao:hover .tip_con {
  display: block;
}

.gm .xh_icon3 {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/xh_icon4.png);
}

.gm .page_tip {
  color: #fbe9c5;
  left: auto;
  right: 0;
}

.gm .pop2 .pop-page-turning a {
  font-size: 16px;
  color: #37211a;
}

.gm .pop2 .pop-page-turning span {
  font-size: 16px;
  color: #37211a;
  margin: 0 20px;
}

.gm .pop2 .pop-tit {
  color: #37211a;
}

.gm .pop2 th {
  border-bottom: 1px solid #ecdbbb;
  color: #37211a;
}

.gm .pop2 td {
  color: #37211a;
}

.gm .pop2 tr {
  border-bottom: 1px solid #ecdbbb;
}

.gm .xh_icon {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/xh_icon2.png);
}

.gm .dia_tit1 {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/dia_tit1_2.png) !important;
}

.gm .dia_tit2 {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/dia_tit2_2.png) !important;
}

.gm .dia_btn1 {
  width: 231px;
  height: 57px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/dia_btn1_2.png) !important;
}

.gm .dia_btn2 {
  width: 231px;
  height: 57px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/dia_btn2_2.png) !important;
}

.gm .pop1 {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/dia_bg1_2.png) !important;
}

.gm .pop1 .tip {
  color: #9f743e;
}

.gm .pop1 .link {
  background-color: #e9d3af;
  border: 1px solid #9f743e;
  color: #9f743e;
  text-align: center;
}

.gm .pop1 input {
  background-color: #e9d3af;
  border: 1px solid #9f743e;
  color: #9f743e;
}

.gm .dia_close {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/dia_close_2.png) !important;
}

.gm .friend_box {
  align-items: end;
}

.gm .friend_box .prop_box .prop_item .prop .prop_name {
  color: #36211b;
}

.gm .friend_box .tit_right {
  margin-right: -30px;
}

.gm .friend_box .btn3 {
  margin-left: 0;
  margin-right: 20px;
}

.gm .friend_box .tip {
  color: #43300c;
}

.gm .btn_rules {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn_rules2.png);
}

.gm .ze_prop {
  display: none;
}

.gm .gm_prop {
  display: block;
}

.gm .text_hy {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/text_hy2.png);
}

.gm .p_con_bg .items .btn,
.gm .p_con_bg .items p {
  color: #36211b;
}

.gm .friend_table .check i {
  border: 1px solid #36211b;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/check2.png);
}

.gm .friend_table .check i.active::after {
  content: '';
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/icon2.png);
}

.gm .tips_box .tip {
  color: #e5e5e5;
}

.gm .tips_box .tip i {
  background: #f3e3c3;
}

.gm .tips_box .tip i.active::after {
  content: '';
  left: 2px;
  top: -1px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/icon2.png);
}

.gm .btn4 {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn4_2.png);
}

.gm .btn3 {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn3_2.png);
  width: 231px;
  height: 57px;
  margin-bottom: 0;
}

.gm .btn5 {
  width: 86px;
  height: 27px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn5_2.png);
}

.gm .btn6 {
  width: 140px;
  height: 47px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn6_2.png);
}

.gm .btn7 {
  width: 140px;
  height: 47px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn7_2.png);
}

.gm .kv_tit_s {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/kv_tit_s_2.png);
}

.gm .p_con_bg {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/p_con_bg2.png);
}

.gm .p_con_bg .items .input_box {
  background-color: #e9d3af;
  border: 1px solid #36211b;
}

.gm .p_con_bg .items .input_box input {
  color: #36211b;
}

.gm .p_con_bg .items .input_box a {
  background-color: #f2cf77;
}

.gm .p_con_bg .friend_table th,
.gm .p_con_bg .friend_table td {
  color: #36211b;
}

.gm .p_con_bg .friend_table .label1 {
  color: #36211b;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/label2.png);
}

.gm.task_page .qd_box .task_item:nth-child(1) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task1_2.png);
}

.gm.task_page .qd_box .task_item.active:nth-child(1) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task1_2_on.png);
}

.gm.task_page .qd_box .task_item:nth-child(2) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task2_2.png);
}

.gm.task_page .qd_box .task_item.active:nth-child(2) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task2_2_on.png);
}

.gm.task_page .qd_box .task_item:nth-child(3) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task3_2.png);
}

.gm.task_page .qd_box .task_item.active:nth-child(3) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task3_2_on.png);
}

.gm.task_page .qd_box .task_item:nth-child(4) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task4_2.png);
}

.gm.task_page .qd_box .task_item.active:nth-child(4) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task4_2_on.png);
}

.gm.task_page .qd_box .task_item:nth-child(5) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task5_2.png);
}

.gm.task_page .qd_box .task_item.active:nth-child(5) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task5_2_on.png);
}

.gm.task_page .qd_box .task_item:nth-child(6) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task6_2.png);
}

.gm.task_page .qd_box .task_item.active:nth-child(6) {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/task6_2_on.png);
}

.text_hy {
  width: 180px;
  height: 20px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/text_hy.png) no-repeat;
  background-size: 100% 100%;
}

.home_r_img {
  position: absolute;
  left: 50%;
  top: 720px;
  transform: translate(-50%, -50%);
  width: 1093px;
  object-fit: contain;
  opacity: 0;
  z-index: 999;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}

.btn0 {
  width: 356px;
  height: 139px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn0.png) no-repeat;
  background-size: 100% 100%;
  z-index: 100;
}

.btn1 {
  width: 273px;
  height: 92px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn1.png) no-repeat;
  background-size: 100% 100%;
}

.btn2 {
  width: 280px;
  height: 75px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn2.png) no-repeat;
  background-size: 100% 100%;
}

.btn3 {
  width: 192px;
  height: 90px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn3.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  z-index: 2;
  margin-bottom: -20px;
}

.btn4 {
  width: 108px;
  height: 35px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn4.png) no-repeat;
  background-size: 100% 100%;
}

.btn5 {
  width: 86px;
  height: 27px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn5.png) no-repeat;
  background-size: 100% 100%;
}

.btn6 {
  width: 146px;
  height: 47px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn6.png) no-repeat;
  background-size: 100% 100%;
}

.btn7 {
  width: 146px;
  height: 47px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn7.png) no-repeat;
  background-size: 100% 100%;
}

.btn_rules {
  width: 241px;
  height: 68px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/btn_rules.png) no-repeat;
  background-size: 100% 100%;
  margin-left: -20px;
  margin-top: -20px;
}

/* footer */
#afooter {
  text-align: center;
  line-height: 20px;
  color: #cccccc;
  background-color: #000;
  padding: 20px 0;
}

#afooter a {
  color: #cccccc;
}

/* 表格容器设置固定高度和隐藏溢出 */
.scroll-table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  max-height: 400px;
  /* 设置你需要的固定高度 */
  overflow: hidden;
}

/* 表头固定（可选，如需表头不滚动） */
.scroll-table thead {
  display: table-header-group;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* tbody设置垂直滚动 */
.scroll-table tbody {
  display: block;
  height: 300px;
  /* 减去表头高度，根据实际调整 */
  overflow-y: auto;
}

.scroll-table tbody::-webkit-scrollbar {
  width: 4px;
  background: #000;
}

.scroll-table tbody::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 2px;
}

/* 保持表格行结构和列宽一致 */
.scroll-table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  /* 确保列宽固定 */
}

/*  第二期*/
.cos_page {
  width: 100%;
  position: relative;
  margin-top: 80px;
  z-index: 3;
}

.cos_box1 {
  width: 100%;
  height: 1080px;
  position: relative;
}

.cos_box1::after {
  content: '';
  position: absolute;
  top: -111px;
  left: 0;
  width: 100%;
  height: 1471px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos_bg_1.png);
}

.cos_box1 .cos_btn1_1 {
  position: absolute;
  right: 50px;
  top: -100px;
  width: 359px;
  height: 160px;
  z-index: 99;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos_btn1.png) center top no-repeat;
}

.cos_box1 .card_info {
  position: absolute;
  height: 400px;
  top: 0;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: 15;
  display: none;
}

.cos_box1 .card_info .name_cos1_1 {
  width: 309px;
  height: 60px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos1_1.png) center bottom no-repeat;
}

.cos_box1 .card_info .name_cos1_2 {
  width: 309px;
  height: 60px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos1_2.png) center bottom no-repeat;
}

.cos_box1 .card_info .name_cos1_3 {
  width: 309px;
  height: 60px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos1_3.png) center bottom no-repeat;
}

.cos_box1 .card_info .name_cos1_4 {
  width: 309px;
  height: 60px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos1_4.png) center bottom no-repeat;
}

.cos_box1 .card_info .name_cos1_5 {
  width: 309px;
  height: 60px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos1_5.png) center bottom no-repeat;
}

.cos_box1 .card_info .name_cos1_6 {
  width: 309px;
  height: 60px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos1_6.png) center bottom no-repeat;
}

.cos_box1 .card_info .name_cos1_7 {
  width: 309px;
  height: 60px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos1_7.png) center bottom no-repeat;
}

.cos_box1 .card_info .name_cos1_8 {
  width: 309px;
  height: 60px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos1_8.png) center bottom no-repeat;
}

.cos_box1 .card_info .name_cos1_9 {
  width: 309px;
  height: 60px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos1_9.png) center bottom no-repeat;
}

.cos_box1 .card_info .name_cos1_10 {
  width: 309px;
  height: 60px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos1_10.png) center bottom no-repeat;
}

.cos_box1 .card_info .name_cos1_11 {
  width: 309px;
  height: 60px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos1_11.png) center bottom no-repeat;
}

.cos_box1 .card_info .name_cos1_12 {
  width: 309px;
  height: 60px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos1_12.png) center bottom no-repeat;
}

.cos_box1 .card_info .name_cos1_13 {
  width: 309px;
  height: 60px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos1_13.png) center bottom no-repeat;
}

.cos_box1 .card_info .info_box {
  width: 629px;
  height: 413px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos_info_bg1.png);
  padding-top: 80px;
  margin: 0 auto;
}

.cos_box1 .card_info .foot {
  margin-top: 10px;
}

.cos_box1 .card_info .zan_icon {
  width: 22px;
  height: 20px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/zan_icon.png);
}

.cos_box1 .card_info .zan_icon.active {
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/zan_icon_on.png);
}

.cos_box1 .card_info .info {
  width: 520px;
  height: 260px;
  overflow: hidden;
  overflow-y: auto;
  color: #ffebfd;
  font-size: 17px;
  margin: 0 auto;
  word-break: break-all;
}

.cos_box1 .card_info .info::-webkit-scrollbar {
  background: transparent;
  width: 5px;
}

.cos_box1 .card_info .info::-webkit-scrollbar-thumb {
  background: #ff9ff9;
  width: 5px;
}

.cos_box1 .card_info .info h2 {
  font-size: 19px;
  font-weight: bold;
  margin-top: 10px;
  display: block;
}

.cos_box1 .card_info .foot {
  width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  color: #ffebfd;
  font-size: 17px;
  margin-top: 10px;
}

.cos_box1 .card_info .foot a {
  margin-right: 10px;
}

.cos_box1 .cos_zz {
  width: 100%;
  height: 1471px;
  position: absolute;
  top: -111px;
  background: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
  left: 0;
  z-index: 14;
  display: none;
}

.cos_box1 .cos1 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 13;
  cursor: pointer;
}

.cos_box1 .cos1.active {
  z-index: 99;
}

.cos_box1 .cos1.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box1 .cos1.active .card_info {
  display: block;
}

.cos_box1 .cos2 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 12;
  cursor: pointer;
}

.cos_box1 .cos2.active {
  z-index: 99;
}

.cos_box1 .cos2.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box1 .cos2.active .card_info {
  display: block;
}

.cos_box1 .cos3 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 11;
  cursor: pointer;
}

.cos_box1 .cos3.active {
  z-index: 99;
}

.cos_box1 .cos3.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box1 .cos3.active .card_info {
  display: block;
}

.cos_box1 .cos4 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 10;
  cursor: pointer;
}

.cos_box1 .cos4.active {
  z-index: 99;
}

.cos_box1 .cos4.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box1 .cos4.active .card_info {
  display: block;
}

.cos_box1 .cos5 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 9;
  cursor: pointer;
}

.cos_box1 .cos5.active {
  z-index: 99;
}

.cos_box1 .cos5.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box1 .cos5.active .card_info {
  display: block;
}

.cos_box1 .cos6 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 8;
  cursor: pointer;
}

.cos_box1 .cos6.active {
  z-index: 99;
}

.cos_box1 .cos6.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box1 .cos6.active .card_info {
  display: block;
}

.cos_box1 .cos7 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 7;
  cursor: pointer;
}

.cos_box1 .cos7.active {
  z-index: 99;
}

.cos_box1 .cos7.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box1 .cos7.active .card_info {
  display: block;
}

.cos_box1 .cos8 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 6;
  cursor: pointer;
}

.cos_box1 .cos8.active {
  z-index: 99;
}

.cos_box1 .cos8.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box1 .cos8.active .card_info {
  display: block;
}

.cos_box1 .cos9 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 5;
  cursor: pointer;
}

.cos_box1 .cos9.active {
  z-index: 99;
}

.cos_box1 .cos9.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box1 .cos9.active .card_info {
  display: block;
}

.cos_box1 .cos10 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 4;
  cursor: pointer;
}

.cos_box1 .cos10.active {
  z-index: 99;
}

.cos_box1 .cos10.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box1 .cos10.active .card_info {
  display: block;
}

.cos_box1 .cos11 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 3;
  cursor: pointer;
}

.cos_box1 .cos11.active {
  z-index: 99;
}

.cos_box1 .cos11.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box1 .cos11.active .card_info {
  display: block;
}

.cos_box1 .cos12 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 2;
  cursor: pointer;
}

.cos_box1 .cos12.active {
  z-index: 99;
}

.cos_box1 .cos12.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box1 .cos12.active .card_info {
  display: block;
}

.cos_box1 .cos13 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 1;
  cursor: pointer;
}

.cos_box1 .cos13.active {
  z-index: 99;
}

.cos_box1 .cos13.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box1 .cos13.active .card_info {
  display: block;
}

.cos_box1 .cos1 {
  left: 747px;
  top: 274px;
  width: 455px;
  height: 691px;
}

.cos_box1 .cos1.active::after {
  width: 1459px;
  height: 932px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_1.png);
  top: -126px;
  left: -552px;
  pointer-events: none;
}

.cos_box1 .cos2 {
  left: 352px;
  top: 533px;
  width: 396px;
  height: 390px;
}

.cos_box1 .cos2.active::after {
  width: 1284px;
  height: 631px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_2.png);
  top: -84px;
  left: -353px;
  pointer-events: none;
}

.cos_box1 .cos3 {
  left: 1201px;
  top: 608px;
  width: 381px;
  height: 458px;
}

.cos_box1 .cos3.active::after {
  width: 643px;
  height: 491px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_3.png);
  top: -20px;
  left: -118px;
  pointer-events: none;
}

.cos_box1 .cos4 {
  left: 0;
  top: 533px;
  width: 352px;
  height: 458px;
}

.cos_box1 .cos4.active::after {
  width: 761px;
  height: 609px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_4.png);
  top: -63px;
  left: 0;
  pointer-events: none;
}

.cos_box1 .cos5 {
  left: 1581px;
  top: 608px;
  width: 330px;
  height: 454px;
}

.cos_box1 .cos5.active::after {
  width: 532px;
  height: 716px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_5.png);
  top: -246px;
  left: -194px;
  pointer-events: none;
}

.cos_box1 .cos6 {
  left: 0;
  top: 274px;
  width: 352px;
  height: 260px;
}

.cos_box1 .cos6.active::after {
  width: 937px;
  height: 994px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  top: -190px;
  left: 0;
  pointer-events: none;
}

.cos_box1 .cos7 {
  left: 1201px;
  top: 274px;
  width: 381px;
  height: 335px;
}

.cos_box1 .cos7.active::after {
  width: 749px;
  height: 564px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_7.png);
  top: -82px;
  left: -220px;
  pointer-events: none;
}

.cos_box1 .cos8 {
  left: 1581px;
  top: 378px;
  width: 331px;
  height: 231px;
}

.cos_box1 .cos8.active::after {
  width: 590px;
  height: 728px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_8.png);
  top: -24px;
  left: -251px;
  pointer-events: none;
}

.cos_box1 .cos9 {
  left: 0;
  top: 0;
  width: 290px;
  height: 274px;
}

.cos_box1 .cos9.active::after {
  width: 575px;
  height: 675px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_9.png);
  top: -106px;
  left: 0;
  pointer-events: none;
}

.cos_box1 .cos10 {
  left: 352px;
  top: 0;
  width: 452px;
  height: 500px;
}

.cos_box1 .cos10.active::after {
  width: 802px;
  height: 681px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_10.png);
  top: -64px;
  left: -75px;
  pointer-events: none;
}

.cos_box1 .cos11 {
  left: 857px;
  top: 0;
  width: 427px;
  height: 274px;
}

.cos_box1 .cos11.active::after {
  width: 1035px;
  height: 622px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_11.png);
  top: -82px;
  left: -275px;
  pointer-events: none;
}

.cos_box1 .cos12 {
  left: 1283px;
  top: 0;
  width: 228px;
  height: 274px;
}

.cos_box1 .cos12.active::after {
  width: 884px;
  height: 727px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_12.png);
  top: 17px;
  left: -295px;
  pointer-events: none;
}

.cos_box1 .cos12.active .card_info {
  top: 80%;
}

.cos_box1 .cos13 {
  left: 1581px;
  top: 137px;
  width: 331px;
  height: 240px;
  z-index: 1;
}

.cos_box1 .cos13.active::after {
  width: 459px;
  height: 619px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_13.png);
  top: -48px;
  left: -118px;
  pointer-events: none;
}

.cos_box2 {
  width: 100%;
  height: 1080px;
  position: relative;
  display: none;
}

.cos_box2::after {
  content: '';
  position: absolute;
  top: -73px;
  left: 0;
  width: 100%;
  height: 1344px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos_bg_2.png);
  pointer-events: none;
}

.cos_box2 .cos_btn1_2 {
  position: absolute;
  right: 100px;
  top: -50px;
  width: 338px;
  height: 185px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos_btn1_2.png) center center no-repeat;
  z-index: 999;
}

.cos_box2 .card_info {
  position: absolute;
  height: 400px;
  top: 0;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: 15;
  display: none;
}

.cos_box2 .card_info .name_cos2_1 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_1.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_2 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_2.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_3 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_3.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_4 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_4.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_5 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_5.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_6 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_6.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_7 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_7.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_8 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_8.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_9 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_9.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_10 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_10.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_11 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_11.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_12 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_12.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_13 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_13.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_14 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_14.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_15 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_15.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_16 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_16.png) center bottom no-repeat;
}

.cos_box2 .card_info .name_cos2_17 {
  width: 309px;
  height: 89px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/name_cos2_17.png) center bottom no-repeat;
}

.cos_box2 .card_info .info_box {
  width: 629px;
  height: 413px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos_info_bg1_2.png) center center no-repeat;
  padding-top: 70px;
  margin: 0 auto;
}

.cos_box2 .card_info .foot {
  margin-top: 10px;
}

.cos_box2 .card_info .zan_icon {
  width: 22px;
  height: 20px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/zan_icon.png);
}

.cos_box2 .card_info .zan_icon.active {
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/zan_icon_on.png);
}

.cos_box2 .card_info .info {
  width: 520px;
  height: 260px;
  overflow: hidden;
  overflow-y: auto;
  color: #b77c34;
  font-size: 17px;
  margin: 0 auto;
  word-break: break-all;
}

.cos_box2 .card_info .info::-webkit-scrollbar {
  background: transparent;
  width: 5px;
}

.cos_box2 .card_info .info::-webkit-scrollbar-thumb {
  background: #b77c34;
  width: 5px;
}

.cos_box2 .card_info .foot {
  width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  color: #b77c34;
  font-size: 14px;
  margin-top: 10px;
}

.cos_box2 .card_info .foot a {
  margin-right: 10px;
}

.cos_box2 .cos_zz {
  width: 100%;
  height: 1344px;
  position: absolute;
  background: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
  top: -173px;
  left: 0;
  z-index: 14;
  display: none;
}

.cos_box2 .cos1 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 16;
  cursor: pointer;
}

.cos_box2 .cos1.active {
  z-index: 99;
}

.cos_box2 .cos1.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos1.active .card_info {
  display: block;
}

.cos_box2 .cos2 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 15;
  cursor: pointer;
}

.cos_box2 .cos2.active {
  z-index: 99;
}

.cos_box2 .cos2.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos2.active .card_info {
  display: block;
}

.cos_box2 .cos3 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 14;
  cursor: pointer;
}

.cos_box2 .cos3.active {
  z-index: 99;
}

.cos_box2 .cos3.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos3.active .card_info {
  display: block;
}

.cos_box2 .cos4 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 13;
  cursor: pointer;
}

.cos_box2 .cos4.active {
  z-index: 99;
}

.cos_box2 .cos4.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos4.active .card_info {
  display: block;
}

.cos_box2 .cos5 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 12;
  cursor: pointer;
}

.cos_box2 .cos5.active {
  z-index: 99;
}

.cos_box2 .cos5.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos5.active .card_info {
  display: block;
}

.cos_box2 .cos6 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 11;
  cursor: pointer;
}

.cos_box2 .cos6.active {
  z-index: 99;
}

.cos_box2 .cos6.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos6.active .card_info {
  display: block;
}

.cos_box2 .cos7 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 10;
  cursor: pointer;
}

.cos_box2 .cos7.active {
  z-index: 99;
}

.cos_box2 .cos7.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos7.active .card_info {
  display: block;
}

.cos_box2 .cos8 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 9;
  cursor: pointer;
}

.cos_box2 .cos8.active {
  z-index: 99;
}

.cos_box2 .cos8.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos8.active .card_info {
  display: block;
}

.cos_box2 .cos9 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 8;
  cursor: pointer;
}

.cos_box2 .cos9.active {
  z-index: 99;
}

.cos_box2 .cos9.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos9.active .card_info {
  display: block;
}

.cos_box2 .cos10 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 7;
  cursor: pointer;
}

.cos_box2 .cos10.active {
  z-index: 99;
}

.cos_box2 .cos10.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos10.active .card_info {
  display: block;
}

.cos_box2 .cos11 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 6;
  cursor: pointer;
}

.cos_box2 .cos11.active {
  z-index: 99;
}

.cos_box2 .cos11.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos11.active .card_info {
  display: block;
}

.cos_box2 .cos12 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 5;
  cursor: pointer;
}

.cos_box2 .cos12.active {
  z-index: 99;
}

.cos_box2 .cos12.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos12.active .card_info {
  display: block;
}

.cos_box2 .cos13 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 4;
  cursor: pointer;
}

.cos_box2 .cos13.active {
  z-index: 99;
}

.cos_box2 .cos13.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos13.active .card_info {
  display: block;
}

.cos_box2 .cos14 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 3;
  cursor: pointer;
}

.cos_box2 .cos14.active {
  z-index: 99;
}

.cos_box2 .cos14.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos14.active .card_info {
  display: block;
}

.cos_box2 .cos15 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 2;
  cursor: pointer;
}

.cos_box2 .cos15.active {
  z-index: 99;
}

.cos_box2 .cos15.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos15.active .card_info {
  display: block;
}

.cos_box2 .cos16 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 1;
  cursor: pointer;
}

.cos_box2 .cos16.active {
  z-index: 99;
}

.cos_box2 .cos16.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos16.active .card_info {
  display: block;
}

.cos_box2 .cos17 {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 0;
  cursor: pointer;
}

.cos_box2 .cos17.active {
  z-index: 99;
}

.cos_box2 .cos17.active::after {
  content: '';
  display: block;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos1_6.png);
  width: 937px;
  height: 994px;
  position: absolute;
  top: -192px;
  left: 0;
}

.cos_box2 .cos17.active .card_info {
  display: block;
}

.cos_box2 .cos1 {
  left: 960px;
  top: 440px;
  width: 325px;
  height: 642px;
}

.cos_box2 .cos1.active::after {
  width: 588px;
  height: 640px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_1.png);
  top: 0px;
  left: -142px;
  pointer-events: none;
}

.cos_box2 .cos2 {
  left: 595px;
  top: 490px;
  width: 365px;
  height: 591px;
}

.cos_box2 .cos2.active::after {
  width: 486px;
  height: 586px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_2.png);
  top: 4px;
  left: -20px;
  pointer-events: none;
}

.cos_box2 .cos3 {
  left: 262px;
  top: 490px;
  width: 334px;
  height: 591px;
}

.cos_box2 .cos3.active::after {
  width: 608px;
  height: 703px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_3.png);
  top: -114px;
  left: -12px;
  pointer-events: none;
}

.cos_box2 .cos4 {
  left: 1392px;
  top: 525px;
  width: 270px;
  height: 558px;
}

.cos_box2 .cos4.active::after {
  width: 858px;
  height: 592px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_4.png);
  top: -35px;
  left: -338px;
  pointer-events: none;
}

.cos_box2 .cos5 {
  left: 0;
  top: 490px;
  width: 262px;
  height: 591px;
}

.cos_box2 .cos5.active::after {
  width: 842px;
  height: 593px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_5.png);
  top: -4px;
  left: 0;
  pointer-events: none;
}

.cos_box2 .cos6 {
  left: 1668px;
  top: 414px;
  width: 251px;
  height: 608px;
}

.cos_box2 .cos6.active::after {
  width: 644px;
  height: 704px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_6.png);
  top: -37px;
  left: -392px;
  pointer-events: none;
}

.cos_box2 .cos7 {
  left: 544px;
  top: 196px;
  width: 267px;
  height: 295px;
}

.cos_box2 .cos7.active::after {
  width: 376px;
  height: 896px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_7.png);
  top: -14px;
  left: -52px;
  pointer-events: none;
}

.cos_box2 .cos8 {
  left: 810px;
  top: 196px;
  width: 331px;
  height: 231px;
}

.cos_box2 .cos8.active::after {
  width: 1413px;
  height: 859px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_8.png);
  top: -97px;
  left: -433px;
  pointer-events: none;
}

.cos_box2 .cos9 {
  left: 1039px;
  top: 171px;
  width: 247px;
  height: 269px;
}

.cos_box2 .cos9.active::after {
  width: 561px;
  height: 787px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_9.png);
  top: -4px;
  left: -82px;
  pointer-events: none;
}

.cos_box2 .cos10 {
  left: 0;
  top: 0;
  width: 233px;
  height: 490px;
}

.cos_box2 .cos10.active::after {
  width: 720px;
  height: 732px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_10.png);
  top: 28px;
  left: 0;
  pointer-events: none;
}

.cos_box2 .cos11 {
  left: 1613px;
  top: 127px;
  width: 427px;
  height: 274px;
}

.cos_box2 .cos11.active::after {
  width: 367px;
  height: 805px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_11.png);
  top: -21px;
  left: -60px;
  pointer-events: none;
}

.cos_box2 .cos12 {
  left: 417px;
  top: 0;
  width: 179px;
  height: 435px;
}

.cos_box2 .cos12.active::after {
  width: 382px;
  height: 589px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_12.png);
  top: -69px;
  left: -195px;
  pointer-events: none;
}

.cos_box2 .cos13 {
  left: 209px;
  top: 117px;
  width: 209px;
  height: 258px;
}

.cos_box2 .cos13.active::after {
  width: 421px;
  height: 441px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_13.png);
  top: 20px;
  left: -129px;
  pointer-events: none;
}

.cos_box2 .cos14 {
  left: 1286px;
  top: 324px;
  width: 321px;
  height: 347px;
}

.cos_box2 .cos14.active::after {
  width: 846px;
  height: 858px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_14.png);
  top: -103px;
  left: -260px;
  pointer-events: none;
}

.cos_box2 .cos15 {
  left: 1285px;
  top: 0;
  width: 229px;
  height: 335px;
}

.cos_box2 .cos15.active::after {
  width: 501px;
  height: 763px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_15.png);
  top: 38px;
  left: -104px;
  pointer-events: none;
}

.cos_box2 .cos16 {
  left: 1295px;
  top: 75px;
  width: 318px;
  height: 241px;
}

.cos_box2 .cos16.active::after {
  width: 562px;
  height: 703px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_16.png);
  top: 1px;
  left: -161px;
  pointer-events: none;
}

.cos_box2 .cos17 {
  left: 595px;
  top: 0;
  width: 560px;
  height: 196px;
}

.cos_box2 .cos17.active::after {
  width: 1920px;
  height: 1080px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/cos2_17.png);
  top: -100px;
  left: -594px;
  pointer-events: none;
}

.g-wrap.bg1 {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/bg1.jpg);
  height: auto;
}

.g-wrap.bg2 {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/bg2.jpg);
  height: auto;
}

.l_c_con canvas {
  margin-top: -1px;
}

.l_c_con::after {
  content: '';
  position: absolute;
  bottom: -241px;
  left: 0;
  width: 100%;
  height: 442px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/l_bg_cos.png);
  pointer-events: none;
}

.r_c_con {
  overflow-y: inherit;
}

.r_c_con canvas {
  margin-top: -1px;
}

.r_c_con::after {
  content: '';
  position: absolute;
  bottom: -33px;
  left: 0;
  width: 100%;
  height: 442px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/cos/r_bg_cos.png);
  pointer-events: none;
  display: none;
}

body.gm {
  background-color: #2d1a0c;
}

body.gm .r_c_con::after {
  display: block;
}

body.gm .l_c_con::after {
  display: none;
}

.gm .cos_box1 {
  display: none;
}

.gm .cos_box2 {
  display: block;
}

.gm .cos_gxt2 {
  display: block;
}

.gm .cos_gxt1 {
  display: none;
}

.gxt_box {
  text-align: center;
  margin-top: 50px;
  position: relative;
  z-index: 4;
}

.cos_gxt {
  display: block;
  margin: 0 auto;
}

.cos_gxt2 {
  display: none;
  margin-top: -30px;
}

.map_t1 {
  width: 612px;
  height: 108px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_t1.png);
  position: absolute;
  top: 30px;
  right: 288px;
  z-index: 9;
  padding-right: 60px;
  padding-top: 110px;
}

.map_t1 .tip {
  font-size: 30px;
  color: #ac8db3;
  line-height: 1.3;
  text-align: right;
}

.map_box {
  position: relative;
  width: 1920px;
  height: 1199px;
  margin: 0 auto;
}

.map_box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_bg.png);
  pointer-events: none;
}

.map_box.active::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 0;
  width: 1920px;
  height: 1399px;
  z-index: 2;
  background: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
  pointer-events: none;
}

.map {
  position: absolute;
  cursor: pointer;
}

.map::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-size: 100% 100%;
  pointer-events: none;
  display: none;
}

.map:hover::after {
  display: block;
}

.map:hover .map_info {
  display: block;
}

.map .map_info {
  position: absolute;
  width: 1047px;
  height: 536px;
  top: 70%;
  transform: translateY(-50%);
  z-index: 15;
  pointer-events: none;
  display: none;
}

.map1 {
  width: 723px;
  height: 317px;
  left: 710px;
  top: 445px;
  z-index: 6;
}

.map1::after {
  width: 1224px;
  height: 865px;
  top: -434px;
  left: -266px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map1.png);
}

.map1 .map_info {
  left: 100px;
  top: 132%;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_info1.png);
}

.map2 {
  width: 882px;
  height: 515px;
  left: 0;
  top: 444px;
  z-index: 5;
}

.map2::after {
  width: 1131px;
  height: 808px;
  top: -147px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map2.png);
}

.map2 .map_info {
  left: 400px;
  top: 42%;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_info2.png);
}

.map3 {
  width: 685px;
  height: 280px;
  left: 364px;
  top: 168px;
  z-index: 4;
}

.map3::after {
  width: 1206px;
  height: 624px;
  top: -115px;
  left: -39px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map3.png);
}

.map3 .map_info {
  left: -300px;
  top: 151%;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_info3.png);
}

.map4 {
  width: 850px;
  height: 580px;
  left: 1048px;
  top: 444px;
  z-index: 3;
}

.map4::after {
  width: 972px;
  height: 700px;
  top: -41px;
  left: -107px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map4.png);
}

.map4 .map_info {
  left: -700px;
  top: 42%;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_info4.png);
}

.map5 {
  width: 308px;
  height: 248px;
  left: 969px;
  top: 272px;
  z-index: 8;
}

.map5::after {
  width: 455px;
  height: 488px;
  top: -143px;
  left: -102px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map5.png);
}

.map5 .map_info {
  left: -280px;
  top: 164%;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_info5.png);
}

.video_tit1 {
  width: 857px;
  height: 108px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/video_tit1.png);
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.video_box {
  width: 1171px;
  position: relative;
  margin: 0 auto;
  margin-bottom: 100px;
}

.video_box::after {
  content: '';
  position: absolute;
  top: -320px;
  left: -383px;
  width: 957px;
  height: 1338px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/video_xs1.png);
  pointer-events: none;
}

.video_box::before {
  content: '';
  position: absolute;
  bottom: -158px;
  right: -317px;
  width: 1255px;
  height: 543px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/video_xs0.png);
  pointer-events: none;
}

.video_box .play_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 126px;
  height: 125px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/btn_play1.png);
  z-index: 3;
}

.video_box .video {
  width: 1118px;
  height: 592px;
  border-radius: 32px;
  background-color: #000;
  position: relative;
  margin-top: 30px;
  z-index: 2;
}

.video_box .video .video_container {
  width: 100%;
  height: 100%;
  border-radius: 32px;
}

.video_box .video::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1171px;
  height: 646px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/video_mask1.png);
  pointer-events: none;
}

.video_box .video::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1171px;
  height: 646px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/video_fm.png);
  pointer-events: none;
}

.gm .map_box::after {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_bg2.png);
}

.gm .map_t1 {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_t2.png);
}

.gm .map_t1 .tip {
  color: #ad9a7f;
}

.gm .map .map_info .info_box {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_info_bg2.png);
}

.gm .map .map_info .info {
  color: #b77c34;
}

.gm .map1::after {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map1_2.png);
}

.gm .map1 .map_info {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_info1_2.png);
}

.gm .map2::after {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map2_2.png);
}

.gm .map2 .map_info {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_info2_2.png);
}

.gm .map3::after {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map3_2.png);
}

.gm .map3 .map_info {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_info3_2.png);
}

.gm .map4::after {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map4_2.png);
}

.gm .map4 .map_info {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_info4_2.png);
}

.gm .map5::after {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map5_2.png);
}

.gm .map5 .map_info {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/map_info5_2.png);
}

.gm .video_tit1 {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/video_tit2.png);
}

.gm .video_box::after {
  content: '';
  position: absolute;
  top: -10px;
  left: auto;
  right: -335px;
  width: 702px;
  height: 884px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/video_xs2.png);
  pointer-events: none;
}

.gm .video_box::before {
  display: none;
}

.gm .video_box .play_btn {
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/btn_play2.png);
}

.gm .video_box .video::after {
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/three/video_mask2.png);
}

.zk_box {
  width: 1920px;
  height: 1080px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/four_bg1.png);
}

.zk_box .tit4 {
  width: 597px;
  height: 148px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/tit4.png);
  margin: 0 auto;
}

.zk_box .tip {
  color: #a246e7;
  font-size: 20px;
  text-align: center;
  text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;
}

.zk_map {
  width: 1107px;
  height: 845px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zkb1.png);
  position: relative;
  margin: 0 auto;
}

.zk_map .zk {
  position: absolute;
  cursor: pointer;
}

.zk_map .zk.active .zk_img {
  display: block;
}

.zk_map .zk.active.zk::after {
  display: block;
}

.zk_map .zk .zk_img {
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  position: absolute;
  display: none;
}

.zk_map .zk.zk1::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk1.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk2::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk2.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk3::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk3.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk4::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk4.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk5::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk5.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk6::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk6.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk7::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk7.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk8::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk8.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk9::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk9.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk10::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk10.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk11::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk11.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk12::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk12.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk13::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk13.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk14::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk14.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk15::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk15.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk16::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk16.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk17::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk17.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk18::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk18.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk19::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk19.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk20::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk20.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk21::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk21.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk22::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk22.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk23::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk23.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk24::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk24.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk25::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk25.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.zk26::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk26.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.tq1::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/tq1.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.tq2::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/tq2.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.tq3::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/tq3.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.tq4::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/tq4.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.tq5::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/tq5.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk.tq6::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/tq6.png) no-repeat center center;
  background-size: contain;
  display: none;
}

.zk_map .zk0.active .zk_img {
  top: 100%;
  left: auto;
  right: 0;
  transform: translate(0, 0);
}

.zk_map .zk0_1 {
  width: 205px;
  height: 42px;
  left: 772px;
  top: 25px;
}

.zk_map .zk0_2 {
  width: 52px;
  height: 52px;
  left: 987px;
  top: 20px;
}

.zk_map .zk0_3 {
  width: 36px;
  height: 28px;
  left: 838px;
  top: 67px;
}

.zk_map .zk0_3.active .zk_img {
  right: -100px;
}

.zk_map .zk0_4 {
  width: 36px;
  height: 28px;
  left: 874px;
  top: 67px;
}

.zk_map .zk0_4.active .zk_img {
  right: -100px;
}

.zk_map .zk0_5 {
  width: 108px;
  height: 96px;
  left: 960px;
  top: 81px;
}

.zk_map .zk0_6 {
  width: 80px;
  height: 80px;
  left: 993px;
  top: 199px;
}

.zk_map .zk1 {
  left: 313px;
  top: 19px;
  width: 453px;
  height: 97px;
}

.zk_map .zk1.active::after {
  top: -2px;
  left: 9px;
  transform: translate(0);
}

.zk_map .zk2 {
  left: 248px;
  top: 146px;
  width: 137px;
  height: 121px;
}

.zk_map .zk3 {
  left: 420px;
  top: 176px;
  width: 98px;
  height: 91px;
}

.zk_map .zk4 {
  left: 494px;
  top: 236px;
  width: 93px;
  height: 89px;
}

.zk_map .zk5 {
  left: 623px;
  top: 244px;
  width: 96px;
  height: 92px;
}

.zk_map .zk6 {
  left: 792px;
  top: 108px;
  width: 122px;
  height: 119px;
}

.zk_map .zk7 {
  left: 222px;
  top: 396px;
  width: 99px;
  height: 94px;
}

.zk_map .zk8 {
  left: 854px;
  top: 375px;
  width: 98px;
  height: 92px;
}

.zk_map .zk9 {
  left: 30px;
  top: 506px;
  width: 123px;
  height: 117px;
}

.zk_map .zk9.active .zk_img {
  left: 95%;
}

.zk_map .zk10 {
  left: 223px;
  top: 602px;
  width: 96px;
  height: 92px;
}

.zk_map .zk10.active .zk_img {
  top: -286px;
  transform: translate(-50%, 0);
}

.zk_map .zk11 {
  left: 509px;
  top: 501px;
  width: 109px;
  height: 110px;
}

.zk_map .zk12 {
  left: 786px;
  top: 580px;
  width: 97px;
  height: 92px;
}

.zk_map .zk12.active .zk_img {
  top: -286px;
  transform: translate(-50%, 0);
}

.zk_map .zk13 {
  left: 950px;
  top: 628px;
  width: 124px;
  height: 127px;
}

.zk_map .zk13.active .zk_img {
  left: 10%;
}

.zk_map .zk14 {
  left: 22px;
  top: 791px;
  width: 36px;
  height: 36px;
}

.zk_map .zk14.active .zk_img {
  top: -597px;
  left: 0;
  transform: translate(0);
}

.zk_map2 {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zkb1_2.png);
}

.zk_map2 .zk15 {
  left: 470px;
  top: 218px;
  width: 131px;
  height: 132px;
}

.zk_map2 .zk16 {
  left: 567px;
  top: 316px;
  width: 74px;
  height: 74px;
}

.zk_map2 .zk17 {
  left: 498px;
  top: 181px;
  width: 74px;
  height: 74px;
}

.zk_map2 .zk18 {
  left: 624px;
  top: 172px;
  width: 98px;
  height: 94px;
}

.zk_map2 .zk19 {
  left: 852px;
  top: 438px;
  width: 102px;
  height: 95px;
}

.zk_map2 .zk20 {
  left: 797px;
  top: 380px;
  width: 76px;
  height: 77px;
}

.zk_map2 .zk20_2 {
  left: 864px;
  top: 381px;
  width: 76px;
  height: 77px;
}

.zk_map2 .zk20_2::after {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk20_2.png) !important;
}

.zk_map2 .zk21 {
  left: 294px;
  top: 463px;
  width: 96px;
  height: 96px;
}

.zk_map2 .zk22 {
  left: 489px;
  top: 480px;
  width: 142px;
  height: 143px;
}

.zk_map2 .zk23 {
  left: 582px;
  top: 573px;
  width: 98px;
  height: 91px;
}

.zk_map2 .zk24 {
  left: 274px;
  top: 513px;
  width: 131px;
  height: 132px;
}

.zk_map2 .zk24 .zk_img {
  left: 195%;
  transform: translateX(-50%);
  top: 17%;
}

.zk_map2 .zk25 {
  left: 238px;
  top: 474px;
  width: 74px;
  height: 75px;
}

.zk_map2 .zk25_2 {
  left: 236px;
  top: 543px;
  width: 74px;
  height: 75px;
}

.zk_map2 .zk25_3 {
  left: 391px;
  top: 516px;
  width: 74px;
  height: 75px;
}

.zk_map2 .zk25_4 {
  left: 236px;
  top: 607px;
  width: 74px;
  height: 75px;
}

.zk_map2 .zk25_4::after {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk25_4.png) !important;
}

.zk_map2 .zk26 {
  left: 789px;
  top: 506px;
  width: 95px;
  height: 94px;
}

.zk_map2 .tq1 {
  left: 349px;
  top: 36px;
  width: 74px;
  height: 74px;
}

.zk_map2 .tq2 {
  left: 417px;
  top: 38px;
  width: 74px;
  height: 74px;
}

.zk_map2 .tq3 {
  left: 484px;
  top: 38px;
  width: 74px;
  height: 74px;
}

.zk_map2 .tq4 {
  left: 552px;
  top: 38px;
  width: 74px;
  height: 74px;
}

.zk_map2 .tq5 {
  left: 620px;
  top: 38px;
  width: 74px;
  height: 74px;
}

.zk_map2 .tq6 {
  left: 686px;
  top: 38px;
  width: 74px;
  height: 74px;
}

.zk_swiper_box {
  width: 1300px;
  margin: 0 auto;
  position: relative;
}

.zk_swiper {
  width: 1110px;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 100px;
}

.zk_swiper_next {
  position: absolute;
  top: 44%;
  right: 0;
  transform: translateY(-50%);
  width: 105.5px;
  height: 96.5px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk_swiper_next.png);
  background-size: 100% 100%;
}

.zk_swiper_prev {
  position: absolute;
  top: 44%;
  left: 0;
  transform: translateY(-50%) rotate(180deg);
  width: 105.5px;
  height: 96.5px;
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk_swiper_next.png);
  background-size: 100% 100%;
}

.gm .zk_swiper_next,
.gm .zk_swiper_prev {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zk_swiper_next2.png);
}

.gm .tit4 {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/tit4_2.png);
}

.gm .zk_box {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/four_bg2.png);
}

.gm .zk_box .tip {
  color: #f1b950;
  text-shadow: none;
}

.gm .zk_map {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zkb2.png);
}

.gm .zk_map2 {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/four/zkb2_2.png);
}

.five_box {
  width: 347px;
  height: 105px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/five/p5_img.png);
  position: relative;
}

.five_box img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 40px;
  height: 79px;
  object-fit: contain;
}

.five_box .gif2 {
  top: 35%;
  display: none;
}

.five_con {
  padding-top: 30px;
}

.five_con .tit5 {
  width: 347px;
  height: 78px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/five/tit5.png);
  margin: 0 auto;
}

.five_con .vidoe_box {
  position: relative;
  background-color: #000;
  margin: 0 auto;
  margin-top: 20px;
  width: 1039px;
  height: 580px;
}

.five_con .vidoe_box .video_container2 {
  width: 100%;
  height: 100%;
}

.five_con .vidoe_box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1190px;
  height: 704px;
  background: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/five/video1.png);
  pointer-events: none;
  z-index: 3;
}

.gm .five_con .tit5 {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/five/tit5_2.png);
}

.gm .five_con .vidoe_box::after {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/five/video2.png);
}

.gm .five_box {
  background-image: url(https://game.gtimg.cn/images/dnf/cp/a20251122diregiepreview/five/p5_img2.png);
}

.gm .five_box img {
  display: none;
}

.gm .five_box .gif2 {
  display: block;
}