.myReadHd{
    width: 100%;
    height:3.5rem;
    background:url(../img/myHdBg.png) no-repeat;
    background-size: 100% 100%;
    position:relative;
}

.myHeadIn{
    background:#fff;
    -webkit-border-radius:.22rem;
    border-radius:.22rem;
    position:absolute;
    left:.24rem;
    right:.24rem;
    top: .4rem;
    -webkit-box-shadow: 0 0.01rem 0.8rem 0 rgba(220, 48, 35, 0.5);
    box-shadow: 0 0.01rem 0.8rem 0 rgba(220, 48, 35, 0.5);
}

.myHeadInTop{
    padding: 0 .1rem 0 .5rem;
    min-height:2.34rem;
    border-bottom: 0.01rem solid #e5e5e5;
}

.myHeadImg{
    width: 1.4rem;
    height:1.4rem;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    overflow: hidden;
    margin-right: .2rem;
}

.lvImgArea{
    width: 1.26rem;
}

.myNameArea{
    width: 2.8rem;
}

.myName{
    color:#dc3023;
    font-size: .34rem;
    font-weight: 600;
    margin-bottom: .1rem;
}

.myLevel{
    width: 1.3rem;
    height:.36rem;
    line-height:.36rem;
    color:#fff;
    text-align: center;
    font-size: .24rem;
    -webkit-border-radius: .3rem;
    border-radius: .3rem;
}

.lvArea{
    width: 2rem;
    height:2.26rem;
    background:url(../img/myLevBg.png) no-repeat;
    background-size: 100% 100%;
    margin-left: auto;
    position: relative;
}

.lvImgArea{
    width: 1.26rem;
    height:1.23rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position:absolute;
}

.lvImg01{
    width: 1.3rem;
    height:1.18rem;
    background-image: url(../img/level01-2.png);
    left: .2rem;
    top: .5rem;
}

.lvImg02{
    width: 1.26rem;
    height:1.23rem;
    background-image: url(../img/level02-2.png);
    left: .25rem;
    top: .5rem;
}

.lvImg03{
    width: 1.25rem;
    height:1.18rem;
    background-image: url(../img/level03-2.png);
    left: .26rem;
    top: .5rem;
}

.lvImg04{
    width: 1.26rem;
    height:1.23rem;
    background-image: url(../img/level04-2.png);
    left: .25rem;
    top: .5rem;
}

.lvImg05{
    width: 1.25rem;
    height:1.23rem;
    background-image: url(../img/level05-2.png);
    left: .25rem;
    top: .5rem;
}

.myHeadInBot{
   height:1.1rem;
   
}

.myHeadInBotIn{
   flex: 1;
   text-align: center;
   font-size: .24rem;
   color:#666;
   position: relative;
}

.myHeadInBotIn:first-of-type::after {
    content: '';
    width:.01rem;
    height:.44rem;
    background:#e5e5e5;
    position:absolute;
    right:0;
   top: 50%;
   -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
       -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
           transform: translateY(-50%);
}
.bkRevNum{
    font-size: .32rem;
    font-weight: 700;
    color:#000;
    font-family: "Microsoft YaHei";
}

.addIcon{
    font-size:.24rem ;
    font-weight: 500;
    margin-top: -0.08rem;
    display: inline-block;
    vertical-align: text-top;
}

.myFnArea{
    background:#fff;
    padding-top: .68rem;
}

.myFnUl{
    padding:0 .24rem;
}

.myFnLi{
    border-bottom: 0.01rem solid #eee;
}

.myFnLi:last-of-type{
    border-bottom: none;
}

.myFnLink{
    min-height: .88rem;
    font-size: .3rem;
}

.myFnLink::after {
    content: '';
    width: 0.12rem;
    height:.2rem;
    background:url(../img/fnRight.png) no-repeat;
    background-size: 100% 100%;
    display:block;
    margin-left: auto;
}

.myFnImg{
    width: .38rem;
    height:.38rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: .22rem;
}

.myFn01{
    background-image: url(../img/myFn01.png);
}
.myFn02{
    background-image: url(../img/myFn02.png);
}
.myFn03{
    background-image: url(../img/myFn03.png);
}
.myFn04{
    background-image: url(../img/myFn04.png);
}
.myFn05{
    background-image: url(../img/myFn05.png);
}
.myFn06{
    background-image: url(../img/myFn06.png);
}
.myFn07{
    background-image: url(../img/myFn07.png);
}
.myFn08{
    background-image: url(../img/myFn08.png);
}

.myBookArea{
    background:#fff;
    padding:0 .24rem;
}

