.km_info .banner {position: relative;background-color: #333;border-radius: 25px;}
.km_info .banner > img {width: 100%;height: 0;padding-bottom: 40%;filter: blur(5px);z-index: -1;opacity: 0.7;}
.banner .banner-common {position: absolute;padding-bottom: 50px;margin-left: 40px;width: 100%;color: #fff;bottom: 0;}
.banner .banner-left {position: absolute;bottom: 0;margin-bottom: 50px;}
.banner .banner-common > .banner-right {right: 5%;position: absolute;bottom: 0;left: 40%;top: 60%;}
.banner .banner-left .intro {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;width: 50%;overflow: hidden;margin-top: 20px;font-size: 16px;}
.banner .banner-left .cover {width: 250px;height: 300px;margin-bottom: 20px;border: 3px solid #ffffff;border-radius: 25px;}
.banner .banner-left h1 {font-size: 36px;font-weight: 600;}
.banner .banner-left .tags {width: 50px;display: inline-block;text-align: center;border-radius: 25px;margin-right: 20px;margin-top: 10px;}
.banner .banner-right .btn {position: absolute;bottom: 0;right: 0;}
.banner .banner-right .a-btn {color: #fff;background-color: #de92d4;margin-right: 50px;margin-bottom: 50px;width: 120px;display: inline-block;text-align: center;height: 30px;line-height: 30px;border: 1px solid;border-radius: 20px;font-size: 14px;}
.km_info .body .body-left {width: 60%;background-color: #de92d4;height: 500px;}
.km_info .body .body-right {width: 40%;background-color: #03a9f4;height: 500px;}
.chapter-body{}
.chapter-head{height: 40px;border-bottom: 1px solid #dcdcdc;}
.chapter-head .head-ul{display: flex;}
.head-ul .head-item{margin: 0 20px;line-height: 40px;cursor:pointer;}
.head-ul .head-item.active{color: #de92d4;border-bottom: 2px solid #de92d4;}
.chapter-title{display: flex;height: 50px;line-height: 50px;}
.chapter-title .tip{font-size: 18px;padding-left: 10px;position: relative;}
.chapter-title .last{color: #999999;margin-left: 50px;}
.chapter-title .last a{color: #de92d4;}
.chapter-title .time{color: #999999;margin-left: 20px;}
.chapter-title .tip:before{position: absolute;content: "";height: 30px;line-height: 50px;width: 3px;background: #de92d4;top: 10px;left: 0;border-radius: 4px;}
.chapter-list {display: flex;flex-wrap: wrap;}
.chapter-list .read-item{box-sizing: border-box;padding-left: 20px;padding-bottom: 5px;padding-top: 5px;width: 25%;font-size: 16px;background: #fbfbfb;border-radius: 2px;position: relative;}
.chapter-list .read-item .lock{position: absolute;width: 20px;height: 20px;right: 0;}
.chapter-list .read-item.hide{display: none;}
.body .recommend{display: flex;flex-wrap: wrap;margin-top: 20px;justify-content: space-between;}
.recommend .recommend-list{width: 16%;height: 200px;}
.recommend-head{font-size: 20px;}
.recommend-list .cover{position: relative;}
.recommend-list .cover img{width: 100%;height: 180px;}
.recommend-list .cover .last{position: absolute;bottom: 5px;right: 0;background: rgba(222 146 212 / 0.7);color: #fff;padding: 0 5px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 100%;}
.recommend-list>a{font-size: 16px;color: rgba(0 0 0 / 70%);}
.comment .box-head{position: relative;display: flex;border-bottom: 1px solid #de92d4;height: 40px;line-height: 40px;}
.comment .box-head .left{height: 40px;font-size: 18px;color: #de92d4;padding: 0 20px;border: 1px solid #de92d4;border-bottom: 0;margin-bottom: -1px;background-color: white;}
.comment .box-head .right{position: absolute;right: 0;color: #de92d4;font-size: 16px;}
.comment .box-head .right span{font-size: 20px;font-family: Impact;padding: 0 5px;}
.comment .comment-box{display: flex;position: relative;margin-top: 10px;}
.comment-box .textarea-box{width: 90%;}
.comment-box .textarea-box textarea{width: 90%;border: 1px solid #de92d4;padding: 10px;outline: none;}
.comment-box button{height: 40px;padding: 0 50px;bottom: 5px;position: absolute;right: 0;background: #de92d4;color: #fff;border: 0;border-radius: 20px;cursor: pointer;}
.comment-box button:hover{opacity: 0.7;}
.recommend-box {margin-bottom: 20px;}
.comic-icon-title {font-size: 18px;padding-left: 10px;position: relative;}
.langtail-box{display: flex;flex-wrap: wrap;justify-content: space-between;}
li.langtail-list.km-hide-text {width: 20%;margin: 5px 10px;}