@charset "UTF-8";

blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0;
    color: #333333;
}

body,
button,
input,
select,
textarea {
    font: 12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;
    color: #000;
}

ol,
ul {
    list-style: none
}

a {
    text-decoration: none
}

fieldset,
img {
    border: 0;
    vertical-align: top;
}

a,
input,
button,
select,
textarea {
    outline: none;
}

a,
button {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

* {
    margin: 0;
    padding: 0;
}

/*初始化  reset*/
html {
    font-size: 50px;
}

body {
    opacity: 0;
}

html,
body {
    position: relative;
    /* width: 7.5rem; */
    width: 100%;
    margin: 0 auto;
    font-family: "微软雅黑";
}

[v-cloak] {
    display: none !important;
}

body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #000;
    position: relative;
}

/*公共顶部*/
#app {
    /* max-width: 750px; */
    width: 100%;
    margin: 0 auto;
    padding-top: 1.92rem;
}

/*个性化*/
#page {
    /* max-width: 750px; */
    max-width: 100%;
    margin: 0 auto;
}

/*版心*/
.container {
    width: 6.86rem;
    margin: 0 auto;
    overflow: hidden;
}

.fl_l {
    float: left;
}

.fl_r {
    float: right;
}

.fw_n {
    font-weight: normal;
}

.flexBox {
    display: flex;
    overflow: hidden;
    justify-content: center;
}

/*顶部固定栏*/
.commonTopHead {
    position: fixed;
    width: 100%;
    max-width: 7.5rem;
    box-sizing: border-box;
    font-size: .36rem;
    padding: 1.06rem .32rem .38rem;
    top: 0;
    z-index: 9999;
    background: #F5F5F5;
}

.commonTopHead .topHeadCon {
    display: flex;
    position: relative;
    justify-content: space-between;
}

.commonTopHead h5 {
    flex: 1 0 auto;
    text-align: center;
    line-height: .48rem;
    font-size: .36rem;
    color: #333333;
    font-weight: 500;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.commonTopHead img,
.commonTopHead a {
    flex: 0 0 auto;
    /* 不伸缩，固定宽度 */
}

.commonTopHead img {
    height: .4rem;
    margin-top: .04rem;
}

.commonTopHead a {
    font-size: .28rem;
    color: #333333;
    line-height: .48rem;
}



/* list */
.main-list {
    padding: 0 .32rem;
    padding-top: .40rem;
    padding-bottom: .40rem;
    border-bottom: .01rem solid #DDDDDD;
    display: flex;
    justify-content: space-between;
}

.list-left {
    min-width: 3.32rem;
    min-height: 1.58rem;
    position: relative;
}

.main-list-none {
    border: none;
}

.list-source-dy {
    margin-top: .16rem;
}

.main-list-flex-none {
    display: block;
}

.listTitle {
    width: 3.66rem;
    font-weight: 400;
    font-size: .32rem;
    color: #333333;
    line-height: .52rem;
    overflow: hidden;
    /* 确保内容超出容器时会被隐藏 */
    display: -webkit-box;
    /* 作为弹性伸缩盒子模型显示 */
    -webkit-line-clamp: 3;
    /* 限制在两行 */
    -webkit-box-orient: vertical;
    /* 垂直排列盒子 */
    text-overflow: ellipsis;
    /* 多出的文本用省略号表示 */
    white-space: normal;
    /* 允许文本换行 */
}

.listTitle-t {
    max-height: 1.58rem;
}

.list-title-width {
    width: 100%;
}

.list-source {
    /* position: absolute; */
    bottom: 0;
    margin-top: .08rem;
    font-size: .24rem;
}

.list-title-margin {
    margin-bottom: .16rem;
}

.list-source span {
    font-weight: 400;
    font-size: .22rem;
    color: #999999;
    line-height: .32rem;
    margin-right: .13rem;
}

.article-img-play {
    position: absolute;
    bottom: calc(50% - 0.44rem);
    left: calc(50% - 0.44rem);
}

.article-img-play img {
    width: .88rem;
    height: .88rem;
}

.list-source-dy span {
    margin-top: .16rem;
    font-weight: 400;
    font-size: .24rem;
    color: #999999;
    line-height: .32rem;
    margin-right: .24rem;
}

.list-right-img img {
    width: 2.80rem;
    height: 1.58rem;
    border-radius: .12rem;
    object-fit: cover;
}

.articleTypeTwo {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

.article-img-one {
    object-fit: cover;
    width: 100%;
    border-radius: .12rem;
}

.article-img-two {
    width: 46%;
    object-fit: cover;
    border-radius: .12rem;
}

.article-img-three {
    margin-bottom: .16rem;
    width: 31%;
    object-fit: cover;
    border-radius: .12rem;
}

/* list */
.list-special-margin {
    margin: .4rem .32rem 0 .32rem;
}

.article-img-bottom {
    margin-bottom: .4rem;
}

.list-special-flex {
    display: flex;
    align-items: center;
    margin: 0 .24rem .32rem .24rem;
}

.list-special-flex img {
    margin-right: .08rem;
    width: .4rem;
    height: .4rem;
}

.list-special-image-text {
    width: 5.36rem;
    font-weight: 400;
    font-size: .32rem;
    color: #333333;
    overflow: hidden;
    /* 确保超出部分隐藏 */
    white-space: nowrap;
    /* 确保文本在一行内显示 */
    text-overflow: ellipsis;
    /* 使用省略号表示超出的文本 */
}

.special-click-name img {
    margin-top: .08rem;
    width: 100%;
    object-fit: cover;
}

.component-date {
    margin-right: 0 !important;
}

/* 图片16/9 */
.aspect-ratio-100 {
    width: 100%;
}
.aspect-ratio-32 {
    width: 32%;
}

/* 使用 padding-top 技巧来保持 16:9 的宽高比 */
.aspect-ratio-16-9 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* (9 / 16) * 100% = 56.25% */
    overflow: hidden;
}

.responsive-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 确保图片不会被拉伸变形 */
}