.home_page{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    background-color: transparent;
    display:flex;
    flex-direction:column;
    overflow: hidden;
}

.flex-pages,
.pages {
    width: 100vw;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    background-color: #00336600;
    color: #fff;
    z-index: 10
}

.pages {
    /* height: calc(100vh - 1rem - 40px) */
    min-height:100vh;
}


.flex-pages {
    height: fit-content
}

.spotlight{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        transparent 250px,
        rgba(0,0,0,0) 270px
    );
    pointer-events: none;
    transition: background-image  2s ease-out;
    z-index: 12;
}

.active .spotlight{
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        transparent 180px,
        rgba(69, 37, 37, 0.55) 200px
    );
    transition: background-image 2s ease-out

}


#front_1 {
    position: absolute;
    top: min(18%, 18vh);
    left: 50vw;
    transform: translateX(-45%);
    width: 60%;
    height: auto;
    z-index: 11;
}

#left_2 {
    position: absolute;
    top: min(50%, 50vh);
    transform: translateY(-50%);
    left: -25%;
    width: 25%;
    height: auto;
    z-index: 11;
    transition: left 0.5s ease-in-out;
    transition-delay: 0s;
}

.active #left_2 {
    left: 0;
    transition-delay: 1.8s;
}

#right_2 {
    position: absolute;
    top: min(50%, 50vh);
    transform: translateY(-50%);
    right: -25%;
    width: 25%;
    height: auto;
    z-index: 11;
    transition: right 0.5s ease-in-out;
    transition-delay: 0s;
}

.active #right_2 {
    right: 0;
    transition-delay: 1.8s;
}

#middle_2{
    position: absolute;
    top: min(80%, 80vh);
    left: 50vw;
    transform: translate(-50%,-50%);
    z-index: 11;
    transition: 0.5s ease-in-out;
    transition-delay: 0s;
    color: #A93115;
    opacity:0;
    font-family: 'kumbh-bold';
    font-size: 4vh;

    width:45vw;
    text-align: center;
    word-break: normal;
    white-space: pre-line;

    /* 发光效果 */
    /* text-shadow:0 0 20px #c6595980; */
}

.active #middle_2 {
    top: min(45%, 45vh);
    transition-delay: 1s;
    opacity:1;
}

#to_2_1{
    position:absolute;
    top:-20vh;
    left:30%;
    transform: translate(-50%,-50%);

    width:10vw;
    height:auto;

    transition: 1.5s ease-in-out;
    transition-delay: 0s;

}

.active #to_2_1{
    top: 130vh;
    transition-delay: 0.5s;
}

#to_2_2{
    position:absolute;
    top:-40vh;
    left:80%;
    transform: translate(-50%,-50%);

    width:10vw;
    height:auto;

    transition: 1.5s ease-in-out;
    transition-delay: 0s;

}

.active #to_2_2{
    top: 130vh;
    transition-delay: 0.7s;
}

#to_2_3{
    position:absolute;
    top:-30vh;
    left:50%;
    transform: translate(-50%,-50%);

    width:10vw;
    height:auto;

    transition: 1.3s ease-in-out;
    transition-delay: 0s;

}

.active #to_2_3{
    top: 130vh;
    transition-delay: 0.5s;
}

#to_2_4{
    position:absolute;
    top:-20vh;
    left:15%;
    transform: translate(-50%,-50%);

    width:10vw;
    height:auto;

    transition: 1.5s ease-in-out;
    transition-delay: 0s;

}

.active #to_2_4{
    top: 130vh;
    transition-delay: 1s;
}

#to_2_5{
    position:absolute;
    top:-30vh;
    left:90%;
    transform: translate(-50%,-50%);

    width:10vw;
    height:auto;

    transition: 1.3s ease-in-out;
    transition-delay: 0s;

}

.active #to_2_5{
    top: 130vh;
    transition-delay: 1s;
}

#front_3,.active#back_3,.active#back_4{
    position: absolute;
    top: min(55%, 55vh);
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    transition: 1s ease-in-out;
    transition-delay: 0s;
}

