body {
    margin: 0;
    padding: 0;
}

.top-video {
    width: 100%;
}

.txts1 {}

.txts1 .sup {
    background: linear-gradient(90.36deg, #8CBEE7 18.84%, #3E5E83 43.78%, #102960 86.29%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 3.75vw;
    font-weight: bold;
    text-align: center;
    margin-top: 4.69vw;
}

.txts1 .sub {
    font-size: 1.77vw;
    color: #444444;
    text-align: center;
    margin-bottom: 5.73vw;
}


.swiper1 {
    width: 69.79vw;
    margin: auto;
}

.swiper1 .years {
    position: absolute;
    position: relative;
    /* border: 0.0521vw dashed green; */
    width: 69.79vw;
    /* height: 34.69vw; */
    display: flex;
    justify-content: space-evenly;
}

.swiper1 .years .bg-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 0.1563vw;
    width: 100%;
    background-color: #D9D9D9;
}

.swiper1 .years .active-line {
    position: absolute;
    top: 0;
    left: calc(100% / 5 * 0 + 100% / 5 * 0.1);
    height: 0.1563vw;
    width: calc(100% / 5 * 0.8);
    background-color: #007BA2;
    transition: all 0.3s;
}

.swiper1 .years .year {
    cursor: pointer;
    user-select: none;
    font-size: 1.1458vw;
    font-weight: bold;
    padding: 1.0417vw 0;
    flex: 1;
    text-align: center;
    color: #9D9D9D;
}

.swiper1 .years .active {
    color: #000000;
}

.swiper1 .img-txt {
    position: relative;
}

.swiper1 .img-txt>img {
    width: 69.79vw;
    height: 34.69vw;
    transition: transform 1s ease;
}

.swiper1 .img-txt {
    overflow: hidden;
}

.swiper1 .img-txt>img:hover {
    /* 鼠标悬浮时放大 */
    transform: scale(1.1)
}

.swiper1 .img-txt .txt3 {
    pointer-events: none;
    position: absolute;
    bottom: 2.50vw;
    left: 2.50vw;
}

.swiper1 .img-txt .txt3 .sup {
    font-size: 2.50vw;
    font-weight: bold;
    color: #FFFFFF;
}

.swiper1 .img-txt .txt3 .sub {
    font-size: 1.04vw;
    height: 0;
    overflow: hidden;
    transition: height 1s ease;
    color: #FFFFFF;
}

.swiper1 .img-txt .txt3 .sssub {
    width: 10vw;
}

.swiper1 .img-txt .txt3 .sssub span {
    cursor: pointer;
    pointer-events: auto;
    font-size: 1.25vw;
    color: #FFFFFF;
}

.swiper1 .img-txt .txt3 .sssub span>img {
    width: 7.0.26vw;
    height: 0.57vw;
}

.height170 {
    height: 8.8vw;
}

.height40 {
    height: 2.08vw;;
}

.height140 {
    height: 7.29vw;;
}

.swiper2 {
    width: 100%;
    height: 58vw;
    overflow: hidden;
    position: relative;
    background-color: #ccc;
}

.swiper2 .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
}

.swiper2 .swiper-wrapper {
    margin-top: -5vw;
}

.swiper2 .swiper-slide {
    margin-top: 16vw;
}

.swiper2 .swiper-slide > img {
    width: 100%;
    display: block;
}


.swiper2 .titles {
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 6;
    width: 100vw;
}

.swiper2 .titles .sup {
    font-size: 3.75vw;
    font-weight: bold;
    color: #FAFFFD;
    margin-top: 1.8vw;
}

.swiper2 .titles .sub {
    font-size: 1.77vw;
    font-weight: bold;
    color: #CFCDCD;
    margin-bottom: 3.65vw;
}

.swiper2 .swiper-button-prev,
.swiper2 .swiper-button-next
{
    position: absolute;
    top: 30vw;
    background: #E7E7EB80;
    width: 2.92vw;
    height: 2.92vw;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper2 .swiper-button-prev {
    left: 20%;
}
.swiper2 .swiper-button-next {
    right: 20%;
}

.swiper2 .swiper-button-prev:hover,
.swiper2 .swiper-button-next:hover
{
    background: #FFFFFFCC;
}

.swiper2 .swiper-button-prev > img,
.swiper2 .swiper-button-next > img
{
    width: 1.56vw;
}

.swiper2 .swiper-slide {
    height: fit-content;
}

.swiper2 .swiper-slide-prev::after, 
.swiper2 .swiper-slide-next::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}


