*{
    box-sizing: border-box;
}
.dsp-flx{
    display: flex;
}
.flx-wrap{
    flex-wrap: wrap;
}
.justify-space{
    justify-content: space-between;
}
.justify-center{
    justify-content: center;
}
.align-center{
    align-items: center;
}
.signalter-wrap h1{
    font-size: 50px;
}
.signalter-wrap h2{
    font-size: 40px;
}
.signalter-wrap h3{
    font-size: 30px;
}
.signalter-wrap h2,.signalter-wrap h3{
    font-family: var(--zf-primary-bold);
}
.signalter-wrap .act-btn{
    font-size: 17px;
    padding: 10px 32px; 
}
/*box-sign*/
.box-sign{
    padding: 120px 0px 140px;
}
.box-sign-wrap{
    max-width: 980px;
    margin: 0 auto;
}
.box-sign-wrap p{
    font-size: 20px;
}
.box-left{
    width: 55%;
}
.box-right{
    width: 40%;
    position: relative;
}
.box-left h1 span{
    display: block;
}
.box-left h1 .zwc-sub-txt{
    color: #5D5D5D;
    margin-bottom: 25px;
    font-size: 20px;
    font-family: var(--primaryfont-regular);
    margin: 20px 0 25px;
}
.box-sign-wrap .box-left p+p{
    font-size: 22px;
    max-width: 380px;
    margin-bottom: 25px;
}
.box-right p{
    padding: 45px 50px;
    background: #EAF5FF;
    margin-bottom: 0px;
}
.box-right p span{
    display: block;
    margin-top: 30px;
    font-family: var(--primaryfont-semibold);
}
/*sign-box-compare*/
.sign-box-compare{
    color: #fff;
    background: #2148AA;
    padding: 100px 0px 260px;
}
.signbox-compare-wrap{
    max-width: 1080px;
    margin:0 auto;
}
.signbox-compare-wrap h2{
    text-align: center;
    margin-bottom: 85px;
}
.comparison-table{
    position: relative;
}
.comparison-table li:first-child{
    position: sticky;
    top:40px;
    z-index: 1;
}
.comparison-table li{
    z-index: -1;
}
.comparison-table li p{
    width: 33.3%;
    padding: 30px 50px;
    font-size: 20px;
    margin-bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    font-family: var(--primaryfont-semibold);
    background: #2148AA;
}
.comparison-table li p.head{
    font-size: 30px;
    font-family: var(--zf-primary-semibold);
    text-align: center;
}
.comparison-table li p.head span,.comparison-table li .desc{
    display: inline-flex;
    font-size: 16px;    
    font-family: var(--primaryfont-regular);
}
.comparison-table li p:first-child{
    align-items: flex-start;
}
.comparison-table p:not(:nth-of-type(2)){
    border-bottom: 1px solid #B2B2B2;
}
.comparison-table li p:nth-of-type(2){
    color: #000;
    background: #FFC341;
    text-align: center;
}
.comparison-table li p:nth-of-type(3) .tick,.comparison-table li p:nth-of-type(3) .tick::before{
    border-color: #fff;
}
.tick{
    display: inline-block;
    position:relative;
    border: 2px solid #000;
    border-radius: 50%;
    width: 36px;
    height: 36px;
}
.tick::before{
    content: "";
    position: absolute;
    width: 17px;
    height: 10px;
    border: 3px solid #000;
    border-top: none;
    border-right: none;
    top: 43%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-40deg);    
}
.mar-bot-30{
    margin-bottom: 30px;
}
.comparison-table li .desc.btm-ylw{
    display: inline-flex;
    flex-direction: row;

}
.btm-ylw,.top-ylw{
    position: relative;
}
.btm-ylw::after,.top-ylw::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: -100%;
    background: #ffc241;
    border-radius: 0px 0px 5px 5px;
}
.top-ylw::after{
    bottom: 0;
    top: -5%;
    height: 20%;
    border-radius: 5px 5px 0px 0px;
}
/*sign-team*/
.sign-team{
    padding: 120px 0px 0;
}
.sign-team-wrap{
    max-width: 1080px;
    margin: 0 auto;
}
.sign-team-wrap h2{
    max-width: 580px;
    margin-bottom:70px;
}
.sign-team-list li{
    width: 25%;
    padding-top: 55px;
    position: relative;
}
.sign-team-list li::before{
    content: "";
    position: absolute;
    /* background: url(assets/sign-alter.png) no-repeat; */
    background: url(/sites/zweb/images/sign/sign-alter.png) no-repeat;
    background-size: 1134px auto;
    left: 0;
    top:0;
}
.sign-team-list li.resource::before{
    background-position: -47px -16px;
    width: 45px;
	height: 36px;
}
.sign-team-list li.support::before{
    background-position: -102px -17px;
    width: 38px;
	height: 35px;
}
.sign-team-list li.webinar::before{
    background-position: -150px -16px;
    width: 67px;
    height: 40px;
}

