.zw-product-header {
    background: #000
}

.pd-tb {
    padding: 120px 0
}

.content-wrap {
    max-width: 1280px;
    margin: 0 auto
}

.tac {
    text-align: center
}

.zflex {
    display: flex;
    justify-content: space-between;
    align-items: center
}

:root {
    --blue-gradient: #14;
    --green-gradient: #055562
}

.zbanner {
    background-color: #000;
    color: #fff;
    position: relative
}

.zbanner:before {
    position: absolute;
    content: '';
    height: 25%;
    width: 50%;
    border-radius: 50%;
    position: absolute;
    top: 45%;
    transform: translate(0, -50%);
    z-index: 0;
    opacity: .7;
    background: var(--blue-gradient);
    box-shadow: 0 0 150px 200px var(--blue-gradient);
    transform: translate(-30%, -50%);
    left: 0
}

.zbanner .lhs,
.zbanner .rhs {
    width: 48%
}

.zbanner .lhs p {
    color: #c1c1c1;
    font-size: 24px;
    line-height: 32px
}

.zbanner .rhs {
    text-align: center
}

.btn-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 45px 0 64px
}

.btn-wrap a,
.zbottom a.btn1 {
    text-align: center;
    max-width: max-content;
    font-size: 16px;
    font-family: var(--primaryfont-semibold);
    padding: 12px 30px;
    background: #f3403c;
    border: 1px solid #f3403c
}

.btn-wrap a.req-btn {
    background-color: transparent;
    border-color: var(--zbs-white-color);
    color: var(--zbs-white-color);
    display: inline-block
}

.zlabel p {
    justify-content: flex-start;
    gap: 10px
}

.zbanner .zlabel a {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -.36px;
    color: #fff;
    border-bottom: 1px solid
}

.zbanner .rhs img {
    animation: scale-in-tl .6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    padding: 30px
}

@keyframes scale-in-tl {
    0% {
        transform: scale(0);
        transform-origin: 0 0;
        opacity: 1
    }

    100% {
        transform: scale(1);
        transform-origin: 0 0;
        opacity: 1
    }
}

.apps-download-links-wrap a.app-store {
    background-position: 0 -35px
}

.apps-download-links-wrap a {
    height: 41px;
    width: 119px;
    margin: 0 5px 5px 0;
    background-size: 804px auto;
    background-position: 0 -34px;
    display: inline-block;
    text-indent: -99999px
}

.apps-download-links-wrap a.g-play {
    width: 133px;
    background-position: -120px -35px
}

.apps-download-links-wrap a {
    height: 41px;
    width: 119px;
    margin: 0 5px 5px 0;
    background-size: 804px auto;
    background-position: 0 -34px;
    display: inline-block;
    text-indent: -99999px
}

.zcol-sec {
    background-color: #000;
    color: #fff;
    max-width: 95%;
    border-radius: 10px;
    margin: auto
}

.zcol-sec h3 {
    color: #FFF;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.96px
}

.zcol-sec p {
    color: #b6b6b6;
    font-size: 24px
}

.zinner-wrap .lhs,
.zinner-wrap .rhs {
    width: 47%
}

.zinner-wrap p {
    max-width: 572px
}

.zinner-wrap img {
    display: block;
    margin: auto;
    text-align: center;
    opacity: 0;
    transform: translateX(-30px);
    transition: all .5s ease-out
}

.zgame .zinner-wrap img {
    transform: translateX(30px)
}

.middle-animated .zinner-wrap img {
    opacity: 1;
    transform: translateX(0)
}

.grid-title {
    margin-top: 70px;
    margin-bottom: 40px
}

.zevent-org {
    border-radius: 10px;
    background: #3730b6;
    max-width: 95%;
    margin: 0 auto 70px;
    color: #fff;
    padding-top: 64px
}

.zevent-inner h3 {
    color: #FFF;
    font-size: 52px;
    line-height: 60px;
    letter-spacing: -1.04px
}

.zevent-inner p {
    color: #d2cffe;
    font-size: 24px;
    line-height: 32px;
    max-width: 850px;
    margin: auto
}

.zevent-inner img {
    display: block;
    margin: 60px auto 0;
    opacity: 0;
    transform: translateY(30px) scale(.9);
    transition: all .6s ease-in .1s
}

