@keyframes example1 {
    0% {
        transform: translate(-100px);
        opacity: 0;
    }

    100% {
        transform: translate(0);
        opacity: 1;
    }
}


@keyframes example3 {
    0% {
        transform: translate(0, 100px);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes example3_1 {
    0% {
        transform: translate(0, 50px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@media screen and (max-width: 1199px) {
    .index_pc_wrap {
        display: none;
    }

    .index_view_wrap {
        display: block;
        background: #1B2122;
        position: relative;
        z-index: 1;
    }

    .footers {
        position: relative;
        z-index: 1;
    }

    .lishi_mainList {
        width: 100%;

    }

    .lishi_mainList li {
        position: relative;
        width: 100%;
        min-height: 2.28rem;
    }

    .lishi_bg {
        width: 100%;
    }

    .lishi_txt {
        position: absolute;
        top: 1.07rem;
        font-size: 0.14rem;
        line-height: 0.22rem;
        font-family: TsangerYunHei-W04;
        color: #FFFFFF;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }


    .lishi_txt p:nth-of-type(1) {
        font-size: 0.24rem;
        line-height: 0.32rem;
        color: var(--theme-color);
        font-family: TsangerYunHei-W05;
        margin-bottom: 0.16rem;
    }


    .lishi_txt p:nth-of-type(2) {
        margin-bottom: 0.03rem;
    }

    .lishi_txt p {
        display: none;
    }

    .lishi_txt p.example3_1 {
        animation: example3_1 1s ease-out 0s backwards;

    }


    .lishi_mainList li:nth-child(2) div {
        padding-right: 25.6%;
        align-items: flex-end;
    }
    .lishi_mainList li:nth-child(2) div p:nth-of-type(2){
        text-align: right;
    }
    .lishi_mainList li:nth-child(3) div {
        padding-left: 39.2%;
    }

    .lishi_mainList li:nth-child(4) div {
        padding-right: 28.4%;
        align-items: flex-end;
    }
    .lishi_mainList li:nth-child(4) div p:nth-of-type(2){
        text-align: right;
    }
    .lishi_mainList li:nth-child(5) div {
        padding-left:28.53%;
    }
    .lishi_mainList li:nth-child(5) div p:nth-of-type(2){
        padding-left: 0.24rem;
    }
    .lishi_mainList li:nth-child(6) div {
        padding-right: 35.6%;
        align-items: flex-end;
    }
    .lishi_mainList li:nth-child(6) div p:nth-of-type(2){
        padding-right: 0.42rem;
        text-align: right;
    }

    .lishi_mainList li:nth-child(7) div {
        padding-left:38.93%;
    }
    .lishi_mainList li:nth-child(7) div p:nth-of-type(2){
        padding-left: 0.89rem;
    }
    .lishi_mainList li:nth-child(8) div {
        padding-right: 46.27%;
        align-items: flex-end;
    }
    .lishi_mainList li:nth-child(8) div p:nth-of-type(2){
        padding-right: 0.53rem;
        text-align: right;
    }
    .lishi_mainList li:last-child div {
        height:8.12rem;
        padding-left:38.9%;
    }
    .lishi_mainList li:last-child div p:nth-of-type(2){
        padding-left: 0.41rem;
    }
    .lishi_mainList li:last-child div img{
        height: 22px;
        margin-left: 10px;
    }
    .lishi_menuList {
        position: fixed;
        left: 0;
        top: 2.3rem;
        color: #A4A6A7;
        font-size: 0.14rem;
        font-family: TsangerYunHei-W04;
        line-height: 0.14rem;
    }

    .lishi_menuList li {
        display: flex;
        align-items: center;
        margin-bottom: 0.32rem;
    }

    .lishi_menuList li span:first-child {
        width: 0.15rem;
        height: 0.02rem;
        background: #A4A6A7;
        margin-right: 0.06rem;
    }

    .lishi_menuList li.tab {
        color: #FFFFFF;
    }

    .lishi_menuList li.tab span:first-child {
        background: #FFFFFF;
    }
}

@media all and (max-width: 1560px)and (min-width: 1200px) {
    .index_pc_wrap {
        display: block;
    }

    .index_view_wrap {
        display: none;
    }

    .lishi_swiper_wrap {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
        background: #1b2122;
    }

    .mySwiper1 {
        width: 100%;
        height: 100vh;
    }


    .mySwiper1 .swiper-slide {
        width: 100%;
        height: 100%;
        position: relative;
    }


    .mySwiper1 .swiper-slide > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .swiper_pagination1 .swiper-pagination {
        bottom: 0;
        display: flex;
        justify-content: center;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+ */
        user-select: none; /* Standard syntax */
    }

    .swiper_pagination1 .swiper-pagination-bullet {
        height: 16px;
        font-size: 10px;
        color: #A4A6A7;
        font-family: TsangerYunHei-W04;
        opacity: 1;
        border-radius: 0;
        background: transparent;
        display: flex;
        width: 12.82%;
    }

    .swiper_pagination1 .swiper-pagination-bullet span:first-child {
        width: 1px;
        height: 16px;
        background: #A4A6A7;
    }

    .swiper_pagination1 .swiper-pagination-bullet span:nth-child(2) {
        margin-left: 4px;
    }

    .swiper_pagination1 .swiper-pagination-bullet-active span:first-child {
        background: #FFFFFF;
    }

    .swiper_pagination1 .swiper-pagination-bullet-active span:nth-child(2) {
        color: #FFFFFF;
    }

    .swiper-button-next {
        position: absolute;
        width: 95px;
        height: 95px;
        bottom: 18.70% !important;
        top: auto;
        right: 5.1%;
    }


    .swiper-button-prev {
        position: absolute;
        width: 95px;
        height: 95px;
        bottom: 18.70% !important;
        top: auto;
        left: 5.1%;
    }

    .swiper-button-next:after,
    .swiper-container-rtl .swiper-button-prev:after {
        display: none;
    }

    .swiper-button-prev:after,
    .swiper-container-rtl .swiper-button-next:after {
        display: none;
    }

    .mySwiper2 {
        position: absolute;
        top: 154px;
        left: 47px;
        /*width: 314px;*/
        height: 108px;
    }


    .mySwiper2 .swiper-slide {
        width: 100%;
        height: 100px;
    }

    .swiper_year {
        font-size: 126px;
        color: #ffffff;
        line-height: 108px;
        font-family: TsangerYunHei-W08;
    }


    .swiper_txt {
        position: absolute;
        top: 270px;
        left: 47px;
        width: 341px;
        font-size: 14px;
        line-height: 22px;
        font-family: TsangerYunHei-W04;
        color: #FFFFFF;
        padding-left: 13px;
        z-index: 999;
    }

    .swiper_txt p:nth-child(1) {
        font-size: 24px;
        line-height: 36px;
        font-family: TsangerYunHei-W05;
        color: var(--theme-color);
        margin-bottom: 9px;
    }
    .swiper_txt p:nth-child(2) {
        width: 314px;
    }

    .swiper_txt div {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 13px;
    }

}

@media screen and (min-width: 1561px) {
    .index_pc_wrap {
        display: block;
    }

    .index_view_wrap {
        display: none;
    }

    .lishi_swiper_wrap {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
        background: #1b2122;
    }

    .mySwiper1 {
        width: 100%;
        height: 100vh;
    }


    .mySwiper1 .swiper-slide {
        width: 100%;
        height: 100%;
        position: relative;
    }


    .mySwiper1 .swiper-slide > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .swiper_pagination1 .swiper-pagination {
        bottom: 0;
        display: flex;
        justify-content: center;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+ */
        user-select: none; /* Standard syntax */
    }

    .swiper_pagination1 .swiper-pagination-bullet {
        height: 26px;
        font-size: 13px;
        color: #A4A6A7;
        font-family: TsangerYunHei-W04;
        opacity: 1;
        border-radius: 0;
        background: transparent;
        display: flex;
        width: 12.82%;
    }

    .swiper_pagination1 .swiper-pagination-bullet span:first-child {
        width: 3px;
        height: 26px;
        background: #A4A6A7;
    }

    .swiper_pagination1 .swiper-pagination-bullet span:nth-child(2) {
        margin-left: 6px;
    }

    .swiper_pagination1 .swiper-pagination-bullet-active span:first-child {
        background: #FFFFFF;
    }

    .swiper_pagination1 .swiper-pagination-bullet-active span:nth-child(2) {
        color: #FFFFFF;
    }

    .swiper-button-next {
        position: absolute;
        width: 150px;
        height: 150px;
        bottom: 18.70% !important;
        top: auto;
        right: 5.1%;
    }


    .swiper-button-prev {
        position: absolute;
        width: 150px;
        height: 150px;
        bottom: 18.70% !important;
        top: auto;
        left: 5.1%;
    }

    .swiper-button-next:after,
    .swiper-container-rtl .swiper-button-prev:after {
        display: none;
    }

    .swiper-button-prev:after,
    .swiper-container-rtl .swiper-button-next:after {
        display: none;
    }

    .mySwiper2 {
        position: absolute;
        top: 340px;
        left: 86px;
        /*width: 502px;*/
        height: 172px;
    }


    .mySwiper2 .swiper-slide {
        width: 100%;
        height: 100px;
    }

    .swiper_year {
        font-size: 202px;
        color: #ffffff;
        line-height: 172px;
        font-family: TsangerYunHei-W08;
    }


    .swiper_txt {
        position: absolute;
        top: 542px;
        left: 86px;
        width: 540px;
        font-size: 22px;
        line-height: 35px;
        font-family: TsangerYunHei-W04;
        color: #FFFFFF;
        padding-left: 20px;
        z-index: 999;
    }

    .swiper_txt p:nth-child(1) {
        font-size: 38px;
        line-height: 60px;
        font-family: TsangerYunHei-W05;
        color: var(--theme-color);
        margin-bottom: 11px;
    }
    .swiper_txt p:nth-child(2) {
        width: 502px;
    }

    .swiper_txt div {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 20px;
    }


}