.othbody {
  position: relative;
  -webkit-text-size-adjust: 100%;
  font-family: "Microsoft YaHei", Arial, sans-serif, Helvetica;
  font-size: 0.16rem;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
span,
a {
  margin: 0;
  padding: 0;
  font-family: inherit;
  vertical-align: baseline;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  outline: none;
}

a:hover {
  text-decoration: none;
}

img {
  border: 0;
  object-fit: cover;
}

video {
  object-fit: cover;
}

table {
  border-collapse: collapse;
}

area {
  outline: none;
}

input,
textarea,
select {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  resize: none;
  border-radius: 0;
}

input::-ms-clear {
  display: none;
}

input[type="text"],
input[type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

h1.wm-public {
  height: 0;
  line-height: 0;
  font-size: 0;
}

.cf:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

.cf {
  zoom: 1;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.rel {
  position: relative;
}

.abs {
  position: absolute;
}

.auto {
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

html,
body {
  width: 100%;
  overflow-x: hidden;
}

body {
  min-width: 19.2rem;
  background: #1d1d1d;
}

#wrapper {
  display: none;
}

.viewMo {
  display: none !important;
}

.viewPc {
  display: block !important;
}

/* header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 18rem;
  width: 100%;
  height: 1.18rem;
  background-size: 6.64rem 1.44rem;
  z-index: 6;
}

.logo {
  top: 0.39rem;
  left: 0.67rem;
  width: 2.09rem;
  height: 1.88rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover251223/logo.png)
    no-repeat 0 0 / 100% auto;
  z-index: 1;
}

.headMenu {
  top: 0.38rem;
  right: 0.38rem;
  display: flex;
  align-items: center;
}

.headMenu .yyBtn {
  width: 2.28rem;
  height: 0.69rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover251223/headMenuYY.png)
    no-repeat center bottom / 100% auto;
}

.headMenu .yyBtn:hover {
  background-position-y: top !important;
}

.headerLoginStatus {
  margin-left: 0.23rem;
  width: 0.69rem;
  height: 0.69rem;
  overflow: hidden;
}

.headerLoginStatus:hover {
  overflow: visible;
}

.loginIcon {
  display: block;
  width: 0.69rem;
  height: 0.69rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/public/images/cover251223/loginIcon.png)
    no-repeat 0 0;
  background-size: 100% auto;
}

.headerLoginStatus:hover .loginIcon {
  background-position-y: bottom;
}

.loginAfter {
  width: 2.98rem;
  transform: translateX(-1.15rem);
  padding-top: 0.1rem;
  display: none;
}

.loginAfter .cont {
  box-sizing: border-box;
  padding-top: 0.25rem;
  width: 2.98rem;
  height: 0.99rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/public/images/cover251223/loginAfter.png)
    no-repeat 0 0 / 100% auto;
}

.uidBox {
  font-size: 0.16rem;
  color: #fff;
  text-align: center;
  margin-bottom: 0.05rem;
}

.logOut {
  display: block;
  margin: 0 auto;
  height: 0.33rem;
  line-height: 0.33rem;
  padding: 0 0.25rem;
  background: #4fe5fb;
  border-radius: 0.16rem;
  text-align: center;
  font-size: 0.22rem;
  color: #1d1d1d;
}

.language {
  width: 0.69rem;
  height: 0.69rem;
  margin-left: 0.23rem;
}

.iconLanguage {
  width: 0.69rem;
  height: 0.69rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/public/images/cover251223/iconLanguage.png)
    no-repeat 0 0 / 100% auto;
}

.iconLanguage:hover {
  background-position-y: bottom;
}

.chooseLanguage {
  top: 0.93rem;
  width: 1.5rem;
  border-radius: 0.1rem;
  padding-top: 0.13rem;
  background: rgba(29, 29, 29, 0.8);
  display: none;
}

.chooseLanguage::after {
  content: "";
  position: absolute;
  top: -0.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.45rem;
  height: 0.26rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/public/images/cover251223/languageArrow.png)
    no-repeat 0 0 / 100% auto;
}

.chooseLanguage button {
  display: block;
  float: none;
  margin: 0 auto;
  width: 1.25rem;
  height: 0.49rem;
  border-bottom: 0.01rem solid #606060;
  font-size: 0.2rem;
  color: #fff;
}

.chooseLanguage button:hover,
.chooseLanguage button[active="on"] {
  color: #7cecfc;
}

.community {
  margin-left: 0.23rem;
  width: 0.69rem;
  height: 0.69rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/public/images/cover251223/community.png)
    no-repeat 0 0 / 100% auto;
  cursor: pointer;
  overflow: hidden;
}

.community:hover {
  background-position-y: bottom;
}

.community.on {
  overflow: visible;
}

.community .otherPlatform {
  top: 100%;
  right: -0.55rem;
  width: 6.88rem;
  height: 1.05rem;
  box-sizing: border-box;
  padding-top: 0.26rem;
  justify-content: center;
  background: url(https://res1-nte.iwplay.com.tw/cover/public/images/cover251223/otherPlatform.png)
    no-repeat 0 0 / 100% auto;
  display: flex;
  justify-content: center;
}

.community .otherPlatform a {
  margin: 0 0.09rem;
}

/* New Header Elements from Invite */
.topRight {
  position: absolute;
  top: 0.38rem;
  right: 0.38rem;
  display: flex;
  align-items: center;
}

.share {
  width: 0.69rem;
  height: 0.69rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260427/shareHref.png)
    no-repeat 0 0 / 100% auto;
  margin-left: 0.23rem;
  overflow: hidden;
}

.share:hover {
  background-position-y: bottom;
}

.snslink {
  width: 0.69rem;
  height: 0.69rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260427/community.png)
    no-repeat 0 0 / 100% auto;
  margin-left: 0.23rem;
  overflow: hidden;
}

.snslink:hover {
  background-position-y: bottom;
}

.topRight .otherPlatform {
  display: none;
  box-sizing: border-box;
  margin-top: 0.05rem;
  height: 1.05rem;
  justify-content: center;
  padding-top: 0.27rem;
  right: 2.8rem;
  left: initial;
  transform: initial;
  top: 100%;
  width: 6.26rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260427/otherPlatform.png)
    0px 0px / 100% no-repeat;
}

