.page[class*=study-] .role-menus.menus{z-index:10;position:fixed;top:var(--header-height);right:0;border-radius:0;border-bottom-left-radius:80%;--base-transform:translate(40%,-40%);--bg-width-1:75px;--bg-width-2:58px;--ul-deg:15deg;--ul-right:105px;--li-width:236px;width:calc(var(--ul-right)*0.725);height:calc(var(--ul-right)*0.725)}.page[class*=study-] .role-menus.menus .icons{width:auto;height:auto;position:absolute;top:0;right:0;transform:var(--base-transform);transition:transform .3s linear;cursor:pointer}.page[class*=study-] .role-menus.menus .icons .icon-1,.page[class*=study-] .role-menus.menus .icons .icon-2{border-radius:12px;transition:transform .45s linear;background-color:rgba(45,140,237,.14901960784313725);box-shadow:0 0 15px #2d70ae}.page[class*=study-] .role-menus.menus .icons .icon-1:after,.page[class*=study-] .role-menus.menus .icons .icon-1:before,.page[class*=study-] .role-menus.menus .icons .icon-2:after,.page[class*=study-] .role-menus.menus .icons .icon-2:before{content:"";display:block;position:absolute;top:50%;right:50%;transform:translate(50%,-50%);z-index:11;border-radius:50%;background-color:transparent}.page[class*=study-] .role-menus.menus .icons .icon-1:after,.page[class*=study-] .role-menus.menus .icons .icon-2:after{display:none}.page[class*=study-] .role-menus.menus .icons .icon-1{padding:4px;position:relative;z-index:9;transform:rotate(-45deg)}.page[class*=study-] .role-menus.menus .icons .icon-1:after,.page[class*=study-] .role-menus.menus .icons .icon-1:before{width:var(--bg-width-1);height:var(--bg-width-1);background-color:hsla(0,0%,100%,.25098039215686274)}.page[class*=study-] .role-menus.menus .icons .icon-2{padding:11px;position:absolute;top:50%;right:50%;transform:translate(50%,-50%) rotate(0deg)}.page[class*=study-] .role-menus.menus .icons .icon-2:after,.page[class*=study-] .role-menus.menus .icons .icon-2:before{width:var(--bg-width-2);height:var(--bg-width-2);background-color:hsla(0,0%,100%,.40784313725490196)}.page[class*=study-] .role-menus.menus .icons .tips{width:90px;height:90px;padding-top:16px;padding-right:16px;text-align:right;position:absolute;top:50%;right:50%;z-index:11;transform:var(--base-transform);border-radius:0}.page[class*=study-] .role-menus.menus .icons .tips img{width:50px;height:auto;padding:3px}.page[class*=study-] .role-menus.menus ul.characters{width:var(--li-width);display:grid;position:absolute;top:-425px;right:var(--ul-right);z-index:20;transition:all .5s linear}.page[class*=study-] .role-menus.menus ul.characters li{width:var(--li-width);height:50px;margin-top:5px;display:block;position:relative;z-index:100;transform:translate(0);transition:all .5s linear;border-radius:12px;border:2px solid #d1d1d1;background-color:rgba(45,140,237,.7490196078431373);overflow:hidden;opacity:0}.page[class*=study-] .role-menus.menus ul.characters li .characters-item{width:100%;height:100%;padding:0 15px 0 25px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.page[class*=study-] .role-menus.menus ul.characters li .characters-item p{font-size:20px;font-weight:400;font-family:PingFang SC Medium;color:#fff}.page[class*=study-] .role-menus.menus ul.characters li .characters-item span{margin-left:5px;position:relative;z-index:21}.page[class*=study-] .role-menus.menus ul.characters li .characters-item span .iconfont{display:flex}.page[class*=study-] .role-menus.menus ul.characters li .characters-item span .iconfont.blank{font-size:35px;color:#fff;position:relative;z-index:20}.page[class*=study-] .role-menus.menus ul.characters li .characters-item span .iconfont:not(.blank){font-size:29px;position:absolute;top:4px;left:3px;z-index:21}.page[class*=study-] .role-menus.menus.isspread{width:calc(var(--ul-right) + 1px);height:calc(var(--ul-right) + 1px);border-bottom-left-radius:0}.page[class*=study-] .role-menus.menus.isspread .icons{transform:var(--base-transform) scale(1.25)}.page[class*=study-] .role-menus.menus.isspread .icons .icon-1{padding:5px;transform:rotate(-90deg)}.page[class*=study-] .role-menus.menus.isspread .icons .icon-2{transform:translate(50%,-50%) rotate(45deg)}.page[class*=study-] .role-menus.menus.isspread ul.characters{top:0;transform:skewX(var(--ul-deg));transform-origin:top}.page[class*=study-] .role-menus.menus.isspread ul.characters li{opacity:1;transform:translate(0) skewX(calc(var(--ul-deg)*-1));transform-origin:top}@media(max-width:767px){.page[class*=study-] .role-menus.menus{--bg-width-1:65px;--bg-width-2:40px;--ul-right:77px;--li-width:160px;width:calc(var(--ul-right)*0.815);height:calc(var(--ul-right)*0.815)}.page[class*=study-] .role-menus.menus .icons .icon-1{padding:2px}.page[class*=study-] .role-menus.menus .icons .icon-2{padding:10px}.page[class*=study-] .role-menus.menus .icons .tips{width:34px;height:34px;padding-top:5px;padding-right:5px}.page[class*=study-] .role-menus.menus .icons .tips img{width:24px;padding:0}.page[class*=study-] .role-menus.menus ul.characters li{height:45px;border-radius:8px}.page[class*=study-] .role-menus.menus ul.characters li .characters-item{padding:0 5px 0 10px}.page[class*=study-] .role-menus.menus ul.characters li .characters-item p{font-size:15px}.page[class*=study-] .role-menus.menus ul.characters li .characters-item span .iconfont.blank{font-size:28px}.page[class*=study-] .role-menus.menus ul.characters li .characters-item span .iconfont:not(.blank){font-size:22px}.page[class*=study-] .role-menus.menus.isspread{height:350px}.page[class*=study-] .role-menus.menus.isspread .icons .icon-1{padding:2px}.page[class*=study-] .role-menus.menus.isspread .icons .icon-2{padding:8px}.page[class*=study-] .role-menus.menus.isspread ul.characters,.page[class*=study-] .role-menus.menus.isspread ul.characters li{transform:skewX(0)}}