html{
background-color: #000;
}
html,body{
    overflow-x: hidden;
}
div {
    cursor: pointer;
    -webkit-tap-highlight-color:transparent
}
#globalTools{}
#globalTools.none{display: none}

/*video::-webkit-media-controls-enclosure {*/
/*    display: none !important;*/
/*}*/

/*整体*/
.swiper-container-all {
    width: 100%;
    height: 100%;
    font-size: .28rem;
    color: #ecfaff;
    transition: all .15s;
}
.swiper-container-all.active{
    transform: translate(1.4rem,0);
}
.swiper-container-all>.swiper-wrapper{
}
.swiper-container-all>.swiper-wrapper>.swiper-slide{
    position: relative;
    background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//bg_page_all.jpg") repeat-y 0 0 / 7.5rem auto;
}

/*通用按钮组*/
.publicMenu{width: .82rem;padding: .17rem 0;border-radius: .48rem;position: absolute;top: .21rem;left: .33rem;z-index: 10}
.publicMenu.active{background-color: rgba(0,0,0,.4);}
.publicMenu>.menuSprites_1{padding:.17rem;}
.publicMenu>.menuSprites_1>i {
    display: block;width: .48rem;height: .48rem;
    background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//ic_menu_all.png") no-repeat 0 0/.48rem 3.84rem;
}
.publicMenu>.menuGroup{
    /*display: none;*/
    height: 0;
    overflow: hidden;
}
.publicMenu.active>.menuGroup{
    height: auto;
    /*display: block;*/
    transition: all .5s;
    -moz-transition: all .5s;	/* Firefox 4 */
    -webkit-transition: all .5s;	/* Safari 和 Chrome */
    -o-transition: all .5s;	/* Opera */
}
.publicMenu>.menuGroup>.menuItem{padding:.17rem;}
.publicMenu>.menuGroup>.menuItem>i{display: block;width: .48rem;height: .48rem;background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//ic_menu_all.png") no-repeat 0/.48rem 3.84rem;}
.publicMenu>.menuGroup>.menuItem.menuSprites_2>i {background-position: 0 -.48rem;}
.publicMenu>.menuGroup>.menuItem.menuSprites_3>i {background-position: 0 -.96rem;}
.publicMenu>.menuGroup>.menuItem.menuSprites_4>i {background-position: 0 -1.44rem;}
.publicMenu>.menuGroup>.menuItem.menuSprites_5>i {background-position: 0 -1.92rem;}
.publicMenu>.menuGroup>.menuItem.menuSprites_6>i {background-position: 0 -2.4rem;}
.publicMenu>.menuGroup>.menuItem.menuSprites_7>i {background-position: 0 -2.88rem;}
.publicMenu>.menuGroup>.menuItem.menuSprites_8>i {background-position: 0 -3.36rem;}
/*音乐动画*/
/*黄色按钮 购买 专题*/
.buyTheGame{display: inline-block;height: .6rem;line-height: .6rem;text-align: center;color: #000;background-color: #fec107;margin: .5rem 0;font-weight: bolder;padding: 0 .2rem}

@keyframes run{from{background-position: 0 -1.5rem;}to{background-position: 0 0;}}
@-moz-keyframes run{from{background-position: 0 -1.5rem;}to{background-position: 0 0;}}
@-webkit-keyframes run{from{background-position: 0 -1.5rem;}to{background-position: 0 0;}}
@-o-keyframes run{from{background-position: 0 -1.5rem;}to{background-position: 0 0;}}

@keyframes flash{0% {opacity: 1;}50% {opacity: .3;}100% {opacity: 1;} }
@-moz-keyframes flash{0% {opacity: 1;}50% {opacity: .3;}100% {opacity: 1;} }
@-webkit-keyframes flash{0% {opacity: 1;}50% {opacity: .3;}100% {opacity: 1;} }
@-o-keyframes flash{0% {opacity: 1;}50% {opacity: .3;}100% {opacity: 1;} }
/*背景音控制组件*/
#soundBtn{width: .5rem;height: .5rem;background-repeat: no-repeat;background-size: contain;position: absolute;right: .5rem;top: .5rem;z-index: 10}
/*#soundBtn{width: .45rem;height: .38rem;background-repeat: no-repeat;background-size: contain;position: absolute;right: .5rem;top: .5rem;z-index: 10}*/
#soundBtn.soundPlay{background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//wap_musicIcon_anim.png") no-repeat center center/.5rem auto ;
    animation:run .5s steps(3) infinite;
    -moz-animation:run .5s steps(3) infinite; /* Firefox */
    -webkit-animation:run .5s steps(3) infinite; /* Safari and Chrome */
    -o-animation:run .5s steps(3) infinite; /* Opera */}
#soundBtn.soundPause{background-image: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//ic_sound_pause.png")}
/*背景音本体*/
#backSound{width: 0;height: 0;visibility: hidden}
/*返回按钮*/
.backTo {width: 6.5rem;height: .8rem;border-radius: .4rem;color: #fff;line-height: .78rem;font-size: .36rem;text-align: center;background-color: rgba(30,30,30,.9);position: fixed;bottom: 1rem;left: 50%;transform: translate(-50%,0);z-index: 2;display: none;}
.backTo.active {margin-left: 1.4rem;transition: all .15s;}
#backToHome.show{
    display: block;
}
/*二级返回按钮*/
.level2backTo {
    width: 6.5rem;
    height: .8rem;
    border-radius: .4rem;
    color: #fff;
    line-height: .78rem;
    font-size: .36rem;
    text-align: center;
    background-color: rgba(30,30,30,.9);
    margin: 0 auto;
}
/*三级返回按钮*/
.level3backTo {
    width: 2.05rem;
    height: .6rem;
    border-radius: .3rem;
    color: #fff;
    line-height: .58rem;
    border: 1px solid rgba(255,255,255,.3);
    font-size: .26rem;
    text-align: center;
    background-color: rgba(30,30,30,.1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.level3backTo i{width: .29rem;height: .29rem;background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//ic_back_small_white.png") no-repeat center center /.29rem .29rem;}
.level3backTo span{margin-left: .11rem;line-height: 1}
/*内容页 顶部 标题*/
.swiper-slide .page-title{
    height: 1.5rem;
    padding: .46rem 0;
    margin: 0 auto;
    box-sizing: border-box;
    border-bottom: 1px solid #222;
    line-height: 1.5rem;
}
.swiper-slide .page-title img{
    display: block;
    margin: 0 auto;
}

/*蒙版*/

/*首页 第0页*/

.swiper-container-all>.swiper-wrapper>.swiper-slide.page-0{
    background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//img_wap_bg_0.jpg") no-repeat top center;
    background-size: cover;
    min-height: 19.16rem;

    padding: 0 .5rem;
    box-sizing: border-box;
    color: #fff;

}
/*标题*/
.page-0 .page-0-title-1{
    display: block;
    width: 6.5rem;
    margin-top: 2.53rem;
}
/*赞过*/
.page-0 #likeIt{display: flex;align-items: center;margin: 3.33rem auto 0;justify-content: center;border: 1px solid rgba(255,255,255,.1);width: 3.55rem;padding: .21rem 0;line-height: 1;border-radius: 1rem;background-color: rgba(255,255,255,.05);font-size: .36rem}
.page-0 #likeIt i{display: block;background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//ic_heart_white.png") no-repeat 0/.43rem .36rem;width: .43rem;height: .36rem;margin-right: .14rem}
.page-0 #likeIt span{}

.page-0 .jumpBtnGroup {
    width: 2.8rem;
    margin: .2rem auto 0;
}
.page-0 .jumpBtnGroup li{font-size: .38rem;text-align: center;line-height: 2}
.page-0 .page-1-logo-bottom{
    width: 2.62rem;
    margin: 1.76rem auto 0;
    display: block;
}

/*第一页*/
.page-1{
    min-height: 19.16rem;
}

.page-1 .page_1_title_1 img{width: 2.37rem;}
.page-1 #iframeVideoBox {}
.page-1 #iframeVideoBox #iframeVideo{width: 100%;height: 4.2rem;}

/*第二页 主要人物*/
.page-2{min-height: 19.16rem;}
.page-2 .page_2_title_1 img{width: 2.36rem;}

.page-2>#roleBox{}
.page-2>#roleBox>.selectRole{width: 6.5rem;margin: .6rem auto 0;}
.page-2>#roleBox>.selectRole>.role{margin-bottom: .5rem}
.page-2>#roleBox>.selectRole>.role>img{display: block;width: 100%}
.page-2>#roleBox>.selectRole>.role>p{font-size: .3rem;margin: .2rem 0;text-align: center}

/*个人主页*/
.page-2>#roleBox>.homepage{display: none}
.page-2>#roleBox>.homepage>.homePageTop{width: 100%;}
.page-2>#roleBox>.homepage>.homePageTop>img{display: block; width: 100%;}
.page-2>#roleBox>.homepage>.skillArms{width: 6.5rem;margin: .5rem auto}
.page-2>#roleBox>.homepage>.skillArms.homePageToSkill{margin-top: -.6rem}
.page-2>#roleBox>.homepage>.skillArms>img{display: block; width: 100%;}
.page-2>#roleBox>.homepage>.level2backTo{margin-top: 1rem}

/*技能*/
.page-2>#roleBox>.skillBox{display: none;position: relative;overflow: hidden}

/*艾比个人技能*/
.page-2>#roleBox>.skillBox.ellieSkillBox{background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//img_home_page_ellie_skill_top.jpg") center top no-repeat;background-size: contain}

.page-2>#roleBox>.skillBox>.skillContent{position: relative;margin:1.5rem auto 0;width: 6.5rem;height: 8.38rem;background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//bg_page_2_skill.png") no-repeat center center/5.92rem 7.8rem #000;}
/*技能返回按钮 返回人物主页*/
.page-2>#roleBox>.skillBox>.skillContent>.level3backTo{position: absolute;left: 50%;transform: translate(-50%,0);bottom: .37rem}

/*切换技能 中 制作 和 学习 分类*/
.page-2>#roleBox>.skillBox>.skillTabs{width: 2rem;height: 1rem;display: flex;justify-content: center;align-items: center;background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//ic_p2_skillTabs.png") no-repeat top center/2rem 1rem;position: absolute;left: 50%;transform: translate(-50%,0);top: 1.5rem}
.page-2>#roleBox>.skillBox>.skillTabs>.skillTabsBtn{width: 1rem;height: 1rem;margin: 0 auto;display: flex;text-align: center;border-bottom: 1px solid #414141;}
.page-2>#roleBox>.skillBox>.skillTabs>.skillTabsBtn.active{background: url(//img6.gamersky.com/gspic/dgy/thelastofus2/wap//bg_page_4_btn_active.png) repeat-x bottom left/.05rem 1rem; border-color: #ddd}
.page-2>#roleBox>.skillBox>.level2backTo{margin-bottom: .5rem}

/*技能 制作 内容*/
.page-2>#roleBox>.skillBox>.skillContent>.skillMake{width: 6.5rem;height: 8.38rem;padding-top: .3rem}
.page-2>#roleBox>.skillBox>.skillContent>.skillMake .skillMakeBox{position: relative;width: 5.92rem;height: 7.8rem;margin: 0 auto}
.page-2>#roleBox>.skillBox>.skillContent>.skillMake .skillMakeBox .skillMakeImg{width: 5.92rem;height: 7.8rem;margin: 0 auto;display: none}
.page-2>#roleBox>.skillBox>.skillContent>.skillMake .skillMakeBox .skillMakeImg.active{display: block}

.page-2>#roleBox>.skillBox>.skillContent>.skillMake .skillMakeBox .skillMakeChooseGroup{position: absolute;width: 5.3rem;bottom:1.1rem ;left:.3rem;display: flex;justify-content: space-between;flex-wrap: wrap}
.page-2>#roleBox>.skillBox>.skillContent>.skillMake .skillMakeBox .skillMakeChooseGroup .skillMakeChooseItem{width: 1.22rem;margin-top: .13rem;height:1.02rem;border-top: 1px solid transparent;border-bottom: 1px solid transparent}
.page-2>#roleBox>.skillBox>.skillContent>.skillMake .skillMakeBox .skillMakeChooseGroup .skillMakeChooseItem.active{border-color:#ddd;background-color: rgba(255,255,255,.1);}

/*技能 学习 内容*/
.page-2>#roleBox>.skillBox>.skillContent>.skillStudy{width: 6.5rem;height: 8.38rem;padding-top: .3rem;display: none}
.page-2>#roleBox>.skillBox.ebbiSkillBox .skillContent>.skillStudy{display: block}

.page-2>#roleBox>.skillBox>.skillContent>.skillStudy .skillStudyBox{position: relative;width: 5.92rem;height: 7.8rem;margin: 0 auto}
.page-2>#roleBox>.skillBox>.skillContent>.skillStudy .skillStudyBox .skillStudyItem{display: none}
.page-2>#roleBox>.skillBox>.skillContent>.skillStudy .skillStudyBox .skillStudyItem.active{display: block}
.page-2>#roleBox>.skillBox>.skillContent>.skillStudy .skillStudyBox .skillStudyItem .skillStudyImg{width: 5.92rem;height: 7.8rem;margin: 0 auto;display: none;}
.page-2>#roleBox>.skillBox>.skillContent>.skillStudy .skillStudyBox .skillStudyItem .skillStudyImg.active{display: block}
/*技能 学习 一级切换组*/
.page-2>#roleBox>.skillBox>.skillContent>.skillStudy .skillStudyBox .skillStudyChooseGroup{width: 5.4rem;height: 1.28rem;position: absolute;top: 1.22rem;left: .3rem;display: flex;justify-content: center}
.page-2>#roleBox>.skillBox>.skillContent>.skillStudy .skillStudyBox .skillStudyChooseGroup .skillStudyChooseLevel1Item{width: 1.08rem; height:1.28rem;}

/*技能 学习 一级切换组 艾比*/
.page-2>#roleBox>.ebbiSkillBox.skillBox>.skillContent>.skillStudy .skillStudyBox .skillStudyChooseGroup{justify-content: flex-start}
.page-2>#roleBox>.ebbiSkillBox.skillBox>.skillContent>.skillStudy .skillStudyBox .skillStudyChooseGroup .skillStudyChooseLevel1Item{width: 1.28rem; }


.page-2>#roleBox>.skillBox>.skillContent>.skillStudy .skillStudyBox .skillStudyL2ChooseGroup{position: absolute;top: 2.8rem;left: .3rem;}
.page-2>#roleBox>.skillBox>.skillContent>.skillStudy .skillStudyBox .skillStudyL2ChooseGroup .skillStudyChooseLevel2Item{width: 1.21rem;height: .63rem;border-top: .01rem solid transparent;border-bottom: .01rem solid transparent;margin-bottom: .15rem}
.page-2>#roleBox>.skillBox>.skillContent>.skillStudy .skillStudyBox .skillStudyL2ChooseGroup .skillStudyChooseLevel2Item.circular{border-left: .01rem solid transparent;border-right: .01rem solid transparent;border-radius: 1rem;}
.page-2>#roleBox>.skillBox>.skillContent>.skillStudy .skillStudyBox .skillStudyL2ChooseGroup .skillStudyChooseLevel2Item.active{background-color: rgba(255,255,255,.1);border-color: #ddd;animation:flash 2s linear infinite;}
/*武器*/
.page-2>#roleBox>.ArmsBox{display: none;overflow: hidden;position: relative}
.page-2>#roleBox>.ArmsBox.ellieArmsBox{background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//img_home_page_ellie_arms_top.jpg") center top no-repeat;position: relative}

.page-2>#roleBox>.ArmsBox>.ArmsBoxCon{position: relative;width: 6.5rem;height: 8.9rem;margin: 1.5rem auto 0;background-color: #070707}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .videoBox{position: relative;width: 6.5rem;height:3.6562rem;}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .videoBox video{width: 6.5rem;height:3.6562rem;position: absolute;top: 0;left: 0;z-index: 1 }

.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsSwitch{width: 6.5rem;height:4.08rem;display: none}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsSwitch.active{display: block}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsSwitch .armsSwitchImg{display: none;width: 100%}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsSwitch .armsSwitchImg.active{display: block}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsSwitch .switchBox{position: absolute;bottom: 2rem;left: 0;width: 5.9rem;height: .83rem;padding: 0 .3rem}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsSwitch .switchBox img{width: 5.9rem;height: .83rem}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsSwitch .switchBox .switchGroup{position: absolute;top: 0;left: .3rem; width: 5.9rem;height: .83rem;box-sizing: border-box;border-bottom: 1px solid #202020;display: flex;justify-content: center;}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsSwitch .switchBox .switchGroup .switchItem{width: 20%;height: .83rem;}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsSwitch .switchBox .switchGroup .switchItem.active{background: url(//img6.gamersky.com/gspic/dgy/thelastofus2/wap//bg_page_4_btn_active.png) bottom left repeat-x;background-size: contain;opacity: .9;}

/*艾比 选择武器*/
.page-2>#roleBox>#ebbiArms.ArmsBox>.ArmsBoxCon .armsSwitch .switchBox .switchGroup{justify-content: flex-start;}
.page-2>#roleBox>#ebbiArms.ArmsBox>.ArmsBoxCon .armsSwitch .switchBox .switchGroup .switchItem{width: 1.2rem;}
/*返回 人物主页*/
.page-2>#roleBox>.ArmsBox .level3backTo.ArmsBoxBack{position: absolute;z-index: 1;right: 1.5rem;bottom: .7rem;}
/*返回 武器选择*/
.page-2>#roleBox>.ArmsBox>.level3backTo{display: none}
.page-2>#roleBox>.ArmsBox>.level3backTo.active{display: flex}
.page-2>#roleBox>.ArmsBox .level3backTo.ArmsDetailsBack{position: absolute;z-index: 1;left: 50%;transform: translate(-50%,0);bottom: .7rem;}
/*升级按钮*/
.page-2 > #roleBox > .ArmsBox > .ArmsBoxCon .armsSwitch .level3backTo.armsUp {position: absolute;z-index: 1;left:1rem;bottom: .7rem}
.page-2 > #roleBox > .ArmsBox > .ArmsBoxCon .armsSwitch .level3backTo.armsUp i{width: .29rem;height: .29rem;background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//ic_level_up_small_white.png") no-repeat center center /.27rem .25rem;}


/*武器升级*/
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsDetails{width: 6.5rem;height:4.08rem;display: none}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsDetails.active{display: block}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsDetails .armsDetailsBox{display: none;width: 6.5rem;height: 2.43156rem;position: relative;margin: 0 auto;}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsDetails .armsDetailsBox.active{display: block}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsDetails .armsDetailsBox .armsDetailsImg{display: none;}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsDetails .armsDetailsBox .armsDetailsImg.active{display: block;width: 100%}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsDetails .armsDetailsBox .armsDetailsGroup{position: absolute;top: .88rem;left: .33rem;width: 5.9rem;height: .6rem;justify-content: flex-start;display: flex;}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsDetails .armsDetailsBox .armsDetailsGroup .armsDetailsItem{width: 1.3rem;height: .6rem;}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsDetails .armsDetailsBox .armsDetailsGroup .armsDetailsItem:not(:last-of-type){margin-right: .23rem;}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsDetails .armsDetailsBox .armsDetailsGroup .armsDetailsItem.circular{border-radius: 1rem;}
.page-2>#roleBox>.ArmsBox>.ArmsBoxCon .armsDetails .armsDetailsBox .armsDetailsGroup .armsDetailsItem.active{background-color: rgba(255,255,255,.1);animation:flash 2s linear infinite;}





.page-3{
    min-height: 19.16rem;
}
.page-3 .page_3_title_1 img{width: 2.58rem;}
.page-3 .page_3_title_1 img{width: 2.58rem;}

.page-3 .Illustrated{margin-bottom: .5rem}
.page-3 .Illustrated > .page-3-nav{display: flex;justify-content: space-between;width: 6.5rem;margin: .36rem auto 0;font-size: .24rem;border-bottom: 1px solid rgba(53,66,71,.5);}
.page-3 .Illustrated > .page-3-nav li {height: .55rem;line-height: .56rem;opacity: .5;padding: 0 .2rem;text-align: center;}
.page-3 .Illustrated > .page-3-nav li.active {
    background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//bg_page_4_btn_active.png") bottom left repeat-x;
    background-size: contain;
    opacity: .9;
}

/*图鉴提示 大图*/
.page-3 .Illustrated  #characterPic{}
.page-3 .Illustrated  .pagePic{}
.page-3 .Illustrated  .pagePic .pagePicBox {position: relative;width: 7.5rem;height: 9.78rem;}
.page-3 .Illustrated  .pagePic .pagePicBox .picName{color: #fff;font-size: .4rem;position: absolute;transform: translate(-50%,0);left: 50%;bottom: 3.1rem;z-index: 1;text-align: center;}
.page-3 .Illustrated  .pagePic .pagePicBox .picImg{width: 100%;display: block}
.page-3 .Illustrated  .pagePic .pagePicBox .maskImg{width: 100%;display: block;position: absolute;bottom: 0;left: 0}

/*图鉴提示 头像*/
.page-3 .Illustrated  .headBox{display: block;padding: 0 .5rem;overflow: hidden;margin-top: -2.5rem;}
.page-3 .Illustrated  .headBox .swiperHead{}
.page-3 .Illustrated  .headBox .swiperHead{}
.page-3 .Illustrated  .headBox .swiperHead .prevnextGroup{height: .52rem;margin-top: .35rem;display: flex;justify-content: space-between;align-items: center;padding-bottom:  .2rem}
.page-3 .Illustrated  .headBox .swiperHead .prevnextGroup .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{position: static;width: auto;color: #666666}
.page-3 .Illustrated  .headBox .swiperHead .prevnextGroup .prevnextBtn{font-size: .3rem;height: .5rem;border: 1px solid #4a4a4a;width: 2.65rem;text-align: center;border-radius: .5rem;color: #666666}
.page-3 .Illustrated  .headBox .swiperHead .prevnextGroup .prevBtn{background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//ic_page_prev.png") no-repeat center center /1.21rem .31rem #191919}
.page-3 .Illustrated  .headBox .swiperHead .prevnextGroup .nextBtn{background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//ic_page_next.png") no-repeat center center /1.21rem .31rem #191919}
.page-3 .Illustrated  .headBox .swiperHead .swiper-slide{display: flex;flex-wrap: wrap}
.page-3 .Illustrated  .headBox .swiperHead .headerItem{width: 1.2rem;height: 1.11rem;flex-shrink: 0;margin-right: .08rem;margin-bottom: .1rem;border-top: 1px solid #0c0c0c;border-bottom: 1px solid #0c0c0c}
.page-3 .Illustrated  .headBox .swiperHead .headerItem.active{border-color: #d0d0cf; -webkit-filter: brightness(130%); filter: brightness(130%);}
.page-3 .Illustrated  .headBox .swiperHead .headerItem img{display: block;width: 100%}
/*人物图鉴页 提示*/
.page-3 .Illustrated .page-3-version-3{}
.page-3 .Illustrated .page-3-version-3 #tipsGroup{height:95vh;overflow-y: scroll}
.page-3 .Illustrated .page-3-version-3 #tipsGroup img{display: block;width: 100%}

/*版本说明*/
.page-4{
    min-height: 19.16rem;
    padding-bottom: 1.1rem;
}
.page-4 .backToHome{
    margin-top: .7rem;
}

.page-4 .page_4_title_1 img{width: 2.36rem;}

.page-4 .versionExpCon {
    width: 100%;
    background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//bg_page_4_top.jpg") no-repeat top center;
    background-size: contain;
    min-height: 7.38rem;
    overflow: hidden;
}
/*版本说明 切换swiper 导航*/
.page-4 .versionExpCon > .page-4-nav {
    display: flex;
    justify-content: space-between;
    width: 6.5rem;
    margin: .56rem auto 0;
    font-size: .24rem;
    border-bottom: 1px solid rgba(53,66,71,.5);
}
.page-4 .versionExpCon > .page-4-nav li {height: .55rem;line-height: .56rem;opacity: .5;padding: 0 .2rem;text-align: center;}
.page-4 .versionExpCon > .page-4-nav li.active {
    background: url("//img6.gamersky.com/gspic/dgy/thelastofus2/wap//bg_page_4_btn_active.png") bottom left repeat-x;
    background-size: contain;
    opacity: .9;
}
/*版本说明 切换swiper*/
.page-4 .versionExpCon > .swiper-container-version{padding-bottom: 1rem}
.page-4 .versionExpCon > .swiper-container-version .swiper-slide{}
.page-4 .versionExpCon > .swiper-container-version .swiper-slide>.buyTheGame{width: 2rem;margin-left: .5rem;margin-top: 0;}
.page-4 .versionExpCon > .swiper-container-version .swiper-slide>.versionBox{width: 7.5rem;height: 5.1rem;padding-bottom: 1rem;display: flex;justify-content: center;align-items: center;box-sizing: border-box}
.page-4 .versionExpCon > .swiper-container-version .swiper-slide>.versionBox>img{display: block}
.page-4 .versionExpCon > .swiper-container-version .page-4-version-0{}
.page-4 .versionExpCon > .swiper-container-version .page-4-version-0>.versionBox>img{width: 7.21rem}
.page-4 .versionExpCon > .swiper-container-version .page-4-version-1>.versionBox>img{width: 7.24rem}
.page-4 .versionExpCon > .swiper-container-version .page-4-version-2>.versionBox>img{width: 6.74rem}
.page-4 .versionExpCon > .swiper-container-version .page-4-version-3>.versionBox>img{width: 3.26rem}
.page-4 .versionExpCon > .swiper-container-version .page-4-version-4>.versionBox>img{width: 5.13rem}

.page-4 .versionExpCon > .swiper-container-version .swiper-slide>h5{font-weight: normal; font-size: .6rem;line-height: 1.75rem;padding-left: .5rem}
.page-4 .versionExpCon > .swiper-container-version .swiper-slide>h4{font-weight: normal; font-size: .28rem;line-height: 1.2;padding-left: .5rem}
.page-4 .versionExpCon > .swiper-container-version .swiper-slide>ul{margin-top: .35rem}
.page-4 .versionExpCon > .swiper-container-version .swiper-slide>ul>li{line-height: 1.4;padding:0 .5rem;font-size: .22rem;opacity: .5;margin-bottom: .28rem}

/*第五页 有奖征文*/
.page-5{
    min-height: 19.16rem;
}
.page-5 .page_5_title_1 img{
    width: 2.38rem;
}
/*礼物图例*/
.page-5 .prizeBox{
    width: 6.5rem;
    margin: 1.15rem auto 1.65rem;
}
.page-5 .prizeBox img{
    width: 100%;
    display: block;
}
/*征文文案*/
.page-5 .writingContent{color: #666;font-size: .3rem;padding:.5rem .5rem 0}
.page-5 .writingContent>p{line-height: .6rem;}
.page-5 .writingContent>.p1{}
.page-5 .writingContent>.p1>span{font-size: .36rem;line-height: .5rem;color: #fff;vertical-align: text-bottom}
.page-5 .writingContent>.p2{}
.page-5 .writingContent>.p3{font-size: .36rem}
.page-5 .writingContent>.p3>span{font-size: .46rem;line-height: .6rem;margin: 0 .05rem;vertical-align: text-bottom;color: #fff}
.page-5 .writingContent>.joinUs{line-height: .72rem}
.page-5 .writingContent>.joinUs>span{}
.page-5 .writingContent>.joinUs>a{}
.page-5 .writingContent>.joinUs>a>img{width: 1.13rem;height: .28rem;margin-left: .3rem;display: inline-block}
/*加入我们*/
.page-5 .joinUs{}

/*page-6 评论*/
.page-6{min-height: 19.16rem;}
.page-6 .page_6_title_1{}
.page-6 .page_6_title_1 img{width: 1.19rem;}

.page-6 #commentCon{}
.page-6 #commentCon .page-6-bgImg{display: block;width: 100%;}
.page-6 #commentCon .joinParty{display: block;width: 6.5rem;height: .8rem;line-height: .78rem;margin: 1rem auto 1rem;font-size: .3rem;color: #666666;background-color: rgba(30,30,30,.9);border: 1px solid #7d7d7d;border-radius: .5rem;text-align: center}
.page-6 #commentCon .joinParty span{font-size: .36rem;color: #ffffff;}

/*page-6 攻略*/
.page-7{min-height: 19.16rem;}
.page-7 .page_7_title_1{}
.page-7 .page_7_title_1 img{width: 2.38rem;}

.page-7 .strategy{padding: 0 .5rem}
.page-7 .strategy .strategyItem{width: 100%}
.page-7 .strategy .strategyItem a{display: block}
.page-7 .strategy .strategyItem a .strategyImg{width: 100%;border: 1px solid #ddd;}
.page-7 .strategy .strategyItem a .strategyTxt{font-size: .3rem;color: rgba(255,255,255,.5);margin: .1rem auto .3rem}

/*预加载*/
#loading {width:100%; height:100%; background-color:#000; position:fixed; left:0; top:0; z-index:99998;}
#loadingAnim {width:3.6rem; height:2rem; position:fixed; left:50%; top:50%; margin:-1.8rem 0 0 -1.8rem; z-index:99999;}
#loadingAnim .loadingtit {width:100%; height:.5rem; line-height:.5rem; font-size:.3rem; color:#999; text-align:center;}
#loadingAnim .loadingtxt {width:100%; height:.8rem; line-height:.8rem; font-size:.6rem; color:#fff; text-align:center;}
#loadingAnim .loadingAnim-img-wrap {position:absolute;left:.8rem;top:1.5rem;width:2rem;height:1px;}
#loadingAnim .loadingAnim-img-wrap .loadingAnim-img {position:absolute;right:0;top:0;width:100%;height:1px;background-color:#000;}
#loadingAnim .loadingAnim-img-wrap .loadingAnim-img-g {position:absolute;right:0;top:0;width:100%;height:1px;background-color:#fff;}