html{background: #191919;}
.box{width: 1000px;margin: 0 auto;}
img{width: 100%;height: 100%;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);transition: all .3s ease-in-out;object-fit: cover;}
div{box-sizing: border-box;}
/* 全局顶部 */
header{width: 100%;height: 60px;position: fixed;top: 0;left: 0;z-index: 999;;background: #212121;display: flex;justify-content: center;align-items: center;}
header .box{display: flex;justify-content: space-between;align-items: center;height: 60px;}
header .box .left{display: flex;justify-content: flex-start;align-items: center;}
header .box .left .logo{width: 96px;height: 32px;}
header .box .left .type{display: flex;justify-content: flex-start;align-items: center;padding: 0 40px;column-gap: 32px;}
header .box .left .type a{font-size: 16px;line-height: 24px;font-weight: 700;color: rgba(255, 255, 255, .8);}
header .box .left .type a:hover{color: #16DF60;}
header .box .left .type a.on{color: #16DF60;}
header .box .search-box{display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;width: 260px;height: 36px;border-radius: 36px;background-color: #262626;}
header .box .search-box input{-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;color: rgba(255, 255, 255, .8);font-size: 12px;line-height: 20px;background: transparent;border: 0;padding-left: 16px;}
header .box .search-box button{width: 40px;height: 36px;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;color: rgba(255, 255, 255, .4);border: 0;background: transparent;}
.headzwf{width: 100%;height: 60px;}
/* 全局底部 */
footer{width: 100%;height: 40px;background: #212121;display: flex;justify-content: center;align-items: center;position: fixed;bottom: 0;left: 0;z-index: 999;}
footer .box{display: flex;justify-content: space-between;align-items: center;}
footer .box .left{color: rgba(255, 255, 255, .4);font-size: 12px;line-height: 20px;}
footer .box .ul{display: flex;justify-content: space-between;align-items: center;gap: 20px;}
footer .box .ul .li{color: rgba(255, 255, 255, .4);font-size: 12px;line-height: 20px;}
footer .box .ul .li.on{color: #16DF60;}
footer .box .ul .li:hover{color: #16DF60;}
/* 首页 */
.box{display: flex;justify-content: space-between;}
.box .left{width: 680px;}
.box .left .module{width: 100%;padding: 20px;border-radius: 12px;background: #212121;margin-top: 20px;}
.box .left .module .title{display: flex;justify-content: flex-start;align-items: center;gap: 5px;}
.box .left .module .title .dianzui{width: 4px;height: 16px;background: #16DF60;border-radius: 2px;}
.box .left .module .title .name{font-size: 20px;line-height: 28px;font-weight: 700;color: rgba(255, 255, 255, .8);}
.box .left .module .title .name i{font-size: 16px;font-weight: 500;}
.box .left .module .list{width: 100%;display: flex;justify-content: flex-start;flex-wrap: wrap;gap: 20px;margin-top: 20px;}
.box .left .module .list .li{display: block;width: calc(20% - 16px);}
.box .left .module .list .li .img{width: 100%;height: 168px;border-radius: 6px;overflow: hidden;position: relative;background: #191919;}
.box .left .module .list .li .img:hover img{-webkit-transform: scale(1.025);-ms-transform: scale(1.025);transform: scale(1.025);}
.box .left .module .list .li .img:before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: -webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(0,0,0,0)),color-stop(84%,rgba(0,0,0,.6)),to(rgba(0,0,0,.9)));background: -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,.6) 84%,rgba(0,0,0,.9) 100%);background: linear-gradient(180deg,#0000 50%,#0009 84%,#000000e6);z-index: 1;}
.box .left .module .list .li .name{margin-top: 10px;font-size: 14px;line-height: 22px;font-weight: 700;color: rgba(255, 255, 255, .8);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;}
.box .left .module .type {width: 100%;display: flex;justify-content: flex-start;gap: 20px;margin-bottom: 20px;}
.box .left .module .type .name{font-size: 14px;line-height: 22px;color: #16DF60;}
.box .left .module .type .ul{flex: 1;font-size: 14px;gap: 20px;display: flex;flex-wrap: wrap;}
.box .left .module .type .ul a{color: rgba(255, 255, 255, .8);}
.box .left .module .type .ul a.on{color: #16DF60;}
.box .left .module .pagination{width: 100%;display: flex;justify-content: center;align-items: center;margin-top: 20px;}
.box .left .module .pagination .page-info{font-size: 12px;color: rgba(255, 255, 255, .6);padding-right: 10px;}
.box .left .module .pagination .page-controls{display: flex;justify-content: flex-start;align-items: center;gap: 8px;}
.box .left .module .pagination .page-controls a{padding: 0 6px;line-height: 18px;border: 1px solid rgba(255, 255, 255, .6);font-size: 12px;color: rgba(255, 255, 255, .6);border-radius: 4px;transition: all .3s ease-in-out;}
.box .left .module .pagination .page-controls a:hover{border: 1px solid #16DF60;color: #16DF60;}
.box .left .module .pagination .page-controls a.on{background: #16DF60;color: #fff;border: 1px solid #16DF60;}
.box .left .module .comicinfo{width: 100%;display: flex;justify-content: flex-start;align-items: center;gap: 20px;}
.box .left .module .comicinfo .img{width: 100px;height: 150px;border-radius: 6px;overflow: hidden;position: relative;}
.box .left .module .comicinfo .img:before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: -webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(0,0,0,0)),color-stop(84%,rgba(0,0,0,.45)),to(rgba(0,0,0,.9)));background: -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,.45) 84%,rgba(0,0,0,.9) 100%);background: linear-gradient(180deg,#0000 50%,#00000073 84%,#000000e6);z-index: 1;}
.box .left .module .comicinfo .info{width: calc(100% - 120px);}
.box .left .module .comicinfo .info .name{font-size: 20px;line-height: 28px;font-weight: 700;color: rgba(255,255,255,.8);}
.box .left .module .comicinfo .info .nav{display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;font-size: 12px;color: rgba(255,255,255,.6);gap: 8px;padding-top: 8px;}
.box .left .module .comicinfo .info .nav .ta{width:calc(50% - 5px);}
.box .left .module .comicinfo .info .btn{display: inline-block;font-size: 15px;background: #16DF60;padding: 0 10px;line-height: 36px;border-radius: 6px;margin-top: 8px;color: rgba(255,255,255,1);}
.box .left .module .jjtext{width: 100%;line-height: 1.5;font-size: 14px;color: rgba(255,255,255,.8);padding: 15px 0;}
.box .left .module .chapterlist{width: 100%;max-height: 400px;overflow-y: auto;overflow-x: hidden;display: flex;justify-content: flex-start;flex-wrap: wrap;gap: 10px;scrollbar-width: none;-ms-overflow-style: none;margin-top: 15px;}
.box .left .module .chapterlist::-webkit-scrollbar{display: none;}
.box .left .module .chapterlist .item{width: calc(50% - 5px);padding: 0 10px;line-height: 36px;font-size: 14px;color: rgba(255,255,255,.8);background: rgba(255,255,255,.1);display: block;box-sizing: border-box;border-radius: 6px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.box .left .module .chapterlist .item:hover{background: #16DF60;color: #000;}
.box .left .module .chaptertitle{font-size: 18px;font-weight: bold;color: rgba(255,255,255,.8);margin-bottom: 20px;}
.box .left .module .picpage{margin-top: 20px;display: flex;justify-content: center;align-items: center;gap: 10px;}
.box .left .module .picpage a{padding: 0 10px;background: rgba(255,255,255,.1);line-height: 30px;border-radius: 5px;color: rgba(255,255,255,.8);}
.box .left .module .about-title{width: 100%;font-size: 16px;color: #fff;padding-bottom: 10px;border-bottom: 1px solid rgba(255,255,255,.2);text-align: center;}
.box .left .module .about-content {line-height: 1.8;color: #666;font-size: 14px;padding-top: 15px;}
.box .left .module .about-content p {margin-bottom: 5px;}  
.box .right{width: 300px;}
.box .right .module{width: 100%;padding: 20px;border-radius: 12px;background: #212121;margin-top: 20px;}
.box .right .module .title{display: flex;justify-content: flex-start;align-items: center;gap: 5px;}
.box .right .module .title .dianzui{width: 4px;height: 16px;background: #16DF60;border-radius: 2px;}
.box .right .module .title .name{font-size: 20px;line-height: 28px;font-weight: 700;color: rgba(255, 255, 255, .8);}
.box .right .module .title .name i{font-size: 16px;font-weight: 500;}
.box .right .module .list{width: 100%;display: flex;justify-content: flex-start;flex-wrap: wrap;gap: 20px;margin-top: 20px;}
.box .right .module .list .li{display: block;width: calc(33.33333% - 13.333333333px);}
.box .right .module .list .li .img{width: 100%;height: 120px;border-radius: 6px;overflow: hidden;position: relative;}
.box .right .module .list .li .img:hover img{-webkit-transform: scale(1.025);-ms-transform: scale(1.025);transform: scale(1.025);}
.box .right .module .list .li .img:before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: -webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(0,0,0,0)),color-stop(84%,rgba(0,0,0,.6)),to(rgba(0,0,0,.9)));background: -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,.6) 84%,rgba(0,0,0,.9) 100%);background: linear-gradient(180deg,#0000 50%,#0009 84%,#000000e6);z-index: 1;}
.box .right .module .list .li .name{margin-top: 10px;font-size: 14px;line-height: 22px;font-weight: 700;color: rgba(255, 255, 255, .8);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;}
.box .right .module .list2{width: 100%;display: flex;justify-content: flex-start;flex-direction: column;flex-wrap: wrap;gap: 20px;margin-top: 20px;}
.box .right .module .list2 .li{width: 100%;display: flex;justify-content: space-between;align-items: center;gap: 10px;}
.box .right .module .list2 .li .img{width: 99px;height: 66px;border-radius: 6px;overflow: hidden;background: #191919;}
.box .right .module .list2 .li .img:hover img{-webkit-transform: scale(1.025);-ms-transform: scale(1.025);transform: scale(1.025);}
.box .right .module .list2 .li .info{width: calc(100% - 109px);}
.box .right .module .list2 .li .info .name{font-size: 14px;height: 44px;line-height: 22px;color: rgba(255, 255, 255, .8);overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.box .right .module .list2 .li .info .author{font-size: 12px;line-height: 1;color: rgba(255, 255, 255, .4);padding-top: 6px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}