.intro_04 {
  .yyf_history {
    padding-left: 20px;
    .history_ul {
      list-style: none;
      padding-left: 0;
      .history_li {
        display: flex;
        gap: 20px;
        .year {
          width: 100px;
          padding: 20px 0;
          position: relative;
          h3 {
            font-weight: 600;
            color: var(--main-blue-normal);
            margin-bottom: 0;
          }
        }
        .year::before {
          position: absolute;
          width: 16px;
          height: 16px;
          border-radius: 10px;
          border: 3px solid var(--main-blue-normal);
          display: block;
          background-color: var(--white);
          content: '';
          right: -8px;
          top: 26px;
          z-index: 9;
        }
        .history_items {
          list-style: none;
          padding-left: 0;
          width: calc(100% - 120px);
          .history_item {
            padding: 20px 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            position: relative;
            h5 {
              font-weight: 600;
              margin-bottom: 0;
            }
            span {
              padding-left: 10px;
              position: relative;
            }
            span::before {
              width: 3px;
              height: 3px;
              background-color: var(--main-blue-normal);
              content: '';
              display: block;
              position: absolute;
              left: 0;
              border-radius: 2px;
              top: 11px;
            }
          }
          .history_item::before {
            width: 8px;
            height: 8px;
            background-color: var(--main-blue-normal);
            display: block;
            border-radius: 4px;
            content: '';
            position: absolute;
            left: -24px;
            top: 30px;
          }
          .history_item::after {
            width: 1px;
            height: 100%;
            background-color: var(--main-blue-normal);
            position: absolute;
            top: 0;
            content: '';
            left: -20px;
          }
        }
      }
      .history_li:first-child {
        .history_items {
          .history_item:first-child::after {
            width: 1px;
            height: calc(100% - 30px);
            background-color: var(--main-blue-normal);
            position: absolute;
            bottom: 0;
            top: auto;
          }
        }
      }
      .history_li:last-child {
        .history_items {
          .history_item:last-child::after {
            height: 30px;
          }
        }
      }
    }
  }
}