.zsection {
    position: relative;
    }
    
    .act-btn {
    padding: 12px 30px;
    border-radius: 5px;
    }
    
    p {
    font-size: 18px;
    font-family: var(--zf-primary-regular);
    }
    
    h1,
    h3 {
    font-family: var(--zf-secondary-bold);
    }
    
    h3 {
    font-size: 38px;
    line-height: 1.2;
    }
    
    .zsection .content-wrap {
    width: 90%;
    max-width: 1170px;
    margin: 0 auto;
    overflow: hidden;
    padding: 120px 0;
    }
    
    .zwatch {
    margin-top: 12px;
    }
    
    .watch-btn {
    color: #000;
    padding: 8px 0 10px 38px;
    text-transform: none
    }
    
    .watch-btn:after,
    .watch-btn:before {
    position: absolute;
    content: ''
    }
    
    .watch-btn:before {
    left: 0;
    top: 8px;
    width: 26px;
    height: 26px;
    border: 1px solid #000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 100%
    }
    
    .watch-btn:after {
    left: 11px;
    top: 16px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #000
    }
    
    .zcustom-inner,
    .zclock-wrap {
    position: relative;
    }
    span.zclick {
    max-width: 50px;
    display: block;
    margin: 0 auto 60px;
    cursor: pointer;
    animation: zeven 5s linear .2s infinite;
    }
    @-webkit-keyframes zeven {
    0% { -webkit-transform: translate(0, 0); transform: translate(0, 0);}
    50% { -webkit-transform: translate(0, -14px); transform: translate(0, -14px);}
    100% { -webkit-transform: translate(0, 0); transform: translate(0, 0);}
    }
    @keyframes zeven {
    0% { -webkit-transform: translate(0, 0); transform: translate(0, 0);}
    50% { -webkit-transform: translate(0, -14px); transform: translate(0, -14px);}
    100% { -webkit-transform: translate(0, 0); transform: translate(0, 0);}
    }
    .zfirst {
    position: relative;
    }
    
    .zfirst:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -120px;
    top: -120px;
    background-image: url(/sites/zweb/images/writer/main-clock.png);
    background-size: 250px 250px;
    width: 250px;
    height: 250px;
    background-repeat: no-repeat;
    transform: rotate(115deg);
    }
    
    .zfirst:after {
    content: "";
    position: absolute;
    z-index: 100000;
    left: 1px;
    top: -73px;
    background-image: url(/sites/zweb/images/writer/clock-needle.png);
    background-size: 70px 70px;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    transform: rotate(120deg);
    transform-origin: left bottom;
    transition: all .8s;
    }
    
    .zone.in-view:after {
    transform: rotate(150deg);
    }
    
    .ztwo.in-view:after {
    transform: rotate(180deg);
    }
    
    .ztwo.zthree.in-view:after {
    transform: rotate(210deg);
    }
    
    .ztwo.zthree.zfour.in-view:after {
    transform: rotate(250deg);
    }
    
    .zsection.zbanner .content-wrap {
    padding-top: 90px;
    }
    
    .zw-product-header,
    .zbanner {
    background: #F0EDE2;
    transition: 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
    }
    
    .zanimate-bg {
    position: relative;
    transition: 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
    }
    
    .zanimate-bg:before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 25%;
    background: #F0EDE2;
    transition: 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
    /* transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1); */
    }
    
    .zbody-animate .zanimate-bg:before,
    .zbody-animate .zanimate-bg,
    .zbody-animate .zbanner {
    background: #92D3CB;
    }
    
    
    
    
    .zbanner h1 {
    max-width: 660px;
    margin: 0 auto 20px;
    font-size: 60px;
    }
    
    .zbanner {
    text-align: center;
    }
    
    .zbanner-inner {
    font-size: 20px;
    max-width: 660px;
    margin: 0 auto;
    }
    
    .zcustom .content-wrap {
    overflow: visible;
    padding-bottom: 0;
    }
    
    .zcustom .zcustom-inner .zinner-wrap {
    margin-bottom: 12%;
    }
    
    .zsection .zinner-wrap a {
    color: #5baba1;
    }
    
    .zsection .zinner-wrap>div {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    }
    
    .zsection .zinner-wrap>div:nth-child(1) {
    width: 50%;
    padding-right: 10px;
    }
    
    .zsection .zinner-wrap>div:nth-child(2) {
    width: 49%;
    }
    
    
    
    .zone-inner {
    border: 1px solid red;
    }
    
    .zcustom-inner .zinner-wrap {
    width: 100%;
    border: 3px solid;
    margin: 0 auto;
    padding: 6% 4% 6% 7%;
    box-sizing: border-box;
    border-radius: 10px;
    position: -webkit-sticky;
    position: sticky;
    z-index: -1;
    background: #FFFFFF;
    }
    
    .zinner-wrap>div p {
    max-width: 430px;
    }
    
    .zinner-wrap>div img {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translate3d(0px, 40px, 0);
    transform: translate3d(0px, 40px, 0);
    -webkit-transition: opacity 0.75s ease-in, -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.75s ease-in, -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.75s
    cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.75s
    cubic-bezier(0.39, 0.575, 0.565, 1);
    -webkit-transition-delay: 450ms;
    transition-delay: 450ms;
    }
    
    .zinner-wrap.in-view>div img {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translate3d(0px, 0px, 0);
    transform: translate3d(0px, 0px, 0);
    }
    
    
    #zone {
    position: -webkit-sticky;
    position: sticky;
    top: 22vh;
    z-index: 1;
    }
    
    #ztwo {
    position: -webkit-sticky;
    position: sticky;
    top: 22vh;
    z-index: 2;
    }
    
    #zthree {
    position: -webkit-sticky;
    position: sticky;
    top: 22vh;
    z-index: 3;
    }
    
    #zfour {
    position: -webkit-sticky;
    position: sticky;
    top: 22vh;
    z-index: 4;
    margin-bottom: 12%;
    }
    
    .zpossible {
    text-align: center;
    }
    
    .zpossible p {
    max-width: 840px;
    margin: 0 auto 20px;
    }
    
    .zpossible .image-part,
    .zpossible .image-part img {
    max-width: 36%;
    margin-top: 40px;
    }
    
    .zbest .content-wrap {
    padding: 0;
    }
    
    .zbest ul {
    margin-top: 8%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    }
    
    .zbest ul li {
    border: 1.5px solid #252633;
    /* float: left; */
    width: 29%;
    margin-right: 6%;
    border-radius: 12px;
    padding: 40px 40px 26px 40px;
    text-align: left;
    box-sizing: border-box;
    background: #B5D9D9;
    position: relative;
    margin-bottom: 10px;
    border-bottom-width: 6px;
    opacity: 0;
    transform: translateY(20px);
    -webkit-transition: opacity 0.75s ease-in, -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.75s ease-in, -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.75s
    cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.75s
    cubic-bezier(0.39, 0.575, 0.565, 1);
    }
    
    .zbest ul li:nth-child(2) {
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms;
    }
    
    .zbest ul li:nth-child(3) {
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms;
    }
    
    .zbest .animated ul li {
    opacity: 1;
    transform: translateY(0);
    }
    
    .zbest ul li:last-child {
    margin-right: 0;
    }
    
    .zbest ul li p {
    font-family: var(--zf-secondary-medium);
    }
    
    .zbest .zbest-btn {
    display: inline-block;
    font-family: var(--zf-primary-semibold), Arial, Helvetica, sans-serif;
    padding: 12px 26px;
    margin: 0;
    color: #333;
    border: 1px solid transparent;
    cursor: pointer;
    box-sizing: border-box;
    z-index: 1;
    font-size: 16px;
    background: #252633;
    color: #FAFAFA;
    border-radius: 4px;
    font-size: 14px;
    }
    
    .zworks {
    text-align: center;
    /* background: #252633; */
    color: #fff;
    position: relative;
    }
    
    .zworks:before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    background: #252633;
    height: 100%;
    }
    
    /* .zworks:after {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    background: #92D3CB;
    height: 30%;
    z-index: -1;
    } */
    
    .zworks h3
    
    /* , .zbest h3,.zpossible h3 */
    {
    font-size: 46px;
    text-align: center;
    margin: 0 auto 20px;
    letter-spacing: .2px;
    }
    
    .zworks ul {
    max-width: 600px;
    border: 1px solid;
    margin: 150px auto 0;
    position: relative;
    }
    
    .zworks ul:before {
    content: '';
    position: absolute;
    width: 2px;
    height: 68%;
    background: red;
    top: 38px;
    }
    
    .zworks ul li:nth-child(odd) {
    text-align: left;
    max-width: 190px;
    margin-left: 5%;
    }
    
    .zworks ul li:nth-child(even) {
    max-width: 300px;
    text-align: left;
    margin-right: -12%;
    margin-left: auto;
    }
    
    .zworks ul li {
    position: relative;
    }
    
    .zworks ul li:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid;
    top: 0;
    }
    
    
    .zstart,
    .zbest {
    text-align: center;
    }
    
    
    
    
    /* timeline */
    
    .zwork-container {
    width: 70%;
    margin: 100px auto 0;
    position: relative;
    overflow: hidden;
    padding-top: 118px;
    }
    
    .zwork-container:before {
    content: '';
    position: absolute;
    top: 130px;
    left: 50%;
    margin-left: -1px;
    width: 1px;
    height: 59.6%;
    background: #CCD1D9;
    /* z-index: 1 */
    }
    
    .timeline-block {
    width: -webkit-calc(50% + 4px);
    width: -moz-calc(50% + 4px);
    width: calc(50% + 4px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    clear: both;
    }
    
    .timeline-block-right {
    float: right;
    }
    
    .timeline-block-left {
    float: left;
    direction: rtl
    }
    
    .marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    margin-top: 10px;
    z-index: 9999;
    position: relative;
    }
    
    .timeline-block-left .marker {
    left: 2px;
    }
    
    .timeline-block-right .marker {
    right: 2px;
    }
    
    .timeline-content {
    width: 75%;
    padding: 0 15px;
    text-align: left;
    position: relative;
    top: -110px;
    }
    
    .timeline-block.timeline-block-left p {
    max-width: 230px;
    margin-left: 0;
    margin-right: auto;
    }
    
    .timeline-block p {
    font-family: var(--zf-secondary-medium);
    }
    
    
    .timeline-block-left .timeline-content {
    left: 100px;
    position: relative;
    }
    
    .timeline-content .znote {
    color: #aba9a9;
    font-size: 15px;
    }
    
    .zguide a {
    color: #74A54F;
    border: 1px solid;
    padding: 16px 33px;
    border-radius: 5px;
    display: inline-block;
    line-height: 1.4;
    }
    
    p.zguide {
    text-align: center;
    }
    
    .zwork-container .zanimation-element,
    .zpossible img {
    webkit-transform: translate3d(0px, 40px, 0);
    transform: translate3d(0px, 40px, 0);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: opacity 0.75s ease-in, -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.75s ease-in, -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.75s
    cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.75s
    cubic-bezier(0.39, 0.575, 0.565, 1);
    }
    
    .zwork-container>div:nth-child(2) {
    -webkit-transition-delay: 100ms;
    transition-delay: 100ms;
    }
    
    .zwork-container>div:nth-child(3) {
    -webkit-transition-delay: 100ms;
    transition-delay: 100ms;
    }
    
    .zwork-container>div:nth-child(4) {
    -webkit-transition-delay: 100ms;
    transition-delay: 100ms;
    }
    
    /* .zbanner .animated h1,
    .zbanner .animated .zbanner-inner, */
    .zwork-container .zanimation-element.in-view,
    .zpossible .middle-animated img {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translate3d(0px, 0px, 0);
    transform: translate3d(0px, 0px, 0);
    }
    
    p.zpossible-cta>a {
    color: #000;
    border: 2px solid;
    padding: 12px 28px;
    border-radius: 5px;
    margin-right: 10px;
    min-width: 210px;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
    }
    p.zpossible-cta>a:hover {
    -webkit-transform: scale(.98);
    -ms-transform: scale(.98);
    transform: scale(.98);
    }
    p.zpossible-cta {
    display: block;
    margin-top: 40px;
    }
    
    p.zpossible-cta>a:nth-child(2) {
    margin-right: 0;
    }
    
    .zsee-cta {
    position: relative;
    top: -150px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    }
    
    @media screen and (min-width: 1681px) {
    .zfirst:after {
    transform: rotate(210deg);
    }
    }
    
    @media screen and (max-width: 1500px) {
    .zanimate-bg:before{
    height: 28%;
    }
    .zcustom .content-wrap{
    padding-top: 0;
    }
    .zsee-cta{
    top: -90px;
    }
    .zcustom-inner,
    .zclock-wrap {
    max-width: 80%;
    margin: 0 auto;
    }
    
    .zinner-wrap h3 {
    font-size: 24px;
    max-width: 350px;
    }
    
    .zcustom-inner .zinner-wrap {
    padding: 4% 4% 6% 6%;
    }
    
    .zfirst:before {
    transform: scale(.7);
    }
    
    .zfirst:after {
    transform: scale(.8) rotate(120deg);
    left: 0px;
    top: -79px;
    }
    .zfirst:before{
    left: -130px;
    top: -130px;
    }
    .zone.in-view:after {
    transform: scale(.8) rotate(140deg);
    }
    
    .ztwo.in-view:after {
    transform: scale(.8) rotate(160deg);
    }
    
    .ztwo.zthree.in-view:after {
    transform: scale(.8) rotate(180deg);
    }
    
    .ztwo.zthree.zfour.in-view:after {
    transform: scale(.8) rotate(200deg);
    }
    span.zclick{
    margin-bottom: 0;
    }
    }
    
    @media screen and (max-width: 1400px) {
    .zcustom-inner .zinner-wrap {
    padding: 4% 4% 4% 6%;
    }
    }
    @media screen and (max-width: 1280px) {
    .timeline-content {
    width: 84%;
    }
    
    .timeline-content .znote {
    font-size: 16px;
    }
    }
    
    @media screen and (max-width: 1140px) {
    .timeline-content p {
    font-size: 17px;
    }
    
    .zwork-container {
    width: 80%;
    }
    
    .zbanner h1 {
    max-width: 620px;
    font-size: 40px;
    }
    
    .zsection.zbanner .content-wrap {
    padding: 60px 0;
    }
    .zsee-cta{
    top: -40px;
    }
    .zfirst:after {
    transform: scale(.8) rotate(170deg);
    }
    }
    
    @media screen and (max-width: 1024px) {
    .zbest ul li {
    padding: 40px 30px 26px 30px;
    }
    
    .zfirst:before {
    transform: scale(.8);
    }
    
    .zfirst:before,
    .zfirst:after {
    content: none;
    }
    
    .zcustom-inner,
    .zclock-wrap {
    max-width: 100%;
    }
    
    #zone,
    #ztwo,
    #zthree,
    #zfour {
    top: 30px;
    }
    }
    
    @media screen and (max-width: 992px) {
    .zbest ul li {
    padding: 38px 30px 20px 30px;
    }
    
    .zbanner h1 {
    max-width: 480px;
    font-size: 30px;
    }
    .zcustom-inner .zinner-wrap {
    padding: 10% 5%;
    }
    }
    
    @media screen and (max-width: 991px) {
    .container:before {
    left: 8px;
    width: 2px;
    }
    
    .timeline-block {
    width: 100%;
    margin-bottom: 30px;
    }
    
    .timeline-block-right {
    float: none;
    }
    
    .timeline-block-left {
    float: none;
    direction: ltr;
    }
    
    .marker {
    display: none;
    }
    
    .timeline-content {
    top: 0;
    text-align: center;
    width: 100%;
    padding: 0;
    }
    
    .zwork-container {
    width: 70%;
    padding-top: 0;
    }
    
    .timeline-block-left .timeline-content {
    left: 0;
    }
    
    .timeline-block.timeline-block-left p,
    .timeline-content p {
    max-width: 290px;
    margin: 0 auto 40px;
    }
    
    .zwork-container:before {
    content: none;
    }
    
    .zbest ul {
    max-width: 50%;
    display: block;
    margin: 60px auto 0;
    }
    
    .zbest ul li {
    width: 100%;
    text-align: center;
    padding: 44px 30px 24px 30px;
    margin-bottom: 30px;
    }
    
    }
    
    
    
    @media screen and (max-width: 767px) {
    .zworks h3 {
    font-size: 36px;
    }
    .zbest ul {
    max-width: 80%;
    }
    .zsection.zcustom .content-wrap{
    padding-top: 0;
    }
    .zpossible .image-part img {
    max-width: 100%;
    }
    
    .zpossible .image-part {
    max-width: 80%;
    display: block;
    margin: 0 auto;
    }
    
    .zsection .content-wrap {
    padding: 90px 0;
    }
    
    h3 {
    font-size: 28px;
    }
    
    .zsection.zpossible .content-wrap {
    padding-bottom: 0;
    }
    
    .zsection.zstart .content-wrap {
    padding-top: 0;
    }
    
    .zwork-container {
    width: 100%;
    padding-top: 0;
    margin-top: 60px;
    }
    
    .zbest .middle-animated ul li {
    opacity: 1;
    transform: translateY(0);
    }
    
    p.zpossible-cta>a {
    display: block;
    max-width: 260px;
    margin: 0 auto 40px;
    }
    
    p.zpossible-cta>a:nth-child(2) {
    margin-right: auto;
    }
    
    .zsection .zinner-wrap>div,
    .zsection .zinner-wrap>div:nth-child(1) {
    display: block;
    width: 100%;
    text-align: center;
    }
    
    .zinner-wrap>div p {
    max-width: 100%;
    }
    
    .zsection .zinner-wrap>div:nth-child(2) {
    width: 60%;
    margin: 0 auto;
    }
    
    .zcustom-inner .zinner-wrap {
    padding: 14% 4% 10% 6%;
    }
    
    .zinner-wrap h3 {
    font-size: 26px;
    margin: 0 auto 20px;
    }
    }
    
    
    
    
    /* timeline */
    
    [class|=zicon] {
    background: url(/sites/zweb/images/writer/savetime-sprite.png);
    background-size: 420px auto;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-bottom: 16px;
    }
    
    .zicon-create {
    background-position: 2px 7px;
    }
    
    .zicon-connect {
    background-position: -108px 1px;
    width: 110px;
    }
    
    .zicon-map {
    background-position: -218px 0px;
    width: 93px;
    }
    
    .zicon-custom {
    background-position: -310px 4px;
    width: 100px;
    }