/* =========================
   BASE
========================= */

.qq-endcta,
.qq-endcta *{
  box-sizing:border-box;
  font-family:"Montserrat-Light","Montserrat",Arial,sans-serif;
}

.qq-endcta{
  width:100%;
  padding:58px 0 64px;

  background:#f5f5f7;

  color:#151515;
}

.qq-endcta__in{
  width:calc(100% - 36px);
  max-width:1440px;

  margin:0 auto;
}


/* =========================
   HEADING
========================= */

.qq-endcta__head{
  max-width:900px;

  margin:0 0 38px;

  text-align:left;
}

.qq-endcta__eyebrow{
  display:block;

  margin-bottom:10px;

  font-size:12px;
  line-height:1.2;
  font-weight:700;

  letter-spacing:1.5px;

  color:#0868e8;
}

.qq-endcta__head h2{
  margin:0 0 16px;

  font-size:40px;
  line-height:1.2;
  font-weight:300;

  color:#111;
}

.qq-endcta__head p{
  max-width:760px;

  margin:0;

  font-size:15px;
  line-height:1.7;
  font-weight:300;

  color:#666a72;
}


/* =========================
   MAIN CARD
========================= */

.qq-endcta__card{
  width:100%;
  min-height:132px;

  padding:28px 30px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:32px;

  background:#fff;

  border:1px solid #e5e6e9;
  border-radius:12px;
}


/* 文案 */

.qq-endcta__content{
  max-width:720px;
}

.qq-endcta__content h3{
  margin:0 0 7px;

  font-size:17px;
  line-height:1.35;
  font-weight:700;

  color:#171719;
}

.qq-endcta__content p{
  margin:0;

  font-size:15px;
  line-height:1.6;
  font-weight:300;

  color:#666a72;
}


/* =========================
   BUTTONS
========================= */

.qq-endcta__actions{
  display:flex;
  align-items:center;

  gap:10px;

  flex-shrink:0;
}

.qq-endcta .qq-endcta__btn{
  min-width:150px;
  height:44px;

  padding:0 22px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin:0;
  float:none;

  border-radius:7px;

  font-size:14px;
  line-height:1;
  font-weight:700;

  text-align:center;
  text-decoration:none;

  cursor:pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}


/* 主按钮 */

.qq-endcta .qq-endcta__btn--primary{
  background:#0868e8 !important;

  color:#fff !important;

  border:1px solid #0868e8 !important;
}

.qq-endcta .qq-endcta__btn--primary:hover{
  background:#075bc9 !important;
  border-color:#075bc9 !important;
}


/* 次按钮 */

.qq-endcta .qq-endcta__btn--secondary{
  background:#fff !important;

  color:#171719 !important;

  border:1px solid #d9dce1 !important;
}

.qq-endcta .qq-endcta__btn--secondary:hover{
  color:#0868e8 !important;
  border-color:#0868e8 !important;
}


/* =========================
   BLUE BAR
========================= */

.qq-endcta__bar{
  margin-top:16px;

  display:grid;
  grid-template-columns:repeat(3,1fr);

  background:#0868e8;

  border-radius:12px;
  overflow:hidden;
}

.qq-endcta__bar-item{
  position:relative;

  min-height:88px;

  padding:20px 24px;

  display:flex;
  align-items:center;

  gap:14px;
}

.qq-endcta__bar-item:not(:last-child)::after{
  content:"";

  position:absolute;

  right:0;
  top:24%;

  width:1px;
  height:52%;

  background:rgba(255,255,255,.2);
}

.qq-endcta__check{
  width:32px;
  height:32px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:rgba(255,255,255,.14);

  font-size:16px;
  font-weight:700;

  color:#fff;
}

.qq-endcta__bar-item > div:last-child{
  display:flex;
  flex-direction:column;

  gap:3px;
}

.qq-endcta__bar-item strong{
  font-size:15px;
  line-height:1.35;
  font-weight:700;

  color:#fff;
}

.qq-endcta__bar-item span{
  font-size:14px;
  line-height:1.4;
  font-weight:300;

  color:rgba(255,255,255,.82);
}


/* =========================
   TABLET
========================= */

@media(max-width:900px){

  .qq-endcta{
    padding:48px 0 52px;
  }

  .qq-endcta__card{
    flex-direction:column;
    align-items:flex-start;
  }

  .qq-endcta__actions{
    width:100%;
  }

  .qq-endcta .qq-endcta__btn{
    flex:1;
  }

  .qq-endcta__bar{
    grid-template-columns:1fr;
  }

  .qq-endcta__bar-item:not(:last-child)::after{
    left:22px;
    right:22px;

    top:auto;
    bottom:0;

    width:auto;
    height:1px;
  }

}


/* =========================
   MOBILE
========================= */

@media(max-width:600px){

  .qq-endcta{
    padding:38px 0 42px;
  }

  .qq-endcta__in{
    width:calc(100% - 28px);
  }


  /* 标题 */

  .qq-endcta__head{
    margin-bottom:28px;
  }

  .qq-endcta__eyebrow{
    font-size:10px;
    letter-spacing:1.3px;
  }

  .qq-endcta__head h2{
    font-size:30px;
  }

  .qq-endcta__head p{
    font-size:14px;
    line-height:1.6;
  }


  /* Card */

  .qq-endcta__card{
    min-height:0;

    padding:20px 16px;

    gap:18px;

    border-radius:10px;
  }

  .qq-endcta__content h3{
    font-size:16px;
  }

  .qq-endcta__content p{
    font-size:14px;
    line-height:1.55;
  }


  /* Button */

  .qq-endcta__actions{
    flex-direction:column;

    gap:9px;
  }

  .qq-endcta .qq-endcta__btn{
    width:100%;
    min-width:0;

    height:42px;

    font-size:13px;
  }


  /* Blue Bar */

  .qq-endcta__bar{
    margin-top:10px;

    border-radius:10px;
  }

  .qq-endcta__bar-item{
    min-height:76px;

    padding:17px;
  }

  .qq-endcta__check{
    width:29px;
    height:29px;

    font-size:14px;
  }

  .qq-endcta__bar-item strong{
    font-size:14px;
  }

  .qq-endcta__bar-item span{
    font-size:13px;
  }

}