#content .history {
  padding: 110px 0; }
  #content .history > p {
    position: relative;
    margin-bottom: 180px;
    font-size: 2.5rem;
    font-weight: 600; }
    #content .history > p::before {
      content: "";
      display: block;
      width: 35px;
      height: 3px;
      background: var(--main-color);
      position: absolute;
      left: 0;
      top: -32px; }
  #content .history .historyBox {
    position: relative; }
    #content .history .historyBox .progress {
      width: 3px;
      height: calc(96% + 19px);
      z-index: -1;
      position: absolute;
      left: 50%;
      top: 20px;
      transform: translateX(-50%); }
      #content .history .historyBox .progress .progressBar {
        width: 3px;
        height: 213px;
        background: var(--main-color);
        transition: .3s ease-out; }
    #content .history .historyBox ul {
      position: relative; }
      #content .history .historyBox ul::before {
        content: "";
        display: block;
        width: 1px;
        height: calc(96% + 19px);
        background: rgba(48, 45, 44, 0.4);
        position: absolute;
        left: 50%;
        top: 20px;
        transform: translateX(-50%);
        z-index: -1; }
      #content .history .historyBox ul li.year {
        width: 50%;
        padding: 0 60px 0 0;
        position: relative;
        margin-bottom: 60px;
        text-align: right; }
        #content .history .historyBox ul li.year::before {
          content: "";
          display: block;
          width: 315px;
          height: 314px;
          position: absolute;
          right: 0;
          top: -260px;
          z-index: -1; }
        #content .history .historyBox ul li.year img {
          content: "";
          display: block;
          object-fit: cover;
          object-position: center;
          position: absolute;
          right: 0;
          top: -260px;
          z-index: -1; }
        #content .history .historyBox ul li.year dl dt {
          font-size: 2.81rem;
          font-weight: 600;
          margin-bottom: 15px;
          position: relative; }
          #content .history .historyBox ul li.year dl dt::before {
            content: "";
            display: block;
            width: 8px;
            height: 8px;
            border-radius: 50px;
            border: 3px solid var(--text-color);
            position: absolute;
            right: -67px;
            top: 50%;
            transform: translateY(-50%);
            background: #fff;
            transition: .3s ease-out;
            z-index: 2; }
        #content .history .historyBox ul li.year dl dd {
          font-weight: 500;
          margin-bottom: 15px;
          display: flex;
          gap: 34px;
          justify-content: flex-end; }
          #content .history .historyBox ul li.year dl dd span {
            color: rgba(48, 45, 44, 0.5); }
        #content .history .historyBox ul li.year dl dd:last-child {
          margin-bottom: 0; }
      #content .history .historyBox ul li:nth-of-type(even) {
        text-align: left;
        transform: translateX(100%);
        padding: 0 0 0 60px; }
        #content .history .historyBox ul li:nth-of-type(even) dl dt::before {
          right: auto;
          left: -67px; }
        #content .history .historyBox ul li:nth-of-type(even) dl dd {
          flex-direction: row-reverse; }
      #content .history .historyBox ul li:nth-of-type(odd)::before {
        right: auto;
        left: 0;
        top: 50%;
        transform: translateY(-50%); }
      #content .history .historyBox ul li:nth-of-type(odd) img {
        right: auto;
        left: 0;
        top: 50%;
        transform: translateY(-50%); }
      #content .history .historyBox ul li.focus dl dt {
        color: var(--main-color); }
        #content .history .historyBox ul li.focus dl dt::before {
          border: 3px solid var(--main-color); }

@media screen and (max-width: 1800px) {
  #content .history .historyBox ul li.year img {
    width: 200px;
    height: 200px; } }
@media screen and (max-width: 1600px) {
  #content .history .historyBox ul li.year img,
  #content .history .historyBox ul li:nth-of-type(odd) img {
    top: -160px;
    transform: translateY(0); } }
@media screen and (max-width: 1280px) {
  #content .history > p {
    font-size: 1.88rem; }

  #content .history .historyBox ul li.year dl dt {
    font-size: 2.19rem; }

  #content .history .historyBox ul li.year img {
    top: -170px; }

  #content .history .historyBox .progress,
  #content .history .historyBox ul::before {
    height: calc(96% + 10px); } }
@media screen and (max-width: 1024px) {
  #content .history > p {
    font-size: 1.38rem;
    margin-bottom: 80px; }

  #content .history .historyBox ul li.year img {
    width: 150px;
    height: 150px; }

  #content .history .historyBox ul li.year img,
  #content .history .historyBox ul li:nth-of-type(odd) img {
    top: 120%; }

  #content .history .historyBox ul li.year dl dd {
    gap: 15px; } }
@media screen and (max-width: 768px) {
  #content .history .historyBox ul::before,
  #content .history .historyBox .progress {
    left: 0; }

  #content .history .historyBox ul li.year {
    width: 100%;
    text-align: left;
    padding: 0 0 0 60px; }

  #content .history .historyBox ul li.year dl dd {
    flex-direction: row-reverse; }

  #content .history .historyBox ul li:nth-of-type(even) {
    transform: translateX(0); }

  #content .history .historyBox ul li.year dl dt::before {
    right: auto;
    left: -67px; }

  #content .history .historyBox ul li.year img,
  #content .history .historyBox ul li:nth-of-type(odd) img {
    top: 140px;
    right: 0;
    left: auto; }

  #content .history .historyBox ul li.year dl {
    width: 75%; }

  #content .history .historyBox ul li.year img {
    width: 100px;
    height: 100px; } }
@media screen and (max-width: 640px) {
  #content .history .historyBox ul li.year {
    padding: 0 0 0 30px; }

  #content .history .historyBox ul li.year dl dt {
    font-size: 1.88rem; }

  #content .history .historyBox ul li.year dl dt::before {
    left: -37px; }

  #content .history .historyBox ul li.year img {
    position: relative;
    top: 10px;
    right: -70%; }

  #content .history .historyBox ul li.year dl {
    width: 100%; }

  #content .history .historyBox .progress, #content .history .historyBox ul::before {
    height: calc(97% + 30px); } }