/* reset */
html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 {margin:0;padding:0}
a,img,input {border:none;}
body{font: 14px/1.75  -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-tap-highlight-color: rgba(0,0,0,0);}
a {text-decoration:none;}
ul,li{list-style: none}
a, img {-webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单，根据需要选择是否删除 */}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}
/* reset end */
html {
  font-size: 50px;/* 兼容不支持vw的系统 */
  font-size: 13.33333333vw;/* 7.5rem === 100vw */
}

@media (max-width: 1024px) {
  html,body {
    max-width: 1024px;
  }
}

#afooter{background-color: #000;text-align: center;font-size:22px; line-height: 30px; padding:20px 0; display: none;}
#afooter, #afooter a{color: #fff;text-decoration: none;}
/*视频弹窗*/
.pop_video { padding: 2px; outline: none; position: relative; display: none; border: 1px solid #d1cdce;}
.pop_video_close { position: absolute; right: .06rem; top: -.7rem; z-index: 5;}
.pop_video_cont { width: 6.6rem; height: 3.72rem; border: 1px solid #d1cdce; text-align: center; clear: both; background: #000;}
#popVideoCon { width: 100%; height: 100%;}
/* 图片分离路径示例 */
/* .bg{background-image: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/);} */


.spr { background-repeat: no-repeat;background-image:url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/spr.png);}

.page-nav0 {width:130px; height:76px; background-position: -852px -1032px}
.page-nav0.cur {width:130px; height:76px; background-position: -852px -946px}
.page-nav1 {width:170px; height:76px; background-position: -744px -778px}
.page-nav1.cur {width:170px; height:76px; background-position: -744px -692px}
.page-nav2 {width:199px; height:76px; background-position: -10px -1133px}
.page-nav2.cur {width:199px; height:76px; background-position: -10px -1047px}
.page-nav3 {width:185px; height:76px; background-position: -10px -1477px}
.page-nav3.cur {width:185px; height:76px; background-position: -10px -1391px}
.page-nav4 {width:199px; height:76px; background-position: -10px -1305px}
.page-nav4.cur {width:199px; height:76px; background-position: -10px -1219px}
.page-nav5 {width:221px; height:76px; background-position: -241px -1564px}
.page-nav5.cur {width:221px; height:76px; background-position: -10px -1564px}
.page-next {width:174px; height:72px; background-position: -744px -864px}
.page-prev {width:176px; height:70px; background-position: -663px -946px}
.page-share {width:106px; height:127px; background-position: -444px -1412px}
.part2-nav1 {width:179px; height:66px; background-position: -663px -1026px}
.part2-nav1.cur {width:179px; height:66px; background-position: -745px -616px}
.part2-nav2 {width:179px; height:66px; background-position: -586px -1178px}
.part2-nav2.cur {width:179px; height:66px; background-position: -586px -1102px}
.part2-nav3 {width:229px; height:66px; background-position: -205px -1488px}
.part2-nav3.cur {width:229px; height:66px; background-position: -205px -1412px}
.part2-text {width:357px; height:124px; background-position: -219px -1080px}
.part2-tips1 {width:135px; height:116px; background-position: -813px -142px}
.part2-tit1 {width:430px; height:204px; background-position: -373px -10px}
.part3-nav1 {width:156px; height:66px; background-position: -554px -1254px}
.part3-nav1.cur {width:156px; height:66px; background-position: -813px -388px}
.part3-nav2 {width:156px; height:66px; background-position: -560px -1406px}
.part3-nav2.cur {width:156px; height:66px; background-position: -554px -1330px}
.part3-nav3 {width:205px; height:66px; background-position: -745px -540px}
.part3-nav3.cur {width:205px; height:66px; background-position: -745px -464px}
.part3-nav4 {width:156px; height:66px; background-position: -775px -1118px}
.part3-nav4.cur {width:156px; height:66px; background-position: -560px -1482px}
.part4-sn {width:353px; height:343px; background-position: -10px -10px}
.part4-tit {width:430px; height:204px; background-position: -373px -224px}
.part5-head {width:203px; height:203px; background-position: -10px -834px}
.part5-tit1 {width:430px; height:204px; background-position: -305px -438px}
.part6-nav1 {width:156px; height:66px; background-position: -720px -1270px}
.part6-nav1.cur {width:156px; height:66px; background-position: -775px -1194px}
.part6-nav2 {width:156px; height:66px; background-position: -726px -1422px}
.part6-nav2.cur {width:156px; height:66px; background-position: -726px -1346px}
.part6-nav3 {width:156px; height:66px; background-position: -472px -1574px}
.part6-nav3.cur {width:156px; height:66px; background-position: -726px -1498px}
.part6-next {width:96px; height:49px; background-position: -886px -1270px}
.part6-prev {width:96px; height:49px; background-position: -638px -1574px}
.part6-text1 {width:325px; height:56px; background-position: -219px -1214px}
.part6-text2 {width:325px; height:56px; background-position: -219px -1280px}
.part6-text3 {width:325px; height:56px; background-position: -219px -1346px}
.part6-tips1 {width:136px; height:122px; background-position: -813px -10px}
.part6-tips2 {width:141px; height:110px; background-position: -813px -268px}
.part6-tit1 {width:430px; height:204px; background-position: -304px -652px}
.part6-tit2 {width:284px; height:198px; background-position: -10px -626px}
.part7-tit {width:430px; height:204px; background-position: -223px -866px}
.share-box {width:285px; height:253px; background-position: -10px -363px}

html,body { width: 100%; height: 100%; overflow: hidden; position: relative;}
.ldpic { position: absolute; left: 0; top: 0; z-index: -1; visibility: hidden; opacity: 0;}
.page_main { width: 100%; height: 100%; overflow: hidden !important; left: 0; top: 0; background: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/bg.jpg) no-repeat center center; background-size: 100% auto;}
.homebg .page_main { background: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/bg1.jpg) no-repeat center center; background-size: 100% auto;}
.wrapper { width: 100%; height: 100%; overflow: hidden; position: relative; z-index: 1; overflow: hidden;}
.page-arrow { width: 1452px; height: 0; position: absolute; z-index: 99; left: 82px; top: 50%; margin-top: 248px;}
.page-arrow a { display: block; width: 214px; height: 92px; padding-top: 20px;}
.page-arrow a.page-prev-box { float: left; display: none;}
.page-arrow a.page-next-box { float: right; margin-top: -8px;-webkit-animation: scaleAnim 2s linear infinite;animation: scaleAnim 2s linear infinite;}
.page-arrow a.page-next-box em {}
@-webkit-keyframes scaleAnim{  
   0%{ -webkit-transform:scale(1,1);}
   50%{ -webkit-transform:scale(1.2,1.2);}
   100%{ -webkit-transform:scale(1,1);}  
 }
