body {
    background-color: var(--systemWhite);
}


/* */
/* loading */

.loading-box {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: var(--systemBG);
    opacity: 1;
    visibility: visible;
    z-index: 99999;
    transition: opacity 0.3s, visibility 0.3s;
}

.loading-box .loading {
    font-size: var(--h4-fontSize);
    font-weight: 600;
    color: var(--systemPrimary);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.loading-box.hide {
    opacity: 0;
    visibility: hidden;
}

.loading-txt {
    font-size: var(--h6-fontSize);
    color: var(--systemSecondary);
    font-weight: 600;
    position: fixed;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

/* */
/* eo story main wrap */

.eo-story-from-the-first-main-wrp {
    margin: 0 auto;
}

.scroll-section {
    position: relative;
    padding-top: 50vh;
    /* padding: var(--systemSpacing-360) 0; */
}

#scroll-section-4, #scroll-section-5 {
    padding-top: 0;
    margin-top: var(--systemSpacing-12);
}

.banner-dsc-wrp  {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: var(--systemSpacing-4) 0;
    top: 38vh;
    opacity: 0;
}

.banner-dsc-wrp-1 {
    width: 45%;
	opacity: 0;
}


/* */
/* text animation */

.sticky-elem {
    display: none;
    position: fixed;
    left: 0;
    width: 100%;
}

#show-scene-0 #scroll-section-0 .sticky-elem,
#show-scene-1 #scroll-section-1 .sticky-elem,
#show-scene-2 #scroll-section-2 .sticky-elem {
    display: block;
    will-change: transform, opacity;
}

.scroll-effect-end .sticky-elem {
    display: none !important;
}

/* #scroll-section-2 .sticky-elem-c {
    top: 15%;
	left: 45%;
} */


/* */
/* canvas */

.sticky-elem-canvas {
    top: 0;
    height: 100%;
}

.sticky-elem-canvas canvas {
    position: absolute;
    top: 50%;
    left: 50%;
}


/* */
/* scroll section 1 */

.banner-txt-wrp {
    margin: 0 var(--systemSpacing-200);
}

.banner-txt-wrp .section-tl-md {
    margin-bottom: var(--systemSpacing-4);
}


/* */
/* card */

.eo-card-all-wrp, .eo-tech-card-all-wrp {
    display: flex;
    flex-direction: row;
    gap: var(--systemSpacing-28);

    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    white-space: nowrap;
    
    padding: var(--systemSpacing-40) var(--systemSpacing-200);
}

.eo-card-all-wrp::-webkit-scrollbar {
    display: none;
}

.card-content-wrp {
    position: relative;
}


/* */
/* card front and back */


.card-front-dsc-wrp, .card-back-dsc-wrp {
    position: absolute;
    top: var(--systemSpacing-32);
    left: var(--systemSpacing-32);
    width: calc(100% - var(--systemSpacing-64));
    white-space: normal;
}


/* */
/* card front */

.card-img-wrp {
    width: var(--systemSpacing-520);
    border-radius: var(--systemSpacing-32);
}

.card-img-wrp img {
    display: block;
    border-radius: var(--systemSpacing-32);
    cursor: pointer;
}

.card-md-wrp {
    transition: all 0.3s ease-in;
}

.card-md-wrp:hover {
    scale: 1.01;
}

.plus-icon-wrp, .close-icon-wrp {
    position: absolute;
    bottom: var(--systemSpacing-32);
    right: var(--systemSpacing-32);
    padding: 0;
}

.plus-icon-wrp:hover, .close-icon-wrp:hover {
    opacity: 80%;
}

.plus-icon-wrp svg, .close-icon-wrp svg {
    display: block;
}

.plus-svg, .close-svg {
    width: var(--systemSpacing-40);
    height: var(--systemSpacing-40);
}

/* */
/* card back */


.card-back-tl-subtl-wrp {
    width: inherit;
    display: flex;
    flex-direction: column;
    margin-bottom: var(--systemSpacing-40);
}

.fill-primary {
    fill: var(--systemPrimary);
}

.fill-white {
    fill: var(--systemWhite);
}


/* */
/* flip card*/

.flip-card {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;

    position: relative;
}

.flip-y {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.card-front-y {
    -o-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
}

.card-back-y {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);

    background-color: var(--systemBG);
    border-radius: var(--systemSpacing-32);
}

