@keyframes left {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(-15px);
    }

    100% {
        transform: translateX(-6px);
    }
}

@keyframes right {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(15px);
    }

    100% {
        transform: translateX(6px);
    }
}

.hero-card-list {
    width: 100%;
    margin: 0 auto;
    display: none;
    /* display: flex;    justify-content: flex-start;    flex-wrap: wrap; */
    /* align-content: flex-start; */
}

.hero-card-list.on {
    /* display: block; */
    margin-top: 50px;
    display: grid;
    /* grid-template-columns: repeat(6, 1fr); */
    /* grid-template-columns: repeat(auto-fill, 181px); */
    grid-template-columns: repeat(4, 1fr);
    column-gap: 22.5px;
    /* 设置列间距 */
    padding: 0;
}

.hero-card {
    width: 200px;
    height: 215px;
    position: relative;
    border-radius: 6px;
    /* overflow: hidden; */
    margin-right: auto;
    display: inline-block;
    margin-bottom: 40px;
    /* margin-right: 34px;    margin-bottom: 34px; */
}

.hero-card img.hero {
    /* min-height: 100%;    min-width: 100%; */
    width: 100%;
    height: 100%;
    position: absolute;
    left: 55%;
    margin-left: -92px;
    transition: 0.3s;
    object-fit: cover;
}

.hero-card img.hero:hover {
    scale: 1.1;
}

.hero-card:nth-child(6n) {
    margin-right: 0px;
}

.hero-card a {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    /* overflow: hidden; */
}

.hero-label {
    position: absolute;
    z-index: 2;
    width: 27px;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
}

.hero-label .hero-name-box {
    writing-mode: vertical-rl;
    font-family: "HYXLSJ";
    white-space: nowrap;
    letter-spacing: 3px;
    line-height: 27px;
    color: #f1e7d5;
}

