.zw-product-header {
    background-color: #def8ee
}

.zwrapper * {
    box-sizing: border-box
}

.act-btn {
    color: #fff;
    background: #f0483e
}

.zwrapper .content-wrap {
    padding: 90px 0
}

.dsp-flx {
    display: flex
}

.justify-space {
    justify-content: space-between
}

.align-center {
    align-items: center
}

.main-container-wrapper #mini-panel-product_menu {
    background: #def8ee
}

.col-rose {
    color: #f26868
}

.col-green {
    color: #45a781
}

.mobile-logo.bg-green {
    background: #45a781
}

.bg-brown .voice-port-image {
    background: #f8f1de
}

.bg-rose .voice-port-image {
    background: #f8e9de
}

.bg-green .voice-port-image {
    background: #def8e0
}

.banner {
    text-align: center;
    background: #def8ee;
    margin-top: -10px;
    padding-bottom: 60px
}

.banner-inner {
    margin: 0 auto;
    align-items: center;
    justify-content: space-between
}

.bnr-desc {
    text-align: left;
    width: 40%;
    padding-right: 50px
}

.banner-inner h1 {
    max-width: 790px;
    margin: 0 auto 20px;
    line-height: 1.3
}

.bnr-img {
    width: 50%;
    position: relative;
    text-align: right
}

img.bnrimg2 {
    position: absolute;
    left: 0;
    bottom: -15%;
    border-radius: 5px;
    box-shadow: 0 4px 16px 0 #c1e3d6
}

.voice-port-wrap {
    max-width: 1070px;
    margin: 0 auto;
    text-align: center
}

.common-details:first-child {
    margin-top: 40px
}

.common-details {
    margin-top: 120px
}

.common-details img {
    max-width: 300px
}

.common-details>div {
    width: 45%
}

.voice-port-image {
    background: #deedf8;
    padding: 40px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 10px
}

.voice-port-image-wrap {
    max-width: 350px;
    margin: 0 auto
}

.voice-port-image {
    min-height: 470px
}

.voice-port-cont {
    text-align: left
}

.voice-port-cont p {
    margin-bottom: 0
}

.feasibility .voice-port-image-wrap {
    max-width: 385px
}

.confirm .voice-port-image-wrap,
.start .voice-port-image-wrap {
    max-width: 400px
}

.get-access {
    background: #00237e;
    text-align: center;
    color: #fff
}

.get-access h2 {
    max-width: 735px;
    margin: 0 auto 20px;
    color: #fff
}

.get-access a {
    background: transparent;
    border: 1px solid #fff;
    border-radius: 4px;
    padding-left: 65px;
    margin-top: 15px
}