.card-sm-back-y {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);

    background-color: var(--systemPrimary);
    border-radius: var(--systemSpacing-32);
}

.flip-to-back, .flip-to-front {
    visibility: hidden;
    display: block;
    cursor: pointer;
}


/* */
/* scroll section 2 */


/* */
/* pin */

.pin {
    width: var(--systemSpacing-1);
    height: var(--systemSpacing-100);
    background-color: var(--systemBlack);
}

.pin-dsc {
    width: 50%;
}


/* */
/* scroll section 3 */

.scroll-section-3-all-wrp {
    background-color: var(--systemBG);
    padding: var(--systemSpacing-80) 0 var(--systemSpacing-120) 0;
}


/* */
/* banner part */

.scroll-section-3-intro-banner-all-wrp {
    margin: var(--systemSpacing-80) auto var(--systemSpacing-200) auto;
}

.scroll-section-3-intro-banner-all-wrp .banner-txt-wrp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto var(--systemSpacing-40) auto;
    text-align: center;
    width: fit-content;
}

.intro-banner-wrp {
    background-color: var(--systemWhite);
    padding: var(--systemSpacing-120) var(--systemSpacing-80);
    margin: 0 var(--systemSpacing-200);
    border-radius: var(--systemSpacing-32);
}

.banner-in-txt-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-28);
}

.banner-in-txt-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-40);
}

.banner-in-txt-all-wrp .icon-wrp {
    width: fit-content;
}

.banner-in-txt-all-wrp .icon-wrp svg {
    width: var(--systemSpacing-48);
    display: block;
}


/* */
/* tab navigation */

.job-tags {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--systemSpacing-32);
}

.kind-of-job {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--systemSpacing-2);
}

.kind-of-job .svg-wrp svg {
    display: block;
}


/* */
/* marquee tab navigation */

.marquee-ctnr {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.marquee-list {
    display: flex;
    flex-direction: row;
}

.marquee-list-wrp {
    display: flex;
}

.marquee-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: var(--systemSpacing-24);
    margin: var(--systemSpacing-8);

    width: var(--systemSpacing-320);
    min-width: var(--systemSpacing-320);
    min-height: var(--systemSpacing-200);

    background-color: var(--systemWhite);
    border-radius: var(--systemSpacing-24);
}


/* */
/* tech card */

.scroll-section-3-tech-card-all-wrp {
    margin: var(--systemSpacing-80) 0;
}


/* */
/* card small front */

.card-sm-wrp {
    width: var(--systemSpacing-440);
    height: var(--systemSpacing-320);

    border-radius: var(--systemSpacing-32);
    overflow: hidden;

    background-color: var(--systemWhite);
    transition: all 0.3s ease-in;
}

.card-sm-wrp:hover {
    scale: 1.02;
}

.card-sm-content-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-40);

    position: absolute;
    top: var(--systemSpacing-24);
    left: var(--systemSpacing-24);
}

.card-front-icon-wrp svg {
    display: block;
}

.card-sm-front-dsc-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-12);
    width: calc(100% - var(--systemSpacing-24));
    white-space: normal;
}

.card-sm-back-dsc-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-12);
    width: calc(100% - var(--systemSpacing-48));
    white-space: normal;

    position: absolute;
    top: 30%;
    left: var(--systemSpacing-24);
}

.card-sm-back-icon-wrp {
    position: absolute;
    top: var(--systemSpacing-20);
    left: var(--systemSpacing-20);
}

.card-sm-back-icon-wrp svg {
    display: block;
}

.plus-sm-icon-wrp, .close-sm-icon-wrp {
    position: absolute;
    bottom: var(--systemSpacing-20);
    right: var(--systemSpacing-20);
    padding: 0;
}

.plus-sm-icon-wrp:hover, .close-sm-icon-wrp:hover {
    opacity: 80%;
}

.plus-sm-icon-wrp svg, .close-sm-icon-wrp svg {
    display: block;
}

.plus-svg-sm, .close-svg-sm {
    width: var(--systemSpacing-40);
    height: var(--systemSpacing-40);
}


/* */
/* highlight text part */

.tech-bento-ctnr {
    background-color: var(--systemBG);
    margin: var(--systemSpacing-80) 0;
}