#front_3{
    z-index: 15;
}

#back_3{
    position:absolute;
    left:max(-100%, -100vw);
    top: min(55%, 55vh);
    transform: translateY(-50%);
    z-index: 14;
    transition: 1s ease-in-out;
}

#back_4{
    position:absolute;
    left:max(100%, 100vw);
    top: min(55%, 55vh);
    transform: translateY(-50%);
    z-index: 13;
    transition: 1s ease-in-out;
}

#word_3, #word_4{
    position: absolute;
    top: min(50%, 50vh);
    left: 60vw;
    z-index: 16;
    transition: 0.5s ease-in-out;
    transition-delay: 0.5s;

    color: #ffffff;
    opacity:0;
    font-family: 'kumbh-bold';
    font-size: 4vh;

    width:30vw;
    text-align: center;
    word-break: normal;
    white-space: pre-line;
}

#word_3{
    transform: translate(-50%,0%);
}

#word_4{
    transform: translate(-50%,-100%);
}

.active#word_3, .active#word_4{
    transform: translate(-50%,-50%);
    transition-delay: 0.5s;
    opacity: 1;
}

#up_5{
    position: absolute;
    top: -40vh;
    left:50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 50vh;
    z-index: 10;
    transition: 0.5s ease-in-out;
    transition-delay: 0s;
    opacity: 0;
}

.active #up_5{
    transform: translateX(-50%) translateY(-100%);
    top:-20vh;
    transition-delay: 0.5s;
    opacity: 1;
    animation: up_5 4s ease-in-out;
}

@keyframes up_5 {
    0% {
        transform: translateX(-50%) translateY(0%);
    }
    50% {
        transform: translateX(-50%) translateY(0%);
    }
    100% {
        transform: translateX(-50%) translateY(-100%);
    }
}

#down_5{
    position: absolute;
    bottom: -30vh;
    left:50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 30vh;
    z-index: 10;
    opacity:0;
    transition: 0.5s ease-in-out;
    transition-delay: 0s;
}

.active #down_5{
    transform: translateX(-50%) translateY(100%);
    bottom: 0;
    opacity: 1;
    transition-delay: 0.5s;
    animation: down_5 4s ease-in-out;
} 

@keyframes down_5 {
    0% {
        transform: translateX(-50%) translateY(0%);
    }
    50% {
        transform: translateX(-50%) translateY(0%);
    }
    100% {
        transform: translateX(-50%) translateY(100%);
    }
}



#middle_5{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 11;
    transition: 1s ease-in-out;
    transition-delay: 0s;
    width:30vw;
    height:auto;
}

.active #middle_5 {
    transition-delay: 1.5s;
    animation: aim_anime 3s ease-in-out;
}

@keyframes aim_anime {
    0% {
        transform: translate(-50%, -50%);
        filter: blur(10px);
    }
    30% {
        transform: translate(-100%, -30%);
        filter: blur(7px);
    }
    60% {
        transform: translate(50%, -70%);
        filter: blur(3px);
    }
    100% {
        transform: translate(-50%, -50%);
        filter: blur(0px);
    }
}

#middle_down_5{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
    transition: 1s ease-in-out;
    transition-delay: 0s;
    width:30vw;
    height:auto;
    opacity: 0;
}

.active #middle_down_5 {
    transition-delay: 3s;
    opacity: 1;
}

#up_word_5{
    position: absolute;
    top: 20vh;
    left: 50%;
    transform: translate(-50%,-100%);
    z-index: 11;
    transition: 1s ease-in-out;
    transition-delay: 0s;

    color: #880E0A;
    opacity:0;
    font-family: 'kumbh-bold';
    font-size: 4vh;

    width:30vw;
    text-align: center;
    word-break: normal;
    white-space: pre-line;
}

.active #up_word_5 {
    transition-delay: 3s;
    opacity:1;
    transform: translate(-50%,-50%);
}

