:root {
	--button-color:#66B933;
}
body {
	background:rgba(15,15,15);
}
section.nobanner {
	margin-top:80px;
}

div[data-layer='book'] .list {
	display:-webkit-flex; justify-content:space-between; column-gap:60px;
}
div[data-layer='book'] .list > .img {
	width:100%; max-width:360px; box-sizing:border-box; flex-shrink:0; border-radius:22px; overflow:hidden;
}
div[data-layer='book'] .list > .info {
	width:100%; box-sizing:border-box; padding:20px 0; position:relative;
}
div[data-layer='book'] .list > .info h6 {
	font-size:32px; font-family:'Poppins'; color:white; font-weight:normal; margin-bottom:12px;
}
div[data-layer='book'] .list > .info .status,
div[data-layer='book'] .list > .info .eps,
div[data-layer='book'] .list > .info .cate label,
div[data-layer='book'] .list > .info p {
	font-size:13px; font-family:'Poppins'; color:rgba(255,255,255,.75);
}
div[data-layer='book'] .list > .info .cate,
div[data-layer='book'] .list > .info .eps {
	margin-top:30px;
}
div[data-layer='book'] .list > .info .status label,
div[data-layer='book'] .list > .info .eps label,
div[data-layer='book'] .list > .info .cate label {
	display:block; font-size:14px; 
}
div[data-layer='book'] .list > .info .cate-items {
	display:-webkit-flex; flex-wrap:wrap; column-gap:10px; row-gap:10px; 
}
div[data-layer='book'] .list > .info .status span,
div[data-layer='book'] .list > .info .eps span,
div[data-layer='book'] .list > .info .cate-items span {
	font-size:13px; font-family:'Poppins'; font-style:italic; color:rgba(255,255,255,.5);
}
div[data-layer='book'] .list > .info .content {
	width:100%; box-sizing:border-box; border-radius:3px; margin-top:60px; height:110px; position:absolute; bottom:10px; background:#1E1E1E; padding:8px 0 8px 8px;
}
div[data-layer='book'] .list > .info .content .box {
	display:-webkit-flex; align-items:center; flex-wrap:wrap; column-gap:8px; max-height:100px; width:100%; 
}
div[data-layer='book'] .list > .info .content .box > .items {
	display:grid; place-items:center; width:60px; height:45px; font-size:18px; font-family:'Poppins'; background:#457E22; border-radius:6px; border:1px solid rgba(0,0,0,.7); cursor:pointer; color:white; margin-bottom:8px;
}


/*Book List*/
.book-list {
	display:-webkit-flex; column-gap:20px; row-gap:20px; width:100%; box-sizing:border-box; flex-wrap:wrap;
}
.book-list .list {
	width:165px; box-sizing:border-box; flex-shrink:0; cursor:pointer; position:relative;
}
.book-list .list .img {
	width:100%; box-sizing:border-box; max-height:250px; overflow:hidden; font-size:0;
}
.book-list .list .content {
	width:100%; box-sizing:border-box; padding:0 6px; margin-top:8px; display:-webkit-box; -webkit-box-orient:vertical; text-overflow:ellipsis; -webkit-line-clamp:2;
}
.book-list .list .eps {
	position:absolute; top:5px; right:5px;
}
.book-list .list .eps > .items {
	 background:#457E22; display:grid; place-items:center; width:30px; height:30px; border-radius:33px;
}
.book-list .list .eps > .items span {
	font-size:15px; font-family:'Poppins','sans-serif'; color:white;
}
.book-list .list .content p {
	font-size:15px; font-family:'Poppins','sans-serif'; line-height:1.2; color:white;
}

/*Rank List*/
.rank-list {
	width:100%; box-sizing:border-box;
}
.rank-list .list {
	width:100%; box-sizing:border-box; margin-bottom:10px; border-radius:11px; display:-webkit-flex; align-items:center; height:80px; background:#EEEEEE; overflow:hidden; cursor:pointer;
}
.rank-list .list:last-child {
	margin-bottom:0;
}
.rank-list .list .num {
	width:40px; flex-shrink:0; height:100%; display:grid; place-items:center; background:transparent;
}
.rank-list .list .num:nth-child(1) {
	background:red;
}
.rank-list .list .num:nth-child(2) {
	background:red;
}
.rank-list .list .num:nth-child(3) {
	background:red;
}
.rank-list .list .num h6 {
	font-size:24px; color:white; font-family:'Poppins';
}
.rank-list .list .img {
	width:75px; flex-shrink:0; box-sizing:border-box; overflow:hidden; font-size:0;
}
.rank-list .list .content {
	padding:0 17px; width:100%; box-sizing:border-box;
}
.rank-list .list .content p {
	font-size:15px; font-family:'Poppins'; line-height:1.2; color:black; margin-bottom:4px;
}
.rank-list .list .content .icon {
	display:-webkit-flex; align-items:center; column-gap:3px; color:black;
}
.rank-list .list .content .icon i {
	font-size:14px;
}
.rank-list .list .content .icon p {
	font-size:14px; margin-bottom:0;
}