.swiper2 .years {
    margin-top: 6vw;
    position: absolute;
    top: 46vw;
    transform: translateX(-50%);
    z-index: 9;
    left: 50%;
    width: 61vw;
    display: flex;
    justify-content: space-evenly;
}

.swiper2 .years .bg-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 0.1563vw;
    width: 100%;
    background-color: #D9D9D9;
}

.swiper2 .years .active-line {
    position: absolute;
    top: 0;
    left: calc(100% / 5 * 1 + 100% / 5 * 0.1);
    height: 0.1563vw;
    width: calc(100% / 5 * 0.8);
    background: linear-gradient(to right, #0AB3DE 0%, #00E2BE 100%);
    transition: all 0.3s;
}

.swiper2 .years .year {
    cursor: pointer;
    user-select: none;
    font-size: 1.1458vw;
    font-weight: normal;
    margin-top: 0.5vw;
    height: 2.5vw;
    line-height: 2.5vw;
    flex: 1;
    text-align: center;
    color: #CFCDCD;
}

.swiper2 .years .active {
    font-weight: bold;
    color: #FFFFFF;
}

.txt2s {
    background-color: #fff;
    text-align: center;
    color: #000;
    padding: 2.60vw 0;
}

.txt2s .sup {
    font-size: 3.75vw;
}

.txt2s .sub {
    font-size: 1.77vw;
    color: #444444;
}

.img-txts {
    width: 84.58vw;
    height: 37.50vw;
    margin: auto;
    display: flex;
    background-color: #F5F7F9;
}

.img-txts .img-wrap {
    width: 54.17vw;
    height: 37.50vw;
    overflow: hidden; 
}

.img-txts .img-wrap > img {
    width: 54.17vw;
    height: 37.50vw;
    transition: transform 1s ease;
}

.img-txts .img-wrap > img:hover {
    transform: scale(1.1)
}

.img-txts > .txts {
    padding-left: 2.60vw;
    font-weight: bold;
}

.img-txts > .txts .sup {
    margin-top: 16.67vw;
    font-size: 1.77vw;
    color: #000;
}

.img-txts > .txts .sub {
    font-size: 0.83vw;
    color: #000;
    margin-top: 0.52vw;
    margin-bottom: 3.65vw;
}

.img-txts > .txts .btn1 {
    display: block;
    cursor: pointer;
    width: 9.17vw;
    height: 1.82vw;
    line-height: 1.82vw;
    text-align: center;
    border-radius: 1.35vw;
    background-color: #30CDFF;
    color: #fff;
    font-size: 0.83vw;
    box-shadow: 1px 1px 2.6px 0px #A3A3A340;
}

.img-txts > .txts .btn2 {
    display: block;
    cursor: pointer;
    margin-top: 0.52vw;
    width: 9.17vw;
    height: 1.82vw;
    line-height: 1.82vw;
    text-align: center;
    border-radius: 1.35vw;
    background-color: #fff;
    color: #30CDFF;
    font-size: 0.83vw;
    box-shadow: 1px 1px 2.6px 0px #A3A3A340;
}


.txts-img {
    width: 84.58vw;
    height: 37.50vw;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    background-color: #F5F7F9;
}

.txts-img .img-wrap {
    width: 54.17vw;
    height: 37.50vw;
    overflow: hidden; 
}
.txts-img .img-wrap > img {
    width: 54.17vw;
    height: 37.50vw;
    transition: transform 1s ease;
}

.txts-img .img-wrap > img:hover {
    transform: scale(1.1)
}

.txts-img > .txts {
    width: 30.42vw;
    padding-left: 2.60vw;
    font-weight: bold;
}

.txts-img > .txts .sup {
    margin-top: 16.67vw;
    font-size: 1.77vw;
    color: #000;
}

.txts-img > .txts .sub {
    font-size: 0.83vw;
    color: #000;
    margin-top: 0.52vw;
    margin-bottom: 3.65vw;
}

.txts-img > .txts .btn1 {
    display: block;
    cursor: pointer;
    width: 9.17vw;
    height: 1.82vw;
    line-height: 1.82vw;
    text-align: center;
    border-radius: 1.35vw;
    background-color: #30CDFF;
    color: #fff;
    font-size: 0.83vw;
    box-shadow: 1px 1px 2.6px 0px #A3A3A340;
}

.txts-img > .txts .btn2 {
    display: block;
    cursor: pointer;
    margin-top: 0.52vw;
    width: 9.17vw;
    height: 1.82vw;
    line-height: 1.82vw;
    text-align: center;
    border-radius: 1.35vw;
    background-color: #fff;
    color: #30CDFF;
    font-size: 0.83vw;
    box-shadow: 1px 1px 2.6px 0px #A3A3A340;
}