@media screen and (max-width: 2000px) {
    html{font-size: 16px;} 
    header{width: 20%;}
    main, #profile, #skill, #project, #contact{width: 80%; margin-left: 20%;}
}

@media screen and (max-width: 1865px) {
    html{font-size: 15px;} 
    header{width: 18%;}
    main, #profile, #skill, #project, #contact{width: 82%; margin-left: 18%;}
}

@media screen and (max-width: 1200px) {
    html{font-size: 14px;} 
    header{width: 18%;}
    main, #profile, #skill, #project, #contact{width: 82%; margin-left: 18%;}
}

@media screen and (max-width: 1000px) {
    html{font-size: 12px;} 
    header{width: 16%;}
    main, #profile, #skill, #project, #contact{width: 84%; margin-left: 16%;}
}

@media screen and (max-width: 820px) {
    html{font-size: 12px;} 
    header{
        width: 100%;
        height: 7vh;
        flex-direction: row;
        justify-content: space-between;
        top: 0;
        box-shadow: 0 2px rgba(70, 70, 70, 0.342);
    }
    header nav{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    nav > div{
        margin: 1.5rem;
    }
    header > #headerLogo{
        width: 40%;
        text-align: left;

        display: flex;
        align-items: center;
    }
    .myInfo .boxProfileLeft #boxProfileImg{
        width: 65%;
        height: 25%;
    }
    .bx-wrapper{
        height: 93vh;
    }
    header > #headerLogo > a {
        font-size: 1.5rem;
        margin-left: 1rem;
    }
    main, #profile, #skill, #project, #contact{width: 100%; height: 93vh; margin-left: 0; padding-top: 7vh; margin-bottom: 7vh;}
    main{height: 100vh; padding-bottom: 10vh; margin-bottom: 0; margin-top: 7vh;}
    
    /* 프로필 반응형 */
    .myInfo{
        display: flex;
        flex-direction: column;
    }
    .myInfo .boxProfileLeft, .myInfo .boxProfileRight{
        width: 100%;
        margin: 0;
    }
    .myInfo .boxProfileLeft{
        flex-direction: row;
        justify-content: space-between;
        height: 10%;
        padding-bottom: 0;
    }
    .myInfo .boxProfileLeft div:last-child{
        margin-right: 4%;
    }
    .myInfo .boxProfileLeft div:last-child > p{
        margin: 0;
    }
    .myInfo #boxProfileImg{display: none;}
    .myInfo .boxProfileRight > div{
        height: 100%;
    }
    .myInfo .boxProfileRight{
        display: flex;
        justify-content: center;
        height: 85%;
        padding-bottom: 5%;
    }
    .boxProfileTitle{
        width: 50%;
        margin-left: 4%;
        margin-bottom: 0;
        
    }
    #profile .boxProfileTitle{text-align: left;}
}

@media screen and (max-width: 500px) {
    html{font-size: 10px;} 
    header{
        width: 100%;
        height: 7vh;
        flex-direction: row;
        justify-content: space-between;
    }
    main, #profile, #skill, #project, #contact{width: 100%; height: 93vh; margin-left: 0; }
}