/* 769px이상 적용 */
@media (min-width: 769px) {
  #section-04 .card-title-area .toggle-btn,
  #section-05 .card-title-area .toggle-btn,
  #section-06 .card-title-area .toggle-btn,
  #section-07 .card-title-area .toggle-btn {
    display: none !important;
  }
}

/* 768px이하 적용 */
@media (max-width: 768px) {
  .top-btn {
    width: 50px !important;
    height: 50px !important;
    background-size: 24px !important;
  }

  .card-counter:before {
    font-size: 2rem;
  }

  .card-counter {
    font-size: 3rem;
  }

  .card-body figure.image {
    max-width: 100% !important;
  }

  #section-03 .timeline-title,
  .card-title {
    font-size: 1.55rem;
  }
  
  #section-04 .card-title-area,
  #section-05 .card-title-area,
  #section-06 .card-title-area,
  #section-07 .card-title-area {
    display: flex;
    gap: 10px;
  }
  
  #section-04 .card-title-area .card-title,
  #section-05 .card-title-area .card-title,
  #section-06 .card-title-area .card-title,
  #section-07 .card-title-area .card-title {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  #section-04 .card-title-area .toggle-btn,
  #section-05 .card-title-area .toggle-btn,
  #section-06 .card-title-area .toggle-btn,
  #section-07 .card-title-area .toggle-btn {
    display: none;
    border: none;
    background-color: transparent;
    font-size: 25px;
    color: #000;
  }

  #section-04 .row .toggle.active .card-title-area .card-title,
  #section-05 .row .toggle.active .card-title-area .card-title,
  #section-06 .row .toggle.active .card-title-area .card-title,
  #section-07 .row .toggle.active .card-title-area .card-title {
    -webkit-line-clamp: unset;
    overflow: visible;
    max-height: unset;
  }

  #section-04 .row .toggle.active .card-title-area .toggle-btn,
  #section-05 .row .toggle.active .card-title-area .toggle-btn,
  #section-06 .row .toggle.active .card-title-area .toggle-btn,
  #section-07 .row .toggle.active .card-title-area .toggle-btn {
    transform: rotate(180deg);
  }

  .card-img-wrap {
    max-width: 100% !important;
    height: 220px !important;
  }

  #section-02 .col .row {
    flex-wrap: nowrap;
  }

  #section-02 .col .row .col-12 {
    flex: auto;
  }

  #section-02 .col .article h3 {
    font-size: 2rem;
  }

  #section-02 .col .article h5 {
    font-size: 1.75rem;
  }

  #section-03 .timeline-item {
    margin-bottom: 4rem;
  }

  #section-08 .filter-btn {
    font-size: 1.1rem;
  }

  #section-02 .article h2 {
    font-size: 2.2rem;
  }

  /*.profile-image-wrap {*/
  /*  width: 120px !important;*/
  /*  margin-bottom: 56px !important;*/
  /*}*/

  .jumbotron-img {
    width: 9rem !important;
    height: 12rem !important;
  }
}