.middle-animated .zevent-inner img {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.scroll-grid {
    align-items: flex-start;
    margin-top: 56px
}

.scroll-grid .lhs {
    width: 45%;
    position: sticky;
    top: 100px
}

.scroll-grid .rhs {
    width: 55%
}

.scroll-grid .rhs ul li {
    padding: 40px 0;
    border-bottom: 1px solid rgba(211, 211, 211, 1)
}

.scroll-grid .rhs ul li p {
    max-width: 600px
}

.pos_sticky-grid {
    width: 100%;
    height: 100%;
    min-height: 590px;
    max-width: 100%;
    margin: auto;
    text-align: center
}

.scroll-grid .lhs .tab-wrap {
    text-align: center
}

.scroll-grid .rhs ul li {
    opacity: .4;
    padding-left: 14px;
    margin-bottom: 130px;
    transition: .2s ease-out;
    color: transparent;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5)
}

.scroll-grid .rhs ul li.active {
    opacity: 1;
    color: rgba(51, 51, 51, 1);
    text-shadow: unset
}

.scroll-grid .rhs ul li:last-child {
    border-bottom: 0
}

.scroll-grid .rhs ul li:last-child {
    margin-bottom: 0
}

.scroll-grid .lhs .tab-box {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all .2s ease-in;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.scroll-grid .lhs .tab-box.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0)
}

.scroll-grid .lhs .tab-box img {
    box-sizing: border-box;
    transition: all .3s ease-in;
    padding: 0px 0 0;
    filter: drop-shadow(4px 12px 36px rgba(216, 216, 216, 0.4))
}

