* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: MyFont, Lora, Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    overflow-x: hidden;
    position: relative;
}

html {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* .menu.homeMenu {
    transition: transform 0.3s ease;
    transform: translateY(-100%);
} */

@keyframes float1 {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-30px) rotate(2deg);
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(-1deg);
    }
}

@keyframes float3 {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-24px) rotate(1deg);
    }
}

@keyframes float4 {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.02);
    }
}

@keyframes swing1 {

    0%,
    100% {
        transform: rotate(0deg) scale(0.8);
    }

    50% {
        transform: rotate(-15deg) scale(1.2);
    }
}

@keyframes swing2 {

    0%,
    100% {
        transform: rotate(0deg) translateY(0);
    }

    50% {
        transform: rotate(-15deg) translate(-20px);
    }
}

@keyframes circle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.home-main {
    width: 100%;
}

.home-main .indexPara {
    width: 100%;
    position: relative;
}

.home-main section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 100px;
}

.home-main .indexPara .paraBg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    z-index: -1;
}

.home-main .indexPara .paraImg {
    position: absolute;
    will-change: transform, opacity;
}

.home-main .indexPara .paraImg img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.para1 #fog-left {
    left: 0;
    width: 100%;
    height: 100%;
    inset: 0;
    transform-origin: left center;
    z-index: 20;
    position: absolute;
    bottom: 0;
}

.para1 #fog-right {
    right: 0;
    width: 100%;
    height: 100%;
    inset: 0;
    transform-origin: right center;
    z-index: 20;
    position: absolute;
    bottom: 0;
}

/* para1 */

.para1.indexPara section {
    position: relative;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: transparent;
}

.para1.indexPara .backImg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.para1.indexPara #title {
    position: absolute;
    width: 70%;
    height: 100%;
    object-fit: contain;
    transform-origin: center center;
    z-index: 5;
}

.para1.indexPara .maskLayer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.para1.indexPara .maskLayer .outerMask {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 30;
}

.para1.indexPara .maskLayer .middleMask {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 20;
}

.para1.indexPara .maskLayer .innerMask {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 10;
}

.sprites {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 7;
}

.sprite {
    position: absolute;
    width: 80px;
    height: auto;
    transform-style: preserve-3d;
    will-change: transform;
    opacity: 0;
}

.sprite1 {
    top: 61%;
    right: 34%;
    width: 10%;
    transform-origin: center bottom;
}

.sprite2 {
    top: 26%;
    left: 23%;
    width: 8%;
    transform-origin: center bottom;
}

.sprite3 {
    top: 26%;
    left: 66%;
    width: 7%;
}

.sprite3.visible {
    animation: floatSprite 3s ease-in-out infinite;
    transform: perspective(1000px) rotateY(0deg);
}

.sprite4 {
    top: 65%;
    left: 42%;
    width: 6%;
    transform-origin: center bottom;
}

@keyframes floatSprite {
    0% {
        transform: perspective(1000px) rotateY(0deg) translate3d(0, 0, 0);
    }

    33% {
        transform: perspective(1000px) rotateY(10deg) translate3d(10px, -10px, 10px);
    }

    66% {
        transform: perspective(1000px) rotateY(-10deg) translate3d(-10px, -5px, -20px);
    }

    100% {
        transform: perspective(1000px) rotateY(0deg) translate3d(0, 0, 0);
    }
}

/* para1结束 */

/* para2 */

.para2 section {
    position: relative;
    padding: 0;
    width: 100%;
    overflow: hidden;
    background-color: transparent;
}

