.slide-container {
	height: auto;
}


.module {
	margin-top: 0;
	padding-top: 10px;
}

.book-ol-fl {
	overflow: hidden;
	padding: 0 0.5rem 0.5rem;
}

/* 小屏幕（手机）：单列布局 */
.book-ol-fl .book-li {
	width: 100%;
	float: left;
}

/* 大屏幕（平板及以上）：双列布局 */
@media screen and (min-width: 768px) {
	.book-ol-fl .book-li {
		width: 50%;
	}
}

.book-li::after {
	content: '';
	display: block;
	border-bottom: 1px solid #f0e6e0;
	margin-left: 1rem;
	margin-top: -1px;
	-webkit-transition: margin-left .15s;
	transition: margin-left .15s;
}

.book-ol-fl .book-li::after {
	border-bottom: none;
}

.book-ol-fl .book-layout {
	padding: 0.5rem;
}

.category-list {
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	overflow: hidden;
	background: #fffbf9;
}

.fl-header {
	overflow: hidden;
	display: block;
	height: 4rem;
	background: linear-gradient(135deg, #fff3f7 0%, #fff9fa 50%, #fff5ed 100%);
	box-shadow: 0 2px 8px rgba(255, 105, 180, 0.08);
}

.fl-header .fl-header-l {
	float: left;
	height: 4rem;
	width: 50%;
	line-height: 4rem;
	text-align: center;
	font-weight: 600;
	font-size: 0.875rem;
	background: linear-gradient(to right, #fff3f7, #fff9fa);
	color: #d63384;
	letter-spacing: 0.5px;
}

.fl-header .fl-header-r {
	float: left;
	height: 4rem;
	width: 50%;
	background: linear-gradient(to right, #fff9fa, #fff5ed);
}

.fl-list-container-roundabout {
	display: block;
	position: relative;
	bottom: -0.5rem;
	width: 4.125rem;
	height: 3rem;
}

.fl-list-container-roundabout li {
	position: absolute;
	width: 2.25rem;
	top: 0.5rem;
}

.fl-list-container-roundabout li.book1 {
	left: 0.875rem;
	top: 0.0625rem;
	z-index: 1;
}

.fl-list-container-roundabout li.book2 {
	left: 2.4375rem;
}

.fl-list-container-roundabout li.book3 {
	left: -0.3125rem;
}

.fl-list-container-roundabout li img {
	width: 2.25rem;
	height: 3rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.fl-list-container-roundabout li.book1 img {
	width: 2.625rem;
	height: 3.5rem;
}

.fl-content {
	padding: 0.5rem 0.5rem;
	overflow: hidden;
	counter-reset: bookrank;
	background: linear-gradient(to bottom, #ffffff 0%, #fff8f4 100%);
}

.fl-content-li {
	font-size: 0.75rem;
	margin: 0.5rem 0;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: background-color 0.2s ease, transform 0.2s ease;
	padding: 0.3rem 0.5rem;
	border-radius: 4px;
}

.fl-content-li:hover {
	background-color: rgba(255, 107, 157, 0.08);
	transform: translateX(2px);
}

.fl-content-li::before {
	content: counter(bookrank) ".";
	counter-increment: bookrank;
	text-align: left;
	flex-shrink: 0;
	width: 1.5rem;
}

.fl-content-li .fl-title-link {

	min-width: 0;
	flex: 1 1 auto;
	width: auto;
  font-size: 0.93rem;
  color: #2d2d2d;
  font-weight: 500;
}

/* 元数据网格布局 - 作者、点击量、字数各自独立列 */
.fl-meta-grid {
	display: grid;
	grid-template-columns: 3.75rem 1.8rem 1.6rem;
	gap: 0.1rem;
	font-size: 0.6rem;
	color: #b8a89f;
	align-items: center;
	flex-shrink: 0;
}

.fl-meta-grid .meta-author {
	color: #8b7b72;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
  font-size: 0.7rem;
}

.fl-meta-grid .meta-views {
	color: #b8a89f;
	white-space: nowrap;
	text-align: left;
}

.fl-meta-grid .meta-words {
	color: #b8a89f;
	white-space: nowrap;
	text-align: left;
}

.fl-content-li .fl-arrow-link {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-shrink: 0;
	width: 1rem;
}

.fl-content-li .icon-arrow-r {
	flex-shrink: 0;
}

/* 大屏幕优化 - 保持手机端的布局逻辑 */
@media screen and (min-width: 768px) {
	.fl-content-li {
		font-size: 0.75rem;
		gap: 0.5rem;
	}
	
	.fl-content-li::before {
		width: 1.5rem;
	}
	
	.fl-meta-grid {
		grid-template-columns: 3.5rem 3rem 3rem;
		gap: 0.3rem;
		font-size: 0.6rem;
	}
	
	.fl-content-li .fl-arrow-link {
		width: 1.5rem;
	}
}

/* 超大屏幕优化 */
@media screen and (min-width: 1200px) {
	.fl-content-li {
		font-size: 0.8rem;
		gap: 0.6rem;
	}
	
	.fl-content-li::before {
		width: 1.8rem;
	}
	
	.fl-meta-grid {
		grid-template-columns: 4rem 3.5rem 3.5rem;
		gap: 0.4rem;
		font-size: 0.68rem;
	}
	
	.fl-content-li .fl-arrow-link {
		width: 1.5rem;
	}
}

@media (prefers-color-scheme: dark) {
	.fl-header .fl-header-l, .fl-header .fl-header-r {
		background: #3a3a3a;
	}
}


@charset "UTF-8";
@font-face{font-family:"SourceHanSerifCN-Bold";src:url(/css/webfonts/SourceHanSerifCN-Bold.woff2)}

body, h1, h4, h5, ul, ol, form {
  margin: 0; }

::-webkit-scrollbar {
    display: none
}

ul, ol {
  list-style: none;
  padding: 0; }

a {
  color: inherit;
  text-decoration: none;
  outline: none; }

a[href]:active,
button:active {
  background-image: none;
  background-image: none;
  }

h1, h4, h5, input {
  font-size: 100%; }

input {
  font-family: inherit;
  box-sizing: border-box; }

img {
  display: inline-block; }

html {
  font-size: 16px;
  /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
  font-size: calc(100% + 2 * (100vw - 375px) / 39);
  font-size: calc(16px + 2 * (100vw - 375px) / 39); }

@media screen and (max-width: 320px) {
  html {
    font-size: 16px; } }

@media screen and (min-width: 414px) {
  html {
    /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
    font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
    font-size: calc(18px + 4 * (100vw - 414px) / 586); } }

@media screen and (min-width: 600px) {
  html {
    /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
    font-size: calc(125% + 4 * (100vw - 600px) / 400);
    font-size: calc(20px + 4 * (100vw - 600px) / 400); }}

@media screen and (min-width: 1000px) {
  html {
    /* 1000px往后是每100像素0.5px增加 */
    font-size: calc(137.5% + 6 * (100vw - 1000px) / 600);
    font-size: calc(22px + 6 * (100vw - 1000px) / 600); }
    body{max-width: 1000px;
      margin: auto;}
}


@media screen and (min-width: 1281px) {
    body{max-width: 1100px;
      margin: auto;}

}

@media screen and (min-width: 1681px) {
    body{max-width: 1200px;
      margin: auto;}

}

body {
  line-height: 1.5;
  fill: currentColor;
  color: #1A1A1A;
  font-family: Arial,Helvetica,sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -webkit-text-size-adjust: none;
  -webkit-touch-callout: none; }

/* 公用的布局，小模块页面样式 */
body {
  background-color: #faf8f7; }

.page {
  background-color: #fffbf9;
  box-shadow: 0 200px #fffbf9; }

.content {
  background-color: #faf8f7;
  padding-bottom: .1px; }

.guide-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }

.module {
  margin: 0.75rem 0;
  background-color: #fffbf9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }

.header {
  height: 3.15rem;
  box-sizing: border-box;
  padding-top: 0.2875rem;
  padding-bottom: 0.225rem;
  border-bottom: 1px solid #f0e6e0;
  background-color: #fffbf9;
  position: relative;
  }
  .header a {
    color: #FF3955; }

.header-back {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 0.625rem 0.8125rem 0.625rem 0.875rem;
  color: #FF3955; }
  .header-back + .header-back-title {
    position: absolute;
    padding: 5px;
    left: 2.6875rem;
    line-height: 1.375rem;
    font-size: 1rem;
    font-weight: 400;
    max-width: 60%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }

.header-operate {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0.25rem 0.375rem; }
.header-operate > .icon {
  float: left;
  width: 2.25rem;
  height: 2.25rem;
  overflow: hidden;
  color: #FF3955; }

.header-operate svg {
  display: block;
  margin: 0.625rem auto; }

a.icon-more:empty {
  position: relative;
  width: 2.25rem;
  height: 2.25rem; }

a.icon-more:empty::before,
a.icon-more:empty::after {
  content: '';
  position: absolute;
  border-top: 1px solid;
  width: 1.125rem;
  top: 1.125rem;
  left: 50%;
  margin-left: -0.5625rem;
  margin-top: -1px;
  -webkit-transition: all .15s;
  transition: transform .15s; }

a.icon-more:empty::before {
  height: 4px;
  border-bottom: 1px solid;
  -webkit-transform-origin: top center;
  transform-origin: top center; }

a.icon-more:empty::after {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px); }

.book-layout {
  display: block;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  -webkit-transition: padding-left .15s;
  transition: padding-left .15s; }

.book-li::after {
  content: '';
  display: block;
  border-bottom: 1px solid #f0e6e0;
  margin: 0 1rem;
  margin-top: -1px;
  -webkit-transition: margin-left .15s;
  transition: margin-left .15s; }

.book-li:last-child::after {
  display: none; }

.book-cover {
  width: 4.125rem;
  height: 5.5rem;
  float: left;
  margin-right: .5rem;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(51, 55, 61, 0.1);
  overflow: hidden;
  font-size: 0; }
  
.book-ol li:hover .book-layout img {
    transform: scale(1.1);
}
/*  .module-field-img[data-src] {
    object-fit: contain; }*/

.footer {
  background-color: #fffbf9; }

.footer-link {
  text-align: center;
  color: #808080;
  font-size: 0.875rem;
  display: flex;
  display: -webkit-box;
  display: box;
  justify-content: space-between;
  -webkit-box-pack: justify;
  box-pack: justify;
  padding: 0.5625rem 1.1875rem 0; }

.footer-link-a {
  display: block;
  padding: .5rem 0;
  -webkit-box-flex: 1;
  box-flex: 1; }

.footer-copy {
  padding-top: .25rem;
  padding-bottom: 1rem;
  font-size: .75rem;
  text-align: center;
  color: #808080;
  font-weight: 300; }

.footer-copy::first-letter {
  text-transform: uppercase; }

/* 侧边栏 */

.guide-overlay {
  background-color: #000;
  opacity: 0;
  -webkit-transition: opacity .25s;
  transition: opacity .25s; }

.guide {
  position: fixed;
  left: 0;
  top: 2.5rem;
  right: 0;
  bottom: 0;
  visibility: hidden;
  -wekit-transition: visibility .25s;
  transition: visibility .25s;
  z-index: 3;
  overflow: hidden; }

/*
.guide-content {
  padding: 0 1rem;
  position: relative;
  background-color: #FFF;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: -webkit-transform .15s;
  transition: transform .15s;
  overflow: hidden; }
*/

.guide-nav {
  text-align: justify;
  font-size: 0; }

.guide-nav::after {
  content: '';
  display: inline-block;
  height: 0;
  width: 100%;
  vertical-align: top; }

  /*
.guide-nav-a {
  display: inline-block;
  width: 15%;
  height: 3.625rem;
  text-align: center;
  font-size: 0.75rem;
  position: relative; }
*/

.guide-nav-a > .icon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.625rem;
  margin: auto; }

.guide-nav-h {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1875rem;
  font-weight: normal; }

.guide-nav .guide-nav-a {
  margin: .75rem 1.5rem; }

@media screen and (max-width: 320px) {
  .guide-nav .guide-nav-a {
    margin-left: 1rem;
    margin-right: 1rem; } }

@media screen and (max-height: 284px) {
  .guide-nav .guide-nav-a {
    margin-top: .5rem;
    margin-right: .5rem; } }

.guide-footer {
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1.5rem; }

/* 公用的UI组件样式 */

/* 2. 按钮 */
.btn-primary {
  display: inline-block;
  line-height: 2.25rem;
  padding-left: 2ch;
  padding-right: 2ch;
  background-color: #FF3955;
  color: #FFF;
  font-size: 0.875rem;
  border-radius: 99px;
  text-align: center; }


.btn-line-gray {
  display: inline-block;
  line-height: 1.6875rem;
  border: 1px solid;
  border-radius: 99px;
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  text-align: center; }


.btn-line-gray {
  color: #808080; }

:checked + .radio {
  border-color: transparent;
  background-color: #FF3955; }

:checked ~ .switch {
  background-color: #FF3955;
  border-color: #FF3955; }

:checked ~ .switch::before {
  -webkit-transform: translateX(1.25rem);
  transform: translateX(1.25rem); }

:disabled ~ .switch {
  opacity: .5; }

:checked ~ .switch-light::before {
  -webkit-transform: translateX(1.375rem);
  transform: translateX(1.375rem); }

[data-size] {
  box-sizing: border-box; }

[data-size='14'] {
  width: 17.5rem; }

/* 文字颜色 */
.dark {
  color: #1A1A1A; }

@-webkit-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/* chrysanthemum loading effect */

/* loading effect with scale(.5) */

.search-popup {
  background-color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20; }

.search-area {
  height: 2rem;
  background-color: #f5f0ed;
  border-radius: .25rem;
  position: absolute;
  left: 1rem;
  right: 3.75rem;
  top: 0;
  bottom: 0;
  margin: auto; }
  .search-area .icon-search {
    position: absolute;
    left: .5rem;
    top: 0;
    bottom: 0;
    color: #808080;
    margin: auto; }

.search-cancel {
  background-color: #FFF;
  width: 3.25rem;
  height: 2rem;
  line-height: 2rem;
  position: absolute;
  right: .25rem;
  top: 0;
  bottom: 0;
  margin: auto;
  font-size: 0.875rem;
  text-align: center; }

.search-input {
  border: 0 none;
  background: none;
  height: inherit;
  width: 100%;
  padding: 0 2rem;
  font-size: 0.875rem; }
  .search-input::-webkit-search-cancel-button {
    -webkit-appearance: none; }

.search-reset {
  position: absolute;
  top: 0;
  right: 0;
  height: inherit;
  width: 2rem;
  border: 0 none;
  background: none;
  padding: 0;
  -webkit-animation: fadein .15s;
  animation: fadein .15s; }
  .search-reset .icon-clear {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 1rem;
    background-color: #808080;
    color: #FFF;
    vertical-align: -.125rem; }
    .search-reset .icon-clear > svg {
      display: block;
      width: 0.375rem;
      height: 0.375rem;
      margin: .25rem auto 0; }

.search-popular {
  height: 0;
  overflow: hidden; }

.search-title-bar {
  line-height: 1.8125rem;
  padding: 0.9375rem 1rem 0;
  background-color: rgba(0, 0, 0, 0.03);
  overflow: hidden; }

.search-title {
  font-size: 13px;
  color: #808080;
  font-weight: 400;
  float: left; }

.search-tags {
  padding: .25rem .5rem .75rem 1rem; }
  .search-tags .btn-line-gray {
    margin: .5rem .5rem 0 0; }
.search-tags a {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 23%;
}

svg.icon,
.icon > svg {
  width: 1em;
  height: 1em;
  vertical-align: -.15ex;
  fill: rgb(200 61 61); }

.ell {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; }

/*img[data-src] {
  object-fit: contain;
  background-color: #F6F7F9; }*/
  
  
.slide-container {
  height: 6.5rem!important;
  margin: 0 .75rem;
  position: relative;
  overflow: hidden;
  }
/*
.slide-dot-x {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center; }

.slide-dot {
  display: inline-block;
  width: 1.25rem;
  height: .175rem;
  border-radius: 25%;
  background-color: #FFF;
  -webkit-transition: background-color .15s;
  transition: background-color .15s; }

.slide-dot + .slide-dot {
  margin-left: 0.3125rem; }

.slide-dot.active {
  background-color: #FF3955; }
*/

.fuli-footer-link {
  border-top: 1px solid #f0e6e0; }

.booklist-cover {
  position: relative;
  height: 5.5rem;
  width: 14.25rem;
  display: block; }



/* 福利页 start */

/* 福利页 end */
/*
Icon classes can be used entirely standalone. They are named after their original file names.

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/

.icon-account {
  background-image: url("/images/sprite-e6c4295a4f.png");
  background-position: -40px 0px;
  width: 36px;
  height: 36px;
}

.icon-end {
  background-image: url("/images/sprite-e6c4295a4f.png");
  background-position: -120px 0px;
  width: 36px;
  height: 36px;
}

.icon-fuli {
  background-image: url("/images/sprite-e6c4295a4f.png");
  background-position: -80px -80px;
  width: 36px;
  height: 36px;
}

.icon-home {
  background-image: url("/images/sprite-e6c4295a4f.png");
  background-position: 0px -80px;
  width: 36px;
  height: 36px;
}

.icon-newbook {
  background-image: url("/images/sprite-e6c4295a4f.png");
  background-position: -40px -40px;
  width: 36px;
  height: 36px;
}

.icon-rank {
  background-image: url("/images/sprite-e6c4295a4f.png");
  background-position: 0px -40px;
  width: 36px;
  height: 36px;
}

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .icon-account {
    background-image: url("/images/sprite@2x-1b00bd3f04.png");
    background-size: 188px 176px;
  }

  .icon-end {
    background-image: url("/images/sprite@2x-1b00bd3f04.png");
    background-size: 188px 176px;
  }
  /* 文档 */
  /* 绿叶*/
    /* 礼物合*/
  .icon-fuli {
    background-image: url("/images/sprite@2x-1b00bd3f04.png");
    background-size: 188px 176px;
  }

  .icon-home {
    background-image: url("/images/sprite@2x-1b00bd3f04.png");
    background-size: 188px 176px;
  }
  /* 斜标签*/
  .icon-newbook {
    background-image: url("/images/sprite@2x-1b00bd3f04.png");
    background-size: 188px 176px;
  }

  .icon-rank {
    background-image: url("/images/sprite@2x-1b00bd3f04.png");
    background-size: 188px 176px;
  }
  /* 分类*/
}
input:focus{
    background-color: #fff;
    border-color: #00a1d6;
}

/* 模态框基本样式 */
:root {color-scheme: light dark;}
@media (prefers-color-scheme: dark) {
body {color: #9e9e9e;background-color: #1b1b1b;}
.content{
    background-color: #1b1b1b;
    color: #9E9E9E;
}
.page, .header, .module, .guide-content, .footer, .search-popup{
    background-color: #232323;
    color: #9E9E9E;
}
.page{box-shadow: 0 200px #232323;}
.search-cancel{background-color: #4b4949;}
.footer-link-a{color: #d8d6d6;}
.book-li::after{border-bottom: 1px solid #353535;}
.fuli-footer-link{border-top: 1px solid #353535;}
.header, hr{border-bottom: 1px solid #3d3d3d;}
input:focus{
background-color: #1c1c1c;
border-color: #00a1d6;
}

.search-area {
    background-color: #4c4949;
    color: #c7c7c7;
}
.search-cancel {
    color: #a2a2a2;
}

.search-input {
    color: whitesmoke;
}
}


.fl-content-li::before {
  content: counter(bookrank);
  counter-increment: bookrank;
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  margin-right: 8px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 50%;
  background: linear-gradient(135deg, #fad26ded 0%, #ffe5bf 100%);
  color: #fff;
  box-shadow: 0 3px 8px rgba(255, 107, 157, 0.35);
}
.fl-content-li:nth-child(1)::before {
  background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);
  box-shadow: 0 3px 8px rgba(255, 71, 87, 0.35);
}
.fl-content-li:nth-child(2)::before {
  background: linear-gradient(135deg, #ff6348 0%, #ff8566 100%);
  box-shadow: 0 3px 8px rgba(255, 99, 72, 0.35);
}
.fl-content-li:nth-child(3)::before {
  background: linear-gradient(135deg, #ffa502 0%, #ffb84d 100%);
  box-shadow: 0 3px 8px rgba(255, 165, 2, 0.35);
}
/* 为两位数排名增加宽度 */
.fl-content-li:nth-child(n+10)::before {
  width: 28px;
  font-size: 12px;
}


.thumb {
		background: url(/images/2026.jpg?v1) no-repeat;
    background-color: #fff;
		background-position: 50% 0%;
		background-size: cover;
		height: 6.7rem;
		border-radius: 0.25rem;
		margin: 0 0.25rem;
		margin-bottom: 0.5rem;
		box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}


.slide-container .thumb {
	position: relative;
}

.slide-container .thumb p {
	position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.37rem 1rem;
    background: rgb(243 230 230 / 60%);
    backdrop-filter: blur(4px);
    color: #ff6969;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    top: 63%;
}