@media screen and (max-width: 700px){
    html, body {
        font-size: 14px;
    }
    :root{
        --space: 1rem;
    }
    .menu-item a{
        white-space: nowrap;
    }
    .menu-item em{
        display: none;
    }
    .page-wrap{
        flex-direction: column;
    }
    .page-side{
        display: none;
        width: 100%;
        padding: var(--space);
    }
    .page-content .page-side{
        display: block;
    }
    .page-content {
        width: 100%;
        padding: calc(var(--space) + 5rem) 0 0 0;
    }
    .box {
        width: 100%;
    }
    .cat-item, .page-side .text {
        padding: 0;
    }
    .text-wrap, .about-wrap{
        display: block;
    }
    .post-section-title {
        padding: var(--space) var(--space) 0 var(--space);
    }
    .pic-img {
        width: 50%;
    }
    .bb .pic-img{
    width: 100%;
}
    .gallery-slider .swiper-slide {
        width: 100%;
    }
    .gallery-slider .swiper-slide a{
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60vh;
    }
    .gallery-slider .swiper-slide img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 60vh;
    }
    .text-list li footer{
        width: 100%;
    }
    .text-list li header{
        display: block;
    }
   .text-list li header h3{
       padding-top: .5rem;
   }
    .text-list li footer:before, .text-list li footer:after {
        font-size: 1rem;
    }
    .open-p-menu{
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        z-index: 2;
    }
    .open-p-menu.show{
        color: var(--bg);
    }
    .open-p-menu.show i:before{
        content: '\f00d';
    }
    .phone-menu-nav:before,
    .open-p-menu:before{
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--color);
        opacity: 0.2;
        content: '';
        top:0;
        left: 0;
    }
    .more-works:before, .social a:before, .full-screen .choose-screen:before, .hide-screen .close-screen:before, .logo a:before, #canvas-menu:before, .header-item:before{
        opacity: 0.2;
    }
    .about-side{
        display: block;
    }

    .phone-menu-nav .menu-item {
        position: relative;
        z-index: 1;
        transform:unset;

    }
    .phone-menu-nav .menu-item.menu-item-has-children>a:after{
        content: '+';
    }
    .phone-menu-nav .menu-item a {
        text-transform: uppercase;
        display: flex;
        justify-content: space-between;
        padding:.5rem 1rem;
        opacity: 1;
        pointer-events: auto;
        font-family: var(--font2);
        position: relative;
        font-size: 1.25rem;
        color: var(--bg);
    }
    .phone-menu-nav-mask{
        width: 100%;
        padding-top:0;
        position: absolute;
        right: 0;
        top:0;
        height: 100%;
        pointer-events: auto;
    }
    .phone-menu-nav{

        width: 100%;
        height: 100%;
        position: fixed;
        top:0;
        right: 0;

        display: none;

    }
    .phone-menu-nav>ul{
        background-color: var(--color);
        width: 50%;
        padding-top: 5rem;
        position: absolute;
        right: 0;
        top:0;
        height: 100%;
        color: var(--bg);
        z-index: 1;
    }
    .phone-menu-nav .sub-menu{
        display: none;
    }
}