/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
body {
	overflow-x: hidden;
}
.header{
    width: 100%;
    height: 84px;
    background: url('../images/sm0.jpg') center no-repeat;
}
.bigcontainer {
	width: 100%;
	background: #000;
	top:-110px;
}
.test {
	border: 1px solid red;
}
.fl {
	float: left;
}
.cl {
	clear: both;
}
.bl {
	display: block;
}
.ab {
	position: absolute;
	left: 431px;
	top: 0px;
}
.rl {
	position: relative;
}
.topcontainer {
	width:1920px;
	height:1080px;
	left: 50%;
	margin-left: -960px;
	overflow: hidden;
	position: relative;
	background: url(../smps8/smps8.jpg) no-repeat center;
	background-position: 0 0;
}

.animatetop{	
	width:1920px;
	height:1080px;
	left:50%;
	margin-left:-960px;
}

.topcontainer .topnavs{
	width:616px;
	height:30px;
	left:50%;
	margin-left:-41px;
	top:23px;
}

.topcontainer .topnavs .nav{
	width:112px;
	height:30px;
}

.topcontainer .topnavs .nav1{
	margin-left:0px;
}

.topcontainer .topnavs .nav2{
	margin-left:167px;
}

.topcontainer .topnavs .nav3{
	margin-left:335px;
}

.topcontainer .topnavs .nav4{
	margin-left:503px;
}

.topcontainer .navs{
	width:938px;
	height:263px;
	left:50%;
	margin-left:-471px;
	top:836px;
}

.topcontainer .navs .nav{
	width:177px;
	height:178px;
}

.topcontainer .navs .nav1{
	margin-left:0px;
	top:86px;
}

.topcontainer .navs .nav2{
	margin-left:255px;
	top:35px;
}

.topcontainer .navs .nav3{
	margin-left:508px;
	top:0px;
}

.topcontainer .navs .nav4{
	margin-left:761px;
	top:7px;
}

.topcontainer .navs .nav:hover{
	cursor: pointer;	
}

#Download{
	width: 1000px;
	height: 176px;
	text-align:center;
	position:absolute;
	top: 830px;
	left:50%;
	margin-left: -426px;
	z-index:51;
	border-radius:5px;
	background:url(../images/down.png) no-repeat left top;
}
#Download .btn_down_s1{
	float:left;
	width: 236px;
	height: 89px;
	text-indent:-999em;
	margin-left: 256px;
	margin-top: 43px;
}
#Download .btn_down_s3{
	float:left;
	width: 231px;
	height: 101px;
	text-indent:-999em;
	margin-left: 4px;
	margin-top: 35px;
}
#Download .btn_down_s4{
	float:left;
	width: 178px;
	height: 176px;
	text-indent:-999em;
	margin-left:-45px;
	margin-top:-3px;
	background-image:url(../images/texture.png);
	-webkit-animation: btn  1s steps(8) infinite;
	-moz-animation: btn  1s steps(8) infinite;
	-ms-animation: btn  1s steps(8) infinite;
	animation: btn 1s steps(8) infinite;
	transform: scale(1);
}

@-moz-keyframes btn {
    0% { background-position: 0px 0px }
	100% { background-position: -1424px 0px }
}
@-o-keyframes btn  {
    0% { background-position: 0px 0px }
	100% { background-position: -1424px 0px }
}
@keyframes btn {
    0% { background-position: 0px 0px }
	100% { background-position: -1424px 0px }
}

.sm1 {
	width:1920px;
	height:591px;
	left: 50%;
	margin-left: -960px;
	position: relative;
	background: url(../images/bg_02.jpg) no-repeat center;
	background-position: 0 0;
}

