#csf1 {
    width: 100%;
    height: 700px;
}

#csf1 div.bg {
    position: absolute;
    width: 100%;
    height: 700px;
    background-size: cover;
    background-position: center center;
}

#csf2 {
    height: 500px;
}

#csf2 div.bg {
    position: absolute;
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center center;
}

.fadeinout {
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 0;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    filter: alpha(opacity=0);
}

.opaque {
    opacity: 1;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
    filter: alpha(opacity=1);
}

.slide-first {
    animation: slide-in-left 0s forwards;
    -webkit-animation: slide-in-left 0s forwards;
}

.slide-in-left {
    animation: slide-in-left 1s forwards;
    -webkit-animation: slide-in-left 1s forwards;
}

.slide-in-right {
    animation: slide-in-right 1s forwards;
    -webkit-animation: slide-in-right 1s forwards;
}

.slide-out-left {
    animation: slide-out-left 1s forwards;
    -webkit-animation: slide-out-left 1s forwards;
}
.slide-out-right {
    animation: slide-out-right 1s forwards;
    -webkit-animation: slide-out-right 1s forwards;
}

.fade-in-right {
    animation: fade-in-right 1s forwards;
    -webkit-animation: fade-in-right 1s forwards;
}

.fade-in-left {
    animation: fade-in-left 1s forwards;
    -webkit-animation: fade-in-left 1s forwards;
}

.fade-out {
    animation: fade-out 1s forwards;
    -webkit-animation: fade-out 1s forwards;
}

.clip-right-left-in {
    animation: clip-right-left-in 1s forwards;
    -webkit-animation: clip-right-left-in 1s forwards;
}

.clip-right-left-out {
    animation: clip-right-left-out 1s forwards;
    -webkit-animation: clip-right-left-out 1s forwards;
}

@keyframes slide-first {
    100% {
        transform: translateX(0%);
    }
}

@keyframes slide-in-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}

@keyframes slide-in-right {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}

@keyframes slide-out-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@-webkit-keyframes slide-out-left {
    0% {
        -webkit-transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes slide-out-right {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}

@-webkit-keyframes slide-out-right {
    0% {
        -webkit-transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(100%);
    }
}

@keyframes fade-in-right {
    0% {
        opacity: 0;
        transform: translateX(-1%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

@-webkit-keyframes fade-in-right {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: translateX(-1%);
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

@keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(1%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

@-webkit-keyframes fade-in-left {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: translateX(1%);
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fade-out {
    0% {
        -webkit-opacity: 1;
    }
    100% {
        -webkit-opacity: 0;
    }
}

@keyframes clip-right-left-in {
    0% {
        opacity: 1;
        clip-path: inset(0 0 0 100%);
    }

    100% {
        clip-path: inset(0 0 0 0%);
    }
}

@-webkit-keyframes clip-right-left-in {
    0% {
        -webkit-opacity: 1;
        -webkit-clip-path: inset(0 0 0 100%);
    }

    100% {
        -webkit-clip-path: inset(0 0 0 0%);
    }
}

@keyframes clip-right-left-out {
    0% {
        clip-path: inset(0 0% 0 0);
    }

    100% {
        clip-path: inset(0 100% 0 0);
    }
}

@-webkit-keyframes clip-right-left-out {
    0% {
        -webkit-clip-path: inset(0 100% 0 0);
    }

    100% {
        -webkit-clip-path: inset(0 0% 0 0);
    }
}

.caption {
    position: relative;
    font-weight: 800;
    margin-top: 80px;
    margin-left: 140px;
}
.indicator {
    color: #fff;
    position: absolute;
    width: 150px;
    left: calc(90% - 150px);
    bottom: 10%;
    text-align: center;
}
.indicator_circle {
    text-align: center;
    color: #fff;
    position: absolute;
    width: 200px;
    left: calc(50% - 100px);
    bottom: 10%;
}

.idc {
    margin: 10px;
    font-family: 'Roboto';
    font-size: 15px;
    cursor: pointer;
}

.idc2 {
    font-size: 10px;
    cursor: pointer;
}

.click {
    color: #888;
}

.slide1 {
    background-image: url('/images/slide1.jpg');
}
.slide2 {
    background-image: url('/images/slide2.jpg');
}
.slide3 {
    background-image: url('/images/slide3.jpg');
}

.semina1 {
    background-image: url('/images/semina1.png');
}
.semina2 {
    background-image: url('/images/semina2.jpg');
}
.semina3 {
    background-image: url('/images/semina3.jpg');
}

.slide {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    height: 180px;
    border-radius: 8px;    
}

.slide.h260 {
    height: 260px;
}

.slide:hover .hoverBtn {
    display: block;
}

.slide div.banner {
    min-width: 100%;
    position: absolute;
    top: 0px;
    left: -100%;
    opacity: 0;
}

.slide div.banner.middle {
    margin: unset;
}

.slide div.banner.show {
    opacity: 1;
    left: 0px;
}

.slide_left {
    display: none;
    background-color: #6668;
    background-image: url('/images/arrow_left_white.svg');
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    border-radius: 50%;
}

.slide_right {
    display: none;
    background-color: #6668;
    background-image: url('/images/arrow_right_white.svg');
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border-radius: 50%;
}

.slide_number {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px 10px;
    color: #fff;
    background-color: #7777;
    border-radius: 14px;
    z-index: 1;
}

@media (max-width: 950px) {
    #csf1 {
        height: 300px;
    }

    #csf1 div.bg {
        height: 300px;
    }

    #csf1 .caption {
        margin: 40px;
    }

    #csf2 {
        height: 200px;
    }

    #csf2 div.bg {
        height: 200px;
    }

    .slide {
        width: calc(100% - 40px);
        margin: 0px auto;
        height: 131px;
    }

    .slide.h260 {
        margin: 20px auto 0px auto;
        height: 131px;
    }

    .slide:hover .hoverBtn {
        display: none;
    }
}