@charset "UTF-8";
*:focus {
  outline: none;
}

* {
  -webkit-tap-highlight-color: transparent;
}

@font-face {
  font-family: FusionPixel;
  src: url("../fonts/fusion-pixel-12px-monospaced-zh_hans.ttf");
  font-weight: normal;
  font-style: normal;
}

body, h1, h2, p {
  font-family: "FusionPixel", sans-serif !important;
}

img {
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-optimize-contrast;
  image-rendering: -ms-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

[v-cloak] {
  display: none;
}

.bgColor {
  background: #fff;
  overflow-x: hidden;
}

.head-content {
  position: relative;
}

.lang-switch {
  position: absolute;
  right: 0;
  top: 20px;
  z-index: 100;
  display: inline-flex;
  border: 1px solid #58504E;
  border-radius: 20px;
  overflow: hidden;
  background-color: #dddddd;
}

.lang-switch-fixed {
  display: inline-flex;
  border: 1px solid #58504E;
  border-radius: 20px;
  overflow: hidden;
  background-color: #dddddd;
  margin-left: auto;
}

.lang-btn {
  padding: 4px 8px;
  border: none;
  cursor: pointer;
  font-size: 24px;
  font-family: "FusionPixel", sans-serif !important;
  color: #4A413D;
  font-weight: normal;
  background-color: #dddddd;
}

.lang-btn.active {
  background-color: #999;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.taoyuan-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.nav {
  width: 100%;
  max-width: 100%;
  height: 119px;
  background: url(../images/fixedHeadBg.png) no-repeat top;
  background-size: 100% 100%;
  margin: 0 auto;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}

.nav.active {
  opacity: 1;
  animation: scroll_header .3s;
  -webkit-animation: scroll_header .3s;
  -moz-animation: scroll_header .3s;
  -o-animation: scroll_header .3s;
}

@-webkit-keyframes scroll_header {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-o-keyframes scroll_header {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes scroll_header {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scroll_header {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.language {
  height: 119px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.languageInfo {
  width: 68px;
  height: 68px;
}

.languageInfo.ft {
  background: url(../images/f.png) no-repeat center center;
  background-size: 68px 68px;
}

.languageInfo.ft:hover {
  background: url(../images/f_hover.png) no-repeat center center;
  transition: .3s all;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-optimize-contrast;
  image-rendering: -ms-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

.languageInfo.jt {
  background: url(../images/j.png) no-repeat center center;
  background-size: 68px 68px;
}

.languageInfo.jt:hover {
  background: url(../images/j_hover.png) no-repeat center center;
  transition: .3s all;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-optimize-contrast;
  image-rendering: -ms-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

.navList,
.navBtn {
  height: 119px;
  display: flex;
  align-items: center;
}

.navList {
  margin: 0 20px 0 56px;
}

.navBtn a {
  width: 188px;
  height: 68px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-optimize-contrast;
  image-rendering: -ms-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

.navBtn a.jt {
  background: url(../images/buy_btn.png) no-repeat center center;
}

.navBtn a.ft {
  background: url(../images/fontImg/buy_btn_f.png) no-repeat center center;
}

.navBtn a.jt:hover {
  background: url(../images/buy_btn_hover.png) no-repeat center center;
  transition: .3s all;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-optimize-contrast;
  image-rendering: -ms-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

.navBtn a.ft:hover {
  background: url(../images/fontImg/buy_btn_f_hover.png) no-repeat center center;
  transition: .3s all;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-optimize-contrast;
  image-rendering: -ms-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

.navList .homePage {
  margin-left: 0;
}

.navList .homePage a {
  /* color: #FF6623; */
  padding-left: 0;
}

.navList .homePage a::after {
  display: none;
}

.navList li {
  float: left;
  margin: 0 20px;
  position: relative;
}

.navList li:not(:last-child):after {
  content: "·";
  position: absolute;
  right: -28px;
  color: #4E4741;
  font-size: 24px;
  line-height: 1;
  top: 0px;
}

.navList li a {
  display: block;
  color: #e8e8e8;
  font-size: 24px;
  position: relative;
  box-sizing: border-box;
}

.navList li.active a {
  color: #f3e9db;
}

.navList li a:hover {
  color: #f3e9db;
  transition: .3s all;
}

.main1200 {
  width: 1200px;
  margin: 0 auto;
  height: auto;
}

.movie-wrapper {
  position: relative;
  width: 100%;
  height: 1067px;
  overflow: hidden;
}

.relative-main {
  position: relative;
}

.title-ele {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -89px;
  z-index: 20;
}

.news_con {
  padding: 160px 0 0;
  box-sizing: border-box;
}

.list_news .swiper-wrapper {
  margin-bottom: 40px;
  justify-content: flex-start !important;
}

.custom-swiper {
  width: 1200px;
  height: 32px;
  background: url(../images/slide-line.png) no-repeat;
  padding: 0 24px;
  box-sizing: border-box;
}

.list_news .swiper-scrollbar {
  height: 32px;
}

.news_con .swiper-container-horizontal > .swiper-scrollbar {
  height: 32px;
  left: 0 !important;
}

.news_con .swiper-scrollbar-drag {
  height: 32px;
  border-radius: 0;
  position: relative;
  background: url(../images/line-middle.jpg) center repeat-x;
  top: -4px;
}

.news_con .swiper-scrollbar-drag::before {
  content: '';
  display: block;
  width: 20px;
  height: 32px;
  background: url(../images/line-left.png) left center no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}

.news_con .swiper-scrollbar-drag::after {
  content: '';
  display: block;
  width: 20px;
  height: 32px;
  background: url(../images/line-right.png) left center no-repeat;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
}

.newsBg {
  width: 387px;
  height: 270px;
  background: url(../images/newsBg.png) no-repeat center center;
  cursor: pointer;
}

.news_content {
  padding: 23px;
}

.news_content .newImg {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news_content .newImg img {
  width: 318px;
  height: 179px;
}

.news_content .news_info {
  width: 318px;
  margin: 8px auto 0;
}

.news_content .news_info .news_des {
  line-height: 25px;
  font-size: 18px;
  color: #4A413D;
  display: flex;
  justify-content: center;
  word-wrap: break-word;
  word-break: break-all;
}

.news_content .news_info .newsDesEn {
  line-height: 22px;
}

#background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* 叠加元素样式 */
.overlay-elements {
  position: relative;
  z-index: 10;
  /* 确保在视频上方 */
  width: 100%;
}

.model-main {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo样式 */
.site-logo {
  width: 681px;
  height: auto;
  margin: 167px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-logo img {
  max-width: 100%;
  height: auto;
}

/* 导航菜单样式 */
.main-nav {
  margin: 50px auto;
}

.main-nav ul {
  display: flex;
  list-style: none;
}

.main-nav ul li {
  margin: 0 20px;
  position: relative;
}

/* 为除最后一个li外的所有li添加after伪元素 */
.main-nav li:not(:last-child):after {
  content: "·";
  position: absolute;
  right: -28px;
  color: #4E4741;
  font-size: 24px;
  line-height: 1;
  top: 0px;
}

.main-nav a {
  color: #576863;
  text-decoration: none;
  font-size: 24px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.main-nav a:hover {
  color: #323433;
  transform: translateY(-2px);
}

/* 播放按钮样式 */
.play-button {
  position: absolute;
  top: 500px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 74px;
  background: url(../images/playIco.png) no-repeat;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.5s ease;
}

.play-button:hover {
  opacity: 1;
}

.play-icon {
  color: white;
  font-size: 40px;
  margin-left: 5px;
}

#news .swiper-container {
  padding-left: 0 !important;
  /* 移除可能的左内边距 */
  margin-left: 0 !important;
  /* 移除可能的左外边距 */
}

#news .swiper-slide {
  width: auto;
  /* 或根据需要设置固定宽度，但确保3项能在一屏内显示 */
}

.news-model {
  width: 100%;
  height: 628px;
  background: url(../images/model2.jpg) no-repeat top center;
  background-size: 100%;
  background-size: cover;
}

.news-model3 {
  width: 100%;
  height: 907px;
  background: url(../images/model3.jpg) no-repeat top center;
  background-size: 100%;
  background-size: cover;
}

.game-introduction {
  padding: 150px 0 0;
  box-sizing: border-box;
}

.news-model4 {
  width: 100%;
  height: 738px;
  background: url(../images/model4.jpg) no-repeat top center;
  background-size: 100%;
  background-size: cover;
}

.news-model5 {
  width: 100%;
  height: 725px;
  background: url(../images/model5.jpg) no-repeat top center;
  background-size: 100%;
  background-size: cover;
}

.news-model6 {
  width: 100%;
  height: 679px;
  background: url(../images/model6.jpg) no-repeat top center;
  background-size: 100%;
  background-size: cover;
}

.dividing-line {
  width: 100%;
}

.dividing-line img {
  display: block;
  max-width: 100%;
  background-size: cover;
  width: 100%;
}

.product-information {
  padding: 160px 0 0;
  box-sizing: border-box;
}

.product-tabs {
  position: relative;
}

.tabs-label {
  width: 88px;
  height: 153px;
  background: url(../images/tabTit.png) no-repeat;
  position: absolute;
  top: -55px;
  z-index: 200;
  display: flex;
  justify-content: center;
  font-weight: 400;
  font-size: 32px;
  color: #FFF7ED;
  padding: 28px 0px 0;
  box-sizing: border-box;
  cursor: pointer;
}

.label1 {
  left: 137px;
}

.label2 {
  left: 245px;
}

.tabs-content {
  width: 1200px;
  height: 490px;
  background: url(../images/scrollBg.png) no-repeat;
  background-size: 100%;
  display: flex;
  flex-direction: row;
  padding: 49px 127px 43px;
  box-sizing: border-box;
  position: relative;
  z-index: 300;
}

.left-column {
  flex: 1;
  padding-right: 20px;
  padding-top: 35px;
  border-right: 6px solid #877A66;
}

.right-column {
  flex: 2;
  padding: 20px 0 0;
  box-sizing: border-box;
}

.right-column h2 {
  font-size: 26px;
  color: #FFF7ED;
  border-bottom: 1px solid #877A66;
  padding: 0 0 10px 20px;
  box-sizing: border-box;
}

.product-logo {
  margin-bottom: 20px;
}

.product-logo img {
  display: block;
  height: 67px;
}

.release-date {
  font-size: 30px;
  color: #fff;
  margin-bottom: 30px;
}

.steam-btn {
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 293px;
  height: 97px;
  background: url(../images/buttonBg.png) no-repeat;
  background-size: 100%;
  transition: all 0.5s ease;
  font-family: "FusionPixel", sans-serif !important;
}

.steam-btn:hover {
  background: url(../images/buttonBg-hover.png) no-repeat;
  background-size: 100%;
}

.steam-btn img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

h2 {
  font-size: 28px;
  color: #fff;
  margin-top: 0;
}

.specs-list {
  list-style: none;
  padding: 25px 20px;
  box-sizing: border-box;
}

.specs-list li {
  margin-bottom: 15px;
  font-size: 22px;
  color: #323433;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #877A66;
  padding: 0 0 8px 0;
}

.specs-list li:last-child {
  border: none !important;
}

.specs-list li span {
  width: 160px;
  margin-right: 30px;
  text-align: right;
}

.about-us-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 670px;
}

.about-us-content ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.about-us-content ul li {
  margin: 0 40px;
  width: 258px;
  height: 241px;
}

.about-us-content ul li a {
  display: block;
  width: 258px;
  height: 241px;
  background: url(../images/codeBg.png) no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-us-content ul li a img {
  display: block;
  width: 173px;
  height: 173px;
}

.about-us-content ul li p {
  margin-top: 10px;
  text-align: center;
  font-size: 30px;
  color: #FFF7ED;
}

/* 轮播图 ============== */
.game-video-img-list {
  padding: 120px 0 0;
  box-sizing: border-box;
  position: relative;
}

.swiper-button-next,
.swiper-button-prev {
  width: 46px;
  height: auto;
  margin-top: unset;
  transform: translateY(-50%);
}

.gamePic-next-btn.swiper-button-disabled,
.gamePic-prev-btn.swiper-button-disabled {
  opacity: 1;
}

#gamePic {
  height: 460px;
}

#gamePic .swiper-slide {
  height: 239px;
}

.gamePic .gamePic_item {
  cursor: pointer;
  position: relative;
  margin-bottom: 20px;
  width: 380px;
  height: 214px;
  transition: all 0.5s ease;
}

.gamePic .gamePic_item img {
  display: block;
  width: 380px;
  height: 214px;
  opacity: 0.8;
  transition: all 0.5s ease;
}

.gamePic .gamePic_item:hover img {
  opacity: 1;
}

.gamePic .gamePic_item .newImg_hover {
  width: 380px;
  height: 214px;
  background: url(../images/picBorderS.png) no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}

.imgLiActive .newImg_hover {
  opacity: 1;
}

.gamePic .gamePic_item .video-play-icon {
  width: 74px;
  height: 74px;
  background: url(../images/playIco.png) no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 110;
  transition: all 0.5s;
}

.gamePic .gamePic_item:hover .video-play-icon {
  background: url(../images/playIco-hover.png) no-repeat;
}

@keyframes gamePic_item {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.btn_left {
  width: 49px;
  height: 68px;
  background: url(../images/arrow-left.png) no-repeat center;
  position: absolute;
  left: -60px;
  top: 59%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  cursor: pointer;
  transition: all 0.5s;
}

.btn_left:hover {
  background: url(../images/arrow-left-hover.png) no-repeat center;
}

.btn_right {
  width: 49px;
  height: 68px;
  background: url(../images/arrow-right.png) no-repeat center;
  position: absolute;
  right: -55px;
  top: 59%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  cursor: pointer;
  transition: all 0.5s;
}

.btn_right:hover {
  background: url(../images/arrow-right-hover.png) no-repeat center;
}

/*点击看大图*/
.showmsg {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 50%;
  width: 1920px;
  height: 100%;
  background: transparent no-repeat 50% 50%;
  padding: 0;
  margin: 0 auto;
  margin-left: -960px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoom img {
  display: block;
  max-width: 1517px;
  background: transparent;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 10px solid #3B3632;
  cursor: pointer;
}

.zoom .showVideo {
  width: 100%;
  height: 100%;
}

.zoom .video-play-icon {
  width: 74px;
  height: 74px;
  background: url(../images/playIco.png) no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 888;
  transition: all 0.5s;
  cursor: pointer;
}

.zoom .video-play-icon:hover {
  background: url(../images/playIco-hover.png) no-repeat;
}

.zoomed {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

.zoom {
  z-index: 99990;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

.zoom .content {
  z-index: 99991;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background: transparent no-repeat 50% 50%;
  padding: 0;
  margin: -100px 0 0 -100px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.zoom .content.loading {
  background-image: url("../images/loading.gif");
}

.zoom .close {
  z-index: 99993;
  position: absolute;
  top: 50px;
  right: 50px;
  width: 49px;
  height: 49px;
  cursor: pointer;
  background: transparent url("../images/close.png") no-repeat 50% 50%;
  opacity: 1;
  filter: alpha(opacity=100);
  border-radius: 0 0 0 4px;
  transition: all 0.5s;
}

.zoomIcons {
  z-index: 99999;
  position: fixed;
  top: 50%;
  left: 50px;
  display: none;
  width: 95%;
  height: 49px;
}

.zoomIcons .previous,
.zoomIcons .next {
  z-index: 99992;
  position: absolute;
  top: 50%;
  overflow: hidden;
  display: block;
  width: 49px;
  height: 49px;
  margin-top: -25px;
  cursor: pointer;
}

.zoomIcons .previous {
  left: 0;
  background: url("../images/Zarrows.png") no-repeat 0 0;
}

.zoomIcons .next {
  right: 0;
  background: url("../images/Zarrows.png") no-repeat 100% 0;
}

.zoom .close:hover {
  background: transparent url("../images/close-hover.png") no-repeat 50% 50%;
}

.zoomIcons .previous:hover {
  left: 0;
  background: url("../images/Zarrows-hover.png") no-repeat 0 0;
}

.zoomIcons .next:hover {
  right: 0;
  background: url("../images/Zarrows-hover.png") no-repeat 100% 0;
}

.footer-content {
  width: 100%;
  background: #0F0E0D;
}

.footer {
  padding: 25px 0;
  box-sizing: border-box;
}

.footer .footerLogo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.footer .footerLogo a img.softstar {
  display: block;
  width: 56px;
}

.footer .footerLogo a img.FKlogo {
  display: block;
  width: 127px;
}

.footer .footerLogo a img.WXlogo {
  display: block;
  width: 114px;
}

.footer .footerLogo img {
  margin: 0 25px;
}

.footer .explain p {
  color: #FFFFFF;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
}

.footer .explain p .ICP {
  color: #FFFFFF;
}

/* 弹窗样式 */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.video-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 1500px;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.video-modal.active .modal-content {
  transform: scale(1);
}

.close-modal {
  z-index: 99993;
  position: absolute;
  top: 50px;
  right: -120px;
  width: 49px;
  height: 49px;
  cursor: pointer;
  background: transparent url("../images/close.png") no-repeat 50% 50%;
  opacity: 1;
  filter: alpha(opacity=100);
  border-radius: 0 0 0 4px;
  transition: all 0.5s;
}

.close-modal:hover {
  background: transparent url("../images/close-hover.png") no-repeat 50% 50%;
}

#modal-video {
  width: 100%;
  height: auto;
  border: none;
  border: 10px solid #3B3632;
}