.xyll-tit ul {
    display: flex;
    flex-wrap: wrap;
}

.xyll-tit ul li {
    margin-right: .3rem;
}

.xyll-tit ul li:last-child {
    margin-right: 0;
}

.xyll-tit ul li a {
    display: block;
    line-height: 0.39rem;
    background-color: #ffffff;
    border-radius: 0.19rem;
    border: solid 1px #d8d8d8;
    color: #000000;
    font-size: 0.16rem;
    padding: 0 .34rem;
}

.xyll-tit ul li.on a {
    background-color: #c11e23;
    color: #fff;
    border-color: #c11e23;
}

.xyll-main {
    margin-top: .5rem;
    position: relative;
    overflow: hidden;
}

.xyll-box+.xyll-box {
    margin-top: .4rem;
}

.xyll-box {
    position: relative;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    z-index: -9;
    transition: all 0.5s;
    transform: translateY(100%);
}
.xyll-box.on{
    position: relative;
    z-index: 9;
    opacity: 1;
    transform: translateY(0);
}
.xyll-box::before {
    content: "";
    position: absolute;
    left: .2rem;
    top: .3rem;
    bottom: -0.4rem;
    border-left: 1px dashed #a58989;
}

.xyll-box:last-child:before {
    bottom: 0;
}

.xyll-name {}

.xyll-name h3 {
    position: relative;
    padding-left: .45rem;
    font-family: SourceHanSerifCN-Bold;
    font-size: 0.2rem;
    font-weight: normal;
    line-height: 0.3rem;
    color: #232323;
    display: flex;
    align-items: center;
}

.xyll-name h3::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.12rem;
    width: 0.1rem;
    height: 0.1rem;
    background-color: #eae5dd;
    border: solid 0.03rem #a90f13;
    border-radius: 50%;
}

.xyll-name h3::after {
    content: "";
    display: block;
    flex: 1;
    min-width: 0;
    height: .1rem;
    background: url(../images/xyll-list-line.png) repeat-x;
    background-position: center center;
    background-size: auto 0.04rem;
    margin-left: .1rem;
}

.xyll-list ul {
    display: flex;
    flex-wrap: wrap;
    padding-top: .15rem;
    padding-left: .45rem;
}

.xyll-list ul li {
    width: 25%;
    display: flex;
    margin-top: .1rem;
}

.xyll-list ul li a {
    display: block;
    max-width: 100%;
    font-size: 0.16rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.46rem;
    color: #232323;
    border-radius: 0.23rem;
    transition: all .5s;
    padding-left: .26rem;
    background: url(../images/xyll-bef.png) no-repeat;
    background-position: .1rem center;
    background-size: 0.08rem auto;
}


@media screen and (min-width:1025px) {

    .xyll-list ul li a:hover {
        background-color: #ffffff;
        box-shadow: 0.03rem 0.02rem 0.1rem 0rem rgba(193, 30, 35, 0.3);
        border-radius: 0.23rem;
        color: #c11e23;
        font-weight: 600;
        padding: 0 .27rem 0 .57rem;
        background: url(../images/xyll-bef2.png) no-repeat;
        background-position: .21rem center;
        background-size: 0.2rem auto;
        background-color: #ffffff;
    }
}

@media screen and (max-width:1024px) {
    .xyll-list ul li {
        width: 50%;
    }
    .xyll-tit ul li a{
        padding: 0 .15rem;
    }
    .xyll-tit ul li{
        margin-right: .1rem;
    }
    .xyll-main{
        margin-top: .35rem;
    }
}

@media screen and (max-width:768px) {
    .xyll-list ul li {
        width: 100%;
        margin-top: 0;
    }
    .xyll-list ul{
        padding-left: .35rem;
    }
}