/* 
    CSS Document 
    author xuyan 2025-02-14
*/
/* 皮肤共创 */
.inner-skin{ background: #fffefe url(../img/inner_skill.jpg) center top no-repeat; background-size: 19.2rem auto; box-sizing: border-box; padding-top: 1.6rem; }
.nav-btn{ width: .4rem; height: .4rem; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; cursor: pointer; position: absolute; z-index: 5; left: 0; top: 0; background: #e6c57c; background: -webkit-linear-gradient(bottom, #dfbd72, #efd08a); background: -o-linear-gradient(bottom, #dfbd72, #efd08a); background: -moz-linear-gradient(bottom, #dfbd72, #efd08a); background: linear-gradient(to bottom, #dfbd72, #efd08a); box-sizing: border-box; padding: .14rem 0 0 .1rem; }
.icon-bar{ display: block; margin: 0 0 .03rem; width: .2rem; height: .02rem; background: #6f4c24; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
.animated{ padding: .12rem 0 0; }
.animated .icon-bar{ margin: 0 auto; }
.animated .top{ margin: 0 auto; -webkit-transform: translateY(.06rem) rotateZ(45deg); -moz-transform: translateY(.06rem) rotateZ(45deg); -ms-transform: translateY(.06rem) rotateZ(45deg); -o-transform: translateY(.06rem) rotateZ(45deg); transform: translateY(.06rem) rotateZ(45deg); }
.animated .bottom{ margin: 0 auto; -webkit-transform: translateY(.02rem) rotate(-45deg); -moz-transform: translateY(.02rem) rotate(-45deg); -ms-transform: translateY(.02rem) rotate(-45deg); -o-transform: translateY(.02rem) rotate(-45deg); transform: translateY(.02rem) rotate(-45deg);}
.animated .middle{ width: 0;}
.nav-list{ position: absolute; left: 0; top: 0; z-index: 3; background: #dfc386; padding: .52rem 0; width: 1.98rem; text-align: center; border-radius: 0 0 .9rem 0; overflow: hidden; display: none; }
.nav-list li{ height: .74rem; line-height: .74rem; position: relative; }
.nav-list li a{ display: block; height: 100%; color: #6f4c24; font-size: .28rem; }
.nav-list li.on::before{ display: block; content: ''; width: .17rem; height: .14rem; background: url(../img/icon.png) -1.28rem 0 no-repeat; background-size: 5rem auto; position: absolute; left: .15rem; top: 50%; margin-top: -.07rem; }
.inner-home{ position: absolute; top: .4rem; right: .4rem; }
.skin-main{ width: 16rem; margin: 0 auto; position: relative; min-height: 7.7rem; }
.skin-swiper{ width: 14.44rem; margin: 0 auto; }
.skin-swiper h3{ font-size: .36rem; color: #ffe2c0; text-align: center; margin-bottom: .3rem; }
.skin-list{ overflow: hidden; width: 14.34rem; margin: 0 auto; padding: .05rem; }
.skin-list li{ width: 4.56rem; height: 2.54rem; overflow: hidden; border: .02rem solid #e9d2ab; border-radius: .05rem; float: left; margin: 0 .09rem .3rem; background: #fff; box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); cursor: pointer; }
.skin-img{ height: 1.95rem; }
.skin-img img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.skin-info{ padding: 0 .15rem; display: flex; align-items: center; justify-content: space-between; font-size: .18rem; color: #7f5932; height: .58rem; }
.skin-title{ width: 2.9rem; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.hero-prev,.hero-next{ position: absolute; width: .39rem; height: .73rem; background-position: -1.91rem -.48rem; position: absolute; left: 0; top: 3.2rem; z-index: 5; cursor: pointer; }
.hero-next{ left: auto; right: 0; background-position: -2.42rem -.48rem; }
.skin-list.one{ width: 10.67rem; }
.skin-list.one li{ width: 10.63rem; height: 5.96rem; margin: 0; }
.skin-list.one li .skin-img{ height: 5rem;}
.skin-list.one li .skin-info{ padding: 0 .3rem; height: .96rem; font-size: .24rem; }
.skin-list.one li .skin-title{ -webkit-line-clamp:1; width: 8.2rem; }
.skin-list.three,.skin-list.four{ width: 9.56rem; }
.skin-list.three li:first-child{ margin: 0 2.47rem .3rem;}

/* 玩法共创 */
.inner-play{ background: #fffefe url(../img/inner_play.jpg) center top no-repeat; background-size: 19.2rem auto; box-sizing: border-box; padding-top: 1.1rem; }
.play-main{ min-height: 8.2rem; float: right; margin-right: 1rem; width: 13.02rem; padding: 0 .05rem; }
.inner-play .footer{ clear: both;}
.play-headline{ font-size: .36rem; color: #ffe1b1; margin-bottom: .15rem; }
.play-headline.c-zong{ color: #7f5932; }
.play-top{ display: flex; justify-content: space-between; margin-bottom: .5rem; }
.play-swiper{ width: 8.6rem; height: 4.42rem; border-radius: .1rem .1rem 0 0; box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); border: .02rem solid #edd7b1; background: #fff; position: relative; }
.play-swiper a{ display: block; height: 100%; color: #7f5932; font-size: .18rem; }
.official-img{ height: 3.66rem; }
.official-img img{ width: 100%; height: 100%; object-fit: cover; }
.official-info{ display: flex; align-items: center; justify-content: space-around; height: .76rem; }
.official-left{ display: flex; align-items: center; }
.play-tag{ display: flex; align-items: center; justify-content: center; height: .32rem; border: .01rem solid #dcd3cd; border-radius: .17rem; color: #9c7b5b; font-size: .16rem; margin: 0 .08rem; }
.play-tag::before,.play-tag::after{ display: inline-block; content: ''; width: .12rem; height: .11rem; background: url(../img/icon.png) -1.47rem 0 no-repeat; background-size: 5rem auto; margin: 0 .1rem; }
.official-title{ width: 3.4rem; text-align: center; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; font-size: .24rem; }
.play-next{ display: flex; align-items: center; }
.play-next i{ width: .16rem; height: .14rem; background-position: -3.52rem -.54rem; margin-left: .05rem; margin-right: .05rem; }
.play-next .like-icon{ background-position: -3.74rem -.54rem; }
.play-swiper .play-next i{ width: .25rem; height: .23rem; background-position: -2.89rem -.54rem; margin-left: .2rem; }
.play-swiper .play-next i.like-icon{ background-position: -3.2rem -.54rem; }
.play-swiper .play-page{ position: absolute; z-index: 5; left: .12rem; top: .08rem; bottom: auto; font-size: 0; display: flex; align-items: center; }
.play-swiper .play-page .swiper-pagination-bullet{ width: .04rem; height: .04rem; background: #bf8957; transform: rotate(45deg); border-radius: 0; opacity: 1; margin: 0 .03rem; }
.play-swiper .play-page .swiper-pagination-bullet.swiper-pagination-bullet-active{ border: .02rem solid #dbb795;}
.play-list{ width: 4.22rem; overflow: hidden; }
.play-list li{ width: 4.22rem; height: 2.11rem; box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); background: #fff; border-radius: .1rem .1rem 0 0; margin-bottom: .24rem; overflow: hidden; position: relative; }
.play-list li a{ height: 100%; display: block; font-size: .16rem; color: #7f5932; }
.play-img{ height: 1.51rem; overflow: hidden; }
.play-info{ display: flex; align-items: center; justify-content: space-between; padding: 0 .15rem; height: .6rem; }
.play-title{ font-size: .18rem; width: 2.4rem; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; }
.play-list li:hover::after{ display: block; content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: .02rem solid #edd7b1; border-radius: .1rem .1rem 0 0; pointer-events: none; }
.map-list{ width: 13.2rem; margin-bottom: 1rem; margin-left: -.18rem; }
.map-list li{ float: left; margin-left: .18rem; }
.map-left .play-next{ margin-bottom: .05rem;}
.play-info .play-tag{ margin: 0;}
.play-info .play-tag::before,.play-info .play-tag::after{ margin: 0 .08rem;}
.alert-play{ position: relative; z-index: 2; width: 100%; max-width: 17.5rem; min-width: 13rem; height: 5.7rem; background: url(../img/play_bg.jpg) center top no-repeat; background-size: auto 100%; margin-bottom: .6rem; }
.play-close{ position: absolute; bottom: -.75rem; left: 50%; margin-left: -3.05rem; width: 6.11rem; background: url(../img/play_close.png) center center no-repeat; background-size: 100% auto; text-align: center; height: .3rem; line-height: .3rem; font-size: .24rem; color: #e7cda1; }
.way{ width: 13rem; margin: 0 auto; padding-top: .3rem; }
.way-title{ height: .4rem; font-size: .28rem; color: #734d1f; }
.way-left{ width: 6.78rem; height: 3.83rem; overflow: hidden; float: left; border: .02rem solid #d3ac72; position: relative; }
.way-left img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.way-fade{ position: absolute; left: 0; bottom: 0; right: 0; background-image: linear-gradient(to bottom, rgba(48, 34, 29, 0) 0%, rgba(48, 34, 29, 1) 100%); display: flex; align-items: center; justify-content: space-between; padding: .9rem .1rem .1rem; font-size: .18rem; color: #d9b295; }
.way-next{ display: flex; align-items: center; }
.way-next span{ display: inline-block; width: .88rem; height: .26rem; background-position: -1.89rem -6.32rem; color: #fff9e1; line-height: .26rem; text-align: center; margin-left: .1rem; }
.way-right{ float: right; width: 6rem; height: 3.89rem; overflow: hidden; background: #c0ad89; margin-bottom: .2rem; box-sizing: border-box; padding: .17rem .17rem 0; color: #734d1f; font-size: .2rem; }
.way-top{ padding-bottom: .18rem; display: flex; align-items: center; border-bottom: .01rem solid #b29974; font-size: .24rem; }
.way-user{ width: .76rem; height: .76rem; overflow: hidden; border: .02rem solid #b59567; margin-right: .1rem; }
.way-user img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.way-info{ margin: .2rem 0 0 .1rem; padding-right: .1rem; max-height: 2.3rem; overflow-x: hidden; overflow-y: auto; line-height: .26rem; }
.way-info p{ position: relative; padding-left: .25rem; }
.way-info p::before{ position: absolute; display: block; content: ''; left: 0; top: .04rem; width: .16rem; height: .16rem; background: url(../img/icon.png) -1.9rem -6.63rem no-repeat; background-size: 5rem auto; }
.begin-game{ clear: both; float: right; width: 1.8rem; height: .54rem; line-height: .54rem; text-align: center; background: url(../img/icon.png) 0 -6.32rem no-repeat; background-size: 5rem auto; font-size: .26rem; color: #6a3c22; }

/* 武将重置 */
.inner-remake{ background: #fffefe url(../img/inner_remake.jpg) center top no-repeat; background-size: 19.2rem auto; box-sizing: border-box; padding-top: 1.9rem; }
.remake-main{ min-height: 8rem; width: 14rem; margin: 0 auto; position: relative; padding: .3rem .95rem 0; overflow: hidden; }
.remake-main.overvis{ overflow: initial;}
.remake-nav{ width: 10.46rem; display: flex; justify-content: space-between; margin: .65rem auto; }
.remake-nav li{ position: relative; }
.remake-img{ width: 3.24rem; height: 4.36rem; background: url(../img/remake_li.png) no-repeat; background-size: 100% auto; box-sizing: border-box; padding: .35rem 0 0; }
.remake-img img{ display: block; width: 2.8rem; min-height: 3.7rem; object-fit: cover; margin: 0 auto; }
.remake-main .show-btn{ width: .58rem; height: 1.86rem; position: absolute; background-position: -3.54rem -2.79rem; left: 3.12rem; top: 1.4rem; cursor: pointer; box-sizing: border-box; padding: .3rem .18rem 0 .16rem; font-size: .2rem; color: #a08a7b; text-align: center; line-height: .21rem; }
.remake-change{ width: 14rem; height: 5.88rem; background: url(../img/remak_bg.jpg) no-repeat; background-size: 100% auto; box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); box-sizing: border-box; padding: .6rem 0 0 1.18rem; display: none; }
.remake-change .remake-img{ float: left; margin-right: .9rem; }
.remake-info{ width: 7.1rem; height: 4.28rem; background: #fdfbf6; box-shadow: 0 0 .05rem 0 rgba(116, 88, 49, .1); float: left; margin-top: .05rem; box-sizing: border-box; padding: 0 .35rem; color: #808080; position: relative; }
.remake-top{ height: .7rem; display: flex; align-items: center; justify-content: space-between; border-bottom: .01rem solid #f0e8d6; font-size: .2rem; margin-bottom: .25rem; }
.remake-title{ height: .3rem; line-height: .3rem; background: #d2bb8c; width: 1.22rem; text-align: center; border-radius: .04rem; text-shadow: -.01rem -.01rem 0 #c5aa72, .01rem -.01rem 0 #c5aa72, -.01rem .01rem 0 #c5aa72, .01rem .01rem 0 #c5aa72; color: #fff; font-size: .24rem; }
.remake-intro{ line-height: .3rem; max-height: 3rem; overflow-x: hidden; overflow-y: auto; font-size: .18rem; padding-right: .1rem; }
.remake-intro p{ margin-bottom: .15rem;}
.remake-main ::-webkit-scrollbar{ width: .04rem; height: 1px;}
.remake-main ::-webkit-scrollbar-thumb{ background: #e0cda9; border-radius: .03rem; }
.remake-main ::-webkit-scrollbar-track{ background: #eeeae4; }
.remake-main .show-btn.close{ left: auto; right: -.5rem; }
.stage2{ width: 14rem; height: 5.88rem; background: url(../img/remak_bg.jpg) no-repeat; background-size: 100% auto; box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); box-sizing: border-box; padding: .65rem 0 0 .65rem; }
.public-img{ width: 3.15rem; float: left; margin-right: .45rem; margin-top: .5rem; }
.public-img img{ display: block; width: 100%; }
.stage2 .remake-info{ width: 4.2rem; margin-right: .45rem; height: 4.45rem; position: relative; padding: 0 .18rem; }
.stage2 .remake-info:hover::after{ display: block; content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: .02rem solid #f4e1bd; pointer-events: none; }
.stage2 .remake-intro{ max-height: 3.2rem; }
.remake-intro h3{ font-size: .24rem; margin-bottom: .15rem;}
.public-title{ display: flex; align-items: center; font-size: .24rem; margin-bottom: .1rem; }
.tl-icon{ width: .21rem; height: .23rem; background-position: -4.08rem 0; margin-left: .15rem; }


/* 一将成名 */
.yjcm-title{ margin-top: -.3rem; font-size: .36rem; color: #ffe2c0; text-shadow: -.01rem -.01rem 0 #b2905b, .01rem -.01rem 0 #b2905b, -.01rem .01rem 0 #b2905b, .01rem .01rem 0 #b2905b; padding: 0 .4rem; }
.yjcm-nav{ position: absolute; top: 6.3rem; width: 9rem; padding: 0 .6rem; left: 50%; margin-left: -5.1rem; }
.yjcm-nav::after{ display: block; content: ''; width: 10.2rem; height: .01rem; background-image: linear-gradient(to right, rgba(176, 122, 84, 0) 0%, rgba(176, 122, 84, 0.3) 10%, rgba(176, 122, 84, 0.3) 90%, rgba(176, 122, 84, 0) 100%); position: absolute; top: .415rem; left: 0; }
.yjcm-nav li{ width: 2.25rem; text-align: center; float: left; position: relative; z-index: 2; color: #6a5a48; font-size: .18rem; }
.yjcm-nav li p{ height: .35rem; }
.yjcm-nav li span{ display: block; margin: 0 auto .08rem; width: .08rem; height: .08rem; border: .03rem solid #cec4bd; border-radius: 50%; background: #fff; }
.yjcm-nav li.on{ color: #9d7137;}
.yjcm-nav li.on p{ font-size: .24rem; }
.yjcm-nav li.on span{ background: #dcad6e; border-color: #fff5da; }
.yjcm-link{ position: absolute; right: 0; top: 6.3rem; display: none; }
.yjcm-link a{ display: block; width: .75rem; margin-left: .14rem; float: left; font-size: .18rem; color: #a47c45; text-align: center; cursor: pointer; }
.yjcm-link span{ display: block; margin: 0 auto .06rem; width: .63rem; height: .63rem; background-position: -1.67rem -4.8rem; }
.yjcm-link span.yj-rule{ background-position: -2.35rem -4.8rem; }
.yjcm-link span.yj-mrt{ background-position: -3.03rem -4.8rem; }
.yjcm-list{ overflow: hidden; width: 13.36rem; padding: .15rem; margin: 0 auto; }
.yjcm-list li{ width: 3.1rem; height: 5.37rem; border-radius: .05rem .05rem 0 0; padding: .04rem; float: left; margin: 0 .12rem; box-sizing: border-box; cursor: pointer; background: #fefdfa; background: -webkit-linear-gradient(bottom, #ffefce, #fefdfa); background: -o-linear-gradient(bottom, #ffefce, #fefdfa); background: -moz-linear-gradient(bottom, #ffefce, #fefdfa); background: linear-gradient(to bottom, #ffefce, #fefdfa); box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; }
.yj-img{ height: 4.22rem; border-radius: .05rem; overflow: hidden; }
.yj-img img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.yjcm-list li p{ padding-top: .36rem; text-align: center; font-size: .26rem; color: #615234; }
.yjcm-list li:hover{ -webkit-transform: scale(1.03); transform: scale(1.03);}
.hero-main{ width: 14rem; height: 5.88rem; background: url(../img/remak_bg.jpg) no-repeat; background-size: 100% auto; box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); box-sizing: border-box; padding: .65rem 0 0 .6rem; display: none; position: relative; }
.hero-main .inner-back{ position: absolute; margin: 0; left: 0; top: -80px; z-index: 5; }
.yjcm-hero{ float: left; width: 1.25rem; padding-right: .07rem; margin-right: .35rem; }
.yjcm-hero li{ position: relative; width: .99rem; margin: 0 auto .15rem; }
.yjcm-hero li p{ width: .93rem; height: .93rem; overflow: hidden; border: .03rem solid #dec798; border-radius: 50%; cursor: pointer; }
.yjcm-hero li::after{ display: block; content: ''; position: absolute; left: .03rem; top: .03rem; width: .93rem; height: .93rem; background: rgba(0, 0, 0, .5); pointer-events: none; border-radius: 50%; }
.yjcm-hero li.on::after{ left: -.13rem; top: -.13rem; width: 1.32rem; height: 1.26rem; background: url(../img/icon.png) -2.35rem -1.48rem no-repeat; background-size: 5rem auto; border-radius: 0; }
.yjcm-hero li.on img{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1); }
.yjcm-hero li:hover::after{ display: none;}
.yjcm-hero li.on:hover::after{ display: block;}
.hero-info{ width: 11rem; float: left; }
.hero-img{ float: left; width: 3.1rem; height: 4.5rem; box-sizing: border-box; padding: .04rem; border-radius: .05rem .05rem 0 0; box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); background: #fff; }
.hero-img img{ display: block; width: 100%; height: 100%; object-fit: cover; border-radius: .02rem; }
.hero-intro{ width: 7.26rem; height: 4.5rem; float: right; box-sizing: border-box; padding: 0 .48rem; background: url(../img/yjcm_bg.png) no-repeat; background-size: 100% auto; }
.hero-intro h5{ height: .75rem; line-height: .75rem; border-bottom: .01rem solid #efe6d5; font-size: .3rem; color: #e1cca7; margin-bottom: .15rem; }
.hero-text{ max-height: 3.4rem; color: #808080; font-size: .18rem; line-height: .3rem; overflow-x: hidden; overflow-y: auto; padding-right: .1rem; }
.hero-text p{ margin-bottom: .15rem;}
.side-nav{ position: fixed; left: 0; top: 0; bottom: 0; z-index: 6; width: 2.14rem; background: rgba(38, 25, 15, .75); border-right: .01rem solid #805842; padding-top: .95rem; left: -100%; }
.side-nav li{ position: relative; text-align: center; height: .96rem; line-height: .96rem; }
.side-nav li a{ display: block; height: 100%; padding-left: .54rem; font-size: .24rem; color: #ddaa68; position: relative; z-index: 2; }
.side-nav li.on::after{ width: 2.46rem; height: 1.02rem; position: absolute; left: 0; top: 50%; margin-top: -.51rem; display: block; content: ''; background: url(../img/yjcm_nav.png) no-repeat; background-size: 100% auto; }
.side-nav li.on a{ font-size: .3rem; color: #fff; text-shadow: -.01rem -.01rem 0 #ba8847, .01rem -.01rem 0 #ba8847, -.01rem .01rem 0 #ba8847, .01rem .01rem 0 #ba8847; }
.side-close,.side-open{ margin: .25rem 0 0 1rem; display: block; width: .56rem; height: .54rem; background-position: -3.57rem -.86rem; cursor: pointer; font-size: 0; }
.side-open{ margin: 0; background-position: -2.91rem -.86rem; position: fixed; left: .17rem; top: 50%; margin-top: -.4rem; z-index: 6; }
.step2,.step3{ width: 12.12rem; margin: 0 auto; padding: 0 .05rem .8rem; overflow: hidden; position: relative; }
.match{ width: 100%; display: flex; justify-content: space-between; position: relative; z-index: 2; }
.match li p{ height: .45rem; font-size: .28rem; color: #695022; }
.match-img{ width: 3.13rem; height: 4.48rem; padding: .04rem; background: #fedb94; border-radius: .05rem; overflow: hidden; box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); }
.match-img img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.match-vs{ width: 6.84rem; position: absolute; top: -.4rem; left: 2.6rem; }
.yjcm-tag1,.yjcm-tag2{ height: 2.22rem; position: absolute; left: 3.35rem; top: .35rem; }
.yjcm-tag2{ left: 6.55rem; top: 3.5rem;}

/* 名人堂 */
.person-swiper{ width: 14rem; height: 5.88rem; background: url(../img/remak_bg.jpg) no-repeat; background-size: 100% auto; box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); margin-bottom: .5rem;}
.person-swiper .swiper-slide{ box-sizing: border-box; padding: .78rem 0 0 .9rem;}
.person-change{ overflow: hidden; float: left; width: 10.8rem; min-height: 4.5rem; }
.person-img{ width: 2.77rem; height: 3.95rem; padding: .04rem; background: #d2bb8c; border-radius: .1rem; overflow: hidden; float: left; margin-right: .8rem; }
.person-img img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.person-info{ width: 7.08rem; float: left; font-size: .2rem; text-align: center; }
.person-top{ display: flex; align-items: center; justify-content: space-between; padding-bottom: .2rem; border-bottom: .01rem solid #f1e8d7; }
.person-user{ display: flex; align-items: center; color: #82562a; font-size: .3rem; }
.person-user span{ width: .96rem; padding-right: .1rem; height: .3rem; background-position: 0 -4.44rem; line-height: .3rem; color: #fff; text-shadow: -.01rem -.01rem 0 #c5aa72, .01rem -.01rem 0 #c5aa72, -.01rem .01rem 0 #c5aa72, .01rem .01rem 0 #c5aa72; font-size: .24rem; text-align: center; margin-right: .11rem; }
.person-content{ padding: .2rem .1rem; background: -webkit-linear-gradient(bottom, rgba(255,252,246,1), rgba(255,252,246,0)); background: -o-linear-gradient(bottom, rgba(255,252,246,1), rgba(255,252,246,0)); background: -moz-linear-gradient(bottom, rgba(255,252,246,1), rgba(255,252,246,0)); background: linear-gradient(to bottom, rgba(255,252,246,1), rgba(255,252,246,0)); border-bottom: .01rem solid #f1e8d7; text-align: left; }
.person-content h5{ font-size: .24rem; color: #82562a; margin-bottom: .1rem; }
.person-text{ height: 2.5rem; overflow-x: hidden; overflow-y: auto; line-height: .36rem; padding-right: .1rem; }
.person-text p{ margin-bottom: .15rem;}
.person-like{ display: inline-block; background: rgba(210, 187, 140, .3); height: .48rem; border: .01rem solid #d3c7bf; border-radius: .25rem; margin: .25rem 0 0; padding: 0 .4rem; font-size: .24rem; color: #82562a; line-height: .48rem; }
.person-like i{ width: .2rem; height: .2rem; background-position: -1.12rem -4.47rem; vertical-align: middle; margin: -.05rem 0 0 .05rem; }
.person-right{ width: 1.31rem; height: 5.51rem; background: url(../img/famous.png) no-repeat; background-size: 100% auto; float: right; box-sizing: border-box; padding-top: 1.13rem; text-align: center; margin-right: .5rem; }
.person-nav{ overflow: hidden; max-height: 3.3rem; overflow-x: hidden; overflow-y: auto; }
.person-nav li{ height: .46rem; border-bottom: .01rem solid #e9e8e6; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.person-nav li:last-child{ border-bottom: 0;}
.person-nav li.on{ border-bottom: 0; background: #d2bb8c; border-radius: .04rem; color: #fff; padding: 0 .1rem; justify-content: space-between; }
.person-nav li.on::before,.person-nav li.on::after{ width: .13rem; height: .11rem; content: ''; display: inline-block; background: url(../img/icon.png) -1.48rem -.15rem no-repeat; background-size: 5rem auto; }
.person-nav li:hover{ color: #ac8d66;}
.person-nav li.on:hover{ color: #fff;}
.year-nav{ overflow: hidden; position: relative; height: .55rem; }
.year-swiper{ width: 11.3rem; margin: 0 auto; position: relative; z-index: 3; font-family: 'Microsoft YaHei', Arial, sans-serif; }
.year-swiper .swiper-slide{ width: 2.26rem; text-align: center; text-shadow: -.01rem -.01rem 0 #bb9f75, .01rem -.01rem 0 #bb9f75, -.01rem .01rem 0 #bb9f75, .01rem .01rem 0 #bb9f75; color: #cdbfb1; font-size: .24rem; cursor: pointer; }
.year-prev,.year-next{ position: absolute; left: 0; top: 0; display: block!important; width: .87rem; height: .27rem; background: url(../img/icon.png) -4.03rem -.47rem no-repeat; background-size: 5rem auto; text-align: center; line-height: .27rem; font-size: .2rem; color: #a07d55; cursor: pointer; }
.year-next{ left: auto; right: 0; }
.year-prev:hover,.year-next:hover{ color: #82562a;}
.year-swiper .swiper-slide p{ padding-top: .06rem; height: .21rem; }
.year-swiper .swiper-slide span{ display: inline-block; width: .08rem; height: .08rem; border-radius: 50%; border: .03rem solid #ccc2bb; background: #fff; }
.year-swiper .swiper-slide.swiper-slide-thumb-active{ text-shadow: none; color: #82562a; font-weight: bold; }
.year-swiper .swiper-slide.swiper-slide-thumb-active span{ border-color: #baa06b;}
.year-swiper .swiper-slide.end{ text-shadow: none; color: #82562a; font-size: .22rem; }
.year-swiper .swiper-slide.end span{ width: .07rem; height: .07rem; background: #ccc2bb; border: 0; margin-top: .04rem; }
.year-line{ position: absolute; width: 12.2rem; height: .01rem; background: #c3ab83; top: .13rem; left: 50%; margin-left: -6.1rem; }
.year-line::before,.year-line::after{ display: block; content: ''; width: .05rem; height: .05rem; background: #ccc2bb; position: absolute; left: 0; top: -.02rem; border-radius: 50%; }
.year-line::after{ left: auto; right: 0; }
.person-slogan{ font-size: .22rem; color: #957353; text-align: center; margin: .3rem 0 .9rem; letter-spacing: .2rem; }