.mkz-icon,
.iconfont {
    font-family: "font_family" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: none;
}

/* story-banner */
.story-banner {
	width:100%;
	height:376px;
	background:url(/images/yeyuzhe/index/bg_index_banner.png) no-repeat center center;
	background-size:cover
}
.story-banner .banner-wrap {
    width: 1200px;
	margin:0 auto;
}
.banner-slide-wrapper {
	float:left;
	margin-top:32px;
    width: 918px;
	height:312px;
	position:relative;
	overflow:hidden;
}
.banner-slide-wrapper .tns-visually-hidden {
	display:none
}
.banner-slide-wrapper .slide-bg {
	position:absolute;
	top:-32px;
	right:0;
	width:130px;
	height:376px;
	background:url(/images/yeyuzhe/index/bg_index_list_zz.png) no-repeat center right;
	background-size:130px 376px;
	z-index:9
}
.banner-slide-wrapper .slide-prev,.banner-slide-wrapper .slide-next {
	display:none;
	position:absolute;
	top:138px;
	width:36px;
	height:36px;
	color:#FFF;
	font-size:16px;
	line-height:36px;
	text-align:center;
	opacity:0.6;
	background:#302F3B;
	border-radius:3px;
	cursor:pointer;
	z-index:999
}
.banner-slide-wrapper .slide-next {
	right:0
}
.banner-slide-wrapper:hover .slide-prev,
.banner-slide-wrapper:hover .slide-next {
	display:block !important
}

.tns-inner {
    margin: 0px -12px 0px 0px;
}
.tns-slider {
    transition-duration: 0.4s;
}
.tns-item {
    padding-right: 12px;
    font-size: 12px;
}

.banner-slide__item {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
	float:left;
	width: 200px;
	height: 312px
}
.banner-slide__item .comic-cover {
	display:block;
	width: 180px;
	height: 240px;
	border-radius:3px;
	overflow:hidden
}
.banner-slide__item .comic-intro {
	position:absolute;
	left:0;
	top:0;
	width: 160px;
	height:62px;
	padding-left:10px;
    padding-right:10px;
	padding-top:250px;
	background:url(/images/yeyuzhe/index/bg_index_banner_tj.png)
}
.banner-slide__item .comic-name {
	font-size:16px;
	color:#e5e5e5;
	line-height:26px;
	font-weight:600;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis
}
.banner-slide__item .comic-hot {
	font-size:13px;
	color:#d0d0d0;
	line-height:20px
}
.banner-slide__item:hover .banner-slide__item-detail {
	display:block
}
.banner-slide__item-detail {
	position:absolute;
	bottom:0;
	left:0;
	padding:10px 12px;
	width: 157px;
	height:100px;
	background:#fff
}
.banner-slide__item-detail .comic-name {
	font-size:15px;
	color:#28292d;
	line-height:22px;
	font-weight:600;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis
}
.banner-slide__item-detail .comic-tags {
	margin:7px 0
}
.banner-slide__item-detail .tag {
	float:left;
	padding:0 8px;
	margin-right:8px;
	font-size:12px;
	color:#28292d;
	line-height:20px;
	background:#eeeff2;
	border-radius:10px
}
.banner-slide__item-detail .comic-btns {
	margin-top:20px
}
.banner-slide__item-detail .read-btn {
	display:inline-block;
	width:90px;
	height:28px;
	font-size:13px;
	color:#ffffff;
	line-height:28px;
	text-align:center;
	background:url(/images/yeyuzhe/index/bg_index_m2btn.png) no-repeat center center;
	background-size:cover
}
.banner-slide__item-detail .collect-btn {
	float:right;
	width:16px;
	height:16px;
	margin-top:6px;
	font-size:16px;
	color:#ff4343;
	cursor:pointer
}
.banner-slide__item-detail .collect-btn .off {
	display:none
}
.banner-slide__item-detail .collect-btn.collected .on {
	display:none
}
.banner-slide__item-detail .collect-btn.collected .off {
	display:inline-block;
	color:#999
}
.banner-recommand {
	float:right;
	width:222px;
	height:344px;
	padding:32px 30px 0;
	background:rgba(0,0,0,0.3)
}
.banner-recommand__item {
	width:222px;
	height:148px;
	margin-bottom:16px
}
.banner-recommand__item .comic-cover {
	display:block;
	width:222px;
	height:148px;
	border-radius:3px;
	margin-bottom:16px
}
/* end story-banner */