.tech-highlight-dsc-wrp {
    max-width: var(--systemSpacing-1200);
    margin: 0 auto;
    padding: var(--systemSpacing-160) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* */
/* tech key function */

.key-function-nav {
    display: flex;
}

.key-function-nav nav {
    margin: 0 auto;
}

.key-function-nav nav ul {
    display: flex;
    flex-direction: row;
    gap: var(--systemSpacing-20);
}

.key-function-nav nav ul li {
    padding: var(--systemSpacing-12) var(--systemSpacing-20);
}

.key-function-highlight-dsc-wrp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--systemSpacing-16);
    margin: var(--systemSpacing-40) auto;
    max-width: var(--systemSpacing-800);
}

.key-function-highlight-dsc-md {
    text-align: center;
}

.key-function-bento-wrp {
    max-width: var(--systemSpacing-1200);
    margin: 0 auto;
    padding-bottom: var(--systemSpacing-120);
}

#keyFunction2ndBento,
#keyFunction3rdBento {
    display: none;
}

#keyFunction1stBento {
    display: grid;
}

.bento-wrp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

.bento-lg-wrp {
    height: var(--systemSpacing-740);
    overflow: hidden;
    gap: var(--systemSpacing-40);
}

.bento-sm-wrp {
    height: var(--systemSpacing-360);
    overflow: hidden;
    gap: var(--systemSpacing-40);
}

.bento-img-wrp {
    width: 80%;
}

.bento-img-wrp img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.bento-txt-wrp {
    width: 80%;
    text-align: center;
}

.bento-left-lg {
    grid-column: 1 / 2;
    grid-row: 1 / 3;

    background-color: var(--systemWhite);
    border-radius: var(--systemSpacing-32);
}

.bento-right-sm-top {
    grid-column: 2 / 3;
    grid-row: 1 / 2;

    background-color: var(--systemWhite);
    border-radius: var(--systemSpacing-32);
    position: relative;
}

.bento-right-sm-bottom {
    grid-column: 2 / 3;
    grid-row: 2 / 3;

    background-color: var(--systemWhite);
    border-radius: var(--systemSpacing-32);
}

.mobile-device {
    display: none;
}

.scramble-replay {
    position: absolute;
    right: var(--systemSpacing-24);
    bottom: var(--systemSpacing-24);

    padding: 0;
    border-radius: var(--systemSpacing-1200);
    background-color: var(--systemBG);
}

.scramble-replay:hover {
    background-color: var(--systemQuinary);
}

.scramble-replay svg {
    display: block;
}

.morphing-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 100%;
    align-items: center;
}

.banner-in-tl-md .img-all-wrp .img-wrp {
    width: fit-content;
    display: inline-block;
}

.banner-in-tl-md .img-all-wrp .img-wrp img {
    display: block;
}


/* */
/* scroll section 4 */

.scroll-section-4-all-wrp {
    position: relative;
}

.video-bg video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

.video-banner-txt-wrp {
    display: flex;
    flex-direction: column;
    position: absolute;
    gap: var(--systemSpacing-12);
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.video-banner-txt-wrp .section-tl-md {
    text-align: center;
}

.video-banner-txt-wrp .section-dsc-md {
    text-align: center;
}

.video-link-wrp {
    display: flex;
    flex-direction: row;
    width: fit-content;
    align-items: center;
}

.video-link-wrp:hover .section-dsc-md {
    text-decoration: underline;
    text-decoration-thickness: var(--systemSpacing-2);
}

.video-link-wrp .icon-wrp svg {
    display: block;
}

.pause-btn, .play-btn {
    position: absolute;
    right: var(--systemSpacing-32);
    bottom: var(--systemSpacing-32);
    background-color: var(--systemWhite);
    padding: 0;
    border-radius: var(--systemSpacing-1200);
}

.pause-btn svg, .play-btn svg {
    display: block;
}

.pause-btn:hover, .play-btn:hover {
    background-color: var(--systemWhite-secondary);
}

.play-btn {
    display: none;
}


/**/
/**/

.scroll-section-5-all-wrp {
    margin-bottom: var(--systemSpacing-16);
}

.outro-banner-ctnr {
    position: relative;
    overflow: hidden;
    background-color: var(--systemBG);
}

.outro-banner-all-wrp {
    padding: var(--systemSpacing-120) var(--systemSpacing-12) var(--systemSpacing-360) var(--systemSpacing-12);
}

.outro-banner-all-wrp .outro-img-wrp {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);

    mix-blend-mode: multiply;
}