.topRight .otherPlatform.open {
  display: flex;
}

.topRight .otherPlatform a {
  margin: 0 0.09rem;
  width: 0.66rem;
  height: 0.66rem;
}

/* Assuming hover state exists or default */
.music {
  margin-left: 0.23rem;
  width: 0.69rem;
  height: 0.69rem;
  background: url(https://res1-nte.iwplay.com.tw/events/invite/images/music.png)
    no-repeat 0 100%;
  background-size: 100% auto;
}

.music.off {
  background-position: 0 0%;
}

.website {
  width: 2.28rem;
  height: 0.69rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260427/website.png)
    no-repeat 0 0 / 100% auto;
  margin-left: 0.23rem;
  overflow: hidden;
}

.website:hover {
  background-position-y: bottom;
}

.wrap {
  position: relative;
}

.box1 {
  width: 100%;
  height: 15.64rem;
  position: relative;
  background: url(../images/cover260708/page_video.webp)
    no-repeat center 0.01rem / cover;
}

.video_mask_top {
  width: 25.6rem;
  height: 15.64rem;
  background: url(../images/cover260708/video_mask.png)
    no-repeat center 0.01rem / 100% auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
}

/* 願望清單(PC 限定，移植自 nte.perfectworld.com)：背景圖整張，steam/epic 為透明可點區。
   .abs 提供 position:absolute；相對於 .rel box1 定位（右上）。rem 基準與該站相同(2560)。
   z-index:2 必須高於 .video_mask_top(z-index:1) 頂部遮罩，否則遮罩會蓋住、攔截點擊。 */
.wishList {
  top: 1.25rem;
  right: 0.4rem;
  width: 5.93rem;
  height: 1.99rem;
  z-index: 2;
  background: url(../../images/cover260708/wishList.webp)
    no-repeat 0 0 / 100% auto;
}

.wishList a {
  width: 2.34rem;
  height: 0.6rem;
  right: 0.13rem;
}

.wishList .steam {
  top: 0.14rem;
}

.wishList .epic {
  top: 1.25rem;
}

