@font-face{font-family:Silka-Regular;src:url('../fonts/silka/Silka-Regular.otf') format('opentype');font-display:swap;}
@font-face{font-family:Silka-Light;src:url('../fonts/silka/Silka-Light.otf') format('opentype');font-display:swap;}
@font-face{font-family:Silka-Medium;src:url('../fonts/silka/Silka-Medium.otf') format('opentype');font-display:swap;}
@font-face{font-family:Silka-ExtraLight;src:url('../fonts/silka/Silka-ExtraLight.otf') format('opentype');font-display:swap;}
@font-face{font-family:Lato;src:url('../fonts/lato/Lato-Bold.ttf') format('opentype');font-display:swap;}

@font-face{font-family:Silka-MediumItalic;src:url('../fonts/silka/Silka-MediumItalic.otf') format('opentype');font-display:swap;}
@font-face{font-family:Silka-LightItalic;src:url('../fonts/silka/Silka-LightItalic.otf') format('opentype');font-display:swap;}
@font-face{font-family:Silka-SemiBold;src:url('../fonts/silka/Silka-SemiBold.otf') format('opentype');font-display:swap;}
@font-face{font-family:Silka-Bold;src:url('../fonts/silka/Silka-Bold.otf') format('opentype');font-display:swap;}
@font-face{font-family:Silka-ExtraLightItalic;src:url('../fonts/silka/Silka-ExtraLightItalic.otf') format('opentype');font-display:swap;}

@charset "UTF-8";


html, body {
    height: 100%;
}

body {
    font-family: "Silka-Light", san-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    background: #fff;
    margin: 0;
    margin-bottom: 50px;
}

body * {
    font-family: "Silka-Light", san-serif;
}
a {
    text-decoration: none;
}

.container {
    width: 1400px;
    margin: 0 auto;
}
@media (max-width: 1400px) { .container {width: 1000px} }
@media (max-width: 1000px) { .container {width: 90%} }

