html.jvds-work-modal-open,
html.jvds-work-modal-open body{
    padding-top:0!important;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:none!important;
    overscroll-behavior-y:none!important;
    background-color:#000;
}

body.jvds-work-modal-open > [inert][aria-hidden="true"]{
    display:none!important;
}

body.jvds-work-modal-open > .jvds-work-listing-page[inert][aria-hidden="true"]{
    width:100%;
    min-height:100vh;
    position:fixed;
    top:var(--jvds-work-listing-freeze-top,0px);
    left:0;
    right:0;
    z-index:0;
    display:block!important;
    pointer-events:none;
}

body.jvds-work-modal-open > .m-tips{
    z-index:99993;
}

.jvds-work-modal{
    width:100%;
    min-height:100vh;
    position:relative;
    z-index:99990;
    display:none;
    padding:60px 0;
    box-sizing:border-box;
    background:transparent;
}

.jvds-work-modal.is-open{
    display:block;
}

.jvds-work-modal-backdrop{
    position:absolute;
    inset:0;
    border:0;
    background:rgba(0,0,0,.8);
    cursor:zoom-out;
}

.jvds-work-modal-panel{
    width:min(1440px,calc(100% - 160px));
    min-height:max(1px,calc(100vh - 120px));
    margin:0 auto;
    position:relative;
    z-index:1;
    overflow:hidden;
    border-radius:0;
    background:#fff;
    box-shadow:0 30px 90px rgba(0,0,0,.34);
}

.jvds-work-modal-close{
    width:48px;
    height:48px;
    position:fixed;
    top:20px;
    right:20px;
    z-index:99992;
    border:0;
    border-radius:50%;
    background:#000;
    color:#fff;
    cursor:pointer;
    box-shadow:0 8px 28px rgba(0,0,0,.28);
    transition:background-color .25s ease,color .25s ease;
    -webkit-transition:background-color .25s ease,color .25s ease;
}

.jvds-work-modal-close::before,
.jvds-work-modal-close::after{
    content:"";
    width:18px;
    height:1.5px;
    position:absolute;
    left:50%;
    top:50%;
    border-radius:2px;
    background:currentColor;
}

.jvds-work-modal-close::before{
    transform:translate(-50%,-50%) rotate(45deg);
    -webkit-transform:translate(-50%,-50%) rotate(45deg);
}

.jvds-work-modal-close::after{
    transform:translate(-50%,-50%) rotate(-45deg);
    -webkit-transform:translate(-50%,-50%) rotate(-45deg);
}

.jvds-work-modal-close:hover{
    background:#e0f94c;
    color:#000;
}

.jvds-work-modal-close:focus-visible{
    background:#000;
    color:#fff;
    outline:2px solid #1473e6!important;
    outline-offset:2px!important;
}

.jvds-work-modal-close[data-jvds-auto-focus="true"]:focus-visible{
    outline:0!important;
}

.jvds-work-modal-close:hover:focus-visible{
    background:#e0f94c;
    color:#000;
}

.jvds-work-modal-stage{
    min-height:max(1px,calc(100vh - 120px));
    position:relative;
    background:#f2f2f2;
}

.jvds-work-modal-frame{
    width:100%;
    min-height:max(1px,calc(100vh - 120px));
    position:relative;
    z-index:2;
    display:block;
    overflow:hidden;
    border:0;
    background:#fff;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    -webkit-transition:opacity .25s ease;
}

.jvds-work-modal.is-frame-ready .jvds-work-modal-frame{
    opacity:1;
    pointer-events:auto;
}

.jvds-work-modal-status{
    position:absolute;
    inset:0;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 12px;
    padding:24px;
    color:#666;
    font-size:14px;
    line-height:1.5;
    letter-spacing:.02em;
}

.jvds-work-modal-spinner{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border:2px solid rgba(0,0,0,.12);
    border-top-color:#000;
    border-radius:50%;
    animation:jvds-work-modal-spin .8s linear infinite;
}

