﻿body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,code,form,input,button,textarea,p,th,td,header,nav{margin:0;padding:0;outline:none;box-sizing: border-box; }
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:calc(100vw/7.5);}
body {font-family:-apple-system-font,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.6;color: #2f2f2f;background: #ededed;fill: currentColor;-webkit-tap-highlight-color: transparent;-webkit-text-size-adjust: none;-webkit-touch-callout: none}
img,input,select{vertical-align:middle;font-family:inherit;}
img{border:0;-ms-interpolation-mode:bicubic;}
li,ul,dl{list-style:none;vertical-align:middle;}
table{border-collapse:collapse;border-spacing:0;}
button,input[type="text"],input[type="button"],input[type="reset"],input[type="submit"],select{cursor:pointer;-webkit-appearance:none;border-radius:0;}
button[disabled],input[disabled]{cursor:default;}
textarea{overflow:auto;vertical-align:top;resize:none;font-family:inherit;}
i,em{font-style:normal}
a{color: #2f2f2f;text-decoration:none;}
a,a:hover,a:active{outline:0;-webkit-tap-highlight-color:transparent;background-color:transparent;}
a:focus{outline:0;}

.hide{display: none;}
.mb{margin-bottom: 8px;}
.bb{border-bottom: 1px solid #ededed ;}
.item{background: #fff;margin-bottom: 8px;}
.list{margin-bottom: 8px;padding: 0 0 16px 16px;background-color: #fff;}
.mh{min-height: 502px}
.layout{margin-bottom: 8px;padding: 0 0 16px 16px;}
.card{border-bottom: 1px solid #ededed;}
/*.f:after{content: '」';}*/
/*.f:before {content: '「';}*/
.merge{max-height: 406px;overflow: hidden;}


/* icon */
.icon{
	background-image: url(../img/icon.png) ;
	background-repeat: no-repeat;
	background-size: 157px 375px;
}
	.return{
		display: block;
		width: 22px;
		height: 22px;
		background-position: -108px 0;
	}
	.home{
		display: block;
		width: 22px;
		height: 22px;
		background-position: -81px 0;
	}
	.menu{
		display: block;
		width: 22px;
		height: 22px;
		background-position: 0 0;
	}
	.so{
		display: block;
		width: 22px;
		height: 22px;
		background-position: -27px 0;
	}
	.logo{
		display: block;
		margin-top: 11px;
		width: 109px;
		height: 22px;
		background-position: 0 -154px;
		text-indent: -999em;
	}
	.logo a{
		display: block;
		width: 109px;
		height: 22px;
	}
	.i-more{
		position: absolute;
		top: 46%;
		right: 0;
		width: 7px;
    	height: 11px;
	    background-position: -7px -33px;
	    transform: translateY(-50%);
	}
	.user{
		display: block;
		width: 22px;
		height: 22px;
		background-position: -54px 0;
	}



/* header */
.header{
	background-image: url(../img/header.jpg) ;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
	header{
		display: flex;
		justify-content:space-between;
		height: 44px;
	}


	header .icon-block{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 5px;
		width: 44px;
		height: 44px;
	}
	header .center{
		max-width: 4rem;
	}
	header .center h1{
		font-size: 18px;
		font-weight: 400;
		line-height: 44px;
		color: #fff;
	}

	.header .search{
		padding:8px 16px 16px 16px;
	}
	.header .search form{
		display: flex;
		background: #fff;
		border-radius: 4px;
		padding: 8px 0;
	}
	.header .search .text{
		flex: 1;
		height: 26px;
		border: none;
		text-indent: 10px;
		font-size: 14px;
	}
	.header .search .btn{
		flex: 0 0 auto;
		width: 70px;
		height: 26px;
		border: none;
		background: none;
		font-size: 14px;
		color: #ff5c00;
		font-weight: 700;
		border-left: 1px solid #ddd;
	}
nav{
	overflow: hidden;
	padding-top: 16px;
	background: #fff;
}
	nav a{
		float: left;
		width: 25%;
	    text-align: center;
	    margin-bottom: 16px;
	}
	nav a i{
		display: block;
	    margin: 0 auto;
	    width: 44px;
	    height: 44px;
		background-image: url(../img/tubiao2.png) ;
		background-repeat: no-repeat;
		background-size: 400px 44px;
	}
	nav a .i1{background-position: 0 0;}
	nav a .i2{background-position: -50px 0;}
	nav a .i3{background-position: -100px 0;}
	nav a .i4{background-position: -150px 0;}
	nav a .i5{background-position: -200px 0;}
	nav a .i6{background-position: -250px 0;}
	nav a .i7{background-position: -300px 0;}
	nav a .i8{background-position: -350px 0;}
	nav a span{
		font-size: 14px;
		line-height: 1;
	}
	nav a .current{
		font-weight: 800;
		color: #ff5c00;
	}
	
.nav{
	overflow: hidden;
	padding:8px;
	background: #fff;
}
	.nav a{
		float: left;
		display: block;
		width: 20%;
	    text-align: center;
	}
	.nav a.current{
		font-weight: 800;
		color: #ff5c00;
	}

/* footer */
footer{
	height: 44px;
	line-height: 44px;
	background: #414141;
	font-size: 12px;
}
footer p{
	color: #999;
	text-align: center;
}
.copyright a{
	color: #999;
}

/* content */
.breadcrumb{
	width: 100%;
	padding: 10px 0;
}

.breadcrumb dl{
	display: flex;
	font-size: 12px;
	color: #999;
}
.breadcrumb dl dd{
	margin-right: 5px;
}
.breadcrumb dl a{
	color: #999;
}
.breadcrumb dl a:after {
    content: ' >';
}
/* head */	
.head{
	display: flex;
	justify-content: space-between;
	padding: 10px 16px;
	border-bottom: 1px solid #ededed ;
}
.head .title{
	font-size: 16px;
	font-weight: 700;
}
.head .title span{
	padding-left: 5px;
	font-size: 12px;
	font-weight: 400;
	color: #999;
}
.head .more{
	position: relative;
	color: #999;
	font-size: 12px;
	line-height: 26px;
}
.head .more a{
	padding-right: 10px;
	color: #999;
}

.user-center{
	display: flex;
	padding: 16px;
	background-color: #fff;
}
	.user-center .avatar{
		width: 80px;
		height: 80px;
		background: #F7F7F7;
		border-radius: 50%;
	}
	.user-center .avatar img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.user-center .date{
		margin-left: 8px;
		padding-top: 12px;
	}
	.user-center .date  .name {
		font-size: 20px;
		font-weight: 700;
	}
	.user-center .date .info{
		font-size: 14px;
		color: #999;
	}
	.user-center .follow{
		width: 80px;
		height: 38px;
		border: 1px solid #14B457;
		border-radius: 4px;
	}


.works-nav{
	display: flex;
	border-top: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
	padding: 12px 0;
	background: #fff;
}
.works-nav a{
	position: relative;
	flex: 1;
	text-align: center;
}
.works-nav .current{
	font-weight: 700;
	color: #f80;
}
.works-nav .current:after{
	position: absolute;
	bottom: -13px;
	right: 0;
	width: 100%;
	height: 1px;
	background-color: #f80;
	content: '';
}

.article{
	padding: 16px;
}
.article p{
	margin: 0 0 12px;
	font-size: 16px;
	text-align: justify;
}
.article p a{
	color: #14B457;
}
.article blockquote{
	margin:0 0 16px 0;
	padding: 10px;
	background-color: #f7f7f7;
	border-left: 8px solid #ddd;
	color: #666;
}	
.article blockquote p{
	margin: 6px 0;
}
.article-hc{
	padding: 16px 16px 1px 16px;
	background-color: #fff;
	border-bottom: 1px solid #ddd;
}
.article-hc .name{
	font-size: 24px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 8px;
}
.article-hc p{
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.75;
	text-align: justify;
}
.article-hc p a{
	color: #14B457;
}
.works-list{
	padding: 0 16px 16px 16px;
}
	.works-list li{
		line-height: 48px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		border-bottom: 1px dashed #ededed;
	}
	.works-list li a{
		position: relative;
		display: block;
	}
	.works-list li .name {
	    max-width: 5.6rem;
	    font-size: 14px;
	    font-weight: 400;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    color: #135294;
	}
	.works-list li:hover .name{
		color: #FF5C00;
	}
	.works-list li .author {
	    position: absolute;
	    top: 1px;
	    right: 0;
	    font-size: 12px;
	    color: #999;
	}
	.works-list-r{
	    position: absolute;
	    top: 1px;
	    right: 0;
	    font-size: 14px;
	    color: #999;
	}
	.works-more{
		display: block;
		width: 100%;
		cursor:pointer;
		padding-bottom: 16px;
		text-align: center;
		font-size: 14px;
		color: #135294;
	}
.phrases-works-list{
    padding: 0 16px 16px 16px;
}	
    .phrases-works-list li{
        padding: 12px 0;
        border-bottom: 1px dashed #ededed;
    }
	.phrases-works-list .name {
	    font-size: 16px;
	    font-weight: 400;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    margin-bottom: 4px;
	}
	.phrases-works-list .source {
	    font-size: 12px;
	    text-align: right;
	    color: #999;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	
.sideba-tag{
	padding: 16px;
 	display: grid;
	grid-template: auto / 1fr 1fr 1fr;
	grid-gap: 8px;
}

	.sideba-tag a{
		height: 28px;
		line-height: 28px;
		color: #135294;
	}
.sideba-tags{
	padding: 16px;
 	display: grid;
	grid-template: auto / 1fr 1fr;
	grid-gap: 8px;
}

	.sideba-tags a{
		height: 32px;
		line-height: 32px;
		color: #135294;
	}

.trans-btn{
	overflow: hidden;
	padding:4px;
	font-size: 14px;
	color: #666;
	text-align: center;
	background: #f7f7f7;
	border-radius: 4px;
}
	.trans-btn:hover{
		background: #ff5c00;
		color: #fff;
	}



.m-tags{
	padding: 16px;
	display: grid;
	grid-template: auto / 1fr 1fr 1fr;
	grid-gap: 8px;
}
.m-tags .trans{
	padding: 4px;
	height: 40px;
	background-color: #F7F7F7;
	border-radius: 3px;
	display: flex;
    justify-content: center;
}
.m-tags .trans .name{
	align-self: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    color: #135294;
}

.paging {
	padding: 0 0 12px 0;
	text-align: center;
	display: flex;
    justify-content: space-between;
}
.paging .previous {
    width: 36%;
    height: 40px;
    line-height: 40px;
    background: #ccc;
}
.paging .end {
    color: #999;
}

.paging a {
    display: inline-block;
    color: #FFF;
    font-size: 16px;
    text-align: center;
}
.paging .next {
    width: 60%;
    height: 40px;
    line-height: 40px;
    background: #f60;
}

@media screen and (min-width: 960px){	
	.m-tags .trans:hover{
		background: #ff5c00;
	}
	.m-tags .trans:hover .name{
		color: #fff;
	}
}

.shici{
	display: block;
	position: relative;
	padding: 16px 16px 20px 0;
	}
	.shici .title{
		max-width: 75%;
		margin-bottom: 6px;
		font-size: 14px;
		font-weight: 400;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #135294;
	}
	.shici b{
		font-weight: 400;
	}
	.shici:hover .title{
		color: #ff5c00;
	}
	.shici .data{
		line-height: 12px;
		font-size: 12px;
		color: #666;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.shici .author{
		position: absolute;
		top: 17px;
		right: 16px;
		font-size: 12px;
		color: #999;
	}
	
.mingju{
		display: block;
		padding: 16px 16px 16px 0;
	}
	.mingju .title{
		font-size: 16px;
		font-weight: 400;
		margin-bottom: 4px;
		color: #135294;
	}
	.mingju:hover .title{
		color: #ff5c00;
	}
	.mingju .source{
		font-size: 12px;
		color: #666;
	}
.zuozhe{
	display: block;
	padding: 16px 16px 16px 0;
	height: 80px;
}
	.zuozhe .cover{
		float: left;
		margin-right: 10px;
		width: 80px;
		height: 80px;
		background: #F7F7F7;
		border-radius: 50%;
	}
	.zuozhe .cover img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.zuozhe .title{
		padding: 10px 0 6px 0;
		white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    color: #999;
	    font-size: 12px;
	}
	.zuozhe .name{
		line-height: 18px;
		font-size: 16px;
		color: #2f2f2f;
	}
	.zuozhe:hover .name{
		color: #ff5c00;
	}
	.zuozhe .title .achievement{
		font-size: 12px;
		color: #999;
		font-weight: 400;
	}
	.zuozhe .introduction{
		font-size: 12px;
		color: #999;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal!important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

/* 列表选择导航 */

.subnav{
	width: 100%;
	position: relative;
	background: #fff;
	border-bottom: 1px solid #ededed;
}
	.subnav-list{
		display: flex;
	}
	.subnav-list li{
		flex: 1;
		padding: 14px 0;
		font-size: 14px;
		color: #666;
		text-align: center;
		cursor:pointer;
	}
	.subnav-list li.active{
		color: #14B457;
		font-weight: 700;
	}
	.subnav-list li span{
		display: inline-block;
    	vertical-align: middle;
	}
	.subnav-list li .icon-sorting{
		display: inline-block;
    	vertical-align: middle;
		margin-left: 5px;
		width: 9px;
		height: 5px;
		background-position: 0 -85px;
    }
    .subnav-list li.active .icon-sorting{
		background-position: 0 -95px;
    }
.fixed-nav{position:fixed;top:0px;left:0px;width:100%; z-index: 1}

.subnav-box{
	display: none;
	position: absolute;
	top: 48px;
	width: 100%;
	padding: 4px 4px;
	background-color: #fff;
	z-index: 1000;
	border-radius: 0 0 8px 8px ;	
	box-shadow: 0 5px 10px -5px  rgba(0,0,0,0.2);
}

.subnav-box .option{
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
    padding: 8px 4px;
    max-height: 330px;
    overflow-y: auto;
    
}
.subnav-box .option li{
    overflow: hidden;
    box-sizing: border-box;
    border: 4px solid #fff;
    padding: 4px;
    width: 33.3333%;
    height: 44px;
    line-height: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    background: #f7f7f7;
    border-radius: 24px;
}
.subnav-box .option  li a {
	align-self: center;
    font-size: 14px;
    color: #666;
}
.subnav-box .option  li.active{
	background: #F90;
}
.subnav-box .option  li.active a{
	color: #fff;
	font-weight: 700;
}

/*主题*/
.zhuti{
	padding: 16px 16px 1px 16px;
	background: #fff;
}
	.zhuti .name{
		font-size: 24px;
		text-align: center;
		margin-bottom: 8px;
	}
	.zhuti .info{
		margin: 0 0 16px;
		font-size: 14px;
		text-align: center;
		color: #999;
	}
	.zhuti .introduce p{
		margin: 0 0 16px;
		font-size: 14px;
		color: #666;
	}

.shiji{
	margin-bottom: 8px;
	background: #fff;
}
	.shiji .cover{
		width: 100%;
		overflow: hidden;
	}
	.shiji .cover img{
		width: 100%;
		height: auto;
	}
	.shiji .info{
		padding: 16px 16px 1px 16px;
	}
	.shiji h1{
		font-size: 18px;
		font-weight: 700;
		margin-bottom: 16px;
		padding-bottom: 16px;
		border-bottom: 1px solid #ededed;
	}
	.shiji .info p{
		margin: 0 0 16px;
		font-size: 14px;
		color: #666;
	}


/* 诗集列表 */


.album{
	display: block;
	overflow: hidden;
	margin-bottom: 16px;
	background-color: #fff;
	border-radius: 4px;
}
.album:hover{
	color: #ff5c00;
	background-color: #fff;
}
.album-img{
	width: 100%;
	height: auto;
}
.album-img img{
	width: 100%;
}
.album-data{
	padding: 8px 10px ;
	margin-bottom: 8px;
}
.album-data h3{
	padding-top: 4px;
	font-size: 18px;
	/*font-weight: 400;*/
}
.album-data p{
	font-size: 14px;
	color: #999;
	line-height: 1.75;
	display: -webkit-box;
    overflow: hidden;
    white-space: normal!important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*诗词内页*/

.poem{
	margin-bottom: 8px;
	padding: 16px;
	background: #fff;	
}
	.poem .name{
		font-size: 24px;
		text-align: center;
	}
	.poem .source{
		font-size: 14px;
		text-align: center;
		color: #999;
	}
	.poem .source a{
		color: #999;
	}
	.poem .service{
		margin: 16px 0 12px 0;
		display: flex;
		border-top: 1px solid #ededed;
		border-bottom: 1px solid #ededed;
		padding: 12px 0;
		font-size: 16px;
	}
	.poem .service .option{
		position: relative;
		flex: 1;
		text-align: center;
		color: #2f2f2f;
	}
	.poem .service .current{
		color: #ff5c00;
	}
	.poem .service .option:after {
		position: absolute;
		top: 0;
		right: 0;
		width: 1px;
		height: 24px;
		background-color: #ededed;
		content: '';
	}
	.poem .service .option:last-child:after{
		width:0;
	}
	.poem .content{
		padding: 16px 0;
		min-height: 150px;
		font-size: 18px;
		line-height: 1.5;
		text-align: justify;
	}
	.poem .content p{
		margin-bottom: 16px;
		/*text-align: justify;*/
	}
	.poem .center{
		text-align: center;
		font-size: 18px;
	}
	.poem .order{
		padding: 10px;
		font-size: 16px;
		text-align: left;
		color: #555;
		background-color: #F5F6F9;
	}
	.poem .content-shiyi{
		padding: 16px 0;
		font-size: 16px;
	}
	.poem .content-shiyi .original{
		 font-weight: 700; 
		font-size: 18px;
		padding-bottom: 12px;
		line-height: 1.8;
	}
.original sup {
    padding: 0 2px;
    font-size: 12px;
    color: #666;
    font-weight: 400;
}
	.poem .content-shiyi .translation{
		position: relative;
		margin-bottom: 16px;
		padding: 10px;
		/*border-radius: 4px ;*/
		background: #F5F6F9;
		color: #4C7F60;
	}
	.poem .content-shiyi .translation:after {
		content: '';
		position: absolute;
		top: -24px;
		left: 8%;
		border: 12px solid transparent;
		border-bottom: 12px solid #F5F6F9;
	}
	.poem .content-pinyin{
		padding: 8px 0;
	}
	.poem .content-pinyin p{
		padding: 16px 0;

	}
	.poem .content-pinyin ruby{
		line-height: 2.4;
		margin: 0 2px;
	}
	.poem .content-pinyin rt{
		font-size: 14px;
		color: #555;
	}
	.poem .content-pinyin rb{
		font-size: 20px;
		color: #1f1f1f;
	}
	.poem .tips{
		font-size: 12px;
		color: #999;
	}
	.poem .content-pinyin .tips{
		display: inline-block;
	}
	.poem .tips span{
		font-weight: 700;
		color: #ff5c00;
	}
	.poem .tips a{
		color: #14B457;
	}
	

	.poem .tool{

	}
	.poem .tool li{
		display: inline-block;
		text-align: center;
		margin-right: 32px;
		line-height: 1.2;
	}
	.poem .tool li:last-child{
		float: right;
		margin-right: 0;
	}
	.poem .tool .icon{
		height: 22px;
		width: 22px;
		margin: 0 auto;
	}
	.poem .tool .name{
		font-size: 12px;
		color: #aaa;
	}
	.poem .tool .copy{
		background-position: -108px -27px;
	}
	.poem .tool .copys{
		background-position: -135px -27px;
	}
	.poem .tool .play{
		background-position: -54px -27px;
	}
	.poem .tool .plays{
		background-position: -81px -27px;
	}
	.poem .tool .like{
		background-position: -54px -54px;
	}
	.poem .tool .likes{
		background-position: -81px -54px;
	}
	.poem .tool .vote{
		background-position: 0 -54px;
	}
	.poem .tool .votes{
		background-position: -27px -54px;
	}
	.poem .tool .edit{
		background-position: -108px -54px;
	}
	.play_audio audio{
		padding-top: 16px;
	}
	.poem .tag{
    	margin-top: 16px;
    	padding-top: 18px;
    	border-top: 1px solid #ededed;
	}
	.poem .tag a{
    	font-size: 13px;
    	color: #666;
    	padding: 6px 10px;
    	background: #f7f7f7;
	}
	.poem .tag a:hover{
		background: #ff5c00;
		color: #fff;
	}
	
	.poem .tag .prefix {
		padding-right: 3px;
    	color: #ff5c00;
    	font-style: normal;
	}
	.poem .tag a:hover .prefix{
		color: #fff;
	}
	
	.poeminto li{
		padding: 0 16px;
		line-height: 50px;
		border-bottom: 1px solid #ededed;	
	}
	.poeminto li span{
		float: right;
		color: #999;
	}
	
	
	.slide-nav {
		border-bottom: 1px solid #ededed;
	}
		.slide-list{
			overflow: hidden;
			padding: 12px 16px;
			background-color: #fff;
			display: -webkit-box;
		    overflow-x: scroll;
		    -webkit-overflow-scrolling: touch;
		}
		.slide-list .option{
			margin-right: 32px;
			color: #666;
		}
		.slide-list .current{
		    font-size: 16px;
			color: #2F2F2F;
			font-weight: 700;
		}
		.slide-content-list .current{
             display:block;   
		}
	.slide-content{
		display: none;
		overflow: hidden;
		padding: 16px 16px 1px 16px;
	}
	.slide-content p{
		margin: 0 0 24px;
		font-size: 16px;
		line-height: 1.6;
		text-align: justify;
	}
	.slide-content p a{
		color: #14B457;
	}
		.slide-more{
		display: none;
		width: 100%;
		cursor:pointer;
		padding-bottom: 16px;
		text-align: center;
		font-size: 14px;
		color: #999;
	}
	.tp{
		padding-top: 66px;
	}

.scz{
	padding-left: 16px;
}
.line-container{
		position: relative;
		text-align: center;
		margin-bottom: 4px;
	}
	.line-container .line{
		position: absolute;
	    width: 100%;
	    top: 13px;
	    height: 1px;
	    background-color: #ededed;
	    z-index: 0;
	}
	.line-container .title{
		position: relative;
		display: inline-block;
		padding: 0 10px;
		background: #fff;
		z-index: 1;
		font-size: 16px;
		font-weight: 400;
		color: #999;
	}
	.line-container .title a{
	    color: #999;
	}
	
.item-verse-source{
	position: relative;
	margin: 16px 0;
	padding: 8px;
	color: #666;
	background: #F5F6F9;
	border-radius:4px;
	font-size: 16px;
}
	.item-verse-source:after {
			content: '';
			position: absolute;
			top: -16px;
			left: 46%;
			border: 8px solid transparent;
			border-bottom: 8px solid #f7f7f7;
		}
	.item-verse-source a{
		color: #14B457;
	}
	

/*注释弹出*/
.notes {
	position: relative;
	padding-bottom: .02rem;
	border-bottom: 1.5px solid #14B457;
}
.notes .popup {
	position: absolute;
	top: 31px;
	left:50%;z-index: 10;
	-webkit-transform: translate(-50%,0);
	-moz-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
	transform: translate(-50%,0);
}

.notes .popup p{
	position: relative;
	padding: 10px;
	z-index: 10;
	background-color: rgba(0,0,0,.8);
	color:#fff;
	border-radius: 4px;
	width: 2rem;
	line-height: 1.5;
	font-weight: normal;
	font-size: 14px;
}
.notes.on:after {
	content: '';
	position: absolute;
	top: 16px;
	left: 50%;
	margin-left: -8px;
	border: 8px solid transparent;
	border-bottom: 8px solid rgba(0,0,0,.8);
}

.loadtxt{width: 100%;color: #999;font-size: 14px;text-align: center;padding-top: 16px;position: relative;background-color: #fff;z-index: 2}
.loadtxt .loading{border-radius: 50%;width: 16px;height: 16px;border: 1px solid #666;border-top-color: transparent;margin-right: 8px;transform: translateZ(0);position: relative;vertical-align: middle;display: inline-block;}

.loadtxt .rotate {
    -webkit-animation: refresh-rotate 0.6s linear infinite;
    animation: refresh-rotate 0.6s linear infinite;
}
@keyframes refresh-rotate {
    0% {
        transform: rotateZ(0deg);
        -moz-transform: rotate(0deg);
    }
    100% {
        transform: rotateZ(360deg);
        -moz-transform: rotate(360deg);
    }
}


/* 搜索页面 */
.t-tips{
	padding: 10px;
	background: #fdf7f7;
	font-size: 14px;
	color: #d9534f;
	text-align: center;
}
.t-tips strong{
	color: #14B457;
}

/* 诗人合称 代表作品 */
.representative{
	margin: 0  16px 16px 0 ;
	display: flex;
	justify-content : space-between;
}
.representative a{
	width: 3.11rem;
	padding:4px;
	background-color: #f7f7f7;
	font-size: 13px;
	color:#666;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.item .mores{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 44px;
	line-height: 44px;
	text-align: center;
	color: #ff5c00;
	background-color: #fff;
	
	}

.works-copyright{
	padding: 15px;
	font-size: 12px;
	color: #999;
}	
.works-copyright dt{
	font-weight: 700;
	margin-bottom: 6px;
}
.works-copyright dd{
	margin-bottom: 6px;
}
.works-copyright dd a{
	color: #999;
}

	.anthology{
	    overflow: hidden;
	    padding: 16px;
		background-color: #fff;
		margin-bottom: 8px;
	}
	.anthology .cover{
		float: left;
		margin-right: 16px;
		width: 90px;
		height: 120px;
		background-color: #F5F6F9;
	}
	.anthology .cover img{
		width: 100%;
		height: 100%;
	}
	.anthology .name{
		font-size: 20px;
		line-height: 44px;
	}
	.anthology .explain{
		margin-bottom: 10px;
		font-size: 14px;
		color: #666;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal!important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.anthology .quantity{
		font-size: 12px;
		color: #999;
	}
	.anthology .quantity span{
		padding: 0 8px;
	}
	.anthology .info{
		overflow:hidden;
		width: 100%;
		padding-top: 16px;
	}
	.anthology .info p{
		margin-bottom: 10px;
		font-size: 14px;
		color: #666;
	}

@media screen and (max-width: 959px){
	.sideba{display: none;}
    .breadcrumb{
    	display: none;
    }
	.author-hot{
		padding: 16px 8px;
		display: -webkit-box;
		overflow-x: scroll;
		-webkit-overflow-scrolling:touch;
	}
		.author-hot li{
			padding:0 8px;
			line-height: 2;
		}
		.author-hot .image{
			overflow: hidden;
			width: 70px;
			height: 70px;
			border-radius: 50%;
			background-color: #f7f7f7;
		}
		.author-hot .image img{
			width: 100%;
			height: 100%;
		}
		.author-hot .name{
			text-align: center;
			font-size: 14px;
		}
	.album-list{
		padding: 16px;
	}
	.nav{
		margin-bottom: 8px;
	}
	nav{
		margin-bottom: 8px;
	}
	.copyright a:last-child{
		display: none;
	}
	.slide-content{
		overflow: hidden;
		position: relative;
	}
	.poem .tag{
    	margin-top: 16px;
    	padding-top: 16px;
    	border-top: 1px solid #ededed;
	height: 46px;
	overflow-x: auto;
    white-space: nowrap;
	}
.notes .popup p{
	width: 5rem;
}
}

@media screen and (min-width: 960px){	
    body{ 
    	width: 960px; 
    	margin: 0 auto; 
		display: flex;
    	flex-wrap: wrap;
    }
	.header,footer{
		width: 100%;
	}

	.main{
		width: 640px;
		margin-right: 20px;
	}
	.sideba{
		display: block;
		width: 300px;
	}
	.a-sideba{
		display: block;
		width: 300px;
	}
	.author-hot{
		padding: 16px 8px;
		display: flex;
		flex-wrap: wrap;
	}
		.author-hot li{
			margin: 8px 16px 16px 16px;
			line-height: 2;
		}
		.author-hot .image{
			overflow: hidden;
			width: 72px;
			height: 72px;
			border-radius: 50%;
			background-color: #f7f7f7;
		}
		.author-hot .image img{
			width: 100%;
			height: 100%;
		}
		.author-hot .name{
			text-align: center;
			font-size: 14px;
		}
		.author-hot li:hover .name{
			color: #FF5C00;
		}
		.slide-list::-webkit-scrollbar {
			display: none;
		}
		.representative a{
			width: 288px;
			padding: 8px 4px;
		}
		.representative a:hover{
			color: #14B457;
		}
		.notes {
		    padding-bottom: 2px;
		    border-bottom: 1px solid #14B457;
		}
	.anthology .cover{
		width: 120px;
		height: 160px;
	}
	.anthology .name{
		font-size: 24px;
		line-height: 60px;
	}
	.anthology .explain{
		font-size: 16px;
		padding-bottom: 10px;
	}
    .m-tags{
    	grid-template: auto / 1fr 1fr 1fr 1fr;
    }
}
.totop{
	z-index:1;
	position:fixed;
	right:20px;
	bottom:180px;
	border-radius:50%;
	padding: 12px;
	background-color:rgba(0,0,0,.6);    
}
.icon_top{
	display: block;
	width: 30px;
	height: 30px;
	background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M825.568 555.328l-287.392-289.28c-6.368-6.4-14.688-9.472-22.976-9.408-1.12-.096-2.08-.64-3.2-.64-4.672 0-9.024 1.088-13.024 2.88-4.032 1.536-7.872 3.872-11.136 7.136l-259.328 258.88c-12.512 12.48-12.544 32.736-.032 45.248 6.24 6.272 14.432 9.408 22.656 9.408 8.192 0 16.352-3.136 22.624-9.344L480 364.288V928c0 17.696 14.336 32 32 32s32-14.304 32-32V362.72l236.192 237.728c6.24 6.272 14.496 9.44 22.688 9.44s16.32-3.104 22.56-9.312c12.576-12.448 12.608-32.736.128-45.248zM864 192H160c-17.664 0-32-14.336-32-32s14.336-32 32-32h704c17.696 0 32 14.336 32 32s-14.304 32-32 32z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
	background-size: 100%;    
}

.authors{
	padding: 16px;
	background-color: #fff;
}
.authors .cover{
	float: left;
	margin-right: 10px;
	width: 68px;
	height: 68px;
	background-color: #F5F6F9;
	border-radius: 50%;
}
.authors .cover img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.authors .data{
	display: flex;
	height:68px;
}
.authors .data .center{
	align-self: center;
}
.authors .name{
	font-size: 18px;
}
.authors .nickname{
	font-weight: 400;
	font-size: 12px;
}
.authors .achievement{
	font-size: 14px;
	color: #999;
}
.authors .introduction{
	width: 100%;
	padding-top: 10px;
	font-size: 14px;
}	 			
.works li{
	background-color: #fff;
	margin-bottom: 8px;
	padding: 16px;
}
.works .more{
	text-align: center;
	color: #999;
}
.works .more a{
    display: block;
    width: 100%;
    height: 100%;
	color: #135294;
}
.works .poetry .title{
	font-size: 18px;
	/*font-weight: normal;*/
	color: #135294;
}
.works li:hover .title{
			color: #FF5C00;
}
.works .poetry .author{
	font-size: 14px;
	color: #999;
	line-height: 30px;
	margin-bottom: 8px;
}
.works .poetry .data{
	font-size: 16px;
	color: #2f2f2f;
	display: -webkit-box;
	overflow: hidden;
	white-space: normal!important;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.works .poetry .source{
    line-height: 44px;
    /*text-align: right;*/
    color: #999;
    font-size: 14px;
    margin-bottom: 10px;
}
.works .tags{
	height: 28px;
	overflow-x: auto;
    white-space: nowrap;
    margin-top: 16px;
}
.works .tags a{
	font-size: 12px;
	color: #999;
	padding: 4px 8px;
	border: 1px solid #EAECED;
}
.white{
    background-color: #fff;
}
.slide-content-list{
	position: relative;
	padding-bottom: 30px;
}
.slide-content-list .slide-more{
	position: absolute;
	z-index: 800;
	bottom: 0;
	width: 100%;
	height: 80px;
	padding-top: 30px;
	background: linear-gradient(-180deg,rgba(255,255,255,.8) 0,#fff 63%);
	color: #135294;
	font-size: 16px;
}
.slide-content-list .more{
	background: none;
}
.slide-content-list .wgt-best-arrowdown{
	display: inline-block;
    margin-left: 4px;
    height: 8px;
    width: 16px;
    position: relative;
}
.slide-content-list .wgt-best-arrowdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-top: 8px solid #135294;
    border-left: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid transparent;
}
.slide-content-list .wgt-best-arrowdown::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    border-top: 8px solid #fff;
    border-left: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid transparent;
}