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


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

.qh-history{
  width:100%;
  padding:52px 0 58px;

  background-color:#f6f6f8;

  background-image:
    linear-gradient(
      to bottom,
      rgba(246,246,248,.72) 0%,
      rgba(246,246,248,.74) 55%,
      rgba(246,246,248,.88) 82%,
      rgba(246,246,248,1) 100%
    ),
    url("//ueeshop.ly200-cdn.com/u_file/UPBB/UPBB186/2608/17/photo/1-173649c966.jpg");

  background-position:
    center bottom,
    center bottom;

  background-size:
    100% 100%,
    cover;

  background-repeat:
    no-repeat,
    no-repeat;

  color:#151515;
}


/* =========================
   INNER
========================= */

.qh-history__in{
  width:calc(100% - 36px);
  max-width:1440px;
  margin:0 auto;
}


/* =========================
   TITLE
========================= */

.qh-history h2{
  margin:0 0 52px;

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

  color:#151515;
}


/* =========================
   TIMELINE
========================= */

.qh-history__grid{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));

  align-items:end;

  gap:10px;

  min-height:500px;
}


/* =========================
   YEAR
========================= */

.qh-history__year{
  position:relative;

  min-height:230px;

  padding:18px 12px 20px 18px;

  border-left:2px solid #1765ff;

  background:
    linear-gradient(
      90deg,
      rgba(23,101,255,.06),
      transparent
    );
}


/* 时间轴阶梯高度 */

.qh-history__year:nth-child(2){
  min-height:260px;
}

.qh-history__year:nth-child(3){
  min-height:290px;
}

.qh-history__year:nth-child(4){
  min-height:320px;
}

.qh-history__year:nth-child(5){
  min-height:350px;
}

.qh-history__year:nth-child(6){
  min-height:380px;
}

.qh-history__year:nth-child(7){
  min-height:410px;
}

.qh-history__year:nth-child(8){
  min-height:440px;
}

.qh-history__year:nth-child(9){
  min-height:470px;
}


/* =========================
   TOP ARROW
========================= */

.qh-history__year:before{
  content:"";

  position:absolute;

  left:-7px;
  top:0;

  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:12px solid #1765ff;
}


/* =========================
   YEAR TITLE
========================= */

.qh-history__year h3{
  margin:-52px 0 20px;

  font-size:16px;
  line-height:1.3;
  font-weight:400;

  color:#151515;
}


/* =========================
   EVENT
========================= */

.qh-history__event{
  margin:0 0 22px;
}


/* 月份 */

.qh-history__event b{
  display:block;

  margin-bottom:6px;

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

  color:#151515;
}


/* 描述 */

.qh-history__event p{
  margin:0;

  color:#4b4b4b;

  font-size:15px;
  line-height:1.45;
  font-weight:300;
}


/* =========================================
   DESKTOP HOVER ANIMATION
========================================= */

@media (min-width:1051px){

  .qh-history__year{
    transition:
      transform .38s cubic-bezier(.22,.61,.36,1),
      opacity .32s ease,
      filter .32s ease,
      background .32s ease;

    transform-origin:center bottom;
    z-index:1;
  }

  .qh-history__year h3{
    transition:
      transform .38s cubic-bezier(.22,.61,.36,1),
      opacity .32s ease,
      color .32s ease;
  }

  .qh-history__event{
    transition:
      transform .38s cubic-bezier(.22,.61,.36,1),
      opacity .32s ease;
  }


  /* 鼠标进入整个区域后，所有年度先缩小 */

  .qh-history__grid:hover .qh-history__year{
    transform:scale(.92);
    opacity:.48;
    filter:saturate(.8);
  }


  /* 当前年度放大 */

  .qh-history__grid .qh-history__year:hover{
    transform:scale(1.10);
    opacity:1;
    filter:none;
    z-index:10;

    background:
      linear-gradient(
        90deg,
        rgba(23,101,255,.13),
        rgba(23,101,255,.035) 72%,
        transparent
      );
  }


  /* 当前年份数字突出 */

  .qh-history__grid .qh-history__year:hover h3{
    transform:scale(1.22);
    transform-origin:left center;

    color:#1765ff;
  }


  /* 当前年度内容轻微向右 */

  .qh-history__grid .qh-history__year:hover .qh-history__event{
    transform:translateX(4px);
  }


  /* 当前年度蓝线加强 */

  .qh-history__grid .qh-history__year:hover{
    border-left-color:#1765ff;
  }

}


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

@media(max-width:1050px){

  .qh-history__grid{
    grid-template-columns:repeat(3,1fr);

    align-items:stretch;

    min-height:0;

    gap:38px 18px;
  }


  .qh-history__year,
  .qh-history__year:nth-child(n){
    min-height:0;
  }


  .qh-history__year h3{
    margin:-6px 0 18px;
  }

}


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

@media(max-width:600px){

  .qh-history{
    padding:34px 0 42px;

    background-color:#f6f6f8;

    background-image:
      linear-gradient(
        to bottom,
        rgba(246,246,248,.76) 0%,
        rgba(246,246,248,.82) 60%,
        rgba(246,246,248,.94) 86%,
        rgba(246,246,248,1) 100%
      ),
      url("//ueeshop.ly200-cdn.com/u_file/UPBB/UPBB186/2608/17/photo/1-173649c966.jpg");
  }


  .qh-history__in{
    width:calc(100% - 28px);
  }


  .qh-history h2{
    margin-bottom:30px;

    font-size:30px;
  }


  .qh-history__grid{
    grid-template-columns:1fr;

    gap:18px;
  }


  .qh-history__year,
  .qh-history__year:nth-child(n){
    min-height:0;

    padding:14px 14px 6px 20px;
  }


  .qh-history__year h3{
    margin:0 0 15px;

    font-size:16px;
  }


  .qh-history__event{
    margin-bottom:15px;
  }


  .qh-history__event b{
    font-size:16px;
  }


  .qh-history__event p{
    font-size:16px;
    line-height:1.45;
  }

}