/* 
    CSS Document 
    author xuyan 2025-02-14
*/

/* 武将列表页 */
.inner-hero{ background: #dad5d1 url(../img/inner_hero.jpg) center top no-repeat; background-size: 19.2rem auto;}
.force{  font-size: .26rem; margin: -.4rem 0 .9rem; overflow: hidden; }
.force-left{ overflow: hidden; margin-right: .8rem; float: left; padding-right: .02rem; }
.force-left a{ display: block; float: left; height: .67rem; line-height: .67rem; padding: 0 .21rem; border: .02rem solid #b9a780; color: #786f5e; margin-right: -.02rem; position: relative; min-width: .24rem; text-align: center; }
.force-left a.on{ background: #b9a780; color: #fff; border-color: #b9a780; }
.force-left a:hover{ color: #ac986c;}
.force-left a.on:hover{ color: #fff;}
.force-left a:hover::after{ position: absolute; content: ''; left: 0; top: 0; right: 0; bottom: 0; border: .01rem solid #b9a780; }
.search-main{ display: block; width: 3rem; float: right; height: .6rem; position: relative; }
.search-input{ width: 2.28rem; height: .58rem; line-height: .58rem; border: .01rem solid #a38e5b; background: rgba(210, 188, 141, .36); padding: 0 .35rem; color: #786f5e; font-size: .24rem; border-radius: .06rem; }
.search-input:-moz-placeholder{ color: #ad986b;}
.search-input::-moz-placeholder{ color: #ad986b;}
.search-input:-ms-input-placeholder{ color: #ad986b;}
.search-input::-webkit-input-placeholder{ color: #ad986b;}
.search-btn{ position: absolute; right: 0; top: 0; width: .6rem; height: .6rem; background-position: -.69rem -.92rem; font-size: 0; }
.hero-list{ overflow: hidden; width: 15.96rem; margin: 0 auto; }
.hero-list li{ width: 2.3rem; height: 3.8rem; overflow: hidden; float: left; margin: 0 .18rem; }
.hero-list li a{ display: block; overflow: hidden;}
.wj-img{ width: 100%; height: 3.07rem; overflow: hidden; }
.wj-img img{ width: 100%; height: 100%; object-fit: cover;}
.hero-list li p{ font-size: .24rem; color: #786f5e; text-align: center; padding: .1rem 0; }


/* 武将详情 */
.figure{ position: relative; width: 15.6rem; margin: 0 auto; padding: .1rem .2rem; overflow: hidden; }
.figure-guide{ position: absolute; left: .08rem; top: 0; width: 1.24rem; }
.figure-nav{ overflow-x: hidden; overflow-y: auto; width: 1.24rem; max-height: 5.74rem; display: none; }
.figure-nav li{ width: .86rem; height: .86rem; margin: .16rem auto 0; position: relative; }
.figure-nav li a{ display: block; width: .84rem; height: .84rem; border: .01rem solid #ae957b; overflow: hidden; border-radius: 50%; }
.figure-nav li::after{ display: block; content: ''; width: .84rem; height: .84rem; background: rgba(0, 0, 0, .5); position: absolute; left: 0; top: 0; border-radius: 50%; z-index: 2; pointer-events: none; }
.figure-nav li.on{ margin: .4rem auto;}
.figure-nav li.on::after{ width: 1.24rem; height: 1.4rem; background: url(../img/hero_on.png) no-repeat; background-size: 100% auto; top: 50%; left: 50%; margin: -.7rem 0 0 -.62rem; border-radius: 0; }
.figure-nav li:hover::after{ display: none;}
.figure-nav li.on:hover::after{ display: block;}
.figure-nav li.on:hover img{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
.figure-nav{ scrollbar-width: none; -ms-overflow-style: none; }
.figure-nav::-webkit-scrollbar{ display: none; }
.figure-show{ display: block; width: .4rem; height: .42rem; background-position: -3.64rem 0; margin: .1rem auto 0; font-size: 0; cursor: pointer; }
.figure-show.on{ background-position: -3.1rem 0; }
.figure-main{ width: 14rem; min-height: 6.5rem; background-color: #fff; background-image: url(../img/hero_detail_bg.png), url(../img/hero_detail_bg.png); background-repeat: no-repeat; background-position: left top, right top; background-size: .21rem auto, .21rem auto; box-shadow: 0 0 .1rem 0 rgba(148, 113, 77, .2); overflow: hidden; margin-left: 1.6rem; }
.figure-left{ width: 5.7rem; float: left; position: relative; padding-top: .6rem; height: 5.9rem; overflow: hidden; }
.figure-swiper{ width: 4.2rem; height: 4.99rem; margin-left: .76rem; overflow: visible; }
.figure-swiper .swiper-slide{width: 3.73rem; height: 4.99rem;}
.figure-swiper .swiper-slide img{ display: block; width: 3.73rem; height: 4.99rem; object-fit: cover; margin: 0 auto; }
.figure-swiper .swiper-slide.swiper-slide-prev img{ opacity: .5; transform: rotate(-5deg); -webkit-filter: grayscale(70%); -moz-filter: grayscale(70%); -ms-filter: grayscale(70%); -o-filter: grayscale(70%); filter: grayscale(70%); filter: gray; }
.figure-swiper .swiper-slide.swiper-slide-active{ opacity: 1; -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0); filter: none; }
.hero-prev,.hero-next{ width: .33rem; height: .38rem; background: url(../img/icon.png) 0 -1.71rem no-repeat; background-size: 5rem auto; position: absolute; z-index: 5; top: 3rem; left: .34rem; cursor: pointer; }
.hero-next{ left: 5rem; background-position: -.37rem -1.71rem; }
.hero-prev:hover{ background-position: -.73rem -1.71rem;}
.hero-next:hover{ background-position: -1.1rem -1.71rem;}
.figure-page{ margin-top: .32rem; display: flex; width: 100%; align-items: center; justify-content: center; font-size: 0; }
.figure-page .swiper-pagination-bullet{ width: .09rem; height: .09rem; border-radius: 50%; opacity: .52; background: #d2bb8c; margin: 0 .05rem; }
.figure-page .swiper-pagination-bullet.swiper-pagination-bullet-active{ opacity: 1;}
.figure-tag,.figure-tag2{ width: .65rem; height: .56rem; background-position: -1.86rem -5.54rem; position: absolute; z-index: 5; right: -.78rem; top: 0; cursor: pointer; font-size: 0; display: none; }
.figure-tag2{ background-position: -2.62rem -5.54rem; top: .62rem; }
.figure-swiper .swiper-slide.swiper-slide-active .figure-tag,.figure-swiper .swiper-slide.swiper-slide-active .figure-tag2{ display: block; }
.figure-right{ width: 7.5rem; overflow: hidden; float: right; margin-right: .65rem; padding-top: .6rem; }
.figure-title{ height: .3rem; display: flex; justify-content: center; align-items: center; position: relative; border: .01rem solid #d7cdc7; background: #f3f0e8; width: 1.38rem; border-radius: .04rem; font-size: .24rem; color: #5f5745; margin-bottom: .11rem; }
.figure-title::before,.figure-title::after{ display: inline-block; content: ''; width: .04rem; height: .04rem; background: #a59269; border-radius: 50%; margin: 0 .06rem; }
.figure-media{ width: 3.52rem; float: left; overflow: hidden; margin-right: .2rem; }
.media-info{ height: 1.76rem; background: #000; margin-bottom: .17rem; }
.cv-info{ height: .3rem; line-height: .3rem; background: none; padding-bottom: 0; margin-bottom: .15rem; display: inline-block; background: #f3f0e8; padding: 0 .5rem 0 .15rem; border: .01rem solid #d7cdc7; border-radius: .03rem; position: relative; }
.cv-info::before,.cv-info::after{ display: inline-block; content: ''; position: absolute; left: .08rem; bottom: -.08rem; width: 0; height: 0; border-left: .07rem solid transparent; border-right: .07rem solid transparent; border-top: .08rem solid #d9c69a; }
.cv-info::after{ border-top-color: #f3f0e8; bottom: -.07rem; }
.cv-info span{ font-size: .2rem; height: .3rem; color: #808080; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; }
.voice-btn{ width: .13rem; height: .16rem; background-position: -1.38rem -.91rem; cursor: pointer; position: absolute; right: .16rem; top: .08rem; }
.voice-btn.on{ background: url(../img/cv_play.png) no-repeat; background-size: 100% auto; }
.figure-skill{ float: left; width: 3.75rem; }
.hero-skill-nav{ overflow: hidden; display: flex; align-items: center; width: 3.3rem; font-size: .2rem; color: #808080; margin: 0 0 .15rem -.35rem; }
.hero-skill-nav li{ cursor: pointer; width: 1.45rem; text-align: center; position: relative; line-height: .2rem; }
.hero-skill-nav li::after{ display: block; content: ''; width: .01rem; height: .2rem; background: #454545; position: absolute; top: 0; right: 0; }
.hero-skill-nav li:last-child:after{ display: none; }
.hero-skill-nav li.on{ color: #d2bb8c;}
.hero-skill{ color: #808080; line-height: .36rem; font-size: .2rem; max-height: 2.52rem; overflow-x: hidden; overflow-y: auto; padding-right: .35rem; }
.figure-intro{ clear: both; padding-top: .2rem; }
.figure-intro::before{ display: block; content: ''; height: .01rem; width: 7.05rem; background: #bebebe; margin-bottom: .2rem; }
.figure-text{ color: #808080; line-height: .36rem; font-size: .2rem; max-height: 1.08rem; overflow-x: hidden; overflow-y: auto; padding-right: .35rem; }
.figure-right ::-webkit-scrollbar{ width: .03rem; height: 1px;}
.figure-right ::-webkit-scrollbar-thumb{ background: #e3d6bb; border-radius: .03rem;}
.figure-right ::-webkit-scrollbar-track{ background: none;}
.figure-skill .cv-info{ display: none;}
.figure-skill.no-video .cv-info{ display: inline-block;}
.figure-skill.no-video{ width: auto;}
.figure-skill.no-video .hero-skill{ max-height: 1.44rem; margin-bottom: .1rem; }