.outro-banner-all-wrp .outro-img-wrp img {
    max-width: 100%;
}


.outro-banner-txt-btn-wrp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--systemSpacing-40);
}

.outro-banner-txt-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-4);
}


/**/
/**/

@media screen and (max-width: 1294px) {

    /**/
    /**/

    .banner-txt-wrp {
        margin: 0 var(--systemSpacing-120);
    }
    
    .eo-card-all-wrp {
        padding: var(--systemSpacing-40) var(--systemSpacing-120);
    }

    /* */
    /* card front */

    .card-img-wrp {
        width: var(--systemSpacing-480);
    }


    /**/
    /* scroll button */

    .chevron-btn-wrp {
        margin-right: var(--systemSpacing-32);
        max-width: 100%;
    }

    .left-chevron-btn svg {
        width: var(--systemSpacing-48);
        height: var(--systemSpacing-48);
    }

    .right-chevron-btn svg {
        width: var(--systemSpacing-48);
        height: var(--systemSpacing-48);
    }


    /* */
    /* key function */

    .tech-highlight-dsc-wrp {
        max-width: var(--systemSpacing-800);
        padding: var(--systemSpacing-120) 0;
    }

    .key-function-bento-wrp {
        max-width: var(--systemSpacing-800);
    }

    .key-function-highlight-dsc-wrp {
        max-width: var(--systemSpacing-600);
    }


    /**/
    /**/

    .intro-banner-wrp {
        padding: var(--systemSpacing-80);
        margin: var(--systemSpacing-120);
    }

    /* .banner-in-tl-md .img-all-wrp .img-wrp img {
        width: var(--systemSpacing-48);
    } */
}


