.joe_aside__item.post .list .item .icon {
    fill: var(--routine);
}

.joe_aside__item.post .list .item .link {
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 10px;
    transition: background 0.35s;
}

.joe_aside__item.post .list .item .sort {
    display: inline-block;
    vertical-align: middle;
    font-style: normal;
    margin-right: 5px;
    background: var(--classC);
    width: 20px;
    text-align: center;
    border-radius: 10px;
    color: var(--main);
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    margin-top: -2px;
}

.joe_aside__item.post .list .item .text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--routine);
    font-size: 14px;
}

.joe_aside__item.post .list .item:nth-child(1) .sort {
    background: #007bf5;
    color: #fff;
}

.joe_aside__item.post .list .item:nth-child(2) .sort {
    background: #389cff;
    color: #fff;
}

.joe_aside__item.post .list .item:nth-child(3) .sort {
    background: #87c3ff;
    color: #fff;
}

.joe_aside__item.post .list .item:nth-child(4) .sort {
    background: #bedfff;
    color: #fff;
}

.joe_aside__item.post .list .item:hover {
    background: var(--classD)
}

span.text-outside{    margin-right: 20px;
    margin-left:5px;
}

.list .box_input:focus ~ .box_pointout {
    display: block !important
}

.joe_comment__respond-form .head .list input:focus {
    background: var(--background);
    border-color: var(--classA);
    padding-right: 15px
}


.list .box_pointout {
    width: auto;
    font-size: 13px;
    padding: 8px 10px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 120%;
    left: 80%;
    letter-spacing: 0.05em;
}

.list .box_pointout:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent
}

.joe_comment__respond-form .head .list .title {
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: 4px 0px 0px 4px;
    background-color: rgba(144, 147, 153, 0.23);
    color: var(--main);
    display: flex;
    font-size: 15px;
    
}


.joe_aside__item.post .list .item .link:hover{
    color:var(--theme);
}

.joe_aside__item.post {
    background: var(--background);
}

.fa-lg{
    color:white;
}

.Xc_home_roll {
    padding-top: 0;
    padding: 0;
}


.Xc_home_roll {
    display: flex;
    background: var(--background);
    border-radius: var(--radius-wrap);
    box-shadow: var(--box-shadow);
    margin-bottom: 20px;
    transition: .35s;
}


.main {
    width: 80%;
    margin: auto;
}


.self-light{
    color:yellow
    
}

@media (max-width: 959px){
    .view-box{
        font-size: 65%;}
}

.view-box{
    color: #fff;
    font-size: 15px;
    text-shadow: 0 0.1875rem 0.3125rem #1c1f21;
    margin-top: 5px;
}

.joe_header__searchout-inner .cloud .item a:hover {
    background: #000 !important
}



@media (min-width: 768.1px){
.videobox{
    width: 100%;
    height: 800px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}


.mubu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 800px;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
}}
    

.HeaderImg_bottom {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -5px;
}
 .HeaderImg_bottom .waves-svg {
    width: 100%;
    height: 3rem;
}
 .HeaderImg_bottom .waves-svg .parallax > use {
    -webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.HeaderImg_bottom .waves-svg .parallax > use:first-child {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    fill: var(--background);
    opacity: 0.9;
}
 .HeaderImg_bottom .waves-svg .parallax > use:nth-child(2) {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    fill: var(--background);
    opacity: 0.8;
}
 .HeaderImg_bottom .waves-svg .parallax > use:nth-child(3) {
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
    -webkit-animation-duration: 13s;
    animation-duration: 13s;
    fill: var(--background);
    opacity: 0.9;
}
 .HeaderImg_bottom .waves-svg .parallax > use:nth-child(4) {
    -webkit-animation-delay: -5s;
    animation-delay: -5s;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    fill: var(--background);
}

@-webkit-keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    to {
        transform: translate3d(85px, 0, 0);
    }
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    to {
        transform: translate3d(85px, 0, 0);
    }
}


@media (max-width: 768px){
.mubu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 380px;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
}
    
    .videobox{
    width: 100%;
    height: 380px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;}
    
        .HeaderImg_bottom .waves-svg {
        height: 3rem;
    }
}

@media screen and (max-width: 600px) {
    .main {
        width: 90%;
    }
    .ht {
        margin-top: -0px;
        position: relative;
    }
    .videobox{
    width: 100%;
    height: 380px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;}
}

@media screen and (min-width: 601px) {
    .ht {
        margin-top: -0px;
        position: relative;
    }
}


.dingbulan {
    width: 100%;
    text-align: center;
    background: #2c2c2c;
    font-size: 14px;
    font-weight: 400;
    color: #bbb6b6;
    line-height: 80px;
    letter-spacing: 0.8px;
}

@media screen and (max-width: 1100px) {
    .dingbulan {
    display: none;
    }
}

.dingbulan h1 {
    font-size: 14px!important;
    display: inline;
    color: #bbb6b6;
}

.dingbulan span {
    padding: 5px 10px;
    background: #4387fd;
    border-radius: 5px;
    color: #ffffff;
    margin: 0 5px;
}



.box_mac {
    content: " ";
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d !important;
    width: 11px;
    height: 11px;
    -webkit-box-shadow: 20px 0 #fdbc40,40px 0 #35cd4b;
    box-shadow: 20px 0 #fdbc40,40px 0 #35cd4b;
    float: right;
    right: 55px;
    top: 17px;
}

/* 头图 */

.mubu{
    position: relative;
    width: 100%;
    height: 800px;
    color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


video.video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    height: auto;
    object-fit: cover;
}


