html{
    background: #f5f5f6;
    /* 设置根元素字体大小为16px，此时1rem = 16px */
    font-size: 16px;
}

.fill_007BFF{
    fill:#007BFF;
}
.fill_ffffff{
    fill:#ffffff;
}
/* 金色 */
.fill_FFD700{
    fill:#FFD700;
}

.top_space{
    height : 3rem;
}
.btn{
    width   : 80%;
    height  : 2rem;
    margin : 0 auto;
    background: #007BFF;
    text-align : center;
    line-height  : 2rem;
    font-size   : 1.3rem;
    font-weight : bold;
    color : #ffffff;
    border-radius: 3rem;
    /* 字符间距 */
    letter-spacing: 1rem;
}

.nav{
    width: 100%;
    max-width:73rem;
    height : 3rem;
    position: fixed;
    top : 0;
    left:50%;
    transform: translateX(-50%);
    background: #007BFF;
}
.nav ul{
    height : 90%;
    display: flex;
    align-items: center;
}
.nav ul li{
    font-size : 1em;
    font-weight : bold;
    color : #000000;
    margin-top:0.3rem;
}
.nav ul li:hover {
    transform: scale(1.2);
    cursor: pointer;
}
.nav ul li img{
    height : 2.5rem;
    margin-left:2vw;
}
.nav ul li span{
    display: inline-block;
    margin-left:6vw;
}
.back_btn{
    width:2.5rem;
    height:2.5rem;
    line-height:2.5rem;
    margin-left:3vw;
    fill:#ffffff;
}
/* 评论按钮 */
.nav .font_size_button {
    width: 2.2rem;
    height: 2.2rem;
    position: fixed;
    top: -0.1rem;
    right: 7rem;
    cursor: pointer;
    transform: scaleX(-1);
    transform-origin: center;
}
/* 评论按钮 */
.nav .comment_button {
    width: 2.5rem;
    height: 2.5rem;
    position: fixed;
    top: -0.1rem;
    right: 4rem;
    cursor: pointer;
    transform: scaleX(-1);
    transform-origin: center;
}
/* 收藏按钮 */
.nav .collect_button {
    width: 2.5rem;
    height: 2.5rem;
    position: fixed;
    top: -0.1rem;
    right: 1rem;
    cursor: pointer;
}

.ad{
    width : 100%;
    max-width : 1200px;
    margin : 0 auto;
    font-size:0.5em;
    color : #cccccc;
}
.ad img{
    width : 100%;
}

section{
    width : 100%;
    max-width : 1200px;
    margin : 0 auto;
}
section .list_box{
    width : 97%;
    margin : 3vw auto;
    background: #ffffff;
    border-radius: 0.6em;
    padding : 1vw 2vw 2vw 2vw;
}
section .list_box .title{
    width : 98%;
    font-size   : 1em;
    font-weight : bold;
    margin-bottom : 2vw;
    /* 禁止文本换行 */
     white-space: nowrap;
     /* 隐藏溢出容器的内容 */
    overflow: hidden;
    /* 使用省略号表示被截断的文本 */
    text-overflow: ellipsis;
}

section .list_box .main_content{
    width : 100%;
    margin : 0 auto;
    display: flex;
}
section .list_box .main_content .pic{
    display     : inline-block;
    max-width   : 30%;
}
section .list_box .main_content .space{
    width   : 3vw;
}
section .list_box .main_content .short_content{
    display     : inline-block;
    white-space : normal;
    word-break  : break-word;
    overflow-wrap: break-word;
    font-size   : 0.9em;
}

section .list_box .desc{
    height : 2.6vh;
    font-size:0.5em;
    color : #cccccc;
}
section .list_box .desc .ad{
    display     : inline-block;
    margin-left : 1vw;
}
section .list_box .desc .date{
    display     : inline-block;
    float : right;
    margin-right : 2vw;
}