div[data-layer='recently'] h6 {
	font-size:24px; font-family:'Poppins'; font-weight:normal; color:white; margin-bottom:6px;
}
div[data-layer='recently'] .flex {
	display:-webkit-flex; justify-content:space-between; column-gap:20px; row-gap:20px;
}
div[data-layer='recently'] .flex > .flex-item {
	box-sizing:border-box; flex-shrink:0;
}
div[data-layer='recently'] .flex > .flex-item:nth-child(1) {
	width:68%;
}
div[data-layer='recently'] .flex > .flex-item:nth-child(2) {
	width:28%;
}

/*Banner*/
.banner {
	margin-top:60px;
}
.banner .list {
	width:100%; position:relative; box-sizing:border-box; height:100vh; max-height:640px; overflow:hidden; margin:0 auto;
}
.banner .new-layer {
	padding:0;
}
.banner .adjustment {
	position:relative;
}
.banner .list .items {
	width:100%; box-sizing:border-box; position:absolute; opacity:0; transition:.5s; visibility:hidden; display:-webkit-flex; align-items:center; height:640px;
}
.banner .list .items .info {
	width:100%; box-sizing:border-box; padding:20px;
}
.banner .list .items h6 {
	font-size:32px; font-family:'Poppins'; font-weight:normal; line-height:1.2; white-space:break-spaces; color:white;
}
.banner .list .items p {
	font-size:15px; font-family:'Poppins'; color:#D8D8D8;
}
.banner .list .items .img {
	width:fit-content; box-sizing:border-box; max-height:640px; height:100%; flex-shrink:0;
}
.banner .list .items.active {
	z-index:2; opacity:1; transition:.5s; visibility:visible;
}
.banner .list .items.active .button,
.banner .list .items.active p,
.banner .list .items.active h6 {
	transition:.3s; transform:translateY(0); opacity:1; transition-delay:.5s;
}
.banner .list .items .button,
.banner .list .items p,
.banner .list .items h6 {
	transform:translateY(6px); transition:.3s; opacity:0;
}
.banner .list .items.active .img {
	transition:.3s; opacity:1; transition-delay:.5s;
}
.banner .list .items .img {
	transition:.3s; opacity:0;
}
.banner .list .items.sub {
	z-index:1; opacity:1; transition:.5s; visibility:hidden;
}
.banner .list .items .button {
	background:#66B933; color:white; width:200px; border-radius:6px; text-align:center; padding:8px 15px; box-sizing:border-box; cursor:pointer; font-family:'Poppins','sans-serif'; font-size:18px; margin-top:18px;
}
.banner .pointer {
	position:absolute; display:grid; align-items:center; left:20px; bottom:35px; box-sizing:border-box; z-index:99;
}
.banner .pointer .point {
	margin:15px 0; padding:15px 7px; transition:0.3s;
}
.banner .pointer .point.active div {
	background:#457E22;
}
.banner .pointer .point div {
	width:10px; height:10px; background:#CBCBCB; border-radius:50%; cursor:pointer; box-sizing:border-box;
}
.banner .pointer > div {
	display:-webkit-flex; align-items:flex-end; justify-content:center; height:100%;
}

