html,
body {
    width: 100%;
    height: 100%;
}

:root{
    --bg-bg-pos-cur: 0%;
    --bg-bg-pos-target: 0%;
    --beetles-img-count: 7;
    --beetles-scale-count: 300%;
}

@keyframes bgPosMove {
    0% {
        background-position: var(--bg-bg-pos-cur) center;
    }
    100% {
        background-position: var(--bg-bg-pos-target) center;
    }
}

body{

    margin: 0%;
    /* 加载背景图 */
    background-image: url("../Assets/images/bg-all.png");
    /* 背景图垂直、水平均居中 */
    background-position: 0% center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色，背景图加载过程中会显示背景色 */
    background-color: #152809;
}

#flowText{
    position: relative;
    z-index: 200;
    width: 100%;
    height: 100%;
    margin: 0%;
    /* 加载背景图 */
    background-image: url("../Assets/images/bg-left-flow-words.png");
    /* 背景图垂直、水平均居中 */
    background-position: 0% center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色，背景图加载过程中会显示背景色 */
    /* background-color: #152809; */
}

.at-item {
		animation-name: fade-in;
		animation-duration: 1s;
		animation-timing-function: linear;
		animation-delay: 0s;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-fill-mode: none;

		/* shorthand
		animation: fade-in 2s linear 0s 1 normal none;*/
	}

@keyframes fade-in {

    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

#leftShow{
    width: 40%;
    position: absolute;
    left: 12%;
    top: 23%;
}

.btn-container{
    position: absolute;
    width: 93%;
    top: 65%;
    margin: 0 4%;
}

.img-btn {
    position: relative;
    z-index: 1000;
    display: inline-block;
    margin: 0% 0% 0% 4%;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    /* 可根据需要调整宽高 */
    width: 15%;
    vertical-align: middle;

    /* border-radius: 10%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); */
}

.img-btn:hover {
    transform: scale(1.05);

    filter: drop-shadow(8px 16px 16px rgb(0,0,0,1));
    /* box-shadow: 0 4px 16px rgba(0,0,0,0.16); */
    /* filter: brightness(1.1); */
}

.img-btn:active {
    transform: scale(0.97);

    filter: drop-shadow(2px 4px 8px rgb(0,0,0,1));
    /* box-shadow: 0 1px 4px rgba(0,0,0,0.12); */
    /* filter: brightness(0.95); */
}

#beetles{
    position: fixed;

    left: 29.5%;
    top: 56%;
    width: 10%;
    height: 10%;
    z-index: 100;


    /* offset-path: path('M 0 0 C 80 -50, 130 10, 190 80 S 300 150, 430 -100'); */
    offset-rotate: unset;

    background-image: url(../Assets/images/01-all.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.beetles-animate {
    animation: imgAnimation 1.5s steps(var(--beetles-img-count)) alternate, move 3000ms alternate;
    /* animation: move 3000ms alternate; */
    animation-fill-mode: forwards;
}


@keyframes move {
    0% {
        offset-distance: 0%;
        scale: 100%;
    }
    100% {
        offset-distance: 100%;
        scale: var(--beetles-scale-count);
    }
}

@keyframes imgAnimation {
    0% {
        background-position: 0;
    }
    100% {
        background-position: 100%;
    }
}

#rightLogo{
    width: 40%;
    position: absolute;
    right: 3%;
    top: 53%;
    z-index: 1000;
}

#rightLogo:hover{
    animation: animate__swing 1s linear infinite;
}