.page1 .swiper-1 {
    position: relative;
    height: 100%;
}

.page1,
.page2,
.page3,
.page4,
.page5 {
    /* overflow: hidden; */
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

#indexAnimation {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.page1 {
    position: relative;
    /* height: 100vh; */
}

.page1 .swiper-1 .swiper-slide .image {
    position: relative;
    width: 100%;
    height: 100%;
}

.page1 .swiper-1 .swiper-slide .image img {
    width: 100%;
}

.page1 .swiper-1 .swiper-slide .image::before {
    content: '';
    width: 100%;
    height: 8.03rem;
    position: absolute;
    left: 0px;
    top: 0px;
    background: linear-gradient(180deg, #27488A 0%, rgba(39, 72, 138, 0) 100%);
    z-index: 2;
}

.page1 .swiper-1 .swiper-slide .image::after {
    content: '';
    /* 矩形 91 */
    width: 100%;
    height: 2.47rem;
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0.7;
    background: linear-gradient(0deg, #27488A 0%, rgba(39, 72, 138, 0) 100%);
    z-index: 2;
}

.page1 .swiper-1 .swiper-slide {
    /* max-height: 67.5rem; */
    /* object-fit: cover; */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    position: relative;
}

.page1 .swiper-1 .swiper-slide::before {
    content: '';
    display: block;
    width: 100%;
    height: 74%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #27488A 0%, rgba(39, 72, 138, 0) 100%);
    z-index: 2;
}

.page1 .swiper-1 .swiper-slide::after {
    content: '';
    display: block;
    width: 100%;
    height: 23%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, #27488A 0%, rgba(39, 72, 138, 0) 100%);
    opacity: 0.7;
}

.page1 .slide-message {
    position: absolute;
    width: 80%;
    max-width: 14.48rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
}

.page1 .slide-message h2,
.page1 .slide-message h2 b,
.page1 .slide-message h2 span {
    font-family: "Muli-Bold";
    font-size: .6rem;
    font-size: Max(.6rem, 24px);
    font-weight: bold;
    line-height: normal;
    text-transform: uppercase;
    /* font-feature-settings: "kern" on; */
    color: #FFFFFF
}

.page1 .slide-message h2 span .lines {
    display: inline-block;
    width: .28rem;
    height: .05rem;
    background: #FFFFFF;
    animation: myAnimation 1.8s infinite;
}

.page1-ab-pagination {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    flex-wrap: nowrap;
}

.page1 .swiper-pagination-1 {
    flex: 1;
    padding-left: 0.192rem;
    position: static;
}

.page1 .autoplay-progress {
    width: 0.36rem;
    height: 0.36rem;
    line-height: 0.36rem;
    width: Max(0.36rem, 28px);
    height: Max(0.36rem, 28px);
    line-height: Max(0.36rem, 28px);
    cursor: pointer;
}

.page1 .autoplay-progress svg {
    width: 100%;
    height: 100%;
}

.page1 .swiper-pagination-1 ul {
    width: 100%;
    display: flex;
}

.page1 .swiper-pagination-1 ul li {
    width: .4rem;
    height: .04rem;
    margin-right: .12rem;
    position: relative;
    cursor: pointer;
}

.page1 .swiper-pagination-1 ul li::before {
    content: '';
    display: block;
    width: 100%;
    height: 0.04rem;
    position: absolute;
    background: #868686;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.page1 .swiper-pagination-1 ul li:last-child {
    margin-right: 0;
}

.page1 .swiper-pagination-1 ul li .line {
    background: #fff;
    height: 0.04rem;
    width: 0px;
    display: none;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.page1 .swiper-pagination-1 ul li .line.active {
    display: block;
}

.page1 .swiper-pagination-1 .swiper-pagination-bullet {
    width: 2.4375rem;
    height: .25rem;
    border-radius: 0;
    opacity: 1;
    background: #868686;
}

.swiper-1 .swiper-pagination-1 .swiper-pagination-bullet.swiper-pagination-bullet-active {
    /* width: calc(2.4375rem / 2); */
    /* background: #FFFFFF; */
    position: relative;
}

.path-loop,
.path-line {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 0.02rem;
}

.path-loop-bg,
.path-line-bg {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 0.02rem;
    opacity: 0.1;
}


/*  */

.page.page2 {}

.page.page2 .page-wrap {
    position: relative;
    height: 100%;
}

.nav.nav-scroll {
    position: absolute;
    z-index: 200;
    left: 5%;
    top: 0.32rem;
    width: 90%;
}

.page.page2 .content-bg {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.page.page2 .content-bg img {}

.page.page2 .content-bg {
    transition: all 0.3s ease-in-out;
}

@keyframes myScale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.contents-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 66%;
    padding: 0.56rem 0 1.12rem;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.line-box {
    position: absolute;
    top: -0.56rem;
    left: 0;
    width: 3.65rem;
    height: 0.56rem;
    transform: skewX(45deg);
    border-bottom-left-radius: 0.08rem;
}

#line1 {
    width: 100%;
    height: 100%;
    border-bottom-left-radius: inherit;
    border-left: 1px solid;
    border-bottom: 1px solid;
    border-image: linear-gradient(135deg, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%) 1;
}

.line-box.line-box-right-top {
    left: auto;
    right: 0;
    transform: skewX(-45deg) rotateY(180deg);
}

.line-box.line-box-left-bottom {
    top: auto;
    bottom: 0;
    transform: skewX(-45deg) rotateX(180deg);
}

.line-box.line-box-right-bottom {
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
    transform: skewX(45deg) rotate(180deg);
}

.contents-left .content-text {
    width: 62%;
    text-align: center;
}

.contents-left .content-text h3 {
    padding-bottom: 0.16rem;
    font-family: "Muli-Bold";
    font-size: 0.44rem;
    font-size: Max(0.44rem, 20px);
    font-weight: bold;
    line-height: 0.98rem;
    line-height: 0.48rem;
    text-transform: uppercase;
    color: #FFFFFF;
}

.contents-left .content-text h4 {
    font-family: "Muli-Light";
    font-size: 0.2rem;
    font-size: Max(0.2rem, 12px);
    font-weight: normal;
    line-height: normal;
    /* text-transform: capitalize; */
    color: #FFFFFF;
}

.contents-left .btn {
    /* margin-top: 5.0781rem; */
    position: absolute;
    bottom: -0.82rem;
    width: 1.63rem;
    height: 0.57rem;
    border-radius: 0.08rem;
    border: 1px solid #F9A61A;
    font-family: "Muli-Bold";
    font-size: 0.24rem;
    font-weight: normal;
    line-height: 0.42rem;
    text-align: center;
    text-transform: uppercase;
    color: #F9A61A;
    transition: all 0.5s ease-out;
}


/* .contents-left .btn:hover {
    color: #FFFFFF;
    background: #F9A61A;
} */

.contents-right {
    /* 路径 10 */
    position: absolute;
    right: 0;
    top: 0;
    /* width: 51.3125rem; */
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 12;
    width: 100%;
}

.contents-right .swiper-2 {
    width: 100%;
    height: 100%;
    /* overflow: visible; */
}

.contents-right .swiper-2 .swiper-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.swiper-2 .swiper-slide:nth-of-type(2) {
    transform: translateX(-43%);
}

.swiper-2 .swiper-slide {
    width: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 2;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    transition: transform 0.5s ease-in-out;
}

.swiper-2 .swiper-slide.active {}

.swiper-2 .swiper-slide .item {
    width: calc(100% - 1.24rem);
    width: 100%;
    height: 100%;
    border-left: 0.1px solid #ccc;
    background: #28509A url(/src/img/index/item-box-bg.png) 940px 100% no-repeat;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.swiper-2 .swiper-slide .item .item-title {
    width: 80%;
    margin-top: 1.12rem;
}

.page2-slide-bth-left {
    opacity: 0;
    cursor: auto;
}

.page2-slide-bth {
    display: flex;
    align-items: center;
    position: absolute;
    right: 13%;
    bottom: 5%;
    z-index: 10;
    padding-top: 0.32rem;
    padding-left: 0.8rem;
    z-index: 10;
}

.page2-slide-bth div {
    cursor: pointer;
    color: #fff;
    width: 0.56rem;
    height: 0.3rem;
    background: url(/src/img/index/page2_left.svg) right center no-repeat;
    background-size: contain;
    animation: keyLeftBtn 1s ease-out;
    animation-iteration-count: infinite;
}

.page2-slide-bth div.page2-slide-bth-right {
    background-image: url(/src/img/index/page2_right.svg);
    margin-left: 0.48rem;
    background-position-x: left;
    animation: keyRightBtn 1s ease-out;
    animation-iteration-count: infinite;
}

.page2-slide-bth div:hover {
    animation-play-state: paused;
}

@keyframes keyLeftBtn {
    0% {
        background-position-x: right;
    }
    50% {
        background-position-x: left;
    }
    100% {
        background-position-x: right;
    }
}

@keyframes keyRightBtn {
    0% {
        background-position-x: left;
    }
    50% {
        background-position-x: right;
    }
    100% {
        background-position-x: left;
    }
}

.swiper-2 .swiper-slide .first-shape {
    margin-right: -2px;
    margin-bottom: -0.96rem;
    width: 1.24rem;
    height: 40%;
    background: #28509A;
    transform: skewY(-43deg);
    border-left: 0.1px solid #ccc;
    border-top: 0.1px solid #ccc;
    z-index: 2;
}

.swiper-2 .swiper-slide .item .item-title h3 {
    font-family: 'Muli-Bold';
    font-size: 0.44rem;
    font-weight: bold;
    line-height: 0.98rem;
    text-transform: uppercase;
    color: #FFFFFF;
}

.swiper-2 .swiper-slide .item .item-title h3 .lines {
    display: inline-block;
    width: 0.28rem;
    height: 0.05rem;
    background: #FFFFFF;
    animation: myAnimation 1.8s infinite;
}

@keyframes myAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.swiper-2 .swiper-slide .item .item-body {
    padding: 2% 10% 2%;
    display: flex;
    justify-content: center;
    width: 100%;
    height: calc(60% - 0.56rem);
    max-height: 5rem;
}

.swiper-2 .swiper-slide .item .item-body .item-box {
    width: 120vh;
    max-width: 1290px;
    border-radius: 0.08rem;
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 100px;
}

.swiper-2 .swiper-slide .item .item-body .item-box .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.08rem;
}

.swiper-2 .swiper-slide .item .item-body .item-box .item-l {
    width: 51%;
    height: 90%;
    max-width: 6.46rem;
    max-height: 4.17rem;
    position: absolute;
    top: 5%;
    border-radius: 0.08rem;
    overflow: hidden;
    right: 49%;
}

.swiper-2 .swiper-slide .item .item-body .item-box .item-l img {
    width: 100%;
    border-radius: 0.08rem;
    overflow: hidden;
    transform: translateX(20%);
    transition: all 0.5s ease-out;
    transition-delay: 0.35s;
}

.swiper-2 .swiper-slide .item .item-body .item-box img {
    border-radius: 0.08rem;
    position: relative;
    z-index: 3;
}

.swiper-2 .swiper-slide .item .item-body .item-box .item-r {
    width: 39%;
    margin-right: 5%;
    position: relative;
    z-index: 3;
    margin-left: 56%;
}

.swiper-2 .item-box .item-r .item-r-title h4 {
    font-family: 'Muli-Bold';
    font-size: 0.24rem;
    font-weight: bold;
    line-height: .48rem;
    transform: translateX(20%);
    color: #FFFFFF;
    transition: all 0.5s ease-out;
    transition-delay: 0.35s;
    opacity: 0;
}

.swiper-2 .item-box .item-r .item-text p {
    margin: .32rem 0;
    font-family: 'Muli-Light';
    font-size: 0.2rem;
    font-weight: 200;
    line-height: 0.28rem;
    color: #FFFFFF;
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    transform: translateX(20%);
    transition: all 0.5s ease-out;
    transition-delay: 0.4s;
    opacity: 0;
}

.swiper-2 .item-box .item-r .btn {
    width: 1.62rem;
    border-radius: 0.08rem;
    border: 0.01rem solid #F9A61A;
    font-family: 'Muli-Bold';
    font-size: .24rem;
    font-size: Max(.24rem, 16px);
    font-weight: normal;
    line-height: .41rem;
    transform: translateX(20%);
    color: #F9A61A;
    transition: all 0.5s ease-out;
    /* transition-delay: 0.4s; */
    opacity: 0;
    display: block;
}

.swiper-2 .item-box .item-r .btn:hover {
    background: #F9A61A;
    color: #fff;
}

.swiper-2 .swiper-slide.active .item-box .item-r .item-text p,
.swiper-2 .swiper-slide.active .item-box .item-r .item-r-title h4,
.swiper-2 .swiper-slide.active .item-box .item-r .btn,
.swiper-2 .swiper-slide.active .item .item-body .item-box .item-l img {
    transform: translateX(0%);
    opacity: 1;
}

.swiper-2 .item-box .number {
    position: absolute;
    right: 4%;
    bottom: 8%;
    z-index: 3;
}

.swiper-2 .item-box .number span {
    /* 01 */
    font-family: Oswald;
    font-size: .36rem;
    font-weight: bold;
    line-height: .48rem;
    color: rgba(255, 255, 255, 0.7);
}

.swiper-2 .item-box .number span.count {
    color: rgba(255, 255, 255, 0.3);
}

.swiper-2 .swiper-slide .item .line {
    margin-left: .36rem;
    width: 3.04rem;
    height: .72rem;
    transform: skewX(-45deg);
    border-bottom-left-radius: 0.08rem;
    border-left: 1px solid;
    border-top: 1px solid;
    border-image: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 19%) 1;
    width: 80%;
}

.swiper-2 .swiper-slide.page2-slide .item .line {
    width: 80%;
    margin: 0 auto;
    max-width: 1290px;
}


/* page3 */


/* .active .p3 {opacity: 1;transition-delay: 0.7s;} */

.page.page3 {
    position: relative;
}

.page.page3 .page3-bg-box {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3.2rem;
    height: 3.96rem;
}

.page.page3 .page3-bg-box .bg-box {
    width: 100%;
    height: 100%;
    background: #8BB2E8;
    clip-path: polygon(41.88% 31.46%, 41.88% 56.10%, 100% 100%, 0 100%, 0% 0%);
}

.page.page3 .page3-bg-box::before {
    content: '';
    width: 1.72rem;
    height: 1.24rem;
    position: absolute;
    left: 0;
    top: 0.3rem;
    border-top: 0.02px solid;
    border-right: 0.02px solid;
    border-image: linear-gradient(135deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 1;
    transform: skewY(45deg)
}

.page.page3 .page-wrap {
    /* padding-top: 10vh; */
    height: 100%;
    background: #5075B7;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5%;
}

.page3-content {
    padding-top: 1.12rem;
}

.title-box h4 {
    font-family: 'Muli-Bold';
    font-size: 0.44rem;
    font-weight: bold;
    line-height: normal;
    text-transform: uppercase;
    color: #FFFFFF;
}

.title-box h4 .lines {
    display: inline-block;
    width: 0.28rem;
    height: 0.05rem;
    background: #FFFFFF;
    animation: myAnimation 1.8s infinite;
}

.title-box .btn {
    width: 1.63rem;
    border-radius: 0.08rem;
    border: 1px solid #F9A61A;
    font-family: "Muli-Bold";
    font-size: .24rem;
    font-weight: normal;
    line-height: .42rem;
    text-align: center;
    text-transform: uppercase;
    color: #F9A61A;
    z-index: 2;
    cursor: pointer;
    transition: all 0.5s ease-out;
}

.title-box .btn:hover {
    background: #F9A61A;
    color: #fff;
}

.contents-center {
    margin-top: 4vh;
    padding-left: 6.87vh;
}

.contents-center .img-box {
    display: block;
    width: 51%;
    width: 7.49rem;
    border-radius: 0.08rem;
    position: relative;
    z-index: 5;
    height: 33vh;
    height: 4.2rem;
}

.page3 .contents-center .img-box {
    overflow: hidden;
}

.page3 .contents-center .img-box .img {
    transition: all 0.3s ease-out;
    width: 100%;
    height: 100%;
}

.page3 .contents-center .img-box:hover .img {
    transform: scale(1.1);
}

.page4 .contents-center .img-box {
    width: 50%;
    width: 7.27rem;
    height: auto;
}

.contents-center .img-box img {
    border-radius: 0.08rem;
    height: 100%;
}

.contents-center .text-box {
    flex: 1;
    margin: 2vh 0;
    padding: 3vh 0 1vh 3vw;
    position: relative;
    height: 31vh;
    height: 3.34rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contents-center .text-box::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 1920px;
    background-color: #6287c6;
    left: 0;
    top: 0;
    z-index: 0;
    opacity: 0.5;
}

.page3-svg {
    position: absolute;
    right: 3%;
    top: 0%;
    height: auto;
    height: 100%;
    transform: translate(0%, 2%);
    z-index: 0;
    padding-top: 5%;
}

.page3-svg svg {
    width: 100%;
    height: 100%;
}

.contents-center .text-box .time {
    font-family: Oswald;
    font-size: 0.2rem;
    font-weight: normal;
    line-height: normal;
    text-transform: uppercase;
    color: #FFFFFF;
    position: relative;
    z-index: 2;
    margin-bottom: 0.24rem;
}

.contents-center .text-box .txt {
    margin: 0 0 0.16rem 0;
    font-family: 'Muli-Bold';
    font-size: 0.24rem;
    font-weight: bold;
    line-height: 0.32rem;
    text-transform: uppercase;
    color: #FFFFFF;
    position: relative;
    z-index: 2;
}

.contents-center .text-box .sub-txt {
    font-family: 'Muli-Light';
    font-size: 0.16rem;
    font-weight: normal;
    line-height: normal;
    /* text-transform: uppercase; */
    color: #FFFFFF;
    position: relative;
    z-index: 2;
}

.page3-content .contents-center .text-box .txt,
.page3-content .contents-center .text-box .sub-txt {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.page3-content .contents-center .text-box .sub-txt {
    width: 80%;
    /* flex: 1; */
    margin-bottom: 0.4rem;
}

.contents-bottom {
    padding: 0.22rem 0.64rem 0.58rem;
}

.contents-bottom .list {
    width: 90%;
}

.contents-bottom .list-item {
    position: relative;
    width: 100%;
    height: 0.58rem;
    margin-top: 0.08rem;
    cursor: pointer;
    display: block;
}

.contents-bottom .list-item .img-box {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.contents-bottom .list-item .img-box img {
    width: 100%;
    height: 100% !important;
}

.contents-bottom .list-item .text-p {
    font-family: 'Muli-Bold';
    font-size: 0.2rem;
    font-weight: normal;
    line-height: 0.58rem;
    text-align: left;
    text-transform: uppercase;
    color: #FFFFFF;
    width: 86%;
    padding: 0 0.28rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    position: relative;
    z-index: 22;
}

.contents-bottom .list-item:hover .text-p {
    color: #16519F;
}

.contents-bottom .list-item:hover .text-p::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
    background: url(/src/img/index/text-hover-bg.png) no-repeat;
    background-size: 100% 100%;
    z-index: -1;
}

.contents-bottom .list-item .time {
    position: absolute;
    right: 3%;
    top: -48%;
    font-family: Oswald;
    font-size: 0.16rem;
    font-weight: normal;
    line-height: normal;
    text-transform: uppercase;
    color: #FFFFFF;
}


/* page4 */

.page.page4 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page.page4 .page-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.page.page4 .page-wrap .page4-content {
    padding-top: 1.12rem;
    /* height: 76%; */
    width: 100%;
}

.page4-bg-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.page4-bg-box .img {
    width: 100%;
    height: 100%;
}

.page4-bg-box::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(25px);
}

.page4-bg-box .img {
    filter: blur(20px);
}

.page.page4 .page-wrap .title-box .btn {
    margin-right: 10%;
}

.page4-content .contents-center {
    position: relative;
    z-index: 0;
    margin-top: 4vh;
}

.page4-content .contents-center .img-box {
    box-shadow: 0.14rem 0.14rem 0 0.01rem #3085DB;
}

.text-right {
    position: relative;
    width: 44%;
    max-width: 456px;
}

.box-image {
    position: absolute;
    z-index: 1;
    max-width: 100%;
    right: 0;
    top: 0%;
    width: 54%;
}

.text-right .right-box {
    margin-right: -0.34rem;
    margin-right: -6%;
}

.text-right .right-box .time {
    font-family: Oswald;
    font-size: 0.4rem;
    font-weight: bold;
    line-height: normal;
    text-transform: capitalize;
    color: #FFFFFF;
    text-align: center;
}

.text-right .right-box .sub-text {
    font-family: 'Muli-Bold';
    font-size: 0.48rem;
    font-weight: bold;
    line-height: 0.8rem;
    text-transform: uppercase;
    color: #F9A61A;
}


/* page4 swiper-3 */

.contents-swiper {
    width: 100%;
}

.swiper-3 {}

.swiper-3 .swiper-slide {
    /* border-radius: .5rem; */
    overflow: hidden;
    margin-bottom: 6vh;
}

.swiper-3 .swiper-slide .item {
    /* min-height: 15.25rem; */
    /* border-radius: .5rem;
    background: rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    border: 1px solid #FFFFFF;
    backdrop-filter: blur(10px);
    padding: 2rem;
    transition: all 0.3s ease-in-out; */
}

.swiper-3 .swiper-slide.swiper-slide-active {
    /* transition: all 0.3s ease-in-out; */
}

.swiper-3 .swiper-slide .item:hover,
.swiper-3 .swiper-slide.swiper-slide-active {
    /* background: #3085DB; */
    /* transition: all 0.3s ease-in-out; */
}

.swiper-3 .swiper-slide .item .text {
    font-family: "Muli-Bold";
    font-size: 0.2rem;
    line-height: 0.24rem;
    font-weight: normal;
    text-transform: uppercase;
    color: #FFFFFF;
}

.swiper-3 .swiper-slide .item .text.text-mes {
    font-family: "Muli-Light";
    font-size: 0.14rem;
    line-height: 0.18rem;
    font-weight: normal;
    color: #FFFFFF;
}

.swiper-3 .swiper-slide .item .text:first-child {
    font-size: 0.18rem;
    text-transform: none;
    font-family: Oswald;
    font-weight: 400;
    margin-bottom: 0.11rem;
}

.swiper-3 .swiper-slide .item .text:first-child b {
    font-weight: 600;
    font-family: "Muli-Bold";
    margin-right: 0.08rem;
    font-size: 0.18rem;
}

.swiper-3 .swiper-slide .item .text:nth-child(2) {
    margin-bottom: 0.24rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 0.48rem;
    font-weight: 600;
}

.swiper-3 .swiper-slide .item .text:nth-child(3) {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 0.36rem;
    font-weight: 400;
    margin-bottom: 0.42rem;
}

.swiper-3 .swiper-slide .item .arrow {
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.swiper-3 .swiper-slide .item .arrow img {
    float: right;
    width: 0.44rem;
    height: 0.14rem;
}

.swiper-3 .swiper-slide .item:hover .arrow,
.swiper-3 .swiper-slide.swiper-slide-active .arrow {
    opacity: 1;
}

.swiper-button-next-3,
.swiper-button-prev-3 {
    position: static;
    top: auto;
    bottom: -30%;
    margin-top: 0;
    width: 15px;
    height: 30px;
    opacity: 0.7;
    transition: all 0.4s ease-out;
}

.swiper-button-next-3:hover,
.swiper-button-prev-3:hover {
    opacity: 1;
}

.swiper-button-next-3 {
    margin-left: .32rem;
}

.swiper-button-prev-3 {
    margin-right: .32rem;
}

.swiper-btn-group {
    width: 100%;
    /* margin-top: 0.5rem; */
}

.swiper-btn-group .swiper-pagination {
    color: #fff;
    line-height: 30px;
    font-size: .18rem;
    position: static;
    width: auto;
    font-family: Oswald;
    font-weight: 400;
}

.swiper-btn-group .swiper-pagination span {
    color: #fff;
    font-size: .18rem;
    line-height: 30px;
    font-family: Oswald;
    font-weight: 400;
}

.swiper-button-next-3:after,
.swiper-button-prev-3:after {
    font-size: .24rem;
    font-weight: bold;
    color: #fff;
}

.swiper-button-next-3 {
    left: 90%;
    right: auto;
}

.swiper-button-prev-3 {
    left: 74%;
}

.page4-swiper-img .swiper-slide {
    border-radius: 0.08rem;
    overflow: hidden;
    height: 42vh;
    height: 4.19rem;
}

.page4-swiper-img .swiper-slide .img {
    height: 100%;
    height: 100%;
    transition: all 0.3s ease-out;
}

.page4-swiper-img .swiper-slide .img:hover {
    transform: scale(1.1);
}

.footer {
    margin-top: -1.16rem;
}

.page4-footer {
    /* position: absolute;
    left: 0;
    bottom: 0; */
    /* margin-top: 4.25rem; */
    width: 100%;
    max-height: 1.71rem;
    height: 14%;
    background: url(/src/img/index/page4-footer-bg.png) center no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
}

.page4-footer .page4-logo {
    display: block;
    max-width: 3.22rem;
    width: 20%;
    height: 0.65rem;
}

.page4-footer .content-p {
    margin-top: .4rem;
    font-size: 0.16rem;
    font-weight: normal;
    line-height: 0.16rem;
    color: #FFFFFF;
}

.page4-footer .content-p .content-p-beian {
    margin-top: 0.16rem;
}

.page4-footer .content-p img {
    display: inline;
    margin-left: 0.1rem;
    margin-top: -4px;
}

.page4-footer .content-p a {
    font-size: 0.16rem;
    font-weight: normal;
    line-height: 0.2rem;
    color: #FFFFFF;
}

@media screen and (max-width: 1660px) {
    .contents-left .btn {
        bottom: -0.34rem;
    }
    .contents-left .content-text h3,
    .swiper-2 .swiper-slide .item .item-title h3,
    .title-box h4 {
        font-size: 0.4rem;
        line-height: 0.44rem;
    }
    .title-box .btn,
    .contents-left .btn {
        width: 1.4rem;
        line-height: 0.384rem;
        font-size: 0.2rem;
    }
    .page3-content .contents-center .text-box .txt {
        font-size: 0.2rem;
        line-height: 0.24rem;
    }
    .contents-center .text-box .time {
        font-size: 0.16rem;
    }
    .contents-bottom .list-item .text-p {
        font-size: 0.18rem;
        line-height: 0.52rem;
    }
    .contents-bottom .list-item {
        height: 0.52rem;
    }
}

@media screen and (max-width: 1540px) {
    .swiper-2 .swiper-slide .item .item-body .item-box {
        width: 90%;
    }
    .swiper-2 .item-box .item-r .item-text p {
        margin: 0.16rem 0 0.32rem;
    }
}

@media screen and (max-width: 1440px) {
    .page3-svg {
        /* transform: translate(0%, 10%); */
    }
    .contents-left .content-text h3,
    .swiper-2 .swiper-slide .item .item-title h3,
    .title-box h4 {
        font-size: 0.352rem;
        line-height: 0.44rem;
    }
    .title-box .btn,
    .contents-left .btn {
        width: 1.4rem;
        line-height: 0.36rem;
        font-size: 0.18rem;
    }
    .title-box h4 {
        font-size: 0.32rem;
        line-height: 0.44rem;
    }
    .title-box .btn,
    .contents-left .btn {
        width: 1.4rem;
        line-height: 0.384rem;
        font-size: 0.16rem;
        font-size: max(0.16rem, 14px);
    }
    .swiper-2 .item-box .item-r .item-r-title h4,
    .contents-center .text-box .txt {
        font-size: 0.18rem;
        font-size: max(0.18rem, 14px);
    }
    .swiper-2 .item-box .item-r .item-text p,
    .contents-bottom .list-item .text-p,
    .contents-center .text-box .time {
        font-size: 0.16rem;
        font-size: max(0.16rem, 12px);
    }
    .page3-content .contents-center .text-box .txt {
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
        line-height: 0.24rem;
    }
}

@media screen and (max-width: 1200px) {
    .swiper-2 .swiper-slide .item {}
    .swiper-2 .swiper-slide .item .item-body {}
    .page3-svg {
        transform: translate(0%, 0%);
    }
    .swiper-2 .item-box .item-r .item-r-title h4,
    .contents-center .text-box .txt {
        font-size: 0.16rem;
        font-size: max(0.16rem, 14px);
    }
    .swiper-2 .item-box .item-r .item-text p,
    .contents-center .text-box .time,
    .swiper-3 .swiper-slide .item .text:first-child,
    .swiper-3 .swiper-slide .item .text:first-child b {
        font-size: 0.14rem;
        font-size: max(0.14rem, 12px);
        line-height: 0.24rem;
    }
}

@media screen and (max-width: 1156px) {
    .page3-svg {
        /* transform: translate(0%, 11%); */
    }
    .contents-center .text-box {
        /* flex: auto; */
    }
}

@media screen and (max-width: 1000px) {
    .swiper-2 .swiper-slide .item .item-body {
        /* padding: 0.32rem 0 0.32rem 0.32rem; */
    }
    .swiper-2 .swiper-slide .item .item-body .item-box .item-l {
        padding: 0;
    }
    .swiper-2 .swiper-slide .item .item-body .item-box .item-r {
        width: 100%;
        padding: 0.32rem 0
    }
    .swiper-2 .item-box .number {
        /* bottom: 0; */
    }
    .page3-svg {
        display: none;
    }
    .contents-center .text-box::before {
        /* clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 2.5% 100%, 0% 78.5%); */
    }
    .contents-left {
        /* width: 72%; */
        top: 50%;
        transform: translateY(-50%);
    }
    .contents-left .content-text {
        width: 90%;
    }
    .contents-left .content-text h3 {
        font-size: 0.32rem;
    }
    .contents-center {
        padding-left: 0;
    }
    .contents-bottom .list {
        width: 100%;
    }
    .page3 .contents-bottom {
        padding: 0.24rem 0 0.68rem;
    }
    .box-image {
        /* left: -20%;
        width: 144%; */
        display: none;
    }
    .text-right .right-box .time {
        /* font-size: 1.5rem; */
    }
    .text-right .right-box .sub-text {
        /* font-size: 2rem;
        line-height: 2rem; */
    }
    .swiper-3 .swiper-slide .item .text:first-child {
        margin-top: 0rem;
    }
    .title-box h4 {
        font-size: 0.32rem;
    }
    .page4-footer {
        background: #27488A;
    }
    .page4-footer .content-p {
        width: 100%;
        margin-top: 0;
        text-align: center;
    }
    .page4-content .contents-center {
        flex-direction: column-reverse;
    }
    .page4-content .contents-center .img-box {
        /* width: 80% !important; */
    }
    .page4-content .contents-center .text-right {
        justify-content: flex-start !important;
    }
    .text-right .right-box {
        margin-right: 0;
        margin-bottom: .32rem;
    }
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 750px) {
    .page2-slide-bth div.page2-slide-bth-right,
    .page2-slide-bth div.page2-slide-bth-left {
        display: none;
    }
    .nav.nav-scroll {
        display: none;
    }
    /* .page1 .swiper-1 .swiper-slide .image img {
        width: auto !important;
        height: 100vh;
    } */
    .page1 .slide-message {
        left: 45%;
    }
    .page.page2,
    .page.page2 .page-wrap {
        height: auto;
    }
    .contents-right {
        position: relative;
    }
    .contents-right .swiper-2 .swiper-wrapper {
        display: block;
        padding-top: 1px;
    }
    .swiper-2 .swiper-slide .item .item-body {
        padding: 0.32rem 0;
    }
    .swiper-2 .swiper-slide .item .item-body .item-box .item-r {
        padding: 0 0 0.1rem;
    }
    .swiper-2 .swiper-slide .item .item-body .item-box .item-l {
        /* width: 100%; */
        /* position: static; */
    }
    .swiper-2 .swiper-slide .item .item-title,
    .swiper-2 .swiper-slide.page2-slide .item .line {
        display: none;
    }
    .swiper-2 .swiper-slide:nth-of-type(2) .item-title {
        display: block;
    }
    .swiper-2 .swiper-slide .item .item-body .item-box,
    .swiper-2 .swiper-slide {
        overflow: visible;
    }
    .swiper-2 .item-box .number {
        display: none;
    }
    .swiper-2 .item-box .number span {
        font-size: 0.24rem;
    }
    .swiper-2 .swiper-slide .first-shape {
        display: none;
    }
    .swiper-2 .item-box .item-r .btn {
        width: 1rem;
        font-size: 0.16rem;
        line-height: 0.24rem;
    }
    .page4-footer {
        margin-top: 1rem;
        /* height: 228px; */
        height: auto;
        max-height: 100%;
        padding-bottom: 0.2rem;
        padding-top: 0.2rem;
    }
    /* .contents-left.contents-left2 {
        display: flex !important;
    } */
    .page2 .contents-right,
    .contents-right .swiper-2,
    .contents-right .swiper-2 .swiper-wrapper {
        min-height: 400px;
        height: auto;
    }
    .page.page2 .content-bg {
        height: 460px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }
    .contents-left {
        width: 100%;
    }
    .contents-left .content-text {
        width: 80%;
    }
    .contents-left.contents-left2 .content-text {
        text-align: center;
    }
    .contents-left.contents-left2 .btn {
        left: 50%;
        transform: translate(-50%);
    }
    /* .swiper-2 .swiper-slide:nth-of-type(2), */
    .swiper-2 .swiper-slide,
    .contents-left {
        position: static;
        transform: translate(0) !important;
    }
    .contents-left {
        height: 300px;
        margin: 79px 0;
    }
    .swiper-2 .swiper-slide {
        position: static;
        /* height: 400px; */
    }
    .line-box {
        top: -.96rem;
    }
    .contents-left .content-text {
        margin-bottom: .32rem;
    }
    .contents-swiper {
        /* margin-top: 3rem; */
        bottom: 13%;
    }
    .page.page3 .page3-bg-box::before {
        display: none;
    }
    .page4-footer .page4-logo {
        width: 40%;
        margin-bottom: 0.2rem;
    }
    .page1 {
        height: auto !important;
    }
    .page1 .swiper-1 {
        height: 4rem !important;
        min-height: 212px;
    }
    .page1 .swiper-1 .swiper-slide .image::before,
    .page1 .swiper-1 .swiper-slide .image::after {
        display: none;
    }
    .page1 .slide-message h2,
    .page1 .slide-message h2 b,
    .page1 .slide-message h2 span {
        font-size: 0.32rem;
    }
    .page2,
    .page3,
    .page4,
    .page5 {
        height: auto !important;
        max-height: none;
        overflow: visible;
    }
    .page.page4 {
        height: auto !important;
    }
    .footer {
        margin-top: 0;
    }
    .page4 {
        /* padding-bottom: 7.75rem; */
    }
    .page.page3 .page-wrap,
    .page.page4 .page-wrap {
        padding-top: 0.96rem;
    }
    .swiper-3 .swiper-slide .item {
        min-height: 2.4rem;
        padding: 0.32rem;
    }
    .page4-content .contents-center .text-right .box-image {
        display: none;
    }
    .contents-center .img-box {
        width: 100% !important;
    }
    .page4-content .contents-center .img-box,
    .page4-content .contents-center .text-right {
        width: 100% !important;
    }
    .page4-content .contents-center .text-right {
        margin-top: 0.32rem;
    }
    .swiper-3 .swiper-slide {
        margin-bottom: 0;
    }
    #indexAnimation {
        display: none;
    }
    .swiper-2 .item-box .item-r .item-r-title h4,
    .swiper-2 .swiper-slide .item .item-body .item-box .item-l img,
    .swiper-2 .item-box .item-r .item-text p,
    .swiper-2 .item-box .item-r .btn {
        opacity: 1;
        transform: translateX(0%);
    }
    .contents-center {
        -webkit-animation-name: bounceInLeft;
        animation-name: bounceInLeft
    }
    .contents-center .text-box::before {
        width: 100%;
    }
}

@media screen and (max-width: 414px) {
    .swiper-2 .swiper-slide .item .item-body .item-box .item-l,
    .swiper-2 .swiper-slide .item .item-body .item-box .bg {
        display: none;
    }
    .swiper-2 .swiper-slide .item .item-body .item-box .item-r {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        background-color: #0F2C62;
        border-radius: 8px;
        margin-bottom: 14px;
        padding: 0.32rem;
    }
    .swiper-2 .swiper-slide .item .item-body {
        padding: 0;
    }
    .swiper-2 .item-box .item-r .btn {
        width: 1.28rem;
        font-size: 0.24rem;
        line-height: 0.32rem;
    }
    .swiper-2 .item-box .item-r .btn {
        margin: 0 auto;
        display: block;
    }
    .swiper-2 .item-box .item-r .item-r-title h4 {
        text-align: center;
    }
    .swiper-2 .swiper-slide:last-child .item {
        padding-bottom: 0.48rem;
    }
    .swiper-2 .swiper-slide .item .item-title h3 {
        margin-bottom: 0.32rem;
    }
    .contents-bottom .list-item .img-box {
        display: none;
    }
    .contents-bottom .list-item {
        display: flex;
        align-items: center;
    }
    .contents-bottom .list-item .text-p {
        padding-left: 0;
    }
    .contents-bottom .list-item .time {
        position: static;
        padding-left: 0.32rem;
        white-space: nowrap;
    }
    .contents-bottom .list-item .text-p {
        /* display: block;
        line-height: 0.24rem; */
    }
}