.topic-template-home-page {
    background-color: var(--topic-template-bg-color, #ffffff);
}

.topic-template-home-page .category-search-header,
.topic-template-home-page .category-search-header .header-group,
.topic-template-home-page .category-search-header .header-search-bar {
    background-color: var(--topic-template-bg-color, #ffffff);
}

.topic-template-home-page .category-search-header {
    display: none !important;
}

.topic-template-home-page > section.membercenter.d-none.d-lg-block,
.topic-template-home-page .header-search-bar {
    display: none !important;
}

.topic-template-home-page .topic-template-site-header .header-info {
    gap: 12px;
}

.topic-template-home-page .topic-template-home-link,
.topic-template-home-page .topic-template-back-link {
    flex-shrink: 0;
}

.topic-template-home-page .topic-template-home-link {
    align-items: center;
    text-decoration: none;
}

.topic-template-home-page .topic-template-home-link:hover {
    color: var(--primary);
}

.topic-template-banner-section .home-banner,
.topic-template-banner-section .banner-slider,
.topic-template-banner-section .slider-viewport,
.topic-template-banner-section .topic-template-banner {
    width: 100%;
}

.topic-template-banner-section .slider-viewport .swiper-slide a,
.topic-template-banner-section .slider-viewport .swiper-slide img {
    display: block;
    width: 100%;
}

.topic-template-story {
    width: 100%;
}

.topic-template-story-block {
    width: 100%;
    background-color: var(--topic-template-bg-color, #ffffff);
}

.topic-template-story-content {
    width: 100%;
}

.topic-template-story-content img,
.topic-template-story-content iframe,
.topic-template-story-content video {
    max-width: 100%;
}

.topic-template-video-section {
    width: 100%;
}

.topic-template-video-frame {
    width: 100%;
    margin: 0 auto;
    background-color: #000000;
}

.topic-template-video-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000000;
}

.topic-template-widget .area {
    margin-left: auto;
    margin-right: auto;
}

.topic-template-home-page .areaHeader {

    height: 45px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    position: sticky;
    position: -webkit-sticky;
    top: -1px;
    z-index: 5;
    background-color: var(--areaMainColor);
}

.topic-template-home-page .themeArea .areaBody,
.topic-template-home-page .boutiqueArea .areaBody,
.topic-template-home-page .boutiqueTabArea .areaBody,
.topic-template-home-page .defultArea .areaBody {
    background-color: var(--topic-template-bg-color, #ffffff);
}

@media screen and (min-width: 992px) {
    .topic-template-banner-section {
        margin-top: 0;
    }

    .topic-template-banner-section .slider-viewport {
        height: auto;
        aspect-ratio: 960 / 577;
    }

    .topic-template-banner-section .slider-background.slider-background {
        height: auto;
        aspect-ratio: 960 / 577;
    }

    .topic-template-banner-section .slider-viewport .swiper-slide a {
        width: 100%;
    }

    .topic-template-banner-section .slider-viewport .swiper-slide img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .topic-template-widget {
        padding-bottom: 24px;
    }
}

@media screen and (max-width: 991.98px) {


    .topic-template-home-page .widget,
    .topic-template-home-page .widget .area {
        scroll-margin-top: 56px;
    }
}