.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 {
          -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(../../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(../../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(../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(../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(../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(../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(../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(../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 {
          margin-left: .23rem;
          width: .69rem;
          height: .69rem;
          background: url(https://res1-nte.iwplay.com.tw/events/invite/images/share.png) no-repeat 0 0;
          background-size: 100% auto;
        }

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

        /* 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 {
          margin-left: .23rem;
          width: 2.17rem;
          height: .68rem;
          background: url(https://res1-nte.iwplay.com.tw/events/invite/images/website.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .wrap {
          position: relative;
        }

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

        .video_mask_top {
          width: 25.6rem;
          height: 15.64rem;
          background: url(../images/cover251223/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: 11rem;
          height: 3.4rem;
          position: absolute;
          bottom: 6rem;
          left: 50%;
          transform: translate(-50%, 0) scale(.9);
          background: url(../../images/cover251223/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: 4rem;
          left: 50%;
          transform: translateX(-50%);
          z-index: 3;
          display: flex;
          justify-content: center;
          align-items: center
        }

        .indexYYBtn {
          margin-right: .24rem;
          width: 4.68rem;
          height: 1.78rem;
          background: url(../../images/cover251223/indexYYBtn.png) no-repeat center top / 100% auto
        }

        .testRecruitBtn {
          width: 4.62rem;
          height: 1.55rem;
          background: url(../../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: 4rem;
          width: 2.85rem;
          height: 2.78rem;
          background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/sideInvite.png) no-repeat 0 0 / 100% auto;
          z-index: 1;
        }

        /* 预约里程碑 */
        .box2 {
          height: 14.42rem;
          background: url(../images/cover260109/box2.jpg) no-repeat center / cover;
        }

        .milestoneCont {
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          overflow: hidden;
        }

        .yyNum {
          top: 2.05rem;
          left: 50%;
          margin-left: -6.71rem;
          width: 10.21rem;
          height: 1.69rem;
          background: url(../../images/cover260109/yyNum.png) no-repeat 0 0;
          background-size: 100% auto;
          z-index: 1;
        }

        .numBox {
          display: flex;
          margin-left: 1.98rem;
          margin-top: .74rem;
        }

        .numBox span {
          min-width: .84rem;
          height: 1.3rem;
        }

        .n-0 {
          background: url(../images/cover260109/pageMilestone/n-0.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .n-1 {
          background: url(../images/cover260109/pageMilestone/n-1.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .n-2 {
          background: url(../images/cover260109/pageMilestone/n-2.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .n-3 {
          background: url(../images/cover260109/pageMilestone/n-3.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .n-4 {
          background: url(../images/cover260109/pageMilestone/n-4.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .n-5 {
          background: url(../images/cover260109/pageMilestone/n-5.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .n-6 {
          background: url(../images/cover260109/pageMilestone/n-6.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .n-7 {
          background: url(../images/cover260109/pageMilestone/n-7.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .n-8 {
          background: url(../images/cover260109/pageMilestone/n-8.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .n-9 {
          background: url(../images/cover260109/pageMilestone/n-9.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .comma {
          background: url(../images/cover260109/pageMilestone/comma.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .progressBar {
          top: 9.54rem;
          margin-left: -1.8rem;
          width: 10.87rem;
          height: .13rem;
          background: #979797;
        }

        .progressBar::before,
        .progressBar::after {
          content: "";
          position: absolute;
          top: 50%;
          height: .04rem;
          background: #4b4b4b;
          overflow: hidden;
          width: 100vh;
        }

        .progressBar::before {
          left: -100vh;
          transform: translate(-.2rem, -50%);
        }

        .progressBar::after {
          left: 100%;
          transform: translate(3.7rem, -50%);
        }

        .progressBar .curr {
          top: 0;
          left: 0;
          height: 100%;
          background: #4fe5fb;
          transition: width 1s;
          z-index: 1;
        }

        .progressBar .curr[step="0"] {
          width: .3rem;
        }

        .progressBar .curr[step="1"] {
          width: 1.1rem;
        }

        .progressBar .curr[step="2"] {
          width: 3.32rem;
        }

        .progressBar .curr[step="3"] {
          width: 5.55rem;
        }

        .progressBar .curr[step="4"] {
          width: 7.75rem;
        }

        .progressBar .curr[step="5"] {
          width: 100%;
        }

        .progressBar .curr::after {
          content: "";
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(50%, -50%);
          width: .36rem;
          height: .4rem;
          background: url(../images/cover260109/progressBarCurr.png) no-repeat 0 0 / 100% auto;
        }

        .nodeBox {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-around;
          align-items: flex-start;
        }

        .node {
          position: relative;
          width: 1.73rem;
          height: .85rem;
          margin-top: 0.4rem;
        }

        .node1 {
          background: url(../../images/cover260109/node1.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .node2 {
          background: url(../../images/cover260109/node2.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .node3 {
          background: url(../../images/cover260109/node3.png) no-repeat 0 0;
          background-size: 100% auto;
          z-index: 1;
        }

        .node4 {
          height: .88rem;
          background: url(../../images/cover260109/node4.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .node5 {
          background: url(../../images/cover260109/node5.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .node div {
          left: 50%;
        }

        .node::after {
          content: "";
          position: absolute;
          top: -0.86rem;
          left: 50%;
          margin-left: -0.97rem;
          width: 2.14rem;
          height: .33rem;
          background: url(../../images/cover260109/yyNumStatus.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .node.active::after {
          background-position-y: bottom !important;
        }

        .yyprize1 {
          top: -3.07rem;
          margin-left: -.65rem;
          width: 1.5rem;
          height: 1.97rem;
          background: url(../images/cover260109/yy_prize1.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .yyprize2 {
          top: -3.07rem;
          margin-left: -.65rem;
          width: 1.45rem;
          height: 1.97rem;
          background: url(../images/cover260109/yy_prize2.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .yyprize3 {
          top: -3.07rem;
          margin-left: -.67rem;
          width: 1.5rem;
          height: 1.97rem;
          background: url(../images/cover260109/yy_prize3.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .yyprize4 {
          top: -5.75rem;
          margin-left: -2.5rem;
          width: 5.17rem;
          height: 6.64rem;
          background: url(../images/cover260109/yy_prize4.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .yyprize4::after {
          content: "";
          position: absolute;
          top: 4rem;
          left: 1.55rem;
          width: 1.65rem;
          height: .45rem;
          background: url(../../images/cover260109/prize4_name.png) no-repeat 0 0 / 100% auto;
        }

        .yyprize5 {
          top: -3.41rem;
          margin-left: -.85rem;
          width: 1.8rem;
          height: 2.4rem;
          background: url(../images/cover260109/yy_prize5.png) no-repeat 0 0;
          background-size: 100% auto;
        }

        .node1.active div {
          animation: bgActive 0s 0.2s forwards;
        }

        .node2.active div {
          animation: bgActive 0s 0.4s forwards;
        }

        .node3.active div {
          animation: bgActive 0s 0.6s forwards;
        }

        /* .node4.active div{ animation: bgActive 0s 0.8s forwards;} */
        .node5.active div {
          animation: bgActive 0s 1.0s forwards;
        }

        @keyframes bgActive {

          0%,
          99% {
            background-position: 0 0;
          }

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

        .socialMedia {
          top: 1.69rem;
          left: 50%;
          margin-left: 3.67rem;
          width: 5.13rem;
          height: 9.95rem;
          background: url(../../images/cover260109/socialMedia.png) no-repeat 0 0 / 100% auto;
        }

        .disc {
          top: .8rem;
          left: 0;
          width: 3.77rem;
          height: 3.78rem;
          background: url(../images/cover260109/disc.png) no-repeat 0 0 / 100% auto;
          animation: rotation 6s linear infinite;
        }

        @keyframes rotation {
          to {
            transform: rotate(360deg);
          }
        }

        .discName {
          top: 3.45rem;
          left: .13rem;
          width: 3.51rem;
          height: .93rem;
          background: url(../images/cover260109/discName.png) no-repeat 0 0 / 100% auto;
        }

        .socialMedia .pic {
          top: 4rem;
          left: 0.4rem;
          width: 2.9rem;
          height: 2.9rem;
          background: url(../images/cover260109/pic.png) no-repeat 0 0 / 100% auto;
          animation: smBg 2s steps(58) infinite;
        }

        @keyframes smBg {
          0% {
            background-position: 0 0;
          }

          100% {
            background-position: 0 -168.2rem;
          }
        }

        .socialMedia::after {
          content: "";
          position: absolute;
          bottom: 1.02rem;
          left: .78rem;
          width: 2.14rem;
          height: .33rem;
          background: url(../../images/cover260109/socialMediaStatus.png) no-repeat 0 0 / 100% auto;
        }

        .socialMedia.active::after {
          background-position-y: bottom;
        }


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

        .city_title {
          width: 21.83rem;
          height: 2.47rem;
          background: url(../../images/cover251223/city_title.png) no-repeat 0 0 / 100% auto;
          position: absolute;
          top: 0;
          right: 50%;
          transform: translateX(12.8rem);
        }

        .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: 14rem;
          height: 6.6rem;
        }

        .splash1 {
          top: -.8rem;
          left: -1rem;
          width: 4.41rem;
          height: 4.99rem;
          background: url(../images/cover260109/splash1.png) no-repeat 0 0 / 100% auto;
        }

        .splash2 {
          bottom: -.7rem;
          right: -1.6rem;
          width: 3.91rem;
          height: 3.11rem;
          background: url(../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%
        }

        .citySlideTit {
          bottom: -1.34rem;
          left: 0;
          width: 100%;
          height: 1.1rem
        }

        .citySlideTit div {
          position: absolute;
          top: 0;
          left: 0;
          height: inherit;
          opacity: 0
        }

        .citySlideTit div:nth-child(1) {
          opacity: 1
        }

        .citySlideTit div img {
          position: absolute;
          top: 0;
          left: 0;
          height: inherit
        }

        .citySlidePrev,
        .citySlideNext {
          position: absolute;
          z-index: 10;
          cursor: pointer;
          width: .71rem;
          height: 2.78rem;
          margin-top: -1.65rem;
          opacity: 1
        }

        .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: -2rem;
          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 */