#bodypart {
    transform: translateY(-40px);
    width: 100vw;z-index: 1
}

#svg-bg{
    position: absolute; /* 将 SVG 定位相对于 .container */
    left: 0;
    z-index: 2;
    top:0;
}
#svg-grow{
    position: absolute; /* 将 SVG 定位相对于 .container */
    left: 0;
    z-index: 3;
    top:0;
}
.nottoAnimate{
    stroke:rgba(186,178,187,0.8);
    stroke-width: 6;
    opacity: 1;
    fill:none;
    /*stroke:url(#gradient)*/

}
#toAnimate{
    stroke:rgba(149,117,205,1 ) ;
    stroke-width: 8;
    opacity: 1;
    fill:none;
    /*stroke:url(#gradient)*/
}
#three-icon{
    display: flex;
    width: 25vw;
    height: auto;
    z-index: 2;
    top: 29vw;
    left: 14vw;
    opacity: 0; /* 初始时元素透明 */
    transform: translate3d(-3000px, 0, 0); /* 初始时元素移出屏幕 */
}
#three-icon.animate {
    animation: bounceInLeft 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    opacity: 1; /* 添加动画时使元素可见 */
    transform: translate3d(0, 0, 0); /* 添加动画时移动元素到指定位置 */
}
#three-icon>img{
    width: 7vw;
    padding-right: 2vw;
}

#thinman{
    top: 46vw;
    left: 21vw;
    z-index: 2;
}
#fatman{
    top: 46vw;
    left: 30vw;
    z-index: 2;
}
#thinman img,#fatman img {
    height: 12vw;

}

/*arrowmix*/
#arrow-mix{
    display: grid;
    grid-template-columns: 3fr 8fr;
    grid-template-rows: 4fr 1fr;
    z-index: 2;
    width: 20vw;
    height: 25vw;
    right: 15vw;
    top: 75vw;
}

#arrow-mix > :nth-child(1) {
    /* 样式定义 */
    opacity: 0;
    transition: opacity 0.4s ease-in-out; /* 添加渐变效果 */
}
#arrow-mix > :nth-child(2) {
    /* 样式定义 */
    opacity: 0;
    transition: opacity 1.2s ease-in-out; /* 添加渐变效果 */
}
#arrow-mix > :nth-child(3) {
    /* 样式定义 */
    opacity: 0;
    transition: opacity 2s ease-in-out; /* 添加渐变效果 */
}


#left1{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    align-self: center;
}

#right-top{
    grid-column: 2 / 3;
}
#right-down{
    grid-column: 2 / 3;

}


/*cell part*/
#cell1{
    width: 3vw;
    height: auto;
    z-index: 5;
    top: 156vw;
    left: 36vw;
    animation: swing 2s ease-in-out infinite; /* 使用swing动画，2秒持续时间，ease-in-out缓动函数，无限循环 */
}
#cell2{
    width: 1.5vw;
    height: auto;
    z-index: 3;
    top: 154vw;
    left: 33vw;
    animation: swing 2s ease-in-out infinite; /* 使用swing动画，2秒持续时间，ease-in-out缓动函数，无限循环 */
}
#cell3{
    width: 3vw;
    height: auto;
    z-index: 2;
    top: 175.1vw;
    left: 33.5vw;
    animation: swing 2s ease-in-out infinite; /* 使用swing动画，2秒持续时间，ease-in-out缓动函数，无限循环 */
}
#lamp{
    z-index: 5;
    left: 19vw;
    top: 299vw;
    opacity: 0; /* 初始设置为完全透明 */
    transition: opacity 0.5s ease; /* 添加渐变效果，持续0.5秒 */
}
#lampmid{
    width: 5.5vw;
    z-index: 5;
    left: 38.4vw;
    bottom: 190.5vw;
    opacity: 1; /* 初始设置为完全透明 */
    transition: opacity 0.5s ease; /* 添加渐变效果，持续0.5秒 */
}



#lamp-bg{
    z-index: 4;
    left: 19vw;
    top: 299vw;
}

#lamp img,#lamp-bg img{
    width: 5vw;
}

