:root {
	--franDev_flex_height: 25vw;
	--franDev_flex_pd-v: 40px;
	--franDev_flex_pd-l: 10%;
	--franDev_bot_line_width: 33%;
	--franDev_top_font_size: 2.5vh;
	--franDev_bot_font_size: 14px;
}

#franDev_top .flex_wrap {
	height: var(--franDev_flex_height);
}

#franDev_top .flex_wrap .flex {
	padding-right: var(--franDev_flex_pd-l);
    padding-left: 0px;
    align-items: baseline;
}

#franDev_top .fr__upper__block {
    font-size: var(--fran-h3-size);
    /*font-weight: 400;*/
    margin-left: auto;
}

#franDev_top .fr__upper__block .small-font {
    font-size: initial;
    margin-top: calc( .7 * var(--fran-margin-2)) !important;
}

#franDev_top  .fr__lower__block { font-size: var(--franDev_bot_font_size); margin-left: auto; }

#franDev_top.fran_block h1 {
    font-size: calc(.7 * var(--fran-h1-size));
    border-bottom: none;
    position: relative;
}

#franDev_top.fran_block h1:after {
    content: "";
    width: 40%;
    height: 1px;
    background-color: var(--red-active-color);
    position: absolute;
    bottom: 0px;
    left: 0px;
}

#franDev_top .flex_wrap .flex:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0px;
    height: 1px;
    width: var(--franDev_bot_line_width);
    background-color: var(--red-active-color);
    display: none;
}

#franDev_top .self-end {

}

#franDev_top  .fr__lower__block.h3 { 
	font-size: var(--fran-h3-size); 
	text-align: right;
	margin-left: auto; 
}

#franDev_top .swiper-pagination-bullet {
    background-color: #fff;
    width: var(--franDev_blt_width);
    border-radius: 0px;
    height: 2px;
    margin: 0 4px !important;
}

@media (max-width: 900px) and (min-width: 551px) {
    :root {
        --franDev_flex_height: auto;
        --franDev_flex_pd-l: 0px;
        --franDev_upr_font: 22px;
        --franDev_flex_pd-v: 15px;
    }

    #franDev_top .flex_wrap .swiper-container {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    #franDev_top .fr__upper__block, 
    #franDev_top .fr__lower__block {
        text-align: left;
    }

    #franDev_top .fr__upper__block br { display: none; }

    #franDev_top .fr__upper__block { font-size: var(--franDev_upr_font); }

    #franDev_top .flex_wrap .flex:after { display: none; }

    #franDev_top .flex_wrap .flex { padding-bottom: 0px; }

    #franDev_top .fr__lower__block {
        margin-top: var(--franDev_flex_pd-v);
        padding-top: var(--franDev_flex_pd-v);
        border-top: 1px solid var(--red-active-color);
    }
}

@media (max-width: 550px) {
    :root {
        --franDev_flex_height: auto;
        --franDev_flex_pd-l: 0px;
        --franDev_upr_font: 18px;
        --franDev_flex_pd-v: 15px;
    }

    #franDev_top .flex_wrap .swiper-container {
        width: 100%;
        /*aspect-ratio: 16 / 9;*/
        aspect-ratio: 1 / 1;
    }

    #franDev_top .fr__upper__block, 
    #franDev_top .fr__lower__block {
        text-align: left;
    }

    #franDev_top .fr__upper__block br { display: none; }

    #franDev_top .fr__upper__block { font-size: var(--franDev_upr_font); }

    #franDev_top .flex_wrap .flex:after { display: none; }

    #franDev_top .flex_wrap .flex { padding-bottom: 0px; }

    #franDev_top .fr__lower__block {
        margin-top: var(--franDev_flex_pd-v);
        padding-top: var(--franDev_flex_pd-v);
        border-top: 1px solid var(--red-active-color);
    }

    #franDev_top .fr__upper__block .nomargin + .nomargin {
        padding-top: 15px;
        margin-top: 15px !important;
        position: relative;
    }

    #franDev_top .fr__upper__block .nomargin + .nomargin:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 1px;
        width: 100%;
        background-color: var(--red-active-color);
    }
}