.html_canvas { 
  width: 2560px; height: 1440px; 
  display: block; position: absolute;
  left: 999999px;
  overflow: hidden;
}
#canvas1 { display: block; background: url("//game.gtimg.cn/images/world/web202511/pop_ping2.jpg") no-repeat; background-size: 100% 100%;  background-size: cover; }
#canvas1::before { content: ''; background: url("//game.gtimg.cn/images/world/web202511/logo9.png") no-repeat; background-size: 100% 100%; width: 170px; height: 69px; display: block;position: absolute; bottom: 35px; left: 90px; margin: auto; transform-origin: left center; }
#canvas1::after { content: ''; background: url("//game.gtimg.cn/images/world/web202511/pop_before.png") no-repeat; background-size: 100% 100%; width: 995px; height: 266px; display: block; pointer-events: none; position: absolute; bottom: 0px; right: 0px; margin: auto; transform-origin: right bottom; }


#canvas1 .ping2_user1_info { background: url("//game.gtimg.cn/images/world/web202511/sign_03_2.png") no-repeat; background-size: 100% 100%; width: 454px; height: 182px; display: block; margin: auto; position: absolute; bottom: 15%; left: 28%; z-index: 99; }
#canvas1 .ping2_user1_info::before { content: ''; width: 48px; height: 48px; display: block; position: absolute; left: 2%; top: 20%; z-index: 1; }
#canvas1 .ping2_user1_info.wx::before { content: ''; background: url("//game.gtimg.cn/images/world/web202511/sign_wx.png") no-repeat; background-size: 100% 100%; }
#canvas1 .ping2_user1_info.qq::before { content: ''; background: url("//game.gtimg.cn/images/world/web202511/sign_qq.png") no-repeat; background-size: 100% 100%; }
#canvas1 .ping2_user1_info img { width: 98px; position: absolute; top: 56px; left: 24px;overflow: hidden;border-radius: 50%; }
#canvas1 .ping2_user1_info .user0_name { font-size: 28px; margin-top: 3px; text-align: center; color: #485D78; position: absolute; line-height: 35px; left: 158px; top: 64px; font-family: 'ngrFontMedium'; }
#canvas1 .ping2_user1_info .user0_tag { font-size: 24px; margin-top: 3px; text-align: center; color: #bddeff;  position: absolute; line-height: 30px; left: 158px; top: 120px; font-family: 'ngrFontMedium'; }
#canvas1 .ping2_user1_info.notTag {          background: url('//game.gtimg.cn/images/world/web202511/sign_03_2_not.png') no-repeat;}
#canvas1 .ping2_user1_info.notTag .user0_tag{display: none;}
#canvas1 .ping2_user1_info.notTag .user0_name{top: 88px;}



