v/* Column Wrap */

element.style {
}
.zw-product-header {
    background: #000;
}
.zw-product-header.zwph-white{
    background:#000;
}
.zcol-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.zcol {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 0 49.4%;
}

.zcol-3 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 0 32.5%;
}


/* Column Wrap */

.head-title {
    font-family: var(--primaryfont-bold);
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.zsection {
    padding: 60px 0;
}

.mb-30 {
    margin-bottom: 25px;
}

.zsection h2.head-title {
    font-family: var(--zf-primary-extrabold);
    margin-bottom: 30px;
}


/* section 1 */

.zsection.hero-wrap {
    position: relative;
    background: #000000;
    color: #fff;
    overflow: hidden;
    padding-bottom: 0;
}

.hero-content {
    max-width: 655px;
    min-height: 670px;
}

.hero-content h1 {
    color: #3182FF;
    font-family: var(--zf-primary-extrabold);
}

.hero-content p {
    max-width: 563px;
    font-size: 22px;
    margin-bottom: 40px;
}

a.gpt-btn {
    background: #3382FF;
    color: #fff;
    font-family: var(--primaryfont-bold);
    padding: 8px 30px;
}

.hero-wrap::after {
    content: '';
    position: absolute;
    width: 100%;
    max-width: 960px;
    height: 480px;
    background: url(/sites/zweb/images/writer/chatgpt/hero-creative.png) no-repeat center;
    background-size: 100%;
    bottom: -2%;
    right: 0%;
}


/* section 1 */


/* section 2 */

.what-why {
    background: #EFEFEF;
}

.w-content-block {
    max-width: 570px;
}

.w-content-block p>a {
    color: #226EB3;
}

.w-content-block p>a,
.w-content-block p>b {
    font-family: var(--primaryfont-semibold);
}


/* section 2 */


/* section 3 */

.win-block {
    max-width: 418px;
}

.win-block h3 {
    max-width: 405px;
}

img.border-style {
    border: 1px solid #efefef;
}

.use-content {
    padding: 80px 0 50px;
    max-width: 630px;
    margin: 0 auto;
    text-align: center;
}

.zcol-wrap.uses {
    align-items: baseline;
}


/* section 3 */


/* section 4 */

.feature-wrap {
    background: #EFEFEF;
}

.fea-content {
    width: 100%;
    max-width: 494px;
    margin: 0 auto;
}

.fea-creative {
    width: 100%;
    text-align: center;
}

.pb-80 {
    padding-bottom: 60px;
}


/* section 4 */


/* section 5 */

.zsection.extension-wrap h2.head-title {
    font-family: var(--primaryfont-bold);
}

.zsection.extension-wrap .zcol-wrap {
    align-items: flex-start;
    padding-left: 20%;
}
.extension-wrap p{
    position: relative;
    padding-left: 90px;
    margin-bottom: 75px;
    max-width: 415px
}
.extension-wrap p:before {
    position: absolute;
    content: "";
    width: 75px;
    height: 75px;
    background: url(/sites/zweb/images/writer/chatgpt/icons.png) no-repeat 0px 0px/150px;
    left: 3px;
    top: 0px;
}
.extension-wrap p:nth-child(2):before {
    background-position: 0px -80px;
}
.extension-wrap .zcol4 p:nth-child(1):before {
    background-position: -80px 0px;
}

.extension-wrap .zcol4 p:nth-child(2):before {
    background-position: -80px -80px;
}



.extension-wrap .zcol-3{
    flex: 0 47%;
}

/* section 5 */


/* section 6 */

.advantage-wrap {
    background: #000;
    color: #fff;
}

.advantage-block p {
    max-width: 432px;
}

.advantage-wrap ul {
    display: flex;
    flex-wrap: wrap;
}

.advantage-wrap ul li {
    position: relative;
    color: #fff;
    width: 75%;
    margin-bottom: 20px;
    padding-left: 30px;
}

.advantage-wrap ul li:before {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background: #3382ff;
    left: 0;
    top: 3px;
    border-radius: 50%;
}

.advantage-wrap ul li:after {
    position: absolute;
    content: "";
    width: 11px;
    height: 6px;
    left: 5px;
    top: 9px;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(-42deg);
}


/* section 6 */


/* section 7 */

.bottom-wrap {
    background: #e5e6ea;
}

.zsection.bottom-wrap {
    text-align: center;
}

.zsection.bottom-wrap h3.head-title {
    margin-bottom: 25px;
}

/* section 7 */

@media only screen and (min-width: 1670px) and (max-width: 1680px) {
    .hero-content {
        padding-left: 9%;
    }
}

@media only screen and (min-width: 1580px) and (max-width: 1670px) {
    .hero-content {
        padding-left: 3%;
    }
}


@media(min-width:992px) {
  p{
    font-size: 17px;
    line-height: 1.6;
  }

    /* Column */
    .zcol.zcol-8 {
        flex: 0 53.7%;
    }
    .zcol.zcol-4 {
        flex: 0 46.3%;
    }
    /* Column */
    .zsection {
        padding: 100px 0;
    }
    h1.head-title {
        font-size: 70px;
    }
    h2.head-title {
        font-size: 50px;
    }
    h3.head-title {
        font-size: 40px;
    }
    h4.head-title {
        font-size: 32px;
    }
    .hero-wrap::after {
        bottom: -12%;
        transform: scale(.95);
        right: -3%;
        transition: ease-in .6s;
    }
    .hero-wrap.animation::after {
        transform: scale(1);
        bottom: -2%;
        right: 0%;
    }
    section.zsection.what-why {
        background-repeat: no-repeat;
        background-size: 580px;
        background-position: left bottom;
        background-position-x: 12%;
    }
    .what-why .zcol {
        min-height: 650px;
    }
    .what-why .zcol.what {
        justify-content: flex-start;
    }
    .what-why .zcol.why {
        justify-content: flex-end;
        position: relative;
        top: 50px;
        margin-bottom: 30px;
    }
    .w-content-block p {
        font-size: 22px;
    }
    .what-why .zcol.why .w-content-block {
        padding-top: 10%;
    }
    section.zsection.what-why {
        padding-bottom: 50px;
    }
    img.border-style {
        transform: translateX(-5%);
        transition: ease-in .7s;
    }
    .animated img.border-style {
        transform: translateX(0);
    }
    .animate-left-1,
    .animate-left-2,
    .animate-left-3 {
        opacity: 0;
        transition: ease-in .7s;
    }
    .animate-left-1 {
        transform: translateX(30%);
        transition-delay: 250ms;
    }
    .animate-left-2 {
        transform: translateX(60%);
        transition-delay: 500ms;
    }
    .animate-left-3 {
        transform: translateX(90%);
        transition-delay: 750ms;
    }
    .top-animated .animate-left-1,
    .top-animated .animate-left-2,
    .top-animated .animate-left-3 {
        opacity: 1;
        transform: translateX(0%);
    }
    .fea-creative img {
        transform: scale(.85);
        transition: ease all .6s;
    }
    .animated .fea-creative.firstimg img {
        transition-delay: 300ms;
        transform: scale(1);
    }
    .middle-animated .fea-creative.middleimg img {
        transition-delay: 300ms;
        transform: scale(1);
    }
    .top-animated .fea-creative.lastimg img {
        transition-delay: 300ms;
        transform: scale(1);
    }
    .extension-wrap img {
        transform: translateX(-10%);
        opacity: 0;
        transition: ease-in .5s;
    }
    .extension-wrap .animated img {
        opacity: 1;
        transform: translateX(0%);
    }
    .zsection.extension-wrap .zcol-wrap .zcol-3:nth-of-type(3) p {
        padding-left: 30px;
    }
}

@media(max-width:1420px) {
    .hero-wrap::after,
    .hero-wrap.animation::after {
        max-width: 858px;
        bottom: -5%;
    }
}

@media(max-width:1300px) {
    .hero-wrap::after,
    .hero-wrap.animation::after {
        max-width: 750px;
        bottom: -9%;
    }
    .hero-content {
        min-height: 660px;
    }
    section.zsection.what-why {
        background-position-x: 0%;
        background-size: 500px;
        background-repeat: no-repeat;
    }
}

@media(max-width:1199px) {
    .zsection.extension-wrap .zcol-wrap {
        padding-left: 0%;
    }
}
@media(max-width:991px) {
    .extension-wrap .zcol-3 {
        flex: 0 100%;
    }
    .extension-wrap p {
        margin: 0 auto 60px;
    }
    .zsection.extension-wrap .zcol-wrap {
        padding-left: 0%;
    }
    .zcol-inverse {
        flex-direction: column-reverse;
    }
    .zcol,
    .zcol-3 {
        flex: 0 100%;
        align-items: center;
        padding: 0;
    }
    h1.head-title {
        font-size: 50px;
    }
    h2.head-title {
        font-size: 40px;
    }
    h3.head-title {
        font-size: 30px;
    }
    h4.head-title {
        font-size: 22px;
    }
    .hero-content {
        min-height: 700px;
        text-align: center;
        margin: 0 auto;
    }
    .hero-content p {
        max-width: 100%;
        font-size: 18px;
    }
    section.zsection.what-why {
        background-blend-mode: lighten;
        background-position: left bottom;
    }
    .zsection.bottom-wrap .content-wrap.zcol-wrap {
        flex-direction: column;
    }
    .zsection.bottom-wrap h3.head-title {
        margin-bottom: 20px;
        font-size: 32px;
    }
    .hero-wrap::after {
        max-width: 750px;
        bottom: -8%;
    }
    .hero-wrap::after,
    .hero-wrap.animation::after {
        bottom: -12%;
    }
    .win-block,
    .win-block h3 {
        max-width: 767px;
        text-align: center;
    }
    .zcol-wrap.uses .zcol-3 {
        flex: 0 49%;
    }
    .zcol-wrap.uses .zcol-3.animate-left-3 {
        flex: 0 100%;
    }
    .zsection.extension-wrap h2.head-title {
        text-align: center;
        margin: 0 auto;
    }
    .w-content-block {
        max-width: 680px;
    }
    .zcol-wrap.uses{
        text-align: center;
    }   
    .fea-content, .extension-wrap p{
        max-width: 680px;
        margin: 0 auto 20px;
    } 
    .advantage-block {
        text-align: left;
        max-width: 680px;
        margin: 0 auto;
    }
    .advantage-block p{
        max-width: 100%;
    }
    .advantage-wrap ul{
        justify-content: center;
    }
}

@media(max-width:767px) {
    h1.head-title {
        font-size: 40px;
    }
    h2.head-title {
        font-size: 30px;
    }
    h3.head-title,
    .zsection.bottom-wrap h3.head-title {
        font-size: 26px;
    }
    h4.head-title {
        font-size: 20px;
    }
    .hero-content {
        min-height: 630px;
    }
    .hero-wrap::after,
    .hero-wrap.animation::after {
        bottom: -15%;
    }
    .zcol-wrap.uses .zcol-3 {
        flex: 0 100%;
        text-align: center;.
    }
}

@media(max-width:480px) {
    .hero-wrap::after,
    .hero-wrap.animation::after {
        bottom: -20%;
    }
}

@media(max-width:360px) {
    .hero-wrap::after,
    .hero-wrap.animation::after {
        bottom: -25%;
    }
}