/* 详情页正文部分 */
article{
    width : 100%;
    max-width : 1200px;
    margin : 0 auto;
}
article .content_box{
    width : 97%;
    margin : 0 auto;
    margin-top : 2vh;
    background: #ffffff;
    border-radius: 0.6em;
    padding : 0 2vw;
}
article .content_box .title{
    padding-top : 3vw;
    text-align : center;
    font-weight : bold;
    font-size   : 1.2em;
}
article .content_box .desc{
    width : 100%;
    font-size   : 0.6em;
    margin-top : 3vw;
    color: #333333;
}
article .content_box .desc .author{
    display     : inline-block;
}
article .content_box .desc .release_time{
    display     : inline-block;
    float : right;
}
article .content_box .content{
    width : 100%;
    line-height: 2rem;
    font-size   : 1rem;
    padding-top : 5vw;
    padding-bottom : 5vw;
    /*自动换行*/
    overflow-wrap: break-word;
    white-space: normal;
}

/* 详情页 评论部分 */
.comment{
    position: fixed;
    top: 2%;
    left: 2%;
    display : none;
    width : 96%;
    height: 97.5%;
    margin : 0 auto;
    border-radius: 0.6em;
    padding : 0 2vw;
    background-color: #f5f5f6;
    box-shadow: 0 0 1vw 1vw rgba(0, 0, 0, 0.6);
    z-index: 100;
}
.comment_content{
    height: 72vh;
    overflow: scroll;
}
.comment .title{
    padding-top : 3vw;
    font-weight : bold;
    font-size   : 1.2em;
}
.comment .item{
    width : 100%;
    margin-top : 3vw;
}
.comment .item .user{
    width : 100%;
}
.comment .item .user .head_pic{
    width : 8vw;
    height : 8vw;
     /* 将边框半径设置为50%以形成圆形 */
    border-radius: 50%;
    /* 隐藏溢出的内容，确保图片被裁剪成圆形 */
    overflow: hidden;
    /* 使元素成为内联块级元素，以便更好地控制布局 */
    display: inline-block;
    /* 添加轻微的阴影 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 添加白色边框 */
    border: 2px solid #fff;
    /* 设置背景颜色，以防图片无法加载 */
    background-color: #f0f0f0;
    display     : inline-block;
    vertical-align: middle;
}
.comment .item .user .nickname{
    height : 8vw;
    line-height: 8vw;
    display     : inline-block;
    vertical-align: middle;
    font-weight : bold;
}
.comment .item .content{
    font-size   : 0.8em;
    text-indent : 2em;
}
.comment .item .date{
    font-size:0.5em;
    color : #cccccc;
    text-align : right;
}
.comment .item hr{
    width : 50%;
    border-top: 1px solid  #ccc;
    margin-left: auto;
    margin-right : 0;
}
.comment .user_content{
    width: 96%;
    position: absolute;
    bottom : 2vw;
}
.comment .user_content textarea{
    width : 100%;
    height : 10vh;
    border: 1px solid #ccc;
}
.comment .user_content button{
    width: 25vw;
    height: 10vw;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 0.5em;
    cursor: pointer;
}

/* 菜单按钮 */
.menu_button {
    width: 3rem;
    height: 3rem;
    position: fixed;
    bottom: 4rem;
    right: 1.5rem;
    cursor: pointer;
}

.menu{
    width: 90vw;
    height: 90vh;
    position: absolute;
    top : 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f5f5f6;
    box-shadow: 0 0 1vw 1vw rgba(0, 0, 0, 0.6);
    z-index: 100;
    border-radius: 2vw;
}
.menu .title{
    width: 100%;
    height: 6vh;
    font-size : 1em;
    padding : 5vw 0 0 5vw;
    font-weight:bold;
    color : #000000;
}
.menu .bar{
    width: 100%;
}
.menu .bar .btn{
    width: auto;
    height: 4vh;
    display: inline-block;
    line-height: 0;
    background-color: #0099ff;
    color: #ffffff;
    border-color: #ebebeb;
    font-size : 1.1em;
    margin : 4vw 0 0 4vw;
    padding : 1em 1.1em;
    text-align :center;
    border-radius: 2vw;
}