.baner {
    position: relative;
    width: 100%;
    height: 545px;
    overflow: visible;
    margin: auto;
    background: url("/img2/banner.png") 50% / cover no-repeat, linear-gradient(262deg, #0F8080 -0.34%, #01304E 96.44%);
    background-color: lightgray;
}
@media (max-width: 839px) { .baner {height: 387px;} }

.baner * { color: #fff }
    @media (max-width: 767px) { .baner {height: 400px} }
    @media (max-height: 500px) { .baner {height: 100%} }

    .baner .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30px;
        
    }
    @media (max-width: 575px) { .baner .top { padding-top: 10px }}
        .baner .top .logo {
            height: 50px;
            margin-left: 30px;
        }
        @media (max-width: 575px) { .baner .top .logo { height: 41px; margin-left: 10px }}

        .baner .top .login {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-right: 30px;
        }
        @media (max-width: 575px) { .baner .top .login { margin-right: 10px; flex-direction: column }}
            .baner .top .btn {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 10px;
                font-family: "Silka-ExtraLight", san-serif;
                font-size: 15px;
                text-transform: uppercase;
            }
            @media (max-width: 575px) { .baner .top .btn { font-size: 12px; padding: 3px }}
                .baner .top .btn:not(:first-child) {
                    margin-left: 10px;
                }
                @media (max-width: 575px) { .baner .top .btn:not(:first-child) { margin-top: 10px }}
                .baner .top .btn.white {
                    font-family: "Silka-Medium", san-serif;
                    font-weight: 500;
                    color: #120670;
                    border-radius: 4px;
                    border: 1px solid #fff;
                    background: #fff;
                }
                .baner .top .btn.white-border {
                    font-family: "Silka-Regular", san-serif;
                    border-radius: 4px;
                    border: 1px solid #fff;
                }
            
            .baner .text-container {
                position: relative;
                z-index: 0;
            }
                .baner .text-container .text {
                    margin: auto;
                    padding-top: 70px;
                }
                    .baner .text-container .text > div {
                        text-align: center;
                    }
                    .baner .text-container .text .t1 {
                        font-family: "Silka-ExtraLight", san-serif;
                        font-size: 32px;
                    }
                    @media (max-width: 839px) { .baner .text-container .text .t1 {font-size: 16px;} }
                    .baner .text-container .text .t2 {
                        font-family: "Silka-Medium", san-serif;
                        font-weight: 500;
                        font-size: 48px;
                        line-height: 1.13;
                        padding-top: 15px;
                    }
                    @media (max-width: 839px) { .baner .text-container .text .t2 {font-size: 24px;} }
                    
                .baner .text-container .bg-points {
                    z-index: 0;
                }
                    .baner .text-container .bg-points > div {
                        position: absolute;
                        color: transparent;
                        font-family: Lato;
                        font-weight: 700;
                        font-size: 89.014px;
                        line-height: 84.563px;
                        -webkit-text-stroke-width: .5px;
                        -webkit-text-stroke-color: #FFF;
                    }
                    @media (min-width: 840px) { 
                        .baner .text-container .bg-points .p1 { left: calc(100% / 2 - 380px); top:  40px; font-size: 89px; opacity: 0.49 } 
                        .baner .text-container .bg-points .p2 { left: calc(100% / 2 - 430px); top: 135px; font-size: 78px; opacity: 0.69 } 
                        .baner .text-container .bg-points .p3 { left: calc(100% / 2 - 275px); top: 170px; font-size: 83px; opacity: 0.27 } 
                        .baner .text-container .bg-points .p4 { left: calc(100% / 2 - 350px); top: 220px; font-size: 59px; opacity: 0.30 } 

                        .baner .text-container .bg-points .p5 { left: calc(100% / 2 + 320px); top:  90px; font-size: 68px; opacity: 0.27 } 
                        .baner .text-container .bg-points .p6 { left: calc(100% / 2 + 295px); top: 155px; font-size: 72px; opacity: 0.69 } 
                        .baner .text-container .bg-points .p7 { left: calc(100% / 2 + 208px); top: 180px; font-size: 72px; opacity: 0.61 } 
                        .baner .text-container .bg-points .p8 { left: calc(100% / 2 + 285px); top: 245px; font-size: 82px; opacity: 0.69 } 
                    }
                    @media (max-width: 839px) {
                        .baner .text-container .bg-points .p1 { left: calc(100% / 2 - 160px); top: 10px; font-size: 36px; opacity: 0.49 } 
                        .baner .text-container .bg-points .p2 { left: calc(100% / 2 - 185px); top: 45px; font-size: 36px; opacity: 0.69 } 
                        .baner .text-container .bg-points .p3 { left: calc(100% / 2 - 138px); top: 55px; font-size: 38px; opacity: 0.27 } 
                        .baner .text-container .bg-points .p4 { left: calc(100% / 2 - 177px); top: 96px; font-size: 27px; opacity: 0.30 } 

                        .baner .text-container .bg-points .p5 { left: calc(100% / 2 + 125px); top: 10px; font-size: 34px; opacity: 0.27 } 
                        .baner .text-container .bg-points .p6 { left: calc(100% / 2 + 150px); top: 40px; font-size: 36px; opacity: 0.69 } 
                        .baner .text-container .bg-points .p7 { left: calc(100% / 2 + 110px); top: 58px; font-size: 36px; opacity: 0.61 } 
                        .baner .text-container .bg-points .p8 { left: calc(100% / 2 + 130px); top:115px; font-size: 39px; opacity: 0.69 } 
                    }

    .baner .slide-container {
        position: absolute;
        height: 350px;
        bottom: calc(-350px / 2);
        left: 10px;
        right: 10px;
        background-color: #fff;
        border: 1px solid #eee;
    }
    .baner .slide-container * {
        color: #000 !important;
    }
    
    .own-carousel__item {
        width: 150px;
        height: 100px;
    }