/*********************************************
 * Home Banner
**********************************************/
.vii-home-banner {
    --hb-spacing-y:clamp(40px, 6.11vw, 88px);
    --hb-spacing-x:calc(1.284 * var(--hb-spacing-y));
    --hb-height-video:83px;
    --hb-spacing-bottom:-40px;

    /* polygon */
    --hb-polygon-point:17%;
    --hb-polygon:polygon(0 0, 100% 0, 100% calc(100% - var(--hb-spacing-y)), calc(100% - var(--hb-polygon-point)) calc(100% - var(--hb-spacing-y)), calc(100% - var(--hb-polygon-point) - var(--hb-spacing-x)) 100%, calc(var(--hb-polygon-point) + var(--hb-spacing-x)) 100%, var(--hb-polygon-point) calc(100% - var(--hb-spacing-y)), 0 calc(100% - var(--hb-spacing-y)));
}
.vii-home-banner__inner {clip-path:var(--hb-polygon);}

/* animation */
.vii-home-banner {opacity:1 !important; transform:none !important;}
.vii-home-banner .image img {transition:transform 10s ease; transform:scale(1.05);}
.vii-home-banner.wpb_start_animation .image img {transform:scale(1);}

/* content */
.vii-home-banner.use-separated-content {
    position:relative;
}
.vii-home-banner.use-separated-content div[data-slide-content] {
    position:absolute;
    top:0;
    left:0;
    right:0;
    opacity:0;
    transition:opacity 0.5s ease-in-out;
    pointer-events:none;
}
.vii-home-banner.use-separated-content div[data-slide-content].active {
    opacity:1;
    pointer-events:auto;
    position:relative;
}

/* dots */
@media only screen and (min-width:769px) {
    .vii-home-banner .flickity-page-dots {
        position:absolute; right:12px;
        top:calc((var(--vii-100vh) - var(--vii-header-height) - var(--admin-bar-height)) / 2);
        transform:translateY(-50%); width:auto; padding:8px; min-height:60px;
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:8px; border-radius:40px;
        background:#fff; box-shadow:0 0 5px 0 rgba(0, 0, 0, .1);
    }
    .vii-home-banner .flickity-page-dots .flickity-page-dot {box-shadow:none; margin:0;}
    .vii-home-banner .flickity-page-dots .flickity-page-dot.is-selected,
    .vii-home-banner .flickity-page-dots .flickity-page-dot:hover {background:var(--vii-color-primary);}
}


/*********************************************
 * Home Banner Responsive
**********************************************/
@media only screen and (max-width:1180px) {
    .vii-home-banner {--hb-polygon-point:10%;}
}
@media only screen and (max-width:768px) {
    .vii-home-banner {--hb-polygon:unset;}

    /* dots */
    .vii-home-banner .flickity-page-dots {
        position:absolute; left:0; right:0; top:calc(var(--vii-100vh) - var(--vii-header-height) - 35px);
        padding-top:0;
    }
    .vii-home-banner .flickity-page-dots .flickity-page-dot {
        width:8px; height:8px; background:rgba(0, 0, 0, 0);
        border:1px solid #fff; box-shadow:none !important; margin:0 6px;
    }
    .vii-home-banner .flickity-page-dots .flickity-page-dot.is-selected,
    .vii-home-banner .flickity-page-dots .flickity-page-dot:hover {background:#fff;}
}