@charset "utf-8";
/** mixins **/
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-focus-ring-color: rgba(0, 0, 0, 0);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
/* Noto黑体简体 */
@font-face {
  font-family: 'Noto Sans SC';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-sc-v26-latin_chinese-simplified-300.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-sc-v26-latin_chinese-simplified-300.woff') format('woff');
  font-weight: 300;
}
@font-face {
  font-family: 'Noto Sans SC';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-sc-v26-latin_chinese-simplified-regular.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-sc-v26-latin_chinese-simplified-regular.woff') format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'Noto Sans SC';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-sc-v26-latin_chinese-simplified-500.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-sc-v26-latin_chinese-simplified-500.woff') format('woff');
  font-weight: 500;
}
@font-face {
  font-family: 'Noto Sans SC';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-sc-v26-latin_chinese-simplified-700.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-sc-v26-latin_chinese-simplified-700.woff') format('woff');
  font-weight: 700;
}
/* Noto黑体繁体 */
@font-face {
  font-family: 'Noto Sans TC';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-tc-v26-latin_chinese-traditional-300.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-tc-v26-latin_chinese-traditional-300.woff') format('woff');
  font-weight: 300;
}
@font-face {
  font-family: 'Noto Sans TC';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-tc-v26-latin_chinese-traditional-regular.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-tc-v26-latin_chinese-traditional-regular.woff') format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'Noto Sans TC';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-tc-v26-latin_chinese-traditional-500.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-tc-v26-latin_chinese-traditional-500.woff') format('woff');
  font-weight: 500;
}
@font-face {
  font-family: 'Noto Sans TC';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-tc-v26-latin_chinese-traditional-700.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-tc-v26-latin_chinese-traditional-700.woff') format('woff');
  font-weight: 700;
}
/* Noto黑体日语 */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-jp-v42-latin_japanese-300.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-jp-v42-latin_japanese-300.woff') format('woff');
  font-weight: 300;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-jp-v42-latin_japanese-regular.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-jp-v42-latin_japanese-regular.woff') format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-jp-v42-latin_japanese-500.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-jp-v42-latin_japanese-500.woff') format('woff');
  font-weight: 500;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-jp-v42-latin_japanese-700.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-jp-v42-latin_japanese-700.woff') format('woff');
  font-weight: 700;
}
/* Noto黑体韩语 */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-kr-v27-latin_korean-300.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-kr-v27-latin_korean-300.woff') format('woff');
  font-weight: 300;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-kr-v27-latin_korean-regular.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-kr-v27-latin_korean-regular.woff') format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-kr-v27-latin_korean-500.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-kr-v27-latin_korean-500.woff') format('woff');
  font-weight: 500;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-kr-v27-latin_korean-700.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-kr-v27-latin_korean-700.woff') format('woff');
  font-weight: 700;
}
/* Noto黑体泰语 */
@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-thai-v20-thai_latin-300.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-thai-v20-thai_latin-300.woff') format('woff');
  font-weight: 300;
}
@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-thai-v20-thai_latin-regular.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-thai-v20-thai_latin-regular.woff') format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-thai-v20-thai_latin-500.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-thai-v20-thai_latin-500.woff') format('woff');
  font-weight: 500;
}
@font-face {
  font-family: 'Noto Sans Thai';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-thai-v20-thai_latin-700.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/noto/noto-sans-thai-v20-thai_latin-700.woff') format('woff');
  font-weight: 700;
}
html {
  font-family: "Noto Sans SC", sans-serif;
}
[lang|="zh-hant"],
[lang|="zh-hans"],
[lang|="zh-cht"],
[lang=zh-hk],
[lang=zh-tw] {
  font-family: "Noto Sans TC", sans-serif;
}
[lang|="jp"] {
  font-family: "Noto Sans JP", sans-serif;
}
[lang|="kr"] {
  font-family: "Noto Sans KR", sans-serif;
}
[lang|="th"] {
  font-family: "Noto Sans Thai", sans-serif;
}
/* CSS Document */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu,
select {
  margin: 0;
  padding: 0;
}
html,
body,
fieldset,
img,
iframe,
abbr {
  border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-style: normal;
}
strong,
b {
  font-weight: bold;
  font-style: normal;
}
em {
  font-weight: normal;
  font-style: italic;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
li {
  list-style: none;
}
button,
a,
select {
  border: none;
  outline: none;
}
input,
textarea,
button,
a {
  font: inherit;
  color: inherit;
}
input,
textarea {
  outline: none;
}
textarea {
  overflow: auto;
  resize: none;
}
a,
button {
  cursor: pointer;
}
a,
a:hover {
  text-decoration: none;
}
select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition-delay: 999999s;
  -webkit-transition: color 999999s ease-out, background-color 999999s ease-out;
}
#NIE-warning-dialog {
  -webkit-box-sizing: content-box !important;
          box-sizing: content-box !important;
}
#NIE-topBar {
  z-index: 999 !important;
}
#NIE-topBar * {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
.fill-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
html,
body {
  position: relative;
  margin: 0 auto;
  width: 100%;
  background: #000000;
  font-family: FZLanTingHeiS-R-GB, sans-serif;
  max-width: 2560px;
  color: #ecdfd2;
  scroll-behavior: smooth;
  scroll-padding-block-start: 80px;
}
.footer-box {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/footer-bg_311ec37c.png) !important;
  background-size: cover;
  background-position: top center;
}
.footer-box .join-media {
  background: none;
}
.footer-box .join-media::before {
  display: none;
}
.footer-box .join-media::after {
  display: none;
}
.footer-box .copyright {
  background: none;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #000;
}
.pop-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 500px;
  height: 400px;
  background: white;
  color: red;
}
.pop-bg .pop-close {
  position: absolute;
  top: -20px;
  right: 0;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  cursor: pointer;
}
.pop-bg .pop-close:before {
  content: 'x';
}
.pop-bg .pop-close:hover {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.lightBox-pop {
  width: 100%;
  height: 100%;
  background: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/media-modal-mask_39248e68.png) center, url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/media-modal-bg_7d9dfb8e.png) center top no-repeat;
  background-size: 100% 100%, cover;
}
.lightBox-pop button {
  background: 0 0;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  height: 100%;
  width: 100%;
}
.lightBox-pop .pop-content {
  height: 100%;
}
.lightBox-pop .top-bar {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 8px 8px;
  width: 100%;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.lightBox-pop .top-bar .count {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}
.lightBox-pop .top-bar .count .active-count {
  color: #fff;
}
.lightBox-pop .top-bar .close {
  height: 56px;
  width: 56px;
  padding: 0;
  position: relative;
  cursor: pointer;
}
.lightBox-pop .top-bar .close img {
  width: 100%;
  height: 100%;
}
.lightBox-pop .top-bar .close::after {
  -webkit-transition: opacity 350ms;
  transition: opacity 350ms;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/close_icon_hover_7476793f.webp);
  background-size: contain;
  opacity: 0;
}
.lightBox-pop .top-bar .close:hover::after {
  opacity: 1;
}
.lightBox-pop .icon {
  width: 40px;
  height: 57px;
}
.lightBox-pop .icon img {
  width: 100%;
  height: 100%;
}
.lightBox-pop .carousel {
  padding-bottom: 88px;
  height: calc(100vh - 72px);
  overflow: hidden;
}
.lightBox-pop .carousel .main-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0 16px;
}
.lightBox-pop .carousel .main-content .left-arrow,
.lightBox-pop .carousel .main-content .right-arrow {
  width: 40px;
  height: 57px;
  cursor: pointer;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.lightBox-pop .carousel .main-content .left-arrow:hover,
.lightBox-pop .carousel .main-content .right-arrow:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}
.lightBox-pop .carousel .main-content .right-arrow {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.lightBox-pop .carousel .main-content .glide {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 1000px;
  max-height: 100%;
  width: auto;
  pointer-events: none;
  position: relative;
}
.lightBox-pop .carousel .main-content .glide::after {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/media_frame_big_138c5008.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.lightBox-pop .carousel .main-content .glide video,
.lightBox-pop .carousel .main-content .glide img {
  max-height: 100%;
  max-width: 100%;
}
.lightBox-pop .carousel .main-content .glide .caption {
  position: absolute;
  bottom: -48px;
  font-size: 16px;
  padding: 16px;
  color: rgba(255, 255, 255, 0.7);
}
.lightBox-pop .carousel .bottom-navigation {
  display: none;
}
@media (max-width: 960px) {
  .lightBox-pop .top-bar {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .lightBox-pop .top-bar .count {
    display: none;
  }
  .lightBox-pop .carousel .main-content .left-arrow,
  .lightBox-pop .carousel .main-content .right-arrow {
    display: none;
  }
  .lightBox-pop .carousel .bottom-navigation {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
  }
  .lightBox-pop .carousel .bottom-navigation .count .active-count {
    color: #fff;
  }
  .lightBox-pop .carousel .bottom-navigation .left-arrow,
  .lightBox-pop .carousel .bottom-navigation .right-arrow {
    width: 40px;
    height: 57px;
    cursor: pointer;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    margin: 16px;
  }
  .lightBox-pop .carousel .bottom-navigation .left-arrow:hover,
  .lightBox-pop .carousel .bottom-navigation .right-arrow:hover {
    -webkit-filter: brightness(1.3);
            filter: brightness(1.3);
  }
  .lightBox-pop .carousel .bottom-navigation .right-arrow {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@media (max-width: 720px) {
  .lightBox-pop .carousel .bottom-navigation {
    font-size: 14px;
  }
}
@media (orientation: landscape) and (max-width: 959px) {
  .lightBox-pop .top-bar {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .lightBox-pop .top-bar .count {
    display: block;
  }
  .lightBox-pop .carousel {
    padding-bottom: 64px;
  }
  .lightBox-pop .carousel .main-content .left-arrow,
  .lightBox-pop .carousel .main-content .right-arrow {
    display: block;
  }
  .lightBox-pop .carousel .main-content .glide {
    height: 100%;
  }
  .lightBox-pop .carousel .bottom-navigation {
    display: none;
  }
}
:root {
  --font-family: microsoft yahei,
    pingfang sc,
    noto sans cjk,
    noto sans sc,
    sans-serif;
  --section-padding-vertical: 80px;
  --section-padding-horizontal: 40px;
  --section-padding: var(--section-padding-vertical) var(--section-padding-horizontal);
  --header-heading-font: 600 48px/1.1 var(--font-family);
  --header-description-font: 400 20px/1.4 var(--font-family);
  --button-font: 600 24px/1 var(--font-family);
  --body-font: 400 16px/1.4 var(--font-family);
  --classes-title-font: 400 36px/1.2 var(--font-family);
}
.container-index #leihuo-age {
  z-index: 10;
  left: 16px;
  top: calc(var(--nav-space) + var(--nav-height) + 8px);
  width: 24%;
  position: absolute;
  max-width: 92px;
}
.container-index .button-item {
  font: var(--button-font);
  min-width: 322px;
  height: 118px;
  text-align: center;
  color: #bd9b4e;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-size: 100% 100%;
  background-position: center;
  -webkit-transition: -webkit-filter 350ms;
  transition: -webkit-filter 350ms;
  transition: filter 350ms;
  transition: filter 350ms, -webkit-filter 350ms;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/primary_button_a8641ca2.png);
  position: relative;
  cursor: pointer;
  text-shadow: 0 0 14px #000;
}
.container-index .button-item:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}
.container-index .detail-btn {
  width: 293px;
  height: 112px;
  margin-top: 14px;
  margin-left: -22px;
}
.container-index .masthead-overview {
  position: relative;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/masthead_82368830.png);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
}
.container-index .masthead-overview .masthead {
  padding: 190px 3px 100px;
  max-width: 1700px;
  margin: 0 auto;
}
.container-index .masthead-overview .masthead .masthead-content {
  height: 100%;
  max-width: 800px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.container-index .masthead-overview .masthead .logo {
  width: 467px;
  height: 310px;
}
.container-index .masthead-overview .masthead .header {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 2px 10px black;
  text-transform: uppercase;
  font: var(--header-heading-font);
  text-align: center;
  line-height: 120%;
}
.container-index .masthead-overview .masthead .description {
  font: var(--header-description-font);
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 1px 2px 10px black;
  margin-top: 22px;
}
.container-index .masthead-overview .masthead .button-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  margin-top: 43px;
}
.container-index .masthead-overview .masthead .battle-net {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/battle-net_495bcef3.png);
  width: 196px;
  height: 44px;
  background-size: 100% 100%;
  position: relative;
  display: block;
  margin-top: 50px;
}
.container-index .masthead-overview .adv-content {
  padding: 0 var(--section-padding-horizontal) 100px;
  max-width: 1400px;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 80px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.container-index .masthead-overview .adv-content .adv-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 2;
  -webkit-flex: 2;
      -ms-flex: 2;
          flex: 2;
}
.container-index .masthead-overview .adv-content .adv-left .adv-title {
  font: var(--header-heading-font);
  color: rgba(255, 255, 255, 0.9);
}
.container-index .masthead-overview .adv-content .adv-left .adv-description {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.7);
  font: var(--header-description-font);
}
.container-index .masthead-overview .adv-content .adv-right {
  -webkit-box-flex: 3;
  -webkit-flex: 3;
      -ms-flex: 3;
          flex: 3;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-size: 100% 100%;
}
.container-index .masthead-overview::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  -webkit-box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.6);
          box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.6);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 20px;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/divider_masthead_c8a22de5.png);
}
.container-index .adv-container {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 70px var(--section-padding-horizontal) 110px;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/age_gate_0371e006.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.container-index .adv-container .adv-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 80px;
  max-width: 1400px;
}
.container-index .adv-container .adv-content .adv-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 2;
  -webkit-flex: 2;
      -ms-flex: 2;
          flex: 2;
}
.container-index .adv-container .adv-content .adv-left .adv-title {
  font: var(--header-heading-font);
  color: rgba(255, 255, 255, 0.9);
}
.container-index .adv-container .adv-content .adv-left .adv-description {
  margin-top: 16px;
  font: var(--header-description-font);
  color: rgba(255, 255, 255, 0.7);
}
.container-index .adv-container .adv-content .adv-right {
  -webkit-box-flex: 3;
  -webkit-flex: 3;
      -ms-flex: 3;
          flex: 3;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.container-index .adv-container::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  -webkit-box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.6);
          box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.6);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 20px;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/divider_masthead_c8a22de5.png);
}
.container-index .feature-container {
  position: relative;
  padding: var(--section-padding);
  padding: var(--section-padding-vertical) var(--section-padding-horizontal) 120px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/game_feature_bg_d12ac838.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.container-index .feature-container .description {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 22px;
  font: var(--header-description-font);
  margin-bottom: 62px;
  max-width: 720px;
  text-align: center;
}
.container-index .feature-container .head-title {
  font: var(--header-heading-font);
  color: rgba(255, 255, 255, 0.9);
}
.container-index .feature-container .feature-banner-list {
  --cards-per-row: 4;
  --gallery-column-size: minmax(122px, calc(100% / var(--cards-per-row)));
  max-width: 1400px;
  display: grid;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  grid-template-columns: repeat(var(--cards-per-row), var(--gallery-column-size));
  gap: 48px;
}
.container-index .feature-container .feature-banner-list .gallery-item {
  position: relative;
}
.container-index .feature-container .feature-banner-list .gallery-item .image-wrapper {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.7);
          box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.7);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.container-index .feature-container .feature-banner-list .gallery-item .image-wrapper img {
  display: block;
  width: 100%;
  aspect-ratio: 1.77777778;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.container-index .feature-container .feature-banner-list .gallery-item .image-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  -webkit-box-shadow: inset 0 0 30px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 15px rgba(0, 0, 0, 0.8), inset 0 0 0 16px #625028;
          box-shadow: inset 0 0 30px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 15px rgba(0, 0, 0, 0.8), inset 0 0 0 16px #625028;
}
.container-index .feature-container .feature-banner-list .gallery-item .image-wrapper::after {
  content: "";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 9;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  border: 16px solid transparent;
  -o-border-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/media_frame_e88d9b2d.png) 18;
     border-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/media_frame_e88d9b2d.png) 18;
}
.container-index .feature-container .feature-banner-list .gallery-item .content-bottom {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 20px 5px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.container-index .feature-container .feature-banner-list .gallery-item .content-bottom .content-title {
  font: var(--header-description-font);
  color: #fff;
}
.container-index .feature-container .feature-banner-list .gallery-item .content-bottom .content-date {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.7);
  font: var(--body-font);
  text-align: center;
}
.container-index .feature-container::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  -webkit-box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.6);
          box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.6);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 20px;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/divider_masthead_c8a22de5.png);
}
.container-index .classes-container {
  position: relative;
  width: 100%;
  min-height: 900px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 160px var(--section-padding-horizontal) 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.container-index .classes-container .classes-content {
  max-width: 1400px;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.container-index .classes-container .classes-content .info-container {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-left: 20px;
}
.container-index .classes-container .classes-content .info-container .classes-title {
  color: rgba(255, 255, 255, 0.9);
  font: var(--header-heading-font);
  margin-bottom: 53px;
}
.container-index .classes-container .classes-content .info-container .hero-pic-mobile {
  display: none;
}
.container-index .classes-container .classes-content .info-container .tabs-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  margin-bottom: 75px;
}
.container-index .classes-container .classes-content .info-container .tabs-container .tab-btn {
  width: 72px;
  height: 72px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  background-size: 100% 100%;
  position: relative;
  -webkit-transition: -webkit-filter 350ms;
  transition: -webkit-filter 350ms;
  transition: filter 350ms;
  transition: filter 350ms, -webkit-filter 350ms;
}
.container-index .classes-container .classes-content .info-container .tabs-container .tab-btn.amazon::after {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/amazon_icon_active_bfdc688f.png);
}
.container-index .classes-container .classes-content .info-container .tabs-container .tab-btn.assassin::after {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/assassin_icon_active_6478f781.png);
}
.container-index .classes-container .classes-content .info-container .tabs-container .tab-btn.barbarian::after {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/barbarian_icon_active_d9a9e8cc.png);
}
.container-index .classes-container .classes-content .info-container .tabs-container .tab-btn.druid::after {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/druid_icon_active_c4dce473.png);
}
.container-index .classes-container .classes-content .info-container .tabs-container .tab-btn.necromancer::after {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/necromancer_icon_active_e1386ff9.png);
}
.container-index .classes-container .classes-content .info-container .tabs-container .tab-btn.paladin::after {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/paladin_icon_active_14b2c81a.png);
}
.container-index .classes-container .classes-content .info-container .tabs-container .tab-btn.sorceress::after {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/sorceress_icon_active_bd8ab5b3.png);
}
.container-index .classes-container .classes-content .info-container .tabs-container .tab-btn::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  -webkit-transition: opacity 350ms;
  transition: opacity 350ms;
}
.container-index .classes-container .classes-content .info-container .tabs-container .tab-btn:hover::after {
  opacity: 1;
}
.container-index .classes-container .classes-content .info-container .tabs-container .tab-btn.active {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}
.container-index .classes-container .classes-content .info-container .tabs-container .tab-btn .tab-icon {
  width: 100%;
  height: 100%;
}
.container-index .classes-container .classes-content .info-container .intro-container {
  max-width: 600px;
}
.container-index .classes-container .classes-content .info-container .intro-container .intro-title {
  color: #ffffff;
  font: var(--classes-title-font);
  margin-bottom: 16px;
}
.container-index .classes-container .classes-content .info-container .intro-container .intro-desc {
  min-height: 56px;
  color: rgba(255, 255, 255, 0.7);
  font: var(--header-description-font);
}
.container-index .classes-container .classes-content .info-container .class-video {
  max-width: 600px;
  margin-top: 26px;
  aspect-ratio: 1.77777778;
}
.container-index .classes-container::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  -webkit-box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.6);
          box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.6);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 20px;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/divider_masthead_c8a22de5.png);
}
.container-index .classes-container.amazon {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/amazon_background_xxl_d9f93e55.png);
}
.container-index .classes-container.assassin {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/assassin_background_xxl_161e9de6.png);
}
.container-index .classes-container.barbarian {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/barbarian_background_xxl_f7b32ad0.png);
}
.container-index .classes-container.druid {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/druid_background_xxl_c2d3c5aa.png);
}
.container-index .classes-container.necromancer {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/necromancer_background_xxl_506acf3f.png);
}
.container-index .classes-container.paladin {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/paladin_background_xxl_20138c3a.png);
}
.container-index .classes-container.sorceress {
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/sorceress_background_xxl_07f76f4b.png);
}
.container-index .carousel-media-gallery {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/carousel_a2152b6f.png);
  background-size: cover;
}
.container-index .gameplay-container {
  width: 100%;
  position: relative;
  padding: var(--section-padding-vertical) var(--section-padding-horizontal) 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.container-index .gameplay-container .description {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 16px;
  font: var(--header-description-font);
  margin-bottom: 70px;
  max-width: 720px;
  text-align: center;
}
.container-index .gameplay-container .head-title {
  font: var(--header-heading-font);
  color: rgba(255, 255, 255, 0.9);
}
.container-index .gameplay-container .swiper {
  max-width: 960px;
  width: calc(100% - 125 * 2px);
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 58px;
}
.container-index .gameplay-container .thumb-swiper {
  width: 100%;
  position: relative;
}
.container-index .gameplay-container .thumb-swiper .swiper-slide {
  width: 100%;
}
.container-index .gameplay-container .thumb-swiper .swiper-slide .item {
  margin: 0 auto;
}
.container-index .gameplay-container .thumb-swiper::after {
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/media_frame_big_138c5008.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 9;
  pointer-events: none;
}
.container-index .gameplay-container .title-pagination {
  width: 100%;
  max-width: 720px;
  color: rgba(189, 155, 78, 0.5);
  font: var(--button-font);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  margin-bottom: 38px;
  cursor: pointer;
  -webkit-transition: color 350ms, text-shadow 350ms;
  transition: color 350ms, text-shadow 350ms;
}
.container-index .gameplay-container .title-pagination .tab-control {
  padding: 16px 32px;
  position: relative;
}
.container-index .gameplay-container .title-pagination .tab-control:hover {
  color: #e9c964;
}
.container-index .gameplay-container .title-pagination .tab-control.active {
  color: #e9c964;
}
.container-index .gameplay-container .title-pagination .tab-control.active:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  height: 11px;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/carousel_tab_bottom_7af39916.png);
}
.container-index .gameplay-container .swiper-pagination {
  position: absolute;
  bottom: -32px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.container-index .gameplay-container .swiper-pagination .swiper-pagination-bullet {
  position: relative;
  width: 12px;
  height: 12px;
  background: #bd9b4e;
  border-radius: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.container-index .gameplay-container .swiper-pagination .swiper-pagination-bullet::before {
  -webkit-transition: opacity 350ms;
  transition: opacity 350ms;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #e9c964;
  -webkit-box-shadow: 0 0 6px #f00;
          box-shadow: 0 0 6px #f00;
  border-radius: 50%;
  opacity: 0;
  z-index: -1;
}
.container-index .gameplay-container .swiper-pagination .swiper-pagination-bullet:hover::before {
  opacity: 1;
  z-index: 1;
}
.container-index .gameplay-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: none;
}
.container-index .gameplay-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #e9c964;
  -webkit-box-shadow: 0 0 6px #f00;
          box-shadow: 0 0 6px #f00;
  border-radius: 50%;
}
.container-index .gameplay-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:hover::before {
  opacity: 0;
}
.container-index .gameplay-container .prev-role-btn {
  position: absolute;
  left: -109px;
  top: calc(50% + 28px);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/left_arrow_7026bb68.png);
  cursor: pointer;
  width: 40px;
  height: 57px;
}
.container-index .gameplay-container .next-role-btn {
  position: absolute;
  right: -109px;
  top: calc(50% + 28px);
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/left_arrow_7026bb68.png);
  cursor: pointer;
  width: 40px;
  height: 57px;
}
.container-index .gameplay-container .prev-role-btn:hover,
.container-index .gameplay-container .next-role-btn:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}
.container-index .gameplay-container .button-item {
  min-width: 279px;
  height: 100px;
}
.container-index .media-container {
  position: relative;
  padding: var(--section-padding);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}