.page_video {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(https://nte.perfectworld.com/public/images/cover251223/page_video.jpg);
}

.yy_otherPlatform.otherPlatform {
  display: flex;
}

.yy_otherPlatform.otherPlatform a {
  margin: 0 0.09rem;
}

.otherPlatform a {
  position: relative;
  margin: 0 0 0.2rem 0;
  width: 0.66rem;
  height: 0.66rem;
  background: url(https://res1-nte.iwplay.com.tw/images/otherPlatform.png)
    no-repeat;
  background-position-y: 0;
  background-size: auto 200%;
}

.otherPlatform .platform_twitter {
  background-position-x: 0;
}

.otherPlatform .platform_facebook {
  background-position-x: -0.84rem;
}

.otherPlatform .platform_youtube {
  background-position-x: -1.68rem;
}

.otherPlatform .platform_discord {
  background-position-x: -2.52rem;
}

.otherPlatform .platform_reddit {
  background-position-x: -3.37rem;
}

.otherPlatform .platform_ins {
  background-position-x: -4.2rem;
}

.otherPlatform .platform_tiktok {
  background-position-x: -5.04rem;
}

.otherPlatform .platform_line {
  background-position-x: -5.88rem;
}

.otherPlatform .platform_naver {
  background-position-x: -6.72rem;
}

.otherPlatform .platform_talk {
  background-position-x: -7.56rem;
}

.otherPlatform a:hover {
  background-position-y: -0.66rem;
}

.otherPlatform .code {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  display: none;
}

.otherPlatform a:hover .code {
  display: block;
}

.otherPlatform .code div {
  margin-bottom: 0.1rem;
  border-radius: 0.05rem;
  padding: 0.1rem;
  background: #fff;
}

.otherPlatform .code img {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
}

.slogan {
  width: 7.33rem;
  height: 2.97rem;
  /* 依 slogan.png 1848×748 等比(保留寬度算高度) */
  position: absolute;
  bottom: 6rem;
  left: 50%;
  transform: translate(-50%);
  background: url(../../images/cover260708/slogan.png)
    no-repeat 0 0 / 100% auto;
  z-index: 1;
}

.pvBtn {
  width: 1.22rem;
  height: 1.22rem;
  position: absolute;
  top: 5.98rem;
  left: 50%;
  margin-left: 4.1rem;
  background: url(https://nte.perfectworld.com/public/images/cover250513/pvBtn_a.png)
    no-repeat 0 0;
  background-size: 100% auto;
  z-index: 1;
}

.pvBtn span {
  width: 1.22rem;
  height: 1.22rem;
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://nte.perfectworld.com/public/images/cover250513/pvBtn_k.png)
    no-repeat 0 0;
  background-size: 100% auto;
  animation: tapeRotate 6s linear infinite;
}

@keyframes tapeRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

.ytbtn_box {
  position: absolute;
  bottom: 3.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.qrcode {
  margin: 0.1rem 0.12rem;
  width: 1.83rem;
  height: 1.82rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/qrcode.png)
    no-repeat 0 0 / 100% auto;
}

.PCBtn {
  margin: 0.1rem 0.12rem;
  width: 1.84rem;
  height: 1.84rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/btn-download-pc.png)
    no-repeat top/100% auto;
  transition: transform 0.3s;
}

.indexYYBtn,
.downloadBtn {
  margin: 0 0.12rem;
  width: 4.24rem;
  height: 1.98rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/indexYYBtn_260427.png)
    no-repeat top/100% auto;
  transition: transform 0.3s;
}

.testRecruitBtn {
  width: 4.62rem;
  height: 1.55rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover251223/tst_QueryBtnt.png)
    no-repeat 0 0;
  background-size: 100% auto;
}

.testDownBtn {
  width: 4.62rem;
  height: 2.54rem;
  margin-left: 0.23rem;
  background: url(https://nte.perfectworld.com/cn/images/main250702/pageIndex/testDownBtn.png)
    no-repeat 0 0;
  background-size: 100% auto;
  transition: transform 0.3s;
}

.ytbtn_box button:hover,
.ytbtn_box a:hover {
  background-position-y: bottom;
}

.sideBanner {
  top: 9.2rem;
  left: 0.4rem;
  width: 5.05rem;
  height: 2.64rem;
  background: url(https://nte.perfectworld.com/cn/images/main250702/pageIndex/sideBanner.png)
    no-repeat 0 0;
  background-size: 100% auto;
  z-index: 2;
}

.sideInvite {
  right: 0.3rem;
  bottom: 8rem;
  width: 2.25rem;
  height: 3.15rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/sideInvite_EibonPartner.png)
    no-repeat 0 0 / 100% auto;
  z-index: 1;
}

.rel_bg {
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260420/rel_bg.jpg)
    no-repeat center top / cover;
}

.box_2 .ytbtn_box {
  left: 49%;
}

/* 都市映像 */
.page_city {
  width: 100%;
  height: 13.63rem;
  position: relative;
  /* background: url(https://res1-nte.iwplay.com.tw/cover/public/images/cover260109/page_city.jpg) no-repeat center top / cover; */
}

/* city_title（複製 box2Title/box3Title 樣式，獨立 class 之後微調） */
.city_title {
  position: absolute;
  top: 0rem;
  left: 50%;
  margin-left: -8.2rem;
  width: 10.21rem;
  height: 1.69rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/cityTitle.png)
    no-repeat 0 0;
  background-color: transparent;
  /* 半透明青色：辨識位置用，正式時移除 */
  background-size: 100% auto;
  z-index: 1;
}

.wavyLline {
  top: 9.6rem;
  left: 0;
  width: 100%;
}

.wavyLline p {
  right: 0;
  width: 100%;
}

.wavyLline1 {
  top: 0;
  height: 1.04rem;
  background: url(https://nte.perfectworld.com/public/images/cover240718/wavyLline1.png)
    repeat-x 0 0;
  background-size: 5.6rem 1.04rem;
  z-index: 1;
  animation: bgSlide1 10s linear infinite;
}

.wavyLline2 {
  top: 0.26rem;
  height: 1.12rem;
  background: url(https://nte.perfectworld.com/public/images/cover240718/wavyLline2.png)
    repeat-x 2.8rem 0;
  background-size: 5.6rem 1.12rem;
  animation: bgSlide2 5s linear infinite;
}

@keyframes bgSlide1 {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -100% 0;
  }
}

@keyframes bgSlide2 {
  from {
    background-position: 2.8rem 0;
  }

  to {
    background-position: -100% 0;
  }
}

.citySlides {
  top: 2.1rem;
  width: 16.5rem;
  /* 改：原 14rem → 16.5rem */
  height: 7.78rem;
  /* = 16.5 × (6.6 / 14) 等比例 */
}

.splash1 {
  top: -0.8rem;
  left: -1rem;
  width: 4.41rem;
  height: 4.99rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/public/images/cover260109/splash1.png)
    no-repeat 0 0 / 100% auto;
}