/*alternative-footer*/
.alternative-footer{
    padding: 130px 0px;
    text-align: center;
}
.alternative-footer h2{
    max-width: 630px;
    margin: 0 auto 30px;
}
.alternative-footer h2 span{
    display: block;
    color: #000;
}
.bg-blue{
    color: #2148AA;
}
/*animation*/
.color-blue {
    background: -webkit-gradient(linear,left top,right top,from(#2148aa),color-stop(50%,#2148aa),color-stop(50%,#000));
    background: -o-linear-gradient(left,#2148aa,#2148aa 50%,#000 50%);
    background: linear-gradient(to right,#2148aa,#2148aa 50%,#000 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%;
}
.middle-animated .color-blue {
    background-position: 0 100%;
    transition: all 1s ease;
}
.arrow-svg{
    position: absolute;
    left: -85px;
    bottom: -94px;
}
.path-2{
    opacity: 0;
}
@keyframes integrationdash {
    0% {
        stroke-dashoffset: 1000
    }

    100% {
        stroke-dashoffset: 0
    }
}
.middle-animated .path-1 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: integrationdash 1s linear forwards 1s;
}
.middle-animated .path-2{
    opacity: 1;
    transition-delay: 1.2s;
}
/*media-queries*/
@media only screen and (max-width:1199px){
    .signalter-wrap h1 {
        font-size: 45px;
    }
    .box-sign {
        padding: 100px 0px 120px;
    }
    .signalter-wrap h2 {
        font-size: 38px;
    }
    .signalter-wrap h3 {
        font-size: 28px;
    }
    .comparison-table li p.head {
        font-size: 28px;
    }
    .comparison-table li p{
        font-size: 18px;
        padding: 25px 45px;
    }
    .sign-box-compare{
        padding: 100px 0px 230px;
    }
    .sign-team {
        padding: 100px 0px 0;
    }
    .alternative-footer {
        padding: 100px 0px;
    }
}
@media only screen and (max-width:1199px){
    .comparison-table li:first-child{
        top:0;
    }
}
@media only screen and (max-width:1099px){
    .signalter-wrap h1 {
        font-size: 40px;
    }
    .signalter-wrap h2 {
        font-size: 35px;
    }
    .signalter-wrap h3 {
        font-size: 25px;
    }
    .box-sign-wrap .box-left p+p{
        font-size: 20px;
    }
    .box-sign {
        padding: 80px 0px 100px;
    }
    .signbox-compare-wrap h2{
        margin-bottom: 60px;
    }
    .comparison-table li p.head {
        font-size: 26px;
    }
    .comparison-table li p{
        padding: 20px 40px;
    }
    .sign-box-compare {
        padding: 100px 0px 200px;
    }
    .comparison-table li p{
        font-size: 17px;
    }
    .alternative-footer {
        padding: 80px 0px 90px;
    }
}
@media only screen and (max-width:991px){
    .signalter-wrap h1 {
        font-size: 38px;
    }
    .signalter-wrap h3 {
        font-size: 22px;
    }
    .box-sign-wrap p,.box-sign-wrap .box-left p+p{
        font-size: 17px;
    }
    .box-left h1 .zwc-sub-txt,.box-sign-wrap .box-left p+p{
        margin-bottom: 20px;
    }
    .box-right p{
        padding: 30px 30px;
    }
    .box-sign {
        padding: 60px 0px 80px;
    }
    .sign-box-compare {
        padding: 80px 0px 160px;
    }
    .signbox-compare-wrap h2 {
        margin-bottom: 50px;
    }
    .signalter-wrap h2 {
        font-size: 32px;
    }
    .comparison-table li p.head {
        font-size: 24px;
    }
    .tick{
        width: 30px;
        height: 30px;
    }
    .tick::before{
        width: 12px;
        height: 8px;
        border-width: 3px;
    }
    .comparison-table li p {
        padding: 15px 30px;
    }
    .comparison-table li p {
        font-size: 16px;
    }
    .comparison-table li p.head span, .comparison-table li .desc{
        font-size: 14px;
    }
    .btm-ylw::after{
        bottom: -80%;
    }
    .mar-bot-30 {
        margin-bottom: 15px;
    }
    .sign-team {
        padding: 80px 0px 0;
    }
    .sign-team-wrap h2{
        margin-bottom: 50px;
    }
    .sign-team-list li{
        width: 28%;
    }
    .slick-next:after, .slick-prev:after{
        right: -166px;
        top: -109px;
    }
    .slick-next:before, .slick-prev:before{
        right: -160px;
        top: -60px;
    }
}
@media only screen and (max-width:767px){
    .arrow-svg{
        display: none;
    }
    .signalter-wrap h1 {
        font-size: 35px;
    }
    .signalter-wrap h2 {
        font-size: 28px;
    }
    .signalter-wrap .act-btn {
        font-size: 15px;
        padding: 8px 28px;
    }
    .box-sign-wrap,.sign-team-list{
        flex-direction: column;
    }
    .box-sign {
        padding: 50px 0px 70px;
        text-align: center;
    }
    .box-left,.box-right,.sign-team-list li{
        width: 100%;
    }
    .box-sign-wrap .box-left p+p{
        max-width: 100%;
    }
    .box-right p{
        margin-top: 50px;
    }
    .box-right p span{
        display: inline;    
    }
    .sign-box-compare {
        padding: 60px 0px 120px;
    }
    .comparison-table li p.head {
        font-size: 22px;
    }
    .comparison-table li p {
        font-size: 14px;
    }
    .comparison-table li p.head span, .comparison-table li .desc{
        font-size: 13px;
    }
    .signbox-compare-wrap h2 {
        margin-bottom: 40px;
    }
    .btm-ylw::after {
        bottom: -70%;
    }
    .tick {
        width: 25px;
        height: 25px;
    }
    .tick::before {
        width: 10px;
        height: 6px;
        border-width: 2px;
    }
    .sign-team {
        padding: 60px 0px 0;
    }
    .sign-team-wrap h2{
        max-width: 100%;
        text-align: center;
        margin-bottom: 40px;
    }
    .sign-team-list li:not(:last-child){
     margin-bottom: 30px;   
    }
    .slick-next{
        display: none !important;
    }
    .alternative-footer {
        padding: 60px 0px 70px;
    }
    .slick-list{
        pointer-events: unset;
    }
}
@media only screen and (max-width:600px){
    .comparison-table{
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .comparison-table li{
        width: 650px;
    }
}
@media only screen and (max-width:480px){
    .comparison-table li{
        width: 510px;
    }
    .comparison-table li p.head {
        font-size: 20px;
    }
    .comparison-table li p.head span, .comparison-table li .desc {
        font-size: 12px;
    }
    .comparison-table li p {
        padding: 10px 25px;
    }
    .sign-box-compare {
        padding: 60px 0px 70px;
    }
    .signalter-wrap h2{
        font-size: 26px;
    }
}