#down_word_5{
    position: absolute;
    bottom: 5vh;
    left: 50vw;
    transform: translate(-50%,-50%);
    z-index: 11;
    transition: 1s ease-in-out;
    transition-delay: 0s;

    color: #880E0A;
    opacity:0;
    font-family: 'kumbh-bold';
    font-size: 3vh;

    width:60vw;
    text-align: center;
    word-break: normal;
    white-space: pre-line;
}

.active #down_word_5 {
    transition-delay: 4s;
    opacity:1;
}

#up_word_5 em, #down_word_5 em{
    color: #880E0A;
}

.left_6, .right_6 {
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.left_6 img, .right_6 img {
    width: 25vh;
    height: auto;
}

.left_6 img{
    transform: translateX(25%);
}

.right_6 img{
    transform: translateX(-25%);
}

.left_6 {
    position: absolute;
    left: 0;
    transform: translate(-100%,-50%);
    z-index: 10;
    transition: 1.5s ease-in-out;
    transition-delay: 0s;
    width:50vw;
    height:auto;
}

.active .left_6 {
    transform: translate(0%,-50%);
}

.right_6 {
    position: absolute;
    right: 0;
    transform: translate(100%,-50%);
    z-index: 10;
    transition: 1.5s ease-in-out;
    transition-delay: 0s;
    width:50vw;
    height:auto;
}

.active .right_6 {
    transform: translate(0%,-50%);
}

.word_6{
    color: #743330 ;
    background-color: #FEDDC4;
    font-size: 2.5vh;
    text-align: left;
    font-family: kumbh-bold;
}

.left_6 .word_6{
    padding: 3vh 5vh 3vh 8vh;
    border-top-right-radius: 3vh;
    border-bottom-right-radius: 3vh;
}

.right_6 .word_6 {
    padding: 3vh 8vh 3vh 5vh;
    border-top-left-radius: 3vh;
    border-bottom-left-radius: 3vh;
}


#p_6_1{
    top:30vh;
    transition-delay: 0.5s;
}

#p_6_2{
    top:45vh;
    transition-delay: 0.75s;
}

#p_6_3{
    top:65vh;
    transition-delay: 1s;
}

#p_6_4{
    top:80vh;
    transition-delay: 1.25s;
}


#page_7{
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#front_7{
    position: absolute;
    top: min(60%, 60vh);
    left: 50%;
    transform: translate(-50%,-50%);
    width: 30vw;
    height: auto;
    z-index: 10;
    transition: 1s ease-in-out;
    transition-delay: 0s;
    opacity: 1;
}

#up_word_7{
    position: absolute;
    top: 20vh;
    left: 50%;
    transform: translate(-50%,-100%);
    z-index: 11;
    transition: 1s ease-in-out;
    transition-delay: 0s;

    color: #880E0A;
    opacity:0;
    font-family: 'kumbh-bold';
    font-size: 4vh;

    width:80vw;
    text-align: center;
    word-break: normal;
    white-space: pre-line;
}

.active #up_word_7 {
    transition-delay: 1.5s;
    transform: translate(-50%,-50%);
    opacity: 1;
}

#shaddow_7 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    /* 使用遮罩层替代渐变 */
    -webkit-mask: radial-gradient(
        circle at 50% 50%, 
        transparent 50%, 
        black 51%
    );
    mask: radial-gradient(
        circle at 50% 50%, 
        transparent 50%, 
        black 51%
    );
    transform: scale(1.8);
    animation: shadowback 1s cubic-bezier(0.8, 0, 0.2, 1) forwards;
}

.active #shaddow_7 {
    animation: shadowShrink 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes shadowShrink {
    0% {
        transform: scale(1.8); /* 初始放大模拟大透明区域 */
    }
    100% {
        transform: scale(1); /* 缩小到原始尺寸 */
    }
}

@keyframes shadowback {
    0% {
        transform: scale(1); /* 缩小到原始尺寸 */
    }
    100% {
        transform: scale(1.8); /* 初始放大模拟大透明区域 */
    }
}

#page_8{
    overflow: hidden;
}