.NewsList{
	margin:0 18px;
	width:620px;
	height:703px;
	position: absolute;
	top:200px;
	margin-left: 790px;
	transition:all 0.1s linear;
}
.NewsList li:hover{
	transform:translatex(5px);
	background-color:#860200;
}
.NewsList li{
	width:620px;
	height:59px;
	line-height:59px;
	overflow:hidden;
	color:#ecdcbd;
	padding-right:8px;
	border-bottom:1px dotted #ecdcbd;
	font-size:16px;
	list-style: none;
}
.NewsList li a{
	margin-left:5px;
	color:#ecdcbd;
}
.NewsList li time{
	float:right;
	color:#ecdcbd;
}
.NewsList li .lx{
	margin:0 8px;
	color:#ecdcbd;
}

.sm2{
	width:1920px;
	height:850px;
	left: 50%;
	margin-left: -960px;
	overflow: hidden;
	position: relative;
	background: url(../images/bg_03.jpg) no-repeat center;
	background-position: 0 0;
}

.sm3{
	width:1920px;
	height:850px;
	left: 50%;
	margin-left: -960px;
	position: relative;
	background: url(../images/bg_04.jpg) no-repeat center;
	background-position: 0 0;
}

.sm4{
	width:1920px;
	height:900px;
	left: 50%;
	margin-left: -960px;
	overflow: hidden;
	position: relative;
	background: url(../images/bg_05.jpg) no-repeat center;
	background-position: 0 0;
}

.sm5{
	width:1920px;
	height:900px;
	left: 50%;
	margin-left: -960px;
	position: relative;
	background: url(../images/bg_06.jpg) no-repeat center;
	background-position: 0 0;
}

.sm6{
	width:1920px;
	height:600px;
	left: 50%;
	margin-left: -960px;
	position: relative;
	background: url(../images/bg_07.jpg) no-repeat center;
	background-position: 0 0;
}

.slide1{
	width:1145px;
	height:559px;
	left: 50%;
	margin-left: -573px;
	top:107px;
}

.slide1 .uls li{list-style: none;}

.slide1 .prev,.slide1 .next{width:32px;height:50px;}
.slide1 .prev{top:-315px;left:-38px;}
.slide1 .next{top:-367px;left:1144px;}

.slide3{
	width:1032px;
	height:527px;
	left: 983px;
	margin-left: -606px;
	top:160px;
}

.slide3 .uls li{list-style: none;}

.slide3 .prev,.slide3 .next{width:60px;height:80px;}
.slide3 .prev{top:-330px;left:650px;}
.slide3 .next{top:-405px;left:-520px;}

.slide4{
	width:1078px;
	height:419px;
	left: 50%;
	margin-left: -539px;
	top:620px;
}

.slide4 .uls li{list-style: none;}

.slide4 .prev,.slide4 .next{width:40px;height:52px;}
.slide4 .prev{top:-262px;left:-385px;}
.slide4 .next{top:-317px;left:1121px;}

/* ====================== 顶部图片：勇者联盟 → 暗黑神宠 ====================== */
#Layer4 {
	position:absolute;
	width:1920px;
	height:132px;
	z-index:2;
	left: 0px;
	top: 0px;
	/* 已替换为暗黑神宠版本图片 */
	background-image: url(../css/images/sm7.jpg);
	background-repeat: no-repeat;
}
#Layer5 {
	position:absolute;
	width:700px;
	height:90px;
	z-index:1;
	left: 777px;
	top: 24px;
}
#Layer2 {
	position:absolute;
	width:1200px;
	height:700px;
	z-index:2;
	left: 390px;
	top: 213px;
}

.STYLE2 {	
	font-size: 12px;
	color: #FFFFFF;
}

.slide5{
	width:1078px;
	height:419px;
	left: 50%;
	margin-left: -539px;
	top:1097px;
}

.slide5 .uls li{list-style: none;}

.slide5 .prev,.slide5 .next{width:40px;height:52px;}
.slide5 .prev{top:-262px;left:-85px;}
.slide5 .next{top:-317px;left:1121px;}