.myBookImg{
    width: 1.2rem;
    height:1.7rem;
    margin-right: .2rem;
}

.myBookLi{
    padding:.2rem 0;
}

.myBookDet{
    width: 79%;
    border-bottom: 0.01rem solid #eee;
    justify-content: space-between;
    padding-bottom: .24rem;
}

.myBookLi:last-of-type .myBookDet{
    border-bottom: none;
}

.bkEqArea{
    width:1.1rem;
    height:1.12rem ;
    margin: 0 auto .08rem;
}

.bkEqCon{
    font-size: .18rem;
    color:#dc3023;
}

.bkDetCon{
    width: 60%;
}

.bkDetTit{
    font-size: .28rem;
    color:#000000;
    font-weight: 600;
}

.bkDetWt{
    font-size: .24rem;
    color:#666666;
}

.bkDetTm{
    font-size: .2rem;
    color:#666;
    margin-top: .3rem;
}

.nowRead{
    text-align: center;
    font-size: .22rem;
    font-weight: 500;
    color:#fff;
    width: 1.38rem;
    height:.45rem;
    line-height:.45rem;
    margin-right: .1rem;
    -webkit-border-radius: .4rem;
    border-radius: .4rem;
}

.origText{
    font-size: .24rem;
    color:#888;
    margin-top: .1rem;
    display:block;
}

.origText::before {
    content: '';
    width:.2rem;
    height:.2rem;
    background:url(../img/linkIcon.png) no-repeat;
    background-size: 100% 100%;
    display:inline-block;
    vertical-align: middle;
    margin: -.05rem 0.1rem 0 0;
}

.myMesArea{
    margin-top: 0;
}

.myBkRevNum{
    padding-top:.26rem;
    padding-bottom: 0;
}

.myRevArea{
    background:#fff;
}

.myRevArea .perRevArea{
    border-bottom: 0.01rem solid #eee;
}

.myRevArea .hotRevLi{
    margin-bottom: 0;
}

/*我的徽章 start*/
.myBadgeHd{
    width: 100%;
    height:4.22rem;
    background: url(../img/myBadgeBg.png) no-repeat;
    background-size: 100% 100%;
    position:relative;
}

.myBadgeTit{
    font-size: .32rem;
    color:#fff;
    font-weight: 700;
    text-align: center;
    padding:.56rem;
}

.myBadgeTit::before,.myBadgeTit::after {
    content: '';
    width: .48rem;
    height:.04rem;
    background:url(../img/myBgIcon.png) no-repeat;
    background-size: 100% 100%;
    display:inline-block;
    vertical-align: middle;
} 

.myBadgeTit::before{
    margin-right: .18rem;
}