.zbottom {
    background: #3730b6;
    color: #FFF
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    .pd-tb {
        padding: 100px 0
    }

    h2 {
        font: 42px/1.25 Zoho_Puvi_SemiBold
    }

    .zevent-inner h3,
    .zcol-sec h3 {
        font-size: 32px;
        line-height: 1.25
    }

    .zcol-sec p {
        font-size: 16px;
        max-width: 440px
    }

    .zinner-wrap img {
        box-sizing: border-box;
        padding: 0 40px
    }

    .scroll-grid .rhs ul li h3,
    .scroll-grid .rhs ul li p {
        max-width: 490px
    }

    .zevent-inner p {
        font-size: 17px;
        line-height: 1.6;
        max-width: 600px;
        margin: auto
    }

    .zbottom h2 {
        max-width: 450px;
        margin: auto auto 15px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .pd-tb {
        padding: 80px 0
    }

    h2 {
        font-size: 32px
    }

    .zbanner .lhs h1 {
        font-size: 36px
    }

    .zbanner .lhs p {
        font-size: 18px;
        line-height: 1.6
    }

    .btn-wrap {
        margin: 36px 0 42px
    }

    .zbanner .zlabel p {
        font-size: 16px;
        line-height: 1.6
    }

    .scroll-grid .lhs .tab-box img {
        padding: 40px
    }

    .scroll-grid .rhs ul li h3,
    .scroll-grid .rhs ul li p {
        max-width: 430px
    }

    .zcol-sec h3 {
        font-size: 26px;
        line-height: 1.25
    }

    .zcol-sec p,
    .zinner-wrap p {
        max-width: 450px
    }

    .zcol-sec p {
        font-size: 15px
    }

    .zevent-inner img,
    .zinner-wrap img {
        padding: 0 60px;
        box-sizing: border-box
    }

    .zevent-inner h3 {
        font-size: 26px;
        line-height: 1.25
    }

    .zevent-inner p {
        font-size: 15px;
        line-height: 1.6;
        max-width: 550px;
        margin: auto
    }

    .zbottom h2 {
        max-width: 400px;
        margin: auto auto 15px
    }
}

@media only screen and (max-width:1199px) {
    .zbanner .zlabel a {
        font-size: 15px
    }

    .banr-sub {
        display: block
    }

    .zcol-sec.pd-tb,
    .zevent-org.pd-tb {
        padding-bottom: 0
    }

    .scroll-grid .rhs ul li {
        margin-bottom: 160px
    }

    .zcol-sec .zflex,
    .zinner-wrap .zflex {
        justify-content: center
    }
}

@media only screen and (max-width:1090px) {

    .btn-wrap a,
    .zbottom a.btn1 {
        font-size: 12px;
        padding: 12px 14px
    }
}

@media only screen and (max-width:991px) {
    .pd-tb {
        padding: 50px 0
    }

    h2 {
        font-size: 32px
    }

    .zbanner .lhs p {
        font-size: 18px;
        line-height: 1.6
    }

    .btn-wrap {
        margin: 40px 0 32px
    }

    .zbanner .zlabel p {
        font-size: 15px
    }

    .zevent-inner h3 {
        font-size: 24px;
        line-height: 1.25
    }

    .zevent-inner p {
        font-size: 15px;
        line-height: 1.6;
        max-width: 550px;
        margin: auto
    }

    .zevent-inner img,
    .zinner-wrap img {
        padding: 0 40px;
        box-sizing: border-box
    }

    .zcol-sec.pd-tb,
    .zevent-org.pd-tb {
        padding-bottom: 0
    }

    .zcol-sec h3 {
        font-size: 21px;
        line-height: 1.25
    }

    .zcol-sec p {
        font-size: 15px
    }

    .scroll-grid .lhs .tab-box img {
        padding: 40px
    }

    .scroll-grid .rhs ul li h3,
    .scroll-grid .rhs ul li p {
        max-width: 400px
    }

    .zbottom h2 {
        max-width: 400px;
        margin: auto auto 15px
    }

    .grid-title {
        margin-top: 50px;
        margin-bottom: 20px
    }

    .grid-title h2 {
        font-size: 25px
    }
}

@media only screen and (max-width:767px) {
    .zbanner:before {
        display: none
    }

    .content-wrap {
        max-width: 460px
    }

    .zflex {
        flex-direction: column
    }

    .zbanner .lhs,
    .zbanner .rhs,
    .zinner-wrap .lhs,
    .zinner-wrap .rhs,
    .scroll-grid .rhs {
        width: 100%
    }

    .zbanner .lhs,
    .zbanner .rhs,
    .zinner-wrap .rhs {
        text-align: center
    }

    .btn-wrap {
        justify-content: center
    }

    .zlabel {
        gap: 10px;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 20px
    }

    .zbanner .zlabel p {
        margin-bottom: 0;
        font-size: 14px
    }

    .zbanner .rhs img {
        max-width: 85%;
        margin: auto;
        text-align: center
    }

    .zcol-sec .zflex {
        flex-direction: column-reverse;
        gap: 20px
    }

    .zgame .zflex {
        flex-direction: column
    }

    .zinner-wrap img {
        transform: scale(.9);
        padding: 40px 60px 0;
        box-sizing: border-box
    }

    .zinner-wrap .lhs {
        text-align: center
    }

    .zgame .zinner-wrap img {
        transform: scale(.9)
    }

    .middle-animated .zinner-wrap img {
        transform: scale(1)
    }

    .scroll-sec.pd-tb {
        padding-bottom: 0
    }

    .scroll-grid .lhs {
        display: none
    }

    .scroll-grid .rhs ul li {
        margin-bottom: 0;
        opacity: 1;
        color: unset;
        text-shadow: unset
    }

    .scroll-grid .rhs ul li:last-child {
        margin-bottom: 0;
        padding-bottom: 0
    }

    .scroll-grid .rhs ul li:last-child p {
        margin-bottom: 0
    }

    .scroll-grid {
        margin-top: 0
    }

    .zbottom {
        margin-top: 50px
    }
}

@media only screen and (max-width:1200px) {
    .break {
        display: none
    }
}

@media only screen and (min-width:1200px) {

    .zcol-sec.pd-tb,
    .zevent-org.pd-tb {
        padding-bottom: 0
    }

    .zbanner .zflex {
        align-items: flex-start
    }

    .zbanner .lhs {
        padding-top: 120px
    }

    .apps-download-links-wrap {
        margin: 30px 0 60px
    }
}

@media only screen and (min-width:1400px) {
    .scroll-sec .scroll-grid {
        margin-top: 0;
        margin-bottom: 50px
    }

    .zbanner {
        padding: 50px 0 100px
    }

    .zbanner .rhs img {
        padding: 20px
    }

    .zbanner h1 {
        font-size: 64px;
        line-height: 68px;
        letter-spacing: -1.28px;
        font-family: var(--zf-primary-semibold)
    }

    p {
        font-size: 16px;
        letter-spacing: -.18px
    }

    h2 {
        font-size: 54px;
        line-height: 68px;
        letter-spacing: -0.48px;
        font-family: var(--zf-primary-semibold)
    }

    .tab-sec h3 {
        font-size: 48px;
        line-height: 58px;
        letter-spacing: -0.48px;
        font-family: var(--zf-primary-semibold)
    }

    .scroll-grid .rhs ul li h3 {
        font-size: 36px;
        line-height: 1.25;
        letter-spacing: -0.2px
    }

    .scroll-grid .rhs ul li p {
        font-size: 24px;
        line-height: 32px
    }
}