/* iOS添加到主屏幕引导样式可根据需要自定义 */
* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@font-face {
    font-family: 'SofiaPro';
    /* 你自定义的名字，以后就用这个名字引用 */
    src: url(../fonts/SofiaPro.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    /* 关键：防止字体加载慢时文字隐形，先显示系统字体 */
}
#app {
    /* font-family: 'SofiaPro', sofiaPro Fallback, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, sans-serif; */
    font-family: normal .32rem/1.35 ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        Segoe UI,
        Roboto,
        Helvetica Neue,
        Arial,
        Noto Sans,
        sans-serif,
        Apple Color Emoji,
        Segoe UI Emoji,
        Segoe UI Symbol,
        Noto Color Emoji;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 优化文字渲染 */
    text-rendering: optimizeLegibility;

    /* 防止 iOS 点击高亮背景色 */
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    color: #2c3e50;
    overflow: hidden;
}
.wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
}
.block {
    width: 7.467rem;
    height: 9.813rem;
    background-color: #fff;
    border-radius: 0.213rem;
    padding: 0.427rem;
    position: relative;
}
.block h2 {
    font-size: 0.427rem;
    text-align: center;
    margin-top: 0.533rem;
}
.desktop-box {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 2.133rem;
    z-index: 9999;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-animation: cookie-fadein 0.3s;
            animation: cookie-fadein 0.3s;
    width: 100%;
    height: 1.467rem;
}
.desktop-wrap {
    margin: auto 0.533rem;
    background: rgba(233, 41, 41, 0.8);
    width: 100%;
    height: 100%;
    border-radius: 0.267rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.d_logo {
    width: 1.333rem;
    height: 1.333rem;
}
.d_logo img {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0.107rem;
    display: block;
}
.d_text {
    font-size: 0.373rem;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    color: #fff;
    margin-left: 0.267rem;
    line-height: 1.333rem;
}
.guide_step {}
.step_1 {
    font-size: 0.427rem;
    color: #333333;
    line-height: 0.533rem;
}
.step_1_img {
    vertical-align: middle;
    width: 0.64rem;
    height: 0.64rem;
}
.step_1_1 {
    margin: 0.533rem auto;
    text-align: center;
}
.step_1_2,
.step_1_2 img {
    width: 100%;
}
.handle_btn {
    width: 1.6rem;
    height: 1.6rem;
    margin: 0.533rem auto;
}
.handle_btn img {
    width: 1.6rem;
    height: 1.6rem;
}
.close_btn {
    width: 1.067rem;
    height: 1.067rem;
    position: absolute;
    top: 0.267rem;
    right: 0.267rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAABBZJREFUWEftlk9oHFUcx3+/eZOk7kZFwZiAs/Mmu7OIFEVdkUZqiT3pSfAgguBB9LDpH7VCaRUVraWGauqftuBBb/WkIIh6Mrk0B0VQGkVYZt7MEJNoYtSi23Rm3jz3SVaWMdnZmemhh33HN+/3/X34/t77zQ/hKl94lfNBHzBvhfoO9h3M60De+MQ7uLi4uCsMwxdkIkLISU3T5vIktSyrRgg5IoQYBoAZwzC+7KaXCOg4zmcAcPOmCEfEY7quy73Uy7bt3Yh4AhEHN4M3GGOTk5OT4XZiaQEBESMhxDSl9OM0hK7r7hVCvAYAAx1xG2traw/UarUgM6Dnefdzzt9oOae2RYQQAhFPUUrP9QLpOM6DrZiXEZF0ahBCXi+VSp/mKrEMZoztaZXlOAC0S9PWPEsp/aBbAsbYwwBwBBGVDriopXXcMIyucPJ8Yonboo7j7AKAaQDYEQP6kFJ6ZitIz/Me5ZwfQsT/8ggheOvsK0mPo63XM6AMcF337iiK3kLEQieQEOKcYRgznXuMsScAYKoTDgDkXXuRUvpVL1cjlYNtQdu2b1cU5RQAXBuD/IRSKl+ocF33aSHEUzGIy4h4WNf1873CZQKUQUtLS7f6vv9eq49dH4OU7ecPRHw8tn9JCPH8+Pj412ngMgPKQM/zypzzM4h4Y7ekQoi/W9DPGIbxXVq4XIAy2LZtXVEU+UBGtkl+MQiCA6Zp/pAFLjegFLAsq0QI+SjegmSvVFX1SU3TLmSFyw0oGVzXlf1xcisIRPx2dXX1uVqt1swKmarNxC7+oOM404h4X8IdvFAsFg+MjIz8lQUyE+D8/Pw1Y2NjbyLiPTHoRQBoImI1BvMT53xfuVz+My1kasCVlZVis9l8W1GUOzqTISLzfX+Kc74xNDT0DiLujMFbqqrWNU1bTwOZCrDRaFynquq7iHhbLEkDEad0Xf99s08WgiCYEULcFTvnhmFYr1Qqv/YK2TOg67o3RFF0GhHNmDM/hmG43zTNi537jLEdiHgSAO6Nnf+ZEFIvlUpLvUD2BNhoNG4aGBg4DQBGp2gURd8XCoWDo6Ojshn/by0sLAwODw+fAIDdsY+/cM7r5XLZS4JMBGSMjbYm6rOIeEtM7BtCyCFN0y51SzI7O6tSSo8h4t6Yk78FQVCvVqt2t/hEQMdx3geAO2MP4rzv+4dN07yc5ID8LoRQHMeRA+tDMUjPMIxHcgEyxuYQsdgWiaJobn19/Wi3MX2rhHIIZ4wdVRRFDrD/Lvm3WV5e3jMxMbFtFRIdZIwdbE8nQojPKaWvIqIcOjMtxtizAPDY5pz4BaX0pVwOymDP83b6vg+VSmUhE1UsyLKsKiGkSCmVE47IDXgloLJqJJY4q/CViusD5nWy72DfwbwO5I3/B1H3lTgLgaCeAAAAAElFTkSuQmCC) no-repeat center;
    background-size: contain;
}
.add_btn {
    width: 1.92rem;
    height: 0.747rem;
    background: #ffffff;
    border-radius: 0.48rem;
    font-size: 0.373rem;
    color: #e92929;
    text-align: center;
    line-height: 0.747rem;
    margin: 0.347rem 0.267rem;
}
.tab_text {
    margin-bottom: 0.267rem;
    font-size: 0.64rem;
}
.topSet {
    margin-top: 0.133rem;
}
.cookie-popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(34, 34, 34, 0.9);
    -webkit-box-shadow: 0 -0.053rem 0.427rem rgba(0, 0, 0, 0.08);
            box-shadow: 0 -0.053rem 0.427rem rgba(0, 0, 0, 0.08);
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-animation: cookie-fadein 0.3s;
            animation: cookie-fadein 0.3s;
}
.cookie-content {
    max-width: 12.8rem;
    width: 100%;
    padding: 0.48rem 0.533rem 0.373rem 0.533rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
}
.cookie-title {
    font-size: 0.48rem;
    font-weight: bold;
    margin-bottom: 0.213rem;
    color: #fff;
}
.cookie-desc {
    font-size: 0.373rem;
    color: #fff;
    margin-bottom: 0.427rem;
    text-align: left;
}
.cookie-btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0.427rem;
}
.cookie-btn {
    min-width: 2.4rem;
    padding: 0.213rem 0;
    border: none;
    border-radius: 0.533rem;
    font-size: 0.4rem;
    cursor: pointer;
    -webkit-transition: background 0.2s;
    -o-transition: background 0.2s;
    transition: background 0.2s;
}
.cookie-btn.accept {
    background: #f1790f;
    color: #fff;
    width: 3.733rem;
}
.cookie-btn.reject {
    background: none;
    border: 0.027rem solid #fff;
    color: #ccc;
}
@-webkit-keyframes cookie-fadein {
from {
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
        opacity: 0;
}
to {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
}
}
@keyframes cookie-fadein {
from {
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
        opacity: 0;
}
to {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
}
}
.cookie-fade-enter-active,
.cookie-fade-leave-active {
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
.cookie-fade-enter,
.cookie-fade-leave-to {
    opacity: 0;
}

.lds-spinner[data-v-d48557e6] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.white_spinner[data-v-d48557e6] {
  background-color: #fff;
}
.white_spinner .ball-spin-fade-loader > div[data-v-d48557e6] {
  background-color: #2786e8;
}
.loader[data-v-d48557e6] {
  --background: linear-gradient(135deg, #ff7118, #985ec4);
  --shadow: rgba(255,255,254,0.28);
  --text: #6c7486;
  --page: rgba(255,255,255,0.36);
  --page-fold: rgba(255,255,255,0.52);
  --duration: 3s;
  width: 3.2rem;
  height: 2.133rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -1.6rem;
  margin-top: -1.067rem;
}
.loader[data-v-d48557e6]:before,
.loader[data-v-d48557e6]:after {
  --r: -6deg;
  content: '';
  position: absolute;
  bottom: 0.213rem;
  width: 3.2rem;
  top: 80%;
  -webkit-box-shadow: 0 0.427rem 0.32rem var(--shadow);
          box-shadow: 0 0.427rem 0.32rem var(--shadow);
  -webkit-transform: rotate(var(--r));
  -ms-transform: rotate(var(--r));
      transform: rotate(var(--r));
}
.loader[data-v-d48557e6]:before {
  left: 0.107rem;
}
.loader[data-v-d48557e6]:after {
  --r: 6deg;
  right: 0.107rem;
}
.loader div[data-v-d48557e6] {
  width: 100%;
  height: 100%;
  border-radius: 0.347rem;
  position: relative;
  z-index: 1;
  -webkit-perspective: 16rem;
  perspective: 16rem;
  -webkit-box-shadow: 0 0.107rem 0.16rem var(--shadow);
          box-shadow: 0 0.107rem 0.16rem var(--shadow);
  background-image: var(--background);
}
.loader div ul[data-v-d48557e6] {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.loader div ul li[data-v-d48557e6] {
  --r: 180deg;
  --o: 0;
  --c: var(--page);
  position: absolute;
  top: 0.267rem;
  left: 0.267rem;
  -webkit-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
      transform-origin: 100% 50%;
  color: var(--c);
  opacity: var(--o);
  -webkit-transform: rotateY(var(--r));
  transform: rotateY(var(--r));
  -webkit-animation: var(--duration) ease infinite;
  animation: var(--duration) ease infinite;
}
.loader div ul li[data-v-d48557e6]:nth-child(2) {
  --c: var(--page-fold);
  -webkit-animation-name: page-2-d48557e6;
  animation-name: page-2-d48557e6;
}
.loader div ul li[data-v-d48557e6]:nth-child(3) {
  --c: var(--page-fold);
  -webkit-animation-name: page-3-d48557e6;
  animation-name: page-3-d48557e6;
}
.loader div ul li[data-v-d48557e6]:nth-child(4) {
  --c: var(--page-fold);
  -webkit-animation-name: page-4-d48557e6;
  animation-name: page-4-d48557e6;
}
.loader div ul li[data-v-d48557e6]:nth-child(5) {
  --c: var(--page-fold);
  -webkit-animation-name: page-5-d48557e6;
  animation-name: page-5-d48557e6;
}
.loader div ul li svg[data-v-d48557e6] {
  width: 1.333rem;
  height: 1.387rem;
  display: block;
}
.loader div ul li[data-v-d48557e6]:first-child {
  --r: 0deg;
  --o: 1;
}
.loader div ul li[data-v-d48557e6]:last-child {
  --o: 1;
}
.loader span[data-v-d48557e6] {
  display: block;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0.267rem;
  text-align: center;
  color: #333;
}
@-webkit-keyframes page-2-d48557e6 {
0% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
20% {
    opacity: 1;
}
35%, 100% {
    opacity: 0;
}
50%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@keyframes page-2-d48557e6 {
0% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
20% {
    opacity: 1;
}
35%, 100% {
    opacity: 0;
}
50%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@-webkit-keyframes page-2-d48557e6 {
0% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
20% {
    opacity: 1;
}
35%, 100% {
    opacity: 0;
}
50%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@keyframes page-2-d48557e6 {
0% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
20% {
    opacity: 1;
}
35%, 100% {
    opacity: 0;
}
50%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@-webkit-keyframes page-3-d48557e6 {
15% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
35% {
    opacity: 1;
}
50%, 100% {
    opacity: 0;
}
65%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@keyframes page-3-d48557e6 {
15% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
35% {
    opacity: 1;
}
50%, 100% {
    opacity: 0;
}
65%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@-webkit-keyframes page-3-d48557e6 {
15% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
35% {
    opacity: 1;
}
50%, 100% {
    opacity: 0;
}
65%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@keyframes page-3-d48557e6 {
15% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
35% {
    opacity: 1;
}
50%, 100% {
    opacity: 0;
}
65%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@-webkit-keyframes page-4-d48557e6 {
30% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
50% {
    opacity: 1;
}
65%, 100% {
    opacity: 0;
}
80%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@keyframes page-4-d48557e6 {
30% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
50% {
    opacity: 1;
}
65%, 100% {
    opacity: 0;
}
80%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@-webkit-keyframes page-4-d48557e6 {
30% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
50% {
    opacity: 1;
}
65%, 100% {
    opacity: 0;
}
80%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@keyframes page-4-d48557e6 {
30% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
50% {
    opacity: 1;
}
65%, 100% {
    opacity: 0;
}
80%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@-webkit-keyframes page-5-d48557e6 {
45% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
65% {
    opacity: 1;
}
80%, 100% {
    opacity: 0;
}
95%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@keyframes page-5-d48557e6 {
45% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
65% {
    opacity: 1;
}
80%, 100% {
    opacity: 0;
}
95%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@-webkit-keyframes page-5-d48557e6 {
45% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
65% {
    opacity: 1;
}
80%, 100% {
    opacity: 0;
}
95%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
@keyframes page-5-d48557e6 {
45% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    opacity: 0;
}
65% {
    opacity: 1;
}
80%, 100% {
    opacity: 0;
}
95%, 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}

/* eslint-disable */
a,
img,
button,
input,
textarea,
div {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.mload {
  width: 100%;
  position: fixed;
  margin: auto;
  top: 40%;
}

img[src=""] {
  opacity: 0;
  display: none;
}

img[src=""],
img:not([src]) {
  opacity: 0;
}

div,
a,
img {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}

@-webkit-keyframes slide {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

@keyframes slide {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.kongText {
  width: 100%;
  height: 0.427rem;
  margin-bottom: 0.133rem;
  background: -webkit-gradient(linear, left top, right top, color-stop(25%, #f0f0f0), color-stop(50%, #f8f8f8), color-stop(75%, #f0f0f0));
  background: -o-linear-gradient(left, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
  background: linear-gradient(to right, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  -webkit-animation: slide 1s infinite;
          animation: slide 1s infinite;
}

.fade-enter-active,
.fade-leave-active {
  -webkit-transition: opacity .1s;
  -o-transition: opacity .1s;
  transition: opacity .1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.book-classify {
  z-index: 10;
}

::-webkit-scrollbar {
  width: 0;
}



@media (-webkit-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5) {
  .border-1px:after {
    -webkit-transform: scaleY(0.7);
    -ms-transform: scaleY(0.7);
        transform: scaleY(0.7);
  }
}

@media (-webkit-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2) {
  .border-1px:after {
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
        transform: scaleY(0.5);
  }
}

@media (-webkit-device-pixel-ratio: 3),
(min-device-pixel-ratio: 3) {
  .border-1px:after {
    -webkit-transform: scaleY(0.33);
    -ms-transform: scaleY(0.33);
        transform: scaleY(0.33);
  }
}

::-webkit-scrollbar {
  display: none;
}

.van-tabbar {
  height: 1.733rem !important;
}

[v-cloak] {
  display: none !important;
}

.van-loading {
  text-align: center;
}