#up_word_8{
    position: absolute;
    top: 20vh;
    left: 50%;
    transform: translate(-50%,-100%);
    z-index: 11;
    transition: 1s ease-in-out;
    transition-delay: 0s;

    color: #880E0A;
    opacity:0;
    font-family: 'kumbh-bold';
    font-size: 4vh;

    width:80vw;
    text-align: center;
    word-break: normal;
    white-space: pre-line;
}

.active #up_word_8 {
    transition-delay: 0.5s;
    transform: translate(-50%,-50%);
    opacity: 1;
}

#word_8{
    position: absolute;
    top: min(50%, 50vh);
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 11;
    transition: 1s ease-in-out;
    transition-delay: 0s;

    color: #880E0A;

    font-family: 'kumbh-bold';
    font-size: 3vh;

    width:100vw;
    display:flex;
    flex-direction: row;
    align-items: center;
    gap: 1vh;
    justify-content: center;
}

.active #word_8 {
    transition-delay: 2.5s;
    gap:12vw;
    transform: translate(-55%,-50%);
}

.word_left_8, .word_right_8{
    display:block;
    text-align: center;
}
.active #word_8 .f_word_8 {
    position: relative;
    display:inline-block;
    transition-delay: 4.5s;
    color: rgb(251, 81, 34);
    animation: jump_8 1s cubic-bezier(0.4, 0, 0.2, 1);
    animation-delay: 4s;
}

@keyframes jump_8 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5vh);
    }
    100% {
        transform: translateY(0);
    }
}

#front_8{
    position: fixed;
    top: min(50%, 50vh);
    left: 50%;
    transform: translate(-50%,-100%);
    width: 10vw;
    height: auto;
    z-index: 15;
    transition: 1s ease-in-out;
    transition-delay: 0s;
    opacity: 0;
}

.active #front_8 {
    transition-delay: 2.5s;
    transform: translate(-50%,-50%);
    opacity: 1;
}

#tom_up_8{
    position: absolute;
    top: -20vh;
    left: 80%;
    transform: translate(-50%,0%);
    width: 10vw;
    height: auto;
    z-index: 16;
    transition: 1s ease-in-out;
    transition-delay: 1s;
}

#tom_down_8{
    position: absolute;
    bottom: -40vh;
    left: 20%;
    transform: translate(-50%,0%);
    width: 10vw;
    height: auto;
    z-index: 16;
    transition: 1s ease-in-out;
    transition-delay:1s;
}

.active #tom_down_8 {
    animation-delay: 1s;
    animation: pro_swing 4s infinite linear;
    bottom:10vh;
    transition-delay: 1s;
}

.active #tom_up_8 {
    animation-delay: 1s;
    animation: pro_swing 4s infinite linear;
    top:40vh;
    transition-delay: 1s;
}

#page_9{
    background-image: url(https://static.igem.wiki/teams/5647/wiki/home/wave/home-page5-background-able-to-cut.webp);
    overflow: hidden;
}

#front_9{
    position: fixed;
    top: min(50%, 50vh);
    left: 50%;
    transform: translate(-50%,-100%);
    width: 10vw;
    height: auto;
    z-index: 15;
    transition: 1s ease-in-out;
    transition-delay: 0s;
    opacity: 0;
}

.active #front_9 {
    transform: translate(-50%,-50%);
    opacity: 1;
    transition-delay:0.2s;
    animation: pro_swing 4s infinite linear;
    animation-delay: 1.5s;
}

@keyframes pro_swing {
    0% {
        transform: translate(-50%,-50%) rotate(0deg);
    }
    25% {
        transform: translate(-50%,-50%) rotate(5deg);
    }
    50% {
        transform: translate(-50%,-50%) rotate(0deg);
    }
    75% {
        transform: translate(-50%,-50%) rotate(-5deg);
    }
    100% {
        transform: translate(-50%,-50%) rotate(0deg);
    }
}

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


#splash_9_1{
    z-index: 16;
}

#splash_9_2{
    z-index: 14;
    height:38vh;
    transform: translate(-50%,-20vh);
}

.active #splash_9_2{
    transform:translate(-50%,0);
    transition: 1s ease-in-out;
}