a.chrome-cta {
    background: url(//cdn.zoho.com.cn/sites/zweb/images/voice/chrome-icon.svg) no-repeat;
    background-size: 25px;
    background-position: 25px center
}

a.firefox-cta {
    background: url(//cdn.zoho.com.cn/sites/zweb/images/voice/firefox-icon.svg) no-repeat;
    background-size: 25px;
    background-position: 25px center
}

a.edge-cta {
    background: url(//cdn.zoho.com.cn/sites/zweb/images/voice/edge-icon.svg) no-repeat;
    background-size: 28px;
    background-position: 25px center;
    margin-right: 0
}

.inup1,
.inup2,
.inup3,
.inleft,
.inright,
.indown {
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
    -webkit-transition: all 1300ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
    transition: all 1300ms cubic-bezier(0.11, 0.16, 0.43, 0.86)
}

.inleft {
    -webkit-transform: translateX(-60px);
    transform: translateX(-60px);
    opacity: 0
}

.inright {
    -webkit-transform: translateX(60px);
    transform: translateX(60px);
    opacity: 0
}

.indown {
    -webkit-transform: translateY(-80px);
    transform: translateY(-80px);
    opacity: 0
}

.in-view .inup1,
.in-view.inup1,
.in-view .inup2,
.in-view.inup2,
.in-view .inup3,
.in-view.inup3,
.in-view .indown {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
}

.inup1 {
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms
}

.inup2 {
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

.inup3 {
    -webkit-transition-delay: 1000ms;
    transition-delay: 1000ms
}

.in-view .inleft,
.in-view .inright {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.in-view .path-1 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: integrationdash 1s linear forwards 1s
}

.path-2,
.path-3 {
    opacity: 0
}

.in-view .path-2,
.in-view .path-3 {
    opacity: 1;
    transition-delay: 1.4s
}

@keyframes integrationdash {
    0% {
        stroke-dashoffset: 1000
    }

    100% {
        stroke-dashoffset: 0
    }
}

@media all and (min-width: 768px) {
    .get-access a {
        margin-right: 10px
    }
}

@media all and (min-width: 1200px) {
    h1 {
        font-size: 46px
    }

    h2 {
        font-size: 36px;
        font-family: var(--primaryfont-bold)
    }

    .act-btn {
        padding: 14px 30px
    }

    .get-access h2 {
        font-size: 42px
    }

    .get-access p {
        font-size: 20px
    }

    .get-access a {
        margin-right: 30px
    }

    .common-details:first-child img,
    .common-details:nth-child(2) img,
    .common-details:nth-child(3) img {
        max-width: 350px
    }
}

@media all and (max-width: 1199px) {
    .get-access a {
        margin-right: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

@media only screen and (max-width: 991px) {
    .zwrapper .content-wrap {
        padding: 60px 0
    }

    h1 {
        font-size: 35px
    }

    h2 {
        font-size: 30px
    }

    .banner-inner h1 {
        max-width: 590px
    }

    .banner-inner {
        flex-flow: column
    }

    .bnr-desc,
    .bnr-img {
        width: 100%;
        padding: 0;
        text-align: center
    }

    .bnr-img {
        margin-top: 60px
    }

    img.bnrimg2 {
        left: 0
    }

    .banner-inner {
        max-width: 650px
    }

    .features-list {
        flex-direction: column;
        max-width: 500px;
        margin: 50px auto 0;
        text-align: center
    }

    .features-list li {
        width: 100%
    }

    .features-list li:not(:last-child) {
        margin-right: 0;
        margin-bottom: 50px
    }

    .features-list li:first-child h4,
    .features-list li:nth-child(2) h4,
    .give-details h3 {
        max-width: 100%
    }

    .features-list li span {
        margin: 0 auto 25px
    }

    .common-details img {
        max-width: 100%
    }

    .voice-port-image-wrap,
    .feasibility .voice-port-image-wrap,
    .confirm .voice-port-image-wrap,
    .start .voice-port-image-wrap {
        max-width: 80%
    }

    .common-details {
        margin-top: 80px
    }

    .start .voice-port-image {
        min-height: 440px
    }

    .sz_apps {
        justify-content: center
    }
}

@media only screen and (max-width: 767px) {
    h1 {
        font-size: 30px
    }

    .zwrapper .content-wrap {
        padding: 60px 0;
        max-width: 420px
    }

    .banner-inner {
        flex-flow: column
    }

    .banner {
        padding-bottom: 20px
    }

    .bnr-desc,
    .bnr-img {
        width: 100%;
        padding: 0;
        text-align: center
    }

    .bnr-img {
        margin-top: 50px
    }

    img.bnrimg2 {
        max-width: 100px;
        left: 0;
        bottom: -5%
    }

    .features-list li:not(:last-child) {
        margin-bottom: 30px
    }

    .common-details {
        margin-top: 70px;
        flex-direction: column-reverse
    }

    .common-details:first-child {
        margin-top: 10px
    }

    .common-details>div {
        width: 100%;
        text-align: center
    }

    .voice-port-image {
        max-width: 100%;
        margin: 30px auto 0;
        min-height: auto
    }

    .detail-bottom,
    .number-port-cont p,
    .different-cont p {
        max-width: 500px;
        margin: 0 auto
    }

    .common-details img {
        max-width: 100%
    }

    .feasibility h3,
    .confirm h3,
    .start h3 {
        max-width: 100%
    }

    .start .voice-port-image {
        min-height: 100%
    }

    .features-list li span {
        margin: 0 auto 16px
    }

    .get-access a {
        margin-top: 20px;
        max-width: 100%;
        font-size: 13px
    }
}

@media only screen and (max-width: 480px) {
    .act-btn {
        padding: 8px 20px
    }

    .banner-inner h1 {
        max-width: 280px
    }

    h1 {
        font-size: 29px
    }

    .voice-port-wrap>h2,
    .confirm h3 {
        max-width: 300px;
        margin: 0 auto 20px;
        line-height: 1.4
    }

    .voice-port-wrap>h2 {
        margin: 0 auto
    }
}

.bnr-desc h4 {
    font-size: 20px;
    margin: 70px 0 30px;
    font-family: var(--zf-secondary-medium)
}

.sz_apps {
    display: flex
}

.zappslist .spn {
    background-color: #fff;
    border-radius: 5px;
    margin-right: 5px;
    width: 76px;
    height: 71px;
    display: flex;
    align-items: center;
    justify-content: center
}

.zappslist.zchrome .spn>span {
    background: url(//cdn.zoho.com.cn/sites/zweb/images/voice/chrome-icon.svg) no-repeat;
    background-size: 40px;
    background-position: 0 center;
    height: 40px;
    width: 40px
}

.zappslist.zfirefox .spn>span {
    background: url(//cdn.zoho.com.cn/sites/zweb/images/voice/firefox-icon.svg) no-repeat;
    background-size: 40px;
    background-position: 0 center;
    height: 42px;
    width: 40px
}

.zappslist.zedge .spn>span {
    background: url(//cdn.zoho.com.cn/sites/zweb/images/voice/edge-icon.svg) no-repeat;
    background-size: 40px;
    background-position: 0 center;
    height: 40px;
    width: 40px
}

.zprd-name {
    text-align: center;
    display: block;
    font-size: 14px;
    margin: 5px 0 0;
    color: #000
}

@media only screen and (min-width: 768px) {
    .middle-animated .fadeinup {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        -ms-filter: "alpha(opacity=100)"
    }

    .fadeinup {
        opacity: 0;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px);
        -ms-filter: "alpha(opacity=0)";
        -webkit-transition: all 1000ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
        -o-transition: all 1000ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
        transition: all 1000ms cubic-bezier(0.11, 0.16, 0.43, 0.86)
    }

    .delay2 {
        -webkit-transition-delay: 400ms;
        -o-transition-delay: 400ms;
        transition-delay: 400ms
    }

    .delay3 {
        -webkit-transition-delay: 600ms;
        -o-transition-delay: 600ms;
        transition-delay: 600ms
    }

    .delay4 {
        -webkit-transition-delay: 800ms;
        -o-transition-delay: 800ms;
        transition-delay: 800ms
    }
}

.zwrapper a.act-btn.edge-cta {
    background-position: 20px 10px;
    width: fit-content;
    background-size: 30px auto
}

.zwrapper a.act-btn.firefox-cta {
    background-position: 20px 10px;
    width: auto;
}

.zwrapper a.act-btn.chrome-cta {
    background-position: 20px 10px
}