/*!pages/game/game.css*/
/*主体框架*/
html,
body {

}
.topnav-box {
  z-index: 1;
}

.content-width {
  overflow: visible;
}
.m-topnav {
  background: #fff;
}
.g-window {

}
.g-box-list{
  overflow: hidden;
  position: relative;
  width: auto;
}
.g-box-list{
  overflow: hidden;
  position: relative;
  width: auto;
}
.g-box-list ul >li{
  float: left;
  width: 100%;
  position: relative;
}
.g-window .g-box >img{
  width: 100%;
}
.g-window .g-box >a{
  cursor: default;
}

.g-window .g-page {
  width: 500%;
  height: 925px;
}
.g-window .g-page:after {
  content: ' ';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.g-window .page-s {
  float: left;
  width: 20%;
  height: 925px;
}
.g-window .g-page-1 {
  background: url(../images/products/game-p-1-1-bg.jpg) center no-repeat;
  background-size: 100% 100%;
  height: 913px;
}
.g-window .g-page-2 {
  background: url(../images/products/game-p-1-2-bg.jpg) center no-repeat;
  background-size: 100% 100%;
  height: 913px;
}
.g-window .g-page-3 {
  background: url(../images/products/game-p-2-1-bg.jpg) center no-repeat;
  background-size: 100% 100%;
  height: 913px;
}
.g-window .g-page-4 {
  background: url(../images/products/game-p-2-2-bg.jpg) center no-repeat;
  background-size: 100% 100%;
  height: 913px;
}
.g-window .g-page-5 {
  background: url(../images/products/game-p-3-1-bg.jpg) center no-repeat;
  background-size: 100% 100%;
  height: 913px;
}


.pagination {
  position:absolute;
  top:0;
  bottom:0;
  right:20px;
  height:90px;
  margin: 500px auto;
  font-size:1.2em;
  z-index: 10;
}
.pagination li {
  cursor: pointer;
  width:8px;
  height:8px;
  font-size: 0;
  margin: 5px;
  background: url('../images/products/tg_flash_p.png') -18px 0;
}
.pagination .on{
  background-position: 0 0;
}

/*第1-1屏*/
.jy-equip-tabs {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 610px;
  top:180px;
  margin-left: 600px;
}
.jy-equip-tabs li{
  float:left;
}

.jy-equip-img1 {
  background: url(../images/products/xunmibaoluomo.png) center no-repeat;
}
.jy-equip-img2 {
  background: url(../images/products/jipingjianchi.png) center no-repeat;
}
.jy-equip-img3 {
  background: url(../images/products/zaoshenbin.png) center no-repeat;
}
.jy-equip-img4 {
  background: url(../images/products/yanglingchong.png) center no-repeat;
}
.jy-equip-img5 {
  background: url(../images/products/feiqizhan.png) center no-repeat;
}
.jy-equip-img-class{
  position: absolute;
  left: 11%;
  width: 100%;
  bottom: 10%;
  height: 100%;
  animation:scale-small-to-big 1s ease 0s 1;
}
.jy-equip-img-class.small{
  animation:scale-big-to-small 1s ease 0s 1;
}

@keyframes scale-small-to-big{
  0%{
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
  }
  100%{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
  }
}
@keyframes scale-big-to-small{
  0%{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
  }
  100%{
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
  }
}

@keyframes fadeInOut{
  0% {
    opacity:0;
  }
  25% {
    opacity:0.25;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity:0.75;
  }
  100% {
    opacity:1;
  }
}

.jy-prev{
  background: url(../images/products/ico.png) center no-repeat;
  background-position:-45px -40px;
  width: 50px;
  height: 50px;
  display: block;
  position: absolute;
  cursor: pointer;
  top: 45%;
  left: 43%;
  z-index: 1;
}
.jy-next{
  background: url(../images/products/ico.png) center no-repeat;
  background-position: -105px -40px;
  width: 50px;
  height: 50px;
  right: -14px;
  display: block;
  position: absolute;
  cursor: pointer;
  top: 45%;
  left: 79%;
  z-index: 1;
}


/*第1-2屏*/
.sn-scene-tabs {

}

.sn-scene-tabs .img-class{
  top: 50%;
  position: absolute;
  float: left;
  width: 284px;
  height: 271px;
  animation: sn-scene-gray-img 1s ease;
  animation-fill-mode: forwards;
  margin-top: 220px;
  opacity: 0;
}
.sn-scene-tabs a:hover{
  animation:sn-scene-active-img 1s ease;
  animation-fill-mode: forwards;
}
.sn-scene-1{
  left: 22%;
}
.sn-scene-2{
  left: 33%;
}
.sn-scene-3{
  left: 44%;
}
.sn-scene-4{
  left: 55%;
}
.sn-scene-tabs .sn-scene-btn{
  width: 180px;
  height: 35px;
  margin: 20px 0 0 100px;
}
.sn-scene-tabs .sn-scene-color-1{
  background: url(../images/products/ss-scene-color-1.png) center no-repeat;
}
.sn-scene-tabs .sn-scene-color-2{
  background: url(../images/products/ss-scene-color-2.png) center no-repeat;
}
.sn-scene-tabs .sn-scene-color-3{
  background: url(../images/products/ss-scene-color-3.png) center no-repeat;
}
.sn-scene-tabs .sn-scene-color-4{
  background: url(../images/products/ss-scene-color-4.png) center no-repeat;
}
.sn-scene-tabs .sn-scene-gray-1{
  background: url(../images/products/ss-scene-gray-1.png) center no-repeat;
}
.sn-scene-tabs .sn-scene-gray-2{
  background: url(../images/products/ss-scene-gray-2.png) center no-repeat;
}
.sn-scene-tabs .sn-scene-gray-3{
  background: url(../images/products/ss-scene-gray-3.png) center no-repeat;
}
.sn-scene-tabs .sn-scene-gray-4{
  background: url(../images/products/ss-scene-gray-4.png) center no-repeat;
}


@keyframes sn-scene-gray-img{
  0%{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
  }
  100%{
    -webkit-transform:scale(0.9);
    -moz-transform:scale(0.9);
    -ms-transform:scale(0.9);
    -o-transform:scale(0.9);
  }
}
@keyframes sn-scene-active-img{
  0%{
    -webkit-transform:scale(0.9);
    -moz-transform:scale(0.9);
    -ms-transform:scale(0.9);
    -o-transform:scale(0.9);
  }
  100%{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
  }
}

/*第2-1屏*/
.ss-small-bg-tabs .img-class{
  position: absolute;
  width: 150px;
  height: 100px;
  right: 10%;
  cursor: pointer;
  z-index: 1;
}

.ss-small-bg-tabs .ss-tabs-img1 {
  top: 23%;
  background: url(../images/products/ss-tabs-gray-img1.png) center no-repeat;
}
.ss-small-bg-tabs .ss-tabs-img2 {
  top: 39%;
  background: url(../images/products/ss-tabs-gray-img2.png) center no-repeat;
}
.ss-small-bg-tabs .ss-tabs-img3 {
  top: 54%;
  background: url(../images/products/ss-tabs-gray-img3.png) center no-repeat;
}
.ss-small-bg-tabs .ss-tabs-img4 {
  top: 69%;
  background: url(../images/products/ss-tabs-gray-img4.png) center no-repeat;
}

.ss-small-bg-tabs .active.ss-tabs-img1{
  top: 23%;
  background: url(../images/products/ss-tabs-color-img1.png) center no-repeat;
}
.ss-small-bg-tabs .active.ss-tabs-img2 {
  top: 39%;
  background: url(../images/products/ss-tabs-color-img2.png) center no-repeat;
}
.ss-small-bg-tabs .active.ss-tabs-img3 {
  top: 54%;
  background: url(../images/products/ss-tabs-color-img3.png) center no-repeat;
}
.ss-small-bg-tabs .active.ss-tabs-img4 {
  top: 69%;
  background: url(../images/products/ss-tabs-color-img4.png) center no-repeat;
}

.ss-small-bg {
  width: 100%;
  height: 100%;
  position: absolute;
}


/*桃林十里*/
.ss-small-bg-img1 {
  background: url(../images/products/ss-small-img1.png) center no-repeat;
}
.g-box.cur .ss-small-bg-img1 {
  animation:scale-small-to-big 1s linear 0s 1;
}
/*诛仙永别*/
.ss-small-bg-img2 {
  background: url(../images/products/ss-small-img2.png) center no-repeat;
}
/*东海重逢*/
.ss-small-bg-img3 {
  background: url(../images/products/ss-small-img3.png) center no-repeat;
}
/*游戏介绍*/
.ss-small-bg-img4 {
  background: url(../images/products/ss-small-img4.png) center no-repeat;
  z-index: 1;
}

.ss-peach-img {
  background: url(../images/products/ss-peach-img1.png) center no-repeat;
  height: 860px;
  width: 1380px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.ss-character-img {
  background: url(../images/products/ss-character-img.png) center no-repeat;
  height: 848px;
  width: 848px;
  position: absolute;
  left: 180px;
  top: 0px;
  opacity: 0.2;
}
.ss-light-img {
  background: url(../images/products/ss-light-img.png) center no-repeat;
  height: 600px;
  width: 400px;
  position: absolute;
  left: 120px;
  top: 72px;
  opacity: 0.5;
}
.ss-reunion-img {
  background: url(../images/products/ss-reunion-img.png) center no-repeat;
  height: 660px;
  width: 660px;
  position: absolute;
  right: 40%;
  top: 0%;
}
.ss-writing1 {
  background: url(../images/products/ss-writing1.png) right no-repeat;
  height: 186px;
  position: absolute;
  right: 22%;
  top: 15%;
}
.ss-writing2 {
  background: url(../images/products/ss-writing2.png) right no-repeat;
  height: 209px;
  position: absolute;
  right: 22%;
  top: 15%;
}
.ss-writing3 {
  background: url(../images/products/ss-writing3.png) right no-repeat;
  height: 148px;
  position: absolute;
  right: 22%;
  top: 15%;
}

.ss-small-db {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.ss-ray {
  width: 100%;
  height: 100%;
  background: url(../images/found/ss-ray-img1.png) center no-repeat;
  position: absolute;
  z-index: 2;
}
.ss-button {
  width: 1000px;
  height: 404px;
  background: url(../images/products/ss-small-bot.png) center no-repeat;
  position: relative;
  z-index: 2;
  margin: 0 auto;
  top: 450px;
  left: -50px;
}
.ss-button ul {
  width: 100%;
  height: 100%;
}
.ss-button ul li {
  width: 20%;
  height: 140px;
  float: left;
}
.ss-button ul li.ss-button-li1 a{
  top: 162px;
}
.ss-button ul li.ss-button-li2 a{
  left: 18px;
  top: 220px;
}
.ss-button ul li.ss-button-li3 a{
  left: 42px;
  top: 232px;
}
.ss-button ul li.ss-button-li4 a{
  left: 63px;
  top: 206px;
}
.ss-button ul li.ss-button-li5 a{
  left: 84px;
  top: 131px;
}
.ss-button ul li a {
  width: 95px;
  height: 100%;
  display: inline-block;
  position: relative;
}
.ss-button a:hover div{
  -webkit-animation: dese .75s linear 1;
  -moz-animation: dese .75s linear 1;
  -ms-animation: dese .75s linear 1;
  -o-animation: dese .75s linear 1;
  animation: dese .75s linear 1;
}
@keyframes dese{
  0% { transform: rotate(-12deg); } /* 添加旋转角度，以下类似 */
  25% { transform: rotate(12deg); }
  50% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}

.ss-but-img1 {
  position: absolute;
  display: inline-block;
  width: 95px;
  height: 39px;
  left: 50px;
  top: 260px;
  background: url('../images/found/ss-but-img1.png') center no-repeat;
}
.ss-but-img2 {
  position: absolute;
  display: inline-block;
  width: 95px;
  height: 39px;
  left: 253px;
  top: 320px;
  background: url('../images/found/ss-but-img2.png') center no-repeat;
}
.ss-but-img3 {
  position: absolute;
  display: inline-block;
  width: 95px;
  height: 39px;
  left: 455px;
  top: 335px;
  background: url('../images/found/ss-but-img3.png') center no-repeat;
}
.ss-but-img4 {
  position: absolute;
  display: inline-block;
  width: 95px;
  height: 39px;
  left: 655px;
  top: 305px;
  background: url('../images/found/ss-but-img4.png') center no-repeat;
}
.ss-but-img5 {
  position: absolute;
  display: inline-block;
  width: 95px;
  height: 39px;
  left: 860px;
  top: 58%;
  background: url('../images/found/ss-but-img5.png') center no-repeat;
}
.ss-mask {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7);  /*支持rgba的浏览器*/
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);
  position: absolute;
  z-index: 2;
}
.ss-ray-shut {
  position: relative;
  top: 200px;
  width: 860px;
  height: 50px;
  margin: 0 auto;
  z-index: 2;
}
.ss-ray-shut .ss-ray-shut-title {
  width: 100px;
  height: 40px;
  background: url(../images/found/ss-ray-shut-title.png) no-repeat center;
  position: absolute;
  left: 325px;
  opacity: 0;
  animation: fadeInOut 2s ease 0s 1;
  animation-fill-mode: forwards;
}
.ss-ray-shut .ss-ray-shut-but {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url(../images/found/ss-ray-but.png) no-repeat;
  background-position:100% 0px;
  position: absolute;
  right: 80px;
  top: 15%;
}
.ss-alltabs-btn {
  position: relative;
  width: 700px;
  height: 50px;
  margin: 0 auto;
  z-index: 3;
}
.ss-alltabs-btn .but {
  display: block;
  position: absolute;
  cursor: pointer;
}
.ss-alltabs-btn .ss-prev {
  background: url(../images/found/ss-ray-but.png) center no-repeat;
  background-position: 0 100%;
  width: 50px;
  height: 50px;
}
.ss-alltabs-btn .ss-next {
  background: url(../images/found/ss-ray-but.png) center no-repeat;
  background-position: 93% 100%;
  width: 50px;
  height: 50px;
  right: 0;
}
.ss-type-tabs {
  position: relative;
  top: 300px;
  width: 630px;
  margin: 0 auto;
  height: 200px;
}
.ss-type-tabs .ss-tabs-img {
  width: 210px;
  height: 200px;
}
.ss-type-tabs li {
  width: 210px;
  float: left;
}
.ss-type-tabs li .ss-tabs-img {
  width: 210px;
  height: 200px;
  opacity: 0;
  animation: fadeInOut 2s ease 0s 1;
  animation-fill-mode: forwards;
}
.ss-type-tabs .ss-horse-img1 {
  background: url(../images/found/ss-gary-img1.png) no-repeat center;
}
.ss-type-tabs li .ss-horse-img2 {
  background: url(../images/found/ss-gary-img2.png) no-repeat center;
}
.ss-type-tabs .ss-horse-img3 {
  background: url(../images/found/ss-gary-img3.png) no-repeat center;
  background-position-x: -10px;
}
.ss-type-tabs li .ss-horse-img4 {
  background: url(../images/found/ss-gary-img4.png) no-repeat center;
}
.ss-type-tabs li .ss-horse-color-img1 {
  background: url(../images/found/ss-horse-color-img1.png) no-repeat center;
}
.ss-type-tabs li .ss-horse-color-img2 {
  background: url(../images/found/ss-horse-color-img2.png) no-repeat center;
}
.ss-type-tabs li .ss-horse-color-img3 {
  background: url(../images/found/ss-horse-color-img3.png) no-repeat center;
}
.ss-type-tabs .ss-divine-img1 {
  background: url(../images/found/ss-divine-img1.png) no-repeat center;
}
.ss-type-tabs li .ss-divine-img2 {
  background: url(../images/found/ss-divine-img2.png) no-repeat center;
}
.ss-type-tabs .ss-divine-img3 {
  background: url(../images/found/ss-divine-img3.png) no-repeat center;
}
.ss-type-tabs .ss-divine-img4 {
  background: url(../images/found/ss-divine-img4.png) no-repeat center;
}
.ss-type-tabs li .ss-divine-color-img1 {
  background: url(../images/found/ss-divine-color-img1.png) no-repeat center;
}
.ss-type-tabs li .ss-divine-color-img2 {
  background: url(../images/found/ss-divine-color-img2.png) no-repeat center;
}
.ss-type-tabs li .ss-divine-color-img3 {
  background: url(../images/found/ss-divine-color-img3.png) no-repeat center;
}
.ss-type-tabs .ss-mass-img1 {
  background: url(../images/found/ss-mass-img1.png) no-repeat center;
}
.ss-type-tabs .ss-mass-img2 {
  background: url(../images/found/ss-mass-img2.png) no-repeat center;
}
.ss-type-tabs li .ss-mass-img3 {
  background: url(../images/found/ss-mass-img3.png) no-repeat center;
}
.ss-type-tabs li .ss-mass-img4 {
  background: url(../images/found/ss-mass-img4.png) no-repeat center;
}
.ss-type-tabs li .ss-mass-color-img1 {
  background: url(../images/found/ss-mass-color-img1.png) no-repeat center;
}
.ss-type-tabs li .ss-mass-color-img2 {
  background: url(../images/found/ss-mass-color-img2.png) no-repeat center;
}
.ss-type-tabs li .ss-mass-color-img3 {
  background: url(../images/found/ss-mass-color-img3.png) no-repeat center;
}
.ss-type-tabs .ss-pet-img1 {
  background: url(../images/found/ss-pet-img1.png) no-repeat center;
}
.ss-type-tabs .ss-pet-img2 {
  background: url(../images/found/ss-pet-img2.png) no-repeat center;
}
.ss-type-tabs .ss-pet-img3 {
  background: url(../images/found/ss-pet-img3.png) no-repeat center;
}
.ss-type-tabs .ss-pet-img4 {
  background: url(../images/found/ss-pet-img4.png) no-repeat center;
}
.ss-type-tabs li .ss-pet-color-img1 {
  background: url(../images/found/ss-pet-color-img1.png) no-repeat center;
}
.ss-type-tabs li .ss-pet-color-img2 {
  background: url(../images/found/ss-pet-color-img2.png) no-repeat center;
}
.ss-type-tabs li .ss-pet-color-img3 {
  background: url(../images/found/ss-pet-color-img3.png) no-repeat center;
}
.ss-type-tabs .ss-equip-img1 {
  background: url(../images/found/ss-equip-img1.png) no-repeat center;
}
.ss-type-tabs li .ss-equip-img2 {
  background: url(../images/found/ss-equip-img2.png) no-repeat center;
}
.ss-type-tabs li .ss-equip-img3 {
  background: url(../images/found/ss-equip-img3.png) no-repeat center;
}
.ss-type-tabs .ss-equip-img4 {
  background: url(../images/found/ss-equip-img4.png) no-repeat center;
}
.ss-type-tabs li .ss-equip-color-img1 {
  background: url(../images/found/ss-equip-color-img1.png) no-repeat center;
}
.ss-type-tabs li .ss-equip-color-img2 {
  background: url(../images/found/ss-equip-color-img2.png) no-repeat center;
}
.ss-type-tabs li .ss-equip-color-img3 {
  background: url(../images/found/ss-equip-color-img3.png) no-repeat center;
}
.g-box .page-setting {
  background: url(../images/found/game-p-3-2-bg.jpg) center no-repeat;
  background-size: 100% 100%;
  height: 913px;
}
/*2-2*/
.cs-small-box{
  width: 1000px;
  height: 400px;
  position: relative;
  top:400px;
}
.cs-small-box div{
  position: absolute;
}
.cs-small-box .cs-small-img-1{
  width: 301px;
  height: 304px;
  background: url(../images/products/cs-qiangwei.png) center no-repeat;
}
.cs-small-box .cs-small-img-2{
  width: 301px;
  height: 304px;
  top: 102px;
  left: 180px;
  background: url(../images/products/cs-zhaoxin.png) center no-repeat;
}
.cs-small-box .cs-small-img-3{
  width: 301px;
  height: 304px;
  left: 360px;
  background: url(../images/products/cs-monkey.png) center no-repeat;
}
.cs-small-box .cs-small-img-4{
  width: 301px;
  height: 304px;
  top: 104px;
  left: 540px;
  background: url(../images/products/cs-leina.png) center no-repeat;
}
.cs-small-box .cs-small-img-5{
  width: 301px;
  height: 304px;
  left: 716px;
  background: url(../images/products/cs-jiansheng.png) center no-repeat;
}
.cs-small-box .cs-small-img-1.img-scale{
  animation:scale-small-to-big 0.8s linear 0s 1;
}
.cs-small-box .cs-small-img-2.img-scale{
  animation:scale-small-to-big 1s linear 0s 1;
}
.cs-small-box .cs-small-img-3.img-scale{
  animation:scale-small-to-big 1.2s linear 0s 1;
}
.cs-small-box .cs-small-img-4.img-scale{
  animation:scale-small-to-big 1.4s linear 0s 1;
}
.cs-small-box .cs-small-img-5.img-scale{
  animation:scale-small-to-big 1.1s linear 0s 1;
}

/*3-1*/
.xh-small-box{
  width: 1000px;
  height: 400px;
  position: relative;
  top: 30px;
}
.xh-small-box div{
  position: absolute;
  opacity:0;
}
.xh-small-box .xh-small-img-1{
  width: 643px;
  height: 296px;
  left: -100px;
  background: url(../images/products/xh-cxht.png) center no-repeat;
}
.xh-small-box .xh-small-img-2{
  width: 721px;
  height: 246px;
  top:305px;
  left: -100px;
  background: url(../images/products/xh-pvp.png) center no-repeat;
}
.xh-small-box .xh-small-img-3{
  width: 882px;
  height: 339px;
  top:465px;
  left: -100px;
  background: url(../images/products/xh-jmyc.png) center no-repeat;
}
.xh-small-box .xh-small-img-4{
  width: 1148px;
  height: 884px;
  left: -500px;
  background: url(../images/products/xh-meizi.png) center no-repeat;
}