.splash2 {
  bottom: -0.7rem;
  right: -1.6rem;
  width: 3.91rem;
  height: 3.11rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/public/images/cover260109/splash2.png)
    no-repeat 0 0 / 100% auto;
}

.citySwiper {
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 0.03rem solid #161616;
  background: #767676;
}

.citySwiper .swiper-slide {
  box-sizing: border-box;
  padding: 0.07rem;
}

.citySlideImg {
  display: block;
  width: 100%;
  height: 100%;
}

.citySlidePrev,
.citySlideNext {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  width: 0.71rem;
  height: 2.78rem;
  margin-top: -1.65rem;
  opacity: 1;
  display: none;
  /* 隱藏左右切換鈕，改由 autoplay 自動輪播 */
}

.citySlidePrev {
  left: -0.85rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260109/citySlidePrev.png)
    no-repeat 0 0;
  background-size: 200% auto;
}

.citySlideNext {
  right: -0.85rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260109/citySlideNext.png)
    no-repeat 0 0;
  background-size: 200% auto;
}

.b.citySlidePrev,
.b.citySlideNext {
  background-position: 0 -2.78rem;
}

.citySlidePrev:hover,
.citySlideNext:hover {
  background-position: -0.71rem 0;
}

.b.citySlidePrev:hover,
.b.citySlideNext:hover {
  background-position: -0.71rem -2.78rem;
}

.citySlidePrev::after,
.citySlideNext::after {
  display: none;
}

.citySlides .cityPagination {
  bottom: -1rem;
  line-height: 0;
  font-size: 0;
}

.cityPagination .swiper-pagination-bullet {
  width: 0.22rem;
  height: 0.22rem;
  margin: 0 0.18rem !important;
  background: #616161;
  border: 0.02rem solid #000;
  border-radius: 50%;
  opacity: 1;
}

.cityPagination .swiper-pagination-bullet-active {
  background: #e8e8e8;
}

.guide_intel {
  bottom: 0.6rem;
  right: 0.4rem;
  width: 2.45rem;
  height: 1.03rem;
  background: url(https://nte.perfectworld.com/cn/images/cover240718/guide_intel.png)
    no-repeat 0 0;
  background-size: 100% auto;
}

/* Footer Styles */
.footer {
  bottom: 0;
  left: 0;
  width: 100%;
  position: relative;
  padding: 10px 0;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2px;
  line-height: normal;
  background: #000;
  z-index: 2;
}

.footer .container {
  width: 100%;
  max-width: 100%;
}

footer p,
footer ul {
  opacity: 0.6;
  margin-bottom: 0;
}

footer p a {
  color: inherit;
}

footer p a:hover {
  color: #e51737;
  text-decoration: none;
  transition: 0.3s ease;
}

footer .copyright,
footer .company,
footer p,
footer .grading,
footer ul {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}

footer .copyright {
  font-size: 0.145rem;
  margin-right: 10px;
  line-height: 0.23rem;
}

footer .company {
  margin-right: 5px;
}

footer img {
  margin: 0 6px;
  vertical-align: middle;
}

footer ul {
  font-size: 0.13rem;
  list-style: none;
  display: inline-block;
  vertical-align: middle;
}

/* Migrated Index Button Styles - Removed for Revert */
/* 商店註冊區塊 (從 main_KTZRZRJB.css 搬運) */
.storeBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/bg_registration_actions.png)
    no-repeat center center;
  background-size: 100% auto;
  /* border-radius: 0.1rem;
          padding: 0.15rem 0.3rem; */
  margin-left: 0.25rem;
  /* margin-bottom: 0.24rem; */
  width: 6.6rem;
  height: 1.5rem;
}

.storeTitle {
  height: 0.4rem;
}

.mob {
  display: none;
}

.storePlatforms {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 0.17rem;
  width: 8.5rem;
}

.platformBtn {
  position: relative;
  height: 0.89rem;
  margin-bottom: 0.25rem;
}

.pcPlayBtn {
  width: 2.66rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/btn_windows_260429.png)
    no-repeat 0 0 / 100% auto;
}

.googlePlayBtn {
  width: 2.66rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/btn_android_260429.png)
    no-repeat 0 0 / 100% auto;
}

.appStoreBtn {
  width: 2.66rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/btn_ios_260429.png)
    no-repeat 0 0 / 100% auto;
}

.googlePlayGamesBtn {
  width: 4.05rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/btn_googleplaygames.png)
    no-repeat 0 0 / 100% 100%;
}

.ps5Btn {
  width: 4.05rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/btn_ps5_260429.png)
    no-repeat 0 0 / 100% 100%;
}

.appStoreBtn .macTip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/macTip.png)
    no-repeat 0 0 / 100% 100%;
  height: 0.21rem;
  width: 1.15rem;
  bottom: -0.24rem;
}

