/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}


html {
    font-size: 10px;
}

body {
    font-size: 1.6rem;
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}



.header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background: rgba(1, 17, 35, 1);
    padding: 15px;
    width: 100%;
    height: 8vh;
}

.header .logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 90%;
}

.header .logo img {
    width: auto;
    height: 100%;
}

.content {
    height: 92vh;
    background: #fff;
    width: 100%;
    padding: 30px;

}

.content-inner {
    background: rgba(255, 222, 9, 1);
    border: 3px solid rgba(1, 17, 35, 1);
    width: 100%;
    height: 100%;
    padding: 30px;
}

.content-inner .title {
    font-family: Halcom, sans-serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 25px;
    letter-spacing: 0em;
    text-align: left;
    display: inline-block;
    margin-bottom: 40px;
}


.splide{
    height: 250px;
}

.splide__slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
}

.content-sld {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    height: 100%;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
}

.splide__slide img {
    height: 60%;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    -o-object-fit: contain;
       object-fit: contain;
}

.splide__slide.is-active .content-sld img {
    height: 80%;
}

.splide__slide span {
    font-family: Halcom;
    font-size: 14px;
    font-weight: 900;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: center;
    width: 100%;
    height: 10%;

}

.footer-btn {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    background: rgba(1, 17, 35, 1);
    border: 3px solid rgba(254, 241, 225, 1);
    padding: 10px 20px;
    cursor: pointer;
    font-family: Halcom;
    font-size: 13px;
    border-radius: 5px;
    font-weight: 900;
    line-height: 14px;
    letter-spacing: 0em;
    text-align: center;
    color: #fff;
    width: 100%;
}
.splide__track{
    height: 100%;
}
.next-btn {
    background: #fff;
    margin-top: 20px;
    border: 3px solid rgba(1, 17, 35, 1);
    padding: 10px 20px;
    cursor: pointer;
    text-align: center;
    font-family: Halcom;
    font-size: 13px;
    border-radius: 5px;
    font-weight: 900;
    line-height: 14px;
    letter-spacing: 0em;
    color: rgba(1, 17, 35, 1);
    width: 100%;
}