.page1 .content,.page5 .wrap{position:relative}.page1 .content,.page1 .logo,.page2,.page3{width:1070px;margin:0 auto}.page4 .content .wrap .item img,.page4 .content .wrap .item span,.page5 .wrap .item .title img,.page5 .wrap .item .title span{vertical-align:middle}html{font-size:8vw}body{background-color:#050413}.bg{background:url(../image/video/bj.jpg) center top no-repeat}.page1{padding:70px 0;height:980px;background:url(../image/video/head.jpg) center top no-repeat}.page1 .img_title{position:absolute;top:187px;left:-80px}.page2 .img_title{display:block;margin:0 auto}.page2 .content{font-size:28px;color:#ddd;line-height:2;text-align:center}.page3 .img_title{display:block;margin:-105px 0 0 207px}.page3 .demo1{display:block;margin:-80px auto 0}.page3 .demo2{display:block;margin:272px auto 0}.page3 .demo3{display:block;margin:253px auto 0}.page4{margin:-35px auto 0}.page4 .img_title{display:block;margin:-105px auto 0}.page4 .content{height:675px;margin-top:-78px;background:url(../image/video/page4_bg.jpg) center top no-repeat}.page4 .content .bar{width:1000px;margin:0 auto;display:-ms-flexbox;display:flex}.page4 .content .wrap{-ms-flex:1;flex:1;padding:120px 30px;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap}.page4 .content .wrap .item{width:50%;margin-bottom:75px;font-size:32px;color:#fff}.page4 .content .wrap .item:last-of-type{margin-bottom:0}.page4 .content .wrap .item img{margin-right:30px}.page5{width:1070px;margin:0 auto}.page5 .img_title{display:block;margin:-15px auto -15px 109px}.page5 .wrap{width:1070px;margin:0 auto;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.page5 .wrap::after,.page5 .wrap::before{position:absolute;content:"";z-index:11}.page5 .wrap .item{width:50%;padding:75px 90px 100px;display:-ms-flexbox;display:flex}.page5 .wrap .item>img{margin-right:30px}.page5 .wrap .item .right{-ms-flex:1;flex:1}.page5 .wrap .item .title{color:#fff;font-size:32px;white-space:nowrap}.page5 .wrap .item .title img{margin-left:17px}.page5 .wrap .item .desc{margin-top:15px;font-size:24px;color:#FEFFFF}.page5 .wrap .item:nth-of-type(1){background:linear-gradient(to bottom right,#181825,#040412)}.page5 .wrap .item:nth-of-type(2){background:linear-gradient(to bottom left,#181825,#040412)}.page5 .wrap .item:nth-of-type(3){background:linear-gradient(to top right,#0f0f1c,#040412)}.page5 .wrap .item:nth-of-type(4){-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;font-size:50px;color:#fff}.page5 .wrap::before{display:block;top:50%;left:-26px;right:-26px;height:4px;margin-top:-2px;background:url(../image/game/hordiveline.png) no-repeat;background-size:100% 4px}.page5 .wrap::after{display:block;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:url(../image/game/verdiveline.png) no-repeat;background-size:4px 100%}.page6{width:1070px;margin:0 auto}.page6 .img_title{display:block;margin:-67px auto -50px 190px}.page6 .wrap{width:1070px;margin:110px auto 0;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between}.page6 .item{position:relative;width:445px;height:183px;border-radius:10px;padding:20px 60px;color:#fff;margin-bottom:88px}.page6 .item .title{font-size:32px;margin-bottom:15px}.page6 .item .desc{font-size:20px}.page6 .item .icon{position:absolute;width:120px;height:120px;border-radius:50%}.page6 .item:nth-child(1){background-color:#894564}.page6 .item:nth-child(1) .icon{bottom:-30px;right:-78px}.page6 .item:nth-child(2){background-color:#475da7}.page6 .item:nth-child(2) .icon{bottom:-30px;left:-78px}.page6 .item:nth-child(3){background-color:#555373}.page6 .item:nth-child(3) .icon{top:-30px;right:-80px}.page6 .item:nth-child(4){background-color:#456984}.page6 .item:nth-child(4) .icon{top:-30px;left:-80px}.page6 .item.processAnimate1{animation:processAnimate1 1s}.page6 .item.processAnimate2{animation:processAnimate2 1s}.page6 .item.processAnimate3{animation:processAnimate3 1s}.page6 .item.processAnimate4{animation:processAnimate4 1s}.page8{background:#116aec}@media screen and (max-width:700px){.page1{padding:.7rem 0;height:9.8rem;background-position:center top;background-size:19.2rem 100%}.page1 .logo{width:95vw;margin:0 auto}.page1 .logo img{width:3.72rem;height:.84rem}.page1 .content{width:95vw;margin:0 auto;position:relative}.page1 .img_title{position:absolute;width:6.42rem;height:2.26rem;top:1.6rem;left:-.5rem}.page2{width:95vw;margin:0 auto}.page2 .img_title{width:6.5rem;height:4.33rem;display:block;margin:0 auto}.page2 .content{font-size:14px;color:#ddd;line-height:1.5;text-align:center}.page3{width:95vw;margin:0 auto}.page3 .img_title{width:8.07rem;height:5.17rem;display:block;margin:-1.05rem 0 0 2.5rem}.page3 .demo1{width:100%;height:auto;display:block;margin-top:-.8rem}.page3 .demo2,.page3 .demo3{width:100%;height:auto;display:block;margin:2rem auto 0}.page4{margin:-.35rem auto 0}.page4 .img_title{display:block;width:8.07rem;height:5.15rem;margin-top:-1.05rem;margin-left:3rem}.page4 .content{height:6.75rem;margin-top:-.78rem;background:url(../image/video/page4_bg.jpg) center top no-repeat;background-size:19.2rem 6.75rem}.page4 .content .bar{width:90vw;margin:0 auto;display:-ms-flexbox;display:flex}.page4 .content .bar>img{width:3.66rem;height:6.05rem}.page4 .content .wrap{-ms-flex:1;flex:1;padding:1.2rem .3rem;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap}.page4 .content .wrap .item{width:50%;margin-bottom:.5rem;font-size:14px;color:#fff}.page4 .content .wrap .item:last-of-type{margin-bottom:0}.page4 .content .wrap .item img,.page4 .content .wrap .item span{vertical-align:middle}.page4 .content .wrap .item img{max-width:.4rem;max-height:.4rem;margin-right:.3rem}.page5{width:95vw;margin:0 auto}.page5 .img_title{display:block;width:9.06rem;height:5.05rem;margin:-.15rem auto -.15rem 2rem}.page5 .wrap{width:95vw;margin:0 auto;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.page5 .wrap .item{width:50%;height:125px;padding:.8rem .5rem;display:-ms-flexbox;display:flex}.page5 .wrap .item>img{max-width:.64rem;max-height:.64rem;margin-right:.3rem}.page5 .wrap .item .right{-ms-flex:1;flex:1}.page5 .wrap .item .title{color:#fff;font-size:16px;white-space:nowrap}.page5 .wrap .item .title img{width:1.62rem;height:.22rem;margin-left:.17rem;vertical-align:middle}.page5 .wrap .item .title span{vertical-align:middle}.page5 .wrap .item .desc{margin-top:.15rem;font-size:12px;color:#FEFFFF}.page5 .wrap .item:nth-of-type(1){background:linear-gradient(to bottom right,#181825,#040412)}.page5 .wrap .item:nth-of-type(2){background:linear-gradient(to bottom left,#181825,#040412)}.page5 .wrap .item:nth-of-type(3){background:linear-gradient(to top right,#0f0f1c,#040412)}.page5 .wrap .item:nth-of-type(4){-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;font-size:50px;color:#fff}.page5 .wrap::before{position:absolute;content:"";display:block;top:50%;left:-.26rem;right:-.26rem;height:1px;margin-top:-.02rem;background:url(../image/game/hordiveline.png) no-repeat;background-size:100% 1px;z-index:11}.page5 .wrap::after{position:absolute;content:"";display:block;left:50%;top:0;bottom:0;width:1px;margin-left:-.02rem;background:url(../image/game/verdiveline.png) no-repeat;background-size:1px 100%;z-index:11}.page6{width:95vw;margin:0 auto}.page6 .img_title{display:block;width:8.25rem;height:5.15rem;margin:-.67rem auto -.5rem 2.7rem}.page6 .wrap{width:95vw;margin:0 auto;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between}.page6 .item{position:relative;width:41vw;height:auto;border-radius:.1rem;padding:.2rem .6rem;color:#fff;margin-bottom:.88rem}.page6 .item .title{font-size:18px;margin-bottom:.15rem}.page6 .item .desc{font-size:12px;line-height:1.5}.page6 .item .icon{position:absolute;width:1.2rem;height:1.2rem;border-radius:50%}.page6 .item:nth-child(1){background-color:#894564}.page6 .item:nth-child(1) .icon{bottom:-.3rem;right:-.78rem}.page6 .item:nth-child(2){background-color:#475da7}.page6 .item:nth-child(2) .icon{bottom:-.3rem;left:-.78rem}.page6 .item:nth-child(3){background-color:#555373}.page6 .item:nth-child(3) .icon{top:-.3rem;right:-.8rem}.page6 .item:nth-child(4){background-color:#456984}.page6 .item:nth-child(4) .icon{top:-.3rem;left:-.8rem}.page6 .item.processAnimate1{animation:processAnimate1 1s}.page6 .item.processAnimate2{animation:processAnimate2 1s}.page6 .item.processAnimate3{animation:processAnimate3 1s}.page6 .item.processAnimate4{animation:processAnimate4 1s}}