.mac_support_txt {
  position: absolute;
  bottom: -0.25rem;
  right: 0;
  color: #ffffff;
  font-size: 0.16rem;
  white-space: nowrap;
  text-align: center;
  width: 6.8rem;
}

.tip_text {
  position: absolute;
  width: 4.16rem;
  height: 0.26rem;
  bottom: -0.3rem;
  left: 0;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260429/tip_text.png)
    no-repeat 0 0 / 100% 100%;
}

.ntehavefun {
  position: absolute;
  width: 7.19rem;
  height: 0.37rem;
  bottom: -0.35rem;
  right: 0.65rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260513/ntegift_text.png)
    no-repeat 0 0 / 100% 100%;
}

/* 引導下載 */
.bottomAction {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  padding-top: 0.1rem;
  width: 25.6rem;
  left: 50%;
  bottom: -1.72rem;
  transform: translate(-50%, 0);
  height: 1.72rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260429/call_to_action_bg.png)
    no-repeat center 0 / 100% auto;
  z-index: 1020;
  opacity: 0;
  transition: 0.3s ease;
}

.bottomAction.active {
  opacity: 1;
  bottom: 0;
}

.bottomContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 14rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.bottomAction .text {
  display: flex;
  flex-direction: column;
}

.bottomText {
  margin-bottom: 0.15rem;
  width: 7.19rem;
  height: 0.37rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/ntegift_text.png)
    no-repeat 0 0 / 100% auto;
}

.tipText {
  position: absolute;
  width: 3.75rem;
  height: 0.26rem;
  right: 1rem;
  bottom: -0.3rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260429/tip_text.png)
    no-repeat 0 0 / 100% auto;
}

.bottomAction .downloadBtn {
  margin-top: -0.25rem;
  width: 5.18rem;
  height: 1.12rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260429/call_to_action_btn.png)
    no-repeat 0 0 / 100% auto;
  transition: 0.3s ease;
}

.bottomAction .downloadBtn:hover {
  filter: brightness(1.2);
}

.bottomAction .toggle {
  position: absolute;
  right: 4.5rem;
  width: 1.1rem;
  height: 0.82rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260429/toggle.png)
    no-repeat 0 0 / 100% auto;
  cursor: pointer;
  z-index: 15;
}

/* === 新 box2 / box3（從 111/cover260528 引入，PC 版） === */
.box2 {
  /* background: url(../../images/cover260708/box2.jpg) no-repeat 50% / cover; */
  height: 13.18rem;
}

/* box2 標題圖（複製 yyNum 的定位邏輯，獨立 class 方便日後替換內容） */
.box2Title {
  top: 0.8rem;
  left: 50%;
  margin-left: -8.2rem;
  width: 10.21rem;
  height: 1.69rem;
  background: url(../../images/cover260708/box2Title.png)
    no-repeat 0 0;
  background-color: transparent;
  /* 半透明橘黃：辨識位置用，正式時移除 */
  background-size: 100% auto;
  z-index: 1;
}

.box2Wrap {
  height: 100%;
}

/* 雙層分離：背景層 + 人物層 */
.box2SlideBg,
.box2SlideChar {
  background-repeat: no-repeat;
}

/* 背景：固定區塊大小（不隨 swiper 容器縮放）、貼右側
           尺寸 = 原圖 1418 × 586 px → 14.18rem × 5.86rem
           位置 = row 2 of 10×10 grid（2 × 1.318 = 2.64rem from top） */
.box2SlideBg {
  top: 3.9rem;
  /* ← 改：從 row 2 開始（10×10 網格） */
  right: 0;
  width: 14.18rem;
  height: 5.86rem;
  background-position: 0 0;
  background-size: 100% 100%;
  background-color: transparent;
  /* debug 紅橘：辨識位置用，正式時移除 */
  z-index: 0;
}

/* 人物：縮小至 14rem 寬，改用 left:50% + margin-left 定位（與 box2Title 同模式）
           維持右緣 = viewport_center + 12.8rem (= 與原本 right:0 同一個視覺位置) */
.box2SlideChar {
  top: 1rem;
  left: 50%;
  margin-left: -3.5rem;
  /* = 12.8 − 14（讓右緣對齊 viewport_center + 12.8rem） */
  width: 16.54rem;
  /* 縮小：原 16.54rem → 14rem (~85%) */
  height: 13.17rem;
  /* = 14 × (13.17 / 16.54) 等比縮 */
  background-position: 0 0;
  background-size: 100% 100%;
  /* 圖填滿容器，等比縮 */
  background-color: transparent;
  /* debug 紫色：辨識位置用，正式時移除 */
  z-index: 1;
}

/* slide1 = 安魂曲 */
.box2Slide.slide1 .box2SlideBg {
  background-image: url(../../images/cover260708/box2Slide1_bg.webp);
}

.box2Slide.slide1 .box2SlideChar {
  background-image: url(../../images/cover260708/box2Slide1_chara.webp);
}