.container-index .media-container .head-title {
  font: var(--header-heading-font);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 50px;
}
.container-index .media-container .feature-banner-list {
  --cards-per-row: 4;
  --gallery-column-size: minmax(122px, calc(100% / var(--cards-per-row)));
  max-width: 1400px;
  display: grid;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  grid-template-columns: repeat(var(--cards-per-row), var(--gallery-column-size));
  gap: 32px;
}
.container-index .media-container .feature-banner-list .gallery-item {
  position: relative;
  cursor: pointer;
}
.container-index .media-container .feature-banner-list .gallery-item .image-wrapper {
  width: 100%;
  position: relative;
  -webkit-transition: -webkit-filter 350ms;
  transition: -webkit-filter 350ms;
  transition: filter 350ms;
  transition: filter 350ms, -webkit-filter 350ms;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.container-index .media-container .feature-banner-list .gallery-item .image-wrapper img {
  display: block;
  width: 100%;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  aspect-ratio: 1.77777778;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.container-index .media-container .feature-banner-list .gallery-item .image-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  -webkit-box-shadow: inset 0 0 30px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 15px rgba(0, 0, 0, 0.8), inset 0 0 0 16px #625028;
          box-shadow: inset 0 0 30px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 15px rgba(0, 0, 0, 0.8), inset 0 0 0 16px #625028;
}
.container-index .media-container .feature-banner-list .gallery-item .image-wrapper::after {
  content: "";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 9;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  border: 16px solid red;
  -o-border-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/media_frame_e88d9b2d.png) 18;
     border-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/media_frame_e88d9b2d.png) 18;
}
.container-index .media-container .feature-banner-list .gallery-item:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}
.container-index .media-container::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -20px;
  width: 100%;
  -webkit-box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.6);
          box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.6);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 20px;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/divider_masthead_c8a22de5.png);
}
.container-index .outro-container {
  position: relative;
  padding: var(--section-padding-vertical) var(--section-padding-horizontal) 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/outro_background_784e11ba.png);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}