#canvas1 .pop_scale { transform-origin: top center; }
#canvas1 .a_close { background: url("//game.gtimg.cn/images/world/web202511/a_close2.png") no-repeat; background-size: 100% 100%; }
#canvas1 .ping_bg { width: 2440px; height: 1440px; position: relative; margin: auto; }
#canvas1 .ping_bg::before { content: ''; background: url("//game.gtimg.cn/images/world/web202511/ping_bg_before.png") no-repeat; background-size: 100% 100%; width: 1652px; height: 1440px; display: block; position: absolute; pointer-events: none; left: -4%; top: 0; }
#canvas1 .ping_bg .ping_role_left { width: 1620px; height: 100%; display: block; pointer-events: none; position: relative; }
#canvas1 .ping_bg .ping_role_left .ping_role { width: 1800px; height: 1800px; left: -15%; top: -15%; }
#canvas1 .ping_bg .ping_role_left .ping_role.dfy { left: -15%; top: -15%; }
#canvas1 .ping_bg .ping_role_left .ping_role.hml { left: -15%; top: -15%; }
#canvas1 .ping_bg .ping_role_left .ping_role.jl { left: -25%; top: -15%; }
#canvas1 .ping_bg .ping_role_left .ping_role.k { left: -10%; top: -15%; }
#canvas1 .ping_bg .ping_role_left .ping_role.lbds { left: -17%; top: -15%; }
#canvas1 .ping_bg .ping_role_left .ping_role.my { left: -17%; top: -15%; }
#canvas1 .ping_bg .ping_role_left .ping_role.sb { left: -20%; top: -14%; }
#canvas1 .ping_bg .ping_role_left .ping_role.wzj { left: -23%; top: -21%; }
#canvas1 .ping_bg .ping_role_left .ping_role.xs { left: -27%; top: -13%; }
#canvas1 .ping_bg .ping_role_right { width: 735px; height: 1133px; position: absolute; right: 95px; top: 0; bottom: 0; margin: auto; }
#canvas1 .ping_btn { display: flex; justify-content: right; display: none !important;}
#canvas1 .ping_role { width: 100%; position: absolute; height: auto; display: block; top: 20px; left: 0; }
#canvas1 .ping_tag { width: 100%; height: 271px; display: block; margin-bottom: 90px; position: relative; }
#canvas1 .ping_tag::before { content: ''; background: url("//game.gtimg.cn/images/world/web202511/ping_tag2_before.png") no-repeat; background-size: 100% 100%; width: 719px; height: 54px; position: absolute; left: 0; top: 155px; }
#canvas1 .ping_tag .ping-name { color: #485d78; font-family: 'ngrTitle'; font-size: 120px; height: 165px; display: block; line-height: 190px; }
#canvas1 .ping_tag .ping-hero-match-box { font-size: 28px; margin-top: 10px; color: #485d78; font-family: 'ngrFont'; }
#canvas1 .ping_tag .ping-hero-match { font-family: 'ngrBold'; margin-top: -20px; color: #c1974d; display: block; font-size: 72px; }
#canvas1 .a_share { background: url("//game.gtimg.cn/images/world/web202511/a_share.png") no-repeat; background-size: 100% 100%; width: 124px; z-index: 2; height: 124px; display: block; position: absolute; right: 0px; top: 0px; }
#canvas1 .ai_info { width: 100%; height: auto; display: block; position: relative; margin: auto; }
#canvas1 .ai_info .ai_tit { font-size: 30px; background: url("//game.gtimg.cn/images/world/web202511/ai_tit.png") no-repeat; background-size: 100% 100%; font-family: 'ngrTitle'; width: 732px; height: 58px; margin-top: 80px; color: #885a12; margin-bottom: 20px; text-align: left; padding-left: 35px; display: block; }
#canvas1 .ai_info .ai_tit span { font-size: 40px; }
#canvas1 .ai_info ul li { font-size: 24px; color: #6c83a0; font-family: 'ngrFont'; }
#canvas1 .tag_box .tag_info { background: none; padding-top: 0; height: auto; }
#canvas1 .tag_box .ai_tit { margin-top: 0; }
#canvas1 .tag_box ul { height: 255px; }
#canvas1 .tit { background: url("//game.gtimg.cn/images/world/web202511/tit.png") no-repeat; background-size: 100% 100%; width: 222px; height: 81px; display: block; position: absolute; left: 0; right: 0; top: 520px; z-index: 2; margin: auto; }
#canvas1 .a_close { position: absolute; top: 55px; right: 55px; }
#canvas1 .a_save { background: url("//game.gtimg.cn/images/world/web202511/a_save.png") no-repeat; background-size: 100% 100%; width: 361px; height: 84px; color: #42475a; font-size: 36px; font-family: 'ngrFont'; display: block; margin: 0; }
#canvas1 .ewm_award_tit { font-size: 36px; color: #445466; opacity: 0.9; font-family: 'ngrFont'; display: block; }
#canvas1 .ping_ewm_award { display: flex; justify-content: space-between; height: 229px; width: 725px; padding-top: 15px; box-sizing: border-box; background: url("//game.gtimg.cn/images/world/web202511/ping_ewm_award.png") no-repeat; background-size: 100% 100%; }
#canvas1 .ping_ewm_award .qr_code { width: 154px; height: 192px; z-index: 2; box-sizing: border-box; }
#canvas1 .ping_ewm_award .qr_code img { width: 154px; height: 154px; display: block; margin: auto; }
#canvas1 .ping_ewm_award .qr_code span { width: 100%; display: block; color: #6c83a0; line-height: 45px; font-size: 24px; font-family: 'ngrFont'; text-align: center; }
#canvas1 .ping_ewm_award .ping_award { width: 490px; z-index: 2; position: relative; }
#canvas1 .ping_ewm_award .ping_award_list { display: flex; justify-content: space-between; width: 100%; position: relative; }
#canvas1 .ping_ewm_award .ping_award_item { display: block; background: url("//game.gtimg.cn/images/world/web202511/await_item.png") no-repeat; background-size: 100% 100%; width: 152px; display: flex; align-items: center; justify-content: center; height: 152px; }
#canvas1 .ping_ewm_award .ping_award_tit { font-size: 24px; color: #6c83a0; position: absolute; bottom: -40px;         width: 100%; height: 40px; font-family: 'ngrFont'; text-align: center; display: block; }
#canvas1 .ping_ewm_award .ping_award_item img {width: 100%;}
#canvas1 .ping_ewm_award .ping_award_item.gray {
  background: url('//game.gtimg.cn/images/world/web202511/itembox_gray.png') no-repeat;
  background-size: 100% 100%;
}
#canvas1 .ping_ewm_award .ping_award_item.blue {
  background: url('//game.gtimg.cn/images/world/web202511/itembox_blue.png') no-repeat;
  background-size: 100% 100%;
}

