/*====================
Common
======================*/
@media screen and (max-width: 1280px) {
    .header {
        flex-direction: row-reverse;
    }
    .header .menu-wrap .menu {
        display: block;
    }
    .header .menu-wrap a {
        display: none;
    }
    .portfolio-wrap .portfolio > div .top {
        font-size: 18px;
    }
    .portfolio-wrap .portfolio > div .bottom {
        font-size: 14px;
    }
}

@media screen and (max-width: 770px) {
    .header .logo-wrap .job {
        display: none;
    }
    .header .menu-wrap .menu {
        width: 20px;
    }
    .footer .footer-wrap {
        flex-direction: column;
    }
    .footer .footer-wrap > div {
        width: calc(100% - 40px) !important;
    }
    .portfolio-wrap .portfolio > div .top {
        font-size: 14px;
    }
    .portfolio-wrap .portfolio > div .bottom {
        font-size: 12px;
    }
    .about-wrap .speak p {
        font-size: 16px;
    }
}

/*====================
PC
======================*/
@media screen and (min-width: 1281px) and (max-width: 1600px) {

}

/*====================
Tablet-L
======================*/
@media screen and (min-width: 771px) and (max-width: 1280px) {

}

/*====================
Tablet-M
======================*/
@media screen and (min-width: 415px) and (max-width: 770px) {

}

/*====================
Smart Phone
======================*/
@media screen and (max-width: 414px) {
    .header{
        padding: 0 5%;
    }    
    .header .dark-mode{
        right:5%;
    }
    .portfolio-wrap {
        grid-template-columns: 1fr;
    }
    .footer{
        width: 90%;
    }
    .footer .footer-wrap .info {
        flex-direction: column;
        gap: 10px;
    }
    .footer .footer-wrap .info .desc .contact {
        align-items: flex-start;
    }
    .main-content {
        margin-top: 150px;
    }
    .content {
        width: 90%;
    }
    .content.mobile {
        width: 100%;
        margin-top: 150px;
    }
    .content.mobile.about-body {
        width: 90%;
    }
    .about-body .card_box {
        flex-direction: column;
        gap: 20px;
    }
    .about-body .card_box .card {
        width: 100%;
    }
    .about-body .card_box .motto {
        align-items: center;
    }
    .about-body .card_box .motto p:first-child {
        font-size: 6vw;
    }
    .about-body .card_box .motto p:last-child {
        font-size: 3.5vw;
    }
    .back-wrap {
        display: none;
    }
}