/* slide2 = 卡厄斯 */
.box2Slide.slide2 .box2SlideBg {
  background-image: url(../../images/cover260708/box2Slide2_bg.webp);
}

.box2Slide.slide2 .box2SlideChar {
  background-image: url(../../images/cover260708/box2Slide2_chara.webp);
}

/* box2Nav：只負責定位，不設 width/height → 寬高完全跟著內部 NavCont 走
           要反過來「由 Nav 限制 NavCont 可容納多少按鈕」，把 width 設定值並把
           .box2NavCont 的 width 改成 100% 即可 */
.box2Nav {
  bottom: 1.35rem;
  left: 50%;
  margin-left: 5.25rem;
  /* 錨點：viewport_center + 2.8rem（保留原位置）*/
  transform: none;
  /* 覆寫 .auto 類別的 translate(-50%, 0) */
  overflow: hidden;
  z-index: 1;
  background-color: transparent;
  /* debug 淺藍，正式時移除 */
}

/* box2NavCont：固定高度，寬度自動跟著裡面按鈕個數撐開（shrink-to-fit） */
.box2NavCont {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.65rem;
  /* ← 固定高度（決定按鈕大小） */
  width: fit-content;
  /* ← 寬度依內容自動 */
  z-index: 1;
  background-color: transparent;
  /* debug 紫紅，正式時移除 */
}

/* box2 導覽按鈕：固定 2 顆，採 sprite 圖（上下兩態），1:1 比例 */
.box2NavBtn {
  position: relative;
  cursor: pointer;
  width: auto;
  aspect-ratio: 1 / 1;
  height: 100%;
  margin: 0 0.125rem;
  padding: 0;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  /* 預設(未選中)：顯示 sprite 上半 */
  background-size: 100% auto;
}

.box2NavBtn.slide1 {
  background-image: url(../../images/cover260708/box2Nav1.webp);
}

.box2NavBtn.slide2 {
  background-image: url(../../images/cover260708/box2Nav2.webp);
}

/* 選中：背景位置移到 sprite 下半 */
.box2NavBtn.active {
  background-position: 0 100%;
}

/* hover 效果維持原本（深色遮罩變淡），不影響 sprite 顯示 */
.box2NavBtn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: background 0.2s ease;
}

.box2NavBtn:hover::after {
  background: rgba(0, 0, 0, 0.2);
}

.box2NavBtn.active::after {
  background: rgba(0, 0, 0, 0);
}

.box3 {
  /* background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box3.jpg) no-repeat 50% / cover; */
  height: 15.16rem;
  overflow: hidden;
}

/* box3 標題圖（複製 yyNum 的定位邏輯，獨立 class 方便日後替換內容） */
.box3Title {
  top: 1.3rem;
  left: 50%;
  margin-left: -8.2rem;
  width: 10.21rem;
  height: 1.69rem;
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box3Title.png)
    no-repeat 0 0;
  background-color: transparent;
  /* 半透明萊姆綠：辨識位置用，正式時移除 */
  background-size: 100% auto;
  z-index: 1;
}

.box3 .swiper {
  border: 0.1rem solid #494949;
  height: 7.18rem;
  left: 50%;
  margin-left: -2.12rem;
  top: 3.64rem;
  /* 原 1.39rem + 1.25rem + 1rem */
  width: 12.77rem;
  z-index: 3;
  /* 最上層：蓋住 box3Dot 與 box3Word 背景 */
}

/* box3-dot：以輪播左上角為基準，露出約 30%（再額外左移 20%）*/
.box3Dot {
  /* 原圖 348 × 337 px = 3.48 × 3.37 rem */
  width: 3.48rem;
  height: 3.37rem;
  top: 2.63rem;
  /* 輪播 top 3.64rem − 30% × 3.37rem(=1.01rem) */
  left: 50%;
  margin-left: -3.86rem;
  /* 原 -3.16rem − 20% × 圖寬 3.48rem(=0.7rem) */
  background: url(../../images/cover260708/box3-dot.png)
    no-repeat 0 0 / 100% auto;
  z-index: 2;
  /* 中層：在 box3Word 之上、swiper 之下 */
}

.box3 .swiper img {
  display: block;
  height: 100%;
  width: 100%;
}

.box3Word {
  height: 7.52rem;
  left: 50%;
  margin-left: -12.8rem;
  top: 4.41rem;
  /* 原 2.16rem + 1.25rem + 1rem */
  width: 23.67rem;
  z-index: 1;
  /* 最底層：背景被 box3Dot 與 swiper 覆蓋 */
}

.box3Word[v="1"] {
  background: url(../../images/cover260708/box3-v1.png)
    no-repeat 0 0 / 100% auto;
}

.box3Word[v="2"] {
  background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box3-v2.png)
    no-repeat 0 0 / 100% auto;
}

.box3Cont {
  left: 50%;
  margin-left: -7.25rem;
  /* 與 .box3Title 同水平錨點 */
  top: 1.25rem;
  width: 5.5rem;
  height: 5.15rem;
  display: flex;
  flex-direction: column;
  /* 縱向排列，方便 box3MoreBtn 推到底部 */
  background-color: transparent;
  /* debug 黃色：辨識位置用，正式時移除 */
}

