ORIENT/themes/modern2/assets/css/components/3-page/home.scss

.marquee {
    &__outer {
        position: relative;
    }
    width: 100%;
    margin: 10px 0;
    overflow: hidden;
    position: relative;
    height: 50px;
    background: #00822c;
    &__item {
        &.slick-slide {
            padding: 0;
        }
        margin: 0 50px;
        a {
            display: flex;
            align-items: center;
            height: 50px;
            color: #fff;
            font-size: 16px;
            line-height: 20px;
            font-weight: 400;
        }
    }
    &__link {
        position: absolute;
        top: 0;
        left: 0;
        width: 120px;
        height: 100%;
        background: #ee4037;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        font-size: 14px;
        color: $text-color-white;
        line-height: 16px;
        font-weight: 700;
        text-transform: uppercase;
        &::before {
            clip-path: polygon(100% 46%, 0 0, 0 100%);
            background: #ee4037;
            position: absolute;
            top: 0;
            left: 100%;
            height: 100%;
            width: 25px;
            content: "";
        }
    }
}
.hero {
    &__inner {
        overflow: hidden;
    }
}

@keyframes marquee {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}

/* Make it move */
@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}
// banner start
.banner {
    margin: 80px 0;
    &__inner {
        width: 100%;
        height: auto;
        img {
            width: 100%;
        }
    }
}
// banner end
.advertisiment__item {
    img {
        width: 100%;
    }
}
// main start
.main {
    margin-top: 70px;
    &__inner {
        display: flex;
        align-items: stretch;
    }
    &__content {
        width: calc(70% - 25px);
        margin-right: 25px;
    }
    &__body {
        &-row {
            margin: 0 -20px 80px -20px;
            display: flex;
            align-items: stretch;
            flex-wrap: wrap;
        }
        &-column {
            width: calc(50% - 42px);
            margin: 0 20px;
            a.progressive {
                position: relative;
                display: block;
                overflow: hidden;
                outline: none;
                height: 300px;
            }
            a.progressive:not(.replace) {
                cursor: default;
            }
            a.progressive img {
                @include fullImage;
            }
            a.progressive img.preview {
                filter: blur(2vw);
                transform: scale(1.05);
            }
            a.progressive img.reveal {
                position: absolute;
                left: 0;
                top: 0;
                will-change: transform, opacity;
                animation: reveal 1s ease-out;
            }
            &.border {
                border: 1px solid #dcdcdc;
            }
        }
        &-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 80px;
            position: relative;
            &::before {
                position: absolute;
                content: "";
                top: 50%;
                left: 50%;
                width: 80%;
                height: 1px;
                background: #e6e6e6;
                @include transform;
                z-index: -1;
            }
            &-title {
                font-size: $h3-size;
                line-height: $h3-height;
                font-weight: 700;
                color: $text-light-black;
                background: $text-color-white;
            }
            &-link {
                font-size: $h5-size;
                line-height: $h5-height;
                font-weight: 400;
                color: $text-color-grey;
                background: $text-color-white;
                display: block;
            }
        }
        &-card {
            margin: -100px 30px 0 30px;
            border: 1px solid #dcdcdc;
            .card {
                border-bottom: 1px solid #dcdcdc;
                &:last-child {
                    border-bottom: none;
                }
            }
        }
        &-title {
            font-size: $h3-size;
            line-height: $h3-height;
            font-weight: 700;
            color: $text-light-black;
            margin-bottom: 20px;
        }
    }
    &__banner {
        width: 100%;
        height: auto;
        margin-bottom: 80px;
        img {
            width: 100%;
        }
    }
    &__sidebar {
        margin-left: 25px;
        width: calc(30% - 25px);
        &-adv {
            margin-bottom: 40px;
        }
        &-title {
            font-size: $h4-size;
            line-height: $h4-height;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 80px;
            color: $text-light-black;
        }
        .card {
            &__link {
                height: unset;
                text-overflow: unset;
            }
        }
        a.progressive {
            position: relative;
            display: block;
            overflow: hidden;
            outline: none;
            margin-bottom: 80px;
            &:not(.replace) {
                cursor: default;
            }
            & img {
                width: 100%;
                height: auto;
            }
            & img.preview {
                filter: blur(2vw);
                transform: scale(1.05);
            }
            & img.reveal {
                position: absolute;
                left: 0;
                top: 0;
                will-change: transform, opacity;
                animation: reveal 1s ease-out;
            }
        }
        &-tag {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin: -30px -5px 80px -5px;
            &-link {
                padding: 8px 9px;
                border-right: 5px;
                background: #f7f7f6;
                font-size: 16px;
                line-height: 16px;
                color: $text-light-black;
                margin: 5px;
            }
        }
    }
}
// main end
.banner__mobile {
    display: none ;
}
// event start
.event {
    margin: 80px 0;
    &__header {
        margin-bottom: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        &-title {
            font-size: $h3-size;
            line-height: $h3-height;
            font-weight: 700;
            color: $text-light-black;
            background: $text-color-white;
        }
        &-link {
            font-size: $h5-size;
            line-height: $h5-height;
            font-weight: 400;
            color: $text-color-grey;
            background: $text-color-white;
        }
        &::before {
            position: absolute;
            content: "";
            top: 50%;
            left: 50%;
            width: 80%;
            height: 1px;
            background: #e6e6e6;
            @include transform;
            z-index: -1;
        }
    }
    &__body {
        &-row {
            display: flex;
            align-items: stretch;
            margin: 0 -20px;
        }
        &-image {
            width: calc(50% - 40px);
            margin: 0 20px;
            position: relative;
            a.progressive {
                position: relative;
                display: block;
                overflow: hidden;
                outline: none;
                height: 330px;
            }
            a.progressive:not(.replace) {
                cursor: default;
            }
            a.progressive img {
                @include fullImage;
            }
            a.progressive img.preview {
                filter: blur(2vw);
                transform: scale(1.05);
            }
            a.progressive img.reveal {
                position: absolute;
                left: 0;
                top: 0;
                will-change: transform, opacity;
                animation: reveal 1s ease-out;
            }
        }
        &-card {
            position: absolute;
            top: 210px;
            left: 30px;
            width: calc(100% - 60px);
            border: 1px solid #dcdcdc;
        }
        &-column {
            width: calc(50% - 100px);
            margin: 0 20px;
            padding: 15px 30px;
            border: 1px solid #dcdcdc;
            .card {
                padding: 30px 0;
                border-bottom: 1px solid #dcdcdc;
                &:nth-last-child(1) {
                    border-bottom: none;
                }
            }
        }
    }
}

// event end
// partner start
.partner {
    margin-bottom: 80px;
    &__title {
        font-size: $h3-size;
        line-height: $h3-height;
        font-weight: 700;
        color: $text-light-black;
        margin-bottom: 80px;
    }
}
// partner end
/* progressive image CSS */

@keyframes reveal {
    0% {
        transform: scale(1.05);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}