@media (max-width:768px){
    .pc{
        display: none;
    }
    .mo{
        display: block;
    }
    .hero-section h1 {
    font-size: 18vw;
    }
    .hero-section {
        /* padding-top: 15vh; */
        height: 100vh;
        box-sizing: border-box;
    }
    .year {
    
    }

    .information>* {
        /* flex: 1;
        flex: initial;
        width: 33.333%; */
    }
    .point-desc {
        /* font-size: 93px; */
        margin-bottom: 24px;
    }
    .information{
        display: grid;
        grid-template-columns: repeat(2,minmax(50px,1fr));
    }
    .info3 {
        grid-column: 1/3;
        order: 1;
        margin-bottom: 16rem;
    }
    .info1{
        text-align: left;
        order: 2;
    }
    .info2{
        text-align: right;
        order: 3;
    }

    .hero-video {
        
    }
.pr-title h3 {
    font-size: 2.5rem;
    flex: 5;
}
.contact h1 {
    font-size: 2.5rem;
}
    .project-sticky-menu {
        display: flex;
        gap: 0.5rem 0.5rem;
        position: sticky;
        left: 0;
        top: 3rem;
        margin-top: 4rem;
        justify-content: flex-start;
        margin-bottom: 2rem;
        /* flex-direction: column; */
        flex-wrap: wrap;
    }
    .about {
        margin-top: 12rem;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
    .about-content h1 {
        font-size: 2.5rem;
        line-height: .9;
    }

    .about-content {
        /* flex: 9; */
        position: sticky;
        left: 0;
        top: 0;
        background: #fff;
        width: 100%;
        padding: 2rem 0;
    }
    .tlyear {
        font-size: 4rem;
        padding-right: 0.7rem;
    }
    .skill-content-grid {
        display: grid;
        grid-template-columns: repeat(1, minmax(50px,1fr));
        gap: 3rem 3rem;
    }
    .biography-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem 1rem;
        text-align: center;
        font-family: "GFS Didot", serif;
    }
    .biography-content h1 {
        font-size: 2.5rem;
        line-height: .9;
    }
    .skill .skti {
    font-size: 2.5rem;
    line-height: .9;
    margin-bottom: 1rem;
    }
    .pop-tl{
    font-size: 2.5rem;
    line-height: .9;
    }
    .esbanner-dp {
        flex-direction: column;
        gap: 0.5rem;
    }
    .sy {
        padding-top: 5rem;
    }
    .es-tl, .te-tl, .poster-tl {
    font-size: 2.5rem;
}
    .tebanner-dp{
        flex-direction: column;
        gap:.5rem;
    }
    .pr-title{
        flex-direction: column;
    }

}
@media (max-width:450px){
    .timeline-table {
        display: flex;
        justify-content: space-between;
        padding: 2rem 0;
        border-bottom: 1px solid #000;
        gap: 1rem;
        flex-direction: column-reverse;
    }
    .tlyear {
        font-size: 3rem;
        padding-right: 0.7rem;
    }
}