.role_page{background:url(../img/role_bg.png) no-repeat center bottom;background-size:cover}.role_page .role_xw{position:absolute;width:100%;height:100%;background:url(../img/role_xw.svg) no-repeat center bottom;background-size:cover;opacity:.2}.role_page .btm_content{position:absolute;width:100%;height:2.29rem;background-color:#235719;bottom:.32rem;display:flex;align-items:center;justify-content:center}.role_page .btm_content span{display:inline-block;opacity:.1;letter-spacing:-.04em;text-transform:uppercase;font-family:FZChao;font-size:2.045rem;line-height:1;white-space:nowrap}.role_page .slogan{position:absolute;width:2.84rem;height:.87rem;left:.56rem;bottom:7.08rem;bottom:calc(7.2rem - (9.84rem - 100vh)/ 2)}.role_page .slogan::before{content:"";position:absolute;top:.11rem;width:100%;height:100%;background:url(../img/role_slogan_shadow.svg) no-repeat center center;background-size:cover}.role_page .slogan::after{content:"";position:absolute;width:100%;height:100%;background:url(../img/role_slogan.svg) no-repeat center center;background-size:cover}.role_page .role_group{position:absolute;left:.56rem;bottom:1.2rem;bottom:calc(1.2rem - (9.84rem - 100vh)/ 2)}.role_page .role_group .tab_group{display:flex;align-items:flex-start}.role_page .role_group .tab_group .tab_btn{position:relative;margin-right:.16rem;display:flex;justify-content:center;align-items:center;width:1rem;height:.36rem}.role_page .role_group .tab_group .tab_btn::before{content:"";position:absolute;width:100%;height:100%;background:url(../img/role_tab_shadow.svg) no-repeat center center;background-size:cover;opacity:0;top:.06rem;transition:opacity .3s ease-in-out}.role_page .role_group .tab_group .tab_btn.active::before,.role_page .role_group .tab_group .tab_btn:hover::before{opacity:.8}.role_page .role_group .tab_group .tab_btn .btn_bg,.role_page .role_group .tab_group .tab_btn .btn_hover{position:absolute;width:100%;height:100%;background:url(../img/role_tab_primary.svg) no-repeat center center;background-size:cover}.role_page .role_group .tab_group .tab_btn .btn_hover{background:url(../img/role_tab_hover.svg) no-repeat center top;background-size:100% auto;opacity:0;transition:opacity .3s ease-in-out}.role_page .role_group .tab_group .tab_btn.active .btn_hover,.role_page .role_group .tab_group .tab_btn:hover .btn_hover{opacity:1}.role_page .role_group .tab_group .tab_btn span{position:relative;display:inline-block;font-family:FZChao;font-size:.18rem;color:#000;transition:color .3s ease-in-out}.role_page .role_group .tab_group .tab_btn.active span,.role_page .role_group .tab_group .tab_btn:hover span{color:#fff;z-index:0}.role_page .role_group .tab_group .tab_btn span::before{content:attr(data-text);position:absolute;left:0;top:0;z-index:-1;color:#000;-webkit-text-stroke:.04rem #000;opacity:0;transition:opacity .3s ease-in-out}.role_page .role_group .tab_group .tab_btn.active span::before,.role_page .role_group .tab_group .tab_btn:hover span::before{opacity:1}.role_page .role_group .roleSwiper{margin-top:.32rem;width:6.528rem;height:3.84rem;height:4rem}.role_page .role_group .roleSwiper .swiper-slide{width:100%;width:calc(100% + 1px)!important;height:100%;display:flex;flex-wrap:wrap}.role_page .role_group .roleSwiper .swiper-slide .role_item{position:relative;display:block;width:1.472rem;height:1.84rem;background-repeat:no-repeat;background-size:cover;background-position:center center;margin-right:.16rem;margin-bottom:.16rem}.role_page .role_group .roleSwiper .swiper-slide .role_item::before{content:"";position:absolute;width:100%;height:100%;background:url(../img/role_item_shadow.svg) no-repeat center center;background-size:cover;z-index:-1;top:.03rem;opacity:0;transition:opacity .3s ease-in-out}.role_page .role_group .roleSwiper .swiper-slide .role_item.active::before{opacity:.8}.role_page .role_group .roleSwiper .swiper-slide .role_item.level1{background-image:url(../img/role_item_bg1.svg)}.role_page .role_group .roleSwiper .swiper-slide .role_item.level2{background-image:url(../img/role_item_bg2.svg)}.role_page .role_group .roleSwiper .swiper-slide .role_item.level3{background-image:url(../img/role_item_bg3.svg)}.role_page .role_group .roleSwiper .swiper-slide .role_item .pic{position:absolute;width:calc(100% - .02rem);height:calc(100% - .02rem);mask-repeat:no-repeat;mask-position:left top;mask-size:1.472rem 1.84rem;display:flex;justify-content:center;align-items:flex-end}.role_page .role_group .roleSwiper .swiper-slide .role_item.level1 .pic{mask-image:url(../img/role_item_bg1.svg)}.role_page .role_group .roleSwiper .swiper-slide .role_item.level2 .pic{mask-image:url(../img/role_item_bg2.svg)}.role_page .role_group .roleSwiper .swiper-slide .role_item.level3 .pic{mask-image:url(../img/role_item_bg3.svg)}.role_page .role_group .roleSwiper .swiper-slide .role_item .pic img{width:100%;height:100%;object-fit:cover}.role_page .role_group .roleSwiper .swiper-slide .role_item .border{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-position:center center}.role_page .role_group .roleSwiper .swiper-slide .role_item.level1 .border{background-image:url(../img/role_item_border1.svg)}.role_page .role_group .roleSwiper .swiper-slide .role_item.level2 .border{background-image:url(../img/role_item_border2.svg)}.role_page .role_group .roleSwiper .swiper-slide .role_item.level3 .border{background-image:url(../img/role_item_border3.svg)}.role_page .role_group .roleSwiper .swiper-slide .role_item .num{position:absolute;display:inline-block;font-family:FZChao;font-size:.166rem;color:#fff;width:.39rem;text-align:center;z-index:0}.role_page .role_group .roleSwiper .swiper-slide .role_item .num::before{content:attr(data-text);position:absolute;left:0;top:0;z-index:-1;color:#000;-webkit-text-stroke:.04rem #000;width:100%;text-align:center}.role_page .role_group .roleSwiper .swiper-slide .role_item .num::after{content:attr(data-text);position:absolute;left:0;top:.02rem;z-index:-2;color:rgba(0,0,0,.8);-webkit-text-stroke:.04rem rgba(0,0,0,.8);width:100%;text-align:center}.role_page .role_group .roleSwiper .swiper-slide .role_item .en_text{position:absolute;left:.45rem;height:.24rem;width:1rem;display:flex;align-items:center;font-size:.0644rem;line-height:.0644rem;color:#ffcf27;text-transform:uppercase;letter-spacing:.08em}.role_page .role_group .tool_group{margin-top:.4rem;width:6.37rem;display:flex;justify-content:space-between;align-items:center}.role_page .role_group .tool_group .btn_group{display:flex}.role_page .role_group .tool_group .btn_group .arrow_btn{position:relative;width:.88rem;height:.36rem;margin-right:.16rem}.role_page .role_group .tool_group .btn_group .arrow_btn::before{content:"";position:absolute;top:.04rem;width:100%;height:100%;background-repeat:no-repeat;background-position:center center;background-size:cover;background-image:url(../img/arrow_btn_shadow.svg);transition:opacity .3s ease-in-out;opacity:0}.role_page .role_group .tool_group .btn_group .arrow_btn:hover::before{opacity:.8}.role_page .role_group .tool_group .btn_group .arrow_btn .rect{position:relative;width:100%;height:100%;background-repeat:no-repeat;background-position:center center;background-size:cover;background-image:url(../img/arrow_btn_primary.svg)}.role_page .role_group .tool_group .btn_group .arrow_btn.swiper-button-disabled{pointer-events:none}.role_page .role_group .tool_group .btn_group .arrow_btn.swiper-button-disabled .rect{background-image:url(../img/arrow_btn_disable.svg)}.role_page .role_group .tool_group .btn_group .arrow_btn.next_btn{transform:scaleX(-1)}.role_page .role_group .tool_group .count_group{font-size:.32rem;color:#fff}.role_page .role_group .tool_group .count_group .total{color:#b9b9b9}.role_page .role_detail{position:absolute;width:4.8rem;height:5.48rem;right:.56rem;bottom:1.1rem;bottom:calc(1.2rem - (9.84rem - 100vh)/ 2 + .11rem)}.role_page .role_detail .name_group{position:absolute;width:1.5rem;height:.48rem;display:flex;align-items:center;background:url(../img/role_name_bg.svg) no-repeat center center;background-size:cover}.role_page .role_detail .name_group .level{font-family:FZChao;font-size:.24rem;line-height:.18rem;color:#000;width:.42rem;text-align:center}.role_page .role_detail .name_group .name{font-family:FZChao;font-size:.18rem;line-height:1.2;color:#000;flex:1;text-align:center;margin-right:.05rem;white-space:nowrap}.role_page .role_detail .xy_pic{position:absolute;top:.06rem;left:1.66rem;width:.8rem;height:auto}.role_page .role_detail .info_group{position:relative;margin-top:.68rem;width:100%;display:flex;justify-content:space-between;padding-bottom:.4rem;border-bottom:solid .02rem rgba(35,87,25,.4)}.role_page .role_detail .info_group .box_item{display:flex;flex-direction:column}.role_page .role_detail .info_group .box_item span{margin-bottom:.08rem;font-size:.14rem;font-family:HONOR;font-weight:700;line-height:1.2;color:#000}.role_page .role_detail .info_group .box{position:relative;width:1.44rem;height:.55rem}.role_page .role_detail .info_group .box_item:nth-child(3) .box{width:1.68rem}.role_page .role_detail .info_group .box .box_bg{position:relative;width:100%;height:100%;background-position:center center;background-repeat:no-repeat;background-size:cover}.role_page .role_detail .info_group .box::before{content:"";position:absolute;top:.04rem;width:100%;height:100%;background:url(../img/info_box_shadow.svg) no-repeat center center;background-size:cover;opacity:.8}.role_page .role_detail .info_group .box_item:nth-child(3) .box::before{background:url(../img/info_box_shadow3.svg) no-repeat center center;background-size:cover}.role_page .role_detail .info_group .box_item:nth-child(1) .box .box_bg{background-image:url(../img/info_box_bg1.svg)}.role_page .role_detail .info_group .box_item:nth-child(2) .box .box_bg{background-image:url(../img/info_box_bg2.svg)}.role_page .role_detail .info_group .box_item:nth-child(3) .box .box_bg{background-image:url(../img/info_box_bg3.svg)}.role_page .role_detail .info_group .box .text{position:absolute;right:0;top:0;width:.9rem;height:100%;display:flex;justify-content:center;align-items:center;font-family:Bayon;font-size:.32rem;line-height:1.2;white-space:nowrap}.role_page .role_detail .info_group .box_item:nth-child(3) .box .text{font-family:FZChao;font-size:.24rem;width:1.14rem;letter-spacing:-.02em}.role_page .role_detail .introduce{position:relative;width:100%;margin-top:.4rem}.role_page .role_detail .introduce .text{display:flex;justify-content:space-between;align-items:center;height:.4rem}.role_page .role_detail .introduce .text .cn{font-family:FZChao;font-size:.18rem;height:.2rem;line-height:.2rem;color:#000}.role_page .role_detail .introduce .text .en_text{width:auto;height:.14rem;margin-left:.1rem}.role_page .role_detail .introduce .text .star_group{display:flex;align-items:center}.role_page .role_detail .introduce .text .star_group .line{width:1px;height:.19rem;background-color:#000;opacity:.5;margin-left:.15rem;margin-right:.15rem}.role_page .role_detail .introduce .text .star_group .star_box{display:flex;cursor:pointer}.role_page .role_detail .introduce .text .star_group.not .star_box{pointer-events:none}.role_page .role_detail .introduce .text .star_group .star_box .star{width:.28rem;height:.27rem;background:url(../img/star_primary.svg) no-repeat center center;background-size:cover;margin-left:.02rem}.role_page .role_detail .introduce .text .star_group .star_box.active .star{background:url(../img/star_active.svg) no-repeat center center;background-size:cover}.role_page .role_detail .introduce .text .en{font-family:DOSHI;font-style:normal;font-size:.2rem;line-height:.24rem;color:#2b5f17;text-transform:uppercase;margin-left:.1rem;opacity:.5}.role_page .role_detail .introduce .skills{margin-top:.16rem;display:flex;align-items:flex-start}.role_page .role_detail .introduce .skills .skill_btn{position:relative;width:.56rem;height:.56rem;border-radius:.56rem;margin-right:.24rem;display:flex;justify-content:center;align-items:center;transition:box-shadow .3s ease-in-out;pointer-events:none}.role_page .role_detail .introduce .skills .skill_btn img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:filter .3s ease-in-out}.role_page .role_detail .introduce .skills .skill_btn.active img,.role_page .role_detail .introduce .skills .skill_btn:hover img{filter:none}.role_page .role_detail .introduce .skills .skill_btn.active::before{z-index:-1;content:"";position:absolute;top:.04rem;width:100%;height:100%;border-radius:100%;background-color:rgba(0,0,0,.8)}.role_page .role_detail .introduce .skills .desc{flex:1;height:.56rem;display:flex;align-items:center;font-family:HONOR;font-weight:700;font-size:.16rem;line-height:.24rem;color:#000}.role_page .role_detail .guide{position:absolute;bottom:0;width:auto;height:.8rem}.role_page .show_role{position:absolute;left:8.54rem;bottom:.91rem}.role_page .show_role .circle{width:4.04rem;height:1.08rem}.role_page .show_role .rw_pic{position:absolute;left:-2.05rem;bottom:-.11rem;width:7.79rem;height:7.79rem}.role_page .show_role .rw_pic img{position:absolute;width:100%;height:100%;transition:opacity .6s ease-out,transform .6s ease-out}.role_page .show_role .rw_pic img.hide{opacity:0;transform:translateX(.56rem)}