/* 主体 */
.wrapSwiper {
  height: 100%;
}

/* 首页 */
.pageIndex {
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/pageIndex.jpg)
    no-repeat center center;
  background-size: cover;
}
.page_video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.indexVideoBtn {
  bottom: 5.37rem;
  width: 1.21rem;
  height: 1.23rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/indexVideoBtn.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.indexVideoBtn:hover {
  background-position: 0 100%;
}
.indexBtns {
  bottom: 2.71rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.indexBtns a,
.indexBtns button {
  transition: transform 0.3s;
}
.indexBtns a:hover,
.indexBtns button:hover {
  transform: translateY(0.04rem);
}
.indexFoot {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2.2rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageIndex/indexFoot.png)
    no-repeat center top;
  background-size: 25.6rem 2.2rem;
}
.index_otherPlatform {
  top: 1.38rem;
  left: 1.79rem;
}
.indexFootNte {
  top: 1.49rem;
  left: 0.49rem;
  height: 0.43rem;
}
.indexFootWelcome {
  top: 1.49rem;
  right: 0.43rem;
  height: 0.43rem;
}

/* 角色介绍 */
.factionsNav {
  top: 3.05rem;
  left: 0rem;
  width: 3.44rem;
  height: 9.12rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageRole/factions.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.factionsNav button {
  position: absolute;
  z-index: 2;
}
.factionsNav button:hover,
.factionsNav button.active {
  background-position: 0 100%;
}
.factionsWrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: none;
}
.roleNav {
  top: 9.75rem;
  right: 50%;
  margin-right: 1.87rem;
  width: 6.2rem;
}
.roleNav .swiper-wrapper {
  align-items: center;
}
.roleNav .swiper-slide {
  width: 1.91rem;
  height: 0.86rem;
  margin: 0 0.08rem;
  border: 0.02rem solid #696969;
  cursor: pointer;
}
.roleNav p {
  width: 100%;
  height: 100%;
}
.factions1_nav1 p {
  background: url(https://res1-nte.iwplay.com.tw/images/pageRole/factions1/factions1_nav1.jpg)
    no-repeat 0 0;
  background-size: 100% auto;
}
.factions1_nav2 p {
  background: url(https://res1-nte.iwplay.com.tw/images/pageRole/factions1/factions1_nav2.jpg)
    no-repeat 0 0;
  background-size: 100% auto;
}
.factions1_nav3 p {
  background: url(https://res1-nte.iwplay.com.tw/images/pageRole/factions1/factions1_nav3.jpg)
    no-repeat 0 0;
  background-size: 100% auto;
}
.factions1_nav4 p {
  background: url(https://res1-nte.iwplay.com.tw/images/pageRole/factions1/factions1_nav4.jpg)
    no-repeat 0 0;
  background-size: 100% auto;
}
.factions2_nav1 p {
  background: url(https://res1-nte.iwplay.com.tw/images/pageRole/factions2/factions2_nav1.jpg)
    no-repeat 0 0;
  background-size: 100% auto;
}
.factions2_nav2 p {
  background: url(https://res1-nte.iwplay.com.tw/images/pageRole/factions2/factions2_nav2.jpg)
    no-repeat 0 0;
  background-size: 100% auto;
}
.factions2_nav3 p {
  background: url(https://res1-nte.iwplay.com.tw/images/pageRole/factions2/factions2_nav3.jpg)
    no-repeat 0 0;
  background-size: 100% auto;
}
.factions2_nav4 p {
  background: url(https://res1-nte.iwplay.com.tw/images/pageRole/factions2/factions2_nav4.jpg)
    no-repeat 0 0;
  background-size: 100% auto;
}
.roleNav .swiper-slide-active {
  padding: 0.02rem;
  border-color: #b3b3b3;
}
.roleNav .swiper-slide-active p {
  background-position: 0 100%;
}
.factionsPrev,
.factionsNext {
  top: 50%;
  transform: translate(0, -50%);
  width: 0.54rem;
  height: 0.52rem;
}
.factionsPrev {
  left: -0.66rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageRole/factionsPrev.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.factionsNext {
  right: -0.66rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageRole/factionsNext.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.factionsPrev:hover,
.factionsNext:hover {
  background-position: 0 100%;
}
.roleSwiper {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.roleBg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.roleVideoBtn {
  top: 5.51rem;
  left: 50%;
  margin-left: -2.49rem;
  width: 0.75rem;
  height: 0.75rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageRole/roleVideoBtn.png)
    no-repeat 0 0;
  background-size: 100% auto;
  display: none;
}
.roleVideoBtn:hover {
  background-position: 0 100%;
}
.role_des {
  top: 3.4rem;
  left: 50%;
  margin-left: -7.7rem;
  width: 8.55rem;
}
.role_text {
  top: 7.65rem;
  left: 50%;
  margin-left: -7.6rem;
  box-sizing: border-box;
  padding-right: 0.06rem;
  width: 5.5rem;
  height: 1.5rem;
  line-height: 0.3rem;
  font-size: 0.2rem;
  color: #afafaf;
  overflow: hidden;
}
.role_text::-webkit-scrollbar {
  width: 0.06rem;
  background: #616161;
  border-radius: 0.03rem;
}

.role_text::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 0.03rem;
}

.role_text:hover {
  padding-right: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.roleInfoMore {
  top: 10.92rem;
  left: 50%;
  margin-left: -7.97rem;
}
.roleInfoMore:hover {
  background-position: 0 100%;
}

/* 情报速递 */
.newsSwiper {
  top: 3.1rem;
  right: 50%;
  margin-right: -0.95rem;
  width: 11.8rem;
  height: 6.53rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageNews/newsSwiper.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.newsSwiper .carousel-inner {
  top: 0.77rem;
  left: 1.01rem;
  width: 9.84rem;
  height: 4.98rem;
}
.newsSwiper .carousel-inner img {
  width: 100%;
  height: 100%;
}
.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: -1.5rem;
  left: 0;
  z-index: 15;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}
.carousel-indicators li {
  opacity: 1;
  width: 0.2rem;
  height: 0.2rem;
  box-sizing: border-box;
  border-radius: 0.2rem;
  background: #616161;
  border: 0.01rem solid #000;
  margin: 0 0.19rem !important;
}
.carousel-indicators li.active {
  background: #fe5a95;
}
.newsSwiperTit {
  top: 6.6rem;
  right: 1.8rem;
  width: 9rem;
}

.news_info .newsdetails-badge p {
  height: 0.37rem;
  line-height: 0.37rem;
  text-align: center;
  transform: skew(-15deg);
  border-radius: 0.05rem;
}
.news_info .newsdetails-actbadge {
  background-color: #fe5a95;
  color: #e8e8e8;
}
.news_info .newsdetails-newsbadge {
  background-color: #6ddced;
  color: #313131;
}

.news_info .newsdetails-sysbadge {
  background-color: #b1b1b1;
  color: #313131;
}

.newsSwiper .pagination {
  bottom: -0.5rem;
  left: auto;
  right: 0.8rem;
  width: 11.16rem;
  text-align: center;
}
.newsSwiper .swiper-pagination-bullet {
  opacity: 1;
  width: 0.2rem;
  height: 0.2rem;
  box-sizing: border-box;
  border-radius: 0.2rem;
  background: #616161;
  border: 0.01rem solid #000;
  margin: 0 0.19rem !important;
}
.newsSwiper .swiper-pagination-bullet-active {
  background: #fe5a95;
}
.newsList {
  top: 4rem;
  left: 50%;
  margin-left: 1.15rem;
}
.newsHead {
  width: 9.27rem;
  height: 1.94rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageNews/newsHead.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.newsNav {
  top: 1.26rem;
  left: 0.63rem;
  display: flex;
}
.newsNav .news_nav_tab {
  margin-right: -0.12rem;
  width: 1.97rem;
  height: 0.62rem;
}
.newsNav .news_nav_tab div {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.newsNav .news_nav_tab:hover,
.newsNav .active {
  background: #1d1d1d;
  transform: skew(-15deg);
  border-radius: 0.1rem;
}
.newsNav .news_nav_tab div:hover,
.newsNav .active div {
  background-position: 0 100%;
  transform: skew(15deg);
}
.newsMore {
  top: 1.44rem;
  right: 0.52rem;
  display: flex;
}
.newsMore a {
  width: 0.35rem;
  height: 0.35rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageNews/newsMore.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.newsMore a:hover {
  background-position: 0 100%;
}
.newsCont {
  top: 2.2rem;
  left: 0;
  width: 9.27rem;
}

.news_info .news_right_box .news_r_con_box {
  display: none;
}
.news_info .news_right_box .news_r_con_box.active {
  display: block;
}

/*-------一環_新---------*/
.system-single {
  display: flex;
  font-size: 0.29rem;
  width: 97%;
  height: auto;
  z-index: 5;
  transition: 0.3s;
  filter: brightness(0.9);
  transition: 0.5s ease-in-out;
  padding: 0.25rem 0px;
  border-bottom: 0.03rem solid #313131;
}
.system-single:hover {
  filter: brightness(1.05);
  transition: 0.5s ease-in-out;
}
.intelSlides {
  display: none;
}
.intelSwiperInfo {
  width: 100%;
}
.news_con_big_main .systemurl.intelSlideTit {
  width: 6.2rem;
  height: auto;
  margin-left: 0.25rem;
  padding-bottom: 0%;
  cursor: pointer;
  color: #dfdfdf;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.system-single:hover .systemurl.intelSlideTit {
  color: #f3e33d;
}
.news_con_big_main .systemurl.intelSlideDes {
  display: none !important;
}
.intelDate {
  width: 2rem;
  height: auto;
  right: -0.5rem;
  z-index: 3;
  color: #dfdfdf;
}

/* .pageNews::after{ content: ""; position: absolute; bottom: .25rem; right: .19rem; width: 24.47rem; height: 1.55rem; background: url(https://nte.perfectworld.com/public/images/main250513/pageNews/newsFootBg.png) no-repeat 0 0; background-size: 100% auto;} */

/* 世界全景 */
.guidepost {
  top: 6.49rem;
  right: 48%;
  margin-right: 7.29rem;
  width: 1.97rem;
  height: 7.08rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageView/guidepost.png)
    no-repeat 0 0;
  background-size: 100% auto;
  z-index: 2;
}
.guidepostNum {
  top: 0.27rem;
  width: 0.83rem;
  height: 0.66rem;
}
.guidepostNum[activeNum="1"] {
  background: url(https://res1-nte.iwplay.com.tw/images/pageView/01.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.guidepostNum[activeNum="2"] {
  background: url(https://res1-nte.iwplay.com.tw/images/pageView/02.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.guidepostNum[activeNum="3"] {
  background: url(https://res1-nte.iwplay.com.tw/images/pageView/03.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.guidepostNum[activeNum="4"] {
  background: url(https://res1-nte.iwplay.com.tw/images/pageView/04.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.plateNav {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.plateNav button {
  height: 0.64rem;
}
.plateNav button.active {
  background-position: 0 100%;
}
.plateNav button.active::after {
  content: "";
  position: absolute;
  top: -0.25rem;
  right: -0.49rem;
  width: 0.77rem;
  height: 0.54rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageView/plateActive.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.plateChangeBtns {
  top: -0.85rem;
  width: 3.76rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  display: none;
}
.plateChangeBtns button {
  width: 1.8rem;
  height: 0.48rem;
}
.plateLeft {
  background: url(https://res1-nte.iwplay.com.tw/images/pageView/plateLeft.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.plateRight {
  background: url(https://res1-nte.iwplay.com.tw/images/pageView/plateRight.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.plateChangeBtns button:hover {
  background-position: 0 100%;
}
.plateinfo {
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 7.7rem;
  width: 4.4rem;
  z-index: 1;
}
.plateinfo .cont {
  display: none;
}
.plateTit {
  height: 1.02rem;
  margin-bottom: 0.15rem;
}
.plateDes {
  padding-right: 0.1rem;
  height: 1.5rem;
  line-height: 0.3rem;
  font-size: 0.22rem;
  color: #7b7b7b;
  overflow-x: hidden;
  overflow-y: auto;
  word-break: break-word;
}
.plateDes::-webkit-scrollbar {
  width: 0.1rem;
  background: #333335;
  box-sizing: border-box;
  border-radius: 0.05rem;
  border: 0.01rem solid #09090b;
}
.plateDes::-webkit-scrollbar-thumb {
  background: #cbcbcb;
  border-radius: 0.05rem;
}
.brand {
  top: 2.66rem;
  right: 48%;
  margin-right: -9.15rem;
  width: 15.7rem;
  height: 11.74rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageView/brand.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.brandSwiper {
  top: 1.05rem;
  right: 0.85rem;
  width: 13.79rem;
  height: 6.37rem;
  display: none;
}
.brandSwiper .swiper {
  height: 100%;
}
.brandSwiper .swiper img {
  width: 100%;
  height: 100%;
}
.brandPagination {
  bottom: -0.6rem !important;
  text-align: center;
}
.brandPagination .swiper-pagination-bullet {
  opacity: 1;
  width: 0.2rem;
  height: 0.2rem;
  box-sizing: border-box;
  border-radius: 0.2rem;
  background: #616161;
  border: 0.01rem solid #000;
  margin: 0 0.19rem !important;
}
.brandPagination .swiper-pagination-bullet-active {
  background: #4fe5fb;
}
.brandPrev,
.brandNext {
  bottom: -0.73rem;
  width: 1.35rem;
  height: 0.58rem;
  z-index: 2;
}
.brandPrev {
  left: 0.22rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageView/brandPrev.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.brandNext {
  right: 0.22rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageView/brandNext.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.brandPrev:hover,
.brandNext:hover {
  background-position: 0 100%;
}
.trafficSign {
  top: 2.58rem;
  left: 48%;
  margin-left: 7.43rem;
  width: 3.49rem;
  height: 11.86rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageView/trafficSign.png)
    no-repeat 0 0;
  background-size: 100% auto;
  z-index: 1;
}
.trafficLight {
  top: 2.5rem;
  left: 2.57rem;
  width: 0.82rem;
  height: 0.82rem;
  background: #616161;
  border: 0.03rem solid #161616;
  border-radius: 0.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.trafficLight .light {
  width: 0.66rem;
  height: 0.66rem;
  border: 0.03rem solid #161616;
  border-radius: 0.1rem;
}
.trafficLight .light[status="red"] {
  background: #fd5997;
}
.trafficLight .light[status="green"] {
  background: #4fe5fb;
}
.trafficLight .light p {
  height: 100%;
  animation: run 0.5s steps(2) infinite alternate;
}
.trafficLight .light[status="red"] p {
  background: url(https://res1-nte.iwplay.com.tw/images/pageView/red.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.trafficLight .light[status="green"] p {
  background: url(https://res1-nte.iwplay.com.tw/images/pageView/green.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
@keyframes run {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 200%;
  }
}

/* 都市映像 */
.browser {
  top: 2.37rem;
  right: 50%;
  margin-right: -3.6rem;
  width: 13.23rem;
  height: 7.03rem;
  perspective: 20rem;
}
.tapeA,
.tapeB {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://res1-nte.iwplay.com.tw/images/pageCity/browser.png)
    no-repeat 0 0;
  background-size: 100% auto; /*transition: all 1s;*/
}
.tapeA {
  background-position: 0 0;
  z-index: 1;
}
.tapeB {
  background-position: 0 100%;
  transform: rotateY(180deg);
  opacity: 0;
}
.browser.b .tapeA {
  transform: rotateY(-180deg);
  opacity: 0;
}
.browser.b .tapeB {
  transform: rotateY(0deg);
  opacity: 1;
}
.spray1 {
  top: 2.48rem;
  left: 50%;
  margin-left: 3.25rem;
  height: 3.13rem;
}
.spray2 {
  top: 4.95rem;
  right: 50%;
  margin-right: 2.37rem;
  height: 4.83rem;
}
.citySwiper {
  top: 3.71rem;
  left: 50%;
  margin-left: -4.43rem;
  background: #767676;
  border: 0.02rem solid #161616;
  width: 13.94rem;
  height: 6.54rem;
}
.citySwiper .swiper-slide {
  padding: 0.07rem;
  box-sizing: border-box;
}
.citySwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
}
.citySlidePrev,
.citySlideNext {
  top: 5.6rem;
  width: 0.71rem;
  height: 2.78rem;
  z-index: 1;
}
.citySlidePrev {
  right: 50%;
  margin-right: 4.57rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageCity/citySlidePrev.png)
    no-repeat 0 0;
  background-size: 200% auto;
}
.citySlideNext {
  left: 50%;
  margin-left: 9.72rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageCity/citySlideNext.png)
    no-repeat 0 0;
  background-size: 200% auto;
}
.citySlidePrev:hover,
.citySlideNext:hover {
  background-position: 100% 0;
}
.citySlidePage {
  top: 9.84rem;
  left: 50%;
  margin-left: -9.83rem;
  width: 2.93rem;
  height: 0.84rem;
}
.citySlidePage[page="1"] {
  background: url(https://res1-nte.iwplay.com.tw/images/pageCity/citySlideNum1.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.citySlidePage[page="2"] {
  background: url(https://res1-nte.iwplay.com.tw/images/pageCity/citySlideNum2.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.citySlidePage[page="3"] {
  background: url(https://res1-nte.iwplay.com.tw/images/pageCity/citySlideNum3.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.citySlidePage[page="4"] {
  background: url(https://res1-nte.iwplay.com.tw/images/pageCity/citySlideNum4.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.citySlidePage[page="5"] {
  background: url(https://res1-nte.iwplay.com.tw/images/pageCity/citySlideNum5.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.citySlidePage[page="6"] {
  background: url(https://res1-nte.iwplay.com.tw/images/pageCity/citySlideNum6.png)
    no-repeat 0 0;
  background-size: 100% auto;
}
.citySlideTit {
  top: 10.59rem;
  left: 50%;
  margin-left: -4.11rem;
}
.pageCity .cityPagination {
  top: 11.96rem;
  left: 50%;
  margin-left: -4.43rem;
  width: 13.94rem;
  text-align: center;
}
.cityPagination .swiper-pagination-bullet {
  width: 0.2rem;
  height: 0.2rem;
  background: #616161;
  opacity: 1;
  border: 0.01rem solid #000;
  margin: 0 0.19rem !important;
}
.cityPagination .swiper-pagination-bullet-active {
  background: #fff;
}

/* 彩蛋页 */
.pageEggshell {
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background: rgba(25, 25, 25, 0.95);
  z-index: 3;
  overflow: hidden;
}
.pageEggshellYY {
  top: 4.24rem;
}
.pageEggshellYY:hover {
  background-position: 0 50%;
}
.pageEggshellYY.active {
  background-position: 0 100%;
}
.egg_otherPlatform {
  top: 5.95rem;
}
.egg_otherPlatform::before,
.egg_otherPlatform::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  height: 0.03rem;
  background: #7d7d7d;
  width: 100vh;
}
.egg_otherPlatform::before {
  right: 105%;
}
.egg_otherPlatform::after {
  left: 105%;
}
.eggSlogan {
  top: 6.84rem;
  height: 0.37rem;
}
.eggBottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.81rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageEggshell/eggBottom.png)
    repeat-x left top;
  background-size: 4.85rem 3.8rem;
  animation: eggBottoomBg 20s infinite linear;
}
@keyframes eggBottoomBg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -48.5rem 0;
  }
}
.eggPet {
  bottom: 0;
  height: 5.33rem;
}
.eggBottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.24rem;
  background: url(https://res1-nte.iwplay.com.tw/images/pageEggshell/warningStrip.png)
    repeat-x left center;
  background-size: 1.29rem 0.24rem;
}

/* 通掉底 */
.footer {
  display: none;
}