@media screen and (min-width: 1280px) {
    .mob-version {display: none !important;}
}
@media screen and (max-width: 1279px) {
    .desk-version {display: none !important;}
    .legend { width: 100%; }
    
    body.hidden {overflow: hidden;}
    header { padding-block: 15px; }
    header .primary {
        position: relative;
        row-gap: 16px;
        display: flex;
        flex-direction: column;
    }
    header .logo { max-width: 80px; }
    header .nav-bar .row {
        position: relative;
        align-items: center;
        justify-content: space-between;
    }
    header .nav-bar .wp-nav {
        position: fixed;
        visibility: hidden;
        transition: all 1s;
        inset: 0 0 0 calc(100% - 400px);
    }
    header .nav-bar.show-nav .wp-nav {visibility: visible;}
    header .nav-bar .wp-nav nav {
        position: relative;
        left: 100%;
        width: 100%;
        height: 100%;
        transition: all .5s;
        padding: 80px 20px 20px;
        background: var(--color-white);
    }
    header .nav-bar.show-nav .wp-nav nav {transform: translateX(-100%);}
    header .nav-bar.show-nav .bx-ct { visibility: visible; }
    header .toggle-nav {
        position: relative;
        z-index: 2;
        height: 48px;
        display: flex;
        row-gap: .6rem;
        cursor: pointer;
        padding: 10px 0;
        width: max-content;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        color: var(--color-black);
        transition: all 400ms ease;
    }
    header .toggle-nav > span {
        position: relative;
        width: 2rem;
        height: .1rem;
        line-height: 0;
        border-radius: 1rem;
        transition: all .3s;
        display: inline-block;
        background: currentColor;
        transform-origin: 55% center;
    }
    header .nav-bar.show-nav .toggle-nav { row-gap: 0; }
    header .nav-bar.show-nav .toggle-nav > span:nth-child(2) { background-color: transparent; }
    header .nav-bar.show-nav .toggle-nav > span:last-child { transform: rotate(45deg); }
    header .nav-bar.show-nav .toggle-nav > span:first-child { transform: rotate(-45deg); }
    .sc-01 .clip { height: min(600px,calc(100vh - 102px)); }
    .sc-01 .clip { height: 100%; }
    .sc-01 .clip > img {
        position: absolute;
        inset: initial;
    }
    .sc-04 .listing li > figure { height: min(541px,50vw); }
    .sc-02 .row { flex-direction: column-reverse; }
    .sc-02 .bx-lf { width: 100%; }
    .sc-03 .listing { row-gap: 20px; }
    .sc-03 .listing > li {
        width: 33%;
        flex: 0 0 auto;
    }
    .sc-14 .listing figure { height: min(310px,23vw); }
    .sc-12 .card { width: 29.95%; }
    .sc-13 .listing .card { width: 33.333%; }
}
@media screen and (max-width: 1150px) {
    .sc-14 .listing .card { width: 31.6%; }
    .sc-14 .listing figure { height: min(310px,31vw); }
}
@media screen and (max-width: 450px) {
    body {font-size: 15px;}
    h1 { font-size: 30px; }
    h2 { font-size: 35px; }
    h3 { font-size: 16px; }
    .arrow:is(.prev, .next):before { padding: 20px; }
    header .nav-bar .wp-nav { inset: 0; }
    .sc-01 .ctn-text-right { padding-inline: 35px; }
    .sc-03 .listing > li { width: 50%; }
    .sc-04 .listing { flex-wrap: wrap; }
    .sc-04 .listing li {
        flex: 0 0 100%;
        min-width: 100%;
    }
    .sc-08 .listing {
        width: calc(100% - 90px);
        clip-path: polygon(0 0, calc(100% + 90px) 0, calc(100% + 1790px0px) 100%, 0% 100%);
    }
    .sc-08 .arrow.prev { left: 20px; }
    .sc-08 .arrow.next { right: -60px; }
    .sc-07 :is(iframe,video) { height: min(543px,55vw); }
    .sc-08 ul.slick-dots button { padding: 6px; }
    .sc-08 .listing figure { height: min(541px,70vw); }
    .sc-09 .listing .card {
        margin-inline: auto;
        width: min(300px,100%);
    }
    .sc-12 .card { width: 47.45%; }
    .sc-12 .card > figure { height: min(272px,50vw); }
    .sc-12 .card > .card-body { min-height: min(272px,50vw); }
    .sc-09 .listing .card > figure { height: min(350px,50vw); }
    footer .bg-black * { line-height: 220%; }
    .sc-14 .listing .card { width: 48.7%; }
    .sc-14 .col-item {width: 100%;}
    .sc-11 .wp-forms { padding: 25px 30px; }
    .sc-11 .wp-forms .small-width,
    .sc-11 .wp-forms .half {
        width: 100%;
        flex: 0 0 auto;
    }
    .sc-13 .listing .card { width: 50%; }
    .sc-10 .row > .card { width: 100%; }
    .sc-14 .listing figure { height: min(310px,47vw); }
    footer ul.address > li * { font-size: 17px; }
}