.par2 {
	padding-top:173px
}
.par2 h2 {
	background-position:0 -324px;
	width:878px;
	height:137px;
	display:block;
	margin:0 auto
}
.list_show {
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	transform-style:preserve-3d;
	height:605px
}
.list_show .card {
	position:relative;
	width:331px;
	height:460px;
	transform-style:preserve-3d;
	perspective:1000px; 
	list-style: none;
}
.list_show .card .boxs {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transition:1s ease
}
.list_show .card:hover .boxs {
	transform:rotateY(180deg)
}
.list_show .card .boxs .imgBx {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%
}
.list_show .card .boxs .imgBx img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover
}
.list_show .card .boxs .contentBx {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	backface-visibility:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
	transform-style:preserve-3d;
	transform:rotateY(180deg);
	display:none
}
.list_show .card .boxs .contentBx img {
	 transform-style:preserve-3d;
	 transform:translateZ(40px);
	display:block;
}
.list_show .card .boxs:hover .contentBx {
	display:block
}
.btn_look {
	background-position:-371px 0;
	width:113px;
	height:33px;
	display:block;
	position:absolute;
	bottom:40px;
	left:64px
}

/*浮动条*/
#Floatingbars{
	width:146px;
	height:404px;
	position:fixed;
	top:20%;
	right:0px;
	z-index:10000;
	background: url(../images/icon29.png) no-repeat center center;
}
#Floatingbars ._btn_qqqun{
	display:block;
	text-align:center;
	margin-top:13px;
}

#Floatingbars .btn_showhide{
	width:27px; 
	height:95px; 
	position:absolute;
	top:46px;
	right:100%;
	cursor:pointer;
	background:url(../images/icon25.png) no-repeat left top;
}
#Floatingbars .btn_showhide.off{
	background:url(../images/icon33.png) no-repeat left top;
}