@media screen and (max-width: 960px) {
    
    /**/
    /**/

    .banner-txt-wrp {
        margin: 0 var(--systemSpacing-48);
    }
    
    .eo-card-all-wrp {
        padding: var(--systemSpacing-40) var(--systemSpacing-48);
    }


    /* */
    /* card front */

    .card-front-dsc-wrp {
        position: absolute;
        top: var(--systemSpacing-24);
        left: var(--systemSpacing-24);
    }

    .card-img-wrp {
        width: var(--systemSpacing-400);
    }

    .plus-icon-wrp {
        bottom: var(--systemSpacing-24);
        right: var(--systemSpacing-24);
    }


    /* */
    /* bento */

    #keyFunction2ndBento, #keyFunction3rdBento {
        display: grid;
    }

    .key-function-nav {
        display: none;
    }

    .tech-highlight-dsc-wrp {
        max-width: var(--systemSpacing-600);
    }

    .key-function-bento-wrp {
        max-width: var(--systemSpacing-600);
    }

    .bento-left-lg {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    
    .bento-right-sm-top {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
    
    .bento-right-sm-bottom {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }

    .mobile-device {
        display: flex;
    }


    /* */
    /* marquee tab navibation */

    .job-tags {
        gap: var(--systemSpacing-20);
    }

    .job-tags .kind-of-job .svg-wrp svg {
        width: var(--systemSpacing-60);
        height: var(--systemSpacing-60);
    }

    .marquee-card {
        width: var(--systemSpacing-280);
        min-width: var(--systemSpacing-280);
        min-height: var(--systemSpacing-160);
    }    


    /* */
    /* banner */

    .banner-in-tl-md .img-all-wrp .img-wrp img {
        width: var(--systemSpacing-40);
    }

    .intro-banner-wrp {
        margin: 0 var(--systemSpacing-48);
        padding: var(--systemSpacing-80);
    }


    /* */
    /* video text */

    .video-banner-txt-wrp {
        gap: var(--systemSpacing-4);
    }

    .video-banner-txt-wrp .icon-wrp svg {
        width: var(--systemSpacing-32);
        height: var(--systemSpacing-32);
    }


    /**/
    /**/

    .scroll-section-3-intro-banner-all-wrp {
        margin: var(--systemSpacing-80) auto var(--systemSpacing-120) auto;
    }


    /* */
    /* outro banner */

    .outro-banner-all-wrp {
        padding: var(--systemSpacing-80) var(--systemSpacing-32) var(--systemSpacing-240) var(--systemSpacing-32);
    }
}


@media screen and (max-width: 600px) {

    .banner-txt-wrp {
        margin: 0 var(--systemSpacing-32);
    }
    
    .eo-card-all-wrp {
        gap: var(--systemSpacing-20);
        padding: var(--systemSpacing-28) var(--systemSpacing-32);
    }

    .banner-txt-wrp .section-tl-md {
        margin-bottom: var(--systemSpacing-4);
    }


    /* */
    /* marquee tab navigation */

    .job-tags {
        justify-content: flex-start;

        padding: 0 var(--systemSpacing-32);

        overflow-x: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        scroll-behavior: smooth;
        white-space: nowrap;
    }

    .job-tags::-webkit-scrollbar {
        display: none;
    }

    .job-tags .kind-of-job .svg-wrp svg {
        width: var(--systemSpacing-60);
        height: var(--systemSpacing-60);
    }

    .marquee-card {
        width: var(--systemSpacing-240);
        min-width: var(--systemSpacing-240);
        min-height: var(--systemSpacing-140);
    }    


    /* */
    /* card front */

    .card-img-wrp {
        width: var(--systemSpacing-320);
    }

    .card-front-dsc-wrp {
        top: var(--systemSpacing-20);
        left: var(--systemSpacing-20);
    }

    .card-back-dsc-wrp {
        top: var(--systemSpacing-20);
        left: var(--systemSpacing-20);
    }

    .plus-icon-wrp, .close-icon-wrp {
        bottom: var(--systemSpacing-24);
        right: var(--systemSpacing-24);
    }

    .plus-svg, .close-svg {
        width: var(--systemSpacing-36);
        height: var(--systemSpacing-36);
    }

    .plus-svg-sm, .close-svg-sm {
        width: var(--systemSpacing-36);
        height: var(--systemSpacing-36);
    }


    /* */
    /* card small front */

    .card-sm-wrp {
        width: var(--systemSpacing-360);
        height: var(--systemSpacing-300);
    }

    .card-sm-content-all-wrp {
        gap: var(--systemSpacing-20);
    }


    /**/
    /* scroll button */

    .left-chevron-btn svg {
        width: var(--systemSpacing-40);
        height: var(--systemSpacing-40);
    }

    .right-chevron-btn svg {
        width: var(--systemSpacing-40);
        height: var(--systemSpacing-40);
    }


    /* */
    /* key function */

    .tech-highlight-dsc-wrp {
        padding: var(--systemSpacing-120) 0;
        margin: var(--systemSpacing-32);
    }

    .key-function-highlight-dsc-wrp {
        gap: var(--systemSpacing-12);
        margin: var(--systemSpacing-32);
    }

    .key-function-bento-wrp {
        max-width: 100%;
        margin: 0 var(--systemSpacing-32);
    }

    .scramble-replay svg {
        width: var(--systemSpacing-40);
        height: var(--systemSpacing-40);
    }


    /* */
    /* banner */

    .banner-in-tl-md .img-all-wrp .img-wrp img {
        width: var(--systemSpacing-36);
    }


    /* */
    /* video text */

    .video-banner-txt-wrp {
        gap: var(--systemSpacing-2);
    }

    .video-banner-txt-wrp .icon-wrp svg {
        width: var(--systemSpacing-28);
        height: var(--systemSpacing-28);
    }

    .pause-btn svg, .play-btn svg {
        width: var(--systemSpacing-40);
        height: var(--systemSpacing-40);
    }


    /**/
    /**/

    .intro-banner-wrp {
        padding: var(--systemSpacing-40);
        margin: 0 var(--systemSpacing-32);
    }


    /* */
    /* outro banner */

    .outro-banner-all-wrp {
        padding: var(--systemSpacing-80) var(--systemSpacing-32) var(--systemSpacing-160) var(--systemSpacing-32);
    }
}


@media screen and (max-width: 430px) {

    .eo-card-all-wrp, .eo-tech-card-all-wrp {
        gap: var(--systemSpacing-16);
    }

    .bento-lg-wrp {
        height: var(--systemSpacing-560);
    }

    .card-sm-wrp {
        width: var(--systemSpacing-320);
        height: var(--systemSpacing-320);
    }
}