.home_banner_wrap {
    position: relative;z-index: 1;background-color: #777;background-image: url(/st/i/banner.jpg?1);
    background-repeat: no-repeat;background-position: 50%;background-size: cover;overflow: hidden;
}
.home_banner_dot_bg {
    position: absolute;z-index: 2;left: 0;top: 0;width: 100%;height: 100%;
    background-image: url(/st/i/1a.png);background-size: 2px;background-color: rgba(0,0,0,0.15);
}
.home_banner_body {position: relative;z-index: 3}


.home_banner_body h1 {color: #fff}
.home_banner_body h1 span.name {white-space: nowrap}
.home_banner_body h1 span.subtit {display: block;color: #b3b1b1}
@media (width >= 1200px) {
    .home_banner_wrap {min-height: 400px}
    .home_banner_body h1 {font-size: 30px;line-height: 38px;max-width: 70%;padding: 30px 0}
    .home_banner_body h1 span.subtit {font-size: 25px;line-height: 27px;margin-top: 10px;width: 600px}
}
@media (width < 1200px) {
    .home_banner_wrap {border-radius: 0 0 12px 12px}
}
@media (1200px > width >= 800px) {
    .home_banner_wrap {min-height: calc(100vw / 20 * 7)}
    .home_banner_body h1 {font-size: 30px;line-height: 38px;max-width: 70%;padding: 30px}
    .home_banner_body h1 span.subtit {font-size: 25px;line-height: 27px;margin-top: 10px;width: 600px}
}
@media (800px > width >= 500px) {
    .home_banner_wrap {min-height: calc(100vw / 14 * 7)}
    .home_banner_body h1 {font-size: 26px;line-height: 32px;padding: 25px}
    .home_banner_body h1 span.subtit {font-size: 22px;line-height: 25px;margin-top: 10px;max-width: 90%}
}
@media (width < 500px) {
    .home_banner_wrap {
        min-height: calc(100vw / 16 * 10);
        display: flex;
        align-items: center;
    }
    .home_banner_body h1 {font-size: 26px;line-height: 32px;padding: 25px 15px 25px 15px;text-align: center}
    .home_banner_body h1 span.subtit {font-size: 18px;line-height: 22px;margin-top: 10px}
}



.homeText {margin: 30px 0}
.homeText p {margin: 12px 0}
@media (width < 1200px) {
    .homeText {margin: 30px 20px}
}
@media (width < 700px) {
    .homeText {margin: 20px 12px}
}


/* Модуль каталогов */

.catalogHomeModuleTopWrap h2 {margin-bottom: 12px}
.catalogHomeModuleTopWrap h2 a {color: #111;font-weight: 500}
.catalogHomeModuleTop-L, .catalogHomeModuleTop-R-Row {border-radius: 12px}

.catalogHomeModuleTop-L {background: #ddd;padding: 25px}
.catalogHomeModuleTop-L a {color: #111}
.catalogHomeModuleTop-L h3 {font-size: 24px; font-weight: 500;}
.catalogHomeModuleTop-L ul {padding-left: 16px;margin: 8px 0}
.catalogHomeModuleTop-L ul li {padding: 2px 0; font-size: 18px;}

.catalogHomeModuleTop-R {width: 100%;margin-left: 20px}
.catalogHomeModuleTop-R-Row {background: #ddd}
.catalogHomeModuleTop-R-Row {position: relative}
.catalogHomeModuleTop-R-Row a {position: absolute;left: 0;top: 0;width: 100%;height: 100%;padding: 25px;font-size: 20px;font-weight: 500;color: #111}

.catalogHomeModuleBottom {display: flex;gap: 20px}
.catalogHomeModuleBottomRow {background-color: #ddd}

@media (width < 1200px) {
    .catalogHomeModuleTopWrap h2 {margin-left: 20px}    
}
@media (width < 700px) {
    .catalogHomeModuleTopWrap h2 {margin-left: 12px} 
    .catalogHomeModuleTop {
        padding: 0 12px;
    }   
}

@media (width >= 1600px) {
    .catalogHomeModuleTop {display: flex}
    .catalogHomeModuleTop-L {width: 700px;min-width: 700px;height: 500px}    
    .catalogHomeModuleTop-R-Row {height: 240px;margin-bottom: 20px}
    .catalogHomeModuleBottomRow {width: 33%;height: 200px}
}
@media (1600px > width >= 1200px) {
    .catalogHomeModuleTop {display: flex}
    .catalogHomeModuleTop-L {width: 700px;min-width: 700px;height: 500px}     
    .catalogHomeModuleTop-R-Row {height: 240px;margin-bottom: 20px}
    .catalogHomeModuleBottomRow {width: 33%;height: 200px}
}
@media (1200px > width >= 700px) {
    .catalogHomeModuleTop-L {width: 60vw;min-width: 60vw;height: calc(60vw / 4 * 3)}    
}
@media (700px > width >= 420px) {

}
@media (1200px > width >= 700px) {
    .catalogHomeModuleTop {display: flex; margin-bottom: 20px; margin-left: 20px; margin-right: 20px;}
    .catalogHomeModuleTop-R-Row {height: calc(50% - 10px);margin-bottom: 20px}
    .catalogHomeModuleBottom {
        margin-left: 20px; margin-right: 20px;
    }
    .catalogHomeModuleBottomRow {
        width: 33vw;
        aspect-ratio: 4/3;
    }
}
@media (700px > width) {
    .catalogHomeModuleTop {display: block}
    .catalogHomeModuleTop-R {
        display: flex;
        gap: 12px;
        margin-left: 0;
        margin-top: 12px;
        margin-bottom: 12px;
    }
/*     .catalogHomeModuleTop-L {
        height: calc(100vw / 16 * 9);
    } */
    .catalogHomeModuleTop-R-Row {
        width: 50%;
        aspect-ratio: 16/9;
    }
    .catalogHomeModuleBottom {
        display: none;
    }
    .catalogHomeModuleTop-L, .catalogHomeModuleTop-R-Row a {padding: 15px}
    .catalogHomeModuleTop-R-Row a {font-size: 15px;}
}
@media (width < 420px) {

}

/* Модуль каталогов END */

/* Модуль УТП */

.homeTileModuleWrap {background-color: #ddd;padding: 40px 0;margin: 30px 0}
.homeTileModule {display: flex;justify-content: space-between;text-align: center;gap: 20px}
.homeTileModule .el span {width: 60px;height: 60px;background: #000;border-radius: 50%;margin: 0 auto}
.homeTileModule .el h4 {margin: 7px 0; font-weight: 500}
.homeTileModule .el > div {font-size: 14px;}
.homeTileModule .el span svg {
    fill: #fff;
    width: 40px;
    height: 40px;
}
@media (width >= 800px) {}
@media (width < 800px) {
    .homeTileModule {flex-wrap: wrap}
    .homeTileModule .el {width: calc(50% - 10px)}    
}
@media (width < 480px) {
    .homeTileModule {gap: 25px}
    .homeTileModule .el span {width: 70px;height: 70px}
    .homeTileModule .el {width: 100%}   
    .homeTileModule .el > div {max-width: 320px; margin: 0 auto}
}

@media (width < 1200px) {
    .homeTileModule {margin-left: 20px;margin-right: 20px}
}
@media (width < 700px) {
    .homeTileModule {margin-left: 12px;margin-right: 12px}

}

/* Модуль УТП END */

/* Модуль БРЕНДЫ */

.homeBrandsModuleWrap {margin: 30px 0}
.homeBrandsModuleWrap h2 {margin-bottom: 12px}
.homeBrandsModuleWrap h2 a {color: #111;font-weight: 500}
.brandsModuleRow {display: flex;gap: 10px}
.brandsModuleRow > div {
    position: relative;background: #ddd;aspect-ratio: 4/3;display: flex;align-items: center;justify-content: center;
    font-weight: 500;border-radius: 12px;
}

@media (width >= 900px) {
    .brandsModuleRow > div {width: calc(100% / 6)}
}
@media (width < 900px) {
    html[data-device-type="desctop"] .brandsModuleRow {flex-wrap: wrap}
    html[data-device-type="mobile"] .brandsModuleRow {max-width: 100%; overflow-x: auto;}
    html[data-device-type="mobile"] .brandsModuleRow > div {width: calc(100% / 3); min-width: calc(100% / 3)}
}
@media (900px > width >= 500px) {
    html[data-device-type="desctop"] .brandsModuleRow > div {width: calc(100% / 3 - 7px)}
}
@media (width < 500px) {
    html[data-device-type="desctop"] .brandsModuleRow > div {width: calc(100% / 2 - 5px)}
}

@media (width < 1200px) {
    .homeBrandsModuleWrap h2 {margin-left: 20px} 
    .brandsModuleRow {padding: 0 20px}   
}
@media (width < 700px) {
    .homeBrandsModuleWrap h2 {margin-left: 12px} 
    .brandsModuleRow {padding: 0 12px}  
}

/* Модуль БРЕНДЫ END */