#word_9{
    position: absolute;
    top: min(65%, 65vh);
    left: 50%;
    transform: translate(-50%,-100%);
    z-index: 11;
    transition: 0.7s ease-in-out;
    transition-delay: 0s;

    color: #ffffff;
    opacity:0;
    font-family: 'kumbh-bold';
    font-size: 4vh;

    width:80vw;
    text-align: center;
    word-break: normal;
    white-space: pre-line;
}

.active #word_9 {
    transform: translate(-50%,-50%);
    transition-delay: 2s;
    opacity:1;
}

.wave_9{
    width:100%;
    height:30vh;
    position:absolute;
    bottom:0;
    transform: translateY(100%);
}

.active .wave_9{
    transform: translateY(0%);
    transition: 1s ease-in-out;
}

#wave_9_1{
    height:40vh;
    transition-delay: 0.5s;
}

#wave_9_2{
    height:35vh;
    transition-delay: 0.3s;
}

#wave_9_3{
    height:40vh;
    transition-delay: 0.7s;
}

#wave_front_9{
    position:absolute;
    height:30vh;
    bottom:0;
    z-index:16;
}

#left_10 {
    position: absolute;
    left:0;
    top: 55%;
    transform: translate(-100%,-50%);
    z-index: 10;
    transition: 1.5s ease-in-out;
    transition-delay: 0s;
    height:auto;
    width:36vw;
}

.active #left_10 {
    left: 6vw;
    transform: translate(0%,-50%);
    transition-delay: 0.5s;
}

#right_10 {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(100%,-50%);
    z-index: 10;
    transition: 1.5s ease-in-out;
    transition-delay: 0s;
    width:45vw;
    height:auto;
    border: 5px solid #890C0B;
    color: black;
    padding: 2vw;
    border-radius: 2vw;
    font-family: 'kumbh-bold';
    font-size: 3vh;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 5vh;
}

.active #right_10 {
    right: 6vw;
    transform: translate(0%,-50%);
    transition-delay: 0.5s;
}

#left_11 {
    position: absolute;
    left:0;
    top: 55%;
    transform: translate(-100%,-50%);
    z-index: 10;
    transition: 1.5s ease-in-out;
    transition-delay: 0s;
    width:45vw;
    height:auto;
    border: 5px solid #890C0B;
    color: black;
    padding: 2vw;
    border-radius: 2vw;
    font-family: 'kumbh-bold';
    font-size: 3vh;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 5vh;
}

.active #left_11 {
    left: 6vw;
    transform: translate(0%,-50%);
    transition-delay: 0.5s;
}

#right_11 {
    position: absolute;
    right: 0;
    top: 55%;
    transform: translate(100%,-50%);
    z-index: 10;
    transition: 1.5s ease-in-out;
    transition-delay: 0s;
    width:45vw;
    height:auto;
}

.active #right_11 {
    right: 6vw;
    transform: translate(0%,-50%);
    transition-delay: 0.5s;
}

#up_12{
    position: absolute;
    top: -20vh;
    left:50%;
    transform: translateX(-50%);
    width: auto;
    height:40vh;
    z-index: 10;
    transition: 0.5s ease-in-out;
    transition-delay: 0s;
    opacity: 0;
    color:#880E0A;
    font-family: 'kumbh-bold';
    font-size: 3vh;
    border: 4px solid #890C0B;
    border-radius: 2vw;
    padding: 2vw;
    background: #fff8f0;
}

.active #up_12{
    top:20vh;
    transition-delay: 0.5s;
    opacity: 1;
}

#down_12{
    position: absolute;
    bottom: -30vh;
    left:50%;
    transform: translateX(-50%);
    width: auto;
    height: 38vh;
    z-index: 10;
    opacity:0;
    transition: 0.5s ease-in-out;
    transition-delay: 0s;
    border: 4px solid #890C0B;
    border-radius: 2vw;
}

.active #down_12{
    bottom: 15vh;
    opacity: 1;
    transition-delay: 0.5s;
}

