.section1 {
    /* width: 100%;
    line-height: 300px;
    text-align: center;
    font-size: 60px;
    font-weight: 600;
    overflow: hidden;
    color: #fff;
    background-image: url("/img/example/1-banner.png");
    background-position: center center;
    background-repeat: no-repeat; */
    z-index: 998;
    width: 100%;
    overflow: hidden;
    background-image: url('/img/add/长方形占位图@1.5x.png');
    background-position: center center;
    background-repeat: no-repeat;
}

.section1-banner-img {
    width: 100%;
    height: auto;
    height: 42vw;
    transition: transform 3s ease; /* 3秒的过渡效果 */
    transform-origin: center center; /* 缩放时以图片中心为原点 */
    transform: scale(1.1);
    opacity: 0;
}

.section1-banner-zi-img {
    position: absolute;
    z-index: 999;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -40%);
}

.section1-banner-zi-img-example {
    width: 47%;
    height: auto;
}

h2 {
    font-weight: 500;
    font-size: 1.4vw;
    margin-bottom: 6vh;
}

.section-text {
    font-size: .95vw;
}

.section2 {
    text-align: center;
    padding: 8vh 16% 8vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
}

.section2-content {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #333;
    margin-top: 4vh;
}

.section2-background-img {
    width: 100%;
    height: 100%;
}

.section2-title-left {
    position: absolute;
    font-size: 1.2vw;
    left: 17%;
    font-weight: 600;
    color: #2297e6;
}

.section2-float-img {
    animation: float 2s ease-in-out infinite;
    width: 10vw;
    position: absolute;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-30px); /* 向上浮动的距离 */
    }
}

.section2-title-right {
    position: absolute;
    font-size: 1.2vw;
    right: 24%;
    font-weight: 600;
    color: #2297e6;
}

.section2-item > img {
    width: 9vw;
}

.section2-item-title {
    margin: 0 0 0 0;
    font-size: .9vw;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.section2-item-1 {
    position: absolute;
    left: 0%;
    top: 32%;
    transform: translateY(-50%);
}

.section2-item-2 {
    position: absolute;
    left: 26%;
    top: 8%;
    transform: translate(-50%, -50%);
}

.section2-item-3 {
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-50%, -50%);
}

.section2-item-4 {
    position: absolute;
    right: 26%;
    top: 8%;
    transform: translate(50%, -50%);
}

.section2-item-5 {
    position: absolute;
    right: 0%;
    top: 32%;
    transform: translateY(-50%);
}

.arrow1 {
    position: absolute;
    left: 14%;
    top: 150px;
}

.arrow2 {
    position: absolute;
    left: 36%;
    top: 92px;
}

.arrow3 {
    position: absolute;
    right: 36%;
    top: 92px;
}

.arrow4 {
    position: absolute;
    right: 14%;
    top: 150px;
}

.section3 {
    text-align: center;
    width: 100%;
    height: 98vh;
    background: #F2FAFF;
    padding-top: 50px;
    position: relative;
}

.section3-content {
    padding: 0 16%;
    height: 47vh;
    background-image: url("/img/example/3-0BG.png");
    background-size: contain;
    clip-path: inset(6% 6%);
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    overflow: hidden;
}

.section3-center-img {
    width: 4.5vw;
}

.section3-content-title {
    margin-top: 20px;
    font-size: 1vw;
}

.section3-item-title {
    color: #333;
    margin: 0 20px;
    font-size: 1vw;
    flex: 3;
}

.section3-item-img-left {
    margin-right: 32%;
    width: 4vw;
}

.section3-item-img-right {
    margin-left: 32%;
    width: 4vw;
}

.section3-item1 {
    width: calc(34% - 50px);
    height: 45%;
    background-color: #fff;
    clip-path: polygon(0% 0%, 98% 0%, calc(73% - 50px) 100%, 0% 100%);
    position: absolute;
    right: 50%;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.2; /* 初始不可见 */
    transform: translateX(-100px); /* 初始位置在左侧 */
    transition: background .5s ease;
}

.section3-item1-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 25%;
}

.section3-item2-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 25%;
}

.section3-item3-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 25%;
}

.section3-item4-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 25%;
}

.section3-item1.visible {
    animation: leftSlideIn 1s forwards; /* 动画持续时间为1秒 */
}

@keyframes leftSlideIn {
    to {
        transform: translateX(-50px); /* 最终位置 */
        opacity: 1; /* 完全可见 */
    }
}

@keyframes rightSlideIn {
    to {
        transform: translateX(50px); /* 最终位置 */
        opacity: 1; /* 完全可见 */
    }
}

.section3-item2 {
    width: calc(34% - 50px);
    height: 45%;
    background-color: #fff;
    clip-path: polygon(2% 0%, 100% 0%, 100% 100%, calc(27% + 50px) 100%);
    position: absolute;
    left: 50%;
    top: 0;
    display: flex;
    justify-content: left;
    align-items: center;
    opacity: 0.2; /* 初始不可见 */
    transform: translateX(100px); /* 初始位置在左侧 */
    transition: background .5s ease;
}

.section3-item2.visible {
    animation: rightSlideIn 1s forwards; /* 动画持续时间为1秒 */
}

.section3-item3 {
    width: calc(34% - 50px);
    height: 45%;
    background-color: #fff;
    clip-path: polygon(0% 0%, calc(73% - 50px) 0%, 98% 100%, 0% 100%);
    position: absolute;
    right: 50%;
    bottom: 0%;
    display: flex;
    justify-content: right;
    align-items: center;
    opacity: 0.2; /* 初始不可见 */
    transform: translateX(-100px); /* 初始位置在左侧 */
    transition: background .5s ease;
}