#canvas2 .ping_right .ping_award_item.gray { 
  background: url('//game.gtimg.cn/images/world/web202511/itembox_gray.png') no-repeat;
  background-size: 100% 100%;
}
#canvas2 .ping_right .ping_award_item.blue { 
  background: url('//game.gtimg.cn/images/world/web202511/itembox_blue.png') no-repeat;
  background-size: 100% 100%;
}
#canvas2 .ping_right .ping_award_item.yellow { 
  background: url('//game.gtimg.cn/images/world/web202511/itembox_yellow.png') no-repeat;
  background-size: 100% 100%;
}


#canvas2 { background-size: 100% 100%;display: block; background: url("//game.gtimg.cn/images/world/web202511/pop_ping2.jpg") no-repeat; background-size: cover; }
#canvas2::before { content: ''; background: url("//game.gtimg.cn/images/world/web202511/logo9.png") no-repeat; background-size: 100% 100%; width: 170px; height: 69px; display: block; transform: scale(var(--popup-scale, 1)); position: absolute; bottom: 35px; left: 90px; margin: auto; transform-origin: left center; }
#canvas2::after { content: ''; background: url("//game.gtimg.cn/images/world/web202511/pop_before.png") no-repeat; background-size: 100% 100%; width: 995px; height: 266px; display: block; pointer-events: none; transform: scale(var(--popup-scale, 1)); position: absolute; bottom: 0px; right: 0px; margin: auto; transform-origin: right bottom; }
#canvas2 .pop_scale { transform-origin: top center; }
#canvas2 .a_close { background: url("//game.gtimg.cn/images/world/web202511/a_close2.png") no-repeat; background-size: 100% 100%; display: block; right: 50px; top: 50px; }
#canvas2 .ping_bg { width: 2440px; height: 1440px; position: relative; margin: auto; }
#canvas2 .ping_bg::before { content: ''; background: url("//game.gtimg.cn/images/world/web202511/ping_bg_before.png") no-repeat; background-size: 100% 100%; width: 1652px; height: 1440px; display: block; position: absolute; pointer-events: none; left: -4%; top: 0; }
#canvas2 .ping_right { width: 726px; height: 1037px; position: absolute; top: 0; bottom: 0; margin: auto; right: 95px; }
#canvas2 .ping_right .ping_award { width: 505px; z-index: 2; position: relative; }
#canvas2 .ping_right .share_box { background: url("//game.gtimg.cn/images/world/web202511/share_box.png") no-repeat; display: none !important; background-size: 100% 100%; width: 725px; height: 52px; position: relative; margin-top: -75px; z-index: 2; }
#canvas2 .ping_right .share_box .share_txt { width: 460px; height: 52px; color: #445466; font-size: 24px; padding-left: 20px; box-sizing: border-box; line-height: 55px; overflow: hidden; font-family: 'ngrFont'; text-overflow: ellipsis; display: block; white-space: nowrap; }
#canvas2 .ping_right .share_box .a_copy { position: absolute; right: 0px; background: url("//game.gtimg.cn/images/world/web202511/a_share2.png") no-repeat; background-size: 100% 100%; top: 0; font-size: 0; line-height: 52px; bottom: 0; text-align: center; height: 52px; width: 185px; margin: auto; }
#canvas2 .ping_right .share_box .a_save { position: absolute; background: url("//game.gtimg.cn/images/world/web202511/btn_show.png") no-repeat; font-size: 36px; background-size: 100% 100%; font-family: 'ngrFontMedium'; color: #42475a; width: 361px; height: 84px; line-height: 84px; display: block; right: 0; top: 80px; }
#canvas2 .ping_right .qr_code { width: 154px; height: 192px; z-index: 2; box-sizing: border-box; }
#canvas2 .ping_right .qr_code img { width: 154px; height: 154px; display: block; margin: auto; }
#canvas2 .ping_right .qr_code span { width: 100%; display: block; color: #6c83a0; line-height: 35px; font-size: 24px; font-family: 'ngrFont'; text-align: center; }