.ren {
    background: linear-gradient(to right, #ad362d, #d65e55);
}

.mo {
    background: linear-gradient(to right, #3d599b, #5f7fc5);
}

.shen {
    background: linear-gradient(to right, #a4803b, #d3b978);
}

.country {
    margin-top: 20px;
    /* font-size: 28px; */
    margin-bottom: 0px;
    /* font-family: HYXLSJ; */
    display: block;
    width: 100%;
    height: 23px;
}

.ren .country {
    /* background: url(../images/ren.png) center top no-repeat; */
    background-size: 20px 14px;
}

.mo .country {
    /* background: url(../images/mo.png) center top no-repeat; */
    background-size: 20px 14px;
}

.wu .country {
    background: url(../images/wu.png) center top no-repeat;
    background-size: 20px 14px;
}

.qun .country {
    background: url(../images/qun.png) center top no-repeat;
    background-size: 20px 14px;
}

.shen .country {
    /* background: url(../images/shen.png) center top no-repeat; */
    background-size: 20px 14px;
}

.jin .country {
    background: url(../images/jin.png) center top no-repeat;
    background-size: 20px 14px;
}

.hero-label .sp {
    writing-mode: horizontal-tb;
    letter-spacing: -1px;
    font-size: 17px;
    line-height: 17px;
}

.hero-name-box {
    color: #e4a840;
    font-size: 19px;
    color: white;
}

.hero-life {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 100%;
}

.hero-life li {
    height: 14px;
    margin-bottom: 3px;
    font-size: 12px;
    color: white;
}

.hero-life li img {
    vertical-align: top;
    width: 9px;
}

.hero-life li.xue-plus {
    margin-bottom: 13px;
}

.hero-life li.xue-plus span {
    margin-top: -6px;
    display: inline-block;
    vertical-align: top;
}

@media screen and (max-width: 1300px) {
    .hero-head-inner {
        width: 100%;
        margin-left: 0;
        left: 0;
    }

    .hero-head-inner::before {
        display: inline-block;
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 3.0rem;
        background: linear-gradient(to top, #f6f4f1, #f6f4f1, rgba(0, 0, 0, 0));
    }

    .hero-nav-list {
        min-height: 60px;
        height: auto;
        border-bottom: 0px;
    }
}

@media screen and (max-width: 1300px) and (min-width: 750px) {
    .nav-box {
        right: 100px;
    }

    .hero-card-list.on {
        justify-content: center;
    }

    .hero-list-box {
        padding: 0 30px;
    }
}

@media screen and (max-width: 750px) {
    .hero-head-box {
        height: 8.9rem;
        margin-top: 0px;
    }

    .hero-head-inner {
        height: 100%;
    }

    .slogan {
        width: 1.69rem;
        margin-top: 1.4rem;
        margin-left: 0.45rem;
    }

    .hero-inner-content {
        padding-top: 0rem;
        margin-top: -0.7rem;
        background: url(../images/inner-page-bg_e2748290643f4581953b80a31ff091f7.jpg) center top no-repeat;
        background-size: cover;
    }

    .nav-box {
        width: 5.94rem;
        bottom: 0.8rem;
        right: auto;
        left: 50%;
        margin-left: -2.97rem;
    }

    .general-nav .swiper-slide {
        height: 1.85rem;
    }

    .general-nav .swiper-slide img {
        width: 1.1rem;
    }

    .general-nav .swiper-slide div {
        width: 1.1rem;
        height: 1.1rem;
        margin-top: 0.15rem;
        margin-bottom: 0.15rem;
    }

    .general-nav .swiper-slide:hover div,
    .general-nav .swiper-slide.swiper-slide-thumb-active div {
        width: 1.4rem;
        height: 1.4rem;
        margin-top: 0px;
        scale: 1;
        margin-bottom: 0.0rem;
    }

    .general-nav .swiper-slide:hover img,
    .general-nav .swiper-slide.swiper-slide-thumb-active img {
        width: 1.4rem;
    }

    .general-nav p {
        font-size: 0.24rem;
        margin-top: 0rem;
        color: #404040;
        opacity: 1;
    }

    .general-nav .swiper-slide:hover p,
    .general-nav .swiper-slide.swiper-slide-thumb-active p {
        color: #a98664;
        text-shadow: none;
        padding-top: 0.1rem;
    }

    .hero-swiper-prev,
    .hero-swiper-next {
        width: 0.57rem;
        height: 0.45rem;
        position: absolute;
        top: 0.7rem;
        transition: 0.3s;
    }

    .hero-swiper-prev {
        background: url(../images/match-up.png) center center no-repeat;
        background-size: contain;
        left: -0.5rem;
        cursor: pointer;
    }

    .hero-swiper-next {
        background: url(../images/match-down.png) center center no-repeat;
        background-size: contain;
        right: -0.5rem;
        cursor: pointer;
    }

    .hero-list-box {
        padding: 0 0.38rem;
    }

    .hero-nav-list {
        min-height: auto;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .hero-nav-list li {
        width: 1.3rem;
        font-size: 0.26rem;
        height: 0.6rem;
        line-height: 0.6rem;
        vertical-align: top;
    }

    .hero-nav-list li:nth-child(5) span {
        display: none;
    }

    .hero-nav-list li.on {
        border-bottom: 0.0rem solid #b39273;
    }

    .hero-nav-list li:hover {
        border-bottom: 0px;
    }

    .hero-card {
        width: 2.17rem;
        height: 3.1rem;
        margin-bottom: 0.2rem;
    }

    .hero-list-box>div:nth-child(4) {
        margin-top: 0.5rem !important;
    }

    .hero-label {
        width: 0.33rem;
    }

    .hero-list-box .country {
        width: 100%;
        height: 0.24rem;
        margin-top: 0.18rem;
        /* margin-bottom: 0.13rem; */
        margin-bottom: 0.1rem;
    }

    .hero-list-box .ren .country {
        /* background: url(../../images/ren.png) center top no-repeat; */
        background-size: 0.26rem auto;
    }

    .hero-list-box .qun .country {
        background-size: 0.3rem auto;
    }

    .hero-list-box .shen .country {
        background-size: 0.26rem auto;
    }

    .hero-list-box .mo .country {
        background-size: 0.28rem auto;
    }

    .hero-list-box .wu .country {
        background-size: 0.26rem auto;
    }

    .hero-list-box .jin .country {
        background-size: 0.28rem auto;
    }

    .hero-list-box .sp {
        font-size: 0.2rem;
    }

    .hero-list-box .hero-name-box {
        letter-spacing: 0.04rem;
        font-size: 0.24rem;
        line-height: 0.34rem;
    }

    .hero-list-box .hero-name-box {
        letter-spacing: 0.04rem;
        font-size: 0.24rem;
        line-height: 0.34rem;
    }

    .hero-list-box .hero-life li {
        height: 0.14rem;
        margin-bottom: 5px;
    }

    .hero-card img.hero {
        margin-left: 0px;
        transform: translateX(-50%);
    }

    .hero-card-list.on {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 0.1rem;
    }

    .hero-swiper-prev,
    .hero-swiper-next:hover {
        animation: none;
    }
}