.myBadgeTit::after {
    margin-left: .18rem;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.getBadArea{
    background:#fff;
    -webkit-border-radius:.1rem;
    border-radius:.1rem;
    position:absolute;
    left:.24rem;
    right:.24rem;
    top: 1.25rem;
    -webkit-box-shadow: 0px 0.01rem 0.1rem 0 #e0e0e0;
    box-shadow: 0px 0.01rem 0.1rem 0 #e0e0e0;
}

.getBadArea::before {
    content: '';
    width: 4.64rem;
    height:.38rem;
    position:absolute;
    bottom:0;
    left:50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-box-shadow:0 0 .6rem 0 #e35941 ;
    box-shadow:0 0 .6rem 0 #e35941 ;
    z-index:-1;
}

.getBadNum{
    font-size: .24rem;
    color:#e35840;
    font-weight: 600;
    padding:.38rem .3rem ;
}

.getBadNum::before {
    content: '';
    width: .1rem;
    height:.1rem;
    background:#e35840;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    display:inline-block;
    vertical-align: middle;
    margin:0 .1rem 0 0;
}

.getBadTm{
    font-size:.18rem ;
    color:#ababab;
    margin-left: auto;
    margin-right: .3rem;
}

.getBadTm::before {
    content: '';
    width: .21rem;
    height:.23rem;
    background:url(../img/badTmIcon.png) no-repeat;
    background-size: 100% 100%;
    display:inline-block;
    vertical-align: middle;
    margin:-0.01rem .06rem 0 0;
}
.badgeUl{
    width: 100%;
    height:5.62rem;
    background:url(../img/myBadBg.png) repeat;
    background-size: 100%;
     flex-wrap:  wrap ;
     justify-content: center;
     align-items: flex-start;
}
.badgeLi{
    position:relative;
    text-align: center;
     margin: 0 .17rem;
}

.badgeLi::after {
    content: '';
    width:.78rem;
    height:.08rem;
    background:url(../img/badgeBot.png) no-repeat;
    background-size: 100% 100%;    
    position:absolute;
    left: 38%;
    bottom: -.12rem;
}

.badgeLi:nth-of-type(1)::after{
    left: 6%;
}

.badgeLi:nth-of-type(1) .badLevNm{
    left: 30%;
}

.badgeLi:nth-of-type(2)::after{
    left: 20%;
}

.badgeLi:nth-of-type(2) .badLevNm{
    left:46%;
}


.badgeLi:nth-of-type(3)::after{
    left: 45%;
}

.badgeLi:nth-of-type(3) .badLevNm{
    left:72%;
}

.badgeLi:nth-of-type(4)::after{
    left: 10%;
        bottom: -.2rem;
}

.badgeLi:nth-of-type(4) .badLevNm{
    left:38%;
}

.badgeLi:nth-of-type(5)::after{
    left: 42%;
     bottom: -.2rem;
}
.badgeLi:nth-of-type(5) .badLevNm{
    left:70%;
}


.badLevImg{
    width: 1.60rem;
    height:1.82rem;
    display:block;
    position:relative;
}

.badLevImg::before {
    content: '';
    display:block;
    width:2rem;
    height:1.81rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position:absolute;
}

.badLevImg01::before{
    background-image:url(../img/level01.png) ;
    left: -.7rem;
}

.badLevImg02::before{
    background-image:url(../img/level02-3.png) ;
    left: -25%;
}

.badLevImg03::before{
    background-image:url(../img/level03-3.png) ;
}

.badLevImg04::before{
    background-image:url(../img/level04-3.png) ;
    left: -.5rem;
}

.badLevImg05::before{
    background-image:url(../img/level05-3.png) ;
}


.hasBadge .badLevImg01::before{
    background-image:url(../img/level01.png) ;
}
.hasBadge .badLevImg02::before{
    background-image:url(../img/level02.png) ;
}
.hasBadge .badLevImg03::before{
    background-image:url(../img/level03.png) ;
}
.hasBadge .badLevImg04::before{
    background-image:url(../img/level04.png) ;
}
.hasBadge .badLevImg05::before{
    background-image:url(../img/level05.png) ;
}

.hasBadge .badLevNm{
    color:#333;
}

.badLevNm{
   font-size: .22rem;
   font-weight: 500;
   font-family: "Microsoft YaHei";
   color: #aaaaaa;
    position: absolute;
    left: 50%;
    bottom: -0.56rem;
    transform: translateX(-50%);
    width: 100%;
}

.levEnd{
    margin-top: .2rem;
}

.levEnd .badLevImg::before {
    content: '';
    width: 1.93rem;
    height:1.90rem;
}

.levEnd .badLevNm{
    bottom:-0.6rem;
}

.lvHintArea{
    text-align: center;
    font-size: .24rem;
    font-weight:600;
    line-height: .45rem;
    color:#f1ab9f;
    margin: .45rem 0;
}

.swiper-slide-next .levInFont,.swiper-slide-prev .levInFont{
    opacity: 0;
}

.swiper-slide-active .levInFont{
    opacity: 1;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 4.4rem;
}
.swiper-pagination-bullet{
    width: .2rem;
    height:.08rem;
    background:#999999;
    opacity:.3;
    border-radius: .3rem;
}

.swiper-pagination-bullet-active{
    width: .3rem;
      opacity:1;
}

.levInCon{
      position: relative;
          margin-top: -3rem;
    }

.levInFont{
    width:8rem;
    position: absolute;
    left: -2.5rem;
    bottom: -3.32rem;
 }
.levInImg{
    width: 3.20rem;
    height:3.58rem;
    position: relative;
   
}

.levInImg::before {
    content: '';
    width: 3.87rem;
    height:3.97rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position:absolute;
    right:0;
}

.levInImg01::before{
    background-image: url(../img/level01-5.png);
}
.levInImg02::before{
    background-image: url(../img/level02-4.png);
}
.levInImg03::before{
    background-image: url(../img/level03-4.png);
}
.levInImg04::before{
    background-image: url(../img/level04-4.png);
}
.levInImg05::before{
    background-image: url(../img/level05-4.png);
}

.hasLv .levInImg01::before{
    background-image: url(../img/level01-5.png);
}
.hasLv .levInImg02::before{
    background-image: url(../img/level02-5.png);
}
.hasLv .levInImg03::before{
    background-image: url(../img/level03-5.png);
}
.hasLv .levInImg04::before{
    background-image: url(../img/level04-5.png);
}
.hasLv .levInImg05::before{
    background-image: url(../img/level05-5.png);
}

.levelNum{
    font-size: .42rem;
    font-weight: 500;
}

.levelGetFont{
    font-size: .26rem;
    color:#666666;
    padding-top: .3rem;
}

.hasLv .levelN01{
    color:#eb7cd0;
}

.hasLv .levelN02{
    color:#10d098;
}

.hasLv .levelN03{
    color:#48a4ff;
}

.hasLv .levelN04{
    color:#da4b3f;
}

.hasLv .levelN05{
    color:#d16dd2;
}
/*我的徽章 end*/

/* 作品投票 sart */
.votBodyBg{
    background:#ff4a2e;
}

.votWorkArea{
    width: 100%;
    min-height: 9rem;
    background:-webkit-linear-gradient(#ff416b,#ff4838);
    background:linear-gradient(#ff416b,#ff4838);
}

.votHeader{
    width: 100%;
    height:.95rem;
    background:#fff;
    padding:0 .16rem;
    justify-content: space-between;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    border-bottom: 0.01rem solid #E5E5E5;
    box-shadow: 0 0 0 0 #000;
}

.votSearchArea{
    width: 3.82rem;
    height:.58rem;
    line-height:.58rem;
    padding:0 .2rem;
    -webkit-border-radius: .5rem;
    border-radius: .5rem;
    background:#eeeeee;
}

.votSearchInp{
    background:none;
    width: 87%;
    font-size: .24rem;
}

.searchIcon{
    width: .3rem;
    height: .3rem;
    background:url(../img/votSearchIcon.png) no-repeat;
    background-size: 100% 100%;
    display:inline-block;
    vertical-align: middle;
    margin-top: -.06rem;
}

.votHeadBtn{
    font-size: .24rem;
    font-weight: 500;
    color:#fff;
    text-align: center;
    width: 1.44rem;
    height: .58rem;
    line-height: .58rem;
    -webkit-border-radius: .6rem;
    border-radius: .6rem;
}

.votWorkCon{margin-top: .95rem;}

.votWorkUl{
    width:98%;
    margin:0 auto;
    position: relative;

}

.votWorkLi{
    padding:.16rem 0 0;
    float: left;
}

.votWorkLi:last-of-type{
    padding-bottom: 0.16rem;
}

.votWorkLiIn{
    position: relative;
    -webkit-border-radius: .1rem;
    border-radius: .1rem;
    overflow: hidden;
}

.workLike{
    width: 100%;
    height:.36rem;
    line-height:.36rem;
    background:rgba(0, 0, 0, 0.3);
    position:absolute;
    top: 0;
    left: 0;
    padding-left: .2rem;
}

.workLike{
	color: #fff;
}

.wkLikeNum{
	font-size: .2rem;
	padding-left: .34rem;
}

.addOneNum{
	font-size: .2rem;
    color: #fff;
    position:absolute;
   	top: -.04rem;
   	opacity: 0;
}

.heartArea {
    width: .26rem;
    height: .22rem;
    background:url(../img/workL01.png) no-repeat;
    background-size: 100% 100%;
	position: absolute;
	left: 0.2rem;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.votWorkLi.hasTap .wkLikeNum{
	animation: addMove .5s;
	-webkit-animation: addMove  .5s;	/* Safari 和 Chrome */
	-webkit-animation-fill-mode:forwards;/*运行后停留在最后的地方*/
	animation-delay:1s;
	-webkit-animation-delay:1s; /* Safari 和 Chrome */
}

@keyframes addMove
{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@-webkit-keyframes addMove /*Safari and Chrome*/
{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

.votWorkLi.hasTap .heartArea{
	animation: heartBig .2s;
	-webkit-animation: heartBig  .2s;	/* Safari 和 Chrome */
	-webkit-animation-fill-mode:forwards;/*运行后停留在最后的地方*/
	animation-delay:1s;
	-webkit-animation-delay:1s; /* Safari 和 Chrome */
}
@keyframes heartBig
{
	0%{width: .16rem;height: .12rem;}
	100%{width: .26rem;height: .22rem;}
}

@-webkit-keyframes heartBig /*Safari and Chrome*/
{
	0%{width: .16rem;height: .12rem;}
	100%{width: .26rem;height: .22rem;}
}

.votWorkLi.hasTap .addOneNum{
	animation: addOne 1s;
	-webkit-animation: addOne  1s;	/* Safari 和 Chrome */
	-webkit-animation-fill-mode:forwards;/*运行后停留在最后的地方*/
	animation-delay:1s;
	-webkit-animation-delay:1s; /* Safari 和 Chrome */
}

@keyframes addOne
{
	0%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 0;}
}

@-webkit-keyframes addOne /*Safari and Chrome*/
{
	0%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 0;}
}

.resNumArea{
	font-size: .2rem;
	display: none;
	position: absolute;
    left: 0.6rem;
}

.workImg{
    min-height:1rem ;
    justify-content: center;
}

.workDet{
    padding:.15rem .2rem;
    background:#fff;
}

.workPerImg{
    width: .36rem;
    height: .36rem;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
    display:inline-block;
}

.workPerImg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.workPerName{
    font-size: .24rem;
    font-weight: 500;
    padding-left: .1rem;
}

.workPer{
    margin-bottom: .1rem;
}

.votWorkName{
    font-size: .22rem;
    font-weight: 600;
    display:block;
}

.votWorkDet,.votBtnArea{
    font-size: .24rem;
}

.workInfo{
    margin-bottom: .14rem;
}

.workNum{
    font-size: .22rem;
    color:#888888;
}

.votBtnArea{
    color:#999;
    margin-left: auto;
    font-weight: 600;
   position: relative;
    margin-left: auto;
}

.votBtnArea{
    color:#999;
    margin-right: .1rem;
}

.votBotOut .addOneNum{
	font-weight: normal;
	color:#999;
	right: -.18rem;
	top: .05rem;
}

.redLkIconArea{
	width: .2rem;
	height: .4rem;
	position: absolute;
}

.redLkIcon{
	width: .22rem;
	height: .16rem;
	background: url(../img/workL02.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
}

.redLkIconArea .redLkIcon:nth-of-type(1){
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	opacity: 1;
}
.redLkIconArea .redLkIcon:nth-of-type(2){
	width: .12rem;
	height: .12rem;
	top: 0.18rem;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	opacity: .5;
}
.redLkIconArea .redLkIcon:nth-of-type(3){
	width: .08rem;
	height: .06rem;
	top: 0.3rem;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	opacity: .3;
}

.votWorkLi.hasTap .redLkIconArea{
	animation: redLkMove 2s;
	-webkit-animation: redLkMove  2s ;
	-webkit-animation-fill-mode:both;
}

@keyframes redLkMove
{
	form{
		right: 0.3rem;
    		bottom: .45rem;
		height: 0;
	}
	to{

		right: 0.3rem;
    		bottom: .45rem;
		height: .4rem;
		opacity: 0;
	}
}

@-webkit-keyframes redLkMove /*Safari and Chrome*/
{
	form{

		right: 0.3rem;
    		bottom: .45rem;
		height: 0;
	}
	to{

		right: 0.3rem;
    		bottom: .45rem;
		height: .4rem;
		opacity: 0;
	}
}

.canVotBtn,.workNumArea.hasVotTic .workLikeNum{
     background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(255, 123, 44)), to(rgb(255, 65, 107)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.votWorkLi.hasTap  .votBtnArea{

}

.workDetTop{
    padding-left: 0;
    padding-right: 0;
}

.workDetTop .bkRevDetTop{
    padding-left: .24rem;
    padding-right: .24rem;
}

.workNumArea{
	font-size: .22rem;
	color: #888;
	font-weight: 400;
	border-left: 1px solid #e5e5e5;
    padding-left: .4rem;
    text-align: right;
}

.workLikeNum{
	font-size: .34rem;
	color:#999999;
	font-weight:600;
	font-family: Microsoft YaHei;
}

.workLikeNum:before{
	content: '';
	width: .24rem;
	height: .20rem;
	background: url(../img/workLike01.png) no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align: middle;
	margin: -.03rem .1rem 0 0;
}


.workNumArea.hasVotTic .workLikeNum:before{
	content: '';
	background-image: url(../img/workLike02.png);
}

.workDetImg img{
	width: 100%;
	max-height: 100%;
	margin-top: .1rem;
	-webkit-border-radius: .1rem;
	-moz-border-radius: .1rem;
	border-radius: .1rem;
	object-fit: contain;
	display: block;
}

.workDetFont{
    padding:.24rem;
}

.workDtName{
    font-size: .32rem;
    font-weight: 600;
}

.workDtIn{
    font-size: .28rem;
    font-weight: 500;
    color:#666;
    padding-top: .1rem;
}

.forVotBtn,.hasvotBtn{
    font-size: .32rem;
    font-weight: 500;
    color:#fff;
    display: block;
    text-align: center;
    line-height: .88rem;
    -webkit-border-radius: .1rem;
    border-radius: .1rem;
    margin-top: .34rem;
}

.hasvotBtn{
	background: #ddd;
}
/*作品详情 end*/