﻿a.featureBox { display: block; }
p.orangeLink { color: #FE8E14; }

#homePage { background: #ffffff; }
#homePage .d-btn { display: inline-block; font-family: Oswald-Regular; height: 56px; padding: 0px 2.2rem; outline: none; font-size: 22px; border: 0; outline: none; line-height: 56px; }
#dynamsoft-header #mdHeader { background: transparent; }

#homePage .indexBanner { position: relative; height: 755px; min-height: 450px; background: #EFEFEF; box-sizing: content-box; padding-bottom: 0px; }
#homePage .indexBanner .banner-container { padding-top: 230px; }
#homePage .indexBanner .banner-container h1 { font-size: 55px; line-height: 70px; margin-bottom:0; color: #323234; text-transform: uppercase; letter-spacing: 1.1px; }
#homePage .indexBanner .banner-container .indexBannerDesc { font-size: 35px; line-height: 50px; color: #323234; width: 627px; margin-top: 20px; }
#homePage .indexBanner .banner-container .downloadBtn { margin-top: 40px; font-size: 24px; padding: 0 63px; height: 70px; line-height: 70px; }
#homePage .indexBanner .banner-container .downloadBtn:hover { box-shadow: -1rem 1rem 0 0px #000; transform: translate(1rem, -1rem); }
#homePage .indexBanner .bannerImg { position: absolute; width: 100%; height: 100%; }
#homePage .indexBanner .switchBanner { display: none; }
#homePage .indexBanner .bannerImgBox { position: absolute; width: 802px; height: 474px; right: 15px; top: 160px; }
#homePage .indexBanner .bannerImgBox img { width:100%; object-fit: cover; }
#homePage .indexBanner .bannerImgBox .switchIcons { position: absolute; top: 180px; right: 820px; }
#homePage .indexBanner .bannerImgBox .switchCircle { display: block; width: 14px; height: 14px; border-radius: 50%; background: #DDDDDD; margin: 10px auto; cursor: pointer; }
#homePage .indexBanner .bannerImgBox .switchCircle.on { width: 14px; height: 14px; background: #AAAAAA }

#homePage .basicCustomers i.company-logo { height: 62px; background: url(../images/banner/index/company-logo.png) }
#homePage .basicCustomers i.ibm-logo { width: 107px; background-position: 0 0px; background-repeat: no-repeat; }
#homePage .basicCustomers i.ge-logo { width: 62px; background-position: -178px 0px; background-repeat: no-repeat; }
#homePage .basicCustomers i.nasa-logo { width: 72px; background-position: -308px 0px; background-repeat: no-repeat; }
#homePage .basicCustomers i.lm-logo { width: 262px; background-position: -447px 0px; background-repeat: no-repeat; }
#homePage .basicCustomers i.epson-logo { width: 118px; background-position: -778px 0px; background-repeat: no-repeat; }
#homePage .basicCustomers i.fujifilm-logo { width: 140px; background-position: -966px 0px; background-repeat: no-repeat; }
#homePage .basicCustomers i.hp-logo { width: 60px; background-position: -1176px 0px; background-repeat: no-repeat; }
#homePage .basicCustomers i.disney-logo { width: 128px; background-position: -1305px 0px; background-repeat: no-repeat; }
#homePage .basicCustomers i.simens-logo { width: 131px; background-position: -1508px 0px; background-repeat: no-repeat; }
#homePage .basicCustomers .customer-logos { display: flex; display: -webkit-flex; display: -ms-flexbox; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; }
#homePage .basicCustomers .customer-logos li { margin-right: 69px; opacity: 1; }
#homePage .basicCustomers .customer-logos li:last-child { margin-right: 0; }
#homePage .basicCustomers .customer-swiper-container { overflow: hidden; }
#homePage .basicCustomers .swiper-slide { width: auto; display: inline-block !important; text-align: center; }

#homePage .indexProduct h2 { font-size: 36px; letter-spacing: 0.72px; }
#homePage .indexProduct .products { display: flex; display: -webkit-flex; display: -ms-flexbox; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; margin-top: 75px; }
#homePage .indexProduct .products .product-item { position: relative; width: 380px; height: 480px; background: #59626A; padding: 40px 50px 50px 50px; color: #FFFFFF; }
#homePage .indexProduct .products .product-item:nth-child(3) { padding-right: 35px; }
#homePage .indexProduct .products .product-item .title { font-size: 30px; line-height: 48px; margin-bottom: 20px; }
#homePage .indexProduct .products .product-item .desc { font-size: 24px; line-height: 36px; }
#homePage .indexProduct .products .product-item .product-bottom { display: flex; display: -webkit-flex; display: -ms-flexbox; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; position: absolute; width: 100%; padding: 0 36px 0 50px; left: 0; bottom: 50px; }
#homePage .indexProduct .products .product-item .product-bottom .product-icon { display: inline-block; width: 68px; height: 68px; }
#homePage .indexProduct .products .product-item .product-bottom .product-icon.dwt-icon { background: url(../images/banner/index/logo-dwt.png) }
#homePage .indexProduct .products .product-item .product-bottom .product-icon.dbr-icon { background: url(../images/banner/index/logo-dbr.png) }
#homePage .indexProduct .products .product-item .product-bottom .product-icon.dlr-icon { background: url(../images/banner/index/logo-dlr.png) }
#homePage .indexProduct .products .product-item .product-bottom .product-icon.ddn-icon { background: url(../images/banner/index/logo-ddn.png) }
#homePage .indexProduct .products .product-item .product-bottom .product-link { font-size: 18px; color: #FFFFFF; margin-right: 10px }
#homePage .indexProduct .products .product-item .product-bottom .product-link:hover { margin-right: 0; }
#homePage .indexProduct .products .product-item .product-bottom .product-link:hover span { margin-left: 10px }

#homePage .indexReason .reason-wrap { display: flex; display: -webkit-flex; display: -ms-flexbox; justify-content: space-between; -webkit-justify-content: space-between; height: 640px; background: #F5F5F5; padding: 47px 100px 45px 70px; }
#homePage .indexReason .reason-wrap .reason-imgs { position: relative; }
#homePage .indexReason .reason-wrap .reason-imgs img { position: absolute; }
#homePage .indexReason .reason-wrap .reason-imgs a:nth-child(1) img { top: 0; left: 0 }
#homePage .indexReason .reason-wrap .reason-imgs a:nth-child(2) img { top: 322px; left: 110px; }
#homePage .indexReason .reason-wrap .reason-imgs a:nth-child(3) img { top: 80px; left: 426px; }
#homePage .indexReason .reason-wrap .reason-content { width: 620px; }
#homePage .indexReason .reason-wrap .reason-content h2 { font-size: 36px; line-height: 50px; padding-top: 25px; letter-spacing: 0.72px; margin-bottom: 30px; }
#homePage .indexReason .reason-wrap .reason-content .reason-list { font-size: 24px; line-height: 46px; }
#homePage .indexReason .reason-wrap .reason-content .reason-list li { position: relative; padding-left: 44px; }
#homePage .indexReason .reason-wrap .reason-content .reason-list li::before { content: ''; display: inline-block; width: 22px; height: 22px; background: url(../images/DCV/orange-tick.svg); background-size: contain; position: absolute; left: 0; top: 13px; }
#homePage .indexReason .reason-wrap .reason-content a { font-size: 18px; line-height: 46px; margin-top: 20px }

#homePage .indexBottom .bottom-wrap { display: flex; display: -webkit-flex; display: -ms-flexbox; justify-content: space-between; -webkit-justify-content: space-between; }
#homePage .indexBottom .bottom-wrap .desc { padding-top: 95px; padding-bottom: 95px; width: 820px; }
#homePage .indexBottom .bottom-wrap .desc h2 { letter-spacing: 0.8px; margin-bottom: 20px; }
#homePage .indexBottom .bottom-wrap .desc p { font-size: 24px; line-height: 34px; margin-bottom: 55px; }
#homePage .indexBottom .bottom-wrap .desc .btns { position: relative; }
#homePage .indexBottom .bottom-wrap .desc .btns .downloadBtn { height: 70px; line-height: 70px; font-size: 27px; margin-right: 80px; padding: 0 40px; font-family: Oswald-Medium, 'Myriad Pro','Gloucester MT', myriad-pro, 'Agency FB'; }
#homePage .indexBottom .bottom-wrap .desc .btns .downloadBtn:hover { margin-top: -8px; margin-left: 8px; margin-bottom: 8px; box-shadow: -8px 8px 0 0 #323234; }
#homePage .indexBottom .bottom-wrap .desc .btns .demoBtn { font-size: 24px; line-height: 36px; transform: none; font-family: Oswald-Medium, 'Myriad Pro','Gloucester MT', myriad-pro, 'Agency FB'; position: absolute; left: 490px; bottom: 20px; }
#homePage .indexBottom .bottom-wrap .desc .btns .demoBtn:hover span { margin-left: 10px; }
#homePage .indexBottom .img { flex: 1; display: flex; display: -webkit-flex; display: -ms-flexbox; justify-content: center; align-items: center; }
#homePage .indexBottom .img img  { width: 207px; }

@media (max-width: 1679px) {
    #homePage .indexBanner { height: 610px; }
    #homePage .indexBanner .banner-container { padding-top: 170px; }
    #homePage .indexBanner .banner-container h1 { font-size: 46px; line-height: 60px; }
    #homePage .indexBanner .banner-container .indexBannerDesc { font-size: 28px; line-height: 46px; width: 470px; margin-top: 20px; }
    #homePage .indexBanner .banner-container .downloadBtn { margin-top: 40px; font-size: 22px; padding: 0 55px; height: 65px; line-height: 65px; }
    #homePage .indexBanner .bannerImgBox { width: 620px; height: 366px; top: 140px; }
    #homePage .indexBanner .bannerImgBox .switchIcons { top: 146px; right: 640px; }

    #homePage .basicCustomers i.company-logo { height: 62px; transform: scale(0.88)}
    #homePage .basicCustomers .customer-logos li { margin-right: 0; }

    #homePage .indexProduct h2 { font-size: 34px; }
    #homePage .indexProduct .products { margin-top: 70px; }
    #homePage .indexProduct .products .product-item { width: 310px; height: 430px; padding: 35px 40px 40px 40px; }
    #homePage .indexProduct .products .product-item:nth-child(3) { padding-right: 35px; }
    #homePage .indexProduct .products .product-item .title { font-size: 26px; line-height: 42px; }
    #homePage .indexProduct .products .product-item .desc { font-size: 20px; line-height: 34px; }
    #homePage .indexProduct .products .product-item .product-bottom { padding: 0 36px 0 40px; left: 0; bottom: 40px; }

    #homePage .indexReason .reason-wrap { height: 580px; padding: 40px 70px 40px 50px; }
    #homePage .indexReason .reason-wrap .reason-imgs img { transform: scale(0.8) }
    #homePage .indexReason .reason-wrap .reason-imgs a:nth-child(1) img { top: 0; left: 0 }
    #homePage .indexReason .reason-wrap .reason-imgs a:nth-child(2) img { top: 280px; left: 65px; }
    #homePage .indexReason .reason-wrap .reason-imgs a:nth-child(3) img { top: 60px; left: 310px; }
    #homePage .indexReason .reason-wrap .reason-content { width: 530px; }
    #homePage .indexReason .reason-wrap .reason-content h2 { font-size: 34px; padding-top: 14px; }
    #homePage .indexReason .reason-wrap .reason-content .reason-list { font-size: 20px; line-height: 42px; }
    #homePage .indexReason .reason-wrap .reason-content .reason-list li::before { top: 10px; }

    #homePage .indexBottom .bottom-wrap .desc { padding-top: 85px; padding-bottom: 85px; width: 690px; }
    #homePage .indexBottom .bottom-wrap .desc p { font-size: 20px; line-height: 34px; margin-bottom: 45px; }
    #homePage .indexBottom .bottom-wrap .desc .btns .downloadBtn { height: 65px; line-height: 65px; font-size: 24px; margin-right: 60px; padding: 0 30px; }
    #homePage .indexBottom .bottom-wrap .desc .btns .downloadBtn:hover { margin-top: -8px; margin-left: 8px; margin-bottom: 8px; box-shadow: -8px 8px 0 0 #323234; }
    #homePage .indexBottom .bottom-wrap .desc .btns .demoBtn { font-size: 22px; line-height: 30px; left: 440px; bottom: 16px; }
}

@media (max-width: 1399px) {
    #homePage .indexBanner { height: 560px; }
    #homePage .indexBanner .banner-container { padding-top: 160px; }
    #homePage .indexBanner .banner-container h1 { font-size: 40px; line-height: 60px; }
    #homePage .indexBanner .banner-container .indexBannerDesc { font-size: 26px; line-height: 46px; width: 435px; }
    #homePage .indexBanner .banner-container .downloadBtn { margin-top: 30px; font-size: 22px; padding: 0 50px; height: 60px; line-height: 60px; }
    #homePage .indexBanner .bannerImgBox { width: 570px; height: 337px; top: 140px; }
    #homePage .indexBanner .bannerImgBox .switchIcons { top: 120px; right: 590px; }

    #homePage .basicCustomers i.company-logo { height: 62px; transform: scale(0.75); }

    #homePage .indexProduct h2 { font-size: 34px; }
    #homePage .indexProduct .products { margin-top: 60px; }
    #homePage .indexProduct .products .product-item { width: 265px; height: 400px; padding: 25px 30px 30px 30px; }
    #homePage .indexProduct .products .product-item:nth-child(3) { padding-right: 35px; }
    #homePage .indexProduct .products .product-item .title { font-size: 24px; line-height: 40px; }
    #homePage .indexProduct .products .product-item .desc { font-size: 18px; line-height: 30px; }
    #homePage .indexProduct .products .product-item .product-bottom { padding: 0 30px 0 30px; left: 0; bottom: 40px; }

    #homePage .indexReason .reason-wrap { height: 545px; padding: 30px 55px 30px 10px; }
    #homePage .indexReason .reason-wrap .reason-imgs img { transform: scale(0.7) }
    #homePage .indexReason .reason-wrap .reason-imgs a:nth-child(1) img { top: 0; left: 0 }
    #homePage .indexReason .reason-wrap .reason-imgs a:nth-child(2) img { top: 255px; left: 42px; }
    #homePage .indexReason .reason-wrap .reason-imgs a:nth-child(3) img { top: 60px; left: 260px; }
    #homePage .indexReason .reason-wrap .reason-content { width: 480px; }
    #homePage .indexReason .reason-wrap .reason-content h2 { font-size: 30px; line-height: 40px; }
    #homePage .indexReason .reason-wrap .reason-content .reason-list { font-size: 18px; line-height: 40px; }
    #homePage .indexReason .reason-wrap .reason-content .reason-list li::before { top: 9px; }

    #homePage .indexBottom .bottom-wrap .desc { padding-top: 85px; padding-bottom: 85px; width: 590px; }
    #homePage .indexBottom .bottom-wrap .desc p { font-size: 18px; line-height: 30px; margin-bottom: 40px; }
    #homePage .indexBottom .bottom-wrap .desc .btns .downloadBtn { height: 60px; line-height: 60px; font-size: 20px; margin-right: 60px; padding: 0 30px; }
    #homePage .indexBottom .bottom-wrap .desc .btns .downloadBtn:hover { margin-top: -8px; margin-left: 8px; margin-bottom: 8px; box-shadow: -8px 8px 0 0 #323234; }
    #homePage .indexBottom .bottom-wrap .desc .btns .demoBtn { font-size: 20px; line-height: 30px; left: 370px; bottom: 16px; }
    #homePage .indexBottom .img img { width: 190px; }
}

@media (max-width: 1199px) {
    .f24 { font-size: 18px; }

    #homePage .indexBanner { height: 510px; }
    #homePage .indexBanner .banner-container { padding-top: 160px; }
    #homePage .indexBanner .banner-container h1 { font-size: 30px; line-height: 50px; }
    #homePage .indexBanner .banner-container .indexBannerDesc { font-size: 22px; line-height: 40px; width: 380px; }
    #homePage .indexBanner .banner-container .downloadBtn { margin-top: 20px; font-size: 20px; padding: 0 35px; height: 50px; line-height: 50px; }
    #homePage .indexBanner .bannerImgBox { width: 490px; height: 290px; }
    #homePage .indexBanner .bannerImgBox .switchIcons { top: 100px; right: 510px; }

    #homePage .basicCustomers .customer-logos { transform: scale(0.9); margin-left: -57px; }
    #homePage .basicCustomers i.company-logo { height: 62px; transform: scale(0.75); }
    
    #homePage .indexProduct h2 { font-size: 30px; }
    #homePage .indexProduct .products { margin-top: 40px; }
    #homePage .indexProduct .products .product-item { width: 225px; height: 320px; padding: 20px 20px 25px 20px; }
    #homePage .indexProduct .products .product-item:nth-child(3) { padding-right: 15px; }
    #homePage .indexProduct .products .product-item .title { font-size: 20px; line-height: 30px; margin-bottom: 10px; }
    #homePage .indexProduct .products .product-item .desc { font-size: 16px; line-height: 26px; }
    #homePage .indexProduct .products .product-item .product-bottom { padding: 0 20px 0 20px; left: 0; bottom: 25px; }
    #homePage .indexProduct .products .product-item .product-bottom .product-icon { width: 50px; height: 50px; background-size: cover !important }
    #homePage .indexProduct .products .product-item .product-bottom .product-link { font-size: 16px; }

    #homePage .indexReason .reason-wrap { height: 480px; padding: 30px 25px 30px 10px; }
    #homePage .indexReason .reason-wrap .reason-imgs img { transform: scale(0.6) }
    #homePage .indexReason .reason-wrap .reason-imgs a:nth-child(1) img { top: -10px; left: -28px; }
    #homePage .indexReason .reason-wrap .reason-imgs a:nth-child(2) img { top: 194px; left: 21px; }
    #homePage .indexReason .reason-wrap .reason-imgs a:nth-child(3) img { top: 50px; left: 192px; }
    #homePage .indexReason .reason-wrap .reason-content { width: 435px; }
    #homePage .indexReason .reason-wrap .reason-content h2 { font-size: 30px; margin-bottom: 20px; padding-top: 0px; }
    #homePage .indexReason .reason-wrap .reason-content .reason-list { font-size: 16px; line-height: 36px; }
    #homePage .indexReason .reason-wrap .reason-content .reason-list li::before { top: 8px; }

    #homePage .indexBottom .bottom-wrap .desc { padding-top: 85px; padding-bottom: 85px; width: 590px; }
    #homePage .indexBottom .bottom-wrap .desc p { font-size: 18px; line-height: 30px; margin-bottom: 40px; }
    #homePage .indexBottom .bottom-wrap .desc .btns .downloadBtn { height: 60px; line-height: 60px; font-size: 20px; margin-right: 60px; padding: 0 30px; }
    #homePage .indexBottom .bottom-wrap .desc .btns .downloadBtn:hover { margin-top: -8px; margin-left: 8px; margin-bottom: 8px; box-shadow: -8px 8px 0 0 #323234; }
    #homePage .indexBottom .bottom-wrap .desc .btns .demoBtn { font-size: 20px; line-height: 30px; left: 370px; bottom: 16px; }
    #homePage .indexBottom .img img { width: 190px; }
}

@media (max-width: 991px) {
    #homePage .indexBanner { min-height: 350px; height: auto; padding-bottom: 50px; }
    #homePage .indexBanner .container .banner-container { padding-left: 80px; padding-top: 70px; }
    #homePage .indexBanner .bannerImgBox { display: none !important; }

    #homePage .basicCustomers .customer-logos { display: none !important; }
    #homePage .basicCustomers .customer-swiper-container { margin-top: -10px; }

    #homePage .indexProduct .products { flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; }
    #homePage .indexProduct .products .product-item { width: 335px; height: 243px; padding: 20px 20px 25px 20px; margin-bottom: 20px; }

    #homePage .indexReason .reason-wrap { display: block; position: relative; height: 815px; }
    #homePage .indexReason .reason-wrap .reason-content { margin: 0 auto; }
    #homePage .indexReason .reason-wrap .reason-imgs { position: static; }
    #homePage .indexReason .reason-wrap .reason-imgs img { transform: scale(0.6); }
    #homePage .indexReason .reason-wrap .reason-imgs a:nth-child(1) img { top: unset; bottom: 120px; left: 70px; }
    #homePage .indexReason .reason-wrap .reason-imgs a:nth-child(2) img { top: unset; bottom: -16px; left: 108px; }
    #homePage .indexReason .reason-wrap .reason-imgs a:nth-child(3) img { top: unset; bottom: 62px; left: 295px; }
}

@media (max-width: 767px) {
    html { font-size: 8px !important; }
    .d-btn { display: inline-block; font-family: Oswald-Regular; height: 56px; padding: 0px 2.2rem; color: #FE8E14; outline: none; font-size: 16px; border: 0; outline: none; line-height: 56px; }

    #homePage .indexBanner { min-height: 290px; padding-bottom: 50px; background: url(/webres/wwwroot/images/homepage/Hero_V9.jpg) no-repeat left; }
    #homePage .indexBanner .banner-container { padding-left: 10px; padding-top: 60px; }
    #homePage .indexBanner .banner-container .indexBannerDesc { width: 100%; font-size: 28px; line-height: 40px; margin-bottom: 40px; }
    #homePage .indexBanner .banner-container .downloadBtn:hover { box-shadow: none; transform: none; }
    #homePage .indexBanner .pt100 { padding-top: 50px; }
    #homePage .indexBanner h1 { font-size: 34px; line-height: 40px; }

    #homePage .indexProduct .products { justify-content: center;  }
    #homePage .indexProduct .products .product-item { max-width: 335px; width: 100%; }

    #homePage .indexReason .reason-wrap { height: auto; padding: 30px; }
    #homePage .indexReason .reason-wrap .reason-imgs { display: none; }
    #homePage .indexReason .reason-wrap .reason-content { width: 100%; }
    #homePage .indexReason .reason-wrap .reason-content .reason-list { font-size: 16px; line-height: 26px; }
    #homePage .indexReason .reason-wrap .reason-content .reason-list li { padding-left: 30px; margin-bottom: 10px; }
    #homePage .indexReason .reason-wrap .reason-content .reason-list li::before { width: 19px; height: 19px; top: 4px; }

    #homePage .indexBottom .bottom-wrap .desc { padding-top: 48px; }
    #homePage .indexBottom .bottom-wrap .desc .btns .demoBtn { left: 0; bottom: -49px; }
    #homePage .indexBottom .bottom-wrap .desc .btns .downloadBtn { height: 50px; line-height: 50px; font-size: 20px; max-width: 305px; }

    .customerSwiper .customerPrevArrow, .customerSwiper .customerNextArrow { top: 7px !important; width: 15px; height: 15px; }
}

@media (max-width: 572px) {
    #homePage .indexBanner .container { max-width: none; }
    #homePage .indexBanner .container .banner-container { padding: 40px 20px; }
    #homePage .indexBanner h1 { font-size: 29px; line-height: 30px; }
    #homePage .indexBanner { min-height: unset; height: auto; padding: 0px; }
    #homePage .indexBanner .indexBannerDesc { margin-bottom: 0px; font-size: 18px; line-height: 26px; width: 100%; }
    #homePage .indexBanner a { height: 36px; font-size: 14px; line-height: 36px; }
    #homePage .indexBanner .container .banner-container { padding-left: 10px; }

    #homePage .indexBottom .btns .white-btn { display: block; text-align: center; }
    #homePage .indexBottom .btns .white-btn:hover { margin: unset; box-shadow: none; }
}

@media (min-width: 768px) {
    html { font-size: 8px !important; }
}

@media (min-width: 992px) {
    html { font-size: 8px !important; }
    #dynamsoft-header { position: fixed; }
    #dynamsoft-header #mdHeader { border-bottom: 0; }
}

@media (min-width: 1200px) {
    html { font-size: 8px !important; }
}

@media (min-width: 1680px) {
    html { font-size: 10px !important; }
    #homePage .container { max-width: 1660px; }
    #menuMask { top: 70px; }
}
