.banner {
  position: relative;
  overflow: hidden;

  .banner-slides {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;

    img {
      width: 100%;
      flex-shrink: 0;
    }
  }

  .banner-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
  }

  .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #b32b27;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .dot.active {
    width: 22px;
    border-radius: 36px;
    background-color: #fff;
  }
}

.block1 {
  position: relative;
  width: 1200px;
  height: 1238px;
  margin: 0 auto;

  .number {
    position: absolute;
    top: 90px;
    right: 0;
    font-size: 118px;
    background: linear-gradient(to bottom, rgba(186, 186, 186, 1), rgba(255, 255, 255, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

.left-img {
  position: absolute;
  top: -140px;
  left: 0;

  img {
    width: 432px;
    flex-shrink: 0;
  }
}

.right-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 740px;
  height: 942px;
  text-align: justify;
  margin-left: auto;
}

.title {
  padding-top: 90px;
  display: flex;
  gap: 20px;

  h2 {
    font-size: 30.4px;
    font-weight: bold;
    color: #a91b20;
  }

  span {
    display: flex;
    align-items: self-end;
    font-size: 15px;
    color: #156aa5;
  }

  .sub-title {
    font-size: 24px;
    font-weight: lighter;
    color: #a2a2a2;
  }

}

.sub-title1 {
  font-size: 35.5px;
  font-weight: normal;
  color: #a2a2a2;
}

.sub-title2 {
  font-size: 35.5px;
  font-weight: lighter;
  color: #a2a2a2;
}

.word1 {
  font-size: 15.2px;
  font-weight: bold;
  color: #045ea9;
  line-height: 30.2px;
}

.word2 {
  font-size: 15.2px;
  font-weight: lighter;
  color: #a2a2a2;
  line-height: 30.2px;
}

.bottom-title-top {
  display: flex;
  justify-content: center;
  padding-top: 110px;
  margin-bottom: 10px;

  h2 {
    font-size: 30.4px;
    font-weight: bold;
    color: #a91b20;
    padding: 0 20px;
  }

  span {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #156aa5;
  }
}

.sub-title3 {
  text-align: center;
  font-size: 35.5px;
  color: #a2a2a2;
  font-weight: normal;
}

.number2 {
  position: absolute;
  top: 0px;
  right: 50%;
  transform: translateX(50%);
  font-size: 118px;
  background: linear-gradient(to bottom, rgba(186, 186, 186, 1), rgba(255, 255, 255, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bottom-title {
  position: relative;
}

.block2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 708px;
  background-color: #265fa8;
}

.block3 {
  height: 1780px;

  .block3-item {
    position: relative;
    width: 1200px;
    margin: 34px auto;
    display: flex;
    align-items: center;

    .block3-item-left {
      width: 520px;

      img {
        width: 427px;
        height: 378px;
      }

      .block3-item-left-content {
        position: absolute;
        top: 60%;
        left: -33px;
        transform: translateY(-50%);
      }

      .block3-item-left-text1 {
        width: 190px;
        text-align: end;
        font-size: 20.3px;
        font-weight: bold;
        color: #045ea9;
      }

      .block3-item-left-text2 {
        width: 190px;
        text-align: end;
        font-size: 15.2px;
        font-weight: normal;
        color: #a2a2a2;
      }

      .block3-item-left-text3 {
        width: 190px;
        text-align: end;
        font-size: 15.2px;
        font-weight: normal;
        color: #a2a2a2;
      }

      .block3-item-left-text4 {
        position: absolute;
        bottom: 87px !important;
        right: 72%;
        transform: translateX(50%);
        display: block;
        font-size: 15.2px;
        font-weight: normal;
        color: #dc382c;
      }

      img {
        margin-left: 84px;
      }
    }

    .block3-item-right {
      width: 624px;

      .block3-item-right-text1 {
        font-size: 24.3px;
        font-weight: bold;
        color: #045ea9;
        margin-bottom: 10px;
      }

      .block3-item-right-text2 {
        font-size: 15.2px;
        font-weight: bold;
        color: #045ea9;
        text-align: justify;
        line-height: 30.2px;
      }

      .block3-item-right-text3 {
        font-size: 15.2px;
        font-weight: normal;
        color: #a2a2a2;
        text-align: justify;
        line-height: 30.2px;
      }
    }
  }
}

.block-bottom-item {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  .block3-item-left {
    width: 33.3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  p {
    font-size: 15.2px;
    font-weight: normal;
    color: #5a5a5a;
    width: 350px;
    text-align: justify;
  }

  .block3-item-left-text4 {
    position: absolute;
    bottom: 127px;
    right: 76%;
    transform: translateX(50%);
    display: block;
    font-size: 15.2px;
    font-weight: normal;
    color: #dc382c;
  }

  .block3-item-left-content {
    width: 33.3%;
    position: absolute;
    top: 52%;
    left: -61px;
    transform: translateY(-50%);

    .block3-item-left-text1 {
      width: 190px;
      text-align: end;
      font-size: 20.3px;
      font-weight: bold;
      color: #045ea9;
    }

    .block3-item-left-text2 {
      width: 190px;
      text-align: end;
      font-size: 15.2px;
      font-weight: normal;
      color: #a2a2a2;
    }

    .block3-item-left-text3 {
      width: 190px;
      text-align: end;
      font-size: 15.2px;
      font-weight: normal;
      color: #a2a2a2;
    }
  }

  .block3-item-left-img {
    margin-right: -74px;
    width: 341.6px;
    height: 302.4px;
  }
}

.block4 {
  position: relative;
  color: #fff;
  height: 744px;
  background-image: url(../img/g3.png);
  background-size: cover;
  background-position: center;

  .block4-content {
    width: 1030px;
    margin: 0 auto;

    .block4-content-item {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 10px;
      padding-top: 90px;

      .block4-content-date {
        font-size: 35.54px;
        color: #dc382c;
      }

      .block4-content-text {
        font-size: 20.31px;
        color: #dc382c;
      }
    }

    p {
      width: 384px;
      text-align: justify;
    }
  }

  .block4-text {
    position: absolute;
    bottom: -27%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    width: 1030px;
    margin: 0 auto;
    z-index: 10;
    cursor: pointer;

    .block4-text-img.active {
      border: none;

      .block4-text-img-text1 {
        font-weight: bold;
        color: #dc382c;
      }

      .block4-text-img-text2 {
        font-weight: bold;
        color: #dc382c;
      }
    }

    .block4-text-img {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 15;
      cursor: pointer;

      .block4-text-img-text1 {
        font-size: 28.5px;
        font-weight: normal;
        color: #ffffff;
      }

      .block4-text-img-text2 {
        font-size: 16.2px;
        font-weight: normal;
        color: #ffffff;
      }

      img {
        margin-top: 10px;
      }
    }
  }

  .block4-img {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
  }
}

.block5 {
  height: 1030px;

  .img-content {
    padding-top: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    width: 1200px;
  }

  .year-img {
    position: absolute;
    top: 50%;
    left: 270px;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 554px;
  }

  .year {
    position: relative;
    height: 390px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 1200px;
    margin: 80px auto;

    .year-item {
      width: 278px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .year-item-text.active {
        color: #045ea9;
        font-weight: normal;
        border: none;
      }

      .year-item-text {
        font-size: 35.5px;
        font-weight: normal;
        color: #a4a4a4;
        width: 190px;
        text-align: end;
      }
    }

    .blank-icon {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #bebcbc;
      z-index: 100;
    }
  }
}

.year-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 242px;

  .year-content-item {
    .year-content-item-text1 {
      font-size: 20.3px;
      color: #045ea9;
      margin-bottom: 10px;
    }

    .year-content-item-text2 {
      font-size: 15.23px;
      color: #a2a2a2;
    }
  }
}