.container-index .outro-container .head-title {
  font: var(--header-heading-font);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 2px 10px black;
  margin-top: 520px;
}
.container-index .outro-container .description {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 2px 10px black;
  margin-top: 25px;
  font: var(--header-description-font);
  margin-bottom: 16px;
  max-width: 855px;
  text-align: center;
}
.container-index .outro-container .downBtn {
  min-width: 342px;
  height: 112px;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/primary_button2_a8fc3c8d.png);
}
@media (max-width: 1200px) {
  .container-index .masthead-overview .masthead {
    padding: 190px 3px 240px;
  }
  .container-index .feature-container .feature-banner-list {
    --cards-per-row: 2;
    --gallery-column-size: minmax(122px, calc(100% / var(--cards-per-row)));
  }
  .container-index .outro-container .head-title {
    margin-top: 400px;
  }
}
@media (max-width: 960px) {
  .container-index .masthead-overview {
    background: none;
  }
  .container-index .masthead-overview .masthead {
    background-position: bottom center;
    background-size: cover;
    background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/masthead_750_0667e319.png);
    background-repeat: no-repeat;
    position: relative;
    padding: 190px 0 240px;
  }
  .container-index .masthead-overview .masthead .masthead-content {
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 65vw;
  }
  .container-index .masthead-overview .masthead::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    -webkit-box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.6);
            box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.6);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 8px;
    background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/divider_masthead_c8a22de5.png);
  }
  .container-index .masthead-overview .adv-content {
    padding: 60px var(--section-padding-horizontal) 100px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/game_feature_bg_960_00304c3f.png);
    background-size: cover;
  }
  .container-index .adv-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    text-align: center;
    gap: 24px !important;
    margin: 0 auto;
  }
  .container-index .adv-content .adv-left {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .container-index .feature-container {
    background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/game_feature_bg_960_00304c3f.png);
  }
  .container-index .classes-container .classes-content {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .container-index .classes-container .classes-content .info-container {
    width: 100%;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0;
  }
  .container-index .classes-container .classes-content .info-container .classes-title {
    text-align: center;
    margin-bottom: 48px;
  }
  .container-index .classes-container .classes-content .info-container .tabs-container {
    gap: 12px;
    min-width: 250px;
    width: 100%;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 0;
  }
  .container-index .classes-container .classes-content .info-container .tabs-container .tab-btn {
    width: 48px;
    height: 48px;
  }
  .container-index .classes-container .classes-content .info-container .intro-container {
    text-align: center;
    min-height: 450px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .container-index .classes-container .classes-content .info-container .hero-pagination {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    margin-top: 32px;
  }
  .container-index .classes-container .classes-content .info-container .hero-pagination .tab-hero {
    position: relative;
    width: 12px;
    height: 12px;
    background: #74633c;
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor: pointer;
  }
  .container-index .classes-container .classes-content .info-container .hero-pagination .tab-hero.active {
    background-color: #e9c964;
    -webkit-box-shadow: 0 0 6px #f00;
            box-shadow: 0 0 6px #f00;
  }
  .container-index .classes-container .classes-content .info-container .hero-pagination .tab-hero::before {
    -webkit-transition: opacity 350ms;
    transition: opacity 350ms;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #e9c964;
    -webkit-box-shadow: 0 0 6px #f00;
            box-shadow: 0 0 6px #f00;
    border-radius: 50%;
    opacity: 0;
    z-index: -1;
  }
  .container-index .classes-container .classes-content .info-container .hero-pagination .tab-hero:hover::before {
    opacity: 1;
  }
  .container-index .classes-container.amazon {
    background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/amazon_background_xs_7c67af06.png);
  }
  .container-index .classes-container.assassin {
    background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/assassin_background_xs_25f9db63.png);
  }
  .container-index .classes-container.barbarian {
    background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/barbarian_background_xs_81b21372.png);
  }
  .container-index .classes-container.druid {
    background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/druid_background_xs_6e49a4cb.png);
  }
  .container-index .classes-container.necromancer {
    background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/necromancer_background_xs_4dd825d7.png);
  }
  .container-index .classes-container.paladin {
    background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/paladin_background_xs_c0b93996.png);
  }
  .container-index .classes-container.sorceress {
    background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/sorceress_background_xs_49b2602f.png);
  }
  .container-index .gameplay-container .swiper {
    width: 100%;
  }
  .container-index .gameplay-container .prev-role-btn,
  .container-index .gameplay-container .next-role-btn {
    display: none;
  }
  .container-index .media-container .feature-banner-list {
    --cards-per-row: 3;
    gap: 16px;
  }
  .container-index .outro-container {
    background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/outro_background_min_e1b01173.png);
    background-position: top center;
    background-size: cover;
  }
  .container-index .outro-container .head-title {
    margin-top: 300px;
  }
}
@media (max-width: 750px) {
  :root {
    --section-padding-vertical: 40px !important;
    --section-padding-horizontal: 16px;
    --header-heading-font: 600 36px/1.1 var(--font-family);
    --header-description-font: 400 16px/1.4 var(--font-family);
    --button-font: 600 20px/1 var(--font-family);
    --body-font: 400 14px/1.4 var(--font-family);
    --classes-title-font: 400 36px/1.2 var(--font-family);
  }
  .container-index .button-item {
    min-width: 282px;
    height: 108px;
    background-size: 100% 100%;
  }
  .container-index .masthead-overview .masthead .button-group {
    margin-top: 23px;
  }
  .container-index .masthead-overview .masthead .battle-net {
    margin-top: 20px;
  }
  .container-index .media-container .feature-banner-list {
    --cards-per-row: 2;
    gap: 16px;
  }
}
@media (max-width: 720px) {
  .container-index .feature-container {
    background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/game_feature_bg_750_5b7151d1.webp);
  }
  .container-index .feature-container .feature-banner-list {
    --cards-per-row: 1;
    --gallery-column-size: minmax(122px, calc(100% / var(--cards-per-row)));
  }
}
@media (max-width: 640px) {
  .container-index .masthead-overview .masthead .logo {
    width: 100%;
    height: auto;
  }
  .container-index .gameplay-container .title-pagination {
    margin-bottom: 10px;
  }
}
@media (max-width: 500px) {
  .container-index #leihuo-age {
    width: 13%;
    top: 86px;
  }
  .container-index .classes-container .classes-content .info-container .tabs-container {
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
  .container-index .classes-container .classes-content .info-container .hero-pagination {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

/** mixins **/
.video-cover-play[data-v-a0957440] {
  position: relative;
  width: 100%;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}
.video-cover-play .video-content[data-v-a0957440] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.video-cover-play.nopointer[data-v-a0957440] {
  pointer-events: none;
}
.video-cover-play[data-v-a0957440]:hover {
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1);
}
.video-cover-play .poster-container[data-v-a0957440] {
  position: relative;
  width: 100%;
  height: 100%;
}
.video-cover-play .poster-container.hide[data-v-a0957440] {
  visibility: hidden;
}
.video-cover-play .poster-container .poster-img[data-v-a0957440] {
  width: 100%;
  display: block;
}
.video-cover-play .poster-container .play-btn[data-v-a0957440] {
  position: absolute;
  width: 108px;
  height: 106px;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/play_button_81d7f9c0.png);
  background-size: cover;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.video-cover-play.outline[data-v-a0957440]::after {
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  top: -5.8%;
  left: -3.2%;
  bottom: 0;
  right: 0;
  padding: 3.4% 3.4%;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/kuang_821bc9b1.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/** mixins **/
.splitPane[data-v-4b58d5fb] {
  width: 100%;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  aspect-ratio: 1.77777778;
  position: relative;
}
.splitPane .pane-trigger[data-v-4b58d5fb] {
  width: 3px;
  background: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/line_669f81d5.png) 100% 100%;
  cursor: col-resize;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.splitPane .pane-trigger .center[data-v-4b58d5fb] {
  height: 33.3%;
  position: absolute;
  z-index: 999999999;
  cursor: col-resize;
  aspect-ratio: 0.53333333;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/pane-trigger_47b69172.png);
}
.splitPane .pane-trigger .center[data-v-4b58d5fb]:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}
.splitPane .pane-one[data-v-4b58d5fb] {
  overflow: hidden;
}
.splitPane .pane-two[data-v-4b58d5fb] {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}
.splitPane .video-content[data-v-4b58d5fb] {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.splitPane .fullWidth[data-v-4b58d5fb] {
  height: 100%;
}

/** mixins **/
.splitPane[data-v-21560d62] {
  width: 100%;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  aspect-ratio: 1.77777778;
  position: relative;
}
.splitPane .pane-trigger[data-v-21560d62] {
  width: 3px;
  background: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/line_669f81d5.png) 100% 100%;
  cursor: col-resize;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.splitPane .pane-trigger .center[data-v-21560d62] {
  height: 33.3%;
  position: absolute;
  z-index: 999999999;
  cursor: col-resize;
  aspect-ratio: 0.53333333;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url(https://ld9.res.netease.com/pc/zt/20250607101606/assets/pane-trigger_47b69172.png);
}
.splitPane .pane-trigger .center[data-v-21560d62]:hover {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}
.splitPane .pane-one[data-v-21560d62] {
  overflow: hidden;
}
.splitPane .pane-two[data-v-21560d62] {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}
.splitPane .video-content[data-v-21560d62] {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.splitPane .fullWidth[data-v-21560d62] {
  height: 100%;
}