@charset "utf-8";

.content-box {
    background: #EFF1F3;
}

.content-box .book-box {
    /* display: flex;  */
    justify-content: space-between; /* 子元素均匀分布，首尾贴边 */
    gap: 0vw; /* 设置子元素之间的间隙 */
    width: 100%; /* 父容器占满一行 */
    box-sizing: border-box; /* 确保 padding 不影响宽度计算 */
    padding-top: 1vw;
}

.content-box .book-card-img {
    background: #FDFDFD;
    text-align: center; /* 文字居中 */
    padding: 0;
}

.content-box .book-card-img img{
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.content-box .book-card-img:hover img {
    transform: scale(1.05); /* 鼠标悬停时放大图片 */
}

.content-box .book-box .book-card {
    flex: 1; /* 子元素平均分配剩余空间 */
    padding: 0 1vw 4vw 1vw;
}

.content-box .book-box .book-card .book-card-tag {
    font-family: "IBM Plex Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.88px;
    text-transform: uppercase;
    margin-top: 1vw;
    width: auto;
    height: 20px;
    line-height: 20px;
    text-align: left;
    padding: 0 5px;
    margin-top: 1vw;
}

.content-box .book-box .book-card .book-card-tag2 {
    color: #D09D10;
    font-family: "IBM Plex Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.88px;
    text-transform: uppercase;
    margin-top: 1vw;
    background: #FDEAB2;
    width: 94px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.content-box .book-box .book-card .book-card-tag3 {
    color: #2F6FAC;
    font-family: "IBM Plex Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.88px;
    text-transform: uppercase;
    margin-top: 1vw;
    background: #9ECBF5;
    width: 92px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.content-box .book-box .book-card .book-card-tag4 {
    color: #58B0BB;
    font-family: "IBM Plex Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.88px;
    text-transform: uppercase;
    margin-top: 1vw;
    background: #BAE9F3;    
    width: 92px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.content-box .book-box .book-card .book-card-title {
    color: #166AC9;
    font-family: "IBM Plex Sans";
    font-size: 1vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.16px;
    margin-top: 1vw;
}

.content-box .final-box .book-card-img:hover img {
    transform: scale(1.1);
}

.content-box .final-box .book-card-img {
    padding: 0;
}

.content-box .publish-book-title {
    width: 70%;
    margin: auto;
    padding: 5vw;
}

.content-box .tag-box {
    background: #FDFDFD;
    padding: 2vw;
}
.content{
    margin-top: 4vw;
}

.content-box .tag-box .title {
    color: #141414;
    font-family: "IBM Plex Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    margin-bottom: 1vw;
}

.content-box .tag-box ul {
    list-style-type: none;

    color: #166AC9;
    font-family: "IBM Plex Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 187.5% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: capitalize;
    text-decoration: none;
}

.content-box .tag-box ul li:hover {
    text-decoration: underline;
}

.content-box .tag-box2 {
    background: #FDFDFD;
}

.content-box .tag-box2 .title {
    color: #141414;
    font-family: "IBM Plex Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    margin-bottom: 1vw;
    padding: 0 2vw;
}

.content-box .tag-box2 ul {
    list-style-type: none;

    color: #166AC9;
    font-family: "IBM Plex Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 187.5% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: capitalize;
    text-decoration: none;
}

.content-box .tag-box2 ul li {
    padding: 1vw 2vw;
}

.content-box .page-box {
    text-align: center;
}

.tag {
    font-family: "IBM Plex Sans";
    font-size: 1vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 1.12px;
    text-transform: uppercase;
}


.pagebar {
    color: #166AC9;
}
.pagebar, .cmtpagebar {
    width: 100%;
    margin: 0;
    padding: 20px 0;
    font-size: 14px;
    line-height: 34px;
    text-align: center;
    clear: both;
}
.pagebar li, .cmtpagebar li {
    display: inline
}
.pagebar a, .cmtpagebar a {
    margin: 2px;
    padding: 5px 8px;
    font-weight: bolder;
    color: #166AC9;
}
.filter-box li{
    padding: 0;
}
.platform {
    margin-top: 5vw;
}
.platform h4{
    font-weight: bold;
    letter-spacing: 1px;
    margin: 20px 0;
}
.platform svg {
    margin-right: 1vw;
}

@media (max-width: 768px) {
    .content-box .tag-box {
        background: #EFF1F3;
    }
    .content-box .book-box .book-card .book-card-title{
        font-size: 5vw;
        margin: 2vw 0 10vw 0;
    }
    .content-box .book-box .book-card .book-card-tag {
        height: auto;
    }

    .mobile-tag-box2 {
        padding: 20px;
    }
    .mobile-tag-box2 .navbar-header {
        font-weight: 600;
    }
    .mobile-tag-box2 .navbar-brand {
        color: #E62A26;
        padding: 20px;
    }

    .mobile-tag-box2 .navbar-nav{
        margin: 0;
    }

    .mobile-tag-box2 .navbar-nav li {
        padding: 10px 20px;
    }
    .mobile-tag-box2 .navbar-nav>li>a {
        padding-left: 0;
    }
    .mobile-tag-box2 .tag {
        font-size: 4vw;
    }

    .content-box .publish-book-title {
        padding: 15vw 0 10vw 0;
        margin: auto;
    }
    .filter-box li{
        padding: 0 15px;
    }
}