html, body {
	padding: 0;
	font-family: Adobe Heiti Std R, SimHei;
	min-width: 1200px;
	overflow-x: hidden;
}

p {
	margin: 0;
}

body {
	max-width: 1920px;
	min-width: 1400px;
	margin: 0 auto;
}

.top-container {
  position: relative;
	width: 100%;
}

.top-container .top-bg {
  display: block;
  width: 100%;
}

.top-container .top-title {
  position: absolute;
  left: 50%;
  bottom: 28%;
  width: 849px;
  transform: translateX(-50%);
}

.top-container .top-title img {
  display: block;
  width: 849px;
}

.top-container .top-download {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: 473px;
}

.top-container .top-download .download-border {
  width: 100%;
}

.top-container .download-icon {
  position: absolute;
  bottom: 45px;
  left: 41px;
  width: 150px;
  height: 150px;
}

.top-container .download-box {
  position: absolute;
  bottom: 45px;
  right: 47px;
}

.top-container .download-box a,
.top-container .download-box img {
  display: block;
}

.top-container .download-box a:first-child {
  margin-bottom: 8px;
}

.main-container {
  position: relative;
  margin-top: -21px;
  background: url(../images/bg_main.png) no-repeat top center / cover;
  height: 2749px;
}

.introduction-container {
  padding-top: 100px;
}

.introduction-container .title img {
	margin: 0 auto;
	display: block;
	position: relative;
}

.role-container {
	position: relative;
}

.role-border {
  position: absolute;
  top: -10px;
  left: 49.9%;
  z-index: 2;
  transform: translateX(-50%);
  width: 852px;
  height: 470px;
  background: url(../images/role_border.png) no-repeat center center / cover;
}

.role-swiper {
	margin-top: 20px;
	text-align: center;
  width: 824px;
}

.role-swiper .swiper-slide img {
  width: ;
	display: block;
	margin: 0 auto;
}

.role-arrow {
	position: absolute;
	top: 50%;
	left: 50%;
}

.role-arrow div {
	position: absolute;
	transform: translateY(-50%);
	width: 84px;
	height: 136px;
	cursor: pointer;
  z-index: 2;
}

.role-arrow .role-arrow-left {
	right: 580px;
	background: url(../images/arrow_left.png) no-repeat center / 100% 100%;
}

.role-arrow .role-arrow-right {
	left: 580px;
	background: url(../images/arrow_right.png) no-repeat center / 100% 100%;
}

.role-pagination {
	margin-top: 20px;
	text-align: center;
}

.role-pagination .swiper-pagination-bullet {
	width: 104px;
	height: 104px;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 0;
	background-color: transparent;
	margin: 0 10px !important;
  opacity: .3;
}

.role-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

.role-pagination .swiper-pagination-bullet:nth-child(1) {
	background-image: url(../images/role_icon_1.png);
}

.role-pagination .swiper-pagination-bullet:nth-child(2) {
	background-image: url(../images/role_icon_2.png);
}

.role-pagination .swiper-pagination-bullet:nth-child(3) {
	background-image: url(../images/role_icon_3.png);
}

.role-pagination .swiper-pagination-bullet:nth-child(4) {
	background-image: url(../images/role_icon_4.png);
}

.role-pagination .swiper-pagination-bullet:nth-child(5) {
	background-image: url(../images/role_icon_5.png);
}

.feature-container {
	margin-top: 128px;
}

.feature-container .title img {
	display: block;
	margin: 0 auto;
}

.feature-swiper {
	margin-top: 42px;
}

.feature-swiper .swiper-slide {
	position: relative;
	width: 530px;
	height: 911px;
}

.feature-swiper .swiper-slide img {
  position: absolute;
  top: 17px;
  left: 9px;
  width: 509px;
  height: 883px;
}

.feature-swiper .swiper-slide::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  background: url(../images/game_border.png) no-repeat top center / cover;
}

.feature-swiper .swiper-slide-active::after {
	background-color: transparent;
}

.footer-link {
  display: block;
  margin: 110px auto 0;
  width: 551px;
}

#tips-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: all .2s;
  z-index: 99;
  /* width: 702px;
  height: 369px; */
  width: 500px;
  height: 240px;
  background: url(../images/tips_border.png) no-repeat center / 100% 100%;
}

#tips-dialog.active {
  opacity: 1;
  transform: translate(-50%, -50%);
}

#tips-dialog .tips-close {
  position: absolute;
  top: -12px;
  right: -10px;
  width: 50px;
  height: 54px;
  background: url(../images/tips_close.png) no-repeat center / 100% 100%;
  cursor: pointer;
}

#tips-dialog .tips-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 382px;
  height: 92px;
  background: url(../images/tips_text.png) no-repeat center / 100% 100%;
}