@media (max-width:900px) {

    .off-canvas-left .mfp-content,
    .off-canvas-right .mfp-content {
        background-color: #fff !important;
    }

    .off-canvas:not(.off-canvas-center) .nav-vertical li>a {
        text-transform: none;
        color: #000;
        font-size: 16px;
    }

    .mfp-ready .mfp-close {
        opacity: 1 !important;
        background: var(--primary-color);
        left: 10%;
        mix-blend-mode: unset;
    }

    .off-canvas .sidebar-menu {
        padding: 50px 0 !important;
    }
}

@media (max-width:600px) {
    .section h2 {
        font-size: 36px;
    }
    .section h3 {
        font-size: 28px;
    }
    .section-cooperate .row .cooperate-right{
        padding-left: 0 !important;
        padding-top: 30px !important;
    }
    .section-cooperate .row .cooperate-right p{
        font-size: 32px;
        margin-bottom: 10px;
    }
    .transparent .header-main {
        height: 60px !important;
    }

    #logo {
        max-width: 69px;
    }

    .section-factory {
        padding: 0 20px !important;
    }

    .section-factory .col-inner .box-factory .count-up {
        font-size: 52px;
    }

    .section-factory .col-inner .box-factory .unit {
        font-size: 52px;
    }

    .section-factory .col-inner .box-factory .plus {
        color: var(--secondary-color);
        position: relative;
        top: -10px;
        font-size: 52px;
    }

    .section-factory .row>.col:first-child .col-inner {
        min-height: auto;
        padding-bottom: 30px;
    }

    .section-factory .row>.col:nth-child(2) .col-inner {
        min-height: auto;
        padding-bottom: 100px;
    }

    .section-factory .row>.col:nth-child(3) .col-inner {
        min-height: auto;
        padding-bottom: 20px;
    }

    .section-factory .row>.col:nth-child(4) .col-inner {
        min-height: auto;
        padding-bottom: 20px;
    }

    .section-factory .col-inner .box-factory p.factory-text {
        font-size: 16px;
    }

    .timeline3d__info {
        margin-top: 4rem;
    }

    .timeline3d__dot {
        bottom: 41% !important;
    }

    .timeline3d__wrap {
        padding: 0 0.5rem;
        gap: 1rem;
    }

    .timeline3d__line {
        width: 1920px !important;

    }

    .timeline3d__item {
        width: 250px;
        margin-bottom: 3rem;
    }

    .timeline3d__img-container {
        width: 160px;
        height: 120px;
    }

    .timeline3d__year {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .timeline3d__info {
        font-size: 0.85rem;
        max-width: 160px;
    }

    .timeline3d__line {
        bottom: 50%;
    }

    .timeline3d__quote-button {
        width: 200px;
        margin-left: 4rem;
        margin-bottom: 8rem;
    }

    .timeline3d__quote-btn {
        width: 200px;
        height: 200px;
        font-size: 16px;
        margin: 0;
    }

    .footer-row .col:nth-child(2) .col-inner {
        border-top: 1px solid rgb(224, 224, 224);
        border-bottom: 1px solid rgb(224, 224, 224);
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .footer-row .col:nth-child(3) .col-inner .text {
        margin: auto;
    }

    .footer-row .col:nth-child(3) .col-inner p {
        margin-bottom: 10px;
        text-align: center;
        margin: auto;
    }

    .footer-row .col .is-border {
        display: none;
    }
}