.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgb(150 143 143 / 70%) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%);
}

.mubu_center{
    width: 100%;
    height: 800px;
    color: #fff;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}

.hbg {
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -105px;
}


.post_detail__category {
    align-items: center;
    margin-bottom: 15px;
    margin-top: 15px;
    position: relative;
}

.post_detail__category .item{color:#fff;font-size:12px;padding:3px 8px;margin-right:5px;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}
.post_detail__category .item:hover{background: #000 !important;transition: .35s ease-out;border-radius: 2px}
.post_detail__category .item:last-child{margin-right:0}
.post_detail__category .item-0{background:#0396ff}
.post_detail__category .item-1{background:#ea5455}
.post_detail__category .item-2{background:#7367f0}
.post_detail__category .item-3{background:#28c76f}
.post_detail__category .item-4{background:#9f44d3}

.bgt {
    font-size: 2.2rem;
    font-weight: 700;
    text-shadow: 0 0.1875rem 0.3125rem #1c1f21;
    letter-spacing: .25rem;
    padding: 0 10px;
}


.ht a {
   color: #fff;
}


/* 头 */

#h {
    margin-top: -80px;
}


/* 距离 */

#c.main {
    margin-top: 20px;
}

#hlist {
    margin-bottom: 5em;
}


/* 分栏标题 */

.flbt {
    line-height: 50px;
    margin-left: 10px;
}

.juyou {
    float: right
}

#zt.main {
    text-align: center;
    line-height: 80px;
    margin-bottom: 50px;
}


/* 卡片 */

.ccontent {
    margin-bottom: 8px;
    height: 6.2em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shuju {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#cimg {
    height: 250px;
    width: 100%;
    transition: 0.3s;
    object-fit: cover;
    border-radius: 10px;
    margin-top: -23px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
}

#cimg:hover {
    margin-left: -10px;
}

#img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    border-radius: 0px 10px 10px 0px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
}

.card {
    box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 100%;
    height: 200px;
    background: #fff;
    border-radius: 10px;
}

.post-card {
    box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 4%;
}

.ptitle {
    font-size: 20px;
    display: block;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .87;
    margin-bottom: 8px;
    color:#eee;
}

.coo {
    padding:1em;
    color: #555555;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}


/* 专题 */

.gdth {
    width: 100%;
    text-align: center;
    overflow-x: scroll;
    overflow-y: visible;
}

.henxianglist {
    display: inline-flex;
    text-align: left;
}

.tcgd {
    margin-top: 100px;
}

.zt-card {
    text-align: center;
    transition: 0.3s;
    width: 100%;
    height: 266px;
    border-radius: 10px;
    margin-bottom: 2em;
}

#zt-img {
    height: 260px;
    width: 88%;
    transition: 0.3s;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    margin-top: -100px;
    background-color: #fff;
}

#zt-img:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    margin-top: -95px;
}

.zt-title {
    font-size: 20px;
    line-height: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tuijian {
    height: 355px;
}


.fcard {
    box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 100%;
    background: #fff;
}

#foot {
    margin-top: 50px;
    text-align: center;
}





@media (max-width: 1200px) {
    html .ad-containter {
        display: none;
    }
}

.ad-container {  
    display: flex;  
    flex-direction: column;  
    width: 100%;  
    margin-top: 5px; /* 顶部间距 */  
}  
  
.large-ad {  
    margin-bottom: 2px; /* 大图之间的间距 */  
}  
  
.large-ad img, .small-ad img {  
    width: 100%;  
    height: auto;  
    display: block;  
}  
  
.small-ads {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-between;  
}  
  
.small-ad-row {  
    width: 100%;  
    display: flex;  
    justify-content: space-between;  
    margin-bottom: 2px; /* 小图行之间的间距 */  
}  
  
.small-ad {  
    flex: 0 0 calc(50% - 1px); /* 减去间距的一半 */  
    margin-bottom: 2px; /* 小图之间的间距 */  
}  
  
.ad-link {  
    position: relative;  
    display: block;  
    overflow: hidden; /* 确保广告标签不会溢出图片 */  
}  
  
.ad-label {  
    position: absolute;  
    right: -4px;  
    bottom: 5px;   
    color: white; /* 文字颜色为白色 */  
    padding: 2px 5px; /* 内边距调整 */  
    border-radius: 3px; /* 圆角 */  
    font-size: 9px; /* 字体大小 */  
}  









/* 自适应 */


/* 头图 */

@media screen and (max-width: 768px) {
    .mubu {
        height: 380px;
    }
    .mubu_center {
        height: 380px;
    }
    .hbg {
        margin-top: -55px;
    }
}


/* 头标题 */

@media screen and (max-width: 768px) {
    #post.bgt {
        font-size: 20px;
    }
}


/* 专题 */

@media screen and (max-width: 959px) {
    .zt-card {
        text-align: center;
        transition: 0.3s;
        width: 100%;
        height: 160px;
        border-radius: 10px;
        margin-bottom: 2em;
    }
    #zt-img {
        height: 200px;
        width: 80%;
        transition: 0.3s;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.2);
        margin: 0 auto;
        margin-top: -88px;
        background-color: #fff;
    }
    .zt-title {
        font-size: 18px;
        overflow: hidden;
        line-height: 50px;
    }
    .tuijian {
        height: 280px;
    }
}




.pptt {
  text-shadow: 0 0.1875rem 0.3125rem #1c1f21;
  font-size: 15px;
}