.para2 .mountains {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.para2 .mountain {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.para2 .mountain.left {
    left: 0;
    transform-origin: left center;
    z-index: 3;
}

.para2 .mountain.right {
    right: 0;
    transform-origin: right center;
    z-index: 2;
}

.para2 .character-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.para2 .ginseng-wrapper {
    position: absolute;
    width: 24%;
    left: 38%;
    bottom: -100%;
}

.para2 .ginseng {
    width: 100%;
    height: auto;
}

/* 新增的文本图片组样式 */
.para2 .text-group {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
    opacity: 0;
    transform: translateY(30px);
}

/* name图片的具体位置 */
.para2 .name-wrapper {
    position: absolute;
    top: 13%;
    /* 距离顶部15%的位置，更靠上 */
    left: 50%;
    /* 距离左边50%的位置，居中 */
    transform: translateX(-50%);
    /* 只保留水平居中，垂直位置由JavaScript控制 */
    opacity: 0;
    /* 确保居中效果的额外保护 */
    width: fit-content;
    /* 使用CSS Grid作为额外的居中备份 */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.para2 .name-img {
    width: auto;
    height: 18vh;
    /* 使用视窗高度的10% */
    max-width: 60vw;
    /* 使用视窗宽度的55%作为最大宽度 */
    min-height: 100px;
    /* 最小高度，防止在小屏幕上太小 */
    object-fit: contain;
    display: block;
}

/* theKingOfHerbs、crown、grass的容器 */
.para2 .title-line {
    position: absolute;
    top: 28%;
    /* 从35%调整到28%，缩小与name的间隔 */
    left: 50%;
    /* 居中 */
    transform: translateX(-50%);
    /* 只保留水平居中，垂直位置由JavaScript控制 */
    opacity: 0;
    width: 45vw;
    /* 使用视窗宽度的45% */
    height: 12vh;
    /* 使用视窗高度的12% */
    min-width: 600px;
    /* 最小宽度，防止太小 */
    min-height: 100px;
    /* 最小高度，防止太小 */
    /* 确保居中效果的额外保护 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.para2 .king-wrapper {
    position: absolute;
    top: 50%;
    /* 垂直居中在title-line容器中 */
    left: 50%;
    /* 水平居中在title-line容器中 */
    transform: translate(-50%, -50%);
    /* 完全居中 */
    opacity: 0;
    z-index: 1;
    /* 确保theKingOfHerbs在最前面 */
    margin-top: 6%;
}

.para2 .king-img {
    width: auto;
    height: 40vh;
    /* 使用视窗高度的40%，响应式设计 */
    max-width: 70vw;
    /* 使用视窗宽度的70%作为最大宽度 */
    min-height: 80px;
    /* 最小高度，防止在小屏幕上太小 */
    object-fit: contain;
    display: block;
}

/* crown放在theKingOfHerbs的左上方，稍靠里面 */
.para2 .crown {
    position: absolute;
    top: -65%;
    /* 使用相对于容器的百分比 */
    left: 3%;
    /* 使用相对于容器的百分比 */
    width: auto;
    height: 19vh;
    /* 使用视窗高度的3% */
    max-width: 18vw;
    /* 使用视窗宽度的8%作为最大宽度 */
    min-height: 40px;
    /* 最小高度 */
    object-fit: contain;
    opacity: 0;
    display: block;
    z-index: 2;
}

/* grass放在theKingOfHerbs的右上方，稍靠里面 */
.para2 .grass {
    position: absolute;
    top: -185%;
    /* 使用相对于容器的百分比 */
    right: -29%;
    /* 使用相对于容器的百分比 */
    width: auto;
    height: 50vh;
    /* 使用视窗高度的3% */
    max-width: 12vw;
    /* 使用视窗宽度的8%作为最大宽度 */
    min-height: 40px;
    /* 最小高度 */
    object-fit: contain;
    opacity: 0;
    display: block;
    z-index: 0;
}

/* parag图片的具体位置 */
.para2 .parag-wrapper {
    position: absolute;
    top: 50%;
    /* 从60%调整到50%，缩小与theKingOfHerbs的间隔 */
    left: 50%;
    /* 距离左边50%的位置 */
    transform: translateX(-50%);
    /* 只保留水平居中，垂直位置由JavaScript控制 */
    opacity: 0;
    width: 80%;
    /* 确保居中效果的额外保护 */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.para2 .parag-img {
    width: auto;
    height: 30vh;
    /* 使用视窗高度的18% */
    max-width: 80vw;
    /* 使用视窗宽度的60%作为最大宽度 */
    min-height: 150px;
    /* 最小高度，防止在小屏幕上太小 */
    object-fit: contain;
    display: block;
}

.para3 .oil-wrapper {
    /* width: 15%; */
    left: 2%;
    top: -30%;
    opacity: 0;
    z-index: 998;
    will-change: transform;
}

/* para2结束 */

/* para3 */

.home-main .para3 .para3Img1 {
    width: 27%;
    top: 16%;
    left: 15.5%;
}

.home-main .para3 .para3Img2 {
    width: 36.5%;
    top: 28%;
    left: 10.5%;
}

.home-main .para3 .para3Img3 {
    width: 49%;
    top: 12.5%;
    left: 49%;
}

.home-main .para3 .para3Img4 {
    width: 70%;
    display: flex;
    justify-items: center;
    align-items: center;
    bottom: 0%;
    right: 19%;
    gap: 7%;
}

.home-main .para3 .para3Img4 .p3Img {
    width: 50%;
    height: 100%;
}

/* para3结束 */

/* para4 */

.home-main .para4 .para4Img1 {
    width: 43.5%;
    top: 16%;
    left: 7%;
}

.home-main .para4 .para4Img2 {
    width: 51%;
    top: 13.5%;
    left: 48%;
}

.home-main .para4 .para4Img3 {
    width: 43%;
    top: 59.5%;
    left: 52%;
}

.home-main .para4 .para4Img4 {
    width: 7%;
    top: 50.5%;
    left: 93%;
}

.home-main .para4 .para4Img5 {
    width: 11%;
    top: 84.5%;
    left: 50%;
}

.home-main .para4 .para4Img6 {
    width: 11%;
    top: 80%;
    left: 86%;
}

.home-main .para4 .para4Img4 img {
    animation: float1 3s ease-in-out infinite;
    animation-delay: 2s;
}

.home-main .para4 .para4Img5 img {
    animation: float2 2.6s ease-in-out infinite;
    animation-delay: 2s;
}

.home-main .para4 .para4Img6 img {
    animation: float3 3.4s ease-in-out infinite;
    animation-delay: 2s;
}

/* para4结束 */

/* para5 */

.home-main .para5 .para5Img {
    overflow: visible !important;
}

.home-main .para5 .para5Img1 {
    width: 89%;
    top: 34%;
    left: 6%;
}

.home-main .para5 .para5Img2 {
    width: 25%;
    top: 10%;
    left: 24%;
}

.home-main .para5 .para5Img2 .p5Img {
    animation: float4 2.6s ease-in-out infinite;
    animation-delay: 2s;
}

.home-main .para5 .para5Img3 {
    width: 29%;
    top: 76%;
    left: 4.5%;
}

.home-main .para5 .para5Img3 .p5Img {
    animation: float4 3s ease-in-out infinite;
    animation-delay: 3s;
}

.home-main .para5 .para5Img4 {
    width: 18%;
    top: 11%;
    left: 73%;
}

.home-main .para5 .para5Img4 .p5Img {
    animation: float4 3.5s ease-in-out infinite;
    animation-delay: 4s;
}

/* para5结束 */

/* para6 */

.home-main .para6 .para6Img1 {
    width: 45%;
    top: 30%;
    left: 54%;
}

.home-main .para6 .para6Img2 {
    width: 50%;
    top: 11%;
    left: 2%;
}

.home-main .para6 .para6Img2 .p6Counter {
    font-family: 'indexCounter', sans-serif;
    font-size: 14vh;
    color: #bc3808;
    font-weight: bold;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
    align-content: center;
    margin-top: 1vh;
    margin-left: -10vw;
}

/* para6结束 */

/* para7 */

.home-main .para7 .para7Img1 {
    width: 41%;
    top: 14%;
    left: 2%;
}

.home-main .para7 .para7Img2 {
    width: 55.5%;
    top: 26%;
    left: 42.5%;
}

.home-main .para7 .para7Img3 {
    width: 14%;
    top: 14%;
    left: 84%;
}

.home-main .para7 .para7Img3 {
    animation: float4 3.5s ease-in-out infinite;
    animation-delay: 4s;
}

.home-main .para7 .para7Img4 {
    width: 13%;
    top: 77%;
    left: 85%;
}

.home-main .para7 .para7Img4 {
    animation: float4 3s ease-in-out infinite;
    animation-delay: 3s;
}

/* para7结束 */

/* para8 */

.home-main .para8 .para8Img1 {
    width: 65%;
    top: 12%;
    left: 3.5%;
}

.home-main .para8 .para8Img2 {
    width: 28.5%;
    top: 13%;
    left: 66%;
}

.home-main .para8 .para8Img3 {
    width: 64%;
    top: 58%;
    left: 32.5%;
}

.home-main .para8 .para8Img4 {
    width: 44.5%;
    top: 50%;
    left: 1.5%;
}

.home-main .para8 .para8Poison {
    width: 16%;
    top: 61%;
    left: 12%;
    z-index: 2;
}

.home-main .para8 .para8Skull1 {
    width: 6%;
    top: 76%;
    right: 90%;
    z-index: 3;
}

.home-main .para8 .para8Skull2 {
    width: 5%;
    top: 86%;
    left: 13%;
    z-index: 3;
}

.home-main .para8 .para8Skull3 {
    width: 5%;
    top: 81%;
    left: 23%;
    z-index: 3;
}

.home-main .para8 .para8Skull4 {
    width: 5%;
    top: 87%;
    left: 33%;
    z-index: 3;
}

.tree-root-gray {
    filter: grayscale(100%) !important;
    transition: filter 2s ease-in-out !important;
}

.poison-fade-out {
    opacity: 0.3 !important;
    transition: opacity 1.5s ease-out !important;
}

/* para8结束 */

/* para9 */

.home-main .para9 .para9Img1 {
    width: 99%;
    top: 14%;
    left: 0.5%;
    z-index: 2;
}

.home-main .para9 .para9Img2 {
    width: 81%;
    top: 36%;
    left: 9%;
}

.home-main .para9 .para9Img3 {
    width: 89%;
    bottom: 10%;
    left: 5%;
}

.home-main .para9 .para9Img4 {
    width: 9%;
    top: 67%;
    left: 66%;
    z-index: 2;
}

.home-main .para9 .para9Img5 {
    width: 8%;
    top: 63%;
    left: 7%;
    z-index: 2;
}

.home-main .para9 .para9Img6 {
    width: 8%;
    top: 36%;
    left: 13%;
    z-index: 2;
}

.home-main .para9 .para9Img4 img {
    animation: float1 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

.home-main .para9 .para9Img5 img {
    animation: float2 2.6s ease-in-out infinite;
    animation-delay: 1.5s;
}

.home-main .para9 .para9Img6 img {
    animation: float3 3.4s ease-in-out infinite;
    animation-delay: 1.5s;
}

/* para9结束 */

/* para10 */

.home-main .para10 .para10Img1 {
    width: 53%;
    top: 19%;
    left: 3%;
}

.home-main .para10 .para10Img2,
.home-main .para10 .para10Img3 {
    width: 42%;
    top: 13%;
    left: 54.5%;
}

.home-main .para10 .para10Img2 .p10Img,
.home-main .para10 .para10Img3 .p10Img {
    animation: circle 20s linear infinite;
    animation-delay: 6s;
}

.home-main .para10 .para10Pipe {
    width: 14%;
    top: 32%;
    right: 0;
    z-index: 1;
    position: absolute;
    visibility: hidden;
}

.home-main .para10 .para10Pipe .p10Img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* para10结束 */

/* para11 */

.home-main .para11 .para11Img1,
.home-main .para11 .para11Img2 {
    width: 68%;
    top: 13%;
    left: 16%;
}

.home-main .para11 .para11Img3 {
    width: 71%;
    top: 68%;
    left: 17%;
}

.home-main .para11 .para11Img4 {
    width: 20%;
    top: 48.5%;
    left: 17.5%;
}

.home-main .para11 .para11Img5 {
    width: 21%;
    top: 49%;
    left: 56%;
}

.home-main .para11 .para11Img6 {
    width: 5%;
    top: -52.5%;
    left: 86.5%;
    z-index: 10;
}

.home-main .para11 .para11Img4 .p11Img {
    animation: float4 2.6s ease-in-out infinite;
    animation-delay: 6.5s;
}

.home-main .para11 .para11Img5 .p11Img {
    animation: float4 3s ease-in-out infinite;
    animation-delay: 5s;
}

/* para11结束 */

/* para12 */

.home-main .para12 .para12Img1 {
    width: 43%;
    top: 10%;
    left: 31%;
}

.home-main .para12 .para12Img2 {
    width: 78%;
    top: 31%;
    left: 10.5%;
}

.home-main .para12 .para12Img3 {
    width: 76%;
    top: 38%;
    left: 12.5%;
}

.home-main .para12 .para12Img4 {
    width: 24%;
    top: 74%;
    left: 1.5%;
}

.home-main .para12 .para12Img5 {
    width: 19%;
    top: 66%;
    left: 81%;
}

/* para12结束 */

/* para13 */

.home-main .para13 .para13Img1 {
    width: 43%;
    top: 70px;
    left: 28%;
}

.home-main .para13 .para13Img2,
.home-main .para13 .para13Img3,
.home-main .para13 .para13Img4,
.home-main .para13 .para13Img5 {
    width: 33%;
    height: 38vh;
    background-color: transparent;
    border: 4px solid #fe000047;
    border-radius: 25px;
    padding: 0.5%;
    overflow: hidden;
    cursor: pointer;
    transition: all .6s;
}

.home-main .para13 .para13Img2:hover,
.home-main .para13 .para13Img3:hover,
.home-main .para13 .para13Img4:hover,
.home-main .para13 .para13Img5:hover {
    transform: translateY(-5px) scale(1.05);
}

.home-main .para13 .para13Img2 {
    left: 16%;
    top: 19%;
}

.home-main .para13 .para13Img3 {
    right: 16%;
    top: 19%;
}

.home-main .para13 .para13Img4 {
    left: 16%;
    bottom: 2%;
}

.home-main .para13 .para13Img5 {
    right: 16%;
    bottom: 2%;
}

.home-main .para13 .para13Img .gif {
    width: 100%;
    height: 100%;
}

.home-main .para13 .para13Img .gif img {
    width: 100%;
    display: block;
    object-fit: cover;
    z-index: 1;
}

.home-main .para13 .para13Img .gif-outer {
    width: 100%;
    height: 100%;
    background-color: #fffffff5;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .5s;
}

.home-main .para13 .para13Img .gif-outer img {
    width: 70%;
    height: auto;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.home-main .para13 .para13Img2:hover .gif-outer,
.home-main .para13 .para13Img3:hover .gif-outer,
.home-main .para13 .para13Img4:hover .gif-outer,
.home-main .para13 .para13Img5:hover .gif-outer {
   opacity: 0;
}

.home-main .para13 .para13Img .p13Link {
    width: 100%;
    height: 30px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2%;
    text-align: center;
    font-weight: bold;
    transition: all .5s;
    color: #cb5e00;
}

.home-main .para13 .para13Img:hover .p13Link {
    font-size: 1.5vw;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* para13结束 */

/* para14 */

.home-main .para14 .para14Img1 {
    width: 64%;
    top: 29%;
    left: 16%;
    z-index: 1;
}

.home-main .para14 .para14Img2 {
    width: 50%;
    bottom: 0;
    left: 0;
}

.home-main .para14 .para14Img3 {
    width: 100%;
    top: 13%;
    left: 0;
    z-index: 1;
}

.home-main .para14 .para14Img4 {
    width: 10%;
    top: 11%;
    left: 60.5%;
    z-index: 1;
}

.home-main .para14 .para14Img5 {
    width: 10%;
    top: 22%;
    left: 3%;
    z-index: 1;
}

.home-main .para14 .para14Img {
    overflow: visible !important;
}

.home-main .para14 .para14Img4 .p14Img {
    animation: float4 2.6s ease-in-out infinite;
    animation-delay: 2s;
}

.home-main .para14 .para14Img5 .p14Img {
    animation: float4 3s ease-in-out infinite;
    animation-delay: 3s;
}

/* para14结束 */

/* para15 */

.home-main .para15 {
    height: 120vh !important;
}

.home-main .para15 .pv {
    width: 80%;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.home-main .para15 .pv iframe {
    width: 100%;
    aspect-ratio: 560 / 315;
    object-fit: cover;
}

/* para15结束 */

.home-main .indexPara .paraImg.left-enter,
.home-main .indexPara .paraImg.right-enter {
    visibility: hidden;
}

.home-main .indexPara .opacity-enter {
    opacity: 0;
    transition: opacity 600ms ease;
}

.home-main .indexPara .size-enter {
    transform-origin: 50% 50%;
    will-change: transform;
    visibility: hidden;
}

.circle-enter {
    clip-path: circle(0% at 50% 50%);
    -webkit-clip-path: circle(0% at 50% 50%);
    overflow: hidden;
    visibility: hidden;
    --circle-duration: 1200ms;
    --circle-easing: cubic-bezier(.22, .9, .35, 1);
    --circle-delay: 0ms;
}

.circle-enter.in-view {
    visibility: visible;
    animation-name: revealCircle;
    animation-duration: var(--circle-duration, 1200ms);
    animation-timing-function: linear;
    animation-delay: var(--circle-delay, 0ms);
    animation-fill-mode: forwards;
    -webkit-animation-name: revealCircle;
    -webkit-animation-duration: var(--circle-duration, 1200ms);
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: var(--circle-delay, 0ms);
    -webkit-animation-fill-mode: forwards;
}

@keyframes revealCircle {
    from {
        clip-path: circle(0% at 50% 50%);
        -webkit-clip-path: circle(0% at 50% 50%);
    }

    to {
        clip-path: circle(75% at 50% 50%);
        -webkit-clip-path: circle(75% at 50% 50%);
    }
}

@-webkit-keyframes revealCircle {
    from {
        clip-path: circle(0% at 50% 50%);
        -webkit-clip-path: circle(0% at 50% 50%);
    }

    to {
        clip-path: circle(75% at 50% 50%);
        -webkit-clip-path: circle(75% at 50% 50%);
    }
}

.queue-enter {
    opacity: 0;
    transition: none !important;
}

.scretch-enter {
    visibility: hidden;
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    will-change: clip-path, -webkit-clip-path;
}

.scretch-enter.in-view {
    visibility: visible;
    transition:
        clip-path var(--scretch-duration, 900ms) var(--scretch-easing, cubic-bezier(.22, .9, .35, 1)) var(--scretch-delay, 0ms),
        -webkit-clip-path var(--scretch-duration, 900ms) var(--scretch-easing, cubic-bezier(.22, .9, .35, 1)) var(--scretch-delay, 0ms);
    clip-path: inset(0 0% 0 0);
    -webkit-clip-path: inset(0 0% 0 0);
}


/* p3专用 */

.queue-enter .p3Img {
    transform: scale(0);
    opacity: 0;
    will-change: transform, opacity;
}

.home-main .para3 .para3Img4 .p3Img {
    animation: none !important;
    -webkit-animation: none !important;
}

.home-main .para3 .para3Img4 .p3Img1 img {
    animation: float4 3s ease-in-out infinite;
    animation-delay: 5s;
}

.home-main .para3 .para3Img4 .p3Img2 img {
    animation: float4 2.6s ease-in-out infinite;
    animation-delay: 6.5s;
}

.home-main .para3 .para3Img4 .p3Img3 img {
    animation: float4 3.4s ease-in-out infinite;
    animation-delay: 8s;
}

/* p3专用结束 */

/* 动画效果 */
.slide-in-left {
    transform: translateX(-100px);
    opacity: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.slide-in-right {
    transform: translateX(100px);
    opacity: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.slide-in-left.active,
.slide-in-right.active {
    transform: translateX(0);
    opacity: 1;
}