/* font */
@font-face {
    font-family: "msyh";
    src: url('../font/msyh.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: "msyhbd";
    src: url('../font/msyhbd.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: "msyhl";
    src: url('../font/msyhl.ttf') format('truetype');
    font-display: swap;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "msyh", "Microsoft YaHei", Arial, sans-serif;
}

img {
    object-fit: cover;
}

a {
    text-decoration: none;
    color: #000000;
}

li {
    list-style: none;
}
body{
    overflow-x: hidden;
}
.seo_hidden_h1{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* header */
.header1{
    width: 100%;
    height: 35px;
    background: #282E3B;
}
.header1 > div{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header1 > div > span{
    color: #AEB4BF;
    font-size: 12px;
    line-height: 14px;
    position: relative;
    padding-left: 10px;
}
.header1 > div > span::before{
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 5px;
    height: 5px;
    border-top: 2px solid #3399FB;
    border-left: 2px solid #3399FB;
}
.header1_nav{
    display: flex;
    align-items: center;
}
.header1_nav > a{
    display: inline-flex;
    align-items: center;
    color: #AEB4BF;
    font-size: 12px;
    line-height: 14px;
    padding: 0 15px;
    border-right: 1px solid #626469;
}
.header1_nav > a:last-child{
    border-right: none;
}
.header1_login{
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.header1_login img{
    width: 12px;
    height: auto;
}
.header1_login span{
    font-size: 12px;
    color: #AEB4BF;
    line-height: 14px;
}
.header1_main_nav{
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background-color: #FFA63E;
    gap: 6px;
}
.header1_main_nav img{
    width: 14px;
    height: auto;
}
.header1_main_nav span{
    font-size: 14px;
    line-height: 16px;
    color: #ffffff;
}
.header2{
    width: 100%;
    background: #ffffff;
}
.header2 > div{
    width: 1200px;
    padding: 20px 0;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header2_logo{
    display: flex;
    gap: 10px;
}
.header2_logo img{
    width: 64px;
    height: auto;
}
.header2_logo > div{
    display: flex;
    flex-direction: column;
}
.header2_logo > div > span:first-of-type{
    font-size: 44px;
    line-height: 44px;
    color: #333333;
    font-family: "msyhbd";
}
.header2_logo > div > span:last-of-type{
    font-size: 18px;
    color: #565656;
    line-height: 20px;
}
.header2_nav{
    display: flex;
    align-items: center;
    gap: 50px;
}
.header2_navs{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
}
.header2_navs > img{
    width: 46px;
    height: auto;
}
.header2_navs > span{
    font-size: 18px;
    color: #333333;
    line-height: 24px;
}
.header2_navs:hover > span{
    color: #3399FA;
}
.header3{
    width: 100%;
    height: 50px;
    background: #3399FB;
}
.header3 > div{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.header3 > div > a{
    font-size: 16px;
    color: #FFFFFF;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: background-color 0.18s ease;
}
.header3 > div > a:hover{
    background: #1E8BF3;
}

/* main */
.indexmain{
    width: 1200px;
    margin: 0 auto;
}
.indexhero{
    margin-top: 22px;
    min-height: 278px;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) 410px;
    gap: 18px;
    align-items: stretch;
}
.indexhero_main{
    padding: 30px 34px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 84% 20%, rgba(51,153,251,0.25) 0%, rgba(51,153,251,0) 36%),
        linear-gradient(135deg, #101827 0%, #162A46 54%, #0D1726 100%);
    position: relative;
    overflow: hidden;
}
.indexhero_main::after{
    content: "";
    position: absolute;
    right: -70px;
    bottom: -96px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 42px solid rgba(255,255,255,0.05);
}
.indexhero_kicker{
    display: inline-flex;
    height: 28px;
    align-items: center;
    padding: 0 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.92);
    font-size: 12px;
    line-height: 28px;
}
.indexhero_main h1{
    width: 500px;
    margin-top: 14px;
    font-size: 31px;
    line-height: 41px;
    color: #FFFFFF;
    font-family: "msyhbd";
    position: relative;
    z-index: 1;
}
.indexhero_main p{
    width: 500px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 24px;
    color: rgba(255,255,255,0.78);
    position: relative;
    z-index: 1;
}
.indexhero_points{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}
.indexhero_points span{
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.88);
    font-size: 11px;
    line-height: 24px;
}
.indexhero_actions{
    display: flex;
    gap: 12px;
    margin-top: 16px;
    position: relative;
    z-index: 1;
}
.indexhero_actions a{
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-family: "msyhbd";
}
.indexhero_actions a:first-child{
    color: #166ED4;
    background: #FFFFFF;
    box-shadow: 0 10px 22px rgba(255,255,255,0.16);
}
.indexhero_actions a:last-child{
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.08);
}
.indexhero_side{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.indexhero_card{
    min-height: 154px;
    padding: 18px 18px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F9FCFF 100%);
    border: 1px solid #E7EFF7;
    box-shadow: 0 10px 22px rgba(17, 69, 125, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
}
.indexhero_card:before{
    content: "";
    position: absolute;
    left: 18px;
    top: 0;
    width: 54px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #7BB9FF 0%, #3498FB 100%);
}
.indexhero_card:after{
    content: "";
    position: absolute;
    right: -24px;
    bottom: -34px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(52,152,251,0.12) 0%, rgba(52,152,251,0) 72%);
}
.indexhero_card:hover{
    transform: translateY(-2px);
    border-color: #D2E6FB;
    background: linear-gradient(180deg, #FFFFFF 0%, #F3F9FF 100%);
    box-shadow: 0 16px 32px rgba(17, 69, 125, 0.08);
}
.indexhero_card span{
    width: fit-content;
    height: 24px;
    padding: 0 9px;
    border-radius: 12px;
    background: #EEF7FF;
    border: 1px solid #DDEEFF;
    color: #3399FB;
    font-size: 12px;
    line-height: 22px;
    font-family: "msyhbd";
    position: relative;
    z-index: 1;
}
.indexhero_card strong{
    margin-top: 14px;
    font-size: 17px;
    line-height: 25px;
    color: #1A2637;
    font-family: "msyhbd";
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    position: relative;
    z-index: 1;
    transition: color 0.2s ease;
}
.indexhero_card em{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 26px;
    margin-top: auto;
    padding: 0 10px;
    border-radius: 13px;
    background: #F6FAFE;
    border: 1px solid #E3EDF7;
    font-size: 12px;
    line-height: 24px;
    color: #6B7A8D;
    font-style: normal;
    position: relative;
    z-index: 1;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.indexhero_card.strong{
    background: linear-gradient(180deg, #FFFFFF 0%, #EEF7FF 100%);
}
.indexhero_card:hover strong{
    color: #3399FB;
}
.indexhero_card:hover em{
    color: #3399FB;
    border-color: #D8E9FB;
    background: #EEF7FF;
}
.indexmain1{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}
.indexmain1 > a{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 10px;
    position: relative;
    padding-left: 5px;
}
.indexmain1 > a:first-of-type{
    padding-left: 0;
    justify-content: left;
    flex: 0 0 auto;
    padding-right: 30px;
}
.indexmain1 > a:last-of-type{
    justify-content: right;
    flex: 0 0 auto;
    padding-left: 30px;
}
.indexmain1 > a:first-of-type::before{
    display: none;
}
.indexmain1 > a::before{
    position: absolute;
    content: "";
    left: 0;
    top: 2px;
    width: 1px;
    height: 15px;
    background-color: #272727;
    transform: rotate(15deg);
}
.indexmain1 > a img{
    width: 18px;
    height: auto;
    filter: grayscale(100%);
    opacity: .8;
}
.indexmain1 > a span{
    font-size: 16px;
    color: #030303;
    line-height: 20px;
    font-family: "msyhbd";
}
.indexmain1 > a:hover img{
    filter: grayscale(0%);
    opacity: 1;
}
.indexmain1 > a:hover span{
    color: #3399FA;
}
.indexmain2{
    width: 100%;
    margin-top: 20px;
    background: #F5F5F5;
    border-radius: 8px;
    padding: 14px 0;
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}
.indexmain2::-webkit-scrollbar {
    display: none; /* Chrome / Safari */
  }
.indexmain2s{
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.indexmain2s img{
    width: 90px;
    height: 90px;
    border-radius: 20px;
}
.indexmain2s span{
    font-size: 14px;
    color: #333333;
    line-height: 19px;
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 5px;
    text-align: center;
}
.indexmain2 {
    cursor: grab;
}
.indexmain2.dragging {
    cursor: grabbing;
}
.indexmain3{
    width: 100%;
    margin-top: 22px;
    background: linear-gradient(181deg, #F8FBFF 0%, #FFFFFF 100%);
    border-radius: 18px;
    border: 1px solid #E7F0FA;
    padding: 24px;
    padding-top: 28px;
    box-shadow: 0 14px 36px rgba(17, 69, 125, 0.055);
}
.indexmain3_title{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.indexmain3_title img{
    width: 20px;
    height: auto;
}
.indexmain3_title h2{
    font-size: 24px;
    color: #0A0A0B;
    line-height: 31px;
    font-family: "msyhbd";
}
.indexmain3 > p{
    font-size: 14px;
    color: #6F7F92;
    line-height: 22px;
    text-align: center;
    margin-top: 10px;
}
.indexmain3 > span{
    display: block;
    width: 100%;
    height: 1px;
    background-color: #F2F7FF;
    margin-top: 20px;
}
.indexmain3_nav{
    width: 100%;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.indexmain3_nav > span{
    font-size: 13px;
    color: #5E6D7E;
    line-height: 20px;
}
.indexmain3_nav > a{
    font-size: 13px;
    color: #3498FB;
    line-height: 20px;
    transition: color 0.2s ease;
}
.indexmain3_nav > a:hover{
    color: #1F7DE8;
}
.indexmain3M{
    width: 100%;
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    gap: 22px;
}
.indexmain3M > div{
    width: 50%;
}
.indexmain3ML1{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.indexmain3ML1L{
    display: flex;
    align-items: center;
    gap: 8px;
}
.indexmain3ML1L img{
    width: 18px;
    height: auto;
}
.indexmain3ML1L > span:first-of-type{
    font-size: 16px;
    color: #0A0A0B;
    line-height: 22px;
    font-weight: 500;
    transition: color 0.2s ease;
}
.indexmain3ML1L > span:last-of-type{
    font-size: 12px;
    color: #314158;
    line-height: 22px;
    height: 22px;
    background: #E9F0F8;
    border-radius: 11px;
    padding: 0 9px;
}
.indexmain3ML_clean{
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;

}
.indexmain3ML_clean:hover img{
    filter: grayscale(0%);
}
.indexmain3ML_clean:hover span{
    color: #3498FB;
}
.indexmain3ML_clean img{
    width: 16px;
    height: auto;
    filter: grayscale(100%);
}
.indexmain3ML_clean span{
    font-size: 13px;
    color: #71717C;
    line-height: 19px;
}
.indexmain3ML2{
    width: 100%;
    margin-top: 16px;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #E7EEF6;
    padding: 18px;
    /* height: 300px; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}
.indexmain3ML2 textarea{
    width: 100%;
    height: 208px;
    font-size: 14px;
    color: #2F3C4C;
    line-height: 24px;
    resize: none;
    flex: 0 0 auto;
    border: none;
}
.indexmain3ML2 textarea:focus {
    outline: none;
}
.indexmain3ML2 textarea::placeholder{
    color: #8B8B93;
}
.indexmain3ML2_info{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}
.indexmain3ML2_infos{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.indexmain3ML2_infos1_show{
    height: 32px;
    background: #F7FAFD;
    border: 1px solid #E7EEF6;
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    padding-left: 9px;
    cursor: pointer;
}
.indexmain3ML2_infos1_show_img{
    width: 24px;
    height: auto;
    filter: grayscale(95%);
} 
.indexmain3ML2_infos1_show > span{
    font-size: 13px;
    color: #334255;
    line-height: 18px;
}
.indexmain3ML2_infos1_show > img:last-of-type{
    width: 10px;
    height: auto;
    margin-left: 5px;
}
.indexmain3ML2_infos1{
    position: relative;
}
.indexmain3ML2_infos1_hide{
    position: absolute;
    top: 32px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
    background: #FFFFFF;
    box-shadow: 0px 1px 2px 0px #E3EBF6;
    border-radius: 4px;
}
.indexmain3ML2_infos1_hides{
    display: flex;
    align-items: center;
    padding: 1px 5px;
    cursor: pointer;
}
.indexmain3ML2_infos1_hides:hover{
    background: #F1F8FF;
    border-radius: 4px;
}
.indexmain3ML2_infos1_hides.active{
    background: #F1F8FF;
    border-radius: 4px;
}
.indexmain3ML2_infos1_hides.active span{
    color: #3498FB;
}
.indexmain3ML2_infos1_hides.active img{
    filter: grayscale(0%);
}
.indexmain3ML2_infos1_hides img{
    width: 24px;
    height: auto;
    filter: grayscale(95%);
}
.indexmain3ML2_infos1_hides span{
    font-size: 14px;
    color: #333333;
    line-height: 19px;
    white-space: nowrap;
}
.indexmain3ML2_infos2{
    position: relative;
}
.indexmain3ML2_infos2_show{
    height: 32px;
    background: #F7FAFD;
    border: 1px solid #E7EEF6;
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    padding-left: 9px;
    cursor: pointer;
}
.indexmain3ML2_infos2_show_img{
    width: 24px;
    height: auto;
    filter: grayscale(95%);
} 
.indexmain3ML2_infos2_show > span{
    font-size: 13px;
    color: #334255;
    line-height: 18px;
}
.indexmain3ML2_infos2_show > img:last-of-type{
    width: 10px;
    height: auto;
    margin-left: 5px;
}
.indexmain3ML2_infos2_hide{
    position: absolute;
    top: 32px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
    background: #FFFFFF;
    box-shadow: 0px 1px 2px 0px #E3EBF6;
    border-radius: 4px;
}
.indexmain3ML2_infos2_hides{
    display: flex;
    align-items: center;
    padding: 3px 5px;
    cursor: pointer;
}
.indexmain3ML2_infos2_hides span{
    font-size: 14px;
    color: #333333;
    line-height: 19px;
    white-space: nowrap;
}
.indexmain3ML2_infos2_hides.active{
    background: #F1F8FF;
    border-radius: 4px;
}
.indexmain3ML2_infos2_hides.active span{
    color: #3498FB;
}
.indexmain3ML2_infos3{
    position: relative;
}
.indexmain3ML2_infos3_show{
    height: 32px;
    background: #F7FAFD;
    border: 1px solid #E7EEF6;
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    padding-left: 9px;
    cursor: pointer;
}
.indexmain3ML2_infos3_show_img{
    width: 24px;
    height: auto;
    filter: grayscale(95%);
} 
.indexmain3ML2_infos3_show > span{
    font-size: 13px;
    color: #334255;
    line-height: 18px;
}
.indexmain3ML2_infos3_show > img:last-of-type{
    width: 10px;
    height: auto;
    margin-left: 5px;
}
.indexmain3ML2_infos3_hide{
    position: absolute;
    top: 32px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
    background: #FFFFFF;
    box-shadow: 0px 1px 2px 0px #E3EBF6;
    border-radius: 4px;
}
.indexmain3ML2_infos3_hides{
    display: flex;
    align-items: center;
    padding: 3px 5px;
    cursor: pointer;
}
.indexmain3ML2_infos3_hides span{
    font-size: 14px;
    color: #333333;
    line-height: 19px;
    white-space: nowrap;
}
.indexmain3ML2_infos3_hides.active{
    background: #F1F8FF;
    border-radius: 4px;
}
.indexmain3ML2_infos3_hides.active span{
    color: #3498FB;
}
.indexmain3ML_btn{
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: linear-gradient( 270deg, #3351FB 0%, #3399FB 100%);
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(51, 119, 251, 0.24);
}
.indexmain3ML_btn img{
    width: 16px;
    height: auto;
}
.indexmain3ML_btn span{
    font-size: 13px;
    color: #FFFFFF;
    line-height: 18px;
}
.indexmain3ML2_infos1_hide,
.indexmain3ML2_infos2_hide,
.indexmain3ML2_infos3_hide {
  display: none;
}

/* 显示状态 */
.indexmain3ML2_infos1_hide.show,
.indexmain3ML2_infos2_hide.show,
.indexmain3ML2_infos3_hide.show {
  display: flex;
}
.indexmain3MR_title{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.indexmain3MR_title > div{
    display: flex;
    align-items: center;
    gap: 8px;
}
.indexmain3MR_title > div img{
    width: 18px;
    height: auto;
}
.indexmain3MR_title > div  span{
    font-size: 16px;
    color: #0A0A0B;
    line-height: 22px;
    font-weight: bold;
    transition: color 0.2s ease;
}
.indexmain3MR_history{
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
.indexmain3MR_history img{
    width: 17px;
    height: auto;
    filter: grayscale(100%);
}
.indexmain3MR_history:hover img{
    filter: grayscale(0%);
}
.indexmain3MR_history span{
    font-size: 13px;
    color: #71717C;
    line-height: 16px;
}
.indexmain3MR_history:hover span{
    color: #3498FB;
}
.indexmain3MR_M{
    width: 100%;
    margin-top: 16px;
    height: 302px;
    position: relative;
}
.indexmain3MR_M textarea{
    width: 100%;
    height: 100%;
    background: #F5FAFF;
    border-radius: 10px;
    border: 1px solid #D6E3F6;
    border: none;
    resize: none;
    padding: 18px;
    font-size: 14px;
    color: #2F3C4C;
    line-height: 22px;
}
.indexmain3MR_M textarea:focus {
    outline: none;
}
.indexmain3MR_M_blocking{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.indexmain3MR_M_blocking img{
    width: 22px;
    height: auto;
    margin-bottom: 18px;
}
.indexmain3MR_M_blocking span{
    font-size: 14px;
    color: #8B8B93;
    line-height: 22px;
    text-align: center;
}
.indexmain3MR_M_copy,
.indexmain3MR_M_like,
.indexmain3MR_M_like_test{
    position: absolute;
    bottom: 20px;
    border: none;
    background-color: transparent;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.indexmain3MR_M_copy{
    right: 88px;
}
.indexmain3MR_M_like{
    right: 54px;
}
.indexmain3MR_M_like_test{
    right: 20px;
}
.indexmain3MR_M_copy img,
.indexmain3MR_M_like img,
.indexmain3MR_M_like_test img{
    width: 100%;
    height: 100%;
    filter: grayscale(95%);
}
.indexmain3MR_M_copy:hover img,
.indexmain3MR_M_like:hover img,
.indexmain3MR_M_like_test:hover img{
    filter: grayscale(0%);
}
.indexmain3MR_M_like.active img{
    filter: grayscale(0%) !important;
}
.indexmain4{
    width: 100%;
    margin-top: 50px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}
.indexmain4_top{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 0;
    border-bottom: none;
    flex-wrap: wrap;
}
.indexmain4_title{
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.indexmain4_title img{
    width: 24px;
    height: auto;
}
.indexmain4_title h2{
    font-size: 24px;
    color: #000000;
    line-height: 30px;
    font-weight: 700;
}
.indexmain4_topnav{
    flex: 1 1 520px;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-height: 36px;
}
.indexmain4_topnav > a{
    font-size: 14px;
    color: #5D6B7C;
    line-height: 34px;
    padding: 0 14px;
    border: 1px solid #E5ECF4;
    background: #FFFFFF;
    border-radius: 17px;
    transition: all 0.2s;
}
.indexmain4_topnav > a:hover{
    color: #3498FB;
    background: #F5FAFF;
    border: 1px solid #CFE2F6;
}
.indexmain4_topnav > a.active{
    color: #3498FB;
    background: #F5FAFF;
    border: 1px solid #3498FB;
    box-shadow: 0 6px 16px rgba(52, 152, 251, 0.12);
    font-weight: 600;
}
.indexmain4_more{
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-top: 7px;
}
.indexmain4_more span{
    font-size: 14px;
    color: #3498FB;
    line-height: 20px;
}
.indexmain4_more img{
    width: 7px;
    height: auto;
}
.indexmain4_bottom{
    width: 100%;
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    overflow: hidden;
}
.indexmain4s{
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #EEF2F7;
    box-shadow: 0px 8px 24px rgba(17, 69, 125, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
}
.indexmain4s:hover{
    transform: translateY(-2px);
    border-color: #D8E9FB;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 100%);
    box-shadow: 0px 12px 28px rgba(17, 69, 125, 0.07);
}
.indexmain4s1{
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.indexmain4s1 > span{
    flex: 1;
    width: auto;
    font-size: 17px;
    color: #2F3C4C;
    line-height: 25px;
    font-family: "msyhbd";
    min-height: 50px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
.indexmain4s:hover .indexmain4s1 > span,
.indexmain4s .indexmain4s1 > span:hover{
    color: #3399FB;
}
.indexmain4s1 > div{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    padding: 5px 10px;
    border-radius: 14px;
    background: #EDF6FF;
}
.indexmain4s1 > div img{
    width: 11px;
    height: auto;
}
.indexmain4s1 > div span{
    font-size: 12px;
    color: #3399FB;
    line-height: 16px;
}
.indexmain4s2{
    width: 100%;
    margin-top: 14px;
    padding: 0;
}
.indexmain4s2 > div{
    background: transparent;
    border-radius: 0;
    width: 100%;
    padding: 0;
}
.indexmain4s2 > div p{
    width: 100%;
    font-size: 14px;
    color: #677587;
    line-height: 24px;
    min-height: 72px;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.indexmain4s3{
    display: none;
}
.indexmain4s4{
    width: 100%;
    margin-top: 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    overflow: hidden;
}
.indexmain4s4 span{
    font-size: 12px;
    color: #7B8794;
    line-height: 16px;
    padding: 6px 10px;
    background: #F7F9FB;
    border-radius: 14px;
}
.indexmain4s5{
    width: 100%;
    margin-top: auto;
    border-top: none;
    padding: 18px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
}
.indexmain4s5 > button{
    width: auto;
    min-width: 0;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    height: auto;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s, transform 0.2s;
}
.indexmain4s5 > button:hover{
    transform: translateY(-1px);
}
.indexmain4s5 > button img{
    width: 15px;
    height: auto;
}
.indexmain4s5 > button span{
    font-size: 14px;
    color: #3399FB;
    line-height: 18px;
}
.indexmain4s5 > button:hover span{
    color: #1F69C8;
}
.indexmain4s_copy.copied:hover{
    background: #FFFFFF;
}
.indexmain4s_copy.copied span{
    color: #3498FB;
}
.indexmain4s_copy.copied:hover span{
    color: #3498FB;
}
.indexmain4s_like.active span{
    color: #FF7E00;
}
.homecontent,
.homeapps,
.hometopics{
    width: 100%;
    margin-top: 46px;
}
.homecontent_head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}
.homecontent_head span{
    display: block;
    font-size: 13px;
    line-height: 18px;
    color: #3399FB;
    font-family: "msyhbd";
}
.homecontent_head h2{
    margin-top: 6px;
    font-size: 26px;
    line-height: 34px;
    color: #111C2C;
    font-family: "msyhbd";
}
.homecontent_head > a{
    font-size: 14px;
    line-height: 20px;
    color: #3399FB;
}
.homecontent_grid{
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1.15fr 1fr 0.88fr;
    gap: 18px;
}
.homecontent_panel{
    min-height: 300px;
    padding: 18px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid #E8EFF7;
    box-shadow: 0 12px 30px rgba(17, 69, 125, 0.05);
}
.homecontent_feature{
    padding: 0;
    overflow: hidden;
}
.homecontent_feature img{
    width: 100%;
    height: 178px;
    object-fit: cover;
    display: block;
}
.homecontent_feature div{
    padding: 18px;
}
.homecontent_feature span{
    font-size: 13px;
    line-height: 18px;
    color: #3399FB;
    font-family: "msyhbd";
}
.homecontent_feature h3{
    margin-top: 9px;
    font-size: 22px;
    line-height: 31px;
    color: #172335;
    font-family: "msyhbd";
}
.homecontent_feature p{
    margin-top: 8px;
    font-size: 14px;
    line-height: 24px;
    color: #66778A;
}
.homecontent_feature a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    margin-top: 14px;
    padding: 0 16px;
    border-radius: 17px;
    background: #EEF7FF;
    color: #2288EC;
    font-size: 13px;
    font-family: "msyhbd";
}
.homecontent_listhead{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.homecontent_listhead strong{
    font-size: 20px;
    line-height: 28px;
    color: #172335;
    font-family: "msyhbd";
}
.homecontent_listhead a{
    font-size: 13px;
    color: #3399FB;
}
.homecontent_links{
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.homecontent_links a{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #F0F4F8;
}
.homecontent_links span{
    flex: 1;
    min-width: 0;
    font-size: 15px;
    line-height: 22px;
    color: #334255;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.homecontent_links em{
    font-style: normal;
    font-size: 12px;
    color: #9AA6B6;
}
.homecontent_rank{
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.homecontent_rank a{
    display: flex;
    align-items: center;
    gap: 10px;
}
.homecontent_rank b{
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: #EEF7FF;
    color: #3399FB;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    font-family: "msyhbd";
    flex: 0 0 auto;
}
.homecontent_rank span{
    flex: 1;
    min-width: 0;
    font-size: 15px;
    line-height: 22px;
    color: #334255;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.homeapps_grid{
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.homeapps_grid a{
    min-height: 150px;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 100%);
    border: 1px solid #E8EFF7;
    box-shadow: 0 12px 30px rgba(17, 69, 125, 0.045);
}
.homeapps_grid strong{
    display: block;
    font-size: 20px;
    line-height: 28px;
    color: #172335;
    font-family: "msyhbd";
}
.homeapps_grid p{
    margin-top: 10px;
    font-size: 14px;
    line-height: 23px;
    color: #66778A;
}
.homeapps_grid span{
    display: inline-flex;
    margin-top: 16px;
    height: 30px;
    align-items: center;
    padding: 0 12px;
    border-radius: 15px;
    background: #EEF7FF;
    color: #2288EC;
    font-size: 13px;
}
.hometopics_grid{
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.hometopics_grid a{
    display: block;
    padding: 12px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid #E8EFF7;
    box-shadow: 0 12px 30px rgba(17, 69, 125, 0.045);
}
.hometopics_grid img{
    width: 100%;
    height: 145px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
}
.hometopics_grid strong{
    display: block;
    margin-top: 12px;
    font-size: 20px;
    line-height: 28px;
    color: #172335;
    font-family: "msyhbd";
}
.hometopics_grid span{
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 22px;
    color: #66778A;
}
.indexmain5,
.indexmain6,
.indexmain7{
    display: none;
}

/* restrained homepage content layout */
.homecontent_head span{
    color: #6A7A8D;
    font-size: 12px;
    letter-spacing: 1px;
}
.homecontent_head h2{
    font-size: 25px;
    line-height: 33px;
}
.homecontent_board{
    margin-top: 20px;
    display: grid;
    grid-template-columns: 315px minmax(0, 1fr) 250px;
    gap: 24px;
    padding: 22px 0;
    border-top: 2px solid #172335;
    border-bottom: 1px solid #E8EEF5;
}
.homecontent_lead{
    padding-right: 24px;
    border-right: 1px solid #E8EEF5;
}
.homecontent_lead > span{
    font-size: 13px;
    line-height: 18px;
    color: #3399FB;
    font-family: "msyhbd";
}
.homecontent_lead h3{
    margin-top: 12px;
    font-size: 24px;
    line-height: 34px;
    color: #172335;
    font-family: "msyhbd";
}
.homecontent_lead p{
    margin-top: 12px;
    font-size: 14px;
    line-height: 25px;
    color: #66778A;
}
.homecontent_lead div{
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.homecontent_lead em{
    font-style: normal;
    font-size: 13px;
    color: #9AA6B6;
}
.homecontent_lead a{
    font-size: 14px;
    color: #2288EC;
    font-family: "msyhbd";
}
.homecontent_columns{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.homecontent_column + .homecontent_column{
    padding-left: 20px;
    border-left: 1px solid #E8EEF5;
}
.homecontent_column .homecontent_listhead{
    padding-bottom: 10px;
    border-bottom: 1px solid #E8EEF5;
}
.homecontent_column .homecontent_listhead strong{
    font-size: 18px;
    line-height: 26px;
}
.homecontent_column .homecontent_links a{
    border-bottom: 1px dashed #E8EEF5;
}
.homecontent_mini{
    padding-left: 24px;
    border-left: 1px solid #E8EEF5;
}
.homecontent_miniitem{
    display: block;
    padding: 13px 0;
    border-bottom: 1px dashed #E8EEF5;
}
.homecontent_miniitem > span{
    display: inline-flex;
    height: 22px;
    align-items: center;
    padding: 0 8px;
    border-radius: 11px;
    background: #F2F7FC;
    color: #3399FB;
    font-size: 12px;
    line-height: 22px;
}
.homecontent_miniitem strong{
    display: block;
    margin-top: 8px;
    font-size: 15px;
    line-height: 23px;
    color: #334255;
    font-family: "msyhbd";
}
.homeapps_tabs{
    display: flex;
    align-items: center;
    gap: 8px;
}
.homeapps_tabs a{
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    background: #F7FAFD;
    border: 1px solid #E5ECF5;
    color: #64758A;
    font-size: 13px;
    line-height: 32px;
}
.homeapps_tabs a.active,
.homeapps_tabs a:hover{
    color: #3399FB;
    border-color: #CFE3FA;
    background: #EEF7FF;
    font-family: "msyhbd";
}
.homeapps_list{
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #172335;
    border-left: 1px solid #E8EEF5;
}
.homeapps_list a{
    min-height: 142px;
    padding: 18px;
    background: #FFFFFF;
    border-right: 1px solid #E8EEF5;
    border-bottom: 1px solid #E8EEF5;
}
.homeapps_list strong{
    display: block;
    font-size: 18px;
    line-height: 26px;
    color: #172335;
    font-family: "msyhbd";
}
.homeapps_list p{
    margin-top: 10px;
    font-size: 14px;
    line-height: 23px;
    color: #66778A;
}
.homeapps_list span{
    display: inline-flex;
    margin-top: 16px;
    color: #2288EC;
    font-size: 13px;
}
.hometopics_list{
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #172335;
    border-bottom: 1px solid #E8EEF5;
}
.hometopics_list a{
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 18px;
    background: #FFFFFF;
    border-right: 1px solid #E8EEF5;
}
.hometopics_list em{
    grid-row: span 2;
    font-size: 22px;
    line-height: 28px;
    color: #D0D7E1;
    font-style: normal;
    font-family: "msyhbd";
}
.hometopics_list strong{
    display: block;
    font-size: 19px;
    line-height: 27px;
    color: #172335;
    font-family: "msyhbd";
}
.hometopics_list span{
    display: block;
    grid-column: 2;
    font-size: 14px;
    line-height: 22px;
    color: #66778A;
}

/* homepage section layout refinement */
.homecontent_board{
    grid-template-columns: minmax(0, 1fr) 300px;
    padding-top: 18px;
    padding-bottom: 0;
    border-top: 1px solid #E1EAF3;
    border-bottom: none;
}
.homecontent_maincol{
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 24px;
}
.homecontent_sidecol{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.homecontent_sidecol .homecontent_mini{
    padding: 16px;
    border: 1px solid #E8EEF5;
    border-radius: 12px;
    background: #FFFFFF;
}
.homecontent_sidecol .homecontent_mini_plain{
    background: #F8FBFE;
}
.homecontent_tags{
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}
.homecontent_tags a{
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #E3ECF5;
    color: #64758A;
    font-size: 13px;
    line-height: 28px;
}
.homeapps_list{
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #E1EAF3;
    border-left: none;
}
.homeapps_list a{
    min-height: 0;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 72px 210px minmax(0, 1fr) 86px;
    align-items: center;
    gap: 18px;
    background: #FFFFFF;
    border-right: none;
    border-bottom: 1px solid #E8EEF5;
}
.homeapps_list em{
    display: inline-flex;
    width: 54px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #EEF7FF;
    color: #2288EC;
    font-size: 13px;
    font-style: normal;
}
.homeapps_list p,
.homeapps_list span{
    margin-top: 0;
}
.homeapps_list span{
    justify-self: end;
}
.hometopics_list{
    margin-top: 18px;
    border-top: none;
    border-bottom: none;
    gap: 16px;
}
.hometopics_list a{
    border: 1px solid #E8EEF5;
    border-radius: 12px;
}

/* image-led content variants */
.homecontent_cover{
    position: relative;
    height: 220px;
    border-radius: 14px;
    overflow: hidden;
    background: #172335;
    box-shadow: 0 16px 32px rgba(23, 35, 53, 0.16);
}
.homecontent_cover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
}
.homecontent_cover:after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 21, 36, 0.08) 0%, rgba(10, 21, 36, 0.88) 100%);
}
.homecontent_cover div{
    position: absolute;
    z-index: 1;
    left: 16px;
    right: 16px;
    bottom: 16px;
    margin-top: 0;
    display: block;
}
.homecontent_cover span{
    display: inline-flex;
    height: 24px;
    align-items: center;
    padding: 0 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #FFFFFF;
    font-size: 12px;
    line-height: 24px;
    backdrop-filter: blur(8px);
}
.homecontent_cover h3{
    margin-top: 9px;
    font-size: 22px;
    line-height: 30px;
    color: #FFFFFF;
    font-family: "msyhbd";
}
.homecontent_links{
    gap: 0;
}
.homecontent_links a{
    min-height: 70px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 11px;
}
.homecontent_links a > img{
    width: 78px;
    height: 54px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
}
.homecontent_links span{
    flex: 1;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.homecontent_links em{
    flex: 0 0 auto;
}
.homecontent_miniimg{
    position: relative;
    width: 100%;
    height: 94px;
    border-radius: 11px;
    overflow: hidden;
    background: #172335;
    margin-bottom: 10px;
}
.homecontent_miniimg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.homecontent_miniimg:after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 21, 36, 0.04) 0%, rgba(10, 21, 36, 0.72) 100%);
}
.homecontent_miniimg span{
    position: absolute;
    z-index: 1;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    height: 22px;
    align-items: center;
    padding: 0 8px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    font-size: 12px;
    line-height: 22px;
    backdrop-filter: blur(8px);
}
.homecontent_miniitem strong{
    margin-top: 0;
}
.homeapps_list a{
    grid-template-columns: 46px 72px 210px minmax(0, 1fr) 86px;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.homeapps_list a > img{
    width: 42px;
    height: 42px;
    border-radius: 11px;
    object-fit: cover;
    background: #F2F7FC;
}
.homeapps_list a:hover{
    background: #F8FBFE;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(23, 35, 53, 0.06);
}
.hometopics_list a{
    position: relative;
    display: block;
    min-height: 190px;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #172335;
    box-shadow: 0 16px 30px rgba(23, 35, 53, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hometopics_list a > img{
    width: 100%;
    height: 190px;
    border-radius: 14px;
    object-fit: cover;
    display: block;
    opacity: 0.94;
    transition: transform 0.25s ease;
}
.hometopics_list a:after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 17, 30, 0.08) 0%, rgba(7, 17, 30, 0.86) 100%);
}
.hometopics_list a:hover{
    transform: translateY(-3px);
    box-shadow: 0 22px 42px rgba(23, 35, 53, 0.18);
}
.hometopics_list a:hover > img{
    transform: scale(1.04);
}
.hometopics_list em{
    position: absolute;
    z-index: 1;
    top: 16px;
    left: 16px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 24px;
    line-height: 28px;
}
.hometopics_list strong{
    position: absolute;
    z-index: 1;
    left: 18px;
    right: 18px;
    bottom: 48px;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 28px;
}
.hometopics_list span{
    position: absolute;
    z-index: 1;
    left: 18px;
    right: 18px;
    bottom: 18px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 14px;
    line-height: 22px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* PC homepage editorial rebuild */
.homemag,
.homefeed,
.homewide,
.homevisual{
    width: 100%;
    margin-top: 48px;
}
.homemag_head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}
.homemag_head span,
.homewide_text span{
    display: block;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
    color: #3399FB;
    font-family: "msyhbd";
}
.homemag_head h2,
.homefeed_title h2,
.homewide_text h2{
    margin-top: 4px;
    font-size: 24px;
    line-height: 32px;
    color: #000000;
    font-family: "msyhbd";
}
.homemag_head > a,
.homefeed_title a{
    height: 34px;
    padding: 0 15px;
    border-radius: 17px;
    background: #EEF7FF;
    color: #2288EC;
    font-size: 13px;
    line-height: 34px;
    font-family: "msyhbd";
}
.homemag_grid{
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) 360px;
    gap: 20px;
    min-height: 360px;
}
.homemag_cover,
.homemag_stack a,
.homevisual_grid a{
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #F5FAFF;
    border: 1px solid #F2F7FF;
    display: block;
}
.homemag_cover img,
.homemag_stack img,
.homevisual_grid img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.32s ease;
}
.homemag_cover:after,
.homemag_stack a:after,
.homevisual_grid a:after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(19, 34, 54, 0.04) 0%, rgba(12, 25, 42, 0.72) 100%);
}
.homemag_cover:hover img,
.homemag_stack a:hover img,
.homevisual_grid a:hover img{
    transform: scale(1.045);
}
.homemag_cover div{
    position: absolute;
    z-index: 1;
    left: 28px;
    right: 28px;
    bottom: 26px;
}
.homemag_cover em,
.homemag_stack span,
.homevisual_grid em{
    display: inline-flex;
    height: 26px;
    align-items: center;
    padding: 0 10px;
    border-radius: 4px;
    background: #3498FB;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 26px;
    font-style: normal;
}
.homemag_cover h3{
    width: 82%;
    margin-top: 12px;
    font-size: 30px;
    line-height: 42px;
    color: #FFFFFF;
    font-family: "msyhbd";
}
.homemag_cover p{
    width: 72%;
    margin-top: 12px;
    font-size: 15px;
    line-height: 27px;
    color: rgba(255, 255, 255, 0.86);
}
.homemag_stack{
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.homemag_stack a strong{
    position: absolute;
    z-index: 1;
    left: 18px;
    right: 18px;
    bottom: 18px;
    font-size: 19px;
    line-height: 28px;
    color: #FFFFFF;
    font-family: "msyhbd";
}
.homemag_stack span{
    position: absolute;
    z-index: 1;
    left: 20px;
    top: 18px;
}
.homefeed{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 500px;
    gap: 28px;
    align-items: start;
}
.homefeed_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    border-radius: 8px 8px 0 0;
    background: #F8FBFF;
    border: 1px solid #F2F7FF;
    border-bottom: none;
}
.homefeed_list{
    display: flex;
    flex-direction: column;
    padding: 0 18px;
    border: 1px solid #F2F7FF;
    border-radius: 0 0 8px 8px;
    background: #FFFFFF;
}
.homefeed_list a{
    display: grid;
    grid-template-columns: 146px minmax(0, 1fr);
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #E8EEF5;
}
.homefeed_list img{
    width: 146px;
    height: 96px;
    border-radius: 6px;
    object-fit: cover;
}
.homefeed_list strong{
    display: block;
    font-size: 17px;
    line-height: 25px;
    color: #222222;
    font-family: "msyhbd";
}
.homefeed_list p{
    margin-top: 7px;
    font-size: 14px;
    line-height: 23px;
    color: #66778A;
}
.homefeed_list span{
    display: block;
    margin-top: 10px;
    font-size: 12px;
    line-height: 18px;
    color: #9AA6B6;
}
.homecourse_grid{
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0 18px 18px;
    border: 1px solid #F2F7FF;
    border-radius: 0 0 8px 8px;
    background: #FFFFFF;
}
.homecourse_grid a{
    min-height: 206px;
    display: flex;
    flex-direction: column;
    padding: 16px 10px 0;
}
.homecourse_grid img{
    width: 100%;
    height: 124px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}
.homecourse_grid strong{
    margin-top: 11px;
    font-size: 16px;
    line-height: 24px;
    color: #222222;
    font-family: "msyhbd";
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.homecourse_grid span{
    margin-top: auto;
    padding-top: 9px;
    font-size: 12px;
    color: #3399FB;
}
.homewide{
    min-height: 210px;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
    padding: 26px;
    border-radius: 10px;
    background: linear-gradient(180deg, #F5FAFF 0%, #FFFFFF 100%);
    border: 1px solid #F2F7FF;
    overflow: hidden;
    position: relative;
}
.homewide:after{
    content: "";
    position: absolute;
    right: -90px;
    top: -120px;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    border: 55px solid rgba(52, 152, 251, 0.06);
}
.homewide_text{
    position: relative;
    z-index: 1;
}
.homewide_text h2{
    color: #000000;
}
.homewide_text p{
    margin-top: 12px;
    font-size: 15px;
    line-height: 27px;
    color: #66778A;
}
.homewide_items{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.homewide_items a{
    min-height: 78px;
    padding: 16px 18px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid #E8EEF5;
}
.homewide_items em{
    float: right;
    font-style: normal;
    font-size: 12px;
    color: #3399FB;
}
.homewide_items strong{
    display: block;
    font-size: 18px;
    line-height: 26px;
    color: #222222;
    font-family: "msyhbd";
}
.homewide_items span{
    display: block;
    margin-top: 7px;
    font-size: 13px;
    line-height: 20px;
    color: #66778A;
}
.homevisual_grid{
    display: grid;
    grid-template-columns: 1.18fr repeat(2, minmax(0, 1fr));
    grid-auto-rows: 196px;
    gap: 16px;
}
.homevisual_grid a.large{
    grid-row: span 2;
}
.homevisual_grid div{
    position: absolute;
    z-index: 1;
    left: 20px;
    right: 20px;
    bottom: 20px;
}
.homevisual_grid strong{
    display: block;
    margin-top: 9px;
    font-size: 20px;
    line-height: 28px;
    color: #FFFFFF;
    font-family: "msyhbd";
}
.homevisual_grid .large strong{
    font-size: 28px;
    line-height: 38px;
}
.homevisual_grid span{
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.74);
}

/* homepage unified card system */
.homeuniform{
    width: 100%;
    margin-top: 50px;
}
.homeuniform_feature{
    width: 100%;
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 20px;
    align-items: stretch;
}
.homeuniform_side{
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 20px;
    min-height: 316px;
}
.homeuniform_grid{
    width: 100%;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.homeuniform_grid_rest{
    margin-top: 20px;
}
.homeuniform_card{
    min-height: 278px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #F2F7FF;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.homeuniform_card:hover,
.hometool_grid a:hover,
.hometopic_grid a:hover{
    transform: translateY(-2px);
    border-color: #D8E9FB;
    box-shadow: 0 12px 28px rgba(17, 69, 125, 0.07);
}
.homeuniform_card_big{
    min-height: 316px;
    position: relative;
    display: block;
}
.homeuniform_card_big:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(180deg, rgba(10, 20, 32, 0) 0%, rgba(10, 20, 32, 0.36) 100%);
    pointer-events: none;
}
.homeuniform_card_top{
    min-height: 148px;
}
.homeuniform_card img{
    width: 100%;
    height: 142px;
    display: block;
    object-fit: cover;
}
.homeuniform_card_big img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.homeuniform_card_top img{
    height: 90px;
}
.homeuniform_card > div{
    flex: 1;
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
}
.homeuniform_card span,
.hometopic_grid span{
    width: fit-content;
    height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    background: #F5FAFF;
    border: 1px solid #E2F0FF;
    color: #3498FB;
    font-size: 12px;
    line-height: 22px;
}
.homeuniform_card strong{
    margin-top: 11px;
    font-size: 16px;
    line-height: 24px;
    color: #222222;
    font-family: "msyhbd";
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.homeuniform_card_big strong{
    font-size: 18px;
    line-height: 26px;
    color: #FFFFFF;
    -webkit-line-clamp: 2;
}
.homeuniform_card p{
    margin-top: 9px;
    font-size: 13px;
    line-height: 21px;
    color: #66778A;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.homeuniform_card_big > div{
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    padding: 0;
    flex: 0 0 auto;
    background: transparent;
    z-index: 1;
}
.homeuniform_card_big p{
    margin-top: 3px;
    font-size: 12px;
    line-height: 17px;
    color: rgba(255, 255, 255, 0.9);
    -webkit-line-clamp: 2;
}
.homeuniform_card_big span{
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
}
.hometool_grid{
    width: 100%;
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
}
.hometool_grid a{
    min-height: 96px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #F2F7FF;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.hometool_grid img{
    width: 64px;
    height: 64px;
    display: block;
    object-fit: cover;
    border-radius: 14px;
    background: #F5FAFF;
    box-shadow: 0 8px 18px rgba(17, 69, 125, 0.08);
}
.hometool_grid strong{
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: #222222;
    font-family: "msyhbd";
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hometool_grid p{
    margin-top: 8px;
    font-size: 13px;
    line-height: 20px;
    color: #66778A;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.hometool_tabs{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.hometool_tabs a{
    height: 32px;
    padding: 0 16px;
    border-radius: 16px;
    background: #FFFFFF;
    color: #333333;
    font-size: 13px;
    line-height: 32px;
    border: 1px solid #F2F7FF;
}
.hometool_tabs a.active,
.hometool_tabs a:hover{
    color: #3498FB;
    background: #EAF4FF;
    border-color: #D8E9FB;
}
.hometopic_grid{
    width: 100%;
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.hometopic_grid a{
    min-height: 124px;
    position: relative;
    overflow: hidden;
    padding: 0;
    background: #0F1826;
    border-radius: 10px;
    border: 1px solid #EDF4FB;
    transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.hometopic_grid img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.28s ease;
}
.hometopic_grid a:hover img{
    transform: scale(1.04);
}
.hometopic_grid a:after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 20, 32, 0.08) 0%, rgba(10, 20, 32, 0.78) 100%);
    pointer-events: none;
}
.hometopic_grid a:before{
    content: "";
    position: absolute;
    top: 10px;
    right: -28px;
    width: 90px;
    height: 22px;
    background: rgba(255, 255, 255, 0.14);
    transform: rotate(35deg);
    z-index: 1;
    border-radius: 20px;
}
.hometopic_surface{
    position: absolute;
    z-index: 2;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.hometopic_grid span{
    width: fit-content;
    height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    background: #F5FAFF;
    border: 1px solid #E2F0FF;
    color: #3498FB;
    font-size: 12px;
    line-height: 22px;
}
.hometopic_grid strong{
    display: block;
    margin-top: 5px;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    font-family: "msyhbd";
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.hometopic_grid p{
    display: none;
}
.hometopic_grid em{
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 34px;
    margin-top: 0;
    padding: 0 12px 0 20px;
    border-radius: 0;
    background: rgba(52, 152, 251, 0.88);
    color: #FFFFFF;
    font-size: 12px;
    line-height: 34px;
    font-style: normal;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 16px rgba(52, 152, 251, 0.28);
    clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);
}
.hometopic_grid em:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 100%;
    background: rgba(255, 255, 255, 0.12);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.homeupdate_textflow{
    margin-top: 46px;
}
.homeupdate_grid{
    width: 100%;
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.homeupdate_col{
    padding-right: 4px;
}
.homeupdate_head{
    padding-bottom: 12px;
    border-bottom: 1px solid #EAF0F6;
}
.homeupdate_head strong{
    font-size: 16px;
    line-height: 24px;
    color: #1F2D3D;
    font-family: "msyhbd";
}
.homeupdate_list{
    display: flex;
    flex-direction: column;
    margin-top: 6px;
}
.homeupdate_list a{
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #F2F5F8;
    overflow: hidden;
}
.homeupdate_list a:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.homeupdate_list span{
    font-size: 12px;
    line-height: 18px;
    color: #94A0AE;
    white-space: nowrap;
}
.homeupdate_list em{
    font-size: 13px;
    line-height: 20px;
    color: #334255;
    font-style: normal;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.indexmain5{
    width: 100%;
    margin-top: 50px;
}
.indexmain5M{
    width: 100%;
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.indexmain5M1{
    width: 420px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.indexmain5M1s{
    width: 100%;
}
.indexmain5M_top{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}
.indexmain5M_top > img{
    width: 13px;
    height: auto;
    flex: 0 0 auto;
}
.indexmain5M_top > span{
    font-size: 18px;
    color: #000000;
    line-height: 24px;
    flex: 1;
}
.indexmain5M_top > a{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}
.indexmain5M_top > a span{
    font-size: 16px;
    color: #3498FB;
    line-height: 21px;
}
.indexmain5M_top > a img{
    width: 7px;
    height: auto;
}
.indexmain5M1s_M{
    width: 100%;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}
.indexmain5M1s_M::before{
    content: "";
    left: 3px;
    top: 0;
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #EEEEEE;
}
.indexmain5M1s_Ms{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 16px;
    gap: 15px;
    position: relative;
}
.indexmain5M1s_Ms::before{
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    width: 8px;
    height: 8px;
    background: #B0B0B0;
    border-radius: 50%;
}
.indexmain5M1s_Ms > a{
    font-size: 16px;
    color: #444444;
    line-height: 21px;
    /* display: block; */
    width: auto;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 2px;
}
.indexmain5M1s_Ms > a span{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.indexmain5M1s_Ms > a img{
    width: 22px;
    height: auto;
}
.indexmain5M1s_Ms > span{
    font-size: 12px;
    color: #BABFC8;
    line-height: 18px;
    padding: 0 4px;
    background: #F9FAFB;
    border-radius: 2px;
}
.indexmain5M1s_Ms:hover a{
    color: #FF535B;
}
.indexmain5M1s_Ms:hover::before{
    background: #ffffff;
    border: 1px solid #FF634F;
}
.indexmain5M1s_Ms.hot img{
    flex: 0 0 auto;
}
.indexmain5M2{
    width: 420px;
}
.indexmain5M2_top{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 11px;
}
.indexmain5M2_tops{
    width: 50%;
    height: 114px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.indexmain5M2_tops > a{
    display: block;
    width: 100%;
    height: 100%;
}
.indexmain5M2_tops > a:hover img{
    transform: scale(1.2);
}
.indexmain5M2_tops > a img{
    width: 100%;
    height: 100%;
    transition: transform 0.2s;
}
.indexmain5M2_tops > span{
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 18px;
    padding: 0 5px;
}
.indexmain5M2_tops > span.apptips{
    background: #EC4799;
}
.indexmain5M2_tops > span.designtips{
    background: #3498FB;
}
.indexmain5M2_tops > p{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, #000000 100%);
    border-radius: 0px 0px 4px 4px;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 28px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 8px;
}
.indexmain5M2 .indexmain5M1s_M{
    margin-top: 24px;
}
.indexmain5M3{
    width: 320px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px;
    row-gap: 15px;
}
.indexmain5M3s{
    width: 100%;
    overflow: hidden;
}
.indexmain5M3s_img{
    width: 100%;
    display: block;
    height: 86px;
    border-radius: 4px;
    overflow: hidden;
}
.indexmain5M3s_img:hover img{
    transform: scale(1.2);
}
.indexmain5M3s_img img{
    width: 100%;
    height: 100%;
    transition: transform 0.2s;
}
.indexmain5M3s_span{
    width: 100%;
    font-size: 14px;
    color: #444444;
    line-height: 18px;
    margin-top: 5px;
    height: 36px;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}
.indexmain5M3s_span:hover{
    color: #FF535B;
}
.indexmain6{
    width: 100%;
    margin-top: 50px;
}
.indexmain6M{
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
.indexmain6ML{
    width: 920px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}
.indexmain6MLs{
    width: 100%;
    height: 95px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    padding: 6px 10px;
    background: linear-gradient( 217deg, #F5F5F5 0%, #FFFFFF 100%);
    border: 1px solid #E6E6E6;
}
.indexmain6MLs_bg{
    width: 64px;
    position: absolute;
    right: 0;
    top: 0;
    height: auto;
    -webkit-mask: linear-gradient(
        to top right,
        transparent 0%,
        transparent 20%,
        white 100%
      );
      mask: linear-gradient(
        to top right,
        transparent 0%,
        transparent 20%,
        white 100%
      );
}
.indexmain6MLs > a{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.indexmain6MLs > a img{
    width: 24px;
    height: 24px;
    border-radius: 4px;
    overflow: hidden;
    flex: 0 0 auto;
}
.indexmain6MLs > a span{
    font-size: 18px;
    color: #000000;
    line-height: 24px;
    flex: 1;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.indexmain6MLs > p{
    width: 100%;
    margin-top: 7px;
    font-size: 16px;
    color: #444444;
    line-height: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}
.indexmain6MR{
    width: 260px;
    background: linear-gradient( 180deg, #F5F5F5 0%, #FFFFFF 100%);
    border-radius: 8px;
    padding: 12px;
}
.indexmain6MR_top{
    width: 100%;
    position: relative;
    padding-top: 8px;
}
.indexmain6MR_top img{
    position: absolute;
    top: 0;
    left: 5px;
    width: 17px;
    height: auto;
}
.indexmain6MR_top span{
    font-size: 18px;
    color: #000000;
    line-height: 24px;
    font-family: "msyhbd";
}
.indexmain6MR_top span b{
    color: #3498FB;
    font-family: "msyhbd";
}
.indexmain6MRM{
    width: 100%;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.indexmain6MRM_1{
    display: flex;
    justify-content: space-between;
    gap: 9px;
    position: relative;
    align-items: center;
}
.indexmain6MRM_1 > span{
    display: block;
    width: 18px;
    height: 19px;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 19px;
    flex: 0 0 auto;
    z-index: 1;
    text-align: center;
    align-self: start;
}
.indexmain6MRM_ranking{
    position: absolute;
    width: 18px;
    height: 19px;
    top: 0;
    left: 0;
}
.indexmain6MRM_1_logo{
    display: block;
    width: 62px;
    height: 62px;
    border-radius: 4px;
    overflow: hidden;
    flex: 0 0 auto;
}
.indexmain6MRM_1_logo img{
    width: 100%;
    height: 100%;
}
.indexmain6MRM_1_info{
    flex: 1;
    width: auto;

}
.indexmain6MRM_1_info a{
    font-size: 16px;
    color: #333333;
    line-height: 21px;
    width: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.indexmain6MRM_1_info a:hover{
    color: #FF535B;
}
.indexmain6MRM_1_info p{
    font-size: 14px;
    color: #666666;
    line-height: 19px;
    margin-top: 5px;
    width: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.indexmain6MRM_1_info span{
    font-size: 14px;
    color: #FF9B00;
    line-height: 19px;
    margin-top: 15px;
    width: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.indexmain6MRMs{
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    gap: 9px;
    overflow: hidden;
}
.indexmain6MRMs.indexmain6MRM_2 > span,
.indexmain6MRMs.indexmain6MRM_3 > span{
    display: block;
    width: 18px;
    height: 19px;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 19px;
    flex: 0 0 auto;
    z-index: 1;
    text-align: center;
}
.indexmain6MRMs > a{
    flex: 1;
    width: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
}
.indexmain6MRMs > a span{
    display: block;
    font-size: 16px;
    color: #333333;
    line-height: 21px;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.indexmain6MRMs > span{
    width: 18px;
    height: 19px;
    font-size: 12px;
    color: #686868;
    line-height: 19px;
    flex: 0 0 auto;
    text-align: center;
}
.indexmain6MRMs .hot-icon{
    width: 21px;
    height: auto;
}
.indexmain6MRMs .rise-icon{
    width: 31px;
    height: auto;
}
.indexmain6MRMs > a:hover span{
    color: #FF535B;
}
.indexmain7{
    width: 100%;
    margin-top: 50px;
}
.indexmain7M{
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.indexmain7Ms{
    width: 224px;
    height: 126px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.indexmain7Ms a{
    display: block;
    width: 100%;
    height: 100%;
}
.indexmain7Ms a img{
    width: 100%;
    height: 100%;
    transition: transform 0.2s;
}
.indexmain7Ms span{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 38px;
    background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, #000000 100%);
    border-radius: 4px;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 38px;
    padding: 0 10px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.indexmain7Ms:hover img{
    transform: scale(1.2);
}
footer{
    background: #121726;
    width: 100%;
    margin-top: 50px;
}
.footer{
    width: 1200px;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 24px
}
.footer1{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.footer11 a{
    display: flex;
    align-items: center;
    gap: 9px;
}
.footer11 a > img{
    width: 64px;
    height: 64px;
}
.footer11 a div span:first-of-type{
    font-size: 44px;
    color: #FFFFFF;
    line-height: 45px;
    font-family: "msyhbd";
}
.footer11 a div span:last-of-type{
    font-size: 18px;
    color: #FFFFFF;
    line-height: 19px;
}
.footer11 > span{
    display: block;
    font-size: 16px;
    color: #969DA9;
    line-height: 21px;
    margin-top: 7px;
}
.footer13{
    width: 432px;
}
.footer13 > span{
    display: block;
    font-size: 18px;
    color: #D1D5DB;
    line-height: 24px;
    padding-bottom: 20px;
}
.footer13 > p{
    font-size: 16px;
    color: #646B78;
    line-height: 24px;
}
.footer13 > p a{
    color: #3498FB;
}
.footer12{
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.footer12 > span{
    display: block;
    font-size: 18px;
    color: #D1D5DB;
    line-height: 24px;
    padding-bottom: 9px;
}
.footer12 > a{
    font-size: 16px;
    color: #646B78;
    line-height: 21px;
}
.footer > span{
    display: block;
    width: 100%;
    height: 1px;
    background-color: #36435D;
    margin-top: 37px;
}
.footer > p{
    width: 100%;
    margin-top: 30px;
    text-align: center;
    font-size: 16px;
    color: #757C88;
    line-height: 21px;
}
.historical_prompt{
    display: none;
}
.historical_prompt.active{
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    justify-content: center;
    align-items: center;
}
.historical_prompt > div{
    width: 800px;
    height: 857px;
    background: linear-gradient( 118deg, #FFFFFF 0%, #EAF4FF 99.93%, #EAF4FF 100%);
    border-radius: 8px;
    border: 1px solid #EDF1F6;
    padding: 30px;
}
.historical_prompt_top{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.historical_prompt_top > span{
    font-size: 24px;
    color: #000000;
    line-height: 31px;
    font-weight: bold;
}
.historical_prompt_top > div{
    display: flex;
    align-items: center;
    gap: 10px;
}
.historical_prompt_amount{
    height: 28px;
    background: #FFFFFF;
    border-radius: 4px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.historical_prompt_amount > span:last-of-type{
    font-size: 14px;
    color: #637086;
    line-height: 19px;
}
.historical_prompt_amount > span:first-of-type{
    width: 10px;
    height: 10px;
    background: #EDF5FE;
    border: 1px solid #3498FB;
    border-radius: 50%;
    position: relative;
}
.historical_prompt_amount > span:first-of-type::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: #3498FB;
    border-radius: 50%;
}
.historical_prompt_clean{
    height: 28px;
    background: #FFFFFF;
    border-radius: 4px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    cursor: pointer;
}
.historical_prompt_clean img{
    width: 16px;
    height: auto;
}
.historical_prompt_clean span{
    font-size: 14px;
    color: #637086;
    line-height: 19px;
}
.historical_prompt_close{
    width: 28px;
    height: 28px;
    background: #FFFFFF;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.historical_prompt_close img{
    width: 12px;
    height: auto;
}
.historical_prompt > div > p{
    width: 100%;
    margin-top: 16px;
    font-size: 16px;
    color: #C2C2CE;
    line-height: 21px;
}
.historical_promptM{
    width: 100%;
    margin-top: 14px;
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    height: 744px;
    scrollbar-width: thin;
    scrollbar-color: #CED2DF transparent;
}
.historical_promptM::-webkit-scrollbar {
    width: 6px;
    border-radius: 8px;
}
.historical_promptM::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}
.historical_promptM::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 8px;
}
.historical_promptM::-webkit-scrollbar-thumb:hover {
    background: #555;
}
.historical_promptMs_f{
    width: 100%;
    padding-left: 18px;
    position: relative;
    cursor: pointer;
}
.historical_promptMs_f > span{
    font-size: 12px;
    color: #999999;
    line-height: 16px;
}
.historical_promptMs{
    width: 100%;
    margin-top: 7px;
    background: #FBFCFD;
    border-radius: 8px;
    border: 1px solid #EDF1F6;
    padding: 20px;
}
.historical_promptMs_top{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.historical_promptMs_top > span{
    flex: 1;
    width: auto;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 18px;
    color: #444444;
    line-height: 24px;
}
.historical_promptMs_top > div{
    height: 28px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #E2E8F0;
    padding: 0 4px;
    padding-right: 9px;
    display: flex;
    align-items: center;
}
.historical_promptMs_top > div img{
    width: 24px;
    height: auto;
    filter: grayscale(95%);
}
.historical_promptMs_top > div span{
    font-size: 14px;
    color: #67768D;
    line-height: 19px;
}
.historical_promptMs_p {
    position: relative;
    margin-top: 7px;
    display: inline-block;
  }
  
  /* 默认：3行限制 */
  .historical_promptMs_p p {
    font-size: 16px;
    color: #556274;
    line-height: 24px;
  
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  
    overflow: hidden;
    word-break: break-all;
  }
  
  /* 重点：展开状态只取消 clamp，不要改 display */
  .historical_promptMs_p.open p {
    -webkit-line-clamp: unset;
    display: inline; 
  }
  
  /* 按钮右下角 */
  .historical_promptMs_p_show {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 16px;
    line-height: 24px;
    color: #3498FB;
    cursor: pointer;
    background: #fff;
  }
  .historical_promptMs_p_show::before{
    content: "...";
    color: #556274;
  }
  .historical_promptMs_p.open .historical_promptMs_p_show{
    position: static;
    display: inline;
    white-space: nowrap;
  }
  .historical_promptMs_p.open .historical_promptMs_p_show::before{
    display: none;
  }
  .historical_promptMs_info{
    width: 100%;
    margin-top: 16px;
    background: #EAF4FF;
    border-radius: 8px;
    border: 1px solid #F6F8FA;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .historical_promptMs_info img{
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex: 0 0 auto;
  }
  .historical_promptMs_info span{
    font-size: 16px;
    color: #555555;
    line-height: 21px;
    flex: 1;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .historical_promptMs_tips{
    width: 100%;
    margin-top: 17px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .historical_promptMs_tips span:first-of-type{
    font-size: 14px;
    color: #C2C2CE;
    line-height: 19px;
  }
  .historical_promptMs_tips span:last-of-type{
    font-size: 14px;
    color: #3498FB;
    line-height: 19px;
  }
  .historical_promptMs_f::before{
    content: "";
    width: 1px;
    height: 100%;
    background-color: #DFEDFA;
    position: absolute;
    left: 9px;
    top: 0;
  }
  .historical_promptMs_f > span{
    position: relative;
  }
  .historical_promptMs_f > span::before{
    content: "";
    position: absolute;
    left: -13px;
    top: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #AAAAAA;
    box-shadow: 0px 0px 8px 2px rgba(130,130,130,0.38);
    border: 1px solid #F0F0F0;
  }
  .historical_promptMs_f:hover .historical_promptMs{
    border-left: 2px solid #3498FB;
  }
  .historical_promptMs_f:hover > span{
    color: #3498FB;
  }
  .historical_promptMs_f:hover > span::before{
    background: #ffffff;
    width: 4px;
    height: 4px;
    border: 2px solid #3498FB;
    box-shadow: 0px 0px 8px 2px rgba(92, 146, 246, 0.38);
  }
  .login_signup{
    display: none;
  }
.login_signup.login_tab_show,
.login_signup.signup_tab_show,
.login_signup.Reset_tab_show{
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    justify-content: center;
    align-items: center;
    z-index: 9;
}
/* 默认全部隐藏 */
.login_signup .login_tab,
.login_signup .signup_tab,
.login_signup .Reset_tab {
  display: none;
}

/* 对应显示 */
.login_signup.login_tab_show .login_tab {
  display: block;
}

.login_signup.signup_tab_show .signup_tab {
  display: block;
}

.login_signup.Reset_tab_show .Reset_tab {
  display: block;
}
.login_tab,
.signup_tab,
.Reset_tab{
    width: 565px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(180,185,203,0.8);
    border-radius: 18px;
    padding: 35px 50px;
    padding-top: 45px;
    position: relative;
}
.login_signup_close{
    position: absolute;
    width: 16px;
    height: 16px;
    border: none;
    top: 20px;
    right: 20px;
    cursor: pointer;
    background-color: #ffffff;
}
.login_signup_close img{
    width: 100%;
    height: 100%;
}
.login_tab_top{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 40px;
    padding-bottom: 10px;
}
.login_tab_top > a{
    font-size: 24px;
    color: #A5A5A5;
    line-height: 31px;
}
.login_tab_top > a.active{
    color: #000000;
    font-weight: bold;
    position: relative;
}
.login_tab_top > a.active::after{
    content: "";
    position: absolute;
    background: #3498FB;
    border-radius: 2px;
    width: 32px;
    height: 4px;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}
.login_signup_input{
    width: 100%;
    margin-top: 16px;
}
.login_signup_input > span{
    font-size: 18px;
    color: #000000;
    line-height: 24px;
}
.login_signup_input > div{
    width: 100%;
    margin-top: 7px;
    height: 48px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #E2E3E8;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.login_signup_input > div img{
    max-width: 15px;
}
.login_signup_input > div input{
    font-size: 14px;
    color: #333333;
    line-height: 19px;
    border: none;
    flex: 1;
}
.login_signup_input > div input:focus {
    outline: none;           
    box-shadow: none;        
  }
.login_signup_input > div input::placeholder{
    color: #848484;
}
.passward_input_btn{
    flex: 0 0 auto;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
.login_signup_info{
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.login_signup_info > div{
    display: flex;
    align-items: center;
    gap: 5px;
}
.login_signup_info > div span{
    font-size: 14px;
    color: #848484;
    line-height: 19px;
}
.login_signup_info > a{
    font-size: 14px;
    color: #3498FB;
    line-height: 19px;
}
.login_tab_btn{
    width: 100%;
    margin-top: 20px;
    height: 47px;
    background: linear-gradient( 270deg, #3351FB 0%, #3399FB 100%);
    border-radius: 24px;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 24px;
    border: none;
    cursor: pointer;
}
.login_tab > p{
    width: 100%;
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    color: #A6A6A6;
    line-height: 19px;
}
.login_tab > p a{
    color: #3498FB;
}
.login_signup_input > div > span{
    display: block;
    width: 1px;
    height: 29px;
    background-color: #E2E3E8;
}
.login_signup_input .get_code{
    font-size: 14px;
    color: #848484;
    line-height: 19px;
}
.signup_tab_tips{
    display: block;
    width: 100%;
    margin-top: 10px;
    font-size: 14px;
    color: #848484;
    line-height: 19px;
}
.signup_tab_btn{
    width: 100%;
    margin-top: 20px;
    height: 47px;
    background: linear-gradient( 270deg, #3351FB 0%, #3399FB 100%);
    border-radius: 24px;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 24px;
    border: none;
    cursor: pointer;
}
.signup_tab > p,
.Reset_tab > p{
    width: 100%;
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    color: #A6A6A6;
    line-height: 19px;
}
.signup_tab > p a,
.Reset_tab > p a{
    color: #3498FB;
}
/* conversation */
.conversation{
    width: 100%;
    display: flex;
    height: 100vh;
}
.conversation_log{
    width: 279px;
    height: 100%;
    background: #F3F6FF;
    padding: 15px;
    flex: 0 0 auto;
    transition: all 0.2s;
}
.conversation_logo{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
}
.conversation_logo > img{
    width: 32px;
    height: 32px;
}
.conversation_logo > div{
    display: flex;
    flex-direction: column;
}
.conversation_logo > div span:first-of-type{
    font-size: 22px;
    color: #333333;
    line-height: 22px;
    font-family: "msyhbd";
}
.conversation_logo > div span:last-of-type{
    font-size: 9px;
    color: #565656;
    line-height: 10px;
}
.conversation_nav{
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.conversation_navs{
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.conversation_navs.active{
    background: #E7EEFD;
    border: 1px solid #3498FB;
}
.conversation_navs:hover{
    background: #E7EEFD;
}
.conversation_navs img{
    width: 14px;
    height: auto;
    flex: 0 0 auto;
}
.conversation_navs img.hoverimg{
    display: none;
}
.conversation_navs.active img{
    display: none;
}
.conversation_navs.active img.hoverimg{
    display: block;
}
.conversation_navs span{
    font-size: 14px;
    color: #040404;
    line-height: 19px;
    flex: 1;
    display: block;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.conversation_navs.active span{
    color: #3498FB;
}
.conversation_history{
    width: 100%;
    margin-top: 40px;
}
.conversation_history > span{
    font-size: 12px;
    color: #9B9B9B;
    line-height: 16px;
}
.conversation_historyM{
    width: 100%;
    margin-top: 13px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: calc(100vh - 410px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #CED2DF transparent;
}
.conversation_historyM::-webkit-scrollbar {
width: 6px;
border-radius: 8px;
}
.conversation_historyM::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 8px;
}
.conversation_historyM::-webkit-scrollbar-thumb {
background: #888;
border-radius: 8px;
}
.conversation_historyM::-webkit-scrollbar-thumb:hover {
background: #555;
}
.conversation_historyMs{
    width: 100%;
    height: 36px;
    border-radius: 8px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.conversation_historyMs img{
    width: 18px;
    height: auto;
    flex: 0 0 auto;
}
.conversation_historyMs span{
    flex: 1;
    width: auto;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #272725;
    line-height: 19px;
}
.conversation_historyMs.active{
    background: #FFFFFF;
}
.dialogue{
    flex: 1;
    width: auto;
}
.dialogue_top{
    width: 100%;
    height: 56px;
    background: #FFFFFF;
    border-bottom: 1px solid #DBE1EF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    padding-left: 33px;
}
.conversation_log_close{
    width: 21px;
    height: 21px;
    border: none;
    cursor: pointer;
}
.conversation_log_close img{
    width: 100%;
    height: 100%;
}
.dialogue_top > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.dialogue_top > div span{
    font-size: 14px;
    color: #131314;
    line-height: 19px;
}
.dialogue_top > div p{
    font-size: 12px;
    color: #D0D0D0;
    line-height: 16px;
}
.dialogue_top > .header1_login{
    padding: 0 25px;
    height: 38px;
    background: #3498FB;
    border-radius: 8px;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 38px;
}
.dialogue_top > .header1_login span{
    color: #FFFFFF;
}
.conversation_log.hide{
    width: 0px;
    overflow: hidden;
    padding: 0;
}

/* prompt list page */
.header2_navs.active > span{
    color: #3399FA;
}
.promptlistmain{
    width: 1200px;
    margin: 20px auto 60px;
}
.promptlist_breadcrumb{
    width: 100%;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.promptlist_breadcrumb a,
.promptlist_breadcrumb span,
.promptlist_breadcrumb strong{
    font-size: 14px;
    line-height: 18px;
}
.promptlist_breadcrumb a{
    color: #6B7787;
}
.promptlist_breadcrumb a:hover{
    color: #3399FB;
}
.promptlist_breadcrumb span{
    color: #A4AFBC;
}
.promptlist_breadcrumb strong{
    color: #3399FB;
    font-family: "msyhbd";
}
.promptlist_filterbox{
    padding: 18px 22px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #EEEEEE;
}
.promptlist_filter_row{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 11px 0;
    border-bottom: 1px solid #F2F4F7;
}
.promptlist_filter_row:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.promptlist_filter_label{
    width: 74px;
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 32px;
    color: #334155;
    font-family: "msyhbd";
}
.promptlist_filter_items{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.promptlist_filter_items a,
.promptlist_toolbar_tabs a{
    padding: 7px 14px;
    border-radius: 18px;
    background: #F7FAFD;
    border: 1px solid #E7EDF5;
    font-size: 14px;
    line-height: 18px;
    color: #516174;
}
.promptlist_filter_items a.active,
.promptlist_filter_items a:hover,
.promptlist_toolbar_tabs a.active,
.promptlist_toolbar_tabs a:hover{
    color: #3399FB;
    border-color: #3399FB;
    background: #F0F8FF;
}
.promptlist_toolbar{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.promptlist_toolbar_tabs{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.promptlist_content{
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.promptlist_left{
    flex: 1;
    min-width: 0;
}
.promptlist_right{
    width: 300px;
    flex: 0 0 auto;
}
.promptlist_section_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.promptlist_section_title > div{
    display: flex;
    align-items: center;
    gap: 8px;
}
.promptlist_section_title img{
    width: 22px;
    height: auto;
}
.promptlist_section_title h2{
    font-size: 22px;
    line-height: 28px;
    color: #111111;
    font-family: "msyhbd";
}
.promptlist_section_more{
    font-size: 14px;
    line-height: 18px;
    color: #3399FB;
}
.promptlist_section_more span{
    padding-left: 4px;
}
.promptlist_grid{
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.promptcard{
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #EEF2F7;
    padding: 20px;
    box-shadow: 0px 8px 24px rgba(17, 69, 125, 0.04);
}
.promptcard.hot{
    border-color: #D8E9FB;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 100%);
}
.promptcard_top{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}
.promptcard_tag{
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: #EDF6FF;
    border-radius: 14px;
    font-size: 13px;
    color: #3399FB;
    line-height: 16px;
}
.promptcard_model{
    font-size: 13px;
    color: #8A97A8;
    line-height: 16px;
}
.promptcard h3{
    margin-top: 16px;
    font-size: 20px;
    line-height: 28px;
    color: #1C2430;
    font-family: "msyhbd";
    min-height: 56px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.promptcard p{
    margin-top: 12px;
    min-height: 72px;
    font-size: 14px;
    line-height: 24px;
    color: #677587;
}
.promptcard_meta{
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.promptcard_meta span{
    padding: 6px 10px;
    background: #F7F9FB;
    border-radius: 14px;
    font-size: 12px;
    line-height: 16px;
    color: #7B8794;
}
.promptcard_bottom{
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.promptcard_bottom a{
    font-size: 14px;
    line-height: 18px;
    color: #3399FB;
    white-space: nowrap;
}
.promptcard_bottom button{
    border: none;
    padding: 9px 16px;
    background: linear-gradient(270deg, #3351FB 0%, #3399FB 100%);
    border-radius: 7px;
    font-size: 14px;
    color: #FFFFFF;
    cursor: pointer;
    white-space: nowrap;
}
.promptlist_pagination{
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.promptlist_pagination a{
    min-width: 38px;
    height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #E5EBF3;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #4B596A;
}
.promptlist_pagination a.active,
.promptlist_pagination a:hover{
    border-color: #3399FB;
    color: #3399FB;
    background: #EFF7FF;
}
.promptside_box{
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #EEF2F7;
    padding: 20px;
}
.promptside_box + .promptside_box{
    margin-top: 20px;
}
.promptside_title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.promptside_title > div{
    display: flex;
    align-items: center;
    gap: 6px;
}
.promptside_title img{
    width: 22px;
    height: auto;
}
.promptside_title h3{
    font-size: 20px;
    line-height: 24px;
    color: #111111;
    font-family: "msyhbd";
}
.promptside_more{
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 18px;
    color: #7A8A9C;
}
.promptside_more:hover{
    color: #3399FB;
}
.promptside_tags{
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.promptside_tags a{
    padding: 8px 12px;
    background: #F7FAFD;
    border-radius: 16px;
    border: 1px solid #E7EDF5;
    font-size: 13px;
    color: #516174;
    line-height: 16px;
}
.promptside_tags a:hover{
    color: #3399FB;
    border-color: #3399FB;
    background: #F0F8FF;
}
.promptside_rank{
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.promptside_rank a{
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.promptside_rank a span{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #3399FB;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
    font-family: "msyhbd";
    flex: 0 0 auto;
}
.promptside_rank a p{
    font-size: 14px;
    line-height: 22px;
    color: #334155;
}
.promptside_recommend{
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.promptside_recommend a{
    display: block;
    padding: 14px 14px 12px;
    background: #F7FAFD;
    border-radius: 8px;
}
.promptside_recommend strong{
    display: block;
    font-size: 15px;
    line-height: 20px;
    color: #1B2430;
    font-family: "msyhbd";
}
.promptside_recommend span{
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 22px;
    color: #6D7887;
}
.articleside_media{
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.articleside_media_item{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
    background: #FBFDFF;
    border: 1px solid #E7EEF6;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s;
}
.articleside_media_item:hover{
    transform: translateY(-1px);
    border-color: #D8E7F7;
    background: #FFFFFF;
    box-shadow: 0px 10px 22px rgba(18, 63, 109, 0.07);
}
.articleside_media_thumb{
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #F6F9FC 0%, #ECF2F8 100%);
    border: 1px solid #E3EAF2;
    box-shadow: 0px 6px 16px rgba(18, 63, 109, 0.1);
}
.articleside_media_thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.articleside_media_body{
    flex: 1;
    min-width: 0;
}
.articleside_media_body strong{
    display: block;
    font-size: 15px;
    line-height: 24px;
    color: #243140;
    font-family: "msyhbd";
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.articleside_media_body span{
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 22px;
    color: #6A798B;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.articleside_media_thumb_empty{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.articleside_media_thumb_empty span{
    font-size: 12px;
    line-height: 18px;
    color: #8A97A8;
    text-align: center;
}
.articleside_media_item:hover strong{
    color: #3399FB;
}

/* prompt detail page */
.promptdetailmain{
    width: 1200px;
    margin: 20px auto 60px;
}
.promptdetail_layout{
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.promptdetail_left{
    flex: 1;
    min-width: 0;
}
.promptdetail_right{
    width: 300px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.promptdetail_hero,
.promptdetail_section{
    background: #FFFFFF;
    border: 1px solid #EEF2F7;
    border-radius: 12px;
    box-shadow: 0px 8px 24px rgba(17, 69, 125, 0.04);
}
.promptdetail_hero{
    padding: 28px 28px 30px;
}
.promptdetail_badges{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.promptdetail_badges span{
    padding: 6px 12px;
    border-radius: 16px;
    background: #EDF6FF;
    color: #3399FB;
    font-size: 13px;
    line-height: 16px;
}
.promptdetail_hero h1{
    font-size: 32px;
    line-height: 42px;
    color: #1C2430;
    font-family: "msyhbd";
}
.promptdetail_hero p{
    margin-top: 12px;
    font-size: 15px;
    line-height: 28px;
    color: #617081;
    max-width: 860px;
}
.promptdetail_meta{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.promptdetail_meta_item{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.promptdetail_meta_item span{
    color: #738194;
    font-size: 13px;
    line-height: 18px;
}
.promptdetail_meta_icon{
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 50%;
    background: #EEF5FE;
    border: 1px solid #D6E7FB;
}
.promptdetail_meta_icon::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #3399FB;
}
.promptdetail_meta_icon_time::before{
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.promptdetail_meta_icon_view::before{
    width: 7px;
    height: 4px;
    border-radius: 4px;
}
.promptdetail_meta_icon_hot::before{
    width: 6px;
    height: 8px;
    border-radius: 6px 6px 6px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}
.promptdetail_section{
    margin-top: 20px;
    padding: 24px 28px 28px;
}
.promptdetail_mergeblock{
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #EEF3F8;
}
.promptdetail_inner_title{
    margin-bottom: 0;
}
.promptdetail_section_title{
    display: flex;
    align-items: center;
    gap: 8px;
}
.promptdetail_section_title img{
    width: 22px;
    height: auto;
}
.promptdetail_section_title h2{
    font-size: 22px;
    line-height: 28px;
    color: #1B2430;
    font-family: "msyhbd";
}
.promptdetail_codebox{
    margin-top: 18px;
    border: 1px solid #DFE9F5;
    border-radius: 12px;
    overflow: hidden;
    background: #F8FBFE;
}
.promptdetail_codehead{
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #F6FAFF 0%, #EEF6FF 100%);
    border-bottom: 1px solid #E2ECF8;
}
.promptdetail_codehead span{
    font-size: 14px;
    line-height: 18px;
    color: #597086;
}
.promptdetail_copybtn{
    border: none;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    background: linear-gradient(270deg, #3351FB 0%, #3399FB 100%);
    color: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
}
.promptdetail_copybtn.copied{
    background: #16A34A;
}
.promptdetail_codebox pre{
    margin: 0;
    padding: 22px 20px 24px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px;
    line-height: 26px;
    color: #203040;
    font-family: "Consolas", "Monaco", monospace;
    background: #FBFDFF;
}
.promptdetail_faqmini{
    margin-top: 18px;
    padding: 16px 0 0;
    border-top: 1px solid #EDF3F8;
}
.promptdetail_faqmini_title span{
    font-size: 16px;
    line-height: 22px;
    color: #1D2733;
    font-family: "msyhbd";
}
.promptdetail_faqmini_grid{
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
}
.promptdetail_faqmini_grid a{
    position: relative;
    display: block;
    padding-left: 14px;
    font-size: 14px;
    line-height: 24px;
    color: #4B5B6C;
}
.promptdetail_faqmini_grid a::before{
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3399FB;
}
.promptdetail_faqmini_grid a:hover{
    color: #3399FB;
}
.promptdetail_relatedgrid{
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.promptdetail_relatedcard{
    display: block;
    padding: 18px 18px 16px;
    border-radius: 10px;
    background: #FBFDFF;
    border: 1px solid #E8EFF7;
}
.promptdetail_relatedcard:hover{
    border-color: #D7E8FB;
    background: #F8FBFF;
}
.promptdetail_relatedtop{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.promptdetail_relatedtop span{
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 14px;
    background: #EDF6FF;
    color: #3399FB;
    font-size: 12px;
    line-height: 16px;
}
.promptdetail_relatedtop em{
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    color: #8090A2;
}
.promptdetail_relatedcard strong{
    display: block;
    margin-top: 14px;
    font-size: 18px;
    line-height: 28px;
    color: #1D2733;
    font-family: "msyhbd";
}
.promptdetail_relatedcard p{
    margin-top: 10px;
    font-size: 14px;
    line-height: 24px;
    color: #677587;
}
.promptdetail_relatedtags{
    margin-top: 14px;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    height: 28px;
    overflow: hidden;
}
.promptdetail_relatedtags span{
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 14px;
    background: #F5F8FB;
    color: #728093;
    font-size: 12px;
    line-height: 16px;
}
.promptdetail_linkcolumns{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}
.promptdetail_linkcol{
    padding: 18px 20px 16px;
    border-radius: 10px;
    background: #FBFDFF;
    border: 1px solid #E8EFF7;
}
.promptdetail_linkhead{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.promptdetail_linkcol h3{
    font-size: 18px;
    line-height: 24px;
    color: #1C2430;
    font-family: "msyhbd";
}
.promptdetail_linkhead a{
    font-size: 13px;
    line-height: 18px;
    color: #7C8898;
}
.promptdetail_linkhead a:hover{
    color: #3399FB;
}
.promptdetail_linklist{
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.promptdetail_linklist a{
    position: relative;
    display: block;
    padding-left: 14px;
    font-size: 14px;
    line-height: 22px;
    color: #4B5B6C;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.promptdetail_linklist a::before{
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3399FB;
}
.promptdetail_linklist a:hover{
    color: #3399FB;
}
.promptdetail_faq{
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.promptdetail_faqitem{
    padding: 18px 18px;
    border-radius: 10px;
    background: #F8FBFE;
    border: 1px solid #E8EFF7;
}
.promptdetail_faqitem strong{
    display: block;
    font-size: 16px;
    line-height: 22px;
    color: #1E2937;
    font-family: "msyhbd";
}
.promptdetail_faqitem p{
    margin-top: 10px;
    font-size: 14px;
    line-height: 24px;
    color: #667586;
}
.promptdetail_prevnext{
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.promptdetail_prevnext_inline{
    margin-top: 0;
    gap: 28px;
}
.promptdetail_prevnext_text{
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
}
.promptdetail_prevnext_text span{
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 18px;
    color: #7A8797;
}
.promptdetail_prevnext_text strong{
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 22px;
    color: #4B5B6C;
    font-family: "msyhbd";
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.promptdetail_prevnext_text:hover strong{
    color: #3399FB;
}
.promptdetail_hotnews{
    margin-top: 18px;
}
.promptdetail_hotnews_tabs{
    display: flex;
    gap: 10px;
}
.promptdetail_hotnews_tabs button{
    border: 1px solid #E4EBF3;
    background: #F7FAFD;
    color: #6D7887;
    font-size: 13px;
    line-height: 18px;
    height: 30px;
    padding: 0 14px;
    border-radius: 15px;
    cursor: pointer;
}
.promptdetail_hotnews_tabs button.active{
    color: #3399FB;
    border-color: #3399FB;
    background: #EFF7FF;
}
.promptdetail_hotnews_panel{
    display: none;
    margin-top: 16px;
}
.promptdetail_hotnews_panel.active{
    display: block;
}
.promptdetail_hotnews_list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.promptdetail_hotnews_list a{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid #EDF2F7;
}
.promptdetail_hotnews_list a:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.promptdetail_hotnews_list a span{
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #EFF6FF;
    color: #3399FB;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    font-family: "msyhbd";
}
.promptdetail_hotnews_list a p{
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 22px;
    color: #4B5B6C;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.promptdetail_hotnews_list a:hover p{
    color: #3399FB;
}

/* tutorial list page */
.tutoriallistmain{
    width: 1200px;
    margin: 20px auto 60px;
}
.tutoriallistmain::after{
    content: "";
    display: block;
    clear: both;
}
.tutoriallist_filterbox{
    padding: 20px 22px 18px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
}
.tutoriallist_filterrow{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #F0F4F8;
}
.tutoriallist_filterrow:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.tutoriallist_filterlabel{
    width: 60px;
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 32px;
    color: #7C8998;
    font-family: "msyhbd";
}
.tutoriallist_filteritems{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.tutoriallist_filteritems a{
    padding: 7px 14px;
    border-radius: 17px;
    background: #F8FBFE;
    border: 1px solid #E6EDF5;
    font-size: 13px;
    line-height: 18px;
    color: #5E6D7E;
    transition: all 0.2s;
}
.tutoriallist_filteritems a.active,
.tutoriallist_filteritems a:hover{
    color: #3399FB;
    border-color: #3399FB;
    background: #EFF7FF;
    box-shadow: 0px 4px 12px rgba(51, 153, 251, 0.12);
}
.tutoriallist_layout{
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.tutoriallist_left{
    flex: 1;
    min-width: 0;
}
.tutoriallist_panel{
    border-radius: 14px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
    border: 1px solid #E8EFF7;
    box-shadow: 0px 14px 34px rgba(17, 69, 125, 0.06);
    overflow: hidden;
}
.tutoriallist_right{
    width: 300px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.tutoriallist_list{
    margin-top: 0;
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tutoriallist_paneltitle{
    padding-bottom: 16px;
    border-bottom: 1px solid #EEF3F8;
    margin-bottom: 2px;
}
.tutoriallist_paneltitle{
    align-items: center;
}
.tutoriallist_panelmeta{
    display: flex;
    align-items: center;
    gap: 10px;
}
.tutoriallist_panelmeta span{
    padding: 6px 10px;
    border-radius: 14px;
    background: #F7FAFD;
    border: 1px solid #E5ECF5;
    font-size: 12px;
    line-height: 16px;
    color: #728093;
}
.tutorialitem{
    display: block;
    padding: 20px 22px 18px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #EBF1F7;
    box-shadow: 0px 8px 20px rgba(17, 69, 125, 0.04);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tutorialitem_topmeta{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.tutorialitem_topmeta span{
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 14px;
    background: #EDF6FF;
    color: #3399FB;
    font-size: 12px;
    line-height: 16px;
}
.tutorialitem_topmeta em{
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    color: #8A97A8;
}
.tutorialitem:hover{
    transform: translateY(-1px);
    border-color: #D8E7F7;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
    box-shadow: 0px 12px 28px rgba(17, 69, 125, 0.07);
}
.tutorialitem h3{
    margin-top: 12px;
    font-size: 24px;
    line-height: 34px;
    color: #1C2430;
    font-family: "msyhbd";
}
.tutorialitem_body{
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.tutorialitem_thumb{
    position: relative;
    width: 236px;
    height: 136px;
    flex: 0 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background: #F4F8FC;
    box-shadow: 0px 6px 18px rgba(16, 74, 132, 0.12);
}
.tutorialitem_thumb::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 54px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(15,32,53,0.36) 100%);
}
.tutorialitem_thumbtag{
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,0.92);
    color: #215B99;
    font-size: 12px;
    line-height: 16px;
    font-family: "msyhbd";
}
.tutorialitem_thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s;
}
.tutorialitem:hover .tutorialitem_thumb img{
    transform: scale(1.04);
}
.tutorialitem_desc{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.tutorialitem_desc p{
    font-size: 15px;
    line-height: 27px;
    color: #607083;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tutorialitem_subinfo{
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.tutorialitem_subinfo span{
    position: relative;
    padding-left: 10px;
    font-size: 12px;
    line-height: 16px;
    color: #8895A4;
}
.tutorialitem_subinfo span::before{
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #B7C4D4;
}
.tutorialitem_meta{
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid #EEF3F8;
}
.tutorialitem_meta span{
    padding: 5px 10px;
    border-radius: 14px;
    background: #F7FAFD;
    border: 1px solid #E5ECF5;
    font-size: 12px;
    line-height: 16px;
    color: #6D7A8A;
}
.tutoriallist_pagination_wrap{
    padding: 10px 0 6px;
    margin-top: 8px;
}
.tutorialside_box{
    padding: 18px 18px 16px;
    border-radius: 12px;
    border: 1px solid #E8EFF7;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
    box-shadow: 0px 10px 24px rgba(17, 69, 125, 0.05);
}
.tutorialside_box + .tutorialside_box{
    margin-top: 20px;
}
.tutorialside_box .promptside_title{
    padding-bottom: 12px;
    border-bottom: 1px solid #EEF3F8;
}
.tutorialside_box .promptside_title h3{
    font-size: 18px;
}
.tutorialside_box .promptside_rank{
    margin-top: 14px;
    gap: 12px;
}
.tutorialside_box .promptside_rank a{
    padding: 4px 0;
}
.tutorialside_box .promptside_rank a span{
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
}
.tutorialside_box .promptside_rank a p{
    font-size: 13px;
    line-height: 21px;
    color: #46586B;
}
.tutorialside_box .promptdetail_hotnews{
    margin-top: 14px;
}
.tutorialside_box .promptdetail_hotnews_tabs{
    gap: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid #EEF3F8;
}
.tutorialside_box .promptdetail_hotnews_tabs button{
    position: relative;
    height: auto;
    padding: 0 0 8px;
    font-size: 12px;
    line-height: 18px;
    color: #7A8796;
    border: none;
    background: transparent;
    border-radius: 0;
}
.tutorialside_box .promptdetail_hotnews_tabs button.active{
    color: #243140;
    box-shadow: none;
}
.tutorialside_box .promptdetail_hotnews_tabs button::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 2px;
    background: transparent;
    transition: background 0.2s;
}
.tutorialside_box .promptdetail_hotnews_tabs button.active::after{
    background: #3399FB;
}
.tutorialside_box .promptdetail_hotnews_panel{
    margin-top: 14px;
}
.tutorialside_latest{
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tutorialside_latest a{
    position: relative;
    display: block;
    padding-left: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EEF3F8;
    font-size: 13px;
    line-height: 22px;
    color: #46586B;
}
.tutorialside_latest a:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.tutorialside_latest a::before{
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3399FB;
}
.tutorialside_latest a:hover{
    color: #3399FB;
}

/* tag page */
.tagpagemain{
    width: 1200px;
    margin: 20px auto 60px;
}
.tagpage_layout{
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.tagpage_left{
    flex: 1;
    min-width: 0;
}
.tagpage_right{
    width: 300px;
    flex: 0 0 auto;
}
.tagpage_panel{
    border-radius: 14px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
    border: 1px solid #E8EFF7;
    box-shadow: 0px 14px 34px rgba(17, 69, 125, 0.06);
    overflow: hidden;
}
.tagpage_head{
    padding: 22px 22px 18px;
    border-bottom: 1px solid #EEF3F8;
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFF 100%);
}
.tagpage_head .promptlist_section_title{
    align-items: center;
}
.tagpage_intro{
    margin-top: 12px;
    max-width: 760px;
    font-size: 14px;
    line-height: 24px;
    color: #647487;
}
.tagpage_headmeta{
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tagpage_headmeta span{
    padding: 6px 10px;
    border-radius: 14px;
    background: #F7FAFD;
    border: 1px solid #E5ECF5;
    font-size: 12px;
    line-height: 16px;
    color: #728093;
}
.tagpage_filterbox{
    padding: 14px 22px 16px;
    border-bottom: 1px solid #EEF3F8;
    background: linear-gradient(180deg, #FEFFFF 0%, #FBFDFF 100%);
}
.tagpage_filterrow{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0;
    border-bottom: none;
}
.tagpage_filterrow:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.tagpage_filterlabel{
    width: 60px;
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 32px;
    color: #7C8998;
    font-family: "msyhbd";
}
.tagpage_filteritems{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.tagpage_filteritems a{
    padding: 7px 14px;
    border-radius: 17px;
    background: #F8FBFE;
    border: 1px solid #E6EDF5;
    font-size: 13px;
    line-height: 18px;
    color: #5E6D7E;
    transition: all 0.2s;
}
.tagpage_filteritems a.active,
.tagpage_filteritems a:hover{
    color: #3399FB;
    border-color: #3399FB;
    background: #EFF7FF;
    box-shadow: 0px 4px 12px rgba(51, 153, 251, 0.12);
}
.tagwall_grid{
    padding: 20px 20px 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}
.tagwall_item{
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #E8EFF7;
    box-shadow: 0px 6px 16px rgba(17, 69, 125, 0.04);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tagwall_item:hover{
    transform: translateY(-1px);
    border-color: #D8E7F7;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
    box-shadow: 0px 10px 22px rgba(17, 69, 125, 0.06);
}
.tagwall_item.hot{
    border-color: #D7E9FB;
    background: linear-gradient(180deg, #FFFFFF 0%, #F6FBFF 100%);
}
.tagwall_item.accent{
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
    border-color: #DEEAF8;
}
.tagwall_item strong{
    min-width: 0;
    flex: 1;
    font-size: 15px;
    line-height: 22px;
    color: #1F2A36;
    font-family: "msyhbd";
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tagwall_item span{
    flex: 0 0 auto;
    min-width: 36px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: #EFF6FF;
    color: #3399FB;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
}
.tagpage_pagination{
    padding: 8px 0 24px;
}
.tagpage_right{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.tagpage_right .tutorialside_box{
    margin-top: 0;
}
.tagpage_sidecloud{
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tagpage_sidecloud a{
    padding: 8px 12px;
    background: #F7FAFD;
    border-radius: 16px;
    border: 1px solid #E7EDF5;
    font-size: 13px;
    color: #516174;
    line-height: 16px;
}
.tagpage_sidecloud a:hover{
    color: #3399FB;
    border-color: #3399FB;
    background: #F0F8FF;
}
.tutorialside_box .promptdetail_hotnews_list{
    gap: 10px;
}
.tutorialside_box .promptdetail_hotnews_list a{
    padding-bottom: 10px;
}
.tutorialside_box .promptdetail_hotnews_list a span{
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
}
.tutorialside_box .promptdetail_hotnews_list a p{
    font-size: 13px;
    line-height: 21px;
    color: #46586B;
}

/* tag detail page */
.tagdetailmain{
    width: 1200px;
    margin: 20px auto 60px;
}
.tagdetail_layout{
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.tagdetail_left{
    flex: 1;
    min-width: 0;
}
.tagdetail_panel{
    border-radius: 14px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
    border: 1px solid #E8EFF7;
    box-shadow: 0px 14px 34px rgba(17, 69, 125, 0.06);
    overflow: hidden;
}
.tagdetail_right{
    width: 300px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.tagdetail_hero{
    padding: 26px 28px 18px;
    border-bottom: 1px solid #EEF3F8;
    background: #FFFFFF;
}
.tagdetail_hero_top{
    display: flex;
    align-items: center;
    gap: 10px;
}
.tagdetail_badge{
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 14px;
    background: #EDF6FF;
    color: #3399FB;
    font-size: 12px;
    line-height: 16px;
}
.tagdetail_count{
    font-size: 13px;
    line-height: 18px;
    color: #7A8898;
}
.tagdetail_hero h1{
    margin-top: 16px;
    font-size: 32px;
    line-height: 40px;
    color: #1C2430;
    font-family: "msyhbd";
}
.tagdetail_hero p{
    margin-top: 12px;
    max-width: 760px;
    font-size: 15px;
    line-height: 27px;
    color: #617081;
}
.tagdetail_meta{
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tagdetail_meta span{
    padding: 6px 12px;
    border-radius: 16px;
    background: #F7FAFD;
    border: 1px solid #E6EDF5;
    font-size: 13px;
    line-height: 18px;
    color: #6A7788;
}
.tagdetail_switchbar{
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #EEF3F8;
}
.tagdetail_typebar{
    display: flex;
    align-items: center;
    gap: 26px;
    width: 100%;
    padding-bottom: 1px;
}
.tagdetail_typebar a{
    position: relative;
    padding: 2px 0 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: color 0.2s;
}
.tagdetail_typebar a strong{
    font-size: 16px;
    line-height: 22px;
    color: #596676;
    font-family: "msyhbd";
}
.tagdetail_typebar a em{
    flex: 0 0 auto;
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    color: #97A3B1;
    padding: 0;
    border-radius: 0;
    background: transparent;
}
.tagdetail_typebar a::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: transparent;
    transition: background 0.2s;
}
.tagdetail_typebar a.active strong,
.tagdetail_typebar a:hover strong{
    color: #1F2430;
}
.tagdetail_typebar a.active em,
.tagdetail_typebar a:hover em{
    color: #6C7886;
}
.tagdetail_typebar a.active::after{
    background: #2B7FE8;
}
.tagdetail_section{
    padding: 18px 24px 26px;
    border-top: none;
}
.tagdetail_tabpanel{
    display: none;
}
.tagdetail_tabpanel.active{
    display: block;
}
.tagdetail_promptgrid{
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.tagdetail_promptcard{
    display: block;
    padding: 16px 16px 14px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #EBF1F7;
    box-shadow: 0px 8px 20px rgba(17, 69, 125, 0.04);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tagdetail_promptcard:hover{
    transform: translateY(-1px);
    border-color: #D8E7F7;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
    box-shadow: 0px 12px 28px rgba(17, 69, 125, 0.07);
}
.tagdetail_promptcard.hot{
    border-color: #D7E9FB;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 100%);
}
.tagdetail_prompttop{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.tagdetail_prompttop span{
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 14px;
    background: #EDF6FF;
    color: #3399FB;
    font-size: 12px;
    line-height: 16px;
}
.tagdetail_prompttop em{
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    color: #8090A2;
}
.tagdetail_promptcard h3{
    margin-top: 14px;
    font-size: 18px;
    line-height: 28px;
    color: #1D2733;
    font-family: "msyhbd";
    min-height: 56px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tagdetail_promptcard p{
    margin-top: 10px;
    min-height: 72px;
    font-size: 14px;
    line-height: 24px;
    color: #677587;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tagdetail_prompttags{
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tagdetail_prompttags span{
    padding: 6px 10px;
    border-radius: 14px;
    background: #F5F8FB;
    color: #728093;
    font-size: 12px;
    line-height: 16px;
}
.tagdetail_tutoriallist{
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tagdetail_tutorialitem{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #EBF1F7;
    box-shadow: 0px 8px 20px rgba(17, 69, 125, 0.04);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tagdetail_tutorialitem:hover{
    transform: translateY(-1px);
    border-color: #D8E7F7;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
    box-shadow: 0px 12px 28px rgba(17, 69, 125, 0.07);
}
.tagdetail_tutorialthumb{
    width: 200px;
    height: 114px;
    flex: 0 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background: #F4F8FC;
    box-shadow: 0px 6px 18px rgba(16, 74, 132, 0.12);
}
.tagdetail_tutorialthumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tagdetail_tutorialcontent{
    flex: 1;
    min-width: 0;
}
.tagdetail_tutorialcontent h3{
    font-size: 22px;
    line-height: 32px;
    color: #1C2430;
    font-family: "msyhbd";
}
.tagdetail_tutorialcontent p{
    margin-top: 8px;
    font-size: 14px;
    line-height: 24px;
    color: #607083;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tagdetail_tutorialmeta{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.tagdetail_tutorialmeta span{
    padding: 5px 10px;
    border-radius: 14px;
    background: #F7FAFD;
    border: 1px solid #E5ECF5;
    font-size: 12px;
    line-height: 16px;
    color: #6D7A8A;
}
.tagdetail_pagination{
    margin-top: 20px;
}

/* column page */
.columnmain{
    width: 1200px;
    margin: 20px auto 60px;
}
.columnhero{
    margin-top: 18px;
    min-height: 300px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    background: #111927;
    box-shadow: 0px 18px 42px rgba(15, 46, 86, 0.14);
}
.columnhero_cover{
    position: absolute;
    inset: 0;
}
.columnhero_cover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.columnhero_cover::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(12, 22, 36, 0.88) 0%, rgba(12, 22, 36, 0.58) 46%, rgba(12, 22, 36, 0.18) 100%);
}
.columnhero_content{
    position: relative;
    z-index: 1;
    width: 670px;
    padding: 40px 46px;
}
.columnhero_badges{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.columnhero_badges span{
    padding: 6px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    color: #FFFFFF;
    font-size: 13px;
    line-height: 18px;
}
.columnhero h1{
    margin-top: 22px;
    font-size: 42px;
    line-height: 52px;
    color: #FFFFFF;
    font-family: "msyhbd";
}
.columnhero p{
    margin-top: 14px;
    font-size: 16px;
    line-height: 30px;
    color: rgba(255,255,255,0.84);
}
.columnhero_meta{
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.columnhero_meta span{
    padding: 7px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.88);
    font-size: 13px;
    line-height: 18px;
}
.columnfilter{
    margin-top: 22px;
    padding: 18px 22px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #E8EFF7;
    box-shadow: 0px 12px 32px rgba(17, 69, 125, 0.05);
}
.columnfilter_row{
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.columnfilter_row + .columnfilter_row{
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #EEF3F8;
}
.columnfilter_row > span{
    width: 76px;
    flex: 0 0 auto;
    padding-top: 8px;
    font-size: 14px;
    line-height: 18px;
    color: #5D6D80;
    font-family: "msyhbd";
}
.columnfilter_items{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.columnfilter_items a{
    padding: 8px 14px;
    border-radius: 18px;
    background: #F7FAFD;
    border: 1px solid #E7EDF5;
    font-size: 14px;
    line-height: 18px;
    color: #516174;
}
.columnfilter_items a.active,
.columnfilter_items a:hover{
    color: #3399FB;
    border-color: #3399FB;
    background: #F0F8FF;
}
.columnlayout{
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.columnleft{
    flex: 1;
    min-width: 0;
}
.columnright{
    width: 300px;
    flex: 0 0 auto;
}
.columnsection{
    padding: 22px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #E8EFF7;
    box-shadow: 0px 12px 32px rgba(17, 69, 125, 0.05);
}
.columnsection + .columnsection{
    margin-top: 22px;
}
.columnprompt_grid{
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.columntutorial_list{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.columntutorial_item{
    display: flex;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #EBF1F7;
    box-shadow: 0px 8px 20px rgba(17, 69, 125, 0.04);
}
.columntutorial_item.no-thumb{
    display: block;
    padding: 18px 20px;
    border-left: 4px solid #3399FB;
    background: linear-gradient(90deg, #F8FBFF 0%, #FFFFFF 64%);
}
.columntutorial_item.no-thumb .columntutorial_body{
    width: 100%;
}
.columntutorial_item.no-thumb .columntutorial_meta{
    justify-content: flex-start;
}
.columntutorial_item.no-thumb .columntutorial_meta em{
    margin-left: auto;
}
.columntutorial_item.no-thumb h3{
    margin-top: 12px;
    font-size: 22px;
    line-height: 31px;
}
.columntutorial_item.no-thumb p{
    max-width: 680px;
}
.columntutorial_thumb{
    width: 196px;
    height: 116px;
    border-radius: 12px;
    overflow: hidden;
    flex: 0 0 auto;
    background: #F4F8FC;
}
.columntutorial_thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.columntutorial_body{
    flex: 1;
    min-width: 0;
}
.columntutorial_meta{
    display: flex;
    justify-content: space-between;
    gap: 14px;
}
.columntutorial_meta span{
    padding: 5px 10px;
    border-radius: 14px;
    background: #EDF6FF;
    color: #3399FB;
    font-size: 12px;
    line-height: 16px;
}
.columntutorial_meta em{
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    color: #8A97A8;
}
.columntutorial_body h3{
    margin-top: 10px;
    font-size: 21px;
    line-height: 30px;
    color: #1C2430;
    font-family: "msyhbd";
}
.columntutorial_body p{
    margin-top: 8px;
    font-size: 14px;
    line-height: 24px;
    color: #607083;
}
.columntutorial_tags{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.columntutorial_tags span{
    padding: 5px 10px;
    border-radius: 14px;
    background: #F7FAFD;
    border: 1px solid #E5ECF5;
    font-size: 12px;
    line-height: 16px;
    color: #6D7A8A;
}
.columnside_cards{
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.columnside_card{
    display: block;
    padding: 9px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #E5EEF7;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.columnside_card:hover{
    transform: translateY(-2px);
    border-color: #CFE4FA;
    box-shadow: 0px 14px 30px rgba(17, 69, 125, 0.09);
}
.columnside_cover{
    width: 100%;
    height: 112px;
    border-radius: 11px;
    overflow: hidden;
    background: #EEF4FA;
    position: relative;
}
.columnside_cover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s;
}
.columnside_card:hover .columnside_cover img{
    transform: scale(1.04);
}
.columnside_cover::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 24, 40, 0.06) 0%, rgba(11, 24, 40, 0.12) 56%, rgba(11, 24, 40, 0.55) 100%);
}
.columnside_cover em{
    position: absolute;
    z-index: 1;
    top: 0;
    right: -18px;
    width: 96px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 12px;
    background: linear-gradient(135deg, #1677F2 0%, #35B8FF 100%);
    color: #FFFFFF;
    font-style: normal;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 1px;
    font-family: "msyhbd";
    clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%);
    box-shadow: -10px 0 22px rgba(22, 119, 242, 0.22);
}
.columnside_card:hover .columnside_cover em{
    background: linear-gradient(135deg, #0D5ED7 0%, #27A8F6 100%);
}
.columnside_card strong{
    display: block;
    margin-top: 11px;
    font-size: 16px;
    line-height: 22px;
    color: #1D2733;
    font-family: "msyhbd";
}
.columnside_card span{
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 21px;
    color: #647385;
}

/* article detail page */
.articledetailmain{
    width: 1200px;
    margin: 20px auto 60px;
}
.articledetail_layout{
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.articledetail_left{
    flex: 1;
    min-width: 0;
}
.articledetail_right{
    width: 300px;
    flex: 0 0 auto;
}
.articledetail_section{
    background: #FFFFFF;
    border: 1px solid #EEF2F7;
    border-radius: 12px;
    box-shadow: 0px 8px 24px rgba(17, 69, 125, 0.04);
}
.articledetail_intro{
    padding: 28px 28px 30px;
}
.articledetail_badges{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.articledetail_badges span{
    padding: 6px 12px;
    border-radius: 16px;
    background: #EDF6FF;
    color: #3399FB;
    font-size: 13px;
    line-height: 16px;
}
.articledetail_intro h1{
    margin-top: 16px;
    font-size: 28px;
    line-height: 40px;
    color: #1C2430;
    font-family: "msyhbd";
}
.articledetail_meta{
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.articledetail_meta_item{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.articledetail_meta_item span{
    font-size: 13px;
    line-height: 18px;
    color: #738194;
}
.articledetail_intro > p{
    margin-top: 16px;
    font-size: 15px;
    line-height: 28px;
    color: #617081;
}
.articledetail_section{
    margin-top: 20px;
    padding: 24px 28px 28px;
}
.articledetail_mainpanel{
    padding: 0;
    overflow: hidden;
}
.articledetail_mainpanel .articledetail_intro{
    padding-bottom: 24px;
}
.articledetail_summary{
    margin: 0 28px;
    padding: 20px 22px 18px;
    border-radius: 12px;
    background: linear-gradient(180deg, #F8FBFF 0%, #F4F8FD 100%);
    border: 1px solid #E2EBF5;
}
.articledetail_summary_title,
.articledetail_blockhead{
    display: flex;
    align-items: center;
    gap: 12px;
}
.articledetail_summary_title{
    justify-content: flex-start;
}
.articledetail_blockhead{
    justify-content: space-between;
}
.articledetail_blockhead > div{
    display: flex;
    align-items: center;
    gap: 8px;
}
.articledetail_summary_title img,
.articledetail_blockhead img{
    width: 22px;
    height: auto;
}
.articledetail_summary_title h2,
.articledetail_blockhead h2{
    font-size: 17px;
    line-height: 22px;
    color: #1B2430;
    font-family: "msyhbd";
}
.articledetail_more{
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 18px;
    color: #7A8A9C;
}
.articledetail_more:hover{
    color: #3399FB;
}
.articledetail_summary p{
    margin-top: 12px;
    font-size: 15px;
    line-height: 28px;
    color: #536476;
}
.articledetail_content{
    margin-top: 24px;
    padding: 0 28px 28px;
    font-size: 16px;
    line-height: 1.9;
    color: #344456;
    overflow: hidden;
}
.articledetail_content > *:first-child{
    margin-top: 0;
}
.articledetail_content img{
    display: block;
    max-width: 100% !important;
    height: auto !important;
    margin: 22px auto;
    border-radius: 12px;
    border: 1px solid #E8EFF7;
    background: #F7FAFD;
}
.articledetail_content > img:first-child{
    width: 100%;
    margin-top: 0;
    margin-bottom: 26px;
}
.articledetail_content h1,
.articledetail_content h2{
    margin-top: 34px;
    padding-left: 14px;
    border-left: 4px solid #3399FB;
    font-size: 19px;
    line-height: 28px;
    color: #1C2430;
    font-family: "msyhbd";
}
.articledetail_content h1{
    font-size: 22px;
    line-height: 32px;
}
.articledetail_content h2:first-child{
    margin-top: 0;
}
.articledetail_content h3{
    margin-top: 26px;
    font-size: 17px;
    line-height: 26px;
    color: #243244;
    font-family: "msyhbd";
}
.articledetail_content p{
    margin-top: 16px;
    font-size: 16px;
    line-height: 30px;
    color: #344456;
}
.articledetail_content p:empty{
    display: none;
}
.articledetail_content strong,
.articledetail_content b{
    color: #1F2C3B;
    font-family: "msyhbd";
}
.articledetail_content ul,
.articledetail_content ol{
    margin-top: 16px;
    padding-left: 24px;
}
.articledetail_content li{
    margin-top: 8px;
    font-size: 15px;
    line-height: 28px;
    color: #445568;
}
.articledetail_content li::marker{
    color: #3399FB;
    font-family: "msyhbd";
}
.articledetail_content blockquote{
    margin-top: 20px;
    padding: 16px 18px 16px 20px;
    background: linear-gradient(180deg, #F8FBFF 0%, #F4F8FD 100%);
    border-left: 4px solid #3399FB;
    border-radius: 0 10px 10px 0;
    font-size: 15px;
    line-height: 28px;
    color: #42576C;
}
.articledetail_content pre{
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: 12px;
    background: #10161F;
    color: #DCE8F5;
    font-size: 14px;
    line-height: 26px;
    overflow-x: auto;
}
.articledetail_content code{
    padding: 2px 6px;
    border-radius: 6px;
    background: #F1F6FC;
    color: #245C9A;
    font-family: "Consolas", "Monaco", monospace;
    font-size: 0.92em;
}
.articledetail_content pre code{
    padding: 0;
    background: transparent;
    color: inherit;
}
.articledetail_content table{
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    border: 1px solid #E4ECF5;
    border-radius: 10px;
    overflow: hidden;
}
.articledetail_content th,
.articledetail_content td{
    padding: 12px 14px;
    border: 1px solid #E4ECF5;
    font-size: 14px;
    line-height: 24px;
    color: #405166;
}
.articledetail_content th{
    background: #F5F9FE;
    color: #1F2C3B;
    font-family: "msyhbd";
}
.articledetail_codebox{
    margin-top: 20px;
    border-radius: 12px;
    overflow: hidden;
    background: #10161F;
    border: 1px solid #1D2835;
    box-shadow: 0px 12px 28px rgba(12, 21, 33, 0.18);
}
.articledetail_codehead{
    padding: 12px 16px;
    border-bottom: 1px solid #1F2B38;
    background: #161E29;
}
.articledetail_codehead span{
    font-size: 13px;
    line-height: 18px;
    color: #9DB1C7;
}
.articledetail_codebox pre{
    margin: 0;
    padding: 18px 18px 20px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13px;
    line-height: 24px;
    color: #E7EEF7;
    font-family: "Consolas", "Monaco", monospace;
}
.articledetail_figure{
    margin-top: 22px;
}
.articledetail_figure img{
    width: 100%;
    display: block;
    border-radius: 14px;
    box-shadow: 0px 12px 26px rgba(19, 64, 110, 0.12);
}
.articledetail_figure span{
    display: block;
    margin-top: 12px;
    font-size: 13px;
    line-height: 22px;
    color: #748397;
    text-align: center;
}
.articledetail_note{
    margin-top: 24px;
    padding: 18px 18px 16px;
    border-radius: 12px;
}
.articledetail_source strong{
    display: block;
    font-size: 16px;
    line-height: 22px;
    color: #2A3745;
    font-family: "msyhbd";
}
.articledetail_source{
    margin-top: 24px;
    font-size: 14px;
    line-height: 24px;
    color: #7A8796;
}
.articledetail_note strong{
    display: block;
    font-size: 14px;
    line-height: 22px;
    color: #6F4B33;
    font-family: "msyhbd";
}
.articledetail_note{
    background: #FFF8F4;
    border: 1px solid #F0DED0;
}
.articledetail_note p{
    margin-top: 10px;
    font-size: 14px;
    line-height: 25px;
    color: #7A6658;
}
.articledetail_prevnext{
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.articledetail_prevnext a{
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0;
    border: none;
    background: transparent;
}
.articledetail_prevnext a span{
    display: inline-block;
    font-size: 12px;
    line-height: 16px;
    color: #8A97A8;
    flex: 0 0 auto;
}
.articledetail_prevnext a strong{
    display: inline;
    margin-top: 0;
    font-size: 15px;
    line-height: 24px;
    color: #45576A;
    font-family: "msyhbd";
}
.articledetail_prevnext a:hover strong{
    color: #3399FB;
}
.articledetail_related{
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
}
.articledetail_related a{
    display: block;
    padding: 0 0 14px;
    border-bottom: 1px solid #EEF3F8;
}
.articledetail_related a strong{
    display: block;
    font-size: 16px;
    line-height: 26px;
    color: #2A3745;
    font-weight: 400;
}
.articledetail_related a p{
    display: none;
}
.articledetail_related a:hover strong{
    color: #3399FB;
}

/* game share detail page */
.gamedetail_badges{
    margin-bottom: 2px;
}
.gamedetail_titlebar{
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.gamedetail_titleicon{
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(180deg, #F5F8FC 0%, #EAF1F8 100%);
    border: 1px solid #E1E8F0;
    box-shadow: 0px 6px 16px rgba(18, 63, 109, 0.14);
}
.gamedetail_titleicon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gamedetail_titlebar h1{
    margin-top: 0;
}
.gamedetailpage .articledetail_mainpanel .articledetail_intro{
    padding-bottom: 18px;
}
.gamedetail_infobar_wrap{
    margin: 18px 28px 0;
    padding: 18px 20px 20px;
    border-radius: 12px;
    background: linear-gradient(180deg, #FAFCFF 0%, #F4F8FD 100%);
    border: 1px solid #E2EBF5;
}
.gamedetail_infobar_head{
    display: flex;
    align-items: center;
    gap: 8px;
}
.gamedetail_infobar_head img{
    width: 22px;
    height: auto;
}
.gamedetail_infobar_head h2{
    font-size: 17px;
    line-height: 22px;
    color: #1B2430;
    font-family: "msyhbd";
}
.gamedetail_infobar{
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.gamedetail_infoitem{
    padding: 14px 14px 12px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #E3EBF4;
}
.gamedetail_infoitem span{
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: #7A889A;
}
.gamedetail_infoitem strong{
    display: block;
    margin-top: 8px;
    font-size: 15px;
    line-height: 22px;
    color: #243140;
    font-family: "msyhbd";
}
.gamedetail_actions{
    margin: 20px 28px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 28px;
}
.gamedetail_download,
.gamedetail_secondary{
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 18px;
}
.gamedetail_download{
    background: linear-gradient(270deg, #3351FB 0%, #3399FB 100%);
    color: #FFFFFF;
}
.gamedetail_secondary{
    background: #F6FAFE;
    border: 1px solid #DDE9F6;
    color: #486174;
}
.gamedetail_summarybox{
    margin-top: 0;
}
.gamedetail_content h2{
    color: #1C2430;
}
.gamedetail_content img{
    width: auto !important;
    max-width: 70% !important;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
}
.gamedetail_codebox{
    margin-top: 18px;
    border-radius: 12px;
    overflow: hidden;
    background: #10161F;
    border: 1px solid #1D2835;
    box-shadow: 0px 12px 28px rgba(12, 21, 33, 0.18);
}
.gamedetail_codehead{
    padding: 12px 16px;
    border-bottom: 1px solid #1F2B38;
    background: #161E29;
}
.gamedetail_codehead span{
    font-size: 13px;
    line-height: 18px;
    color: #9DB1C7;
}
.gamedetail_codebox pre{
    margin: 0;
    padding: 18px 18px 20px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13px;
    line-height: 24px;
    color: #E7EEF7;
    font-family: "Consolas", "Monaco", monospace;
}
.gamedetail_gallery{
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.gamedetail_gallery img{
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    box-shadow: 0px 12px 26px rgba(19, 64, 110, 0.12);
}
.gamedetail_inlinepic{
    display: block;
    width: auto;
    max-width: 70% !important;
    height: auto !important;
    margin: 22px auto;
    border-radius: 14px;
    border: 1px solid #E4ECF5;
    box-shadow: 0px 12px 26px rgba(19, 64, 110, 0.1);
}
.gamedetail_content blockquote{
    color: #42576C;
}
.gamedetail_downloadlist{
    margin-top: 26px;
    padding: 18px 18px 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, #F8FBFF 0%, #F3F8FE 100%);
    border: 1px solid #E1EBF6;
}
.articledetail_content .gamedetail_downloadlist{
    padding: 18px 18px 16px;
}
.gamedetail_downloadlist_head{
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
}
.articledetail_content .gamedetail_downloadlist_head{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.articledetail_content .gamedetail_downloadlist_head img,
.gamedetail_downloadlist_head img{
    display: block;
    width: 22px;
    max-width: 22px;
    height: auto !important;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.gamedetail_content .gamedetail_downloadlist .gamedetail_downloadlist_head h2,
.articledetail_content .gamedetail_downloadlist_head h2,
.gamedetail_downloadlist_head h2{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 18px;
    line-height: 24px;
    color: #1B2430;
    font-family: "msyhbd";
}
.gamedetail_downloaditems{
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.articledetail_content .gamedetail_downloaditems{
    margin-top: 14px;
    padding: 0;
}
.gamedetail_downloaditems a{
    display: block;
    padding: 14px 14px 12px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid #E3EBF4;
    text-decoration: none;
}
.articledetail_content .gamedetail_downloaditems a{
    margin: 0;
    padding: 14px 14px 12px;
    border: 1px solid #E3EBF4;
}
.gamedetail_downloaditems a strong{
    display: block;
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: #223040;
    font-family: "msyhbd";
    font-weight: 400;
}
.articledetail_content .gamedetail_downloaditems a strong{
    display: block;
    margin: 0;
    font-size: 15px;
    line-height: 22px;
}
.gamedetail_downloaditems a span{
    display: none;
}
.gamedetail_downloaditems a:hover{
    border-color: #D2E4F7;
    background: #FCFEFF;
}
.gamedetail_downloaditems a:hover strong{
    color: #3399FB;
}
.gamedetail_sideinfo{
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gamedetail_sideinfo div{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid #EEF3F8;
}
.gamedetail_sideinfo div:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.gamedetail_sideinfo span{
    font-size: 13px;
    line-height: 20px;
    color: #7A8898;
}
.gamedetail_sideinfo strong{
    font-size: 13px;
    line-height: 20px;
    color: #243140;
    font-family: "msyhbd";
    text-align: right;
}

/* game list page */
.gamelistmain{
    width: 1200px;
    margin: 20px auto 60px;
}
.gamelist_layout{
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.gamelist_left{
    flex: 1;
    min-width: 0;
}
.gamelist_panel{
    background: #FFFFFF;
    border: 1px solid #E8EFF7;
    border-radius: 12px;
    box-shadow: 0px 10px 24px rgba(17, 69, 125, 0.05);
    overflow: hidden;
}
.gamelist_filterbox{
    padding: 22px 24px 18px;
    border-bottom: 1px solid #EEF3F8;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
}
.gamelist_list{
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.gamelist_item{
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 16px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #EBF1F7;
    box-shadow: 0px 8px 20px rgba(17, 69, 125, 0.04);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.gamelist_item:hover{
    transform: translateY(-1px);
    border-color: #D8E7F7;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
    box-shadow: 0px 12px 28px rgba(17, 69, 125, 0.07);
}
.gamelist_thumb{
    width: 104px;
    flex: 0 0 auto;
    position: relative;
    padding-top: 22px;
}
.gamelist_thumb span{
    position: absolute;
    left: 0;
    top: 0;
    padding: 5px 10px;
    border-radius: 14px;
    background: rgba(17, 36, 58, 0.78);
    color: #FFFFFF;
    font-size: 12px;
    line-height: 16px;
}
.gamelist_icon{
    width: 104px;
    height: 104px;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(180deg, #F6F9FC 0%, #ECF2F8 100%);
    border: 1px solid #E3EAF2;
    box-shadow: 0px 6px 18px rgba(16, 74, 132, 0.12);
}
.gamelist_icon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gamelist_icon_empty{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.gamelist_icon_empty span{
    position: static;
    padding: 0;
    background: transparent;
    color: #8A97A8;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
}
.gamelist_body{
    flex: 1;
    min-width: 0;
}
.gamelist_topmeta{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.gamelist_topmeta span{
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 14px;
    background: #EDF6FF;
    color: #3399FB;
    font-size: 12px;
    line-height: 16px;
}
.gamelist_topmeta em{
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    color: #8A97A8;
}
.gamelist_body h3{
    margin-top: 12px;
    font-size: 24px;
    line-height: 32px;
    color: #1C2430;
    font-family: "msyhbd";
}
.gamelist_body p{
    margin-top: 10px;
    font-size: 14px;
    line-height: 24px;
    color: #607083;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gamelist_meta{
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.gamelist_meta span{
    padding: 5px 10px;
    border-radius: 14px;
    background: #F5F8FB;
    color: #728093;
    font-size: 12px;
    line-height: 16px;
}

/* latest updates page */
.updatemain{
    width: 1200px;
    margin: 20px auto 60px;
}
.updatehero{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 24px;
    padding: 28px 28px 26px;
    border-radius: 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
    border: 1px solid #E7EEF6;
    box-shadow: 0px 12px 28px rgba(17, 69, 125, 0.05);
}
.updatehero_simple{
    padding: 24px 28px 22px;
}
.updatehero_simple .updatehero_left{
    max-width: 860px;
}
.updatehero_left{
    flex: 1;
    min-width: 0;
}
.updatehero_badge{
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 16px;
    background: #EDF6FF;
    color: #3399FB;
    font-size: 13px;
    line-height: 16px;
}
.updatehero h1{
    margin-top: 16px;
    font-size: 34px;
    line-height: 42px;
    color: #1C2430;
    font-family: "msyhbd";
}
.updatehero p{
    margin-top: 14px;
    max-width: 760px;
    font-size: 15px;
    line-height: 28px;
    color: #617081;
}
.updatehero_stats{
    width: 320px;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 12px;
}
.updatehero_stats div{
    padding: 16px 18px 14px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #E4ECF5;
}
.updatehero_stats strong{
    display: block;
    font-size: 28px;
    line-height: 34px;
    color: #1E2A37;
    font-family: "msyhbd";
}
.updatehero_stats span{
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 18px;
    color: #748396;
}
.updatefilter{
    margin-top: 20px;
    padding: 20px 24px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #E8EFF7;
}
.updatefilter_row{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #EEF3F8;
}
.updatefilter_row:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.updatefilter_row span{
    width: 74px;
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 36px;
    color: #334155;
    font-family: "msyhbd";
}
.updatefilter_items{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.updatefilter_items a{
    padding: 8px 14px;
    border-radius: 18px;
    background: #F7FAFD;
    border: 1px solid #E7EDF5;
    font-size: 14px;
    line-height: 18px;
    color: #516174;
}
.updatefilter_items a.active,
.updatefilter_items a:hover{
    color: #3399FB;
    border-color: #3399FB;
    background: #F0F8FF;
}
.updatecontent{
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.updateleft{
    flex: 1;
    min-width: 0;
}
.updateright{
    width: 300px;
    flex: 0 0 auto;
}
.updategroup_stream{
    padding-bottom: 18px;
}
.updategroup{
    padding: 24px 24px 26px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #E8EFF7;
    box-shadow: 0px 10px 24px rgba(17, 69, 125, 0.05);
}
.updategroup + .updategroup{
    margin-top: 20px;
}
.updategroup_head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.updategroup_head > div{
    display: flex;
    align-items: center;
    gap: 8px;
}
.updategroup_head img{
    width: 22px;
    height: auto;
}
.updategroup_head h2{
    font-size: 22px;
    line-height: 28px;
    color: #1B2430;
    font-family: "msyhbd";
}
.updategroup_head span{
    font-size: 13px;
    line-height: 18px;
    color: #7A8A9C;
}
.updatelist{
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.updatestream{
    margin-top: 18px;
    display: flex;
    flex-direction: column;
}
.updatestream_item{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #EEF3F8;
}
.updatestream_item:last-child{
    border-bottom: none;
    padding-bottom: 6px;
}
.updatestream_date{
    width: 62px;
    flex: 0 0 auto;
    padding-top: 2px;
}
.updatestream_date strong{
    display: block;
    font-size: 14px;
    line-height: 18px;
    color: #3B4B5C;
    font-family: "msyhbd";
}
.updatestream_date span{
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 16px;
    color: #8A97A8;
}
.updatestream_icon{
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E4EBF5;
    font-size: 16px;
    line-height: 20px;
    font-family: "msyhbd";
}
.updatestream_icon_prompt{
    background: #EDF6FF;
    color: #3399FB;
}
.updatestream_icon_tutorial{
    background: #EFFBF4;
    color: #22A35A;
}
.updatestream_icon_article{
    background: #FFF6E8;
    color: #E08A16;
}
.updatestream_icon_game{
    background: #F4EEFF;
    color: #7C5CDE;
}
.updatestream_body{
    flex: 1;
    min-width: 0;
}
.updatestream_top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.updatestream_top strong{
    flex: 1;
    min-width: 0;
    font-size: 18px;
    line-height: 28px;
    color: #1D2733;
    font-family: "msyhbd";
}
.updatestream_top span{
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 16px;
}
.updatestream_body p{
    margin-top: 8px;
    font-size: 14px;
    line-height: 24px;
    color: #677587;
}
.updatestream_meta{
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.updatestream_meta span{
    padding: 5px 10px;
    border-radius: 14px;
    background: #F5F8FB;
    color: #728093;
    font-size: 12px;
    line-height: 16px;
}
.updateitem{
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #EEF3F8;
}
.updateitem:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.updateitem_time{
    width: 56px;
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 20px;
    color: #8A97A8;
    padding-top: 2px;
}
.updateitem_main{
    flex: 1;
    min-width: 0;
}
.updateitem_top{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.updateitem_top span{
    padding: 5px 10px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 16px;
}
.updateitem_top .type_prompt{
    background: #EDF6FF;
    color: #3399FB;
}
.updateitem_top .type_tutorial{
    background: #EFFBF4;
    color: #22A35A;
}
.updateitem_top .type_article{
    background: #FFF6E8;
    color: #E08A16;
}
.updateitem_top .type_game{
    background: #F4EEFF;
    color: #7C5CDE;
}
.updateitem_top strong{
    font-size: 18px;
    line-height: 28px;
    color: #1D2733;
    font-family: "msyhbd";
}
.updateitem p{
    margin-top: 8px;
    font-size: 14px;
    line-height: 24px;
    color: #677587;
}
.updateitem_meta{
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.updateitem_meta span{
    padding: 5px 10px;
    border-radius: 14px;
    background: #F5F8FB;
    color: #728093;
    font-size: 12px;
    line-height: 16px;
}
.updateside_stats{
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.updateside_stats div{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid #EEF3F8;
}
.updateside_stats div:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.updateside_stats span{
    font-size: 13px;
    line-height: 20px;
    color: #7A8898;
}
.updateside_stats strong{
    font-size: 14px;
    line-height: 20px;
    color: #243140;
    font-family: "msyhbd";
}
.updateview{
    display: none;
}
.updateview.updateview_active{
    display: block;
}
.update_promptgrid{
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.update_promptgrid .promptcard{
    min-height: 100%;
}
.update_tutoriallist{
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.update_tutoriallist .tutorialitem{
    margin: 0;
}
.update_articlelist{
    margin-top: 18px;
    display: flex;
    flex-direction: column;
}
.update_articleitem{
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid #EEF3F8;
}
.update_articleitem:last-child{
    border-bottom: none;
    padding-bottom: 6px;
}
.update_articlemeta{
    display: flex;
    align-items: center;
    gap: 12px;
}
.update_articlemeta span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    background: #FFF4E7;
    color: #C87816;
    font-size: 12px;
    line-height: 16px;
}
.update_articlemeta em{
    font-size: 12px;
    line-height: 18px;
    color: #94A0AE;
    font-style: normal;
}
.update_articleitem h3{
    margin-top: 12px;
    font-size: 22px;
    line-height: 34px;
    color: #1D2733;
    font-family: "msyhbd";
}
.update_articleitem p{
    margin-top: 10px;
    font-size: 14px;
    line-height: 24px;
    color: #6B7787;
}
.update_gamelist{
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.update_gamelist .gamelist_item{
    margin: 0;
}
@media (max-width: 1024px){
    .update_promptgrid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px){
    .update_promptgrid{
        grid-template-columns: 1fr;
    }
}

/* global title hover */
.homeuniform_card strong,
.homeuniform_card_big strong,
.hometool_grid strong,
.hometopic_grid strong,
.homeupdate_list em,
.homecontent_listhead strong,
.homecontent_miniitem strong,
.homeapps_grid strong,
.homeapps_list strong,
.hometopics_grid strong,
.hometopics_list strong,
.homefeed_list strong,
.homecourse_grid strong,
.homewide_items strong,
.homevisual_grid strong,
.promptcard h3,
.promptside_rank a p,
.promptside_recommend strong,
.articleside_media_body strong,
.promptdetail_relatedcard strong,
.promptdetail_prevnext_text strong,
.promptdetail_hotnews_list a p,
.tutorialitem h3,
.tutorialside_box .promptside_rank a p,
.tagwall_item strong,
.update_articleitem h3{
    transition: color 0.2s ease;
}

.homeuniform_card:hover strong,
.hometool_grid a:hover strong,
.homecontent_miniitem:hover strong,
.homeapps_grid a:hover strong,
.homeapps_list a:hover strong,
.hometopics_grid a:hover strong,
.hometopics_list a:hover strong,
.homefeed_list a:hover strong,
.homecourse_grid a:hover strong,
.homewide_items a:hover strong,
.homevisual_grid a:hover strong,
.promptcard:hover h3,
.promptside_rank a:hover p,
.promptside_recommend a:hover strong,
.articleside_media_item:hover strong,
.promptdetail_relatedcard:hover strong,
.promptdetail_prevnext_text:hover strong,
.promptdetail_hotnews_list a:hover p,
.tutorialitem:hover h3,
.tutorialside_box .promptside_rank a:hover p,
.tagwall_item:hover strong,
.update_articleitem:hover h3,
.homeupdate_list a:hover em{
    color: #3399FB;
}

.homeuniform_card_big:hover strong,
.hometopic_grid a:hover strong{
    color: #EAF6FF;
}