/*客服列表*/
.kefulist{}
.kefulist li{
	font-size:14px;
	padding-right:19px;
	padding-left:19px;
	list-style: none;
}
.kefulist li a{
	height:48px;
	line-height:48px;
	color: #dcb86b;
	text-decoration:none;
	display:block;
	width: 108px;
	text-align: center;
}
.kefulist li a [class^='icon']{
	margin-right:10px;
	vertical-align:middle;
}
.kefulist li:nth-last-of-type(1) a{border:none;}
.kefulist li:hover .icon_qq{background-position:right top;}
.kefulist li:hover a{color:#fff;}
.icon_kefu{
	width:15px;
	display:inline-block;
}
.icon_kefu.icon_kefu1x1{}
.icon_kefu.icon_kefu2x1{background-position:-15px 0;}
/*QQ群*/
.qq_qunList{
	overflow:hidden;
	padding-top:10px;
	padding-bottom:12px;
}
.qq_qunList li{
	width:92px;
	margin:0 auto 15px auto;
}
.qq_qunList li a{
	width:90px;
	height:22px;
	display:block;
}
.qq_qunList li a img{
	width:100%;
	height:100%;
}
/*更多*/
._more{
	width:36px;
	height:36px;
	position:absolute;
	text-indent:-999em;
	top:25px;
	right:10px;
	background:url(../images/icon_add.html) no-repeat center center;
}
/*返回顶部*/
.btn_backtop{
	height:30px;
	line-height:30px;
	text-align:center;
	font-size:14px;
	color:#fce6ac;
	display:block;
}
.btn_backtop:hover{
	color:#a6935b;
	text-decoration:none;
}
/*二维码*/
.RQcodes{
	padding-top:17px;
	padding-bottom:17px;
}
.RQcodes strong{
	line-height:24px;
	font-size:16px;
	font-weight:normal;
	color:#dcb86b;
	display:block;
	padding-left:20px;
	padding-right:12px;
}
.RQcodes span{
	line-height:20px;
	color:#dcb86b;
	margin-bottom:10px;
	display:block;
	padding-left:20px;
	padding-right:12px;
}
.RQcodes .pic{
	width:108px;
	height:108px;
	margin:0 auto;
}
.RQcodes .pic img{
	width:100%;
	height:100%;
}

@keyframes light_ {
	  25% { transform:scale(1.6);opacity: 0.9;}
	  75% {transform: scale(0.4);opacity: 1;}
}
@keyframes light_2 {
	  45% { transform:scaleX(1.05);opacity:0.6;}
	  75% {transform: scaleX(1);opacity: 1;}
}
@keyframes light_1 {
	  50% { transform: translatey(-10px) scale(1.005);opacity:1;}
	  100% {transform:translatey(0px) scale(1);opacity: 1;}
}
@keyframes light_3 {
	  50% { transform: translatey(-20px) scale(1.005);opacity:1;}
	  100% {transform:translatey(0px) scale(1);opacity: 1;}
}

.slide2{
	width: 1223px;
	height:586px;
	margin-left: -20px;
	top: 246px;
}
.slide2 .uls li{list-style: none;}
.slide2 .prev,.slide2 .next{width: 39px;height: 51px;}
.slide2 .prev{top: -252px;left: 396px;}
.slide2 .next{top: -304px;left: -369px;}
.slide2 .slide2images{margin-left:357px;margin-top:-12px;}
.slide2 .slide2hd{}
.slide2 .slide2hd .ssmm{
	width: 132px;
	height: 109px;
	-webkit-transition: -webkit-transform .5s ease;
	transition: -webkit-transform .5s ease;
	-moz-transition: transform .5s ease, -moz-transform .5s ease;
	transition: transform .5s ease;
	transition: transform .5s ease, -webkit-transform .5s ease, -moz-transform .5s ease;
}
.slide2 .slide2hd .ssmm:hover{cursor: pointer;}

.slide2 .slide2hd .ssmm1{
	margin-left:-431px;
	width:433px;
	height:250px;
	overflow:hidden;
} 
.slide2 .slide2hd .ssmm1 .xx1{
	background:url(../smps8/01.png);
	width:433px;
	height:250px;
	overflow:hidden;
	-webkit-transition: -webkit-transform .5s ease;
	transition: -webkit-transform .5s ease;
	-moz-transition: transform .5s ease, -moz-transform .5s ease;
	transition: transform .5s ease;
	transition: transform .5s ease, -webkit-transform .5s ease, -moz-transform .5s ease;
} 
.slide2 .slide2hd .ssmm1:hover .xx1{
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	width:433px;
	height:250px;
} 

.slide2 .slide2hd .ssmm2{
	margin-top: 110px;
	width:432px;
	height:346px;
	overflow:hidden;
	margin-left: -431px;
} 
.slide2 .slide2hd .ssmm2 .xx1{
	background:url(../smps8/02.png);
	width:432px;
	height:346px;
	overflow:hidden;
	-webkit-transition: -webkit-transform .5s ease;
	transition: -webkit-transform .5s ease;
	-moz-transition: transform .5s ease, -moz-transform .5s ease;
	transition: transform .5s ease;
	transition: transform .5s ease, -webkit-transform .5s ease, -moz-transform .5s ease;
} 
.slide2 .slide2hd .ssmm2:hover .xx1{
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	width:432px;
	height:346px;
} 

.slide2 .slide2hd .ssmm3{
	margin-top: 390px;
	width:433px;
	height:193px;
	margin-left: -431px;
	overflow:hidden;
}
.slide2 .slide2hd .ssmm3 .xx1{
	background:url(../smps8/03.png);
	width:433px;
	height:193px;
	overflow:hidden;
	-webkit-transition: -webkit-transform .5s ease;
	transition: -webkit-transform .5s ease;
	-moz-transition: transform .5s ease, -moz-transform .5s ease;
	transition: transform .5s ease;
	transition: transform .5s ease, -webkit-transform .5s ease, -moz-transform .5s ease;
} 
.slide2 .slide2hd .ssmm3:hover .xx1{
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	width:433px;
	height:193px;
} 

.yihuo{
	width:743px;
	height:679px;
	background:url(../smps8/yihuo.gif);
	margin-left: 739px;
	margin-top: 270px;
}

#preview{
	position:absolute;
	border:1px solid #614635;
	background:#3c2116;
	padding:5px;
	display:none;
	margin-top:-300px;
	z-index:99999;
}
.m6piccon{
	float:left;
	position:relative;
	width:600px;
	height:145px;
	margin-left:815px;
	margin-top:164px;
	z-index:999
}
.m6piccon li{
	float:left;
	width:111px;
	height:44px;
	padding:0;
	margin-bottom:25px;
	list-style: none; 
	margin-left: 20px;
}
.m6piccon li a span{
	float:left;
	width:60px;
	height:15px;
	line-height:15px;
	border:1px solid #585858;
	font-size:12px;
	color:#ed2d01;
	background:#1c1010;
	padding:5px 3px;
	margin-top:10px;
	text-align:center;
	margin-left:0px
}
.m6piccon li img {
	float:left;
	width:111px;
	height:44px
}