.jvds-work-modal-fallback{
    display:none;
    flex:0 0 auto;
    padding:10px 16px;
    border:1px solid #111;
    border-radius:999px;
    color:#111;
    font-size:13px;
    font-weight:600;
    line-height:1.2;
    text-decoration:none;
}

.jvds-work-modal-status[data-status-mode="slow"] .jvds-work-modal-fallback,
.jvds-work-modal-status[data-status-mode="error"] .jvds-work-modal-fallback{
    display:inline-flex;
}

.jvds-work-modal-status[data-status-mode="error"] .jvds-work-modal-spinner{
    display:none;
}

.jvds-work-modal.is-frame-ready .jvds-work-modal-status{
    display:none;
}

@keyframes jvds-work-modal-spin{
    to{transform:rotate(360deg)}
}

html.jvds-work-modal-document-root{
    min-width:0;
    overflow:hidden!important;
    touch-action:pinch-zoom!important;
}

body.jvds-work-modal-document{
    min-width:0;
    overflow:hidden!important;
    background:#fff;
    touch-action:pinch-zoom!important;
}

body.jvds-work-modal-document #app{
    overflow:visible;
}

body.jvds-work-modal-document .header,
body.jvds-work-modal-document .service-cta,
body.jvds-work-modal-document .footer,
body.jvds-work-modal-document .jvds-consent,
body.jvds-work-modal-document .jvds-page-transition{
    display:none!important;
}

body.jvds-work-modal-document .ban,
body.jvds-work-modal-document .main,
body.jvds-work-modal-document .row-work-more,
body.jvds-work-modal-document .wow{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    -webkit-transform:none!important;
}

body.jvds-work-modal-document .ban.in1{
    width:100%;
    height:auto!important;
    min-height:0!important;
    position:relative!important;
    inset:auto!important;
    margin:0;
    overflow:hidden;
    border-radius:0;
    background:#f2f2f2;
}

body.jvds-work-modal-document .ban.in1 img{
    width:100%;
    height:auto!important;
    min-height:0!important;
    position:relative;
    display:block;
    object-fit:contain;
    border-radius:0;
}

body.jvds-work-modal-document .ban-placeholder{
    display:none!important;
    height:0!important;
}

body.jvds-work-modal-document .m-work-detail{
    padding-top:64px;
    margin-bottom:96px;
}

body.jvds-work-modal-document .m-work-detail .detail{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
}

body.jvds-work-modal-document .m-work-detail .detail img{
    width:100%;
    max-width:none;
}

body.jvds-work-modal-document .row-work-more{
    padding-bottom:20px;
}

body.jvds-work-modal-document .ul-list7 li a.jvds-case-nav-btn[data-jvds-contact-gsap="1"],
body.jvds-work-modal-document .ul-list7 li a.jvds-case-nav-btn[data-jvds-contact-gsap="1"]:hover,
body.jvds-work-modal-document .ul-list7 li a.jvds-case-nav-btn[data-jvds-contact-gsap="1"]:focus-visible{
    background:#000;
    color:#fff!important;
    animation:none!important;
    -webkit-animation:none!important;
    transition:none;
    -webkit-transition:none;
}

body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"]::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    display:block;
    border-radius:inherit;
    background:#e0f94c;
    pointer-events:none;
    clip-path:circle(25px at 36px 50%);
    -webkit-clip-path:circle(25px at 36px 50%);
    will-change:clip-path;
    contain:paint;
    transition:clip-path .42s cubic-bezier(.22,1,.36,1);
    -webkit-transition:-webkit-clip-path .42s cubic-bezier(.22,1,.36,1);
}

body.jvds-work-modal-document .jvds-case-nav-btn-next[data-jvds-contact-gsap="1"]::before{
    clip-path:circle(25px at calc(100% - 36px) 50%);
    -webkit-clip-path:circle(25px at calc(100% - 36px) 50%);
}

body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"]:hover::before,
body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"]:focus-visible::before{
    clip-path:circle(150% at 36px 50%);
    -webkit-clip-path:circle(150% at 36px 50%);
}

