html{

    height:100%;//让html的高度等于屏幕

}
body{

    height:100%;

    margin:0;

}
.el-carousel__indicators--outside {
    display: none;
}
.el-carousel--horizontal{
    height: 100%;
}
/*顶部导航栏*/
.top-banner{
    width: 100%;
    height: 100rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    z-index: 3;
}

.top-banner .left{
}

.top-banner .left .show-image{
    margin-right: 260rem;
    width: 360rem;
    margin-top: 20rem;
}

.top-banner .left .show-image .img{
width: 100%;
}


.top-banner .right{
    width: 1000rem;
}


.top-banner .right .list-box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style-type: none;
}

.top-banner .right .list-box a{
    font-size: 20rem;
    font-family: SourceHanSansSC;
    color: rgba(255, 255, 255, 0.5);
    position: relative;
    padding: 20rem 5rem;
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
}
.top-banner .right .list-box .active{
    color: #ffffff;
}
.top-banner .right .list-box a:after{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 2rem;
    background: #ffffff;
}

.top-banner .right .list-box a:hover{
    font-size: 20rem;
    font-family: SourceHanSansSC;
    font-weight: bold;
}
.top-banner .right .list-box a:hover:after{
    left: 0;
    transition: all 1s;
    width: 100%;
}

.top-banner .right .list-box a .icon{
    height: 6rem;
    background: #214EAC;
    border-radius: 2rem;
}
.top-banner .right .list-box a li{

}

