body.list_works .l-banner{
    height: 3.5rem;
}
body.list_works .col_news_list .news{
    position: relative;
    float: left;
    width: 23%;
    margin-right: 2.66%;
    margin-bottom: 0.3rem;
    border-radius: 0.1rem;
    overflow: hidden;
    box-shadow: 0 0 0.1rem 0 #0000004d;
}
body.list_works .col_news_list .news:nth-child(4n){margin-right: 0;}
body.list_works .col_news_list .news>a{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
body.list_works .col_news_list .news_imgs{
    padding-top: 56.25%;
}
body.list_works .col_news_list .news_con{
    position: absolute;
    z-index: 11;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 0.2rem;
    box-sizing: border-box;
    background: linear-gradient(#00000001,#0000004d);
    opacity: 0;
    transition: 0.4s;
}
body.list_works .col_news_list .news_title{
    font-size: 0.2rem;
    color: #fff;
}
body.list_works .col_news_list .short_title{
    font-size: 0.14rem;
    color: #fff;
}
body.list_works .col_news_list .news:hover img{transform: scale(1.05);}
body.list_works .col_news_list .news:hover .news_con{
    opacity: 1;
}
body.list_works .col_news_list .news:hover .news_title,
body.list_works .col_news_list .news:hover .short_title{
    animation: jump 0.4s linear;
}
body.list_works .col_news_list .news:hover .short_title{
    animation-delay: 0.07s;
}

body.list_works .right_menu{
    position: fixed;
    z-index: 50;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    box-shadow: 0 0 0.1rem 0 #00000033;
    border-radius: 0.1rem;
    padding: 0.1rem;
}
body.list_works .right_menu .menu_title .title_box{
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 0.01rem solid #ff64094d;
    font-size: 0.14rem;
    font-weight: bold;
    line-height: 0.28rem;
    margin-bottom: 0.1rem;
}
body.list_works .right_menu .menu_title .title_box::after{
    content: '';
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: -0.08rem;
    transform: translateX(-50%);
    display: block;
    width: 0.1rem;
    height: 0.01rem;
    background-color: var(--mainColor1);
}
body.list_works .right_menu .menu_title .title_box .xian{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 0.12rem;
    height: 0.1rem;
    flex-shrink: 0;
}
body.list_works .right_menu .menu_title .title_box .xian>div{
    width: 100%;
    height: 0.02rem;
    background-color: var(--mainColor1);
}
body.list_works .right_menu .menu_title .title_box>a{
    color: var(--mainColor1);
}

body.list_works .right_menu .menu_item>a{
    position: relative;
    display: block;
    font-size: 0.12rem;
    color: var(--mainColor1);
    line-height: 0.22rem;
    padding-left: 0.2rem;
    transition: 0.4s;
}
body.list_works .right_menu .menu_item>a:hover{font-size: 0.13rem;}
body.list_works .right_menu .menu_item>a::before{
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 0.12rem;
    height: 0.12rem;
    background-color: var(--mainColor1);
    border-radius: 50%;
}
body.list_works .right_menu .menu_item:nth-child(1)>a{color: #9eea07;}
body.list_works .right_menu .menu_item:nth-child(2)>a{color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 80%, transparent);}
body.list_works .right_menu .menu_item:nth-child(3)>a{color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 80%, transparent);}
body.list_works .right_menu .menu_item:nth-child(4)>a{color: #00B2FF;}
body.list_works .right_menu .menu_item:nth-child(5)>a{color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 80%, transparent);}
body.list_works .right_menu .menu_item:nth-child(6)>a{color: #FFB700;}
body.list_works .right_menu .menu_item:nth-child(7)>a{color: #FFA000;}
body.list_works .right_menu .menu_item:nth-child(8)>a{color: #ed6904;}
body.list_works .right_menu .menu_item:nth-child(9)>a{color: #f35f13;}
body.list_works .right_menu .menu_item:nth-child(10)>a{color: #7b57f2;}

body.list_works .right_menu .menu_item:nth-child(1)>a::before{background-color: #9eea07;}
body.list_works .right_menu .menu_item:nth-child(2)>a::before{background-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 80%, transparent);}
body.list_works .right_menu .menu_item:nth-child(3)>a::before{background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 80%, transparent);}
body.list_works .right_menu .menu_item:nth-child(4)>a::before{background-color: #00B2FF;}
body.list_works .right_menu .menu_item:nth-child(5)>a::before{background-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 80%, transparent);}
body.list_works .right_menu .menu_item:nth-child(6)>a::before{background-color: #FFB700;}
body.list_works .right_menu .menu_item:nth-child(7)>a::before{background-color: #FFA000;}
body.list_works .right_menu .menu_item:nth-child(8)>a::before{background-color: #ed6904;}
body.list_works .right_menu .menu_item:nth-child(9)>a::before{background-color: #f35f13;}
body.list_works .right_menu .menu_item:nth-child(10)>a::before{background-color: #7b57f2;}

body.list_works .right_menu .menu_title .title_box>a,
body.list_works .right_menu .menu_item>a{
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: 0.4s;
}
body.list_works .right_menu .menu_title .title_box .xian{margin-right: 0;transition: 0.4s;}
body.list_works .right_menu .menu_item>a{padding-left: 0.12rem;transition: 0.4s;}

body.list_works .right_menu:hover .menu_title .title_box .xian{margin-right: 0.1rem;}
body.list_works .right_menu:hover .menu_item>a{padding-left: 0.2rem;}
body.list_works .right_menu:hover .menu_title .title_box>a,
body.list_works .right_menu:hover .menu_item>a{max-width: 1.5rem;}
@keyframes jump{
    0%{transform: translateY(100%)}
    50%{transform: translateY(-20%)}
    100%{transform: translateY(0)}
}
@media screen and (max-width: 767px){
    body.list_works .col_news_list .news{
        width:48%;
        margin:10px 1%;
    }
    body.banner_list .list_tt .title{font-size:26px;}
}
@media screen and (max-width: 479px){
    body.list_works .col_news_list .news{
        float:none;
        width:100%;
        margin:10px 0;
    }
}