.box3Cont dl {
  color: #ece9ff;
  display: none;
}

/* dt 改用圖片：固定高度 .7rem，寬度跟隨各 PNG 自然比例（不拉伸）
           5 張圖原寬皆不同（503/552/356/360/286 × 70 px），用 bg-size: auto 100% 等比縮放 */
.box3Cont dt {
  height: 0.7rem;
  background-repeat: no-repeat;
  background-size: auto 100%;
  /* 高度填滿、寬度依比例 */
  background-position: 0 center;
  /* PC：圖片靠左對齊（容器仍由 flex stretch 撐滿） */
  margin-bottom: 0.25rem;
  /* dt 與 dd 間距 */
  font-size: 0;
  /* 隱藏原文字 */
  overflow: hidden;
}

.box3Cont dl:nth-of-type(1) dt {
  background-image: url(../../images/cover260708/box3SlideDt1.png);
}

.box3Cont dl:nth-of-type(2) dt {
  background-image: url(../../images/cover260708/box3SlideDt2.png);
}

.box3Cont dl:nth-of-type(3) dt {
  background-image: url(../../images/cover260708/box3SlideDt3.png);
}

.box3Cont dl:nth-of-type(4) dt {
  background-image: url(../../images/cover260708/box3SlideDt4.png);
}

.box3Cont dl:nth-of-type(5) dt {
  background-image: url(../../images/cover260708/box3SlideDt5.png);
}

.box3Cont dd {
  color: #000;
  font-size: 0.3rem;
  line-height: 0.48rem;
  height: 2.11rem;
  /* = 5(box3Cont) − 1.43(dt) − .25(gap) − .25(gap) − .96(btn) */
  overflow-y: auto;
  /* 內容過高出現 scroll */
  margin-top: 0;
  margin-bottom: 0.25rem;
  /* dd → 按鈕間距 */
}

/* box3 內「更多情報」按鈕：sprite 448 × 359（3 態，與 charMoreBtn 同邏輯）
           HTML 結構：.box3MoreBtn 已移出 .box3Cont，現為 .box3Word 直屬子元素，
           採絕對定位貼齊原先 .box3Cont 左下位置（不隨 dd 內容高度浮動）。 */
