html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,input,textarea,
article,aside,audio,canvas,command,datalist,details,dialog,embed,figure,header,hgroup,keygen,mark,meter,nav,output,progress,rp,rt,ruby,section,source,time,video
{ border:none; 
margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit;
font-family: inherit; vertical-align: baseline; list-style:none;
}
.clearfix:after  {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix        {display: inline-block;}
.clearfix        {display: block;}
a:link, a:visited {	text-decoration:none;}
a:hover, a:active {	text-decoration:none;}
a{outline:none;*hide-focus: none;}
body,html{ font-size:0.24rem; width:100%; color:#fff; }
.page_in_news { background:#fff; }
.left {float:left;}
.right{float:right;}
img {
vertical-align: middle;
text-align: center;
}
.cont-img{	width:100%;	height:100%;}

#container {	max-width:1080px; 	margin:0 auto; overflow:hidden; height:100%; }
/* wrap */
.wrap  { position:relative;   } 

/* swiper Demo styles */
 
img {
	width: 100%;
	display: block;
}

.body {
	width: 100%;
	max-width: 1080px;
	overflow: hidden;
	background: #f3f8fb;
	position: relative;
}

/*页面背景*/ 
.header {text-align: center;}
.container{
	background: url(../img/bg.jpg?20210312) top center;
	background-size: 100% 100%;
}
.container>div{ position:relative; }
.page {margin: 0 auto;width:10.8rem;	height:14.71rem; background-size: 10.8rem 21.38rem; background-position: 0 -6.67rem; }
.gamevideo-group {margin: 0 auto;width:10.8rem;	height: 7.5rem; background-size: 10.8rem 21.38rem; background-position: 0 0; }
.fuli-group {width: 100%;height: 7.4rem;text-align: center;}
.HeroWrap {width: 100%;height: 11.96rem;margin-top:1rem}

/* 框架 头部 */
.header{
	height: 18.26rem;
}
.role {width: 10.8rem;	height: 18.26rem;z-index: 1;margin: 0 auto;}
.slogan {
	position: absolute;	left:50%; margin-left: -4.56rem; bottom: 2.67rem;width: 9.13rem;	height: 4.18rem;
	z-index: 2;
}
.icon-box {position: absolute;left: 50%;bottom: .34rem;; transform: translateX(-50%);width: 100%;text-align: left;text-indent: .5rem;}
.sign {display: inline-block;width:5.6rem;	height:2.3rem;z-index: 2;}

/* 游戏视频 */
.video-title {font-size: 0;padding: .73rem 0 .6rem 0;text-align: center;}
.video-title img {display: inline-block;width: 6.8rem;height: .69rem;}
.video_box {position: relative;;width: 9.7rem;height:5.4rem;margin: 0 auto;}
.video_box img {width: 100%;height: 100%;}
.play-btn {position: absolute;top:1.85rem; left: 4rem; display: block;width: 1.7rem;height: 1.7rem;background: url(../img/play_btn.png?20210312) no-repeat center;background-size:100%;font-size: 0;;}

/* 游戏画面 */
.page-title {font-size: 0;padding: .84rem 0 .46rem 0;text-align: center;}
.page-title img {display: inline-block;width: 6.8rem;height: .69rem;}
.page-main{width: 10.8rem;height:11.85rem;;overflow: hidden;;position: absolute;top: 1.9rem;right: 0;left: 0;bottom: 0;}
.swiper-box{
	width: 7.73rem;
	height: 12rem;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
	box-sizing:border-box;
}
.page .specile-swiper {
	width: 6.5rem;
	height: 100%;
	margin-left: 1rem
}
.swiper-wrapper {margin-left: -0.64rem;}
.specile-swiper .swiper-slide {box-sizing: border-box;padding: .14rem;}
.specile-swiper .swiper-slide img {
	width: 6.5rem;
	/* // box-shadow: 0 0 0.14rem #fff; */
	box-shadow: 0.01rem 0.02rem .21rem 0 	#daedff;
}
.prev,.next {
	width: .9rem;
	height: 1.32rem;
	cursor: pointer;
	position: absolute;
	top: 50%;
	margin-top: -.5rem;
	z-index: 20;
	opacity: 1;
}
.next {
	right: .45rem;
	background: url(../img/arrow-right.png?v=20210312) no-repeat;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-ms-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
}
.prev {
	left: .45rem;
	background: url(../img/arrow-left.png?v=20210312) no-repeat;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-ms-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
}
.swiper-pagination{
	bottom: 3%;
	left: 50%;
	transform: translateX(-50%);
}
.swiper-pagination-bullet{
	background-color: #d5e5f1;
	margin: 0 0.05rem;
	opacity: 0.9;

}
.swiper-pagination-bullet-active{
	background-color: #97d0f1
}
/* 游戏简介 */
.fuli-title {font-size: 0;padding: .58rem 0;margin-bottom: .4rem;;text-align: center;}
.fuli-title img {display: inline-block;width: 6.8rem;height: .69rem;}
.fuli-intro {display: inline-block;width: 8.29rem;height: 4.33rem;}

/*角色介绍*/
.roles-title {font-size: 0;padding: .37rem 0;margin-bottom: .47rem;padding-left:.94rem}
.roles-title img {display: inline-block;width: 4.79rem;height: .64rem;}
.roles {position: absolute;top: 0;left: 50%;display: block;width: 10.8rem;height: 12.33rem;margin-left: -5.4rem;;background: url(../img/role_bg.png?20210312) no-repeat top center;background-size: contain;}
.roles-icons {
	position: absolute;
	left: .85rem;
	top: 1.85rem;
	width: 4.54rem;
	font-size: 0;
	text-align: center;
	z-index: 2;
}
.roles-icons a {
	position: relative;
	font-size: 0;
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	margin: 0 .05rem;
	background: url(../img/role_icon.png?20210312) no-repeat center;
	background-size: 4.36rem 2.75rem;
}
.roles-icons a.on:after {content: '';position: absolute;bottom: -.24rem;left: .37rem;display: block;width: 0.74rem;height: 0.49rem;background: url(../img/role_checked.png) no-repeat center;background-size: cover;}
.roles-icons a:nth-child(1) {
	background-position: 0 0;
}
.roles-icons a:nth-child(2) {
	background-position: -1.48rem 0;
}
.roles-icons a:nth-child(3) {
	background-position: -2.95rem 0;
}
.roles-icons a:nth-child(4) {
	background-position: -.74rem -1.37rem;
}
.roles-icons a:nth-child(5) {
	background-position: -2.21rem -1.37rem;
}
.roles-box img{
	width: 10.8rem;
	height: 13.9rem;
	position: absolute;
	left: 50%;
	margin-left: -5.4rem;
	bottom: 0;
	opacity: 0;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
.roles .roles-box img.on{
	opacity: 1;
}

/* 视频弹窗 */
.pop-video{
	position: fixed!important;
	z-index: 101;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 7rem;
	display: none;
}

.mask{
	position: fixed!important;
	left: 0;
	top: 0;
	z-index: 99;
	width: 100%;
	height: 100%;
	background: rgba(1, 1, 1, 0.77);
	display: none;
}

@keyframes animateRotate {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes animateRotate {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@-moz-keyframes animateRotate {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@-ms-keyframes animateRotate {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@-o-keyframes animateRotate {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.animateRotate {
	animation: animateRotate 20s infinite;
	animation-timing-function: linear;
}