.xgn-house {
    overflow: hidden;
}

.xgn-house h2 {
    margin-top: 0;
}

.xgn-house-model {
    position: relative;
    margin-top: 56px;
}

.xgn-house-model img.xgn-house-img {
    width: 100%;
}

.xgn-hotspot {
    position: absolute;
    border: none;
    background: none;
    transform: translate(-50%,-50%);
    width: 62px;
    height: 62px;
    cursor: pointer;
}

.xgn-hotspot img {
    width: 100%;
}

@media (max-width: 767px) {

    .xgn-hotspot img {

        width: 42px;
        height: 42px;
    }
}

@media (max-width: 577px) {

    .xgn-hotspot img {

        width: 34px;
        height: 34px;
    }
}

.xgn-hotspot._1 {
    top: 32%;
    left: 22%;
}

.xgn-hotspot._2 {
    top: 32.5%;
    left: 53%;
}

.xgn-hotspot._3 {
    top: 51.5%;
    left: 22.9%;
}

.xgn-hotspot._4 {
    top: 53.5%;
    left: 50.5%;
}

.xgn-hotspot._5 {
    top: 72.5%;
    left: 25.6%;
}

.xgn-hotspot._6 {
    top: 82.5%;
    left: 80%;
}

.xgn-house-video,
.xgn-house-video video {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.xgn-house-video {
    transition: opacity .2s ease-out;
}

.xgn-house-video.active,
.xgn-house-video video.active {
    opacity: 1;
    pointer-events: all;
}

.xgn-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 26px;
}

@media (max-width: 767px) {
    
    .xgn-logos {
        flex-direction: column;
        justify-content: space-between;
        min-height: 154px;
    }
}

.xgn-logo {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 20px;
}

.xgn-logo._1 {
    max-width: 147px;
}

.xgn-logo._2 {
    max-width: 165px;
}

.xgn-logo._3 {
    max-width: 129px;
}

.xgn-product-card {
    position: absolute;
    z-index: 2;
    width: 280px;
    padding: 32px 15px 19px;
    background-color: white;
    box-shadow: 0px 3px 6px #00000029;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease-out;
}

.xgn-product-card.active {
    opacity: 1;
    pointer-events: all;
}

.xgn-product-card img {
    display: block;
    width: 100%;
}

._1 .xgn-product-card {
    top: 52px;
    left: 31px;
}

._2 .xgn-product-card {
    top: 42px;
    left: 31px;
}

._3 .xgn-product-card {
    top: 78px;
    left: 487px;
}

._4 .xgn-product-card {
    top: 102px;
    left: 31px;
}

._5 .xgn-product-card {
    top: 102px;
    left: 31px;
}

._6 .xgn-product-card {
    top: 102px;
    left: 31px;
}

@media (max-width: 767px) {

    .xgn-product-card {

        top: 50% !important;
        left: 50% !important;
        right: unset;
        transform: translate(-50%, -50%);
        padding: 15px;
    }

    .xgn-product-card img {
        width: auto;
        max-height: 50px;
    }

    ._1 .xgn-product-card img {
        max-height: 80px;
    }

    .xgn-product-card a.btn {
        display: block;
        font-size: 12px;
        padding: 0;
    }

    .xgn-product-card a.btn::after {
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 7px solid #10218b;
    }

    .xgn-product-card a.btn::after {
        font-size: 12px;
    }
}

button.xgn-close {
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 11px;
    height: 11px;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3;
}

button.xgn-close::before,
button.xgn-close::after {
    content: '';
    display: block;
    width: 11px;
    height: 1px;
    background: black;
    position: absolute;
}

button.xgn-close::before {
    transform: rotate(45deg);
}

button.xgn-close::after {
    transform: rotate(135deg);
}