:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-sans);
}
img {
    object-fit: cover;
}
a {
    text-decoration: none;
    color: #000000;
}
li {
    list-style: none;
}
body{
    overflow-x: hidden;
}
body.header-nav-locked{
    overflow: hidden;
}
.oimg{width: 100%;height: 100%;}
.flexBox{display: flex;}
.gridBox{display: grid;}
.woh{display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.poh{
    overflow: hidden;
    /* -webkit-line-clamp: 2; */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

@font-face {
    font-family: "albbH";
    src: url("../font/Alibaba-PuHuiTi-Heavy.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
header{
    width: 100%;
    height: 80px;
    background: #ffffff;
    box-shadow: 0px 0px 15px 0px rgba(198,198,198,0.35);
}
.header{
    width: 1366px;
    height: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}
.headerLogo{
    display: block;
    width: 196px;
    height: 57px;
}
.headerNav{
    width: calc(100% - 196px);
    /* justify-content: center; */
    padding-left: 90px;
    align-items: center;
    gap: 35px;
}
.headerNavs{
    font-size: 20px;
    color: #333333;
    line-height: 24px;
    position: relative;
}
.headerNavs:hover{
    background: linear-gradient(to right, #F64174, #FB5250);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hot_tip{
    font-weight: bold;
    font-size: 10px;
    color: #FFFFFF;
    line-height: 14px;
    padding: 0 4px;
    font-family: var(--font-sans);
    font-weight: 700;
    border-radius: 5px 5px 5px 0px;
    background: linear-gradient(to right, #F64174, #FB5250);
    position: absolute;
    right: -15px;
    top: -10px;
}
.headerNavs.active{
    font-weight: bold;
    font-size: 20px;
    color: #333333;
    line-height: 24px;
    font-family: var(--font-sans);
    font-weight: 700;
    background: linear-gradient(to right, #F64174, #FB5250);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.headerNavs.active::before{
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #F64174, #FB5250);
}
.headerNavs.active::after{
    content: "";
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 9px;
    background: url(../images/icon11.png) no-repeat;
    background-size: contain;
}
.indexMain1{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 47px;
    background: url(../images/icon13.png) no-repeat;
    background-size: 100% 100%;
    padding-bottom: 40px;
}
.indexMain1 h1{
    font-weight: bold;
    font-size: 60px;
    color: #333333;
    line-height: 66px;
    font-family: var(--font-sans);
    font-weight: 700;
    background: linear-gradient(to right, #F64174, #FB5250, #FF00B4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.indexMain1 > p{
    font-size: 16px;
    color: #999999;
    line-height: 18px;
    margin-top: 24px;
}
.indexMain1_search{
    width: 600px;
    height: 55px;
    border-radius: 28px;
    border: 3px solid transparent;
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #E88FA8, #FC9998) border-box;
    margin-top: 35px;
    padding: 0 25px;
    align-items: center;
    justify-content: space-between;
}
.indexMain1_search:hover{
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #F64174, #FB5250) border-box;
}
.indexMain1_btn{
    width: 26px;
    height: 26px;
    display: block;
    border: none;
    cursor: pointer;
    background: url(../images/icon6.png) no-repeat;
    background-size: contain;
}
.indexMain1_btn.is-disabled{
    cursor: not-allowed;
    opacity: 0.55;
}
.indexMain1_btn.active{
    background: url(../images/icon6s.png) no-repeat;
    background-size: contain;
}
.indexMain1_search > input{
    width: calc(100% - 36px);
    border: none;
    background: none;
    font-size: 16px;
    color: #333333;
    line-height: 26px;
}
.indexMain1_search > input::placeholder{
    color: #999999;
}
.indexMain1_info{
    margin-top: 42px;
    justify-content: center;
    align-items: center;
    gap: 60px;
}
.indexMain1_info > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    justify-content: center;
}
.indexMain1_info > span{
    display: block;
    width: 1px;
    height: 55px;
    background: #FFD5D5;
}
.indexMain1_info > div b{
    font-size: 26px;
    color: #FE87A9;
    line-height: 30px;
    font-family: var(--font-sans);
    font-weight: 700;
}
.indexMain1_info > div span{
    font-size: 14px;
    color: #FE87A9;
    line-height: 16px;
}
.index_main{
    width: 1366px;
    margin: 0 auto;
}
.indexMain2{
    width: 100%;
    margin-top: 27px;
}
.index_title{
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #F3F3F3;
}
.index_title span{
    font-size: 22px;
    color: #333333;
    line-height: 32px;
    font-weight: bold;
    position: relative;
    font-family: var(--font-sans);
    font-weight: 700;
}
.index_title span::before{
    content: "";
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #F64174, #FB5250);
}
.index_title span::after{
    content: "";
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 9px;
    background: url(../images/icon11.png) no-repeat;
    background-size: contain;
}
.index_title > a{
    font-size: 14px;
    color: #999999;
    line-height: 26px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #F7F7F7;
    border-radius: 13px;
    border: 1px solid transparent;
    border: 1px solid #F3F3F3;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: ease-out 0.8s;
    box-shadow: inset 0 0 0 0 #FFF3F6;
}
.index_title > a:hover{
    border: 1px solid transparent;
    background: linear-gradient(#FFF3F6, #FFF3F6) padding-box, linear-gradient(to right, #F64174, #FB5250) border-box;
    color: #FB5250;
    box-shadow: inset 0 -100px 0 0 #FFF3F6;
}
.index_title > a::after{
    content: "";
    display: block;
    width: 6px;
    height: 11px;
    background: url(../images/icon3.png) no-repeat;
    background-size: contain;
}
.index_title > a:hover::after{
    background: url(../images/icon3s.png) no-repeat;
    background-size: contain;
}
.index_title > a:active {
    transform: scale(0.9);
}
.indexMain2M{
    width: 100%;
    margin-top: 25px;
}
.indexMain2Ms{
    width: 251px;
    background: #F9F9F9;
    border-radius: 5px;
    border: 1px solid #F3F3F3;
    padding: 17px;
    height: 191px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.indexMain2Ms:hover{
    border: 1px solid transparent;
    background: linear-gradient(#F9F9F9, #F9F9F9) padding-box, linear-gradient(to right, #F64174, #FB5250) border-box;
}
.indexMain2Ms1{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.indexMain2Ms1 > a{
    display: block;
    width: 65px;
    height: 65px;
    background: #FFFFFF;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #F0F0F0;
}
.indexMain2Ms1 > div{
    width: calc(100% - 77px);
}
.indexMain2Ms1 > div > a{
    font-size: 16px;
    color: #333333;
    line-height: 18px;
    width: 100%;
}
.indexMain2Ms1 > div > a:hover{
    background: linear-gradient(to right, #F64174, #FB5250, #FF00B4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.indexMain2Ms1 > div > p{
    width: 100%;
    font-size: 14px;
    color: #999999;
    line-height: 22px;
    -webkit-line-clamp: 2;
    margin-top: 4px;
}
.indexMain2Ms2{
    width: 100%;
    margin-top: 12px;
    display: flex;
    align-items: center;
    overflow-x: auto;
    gap: 13px;
    scrollbar-width: none;
    overflow: auto;
}
.indexMain2Ms2::-webkit-scrollbar {
    display: none;
}
.indexMain2Ms2 > a{
    flex: 0 0 auto;
    font-size: 14px;
    color: #999999;
    line-height: 30px;
    padding: 0 13px;
    background: #FFFFFF;
    border-radius: 15px;
    border: 1px solid #F3F3F3;
}
.indexMain2Ms2 > a:hover{
    border: 1px solid transparent;
    background: linear-gradient(#FFF3F6, #FFF3F6) padding-box, linear-gradient(to right, #F64174, #FB5250) border-box;
    color: #F64174;
}
.indexMain2Ms3{
    width: 100%;
    justify-content: space-between;
    margin-top: 15px;
    align-items: center;
}
.indexMain2Ms_btn{
    position: relative;
    display: inline-block;
    padding: 0 15px;
    text-align: center;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 30px;
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient(to right, #F64174, #FB5250);
    cursor: pointer;
    transition: ease-out 0.8s;
    border-radius: 15px;
    box-shadow: inset 0 0 0 0 #FF0072;
    margin-left: auto;
}
.indexMain2Ms_btn:hover {
    color: white;
    box-shadow: inset 0 -100px 0 0 #FF0072;
}
.indexMain2Ms_btn:active {
    transform: scale(0.9);
}
.indexMain2Ms3 > div{
    font-size: 20px;
    color: #333333;
    line-height: 22px;
    font-weight: bold;
    font-family: var(--font-sans);
    font-weight: 700;
}
.indexMain2Ms3 > div span{
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
    font-family: var(--font-sans);
    font-weight: 700;
}
.indexMain2M .swiper-slide{
    width: auto;
}
.indexMain2M{
    position: relative;
}
.indexMain2M_swiper_prev{
    display: block;
    width: 35px;
    height: 35px;
    background: url(../images/icon9.png) no-repeat;
    background-size: contain;
    cursor: pointer;
    position: absolute;
    top: 77px;
    left: -17px;
    z-index: 2;
}
.indexMain2M_swiper_prev:hover{
    background: url(../images/icon9s.png) no-repeat;
    background-size: contain;
}
.indexMain2M_swiper_next{
    display: block;
    width: 35px;
    height: 35px;
    background: url(../images/icon10.png) no-repeat;
    background-size: contain;
    cursor: pointer;
    position: absolute;
    top: 77px;
    right: -17px;
    z-index: 2;
}
.indexMain2M_swiper_next:hover{
    background: url(../images/icon10s.png) no-repeat;
    background-size: contain;
}
.indexMain3{
    width: 100%;
    margin-top: 40px;
}
.indexMain3M{
    width: 100%;
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(5,251px);
    justify-content: space-between;
    row-gap: 25px;
}
.indexMain3Ms{
    width: 251px;
    height: 348px;
    padding: 20px 17px;
    border: 1px solid #F3F3F3;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.indexMain3Ms:hover{
    border: 1px solid transparent;
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #F64174, #FB5250) border-box;
}
.indexMain3Ms1{
    width: 100%;
    width: 217px;
    height: 217px;
    background: #F7F7F7;
    border-radius: 5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.indexMain3Ms_img{
    display: block;
    width: 105px;
    height: 105px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #F0F0F0;
}
.indexMain3Ms_top{
    position: absolute;
    top: 9px;
    left: 12px;
    width: calc(100% - 24px);
    display: flex;
    align-items: center;
    overflow-x: auto;
    gap: 6px;
    scrollbar-width: none;
    overflow: auto;
    cursor: grab;
    user-select: none;
}
.indexMain3Ms_top.is-dragging{
    cursor: grabbing;
}
.indexMain3Ms_top::-webkit-scrollbar {
    display: none;
}
.indexMain3Ms_top > a{
    flex: 0 0 auto;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 20px;
    padding: 0 4px;
    border-radius: 10px;
    transition: ease-out 0.8s;
    -webkit-user-drag: none;
    user-select: none;
}
.indexMain3Ms_top > a:hover{
    color: #ffffff;
}
.indexMain3Ms_top > a:nth-of-type(4n+1){
    background: #FF7700;
    box-shadow: inset 0 0 0 0 #FDA04E;
}
.indexMain3Ms_top > a:nth-of-type(4n+2){
    background: #7CBF3B;
    box-shadow: inset 0 0 0 0 #00D651;
}
.indexMain3Ms_top > a:nth-of-type(4n+3){
    background: #EA4336;
    box-shadow: inset 0 0 0 0 #FC675B;
}
.indexMain3Ms_top > a:nth-of-type(4n+4){
    background: #0084FF;
    box-shadow: inset 0 0 0 0 #3DA0FD;
}
.indexMain3Ms_top > a:nth-of-type(4n+1):hover{
    background: #FDA04E;
    box-shadow: inset 0 -100px 0 0 #FDA04E;
}
.indexMain3Ms_top > a:nth-of-type(4n+2):hover{
    background: #00D651;
    box-shadow: inset 0 -100px 0 0 #00D651;
}
.indexMain3Ms_top > a:nth-of-type(4n+3):hover{
    background: #FC675B;
    box-shadow: inset 0 -100px 0 0 #FC675B;
}
.indexMain3Ms_top > a:nth-of-type(4n+4):hover{
    background: #3DA0FD;
    box-shadow: inset 0 -100px 0 0 #3DA0FD;
}
.indexMain3Ms_title{
    width: 100%;
    display: block;
    font-size: 16px;
    color: #333333;
    line-height: 18px;
    margin-top: 13px;
}
.indexMain3Ms_title:hover{
    background: linear-gradient(to right, #F64174, #FB5250);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.indexMain3Ms_info{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #999999;
    line-height: 16px;
    margin-top: 13px;
}
.indexMain3Ms_info > b{
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    background: #BABABA;
    border-radius: 50%;
}
.indexMain3Ms_info > span{
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.indexMain3Ms > p{
    width: 100%;
    /* margin-top: 13px; */
    margin-top: auto;
    font-size: 14px;
    color: #999999;
    line-height: 16px;
}
.indexMain4{
    width: 100%;
    margin-top: 32px;
    justify-content: space-between;
}
.indexMain4L{
    width: 976px;
}
.indexMain4L_class{
    width: 830px;
    position: relative;
}
.indexMain4L_classs{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    height: 35px;
    overflow-x: auto;
    scrollbar-width: none;
    overflow: auto;
}
.indexMain4L_classs::-webkit-scrollbar {
    display: none;
}
.indexMain4L_classs > a{
    height: 32px;
    background-color: #F7F7F7;
    background-image: linear-gradient(to right, #F64174, #FB5250), linear-gradient(#F7F7F7, #F7F7F7), linear-gradient(#F3F3F3, #F3F3F3);
    background-position: left bottom, left top, left top;
    background-repeat: no-repeat;
    background-origin: padding-box, padding-box, border-box;
    background-clip: padding-box, padding-box, border-box;
    background-size: 100% 0, 100% 100%, 100% 100%;
    border-radius: 16px;
    border: 1px solid transparent;
    font-size: 16px;
    color: #333333;
    line-height: 32px;
    padding: 0 24px;
    flex: 0 0 auto;
    transition: ease-out 0.2s;
}
.indexMain4L_classs > a:hover{
    color: #FFFFFF;
    background-image: linear-gradient(to right, #F64174, #FB5250), linear-gradient(#F7F7F7, #F7F7F7), linear-gradient(to right, #F64174, #FB5250);
    background-size: 100% 100%, 100% 100%, 100% 100%;
}
.indexMain4L_classs > a.active{
    /* background: linear-gradient(to right, #F64174, #FB5250); */
    color: #FFFFFF;
    border: 1px solid transparent;
    background-image: linear-gradient(to right, #F64174, #FB5250), linear-gradient(to right, #F64174, #FB5250), linear-gradient(to right, #F64174, #FB5250);
    background-size: 100% 100%, 100% 100%, 100% 100%;
}
.indexMain4L_class_prev{
    position: absolute;
    left: 0;
    top: 2px;
    display: block;
    cursor: pointer;
    border: none;
    width: 31px;
    height: 32px;
    background: url(../images/icon7.png) no-repeat;
    background-size: contain;
    z-index: 1;
}
.indexMain4L_class_prev:hover{
    background: url(../images/icon7s.png) no-repeat;
    background-size: contain;
}
.indexMain4L_class_next{
    position: absolute;
    right: 0;
    top: 2px;
    display: block;
    cursor: pointer;
    border: none;
    width: 31px;
    height: 32px;
    background: url(../images/icon8.png) no-repeat;
    background-size: contain;
    z-index: 1;
}
.indexMain4L_class_next:hover{
    background: url(../images/icon8s.png) no-repeat;
    background-size: contain;
}
.indexMain4L_class_btn .is-hidden{
    display: none;
}
.indexMain4LM{
    width: 100%;
}
.index_article{
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #F3F3F3;
    justify-content: space-between;
    gap: 20px;
}
.index_article:hover .index_article_title,
.index_article:hover .index_article_title h2{
    background: linear-gradient(to right, #F64174, #FB5250);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.index_article_img{
    display: block;
    width: 164px;
    /* max-width: 164px;
    min-width: 101px; */
    height: 101px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #F3F3F3;
    flex: 0 0 auto;
}
.index_article > div{
    width: calc(100% - 184px);
    /* min-width: calc(100% - 184px);
    max-width: calc(100% - 121px); */
    display: flex;
    flex-direction: column;
    height: 101px;
    justify-content: space-between;
}
.index_article_title,
.index_article_title h2{
    width: 100%;
    font-size: 18px;
    color: #333333;
    line-height: 20px;
    font-weight: bold;
    font-family: var(--font-sans);
    font-weight: 700;
}
.index_article > div > p{
    width: 100%;
    font-size: 14px;
    color: #999999;
    line-height: 16px;
}
.index_article_info{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.index_article_infos{
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: 12px;
    color: #999999;
    line-height: 14px;
    flex: 0 0 auto;
}
.index_article_infos > span{
    display: flex;
    align-items: center;
    gap: 3px;
}
.index_article_time::before{
    display: block;
    content: "";
    width: 13px;
    height: 13px;
    background: url(../images/icon5.png) no-repeat;
    background-size: contain;
}
.index_article_times::before{
    display: block;
    content: "";
    width: 17px;
    height: 12px;
    background: url(../images/icon1.png) no-repeat;
    background-size: contain;
}
.index_article_author::before{
    display: block;
    content: "";
    width: 12px;
    height: 12px;
    background: url(../images/icon2.png) no-repeat;
    background-size: contain;
}
.index_article_class{
    width: 455px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
}
.index_article_class.is-dragging{
    cursor: grabbing;
}
.index_article_class::-webkit-scrollbar {
    display: none;
}
.index_article_class > a{
    font-size: 12px;
    color: #FFFFFF;
    line-height: 25px;
    border-radius: 13px;
    padding: 0 8px;
    flex: 0 0 auto;
    transition: ease-out 0.8s;
    -webkit-user-drag: none;
    user-select: none;
}
.index_article_class > a:first-child{
    margin-left: auto;
}
.index_article_class > a:hover{
    color: #ffffff;
}
.index_article_class > a:nth-of-type(4n+1){
    background: #FF7700;
    box-shadow: inset 0 0 0 0 #FDA04E;
}
.index_article_class > a:nth-of-type(4n+2){
    background: #7CBF3B;
    box-shadow: inset 0 0 0 0 #00D651;
}
.index_article_class > a:nth-of-type(4n+3){
    background: #EA4336;
    box-shadow: inset 0 0 0 0 #FC675B;
}
.index_article_class > a:nth-of-type(4n+4){
    background: #0084FF;
    box-shadow: inset 0 0 0 0 #3DA0FD;
}
.index_article_class > a:nth-of-type(4n+1):hover{
    background: #FDA04E;
    box-shadow: inset 0 -100px 0 0 #FDA04E;
}
.index_article_class > a:nth-of-type(4n+2):hover{
    background: #00D651;
    box-shadow: inset 0 -100px 0 0 #00D651;
}
.index_article_class > a:nth-of-type(4n+3):hover{
    background: #FC675B;
    box-shadow: inset 0 -100px 0 0 #FC675B;
}
.index_article_class > a:nth-of-type(4n+4):hover{
    background: #3DA0FD;
    box-shadow: inset 0 -100px 0 0 #3DA0FD;
}
.index_article:hover{
    background: #FAFAFA;
}
.index_more{
    width: 100%;
    margin-top: 23px;
    height: 45px;
    background: #F7F7F7;
    border-radius: 23px;
    border: 1px solid #F3F3F3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 16px;
    color: #999999;
    line-height: 18px;
}
.index_more::after{
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    background: url(../images/icon4.png) no-repeat;
    background-size: contain;
}
.index_more:hover{
    background: #FFF3F6;
    border: 1px solid transparent;
    background: linear-gradient(#FFF3F6, #FFF3F6) padding-box, linear-gradient(to right, #F64174, #FB5250) border-box;
    color: #FB5250;
}
.index_more:hover::after{
    background: url(../images/icon4s.png) no-repeat;
    background-size: contain;
}
.indexMain4R{
    width: 350px;
    display: flex;
    flex-direction: column;
    gap: 35px;
}
.indexMain4R1{
    width: 100%;
}
.indexMain4R1M{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}
.indexMain4R1M > a{
    width: 100%;
    font-size: 16px;
    color: #333333;
    line-height: 36px;
    font-weight: 400;
    display: flex;
    align-items: center;
    position: relative;
}
.indexMain4R1M > a::before{
    width: 1px;
    height: 36px;
    background-color: #F3F3F3;
    content: "";
    display: block;
    margin-left: 7px;
    margin-right: 17px;
}
.indexMain4R1M > a:first-of-type::before{
    height: 18px;
    margin-top: 18px;
}
.indexMain4R1M > a:last-of-type::before{
    height: 18px;
    margin-bottom: 18px;
}
.indexMain4R1M > a::after{
    position: absolute;
    top: 12px;
    left: 1px;
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: url(../images/icon12.png) no-repeat;
    background-size: contain;
}
.indexMain4R1M > a:hover span{
    background: linear-gradient(to right, #F64174, #FB5250);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.indexMain4R1M > a:hover::after{
    background: url(../images/icon12s.png) no-repeat;
    background-size: contain;
}
.indexMain4R2M{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
}
.indexMain4R2Ms{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.indexMain4R2Ms > a{
    display: block;
    width: 130px;
    height: 81px;
    border: 1px solid #F3F3F3;
    border-radius: 5px;
    overflow: hidden;
}
.indexMain4R2Ms > div{
    width: calc(100% - 150px);
    height: 81px;
    display: flex;
    flex-direction: column;
}
.indexMain4R2Ms > div > a{
    font-size: 16px;
    color: #333333;
    line-height: 18px;
    width: 100%;
}
.indexMain4R2Ms > div > p{
    font-size: 14px;
    color: #999999;
    line-height: 25px;
    height: 50px;
    margin-top: 13px;
    -webkit-line-clamp: 2;
}
.indexMain4R2Ms:hover > div > a{
    background: linear-gradient(to right, #F64174, #FB5250);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.indexMain5{
    width: 100%;
    margin-top: 35px;
}
.indexMain5M{
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.indexMain5M > a{
    font-size: 16px;
    color: #333333;
    line-height: 20px;
}
.indexMain5M > a:hover{
    color: #F13536;
}
main{
    padding-bottom: 20px;
}
footer{
    background: #333333;
    padding-top: 36px;
}
.footer1{
    width: 1366px;
    margin: 0 auto;
}
.footer1 > span{
    font-size: 22px;
    color: #777777;
    line-height: 26px;
    font-weight: bold;
    font-family: var(--font-sans);
    font-weight: 700;
}
.footer1 > div{
    width: 100%;
    margin-top: 35px;
    display: flex;
    justify-content: space-between;
}
.footer1 > div > div{
    width: 240px;
}
.footer1 > div > div b{
    display: block;
    font-size: 22px;
    line-height: 24px;
    background: linear-gradient(to right, #F64174, #FB5250);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-family: var(--font-sans);
    font-weight: 700;
}
.footer1 > div > div span{
    display: block;
    font-size: 18px;
    color: #9E9E9E;
    font-weight: bold;
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 20px;
    margin-top: 27px;
}
.footer1 > div > div p{
    font-size: 16px;
    color: #777777;
    line-height: 22px;
    margin-top: 15px;
}
.footer1 > div > span{
    display: block;
    width: 1px;
    height: 128px;
    background: #404040;
}
.footer2{
    width: 1366px;
    margin: 0 auto;
    margin-top: 50px;
    font-size: 14px;
    color: #6D6D6D;
    line-height: 18px;
    border-top: 1px solid #404040;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 25px 0;
}
.footer2 a{
    font-size: 14px;
    color: #6D6D6D;
    line-height: 18px;
}
.footer2 a:hover{
    color: #ffffff;
}
.article_list{
    width: 1366px;
    margin: 0 auto;
    margin-top: 25px;
}
.top_nav{
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 16px;
}
.top_nav > img{
    width: 13px;
    height: 17px;
    margin-right: 12px;
}
.top_nav > p{
    color: #999999;
}
.top_nav > a{
    color: #999999;
}
.top_nav > a:hover{
    background: linear-gradient(to right, #F64174, #FB5250);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

}
.top_nav > span{
    color: #333333;
}
.top_nav > b{
    font-weight: 400;
    margin: 0 4px;
    color: #999999;
}
.article_listM{
    width: 100%;
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
}
.article_listL{
    width: 976px;
}
.article_listLM{
    width: 100%;
    margin-top: 27px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 19px;
    row-gap: 24px;
}
.article_listLM > a,
.article_listL_btn{
    height: 35px;
    background: #F7F7F7;
    border-radius: 18px;
    border: 1px solid #F3F3F3;
    width: 123px;
    text-align: center;
    line-height: 35px;
    font-size: 16px;
    color: #333333;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: ease-out 0.3s;
    box-shadow: inset 0 0 0 0 #FFF3F6;
    background-color: #F7F7F7;
    background-image: linear-gradient(to right, #F64174, #FB5250), linear-gradient(#F7F7F7, #F7F7F7), linear-gradient(#F3F3F3, #F3F3F3);
    background-position: left bottom, left top, left top;
    background-repeat: no-repeat;
    background-origin: padding-box, padding-box, border-box;
    background-clip: padding-box, padding-box, border-box;
    background-size: 100% 0, 100% 100%, 100% 100%;
    border: 1px solid transparent;
}
.article_listLM > a:hover{
    background-image: linear-gradient(to right, #F64174, #FB5250), linear-gradient(#F7F7F7, #F7F7F7), linear-gradient(to right, #F64174, #FB5250);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    color: #ffffff;
}
.article_listLM > a.active{
    background: linear-gradient(to right, #F64174, #FB5250);
    color: #ffffff;
    font-weight: bold;
    font-family: var(--font-sans);
    font-weight: 700;
    border: 1px solid transparent;
    box-shadow: none;
}
.article_listL_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    background-color: #F7F7F7;
    background-image: linear-gradient(to right, #F64174, #FB5250), linear-gradient(#F7F7F7, #F7F7F7), linear-gradient(#F3F3F3, #F3F3F3);
    background-position: left bottom, left top, left top;
    background-repeat: no-repeat;
    background-origin: padding-box, padding-box, border-box;
    background-clip: padding-box, padding-box, border-box;
    background-size: 100% 0, 100% 100%, 100% 100%;
    border: 1px solid transparent;
    box-shadow: none;
}
.article_listL_btn::after{
    display: block;
    content: "";
    width: 11px;
    height: 7px;
    background: url(../images/icon15.png) no-repeat;
    background-size: contain;
}
.article_listL_btn:hover::after{
    background: url(../images/icon15s.png) no-repeat;
    background-size: contain;
}
.article_listL_btn:hover{
    background-image: linear-gradient(to right, #F64174, #FB5250), linear-gradient(#F7F7F7, #F7F7F7), linear-gradient(to right, #F64174, #FB5250);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    color: #ffffff;
    font-weight: bold;
    font-family: var(--font-sans);
    font-weight: 700;
}
.article_listL_btn.active::after{
    background: url(../images/icon16.png) no-repeat;
    background-size: contain;
}
.article_listL_btn.active:hover::after{
    background: url(../images/icon16s.png) no-repeat;
    background-size: contain;
}
.article_listLMs{
    margin-top: 5px;
}
.mngfPage {margin: 20px auto 0 auto;width: 100%;}
.mngfPage .page {display: flex;justify-content: center;align-items: center;gap: 15px;}
.page a {width: auto;display: flex;align-items: center;height: 31px;padding: 0 12px;font-size: 14px;color: #999999;
    background: #FFFFFF;border-radius: 3px 3px 3px 3px;border: 1px solid #E4E4E4;white-space: nowrap;
}
.page a.active,.page a:hover{color: #333;border-color: #333;}
.mngfPage .pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mngfPage .pagination li{
    margin: 0;
    padding: 0;
}
.mngfPage .pagination li > a,
.mngfPage .pagination li > span{
    width: auto;
    min-width: 31px;
    height: 31px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #999999;
    line-height: 31px;
    background: #FFFFFF;
    border-radius: 3px;
    border: 1px solid #E4E4E4;
    white-space: nowrap;
    box-sizing: border-box;
}
.mngfPage .pagination li > a:hover,
.mngfPage .pagination li.active > span{
    color: #333333;
    border-color: #333333;
}
.mngfPage .pagination li.disabled > span{
    cursor: not-allowed;
}
.article_listR{
    width: 350px;
    display: flex;
    flex-direction: column;
    gap: 35px;
    position: relative;
}
.indexMain4R2_placeholder{
    display: none;
}
.right_list1M{
    width: 100%;
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.right_list1s{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
}
.right_list1s > a{
    display: block;
    width: 64px;
    height: 64px;
    border: 1px solid #F3F3F3;
    border-radius: 15px;
    flex: 0 0 auto;
    overflow: hidden;
}
.right_list1s > div{
    width: calc(100% - 84px);
}
.right_list1s > div > div{
    font-size: 14px;
    color: #999999;
    line-height: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
}
.right_list1s > div > div b{
    width: 6px;
    height: 6px;
    background: #BABABA;
    border-radius: 50%;
}
.right_list1s > div > p{
    width: 100%;
    font-size: 14px;
    color: #999999;
    line-height: 16px;
    margin-top: 10px;
}
.right_list1s_title{
    width: 100%;
    font-size: 16px;
    color: #333333;
    line-height: 18px;
}
.right_list1s:hover .right_list1s_title{
    background: linear-gradient(to right, #F64174, #FB5250);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.article_listL > h1{
    font-size: 30px;
    color: #333333;
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 36px;
}
.article_info{
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.article_info span{
    font-size: 14px;
    color: #999999;
    line-height: 16px;
}
.article_line{
    width: 100%;
    height: 1px;
    background: #F3F3F3;
    display: block;
    margin-top: 20px;
}
.article_card_f{
    width: 100%;
    margin-top: 25px;
    border: 3px solid transparent;
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #E9C4CE, #FBCACA) border-box;
    border-radius: 10px;
    padding: 30px;
}
.article_card{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 30px;
}
.article_card_img{
    display: block;
    width: 105px;
    height: 105px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #F3F3F3;
}
.article_card > div{
    width: calc(100% - 135px);
}
.article_card_title,
.article_card_title h2{
    width: 100%;
    font-size: 18px;
    color: #333333;
    line-height: 20px;
    font-weight: bold;
    font-family: var(--font-sans);
    font-weight: 700;
}
.article_card > div p{
    width: 100%;
    font-size: 14px;
    color: #999999;
    line-height: 16px;
    margin-top: 17px;
}
.article_card_info{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 12px;
    overflow: hidden;
}
.article_card_btn{
    width: 200px;
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(to right, #F64174, #FB5250);
    font-size: 16px;
    color: #FFFFFF;
    line-height: 18px;
    font-weight: bold;
    font-family: var(--font-sans);
    font-weight: 700;
    flex: 0 0 auto;
    transition: ease-out 0.8s;
    box-shadow: inset 0 0 0 0 #FF0072;
}
.article_card_btn::before{
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images/icon17.png) no-repeat;
    background-size: contain;
}
.article_card_class{
    width: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}
.article_card_class > a{
    font-size: 12px;
    color: #FFFFFF;
    line-height: 20px;
    border-radius: 10px;
    flex: 0 0 auto;
    padding: 0 4px;
    transition: ease-out 0.8s;
    -webkit-user-drag: none;
    user-select: none;
}
.article_listL > .article_card_class > a{
    padding: 0 8px;
    line-height: 25px;
    border-radius: 13px;
}
.article_card_class > a:hover{
    color: #ffffff;
}
.article_card_class > a:nth-of-type(4n+1){
    background: #FF7700;
    box-shadow: inset 0 0 0 0 #FDA04E;
}
.article_card_class > a:nth-of-type(4n+2){
    background: #7CBF3B;
    box-shadow: inset 0 0 0 0 #00D651;
}
.article_card_class > a:nth-of-type(4n+3){
    background: #EA4336;
    box-shadow: inset 0 0 0 0 #FC675B;
}
.article_card_class > a:nth-of-type(4n+4){
    background: #0084FF;
    box-shadow: inset 0 0 0 0 #3DA0FD;
}
.article_card_class > a:nth-of-type(4n+1):hover{
    background: #FDA04E;
    box-shadow: inset 0 -100px 0 0 #FDA04E;
}
.article_card_class > a:nth-of-type(4n+2):hover{
    background: #00D651;
    box-shadow: inset 0 -100px 0 0 #00D651;
}
.article_card_class > a:nth-of-type(4n+3):hover{
    background: #FC675B;
    box-shadow: inset 0 -100px 0 0 #FC675B;
}
.article_card_class > a:nth-of-type(4n+4):hover{
    background: #3DA0FD;
    box-shadow: inset 0 -100px 0 0 #3DA0FD;
}
.article_card_infos{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #999999;
    line-height: 16px;
    flex: 0 0 auto;
}
.article_card_infos b{
    width: 6px;
    height: 6px;
    background: #BABABA;
    border-radius: 50%;
}
.article_card:hover{
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #F64174, #FB5250) border-box;
}
.article_card_title:hover{
    background: linear-gradient(to right, #F64174, #FB5250);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.article_card_btn:hover{
    color: white;
    box-shadow: inset 0 -100px 0 0 #FF0072;
}
.article_tips{
    width: 100%;
    margin-top: 25px;
    background: #FFF4F7;
    border-radius: 5px;
    padding: 15px 20px;
    padding-left: 25px;
    position: relative;
}
.article_tips::before{
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #FDA9C0, #FDCDCC);
    border-radius: 5px 0 0 5px;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
}
.article_tips p{
    font-size: 16px;
    color: #333333;
    line-height: 32px;
}
.article_central{
    width: 100%;
}
.article_central,
.article_central p,
.article_central div,
.article_central ul,
.article_central ol,
.article_central li{
    font-size: 16px;
    color: #333333;
    line-height: 32px;
    margin: 15px 0;
}
.article_central h2{
    font-weight: bold;
    font-size: 22px;
    color: #333333;
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 26px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.article_central h2::before{
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: url(../images/icon12s.png) no-repeat;
    background-size: contain;
}
.article_central h3{
    font-size: 18px;
    color: #333333;
    font-family: var(--font-sans);
    font-weight: 700;
    font-weight: bold;
    line-height: 20px;
    margin: 20px 0;
}
.article_central img{
    max-width: 100%;
    min-width: 50%;
    height: auto;
    display: block;
    margin: 20px 0;
}
.article_central table{
    width: 100%;
    margin: 20px 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #F3DDE4;
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0px 6px 18px 0px rgba(246,65,116,0.06);
}
.article_central table th,
.article_central table td{
    padding: 14px 18px;
    border-right: 1px solid #F7E5EA;
    border-bottom: 1px solid #F7E5EA;
    font-size: 15px;
    color: #333333;
    line-height: 24px;
    text-align: center !important;
    vertical-align: middle;
    word-break: break-word;
}
.article_central table th{
    background: #FFF4F7;
    color: #333333;
    font-family: var(--font-sans);
    font-weight: 700;
    font-weight: bold;
}
.article_central table tbody tr:nth-child(even) td{
    background: #FFFDFE;
}
.article_central table tbody tr:hover td{
    background: #FFF7FA;
}
.article_central table tr:last-child td{
    border-bottom: 0;
}
.article_central table th:last-child,
.article_central table td:last-child{
    border-right: 0;
}
.article_central pre{
    width: 100%;
    max-width: 100%;
    margin: 18px 0;
    padding: 18px 20px;
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
    border: 1px solid #FFD6E0;
    border-left: 4px solid #F64174;
    border-radius: 8px;
    background: #FFF8FA;
    box-shadow: 0px 6px 18px 0px rgba(246,65,116,0.08);
    color: #3A2E34;
    font-size: 14px;
    line-height: 24px;
    font-family: Consolas, "Liberation Mono", Menlo, Monaco, "Courier New", monospace;
    font-weight: 400;
    word-break: normal;
    overflow-wrap: normal;
}
.article_central pre::-webkit-scrollbar{
    height: 8px;
}
.article_central pre::-webkit-scrollbar-track{
    background: #FFF0F4;
    border-radius: 8px;
}
.article_central pre::-webkit-scrollbar-thumb{
    background: #F8A8BD;
    border-radius: 8px;
}
.article_central pre::-webkit-scrollbar-thumb:hover{
    background: #F64174;
}
.article_central pre code{
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
}
.article_central p code,
.article_central li code{
    padding: 2px 6px;
    border: 1px solid #FFD6E0;
    border-radius: 4px;
    background: #FFF2F6;
    color: #F64174;
    font-size: 14px;
    line-height: 1.6;
    font-family: Consolas, "Liberation Mono", Menlo, Monaco, "Courier New", monospace;
}
.article_notice{
    font-size: 16px;
    color: #F65D57;
    line-height: 18px;
    display: block;
    margin-top: 20px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-weight: bold;
}
.article_otherarticle{
    width: 100%;
    margin-top: 25px;
}
.article_otherarticle > span{
    font-size: 22px;
    color: #333333;
    line-height: 26px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-weight: bold;
}
.article_otherarticle > div{
    width: 100%;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.otherarticles{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}
.otherarticles > a{
    width: 700px;
    font-size: 16px;
    color: #333333;
    line-height: 36px;
    font-weight: 400;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.otherarticles > a span{
    width: auto;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.otherarticles > a::before{
    width: 1px;
    height: 36px;
    background-color: #F3F3F3;
    content: "";
    display: block;
    margin-left: 7px;
    margin-right: 17px;
}
.otherarticles:first-of-type > a::before{
    height: 18px;
    margin-top: 18px;
}
.otherarticles:last-of-type > a::before{
    height: 18px;
    margin-bottom: 18px;
}
.otherarticles > a::after{
    position: absolute;
    top: 12px;
    left: 1px;
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: url(../images/icon12.png) no-repeat;
    background-size: contain;
}
.otherarticles > a:hover span{
    background: linear-gradient(to right, #F64174, #FB5250);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.otherarticles > a:hover::after{
    background: url(../images/icon12s.png) no-repeat;
    background-size: contain;
}
.otherarticles > span{
    font-size: 14px;
    color: #999999;
    line-height: 36px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.otherarticles > span::before{
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: url(../images/icon5.png) no-repeat;
    background-size: contain;
}
.article_listL > .article_card_class{
    width: 100%;
    margin-top: 12px;
}
.article_nearby{
    width: 100%;
    height: 50px;
    background: #F8F8F8;
    border-radius: 3px;
    padding: 0 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
}
.article_nearby > div{
    width: calc(50% - 10px);
    display: flex;
    align-items: center;
    overflow: hidden;
}
.article_nearby > div span{
    font-size: 16px;
    color: #999999;
    line-height: 20px;
    flex: 0 0 auto;
}
.article_nearby > div  a{
    flex: 1;
    width: auto;
    font-size: 16px;
    color: #333333;
    line-height: 20px;
}
.article_nearby > div  a:hover{
    background: linear-gradient(to right, #F64174, #FB5250);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.article_related{
    width: 100%;
    margin-top: 35px;
}
.article_related .article_listLMs{
    margin-top: 0;
}
.topic_details{
    width: 100%;
    background: linear-gradient(to bottom, #FEECF1, #FEF6ED);
}
.topic_details > div{
    width: 1366px;
    margin: 0 auto;
    padding-top: 25px;
    padding-bottom: 30px;
}
.topic_details_top{
    width: 100%;
    margin-top: 25px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.topic_details_topimg{
    display: block;
    width: 240px;
    height: 140px;
    border-radius: 10px;
    border: 3px solid #FDCFDC;
    overflow: hidden;
}
.topic_details_top > div{
    width: calc(100% - 260px);
}
.topic_details_top_title{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    overflow: hidden;
}
.topic_details_top_title h1{
    flex: 1;
    width: auto;
    font-size: 22px;
    color: #333333;
    line-height: 26px;
    font-weight: bold;
    font-family: var(--font-sans);
    font-weight: 700;
}
.topic_details_top_title span{
    font-size: 12px;
    color: #999999;
    line-height: 14px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.topic_details_top > div p{
    font-size: 16px;
    color: #666666;
    line-height: 30px;
    height: 60px;
    -webkit-line-clamp: 2;
    margin-top: 18px;
}
.topic_details_top .article_card_class{
    margin-top: 18px;
}
.topic_detailsM{
    margin-top: 5px;
}
.topic_detailsM .article_listM{
    margin-top: 0;
}
.topic_right_card{
    width: 100%;
    border: 3px solid transparent;
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #E9C4CE, #FBCACA) border-box;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
}
.topic_right_card:hover{
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #F64174, #FB5250) border-box;
}
.topic_right_card_title:hover{
    background: linear-gradient(to right, #F64174, #FB5250);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.topic_right_card_btn:hover{
    color: white;
    box-shadow: inset 0 -100px 0 0 #FF0072;
}
.topic_right_card > a{
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 15px;
    border: 1px solid #F3F3F3;
    overflow: hidden;
}
.topic_right_card > div{
    width: calc(100% - 82px);
}
.topic_right_card_title{
    width: 100%;
    font-size: 16px;
    color: #333333;
    line-height: 18px;
}
.topic_right_card > div > div{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #999999;
    line-height: 14px;
    margin-top: 8px;
}
.topic_right_card > div > div b{
    width: 6px;
    height: 6px;
    background: #BABABA;
    border-radius: 50%;
}
.topic_right_card_btn{
    height: 30px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(to right, #F64174, #FB5250);
    font-size: 16px;
    color: #FFFFFF;
    line-height: 18px;
    padding: 0 16px;
    margin-top: 8px;
    transition: ease-out 0.8s;
    box-shadow: inset 0 0 0 0 #FF0072;
}
.topic_right_card_btn::before{
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images/icon17.png) no-repeat;
    background-size: contain;
}
.article_card_info .article_card_class{
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    flex-wrap: wrap;
}
.article_card_info .article_card_class.is-dragging{
    cursor: grabbing;
}
.article_card_info .article_card_class::-webkit-scrollbar {
    display: none;
}
.article_card_info .article_card_class > a{
    -webkit-user-drag: none;
    user-select: none;
}
.article_card_f > .article_card_class{
    width: 100%;
    margin-top: 20px;
    flex-wrap: wrap;
}
.main404{
    width: 1366px;
    margin: 0 auto;
    min-height: calc(100vh - 200px);
    margin-top: 20px;
}
.img_404{
    display: block;
    width: 457px;
    height: auto;
    margin: 0 auto;
    margin-top: 120px;
}
.p_404{
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #333333;
    line-height: 18px;
    margin-top: 50px;
}
.a_404{
    display: block;
    width: 120px;
    height: 40px;
    margin: 0 auto;
    margin-top: 40px;
    border-radius: 7px;
    background: linear-gradient(to right, #F64174, #FB5250);
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
}
.a_404:hover{
    background: #FF0072;
    color: #FFFFFF;
}
.article_card_price{
    display: flex;
    align-items: center;
    gap: 8px;
}
.article_card_price1{
    font-size: 18px;
    color: #FF0072;
    line-height: 22px;
    font-weight: 700;
    font-family: "poingfangB";
}
.article_card_price2{
    font-size: 14px;
    color: #999999;
    line-height: 18px;
    font-family: "poingfangB";
    font-weight: bold;
    text-decoration: line-through;
}
/* 确认弹层样式 */
.confirm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.confirm-modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    position: relative;
}
.confirm-modal-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}
.confirm-modal-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}
.confirm-modal-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.confirm-modal-btn {
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    border: none;
    transition: background-color 0.3s;
}
.confirm-modal-btn-cancel {
    background-color: #f5f5f5;
    color: #666;
}
.confirm-modal-btn-cancel:hover {
    background-color: #e8e8e8;
}
.confirm-modal-btn-confirm {
    background: linear-gradient(to right, #F64174, #FB5250);
    color: #fff;
}
.confirm-modal-btn-confirm:hover {
    background: linear-gradient(to right, #F64174, #FB5250);
}
.goto_url{
    font-size: 14px;
    color: #F64174;
    margin-bottom: 20px;
    width: 100%;
    word-break: break-all;
}