/*
280px: 작은 모바일 화면 
390px: 일반적인 스마트폰 화면 
430px: 대화면 스마트폰 및 작은 태블릿 화면
500px: 가장 큰 스마트폰 화면
768px: 작은 태블릿 및 가로 모드의 스마트폰
820px: 보통 태블릿
912px: 다소 큰 태블릿
1024px: 가장 큰 태블릿 혹 데스크톱
1280px: 작은 데스크톱 모니터 및 노트북 
1440px: 일반적인 데스크톱 모니터 
1920px: 큰 데스크톱 모니터 및 고해상도 디스플레이
*/

/* 391~430px */
@media (min-width: 391px) and (max-width: 500px) {
    body {
        height: 589rem;
    }

    .login-screen img {
        width: 75%;
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        top: 20%;
        position: absolute;
    }

    .login-screen-btn {
        position: absolute;
        background: var(--main-color);
        width: 75%;
        height: 3rem;
        z-index: 5;
        top: 50%;
        border-radius: 10px;
        cursor: pointer;
        border: none;
    }

    .logo {
        background-color: var(--main-color);
        display: flex;
        flex-direction: row;
        height: 3.5rem;
        width: 82.5%;
        position: absolute;
        left: 0;
        align-items: center;
        border-radius: 10px;
        flex-wrap: nowrap;
        justify-content: center;
        box-shadow: 5px 5px 0 var(--charcoal-color, 0.4);
    }

    nav {
        display: none;
        right: -50rem;
        height: auto;
        width: 100%;
        flex-direction: column;
        position: absolute;
        transition: right 0.5s;
    }

    nav ul {
        list-style: none;
        display: flex;
        height: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2.5rem;
        padding: 0;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .nav ul li {
        margin: 25px;
        width: 100%;
    }

    .navburger {
        display: flex;
    }

    .navxbtn {
        display: flex;
    }

    .top-icon1,
    .top-icon2,
    .top-icon3 {
        display: none;
    }

    .card-case-weather {
        display: none;
    }

    .card-case {
        width: 94%;
        top: 5.5rem;
        left: 3.5%;
        position: absolute;
        display: flex;
        align-content: flex-start;
    }

    .card-main-scroll-container {
        width: 99%;
        height: 31rem;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        position: absolute;
        top: 0;
        flex-wrap: nowrap;
        left: 0;
    }

    .card-main {
        background-color: var(--main-color);
        display: flex;
        flex-direction: column;
        height: 100%;
        border-radius: 10px;
        width: 100%;
        position: sticky;
        text-align: left;
        z-index: 1;
        box-shadow: 5px 5px 0 var(--charcoal-color, 0.4);
        margin: 0;
    }

    .card-main-center h4 {
        transform: rotate(-90deg);
        font-size: 3rem;
        margin: 0;
        position: absolute;
        left: -14%;
        bottom: 35%;
    }

    .card-container {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 32rem;
        overflow: auto;
        max-height: 160rem;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1rem;
    }

    .card-title {
        background-color: var(--main-color);
        display: flex;
        flex-direction: column;
        height: auto;
        border-radius: 10px;
        width: 99.25%;
        text-align: left;
        z-index: 0.5;
        align-items: flex-start;
        box-shadow: 5px 5px 0 var(--charcoal-color, 0.4);
    }

    .card-title h4 {
        margin-top: 1rem;
        margin-left: 2rem;
        width: 85%;
    }

    .card-about {
        background-color: var(--main-color);
        display: flex;
        flex-direction: column;
        height: auto;
        border-radius: 10px;
        width: 96.75%;
        height: 17rem;
        text-align: left;
        z-index: 0.5;
        padding-top: 1%;
        padding-left: 2.5%;
        box-shadow: 5px 5px 0 var(--charcoal-color, 0.4);
    }

    .card-about h2 {
        margin-top: 1rem;
        font-size: 1rem;
        line-height: 2rem;
        margin-bottom: 5%;
    }

    .card-about-btn-container {
        width: 98%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 1rem;
    }

    .card-about-btn {
        width: 15.5%;
        height: 4rem;
        border-radius: 10px;
        border: none;
        background-color: var(--sub-color);
    }

    .card-skills {
        background-color: var(--main-color);
        display: flex;
        flex-direction: column;
        height: auto;
        border-radius: 10px;
        width: 96.75%;
        text-align: left;
        padding-top: 1%;
        padding-left: 2.5%;
        box-shadow: 5px 5px 0 var(--charcoal-color, 0.4);
        flex-wrap: nowrap;
        align-content: flex-start;
        margin-bottom: 7.5%;
    }

    .card-skills-left {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: left;
        padding-top: 1%;
    }

    .card-skills-right {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: left;
        padding-top: 3rem;
        margin-bottom: 5%;
    }

    .card-history {
        width: 90%;
        height: auto;
        position: absolute;
        left: 3.5%;
        top: 191.5rem;
        max-height: 120rem;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 1rem;
        max-height: 240rem;
    }

    .history_wrap .history_item .history_cont strong::before {
        content: "";
        position: absolute;
        top: 10px;
        left: -6.5px;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background: var(--point-color);
    }

    .history_wrap .history_item .history_cont strong::after {
        content: "";
        position: absolute;
        top: 17px;
        left: 0;
        width: 1rem;
        height: 1px;
        background: var(--point-color);
    }

    .history_wrap .history_item .history_cont dl {
        margin-top: 10px;
        font-size: 0.8rem;
        color: var(--white-color);
        display: flex;
        flex-direction: column;
    }

    .history_wrap .history_item .history_cont dt {
        width: 40%;
    }

    .card-slider-container {
        left: 0;
        top: 376.5rem;
        width: 100%;
        height: 60rem;
        position: relative;
        background-color: #00000000;
        border-radius: 10px;
        overflow: hidden;
    }

    .card-result {
        background-color: var(--main-color);
        display: flex;
        flex-direction: column;
        height: 100rem;
        border-radius: 10px;
        width: 90%;
        text-align: left;
        padding-top: 1%;
        padding-left: 2.5%;
        position: absolute;
        overflow: hidden;
        left: 3.5%;
        top: 361.75rem;
        box-shadow: 5px 5px 0 var(--charcoal-color, 0.4);
    }

    .card-result-btn-container {
        width: 97%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 1rem;
    }

    .card-work {
        background-color: var(--main-color);
        display: flex;
        flex-direction: column;
        height: 35rem;
        border-radius: 10px;
        width: 90.5%;
        text-align: left;
        padding-top: 1%;
        padding-left: 2.5%;
        position: absolute;
        left: 3.5%;
        top: 463.25rem;
        box-shadow: 5px 5px 0 var(--charcoal-color, 0.4);
    }

    .card-work-slide-box {
        background-color: var(--sub-color);
        height: 30%;
        width: 93%;
        position: relative;
        overflow: hidden;
        margin: 5px;
        margin-top: 2rem;
        margin-bottom: 2rem;
        border-radius: 10px;
        padding: 1%;
    }

    .image-indicators {
        text-align: center;
        margin-top: 10px;
        position: absolute;
        bottom: 7.5%;
        left: 17.5%;
        z-index: 2;
    }

    .card-review {
        background-color: var(--main-color);
        display: flex;
        flex-direction: column;
        height: 17.25rem;
        border-radius: 10px;
        width: 90%;
        text-align: left;
        padding-top: 1%;
        padding-left: 2.5%;
        position: absolute;
        left: 3.5%;
        top: 499.75rem;
        box-shadow: 5px 5px 0 var(--charcoal-color, 0.4);
    }

    .card-contact {
        background-color: var(--main-color);
        display: flex;
        flex-direction: column;
        height: 17.25rem;
        border-radius: 10px;
        width: 90%;
        text-align: left;
        padding-top: 1%;
        padding-left: 2.5%;
        position: absolute;
        left: 3.5%;
        top: 518.5rem;
        box-shadow: 5px 5px 0 var(--charcoal-color, 0.4);
    }

    .card-contact-icon-container {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-left: 1%;
        width: 96.5%;
        height: 10rem;
        margin-top: 1rem;
    }

    .card-contact-icon-button {
        width: 3rem;
        height: 3rem;
    }

    .card-main2 {
        background-color: var(--main-color);
        border-radius: 10px;
        width: 92.5%;
        height: 32rem;
        position: absolute;
        z-index: 1;
        box-shadow: 5px 5px 0 var(--charcoal-color, 0.4);
        top: 537.25rem;
        left: 3.5%;
        margin-left: 0;
    }

    .card-main2-center h4 {
        transform: rotate(-90deg);
        font-size: 3rem;
        margin: 0;
        position: absolute;
        left: -14%;
        bottom: 35%;

    }
}