#canvas2 .ping_right .ping_tit4 { width: 100%; height: 40px; margin: 70px 0 15px; display: block; position: relative; color: #445466; font-size: 36px; font-family: 'ngrFont'; }
#canvas2 .ping_right .ping_ewm_award { height: 290px; padding-top: 10px; display: flex; justify-content: space-between; position: relative; }
#canvas2 .ping_right .ping_ewm_award::before { content: ''; background: url("//game.gtimg.cn/images/world/web202511/ping_award_list_icon.png") no-repeat; background-size: 100% 100%; width: 725px; height: 7px; display: block; position: absolute; top: 0; left: 0; }
#canvas2 .ping_right .ping_ewm_award::after { content: ''; background: url("//game.gtimg.cn/images/world/web202511/ping_award_list_icon.png") no-repeat; background-size: 100% 100%; width: 725px; height: 7px; display: block; position: absolute; bottom: 0; left: 0; }
#canvas2 .ping_right .ping_award_list { display: flex; justify-content: space-between; width: 100%; }
#canvas2 .ping_right .ping_award_item { display: block; background: url("//game.gtimg.cn/images/world/web202511/await_item.png") no-repeat; background-size: 100% 100%; width: 152px; display: flex; align-items: center; justify-content: center; height: 152px; position: relative; }
#canvas2 .ping_right .ping_award_tit { font-size: 24px; color: #6c83a0; position: absolute; bottom: -40px; width: 120%; font-family: 'ngrFont'; text-align: center; display: block; height: 30px; }
#canvas2 .ai_info { width: 649px; height: 266px; position: relative; display: block; top: 0; margin: 60px 0 0; }
#canvas2 .ai_info .ai_tit { background: url("//game.gtimg.cn/images/world/web202511/team_sign.png") no-repeat; background-size: 100% 100%; width: auto; line-height: 67px; height: 60px; font-family: 'ngrTitle'; font-size: 38px; color: #885a12; min-width: 400px; max-width: 500px; text-align: center; display: inline-block; padding: 0 40px; box-sizing: border-box; margin-bottom: 20px; }
#canvas2 .ai_info li { color: #6c83a0; font-size: 24px; font-family: 'ngrFont'; }
#canvas2 .ping_right .ping_award_item img { width: 100%; }
#canvas2 .team_content .team01::after { content: ''; background: url("//game.gtimg.cn/images/world/web202511/hero_bg_01.png") no-repeat; background-size: 100% 100%; width: 1392px; height: 1392px; display: block; position: absolute; pointer-events: none; left: -50%; top: -43%; z-index: 1; }
#canvas2 .join_left { width: 1620px; height: 100%; display: block; pointer-events: none; position: relative; left: -1%; }
#canvas2 .join_left .team_content { width: 1620px; position: relative; margin: auto; height: 1440px; }
#canvas2 .join_left .team_content .role_img { width: 1800px; height: 1800px; pointer-events: none; z-index: 2;}
#canvas2 .join_left .team_content .p0_team.not .p0_user1_info { display: none; }
#canvas2 .join_left .team_content .p0_team.not::before { content: ''; display: block; background: url("//game.gtimg.cn/images/world/web202511/role/init.png") no-repeat; background-size: 100% 100%; width: 1800px; height: 1800px; position: absolute; pointer-events: none; transform-origin: left top; }
#canvas2 .join_left .team_content .p0_team.not.team04::before { transform: scale(0.5); left: 0; top: -29%; }
#canvas2 .join_left .team_content .p0_team.not.team01::before { transform: scale(0.8); position: absolute; transform-origin: top left; left: -50%; top: -45%; }
#canvas2 .join_left .team_content .p0_team.not.team02::before { transform: scale(0.55); position: absolute; transform-origin: top left; left: -25%; top: -18%; }
#canvas2 .join_left .team_content .p0_team.not.team03::before { transform: scale(0.55); position: absolute; transform-origin: top left; left: 0; top: -18%; }
#canvas2 .join_left .team_content .p0_team.not .role_img { display: none; }
#canvas2 .join_left .team_content .p0_team.not .not_team { width: 245px; display: block; position: absolute; top: 31%; }
#canvas2 .join_left .team_content .p0_team.not .not_team span { color: #fff; display: block; text-align: center; font-size: 24px; }
#canvas2 .join_left .team_content .p0_team.not .not_team_icon { background: url("//game.gtimg.cn/images/world/web202511/symbol.png") no-repeat; background-size: 100% 100%; width: 146px; height: 146px; margin: auto; display: block; }
#canvas2 .join_left .team_content .p0_team.on .p0_user1_info { display: none; }
#canvas2 .join_left .team_content .p0_team.on::before { content: ''; display: block; background: url("//game.gtimg.cn/images/world/web202511/role/init.png") no-repeat; background-size: 100% 100%; width: 1800px; height: 1800px; position: absolute; pointer-events: none; transform-origin: left top; }
#canvas2 .join_left .team_content .p0_team.on.team04::before { transform: scale(0.5); left: 0; top: -29%; }
#canvas2 .join_left .team_content .p0_team.on.team01::before { transform: scale(0.8); position: absolute; transform-origin: top left; left: -50%; top: -45%; }
#canvas2 .join_left .team_content .p0_team.on.team02::before { transform: scale(0.55); position: absolute; transform-origin: top left; left: -25%; top: -18%; }
#canvas2 .join_left .team_content .p0_team.on.team03::before { transform: scale(0.55); position: absolute; transform-origin: top left; left: 0; top: -18%; }
#canvas2 .join_left .team_content .p0_team.on .role_img { display: none; }
#canvas2 .join_left .team_content .p0_team.on .not_team { width: 245px; display: block; position: absolute; top: 31%; }
#canvas2 .join_left .team_content .p0_team.on .not_team span { color: #fff; display: block; text-align: center; font-size: 24px; }
#canvas2 .join_left .team_content .p0_team.on .not_team_icon { background: url("//game.gtimg.cn/images/world/web202511/symbol.png") no-repeat; background-size: 100% 100%; width: 146px; height: 146px; margin: auto; display: block; }
#canvas2 .join_left .team_content .p0_team .not_team { display: none; z-index: 1; }
#canvas2 .join_left .team_content .team01 { width: 730px; height: 830px; position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; margin: auto; }
#canvas2 .join_left .team_content .team01 .not_team { top: 53% !important; left: 28% !important; }
#canvas2 .join_left .team_content .team01 .role_img { transform: scale(0.8); position: absolute; transform-origin: top left; left: -50%; top: -32%; }
#canvas2 .join_left .team_content .team01 .role_img.xs { left: -63%; }
#canvas2 .join_left .team_content .team01 .role_img.jl { left: -71%; }
#canvas2 .join_left .team_content .team01 .role_img.wzj { left: -71%; top: -42%; }
#canvas2 .join_left .team_content .team01 .p0_user1_info { top: 550px; left: 144px; }
#canvas2 .join_left .team_content .team02 { width: 650px; position: absolute; left: 0; top: 300px; z-index: 5; height: 850px; }
#canvas2 .join_left .team_content .team02 .not_team { top: 42% !important; left: 30% !important; }
#canvas2 .join_left .team_content .team02 .role_img { transform: scale(0.55); position: absolute; transform-origin: top left; left: -25%; top: -18%; }
#canvas2 .join_left .team_content .team02 .role_img.jl { left: -13%; }
#canvas2 .join_left .team_content .team02 .p0_user1_info { top: 480px; left: 5px; }
#canvas2 .join_left .team_content .team03 { width: 750px; height: 655px; position: absolute; z-index: 3; top: 300px; right: 68px; }
#canvas2 .join_left .team_content .team03 .not_team { top: 57% !important; left: 48% !important; }
#canvas2 .join_left .team_content .team03 .role_img { transform: scale(0.55); position: absolute; transform-origin: top left; left: 0; top: -18%; }
#canvas2 .join_left .team_content .team03 .role_img.jl { left: -13%; }
#canvas2 .join_left .team_content .team03 .p0_user1_info { top: 320px; left: 350px; }
#canvas2 .join_left .team_content .team04 { width: 750px; height: 680px; z-index: 4; position: absolute; top: 0; left: -5%; right: 0; margin: auto; }
#canvas2 .join_left .team_content .team04 .not_team { top: 36% !important; left: 42% !important; }
#canvas2 .join_left .team_content .team04 .role_img { transform: scale(0.5); position: absolute; transform-origin: top left; left: 0; top: -29%; }
#canvas2 .join_left .team_content .team04 .role_img.jl { left: -13%; }
#canvas2 .join_left .team_content .team04 .p0_user1_info { top: 108px; right: -282px; left: unset; }