.story-nav {
	margin:30px auto 0;
    width: 1200px;
}
.story-nav .story-nav-wrapper {
	float:left;
	height:32px;
	overflow:hidden
}
.story-nav .nav-item {
	float:left;
	width:70px;
	height:32px;
	padding-left:20px;
    margin-right: 10px;
	line-height:32px;
	background:#F8F8F8;
	border-radius:16px
}
.story-nav .nav-item .mkz-icon {
	float:left;
	width:16px;
	height:16px;
	margin-top:8px;
	margin-right:6px;
	line-height:16px;
	font-size:16px
}
.story-nav .all-category {
	float:right;
	margin-top:8px;
	font-size:14px;
	color:#28292D;
	line-height:16px
}
.story-nav a:hover {
	color:#FF4343
}
.story-nav .icon-tc-1:before {
	content:"\e6ae"
}
.story-nav .icon-tc-2:before {
	content:"\e6bb"
}
.story-nav .icon-tc-3:before {
	content:"\e6b6"
}
.story-nav .icon-tc-4:before {
	content:"\e6b9"
}
.story-nav .icon-tc-5:before {
	content:"\e6b4"
}
.story-nav .icon-tc-6:before {
	content:"\e6b2"
}
.story-nav .icon-tc-7:before {
	content:"\e6c7"
}
.story-nav .icon-tc-8:before {
	content:"\e6bf"
}
.story-nav .icon-tc-9:before {
	content:"\e6af"
}
.story-nav .icon-tc-10:before {
	content:"\e6b1"
}
.story-nav .icon-tc-11:before {
	content:"\e6ac"
}
.story-nav .icon-tc-12:before {
	content:"\e6c3"
}

.story-container {

}
.story-floor {
	margin:40px auto;
    width: 1200px;
}
.story-floor .ml-0 {
	margin-left:0
}
.story-floor__head {
	height:36px;
	line-height:36px;
	font-size:24px;
	color:#28292d;
	font-weight:600
}
.story-floor__head .head-icon {
	float:left;
	width:36px;
	height:36px;
	margin-right:10px
}
.story-floor__head .icon-recom {
	background:url(/images/yeyuzhe/index/ic_50.svg) no-repeat center center;
	background-size:cover
}
.story-floor__head .icon-contract {
	background:url(/images/yeyuzhe/index/ic_contract.svg) no-repeat center center;
	background-size:cover
}
.story-floor__head .icon-up {
	background:url(/images/yeyuzhe/index/ic_30.svg) no-repeat center center;
	background-size:cover
}
.story-floor__head .icon-update {
	background:url(/images/yeyuzhe/index/ic_update.svg) no-repeat center center;
	background-size:cover
}
.story-floor__head .more {
	font-size:13px;
	line-height:20px;
	font-weight:400
}
.story-floor__content {
	margin-top:20px
}
.story-floor__content .left-wrap {
	float:left;
	background:#f8f8f8;
    width: 454px;
    height: 200px;
    padding: 29px 25px;
}
.story-floor__content .recom-wrapper {
	float:left;
	height:248px
}
.story-floor__content .recommend-carousel {
	width: 240px;
	height:248px;
	position:relative;
	clear:both
}
.story-floor__content .recom-slide {
	position:relative;
    margin-top: -20px;
}
.story-floor__content .slide-item {
	display:inline-block;
	background:#f8f8f9
}
.story-floor__content .slide-item .comic-cover {
	width:186px;
	height:248px;
	box-shadow:0 3px 9px 0 rgba(255,67,67,0.5)
}
.story-floor__content .recom-info {
	float:right;
	width: 184px;
	margin-left:20px;
}
.story-floor__content .recom-info .comic-name {
	font-size:18px;
	color:#28292d;
	text-align:center;
	line-height:26px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-weight:600
}
.story-floor__content .recom-info .comic-tag {
	margin-top:10px;
	font-size:13px;
	color:#999999;
	text-align:center;
	line-height:20px
}
.story-floor__content .recom-info .comic-intro {
	color:#666666;
	overflow:hidden;
	line-height:22px;
	height:90px;
    margin-top: 10px;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical
}
.story-floor__content .recom-info .comic-hot {
	font-size:12px;
	color:#ff4343;
	text-align:center;
	line-height:18px
}
.story-floor__content .recom-info .mkz-icon {
	font-size:16px;
	vertical-align:middle
}
.story-floor__content .recom-info .read-btn {
	display:block;
	margin:8px auto;
	width:90px;
	height:28px;
	text-align:center;
	font-size:13px;
	color:#ffffff;
	line-height:28px;
	background:url(/images/yeyuzhe/index/bg_index_m2btn.png) no-repeat center center;
	background-size:cover
}
.floor-comic-item {
	float:left;
	position:relative;
    width: 156px;
    margin-left: 18px;
}
.floor-comic-item .comic-cover {
	width:156px;
	height:208px;
}
.floor-comic-item .comic-cover {
	position:relative
}
.floor-comic-item .comic-new {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position:absolute;
	bottom:0;
	left:0;
	padding:0 10px;
	width:100%;
	height:36px;
	font-size:12px;
	color:#ffffff;
	line-height:36px;
	font-weight:600;
	background:url(/images/yeyuzhe/index/bg_index_list.png) no-repeat center center;
	background-size:cover;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis
}
.floor-comic-item .comic-new a:hover {
	color:#FFF
}
.floor-comic-item .comic-name {
	margin-top:8px;
	font-size:15px;
	color:#28292d;
	line-height:22px;
	font-weight:600;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis
}
.floor-comic-item .comic-info,
.floor-comic-item .comic-deadline,
.floor-comic-item .comic-author,
.floor-comic-item .comic-time {
	margin-top:2px;
	font-size:13px;
	color:#999999;
	line-height:20px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis
}
.floor-comic-item .comic-read {
	height:32px;
	margin:10px auto 0;
	text-align:center;
	line-height:32px;
	font-size:13px;
	color:#ff4343;
	background:#f8f8f8;
	border-radius:16px
}
.floor-comic-item .comic-read .mkz-icon {
	margin-right:5px
}