.box3Word .box3MoreBtn {
  display: none;
  /* 預設隱藏：僅第 2 張幻燈片（idx===1, Porsche 聯動上線）由 JS 顯示 */
  position: absolute;
  left: 50%;
  margin-left: -7.25rem;
  /* 對齊 .box3Cont 左邊（同 .box3Cont 的 margin-left） */
  bottom: 1.12rem;
  /* = box3Word(7.52) − box3Cont top(1.25) − box3Cont height(5.15) */
  width: 3.6rem;
  height: 0.96rem;
  background-image: url(../../images/cover260708/box3WordBtn.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  /* state 1：normal（可點態） */
  background-size: 100% 300%;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 0;
  overflow: hidden;
  transition: none;
  /* 0 秒切換 */
}

.box3Word .box3MoreBtn:hover {
  background-position: 0 50%;
  /* state 2：hover */
}

.box3Word .box3MoreBtn.none {
  background-position: 0 100%;
  /* state 3：none */
  pointer-events: none;
  cursor: default;
}

/* 隱藏 box3 prev/next（改用條狀 pagination 即可） */
.box3Next,
.box3Prev {
  display: none !important;
}

/* box3 條狀 pagination：寬度=swiper(12.77rem)的一半，水平對齊 swiper 中心 */
/* swiper 中心相對 box3Word 左緣 = 17.065rem，pagination 寬 6.385rem → left = 13.88rem */
.box3Pagination {
  bottom: 0.8rem !important;
  left: 13.07rem !important;
  /* 改：對齊 swiper 中心（swiper 中心 = 17.065rem，扣除 width/2 = 4rem） */
  width: 8rem !important;
  /* 改：指定寬度 */
  display: flex !important;
  align-items: center;
  gap: 0.12rem;
  line-height: 0;
  font-size: 0;
}

.box3Pagination .swiper-pagination-bullet {
  flex: 1 1 0;
  width: auto;
  height: 0.08rem;
  /* PC 版降低高度 */
  margin: 0 !important;
  background: #313131;
  /* 與手機版同步 */
  border: 1px solid #aaaaaa;
  /* 與手機版同步 */
  box-sizing: border-box;
  border-radius: 0;
  /* 與手機版同步：移除圓角 */
  opacity: 1;
  transition: background 0.25s ease;
}

.box3Pagination .swiper-pagination-bullet-active {
  background: #f1f1f1;
  /* 與手機版同步：奶油色 */
}

/* === box2 角色資訊面板（疊在 slide 圖片上方，data-driven 文字） === */
/* 面板位置：相對於 13.18rem 的 box2，靠左、上下置中 */
.box2Slide {
  position: relative;
  overflow: hidden;
}

.box2CharInfo {
  left: 50%;
  margin-left: -8.2rem;
  /* 與 .box2Title 同水平錨點 */
  top: 4.5rem;
  width: 5.8rem;
  height: 7.3rem;
  /* = 5.8 × (7.5 / 8) 依原 8:7.5 比例縮放 */
  display: flex;
  flex-direction: column;
  /* 縱向排列，方便 charMoreBtn 推到底 */
  z-index: 2;
  color: #fff;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  background-color: transparent;
  /* debug：辨識位置用，正式時移除 */
}

/* 角色名稱列：改用圖片（固定尺寸 5.8rem × 1.21rem，等比） */
.box2CharInfo .charNameRow {
  width: 5.8rem;
  height: 1.21rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  margin-bottom: 0.5rem;
}

/* slide1 = 真紅 */
.box2Slide.slide1 .charNameRow {
  background-image: url(../../images/cover260708/role-name-zhenhong.png);
}

/* slide2 = 伊洛伊 */
.box2Slide.slide2 .charNameRow {
  background-image: url(../../images/cover260708/role-name-yiroyi.png);
}

/* tag 容器：縱向堆疊 */
.box2CharInfo .charTags {
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  margin-bottom: 0.55rem;
  width: 4.34rem;
}

/* tag：用圖片背景（原圖 434 × 81 px → 4.34rem × 0.81rem） */
.box2CharInfo .tag {
  width: 4.34rem;
  height: 0.81rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}

/* slide1（真紅）2 個 tag */
.box2Slide.slide1 .charTags .tag:nth-child(1) {
  background-image: url(../../images/cover260708/box2Slide1_tag1.webp);
}

.box2Slide.slide1 .charTags .tag:nth-child(2) {
  background-image: url(../../images/cover260708/box2Slide1_tag2.webp);
}

/* slide2（伊洛伊）2 個 tag */
.box2Slide.slide2 .charTags .tag:nth-child(1) {
  background-image: url(../../images/cover260708/box2Slide2_tag1.webp);
}

.box2Slide.slide2 .charTags .tag:nth-child(2) {
  background-image: url(../../images/cover260708/box2Slide2_tag2.webp);
}

/* 更多情報按鈕 */
/* 雪碧圖按鈕：sprite 448 × 359（3 態縱排）
           容器 3.6rem × 0.96rem（保持原顯示尺寸）
           bg-size 100% 300% 顯示一態，hover 滑中間態，.none 滑下半態（不可點）
           無漸變（transition: none） */
.box2CharInfo .charMoreBtn {
  display: inline-block;
  width: 3.6rem;
  height: 0.96rem;
  background-image: url(../../images/cover260708/charMoreBtn.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  /* 預設 state 1：normal */
  background-size: 100% 300%;
  /* 高度 300%，每態 = 容器高（3 態） */
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 0;
  /* 隱藏文字 */
  overflow: hidden;
  margin-top: auto;
  /* 推到 box2CharInfo 底部 */
  transition: none;
  /* 0 秒，瞬間切換 */
}

.box2CharInfo .charMoreBtn:hover {
  background-position: 0 50%;
  /* state 2：hover */
}

/* state 3：none（不可點擊） */
.box2CharInfo .charMoreBtn.none,
.box2Slide.slide2 .box2CharInfo .charMoreBtn {
  /* 卡厄斯按鈕固定為 none 態 */
  background-position: 0 100%;
  pointer-events: none;
  cursor: default;
}

/* none 態 hover 不切換 */
.box2CharInfo .charMoreBtn.none:hover,
.box2Slide.slide2 .box2CharInfo .charMoreBtn:hover {
  background-position: 0 100%;
}

/* === 入場動畫（移植自 20260525/角色预览.html） === */
.box2Slide .anim-item {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* .play class 由 JS 在 slide 切換時重加，觸發 keyframes 重播。
           時序比照 nte.perfectworld.com box2：時長 .3s、每項間隔 .1s（更俐落） */
.box2Slide.play .charNameRow {
  animation: box2SlideRightFade 0.3s 0s forwards;
}

.box2Slide.play .charTags .tag:nth-child(1) {
  animation: box2SlideRightFade 0.3s 0.1s forwards;
}

.box2Slide.play .charTags .tag:nth-child(2) {
  animation: box2SlideRightFade 0.3s 0.2s forwards;
}

.box2Slide.play .charTags .tag:nth-child(3) {
  animation: box2SlideRightFade 0.3s 0.3s forwards;
}

.box2Slide.play .charMoreBtn {
  animation: box2SlideUpFade 0.3s 0.4s forwards;
}

@keyframes box2SlideDownFade {
  0% {
    opacity: 0;
    transform: translateY(-0.2rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes box2SlideUpFade {
  0% {
    opacity: 0;
    transform: translateY(0.2rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes box2SlideRightFade {
  0% {
    opacity: 0;
    transform: translateX(-0.4rem);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes box2PopIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  70% {
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes box2FadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}