body.jvds-work-modal-document .jvds-case-nav-btn-next[data-jvds-contact-gsap="1"]:hover::before,
body.jvds-work-modal-document .jvds-case-nav-btn-next[data-jvds-contact-gsap="1"]:focus-visible::before{
    clip-path:circle(150% at calc(100% - 36px) 50%);
    -webkit-clip-path:circle(150% at calc(100% - 36px) 50%);
}

body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"]::after,
body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"]:focus-visible::after{
    box-shadow:inset 0 0 0 2px #000;
    transition:none;
    -webkit-transition:none;
}

body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"]:hover::after{
    box-shadow:inset 0 0 0 2px #e0f94c;
}

body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"] .g-contact-btn-fill,
body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"] .g-contact-btn-icon{
    will-change:auto;
}

body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"] .g-contact-btn-text,
body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"] .g-contact-btn-icon{
    transition:color .2s ease,transform .32s cubic-bezier(.22,1,.36,1);
    -webkit-transition:color .2s ease,-webkit-transform .32s cubic-bezier(.22,1,.36,1);
}

body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"]:hover .g-contact-btn-text,
body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"]:hover .g-contact-btn-icon,
body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"]:focus-visible .g-contact-btn-text,
body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"]:focus-visible .g-contact-btn-icon{
    color:#000!important;
}

body.jvds-work-modal-document .jvds-case-nav-btn-prev[data-jvds-contact-gsap="1"]:hover .g-contact-btn-icon,
body.jvds-work-modal-document .jvds-case-nav-btn-prev[data-jvds-contact-gsap="1"]:focus-visible .g-contact-btn-icon{
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}

body.jvds-work-modal-document .jvds-case-nav-btn-next[data-jvds-contact-gsap="1"]:hover .g-contact-btn-icon,
body.jvds-work-modal-document .jvds-case-nav-btn-next[data-jvds-contact-gsap="1"]:focus-visible .g-contact-btn-icon{
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

@media screen and (max-width:800px){
    .jvds-work-modal{
        padding:0;
    }

    .jvds-work-modal-panel{
        width:100%;
        min-height:100vh;
        border-radius:0;
    }

    .jvds-work-modal-close{
        width:40px;
        height:40px;
        top:12px;
        right:12px;
    }

    .jvds-work-modal-stage,
    .jvds-work-modal-frame{
        min-height:100vh;
    }

    body.jvds-work-modal-document .m-work-detail{
        padding-top:42px;
        margin-bottom:64px;
    }

    body.jvds-work-modal-document .row-work-more{
        padding-bottom:20px;
    }

    body.jvds-work-modal-document .ban.in1,
    body.jvds-work-modal-document .ban.in1 img{
        border-radius:0;
    }

    body.jvds-work-modal-document .ul-list7 li a.jvds-case-nav-btn[data-jvds-contact-gsap="1"],
    body.jvds-work-modal-document .ul-list7 li a.jvds-case-nav-btn[data-jvds-contact-gsap="1"]:hover,
    body.jvds-work-modal-document .ul-list7 li a.jvds-case-nav-btn[data-jvds-contact-gsap="1"]:focus-visible{
        background:#e0f94c;
        color:#000!important;
    }

    body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"]::before{
        display:none;
    }

    body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"]::after,
    body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"]:hover::after,
    body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"]:focus-visible::after{
        box-shadow:inset 0 0 0 2px #e0f94c;
    }

    body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"] .g-contact-btn-text,
    body.jvds-work-modal-document .jvds-case-nav-btn[data-jvds-contact-gsap="1"] .g-contact-btn-icon{
        color:#000!important;
        transform:none!important;
        -webkit-transform:none!important;
    }
}

@media (prefers-reduced-motion:reduce){
    .jvds-work-modal,
    .jvds-work-modal-panel,
    .jvds-work-modal-frame,
    .jvds-work-modal-close{
        transition:none;
        -webkit-transition:none;
    }

    .jvds-work-modal-spinner{
        animation:none;
    }
}