.story-rank {
	height:646px;
	background:#4d4342;
}
.story-rank__wrap {
	margin:0 auto;
    width: 1200px;
	overflow:hidden
}
.story-rank__nav {
	margin-top:40px
}
.story-rank__nav .nav-item {
	position:relative;
	float:left;
	margin-right:40px;
	font-size:20px;
	color:rgba(255,255,255,0.8);
	line-height:36px;
	cursor:pointer
}
.story-rank__nav .nav-item:hover {
	color:#FFF;
	font-size:24px
}
.story-rank__nav .nav-item.active {
	color:#FFF;
	font-size:24px
}
.story-rank__nav .nav-item.active .icon-star {
	display:block
}
.story-rank__nav .icon-star {
	display:none;
	position:absolute;
	right:-10px;
	top:-10px;
	width:26px;
	height:26px;
	background:url(/images/yeyuzhe/index/bg_index_bd.png) no-repeat center center;
	background:cover
}
.story-rank__nav .rank-more {
	float:right;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	width:90px;
	height:30px;
	text-align:center;
	line-height:30px;
	font-size:14px;
	color:rgba(255,255,255,0.8);
	border:1px solid rgba(255,255,255,0.8);
	border-radius:15px
}
.story-rank__list {
	margin-top:20px
}
.story-rank__list .rank-item {
	float:left;
	margin-right:30px;
	margin-bottom:15px;
	background:rgba(255,255,255,0.92);
	border-radius:3px;
    width: 365px;
    height: 160px;
    padding-right: 15px;
}
.story-rank__list .rank-item:nth-of-type(3n) {
	margin-right:0
}
.story-rank__list .comic-cover {
	float:left;
	width:120px;
	height:160px;
	margin-right:20px
}
.story-rank__list .comic-top {
	margin-top:15px;
	font-size:13px;
	color:#FF4343;
	line-height:20px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis
}
.story-rank__list .comic-top .hl {
	font-size:16px;
	color:#FF4343;
	line-height:24px;
	font-weight:600
}
.story-rank__list .comic-name {
	margin-top:5px;
	font-size:15px;
	color:#28292D;
	line-height:22px;
	font-weight:600;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis
}
.story-rank__list .comic-author {
	margin-top:5px;
	font-size:13px;
	color:#666666;
	line-height:20px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis
}
.story-rank__list .comic-intro {
	height:40px;
	margin-top:14px;
	font-size:13px;
	color:#666666;
	line-height:20px;
	overflow:hidden;
	line-height:1.5em;
	max-height:3em;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical
}

/* story-friend */
.story-friend {
	margin:0 auto;
    width: 1200px;
}
.story-friend .in-friends {
	min-height:60px;
	margin:30px auto 40px
}
.story-friend .friend-head {
	font-size:14px;
	line-height:14px;
	font-weight:400;
	margin-bottom:15px
}
.story-friend .friend-link {
	float:left;
	margin-right:20px;
	margin-bottom:6px;
	font-size:13px;
	line-height:20px;
	color:#666
}
.story-friend .friend-link:hover {
	color:#ff7830
}
/* end story-friend */