/* content  */
.detail-main{ padding:20px; border: 1px solid #EEE; margin: 20px 0;}


/* content  */
.container.detail{ padding-bottom: 10px; background-color: #FFF;}
.detail-title{ 
    text-align: center;
    font-size: 32px;
    padding-top: 20px;
    padding-bottom: 40px;
    font-weight: bold;
    border-bottom: 1px solid #EEE;
}

.time-font{ display: flex; justify-content: space-between; align-items: center;}
.font-type {
    height: 26px;
    line-height: 26px;
    background: #F5F5F7;
    border-radius: 20px;
    padding: 0 10px;
    display: inline-block;
    cursor: pointer;
    font-size: 12px;
}
.font-type img {
    vertical-align: middle;
    margin-right: 5px;
}

.detail-time{ padding: 30px 0;}
.post-category{ color: var(--color-red); display: inline-block; margin-right: 10px; text-decoration: underline;}
.post-time{ color:rgb(122, 123, 124); font-size: 12px;}
.separation-line{ color: #EEE; font-size: 10px;}

.detail-content{ line-height: 1.8; font-size: 16px;}
.detail-content img{ max-width: 100%;}

.detail-main.lg .detail-title{ font-size: 26px;}
.detail-main.lg .detail-content{ font-size: 18px;}

/* comment  */
.comment{ display: flex; justify-content: center; align-items: center; padding: 20px 0;}
.comment p{ width: 100px; height: 38px; line-height: 38px; text-align: center; cursor: pointer; border: 1px solid #CCC; color: #666; border-radius: 20px; margin:0 10px;}
.comment p:hover{ border-color: var(--color-red);}
.comment p i{ font-size: 20px; vertical-align: middle;}
.comment p span{ font-size: 13px;}

/* footer ad  */
.footer-ad{ position: relative; margin-bottom: 10px;}
.footer-ad::before{ content: 'AD'; position: absolute; background-color: rgba(0, 0, 0, 0.4); color: #FFF; font-size: 10px; padding: 2px 5px; right: 0; bottom: 0; border-radius: 3px;}
.footer-ad img{ width: 100%;}

/* more  */
.more-news{ padding: 20px;}
.more-news-header{
    padding: 20px 0;
    font-size: 24px;
}
.news-item{ margin-top: 10px; border-top: 1px solid #f5f5f5; padding-top: 10px;}
.news-item a{ display: flex; color: #000;}
.news-item-left{ flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.news-item-title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    line-height: 1.5;
}
.news-item-time{ color: #888; font-size: 12px;}
.news-item-right{ width: 250px; height: 170px; margin-left: 50px;}
.news-item-right img{ display: block; width: 100%; height: 100%; object-fit: cover; }

.showspeak, .speak{ display: none;}

@keyframes ani-speaking {
    0% {
      transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
  }

  .mbx{ color: #666;}
  .mbx a{ color: #333;}

  @media screen and (max-width: 640px) {
    .detail-main{ border: none; margin: 0;}
    .detail-main{ padding-top: 70px;}
    .detail-title {
        font-size: 22px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .mbx{ padding-top: 20px;}
    .showspeak{ display: block; margin-right: 10px;}
    .time-right{ display: flex; align-items: center;}

    .btn-speak .layui-icon{ font-size: 24px;}
    .btn-speak.btn-speaking .layui-icon{ 
        display: block;
        color: var(--color-red); 
        -webkit-animation: ani-speaking 1s infinite linear;
        -moz-animation: ani-speaking 1s infinite linear;
        -o-animation: ani-speaking 1s infinite linear;
        animation: ani-speaking 1s infinite linear;
    }

    .topbar-title{ font-size: 16px;}
    .more-news-header {
        padding: 0;
        font-size: 18px;
    }
    .news-item-title{ font-size: 14px;}
    .news-item-right {
        width: 120px;
        height: 80px;
        margin-left: 10px;
    }

    /* speak  */
    .speak{align-items: center; justify-content: space-between; position: fixed; z-index: 10; width: 100%; left: 0; bottom: 0; background-color:var(--color-red);}
    .speak-title{ padding: 10px 0 ; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #FFF;}
    .speak-action span{ padding: 0 10px;}
    .speak-action i{ color: #FFF;}
    .speak-cancel{padding: 0 10px; color: #fabe64;}
    .speak.active{ display: flex;}

    .speak-action .btn-pause{ display: none;}
    .speak-action .btn-play{ display: block;}

    .speak-action.playing .btn-pause{ display: block;}
    .speak-action.playing .btn-play{ display: none;}
    
}