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

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

.qq-faq{
  width:100%;

  padding:58px 0 64px;

  background:#f6f6f8;

  color:#151515;
}

.qq-faq__in{
  width:calc(100% - 36px);

  max-width:1440px;

  margin:0 auto;
}


/* =========================
   HEADER
========================= */

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

  margin:0 0 38px;

  text-align:left;
}


.qq-faq__eyebrow{
  display:block;

  margin-bottom:10px;

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

  letter-spacing:1.5px;

  color:#0868e8;
}


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

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

  color:#111;
}


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

  margin:0;

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

  color:#666a72;
}


/* =========================
   GRID
========================= */

.qq-faq__grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;
}


/* =========================
   FAQ ITEM
========================= */

.qq-faq__item{
  align-self:start;

  overflow:hidden;

  background:#fff;

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

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


.qq-faq__item:hover{
  border-color:rgba(8,104,232,.25);
}


.qq-faq__item.is-open{
  border-color:rgba(8,104,232,.32);

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.04);
}


/* =========================
   QUESTION
========================= */

.qq-faq__question{
  width:100%;

  min-height:76px;

  padding:18px 20px;

  display:grid;

  grid-template-columns:
    34px
    minmax(0,1fr)
    24px;

  align-items:center;

  gap:12px;

  margin:0;

  background:transparent;

  border:0;

  outline:0;

  text-align:left;

  font-family:"Montserrat-Light","Montserrat",Arial,sans-serif;

  cursor:pointer;
}


/* 编号 */

.qq-faq__number{
  font-size:11px;
  line-height:1;
  font-weight:700;

  letter-spacing:.5px;

  color:#0868e8;
}


/* 问题标题 */

.qq-faq__title{
  font-size:16px;
  line-height:1.45;
  font-weight:700;

  color:#1b1b1d;
}


/* =========================
   PLUS
========================= */

.qq-faq__plus{
  position:relative;

  width:24px;
  height:24px;

  display:block;

  border-radius:50%;

  background:#edf5ff;
}


.qq-faq__plus::before,
.qq-faq__plus::after{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  background:#0868e8;

  transform:
    translate(-50%,-50%);

  transition:
    transform .22s ease,
    opacity .22s ease;
}


/* 横线 */

.qq-faq__plus::before{
  width:10px;
  height:1.5px;
}


/* 竖线 */

.qq-faq__plus::after{
  width:1.5px;
  height:10px;
}


/* 打开以后变减号 */

.qq-faq__item.is-open
.qq-faq__plus::after{
  opacity:0;

  transform:
    translate(-50%,-50%)
    rotate(90deg);
}


/* =========================
   ANSWER
========================= */

.qq-faq__answer{
  display:grid;

  grid-template-rows:0fr;

  transition:
    grid-template-rows .28s ease;
}


.qq-faq__item.is-open
.qq-faq__answer{
  grid-template-rows:1fr;
}


.qq-faq__answer-in{
  overflow:hidden;
}


.qq-faq__answer p{
  margin:0 20px 20px 66px;

  padding-top:17px;

  border-top:1px solid #eeeeef;

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

  color:#666a72;
}


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

@media(max-width:900px){

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


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

}


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

@media(max-width:600px){

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


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


  /* Header */

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


  .qq-faq__eyebrow{
    font-size:10px;

    letter-spacing:1.3px;
  }


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


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


  /* FAQ */

  .qq-faq__grid{
    gap:9px;
  }


  .qq-faq__item{
    border-radius:10px;
  }


  .qq-faq__question{
    min-height:68px;

    padding:16px 14px;

    grid-template-columns:
      27px
      minmax(0,1fr)
      22px;

    gap:9px;
  }


  .qq-faq__number{
    font-size:10px;
  }


  .qq-faq__title{
    font-size:15px;
    line-height:1.4;
  }


  .qq-faq__plus{
    width:22px;
    height:22px;
  }


  .qq-faq__answer p{
    margin:
      0
      14px
      16px
      50px;

    padding-top:14px;

    font-size:14px;
    line-height:1.6;
  }

}