@font-face{font-family:Roboto-Regular;src:url(../font/Roboto-Regular.ttf) format("truetype");font-style:normal}
@font-face{font-family:BebasNeue;src:url(../font/BebasNeue.ttf) format("truetype");font-style:normal}
@font-face{font-family:zihun143hao-Medium;src:url(../font/字魂143号-正酷超级黑-Medium.ttf) format("truetype");font-style:normal}
@font-face{font-family:zihun143hao-Regular;src:url(../font/字魂143号-正酷超级黑-Regular.ttf) format("truetype");font-style:normal}
.cube{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;-ms-perspective:1000;perspective:1000;-webkit-transform:translateZ(0);transform:translateZ(0)}
.img_100{width:100%;height:100%;padding:0;border:0}
.btn{background-color:transparent;outline:0;padding:0;border:none;cursor:pointer}
body{width:7.5rem;height:100%;margin:0 auto;background-color:#000}
.wrapper{width:100%;height:100%;position:relative;opacity:0}
.nav-switch{width:.56rem;height:.56rem;position:absolute;top:.3rem;right:.38rem;z-index:99;cursor:pointer}
.nav-switch-off,.nav-switch-on{width:100%;height:100%;position:absolute;top:0;left:0;cursor:pointer;-webkit-transition:all .3s;transition:all .3s}
.nav-switch-off{opacity:0}
.nav-switch.cur .nav-switch-off{opacity:1}
.nav-switch.cur .nav-switch-on{opacity:0}
.nav{background:url(../images/topbar/bg.jpg) no-repeat 0 0/7.5rem 15rem;width:100%;height:100%;position:absolute;top:-100%;left:0;z-index:98;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transition:all .5s;transition:all .5s;overflow:hidden}
.nav.cur{-webkit-transform:translateY(100%);transform:translateY(100%)}
.nav::after{content:"";background:url(../images/topbar/bg_img.png) no-repeat 0 0/100% 100%;width:7.5rem;height:3.83rem;position:absolute;bottom:0;left:0;z-index:-1}
.nav-con{width:7.5rem;height:9rem}
.nav-list{width:7.5rem;height:5.2rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.nav-list li{text-align:center;cursor:pointer}
.nav-list li span{font-size:.32rem;color:#fff;opacity:.3;-webkit-transition:all .3s;transition:all .3s;position:relative}
.nav-list li.cur span{opacity:1;text-shadow:0 0 5px #ffd270}
.nav-list li span::before{content:"";background:url(../images/topbar/icon.png) no-repeat 0 0/100% 100%;width:.52rem;height:.53rem;position:absolute;top:50%;left:-.5rem;margin-top:-.265rem;opacity:0;-webkit-animation:navIconAni 1s linear infinite;animation:navIconAni 1s linear infinite}
.nav-list li.cur span::before{opacity:1}
@-webkit-keyframes navIconAni{
0%{-webkit-transform:translateX(0);transform:translateX(0)}
50%{-webkit-transform:translateX(-.1rem);transform:translateX(-.1rem)}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes navIconAni{
0%{-webkit-transform:translateX(0);transform:translateX(0)}
50%{-webkit-transform:translateX(-.1rem);transform:translateX(-.1rem)}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}
.nav-download-1{width:4.92rem;height:.7rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:.78rem auto 0}
.nav-download-1 a{width:2.35rem;height:.7rem}
.nav-download-2{width:4.92rem;height:.65rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:.28rem auto 0}
.nav-download-2 a{width:2.35rem;height:.65rem}
.nav-sns{width:4rem;height:.65rem;margin:.63rem auto 0;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.nav-sns a{width:.65rem;height:.65rem}
.pageSwiper{width:100%;height:100%}
.s1{background:url(../images/1/wap-bg.jpg) no-repeat 0 0/7.5rem 15rem;width:7.5rem;height:100%;position:relative;overflow:hidden}
.s1-kv{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1}
.s1-kv video{width:100%;height:100%}
.s1-con{width:100%;height:100%;position:absolute;top:0;left:0;z-index:2}
.s1-logo{width:1.79rem;height:.9rem;position:absolute;top:.1rem;left:.3rem}
.s1::before{content:"";background:url(../images/1/mengban.png) no-repeat 0 0/7.5rem 15rem;width:100%;height:100%;position:absolute;top:0;left:0;z-index:2}
.s1-play{width:1.52rem;height:1.65rem;position:absolute;bottom:3.4rem;left:50%;margin-left:-.76rem}
@-webkit-keyframes playAni{
0%{-webkit-transform:scale(1);transform:scale(1)}
50%{-webkit-transform:scale(.98);transform:scale(.98)}
100%{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes playAni{
0%{-webkit-transform:scale(1);transform:scale(1)}
50%{-webkit-transform:scale(.98);transform:scale(.98)}
100%{-webkit-transform:scale(1);transform:scale(1)}
}
.s1-line{width:5.97rem;height:.58rem;position:absolute;bottom:7.11rem;left:50%;margin-left:-2.985rem}
.s1-slogan{width:6.47rem;height:2.17rem;position:absolute;bottom:5rem;left:50%;margin-left:-3.09rem}
.s1-download{width:6.24rem;height:.55rem;position:absolute;bottom:1.48rem;left:50%;margin-left:-3.12rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.s1-download a{width:2rem;height:.55rem}
.s1-arrow{width:.61rem;height:.53rem;position:absolute;bottom:.52rem;left:50%;margin-left:-.305rem;pointer-events:none;-webkit-animation:s1ArrowAni 1s infinite;animation:s1ArrowAni 1s infinite}
@-webkit-keyframes s1ArrowAni{
0%{-webkit-transform:translateY(0);transform:translateY(0)}
50%{-webkit-transform:translateY(.2rem);transform:translateY(.2rem);opacity:.6}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes s1ArrowAni{
0%{-webkit-transform:translateY(0);transform:translateY(0)}
50%{-webkit-transform:translateY(.2rem);transform:translateY(.2rem);opacity:.6}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
.s2{background:url(../images/2/bg.jpg) no-repeat 0 0/7.5rem 15rem;width:7.5rem;height:100%;position:relative;overflow:hidden}
#lightBox1{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;pointer-events:none}
#lightBox1 #c1{width:100%;height:100%}
.s2-title{width:3.6rem;height:1.54rem;margin-top:.4rem;margin-left:.5rem}
.s2-picBox{width:5.6rem;height:3.1rem;margin:-.2rem auto 0;position:relative;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border:1px solid #fff}
.s2-swiper{width:100%;height:100%}
.s2-pic-img{width:100%;height:100%;position:absolute;top:0;left:0;z-index:2}
.s2-picBox a::before{content:"";width:100%;height:100%;background-image:-webkit-linear-gradient(90deg,#0c214299 0,transparent 50%);position:absolute;top:0;left:0;z-index:3}
.s2-pic-info{width:5.18rem;position:absolute;bottom:.2rem;left:50%;margin-left:-2.59rem;z-index:4}
.s2-pic-type{display:block;width:.86rem;height:.26rem}
.s2-pic-type.event{background:url(../images/2/type_event.png?v1) no-repeat 0 0/100% 100%}
.s2-pic-type.notice{background:url(../images/2/type_notice.png) no-repeat 0 0/100% 100%}
.s2-pic-type.update{background:url(../images/2/type_update.png) no-repeat 0 0/100% 100%}
.s2-pic-title{width:100%;margin-top:.2rem;color:#fff;font-size:.22rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;word-break:break-all}
.s2-pagination{bottom:-.55rem!important}
.s2-pagination .swiper-pagination-bullet{background-color:transparent!important;opacity:.5!important;background:url(../images/2/dot.png) no-repeat 0 0/.77rem .37rem;width:.2rem;height:.2rem;background-position:0 -.08rem;border-radius:0!important}
.s2-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:.38rem;height:.36rem;background-position:-.4rem 0;-webkit-transform:translateY(.08rem);transform:translateY(.08rem);opacity:1!important}
.s2-tab{width:6.5rem;height:.7rem;border-bottom:1px solid #62707e;position:relative;margin:.78rem auto 0}
.s2-tab ul{width:6.22rem;height:.7rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:relative}
.s2-tab ul li{width:1.02rem;height:.7rem;line-height:.7rem;color:#273949;font-family:zihun143hao-Medium;font-size:.4rem;cursor:pointer;-webkit-transition:all .3s;transition:all .3s}
.s2-tab ul::after{content:"";width:1.02rem;height:2px;background-color:#fff;position:absolute;bottom:0;left:0;-webkit-transition:all .5s;transition:all .5s}
.s2-tab ul.tab2::after{-webkit-transform:translateX(1.74rem);transform:translateX(1.74rem)}
.s2-tab ul.tab3::after{-webkit-transform:translateX(3.48rem);transform:translateX(3.48rem)}
.s2-tab ul.tab4::after{-webkit-transform:translateX(5.22rem);transform:translateX(5.22rem)}
.s2-tab ul li.cur{text-shadow:0 0 5px #ffd270;color:#fff}
.s2-list{margin:.2rem auto 0;width:6.5rem;height:3.66rem}
.s2-list ul{display:none;width:100%;height:100%;-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.s2-list ul.cur{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}
.s2-list ul a{width:100%;height:.7rem;-webkit-transition:background .3s;transition:background .3s;cursor:pointer;padding:0 .1rem;border:1px solid transparent;position:relative;margin:.1rem 0}
.s2-list-title{width:100%;color:#273949;font-size:.26rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;word-break:break-all}
.s2-list ul a div{width:3.6rem;height:.26rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;overflow:hidden;position:absolute;left:.1rem;bottom:0}
.s2-list-type{display:inline-block;width:.86rem;height:.26rem}
.s2-list-type.event{background:url(../images/2/type_event.png?v1) no-repeat 0 0/100% 100%}
.s2-list-type.notice{background:url(../images/2/type_notice.png) no-repeat 0 0/100% 100%}
.s2-list-type.update{background:url(../images/2/type_update.png) no-repeat 0 0/100% 100%}
.s2-list-time{display:inline-block;height:.26rem;line-height:.26rem;color:#54616e;margin-left:.2rem;font-size:.2rem;font-family:Roboto-Regular}
.s2-more{display:block;width:2.68rem;height:.62rem;margin:.5rem auto 0;-webkit-box-shadow:0 0 20px #ffd270;box-shadow:0 0 20px #ffd270;cursor:pointer}
.s3{width:100%;height:100%}
.s3-vBox{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1}
.s3-v{width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0;z-index:1;-webkit-transition:all 1s;transition:all 1s;opacity:0}
.s3-v.cur{opacity:1;z-index:2}
.s3-v1{background:url(../images/3/Artas/bg.jpg) no-repeat 0 0/7.5rem 15rem}
.s3-v2{background:url(../images/3/Omar/bg.jpg) no-repeat 0 0/7.5rem 15rem}
.s3-v3{background:url(../images/3/Luke/bg.jpg) no-repeat 0 0/7.5rem 15rem}
#lightBox2{width:100%;height:100%;position:absolute;top:0;left:0;z-index:3;pointer-events:none}
#lightBox2 #c2{width:100%;height:100%}
.s3-bgAni{width:7.5rem;height:100%;position:absolute;top:0;left:0;z-index:2}
.s3-bgAni-1{width:7.42rem;height:6.37rem;position:absolute;top:2.3rem;left:50%;margin-left:-3.71rem;z-index:1;-webkit-animation:bgAni1 10s linear infinite;animation:bgAni1 10s linear infinite;opacity:.5}
@-webkit-keyframes bgAni1{
0%{-webkit-transform:rotate(0);transform:rotate(0)}
25%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}
50%{-webkit-transform:rotate(0);transform:rotate(0)}
75%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
100%{-webkit-transform:rotate(0);transform:rotate(0)}
}
@keyframes bgAni1{
0%{-webkit-transform:rotate(0);transform:rotate(0)}
25%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}
50%{-webkit-transform:rotate(0);transform:rotate(0)}
75%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
100%{-webkit-transform:rotate(0);transform:rotate(0)}
}
.s3-bgAni-2{width:4.58rem;height:4.58rem;position:absolute;top:3.2rem;left:50%;margin-left:-2.29rem;-webkit-transform-origin:center center;transform-origin:center center;z-index:2;-webkit-animation:bgAni2 20s linear infinite;animation:bgAni2 20s linear infinite;opacity:.5}
@-webkit-keyframes bgAni2{
0%{-webkit-transform:rotate(0);transform:rotate(0)}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@keyframes bgAni2{
0%{-webkit-transform:rotate(0);transform:rotate(0)}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
.s3-bgAni-3{width:5.36rem;height:5.11rem;position:absolute;top:3rem;left:50%;margin-left:-2.68rem;-webkit-transform-origin:center center;transform-origin:center center;z-index:2;-webkit-animation:bgAni3 2s infinite;animation:bgAni3 2s infinite}
@-webkit-keyframes bgAni3{
0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
50%{opacity:.7;-webkit-transform:scale(1.02);transform:scale(1.02)}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes bgAni3{
0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
50%{opacity:.7;-webkit-transform:scale(1.02);transform:scale(1.02)}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
.s3-con{width:100%;height:100%;position:relative;z-index:3}
.s3-title{width:3.64rem;height:1.54rem;position:absolute;top:.48rem;left:.5rem;pointer-events:none}
.s3-swiper{width:100%;height:100%;overflow:visible!important}
.s3-swiper-next::after,.s3-swiper-prev::after{display:none}
.s3-swiper-prev{background:url(../images/3/prev.png) no-repeat 0 0/100% 100%;width:1.02rem;height:1.47rem;left:.1rem;margin-top:5rem}
.s3-swiper-next{background:url(../images/3/next.png) no-repeat 0 0/100% 100%;width:1.02rem;height:1.47rem;right:.1rem;margin-top:5rem}
.s3-swiper .swiper-slide{-webkit-transition-duration:1s!important;transition-duration:1s!important}
.s3-left-type{width:1.19rem;height:1.37rem;position:absolute;top:1.46rem;left:.5rem;z-index:2;-webkit-transform:translateX(-4rem);transform:translateX(-4rem);opacity:0;-webkit-transition:all .6s;transition:all .6s}
.s3-swiper .swiper-slide.swiper-slide-active .s3-left-type{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}
.s3-left-type img{height:100%}
.s3-left-name{width:3.64rem;height:.81rem;position:absolute;top:7.7rem;left:.5rem;z-index:2;-webkit-transform:translateX(-4rem);transform:translateX(-4rem);opacity:0;-webkit-transition:all .6s;transition:all .6s}
.s3-swiper .swiper-slide.swiper-slide-active .s3-left-name{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}
.s3-left-name img{height:100%}
.s3-mid-role{position:absolute;pointer-events:none;z-index:1;-webkit-transform:translateX(4rem);transform:translateX(4rem);opacity:0;-webkit-transition:all 1s;transition:all 1s}
.s3-swiper .swiper-slide.swiper-slide-active .s3-mid-role{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}
canvas{pointer-events:none}
.s3-mid-role canvas{width:100%;height:100%;position:relative;z-index:2}
.s3-mid-role.Artas{width:6.75rem;height:9rem;top:1.3rem;left:50%;margin-left:-2.7rem}
.s3-mid-role.Artas::before{content:"";background:url(../images/3/Artas/Artas_shadow.png) no-repeat 0 0/100% 100%;width:6.75rem;height:9rem;position:absolute;top:0;left:0;z-index:1}
.s3-mid-role.Omar{width:10.12rem;height:8.64rem;top:1rem;left:50%;margin-left:-4rem}
.s3-mid-role.Omar::before{content:"";background:url(../images/3/Omar/Omar_shadow.png) no-repeat 0 0/100% 100%;width:10.12rem;height:9.08rem;position:absolute;top:0;left:0;z-index:1}
.s3-mid-role.Luke{width:7.5rem;height:8.25rem;top:1.6rem;left:50%;margin-left:-3.4rem}
.s3-mid-role.Luke::before{content:"";background:url(../images/3/Luke/Luke_shadow.png) no-repeat 0 0/100% 100%;width:7.5rem;height:8.25rem;position:absolute;top:0;left:0;z-index:1}
.s3-left-title{width:2.55rem;height:.47rem;position:absolute;top:8.58rem;left:.5rem;z-index:2;-webkit-transform:translateX(-4rem);transform:translateX(-4rem);opacity:0;-webkit-transition:all .6s;transition:all .6s}
.s3-swiper .swiper-slide.swiper-slide-active .s3-left-title{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}
.s3-left-title img{height:100%}
.s3-tab{width:6.5rem;height:1.37rem;position:absolute;top:10.26rem;left:50%;margin-left:-3.25rem;z-index:10;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.s3-tab-more{background:url(../images/3/more.png) no-repeat 0 0/100% 100%;width:1.38rem;height:1.37rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;position:relative}
.s3-tab-more span{color:#fff;font-family:BebasNeue;font-size:.34rem;letter-spacing:1px;text-align:center;-webkit-transition:all .3s;transition:all .3s}
.s3-tab-more:hover span{text-shadow:0 0 5px #ffd270}
.borderAni em{width:100%;height:100%;position:absolute;top:0;left:0;pointer-events:none}
.borderAni em i:first-child{width:.2rem;height:.2rem;border-top:1px solid #fff;border-right:1px solid #fff;position:absolute;top:-.15rem;right:-.15rem;-webkit-transform:translate(-.15rem,.15rem);transform:translate(-.15rem,.15rem);opacity:0;-webkit-transition:all .3s;transition:all .3s}
.borderAni em i:nth-child(2){width:.2rem;height:.2rem;border-bottom:1px solid #fff;border-right:1px solid #fff;position:absolute;bottom:-.15rem;right:-.15rem;-webkit-transform:translate(-.15rem,-.15rem);transform:translate(-.15rem,-.15rem);opacity:0;-webkit-transition:all .3s;transition:all .3s}
.borderAni em i:nth-child(3){width:.2rem;height:.2rem;border-bottom:1px solid #fff;border-left:1px solid #fff;position:absolute;bottom:-.15rem;left:-.15rem;-webkit-transform:translate(.15rem,-.15rem);transform:translate(.15rem,-.15rem);opacity:0;-webkit-transition:all .3s;transition:all .3s}
.borderAni em i:nth-child(4){width:.2rem;height:.2rem;border-top:1px solid #fff;border-left:1px solid #fff;position:absolute;top:-.15rem;left:-.15rem;-webkit-transform:translate(.15rem,.15rem);transform:translate(.15rem,.15rem);opacity:0;-webkit-transition:all .3s;transition:all .3s}
.borderAni.cur em i{-webkit-transform:translate(0,0);transform:translate(0,0);opacity:1}
.s3-tab ul{width:4.77rem;height:1.37rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-webkit-align-items:flex-end;-moz-box-align:end;-ms-flex-align:end;align-items:flex-end}
.s3-tab ul li{width:1.38rem;height:1.37rem;position:relative;border:1px solid #fff;-webkit-transition:all .3s;transition:all .3s;cursor:pointer}
.s3-tab ul li.cur{height:2.1rem}
.s3-tab ul li .s3-tab-item{width:100%;height:100%;position:relative;overflow:hidden}
.s3-tab ul li .s3-tab-item .s3-tab-role{width:1.38rem;height:2.1rem;position:absolute;top:0;left:0;z-index:1}
.s3-tab ul li .s3-tab-item::before{content:"";width:100%;height:100%;background-image:-webkit-linear-gradient(90deg,#b068db 0,transparent 50%);position:absolute;bottom:0;left:0;z-index:2;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}
.s3-tab ul li.cur .s3-tab-item::before{opacity:1}
.s3-tab ul li .s3-tab-item .s3-tab-type{width:.32rem;height:.32rem;position:absolute;top:.04rem;left:.02rem;z-index:3}
.s3-tab ul li .s3-tab-item .s3-tab-job{width:1.03rem;height:.27rem;position:absolute;bottom:.02rem;left:50%;margin-left:-.515rem;z-index:3;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s;text-align:center}
.s3-tab ul li .s3-tab-item .s3-tab-job img{height:100%}
.s3-tab ul li.cur .s3-tab-job,.s3-tab ul li:hover .s3-tab-job{opacity:1}
.s3-tab-sss{width:.51rem;height:.46rem;position:absolute;top:-.1rem;right:-.1rem;z-index:3;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}
.s3-tab ul li.cur .s3-tab-sss{opacity:1}
.s4{background:url(../images/4/bg.jpg) no-repeat 0 0/7.5rem 15rem;width:100%;height:100%}
#lightBox3{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;pointer-events:none}
#lightBox3 #c3{width:100%;height:100%}
.s4-title{width:6.4rem;height:1.4rem;margin-top:.4rem;margin-left:.5rem}
.s4-swiper{width:6.17rem;height:4.58rem;margin:1.54rem auto 0}
.s4-swiper .swiper-slide{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center}
.s4-swiper .swiper-slide .s4-img{width:6.17rem;height:3.47rem}
.s4-pagination .swiper-pagination-bullet{background-color:transparent!important;opacity:.5!important;background:url(../images/2/dot.png) no-repeat 0 0/.77rem .37rem;width:.2rem;height:.2rem;background-position:0 -.08rem;border-radius:0!important}
.s4-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:.38rem;height:.36rem;background-position:-.4rem 0;-webkit-transform:translateY(.08rem);transform:translateY(.08rem);opacity:1!important}
.s4-dayan{width:4.02rem;height:6rem;position:absolute;top:7.36rem;left:.64rem;pointer-events:none;z-index:3}
.s4-ray{width:6.91rem;height:6.29rem;position:absolute;top:3rem;left:.3rem;pointer-events:none;z-index:3}
.s4-pageNum{background:url(../images/4/pageNum.png) no-repeat 0 0/100% 100%;width:1.42rem;height:1.22rem;position:absolute;top:2.62rem;right:.3rem;z-index:4}
.s4-pageNum span{font-size:.68rem;font-family:BebasNeue;color:#fff;position:absolute;top:.16rem;left:.2rem}
.s4-pageNum em{font-size:.28rem;font-family:BebasNeue;color:#fff;position:absolute;top:.75rem;left:.9rem}
.s5{width:100%;height:100%}
.s5-title{width:3.62rem;height:1.54rem;margin-top:.4rem;margin-left:.5rem}
.s5-tab{width:4rem;height:5.4rem;margin:1.4rem auto 0;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transform:scale(1.3);transform:scale(1.3);position:relative}
.s5-tab a{width:4rem;height:2.2rem;border:1px solid #fff;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;position:relative}
.s5-tab a .s5-tab-item{width:100%;height:100%;-webkit-filter:brightness(.4);filter:brightness(.4)}
.s5-tab-icon{width:2.34rem;height:1.28rem;position:absolute;top:.4rem;left:50%;margin-left:-1.17rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}
.s5-tab-imgBox .s5-tab-icon span{background:url(../images/5/icon_img.png) no-repeat 0 0/100% 100%;width:.64rem;height:.63rem}
.s5-tab-vBox .s5-tab-icon span{background:url(../images/5/icon_v.png) no-repeat 0 0/100% 100%;width:.64rem;height:.63rem}
.s5-tab-more{width:100%;height:.44rem;color:#fff;line-height:.44rem;text-transform:uppercase;font-size:.2rem;position:absolute;bottom:-.44rem;left:0}
.s5-tab-more span{width:100%;height:.46rem;color:#fff;line-height:.46rem;font-size:.2rem;position:absolute;bottom:0;left:0}
.s5-tab-more::after{content:"";background:url(../images/5/icon.png) no-repeat 0 0/2.66rem .02rem;width:2.66rem;height:.02rem;position:absolute;bottom:0;left:0}
.s5-tab-imgBox.borderAni em,.s5-tab-vBox.borderAni em{opacity:.5;-webkit-animation:borderAni 1s infinite;animation:borderAni 1s infinite;-webkit-transform-origin:center center;transform-origin:center center}
@-webkit-keyframes borderAni{
0%{-webkit-transform:scale(1);transform:scale(1)}
50%{-webkit-transform:scale(.95);transform:scale(.95)}
100%{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes borderAni{
0%{-webkit-transform:scale(1);transform:scale(1)}
50%{-webkit-transform:scale(.95);transform:scale(.95)}
100%{-webkit-transform:scale(1);transform:scale(1)}
}
.s5-tab-imgBox.borderAni em i,.s5-tab-vBox.borderAni em i{opacity:1}
.s5-bgbox{width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1;overflow:hidden}
.s5-bgbox .s5-bg-img{background:url(../images/5/bg.jpg) no-repeat 0 0/7.5rem 15rem;width:100%;height:100%;position:absolute;top:0;left:0;-webkit-transform:scale(1.1);transform:scale(1.1);opacity:0;-webkit-transition:all 2s;transition:all 2s;-webkit-transform-origin:center;transform-origin:center}
.s5-bgbox .s5-bg-img.cur{-webkit-transform:scale(1);transform:scale(1);opacity:1}
.footer{background:#24282f url(../images/footer/bg.png) no-repeat 0 0/100% 100%;width:7.5rem;height:6rem;overflow:hidden}
.footer::after{content:"";background:url(../images/footer/bg_img.png) no-repeat 0 0/100% 100%;width:100%;height:2.75rem;position:absolute;bottom:0;left:0;z-index:-1}
.footer-logo{width:1.79rem;height:.9rem;margin:.3rem auto 0}
.footer-sns{width:4.2rem;height:.65rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:.3rem auto 0}
.footer-sns a{width:.65rem;height:.65rem}
.footer-download{width:5.92rem;height:.5rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:.34rem auto 0}
.footer-download a{width:1.8rem;height:.5rem}
.footer-link{width:5.5rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:.34rem auto 0}
.footer-link a{text-transform:uppercase;color:#fff;opacity:.5;font-size:.18rem}
.footer-goTop{width:1.05rem;height:1.14rem;position:absolute;bottom:.48rem;right:.3rem;z-index:2}
.footer-goTop::before{content:"";background:url(../images/footer/goTop_border.png) no-repeat 0 0/100% 100%;width:1.05rem;height:1.14rem;position:absolute;top:0;left:0}
.footer-goTop::after{content:"";background:url(../images/footer/goTop_icon.png) no-repeat 0 0/100% 100%;width:.46rem;height:.43rem;position:absolute;top:50%;left:50%;margin-left:-.23rem;margin-top:-.215rem;-webkit-animation:goTopAni 1s infinite;animation:goTopAni 1s infinite}
@-webkit-keyframes goTopAni{
0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
50%{-webkit-transform:translateY(.05rem);transform:translateY(.05rem);opacity:.7}
100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
}
@keyframes goTopAni{
0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
50%{-webkit-transform:translateY(.05rem);transform:translateY(.05rem);opacity:.7}
100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
}
.loading{width:100%;height:100%;background-color:#000;position:fixed;top:0;left:0;z-index:9999;opacity:0}
.loading-con{width:5rem;height:5rem;position:absolute;top:50%;left:50%;margin-left:-2.5rem;margin-top:-2.5rem}
.loading-ani{width:2.7rem;height:2.7rem;margin:0 auto}
.loading-progress{font-family:BebasNeue;font-size:1.8rem;margin-top:.2rem;text-align:center;-webkit-background-clip:text;color:transparent;background-image:-webkit-linear-gradient(-90deg,#0f9fff33 0,transparent 90%)}
.goBack{width:.84rem;height:.96rem;position:absolute;top:.48rem;left:.48rem;cursor:pointer;z-index:99}
.sub-footer{position:absolute;bottom:-6rem;left:0;z-index:9;-webkit-transition:all .6s;transition:all .6s;overflow:visible}
.sub-footer.cur{-webkit-transform:translateY(-6rem);transform:translateY(-6rem)}
.footer-switch{width:1.14rem;height:1.2rem;background-color:#0006;position:absolute;top:-1.2rem;left:0}
.footer-switch::before{content:"";background:url(../images/news/open.png) no-repeat 0 0/100% 100%;width:.56rem;height:.61rem;position:absolute;top:50%;left:50%;margin-left:-.28rem;margin-top:-.305rem;opacity:1;-webkit-transition:all .3s;transition:all .3s;-webkit-animation:footerSwitchAni 1s infinite;animation:footerSwitchAni 1s infinite}
@-webkit-keyframes footerSwitchAni{
0%{-webkit-transform:translateY(0);transform:translateY(0)}
50%{-webkit-transform:translateY(.1rem);transform:translateY(.1rem)}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes footerSwitchAni{
0%{-webkit-transform:translateY(0);transform:translateY(0)}
50%{-webkit-transform:translateY(.1rem);transform:translateY(.1rem)}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
.footer-switch.cur::before{opacity:0}
.footer-switch::after{content:"";background:url(../images/news/close.png) no-repeat 0 0/100% 100%;width:.5rem;height:.49rem;position:absolute;top:50%;left:50%;margin-left:-.25rem;margin-top:-.245rem;opacity:0;-webkit-transition:all .3s;transition:all .3s}
.footer-switch.cur::after{opacity:1}
body{position:fixed;width:7.5rem;top:0;left:50%;margin-left:-3.75rem;overflow:hidden}
body[data-type=news]::before{content:"";width:100%;height:100%;background:url(../images/news/bg.jpg) no-repeat center 0/7.5rem 15rem;position:absolute;top:0;left:0;z-index:-1}
.news-wrapper{width:100%;height:100%;position:relative;overflow-y:auto}
.news-con{width:6.54rem;min-height:100%;margin:0 auto;padding:1.7rem 0;position:relative;z-index:1}
.news-tab{width:6.54rem;height:.7rem;border-bottom:1px solid #62707e;position:relative}
.news-tab ul{width:5.8rem;height:.7rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:relative}
.news-tab ul a{width:1.04rem;height:.7rem;line-height:.7rem;color:#273949;font-family:zihun143hao-Medium;font-size:.4rem;cursor:pointer;-webkit-transition:all .3s;transition:all .3s}
.news-tab ul a.cur{text-shadow:0 0 5px #ffd270;color:#fff;border-bottom:2px solid #fff}
.news-list{margin-top:.4rem;width:6.54rem}
.news-list ul{width:100%;height:100%}
.news-list ul a{display:block;width:100%;height:1.66rem;-webkit-transition:all .3s;transition:all .3s;padding:.18rem .1rem .18rem .15rem;margin-bottom:.35rem;border:1px solid #ffffff24;background-color:#ffffff24;position:relative}
.news-list-img{width:2.4rem;height:1.3rem;border:1px solid #fff;float:left}
.news-list-info{width:3.26rem;height:1.3rem;float:left;margin-left:.2rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:.1rem 0}
.news-list-title{width:100%;color:#273949;font-size:.22rem;word-break:break-all;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;-webkit-transition:all .3s;transition:all .3s}
.news-list ul a .news-list-item{width:3.6rem;height:.26rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;overflow:hidden;margin-top:.1rem}
.news-list-type{display:inline-block;width:.86rem;height:.26rem}
.news-list-type.event{background:url(../images/2/type_event.png?v1) no-repeat 0 0/100% 100%}
.news-list-type.notice{background:url(../images/2/type_notice.png) no-repeat 0 0/100% 100%}
.news-list-type.update{background:url(../images/2/type_update.png) no-repeat 0 0/100% 100%}
.news-list-time{display:inline-block;height:.26rem;line-height:.26rem;color:#54616e;margin-left:.2rem;font-size:.2rem;font-family:Roboto-Regular}
.news-list-more{width:.29rem;height:100%;float:right;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.news-list-more img{width:.29rem;height:.35rem}
body[data-type=detail]::before{content:"";width:100%;height:100%;background:url(../images/news/bg.jpg) no-repeat center 0/7.5rem 15rem;position:absolute;top:0;left:0;z-index:-1}
.detail-wrapper{width:100%;height:100%;position:relative;overflow-y:auto}
.detail-con{width:6.55rem;min-height:100%;margin:0 auto;padding:1.8rem 0;position:relative}
.detail-breadcrumb-box{width:100%;overflow:hidden}
.detail-breadcrumb{text-transform:uppercase;color:#273949;font-size:.24rem;float:right}
.detail-line{background:url(../images/detail/line.png) no-repeat 0 0/100% 100%;width:6.54rem;height:.03rem;margin-top:.1rem}
.detail-title{margin-top:.3rem;width:100%;text-transform:uppercase;color:#273949;font-size:.3rem;line-height:.48rem;font-weight:700;position:relative;padding-left:.5rem}
.detail-title::before{content:"";background:url(../images/detail/icon.png) no-repeat 0 0/100% 100%;width:.33rem;height:.38rem;position:absolute;top:50%;left:0;margin-top:-.19rem}
.detail-time{font-size:.2rem;color:#54616e;font-family:Roboto-Regular;margin-top:.3rem;padding-left:.5rem}
.detail-body{width:100%;margin-top:.3rem;font-size:.24rem;line-height:1.5;padding:0 .24rem 0 .5rem;color:#54616e;overflow:hidden;word-break:break-all}
.detail-body p{font-size:.24rem;line-height:1.5;color:#54616e}
.detail-body img{max-width:100%;margin:.3rem auto}
body[data-type=heroes]::before{content:"";width:100%;height:100%;background:url(../images/heroes/bg.jpg?v1) no-repeat center 0/7.5rem 15rem;position:absolute;top:0;left:0;z-index:-1}
.heroes-wrapper{width:100%;height:100%;position:relative;overflow-y:auto}
.heroes-con{width:6.54rem;min-height:100%;margin:0 auto;padding:1.76rem 0;position:relative}
.heroes-tab-raceBox{width:6.54rem;height:.72rem;overflow-y:hidden;overflow-x:auto}
.heroes-tab-race{width:6.54rem;height:.7rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}
.heroes-tab-race a{position:relative;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:2px solid transparent}
.heroes-tab-race a.cur{border-bottom:2px solid #fff}
.heroes-tab-race a .heroes-race-icon{display:block;width:.6rem;height:.6rem;position:relative;-webkit-transform:translateX(-.1rem);transform:translateX(-.1rem)}
.heroes-tab-race a .heroes-race-icon::before{content:"";background:url(../images/heroes/all_0.png) no-repeat 0 0/100% 100%;width:.6rem;height:.6rem;position:absolute;top:0;left:0;opacity:1;-webkit-transition:opacity .3s;transition:opacity .3s}
.heroes-tab-race a.heroes-all .heroes-race-icon::before{background-image:url(../images/heroes/all_0.png)}
.heroes-tab-race a.heroes-terran .heroes-race-icon::before{background-image:url(../images/heroes/terran_0.png)}
.heroes-tab-race a.heroes-atlas .heroes-race-icon::before{background-image:url(../images/heroes/atlas_0.png)}
.heroes-tab-race a.heroes-wenfyr .heroes-race-icon::before{background-image:url(../images/heroes/wenfyr_0.png)}
.heroes-tab-race a.heroes-void .heroes-race-icon::before{background-image:url(../images/heroes/void_0.png)}
.heroes-tab-race a.heroes-god .heroes-race-icon::before{background-image:url(../images/heroes/god_0.png)}
.heroes-tab-race a.cur .heroes-race-icon::before{opacity:0}
.heroes-tab-race a .heroes-race-icon::after{content:"";background:url(../images/heroes/all_1.png) no-repeat 0 0/100% 100%;width:.6rem;height:.6rem;position:absolute;top:0;left:0;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}
.heroes-tab-race a.heroes-all .heroes-race-icon::after{background-image:url(../images/heroes/all_1.png)}
.heroes-tab-race a.heroes-terran .heroes-race-icon::after{background-image:url(../images/heroes/terran_1.png)}
.heroes-tab-race a.heroes-atlas .heroes-race-icon::after{background-image:url(../images/heroes/atlas_1.png)}
.heroes-tab-race a.heroes-wenfyr .heroes-race-icon::after{background-image:url(../images/heroes/wenfyr_1.png)}
.heroes-tab-race a.heroes-void .heroes-race-icon::after{background-image:url(../images/heroes/void_1.png)}
.heroes-tab-race a.heroes-god .heroes-race-icon::after{background-image:url(../images/heroes/god_1.png)}
.heroes-tab-race a.cur .heroes-race-icon::after{opacity:1}
.heroes-tab-race a em{color:#273949;font-size:.42rem;line-height:.7rem;font-family:zihun143hao-Medium;-webkit-transform:translateX(-.14rem);transform:translateX(-.14rem);-webkit-transition:all .3s;transition:all .3s}
.heroes-tab-race a.cur em{text-shadow:0 0 5px #ffd270;color:#fff}
.heroes-tab-career{margin-top:-.02rem;width:100%;height:1.26rem;background-color:#ffffff1a;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:.2rem .34rem;border-top:1px solid #27394980}
.heroes-tab-career.hide{display:none}
.heroes-tab-career a{width:1.62rem;position:relative;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}
.heroes-tab-career a .checkbox{width:.16rem;height:.16rem;border:1px solid #ffffffb3;position:relative;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.heroes-tab-career a .checkbox::after{content:"";width:.06rem;height:.06rem;background-color:#ffffffb3;position:absolute;top:50%;left:50%;margin-left:-.03rem;margin-top:-.03rem;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}
.heroes-tab-career a.cur .checkbox::after{opacity:1}
.heroes-tab-career a .heroes-career-icon{width:.31rem;height:.31rem;margin-left:.1rem;opacity:.7}
.heroes-tab-career a span:last-child{color:#ffffffb3;font-size:.22rem;margin-left:.1rem}
.heroes-cards{width:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0 .2rem}
.heroes-cards li{width:1.6rem;height:2.1rem;cursor:pointer;margin-right:.66rem;margin-top:.6rem;position:relative}
.heroes-cards li:nth-child(3n){margin-right:0}
.heroes-cards li a{display:block;width:100%;height:100%;position:relative;border:.01rem solid #fff}
.heroes-cards-info{width:100%;height:.37rem;background-color:#000000b3;position:absolute;bottom:0;left:0;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;padding:0 .05rem}
.heroes-cards-career{width:.31rem;height:.31rem;background:url(../images/heroes/Vanguard.png) no-repeat 0 0/100% 100%}
.heroes-cards-career.Vanguard{background:url(../images/heroes/Vanguard.png) no-repeat 0 0/100% 100%}
.heroes-cards-career.Assassin{background:url(../images/heroes/Assassin.png) no-repeat 0 0/100% 100%}
.heroes-cards-career.Tank{background:url(../images/heroes/Tank.png) no-repeat 0 0/100% 100%}
.heroes-cards-career.Hunter{background:url(../images/heroes/Hunter.png) no-repeat 0 0/100% 100%}
.heroes-cards-career.Energy{background:url(../images/heroes/Energy.png) no-repeat 0 0/100% 100%}
.heroes-cards-career.Support{background:url(../images/heroes/Support.png) no-repeat 0 0/100% 100%}
.heroes-cards-name{width:1.15rem;height:.31rem;line-height:.31rem;color:#fff;font-size:.22rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;word-break:break-all;text-align:center}
.heroes-sss::after{content:"";background:url(../images/heroes/sss.png) no-repeat 0 0/100% 100%;width:.53rem;height:.5rem;position:absolute;top:-.1rem;right:-.1rem}
.hd-wrapper{width:100%;height:100%;position:relative;overflow-y:auto!important}
.hd-top{background-image:url(../images/heroes_detail/bg.jpg);background-color:#fff;background-repeat:no-repeat;background-position:center 0;background-size:7.5rem 19rem;width:100%;min-height:20rem;position:relative}
.hd-center{width:6.54rem;margin:0 auto;position:relative;border:1px solid transparent}
.hd-nameBox{position:absolute;top:4.1rem;left:0;z-index:2;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}
.hd-name{font-size:.7rem;letter-spacing:1px;color:#fff;position:absolute;top:5.38rem;left:0;z-index:2}
.hd-job{width:1.11rem;height:.81rem;position:absolute;top:4.56rem;left:0;z-index:2}
.hd-job.Vanguard{background:url(../images/heroes_detail/Vanguard.png) no-repeat 0 0/100% 100%}
.hd-job.Assassin{background:url(../images/heroes_detail/Assassin.png) no-repeat 0 0/100% 100%}
.hd-job.Tank{background:url(../images/heroes_detail/Tank.png) no-repeat 0 0/100% 100%}
.hd-job.Hunter{background:url(../images/heroes_detail/Hunter.png) no-repeat 0 0/100% 100%}
.hd-job.Energy{background:url(../images/heroes_detail/Energy.png) no-repeat 0 0/100% 100%}
.hd-job.Support{background:url(../images/heroes_detail/Support.png) no-repeat 0 0/100% 100%}
.hd-title{padding:0 .2rem 0 .1rem;height:.46rem;background-color:#00000033;overflow:hidden;position:absolute;top:6.26rem;left:0;z-index:2;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}
.hd-title span{width:.26rem;height:.29rem}
.hd-title p{color:#fff;font-size:.28rem;margin-left:.1rem;letter-spacing:1px}
.hd-vBox{background-image:url(../images/heroes_detail/v_bg.png);background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;width:3.6rem;height:1.8rem;margin-top:7.08rem;position:relative;cursor:pointer}
.hd-vBox .hd-play{width:.86rem;height:.91rem;position:absolute;top:50%;left:50%;margin-left:-.43rem;margin-top:-.455rem}
.hd-desc{width:4.62rem;color:#273949;font-family:Roboto-Regular;font-size:.24rem;line-height:.3rem;margin-top:.3rem}
.hd-sss{width:1.19rem;height:1.03rem;position:absolute;top:.72rem;right:0}
.hd-sss.hide{display:none}
.hd-bottom{width:100%;min-height:9.28rem;background-color:#ffffff80;position:absolute;top:15.03rem;left:0;opacity:0;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:all 1s;transition:all 1s;padding:0 .5rem}
.hd-bottom.cur{opacity:1;-webkit-transform:translateY(-5rem);transform:translateY(-5rem)}
.hd-skill-title{width:100%;color:#273949;font-size:.42rem;font-weight:700;margin-top:.7rem;padding-left:.5rem;position:relative;top:2rem;opacity:0;-webkit-transition:all 1s;transition:all 1s;-webkit-transform:translateY(0);transform:translateY(0)}
.hd-skill-title.cur{opacity:1;-webkit-transform:translateY(-2rem);transform:translateY(-2rem)}
.hd-skill-title::before{content:"";background:url(../images/heroes_detail/icon.png) no-repeat 0 0/.33rem .38rem;width:.33rem;height:.38rem;position:absolute;left:0;top:50%;margin-top:-.19rem}
.hd-skill-tab{margin-top:.52rem;width:100%;height:1.36rem;padding:0 .2rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;border-bottom:1px solid #27394980;position:relative;top:2rem;opacity:0;-webkit-transition:all 1s;transition:all 1s;-webkit-transform:translateY(0);transform:translateY(0)}
.hd-skill-tab.cur{opacity:1;-webkit-transform:translateY(-2rem);transform:translateY(-2rem)}
.hd-skill-tab::after{content:"";width:0;height:0;line-height:0;font-size:0;border-left:.1rem solid transparent;border-right:.1rem solid transparent;border-top:.1rem solid transparent;border-bottom:.1rem solid #27394980;position:absolute;bottom:0;left:0;-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s}
.hd-skill-tab.tab1::after{-webkit-transform:translateX(.5rem);transform:translateX(.5rem)}
.hd-skill-tab.tab2::after{-webkit-transform:translateX(2.3rem);transform:translateX(2.3rem)}
.hd-skill-tab.tab3::after{-webkit-transform:translateX(4rem);transform:translateX(4rem)}
.hd-skill-tab.tab4::after{-webkit-transform:translateX(5.8rem);transform:translateX(5.8rem)}
.hd-skill-tab li{width:.86rem;height:.86rem;cursor:pointer;position:relative;margin-right:.9rem}
.hd-skill-tab li:last-child{margin-right:0}
.hd-skill-tab li img{position:relative;z-index:2}
.hd-skill-tab li::before{content:"";background:url(../images/heroes_detail/cur_border.png) no-repeat 0 0/100% 100%;width:1.23rem;height:1.2rem;position:absolute;top:50%;left:50%;margin-top:-.6rem;margin-left:-.615rem;-webkit-transition:all .5s;transition:all .5s;-webkit-transform:scale(.2);transform:scale(.2);-webkit-transform-origin:center center;transform-origin:center center;z-index:1}
.hd-skill-tab li.cur::before{-webkit-transform:scale(1);transform:scale(1)}
.hd-skill-con{padding:.2rem 0 0;opacity:0;-webkit-transition:all 1s;transition:all 1s;-webkit-transform:translateY(2rem);transform:translateY(2rem)}
.hd-skill-con.cur{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
.hd-skill-con li{display:none}
.hd-skill-con li.cur{display:block}
.hd-skill-con .hd-skill-name{font-size:.36rem;font-weight:700;color:#273949}
.hd-skill-con .hd-skill-info{margin-top:.2rem;font-size:.22rem;font-family:Roboto-Regular;color:#54616e;line-height:2}
body[data-type=media_img]::before,body[data-type=media_v]::before{content:"";width:100%;height:100%;background:url(../images/media/bg.jpg) no-repeat 0 0/7.5rem 15rem;position:absolute;top:0;left:0;z-index:-1}
.media-wrapper{width:100%;height:100%;position:relative;overflow-y:auto;overflow-x:hidden}
.media-con{width:6.55rem;min-height:100%;margin:0 auto;padding:1.66rem 0}
.media-tab{width:100%;height:.7rem;border-bottom:1px solid #62707e;position:relative}
.media-tab ul{width:2.4rem;height:.7rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:relative}
.media-tab ul a{height:.7rem;line-height:.7rem;color:#273949;font-size:.36rem;cursor:pointer;-webkit-transition:all .3s;transition:all .3s;font-family:zihun143hao-Medium}
.media-tab ul a.cur{text-shadow:0 0 5px #ffd270;color:#fff;border-bottom:2px solid #fff}
.media-list{margin-top:.56rem;width:100%}
.media-list ul{width:100%;height:100%;position:relative}
body[data-type=media_img] .media-list ul li{height:3.34rem}
.media-wallpaper-img{width:100%;height:3.34rem;border:1px solid #fff;position:relative;cursor:pointer}
.media-wallpaper-img::after{content:"";background:url(../images/media/magnifyingGlass.png) no-repeat 0 0/100% 100%;width:.3rem;height:.3rem;position:absolute;top:50%;left:50%;margin-left:-.15rem;margin-top:-.15rem;opacity:.8}
.media-list ul{width:100%;position:relative;padding:0 .28rem}
.media-list ul li{width:100%;height:4.24rem;position:relative;margin-bottom:.3rem;cursor:pointer}
.media-v-img{width:100%;height:3.34rem;border:1px solid #fff;position:relative}
.media-v-img img.vImg{-webkit-filter:brightness(.7);filter:brightness(.7)}
.media-v-play{width:1.24rem;height:1.32rem;position:absolute;top:50%;left:50%;margin-left:-.62rem;margin-top:-.66rem}
.media-v-desc{padding:.1rem .1rem 0;color:#54616e;font-size:.27rem;word-break:break-all;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.dialog-mask{background-color:#000;border-top:1px solid #000;position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;z-index:-1}
.dialog-mask.on{-webkit-opacity:.8;-moz-opacity:.8;opacity:.8;z-index:9997}
.dialog{display:none;position:fixed;top:50%;left:50%;z-index:9999}
.dialog.on{display:block}
.dialog-v{width:7.5rem;height:4.16rem;margin-left:-3.75rem;margin-top:-2.08rem;background-color:#000}
.dialog-v .dialog-close{width:.61rem;height:.61rem;position:absolute;top:-1rem;right:.1rem}
.dialog-v .dialog-con{width:100%;height:100%;overflow:hidden;border:2px solid #fff;background-color:#000;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}
.dialog-v video{width:100%}
.dialog-img{width:7.5rem;height:4.24rem;margin-left:-3.75rem;margin-top:-2.12rem}
.dialog-img .dialog-close{width:.61rem;height:.61rem;position:absolute;top:-.8rem;right:.1rem;z-index:99}
.wallpaper-bigImg{width:100%;height:100%}
.wallpaper-bigImg-download{background:url(../images/media/download_icon2.png) no-repeat 0 0/100% 100%;width:.73rem;height:.72rem;position:absolute;bottom:-1rem;left:50%;margin-left:-.365rem}
.wallpaper-bigImg-download img{width:.36rem;height:.38rem;position:absolute;top:50%;left:50%;margin-left:-.18rem;margin-top:-.19rem;-webkit-animation:downloadAni 1s infinite;animation:downloadAni 1s infinite}
@-webkit-keyframes downloadAni{
0%{-webkit-transform:translateY(0);transform:translateY(0)}
50%{-webkit-transform:translateY(.05rem);transform:translateY(.05rem)}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes downloadAni{
0%{-webkit-transform:translateY(0);transform:translateY(0)}
50%{-webkit-transform:translateY(.05rem);transform:translateY(.05rem)}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}