@keyframes scaleAnim{  
   0%{ transform:scale(1,1);}
   50%{ transform:scale(1.2,1.2);}
   100%{ transform:scale(1,1);}  
 }

.page-arrow a:active { transform: scale(.9);}
.page-arrow a em { display: block; margin: 0 auto;}
.page-share-box { width: 106px; height: 127px; position: absolute; z-index: 70; left: 1380px; top: 50%; margin-top: -304px;}
.page-share-box a { display: block;}
@keyframes arrowPrev {
  0%{ transform: translate(0,0);}
  50%{ transform: translate(0,-10px);}
  100%{ transform: translate(0,0);}
}
@keyframes arrowNext {
  0%{ transform: translate(0,0);}
  50%{ transform: translate(0,10px);}
  100%{ transform: translate(0,0);}
}
@keyframes arrowLeft {
  0%{ transform: translate(0,0);}
  50%{ transform: translate(-10px,0);}
  100%{ transform: translate(0,0);}
}
@keyframes arrowRight {
  0%{ transform: translate(0,0);}
  50%{ transform: translate(10px,0);}
  100%{ transform: translate(0,0);}
}
.page-nav-box { display: none; width: 286px; height: auto; position: absolute; z-index: 72; right: 0; top: 50%; margin-top: -200px; overflow: hidden;}
.page-nav-box a {display: block; margin-bottom: -3px; margin-left: -16px;}
.page-nav-box a.page-nav1.cur { pointer-events: none;}
.layer { background: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/layer.png) no-repeat 0 0; width: 1624px; height: 1216px; position: absolute; left: 0; top: 50%; margin-top: -608px; z-index: 98; pointer-events: none; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);}
.page-part { position: absolute; left: 0; top: 50%; width: 100%; height: 750px; margin-top: -375px; visibility: hidden; z-index: 2;}
.part1-left { float: left; background: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/part1-left.png) no-repeat 0 0; width: 604px; height: 751px; margin: 50px 0 0 160px; position: relative; pointer-events: none;}
.part1-dq { background: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/part1-dq.png) no-repeat 0 0; width: 98px; height: 97px; position: absolute; left: -12px; top: 626px;}
.part1-right { position: relative; float: left; width: 840px; height: 100%;}
.part1-title { position: absolute; z-index: 5; background: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/part1-title.png) no-repeat 0 0; width: 432px; height: 205px; left: -33px; top: 300px;}
.part1-nav-box { position: relative; z-index: 2; background: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/part1-nav-box.png) no-repeat 0 0; width: 716px; height: 649px; margin: 60px 0 0 -67px;}
.part1-nav-box a { display: block; float: left;}
.part1-nav-btn1 { width: 276px; height: 199px; margin-top: 30px;}
.part1-nav-btn2 { width: 439px; height: 199px; margin-top: 30px;}
.part1-nav-btn3 { width: 270px; height: 208px; margin-top: 9px; margin-left: 417px;}
.part1-nav-btn4 { width: 340px; height: 191px; margin-top: 12px; margin-left: 47px;}
.part1-nav-btn5 { width: 288px; height: 191px; margin-top: 12px;}
.part2-left { float: left; background: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/part2-left.png) no-repeat 0 0; width: 714px; height: 632px; margin: 61px 0 0 0; position: relative; z-index: 2; pointer-events: none;}
.part2-right { float: left; background: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/part2-box.png) no-repeat 0 0; width: 713px; height: 500px; margin: 118px 0 0 -103px; position: relative; z-index: 1;}
.part2-tit1 { position: absolute; z-index: 3; top: -93px; right: -84px;}
.part2-tips1 { position: absolute; z-index: 9; bottom: -46px; right: -61px;}
.part2-gif-box { width: 670px; height: 446px; overflow: hidden; padding: 25px 0 0 21px; position: relative;}
.part2-gif-box img { display: block; width: 100%;}
.part2-text { position: absolute; right: 0; bottom: 0; display: none;}
.part2-text p { color: #4291c5; font-size: 20px; line-height: 30px; padding: 58px 0 0 110px;}
.part2-text p span { color: #cc7312;}
.part2-tab-box { width: 120%; margin-left: -10%; font-size: 0; text-align: center; padding-top: 42px;}
.part2-tab-box a { display: inline-block; vertical-align: top; margin: 0 5px;}
.part3 .part2-left { background: none;}
.part3-left-pic { background: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/part3-left-pic.png) no-repeat 0 0; width: 630px; height: 632px; margin-left: 127px;}
.part3-text1,.part3-text2 { right: -34px;}
/*part4*/
.part4-box { margin: 62px 0 0 224px; background: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/part4-box.png) no-repeat 0 0; width: 1091px; height: 681px; position: relative;}
.part4-tit { position: absolute; z-index: 4; top: -37px; left: 748px; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);}
.part4-sn { position: absolute; z-index: 3; top: 326px; left: 782px; transform: scale(.7); transform-origin: right bottom;}
.part4-swiper { width: 338px; height: 193px; overflow: hidden; border: 5px solid #3cd9c1; position: absolute; left: 734px; top: 104px;}
.part4-swiper li { float: left; width: 338px; height: 193px;}
.part4-swiper img { display: block; width: 100%;}
.part4-pagination { width: 716px; position: absolute; left: 0; top: 281px; text-align: right;}
.part4-pagination span { opacity: 1; width: 13px; height: 13px; border-radius: 50%; margin-left: 16px; background-color: #66b7aa;}
.part4-pagination span.swiper-pagination-bullet-active { background-color: #276c61;}
.part4-gif-box { position: absolute; z-index: 1; left: 566px; top: 344px; overflow: hidden; width: 506px; height: 239px; border: 5px solid #4596d4;}
.part4-gif-box img { display: block; width: 100%;}
/*part5*/
.part5-box { margin: 42px 0 0 212px; background: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/part5-box.png) no-repeat 0 0; width: 1108px; height: 660px; position: relative;}
.part5-tit1 { position: absolute; z-index: 4; top: -18px; left: 847px;}
.part5-head { position: absolute; z-index: 3; top: 226px; left: 926px;}
.part5-gif-box { position: absolute; z-index: 1; left: 878px; top: 400px; width: 220px; height: 212px; border: 5px solid #86b3e3;}
.part5-gif-box img { display: block; width: 100%;}
/*part6*/
.part6-box { margin: 113px 0 0 258px; background: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/part6-box.png) no-repeat 0 0; width: 1057px; height: 589px; position: relative;}
.part6-tit1 { position: absolute; z-index: 4; top: -88px; left: 714px;}
.part6-tit2 { position: absolute; z-index: 4; top: -37px; left: 46px;}
.part6-tab-box { position: absolute; z-index: 9; left: 3px; top: 253px; width: 156px;}
.part6-tab-box a { display: block; margin-bottom: 22px;}
.part6-gif-box { margin: 0 0 84px 211px; width: 802px; height: 452px; position: relative; top: 58px;}
.part6-gif-box img { display: block; width: 100%;}
.part6-tips1 { position: absolute; left: 139px; top: -94px; pointer-events: none;}
.part6-tips2 { position: absolute; right: -53px; bottom: -69px; pointer-events: none;}
.part6-bottom { width: 802px; height: 56px; margin-left: 211px; font-size: 0; text-align: center;}
.part6-bottom span,.part6-bottom a { display: inline-block; vertical-align: top;}
.part6-bottom span { width: 325px; height: 56px; margin: 0 2px 0 10px;}
.part6-bottom span em { display: none;}
.part6-bottom a { margin-top: 6px;}
/*part5*/
.part7-box { margin: 108px 0 0 253px; background: url(//game.gtimg.cn/images/jk/act/a20221125monsterinvasion/part7-box.png) no-repeat 0 0; width: 1080px; height: 612px; position: relative;}
.part7-tit { position: absolute; top: -88px; left: 719px; z-index: 2;}
/*share*/
.pop_share_layer { position: absolute; left: 50%; top: 50%; z-index: 100; background-color: rgba(0,0,0,0.6); width: 100%; height: 100%; display: none; transform: translate3d(-50%,-50%,0); -webkit-transform: translate3d(-50%,-50%,0);}
.share-box { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 10;}

body.resize0 .page_main { left: 32px;}
body.resize1 .page_main { top: -20px;}
body.resize0 .pop_share_layer { margin-top: 46px;}
body.resize1 .pop_share_layer { margin-top: 28px;}