@CHARSET "UTF-8";
img { margin: 0px; padding: 0px; }
.game_reference { background: url(../images/game_reference_2.jpg) top center no-repeat; margin-top: 60px; padding-bottom: 80px; min-height: 700px; width: 100%; }
.game_reference_box { width:1328px; margin: auto; overflow:hidden }

.game_reference_box .title { width: 443px; height: 92px; margin: auto; margin-top: 30px; margin-bottom: 30px; }
.game_reference_box .gameList { overflow: hidden; }
.game_reference_box .gameList .signup { position: relative; width: 432px; height: 284px; display: block; z-index: 1; float: left; margin-right: 16px; margin-bottom:16px; }
.game_reference_box .gameList .signup img{ border-radius:12px}
.game_reference_box .gameList .signup:nth-child(3n+0) { margin-right: 0px; }
/*.game_reference_box .gameList .lol .herofl { width: 524px; height: 266px; position: absolute; top: 0px; right: -102px; background: url(../images/ckhero_lol.png?111) no-repeat; }
.game_reference_box .gameList .nier .herofl { width: 312px; height: 317px; z-index: 1; position: absolute; top: -20px; right: -104px; background: url(../images/ckhero_nier.png?111) no-repeat; }*/
.game_reference_box .contributions { position: relative; width: 370px; height: 55px; z-index: 2; border: 1px solid #70FFF7; border-radius: 8px; margin: auto; margin-top: 54px; overflow: hidden }
.game_reference_box .contributions .tg1 { float: left; margin-left: 13px; margin-top: 8px; width: 260px; height: 34px; font-size: 16px; font-family: YouSheBiaoTiHei; font-weight: 900; color: #70FFF7; line-height: 17px; letter-spacing: 2px; }
.game_reference_box .contributions .tg1 span { width: 100%; display: block; margin-bottom: 5px; }
.game_reference_box .contributions .tg2 { float: right; margin-right: 17px; margin-top: 11px; width: 72px; height: 32px; text-align: center; line-height: 32px; color: #030F18; background: #70FFF7; border-radius: 16px; font-size: 16px; cursor: pointer; }
.tougaoPopup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(3,20,31,0.95); z-index: 90; display: none; }
.tougaoPopup .tougao_main { position: fixed; top: 50%; left: 50%; margin: -134px 0 0 -211px; color: #fff; width: 422px; height: 268px; background: rgba(30,113,140,1); border-radius: 12px; }
.tougaoPopup .tougao_main .tougao_close { position: absolute; right: -30px; top: -30px; width: 20px; height: 20px; cursor: pointer; display: block; background: url(../images/tougao_close.png) no-repeat; }
.tougaoPopup .tougao_main .d1 { width: 130px; height: 45px; text-align: center; margin: auto; margin-top: 33px; font-size: 32px; font-weight: 600; color: rgba(255,255,255,1); line-height: 45px; letter-spacing: 2px; }
.tougaoPopup .tougao_main .d2 { width: 170px; margin: auto; margin-top: 6px; }
.tougaoPopup .tougao_main .d2 span:nth-child(1) { float: left; margin-right: 6px; width: 2px; height: 2px; background: rgba(118,210,231,1); border-radius: 1px; }
.tougaoPopup .tougao_main .d2 span:nth-child(2) { float: left; width: 153px; height: 2px; background: rgba(118,210,231,1); border-radius: 1px; }
.tougaoPopup .tougao_main .d2 span:nth-child(3) { float: right; width: 2px; height: 2px; background: rgba(118,210,231,1); border-radius: 1px; }
.tougaoPopup .tougao_main .d3 { width: 279px; height: 52px; margin: auto; margin-top: 30px; font-size: 16px; color: rgba(255,255,255,1); line-height: 26px; letter-spacing: 1px; }
.tougaoPopup .tougao_main .d3 span { width: 100%; display: block; text-align: center; }
.tougaoPopup .tougao_main .d4 { width: 384px; height: 45px; margin: auto; margin-top: 20px; font-size: 32px; font-weight: 600; color: rgba(255,255,255,1); line-height: 45px; letter-spacing: 2px; }
.referenceMain { background: url(../images/reference_bg.jpg) top center fixed no-repeat; margin-top: 60px; min-height: 700px; width: 100%; }
.referenceCon { width: 1170px; margin: auto; }
.referenceGameLogo { width: 311px; margin: auto; overflow: hidden; padding-top: 55px; }
.referenceGameLogo span { width: 100%; height: 19px; text-align: center; font-size: 14px; font-family: MicrosoftYaHei; color: #70FFF7; line-height: 19px; letter-spacing: 2px; display: block; margin-top: 15px; }
.referenceMain .showbox { width: 100%; text-align: center; margin: auto; margin-top: 30px; position: relative; }
.referenceMain .showbox .selete-checklist li { width: 100px; display: inline-block; }
.referenceMain .showbox .selete-checklist a { width: 100px; text-align: center; height: 32px; margin: auto; text-align: center; display: inline-block; color: #8BA5CA; line-height: 24px; font-size: 16px; cursor: pointer; }
.referenceMain .showbox .selete-checklist a:hover { color: #fff; }
.referenceMain .showbox .selete-checklist li.current a { color: #70FFF7; background: url(../images/selete-xzbg.png?111) bottom center no-repeat; }
.showbox .heros-search { color: #fff; font-size: 14px; width: 211px; height: 30px; border-radius: 16px; border: 1px solid rgba(134,160,196,1); position: absolute; top: 0px; right: 10px; }
.showbox .heros-search .herosSearchInput { float: left; width: 155px; margin-left: 12px; height: 30px; color: #fff; line-height: 30px; background: none; border: 0px; font-size: 14px; }
.showbox .heros-search #herosSearchSub { float: left; background: url(../images/heros_sub_bg.png) center no-repeat; width: 30px; height: 30px; cursor: pointer; }
.jSearchHeroDiv { width: 100%; margin-top: 36px; padding-bottom: 100px; overflow: hidden; }
.jSearchHeroDiv li { width: 54px; }
.imgtextlist li { float: left; width: 90px; margin-bottom: 40px; text-align: center; cursor: pointer; position: relative; overflow: hidden }
.imgtextlist li:nth-child(13) { margin-right: 0px; }
.imgtextlist .sbg, .imgtextlist img { width: 64px; height: 64px; border: 1px solid rgba(118,210,231,1); margin-bottom: 8px; }
.imgtextlist .sbg { display: none; position: absolute; top: 0px; left: 13px; background: rgba(118,210,231,0.8); cursor: pointer; }
.imgtextlist a { color: #8BA5CA; font-size: 14px; display: block; }
.imgtextlist a:hover { color: #fff; }
.imgtextlist a:hover .sbg { display: block }
.imgtextlist .commspr { background: url(../images/heros_openbg.png) center no-repeat; width: 64px; height: 64px; display: block; }
.imgtextlist p { width: 100%; height: 19px; line-height: 19px; overflow: hidden; }
.imgtextlist li.loading { width: 100%; height: 200px; position: relative; margin: auto; background: url(../images/hero_empty.png) top center no-repeat; text-align: center; cursor: default; color: #3B5C6A; font-size: 14px }
.imgtextlist li.loading span { width: 100%; height: 19px; position: absolute; bottom: 0px; left: 0px; }
/*英雄详情*/
.herosDetial { margin-top: 60px; }
.lolDetialLeft { width: 560px; background: rgba(3,8,13,0.9); position: fixed; top: 60px; left: -560px; height: 100%; overflow: auto; }
.detailImgList li { float: left; width: 90px; margin-bottom: 25px; text-align: center; cursor: pointer; position: relative; overflow: hidden }
.detailImgList li:nth-child(13) { margin-right: 0px; }
.detailImgList .sbg, .detailImgList img { width: 64px; height: 64px; border: 1px solid rgba(118,210,231,1); margin-bottom: 8px; margin-top: 13px; }
.detailImgList .sbg { display: none; position: absolute; top: 0px; left: 13px; background: rgba(118,210,231,0.8); cursor: pointer; }
.detailImgList .heroimg { width: 92px; height: 92px; }
.detailImgList .heroimg.current { background: url(../images/heros_mainimg_hover.png) center no-repeat; }
.detailImgList .heroimg img { margin-top: 13px; }
.detailImgList a { color: #8BA5CA; font-size: 14px; display: block; }
.detailImgList a:hover { color: #fff; }
.detailImgList a:hover .sbg { display: block }
.detailImgList .commspr { background: url(../images/heros_openbg.png) center no-repeat; width: 64px; height: 64px; display: block; }
.detailImgList p { width: 100%; height: 19px; line-height: 19px; overflow: hidden; }
.detailImgList li.loading { width: 100%; height: 200px; position: relative; margin: auto; background: url(../images/hero_empty.png) top center no-repeat; text-align: center; cursor: default; color: #3B5C6A; font-size: 14px }
.detailImgList li.loading span { width: 100%; height: 19px; position: absolute; bottom: 0px; left: 0px; }
 .lolDetialLeft::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
 height: 1px;
}
 .lolDetialLeft::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
 background : #76D2E7;
}
 .lolDetialLeft::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
 background : none;
}
.lolDetialLeft .moreHerosUpload { width: 100%; height: 19px; margin: auto; margin-top: 16px; font-size: 14px; font-family: MicrosoftYaHei; color: rgba(160,204,214,1); line-height: 19px; letter-spacing: 2px; text-align: center; }
.lolDetialLeft .HerosSelectTitle { width: 176px; height: 40px; margin: auto; margin-top: 25px; font-size: 40px; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: rgba(118,210,231,1); line-height: 40px; letter-spacing: 3px; }
.lolDetialLeft .heros-search { color: #fff; font-size: 14px; width: 211px; height: 30px; border-radius: 16px; border: 1px solid rgba(134,160,196,1); margin: auto; margin-top: 16px; }
.lolDetialLeft .heros-search .herosSearchInput { float: left; width: 155px; margin-left: 12px; height: 30px; color: #fff; line-height: 30px; background: none; border: 0px; font-size: 14px; }
.lolDetialLeft .heros-search #herosSearchSub { float: left; background: url(../images/heros_sub_bg.png) center no-repeat; width: 30px; height: 30px; cursor: pointer; }
.lolDetialLeft .showbox { width: 100%; text-align: center; margin: auto; margin-top: 30px; position: relative; }
.lolDetialLeft .showbox .selete-checklist li { width: 60px; display: inline-block; }
.lolDetialLeft .showbox .selete-checklist li:nth-child(1) { width: 70px; }
.lolDetialLeft .showbox .selete-checklist a { width: 60px; cursor: pointer; text-align: center; height: 32px; margin: auto; text-align: center; display: inline-block; color: #8BA5CA; line-height: 24px; font-size: 16px; }
.lolDetialLeft .showbox .selete-checklist a:nth-child(1) { width: 70px; }
.lolDetialLeft .showbox .selete-checklist a:hover { color: #fff; }
.lolDetialLeft .showbox .selete-checklist li.current a { color: #76D2E7; background: url(../images/selete-xzbg.png?111) bottom center no-repeat; }
.lolDetialLeft .detailImgList { width: 460px; margin: auto; margin-top: 10px; }
.lolDetialLeft .hero_list_sq { background: url(../images/skill_display_page_bg.png) right repeat-y; width: 106px; height: 100%; position: fixed; top: 0px; left: -200px; z-index: -1; }
.lolDetialLeft .clickShouqi { width: 41px; height: 63px; background: url(../images/hero_list_sq.png) no-repeat; cursor: pointer; position: fixed; left: -200px; top: 50%; margin-top: -31px; }
.herosDetialRight .hero_list_dk { background: url(../images/skill_display_page_nobg.png) left repeat-y; width: 190px; height: 100%; position: fixed; top: 0px; }
.herosDetialRight .hero_list_dk .selectHeroList { width: 100px; height: 62px; line-height: 62px; font-size: 14px; font-family: MicrosoftYaHei; color: #A0CCD6; letter-spacing: 1px; cursor: pointer; position: fixed; left: 25px; top: 50%; margin-top: -31px; background: url(../images/hero_list_dk.png) right no-repeat; }
/**/
.herosDetialRight { background: rgba(3,8,13,0.9); }
.herosDetialRight .skinstitle { width: 100%; height: 40px; text-align: center; margin: auto; padding-top: 54px; display: block; font-size: 40px; font-family: Arial-Black, Arial; font-weight: 900; color: rgba(190,241,253,1); line-height: 40px; letter-spacing: 3px; }
.herosDetialRight .herosname { width: 100%; height: 24px; text-align: center; margin: auto; margin-top: 8px; font-size: 24px; font-family: PingFangSC-Light, PingFang SC; font-weight: 300; color: rgba(160,204,214,1); line-height: 24px; letter-spacing: 2px; }
.herosDetialRight .skinsifram { width: 980px; height: 589px; margin: auto; margin-top: 16px; }
.userUploadInfo { width: 405px; margin: auto; margin-top: 20px; padding-bottom: 60px; }
.userUploadInfo li { float: left; }
.userUploadInfo .userlogo img { width: 33px; height: 33px; border-radius: 16.5px; }
.userUploadInfo .username { color: #A0CCD6; font-size: 14px; margin-left: 8px; margin-top: 9px }
.userUploadInfo .username a { color: #76D2E7 }
.userUploadInfo .skinsJubao { background: url(../images/skins_jubao.png) center no-repeat; width: 16px; height: 16px; cursor: pointer; margin-left: 6px; margin-top: 11px }
.userUploadInfo .xiazai { width: 70px; height: 34px; background: rgba(118,210,231,1); border-radius: 17px; margin-left: 56px; }
.userUploadInfo .xiazai a { width: 70px; height: 34px; display: block; text-align: center; font-size: 16px; font-family: MicrosoftYaHei; color: rgba(3,9,14,1); line-height: 34px; letter-spacing: 3px; }
/*皮肤切换*/

.herosDetialRight #zzsc { height: 165px; width: 980px; margin-right: auto; margin-left: auto; position: relative; margin-top: 8px; }
.herosDetialRight #zzsc .prev { background: url(../images/skins_list_left_slide.png) no-repeat; display: block; height: 116px; width: 103px; cursor: pointer; position: absolute; left: 0px; top: 0px; }
.herosDetialRight #zzsc .next { background: url(../images/skins_list_right_slide.png) no-repeat; display: block; height: 116px; width: 103px; cursor: pointer; top: 0px; right: 0px; position: absolute; }
.herosDetialRight #zzsc .prev a { width: 100%; height: 100%; display: block; }
.herosDetialRight #zzsc .next a { width: 100%; height: 100%; display: block; }
.herosDetialRight #zzsc .v_show { min-height: 135px; width: 804px; margin-left: 103px; overflow: hidden; position: relative; }
.herosDetialRight #zzsc .v_cont { width: 6650px; position: absolute; left: 0px; top: 0px; }
.herosDetialRight #zzsc .v_cont ul { float: left; text-align: center; line-height: 50px; }
.herosDetialRight #zzsc .v_cont ul .skinsbox { width: 804px; height: 250px; float: left; margin-top: 3px; }
.herosDetialRight #zzsc .v_cont ul .skinsbox .skinsSignup { float: left; width: 25%; height: 145px; cursor: pointer; display: inline-block; }
.herosDetialRight #zzsc .v_cont ul .skinsbox .skinsSignup .skinsimg { width: 100%; height: 115px; }
.herosDetialRight #zzsc .v_cont ul .skinsbox .skinsSignup.current .skinsimg { background: url(../images/skins_xuanzhong_bg.png) no-repeat; }
.herosDetialRight #zzsc .v_cont ul .skinsbox .skinsSignup .skinsname { width: 100%; min-height: 20px; font-size: 14px; text-align: center; color: rgba(160,204,214,1); line-height: 20px; letter-spacing: 1px; }
.herosDetialRight #zzsc .v_cont ul .skinsbox .skinsSignup img { width: calc(100% - 30px); ; height: 85px; display: block; margin: auto; padding-top: 15px; margin-left: 15px; }
.herosDetialRight #zzsc .circle { width: 100%; height: 8px; margin-top: 15px; text-align: center; }
.herosDetialRight #zzsc .circle li { background: #252D48; height: 8px; width: 8px; border-radius: 4px; line-height: 0px; cursor: pointer; margin: auto; text-align: center; display: inline-block; margin-left: 10px; }
.herosDetialRight #zzsc .circle .circle-cur { background-color: #13AFF0; }
/*王者荣耀*/

.wzryReferenceMain { background: url(../images/wzry_bt.jpg) top center fixed no-repeat; margin-top: 60px; min-height: 1080px; width: 100%; }
.wzryReferenceMain .referenceGameLogo { padding-top: 176px; width: 384px; }
.wzryimgtextlist { width: 1155px; margin: auto; margin-top: 26px; padding: 10px; }
.wzryimgtextlist .loading_z { width: 100%; text-align: center; font-size: 16px; color: #fff }
.wzryimgtextlist::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
 height: 1px;
}
 .wzryimgtextlist::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
 background : #FFC800;
}
 .wzryimgtextlist::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
 background : none;
}
.wzryimgtextlist li { float: left; width: 88px; margin-right: 28px; margin-bottom: 32px; text-align: center; cursor: pointer; position: relative; }
.wzryimgtextlist li:nth-child(10n+0) { margin-right: 0px; }
.wzryimgtextlist .sbg, .wzryimgtextlist img { width: 84px; height: 84px; margin-bottom: 8px; border-radius: 10px 0px 10px 0px; border: 2px solid #258DF2; }
.wzryimgtextlist .sbg { display: none; position: absolute; top: 0px; left: 0px; cursor: pointer; border-radius: 10px 0px 10px 0px; -webkit-box-shadow: #17A3D5 0px 0px 11px 1px; -moz-box-shadow: #17A3D5 0px 0px 11px 1px; box-shadow: #17A3D5 0px 0px 11px 1px; }
.wzryimgtextlist a { color: #fff; font-size: 14px; display: block; }
.wzryimgtextlist a:hover { color: #F8DEB3; }
.wzryimgtextlist a:hover .sbg { display: block }
.wzryimgtextlist .commspr { width: 88px; height: 88px; display: block; }
.wzryimgtextlist p { width: 100%; height: 19px; line-height: 19px; overflow: hidden; }
.wzryimgtextlist li.loading { width: 100%; height: 200px; position: relative; margin: auto; background: url(../images/hero_empty.png) top center no-repeat; text-align: center; cursor: default; color: #3B5C6A; font-size: 14px }
.wzryimgtextlist li.loading span { width: 100%; height: 19px; position: absolute; bottom: 0px; left: 0px; }
/*详情*/
.wzryDetialLeft { width: 560px; background: rgba(3,8,13,0.9); position: fixed; top: 60px; left: -560px; height: 100%; overflow: auto; }
.wzryDetialLeft .wzryDetailImgList { width: 440px; margin: auto; padding: 10px; margin-top: 10px; }
.wzryDetailImgList li { float: left; width: 88px; margin-bottom: 25px; margin-right: 28px; text-align: center; cursor: pointer; position: relative; }
.wzryDetailImgList li:nth-child(4n+0) { margin-right: 0px; }
.wzryDetailImgList .sbg, .wzryDetailImgList img { width: 84px; height: 84px; border-radius: 10px 0px 10px 0px; border: 2px solid #258DF2; }
.wzryDetailImgList .sbg { display: none; position: absolute; top: 0px; left: 0px; cursor: pointer; border-radius: 10px 0px 10px 0px; -webkit-box-shadow: #17A3D5 0px 0px 11px 1px; -moz-box-shadow: #17A3D5 0px 0px 11px 1px; box-shadow: #17A3D5 0px 0px 11px 1px; }
.wzryDetailImgList .heroimg.current { border-radius: 10px 0px 10px 0px; -webkit-box-shadow: #17A3D5 0px 0px 11px 1px; -moz-box-shadow: #17A3D5 0px 0px 11px 1px; box-shadow: #17A3D5 0px 0px 11px 1px; }
.wzryDetailImgList a { color: #8BA5CA; font-size: 14px; display: block; }
.wzryDetailImgList a:hover { color: #fff; }
.wzryDetailImgList a:hover .sbg { display: block }
.wzryDetailImgList .commspr { display: block; }
.wzryDetailImgList p { width: 100%; height: 19px; line-height: 19px; overflow: hidden; margin-top: 8px; }
.wzryDetailImgList li.loading { width: 100%; height: 200px; position: relative; margin: auto; background: url(../images/hero_empty.png) top center no-repeat; text-align: center; cursor: default; color: #3B5C6A; font-size: 14px }
.wzryDetailImgList li.loading span { width: 100%; height: 19px; position: absolute; bottom: 0px; left: 0px; }
 .wzryDetialLeft::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
 height: 1px;
}
 .wzryDetialLeft::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
 background : #76D2E7;
}
 .wzryDetialLeft::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
 background : none;
}
.wzryDetialLeft .moreHerosUpload { width: 100%; height: 19px; margin: auto; margin-top: 16px; font-size: 14px; font-family: MicrosoftYaHei; color: #8BA5CA; line-height: 19px; letter-spacing: 2px; text-align: center; }
.wzryDetialLeft .HerosSelectTitle { width: 176px; height: 40px; margin: auto; margin-top: 25px; font-size: 40px; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #FFFFFF; line-height: 40px; letter-spacing: 3px; }
.wzryDetialLeft .heros-search { color: #fff; font-size: 14px; width: 211px; height: 30px; border-radius: 16px; border: 1px solid rgba(134,160,196,1); margin: auto; margin-top: 16px; }
.wzryDetialLeft .heros-search .herosSearchInput { float: left; width: 155px; margin-left: 12px; height: 30px; color: #fff; line-height: 30px; background: none; border: 0px; font-size: 14px; }
.wzryDetialLeft .heros-search #herosSearchSub { float: left; background: url(../images/heros_sub_bg.png) center no-repeat; width: 30px; height: 30px; cursor: pointer; }
.wzryDetialLeft .showbox { width: 100%; text-align: center; margin: auto; margin-top: 30px; position: relative; }
.wzryDetialLeft .showbox .selete-checklist li { width: 60px; display: inline-block; }
.wzryDetialLeft .showbox .selete-checklist li:nth-child(1) { width: 70px; }
.wzryDetialLeft .showbox .selete-checklist a { width: 60px; cursor: pointer; text-align: center; height: 32px; margin: auto; text-align: center; display: inline-block; color: #8BA5CA; line-height: 24px; font-size: 16px; }
.wzryDetialLeft .showbox .selete-checklist a:nth-child(1) { width: 70px; }
.wzryDetialLeft .showbox .selete-checklist a:hover { color: #fff; }
.wzryDetialLeft .showbox .selete-checklist li.current a { color: #13AFF0; background: url(../images/selete-xzbg.png?111) bottom center no-repeat; }
.wzryDetialLeft .detailImgList { width: 460px; margin: auto; margin-top: 10px; }
.wzryDetialLeft .hero_list_sq { background: url(../images/wzry_skill_display_page_bg.png) right repeat-y; width: 106px; height: 100%; position: fixed; top: 0px; left: -200px; z-index: -1; }
.wzryDetialLeft .clickShouqi { width: 41px; height: 63px; background: url(../images/hero_list_sq.png) no-repeat; cursor: pointer; position: fixed; left: -200px; top: 50%; margin-top: -31px; }
/*右侧*/
.wzryDetialRight .skinstitle { width: 100%; height: 40px; text-align: center; margin: auto; padding-top: 54px; display: block; font-size: 40px; font-family: Arial-Black, Arial; font-weight: 900; color: #fff; line-height: 40px; letter-spacing: 3px; }
.wzryDetialRight .herosname { width: 100%; height: 24px; text-align: center; margin: auto; margin-top: 8px; font-size: 24px; font-family: PingFangSC-Light, PingFang SC; font-weight: 300; color: #fff; line-height: 24px; letter-spacing: 2px; }
.wzryDetialRight .hero_list_dk { background: url(../images/wzry_skill_display_page_nobg.png) left repeat-y; width: 190px; height: 100%; position: fixed; top: 0px; }
/*阴阳师*/
.yysReferenceMain { background: url(../images/yys_bg.jpg) top center fixed no-repeat; margin-top: 60px; min-height: 1080px; width: 100%; }
.yysReferenceCon { width: 1288px; margin: auto; }
.left_container { position: relative; width: 212px; height: 1080px; float: left; background: rgba(206, 242, 255, 0.37); }
.right_container { width: 940px; float: right }
.right_container .more_sm { width: 202px; height: 22px; margin: auto; margin-top: 25px; font-size: 16px; font-family: PingFangSC-Light, PingFang SC; font-weight: 300; color: #FFFFFF; line-height: 22px; letter-spacing: 3px; }
.left_container .slogon { background: url(../images/yys_slogon.png) top center no-repeat; width: 102px; height: 298px; margin: auto; margin-top: 103px; margin-bottom: 48px; }
.left_container .selete-checklist li { width: 100%; display: inline-block; margin-bottom: 25px; position: relative }
.left_container .selete-checklist a { width: 60px; height: 32px; background: url(../images/select_flbg.png) no-repeat; margin: auto; text-align: center; display: block; color: #8BA5CA; font-size: 16px; cursor: pointer; }
.left_container .selete-checklist li .arrow { background: url(../images/select_fljt.png?111) no-repeat; position: absolute; width: 34px; height: 17px; left: 40px; top: 7px; opacity: 0; display: block; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform: translate(-15px, 0); -moz-transform: translate(-15px, 0); -ms-transform: translate(-15px, 0); -o-transform: translate(-15px, 0); transform: translate(-15px, 0); }
.left_container .selete-checklist li:hover .arrow { display: block\9; opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) }
.left_container .selete-checklist li.current { color: #76D2E7; }
.left_container .selete-checklist li.current .arrow { display: block\9; opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) }
.left_container .heros-search { color: #000; font-size: 14px; width: 164px; height: 30px; margin: auto; border: 1px solid #000000; margin-top: 20px; margin-bottom: 50px; }
.left_container .heros-search .herosSearchInput { float: left; width: 115px; margin-left: 12px; height: 30px; color: #000; line-height: 30px; background: none; border: 0px; font-size: 14px; }
.left_container .heros-search #herosSearchSub { float: left; background: url(../images/heros_sub_bg2.png) center no-repeat; width: 30px; height: 30px; cursor: pointer; }
.left_container .heros-search .herosSearchInput::-webkit-input-placeholder {
color: #000;
}
.left_container .selete-checklist .all { width: 53px; background-position: -159px 3px; }
.left_container .selete-checklist .yys_sp { width: 53px; background-position: -214px 1px; }
.left_container .selete-checklist .yys_ssr { width: 53px; background-position: -0px -0px; }
.left_container .selete-checklist .yys_sr { width: 53px; background-position: -55px -0px; }
.left_container .selete-checklist .yys_r { width: 53px; background-position: -107px -0px; }
.left_container .selete-checklist .yys_n { width: 53px; background-position: -265px -0px; }
.left_container .selete-checklist .current .all { width: 53px; background-position: -159px -29px; }
.left_container .selete-checklist .current .yys_sp { width: 53px; background-position: -214px -29px; }
.left_container .selete-checklist .current .yys_ssr { width: 53px; background-position: -0px -29px; }
.left_container .selete-checklist .current .yys_sr { width: 53px; background-position: -55px -29px; }
.left_container .selete-checklist .current .yys_r { width: 53px; background-position: -107px -29px; }
.left_container .selete-checklist .current .yys_n { width: 53px; background-position: -265px -29px; }
.left_container .selete-checklist li:hover .yys_all { width: 53px; background-position: -159px -29px; }
.left_container .selete-checklist li:hover .yys_sp { width: 53px; background-position: -214px -29px; }
.left_container .selete-checklist li:hover .yys_ssr { width: 53px; background-position: -0px -29px; }
.left_container .selete-checklist li:hover .yys_sr { width: 53px; background-position: -55px -29px; }
.left_container .selete-checklist li:hover .yys_r { width: 53px; background-position: -107px -29px; }
.left_container .selete-checklist li:hover .yys_n { width: 53px; background-position: -265px -29px; }
.yysimgtextlist { height: 590px; overflow: auto; margin-top: 120px; }
.yysimgtextlist::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
 height: 1px;
}
 .yysimgtextlist::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
 background : #FFC800;
}
 .yysimgtextlist::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
 background : none;
}
.yysimgtextlist .loading_z { width: 100%; text-align: center; font-size: 16px; color: #fff }
.yysimgtextlist li { float: left; width: 120px; margin-right: 32px; margin-bottom: 32px; text-align: center; cursor: pointer; position: relative; overflow: hidden; }
.yysimgtextlist li:nth-child(6n+0) { margin-right: 0px; }
.yysimgtextlist .sbg, .yysimgtextlist img { width: 120px; height: 120px; margin-bottom: 8px; }
.yysimgtextlist .sbg { display: none; position: absolute; top: 0px; left: 0px; cursor: pointer; }
.yysimgtextlist a { color: #fff; font-size: 14px; display: block; }
.yysimgtextlist a:hover { color: #F8DEB3; }
.yysimgtextlist a:hover .sbg { display: block }
.yysimgtextlist .commspr { background: url(../images/yys_select_onbg.png) center no-repeat; width: 120px; height: 120px; display: block; }
.yysimgtextlist p { width: 100%; height: 19px; line-height: 19px; overflow: hidden; }
.yysimgtextlist li.loading { width: 100%; height: 200px; position: relative; margin: auto; background: url(../images/hero_empty.png) top center no-repeat; text-align: center; cursor: default; color: #3B5C6A; font-size: 14px }
.yysimgtextlist li.loading span { width: 100%; height: 19px; position: absolute; bottom: 0px; left: 0px; }
.yysDetialLeft { width: 560px; background: rgba(84, 79, 79, 0.90); position: fixed; top: 60px; left: -560px; height: 100%; overflow: auto; }
.yysDetialLeft .heros-search { color: #000; font-size: 14px; width: 164px; height: 30px; margin: auto; border: 1px solid #000000; margin-top: 10px; }
.yysDetialLeft .heros-search .herosSearchInput { float: left; width: 115px; margin-left: 8px; height: 30px; color: #000; line-height: 30px; background: none; border: 0px; font-size: 14px; }
.yysDetialLeft .heros-search #herosSearchSub { float: right; background: url(../images/heros_sub_bg2.png) center no-repeat; width: 30px; height: 30px; cursor: pointer; }
.yysDetialLeft .heros-search .herosSearchInput::-webkit-input-placeholder {
color: #000;
}
 .yysDetialLeft::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
 height: 1px;
}
 .yysDetialLeft::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
 background : #FFC800;
}
 .yysDetialLeft::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
 background : none;
}
.yysDetialLeft .moreHerosUpload { width: 100%; height: 19px; margin: auto; margin-top: 16px; font-size: 14px; font-family: MicrosoftYaHei; color: rgba(160,204,214,1); line-height: 19px; letter-spacing: 2px; text-align: center; }
.yysDetialLeft .HerosSelectTitle { width: 176px; height: 40px; margin: auto; margin-top: 25px; font-size: 40px; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: rgba(118,210,231,1); line-height: 40px; letter-spacing: 3px; }
.yysDetialLeft .showbox { width: 100%; text-align: center; margin: auto; margin-top: 22px; position: relative; }
.yysDetialLeft .showbox .selete-checklist li { width: 60px; display: inline-block; }
.yysDetialLeft .showbox .selete-checklist a { width: 60px; cursor: pointer; background: url(../images/select_flbg.png) no-repeat; text-align: center; height: 32px; margin: auto; text-align: center; display: inline-block; color: #8BA5CA; font-size: 16px; }
.yysDetialLeft .showbox .selete-checklist a:hover { color: #fff; }
.yysDetialLeft .showbox .selete-checklist li.current a { }
.yysDetialLeft .showbox .selete-checklist .all { width: 53px; background-position: -159px 3px; }
.yysDetialLeft .showbox .selete-checklist .yys_sp { width: 53px; background-position: -214px 1px; }
.yysDetialLeft .showbox .selete-checklist .yys_ssr { width: 53px; background-position: -0px -0px; }
.yysDetialLeft .showbox .selete-checklist .yys_sr { width: 53px; background-position: -55px -0px; }
.yysDetialLeft .showbox .selete-checklist .yys_r { width: 53px; background-position: -107px -0px; }
.yysDetialLeft .showbox .selete-checklist .yys_n { width: 53px; background-position: -265px -0px; }
.yysDetialLeft .showbox .selete-checklist .current .all { width: 53px; background-position: -159px -29px; }
.yysDetialLeft .showbox .selete-checklist .current .yys_sp { width: 53px; background-position: -214px -29px; }
.yysDetialLeft .showbox .selete-checklist .current .yys_ssr { width: 53px; background-position: -0px -29px; }
.yysDetialLeft .showbox .selete-checklist .current .yys_sr { width: 53px; background-position: -55px -29px; }
.yysDetialLeft .showbox .selete-checklist .current .yys_r { width: 53px; background-position: -107px -29px; }
.yysDetialLeft .showbox .selete-checklist .current .yys_n { width: 53px; background-position: -265px -29px; }
.yysDetialLeft .showbox .selete-checklist li:hover .all { width: 53px; background-position: -159px -29px; }
.yysDetialLeft .showbox .selete-checklist li:hover .yys_sp { width: 53px; background-position: -214px -29px; }
.yysDetialLeft .showbox .selete-checklist li:hover .yys_ssr { width: 53px; background-position: -0px -29px; }
.yysDetialLeft .showbox .selete-checklist li:hover .yys_sr { width: 53px; background-position: -55px -29px; }
.yysDetialLeft .showbox .selete-checklist li:hover .yys_r { width: 53px; background-position: -107px -29px; }
.yysDetialLeft .showbox .selete-checklist li:hover .yys_n { width: 53px; background-position: -265px -29px; }
.yysDetialLeft .yysSelectTitle { background: url(../images/yys_detail_select_tit.png) center no-repeat; width: 190px; height: 43px; margin: auto; margin-top: 50px; margin-bottom: 24px; }
.yysDetialLeft .yysDetailImgList { width: 425px; margin: auto; margin-top: 30px; }
.yysDetialLeft .hero_list_sq { background: url(../images/yys_skill_display_page_bg.png) right repeat-y; width: 106px; height: 100%; position: fixed; top: 0px; left: -200px; z-index: -1; }
.yysDetialLeft .clickShouqi { width: 41px; height: 63px; background: url(../images/yys_hero_list_sq.png) no-repeat; cursor: pointer; position: fixed; left: -200px; top: 50%; margin-top: -31px; }
.yysDetailImgList li { float: left; width: 120px; margin-right: 32px; margin-bottom: 32px; text-align: center; cursor: pointer; position: relative; overflow: hidden }
.yysDetailImgList li:nth-child(3n+0) { margin-right: 0px; }
.yysDetailImgList .sbg, .yysDetailImgList img { width: 120px; height: 120px; }
.yysDetailImgList .sbg { display: none; position: absolute; top: 0px; left: 0px; cursor: pointer; }
.yysDetailImgList .heroimg { width: 120px; height: 120px; margin-bottom: 12px; }
.yysDetailImgList .heroimg.current { background: url(../images/yys_select_onbg.png) center no-repeat; }
.yysDetailImgList .heroimg img { }
.yysDetailImgList a { color: #fff; font-size: 14px; display: block; }
.yysDetailImgList a:hover { color: #F8DEB3; }
.yysDetailImgList a:hover .sbg { display: block }
.yysDetailImgList .commspr { background: url(../images/yys_select_onbg.png) center no-repeat; width: 120px; height: 120px; display: block; }
.yysDetailImgList p { width: 100%; height: 19px; line-height: 19px; overflow: hidden; }
.yysDetailImgList li.loading { width: 100%; height: 200px; position: relative; margin: auto; background: url(../images/hero_empty.png) top center no-repeat; text-align: center; cursor: default; color: #3B5C6A; font-size: 14px }
.yysDetailImgList li.loading span { width: 100%; height: 19px; position: absolute; bottom: 0px; left: 0px; }
/*右边*/
.yysDetialRight { background: rgba(3,8,13,0.9); overflow: hidden; }
.yysDetialRight .skinstitle { width: 100%; height: 40px; text-align: center; margin: auto; padding-top: 54px; display: block; font-size: 40px; font-family: Arial-Black, Arial; font-weight: 900; color: rgba(190,241,253,1); line-height: 40px; letter-spacing: 3px; }
.yysDetialRight .herosname { width: 100%; height: 24px; text-align: center; margin: auto; margin-top: 8px; font-size: 24px; font-family: PingFangSC-Light, PingFang SC; font-weight: 300; color: rgba(160,204,214,1); line-height: 24px; letter-spacing: 2px; }
.yysDetialRight .skinsifram { width: 980px; height: 589px; margin: auto; margin-top: 156px; position: relative }
.yysDetialRight .skinsifram .yys_skins_tit { background: url(../images/yys_skins_tit_bg.png) center no-repeat; width: 54px; height: 297px; position: absolute; top: 50%; left: -100px; margin-top: -150px; }
.yysDetialRight .skinsifram .yys_skins_tit .b1 { width: 28px; height: 220px; font-size: 28px; font-family: Arial-Black, Arial; font-weight: 900; color: #4C3829; line-height: 38px; letter-spacing: 6px; margin: auto; margin-top: 20px; display: block; display: flex; align-items: center; justify-content: space-around; flex-direction: column; padding-left: 7px; }
.yysDetialRight .skinsifram .yys_skins_tit .b2 { width: 80px; height: 49px; background: url(../images/yys_skins_tit_dj.png) no-repeat; position: absolute; bottom: 25px; left: -15px; }
.yysDetialRight .skinsifram .yys_skins_tit.yys_n .b2 { background-position: 2px 0; }
.yysDetialRight .skinsifram .yys_skins_tit.yys_sr .b2 { background-position: -79px 0; }
.yysDetialRight .skinsifram .yys_skins_tit.yys_sp .b2 { background-position: -158px 0; }
.yysDetialRight .skinsifram .yys_skins_tit.yys_ssr .b2 { background-position: -240px 0; }
.yysDetialRight .skinsifram .yys_skins_tit.yys_r .b2 { background-position: -318px 0; }
.yysDetialRight .hero_list_dk { background: url(../images/yys_skill_display_page_nobg.png) left repeat-y; width: 190px; height: 100%; position: fixed; top: 0px; }
.yysDetialRight .hero_list_dk .selectHeroList { width: 100px; height: 62px; line-height: 62px; font-size: 14px; font-family: MicrosoftYaHei; color: #FFC800; letter-spacing: 1px; cursor: pointer; position: fixed; left: 25px; top: 50%; margin-top: -31px; background: url(../images/yys_hero_list_dk.png) right no-repeat; }
.yysDetialRight #zzsc { height: 165px; width: 980px; margin-right: auto; margin-left: auto; position: relative; margin-top: 8px; }
.yysDetialRight #zzsc .prev { background: url(../images/yys_skins_list_left_slide.png) no-repeat; display: block; height: 116px; width: 103px; cursor: pointer; position: absolute; left: 0px; top: 0px; }
.yysDetialRight #zzsc .next { background: url(../images/yys_skins_list_right_slide.png) no-repeat; display: block; height: 116px; width: 103px; cursor: pointer; top: 0px; right: 0px; position: absolute; }
.yysDetialRight #zzsc .prev a { width: 100%; height: 100%; display: block; }
.yysDetialRight #zzsc .next a { width: 100%; height: 100%; display: block; }
.yysDetialRight #zzsc .v_show { min-height: 135px; width: 804px; margin-left: 103px; overflow: hidden; position: relative; }
.yysDetialRight #zzsc .v_cont { width: 6650px; position: absolute; left: 0px; top: 0px; }
.yysDetialRight #zzsc .v_cont ul { float: left; text-align: center; line-height: 50px; }
.yysDetialRight #zzsc .v_cont ul .skinsbox { width: 804px; height: 250px; float: left; margin-top: 3px; }
.yysDetialRight #zzsc .v_cont ul .skinsbox .skinsSignup { float: left; width: 23%; margin-right: 15px; height: 145px; cursor: pointer; display: inline-block; }
.yysDetialRight #zzsc .v_cont ul .skinsbox .skinsSignup .skinsimg { height: 89px; }
.yysDetialRight #zzsc .v_cont ul .skinsbox .skinsSignup.current .skinsimg { -webkit-box-shadow: #F5BA03 0px 0px 11px 0px; -moz-box-shadow: #F5BA03 0px 0px 11px 0px; box-shadow: #F5BA03 0px 0px 11px 0px; border: 2px solid #EEB505; margin: 10px 0px 0px 10px; }
.yysDetialRight #zzsc .v_cont ul .skinsbox .skinsSignup .skinsname { width: 100%; min-height: 22px; font-size: 16px; text-align: center; color: #F8DEB3; line-height: 22px; letter-spacing: 1px; margin-top: 8px }
.yysDetialRight #zzsc .v_cont ul .skinsbox .skinsSignup img { width: 100%; height: 85px; display: block; margin: auto; }
.yysDetialRight #zzsc .circle { width: 100%; height: 8px; margin-top: 15px; text-align: center; }
.yysDetialRight #zzsc .circle li { background: #252D48; height: 8px; width: 8px; border-radius: 4px; line-height: 0px; cursor: pointer; margin: auto; text-align: center; display: inline-block; margin-left: 10px; }
.yysDetialRight #zzsc .circle .circle-cur { background-color: #13AFF0; }
/*尼尔*/
.nierReferenceMain { background: url(../images/nierautomata_bg.jpg) top center fixed no-repeat; margin-top: 60px; min-height: 1080px; width: 100%; }
.nierReferenceCon { width: 1288px; margin: auto; }
.referenceNierLogo { width: 660px; height: 102px; margin: auto; overflow: hidden; padding-top: 120px; }
.nierReferenceMain .rwxz { width: 178px; height: 36px; margin: auto; margin-top: 40px; }
.nierHeroList { margin-top: 80px; }
.nierHeroList .single { float: left; width: 262px; height: 386px; position: relative; margin-right: 70px; }
.nierHeroList .single:nth-child(4n+0) { margin-right: 0px; }
.nierHeroList .single .role { position: absolute; bottom: 0px; z-index: 10; width: 100%; height: 100%; text-align: center }
.nierHeroList .single .role img { z-index: 11; position: absolute; bottom: 0px; left: 50%; margin-left: -90px; }
.nierHeroList .single .rolename { position: absolute; bottom: 0px; width: 262px; height: 69px; text-align: center; padding-top: 8px; box-sizing: border-box; z-index: 10; }
.nierHeroList .single .rolename_bg { background: url(../images/rolename_bg.png) no-repeat; position: absolute; bottom: 0px; width: 262px; height: 69px; text-align: center; padding-top: 8px; box-sizing: border-box; z-index: 8; }
.nierHeroList .single .rolename img { z-index: 12; }
.nierHeroList .single .rolename, .nierHeroList .single .rolename_bg, .nierHeroList .single .role img { -webkit-transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); }
.nierHeroList .single:hover .rolename, .nierHeroList .single:hover .rolename_bg { bottom: 20px; }
.nierHeroList .single:hover .role img { transform: scale(1.1); -ms-transform: scale(1.1); }
.nierHerosDetail { margin-top: 60px; min-height: 1080px; width: 100%; }
.nierDetailLeft .detailsHero { margin-top: 180px; }
.nierDetailLeft .rwxz { width: 89px; height: 26px; background: url(../images/nier_rwxz.png) no-repeat; margin-top: 5px; }
.detailMain { margin-top: 60px; min-height: 1080px; width: 100%; background: linear-gradient(180deg, #030F18 0%, rgba(3, 11, 17, 0.86) 100%); }
.detailAuto { margin: auto; width: 1220px; }
.nierDetailLeft { width: 250px; float: left; }
.nierDetailLeft .character { width: 170px; margin: auto; height: 230px; margin-top: 16px; }
.nierDetailLeft .character .antenna_up { width: 30px; height: 10px; background: url(../images/antenna_up.png) no-repeat; position: relative; top: 22px; left: -29px; }
.nierDetailLeft .character .antenna_down { width: 30px; height: 10px; background: url(../images/antenna_down.png) no-repeat; position: relative; top: 117px; left: 170px; }
.nierDetailLeft .character a { width: 68px; height: 79px; background: url("../images/character_f.png") no-repeat; float: left; cursor: pointer; }
.nierDetailLeft .character > a:hover, .nierDetailLeft .character > a.active { background: url("../images/character_h.png"); color: #fff; cursor: pointer; }
.nierDetailLeft .character > a.c1 { background-position: 0 0; }
.nierDetailLeft .character > a.c2 { background-position: -68px 0; }
.nierDetailLeft .character > a.c3 { background-position: -136px 0; }
.nierDetailLeft .character > a.c4 { background-position: -204px 0; }
.clearfix { clear: both; zoom: 1; }
.c3, .c4 { position: relative; top: -20px; left: 34px; }
.nierDetailRight { width: 900px; float: right }
.nierDetailRight .weaponTit { width: 100%; height: 52px; color: #C2C5C5; line-height: 52px; font-size: 40px; margin-top: 104px; }
.nierDetailRight .skinsifram { width: 900px; height: 545px; margin: auto; margin-top: 8px; }
.nierDetailRight #zzsc { height: 165px; width: 900px; margin-right: auto; margin-left: auto; position: relative; margin-top: 16px; }
.nierDetailRight #zzsc .prev { background: url(../images/nier_skins_list_left_slide.png) center no-repeat; display: block; height: 106px; width: 40px; cursor: pointer; position: absolute; left: 0px; top: 0px; }
.nierDetailRight #zzsc .next { background: url(../images/nier_skins_list_right_slide.png) center no-repeat; display: block; height: 106px; width: 40px; cursor: pointer; top: 0px; right: 0px; position: absolute; }
.nierDetailRight #zzsc .prev a { width: 100%; height: 100%; display: block; }
.nierDetailRight #zzsc .next a { width: 100%; height: 100%; display: block; }
.nierDetailRight #zzsc .v_show { min-height: 145px; width: 808px; margin-left: 46px; overflow: hidden; position: relative; }
.nierDetailRight #zzsc .v_cont { width: 6650px; position: absolute; left: 0px; top: 0px; }
.nierDetailRight #zzsc .v_cont ul { float: left; text-align: center; line-height: 50px; }
.nierDetailRight #zzsc .v_cont ul .skinsbox { width: 808px; height: 250px; float: left; margin-top: 3px; }
.nierDetailRight #zzsc .v_cont ul .skinsbox .skinsSignup { float: left; width: 190px; height: 145px; cursor: pointer; display: inline-block; margin-right: 16px; }
.nierDetailRight #zzsc .v_cont ul .skinsbox .skinsSignup:nth-child(4n+0) { margin-right: 0px; }
.nierDetailRight #zzsc .v_cont ul .skinsbox .skinsSignup .skinsimg { width: 186px; height: 102px; padding: 2px; }
.nierDetailRight #zzsc .v_cont ul .skinsbox .skinsSignup .skinsimg span { width: 186px; height: 102px; background: rgba(28, 33, 38, 0.69); display: block; position: absolute; }
.nierDetailRight #zzsc .v_cont ul .skinsbox .skinsSignup .skinsname { width: 100%; height: 24px; font-size: 16px; text-align: center; color: #C2C5C5; line-height: 24px; letter-spacing: 1px; }
.nierDetailRight #zzsc .v_cont ul .skinsbox .skinsSignup img { width: 186px; height: 102px; display: block; margin: auto; }
.nierDetailRight #zzsc .v_cont ul .skinsbox .skinsSignup.current .skinsimg { border: 2px solid #4B3F41; }
.nierDetailRight #zzsc .v_cont ul .skinsbox .skinsSignup.current .skinsimg { padding: 0px; }
.nierDetailRight #zzsc .v_cont ul .skinsbox .skinsSignup.current .skinsimg span { background: none }
.nierDetailRight #zzsc .circle { width: 100%; height: 8px; margin-top: 15px; text-align: center; }
.nierDetailRight #zzsc .circle li { border: 1px solid #4B3F41; height: 8px; width: 8px; border-radius: 4px; line-height: 0px; cursor: pointer; margin: auto; text-align: center; display: inline-block; margin-left: 10px; }
.nierDetailRight #zzsc .circle .circle-cur { background: #C2C5C5; }
/**/
.herosCurrentPage .lolDetialLeft, .herosCurrentPage .wzryDetialLeft, .herosCurrentPage .yysDetialLeft { left: 0px; }
.herosCurrentPage .hero_list_sq { left: 454px; }
.herosCurrentPage .clickShouqi { left: 500px; }
.herosCurrentPage .herosDetialRight, .herosCurrentPage .yysDetialRight { right: 560px; margin-left: 560px; }
.herosCurrentPage .hero_list_dk { display: none }
.herosCurrentPage .selectHeroList { left: 0px; }
/*原神*/
.ysReferenceMain { background: url(../images/yuanshen/main_bg.jpg) top center fixed no-repeat; margin-top: 60px; min-height: 1080px; width: 100%; overflow: hidden; }
.ysReferenceCon { margin-top: 58px; }
.referenceYsLogo { width: 183px; height: 134px; margin: auto; position: relative; margin-bottom:60px; }
.referenceYsLogo::before { left: 0; -webkit-transform: translate(calc(-100% - 32px), -50%); transform: translate(calc(-100% - 32px), -50%); }
.referenceYsLogo::after { right: 0; -webkit-transform: translate(calc(100% + 32px), -50%) rotateY(180deg);/* transform: translate(calc(100% + 32px), -50%) rotateY(180deg); */
}
.referenceYsLogo::before, .referenceYsLogo::after { content: ''; position: absolute; top: 50%; width: 385px; height: 14px; background: url(../images/yuanshen/nav_jt_bg.png) no-repeat; }
.ysReferenceCon .city { width: 100%; }
.ysReferenceCon .city__list { overflow: hidden; }
.ysReferenceCon .city__list-bg { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: center no-repeat; background-size: 100% auto; transition: -webkit-transform 0.4s 0s ease-out; transition: transform 0.4s 0s ease-out; transition: transform 0.4s 0s ease-out, -webkit-transform 0.4s 0s ease-out; }
.ysReferenceCon .city__list-item { position: relative; width: 100%; height: 260px; background: center no-repeat; background-size: 100% auto; cursor: pointer; overflow: hidden; }
.ysReferenceCon .city__list-item--disable { pointer-events: none; }
.ysReferenceCon .city__list-item--disable p,  .ysReferenceCon .city__list-item--disable a { color: rgba(255, 255, 255, 0.3) !important; background: rgba(0, 0, 0, 0.3) !important; }
.ysReferenceCon .city__list-item::before { position: absolute; z-index: 2; top: 0; left: 0; display: block; content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); }
.ysReferenceCon .city__list-item .city__list-char { position: absolute; z-index: 2; top: 0; left: 0; display: block; content: ''; width: 100%; height: 100%; background-repeat: no-repeat; background-position: calc(50% + 360px) 50%; background-size: 960px 260px; opacity: 0; transition: all 0.2s 0s ease-in; border: #fff solid 6px; box-sizing: border-box; }
.ysReferenceCon .city__list-item:hover .city__list-bg { -webkit-transform: scale(1.05); transform: scale(1.05); }
.ysReferenceCon .city__list-item:hover::before { background: rgba(0, 0, 0, 0.2); }
.ysReferenceCon .city__list-item:hover .city__list-char { opacity: 1; }
.ysReferenceCon .city__list-item:hover p::after,  .ysReferenceCon .city__list-item:hover a::after { opacity: 1; }
.ysReferenceCon .city__list-item p,  .ysReferenceCon .city__list-item a { display: inline-block; position: relative; z-index: 3; font-size: 36px; color: #fff; line-height: 260px; width: 100%; height: 260px; background: url(../images/yuanshen/34223424.png) center no-repeat; background-size: 132px; text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); margin: 0 !important; overflow: hidden; }
.ysReferenceCon .city__list-item p::after { position: absolute; bottom: 91px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; content: ''; width: 210px; height: 10px;  background: url(../images/yuanshen/4523542352.png) center no-repeat;  background-size: 210px 10px; opacity: 0; }


/*原神详情*/


button { border: none; background: transparent; }
*:focus { outline: none; }
.swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1 }
.swiper-container-no-flexbox .swiper-slide { float: left }
.swiper-container-vertical>.swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column }
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box }
.swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
.swiper-container-multirow>.swiper-wrapper { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap }
.swiper-container-free-mode>.swiper-wrapper { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto }
.swiper-slide { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-property: transform, -webkit-transform }
.swiper-slide-invisible-blank { visibility: hidden }
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto }
.swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; -o-transition-property: transform, height; transition-property: transform, height; transition-property: transform, height, -webkit-transform }
.swiper-container-3d { -webkit-perspective: 1200px; perspective: 1200px }
.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d }
.swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10 }
.swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(right, rgba(0,0,0,.5), rgba(0,0,0,0)); background-image: -o-linear-gradient(right, rgba(0,0,0,.5), rgba(0,0,0,0)); background-image: -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0))); background-image: linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,0)) }
.swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(left, rgba(0,0,0,.5), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,.5), rgba(0,0,0,0)); background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0))); background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,0)) }
.swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.5), rgba(0,0,0,0)); background-image: -o-linear-gradient(bottom, rgba(0,0,0,.5), rgba(0,0,0,0)); background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0))); background-image: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0)) }
.swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(top, rgba(0,0,0,.5), rgba(0,0,0,0)); background-image: -o-linear-gradient(top, rgba(0,0,0,.5), rgba(0,0,0,0)); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0))); background-image: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0)) }
.swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal>.swiper-wrapper { -ms-touch-action: pan-y; touch-action: pan-y }
.swiper-container-wp8-vertical, .swiper-container-wp8-vertical>.swiper-wrapper { -ms-touch-action: pan-x; touch-action: pan-x }
.swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none }

.swiper-button-lock { display: none }
.swiper-pagination { position: absolute; text-align: center; -webkit-transition: .3s opacity; -o-transition: .3s opacity; transition: .3s opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10 }
.swiper-pagination.swiper-pagination-hidden { opacity: 0 }
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100% }
.swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0 }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(.33); -ms-transform: scale(.33); transform: scale(.33); position: relative }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(.66); -ms-transform: scale(.66); transform: scale(.66) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(.33); -ms-transform: scale(.33); transform: scale(.33) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(.66); -ms-transform: scale(.66); transform: scale(.66) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(.33); -ms-transform: scale(.33); transform: scale(.33) }
.swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: .2 }
button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none }
.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer }
.swiper-pagination-bullet-active { opacity: 1; background: #007aff }
.swiper-container-vertical>.swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block }
.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 8px }
.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: .2s top, .2s -webkit-transform; -o-transition: .2s top, .2s -webkit-transform; transition: .2s top, .2s -webkit-transform; -o-transition: .2s transform, .2s top; -webkit-transition: .2s transform, .2s top; transition: .2s transform, .2s top; -webkit-transition: .2s transform, .2s top, .2s -webkit-transform; -o-transition: .2s transform, .2s top, .2s -webkit-transform; transition: .2s transform, .2s top, .2s -webkit-transform }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px }
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap }
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: .2s left, .2s -webkit-transform; -o-transition: .2s left, .2s -webkit-transform; transition: .2s left, .2s -webkit-transform; -o-transition: .2s transform, .2s left; -webkit-transition: .2s transform, .2s left; transition: .2s transform, .2s left; -webkit-transition: .2s transform, .2s left, .2s -webkit-transform; -o-transition: .2s transform, .2s left, .2s -webkit-transform; transition: .2s transform, .2s left, .2s -webkit-transform }
.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: .2s right, .2s -webkit-transform; -o-transition: .2s right, .2s -webkit-transform; transition: .2s right, .2s -webkit-transform; -o-transition: .2s transform, .2s right; -webkit-transition: .2s transform, .2s right; transition: .2s transform, .2s right; -webkit-transition: .2s transform, .2s right, .2s -webkit-transform; -o-transition: .2s transform, .2s right, .2s -webkit-transform; transition: .2s transform, .2s right, .2s -webkit-transform }
.swiper-pagination-progressbar { background: rgba(0,0,0,.25); position: absolute }
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top }
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top }
.swiper-container-horizontal>.swiper-pagination-progressbar, .swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0 }
.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical>.swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0 }
.swiper-pagination-white .swiper-pagination-bullet-active { background: #fff }
.swiper-pagination-progressbar.swiper-pagination-white { background: rgba(255,255,255,.25) }
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { background: #fff }
.swiper-pagination-black .swiper-pagination-bullet-active { background: #000 }
.swiper-pagination-progressbar.swiper-pagination-black { background: rgba(0,0,0,.25) }
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { background: #000 }
.swiper-pagination-lock { display: none }
.swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0,0,0,.1) }
.swiper-container-horizontal>.swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98% }
.swiper-container-vertical>.swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98% }
.swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0,0,0,.5); border-radius: 10px; left: 0; top: 0 }
.swiper-scrollbar-cursor-drag { cursor: move }
.swiper-scrollbar-lock { display: none }
.swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center }
.swiper-zoom-container>canvas, .swiper-zoom-container>img, .swiper-zoom-container>svg { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain }
.swiper-slide-zoomed { cursor: move }
.swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite }

