.history-box { display: flex; flex-wrap: wrap; position: relative; }
.history-box .history-head-wrap { width: 50%; padding-right: 135px; box-sizing: border-box; transition: all 0.3s ease; }
.history-box .history-body { width: 50%; padding-left: 100px; box-sizing: border-box; position: relative; }
.history-box .history-body:before { content: ""; width: 2px; height: 100%; background: #ccc; position: absolute; left: 89px; top: 0; bottom: 0; }
.history-banner { border-radius: 10px; overflow: hidden; position: relative; width: 100%; max-width: 451px; aspect-ratio: 451 / 446; height: auto; }
.history-banner:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(180deg, #000000 0%, rgba(102, 102, 102, 0) 100%); opacity: 0.3; z-index: 0; }
.history-banner img { width: 100%; height: 100%; object-fit: cover; }
.history-tit { position: absolute; bottom: 20px; left: 20px; z-index: 99; font-family: Prompt; color: #ffffff8a; font-weight: 700; font-size: 52px; line-height: 100%; letter-spacing: 0%; }
.history-tit p { font-family: Prompt; font-weight: 700; font-size: 80px; line-height: 90%; letter-spacing: -0.1px; text-align: center; color: #fff; }
.history-tit p span { color: #43c1c3; }
.history-head ul li + li { margin: 20px 0 0 0; }
.history-head ul li a { font-weight: 700; font-size: 40px; line-height: 100%; letter-spacing: -0.2px; color: #d9d9d9; }
.history-head ul li.active a { color: #004bae; }
.history-inner + .history-inner, .block + .block { margin-top: 80px; }
.history-inner { display: flex; gap: 50px; position: relative; transition: all 0.5s; }
.history-inner:before { content: ""; position: absolute; left: -10px; top: 14px; width: 11px; height: 11px; background: #fff; border: 2px solid #ddd; border-radius: 50%; z-index: 99; transform: translate(-50%, -50%); box-sizing: border-box; }
.history-inner.active:before { width: 15px; height: 15px; background: #ed903f; border: 2px solid #ed903f; box-shadow: inset 0 0 0 2px #fff; }
.history-inner .history-year { transform: translateX(-152px); width: 60px; margin-right: -60px; color: #111111; font-weight: 700; font-size: 30px; line-height: 140%; letter-spacing: -2%; }
.history-inner .history-desc { display: flex; gap: 40px 0; flex-direction: column; flex: 1; }
.history-inner .history-desc .history-month { display: flex; gap: 40px; align-items: baseline; }
.history-inner .history-desc .history-month .month-box { color: #111; width: 32px; font-weight: 700; font-size: 24px; line-height: 140%; letter-spacing: -2%; }
.history-inner .history-desc .history-month .txt-box { flex: 1; }
.history-inner .history-desc .history-month .txt-box > ul { display: flex; flex-direction: column; }
.history-inner .history-desc .history-month .txt-box > ul > li { display: flex; align-items: center; justify-content: flex-start; gap: 0 20px; position: relative; padding: 0 0 10px 11px; }
.history-inner .history-desc .history-month .txt-box > ul > li:last-child { padding-bottom: 0; }
.history-inner .history-desc .history-month .txt-box > ul > li p { color: #444; flex: 1; font-weight: 500; font-size: 16px; line-height: 160%; letter-spacing: -2%; }
.history-body { position: relative; }
.history-body .point-cir { position: absolute; left: 75px; top: 0; z-index: 50; }
.history-body .point-cir .dot { display: block; }
.history-body .point-cir .bar { width: 2px; height: 0; background: #ed903f; position: absolute; bottom: 25px; left: 14px; }
.history-body.active .point-cir .dot { opacity: 1; }
.history-banner .swiper { height: 340px; }
.history-banner .swiper img { width: 100%; height: 100%; object-fit: cover; }
.is-sp { display: none; }
@media (max-width: 1200px) {
  .history-tit p { font-size: calc(80 / 1200 * 100vw); }
}
@media (max-width: 1024px) {
  .history-inner { flex-direction: row; gap: 25px; }
  .history-tit { font-size: 38px; bottom: 10px; left: 10px; }
}
@media (max-width: 768px) {
  .is-sp { display: block; }
  .is-pc { display: none; }
  .history-tit p { font-size: calc(80 / 768 * 100vw); }
  .history-head ul li a { display: none; }
  .history-head ul li.active a { display: block; }
  .history-box { flex-direction: column; gap: 0; }
  .history-head > ul { display: flex; gap: 10px 0; flex-wrap: wrap; }
  .history-head > ul li + li { margin: 0; }
  .history-head ul li a { font-size: 20px; }
  .history-box .history-head-wrap { width: 100%; padding-right: 0; }
  .history-box .history-body { width: 100%; padding-left: 0; }
  .history-banner { width: 100%; max-width: unset; margin: 0 0 30px 0; position: relative; z-index: 60; height: calc(500 / 768 * 100vw); }
  .history-inner:before { left: 103px; }
  .history-inner { display: flex; gap: 90px; flex-direction: row; }
  .history-inner .history-year { transform: translateX(0); margin-right: 0; text-align: left; width: 53px; margin: 0px 0 20px 0; font-size: 20px; }
  .history-inner .history-desc { flex: 1; }
  .history-body .point-cir { position: relative; }
  .history-body .point-cir .bar { left: 16px; width: 2px; }
  .history-body .point-cir { left: 87px; }
  .history-box .history-body:before { left: 103px; height: calc(100% - 30px); }
  .history-inner + .history-inner, .block + .block { margin-top: 20px; }
  .history-inner .history-desc .history-month .month-box { font-size: 15px; width: 40px; }
  .history-inner .history-desc .history-month { gap: 10px; }
  .history-head.fixed > ul { background: #fff; position: fixed; top: 56px; left: 0; padding: 10px 16px; width: 100%; box-sizing: border-box; z-index: 500; }
}
@media (max-width: 768px) {}