.second{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    opacity: 0;
}
.animated {
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.animated .left{
    animation: moveLeftToRight 1s forwards;
}

.animated .right{
    animation: moveRightToLeft 1s forwards;
}
/* 当动画结束后显示容器 */
.second.animated {
    opacity: 1;
}
@keyframes moveLeftToRight {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes moveRightToLeft {
    from {
        transform: translateX(15%);
    }
    to {
        transform: translateX(0);
    }
}


.second .left{

}
.second .right{
    width: 680rem;
    height: 510rem;
}

.second .left img{
    width: 911.19rem;
    height: 598.64rem;
    opacity: 1
}
.second .right .title{
    width: 182.8rem;
    height: 60.91rem;
    opacity: 1;
    /** 文本1 */
    font-size: 44rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 59rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;

}
.second .right .explain{
    width: 389.48rem;
    height: 24.78rem;
    opacity: 1;
    /** 文本1 */
    font-size: 16rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 24rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 10rem;
    font-family: math;

}
.second .right .line{
    width: 62.32rem;
    height: 1.03rem;
    opacity: 1;
    background: rgba(196, 196, 196, 1);
    margin-top: 32rem;

}
.second .right .text{
    width: 485rem;
    height: 195rem;
    opacity: 0.6;
    /** 文本1 */
    font-size: 20rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 44rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 40rem;
}
.second .right .more{
    width: 126.71rem;
    height: 49.56rem;
    display: flex;
    opacity: 1;
    border-radius: 50rem;
    background: rgba(34, 144, 255, 1);
    justify-content: center;
    align-items: center;
    margin-top: 105rem;
}
.second .right .more .more-text{
font-size: 20rem;

}


.third{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    opacity: 0;
}
.third.animated {
    opacity: 1;
}
.third .left .title{
    width: 182.8rem;
    height: 60.91rem;
    opacity: 1;
    /** 文本1 */
    font-size: 44rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 59rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;

}
.third .left .explain{
    width: 389.48rem;
    height: 24.78rem;
    opacity: 1;
    /** 文本1 */
    font-size: 16rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 24rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 10rem;
    font-family: math;

}
.third .left .line{
    width: 62.32rem;
    height: 1.03rem;
    opacity: 1;
    background: rgba(196, 196, 196, 1);
    margin-top: 32rem;

}
.third .left .text{
    width: 485rem;
    height: 195rem;
    opacity: 0.6;
    /** 文本1 */
    font-size: 20rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 44rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 40rem;
}
.third .left .more{
    width: 126.71rem;
    height: 49.56rem;
    display: flex;
    opacity: 1;
    border-radius: 50rem;
    background: rgba(34, 144, 255, 1);
    justify-content: center;
    align-items: center;
    margin-top: 105rem;
}
.third .left .more .more-text{
    font-size: 20rem;

}

.third .right img{
    width: 666.93rem;
    height: 643.71rem;
    opacity: 1
}
/* 定义弹跳动画 */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* 元素保持原位置 */
    }
    40% {
        transform: translateY(-20rem); /* 元素向上移动 */
    }
    60% {
        transform: translateY(-10rem); /* 元素向上移动但较小 */
    }
}
/* 定义从上到下的移动动画 */
@keyframes moveFromBottom {
    0% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.four{
    height: 1000rem;
    opacity: 0; /* 初始隐藏 */
    /*animation: moveFromBottom 1s forwards; !* 将动画效果应用于元素 *!*/
}
.four .title{
    opacity: 1;
    /** 文本1 */
    font-size: 48rem;
    font-weight: 700;
    letter-spacing: 0rem;
    line-height: 69.5rem;
    color: rgba(51, 51, 51, 1);
    vertical-align: top;
text-align: center;
}
.four .show-image{
    display: flex;
    justify-content: center;
    margin-top: 100rem;
}
.four .show-image img{
    width: 1690rem;
    height: 740rem;
}
.four .left{
    width: 518rem;
    position: relative;
    top: -1170rem;
    left: 200rem;
}
.four .left .title{
    opacity: 1;
    /** 文本1 */
    font-size: 52rem;
    font-weight: 700;
    letter-spacing: 0rem;
    line-height: 56rem;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;

}
.four .left .detail{
    opacity: 1;
    /** 文本1 */
    font-size: 24rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 24rem;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    margin: 30rem 0;
}
.four .left .text{
    width: 489rem;
    height: 120rem;
    opacity: 1;
    /** 文本1 */
    font-size: 20rem;
    font-weight: 500;
    letter-spacing: 0rem;
    line-height: 24rem;
    color: rgba(110, 117, 124, 1);
    text-align: left;
    vertical-align: top;

}
.four .left .more{
    width: 168rem;
    height: 60rem;
    opacity: 0.75;
    border-radius: 16rem;
    border: 2rem solid rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
margin-top: 40rem;
}
.four .left .more .more-text{
    opacity: 1;
    /** 文本1 */
    font-size: 20rem;
    font-weight: 700;
    letter-spacing: 0rem;
    line-height: 24rem;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    vertical-align: top;
}
.four .light{
    top: -800rem;
    width: 644rem;
    height: 544rem;
    mix-blend-mode: overlay;
    opacity: 1;
    background: linear-gradient(135.15deg, rgba(174, 128, 220, 1) 0%, rgba(220, 131, 195, 1) 47.77%, rgba(128, 132, 220, 1) 100%);
    filter: blur(160rem);
    position: relative;
}
.four .right{
    left: 1050rem;
    top: -1830rem;
    width: 820rem;
    opacity: 1;
    position: relative;
    overflow: hidden;
}
.four .right img{
    width: 900rem;
    height: 900rem;
    overflow: hidden;
}
.five{
    margin-bottom: 60rem;
}
.five .title{
    opacity: 1;
    /** 文本1 */
    font-size: 48rem;
    font-weight: 700;
    letter-spacing: 0rem;
    line-height: 69.5rem;
    color: rgba(51, 51, 51, 1);
    vertical-align: top;
    text-align: center;
}
.five .body{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.five .body .left{
margin-top: 106rem;
}
.five .body .left li{
    opacity: 1;
    font-size: 28rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 40.54rem;
    color: rgba(128, 128, 128, 1);
    text-align: left;
    vertical-align: top;
    margin: 20rem 0;
    cursor: pointer;
}
.five .body .left .more{
    margin-top: 165rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.five .body .left .more:hover .more-text{
    font-weight: 600;
    color: black;
}
.five .body .left .more .more-text{
    opacity: 1;
    /** 文本1 */
    font-size: 28rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 40.54rem;
    color: rgba(128, 128, 128, 1);
    text-align: left;
    vertical-align: top;
}
.five .body .left .more img{
    height: 25.74rem;
    opacity: 1;
}
.five .body .right{
margin-top: 130rem;
}
.five .body .right .top{
display: flex;
    border-bottom: 1rem solid rgb(0 0 0);
}
.five .body .right .top .top-time{
    width: 55.94rem;
    height: 28.62rem;
    opacity: 1;
    font-size: 20rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 28.96rem;
    color: rgba(51, 51, 51, 1);
    text-align: left;
    vertical-align: top;
}
.five .body .right .top .top-title{
    width: 55.94rem;
    height: 28.62rem;
    opacity: 1;
    font-size: 20rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 28.96rem;
    color: rgba(51, 51, 51, 1);
    text-align: left;
    vertical-align: top;
    margin-left: 380rem;
}
.five .body .right li{
    display: flex;
    border-bottom: 1rem solid rgba(204, 204, 204, 1);
    align-items: center;
    height: 90rem;
    cursor: pointer;
}

.five .body .right li .icon{
    width: 40rem;
    margin-left: 130rem;
}
.five .body .right li .icon img{
    width: 100%;
}

.five .body .right li .time{
    opacity: 1;
    font-size: 20rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 24rem;
    color: rgba(153, 153, 153, 1);
    text-align: left;
    vertical-align: top;

}
.five .body .right li .span{
    opacity: 1;
    font-size: 24rem;
    font-weight: 700;
    letter-spacing: 0rem;
    line-height: 34.75rem;
    color: rgba(51, 51, 51, 1);
    text-align: left;
    vertical-align: top;
    margin-left: 272rem;
width: 370rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
}
.five .body .right li:hover .span{
    color: #2189e5;
    transform: translateX(20rem);
}




/*底部信息*/
.footer{
width: 100%;
    height: 540rem;
    background: rgba(36, 36, 38, 1);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.footer .first{
    width: 540rem;
}
.footer .first .show-image{
}
.footer .first .show-image img{
    width: 100%;
    margin-left: -55rem;
}
.footer .first .span{
    width: 433rem;
    opacity: 0.8;
    font-size: 20rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 28rem;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 85rem;
}
.footer .first .out-web{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 150rem;
    width: 230rem;
    position: relative;
}
.footer .first .out-web a{
    width: 19rem;
    opacity: 1;
}
.footer .first .out-web .container{
    position: relative;
    display: inline-block;
}
.footer .first .out-web .container:hover .additional-image{
    opacity: 1;
}
.footer .first .out-web .container .additional-image{
    opacity: 0;
    position: absolute;
    top: -100px;
    left: -30px;
    width: 100rem;
    height: auto;
    transition: opacity 0.3s ease-in-out;
}
.footer .first .out-web a img{
    width: 100%;
    height: 100%;
}
.footer .two{
    width: 169rem;
}
.footer .two .title{
    opacity: 1;
    font-size: 28rem;
    font-weight: 700;
    letter-spacing: 0rem;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
}
.footer .two li{
    opacity: 0.8;
    font-size: 22rem;
    font-weight: 400;
    letter-spacing: 0rem;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 35rem;
}
.footer .three{
    width: 400rem;
margin-bottom: 270rem;
}
.footer .three .title{
    opacity: 1;
    font-size: 28rem;
    font-weight: 700;
    letter-spacing: 0rem;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
}
.footer .three li{
    opacity: 0.8;
    font-size: 22rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 24rem;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 30rem;
}

.footer-bottom{
    width: 100%;
    background: rgba(12, 12, 13, 1);
}
.footer-bottom span{
    font-size: 18rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 40rem;
    color: rgba(153, 153, 153, 1);
    text-align: center;
    vertical-align: top;
}