*{
    padding: 0;
    margin: 0;
}


@font-face {
    font-family: "font-main";
    src:url("../../font/Simply\ Rounded\ Bold.ttf");
    font-weight: normal;
    font-style: normal;

}


/* nav */
.nav-switch{
    width: 100px;
    margin: 40px 0 0 40px;
}

/* Banner */
.banner .animate img{
    width: 100%;
}

.banner{
    width: 100%;
    padding: 0;
}

.banner .title p{
    font-size: 5em;
    font-family: font-main;
}

.banner .desc p{
    font-size: 2em;
    font-family: font-main;
    color: rgb(243,164,170);
    text-shadow: 
    -1px 1px 0 #000, 
    1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
}


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

.seg-data img{
    width: 400px;
    height: 400px;
}

.seg-data .number{
    font-size: 2em;
}

.seg-data .img-decr{
    font-size: 2.5em;
}

/* 第1部分：肝病恶化 */
.seg-deter{
}

.seg-deter .clock{
}


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

.trisi p{
    font-size: 5em;
    font-family: font-main;
}

.trisi .box1{
    margin-bottom: 40%;
    position: relative;
}

.falling-box{
    margin-top: 10%;
    position: absolute;
    height: 250%;
    width: 100%;
    z-index: 1;
}

.falling-fix{
    height: 500px;
    position: sticky;
    top: 30%;
}
.falling{
    width: 100%;
}

.falling img{
    width: 50%;
    position: absolute;
    left: 25%;
}

.falling1{
    opacity: 1;
}
.falling2{
    opacity: 0;
}


.trisi .wave-box{
    overflow: hidden;
}

.trisi .wave-box img{
    position: absolute;
    bottom: -5%;
    z-index: -1;
}

.trisi .wave1{
    animation: wave 5s -2s infinite ease-in-out;
}
.trisi .wave2{
    animation: wave 5s -4s infinite ease-in-out;
}
.trisi .wave3{
    animation: wave 5s -6s infinite ease-in-out;
}
.trisi .wave4{
    animation: wave 5s -8s infinite ease-in-out;
}



@keyframes wave {
    50%{
        bottom: -10%;
    }
}


/* 第2部分：肝病的问题所在 */
.seg-res{
    padding: 0;
    background-image: linear-gradient(
        rgb(151,248,244),20%,rgb(0,0,36),rgb(0,0,33)
        );
}

.seg-res .imgbox{
    margin-top: 600px;
    height: 1200px;
}


/* 过渡2 */

.trisi2{
    position: relative;
    margin-top: 8%;
}

.trisi2 p{
    font-size: 6em;
    font-family: font-main;
    position: relative;
    margin-top: 50px;
    color: rgb(243,164,170);
    text-shadow: 
    -1px 1px 0 #000, 
    1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;;
    bottom: 200px;
    z-index: -1;
    transition: 0.2s;
}


.trisi2 .wave-box img{
    position: absolute;
    bottom: 0;
}

.trisi2 .wave1{
    animation: wave2 5s -2s infinite ease-in-out;
}
.trisi2 .wave2{
    animation: wave2 5s -4s infinite ease-in-out;
}
.trisi2 .wave3{
    animation: wave2 5s -6s infinite ease-in-out;
}


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

.trisi2 p{
    position: relative;
}

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

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

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

.seg-weare .desc p{
    font-size: 1.5em;
}

/* 第3部分：我们的设计 */

.stiky-box{
    height: 1200px;
}


.line{
    height: 120px;
    background-color: brown;
    outline: 1px solid;
    margin: 0 auto;
    position: sticky;
    text-align: center;
}

.line p{
    font-size: 2em;
}

.line1{
    position: sticky;
    top: 20px;
    background-color: bisque;
}
.line2 {
    background-color: aquamarine;
    top: 140px;
}

.line3 {
    background-color: azure;
    top: 260px;
    z-index: 20;
}

.line-1{
    width: 100%;
    height: 400px;
}

.dexc-box{
    width: 75%;
}
.footer{
    width: 800px;
    height: 200px;
    background-color: blue;
    margin: 0 auto;
}

.seg-design .desc{
    width: 100%;
    height: 200px;
    position: sticky;
    margin-top: 40px;
    top: 530px;
    background-color: antiquewhite;
    display: flex;
    justify-items: center;
    justify-content: center;
    text-align: center;
}

.dexc-box{
    height: 120px;
    background-color: cadetblue;
    opacity: 0;
    transition: 0.3s 0.1s;
    position: absolute;
    top: 60px;
}

.rxr-box{
    background-color: yellowgreen;
}

.mach-box{
    background-color: rosybrown;
}

.box-show{
    opacity: 1;
    transition: 0.3s 0.1s;
}

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

.jump img{
    width: 200px;
    height: 200px;
    background-color: rebeccapurple;
}