@-webkit-keyframes swiper-preloader-spin { 100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes swiper-preloader-spin { 100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
.swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000 }
.swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out }
.swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity }
.swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none }
.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto }
.swiper-container-cube { overflow: visible }
.swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100% }
.swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none }
.swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0 }
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto }
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next+.swiper-slide, .swiper-container-cube .swiper-slide-prev { pointer-events: auto; visibility: visible }
.swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden }
.swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: .6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0 }
.swiper-container-flip { overflow: visible }
.swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1 }
.swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none }
.swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto }
.swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden }
.swiper-container-coverflow .swiper-wrapper { -ms-perspective: 1200px }
@charset "UTF-8";
/* 根据设计再做调整 */
.mCSB_scrollTools { width: 8px; }
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 4px; }
.mCSB_inside > .mCSB_container { margin-right: 32px; }
.character { position: relative; width: 100%; height: 100vh; overflow: hidden; font-size: 12px; }
.character__bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-position: center; background-size: cover; -webkit-transform-origin: center; transform-origin: center; }
.character__bg1 { -webkit-animation: breath 80s infinite linear; animation: breath 80s infinite linear; opacity: 1; }
.character__bg2 { -webkit-animation: bg-change 15s infinite linear, breath 80s infinite linear; animation: bg-change 15s infinite linear, breath 80s infinite linear; opacity: 0; }
.character__sidebar { position: absolute; z-index: 9; top: 0; left: 0; width: 370px; height: 100%; box-sizing: border-box; padding-top: 187px; }
.character__sidebar::before { position: absolute; top: 0; left: 37px; display: block; content: ''; width: 2px; height: 1280px; background: rgba(255, 255, 255, 0.14); }
.character__city { width: 100%; height: 54px; line-height: 54px; font-size: 18px; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); box-sizing: border-box; padding-left: 56px; background: 18px center no-repeat; background-image: url(../images/yuanshen/456464.png); background-size: 40px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.character__city a { display: inline-block; width: 40%; height: 100%; color: #fff; cursor: pointer; }
.character__city--active { text-shadow: none; padding-left: 70px; background: left center no-repeat; background-image: url(../images/yuanshen/1321515.png); background-size: contain; pointer-events: none; }
.character__city--disable { pointer-events: none; }
.character__main { position: relative; width: 100%; height: 100%;  background: url(../images/yuanshen/6c9d197.png) no-repeat; background-position: center bottom; background-size: auto 100vh; }
.character__swiper--con { position: relative; width: 100%; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.character__swiper--con .swiper-slide { position: relative; width: 100%; height: 100%; opacity: 0 !important; }
.character__swiper--con .swiper-slide::after { position: absolute; z-index: 3; bottom: 0; left: calc(50% - 79vh); display: block; content: ''; width: 154vh; height: 52vh; background: url(/main/_nuxt/img/f43c391.png) center no-repeat; background-size: 154vh 52vh; }
.character__swiper--con .swiper-slide-active { opacity: 1 !important; }
.character .swiper-slide-active .character__person, .character .swiper-slide-active .character__content { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
.character .swiper-slide-active .character__sen { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); }
.character__person { position: absolute; top: 0; left: calc(50% - 63vh); width: auto; height: 100vh; opacity: 0; -webkit-transform: translateX(500px); transform: translateX(500px); transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
.character__icon { position: absolute; top: 10vh; left: calc(50% - 60vh); width: auto; height: 378px; opacity: 0.1; }
.character__content { position: absolute; z-index: 4; top: 18vh; left: calc(50% - 53vh); width: 550px; -webkit-transform: translateX(-300px); transform: translateX(-300px); transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); text-align: justify; height: 110px;
font-size: 78px;
font-weight: 900;
color: #FFFFFF;
line-height: 110px;}
.character__skinsifram{ position: absolute; z-index: 4; top: 34vh; left: calc(50% - 21vh); width: 550px; -webkit-transform: translateX(-300px); transform: translateX(-300px); transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); text-align: justify; width:666px; height:373px;}
.character__content::before { display: block; content: ''; width: 180px; height: 4px; background: #e3bc8c; }
.character__name { width: 50vh; height: auto; margin-top: 20px; }

.character__cv__name { position: relative; overflow: hidden; }
.character__cv__name > div { display: flex; white-space: nowrap; }
.character__cv__name > div p:last-child { display: none; }
.character__cv__rowup { -webkit-animation: 10s rowup linear infinite normal; animation: 10s rowup linear infinite normal; -webkit-animation-delay: 2s; animation-delay: 2s; }
.character__cv__rowup p { margin-right: 20px; }
.character__cv__rowup p:last-child { display: block !important; }

.character__switch { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 0 4px; box-sizing: border-box; background: rgba(18, 18, 18, 0.6); border-radius: 16px; cursor: pointer; }
.character__switch--wrap { position: absolute; top: 11px; right: -120px; width: 80px; height: 32px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, 0.1); box-sizing: content-box; }
.character__sbtn { width: 26px; height: 26px; border-radius: 50%; background: #dbb17d; color: #dbb17d; font-size: 0; text-align: center; line-height: 26px; }
.character__sbtn--active { background: none; font-size: 20px; }
.character__intro { display: flex; width: 100%; min-height: 26px; max-height: 150px; overflow-y: auto; padding: 10px 0 10px 15px; box-sizing: border-box; background: rgba(1, 1, 1, 0.5); font-size: 16px; color: #fff; margin-top: 17px; line-height: 26px; }
.character__intro-content { width: 455px; }
.character__intro::before { flex-shrink: 0; display: block; content: ''; width: 20px; height: 20px; background: url() center no-repeat; background-size: 20px; margin-right: 24px; margin-top: 4px; }
.character__sen { position: absolute; top: 62vh; left: calc(50% - 26vh); opacity: 0; transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s; -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transform-origin: left center; transform-origin: left center; }
.character__page { display: flex; justify-content: center; position: absolute; z-index: 9; left: 0; bottom: 0; padding-top: 22px; width: 100%; height: 190px; background: rgba(204, 204, 204, 0.2); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.character__page::before { position: absolute; bottom: 0; left: 0; display: block; content: ''; width: 100%; height: 156px; background: url(../images/yuanshen/231321321.png) center bottom repeat no-repeat; }
.character__page .swiper-container { margin: 0 !important; }
.character__page .swiper-btn-prev { position: absolute; top: 50px; left: 50%; width: 45px; height: 64px; background: url(../images/yuanshen/swiper-btn-prev.png) center no-repeat; background-size: cover; -webkit-transform: translateX(-520px); transform: translateX(-520px); cursor: pointer; }
.character__page .swiper-btn-next { position: absolute; top: 50px; right: 50%; width: 45px; height: 64px; background: url(../images/yuanshen/swiper-btn-next.png) center no-repeat; background-size: cover; -webkit-transform: translateX(520px); transform: translateX(520px); cursor: pointer; }
.character__swiper--page { width: 830px; height: 100%; }
.character__swiper--page .swiper-wrapper { width: 100%; height: 150px; align-items: center; }
.character__swiper--page .swiper-slide { width: 110px !important; height: 132px; background: transparent url(../images/yuanshen/342424.png) no-repeat 0 0; font-size: 0; cursor: pointer; }
.character__swiper--page .swiper-slide:last-child { margin-right: 0; }
.character__swiper--page .swiper-slide:hover, .character__swiper--page .swiper-slide-thumb-active { background-position: 0 -132px; }
.character__swiper--page .swiper-slide:hover p, .character__swiper--page .swiper-slide-thumb-active p { color: #121212; }
.character__swiper--page img { display: block; margin: 2px auto 0; width: 106px; height: 106px; }
.character__swiper--page p { font-size: 16px; line-height: 22px; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); text-align: center; }
@media screen and (max-height: 900px) {
.character__sen { -webkit-transform: scale(0.75) !important; transform: scale(0.75) !important; }
.character .swiper-slide-active .character__sen { -webkit-transform: scale(0.75) !important; transform: scale(0.75) !important; }
}
@media screen and (max-height: 800px) {
.character { height: 800px; }
.character__main { background-size: auto 800px; }
.character__main::after { left: calc(50% - 632px); display: block; width: 1232px; height: 416px; background: url(/main/_nuxt/img/f43c391.png) center no-repeat; background-size: 1232px 416px; }
.character__person { left: calc(50% - 504px); height: 800px; }
.character__icon { top: 68px; left: calc(50% - 496px) !important; }
.character__content { top: 120px; left: calc(50% - 424px) !important; }
.character__name { width: 400px; }
.character__sen { opacity: 0; }
.character .swiper-slide-active .character__sen { opacity: 0; }
}
@media screen and (max-width: 1920px) {
.character__sen { -webkit-transform: scale(1); transform: scale(1); }
.character .swiper-slide-active .character__sen { -webkit-transform: scale(1); transform: scale(1); }
}
@media screen and (max-width: 1640px) {
.character__content { left: calc(50% - 43vh); }
.character__icon { left: calc(50% - 50vh); }
.character__sen { left: calc(50% - 140px); }
}
@media screen and (max-width: 1280px) {
.character__person { left: calc(50% - 53vh); }
}
@-webkit-keyframes rowup { 0% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
100% {
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
}
}
@keyframes rowup { 0% {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
100% {
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
}
}
@-webkit-keyframes breath { 0% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
50% {
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
100% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
}
@keyframes breath { 0% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
50% {
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
100% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
}
@-webkit-keyframes bg-change { 48% {
 opacity: 0;
}
50% {
 opacity: 1;
}
98% {
 opacity: 1;
}
100% {
 opacity: 0;
}
}
@keyframes bg-change { 48% {
 opacity: 0;
}
50% {
 opacity: 1;
}
98% {
 opacity: 1;
}
100% {
 opacity: 0;
}
}

.num ul{ position:absolute; left:0; top:0;}

/*失落方舟*/
.yysReferenceMain { background: url(../images/yys_bg.jpg) top center fixed no-repeat; margin-top: 60px; min-height: 1080px; width: 100%; }


@media screen and (min-width:600px) and (max-width:980px){
            .game_reference_box{ width:900px;}
			.referenceCon { max-width:100%; }
			.jSearchHeroDiv{ max-width:95%; margin:auto;}
			.game_reference_box .gameList .signup:nth-child(3n+0){ margin-right:16px}
}

.reference-bankuai-nav{ width:100%; height:62px; text-align:center; margin-top:60px;margin-bottom:60px;}
.reference-bankuai-nav a{display: inline-block; color:#346D86; width:180px;height:62px; font-size:26px; line-height:60px; position:relative; cursor:pointer }
.reference-bankuai-nav a.on{ color:#70FFF7}
.reference-bankuai-nav a.on span{width: 33px;height: 4px;background: #70FFF7;border-radius: 2px; position:absolute; left:50%; top:55px; display:block; margin-left:-16px;}


/*忘川风华录*/
.wcfhlReferenceMain {  margin-top: 60px; min-height: 1080px; width: 100%; overflow: hidden; }
.wcfhlReferenceCon { }
.wcfhlReferenceCon .topbanner{ width:100%; height:220px; position:relative; text-align:center;}
.wcfhlReferenceCon .topbanner .tp{position:absolute;bottom:22px; left:350px; font-size:16px;}
.wcfhlReferenceCon .topbanner .game_style,.wcfhlReferenceCon .topbanner .game_type{ float:left; height:35px; padding:0px 30px; background: rgba(255, 255, 255, 0.2); color:#fff;  height:35px; line-height:35px; display:block }
.wcfhlReferenceCon .topbanner .game_style{ margin-left:10px;}
.wcfhlReferenceCon .videoCon{ width:1770px; margin:auto; margin-top:10px;}
.wcfhlReferenceCon .videoCon .menu{ border:1px solid #1D3143; width:270px; height:650px; float:left;}


.wcfhlReferenceCon .videoCon .menulist{ width:100%; height:600px; float:left; overflow:auto;}
.wcfhlReferenceCon .videoCon .menulist::-webkit-scrollbar {
  /*婊氬姩鏉℃暣浣撴牱寮�*/
  width : 4px;  /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
 height: 1px;
}
 .wcfhlReferenceCon .videoCon .menulist::-webkit-scrollbar-thumb {
  /*婊氬姩鏉￠噷闈㈠皬鏂瑰潡*/
  box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
 background : #346D86;
}
 .wcfhlReferenceCon .videoCon .menulist::-webkit-scrollbar-track {
  /*婊氬姩鏉￠噷闈㈣建閬�*/
  box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
 background : none;
}
.wcfhlReferenceCon .videoCon .menu ul{ width:245px; height:100%; margin:auto !important;}
.videoCon .menu .nav{ border-bottom:2px solid #346D86; width:100%; padding-left:5px; color:#346D86; font-size:16px; height:35px; font-weight:bold; line-height:35px;box-sizing:border-box; margin-bottom:10px;letter-spacing: 1px;}
.videoCon .menu ul a{ font-size:16px; color:#44596D; width:100%; height:30px; line-height:30px; display:block; margin-bottom:10px;letter-spacing: 1px;}
.videoCon .menu ul a:hover{ color:#70FFF7}
.videoCon .menu ul a.on{  color:#70FFF7} 
.videoCon .menu ul a .name{ float:left}
.videoCon .menu ul a .count{ float:right; margin-right:6px;}
 
 
.wcfhlReferenceCon .videoCon .videolist{ width:1430px; float:right}
.videoCon .videolist .nav{ border-bottom:2px solid #346D86; width:100%; padding-left:5px; color:#346D86; font-size:16px; height:35px; font-weight:bold; line-height:35px;box-sizing:border-box; margin-bottom:10px;letter-spacing: 1px;}
 
.videolist .signuplist .single {width: 458px;height: 322px;background:#122130; border:1px solid #23374A; float:left; cursor:pointer; position: relative; overflow: hidden; margin-bottom: 24px; margin-right:25px; }
.videolist .signuplist .single:nth-child(3n+0){ margin-right:0px;}
.videolist .signuplist .single .jump { width: 100%; height: 100%; display: block; cursor: pointer }
.videolist .signuplist .single .cover{ width:100%; max-height:260px; height:260px; background:#000; vertical-align:middle;}
.videolist .signuplist .single .cover img{ max-width:100%; max-height:100%;}
.videolist .signuplist .single .cover_gif { background:#000;width:100%; height:260px; display: none }
.videolist .signuplist .single .cover_gif .cover-video { width: 100%; height: 100%; }
.videolist .signuplist .single .detail { position: absolute; bottom: 0px; width: 100%; height: 60px;  z-index:1}
.videolist .signuplist .single .detail li:nth-child(2) { width: 100%; height: 16px; display: block; margin-top:5px; }
.videolist .signuplist .single .detail li:nth-child(2) span { font-size: 14px; color: #44596D; margin-left: 6px; display: block; float: left }
.videolist .signuplist .single .detail li:nth-child(1) { font-size: 18px; color:#DCF3FA;font-weight: 600; margin-top: 4px; width: 100%; height: 25px; line-height: 25px; overflow: hidden; padding-left: 7px; box-sizing: border-box; }


#video_point { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 100001; background-color: rgba(14, 18, 37, 0.9); overflow-y: scroll; overflow-x: hidden; display: none; }
.videoDetial { position:relative; width:980px; margin:auto; margin-top:110px;}
.videoDetial .popup-close{position: absolute;right: -80px;top: 0px;cursor: pointer;width: 33px;height: 33px;background: url(../images/works_close2.png) no-repeat;}

/**/
.videoDetial .skinstitle { width: 100%; height: 40px; margin: auto; display: block; font-size: 24px; font-family: Arial-Black, Arial;  color: rgba(190,241,253,1); line-height: 40px; letter-spacing: 3px; }
.videoDetial .skinsifram { width: 980px; height: 589px; margin: auto; margin-top: 5px; background:#000; position:relative; }
.videoDetial .skinsifram video{display: block;
            min-height: 100%;
            min-width: 100%;position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);}
 /*皮肤切换*/

.videoDetial #zzsc { height: 165px; width: 980px; margin-right: auto; margin-left: auto; position: relative; margin-top: 8px; }
.videoDetial #zzsc .prev { background: url(../images/skins_list_left_slide.png) no-repeat; display: block; height: 116px; width: 103px; cursor: pointer; position: absolute; left: 0px; top: 0px; }
.videoDetial #zzsc .next { background: url(../images/skins_list_right_slide.png) no-repeat; display: block; height: 116px; width: 103px; cursor: pointer; top: 0px; right: 0px; position: absolute; }
.videoDetial #zzsc .prev a { width: 100%; height: 100%; display: block; }
.videoDetial #zzsc .next a { width: 100%; height: 100%; display: block; }
.videoDetial #zzsc .v_show { min-height: 135px; width: 804px; margin-left: 103px; overflow: hidden; position: relative; }
.videoDetial #zzsc .v_cont { width: 6650px; position: absolute; left: 0px; top: 0px; }
.videoDetial #zzsc .v_cont ul { float: left; text-align: center; line-height: 50px; }
.videoDetial #zzsc .v_cont ul .skinsbox { width: 804px; height: 250px; float: left; margin-top: 3px; }
.videoDetial #zzsc .v_cont ul .skinsbox .skinsSignup { float: left; width: 25%; height: 145px; cursor: pointer; display: inline-block; }
.videoDetial #zzsc .v_cont ul .skinsbox .skinsSignup .skinsimg { width: 100%; height: 115px; }
.videoDetial #zzsc .v_cont ul .skinsbox .skinsSignup.current .skinsimg { background: url(../images/skins_xuanzhong_bg.png) no-repeat; }
.videoDetial #zzsc .v_cont ul .skinsbox .skinsSignup .skinsname { width: 100%; min-height: 20px; font-size: 14px; text-align: center; color: rgba(160,204,214,1); line-height: 20px; letter-spacing: 1px; }
.videoDetial #zzsc .v_cont ul .skinsbox .skinsSignup img { width: calc(100% - 30px); ; height: 85px; display: block; margin: auto; padding-top: 15px; margin-left: 15px; }
.videoDetial #zzsc .circle { width: 100%; height: 8px; margin-top: 15px; text-align: center; }
.videoDetial #zzsc .circle li { background: #252D48; height: 8px; width: 8px; border-radius: 4px; line-height: 0px; cursor: pointer; margin: auto; text-align: center; display: inline-block; margin-left: 10px; }
.videoDetial #zzsc .circle .circle-cur { background-color: #13AFF0; }