/*Navigation*/
nav.web {
	background:transparent; position:fixed; top:0; z-index:999; width:100%; box-sizing:border-box; transition:.5s;
}
nav.web.stick {
	background:#282828 !important; transition:.5s;
}
nav.web.stick .hide-bar .icon,
nav.web.stick .content > .list .items,
nav.web.stick .content > .list .icon {
	color:white !important; transition:.5s;
}
nav.web .content > .img a img {
	filter:brightness(5) invert(1);
}
nav.web.stick .content > .img a img {
	filter:unset;
}
nav.web .content {
	justify-content:space-between; width:100%; padding:12px 0; position:relative; max-width:1366px; margin:0 auto; display:-webkit-flex;
}
nav.panel .side-nav .list > a i,
nav.web .content > .panel i {
	font-size:19px; font-family:'Poppins','sans-serif';
}
nav.web .content > .list .icon {
	width:30px; height:30px; display:grid; place-items:center; color:white; cursor:pointer; margin-left:12px;  transition:.5s;
}
nav.web .content > .img {
	width:100px; box-sizing:border-box; flex-shrink:0; display:grid; place-items:center;
}
nav.web .content > .list {
	align-items:center; justify-content:flex-end; display:-webkit-flex; width:100%; box-sizing:border-box;
}
nav.web .content > .list:last-child {
	margin-right:12px;
}
nav.web .content .list.bars {
	display:grid; width:60px !important; box-sizing:border-box; flex-shrink:0; place-items:center;
}
nav.web .list.bars .icon {
	font-size:22px; cursor:pointer; color:white;
}

nav.nav-modal {
	position:fixed; width:100%; box-sizing:border-box; top:0; bottom:0; background:rgba(0,0,0,.2); z-index:9999; height:100vh; display:-webkit-flex; justify-content:flex-start; max-width:0; overflow:hidden; transition-delay:.4s;
}
nav.nav-modal .side-nav {
	width:100%; box-sizing:border-box; max-width:0px; transition:.4s; overflow:hidden; background:white; flex-wrap:nowrap;
}
nav.nav-modal .side-nav .title {
	display:-webkit-flex; padding:20px; background:#EEEEEE; justify-content:space-between; align-items:center; width:275px; box-sizing:border-box; flex-wrap:nowrap;
}
nav.nav-modal .side-nav .title h6 {
	font-size:15px; font-weight:normal; font-family:'Poppins','sans-serif'; width:fit-content; box-sizing:border-box;
}
nav.nav-modal .side-nav .title .icon {
	font-size:18px; box-sizing:border-box; width:fit-content; cursor:pointer;
}
nav.nav-modal .side-nav .content {
	padding:20px; width:275px; box-sizing:border-box; position:relative; overflow:hidden; display:grid;
}
nav.nav-modal.active {
	max-width:100%; transition-delay:0s;
}
nav.nav-modal.active .side-nav {
	max-width:275px; transition:.4s; transition-delay:.2s;
}
nav.nav-modal .content .items {
	font-size:15px; padding:9px 16px; cursor:pointer; color:black; font-family:'Poppins','sans-serif'; transition:.5s;
}
nav.nav-modal[data-layer='side-account'] {
	justify-content:flex-end;
}
nav.nav-modal[data-layer='side-account'] .content .items i {
	margin-right:18px;
}
@media (min-width:360px) and (max-width:768px) {
	nav.web .content {
		justify-content:flex-start;
	}
	nav.web .content > .list .icon {
		font-size:22px;
	}
	nav.web .content > .list:nth-child(4) {
		width:100%; flex-shrink:1; padding-right:10px;
	}
	nav.web .content > .list .button {
		display:none;
	}
	nav.web .content > .img {
		width:100px;
	}
}

footer .content {
	display:-webkit-flex; column-gap:20px;
}
footer .content .img {
	width:100%; max-width:300px; flex-shrink:0; box-sizing:border-box;
}
footer .content .img img {
	max-width:200px;
}
footer .content .list {
	width:100%; max-width:calc((100% - 300px) / 3); flex-shrink:0; box-sizing:border-box;
}
footer .content .list h6 {
	font-size:24px; color:white; font-family:'Poppins'; font-weight:normal; margin-bottom:20px;
}
footer .content .list div {
	font-size:14px; margin-bottom:12px; font-family:'Poppins'; color:white;
}
footer .copy {
	width:100%; max-width:1366px; margin:0 auto; box-sizing:border-box;
}
footer .copy p {
	font-size:14px; color:white; font-family:'Poppins'; font-weight:normal; padding:16px 0; text-align:center; border-top:1px solid white;
}

.horizontal {
	overflow-x:hidden; overflow-y:auto;
}
.horizontal::-webkit-scrollbar {
	width:5px;
}
.horizontal::-webkit-scrollbar-track {
	border-radius:3px;
}
.horizontal::-webkit-scrollbar-thumb {
	background:#E0E0E0;
}
.horizontal::-webkit-scrollbar-thumb:hover {
	background:#BFBFBF;
}