/* tablet ~ laptop */
.mob-only {
    display: none;
}

@media all and (max-width:1023px) {
    .project-num:before {
        top: 15px;
        right: 8px;
    }

    #experience-page .experience-box {
        justify-content: space-between;
    }

    #experience-page .experience-box .card {
        width: calc((100% / 2) - var(--gap-padding)/2);
    }

    #contact-popup .contact>p {
        display: flex;
        justify-content: center;
    }
}

/* ~mobile */
@media all and (max-width:767px) {
    .pc-only {
        display: none;
    }

    .mob-only {
        display: flex;
    }

    .btn-link .btn-click::after {
        display: none;
    }

    #main .page-title {
        padding-top: calc(var(--gap-padding) * 4);
    }

    /* work */
    #main .yeonsu .dot .word:before {
        width: 12px;
        height: 12px;
        bottom: -12px;
    }

    #work-page main {
        overflow: hidden;
    }

    #work .work-item .info-box .title {
        top: 0;
    }

    #work .work-item .info-box .date,
    #work-page #main .project-num:before {
        font-size: clamp(0.8rem, 1.2vw, 19px);
    }

    #work-page .work-link[target="_blank"] .title:before {
        display: none;
    }

    #work-page #work #work-grid.work-list-container.visible {
        gap: 0;
    }

    #work-page #work #work-grid .work-item .info-box .title {
        font-size: clamp(1.3rem, 5vw, 4rem);
        padding-left: 0;
    }

    .work-view-page.kor #main .text {
        padding-bottom: 0.7rem;
    }

    /* view-page */
    .work-view-page .work-item>div,
    .experience-view-page .experience-item>div,
    .experience-view-page .w-content>div {
        width: 100%;
        padding-right: 0;
    }

    [class*="-view-page"] .w-content .btns {
        position: relative;
        bottom: 0;
        left: 0;
        margin: 0;
    }

    [class*="-view-page"] .w-content .btns>* {
        padding: 10px 10px 12px;
    }

    #experience-page .tab-menu {
        margin-top: 1rem;
        gap: 0.7rem;
    }

    .w-video .media-item video {
        margin: 0
    }

    .w-content .description-text>div:first-child,
    .code-section {
        margin-top: 2rem;
    }

    .experience-view-page .w-content>div.code-section {
        padding-right: calc(var(--gap-padding)/1.5);
    }

    /* footer */
    footer .contact,
    #contact-popup .contact,
    footer .footer-bottom .container,
    [class*="view-page"] .work-item,
    .experience-view-page .experience-item>div {
        flex-direction: column;
    }

    footer .footer-bottom .container {
        gap: 1rem;
    }

    footer .contact {
        margin-top: calc(var(--gap-padding)*2);
    }


    /* contact popup */
    #contact-popup .popup-container {
        width: 100%;
        height: 100%;
        padding: 0;
        border-radius: 0;
    }

    #contact-popup .contact {
        gap: var(--gap-padding);
        margin-top: calc(var(--gap-padding) * 3);
    }

    #contact-popup .popup-container .popup-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .close-btn {
        width: 50px;
        height: 50px;
    }

    #contact-popup .more-btn .btn-text-inner {
        top: -1px;
    }
}