#greet span{
    font-size: 32px;
    display:inline-block;
}

.sp_br{
    display: none;
}


@media only screen and (max-height: 662px) {
    #biography{
        min-height:2400px;
    }
}

@media only screen and (max-width: 640px) {
  
    #greet span{
        font-size: 24px;
    }
    
    .sp_br{
        display: inline;
    }
    
    #update{
        font-size: 18px;
    }
}


@media only screen and (min-width: 1024px) and (max-width: 1400px){
    #biography{
        margin-top: 10px;
        margin-bottom: 100px;
        height:90%;
        padding-bottom:150px;
        min-height:300vh;
        
    }
    
    #biography::before{
        position: absolute;
        width: 5px;
        background: #e1e1c8;
        top: 6rem;
        left: 0.15rem;
        margin-left: 11vw;
        content: '';
        height: 80%;
        min-height:2300px;
        max-height:2800px;
        z-index:1;
    }
}

@media only screen and (min-width: 1400px) {
    
    
    
    #biography::before{
        position: absolute;
        width: 5px;
        background: #e1e1c8;
        top: 6rem;
        left: 0.15rem;
        margin-left: 11vw;
        content: '';
        height: 100%;
        min-height:2200px;
        max-height:3200px;
        z-index:1;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px){
    #biography::before{
        position: absolute;
        width: 5px;
        background: #e1e1c8;
        top: 6rem;
        left: 0.15rem;
        margin-left: 11vw;
        content: '';
        height: 80%;
        min-height:2200px;
        max-height:3200px;
        z-index:1;
    }
    
    
}


@media only screen and (min-width: 768px) {
    .phase{
        border-top:solid 1.5px black;
        margin-top:1px;
    }
    
    .left_cont{
        border-right: dotted 0.5px rgb(125,125,125);
    }
    .right_cont{
        border-left: dotted 0.5px rgb(125,125,125);
    }
    
    .exp{
        margin-top:2px;
    }

}

@media only screen and (max-width: 350px) {
    .bio_y{
        border-right: none; 
        font-size:14px;
    }
}

@media only screen and (min-width: 768px) {
    .bio_y{
        font-size:2vw;
    }
    .bio_y::after{
        content:"~";
        left: 0.1rem;
    }
    
    .bio_c::before{
        position: absolute;
        width: calc(1vw + 14px);
        height: 5px;
        background: #e1e1c8;
        top: 10px;
        left: calc(10vw + 16.5px);
        content: '';
        z-index:1;
    }
}

@media only screen and (max-width: 767px) {
    .slider{
        margin: 10px auto;
        width: 100%;
        padding-left: 0;
    }
    .slider img{
        height: auto;
        width: 110vw;
    }
    
    .slick-prev:before,.slick-next:before {
        color: #000;
    }
    .slick-prev{
        color: #000;
        left: calc((70vw - 225px) / 2);
        z-index:32;
    }
    .slick-next{
        color: #000;
        right: calc((70vw - 225px) / 2);
        z-index:32;
    }
    
    .slider ul{
        width:90%;
    }
    
    /*
    .biography::before{
        position: absolute;
        width: 5px;
        background: #e1e1c8;
        top: inherit;
        left: 0.1rem;
        margin-left: 14vw;
        content: '';
        height:calc( 99% - 1rem);
        max-height: 500px;
    }*/
    /*
    #biography::before{
        position: absolute;
        width: 5px;
        background: #e1e1c8;
        top: 3rem;
        left: 0.40rem;
        margin-left: 12vw;
        content: '';
        height: calc( 99% - 1rem);
        min-height:2500px;
        z-index:1;
    }*/
}