.customer-story-swiper { margin-bottom: 120px; }
    .customer-story-swiper .swiper-container { display: flex; align-items: center; gap: 50px; }

    .customer-story-swiper .swiper-pagination { margin-top: 35px; text-align: center; display: none; }
        .customer-story-swiper .swiper-pagination .swiper-pagination-bullet { background-color: #606060; border: none; }
            .customer-story-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #aaa; }

    .customer-story-swiper .swiper-container .swiper-btn { transform: translateY(13px); cursor: pointer; width: 34px; height: 34px; background: url(../../images/homepage/rotate-arrow-left.svg) center no-repeat; background-size: contain; }
        .customer-story-swiper .swiper-container .swiper-btn.swiper-next-btn { transform: translateY(13px) rotate(180deg); transform-origin: center; }

    .customer-story-swiper .swiper-container .swiper-main { overflow: hidden; flex: 1; padding-top: 52px; }
        .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide { transition: all .2s ease-in-out; }
            .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block { height: 500px; background-color: #F5F5F5; padding: 74px 24px 48px 42px; position: relative; display: flex; flex-direction: column; }

                .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block p { margin-bottom: 0; color: #323234; font-size: 16px; }
                    .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block p.videoLink { color: #fe8e14; }

                .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block::before { content: ""; display: block; position: absolute; width: 53px; height: 40px; top: 0; transform: translateY(-26px); background: url(../../images/company/about/quote.svg) center no-repeat; background-size: contain; }
                .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block .customer-logo { margin-top: auto; max-width: 100%; object-fit: contain; }
                .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block .citation { font-size: 16px; margin-top: 20px; font-family: OpenSans-SemiBold; font-style: italic; }
                .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block .read-story { position: absolute; font-size: 16px; color: #323234; right: 53px; bottom: 49px; }
                    .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block .read-story::after { content: ""; position: absolute; display: inline-block; width: 14px; height: 9px; background: url(../../images/homepage/orange-arrow.svg) center no-repeat; background-size: contain; top: 50%; right: 0; transform: translate(calc(100% + 5px), -50%); transition: all .2s ease; }
                    .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block .read-story:hover { color: #fe8e14; }
                        .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block .read-story:hover::after { color: #fe8e14; transform: translate(calc(100% + 10px), -50%); }


.DBRPanorama .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block { height: 450px; }

.dbr-accordion { --min-height: 525px; display: flex; align-items: center; max-width: 1444px; justify-content: center; margin-left: auto; margin-right: auto; gap: 158px; min-height: var(--min-height); }
    .dbr-accordion .accordion { flex: 1; width: 100%; }
        .dbr-accordion .accordion > div { padding: 20px 0 28px 0; border-bottom: 1px solid #CCCCCC; }

            .dbr-accordion .accordion > div > div { display: none; padding-top: 20px; }
            .dbr-accordion .accordion > div:first-child > div { display: block; }

            .dbr-accordion .accordion > div > p { font-size: 20px; line-height: 27px; font-family: 'OpenSans-Semibold'; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
                .dbr-accordion .accordion > div > p::after { content: ""; transition: all .2s ease-in; display: inline-block; width: 18px; height: 11px; mask: url(../../images/icons/black-arrow-down.svg) no-repeat center; mask-size: contain; background-color: #323234; }
            .dbr-accordion .accordion > div.active > p::after { background-color: #fe8e14; transform: rotate(180deg); }
            .dbr-accordion .accordion > div ul { padding-left: 19px; }
                .dbr-accordion .accordion > div ul > li { font-size: 14px; line-height: 24px; font-family: 'OpenSans-Semibold'; list-style: disc; }
                .dbr-accordion .accordion > div ul.fontRegular > li { font-size: 14px; line-height: 24px; font-family: 'OpenSans-Regular'; list-style: disc; }
                .dbr-accordion .accordion > div ul > li::marker { font-size: 18px; color: #999999; }
                .dbr-accordion .accordion > div ul > li:not(:last-child) { margin-bottom: 5px; }
        .dbr-accordion .accordion p { margin-bottom: 0; font-size: 16px; line-height: 22px; }
    .dbr-accordion .image.video { cursor: pointer; filter: brightness(0.6); }
        .dbr-accordion .image.video :hover { filter: brightness(0.8); }
    .dbr-accordion .image > img { height: auto; animation: fadeIn .5s ease-in-out; }

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.dbr-accordion .image:not(:first-child) { display: none; }
.dbr-accordion > div { position: relative; }
    .dbr-accordion > div .play-icon { pointer-events: none; position: absolute; width: 90px; height: 90px; border: 3px solid #FFFFFF; background-color: #FE8E14; right: 54px; bottom: 30px; border-radius: 50%; }
        .dbr-accordion > div .play-icon::after { content: ""; display: block; border-color: transparent transparent transparent white; border-width: 16px 0 16px 27px; border-style: solid; border-right: none; position: absolute; top: 50%; left: 50%; transform: translate(-35%,-50%); }
.dbr-accordion .case-study-link { color: #306877; text-decoration: underline; text-transform: uppercase; }

.dbr-barcode-sample { background-color: #3A3938; padding: 84px 140px 72px 140px; }
    .dbr-barcode-sample .swiper-container { overflow: hidden; margin-top: 33px; }
        .dbr-barcode-sample .swiper-container .swiper-slide { width: auto; }
    .dbr-barcode-sample .sample { cursor: pointer; display: inline-block; max-width: 220px; }
        .dbr-barcode-sample .sample > img { object-fit: cover; }
        .dbr-barcode-sample .sample > p { margin-top: 15px; color: #AAAAAA; font-size: 16px; line-height: 22px; text-decoration: underline; }
        .dbr-barcode-sample .sample:hover > p { color: #fe8e14; }
    .dbr-barcode-sample .nav { display: flex; gap: 30px; align-items: center; justify-content: flex-end; }
        .dbr-barcode-sample .nav .swiper-nav { width: 34px; height: 34px; mask: url(../../images/homepage/rotate-arrow-left-deep.svg); background-color: white; }
            .dbr-barcode-sample .nav .swiper-nav:hover { background-color: #fe8e14; }
            .dbr-barcode-sample .nav .swiper-nav.next { transform: rotate(180deg); }
        .dbr-barcode-sample .nav a { font-size: 16px; color: white; }

@media (max-width: 1679px) {
    .dbr-accordion { gap: 120px; }
        .dbr-accordion .image > img { max-width: 550px; }

    .customer-story-swiper .swiper-container { gap: 30px; }

        .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block { padding: 30px 20px 20px 20px; height: 375px; }
            .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block p { font-size: 14px; line-height: 1.5; }
            .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block .citation { font-size: 16px; line-height: 1.5; margin-top: 10px; }
            .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block .customer-logo { transform: scale(0.8); transform-origin: left; }

            .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block::before { width: 40px; }
            .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block .read-story { bottom: 20px; }

    .DBRPanorama .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block { height: 350px; }
}

@media (max-width: 1399px) {
    .dbr-accordion .image > img { max-width: 500px; }
    .dbr-barcode-sample { padding: 60px 80px; }
}

@media (max-width: 1199px) {
    .dbr-accordion { gap: 80px; }
        .dbr-accordion .image > img { max-width: 400px; }

    .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block { height: auto; }
    .DBRPanorama .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block { height: auto; }

    .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block .customer-logo { margin-top: 30px; }
}

@media (max-width: 991px) {
    .dbr-accordion { flex-direction: column-reverse; gap: 20px; }
        .dbr-accordion .image > img { max-width: 100%; width: 450px; }
        .dbr-accordion .accordion > div > p { font-size: 18px; gap: 10px; }

    .customer-story-swiper .swiper-pagination { display: block; }
    .customer-story-swiper .swiper-container .swiper-btn { display: none; }

    .dbr-barcode-sample { padding: 40px; }
        .dbr-barcode-sample .swiper-nav { display: none; }
}

@media (max-width: 575px) {
    .customer-story-swiper { margin-bottom: 80px; }
        .customer-story-swiper .swiper-container .swiper-main .swiper-wrapper .swiper-slide .customer-story-block { padding: 30px 20px 20px; }
    .dbr-barcode-sample { padding: 20px; }
}