#WebTwainOverview a.d-btn { text-transform: lowercase; }
    #WebTwainOverview a.d-btn::first-line { text-transform: capitalize; }
#dynamsoft-header { position: relative; }
.basicCustomers .swiper-container { height: 50px; overflow: hidden; }
.orange { color: #FE8E14 !important; }

.show-sm, .show-md { display: none !important; }

.dwtOverviewAction { height: 400px; margin-top: 220px; margin-bottom: 198px; }
.dwtOverviewSwiper { margin-top: 160px; }
#dwtOverviewFeature { margin-top: 120px; }
.basicVolume .volumeList p { margin-top: 10px; }

.dwtOverviewAction .plybtn { left: 50%; top: 50%; transform: translate(-50%,-50%); }
.basicReliable .functionBox .icon { border: 2px solid #39393B; }
    /*.basicReliable .functionBox .icon i { width: 52px; height: 52px; background-size: auto !important; }*/
    .basicReliable .functionBox .icon .icon-scanner { background: url(../../images/banner/DWT/dwt-productbox.svg) no-repeat center center; }

.basicVolume .volumeList li span.icon { width: 75px; height: 75px; }
    .basicVolume .volumeList li span.icon i { width: 57px; height: 57px; background-size: auto !important; }

i.ibm-logo.colored { width: 101px; height: 46px; width: 10.1rem; height: 4.6rem; background: url(../../images/icons/customer-logos/IBM.png); background-size: 100% 100%; }
i.lm-logo.colored { width: 215px; height: 52px; width: 21.5rem; height: 5.2rem; background: url(../../images/icons/customer-logos/LockheedMartin.png); background-size: 100% 100%; }

.whitePlayBtn { background: #fe8e1440; border-color: #fe8e14; }
    .whitePlayBtn::after { content: ""; display: inline-block; width: 0; height: 0; border-top: 50px solid transparent; border-left: 90px solid #fe8e14; border-bottom: 50px solid transparent; position: absolute; left: 50%; top: 50%; transform: translate(-30%, -50%); }

.icon-wrapper { display: inline-block; margin-right: 20px; vertical-align: top; text-align: center; }
    .icon-wrapper i { width: 100%; }
    .icon-wrapper span { text-align: center; }

.browser-wrapper { display: inline-block; vertical-align: top; }

.platform-wrapper { display: inline-block; vertical-align: top; margin-top: 12px; font-size: 27px; }
    .platform-wrapper span { display: inline-block; font-family: 'Oswald-Regular'; margin-left: 30px; }


.deviceContainer { color: #707070; }
.video-container img { width: 100%; }

.dwtOverviewStrength ul.detail li { list-style: disc !important; }

.basicPowerful .powerfulList li { min-height: 280px; }
    .basicPowerful .powerfulList li:nth-child(1) span.icon i { background: url(../../images/banner/DWT/barcode-search.svg) #fff no-repeat center center; }
    .basicPowerful .powerfulList li:nth-child(2) span.icon i { background: url(../../images/banner/DWT/webcam-2.svg) #fff no-repeat center center; }
    .basicPowerful .powerfulList li:nth-child(3) span.icon i { background: url(../../images/banner/DWT/office-file-text.svg) #fff no-repeat center center; }
    .basicPowerful .powerfulList li:nth-child(4) span.icon i { background: url(../../images/banner/DWT/common-file-text-search.svg) #fff no-repeat center center; }
    .basicPowerful .powerfulList li a.textUpperCase { position: absolute; bottom: 40px; }
.dwtOverviewPowerful.basicPowerful .powerfulList a.router-link { z-index: 1; }
.dwtOverviewPowerful.basicPowerful .powerfulLeft { padding-left: 94px; padding-top: 160px; padding-right: 94px; }

#dwtOverviewFeature .featureBox .featureBoxTop { padding-top: 0; position: relative; }
    #dwtOverviewFeature .featureBox .featureBoxTop .featureImg { width: 100%; height: 100%; display: block; }
    #dwtOverviewFeature .featureBox .featureBoxTop .featureInnerImg { width: 100%; height: 100%; }
    #dwtOverviewFeature .featureBox .featureBoxTop .featureTag { position: absolute; top: 20px; left: 0px; z-index: 1; }
/*#dwtOverviewFeature .featureBox .featureBoxTop.fb1 { background: url(../../images/banner/DWT/DWT_Featured_1.png) #FFFFFF no-repeat center center; }
#dwtOverviewFeature .featureBox .featureBoxTop.fb2 { background: url(../../images/banner/DWT/DWT_Featured_2.png) #FFFFFF no-repeat center center; }
#dwtOverviewFeature .featureBox .featureBoxTop.fb3 { background: url(../../images/banner/DWT/DWT_Featured_3.png) #FFFFFF no-repeat center center; }*/
.basicCustomers .customer-logos li { margin-right: 60px; }
.actionLeft { width: 30%; margin-left: 190px; margin-top: 70px; }
.actionRight { margin-left: 150px; margin-top: -60px; width: 40%; }
.org-link-hover:hover span { transform: translateX(10px); position: absolute; }
.caseStudyLink span { right: -15px; position: absolute; }
.caseStudyLink:hover span { right: -25px; }

#WebTwainResource .basicResourceList li { position: relative; display: inline-block; width: 33%; vertical-align: top; margin-bottom: 4.5rem; }
    #WebTwainResource .basicResourceList li span.icon { position: absolute; width: 80px; height: 80px; border: 1px solid #39393B; left: 41px; top: 18px; background: #FFFFFF; text-align: center; display: flex; justify-content: center; align-items: center; }
#WebTwainResource .basicFAQBox .faqList > li .answer { display: block; font-size: 18px; line-height: 30px; max-height: 0px; overflow: hidden; margin-bottom: 5px; transition: all ease-in-out 0.4s; padding-left: 28px; }
#WebTwainResource .basicFAQBox .faqList > li.on .answer { max-height: 670px; }

/* OverviewSwiper */
.basicSwiper .ant-carousel .slick-slide { height: 300px; }
.dwtOverviewSwiper { margin-bottom: 100px; position: relative; }
    .dwtOverviewSwiper .slide-left { width: 1020px; height: auto; text-align: left; padding-left: 90px; }
        .dwtOverviewSwiper .slide-left .personWords { font-size: 2.4rem; line-height: 4rem; padding-left: 5rem; position: relative; color: #323234; }
            .dwtOverviewSwiper .slide-left .personWords .preQuote { display: inline-block; width: 3.9rem; height: 16.2rem; background: url('../../images/icons/pre_quote.png') no-repeat; background-size: contain; position: absolute; top: -4.5rem; left: 0rem; }
    .dwtOverviewSwiper .personName { font-size: 20px; line-height: 28px; padding-left: 50px; color: #323234; }
    .dwtOverviewSwiper .slide-right { width: auto; padding-right: 90px; }
        .dwtOverviewSwiper .slide-right div { position: relative; width: 41.8rem; height: 28.3rem; background: #F5F5F5; }
    .dwtOverviewSwiper div.LockheadMartin { background: url('../../images/banner/LockheedMartin.png') #F5F5F5 no-repeat center center; }
    .dwtOverviewSwiper div.IBM { background: url('../../images/banner/IBM.png') #F5F5F5 no-repeat center center; }
    .dwtOverviewSwiper div.GermanRedCross { background: url('../../images/banner/GermanRedCross.png') #F5F5F5 no-repeat center center; }
    .dwtOverviewSwiper div.Avision { background: url('../../images/banner/Avision.png') #F5F5F5 no-repeat center center; }
    .dwtOverviewSwiper div.Ticketswap { background: url('../../images/banner/Ticket.png') #F5F5F5 no-repeat center center; }
    .dwtOverviewSwiper div.fujiFilm { background: url('../../images/banner/fujiFilm.png') #F5F5F5 no-repeat center center; background-size: 65%; }
    .dwtOverviewSwiper div.healthTech { background: url('../../images/banner/healthTech.png') #F5F5F5 no-repeat center center; }
    .dwtOverviewSwiper .slick-slide .slide-right div i { position: absolute; left: 19.1rem; top: -3rem; width: 4.4rem; height: 5.7rem; }
    .dwtOverviewSwiper .index-swiper-container { overflow: hidden; font-size: 0px; }
    .dwtOverviewSwiper .custom-slick-arrow { width: 30px; height: 100%; display: inline-block; position: absolute; top: 0px; cursor: pointer; }
        .dwtOverviewSwiper .custom-slick-arrow:before { display: none; }
        .dwtOverviewSwiper .custom-slick-arrow:hover { opacity: 0.5; }
    .dwtOverviewSwiper .swiper-pagination-switch { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: #555; margin: 0 5px; opacity: 0.8; border: 1px solid #6AC4BB; cursor: pointer; bottom: -8px; }
    .dwtOverviewSwiper .swiper-active-switch { background: #6AC4BB; }
    .dwtOverviewSwiper .index-slick-prev { left: 30px; z-index: 10; }
    .dwtOverviewSwiper .index-slick-next { right: 30px; z-index: 10; }
    .dwtOverviewSwiper .swiper-slide .slide-left { display: table-cell; vertical-align: middle; height: 100%; float: none; }
    .dwtOverviewSwiper i.arrow-left { display: inline-block; width: 50px; height: 100%; background: url(../../images/icons/left-arrow-black.svg) no-repeat center center; background-size: contain; }
    .dwtOverviewSwiper i.arrow-right { display: inline-block; width: 50px; height: 100%; background: url(../../images/icons/right-arrow-black.svg) no-repeat center center; background-size: contain; }
    .dwtOverviewSwiper .slide-block { display: table; height: 100%; }
    .dwtOverviewSwiper .slide-right.hide-sm.hide-md { display: table-cell; vertical-align: middle; height: 100%; float: none; padding-right: unset; padding-left: 40px; }


.orangeAngelList li { position: relative; font-size: 18px; line-height: 30px; margin-bottom: 5px; }
    .orangeAngelList li:before { content: "\A"; border-style: solid; border-width: 6px 10px 6px 0; border-color: transparent #fe8e14 transparent transparent; position: absolute; transform: rotate( 180deg ); left: -18px; top: 10px; }
.orangeAngelList.inlineBlockList li { display: inline-block; margin-right: 34px; }
    .orangeAngelList.inlineBlockList li:nth-child(5n) { margin-right: 0; }

/* dwtOverviewSupports */
.dwtOverviewSupports { margin: 100px auto; }
    .dwtOverviewSupports .supportsContainer { background-color: #F5F5F5; width: 100%; height: 280px; display: flex; }
        .dwtOverviewSupports .supportsContainer .supportPlatforms { width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 80px; }
            .dwtOverviewSupports .supportsContainer .supportPlatforms p:first-child { margin-bottom: 20px; }
        .dwtOverviewSupports .supportsContainer .scanDevices { width: 50%; height: 100%; display: flex; align-items: center; justify-content: space-around; padding-right: 80px; }
            .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox { width: 200px; height: 200px; background-color: white; display: inline-block; text-align: center; display: flex; flex-direction: column; justify-content: center; }
            .dwtOverviewSupports .supportsContainer .scanDevices a.whiteBox { cursor: pointer; transition: ease-in-out .2s all; }
                .dwtOverviewSupports .supportsContainer .scanDevices a.whiteBox:hover { box-shadow: -8px 8px 0 0 #000; transform: translate(8px,-8px); }
            .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox i { width: 100%; height: 55%; display: inline-block; }
            .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox span { text-align: center; font-size: 24px; color: #606060; }
            .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox i.icon-scanner { background: url("../../images/icons/dwt/scanner.svg") center center no-repeat; }
            .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox i.icon-UVC { background: url("../../images/icons/dwt/UVC.svg") center center no-repeat; }
            .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox i.icon-mobile { background: url("../../images/icons/dwt/mobile-camera.svg") center center no-repeat; }

/* dwt overview new style 2022/09/26 ~ 27 */
#WebTwainOverview .whyChooseDwt { margin-top: 120px; }
    #WebTwainOverview .whyChooseDwt p { margin: 0 0; }
        #WebTwainOverview .whyChooseDwt p.title { font-size: 30px; font-family: Oswald-Regular; text-align: center; margin-bottom: 80px; }
    #WebTwainOverview .whyChooseDwt .reasons { display: flex; justify-content: space-between; flex-wrap: wrap; height: auto; }
        #WebTwainOverview .whyChooseDwt .reasons > div { width: 500px; height: 320px; background-color: #F5F5F5; padding: 52px 34px; }
        #WebTwainOverview .whyChooseDwt .reasons div p:first-child { font-size: 30px; font-family: Oswald-Regular; margin-bottom: 38px; text-align: center; }
        #WebTwainOverview .whyChooseDwt .reasons > div > div:nth-child(2) { display: flex; justify-content: space-between; align-items: flex-start; }
        #WebTwainOverview .whyChooseDwt .reasons > div:first-child > div img { transform: scale(80%); }
        #WebTwainOverview .whyChooseDwt .reasons > div:nth-child(2) > div img:first-child { width: 89px; }
        #WebTwainOverview .whyChooseDwt .reasons > div:nth-child(2) > div img:nth-child(2) { width: 113px; }
        /*#WebTwainOverview .whyChooseDwt .reasons > div:last-child > div img { transform: scale(90%); }*/
        #WebTwainOverview .whyChooseDwt .reasons > div > div img { width: 31%; object-fit: contain; }
        #WebTwainOverview .whyChooseDwt .reasons > div:last-child > div img { max-width: 131px; }
        #WebTwainOverview .whyChooseDwt .reasons > div > div p { width: 64%; }
        #WebTwainOverview .whyChooseDwt .reasons > div:nth-child(2) > div p { width: 33%; }

.basicStrength .strengthLine .strengthImg { position: relative; }
    .basicStrength .strengthLine .strengthImg .whitePlayBtn { top: 50%; left: 50%; transform: translate(-50%,-50%); border: 2px solid #fe8e14; background: #fe8e1440; }
        .basicStrength .strengthLine .strengthImg .whitePlayBtn::after { border-left-color: #fe8e14; }

.dwtStrength { margin-top: 140px; }
    .dwtStrength .strengthContainer { height: auto; position: relative; padding: 60px 0; }
        .dwtStrength .strengthContainer ul.switch { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; }
            .dwtStrength .strengthContainer ul.switch li { white-space: nowrap; font-family: Oswald-Regular; color: white; font-size: 24px; display: inline-block; background-color: #999999; width: 400px; height: 55px; line-height: 55px; text-align: center; cursor: pointer; }
                .dwtStrength .strengthContainer ul.switch li.on { background-color: #323234; }
        .dwtStrength .strengthContainer .strengthContent:not(:first-child) { display: none; }
        .dwtStrength .strengthContainer .strengthContent { height: 100%; position: relative; display: flex; align-items: center; z-index: 1; }
            .dwtStrength .strengthContainer .strengthContent .strengthBanner { position: relative; z-index: 1; width: 50%; }
                .dwtStrength .strengthContainer .strengthContent .strengthBanner picture { position: relative; }
            .dwtStrength .strengthContainer .strengthContent .strengthDesc { position: relative; z-index: 1; width: 40%; }
                .dwtStrength .strengthContainer .strengthContent .strengthDesc a { margin-top: 20px; display: inline-block; }
                .dwtStrength .strengthContainer .strengthContent .strengthDesc p.title { font-size: 30px; font-family: Oswald-Regular; }
                .dwtStrength .strengthContainer .strengthContent .strengthDesc p.subTitleRegular { font-size: 20px; font-family: Oswald-Regular; margin-top: 32px; }
                .dwtStrength .strengthContainer .strengthContent .strengthDesc p.subTitle { font-size: 18px; margin: 32px 0; font-weight: bold; }
                .dwtStrength .strengthContainer .strengthContent .strengthDesc ul li { font-size: 18px; position: relative; padding: 0 0 0 24px; margin: 0 0 10px 0; }
                    .dwtStrength .strengthContainer .strengthContent .strengthDesc ul li::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fe8e14; /*border-style: solid; border-width: 6px 0 6px 12px; border-color: transparent transparent transparent #fe8e14;*/ position: absolute; transform: translateY(-50%); left: 0; top: 13px; }
            .dwtStrength .strengthContainer .strengthContent .strengthBanner img { width: 650px; }
        .dwtStrength .strengthContainer .bg { position: absolute; height: 100%; width: 95%; background-color: #F5F5F5; top: 0; right: 0; z-index: 0; }
.dwtAdv.dwtStrength .strengthContainer .strengthContent:nth-child(2) .strengthDesc p.title { margin: 0 0 50px 0; }

.dwtFeature { margin-top: 135px; }
    .dwtFeature .featureContainer { height: 485px; position: relative; overflow: hidden; }
        .dwtFeature .featureContainer .featureBg { position: absolute; background: #F5F5F5; height: 100%; left: 0; width: 64%; }
            .dwtFeature .featureContainer .featureBg picture { position: absolute; top: 50%; left: 47%; transform: translate(-50%, -50%); }
            .dwtFeature .featureContainer .featureBg.video picture { position: absolute; top: 50%; transform: translateY(-50%); right: 10%; left: auto; }
            .dwtFeature .featureContainer .featureBg.video img { width: 548px; }
        .dwtFeature .featureContainer.rtl .featureBg { right: 0; left: auto; }
        .dwtFeature .featureContainer .featureDesc { position: absolute; width: 41%; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; }
        .dwtFeature .featureContainer.rtl .featureDesc { width: 55%; left: 0; right: auto; }
        .dwtFeature .featureContainer .featureDesc p.title { font-size: 30px; font-family: Oswald-Regular; }
        .dwtFeature .featureContainer .featureDesc p.subTitle { margin: 20px 0 15px 0; font-weight: bold; }
        .dwtFeature .featureContainer .featureDesc ul li { font-size: 16px; margin: 14px 0 0 0; padding: 0 0 0 24px; position: relative; }
            .dwtFeature .featureContainer .featureDesc ul li::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fe8e14; /*border-style: solid; border-width: 6px 0 6px 12px; border-color: transparent transparent transparent #fe8e14;*/ position: absolute; transform: translateY(-50%); left: 0; top: 13px; }
        .dwtFeature .featureContainer .featureDesc a { margin-top: 30px; display: inline-block; }
        .dwtFeature .featureContainer .featureBg i.playBtn { top: 50%; left: 50%; transform: translate(-50%,-50%); border: 2px solid #fe8e14; background: #fe8e1440; display: inline-block; width: 30%; height: 0; padding-bottom: 30%; position: absolute; border-radius: 50%; cursor: pointer; }
            .dwtFeature .featureContainer .featureBg i.playBtn::after { content: ""; border: 1px solid transparent; border-left-color: #fe8e14; border-width: 40px 0 40px 75px; display: inline-block; width: 0; height: 0; top: 50%; left: 50%; position: absolute; transform: translate(-33%, -50%) }
        .dwtFeature .featureContainer .wrapper { width: 95%; height: 100%; position: absolute; right: 0; }

/* margin change 2022/09/28 */
.dwtOverviewReliable { margin-top: 120px; }

.logoTitle { font-size: 16px; color: #606060; width: 215px; display: inline-block; vertical-align: middle; }

/* dwt overview new style 11/09/2022 by Frank, tried BEM */
#WebTwainMain h2 { font-size: 36px; font-family: Oswald-Light; }
i.playBtn { top: 50%; left: 50%; transform: translate(-50%,-50%); border: 2px solid #fe8e14; background: #fe8e1440; display: inline-block; width: 30%; height: 0; padding-bottom: 30%; position: absolute; border-radius: 50%; cursor: pointer; }
    i.playBtn::after { content: ""; border: 1px solid transparent; border-left-color: #fe8e14; border-width: 40px 0 40px 75px; display: inline-block; width: 0; height: 0; top: 50%; left: 50%; position: absolute; transform: translate(-33%, -50%) }

#dwtOverviewFeature { margin-bottom: 100px; }
.whyChooseDwt ul { display: flex; justify-content: space-around; padding-left: 31%; }
    .whyChooseDwt ul li { display: block; width: 27px; height: 27px; }
li.phone { background: url(../../images/icons/dbr/Phone.svg) no-repeat center; background-size: contain; }
li.email { background: url(../../images/icons/dbr/email.svg) no-repeat center; background-size: contain; }
li.live-chat { background: url(../../images/icons/dbr/live-chat-circle.svg) no-repeat center; background-size: contain; }
li.screen-share { background: url(../../images/icons/dbr/screen-share-meeting.svg) no-repeat center; background-size: contain; }
#BarcodeReaderOverview .whyChooseDbr .reasons > div:last-child > div:nth-child(2) { align-items: flex-start; }

.customTooltip .arrow { display: none; }

.customTooltip .tooltip-inner { box-shadow: 0px 3px 6px #00000029; background-color: white; font-family: OpenSans-Regular; font-size: 18px; padding: 28px; width: fit-content; max-width: 550px; color: black; opacity: 1; border: 1px solid #EEEEEE; }
    .customTooltip .tooltip-inner p { margin: 0; }

#WebTwainOverview .basicFeature .featureBox .featureBoxBottom { padding: 20px 30px; }
    #WebTwainOverview .basicFeature .featureBox .featureBoxBottom .title { font-size: 24px; }

/* DE DWT Overview */
#WebTwainMain.de-dwt-overview .dwtOverviewBanner .btns .d-btn:nth-child(3) { margin-top: 30px; }
#WebTwainMain.de-dwt-overview .basicBanner { height: 600px; }

#WebTwainMain.de-dwt-overview .whyChooseDwt .reasons > div { height: 360px; }
    #WebTwainMain.de-dwt-overview .whyChooseDwt .reasons > div > div p { word-break: break-word; }
#WebTwainMain.de-dwt-overview .whyChooseDwt ul { margin-top: 20px; }

/* DWT overview add-ons */
#WebTwainOverview .addon > p { width: 65%; }
#WebTwainOverview .addon .addon-list { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0 56px; }
    #WebTwainOverview .addon .addon-list .addon-item { transition: all .2s ease-in-out; display: block; background-color: #F5F5F5; padding: 62px 40px 60px 40px; position: relative; }
        /* #WebTwainOverview .addon .addon-list .addon-item:hover { transform: translate(8px, -8px); box-shadow: -8px 8px 0 0 black; color: #606060; }*/
        #WebTwainOverview .addon .addon-list .addon-item .addon-icon { width: 80px; height: 80px; border: 2px solid #323234; background-color: white; position: absolute; top: 0; transform: translateY(-50%); background-position: center; background-repeat: no-repeat; }
            #WebTwainOverview .addon .addon-list .addon-item .addon-icon.icon-pdf { background-image: url(../../images/icons/dwt/icon-pdf-rasterizer.svg); }
            #WebTwainOverview .addon .addon-list .addon-item .addon-icon.icon-barcode { background-image: url(../../images/icons/dwt/icon-barcode-recognition.svg); }
            #WebTwainOverview .addon .addon-list .addon-item .addon-icon.icon-remote { background-image: url(../../images/icons/dwt/icon-remote-scan.svg); }
            #WebTwainOverview .addon .addon-list .addon-item .addon-icon.icon-camera { background-image: url(../../images/icons/dwt/icon-camera.svg); background-size: 66%; }
            #WebTwainOverview .addon .addon-list .addon-item .addon-icon.icon-webcam { background-image: url(../../images/icons/dwt/icon-webcam.svg); }
            #WebTwainOverview .addon .addon-list .addon-item .addon-icon.icon-annotation { background-image: url(../../images/icons/dwt/annotation.svg); }
        #WebTwainOverview .addon .addon-list .addon-item p:last-child { position: absolute; bottom: 30px; }

#WebTwainOverview .basicBanner { background: #323234; }
    #WebTwainOverview .basicBanner .intro { width: 40%; }
    #WebTwainOverview .basicBanner .bannerImg { top: 50px; }

/* DWT overview features style 2024/04/25 */
.DWTFeatures { }
    .DWTFeatures > h2 + p { max-width: 1000px; margin: 20px auto; }
    .DWTFeatures .abstracts { margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(3, minmax(auto, 420px)); grid-gap: 0 85px; justify-content: center; }
        .DWTFeatures .abstracts div { display: flex; align-items: center; gap: 16px; }
        .DWTFeatures .abstracts p { flex: 1; margin-bottom: 0; font-size: 16px; }
        .DWTFeatures .abstracts div::before { content: ""; display: block; background-repeat: no-repeat; background-size: contain; background-position: center; }
        .DWTFeatures .abstracts div:first-child::before { background-image: url(../../images/DWT/scanner.svg); width: 51px; height: 56px; }
        .DWTFeatures .abstracts div:nth-child(2)::before { background-image: url(../../images/DWT/browser.svg); width: 56px; height: 56px; }
        .DWTFeatures .abstracts div:last-child::before { background-image: url(../../images/DWT/device.svg); width: 58px; height: 56px; }

    .DWTFeatures .features-swiper-container { overflow-x: hidden; display: flex; justify-content: space-between; height: 460px; padding-bottom: 20px; }
        .DWTFeatures .features-swiper-container .features-swiper-prev { background: linear-gradient(to left, transparent, white); }
        .DWTFeatures .features-swiper-container .features-swiper-next { background: linear-gradient(to right, transparent, white); }
        .DWTFeatures .features-swiper-container .switch { cursor: pointer; flex: 1; height: 100%; z-index: 2; }
        .DWTFeatures .features-swiper-container .features-swiper { width: 1323px; margin: 0 auto; }
            .DWTFeatures .features-swiper-container .features-swiper .swiper-slide { transition: all .2s; height: 100%; background-color: #F5F5F5; box-shadow: 0 6px 10px #00000029; }
                .DWTFeatures .features-swiper-container .features-swiper .swiper-slide.swiper-slide-prev { transform: scaleY(0.9); }
                    .DWTFeatures .features-swiper-container .features-swiper .swiper-slide.swiper-slide-prev .slide-content { justify-content: flex-end; padding: 0 20px; }
                        .DWTFeatures .features-swiper-container .features-swiper .swiper-slide.swiper-slide-prev .slide-content > img { order: 2; margin: 0; height: 260px; width: auto; }
                        .DWTFeatures .features-swiper-container .features-swiper .swiper-slide.swiper-slide-prev .slide-content > div { order: 1; display: none; }
                .DWTFeatures .features-swiper-container .features-swiper .swiper-slide.swiper-slide-next { transform: scaleY(0.9); }
                    .DWTFeatures .features-swiper-container .features-swiper .swiper-slide.swiper-slide-next .slide-content { justify-content: flex-start; padding: 0 20px; }
                        .DWTFeatures .features-swiper-container .features-swiper .swiper-slide.swiper-slide-next .slide-content > img { height: 260px; width: auto; }
                        .DWTFeatures .features-swiper-container .features-swiper .swiper-slide.swiper-slide-next .slide-content > div { display: none; }
                .DWTFeatures .features-swiper-container .features-swiper .swiper-slide .slide-content { height: 100%; display: flex; justify-content: center; align-items: center; padding: 0 80px; }
                    .DWTFeatures .features-swiper-container .features-swiper .swiper-slide .slide-content img { margin-right: 100px; object-fit: contain; }
                    .DWTFeatures .features-swiper-container .features-swiper .swiper-slide .slide-content p { font-size: 16px; }
                    .DWTFeatures .features-swiper-container .features-swiper .swiper-slide .slide-content b { display: block; font-family: OpenSans-Semibold; font-size: 18px; }
                    .DWTFeatures .features-swiper-container .features-swiper .swiper-slide .slide-content strong { font-family: OpenSans-Semibold; }
                    .DWTFeatures .features-swiper-container .features-swiper .swiper-slide .slide-content ul li { font-size: 16px; padding-left: 19px; position: relative }
                        .DWTFeatures .features-swiper-container .features-swiper .swiper-slide .slide-content ul li::before { content: ""; position: absolute; left: 0; top: 8px; display: block; width: 8px; height: 8px; background-color: #fe8e14; border-radius: 50%; vertical-align: middle; margin-right: 10px; }
                        .DWTFeatures .features-swiper-container .features-swiper .swiper-slide .slide-content ul li:not(:last-child) { margin-bottom: 7px; }
    .DWTFeatures .features-swiper-pagination { margin-top: 20px; text-align: center; }
        .DWTFeatures .features-swiper-pagination .swiper-pagination-bullet { cursor: pointer; border-radius: initial; width: 40px; height: 9px; background-color: #323234; }
            .DWTFeatures .features-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #CCCCCC; }
/* end */
#dynamsoft-header #mdHeader { background: white; }

#WebTwainOverview .small-logo-list { display: none; flex-wrap: wrap; justify-content: center; align-items: center; gap: 15px 30px; }

.customers-stories { padding: 0 100px; display: flex; align-items: center; gap: 20px 75px; justify-content: center; flex-wrap: wrap; }
    .customers-stories img { object-fit: contain; filter: grayscale(1); }
        .customers-stories img:hover { filter: grayscale(0); }
    .customers-stories > p { color: #606060; font-size: 16px; }
    .customers-stories > a[href='javascript:;'] { cursor: default; }

#WebTwainOverview .supportedSymbologies { display: none; }
#WebTwainOverview .dbr-accordion { --min-height: 625px; }

#dynamsoft-header #mdHeader { background-color: #323232; }
    #dynamsoft-header #mdHeader #mdMenu > li > a { color: white; }
#cp-header .header-visitor a:link, .header-visitor a:visited, .header-visitor a:hover { color: white; }
#overall-header .ds-logo { display: block; background: url(../../images/dynamsoft-logos/logo-dynamsoft-white.svg) no-repeat 0; }
#cp-header .action-buttons a:hover { box-shadow: -4px 4px 0 0 white; }
#cp-header .userbox .user-profile { background-color: #000000; }

#WebTwainOverview .btn-container { padding: 30px; background-color: #3b3b3b; display: inline-block; }
    #WebTwainOverview .btn-container p { font-size: 18px; }

@media (min-width: 1680px) {
    #WebTwainOverview .basicBanner { height: 480px; }
        #WebTwainOverview .basicBanner .bannerImg { width: 620px; height: 380px; top: 50px; }

    .dwtOverviewVolume { margin-top: 80px; }
        .dwtOverviewVolume .dwtDeviceWrapper { padding: 40px 50px; }
            .dwtOverviewVolume .dwtDeviceWrapper .title { display: inline-block; width: 230px; margin-right: 100px; margin-bottom: 0; color: #323234; font-size: 30px; line-height: 40px; vertical-align: top; }
            .dwtOverviewVolume .dwtDeviceWrapper .icon-wrapper i { width: 100%; font-size: 48px; margin-bottom: 10px; }
            .dwtOverviewVolume .dwtDeviceWrapper .icon-wrapper { font-size: 16px; width: 100px; }
                .dwtOverviewVolume .dwtDeviceWrapper .icon-wrapper:last-child { margin-right: 10px; }
            .dwtOverviewVolume .dwtDeviceWrapper .spaceLine { height: 78px; border-right: 1px solid #707070; }
            .dwtOverviewVolume .dwtDeviceWrapper .platform-wrapper { display: inline-block; vertical-align: top; font-size: 30px; color: #323234; margin-top: 20px; }

    .dwtOverviewSupports .supportsContainer .supportPlatforms p:first-child { font-size: 30px; }

    /* dwt overview new style 2022/09/26 ~ 27 */
    .dwtAdv.dwtStrength .strengthContainer .strengthContent .strengthBanner { background-color: #E4E4E4; width: 767px; margin-right: 70px; height: 400px; display: flex; justify-content: center; align-items: center; }
        .dwtAdv.dwtStrength .strengthContainer .strengthContent .strengthBanner img { width: 551px; }
}

@media (max-width: 1679px) {
    #WebTwainOverview .dbr-accordion { gap: 20px 80px; }
        #WebTwainOverview .dbr-accordion .accordion > div { padding: 15px 0; }
            #WebTwainOverview .dbr-accordion .accordion > div > p { font-size: 16px; }
            #WebTwainOverview .dbr-accordion .accordion > div ul.fontRegular > li { line-height: 20px; }
        #WebTwainOverview .dbr-accordion .image > img { max-width: 480px; }

    .customers-stories { gap: 20px 60px; padding: 0 20px; }

    /* DWT overview features style 2024/04/25 */
    .DWTFeatures .abstracts { grid-template-columns: repeat(3, 1fr); }
    .DWTFeatures .features-swiper-container .features-swiper { width: 1000px; margin: 0 auto; }
        .DWTFeatures .features-swiper-container .features-swiper .swiper-slide .slide-content { padding: 20px 50px; }
            .DWTFeatures .features-swiper-container .features-swiper .swiper-slide .slide-content img { width: 290px; height: 200px; margin-right: 50px; }
    /* end */
    #WebTwainOverview .addon .addon-list { grid-gap: 0 20px; }
        #WebTwainOverview .addon .addon-list .addon-item { padding: 62px 20px 45px 20px; }
            #WebTwainOverview .addon .addon-list .addon-item .addon-icon { width: 70px; height: 70px; }
            #WebTwainOverview .addon .addon-list .addon-item p:last-child { bottom: 20px; }

    /* DE DWT Overview */
    #WebTwainMain.de-dwt-overview .basicBanner { height: 500px; }

    #WebTwainOverview .basicFeature .featureBox .featureBoxBottom { padding: 20px 15px; }
        #WebTwainOverview .basicFeature .featureBox .featureBoxBottom .title { font-size: 18px; }
    /* dwt overview new style 11/09/2022 by Frank */
    i.playBtn::after { border-width: 30px 0 30px 60px; }

    .dwtOverviewSwiper i.arrow-left { width: 40px; }
    .dwtOverviewSwiper i.arrow-right { width: 40px; }

    .basicBanner h2, .basicBanner .h2 { width: 510px; }
    .dwtOverviewAction { height: 300px; }
    .basicCustomers .customer-logos li { margin-right: 15px; }
    .basicPowerful .powerfulLeft { padding-left: 94px; padding-top: 160px; padding-right: 94px; }
    .whitePlayBtn::after { border-top: 40px solid transparent; border-left: 75px solid #fe8e14; border-bottom: 40px solid transparent; left: 50%; top: 50%; transform: translate(-30%, -48%); }
    .actionRight { margin-top: -60px; width: 500px; margin-left: 40px; }
    .actionLeft { width: 40%; margin-left: 100px; margin-top: 40px; }
    .basicReliable .functionBox { min-height: 310px; padding: 55px 55px 0 45px; }
        .basicReliable .functionBox .icon { left: 45px; }
    .f24 { font-size: 20px; }
    .icon-wrapper { display: inline-block; margin-right: 0px; vertical-align: top; text-align: center; }
    .platform-wrapper { font-size: 22px; }
        .platform-wrapper span { margin-left: 6px; }
    .basicPowerful .powerfulList li { min-height: 250px; }

    .powerfulList li a.textUpperCase { position: absolute; bottom: 30px; }

    #WebTwainResource .basicResourceList li div { max-width: 300px; height: 90px; line-height: 90px; margin: 0 auto; text-align: center; font-size: 24px; cursor: pointer; }
    #WebTwainResource .basicFAQBox .faqList > li .question { font-size: 20px; }
    #WebTwainResource .basicResourceList li span.icon { width: 70px; height: 70px; left: 0px; top: 10px; }

    .dwtOverviewSupports .supportsContainer .supportPlatforms { padding: 0 45px; }
    .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox span { font-size: 18px; }
    .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox i.icon-scanner, .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox i.icon-UVC { background-size: 55px; }
    .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox i.icon-mobile { background-size: 36px; }

    /* OverviewSwiper */
    .basicSwiper .swiper-slide .slide-left .personWords { font-size: 16px; line-height: 30px; }
    .basicSwiper .swiper-slide .slide-left { width: 650px; padding-left: 60px; }
    .dwtOverviewSwiper .slide-right { width: auto; padding-right: 60px; }
        .dwtOverviewSwiper .slide-right div { width: 328px; height: 224px; }

    .orangeAngelList li { font-size: 14px; line-height: 20px; }
        .orangeAngelList li:before { border-width: 4px 10px 4px 0; left: -15px; top: 7px; }
    .orangeAngelList.inlineBlockList li { margin-right: 7px; }

    .dwtOverviewVolume { margin-top: 80px; }
        .dwtOverviewVolume .dwtDeviceWrapper { padding: 40px 40px; }
            .dwtOverviewVolume .dwtDeviceWrapper .title { display: inline-block; width: 190px; margin-right: 40px; margin-bottom: 0; color: #323234; font-size: 24px; line-height: 36px; vertical-align: top; }
            .dwtOverviewVolume .dwtDeviceWrapper .icon-wrapper i { width: 100%; font-size: 40px; margin-bottom: 10px; }
            .dwtOverviewVolume .dwtDeviceWrapper .icon-wrapper { font-size: 14px; width: 80px; }
                .dwtOverviewVolume .dwtDeviceWrapper .icon-wrapper:last-child { margin-right: 0; }
            .dwtOverviewVolume .dwtDeviceWrapper .spaceLine { height: 78px; border-right: 1px solid #707070; margin: 0 20px; }
            .dwtOverviewVolume .dwtDeviceWrapper .platform-wrapper { display: inline-block; vertical-align: top; font-size: 24px; color: #323234; margin-top: 20px; }


    .dwtOverviewSupports .supportsContainer .supportPlatforms p:first-child { font-size: 24px; }
    .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox { width: 150px; height: 150px; }
    .dwtOverviewSupports .supportsContainer .scanDevices { padding: 0 10px 0 0; }

    /* dwt overview new style 2022/09/26 ~ 27 */
    #WebTwainOverview .whyChooseDwt .reasons > div { width: 32%; height: 275px; padding: 30px; }
    #WebTwainOverview .whyChooseDwt .reasons div p:first-child { font-size: 22px; }
    #WebTwainOverview .whyChooseDwt .reasons > div:nth-child(2) > div img:first-child { width: 65px; }
    #WebTwainOverview .whyChooseDwt .reasons > div:nth-child(2) > div img:nth-child(2) { width: 80px; }

    .dwtStrength .strengthContainer { height: auto; padding: 0 0; }
        .dwtStrength .strengthContainer .strengthContent { height: auto; padding: 70px 0; }
        .dwtStrength .strengthContainer ul.switch li { font-size: 18px; height: 45px; line-height: 45px; width: auto; padding: 0 40px; }
        .dwtStrength .strengthContainer .strengthContent .strengthBanner img { width: 490px; }
        .dwtStrength .strengthContainer .strengthContent .strengthDesc p.title { font-size: 30px; }
        .dwtStrength .strengthContainer .strengthContent .strengthDesc p.subTitle { font-size: 16px; margin: 20px 0; }
        .dwtStrength .strengthContainer .strengthContent .strengthDesc ul li { font-size: 16px; }

    .dwtAdv.dwtStrength .strengthContainer .bg { width: 100%; }

    .dwtFeature .featureContainer.rtl .featureDesc { width: 47%; }
    .dwtFeature .featureContainer .featureDesc a { margin: 20px 0 0 0; }
    .dwtFeature .featureContainer .featureBg picture { width: 70%; }
    .dwtFeature .featureContainer .featureBg img { max-width: 100%; }

    #dwtOverviewFeature { margin-top: 100px; }
}

@media (max-width: 1399px) {
    .customers-stories { gap: 20px 40px; }

    #WebTwainOverview .d-btn-wrap .d-btn { --font-size: 18px; padding: 0 20px; }
}

@media (max-width: 1199px) {
    #WebTwainOverview .btn-container { padding: 0; background-color: transparent; }
    /* DWT overview features style 2024/04/25 */
    .DWTFeatures .abstracts { grid-gap: 0 40px; }
    .DWTFeatures .features-swiper-container .features-swiper { width: 700px; }
        .DWTFeatures .features-swiper-container .features-swiper .swiper-slide .slide-content { padding: 20px 50px; }
            .DWTFeatures .features-swiper-container .features-swiper .swiper-slide .slide-content img { display: none; }

    /* end */

    #WebTwainOverview .basicBanner { height: auto; }
    #WebTwainOverview .addon .addon-list { grid-template-columns: repeat(2, 1fr); grid-gap: 70px 50px; }

    #WebTwainOverview .basicFeature .featureBox .featureBoxBottom .title { height: 65px; }
    #WebTwainOverview .basicFeature .featureBox .featureBoxBottom .cnt { height: 120px; }
    /* dwt overview new style 11/09/2022 by Frank */
    #WebTwainMain h2 { font-size: 32px; }
    i.playBtn::after { border-width: 25px 0 25px 50px; }

    .dwtOverviewSwiper i.arrow-left { width: 35px; }
    .dwtOverviewSwiper i.arrow-right { width: 35px; }

    .logoTitle { width: 20%; }

    .basicCustomers .customer-logos li { margin-right: 10px; zoom: 0.8; }
    .basicPowerful .powerfulList li { min-height: 250px; }
    .basicPowerful .powerfulLeft { padding-left: 80px; padding-top: 160px; padding-right: 80px; }
    .basicReliable .functionBox { min-height: 300px; padding: 45px 25px 0 25px; }
        .basicReliable .functionBox .icon { left: 25px; }
    .dwtOverviewAction { height: 370px; }
    .basicPowerful .powerfulList li { min-height: 250px; }
    .whitePlayBtn::after { border-top: 30px solid transparent; border-left: 55px solid #fe8e14; border-bottom: 30px solid transparent; left: 50%; top: 50%; transform: translate(-30%, -48%); }
    .actionLeft { width: 40%; margin-left: 70px; margin-top: 60px; }
    .actionRight { margin-top: 60px; width: 450px; margin-left: 40px; }
    .basicVolume p { font-size: 16px; }
    .icon-wrapper { margin-right: -8px; }
    .platform-wrapper { font-size: 18px; }
        .platform-wrapper span { margin-left: 5px; }
    ul.volumeList .mt50 { margin-top: 20px; }
    .basicVolume .volumeList li { width: 180px; margin-right: 20px; }
    .basicVolume .volumeLeft h3 { padding-right: 50px; }
    .f24 { font-size: 20px; }

    #WebTwainResource .basicResourceList li div { max-width: 250px; height: 80px; line-height: 80px; }
    #WebTwainResource .basicResourceList li span.icon i { width: 40px; height: 40px; }
    #WebTwainResource .basicResourceList li span.icon { width: 60px; height: 60px; }

    .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox { width: 135px; height: 135px; }

    .dwtFeature .featureContainer { height: 515px; }

    /* OverviewSwiper */
    .slide-block { height: 100%; display: block; }
    .dwtOverviewSwiper .swiper-slide .slide-left { width: 570px; display: table-cell; vertical-align: middle; height: 100%; float: none; }
    .slide-right.hide-sm.hide-md { display: table-cell; vertical-align: middle; height: 100%; float: none; padding-right: unset; padding-left: 40px; }
    .dwtOverviewSwiper .slide-right div { zoom: 0.8; }

    .orangeAngelList li { font-size: 14px; line-height: 20px; }
        .orangeAngelList li:before { border-width: 4px 10px 4px 0; left: -15px; top: 7px; }

    .dwtOverviewVolume { margin-top: 80px; }
        .dwtOverviewVolume .dwtDeviceWrapper { padding: 30px 40px; }
            .dwtOverviewVolume .dwtDeviceWrapper .title { display: inline-block; width: 150px; margin-right: 0px; margin-bottom: 0; color: #323234; font-size: 20px; line-height: 36px; vertical-align: top; }
            .dwtOverviewVolume .dwtDeviceWrapper .icon-wrapper i { width: 100%; font-size: 38px; margin-bottom: 10px; }
            .dwtOverviewVolume .dwtDeviceWrapper .icon-wrapper { font-size: 14px; width: 75px; }
            .dwtOverviewVolume .dwtDeviceWrapper .spaceLine { height: 70px; border-right: 1px solid #707070; margin: 0 20px; }
            .dwtOverviewVolume .dwtDeviceWrapper .platform-wrapper { display: inline-block; vertical-align: top; font-size: 20px; color: #323234; margin-top: 20px; }

    /* dwt overview new style 2022/09/26 ~ 27 */
    #WebTwainOverview .whyChooseDwt .reasons > div { padding: 20px; height: 285px; }
    #WebTwainOverview .whyChooseDwt .reasons div p:first-child { font-size: 18px; }
    #WebTwainOverview .whyChooseDwt .reasons > div > div img { width: 30%; }

    .dwtStrength .strengthContainer .strengthContent { padding: 60px 0 40px 0; }
        .dwtStrength .strengthContainer .strengthContent .strengthBanner img { width: 420px; }
        .dwtStrength .strengthContainer .strengthContent .strengthDesc { width: 45%; }
            .dwtStrength .strengthContainer .strengthContent .strengthDesc p.title { font-size: 26px; }

    .dwtFeature .featureContainer .featureDesc p.title { font-size: 22px; }

    /* margin change 2022/09/28 */
    .dwtOverviewReliable { margin-top: 70px; }
}

@media (max-width: 1199px) and (min-width: 992px) {
    #WebTwainOverview .whyChooseDwt .reasons > div:nth-child(2) > div:nth-child(2) { display: grid; justify-content: unset; align-items: unset; }
        #WebTwainOverview .whyChooseDwt .reasons > div:nth-child(2) > div:nth-child(2) img { grid-column: 1 / 1; grid-row: 1 / 1; }
            #WebTwainOverview .whyChooseDwt .reasons > div:nth-child(2) > div:nth-child(2) img:nth-child(2) { margin-top: 90px }
        #WebTwainOverview .whyChooseDwt .reasons > div:nth-child(2) > div:nth-child(2) p { grid-column: 2 / 2; grid-row: 1 / 2; width: 70%; margin-left: 30px; }
}

@media (max-width: 991px) {
    #WebTwainOverview .btn-container p { font-size: 16px; }

    #WebTwainOverview .dbr-accordion .image > img { max-width: 100%; }

    #WebTwainOverview .small-logo-list { display: flex; }

    /* DWT overview features style 2024/04/25 */
    .DWTFeatures .abstracts { grid-template-columns: 1fr; grid-gap: 30px; }
    .DWTFeatures .features-swiper-container { height: auto; }
        .DWTFeatures .features-swiper-container .features-swiper { width: 90%; }
            .DWTFeatures .features-swiper-container .features-swiper .swiper-slide .slide-content { padding: 30px; }
        .DWTFeatures .features-swiper-container .switch { display: none; }
        .DWTFeatures .features-swiper-container .features-swiper .swiper-slide.swiper-slide-prev { transform: none; }
        .DWTFeatures .features-swiper-container .features-swiper .swiper-slide.swiper-slide-next { transform: none; }
    /* end */
    #WebTwainOverview .basicBanner { height: auto; }
        #WebTwainOverview .basicBanner .intro { width: 100%; }
    #WebTwainOverview .addon > p { width: 100%; }

    /* DE DWT Overview */
    #WebTwainMain.de-dwt-overview .whyChooseDwt .reasons > div { height: fit-content; }

    #WebTwainOverview .basicFeature .featureBox .featureBoxBottom .title { height: auto; }
    #WebTwainOverview .basicFeature .featureBox .featureBoxBottom .cnt { height: auto; }
    /* dwt overview new style 11/09/2022 by Frank */
    #WebTwainMain h2 { font-size: 28px; }
    i.playBtn::after { border-width: 40px 0 40px 70px; }

    .dwtOverviewSwiper i.arrow-left { display: none; }
    .dwtOverviewSwiper i.arrow-right { display: none; }


    .logoTitle { width: 100%; margin-bottom: 40px; text-align: center; }

    .dwtFeature, #WebTwainOverview .whyChooseDwt { margin-top: 80px; }
    .dwtStrength { margin-top: 60px; }

    .basicSwiper .ant-carousel .slick-slide { height: auto; }
    .basicVolume .volumeList li { width: 32.3%; margin-right: 0rem; padding: 0 30px; }
    .dwtOverviewStrength { margin-top: 100px; }
    .basicReliable .functionBox { margin-top: 60px; }
    .basicBanner { height: 400px; }
    .basicReliable .functionList { margin-top: 50px; }
    .mt150 { margin-top: 80px; }
    .dwtDeviceWrapper p { text-align: center; display: block; width: 100%; }

    .browser-wrapper { width: 100%; text-align: center; }

    .icon-wrapper i { font-size: 45px; }

    .icon-wrapper { margin-right: 41px; }

    .platform-wrapper { font-size: 25px; margin-top: 30px; }

        .platform-wrapper span { margin-left: 55px; }
    .basicVolume p { font-size: 14px; }
    .actionLeft { width: 100%; margin: auto; margin-top: 90px; /* margin: auto; */ }

    #WebTwainResource .basicFAQBox .faqList > li { padding-right: 40px; }
    #WebTwainResource .basicResourceList li div { max-width: 200px; height: 60px; line-height: 60px; font-size: 18px; }
    #WebTwainResource .basicResourceList li span.icon { width: 50px; height: 50px; left: -4px; top: 5px; }
        #WebTwainResource .basicResourceList li span.icon i { width: 30px; height: 30px; }
    #WebTwainResource .basicFAQBox { margin-top: 60px; }
    #WebTwainResource .basicResourceList { margin-top: 50px; }

    .dwtOverviewSupports { background-color: #F5F5F5; }
        .dwtOverviewSupports .supportsContainer { flex-direction: column; height: auto; padding: 40px 0px; }
            .dwtOverviewSupports .supportsContainer .supportPlatforms, .dwtOverviewSupports .supportsContainer .scanDevices { width: 100%; }
            .dwtOverviewSupports .supportsContainer .scanDevices { margin-top: 40px; }


    /* OverviewSwiper */
    .dwtOverviewSwiper.basicSwiper.dwtOverviewSwiper { margin-top: 0; }
    .dwtOverviewSwiper.basicSwiper .swiper-slide { height: auto; }
    .dwtOverviewSwiper .slide-left { min-height: 340px; width: 100%; }
    .dwtOverviewSwiper.basicSwiper .swiper-slide .slide-right { width: 100%; padding-top: 40px; }
    .dwtOverviewSwiper .swiper-slide .slide-left { width: 100%; padding: 0px; }
    .basicCustomers .swiper-slide i.company-logo { opacity: .6; }
    .dwtOverviewSwiper .slide-left { width: 100%; }
    .dwtOverviewSwiper .slide-right { width: auto; margin: auto; float: none; display: inline-block; padding-bottom: 50px; padding-right: 0px; }
        .dwtOverviewSwiper .slide-right div { margin: auto; }
        .dwtOverviewSwiper .slide-right.hide-md { display: none; }
    .dwtOverviewSwiper .custom-slick-arrow { display: none; }
    .dwtOverviewSwiper.basicSwiper .swiper-slide .slide-left .personWords .preQuote, .basicSwiper .swiper-slide .slide-right { zoom: 0.8; }
    .dwtOverviewSwiper.basicSwiper .swiper-slide .slide-left .personWords { height: auto; display: block; font-size: 14px; line-height: 24px; padding-left: 30px; position: relative; color: #323234; }
    .dwtOverviewSwiper.basicSwiper .swiper-slide .personName { font-size: 14px; line-height: 22px; }
    .dwtOverviewSwiper .slide-block { height: auto; display: block; }
    .dwtOverviewSwiper .index-pagination { position: absolute; z-index: 20; width: 90%; margin: auto; text-align: center; bottom: -20px; }
    .f24 { font-size: 18px; }

    .orangeAngelList li { font-size: 14px; line-height: 20px; }
        .orangeAngelList li:before { border-width: 4px 10px 4px 0; left: -15px; top: 7px; }

    .dwtOverviewAction { margin-bottom: 70px; }

    .dwtOverviewVolume { margin-top: 80px; background: #f5f5f5; }
        .dwtOverviewVolume .dwtDeviceWrapper { padding: 30px 40px; }
            .dwtOverviewVolume .dwtDeviceWrapper .title { display: block; width: 100%; margin-right: 0px; margin-bottom: 30px; color: #323234; font-size: 20px; line-height: 36px; vertical-align: top; text-align: center; }
            .dwtOverviewVolume .dwtDeviceWrapper .icon-wrapper i { width: 100%; font-size: 38px; margin-bottom: 10px; }
            .dwtOverviewVolume .dwtDeviceWrapper .icon-wrapper { font-size: 14px; }
            .dwtOverviewVolume .dwtDeviceWrapper .platform-wrapper { display: inline-block; vertical-align: top; font-size: 20px; color: #323234; margin-top: 20px; }

    /* dwt overview new style 2022/09/26 ~ 27 */
    #WebTwainOverview .whyChooseDwt .reasons { justify-content: center; }
        #WebTwainOverview .whyChooseDwt .reasons > div { padding: 30px; height: fit-content; width: 500px; margin-bottom: 40px; }

    .dwtStrength .strengthContainer { background-color: #F5F5F5; }
        .dwtStrength .strengthContainer .strengthContent { flex-direction: column; }
            .dwtStrength .strengthContainer .strengthContent .strengthBanner { width: 90%; }
                .dwtStrength .strengthContainer .strengthContent .strengthBanner img { width: 100%; }
            .dwtStrength .strengthContainer .strengthContent .strengthDesc { width: 90%; margin: 20px 0 0 0; }
        .dwtStrength .strengthContainer .bg { display: none; }

    .dwtAdv.dwtStrength .strengthContainer .strengthContent .strengthBanner { width: 70%; }

    .dwtFeature .featureContainer { height: auto; background: #f5f5f5; }
        .dwtFeature .featureContainer .wrapper { width: 100%; position: relative; height: auto; padding: 30px 0; }
        .dwtFeature .featureContainer .featureBg { position: relative; background: transparent; height: 300px; width: 100%; }
        .dwtFeature .featureContainer .featureDesc, .dwtFeature .featureContainer.rtl .featureDesc { position: relative; height: auto; width: 100%; transform: unset; }
        .dwtFeature .featureContainer .featureBg.video { display: none; }
            .dwtFeature .featureContainer .featureBg.video picture { right: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
        .dwtFeature .featureContainer .featureBg picture { right: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }

    #dwtOverviewFeature { margin-top: 50px; margin-bottom: 30px; }
}

@media (max-width: 991px) and (min-width: 768px) {
    #WebTwainOverview .show-md { display: inline-block !important; }
}

@media (max-width: 767px) {
    /* DWT overview features style 2024/04/25 */
    .DWTFeatures .features-swiper-container { overflow: hidden; }
        .DWTFeatures .features-swiper-container .features-swiper { width: 100%; }
            .DWTFeatures .features-swiper-container .features-swiper .swiper-slide { box-shadow: none; height: auto; }
    /* end */

    #WebTwainOverview .addon .addon-list { grid-template-columns: 1fr; grid-gap: 70px 50px; }

    /* DE DWT Overview */
    #WebTwainMain.de-dwt-overview .basicBanner { height: auto; }
    #WebTwainMain.de-dwt-overview .dwtOverviewBanner .btns .d-btn:nth-child(3) { margin: 0 0 20px 0; }

    /* dwt overview new style 11/09/2022 by Frank */
    #WebTwainMain h2 { font-size: 24px; }
    i.playBtn::after { border-width: 30px 0 30px 60px; }

    #WebTwainOverview .show-sm { display: inline-block !important; }
    .basicReliable .functionList { margin-top: 10px; }
    .dwtOverviewVolume { margin-top: 60px; }
    .basicVolume .volumeList li { padding: 0px; }
    .basicVolume .volumeList { margin-top: 30px; padding: 0px; }
    .basicVolume .volumeLeft { padding-left: 15px; padding-right: 15px; padding-top: 0; }
    .basicFeature .featureBox .featureBoxTop { height: 180px; background: #eeeeee; padding-top: 2rem; position: relative; }
    .basicBanner { height: auto; }

    .basicStrength .strengthLine .disc { /* margin-left: 100px; */ margin: auto; display: block; margin-top: 40px; }

    .actionLeft { margin-top: 10px; }
    #WebTwainOverview .hide-sm, #WebTwainOverview .hide-block-sm { display: none; }
    .basicStrength .strengthLine.bgLeft { background-size: 100%; }
    .basicSwiper .ant-carousel .slick-dots li button { border: none; font-size: 0px; }
    .basicPowerful .powerfulList li { width: 100%; padding: 40px 30px 30px; margin: 0px; margin-top: 80px !important; max-width: unset; min-height: 190px; }
        .basicPowerful .powerfulList li:first-child { margin-top: 40px !important; }
    ul.powerfulList { margin-top: 20px; }
    .basicReliable .functionBox { min-height: unset !important; padding: 45px 25px 20px 25px; margin-top: 80px; }
    .dwtOverviewAction { height: auto; padding: 45px; }
    .basicVolume .volumeList li { width: 31.3%; }
    .icon-wrapper { margin-right: 0px; width: 19%; }
        .icon-wrapper i { font-size: 20px; }
    .platform-wrapper span { margin-left: 0px; width: 18%; text-align: center; }
    .basicStrength .strengthLine .strengthImg { height: 250px; }
    .basicSwiper .ant-carousel .slick-slide .slide-left { width: 100%; float: none; margin-top: 60px; }
    .platform-wrapper { width: 100%; }
    .basicStrength .strengthLine { padding: 10px 40px; }
    .basicSwiper .ant-carousel .slick-slide .slide-left { width: 100%; float: none; margin-top: 60px; height: auto; }
    #WebTwainResource .basicResourceList li { width: 49%; }
    #WebTwainResource .basicFAQBox .faqList > li .question { font-size: 16px; padding: 8px 0px; }
    .basicVolume .volumeList li span.icon { width: 55px; height: 55px; }
        .basicVolume .volumeList li span.icon i { background-size: 100% !important; width: 34px; height: 49px; }
    .customerSwiper .customerPrevArrow, .customerSwiper .customerNextArrow { top: 7px !important; width: 15px; height: 15px; }
    .basicPageFooter { margin-top: 50px; }



    .f24 { font-size: 16px; }
    .f18 { font-size: 14px; }
    .platform-wrapper { font-size: 16px; }
    .dwtOverviewAction { margin-bottom: 60px; }
    .dwtOverviewSwiper { margin-bottom: 100px }
    .dwtDeviceWrapper { margin-top: 0; margin-bottom: 0; }

    .dwtOverviewSupports .supportsContainer .supportPlatforms { padding: 0 6%; }
    .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox { width: 100px; height: 100px; }
        .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox i.icon-scanner, .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox i.icon-UVC { background-size: 40px; }
        .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox i.icon-mobile { background-size: 27px; }
        .dwtOverviewSupports .supportsContainer .scanDevices .whiteBox span { font-size: 14px; }

    /* dwt overview new style 2022/09/26 ~ 27 */
    .dwtStrength .strengthContainer .strengthContent { padding-top: 80px; }
    .dwtStrength .strengthContainer ul.switch { top: 40px; }
        .dwtStrength .strengthContainer ul.switch li { width: 20px; height: 20px; border-radius: 50%; padding: 0 0; font-size: 0; margin-right: 10px; background-color: #CCCCCC; }
}

@media (max-width: 575px) {
    #WebTwainMain h1.h2 { font-size: 22px; }
    #WebTwainOverview .d-btn-wrap .d-btn { --font-size: 16px; }

    /* dwt overview new style 11/09/2022 by Frank */
    #WebTwainResource .basicResourceList li div { max-width: 100%; height: auto; }
    #WebTwainResource .basicResourceList li { width: 100%; margin-bottom: 20px; }
    .dwtOverviewPowerful.basicPowerful .powerfulLeft { padding-left: 0px; padding-top: 0px; padding-right: 0px; }

    /* dwt overview new style 2022/09/26 ~ 27 */
    #WebTwainOverview .whyChooseDwt p.title { font-size: 24px; }

    .dwtStrength .strengthContainer .strengthContent { padding-top: 50px; }
    .dwtStrength .strengthContainer ul.switch { top: 25px; }
        .dwtStrength .strengthContainer ul.switch li { width: 16px; height: 16px; }
}

@media (max-width: 991px) and (min-width: 768px) {
    #WebTwainOverview .hide-md, #WebTwainOverview .hide-block-md { display: none; }
}

@media (min-width: 1680px) {
    .dwt-overview .container, .dwt-feature .container, .dwt-resource .container { max-width: 1640px; }
}

/* pdf */
#WebTwainResource .videoAndPdf .basicFeature .featureBox .featureBoxBottom .cnt { margin-bottom: 50px; }
#WebTwainResource .videoAndPdf h2 { margin-bottom: 5rem; }
#WebTwainResource .route-overlay { position: absolute; height: 100%; width: 100%; cursor: pointer; z-index: 1; }

#WebTwainResource .videoAndPdf .video ul, #WebTwainResource .videoAndPdf .pdf ul { list-style: none; margin: 0; }

    #WebTwainResource .videoAndPdf .video ul li, #WebTwainResource .videoAndPdf .pdf ul li { display: inline-block; width: 33%; vertical-align: top; }

        #WebTwainResource .videoAndPdf .video ul li .videoBox { max-width: 47.8rem; }

            #WebTwainResource .videoAndPdf .video ul li .videoBox .videoImg { height: 26.9rem; position: relative; }

            #WebTwainResource .videoAndPdf .video ul li .videoBox p { color: #323234; font-size: 30px; line-height: 4rem; margin-top: 4rem; }

        #WebTwainResource .videoAndPdf .video ul li:first-child .videoImg { background: url(../../images/banner/DWT/resource_videos_1.png) center center; background-size: cover; }

        #WebTwainResource .videoAndPdf .video ul li:nth-child(2) .videoImg { background: url(../../images/banner/DWT/resource_videos_2.png) center center; background-size: cover; }

        #WebTwainResource .videoAndPdf .video ul li:nth-child(3) .videoImg { background: url(../../images/banner/DWT/resource_videos_3.png) center center; background-size: cover; }

        #WebTwainResource .videoAndPdf .video ul li a, #WebTwainResource .videoAndPdf .video ul li a:visited { color: #323234; }

            #WebTwainResource .videoAndPdf .video ul li a:hover { color: #FE8E14; }

        #WebTwainResource .videoAndPdf .video ul li .videoImg .playBtn { display: block; height: 145px; width: 145px; background: url(../../images/icons/video.png) top center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-position: 0 -145px; }

        #WebTwainResource .videoAndPdf .video ul li .videoImg:hover .playBtn { background-position: 0 0px; }

#WebTwainResource .videoAndPdf .pdf { margin-bottom: 10rem; }

@media (max-width: 1699.98px) {
    #WebTwainResource .videoAndPdf .video ul li .videoBox { max-width: 95%; }

        #WebTwainResource .videoAndPdf .video ul li .videoBox .videoImg { width: 100%; height: 195px; }

    #WebTwainResource .videoAndPdf .video ul li .videoImg .playBtn { display: block; height: 72px; width: 72px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-position: 0 -72px; background-size: 100%; }
    #WebTwainResource .videoAndPdf .video ul li .videoBox p { font-size: 26px; line-height: 31px; margin-top: 23px; }
    #WebTwainResource .basicFeature .featureBox .featureBoxTop { height: 200px; background: #eeeeee; padding-top: 16px; position: relative; }
    #WebTwainResource .basicFeature .featureBox .featureBoxBottom .title { font-size: 24px; line-height: 32px; color: #323234; margin-bottom: 10px; }
    #WebTwainResource .basicFeature .featureBox .featureBoxBottom .cnt { font-size: 16px; }
}

@media (max-width: 1199.98px) {
    #WebTwainResource .videoAndPdf .video ul li .videoBox { max-width: 34.8rem; }

        #WebTwainResource .videoAndPdf .video ul li .videoBox .videoImg { width: 100%; height: 172px; }

        #WebTwainResource .videoAndPdf .video ul li .videoBox p { font-size: 20px; }
    #WebTwainResource .basicFeature .featureBox .featureBoxBottom .cnt { font-size: 16px; line-height: 25px; }
    #WebTwainResource .basicFeature .featureBox .featureBoxBottom { min-height: 280px; }
}

@media (max-width: 991.98px) {
    #WebTwainResource .videoAndPdf .video ul li { width: 100%; }

        #WebTwainResource .videoAndPdf .video ul li .videoBox { max-width: 42.8rem; margin: 0 auto 60px; }

            #WebTwainResource .videoAndPdf .video ul li .videoBox .videoImg { height: 24rem; }

            #WebTwainResource .videoAndPdf .video ul li .videoBox p { font-size: 20px; }
}

@media (min-width: 992px) {
    .alert-primary.countryAlert .container { max-width: calc(100% - 40px); }
}

@media (min-width: 1200px) {
    .alert-primary.countryAlert .container { max-width: calc(100% - 100px); }
    #WebTwainOverview .basicBanner { height: 480px; }
}

@media(min-width:1680px) {
    .alert-primary.countryAlert .container { max-width: 1640px }
}