/* Hero - Banner */
.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.background-video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
}

.safety-product-img {
    max-width: 460px;
}

.compliance-std-img {
    text-align: center;
    max-width: 220px;
}

.compliance-std-img img {
    max-width: 220px;
}

.pc-scenarios {
    display: none;
}

.tab-scenarios {
    display: none;
}

.mobile-scenarios {
    display: block;
}

.faq .accordion-item:not(:first-of-type) {
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}

.faq .accordion-button,
.faq .accordion-body {
    background-color: #f9fbff;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background-color: #e2ebff;
}

@media screen and (min-width: 768px) {
    .mobile-scenarios {
        display: none;
    }

    .tab-scenarios {
        display: block;
    }
}

@media screen and (min-width: 1200px) {
    .pc-scenarios {
        display: block;
    }

    .tab-scenarios {
        display: none;
    }
}

@media screen and (min-width: 1400px) {
    .compliance-std-img {
        max-width: 258px;
    }
}

@media screen and (min-width: 1680px) {
    .compliance-std-img {
        max-width: 280px;
    }
}

@media screen and (max-width: 1199px) {
    .compliance-std-img {
        max-width: 240px;
    }
}

@media screen and (max-width: 992px) {
    .compliance-std-img {
        max-width: 230px;
    }
}

@media screen and (max-width: 768px) {
    .safety-product h5 {
        font-size: 16px;
    }
}