.role_page{position:relative;width:100%;height:100vh}.role_page .role_container{position:absolute;width:100%;height:100%}.role_page .container{position:absolute;width:100%;height:100vh;overflow:hidden;transform:translateY(-5.9rem);opacity:0}.role_page .line{position:absolute;top:0;height:100%;width:auto}.role_page .line.line1{left:3.19rem}.role_page .line.line2{left:8.24rem}.role_page .line.line3{right:3.39rem}.role_page .transition_container{position:absolute;width:100%;height:100%;overflow:hidden;transform:translateX(.365rem)}.role_page .transition_container .slogan{position:absolute;height:8.34rem;width:auto;left:1.58rem;top:50%;transform:translateY(-50%)}.role_page .transition_container .text{position:absolute;color:#fff;transform-origin:top left;transform:translateY(2.32rem);left:5.43rem;top:calc(50% - 4.17rem);line-height:.65}.role_page .transition_container .text span{display:block;font-family:mf;font-size:1.08rem;white-space:nowrap;transform-origin:top left;transform:translateX(.18rem) scaleY(.6) rotate(90deg)}.role_page[data-lang=zh-TW] .transition_container .text span{transform:translateX(.18rem) scaleY(1) rotate(90deg);font-family:MPlus;font-weight:800;font-size:.88rem}.role_page[data-lang=en] .transition_container .text{line-height:.48rem}.role_page[data-lang=en] .transition_container .text span{transform:translateX(.4rem) scaleY(1) rotate(90deg);font-family:tomorrow;font-weight:700;font-size:.48rem;white-space:pre-line;text-transform:uppercase}.role_page[data-lang=ko] .transition_container .text{line-height:1;left:4.9rem}.role_page[data-lang=ko] .transition_container .text span{transform:translateX(0) scaleY(1) rotate(0);font-family:BlackHanSans;font-size:.98rem;white-space:unset;width:.85rem;line-height:.84rem}.role_page[data-lang=ko] .transition_container .text span b{display:block;margin-top:.4rem}.role_page[data-lang=ja] .transition_container .text{line-height:1;left:4.9rem}.role_page[data-lang=ja] .transition_container .text span{transform:translateX(0) scaleY(1) rotate(0);font-family:MPlus;font-size:.88rem;font-weight:800;white-space:unset;width:.88rem;line-height:.88rem}.role_page .transition_container .warn{position:absolute;left:4.9rem;bottom:calc(50% - 4.17rem)}.role_page .transition_container .warn span{display:block;color:#fff;font-family:tomorrow;font-size:.14rem;font-weight:400;line-height:.16rem;letter-spacing:.28px;text-transform:uppercase;transform-origin:top left;transform:rotate(90deg) translate(calc(-100% + .16rem),-100%)}.role_page .transition_container .pic_r{position:absolute;height:8.34rem;width:11.04rem;right:2.32rem;top:calc(50vh - 4.17rem);perspective:1000px}.role_page .transition_container .pic_r .pic_r_box{position:absolute;width:100%;height:100%;transition:transform 1s ease-out;transform-style:preserve-3d;will-change:transform}.role_page .transition_container .pic1{position:absolute;height:8.34rem;width:5.74rem;top:0;transform:translateY(3rem)}.role_page .transition_container .pic_r .pic2{position:absolute;top:0;right:0;height:3.65rem;width:4.45rem}.role_page .transition_container .pic_r .pic3{position:absolute;bottom:0;right:0;height:4.27rem;width:4.45rem;transform:translateY(1.49rem)}.role_page .transition_container .pic3 img.border{position:absolute;top:0;width:100%;height:100%}.role_page .transition_container .pic1 .box,.role_page .transition_container .pic2 .box,.role_page .transition_container .pic3 .box{position:absolute;top:0;width:100%;height:100%;overflow:hidden}.role_page .transition_container .pic1 .box_mask,.role_page .transition_container .pic2 .box_mask,.role_page .transition_container .pic3 .box_mask{position:relative;width:100%;height:100%}.role_page .transition_container .pic1 .box_mask{-webkit-mask-image:url(../img/role_pic1_mask.svg);mask-image:url(../img/role_pic1_mask.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.role_page .transition_container .pic2 .box_mask{-webkit-mask-image:url(../img/role_pic2_mask.svg);mask-image:url(../img/role_pic2_mask.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.role_page .transition_container .pic3 .box_mask{-webkit-mask-image:url(../img/role_pic3_mask.svg);mask-image:url(../img/role_pic3_mask.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.role_page .transition_container .pic1 img,.role_page .transition_container .pic2 img,.role_page .transition_container .pic3 img{position:relative;will-change:transform;width:auto;height:100%;transition:transform .3s ease-out}.role_page .transition_container .pic1:hover img,.role_page .transition_container .pic2:hover img,.role_page .transition_container .pic3:hover img{transform:scale(1.1)}.role_page .transition_container .pic3:hover img.border{transform:scale(1)}.role_page .transition_container .icon1{position:absolute;width:auto;height:.32rem;transform-origin:left top;transform:rotate(90deg) translateX(calc(-100% + 5.32rem));left:1.9rem;bottom:calc(50% - 4.17rem);opacity:.5}.role_page .icon2{position:absolute;width:.17rem;height:auto;top:1.72rem;right:.72rem;transform-origin:center center;transform:translateY(3rem)}.role_page .icon3{position:absolute;width:.17rem;height:auto;bottom:.72rem;right:.72rem;transform:translateY(3rem)}.role_page .label{position:absolute;opacity:.3;color:#fff;font-family:tomorrow;font-size:.11rem;font-weight:400;letter-spacing:.22px;text-transform:uppercase;right:.72rem;bottom:calc(50vh + .1rem);transform:translateY(3rem)}.role_page .transition_container .aser_text{position:absolute;display:flex;align-items:start;bottom:.72rem;right:1.085rem;transform:translateY(3rem)}.role_page .transition_container .aser_text img{display:block;width:.17rem;height:auto;margin-right:.08rem;margin-top:.01rem}.role_page .transition_container .aser_text span{display:block;color:#fff;font-family:tomorrow;font-size:.11rem;line-height:normal;letter-spacing:.22px;text-transform:uppercase}.role_page .circle{position:absolute;width:100%;height:100%;overflow:hidden;opacity:0}.role_page .circle .circle1,.role_page .circle .circle2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.role_page .circle .circle1{width:15.2rem;height:auto}.role_page .circle .circle2{width:18.24rem;height:auto}.role_page .main_container{position:absolute;width:100%;height:100%;overflow:hidden}.role_page .bg{position:absolute;width:100%;height:100%;background:url(../img/role_bg.png) no-repeat center bottom;background-size:cover;opacity:0}.role_page .main_container .system_on{position:absolute;right:.72rem;bottom:1.52rem;color:#595959;font-family:tomorrow;font-size:.12rem;font-weight:400;letter-spacing:.24px;text-transform:uppercase;transform:translateY(1rem);opacity:0}.role_page .main_container .system_on span{color:#fff}.role_page .main_container .tool_btn{position:absolute;left:13rem;bottom:1rem;display:flex;justify-content:flex-end;transform:translateY(1rem);opacity:0}.role_page .main_container .tool_btn a.play_btn{position:relative;width:.75rem;height:.75rem;margin-right:.8rem;overflow:hidden;background-repeat:no-repeat;background-position:center center;background-size:cover}.role_page .main_container .tool_btn a.play_btn.hide{display:none}.role_page .main_container .tool_btn a.play_btn.play1{background-image:url(../img/home_play_icon.svg)}.role_page .main_container .tool_btn a.play_btn.play2{background-image:url(../img/play_icon1.svg)}.role_page .main_container .tool_btn a.play_btn.play3{background-image:url(../img/play_icon2.svg)}.role_page .main_container .tool_btn a.play_btn span{position:absolute;bottom:0;display:flex;justify-content:center;align-items:center;width:100%;height:.22rem;background-color:#5cfcfc;color:#000;font-family:tomorrow;font-size:.12rem;font-weight:600;text-transform:uppercase;transform:translateY(calc(100% + 1px));transition:transform .3s ease-out;box-sizing:border-box}.role_page[data-lang=ja] .main_container .tool_btn a.play_btn span,.role_page[data-lang=ko] .main_container .tool_btn a.play_btn span,.role_page[data-lang=zh-TW] .main_container .tool_btn a.play_btn span{font-family:MPlus;font-weight:600}.role_page[data-lang=en] .main_container .tool_btn a.play_btn span{font-size:.1rem;line-height:.1rem;text-transform:capitalize;white-space:pre-line;height:.26rem;padding-left:.07rem;justify-content:start}.role_page .main_container .tool_btn a.play_btn:hover span{transform:translateY(0)}.role_page .main_container .tool_btn a.play_btn.play2 ul{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;list-style:none}.role_page .main_container .tool_btn a.play_btn.play2 ul li{width:.02rem;border-radius:1rem;background-color:#fff;margin-left:.015rem;margin-right:.015rem;transition:height .3s ease-out}.role_page .main_container .tool_btn a.play_btn.play2 ul li:nth-child(1){height:.04rem}.role_page .main_container .tool_btn a.play_btn.play2 ul li:nth-child(2){height:.08rem}.role_page .main_container .tool_btn a.play_btn.play2 ul li:nth-child(3){height:.18rem}.role_page .main_container .tool_btn a.play_btn.play2 ul li:nth-child(4){height:.12rem}.role_page .main_container .tool_btn a.play_btn.play2 ul li:nth-child(5){height:.12rem}.role_page .main_container .tool_btn a.play_btn.play2 ul li:nth-child(6){height:.04rem}.role_page .main_container .tool_btn a.play_btn.play2 ul li:nth-child(7){height:.12rem}.role_page .main_container .tool_btn a.play_btn.play2:hover ul li:nth-child(5){height:.06rem}.role_page .main_container .tool_btn a.play_btn.play2:hover ul li:nth-child(6){height:.18rem}.role_page .main_container .tool_btn a.play_btn.play2:hover ul li:nth-child(7){height:.04rem}.role_page .main_container .tool_btn a.play_btn.play2.an ul li:nth-child(1){animation:music1 .5s infinite}.role_page .main_container .tool_btn a.play_btn.play2.an ul li:nth-child(2){animation:music2 .6s infinite}.role_page .main_container .tool_btn a.play_btn.play2.an ul li:nth-child(3){animation:music3 .8s infinite}.role_page .main_container .tool_btn a.play_btn.play2.an ul li:nth-child(4){animation:music4 .6s infinite}.role_page .main_container .tool_btn a.play_btn.play2.an ul li:nth-child(5){animation:music5 .8s infinite}.role_page .main_container .tool_btn a.play_btn.play2.an ul li:nth-child(6){animation:music6 .5s infinite}.role_page .main_container .tool_btn a.play_btn.play2.an ul li:nth-child(7){animation:music7 .6s infinite}@keyframes music1{0%,100%{height:.08rem}50%{height:.04rem}}@keyframes music2{0%,100%{height:.04rem}50%{height:.08rem}}@keyframes music3{0%,100%{height:.18rem}50%{height:.09rem}}@keyframes music4{0%,100%{height:.12rem}50%{height:.04rem}}@keyframes music5{0%,100%{height:.12rem}50%{height:.04rem}}@keyframes music6{0%,100%{height:.04rem}50%{height:.08rem}}@keyframes music7{0%,100%{height:.12rem}50%{height:.06rem}}.role_page .b_line{position:absolute;top:calc(100vh - 2.68rem);width:100%;height:1px;background-color:rgba(255,255,255,.3);opacity:0}.role_page .main_container .desc{position:absolute;height:1.75rem;left:.72rem;bottom:0;transform:translateY(1rem);opacity:0}.role_page .main_container .desc .desc_box{position:absolute;width:3.85rem;opacity:0;transition:opacity .9s ease-out;cursor:pointer;pointer-events:none}.role_page .main_container .desc .desc_box::after{position:absolute;top:.08rem;right:-.19rem;content:"";width:.09rem;height:.08rem;background:url(../img/role_more_icon1.svg) no-repeat center center;background-size:cover;transition:background .3s ease-out,transform .3s ease-out}.role_page .main_container .desc .desc_box.noMore{cursor:default}.role_page .main_container .desc .desc_box.noMore::after{display:none}.role_page .main_container .desc .desc_box .desc_text{width:100%;color:#fff;font-family:tomorrow;font-size:.14rem;font-weight:500;line-height:.24rem;letter-spacing:.28px;height:.72rem;overflow:hidden;transition:height .3s ease-out,transform .3s ease-out;-ms-overflow-style:none;white-space:pre-line}.role_page[data-lang=ja] .main_container .desc .desc_box,.role_page[data-lang=ko] .main_container .desc .desc_box{width:4.5rem}.role_page[data-lang=en] .main_container .desc .desc_box{width:5.9rem}.role_page[data-lang=en] .main_container .desc .desc_box .desc_text,.role_page[data-lang=ja] .main_container .desc .desc_box .desc_text,.role_page[data-lang=ko] .main_container .desc .desc_box .desc_text,.role_page[data-lang=zh-TW] .main_container .desc .desc_box .desc_text{font-family:MPlus;font-weight:600}.role_page .main_container .desc .desc_box.active{opacity:1;pointer-events:unset}.role_page .main_container .desc .desc_box.more .desc_text{transform:translateY(-2.64rem);height:3.36rem;overflow-y:auto}.role_page .main_container .desc .desc_box.more::after{background:url(../img/role_more_icon2.svg) no-repeat center center;background-size:cover;transform:translateY(-2.64rem)}.role_page .main_container .desc .desc_box.more .desc_text::-webkit-scrollbar{display:none}.role_page .main_container .name_group{position:absolute;left:.72rem;bottom:3rem;height:.96rem;opacity:0}.role_page .main_container .name_group .item{position:absolute;transition:opacity .3s ease-out;display:flex;width:50vw;align-items:flex-end;opacity:0}.role_page .main_container .name_group .item.hide{opacity:0!important}.role_page .main_container .name_group .item.active{opacity:1}.role_page .main_container .name_group .item span{height:.96rem;color:#fff;font-family:tomorrow;font-size:.48rem;font-weight:500;line-height:.48rem;text-transform:uppercase;margin-right:.24rem;white-space:pre-line;display:flex;align-items:end}.role_page .main_container .name_group .item .icon_list{display:flex;align-items:flex-end;margin-bottom:.05rem;height:.24rem}.role_page .main_container .name_group .item .icon_list img{width:auto;height:.24rem;margin-right:.22rem}.role_page .main_container .info_group{position:absolute;left:13rem;bottom:3rem;transform:translateY(1.5rem);opacity:0}.role_page .main_container .info_group .info{position:absolute;opacity:0;display:flex;transform:translateY(-100%);transition:opacity .3s ease-out}.role_page .main_container .info_group .info.active{opacity:1}.role_page .main_container .info_group .info .item{display:flex;flex-direction:column;width:2.7rem}.role_page .main_container .info_group .info .item span{color:#9a9a9a;font-family:tomorrow;font-size:.16rem}.role_page[data-lang=ja] .main_container .info_group .info .item span,.role_page[data-lang=ko] .main_container .info_group .info .item span{font-family:MPlus;font-weight:500}.role_page .main_container .info_group .info .item p{color:#fff;font-family:OPPOSans;font-size:.16rem;line-height:.32rem;letter-spacing:-.32px;white-space:pre-line}.role_page[data-lang=en] .main_container .info_group .info .item p,.role_page[data-lang=ja] .main_container .info_group .info .item p,.role_page[data-lang=ko] .main_container .info_group .info .item p,.role_page[data-lang=zh-TW] .main_container .info_group .info .item p{font-family:MPlus;font-weight:500}.role_page .main_container .title_group{position:absolute;top:2.17rem;left:13rem;transform:translateY(3rem);opacity:0}.role_page .main_container .title_group .title{position:absolute;opacity:0;transition:opacity .9s ease-out}.role_page .main_container .title_group .title.active{opacity:1}.role_page .main_container .title_group .title .small_name{font-family:mf;font-size:.27rem;white-space:nowrap;color:#fff;transform-origin:center left;transform:scaleX(.6);line-height:.27rem;height:.27rem}.role_page .main_container .title_group .title .big_name{position:relative;display:flex;color:#fff;font-family:tomorrow;font-weight:600;height:1.14rem;margin-left:-.08rem;flex-direction:column}.role_page[data-lang=en] .main_container .title_group .title .big_name,.role_page[data-lang=ja] .main_container .title_group .title .big_name,.role_page[data-lang=ko] .main_container .title_group .title .big_name,.role_page[data-lang=zh-TW] .main_container .title_group .title .big_name{flex-direction:column}.role_page .main_container .title_group .title .big_name::before{position:absolute;content:"";background:url(../img/role_rect.svg) no-repeat center center;background-size:100% auto;width:.58rem;height:.88rem;top:.16rem;left:-.7rem}.role_page[data-lang=en] .main_container .title_group .title .big_name::before,.role_page[data-lang=ja] .main_container .title_group .title .big_name::before,.role_page[data-lang=ko] .main_container .title_group .title .big_name::before,.role_page[data-lang=zh-TW] .main_container .title_group .title .big_name::before{height:.7rem;top:.17rem}.role_page .main_container .title_group .title .big_name p{white-space:nowrap;font-size:1rem;line-height:1rem;text-transform:uppercase;height:auto}.role_page[data-lang=en] .main_container .title_group .title .big_name p,.role_page[data-lang=ja] .main_container .title_group .title .big_name p,.role_page[data-lang=ko] .main_container .title_group .title .big_name p,.role_page[data-lang=zh-TW] .main_container .title_group .title .big_name p{height:auto;font-size:1rem;line-height:1rem}.role_page .main_container .title_group .title .big_name span{font-size:.18rem;white-space:nowrap;margin-left:.12rem}.role_page .role_man{position:absolute;width:100%;height:100%;overflow:hidden;opacity:0}.role_page .role_man img{position:absolute;top:0;width:100%;height:auto;opacity:0;transition:opacity .9s ease-out}.role_page .role_man img.active{opacity:1}.role_page .bg_linear{position:absolute;width:100%;height:100%;background:linear-gradient(146deg,transparent 44.5%,#000 94.66%);opacity:0}.role_page .role_menu{position:absolute;top:1.6rem;padding-left:.72rem;transform:translateX(-2.1rem);transition:transform .3s ease-out;cursor:pointer;left:-7.2rem}.role_page .role_menu.goAn{animation:showOnceRoleMenu 1s ease-in-out forwards}@keyframes showOnceRoleMenu{0%,100%{transform:translateX(-1.95rem)}30%,60%{transform:translateX(0)}}.role_page .role_menu:hover,.role_page .role_menu:hover .list{transform:translateX(0)}.role_page .role_menu .title{display:flex;align-items:flex-end}.role_page .role_menu .title .box{position:relative;display:flex;padding:.08rem;justify-content:flex-end;align-items:center;background-color:#5cfcfc;width:1.36rem;height:.4rem;box-sizing:border-box}.role_page .role_menu .title .box span{position:absolute;left:.08rem;font-family:mf;font-size:.32rem;white-space:nowrap;color:#000;transform-origin:top left;transform:scaleX(.6);line-height:.24rem;width:.85rem}.role_page[data-lang=en] .role_menu .title .box,.role_page[data-lang=ja] .role_menu .title .box,.role_page[data-lang=ko] .role_menu .title .box{justify-content:center;flex-direction:row-reverse}.role_page[data-lang=zh-TW] .role_menu .title .box{justify-content:center}.role_page[data-lang=en] .role_menu .title .box span,.role_page[data-lang=ja] .role_menu .title .box span,.role_page[data-lang=ko] .role_menu .title .box span,.role_page[data-lang=zh-TW] .role_menu .title .box span{font-family:MPlus;font-weight:600;font-size:.12rem;position:relative;transform:scaleX(1);margin-left:.08rem;width:auto;left:unset}.role_page[data-lang=en] .role_menu .title .box span{text-transform:uppercase;white-space:pre-line;line-height:.12rem}.role_page[data-lang=zh-TW] .role_menu .title .box span{font-size:.2rem;margin-left:0;margin-right:.08rem}.role_page .role_menu .title .box .arrow{width:.2rem;height:auto}.role_page[data-lang=en] .role_menu .title .box .arrow,.role_page[data-lang=ja] .role_menu .title .box .arrow,.role_page[data-lang=ko] .role_menu .title .box .arrow,.role_page[data-lang=zh-TW] .role_menu .title .box .arrow{width:.14rem}.role_page .role_menu .title .box .rect1,.role_page .role_menu .title .box .rect2{position:absolute;width:.05rem;height:auto}.role_page .role_menu .title .box .rect1{left:-.5px;top:-.5px}.role_page .role_menu .title .box .rect2{right:-.5px;bottom:-.5px}.role_page .role_menu .title p{color:#fff;font-family:tomorrow;font-size:.11rem;line-height:.18rem;letter-spacing:.44px;text-transform:uppercase;margin-left:.75rem}.role_page .role_menu .list{position:relative;margin-top:.48rem;width:7.13rem;height:1.6rem;overflow:hidden;transform:translateX(-.95rem);transition:transform .3s ease-out}.role_page .role_menu .role_swiper{position:absolute;width:100%;height:100%}.role_page .role_menu .role_swiper .swiper-slide{width:1.43rem}.role_page .role_menu .role_swiper .swiper-slide a{display:block;position:relative;width:1.2rem;height:1.6rem;overflow:hidden}.role_page .role_menu .role_swiper .swiper-slide a .img{position:absolute;width:100%;height:100%;background-position:center top;background-size:auto 100%;background-repeat:no-repeat;transition:transform .3s ease-out}.role_page .role_menu .role_swiper .swiper-slide a span{position:absolute;box-sizing:border-box;width:100%;height:100%;border:2px solid #5cfcfc;top:0;opacity:0;transition:opacity .3s ease-out}.role_page .role_menu .role_swiper .swiper-slide.swiper-slide-active a span{opacity:1}.role_page .role_menu .role_swiper .swiper-slide a:hover .img{transform:scale(1.4)}.role_page .role_menu .list a.role_arrow{position:absolute;right:0;width:.4rem;height:.4rem;background-size:100% 100%;background-repeat:no-repeat;background-position:center center;background-image:url(../img/common_arrow_normal.svg);opacity:0;transition:opacity .3s ease-out;z-index:1}.role_page .role_menu .list:hover a.role_arrow{opacity:1}.role_page .role_menu .list a.role_arrow:hover{background-image:url(../img/common_arrow_hover.svg)}.role_page .role_menu .list a.role_arrow.prev{transform:scaleX(-1);top:.32rem}.role_page .role_menu .list a.role_arrow.next{bottom:.32rem}.role_page .role_mask{position:absolute;top:0;width:100%;height:100%;background:#000;opacity:0;pointer-events:none}.role_popup{position:fixed;width:100%;height:100%;overflow:hidden;top:0;background:url(../img/role_bg.png) no-repeat center bottom;background-size:cover;opacity:0;pointer-events:none}.role_popup.show{pointer-events:unset;opacity:1}.role_popup .role_pop_main_container{position:relative;width:100%;height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.role_popup .circle{position:absolute;width:100%;height:100%;overflow:hidden}.role_popup .circle .circle1,.role_popup .circle .circle2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.role_popup .circle .circle1{width:15.2rem;height:auto}.role_popup .circle .circle2{width:18.24rem;height:auto}.role_popup .icon{position:absolute;right:2.72rem;top:.63rem;width:1.22rem;height:auto}.role_popup .dot{position:absolute;right:1.68rem;top:.72rem;width:.17rem;height:auto;opacity:.5}.role_popup a.back_btn{position:absolute;left:1.04rem;top:.72rem;display:flex;align-items:center;padding:.12rem .16rem;background-color:transparent;transition:background-color .3s ease-out}.role_popup a.back_btn .back_icon{width:.1rem;height:.24rem;transform:scaleX(-1);background:url(../img/arrow_right_white.svg) no-repeat center center;background-size:cover;transition:background .3s ease-out}.role_popup a.back_btn span{height:.24rem;line-height:.24rem;margin-left:.24rem;color:#fff;font-family:tomorrow;font-size:.2rem;font-weight:500;text-transform:uppercase;transition:color .3s ease-out}.role_popup a.back_btn:hover{background-color:#5cfcfc}.role_popup a.back_btn:hover .back_icon{background:url(../img/arrow_right_white_hover.svg) no-repeat center center;background-size:cover}.role_popup a.back_btn:hover span{color:#000}.role_popup .desc_text{position:absolute;text-align:right;top:3.56rem;right:1.68rem;opacity:.6;color:#fff;font-family:tomorrow;font-size:.09rem;text-transform:capitalize}.role_popup .role_pop_title{position:absolute;display:flex;align-items:start;top:1.76rem;left:1.04rem}.role_popup .role_pop_title img{height:.8rem;width:auto}.role_popup .role_pop_title p{color:#fff;font-family:mf;font-size:1.08rem;transform-origin:left top;transform:scaleX(.6);margin-left:.12rem;height:.8rem;line-height:.8rem}.role_popup[data-lang=en] .role_pop_title p,.role_popup[data-lang=ja] .role_pop_title p,.role_popup[data-lang=ko] .role_pop_title p,.role_popup[data-lang=zh-TW] .role_pop_title p{transform:scaleX(1)}.role_popup[data-lang=ko] .role_pop_title p{font-family:BlackHanSans;font-size:1rem;line-height:100%}.role_popup[data-lang=ja] .role_pop_title p{font-family:MPlus;font-weight:800;font-size:1rem}.role_popup[data-lang=en] .role_pop_title p{font-family:tomorrow;font-weight:600;font-size:1rem;text-transform:uppercase}.role_popup[data-lang=zh-TW] .role_pop_title p{font-family:MPlus;font-weight:800;font-size:.88rem;line-height:.7rem}.role_popup .role_pop_title span{position:absolute;top:0;left:3.4rem;color:#fff;font-family:tomorrow;font-size:.18rem}.role_popup[data-lang=en] .role_pop_title span,.role_popup[data-lang=ja] .role_pop_title span,.role_popup[data-lang=ko] .role_pop_title span,.role_popup[data-lang=zh-TW] .role_pop_title span{position:relative;left:unset;top:unset;height:.13rem;line-height:.13rem;margin-left:.12rem}.role_popup .select_group{position:absolute;left:1.04rem;top:3.54rem;display:flex;z-index:1}.role_popup .select_group .select{display:flex;flex-direction:column;margin-right:.42rem}.role_popup .select_group .select a.show_box{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;width:2.4rem;height:.58rem;padding:0 .2rem;border-top:solid 1px #fff;border-bottom:solid 1px #fff;transition:border .3s ease-out,background .3s ease-out}.role_popup[data-lang=en] .select_group .select a.show_box,.role_popup[data-lang=ja] .select_group .select a.show_box,.role_popup[data-lang=ko] .select_group .select a.show_box,.role_popup[data-lang=zh-TW] .select_group .select a.show_box{width:3.24rem}.role_popup .select_group .select a.show_box:hover{border-top:solid 1px #5cfcfc;border-bottom:solid 1px #5cfcfc;background-color:#5cfcfc}.role_popup .select_group .select a.show_box:hover span{color:#000}.role_popup .select_group .select a.show_box:hover .arrow{background-image:url(../img/arrow_up_black.svg)}.role_popup .select_group .select a.show_box span{color:#fff;font-family:OPPOSans;font-size:.2rem;transition:color .3s ease-out}.role_popup[data-lang=en] .select_group .select a.show_box span,.role_popup[data-lang=ja] .select_group .select a.show_box span,.role_popup[data-lang=ko] .select_group .select a.show_box span,.role_popup[data-lang=zh-TW] .select_group .select a.show_box span{font-family:MPlus;font-weight:600;font-size:.14rem}.role_popup .select_group .select a.show_box .arrow{color:#fff;height:.1rem;width:.24rem;background-repeat:no-repeat;background-position:center center;background-image:url(../img/arrow_down_white.svg);background-size:100% auto;transition:transform .3s ease-out,background .3s ease-out}.role_popup .select_group .select.active a.show_box{background-color:#5cfcfc;border-top:solid 1px #5cfcfc;border-bottom:solid 1px #000}.role_popup .select_group .select.active a.show_box span{color:#000}.role_popup .select_group .select.active a.show_box .arrow{transform:scaleY(-1);background-image:url(../img/arrow_up_black.svg)}.role_popup .select_group .select .list{position:relative;width:100%;overflow:hidden;max-height:0;opacity:0;transition:max-height .3s ease-out,opacity .3s ease-out}.role_popup .select_group .select.active .list{opacity:1;max-height:1000px}.role_popup .select_group .select .list a.level_btn{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;width:2.4rem;height:.58rem;padding:0 .2rem;border-bottom:solid 1px #000;background-color:#5cfcfc;transition:opacity .3s ease-out}.role_popup[data-lang=en] .select_group .select .list a.level_btn,.role_popup[data-lang=ja] .select_group .select .list a.level_btn,.role_popup[data-lang=ko] .select_group .select .list a.level_btn,.role_popup[data-lang=zh-TW] .select_group .select .list a.level_btn{width:3.24rem}.role_popup .select_group .select .list a.level_btn:last-child{border-bottom:none}.role_popup .select_group .select .list a.level_btn .leve_icon{width:.4rem;height:.29rem;background-size:auto 100%;background-position:center left;background-repeat:no-repeat}.role_popup .select_group .select .list a.level_btn span{color:#000;font-family:OPPOSans;font-size:.2rem}.role_popup[data-lang=en] .select_group .select .list a.level_btn span,.role_popup[data-lang=ja] .select_group .select .list a.level_btn span,.role_popup[data-lang=ko] .select_group .select .list a.level_btn span,.role_popup[data-lang=zh-TW] .select_group .select .list a.level_btn span{font-family:MPlus;font-weight:500}.role_popup .select_group .select .list a.level_btn:hover{opacity:.8}.role_popup .role_list{position:relative;width:calc(100% - 2.72rem);margin-left:1.04rem;padding-top:4.64rem;overflow-x:hidden;display:grid;grid-template-columns:repeat(6,2.4rem);gap:.416rem;justify-content:space-between}.role_popup .role_list a{position:relative;display:block;width:100%;height:2.8rem;margin-bottom:.064rem;overflow:hidden}.role_popup .role_list a:last-child{margin-bottom:.48rem}.role_popup .role_list::-webkit-scrollbar{display:none}.role_popup .role_list a .pic{position:absolute;width:100%;height:100%;background-position:center center;background-size:cover;background-repeat:no-repeat;transition:transform .3s ease-out}.role_popup .role_list a:hover .pic{transform:scale(1.4)}.role_popup .role_list a .mask_black{position:absolute;width:100%;height:100%;background:rgba(0,0,0,.7);opacity:0;transition:opacity .3s ease-out}.role_popup .role_list a:hover .mask_black{opacity:1}.role_popup .role_list a .name{position:absolute;width:1.4rem;padding:.16rem;border-top:solid 1px #fff;border-bottom:solid 1px #fff;color:#fff;text-align:center;font-family:OPPOSans;font-size:.14rem;text-transform:uppercase;left:50%;bottom:.56rem;transform:translateX(-50%) translateY(.48rem);opacity:0;transition:opacity .3s ease-out,transform .3s ease-out}.role_popup .role_list a:hover .name{transform:translateX(-50%) translateY(0);opacity:1}@media only screen and (max-device-width:1366px) and (orientation:landscape){.role_page .main_container .info_group,.role_page .main_container .name_group{bottom:3.72rem}.role_page .main_container .desc{bottom:.72rem}.role_page .main_container .tool_btn{bottom:1.72rem}}