.items {
	width:1220px;
	left:50%;
	margin-left:-513px;
	margin-top:320px;
}
.items ul{}
.items li{ 
	width:42px; 
	height:176px; 
	float:left; 
	list-style:none; 
	margin-right:159px;
}

.itemcss{ 
	position:relative;
	width:52px; 
	height:52px;
	margin:0 auto
} 
.itemcss a,.itemcss span{
	display:none; 
	text-decoration:none
}
.itemcss:hover{cursor:pointer} 
.itemcss:hover a.now{
	cursor:pointer; 
	position:absolute; 
	top:0; 
	width:100%; 
	height:100%;
	z-index:100; 
	left:0; 
	display:block;
}
.itemcss:hover span{ 
	display:block;
	position:absolute; 
	bottom:0; 
	left:0;
	color:#FFF;
	margin-left:50px;
	z-index:10;
	height:36px; 
	line-height:36px; 
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	opacity: 0.9;
}
.m7piccon{
	float:left;
	position:relative;
	width:240px;
	height:145px;
	margin-left:201px;
	margin-top:303px;
	z-index:999
}
.m7piccon li{
	float:left;
	width:119px;
	height:68px;
	padding:0;
	margin-bottom:25px;
	list-style: none;
}
.m7piccon li a span{
	float:left;
	width:60px;
	height:15px;
	line-height:15px;
	border:1px solid #585858;
	font-size:12px;
	color:#ed2d01;
	background:#1c1010;
	padding:5px 3px;
	margin-top:10px;
	text-align:center;
	margin-left:0px
}
.m7piccon li img {
	float:left;
	width:42px;
	height:42px
}

.m8piccon{
	float:left;
	position:relative;
	width:240px;
	height:145px;
	margin-left:662px;
	margin-top:243px;
	z-index:999
}
.m8piccon li{
	float:left;
	width:119px;
	height:68px;
	padding:0;
	margin-bottom:25px;
	list-style: none;
}
.m8piccon li a span{
	float:left;
	width:60px;
	height:15px;
	line-height:15px;
	border:1px solid #585858;
	font-size:12px;
	color:#ed2d01;
	background:#1c1010;
	padding:5px 3px;
	margin-top:10px;
	text-align:center;
	margin-left:0px
}
.m8piccon li img {
	float:left;
	width:42px;
	height:42px
}

.m9piccon{
	float:left;
	position:relative;
	width:800px;
	height:145px;
	margin-left:26px;
	margin-top:358px;
	z-index:999
}
.m9piccon li{
	float:left;
	width:76.5px;
	height:88px;
	padding:0;
	margin-bottom:25px;
	list-style: none;
}
.m9piccon li a span{
	float:left;
	width:60px;
	height:15px;
	line-height:15px;
	border:1px solid #585858;
	font-size:12px;
	color:#ed2d01;
	background:#1c1010;
	padding:5px 3px;
	margin-top:10px;
	text-align:center;
	margin-left:0px
}
.m9piccon li img {
	float:left;
	width:42px;
	height:42px
}