@import "../../static/css/global.css";

/**
 * 整体页面布局
 */
.app-thread{
    display: block;
    max-width: 1440px;
    margin: 3.75em auto;
    position: relative;
    line-height: 1.7;
    padding: 0 1.25em;
}

.app-thread >* {
    text-align: center;
    margin: 0 auto;
    padding: 2em 0;
}

.app-thread .thread-nav {
    padding: 0.5em 0;
}

.thread-nav dt-nav {
    background: #fff;
}

.app-thread .thread-pager {
    margin: 1em auto;
}

/**
 * banner
 */
.thread-banner {
    display: block;
    width: 100%;
    position: relative;
    margin: 3.5em auto 0;
}
.thread-banner  h1 {
    text-align: center;
    color: #fff;
}
.thread-banner img {
    max-width: 100%;
    vertical-align: middle;
}
.thread-banner >div:first-child{
    width: 100%;
    height: 0;
    margin: 0 auto 70.31%;
}

.thread-banner >div:last-child{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    margin: 10% auto 0;
}
.thread-banner-content {
    margin: 0 auto;
    color: #fff;
    text-align: center;
    letter-spacing: 0.125em;
    display: flex;
    justify-content:center;
    flex-direction: column;
    font-size: 1em;
}

/**
 * 新闻详情
 */
.app-thread .thread-breadcrumbs {
    text-align: left;
    color: var(--color-notice,#00489C);
}

.thread-breadcrumbs a {
    color: var(--color-primary,#1A1A1A);
    text-decoration: none;
}

.app-thread .thread-subject {
    padding-top: 0;
    padding-bottom: 0;
}

.thread-subject {
    position: relative;
    display: flex;
    gap: 0.5em;
    align-items: center;
    text-align: left;
    border:1px solid rgba(0, 72, 159, 0.1);
}
.thread-subject >*{
    flex: 1;
}
.thread-subject >*:first-child{
    flex: 0;
    flex-basis: 4em;
    text-align: center;
    margin: 0 auto;
}

.app-thread .thread-detail {
    text-align: left;
    line-height: 2;
    padding: 0.5em 0;
}
@media (min-width: 576px) {
    .thread-banner >div:last-child {
        margin-top: 25%;
    }
}
@media (min-width: 768px) {
    .app-thread {
        padding: 0 2.5em;
        margin: 0 auto;
    }
    .thread-banner  {
        margin: 0 auto;
    }
    .thread-banner >div:last-child {
        margin-top: 23%;
    }
}
@media (min-width: 992px) {
    .thread-banner >div:first-child{
        margin-bottom: 22.22%;
    }
    .thread-banner >div:last-child{
        margin-top: 6%;
    }
}
@media (min-width: 1024px) {
    .app-thread {
        padding: 0 3.75em;
    }
}
@media (min-width: 1440px) {
    .thread-banner >div:first-child{
        margin-bottom: 16.67%;
    }
    .thread-banner >div:last-child {
        margin-top: 3.67%;
    }
    .thread-banner-content {
        font-size: 1.125em;
    }
}
@media (min-width: 1560px) {
    .app-thread {
        padding: 0;
    }
}