@charset "utf-8";@media(hover: none),(pointer:coarse) {
    .cursor {
        display:none
    }
}

@media(max-width: 1000px) {
    .menu,.inq,.seo_btn {
        display:none
    }

    .burger {
        display: flex
    }

    .pgrid {
        grid-template-columns: 1fr 1fr
    }

    .inq-float,.seo-float,.totop {
        opacity: 1;
        pointer-events: auto;
        transform: none
    }
}

@media(max-width: 600px) {
    .f-bottom {
        flex-direction:column
    }

    .f-right {
        align-items: flex-start;
        margin-top: 0
    }

    .pgrid {
        grid-template-columns: 1fr
    }

    .svc {margin-top: 520px;height: 0px;min-height: auto; }

    .totop {
        right: 20px;
        bottom: 24px
    }

    .inq-float {
        right: 20px;
        bottom: 79px
    }

    .seo-float {
        right: 20px;
        bottom: 134px
    }
}

img {
    max-width: 100%;
    height: auto
}

svg,iframe,object,embed {
    max-width: 100%
}

video:not(.hero-video) {
    max-width: 100%
}

table {
    max-width: 100%
}

.tbl-wrap,.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

p,li,dd,td,th,h1,h2,h3,h4,.hero-sub,.ab-desc,.ab-intro,.stats-desc,.sub-cta-tx p,.f-desc {
    word-break: keep-all;
    overflow-wrap: anywhere
}

@media (max-width: 768px) {
    .sub-cta-btn,.burger {
        min-height:44px
    }

    .hero-inner {
        margin-bottom: 84px
    }
}

@media (max-width: 380px) {
    .hero-inner {
        width:92%;
        margin-bottom: 64px
    }

    .f-cta-big,.f-ghost {
        letter-spacing: -3px
    }
}

@supports (height: 100dvh) {
    .hs-media {
        height:100dvh
    }

    .hs-stage .hero {
        margin-top: -100dvh
    }

    .hero {
        min-height: 100dvh
    }

    .strength-inner {
        height: 100dvh
    }

    .proj {
        min-height: 100dvh
    }

    .overlay {
        height: 100dvh;
        bottom: auto
    }
}

@media(max-width: 1000px) {
    header {
        z-index:260
    }

    .burger {
        z-index: 262
    }

    header {
        transform: none !important
    }
}

@media (max-width: 768px) {
    .strength h2,.strength .s-swap {
        font-size:clamp(28px,9vw,44px);
        letter-spacing: -1px;
        line-height: 1.2
    }

    .strength .s-swap .sw {
        white-space: normal;
        word-break: keep-all;
        max-width: 94vw
    }

    .strength .s-swap .sw0 {
        flex-wrap: wrap
    }

    .strength .s-tag {
        font-size: 13px;
        letter-spacing: 3px;
        margin-bottom: 20px
    }
}

@media (max-width: 1000px) {
    html,body {
        width:100%;
        max-width: 100%;
        overflow-x: clip
    }

    #hd,#wrapper,#ft {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important
    }

    main,header,footer,.hs-stage,.hs-media,.hero,.strength,.strength-inner,.svc,.proj {
        max-width: 100vw;
        overflow-x: clip;
        box-sizing: border-box
    }

    .wrap,.nav.wrap,footer .wrap,.strength .wrap,.svc.wrap {
        width: calc(100% - 32px);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box
    }

    html.menu-open,body.menu-open {
        overflow: hidden !important;
        width: 100%;
        max-width: 100%
    }

    body.menu-open {
        touch-action: none;
        overscroll-behavior: none
    }

    header {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
        box-sizing: border-box
    }

    .nav {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0
    }

    .nav-right {
        gap: 0;
        min-width: 44px;
        flex: 0 0 auto
    }

    .burger {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        margin-right: -9px
    }

    .overlay {
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        min-height: 100vh;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 96px clamp(24px,7vw,48px) 40px;
        transform: translate3d(0,-100%,0)
    }

    .overlay.on {
        transform: translate3d(0,0,0)
    }

    .overlay a {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        line-height: 1.05;
        overflow-wrap: anywhere;
        padding-left: 0;
        padding-right: 0
    }

    .overlay a:hover,.overlay a.active {
        padding-left: 0
    }

    .overlay .ov-meta {
        max-width: 100%;
        overflow-wrap: anywhere
    }
}

