.othbody {
          position: relative;
          -webkit-text-size-adjust: 100%;
          font-family: "Microsoft YaHei", Arial, sans-serif, Helvetica;
          font-size: .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: .39rem;
          left: .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: .38rem;
          right: .38rem;
          display: flex;
          align-items: center;
        }

        .headMenu .yyBtn {
          width: 2.28rem;
          height: .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: .23rem;
          width: 0.69rem;
          height: 0.69rem;
          overflow: hidden;
        }

        .headerLoginStatus:hover {
          overflow: visible;
        }

        .loginIcon {
          display: block;
          width: .69rem;
          height: .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: .1rem;
          display: none;
        }

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

        .uidBox {
          font-size: .16rem;
          color: #FFF;
          text-align: center;
          margin-bottom: .05rem;
        }

        .logOut {
          display: block;
          margin: 0 auto;
          height: .33rem;
          line-height: .33rem;
          padding: 0 .25rem;
          background: #4fe5fb;
          border-radius: .16rem;
          text-align: center;
          font-size: .22rem;
          color: #1d1d1d
        }

        .language {
          width: .69rem;
          height: .69rem;
          margin-left: .23rem;
        }

        .iconLanguage {
          width: .69rem;
          height: .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: .93rem;
          width: 1.5rem;
          border-radius: .1rem;
          padding-top: .13rem;
          background: rgba(29, 29, 29, .8);
          display: none
        }

        .chooseLanguage::after {
          content: "";
          position: absolute;
          top: -0.2rem;
          left: 50%;
          transform: translateX(-50%);
          width: .45rem;
          height: .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: .49rem;
          border-bottom: .01rem solid #606060;
          font-size: .2rem;
          color: #FFF
        }

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

        .community {
          margin-left: .23rem;
          width: .69rem;
          height: .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: .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 .09rem;
        }

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

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

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

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

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

        .topRight .otherPlatform {
          display: none;
          box-sizing: border-box;
          margin-top: .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 .09rem;
          width: .66rem;
          height: .66rem;
        }

        /* Assuming hover state exists or default */
        .music {
          margin-left: .23rem;
          width: .69rem;
          height: .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: .69rem;
          background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260427/website.png) no-repeat 0 0 / 100% auto;
          margin-left: .23rem;
          overflow: hidden;
        }

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

        .wrap {
          position: relative;
        }

        .box1 {
          width: 100%;
          height: 15.64rem;
          position: relative;
          background: url(https://res1-nte.iwplay.com.tw/cover/public/images/cover260603/page_video.webp) no-repeat center .01rem / cover;
        }

        .video_mask_top {
          width: 25.6rem;
          height: 15.64rem;
          background: url(https://res1-nte.iwplay.com.tw/cover/public/images/cover260603/video_mask.png) no-repeat center .01rem / 100% auto;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, 0);
          z-index: 1
        }

        .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: .66rem;
          height: .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: .1rem;
          border-radius: .05rem;
          padding: .1rem;
          background: #FFF
        }

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

        .slogan {
          width: 7.33rem;
          height: 5.04rem;
          position: absolute;
          bottom: 4.75rem;
          left: 50%;
          transform: translate(-50%);
          background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/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: .1rem .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: .1rem .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 .3s;
        }

        .indexYYBtn,
        .downloadBtn {
          margin: 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 .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: .23rem;
          background: url(https://nte.perfectworld.com/cn/images/main250702/pageIndex/testDownBtn.png) no-repeat 0 0;
          background-size: 100% auto;
          transition: transform .3s
        }

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

        .sideBanner {
          top: 9.2rem;
          left: .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: .3rem;
          bottom: 9rem;
          width: 2.25rem;
          height: 3.15rem;
          background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/sideInvite_lipton.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;
        }

        /* 都市映像 */
        .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: -.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: -.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: .03rem solid #161616;
          background: #767676;
        }

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

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

        .citySlidePrev,
        .citySlideNext {
          position: absolute;
          z-index: 10;
          cursor: pointer;
          width: .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: .22rem;
          height: .22rem;
          margin: 0 .18rem !important;
          background: #616161;
          border: .02rem solid #000;
          border-radius: 50%;
          opacity: 1
        }

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

        .guide_intel {
          bottom: .6rem;
          right: .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: .17rem;
          width: 8.5rem;
        }

        .platformBtn {
          position: relative;
          height: .89rem;
          margin-bottom: .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: .21rem;
          width: 1.15rem;
          bottom: -.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: -.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: -.35rem;
          right: .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: .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: -.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: -.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: .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(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box2.jpg) no-repeat 50% / cover; */
          height: 13.18rem;
        }

        /* box2 標題圖（複製 yyNum 的定位邏輯，獨立 class 方便日後替換內容） */
        .box2Title {
          top: .8rem;
          left: 50%;
          margin-left: -8.2rem;
          width: 10.21rem;
          height: 1.69rem;
          background: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/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(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box2Slide1_bg.webp);
        }

        .box2Slide.slide1 .box2SlideChar {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box2Slide1_chara.webp);
        }

        /* slide2 = 卡厄斯 */
        .box2Slide.slide2 .box2SlideBg {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box2Slide2_bg.webp);
        }

        .box2Slide.slide2 .box2SlideChar {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/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 .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(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box2Nav1.webp);
        }

        .box2NavBtn.slide2 {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/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, .5);
          transition: background .2s ease;
        }

        .box2NavBtn:hover::after {
          background: rgba(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: .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(https://res1-nte.iwplay.com.tw/cover/images/cover260603/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(https://res1-nte.iwplay.com.tw/cover/images/cover260603/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: .7rem;
          background-repeat: no-repeat;
          background-size: auto 100%;
          /* 高度填滿、寬度依比例 */
          background-position: 0 center;
          /* PC：圖片靠左對齊（容器仍由 flex stretch 撐滿） */
          margin-bottom: .25rem;
          /* dt 與 dd 間距 */
          font-size: 0;
          /* 隱藏原文字 */
          overflow: hidden;
        }

        .box3Cont dl:nth-of-type(1) dt {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box3SlideDt1.png);
        }

        .box3Cont dl:nth-of-type(2) dt {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box3SlideDt2.png);
        }

        .box3Cont dl:nth-of-type(3) dt {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box3SlideDt3.png);
        }

        .box3Cont dl:nth-of-type(4) dt {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box3SlideDt4.png);
        }

        .box3Cont dl:nth-of-type(5) dt {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box3SlideDt5.png);
        }

        .box3Cont dd {
          font-size: .3rem;
          line-height: .48rem;
          height: 2.11rem;
          /* = 5(box3Cont) − 1.43(dt) − .25(gap) − .25(gap) − .96(btn) */
          overflow-y: auto;
          /* 內容過高出現 scroll */
          margin-top: 0;
          margin-bottom: .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(https://res1-nte.iwplay.com.tw/cover/images/cover260603/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: .8rem !important;
          left: 13.07rem !important;
          /* 改：對齊 swiper 中心（swiper 中心 = 17.065rem，扣除 width/2 = 4rem） */
          width: 8rem !important;
          /* 改：指定寬度 */
          display: flex !important;
          align-items: center;
          gap: .12rem;
          line-height: 0;
          font-size: 0;
        }

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

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

        /* === 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: .5rem;
        }

        /* slide1 = 安魂曲 */
        .box2Slide.slide1 .charNameRow {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/role-name-an.png);
        }

        /* slide2 = 卡厄斯 */
        .box2Slide.slide2 .charNameRow {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/role-name-chaos.png);
        }

        /* tag 容器：縱向堆疊 */
        .box2CharInfo .charTags {
          display: flex;
          flex-direction: column;
          gap: .14rem;
          margin-bottom: .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（安魂曲）3 個 tag */
        .box2Slide.slide1 .charTags .tag:nth-child(1) {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box2Slide1_tag1.webp);
        }

        .box2Slide.slide1 .charTags .tag:nth-child(2) {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box2Slide1_tag2.webp);
        }

        .box2Slide.slide1 .charTags .tag:nth-child(3) {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box2Slide1_tag3.webp);
        }

        /* slide2（卡厄斯）2 個 tag */
        .box2Slide.slide2 .charTags .tag:nth-child(1) {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/box2Slide2_tag1.webp);
        }

        .box2Slide.slide2 .charTags .tag:nth-child(2) {
          background-image: url(https://res1-nte.iwplay.com.tw/cover/images/cover260603/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(https://res1-nte.iwplay.com.tw/cover/images/cover260603/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 .3s 0s forwards;
        }

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

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

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

        .box2Slide.play .charMoreBtn {
          animation: box2SlideUpFade .3s .4s forwards;
        }

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

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

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

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

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

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

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

          70% {
            transform: scale(1.1);
          }

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

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

          100% {
            opacity: 1;
          }
        }