/*灯发光*/
.point {
    width: 60%;
    padding-top: 60%;
    top:18%;
    left: 20%;
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}


/* 设置动画前颜色 */
.point-flicker:after {
    z-index: 1;
}

/* 设置动画后颜色 */
.point-flicker:before {
    z-index: 1;
}

#bottomlamp{
    background-color: rgba(46,165,152,0.3);
}
#bottomlamp:after{
    background-color: rgba(46,165,152,0.3);
}
#bottomlamp:before{
    background-color: rgba(0, 168, 253, 0.1);
}
#lampup{
    background-color: rgba(255,255,0,0.5);
}
#lampup:after{
    background-color: rgba(255,255,0,0.5);
}
#lampup:before{
    background-color: rgba(255,255,0,0.2);
}

/* 设置动画 */
.point-flicker:before,
.point-flicker:after {
    z-index: 1;
    content: '';
    width: 100%;
    padding-top: 100%;
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 0;
    margin-top:  0;
    border-radius: 50%;
    animation: warn 1s ease-out 0s infinite;
}



#two-img{
    display: flex;
    z-index: 2;
    height: 13vw;
    width: auto;
    top: 202vw;
    left: 61vw;
    opacity: 0; /* 初始时元素透明 */

}

#two-img.animate{
    opacity: 1; /* 初始时元素透明 */
    animation: slide-in 1s ease-in-out forwards; /* 使用slide-in动画，1秒持续时间，ease-in-out缓动函数 */
}

#two-img img{
    max-width: 100%;
    padding-right: 1vw;
}
#key{
    z-index: 2;
    width: 5vw;
    top: 195vw;
    left: 70vw;
    animation: swing 2s ease-in-out infinite; /* 使用swing动画，2秒持续时间，ease-in-out缓动函数，无限循环 */
}
#bottom{
    z-index: 2;
    width:30vw;
    left: 48.5vw;
    top: 178.4vw;

}



#three-ifo{
    display: grid;
    grid-template-columns: 3fr 2fr 1fr 1fr 3fr;
    grid-template-rows: 0.4fr 0.6fr 0.2fr 0.55fr 0.05fr;
    z-index: 2;
    width: 44vw;
    height: 50vw;
    left: 38vw;
    top: 245vw;
}

#three-ifo > :nth-child(1) {
    /* 样式定义 */
    opacity: 0;
    transition: opacity 0.8s ease-in-out; /* 添加渐变效果 */
}
#three-ifo > :nth-child(2) {
    /* 样式定义 */
    opacity: 0;
    transition: opacity 0.8s ease-in-out; /* 添加渐变效果 */
}
#three-ifo > :nth-child(3) {
    /* 样式定义 */
    opacity: 0;
    transition: opacity 0.8s ease-in-out; /* 添加渐变效果 */
}


#left-img{
    grid-column-start: 2;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 3;
    align-self: center;
}

#right-img{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 5;
    align-self: center;
}
#bottom-img{
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 6;
    align-self: center;

}





@keyframes warn {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    30% {
        transform: scale(1.4);

        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}


@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }
    75% {
        transform: translate3d(-10px, 0, 0);
    }
    90% {
        transform: translate3d(5px, 0, 0);
    }
    100% {
        transform: none;
    }
}
@keyframes swing {
    0%, 100% {
        transform: rotate(0deg); /* 开始和结束状态，元素不旋转 */
    }
    20% {
        transform: rotate(10deg); /* 20%时，顺时针旋转10度 */
    }
    40% {
        transform: rotate(-10deg); /* 40%时，逆时针旋转10度 */
    }
    60% {
        transform: rotate(5deg); /* 60%时，顺时针旋转5度 */
    }
    80% {
        transform: rotate(-5deg); /* 80%时，逆时针旋转5度 */
    }
}
@keyframes slide-in {
    0% {
        width: 0; /* 初始时，宽度为0，元素不可见 */
    }
    40%{
        width: 60%;
    }
    100% {
        width: 100%; /* 结束时，宽度为100%，元素完全可见 */
    }
}