.section3-item3.visible {
    animation: leftSlideIn 1s forwards; /* 动画持续时间为1秒 */
}

.section3-item4 {
    width: calc(34% - 50px);
    height: 45%;
    background-color: #fff;
    clip-path: polygon(calc(27% + 50px) 0%, 100% 0%, 100% 100%, 2% 100%);
    position: absolute;
    left: 50%;
    bottom: 0%;
    display: flex;
    justify-content: left;
    align-items: center;
    opacity: 0.2; /* 初始不可见 */
    transform: translateX(100px); /* 初始位置在左侧 */
    transition: background .5s ease;
}

.section3-item4.visible {
    animation: rightSlideIn 1s forwards; /* 动画持续时间为1秒 */
}

.section3-bottom {
    text-align: center;
    width: 68%;
    height: 25vh;
    position: absolute;
    left: 50%;
    margin: 2vh 0;
    background-color: #fff;
    display: flex;
    color: #333;
    justify-content: space-around;
    opacity: 0.2; /* 初始不可见 */
    transform: translate(-50%, 50px); /* 初始位置在下侧 */
    transition: background .5s ease;
}

.section3-bottom.visible {
    animation: bottomSlideIn 1s forwards; /* 动画持续时间为1秒 */
}

@keyframes bottomSlideIn {
    to {
        transform: translate(-50%, 0px); /* 最终位置 */
        opacity: 1; /* 完全可见 */
    }
}

.section3-bottom-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 1vh 0 1vh;
}

.section3-bottom-item > img {
    margin-top: 10px;
    width: 3vw;
}

.section3-bottom-item-title {
    font-size: .9vw;
}

.section3-bottom-item-tip {
    font-size: .8vw;
    margin-bottom: 10px;
    padding: 0 1.5vw;
}

.section4 {
    text-align: center;
    width: 100%;
    height: auto;
    background: #F6FBFF;
    padding: 8vh 0 8vh;
    position: relative;
}

.section4-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16%;
    width: 100%;
    height: auto;
}

.section4-dict-box {
    width: 30%;
    height: 58vh;
    /* background-color: rgb(19, 135, 218, .8); */
    background-image: url("/img/example/4-1bg.png");
    background-position: center center;
    background-repeat: repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 2vh 0;
}

.section4-dict {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
}

.section4-dict-item {
    text-align: left;
    margin-left: 35px;
    font-size: 1vw;
}

.section4-dict-item > a {
    color: rgb(255, 255, 255, .6);
    text-decoration: none;
}

.section4-dict-current {
    color: #fff !important;
}

.section4-dict-arrow {
    position: absolute;
    top: 7.14%;
    right: 10px;
    transform: translateY(-50%);
}

.section4-dict-arrow > img {
    width: 1vw;
}

.section4-dict-line {
    position: absolute;
    left: 20px;
    top: 50%;
    width: .15vw;
    /* height: 92.86%; */
    height: 100%;
    transform: translateY(-50%);
    background-color: rgb(255, 255, 255, .3);
    border-radius: 2px;
}

.section4-dict-line-current {
    position: absolute;
    left: 20px;
    top: 7.14%;
    width: .15vw;
    /* height: 7.14%; */
    height: 15%;
    transform: translateY(-50%);
    background-color: #fff;
    border-radius: 2px;
}

.section4-dict-contain {
    width: 70%;
    height: 55vh;
    background-color: #fff;
    padding: 1.5vh 1.7vw 2vh;
    display: none;
    box-shadow: 0px 5px 20px 0px rgba(85,111,160,0.2);
}

.section4-contain-current {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}

.section4-dict-contain img {
    height: calc(100% - 9vh);
    object-fit: contain;
    object-position: left;
}

.section4-dict-contain-title {
    text-align: left;
    color: #2297e6;
    font-size: 0.9vw;
}

.section4-dict-contain-text {
    text-align: left;
    font-size: 0.8vw;
    margin: .6vh 0 .6vh;
}

.section5 {
    text-align: center;
    width: 100%;
    height: auto;
    background-image: url("/img/example/5-0BG.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 8vh 0 8vh;
    position: relative;
}

.section5-content {
    padding: 0 16% 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section5-partner1,
.section5-partner3,
.section5-partner4
{
    box-shadow: 0px 2px 4px 0px rgba(62, 173, 221, 0.24);
    transition: transform 0.3s ease; /* 添加过渡效果 */
}

.section5-partner1:hover,
.section5-partner3:hover,
.section5-partner4:hover
{
    transform: scale(1.1);
}

.section5-content-1 > img {
    width: 20%;
    height: auto;
}

.section5-content-2 > img {
    width: 20%;
    height: auto;
}

.section5-content-3 > img {
    width: 20%;
    height: auto;
}

.section5-content-4 > img {
    width: 20%;
    height: auto;
}

.section5-img {
    transition: transform 0.3s ease; /* 添加过渡效果 */
}

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

.section5-content-1,
.section5-content-2,
.section5-content-3,
.section5-content-4 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section5-partner1,
.section5-partner3,
.section5-partner4 {
    width: 190px;
    height: 71px;
    line-height: 71px;
    text-align: center;
    background-color: #fff;
    box-shadow: rgb(135, 206, 235, .6);
    font-size: 18px;
    font-weight: bold;
    margin-top: -6px;
}

.section5-nopartner {
    width: 190px;
    height: 71px;
    line-height: 71px;
    text-align: center;
    background-color: #fff;
    box-shadow: rgb(11, 176, 241);
    opacity: 0;
    margin-top: -6px;
}

main {
    position: relative;  
}
header > div:nth-child(1) { 
    height: 6vh;
}
header {
    height: auto;
    height: 42vw;
}