@supports not (overflow: clip) {
    @media (max-width:1000px) {
        html,body,main,header,footer,.hs-stage,.hs-media,.hero,.strength,.strength-inner,.svc,.proj {
            overflow-x:hidden
        }
    }
}

@supports (height: 100dvh) {
    @media (max-width:1000px) {
        .overlay {
            height:100dvh;
            min-height: 100dvh
        }
    }
}

@media (max-width: 768px) {
    .strength-inner {
        min-height:100dvh;
        height: 100dvh;
        box-sizing: border-box;
        padding: 88px 0 72px;
        justify-content: center
    }

    .strength .wrap {
        width: min(92%,520px);
        transform: translateY(clamp(18px,5dvh,44px))
    }

    .strength .s-swap {
        min-height: 2.55em;
        align-items: center
    }

    .strength .s-swap .sw {
        width: 100%;
        max-width: 100%
    }

    .strength .s-desc {
        font-size: clamp(15px,4vw,18px);
        line-height: 1.65;
        margin-top: 24px
    }

    .strength-scroll {
        bottom: 20px
    }
}

@media (max-width: 380px) {
    .overlay {
        padding-left:22px;
        padding-right: 22px
    }

    .overlay a {
        font-size: clamp(34px,12vw,46px)
    }

    .strength .wrap {
        width: 94%;
        transform: translateY(24px)
    }
}

a:focus-visible,button:focus-visible,.burger:focus-visible,.totop:focus-visible,.inq-float:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px
}

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important
    }

    .hero-ko .line .inner,.hero-sub,.reveal,.svc-kw a {
        opacity: 1 !important;
        transform: none !important
    }

    .hs-ring,.strength-scroll .ln::after {
        animation: none !important
    }
}

@media (max-width: 480px) {
    .hs-media {
        background:#000
    }

    .hs-media .hero-poster,.hs-media .hero-video {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 60%;
        transform: translate(-50%,-74%)
    }

    .hero-inner {
        margin-bottom: 100px
    }

    .hero-scroll {
        width: 78px;
        height: 78px;
        left: 50%;
        margin-left: -39px;
        right: auto;
        bottom: 14px
    }

    .hero-scroll .hs-arrow {
        font-size: 14px
    }

    .svc-kw a {
        font-size: clamp(16px,5vw,24px);
        letter-spacing: -1px
    }

    .pcard {
        padding: 24px
    }

    .pcard .pinfo .nm {
        font-size: 22px
    }

    .f-cta-big {
        font-size: clamp(30px,11vw,44px);
        letter-spacing: -2px;
        gap: 14px
    }

    .f-ghost {
        font-size: clamp(30px,11vw,44px);
        letter-spacing: -2px
    }

    .f-cta::before {
        background-size: clamp(180px,46vw,280px) auto;opacity: 0.6;
    }

    .contact-page h1 .grad {
        white-space: nowrap;
        word-break: keep-all
    }

    .pcard .pinfo .cat {
        line-height: 1.35
    }

    .pcard.is-hover .pinfo .cat {
        max-height: 3em
    }
}

@media(max-width: 1000px) {
    .seo-float {
        width:50px;
        padding: 0 0px;
        gap: 0
    }

    .inq-float:hover,.seo-float:hover {
        width: 50px;
        gap: 0px;
        padding: 0 0px
    }

    .seo-float i {
        display: none
    }

    .inq-float .inq-tx,.seo-float .inq-tx {
        display: none
    }

    .seo-float .seo-float-mo {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 11px;
        font-weight: 700;
        height: 50px;
        width: 50px
    }
}