.home-nhuank {
    background: url(../../../Design/img/homeSKPlus.png) no-repeat;
    background-size: 100% 100%;
}

.home-nhuank-container {
    padding: 26px 0;
}

.home-nhuank-top {
}

.n-top {
    display: flex;
    justify-content: space-between;
    align-items: anchor-center;
}

.n-top-left {
    display: flex;
    flex-direction: column;
}

.left-s-top {
    color: #FFF;
    font-family: 'QsandM';
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.left-s-bottom {
    color: #FFF;
    font-family: 'anyB';
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.n-top-right {
    color: #FFF;
    font-family: 'QsandSm';
    font-size: 17.002px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 74%;
    text-align: justify;
}

.n-top-detail {
}

.home-nhuank-bottom {
}

.home-nhuanks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 8px;
    padding: 28px 0px;
}

.jxznc {
    display: inline-block;
    transition: transform 0.3s ease;
}

    .jxznc .kcxjvk {
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .jxznc img.fill.vcxo {
        width: 381px;
        height: 248px;
        transition: transform 0.4s ease, filter 0.4s ease;
    }

    .jxznc .kcxjv {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        /* background: rgba(255,255,255,0.9); */
        transition: background 0.3s ease, color 0.3s ease;
    }

    .jxznc .jkcvxv {
        transition: color 0.3s ease;
    }

    /* Hover effect */
    .jxznc:hover .kcxjvk img.fill.vcxo {
        transform: scale(1.05);
        filter: brightness(1.1);
    }

    .jxznc:hover .kcxjv {
    }

    .jxznc:hover .jkcvxv {
        color: #fff;
    }

    .jxznc:hover svg {
        transform: rotate(15deg) scale(1.1);
        transition: transform 0.4s ease, stroke 0.3s ease;
        stroke: #fff;
    }

.home-nhuanks .jxznc:first-child {
    grid-row: span 2 / span 2;
}

.home-nhuanks .jxznc:nth-child(4) {
    /* grid-column-start: 2; */
    /* grid-row-start: 2; */
}

.home-nhuanks .jxznc:nth-child(5) {
    grid-column-start: 3;
    grid-row-start: 2;
}

.home-nhuanks .jxznc:first-child .jkcvxv {
    color: #000221;
    font-family: 'QsandSm';
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    width: 56%;
}

.home-nhuanks .jxznc:first-child svg {
    width: 61px;
    height: 62px;
    flex-shrink: 0;
}

.home-nhuanks .jxznc:first-child .vcxo {
    width: 429px;
    height: 508px;
    flex-shrink: 0;
}

.jxznc {
}

.kcxjvk {
    position: relative;
    display: inline-block;
    overflow: hidden;
    position: relative;
}

    .kcxjvk img.fill.vcxo {
        display: block;
        /* transition: transform 0.8s ease; */
    }

    .kcxjvk:hover img.fill.vcxo {
        /* transform: scale(1.05); */
    }

.kcxjv {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    color: #fff;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kcxjvk:before {
    content: "";
    width: 100%;
    height: 0%;
    position: absolute;
    background: #ff000000;
    bottom: 0px;
    box-shadow: 0 -47px 86px 76px rgb(255 255 255);
}

.vcxo {
    width: 381px;
    height: 248px;
    flex-shrink: 0;
}

.kcxjv {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
}

.jkcvxv {
    color: #000221;
    font-family: 'QsandSm';
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    width: 100%;
}

.kcxjv svg {
    width: 42px;
    height: 43px;
}

.kcxjvk:hover svg path {
    stroke: var(--default-color-2);
}

.kcxjvk:hover .jkcvxv {
    color: var(--default-color-2) !important;
}

.kcxjvk:hover .jxznc:first-child .jkcvxv {
}

.home-nhuanks .jxznc:first-child .kcxjv {
    bottom: 25px;
}

@media (max-width:739px) {
    .n-top {
        flex-direction: column;
    }

    .n-top-right, .n-top-left {
        width: 100%;
    }

    .n-top-left {
        text-align: center;
        ;
    }

    .left-s-top {
        font-size: 16px;
    }

    .left-s-bottom {
        font-size: 30px;
        padding-bottom: 8px;
    }

    .n-top-detail {
        font-size: 12px;
        text-align: center;
        display: flex;
    }

    .home-nhuanks {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(2, 1fr);
    }

        .home-nhuanks .jxznc:nth-child(1) {
            grid-column: span 2 / span 2;
            /* grid-column: unset; */
            grid-row: unset;
        }

        .home-nhuanks .jxznc:nth-child(2) {
            grid-row-start: 3;
            grid-row-start: unset;
        }

        .home-nhuanks .jxznc:nth-child(3) {
            grid-row: span 2 / span 2;
            grid-column-start: 3;
            grid-row-start: 1;
            grid-row: unset;
            grid-column-start: unset;
            grid-row-start: unset;
        }

        .home-nhuanks .jxznc:nth-child(4) {
            grid-row-start: 3;
            grid-row-start: unset;
        }

        .home-nhuanks .jxznc:nth-child(5) {
            grid-row-start: 2;
            grid-row-start: unset;
            grid-column-start: unset;
        }

        .home-nhuanks .jxznc:first-child .vcxo {
            width: 100%;
            height: 100%;
        }

        .home-nhuanks .jxznc .vcxo {
            width: 100% !important;
            height: 100% !important;
        }

        .home-nhuanks .jxznc:nth-child(1) .kcxjvk:before {
            content: "";
            width: 100%;
            height: 0%;
            position: absolute;
            background: #ff000000;
            bottom: 0px;
            box-shadow: 0 -47px 86px 76px rgb(255 255 255);
        }

    .kcxjvk:before {
        content: "";
        width: 100%;
        height: 0%;
        position: absolute;
        background: #ff000000;
        bottom: 0px;
        box-shadow: 0 31px 86px 76px rgb(255 255 255);
    }

    .jkcvxv {
        font-size: 15px;
    }

    .kcxjv {
        width: 100%;
        left: -1px;
        gap: 5px;
        padding: 0 10px !important;
    }

        .kcxjv svg {
            width: 24px;
            height: 32px;
        }

    .home-nhuanks .jxznc:first-child .jkcvxv {
        font-size: 19px;
    }

    .home-nhuanks .jxznc:first-child .kcxjv {
        bottom: 10px;
        padding: 0;
        left: -1px;
    }

    .home-nhuanks .jxznc:first-child svg {
        width: 39px;
        height: 62px;
        flex-shrink: 0;
    }
}