* {
    padding: 0;
    margin: 0;
}
#seg-deter{
    position: absolute;
    width: 60%;
    top: 25%;
    left: 31%;
}

.jump a{
    color: black;
}
a:link{
    text-decoration: none;
}


body {
    background-color: rgb(255, 236, 219);
    /* background-color: white; */
    padding: 0;
}


.banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

/* banner */
.video-cover {
    width: 100%;
    height: 20px;
    /* background-color: rgb(255,236,219); */
    background-color: rgb(4, 5, 96);
    position: relative;
    bottom: 2vh;
}

/* 第1部分：数据 */
.seg-data {
    padding: 0 10vw;
}

.data-fix {
    position: relative;
}

.seg-data img {
    width: 9vw;
}

.data-detail{
    position: relative;
    left: 5vw;
}

.data-desc {
    margin: 5vh 0;
}

.data-desc1 {
    margin-top: 20vh;
}

.seg-data .number {
    font-size: 3rem;
    color: #e65b86;
}

.seg-data .img-decr {
    font-size: 2rem;
}

.data-line{
    display: inline;
    width: 0.1vw;
    height: 10vh;
    position: relative;
    border-radius: 20px;
    left: 2vw;
    background-color: rgb(244,165,171);
}

/* 第1部分：肝病恶化 */
.seg-deter .container {
    height: 70vh;
}


.seg-deter .desc {
    font-size: 2rem;
}

.tri-desc{
    padding: 2vh 3vw ;
    border: rgb(5,5,96) 5px solid;
    background-color: rgba(243, 145, 170,0.9);
    border-radius: 2vw;
    color: white;
}


/* ani */
.ehua-box {
    position: relative;
    display: flex;
    justify-content: center;
    height: 75vh;
    margin-bottom: 5vh;
}

.clock {
    flex: 2;
    display: flex;
    flex-direction: column;
    top: 0;
}

.clock-box {
    top: 10%;
    position: relative;
}

.clockmain-box {
    flex: 3;
}

.clockmain {
    width: 50%;
    height: 50%;
    margin-left: 25%;
    margin-top: 25%;
}

.clock-svg {
    width: 100%;
}

.linel {
    background-color: #e65b86;
    margin-top: 5vh;
    width: 5%;
    height: 25vh;
    border-radius: 1rem;
    margin-left: auto;
    margin-right: auto;
}

.liver_ehua {
    flex: 7;
}

#firstLottie {
    width: 80%;
    margin: auto;
}

.pointer_m_active {
    transform-origin: 50% 50%;
    animation: clock_rotate_h 2s linear infinite;
}

.pointer_h_active {
    transform-origin: 50% 50%;
    animation: clock_rotate_h 24s linear infinite;
}

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

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

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

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

/* 过渡1 */
.trisi {
    position: relative;
}

.trisi .container {
    position: relative;
    height: 75vh;
}

.trisi .how {
    font-family: font-main;
    font-size: 8rem;
    margin-top: 50vh;
}

.trisi .desc {
    font-size: 2rem;
    margin-bottom: 10vh;
}

.bgc-tris{
    background: linear-gradient(rgb(255, 236, 219),white);
    height: 80vh;
    width: 100%;
    position: absolute;
    bottom: -112vh;
    z-index: -1;
}



/* 第2部分：肝病的问题所在 */
.seg-res {
    margin-top: 100vh;
    padding: 0;
    background-image: linear-gradient(rgb(151, 248, 244),
            rgb(0, 0, 33) 10%);
    height: 500vh;
    position: relative;

}

.seg-res .container {
    position: relative;
    height: 100%;
}


.wave-box {
    width: 100%;
    height: 100px;
    /* overflow: hidden; */
    margin-top: 70vh;
    position: relative;
    top: -15vh;
}

.wave-box img {
    z-index: -1;
    position: absolute;
}

.wave1 {
    animation: wave 5s -2s infinite ease-in-out;
}

.wave2 {
    animation: wave 5s -3s infinite ease-in-out;
}

.wave3 {
    animation: wave 5s -4s infinite ease-in-out;
}

.wave4 {
    animation: wave 5s -5s infinite ease-in-out;
}


@keyframes wave {
    50% {
        translate: 0 -15%;
    }
}



.faling {
    position: absolute;
    top: -60vh;
    width: 100%;
    height: 500vh;
}


.faling .imgbox {
    width: 100%;
    position: sticky;
    top: 35vh;
    width: 100%;
    margin: 0 auto;
}

.faling .img-box{
    display: flex;
    justify-content: center;
}

.img-fix{
    width: 20vw;
    height: 20vh;
}

.faling img {
    position: absolute;
    width: 20vw;
}

.faling1 {
    opacity: 0.1;
}

.faling2 {
    opacity: 0;
}

.scene {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -35vh;
}

.scene p {
    position: relative;
    font-size: 2vw;
    color: rgb(80, 170, 250);
    text-align: center;
    top: 80vh;
}

.scene img{
    width: 12vw;
    position: absolute;
}

.scene1 {
    opacity: 0;
}

.scene1 .s1 {
    top: 10vh;
    left: 20vw;
}

.scene .bottle {
    width: 6vw;
    top: 40vh;
    left: 20vw;
}


.scene1 .s3 {
    top: 10vh;
    right: 20vw;
}

.scene1 .s4 {
    top: 43vh;
    right: 20vw;
}



.scene2 {
    opacity: 0;
}

.scene2 .s1 {
    width: 16vw;
    top: 12vh;
    left: 20vw;
}