#up_13{
    width:40vw;
    height:auto;
    position: absolute;
    top: -20vh;
    left:50%;
    transform: translateX(-50%);
    z-index: 10;
    transition: 0.5s ease-in-out;
    transition-delay: 0s;
    opacity: 0;
    border-radius: 2vw;
}

.active #up_13{
    top:20vh;
    transition-delay: 0.5s;
    opacity: 1;
}

#word_13{
    position: absolute;
    top: min(80%, 80vh);
    left: 50%;
    transform: translate(-50%,50%);
    z-index: 11;
    transition: 0.7s ease-in-out;
    transition-delay: 0s;

    color: #FA6C32;
    opacity:0;
    font-family: 'kumbh-bold';
    font-size: 3vh;

    width:80vw;
    text-align: center;
    word-break: normal;
    white-space: pre-line;
    border: 4px solid #890C0B;
    border-radius: 2vw;
}

.active #word_13 {
    transform: translate(-50%,-50%);
    transition-delay: 1s;
    opacity:1;
}

#left_14{
    position:absolute;
    top: 50vh;
    left:30%;
    transform: translate(-50%, -50%);
    width:55vw;
    height:auto;
    z-index:10;
    opacity:0;
    transition: 3s ease-in-out;
    color:#879E46;
    font-family: 'kumbh-bold';
    border: 4px solid #879E46;
    border-radius: 2vw;
    padding: 1vw;
}

#left_14 h1{
    color:#879E46;
    text-align: center;
}

#left_14 p{
    font-size: 2.5vh;
    text-align: left;
}

.active #left_14{
    transition-delay: 0.5s;
    opacity: 1;
}

#right_14{
    position:absolute;
    bottom:10vh;
    right:-40vw;
    transform: translate(-50%, -50%);
    width:35vw;
    height:auto;
    z-index:10;
    opacity:0;
    transition: 2s ease-in-out;
    text-align: center;
}

.active #right_14{
    transition-delay: 0.5s;
    right:-11vw;
    opacity: 1;
}


#page_15{
    overflow: hidden;
}

.more_15{
    position:absolute;
    width:12vw;
    height:0;
    overflow: visible;
    background-color: #FA6C32;
    transition: 1s ease-in-out;
    border: 4px solid #FA6C32;
    border-radius: 2vw;
    transform: translate(-50%,-50%);
}

.active .more_15{
    height: 10vw;
    background-color: #fff;
    transition-delay:1s;
}



.pro_15{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%,-50%);
    width:10vw;
    height:auto;
}

#more_15_1 .pro_15{
    transform: translate(-50%,-50%) rotate(30deg);
}


.more_15 a{
    position:absolute;
    top:70%;
    left:50%;
    transform: translate(-50%,-50%);
    font-family: kumbh-bold;
    font-size: 3vh;
    color: #00000000;
}

.active .more_15 a{
    color: #FA6C32;
    transition: 0.3s ease-in-out;
    transition-delay:2.3s;
}

#more_15_1{
    left:0;
    top:55vh;
}

#more_15_2{
    top:-20vh;
    left:50vw;
}

#more_15_3{
    right:0;
    top:55vh;
}

.active #more_15_1{
    left:30vw;
    transition: 1s ease-in-out;
}

.active #more_15_2{
    top:55vh;
    transition: 1s ease-in-out;
}

.active #more_15_3{
    left:70vw;
    transition: 1s ease-in-out;
}

#up_15{
    position: absolute;
    top: 25vh;
    left:52vw;
    transform: translate(-50%,-100%);
    max-width: 80vw;
    height: auto;
    z-index: 10;
    transition: 1s ease-in-out;
    transition-delay: 0s;
    opacity: 0;
    font-family: kumbh-bold;
    font-size: 5vh;
    color:#A93115;
    text-align: center;
}

.active #up_15{
    transform: translate(-50%,-50%);
    transition-delay: 1s;
    opacity: 1;
}

#up_15 img{
    position:absolute;
    left:-3vw;
    top: 50%;
    width:5vw;
    height:auto;
    transform: translate(-50%,-50%);
    animation: pro_swing 4s infinite linear;
}