@media (max-width:768px){
    .hero{
        height: 100vh;
    }
    .hero h1{
        font-size: 40px;
    }
    .about-content{
        flex-direction: column-reverse;
    }
    .about-txt{
    width: auto;
    box-sizing: border-box;
    .cloud{
    margin-left: auto;
    margin-bottom: 18px;
    width:297px;
    height:95px;
}
.cloud img{
    width:100%;
    height:100%;
    object-fit: cover;
}
.cloud2{
    margin-right: auto;
    margin-bottom: 18px;
    width:330px;
    height:95px;
}
.cloud2 img{
    width:100%;
    height:100%;
    object-fit: cover;
}
.cloud3{
    margin-left: auto;
    margin-bottom: 18px;
    width:323px;
    height:60px;
}
.cloud3 img{
    width:100%;
    height:100%;
    object-fit: cover;
}
}
.about-img{
    width: auto;
}
.about-txt h3{
    margin-top: 2rem;
}
.certi-list>li{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.certi-list>li span:nth-of-type(1){order:3;}
.certi-list>li span:nth-of-type(2){order: 2;}
.certi-list>li strong{order: 1;}
.aboutme2 .common-frame{
    display: flex;
    gap: 1rem;
    flex-direction: column;
}
.aboutme2-img{
    width: auto;
}
.aboutme2-txt{
    width: auto;
    margin-top: 1rem;
}
.aboutme2-txt h3{
    margin-top: 2rem;
}
.banner-txt {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    flex-direction: column;
}


.contact h2 {
    font-size: 2rem;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.ct2 {
    font-size: 1.2rem;
    margin-bottom: 4rem;
}

.grid-skill>li{

    padding: 1rem;

}
.project-sticky-menu a{
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}
.contact-menu{
    flex-direction: column;
    gap: 1rem;
}




/* 768선 */
}

@media (max-width:320px){
        .about-title {
            font-size: 2.4rem;
        }
     .grid-skill {
        display: grid;
        grid-template-columns: repeat(1,minmax(50px,1fr));
        gap: 1rem;
        text-align: left;
    }
    .grid-skill figure{
        text-align: center;
    }
}