#canvas2 .join_left .team_content .p0_user1_info {
  transform: scale(.8);transform-origin: left top;
  background: url("//game.gtimg.cn/images/world/web202511/sign_03_2.png") no-repeat;  background-size: 100% 100%; width: 454px; height: 182px; display: block; margin: auto;position: absolute; top: 0px; left: 68px; z-index: 99; }
#canvas2 .team_content .p0_user1_info img { width: 98px; position: absolute; top: 56px; left: 24px;overflow: hidden;border-radius: 50%; }
#canvas2 .join_left .team_content .p0_user1_info .user0_name { font-size: 28px; margin-top: 3px; text-align: center; color: #485D78; position: absolute; line-height: 35px; left: 158px; top: 64px; font-family: 'ngrFontMedium'; }
#canvas2 .join_left .team_content .p0_user1_info .user0_tag { font-size: 24px; margin-top: 3px; text-align: center; color: #bddeff;  position: absolute; line-height: 30px; left: 158px; top: 120px; font-family: 'ngrFontMedium'; }
#canvas2 .join_left .team_content .p0_user1_info.notTag {          background: url('//game.gtimg.cn/images/world/web202511/sign_03_2_not.png') no-repeat;}
#canvas2 .join_left .team_content .p0_user1_info.notTag .user0_tag{display: none;}
#canvas2 .join_left .team_content .p0_user1_info.notTag .user0_name{top: 88px;}

#canvas2 .join_left .team_role_info { width: 100%; height: 100%; }
#canvas2 .join_left .team_join_item { width: 488px; height: 858px; background: #284a7a; position: absolute; }

 .ping_info {
    z-index: 2;
    display: block;
    position: relative;
    text-align: center;
    color: #445466;
    font-size: 48px;
      text-align: left;
    font-family: 'ngrTitle';
    line-height: 38px;
    
  }
  #canvas2 .ping_tit {
    display: flex;
    align-items: center;
  }
  #canvas2 .ping_tit span {
    width: auto;
    max-width: 340px;
    display: block;
    overflow: hidden;
    height: 50px;
    line-height: 52px;
    white-space: nowrap;
    /* 溢出隐藏省略号 */
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .ping_info::before {
      content: '';
      background: url('//game.gtimg.cn/images/world/web202511/title_line.png') no-repeat;
      background-size: 100% 100%;
      width: 720px;
      height: 56px;
      display: block;
      position: absolute;
      top: 48px;
      left: 20px;
  }
  .ping_info .tips {
    display: block;
    font-family: 'ngrFont';
    text-align: left;
    color: #485978; 
    margin-top: 30px;
    opacity: 0.9;
    font-size: 32px;
    transform: translateX(15px); 
  }