html {
    background-color: #fafafa;
}
/*img {*/
/*    transform: scale(0.25); !* 让浏览器渲染后缩放 *!*/
/*    image-rendering: smooth; !* 平滑缩放 *!*/
/*}*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*框架样式*/
.top-set {
    height: 60PX; /* 高度 */
    width: 100%; /* 宽度 */
    display: flex; /* 启用 flexbox */
    align-items: center; /* 垂直居中 */
}


.top-set-text {
    width: 80%; /* 宽度 */
    display: flex; /* 启用 Flexbox */
    justify-content: space-between; /* 让内容均匀分布 */
    align-items: center; /* 垂直居中 */
    gap: 3%; /* 设置子元素之间的间距 */
    height: 60PX
}

.box-set {
    display: flex; /* 启用 flexbox */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    overflow: hidden; /* 隐藏超出部分 */
}

.list-set {
    display: flex; /* 启用 flexbox */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.small-switch-800 {}
.small-switch-600 {}

.column {
    display: flex;
    flex-direction: column; /* 子元素竖着排列 */
}
.row {
    display: flex;
    /*flex-wrap: wrap; !* 允许换行 *!*/
    justify-content: space-around; /* 让元素均匀分布 */
}


.align-items {
    display: flex; /* 启用 flexbox */
    align-items: center; /* 子元素水平居中 */
}

.box {
    width: 1px; /* 宽度 */
    height: 1px; /* 宽度 */
}

.border-radius-5 {
    border-radius: 5px;
}

.border-radius-3 {
    border-radius: 3px;
}


.book-size-1 {
    width:230px;
    height:345px;
    object-fit: cover; /* 保持比例，裁剪超出部分 */
}

.book-size-2 {
    width:320px;
    height:480px;
    object-fit: cover; /* 保持比例，裁剪超出部分 */
}
.book-size-3 {
    width:160px;
    height:240px;
    object-fit: cover; /* 保持比例，裁剪超出部分 */
}

.book-size-4 {
    width:180px;
    height:270px;
    object-fit: cover; /* 保持比例，裁剪超出部分 */
}

.book-size-5 {
    width:160px;
    height:240px;
    object-fit: cover; /* 保持比例，裁剪超出部分 */
}


.book-style-1 {}

    .book-style-1.click {
        display: block;
        transition: filter 0.3s ease; /* 添加过渡效果 */
    }

    .book-style-1.click:hover {
        filter: brightness(1.1); /* 提高亮度 */
    }

    .book-style-1.click:active {
        filter: brightness(0.5); /* 提高亮度 */
    }

.card {
    width: 310px; /* 根据需求调整卡片宽度 */
    background: white; /* 背景白色 */
    border-radius: 5px; /* 圆角 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
    overflow: hidden; /* 确保内容不溢出 */
}

.Black-frame {
    width: 320px; /* 根据需求调整卡片宽度 */
    background: rgba(0, 0, 0, 0.3); /* 黑色背景，30% 半透明 */
    border-radius: 5px; /* 圆角 */
    overflow: hidden; /* 确保内容不溢出 */
}

.Content-Width {max-width: 1000px;margin: 0 auto;}

.rankings {
    height: 25px;
    width:70px;
    background: #ffd806;
    border-radius: 5px;
}

.bottom {
    height:40px;
    width:140px;
    background: #ffd806;
    border-radius: 20px
}

.bottom-color-change-black {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    transition: color 0.3s ease; /* 颜色变化添加过渡效果 */
}
.bottom-color-change-black:hover {
    background: #FFF5DC;
    border: 1px solid #FFDC9B;
}
.bottom2-color-change-black {
    background: #FFFFFF;
    border: 1px solid #eeeeee;
    transition: color 0.3s ease; /* 颜色变化添加过渡效果 */
}
.bottom2-color-change-black:hover {
    background: #FFF5DC;
    border: 1px solid #FFDC9B;
}



.bottom3 {
    position: fixed; /* 让按钮固定在屏幕上，不随滚动变化 */
    top: 50%; /* 垂直居中 */
    transform: translate(-0px, -50%); /* 往左移动 150px，保持垂直居中 */
    width: 50%;
    height: 100vh;
    border: none;
    background-color: rgba(255, 255, 255, 0);
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/*文字样式*/
/*======================*/
.text-color-change-white {
    color: #bbbbbb; /* 默认灰色 */
    transition: color 0.3s ease; /* 颜色变化添加过渡效果 */
}
    .text-color-change-white:hover {
        color: white; /* 鼠标悬停时变白色 */
    }


.text-color-change-black {
    color: #333333; /* 默认灰色 */
    transition: color 0.3s ease; /* 颜色变化添加过渡效果 */
}
    .text-color-change-black:hover {
        color: #007aff; /* 鼠标悬停时变白色 */
    }

.container {
    position: relative; /* 父容器相对定位 */
    display: inline-block; /* 让容器根据内容自适应宽度 */
}
    .text-container {
        position: absolute; /* 文字容器绝对定位 */
        bottom: 0; /* 定位到图片底端 */
        left: 0; /* 定位到图片左侧 */
        width: 100%; /* 宽度与图片一致 */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); /* 从下到上渐变 */
        color: white; /* 文字颜色 */
        padding: 5px; /* 内边距 */
        box-sizing: border-box; /* 确保内边距不影响宽度 */

    }

.text-bold{font-weight: bold;}
.text-size-12{font-size: 12px;}
.text-size-14{font-size: 14px;}
.text-size-15{font-size: 15px;}
.text-size-18{font-size: 18px;}
.text-size-24{font-size: 24px;}
.text-color-grey{color: rgba(187, 187, 187, 0.8);}
.text-color-555555{color: #555555;}
.text-color-black-red{color: #6f1f1f;}
.text-color-333333{color: #333333;}
.text-color-888888{color: #888888;}
/*======================*/

.text-white{
    color: white;
    display: flex;
    align-items: center;
}

/*图标定义*/
/*======================*/
.logo-icon {
    width: auto; /* 设置图片宽度，可根据需要调整 */
    height: 56px; /* 保持图片比例 */
}
.app_logo-icon {
    width: 140px; /* 设置图片宽度，可根据需要调整 */
    height: 140px; /* 保持图片比例 */
    border-radius: 30px;
}
.banner {
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
    min-width: 0;
    position: relative; /* 如果里面有绝对定位的图片，建议加上 */
}

.banner img {
    width: 100%;         /* 建议用 width: 100% 保证铺满容器 */
    height: auto;
    display: block;
    object-fit: cover;   /* 可选：防止图片压缩变形 */
}

/*弹出广告*/
/*======================*/
/* 遮罩层 */
/* 弹出层容器 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

/* 弹窗内容容器 */
.adv {
    position: relative;
    display: inline-block;
}

.adv img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 10px;
}

/* 改进后的关闭按钮 */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    z-index: 1000;
    font-size: 30px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    line-height: 36px;
}







/*链接定义*/
/*======================*/
a {
    text-decoration: none; /* 去掉所有超链接的默认下划线 */
    color: inherit; /* 让链接的颜色继承父级 */
}



@media (pointer: coarse)  {
    .top-set {
        height: 60px;
        width: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
}