.scene2 .s2 {
    width: 18vw;
    top: 13vh;
    right: 20vw;
}

.scene2 .s3 {
    width: 17vw;
    top: 40vh;
    right: 18vw;
}

.scene3{
    opacity: 0;
}

.scene3 .s1{
    width: 80vw;
    top: 5vh;
    left: 10vw;
}



/* 过渡2 */

.trisi2 {
    width: 100%;
    padding-top: 20vh;
    padding-bottom: 25vh;
    background-color: rgb(0, 0, 33);
    position: relative;
    padding-bottom: 30vh;
}

.trisi2 p {
    font-size: 10rem;
    position: relative;
    color: rgb(243, 164, 170);
    text-shadow: 0px 0px 10px white;
    transition: 0.2s;
    top: -30vh;
    
}

.lucky{
    font-family: font-main;
}




@keyframes wave2 {
    50% {
        bottom: 20%;
    }
}

/* 第3部分：我们的努力 */
.seg-weare {
    padding: 0;
    margin-top: -60vh;
}

.seg-weare .weare {
    padding: 0;
}

.seg-weare .potraiy {
    width: 100%;
}

.seg-weare img {
    width: 50%;
}

.seg-weare .desc p {
    font-size: 2rem;
}

/* 第3部分：我们的设计 */
.seg-design {
    position: relative;
    width: 99vw;
    display: flex;
    justify-content: center;
}

.box {
    position: absolute;
    width:99vw;
    height: 40%;
    z-index: 3;
    display: flex;
    justify-content: center;
}

.box img {
    width: 27vw;
}


.tube {
    position: absolute;
    width: 70vw;
    z-index: 3;
    display: flex;
    justify-content: center;
}

.tube img{
    position: absolute;
    width: 10%;
}

.tube1{
    left: 15vw;
    translate: 0 20vh;
    transform: rotate(0deg);
}
.tube2{
    right: 15vw;
    translate: 0 20vh;
    transform: rotate(0deg);
}

.design-video-box {
    margin-top: 60vh;
    overflow: hidden;
    height: 90vh;
}

.design-video {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100vw;
    height: fit-content;
}

.replay{
    position: absolute;
    background-color:rgb(243, 145, 170);
    bottom: 0vh;
    padding: 1vh 2vw;
    border-radius: 15px;
    border: #050560 solid 4px;
    font-family: font-main;
    cursor: pointer;
    transition: 0.3s;
}
.data-desc-item{
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 30px;
    border: 4px solid rgb(0, 0, 33);
}

#putmouse{
    top: 45%;
    font-size: 2em;
    position: absolute;
    color: rgba(54, 37, 41, 0.6);
    z-index: 1;
}

.replay:hover{
    transform: scale(1.1);
    background-color:rgb(229, 190, 200);
    transition: 0.3s;
}

.dv-0{
    width: 100%;
    height: 80vh;
    background-color: rgb(255, 236, 219);
    position: absolute;
    z-index: 1;
    top: 5vh;
    transition: 0.5s ease-in;
}

.dv-0-move{
    top: 120vh;
    transition: 2s ease-out;
}

.dv-1 {
    width: 40%;
    position: relative;
    opacity: 1;
}

.dv-2 {
    width: 40%;
    position: absolute;
    opacity: 0;
    bottom: 0.11vh;
}

.video-desc{
    width: 60vw;
    position: absolute;
    top: 40vh;
    display: flex;
    align-items: center;
    font-size: 1.5em;
}

.video-desc-box{
    position: relative;
    width: 50vw;
    height: fit-content;
    margin: 0 auto;
    display: flex;
    align-items: center;
    text-align: justify;
    z-index: 300;
}

.video-desc-box p{
    padding: 2vh 3vw ;
    border: rgb(0, 0, 33) 5px solid;
    background-color: rgba(243, 145, 170,0.9);
    border-radius: 3vw;
    color: white;

}


.video-desc-control{
    width: 40%;
    height: 100%;
    position: absolute;
    bottom: 10%;
    z-index: 200;
}

.video-desc-control *{
    cursor:cell;
}


.video-desc-control .bss{
    width: 35%;
    height: 20%;
    top: 35%;
    left: 10%;
    position: absolute;
    animation: flash_cont 2s infinite;
    border-radius: 40px;
    z-index: 100;
}

.video-desc-control .fxr{
    width: 35%;
    height: 20%;
    top: 35%;
    right: 10%;
    position: absolute;
    animation: flash_cont 2s infinite;
    border-radius: 40px;
}

.video-desc-control .rfp{
    width: 30%;
    height: 15%;
    top: 75%;
    left: 35%;
    position: absolute;
    animation: flash_cont 2s infinite;
    border-radius: 40px;
}

@keyframes flash_cont {
    50%{
        background-color: rgba(243, 145, 170,0.6);
    }
}

.trisi3{
    font-size: 4rem;
    font-family: font-main;
}

/* 第4部分：detail */
.seg-detail {
    background-color: rgb(243, 145, 170);
    z-index: 200;
}

/* 跳转部分 */
.jump img {
    width: 200px;
    height: 200px;
}

.jump{
    transition: 0.3s ease-in-out;
}

.jump:hover{
    transform: scale(1.1);
    transition: 0.3s ease-in-out;
}

.jump p {
    margin-top: 1vh;
    font-size: 2rem;
}

p{
    font-family: font-text;
}

video{
    width: 100%;
    height: 100%;
    object-fit: contain;
 }
 video:focus {
   outline:none;
 }